npm - @gallop.software/studio - Versions diffs - 0.1.74 → 0.1.76 - Mend

@gallop.software/studio 0.1.74 → 0.1.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/{StudioUI-4ODY2HZQ.js → StudioUI-3BYIEK6S.js} +4 -4
package/dist/{StudioUI-4ODY2HZQ.js.map → StudioUI-3BYIEK6S.js.map} +1 -1
package/dist/{StudioUI-N5Q5PMSR.mjs → StudioUI-Z3NEQOGJ.mjs} +4 -4
package/dist/StudioUI-Z3NEQOGJ.mjs.map +1 -0
package/dist/handlers.d.mts +0 -5
package/dist/handlers.d.ts +0 -5
package/dist/handlers.js +21 -82
package/dist/handlers.js.map +1 -1
package/dist/handlers.mjs +0 -61
package/dist/handlers.mjs.map +1 -1
package/dist/index.js +1 -1
package/dist/index.mjs +1 -1
package/package.json +1 -1
package/dist/StudioUI-N5Q5PMSR.mjs.map +0 -1

package/dist/{StudioUI-4ODY2HZQ.js.map → StudioUI-3BYIEK6S.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["/Users/chrisb/Sites/studio/dist/StudioUI-4ODY2HZQ.js","../src/components/StudioUI.tsx","../src/components/StudioContext.tsx","../src/components/StudioToolbar.tsx","../src/components/StudioModal.tsx","../src/components/StudioFolderPicker.tsx","../src/components/StudioFileGrid.tsx","../src/components/StudioFileList.tsx","../src/components/StudioDetailView.tsx","../src/components/StudioSettings.tsx"],"names":["keyframes","css","jsx","styles","Fragment","jsxs","useEffect","useState","useRef","useCallback"],"mappings":"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","file":"/Users/chrisb/Sites/studio/dist/StudioUI-4ODY2HZQ.js","sourcesContent":[null,"/** @jsxImportSource @emotion/react /\n'use client'\n\nimport { useEffect, useCallback, useState } from 'react'\nimport { css } from '@emotion/react'\nimport { StudioContext } from './StudioContext'\nimport { StudioToolbar } from './StudioToolbar'\nimport { StudioFileGrid } from './StudioFileGrid'\nimport { StudioFileList } from './StudioFileList'\nimport { StudioDetailView } from './StudioDetailView'\nimport { StudioSettings } from './StudioSettings'\nimport { colors, fontSize, baseReset } from './tokens'\nimport type { FileItem, LeanMeta } from '../types'\n\ninterface StudioUIProps {\n onClose: () => void\n isVisible?: boolean\n}\n\n// Standard button height for consistency\nconst btnHeight = '36px'\n\nconst styles = {\n container: css`\n ${baseReset}\n display: flex;\n flex-direction: column;\n height: 100%;\n background: ${colors.background};\n `,\n header: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 24px;\n background: ${colors.surface};\n border-bottom: 1px solid ${colors.border};\n position: relative;\n `,\n title: css`\n font-size: ${fontSize.lg};\n font-weight: 600;\n color: ${colors.text};\n margin: 0;\n letter-spacing: -0.02em;\n flex-shrink: 0;\n `,\n headerLeft: css`\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n `,\n headerCenter: css`\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n max-width: 50%;\n `,\n breadcrumbs: css`\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: ${fontSize.base};\n color: ${colors.textSecondary};\n overflow: hidden;\n `,\n breadcrumbSeparator: css`\n color: ${colors.border};\n flex-shrink: 0;\n `,\n breadcrumbItem: css`\n color: ${colors.textSecondary};\n text-decoration: none;\n cursor: pointer;\n transition: color 0.15s ease;\n white-space: nowrap;\n \n &:hover {\n color: ${colors.primary};\n }\n `,\n breadcrumbCurrent: css`\n color: ${colors.text};\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n headerActions: css`\n display: flex;\n align-items: center;\n gap: 8px;\n `,\n headerBtn: css`\n height: ${btnHeight};\n padding: 0 12px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n headerIcon: css`\n width: 16px;\n height: 16px;\n color: ${colors.textSecondary};\n `,\n content: css`\n flex: 1;\n display: flex;\n overflow: hidden;\n `,\n fileBrowser: css`\n flex: 1;\n min-width: 0;\n overflow: auto;\n padding: 20px 24px;\n `,\n dropOverlay: css`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(99, 91, 255, 0.1);\n border: 3px dashed ${colors.primary};\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 50;\n pointer-events: none;\n `,\n dropMessage: css`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n color: ${colors.primary};\n font-size: ${fontSize.lg};\n font-weight: 600;\n `,\n dropIcon: css`\n width: 48px;\n height: 48px;\n `,\n}\n\n/\n Main Studio UI - contains all panels and manages internal state\n * Rendered inside the modal via lazy loading\n /\nexport function StudioUI({ onClose, isVisible = true }: StudioUIProps) {\n const [currentPath, setCurrentPathInternal] = useState('public')\n const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set())\n const [lastSelectedPath, setLastSelectedPath] = useState<string \| null>(null)\n const [viewMode, setViewMode] = useState<'grid' \| 'list'>('grid')\n const [focusedItem, setFocusedItem] = useState<FileItem \| null>(null)\n const [meta, setMeta] = useState<LeanMeta \| null>(null)\n const [isLoading, setIsLoading] = useState(false)\n const [refreshKey, setRefreshKey] = useState(0)\n const [searchQuery, setSearchQuery] = useState('')\n const [isDragging, setIsDragging] = useState(false)\n\n const triggerRefresh = useCallback(() => {\n setRefreshKey((k) => k + 1)\n }, [])\n\n const handleDragOver = useCallback((e: React.DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setIsDragging(true)\n }, [])\n\n const handleDragLeave = useCallback((e: React.DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setIsDragging(false)\n }, [])\n\n const handleDrop = useCallback(async (e: React.DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setIsDragging(false)\n\n const files = Array.from(e.dataTransfer.files)\n if (files.length === 0) return\n\n // Don't allow drops in the images folder\n if (currentPath === 'public/images' \|\| currentPath.startsWith('public/images/')) {\n return\n }\n\n for (const file of files) {\n const formData = new FormData()\n formData.append('file', file)\n formData.append('path', currentPath)\n\n try {\n await fetch('/api/studio/upload', {\n method: 'POST',\n body: formData,\n })\n } catch (error) {\n console.error('Upload error:', error)\n }\n }\n triggerRefresh()\n }, [currentPath, triggerRefresh])\n\n const navigateUp = useCallback(() => {\n if (currentPath === 'public') return\n const parts = currentPath.split('/')\n parts.pop()\n setCurrentPathInternal(parts.join('/') \|\| 'public')\n setSelectedItems(new Set())\n }, [currentPath])\n\n const setCurrentPath = useCallback((path: string) => {\n setCurrentPathInternal(path)\n setSelectedItems(new Set())\n setFocusedItem(null)\n }, [])\n\n const toggleSelection = useCallback((path: string) => {\n setSelectedItems((prev) => {\n const next = new Set(prev)\n if (next.has(path)) {\n next.delete(path)\n } else {\n next.add(path)\n }\n return next\n })\n setLastSelectedPath(path)\n }, [])\n\n const selectRange = useCallback((fromPath: string, toPath: string, allItems: FileItem[]) => {\n const fromIndex = allItems.findIndex(item => item.path === fromPath)\n const toIndex = allItems.findIndex(item => item.path === toPath)\n \n if (fromIndex === -1 \|\| toIndex === -1) return\n \n const start = Math.min(fromIndex, toIndex)\n const end = Math.max(fromIndex, toIndex)\n \n setSelectedItems((prev) => {\n const next = new Set(prev)\n for (let i = start; i <= end; i++) {\n next.add(allItems[i].path)\n }\n return next\n })\n setLastSelectedPath(toPath)\n }, [])\n\n const selectAll = useCallback((items: FileItem[]) => {\n setSelectedItems(new Set(items.map((item) => item.path)))\n }, [])\n\n const clearSelection = useCallback(() => {\n setSelectedItems(new Set())\n }, [])\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n // Don't close if user is in an input field (e.g., search)\n const target = e.target as HTMLElement\n if (target.tagName === 'INPUT' \|\| target.tagName === 'TEXTAREA') {\n return\n }\n \n if (focusedItem) {\n setFocusedItem(null)\n } else {\n onClose()\n }\n }\n },\n [onClose, focusedItem]\n )\n\n useEffect(() => {\n if (isVisible) {\n document.addEventListener('keydown', handleKeyDown)\n document.body.style.overflow = 'hidden'\n }\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.body.style.overflow = ''\n }\n }, [handleKeyDown, isVisible])\n\n const contextValue = {\n isOpen: true,\n openStudio: () => {},\n closeStudio: onClose,\n toggleStudio: onClose,\n currentPath,\n setCurrentPath,\n navigateUp,\n selectedItems,\n toggleSelection,\n selectRange,\n selectAll,\n clearSelection,\n lastSelectedPath,\n viewMode,\n setViewMode,\n focusedItem,\n setFocusedItem,\n meta,\n setMeta,\n isLoading,\n setIsLoading,\n refreshKey,\n triggerRefresh,\n searchQuery,\n setSearchQuery,\n }\n\n return (\n <StudioContext.Provider value={contextValue}>\n <div css={styles.container}>\n <div css={styles.header}>\n <div css={styles.headerLeft}>\n <h1 css={styles.title}>Studio</h1>\n </div>\n <div css={styles.headerCenter}>\n <Breadcrumbs currentPath={currentPath} onNavigate={setCurrentPath} />\n </div>\n <div css={styles.headerActions}>\n <StudioSettings />\n <button\n css={styles.headerBtn}\n onClick={onClose}\n aria-label=\"Close Studio\"\n >\n <CloseIcon />\n </button>\n </div>\n </div>\n\n <StudioToolbar />\n\n <div \n css={styles.content}\n onDragOver={handleDragOver}\n onDragLeave={handleDragLeave}\n onDrop={handleDrop}\n >\n {isDragging && (\n <div css={styles.dropOverlay}>\n <div css={styles.dropMessage}>\n <svg css={styles.dropIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12\" />\n </svg>\n <span>Drop files to upload</span>\n </div>\n </div>\n )}\n <div css={styles.fileBrowser}>\n {viewMode === 'grid' ? <StudioFileGrid /> : <StudioFileList />}\n </div>\n </div>\n \n {/ Detail view as modal overlay /}\n {focusedItem && <StudioDetailView />}\n </div>\n </StudioContext.Provider>\n )\n}\n\nfunction Breadcrumbs({ currentPath, onNavigate }: { currentPath: string; onNavigate: (path: string) => void }) {\n const parts = currentPath.split('/').filter(Boolean)\n \n // Build paths for each breadcrumb\n const breadcrumbs = parts.map((part, index) => ({\n name: part,\n path: parts.slice(0, index + 1).join('/')\n }))\n\n return (\n <div css={styles.breadcrumbs}>\n {breadcrumbs.map((crumb, index) => (\n <span key={crumb.path} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>\n {index > 0 && <span css={styles.breadcrumbSeparator}>/</span>}\n {index === breadcrumbs.length - 1 ? (\n <span css={styles.breadcrumbCurrent}>{crumb.name}</span>\n ) : (\n <span\n css={styles.breadcrumbItem}\n onClick={() => onNavigate(crumb.path)}\n >\n {crumb.name}\n </span>\n )}\n </span>\n ))}\n </div>\n )\n}\n\nfunction CloseIcon() {\n return (\n <svg\n css={styles.headerIcon}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={2}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n )\n}\n\nexport default StudioUI\n","'use client'\n\nimport { createContext, useContext } from 'react'\nimport type { FileItem, LeanMeta } from '../types'\n\n/\n Studio state interface\n * State is managed by StudioUI and provided to all child components\n /\nexport interface StudioState {\n isOpen: boolean\n openStudio: () => void\n closeStudio: () => void\n toggleStudio: () => void\n\n // Navigation\n currentPath: string\n setCurrentPath: (path: string) => void\n navigateUp: () => void\n\n // Selection\n selectedItems: Set<string>\n toggleSelection: (path: string) => void\n selectRange: (fromPath: string, toPath: string, allItems: FileItem[]) => void\n selectAll: (items: FileItem[]) => void\n clearSelection: () => void\n lastSelectedPath: string \| null\n\n // View\n viewMode: 'grid' \| 'list'\n setViewMode: (mode: 'grid' \| 'list') => void\n\n // Focused item (for detail view)\n focusedItem: FileItem \| null\n setFocusedItem: (item: FileItem \| null) => void\n\n // Meta\n meta: LeanMeta \| null\n setMeta: (meta: LeanMeta) => void\n\n // Loading\n isLoading: boolean\n setIsLoading: (loading: boolean) => void\n\n // Refresh trigger\n refreshKey: number\n triggerRefresh: () => void\n\n // Search\n searchQuery: string\n setSearchQuery: (query: string) => void\n}\n\nconst defaultState: StudioState = {\n isOpen: false,\n openStudio: () => {},\n closeStudio: () => {},\n toggleStudio: () => {},\n currentPath: 'public',\n setCurrentPath: () => {},\n navigateUp: () => {},\n selectedItems: new Set(),\n toggleSelection: () => {},\n selectRange: () => {},\n selectAll: () => {},\n clearSelection: () => {},\n lastSelectedPath: null,\n viewMode: 'grid',\n setViewMode: () => {},\n focusedItem: null,\n setFocusedItem: () => {},\n meta: null,\n setMeta: () => {},\n isLoading: false,\n setIsLoading: () => {},\n refreshKey: 0,\n triggerRefresh: () => {},\n searchQuery: '',\n setSearchQuery: () => {},\n}\n\nexport const StudioContext = createContext<StudioState>(defaultState)\n\n/\n Hook to access Studio state from child components\n /\nexport function useStudio() {\n return useContext(StudioContext)\n}\n","/* @jsxImportSource @emotion/react /\n'use client'\n\nimport { useCallback, useRef, useState } from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { useStudio } from './StudioContext'\nimport { ConfirmModal, AlertModal, ProgressModal, InputModal, type ProgressState } from './StudioModal'\nimport { StudioFolderPicker } from './StudioFolderPicker'\nimport { colors, fontSize } from './tokens'\n\n// Standard button height for consistency\nconst btnHeight = '36px'\n\nconst spin = keyframes`\n to { transform: rotate(360deg); }\n`\n\nconst styles = {\n toolbar: css`\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 12px 16px;\n background-color: ${colors.surface};\n border-bottom: 1px solid ${colors.border};\n overflow-x: auto;\n min-width: 0;\n \n @media (min-width: 768px) {\n padding: 12px 24px;\n }\n `,\n left: css`\n display: flex;\n flex-wrap: nowrap;\n flex-shrink: 0;\n align-items: center;\n gap: 8px;\n `,\n right: css`\n display: flex;\n flex-wrap: nowrap;\n flex-shrink: 0;\n align-items: center;\n gap: 8px;\n `,\n btn: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: ${btnHeight};\n padding: 0 14px;\n border-radius: 6px;\n font-size: ${fontSize.base};\n font-weight: 500;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n cursor: pointer;\n transition: all 0.15s ease;\n color: ${colors.text};\n letter-spacing: -0.01em;\n \n &:hover:not(:disabled) {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n \n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n `,\n btnIconOnly: css`\n padding: 0 10px;\n `,\n btnPrimary: css`\n background: ${colors.primary};\n border-color: ${colors.primary};\n color: white;\n \n &:hover:not(:disabled) {\n background: ${colors.primaryHover};\n border-color: ${colors.primaryHover};\n }\n `,\n btnDanger: css`\n color: ${colors.danger};\n \n &:hover:not(:disabled) {\n background-color: ${colors.dangerLight};\n border-color: ${colors.danger};\n }\n `,\n icon: css`\n width: 16px;\n height: 16px;\n `,\n iconSpin: css`\n animation: ${spin} 1s linear infinite;\n `,\n selectionCount: css`\n font-size: ${fontSize.base};\n color: ${colors.textSecondary};\n display: flex;\n align-items: center;\n gap: 8px;\n margin-right: 8px;\n `,\n clearBtn: css`\n color: ${colors.primary};\n background: none;\n border: none;\n cursor: pointer;\n font-size: ${fontSize.base};\n font-weight: 500;\n padding: 0;\n \n &:hover {\n text-decoration: underline;\n }\n `,\n divider: css`\n width: 1px;\n height: 24px;\n background: ${colors.border};\n margin: 0 4px;\n `,\n viewToggle: css`\n display: flex;\n align-items: center;\n height: ${btnHeight};\n background-color: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n overflow: hidden;\n `,\n searchWrapper: css`\n position: relative;\n display: flex;\n align-items: center;\n `,\n searchInput: css`\n height: ${btnHeight};\n padding: 0 32px 0 12px;\n border: 1px solid ${colors.border};\n border-radius: 6px;\n font-size: ${fontSize.base};\n background: ${colors.surface};\n color: ${colors.text};\n width: 180px;\n transition: all 0.15s ease;\n \n &:focus {\n outline: none;\n border-color: ${colors.primary};\n box-shadow: 0 0 0 2px ${colors.primaryLight};\n }\n \n &::placeholder {\n color: ${colors.textMuted};\n }\n `,\n searchClearBtn: css`\n position: absolute;\n right: 5px;\n top: 5px;\n bottom: 5px;\n background: ${colors.primary};\n border: none;\n padding: 0 6px;\n cursor: pointer;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: all 0.15s ease;\n \n &:hover {\n background: ${colors.primaryHover};\n }\n `,\n viewBtn: css`\n height: 100%;\n padding: 0 10px;\n background: transparent;\n border: none;\n cursor: pointer;\n color: ${colors.textSecondary};\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n color: ${colors.text};\n background-color: ${colors.surfaceHover};\n }\n `,\n viewBtnActive: css`\n background-color: ${colors.primaryLight};\n color: ${colors.primary};\n \n &:hover {\n background-color: ${colors.primaryLight};\n color: ${colors.primary};\n }\n `,\n}\n\nexport function StudioToolbar() {\n const { selectedItems, viewMode, setViewMode, clearSelection, currentPath, triggerRefresh, focusedItem } = useStudio()\n const fileInputRef = useRef<HTMLInputElement>(null)\n const abortControllerRef = useRef<AbortController \| null>(null)\n const [uploading, setUploading] = useState(false)\n const [refreshing, setRefreshing] = useState(false)\n const [processing, setProcessing] = useState(false)\n const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)\n const [showProcessConfirm, setShowProcessConfirm] = useState(false)\n const [showProgress, setShowProgress] = useState(false)\n const [progressState, setProgressState] = useState<ProgressState>({\n current: 0,\n total: 0,\n percent: 0,\n status: 'processing',\n })\n const [processCount, setProcessCount] = useState(0)\n const [processMode, setProcessMode] = useState<'all' \| 'selected'>('all')\n const [imagesToProcess, setImagesToProcess] = useState<string[]>([])\n const [alertMessage, setAlertMessage] = useState<{ title: string; message: string } \| null>(null)\n const [showNewFolderModal, setShowNewFolderModal] = useState(false)\n const [showMoveModal, setShowMoveModal] = useState(false)\n\n // Check if we're in the images folder (uploads not allowed there)\n const isInImagesFolder = currentPath === 'public/images' \|\| currentPath.startsWith('public/images/')\n\n const handleUpload = useCallback(() => {\n fileInputRef.current?.click()\n }, [])\n\n const handleRefresh = useCallback(() => {\n setRefreshing(true)\n triggerRefresh()\n setTimeout(() => setRefreshing(false), 600)\n }, [triggerRefresh])\n\n const handleFileChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {\n const files = e.target.files\n if (!files \|\| files.length === 0) return\n\n setUploading(true)\n try {\n for (const file of Array.from(files)) {\n const formData = new FormData()\n formData.append('file', file)\n formData.append('path', currentPath)\n\n const response = await fetch('/api/studio/upload', {\n method: 'POST',\n body: formData,\n })\n\n if (!response.ok) {\n const error = await response.json()\n if (response.status >= 500) {\n console.error('Upload error:', error)\n setAlertMessage({\n title: 'Upload Failed',\n message: `Failed to upload ${file.name}: ${error.error \|\| 'Unknown error'}`,\n })\n } else {\n setAlertMessage({\n title: 'Cannot Upload Here',\n message: error.error \|\| 'Upload not allowed in this location.',\n })\n }\n }\n }\n triggerRefresh()\n } catch (error) {\n console.error('Upload error:', error)\n setAlertMessage({\n title: 'Upload Failed',\n message: 'Upload failed. Check console for details.',\n })\n } finally {\n setUploading(false)\n if (fileInputRef.current) {\n fileInputRef.current.value = ''\n }\n }\n }, [currentPath, triggerRefresh])\n\n const handleProcessImages = useCallback(async () => {\n const hasSelection = selectedItems.size > 0\n \n if (hasSelection) {\n const selectedPaths = Array.from(selectedItems)\n \n // Separate folders and image files\n const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'ico', 'bmp', 'tiff', 'tif']\n const selectedImagePaths = selectedPaths.filter(p => {\n const ext = p.split('.').pop()?.toLowerCase() \|\| ''\n return imageExtensions.includes(ext)\n })\n const selectedFolders = selectedPaths.filter(p => !p.includes('.') \|\| p.endsWith('/'))\n \n // If folders are selected, fetch all images from them\n if (selectedFolders.length > 0) {\n try {\n const response = await fetch(`/api/studio/folder-images?folders=${encodeURIComponent(selectedFolders.join(','))}`)\n const data = await response.json()\n \n if (data.images) {\n // Add folder images to selectedImagePaths (as public/ paths)\n for (const img of data.images) {\n const fullPath = `public/${img}`\n if (!selectedImagePaths.includes(fullPath)) {\n selectedImagePaths.push(fullPath)\n }\n }\n }\n } catch (error) {\n console.error('Failed to get folder images:', error)\n }\n }\n \n if (selectedImagePaths.length === 0) {\n setAlertMessage({\n title: 'No Images Found',\n message: 'No images found in the selected items.',\n })\n return\n }\n \n setProcessCount(selectedImagePaths.length)\n setImagesToProcess(selectedImagePaths)\n setProcessMode('selected')\n setShowProcessConfirm(true)\n } else {\n // Count ALL images for \"process all\"\n try {\n const response = await fetch('/api/studio/count-images')\n const data = await response.json()\n \n if (data.count === 0) {\n setAlertMessage({\n title: 'No Images Found',\n message: 'No images found in the public folder to process.',\n })\n return\n }\n \n setProcessCount(data.count)\n setProcessMode('all')\n setShowProcessConfirm(true)\n } catch (error) {\n console.error('Failed to count images:', error)\n setAlertMessage({\n title: 'Error',\n message: 'Failed to count images.',\n })\n }\n }\n }, [selectedItems])\n\n const handleProcessConfirm = useCallback(async () => {\n setShowProcessConfirm(false)\n setProcessing(true)\n\n // Create new AbortController for this request\n abortControllerRef.current = new AbortController()\n const signal = abortControllerRef.current.signal\n\n try {\n if (processMode === 'all') {\n // Process all images with streaming progress\n setShowProgress(true)\n setProgressState({\n current: 0,\n total: processCount,\n percent: 0,\n status: 'processing',\n })\n\n const response = await fetch('/api/studio/process-all', {\n method: 'POST',\n signal,\n })\n\n if (!response.body) {\n throw new Error('No response body')\n }\n\n const reader = response.body.getReader()\n const decoder = new TextDecoder()\n\n try {\n while (true) {\n const { done, value } = await reader.read()\n if (done) break\n\n // Check if aborted\n if (signal.aborted) {\n reader.cancel()\n break\n }\n\n const text = decoder.decode(value)\n const lines = text.split('\\n\\n').filter(line => line.startsWith('data: '))\n\n for (const line of lines) {\n try {\n const data = JSON.parse(line.replace('data: ', ''))\n \n if (data.type === 'start') {\n setProgressState(prev => ({\n ...prev,\n total: data.total,\n }))\n } else if (data.type === 'progress') {\n setProgressState({\n current: data.current,\n total: data.total,\n percent: data.percent,\n currentFile: data.currentFile,\n status: 'processing',\n })\n } else if (data.type === 'cleanup') {\n setProgressState(prev => ({\n ...prev,\n status: 'cleanup',\n currentFile: undefined,\n }))\n } else if (data.type === 'complete') {\n setProgressState({\n current: data.processed,\n total: data.processed,\n percent: 100,\n status: 'complete',\n processed: data.processed,\n orphansRemoved: data.orphansRemoved,\n errors: data.errors,\n })\n triggerRefresh()\n } else if (data.type === 'error') {\n setProgressState(prev => ({\n ...prev,\n status: 'error',\n message: data.message,\n }))\n }\n } catch {\n // Ignore parse errors\n }\n }\n }\n } catch (err) {\n if (signal.aborted) {\n // User stopped - update state to show stopped status\n setProgressState(prev => ({\n ...prev,\n status: 'stopped',\n processed: prev.current,\n }))\n triggerRefresh()\n } else {\n throw err\n }\n }\n } else {\n // Process selected images (no streaming for now)\n setShowProgress(true)\n setProgressState({\n current: 0,\n total: processCount,\n percent: 0,\n status: 'processing',\n })\n\n // Use stored imagesToProcess instead of selectedItems\n const selectedImageKeys = imagesToProcess.map(p => p.replace(/^public\\//, ''))\n \n const response = await fetch('/api/studio/reprocess', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ imageKeys: selectedImageKeys }),\n signal,\n })\n \n const data = await response.json()\n \n if (response.ok) {\n setProgressState({\n current: data.processed?.length \|\| 0,\n total: data.processed?.length \|\| 0,\n percent: 100,\n status: 'complete',\n processed: data.processed?.length \|\| 0,\n errors: data.errors?.length \|\| 0,\n })\n clearSelection()\n triggerRefresh()\n } else {\n setProgressState({\n current: 0,\n total: 0,\n percent: 0,\n status: 'error',\n message: data.error \|\| 'Unknown error',\n })\n }\n }\n } catch (error) {\n if (signal.aborted) {\n // User stopped\n setProgressState(prev => ({\n ...prev,\n status: 'stopped',\n processed: prev.current,\n }))\n triggerRefresh()\n } else {\n console.error('Processing error:', error)\n setProgressState({\n current: 0,\n total: 0,\n percent: 0,\n status: 'error',\n message: 'Processing failed. Check console for details.',\n })\n }\n } finally {\n setProcessing(false)\n abortControllerRef.current = null\n }\n }, [processMode, processCount, imagesToProcess, clearSelection, triggerRefresh])\n\n const handleStopProcessing = useCallback(() => {\n if (abortControllerRef.current) {\n abortControllerRef.current.abort()\n }\n }, [])\n\n const handleDeleteClick = useCallback(() => {\n if (selectedItems.size === 0) return\n setShowDeleteConfirm(true)\n }, [selectedItems])\n\n const handleDeleteConfirm = useCallback(async () => {\n setShowDeleteConfirm(false)\n \n try {\n const response = await fetch('/api/studio/delete', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ paths: Array.from(selectedItems) }),\n })\n\n if (response.ok) {\n clearSelection()\n triggerRefresh()\n } else {\n const error = await response.json()\n setAlertMessage({\n title: 'Delete Failed',\n message: error.error \|\| 'Unknown error',\n })\n }\n } catch (error) {\n console.error('Delete error:', error)\n setAlertMessage({\n title: 'Delete Failed',\n message: 'Delete failed. Check console for details.',\n })\n }\n }, [selectedItems, clearSelection, triggerRefresh])\n\n const handleSyncCdn = useCallback(() => {\n console.log('Sync CDN clicked', selectedItems)\n }, [selectedItems])\n\n const handleCreateFolder = useCallback(async (folderName: string) => {\n setShowNewFolderModal(false)\n \n try {\n const response = await fetch('/api/studio/create-folder', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ parentPath: currentPath, name: folderName }),\n })\n\n if (response.ok) {\n triggerRefresh()\n } else {\n const error = await response.json()\n setAlertMessage({\n title: 'Create Folder Failed',\n message: error.error \|\| 'Unknown error',\n })\n }\n } catch (error) {\n console.error('Create folder error:', error)\n setAlertMessage({\n title: 'Create Folder Failed',\n message: 'Failed to create folder. Check console for details.',\n })\n }\n }, [currentPath, triggerRefresh])\n\n const handleMoveClick = useCallback(() => {\n if (selectedItems.size === 0) return\n setShowMoveModal(true)\n }, [selectedItems])\n\n const handleMoveConfirm = useCallback(async (destination: string) => {\n try {\n const response = await fetch('/api/studio/move', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ paths: Array.from(selectedItems), destination }),\n })\n\n const data = await response.json()\n\n if (response.ok) {\n clearSelection()\n triggerRefresh()\n if (data.errors && data.errors.length > 0) {\n setAlertMessage({\n title: 'Move Completed with Errors',\n message: data.errors.join('\\n'),\n })\n }\n } else {\n setAlertMessage({\n title: 'Move Failed',\n message: data.error \|\| 'Unknown error',\n })\n }\n } catch (error) {\n console.error('Move error:', error)\n setAlertMessage({\n title: 'Move Failed',\n message: 'Failed to move items. Check console for details.',\n })\n }\n }, [selectedItems, clearSelection, triggerRefresh])\n\n const { searchQuery, setSearchQuery } = useStudio()\n \n const handleSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n setSearchQuery(e.target.value)\n }, [setSearchQuery])\n\n const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Escape') {\n e.stopPropagation() // Prevent closing the studio\n setSearchQuery('')\n ;(e.target as HTMLInputElement).blur()\n }\n }, [setSearchQuery])\n\n const hasSelection = selectedItems.size > 0\n \n // Check if any selected items are in the images folder (protected)\n const hasImagesSelected = Array.from(selectedItems).some(path => \n path === 'public/images' \|\| path.startsWith('public/images/')\n )\n\n // Hide toolbar actions when viewing detail\n if (focusedItem) {\n return null\n }\n\n return (\n <>\n {showDeleteConfirm && (\n <ConfirmModal\n title=\"Delete Items\"\n message={`Are you sure you want to delete ${selectedItems.size} item(s)? This action cannot be undone.`}\n confirmLabel=\"Delete\"\n variant=\"danger\"\n onConfirm={handleDeleteConfirm}\n onCancel={() => setShowDeleteConfirm(false)}\n />\n )}\n\n {showProcessConfirm && (\n <ConfirmModal\n title=\"Process Images\"\n message={processMode === 'all' \n ? `Found ${processCount} image${processCount !== 1 ? 's' : ''} in the public folder. This will regenerate all thumbnails and remove any orphaned files from the images folder.`\n : `Process ${processCount} selected image${processCount !== 1 ? 's' : ''}? This will regenerate thumbnails for these files.`\n }\n confirmLabel={processing ? 'Processing...' : 'Process'}\n onConfirm={handleProcessConfirm}\n onCancel={() => setShowProcessConfirm(false)}\n />\n )}\n\n {showProgress && (\n <ProgressModal\n title=\"Processing Images\"\n progress={progressState}\n onStop={handleStopProcessing}\n onClose={() => {\n setShowProgress(false)\n setProgressState({\n current: 0,\n total: 0,\n percent: 0,\n status: 'processing',\n })\n }}\n />\n )}\n\n {showNewFolderModal && (\n <InputModal\n title=\"New Folder\"\n message=\"Enter a name for the new folder:\"\n placeholder=\"Folder name\"\n confirmLabel=\"Create\"\n onConfirm={handleCreateFolder}\n onCancel={() => setShowNewFolderModal(false)}\n />\n )}\n\n {showMoveModal && (\n <StudioFolderPicker\n selectedItems={selectedItems}\n currentPath={currentPath}\n onMove={(destination) => {\n setShowMoveModal(false)\n handleMoveConfirm(destination)\n }}\n onCancel={() => setShowMoveModal(false)}\n />\n )}\n\n {alertMessage && (\n <AlertModal\n title={alertMessage.title}\n message={alertMessage.message}\n onClose={() => setAlertMessage(null)}\n />\n )}\n\n <div css={styles.toolbar}>\n <input\n ref={fileInputRef}\n type=\"file\"\n multiple\n accept=\"image/,video/,audio/,.pdf\"\n onChange={handleFileChange}\n style={{ display: 'none' }}\n />\n \n <div css={styles.left}>\n <button\n css={[styles.btn, styles.btnPrimary]}\n onClick={handleUpload}\n disabled={uploading \|\| isInImagesFolder}\n >\n <UploadIcon />\n {uploading ? 'Uploading...' : 'Upload'}\n </button>\n <button\n css={styles.btn}\n onClick={() => setShowNewFolderModal(true)}\n disabled={isInImagesFolder}\n title={isInImagesFolder ? 'Cannot create folders in protected images folder' : undefined}\n >\n <FolderPlusIcon />\n New Folder\n </button>\n \n <div css={styles.divider} />\n \n <button\n css={styles.btn}\n onClick={handleProcessImages}\n disabled={processing \|\| isInImagesFolder \|\| hasImagesSelected}\n title={isInImagesFolder \|\| hasImagesSelected ? 'Cannot process protected images folder' : undefined}\n >\n <ImageStackIcon />\n {processing ? 'Processing...' : 'Process Images'}\n </button>\n <button\n css={[styles.btn, styles.btnDanger]}\n onClick={handleDeleteClick}\n disabled={!hasSelection \|\| hasImagesSelected}\n title={hasImagesSelected ? 'Cannot delete protected images folder items' : undefined}\n >\n <TrashIcon />\n Delete\n </button>\n <button\n css={styles.btn}\n onClick={handleMoveClick}\n disabled={!hasSelection \|\| hasImagesSelected}\n title={hasImagesSelected ? 'Cannot move protected images folder items' : undefined}\n >\n <MoveIcon />\n Move\n </button>\n <button\n css={styles.btn}\n onClick={handleSyncCdn}\n disabled={!hasSelection}\n >\n <CloudIcon />\n Sync CDN\n </button>\n <div css={styles.searchWrapper}>\n <input\n css={styles.searchInput}\n type=\"text\"\n placeholder=\"Search images...\"\n value={searchQuery}\n onChange={handleSearch}\n onKeyDown={handleSearchKeyDown}\n />\n {searchQuery && (\n <button\n css={styles.searchClearBtn}\n onClick={() => setSearchQuery('')}\n title=\"Clear search\"\n >\n <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div css={styles.right}>\n {hasSelection && (\n <span css={styles.selectionCount}>\n {selectedItems.size} selected\n <button css={styles.clearBtn} onClick={clearSelection}>\n Clear\n </button>\n </span>\n )}\n\n <button\n css={[styles.btn, styles.btnIconOnly]}\n onClick={handleRefresh}\n >\n <RefreshIcon spinning={refreshing} />\n </button>\n\n <div css={styles.viewToggle}>\n <button\n css={[styles.viewBtn, viewMode === 'grid' && styles.viewBtnActive]}\n onClick={() => setViewMode('grid')}\n aria-label=\"Grid view\"\n >\n <GridIcon />\n </button>\n <button\n css={[styles.viewBtn, viewMode === 'list' && styles.viewBtnActive]}\n onClick={() => setViewMode('list')}\n aria-label=\"List view\"\n >\n <ListIcon />\n </button>\n </div>\n </div>\n </div>\n </>\n )\n}\n\nfunction UploadIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12\" />\n </svg>\n )\n}\n\nfunction RefreshIcon({ spinning }: { spinning?: boolean }) {\n return (\n <svg css={[styles.icon, spinning && styles.iconSpin]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n </svg>\n )\n}\n\nfunction TrashIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" />\n </svg>\n )\n}\n\nfunction FolderPlusIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n </svg>\n )\n}\n\nfunction MoveIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4\" />\n </svg>\n )\n}\n\nfunction CloudIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" />\n </svg>\n )\n}\n\nfunction ScanIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n </svg>\n )\n}\n\nfunction GridIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\" />\n </svg>\n )\n}\n\nfunction ListIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 10h16M4 14h16M4 18h16\" />\n </svg>\n )\n}\n\nfunction ImageStackIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n )\n}\n","/** @jsxImportSource @emotion/react /\n'use client'\n\nimport React from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { colors, fontSize, fontStack, baseReset } from './tokens'\n\nconst fadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`\n\nconst slideIn = keyframes`\n from { \n opacity: 0;\n transform: translateY(-8px) scale(0.98);\n }\n to { \n opacity: 1;\n transform: translateY(0) scale(1);\n }\n`\n\nconst styles = {\n overlay: css`\n position: fixed;\n inset: 0;\n background-color: rgba(26, 31, 54, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: ${fadeIn} 0.15s ease-out;\n font-family: ${fontStack};\n `,\n modal: css`\n ${baseReset}\n background-color: ${colors.surface};\n border-radius: 12px;\n box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);\n max-width: 420px;\n width: 90%;\n animation: ${slideIn} 0.2s ease-out;\n overflow: hidden;\n `,\n header: css`\n padding: 24px 24px 0;\n `,\n title: css`\n font-size: ${fontSize.lg};\n font-weight: 600;\n color: ${colors.text};\n margin: 0;\n letter-spacing: -0.02em;\n `,\n body: css`\n padding: 12px 24px 24px;\n `,\n message: css`\n font-size: ${fontSize.base};\n color: ${colors.textSecondary};\n margin: 0;\n line-height: 1.6;\n `,\n footer: css`\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid ${colors.border};\n background-color: ${colors.background};\n `,\n btn: css`\n padding: 10px 18px;\n font-size: ${fontSize.base};\n font-weight: 500;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n letter-spacing: -0.01em;\n `,\n btnCancel: css`\n background-color: ${colors.surface};\n border: 1px solid ${colors.border};\n color: ${colors.text};\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n btnConfirm: css`\n background-color: ${colors.primary};\n border: 1px solid ${colors.primary};\n color: white;\n \n &:hover {\n background-color: ${colors.primaryHover};\n border-color: ${colors.primaryHover};\n }\n `,\n btnDanger: css`\n background-color: ${colors.danger};\n border: 1px solid ${colors.danger};\n color: white;\n \n &:hover {\n background-color: ${colors.dangerHover};\n border-color: ${colors.dangerHover};\n }\n `,\n}\n\ninterface ConfirmModalProps {\n title: string\n message: string\n confirmLabel?: string\n cancelLabel?: string\n variant?: 'default' \| 'danger'\n onConfirm: () => void\n onCancel: () => void\n}\n\nexport function ConfirmModal({\n title,\n message,\n confirmLabel = 'Confirm',\n cancelLabel = 'Cancel',\n variant = 'default',\n onConfirm,\n onCancel,\n}: ConfirmModalProps) {\n return (\n <div css={styles.overlay} onClick={onCancel}>\n <div css={styles.modal} onClick={(e) => e.stopPropagation()}>\n <div css={styles.header}>\n <h3 css={styles.title}>{title}</h3>\n </div>\n <div css={styles.body}>\n <p css={styles.message}>{message}</p>\n </div>\n <div css={styles.footer}>\n <button css={[styles.btn, styles.btnCancel]} onClick={onCancel}>\n {cancelLabel}\n </button>\n <button\n css={[styles.btn, variant === 'danger' ? styles.btnDanger : styles.btnConfirm]}\n onClick={onConfirm}\n >\n {confirmLabel}\n </button>\n </div>\n </div>\n </div>\n )\n}\n\ninterface InputModalProps {\n title: string\n message?: string\n inputLabel?: string\n defaultValue?: string\n placeholder?: string\n confirmLabel?: string\n cancelLabel?: string\n onConfirm: (value: string) => void\n onCancel: () => void\n}\n\nconst inputStyles = {\n input: css`\n width: 100%;\n padding: 10px 12px;\n font-size: ${fontSize.base};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n background: ${colors.surface};\n color: ${colors.text};\n margin-top: 12px;\n transition: all 0.15s ease;\n \n &:focus {\n outline: none;\n border-color: ${colors.primary};\n box-shadow: 0 0 0 2px ${colors.primaryLight};\n }\n \n &::placeholder {\n color: ${colors.textMuted};\n }\n `,\n}\n\nexport function InputModal({\n title,\n message,\n inputLabel,\n defaultValue = '',\n placeholder,\n confirmLabel = 'Confirm',\n cancelLabel = 'Cancel',\n onConfirm,\n onCancel,\n}: InputModalProps) {\n const [value, setValue] = React.useState(defaultValue)\n \n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault()\n if (value.trim()) {\n onConfirm(value.trim())\n }\n }\n \n return (\n <div css={styles.overlay} onClick={onCancel}>\n <div css={styles.modal} onClick={(e) => e.stopPropagation()}>\n <form onSubmit={handleSubmit}>\n <div css={styles.header}>\n <h3 css={styles.title}>{title}</h3>\n </div>\n <div css={styles.body}>\n {message && <p css={styles.message}>{message}</p>}\n {inputLabel && <label css={styles.message}>{inputLabel}</label>}\n <input\n css={inputStyles.input}\n type=\"text\"\n value={value}\n onChange={(e) => setValue(e.target.value)}\n placeholder={placeholder}\n autoFocus\n />\n </div>\n <div css={styles.footer}>\n <button type=\"button\" css={[styles.btn, styles.btnCancel]} onClick={onCancel}>\n {cancelLabel}\n </button>\n <button type=\"submit\" css={[styles.btn, styles.btnConfirm]} disabled={!value.trim()}>\n {confirmLabel}\n </button>\n </div>\n </form>\n </div>\n </div>\n )\n}\n\ninterface AlertModalProps {\n title: string\n message: string\n buttonLabel?: string\n onClose: () => void\n}\n\nexport function AlertModal({\n title,\n message,\n buttonLabel = 'OK',\n onClose,\n}: AlertModalProps) {\n return (\n <div css={styles.overlay} onClick={onClose}>\n <div css={styles.modal} onClick={(e) => e.stopPropagation()}>\n <div css={styles.header}>\n <h3 css={styles.title}>{title}</h3>\n </div>\n <div css={styles.body}>\n <p css={styles.message}>{message}</p>\n </div>\n <div css={styles.footer}>\n <button css={[styles.btn, styles.btnConfirm]} onClick={onClose}>\n {buttonLabel}\n </button>\n </div>\n </div>\n </div>\n )\n}\n\nconst progressStyles = {\n progressContainer: css`\n margin-top: 16px;\n `,\n progressBar: css`\n width: 100%;\n height: 8px;\n background-color: ${colors.background};\n border-radius: 4px;\n overflow: hidden;\n margin-bottom: 12px;\n `,\n progressFill: css`\n height: 100%;\n background: linear-gradient(90deg, ${colors.primary}, ${colors.primaryHover});\n border-radius: 4px;\n transition: width 0.3s ease;\n `,\n progressText: css`\n font-size: ${fontSize.sm};\n color: ${colors.textSecondary};\n margin: 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n `,\n currentFile: css`\n font-size: ${fontSize.xs};\n color: ${colors.textMuted};\n margin: 8px 0 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n}\n\nexport interface ProgressState {\n current: number\n total: number\n percent: number\n currentFile?: string\n status: 'processing' \| 'cleanup' \| 'complete' \| 'error' \| 'stopped'\n message?: string\n processed?: number\n orphansRemoved?: number\n errors?: number\n}\n\ninterface ProgressModalProps {\n title: string\n progress: ProgressState\n onClose?: () => void\n onStop?: () => void\n}\n\nexport function ProgressModal({\n title,\n progress,\n onClose,\n onStop,\n}: ProgressModalProps) {\n const isComplete = progress.status === 'complete'\n const isError = progress.status === 'error'\n const isStopped = progress.status === 'stopped'\n const canClose = isComplete \|\| isError \|\| isStopped\n const isRunning = !canClose\n\n return (\n <div css={styles.overlay}>\n <div css={styles.modal} onClick={(e) => e.stopPropagation()}>\n <div css={styles.header}>\n <h3 css={styles.title}>{title}</h3>\n </div>\n <div css={styles.body}>\n {isError ? (\n <p css={styles.message}>{progress.message \|\| 'An error occurred'}</p>\n ) : isStopped ? (\n <p css={styles.message}>\n Processing stopped. Processed {progress.processed ?? progress.current} image{(progress.processed ?? progress.current) !== 1 ? 's' : ''} before stopping.\n </p>\n ) : isComplete ? (\n <p css={styles.message}>\n Processed {progress.processed} image{progress.processed !== 1 ? 's' : ''}.\n {progress.orphansRemoved !== undefined && progress.orphansRemoved > 0 ? (\n <> Removed {progress.orphansRemoved} orphaned thumbnail{progress.orphansRemoved !== 1 ? 's' : ''}.</>\n ) : null}\n {progress.errors !== undefined && progress.errors > 0 ? (\n <> {progress.errors} error{progress.errors !== 1 ? 's' : ''} occurred.</>\n ) : null}\n </p>\n ) : (\n <>\n <p css={styles.message}>\n {progress.status === 'cleanup' \n ? 'Cleaning up orphaned files...' \n : `Processing images...`}\n </p>\n <div css={progressStyles.progressContainer}>\n <div css={progressStyles.progressBar}>\n <div \n css={progressStyles.progressFill} \n style={{ width: `${progress.percent}%` }} \n />\n </div>\n <div css={progressStyles.progressText}>\n <span>{progress.current} of {progress.total}</span>\n <span>{progress.percent}%</span>\n </div>\n {progress.currentFile && (\n <p css={progressStyles.currentFile} title={progress.currentFile}>\n {progress.currentFile}\n </p>\n )}\n </div>\n </>\n )}\n </div>\n <div css={styles.footer}>\n {isRunning && onStop && (\n <button css={[styles.btn, styles.btnDanger]} onClick={onStop}>\n Stop\n </button>\n )}\n {canClose && (\n <button css={[styles.btn, styles.btnConfirm]} onClick={onClose}>\n Done\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n","/* @jsxImportSource @emotion/react /\n'use client'\n\nimport { useState, useEffect } from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { colors, fontSize, fontStack, baseReset } from './tokens'\n\nconst fadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`\n\nconst slideIn = keyframes`\n from { \n opacity: 0;\n transform: translateY(-8px) scale(0.98);\n }\n to { \n opacity: 1;\n transform: translateY(0) scale(1);\n }\n`\n\ninterface Folder {\n path: string\n name: string\n depth: number\n}\n\nconst styles = {\n overlay: css`\n position: fixed;\n inset: 0;\n background-color: rgba(26, 31, 54, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: ${fadeIn} 0.15s ease-out;\n font-family: ${fontStack};\n `,\n modal: css`\n ${baseReset}\n background-color: ${colors.surface};\n border-radius: 12px;\n box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);\n max-width: 480px;\n width: 90%;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n animation: ${slideIn} 0.2s ease-out;\n overflow: hidden;\n `,\n header: css`\n padding: 24px 24px 0;\n `,\n title: css`\n font-size: ${fontSize.lg};\n font-weight: 600;\n color: ${colors.text};\n margin: 0;\n letter-spacing: -0.02em;\n `,\n body: css`\n padding: 12px 24px 24px;\n flex: 1;\n overflow-y: auto;\n min-height: 200px;\n max-height: 400px;\n `,\n message: css`\n font-size: ${fontSize.base};\n color: ${colors.textSecondary};\n margin: 0 0 16px;\n line-height: 1.6;\n `,\n folderList: css`\n display: flex;\n flex-direction: column;\n gap: 0;\n `,\n folderItem: css`\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n border: 1px solid transparent;\n position: relative;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n }\n `,\n treeIndent: css`\n display: flex;\n align-items: center;\n height: 100%;\n `,\n treeLine: css`\n width: 16px;\n height: 100%;\n position: relative;\n flex-shrink: 0;\n \n &::before {\n content: '';\n position: absolute;\n left: 8px;\n top: 0;\n bottom: 50%;\n width: 0;\n border-left: 1px dashed ${colors.textSecondary};\n }\n \n &::after {\n content: '';\n position: absolute;\n left: 8px;\n top: 50%;\n width: 8px;\n height: 0;\n border-top: 1px dashed ${colors.textSecondary};\n }\n `,\n folderItemSelected: css`\n background-color: ${colors.primaryLight};\n border-color: ${colors.primary};\n \n &:hover {\n background-color: ${colors.primaryLight};\n }\n `,\n folderItemDisabled: css`\n opacity: 0.5;\n cursor: not-allowed;\n \n &:hover {\n background-color: transparent;\n }\n `,\n folderIcon: css`\n width: 20px;\n height: 20px;\n color: #f9935e;\n flex-shrink: 0;\n `,\n folderName: css`\n font-size: ${fontSize.base};\n color: ${colors.text};\n flex: 1;\n `,\n footer: css`\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid ${colors.border};\n background-color: ${colors.background};\n `,\n btn: css`\n padding: 10px 18px;\n font-size: ${fontSize.base};\n font-weight: 500;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n letter-spacing: -0.01em;\n `,\n btnCancel: css`\n background-color: ${colors.surface};\n border: 1px solid ${colors.border};\n color: ${colors.text};\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n btnConfirm: css`\n background-color: ${colors.primary};\n border: 1px solid ${colors.primary};\n color: white;\n \n &:hover:not(:disabled) {\n background-color: ${colors.primaryHover};\n border-color: ${colors.primaryHover};\n }\n \n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n `,\n loading: css`\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px;\n color: ${colors.textSecondary};\n `,\n spinner: css`\n width: 24px;\n height: 24px;\n border-radius: 50%;\n border: 3px solid ${colors.border};\n border-top-color: ${colors.primary};\n animation: spin 0.8s linear infinite;\n \n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n `,\n}\n\ninterface StudioFolderPickerProps {\n selectedItems: Set<string>\n currentPath: string\n onMove: (destination: string) => void\n onCancel: () => void\n}\n\nexport function StudioFolderPicker({ selectedItems, currentPath, onMove, onCancel }: StudioFolderPickerProps) {\n const [folders, setFolders] = useState<Folder[]>([])\n const [loading, setLoading] = useState(true)\n const [selectedFolder, setSelectedFolder] = useState<string \| null>(null)\n\n useEffect(() => {\n async function loadFolders() {\n try {\n const response = await fetch('/api/studio/list-folders')\n if (response.ok) {\n const data = await response.json()\n console.log('Loaded folders:', data)\n setFolders(data.folders \|\| [])\n } else {\n console.error('Failed to load folders:', response.status, await response.text())\n }\n } catch (error) {\n console.error('Failed to load folders:', error)\n } finally {\n setLoading(false)\n }\n }\n loadFolders()\n }, [])\n\n // Filter out folders that are being moved (can't move to themselves or their children)\n // Mark current folder as disabled but still show it\n const selectedPaths = Array.from(selectedItems)\n const availableFolders = folders.filter(folder => {\n // Can't move a folder into itself or its children\n return !selectedPaths.some(selected => \n folder.path === selected \|\| \n folder.path.startsWith(selected + '/')\n )\n })\n \n // Check if a folder is the current location (disabled)\n const isCurrentFolder = (folderPath: string) => folderPath === currentPath\n\n const handleConfirm = () => {\n if (selectedFolder) {\n onMove(selectedFolder)\n }\n }\n\n return (\n <div css={styles.overlay} onClick={onCancel}>\n <div css={styles.modal} onClick={(e) => e.stopPropagation()}>\n <div css={styles.header}>\n <h3 css={styles.title}>Move Items</h3>\n </div>\n <div css={styles.body}>\n <p css={styles.message}>\n Select a destination folder for {selectedItems.size} item{selectedItems.size !== 1 ? 's' : ''}:\n </p>\n \n {loading ? (\n <div css={styles.loading}>\n <div css={styles.spinner} />\n </div>\n ) : availableFolders.length === 0 ? (\n <div css={styles.loading}>\n No available folders to move to.\n </div>\n ) : (\n <div css={styles.folderList}>\n {availableFolders.map((folder) => {\n const disabled = isCurrentFolder(folder.path)\n return (\n <div\n key={folder.path}\n css={[\n styles.folderItem,\n selectedFolder === folder.path && styles.folderItemSelected,\n disabled && styles.folderItemDisabled\n ]}\n style={{ paddingLeft: 12 }}\n onClick={() => !disabled && setSelectedFolder(folder.path)}\n >\n {/ Render tree indent lines /}\n {folder.depth > 0 && (\n <div css={styles.treeIndent}>\n {Array.from({ length: folder.depth }).map((_, i) => (\n <div key={i} css={styles.treeLine} />\n ))}\n </div>\n )}\n <svg css={styles.folderIcon} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z\" />\n </svg>\n <span css={styles.folderName}>\n {folder.name}\n {disabled && ' (current)'}\n </span>\n </div>\n )\n })}\n </div>\n )}\n </div>\n <div css={styles.footer}>\n <button css={[styles.btn, styles.btnCancel]} onClick={onCancel}>\n Cancel\n </button>\n <button\n css={[styles.btn, styles.btnConfirm]}\n onClick={handleConfirm}\n disabled={!selectedFolder}\n >\n Move Here\n </button>\n </div>\n </div>\n </div>\n )\n}\n","/* @jsxImportSource @emotion/react /\n'use client'\n\nimport { useEffect, useState, useRef } from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { useStudio } from './StudioContext'\nimport { colors, fontSize } from './tokens'\nimport type { FileItem } from '../types'\n\nconst spin = keyframes`\n to { transform: rotate(360deg); }\n`\n\nconst styles = {\n loading: css`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 256px;\n `,\n spinner: css`\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: 3px solid ${colors.border};\n border-top-color: ${colors.primary};\n animation: ${spin} 0.8s linear infinite;\n `,\n empty: css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 256px;\n color: ${colors.textSecondary};\n `,\n emptyIcon: css`\n width: 48px;\n height: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n `,\n emptyText: css`\n font-size: ${fontSize.base};\n margin: 0 0 4px 0;\n \n &:last-child {\n color: ${colors.textMuted};\n font-size: ${fontSize.sm};\n }\n `,\n grid: css`\n display: grid;\n grid-template-columns: 1fr;\n gap: 12px;\n \n @media (min-width: 480px) { grid-template-columns: repeat(2, 1fr); }\n @media (min-width: 768px) { grid-template-columns: repeat(3, 1fr); }\n @media (min-width: 1024px) { grid-template-columns: repeat(4, 1fr); }\n @media (min-width: 1280px) { grid-template-columns: repeat(5, 1fr); }\n `,\n item: css`\n position: relative;\n border-radius: 8px;\n border: 1px solid ${colors.border};\n overflow: hidden;\n cursor: pointer;\n transition: all 0.15s ease;\n background-color: ${colors.surface};\n user-select: none;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n \n &:hover {\n border-color: #d0d5dd;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n }\n `,\n itemSelected: css`\n border-color: ${colors.primary};\n box-shadow: 0 0 0 1px ${colors.primary};\n \n &:hover {\n border-color: ${colors.primary};\n box-shadow: 0 0 0 1px ${colors.primary};\n }\n `,\n parentItem: css`\n cursor: pointer;\n \n &:hover {\n border-color: ${colors.primary};\n }\n `,\n checkboxWrapper: css`\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n padding: 8px;\n cursor: pointer;\n `,\n checkbox: css`\n width: 18px;\n height: 18px;\n accent-color: ${colors.primary};\n cursor: pointer;\n `,\n cdnBadge: css`\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 10;\n background-color: ${colors.successLight};\n color: ${colors.success};\n font-size: 11px;\n font-weight: 500;\n padding: 2px 8px;\n border-radius: 4px;\n `,\n content: css`\n position: relative;\n aspect-ratio: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n background: ${colors.background};\n `,\n folderIcon: css`\n width: 56px;\n height: 56px;\n color: #f9935e;\n `,\n imagesFolderIcon: css`\n width: 56px;\n height: 56px;\n color: ${colors.imagesFolder};\n `,\n imagesFolderWrapper: css`\n position: relative;\n `,\n lockIcon: css`\n position: absolute;\n bottom: 4px;\n right: 4px;\n width: 16px;\n height: 16px;\n color: ${colors.imagesFolder};\n background: white;\n border-radius: 50%;\n padding: 2px;\n `,\n parentIcon: css`\n width: 56px;\n height: 56px;\n color: ${colors.textMuted};\n `,\n fileIcon: css`\n width: 40px;\n height: 40px;\n color: ${colors.textMuted};\n `,\n image: css`\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n border-radius: 4px;\n `,\n noThumbnail: css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 16px;\n background: ${colors.background};\n border: 2px dashed ${colors.border};\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n width: 80%;\n height: 60%;\n \n &:hover {\n border-color: ${colors.primary};\n background: ${colors.surfaceHover};\n }\n `,\n noThumbnailIcon: css`\n width: 32px;\n height: 32px;\n color: ${colors.textMuted};\n `,\n noThumbnailText: css`\n font-size: ${fontSize.xs};\n color: ${colors.textMuted};\n text-align: center;\n `,\n label: css`\n padding: 10px 12px;\n background-color: ${colors.surface};\n border-top: 1px solid ${colors.borderLight};\n `,\n labelRow: css`\n display: flex;\n flex-direction: column;\n gap: 2px;\n `,\n labelText: css`\n flex: 1;\n min-width: 0;\n `,\n copyBtn: css`\n position: absolute;\n top: 4px;\n right: 4px;\n z-index: 10;\n height: 28px;\n width: 28px;\n color: ${colors.textMuted};\n background: transparent;\n border: none;\n padding: 0;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n color: ${colors.text};\n }\n `,\n copyIcon: css`\n width: 18px;\n height: 18px;\n `,\n tooltip: css`\n position: absolute;\n top: 50%;\n right: 100%;\n transform: translateY(-50%);\n background: #1a1f36;\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n margin-right: 6px;\n pointer-events: none;\n z-index: 100;\n \n &::before {\n content: '';\n position: absolute;\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border: 4px solid transparent;\n border-left-color: #1a1f36;\n }\n `,\n openBtn: css`\n position: absolute;\n bottom: 8px;\n right: 8px;\n z-index: 10;\n height: 28px;\n font-size: ${fontSize.sm};\n font-weight: 500;\n color: ${colors.primary};\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n padding: 0 8px;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n \n &:hover {\n background-color: ${colors.primaryLight};\n border-color: ${colors.primary};\n }\n `,\n name: css`\n font-size: ${fontSize.sm};\n font-weight: 500;\n color: ${colors.text};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n letter-spacing: -0.01em;\n `,\n size: css`\n font-size: ${fontSize.xs};\n color: ${colors.textMuted};\n margin: 2px 0 0 0;\n `,\n selectAllRow: css`\n display: flex;\n align-items: center;\n margin-bottom: 16px;\n padding: 12px 16px;\n background: ${colors.surface};\n border-radius: 8px;\n border: 1px solid ${colors.border};\n `,\n selectAllLabel: css`\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: ${fontSize.base};\n font-weight: 500;\n color: ${colors.textSecondary};\n cursor: pointer;\n \n &:hover {\n color: ${colors.text};\n }\n `,\n selectAllCheckbox: css`\n width: 16px;\n height: 16px;\n accent-color: ${colors.primary};\n `,\n}\n\nexport function StudioFileGrid() {\n const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio()\n const [items, setItems] = useState<FileItem[]>([])\n const [loading, setLoading] = useState(true)\n const isInitialLoad = useRef(true)\n const lastPath = useRef(currentPath)\n\n useEffect(() => {\n async function loadItems() {\n // Only show loading spinner on initial load or path change, not on refresh\n const isPathChange = lastPath.current !== currentPath\n if (isInitialLoad.current \|\| isPathChange) {\n setLoading(true)\n }\n lastPath.current = currentPath\n \n try {\n // Use search API when query has 2+ characters\n const url = searchQuery && searchQuery.length >= 2\n ? `/api/studio/search?q=${encodeURIComponent(searchQuery)}`\n : `/api/studio/list?path=${encodeURIComponent(currentPath)}`\n const response = await fetch(url)\n if (response.ok) {\n const data = await response.json()\n setItems(data.items \|\| [])\n }\n } catch (error) {\n console.error('Failed to load items:', error)\n }\n setLoading(false)\n isInitialLoad.current = false\n }\n loadItems()\n }, [currentPath, refreshKey, searchQuery])\n\n if (loading) {\n return (\n <div css={styles.loading}>\n <div css={styles.spinner} />\n </div>\n )\n }\n\n const isAtRoot = currentPath === 'public'\n\n // Empty state only when truly empty (not counting parent folder)\n if (items.length === 0 && isAtRoot) {\n return (\n <div css={styles.empty}>\n <svg css={styles.emptyIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n <p css={styles.emptyText}>No files in this folder</p>\n <p css={styles.emptyText}>Upload images to get started</p>\n </div>\n )\n }\n\n // When searching, items already come filtered from the API\n const isSearching = searchQuery && searchQuery.length >= 2\n\n const sortedItems = [...items].sort((a, b) => {\n if (a.type === 'folder' && b.type !== 'folder') return -1\n if (a.type !== 'folder' && b.type === 'folder') return 1\n return a.name.localeCompare(b.name)\n })\n\n const handleItemClick = (item: FileItem, e: React.MouseEvent) => {\n if (e.shiftKey && lastSelectedPath) {\n selectRange(lastSelectedPath, item.path, sortedItems)\n } else {\n toggleSelection(item.path)\n }\n }\n\n const handleOpen = (item: FileItem) => {\n if (item.type === 'folder') {\n setCurrentPath(item.path)\n } else {\n setFocusedItem(item)\n }\n }\n\n const handleGenerateThumbnail = async (item: FileItem) => {\n try {\n const imageKey = item.path.replace(/^public\\//, '')\n await fetch('/api/studio/reprocess', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ imageKeys: [imageKey] }),\n })\n triggerRefresh()\n } catch (error) {\n console.error('Failed to generate thumbnail:', error)\n }\n }\n\n const allItemsSelected = sortedItems.length > 0 && sortedItems.every(item => selectedItems.has(item.path))\n const someItemsSelected = sortedItems.some(item => selectedItems.has(item.path))\n\n const handleSelectAll = () => {\n if (allItemsSelected) {\n clearSelection()\n } else {\n selectAll(sortedItems)\n }\n }\n\n return (\n <div>\n {sortedItems.length > 0 && (\n <div css={styles.selectAllRow}>\n <label css={styles.selectAllLabel}>\n <input\n type=\"checkbox\"\n css={styles.selectAllCheckbox}\n checked={allItemsSelected}\n ref={(el) => {\n if (el) el.indeterminate = someItemsSelected && !allItemsSelected\n }}\n onChange={handleSelectAll}\n />\n Select all ({sortedItems.length})\n </label>\n </div>\n )}\n <div css={styles.grid}>\n {/ Parent folder navigation - hide when searching /}\n {!isAtRoot && !isSearching && (\n <div \n css={[styles.item, styles.parentItem]}\n onClick={navigateUp}\n >\n <div css={styles.content}>\n <svg css={styles.parentIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6\" />\n </svg>\n </div>\n <div css={styles.label}>\n <p css={styles.name}>..</p>\n <p css={styles.size}>Parent folder</p>\n </div>\n </div>\n )}\n \n {sortedItems.map((item) => (\n <GridItem\n key={item.path}\n item={item}\n isSelected={selectedItems.has(item.path)}\n onClick={(e) => handleItemClick(item, e)}\n onOpen={() => handleOpen(item)}\n onGenerateThumbnail={() => handleGenerateThumbnail(item)}\n />\n ))}\n </div>\n </div>\n )\n}\n\ninterface GridItemProps {\n item: FileItem\n isSelected: boolean\n onClick: (e: React.MouseEvent) => void\n onOpen: () => void\n onGenerateThumbnail: () => void\n}\n\nfunction GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }: GridItemProps) {\n const [showCopied, setShowCopied] = useState(false)\n const isFolder = item.type === 'folder'\n const isImage = !isFolder && item.thumbnail !== undefined\n const isImagesFolder = isFolder && (item.name === 'images' \|\| item.path.includes('/images/'))\n\n const handleCopyPath = (e: React.MouseEvent) => {\n e.stopPropagation()\n const pathToCopy = '/' + item.path\n navigator.clipboard.writeText(pathToCopy)\n setShowCopied(true)\n setTimeout(() => setShowCopied(false), 1500)\n }\n\n return (\n <div \n css={[styles.item, isSelected && styles.itemSelected]} \n onClick={onClick}\n >\n <div\n css={styles.checkboxWrapper}\n onClick={(e) => e.stopPropagation()}\n >\n <input\n type=\"checkbox\"\n css={styles.checkbox}\n checked={isSelected}\n onChange={() => onClick({} as React.MouseEvent)}\n />\n </div>\n\n {item.cdnSynced && <span css={styles.cdnBadge}>CDN</span>}\n\n <div css={styles.content}>\n {/ Copy button - top right of image box /}\n <button\n css={styles.copyBtn}\n onClick={handleCopyPath}\n title=\"Copy file path\"\n >\n {showCopied && <span css={styles.tooltip}>Copied!</span>}\n <svg css={styles.copyIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" />\n </svg>\n </button>\n\n {/ Open button - bottom right of image box /}\n <button\n css={styles.openBtn}\n onClick={(e) => {\n e.stopPropagation()\n onOpen()\n }}\n >\n Open\n </button>\n\n {isFolder ? (\n isImagesFolder ? (\n <div css={styles.imagesFolderWrapper}>\n <svg css={styles.imagesFolderIcon} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z\" />\n </svg>\n <svg css={styles.lockIcon} fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fillRule=\"evenodd\" d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\" clipRule=\"evenodd\" />\n </svg>\n </div>\n ) : (\n <svg css={styles.folderIcon} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z\" />\n </svg>\n )\n ) : isImage && item.hasThumbnail ? (\n <img\n css={styles.image}\n src={item.thumbnail}\n alt={item.name}\n loading=\"lazy\"\n />\n ) : isImage && !item.hasThumbnail ? (\n <button \n css={styles.noThumbnail}\n onClick={(e) => { e.stopPropagation(); onGenerateThumbnail(); }}\n title=\"Generate thumbnail\"\n >\n <svg css={styles.noThumbnailIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n <span css={styles.noThumbnailText}>Generate</span>\n </button>\n ) : (\n <svg css={styles.fileIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z\" />\n </svg>\n )}\n </div>\n\n <div css={styles.label}>\n <div css={styles.labelRow}>\n <div css={styles.labelText}>\n <p css={styles.name} title={item.name}>{truncateMiddle(item.name)}</p>\n {isFolder ? (\n <p css={styles.size}>\n {item.fileCount !== undefined ? `${item.fileCount} files` : ''}\n {item.fileCount !== undefined && item.totalSize !== undefined ? ' · ' : ''}\n {item.totalSize !== undefined ? formatFileSize(item.totalSize) : ''}\n </p>\n ) : (\n item.size !== undefined && <p css={styles.size}>{formatFileSize(item.size)}</p>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nfunction formatFileSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`\n if (bytes < 1024 1024) return `${(bytes / 1024).toFixed(1)} KB`\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nfunction getParentPath(path: string): string {\n const parts = path.split('/')\n parts.pop() // Remove current folder\n return parts.join('/') + '/'\n}\n\nfunction truncateMiddle(str: string, maxLength: number = 24): string {\n if (str.length <= maxLength) return str\n \n // Find the extension\n const lastDot = str.lastIndexOf('.')\n const ext = lastDot > 0 ? str.substring(lastDot) : ''\n const name = lastDot > 0 ? str.substring(0, lastDot) : str\n \n // Calculate how much we can show of the name\n const availableLength = maxLength - ext.length - 3 // 3 for \"...\"\n if (availableLength < 6) {\n // Too short, just truncate from end\n return str.substring(0, maxLength - 3) + '...'\n }\n \n const startLength = Math.ceil(availableLength / 2)\n const endLength = Math.floor(availableLength / 2)\n \n return name.substring(0, startLength) + '...' + name.substring(name.length - endLength) + ext\n}\n","/** @jsxImportSource @emotion/react /\n'use client'\n\nimport { useEffect, useState, useRef } from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { useStudio } from './StudioContext'\nimport { colors, fontSize } from './tokens'\nimport type { FileItem } from '../types'\n\nconst spin = keyframes`\n to { transform: rotate(360deg); }\n`\n\nconst styles = {\n loading: css`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 256px;\n `,\n spinner: css`\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: 3px solid ${colors.border};\n border-top-color: ${colors.primary};\n animation: ${spin} 0.8s linear infinite;\n `,\n empty: css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 256px;\n color: ${colors.textSecondary};\n `,\n tableWrapper: css`\n background: ${colors.surface};\n border-radius: 8px;\n border: 1px solid ${colors.border};\n overflow-x: auto;\n `,\n table: css`\n width: 100%;\n min-width: 600px;\n border-collapse: collapse;\n white-space: nowrap;\n `,\n th: css`\n text-align: left;\n font-size: 11px;\n color: ${colors.textMuted};\n text-transform: uppercase;\n letter-spacing: 0.05em;\n padding: 12px 16px;\n font-weight: 600;\n background: ${colors.background};\n border-bottom: 1px solid ${colors.border};\n `,\n thCheckbox: css`\n width: 48px;\n `,\n thSize: css`\n width: 96px;\n `,\n thDimensions: css`\n width: 128px;\n `,\n thCdn: css`\n width: 96px;\n `,\n tbody: css``,\n row: css`\n cursor: pointer;\n transition: background-color 0.15s ease;\n user-select: none;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n }\n \n &:not(:last-child) td {\n border-bottom: 1px solid ${colors.borderLight};\n }\n `,\n rowSelected: css`\n background-color: ${colors.primaryLight};\n \n &:hover {\n background-color: ${colors.primaryLight};\n }\n `,\n parentRow: css`\n cursor: pointer;\n border-bottom: 1px solid ${colors.border};\n \n &:hover {\n background-color: ${colors.surfaceHover};\n }\n `,\n td: css`\n padding: 12px 16px;\n `,\n checkboxCell: css`\n padding: 12px 16px;\n cursor: pointer;\n vertical-align: middle;\n `,\n checkbox: css`\n width: 18px;\n height: 18px;\n accent-color: ${colors.primary};\n cursor: pointer;\n display: block;\n `,\n actionsCell: css`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n margin-left: auto;\n flex-shrink: 0;\n `,\n copyBtn: css`\n position: relative;\n flex-shrink: 0;\n height: 32px;\n width: 32px;\n font-size: ${fontSize.xs};\n color: ${colors.textSecondary};\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n padding: 0;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n background: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n color: ${colors.text};\n }\n `,\n copyIcon: css`\n width: 16px;\n height: 16px;\n `,\n tooltip: css`\n position: absolute;\n top: 50%;\n right: 100%;\n transform: translateY(-50%);\n background: #1a1f36;\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n margin-right: 6px;\n pointer-events: none;\n z-index: 100;\n \n &::after {\n content: '';\n position: absolute;\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border: 4px solid transparent;\n border-left-color: #1a1f36;\n }\n `,\n nameCell: css`\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n `,\n thumbnailWrapper: css`\n width: 48px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n `,\n folderIconWrapper: css`\n width: 48px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n `,\n folderIcon: css`\n width: 24px;\n height: 24px;\n color: #f9935e;\n `,\n imagesFolderWrapper: css`\n width: 48px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n position: relative;\n align-items: center;\n `,\n imagesFolderIcon: css`\n width: 24px;\n height: 24px;\n color: ${colors.imagesFolder};\n `,\n lockIcon: css`\n width: 10px;\n height: 10px;\n color: ${colors.imagesFolder};\n margin-left: -6px;\n margin-top: 8px;\n `,\n parentIcon: css`\n width: 20px;\n height: 20px;\n color: ${colors.textMuted};\n flex-shrink: 0;\n `,\n fileIcon: css`\n width: 20px;\n height: 20px;\n color: ${colors.textMuted};\n flex-shrink: 0;\n `,\n thumbnail: css`\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 4px;\n border: 1px solid ${colors.borderLight};\n `,\n noThumbnail: css`\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: ${colors.background};\n border: 1px dashed ${colors.border};\n border-radius: 4px;\n flex-shrink: 0;\n cursor: pointer;\n transition: all 0.15s ease;\n \n &:hover {\n border-color: ${colors.primary};\n background: ${colors.surfaceHover};\n }\n `,\n noThumbnailIcon: css`\n width: 16px;\n height: 16px;\n color: ${colors.textMuted};\n `,\n name: css`\n font-size: ${fontSize.base};\n font-weight: 500;\n color: ${colors.text};\n letter-spacing: -0.01em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 300px;\n `,\n meta: css`\n font-size: ${fontSize.sm};\n color: ${colors.textSecondary};\n `,\n cdnBadge: css`\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: ${fontSize.xs};\n font-weight: 500;\n color: ${colors.success};\n `,\n cdnIcon: css`\n width: 12px;\n height: 12px;\n `,\n cdnEmpty: css`\n font-size: ${fontSize.sm};\n color: ${colors.textMuted};\n `,\n openBtn: css`\n height: 32px;\n font-size: ${fontSize.sm};\n font-weight: 500;\n color: ${colors.primary};\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n padding: 0 14px;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s ease;\n display: inline-flex;\n align-items: center;\n \n &:hover {\n background-color: ${colors.primaryLight};\n border-color: ${colors.primary};\n }\n `,\n}\n\nexport function StudioFileList() {\n const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio()\n const [items, setItems] = useState<FileItem[]>([])\n const [loading, setLoading] = useState(true)\n const isInitialLoad = useRef(true)\n const lastPath = useRef(currentPath)\n\n useEffect(() => {\n async function loadItems() {\n // Only show loading spinner on initial load or path change, not on refresh\n const isPathChange = lastPath.current !== currentPath\n if (isInitialLoad.current \|\| isPathChange) {\n setLoading(true)\n }\n lastPath.current = currentPath\n \n try {\n // Use search API when query has 2+ characters\n const url = searchQuery && searchQuery.length >= 2\n ? `/api/studio/search?q=${encodeURIComponent(searchQuery)}`\n : `/api/studio/list?path=${encodeURIComponent(currentPath)}`\n const response = await fetch(url)\n if (response.ok) {\n const data = await response.json()\n setItems(data.items \|\| [])\n }\n } catch (error) {\n console.error('Failed to load items:', error)\n }\n setLoading(false)\n isInitialLoad.current = false\n }\n loadItems()\n }, [currentPath, refreshKey, searchQuery])\n\n if (loading) {\n return (\n <div css={styles.loading}>\n <div css={styles.spinner} />\n </div>\n )\n }\n\n const isAtRoot = currentPath === 'public'\n\n if (items.length === 0 && isAtRoot) {\n return (\n <div css={styles.empty}>\n <p>No files in this folder</p>\n </div>\n )\n }\n\n // When searching, items already come filtered from the API\n const isSearching = searchQuery && searchQuery.length >= 2\n\n const sortedItems = [...items].sort((a, b) => {\n if (a.type === 'folder' && b.type !== 'folder') return -1\n if (a.type !== 'folder' && b.type === 'folder') return 1\n return a.name.localeCompare(b.name)\n })\n\n const handleItemClick = (item: FileItem, e: React.MouseEvent) => {\n if (e.shiftKey && lastSelectedPath) {\n selectRange(lastSelectedPath, item.path, sortedItems)\n } else {\n toggleSelection(item.path)\n }\n }\n\n const handleOpen = (item: FileItem) => {\n if (item.type === 'folder') {\n setCurrentPath(item.path)\n } else {\n setFocusedItem(item)\n }\n }\n\n const handleGenerateThumbnail = async (item: FileItem) => {\n try {\n const imageKey = item.path.replace(/^public\\//, '')\n await fetch('/api/studio/reprocess', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ imageKeys: [imageKey] }),\n })\n triggerRefresh()\n } catch (error) {\n console.error('Failed to generate thumbnail:', error)\n }\n }\n\n const allItemsSelected = sortedItems.length > 0 && sortedItems.every(item => selectedItems.has(item.path))\n const someItemsSelected = sortedItems.some(item => selectedItems.has(item.path))\n\n const handleSelectAll = () => {\n if (allItemsSelected) {\n clearSelection()\n } else {\n selectAll(sortedItems)\n }\n }\n\n return (\n <div css={styles.tableWrapper}>\n <table css={styles.table}>\n <thead>\n <tr>\n <th css={[styles.th, styles.thCheckbox]}>\n {sortedItems.length > 0 && (\n <input\n type=\"checkbox\"\n css={styles.checkbox}\n checked={allItemsSelected}\n ref={(el) => {\n if (el) el.indeterminate = someItemsSelected && !allItemsSelected\n }}\n onChange={handleSelectAll}\n />\n )}\n </th>\n <th css={styles.th}>Name</th>\n <th css={[styles.th, styles.thSize]}>Size</th>\n <th css={[styles.th, styles.thDimensions]}>Dimensions</th>\n <th css={[styles.th, styles.thCdn]}>CDN</th>\n </tr>\n </thead>\n <tbody css={styles.tbody}>\n {/ Parent folder navigation - hide when searching /}\n {!isAtRoot && !isSearching && (\n <tr css={styles.parentRow} onClick={navigateUp}>\n <td css={styles.td}></td>\n <td css={styles.td}>\n <div css={styles.nameCell}>\n <svg css={styles.parentIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6\" />\n </svg>\n <span css={styles.name}>..</span>\n </div>\n </td>\n <td css={[styles.td, styles.meta]}>--</td>\n <td css={[styles.td, styles.meta]}>Parent folder</td>\n <td css={styles.td}>--</td>\n </tr>\n )}\n \n {sortedItems.map((item) => (\n <ListRow\n key={item.path}\n item={item}\n isSelected={selectedItems.has(item.path)}\n onClick={(e) => handleItemClick(item, e)}\n onOpen={() => handleOpen(item)}\n onGenerateThumbnail={() => handleGenerateThumbnail(item)}\n />\n ))}\n </tbody>\n </table>\n </div>\n )\n}\n\ninterface ListRowProps {\n item: FileItem\n isSelected: boolean\n onClick: (e: React.MouseEvent) => void\n onOpen: () => void\n onGenerateThumbnail: () => void\n}\n\nfunction ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }: ListRowProps) {\n const [showCopied, setShowCopied] = useState(false)\n const isFolder = item.type === 'folder'\n const isImage = !isFolder && item.thumbnail !== undefined\n const isImagesFolder = isFolder && (item.name === 'images' \|\| item.path.includes('/images/'))\n\n const handleCopyPath = (e: React.MouseEvent) => {\n e.stopPropagation()\n const pathToCopy = '/' + item.path\n navigator.clipboard.writeText(pathToCopy)\n setShowCopied(true)\n setTimeout(() => setShowCopied(false), 1500)\n }\n\n return (\n <tr \n css={[styles.row, isSelected && styles.rowSelected]} \n onClick={onClick}\n >\n <td\n css={[styles.td, styles.checkboxCell]}\n onClick={(e) => e.stopPropagation()}\n >\n <input\n type=\"checkbox\"\n css={styles.checkbox}\n checked={isSelected}\n onChange={() => onClick({} as React.MouseEvent)}\n />\n </td>\n <td css={styles.td}>\n <div css={styles.nameCell}>\n {isFolder ? (\n isImagesFolder ? (\n <div css={styles.imagesFolderWrapper}>\n <svg css={styles.imagesFolderIcon} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z\" />\n </svg>\n <svg css={styles.lockIcon} fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fillRule=\"evenodd\" d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\" clipRule=\"evenodd\" />\n </svg>\n </div>\n ) : (\n <div css={styles.folderIconWrapper}>\n <svg css={styles.folderIcon} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z\" />\n </svg>\n </div>\n )\n ) : isImage && item.hasThumbnail ? (\n <div css={styles.thumbnailWrapper}>\n <img css={styles.thumbnail} src={item.thumbnail} alt={item.name} loading=\"lazy\" />\n </div>\n ) : isImage && !item.hasThumbnail ? (\n <div css={styles.thumbnailWrapper}>\n <button \n css={styles.noThumbnail} \n onClick={(e) => { e.stopPropagation(); onGenerateThumbnail(); }}\n title=\"Generate thumbnail\"\n >\n <svg css={styles.noThumbnailIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n </button>\n </div>\n ) : (\n <div css={styles.thumbnailWrapper}>\n <svg css={styles.fileIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z\" />\n </svg>\n </div>\n )}\n <span css={styles.name} title={item.name}>{truncateMiddle(item.name)}</span>\n <div css={styles.actionsCell}>\n <button\n css={styles.copyBtn}\n onClick={handleCopyPath}\n title=\"Copy file path\"\n >\n {showCopied && <span css={styles.tooltip}>Copied!</span>}\n <svg css={styles.copyIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" />\n </svg>\n </button>\n <button\n css={styles.openBtn}\n onClick={(e) => {\n e.stopPropagation()\n onOpen()\n }}\n >\n Open\n </button>\n </div>\n </div>\n </td>\n <td css={[styles.td, styles.meta]}>\n {isFolder \n ? (item.fileCount !== undefined ? `${item.fileCount} files` : '--')\n : (item.size !== undefined ? formatFileSize(item.size) : '--')\n }\n </td>\n <td css={[styles.td, styles.meta]}>\n {isFolder \n ? (item.totalSize !== undefined ? formatFileSize(item.totalSize) : '--')\n : (item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : '--')\n }\n </td>\n <td css={styles.td}>\n {item.cdnSynced ? (\n <span css={styles.cdnBadge}>\n <svg css={styles.cdnIcon} fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <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\" />\n </svg>\n Synced\n </span>\n ) : (\n <span css={styles.cdnEmpty}>--</span>\n )}\n </td>\n </tr>\n )\n}\n\nfunction formatFileSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`\n if (bytes < 1024 1024) return `${(bytes / 1024).toFixed(1)} KB`\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nfunction getParentPath(path: string): string {\n const parts = path.split('/')\n parts.pop() // Remove current folder\n return parts.join('/') + '/'\n}\n\nfunction truncateMiddle(str: string, maxLength: number = 32): string {\n if (str.length <= maxLength) return str\n \n // Find the extension\n const lastDot = str.lastIndexOf('.')\n const ext = lastDot > 0 ? str.substring(lastDot) : ''\n const name = lastDot > 0 ? str.substring(0, lastDot) : str\n \n // Calculate how much we can show of the name\n const availableLength = maxLength - ext.length - 3 // 3 for \"...\"\n if (availableLength < 6) {\n // Too short, just truncate from end\n return str.substring(0, maxLength - 3) + '...'\n }\n \n const startLength = Math.ceil(availableLength / 2)\n const endLength = Math.floor(availableLength / 2)\n \n return name.substring(0, startLength) + '...' + name.substring(name.length - endLength) + ext\n}\n","/** @jsxImportSource @emotion/react /\n'use client'\n\nimport { useState } from 'react'\nimport { css } from '@emotion/react'\nimport { useStudio } from './StudioContext'\nimport { ConfirmModal, AlertModal, InputModal, ProgressModal, type ProgressState } from './StudioModal'\nimport { colors, fontSize } from './tokens'\n\nconst IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.ico', '.bmp', '.tiff', '.tif']\nconst VIDEO_EXTENSIONS = ['.mp4', '.webm', '.mov', '.avi', '.mkv', '.m4v']\n\nfunction isImageFile(filename: string): boolean {\n const ext = filename.toLowerCase().substring(filename.lastIndexOf('.'))\n return IMAGE_EXTENSIONS.includes(ext)\n}\n\nfunction isVideoFile(filename: string): boolean {\n const ext = filename.toLowerCase().substring(filename.lastIndexOf('.'))\n return VIDEO_EXTENSIONS.includes(ext)\n}\n\nconst styles = {\n overlay: css`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 100;\n display: flex;\n background: transparent;\n `,\n container: css`\n display: flex;\n flex: 1;\n margin: 24px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n `,\n main: css`\n position: relative;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 24px;\n background: ${colors.background};\n overflow: auto;\n `,\n headerButtons: css`\n position: absolute;\n top: 16px;\n right: 16px;\n display: flex;\n gap: 8px;\n z-index: 10;\n `,\n copyBtn: css`\n position: relative;\n padding: 8px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n copyIcon: css`\n width: 20px;\n height: 20px;\n color: ${colors.textSecondary};\n `,\n tooltip: css`\n position: absolute;\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n background: #1a1f36;\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n margin-right: 8px;\n pointer-events: none;\n z-index: 100;\n \n &::after {\n content: '';\n position: absolute;\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border: 4px solid transparent;\n border-left-color: #1a1f36;\n }\n `,\n mainCloseBtn: css`\n padding: 8px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n mainCloseIcon: css`\n width: 20px;\n height: 20px;\n color: ${colors.textSecondary};\n `,\n mediaWrapper: css`\n max-width: 100%;\n max-height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n image: css`\n max-width: 100%;\n max-height: calc(100vh - 200px);\n object-fit: contain;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n `,\n video: css`\n max-width: 100%;\n max-height: calc(100vh - 200px);\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n `,\n filePlaceholder: css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px;\n background: ${colors.surface};\n border-radius: 12px;\n border: 1px solid ${colors.border};\n `,\n fileIcon: css`\n width: 80px;\n height: 80px;\n color: ${colors.textMuted};\n margin-bottom: 16px;\n `,\n fileName: css`\n font-size: ${fontSize.lg};\n font-weight: 600;\n color: ${colors.text};\n margin: 0;\n `,\n sidebar: css`\n width: 280px;\n background: ${colors.surface};\n border-left: 1px solid ${colors.border};\n display: flex;\n flex-direction: column;\n overflow: hidden;\n `,\n sidebarHeader: css`\n padding: 16px 20px;\n border-bottom: 1px solid ${colors.border};\n `,\n sidebarTitle: css`\n font-size: ${fontSize.base};\n font-weight: 600;\n color: ${colors.text};\n margin: 0;\n `,\n sidebarContent: css`\n flex: 1;\n padding: 20px;\n overflow: auto;\n `,\n info: css`\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 24px;\n `,\n infoRow: css`\n display: flex;\n justify-content: space-between;\n font-size: ${fontSize.sm};\n `,\n infoLabel: css`\n color: ${colors.textSecondary};\n `,\n infoValue: css`\n color: ${colors.text};\n font-weight: 500;\n text-align: right;\n max-width: 160px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n infoValueWrap: css`\n color: ${colors.text};\n font-weight: 500;\n text-align: right;\n max-width: 160px;\n word-break: break-all;\n white-space: normal;\n `,\n actions: css`\n display: flex;\n flex-direction: column;\n gap: 8px;\n `,\n actionBtn: css`\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 14px;\n font-size: ${fontSize.base};\n font-weight: 500;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n color: ${colors.text};\n text-align: left;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n actionBtnDanger: css`\n color: ${colors.danger};\n \n &:hover {\n background-color: ${colors.dangerLight};\n border-color: ${colors.danger};\n }\n `,\n actionIcon: css`\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n `,\n}\n\nexport function StudioDetailView() {\n const { focusedItem, setFocusedItem, triggerRefresh, clearSelection } = useStudio()\n const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)\n const [showRenameModal, setShowRenameModal] = useState(false)\n const [showProcessConfirm, setShowProcessConfirm] = useState(false)\n const [processProgress, setProcessProgress] = useState<ProgressState \| null>(null)\n const [alertMessage, setAlertMessage] = useState<{ title: string; message: string } \| null>(null)\n const [showCopied, setShowCopied] = useState(false)\n\n if (!focusedItem) return null\n\n const isImage = isImageFile(focusedItem.name)\n const isVideo = isVideoFile(focusedItem.name)\n const imageSrc = focusedItem.path.replace('public', '')\n\n const handleClose = () => {\n setFocusedItem(null)\n }\n\n const handleCopyPath = () => {\n const pathToCopy = '/' + focusedItem.path\n navigator.clipboard.writeText(pathToCopy)\n setShowCopied(true)\n setTimeout(() => setShowCopied(false), 1500)\n }\n\n const handleRename = async (newName: string) => {\n setShowRenameModal(false)\n if (newName && newName !== focusedItem.name) {\n try {\n const response = await fetch('/api/studio/rename', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n oldPath: focusedItem.path,\n newName: newName,\n }),\n })\n \n if (response.ok) {\n triggerRefresh()\n setFocusedItem(null)\n } else {\n const data = await response.json()\n setAlertMessage({\n title: 'Rename Failed',\n message: data.error \|\| 'Failed to rename file',\n })\n }\n } catch (error) {\n console.error('Rename error:', error)\n setAlertMessage({\n title: 'Rename Failed',\n message: 'An error occurred while renaming the file',\n })\n }\n }\n }\n\n const handleDelete = async () => {\n setShowDeleteConfirm(false)\n try {\n const response = await fetch('/api/studio/delete', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ paths: [focusedItem.path] }),\n })\n\n if (response.ok) {\n clearSelection()\n triggerRefresh()\n setFocusedItem(null)\n } else {\n const error = await response.json()\n setAlertMessage({\n title: 'Delete Failed',\n message: error.error \|\| 'Unknown error',\n })\n }\n } catch (error) {\n console.error('Delete error:', error)\n setAlertMessage({\n title: 'Delete Failed',\n message: 'Delete failed. Check console for details.',\n })\n }\n }\n\n const handleSync = () => {\n console.log('Sync to CDN:', focusedItem.path)\n // TODO: Implement sync API\n }\n\n const handleProcessImage = async () => {\n setShowProcessConfirm(false)\n \n setProcessProgress({\n current: 0,\n total: 1,\n percent: 0,\n status: 'processing',\n currentFile: focusedItem.name,\n })\n\n try {\n const response = await fetch('/api/studio/reprocess', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n paths: [focusedItem.path],\n }),\n })\n\n if (!response.ok) {\n throw new Error('Processing failed')\n }\n\n const reader = response.body?.getReader()\n if (!reader) {\n throw new Error('No response body')\n }\n\n const decoder = new TextDecoder()\n let buffer = ''\n\n while (true) {\n const { done, value } = await reader.read()\n if (done) break\n\n buffer += decoder.decode(value, { stream: true })\n const lines = buffer.split('\\n')\n buffer = lines.pop() \|\| ''\n\n for (const line of lines) {\n if (line.startsWith('data: ')) {\n try {\n const data = JSON.parse(line.slice(6))\n setProcessProgress(data)\n } catch {\n // Ignore parse errors\n }\n }\n }\n }\n\n triggerRefresh()\n } catch (error) {\n console.error('Process error:', error)\n setProcessProgress({\n current: 0,\n total: 1,\n percent: 0,\n status: 'error',\n message: 'Failed to process image',\n })\n }\n }\n\n const renderMedia = () => {\n if (isImage) {\n return <img css={styles.image} src={imageSrc} alt={focusedItem.name} />\n }\n if (isVideo) {\n return <video css={styles.video} src={imageSrc} controls />\n }\n return (\n <div css={styles.filePlaceholder}>\n <svg css={styles.fileIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z\" />\n </svg>\n <p css={styles.fileName}>{focusedItem.name}</p>\n </div>\n )\n }\n\n return (\n <>\n {showDeleteConfirm && (\n <ConfirmModal\n title=\"Delete File\"\n message={`Are you sure you want to delete \"${focusedItem.name}\"? This action cannot be undone.`}\n confirmLabel=\"Delete\"\n variant=\"danger\"\n onConfirm={handleDelete}\n onCancel={() => setShowDeleteConfirm(false)}\n />\n )}\n\n {alertMessage && (\n <AlertModal\n title={alertMessage.title}\n message={alertMessage.message}\n onClose={() => setAlertMessage(null)}\n />\n )}\n\n {showRenameModal && (\n <InputModal\n title=\"Rename File\"\n message=\"Enter a new name for the file:\"\n defaultValue={focusedItem.name}\n placeholder=\"Enter new filename\"\n confirmLabel=\"Rename\"\n onConfirm={handleRename}\n onCancel={() => setShowRenameModal(false)}\n />\n )}\n\n {showProcessConfirm && (\n <ConfirmModal\n title=\"Process Image\"\n message={`Generate thumbnails for \"${focusedItem.name}\"?`}\n confirmLabel=\"Process\"\n onConfirm={handleProcessImage}\n onCancel={() => setShowProcessConfirm(false)}\n />\n )}\n\n {processProgress && (\n <ProgressModal\n title=\"Processing Image\"\n progress={processProgress}\n onClose={() => setProcessProgress(null)}\n />\n )}\n\n <div css={styles.overlay} onClick={handleClose}>\n <div css={styles.container} onClick={(e) => e.stopPropagation()}>\n <div css={styles.main}>\n <div css={styles.headerButtons}>\n <button css={styles.copyBtn} onClick={handleCopyPath} title=\"Copy file path\">\n {showCopied && <span css={styles.tooltip}>Copied!</span>}\n <svg css={styles.copyIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" />\n </svg>\n </button>\n <button css={styles.mainCloseBtn} onClick={handleClose} aria-label=\"Close\">\n <svg css={styles.mainCloseIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n <div css={styles.mediaWrapper}>\n {renderMedia()}\n </div>\n </div>\n\n <div css={styles.sidebar}>\n <div css={styles.sidebarHeader}>\n <h3 css={styles.sidebarTitle}>Details</h3>\n </div>\n\n <div css={styles.sidebarContent}>\n <div css={styles.info}>\n <div css={styles.infoRow}>\n <span css={styles.infoLabel}>Name</span>\n <span css={styles.infoValueWrap}>{focusedItem.name}</span>\n </div>\n <div css={styles.infoRow}>\n <span css={styles.infoLabel}>Path</span>\n <span css={styles.infoValueWrap}>{focusedItem.path.replace(/^public\\//, '')}</span>\n </div>\n {focusedItem.size !== undefined && (\n <div css={styles.infoRow}>\n <span css={styles.infoLabel}>Size</span>\n <span css={styles.infoValue}>{formatFileSize(focusedItem.size)}</span>\n </div>\n )}\n {focusedItem.dimensions && (\n <div css={styles.infoRow}>\n <span css={styles.infoLabel}>Dimensions</span>\n <span css={styles.infoValue}>{focusedItem.dimensions.width} × {focusedItem.dimensions.height}</span>\n </div>\n )}\n <div css={styles.infoRow}>\n <span css={styles.infoLabel}>CDN Status</span>\n <span css={styles.infoValue}>{focusedItem.cdnSynced ? 'Synced' : 'Not synced'}</span>\n </div>\n </div>\n\n <div css={styles.actions}>\n <button css={styles.actionBtn} onClick={() => setShowRenameModal(true)}>\n <svg css={styles.actionIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\" />\n </svg>\n Rename\n </button>\n <button css={styles.actionBtn} onClick={handleSync}>\n <svg css={styles.actionIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" />\n </svg>\n Sync to CDN\n </button>\n <button css={styles.actionBtn} onClick={() => setShowProcessConfirm(true)}>\n <svg css={styles.actionIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n Process Image\n </button>\n <button css={[styles.actionBtn, styles.actionBtnDanger]} onClick={() => setShowDeleteConfirm(true)}>\n <svg css={styles.actionIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" />\n </svg>\n Delete\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </>\n )\n}\n\nfunction formatFileSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`\n if (bytes < 1024 1024) return `${(bytes / 1024).toFixed(1)} KB`\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n","/** @jsxImportSource @emotion/react */\n'use client'\n\nimport { useState } from 'react'\nimport { css } from '@emotion/react'\nimport { colors, fontSize, baseReset } from './tokens'\n\n// Standard button height for consistency\nconst btnHeight = '36px'\n\nconst styles = {\n btn: css`\n height: ${btnHeight};\n padding: 0 12px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n icon: css`\n width: 16px;\n height: 16px;\n color: ${colors.textSecondary};\n `,\n overlay: css`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10000;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(26, 31, 54, 0.4);\n backdrop-filter: blur(4px);\n `,\n panel: css`\n ${baseReset}\n position: relative;\n background-color: ${colors.surface};\n border-radius: 12px;\n box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);\n width: 100%;\n max-width: 512px;\n padding: 24px;\n `,\n header: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 24px;\n `,\n title: css`\n font-size: ${fontSize.xl};\n font-weight: 600;\n color: ${colors.text};\n margin: 0;\n letter-spacing: -0.02em;\n `,\n closeBtn: css`\n padding: 6px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n sections: css`\n display: flex;\n flex-direction: column;\n gap: 24px;\n `,\n sectionTitle: css`\n font-size: ${fontSize.base};\n font-weight: 600;\n color: ${colors.text};\n margin: 0 0 12px 0;\n `,\n description: css`\n font-size: ${fontSize.sm};\n color: ${colors.textSecondary};\n margin: 0 0 12px 0;\n `,\n codeWrapper: css`\n position: relative;\n `,\n code: css`\n background-color: ${colors.background};\n border-radius: 8px;\n padding: 12px;\n padding-right: 40px;\n font-family: 'SF Mono', Monaco, Consolas, monospace;\n font-size: ${fontSize.xs};\n color: ${colors.textSecondary};\n border: 1px solid ${colors.border};\n overflow-x: auto;\n white-space: nowrap;\n `,\n copyBtn: css`\n position: absolute;\n top: 8px;\n right: 8px;\n padding: 4px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n tooltip: css`\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background: #1a1f36;\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n margin-bottom: 6px;\n pointer-events: none;\n z-index: 100;\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border: 4px solid transparent;\n border-top-color: #1a1f36;\n }\n `,\n copyIcon: css`\n width: 14px;\n height: 14px;\n color: ${colors.textSecondary};\n `,\n codeLine: css`\n margin: 0 0 4px 0;\n \n &:last-child {\n margin: 0;\n }\n `,\n input: css`\n width: 100%;\n padding: 10px 14px;\n border: 1px solid ${colors.border};\n border-radius: 6px;\n font-size: ${fontSize.base};\n color: ${colors.text};\n background: ${colors.surface};\n transition: all 0.15s ease;\n \n &:focus {\n outline: none;\n border-color: ${colors.primary};\n box-shadow: 0 0 0 3px ${colors.primaryLight};\n }\n \n &::placeholder {\n color: ${colors.textMuted};\n }\n `,\n grid: css`\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n `,\n label: css`\n font-size: ${fontSize.xs};\n font-weight: 500;\n color: ${colors.textSecondary};\n display: block;\n margin-bottom: 6px;\n `,\n footer: css`\n margin-top: 24px;\n padding-top: 20px;\n border-top: 1px solid ${colors.border};\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n `,\n cancelBtn: css`\n padding: 10px 18px;\n font-size: ${fontSize.base};\n font-weight: 500;\n color: ${colors.text};\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n saveBtn: css`\n padding: 10px 18px;\n font-size: ${fontSize.base};\n font-weight: 500;\n color: white;\n background-color: ${colors.primary};\n border: 1px solid ${colors.primary};\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: ${colors.primaryHover};\n border-color: ${colors.primaryHover};\n }\n `,\n}\n\nexport function StudioSettings() {\n const [isOpen, setIsOpen] = useState(false)\n\n return (\n <>\n <button css={styles.btn} onClick={() => setIsOpen(true)} aria-label=\"Settings\">\n <svg\n css={styles.icon}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={2}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n <path d=\"M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z\" />\n </svg>\n </button>\n\n {isOpen && <SettingsPanel onClose={() => setIsOpen(false)} />}\n </>\n )\n}\n\nconst envTemplate = `CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789\nCLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key_id_here\nCLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here\nCLOUDFLARE_R2_BUCKET_NAME=my-images-bucket\nCLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com`\n\nfunction SettingsPanel({ onClose }: { onClose: () => void }) {\n const [copied, setCopied] = useState(false)\n\n const handleCopy = () => {\n navigator.clipboard.writeText(envTemplate)\n setCopied(true)\n setTimeout(() => setCopied(false), 2000)\n }\n\n return (\n <div css={styles.overlay} onClick={onClose}>\n <div css={styles.panel} onClick={(e) => e.stopPropagation()}>\n <div css={styles.header}>\n <h2 css={styles.title}>Settings</h2>\n <button css={styles.closeBtn} onClick={onClose}>\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n <div css={styles.sections}>\n <section>\n <h3 css={styles.sectionTitle}>Cloudflare R2</h3>\n <p css={styles.description}>Configure in .env.local file:</p>\n <div css={styles.codeWrapper}>\n <button css={styles.copyBtn} onClick={handleCopy} title=\"Copy to clipboard\">\n {copied && <span css={styles.tooltip}>Copied!</span>}\n <svg css={styles.copyIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" />\n </svg>\n </button>\n <div css={styles.code}>\n <p css={styles.codeLine}>CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789</p>\n <p css={styles.codeLine}>CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key_id_here</p>\n <p css={styles.codeLine}>CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here</p>\n <p css={styles.codeLine}>CLOUDFLARE_R2_BUCKET_NAME=my-images-bucket</p>\n <p css={styles.codeLine}>CLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com</p>\n </div>\n </div>\n </section>\n\n <section>\n <h3 css={styles.sectionTitle}>Thumbnail Sizes</h3>\n <div css={styles.grid}>\n <div>\n <label css={styles.label}>Small</label>\n <input css={styles.input} type=\"number\" defaultValue={300} />\n </div>\n <div>\n <label css={styles.label}>Medium</label>\n <input css={styles.input} type=\"number\" defaultValue={700} />\n </div>\n <div>\n <label css={styles.label}>Large</label>\n <input css={styles.input} type=\"number\" defaultValue={1400} />\n </div>\n </div>\n </section>\n </div>\n\n <div css={styles.footer}>\n <button css={styles.cancelBtn} onClick={onClose}>Cancel</button>\n <button css={styles.saveBtn}>Save Changes</button>\n </div>\n </div>\n </div>\n )\n}\n"]}
1	+ {"version":3,"sources":["/Users/chrisb/Sites/studio/dist/StudioUI-3BYIEK6S.js","../src/components/StudioUI.tsx","../src/components/StudioContext.tsx","../src/components/StudioToolbar.tsx","../src/components/StudioModal.tsx","../src/components/StudioFolderPicker.tsx","../src/components/StudioFileGrid.tsx","../src/components/StudioFileList.tsx","../src/components/StudioDetailView.tsx","../src/components/StudioSettings.tsx"],"names":["keyframes","css","jsx","styles","Fragment","jsxs","useEffect","useState","useRef","useCallback"],"mappings":"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","file":"/Users/chrisb/Sites/studio/dist/StudioUI-3BYIEK6S.js","sourcesContent":[null,"/** @jsxImportSource @emotion/react /\n'use client'\n\nimport { useEffect, useCallback, useState } from 'react'\nimport { css } from '@emotion/react'\nimport { StudioContext } from './StudioContext'\nimport { StudioToolbar } from './StudioToolbar'\nimport { StudioFileGrid } from './StudioFileGrid'\nimport { StudioFileList } from './StudioFileList'\nimport { StudioDetailView } from './StudioDetailView'\nimport { StudioSettings } from './StudioSettings'\nimport { colors, fontSize, baseReset } from './tokens'\nimport type { FileItem, LeanMeta } from '../types'\n\ninterface StudioUIProps {\n onClose: () => void\n isVisible?: boolean\n}\n\n// Standard button height for consistency\nconst btnHeight = '36px'\n\nconst styles = {\n container: css`\n ${baseReset}\n display: flex;\n flex-direction: column;\n height: 100%;\n background: ${colors.background};\n `,\n header: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 24px;\n background: ${colors.surface};\n border-bottom: 1px solid ${colors.border};\n position: relative;\n `,\n title: css`\n font-size: ${fontSize.lg};\n font-weight: 600;\n color: ${colors.text};\n margin: 0;\n letter-spacing: -0.02em;\n flex-shrink: 0;\n `,\n headerLeft: css`\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n `,\n headerCenter: css`\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n max-width: 50%;\n `,\n breadcrumbs: css`\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: ${fontSize.base};\n color: ${colors.textSecondary};\n overflow: hidden;\n `,\n breadcrumbSeparator: css`\n color: ${colors.border};\n flex-shrink: 0;\n `,\n breadcrumbItem: css`\n color: ${colors.textSecondary};\n text-decoration: none;\n cursor: pointer;\n transition: color 0.15s ease;\n white-space: nowrap;\n \n &:hover {\n color: ${colors.primary};\n }\n `,\n breadcrumbCurrent: css`\n color: ${colors.text};\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n headerActions: css`\n display: flex;\n align-items: center;\n gap: 8px;\n `,\n headerBtn: css`\n height: ${btnHeight};\n padding: 0 12px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n headerIcon: css`\n width: 16px;\n height: 16px;\n color: ${colors.textSecondary};\n `,\n content: css`\n flex: 1;\n display: flex;\n overflow: hidden;\n `,\n fileBrowser: css`\n flex: 1;\n min-width: 0;\n overflow: auto;\n padding: 20px 24px;\n `,\n dropOverlay: css`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(99, 91, 255, 0.1);\n border: 3px dashed ${colors.primary};\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 50;\n pointer-events: none;\n `,\n dropMessage: css`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n color: ${colors.primary};\n font-size: ${fontSize.lg};\n font-weight: 600;\n `,\n dropIcon: css`\n width: 48px;\n height: 48px;\n `,\n}\n\n/\n Main Studio UI - contains all panels and manages internal state\n * Rendered inside the modal via lazy loading\n /\nexport function StudioUI({ onClose, isVisible = true }: StudioUIProps) {\n const [currentPath, setCurrentPathInternal] = useState('public')\n const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set())\n const [lastSelectedPath, setLastSelectedPath] = useState<string \| null>(null)\n const [viewMode, setViewMode] = useState<'grid' \| 'list'>('grid')\n const [focusedItem, setFocusedItem] = useState<FileItem \| null>(null)\n const [meta, setMeta] = useState<LeanMeta \| null>(null)\n const [isLoading, setIsLoading] = useState(false)\n const [refreshKey, setRefreshKey] = useState(0)\n const [searchQuery, setSearchQuery] = useState('')\n const [isDragging, setIsDragging] = useState(false)\n\n const triggerRefresh = useCallback(() => {\n setRefreshKey((k) => k + 1)\n }, [])\n\n const handleDragOver = useCallback((e: React.DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setIsDragging(true)\n }, [])\n\n const handleDragLeave = useCallback((e: React.DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setIsDragging(false)\n }, [])\n\n const handleDrop = useCallback(async (e: React.DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setIsDragging(false)\n\n const files = Array.from(e.dataTransfer.files)\n if (files.length === 0) return\n\n // Don't allow drops in the images folder\n if (currentPath === 'public/images' \|\| currentPath.startsWith('public/images/')) {\n return\n }\n\n for (const file of files) {\n const formData = new FormData()\n formData.append('file', file)\n formData.append('path', currentPath)\n\n try {\n await fetch('/api/studio/upload', {\n method: 'POST',\n body: formData,\n })\n } catch (error) {\n console.error('Upload error:', error)\n }\n }\n triggerRefresh()\n }, [currentPath, triggerRefresh])\n\n const navigateUp = useCallback(() => {\n if (currentPath === 'public') return\n const parts = currentPath.split('/')\n parts.pop()\n setCurrentPathInternal(parts.join('/') \|\| 'public')\n setSelectedItems(new Set())\n }, [currentPath])\n\n const setCurrentPath = useCallback((path: string) => {\n setCurrentPathInternal(path)\n setSelectedItems(new Set())\n setFocusedItem(null)\n }, [])\n\n const toggleSelection = useCallback((path: string) => {\n setSelectedItems((prev) => {\n const next = new Set(prev)\n if (next.has(path)) {\n next.delete(path)\n } else {\n next.add(path)\n }\n return next\n })\n setLastSelectedPath(path)\n }, [])\n\n const selectRange = useCallback((fromPath: string, toPath: string, allItems: FileItem[]) => {\n const fromIndex = allItems.findIndex(item => item.path === fromPath)\n const toIndex = allItems.findIndex(item => item.path === toPath)\n \n if (fromIndex === -1 \|\| toIndex === -1) return\n \n const start = Math.min(fromIndex, toIndex)\n const end = Math.max(fromIndex, toIndex)\n \n setSelectedItems((prev) => {\n const next = new Set(prev)\n for (let i = start; i <= end; i++) {\n next.add(allItems[i].path)\n }\n return next\n })\n setLastSelectedPath(toPath)\n }, [])\n\n const selectAll = useCallback((items: FileItem[]) => {\n setSelectedItems(new Set(items.map((item) => item.path)))\n }, [])\n\n const clearSelection = useCallback(() => {\n setSelectedItems(new Set())\n }, [])\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n // Don't close if user is in an input field (e.g., search)\n const target = e.target as HTMLElement\n if (target.tagName === 'INPUT' \|\| target.tagName === 'TEXTAREA') {\n return\n }\n \n if (focusedItem) {\n setFocusedItem(null)\n } else {\n onClose()\n }\n }\n },\n [onClose, focusedItem]\n )\n\n useEffect(() => {\n if (isVisible) {\n document.addEventListener('keydown', handleKeyDown)\n document.body.style.overflow = 'hidden'\n }\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.body.style.overflow = ''\n }\n }, [handleKeyDown, isVisible])\n\n const contextValue = {\n isOpen: true,\n openStudio: () => {},\n closeStudio: onClose,\n toggleStudio: onClose,\n currentPath,\n setCurrentPath,\n navigateUp,\n selectedItems,\n toggleSelection,\n selectRange,\n selectAll,\n clearSelection,\n lastSelectedPath,\n viewMode,\n setViewMode,\n focusedItem,\n setFocusedItem,\n meta,\n setMeta,\n isLoading,\n setIsLoading,\n refreshKey,\n triggerRefresh,\n searchQuery,\n setSearchQuery,\n }\n\n return (\n <StudioContext.Provider value={contextValue}>\n <div css={styles.container}>\n <div css={styles.header}>\n <div css={styles.headerLeft}>\n <h1 css={styles.title}>Studio</h1>\n </div>\n <div css={styles.headerCenter}>\n <Breadcrumbs currentPath={currentPath} onNavigate={setCurrentPath} />\n </div>\n <div css={styles.headerActions}>\n <StudioSettings />\n <button\n css={styles.headerBtn}\n onClick={onClose}\n aria-label=\"Close Studio\"\n >\n <CloseIcon />\n </button>\n </div>\n </div>\n\n <StudioToolbar />\n\n <div \n css={styles.content}\n onDragOver={handleDragOver}\n onDragLeave={handleDragLeave}\n onDrop={handleDrop}\n >\n {isDragging && (\n <div css={styles.dropOverlay}>\n <div css={styles.dropMessage}>\n <svg css={styles.dropIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12\" />\n </svg>\n <span>Drop files to upload</span>\n </div>\n </div>\n )}\n <div css={styles.fileBrowser}>\n {viewMode === 'grid' ? <StudioFileGrid /> : <StudioFileList />}\n </div>\n </div>\n \n {/ Detail view as modal overlay /}\n {focusedItem && <StudioDetailView />}\n </div>\n </StudioContext.Provider>\n )\n}\n\nfunction Breadcrumbs({ currentPath, onNavigate }: { currentPath: string; onNavigate: (path: string) => void }) {\n const parts = currentPath.split('/').filter(Boolean)\n \n // Build paths for each breadcrumb\n const breadcrumbs = parts.map((part, index) => ({\n name: part,\n path: parts.slice(0, index + 1).join('/')\n }))\n\n return (\n <div css={styles.breadcrumbs}>\n {breadcrumbs.map((crumb, index) => (\n <span key={crumb.path} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>\n {index > 0 && <span css={styles.breadcrumbSeparator}>/</span>}\n {index === breadcrumbs.length - 1 ? (\n <span css={styles.breadcrumbCurrent}>{crumb.name}</span>\n ) : (\n <span\n css={styles.breadcrumbItem}\n onClick={() => onNavigate(crumb.path)}\n >\n {crumb.name}\n </span>\n )}\n </span>\n ))}\n </div>\n )\n}\n\nfunction CloseIcon() {\n return (\n <svg\n css={styles.headerIcon}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={2}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n )\n}\n\nexport default StudioUI\n","'use client'\n\nimport { createContext, useContext } from 'react'\nimport type { FileItem, LeanMeta } from '../types'\n\n/\n Studio state interface\n * State is managed by StudioUI and provided to all child components\n /\nexport interface StudioState {\n isOpen: boolean\n openStudio: () => void\n closeStudio: () => void\n toggleStudio: () => void\n\n // Navigation\n currentPath: string\n setCurrentPath: (path: string) => void\n navigateUp: () => void\n\n // Selection\n selectedItems: Set<string>\n toggleSelection: (path: string) => void\n selectRange: (fromPath: string, toPath: string, allItems: FileItem[]) => void\n selectAll: (items: FileItem[]) => void\n clearSelection: () => void\n lastSelectedPath: string \| null\n\n // View\n viewMode: 'grid' \| 'list'\n setViewMode: (mode: 'grid' \| 'list') => void\n\n // Focused item (for detail view)\n focusedItem: FileItem \| null\n setFocusedItem: (item: FileItem \| null) => void\n\n // Meta\n meta: LeanMeta \| null\n setMeta: (meta: LeanMeta) => void\n\n // Loading\n isLoading: boolean\n setIsLoading: (loading: boolean) => void\n\n // Refresh trigger\n refreshKey: number\n triggerRefresh: () => void\n\n // Search\n searchQuery: string\n setSearchQuery: (query: string) => void\n}\n\nconst defaultState: StudioState = {\n isOpen: false,\n openStudio: () => {},\n closeStudio: () => {},\n toggleStudio: () => {},\n currentPath: 'public',\n setCurrentPath: () => {},\n navigateUp: () => {},\n selectedItems: new Set(),\n toggleSelection: () => {},\n selectRange: () => {},\n selectAll: () => {},\n clearSelection: () => {},\n lastSelectedPath: null,\n viewMode: 'grid',\n setViewMode: () => {},\n focusedItem: null,\n setFocusedItem: () => {},\n meta: null,\n setMeta: () => {},\n isLoading: false,\n setIsLoading: () => {},\n refreshKey: 0,\n triggerRefresh: () => {},\n searchQuery: '',\n setSearchQuery: () => {},\n}\n\nexport const StudioContext = createContext<StudioState>(defaultState)\n\n/\n Hook to access Studio state from child components\n /\nexport function useStudio() {\n return useContext(StudioContext)\n}\n","/* @jsxImportSource @emotion/react /\n'use client'\n\nimport { useCallback, useRef, useState } from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { useStudio } from './StudioContext'\nimport { ConfirmModal, AlertModal, ProgressModal, InputModal, type ProgressState } from './StudioModal'\nimport { StudioFolderPicker } from './StudioFolderPicker'\nimport { colors, fontSize } from './tokens'\n\n// Standard button height for consistency\nconst btnHeight = '36px'\n\nconst spin = keyframes`\n to { transform: rotate(360deg); }\n`\n\nconst styles = {\n toolbar: css`\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 12px 16px;\n background-color: ${colors.surface};\n border-bottom: 1px solid ${colors.border};\n overflow-x: auto;\n min-width: 0;\n \n @media (min-width: 768px) {\n padding: 12px 24px;\n }\n `,\n left: css`\n display: flex;\n flex-wrap: nowrap;\n flex-shrink: 0;\n align-items: center;\n gap: 8px;\n `,\n right: css`\n display: flex;\n flex-wrap: nowrap;\n flex-shrink: 0;\n align-items: center;\n gap: 8px;\n `,\n btn: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: ${btnHeight};\n padding: 0 14px;\n border-radius: 6px;\n font-size: ${fontSize.base};\n font-weight: 500;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n cursor: pointer;\n transition: all 0.15s ease;\n color: ${colors.text};\n letter-spacing: -0.01em;\n \n &:hover:not(:disabled) {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n \n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n `,\n btnIconOnly: css`\n padding: 0 10px;\n `,\n btnPrimary: css`\n background: ${colors.primary};\n border-color: ${colors.primary};\n color: white;\n \n &:hover:not(:disabled) {\n background: ${colors.primaryHover};\n border-color: ${colors.primaryHover};\n }\n `,\n btnDanger: css`\n color: ${colors.danger};\n \n &:hover:not(:disabled) {\n background-color: ${colors.dangerLight};\n border-color: ${colors.danger};\n }\n `,\n icon: css`\n width: 16px;\n height: 16px;\n `,\n iconSpin: css`\n animation: ${spin} 1s linear infinite;\n `,\n selectionCount: css`\n font-size: ${fontSize.base};\n color: ${colors.textSecondary};\n display: flex;\n align-items: center;\n gap: 8px;\n margin-right: 8px;\n `,\n clearBtn: css`\n color: ${colors.primary};\n background: none;\n border: none;\n cursor: pointer;\n font-size: ${fontSize.base};\n font-weight: 500;\n padding: 0;\n \n &:hover {\n text-decoration: underline;\n }\n `,\n divider: css`\n width: 1px;\n height: 24px;\n background: ${colors.border};\n margin: 0 4px;\n `,\n viewToggle: css`\n display: flex;\n align-items: center;\n height: ${btnHeight};\n background-color: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n overflow: hidden;\n `,\n searchWrapper: css`\n position: relative;\n display: flex;\n align-items: center;\n `,\n searchInput: css`\n height: ${btnHeight};\n padding: 0 32px 0 12px;\n border: 1px solid ${colors.border};\n border-radius: 6px;\n font-size: ${fontSize.base};\n background: ${colors.surface};\n color: ${colors.text};\n width: 180px;\n transition: all 0.15s ease;\n \n &:focus {\n outline: none;\n border-color: ${colors.primary};\n box-shadow: 0 0 0 2px ${colors.primaryLight};\n }\n \n &::placeholder {\n color: ${colors.textMuted};\n }\n `,\n searchClearBtn: css`\n position: absolute;\n right: 5px;\n top: 5px;\n bottom: 5px;\n background: ${colors.primary};\n border: none;\n padding: 0 6px;\n cursor: pointer;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: all 0.15s ease;\n \n &:hover {\n background: ${colors.primaryHover};\n }\n `,\n viewBtn: css`\n height: 100%;\n padding: 0 10px;\n background: transparent;\n border: none;\n cursor: pointer;\n color: ${colors.textSecondary};\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n color: ${colors.text};\n background-color: ${colors.surfaceHover};\n }\n `,\n viewBtnActive: css`\n background-color: ${colors.primaryLight};\n color: ${colors.primary};\n \n &:hover {\n background-color: ${colors.primaryLight};\n color: ${colors.primary};\n }\n `,\n}\n\nexport function StudioToolbar() {\n const { selectedItems, viewMode, setViewMode, clearSelection, currentPath, triggerRefresh, focusedItem } = useStudio()\n const fileInputRef = useRef<HTMLInputElement>(null)\n const abortControllerRef = useRef<AbortController \| null>(null)\n const [uploading, setUploading] = useState(false)\n const [refreshing, setRefreshing] = useState(false)\n const [processing, setProcessing] = useState(false)\n const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)\n const [showProcessConfirm, setShowProcessConfirm] = useState(false)\n const [showProgress, setShowProgress] = useState(false)\n const [progressState, setProgressState] = useState<ProgressState>({\n current: 0,\n total: 0,\n percent: 0,\n status: 'processing',\n })\n const [processCount, setProcessCount] = useState(0)\n const [processMode, setProcessMode] = useState<'all' \| 'selected'>('all')\n const [imagesToProcess, setImagesToProcess] = useState<string[]>([])\n const [alertMessage, setAlertMessage] = useState<{ title: string; message: string } \| null>(null)\n const [showNewFolderModal, setShowNewFolderModal] = useState(false)\n const [showMoveModal, setShowMoveModal] = useState(false)\n\n // Check if we're in the images folder (uploads not allowed there)\n const isInImagesFolder = currentPath === 'public/images' \|\| currentPath.startsWith('public/images/')\n\n const handleUpload = useCallback(() => {\n fileInputRef.current?.click()\n }, [])\n\n const handleRefresh = useCallback(() => {\n setRefreshing(true)\n triggerRefresh()\n setTimeout(() => setRefreshing(false), 600)\n }, [triggerRefresh])\n\n const handleFileChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {\n const files = e.target.files\n if (!files \|\| files.length === 0) return\n\n setUploading(true)\n try {\n for (const file of Array.from(files)) {\n const formData = new FormData()\n formData.append('file', file)\n formData.append('path', currentPath)\n\n const response = await fetch('/api/studio/upload', {\n method: 'POST',\n body: formData,\n })\n\n if (!response.ok) {\n const error = await response.json()\n if (response.status >= 500) {\n console.error('Upload error:', error)\n setAlertMessage({\n title: 'Upload Failed',\n message: `Failed to upload ${file.name}: ${error.error \|\| 'Unknown error'}`,\n })\n } else {\n setAlertMessage({\n title: 'Cannot Upload Here',\n message: error.error \|\| 'Upload not allowed in this location.',\n })\n }\n }\n }\n triggerRefresh()\n } catch (error) {\n console.error('Upload error:', error)\n setAlertMessage({\n title: 'Upload Failed',\n message: 'Upload failed. Check console for details.',\n })\n } finally {\n setUploading(false)\n if (fileInputRef.current) {\n fileInputRef.current.value = ''\n }\n }\n }, [currentPath, triggerRefresh])\n\n const handleProcessImages = useCallback(async () => {\n const hasSelection = selectedItems.size > 0\n \n if (hasSelection) {\n const selectedPaths = Array.from(selectedItems)\n \n // Separate folders and image files\n const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'ico', 'bmp', 'tiff', 'tif']\n const selectedImagePaths = selectedPaths.filter(p => {\n const ext = p.split('.').pop()?.toLowerCase() \|\| ''\n return imageExtensions.includes(ext)\n })\n const selectedFolders = selectedPaths.filter(p => !p.includes('.') \|\| p.endsWith('/'))\n \n // If folders are selected, fetch all images from them\n if (selectedFolders.length > 0) {\n try {\n const response = await fetch(`/api/studio/folder-images?folders=${encodeURIComponent(selectedFolders.join(','))}`)\n const data = await response.json()\n \n if (data.images) {\n // Add folder images to selectedImagePaths (as public/ paths)\n for (const img of data.images) {\n const fullPath = `public/${img}`\n if (!selectedImagePaths.includes(fullPath)) {\n selectedImagePaths.push(fullPath)\n }\n }\n }\n } catch (error) {\n console.error('Failed to get folder images:', error)\n }\n }\n \n if (selectedImagePaths.length === 0) {\n setAlertMessage({\n title: 'No Images Found',\n message: 'No images found in the selected items.',\n })\n return\n }\n \n setProcessCount(selectedImagePaths.length)\n setImagesToProcess(selectedImagePaths)\n setProcessMode('selected')\n setShowProcessConfirm(true)\n } else {\n // Count ALL images for \"process all\"\n try {\n const response = await fetch('/api/studio/count-images')\n const data = await response.json()\n \n if (data.count === 0) {\n setAlertMessage({\n title: 'No Images Found',\n message: 'No images found in the public folder to process.',\n })\n return\n }\n \n setProcessCount(data.count)\n setProcessMode('all')\n setShowProcessConfirm(true)\n } catch (error) {\n console.error('Failed to count images:', error)\n setAlertMessage({\n title: 'Error',\n message: 'Failed to count images.',\n })\n }\n }\n }, [selectedItems])\n\n const handleProcessConfirm = useCallback(async () => {\n setShowProcessConfirm(false)\n setProcessing(true)\n\n // Create new AbortController for this request\n abortControllerRef.current = new AbortController()\n const signal = abortControllerRef.current.signal\n\n try {\n if (processMode === 'all') {\n // Process all images with streaming progress\n setShowProgress(true)\n setProgressState({\n current: 0,\n total: processCount,\n percent: 0,\n status: 'processing',\n })\n\n const response = await fetch('/api/studio/process-all', {\n method: 'POST',\n signal,\n })\n\n if (!response.body) {\n throw new Error('No response body')\n }\n\n const reader = response.body.getReader()\n const decoder = new TextDecoder()\n\n try {\n while (true) {\n const { done, value } = await reader.read()\n if (done) break\n\n // Check if aborted\n if (signal.aborted) {\n reader.cancel()\n break\n }\n\n const text = decoder.decode(value)\n const lines = text.split('\\n\\n').filter(line => line.startsWith('data: '))\n\n for (const line of lines) {\n try {\n const data = JSON.parse(line.replace('data: ', ''))\n \n if (data.type === 'start') {\n setProgressState(prev => ({\n ...prev,\n total: data.total,\n }))\n } else if (data.type === 'progress') {\n setProgressState({\n current: data.current,\n total: data.total,\n percent: data.percent,\n currentFile: data.currentFile,\n status: 'processing',\n })\n } else if (data.type === 'cleanup') {\n setProgressState(prev => ({\n ...prev,\n status: 'cleanup',\n currentFile: undefined,\n }))\n } else if (data.type === 'complete') {\n setProgressState({\n current: data.processed,\n total: data.processed,\n percent: 100,\n status: 'complete',\n processed: data.processed,\n orphansRemoved: data.orphansRemoved,\n errors: data.errors,\n })\n triggerRefresh()\n } else if (data.type === 'error') {\n setProgressState(prev => ({\n ...prev,\n status: 'error',\n message: data.message,\n }))\n }\n } catch {\n // Ignore parse errors\n }\n }\n }\n } catch (err) {\n if (signal.aborted) {\n // User stopped - update state to show stopped status\n setProgressState(prev => ({\n ...prev,\n status: 'stopped',\n processed: prev.current,\n }))\n triggerRefresh()\n } else {\n throw err\n }\n }\n } else {\n // Process selected images (no streaming for now)\n setShowProgress(true)\n setProgressState({\n current: 0,\n total: processCount,\n percent: 0,\n status: 'processing',\n })\n\n // Use stored imagesToProcess instead of selectedItems\n const selectedImageKeys = imagesToProcess.map(p => p.replace(/^public\\//, ''))\n \n const response = await fetch('/api/studio/reprocess', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ imageKeys: selectedImageKeys }),\n signal,\n })\n \n const data = await response.json()\n \n if (response.ok) {\n setProgressState({\n current: data.processed?.length \|\| 0,\n total: data.processed?.length \|\| 0,\n percent: 100,\n status: 'complete',\n processed: data.processed?.length \|\| 0,\n errors: data.errors?.length \|\| 0,\n })\n clearSelection()\n triggerRefresh()\n } else {\n setProgressState({\n current: 0,\n total: 0,\n percent: 0,\n status: 'error',\n message: data.error \|\| 'Unknown error',\n })\n }\n }\n } catch (error) {\n if (signal.aborted) {\n // User stopped\n setProgressState(prev => ({\n ...prev,\n status: 'stopped',\n processed: prev.current,\n }))\n triggerRefresh()\n } else {\n console.error('Processing error:', error)\n setProgressState({\n current: 0,\n total: 0,\n percent: 0,\n status: 'error',\n message: 'Processing failed. Check console for details.',\n })\n }\n } finally {\n setProcessing(false)\n abortControllerRef.current = null\n }\n }, [processMode, processCount, imagesToProcess, clearSelection, triggerRefresh])\n\n const handleStopProcessing = useCallback(() => {\n if (abortControllerRef.current) {\n abortControllerRef.current.abort()\n }\n }, [])\n\n const handleDeleteClick = useCallback(() => {\n if (selectedItems.size === 0) return\n setShowDeleteConfirm(true)\n }, [selectedItems])\n\n const handleDeleteConfirm = useCallback(async () => {\n setShowDeleteConfirm(false)\n \n try {\n const response = await fetch('/api/studio/delete', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ paths: Array.from(selectedItems) }),\n })\n\n if (response.ok) {\n clearSelection()\n triggerRefresh()\n } else {\n const error = await response.json()\n setAlertMessage({\n title: 'Delete Failed',\n message: error.error \|\| 'Unknown error',\n })\n }\n } catch (error) {\n console.error('Delete error:', error)\n setAlertMessage({\n title: 'Delete Failed',\n message: 'Delete failed. Check console for details.',\n })\n }\n }, [selectedItems, clearSelection, triggerRefresh])\n\n const handleSyncCdn = useCallback(() => {\n console.log('Sync CDN clicked', selectedItems)\n }, [selectedItems])\n\n const handleCreateFolder = useCallback(async (folderName: string) => {\n setShowNewFolderModal(false)\n \n try {\n const response = await fetch('/api/studio/create-folder', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ parentPath: currentPath, name: folderName }),\n })\n\n if (response.ok) {\n triggerRefresh()\n } else {\n const error = await response.json()\n setAlertMessage({\n title: 'Create Folder Failed',\n message: error.error \|\| 'Unknown error',\n })\n }\n } catch (error) {\n console.error('Create folder error:', error)\n setAlertMessage({\n title: 'Create Folder Failed',\n message: 'Failed to create folder. Check console for details.',\n })\n }\n }, [currentPath, triggerRefresh])\n\n const handleMoveClick = useCallback(() => {\n if (selectedItems.size === 0) return\n setShowMoveModal(true)\n }, [selectedItems])\n\n const handleMoveConfirm = useCallback(async (destination: string) => {\n try {\n const response = await fetch('/api/studio/move', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ paths: Array.from(selectedItems), destination }),\n })\n\n const data = await response.json()\n\n if (response.ok) {\n clearSelection()\n triggerRefresh()\n if (data.errors && data.errors.length > 0) {\n setAlertMessage({\n title: 'Move Completed with Errors',\n message: data.errors.join('\\n'),\n })\n }\n } else {\n setAlertMessage({\n title: 'Move Failed',\n message: data.error \|\| 'Unknown error',\n })\n }\n } catch (error) {\n console.error('Move error:', error)\n setAlertMessage({\n title: 'Move Failed',\n message: 'Failed to move items. Check console for details.',\n })\n }\n }, [selectedItems, clearSelection, triggerRefresh])\n\n const { searchQuery, setSearchQuery } = useStudio()\n \n const handleSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n setSearchQuery(e.target.value)\n }, [setSearchQuery])\n\n const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Escape') {\n e.stopPropagation() // Prevent closing the studio\n setSearchQuery('')\n ;(e.target as HTMLInputElement).blur()\n }\n }, [setSearchQuery])\n\n const hasSelection = selectedItems.size > 0\n \n // Check if any selected items are in the images folder (protected)\n const hasImagesSelected = Array.from(selectedItems).some(path => \n path === 'public/images' \|\| path.startsWith('public/images/')\n )\n\n // Hide toolbar actions when viewing detail\n if (focusedItem) {\n return null\n }\n\n return (\n <>\n {showDeleteConfirm && (\n <ConfirmModal\n title=\"Delete Items\"\n message={`Are you sure you want to delete ${selectedItems.size} item(s)? This action cannot be undone.`}\n confirmLabel=\"Delete\"\n variant=\"danger\"\n onConfirm={handleDeleteConfirm}\n onCancel={() => setShowDeleteConfirm(false)}\n />\n )}\n\n {showProcessConfirm && (\n <ConfirmModal\n title=\"Process Images\"\n message={processMode === 'all' \n ? `Found ${processCount} image${processCount !== 1 ? 's' : ''} in the public folder. This will regenerate all thumbnails and remove any orphaned files from the images folder.`\n : `Process ${processCount} selected image${processCount !== 1 ? 's' : ''}? This will regenerate thumbnails for these files.`\n }\n confirmLabel={processing ? 'Processing...' : 'Process'}\n onConfirm={handleProcessConfirm}\n onCancel={() => setShowProcessConfirm(false)}\n />\n )}\n\n {showProgress && (\n <ProgressModal\n title=\"Processing Images\"\n progress={progressState}\n onStop={handleStopProcessing}\n onClose={() => {\n setShowProgress(false)\n setProgressState({\n current: 0,\n total: 0,\n percent: 0,\n status: 'processing',\n })\n }}\n />\n )}\n\n {showNewFolderModal && (\n <InputModal\n title=\"New Folder\"\n message=\"Enter a name for the new folder:\"\n placeholder=\"Folder name\"\n confirmLabel=\"Create\"\n onConfirm={handleCreateFolder}\n onCancel={() => setShowNewFolderModal(false)}\n />\n )}\n\n {showMoveModal && (\n <StudioFolderPicker\n selectedItems={selectedItems}\n currentPath={currentPath}\n onMove={(destination) => {\n setShowMoveModal(false)\n handleMoveConfirm(destination)\n }}\n onCancel={() => setShowMoveModal(false)}\n />\n )}\n\n {alertMessage && (\n <AlertModal\n title={alertMessage.title}\n message={alertMessage.message}\n onClose={() => setAlertMessage(null)}\n />\n )}\n\n <div css={styles.toolbar}>\n <input\n ref={fileInputRef}\n type=\"file\"\n multiple\n accept=\"image/,video/,audio/,.pdf\"\n onChange={handleFileChange}\n style={{ display: 'none' }}\n />\n \n <div css={styles.left}>\n <button\n css={[styles.btn, styles.btnPrimary]}\n onClick={handleUpload}\n disabled={uploading \|\| isInImagesFolder}\n >\n <UploadIcon />\n {uploading ? 'Uploading...' : 'Upload'}\n </button>\n <button\n css={styles.btn}\n onClick={() => setShowNewFolderModal(true)}\n disabled={isInImagesFolder}\n title={isInImagesFolder ? 'Cannot create folders in protected images folder' : undefined}\n >\n <FolderPlusIcon />\n New Folder\n </button>\n \n <div css={styles.divider} />\n \n <button\n css={styles.btn}\n onClick={handleProcessImages}\n disabled={processing \|\| isInImagesFolder \|\| hasImagesSelected}\n title={isInImagesFolder \|\| hasImagesSelected ? 'Cannot process protected images folder' : undefined}\n >\n <ImageStackIcon />\n {processing ? 'Processing...' : 'Process Images'}\n </button>\n <button\n css={[styles.btn, styles.btnDanger]}\n onClick={handleDeleteClick}\n disabled={!hasSelection \|\| hasImagesSelected}\n title={hasImagesSelected ? 'Cannot delete protected images folder items' : undefined}\n >\n <TrashIcon />\n Delete\n </button>\n <button\n css={styles.btn}\n onClick={handleMoveClick}\n disabled={!hasSelection \|\| hasImagesSelected}\n title={hasImagesSelected ? 'Cannot move protected images folder items' : undefined}\n >\n <MoveIcon />\n Move\n </button>\n <button\n css={styles.btn}\n onClick={handleSyncCdn}\n disabled={!hasSelection}\n >\n <CloudIcon />\n Sync CDN\n </button>\n <div css={styles.searchWrapper}>\n <input\n css={styles.searchInput}\n type=\"text\"\n placeholder=\"Search images...\"\n value={searchQuery}\n onChange={handleSearch}\n onKeyDown={handleSearchKeyDown}\n />\n {searchQuery && (\n <button\n css={styles.searchClearBtn}\n onClick={() => setSearchQuery('')}\n title=\"Clear search\"\n >\n <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div css={styles.right}>\n {hasSelection && (\n <span css={styles.selectionCount}>\n {selectedItems.size} selected\n <button css={styles.clearBtn} onClick={clearSelection}>\n Clear\n </button>\n </span>\n )}\n\n <button\n css={[styles.btn, styles.btnIconOnly]}\n onClick={handleRefresh}\n >\n <RefreshIcon spinning={refreshing} />\n </button>\n\n <div css={styles.viewToggle}>\n <button\n css={[styles.viewBtn, viewMode === 'grid' && styles.viewBtnActive]}\n onClick={() => setViewMode('grid')}\n aria-label=\"Grid view\"\n >\n <GridIcon />\n </button>\n <button\n css={[styles.viewBtn, viewMode === 'list' && styles.viewBtnActive]}\n onClick={() => setViewMode('list')}\n aria-label=\"List view\"\n >\n <ListIcon />\n </button>\n </div>\n </div>\n </div>\n </>\n )\n}\n\nfunction UploadIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12\" />\n </svg>\n )\n}\n\nfunction RefreshIcon({ spinning }: { spinning?: boolean }) {\n return (\n <svg css={[styles.icon, spinning && styles.iconSpin]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n </svg>\n )\n}\n\nfunction TrashIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" />\n </svg>\n )\n}\n\nfunction FolderPlusIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n </svg>\n )\n}\n\nfunction MoveIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4\" />\n </svg>\n )\n}\n\nfunction CloudIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" />\n </svg>\n )\n}\n\nfunction GridIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\" />\n </svg>\n )\n}\n\nfunction ListIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 10h16M4 14h16M4 18h16\" />\n </svg>\n )\n}\n\nfunction ImageStackIcon() {\n return (\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n )\n}\n","/** @jsxImportSource @emotion/react /\n'use client'\n\nimport React from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { colors, fontSize, fontStack, baseReset } from './tokens'\n\nconst fadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`\n\nconst slideIn = keyframes`\n from { \n opacity: 0;\n transform: translateY(-8px) scale(0.98);\n }\n to { \n opacity: 1;\n transform: translateY(0) scale(1);\n }\n`\n\nconst styles = {\n overlay: css`\n position: fixed;\n inset: 0;\n background-color: rgba(26, 31, 54, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: ${fadeIn} 0.15s ease-out;\n font-family: ${fontStack};\n `,\n modal: css`\n ${baseReset}\n background-color: ${colors.surface};\n border-radius: 12px;\n box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);\n max-width: 420px;\n width: 90%;\n animation: ${slideIn} 0.2s ease-out;\n overflow: hidden;\n `,\n header: css`\n padding: 24px 24px 0;\n `,\n title: css`\n font-size: ${fontSize.lg};\n font-weight: 600;\n color: ${colors.text};\n margin: 0;\n letter-spacing: -0.02em;\n `,\n body: css`\n padding: 12px 24px 24px;\n `,\n message: css`\n font-size: ${fontSize.base};\n color: ${colors.textSecondary};\n margin: 0;\n line-height: 1.6;\n `,\n footer: css`\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid ${colors.border};\n background-color: ${colors.background};\n `,\n btn: css`\n padding: 10px 18px;\n font-size: ${fontSize.base};\n font-weight: 500;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n letter-spacing: -0.01em;\n `,\n btnCancel: css`\n background-color: ${colors.surface};\n border: 1px solid ${colors.border};\n color: ${colors.text};\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n btnConfirm: css`\n background-color: ${colors.primary};\n border: 1px solid ${colors.primary};\n color: white;\n \n &:hover {\n background-color: ${colors.primaryHover};\n border-color: ${colors.primaryHover};\n }\n `,\n btnDanger: css`\n background-color: ${colors.danger};\n border: 1px solid ${colors.danger};\n color: white;\n \n &:hover {\n background-color: ${colors.dangerHover};\n border-color: ${colors.dangerHover};\n }\n `,\n}\n\ninterface ConfirmModalProps {\n title: string\n message: string\n confirmLabel?: string\n cancelLabel?: string\n variant?: 'default' \| 'danger'\n onConfirm: () => void\n onCancel: () => void\n}\n\nexport function ConfirmModal({\n title,\n message,\n confirmLabel = 'Confirm',\n cancelLabel = 'Cancel',\n variant = 'default',\n onConfirm,\n onCancel,\n}: ConfirmModalProps) {\n return (\n <div css={styles.overlay} onClick={onCancel}>\n <div css={styles.modal} onClick={(e) => e.stopPropagation()}>\n <div css={styles.header}>\n <h3 css={styles.title}>{title}</h3>\n </div>\n <div css={styles.body}>\n <p css={styles.message}>{message}</p>\n </div>\n <div css={styles.footer}>\n <button css={[styles.btn, styles.btnCancel]} onClick={onCancel}>\n {cancelLabel}\n </button>\n <button\n css={[styles.btn, variant === 'danger' ? styles.btnDanger : styles.btnConfirm]}\n onClick={onConfirm}\n >\n {confirmLabel}\n </button>\n </div>\n </div>\n </div>\n )\n}\n\ninterface InputModalProps {\n title: string\n message?: string\n inputLabel?: string\n defaultValue?: string\n placeholder?: string\n confirmLabel?: string\n cancelLabel?: string\n onConfirm: (value: string) => void\n onCancel: () => void\n}\n\nconst inputStyles = {\n input: css`\n width: 100%;\n padding: 10px 12px;\n font-size: ${fontSize.base};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n background: ${colors.surface};\n color: ${colors.text};\n margin-top: 12px;\n transition: all 0.15s ease;\n \n &:focus {\n outline: none;\n border-color: ${colors.primary};\n box-shadow: 0 0 0 2px ${colors.primaryLight};\n }\n \n &::placeholder {\n color: ${colors.textMuted};\n }\n `,\n}\n\nexport function InputModal({\n title,\n message,\n inputLabel,\n defaultValue = '',\n placeholder,\n confirmLabel = 'Confirm',\n cancelLabel = 'Cancel',\n onConfirm,\n onCancel,\n}: InputModalProps) {\n const [value, setValue] = React.useState(defaultValue)\n \n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault()\n if (value.trim()) {\n onConfirm(value.trim())\n }\n }\n \n return (\n <div css={styles.overlay} onClick={onCancel}>\n <div css={styles.modal} onClick={(e) => e.stopPropagation()}>\n <form onSubmit={handleSubmit}>\n <div css={styles.header}>\n <h3 css={styles.title}>{title}</h3>\n </div>\n <div css={styles.body}>\n {message && <p css={styles.message}>{message}</p>}\n {inputLabel && <label css={styles.message}>{inputLabel}</label>}\n <input\n css={inputStyles.input}\n type=\"text\"\n value={value}\n onChange={(e) => setValue(e.target.value)}\n placeholder={placeholder}\n autoFocus\n />\n </div>\n <div css={styles.footer}>\n <button type=\"button\" css={[styles.btn, styles.btnCancel]} onClick={onCancel}>\n {cancelLabel}\n </button>\n <button type=\"submit\" css={[styles.btn, styles.btnConfirm]} disabled={!value.trim()}>\n {confirmLabel}\n </button>\n </div>\n </form>\n </div>\n </div>\n )\n}\n\ninterface AlertModalProps {\n title: string\n message: string\n buttonLabel?: string\n onClose: () => void\n}\n\nexport function AlertModal({\n title,\n message,\n buttonLabel = 'OK',\n onClose,\n}: AlertModalProps) {\n return (\n <div css={styles.overlay} onClick={onClose}>\n <div css={styles.modal} onClick={(e) => e.stopPropagation()}>\n <div css={styles.header}>\n <h3 css={styles.title}>{title}</h3>\n </div>\n <div css={styles.body}>\n <p css={styles.message}>{message}</p>\n </div>\n <div css={styles.footer}>\n <button css={[styles.btn, styles.btnConfirm]} onClick={onClose}>\n {buttonLabel}\n </button>\n </div>\n </div>\n </div>\n )\n}\n\nconst progressStyles = {\n progressContainer: css`\n margin-top: 16px;\n `,\n progressBar: css`\n width: 100%;\n height: 8px;\n background-color: ${colors.background};\n border-radius: 4px;\n overflow: hidden;\n margin-bottom: 12px;\n `,\n progressFill: css`\n height: 100%;\n background: linear-gradient(90deg, ${colors.primary}, ${colors.primaryHover});\n border-radius: 4px;\n transition: width 0.3s ease;\n `,\n progressText: css`\n font-size: ${fontSize.sm};\n color: ${colors.textSecondary};\n margin: 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n `,\n currentFile: css`\n font-size: ${fontSize.xs};\n color: ${colors.textMuted};\n margin: 8px 0 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n}\n\nexport interface ProgressState {\n current: number\n total: number\n percent: number\n currentFile?: string\n status: 'processing' \| 'cleanup' \| 'complete' \| 'error' \| 'stopped'\n message?: string\n processed?: number\n orphansRemoved?: number\n errors?: number\n}\n\ninterface ProgressModalProps {\n title: string\n progress: ProgressState\n onClose?: () => void\n onStop?: () => void\n}\n\nexport function ProgressModal({\n title,\n progress,\n onClose,\n onStop,\n}: ProgressModalProps) {\n const isComplete = progress.status === 'complete'\n const isError = progress.status === 'error'\n const isStopped = progress.status === 'stopped'\n const canClose = isComplete \|\| isError \|\| isStopped\n const isRunning = !canClose\n\n return (\n <div css={styles.overlay}>\n <div css={styles.modal} onClick={(e) => e.stopPropagation()}>\n <div css={styles.header}>\n <h3 css={styles.title}>{title}</h3>\n </div>\n <div css={styles.body}>\n {isError ? (\n <p css={styles.message}>{progress.message \|\| 'An error occurred'}</p>\n ) : isStopped ? (\n <p css={styles.message}>\n Processing stopped. Processed {progress.processed ?? progress.current} image{(progress.processed ?? progress.current) !== 1 ? 's' : ''} before stopping.\n </p>\n ) : isComplete ? (\n <p css={styles.message}>\n Processed {progress.processed} image{progress.processed !== 1 ? 's' : ''}.\n {progress.orphansRemoved !== undefined && progress.orphansRemoved > 0 ? (\n <> Removed {progress.orphansRemoved} orphaned thumbnail{progress.orphansRemoved !== 1 ? 's' : ''}.</>\n ) : null}\n {progress.errors !== undefined && progress.errors > 0 ? (\n <> {progress.errors} error{progress.errors !== 1 ? 's' : ''} occurred.</>\n ) : null}\n </p>\n ) : (\n <>\n <p css={styles.message}>\n {progress.status === 'cleanup' \n ? 'Cleaning up orphaned files...' \n : `Processing images...`}\n </p>\n <div css={progressStyles.progressContainer}>\n <div css={progressStyles.progressBar}>\n <div \n css={progressStyles.progressFill} \n style={{ width: `${progress.percent}%` }} \n />\n </div>\n <div css={progressStyles.progressText}>\n <span>{progress.current} of {progress.total}</span>\n <span>{progress.percent}%</span>\n </div>\n {progress.currentFile && (\n <p css={progressStyles.currentFile} title={progress.currentFile}>\n {progress.currentFile}\n </p>\n )}\n </div>\n </>\n )}\n </div>\n <div css={styles.footer}>\n {isRunning && onStop && (\n <button css={[styles.btn, styles.btnDanger]} onClick={onStop}>\n Stop\n </button>\n )}\n {canClose && (\n <button css={[styles.btn, styles.btnConfirm]} onClick={onClose}>\n Done\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n","/* @jsxImportSource @emotion/react /\n'use client'\n\nimport { useState, useEffect } from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { colors, fontSize, fontStack, baseReset } from './tokens'\n\nconst fadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`\n\nconst slideIn = keyframes`\n from { \n opacity: 0;\n transform: translateY(-8px) scale(0.98);\n }\n to { \n opacity: 1;\n transform: translateY(0) scale(1);\n }\n`\n\ninterface Folder {\n path: string\n name: string\n depth: number\n}\n\nconst styles = {\n overlay: css`\n position: fixed;\n inset: 0;\n background-color: rgba(26, 31, 54, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: ${fadeIn} 0.15s ease-out;\n font-family: ${fontStack};\n `,\n modal: css`\n ${baseReset}\n background-color: ${colors.surface};\n border-radius: 12px;\n box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);\n max-width: 480px;\n width: 90%;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n animation: ${slideIn} 0.2s ease-out;\n overflow: hidden;\n `,\n header: css`\n padding: 24px 24px 0;\n `,\n title: css`\n font-size: ${fontSize.lg};\n font-weight: 600;\n color: ${colors.text};\n margin: 0;\n letter-spacing: -0.02em;\n `,\n body: css`\n padding: 12px 24px 24px;\n flex: 1;\n overflow-y: auto;\n min-height: 200px;\n max-height: 400px;\n `,\n message: css`\n font-size: ${fontSize.base};\n color: ${colors.textSecondary};\n margin: 0 0 16px;\n line-height: 1.6;\n `,\n folderList: css`\n display: flex;\n flex-direction: column;\n gap: 0;\n `,\n folderItem: css`\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n border: 1px solid transparent;\n position: relative;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n }\n `,\n treeIndent: css`\n display: flex;\n align-items: center;\n height: 100%;\n `,\n treeLine: css`\n width: 16px;\n height: 100%;\n position: relative;\n flex-shrink: 0;\n \n &::before {\n content: '';\n position: absolute;\n left: 8px;\n top: 0;\n bottom: 50%;\n width: 0;\n border-left: 1px dashed ${colors.textSecondary};\n }\n \n &::after {\n content: '';\n position: absolute;\n left: 8px;\n top: 50%;\n width: 8px;\n height: 0;\n border-top: 1px dashed ${colors.textSecondary};\n }\n `,\n folderItemSelected: css`\n background-color: ${colors.primaryLight};\n border-color: ${colors.primary};\n \n &:hover {\n background-color: ${colors.primaryLight};\n }\n `,\n folderItemDisabled: css`\n opacity: 0.5;\n cursor: not-allowed;\n \n &:hover {\n background-color: transparent;\n }\n `,\n folderIcon: css`\n width: 20px;\n height: 20px;\n color: #f9935e;\n flex-shrink: 0;\n `,\n folderName: css`\n font-size: ${fontSize.base};\n color: ${colors.text};\n flex: 1;\n `,\n footer: css`\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid ${colors.border};\n background-color: ${colors.background};\n `,\n btn: css`\n padding: 10px 18px;\n font-size: ${fontSize.base};\n font-weight: 500;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n letter-spacing: -0.01em;\n `,\n btnCancel: css`\n background-color: ${colors.surface};\n border: 1px solid ${colors.border};\n color: ${colors.text};\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n btnConfirm: css`\n background-color: ${colors.primary};\n border: 1px solid ${colors.primary};\n color: white;\n \n &:hover:not(:disabled) {\n background-color: ${colors.primaryHover};\n border-color: ${colors.primaryHover};\n }\n \n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n `,\n loading: css`\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px;\n color: ${colors.textSecondary};\n `,\n spinner: css`\n width: 24px;\n height: 24px;\n border-radius: 50%;\n border: 3px solid ${colors.border};\n border-top-color: ${colors.primary};\n animation: spin 0.8s linear infinite;\n \n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n `,\n}\n\ninterface StudioFolderPickerProps {\n selectedItems: Set<string>\n currentPath: string\n onMove: (destination: string) => void\n onCancel: () => void\n}\n\nexport function StudioFolderPicker({ selectedItems, currentPath, onMove, onCancel }: StudioFolderPickerProps) {\n const [folders, setFolders] = useState<Folder[]>([])\n const [loading, setLoading] = useState(true)\n const [selectedFolder, setSelectedFolder] = useState<string \| null>(null)\n\n useEffect(() => {\n async function loadFolders() {\n try {\n const response = await fetch('/api/studio/list-folders')\n if (response.ok) {\n const data = await response.json()\n console.log('Loaded folders:', data)\n setFolders(data.folders \|\| [])\n } else {\n console.error('Failed to load folders:', response.status, await response.text())\n }\n } catch (error) {\n console.error('Failed to load folders:', error)\n } finally {\n setLoading(false)\n }\n }\n loadFolders()\n }, [])\n\n // Filter out folders that are being moved (can't move to themselves or their children)\n // Mark current folder as disabled but still show it\n const selectedPaths = Array.from(selectedItems)\n const availableFolders = folders.filter(folder => {\n // Can't move a folder into itself or its children\n return !selectedPaths.some(selected => \n folder.path === selected \|\| \n folder.path.startsWith(selected + '/')\n )\n })\n \n // Check if a folder is the current location (disabled)\n const isCurrentFolder = (folderPath: string) => folderPath === currentPath\n\n const handleConfirm = () => {\n if (selectedFolder) {\n onMove(selectedFolder)\n }\n }\n\n return (\n <div css={styles.overlay} onClick={onCancel}>\n <div css={styles.modal} onClick={(e) => e.stopPropagation()}>\n <div css={styles.header}>\n <h3 css={styles.title}>Move Items</h3>\n </div>\n <div css={styles.body}>\n <p css={styles.message}>\n Select a destination folder for {selectedItems.size} item{selectedItems.size !== 1 ? 's' : ''}:\n </p>\n \n {loading ? (\n <div css={styles.loading}>\n <div css={styles.spinner} />\n </div>\n ) : availableFolders.length === 0 ? (\n <div css={styles.loading}>\n No available folders to move to.\n </div>\n ) : (\n <div css={styles.folderList}>\n {availableFolders.map((folder) => {\n const disabled = isCurrentFolder(folder.path)\n return (\n <div\n key={folder.path}\n css={[\n styles.folderItem,\n selectedFolder === folder.path && styles.folderItemSelected,\n disabled && styles.folderItemDisabled\n ]}\n style={{ paddingLeft: 12 }}\n onClick={() => !disabled && setSelectedFolder(folder.path)}\n >\n {/ Render tree indent lines /}\n {folder.depth > 0 && (\n <div css={styles.treeIndent}>\n {Array.from({ length: folder.depth }).map((_, i) => (\n <div key={i} css={styles.treeLine} />\n ))}\n </div>\n )}\n <svg css={styles.folderIcon} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z\" />\n </svg>\n <span css={styles.folderName}>\n {folder.name}\n {disabled && ' (current)'}\n </span>\n </div>\n )\n })}\n </div>\n )}\n </div>\n <div css={styles.footer}>\n <button css={[styles.btn, styles.btnCancel]} onClick={onCancel}>\n Cancel\n </button>\n <button\n css={[styles.btn, styles.btnConfirm]}\n onClick={handleConfirm}\n disabled={!selectedFolder}\n >\n Move Here\n </button>\n </div>\n </div>\n </div>\n )\n}\n","/* @jsxImportSource @emotion/react /\n'use client'\n\nimport { useEffect, useState, useRef } from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { useStudio } from './StudioContext'\nimport { colors, fontSize } from './tokens'\nimport type { FileItem } from '../types'\n\nconst spin = keyframes`\n to { transform: rotate(360deg); }\n`\n\nconst styles = {\n loading: css`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 256px;\n `,\n spinner: css`\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: 3px solid ${colors.border};\n border-top-color: ${colors.primary};\n animation: ${spin} 0.8s linear infinite;\n `,\n empty: css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 256px;\n color: ${colors.textSecondary};\n `,\n emptyIcon: css`\n width: 48px;\n height: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n `,\n emptyText: css`\n font-size: ${fontSize.base};\n margin: 0 0 4px 0;\n \n &:last-child {\n color: ${colors.textMuted};\n font-size: ${fontSize.sm};\n }\n `,\n grid: css`\n display: grid;\n grid-template-columns: 1fr;\n gap: 12px;\n \n @media (min-width: 480px) { grid-template-columns: repeat(2, 1fr); }\n @media (min-width: 768px) { grid-template-columns: repeat(3, 1fr); }\n @media (min-width: 1024px) { grid-template-columns: repeat(4, 1fr); }\n @media (min-width: 1280px) { grid-template-columns: repeat(5, 1fr); }\n `,\n item: css`\n position: relative;\n border-radius: 8px;\n border: 1px solid ${colors.border};\n overflow: hidden;\n cursor: pointer;\n transition: all 0.15s ease;\n background-color: ${colors.surface};\n user-select: none;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n \n &:hover {\n border-color: #d0d5dd;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n }\n `,\n itemSelected: css`\n border-color: ${colors.primary};\n box-shadow: 0 0 0 1px ${colors.primary};\n \n &:hover {\n border-color: ${colors.primary};\n box-shadow: 0 0 0 1px ${colors.primary};\n }\n `,\n parentItem: css`\n cursor: pointer;\n \n &:hover {\n border-color: ${colors.primary};\n }\n `,\n checkboxWrapper: css`\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n padding: 8px;\n cursor: pointer;\n `,\n checkbox: css`\n width: 18px;\n height: 18px;\n accent-color: ${colors.primary};\n cursor: pointer;\n `,\n cdnBadge: css`\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 10;\n background-color: ${colors.successLight};\n color: ${colors.success};\n font-size: 11px;\n font-weight: 500;\n padding: 2px 8px;\n border-radius: 4px;\n `,\n content: css`\n position: relative;\n aspect-ratio: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n background: ${colors.background};\n `,\n folderIcon: css`\n width: 56px;\n height: 56px;\n color: #f9935e;\n `,\n imagesFolderIcon: css`\n width: 56px;\n height: 56px;\n color: ${colors.imagesFolder};\n `,\n imagesFolderWrapper: css`\n position: relative;\n `,\n lockIcon: css`\n position: absolute;\n bottom: 4px;\n right: 4px;\n width: 16px;\n height: 16px;\n color: ${colors.imagesFolder};\n background: white;\n border-radius: 50%;\n padding: 2px;\n `,\n parentIcon: css`\n width: 56px;\n height: 56px;\n color: ${colors.textMuted};\n `,\n fileIcon: css`\n width: 40px;\n height: 40px;\n color: ${colors.textMuted};\n `,\n image: css`\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n border-radius: 4px;\n `,\n noThumbnail: css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 16px;\n background: ${colors.background};\n border: 2px dashed ${colors.border};\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n width: 80%;\n height: 60%;\n \n &:hover {\n border-color: ${colors.primary};\n background: ${colors.surfaceHover};\n }\n `,\n noThumbnailIcon: css`\n width: 32px;\n height: 32px;\n color: ${colors.textMuted};\n `,\n noThumbnailText: css`\n font-size: ${fontSize.xs};\n color: ${colors.textMuted};\n text-align: center;\n `,\n label: css`\n padding: 10px 12px;\n background-color: ${colors.surface};\n border-top: 1px solid ${colors.borderLight};\n `,\n labelRow: css`\n display: flex;\n flex-direction: column;\n gap: 2px;\n `,\n labelText: css`\n flex: 1;\n min-width: 0;\n `,\n copyBtn: css`\n position: absolute;\n top: 4px;\n right: 4px;\n z-index: 10;\n height: 28px;\n width: 28px;\n color: ${colors.textMuted};\n background: transparent;\n border: none;\n padding: 0;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n color: ${colors.text};\n }\n `,\n copyIcon: css`\n width: 18px;\n height: 18px;\n `,\n tooltip: css`\n position: absolute;\n top: 50%;\n right: 100%;\n transform: translateY(-50%);\n background: #1a1f36;\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n margin-right: 6px;\n pointer-events: none;\n z-index: 100;\n \n &::before {\n content: '';\n position: absolute;\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border: 4px solid transparent;\n border-left-color: #1a1f36;\n }\n `,\n openBtn: css`\n position: absolute;\n bottom: 8px;\n right: 8px;\n z-index: 10;\n height: 28px;\n font-size: ${fontSize.sm};\n font-weight: 500;\n color: ${colors.primary};\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n padding: 0 8px;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n \n &:hover {\n background-color: ${colors.primaryLight};\n border-color: ${colors.primary};\n }\n `,\n name: css`\n font-size: ${fontSize.sm};\n font-weight: 500;\n color: ${colors.text};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n letter-spacing: -0.01em;\n `,\n size: css`\n font-size: ${fontSize.xs};\n color: ${colors.textMuted};\n margin: 2px 0 0 0;\n `,\n selectAllRow: css`\n display: flex;\n align-items: center;\n margin-bottom: 16px;\n padding: 12px 16px;\n background: ${colors.surface};\n border-radius: 8px;\n border: 1px solid ${colors.border};\n `,\n selectAllLabel: css`\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: ${fontSize.base};\n font-weight: 500;\n color: ${colors.textSecondary};\n cursor: pointer;\n \n &:hover {\n color: ${colors.text};\n }\n `,\n selectAllCheckbox: css`\n width: 16px;\n height: 16px;\n accent-color: ${colors.primary};\n `,\n}\n\nexport function StudioFileGrid() {\n const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio()\n const [items, setItems] = useState<FileItem[]>([])\n const [loading, setLoading] = useState(true)\n const isInitialLoad = useRef(true)\n const lastPath = useRef(currentPath)\n\n useEffect(() => {\n async function loadItems() {\n // Only show loading spinner on initial load or path change, not on refresh\n const isPathChange = lastPath.current !== currentPath\n if (isInitialLoad.current \|\| isPathChange) {\n setLoading(true)\n }\n lastPath.current = currentPath\n \n try {\n // Use search API when query has 2+ characters\n const url = searchQuery && searchQuery.length >= 2\n ? `/api/studio/search?q=${encodeURIComponent(searchQuery)}`\n : `/api/studio/list?path=${encodeURIComponent(currentPath)}`\n const response = await fetch(url)\n if (response.ok) {\n const data = await response.json()\n setItems(data.items \|\| [])\n }\n } catch (error) {\n console.error('Failed to load items:', error)\n }\n setLoading(false)\n isInitialLoad.current = false\n }\n loadItems()\n }, [currentPath, refreshKey, searchQuery])\n\n if (loading) {\n return (\n <div css={styles.loading}>\n <div css={styles.spinner} />\n </div>\n )\n }\n\n const isAtRoot = currentPath === 'public'\n\n // Empty state only when truly empty (not counting parent folder)\n if (items.length === 0 && isAtRoot) {\n return (\n <div css={styles.empty}>\n <svg css={styles.emptyIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n <p css={styles.emptyText}>No files in this folder</p>\n <p css={styles.emptyText}>Upload images to get started</p>\n </div>\n )\n }\n\n // When searching, items already come filtered from the API\n const isSearching = searchQuery && searchQuery.length >= 2\n\n const sortedItems = [...items].sort((a, b) => {\n if (a.type === 'folder' && b.type !== 'folder') return -1\n if (a.type !== 'folder' && b.type === 'folder') return 1\n return a.name.localeCompare(b.name)\n })\n\n const handleItemClick = (item: FileItem, e: React.MouseEvent) => {\n if (e.shiftKey && lastSelectedPath) {\n selectRange(lastSelectedPath, item.path, sortedItems)\n } else {\n toggleSelection(item.path)\n }\n }\n\n const handleOpen = (item: FileItem) => {\n if (item.type === 'folder') {\n setCurrentPath(item.path)\n } else {\n setFocusedItem(item)\n }\n }\n\n const handleGenerateThumbnail = async (item: FileItem) => {\n try {\n const imageKey = item.path.replace(/^public\\//, '')\n await fetch('/api/studio/reprocess', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ imageKeys: [imageKey] }),\n })\n triggerRefresh()\n } catch (error) {\n console.error('Failed to generate thumbnail:', error)\n }\n }\n\n const allItemsSelected = sortedItems.length > 0 && sortedItems.every(item => selectedItems.has(item.path))\n const someItemsSelected = sortedItems.some(item => selectedItems.has(item.path))\n\n const handleSelectAll = () => {\n if (allItemsSelected) {\n clearSelection()\n } else {\n selectAll(sortedItems)\n }\n }\n\n return (\n <div>\n {sortedItems.length > 0 && (\n <div css={styles.selectAllRow}>\n <label css={styles.selectAllLabel}>\n <input\n type=\"checkbox\"\n css={styles.selectAllCheckbox}\n checked={allItemsSelected}\n ref={(el) => {\n if (el) el.indeterminate = someItemsSelected && !allItemsSelected\n }}\n onChange={handleSelectAll}\n />\n Select all ({sortedItems.length})\n </label>\n </div>\n )}\n <div css={styles.grid}>\n {/ Parent folder navigation - hide when searching /}\n {!isAtRoot && !isSearching && (\n <div \n css={[styles.item, styles.parentItem]}\n onClick={navigateUp}\n >\n <div css={styles.content}>\n <svg css={styles.parentIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6\" />\n </svg>\n </div>\n <div css={styles.label}>\n <p css={styles.name}>..</p>\n <p css={styles.size}>Parent folder</p>\n </div>\n </div>\n )}\n \n {sortedItems.map((item) => (\n <GridItem\n key={item.path}\n item={item}\n isSelected={selectedItems.has(item.path)}\n onClick={(e) => handleItemClick(item, e)}\n onOpen={() => handleOpen(item)}\n onGenerateThumbnail={() => handleGenerateThumbnail(item)}\n />\n ))}\n </div>\n </div>\n )\n}\n\ninterface GridItemProps {\n item: FileItem\n isSelected: boolean\n onClick: (e: React.MouseEvent) => void\n onOpen: () => void\n onGenerateThumbnail: () => void\n}\n\nfunction GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }: GridItemProps) {\n const [showCopied, setShowCopied] = useState(false)\n const isFolder = item.type === 'folder'\n const isImage = !isFolder && item.thumbnail !== undefined\n const isImagesFolder = isFolder && (item.name === 'images' \|\| item.path.includes('/images/'))\n\n const handleCopyPath = (e: React.MouseEvent) => {\n e.stopPropagation()\n const pathToCopy = '/' + item.path.replace(/^public\\//, '')\n navigator.clipboard.writeText(pathToCopy)\n setShowCopied(true)\n setTimeout(() => setShowCopied(false), 1500)\n }\n\n return (\n <div \n css={[styles.item, isSelected && styles.itemSelected]} \n onClick={onClick}\n >\n <div\n css={styles.checkboxWrapper}\n onClick={(e) => e.stopPropagation()}\n >\n <input\n type=\"checkbox\"\n css={styles.checkbox}\n checked={isSelected}\n onChange={() => onClick({} as React.MouseEvent)}\n />\n </div>\n\n {item.cdnSynced && <span css={styles.cdnBadge}>CDN</span>}\n\n <div css={styles.content}>\n {/ Copy button - top right of image box /}\n <button\n css={styles.copyBtn}\n onClick={handleCopyPath}\n title=\"Copy file path\"\n >\n {showCopied && <span css={styles.tooltip}>Copied!</span>}\n <svg css={styles.copyIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" />\n </svg>\n </button>\n\n {/ Open button - bottom right of image box /}\n <button\n css={styles.openBtn}\n onClick={(e) => {\n e.stopPropagation()\n onOpen()\n }}\n >\n Open\n </button>\n\n {isFolder ? (\n isImagesFolder ? (\n <div css={styles.imagesFolderWrapper}>\n <svg css={styles.imagesFolderIcon} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z\" />\n </svg>\n <svg css={styles.lockIcon} fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fillRule=\"evenodd\" d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\" clipRule=\"evenodd\" />\n </svg>\n </div>\n ) : (\n <svg css={styles.folderIcon} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z\" />\n </svg>\n )\n ) : isImage && item.hasThumbnail ? (\n <img\n css={styles.image}\n src={item.thumbnail}\n alt={item.name}\n loading=\"lazy\"\n />\n ) : isImage && !item.hasThumbnail ? (\n <button \n css={styles.noThumbnail}\n onClick={(e) => { e.stopPropagation(); onGenerateThumbnail(); }}\n title=\"Generate thumbnail\"\n >\n <svg css={styles.noThumbnailIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n <span css={styles.noThumbnailText}>Generate</span>\n </button>\n ) : (\n <svg css={styles.fileIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z\" />\n </svg>\n )}\n </div>\n\n <div css={styles.label}>\n <div css={styles.labelRow}>\n <div css={styles.labelText}>\n <p css={styles.name} title={item.name}>{truncateMiddle(item.name)}</p>\n {isFolder ? (\n <p css={styles.size}>\n {item.fileCount !== undefined ? `${item.fileCount} files` : ''}\n {item.fileCount !== undefined && item.totalSize !== undefined ? ' · ' : ''}\n {item.totalSize !== undefined ? formatFileSize(item.totalSize) : ''}\n </p>\n ) : (\n item.size !== undefined && <p css={styles.size}>{formatFileSize(item.size)}</p>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nfunction formatFileSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`\n if (bytes < 1024 1024) return `${(bytes / 1024).toFixed(1)} KB`\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nfunction getParentPath(path: string): string {\n const parts = path.split('/')\n parts.pop() // Remove current folder\n return parts.join('/') + '/'\n}\n\nfunction truncateMiddle(str: string, maxLength: number = 24): string {\n if (str.length <= maxLength) return str\n \n // Find the extension\n const lastDot = str.lastIndexOf('.')\n const ext = lastDot > 0 ? str.substring(lastDot) : ''\n const name = lastDot > 0 ? str.substring(0, lastDot) : str\n \n // Calculate how much we can show of the name\n const availableLength = maxLength - ext.length - 3 // 3 for \"...\"\n if (availableLength < 6) {\n // Too short, just truncate from end\n return str.substring(0, maxLength - 3) + '...'\n }\n \n const startLength = Math.ceil(availableLength / 2)\n const endLength = Math.floor(availableLength / 2)\n \n return name.substring(0, startLength) + '...' + name.substring(name.length - endLength) + ext\n}\n","/** @jsxImportSource @emotion/react /\n'use client'\n\nimport { useEffect, useState, useRef } from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { useStudio } from './StudioContext'\nimport { colors, fontSize } from './tokens'\nimport type { FileItem } from '../types'\n\nconst spin = keyframes`\n to { transform: rotate(360deg); }\n`\n\nconst styles = {\n loading: css`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 256px;\n `,\n spinner: css`\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: 3px solid ${colors.border};\n border-top-color: ${colors.primary};\n animation: ${spin} 0.8s linear infinite;\n `,\n empty: css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 256px;\n color: ${colors.textSecondary};\n `,\n tableWrapper: css`\n background: ${colors.surface};\n border-radius: 8px;\n border: 1px solid ${colors.border};\n overflow-x: auto;\n `,\n table: css`\n width: 100%;\n min-width: 600px;\n border-collapse: collapse;\n white-space: nowrap;\n `,\n th: css`\n text-align: left;\n font-size: 11px;\n color: ${colors.textMuted};\n text-transform: uppercase;\n letter-spacing: 0.05em;\n padding: 12px 16px;\n font-weight: 600;\n background: ${colors.background};\n border-bottom: 1px solid ${colors.border};\n `,\n thCheckbox: css`\n width: 48px;\n `,\n thSize: css`\n width: 96px;\n `,\n thDimensions: css`\n width: 128px;\n `,\n thCdn: css`\n width: 96px;\n `,\n tbody: css``,\n row: css`\n cursor: pointer;\n transition: background-color 0.15s ease;\n user-select: none;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n }\n \n &:not(:last-child) td {\n border-bottom: 1px solid ${colors.borderLight};\n }\n `,\n rowSelected: css`\n background-color: ${colors.primaryLight};\n \n &:hover {\n background-color: ${colors.primaryLight};\n }\n `,\n parentRow: css`\n cursor: pointer;\n border-bottom: 1px solid ${colors.border};\n \n &:hover {\n background-color: ${colors.surfaceHover};\n }\n `,\n td: css`\n padding: 12px 16px;\n `,\n checkboxCell: css`\n padding: 12px 16px;\n cursor: pointer;\n vertical-align: middle;\n `,\n checkbox: css`\n width: 18px;\n height: 18px;\n accent-color: ${colors.primary};\n cursor: pointer;\n display: block;\n `,\n actionsCell: css`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n margin-left: auto;\n flex-shrink: 0;\n `,\n copyBtn: css`\n position: relative;\n flex-shrink: 0;\n height: 32px;\n width: 32px;\n font-size: ${fontSize.xs};\n color: ${colors.textSecondary};\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n padding: 0;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n background: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n color: ${colors.text};\n }\n `,\n copyIcon: css`\n width: 16px;\n height: 16px;\n `,\n tooltip: css`\n position: absolute;\n top: 50%;\n right: 100%;\n transform: translateY(-50%);\n background: #1a1f36;\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n margin-right: 6px;\n pointer-events: none;\n z-index: 100;\n \n &::after {\n content: '';\n position: absolute;\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border: 4px solid transparent;\n border-left-color: #1a1f36;\n }\n `,\n nameCell: css`\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n `,\n thumbnailWrapper: css`\n width: 48px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n `,\n folderIconWrapper: css`\n width: 48px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n `,\n folderIcon: css`\n width: 24px;\n height: 24px;\n color: #f9935e;\n `,\n imagesFolderWrapper: css`\n width: 48px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n position: relative;\n align-items: center;\n `,\n imagesFolderIcon: css`\n width: 24px;\n height: 24px;\n color: ${colors.imagesFolder};\n `,\n lockIcon: css`\n width: 10px;\n height: 10px;\n color: ${colors.imagesFolder};\n margin-left: -6px;\n margin-top: 8px;\n `,\n parentIcon: css`\n width: 20px;\n height: 20px;\n color: ${colors.textMuted};\n flex-shrink: 0;\n `,\n fileIcon: css`\n width: 20px;\n height: 20px;\n color: ${colors.textMuted};\n flex-shrink: 0;\n `,\n thumbnail: css`\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 4px;\n border: 1px solid ${colors.borderLight};\n `,\n noThumbnail: css`\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: ${colors.background};\n border: 1px dashed ${colors.border};\n border-radius: 4px;\n flex-shrink: 0;\n cursor: pointer;\n transition: all 0.15s ease;\n \n &:hover {\n border-color: ${colors.primary};\n background: ${colors.surfaceHover};\n }\n `,\n noThumbnailIcon: css`\n width: 16px;\n height: 16px;\n color: ${colors.textMuted};\n `,\n name: css`\n font-size: ${fontSize.base};\n font-weight: 500;\n color: ${colors.text};\n letter-spacing: -0.01em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 300px;\n `,\n meta: css`\n font-size: ${fontSize.sm};\n color: ${colors.textSecondary};\n `,\n cdnBadge: css`\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: ${fontSize.xs};\n font-weight: 500;\n color: ${colors.success};\n `,\n cdnIcon: css`\n width: 12px;\n height: 12px;\n `,\n cdnEmpty: css`\n font-size: ${fontSize.sm};\n color: ${colors.textMuted};\n `,\n openBtn: css`\n height: 32px;\n font-size: ${fontSize.sm};\n font-weight: 500;\n color: ${colors.primary};\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n padding: 0 14px;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s ease;\n display: inline-flex;\n align-items: center;\n \n &:hover {\n background-color: ${colors.primaryLight};\n border-color: ${colors.primary};\n }\n `,\n}\n\nexport function StudioFileList() {\n const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio()\n const [items, setItems] = useState<FileItem[]>([])\n const [loading, setLoading] = useState(true)\n const isInitialLoad = useRef(true)\n const lastPath = useRef(currentPath)\n\n useEffect(() => {\n async function loadItems() {\n // Only show loading spinner on initial load or path change, not on refresh\n const isPathChange = lastPath.current !== currentPath\n if (isInitialLoad.current \|\| isPathChange) {\n setLoading(true)\n }\n lastPath.current = currentPath\n \n try {\n // Use search API when query has 2+ characters\n const url = searchQuery && searchQuery.length >= 2\n ? `/api/studio/search?q=${encodeURIComponent(searchQuery)}`\n : `/api/studio/list?path=${encodeURIComponent(currentPath)}`\n const response = await fetch(url)\n if (response.ok) {\n const data = await response.json()\n setItems(data.items \|\| [])\n }\n } catch (error) {\n console.error('Failed to load items:', error)\n }\n setLoading(false)\n isInitialLoad.current = false\n }\n loadItems()\n }, [currentPath, refreshKey, searchQuery])\n\n if (loading) {\n return (\n <div css={styles.loading}>\n <div css={styles.spinner} />\n </div>\n )\n }\n\n const isAtRoot = currentPath === 'public'\n\n if (items.length === 0 && isAtRoot) {\n return (\n <div css={styles.empty}>\n <p>No files in this folder</p>\n </div>\n )\n }\n\n // When searching, items already come filtered from the API\n const isSearching = searchQuery && searchQuery.length >= 2\n\n const sortedItems = [...items].sort((a, b) => {\n if (a.type === 'folder' && b.type !== 'folder') return -1\n if (a.type !== 'folder' && b.type === 'folder') return 1\n return a.name.localeCompare(b.name)\n })\n\n const handleItemClick = (item: FileItem, e: React.MouseEvent) => {\n if (e.shiftKey && lastSelectedPath) {\n selectRange(lastSelectedPath, item.path, sortedItems)\n } else {\n toggleSelection(item.path)\n }\n }\n\n const handleOpen = (item: FileItem) => {\n if (item.type === 'folder') {\n setCurrentPath(item.path)\n } else {\n setFocusedItem(item)\n }\n }\n\n const handleGenerateThumbnail = async (item: FileItem) => {\n try {\n const imageKey = item.path.replace(/^public\\//, '')\n await fetch('/api/studio/reprocess', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ imageKeys: [imageKey] }),\n })\n triggerRefresh()\n } catch (error) {\n console.error('Failed to generate thumbnail:', error)\n }\n }\n\n const allItemsSelected = sortedItems.length > 0 && sortedItems.every(item => selectedItems.has(item.path))\n const someItemsSelected = sortedItems.some(item => selectedItems.has(item.path))\n\n const handleSelectAll = () => {\n if (allItemsSelected) {\n clearSelection()\n } else {\n selectAll(sortedItems)\n }\n }\n\n return (\n <div css={styles.tableWrapper}>\n <table css={styles.table}>\n <thead>\n <tr>\n <th css={[styles.th, styles.thCheckbox]}>\n {sortedItems.length > 0 && (\n <input\n type=\"checkbox\"\n css={styles.checkbox}\n checked={allItemsSelected}\n ref={(el) => {\n if (el) el.indeterminate = someItemsSelected && !allItemsSelected\n }}\n onChange={handleSelectAll}\n />\n )}\n </th>\n <th css={styles.th}>Name</th>\n <th css={[styles.th, styles.thSize]}>Size</th>\n <th css={[styles.th, styles.thDimensions]}>Dimensions</th>\n <th css={[styles.th, styles.thCdn]}>CDN</th>\n </tr>\n </thead>\n <tbody css={styles.tbody}>\n {/ Parent folder navigation - hide when searching /}\n {!isAtRoot && !isSearching && (\n <tr css={styles.parentRow} onClick={navigateUp}>\n <td css={styles.td}></td>\n <td css={styles.td}>\n <div css={styles.nameCell}>\n <svg css={styles.parentIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6\" />\n </svg>\n <span css={styles.name}>..</span>\n </div>\n </td>\n <td css={[styles.td, styles.meta]}>--</td>\n <td css={[styles.td, styles.meta]}>Parent folder</td>\n <td css={styles.td}>--</td>\n </tr>\n )}\n \n {sortedItems.map((item) => (\n <ListRow\n key={item.path}\n item={item}\n isSelected={selectedItems.has(item.path)}\n onClick={(e) => handleItemClick(item, e)}\n onOpen={() => handleOpen(item)}\n onGenerateThumbnail={() => handleGenerateThumbnail(item)}\n />\n ))}\n </tbody>\n </table>\n </div>\n )\n}\n\ninterface ListRowProps {\n item: FileItem\n isSelected: boolean\n onClick: (e: React.MouseEvent) => void\n onOpen: () => void\n onGenerateThumbnail: () => void\n}\n\nfunction ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }: ListRowProps) {\n const [showCopied, setShowCopied] = useState(false)\n const isFolder = item.type === 'folder'\n const isImage = !isFolder && item.thumbnail !== undefined\n const isImagesFolder = isFolder && (item.name === 'images' \|\| item.path.includes('/images/'))\n\n const handleCopyPath = (e: React.MouseEvent) => {\n e.stopPropagation()\n const pathToCopy = '/' + item.path.replace(/^public\\//, '')\n navigator.clipboard.writeText(pathToCopy)\n setShowCopied(true)\n setTimeout(() => setShowCopied(false), 1500)\n }\n\n return (\n <tr \n css={[styles.row, isSelected && styles.rowSelected]} \n onClick={onClick}\n >\n <td\n css={[styles.td, styles.checkboxCell]}\n onClick={(e) => e.stopPropagation()}\n >\n <input\n type=\"checkbox\"\n css={styles.checkbox}\n checked={isSelected}\n onChange={() => onClick({} as React.MouseEvent)}\n />\n </td>\n <td css={styles.td}>\n <div css={styles.nameCell}>\n {isFolder ? (\n isImagesFolder ? (\n <div css={styles.imagesFolderWrapper}>\n <svg css={styles.imagesFolderIcon} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z\" />\n </svg>\n <svg css={styles.lockIcon} fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fillRule=\"evenodd\" d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\" clipRule=\"evenodd\" />\n </svg>\n </div>\n ) : (\n <div css={styles.folderIconWrapper}>\n <svg css={styles.folderIcon} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z\" />\n </svg>\n </div>\n )\n ) : isImage && item.hasThumbnail ? (\n <div css={styles.thumbnailWrapper}>\n <img css={styles.thumbnail} src={item.thumbnail} alt={item.name} loading=\"lazy\" />\n </div>\n ) : isImage && !item.hasThumbnail ? (\n <div css={styles.thumbnailWrapper}>\n <button \n css={styles.noThumbnail} \n onClick={(e) => { e.stopPropagation(); onGenerateThumbnail(); }}\n title=\"Generate thumbnail\"\n >\n <svg css={styles.noThumbnailIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n </button>\n </div>\n ) : (\n <div css={styles.thumbnailWrapper}>\n <svg css={styles.fileIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z\" />\n </svg>\n </div>\n )}\n <span css={styles.name} title={item.name}>{truncateMiddle(item.name)}</span>\n <div css={styles.actionsCell}>\n <button\n css={styles.copyBtn}\n onClick={handleCopyPath}\n title=\"Copy file path\"\n >\n {showCopied && <span css={styles.tooltip}>Copied!</span>}\n <svg css={styles.copyIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" />\n </svg>\n </button>\n <button\n css={styles.openBtn}\n onClick={(e) => {\n e.stopPropagation()\n onOpen()\n }}\n >\n Open\n </button>\n </div>\n </div>\n </td>\n <td css={[styles.td, styles.meta]}>\n {isFolder \n ? (item.fileCount !== undefined ? `${item.fileCount} files` : '--')\n : (item.size !== undefined ? formatFileSize(item.size) : '--')\n }\n </td>\n <td css={[styles.td, styles.meta]}>\n {isFolder \n ? (item.totalSize !== undefined ? formatFileSize(item.totalSize) : '--')\n : (item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : '--')\n }\n </td>\n <td css={styles.td}>\n {item.cdnSynced ? (\n <span css={styles.cdnBadge}>\n <svg css={styles.cdnIcon} fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <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\" />\n </svg>\n Synced\n </span>\n ) : (\n <span css={styles.cdnEmpty}>--</span>\n )}\n </td>\n </tr>\n )\n}\n\nfunction formatFileSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`\n if (bytes < 1024 1024) return `${(bytes / 1024).toFixed(1)} KB`\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nfunction getParentPath(path: string): string {\n const parts = path.split('/')\n parts.pop() // Remove current folder\n return parts.join('/') + '/'\n}\n\nfunction truncateMiddle(str: string, maxLength: number = 32): string {\n if (str.length <= maxLength) return str\n \n // Find the extension\n const lastDot = str.lastIndexOf('.')\n const ext = lastDot > 0 ? str.substring(lastDot) : ''\n const name = lastDot > 0 ? str.substring(0, lastDot) : str\n \n // Calculate how much we can show of the name\n const availableLength = maxLength - ext.length - 3 // 3 for \"...\"\n if (availableLength < 6) {\n // Too short, just truncate from end\n return str.substring(0, maxLength - 3) + '...'\n }\n \n const startLength = Math.ceil(availableLength / 2)\n const endLength = Math.floor(availableLength / 2)\n \n return name.substring(0, startLength) + '...' + name.substring(name.length - endLength) + ext\n}\n","/** @jsxImportSource @emotion/react /\n'use client'\n\nimport { useState } from 'react'\nimport { css } from '@emotion/react'\nimport { useStudio } from './StudioContext'\nimport { ConfirmModal, AlertModal, InputModal, ProgressModal, type ProgressState } from './StudioModal'\nimport { colors, fontSize } from './tokens'\n\nconst IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.ico', '.bmp', '.tiff', '.tif']\nconst VIDEO_EXTENSIONS = ['.mp4', '.webm', '.mov', '.avi', '.mkv', '.m4v']\n\nfunction isImageFile(filename: string): boolean {\n const ext = filename.toLowerCase().substring(filename.lastIndexOf('.'))\n return IMAGE_EXTENSIONS.includes(ext)\n}\n\nfunction isVideoFile(filename: string): boolean {\n const ext = filename.toLowerCase().substring(filename.lastIndexOf('.'))\n return VIDEO_EXTENSIONS.includes(ext)\n}\n\nconst styles = {\n overlay: css`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 100;\n display: flex;\n background: transparent;\n `,\n container: css`\n display: flex;\n flex: 1;\n margin: 24px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n `,\n main: css`\n position: relative;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 24px;\n background: ${colors.background};\n overflow: auto;\n `,\n headerButtons: css`\n position: absolute;\n top: 16px;\n right: 16px;\n display: flex;\n gap: 8px;\n z-index: 10;\n `,\n copyBtn: css`\n position: relative;\n padding: 8px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n copyIcon: css`\n width: 20px;\n height: 20px;\n color: ${colors.textSecondary};\n `,\n tooltip: css`\n position: absolute;\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n background: #1a1f36;\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n margin-right: 8px;\n pointer-events: none;\n z-index: 100;\n \n &::after {\n content: '';\n position: absolute;\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border: 4px solid transparent;\n border-left-color: #1a1f36;\n }\n `,\n mainCloseBtn: css`\n padding: 8px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n mainCloseIcon: css`\n width: 20px;\n height: 20px;\n color: ${colors.textSecondary};\n `,\n mediaWrapper: css`\n max-width: 100%;\n max-height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n image: css`\n max-width: 100%;\n max-height: calc(100vh - 200px);\n object-fit: contain;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n `,\n video: css`\n max-width: 100%;\n max-height: calc(100vh - 200px);\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n `,\n filePlaceholder: css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px;\n background: ${colors.surface};\n border-radius: 12px;\n border: 1px solid ${colors.border};\n `,\n fileIcon: css`\n width: 80px;\n height: 80px;\n color: ${colors.textMuted};\n margin-bottom: 16px;\n `,\n fileName: css`\n font-size: ${fontSize.lg};\n font-weight: 600;\n color: ${colors.text};\n margin: 0;\n `,\n sidebar: css`\n width: 280px;\n background: ${colors.surface};\n border-left: 1px solid ${colors.border};\n display: flex;\n flex-direction: column;\n overflow: hidden;\n `,\n sidebarHeader: css`\n padding: 16px 20px;\n border-bottom: 1px solid ${colors.border};\n `,\n sidebarTitle: css`\n font-size: ${fontSize.base};\n font-weight: 600;\n color: ${colors.text};\n margin: 0;\n `,\n sidebarContent: css`\n flex: 1;\n padding: 20px;\n overflow: auto;\n `,\n info: css`\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 24px;\n `,\n infoRow: css`\n display: flex;\n justify-content: space-between;\n font-size: ${fontSize.sm};\n `,\n infoLabel: css`\n color: ${colors.textSecondary};\n `,\n infoValue: css`\n color: ${colors.text};\n font-weight: 500;\n text-align: right;\n max-width: 160px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n infoValueWrap: css`\n color: ${colors.text};\n font-weight: 500;\n text-align: right;\n max-width: 160px;\n word-break: break-all;\n white-space: normal;\n `,\n actions: css`\n display: flex;\n flex-direction: column;\n gap: 8px;\n `,\n actionBtn: css`\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 14px;\n font-size: ${fontSize.base};\n font-weight: 500;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n color: ${colors.text};\n text-align: left;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n actionBtnDanger: css`\n color: ${colors.danger};\n \n &:hover {\n background-color: ${colors.dangerLight};\n border-color: ${colors.danger};\n }\n `,\n actionIcon: css`\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n `,\n}\n\nexport function StudioDetailView() {\n const { focusedItem, setFocusedItem, triggerRefresh, clearSelection } = useStudio()\n const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)\n const [showRenameModal, setShowRenameModal] = useState(false)\n const [showProcessConfirm, setShowProcessConfirm] = useState(false)\n const [processProgress, setProcessProgress] = useState<ProgressState \| null>(null)\n const [alertMessage, setAlertMessage] = useState<{ title: string; message: string } \| null>(null)\n const [showCopied, setShowCopied] = useState(false)\n\n if (!focusedItem) return null\n\n const isImage = isImageFile(focusedItem.name)\n const isVideo = isVideoFile(focusedItem.name)\n const imageSrc = focusedItem.path.replace('public', '')\n\n const handleClose = () => {\n setFocusedItem(null)\n }\n\n const handleCopyPath = () => {\n const pathToCopy = '/' + focusedItem.path.replace(/^public\\//, '')\n navigator.clipboard.writeText(pathToCopy)\n setShowCopied(true)\n setTimeout(() => setShowCopied(false), 1500)\n }\n\n const handleRename = async (newName: string) => {\n setShowRenameModal(false)\n if (newName && newName !== focusedItem.name) {\n try {\n const response = await fetch('/api/studio/rename', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n oldPath: focusedItem.path,\n newName: newName,\n }),\n })\n \n if (response.ok) {\n triggerRefresh()\n setFocusedItem(null)\n } else {\n const data = await response.json()\n setAlertMessage({\n title: 'Rename Failed',\n message: data.error \|\| 'Failed to rename file',\n })\n }\n } catch (error) {\n console.error('Rename error:', error)\n setAlertMessage({\n title: 'Rename Failed',\n message: 'An error occurred while renaming the file',\n })\n }\n }\n }\n\n const handleDelete = async () => {\n setShowDeleteConfirm(false)\n try {\n const response = await fetch('/api/studio/delete', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ paths: [focusedItem.path] }),\n })\n\n if (response.ok) {\n clearSelection()\n triggerRefresh()\n setFocusedItem(null)\n } else {\n const error = await response.json()\n setAlertMessage({\n title: 'Delete Failed',\n message: error.error \|\| 'Unknown error',\n })\n }\n } catch (error) {\n console.error('Delete error:', error)\n setAlertMessage({\n title: 'Delete Failed',\n message: 'Delete failed. Check console for details.',\n })\n }\n }\n\n const handleSync = () => {\n console.log('Sync to CDN:', focusedItem.path)\n // TODO: Implement sync API\n }\n\n const handleProcessImage = async () => {\n setShowProcessConfirm(false)\n \n setProcessProgress({\n current: 0,\n total: 1,\n percent: 0,\n status: 'processing',\n currentFile: focusedItem.name,\n })\n\n try {\n const response = await fetch('/api/studio/reprocess', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n paths: [focusedItem.path],\n }),\n })\n\n if (!response.ok) {\n throw new Error('Processing failed')\n }\n\n const reader = response.body?.getReader()\n if (!reader) {\n throw new Error('No response body')\n }\n\n const decoder = new TextDecoder()\n let buffer = ''\n\n while (true) {\n const { done, value } = await reader.read()\n if (done) break\n\n buffer += decoder.decode(value, { stream: true })\n const lines = buffer.split('\\n')\n buffer = lines.pop() \|\| ''\n\n for (const line of lines) {\n if (line.startsWith('data: ')) {\n try {\n const data = JSON.parse(line.slice(6))\n setProcessProgress(data)\n } catch {\n // Ignore parse errors\n }\n }\n }\n }\n\n triggerRefresh()\n } catch (error) {\n console.error('Process error:', error)\n setProcessProgress({\n current: 0,\n total: 1,\n percent: 0,\n status: 'error',\n message: 'Failed to process image',\n })\n }\n }\n\n const renderMedia = () => {\n if (isImage) {\n return <img css={styles.image} src={imageSrc} alt={focusedItem.name} />\n }\n if (isVideo) {\n return <video css={styles.video} src={imageSrc} controls />\n }\n return (\n <div css={styles.filePlaceholder}>\n <svg css={styles.fileIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z\" />\n </svg>\n <p css={styles.fileName}>{focusedItem.name}</p>\n </div>\n )\n }\n\n return (\n <>\n {showDeleteConfirm && (\n <ConfirmModal\n title=\"Delete File\"\n message={`Are you sure you want to delete \"${focusedItem.name}\"? This action cannot be undone.`}\n confirmLabel=\"Delete\"\n variant=\"danger\"\n onConfirm={handleDelete}\n onCancel={() => setShowDeleteConfirm(false)}\n />\n )}\n\n {alertMessage && (\n <AlertModal\n title={alertMessage.title}\n message={alertMessage.message}\n onClose={() => setAlertMessage(null)}\n />\n )}\n\n {showRenameModal && (\n <InputModal\n title=\"Rename File\"\n message=\"Enter a new name for the file:\"\n defaultValue={focusedItem.name}\n placeholder=\"Enter new filename\"\n confirmLabel=\"Rename\"\n onConfirm={handleRename}\n onCancel={() => setShowRenameModal(false)}\n />\n )}\n\n {showProcessConfirm && (\n <ConfirmModal\n title=\"Process Image\"\n message={`Generate thumbnails for \"${focusedItem.name}\"?`}\n confirmLabel=\"Process\"\n onConfirm={handleProcessImage}\n onCancel={() => setShowProcessConfirm(false)}\n />\n )}\n\n {processProgress && (\n <ProgressModal\n title=\"Processing Image\"\n progress={processProgress}\n onClose={() => setProcessProgress(null)}\n />\n )}\n\n <div css={styles.overlay} onClick={handleClose}>\n <div css={styles.container} onClick={(e) => e.stopPropagation()}>\n <div css={styles.main}>\n <div css={styles.headerButtons}>\n <button css={styles.copyBtn} onClick={handleCopyPath} title=\"Copy file path\">\n {showCopied && <span css={styles.tooltip}>Copied!</span>}\n <svg css={styles.copyIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" />\n </svg>\n </button>\n <button css={styles.mainCloseBtn} onClick={handleClose} aria-label=\"Close\">\n <svg css={styles.mainCloseIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n <div css={styles.mediaWrapper}>\n {renderMedia()}\n </div>\n </div>\n\n <div css={styles.sidebar}>\n <div css={styles.sidebarHeader}>\n <h3 css={styles.sidebarTitle}>Details</h3>\n </div>\n\n <div css={styles.sidebarContent}>\n <div css={styles.info}>\n <div css={styles.infoRow}>\n <span css={styles.infoLabel}>Name</span>\n <span css={styles.infoValueWrap}>{focusedItem.name}</span>\n </div>\n <div css={styles.infoRow}>\n <span css={styles.infoLabel}>Path</span>\n <span css={styles.infoValueWrap}>{focusedItem.path.replace(/^public\\//, '')}</span>\n </div>\n {focusedItem.size !== undefined && (\n <div css={styles.infoRow}>\n <span css={styles.infoLabel}>Size</span>\n <span css={styles.infoValue}>{formatFileSize(focusedItem.size)}</span>\n </div>\n )}\n {focusedItem.dimensions && (\n <div css={styles.infoRow}>\n <span css={styles.infoLabel}>Dimensions</span>\n <span css={styles.infoValue}>{focusedItem.dimensions.width} × {focusedItem.dimensions.height}</span>\n </div>\n )}\n <div css={styles.infoRow}>\n <span css={styles.infoLabel}>CDN Status</span>\n <span css={styles.infoValue}>{focusedItem.cdnSynced ? 'Synced' : 'Not synced'}</span>\n </div>\n </div>\n\n <div css={styles.actions}>\n <button css={styles.actionBtn} onClick={() => setShowRenameModal(true)}>\n <svg css={styles.actionIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\" />\n </svg>\n Rename\n </button>\n <button css={styles.actionBtn} onClick={handleSync}>\n <svg css={styles.actionIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" />\n </svg>\n Sync to CDN\n </button>\n <button css={styles.actionBtn} onClick={() => setShowProcessConfirm(true)}>\n <svg css={styles.actionIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n Process Image\n </button>\n <button css={[styles.actionBtn, styles.actionBtnDanger]} onClick={() => setShowDeleteConfirm(true)}>\n <svg css={styles.actionIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" />\n </svg>\n Delete\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </>\n )\n}\n\nfunction formatFileSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`\n if (bytes < 1024 1024) return `${(bytes / 1024).toFixed(1)} KB`\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n","/** @jsxImportSource @emotion/react */\n'use client'\n\nimport { useState } from 'react'\nimport { css } from '@emotion/react'\nimport { colors, fontSize, baseReset } from './tokens'\n\n// Standard button height for consistency\nconst btnHeight = '36px'\n\nconst styles = {\n btn: css`\n height: ${btnHeight};\n padding: 0 12px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n icon: css`\n width: 16px;\n height: 16px;\n color: ${colors.textSecondary};\n `,\n overlay: css`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10000;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(26, 31, 54, 0.4);\n backdrop-filter: blur(4px);\n `,\n panel: css`\n ${baseReset}\n position: relative;\n background-color: ${colors.surface};\n border-radius: 12px;\n box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);\n width: 100%;\n max-width: 512px;\n padding: 24px;\n `,\n header: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 24px;\n `,\n title: css`\n font-size: ${fontSize.xl};\n font-weight: 600;\n color: ${colors.text};\n margin: 0;\n letter-spacing: -0.02em;\n `,\n closeBtn: css`\n padding: 6px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n sections: css`\n display: flex;\n flex-direction: column;\n gap: 24px;\n `,\n sectionTitle: css`\n font-size: ${fontSize.base};\n font-weight: 600;\n color: ${colors.text};\n margin: 0 0 12px 0;\n `,\n description: css`\n font-size: ${fontSize.sm};\n color: ${colors.textSecondary};\n margin: 0 0 12px 0;\n `,\n codeWrapper: css`\n position: relative;\n `,\n code: css`\n background-color: ${colors.background};\n border-radius: 8px;\n padding: 12px;\n padding-right: 40px;\n font-family: 'SF Mono', Monaco, Consolas, monospace;\n font-size: ${fontSize.xs};\n color: ${colors.textSecondary};\n border: 1px solid ${colors.border};\n overflow-x: auto;\n white-space: nowrap;\n `,\n copyBtn: css`\n position: absolute;\n top: 8px;\n right: 8px;\n padding: 4px;\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n tooltip: css`\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background: #1a1f36;\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n margin-bottom: 6px;\n pointer-events: none;\n z-index: 100;\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border: 4px solid transparent;\n border-top-color: #1a1f36;\n }\n `,\n copyIcon: css`\n width: 14px;\n height: 14px;\n color: ${colors.textSecondary};\n `,\n codeLine: css`\n margin: 0 0 4px 0;\n \n &:last-child {\n margin: 0;\n }\n `,\n input: css`\n width: 100%;\n padding: 10px 14px;\n border: 1px solid ${colors.border};\n border-radius: 6px;\n font-size: ${fontSize.base};\n color: ${colors.text};\n background: ${colors.surface};\n transition: all 0.15s ease;\n \n &:focus {\n outline: none;\n border-color: ${colors.primary};\n box-shadow: 0 0 0 3px ${colors.primaryLight};\n }\n \n &::placeholder {\n color: ${colors.textMuted};\n }\n `,\n grid: css`\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n `,\n label: css`\n font-size: ${fontSize.xs};\n font-weight: 500;\n color: ${colors.textSecondary};\n display: block;\n margin-bottom: 6px;\n `,\n footer: css`\n margin-top: 24px;\n padding-top: 20px;\n border-top: 1px solid ${colors.border};\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n `,\n cancelBtn: css`\n padding: 10px 18px;\n font-size: ${fontSize.base};\n font-weight: 500;\n color: ${colors.text};\n background: ${colors.surface};\n border: 1px solid ${colors.border};\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: ${colors.surfaceHover};\n border-color: ${colors.borderHover};\n }\n `,\n saveBtn: css`\n padding: 10px 18px;\n font-size: ${fontSize.base};\n font-weight: 500;\n color: white;\n background-color: ${colors.primary};\n border: 1px solid ${colors.primary};\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: ${colors.primaryHover};\n border-color: ${colors.primaryHover};\n }\n `,\n}\n\nexport function StudioSettings() {\n const [isOpen, setIsOpen] = useState(false)\n\n return (\n <>\n <button css={styles.btn} onClick={() => setIsOpen(true)} aria-label=\"Settings\">\n <svg\n css={styles.icon}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={2}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n <path d=\"M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z\" />\n </svg>\n </button>\n\n {isOpen && <SettingsPanel onClose={() => setIsOpen(false)} />}\n </>\n )\n}\n\nconst envTemplate = `CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789\nCLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key_id_here\nCLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here\nCLOUDFLARE_R2_BUCKET_NAME=my-images-bucket\nCLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com`\n\nfunction SettingsPanel({ onClose }: { onClose: () => void }) {\n const [copied, setCopied] = useState(false)\n\n const handleCopy = () => {\n navigator.clipboard.writeText(envTemplate)\n setCopied(true)\n setTimeout(() => setCopied(false), 2000)\n }\n\n return (\n <div css={styles.overlay} onClick={onClose}>\n <div css={styles.panel} onClick={(e) => e.stopPropagation()}>\n <div css={styles.header}>\n <h2 css={styles.title}>Settings</h2>\n <button css={styles.closeBtn} onClick={onClose}>\n <svg css={styles.icon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n <div css={styles.sections}>\n <section>\n <h3 css={styles.sectionTitle}>Cloudflare R2</h3>\n <p css={styles.description}>Configure in .env.local file:</p>\n <div css={styles.codeWrapper}>\n <button css={styles.copyBtn} onClick={handleCopy} title=\"Copy to clipboard\">\n {copied && <span css={styles.tooltip}>Copied!</span>}\n <svg css={styles.copyIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" />\n </svg>\n </button>\n <div css={styles.code}>\n <p css={styles.codeLine}>CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789</p>\n <p css={styles.codeLine}>CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key_id_here</p>\n <p css={styles.codeLine}>CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here</p>\n <p css={styles.codeLine}>CLOUDFLARE_R2_BUCKET_NAME=my-images-bucket</p>\n <p css={styles.codeLine}>CLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com</p>\n </div>\n </div>\n </section>\n\n <section>\n <h3 css={styles.sectionTitle}>Thumbnail Sizes</h3>\n <div css={styles.grid}>\n <div>\n <label css={styles.label}>Small</label>\n <input css={styles.input} type=\"number\" defaultValue={300} />\n </div>\n <div>\n <label css={styles.label}>Medium</label>\n <input css={styles.input} type=\"number\" defaultValue={700} />\n </div>\n <div>\n <label css={styles.label}>Large</label>\n <input css={styles.input} type=\"number\" defaultValue={1400} />\n </div>\n </div>\n </section>\n </div>\n\n <div css={styles.footer}>\n <button css={styles.cancelBtn} onClick={onClose}>Cancel</button>\n <button css={styles.saveBtn}>Save Changes</button>\n </div>\n </div>\n </div>\n )\n}\n"]}