@gallop.software/studio 0.1.22 → 0.1.24

package/dist/{StudioUI-TPVIV5T7.js → StudioUI-YO6WPG5E.js}

@@ -38,6 +38,9 @@ var defaultState = {
   viewMode: "grid",
   setViewMode: () => {
   },
+  focusedItem: null,
+  setFocusedItem: () => {
+  },
   meta: null,
   setMeta: () => {
   },
@@ -204,6 +207,7 @@ function AlertModal({
 
 // src/components/StudioToolbar.tsx
 
+var btnHeight = "36px";
 var spin = _react3.keyframes`
   to { transform: rotate(360deg); }
 `;
@@ -224,13 +228,15 @@ var styles2 = {
   right: _react3.css`
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 8px;
   `,
   btn: _react3.css`
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: 6px;
-    padding: 8px 14px;
+    height: ${btnHeight};
+    padding: 0 14px;
     border-radius: 6px;
     font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
     font-weight: 500;
@@ -251,6 +257,9 @@ var styles2 = {
       opacity: 0.5;
     }
   `,
+  btnIconOnly: _react3.css`
+    padding: 0 10px;
+  `,
   btnPrimary: _react3.css`
     background: ${_chunkAY2DAS6Wjs.colors.primary};
     border-color: ${_chunkAY2DAS6Wjs.colors.primary};
@@ -270,8 +279,8 @@ var styles2 = {
     }
   `,
   icon: _react3.css`
-    width: 15px;
-    height: 15px;
+    width: 16px;
+    height: 16px;
   `,
   iconSpin: _react3.css`
     animation: ${spin} 1s linear infinite;
@@ -282,6 +291,7 @@ var styles2 = {
     display: flex;
     align-items: center;
     gap: 8px;
+    margin-right: 8px;
   `,
   clearBtn: _react3.css`
     color: ${_chunkAY2DAS6Wjs.colors.primary};
@@ -305,16 +315,17 @@ var styles2 = {
   viewToggle: _react3.css`
     display: flex;
     align-items: center;
-    background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
+    height: ${btnHeight};
+    background-color: ${_chunkAY2DAS6Wjs.colors.surface};
     border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
     border-radius: 6px;
-    padding: 2px;
+    overflow: hidden;
   `,
   viewBtn: _react3.css`
-    padding: 6px 8px;
+    height: 100%;
+    padding: 0 10px;
     background: transparent;
     border: none;
-    border-radius: 4px;
     cursor: pointer;
     color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
     transition: all 0.15s ease;
@@ -324,20 +335,24 @@ var styles2 = {
     
     &:hover {
       color: ${_chunkAY2DAS6Wjs.colors.text};
+      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
     }
   `,
   viewBtnActive: _react3.css`
-    background-color: ${_chunkAY2DAS6Wjs.colors.surface};
+    background-color: ${_chunkAY2DAS6Wjs.colors.background};
     color: ${_chunkAY2DAS6Wjs.colors.text};
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
   `
 };
 function StudioToolbar() {
-  const { selectedItems, viewMode, setViewMode, clearSelection, currentPath, triggerRefresh } = useStudio();
+  const { selectedItems, viewMode, setViewMode, clearSelection, currentPath, triggerRefresh, focusedItem } = useStudio();
   const fileInputRef = _react.useRef.call(void 0, null);
   const [uploading, setUploading] = _react.useState.call(void 0, false);
   const [refreshing, setRefreshing] = _react.useState.call(void 0, false);
+  const [processing, setProcessing] = _react.useState.call(void 0, false);
   const [showDeleteConfirm, setShowDeleteConfirm] = _react.useState.call(void 0, false);
+  const [showProcessConfirm, setShowProcessConfirm] = _react.useState.call(void 0, false);
+  const [processCount, setProcessCount] = _react.useState.call(void 0, 0);
+  const [processMode, setProcessMode] = _react.useState.call(void 0, "all");
   const [alertMessage, setAlertMessage] = _react.useState.call(void 0, null);
   const isInImagesFolder = currentPath === "public/images" || currentPath.startsWith("public/images/");
   const handleUpload = _react.useCallback.call(void 0, () => {
@@ -391,9 +406,107 @@ function StudioToolbar() {
       }
     }
   }, [currentPath, triggerRefresh]);
-  const handleReprocess = _react.useCallback.call(void 0, () => {
-    console.log("Reprocess clicked", selectedItems);
+  const handleProcessImages = _react.useCallback.call(void 0, async () => {
+    const hasSelection2 = selectedItems.size > 0;
+    if (hasSelection2) {
+      const selectedImagePaths = Array.from(selectedItems).filter((p) => {
+        const ext = _optionalChain([p, 'access', _4 => _4.split, 'call', _5 => _5("."), 'access', _6 => _6.pop, 'call', _7 => _7(), 'optionalAccess', _8 => _8.toLowerCase, 'call', _9 => _9()]) || "";
+        return ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"].includes(ext);
+      });
+      if (selectedImagePaths.length === 0) {
+        setAlertMessage({
+          title: "No Images Selected",
+          message: "Please select image files to process."
+        });
+        return;
+      }
+      setProcessCount(selectedImagePaths.length);
+      setProcessMode("selected");
+      setShowProcessConfirm(true);
+    } else {
+      try {
+        const response = await fetch("/api/studio/count-unprocessed");
+        const data = await response.json();
+        if (data.count === 0) {
+          setAlertMessage({
+            title: "All Images Processed",
+            message: "All images in the public folder have already been processed."
+          });
+          return;
+        }
+        setProcessCount(data.count);
+        setProcessMode("all");
+        setShowProcessConfirm(true);
+      } catch (error) {
+        console.error("Failed to count unprocessed images:", error);
+        setAlertMessage({
+          title: "Error",
+          message: "Failed to count unprocessed images."
+        });
+      }
+    }
   }, [selectedItems]);
+  const handleProcessConfirm = _react.useCallback.call(void 0, async () => {
+    setShowProcessConfirm(false);
+    setProcessing(true);
+    try {
+      if (processMode === "all") {
+        const response = await fetch("/api/studio/process-all", {
+          method: "POST"
+        });
+        const data = await response.json();
+        if (response.ok) {
+          const message = [
+            `Processed ${_optionalChain([data, 'access', _10 => _10.processed, 'optionalAccess', _11 => _11.length]) || 0} images.`,
+            _optionalChain([data, 'access', _12 => _12.orphansRemoved, 'optionalAccess', _13 => _13.length]) > 0 ? `Removed ${data.orphansRemoved.length} orphaned thumbnails.` : "",
+            _optionalChain([data, 'access', _14 => _14.errors, 'optionalAccess', _15 => _15.length]) > 0 ? `${data.errors.length} errors occurred.` : ""
+          ].filter(Boolean).join(" ");
+          setAlertMessage({
+            title: "Processing Complete",
+            message
+          });
+          triggerRefresh();
+        } else {
+          setAlertMessage({
+            title: "Processing Failed",
+            message: data.error || "Unknown error"
+          });
+        }
+      } else {
+        const selectedImageKeys = Array.from(selectedItems).filter((p) => {
+          const ext = _optionalChain([p, 'access', _16 => _16.split, 'call', _17 => _17("."), 'access', _18 => _18.pop, 'call', _19 => _19(), 'optionalAccess', _20 => _20.toLowerCase, 'call', _21 => _21()]) || "";
+          return ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"].includes(ext);
+        }).map((p) => p.replace(/^public\//, ""));
+        const response = await fetch("/api/studio/reprocess", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ imageKeys: selectedImageKeys })
+        });
+        const data = await response.json();
+        if (response.ok) {
+          setAlertMessage({
+            title: "Processing Complete",
+            message: `Processed ${_optionalChain([data, 'access', _22 => _22.processed, 'optionalAccess', _23 => _23.length]) || 0} images.${_optionalChain([data, 'access', _24 => _24.errors, 'optionalAccess', _25 => _25.length]) > 0 ? ` ${data.errors.length} errors occurred.` : ""}`
+          });
+          clearSelection();
+          triggerRefresh();
+        } else {
+          setAlertMessage({
+            title: "Processing Failed",
+            message: data.error || "Unknown error"
+          });
+        }
+      }
+    } catch (error) {
+      console.error("Processing error:", error);
+      setAlertMessage({
+        title: "Processing Failed",
+        message: "Processing failed. Check console for details."
+      });
+    } finally {
+      setProcessing(false);
+    }
+  }, [processMode, selectedItems, clearSelection, triggerRefresh]);
   const handleDeleteClick = _react.useCallback.call(void 0, () => {
     if (selectedItems.size === 0) return;
     setShowDeleteConfirm(true);
@@ -431,6 +544,9 @@ function StudioToolbar() {
     console.log("Scan clicked");
   }, []);
   const hasSelection = selectedItems.size > 0;
+  if (focusedItem) {
+    return null;
+  }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     showDeleteConfirm && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       ConfirmModal,
@@ -443,6 +559,16 @@ function StudioToolbar() {
         onCancel: () => setShowDeleteConfirm(false)
       }
     ),
+    showProcessConfirm && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ConfirmModal,
+      {
+        title: "Process Images",
+        message: processMode === "all" ? `Found ${processCount} unprocessed image${processCount !== 1 ? "s" : ""} in the public folder. This will generate thumbnails and remove any orphaned files from the images folder.` : `Process ${processCount} selected image${processCount !== 1 ? "s" : ""}? This will regenerate thumbnails for these files.`,
+        confirmLabel: processing ? "Processing..." : "Process",
+        onConfirm: handleProcessConfirm,
+        onCancel: () => setShowProcessConfirm(false)
+      }
+    ),
     alertMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       AlertModal,
       {
@@ -481,11 +607,11 @@ function StudioToolbar() {
           "button",
           {
             css: styles2.btn,
-            onClick: handleReprocess,
-            disabled: !hasSelection,
+            onClick: handleProcessImages,
+            disabled: processing,
             children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RefreshIcon, {}),
-              "Reprocess"
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ImageStackIcon, {}),
+              processing ? "Processing..." : "Process Images"
             ]
           }
         ),
@@ -527,7 +653,7 @@ function StudioToolbar() {
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "button",
           {
-            css: styles2.btn,
+            css: [styles2.btn, styles2.btnIconOnly],
             onClick: handleRefresh,
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RefreshIcon, { spinning: refreshing })
           }
@@ -577,102 +703,8 @@ function GridIcon() {
 function ListIcon() {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) });
 }
-
-// src/components/StudioBreadcrumb.tsx
-
-
-var styles3 = {
-  container: _react3.css`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 24px;
-    background-color: ${_chunkAY2DAS6Wjs.colors.surface};
-    border-bottom: 1px solid ${_chunkAY2DAS6Wjs.colors.borderLight};
-  `,
-  backBtn: _react3.css`
-    padding: 6px;
-    background: ${_chunkAY2DAS6Wjs.colors.surface};
-    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    &:hover {
-      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
-      border-color: ${_chunkAY2DAS6Wjs.colors.borderHover};
-    }
-  `,
-  backIcon: _react3.css`
-    width: 16px;
-    height: 16px;
-    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
-  `,
-  nav: _react3.css`
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
-  `,
-  item: _react3.css`
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  `,
-  separator: _react3.css`
-    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
-    margin: 0 2px;
-  `,
-  btn: _react3.css`
-    padding: 4px 8px;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
-    letter-spacing: -0.01em;
-    
-    &:hover {
-      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
-    }
-  `,
-  btnActive: _react3.css`
-    color: ${_chunkAY2DAS6Wjs.colors.text};
-    font-weight: 600;
-  `,
-  btnInactive: _react3.css`
-    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
-    
-    &:hover {
-      color: ${_chunkAY2DAS6Wjs.colors.text};
-    }
-  `
-};
-function StudioBreadcrumb() {
-  const { currentPath, setCurrentPath, navigateUp } = useStudio();
-  const parts = currentPath.split("/").filter(Boolean);
-  const handleClick = (index) => {
-    const newPath = parts.slice(0, index + 1).join("/");
-    setCurrentPath(newPath);
-  };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.container, children: [
-    currentPath !== "public" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles3.backBtn, onClick: navigateUp, "aria-label": "Go back", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.backIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "nav", { css: styles3.nav, children: parts.map((part, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles3.item, children: [
-      index > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.separator, children: "/" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "button",
-        {
-          css: [styles3.btn, index === parts.length - 1 ? styles3.btnActive : styles3.btnInactive],
-          onClick: () => handleClick(index),
-          children: part
-        }
-      )
-    ] }, index)) })
-  ] });
+function ImageStackIcon() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) });
 }
 
 // src/components/StudioFileGrid.tsx
@@ -682,7 +714,7 @@ function StudioBreadcrumb() {
 var spin2 = _react3.keyframes`
   to { transform: rotate(360deg); }
 `;
-var styles4 = {
+var styles3 = {
   loading: _react3.css`
     display: flex;
     align-items: center;
@@ -754,6 +786,13 @@ var styles4 = {
       border-color: ${_chunkAY2DAS6Wjs.colors.primary};
     }
   `,
+  parentItem: _react3.css`
+    cursor: pointer;
+    
+    &:hover {
+      border-color: ${_chunkAY2DAS6Wjs.colors.primary};
+    }
+  `,
   checkboxWrapper: _react3.css`
     position: absolute;
     top: 0;
@@ -793,6 +832,11 @@ var styles4 = {
     height: 56px;
     color: #f5a623;
   `,
+  parentIcon: _react3.css`
+    width: 56px;
+    height: 56px;
+    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
+  `,
   fileIcon: _react3.css`
     width: 40px;
     height: 40px;
@@ -836,15 +880,18 @@ var styles4 = {
   `,
   openBtn: _react3.css`
     flex-shrink: 0;
+    height: 28px;
     font-size: ${_chunkAY2DAS6Wjs.fontSize.xs};
     font-weight: 500;
     color: ${_chunkAY2DAS6Wjs.colors.primary};
     background: ${_chunkAY2DAS6Wjs.colors.surface};
     border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
-    padding: 4px 10px;
+    padding: 0 10px;
     cursor: pointer;
     border-radius: 4px;
     transition: all 0.15s ease;
+    display: inline-flex;
+    align-items: center;
     
     &:hover {
       background-color: ${_chunkAY2DAS6Wjs.colors.primaryLight};
@@ -880,7 +927,7 @@ var styles4 = {
   `
 };
 function StudioFileGrid() {
-  const { currentPath, setCurrentPath, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey } = useStudio();
+  const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem } = useStudio();
   const [items, setItems] = _react.useState.call(void 0, []);
   const [loading, setLoading] = _react.useState.call(void 0, true);
   _react.useEffect.call(void 0, () => {
@@ -900,13 +947,14 @@ function StudioFileGrid() {
     loadItems();
   }, [currentPath, refreshKey]);
   if (loading) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.spinner }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.spinner }) });
   }
-  if (items.length === 0) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.empty, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles4.emptyText, children: "No files in this folder" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles4.emptyText, children: "Upload images to get started" })
+  const isAtRoot = currentPath === "public";
+  if (items.length === 0 && isAtRoot) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.empty, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.emptyText, children: "No files in this folder" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.emptyText, children: "Upload images to get started" })
     ] });
   }
   const sortedItems = [...items].sort((a, b) => {
@@ -921,9 +969,11 @@ function StudioFileGrid() {
       toggleSelection(item.path);
     }
   };
-  const handleOpenFolder = (item) => {
+  const handleOpen = (item) => {
     if (item.type === "folder") {
       setCurrentPath(item.path);
+    } else {
+      setFocusedItem(item);
     }
   };
   const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
@@ -936,12 +986,12 @@ function StudioFileGrid() {
     }
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-    sortedItems.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.selectAllRow, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { css: styles4.selectAllLabel, children: [
+    sortedItems.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.selectAllRow, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { css: styles3.selectAllLabel, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "input",
         {
           type: "checkbox",
-          css: styles4.selectAllCheckbox,
+          css: styles3.selectAllCheckbox,
           checked: allItemsSelected,
           ref: (el) => {
             if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
@@ -953,16 +1003,32 @@ function StudioFileGrid() {
       sortedItems.length,
       ")"
     ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.grid, children: sortedItems.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      GridItem,
-      {
-        item,
-        isSelected: selectedItems.has(item.path),
-        onClick: (e) => handleItemClick(item, e),
-        onOpen: () => handleOpenFolder(item)
-      },
-      item.path
-    )) })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.grid, children: [
+      !isAtRoot && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          css: [styles3.item, styles3.parentItem],
+          onClick: navigateUp,
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.content, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.label, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.name, children: ".." }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.size, children: "Parent folder" })
+            ] })
+          ]
+        }
+      ),
+      sortedItems.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        GridItem,
+        {
+          item,
+          isSelected: selectedItems.has(item.path),
+          onClick: (e) => handleItemClick(item, e),
+          onOpen: () => handleOpen(item)
+        },
+        item.path
+      ))
+    ] })
   ] });
 }
 function GridItem({ item, isSelected, onClick, onOpen }) {
@@ -970,48 +1036,48 @@ function GridItem({ item, isSelected, onClick, onOpen }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
-      css: [styles4.item, isSelected && styles4.itemSelected],
+      css: [styles3.item, isSelected && styles3.itemSelected],
       onClick,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "div",
           {
-            css: styles4.checkboxWrapper,
+            css: styles3.checkboxWrapper,
             onClick: (e) => e.stopPropagation(),
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "input",
               {
                 type: "checkbox",
-                css: styles4.checkbox,
+                css: styles3.checkbox,
                 checked: isSelected,
                 onChange: () => onClick({})
               }
             )
           }
         ),
-        item.cdnSynced && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles4.cdnBadge, children: "CDN" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.content, children: isFolder ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }) : item.thumbnail ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        item.cdnSynced && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.cdnBadge, children: "CDN" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.content, children: isFolder ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }) : item.thumbnail ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "img",
           {
-            css: styles4.image,
+            css: styles3.image,
             src: item.thumbnail,
             alt: item.name,
             loading: "lazy"
           }
-        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.label, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.labelRow, children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.labelText, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles4.name, title: item.name, children: item.name }),
-            isFolder ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { css: styles4.size, children: [
+        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.label, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.labelRow, children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.labelText, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.name, title: item.name, children: item.name }),
+            isFolder ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { css: styles3.size, children: [
               item.fileCount !== void 0 ? `${item.fileCount} files` : "",
               item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
               item.totalSize !== void 0 ? formatFileSize(item.totalSize) : ""
-            ] }) : item.size !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles4.size, children: formatFileSize(item.size) })
+            ] }) : item.size !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.size, children: formatFileSize(item.size) })
           ] }),
-          isFolder && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
-              css: styles4.openBtn,
+              css: styles3.openBtn,
               onClick: (e) => {
                 e.stopPropagation();
                 onOpen();
@@ -1037,7 +1103,7 @@ function formatFileSize(bytes) {
 var spin3 = _react3.keyframes`
   to { transform: rotate(360deg); }
 `;
-var styles5 = {
+var styles4 = {
   loading: _react3.css`
     display: flex;
     align-items: center;
@@ -1114,6 +1180,13 @@ var styles5 = {
       background-color: ${_chunkAY2DAS6Wjs.colors.primaryLight};
     }
   `,
+  parentRow: _react3.css`
+    cursor: pointer;
+    
+    &:hover {
+      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
+    }
+  `,
   td: _react3.css`
     padding: 12px 16px;
   `,
@@ -1138,6 +1211,12 @@ var styles5 = {
     color: #f5a623;
     flex-shrink: 0;
   `,
+  parentIcon: _react3.css`
+    width: 20px;
+    height: 20px;
+    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
+    flex-shrink: 0;
+  `,
   fileIcon: _react3.css`
     width: 20px;
     height: 20px;
@@ -1179,15 +1258,19 @@ var styles5 = {
     color: ${_chunkAY2DAS6Wjs.colors.textMuted};
   `,
   openBtn: _react3.css`
+    height: 28px;
     font-size: ${_chunkAY2DAS6Wjs.fontSize.xs};
     font-weight: 500;
     color: ${_chunkAY2DAS6Wjs.colors.primary};
     background: ${_chunkAY2DAS6Wjs.colors.surface};
     border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
-    padding: 4px 12px;
+    padding: 0 12px;
     cursor: pointer;
     border-radius: 4px;
     transition: all 0.15s ease;
+    display: inline-flex;
+    align-items: center;
+    margin-left: auto;
     
     &:hover {
       background-color: ${_chunkAY2DAS6Wjs.colors.primaryLight};
@@ -1196,7 +1279,7 @@ var styles5 = {
   `
 };
 function StudioFileList() {
-  const { currentPath, setCurrentPath, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey } = useStudio();
+  const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem } = useStudio();
   const [items, setItems] = _react.useState.call(void 0, []);
   const [loading, setLoading] = _react.useState.call(void 0, true);
   _react.useEffect.call(void 0, () => {
@@ -1216,10 +1299,11 @@ function StudioFileList() {
     loadItems();
   }, [currentPath, refreshKey]);
   if (loading) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.spinner }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.spinner }) });
   }
-  if (items.length === 0) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.empty, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: "No files in this folder" }) });
+  const isAtRoot = currentPath === "public";
+  if (items.length === 0 && isAtRoot) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.empty, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: "No files in this folder" }) });
   }
   const sortedItems = [...items].sort((a, b) => {
     if (a.type === "folder" && b.type !== "folder") return -1;
@@ -1233,9 +1317,11 @@ function StudioFileList() {
       toggleSelection(item.path);
     }
   };
-  const handleOpenFolder = (item) => {
+  const handleOpen = (item) => {
     if (item.type === "folder") {
       setCurrentPath(item.path);
+    } else {
+      setFocusedItem(item);
     }
   };
   const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
@@ -1247,13 +1333,13 @@ function StudioFileList() {
       selectAll(sortedItems);
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "table", { css: styles5.table, children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.tableWrapper, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "table", { css: styles4.table, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles5.th, styles5.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles4.th, styles4.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "input",
         {
           type: "checkbox",
-          css: styles5.checkbox,
+          css: styles4.checkbox,
           checked: allItemsSelected,
           ref: (el) => {
             if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
@@ -1261,54 +1347,66 @@ function StudioFileList() {
           onChange: handleSelectAll
         }
       ) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: styles5.th, children: "Name" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles5.th, styles5.thSize], children: "Size" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles5.th, styles5.thDimensions], children: "Dimensions" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles5.th, styles5.thCdn], children: "CDN" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: styles4.th, children: "Name" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles4.th, styles4.thSize], children: "Size" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles4.th, styles4.thDimensions], children: "Dimensions" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles4.th, styles4.thCdn], children: "CDN" })
     ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { css: styles5.tbody, children: sortedItems.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      ListRow,
-      {
-        item,
-        isSelected: selectedItems.has(item.path),
-        onClick: (e) => handleItemClick(item, e),
-        onOpen: () => handleOpenFolder(item)
-      },
-      item.path
-    )) })
-  ] });
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tbody", { css: styles4.tbody, children: [
+      !isAtRoot && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { css: styles4.parentRow, onClick: navigateUp, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles4.td }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles4.td, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.nameCell, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles4.name, children: ".." })
+        ] }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles4.td, styles4.meta], children: "--" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles4.td, styles4.meta], children: "Parent folder" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles4.td, children: "--" })
+      ] }),
+      sortedItems.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ListRow,
+        {
+          item,
+          isSelected: selectedItems.has(item.path),
+          onClick: (e) => handleItemClick(item, e),
+          onOpen: () => handleOpen(item)
+        },
+        item.path
+      ))
+    ] })
+  ] }) });
 }
 function ListRow({ item, isSelected, onClick, onOpen }) {
   const isFolder = item.type === "folder";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "tr",
     {
-      css: [styles5.row, isSelected && styles5.rowSelected],
+      css: [styles4.row, isSelected && styles4.rowSelected],
       onClick,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "td",
           {
-            css: [styles5.td, styles5.checkboxCell],
+            css: [styles4.td, styles4.checkboxCell],
             onClick: (e) => e.stopPropagation(),
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "input",
               {
                 type: "checkbox",
-                css: styles5.checkbox,
+                css: styles4.checkbox,
                 checked: isSelected,
                 onChange: () => onClick({})
               }
             )
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles5.td, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.nameCell, children: [
-          isFolder ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }) : item.thumbnail ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { css: styles5.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.name, children: item.name }),
-          isFolder && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles4.td, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.nameCell, children: [
+          isFolder ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }) : item.thumbnail ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { css: styles4.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles4.name, children: item.name }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
-              css: styles5.openBtn,
+              css: styles4.openBtn,
               onClick: (e) => {
                 e.stopPropagation();
                 onOpen();
@@ -1317,12 +1415,12 @@ function ListRow({ item, isSelected, onClick, onOpen }) {
             }
           )
         ] }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles5.td, styles5.meta], children: isFolder ? item.fileCount !== void 0 ? `${item.fileCount} files` : "--" : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles5.td, styles5.meta], children: isFolder ? item.totalSize !== void 0 ? formatFileSize2(item.totalSize) : "--" : item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles5.td, children: item.cdnSynced ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles5.cdnBadge, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles4.td, styles4.meta], children: isFolder ? item.fileCount !== void 0 ? `${item.fileCount} files` : "--" : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles4.td, styles4.meta], children: isFolder ? item.totalSize !== void 0 ? formatFileSize2(item.totalSize) : "--" : item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles4.td, children: item.cdnSynced ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles4.cdnBadge, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
           "Synced"
