@instantdb/components 0.22.89-experimental.drewh-require-app-and-admin.20279445710.1 → 0.22.89-experimental.drewh-use-env-for-explorer-demo.20280152775.1

package/dist/index.js

@@ -7,13 +7,13 @@ import He from "copy-to-clipboard";
 import { twMerge as pa } from "tailwind-merge";
 import * as le from "@radix-ui/react-select";
 import { ChevronDownIcon as Nt, ChevronRightIcon as ga, ArrowUturnLeftIcon as ha, ArrowPathIcon as fa, ClockIcon as ir, ArrowUpIcon as ma, ArrowDownIcon as ba, ArrowsUpDownIcon as wa, Cog6ToothIcon as va, XMarkIcon as lr, PencilSquareIcon as ya, ArrowUpOnSquareIcon as ka, TrashIcon as xa, ExclamationTriangleIcon as Sa, CheckIcon as Na, ChevronUpIcon as Ea, InformationCircleIcon as Ca } from "@heroicons/react/24/outline";
-import sr, { useMemo as se, useState as C, useEffect as H, useRef as X, useCallback as at, useSyncExternalStore as Ia, useLayoutEffect as vt, Component as dr, createContext as cr, useContext as lt, useId as ur, createElement as Aa, Fragment as Ta } from "react";
-import { createPortal as Ra } from "react-dom";
+import sr, { useMemo as se, useState as C, useEffect as H, useRef as X, useCallback as at, useSyncExternalStore as Ia, useLayoutEffect as vt, Component as dr, createContext as cr, useContext as lt, useId as ur, createElement as Aa, Fragment as Ra } from "react";
+import { createPortal as Ta } from "react-dom";
 import * as Ge from "@radix-ui/react-dialog";
 import { ArrowLeftIcon as Pt, PlusIcon as Oa, ArrowRightIcon as _a, Table as Da, FileDown as La, CurlyBraces as Fa, ArrowRightFromLine as $a, XIcon as za } from "lucide-react";
 import ja from "json5";
 import { Combobox as pr, ComboboxInput as gr, ComboboxOptions as hr, ComboboxOption as fr, useClose as We, Popover as Ma, PopoverButton as Ba, PopoverPanel as Ua } from "@headlessui/react";
-import * as Re from "@radix-ui/react-dropdown-menu";
+import * as Te from "@radix-ui/react-dropdown-menu";
 import * as qt from "@radix-ui/react-toggle-group";
 import { ArrowLeftIcon as st, PencilSquareIcon as Pa, TrashIcon as nt, PlusIcon as mr, ArrowUturnLeftIcon as Ve, ArrowPathIcon as qa, InformationCircleIcon as Ga, Cog8ToothIcon as Ha, ChevronLeftIcon as Wa, Bars3Icon as Va, XMarkIcon as Ya, EyeSlashIcon as br, EyeIcon as wr, ClipboardDocumentIcon as Et, CheckCircleIcon as Ka } from "@heroicons/react/24/solid";
 import vr from "react-copy-to-clipboard";
@@ -399,11 +399,11 @@ function An({
     )
   ] });
 }
