@gallop.software/studio 0.1.22 → 0.1.23

package/dist/{StudioUI-3VFEM3VE.mjs → StudioUI-QPAHJJ64.mjs}

@@ -8,7 +8,7 @@ import {
 
 // src/components/StudioUI.tsx
 import { useEffect as useEffect3, useCallback as useCallback2, useState as useState6 } from "react";
-import { css as css8 } from "@emotion/react";
+import { css as css7 } from "@emotion/react";
 
 // src/components/StudioContext.tsx
 import { createContext, useContext } from "react";
@@ -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
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
+var btnHeight = "36px";
 var spin = keyframes2`
   to { transform: rotate(360deg); }
 `;
@@ -224,13 +228,15 @@ var styles2 = {
   right: css2`
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 8px;
   `,
   btn: css2`
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: 6px;
-    padding: 8px 14px;
+    height: ${btnHeight};
+    padding: 0 14px;
     border-radius: 6px;
     font-size: ${fontSize.base};
     font-weight: 500;
@@ -251,6 +257,9 @@ var styles2 = {
       opacity: 0.5;
     }
   `,
+  btnIconOnly: css2`
+    padding: 0 10px;
+  `,
   btnPrimary: css2`
     background: ${colors.primary};
     border-color: ${colors.primary};
@@ -270,8 +279,8 @@ var styles2 = {
     }
   `,
   icon: css2`
-    width: 15px;
-    height: 15px;
+    width: 16px;
+    height: 16px;
   `,
   iconSpin: css2`
     animation: ${spin} 1s linear infinite;
@@ -282,6 +291,7 @@ var styles2 = {
     display: flex;
     align-items: center;
     gap: 8px;
+    margin-right: 8px;
   `,
   clearBtn: css2`
     color: ${colors.primary};
@@ -305,16 +315,17 @@ var styles2 = {
   viewToggle: css2`
     display: flex;
     align-items: center;
-    background-color: ${colors.surfaceHover};
+    height: ${btnHeight};
+    background-color: ${colors.surface};
     border: 1px solid ${colors.border};
     border-radius: 6px;
-    padding: 2px;
+    overflow: hidden;
   `,
   viewBtn: css2`
-    padding: 6px 8px;
+    height: 100%;
+    padding: 0 10px;
     background: transparent;
     border: none;
-    border-radius: 4px;
     cursor: pointer;
     color: ${colors.textSecondary};
     transition: all 0.15s ease;
@@ -324,16 +335,16 @@ var styles2 = {
     
     &:hover {
       color: ${colors.text};
+      background-color: ${colors.surfaceHover};
     }
   `,
   viewBtnActive: css2`
-    background-color: ${colors.surface};
+    background-color: ${colors.background};
     color: ${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 = useRef(null);
   const [uploading, setUploading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
@@ -431,6 +442,9 @@ function StudioToolbar() {
     console.log("Scan clicked");
   }, []);
   const hasSelection = selectedItems.size > 0;
+  if (focusedItem) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     showDeleteConfirm && /* @__PURE__ */ jsx2(
       ConfirmModal,
@@ -527,7 +541,7 @@ function StudioToolbar() {
         /* @__PURE__ */ jsx2(
           "button",
           {
-            css: styles2.btn,
+            css: [styles2.btn, styles2.btnIconOnly],
             onClick: handleRefresh,
             children: /* @__PURE__ */ jsx2(RefreshIcon, { spinning: refreshing })
           }
@@ -578,118 +592,21 @@ function ListIcon() {
   return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) });
 }
 
-// src/components/StudioBreadcrumb.tsx
-import { css as css3 } from "@emotion/react";
-import { jsx as jsx3, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
-var styles3 = {
-  container: css3`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 24px;
-    background-color: ${colors.surface};
-    border-bottom: 1px solid ${colors.borderLight};
-  `,
-  backBtn: css3`
-    padding: 6px;
-    background: ${colors.surface};
-    border: 1px solid ${colors.border};
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    &:hover {
-      background-color: ${colors.surfaceHover};
-      border-color: ${colors.borderHover};
-    }
-  `,
-  backIcon: css3`
-    width: 16px;
-    height: 16px;
-    color: ${colors.textSecondary};
-  `,
-  nav: css3`
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    font-size: ${fontSize.base};
-  `,
-  item: css3`
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  `,
-  separator: css3`
-    color: ${colors.textMuted};
-    margin: 0 2px;
-  `,
-  btn: css3`
-    padding: 4px 8px;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    font-size: ${fontSize.base};
-    letter-spacing: -0.01em;
-    
-    &:hover {
-      background-color: ${colors.surfaceHover};
-    }
-  `,
-  btnActive: css3`
-    color: ${colors.text};
-    font-weight: 600;
-  `,
-  btnInactive: css3`
-    color: ${colors.textSecondary};
-    
-    &:hover {
-      color: ${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__ */ jsxs3("div", { css: styles3.container, children: [
-    currentPath !== "public" && /* @__PURE__ */ jsx3("button", { css: styles3.backBtn, onClick: navigateUp, "aria-label": "Go back", children: /* @__PURE__ */ jsx3("svg", { css: styles3.backIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
-    /* @__PURE__ */ jsx3("nav", { css: styles3.nav, children: parts.map((part, index) => /* @__PURE__ */ jsxs3("span", { css: styles3.item, children: [
-      index > 0 && /* @__PURE__ */ jsx3("span", { css: styles3.separator, children: "/" }),
-      /* @__PURE__ */ jsx3(
-        "button",
-        {
-          css: [styles3.btn, index === parts.length - 1 ? styles3.btnActive : styles3.btnInactive],
-          onClick: () => handleClick(index),
-          children: part
-        }
-      )
-    ] }, index)) })
-  ] });
-}
-
 // src/components/StudioFileGrid.tsx
 import { useEffect, useState as useState2 } from "react";
-import { css as css4, keyframes as keyframes3 } from "@emotion/react";
-import { jsx as jsx4, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
+import { css as css3, keyframes as keyframes3 } from "@emotion/react";
+import { jsx as jsx3, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var spin2 = keyframes3`
   to { transform: rotate(360deg); }
 `;
-var styles4 = {
-  loading: css4`
+var styles3 = {
+  loading: css3`
     display: flex;
     align-items: center;
     justify-content: center;
     height: 256px;
   `,
-  spinner: css4`
+  spinner: css3`
     width: 32px;
     height: 32px;
     border-radius: 50%;
@@ -697,7 +614,7 @@ var styles4 = {
     border-top-color: ${colors.primary};
     animation: ${spin2} 0.8s linear infinite;
   `,
-  empty: css4`
+  empty: css3`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -705,13 +622,13 @@ var styles4 = {
     height: 256px;
     color: ${colors.textSecondary};
   `,
-  emptyIcon: css4`
+  emptyIcon: css3`
     width: 48px;
     height: 48px;
     margin-bottom: 16px;
     opacity: 0.5;
   `,
-  emptyText: css4`
+  emptyText: css3`
     font-size: ${fontSize.base};
     margin: 0 0 4px 0;
     
@@ -720,7 +637,7 @@ var styles4 = {
       font-size: ${fontSize.sm};
     }
   `,
-  grid: css4`
+  grid: css3`
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
@@ -730,7 +647,7 @@ var styles4 = {
     @media (min-width: 1024px) { grid-template-columns: repeat(5, 1fr); }
     @media (min-width: 1280px) { grid-template-columns: repeat(6, 1fr); }
   `,
-  item: css4`
+  item: css3`
     position: relative;
     border-radius: 8px;
     border: 1px solid ${colors.border};
@@ -746,7 +663,7 @@ var styles4 = {
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
     }
   `,
-  itemSelected: css4`
+  itemSelected: css3`
     border-color: ${colors.primary};
     box-shadow: 0 0 0 1px ${colors.primary};
     
@@ -754,7 +671,14 @@ var styles4 = {
       border-color: ${colors.primary};
     }
   `,
-  checkboxWrapper: css4`
+  parentItem: css3`
+    cursor: pointer;
+    
+    &:hover {
+      border-color: ${colors.primary};
+    }
+  `,
+  checkboxWrapper: css3`
     position: absolute;
     top: 0;
     left: 0;
@@ -762,13 +686,13 @@ var styles4 = {
     padding: 8px;
     cursor: pointer;
   `,
-  checkbox: css4`
+  checkbox: css3`
     width: 16px;
     height: 16px;
     accent-color: ${colors.primary};
     cursor: pointer;
   `,
-  cdnBadge: css4`
+  cdnBadge: css3`
     position: absolute;
     top: 8px;
     right: 8px;
@@ -780,7 +704,7 @@ var styles4 = {
     padding: 2px 8px;
     border-radius: 4px;
   `,
-  content: css4`
+  content: css3`
     aspect-ratio: 1;
     display: flex;
     align-items: center;
@@ -788,38 +712,43 @@ var styles4 = {
     padding: 16px;
     background: ${colors.background};
   `,
-  folderIcon: css4`
+  folderIcon: css3`
     width: 56px;
     height: 56px;
     color: #f5a623;
   `,
-  fileIcon: css4`
+  parentIcon: css3`
+    width: 56px;
+    height: 56px;
+    color: ${colors.textMuted};
+  `,
+  fileIcon: css3`
     width: 40px;
     height: 40px;
     color: ${colors.textMuted};
   `,
-  image: css4`
+  image: css3`
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     border-radius: 4px;
   `,
-  label: css4`
+  label: css3`
     padding: 10px 12px;
     background-color: ${colors.surface};
     border-top: 1px solid ${colors.borderLight};
   `,
-  labelRow: css4`
+  labelRow: css3`
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
   `,
-  labelText: css4`
+  labelText: css3`
     flex: 1;
     min-width: 0;
   `,
-  name: css4`
+  name: css3`
     font-size: ${fontSize.sm};
     font-weight: 500;
     color: ${colors.text};
@@ -829,29 +758,32 @@ var styles4 = {
     margin: 0;
     letter-spacing: -0.01em;
   `,
-  size: css4`
+  size: css3`
     font-size: ${fontSize.xs};
     color: ${colors.textMuted};
     margin: 2px 0 0 0;
   `,
-  openBtn: css4`
+  openBtn: css3`
     flex-shrink: 0;
+    height: 28px;
     font-size: ${fontSize.xs};
     font-weight: 500;
     color: ${colors.primary};
     background: ${colors.surface};
     border: 1px solid ${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: ${colors.primaryLight};
       border-color: ${colors.primary};
     }
   `,
-  selectAllRow: css4`
+  selectAllRow: css3`
     display: flex;
     align-items: center;
     margin-bottom: 16px;
@@ -860,7 +792,7 @@ var styles4 = {
     border-radius: 8px;
     border: 1px solid ${colors.border};
   `,
-  selectAllLabel: css4`
+  selectAllLabel: css3`
     display: flex;
     align-items: center;
     gap: 10px;
@@ -873,14 +805,14 @@ var styles4 = {
       color: ${colors.text};
     }
   `,
-  selectAllCheckbox: css4`
+  selectAllCheckbox: css3`
     width: 16px;
     height: 16px;
     accent-color: ${colors.primary};
   `
 };
 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] = useState2([]);
   const [loading, setLoading] = useState2(true);
   useEffect(() => {
@@ -900,13 +832,14 @@ function StudioFileGrid() {
     loadItems();
   }, [currentPath, refreshKey]);
   if (loading) {
-    return /* @__PURE__ */ jsx4("div", { css: styles4.loading, children: /* @__PURE__ */ jsx4("div", { css: styles4.spinner }) });
+    return /* @__PURE__ */ jsx3("div", { css: styles3.loading, children: /* @__PURE__ */ jsx3("div", { css: styles3.spinner }) });
   }
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsxs4("div", { css: styles4.empty, children: [
-      /* @__PURE__ */ jsx4("svg", { css: styles4.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx4("p", { css: styles4.emptyText, children: "No files in this folder" }),
-      /* @__PURE__ */ jsx4("p", { css: styles4.emptyText, children: "Upload images to get started" })
+  const isAtRoot = currentPath === "public";
+  if (items.length === 0 && isAtRoot) {
+    return /* @__PURE__ */ jsxs3("div", { css: styles3.empty, children: [
+      /* @__PURE__ */ jsx3("svg", { css: styles3.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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__ */ jsx3("p", { css: styles3.emptyText, children: "No files in this folder" }),
+      /* @__PURE__ */ jsx3("p", { css: styles3.emptyText, children: "Upload images to get started" })
     ] });
   }
   const sortedItems = [...items].sort((a, b) => {
@@ -921,9 +854,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));
@@ -935,13 +870,13 @@ function StudioFileGrid() {
       selectAll(sortedItems);
     }
   };
-  return /* @__PURE__ */ jsxs4("div", { children: [
-    sortedItems.length > 0 && /* @__PURE__ */ jsx4("div", { css: styles4.selectAllRow, children: /* @__PURE__ */ jsxs4("label", { css: styles4.selectAllLabel, children: [
-      /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    sortedItems.length > 0 && /* @__PURE__ */ jsx3("div", { css: styles3.selectAllRow, children: /* @__PURE__ */ jsxs3("label", { css: styles3.selectAllLabel, children: [
+      /* @__PURE__ */ jsx3(
         "input",
         {
           type: "checkbox",
-          css: styles4.selectAllCheckbox,
+          css: styles3.selectAllCheckbox,
           checked: allItemsSelected,
           ref: (el) => {
             if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
@@ -953,65 +888,81 @@ function StudioFileGrid() {
       sortedItems.length,
       ")"
     ] }) }),
-    /* @__PURE__ */ jsx4("div", { css: styles4.grid, children: sortedItems.map((item) => /* @__PURE__ */ jsx4(
-      GridItem,
-      {
-        item,
-        isSelected: selectedItems.has(item.path),
-        onClick: (e) => handleItemClick(item, e),
-        onOpen: () => handleOpenFolder(item)
-      },
-      item.path
-    )) })
+    /* @__PURE__ */ jsxs3("div", { css: styles3.grid, children: [
+      !isAtRoot && /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          css: [styles3.item, styles3.parentItem],
+          onClick: navigateUp,
+          children: [
+            /* @__PURE__ */ jsx3("div", { css: styles3.content, children: /* @__PURE__ */ jsx3("svg", { css: styles3.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }) }),
+            /* @__PURE__ */ jsxs3("div", { css: styles3.label, children: [
+              /* @__PURE__ */ jsx3("p", { css: styles3.name, children: ".." }),
+              /* @__PURE__ */ jsx3("p", { css: styles3.size, children: "Parent folder" })
+            ] })
+          ]
+        }
+      ),
+      sortedItems.map((item) => /* @__PURE__ */ jsx3(
+        GridItem,
+        {
+          item,
+          isSelected: selectedItems.has(item.path),
+          onClick: (e) => handleItemClick(item, e),
+          onOpen: () => handleOpen(item)
+        },
+        item.path
+      ))
+    ] })
   ] });
 }
 function GridItem({ item, isSelected, onClick, onOpen }) {
   const isFolder = item.type === "folder";
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
-      css: [styles4.item, isSelected && styles4.itemSelected],
+      css: [styles3.item, isSelected && styles3.itemSelected],
       onClick,
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx3(
           "div",
           {
-            css: styles4.checkboxWrapper,
+            css: styles3.checkboxWrapper,
             onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ jsx4(
+            children: /* @__PURE__ */ jsx3(
               "input",
               {
                 type: "checkbox",
-                css: styles4.checkbox,
+                css: styles3.checkbox,
                 checked: isSelected,
                 onChange: () => onClick({})
               }
             )
           }
         ),
-        item.cdnSynced && /* @__PURE__ */ jsx4("span", { css: styles4.cdnBadge, children: "CDN" }),
-        /* @__PURE__ */ jsx4("div", { css: styles4.content, children: isFolder ? /* @__PURE__ */ jsx4("svg", { css: styles4.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx4(
+        item.cdnSynced && /* @__PURE__ */ jsx3("span", { css: styles3.cdnBadge, children: "CDN" }),
+        /* @__PURE__ */ jsx3("div", { css: styles3.content, children: isFolder ? /* @__PURE__ */ jsx3("svg", { css: styles3.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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__ */ jsx3(
           "img",
           {
-            css: styles4.image,
+            css: styles3.image,
             src: item.thumbnail,
             alt: item.name,
             loading: "lazy"
           }
-        ) : /* @__PURE__ */ jsx4("svg", { css: styles4.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx4("div", { css: styles4.label, children: /* @__PURE__ */ jsxs4("div", { css: styles4.labelRow, children: [
-          /* @__PURE__ */ jsxs4("div", { css: styles4.labelText, children: [
-            /* @__PURE__ */ jsx4("p", { css: styles4.name, title: item.name, children: item.name }),
-            isFolder ? /* @__PURE__ */ jsxs4("p", { css: styles4.size, children: [
+        ) : /* @__PURE__ */ jsx3("svg", { css: styles3.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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__ */ jsx3("div", { css: styles3.label, children: /* @__PURE__ */ jsxs3("div", { css: styles3.labelRow, children: [
+          /* @__PURE__ */ jsxs3("div", { css: styles3.labelText, children: [
+            /* @__PURE__ */ jsx3("p", { css: styles3.name, title: item.name, children: item.name }),
+            isFolder ? /* @__PURE__ */ jsxs3("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__ */ jsx4("p", { css: styles4.size, children: formatFileSize(item.size) })
+            ] }) : item.size !== void 0 && /* @__PURE__ */ jsx3("p", { css: styles3.size, children: formatFileSize(item.size) })
           ] }),
-          isFolder && /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx3(
             "button",
             {
-              css: styles4.openBtn,
+              css: styles3.openBtn,
               onClick: (e) => {
                 e.stopPropagation();
                 onOpen();
@@ -1032,19 +983,19 @@ function formatFileSize(bytes) {
 
 // src/components/StudioFileList.tsx
 import { useEffect as useEffect2, useState as useState3 } from "react";
-import { css as css5, keyframes as keyframes4 } from "@emotion/react";
-import { jsx as jsx5, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
+import { css as css4, keyframes as keyframes4 } from "@emotion/react";
+import { jsx as jsx4, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
 var spin3 = keyframes4`
   to { transform: rotate(360deg); }
 `;
-var styles5 = {
-  loading: css5`
+var styles4 = {
+  loading: css4`
     display: flex;
     align-items: center;
     justify-content: center;
     height: 256px;
   `,
-  spinner: css5`
+  spinner: css4`
     width: 32px;
     height: 32px;
     border-radius: 50%;
@@ -1052,7 +1003,7 @@ var styles5 = {
     border-top-color: ${colors.primary};
     animation: ${spin3} 0.8s linear infinite;
   `,
-  empty: css5`
+  empty: css4`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -1060,17 +1011,17 @@ var styles5 = {
     height: 256px;
     color: ${colors.textSecondary};
   `,
-  tableWrapper: css5`
+  tableWrapper: css4`
     background: ${colors.surface};
     border-radius: 8px;
     border: 1px solid ${colors.border};
     overflow: hidden;
   `,
-  table: css5`
+  table: css4`
     width: 100%;
     border-collapse: collapse;
   `,
-  th: css5`
+  th: css4`
     text-align: left;
     font-size: 11px;
     color: ${colors.textMuted};
@@ -1081,20 +1032,20 @@ var styles5 = {
     background: ${colors.background};
     border-bottom: 1px solid ${colors.border};
   `,
-  thCheckbox: css5`
+  thCheckbox: css4`
     width: 48px;
   `,
-  thSize: css5`
+  thSize: css4`
     width: 96px;
   `,
-  thDimensions: css5`
+  thDimensions: css4`
     width: 128px;
   `,
-  thCdn: css5`
+  thCdn: css4`
     width: 96px;
   `,
-  tbody: css5``,
-  row: css5`
+  tbody: css4``,
+  row: css4`
     cursor: pointer;
     transition: background-color 0.15s ease;
     user-select: none;
@@ -1107,44 +1058,57 @@ var styles5 = {
       border-bottom: 1px solid ${colors.borderLight};
     }
   `,
-  rowSelected: css5`
+  rowSelected: css4`
     background-color: ${colors.primaryLight};
     
     &:hover {
       background-color: ${colors.primaryLight};
     }
   `,
-  td: css5`
+  parentRow: css4`
+    cursor: pointer;
+    
+    &:hover {
+      background-color: ${colors.surfaceHover};
+    }
+  `,
+  td: css4`
     padding: 12px 16px;
   `,
-  checkboxCell: css5`
+  checkboxCell: css4`
     padding: 12px 16px;
     cursor: pointer;
   `,
-  checkbox: css5`
+  checkbox: css4`
     width: 16px;
     height: 16px;
     accent-color: ${colors.primary};
     cursor: pointer;
   `,
-  nameCell: css5`
+  nameCell: css4`
     display: flex;
     align-items: center;
     gap: 12px;
   `,
-  folderIcon: css5`
+  folderIcon: css4`
     width: 20px;
     height: 20px;
     color: #f5a623;
     flex-shrink: 0;
   `,
-  fileIcon: css5`
+  parentIcon: css4`
     width: 20px;
     height: 20px;
     color: ${colors.textMuted};
     flex-shrink: 0;
   `,
-  thumbnail: css5`
+  fileIcon: css4`
+    width: 20px;
+    height: 20px;
+    color: ${colors.textMuted};
+    flex-shrink: 0;
+  `,
+  thumbnail: css4`
     width: 36px;
     height: 36px;
     object-fit: cover;
@@ -1152,17 +1116,17 @@ var styles5 = {
     flex-shrink: 0;
     border: 1px solid ${colors.borderLight};
   `,
-  name: css5`
+  name: css4`
     font-size: ${fontSize.base};
     font-weight: 500;
     color: ${colors.text};
     letter-spacing: -0.01em;
   `,
-  meta: css5`
+  meta: css4`
     font-size: ${fontSize.sm};
     color: ${colors.textSecondary};
   `,
-  cdnBadge: css5`
+  cdnBadge: css4`
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -1170,24 +1134,28 @@ var styles5 = {
     font-weight: 500;
     color: ${colors.success};
   `,
-  cdnIcon: css5`
+  cdnIcon: css4`
     width: 12px;
     height: 12px;
   `,
-  cdnEmpty: css5`
+  cdnEmpty: css4`
     font-size: ${fontSize.sm};
     color: ${colors.textMuted};
   `,
-  openBtn: css5`
+  openBtn: css4`
+    height: 28px;
     font-size: ${fontSize.xs};
     font-weight: 500;
     color: ${colors.primary};
     background: ${colors.surface};
     border: 1px solid ${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: ${colors.primaryLight};
@@ -1196,7 +1164,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] = useState3([]);
   const [loading, setLoading] = useState3(true);
   useEffect2(() => {
@@ -1216,10 +1184,11 @@ function StudioFileList() {
     loadItems();
   }, [currentPath, refreshKey]);
   if (loading) {
-    return /* @__PURE__ */ jsx5("div", { css: styles5.loading, children: /* @__PURE__ */ jsx5("div", { css: styles5.spinner }) });
+    return /* @__PURE__ */ jsx4("div", { css: styles4.loading, children: /* @__PURE__ */ jsx4("div", { css: styles4.spinner }) });
   }
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsx5("div", { css: styles5.empty, children: /* @__PURE__ */ jsx5("p", { children: "No files in this folder" }) });
+  const isAtRoot = currentPath === "public";
+  if (items.length === 0 && isAtRoot) {
+    return /* @__PURE__ */ jsx4("div", { css: styles4.empty, children: /* @__PURE__ */ jsx4("p", { children: "No files in this folder" }) });
   }
   const sortedItems = [...items].sort((a, b) => {
     if (a.type === "folder" && b.type !== "folder") return -1;
@@ -1233,9 +1202,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 +1218,13 @@ function StudioFileList() {
       selectAll(sortedItems);
     }
   };
-  return /* @__PURE__ */ jsxs5("table", { css: styles5.table, children: [
-    /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
-      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4("div", { css: styles4.tableWrapper, children: /* @__PURE__ */ jsxs4("table", { css: styles4.table, children: [
+    /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs4("tr", { children: [
+      /* @__PURE__ */ jsx4("th", { css: [styles4.th, styles4.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ jsx4(
         "input",
         {
           type: "checkbox",
-          css: styles5.checkbox,
+          css: styles4.checkbox,
           checked: allItemsSelected,
           ref: (el) => {
             if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
@@ -1261,54 +1232,66 @@ function StudioFileList() {
           onChange: handleSelectAll
         }
       ) }),
-      /* @__PURE__ */ jsx5("th", { css: styles5.th, children: "Name" }),
-      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thSize], children: "Size" }),
-      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thDimensions], children: "Dimensions" }),
-      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCdn], children: "CDN" })
+      /* @__PURE__ */ jsx4("th", { css: styles4.th, children: "Name" }),
+      /* @__PURE__ */ jsx4("th", { css: [styles4.th, styles4.thSize], children: "Size" }),
+      /* @__PURE__ */ jsx4("th", { css: [styles4.th, styles4.thDimensions], children: "Dimensions" }),
+      /* @__PURE__ */ jsx4("th", { css: [styles4.th, styles4.thCdn], children: "CDN" })
     ] }) }),
-    /* @__PURE__ */ jsx5("tbody", { css: styles5.tbody, children: sortedItems.map((item) => /* @__PURE__ */ jsx5(
-      ListRow,
-      {
-        item,
-        isSelected: selectedItems.has(item.path),
-        onClick: (e) => handleItemClick(item, e),
-        onOpen: () => handleOpenFolder(item)
-      },
-      item.path
-    )) })
-  ] });
+    /* @__PURE__ */ jsxs4("tbody", { css: styles4.tbody, children: [
+      !isAtRoot && /* @__PURE__ */ jsxs4("tr", { css: styles4.parentRow, onClick: navigateUp, children: [
+        /* @__PURE__ */ jsx4("td", { css: styles4.td }),
+        /* @__PURE__ */ jsx4("td", { css: styles4.td, children: /* @__PURE__ */ jsxs4("div", { css: styles4.nameCell, children: [
+          /* @__PURE__ */ jsx4("svg", { css: styles4.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
+          /* @__PURE__ */ jsx4("span", { css: styles4.name, children: ".." })
+        ] }) }),
+        /* @__PURE__ */ jsx4("td", { css: [styles4.td, styles4.meta], children: "--" }),
+        /* @__PURE__ */ jsx4("td", { css: [styles4.td, styles4.meta], children: "Parent folder" }),
+        /* @__PURE__ */ jsx4("td", { css: styles4.td, children: "--" })
+      ] }),
+      sortedItems.map((item) => /* @__PURE__ */ jsx4(
+        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__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "tr",
     {
-      css: [styles5.row, isSelected && styles5.rowSelected],
+      css: [styles4.row, isSelected && styles4.rowSelected],
       onClick,
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4(
           "td",
           {
-            css: [styles5.td, styles5.checkboxCell],
+            css: [styles4.td, styles4.checkboxCell],
             onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ jsx5(
+            children: /* @__PURE__ */ jsx4(
               "input",
               {
                 type: "checkbox",
-                css: styles5.checkbox,
+                css: styles4.checkbox,
                 checked: isSelected,
                 onChange: () => onClick({})
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx5("td", { css: styles5.td, children: /* @__PURE__ */ jsxs5("div", { css: styles5.nameCell, children: [
-          isFolder ? /* @__PURE__ */ jsx5("svg", { css: styles5.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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__ */ jsx5("img", { css: styles5.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) : /* @__PURE__ */ jsx5("svg", { css: styles5.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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__ */ jsx5("span", { css: styles5.name, children: item.name }),
-          isFolder && /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4("td", { css: styles4.td, children: /* @__PURE__ */ jsxs4("div", { css: styles4.nameCell, children: [
+          isFolder ? /* @__PURE__ */ jsx4("svg", { css: styles4.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx4("img", { css: styles4.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) : /* @__PURE__ */ jsx4("svg", { css: styles4.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx4("span", { css: styles4.name, children: item.name }),
+          /* @__PURE__ */ jsx4(
             "button",
             {
-              css: styles5.openBtn,
+              css: styles4.openBtn,
               onClick: (e) => {
                 e.stopPropagation();
                 onOpen();
@@ -1317,12 +1300,12 @@ function ListRow({ item, isSelected, onClick, onOpen }) {
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: isFolder ? item.fileCount !== void 0 ? `${item.fileCount} files` : "--" : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
-        /* @__PURE__ */ jsx5("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__ */ jsx5("td", { css: styles5.td, children: item.cdnSynced ? /* @__PURE__ */ jsxs5("span", { css: styles5.cdnBadge, children: [
-          /* @__PURE__ */ jsx5("svg", { css: styles5.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx5("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__ */ jsx4("td", { css: [styles4.td, styles4.meta], children: isFolder ? item.fileCount !== void 0 ? `${item.fileCount} files` : "--" : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
+        /* @__PURE__ */ jsx4("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__ */ jsx4("td", { css: styles4.td, children: item.cdnSynced ? /* @__PURE__ */ jsxs4("span", { css: styles4.cdnBadge, children: [
+          /* @__PURE__ */ jsx4("svg", { css: styles4.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx4("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__ */ jsx5("span", { css: styles5.cdnEmpty, children: "--" }) })
+        ] }) : /* @__PURE__ */ jsx4("span", { css: styles4.cdnEmpty, children: "--" }) })
       ]
     }
   );
@@ -1333,10 +1316,10 @@ function formatFileSize2(bytes) {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
-// src/components/StudioPreview.tsx
+// src/components/StudioDetailView.tsx
 import { useState as useState4 } from "react";
-import { css as css6 } from "@emotion/react";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+import { css as css5 } from "@emotion/react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
 var IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".ico", ".bmp", ".tiff", ".tif"];
 var VIDEO_EXTENSIONS = [".mp4", ".webm", ".mov", ".avi", ".mkv", ".m4v"];
 function isImageFile(filename) {
@@ -1347,191 +1330,203 @@ function isVideoFile(filename) {
   const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
   return VIDEO_EXTENSIONS.includes(ext);
 }
-var styles6 = {
-  panel: css6`
-    width: 320px;
-    border-left: 1px solid ${colors.border};
-    background-color: ${colors.surface};
-    padding: 20px;
+var styles5 = {
+  container: css5`
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  `,
+  main: css5`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    background: ${colors.background};
     overflow: auto;
   `,
-  title: css6`
-    font-size: ${fontSize.sm};
-    font-weight: 600;
-    color: ${colors.textSecondary};
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin: 0 0 16px 0;
+  mediaWrapper: css5`
+    max-width: 100%;
+    max-height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   `,
-  imageContainer: css6`
-    background-color: ${colors.background};
+  image: css5`
+    max-width: 100%;
+    max-height: calc(100vh - 200px);
+    object-fit: contain;
     border-radius: 8px;
-    border: 1px solid ${colors.border};
-    padding: 12px;
-    margin-bottom: 20px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   `,
-  image: css6`
-    width: 100%;
-    height: auto;
-    border-radius: 6px;
+  video: css5`
+    max-width: 100%;
+    max-height: calc(100vh - 200px);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   `,
-  info: css6`
+  filePlaceholder: css5`
     display: flex;
     flex-direction: column;
-    gap: 10px;
-  `,
-  row: css6`
-    display: flex;
-    justify-content: space-between;
-    font-size: ${fontSize.sm};
+    align-items: center;
+    justify-content: center;
+    padding: 48px;
+    background: ${colors.surface};
+    border-radius: 12px;
+    border: 1px solid ${colors.border};
   `,
-  label: css6`
-    color: ${colors.textSecondary};
+  fileIcon: css5`
+    width: 80px;
+    height: 80px;
+    color: ${colors.textMuted};
+    margin-bottom: 16px;
   `,
-  value: css6`
+  fileName: css5`
+    font-size: ${fontSize.lg};
+    font-weight: 600;
     color: ${colors.text};
-    font-weight: 500;
+    margin: 0;
   `,
-  valueTruncate: css6`
-    max-width: 140px;
-    white-space: nowrap;
+  sidebar: css5`
+    width: 280px;
+    background: ${colors.surface};
+    border-left: 1px solid ${colors.border};
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
-    text-overflow: ellipsis;
-  `,
-  section: css6`
-    padding-top: 12px;
-    margin-top: 4px;
-    border-top: 1px solid ${colors.borderLight};
   `,
-  sectionTitle: css6`
-    font-size: ${fontSize.xs};
-    font-weight: 600;
-    color: ${colors.textMuted};
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin: 0 0 10px 0;
-  `,
-  cdnStatus: css6`
+  sidebarHeader: css5`
+    padding: 16px 20px;
+    border-bottom: 1px solid ${colors.border};
     display: flex;
     align-items: center;
-    gap: 8px;
-    font-size: ${fontSize.sm};
-    color: ${colors.success};
-    font-weight: 500;
+    justify-content: space-between;
   `,
-  cdnIcon: css6`
-    width: 16px;
-    height: 16px;
+  sidebarTitle: css5`
+    font-size: ${fontSize.base};
+    font-weight: 600;
+    color: ${colors.text};
+    margin: 0;
   `,
-  copyBtn: css6`
-    margin-top: 8px;
-    font-size: ${fontSize.sm};
-    font-weight: 500;
-    color: ${colors.primary};
-    background: none;
-    border: none;
+  closeBtn: css5`
+    padding: 6px;
+    background: ${colors.surface};
+    border: 1px solid ${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: ${colors.surfaceHover};
+      border-color: ${colors.borderHover};
     }
   `,
-  colorSwatch: css6`
-    margin-top: 8px;
-    height: 32px;
-    border-radius: 6px;
-    border: 1px solid ${colors.border};
+  closeIcon: css5`
+    width: 16px;
+    height: 16px;
+    color: ${colors.textSecondary};
+  `,
+  sidebarContent: css5`
+    flex: 1;
+    padding: 20px;
+    overflow: auto;
   `,
-  emptyState: css6`
+  info: css5`
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 200px;
-    text-align: center;
-  `,
-  emptyText: css6`
-    font-size: ${fontSize.sm};
-    color: ${colors.textMuted};
-    margin: 0;
+    gap: 12px;
+    margin-bottom: 24px;
   `,
-  filePlaceholder: css6`
+  infoRow: css5`
     display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 120px;
-    background: ${colors.background};
-    border-radius: 6px;
-  `,
-  fileIcon: css6`
-    width: 56px;
-    height: 56px;
-    color: ${colors.textMuted};
+    justify-content: space-between;
+    font-size: ${fontSize.sm};
   `,
-  folderIcon: css6`
-    width: 56px;
-    height: 56px;
-    color: #f5a623;
+  infoLabel: css5`
+    color: ${colors.textSecondary};
   `,
-  video: css6`
-    width: 100%;
-    height: auto;
-    border-radius: 6px;
+  infoValue: css5`
+    color: ${colors.text};
+    font-weight: 500;
+    text-align: right;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   `,
-  actions: css6`
-    margin-top: 20px;
-    padding-top: 20px;
-    border-top: 1px solid ${colors.border};
+  actions: css5`
     display: flex;
     flex-direction: column;
     gap: 8px;
   `,
-  actionBtn: css6`
+  actionBtn: css5`
+    display: flex;
+    align-items: center;
+    gap: 10px;
     width: 100%;
-    padding: 10px 14px;
+    padding: 12px 14px;
     font-size: ${fontSize.base};
     font-weight: 500;
-    background-color: ${colors.surface};
+    background: ${colors.surface};
     border: 1px solid ${colors.border};
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.15s ease;
     color: ${colors.text};
+    text-align: left;
     
     &:hover {
       background-color: ${colors.surfaceHover};
-      border-color: #d0d5dd;
+      border-color: ${colors.borderHover};
     }
   `,
-  actionBtnDanger: css6`
+  actionBtnDanger: css5`
     color: ${colors.danger};
     
     &:hover {
       background-color: ${colors.dangerLight};
       border-color: ${colors.danger};
     }
+  `,
+  actionIcon: css5`
+    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] = useState4(false);
   const [alertMessage, setAlertMessage] = useState4(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 handleDeleteConfirm = async () => {
+  const handleRename = () => {
+    const newName = prompt("Enter new name:", focusedItem.name);
+    if (newName && newName !== focusedItem.name) {
+      console.log("Rename to:", newName);
+    }
+  };
+  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,155 +1542,97 @@ function StudioPreview() {
       });
     }
   };
-  const modals = /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    showDeleteConfirm && /* @__PURE__ */ jsx6(
+  const handleSync = () => {
+    console.log("Sync to CDN:", focusedItem.path);
+  };
+  const handleRegenerate = () => {
+    console.log("Regenerate:", focusedItem.path);
+  };
+  const renderMedia = () => {
+    if (isImage) {
+      return /* @__PURE__ */ jsx5("img", { css: styles5.image, src: imageSrc, alt: focusedItem.name });
+    }
+    if (isVideo) {
+      return /* @__PURE__ */ jsx5("video", { css: styles5.video, src: imageSrc, controls: true });
+    }
+    return /* @__PURE__ */ jsxs5("div", { css: styles5.filePlaceholder, children: [
+      /* @__PURE__ */ jsx5("svg", { css: styles5.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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__ */ jsx5("p", { css: styles5.fileName, children: focusedItem.name })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    showDeleteConfirm && /* @__PURE__ */ jsx5(
       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)
       }
     ),
-    alertMessage && /* @__PURE__ */ jsx6(
+    alertMessage && /* @__PURE__ */ jsx5(
       AlertModal,
       {
         title: alertMessage.title,
         message: alertMessage.message,
         onClose: () => setAlertMessage(null)
       }
-    )
-  ] });
-  if (selectedItems.size === 0) {
-    return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-      modals,
-      /* @__PURE__ */ jsxs6("div", { css: styles6.panel, children: [
-        /* @__PURE__ */ jsx6("h3", { css: styles6.title, children: "Preview" }),
-        /* @__PURE__ */ jsx6("div", { css: styles6.emptyState, children: /* @__PURE__ */ jsx6("p", { css: styles6.emptyText, children: "Select an image to preview" }) })
-      ] })
-    ] });
-  }
-  if (selectedItems.size > 1) {
-    return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-      modals,
-      /* @__PURE__ */ jsxs6("div", { css: styles6.panel, children: [
-        /* @__PURE__ */ jsxs6("h3", { css: styles6.title, children: [
-          selectedItems.size,
-          " items selected"
+    ),
+    /* @__PURE__ */ jsxs5("div", { css: styles5.container, children: [
+      /* @__PURE__ */ jsx5("div", { css: styles5.main, children: /* @__PURE__ */ jsx5("div", { css: styles5.mediaWrapper, children: renderMedia() }) }),
+      /* @__PURE__ */ jsxs5("div", { css: styles5.sidebar, children: [
+        /* @__PURE__ */ jsxs5("div", { css: styles5.sidebarHeader, children: [
+          /* @__PURE__ */ jsx5("h3", { css: styles5.sidebarTitle, children: "Details" }),
+          /* @__PURE__ */ jsx5("button", { css: styles5.closeBtn, onClick: handleClose, "aria-label": "Close", children: /* @__PURE__ */ jsx5("svg", { css: styles5.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
         ] }),
-        /* @__PURE__ */ jsx6("div", { css: styles6.actions, children: /* @__PURE__ */ jsxs6("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 = meta?.images?.[imageKey];
-  const renderPreview = () => {
-    if (isFolder) {
-      return /* @__PURE__ */ jsx6("div", { css: styles6.filePlaceholder, children: /* @__PURE__ */ jsx6("svg", { css: styles6.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("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__ */ jsx6(
-        "img",
-        {
-          css: styles6.image,
-          src: selectedPath.replace("public", ""),
-          alt: "Preview"
-        }
-      );
-    }
-    if (isVideo) {
-      return /* @__PURE__ */ jsx6(
-        "video",
-        {
-          css: styles6.video,
-          src: selectedPath.replace("public", ""),
-          controls: true,
-          muted: true
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx6("div", { css: styles6.filePlaceholder, children: /* @__PURE__ */ jsx6("svg", { css: styles6.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("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__ */ jsxs6(Fragment2, { children: [
-    modals,
-    /* @__PURE__ */ jsxs6("div", { css: styles6.panel, children: [
-      /* @__PURE__ */ jsx6("h3", { css: styles6.title, children: "Preview" }),
-      /* @__PURE__ */ jsx6("div", { css: styles6.imageContainer, children: renderPreview() }),
-      /* @__PURE__ */ jsxs6("div", { css: styles6.info, children: [
-        /* @__PURE__ */ jsx6(InfoRow, { label: "Filename", value: selectedPath.split("/").pop() || "" }),
-        imageData && /* @__PURE__ */ jsxs6(Fragment2, { children: [
-          /* @__PURE__ */ jsx6(
-            InfoRow,
-            {
-              label: "Original",
-              value: `${imageData.original.width}x${imageData.original.height}`
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            InfoRow,
-            {
-              label: "File size",
-              value: formatFileSize3(imageData.original.fileSize)
-            }
-          ),
-          /* @__PURE__ */ jsxs6("div", { css: styles6.section, children: [
-            /* @__PURE__ */ jsx6("p", { css: styles6.sectionTitle, children: "Generated sizes" }),
-            Object.entries(imageData.sizes).map(([size, data]) => /* @__PURE__ */ jsx6(InfoRow, { label: size, value: `${data.width}x${data.height}` }, size))
-          ] }),
-          imageData.cdn?.synced && /* @__PURE__ */ jsxs6("div", { css: styles6.section, children: [
-            /* @__PURE__ */ jsx6("p", { css: styles6.sectionTitle, children: "CDN" }),
-            /* @__PURE__ */ jsxs6("div", { css: styles6.cdnStatus, children: [
-              /* @__PURE__ */ jsx6("svg", { css: styles6.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx6("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__ */ jsxs5("div", { css: styles5.sidebarContent, children: [
+          /* @__PURE__ */ jsxs5("div", { css: styles5.info, children: [
+            /* @__PURE__ */ jsxs5("div", { css: styles5.infoRow, children: [
+              /* @__PURE__ */ jsx5("span", { css: styles5.infoLabel, children: "Name" }),
+              /* @__PURE__ */ jsx5("span", { css: styles5.infoValue, title: focusedItem.name, children: focusedItem.name })
             ] }),
-            /* @__PURE__ */ jsx6(
-              "button",
-              {
-                css: styles6.copyBtn,
-                onClick: () => {
-                  navigator.clipboard.writeText(`${imageData.cdn?.baseUrl}${imageData.sizes.full.path}`);
-                },
-                children: "Copy CDN URL"
-              }
-            )
+            focusedItem.size !== void 0 && /* @__PURE__ */ jsxs5("div", { css: styles5.infoRow, children: [
+              /* @__PURE__ */ jsx5("span", { css: styles5.infoLabel, children: "Size" }),
+              /* @__PURE__ */ jsx5("span", { css: styles5.infoValue, children: formatFileSize3(focusedItem.size) })
+            ] }),
+            focusedItem.dimensions && /* @__PURE__ */ jsxs5("div", { css: styles5.infoRow, children: [
+              /* @__PURE__ */ jsx5("span", { css: styles5.infoLabel, children: "Dimensions" }),
+              /* @__PURE__ */ jsxs5("span", { css: styles5.infoValue, children: [
+                focusedItem.dimensions.width,
+                " \xD7 ",
+                focusedItem.dimensions.height
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs5("div", { css: styles5.infoRow, children: [
+              /* @__PURE__ */ jsx5("span", { css: styles5.infoLabel, children: "CDN Status" }),
+              /* @__PURE__ */ jsx5("span", { css: styles5.infoValue, children: focusedItem.cdnSynced ? "Synced" : "Not synced" })
+            ] })
           ] }),
-          imageData.blurhash && /* @__PURE__ */ jsxs6("div", { css: styles6.section, children: [
-            /* @__PURE__ */ jsx6(InfoRow, { label: "Blurhash", value: imageData.blurhash, truncate: true }),
-            /* @__PURE__ */ jsx6(
-              "div",
-              {
-                css: styles6.colorSwatch,
-                style: { backgroundColor: imageData.dominantColor },
-                title: `Dominant color: ${imageData.dominantColor}`
-              }
-            )
+          /* @__PURE__ */ jsxs5("div", { css: styles5.actions, children: [
+            /* @__PURE__ */ jsxs5("button", { css: styles5.actionBtn, onClick: handleRename, children: [
+              /* @__PURE__ */ jsx5("svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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__ */ jsxs5("button", { css: styles5.actionBtn, onClick: handleSync, children: [
+              /* @__PURE__ */ jsx5("svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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__ */ jsxs5("button", { css: styles5.actionBtn, onClick: handleRegenerate, children: [
+              /* @__PURE__ */ jsx5("svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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__ */ jsxs5("button", { css: [styles5.actionBtn, styles5.actionBtnDanger], onClick: () => setShowDeleteConfirm(true), children: [
+              /* @__PURE__ */ jsx5("svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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__ */ jsxs6("div", { css: styles6.actions, children: [
-        /* @__PURE__ */ jsx6("button", { css: styles6.actionBtn, children: "Rename" }),
-        /* @__PURE__ */ jsx6("button", { css: [styles6.actionBtn, styles6.actionBtnDanger], onClick: handleDeleteClick, children: "Delete" })
       ] })
     ] })
   ] });
 }
-function InfoRow({ label, value, truncate }) {
-  return /* @__PURE__ */ jsxs6("div", { css: styles6.row, children: [
-    /* @__PURE__ */ jsx6("span", { css: styles6.label, children: label }),
-    /* @__PURE__ */ jsx6("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`;
@@ -1704,11 +1641,13 @@ function formatFileSize3(bytes) {
 
 // src/components/StudioSettings.tsx
 import { useState as useState5 } from "react";
-import { css as css7 } from "@emotion/react";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
-var styles7 = {
-  btn: css7`
-    padding: 8px;
+import { css as css6 } from "@emotion/react";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+var btnHeight2 = "36px";
+var styles6 = {
+  btn: css6`
+    height: ${btnHeight2};
+    padding: 0 12px;
     background: ${colors.surface};
     border: 1px solid ${colors.border};
     border-radius: 6px;
@@ -1723,12 +1662,12 @@ var styles7 = {
       border-color: ${colors.borderHover};
     }
   `,
-  icon: css7`
-    width: 18px;
-    height: 18px;
+  icon: css6`
+    width: 16px;
+    height: 16px;
     color: ${colors.textSecondary};
   `,
-  overlay: css7`
+  overlay: css6`
     position: fixed;
     top: 0;
     right: 0;
@@ -1741,7 +1680,7 @@ var styles7 = {
     background-color: rgba(26, 31, 54, 0.4);
     backdrop-filter: blur(4px);
   `,
-  panel: css7`
+  panel: css6`
     ${baseReset}
     position: relative;
     background-color: ${colors.surface};
@@ -1751,20 +1690,20 @@ var styles7 = {
     max-width: 512px;
     padding: 24px;
   `,
-  header: css7`
+  header: css6`
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 24px;
   `,
-  title: css7`
+  title: css6`
     font-size: ${fontSize.xl};
     font-weight: 600;
     color: ${colors.text};
     margin: 0;
     letter-spacing: -0.02em;
   `,
-  closeBtn: css7`
+  closeBtn: css6`
     padding: 6px;
     background: ${colors.surface};
     border: 1px solid ${colors.border};
@@ -1780,23 +1719,23 @@ var styles7 = {
       border-color: ${colors.borderHover};
     }
   `,
-  sections: css7`
+  sections: css6`
     display: flex;
     flex-direction: column;
     gap: 24px;
   `,
-  sectionTitle: css7`
+  sectionTitle: css6`
     font-size: ${fontSize.base};
     font-weight: 600;
     color: ${colors.text};
     margin: 0 0 12px 0;
   `,
-  description: css7`
+  description: css6`
     font-size: ${fontSize.sm};
     color: ${colors.textSecondary};
     margin: 0 0 12px 0;
   `,
-  code: css7`
+  code: css6`
     background-color: ${colors.background};
     border-radius: 8px;
     padding: 12px;
@@ -1805,14 +1744,14 @@ var styles7 = {
     color: ${colors.textSecondary};
     border: 1px solid ${colors.border};
   `,
-  codeLine: css7`
+  codeLine: css6`
     margin: 0 0 4px 0;
     
     &:last-child {
       margin: 0;
     }
   `,
-  input: css7`
+  input: css6`
     width: 100%;
     padding: 10px 14px;
     border: 1px solid ${colors.border};
@@ -1832,19 +1771,19 @@ var styles7 = {
       color: ${colors.textMuted};
     }
   `,
-  grid: css7`
+  grid: css6`
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
   `,
-  label: css7`
+  label: css6`
     font-size: ${fontSize.xs};
     font-weight: 500;
     color: ${colors.textSecondary};
     display: block;
     margin-bottom: 6px;
   `,
-  footer: css7`
+  footer: css6`
     margin-top: 24px;
     padding-top: 20px;
     border-top: 1px solid ${colors.border};
@@ -1852,7 +1791,7 @@ var styles7 = {
     justify-content: flex-end;
     gap: 12px;
   `,
-  cancelBtn: css7`
+  cancelBtn: css6`
     padding: 10px 18px;
     font-size: ${fontSize.base};
     font-weight: 500;
@@ -1868,7 +1807,7 @@ var styles7 = {
       border-color: ${colors.borderHover};
     }
   `,
-  saveBtn: css7`
+  saveBtn: css6`
     padding: 10px 18px;
     font-size: ${fontSize.base};
     font-weight: 500;
@@ -1887,11 +1826,11 @@ var styles7 = {
 };
 function StudioSettings() {
   const [isOpen, setIsOpen] = useState5(false);
-  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    /* @__PURE__ */ jsx7("button", { css: styles7.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx6("button", { css: styles6.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ jsxs6(
       "svg",
       {
-        css: styles7.icon,
+        css: styles6.icon,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "none",
@@ -1900,94 +1839,96 @@ function StudioSettings() {
         strokeLinecap: "round",
         strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "3" }),
-          /* @__PURE__ */ jsx7("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" })
+          /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "3" }),
+          /* @__PURE__ */ jsx6("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" })
         ]
       }
     ) }),
-    isOpen && /* @__PURE__ */ jsx7(SettingsPanel, { onClose: () => setIsOpen(false) })
+    isOpen && /* @__PURE__ */ jsx6(SettingsPanel, { onClose: () => setIsOpen(false) })
   ] });
 }
 function SettingsPanel({ onClose }) {
-  return /* @__PURE__ */ jsx7("div", { css: styles7.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs7("div", { css: styles7.panel, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs7("div", { css: styles7.header, children: [
-      /* @__PURE__ */ jsx7("h2", { css: styles7.title, children: "Settings" }),
-      /* @__PURE__ */ jsx7("button", { css: styles7.closeBtn, onClick: onClose, children: /* @__PURE__ */ jsx7("svg", { css: styles7.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+  return /* @__PURE__ */ jsx6("div", { css: styles6.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs6("div", { css: styles6.panel, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs6("div", { css: styles6.header, children: [
+      /* @__PURE__ */ jsx6("h2", { css: styles6.title, children: "Settings" }),
+      /* @__PURE__ */ jsx6("button", { css: styles6.closeBtn, onClick: onClose, children: /* @__PURE__ */ jsx6("svg", { css: styles6.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { css: styles7.sections, children: [
-      /* @__PURE__ */ jsxs7("section", { children: [
-        /* @__PURE__ */ jsx7("h3", { css: styles7.sectionTitle, children: "Cloudflare R2" }),
-        /* @__PURE__ */ jsx7("p", { css: styles7.description, children: "Configure in .env.local file:" }),
-        /* @__PURE__ */ jsxs7("div", { css: styles7.code, children: [
-          /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
-          /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
-          /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
-          /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
-          /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL" })
+    /* @__PURE__ */ jsxs6("div", { css: styles6.sections, children: [
+      /* @__PURE__ */ jsxs6("section", { children: [
+        /* @__PURE__ */ jsx6("h3", { css: styles6.sectionTitle, children: "Cloudflare R2" }),
+        /* @__PURE__ */ jsx6("p", { css: styles6.description, children: "Configure in .env.local file:" }),
+        /* @__PURE__ */ jsxs6("div", { css: styles6.code, children: [
+          /* @__PURE__ */ jsx6("p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
+          /* @__PURE__ */ jsx6("p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
+          /* @__PURE__ */ jsx6("p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
+          /* @__PURE__ */ jsx6("p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
+          /* @__PURE__ */ jsx6("p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs7("section", { children: [
-        /* @__PURE__ */ jsx7("h3", { css: styles7.sectionTitle, children: "Custom CDN URL" }),
-        /* @__PURE__ */ jsx7("p", { css: styles7.description, children: "Override the default R2 URL with a custom domain:" }),
-        /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "text", placeholder: "https://cdn.yourdomain.com" })
+      /* @__PURE__ */ jsxs6("section", { children: [
+        /* @__PURE__ */ jsx6("h3", { css: styles6.sectionTitle, children: "Custom CDN URL" }),
+        /* @__PURE__ */ jsx6("p", { css: styles6.description, children: "Override the default R2 URL with a custom domain:" }),
+        /* @__PURE__ */ jsx6("input", { css: styles6.input, type: "text", placeholder: "https://cdn.yourdomain.com" })
       ] }),
-      /* @__PURE__ */ jsxs7("section", { children: [
-        /* @__PURE__ */ jsx7("h3", { css: styles7.sectionTitle, children: "Thumbnail Sizes" }),
-        /* @__PURE__ */ jsxs7("div", { css: styles7.grid, children: [
-          /* @__PURE__ */ jsxs7("div", { children: [
-            /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Small" }),
-            /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 300 })
+      /* @__PURE__ */ jsxs6("section", { children: [
+        /* @__PURE__ */ jsx6("h3", { css: styles6.sectionTitle, children: "Thumbnail Sizes" }),
+        /* @__PURE__ */ jsxs6("div", { css: styles6.grid, children: [
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx6("label", { css: styles6.label, children: "Small" }),
+            /* @__PURE__ */ jsx6("input", { css: styles6.input, type: "number", defaultValue: 300 })
           ] }),
-          /* @__PURE__ */ jsxs7("div", { children: [
-            /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Medium" }),
-            /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 700 })
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx6("label", { css: styles6.label, children: "Medium" }),
+            /* @__PURE__ */ jsx6("input", { css: styles6.input, type: "number", defaultValue: 700 })
           ] }),
-          /* @__PURE__ */ jsxs7("div", { children: [
-            /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Large" }),
-            /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 1400 })
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx6("label", { css: styles6.label, children: "Large" }),
+            /* @__PURE__ */ jsx6("input", { css: styles6.input, type: "number", defaultValue: 1400 })
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { css: styles7.footer, children: [
-      /* @__PURE__ */ jsx7("button", { css: styles7.cancelBtn, onClick: onClose, children: "Cancel" }),
-      /* @__PURE__ */ jsx7("button", { css: styles7.saveBtn, children: "Save Changes" })
+    /* @__PURE__ */ jsxs6("div", { css: styles6.footer, children: [
+      /* @__PURE__ */ jsx6("button", { css: styles6.cancelBtn, onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx6("button", { css: styles6.saveBtn, children: "Save Changes" })
     ] })
   ] }) });
 }
 
 // src/components/StudioUI.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
-var styles8 = {
-  container: css8`
+import { jsx as jsx7, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+var btnHeight3 = "36px";
+var styles7 = {
+  container: css7`
     ${baseReset}
     display: flex;
     flex-direction: column;
     height: 100%;
     background: ${colors.background};
   `,
-  header: css8`
+  header: css7`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 16px 24px;
+    padding: 12px 24px;
     background: ${colors.surface};
     border-bottom: 1px solid ${colors.border};
   `,
-  title: css8`
-    font-size: ${fontSize.xl};
+  title: css7`
+    font-size: ${fontSize.lg};
     font-weight: 600;
     color: ${colors.text};
     margin: 0;
     letter-spacing: -0.02em;
   `,
-  headerActions: css8`
+  headerActions: css7`
     display: flex;
     align-items: center;
     gap: 8px;
   `,
-  closeBtn: css8`
-    padding: 8px;
+  headerBtn: css7`
+    height: ${btnHeight3};
+    padding: 0 12px;
     background: ${colors.surface};
     border: 1px solid ${colors.border};
     border-radius: 6px;
@@ -2002,17 +1943,17 @@ var styles8 = {
       border-color: ${colors.borderHover};
     }
   `,
-  closeIcon: css8`
-    width: 18px;
-    height: 18px;
+  headerIcon: css7`
+    width: 16px;
+    height: 16px;
     color: ${colors.textSecondary};
   `,
-  content: css8`
+  content: css7`
     flex: 1;
     display: flex;
     overflow: hidden;
   `,
-  fileBrowser: css8`
+  fileBrowser: css7`
     flex: 1;
     min-width: 0;
     overflow: auto;
@@ -2024,6 +1965,7 @@ function StudioUI({ onClose }) {
   const [selectedItems, setSelectedItems] = useState6(/* @__PURE__ */ new Set());
   const [lastSelectedPath, setLastSelectedPath] = useState6(null);
   const [viewMode, setViewMode] = useState6("grid");
+  const [focusedItem, setFocusedItem] = useState6(null);
   const [meta, setMeta] = useState6(null);
   const [isLoading, setIsLoading] = useState6(false);
   const [refreshKey, setRefreshKey] = useState6(0);
@@ -2040,6 +1982,7 @@ function StudioUI({ onClose }) {
   const setCurrentPath = useCallback2((path) => {
     setCurrentPathInternal(path);
     setSelectedItems(/* @__PURE__ */ new Set());
+    setFocusedItem(null);
   }, []);
   const toggleSelection = useCallback2((path) => {
     setSelectedItems((prev) => {
@@ -2077,10 +2020,14 @@ function StudioUI({ onClose }) {
   const handleKeyDown = useCallback2(
     (e) => {
       if (e.key === "Escape") {
-        onClose();
+        if (focusedItem) {
+          setFocusedItem(null);
+        } else {
+          onClose();
+        }
       }
     },
-    [onClose]
+    [onClose, focusedItem]
   );
   useEffect3(() => {
     document.addEventListener("keydown", handleKeyDown);
@@ -2107,6 +2054,8 @@ function StudioUI({ onClose }) {
     lastSelectedPath,
     viewMode,
     setViewMode,
+    focusedItem,
+    setFocusedItem,
     meta,
     setMeta,
     isLoading,
@@ -2114,35 +2063,31 @@ function StudioUI({ onClose }) {
     refreshKey,
     triggerRefresh
   };
-  return /* @__PURE__ */ jsx8(StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8("div", { css: styles8.container, children: [
-    /* @__PURE__ */ jsxs8("div", { css: styles8.header, children: [
-      /* @__PURE__ */ jsx8("h1", { css: styles8.title, children: "Studio" }),
-      /* @__PURE__ */ jsxs8("div", { css: styles8.headerActions, children: [
-        /* @__PURE__ */ jsx8(StudioSettings, {}),
-        /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs7("div", { css: styles7.container, children: [
+    /* @__PURE__ */ jsxs7("div", { css: styles7.header, children: [
+      /* @__PURE__ */ jsx7("h1", { css: styles7.title, children: "Studio" }),
+      /* @__PURE__ */ jsxs7("div", { css: styles7.headerActions, children: [
+        /* @__PURE__ */ jsx7(StudioSettings, {}),
+        /* @__PURE__ */ jsx7(
           "button",
           {
-            css: styles8.closeBtn,
+            css: styles7.headerBtn,
             onClick: onClose,
             "aria-label": "Close Studio",
-            children: /* @__PURE__ */ jsx8(CloseIcon, {})
+            children: /* @__PURE__ */ jsx7(CloseIcon, {})
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx8(StudioToolbar, {}),
-    /* @__PURE__ */ jsx8(StudioBreadcrumb, {}),
-    /* @__PURE__ */ jsxs8("div", { css: styles8.content, children: [
-      /* @__PURE__ */ jsx8("div", { css: styles8.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ jsx8(StudioFileGrid, {}) : /* @__PURE__ */ jsx8(StudioFileList, {}) }),
-      /* @__PURE__ */ jsx8(StudioPreview, {})
-    ] })
+    /* @__PURE__ */ jsx7(StudioToolbar, {}),
+    /* @__PURE__ */ jsx7("div", { css: styles7.content, children: focusedItem ? /* @__PURE__ */ jsx7(StudioDetailView, {}) : /* @__PURE__ */ jsx7("div", { css: styles7.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ jsx7(StudioFileGrid, {}) : /* @__PURE__ */ jsx7(StudioFileList, {}) }) })
   ] }) });
 }
 function CloseIcon() {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs7(
     "svg",
     {
-      css: styles8.closeIcon,
+      css: styles7.headerIcon,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "none",
@@ -2151,8 +2096,8 @@ function CloseIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx8("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsx8("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        /* @__PURE__ */ jsx7("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx7("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
       ]
     }
   );
@@ -2162,4 +2107,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-3VFEM3VE.mjs.map
+//# sourceMappingURL=StudioUI-QPAHJJ64.mjs.map