-        ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.cdnEmpty, children: "--" }) })
+        ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles4.cdnEmpty, children: "--" }) })
       ]
     }
   );
@@ -1333,7 +1431,7 @@ function formatFileSize2(bytes) {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
-// src/components/StudioPreview.tsx
+// src/components/StudioDetailView.tsx
 
 
 
@@ -1347,161 +1445,158 @@ function isVideoFile(filename) {
   const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
   return VIDEO_EXTENSIONS.includes(ext);
 }
-var styles6 = {
-  panel: _react3.css`
-    width: 320px;
-    border-left: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
-    background-color: ${_chunkAY2DAS6Wjs.colors.surface};
-    padding: 20px;
+var styles5 = {
+  container: _react3.css`
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  `,
+  main: _react3.css`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    background: ${_chunkAY2DAS6Wjs.colors.background};
     overflow: auto;
   `,
-  title: _react3.css`
-    font-size: ${_chunkAY2DAS6Wjs.fontSize.sm};
-    font-weight: 600;
-    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin: 0 0 16px 0;
+  mediaWrapper: _react3.css`
+    max-width: 100%;
+    max-height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   `,
-  imageContainer: _react3.css`
-    background-color: ${_chunkAY2DAS6Wjs.colors.background};
+  image: _react3.css`
+    max-width: 100%;
+    max-height: calc(100vh - 200px);
+    object-fit: contain;
     border-radius: 8px;
-    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
-    padding: 12px;
-    margin-bottom: 20px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   `,
-  image: _react3.css`
-    width: 100%;
-    height: auto;
-    border-radius: 6px;
+  video: _react3.css`
+    max-width: 100%;
+    max-height: calc(100vh - 200px);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   `,
-  info: _react3.css`
+  filePlaceholder: _react3.css`
     display: flex;
     flex-direction: column;
-    gap: 10px;
-  `,
-  row: _react3.css`
-    display: flex;
-    justify-content: space-between;
-    font-size: ${_chunkAY2DAS6Wjs.fontSize.sm};
+    align-items: center;
+    justify-content: center;
+    padding: 48px;
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
+    border-radius: 12px;
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
   `,
-  label: _react3.css`
-    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
+  fileIcon: _react3.css`
+    width: 80px;
+    height: 80px;
+    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
+    margin-bottom: 16px;
   `,
-  value: _react3.css`
+  fileName: _react3.css`
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.lg};
+    font-weight: 600;
     color: ${_chunkAY2DAS6Wjs.colors.text};
-    font-weight: 500;
+    margin: 0;
   `,
-  valueTruncate: _react3.css`
-    max-width: 140px;
-    white-space: nowrap;
+  sidebar: _react3.css`
+    width: 280px;
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
+    border-left: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
-    text-overflow: ellipsis;
   `,
-  section: _react3.css`
-    padding-top: 12px;
-    margin-top: 4px;
-    border-top: 1px solid ${_chunkAY2DAS6Wjs.colors.borderLight};
-  `,
-  sectionTitle: _react3.css`
-    font-size: ${_chunkAY2DAS6Wjs.fontSize.xs};
-    font-weight: 600;
-    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin: 0 0 10px 0;
-  `,
-  cdnStatus: _react3.css`
+  sidebarHeader: _react3.css`
+    padding: 16px 20px;
+    border-bottom: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
     display: flex;
     align-items: center;
-    gap: 8px;
-    font-size: ${_chunkAY2DAS6Wjs.fontSize.sm};
-    color: ${_chunkAY2DAS6Wjs.colors.success};
-    font-weight: 500;
+    justify-content: space-between;
   `,
-  cdnIcon: _react3.css`
-    width: 16px;
-    height: 16px;
+  sidebarTitle: _react3.css`
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
+    font-weight: 600;
+    color: ${_chunkAY2DAS6Wjs.colors.text};
+    margin: 0;
   `,
-  copyBtn: _react3.css`
-    margin-top: 8px;
-    font-size: ${_chunkAY2DAS6Wjs.fontSize.sm};
-    font-weight: 500;
-    color: ${_chunkAY2DAS6Wjs.colors.primary};
-    background: none;
-    border: none;
+  closeBtn: _react3.css`
+    padding: 6px;
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
+    border-radius: 6px;
     cursor: pointer;
-    padding: 0;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     
     &:hover {
-      text-decoration: underline;
+      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
+      border-color: ${_chunkAY2DAS6Wjs.colors.borderHover};
     }
   `,
-  colorSwatch: _react3.css`
-    margin-top: 8px;
-    height: 32px;
-    border-radius: 6px;
-    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
+  closeIcon: _react3.css`
+    width: 16px;
+    height: 16px;
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
+  `,
+  sidebarContent: _react3.css`
+    flex: 1;
+    padding: 20px;
+    overflow: auto;
   `,
-  emptyState: _react3.css`
+  info: _react3.css`
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 200px;
-    text-align: center;
-  `,
-  emptyText: _react3.css`
-    font-size: ${_chunkAY2DAS6Wjs.fontSize.sm};
-    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
-    margin: 0;
+    gap: 12px;
+    margin-bottom: 24px;
   `,
-  filePlaceholder: _react3.css`
+  infoRow: _react3.css`
     display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 120px;
-    background: ${_chunkAY2DAS6Wjs.colors.background};
-    border-radius: 6px;
-  `,
-  fileIcon: _react3.css`
-    width: 56px;
-    height: 56px;
-    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
+    justify-content: space-between;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.sm};
   `,
-  folderIcon: _react3.css`
-    width: 56px;
-    height: 56px;
-    color: #f5a623;
+  infoLabel: _react3.css`
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
   `,
-  video: _react3.css`
-    width: 100%;
-    height: auto;
-    border-radius: 6px;
+  infoValue: _react3.css`
+    color: ${_chunkAY2DAS6Wjs.colors.text};
+    font-weight: 500;
+    text-align: right;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   `,
   actions: _react3.css`
-    margin-top: 20px;
-    padding-top: 20px;
-    border-top: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
     display: flex;
     flex-direction: column;
     gap: 8px;
   `,
   actionBtn: _react3.css`
+    display: flex;
+    align-items: center;
+    gap: 10px;
     width: 100%;
-    padding: 10px 14px;
+    padding: 12px 14px;
     font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
     font-weight: 500;
-    background-color: ${_chunkAY2DAS6Wjs.colors.surface};
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
     border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.15s ease;
     color: ${_chunkAY2DAS6Wjs.colors.text};
+    text-align: left;
     
     &:hover {
       background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
-      border-color: #d0d5dd;
+      border-color: ${_chunkAY2DAS6Wjs.colors.borderHover};
     }
   `,
   actionBtnDanger: _react3.css`
@@ -1511,27 +1606,42 @@ var styles6 = {
       background-color: ${_chunkAY2DAS6Wjs.colors.dangerLight};
       border-color: ${_chunkAY2DAS6Wjs.colors.danger};
     }
+  `,
+  actionIcon: _react3.css`
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
   `
 };
