zudoku 0.0.0-reset-hash-value.ac516c6d → 0.0.0-z06bf8c86

package/lib/zudoku.plugin-api-keys.js

@@ -1,56 +1,179 @@
 import { j as e } from "./jsx-runtime-BzflLqGi.js";
-import { CircleSlashIcon as z, CheckIcon as ue, XIcon as he, PencilLineIcon as fe, RefreshCwIcon as pe, TrashIcon as me, KeyRoundIcon as xe } from "lucide-react";
-import { R as ye } from "./RouterError-fm21cqlj.js";
-import { i as I } from "./invariant-Bm-FVUQE.js";
-import { O as ge, b as je } from "./chunk-PVWAREVJ-BO6B-RAk.js";
-import { u as Ce } from "./hook-CAebs2rv.js";
-import { D as ve, a as Y } from "./ErrorAlert-VBJ8aHH7.js";
-import { Button as w } from "./ui/Button.js";
-import { a as se, i as ne, b as we } from "./ZudokuContext-BXTZApgy.js";
-import { u as O, A as M, a as q, b as be, S as ke, c as Ne, d as Ke, e as Ee, f as De, g as Z, h as Ae } from "./Select-CPoGZU_V.js";
-import * as L from "react";
-import Pe, { createContext as Q, useRef as E, useLayoutEffect as Ie, useEffect as ie, useId as _, useContext as B, useInsertionEffect as Re, useMemo as F, useCallback as Se, Children as Te, isValidElement as Oe, useState as K, forwardRef as Me } from "react";
-import { C as qe, a as $e } from "./Card-KFniaZn5.js";
-import { e as H, f as D, D as V, g as G, a as J, b as U, c as W, d as re } from "./Dialog-BOl0QB3n.js";
-import { Input as ae } from "./ui/Input.js";
-import { c as A } from "./cn-dYga0KKN.js";
-import { a as ze } from "./index.esm-BYObtETB.js";
-import { B as Fe } from "./Button-DmS4u8Lj.js";
-import { S as Le } from "./Spinner-CI6bRyZw.js";
-import { useAuth as Qe } from "./zudoku.hooks.js";
-const _e = () => {
-  const t = Ce();
-  return t.isAuthEnabled && t.isPending ? null : t.isAuthenticated ? /* @__PURE__ */ e.jsx(ge, {}) : t.isAuthEnabled ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: [
-    "Please login first to view this page",
-    /* @__PURE__ */ e.jsx(w, { onClick: () => t.login(), children: "Login" })
-  ] }) : /* @__PURE__ */ e.jsx("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: /* @__PURE__ */ e.jsxs(ve, { className: "max-w-[600px]", children: [
-    "Authentication needs to be enabled for API keys to work. Enable it in your Zudoku configuration under ",
-    /* @__PURE__ */ e.jsx("code", { children: "authentication" }),
-    "."
-  ] }) });
-}, Be = Q({});
-function oe(t) {
-  const i = E(null);
-  return i.current === null && (i.current = t()), i.current;
+import { TrashIcon as me, CircleSlashIcon as z, CheckIcon as xe, XIcon as ye, PencilLineIcon as ge, RefreshCwIcon as je, KeyRoundIcon as ve } from "lucide-react";
+import { Z as M, i as E } from "./invariant-BJAl77rw.js";
+import * as F from "react";
+import { createContext as Q, useRef as A, useLayoutEffect as Ce, useEffect as ie, useId as H, useContext as V, useInsertionEffect as we, useMemo as L, useCallback as ke, Children as Ee, isValidElement as Ie, useState as I } from "react";
+import { D as be, c as Ke, d as ee, B as De, E as Pe } from "./index-CL8eDnQW.js";
+import { b as re } from "./index-DBjOT2H1.js";
+import { F as Ae, g as Se, j as Re, h as Ne, d as Oe, I as Te, a as qe, b as Me, k as Fe, c as $e } from "./Frame-DKlOmSkU.js";
+import { A as D, a as P, b as ae } from "./Mermaid-Koc3z8mU.js";
+import { e as _, f as S, D as B, g as Z, a as G, b as J, c as Y, d as oe } from "./Dialog-hlvmmQ_c.js";
+import { Button as le } from "./ui/Button.js";
+import { a as ce, u as ze } from "./useSuspenseQuery-CSB_rVek.js";
+import { u as q } from "./useMutation-CFMGlAMW.js";
+import { a as Le } from "./index.esm-BYObtETB.js";
+import { u as Qe } from "./chunk-EPOLDU6W-C6C8jAwd.js";
+import { A as He } from "./ActionButton-B0CXL1Lq.js";
+import { S as Ve, a as _e, b as Be, c as Ze, d as Ge, e as te, f as Je } from "./Secret-BDBqq4p3.js";
+import { a as U } from "./ZudokuContext-BZB1TWdT.js";
+import { Input as Ye } from "./ui/Input.js";
+import { c as W } from "./cn-5-Gd1Dss.js";
+import { B as k } from "./Button-GUVe7pmt.js";
+import { I as Ue } from "./Input-Cx-GeKoF.js";
+function We({ error: t }) {
+  const a = t instanceof Error ? t.message : "Something went wrong", s = process.env.NODE_ENV === "development", n = t instanceof M ? t.developerHint : void 0, r = t instanceof M ? t.title : "Something went wrong", i = t instanceof Error ? t.stack : void 0, o = t instanceof Error ? t.cause : void 0, d = o instanceof Error ? String(o.stack) : i;
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs(D, { variant: "destructive", children: [
+      /* @__PURE__ */ e.jsx(P, { children: r }),
+      /* @__PURE__ */ e.jsx(ae, { children: a })
+    ] }),
+    s && n && /* @__PURE__ */ e.jsx(be, { className: "mb-4", children: n }),
+    s && d && /* @__PURE__ */ e.jsx(
+      Ke,
+      {
+        className: "max-h-[400px] [&>pre]:p-4",
+        language: "js",
+        code: d
+      }
+    )
+  ] });
 }
