@gallop.software/studio 0.1.0 → 0.1.2

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 (15) hide show
  1. package/dist/StudioUI-5I3O5VF7.js +1382 -0
  2. package/dist/StudioUI-5I3O5VF7.js.map +1 -0
  3. package/dist/StudioUI-BBXJCQ3O.mjs +1382 -0
  4. package/dist/StudioUI-BBXJCQ3O.mjs.map +1 -0
  5. package/dist/index.d.mts +2 -10
  6. package/dist/index.d.ts +2 -10
  7. package/dist/index.js +102 -21
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +102 -21
  10. package/dist/index.mjs.map +1 -1
  11. package/package.json +2 -1
  12. package/dist/StudioUI-4ST2P6R7.mjs +0 -991
  13. package/dist/StudioUI-4ST2P6R7.mjs.map +0 -1
  14. package/dist/StudioUI-BH7PWCKH.js +0 -991
  15. package/dist/StudioUI-BH7PWCKH.js.map +0 -1
package/dist/StudioUI-5I3O5VF7.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["/Users/chrisb/Sites/studio/dist/StudioUI-5I3O5VF7.js","../src/components/StudioUI.tsx","../src/components/StudioContext.tsx","../src/components/StudioToolbar.tsx","../src/components/StudioBreadcrumb.tsx","../src/components/StudioFileGrid.tsx","../src/components/StudioFileList.tsx","../src/components/StudioPreview.tsx","../src/components/StudioSettings.tsx"],"names":["styles","css","jsxs","jsx","keyframes","formatFileSize","useCallback"],"mappings":"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","file":"/Users/chrisb/Sites/studio/dist/StudioUI-5I3O5VF7.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 { StudioBreadcrumb } from './StudioBreadcrumb'\nimport { StudioFileGrid } from './StudioFileGrid'\nimport { StudioFileList } from './StudioFileList'\nimport { StudioPreview } from './StudioPreview'\nimport { StudioSettings } from './StudioSettings'\nimport type { FileItem, StudioMeta } from '../types'\n\ninterface StudioUIProps {\n onClose: () => void\n}\n\nconst styles = {\n container: css`\n display: flex;\n flex-direction: column;\n height: 100%;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n `,\n header: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n border-bottom: 1px solid #e5e7eb;\n `,\n title: css`\n font-size: 20px;\n font-weight: 600;\n color: #111827;\n margin: 0;\n `,\n headerActions: css`\n display: flex;\n align-items: center;\n gap: 8px;\n `,\n closeBtn: css`\n padding: 8px;\n background: none;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.15s;\n \n &:hover {\n background-color: #f3f4f6;\n }\n `,\n closeIcon: css`\n width: 20px;\n height: 20px;\n color: #6b7280;\n `,\n content: css`\n flex: 1;\n display: flex;\n overflow: hidden;\n `,\n fileBrowser: css`\n flex: 1;\n overflow: auto;\n padding: 16px;\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 }: StudioUIProps) {\n const [currentPath, setCurrentPathInternal] = useState('public')\n const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set())\n const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')\n const [meta, setMeta] = useState<StudioMeta | null>(null)\n const [isLoading, setIsLoading] = useState(false)\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 }, [])\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 }, [])\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 onClose()\n }\n },\n [onClose]\n )\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyDown)\n document.body.style.overflow = 'hidden'\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.body.style.overflow = ''\n }\n }, [handleKeyDown])\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 selectAll,\n clearSelection,\n viewMode,\n setViewMode,\n meta,\n setMeta,\n isLoading,\n setIsLoading,\n }\n\n return (\n <StudioContext.Provider value={contextValue}>\n <div css={styles.container}>\n <div css={styles.header}>\n <h1 css={styles.title}>Studio</h1>\n <div css={styles.headerActions}>\n <StudioSettings />\n <button\n css={styles.closeBtn}\n onClick={onClose}\n aria-label=\"Close Studio\"\n >\n <CloseIcon />\n </button>\n </div>\n </div>\n\n <StudioToolbar />\n <StudioBreadcrumb />\n\n <div css={styles.content}>\n <div css={styles.fileBrowser}>\n {viewMode === 'grid' ? <StudioFileGrid /> : <StudioFileList />}\n </div>\n <StudioPreview />\n </div>\n </div>\n </StudioContext.Provider>\n )\n}\n\nfunction CloseIcon() {\n return (\n <svg\n css={styles.closeIcon}\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, StudioMeta } 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 selectAll: (items: FileItem[]) => void\n clearSelection: () => void\n\n // View\n viewMode: 'grid' | 'list'\n setViewMode: (mode: 'grid' | 'list') => void\n\n // Meta\n meta: StudioMeta | null\n setMeta: (meta: StudioMeta) => void\n\n // Loading\n isLoading: boolean\n setIsLoading: (loading: boolean) => 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 selectAll: () => {},\n clearSelection: () => {},\n viewMode: 'grid',\n setViewMode: () => {},\n meta: null,\n setMeta: () => {},\n isLoading: false,\n setIsLoading: () => {},\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 } from 'react'\nimport { css } from '@emotion/react'\nimport { useStudio } from './StudioContext'\n\nconst styles = {\n toolbar: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 24px;\n background-color: #f9fafb;\n border-bottom: 1px solid #e5e7eb;\n `,\n left: css`\n display: flex;\n align-items: center;\n gap: 8px;\n `,\n right: css`\n display: flex;\n align-items: center;\n gap: 16px;\n `,\n btn: css`\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n background: none;\n border: none;\n cursor: pointer;\n transition: background-color 0.15s;\n \n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n `,\n btnDefault: css`\n color: #374151;\n \n &:hover:not(:disabled) {\n background-color: white;\n }\n `,\n btnDanger: css`\n color: #dc2626;\n \n &:hover:not(:disabled) {\n background-color: #fef2f2;\n }\n `,\n icon: css`\n width: 16px;\n height: 16px;\n `,\n selectionCount: css`\n font-size: 14px;\n color: #4b5563;\n `,\n clearBtn: css`\n margin-left: 8px;\n color: #9333ea;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 14px;\n \n &:hover {\n text-decoration: underline;\n }\n `,\n viewToggle: css`\n display: flex;\n align-items: center;\n background-color: white;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n overflow: hidden;\n `,\n viewBtn: css`\n padding: 8px;\n background: none;\n border: none;\n cursor: pointer;\n color: #6b7280;\n transition: all 0.15s;\n \n &:hover {\n background-color: #f9fafb;\n }\n `,\n viewBtnActive: css`\n background-color: #f3e8ff;\n color: #7c3aed;\n `,\n}\n\nexport function StudioToolbar() {\n const { selectedItems, viewMode, setViewMode, clearSelection } = useStudio()\n\n const handleUpload = useCallback(() => {\n console.log('Upload clicked')\n }, [])\n\n const handleReprocess = useCallback(() => {\n console.log('Reprocess clicked', selectedItems)\n }, [selectedItems])\n\n const handleDelete = useCallback(() => {\n console.log('Delete clicked', selectedItems)\n }, [selectedItems])\n\n const handleSyncCdn = useCallback(() => {\n console.log('Sync CDN clicked', selectedItems)\n }, [selectedItems])\n\n const handleScan = useCallback(() => {\n console.log('Scan clicked')\n }, [])\n\n const hasSelection = selectedItems.size > 0\n\n return (\n <div css={styles.toolbar}>\n <div css={styles.left}>\n <ToolbarButton onClick={handleUpload} icon=\"upload\" label=\"Upload\" />\n <ToolbarButton\n onClick={handleReprocess}\n icon=\"refresh\"\n label=\"Reprocess\"\n disabled={!hasSelection}\n />\n <ToolbarButton\n onClick={handleDelete}\n icon=\"trash\"\n label=\"Delete\"\n disabled={!hasSelection}\n variant=\"danger\"\n />\n <ToolbarButton\n onClick={handleSyncCdn}\n icon=\"cloud\"\n label=\"Sync CDN\"\n disabled={!hasSelection}\n />\n <ToolbarButton onClick={handleScan} icon=\"scan\" label=\"Scan\" />\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 <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\ninterface ToolbarButtonProps {\n onClick: () => void\n icon: 'upload' | 'refresh' | 'trash' | 'cloud' | 'scan'\n label: string\n disabled?: boolean\n variant?: 'default' | 'danger'\n}\n\nfunction ToolbarButton({\n onClick,\n icon,\n label,\n disabled,\n variant = 'default',\n}: ToolbarButtonProps) {\n return (\n <button\n css={[styles.btn, variant === 'danger' ? styles.btnDanger : styles.btnDefault]}\n onClick={onClick}\n disabled={disabled}\n >\n <IconComponent icon={icon} />\n {label}\n </button>\n )\n}\n\nfunction IconComponent({ icon }: { icon: string }) {\n switch (icon) {\n case 'upload':\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 case 'refresh':\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 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 case 'trash':\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 case 'cloud':\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 case 'scan':\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 default:\n return null\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","/** @jsxImportSource @emotion/react */\n'use client'\n\nimport { css } from '@emotion/react'\nimport { useStudio } from './StudioContext'\n\nconst styles = {\n container: css`\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 24px;\n background-color: white;\n border-bottom: 1px solid #f3f4f6;\n `,\n backBtn: css`\n padding: 4px;\n background: none;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.15s;\n \n &:hover {\n background-color: #f3f4f6;\n }\n `,\n backIcon: css`\n width: 16px;\n height: 16px;\n color: #6b7280;\n `,\n nav: css`\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 14px;\n `,\n item: css`\n display: flex;\n align-items: center;\n gap: 4px;\n `,\n separator: css`\n color: #d1d5db;\n `,\n btn: css`\n padding: 2px 4px;\n background: none;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s;\n \n &:hover {\n background-color: #f3f4f6;\n }\n `,\n btnActive: css`\n color: #111827;\n font-weight: 500;\n `,\n btnInactive: css`\n color: #6b7280;\n \n &:hover {\n color: #374151;\n }\n `,\n}\n\nexport function StudioBreadcrumb() {\n const { currentPath, setCurrentPath, navigateUp } = useStudio()\n\n const parts = currentPath.split('/').filter(Boolean)\n\n const handleClick = (index: number) => {\n const newPath = parts.slice(0, index + 1).join('/')\n setCurrentPath(newPath)\n }\n\n return (\n <div css={styles.container}>\n {currentPath !== 'public' && (\n <button css={styles.backBtn} onClick={navigateUp} aria-label=\"Go back\">\n <svg css={styles.backIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n )}\n\n <nav css={styles.nav}>\n {parts.map((part, index) => (\n <span key={index} css={styles.item}>\n {index > 0 && <span css={styles.separator}>/</span>}\n <button\n css={[styles.btn, index === parts.length - 1 ? styles.btnActive : styles.btnInactive]}\n onClick={() => handleClick(index)}\n >\n {part}\n </button>\n </span>\n ))}\n </nav>\n </div>\n )\n}\n","/** @jsxImportSource @emotion/react */\n'use client'\n\nimport { useEffect, useState } from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { useStudio } from './StudioContext'\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: 2px solid transparent;\n border-bottom-color: #9333ea;\n animation: ${spin} 1s 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: #6b7280;\n `,\n emptyIcon: css`\n width: 48px;\n height: 48px;\n margin-bottom: 16px;\n `,\n emptyText: css`\n font-size: 14px;\n margin: 0;\n `,\n grid: css`\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n \n @media (min-width: 640px) { grid-template-columns: repeat(3, 1fr); }\n @media (min-width: 768px) { grid-template-columns: repeat(4, 1fr); }\n @media (min-width: 1024px) { grid-template-columns: repeat(5, 1fr); }\n @media (min-width: 1280px) { grid-template-columns: repeat(6, 1fr); }\n `,\n item: css`\n position: relative;\n border-radius: 8px;\n border: 2px solid transparent;\n overflow: hidden;\n cursor: pointer;\n transition: all 0.15s;\n background-color: #f9fafb;\n \n &:hover {\n border-color: #e5e7eb;\n }\n `,\n itemSelected: css`\n border-color: #a855f7;\n background-color: #faf5ff;\n `,\n checkbox: css`\n position: absolute;\n top: 8px;\n left: 8px;\n z-index: 10;\n width: 16px;\n height: 16px;\n accent-color: #9333ea;\n `,\n cdnBadge: css`\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 10;\n background-color: #dcfce7;\n color: #15803d;\n font-size: 12px;\n padding: 2px 6px;\n border-radius: 9999px;\n `,\n content: css`\n aspect-ratio: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n `,\n folderIcon: css`\n width: 64px;\n height: 64px;\n color: #facc15;\n `,\n image: css`\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n border-radius: 4px;\n `,\n label: css`\n padding: 6px 8px;\n background-color: white;\n border-top: 1px solid #e5e7eb;\n `,\n name: css`\n font-size: 12px;\n color: #374151;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n `,\n size: css`\n font-size: 12px;\n color: #9ca3af;\n margin: 0;\n `,\n}\n\nexport function StudioFileGrid() {\n const { currentPath, setCurrentPath, selectedItems, toggleSelection } = useStudio()\n const [items, setItems] = useState<FileItem[]>([])\n const [loading, setLoading] = useState(true)\n\n useEffect(() => {\n async function loadItems() {\n setLoading(true)\n try {\n const response = await fetch(`/api/studio/list?path=${encodeURIComponent(currentPath)}`)\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 }\n loadItems()\n }, [currentPath])\n\n if (loading) {\n return (\n <div css={styles.loading}>\n <div css={styles.spinner} />\n </div>\n )\n }\n\n if (items.length === 0) {\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 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 return (\n <div css={styles.grid}>\n {sortedItems.map((item) => (\n <GridItem\n key={item.path}\n item={item}\n isSelected={selectedItems.has(item.path)}\n onSelect={() => toggleSelection(item.path)}\n onOpen={() => {\n if (item.type === 'folder') {\n setCurrentPath(item.path)\n }\n }}\n />\n ))}\n </div>\n )\n}\n\ninterface GridItemProps {\n item: FileItem\n isSelected: boolean\n onSelect: () => void\n onOpen: () => void\n}\n\nfunction GridItem({ item, isSelected, onSelect, onOpen }: GridItemProps) {\n const isFolder = item.type === 'folder'\n\n return (\n <div css={[styles.item, isSelected && styles.itemSelected]} onDoubleClick={onOpen}>\n <input\n type=\"checkbox\"\n css={styles.checkbox}\n checked={isSelected}\n onChange={onSelect}\n onClick={(e) => e.stopPropagation()}\n />\n\n {item.cdnSynced && <span css={styles.cdnBadge}>CDN</span>}\n\n <div css={styles.content}>\n {isFolder ? (\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 <img\n css={styles.image}\n src={item.path.replace('public', '')}\n alt={item.name}\n loading=\"lazy\"\n />\n )}\n </div>\n\n <div css={styles.label}>\n <p css={styles.name} title={item.name}>{item.name}</p>\n {item.size && <p css={styles.size}>{formatFileSize(item.size)}</p>}\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","/** @jsxImportSource @emotion/react */\n'use client'\n\nimport { useEffect, useState } from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { useStudio } from './StudioContext'\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: 2px solid transparent;\n border-bottom-color: #9333ea;\n animation: ${spin} 1s 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: #6b7280;\n `,\n table: css`\n width: 100%;\n border-collapse: collapse;\n `,\n th: css`\n text-align: left;\n font-size: 12px;\n color: #6b7280;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n padding-bottom: 8px;\n font-weight: normal;\n `,\n thCheckbox: css`\n width: 32px;\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 border-top: 1px solid #f3f4f6;\n `,\n row: css`\n cursor: pointer;\n transition: background-color 0.15s;\n \n &:hover {\n background-color: #f9fafb;\n }\n `,\n rowSelected: css`\n background-color: #faf5ff;\n `,\n td: css`\n padding: 8px 0;\n border-bottom: 1px solid #f3f4f6;\n `,\n checkbox: css`\n width: 16px;\n height: 16px;\n accent-color: #9333ea;\n `,\n nameCell: css`\n display: flex;\n align-items: center;\n gap: 8px;\n `,\n folderIcon: css`\n width: 20px;\n height: 20px;\n color: #facc15;\n `,\n fileIcon: css`\n width: 20px;\n height: 20px;\n color: #9ca3af;\n `,\n name: css`\n font-size: 14px;\n color: #111827;\n `,\n meta: css`\n font-size: 14px;\n color: #6b7280;\n `,\n cdnBadge: css`\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: #15803d;\n `,\n cdnIcon: css`\n width: 12px;\n height: 12px;\n `,\n cdnEmpty: css`\n font-size: 12px;\n color: #9ca3af;\n `,\n}\n\nexport function StudioFileList() {\n const { currentPath, setCurrentPath, selectedItems, toggleSelection } = useStudio()\n const [items, setItems] = useState<FileItem[]>([])\n const [loading, setLoading] = useState(true)\n\n useEffect(() => {\n async function loadItems() {\n setLoading(true)\n try {\n const response = await fetch(`/api/studio/list?path=${encodeURIComponent(currentPath)}`)\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 }\n loadItems()\n }, [currentPath])\n\n if (loading) {\n return (\n <div css={styles.loading}>\n <div css={styles.spinner} />\n </div>\n )\n }\n\n if (items.length === 0) {\n return (\n <div css={styles.empty}>\n <p>No files in this folder</p>\n </div>\n )\n }\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 return (\n <table css={styles.table}>\n <thead>\n <tr>\n <th css={[styles.th, styles.thCheckbox]}></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 {sortedItems.map((item) => (\n <ListRow\n key={item.path}\n item={item}\n isSelected={selectedItems.has(item.path)}\n onSelect={() => toggleSelection(item.path)}\n onOpen={() => {\n if (item.type === 'folder') {\n setCurrentPath(item.path)\n }\n }}\n />\n ))}\n </tbody>\n </table>\n )\n}\n\ninterface ListRowProps {\n item: FileItem\n isSelected: boolean\n onSelect: () => void\n onOpen: () => void\n}\n\nfunction ListRow({ item, isSelected, onSelect, onOpen }: ListRowProps) {\n const isFolder = item.type === 'folder'\n\n return (\n <tr css={[styles.row, isSelected && styles.rowSelected]} onDoubleClick={onOpen}>\n <td css={styles.td}>\n <input\n type=\"checkbox\"\n css={styles.checkbox}\n checked={isSelected}\n onChange={onSelect}\n onClick={(e) => e.stopPropagation()}\n />\n </td>\n <td css={styles.td}>\n <div css={styles.nameCell}>\n {isFolder ? (\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 <svg css={styles.fileIcon} 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 )}\n <span css={styles.name}>{item.name}</span>\n </div>\n </td>\n <td css={[styles.td, styles.meta]}>\n {item.size ? formatFileSize(item.size) : '--'}\n </td>\n <td css={[styles.td, styles.meta]}>\n {item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : '--'}\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","/** @jsxImportSource @emotion/react */\n'use client'\n\nimport { css } from '@emotion/react'\nimport { useStudio } from './StudioContext'\n\nconst styles = {\n panel: css`\n width: 320px;\n border-left: 1px solid #e5e7eb;\n background-color: #f9fafb;\n padding: 16px;\n overflow: auto;\n `,\n title: css`\n font-size: 14px;\n font-weight: 500;\n color: #111827;\n margin: 0 0 16px 0;\n `,\n imageContainer: css`\n background-color: white;\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n padding: 8px;\n margin-bottom: 16px;\n `,\n image: css`\n width: 100%;\n height: auto;\n border-radius: 4px;\n `,\n info: css`\n display: flex;\n flex-direction: column;\n gap: 12px;\n `,\n row: css`\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n `,\n label: css`\n color: #6b7280;\n `,\n value: css`\n color: #111827;\n `,\n valueTruncate: css`\n max-width: 128px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n section: css`\n padding-top: 8px;\n border-top: 1px solid #e5e7eb;\n `,\n sectionTitle: css`\n font-size: 12px;\n font-weight: 500;\n color: #6b7280;\n margin: 0 0 8px 0;\n `,\n cdnStatus: css`\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n color: #16a34a;\n `,\n cdnIcon: css`\n width: 16px;\n height: 16px;\n `,\n copyBtn: css`\n margin-top: 8px;\n font-size: 12px;\n color: #9333ea;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n \n &:hover {\n text-decoration: underline;\n }\n `,\n colorSwatch: css`\n margin-top: 8px;\n height: 32px;\n border-radius: 4px;\n `,\n actions: css`\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #e5e7eb;\n display: flex;\n flex-direction: column;\n gap: 8px;\n `,\n actionBtn: css`\n width: 100%;\n padding: 8px 12px;\n font-size: 14px;\n background-color: white;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.15s;\n color: #374151;\n \n &:hover {\n background-color: #f9fafb;\n }\n `,\n actionBtnDanger: css`\n color: #dc2626;\n \n &:hover {\n background-color: #fef2f2;\n }\n `,\n}\n\nexport function StudioPreview() {\n const { selectedItems, meta } = useStudio()\n\n if (selectedItems.size !== 1) {\n return null\n }\n\n const selectedPath = Array.from(selectedItems)[0]\n const imageKey = selectedPath\n .replace(/^public\\/images\\//, '')\n .replace(/^public\\/originals\\//, '')\n\n const imageData = meta?.images?.[imageKey]\n\n return (\n <div css={styles.panel}>\n <h3 css={styles.title}>Preview</h3>\n\n <div css={styles.imageContainer}>\n <img\n css={styles.image}\n src={selectedPath.replace('public', '')}\n alt=\"Preview\"\n />\n </div>\n\n <div css={styles.info}>\n <InfoRow label=\"Filename\" value={selectedPath.split('/').pop() || ''} />\n\n {imageData && (\n <>\n <InfoRow\n label=\"Original\"\n value={`${imageData.original.width}x${imageData.original.height}`}\n />\n <InfoRow\n label=\"File size\"\n value={formatFileSize(imageData.original.fileSize)}\n />\n\n <div css={styles.section}>\n <p css={styles.sectionTitle}>Generated sizes</p>\n {Object.entries(imageData.sizes).map(([size, data]) => (\n <InfoRow key={size} label={size} value={`${data.width}x${data.height}`} />\n ))}\n </div>\n\n {imageData.cdn?.synced && (\n <div css={styles.section}>\n <p css={styles.sectionTitle}>CDN</p>\n <div css={styles.cdnStatus}>\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 to CDN\n </div>\n <button\n css={styles.copyBtn}\n onClick={() => {\n navigator.clipboard.writeText(`${imageData.cdn?.baseUrl}${imageData.sizes.full.path}`)\n }}\n >\n Copy CDN URL\n </button>\n </div>\n )}\n\n {imageData.blurhash && (\n <div css={styles.section}>\n <InfoRow label=\"Blurhash\" value={imageData.blurhash} truncate />\n <div\n css={styles.colorSwatch}\n style={{ backgroundColor: imageData.dominantColor }}\n title={`Dominant color: ${imageData.dominantColor}`}\n />\n </div>\n )}\n </>\n )}\n </div>\n\n <div css={styles.actions}>\n <button css={styles.actionBtn}>Rename</button>\n <button css={[styles.actionBtn, styles.actionBtnDanger]}>Delete</button>\n </div>\n </div>\n )\n}\n\nfunction InfoRow({ label, value, truncate }: { label: string; value: string; truncate?: boolean }) {\n return (\n <div css={styles.row}>\n <span css={styles.label}>{label}</span>\n <span css={[styles.value, truncate && styles.valueTruncate]} title={truncate ? value : undefined}>\n {value}\n </span>\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","/** @jsxImportSource @emotion/react */\n'use client'\n\nimport { useState } from 'react'\nimport { css } from '@emotion/react'\n\nconst styles = {\n btn: css`\n padding: 8px;\n background: none;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.15s;\n \n &:hover {\n background-color: #f3f4f6;\n }\n `,\n icon: css`\n width: 20px;\n height: 20px;\n color: #6b7280;\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 `,\n backdrop: css`\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(0, 0, 0, 0.3);\n `,\n panel: css`\n position: relative;\n background-color: white;\n border-radius: 12px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\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: 18px;\n font-weight: 600;\n margin: 0;\n `,\n closeBtn: css`\n padding: 4px;\n background: none;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n \n &:hover {\n background-color: #f3f4f6;\n }\n `,\n sections: css`\n display: flex;\n flex-direction: column;\n gap: 24px;\n `,\n sectionTitle: css`\n font-size: 14px;\n font-weight: 500;\n color: #111827;\n margin: 0 0 12px 0;\n `,\n description: css`\n font-size: 12px;\n color: #6b7280;\n margin: 0 0 12px 0;\n `,\n code: css`\n background-color: #f9fafb;\n border-radius: 8px;\n padding: 12px;\n font-family: monospace;\n font-size: 12px;\n color: #4b5563;\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: 8px 12px;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n font-size: 14px;\n \n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px #a855f7;\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: 12px;\n color: #6b7280;\n display: block;\n margin-bottom: 4px;\n `,\n footer: css`\n margin-top: 24px;\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n `,\n cancelBtn: css`\n padding: 8px 16px;\n font-size: 14px;\n color: #4b5563;\n background: none;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n \n &:hover {\n background-color: #f3f4f6;\n }\n `,\n saveBtn: css`\n padding: 8px 16px;\n font-size: 14px;\n color: white;\n background-color: #9333ea;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n \n &:hover {\n background-color: #7c3aed;\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\nfunction SettingsPanel({ onClose }: { onClose: () => void }) {\n return (\n <div css={styles.overlay}>\n <div css={styles.backdrop} onClick={onClose} />\n\n <div css={styles.panel}>\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.code}>\n <p css={styles.codeLine}>CLOUDFLARE_R2_ACCOUNT_ID</p>\n <p css={styles.codeLine}>CLOUDFLARE_R2_ACCESS_KEY_ID</p>\n <p css={styles.codeLine}>CLOUDFLARE_R2_SECRET_ACCESS_KEY</p>\n <p css={styles.codeLine}>CLOUDFLARE_R2_BUCKET_NAME</p>\n <p css={styles.codeLine}>CLOUDFLARE_R2_PUBLIC_URL</p>\n </div>\n </section>\n\n <section>\n <h3 css={styles.sectionTitle}>Custom CDN URL</h3>\n <p css={styles.description}>Override the default R2 URL with a custom domain:</p>\n <input css={styles.input} type=\"text\" placeholder=\"https://cdn.yourdomain.com\" />\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"]}