@floegence/floe-webapp-core 0.46.4 → 0.46.6

package/dist/components/ui/Dialog.js

@@ -9,7 +9,7 @@ import { resolveSurfacePortalHost as ie, DIALOG_SURFACE_BOUNDARY_ATTR as O, isSu
 import { LOCAL_INTERACTION_SURFACE_ATTR as ce } from "./localInteractionSurface.js";
 import { createFloatingPresence as ue } from "./floatingPresence.js";
 import { useDialogPlacement as se } from "./DialogPlacementContext.js";
-var fe = /* @__PURE__ */ u("<span aria-hidden=true>"), ge = /* @__PURE__ */ u('<h2 class="text-sm font-semibold">'), me = /* @__PURE__ */ u('<p class="mt-0.5 text-xs text-muted-foreground">'), he = /* @__PURE__ */ u('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), be = /* @__PURE__ */ u('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), we = /* @__PURE__ */ u('<div><div></div><div class="relative z-[1] flex h-full w-full items-center justify-center"><div><div class="flex-1 overflow-auto overscroll-contain p-3">'), ve = /* @__PURE__ */ u("<div>");
+var fe = /* @__PURE__ */ u("<span aria-hidden=true>"), ge = /* @__PURE__ */ u('<h2 class="text-sm font-semibold">'), me = /* @__PURE__ */ u('<p class="mt-0.5 text-xs text-muted-foreground">'), he = /* @__PURE__ */ u('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), be = /* @__PURE__ */ u('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), ve = /* @__PURE__ */ u('<div><div></div><div class="pointer-events-none relative z-[1] flex h-full w-full items-center justify-center"><div><div class="flex-1 overflow-auto overscroll-contain p-3">'), we = /* @__PURE__ */ u("<div>");
 const ye = {
   display: "none"
 };
@@ -35,16 +35,16 @@ function $e(e) {
 }
 function _e(e) {
   const g = se(), d = J(), F = () => `dialog-${d}-title`, D = () => `dialog-${d}-description`;
-  let w;
-  const [v, G] = I(null), [M, z] = I(0), [L, Z] = I(0), s = ue({
-    open: () => e.open && !!v() && M() > 0,
+  let v;
+  const [w, G] = I(null), [M, z] = I(0), [L, Z] = I(0), s = ue({
+    open: () => e.open && !!w() && M() > 0,
     exitDurationMs: 120
-  }), y = () => s.mounted() && !!v() && M() > 0, U = (t) => {
+  }), y = () => s.mounted() && !!w() && M() > 0, U = (t) => {
     G(t), xe(() => {
-      te(v) === t && z((i) => i + 1);
+      te(w) === t && z((i) => i + 1);
     });
   }, x = H(() => y() ? ie({
-    owner: v()
+    owner: w()
   }) : {
     host: null,
     boundaryHost: null,
@@ -71,8 +71,8 @@ function _e(e) {
     });
   }), oe({
     open: y,
-    root: () => w,
-    containsTarget: (t) => n() ? W(t) : typeof Node < "u" && t instanceof Node ? !!w?.contains(t) : !1,
+    root: () => v,
+    containsTarget: (t) => n() ? W(t) : typeof Node < "u" && t instanceof Node ? !!v?.contains(t) : !1,
     onClose: () => e.onOpenChange(!1),
     lockBodyScroll: () => !n(),
     trapFocus: !0,
@@ -95,7 +95,7 @@ function _e(e) {
           return V();
         },
         get children() {
-          var t = we(), i = t.firstChild, m = i.nextSibling, o = m.firstChild, _ = o.firstChild;
+          var t = ve(), i = t.firstChild, m = i.nextSibling, o = m.firstChild, _ = o.firstChild;
           f(t, "data-floe-dialog-overlay-root", d), k(t, P({
             get "data-floe-dialog-mode"() {
               return n() ? "surface" : "global";
@@ -133,12 +133,12 @@ function _e(e) {
             },
             onClick: () => e.onOpenChange(!1)
           }), !1, !1);
-          var h = w;
-          return typeof h == "function" ? E(h, o) : w = o, f(o, "data-floe-dialog-panel", d), k(o, P(() => ({
+          var h = v;
+          return typeof h == "function" ? E(h, o) : v = o, f(o, "data-floe-dialog-panel", d), k(o, P(() => ({
             [O]: p()
           }), {
             get class() {
-              return A(n() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "floe-floating-presence floe-floating-dialog-panel", "flex flex-col", e.class);
+              return A(n() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "floe-floating-presence floe-floating-dialog-panel", "pointer-events-auto flex flex-col", e.class);
             },
             get "data-floating-presence"() {
               return s.state();
@@ -247,7 +247,7 @@ function Te(e) {
       })];
     },
     get children() {
-      return e.children ?? ve();
+      return e.children ?? we();
     }
   });
 }

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

@@ -0,0 +1,21 @@
+import type { FileItem } from '../file-browser/types';
+import { type BasePickerProps } from './picker/PickerBase';
+export type FileOpenPickerSelectionMode = 'single' | 'multiple';
+export interface FileOpenPickerProps extends BasePickerProps {
+    /** Select one file or an ordered set of files. */
+    selectionMode?: FileOpenPickerSelectionMode;
+    /** Selected file paths restored whenever the picker opens. */
+    initialSelectedPaths?: readonly string[];
+    /** Maximum number of files accepted in multiple mode. */
+    maxSelections?: number;
+    /** Filters files without affecting directory navigation. */
+    fileFilter?: (item: FileItem) => boolean;
+    /** Called with selected paths in user selection order. */
+    onSelect: (paths: string[]) => void;
+    /** Empty-state copy for the current directory. */
+    emptyText?: string;
+}
+export declare function normalizeFileOpenSelection(paths: readonly string[] | undefined, maxSelections?: number): string[];
+export declare function updateFileOpenSelection(current: readonly string[], path: string, mode: FileOpenPickerSelectionMode, maxSelections?: number): string[];
+/** Modal file picker with ordered single or multiple selection. */
+export declare function FileOpenPicker(props: FileOpenPickerProps): import("solid-js").JSX.Element;

package/dist/components/ui/FileOpenPicker.js

@@ -0,0 +1,244 @@
+import { createComponent as o, insert as a, use as B, effect as D, setAttribute as w, className as L, memo as R, template as b, delegateEvents as A } from "solid-js/web";
+import { createSignal as K, createMemo as j, Show as P, For as G } from "solid-js";
+import { cn as O } from "../../utils/cn.js";
+import { deferNonBlocking as H } from "../../utils/defer.js";
+import { Check as U } from "../icons/index.js";
+import { FileItemIcon as V } from "../file-browser/FileIcons.js";
+import { Button as E } from "./Button.js";
+import { Dialog as Y } from "./Dialog.js";
+import { usePickerTree as q, normalizePath as x, PathInputBar as J, PickerBreadcrumb as Q, PickerFolderTree as W, NewFolderSection as X, getParentPath as Z } from "./picker/PickerBase.js";
+var ee = /* @__PURE__ */ b('<div class="flex flex-col gap-2 -mt-1"><div class="flex min-h-[260px] flex-col overflow-hidden rounded border border-border sm:h-[300px] sm:flex-row"><div class="min-h-[140px] min-w-0 flex-1 overflow-y-auto"role=listbox>'), te = /* @__PURE__ */ b('<div class="flex items-center w-full gap-2"><span class="flex-1 text-[11px] text-muted-foreground truncate">'), ne = /* @__PURE__ */ b('<div class="flex h-full items-center justify-center px-4 text-center text-xs text-muted-foreground">'), re = /* @__PURE__ */ b('<span class="ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[10px] text-primary-foreground">'), le = /* @__PURE__ */ b("<button type=button role=option><span class=truncate>");
+function ie(e, u) {
+  const d = S(u), f = /* @__PURE__ */ new Set(), m = [];
+  for (const n of e ?? []) {
+    const h = x(n);
+    if (!(h === "/" || f.has(h)) && (f.add(h), m.push(h), m.length >= d))
+      break;
+  }
+  return m;
+}
+function oe(e, u, d, f) {
+  const m = x(u);
+  if (m === "/") return [...e];
+  if (d === "single") return [m];
+  const n = e.indexOf(m);
+  return n >= 0 ? e.filter((h, v) => v !== n) : e.length >= S(f) ? [...e] : [...e, m];
+}
+function S(e) {
+  return e == null || !Number.isFinite(e) ? Number.POSITIVE_INFINITY : Math.max(1, Math.floor(e));
+}
+function xe(e) {
+  const u = () => e.selectionMode ?? "single", [d, f] = K([]), n = q({
+    initialPath: () => {
+      if (e.initialPath) return e.initialPath;
+      const t = e.initialSelectedPaths?.[0];
+      return t ? Z(t) : "/";
+    },
+    open: () => e.open,
+    files: () => e.files,
+    // eslint-disable-next-line solid/reactivity -- filter is a static callback
+    filter: e.filter ? (t) => e.filter(t) : void 0,
+    // eslint-disable-next-line solid/reactivity -- onExpand is a static callback
+    onExpand: e.onExpand,
+    // eslint-disable-next-line solid/reactivity -- ensurePath is a static callback
+    ensurePath: e.ensurePath,
+    homeLabel: () => e.homeLabel,
+    homePath: () => e.homePath,
+    onReset: () => {
+      f(ie(e.initialSelectedPaths, u() === "single" ? 1 : e.maxSelections));
+    }
+  }), h = j(() => {
+    const t = x(n.selectedPath());
+    return (t === "/" ? e.files : n.folderIndex().get(t)?.children ?? []).filter((r) => r.type === "file" && (!e.fileFilter || e.fileFilter(r)));
+  }), v = (t) => d().indexOf(x(t)), T = () => u() === "multiple" && d().length >= S(e.maxSelections), z = (t) => {
+    f((i) => oe(i, t.path, u(), e.maxSelections));
+  }, y = (t = d()) => {
+    if (t.length === 0 || n.pathPending()) return;
+    const i = e.onSelect;
+    e.onOpenChange(!1), H(() => i([...t]));
+  }, M = (t, i) => {
+    let r;
+    t.key === "ArrowDown" && (r = Math.min(i + 1, h().length - 1)), t.key === "ArrowUp" && (r = Math.max(i - 1, 0)), t.key === "Home" && (r = 0), t.key === "End" && (r = h().length - 1), !(r == null || r < 0) && (t.preventDefault(), k[r]?.focus());
+  }, k = [];
+  return o(Y, {
+    get open() {
+      return e.open;
+    },
+    get onOpenChange() {
+      return e.onOpenChange;
+    },
+    get title() {
+      return e.title ?? "Select File";
+    },
+    get class() {
+      return O("max-w-2xl", e.class);
+    },
+    get footer() {
+      return (() => {
+        var t = te(), i = t.firstChild;
+        return a(i, (() => {
+          var r = R(() => d().length === 0);
+          return () => r() ? "No files selected" : `${d().length} selected`;
+        })()), a(t, o(E, {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => e.onOpenChange(!1),
+          get children() {
+            return e.cancelText ?? "Cancel";
+          }
+        }), null), a(t, o(E, {
+          variant: "primary",
+          size: "sm",
+          onClick: () => y(),
+          get disabled() {
+            return d().length === 0 || n.pathPending();
+          },
+          get children() {
+            return e.confirmText ?? "Select";
+          }
+        }), null), t;
+      })();
+    },
+    get children() {
+      var t = ee(), i = t.firstChild, r = i.firstChild;
+      return a(t, o(J, {
+        get value() {
+          return n.pathInput;
+        },
+        onInput: (s) => {
+          n.setPathInput(s), n.setPathInputError("");
+        },
+        get pending() {
+          return n.pathPending;
+        },
+        get error() {
+          return n.pathInputError;
+        },
+        get onGo() {
+          return n.handlePathInputGo;
+        },
+        get onKeyDown() {
+          return n.handlePathInputKeyDown;
+        }
+      }), i), a(t, o(Q, {
+        get segments() {
+          return n.breadcrumbSegments;
+        },
+        get onClick() {
+          return n.handleBreadcrumbClick;
+        }
+      }), i), a(i, o(W, {
+        get rootFolders() {
+          return n.rootFolders;
+        },
+        get selectedPath() {
+          return n.selectedPath;
+        },
+        get expandedPaths() {
+          return n.expandedPaths;
+        },
+        get revealNonce() {
+          return n.revealNonce;
+        },
+        get onToggle() {
+          return n.toggleExpand;
+        },
+        get onSelect() {
+          return n.handleSelectFolder;
+        },
+        get onSelectRoot() {
+          return n.handleSelectRoot;
+        },
+        get isSelectable() {
+          return n.isSelectable;
+        },
+        get homeLabel() {
+          return n.homeLabel;
+        },
+        class: "min-h-[120px] min-w-0 border-0 border-b border-border rounded-none sm:h-full sm:w-1/2 sm:border-b-0 sm:border-r"
+      }), r), a(r, o(P, {
+        get when() {
+          return h().length > 0;
+        },
+        get fallback() {
+          return (() => {
+            var s = ne();
+            return a(s, () => e.emptyText ?? "No matching files in this directory"), s;
+          })();
+        },
+        get children() {
+          return o(G, {
+            get each() {
+              return h();
+            },
+            children: (s, F) => {
+              const g = () => v(s.path), I = () => T() && g() < 0;
+              return (() => {
+                var c = le(), C = c.firstChild;
+                return c.$$keydown = (l) => M(l, F()), c.$$dblclick = () => {
+                  u() === "single" && y([x(s.path)]);
+                }, c.$$click = () => z(s), B((l) => {
+                  k[F()] = l;
+                }, c), a(c, o(V, {
+                  item: s,
+                  class: "w-4 h-4 flex-shrink-0"
+                }), C), a(C, () => s.name), a(c, o(P, {
+                  get when() {
+                    return g() >= 0;
+                  },
+                  get children() {
+                    var l = re();
+                    return a(l, o(P, {
+                      get when() {
+                        return u() === "multiple";
+                      },
+                      get fallback() {
+                        return o(U, {
+                          class: "h-3 w-3"
+                        });
+                      },
+                      get children() {
+                        return g() + 1;
+                      }
+                    })), l;
+                  }
+                }), null), D((l) => {
+                  var $ = g() >= 0, p = I(), _ = I() ? "Selection limit reached" : s.name, N = O("flex min-h-9 w-full items-center gap-2 px-2 py-1.5 text-left text-xs", "transition-colors duration-100 hover:bg-accent/60", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-45", g() >= 0 && "bg-accent text-accent-foreground font-medium");
+                  return $ !== l.e && w(c, "aria-selected", l.e = $), p !== l.t && (c.disabled = l.t = p), _ !== l.a && w(c, "title", l.a = _), N !== l.o && L(c, l.o = N), l;
+                }, {
+                  e: void 0,
+                  t: void 0,
+                  a: void 0,
+                  o: void 0
+                }), c;
+              })();
+            }
+          });
+        }
+      })), a(t, o(P, {
+        get when() {
+          return e.onCreateFolder;
+        },
+        get children() {
+          return o(X, {
+            get parentPath() {
+              return n.selectedPath;
+            },
+            get onCreateFolder() {
+              return e.onCreateFolder;
+            },
+            get toDisplayPath() {
+              return n.toDisplayPath;
+            }
+          });
+        }
+      }), null), D(() => w(r, "aria-multiselectable", u() === "multiple" ? "true" : void 0)), t;
+    }
+  });
+}
+A(["click", "dblclick", "keydown"]);
+export {
+  xe as FileOpenPicker,
+  ie as normalizeFileOpenSelection,
+  oe as updateFileOpenSelection
+};

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

@@ -21,6 +21,7 @@ export { Tabs, TabPanel, type TabsProps, type TabPanelProps, type TabItem, type
 export { DirectoryPicker, type DirectoryPickerProps } from './DirectoryPicker';
 export { DirectoryInput, type DirectoryInputProps, type DirectoryInputSize, } from './DirectoryInput';
 export { FileSavePicker, type FileSavePickerProps } from './FileSavePicker';
+export { FileOpenPicker, normalizeFileOpenSelection, updateFileOpenSelection, type FileOpenPickerProps, type FileOpenPickerSelectionMode, } from './FileOpenPicker';
 export { type BasePickerProps, type PickerEnsurePath, type PickerEnsurePathOptions, type PickerPathResolveResult, type PickerPathResolveStatus, type PickerPathNavigateReason, } from './picker/PickerBase';
 export { QuoteBlock, type QuoteBlockProps } from './QuoteBlock';
 export { HighlightBlock, InfoBlock, WarningBlock, SuccessBlock, ErrorBlock, NoteBlock, TipBlock, type HighlightBlockProps, type HighlightVariant, } from './HighlightBlock';

package/dist/components/ui/picker/PickerBase.d.ts

@@ -1,11 +1,11 @@
 /**
- * Shared internals for DirectoryPicker and FileSavePicker.
+ * Shared internals for DirectoryPicker, FileOpenPicker, and FileSavePicker.
  * NOT exported from the package entry — these are implementation details.
  */
 import { type Accessor, type JSX } from 'solid-js';
 import type { FileItem } from '../../file-browser/types';
 /**
- * Base props shared by DirectoryPicker and FileSavePicker.
+ * Base props shared by the directory and file pickers.
  * Provides consistent API for file tree navigation.
  */
 export interface BasePickerProps {