@floegence/floe-webapp-core 0.4.0 → 0.6.0

package/dist/index29.js

@@ -1,92 +1,373 @@
-import { template as h, insert as $, createComponent as z, effect as m, className as d, style as I } from "solid-js/web";
-import { createSignal as P, onMount as S, onCleanup as B, For as L } from "solid-js";
-import { cn as g } from "./index67.js";
-var M = /* @__PURE__ */ h(`<div role=status aria-label=Loading><style>
-        @keyframes snakeBreathing {
-          0%, 100% {
-            opacity: 0.5;
-            transform: scale(0.85);
+import { delegateEvents as ue, createComponent as r, template as v, insert as o, effect as I, className as E, setAttribute as J, memo as W, setStyleProperty as de } from "solid-js/web";
+import { createSignal as $, createEffect as X, on as q, createMemo as B, For as A, Show as y } from "solid-js";
+import { cn as S } from "./index68.js";
+import { Dialog as fe } from "./index22.js";
+import { Button as T } from "./index20.js";
+import { Input as H } from "./index21.js";
+import { ChevronRight as Q, Check as he, X as ge, Plus as me } from "./index33.js";
+import { FolderOpenIcon as U, FolderIcon as ve } from "./index47.js";
+import { deferNonBlocking as xe } from "./index69.js";
+var be = /* @__PURE__ */ v('<div class="flex items-center justify-center py-6 text-xs text-muted-foreground">No directories available'), pe = /* @__PURE__ */ v('<div class="flex items-center gap-1.5"><div class=flex-1>'), we = /* @__PURE__ */ v('<p class="text-[11px] text-muted-foreground -mt-1">Creating in: '), Ce = /* @__PURE__ */ v('<div class="flex flex-col gap-2 -mt-1"><div class="flex items-center gap-1.5"><div class=flex-1></div></div><nav class="flex items-center gap-0.5 min-w-0 overflow-x-auto py-0.5"aria-label="Selected path"></nav><div class="border border-border rounded overflow-y-auto"style=max-height:280px;min-height:160px><button type=button><span>Root'), $e = /* @__PURE__ */ v('<div class="flex items-center w-full gap-2"><span class="flex-1 text-[11px] text-muted-foreground truncate">'), Y = /* @__PURE__ */ v("<button type=button>"), ye = /* @__PURE__ */ v("<button type=button><span>New Folder"), Se = /* @__PURE__ */ v("<div class=overflow-hidden>"), ke = /* @__PURE__ */ v('<div class="flex flex-col"><div><button type=button><span class="flex-shrink-0 w-4 h-4"></span><span class=truncate>'), Pe = /* @__PURE__ */ v('<span class="flex-shrink-0 w-4 h-4">');
+function Oe(t) {
+  const [i, d] = $(t.initialPath ?? "/"), [x, g] = $(/* @__PURE__ */ new Set(["/"])), [k, D] = $(t.initialPath ?? "/"), [O, f] = $(""), [b, m] = $(!1), [P, w] = $(""), [l, h] = $(!1);
+  X(q(() => t.open, (e) => {
+    if (e) {
+      const n = t.initialPath ?? "/";
+      d(n), D(n), f(""), m(!1), w(""), h(!1);
+      const s = K(n);
+      g(/* @__PURE__ */ new Set(["/", ...s]));
+    }
+  })), X(q(i, (e) => {
+    D(e), f("");
+  }));
+  const C = B(() => {
+    const e = /* @__PURE__ */ new Map(), n = (s) => {
+      var c;
+      for (const u of s)
+        u.type === "folder" && (e.set(R(u.path), u), (c = u.children) != null && c.length && n(u.children));
+    };
+    return n(t.files), e;
+  }), p = B(() => t.files.filter((e) => e.type === "folder")), z = (e) => {
+    const n = R(e);
+    return n === "/" || C().has(n);
+  }, j = (e) => t.filter ? t.filter(e) : !0, ee = (e) => {
+    g((n) => {
+      const s = new Set(n);
+      return s.has(e) ? s.delete(e) : s.add(e), s;
+    });
+  }, te = (e) => {
+    j(e) && (d(e.path), g((n) => {
+      const s = new Set(n);
+      return s.add(e.path), s;
+    }));
+  }, ne = () => {
+    d("/");
+  }, G = () => {
+    const e = R(k().trim());
+    if (z(e)) {
+      d(e), f("");
+      const n = K(e);
+      g((s) => {
+        const c = new Set(s);
+        for (const u of n) c.add(u);
+        return c.add(e), c;
+      });
+    } else
+      f("Path not found");
+  }, re = (e) => {
+    e.key === "Enter" && (e.preventDefault(), G());
+  }, le = () => {
+    m(!0), w("");
+  }, L = () => {
+    m(!1), w("");
+  }, M = async () => {
+    const e = P().trim();
+    if (!(!e || !t.onCreateFolder)) {
+      h(!0);
+      try {
+        await t.onCreateFolder(i(), e), m(!1), w("");
+      } finally {
+        h(!1);
+      }
+    }
+  }, oe = (e) => {
+    e.key === "Enter" ? (e.preventDefault(), M()) : e.key === "Escape" && (e.preventDefault(), L());
+  }, ie = () => {
+    const e = i(), n = t.onSelect;
+    t.onOpenChange(!1), xe(() => n(e));
+  }, ae = () => {
+    t.onOpenChange(!1);
+  }, V = B(() => {
+    const e = i();
+    if (e === "/" || e === "") return [{
+      name: "Root",
+      path: "/"
+    }];
+    const n = e.split("/").filter(Boolean), s = [{
+      name: "Root",
+      path: "/"
+    }];
+    let c = "";
+    for (const u of n)
+      c += "/" + u, s.push({
+        name: u,
+        path: c
+      });
+    return s;
+  }), se = (e) => {
+    d(e);
+    const n = K(e);
+    g((s) => {
+      const c = new Set(s);
+      for (const u of n) c.add(u);
+      return c.add(e), c;
+    });
+  };
+  return r(fe, {
+    get open() {
+      return t.open;
+    },
+    get onOpenChange() {
+      return t.onOpenChange;
+    },
+    get title() {
+      return t.title ?? "Select Directory";
+    },
+    get class() {
+      return S("max-w-lg", t.class);
+    },
+    get footer() {
+      return (() => {
+        var e = $e(), n = e.firstChild;
+        return o(n, i), o(e, r(T, {
+          variant: "ghost",
+          size: "sm",
+          onClick: ae,
+          get children() {
+            return t.cancelText ?? "Cancel";
           }
-          50% {
-            opacity: 1;
-            transform: scale(1);
+        }), null), o(e, r(T, {
+          variant: "primary",
+          size: "sm",
+          onClick: ie,
+          get children() {
+            return t.confirmText ?? "Select";
           }
+        }), null), I(() => J(n, "title", i())), e;
+      })();
+    },
+    get children() {
+      var e = Ce(), n = e.firstChild, s = n.firstChild, c = n.nextSibling, u = c.nextSibling, N = u.firstChild, ce = N.firstChild;
+      return o(s, r(H, {
+        size: "sm",
+        get value() {
+          return k();
+        },
+        onInput: (a) => {
+          D(a.currentTarget.value), f("");
+        },
+        onKeyDown: re,
+        placeholder: "/path/to/directory",
+        get error() {
+          return O();
+        }
+      })), o(n, r(T, {
+        variant: "outline",
+        size: "sm",
+        onClick: G,
+        children: "Go"
+      }), null), o(c, r(A, {
+        get each() {
+          return V();
+        },
+        children: (a, _) => [r(y, {
+          get when() {
+            return _() > 0;
+          },
+          get children() {
+            return r(Q, {
+              class: "w-3 h-3 text-muted-foreground/50 flex-shrink-0"
+            });
+          }
+        }), (() => {
+          var F = Y();
+          return F.$$click = () => se(a.path), o(F, () => a.name), I(() => E(F, S("text-xs px-1 py-0.5 rounded cursor-pointer flex-shrink-0", "transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", _() === V().length - 1 ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"))), F;
+        })()]
+      })), N.$$click = ne, o(N, r(U, {
+        class: "w-4 h-4 flex-shrink-0"
+      }), ce), o(u, r(A, {
+        get each() {
+          return p();
+        },
+        children: (a) => r(Z, {
+          item: a,
+          depth: 1,
+          selectedPath: i,
+          expandedPaths: x,
+          onToggle: ee,
+          onSelect: te,
+          isSelectable: j
+        })
+      }), null), o(u, r(y, {
+        get when() {
+          return p().length === 0;
+        },
+        get children() {
+          return be();
+        }
+      }), null), o(e, r(y, {
+        get when() {
+          return t.onCreateFolder;
+        },
+        get children() {
+          return r(y, {
+            get when() {
+              return b();
+            },
+            get fallback() {
+              return (() => {
+                var a = ye(), _ = a.firstChild;
+                return a.$$click = le, o(a, r(me, {
+                  class: "w-3.5 h-3.5"
+                }), _), I(() => E(a, S("flex items-center gap-1 text-xs text-muted-foreground cursor-pointer", "hover:text-foreground transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring rounded px-1 py-0.5"))), a;
+              })();
+            },
+            get children() {
+              return [(() => {
+                var a = pe(), _ = a.firstChild;
+                return o(_, r(H, {
+                  size: "sm",
+                  get value() {
+                    return P();
+                  },
+                  onInput: (F) => w(F.currentTarget.value),
+                  onKeyDown: oe,
+                  placeholder: "Folder name",
+                  get disabled() {
+                    return l();
+                  },
+                  autofocus: !0
+                })), o(a, r(T, {
+                  variant: "primary",
+                  size: "sm",
+                  onClick: M,
+                  get loading() {
+                    return l();
+                  },
+                  get disabled() {
+                    return !P().trim();
+                  },
+                  get children() {
+                    return r(he, {
+                      class: "w-3.5 h-3.5"
+                    });
+                  }
+                }), null), o(a, r(T, {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: L,
+                  get disabled() {
+                    return l();
+                  },
+                  get children() {
+                    return r(ge, {
+                      class: "w-3.5 h-3.5"
+                    });
+                  }
+                }), null), a;
+              })(), (() => {
+                var a = we();
+                return a.firstChild, o(a, i, null), a;
+              })()];
+            }
+          });
         }
-      `), j = /* @__PURE__ */ h("<div>"), F = /* @__PURE__ */ h('<div style="animation:snakeBreathing 1.5s ease-in-out infinite">');
-const u = {
-  sm: {
-    grid: "w-6 h-6",
-    cell: "w-1.5 h-1.5",
-    center: "w-1 h-1"
-  },
-  md: {
-    grid: "w-9 h-9",
-    cell: "w-2.5 h-2.5",
-    center: "w-2 h-2"
-  },
-  lg: {
-    grid: "w-12 h-12",
-    cell: "w-3 h-3",
-    center: "w-2.5 h-2.5"
-  }
-}, b = {
-  slow: 200,
-  normal: 120,
-  fast: 80
-}, f = [
-  [100, 1.1],
-  // head: full opacity, slightly larger
-  [85, 1.05],
-  // trail 1: smooth transition
-  [65, 1],
-  // trail 2
-  [40, 0.95]
-  // trail 3: fading out
-];
-function q(l) {
-  const c = () => l.size ?? "md", v = () => l.speed ?? "normal", i = [0, 1, 2, 5, 8, 7, 6, 3], [k, C] = P(0);
-  S(() => {
-    const t = setInterval(() => {
-      C((n) => (n + 1) % i.length);
-    }, b[v()]);
-    B(() => clearInterval(t));
+      }), null), I(() => E(N, S("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", i() === "/" && "bg-accent text-accent-foreground font-medium"))), e;
+    }
   });
