@gallop.software/studio 0.1.21 → 0.1.23

package/dist/{StudioUI-QMBOCTJD.js → StudioUI-2BWLIO4W.js}

@@ -1,5 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
+
+
+
+
+var _chunkAY2DAS6Wjs = require('./chunk-AY2DAS6W.js');
+
 // src/components/StudioUI.tsx
 var _react = require('react');
 var _react3 = require('@emotion/react');
@@ -32,6 +38,9 @@ var defaultState = {
   viewMode: "grid",
   setViewMode: () => {
   },
+  focusedItem: null,
+  setFocusedItem: () => {
+  },
   meta: null,
   setMeta: () => {
   },
@@ -54,18 +63,6 @@ function useStudio() {
 // src/components/StudioModal.tsx
 
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-var colors = {
-  primary: "#635bff",
-  primaryHover: "#5851e5",
-  background: "#f6f9fc",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  danger: "#df1b41",
-  dangerHover: "#c41535"
-};
 var fadeIn = _react3.keyframes`
   from { opacity: 0; }
   to { opacity: 1; }
@@ -91,9 +88,11 @@ var styles = {
     justify-content: center;
     z-index: 10000;
     animation: ${fadeIn} 0.15s ease-out;
+    font-family: ${_chunkAY2DAS6Wjs.fontStack};
   `,
   modal: _react3.css`
-    background-color: ${colors.surface};
+    ${_chunkAY2DAS6Wjs.baseReset}
+    background-color: ${_chunkAY2DAS6Wjs.colors.surface};
     border-radius: 12px;
     box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
     max-width: 420px;
@@ -105,9 +104,9 @@ var styles = {
     padding: 24px 24px 0;
   `,
   title: _react3.css`
-    font-size: 17px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.lg};
     font-weight: 600;
-    color: ${colors.text};
+    color: ${_chunkAY2DAS6Wjs.colors.text};
     margin: 0;
     letter-spacing: -0.02em;
   `,
@@ -115,8 +114,8 @@ var styles = {
     padding: 12px 24px 24px;
   `,
   message: _react3.css`
-    font-size: 14px;
-    color: ${colors.textSecondary};
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
     margin: 0;
     line-height: 1.6;
   `,
@@ -125,12 +124,12 @@ var styles = {
     justify-content: flex-end;
     gap: 12px;
     padding: 16px 24px;
-    border-top: 1px solid ${colors.border};
-    background-color: ${colors.background};
+    border-top: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
+    background-color: ${_chunkAY2DAS6Wjs.colors.background};
   `,
   btn: _react3.css`
     padding: 10px 18px;
-    font-size: 14px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
     font-weight: 500;
     border-radius: 6px;
     cursor: pointer;
@@ -138,33 +137,33 @@ var styles = {
     letter-spacing: -0.01em;
   `,
   btnCancel: _react3.css`
-    background-color: ${colors.surface};
-    border: 1px solid ${colors.border};
-    color: ${colors.text};
+    background-color: ${_chunkAY2DAS6Wjs.colors.surface};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
+    color: ${_chunkAY2DAS6Wjs.colors.text};
     
     &:hover {
-      background-color: ${colors.surfaceHover};
-      border-color: #d0d5dd;
+      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
+      border-color: ${_chunkAY2DAS6Wjs.colors.borderHover};
     }
   `,
   btnConfirm: _react3.css`
-    background-color: ${colors.primary};
-    border: 1px solid ${colors.primary};
+    background-color: ${_chunkAY2DAS6Wjs.colors.primary};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.primary};
     color: white;
     
     &:hover {
-      background-color: ${colors.primaryHover};
-      border-color: ${colors.primaryHover};
+      background-color: ${_chunkAY2DAS6Wjs.colors.primaryHover};
+      border-color: ${_chunkAY2DAS6Wjs.colors.primaryHover};
     }
   `,
   btnDanger: _react3.css`
-    background-color: ${colors.danger};
-    border: 1px solid ${colors.danger};
+    background-color: ${_chunkAY2DAS6Wjs.colors.danger};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.danger};
     color: white;
     
     &:hover {
-      background-color: ${colors.dangerHover};
-      border-color: ${colors.dangerHover};
+      background-color: ${_chunkAY2DAS6Wjs.colors.dangerHover};
+      border-color: ${_chunkAY2DAS6Wjs.colors.dangerHover};
     }
   `
 };
@@ -208,19 +207,7 @@ function AlertModal({
 
 // src/components/StudioToolbar.tsx
 
-var colors2 = {
-  primary: "#635bff",
-  primaryHover: "#5851e5",
-  primaryLight: "#f0f0ff",
-  background: "#ffffff",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  danger: "#df1b41",
-  dangerLight: "#fff5f7"
-};
+var btnHeight = "36px";
 var spin = _react3.keyframes`
   to { transform: rotate(360deg); }
 `;
@@ -230,37 +217,39 @@ var styles2 = {
     align-items: center;
     justify-content: space-between;
     padding: 12px 24px;
-    background-color: ${colors2.background};
-    border-bottom: 1px solid ${colors2.border};
+    background-color: ${_chunkAY2DAS6Wjs.colors.surface};
+    border-bottom: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
   `,
   left: _react3.css`
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
   `,
   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: 6px 12px;
+    height: ${btnHeight};
+    padding: 0 14px;
     border-radius: 6px;
-    font-size: 13px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
     font-weight: 500;
-    background: ${colors2.surface};
-    border: 1px solid ${colors2.border};
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
     cursor: pointer;
     transition: all 0.15s ease;
-    color: ${colors2.text};
+    color: ${_chunkAY2DAS6Wjs.colors.text};
     letter-spacing: -0.01em;
     
     &:hover:not(:disabled) {
-      background-color: ${colors2.surfaceHover};
-      border-color: #d0d5dd;
+      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
+      border-color: ${_chunkAY2DAS6Wjs.colors.borderHover};
     }
     
     &:disabled {
@@ -268,53 +257,48 @@ var styles2 = {
       opacity: 0.5;
     }
   `,
+  btnIconOnly: _react3.css`
+    padding: 0 10px;
+  `,
   btnPrimary: _react3.css`
-    background: ${colors2.primary};
-    border-color: ${colors2.primary};
+    background: ${_chunkAY2DAS6Wjs.colors.primary};
+    border-color: ${_chunkAY2DAS6Wjs.colors.primary};
     color: white;
     
     &:hover:not(:disabled) {
-      background: ${colors2.primaryHover};
-      border-color: ${colors2.primaryHover};
+      background: ${_chunkAY2DAS6Wjs.colors.primaryHover};
+      border-color: ${_chunkAY2DAS6Wjs.colors.primaryHover};
     }
   `,
   btnDanger: _react3.css`
-    color: ${colors2.danger};
-    
-    &:hover:not(:disabled) {
-      background-color: ${colors2.dangerLight};
-      border-color: ${colors2.danger};
-    }
-  `,
-  btnGhost: _react3.css`
-    border-color: transparent;
-    background: transparent;
+    color: ${_chunkAY2DAS6Wjs.colors.danger};
     
     &:hover:not(:disabled) {
-      background-color: ${colors2.surfaceHover};
-      border-color: transparent;
+      background-color: ${_chunkAY2DAS6Wjs.colors.dangerLight};
+      border-color: ${_chunkAY2DAS6Wjs.colors.danger};
     }
   `,
   icon: _react3.css`
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
   `,
   iconSpin: _react3.css`
     animation: ${spin} 1s linear infinite;
   `,
   selectionCount: _react3.css`
-    font-size: 13px;
-    color: ${colors2.textSecondary};
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
     display: flex;
     align-items: center;
     gap: 8px;
+    margin-right: 8px;
   `,
   clearBtn: _react3.css`
-    color: ${colors2.primary};
+    color: ${_chunkAY2DAS6Wjs.colors.primary};
     background: none;
     border: none;
     cursor: pointer;
-    font-size: 13px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
     font-weight: 500;
     padding: 0;
     
@@ -324,41 +308,43 @@ var styles2 = {
   `,
   divider: _react3.css`
     width: 1px;
-    height: 20px;
-    background: ${colors2.border};
+    height: 24px;
+    background: ${_chunkAY2DAS6Wjs.colors.border};
     margin: 0 4px;
   `,
   viewToggle: _react3.css`
     display: flex;
     align-items: center;
-    background-color: ${colors2.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: ${colors2.textSecondary};
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
     transition: all 0.15s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     
     &:hover {
-      color: ${colors2.text};
+      color: ${_chunkAY2DAS6Wjs.colors.text};
+      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
     }
   `,
   viewBtnActive: _react3.css`
-    background-color: ${colors2.surface};
-    color: ${colors2.text};
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    background-color: ${_chunkAY2DAS6Wjs.colors.background};
+    color: ${_chunkAY2DAS6Wjs.colors.text};
   `
 };
 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);
@@ -456,6 +442,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,
@@ -505,7 +494,7 @@ function StudioToolbar() {
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "button",
           {
-            css: [styles2.btn, styles2.btnGhost],
+            css: styles2.btn,
             onClick: handleReprocess,
             disabled: !hasSelection,
             children: [
@@ -517,7 +506,7 @@ function StudioToolbar() {
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "button",
           {
-            css: [styles2.btn, styles2.btnGhost, styles2.btnDanger],
+            css: [styles2.btn, styles2.btnDanger],
             onClick: handleDeleteClick,
             disabled: !hasSelection,
             children: [
@@ -529,7 +518,7 @@ function StudioToolbar() {
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "button",
           {
-            css: [styles2.btn, styles2.btnGhost],
+            css: styles2.btn,
             onClick: handleSyncCdn,
             disabled: !hasSelection,
             children: [
@@ -538,7 +527,7 @@ function StudioToolbar() {
             ]
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: [styles2.btn, styles2.btnGhost], onClick: handleScan, children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles2.btn, onClick: handleScan, children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScanIcon, {}),
           "Scan"
         ] })
@@ -552,7 +541,7 @@ function StudioToolbar() {
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "button",
           {
-            css: [styles2.btn, styles2.btnGhost],
+            css: [styles2.btn, styles2.btnIconOnly],
             onClick: handleRefresh,
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RefreshIcon, { spinning: refreshing })
           }
@@ -603,136 +592,14 @@ 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 colors3 = {
-  primary: "#635bff",
-  background: "#ffffff",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  borderLight: "#eef1f6",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  textMuted: "#8792a2"
-};
-var styles3 = {
-  container: _react3.css`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 24px;
-    background-color: ${colors3.surface};
-    border-bottom: 1px solid ${colors3.borderLight};
-  `,
-  backBtn: _react3.css`
-    padding: 6px;
-    background: none;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    &:hover {
-      background-color: ${colors3.surfaceHover};
-    }
-  `,
-  backIcon: _react3.css`
-    width: 16px;
-    height: 16px;
-    color: ${colors3.textSecondary};
-  `,
-  nav: _react3.css`
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    font-size: 13px;
-  `,
-  item: _react3.css`
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  `,
-  separator: _react3.css`
-    color: ${colors3.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: 13px;
-    letter-spacing: -0.01em;
-    
-    &:hover {
-      background-color: ${colors3.surfaceHover};
-    }
-  `,
-  btnActive: _react3.css`
-    color: ${colors3.text};
-    font-weight: 600;
-  `,
-  btnInactive: _react3.css`
-    color: ${colors3.textSecondary};
-    
-    &:hover {
-      color: ${colors3.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)) })
-  ] });
-}
-
 // src/components/StudioFileGrid.tsx
 
 
 
-var colors4 = {
-  primary: "#635bff",
-  primaryHover: "#5851e5",
-  primaryLight: "#f0f0ff",
-  background: "#f6f9fc",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  borderLight: "#eef1f6",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  textMuted: "#8792a2",
-  success: "#0d7d4d",
-  successLight: "#e6f7ef"
-};
 var spin2 = _react3.keyframes`
   to { transform: rotate(360deg); }
 `;
-var styles4 = {
+var styles3 = {
   loading: _react3.css`
     display: flex;
     align-items: center;
@@ -743,8 +610,8 @@ var styles4 = {
     width: 32px;
     height: 32px;
     border-radius: 50%;
-    border: 3px solid ${colors4.border};
-    border-top-color: ${colors4.primary};
+    border: 3px solid ${_chunkAY2DAS6Wjs.colors.border};
+    border-top-color: ${_chunkAY2DAS6Wjs.colors.primary};
     animation: ${spin2} 0.8s linear infinite;
   `,
   empty: _react3.css`
@@ -753,7 +620,7 @@ var styles4 = {
     align-items: center;
     justify-content: center;
     height: 256px;
-    color: ${colors4.textSecondary};
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
   `,
   emptyIcon: _react3.css`
     width: 48px;
@@ -762,12 +629,12 @@ var styles4 = {
     opacity: 0.5;
   `,
   emptyText: _react3.css`
-    font-size: 14px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
     margin: 0 0 4px 0;
     
     &:last-child {
-      color: ${colors4.textMuted};
-      font-size: 13px;
+      color: ${_chunkAY2DAS6Wjs.colors.textMuted};
+      font-size: ${_chunkAY2DAS6Wjs.fontSize.sm};
     }
   `,
   grid: _react3.css`
@@ -783,11 +650,11 @@ var styles4 = {
   item: _react3.css`
     position: relative;
     border-radius: 8px;
-    border: 1px solid ${colors4.border};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
     overflow: hidden;
     cursor: pointer;
     transition: all 0.15s ease;
-    background-color: ${colors4.surface};
+    background-color: ${_chunkAY2DAS6Wjs.colors.surface};
     user-select: none;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
     
@@ -797,11 +664,18 @@ var styles4 = {
     }
   `,
   itemSelected: _react3.css`
-    border-color: ${colors4.primary};
-    box-shadow: 0 0 0 1px ${colors4.primary};
+    border-color: ${_chunkAY2DAS6Wjs.colors.primary};
+    box-shadow: 0 0 0 1px ${_chunkAY2DAS6Wjs.colors.primary};
+    
+    &:hover {
+      border-color: ${_chunkAY2DAS6Wjs.colors.primary};
+    }
+  `,
+  parentItem: _react3.css`
+    cursor: pointer;
     
     &:hover {
-      border-color: ${colors4.primary};
+      border-color: ${_chunkAY2DAS6Wjs.colors.primary};
     }
   `,
   checkboxWrapper: _react3.css`
@@ -815,7 +689,7 @@ var styles4 = {
   checkbox: _react3.css`
     width: 16px;
     height: 16px;
-    accent-color: ${colors4.primary};
+    accent-color: ${_chunkAY2DAS6Wjs.colors.primary};
     cursor: pointer;
   `,
   cdnBadge: _react3.css`
@@ -823,8 +697,8 @@ var styles4 = {
     top: 8px;
     right: 8px;
     z-index: 10;
-    background-color: ${colors4.successLight};
-    color: ${colors4.success};
+    background-color: ${_chunkAY2DAS6Wjs.colors.successLight};
+    color: ${_chunkAY2DAS6Wjs.colors.success};
     font-size: 11px;
     font-weight: 500;
     padding: 2px 8px;
@@ -836,17 +710,22 @@ var styles4 = {
     align-items: center;
     justify-content: center;
     padding: 16px;
-    background: ${colors4.background};
+    background: ${_chunkAY2DAS6Wjs.colors.background};
   `,
   folderIcon: _react3.css`
     width: 56px;
     height: 56px;
     color: #f5a623;
   `,
+  parentIcon: _react3.css`
+    width: 56px;
+    height: 56px;
+    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
+  `,
   fileIcon: _react3.css`
     width: 40px;
     height: 40px;
-    color: ${colors4.textMuted};
+    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
   `,
   image: _react3.css`
     max-width: 100%;
@@ -856,8 +735,8 @@ var styles4 = {
   `,
   label: _react3.css`
     padding: 10px 12px;
-    background-color: ${colors4.surface};
-    border-top: 1px solid ${colors4.borderLight};
+    background-color: ${_chunkAY2DAS6Wjs.colors.surface};
+    border-top: 1px solid ${_chunkAY2DAS6Wjs.colors.borderLight};
   `,
   labelRow: _react3.css`
     display: flex;
@@ -870,9 +749,9 @@ var styles4 = {
     min-width: 0;
   `,
   name: _react3.css`
-    font-size: 13px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.sm};
     font-weight: 500;
-    color: ${colors4.text};
+    color: ${_chunkAY2DAS6Wjs.colors.text};
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -880,24 +759,28 @@ var styles4 = {
     letter-spacing: -0.01em;
   `,
   size: _react3.css`
-    font-size: 12px;
-    color: ${colors4.textMuted};
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.xs};
+    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
     margin: 2px 0 0 0;
   `,
   openBtn: _react3.css`
     flex-shrink: 0;
-    font-size: 12px;
+    height: 28px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.xs};
     font-weight: 500;
-    color: ${colors4.primary};
-    background: none;
-    border: none;
-    padding: 4px 8px;
+    color: ${_chunkAY2DAS6Wjs.colors.primary};
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
+    padding: 0 10px;
     cursor: pointer;
     border-radius: 4px;
-    transition: background-color 0.15s ease;
+    transition: all 0.15s ease;
+    display: inline-flex;
+    align-items: center;
     
     &:hover {
-      background-color: ${colors4.primaryLight};
+      background-color: ${_chunkAY2DAS6Wjs.colors.primaryLight};
+      border-color: ${_chunkAY2DAS6Wjs.colors.primary};
     }
   `,
   selectAllRow: _react3.css`
@@ -905,31 +788,31 @@ var styles4 = {
     align-items: center;
     margin-bottom: 16px;
     padding: 12px 16px;
-    background: ${colors4.surface};
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
     border-radius: 8px;
-    border: 1px solid ${colors4.border};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
   `,
   selectAllLabel: _react3.css`
     display: flex;
     align-items: center;
     gap: 10px;
-    font-size: 13px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
     font-weight: 500;
-    color: ${colors4.textSecondary};
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
     cursor: pointer;
     
     &:hover {
-      color: ${colors4.text};
+      color: ${_chunkAY2DAS6Wjs.colors.text};
     }
   `,
   selectAllCheckbox: _react3.css`
     width: 16px;
     height: 16px;
-    accent-color: ${colors4.primary};
+    accent-color: ${_chunkAY2DAS6Wjs.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] = _react.useState.call(void 0, []);
   const [loading, setLoading] = _react.useState.call(void 0, true);
   _react.useEffect.call(void 0, () => {
@@ -949,13 +832,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) => {
@@ -970,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));
@@ -985,12 +871,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;
@@ -1002,16 +888,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 }) {
@@ -1019,48 +921,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();
@@ -1083,23 +985,10 @@ function formatFileSize(bytes) {
 
 
 
-var colors5 = {
-  primary: "#635bff",
-  primaryLight: "#f0f0ff",
-  background: "#f6f9fc",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  borderLight: "#eef1f6",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  textMuted: "#8792a2",
-  success: "#0d7d4d"
-};
 var spin3 = _react3.keyframes`
   to { transform: rotate(360deg); }
 `;
-var styles5 = {
+var styles4 = {
   loading: _react3.css`
     display: flex;
     align-items: center;
@@ -1110,8 +999,8 @@ var styles5 = {
     width: 32px;
     height: 32px;
     border-radius: 50%;
-    border: 3px solid ${colors5.border};
-    border-top-color: ${colors5.primary};
+    border: 3px solid ${_chunkAY2DAS6Wjs.colors.border};
+    border-top-color: ${_chunkAY2DAS6Wjs.colors.primary};
     animation: ${spin3} 0.8s linear infinite;
   `,
   empty: _react3.css`
@@ -1120,12 +1009,12 @@ var styles5 = {
     align-items: center;
     justify-content: center;
     height: 256px;
-    color: ${colors5.textSecondary};
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
   `,
   tableWrapper: _react3.css`
-    background: ${colors5.surface};
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
     border-radius: 8px;
-    border: 1px solid ${colors5.border};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
     overflow: hidden;
   `,
   table: _react3.css`
@@ -1135,13 +1024,13 @@ var styles5 = {
   th: _react3.css`
     text-align: left;
     font-size: 11px;
-    color: ${colors5.textMuted};
+    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
     text-transform: uppercase;
     letter-spacing: 0.05em;
     padding: 12px 16px;
     font-weight: 600;
-    background: ${colors5.background};
-    border-bottom: 1px solid ${colors5.border};
+    background: ${_chunkAY2DAS6Wjs.colors.background};
+    border-bottom: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
   `,
   thCheckbox: _react3.css`
     width: 48px;
@@ -1162,18 +1051,25 @@ var styles5 = {
     user-select: none;
     
     &:hover {
-      background-color: ${colors5.surfaceHover};
+      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
     }
     
     &:not(:last-child) td {
-      border-bottom: 1px solid ${colors5.borderLight};
+      border-bottom: 1px solid ${_chunkAY2DAS6Wjs.colors.borderLight};
     }
   `,
   rowSelected: _react3.css`
-    background-color: ${colors5.primaryLight};
+    background-color: ${_chunkAY2DAS6Wjs.colors.primaryLight};
     
     &:hover {
-      background-color: ${colors5.primaryLight};
+      background-color: ${_chunkAY2DAS6Wjs.colors.primaryLight};
+    }
+  `,
+  parentRow: _react3.css`
+    cursor: pointer;
+    
+    &:hover {
+      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
     }
   `,
   td: _react3.css`
@@ -1186,7 +1082,7 @@ var styles5 = {
   checkbox: _react3.css`
     width: 16px;
     height: 16px;
-    accent-color: ${colors5.primary};
+    accent-color: ${_chunkAY2DAS6Wjs.colors.primary};
     cursor: pointer;
   `,
   nameCell: _react3.css`
@@ -1200,10 +1096,16 @@ 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;
-    color: ${colors5.textMuted};
+    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
     flex-shrink: 0;
   `,
   thumbnail: _react3.css`
@@ -1212,52 +1114,57 @@ var styles5 = {
     object-fit: cover;
     border-radius: 6px;
     flex-shrink: 0;
-    border: 1px solid ${colors5.borderLight};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.borderLight};
   `,
   name: _react3.css`
-    font-size: 14px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
     font-weight: 500;
-    color: ${colors5.text};
+    color: ${_chunkAY2DAS6Wjs.colors.text};
     letter-spacing: -0.01em;
   `,
   meta: _react3.css`
-    font-size: 13px;
-    color: ${colors5.textSecondary};
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.sm};
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
   `,
   cdnBadge: _react3.css`
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    font-size: 12px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.xs};
     font-weight: 500;
-    color: ${colors5.success};
+    color: ${_chunkAY2DAS6Wjs.colors.success};
   `,
   cdnIcon: _react3.css`
     width: 12px;
     height: 12px;
   `,
   cdnEmpty: _react3.css`
-    font-size: 13px;
-    color: ${colors5.textMuted};
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.sm};
+    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
   `,
   openBtn: _react3.css`
-    font-size: 12px;
+    height: 28px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.xs};
     font-weight: 500;
-    color: ${colors5.primary};
-    background: none;
-    border: none;
-    padding: 4px 10px;
+    color: ${_chunkAY2DAS6Wjs.colors.primary};
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
+    padding: 0 12px;
     cursor: pointer;
     border-radius: 4px;
-    transition: background-color 0.15s ease;
+    transition: all 0.15s ease;
+    display: inline-flex;
+    align-items: center;
+    margin-left: auto;
     
     &:hover {
-      background-color: ${colors5.primaryLight};
+      background-color: ${_chunkAY2DAS6Wjs.colors.primaryLight};
+      border-color: ${_chunkAY2DAS6Wjs.colors.primary};
     }
   `
 };
 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, () => {
@@ -1277,10 +1184,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;
@@ -1294,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));
@@ -1308,13 +1218,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;
@@ -1322,54 +1232,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();
@@ -1378,12 +1300,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: "--" }) })
       ]
     }
   );
@@ -1394,7 +1316,7 @@ function formatFileSize2(bytes) {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
-// src/components/StudioPreview.tsx
+// src/components/StudioDetailView.tsx
 
 
 
@@ -1408,208 +1330,203 @@ function isVideoFile(filename) {
   const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
   return VIDEO_EXTENSIONS.includes(ext);
 }
-var colors6 = {
-  primary: "#635bff",
-  primaryHover: "#5851e5",
-  primaryLight: "#f0f0ff",
-  background: "#f6f9fc",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  borderLight: "#eef1f6",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  textMuted: "#8792a2",
-  success: "#0d7d4d",
-  successLight: "#e6f7ef",
-  danger: "#df1b41",
-  dangerLight: "#fff5f7"
-};
-var styles6 = {
-  panel: _react3.css`
-    width: 320px;
-    border-left: 1px solid ${colors6.border};
-    background-color: ${colors6.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: 13px;
-    font-weight: 600;
-    color: ${colors6.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: ${colors6.background};
+  image: _react3.css`
+    max-width: 100%;
+    max-height: calc(100vh - 200px);
+    object-fit: contain;
     border-radius: 8px;
-    border: 1px solid ${colors6.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: 13px;
+    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: ${colors6.textSecondary};
+  fileIcon: _react3.css`
+    width: 80px;
+    height: 80px;
+    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
+    margin-bottom: 16px;
   `,
-  value: _react3.css`
-    color: ${colors6.text};
-    font-weight: 500;
+  fileName: _react3.css`
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.lg};
+    font-weight: 600;
+    color: ${_chunkAY2DAS6Wjs.colors.text};
+    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 ${colors6.borderLight};
   `,
-  sectionTitle: _react3.css`
-    font-size: 11px;
-    font-weight: 600;
-    color: ${colors6.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: 13px;
-    color: ${colors6.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: 13px;
-    font-weight: 500;
-    color: ${colors6.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 ${colors6.border};
+  closeIcon: _react3.css`
+    width: 16px;
+    height: 16px;
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
   `,
-  emptyState: _react3.css`
+  sidebarContent: _react3.css`
+    flex: 1;
+    padding: 20px;
+    overflow: auto;
+  `,
+  info: _react3.css`
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 200px;
-    text-align: center;
-  `,
-  emptyText: _react3.css`
-    font-size: 13px;
-    color: ${colors6.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: ${colors6.background};
-    border-radius: 6px;
+    justify-content: space-between;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.sm};
   `,
-  fileIcon: _react3.css`
-    width: 56px;
-    height: 56px;
-    color: ${colors6.textMuted};
+  infoLabel: _react3.css`
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
   `,
-  folderIcon: _react3.css`
-    width: 56px;
-    height: 56px;
-    color: #f5a623;
-  `,
-  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 ${colors6.border};
     display: flex;
     flex-direction: column;
     gap: 8px;
   `,
   actionBtn: _react3.css`
+    display: flex;
+    align-items: center;
+    gap: 10px;
     width: 100%;
-    padding: 10px 14px;
-    font-size: 13px;
+    padding: 12px 14px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
     font-weight: 500;
-    background-color: ${colors6.surface};
-    border: 1px solid ${colors6.border};
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.15s ease;
-    color: ${colors6.text};
+    color: ${_chunkAY2DAS6Wjs.colors.text};
+    text-align: left;
     
     &:hover {
-      background-color: ${colors6.surfaceHover};
-      border-color: #d0d5dd;
+      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
+      border-color: ${_chunkAY2DAS6Wjs.colors.borderHover};
     }
   `,
   actionBtnDanger: _react3.css`
-    color: ${colors6.danger};
+    color: ${_chunkAY2DAS6Wjs.colors.danger};
     
     &:hover {
-      background-color: ${colors6.dangerLight};
-      border-color: ${colors6.danger};
+      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 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({
@@ -1625,15 +1542,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)
       }
     ),
@@ -1644,136 +1579,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`;
@@ -1784,23 +1643,29 @@ function formatFileSize3(bytes) {
 
 
 
-var styles7 = {
+var btnHeight2 = "36px";
+var styles6 = {
   btn: _react3.css`
-    padding: 8px;
-    background: none;
-    border: none;
-    border-radius: 8px;
+    height: ${btnHeight2};
+    padding: 0 12px;
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
+    border-radius: 6px;
     cursor: pointer;
-    transition: background-color 0.15s;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     
     &:hover {
-      background-color: #f3f4f6;
+      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
+      border-color: ${_chunkAY2DAS6Wjs.colors.borderHover};
     }
   `,
   icon: _react3.css`
-    width: 20px;
-    height: 20px;
-    color: #6b7280;
+    width: 16px;
+    height: 16px;
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
   `,
   overlay: _react3.css`
     position: fixed;
@@ -1812,20 +1677,15 @@ var styles7 = {
     display: flex;
     align-items: center;
     justify-content: center;
-  `,
-  backdrop: _react3.css`
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgba(26, 31, 54, 0.4);
+    backdrop-filter: blur(4px);
   `,
   panel: _react3.css`
+    ${_chunkAY2DAS6Wjs.baseReset}
     position: relative;
-    background-color: white;
+    background-color: ${_chunkAY2DAS6Wjs.colors.surface};
     border-radius: 12px;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
     width: 100%;
     max-width: 512px;
     padding: 24px;
@@ -1837,19 +1697,26 @@ var styles7 = {
     margin-bottom: 24px;
   `,
   title: _react3.css`
-    font-size: 18px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.xl};
     font-weight: 600;
+    color: ${_chunkAY2DAS6Wjs.colors.text};
     margin: 0;
+    letter-spacing: -0.02em;
   `,
   closeBtn: _react3.css`
-    padding: 4px;
-    background: none;
-    border: none;
-    border-radius: 8px;
+    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: #f3f4f6;
+      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
+      border-color: ${_chunkAY2DAS6Wjs.colors.borderHover};
     }
   `,
   sections: _react3.css`
@@ -1858,23 +1725,24 @@ var styles7 = {
     gap: 24px;
   `,
   sectionTitle: _react3.css`
-    font-size: 14px;
-    font-weight: 500;
-    color: #111827;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
+    font-weight: 600;
+    color: ${_chunkAY2DAS6Wjs.colors.text};
     margin: 0 0 12px 0;
   `,
   description: _react3.css`
-    font-size: 12px;
-    color: #6b7280;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.sm};
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
     margin: 0 0 12px 0;
   `,
   code: _react3.css`
-    background-color: #f9fafb;
+    background-color: ${_chunkAY2DAS6Wjs.colors.background};
     border-radius: 8px;
     padding: 12px;
-    font-family: monospace;
-    font-size: 12px;
-    color: #4b5563;
+    font-family: 'SF Mono', Monaco, Consolas, monospace;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.xs};
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
   `,
   codeLine: _react3.css`
     margin: 0 0 4px 0;
@@ -1885,14 +1753,22 @@ var styles7 = {
   `,
   input: _react3.css`
     width: 100%;
-    padding: 8px 12px;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    font-size: 14px;
+    padding: 10px 14px;
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
+    border-radius: 6px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
+    color: ${_chunkAY2DAS6Wjs.colors.text};
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
+    transition: all 0.15s ease;
     
     &:focus {
       outline: none;
-      box-shadow: 0 0 0 2px #a855f7;
+      border-color: ${_chunkAY2DAS6Wjs.colors.primary};
+      box-shadow: 0 0 0 3px ${_chunkAY2DAS6Wjs.colors.primaryLight};
+    }
+    
+    &::placeholder {
+      color: ${_chunkAY2DAS6Wjs.colors.textMuted};
     }
   `,
   grid: _react3.css`
@@ -1901,51 +1777,60 @@ var styles7 = {
     gap: 12px;
   `,
   label: _react3.css`
-    font-size: 12px;
-    color: #6b7280;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.xs};
+    font-weight: 500;
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
     display: block;
-    margin-bottom: 4px;
+    margin-bottom: 6px;
   `,
   footer: _react3.css`
     margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
     display: flex;
     justify-content: flex-end;
     gap: 12px;
   `,
   cancelBtn: _react3.css`
-    padding: 8px 16px;
-    font-size: 14px;
-    color: #4b5563;
-    background: none;
-    border: none;
-    border-radius: 8px;
+    padding: 10px 18px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
+    font-weight: 500;
+    color: ${_chunkAY2DAS6Wjs.colors.text};
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
+    border-radius: 6px;
     cursor: pointer;
+    transition: all 0.15s ease;
     
     &:hover {
-      background-color: #f3f4f6;
+      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
+      border-color: ${_chunkAY2DAS6Wjs.colors.borderHover};
     }
   `,
   saveBtn: _react3.css`
-    padding: 8px 16px;
-    font-size: 14px;
+    padding: 10px 18px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.base};
+    font-weight: 500;
     color: white;
-    background-color: #9333ea;
-    border: none;
-    border-radius: 8px;
+    background-color: ${_chunkAY2DAS6Wjs.colors.primary};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.primary};
+    border-radius: 6px;
     cursor: pointer;
+    transition: all 0.15s ease;
     
     &:hover {
-      background-color: #7c3aed;
+      background-color: ${_chunkAY2DAS6Wjs.colors.primaryHover};
+      border-color: ${_chunkAY2DAS6Wjs.colors.primaryHover};
     }
   `
 };
 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",
@@ -1963,92 +1848,76 @@ function StudioSettings() {
   ] });
 }
 function SettingsPanel({ onClose }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.overlay, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.backdrop, onClick: onClose }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.panel, 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: styles6.sections, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { children: [
+        /* @__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, "div", { css: styles7.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.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.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.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.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.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.jsxs.call(void 0, "section", { children: [
+        /* @__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: 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: 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: 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: 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 colors7 = {
-  primary: "#635bff",
-  primaryHover: "#5851e5",
-  background: "#f6f9fc",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  borderLight: "#eef1f6",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  textMuted: "#8792a2"
-};
-var styles8 = {
+var btnHeight3 = "36px";
+var styles7 = {
   container: _react3.css`
+    ${_chunkAY2DAS6Wjs.baseReset}
     display: flex;
     flex-direction: column;
     height: 100%;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;
-    background: ${colors7.background};
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+    background: ${_chunkAY2DAS6Wjs.colors.background};
   `,
   header: _react3.css`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 16px 24px;
-    background: ${colors7.surface};
-    border-bottom: 1px solid ${colors7.border};
+    padding: 12px 24px;
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
+    border-bottom: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
   `,
   title: _react3.css`
-    font-size: 17px;
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.lg};
     font-weight: 600;
-    color: ${colors7.text};
+    color: ${_chunkAY2DAS6Wjs.colors.text};
     margin: 0;
     letter-spacing: -0.02em;
   `,
@@ -2057,10 +1926,11 @@ var styles8 = {
     align-items: center;
     gap: 8px;
   `,
-  closeBtn: _react3.css`
-    padding: 8px;
-    background: none;
-    border: none;
+  headerBtn: _react3.css`
+    height: ${btnHeight3};
+    padding: 0 12px;
+    background: ${_chunkAY2DAS6Wjs.colors.surface};
+    border: 1px solid ${_chunkAY2DAS6Wjs.colors.border};
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.15s ease;
@@ -2069,13 +1939,14 @@ var styles8 = {
     justify-content: center;
     
     &:hover {
-      background-color: ${colors7.surfaceHover};
+      background-color: ${_chunkAY2DAS6Wjs.colors.surfaceHover};
+      border-color: ${_chunkAY2DAS6Wjs.colors.borderHover};
     }
   `,
-  closeIcon: _react3.css`
-    width: 18px;
-    height: 18px;
-    color: ${colors7.textSecondary};
+  headerIcon: _react3.css`
+    width: 16px;
+    height: 16px;
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
   `,
   content: _react3.css`
     flex: 1;
@@ -2094,6 +1965,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);
@@ -2110,6 +1982,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) => {
@@ -2147,10 +2020,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);
@@ -2177,6 +2054,8 @@ function StudioUI({ onClose }) {
     lastSelectedPath,
     viewMode,
     setViewMode,
+    focusedItem,
+    setFocusedItem,
     meta,
     setMeta,
     isLoading,
@@ -2184,15 +2063,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, {})
@@ -2201,18 +2080,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",
@@ -2232,4 +2107,4 @@ var StudioUI_default = StudioUI;
 
 
 exports.StudioUI = StudioUI; exports.default = StudioUI_default;
-//# sourceMappingURL=StudioUI-QMBOCTJD.js.map
+//# sourceMappingURL=StudioUI-2BWLIO4W.js.map