@floegence/floe-webapp-core 0.48.5 → 0.49.0

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

@@ -1,38 +1,17 @@
-import { type PickerEnsurePath } from './picker/PickerBase';
-import type { FileItem } from '../file-browser/types';
+import { type PickerPanelProps } from './picker/PickerBase';
 export type DirectoryInputSize = 'sm' | 'md' | 'lg';
-export interface DirectoryInputProps {
-    /** Currently selected directory path */
+export interface DirectoryInputProps extends PickerPanelProps {
     value?: string;
-    /** Callback when directory is selected */
-    onChange?: (path: string) => void;
-    /** File tree data for the picker */
-    files: FileItem[];
-    /** Callback to load directory contents (for lazy loading) */
-    onExpand?: (path: string) => void | Promise<void>;
-    /** Async resolver that guarantees a target path exists in the current tree snapshot. */
-    ensurePath?: PickerEnsurePath;
-    /** Placeholder text when no directory is selected */
+    onChange?: (absolutePath: string) => void;
+    /** The containing form's lifecycle; close invalidates outstanding loads. */
+    open?: boolean;
     placeholder?: string;
-    /** Optional home directory path for display */
-    homePath?: string;
-    /** Label for home button in picker */
-    homeLabel?: string;
-    /** Initial path when picker opens */
-    initialPath?: string;
-    /** Whether the input is disabled */
     disabled?: boolean;
-    /** Input size variant */
     size?: DirectoryInputSize;
-    /** Error message - also sets visual error state */
     error?: string;
-    /** Helper text displayed below the input */
     helperText?: string;
-    /** Additional CSS class */
     class?: string;
-    /** Maximum height for the tree panel (default: '200px') */
-    treeMaxHeight?: string;
-    /** Whether the tree panel is expanded by default (default: true) */
     defaultExpanded?: boolean;
 }
+/** Inline picker keeps the surrounding form visible and commits only validated absolute paths. */
 export declare function DirectoryInput(props: DirectoryInputProps): import("solid-js").JSX.Element;

package/dist/components/ui/DirectoryInput.js

@@ -1,137 +1,63 @@
-import { insert as o, createComponent as a, memo as k, effect as y, className as p, template as c, delegateEvents as S } from "solid-js/web";
-import { splitProps as $, createSignal as C, createEffect as f, on as _, Show as g } from "solid-js";
-import { cn as u } from "../../utils/cn.js";
-import { usePickerTree as T, PickerBreadcrumb as F, PickerFolderTree as L } from "./picker/PickerBase.js";
-import { Folder as z, ChevronRight as N } from "../icons/index.js";
-var R = /* @__PURE__ */ c('<div class="border border-input rounded-b-md overflow-hidden bg-background shadow-sm border-t-0"><div class="px-2 py-1 border-b border-border/50 bg-muted/30">'), B = /* @__PURE__ */ c('<p class="mt-1 text-[11px] text-error"role=alert>'), D = /* @__PURE__ */ c('<p class="mt-1 text-[11px] text-muted-foreground">'), H = /* @__PURE__ */ c("<div><button type=button><span>");
-const M = {
-  sm: {
-    container: "h-7 px-2",
-    icon: "w-3.5 h-3.5",
-    text: "text-xs"
-  },
-  md: {
-    container: "h-8 px-2.5",
-    icon: "w-4 h-4",
-    text: "text-xs"
-  },
-  lg: {
-    container: "h-9 px-3",
-    icon: "w-4 h-4",
-    text: "text-sm"
-  }
-};
-function A(b) {
-  const [e] = $(b, ["value", "onChange", "files", "onExpand", "ensurePath", "placeholder", "homePath", "homeLabel", "initialPath", "disabled", "size", "error", "helperText", "class", "treeMaxHeight", "defaultExpanded"]), [d, v] = C(e.defaultExpanded !== !1), P = () => e.size ?? "md", i = () => M[P()];
-  f(() => {
-    d() && e.files.length === 0 && e.onExpand && e.onExpand("/");
-  });
-  const r = T({
-    initialPath: () => e.initialPath ?? "/",
-    open: () => !0,
-    files: () => e.files,
-    onExpand: (n) => e.onExpand?.(n),
-    // eslint-disable-next-line solid/reactivity -- ensurePath is a static callback
-    ensurePath: e.ensurePath,
-    homeLabel: () => e.homeLabel,
-    homePath: () => e.homePath
-  });
-  f(_(r.selectedPath, (n) => {
-    if (!d()) return;
-    const l = r.toDisplayPath(n);
-    e.onChange?.(l);
-  }));
-  const E = () => {
-    if (e.disabled) return;
-    const n = d();
-    !n && e.files.length === 0 && e.onExpand && e.onExpand("/"), v(!n);
-  }, w = () => e.value ? e.homePath && e.value.startsWith(e.homePath) ? "~" + (e.value.slice(e.homePath.length) || "") : e.value : null;
+import { insert as r, createComponent as l, mergeProps as $, memo as y, effect as C, className as x, setAttribute as f, template as a, delegateEvents as _ } from "solid-js/web";
+import { createSignal as E, mergeProps as S, Show as d } from "solid-js";
+import { cn as b } from "../../utils/cn.js";
+import { Folder as z, ChevronRight as A } from "../icons/index.js";
+import { formatPickerPath as N } from "./picker/PickerNavigation.js";
+import { usePickerNavigation as T, PickerPanel as D } from "./picker/PickerBase.js";
+var F = /* @__PURE__ */ a("<div class=mt-2>"), I = /* @__PURE__ */ a('<p role=alert class="mt-1 text-xs text-error">'), R = /* @__PURE__ */ a('<p class="mt-1 text-xs text-muted-foreground">'), V = /* @__PURE__ */ a('<div><button type=button><span class="min-w-0 flex-1 truncate">');
+function K(t) {
+  const [o, P] = E(t.defaultExpanded !== !1), w = S(t, {
+    get initialPath() {
+      return t.value || t.initialPath;
+    }
+  }), s = T(w, () => t.open ?? !0, (i) => t.onChange?.(i)), k = () => N(t.value ?? "", s.context()?.homePathAbs ?? t.homePath);
   return (() => {
-    var n = H(), l = n.firstChild, h = l.firstChild;
-    return l.$$click = E, o(l, a(z, {
-      get class() {
-        return u("text-muted-foreground flex-shrink-0", i().icon);
-      }
-    }), h), o(h, () => w() || e.placeholder || "Select a directory..."), o(l, a(N, {
+    var i = V(), n = i.firstChild, c = n.firstChild;
+    return n.$$click = () => P((e) => !e), r(n, l(z, {
+      class: "h-4 w-4 shrink-0 text-muted-foreground"
+    }), c), r(c, () => k() || t.placeholder || "Select a directory…"), r(n, l(A, {
       get class() {
-        return u("text-muted-foreground flex-shrink-0 transition-transform duration-150", i().icon, d() && "rotate-90");
+        return b("h-3.5 w-3.5 shrink-0 transition-transform", o() && "rotate-90");
       }
-    }), null), o(n, a(g, {
+    }), null), r(i, l(d, {
       get when() {
-        return d();
+        return o();
       },
       get children() {
-        var t = R(), s = t.firstChild;
-        return o(s, a(F, {
-          get segments() {
-            return r.breadcrumbSegments;
-          },
-          get onClick() {
-            return r.handleBreadcrumbClick;
-          }
-        })), o(t, a(L, {
-          get rootFolders() {
-            return r.rootFolders;
-          },
-          get selectedPath() {
-            return r.selectedPath;
-          },
-          get expandedPaths() {
-            return r.expandedPaths;
-          },
-          get revealNonce() {
-            return r.revealNonce;
-          },
-          get onToggle() {
-            return r.toggleExpand;
-          },
-          get onSelect() {
-            return r.handleSelectFolder;
-          },
-          get onSelectRoot() {
-            return r.handleSelectRoot;
-          },
-          get isSelectable() {
-            return r.isSelectable;
-          },
-          get homeLabel() {
-            return r.homeLabel;
-          },
-          class: "border-0 rounded-none",
-          get style() {
-            return {
-              "max-height": e.treeMaxHeight ?? "200px"
-            };
-          }
-        }), null), t;
+        var e = F();
+        return r(e, l(D, $(t, {
+          source: s
+        }))), e;
       }
-    }), null), o(n, a(g, {
+    }), null), r(i, l(d, {
       get when() {
-        return e.error;
+        return t.error;
       },
       get children() {
-        var t = B();
-        return o(t, () => e.error), t;
+        var e = I();
+        return r(e, () => t.error), e;
       }
-    }), null), o(n, a(g, {
+    }), null), r(i, l(d, {
       get when() {
-        return k(() => !!e.helperText)() && !e.error;
+        return y(() => !!t.helperText)() && !t.error;
       },
       get children() {
-        var t = D();
-        return o(t, () => e.helperText), t;
+        var e = R();
+        return r(e, () => t.helperText), e;
       }
-    }), null), y((t) => {
-      var s = e.disabled, m = u("w-full flex items-center gap-2 rounded border border-input bg-background shadow-sm", "transition-colors duration-100 cursor-pointer", "hover:bg-muted/50", "focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring", "disabled:cursor-not-allowed disabled:opacity-50", e.error && "border-error focus:ring-error", d() && "rounded-b-none border-b-0", i().container, e.class), x = u("flex-1 text-left truncate font-mono", i().text, e.value ? "text-foreground" : "text-muted-foreground/60");
-      return s !== t.e && (l.disabled = t.e = s), m !== t.t && p(l, t.t = m), x !== t.a && p(h, t.a = x), t;
+    }), null), C((e) => {
+      var u = t.class, m = t.disabled, h = o(), v = t.value, g = b("flex w-full cursor-pointer items-center gap-2 rounded border border-input bg-background px-2 text-left shadow-sm focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", t.size === "lg" ? "h-9 text-sm" : t.size === "md" ? "h-8 text-xs" : "h-7 text-xs");
+      return u !== e.e && x(i, e.e = u), m !== e.t && (n.disabled = e.t = m), h !== e.a && f(n, "aria-expanded", e.a = h), v !== e.o && f(n, "title", e.o = v), g !== e.i && x(n, e.i = g), e;
     }, {
       e: void 0,
       t: void 0,
-      a: void 0
-    }), n;
+      a: void 0,
+      o: void 0,
+      i: void 0
+    }), i;
   })();
 }
-S(["click"]);
+_(["click"]);
 export {
-  A as DirectoryInput
+  K as DirectoryInput
 };

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

@@ -1,10 +1,6 @@
 import { type BasePickerProps } from './picker/PickerBase';
 export interface DirectoryPickerProps extends BasePickerProps {
-    /** Called when user confirms selection */
+    /** Receives the validated absolute directory path. */
     onSelect: (path: string) => void;
 }
-/**
- * Modal directory picker for selecting a folder path.
- * Standalone component — does not depend on FileBrowserContext.
- */
 export declare function DirectoryPicker(props: DirectoryPickerProps): import("solid-js").JSX.Element;

package/dist/components/ui/DirectoryPicker.js

@@ -1,147 +1,58 @@
-import { createComponent as r, insert as l, effect as h, setAttribute as g, template as i } from "solid-js/web";
-import { Show as d } from "solid-js";
-import { cn as m } from "../../utils/cn.js";
+import { createComponent as r, mergeProps as o, insert as i, effect as u, setAttribute as m, template as g } from "solid-js/web";
+import { cn as f } from "../../utils/cn.js";
+import { Button as c } from "./Button.js";
 import { Dialog as s } from "./Dialog.js";
-import { Button as o } from "./Button.js";
-import { deferNonBlocking as P } from "../../utils/defer.js";
-import { usePickerTree as f, PathInputBar as x, PickerBreadcrumb as C, PickerFolderTree as p, NewFolderSection as S } from "./picker/PickerBase.js";
-var b = /* @__PURE__ */ i('<div class="flex flex-col gap-2 -mt-1">'), v = /* @__PURE__ */ i('<div class="flex items-center w-full gap-2"><span class="flex-1 text-[11px] text-muted-foreground truncate">');
-function E(t) {
-  const e = f({
-    initialPath: () => t.initialPath,
-    open: () => t.open,
-    files: () => t.files,
-    // eslint-disable-next-line solid/reactivity -- filter is a static callback
-    filter: t.filter ? (n) => t.filter(n) : void 0,
-    // eslint-disable-next-line solid/reactivity -- onExpand is a static callback
-    onExpand: t.onExpand,
-    // eslint-disable-next-line solid/reactivity -- ensurePath is a static callback
-    ensurePath: t.ensurePath,
-    homeLabel: () => t.homeLabel,
-    homePath: () => t.homePath
-  }), u = () => {
-    const n = e.selectedPath(), a = t.onSelect;
-    t.onOpenChange(!1), P(() => a(n));
-  }, c = () => {
-    t.onOpenChange(!1);
+import { usePickerNavigation as h, PickerPanel as d, pickerCopy as x } from "./picker/PickerBase.js";
+var C = /* @__PURE__ */ g('<div class="flex w-full items-center gap-2"><span class="min-w-0 flex-1 truncate text-[11px] text-muted-foreground">');
+function w(e) {
+  const t = h(e, () => e.open), a = () => {
+    if (!t.valid()) return;
+    const n = t.currentPath();
+    e.onSelect(n), e.onOpenChange(!1);
   };
   return r(s, {
     get open() {
-      return t.open;
+      return e.open;
     },
     get onOpenChange() {
-      return t.onOpenChange;
+      return e.onOpenChange;
     },
     get title() {
-      return t.title ?? "Select Directory";
+      return e.title ?? "Select Directory";
     },
     get class() {
-      return m("max-w-lg", t.class);
+      return f("max-w-lg", e.class);
     },
     get footer() {
       return (() => {
-        var n = v(), a = n.firstChild;
-        return l(a, () => e.toDisplayPath(e.selectedPath())), l(n, r(o, {
+        var n = C(), l = n.firstChild;
+        return i(l, () => t.currentPath()), i(n, r(c, {
           variant: "ghost",
           size: "sm",
-          onClick: c,
+          onClick: () => e.onOpenChange(!1),
           get children() {
-            return t.cancelText ?? "Cancel";
+            return e.cancelText ?? x(e).cancel;
           }
-        }), null), l(n, r(o, {
+        }), null), i(n, r(c, {
           variant: "primary",
           size: "sm",
-          onClick: u,
+          onClick: a,
           get disabled() {
-            return e.pathPending();
+            return !t.valid();
           },
           get children() {
-            return t.confirmText ?? "Select";
+            return e.confirmText ?? "Select";
           }
-        }), null), h(() => g(a, "title", e.toDisplayPath(e.selectedPath()))), n;
+        }), null), u(() => m(l, "title", t.currentPath())), n;
       })();
     },
     get children() {
-      var n = b();
-      return l(n, r(x, {
-        get value() {
-          return e.pathInput;
-        },
-        onInput: (a) => {
-          e.setPathInput(a), e.setPathInputError("");
-        },
-        get pending() {
-          return e.pathPending;
-        },
-        get error() {
-          return e.pathInputError;
-        },
-        get onGo() {
-          return e.handlePathInputGo;
-        },
-        get onKeyDown() {
-          return e.handlePathInputKeyDown;
-        }
-      }), null), l(n, r(C, {
-        get segments() {
-          return e.breadcrumbSegments;
-        },
-        get onClick() {
-          return e.handleBreadcrumbClick;
-        }
-      }), null), l(n, r(p, {
-        get rootFolders() {
-          return e.rootFolders;
-        },
-        get selectedPath() {
-          return e.selectedPath;
-        },
-        get expandedPaths() {
-          return e.expandedPaths;
-        },
-        get revealNonce() {
-          return e.revealNonce;
-        },
-        get onToggle() {
-          return e.toggleExpand;
-        },
-        get onSelect() {
-          return e.handleSelectFolder;
-        },
-        get onSelectRoot() {
-          return e.handleSelectRoot;
-        },
-        get isSelectable() {
-          return e.isSelectable;
-        },
-        get homeLabel() {
-          return e.homeLabel;
-        },
-        style: {
-          "max-height": "280px",
-          "min-height": "160px"
-        }
-      }), null), l(n, r(d, {
-        get when() {
-          return t.onCreateFolder;
-        },
-        get children() {
-          return r(S, {
-            get parentPath() {
-              return e.selectedPath;
-            },
-            get onCreateFolder() {
-              return t.onCreateFolder;
-            },
-            get toDisplayPath() {
-              return e.toDisplayPath;
-            }
-          });
-        }
-      }), null), n;
+      return r(d, o(e, {
+        source: t
+      }));
     }
   });
 }
 export {
-  E as DirectoryPicker
+  w as DirectoryPicker
 };