@floegence/floe-webapp-core 0.35.6 → 0.35.8

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

@@ -1,62 +1,63 @@
-import { use as et, insert as u, createComponent as m, effect as E, className as U, setStyleProperty as B, addEventListener as ct, template as _, Dynamic as mt, memo as ot, delegateEvents as ut } from "solid-js/web";
-import { createMemo as tt, createSignal as at, Show as W, For as st, untrack as ft, onCleanup as ht } from "solid-js";
+import { use as et, insert as u, createComponent as m, effect as E, className as j, setStyleProperty as B, addEventListener as ct, template as _, spread as mt, mergeProps as ut, Dynamic as ft, memo as ot, delegateEvents as gt } from "solid-js/web";
+import { createMemo as tt, createSignal as at, Show as W, For as st, untrack as ht, onCleanup as xt } from "solid-js";
 import { cn as H } from "../../utils/cn.js";
 import { useMediaQuery as nt } from "../../hooks/useMediaQuery.js";
-import { useResizeObserver as gt } from "../../hooks/useResizeObserver.js";
-import { useVirtualWindow as xt } from "../../hooks/useVirtualWindow.js";
+import { useResizeObserver as vt } from "../../hooks/useResizeObserver.js";
+import { useVirtualWindow as wt } from "../../hooks/useVirtualWindow.js";
 import { useFileBrowser as lt } from "./FileBrowserContext.js";
-import { useFileBrowserDrag as vt } from "../../context/FileBrowserDragContext.js";
-import { FolderIcon as wt, getFileIcon as $t } from "./FileIcons.js";
-import { ChevronDown as bt } from "../icons/index.js";
-import { createLongPressContextMenuHandlers as Ct } from "./longPressContextMenu.js";
+import { useFileBrowserDrag as Ct } from "../../context/FileBrowserDragContext.js";
+import { FolderIcon as bt, getFileIcon as Dt } from "./FileIcons.js";
+import { ChevronDown as St } from "../icons/index.js";
+import { createLongPressContextMenuHandlers as $t } from "./longPressContextMenu.js";
 import { ResizeHandle as it } from "../layout/ResizeHandle.js";