-  const _ = (t) => {
-    const n = k();
-    for (let r = 0; r < f.length; r++)
-      if (i[(n + i.length - r) % i.length] === t) return r;
-    return -1;
+}
+function Z(t) {
+  const i = () => t.expandedPaths().has(t.item.path), d = () => t.selectedPath() === t.item.path, x = () => t.isSelectable(t.item), g = B(() => {
+    var f;
+    return ((f = t.item.children) == null ? void 0 : f.filter((b) => b.type === "folder")) ?? [];
+  }), k = () => g().length > 0, D = (f) => {
+    f.stopPropagation(), t.onToggle(t.item.path);
+  }, O = () => {
+    t.onSelect(t.item);
   };
   return (() => {
-    var t = M(), n = t.firstChild;
-    return $(t, z(L, {
-      each: [0, 1, 2, 3, 4, 5, 6, 7, 8],
-      children: (r) => {
-        const o = r === 4, a = () => o ? -1 : _(r);
-        return (() => {
-          var s = j();
-          return $(s, o && (() => {
-            var e = F();
-            return m(() => d(e, g("rounded-sm bg-primary", u[c()].center))), e;
-          })()), m((e) => {
-            var y, w;
-            var p = g("flex items-center justify-center rounded-sm", u[c()].cell, o && "bg-transparent"), x = o ? {} : {
-              "background-color": a() >= 0 ? `color-mix(in srgb, var(--primary) ${((y = f[a()]) == null ? void 0 : y[0]) ?? 0}%, transparent)` : "var(--muted)",
-              transform: `scale(${a() >= 0 ? ((w = f[a()]) == null ? void 0 : w[1]) ?? 1 : 1})`,
-              "transition-property": "background-color, transform",
-              "transition-duration": `${b[v()] * 0.9}ms`,
-              "transition-timing-function": "ease-out"
-            };
-            return p !== e.e && d(s, e.e = p), e.t = I(s, x, e.t), e;
-          }, {
-            e: void 0,
-            t: void 0
-          }), s;
-        })();
+    var f = ke(), b = f.firstChild, m = b.firstChild, P = m.firstChild, w = P.nextSibling;
+    return o(b, r(y, {
+      get when() {
+        return k();
+      },
+      get fallback() {
+        return Pe();
+      },
+      get children() {
+        var l = Y();
+        return l.$$click = D, o(l, r(Q, {
+          class: "w-3 h-3 opacity-60"
+        })), I((h) => {
+          var C = S("flex-shrink-0 w-4 h-4 flex items-center justify-center cursor-pointer", "transition-transform duration-150", i() && "rotate-90", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring"), p = i() ? "Collapse folder" : "Expand folder";
+          return C !== h.e && E(l, h.e = C), p !== h.t && J(l, "aria-label", h.t = p), h;
+        }, {
+          e: void 0,
+          t: void 0
+        }), l;
+      }
+    }), m), m.$$click = O, o(P, r(y, {
+      get when() {
+        return W(() => !!k())() && i();
+      },
+      get fallback() {
+        return r(ve, {
+          class: "w-4 h-4"
+        });
+      },
+      get children() {
+        return r(U, {
+          class: "w-4 h-4"
+        });
+      }
+    })), o(w, () => t.item.name), o(f, r(y, {
+      get when() {
+        return W(() => !!i())() && k();
+      },
+      get children() {
+        var l = Se();
+        return o(l, r(A, {
+          get each() {
+            return g();
+          },
+          children: (h) => r(Z, {
+            item: h,
+            get depth() {
+              return t.depth + 1;
+            },
+            get selectedPath() {
+              return t.selectedPath;
+            },
+            get expandedPaths() {
+              return t.expandedPaths;
+            },
+            get onToggle() {
+              return t.onToggle;
+            },
+            get onSelect() {
+              return t.onSelect;
+            },
+            get isSelectable() {
+              return t.isSelectable;
+            }
+          })
+        })), l;
       }
-    }), n), m(() => d(t, g("grid grid-cols-3 gap-1", u[c()].grid, l.class))), t;
+    }), null), I((l) => {
+      var h = S("group flex items-center w-full text-xs", "transition-colors duration-100", x() ? "hover:bg-accent/60" : "opacity-50", d() && x() && "bg-accent text-accent-foreground font-medium"), C = `${4 + t.depth * 14}px`, p = !x(), z = S("flex items-center gap-1 flex-1 min-w-0 text-left py-1.5 pl-0.5 pr-2", x() ? "cursor-pointer" : "cursor-not-allowed", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring");
+      return h !== l.e && E(b, l.e = h), C !== l.t && de(b, "padding-left", l.t = C), p !== l.a && (m.disabled = l.a = p), z !== l.o && E(m, l.o = z), l;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), f;
   })();
 }
+function R(t) {
+  const i = (t ?? "").trim();
+  if (i === "" || i === "/") return "/";
+  const d = i.replace(/\/+$/, "");
+  return d.startsWith("/") ? d : "/" + d;
+}
+function K(t) {
+  const i = t.split("/").filter(Boolean), d = [];
+  let x = "";
+  for (let g = 0; g < i.length - 1; g++)
+    x += "/" + i[g], d.push(x);
+  return d;
+}
+ue(["click"]);
 export {
-  q as SnakeLoader
+  Oe as DirectoryPicker
 };

package/dist/index3.js

@@ -1,7 +1,7 @@
 import { delegateEvents as h, template as u, insert as c, createComponent as r, effect as d, className as f, Dynamic as y, memo as x, setAttribute as m } from "solid-js/web";
 import { For as b, Show as v } from "solid-js";
-import { cn as g } from "./index67.js";
-import { deferNonBlocking as C } from "./index68.js";
+import { cn as g } from "./index68.js";
+import { deferNonBlocking as C } from "./index69.js";
 import { Tooltip as w } from "./index25.js";
 var k = /* @__PURE__ */ u('<div class="flex flex-col">'), A = /* @__PURE__ */ u('<div><div class="flex flex-col">'), $ = /* @__PURE__ */ u('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), _ = /* @__PURE__ */ u("<span>"), I = /* @__PURE__ */ u("<button type=button>");
 function E(e) {

package/dist/index30.js

@@ -1,42 +1,92 @@
-import { template as c, insert as n, createComponent as t, effect as m, className as o, Portal as u } from "solid-js/web";
-import { Show as l } from "solid-js";
-import { cn as s } from "./index67.js";
-import { SnakeLoader as f } from "./index29.js";
-var g = /* @__PURE__ */ c('<p class="text-sm text-muted-foreground">'), d = /* @__PURE__ */ c("<div>");
-function k(e) {
-  const a = (() => {
-    var r = d();
-    return n(r, t(f, {
-      size: "lg"
-    }), null), n(r, t(l, {
-      get when() {
-        return e.message;
-      },
-      get children() {
-        var i = g();
-        return n(i, () => e.message), i;
-      }
-    }), null), m(() => o(r, s("flex flex-col items-center justify-center gap-4", "bg-background/80 backdrop-blur-sm", e.fullscreen ? "fixed inset-0 z-50" : "absolute inset-0", "animate-in fade-in", e.class))), r;
-  })();
-  return t(l, {
-    get when() {
-      return e.visible;
-    },
-    get children() {
-      return t(l, {
-        get when() {
-          return e.fullscreen;
-        },
-        fallback: a,
-        get children() {
-          return t(u, {
-            children: a
-          });
+import { template as h, insert as $, createComponent as z, effect as m, className as d, style as I } from "solid-js/web";
+import { createSignal as P, onMount as S, onCleanup as B, For as L } from "solid-js";
+import { cn as g } from "./index68.js";
+var M = /* @__PURE__ */ h(`<div role=status aria-label=Loading><style>
+        @keyframes snakeBreathing {
+          0%, 100% {
+            opacity: 0.5;
+            transform: scale(0.85);
+          }
+          50% {
+            opacity: 1;
+            transform: scale(1);
+          }
         }
-      });
-    }
+      `), j = /* @__PURE__ */ h("<div>"), F = /* @__PURE__ */ h('<div style="animation:snakeBreathing 1.5s ease-in-out infinite">');
+const u = {
+  sm: {
+    grid: "w-6 h-6",
+    cell: "w-1.5 h-1.5",
+    center: "w-1 h-1"
+  },
+  md: {
+    grid: "w-9 h-9",
+    cell: "w-2.5 h-2.5",
+    center: "w-2 h-2"
+  },
+  lg: {
+    grid: "w-12 h-12",
+    cell: "w-3 h-3",
+    center: "w-2.5 h-2.5"
+  }
+}, b = {
+  slow: 200,
+  normal: 120,
+  fast: 80
+}, f = [
+  [100, 1.1],
+  // head: full opacity, slightly larger
+  [85, 1.05],
+  // trail 1: smooth transition
+  [65, 1],
+  // trail 2
+  [40, 0.95]
+  // trail 3: fading out
+];
+function q(l) {
+  const c = () => l.size ?? "md", v = () => l.speed ?? "normal", i = [0, 1, 2, 5, 8, 7, 6, 3], [k, C] = P(0);
+  S(() => {
+    const t = setInterval(() => {
+      C((n) => (n + 1) % i.length);
+    }, b[v()]);
+    B(() => clearInterval(t));
   });
+  const _ = (t) => {
+    const n = k();
+    for (let r = 0; r < f.length; r++)
+      if (i[(n + i.length - r) % i.length] === t) return r;
+    return -1;
+  };
+  return (() => {
+    var t = M(), n = t.firstChild;
+    return $(t, z(L, {
+      each: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+      children: (r) => {
+        const o = r === 4, a = () => o ? -1 : _(r);
+        return (() => {
+          var s = j();
+          return $(s, o && (() => {
+            var e = F();
+            return m(() => d(e, g("rounded-sm bg-primary", u[c()].center))), e;
+          })()), m((e) => {
+            var y, w;
+            var p = g("flex items-center justify-center rounded-sm", u[c()].cell, o && "bg-transparent"), x = o ? {} : {
+              "background-color": a() >= 0 ? `color-mix(in srgb, var(--primary) ${((y = f[a()]) == null ? void 0 : y[0]) ?? 0}%, transparent)` : "var(--muted)",
+              transform: `scale(${a() >= 0 ? ((w = f[a()]) == null ? void 0 : w[1]) ?? 1 : 1})`,
+              "transition-property": "background-color, transform",
+              "transition-duration": `${b[v()] * 0.9}ms`,
+              "transition-timing-function": "ease-out"
+            };
+            return p !== e.e && d(s, e.e = p), e.t = I(s, x, e.t), e;
+          }, {
+            e: void 0,
+            t: void 0
+          }), s;
+        })();
+      }
+    }), n), m(() => d(t, g("grid grid-cols-3 gap-1", u[c()].grid, l.class))), t;
+  })();
 }
 export {
-  k as LoadingOverlay
+  q as SnakeLoader
 };