@floegence/floe-webapp-core 0.33.5 → 0.33.7

package/dist/components/file-browser/FileBrowser.js

@@ -1,20 +1,20 @@
-import { createComponent as i, insert as l, addEventListener as P, use as A, memo as C, effect as N, className as L, setStyleProperty as W, template as u, delegateEvents as T } from "solid-js/web";
-import { onMount as G, onCleanup as Q, createEffect as q, Show as a } from "solid-js";
+import { createComponent as n, insert as i, use as P, memo as _, effect as k, className as z, template as w, delegateEvents as W } from "solid-js/web";
+import { onMount as A, onCleanup as K, createEffect as L, Show as u } from "solid-js";
 import { cn as B } from "../../utils/cn.js";
-import { useLayout as J } from "../../context/LayoutContext.js";
-import { useFileBrowserDrag as U } from "../../context/FileBrowserDragContext.js";
-import { deferAfterPaint as X } from "../../utils/defer.js";
-import { FileBrowserProvider as Y, useFileBrowser as Z } from "./FileBrowserContext.js";
-import { ResizeHandle as p } from "../layout/ResizeHandle.js";
-import { DirectoryTree as ee } from "./DirectoryTree.js";
-import { FileListView as te } from "./FileListView.js";
-import { FileGridView as re } from "./FileGridView.js";
-import { FileBrowserToolbar as ne } from "./FileBrowserToolbar.js";
-import { FileContextMenu as ie } from "./FileContextMenu.js";
-import { DragPreview as le } from "./DragPreview.js";
-var ae = /* @__PURE__ */ u('<div class="border-b border-border">'), oe = /* @__PURE__ */ u('<div class="min-w-0 flex items-center gap-1.5">'), se = /* @__PURE__ */ u('<button type=button class="flex items-center justify-center w-5 h-5 rounded cursor-pointer hover:bg-sidebar-accent/80 transition-colors"aria-label="Close sidebar"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="w-3.5 h-3.5"><path d="M18 6 6 18"></path><path d="m6 6 12 12">'), de = /* @__PURE__ */ u('<div class="flex min-w-0 items-center gap-1.5">'), ue = /* @__PURE__ */ u('<div class="absolute inset-0 bg-background/60 backdrop-blur-sm z-[9]">'), ce = /* @__PURE__ */ u('<div><div class="flex flex-1 min-h-0 relative"><aside><div class="h-full flex flex-col"><div class="flex items-center justify-between px-3 py-2 border-b border-sidebar-border"><span class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">Explorer</span></div><div class="flex-1 min-h-0 overflow-auto py-1"></div></div></aside><div class="flex-1 min-w-0 flex flex-col"><div class="flex-1 min-h-0"></div><div class="flex items-center justify-between px-3 py-1 border-t border-border text-[10px] text-muted-foreground"><span> items</span><span class="truncate max-w-[200px]">');
-function ke(e) {
-  return i(Y, {
+import { useLayout as O } from "../../context/LayoutContext.js";
+import { useFileBrowserDrag as E } from "../../context/FileBrowserDragContext.js";
+import { deferAfterPaint as V } from "../../utils/defer.js";
+import { FileBrowserProvider as H, useFileBrowser as N } from "./FileBrowserContext.js";
+import { SidebarPane as T } from "../layout/SidebarPane.js";
+import { DirectoryTree as j } from "./DirectoryTree.js";
+import { FileListView as G } from "./FileListView.js";
+import { FileGridView as Q } from "./FileGridView.js";
+import { FileBrowserToolbar as q } from "./FileBrowserToolbar.js";
+import { FileContextMenu as J } from "./FileContextMenu.js";
+import { DragPreview as U } from "./DragPreview.js";
+var X = /* @__PURE__ */ w('<div class="border-b border-border">'), Y = /* @__PURE__ */ w('<div><div class="flex flex-1 min-h-0 relative"><div class="flex-1 min-w-0 flex flex-col"><div class="flex-1 min-h-0"></div><div class="flex items-center justify-between px-3 py-1 border-t border-border text-[10px] text-muted-foreground"><span> items</span><span class="truncate max-w-[200px]">');
+function me(e) {
+  return n(H, {
     get files() {
       return e.files;
     },
@@ -55,7 +55,7 @@ function ke(e) {
       return e.onOpen;
     },
     get children() {
-      return i(ge, {
+      return n(Z, {
         get class() {
           return e.class;
         },
@@ -96,145 +96,124 @@ function ke(e) {
     }
   });
 }
-function ge(e) {
-  const r = Z(), K = J(), c = U(), s = () => K.isMobile(), M = () => r.sidebarWidth(), H = () => e.sidebarResizable ?? !0, d = () => (e.enableDragDrop ?? !0) && !!c, g = () => e.instanceId ?? `filebrowser-${Math.random().toString(36).slice(2, 9)}`;
-  let I, S = null, y = null;
-  G(() => {
-    if (!c || !d()) return;
-    const n = {
-      instanceId: g(),
-      currentPath: r.currentPath,
-      files: r.files,
+function Z(e) {
+  const t = N(), I = O(), o = E(), f = () => I.isMobile(), M = () => t.sidebarWidth(), S = () => e.sidebarResizable ?? !0, a = () => (e.enableDragDrop ?? !0) && !!o, s = () => e.instanceId ?? `filebrowser-${Math.random().toString(36).slice(2, 9)}`;
+  let h, C = null, x = null;
+  A(() => {
+    if (!o || !a()) return;
+    const r = {
+      instanceId: s(),
+      currentPath: t.currentPath,
+      files: t.files,
       onDragMove: e.onDragMove,
-      getScrollContainer: () => S,
-      getSidebarScrollContainer: () => y,
-      optimisticRemove: r.optimisticRemove,
-      optimisticInsert: r.optimisticInsert
+      getScrollContainer: () => C,
+      getSidebarScrollContainer: () => x,
+      optimisticRemove: t.optimisticRemove,
+      optimisticInsert: t.optimisticInsert
     };
-    c.registerInstance(n);
-  }), Q(() => {
-    c && d() && c.unregisterInstance(g());
+    o.registerInstance(r);
+  }), K(() => {
+    o && a() && o.unregisterInstance(s());
   });
-  let $ = !1, f = !1;
-  q(() => {
-    const n = s();
-    if (!$) {
-      $ = !0, f = n, n && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar();
+  let v = !1, g = !1;
+  L(() => {
+    const r = f();
+    if (!v) {
+      v = !0, g = r, r && e.hideSidebarOnMobile !== !1 && !t.sidebarCollapsed() && t.toggleSidebar();
       return;
     }
-    !f && n && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar(), f = n;
+    !g && r && e.hideSidebarOnMobile !== !1 && !t.sidebarCollapsed() && t.toggleSidebar(), g = r;
   });
-  const O = (n) => {
-    (n.metaKey || n.ctrlKey) && n.key.toLowerCase() === "f" && (n.preventDefault(), r.setFilterActive(!0), X(() => I?.focus()));
-  }, D = () => !r.sidebarCollapsed() || !s();
+  const D = (r) => {
+    (r.metaKey || r.ctrlKey) && r.key.toLowerCase() === "f" && (r.preventDefault(), t.setFilterActive(!0), V(() => h?.focus()));
+  }, y = () => !t.sidebarCollapsed() || !f();
   return (() => {
-    var n = ce(), v = n.firstChild, b = v.firstChild, k = b.firstChild, x = k.firstChild;
-    x.firstChild;
-    var _ = x.nextSibling, w = b.nextSibling, h = w.firstChild, E = h.nextSibling, m = E.firstChild, j = m.firstChild, V = m.nextSibling;
-    return n.$$keydown = O, l(n, i(a, {
+    var r = Y(), m = r.firstChild, b = m.firstChild, c = b.firstChild, R = c.nextSibling, d = R.firstChild, $ = d.firstChild, F = d.nextSibling;
+    return r.$$keydown = D, i(r, n(u, {
       get when() {
         return e.header;
       },
       get children() {
-        var t = ae();
-        return l(t, () => e.header), t;
+        var l = X();
+        return i(l, () => e.header), l;
       }
-    }), v), l(x, i(a, {
-      get when() {
-        return e.sidebarHeaderActions || s();
+    }), m), i(m, n(T, {
+      title: "Explorer",
+      get width() {
+        return M();
       },
-      get children() {
-        var t = de();
-        return l(t, i(a, {
-          get when() {
-            return e.sidebarHeaderActions;
-          },
-          get children() {
-            var o = oe();
-            return l(o, () => e.sidebarHeaderActions), o;
-          }
-        }), null), l(t, i(a, {
-          get when() {
-            return s();
-          },
-          get children() {
-            var o = se();
-            return P(o, "click", r.toggleSidebar, !0), o;
-          }
-        }), null), t;
-      }
-    }), null), A((t) => {
-      y = t;
-    }, _), l(_, i(ee, {
-      get instanceId() {
-        return g();
+      get open() {
+        return y();
       },
-      get enableDragDrop() {
-        return d();
-      }
-    })), l(b, i(a, {
-      get when() {
-        return C(() => !!(H() && D()))() && !s();
+      get headerActions() {
+        return e.sidebarHeaderActions;
+      },
+      get resizable() {
+        return S();
+      },
+      onResize: (l) => {
+        t.setSidebarWidth(t.sidebarWidth() + l);
       },
+      get onClose() {
+        return t.toggleSidebar;
+      },
+      bodyRef: (l) => {
+        x = l;
+      },
+      bodyClass: "py-1",
       get children() {
-        return i(p, {
-          direction: "horizontal",
-          onResize: (t) => {
-            r.setSidebarWidth(r.sidebarWidth() + t);
+        return n(j, {
+          get instanceId() {
+            return s();
+          },
+          get enableDragDrop() {
+            return a();
           }
         });
       }
-    }), null), l(v, i(a, {
+    }), b), i(b, n(q, {
+      filterInputRef: (l) => h = l
+    }), c), P((l) => {
+      C = l;
+    }, c), i(c, n(u, {
       get when() {
-        return C(() => !!s())() && !r.sidebarCollapsed();
-      },
-      get children() {
-        var t = ue();
-        return P(t, "click", r.toggleSidebar, !0), t;
-      }
-    }), w), l(w, i(ne, {
-      filterInputRef: (t) => I = t
-    }), h), A((t) => {
-      S = t;
-    }, h), l(h, i(a, {
-      get when() {
-        return r.viewMode() === "list";
+        return t.viewMode() === "list";
       },
       get fallback() {
-        return i(re, {
+        return n(Q, {
           get instanceId() {
-            return g();
+            return s();
           },
           get enableDragDrop() {
-            return d();
+            return a();
           }
         });
       },
       get children() {
-        return i(te, {
+        return n(G, {
           get instanceId() {
-            return g();
+            return s();
           },
           get enableDragDrop() {
-            return d();
+            return a();
           }
         });
       }
-    })), l(m, () => r.currentFiles().length, j), l(m, i(a, {
+    })), i(d, () => t.currentFiles().length, $), i(d, n(u, {
       get when() {
-        return r.filterQueryApplied().trim();
+        return t.filterQueryApplied().trim();
       },
       get children() {
         return [" ", "(filtered)"];
       }
-    }), null), l(m, i(a, {
+    }), null), i(d, n(u, {
       get when() {
-        return r.selectedItems().size > 0;
+        return t.selectedItems().size > 0;
       },
       get children() {
-        return [" · ", C(() => r.selectedItems().size), " selected"];
+        return [" · ", _(() => t.selectedItems().size), " selected"];
       }
-    }), null), l(V, () => r.currentPath()), l(n, i(ie, {
+    }), null), i(F, () => t.currentPath()), i(r, n(J, {
       get callbacks() {
         return e.contextMenuCallbacks;
       },
@@ -247,31 +226,17 @@ function ge(e) {
       get hideItems() {
         return e.hideContextMenuItems;
       }
-    }), null), l(n, i(a, {
+    }), null), i(r, n(u, {
       get when() {
-        return d();
+        return a();
       },
       get children() {
-        return i(le, {});
+        return n(U, {});
       }
-    }), null), N((t) => {
-      var o = B("flex flex-col h-full min-h-0 bg-background", "border border-border rounded-lg overflow-hidden", "shadow-sm", e.class), R = B(
-        "flex-shrink-0 border-r border-border bg-sidebar relative",
-        "transition-all duration-200 ease-out",
-        "overflow-hidden",
-        // Mobile overlay
-        s() && !r.sidebarCollapsed() && "absolute inset-y-0 left-0 z-10 shadow-lg"
-      ), z = D() ? `${M()}px` : "0px", F = `${M()}px`;
-      return o !== t.e && L(n, t.e = o), R !== t.t && L(b, t.t = R), z !== t.a && W(b, "width", t.a = z), F !== t.o && W(k, "width", t.o = F), t;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    }), n;
+    }), null), k(() => z(r, B("flex flex-col h-full min-h-0 bg-background", "border border-border rounded-lg overflow-hidden", "shadow-sm", e.class))), r;
   })();
 }
-T(["keydown", "click"]);
+W(["keydown"]);
 export {
-  ke as FileBrowser
+  me as FileBrowser
 };

package/dist/components/file-browser/FileIcons.d.ts

@@ -6,6 +6,7 @@ export declare const FolderIcon: (props: FileIconProps) => JSX.Element;
 export declare const FolderOpenIcon: (props: FileIconProps) => JSX.Element;
 export declare const FileIcon: (props: FileIconProps) => JSX.Element;
 export declare const CodeFileIcon: (props: FileIconProps) => JSX.Element;
+export declare const ShellScriptFileIcon: (props: FileIconProps) => JSX.Element;
 export declare const ImageFileIcon: (props: FileIconProps) => JSX.Element;
 export declare const DocumentFileIcon: (props: FileIconProps) => JSX.Element;
 export declare const ConfigFileIcon: (props: FileIconProps) => JSX.Element;

package/dist/components/file-browser/FileIcons.js

@@ -1,53 +1,57 @@
-import { effect as t, setAttribute as e, template as n } from "solid-js/web";
-import { createUniqueId as c } from "solid-js";
-var v = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><defs><linearGradient x1=0% y1=0% x2=0% y2=100%><stop offset=0% style=stop-color:var(--warning);stop-opacity:1></stop><stop offset=100% style="stop-color:color-mix(in srgb, var(--warning) 80%, var(--foreground));stop-opacity:1"></stop></linearGradient></defs><path d="M3 5a2 2 0 0 1 2-2h4.586a1 1 0 0 1 .707.293L12 5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5z">'), h = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><defs><linearGradient x1=0% y1=0% x2=0% y2=100%><stop offset=0% style=stop-color:var(--warning);stop-opacity:1></stop><stop offset=100% style="stop-color:color-mix(in srgb, var(--warning) 70%, var(--foreground));stop-opacity:1"></stop></linearGradient></defs><path d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7.414A2 2 0 0 0 20.414 6L18 3.586A2 2 0 0 0 16.586 3H5zm4 2h7.586L19 7.414V17H5V5h4z"></path><path fill=var(--background) opacity=0.3 d="M3 8l4-3h14l-4 3H3z">'), u = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8">'), f = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><path fill=var(--info) opacity=0.2 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path><path fill=none stroke=var(--info) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline fill=none stroke=var(--info) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round points="14 2 14 8 20 8"></polyline><path fill=none stroke=var(--info) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="m10 13-2 2 2 2m4-4 2 2-2 2">'), k = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><path fill=var(--success) opacity=0.2 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path><path fill=none stroke=var(--success) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline fill=none stroke=var(--success) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round points="14 2 14 8 20 8"></polyline><circle cx=10 cy=13 r=2 fill=var(--success)></circle><path fill=none stroke=var(--success) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="m20 17-3-3-4 4-2-2-5 3">'), w = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><path fill=var(--error) opacity=0.2 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path><path fill=none stroke=var(--error) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline fill=none stroke=var(--error) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round points="14 2 14 8 20 8"></polyline><line x1=8 y1=13 x2=16 y2=13 stroke=var(--error) stroke-width=1.5 stroke-linecap=round></line><line x1=8 y1=17 x2=14 y2=17 stroke=var(--error) stroke-width=1.5 stroke-linecap=round>'), g = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><path fill=var(--warning) opacity=0.2 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path><path fill=none stroke=var(--warning) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline fill=none stroke=var(--warning) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round points="14 2 14 8 20 8"></polyline><path fill=none stroke=var(--warning) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M10 12v4h2m-2-4h2l2 4">'), y = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><path fill=var(--primary) opacity=0.2 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path><path fill=none stroke=var(--primary) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline fill=none stroke=var(--primary) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round points="14 2 14 8 20 8"></polyline><path fill=none stroke=var(--primary) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M9 14h6m-3-3v6">');
-const z = (r) => {
-  const l = `floe-folder-gradient-${c()}`;
+import { effect as t, setAttribute as r, template as n } from "solid-js/web";
+import { createUniqueId as d } from "solid-js";
+var h = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><defs><linearGradient x1=0% y1=0% x2=0% y2=100%><stop offset=0% style=stop-color:var(--warning);stop-opacity:1></stop><stop offset=100% style="stop-color:color-mix(in srgb, var(--warning) 80%, var(--foreground));stop-opacity:1"></stop></linearGradient></defs><path d="M3 5a2 2 0 0 1 2-2h4.586a1 1 0 0 1 .707.293L12 5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5z">'), v = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><defs><linearGradient x1=0% y1=0% x2=0% y2=100%><stop offset=0% style=stop-color:var(--warning);stop-opacity:1></stop><stop offset=100% style="stop-color:color-mix(in srgb, var(--warning) 70%, var(--foreground));stop-opacity:1"></stop></linearGradient></defs><path d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7.414A2 2 0 0 0 20.414 6L18 3.586A2 2 0 0 0 16.586 3H5zm4 2h7.586L19 7.414V17H5V5h4z"></path><path fill=var(--background) opacity=0.3 d="M3 8l4-3h14l-4 3H3z">'), u = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8">'), k = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><path fill=var(--info) opacity=0.2 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path><path fill=none stroke=var(--info) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline fill=none stroke=var(--info) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round points="14 2 14 8 20 8"></polyline><path fill=none stroke=var(--info) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="m10 13-2 2 2 2m4-4 2 2-2 2">'), w = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><path fill=var(--success) opacity=0.2 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path><path fill=none stroke=var(--success) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline fill=none stroke=var(--success) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round points="14 2 14 8 20 8"></polyline><polyline fill=none stroke=var(--success) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round points="8 13 11 15 8 17"></polyline><line x1=13 y1=17 x2=16.5 y2=17 stroke=var(--success) stroke-width=1.5 stroke-linecap=round>'), f = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><path fill=var(--success) opacity=0.2 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path><path fill=none stroke=var(--success) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline fill=none stroke=var(--success) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round points="14 2 14 8 20 8"></polyline><circle cx=10 cy=13 r=2 fill=var(--success)></circle><path fill=none stroke=var(--success) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="m20 17-3-3-4 4-2-2-5 3">'), g = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><path fill=var(--error) opacity=0.2 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path><path fill=none stroke=var(--error) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline fill=none stroke=var(--error) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round points="14 2 14 8 20 8"></polyline><line x1=8 y1=13 x2=16 y2=13 stroke=var(--error) stroke-width=1.5 stroke-linecap=round></line><line x1=8 y1=17 x2=14 y2=17 stroke=var(--error) stroke-width=1.5 stroke-linecap=round>'), y = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><path fill=var(--warning) opacity=0.2 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path><path fill=none stroke=var(--warning) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline fill=none stroke=var(--warning) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round points="14 2 14 8 20 8"></polyline><path fill=none stroke=var(--warning) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M10 12v4h2m-2-4h2l2 4">'), x = /* @__PURE__ */ n('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><path fill=var(--primary) opacity=0.2 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path><path fill=none stroke=var(--primary) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline fill=none stroke=var(--primary) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round points="14 2 14 8 20 8"></polyline><path fill=none stroke=var(--primary) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round d="M9 14h6m-3-3v6">');
+const b = (e) => {
+  const l = `floe-folder-gradient-${d()}`;
   return (() => {
-    var s = v(), i = s.firstChild, a = i.firstChild, p = a.firstChild;
+    var s = h(), i = s.firstChild, a = i.firstChild, p = a.firstChild;
     p.nextSibling;
-    var d = i.nextSibling;
-    return e(a, "id", l), e(d, "fill", `url(#${l})`), t(() => e(s, "class", r.class)), s;
+    var c = i.nextSibling;
+    return r(a, "id", l), r(c, "fill", `url(#${l})`), t(() => r(s, "class", e.class)), s;
   })();
-}, H = (r) => {
-  const l = `floe-folder-open-gradient-${c()}`;
+}, C = (e) => {
+  const l = `floe-folder-open-gradient-${d()}`;
   return (() => {
-    var s = h(), i = s.firstChild, a = i.firstChild, p = a.firstChild;
+    var s = v(), i = s.firstChild, a = i.firstChild, p = a.firstChild;
     p.nextSibling;
-    var d = i.nextSibling;
-    return e(a, "id", l), e(d, "fill", `url(#${l})`), t(() => e(s, "class", r.class)), s;
+    var c = i.nextSibling;
+    return r(a, "id", l), r(c, "fill", `url(#${l})`), t(() => r(s, "class", e.class)), s;
   })();
-}, x = (r) => (() => {
+}, m = (e) => (() => {
   var o = u();
-  return t(() => e(o, "class", r.class)), o;
-})(), m = (r) => (() => {
-  var o = f();
-  return t(() => e(o, "class", r.class)), o;
-})(), $ = (r) => (() => {
+  return t(() => r(o, "class", e.class)), o;
+})(), $ = (e) => (() => {
   var o = k();
-  return t(() => e(o, "class", r.class)), o;
-})(), _ = (r) => (() => {
+  return t(() => r(o, "class", e.class)), o;
+})(), _ = (e) => (() => {
   var o = w();
-  return t(() => e(o, "class", r.class)), o;
-})(), j = (r) => (() => {
+  return t(() => r(o, "class", e.class)), o;
+})(), j = (e) => (() => {
+  var o = f();
+  return t(() => r(o, "class", e.class)), o;
+})(), z = (e) => (() => {
   var o = g();
-  return t(() => e(o, "class", r.class)), o;
-})(), I = (r) => (() => {
+  return t(() => r(o, "class", e.class)), o;
+})(), I = (e) => (() => {
   var o = y();
-  return t(() => e(o, "class", r.class)), o;
+  return t(() => r(o, "class", e.class)), o;
+})(), M = (e) => (() => {
+  var o = x();
+  return t(() => r(o, "class", e.class)), o;
 })();
-function V(r) {
-  const o = r?.toLowerCase();
-  return ["ts", "tsx", "js", "jsx", "py", "rb", "go", "rs", "java", "c", "cpp", "h", "hpp", "vue", "svelte"].includes(o ?? "") ? m : ["png", "jpg", "jpeg", "gif", "svg", "webp", "ico", "bmp"].includes(o ?? "") ? $ : ["pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "md", "rtf"].includes(o ?? "") ? _ : ["json", "yaml", "yml", "toml", "xml", "ini", "env", "config"].includes(o ?? "") ? j : ["css", "scss", "sass", "less", "styl"].includes(o ?? "") ? I : x;
+function F(e) {
+  const o = e?.toLowerCase();
+  return ["sh", "bash", "zsh", "fish", "ksh", "csh"].includes(o ?? "") ? _ : ["ts", "tsx", "js", "jsx", "py", "rb", "go", "rs", "java", "c", "cpp", "h", "hpp", "vue", "svelte"].includes(o ?? "") ? $ : ["png", "jpg", "jpeg", "gif", "svg", "webp", "ico", "bmp"].includes(o ?? "") ? j : ["pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "md", "rtf"].includes(o ?? "") ? z : ["json", "yaml", "yml", "toml", "xml", "ini", "env", "config"].includes(o ?? "") ? I : ["css", "scss", "sass", "less", "styl"].includes(o ?? "") ? M : m;
 }
 export {
-  m as CodeFileIcon,
-  j as ConfigFileIcon,
-  _ as DocumentFileIcon,
-  x as FileIcon,
-  z as FolderIcon,
-  H as FolderOpenIcon,
-  $ as ImageFileIcon,
-  I as StyleFileIcon,
-  V as getFileIcon
+  $ as CodeFileIcon,
+  I as ConfigFileIcon,
+  z as DocumentFileIcon,
+  m as FileIcon,
+  b as FolderIcon,
+  C as FolderOpenIcon,
+  j as ImageFileIcon,
+  _ as ShellScriptFileIcon,
+  M as StyleFileIcon,
+  F as getFileIcon
 };

package/dist/components/file-browser/index.d.ts

@@ -6,5 +6,5 @@ export { FileGridView, type FileGridViewProps } from './FileGridView';
 export { FileContextMenu, type FileContextMenuProps, type BuiltinContextMenuAction, type HideItemsValue } from './FileContextMenu';
 export { Breadcrumb, type BreadcrumbProps } from './Breadcrumb';
 export { FileBrowserToolbar, type FileBrowserToolbarProps } from './FileBrowserToolbar';
-export { FolderIcon, FolderOpenIcon, FileIcon, CodeFileIcon, ImageFileIcon, DocumentFileIcon, ConfigFileIcon, StyleFileIcon, getFileIcon, } from './FileIcons';
+export { FolderIcon, FolderOpenIcon, FileIcon, CodeFileIcon, ShellScriptFileIcon, ImageFileIcon, DocumentFileIcon, ConfigFileIcon, StyleFileIcon, getFileIcon, } from './FileIcons';
 export type { FileItem, ViewMode, SortField, SortDirection, SortConfig, FileListColumnRatios, FileBrowserContextValue, ContextMenuActionType, ContextMenuItem, ContextMenuEvent, ContextMenuCallbacks, OptimisticUpdateType, OptimisticRemove, OptimisticUpdate, OptimisticInsert, OptimisticOperation, ScrollPosition, } from './types';

package/dist/components/layout/SidebarPane.d.ts

@@ -0,0 +1,19 @@
+import { type JSX } from 'solid-js';
+export interface SidebarPaneProps {
+    children: JSX.Element;
+    title?: JSX.Element;
+    headerActions?: JSX.Element;
+    width?: number;
+    open?: boolean;
+    resizable?: boolean;
+    onResize?: (delta: number) => void;
+    onClose?: () => void;
+    mobileOverlay?: boolean;
+    mobileBackdrop?: boolean;
+    class?: string;
+    innerClass?: string;
+    bodyClass?: string;
+    backdropClass?: string;
+    bodyRef?: (el: HTMLDivElement) => void;
+}
+export declare function SidebarPane(props: SidebarPaneProps): JSX.Element;

package/dist/components/layout/SidebarPane.js

@@ -0,0 +1,68 @@
+import { insert as i, createComponent as o, use as M, effect as k, className as a, setStyleProperty as C, template as s, delegateEvents as S } from "solid-js/web";
+import { Show as l } from "solid-js";
+import { useLayout as j } from "../../context/LayoutContext.js";
+import { cn as d } from "../../utils/cn.js";
+import { ResizeHandle as A } from "./ResizeHandle.js";
+var O = /* @__PURE__ */ s('<div class="min-w-0 flex items-center gap-1.5">'), P = /* @__PURE__ */ s('<button type=button class="flex items-center justify-center w-5 h-5 rounded cursor-pointer hover:bg-sidebar-accent/80 transition-colors"aria-label="Close sidebar"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="w-3.5 h-3.5"><path d="M18 6 6 18"></path><path d="m6 6 12 12">'), E = /* @__PURE__ */ s('<div class="flex min-w-0 items-center gap-1.5">'), H = /* @__PURE__ */ s('<aside><div><div class="flex items-center justify-between px-3 py-2 border-b border-sidebar-border"><span class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60"></span></div><div>'), L = /* @__PURE__ */ s("<div>");
+function I(e) {
+  const z = j(), v = () => z.isMobile(), m = () => e.width ?? 240, c = () => e.open ?? !0, u = () => v() && e.mobileOverlay !== !1 && c(), w = () => u() && typeof e.onClose == "function", _ = () => u() && e.mobileBackdrop !== !1 && typeof e.onClose == "function", R = () => e.resizable && c() && !v() && typeof e.onResize == "function";
+  return [(() => {
+    var n = H(), h = n.firstChild, f = h.firstChild, B = f.firstChild, b = f.nextSibling;
+    return i(B, () => e.title), i(f, o(l, {
+      get when() {
+        return e.headerActions || w();
+      },
+      get children() {
+        var t = E();
+        return i(t, o(l, {
+          get when() {
+            return e.headerActions;
+          },
+          get children() {
+            var r = O();
+            return i(r, () => e.headerActions), r;
+          }
+        }), null), i(t, o(l, {
+          get when() {
+            return w();
+          },
+          get children() {
+            var r = P();
+            return r.$$click = () => e.onClose?.(), r;
+          }
+        }), null), t;
+      }
+    }), null), M((t) => e.bodyRef?.(t), b), i(b, () => e.children), i(n, o(l, {
+      get when() {
+        return R();
+      },
+      get children() {
+        return o(A, {
+          direction: "horizontal",
+          onResize: (t) => e.onResize?.(t)
+        });
+      }
+    }), null), k((t) => {
+      var r = d("flex-shrink-0 border-r border-border bg-sidebar relative", "transition-all duration-200 ease-out", "overflow-hidden", u() && "absolute inset-y-0 left-0 z-10 shadow-lg", e.class), g = c() ? `${m()}px` : "0px", x = d("h-full flex flex-col", e.innerClass), y = `${m()}px`, $ = d("flex-1 min-h-0 overflow-auto", e.bodyClass);
+      return r !== t.e && a(n, t.e = r), g !== t.t && C(n, "width", t.t = g), x !== t.a && a(h, t.a = x), y !== t.o && C(h, "width", t.o = y), $ !== t.i && a(b, t.i = $), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    }), n;
+  })(), o(l, {
+    get when() {
+      return _();
+    },
+    get children() {
+      var n = L();
+      return n.$$click = () => e.onClose?.(), k(() => a(n, d("absolute inset-0 bg-background/60 backdrop-blur-sm z-[9]", e.backdropClass))), n;
+    }
+  })];
+}
+S(["click"]);
+export {
+  I as SidebarPane
+};

package/dist/components/layout/index.d.ts

@@ -6,5 +6,6 @@ export { TopBarIconButton, type TopBarIconButtonProps } from './TopBarIconButton
 export { BottomBar, BottomBarItem, StatusIndicator, type BottomBarProps, type BottomBarItemProps, type StatusIndicatorProps } from './BottomBar';
 export { MobileTabBar, type MobileTabBarItem, type MobileTabBarProps } from './MobileTabBar';
 export { ResizeHandle, type ResizeHandleProps } from './ResizeHandle';
+export { SidebarPane, type SidebarPaneProps } from './SidebarPane';
 export { Panel, PanelHeader, PanelContent, type PanelProps, type PanelHeaderProps, type PanelContentProps } from './Panel';
 export { KeepAliveStack, type KeepAliveStackProps, type KeepAliveView } from './KeepAliveStack';

package/dist/file-browser.js

@@ -1,29 +1,30 @@
 import { Breadcrumb as r } from "./components/file-browser/Breadcrumb.js";
-import { CodeFileIcon as l, ConfigFileIcon as t, DocumentFileIcon as F, FileIcon as n, FolderIcon as c, FolderOpenIcon as m, ImageFileIcon as f, StyleFileIcon as p, getFileIcon as x } from "./components/file-browser/FileIcons.js";
-import { DirectoryTree as d } from "./components/file-browser/DirectoryTree.js";
-import { FileBrowser as w } from "./components/file-browser/FileBrowser.js";
-import { FileBrowserProvider as u, useFileBrowser as a } from "./components/file-browser/FileBrowserContext.js";
-import { FileBrowserToolbar as C } from "./components/file-browser/FileBrowserToolbar.js";
+import { CodeFileIcon as l, ConfigFileIcon as t, DocumentFileIcon as F, FileIcon as n, FolderIcon as c, FolderOpenIcon as m, ImageFileIcon as p, ShellScriptFileIcon as I, StyleFileIcon as f, getFileIcon as x } from "./components/file-browser/FileIcons.js";
+import { DirectoryTree as s } from "./components/file-browser/DirectoryTree.js";
+import { FileBrowser as B } from "./components/file-browser/FileBrowser.js";
+import { FileBrowserProvider as a, useFileBrowser as g } from "./components/file-browser/FileBrowserContext.js";
+import { FileBrowserToolbar as S } from "./components/file-browser/FileBrowserToolbar.js";
 import { FileContextMenu as y } from "./components/file-browser/FileContextMenu.js";
 import { FileGridView as T } from "./components/file-browser/FileGridView.js";
-import { FileListView as v } from "./components/file-browser/FileListView.js";
+import { FileListView as h } from "./components/file-browser/FileListView.js";
 export {
   r as Breadcrumb,
   l as CodeFileIcon,
   t as ConfigFileIcon,
-  d as DirectoryTree,
+  s as DirectoryTree,
   F as DocumentFileIcon,
-  w as FileBrowser,
-  u as FileBrowserProvider,
-  C as FileBrowserToolbar,
+  B as FileBrowser,
+  a as FileBrowserProvider,
+  S as FileBrowserToolbar,
   y as FileContextMenu,
   T as FileGridView,
   n as FileIcon,
-  v as FileListView,
+  h as FileListView,
   c as FolderIcon,
   m as FolderOpenIcon,
-  f as ImageFileIcon,
-  p as StyleFileIcon,
+  p as ImageFileIcon,
+  I as ShellScriptFileIcon,
+  f as StyleFileIcon,
   x as getFileIcon,
-  a as useFileBrowser
+  g as useFileBrowser
 };