@gallop.software/studio 0.1.64 → 0.1.66

package/dist/{StudioUI-57YOECIG.mjs → StudioUI-BFPT2G4P.mjs}

@@ -447,22 +447,54 @@ var styles2 = {
   folderList: css2`
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 0;
   `,
   folderItem: css2`
     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: ${colors.surfaceHover};
     }
   `,
+  treeIndent: css2`
+    display: flex;
+    align-items: center;
+    height: 100%;
+  `,
+  treeLine: css2`
+    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 ${colors.border};
+    }
+    
+    &::after {
+      content: '';
+      position: absolute;
+      left: 8px;
+      top: 50%;
+      width: 8px;
+      height: 0;
+      border-top: 1px dashed ${colors.border};
+    }
+  `,
   folderItemSelected: css2`
     background-color: ${colors.primaryLight};
     border-color: ${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__ */ jsx2("div", { css: styles2.treeIndent, children: Array.from({ length: folder.depth }).map((_, i) => /* @__PURE__ */ jsx2("div", { css: styles2.treeLine }, i)) }),
               /* @__PURE__ */ jsx2("svg", { css: styles2.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("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__ */ jsxs2("span", { css: styles2.folderName, children: [
                 folder.name,
@@ -3469,6 +3502,44 @@ var styles8 = {
     margin: 0;
     letter-spacing: -0.02em;
   `,
+  headerLeft: css8`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    flex: 1;
+  `,
+  breadcrumbs: css8`
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: ${fontSize.base};
+    color: ${colors.textSecondary};
+    min-width: 0;
+    overflow: hidden;
+  `,
+  breadcrumbSeparator: css8`
+    color: ${colors.border};
+    flex-shrink: 0;
+  `,
+  breadcrumbItem: css8`
+    color: ${colors.textSecondary};
+    text-decoration: none;
+    cursor: pointer;
+    transition: color 0.15s ease;
+    white-space: nowrap;
+    
+    &:hover {
+      color: ${colors.primary};
+    }
+  `,
+  breadcrumbCurrent: css8`
+    color: ${colors.text};
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `,
   headerActions: css8`
     display: flex;
     align-items: center;
@@ -3685,7 +3756,10 @@ function StudioUI({ onClose, isVisible = true }) {
   };
   return /* @__PURE__ */ jsx8(StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8("div", { css: styles8.container, children: [
     /* @__PURE__ */ jsxs8("div", { css: styles8.header, children: [
-      /* @__PURE__ */ jsx8("h1", { css: styles8.title, children: "Studio" }),
+      /* @__PURE__ */ jsxs8("div", { css: styles8.headerLeft, children: [
+        /* @__PURE__ */ jsx8("h1", { css: styles8.title, children: "Studio" }),
+        /* @__PURE__ */ jsx8(Breadcrumbs, { currentPath, onNavigate: setCurrentPath })
+      ] }),
       /* @__PURE__ */ jsxs8("div", { css: styles8.headerActions, children: [
         /* @__PURE__ */ jsx8(StudioSettings, {}),
         /* @__PURE__ */ jsx8(
@@ -3719,6 +3793,24 @@ function StudioUI({ onClose, isVisible = true }) {
     focusedItem && /* @__PURE__ */ jsx8(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__ */ jsx8("div", { css: styles8.breadcrumbs, children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs8("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+    index > 0 && /* @__PURE__ */ jsx8("span", { css: styles8.breadcrumbSeparator, children: "/" }),
+    index === breadcrumbs.length - 1 ? /* @__PURE__ */ jsx8("span", { css: styles8.breadcrumbCurrent, children: crumb.name }) : /* @__PURE__ */ jsx8(
+      "span",
+      {
+        css: styles8.breadcrumbItem,
+        onClick: () => onNavigate(crumb.path),
+        children: crumb.name
+      }
+    )
+  ] }, crumb.path)) });
+}
 function CloseIcon() {
   return /* @__PURE__ */ jsxs8(
     "svg",
@@ -3743,4 +3835,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-57YOECIG.mjs.map
+//# sourceMappingURL=StudioUI-BFPT2G4P.mjs.map