-function StudioPreview() {
-  const { selectedItems, meta, triggerRefresh, clearSelection } = useStudio();
+function StudioDetailView() {
+  const { focusedItem, setFocusedItem, triggerRefresh, clearSelection } = useStudio();
   const [showDeleteConfirm, setShowDeleteConfirm] = _react.useState.call(void 0, false);
   const [alertMessage, setAlertMessage] = _react.useState.call(void 0, null);
-  const handleDeleteClick = () => {
-    if (selectedItems.size === 0) return;
-    setShowDeleteConfirm(true);
+  if (!focusedItem) return null;
+  const isImage = isImageFile(focusedItem.name);
+  const isVideo = isVideoFile(focusedItem.name);
+  const imageSrc = focusedItem.path.replace("public", "");
+  const handleClose = () => {
+    setFocusedItem(null);
+  };
+  const handleRename = () => {
+    const newName = prompt("Enter new name:", focusedItem.name);
+    if (newName && newName !== focusedItem.name) {
+      console.log("Rename to:", newName);
+    }
   };
-  const handleDeleteConfirm = async () => {
+  const handleDelete = async () => {
     setShowDeleteConfirm(false);
     try {
       const response = await fetch("/api/studio/delete", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ paths: Array.from(selectedItems) })
+        body: JSON.stringify({ paths: [focusedItem.path] })
       });
       if (response.ok) {
         clearSelection();
         triggerRefresh();
+        setFocusedItem(null);
       } else {
         const error = await response.json();
         setAlertMessage({
@@ -1547,15 +1657,33 @@ function StudioPreview() {
       });
     }
   };
-  const modals = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+  const handleSync = () => {
+    console.log("Sync to CDN:", focusedItem.path);
+  };
+  const handleRegenerate = () => {
+    console.log("Regenerate:", focusedItem.path);
+  };
+  const renderMedia = () => {
+    if (isImage) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { css: styles5.image, src: imageSrc, alt: focusedItem.name });
+    }
+    if (isVideo) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "video", { css: styles5.video, src: imageSrc, controls: true });
+    }
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.filePlaceholder, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles5.fileName, children: focusedItem.name })
+    ] });
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     showDeleteConfirm && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       ConfirmModal,
       {
-        title: "Delete Items",
-        message: `Are you sure you want to delete ${selectedItems.size} item(s)? This action cannot be undone.`,
+        title: "Delete File",
+        message: `Are you sure you want to delete "${focusedItem.name}"? This action cannot be undone.`,
         confirmLabel: "Delete",
         variant: "danger",
-        onConfirm: handleDeleteConfirm,
+        onConfirm: handleDelete,
         onCancel: () => setShowDeleteConfirm(false)
       }
     ),
