@gallop.software/studio 0.1.64 → 0.1.66

package/dist/{StudioUI-ILJIWA7T.js → StudioUI-RVVJ4TYS.js}

@@ -447,22 +447,54 @@ var styles2 = {
   folderList: _react3.css`
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 0;
   `,
   folderItem: _react3.css`
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 10px 12px;
+    padding: 8px 12px;
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.15s ease;
     border: 1px solid transparent;
+    position: relative;
     
     &:hover {
       background-color: ${_chunkUFCWGUAGjs.colors.surfaceHover};
     }
   `,
+  treeIndent: _react3.css`
+    display: flex;
+    align-items: center;
+    height: 100%;
+  `,
+  treeLine: _react3.css`
+    width: 16px;
+    height: 100%;
+    position: relative;
+    flex-shrink: 0;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      left: 8px;
+      top: 0;
+      bottom: 50%;
+      width: 0;
+      border-left: 1px dashed ${_chunkUFCWGUAGjs.colors.border};
+    }
+    
+    &::after {
+      content: '';
+      position: absolute;
+      left: 8px;
+      top: 50%;
+      width: 8px;
+      height: 0;
+      border-top: 1px dashed ${_chunkUFCWGUAGjs.colors.border};
+    }
+  `,
   folderItemSelected: _react3.css`
     background-color: ${_chunkUFCWGUAGjs.colors.primaryLight};
     border-color: ${_chunkUFCWGUAGjs.colors.primary};
@@ -607,9 +639,10 @@ function StudioFolderPicker({ selectedItems, currentPath, onMove, onCancel }) {
               selectedFolder === folder.path && styles2.folderItemSelected,
               disabled && styles2.folderItemDisabled
             ],
-            style: { paddingLeft: 12 + folder.depth * 16 },
+            style: { paddingLeft: 12 },
             onClick: () => !disabled && setSelectedFolder(folder.path),
             children: [
+              folder.depth > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles2.treeIndent, children: Array.from({ length: folder.depth }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles2.treeLine }, i)) }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles2.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" }) }),
               /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles2.folderName, children: [
                 folder.name,
@@ -861,7 +894,7 @@ function StudioToolbar() {
   const [showMoveModal, setShowMoveModal] = _react.useState.call(void 0, false);
   const isInImagesFolder = currentPath === "public/images" || currentPath.startsWith("public/images/");
   const handleUpload = _react.useCallback.call(void 0, () => {
-    _optionalChain([fileInputRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.click, 'call', _3 => _3()]);
+    _optionalChain([fileInputRef, 'access', _2 => _2.current, 'optionalAccess', _3 => _3.click, 'call', _4 => _4()]);
   }, []);
   const handleRefresh = _react.useCallback.call(void 0, () => {
     setRefreshing(true);
@@ -917,7 +950,7 @@ function StudioToolbar() {
       const selectedPaths = Array.from(selectedItems);
       const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"];
       const selectedImagePaths = selectedPaths.filter((p) => {
-        const ext = _optionalChain([p, 'access', _4 => _4.split, 'call', _5 => _5("."), 'access', _6 => _6.pop, 'call', _7 => _7(), 'optionalAccess', _8 => _8.toLowerCase, 'call', _9 => _9()]) || "";
+        const ext = _optionalChain([p, 'access', _5 => _5.split, 'call', _6 => _6("."), 'access', _7 => _7.pop, 'call', _8 => _8(), 'optionalAccess', _9 => _9.toLowerCase, 'call', _10 => _10()]) || "";
         return imageExtensions.includes(ext);
       });
       const selectedFolders = selectedPaths.filter((p) => !p.includes(".") || p.endsWith("/"));
@@ -1078,12 +1111,12 @@ function StudioToolbar() {
         const data = await response.json();
         if (response.ok) {
           setProgressState({
-            current: _optionalChain([data, 'access', _10 => _10.processed, 'optionalAccess', _11 => _11.length]) || 0,
-            total: _optionalChain([data, 'access', _12 => _12.processed, 'optionalAccess', _13 => _13.length]) || 0,
+            current: _optionalChain([data, 'access', _11 => _11.processed, 'optionalAccess', _12 => _12.length]) || 0,
+            total: _optionalChain([data, 'access', _13 => _13.processed, 'optionalAccess', _14 => _14.length]) || 0,
             percent: 100,
             status: "complete",
-            processed: _optionalChain([data, 'access', _14 => _14.processed, 'optionalAccess', _15 => _15.length]) || 0,
-            errors: _optionalChain([data, 'access', _16 => _16.errors, 'optionalAccess', _17 => _17.length]) || 0
+            processed: _optionalChain([data, 'access', _15 => _15.processed, 'optionalAccess', _16 => _16.length]) || 0,
+            errors: _optionalChain([data, 'access', _17 => _17.errors, 'optionalAccess', _18 => _18.length]) || 0
           });
           clearSelection();
           triggerRefresh();
@@ -2955,7 +2988,7 @@ function StudioDetailView() {
       if (!response.ok) {
         throw new Error("Processing failed");
       }
-      const reader = _optionalChain([response, 'access', _18 => _18.body, 'optionalAccess', _19 => _19.getReader, 'call', _20 => _20()]);
+      const reader = _optionalChain([response, 'access', _19 => _19.body, 'optionalAccess', _20 => _20.getReader, 'call', _21 => _21()]);
       if (!reader) {
         throw new Error("No response body");
       }
@@ -3469,6 +3502,44 @@ var styles8 = {
     margin: 0;
     letter-spacing: -0.02em;
   `,
+  headerLeft: _react3.css`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    flex: 1;
+  `,
+  breadcrumbs: _react3.css`
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: ${_chunkUFCWGUAGjs.fontSize.base};
+    color: ${_chunkUFCWGUAGjs.colors.textSecondary};
+    min-width: 0;
+    overflow: hidden;
+  `,
+  breadcrumbSeparator: _react3.css`
+    color: ${_chunkUFCWGUAGjs.colors.border};
+    flex-shrink: 0;
+  `,
+  breadcrumbItem: _react3.css`
+    color: ${_chunkUFCWGUAGjs.colors.textSecondary};
+    text-decoration: none;
+    cursor: pointer;
+    transition: color 0.15s ease;
+    white-space: nowrap;
+    
+    &:hover {
+      color: ${_chunkUFCWGUAGjs.colors.primary};
+    }
+  `,
+  breadcrumbCurrent: _react3.css`
+    color: ${_chunkUFCWGUAGjs.colors.text};
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `,
   headerActions: _react3.css`
     display: flex;
     align-items: center;
@@ -3685,7 +3756,10 @@ function StudioUI({ onClose, isVisible = true }) {
   };
   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.headerLeft, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { css: styles8.title, children: "Studio" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Breadcrumbs, { currentPath, onNavigate: setCurrentPath })
+      ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.headerActions, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioSettings, {}),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3719,6 +3793,24 @@ function StudioUI({ onClose, isVisible = true }) {
     focusedItem && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioDetailView, {})
   ] }) });
 }
+function Breadcrumbs({ currentPath, onNavigate }) {
+  const parts = currentPath.split("/").filter(Boolean);
+  const breadcrumbs = parts.map((part, index) => ({
+    name: part,
+    path: parts.slice(0, index + 1).join("/")
+  }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles8.breadcrumbs, children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+    index > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.breadcrumbSeparator, children: "/" }),
+    index === breadcrumbs.length - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.breadcrumbCurrent, children: crumb.name }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "span",
+      {
+        css: styles8.breadcrumbItem,
+        onClick: () => onNavigate(crumb.path),
+        children: crumb.name
+      }
+    )
+  ] }, crumb.path)) });
+}
 function CloseIcon() {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "svg",
@@ -3743,4 +3835,4 @@ var StudioUI_default = StudioUI;
 
 
 exports.StudioUI = StudioUI; exports.default = StudioUI_default;
-//# sourceMappingURL=StudioUI-ILJIWA7T.js.map
+//# sourceMappingURL=StudioUI-RVVJ4TYS.js.map