@floegence/floe-webapp-core 0.86.49 → 0.86.51

package/dist/components/ui/FileSavePicker.js

@@ -1,44 +1,44 @@
-import { createComponent as a, insert as n, mergeProps as _, spread as z, effect as F, className as B, setAttribute as E, template as m, delegateEvents as D } from "solid-js/web";
-import { createSignal as C, createMemo as k, createEffect as I, on as O, Show as w, For as K } from "solid-js";
-import { cn as N } from "../../utils/cn.js";
+import { createComponent as a, insert as n, mergeProps as _, spread as z, effect as b, className as B, setAttribute as E, template as u, delegateEvents as D } from "solid-js/web";
+import { createSignal as F, createMemo as k, createEffect as I, on as O, Show as x, For as K } from "solid-js";
+import { cn as C } from "../../utils/cn.js";
 import { Dialog as T } from "./Dialog.js";
-import { Button as b } from "./Button.js";
+import { Button as N } from "./Button.js";
 import { Input as M } from "./Input.js";
 import { FileItemIcon as j } from "../file-browser/FileIcons.js";
 import { deferNonBlocking as q } from "../../utils/defer.js";
 import { usePickerNavigation as A, PickerPanel as R, pickerCopy as g } from "./picker/PickerBase.js";
-var V = /* @__PURE__ */ m('<div class="flex flex-col gap-2 -mt-1"><div class="flex min-h-[100px] overflow-hidden rounded border border-border"><div>'), G = /* @__PURE__ */ m('<div class="flex flex-col w-full gap-2"><div class="flex items-center gap-1.5"><label class="text-xs text-muted-foreground flex-shrink-0"></label><div class=flex-1></div></div><div class="flex items-center gap-2"><span class="flex-1 text-[11px] text-muted-foreground truncate">'), H = /* @__PURE__ */ m('<div class="flex items-center justify-center h-full text-xs text-muted-foreground">'), J = /* @__PURE__ */ m('<span class="ml-auto text-[10px] text-muted-foreground/60 flex-shrink-0">'), L = /* @__PURE__ */ m("<button type=button><span class=truncate>");
-function le(e) {
-  const [c, x] = C(e.initialFileName ?? ""), [p, u] = C(""), s = A(e, () => e.open, void 0, () => {
-    x(e.initialFileName ?? ""), u("");
-  }), h = k(() => s.entries().filter((t) => t.type === "file"));
-  I(O(c, () => {
-    u("");
+var V = /* @__PURE__ */ u('<div class="flex min-h-[100px] overflow-hidden rounded border border-border"><div>'), G = /* @__PURE__ */ u('<div class="flex flex-col gap-2 -mt-1">'), H = /* @__PURE__ */ u('<div class="flex flex-col w-full gap-2"><div class="flex items-center gap-1.5"><label class="text-xs text-muted-foreground flex-shrink-0"></label><div class=flex-1></div></div><div class="flex items-center gap-2"><span class="flex-1 text-[11px] text-muted-foreground truncate">'), J = /* @__PURE__ */ u('<div class="flex items-center justify-center h-full text-xs text-muted-foreground">'), L = /* @__PURE__ */ u('<span class="ml-auto text-[10px] text-muted-foreground/60 flex-shrink-0">'), Q = /* @__PURE__ */ u("<button type=button><span class=truncate>");
+function ie(e) {
+  const [s, v] = F(e.initialFileName ?? ""), [p, m] = F(""), o = A(e, () => e.open, void 0, () => {
+    v(e.initialFileName ?? ""), m("");
+  }), h = k(() => o.entries().filter((t) => t.type === "file"));
+  I(O(s, () => {
+    m("");
   }));
   const S = (t) => {
-    x(t.name), u("");
-  }, v = () => {
-    if (!s.valid()) return;
-    const t = c().trim();
+    v(t.name), m("");
+  }, $ = () => {
+    if (e.disabled || o.view() !== "browse" || !o.valid()) return;
+    const t = s().trim();
     if (!t) {
-      u(g(e).fileNameRequired);
+      m(g(e).fileNameRequired);
       return;
     }
     if (e.validateFileName) {
       const r = e.validateFileName(t);
       if (r) {
-        u(r);
+        m(r);
         return;
       }
     }
-    const l = s.currentPath(), o = e.onSave;
-    e.onOpenChange(!1), q(() => o(l, t));
+    const l = o.currentPath(), c = e.onSave;
+    e.onOpenChange(!1), q(() => c(l, t));
   }, P = () => {
     e.onOpenChange(!1);
   }, y = (t) => {
-    t.key === "Enter" && (t.preventDefault(), v());
-  }, $ = k(() => {
-    const t = s.currentPath(), l = c().trim();
+    t.key === "Enter" && (t.preventDefault(), $());
+  }, w = k(() => {
+    const t = o.currentPath(), l = s().trim();
     return l ? t === "/" ? `/${l}` : `${t}/${l}` : t;
   });
   return a(T, {
@@ -52,89 +52,97 @@ function le(e) {
       return e.title ?? "Save File";
     },
     get class() {
-      return N("max-w-2xl", e.class);
+      return C("max-w-2xl", e.class);
     },
     get footer() {
       return (() => {
-        var t = G(), l = t.firstChild, o = l.firstChild, r = o.nextSibling, i = l.nextSibling, f = i.firstChild;
-        return n(o, () => g(e).fileName), n(r, a(M, {
+        var t = H(), l = t.firstChild, c = l.firstChild, r = c.nextSibling, i = l.nextSibling, f = i.firstChild;
+        return n(c, () => g(e).fileName), n(r, a(M, {
           size: "sm",
           get value() {
-            return c();
+            return s();
           },
-          onInput: (d) => x(d.currentTarget.value),
+          onInput: (d) => v(d.currentTarget.value),
           onKeyDown: y,
           placeholder: "filename.ext",
           get error() {
             return p();
           }
-        })), n(f, $), n(i, a(b, {
+        })), n(f, w), n(i, a(N, {
           variant: "ghost",
           size: "sm",
           onClick: P,
           get children() {
             return e.cancelText ?? g(e).cancel;
           }
-        }), null), n(i, a(b, {
+        }), null), n(i, a(N, {
           variant: "primary",
           size: "sm",
-          onClick: v,
+          onClick: $,
           get disabled() {
-            return !c().trim() || !s.valid();
+            return !s().trim() || o.view() !== "browse" || !o.valid();
           },
           get children() {
             return e.confirmText ?? "Save";
           }
-        }), null), F(() => E(f, "title", $())), t;
+        }), null), b(() => E(f, "title", w())), t;
       })();
     },
     get children() {
-      var t = V(), l = t.firstChild, o = l.firstChild;
+      var t = G();
       return n(t, a(R, _(e, {
-        source: s
-      })), l), z(o, _(() => e.scrollViewportProps, {
-        class: "max-h-[160px] w-full min-w-0 overflow-y-auto"
-      }), !1, !0), n(o, a(w, {
+        source: o
+      })), null), n(t, a(x, {
         get when() {
-          return h().length > 0;
-        },
-        get fallback() {
-          return (() => {
-            var r = H();
-            return n(r, () => g(e).emptyFiles), r;
-          })();
+          return o.view() === "browse";
         },
         get children() {
-          return a(K, {
-            get each() {
-              return h();
+          var l = V(), c = l.firstChild;
+          return z(c, _(() => e.scrollViewportProps, {
+            class: "max-h-[160px] w-full min-w-0 overflow-y-auto"
+          }), !1, !0), n(c, a(x, {
+            get when() {
+              return h().length > 0;
+            },
+            get fallback() {
+              return (() => {
+                var r = J();
+                return n(r, () => g(e).emptyFiles), r;
+              })();
             },
-            children: (r) => (() => {
-              var i = L(), f = i.firstChild;
-              return i.$$click = () => S(r), n(i, a(j, {
-                item: r,
-                size: 16,
-                class: "w-4 h-4 flex-shrink-0"
-              }), f), n(f, () => r.name), n(i, a(w, {
-                get when() {
-                  return r.size != null;
+            get children() {
+              return a(K, {
+                get each() {
+                  return h();
                 },
-                get children() {
-                  var d = J();
-                  return n(d, () => Q(r.size)), d;
-                }
-              }), null), F(() => B(i, N("flex items-center gap-1.5 w-full text-left text-xs py-1.5 px-2 cursor-pointer", "transition-colors duration-100", "hover:bg-accent/60", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", c() === r.name && "bg-accent text-accent-foreground font-medium"))), i;
-            })()
-          });
+                children: (r) => (() => {
+                  var i = Q(), f = i.firstChild;
+                  return i.$$click = () => S(r), n(i, a(j, {
+                    item: r,
+                    size: 16,
+                    class: "w-4 h-4 flex-shrink-0"
+                  }), f), n(f, () => r.name), n(i, a(x, {
+                    get when() {
+                      return r.size != null;
+                    },
+                    get children() {
+                      var d = L();
+                      return n(d, () => U(r.size)), d;
+                    }
+                  }), null), b(() => B(i, C("flex items-center gap-1.5 w-full text-left text-xs py-1.5 px-2 cursor-pointer", "transition-colors duration-100", "hover:bg-accent/60", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", s() === r.name && "bg-accent text-accent-foreground font-medium"))), i;
+                })()
+              });
+            }
+          })), l;
         }
-      })), t;
+      }), null), t;
     }
   });
 }
-function Q(e) {
+function U(e) {
   return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
 }
 D(["click"]);
 export {
-  le as FileSavePicker
+  ie as FileSavePicker
 };

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

@@ -47,3 +47,5 @@ export { SurfaceAnchoredLayer, type SurfaceAnchoredLayerProps } from './SurfaceA
 export { PersistentHorizontalScrollbar, type PersistentHorizontalScrollbarProps } from './PersistentHorizontalScrollbar';
 export { SettingsLayout, SettingsNavigation, SettingsSection, SettingsList, SettingRow, type SettingsNavigationItem, type SettingsNavigationGroup, type SettingsNavigationProps, type SettingsSectionProps, type SettingRowProps, } from './Settings';
 export { KeyedFor, type KeyedForProps } from './KeyedFor';
+export { DirectoryFavoriteButton } from './picker/DirectoryFavorites';
+export type { DirectoryFavorites } from './picker/DirectoryFavorites';

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

@@ -0,0 +1,29 @@
+import { type JSX } from 'solid-js';
+import type { PickerCopy } from './PickerNavigation';
+/** Controlled navigation metadata. The host owns authentication, persistence and refresh. */
+export interface DirectoryFavorites {
+    paths: readonly string[];
+    loading?: boolean;
+    error?: string;
+    editable?: boolean;
+    pendingPaths?: readonly string[];
+    onRefresh?: () => void | Promise<void>;
+    onSetFavorite?: (path: string, favorite: boolean) => Promise<void>;
+}
+export declare function DirectoryFavoriteButton(props: {
+    path: string;
+    favorites: DirectoryFavorites;
+    copy: PickerCopy;
+    disabled?: boolean;
+    onError?: (message: string) => void;
+}): JSX.Element;
+/** A navigation button and favorite action are siblings; the menu captures its target on open. */
+export declare function PickerDirectoryRow(props: {
+    path: string;
+    favorites?: DirectoryFavorites;
+    copy: PickerCopy;
+    disabled?: boolean;
+    scopeKey?: string;
+    children: JSX.Element;
+    onError: (message: string) => void;
+}): JSX.Element;

package/dist/components/ui/picker/DirectoryFavorites.js

@@ -0,0 +1,163 @@
+import { createComponent as l, insert as m, memo as S, effect as p, template as k, use as g, delegateEvents as D } from "solid-js/web";
+import { createSignal as E, createEffect as b, on as L, onCleanup as B, Show as w } from "solid-js";
+import { Star as F } from "../../icons/index.js";
+import { Button as C } from "../Button.js";
+import { SurfaceFloatingLayer as M } from "../SurfaceFloatingLayer.js";
+import { useOverlayMask as P } from "../../../hooks/useOverlayMask.js";
+var _ = /* @__PURE__ */ k('<div class="flex min-w-0 items-center">'), R = /* @__PURE__ */ k('<button type=button role=menuitem class="flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-accent focus:bg-accent focus:outline-none">');
+function z(e) {
+  const [s, f] = E(!1), a = () => e.favorites.paths.includes(e.path), u = () => a() ? e.copy.unfavoriteDirectory : e.copy.favoriteDirectory, v = async () => {
+    const n = e.favorites, d = e.path;
+    if (!(!n.editable || !n.onSetFavorite || s() || e.disabled || n.pendingPaths?.includes(d))) {
+      f(!0), e.onError?.("");
+      try {
+        await n.onSetFavorite(d, !a());
+      } catch (o) {
+        e.onError?.(o instanceof Error ? o.message : e.copy.favoritesLoadFailed);
+      } finally {
+        f(!1);
+      }
+    }
+  };
+  return l(C, {
+    type: "button",
+    size: "sm",
+    variant: "ghost",
+    class: "shrink-0",
+    get "aria-label"() {
+      return u() + ": " + e.path;
+    },
+    get title() {
+      return u();
+    },
+    get "aria-pressed"() {
+      return a();
+    },
+    get loading() {
+      return s() || e.favorites.pendingPaths?.includes(e.path);
+    },
+    icon: () => l(F, {
+      get class() {
+        return a() ? "h-3.5 w-3.5 fill-current text-warning" : "h-3.5 w-3.5";
+      }
+    }),
+    get disabled() {
+      return e.disabled || !e.favorites.editable || !e.favorites.onSetFavorite;
+    },
+    onClick: () => {
+      v();
+    }
+  });
+}
+function Y(e) {
+  const [s, f] = E();
+  let a, u, v;
+  const n = (o = !1) => {
+    const r = s()?.owner;
+    f(void 0), o && r?.isConnected && r.focus();
+  }, d = (o) => {
+    if (!e.favorites?.editable || e.disabled) return;
+    o.preventDefault(), o.stopPropagation();
+    const r = o.target instanceof HTMLElement ? o.target.closest("button") ?? a : a, t = r.getBoundingClientRect();
+    f({
+      path: e.path,
+      favorites: e.favorites,
+      favorite: !e.favorites.paths.includes(e.path),
+      owner: r,
+      x: o instanceof MouseEvent ? o.clientX : t.left,
+      y: o instanceof MouseEvent ? o.clientY : t.bottom
+    }), queueMicrotask(() => u?.focus());
+  };
+  return b(L(() => e.scopeKey, () => n())), P({
+    open: () => !!s(),
+    root: () => v,
+    onClose: () => n(!0),
+    closeOnEscape: !0,
+    lockBodyScroll: !1,
+    trapFocus: !1,
+    autoFocus: !1,
+    restoreFocus: !1,
+    blockHotkeys: !1
+  }), b(() => {
+    if (!s()) return;
+    const o = (t) => {
+      (!(t.target instanceof Element) || !t.target.closest("[data-picker-favorite-menu]")) && n();
+    }, r = (t) => {
+      (t.key === "Escape" || t.key === "Tab") && (t.key === "Escape" && (t.preventDefault(), t.stopPropagation()), n(t.key === "Escape"));
+    };
+    document.addEventListener("pointerdown", o, !0), document.addEventListener("keydown", r, !0), B(() => {
+      document.removeEventListener("pointerdown", o, !0), document.removeEventListener("keydown", r, !0);
+    });
+  }), (() => {
+    var o = _();
+    o.$$keydown = (t) => {
+      (t.key === "ContextMenu" || t.shiftKey && t.key === "F10") && d(t);
+    }, o.$$contextmenu = d;
+    var r = a;
+    return typeof r == "function" ? g(r, o) : a = o, m(o, () => e.children, null), m(o, l(w, {
+      get when() {
+        return e.favorites;
+      },
+      children: (t) => l(z, {
+        get path() {
+          return e.path;
+        },
+        get favorites() {
+          return t();
+        },
+        get copy() {
+          return e.copy;
+        },
+        get disabled() {
+          return e.disabled;
+        },
+        get onError() {
+          return e.onError;
+        }
+      })
+    }), null), m(o, l(w, {
+      get when() {
+        return s();
+      },
+      children: (t) => l(M, {
+        get position() {
+          return t();
+        },
+        get owner() {
+          return t().owner;
+        },
+        estimatedSize: {
+          width: 250,
+          height: 40
+        },
+        layerRef: (i) => {
+          v = i;
+        },
+        "data-picker-favorite-menu": "",
+        role: "menu",
+        class: "z-50 rounded-md border border-border bg-background p-1 shadow-lg",
+        get children() {
+          var i = R();
+          i.$$click = () => {
+            const c = t();
+            if (!c.favorites.editable || c.favorites.pendingPaths?.includes(c.path)) return;
+            const $ = e.onError, x = e.copy.favoritesLoadFailed;
+            n(!0), c.favorites.onSetFavorite?.(c.path, c.favorite).catch((h) => $(h instanceof Error ? h.message : x));
+          };
+          var y = u;
+          return typeof y == "function" ? g(y, i) : u = i, m(i, l(F, {
+            class: "h-3.5 w-3.5"
+          }), null), m(i, (() => {
+            var c = S(() => !!t().favorite);
+            return () => c() ? e.copy.favoriteDirectory : e.copy.unfavoriteDirectory;
+          })(), null), p(() => i.disabled = !t().favorites.editable || !t().favorites.onSetFavorite || t().favorites.pendingPaths?.includes(t().path)), i;
+        }
+      })
+    }), null), o;
+  })();
+}
+D(["contextmenu", "keydown", "click"]);
+export {
+  z as DirectoryFavoriteButton,
+  Y as PickerDirectoryRow
+};

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

@@ -1,6 +1,9 @@
 import { type Accessor, type JSX } from 'solid-js';
-import { parsePickerPath, type FilesystemPickerDataSource, type PickerDataProps } from './PickerNavigation';
+import { type DirectoryFavorites } from './DirectoryFavorites';
+import { parsePickerPath, type PickerDataProps } from './PickerNavigation';
 export interface PickerPanelProps extends PickerDataProps {
+    /** Host-owned directory navigation metadata for the current authenticated environment. */
+    directoryFavorites?: DirectoryFavorites;
     disabled?: boolean;
     /** Props for the actual constrained scrolling viewport, including host interaction markers. */
     scrollViewportProps?: JSX.HTMLAttributes<HTMLDivElement>;
@@ -16,6 +19,13 @@ export interface BasePickerProps extends PickerPanelProps {
     class?: string;
 }
 export declare function pickerCopy(config: PickerDataProps): {
+    favorites: string;
+    favoriteDirectory: string;
+    unfavoriteDirectory: string;
+    favoritesEmpty: string;
+    favoritesFilter: string;
+    favoritesNoMatches: string;
+    favoritesLoadFailed: string;
     path: string;
     go: string;
     roots: string;
@@ -42,7 +52,9 @@ export declare function pickerCopy(config: PickerDataProps): {
 };
 export declare function pickerErrorMessage(props: PickerDataProps, error: unknown): string;
 /** One owner for dialog and embedded pickers. Identity changes close the previous session first. */
-export declare function usePickerNavigation(props: PickerDataProps, open: Accessor<boolean>, onValidated?: (path: string) => void, onReset?: () => void): {
+export declare function usePickerNavigation(props: PickerPanelProps, open: Accessor<boolean>, onValidated?: (path: string) => void, onReset?: () => void, initialView?: Accessor<PickerLocation>): {
+    view: Accessor<PickerLocation>;
+    setView: import("solid-js").Setter<PickerLocation>;
     context: Accessor<import("./PickerNavigation").PickerPathContext | null>;
     currentPath: Accessor<string>;
     entries: Accessor<readonly import("../..").FileItem[]>;
@@ -59,14 +71,13 @@ export declare function usePickerNavigation(props: PickerDataProps, open: Access
     setShowHidden(value: boolean): Promise<void>;
     retry(): Promise<void>;
 };
+export type PickerLocation = 'browse' | 'suggestions' | 'favorites';
 /** Absolute directory navigation shared by all picker presentations. */
 export declare function PickerPanel(props: PickerPanelProps & {
-    source: FilesystemPickerDataSource;
+    source: ReturnType<typeof usePickerNavigation>;
     suggestions?: {
         paths: readonly string[];
         label: string;
-        visible: boolean;
-        onVisibilityChange: (visible: boolean) => void;
     };
 }): JSX.Element;
 export declare const normalizePath: typeof parsePickerPath;