@floegence/floe-webapp-core 0.3.2 → 0.4.0

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

@@ -7,4 +7,4 @@ export { FileContextMenu, type FileContextMenuProps, type BuiltinContextMenuActi
 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 type { FileItem, ViewMode, SortField, SortDirection, SortConfig, FileBrowserContextValue, ContextMenuActionType, ContextMenuItem, ContextMenuEvent, ContextMenuCallbacks, } from './types';
+export type { FileItem, ViewMode, SortField, SortDirection, SortConfig, FileBrowserContextValue, ContextMenuActionType, ContextMenuItem, ContextMenuEvent, ContextMenuCallbacks, OptimisticUpdateType, OptimisticRemove, OptimisticUpdate, OptimisticInsert, OptimisticOperation, ScrollPosition, } from './types';

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

@@ -82,6 +82,49 @@ export interface FilterMatchInfo {
     /** Matched character indices in the name */
     matchedIndices: number[];
 }
+/**
+ * Optimistic update operation types
+ */
+export type OptimisticUpdateType = 'remove' | 'update' | 'insert';
+/**
+ * Optimistic remove operation
+ */
+export interface OptimisticRemove {
+    type: 'remove';
+    /** Paths to remove */
+    paths: string[];
+}
+/**
+ * Optimistic update operation (rename/move)
+ */
+export interface OptimisticUpdate {
+    type: 'update';
+    /** Original path */
+    oldPath: string;
+    /** Updated item data */
+    updates: Partial<FileItem>;
+}
+/**
+ * Optimistic insert operation (duplicate/copy/new)
+ */
+export interface OptimisticInsert {
+    type: 'insert';
+    /** Parent folder path where item will be inserted */
+    parentPath: string;
+    /** Item to insert */
+    item: FileItem;
+}
+/**
+ * Union type for all optimistic operations
+ */
+export type OptimisticOperation = OptimisticRemove | OptimisticUpdate | OptimisticInsert;
+/**
+ * Scroll position state
+ */
+export interface ScrollPosition {
+    top: number;
+    left: number;
+}
 /**
  * File browser context value for internal state management
  */
@@ -114,4 +157,62 @@ export interface FileBrowserContextValue {
     showContextMenu: (event: ContextMenuEvent) => void;
     hideContextMenu: () => void;
     openItem: (item: FileItem) => void;
+    /**
+     * Optimistically remove items from the file list.
+     * Call this before the actual delete operation for instant UI feedback.
+     * @param paths - Array of file/folder paths to remove
+     */
+    optimisticRemove: (paths: string[]) => void;
+    /**
+     * Optimistically update an item (rename/move).
+     * Call this before the actual operation for instant UI feedback.
+     * @param oldPath - Original path of the item
+     * @param updates - Partial updates to apply (name, path, etc.)
+     */
+    optimisticUpdate: (oldPath: string, updates: Partial<FileItem>) => void;
+    /**
+     * Optimistically insert a new item (duplicate/copy/create).
+     * Call this before the actual operation for instant UI feedback.
+     * @param parentPath - Parent folder path
+     * @param item - The new item to insert
+     */
+    optimisticInsert: (parentPath: string, item: FileItem) => void;
+    /**
+     * Clear all pending optimistic updates.
+     * Call this after successful server confirmation to sync with real data.
+     */
+    clearOptimisticUpdates: () => void;
+    /**
+     * Rollback all optimistic updates and restore original state.
+     * Call this when an operation fails to revert the UI.
+     */
+    rollbackOptimisticUpdates: () => void;
+    /**
+     * Check if there are pending optimistic updates.
+     */
+    hasOptimisticUpdates: Accessor<boolean>;
+    /**
+     * Register a scroll container element for position tracking.
+     * Pass this as a ref callback to your scrollable container.
+     */
+    setScrollContainer: (el: HTMLElement | null) => void;
+    /**
+     * Get the current scroll position of the registered container.
+     */
+    getScrollPosition: () => ScrollPosition;
+    /**
+     * Set the scroll position of the registered container.
+     * Useful for restoring position after data refresh.
+     */
+    setScrollPosition: (position: ScrollPosition) => void;
+    /**
+     * Save current scroll position and return it.
+     * Convenience method that combines get + internal save.
+     */
+    saveScrollPosition: () => ScrollPosition;
+    /**
+     * Restore the last saved scroll position.
+     * Call this after an operation completes to maintain user's view.
+     */
+    restoreScrollPosition: () => void;
 }

package/dist/index39.js

@@ -1,145 +1,236 @@
-import { createComponent as D } from "solid-js/web";
-import { createContext as G, createSignal as i, createMemo as A, useContext as H } from "solid-js";
-import { deferNonBlocking as F } from "./index68.js";
-const Q = G();
-function E(o, l) {
-  if (!l) return [];
-  const w = o.toLowerCase(), u = l.toLowerCase(), a = [];
-  let m = 0;
-  for (const g of u) {
-    const d = w.indexOf(g, m);
-    if (d === -1) return null;
-    a.push(d), m = d + 1;
+import { createComponent as he } from "solid-js/web";
+import { createContext as me, createSignal as a, createMemo as N, useContext as we } from "solid-js";
+import { deferNonBlocking as I } from "./index68.js";
+const V = me();
+function Q(r, p) {
+  if (!p) return [];
+  const x = r.toLowerCase(), w = p.toLowerCase(), h = [];
+  let g = 0;
+  for (const S of w) {
+    const m = x.indexOf(S, g);
+    if (m === -1) return null;
+    h.push(m), g = m + 1;
   }
-  return a;
+  return h;
 }
-function re(o) {
-  const [l, w] = i(o.initialPath ?? "/"), [u, a] = i(/* @__PURE__ */ new Set()), [m, g] = i(o.initialViewMode ?? "list"), [d, T] = i({
+function Ce(r) {
+  const [p, x] = a(r.initialPath ?? "/"), [w, h] = a(/* @__PURE__ */ new Set()), [g, S] = a(r.initialViewMode ?? "list"), [m, j] = a({
     field: "name",
     direction: "asc"
-  }), [y, M] = i(/* @__PURE__ */ new Set(["/"])), [V, q] = i(!1), [L, v] = i(null), [x, I] = i(""), [N, P] = i(!1), B = () => o.files, C = (e) => {
+  }), [M, O] = a(/* @__PURE__ */ new Set(["/"])), [R, D] = a(!1), [G, k] = a(null), [v, b] = a(""), [H, B] = a(!1), [z, P] = a([]);
+  let u = null, C = {
+    top: 0,
+    left: 0
+  };
+  const A = () => r.files, c = (e) => {
     const t = (e ?? "").trim();
     return t === "" ? "/" : t;
-  }, O = A(() => {
-    const e = /* @__PURE__ */ new Map(), t = (r) => {
-      var h;
-      for (const s of r)
-        s.type === "folder" && (e.set(C(s.path), s.children ?? []), (h = s.children) != null && h.length && t(s.children));
-    }, n = B();
+  }, T = (e) => {
+    const t = c(e);
+    if (t === "/") return "/";
+    const n = t.split("/").filter(Boolean);
+    return n.pop(), n.length ? "/" + n.join("/") : "/";
+  }, J = (e, t) => {
+    const n = z();
+    if (n.length === 0) return e;
+    let s = [...e];
+    const d = c(t);
+    for (const o of n)
+      switch (o.type) {
+        case "remove": {
+          const l = new Set(o.paths.map(c));
+          s = s.filter((i) => !l.has(c(i.path)));
+          break;
+        }
+        case "update": {
+          const l = c(o.oldPath), i = s.findIndex((f) => c(f.path) === l);
+          if (i !== -1) {
+            const f = o.updates.path ?? s[i].path;
+            T(f) === d ? s[i] = {
+              ...s[i],
+              ...o.updates
+            } : s.splice(i, 1);
+          } else {
+            const f = o.updates.path;
+            f && T(f);
+          }
+          break;
+        }
+        case "insert": {
+          c(o.parentPath) === d && (s.some((i) => c(i.path) === c(o.item.path)) || s.push(o.item));
+          break;
+        }
+      }
+    return s;
+  }, K = N(() => {
+    const e = /* @__PURE__ */ new Map(), t = (s) => {
+      var d;
+      for (const o of s)
+        o.type === "folder" && (e.set(c(o.path), o.children ?? []), (d = o.children) != null && d.length && t(o.children));
+    }, n = A();
     return e.set("/", n), t(n), e;
-  }), z = A(() => {
-    const e = C(l());
-    let t = O().get(e) ?? [];
-    const n = x().trim();
-    n && (t = t.filter((s) => E(s.name, n) !== null));
-    const r = d();
-    return [...t].sort((s, c) => {
-      var k, p;
-      if (s.type !== c.type)
-        return s.type === "folder" ? -1 : 1;
-      let f = 0;
-      switch (r.field) {
+  }), U = N(() => {
+    const e = c(p());
+    let t = K().get(e) ?? [];
+    t = J(t, e);
+    const n = v().trim();
+    n && (t = t.filter((o) => Q(o.name, n) !== null));
+    const s = m();
+    return [...t].sort((o, l) => {
+      var f, F;
+      if (o.type !== l.type)
+        return o.type === "folder" ? -1 : 1;
+      let i = 0;
+      switch (s.field) {
         case "name":
-          f = s.name.localeCompare(c.name);
+          i = o.name.localeCompare(l.name);
           break;
         case "size":
-          f = (s.size ?? 0) - (c.size ?? 0);
+          i = (o.size ?? 0) - (l.size ?? 0);
           break;
         case "modifiedAt":
-          f = (((k = s.modifiedAt) == null ? void 0 : k.getTime()) ?? 0) - (((p = c.modifiedAt) == null ? void 0 : p.getTime()) ?? 0);
+          i = (((f = o.modifiedAt) == null ? void 0 : f.getTime()) ?? 0) - (((F = l.modifiedAt) == null ? void 0 : F.getTime()) ?? 0);
           break;
         case "type":
-          f = (s.extension ?? "").localeCompare(c.extension ?? "");
+          i = (o.extension ?? "").localeCompare(l.extension ?? "");
           break;
       }
-      return r.direction === "asc" ? f : -f;
+      return s.direction === "asc" ? i : -i;
     });
-  }), S = (e) => {
-    var r;
-    const t = C(e);
-    w(t), a(/* @__PURE__ */ new Set()), I(""), P(!1);
-    const n = o.onSelect;
-    F(() => n == null ? void 0 : n([])), (r = o.onNavigate) == null || r.call(o, t);
-  }, j = () => {
-    const e = l();
+  }), y = (e) => {
+    var s;
+    const t = c(e);
+    x(t), h(/* @__PURE__ */ new Set()), b(""), B(!1);
+    const n = r.onSelect;
+    I(() => n == null ? void 0 : n([])), (s = r.onNavigate) == null || s.call(r, t);
+  }, W = () => {
+    const e = p();
     if (e === "/" || e === "") return;
     const t = e.split("/").filter(Boolean);
-    t.pop(), S(t.length ? "/" + t.join("/") : "/");
-  }, b = (e) => {
-    e.type === "folder" && (S(e.path), M((t) => {
+    t.pop(), y(t.length ? "/" + t.join("/") : "/");
+  }, E = (e) => {
+    e.type === "folder" && (y(e.path), O((t) => {
       const n = new Set(t);
       return n.add(e.path), n;
     }));
-  }, U = {
-    currentPath: l,
-    setCurrentPath: S,
-    navigateUp: j,
-    navigateTo: b,
-    selectedItems: () => u(),
-    selectItem: (e, t = !1) => {
-      const n = u(), r = t ? new Set(n) : /* @__PURE__ */ new Set();
-      t ? r.has(e) ? r.delete(e) : r.add(e) : (r.clear(), r.add(e)), a(r);
-      const h = z().filter((c) => r.has(c.id)), s = o.onSelect;
-      F(() => s == null ? void 0 : s(h));
-    },
-    clearSelection: () => {
-      a(/* @__PURE__ */ new Set());
-      const e = o.onSelect;
-      F(() => e == null ? void 0 : e([]));
-    },
-    isSelected: (e) => u().has(e),
-    viewMode: m,
-    setViewMode: g,
-    sortConfig: d,
-    setSortConfig: T,
-    expandedFolders: y,
-    toggleFolder: (e) => {
-      M((t) => {
-        const n = new Set(t);
-        return n.has(e) ? n.delete(e) : n.add(e), n;
+  }, X = (e, t = !1) => {
+    const n = w(), s = t ? new Set(n) : /* @__PURE__ */ new Set();
+    t ? s.has(e) ? s.delete(e) : s.add(e) : (s.clear(), s.add(e)), h(s);
+    const d = U().filter((l) => s.has(l.id)), o = r.onSelect;
+    I(() => o == null ? void 0 : o(d));
+  }, Y = () => {
+    h(/* @__PURE__ */ new Set());
+    const e = r.onSelect;
+    I(() => e == null ? void 0 : e([]));
+  }, Z = (e) => w().has(e), _ = (e) => {
+    O((t) => {
+      const n = new Set(t);
+      return n.has(e) ? n.delete(e) : n.add(e), n;
+    });
+  }, $ = (e) => M().has(e), ee = () => D((e) => !e), te = (e) => k(e), ne = () => k(null), oe = (e) => {
+    b(e);
+  }, se = (e) => {
+    const t = v().trim();
+    if (!t) return null;
+    const n = Q(e, t);
+    return n ? {
+      matchedIndices: n
+    } : null;
+  }, re = (e) => {
+    var t;
+    e.type === "folder" ? E(e) : (t = r.onOpen) == null || t.call(r, e);
+  }, ie = (e) => {
+    e.length !== 0 && P((t) => [...t, {
+      type: "remove",
+      paths: e
+    }]);
+  }, ce = (e, t) => {
+    P((n) => [...n, {
+      type: "update",
+      oldPath: e,
+      updates: t
+    }]);
+  }, le = (e, t) => {
+    P((n) => [...n, {
+      type: "insert",
+      parentPath: e,
+      item: t
+    }]);
+  }, ae = () => {
+    P([]);
+  }, de = () => {
+    P([]);
+  }, fe = () => z().length > 0, ue = (e) => {
+    u = e;
+  }, L = () => u ? {
+    top: u.scrollTop,
+    left: u.scrollLeft
+  } : {
+    top: 0,
+    left: 0
+  }, q = (e) => {
+    u && (u.scrollTop = e.top, u.scrollLeft = e.left);
+  }, pe = {
+    currentPath: p,
+    setCurrentPath: y,
+    navigateUp: W,
+    navigateTo: E,
+    selectedItems: () => w(),
+    selectItem: X,
+    clearSelection: Y,
+    isSelected: Z,
+    viewMode: g,
+    setViewMode: S,
+    sortConfig: m,
+    setSortConfig: j,
+    expandedFolders: M,
+    toggleFolder: _,
+    isExpanded: $,
+    files: A,
+    currentFiles: U,
+    filterQuery: v,
+    setFilterQuery: oe,
+    isFilterActive: H,
+    setFilterActive: B,
+    getFilterMatch: se,
+    sidebarCollapsed: R,
+    toggleSidebar: ee,
+    contextMenu: G,
+    showContextMenu: te,
+    hideContextMenu: ne,
+    openItem: re,
+    // Optimistic updates
+    optimisticRemove: ie,
+    optimisticUpdate: ce,
+    optimisticInsert: le,
+    clearOptimisticUpdates: ae,
+    rollbackOptimisticUpdates: de,
+    hasOptimisticUpdates: fe,
+    // Scroll position management
+    setScrollContainer: ue,
+    getScrollPosition: L,
+    setScrollPosition: q,
+    saveScrollPosition: () => (C = L(), C),
+    restoreScrollPosition: () => {
+      requestAnimationFrame(() => {
+        q(C);
       });
-    },
-    isExpanded: (e) => y().has(e),
-    files: B,
-    currentFiles: z,
-    filterQuery: x,
-    setFilterQuery: (e) => {
-      I(e);
-    },
-    isFilterActive: N,
-    setFilterActive: P,
-    getFilterMatch: (e) => {
-      const t = x().trim();
-      if (!t) return null;
-      const n = E(e, t);
-      return n ? {
-        matchedIndices: n
-      } : null;
-    },
-    sidebarCollapsed: V,
-    toggleSidebar: () => q((e) => !e),
-    contextMenu: L,
-    showContextMenu: (e) => v(e),
-    hideContextMenu: () => v(null),
-    openItem: (e) => {
-      var t;
-      e.type === "folder" ? b(e) : (t = o.onOpen) == null || t.call(o, e);
     }
   };
-  return D(Q.Provider, {
-    value: U,
+  return he(V.Provider, {
+    value: pe,
     get children() {
-      return o.children;
+      return r.children;
     }
   });
 }
-function ie() {
-  const o = H(Q);
-  if (!o)
+function ye() {
+  const r = we(V);
+  if (!r)
     throw new Error("useFileBrowser must be used within a FileBrowserProvider");
-  return o;
+  return r;
 }
 export {
-  re as FileBrowserProvider,
-  ie as useFileBrowser
+  Ce as FileBrowserProvider,
+  ye as useFileBrowser
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",