@@ -1566,136 +1694,60 @@ function StudioPreview() {
         message: alertMessage.message,
         onClose: () => setAlertMessage(null)
       }
-    )
-  ] });
-  if (selectedItems.size === 0) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      modals,
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.panel, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles6.title, children: "Preview" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.emptyState, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.emptyText, children: "Select an image to preview" }) })
-      ] })
-    ] });
-  }
-  if (selectedItems.size > 1) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      modals,
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.panel, children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "h3", { css: styles6.title, children: [
-          selectedItems.size,
-          " items selected"
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.container, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.main, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.mediaWrapper, children: renderMedia() }) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.sidebar, children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.sidebarHeader, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles5.sidebarTitle, children: "Details" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles5.closeBtn, onClick: handleClose, "aria-label": "Close", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.actions, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: [styles6.actionBtn, styles6.actionBtnDanger], onClick: handleDeleteClick, children: [
-          "Delete ",
-          selectedItems.size,
-          " items"
-        ] }) })
-      ] })
-    ] });
-  }
-  const selectedPath = Array.from(selectedItems)[0];
-  const isFolder = !selectedPath.includes(".") || selectedPath.endsWith("/");
-  const filename = selectedPath.split("/").pop() || "";
-  const isImage = isImageFile(filename);
-  const isVideo = isVideoFile(filename);
-  const imageKey = selectedPath.replace(/^public\/images\//, "").replace(/^public\/originals\//, "").replace(/^public\//, "");
-  const imageData = _optionalChain([meta, 'optionalAccess', _4 => _4.images, 'optionalAccess', _5 => _5[imageKey]]);
-  const renderPreview = () => {
-    if (isFolder) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.filePlaceholder, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }) });
-    }
-    if (isImage) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "img",
-        {
-          css: styles6.image,
-          src: selectedPath.replace("public", ""),
-          alt: "Preview"
-        }
-      );
-    }
-    if (isVideo) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "video",
-        {
-          css: styles6.video,
-          src: selectedPath.replace("public", ""),
-          controls: true,
-          muted: true
-        }
-      );
-    }
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.filePlaceholder, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }) });
-  };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    modals,
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.panel, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles6.title, children: "Preview" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.imageContainer, children: renderPreview() }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.info, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfoRow, { label: "Filename", value: selectedPath.split("/").pop() || "" }),
-        imageData && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            InfoRow,
-            {
-              label: "Original",
-              value: `${imageData.original.width}x${imageData.original.height}`
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            InfoRow,
-            {
-              label: "File size",
-              value: formatFileSize3(imageData.original.fileSize)
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.section, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.sectionTitle, children: "Generated sizes" }),
-            Object.entries(imageData.sizes).map(([size, data]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfoRow, { label: size, value: `${data.width}x${data.height}` }, size))
-          ] }),
-          _optionalChain([imageData, 'access', _6 => _6.cdn, 'optionalAccess', _7 => _7.synced]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.section, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.sectionTitle, children: "CDN" }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.cdnStatus, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
-              "Synced to CDN"
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.sidebarContent, children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.info, children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.infoRow, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.infoLabel, children: "Name" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.infoValue, title: focusedItem.name, children: focusedItem.name })
             ] }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "button",