-const He = typeof window < "u", Ve = He ? Ie : ie, le = /* @__PURE__ */ Q(null);
-function Ge(t) {
+const Xe = ({
+  service: t,
+  onOpenChange: a
+}) => {
+  const s = U(), n = ce(), r = Qe(), i = Le({
+    defaultValues: {
+      expiresOn: "30"
+    }
+  }), o = re(), d = q({
+    mutationFn: ({ description: c, expiresOn: u }) => {
+      if (!t.createKey)
+        throw new Error("createKey not implemented");
+      const p = u !== "never" ? et(Number(u)) : void 0;
+      return t.createKey({
+        apiKey: {
+          description: c || "Secret Key",
+          expiresOn: p
+        },
+        context: s,
+        auth: o
+      });
+    },
+    onSuccess: async () => {
+      await n.invalidateQueries({ queryKey: ["api-keys"] }), await r("/settings/api-keys/");
+    }
+  });
+  return t.createKey ? /* @__PURE__ */ e.jsxs(
+    "form",
+    {
+      onSubmit: i.handleSubmit(
+        (c) => d.mutate(
+          { ...c },
+          {
+            onSuccess: () => a(!1)
+          }
+        )
+      ),
+      children: [
+        d.error && /* @__PURE__ */ e.jsxs(D, { variant: "destructive", className: "mb-4", children: [
+          /* @__PURE__ */ e.jsx(P, { children: "Error" }),
+          /* @__PURE__ */ e.jsx(ae, { children: d.error.message })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 flex-col text-sm font-medium", children: [
+          "Name",
+          /* @__PURE__ */ e.jsx(Ye, { ...i.register("description") }),
+          "Expiration",
+          /* @__PURE__ */ e.jsxs(
+            Ve,
+            {
+              onValueChange: (c) => i.setValue("expiresOn", c),
+              defaultValue: i.getValues("expiresOn"),
+              children: [
+                /* @__PURE__ */ e.jsx(_e, { children: /* @__PURE__ */ e.jsx(Be, {}) }),
+                /* @__PURE__ */ e.jsx(Ze, { children: /* @__PURE__ */ e.jsxs(Ge, { children: [
+                  [7, 30, 60, 90].map((c) => /* @__PURE__ */ e.jsxs(te, { value: String(c), children: [
+                    c,
+                    " days"
+                  ] }, c)),
+                  /* @__PURE__ */ e.jsx(te, { value: "never", children: "Never" })
+                ] }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e.jsxs(_, { children: [
+            /* @__PURE__ */ e.jsx(S, { asChild: !0, children: /* @__PURE__ */ e.jsx(le, { variant: "outline", children: "Cancel" }) }),
+            /* @__PURE__ */ e.jsx(He, { isPending: d.isPending, children: "Generate Key" })
+          ] })
+        ] })
+      ]
+    }
+  ) : null;
+}, et = (t) => {
+  const a = /* @__PURE__ */ new Date();
+  return a.setDate(a.getDate() + t), a.toISOString();
+}, de = ({
+  service: t,
+  isOpen: a,
+  onOpenChange: s,
+  trigger: n,
+  buttonVariant: r = "outline"
+}) => {
+  const i = /* @__PURE__ */ e.jsx(le, { variant: r, children: "Create API Key" });
+  return /* @__PURE__ */ e.jsxs(B, { open: a, onOpenChange: s, children: [
+    /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: n ?? i }),
+    /* @__PURE__ */ e.jsxs(G, { children: [
+      /* @__PURE__ */ e.jsx(J, { children: /* @__PURE__ */ e.jsx(Y, { children: "Create API Key" }) }),
+      /* @__PURE__ */ e.jsx(Xe, { service: t, onOpenChange: s })
+    ] })
+  ] });
+}, tt = Q({});
+function ue(t) {
+  const a = A(null);
+  return a.current === null && (a.current = t()), a.current;
+}
+const st = typeof window < "u", nt = st ? Ce : ie, fe = /* @__PURE__ */ Q(null);
+function it(t) {
   return typeof t == "object" && t !== null;
 }
-function Je(t) {
-  return Ge(t) && "offsetHeight" in t;
+function rt(t) {
+  return it(t) && "offsetHeight" in t;
 }
-const Ue = Q({
+const at = Q({
   transformPagePoint: (t) => t,
   isStatic: !1,
   reducedMotion: "never"
 });
-class We extends L.Component {
-  getSnapshotBeforeUpdate(i) {
+function se(t, a) {
+  if (typeof t == "function")
+    return t(a);
+  t != null && (t.current = a);
+}
+function ot(...t) {
+  return (a) => {
+    let s = !1;
+    const n = t.map((r) => {
+      const i = se(r, a);
+      return !s && typeof i == "function" && (s = !0), i;
+    });
+    if (s)
+      return () => {
+        for (let r = 0; r < n.length; r++) {
+          const i = n[r];
+          typeof i == "function" ? i() : se(t[r], null);
+        }
+      };
+  };
+}
+function lt(...t) {
+  return F.useCallback(ot(...t), t);
+}
+class ct extends F.Component {
+  getSnapshotBeforeUpdate(a) {
     const s = this.props.childRef.current;
-    if (s && i.isPresent && !this.props.isPresent) {
-      const n = s.offsetParent, r = Je(n) && n.offsetWidth || 0, a = this.props.sizeRef.current;
-      a.height = s.offsetHeight || 0, a.width = s.offsetWidth || 0, a.top = s.offsetTop, a.left = s.offsetLeft, a.right = r - a.width - a.left;
+    if (s && a.isPresent && !this.props.isPresent) {
+      const n = s.offsetParent, r = rt(n) && n.offsetWidth || 0, i = this.props.sizeRef.current;
+      i.height = s.offsetHeight || 0, i.width = s.offsetWidth || 0, i.top = s.offsetTop, i.left = s.offsetLeft, i.right = r - i.width - i.left;
     }
     return null;
   }
@@ -63,574 +186,502 @@ class We extends L.Component {
     return this.props.children;
   }
 }
-function Xe({ children: t, isPresent: i, anchorX: s, root: n }) {
-  const r = _(), a = E(null), l = E({
+function dt({ children: t, isPresent: a, anchorX: s, root: n }) {
+  const r = H(), i = A(null), o = A({
     width: 0,
     height: 0,
     top: 0,
     left: 0,
     right: 0
-  }), { nonce: u } = B(Ue);
-  return Re(() => {
-    const { width: h, height: d, top: g, left: f, right: m } = l.current;
-    if (i || !a.current || !h || !d)
+  }), { nonce: d } = V(at), c = lt(i, t?.ref);
+  return we(() => {
+    const { width: u, height: p, top: f, left: m, right: g } = o.current;
+    if (a || !i.current || !u || !p)
       return;
-    const p = s === "left" ? `left: ${f}` : `right: ${m}`;
-    a.current.dataset.motionPopId = r;
-    const x = document.createElement("style");
-    u && (x.nonce = u);
-    const j = n ?? document.head;
-    return j.appendChild(x), x.sheet && x.sheet.insertRule(`
+    const j = s === "left" ? `left: ${m}` : `right: ${g}`;
+    i.current.dataset.motionPopId = r;
+    const l = document.createElement("style");
+    d && (l.nonce = d);
+    const x = n ?? document.head;
+    return x.appendChild(l), l.sheet && l.sheet.insertRule(`
           [data-motion-pop-id="${r}"] {
             position: absolute !important;
-            width: ${h}px !important;
-            height: ${d}px !important;
-            ${p}px !important;
-            top: ${g}px !important;
+            width: ${u}px !important;
+            height: ${p}px !important;
+            ${j}px !important;
+            top: ${f}px !important;
           }
         `), () => {
-      j.contains(x) && j.removeChild(x);
+      x.contains(l) && x.removeChild(l);
     };
-  }, [i]), e.jsx(We, { isPresent: i, childRef: a, sizeRef: l, children: L.cloneElement(t, { ref: a }) });
+  }, [a]), e.jsx(ct, { isPresent: a, childRef: i, sizeRef: o, children: F.cloneElement(t, { ref: c }) });
 }
-const Ye = ({ children: t, initial: i, isPresent: s, onExitComplete: n, custom: r, presenceAffectsLayout: a, mode: l, anchorX: u, root: h }) => {
-  const d = oe(Ze), g = _();
-  let f = !0, m = F(() => (f = !1, {
-    id: g,
-    initial: i,
+const ut = ({ children: t, initial: a, isPresent: s, onExitComplete: n, custom: r, presenceAffectsLayout: i, mode: o, anchorX: d, root: c }) => {
+  const u = ue(ft), p = H();
+  let f = !0, m = L(() => (f = !1, {
+    id: p,
+    initial: a,
     isPresent: s,
     custom: r,
-    onExitComplete: (p) => {
-      d.set(p, !0);
-      for (const x of d.values())
-        if (!x)
+    onExitComplete: (g) => {
+      u.set(g, !0);
+      for (const j of u.values())
+        if (!j)
           return;
       n && n();
     },
-    register: (p) => (d.set(p, !1), () => d.delete(p))
-  }), [s, d, n]);
-  return a && f && (m = { ...m }), F(() => {
-    d.forEach((p, x) => d.set(x, !1));
-  }, [s]), L.useEffect(() => {
-    !s && !d.size && n && n();
-  }, [s]), l === "popLayout" && (t = e.jsx(Xe, { isPresent: s, anchorX: u, root: h, children: t })), e.jsx(le.Provider, { value: m, children: t });
+    register: (g) => (u.set(g, !1), () => u.delete(g))
+  }), [s, u, n]);
+  return i && f && (m = { ...m }), L(() => {
+    u.forEach((g, j) => u.set(j, !1));
+  }, [s]), F.useEffect(() => {
+    !s && !u.size && n && n();
+  }, [s]), o === "popLayout" && (t = e.jsx(dt, { isPresent: s, anchorX: d, root: c, children: t })), e.jsx(fe.Provider, { value: m, children: t });
 };
-function Ze() {
+function ft() {
   return /* @__PURE__ */ new Map();
 }
-function et(t = !0) {
-  const i = B(le);
-  if (i === null)
+function pt(t = !0) {
+  const a = V(fe);
+  if (a === null)
     return [!0, null];
-  const { isPresent: s, onExitComplete: n, register: r } = i, a = _();
+  const { isPresent: s, onExitComplete: n, register: r } = a, i = H();
   ie(() => {
     if (t)
-      return r(a);
+      return r(i);
   }, [t]);
-  const l = Se(() => t && n && n(a), [a, n, t]);
-  return !s && n ? [!1, l] : [!0];
+  const o = ke(() => t && n && n(i), [i, n, t]);
+  return !s && n ? [!1, o] : [!0];
 }
 const R = (t) => t.key || "";
-function ee(t) {
-  const i = [];
-  return Te.forEach(t, (s) => {
-    Oe(s) && i.push(s);
-  }), i;
+function ne(t) {
+  const a = [];
+  return Ee.forEach(t, (s) => {
+    Ie(s) && a.push(s);
+  }), a;
 }
-const tt = ({ children: t, custom: i, initial: s = !0, onExitComplete: n, presenceAffectsLayout: r = !0, mode: a = "sync", propagate: l = !1, anchorX: u = "left", root: h }) => {
-  const [d, g] = et(l), f = F(() => ee(t), [t]), m = l && !d ? [] : f.map(R), p = E(!0), x = E(f), j = oe(() => /* @__PURE__ */ new Map()), [P, o] = K(f), [c, C] = K(f);
-  Ve(() => {
-    p.current = !1, x.current = f;
-    for (let v = 0; v < c.length; v++) {
-      const y = R(c[v]);
-      m.includes(y) ? j.delete(y) : j.get(y) !== !0 && j.set(y, !1);
+const ht = ({ children: t, custom: a, initial: s = !0, onExitComplete: n, presenceAffectsLayout: r = !0, mode: i = "sync", propagate: o = !1, anchorX: d = "left", root: c }) => {
+  const [u, p] = pt(o), f = L(() => ne(t), [t]), m = o && !u ? [] : f.map(R), g = A(!0), j = A(f), l = ue(() => /* @__PURE__ */ new Map()), [x, v] = I(f), [h, C] = I(f);
+  nt(() => {
+    g.current = !1, j.current = f;
+    for (let w = 0; w < h.length; w++) {
+      const y = R(h[w]);
+      m.includes(y) ? l.delete(y) : l.get(y) !== !0 && l.set(y, !1);
     }
-  }, [c, m.length, m.join("-")]);
-  const b = [];
-  if (f !== P) {
-    let v = [...f];
-    for (let y = 0; y < c.length; y++) {
-      const N = c[y], $ = R(N);
-      m.includes($) || (v.splice(y, 0, N), b.push(N));
+  }, [h, m.length, m.join("-")]);
+  const K = [];
+  if (f !== x) {
+    let w = [...f];
+    for (let y = 0; y < h.length; y++) {
+      const b = h[y], $ = R(b);
+      m.includes($) || (w.splice(y, 0, b), K.push(b));
     }
-    return a === "wait" && b.length && (v = b), C(ee(v)), o(f), null;
+    return i === "wait" && K.length && (w = K), C(ne(w)), v(f), null;
   }
-  process.env.NODE_ENV !== "production" && a === "wait" && c.length > 1 && console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
-  const { forceRender: k } = B(Be);
-  return e.jsx(e.Fragment, { children: c.map((v) => {
-    const y = R(v), N = l && !d ? !1 : f === c || m.includes(y), $ = () => {
-      if (j.has(y))
-        j.set(y, !0);
+  process.env.NODE_ENV !== "production" && i === "wait" && h.length > 1 && console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
+  const { forceRender: pe } = V(tt);
+  return e.jsx(e.Fragment, { children: h.map((w) => {
+    const y = R(w), b = o && !u ? !1 : f === h || m.includes(y), $ = () => {
+      if (l.has(y))
+        l.set(y, !0);
       else
         return;
       let X = !0;
-      j.forEach((de) => {
-        de || (X = !1);
-      }), X && (k?.(), C(x.current), l && g?.(), n && n());
+      l.forEach((he) => {
+        he || (X = !1);
+      }), X && (pe?.(), C(j.current), o && p?.(), n && n());
     };
-    return e.jsx(Ye, { isPresent: N, initial: !p.current || s ? void 0 : !1, custom: i, presenceAffectsLayout: r, mode: a, root: h, onExitComplete: N ? void 0 : $, anchorX: u, children: v }, y);
+    return e.jsx(ut, { isPresent: b, initial: !g.current || s ? void 0 : !1, custom: a, presenceAffectsLayout: r, mode: i, root: c, onExitComplete: b ? void 0 : $, anchorX: d, children: w }, y);
   }) });
-}, ce = Me(
-  ({ isPending: t, children: i, className: s, ...n }, r) => /* @__PURE__ */ e.jsxs(
-    Fe,
-    {
-      ref: r,
-      disabled: t,
-      ...n,
-      className: A("relative", s),
-      children: [
-        t && /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 grid place-items-center", children: /* @__PURE__ */ e.jsx(Le, {}) }),
-        /* @__PURE__ */ e.jsx("span", { className: A("block", t && "invisible"), children: i })
-      ]
-    }
-  )
-);
-ce.displayName = "ActionButton";
-const st = ({
-  service: t,
-  onOpenChange: i
+}, mt = ({
+  apiKey: t,
+  onDeleteKey: a,
+  className: s
 }) => {
-  const s = se(), n = ne(), r = je(), a = ze({
-    defaultValues: {
-      expiresOn: "30"
-    }
-  }), l = Qe(), u = O({
-    mutationFn: ({ description: h, expiresOn: d }) => {
-      if (!t.createKey)
-        throw new Error("createKey not implemented");
-      const g = d !== "never" ? nt(Number(d)) : void 0;
-      return t.createKey({
-        apiKey: {
-          description: h || "Secret Key",
-          expiresOn: g
-        },
-        context: s,
-        auth: l
-      });
-    },
-    onSuccess: async () => {
-      await n.invalidateQueries({ queryKey: ["api-keys"] }), await r("/settings/api-keys/");
-    }
-  });
-  return t.createKey ? /* @__PURE__ */ e.jsxs(
-    "form",
-    {
-      onSubmit: a.handleSubmit(
-        (h) => u.mutate(
-          { ...h },
-          {
-            onSuccess: () => i(!1)
-          }
-        )
+  const [n, r] = I(!1), { key: i, createdOn: o, expiresOn: d } = t, c = d && new Date(d) < /* @__PURE__ */ new Date(), u = d ? Math.ceil(
+    (new Date(d).getTime() - Date.now()) / (1e3 * 60 * 60 * 24)
+  ) : 1 / 0, p = u <= 7 && !c;
+  return /* @__PURE__ */ e.jsxs("div", { className: W("grid col-span-full grid-cols-subgrid p-6", s), children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ e.jsx(
+        Je,
+        {
+          className: "max-w-fit w-full",
+          secret: i,
+          status: c ? "expired" : p ? "expiring" : "active",
+          revealed: n,
+          onReveal: r
+        }
       ),
-      children: [
-        u.error && /* @__PURE__ */ e.jsxs(M, { variant: "destructive", className: "mb-4", children: [
-          /* @__PURE__ */ e.jsx(q, { children: "Error" }),
-          /* @__PURE__ */ e.jsx(be, { children: u.error.message })
+      /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 mt-0.5 text-nowrap", children: [
+        o && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          "Created ",
+          xt(o),
+          "."
         ] }),
-        /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 flex-col text-sm font-medium", children: [
-          "Name",
-          /* @__PURE__ */ e.jsx(ae, { ...a.register("description") }),
-          "Expiration",
-          /* @__PURE__ */ e.jsxs(
-            ke,
+        " ",
+        d && p && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
+          "Expires in ",
+          u,
+          " ",
+          u === 1 ? "day" : "days",
+          "."
+        ] }),
+        d && c && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
+          "Expired",
+          " ",
+          u === 0 ? "today." : `${u * -1} days ago.`
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "flex justify-end", children: d && a && /* @__PURE__ */ e.jsxs(B, { children: [
+      /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: /* @__PURE__ */ e.jsx(k, { variant: "ghost", size: "icon", children: /* @__PURE__ */ e.jsx(me, { size: 16 }) }) }),
+      /* @__PURE__ */ e.jsxs(G, { children: [
+        /* @__PURE__ */ e.jsxs(J, { children: [
+          /* @__PURE__ */ e.jsx(Y, { children: "Delete API Key" }),
+          /* @__PURE__ */ e.jsx(oe, { children: "Are you sure you want to delete this API key?" })
+        ] }),
+        /* @__PURE__ */ e.jsxs(_, { children: [
+          /* @__PURE__ */ e.jsx(S, { asChild: !0, children: /* @__PURE__ */ e.jsx(k, { variant: "outline", children: "Cancel" }) }),
+          /* @__PURE__ */ e.jsx(S, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+            k,
             {
-              onValueChange: (h) => a.setValue("expiresOn", h),
-              defaultValue: a.getValues("expiresOn"),
-              children: [
-                /* @__PURE__ */ e.jsx(Ne, { children: /* @__PURE__ */ e.jsx(Ke, {}) }),
-                /* @__PURE__ */ e.jsx(Ee, { children: /* @__PURE__ */ e.jsxs(De, { children: [
-                  [7, 30, 60, 90].map((h) => /* @__PURE__ */ e.jsxs(Z, { value: String(h), children: [
-                    h,
-                    " days"
-                  ] }, h)),
-                  /* @__PURE__ */ e.jsx(Z, { value: "never", children: "Never" })
-                ] }) })
-              ]
+              onClick: () => {
+                a();
+              },
+              children: "Delete"
             }
-          ),
-          /* @__PURE__ */ e.jsxs(H, { children: [
-            /* @__PURE__ */ e.jsx(D, { asChild: !0, children: /* @__PURE__ */ e.jsx(w, { variant: "outline", children: "Cancel" }) }),
-            /* @__PURE__ */ e.jsx(ce, { isPending: u.isPending, children: "Generate Key" })
-          ] })
+          ) })
         ] })
-      ]
-    }
-  ) : null;
-}, nt = (t) => {
-  const i = /* @__PURE__ */ new Date();
-  return i.setDate(i.getDate() + t), i.toISOString();
-}, te = ({
-  service: t,
-  isOpen: i,
-  onOpenChange: s,
-  trigger: n,
-  buttonVariant: r = "outline"
-}) => {
-  const a = /* @__PURE__ */ e.jsx(w, { variant: r, children: "Create API Key" });
-  return /* @__PURE__ */ e.jsxs(V, { open: i, onOpenChange: s, children: [
-    /* @__PURE__ */ e.jsx(G, { asChild: !0, children: n ?? a }),
-    /* @__PURE__ */ e.jsxs(J, { children: [
-      /* @__PURE__ */ e.jsx(U, { children: /* @__PURE__ */ e.jsx(W, { children: "Create API Key" }) }),
-      /* @__PURE__ */ e.jsx(st, { service: t, onOpenChange: s })
-    ] })
+      ] })
+    ] }) })
   ] });
-}, it = ({ service: t }) => {
-  const i = se(), s = ne(), [n, r] = K(
-    null
-  ), [a, l] = K(""), { data: u, isFetching: h } = we({
-    queryFn: () => t.getConsumers(i),
-    queryKey: ["api-keys"],
-    retry: !1
-  }), [d, g] = K(!1), f = O({
+}, xt = (t) => {
+  const a = /* @__PURE__ */ new Date(), s = new Date(t), n = Math.floor((a.getTime() - s.getTime()) / 1e3), r = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  return n < 60 ? r.format(-n, "second") : n < 3600 ? r.format(-Math.floor(n / 60), "minute") : n < 86400 ? r.format(-Math.floor(n / 3600), "hour") : n < 2592e3 ? r.format(-Math.floor(n / 86400), "day") : n < 31536e3 ? r.format(-Math.floor(n / 2592e3), "month") : r.format(-Math.floor(n / 31536e3), "year");
+}, yt = ({
+  consumer: t,
+  onUpdate: a,
+  onRollKey: s,
+  onDeleteKey: n
+}) => {
+  const [r, i] = I(!1), [o, d] = I(t.label), c = ce(), u = U(), p = q({
+    mutationFn: async (l) => {
+      if (!s)
+        throw new Error("rollKey not implemented");
+      return await s?.(l, u);
+    },
+    onSuccess: () => void c.invalidateQueries({ queryKey: ["api-keys"] })
+  }), f = q({
     mutationFn: ({
-      consumerId: o,
-      keyId: c
+      consumerId: l,
+      keyId: x
     }) => {
-      if (!t.deleteKey)
+      if (!n)
         throw new Error("deleteKey not implemented");
-      return t.deleteKey(o, c, i);
+      return n(l, x, u);
     },
-    onMutate: async ({ consumerId: o, keyId: c }) => {
-      await s.cancelQueries({ queryKey: ["api-keys"] });
-      const C = s.getQueryData([
+    onMutate: async ({ consumerId: l, keyId: x }) => {
+      await c.cancelQueries({ queryKey: ["api-keys"] });
+      const v = c.getQueryData([
         "api-keys"
       ]);
-      return s.setQueryData(["api-keys"], (b) => b && b.map((k) => k.id === o ? {
-        ...k,
-        apiKeys: k.apiKeys.filter((v) => v.id !== c)
-      } : k)), { previousData: C };
+      return c.setQueryData(["api-keys"], (h) => h && h.map((C) => C.id === l ? {
+        ...C,
+        apiKeys: C.apiKeys.filter((K) => K.id !== x)
+      } : C)), { previousData: v };
     },
-    onError: (o, c, C) => {
-      C?.previousData && s.setQueryData(["api-keys"], C.previousData);
+    onError: (l, x, v) => {
+      v?.previousData && c.setQueryData(["api-keys"], v.previousData);
     },
     onSuccess: () => {
-      s.invalidateQueries({ queryKey: ["api-keys"] });
+      c.invalidateQueries({ queryKey: ["api-keys"] });
     }
-  }), m = O({
+  }), m = q({
     mutationFn: ({
-      consumerId: o,
-      label: c
+      consumerId: l,
+      label: x
     }) => {
-      if (!t.updateConsumer)
+      if (!a)
         throw new Error("updateConsumer not implemented");
-      return t.updateConsumer({ id: o, label: c }, i);
+      return a({ id: l, label: x }, u);
     },
-    onMutate: async ({ consumerId: o, label: c }) => {
-      await s.cancelQueries({ queryKey: ["api-keys"] });
-      const C = s.getQueryData(["api-keys"]);
-      return s.setQueryData(["api-keys"], (b) => b && b.map((k) => k.id === o ? {
-        ...k,
-        label: c
-      } : k)), { previousData: C };
+    onMutate: async ({ consumerId: l, label: x }) => {
+      await c.cancelQueries({ queryKey: ["api-keys"] });
+      const v = c.getQueryData(["api-keys"]);
+      return c.setQueryData(["api-keys"], (h) => h && h.map((C) => C.id === l ? {
+        ...C,
+        label: x
+      } : C)), { previousData: v };
     },
-    onError: (o, c, C) => {
-      C?.previousData && s.setQueryData(["api-keys"], C.previousData);
+    onError: (l, x, v) => {
+      v?.previousData && c.setQueryData(["api-keys"], v.previousData);
     },
     onSuccess: () => {
-      s.invalidateQueries({ queryKey: ["api-keys"] });
+      c.invalidateQueries({ queryKey: ["api-keys"] });
     }
-  }), p = O({
-    mutationFn: (o) => {
-      if (!t.rollKey)
-        throw new Error("rollKey not implemented");
-      return t.rollKey(o, i);
-    },
-    onSuccess: () => s.invalidateQueries({ queryKey: ["api-keys"] })
-  }), x = (o, c) => {
-    r(o), l(c);
-  }, j = (o) => {
-    a.trim() && m.mutate({
-      consumerId: o,
-      label: a.trim()
-    }), r(null), l("");
-  }, P = () => {
-    r(null), l("");
+  }), g = () => {
+    i(!0), d(t.label);
+  }, j = () => {
+    o.trim() && m.mutate({
+      label: o.trim(),
+      consumerId: t.id
+    }), i(!1);
   };
-  return /* @__PURE__ */ e.jsxs("div", { className: "max-w-screen-md h-full pt-(--padding-content-top) pb-(--padding-content-bottom)", children: [
-    /* @__PURE__ */ e.jsx(Y.Target, { name: "api-keys-list-page" }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between pb-3", children: [
-      /* @__PURE__ */ e.jsx("h1", { className: "font-medium text-2xl", children: "API Keys" }),
-      t.createKey && /* @__PURE__ */ e.jsx(
-        te,
-        {
-          service: t,
-          isOpen: d,
-          onOpenChange: g
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e.jsx("p", { children: "Create, manage, and monitor your API keys" }),
-    /* @__PURE__ */ e.jsx(Y.Target, { name: "api-keys-list-page-before-keys" }),
-    /* @__PURE__ */ e.jsx("div", { className: "h-8" }),
-    p.isError && /* @__PURE__ */ e.jsxs(M, { variant: "destructive", className: "mb-4", children: [
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    p.isError && /* @__PURE__ */ e.jsxs(D, { variant: "destructive", className: "mb-4", children: [
       /* @__PURE__ */ e.jsx(z, { size: 16 }),
-      /* @__PURE__ */ e.jsx(q, { children: p.error.message })
+      /* @__PURE__ */ e.jsx(P, { children: p.error.message })
     ] }),
-    m.isError && /* @__PURE__ */ e.jsxs(M, { variant: "destructive", className: "mb-4", children: [
+    m.isError && /* @__PURE__ */ e.jsxs(D, { variant: "destructive", className: "mb-4", children: [
       /* @__PURE__ */ e.jsx(z, { size: 16 }),
-      /* @__PURE__ */ e.jsx(q, { children: m.error.message })
+      /* @__PURE__ */ e.jsx(P, { children: m.error.message })
     ] }),
-    f.isError && /* @__PURE__ */ e.jsxs(M, { variant: "destructive", className: "mb-4", children: [
+    f.isError && /* @__PURE__ */ e.jsxs(D, { variant: "destructive", className: "mb-4", children: [
       /* @__PURE__ */ e.jsx(z, { size: 16 }),
-      /* @__PURE__ */ e.jsx(q, { children: f.error.message })
+      /* @__PURE__ */ e.jsx(P, { children: f.error.message })
     ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "", children: u.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "flex col-span-full flex-col justify-center gap-4 items-center p-8 border rounded-sm bg-muted/30 text-muted-foreground", children: [
-      /* @__PURE__ */ e.jsxs("p", { className: "text-center", children: [
-        "You have no API keys yet.",
-        /* @__PURE__ */ e.jsx("br", {}),
-        t.createKey && "Get started and create your first key."
-      ] }),
-      t.createKey && /* @__PURE__ */ e.jsx(
-        te,
-        {
-          service: t,
-          isOpen: d,
-          onOpenChange: g
-        }
-      )
-    ] }) : /* @__PURE__ */ e.jsx(
-      "ul",
+    /* @__PURE__ */ e.jsxs(
+      Ae,
       {
-        className: A(
-          "grid grid-cols-[1fr_min-content] divide-y divide-border col-span-6"
-        ),
-        children: u.map((o) => /* @__PURE__ */ e.jsxs(
-          qe,
-          {
-            className: "grid grid-cols-subgrid col-span-full items-center mb-4 group",
-            children: [
-              /* @__PURE__ */ e.jsxs($e, { className: "border-b col-span-full grid-cols-subgrid grid", children: [
-                /* @__PURE__ */ e.jsxs("div", { className: "h-10 flex flex-col text-sm justify-center", children: [
-                  /* @__PURE__ */ e.jsxs("div", { className: "font-medium text-lg flex items-center gap-2", children: [
-                    n === o.id ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+        className: "grid grid-cols-subgrid col-span-full items-center mb-4 group",
+        children: [
+          /* @__PURE__ */ e.jsxs(Se, { className: "col-span-full flex-row items-start justify-between gap-4", children: [
+            /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
+              r ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e.jsx(
+                  Ue,
+                  {
+                    maxLength: 32,
+                    value: o,
+                    onChange: (l) => d(l.target.value),
+                    onKeyDown: (l) => {
+                      l.key === "Enter" ? j() : l.key === "Escape" && i(!1);
+                    },
+                    autoFocus: !0
+                  }
+                ),
+                /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ e.jsx(
+                    k,
+                    {
+                      size: "icon",
+                      variant: "ghost",
+                      onClick: j,
+                      disabled: !o.trim(),
+                      children: /* @__PURE__ */ e.jsx(xe, { size: 16 })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    k,
+                    {
+                      size: "icon",
+                      variant: "ghost",
+                      onClick: () => i(!1),
+                      children: /* @__PURE__ */ e.jsx(ye, { size: 16 })
+                    }
+                  )
+                ] })
+              ] }) : /* @__PURE__ */ e.jsx(Re, { children: t.label }),
+              /* @__PURE__ */ e.jsxs(Ne, { children: [
+                t.createdOn && /* @__PURE__ */ e.jsxs("div", { children: [
+                  "Created on ",
+                  new Date(t.createdOn).toLocaleDateString()
+                ] }),
+                t.expiresOn && /* @__PURE__ */ e.jsxs("div", { children: [
+                  "Expires on ",
+                  new Date(t.expiresOn).toLocaleDateString()
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1", children: [
+              a && /* @__PURE__ */ e.jsxs(
+                k,
+                {
+                  variant: "ghost",
+                  onClick: g,
+                  className: W(
+                    "flex gap-2",
+                    r && "opacity-0! pointer-events-none"
+                  ),
+                  disabled: r,
+                  children: [
+                    /* @__PURE__ */ e.jsx(ge, { size: 16 }),
+                    /* @__PURE__ */ e.jsx("span", { className: "hidden md:block", children: "Edit label" })
+                  ]
+                }
+              ),
+              s && /* @__PURE__ */ e.jsxs(B, { children: [
+                /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+                  k,
+                  {
+                    title: "Roll this key",
+                    variant: "ghost",
+                    disabled: p.isPending,
+                    className: "flex items-center gap-2",
+                    children: [
                       /* @__PURE__ */ e.jsx(
-                        ae,
+                        je,
                         {
-                          maxLength: 32,
-                          value: a,
-                          onChange: (c) => l(c.target.value),
-                          onKeyDown: (c) => {
-                            c.key === "Enter" ? j(o.id) : c.key === "Escape" && P();
-                          },
-                          className: "text-lg font-medium",
-                          autoFocus: !0
+                          size: 16,
+                          className: p.isPending ? "animate-spin" : void 0
                         }
                       ),
-                      /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-                        /* @__PURE__ */ e.jsx(
-                          w,
-                          {
-                            size: "icon",
-                            variant: "ghost",
-                            onClick: () => j(o.id),
-                            disabled: !a.trim(),
-                            children: /* @__PURE__ */ e.jsx(ue, { size: 16 })
-                          }
-                        ),
-                        /* @__PURE__ */ e.jsx(
-                          w,
-                          {
-                            size: "icon",
-                            variant: "ghost",
-                            onClick: P,
-                            children: /* @__PURE__ */ e.jsx(he, { size: 16 })
-                          }
-                        )
-                      ] })
-                    ] }) : o.label,
-                    /* @__PURE__ */ e.jsx("div", { className: "text-muted-foreground text-xs", children: o.createdOn })
+                      /* @__PURE__ */ e.jsx("span", { className: "hidden md:block", children: "Roll key" })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ e.jsxs(G, { children: [
+                  /* @__PURE__ */ e.jsxs(J, { children: [
+                    /* @__PURE__ */ e.jsx(Y, { children: "Roll API Key" }),
+                    /* @__PURE__ */ e.jsx(oe, { children: "Are you sure you want to roll this API key?" })
                   ] }),
-                  /* @__PURE__ */ e.jsxs("div", { className: "text-muted-foreground text-xs", children: [
-                    o.createdOn && /* @__PURE__ */ e.jsxs("div", { children: [
-                      "Created on",
-                      " ",
-                      new Date(o.createdOn).toLocaleDateString()
-                    ] }),
-                    o.expiresOn && /* @__PURE__ */ e.jsxs("div", { children: [
-                      "Expires on",
-                      " ",
-                      new Date(o.expiresOn).toLocaleDateString()
-                    ] })
-                  ] })
-                ] }),
-                /* @__PURE__ */ e.jsxs("div", { className: "flex justify-end", children: [
-                  t.updateConsumer && /* @__PURE__ */ e.jsxs(
-                    w,
-                    {
-                      variant: "ghost",
-                      onClick: () => x(o.id, o.label),
-                      className: A(
-                        "flex gap-2",
-                        n === o.id && "opacity-0! pointer-events-none"
-                      ),
-                      disabled: n === o.id,
-                      children: [
-                        /* @__PURE__ */ e.jsx(fe, { size: 16 }),
-                        /* @__PURE__ */ e.jsx("span", { className: "hidden md:block", children: "Edit label" })
-                      ]
-                    }
-                  ),
-                  t.rollKey && /* @__PURE__ */ e.jsxs(V, { children: [
-                    /* @__PURE__ */ e.jsx(G, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
-                      w,
+                  /* @__PURE__ */ e.jsxs(_, { children: [
+                    /* @__PURE__ */ e.jsx(S, { asChild: !0, children: /* @__PURE__ */ e.jsx(k, { variant: "outline", children: "Cancel" }) }),
+                    /* @__PURE__ */ e.jsx(S, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+                      k,
                       {
-                        title: "Roll this key",
-                        variant: "ghost",
-                        disabled: p.isPending,
-                        className: "flex items-center gap-2",
-                        children: [
-                          /* @__PURE__ */ e.jsx(
-                            pe,
-                            {
-                              size: 16,
-                              className: p.isPending ? "animate-spin" : void 0
-                            }
-                          ),
-                          /* @__PURE__ */ e.jsx("span", { className: "hidden md:block", children: "Roll key" })
-                        ]
+                        onClick: () => {
+                          p.mutate(t.id);
+                        },
+                        children: "Roll Key"
                       }
-                    ) }),
-                    /* @__PURE__ */ e.jsxs(J, { children: [
-                      /* @__PURE__ */ e.jsxs(U, { children: [
-                        /* @__PURE__ */ e.jsx(W, { children: "Roll API Key" }),
-                        /* @__PURE__ */ e.jsx(re, { children: "Are you sure you want to roll this API key?" })
-                      ] }),
-                      /* @__PURE__ */ e.jsxs(H, { children: [
-                        /* @__PURE__ */ e.jsx(D, { asChild: !0, children: /* @__PURE__ */ e.jsx(w, { variant: "outline", children: "Cancel" }) }),
-                        /* @__PURE__ */ e.jsx(D, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-                          w,
-                          {
-                            onClick: () => {
-                              p.mutate(o.id);
-                            },
-                            children: "Roll Key"
-                          }
-                        ) })
-                      ] })
-                    ] })
+                    ) })
                   ] })
                 ] })
-              ] }),
-              /* @__PURE__ */ e.jsx("div", { className: "col-span-full grid-cols-subgrid grid", children: /* @__PURE__ */ e.jsx(tt, { children: o.apiKeys.map((c) => /* @__PURE__ */ e.jsxs(Pe.Fragment, { children: [
-                /* @__PURE__ */ e.jsx(
-                  at,
-                  {
-                    apiKey: c,
-                    onDeleteKey: () => {
-                      f.mutate({
-                        consumerId: o.id,
-                        keyId: c.id
-                      });
-                    },
-                    className: f.variables?.keyId === c.id && (f.isPending || h) ? "opacity-10!" : void 0
-                  }
-                ),
-                /* @__PURE__ */ e.jsx("div", { className: "col-span-full h-px bg-border" })
-              ] }, c.id)) }) })
-            ]
-          },
-          o.id
-        ))
-      }
-    ) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx(Oe, { className: "p-0 grid grid-cols-subgrid col-span-full divide-y divide-border", children: /* @__PURE__ */ e.jsx(ht, { children: t.apiKeys.map((l) => /* @__PURE__ */ e.jsx(
+            mt,
+            {
+              apiKey: l,
+              onDeleteKey: () => {
+                f.mutate({
+                  consumerId: t.id,
+                  keyId: l.id
+                });
+              },
+              className: f.variables?.keyId === l.id && f.isPending ? "opacity-10!" : void 0
+            },
+            l.id
+          )) }) })
+        ]
+      },
+      t.id
+    )
   ] });
-}, rt = (t) => {
-  const i = /* @__PURE__ */ new Date(), s = new Date(t), n = Math.floor((i.getTime() - s.getTime()) / 1e3), r = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-  return n < 60 ? r.format(-n, "second") : n < 3600 ? r.format(-Math.floor(n / 60), "minute") : n < 86400 ? r.format(-Math.floor(n / 3600), "hour") : n < 2592e3 ? r.format(-Math.floor(n / 86400), "day") : n < 31536e3 ? r.format(-Math.floor(n / 2592e3), "month") : r.format(-Math.floor(n / 31536e3), "year");
-}, at = ({
-  apiKey: t,
-  onDeleteKey: i,
-  className: s
-}) => {
-  const [n, r] = K(!1), { key: a, createdOn: l, expiresOn: u } = t, h = u && new Date(u) < /* @__PURE__ */ new Date(), d = u ? Math.ceil(
-    (new Date(u).getTime() - Date.now()) / (1e3 * 60 * 60 * 24)
-  ) : 1 / 0, g = d <= 7 && !h;
-  return /* @__PURE__ */ e.jsxs("div", { className: A("grid col-span-full grid-cols-subgrid p-6", s), children: [
-    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ e.jsx(
-        Ae,
+}, gt = ({ service: t }) => {
+  const a = U(), { data: s } = ze({
+    queryFn: async () => {
+      try {
+        return await t.getConsumers(a);
+      } catch (i) {
+        throw i instanceof M ? i : new M("Cannot get API keys", {
+          cause: i,
+          title: "Error getting API keys",
+          developerHint: "Check the response of the API request for more information."
+        });
+      }
+    },
+    queryKey: ["api-keys"],
+    retry: !1
+  }), [n, r] = I(!1);
+  return /* @__PURE__ */ e.jsx("div", { className: "mt-8", children: s.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "flex col-span-full flex-col justify-center gap-4 items-center p-8 border rounded-sm bg-muted/30 text-muted-foreground", children: [
+    /* @__PURE__ */ e.jsxs("p", { className: "text-center", children: [
+      "You have no API keys yet.",
+      /* @__PURE__ */ e.jsx("br", {}),
+      t.createKey && "Get started and create your first key."
+    ] }),
+    t.createKey && /* @__PURE__ */ e.jsx(
+      de,
+      {
+        service: t,
+        isOpen: n,
+        onOpenChange: r
+      }
+    )
+  ] }) : /* @__PURE__ */ e.jsx("ul", { className: W("grid grid-cols-[1fr_min-content] col-span-6"), children: s.map((i) => /* @__PURE__ */ e.jsx(
+    yt,
+    {
+      consumer: i,
+      onUpdate: t.updateConsumer,
+      onRollKey: t.rollKey,
+      onDeleteKey: t.deleteKey
+    },
+    i.id
+  )) }) });
+}, jt = ({ service: t }) => {
+  const [a, s] = I(!1), n = re();
+  return /* @__PURE__ */ e.jsxs("div", { className: "max-w-3xl h-full pt-(--padding-content-top) pb-(--padding-content-bottom)", children: [
+    /* @__PURE__ */ e.jsx(ee.Target, { name: "api-keys-list-page" }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between pb-3", children: [
+      /* @__PURE__ */ e.jsx("h1", { className: "font-medium text-2xl", children: "API Keys" }),
+      t.createKey && /* @__PURE__ */ e.jsx(
+        de,
         {
-          className: "max-w-fit w-full",
-          secret: a,
-          status: h ? "expired" : g ? "expiring" : "active",
-          revealed: n,
-          onReveal: r
+          service: t,
+          isOpen: a,
+          onOpenChange: s
         }
-      ),
-      /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 mt-0.5 text-nowrap", children: [
-        l && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
-          "Created ",
-          rt(l),
-          "."
-        ] }),
-        " ",
-        u && g && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
-          "Expires in ",
-          d,
-          " ",
-          d === 1 ? "day" : "days",
-          "."
-        ] }),
-        u && h && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
-          "Expired",
-          " ",
-          d === 0 ? "today." : `${d * -1} days ago.`
-        ] })
-      ] })
+      )
     ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "flex justify-end", children: u && i && /* @__PURE__ */ e.jsxs(V, { children: [
-      /* @__PURE__ */ e.jsx(G, { asChild: !0, children: /* @__PURE__ */ e.jsx(w, { variant: "ghost", size: "icon", children: /* @__PURE__ */ e.jsx(me, { size: 16 }) }) }),
-      /* @__PURE__ */ e.jsxs(J, { children: [
-        /* @__PURE__ */ e.jsxs(U, { children: [
-          /* @__PURE__ */ e.jsx(W, { children: "Delete API Key" }),
-          /* @__PURE__ */ e.jsx(re, { children: "Are you sure you want to delete this API key?" })
-        ] }),
-        /* @__PURE__ */ e.jsxs(H, { children: [
-          /* @__PURE__ */ e.jsx(D, { asChild: !0, children: /* @__PURE__ */ e.jsx(w, { variant: "outline", children: "Cancel" }) }),
-          /* @__PURE__ */ e.jsx(D, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-            w,
-            {
-              onClick: () => {
-                i();
-              },
-              children: "Delete"
-            }
-          ) })
-        ] })
-      ] })
-    ] }) })
+    /* @__PURE__ */ e.jsx("p", { children: "Create, manage, and monitor your API keys" }),
+    /* @__PURE__ */ e.jsx(ee.Target, { name: "api-keys-list-page-before-keys" }),
+    n.profile?.emailVerified === !1 ? /* @__PURE__ */ e.jsxs(Te, { variant: "outline", children: [
+      /* @__PURE__ */ e.jsxs(qe, { children: [
+        /* @__PURE__ */ e.jsx(Me, { children: "Verified email required" }),
+        /* @__PURE__ */ e.jsx(Fe, { children: "You need to verify your email to access API keys." })
+      ] }),
+      /* @__PURE__ */ e.jsx($e, { children: /* @__PURE__ */ e.jsx(De, { onClick: () => n.requestEmailVerification(), children: "Verify email" }) })
+    ] }) : /* @__PURE__ */ e.jsx(
+      Pe,
+      {
+        fallbackRender: ({ error: r }) => /* @__PURE__ */ e.jsx(We, { error: r }),
+        children: /* @__PURE__ */ e.jsx(gt, { service: t })
+      }
+    )
   ] });
-}, S = "https://api.zuploedge.com/v2/client", ot = async (t) => {
+}, N = "https://api.zuploedge.com/v2/client", vt = async (t) => {
   try {
     return await t.json();
   } catch {
     return;
   }
-}, T = async (t) => {
-  const i = t.headers.get("content-type");
-  if (!t.ok && i?.includes("application/problem+json")) {
-    const s = await ot(t);
+}, O = async (t) => {
+  const a = t.headers.get("content-type");
+  if (!t.ok && a?.includes("application/problem+json")) {
+    const s = await vt(t);
     if (s.type && s.title)
       throw new Error(s.detail ?? s.title);
   }
-}, lt = (t, i) => ({
+}, T = {
+  developerHint: "This project is not linked to a Zuplo deployment. Run `zuplo link` to get started with API Keys.",
+  title: "Not linked to a Zuplo deployment"
+}, Ct = ({
+  deploymentName: t,
+  ...a
+}) => ({
   deleteKey: async (s, n, r) => {
-    const a = new Request(
-      S + `/${t}/consumers/${s}/keys/${n}`,
+    E(t, "Cannot delete API key.", T);
+    const i = new Request(
+      N + `/${t}/consumers/${s}/keys/${n}`,
       {
         method: "DELETE"
       }
-    );
-    await r.signRequest(a);
-    const l = await fetch(a);
-    await T(l), I(l.ok, "Failed to delete API key");
+    ), o = await fetch(await r.signRequest(i));
+    await O(o), E(o.ok, "Failed to delete API key");
   },
   updateConsumer: async (s, n) => {
+    E(
+      t,
+      "Cannot update API key description.",
+      T
+    );
     const r = await fetch(
       await n.signRequest(
         new Request(
-          S + `/${t}/consumers/${s.id}`,
+          `${N}/${t}/consumers/${s.id}`,
           {
             method: "PATCH",
             headers: {
@@ -643,13 +694,14 @@ const st = ({
         )
       )
     );
-    await T(r), I(r.ok, "Failed to update API key description");
+    await O(r), E(r.ok, "Failed to update API key description");
   },
   rollKey: async (s, n) => {
+    E(t, "Cannot roll API key.", T);
     const r = await fetch(
       await n.signRequest(
         new Request(
-          S + `/${t}/consumers/${s}/roll-key`,
+          `${N}/${t}/consumers/${s}/roll-key`,
           {
             method: "POST",
             headers: {
@@ -660,42 +712,59 @@ const st = ({
         )
       )
     );
-    await T(r), I(r.ok, "Failed to delete API key");
+    await O(r), E(r.ok, "Failed to roll API key");
   },
   getConsumers: async (s) => {
+    E(t, "Cannot get API keys.", T);
     const n = new Request(
-      `${S}/${t}/consumers`
+      `${N}/${t}/consumers`
     );
     await s.signRequest(n);
     const r = await fetch(n);
-    return await T(r), I(r.ok, "Failed to fetch API keys"), (await r.json()).data.map((l) => ({
-      id: l.id,
-      label: l.label || l.subject || "API Key",
-      apiKeys: l.apiKeys.data,
-      key: l.apiKeys.data.at(0)
+    return await O(r), E(r.ok, "Failed to fetch API keys"), (await r.json()).data.map((o) => ({
+      id: o.id,
+      createdOn: o.createdOn,
+      updatedOn: o.updatedOn,
+      expiresOn: o.expiresOn,
+      label: o.label || o.subject || "API Key",
+      apiKeys: o.apiKeys.data,
+      key: o.apiKeys.data.at(0)
     }));
   },
-  ...i
-}), Dt = (t) => t, At = (t) => {
-  const i = "deploymentName" in t ? lt(t.deploymentName, t) : t;
+  ...a
+}), Ht = (t) => t, Vt = ({
+  deploymentName: t,
+  isZuplo: a,
+  ...s
+}) => {
+  a && !t && console.warn(
+    "This project is not linked to a Zuplo deployment. Run `zuplo link` to get started."
+  );
+  const n = a ? Ct({ deploymentName: t, ...s }) : s;
+  if (!n.getConsumers)
+    throw new Error("getConsumers is required when using the apiKeyPlugin");
+  const r = {
+    ...n,
+    getConsumers: n.getConsumers
+  };
   return {
     getProfileMenuItems: () => [
       {
         label: "API Keys",
         path: "/settings/api-keys",
         category: "middle",
-        icon: xe
+        icon: ve
       }
     ],
-    getIdentities: async (s) => {
+    getIdentities: async (i) => {
       try {
-        return (await i.getConsumers(s)).map((r) => ({
-          authorizeRequest: (a) => (a.headers.set(
+        return (await r.getConsumers(i)).map((d) => ({
+          authorizeRequest: (c) => (c.headers.set(
             "Authorization",
-            `Bearer ${r.apiKeys.at(0)?.key}`
-          ), a),
-          id: r.id,
-          label: r.label
+            `Bearer ${d.apiKeys.at(0)?.key}`
+          ), c),
+          id: d.id,
+          label: d.label
         }));
       } catch {
         return [];
@@ -703,20 +772,15 @@ const st = ({
     },
     getRoutes: () => [
       {
-        element: /* @__PURE__ */ e.jsx(_e, {}),
-        errorElement: /* @__PURE__ */ e.jsx(ye, {}),
-        children: [
-          {
-            path: "/settings/api-keys",
-            element: /* @__PURE__ */ e.jsx(it, { service: i })
-          }
-        ]
+        path: "/settings/api-keys",
+        element: /* @__PURE__ */ e.jsx(jt, { service: r })
       }
-    ]
+    ],
+    getProtectedRoutes: () => ["/settings/api-keys"]
   };
 };
 export {
-  At as apiKeyPlugin,
-  Dt as createApiKeyService
+  Vt as apiKeyPlugin,
+  Ht as createApiKeyService
 };
 //# sourceMappingURL=zudoku.plugin-api-keys.js.map