-const Tn = [
+const Rn = [
   // Exclude computed fields
   ["$files", "url"]
 ], Kt = [":", ">", "<"];
-function Rn(e) {
+function Tn(e) {
   let t = 0, a, n;
   const o = [];
   let i = -1;
@@ -442,7 +442,7 @@ function On({
 }) {
   if (!e.trim())
     return [];
-  const n = Rn(e), o = n.flatMap(
+  const n = Tn(e), o = n.flatMap(
     (i) => {
       const l = t[i.field];
       if (!l || !i.value)
@@ -543,7 +543,7 @@ function Dn({
     }, 80),
     [l, g, i]
   ), p = n.indexOf(":") !== -1 ? vn(n.split(" ")) : n, f = (t || []).flatMap((s) => {
-    const m = Tn.some(
+    const m = Rn.some(
       ([v, k]) => v === s.namespace && k === s.name
     );
     if (s.type === "ref" || m)
@@ -1131,7 +1131,7 @@ async function Kn({
     })
   })).json()).job;
 }
-function Tr(e, t, a, n) {
+function Rr(e, t, a, n) {
   let o = !1, i = !1, l = 20, g = null;
   const c = (f) => {
     if (f !== g)
@@ -1215,7 +1215,7 @@ const Xn = ({
         }
       )).json();
       f((L) => ({ ...L, [k]: P.job })), c((L) => ({ ...L, [k]: void 0 })), b(!1);
-      const B = Tr(
+      const B = Rr(
         t,
         P.job.id,
         l,
@@ -1474,7 +1474,7 @@ function Jn({
         })
       }
     ) : p.type === "delete" ? /* @__PURE__ */ r(
-      Rr,
+      Tr,
       {
         name: t.name,
         type: "namespace",
@@ -1496,7 +1496,7 @@ function Jn({
     ) : null
   ] });
 }
-function Rr({
+function Tr({
   name: e,
   type: t,
   onClose: a,
@@ -1548,7 +1548,7 @@ function eo({
     reverseAttrName: G,
     namespaceName: t.name,
     reverseNamespaceName: P?.name
-  }), R = v === "blob" ? L : S.isValidLink;
+  }), T = v === "blob" ? L : S.isValidLink;
   H(() => {
     if (v !== "ref" || !P) return;
     const A = P.name === t.name;
@@ -1733,7 +1733,7 @@ function eo({
           label: "Create attribute",
           submitLabel: "Creating attribute...",
           errorMessage: "Failed to create attribute",
-          disabled: !R,
+          disabled: !T,
           className: "border-gray-500 disabled:opacity-20",
           onClick: I
         }
@@ -2168,7 +2168,7 @@ async function ao({
       n
     );
     o(c);
-    const p = Tr(e, c.id, n, l);
+    const p = Rr(e, c.id, n, l);
     i.current = p.stop;
     const f = await p.start((d, u) => {
       u && ie(`Error while marking ${g} as required.`), d && o(d);
@@ -2529,7 +2529,7 @@ function co({
     null
   ), Y = X(null), z = We();
   H(() => () => Y.current?.(), [Y]);
-  const j = s === "one-one" || s === "one-many", S = s === "one-one" || s === "many-one", R = _r({
+  const j = s === "one-one" || s === "one-many", S = s === "one-one" || s === "many-one", T = _r({
     attrName: p,
     reverseAttrName: d,
     namespaceName: t.linkConfig.forward.namespace,
@@ -2593,7 +2593,7 @@ function co({
     }, 500), a();
   }
   return g.type === "delete" ? /* @__PURE__ */ r(
-    Rr,
+    Tr,
     {
       onConfirm: D,
       onClose: a,
@@ -2703,7 +2703,7 @@ function co({
         /* @__PURE__ */ r(
           ve,
           {
-            disabled: n.attr.disabled || !R.isValidLink,
+            disabled: n.attr.disabled || !T.isValidLink,
             type: "submit",
             label: "Update relationship",
             submitLabel: "Updating relationship...",
@@ -2712,7 +2712,7 @@ function co({
             title: n.attr.message
           }
         ),
-        R.shouldShowSelfLinkNameError ? /* @__PURE__ */ r("span", { className: "text-red-500", children: "Self-links must have different attribute names." }) : null
+        T.shouldShowSelfLinkNameError ? /* @__PURE__ */ r("span", { className: "text-red-500", children: "Self-links must have different attribute names." }) : null
       ] })
     ] })
   ] });
@@ -3105,11 +3105,11 @@ function rr({
   for (const S of t.attrs)
     S.name !== "id" && (yo(t, S) && l.push(S), S.type === "ref" && g.push(S));
   const c = l.reduce(
-    (S, R) => {
-      const I = a[R.name], A = fo(R, I), D = o === "add" ? R.isRequired ? wt[A] : null : I;
+    (S, T) => {
+      const I = a[T.name], A = fo(T, I), D = o === "add" ? T.isRequired ? wt[A] : null : I;
       return {
         ...S,
-        [R.name]: {
+        [T.name]: {
           type: A,
           value: D,
           error: null
@@ -3121,57 +3121,57 @@ function rr({
     ...c,
     ...o === "add" ? { id: { type: "string", value: Pe() } } : {}
   }), [d, u] = C({}), [s, m] = C({}), [b, w] = C(
-    l.reduce((S, R) => ({
+    l.reduce((S, T) => ({
       ...S,
-      [R.name]: o === "edit" ? a[R.name] === null || a[R.name] === void 0 : p[R.name].value === null
+      [T.name]: o === "edit" ? a[T.name] === null || a[T.name] === void 0 : p[T.name].value === null
     }), {})
   ), v = Object.values(p).some((S) => !!S.error), [k, x] = C(!1), _ = () => {
     u({}), f({ ...c }), w(
-      l.reduce((R, I) => ({
-        ...R,
+      l.reduce((T, I) => ({
+        ...T,
         [I.name]: o === "edit" ? a[I.name] === null || a[I.name] === void 0 : !1
       }), {})
     );
     const S = {};
-    l.forEach((R) => {
-      c[R.name]?.type === "json" && a[R.name] !== void 0 && (S[R.name] = a[R.name] === null ? "null" : JSON.stringify(a[R.name], null, 2));
+    l.forEach((T) => {
+      c[T.name]?.type === "json" && a[T.name] !== void 0 && (S[T.name] = a[T.name] === null ? "null" : JSON.stringify(a[T.name], null, 2));
     }), m(S), x(!1);
-  }, P = (S, R) => {
+  }, P = (S, T) => {
     f((I) => {
       const A = I[S]?.value;
       return {
         ...I,
-        [S]: { type: R, value: er(A, R) }
+        [S]: { type: T, value: er(A, T) }
       };
     });
-  }, B = (S, R, I) => {
-    const A = I ? I(R) : null;
+  }, B = (S, T, I) => {
+    const A = I ? I(T) : null;
     f((D) => {
       const F = D[S]?.type || "string";
       return {
         ...D,
         [S]: {
           type: F,
-          value: er(R, F),
+          value: er(T, F),
           error: A
         }
       };
     });
-  }, L = (S, R) => {
-    m((I) => ({ ...I, [S]: R })), f((I) => {
+  }, L = (S, T) => {
+    m((I) => ({ ...I, [S]: T })), f((I) => {
       const A = I[S] || {};
-      return R === "" ? {
+      return T === "" ? {
         ...I,
         [S]: { type: "json", value: void 0, error: "Invalid JSON" }
       } : {
         ...I,
-        [S]: go(R) ? { type: "json", value: JSON.parse(R), error: null } : { ...A, type: "json", error: "Invalid JSON" }
+        [S]: go(T) ? { type: "json", value: JSON.parse(T), error: null } : { ...A, type: "json", error: "Invalid JSON" }
       };
     });
-  }, q = (S, R) => {
-    w((A) => ({ ...A, [S]: R }));
+  }, q = (S, T) => {
+    w((A) => ({ ...A, [S]: T }));
     const I = p[S]?.type || "string";
-    R ? (f((A) => ({
+    T ? (f((A) => ({
       ...A,
       [S]: {
         type: I,
@@ -3188,25 +3188,25 @@ function rr({
         error: null
       }
     })), I === "json" && m((A) => ({ ...A, [S]: "{}" })));
-  }, G = (S, R) => {
+  }, G = (S, T) => {
     u((I) => {
-      if (a[S.name]?.find((Q) => Q.id === R))
+      if (a[S.name]?.find((Q) => Q.id === T))
         return {
           ...I,
           [S.name]: {
             ...I[S.name] || {},
-            [R]: { action: "unlink", item: null }
+            [T]: { action: "unlink", item: null }
           }
         };
-      const { [R]: D, ...F } = I[S.name] || {};
+      const { [T]: D, ...F } = I[S.name] || {};
       return {
         ...I,
         [S.name]: F
       };
     });
-  }, Y = (S, R) => {
+  }, Y = (S, T) => {
     u((I) => {
-      const A = R.id, D = I[S.name]?.[A];
+      const A = T.id, D = I[S.name]?.[A];
       if (D && D.action === "unlink") {
         if (S.cardinality === "one") {
           const { [S.name]: te, ...W } = I;
@@ -3223,7 +3223,7 @@ function rr({
         return {
           ...I,
           [S.name]: {
-            [A]: { action: "link", item: R },
+            [A]: { action: "link", item: T },
             [F.id]: { action: "unlink", item: null }
           }
         };
@@ -3232,14 +3232,14 @@ function rr({
         ...I,
         [S.name]: {
           ...I[S.name] || {},
-          [A]: { action: "link", item: R }
+          [A]: { action: "link", item: T }
         }
       };
     });
   }, z = (S) => {
     requestAnimationFrame(() => {
-      const R = document.querySelector(`[tabindex="${S}"]`);
-      R && R instanceof HTMLElement && R.focus();
+      const T = document.querySelector(`[tabindex="${S}"]`);
+      T && T instanceof HTMLElement && T.focus();
     });
   }, j = async () => {
     if (v) {
@@ -3248,10 +3248,10 @@ function rr({
     }
     const S = Object.fromEntries(
       Object.entries(p).map(([I, { value: A }]) => [I, A])
-    ), R = a.id || S.id || Pe();
+    ), T = a.id || S.id || Pe();
     delete S.id;
     try {
-      let I = tn[t.name][R];
+      let I = tn[t.name][T];
       const A = [], D = [];
       for (const [F, Q] of Object.entries(d))
         for (const [te, { action: W }] of Object.entries(Q))
@@ -3280,7 +3280,7 @@ function rr({
     ] }) : /* @__PURE__ */ r(M, { children: t.name }) }),
     /* @__PURE__ */ h("div", { className: "mt-4 flex flex-col gap-4", children: [
       o === "add" ? /* @__PURE__ */ h("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ r(Te, { className: "font-mono", children: /* @__PURE__ */ h("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ r(Re, { className: "font-mono", children: /* @__PURE__ */ h("div", { className: "flex gap-1", children: [
           "id",
           " ",
           /* @__PURE__ */ r(
@@ -3305,14 +3305,14 @@ function rr({
         " ",
         p.id?.error && k && /* @__PURE__ */ r("span", { className: "text-sm font-medium text-red-500", children: p.id.error })
       ] }, "id") : null,
-      l.map((S, R) => {
-        const I = R + 1, { type: A, value: D, error: F } = p[S.name] || {
+      l.map((S, T) => {
+        const I = T + 1, { type: A, value: D, error: F } = p[S.name] || {
           type: "string",
           value: wt.string
         }, Q = s[S.name] || (D !== null ? JSON.stringify(D, null, 2) : "null"), te = b[S.name];
         return /* @__PURE__ */ h("div", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ h("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ r(Te, { className: "font-mono", children: S.name }),
+            /* @__PURE__ */ r(Re, { className: "font-mono", children: S.name }),
             /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ r("div", { className: "flex items-center", children: !S.isRequired && /* @__PURE__ */ r(
                 ee,
@@ -3407,11 +3407,11 @@ function rr({
           ] })
         ] }, S.name);
       }),
-      g.map((S, R) => {
+      g.map((S, T) => {
         const I = S.isForward ? S.linkConfig.reverse.nsMap : S.linkConfig.forward.nsMap;
         return I ? /* @__PURE__ */ h("div", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ h("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ r(Te, { className: "font-mono", children: S.name }),
+            /* @__PURE__ */ r(Re, { className: "font-mono", children: S.name }),
             /* @__PURE__ */ h("span", { className: "rounded-sm px-2 py-0.5 text-sm", children: [
               "Link to ",
               /* @__PURE__ */ r("code", { children: I.name })
@@ -3507,15 +3507,15 @@ const Eo = ({ db: e, namespaces: t }) => {
     (E) => E.id === i.namespace
   ), [g, c] = C(50), [p, f] = C([]), [d, u] = C(!1), [s, m] = C(""), [b, w] = C(!1), [v, k] = C(null), [x, _] = C(null), [P, B] = C(!1);
   X(null);
-  const L = X(null), [q, G] = C({}), Y = X(null), z = l?.name?.startsWith("$") ?? !1, j = l?.name ?? "", S = z && !["$users", "$files"].includes(j), R = q[j] || 0, I = i?.sortAttr || "serverCreatedAt", A = i?.sortAsc ?? !0, D = (E, N) => {
-    const T = ae.options.data.map((pe) => pe.id), $ = T.indexOf(E), U = T.indexOf(L.current), [K, J] = [
+  const L = X(null), [q, G] = C({}), Y = X(null), z = l?.name?.startsWith("$") ?? !1, j = l?.name ?? "", S = z && !["$users", "$files"].includes(j), T = q[j] || 0, I = i?.sortAttr || "serverCreatedAt", A = i?.sortAsc ?? !0, D = (E, N) => {
+    const R = ae.options.data.map((pe) => pe.id), $ = R.indexOf(E), U = R.indexOf(L.current), [K, J] = [
       Math.min($, U),
       Math.max($, U)
     ];
     Ce((pe) => {
       const ze = { ...pe };
       for (let Ae = K; Ae <= J; Ae++) {
-        const et = T[Ae];
+        const et = R[Ae];
         N ? ze[et] = !0 : delete ze[et];
       }
       return ze;
@@ -3526,14 +3526,14 @@ const Eo = ({ db: e, namespaces: t }) => {
     i?.where,
     i?.filters || F,
     g,
-    R,
+    T,
     I,
     A
   ), re = te.data?.[l?.name ?? ""] ?? ko;
   function ye(E, N) {
-    return E.filter((T) => N[T.id]);
+    return E.filter((R) => N[R.id]);
   }
-  const ce = W ? Math.ceil(W / g) : 1, Z = R / g + 1, [ke, Kr] = Un("localDates", !1), Xr = async () => {
+  const ce = W ? Math.ceil(W / g) : 1, Z = T / g + 1, [ke, Kr] = Un("localDates", !1), Xr = async () => {
     try {
       if (u(!0), p.length === 0)
         return;
@@ -3560,11 +3560,11 @@ const Eo = ({ db: e, namespaces: t }) => {
   }, Ut = (E, N = 200) => {
     if (!l)
       return;
-    const T = {};
+    const R = {};
     l?.attrs.forEach(($) => {
-      T[$.id + $.name] = ae.getColumn($.id + $.name)?.getSize() || 0;
+      R[$.id + $.name] = ae.getColumn($.id + $.name)?.getSize() || 0;
     }), ae.setColumnSizing({
-      ...T,
+      ...R,
       [E]: N
     });
   }, De = se(() => {
@@ -3584,12 +3584,12 @@ const Eo = ({ db: e, namespaces: t }) => {
             pointerEvents: "auto"
           },
           checked: N.getIsAllRowsSelected(),
-          onChange: (T) => {
-            T ? (N.toggleAllRowsSelected(), re.length > 0 && (L.current = re[0].id)) : (Ce({}), L.current = null);
+          onChange: (R) => {
+            R ? (N.toggleAllRowsSelected(), re.length > 0 && (L.current = re[0].id)) : (Ce({}), L.current = null);
           }
         }
       ),
-      cell: ({ row: N, column: T }) => /* @__PURE__ */ h("div", { className: "flex h-1 justify-around gap-2", children: [
+      cell: ({ row: N, column: R }) => /* @__PURE__ */ h("div", { className: "flex h-1 justify-around gap-2", children: [
         /* @__PURE__ */ r(
           ee,
           {
@@ -3618,7 +3618,7 @@ const Eo = ({ db: e, namespaces: t }) => {
         header: N.name,
         enableSorting: !0,
         enableResizing: !0,
-        accessorFn: (T) => T[N.name],
+        accessorFn: (R) => R[N.name],
         meta: {
           sortable: N.sortable || N.name === "id",
           copyable: !0,
@@ -3626,11 +3626,11 @@ const Eo = ({ db: e, namespaces: t }) => {
           attr: N,
           disablePadding: N.namespace === "$files" && N.name === "url"
         },
-        cell: (T) => {
-          if (T.row.original[N.name] === null || T.row.original[N.name] === void 0)
+        cell: (R) => {
+          if (R.row.original[N.name] === null || R.row.original[N.name] === void 0)
             return /* @__PURE__ */ r("div", { className: "h-1", children: "-" });
           if (N.type === "ref") {
-            const $ = T.row.original[N.name].length;
+            const $ = R.row.original[N.name].length;
             return /* @__PURE__ */ h(
               "div",
               {
@@ -3652,21 +3652,21 @@ const Eo = ({ db: e, namespaces: t }) => {
                 "a",
                 {
                   className: "h-full w-full pl-2 align-middle text-xs font-bold underline hover:text-black dark:hover:text-white",
-                  href: T.row.original.url,
+                  href: R.row.original.url,
                   target: "_blank",
                   children: "View File"
                 }
               );
             if (N.name === "size")
-              return Pn(T.row.original[N.name]);
+              return Pn(R.row.original[N.name]);
           }
           if (N.checkedDataType === "boolean")
-            return T.row.original[N.name] ? "true" : "false";
+            return R.row.original[N.name] ? "true" : "false";
           if (N.checkedDataType === "date") {
-            const $ = Qa(T.row.original[N.name]);
-            return ke && $?.toLocaleString() || T.row.original[N.name];
+            const $ = Qa(R.row.original[N.name]);
+            return ke && $?.toLocaleString() || R.row.original[N.name];
           }
-          return Ne(T.row.original[N.name]) ? /* @__PURE__ */ r(Io, { data: T.row.original[N.name] }) : T.row.original[N.name];
+          return Ne(R.row.original[N.name]) ? /* @__PURE__ */ r(Io, { data: R.row.original[N.name] }) : R.row.original[N.name];
         }
       });
     }), E;
@@ -3677,10 +3677,10 @@ const Eo = ({ db: e, namespaces: t }) => {
         [K]: J
       } : U,
       {}
-    ), N = _e.current?.clientWidth || -1, T = Object.values(E).reduce(
+    ), N = _e.current?.clientWidth || -1, R = Object.values(E).reduce(
       (U, K) => U + K,
       0
-    ), $ = N - 52 - T;
+    ), $ = N - 52 - R;
     if ($ > 0) {
       const U = Object.keys(E).length, K = $ / U;
       Object.keys(E).forEach((J) => {
@@ -3704,7 +3704,7 @@ const Eo = ({ db: e, namespaces: t }) => {
         Je(JSON.parse(E));
       else {
         const N = l.attrs.map(
-          (T) => T.id + T.name
+          (R) => R.id + R.name
         );
         Je(["select-col", ...N]);
       }
@@ -3746,18 +3746,18 @@ const Eo = ({ db: e, namespaces: t }) => {
       $.key === "Shift" && ft(!0);
     }, N = ($) => {
       $.key === "Shift" && ft(!1);
-    }, T = () => {
+    }, R = () => {
       ft(!1);
     };
-    return window.addEventListener("keydown", E), window.addEventListener("keyup", N), window.addEventListener("blur", T), () => {
-      window.removeEventListener("keydown", E), window.removeEventListener("keyup", N), window.removeEventListener("blur-sm", T);
+    return window.addEventListener("keydown", E), window.addEventListener("keyup", N), window.addEventListener("blur", R), () => {
+      window.removeEventListener("keydown", E), window.removeEventListener("keyup", N), window.removeEventListener("blur-sm", R);
     };
   }, []);
   const [aa, $e] = C(!1);
   function na(E) {
-    const { active: N, over: T } = E;
-    N && T && N.id !== T.id && N.id !== "select-col" && T.id !== "select-col" && Je(($) => {
-      const U = $.indexOf(N.id), K = $.indexOf(T.id);
+    const { active: N, over: R } = E;
+    N && R && N.id !== R.id && N.id !== "select-col" && R.id !== "select-col" && Je(($) => {
+      const U = $.indexOf(N.id), K = $.indexOf(R.id);
       return fn($, U, K);
     });
   }
@@ -3782,11 +3782,11 @@ const Eo = ({ db: e, namespaces: t }) => {
       jt(da);
     };
     N(), E.addEventListener("scroll", N);
-    const T = new ResizeObserver(N);
-    T.observe(E);
+    const R = new ResizeObserver(N);
+    R.observe(E);
     const $ = E.firstElementChild;
-    return $ && T.observe($), window.addEventListener("resize", N), () => {
-      E.removeEventListener("scroll", N), T.disconnect(), window.removeEventListener("resize", N);
+    return $ && R.observe($), window.addEventListener("resize", N), () => {
+      E.removeEventListener("scroll", N), R.disconnect(), window.removeEventListener("resize", N);
     };
   }, [l, Lt]);
   const oa = an(
@@ -3811,10 +3811,10 @@ const Eo = ({ db: e, namespaces: t }) => {
       l?.attrs.forEach((U) => {
         N[U.id + U.name] = la(U.name);
       });
-      const T = Object.values(N).reduce(
+      const R = Object.values(N).reduce(
         (U, K) => U + K,
         0
-      ), $ = E - 52 - T;
+      ), $ = E - 52 - R;
       if ($ > 0) {
         const U = Object.keys(N).length, K = $ / U;
         Object.keys(N).forEach((J) => {
@@ -3870,7 +3870,7 @@ const Eo = ({ db: e, namespaces: t }) => {
                 try {
                   if (l.name === "$files") {
                     const E = re.filter((N) => N.id in xe).map((N) => N.path);
-                    await To(
+                    await Ro(
                       o.adminToken,
                       o.appId,
                       E,
@@ -3989,14 +3989,14 @@ const Eo = ({ db: e, namespaces: t }) => {
             i?.filters?.length ? /* @__PURE__ */ r(
               "span",
               {
-                title: i.filters.map(([E, N, T]) => `${E} ${N} ${T}`).join(" || "),
-                children: i.filters.map(([E, N, T], $) => /* @__PURE__ */ h("span", { children: [
+                title: i.filters.map(([E, N, R]) => `${E} ${N} ${R}`).join(" || "),
+                children: i.filters.map(([E, N, R], $) => /* @__PURE__ */ h("span", { children: [
                   /* @__PURE__ */ h("em", { className: "rounded-xs border bg-white px-1 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white", children: [
                     E,
                     " ",
                     N,
                     " ",
-                    T
+                    R
                   ] }),
                   i?.filters?.length && $ < i.filters.length - 1 ? " || " : null
                 ] }, E))
@@ -4100,8 +4100,8 @@ const Eo = ({ db: e, namespaces: t }) => {
                 onChange: (E) => {
                   if (!E) return;
                   const N = parseInt(E.value, 10);
-                  c(N), n.push((T) => ({
-                    ...T,
+                  c(N), n.push((R) => ({
+                    ...R,
                     limit: N
                   }));
                 },
@@ -4131,7 +4131,7 @@ const Eo = ({ db: e, namespaces: t }) => {
             onClick: () => {
               G({
                 ...q,
-                [l.name]: Math.max(0, R - g)
+                [l.name]: Math.max(0, T - g)
               }), n.push((E) => ({
                 ...E,
                 page: Math.max(1, Z - 1)
@@ -4149,13 +4149,13 @@ const Eo = ({ db: e, namespaces: t }) => {
           }
         ),
         /* @__PURE__ */ r("div", { className: "flex items-center space-x-1 overflow-hidden", children: [...new Array(ce)].map((E, N) => {
-          const T = N + 1;
-          return ce > 6 && T !== 1 && T !== ce && T !== Z && T !== Z - 1 && T !== Z + 1 ? T === Z - 2 || T === Z + 2 ? /* @__PURE__ */ r("div", { children: "..." }, T) : null : /* @__PURE__ */ r(
+          const R = N + 1;
+          return ce > 6 && R !== 1 && R !== ce && R !== Z && R !== Z - 1 && R !== Z + 1 ? R === Z - 2 || R === Z + 2 ? /* @__PURE__ */ r("div", { children: "..." }, R) : null : /* @__PURE__ */ r(
             "button",
             {
               className: O(
                 "rounded-md px-3 py-1 text-neutral-600 dark:text-neutral-300",
-                T === Z ? "bg-neutral-200 dark:bg-neutral-700" : "hover:bg-neutral-100 dark:hover:bg-neutral-800"
+                R === Z ? "bg-neutral-200 dark:bg-neutral-700" : "hover:bg-neutral-100 dark:hover:bg-neutral-800"
               ),
               onClick: () => {
                 G({
@@ -4163,13 +4163,13 @@ const Eo = ({ db: e, namespaces: t }) => {
                   [l.name]: N * g
                 }), n.push(($) => ({
                   ...$,
-                  page: T
+                  page: R
                 }));
               },
-              disabled: T === Z,
-              children: T
+              disabled: R === Z,
+              children: R
             },
-            T
+            R
           );
         }) }),
         /* @__PURE__ */ r(
@@ -4180,7 +4180,7 @@ const Eo = ({ db: e, namespaces: t }) => {
             onClick: () => {
               G({
                 ...q,
-                [l.name]: R + g
+                [l.name]: T + g
               }), n.push((E) => ({
                 ...E,
                 page: Math.min(ce, Z + 1)
@@ -4375,13 +4375,13 @@ const Eo = ({ db: e, namespaces: t }) => {
                       {
                         items: Le,
                         strategy: Wt,
-                        children: E.headers.map((N, T) => /* @__PURE__ */ r(
+                        children: E.headers.map((N, R) => /* @__PURE__ */ r(
                           Hn,
                           {
                             header: N,
                             table: ae,
                             headerGroup: E,
-                            index: T,
+                            index: R,
                             setMinViableColWidth: Zr,
                             onSort: ($, U, K) => {
                               n.push((J) => ({
@@ -4457,7 +4457,7 @@ async function Ao(e, t, a, n, o) {
     body: a
   });
 }
-async function To(e, t, a, n) {
+async function Ro(e, t, a, n) {
   const { data: o } = await Lr(
     `${n}/dash/apps/${t}/storage/files/delete`,
     {
@@ -4471,7 +4471,7 @@ async function To(e, t, a, n) {
   );
   return o;
 }
-function Ro(e, t) {
+function To(e, t) {
   const a = (n) => {
     e.current && n.target instanceof HTMLElement && !e.current.contains(n.target) && t();
   };
@@ -4486,7 +4486,7 @@ const Oo = ({
   const a = de(), n = it(), o = it(), i = e.find(
     (f) => f.id === a.explorerState?.namespace
   ), [l, g] = C(!1), c = X(null);
-  Ro(c, () => {
+  To(c, () => {
     g(!1);
   }), H(() => {
     !i && e.length > 0 && a.setExplorerState({ namespace: e[0].id });
@@ -4687,12 +4687,7 @@ const At = cr({ props: null, history: { push: () => {
     e,
     t,
     a
-  );
-  if (!n.adminToken)
-    throw new Error("adminToken is required for explorer");
-  if (!n.appId)
-    throw new Error("appId is required for explorer");
-  const { explorerState: o, setExplorerState: i } = n, [l, g] = C([]), c = at(
+  ), { explorerState: o, setExplorerState: i } = n, [l, g] = C([]), c = at(
     (w, v = !1) => {
       g((k) => !v && o ? [...k, o] : k), i(w);
     },
@@ -4730,16 +4725,16 @@ const At = cr({ props: null, history: { push: () => {
     [n, c, p, l]
   ), b = n.useShadowDOM ? Fo : sr.Fragment;
   return /* @__PURE__ */ r(At.Provider, { value: m, children: /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(Do, { children: /* @__PURE__ */ r(Oo, { db: f, namespaces: s.namespaces || [] }) }) }) });
-}, Tt = cr({
+}, Rt = cr({
   shadowRoot: null,
   container: null,
   darkMode: !1
 });
 function ct() {
-  return lt(Tt).container;
+  return lt(Rt).container;
 }
 function ut() {
-  return lt(Tt).darkMode;
+  return lt(Rt).darkMode;
 }
 const Fo = ({ children: e }) => {
   const t = X(null), a = X(null), [n, o] = C(null), l = de().darkMode;
@@ -4765,7 +4760,7 @@ const Fo = ({ children: e }) => {
     }),
     [n, l]
   );
-  return /* @__PURE__ */ r("div", { ref: t, style: { height: "100%" }, className: O("h-full"), children: /* @__PURE__ */ r(Tt.Provider, { value: g, children: n ? Ra(e, n) : null }) });
+  return /* @__PURE__ */ r("div", { ref: t, style: { height: "100%" }, className: O("h-full"), children: /* @__PURE__ */ r(Rt.Provider, { value: g, children: n ? Ta(e, n) : null }) });
 };
 function $o({
   ...e
@@ -5352,7 +5347,7 @@ var xt = function() {
             if (u.length > d.length)
               return;
             if (!(S instanceof o)) {
-              var R = 1, I;
+              var T = 1, I;
               if (L) {
                 if (I = i(Y, j, d, B), !I || I.index >= d.length)
                   break;
@@ -5362,16 +5357,16 @@ var xt = function() {
                 if (D -= z.value.length, j = D, z.value instanceof o)
                   continue;
                 for (var F = z; F !== u.tail && (D < A || typeof F.value == "string"); F = F.next)
-                  R++, D += F.value.length;
-                R--, S = d.slice(j, D), I.index -= j;
+                  T++, D += F.value.length;
+                T--, S = d.slice(j, D), I.index -= j;
               } else if (I = i(Y, 0, S, B), !I)
                 continue;
               var Q = I.index, te = I[0], W = S.slice(0, Q), re = S.slice(Q + te.length), ye = j + S.length;
               w && ye > w.reach && (w.reach = ye);
               var ce = z.prev;
-              W && (ce = c(u, ce, W), j += W.length), p(u, ce, R);
+              W && (ce = c(u, ce, W), j += W.length), p(u, ce, T);
               var Z = new o(v, P ? n.tokenize(te, P) : te, q, te);
-              if (z = c(u, ce, Z), re && c(u, z, re), R > 1) {
+              if (z = c(u, ce, Z), re && c(u, z, re), T > 1) {
                 var ke = {
                   cause: v + "," + x,
                   reach: ye
@@ -6874,8 +6869,8 @@ y.languages.sql = {
           ), j = z.indexOf(Y);
           if (j !== -1) {
             ++v;
-            var S = z.substring(0, j), R = p(k[Y]), I = z.substring(j + Y.length), A = [];
-            if (S && A.push(S), A.push(R), I) {
+            var S = z.substring(0, j), T = p(k[Y]), I = z.substring(j + Y.length), A = [];
+            if (S && A.push(S), A.push(T), I) {
               var D = [I];
               B(D), A.push.apply(A, D);
             }
@@ -8150,7 +8145,7 @@ const Qo = {
       style: { color: "#b4637a" }
     }
   ]
-}, Jo = ue("div", "flex flex-col gap-2"), ei = ue("div", "flex flex-col gap-2 md:flex-row"), pt = ue("div", "prose dark:text-neutral-400"), ti = ue("div", "text-2xl font-bold"), ri = ue("div", "text-xl font-bold"), ai = ue("div", "text-lg"), ni = ue("div", "text-md font-bold"), oi = ue("div", "text-sm text-gray-400"), Te = ue(
+}, Jo = ue("div", "flex flex-col gap-2"), ei = ue("div", "flex flex-col gap-2 md:flex-row"), pt = ue("div", "prose dark:text-neutral-400"), ti = ue("div", "text-2xl font-bold"), ri = ue("div", "text-xl font-bold"), ai = ue("div", "text-lg"), ni = ue("div", "text-md font-bold"), oi = ue("div", "text-sm text-gray-400"), Re = ue(
   "div",
   "text-sm font-bold dark:text-neutral-400 text-gray-700"
 ), ii = ({ size: e = "mini" }) => /* @__PURE__ */ r("img", { src: "/img/icon/logo-512.svg", className: {
@@ -8240,7 +8235,7 @@ function Ee({
   return H(() => {
     a && b.current?.focus();
   }, []), /* @__PURE__ */ h("label", { className: "flex flex-col gap-1", children: [
-    l ? /* @__PURE__ */ r(Te, { children: l }) : null,
+    l ? /* @__PURE__ */ r(Re, { children: l }) : null,
     /* @__PURE__ */ r(
       "input",
       {
@@ -8292,7 +8287,7 @@ function li({
   return H(() => {
     t && m.current?.focus();
   }, []), /* @__PURE__ */ h("label", { className: "flex flex-col gap-2", children: [
-    i ? /* @__PURE__ */ r(Te, { children: i }) : null,
+    i ? /* @__PURE__ */ r(Re, { children: i }) : null,
     /* @__PURE__ */ r(
       "textarea",
       {
@@ -8677,7 +8672,7 @@ function ve({
     }
   );
 }
-function Rt(e) {
+function Tt(e) {
   return e.length === 36 && e.indexOf("-") === 8 ? e.replaceAll(/[^-]/g, "*") : e.replaceAll(/./g, "*");
 }
 function ci({
@@ -8725,7 +8720,7 @@ function ci({
                 const s = window.getSelection();
                 (!s || s.toString().length === 0) && (window.navigator.clipboard.writeText(e), d(!0), setTimeout(() => d(!1), 1e3));
               },
-              children: o || g ? Rt(e) : e
+              children: o || g ? Tt(e) : e
             }
           ) }),
           /* @__PURE__ */ r(Ze, { side: "bottom", children: "Copied!" })
@@ -8791,7 +8786,7 @@ function ui({
                 const w = window.getSelection();
                 (!w || w.toString().length === 0) && (window.navigator.clipboard.writeText(e), d(!0), setTimeout(() => d(!1), 1e3), g?.());
               },
-              children: o || c ? Rt(e) : e
+              children: o || c ? Tt(e) : e
             }
           ) }),
           /* @__PURE__ */ r(Ze, { side: "bottom", children: "Copied!" })
@@ -9013,12 +9008,12 @@ function Ze({
 function qr({
   ...e
 }) {
-  return /* @__PURE__ */ r(Re.Root, { ...e });
+  return /* @__PURE__ */ r(Te.Root, { ...e });
 }
 function Gr({
   ...e
 }) {
-  return /* @__PURE__ */ r(Re.Trigger, { ...e });
+  return /* @__PURE__ */ r(Te.Trigger, { ...e });
 }
 function Hr({
   className: e,
@@ -9026,8 +9021,8 @@ function Hr({
   ...a
 }) {
   const n = ct(), o = ut();
-  return /* @__PURE__ */ r(Re.Portal, { container: n, children: /* @__PURE__ */ r(
-    Re.Content,
+  return /* @__PURE__ */ r(Te.Portal, { container: n, children: /* @__PURE__ */ r(
+    Te.Content,
     {
       sideOffset: t,
       className: O(
@@ -9044,7 +9039,7 @@ function Ue({
   ...t
 }) {
   return /* @__PURE__ */ r(
-    Re.Item,
+    Te.Item,
     {
       className: O(
         "relative flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none focus:bg-neutral-100 focus:text-neutral-900 data-disabled:pointer-events-none data-disabled:opacity-50 dark:focus:bg-neutral-700 dark:focus:text-neutral-50",
@@ -9059,7 +9054,7 @@ function Wr({
   ...t
 }) {
   return /* @__PURE__ */ r(
-    Re.Separator,
+    Te.Separator,
     {
       className: O(
         "-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-700",
@@ -9203,7 +9198,7 @@ function Dt({
                 ]
               }
             ) }) : null,
-            /* @__PURE__ */ r("code", { children: f.map((u, s) => /* @__PURE__ */ h(Ta, { children: [
+            /* @__PURE__ */ r("code", { children: f.map((u, s) => /* @__PURE__ */ h(Ra, { children: [
               u.filter((m) => !m.empty).map((m, b) => {
                 const { key: w, ...v } = d({ token: m });
                 return /* @__PURE__ */ r("span", { ...v }, w || b);
@@ -9271,7 +9266,7 @@ const Gi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   IconButton: gt,
   InfoTip: Ot,
   JSONEditor: hi,
-  Label: Te,
+  Label: Re,
   LogoIcon: ii,
   ProgressButton: Ur,
   ScreenHeading: ti,
@@ -9291,7 +9286,7 @@ const Gi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   TooltipProvider: Pr,
   TooltipTrigger: Xe,
   cn: O,
-  redactedValue: Rt,
+  redactedValue: Tt,
   toast: St,
   twel: ue,
   useDialog: it
@@ -9325,7 +9320,7 @@ export {
   gt as IconButton,
   Ot as InfoTip,
   hi as JSONEditor,
-  Te as Label,
+  Re as Label,
   ii as LogoIcon,
   Ur as ProgressButton,
   ti as ScreenHeading,
@@ -9346,7 +9341,7 @@ export {
   Pr as TooltipProvider,
   Xe as TooltipTrigger,
   O as cn,
-  Rt as redactedValue,
+  Tt as redactedValue,
   Yi as toast,
   ue as twel,
   Gi as ui,