-              {
-                css: styles6.copyBtn,
-                onClick: () => {
-                  navigator.clipboard.writeText(`${_optionalChain([imageData, 'access', _8 => _8.cdn, 'optionalAccess', _9 => _9.baseUrl])}${imageData.sizes.full.path}`);
-                },
-                children: "Copy CDN URL"
-              }
-            )
+            focusedItem.size !== void 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.infoRow, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.infoLabel, children: "Size" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.infoValue, children: formatFileSize3(focusedItem.size) })
+            ] }),
+            focusedItem.dimensions && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.infoRow, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.infoLabel, children: "Dimensions" }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles5.infoValue, children: [
+                focusedItem.dimensions.width,
+                " \xD7 ",
+                focusedItem.dimensions.height
+              ] })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.infoRow, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.infoLabel, children: "CDN Status" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.infoValue, children: focusedItem.cdnSynced ? "Synced" : "Not synced" })
+            ] })
           ] }),
-          imageData.blurhash && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.section, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfoRow, { label: "Blurhash", value: imageData.blurhash, truncate: true }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "div",
-              {
-                css: styles6.colorSwatch,
-                style: { backgroundColor: imageData.dominantColor },
-                title: `Dominant color: ${imageData.dominantColor}`
-              }
-            )
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.actions, children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles5.actionBtn, onClick: handleRename, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
+              "Rename"
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles5.actionBtn, onClick: handleSync, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
+              "Sync to CDN"
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles5.actionBtn, onClick: handleRegenerate, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
+              "Regenerate"
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: [styles5.actionBtn, styles5.actionBtnDanger], onClick: () => setShowDeleteConfirm(true), children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
+              "Delete"
+            ] })
           ] })
         ] })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.actions, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles6.actionBtn, children: "Rename" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: [styles6.actionBtn, styles6.actionBtnDanger], onClick: handleDeleteClick, children: "Delete" })
       ] })
     ] })
   ] });
 }