-var Dt = /* @__PURE__ */ _("<span class=truncate>"), St = /* @__PURE__ */ _('<mark class="bg-warning/40 text-inherit rounded-sm">'), Mt = /* @__PURE__ */ _("<span>"), zt = /* @__PURE__ */ _('<div><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Modified'), _t = /* @__PURE__ */ _('<div class=shrink-0><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Size'), yt = /* @__PURE__ */ _("<div>"), It = /* @__PURE__ */ _('<div><div class="flex items-center border-b border-border text-[11px] text-muted-foreground font-medium"><div><button type=button class="group w-full flex items-center min-w-0 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"><span class="flex items-center gap-2 min-w-0"><span class="flex-shrink-0 w-4 h-4"aria-hidden=true></span><span class="flex items-center min-w-0"><span class=truncate>Name</span></span></span></button></div></div><div class="flex-1 min-h-0 overflow-auto">'), Pt = /* @__PURE__ */ _('<span>No files matching "<!>"'), kt = /* @__PURE__ */ _('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), pt = /* @__PURE__ */ _('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Lt = /* @__PURE__ */ _("<span>This folder is empty"), rt = /* @__PURE__ */ _('<div class="shrink-0 px-3 py-1.5 text-left text-muted-foreground truncate">'), Rt = /* @__PURE__ */ _('<button type=button><div class="flex items-center gap-2 flex-1 min-w-0 px-3 py-1.5"><span class="flex-shrink-0 w-4 h-4">');
-function Tt(t) {
+import { fileBrowserTouchTargetAttrs as Mt } from "./touchInteractionGuard.js";
+var zt = /* @__PURE__ */ _("<span class=truncate>"), _t = /* @__PURE__ */ _('<mark class="bg-warning/40 text-inherit rounded-sm">'), yt = /* @__PURE__ */ _("<span>"), It = /* @__PURE__ */ _('<div><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Modified'), Pt = /* @__PURE__ */ _('<div class=shrink-0><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Size'), kt = /* @__PURE__ */ _("<div>"), Tt = /* @__PURE__ */ _('<div><div class="flex items-center border-b border-border text-[11px] text-muted-foreground font-medium"><div><button type=button class="group w-full flex items-center min-w-0 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"><span class="flex items-center gap-2 min-w-0"><span class="flex-shrink-0 w-4 h-4"aria-hidden=true></span><span class="flex items-center min-w-0"><span class=truncate>Name</span></span></span></button></div></div><div class="flex-1 min-h-0 overflow-auto">'), Lt = /* @__PURE__ */ _('<span>No files matching "<!>"'), pt = /* @__PURE__ */ _('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Rt = /* @__PURE__ */ _('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Wt = /* @__PURE__ */ _("<span>This folder is empty"), rt = /* @__PURE__ */ _('<div class="shrink-0 px-3 py-1.5 text-left text-muted-foreground truncate">'), Ft = /* @__PURE__ */ _('<button type=button><div class="flex items-center gap-2 flex-1 min-w-0 px-3 py-1.5"><span class="flex-shrink-0 w-4 h-4">');
+function Et(t) {
   const a = tt(() => {
     if (!t.match || t.match.matchedIndices.length === 0)
       return [{
         text: t.name,
         highlight: !1
       }];
-    const $ = [], p = new Set(t.match.matchedIndices);
-    let D = "", S = !1;
+    const C = [], T = new Set(t.match.matchedIndices);
+    let S = "", $ = !1;
     for (let f = 0; f < t.name.length; f++) {
-      const y = p.has(f);
-      f === 0 ? (S = y, D = t.name[f]) : y === S ? D += t.name[f] : ($.push({
-        text: D,
-        highlight: S
-      }), D = t.name[f], S = y);
+      const y = T.has(f);
+      f === 0 ? ($ = y, S = t.name[f]) : y === $ ? S += t.name[f] : (C.push({
+        text: S,
+        highlight: $
+      }), S = t.name[f], $ = y);
     }
-    return D && $.push({
-      text: D,
-      highlight: S
-    }), $;
+    return S && C.push({
+      text: S,
+      highlight: $
+    }), C;
   });
   return (() => {
-    var $ = Dt();
-    return u($, m(st, {
+    var C = zt();
+    return u(C, m(st, {
       get each() {
         return a();
       },
-      children: (p) => m(W, {
+      children: (T) => m(W, {
         get when() {
-          return p.highlight;
+          return T.highlight;
         },
         get fallback() {
-          return ot(() => p.text);
+          return ot(() => T.text);
         },
         get children() {
-          var D = St();
-          return u(D, () => p.text), D;
+          var S = _t();
+          return u(S, () => T.text), S;
         }
       })
-    })), $;
+    })), C;
   })();
 }
-function Vt(t) {
-  const a = lt(), $ = vt(), p = () => (t.enableDragDrop ?? !0) && !!$, D = () => t.instanceId ?? "default", S = 32, f = xt({
+function Jt(t) {
+  const a = lt(), C = Ct(), T = () => (t.enableDragDrop ?? !0) && !!C, S = () => t.instanceId ?? "default", $ = 32, f = wt({
     count: () => a.currentFiles().length,
-    itemSize: () => S,
+    itemSize: () => $,
     overscan: 12
   }), y = tt(() => {
     const {
@@ -77,22 +78,22 @@ function Vt(t) {
   }) : "-", X = (r) => {
     const n = () => a.sortConfig(), l = () => n().field === r.field;
     return (() => {
-      var d = Mt();
-      return u(d, m(bt, {
+      var d = yt();
+      return u(d, m(St, {
         get class() {
           return H("w-3 h-3 transition-transform duration-150", l() && n().direction === "asc" && "rotate-180");
         }
-      })), E(() => U(d, H("ml-1 transition-all duration-150", l() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), d;
+      })), E(() => j(d, H("ml-1 transition-all duration-150", l() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), d;
     })();
-  }, K = nt("(min-width: 640px)"), A = nt("(min-width: 768px)"), [q, Q] = at(null), L = gt(q), N = (r, n, l) => Math.max(n, Math.min(l, r)), g = tt(() => {
-    const r = L()?.width ?? 0, n = K(), l = A(), d = a.listColumnRatios(), x = 160, h = 120, v = 80, z = 128, o = 96;
+  }, K = nt("(min-width: 640px)"), A = nt("(min-width: 768px)"), [q, U] = at(null), L = vt(q), N = (r, n, l) => Math.max(n, Math.min(l, r)), h = tt(() => {
+    const r = L()?.width ?? 0, n = K(), l = A(), d = a.listColumnRatios(), x = 160, g = 120, v = 80, z = 128, o = 96;
     if (!n || r <= 0)
       return {
         width: r,
         showModified: n,
         showSize: l,
         minName: x,
-        minModified: h,
+        minModified: g,
         minSize: v,
         modifiedWidth: z,
         sizeWidth: o
@@ -100,42 +101,42 @@ function Vt(t) {
     if (!l) {
       const I = d.size, k = Math.max(0, 1 - I);
       let P = (k > 0 ? d.modifiedAt / k : d.modifiedAt) * r;
-      return P = N(P, h, Math.max(h, r - x)), {
+      return P = N(P, g, Math.max(g, r - x)), {
         width: r,
         showModified: n,
         showSize: l,
         minName: x,
-        minModified: h,
+        minModified: g,
         minSize: v,
         modifiedWidth: P,
         sizeWidth: 0
       };
     }
-    let i = Math.max(h, d.modifiedAt * r), s = Math.max(v, d.size * r);
+    let i = Math.max(g, d.modifiedAt * r), s = Math.max(v, d.size * r);
     const b = Math.max(0, r - x);
     if (i + s > b) {
-      const I = i + s - b, k = Math.max(0, i - h), P = Math.max(0, s - v), R = k + P;
-      R > 0 && (i -= I * (k / R), s -= I * (P / R));
+      const I = i + s - b, k = Math.max(0, i - g), P = Math.max(0, s - v), p = k + P;
+      p > 0 && (i -= I * (k / p), s -= I * (P / p));
     }
-    return i = Math.max(h, i), s = Math.max(v, s), {
+    return i = Math.max(g, i), s = Math.max(v, s), {
       width: r,
       showModified: n,
       showSize: l,
       minName: x,
-      minModified: h,
+      minModified: g,
       minSize: v,
       modifiedWidth: i,
       sizeWidth: s
     };
-  }), G = () => g().modifiedWidth, V = () => g().sizeWidth, j = (r) => {
-    const n = g();
+  }), G = () => h().modifiedWidth, Q = () => h().sizeWidth, V = (r) => {
+    const n = h();
     if (!n.showModified || n.width <= 0) return;
     if (!n.showSize) {
       const I = a.listColumnRatios().size, k = Math.max(0, 1 - I);
       if (k <= 0) return;
-      const P = n.width, R = n.modifiedWidth, Y = Math.max(0, P - R), e = n.minName - Y, c = R - n.minModified, w = N(r, e, c);
+      const P = n.width, p = n.modifiedWidth, Y = Math.max(0, P - p), e = n.minName - Y, c = p - n.minModified, w = N(r, e, c);
       if (w === 0) return;
-      const C = Y + w, T = R - w, Z = C / P * k, dt = T / P * k;
+      const D = Y + w, R = p - w, Z = D / P * k, dt = R / P * k;
       a.setListColumnRatios({
         name: Z,
         modifiedAt: dt,
@@ -143,18 +144,18 @@ function Vt(t) {
       });
       return;
     }
-    const l = n.width, d = n.modifiedWidth, x = n.sizeWidth, h = Math.max(0, l - d - x), v = n.minName - h, z = d - n.minModified, o = N(r, v, z);
+    const l = n.width, d = n.modifiedWidth, x = n.sizeWidth, g = Math.max(0, l - d - x), v = n.minName - g, z = d - n.minModified, o = N(r, v, z);
     if (o === 0) return;
-    const i = h + o, s = d - o;
+    const i = g + o, s = d - o;
     a.setListColumnRatios({
       name: i / l,
       modifiedAt: s / l,
       size: x / l
     });
   }, J = (r) => {
-    const n = g();
+    const n = h();
     if (!n.showSize || n.width <= 0) return;
-    const l = n.width, d = n.modifiedWidth, x = n.sizeWidth, h = n.minModified - d, v = x - n.minSize, z = N(r, h, v);
+    const l = n.width, d = n.modifiedWidth, x = n.sizeWidth, g = n.minModified - d, v = x - n.minSize, z = N(r, g, v);
     if (z === 0) return;
     const o = d + z, i = x - z, s = Math.max(0, l - o - i);
     a.setListColumnRatios({
@@ -164,32 +165,32 @@ function Vt(t) {
     });
   };
   return (() => {
-    var r = It(), n = r.firstChild, l = n.firstChild, d = l.firstChild, x = d.firstChild, h = x.firstChild, v = h.nextSibling;
+    var r = Tt(), n = r.firstChild, l = n.firstChild, d = l.firstChild, x = d.firstChild, g = x.firstChild, v = g.nextSibling;
     v.firstChild;
     var z = n.nextSibling;
-    return et(Q, n), d.$$click = () => F("name"), u(v, m(X, {
+    return et(U, n), d.$$click = () => F("name"), u(v, m(X, {
       field: "name"
     }), null), u(l, m(W, {
       get when() {
-        return g().showModified;
+        return h().showModified;
       },
       get children() {
         return m(it, {
           direction: "horizontal",
-          onResize: j
+          onResize: V
         });
       }
     }), null), u(n, m(W, {
       get when() {
-        return g().showModified;
+        return h().showModified;
       },
       get children() {
-        var o = zt(), i = o.firstChild;
+        var o = It(), i = o.firstChild;
         return i.firstChild, i.$$click = () => F("modifiedAt"), u(i, m(X, {
           field: "modifiedAt"
         }), null), u(o, m(W, {
           get when() {
-            return g().showSize;
+            return h().showSize;
           },
           get children() {
             return m(it, {
@@ -198,8 +199,8 @@ function Vt(t) {
             });
           }
         }), null), E((s) => {
-          var b = H("relative shrink-0", g().showSize && "border-r border-border"), I = `${G()}px`;
-          return b !== s.e && U(o, s.e = b), I !== s.t && B(o, "width", s.t = I), s;
+          var b = H("relative shrink-0", h().showSize && "border-r border-border"), I = `${G()}px`;
+          return b !== s.e && j(o, s.e = b), I !== s.t && B(o, "width", s.t = I), s;
         }, {
           e: void 0,
           t: void 0
@@ -207,13 +208,13 @@ function Vt(t) {
       }
     }), null), u(n, m(W, {
       get when() {
-        return g().showSize;
+        return h().showSize;
       },
       get children() {
-        var o = _t(), i = o.firstChild;
+        var o = Pt(), i = o.firstChild;
         return i.firstChild, i.$$click = () => F("size"), u(i, m(X, {
           field: "size"
-        }), null), E((s) => B(o, "width", `${V()}px`)), o;
+        }), null), E((s) => B(o, "width", `${Q()}px`)), o;
       }
     }), null), ct(z, "scroll", f.onScroll), et((o) => {
       f.scrollRef(o), a.setScrollContainer(o);
@@ -223,20 +224,20 @@ function Vt(t) {
       },
       get fallback() {
         return (() => {
-          var o = pt();
+          var o = Rt();
           return u(o, m(W, {
             get when() {
               return a.filterQueryApplied().trim();
             },
             get fallback() {
-              return Lt();
+              return Wt();
             },
             get children() {
               return [(() => {
-                var i = Pt(), s = i.firstChild, b = s.nextSibling;
+                var i = Lt(), s = i.firstChild, b = s.nextSibling;
                 return b.nextSibling, u(i, () => a.filterQueryApplied(), b), i;
               })(), (() => {
-                var i = kt();
+                var i = pt();
                 return i.$$click = () => a.setFilterQuery(""), i;
               })()];
             }
@@ -244,34 +245,34 @@ function Vt(t) {
         })();
       },
       get children() {
-        var o = yt();
+        var o = kt();
         return u(o, m(st, {
           get each() {
             return y();
           },
-          children: (i) => m(Wt, {
+          children: (i) => m(At, {
             item: i,
             formatSize: O,
             formatDate: M,
             get showModified() {
-              return g().showModified;
+              return h().showModified;
             },
             get showSize() {
-              return g().showSize;
+              return h().showSize;
             },
             get modifiedWidthPx() {
               return G();
             },
             get sizeWidthPx() {
-              return V();
+              return Q();
             },
             get instanceId() {
-              return D();
+              return S();
             },
             get enableDragDrop() {
-              return p();
+              return T();
             },
-            dragContext: $
+            dragContext: C
           })
         })), E((i) => {
           var s = `${f.paddingTop()}px`, b = `${f.paddingBottom()}px`;
@@ -282,43 +283,43 @@ function Vt(t) {
         }), o;
       }
     })), E((o) => {
-      var i = H("flex flex-col h-full min-h-0", t.class), s = H("relative flex-1 min-w-0", g().showModified && "border-r border-border");
-      return i !== o.e && U(r, o.e = i), s !== o.t && U(l, o.t = s), o;
+      var i = H("flex flex-col h-full min-h-0", t.class), s = H("relative flex-1 min-w-0", h().showModified && "border-r border-border");
+      return i !== o.e && j(r, o.e = i), s !== o.t && j(l, o.t = s), o;
     }, {
       e: void 0,
       t: void 0
     }), r;
   })();
 }
-function Wt(t) {
-  const a = lt(), $ = () => a.isSelected(t.item.id), p = () => a.getFilterMatchForId(t.item.id), D = ft(() => t.item), S = Ct(a, D);
+function At(t) {
+  const a = lt(), C = () => a.isSelected(t.item.id), T = () => a.getFilterMatchForId(t.item.id), S = ht(() => t.item), $ = $t(a, S);
   let f, y = null, F = 0, O = 0, M = !1;
   const X = 5, K = 500;
   let A = null;
-  const [q, Q] = at(!1), L = () => f === "touch" || f === "pen", N = () => t.item.type === "folder", g = () => N() && t.enableDragDrop && t.dragContext, G = () => {
-    if (!g() || !t.dragContext) return !1;
+  const [q, U] = at(!1), L = () => f === "touch" || f === "pen", N = () => t.item.type === "folder", h = () => N() && t.enableDragDrop && t.dragContext, G = () => {
+    if (!h() || !t.dragContext) return !1;
     const e = t.dragContext.dragState();
     return e.isDragging ? t.dragContext.canDropOn(e.draggedItems, t.item.path, t.item, t.instanceId) : !1;
-  }, V = () => {
+  }, Q = () => {
     if (!t.dragContext) return !1;
     const e = t.dragContext.dragState();
     return e.isDragging ? e.draggedItems.some((c) => c.item.id === t.item.id) : !1;
-  }, j = () => {
+  }, V = () => {
     A !== null && (clearTimeout(A), A = null);
   }, J = () => {
-    typeof document > "u" || (document.removeEventListener("pointermove", d, !0), document.removeEventListener("pointerup", x, !0), document.removeEventListener("pointercancel", h, !0));
+    typeof document > "u" || (document.removeEventListener("pointermove", d, !0), document.removeEventListener("pointerup", x, !0), document.removeEventListener("pointercancel", g, !0));
   }, r = () => {
-    typeof document > "u" || (document.addEventListener("pointermove", d, !0), document.addEventListener("pointerup", x, !0), document.addEventListener("pointercancel", h, !0));
+    typeof document > "u" || (document.addEventListener("pointermove", d, !0), document.addEventListener("pointerup", x, !0), document.addEventListener("pointercancel", g, !0));
   }, n = (e) => {
-    j(), J(), M && t.dragContext && t.dragContext.endDrag(e), y = null, M = !1;
+    V(), J(), M && t.dragContext && t.dragContext.endDrag(e), y = null, M = !1;
   };
-  ht(() => {
+  xt(() => {
     n(!1);
   });
   const l = (e, c) => {
     if (!t.enableDragDrop || !t.dragContext || M) return;
-    M = !0, $() || a.selectItem(t.item.id, !1);
-    const w = a.getSelectedItemsList(), T = (w.length > 0 && $() ? w : [t.item]).map((Z) => ({
+    M = !0, C() || a.selectItem(t.item.id, !1);
+    const w = a.getSelectedItemsList(), R = (w.length > 0 && C() ? w : [t.item]).map((Z) => ({
       item: Z,
       sourceInstanceId: t.instanceId,
       sourcePath: a.currentPath()
@@ -328,39 +329,39 @@ function Wt(t) {
         navigator.vibrate(50);
       } catch {
       }
-    t.dragContext.startDrag(T, e, c);
+    t.dragContext.startDrag(R, e, c);
   }, d = (e) => {
     if (y !== e.pointerId) return;
-    const c = e.clientX - F, w = e.clientY - O, C = Math.sqrt(c * c + w * w);
-    if (L() && !M && C > 10) {
+    const c = e.clientX - F, w = e.clientY - O, D = Math.sqrt(c * c + w * w);
+    if (L() && !M && D > 10) {
       n(!1);
       return;
     }
-    !L() && !M && C > X && l(e.clientX, e.clientY), M && t.dragContext && t.dragContext.updateDrag(e.clientX, e.clientY);
+    !L() && !M && D > X && l(e.clientX, e.clientY), M && t.dragContext && t.dragContext.updateDrag(e.clientX, e.clientY);
   }, x = (e) => {
-    y === e.pointerId && (S.onPointerUp(), n(!0));
-  }, h = (e) => {
-    y === e.pointerId && (S.onPointerCancel(), n(!1));
+    y === e.pointerId && ($.onPointerUp(), n(!0));
+  }, g = (e) => {
+    y === e.pointerId && ($.onPointerCancel(), n(!1));
   }, v = (e) => {
-    f = e.pointerType, S.onPointerDown(e), !(e.pointerType === "mouse" && e.button !== 0) && (!t.enableDragDrop || !t.dragContext || (y = e.pointerId, F = e.clientX, O = e.clientY, M = !1, r(), L() && (j(), A = setTimeout(() => {
+    f = e.pointerType, $.onPointerDown(e), !(e.pointerType === "mouse" && e.button !== 0) && (!t.enableDragDrop || !t.dragContext || (y = e.pointerId, F = e.clientX, O = e.clientY, M = !1, r(), L() && (V(), A = setTimeout(() => {
       y !== null && !M && l(F, O);
     }, K))));
   }, z = (e) => {
-    f = e.pointerType, S.onPointerMove(e);
+    f = e.pointerType, $.onPointerMove(e);
   }, o = (e) => {
-    if (!g() || !t.dragContext) return;
+    if (!h() || !t.dragContext) return;
     const c = t.dragContext.dragState();
     if (!c.isDragging) return;
-    Q(!0);
-    const w = t.dragContext.canDropOn(c.draggedItems, t.item.path, t.item, t.instanceId), T = e.currentTarget?.getBoundingClientRect() ?? null;
+    U(!0);
+    const w = t.dragContext.canDropOn(c.draggedItems, t.item.path, t.item, t.instanceId), R = e.currentTarget?.getBoundingClientRect() ?? null;
     t.dragContext.setDropTarget({
       instanceId: t.instanceId,
       targetPath: t.item.path,
       targetItem: t.item
-    }, w, T);
+    }, w, R);
   }, i = (e) => {
     if (!t.dragContext) return;
-    Q(!1);
+    U(!1);
     const c = t.dragContext.dragState();
     c.isDragging && c.dropTarget?.targetPath === t.item.path && t.dragContext.setDropTarget(null, !1);
   }, s = (e) => {
@@ -368,7 +369,7 @@ function Wt(t) {
       M = !1;
       return;
     }
-    if (!S.consumeClickSuppression(e)) {
+    if (!$.consumeClickSuppression(e)) {
       if (L()) {
         a.openItem(t.item);
         return;
@@ -379,62 +380,73 @@ function Wt(t) {
     L() || a.openItem(t.item);
   }, I = (e) => {
     if (e.preventDefault(), e.stopPropagation(), L()) return;
-    $() || a.selectItem(t.item.id, !1);
+    C() || a.selectItem(t.item.id, !1);
     const c = a.getSelectedItemsList(), w = c.length > 0 ? c : [t.item];
     a.showContextMenu({
       x: e.clientX,
       y: e.clientY,
       items: w
     });
-  }, k = () => t.item.type === "folder" ? wt : $t(t.item.extension), P = () => t.dragContext?.dragState(), R = () => P()?.isDragging ?? !1, Y = () => q() && R() && g();
+  }, k = () => t.item.type === "folder" ? bt : Dt(t.item.extension), P = () => t.dragContext?.dragState(), p = () => P()?.isDragging ?? !1, Y = () => q() && p() && h();
   return (() => {
-    var e = Rt(), c = e.firstChild, w = c.firstChild;
-    return e.addEventListener("pointerleave", i), e.addEventListener("pointerenter", o), e.$$pointermove = z, e.$$pointerdown = v, e.$$contextmenu = I, e.$$dblclick = b, e.$$click = s, u(w, m(mt, {
+    var e = Ft(), c = e.firstChild, w = c.firstChild;
+    return mt(e, ut(Mt, {
+      onClick: s,
+      onDblClick: b,
+      onContextMenu: I,
+      onPointerDown: v,
+      onPointerMove: z,
+      onPointerEnter: o,
+      onPointerLeave: i,
+      get class() {
+        return H(
+          "group w-full h-8 flex items-center text-xs cursor-pointer",
+          "transition-all duration-150 ease-out",
+          "hover:bg-accent/50",
+          "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+          C() && "bg-accent text-accent-foreground",
+          // Drag state styling - being dragged items become translucent
+          Q() && "opacity-40 scale-[0.98]",
+          // Drop target styling - enhanced visual feedback
+          Y() && G() && ["bg-primary/15 outline outline-2 outline-primary/60", "scale-[1.01] shadow-sm shadow-primary/10"],
+          Y() && !G() && ["bg-destructive/10 outline outline-2 outline-dashed outline-destructive/50"]
+        );
+      }
+    }), !1, !0), u(w, m(ft, {
       get component() {
         return k();
       },
       class: "w-4 h-4"
-    })), u(c, m(Tt, {
+    })), u(c, m(Et, {
       get name() {
         return t.item.name;
       },
       get match() {
-        return p();
+        return T();
       }
     }), null), u(e, m(W, {
       get when() {
         return t.showModified;
       },
       get children() {
-        var C = rt();
-        return u(C, () => t.formatDate(t.item.modifiedAt)), E((T) => B(C, "width", `${t.modifiedWidthPx}px`)), C;
+        var D = rt();
+        return u(D, () => t.formatDate(t.item.modifiedAt)), E((R) => B(D, "width", `${t.modifiedWidthPx}px`)), D;
       }
     }), null), u(e, m(W, {
       get when() {
         return t.showSize;
       },
       get children() {
-        var C = rt();
-        return u(C, (() => {
-          var T = ot(() => t.item.type === "folder");
-          return () => T() ? "-" : t.formatSize(t.item.size);
-        })()), E((T) => B(C, "width", `${t.sizeWidthPx}px`)), C;
+        var D = rt();
+        return u(D, (() => {
+          var R = ot(() => t.item.type === "folder");
+          return () => R() ? "-" : t.formatSize(t.item.size);
+        })()), E((R) => B(D, "width", `${t.sizeWidthPx}px`)), D;
       }
-    }), null), E(() => U(e, H(
-      "group w-full h-8 flex items-center text-xs cursor-pointer",
-      "transition-all duration-150 ease-out",
-      "hover:bg-accent/50",
-      "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
-      $() && "bg-accent text-accent-foreground",
-      // Drag state styling - being dragged items become translucent
-      V() && "opacity-40 scale-[0.98]",
-      // Drop target styling - enhanced visual feedback
-      Y() && G() && ["bg-primary/15 outline outline-2 outline-primary/60", "scale-[1.01] shadow-sm shadow-primary/10"],
-      Y() && !G() && ["bg-destructive/10 outline outline-2 outline-dashed outline-destructive/50"]
-    ))), e;
+    }), null), e;
   })();
 }
-ut(["click", "dblclick", "contextmenu", "pointerdown", "pointermove"]);
+gt(["click"]);
 export {
-  Vt as FileListView
+  Jt as FileListView
 };

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

@@ -0,0 +1,5 @@
+export declare const FILE_BROWSER_TOUCH_TARGET_ATTR = "data-file-browser-touch-target";
+export declare const FILE_BROWSER_TOUCH_TARGET_VALUE = "true";
+export declare const fileBrowserTouchTargetAttrs: {
+    readonly "data-file-browser-touch-target": "true";
+};

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

@@ -0,0 +1,8 @@
+const t = "data-file-browser-touch-target", T = "true", r = {
+  [t]: T
+};
+export {
+  t as FILE_BROWSER_TOUCH_TARGET_ATTR,
+  T as FILE_BROWSER_TOUCH_TARGET_VALUE,
+  r as fileBrowserTouchTargetAttrs
+};

package/dist/components/ui/MobileKeyboard.d.ts

@@ -0,0 +1,22 @@
+import { type JSX } from 'solid-js';
+export interface MobileKeyboardSuggestionItem {
+    id: string;
+    label: string;
+    detail?: string;
+    kind?: string;
+}
+export interface MobileKeyboardProps<TSuggestion extends MobileKeyboardSuggestionItem = MobileKeyboardSuggestionItem> extends JSX.HTMLAttributes<HTMLDivElement> {
+    /** Whether the keyboard is visible */
+    visible: boolean;
+    /** Called whenever a key resolves to a terminal payload */
+    onKey?: (key: string) => void;
+    /** Called when the user dismisses the keyboard from the built-in control */
+    onDismiss?: () => void;
+    /** Additional terminal-friendly quick insert keys shown in the utility strip */
+    quickInserts?: readonly string[];
+    /** Optional terminal suggestions shown in a dedicated candidate rail */
+    suggestions?: readonly TSuggestion[];
+    /** Called when the user picks one of the terminal suggestions */
+    onSuggestionSelect?: (suggestion: TSuggestion) => void;
+}
+export declare function MobileKeyboard<TSuggestion extends MobileKeyboardSuggestionItem = MobileKeyboardSuggestionItem>(props: MobileKeyboardProps<TSuggestion>): JSX.Element;