-function InfoRow({ label, value, truncate }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.row, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles6.label, children: label }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: [styles6.value, truncate && styles6.valueTruncate], title: truncate ? value : void 0, children: value })
-  ] });
-}
 function formatFileSize3(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -1706,9 +1758,11 @@ function formatFileSize3(bytes) {
 
 
 
-var styles7 = {
+var btnHeight2 = "36px";
+var styles6 = {
   btn: _react3.css`
-    padding: 8px;
+    height: ${btnHeight2};
+    padding: 0 12px;
     background: ${_chunkAY2DAS6Wjs.colors.surface};
     border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
     border-radius: 6px;
@@ -1724,8 +1778,8 @@ var styles7 = {
     }
   `,
   icon: _react3.css`
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
     color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
   `,
   overlay: _react3.css`
@@ -1888,10 +1942,10 @@ var styles7 = {
 function StudioSettings() {
   const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles7.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles6.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "svg",
       {
-        css: styles7.icon,
+        css: styles6.icon,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "none",
@@ -1909,56 +1963,57 @@ function StudioSettings() {
   ] });
 }
 function SettingsPanel({ onClose }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.overlay, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.panel, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.header, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { css: styles7.title, children: "Settings" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles7.closeBtn, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.overlay, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.panel, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.header, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { css: styles6.title, children: "Settings" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles6.closeBtn, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.sections, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.sections, children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles7.sectionTitle, children: "Cloudflare R2" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles7.description, children: "Configure in .env.local file:" }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.code, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL" })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles6.sectionTitle, children: "Cloudflare R2" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.description, children: "Configure in .env.local file:" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.code, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL" })
         ] })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles7.sectionTitle, children: "Custom CDN URL" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles7.description, children: "Override the default R2 URL with a custom domain:" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles7.input, type: "text", placeholder: "https://cdn.yourdomain.com" })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles6.sectionTitle, children: "Custom CDN URL" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.description, children: "Override the default R2 URL with a custom domain:" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles6.input, type: "text", placeholder: "https://cdn.yourdomain.com" })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles7.sectionTitle, children: "Thumbnail Sizes" }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.grid, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles6.sectionTitle, children: "Thumbnail Sizes" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.grid, children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles7.label, children: "Small" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles7.input, type: "number", defaultValue: 300 })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles6.label, children: "Small" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles6.input, type: "number", defaultValue: 300 })
           ] }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles7.label, children: "Medium" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles7.input, type: "number", defaultValue: 700 })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles6.label, children: "Medium" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles6.input, type: "number", defaultValue: 700 })
           ] }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles7.label, children: "Large" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles7.input, type: "number", defaultValue: 1400 })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles6.label, children: "Large" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles6.input, type: "number", defaultValue: 1400 })
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.footer, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles7.cancelBtn, onClick: onClose, children: "Cancel" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles7.saveBtn, children: "Save Changes" })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.footer, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles6.cancelBtn, onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles6.saveBtn, children: "Save Changes" })
     ] })
   ] }) });
 }
 
 // src/components/StudioUI.tsx
 
-var styles8 = {
+var btnHeight3 = "36px";
+var styles7 = {
   container: _react3.css`
     ${_chunkAY2DAS6Wjs.baseReset}
     display: flex;
@@ -1970,12 +2025,12 @@ var styles8 = {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 16px 24px;
+    padding: 12px 24px;
     background: ${_chunkAY2DAS6Wjs.colors.surface};
     border-bottom: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
   `,
   title: _react3.css`
-    font-size: ${_chunkAY2DAS6Wjs.fontSize.xl};
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.lg};
     font-weight: 600;
     color: ${_chunkAY2DAS6Wjs.colors.text};
     margin: 0;
@@ -1986,8 +2041,9 @@ var styles8 = {
     align-items: center;
     gap: 8px;
   `,
-  closeBtn: _react3.css`
-    padding: 8px;
+  headerBtn: _react3.css`
+    height: ${btnHeight3};
+    padding: 0 12px;
     background: ${_chunkAY2DAS6Wjs.colors.surface};
     border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
     border-radius: 6px;
@@ -2002,9 +2058,9 @@ var styles8 = {
       border-color: ${_chunkAY2DAS6Wjs.colors.borderHover};
     }
   `,
-  closeIcon: _react3.css`
-    width: 18px;
-    height: 18px;
+  headerIcon: _react3.css`
+    width: 16px;
+    height: 16px;
     color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
   `,
   content: _react3.css`
@@ -2024,6 +2080,7 @@ function StudioUI({ onClose }) {
   const [selectedItems, setSelectedItems] = _react.useState.call(void 0, /* @__PURE__ */ new Set());
   const [lastSelectedPath, setLastSelectedPath] = _react.useState.call(void 0, null);
   const [viewMode, setViewMode] = _react.useState.call(void 0, "grid");
+  const [focusedItem, setFocusedItem] = _react.useState.call(void 0, null);
   const [meta, setMeta] = _react.useState.call(void 0, null);
   const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
   const [refreshKey, setRefreshKey] = _react.useState.call(void 0, 0);
@@ -2040,6 +2097,7 @@ function StudioUI({ onClose }) {
   const setCurrentPath = _react.useCallback.call(void 0, (path) => {
     setCurrentPathInternal(path);
     setSelectedItems(/* @__PURE__ */ new Set());
+    setFocusedItem(null);
   }, []);
   const toggleSelection = _react.useCallback.call(void 0, (path) => {
     setSelectedItems((prev) => {
@@ -2077,10 +2135,14 @@ function StudioUI({ onClose }) {
   const handleKeyDown = _react.useCallback.call(void 0, 
     (e) => {
       if (e.key === "Escape") {
-        onClose();
+        if (focusedItem) {
+          setFocusedItem(null);
+        } else {
+          onClose();
+        }
       }
     },
-    [onClose]
+    [onClose, focusedItem]
   );
   _react.useEffect.call(void 0, () => {
     document.addEventListener("keydown", handleKeyDown);
@@ -2107,6 +2169,8 @@ function StudioUI({ onClose }) {
     lastSelectedPath,
     viewMode,
     setViewMode,
+    focusedItem,
+    setFocusedItem,
     meta,
     setMeta,
     isLoading,
@@ -2114,15 +2178,15 @@ function StudioUI({ onClose }) {
     refreshKey,
     triggerRefresh
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.container, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.header, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { css: styles8.title, children: "Studio" }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.headerActions, children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.container, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.header, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { css: styles7.title, children: "Studio" }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.headerActions, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioSettings, {}),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "button",
           {
-            css: styles8.closeBtn,
+            css: styles7.headerBtn,
             onClick: onClose,
             "aria-label": "Close Studio",
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseIcon, {})
@@ -2131,18 +2195,14 @@ function StudioUI({ onClose }) {
       ] })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioToolbar, {}),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioBreadcrumb, {}),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.content, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles8.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileGrid, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileList, {}) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioPreview, {})
-    ] })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.content, children: focusedItem ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioDetailView, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileGrid, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileList, {}) }) })
   ] }) });
 }
 function CloseIcon() {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "svg",
     {
-      css: styles8.closeIcon,
+      css: styles7.headerIcon,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "none",
@@ -2162,4 +2222,4 @@ var StudioUI_default = StudioUI;
 
 
 exports.StudioUI = StudioUI; exports.default = StudioUI_default;
-//# sourceMappingURL=StudioUI-TPVIV5T7.js.map
+//# sourceMappingURL=StudioUI-YO6WPG5E.js.map