apiblaze 0.17.20 → 0.17.22

package/dist/index.js

@@ -703,7 +703,7 @@ var import_commander = require("commander");
 var import_chalk38 = __toESM(require("chalk"));
 
 // package.json
-var version = "0.17.20";
+var version = "0.17.22";
 
 // src/index.ts
 init_types();
@@ -4021,9 +4021,85 @@ var SETTINGS = [
     type: "string",
     desc: "Team-scoped tag grouping projects in the consumer portal",
     toPatch: (v) => ({ product_slug: v })
+  },
+  // ── Advanced (specs/missing.md): all optional, default-off; null clears ────
+  {
+    key: "ip_access.mode",
+    label: "IP filter mode",
+    group: "Advanced",
+    type: "enum",
+    enum: ["off", "allow", "deny"],
+    desc: "allow = only listed CIDRs may call; deny = listed CIDRs are blocked",
+    read: (cfg) => dig(cfg, "ip_access.mode") ?? "off",
+    toPatch: (v, cfg) => ({ ip_access: { cidrs: [], ...cfg.ip_access ?? {}, mode: v } })
+  },
+  {
+    key: "ip_access.cidrs",
+    label: "IP filter CIDR list",
+    group: "Advanced",
+    type: "json",
+    desc: 'JSON array of CIDRs (max 100), e.g. ["203.0.113.0/24","2001:db8::/32"]',
+    toPatch: (v, cfg) => ({ ip_access: { mode: "off", ...cfg.ip_access ?? {}, cidrs: v } })
+  },
+  {
+    key: "ip_access.reject_status",
+    label: "IP filter reject status",
+    group: "Advanced",
+    type: "enum",
+    enum: ["403", "404"],
+    desc: "403 = explicit denial; 404 = stealth (looks like no such API)",
+    read: (cfg) => dig(cfg, "ip_access.reject_status") ?? 403,
+    toPatch: (v, cfg) => ({ ip_access: { mode: "off", cidrs: [], ...cfg.ip_access ?? {}, reject_status: Number(v) } })
+  },
+  {
+    key: "upstream_policy.timeout_ms",
+    label: "Upstream timeout (ms)",
+    group: "Advanced",
+    type: "number",
+    desc: "Per-attempt wall clock before the proxy answers 504 (1000\u201390000; default 30000)",
+    read: (cfg) => dig(cfg, "upstream_policy.timeout_ms") ?? 3e4,
+    toPatch: (v, cfg) => ({ upstream_policy: { ...cfg.upstream_policy ?? {}, timeout_ms: v } })
+  },
+  {
+    key: "upstream_policy.retries.max",
+    label: "Upstream retries",
+    group: "Advanced",
+    type: "number",
+    desc: "Extra attempts on 502/503/504/timeouts (0\u20133, idempotent methods only; billing counts the request once)",
+    read: (cfg) => dig(cfg, "upstream_policy.retries.max") ?? 0,
+    toPatch: (v, cfg) => ({ upstream_policy: { ...cfg.upstream_policy ?? {}, retries: { ...cfg.upstream_policy?.retries ?? {}, max: v } } })
+  },
+  {
+    key: "upstream_policy.breaker.enabled",
+    label: "Circuit breaker",
+    group: "Advanced",
+    type: "boolean",
+    desc: "Trip to fast 503s when the upstream is failing; auto-probes to recover",
+    read: (cfg) => dig(cfg, "upstream_policy.breaker.enabled") === true,
+    toPatch: (v, cfg) => ({ upstream_policy: { ...cfg.upstream_policy ?? {}, breaker: { ...cfg.upstream_policy?.breaker ?? {}, enabled: v } } })
+  },
+  {
+    key: "request_validation.mode",
+    label: "Request validation",
+    group: "Advanced",
+    type: "enum",
+    enum: ["off", "report", "enforce"],
+    desc: "Validate requests against your OpenAPI spec: report = log only, enforce = reject 422",
+    read: (cfg) => dig(cfg, "request_validation.mode") ?? "off",
+    toPatch: (v, cfg) => ({ request_validation: { ...cfg.request_validation ?? {}, mode: v } })
+  },
+  {
+    key: "request_validation.unknown_routes",
+    label: "Unknown routes",
+    group: "Advanced",
+    type: "enum",
+    enum: ["forward", "reject"],
+    desc: "What to do when a request matches no spec operation (default forward \u2014 traffic-built specs trail reality)",
+    read: (cfg) => dig(cfg, "request_validation.unknown_routes") ?? "forward",
+    toPatch: (v, cfg) => ({ request_validation: { mode: "off", ...cfg.request_validation ?? {}, unknown_routes: v } })
   }
 ];
-var SETTING_GROUPS = ["Basics", "Traffic & limits", "Access & auth", "Portal & MCP"];
+var SETTING_GROUPS = ["Basics", "Traffic & limits", "Access & auth", "Portal & MCP", "Advanced"];
 var FEATURES = [
   { go: "transforms", label: "Transforms", desc: "Rewrite requests/responses (headers, body fields) without touching your upstream" },
   { go: "mappings", label: "Mapping tables", desc: "Reusable value-mapping tables used by map transforms (values can be hidden/encrypted)" },
@@ -5398,7 +5474,7 @@ async function mintDurableProxyKey(teamId, tenant2) {
   const out = await admin({
     method: "POST",
     path: `/teams/${encodeURIComponent(teamId)}/tenants/${encodeURIComponent(tenant2)}/admin/keys`,
-    body: { permissions: ["call", "wallet"], environment: "prod" },
+    body: { permissions: ["call", "use-premium"], environment: "prod" },
     // key_model §2: call the API + spend the team wallet; non-expiring service key
     summary: "Mint a durable data-plane key for apichat"
   });

package/dist/react/index.d.mts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+/**
+ * apiblaze/react — <ApiKeyWidget/>. Drop it into your site (e.g. resiresi.com);
+ * it talks ONLY to your own backend route (which holds the CP key). Shows the
+ * logged-in user their API keys as a simple list with one always-visible
+ * "Create key" action, plus per-key show / rotate / revoke.
+ *
+ *   import { ApiKeyWidget } from 'apiblaze/react';
+ *   <ApiKeyWidget theme={{ accent: '#e11d48' }} />
+ *
+ * Fully white-labelable through `theme` alone — every font and color is a token,
+ * so you can match your brand (including a dark "codebox" look) without forking
+ * the component. See ApiKeyWidgetTheme.
+ *
+ * `endpoint` defaults to /api/apiblaze/keys (where you mounted createApiblazeKeys().handler).
+ */
+
+interface ApiKeyWidgetTheme {
+    /** Accent / primary action color. */
+    accent?: string;
+    /** Text/icon color ON accent buttons. Default #fff. */
+    accentText?: string;
+    /** Page color behind the card. Default transparent. */
+    background?: string;
+    /** Card body color. */
+    surface?: string;
+    /** Header strip color. Defaults to `surface` when unset. */
+    headerBackground?: string;
+    /** Primary text color. */
+    text?: string;
+    /** Secondary / muted text color. */
+    muted?: string;
+    /** Border + divider color. */
+    border?: string;
+    /** Destructive (revoke) color. */
+    danger?: string;
+    /** Positive (copied) color. */
+    success?: string;
+    /** Corner radius of the card, e.g. "12px". */
+    radius?: string;
+    /** Body font stack. */
+    fontFamily?: string;
+    /** Monospace font stack for keys and secrets. */
+    monoFontFamily?: string;
+}
+interface ApiKeyWidgetProps {
+    endpoint?: string;
+    theme?: ApiKeyWidgetTheme;
+    /** Heading text. Default "Your API keys". */
+    title?: string;
+    className?: string;
+}
+interface ApiKeyWidgetHandle {
+    refresh: () => void;
+}
+declare const ApiKeyWidget: React.ForwardRefExoticComponent<ApiKeyWidgetProps & React.RefAttributes<ApiKeyWidgetHandle>>;
+
+export { ApiKeyWidget, type ApiKeyWidgetHandle, type ApiKeyWidgetProps, type ApiKeyWidgetTheme, ApiKeyWidget as default };

package/dist/react/index.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+/**
+ * apiblaze/react — <ApiKeyWidget/>. Drop it into your site (e.g. resiresi.com);
+ * it talks ONLY to your own backend route (which holds the CP key). Shows the
+ * logged-in user their API keys as a simple list with one always-visible
+ * "Create key" action, plus per-key show / rotate / revoke.
+ *
+ *   import { ApiKeyWidget } from 'apiblaze/react';
+ *   <ApiKeyWidget theme={{ accent: '#e11d48' }} />
+ *
+ * Fully white-labelable through `theme` alone — every font and color is a token,
+ * so you can match your brand (including a dark "codebox" look) without forking
+ * the component. See ApiKeyWidgetTheme.
+ *
+ * `endpoint` defaults to /api/apiblaze/keys (where you mounted createApiblazeKeys().handler).
+ */
+
+interface ApiKeyWidgetTheme {
+    /** Accent / primary action color. */
+    accent?: string;
+    /** Text/icon color ON accent buttons. Default #fff. */
+    accentText?: string;
+    /** Page color behind the card. Default transparent. */
+    background?: string;
+    /** Card body color. */
+    surface?: string;
+    /** Header strip color. Defaults to `surface` when unset. */
+    headerBackground?: string;
+    /** Primary text color. */
+    text?: string;
+    /** Secondary / muted text color. */
+    muted?: string;
+    /** Border + divider color. */
+    border?: string;
+    /** Destructive (revoke) color. */
+    danger?: string;
+    /** Positive (copied) color. */
+    success?: string;
+    /** Corner radius of the card, e.g. "12px". */
+    radius?: string;
+    /** Body font stack. */
+    fontFamily?: string;
+    /** Monospace font stack for keys and secrets. */
+    monoFontFamily?: string;
+}
+interface ApiKeyWidgetProps {
+    endpoint?: string;
+    theme?: ApiKeyWidgetTheme;
+    /** Heading text. Default "Your API keys". */
+    title?: string;
+    className?: string;
+}
+interface ApiKeyWidgetHandle {
+    refresh: () => void;
+}
+declare const ApiKeyWidget: React.ForwardRefExoticComponent<ApiKeyWidgetProps & React.RefAttributes<ApiKeyWidgetHandle>>;
+
+export { ApiKeyWidget, type ApiKeyWidgetHandle, type ApiKeyWidgetProps, type ApiKeyWidgetTheme, ApiKeyWidget as default };

package/dist/react/index.js

@@ -0,0 +1,336 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.tsx
+var react_exports = {};
+__export(react_exports, {
+  ApiKeyWidget: () => ApiKeyWidget,
+  default: () => react_default
+});
+module.exports = __toCommonJS(react_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULTS = {
+  accent: "#4f46e5",
+  accentText: "#ffffff",
+  background: "transparent",
+  surface: "#ffffff",
+  headerBackground: "",
+  text: "#111827",
+  muted: "#6b7280",
+  border: "#e5e7eb",
+  danger: "#dc2626",
+  success: "#16a34a",
+  radius: "12px",
+  fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif",
+  monoFontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+};
+function relTime(iso) {
+  if (!iso) return null;
+  const t = new Date(iso).getTime();
+  if (Number.isNaN(t)) return null;
+  const s = Math.floor((Date.now() - t) / 1e3);
+  if (s < 60) return "just now";
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.floor(h / 24);
+  if (d < 30) return `${d}d ago`;
+  return new Date(iso).toLocaleDateString();
+}
+var ApiKeyWidget = React.forwardRef(function ApiKeyWidget2({ endpoint = "/api/apiblaze/keys", theme, title = "Your API keys", className }, ref) {
+  const t = { ...DEFAULTS, ...theme ?? {} };
+  const headerBg = t.headerBackground || t.surface;
+  const [keys, setKeys] = React.useState(null);
+  const [eligible, setEligible] = React.useState([]);
+  const [access, setAccess] = React.useState("ok");
+  const [chosenType, setChosenType] = React.useState("");
+  const [loadError, setLoadError] = React.useState(null);
+  const [secret, setSecret] = React.useState(null);
+  const [creating, setCreating] = React.useState(false);
+  const [pending, setPending] = React.useState(null);
+  const [confirming, setConfirming] = React.useState(null);
+  const [rowError, setRowError] = React.useState(null);
+  const [copied, setCopied] = React.useState(false);
+  const call = React.useCallback(async (body) => {
+    const res = await fetch(endpoint, body ? { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) } : { cache: "no-store" });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(data.error || `Error ${res.status}`);
+    return data;
+  }, [endpoint]);
+  const load = React.useCallback(async () => {
+    setLoadError(null);
+    try {
+      const d = await call();
+      setKeys((d.keys ?? []).slice().sort(byNewest));
+      setEligible(d.keyTypes ?? []);
+      setAccess(d.access === "denied" ? "denied" : "ok");
+    } catch (e) {
+      setLoadError(e instanceof Error ? e.message : "Could not load your keys.");
+      setKeys(null);
+    }
+  }, [call]);
+  React.useEffect(() => {
+    load();
+  }, [load]);
+  React.useImperativeHandle(ref, () => ({ refresh: load }), [load]);
+  React.useEffect(() => {
+    if (eligible.length && !eligible.includes(chosenType)) {
+      setChosenType(eligible.includes("call-only") ? "call-only" : eligible[0]);
+    }
+  }, [eligible, chosenType]);
+  async function create() {
+    setCreating(true);
+    setRowError(null);
+    try {
+      const d = await call({ action: "create", keyType: chosenType || void 0 });
+      if (d.key) setSecret({ key: d.key, keyId: d.key_id });
+      await load();
+    } catch (e) {
+      setRowError({ keyId: "", msg: e instanceof Error ? e.message : "Could not create a key." });
+    } finally {
+      setCreating(false);
+    }
+  }
+  async function reveal(keyId) {
+    setPending(`reveal:${keyId}`);
+    setRowError(null);
+    try {
+      const d = await call({ action: "reveal", keyId });
+      if (d.key) setSecret({ key: d.key, keyId });
+      else setRowError({ keyId, msg: "For security, this key can only be shown once \u2014 right after it was created." });
+    } catch (e) {
+      setRowError({ keyId, msg: e instanceof Error ? e.message : "Could not show this key." });
+    } finally {
+      setPending(null);
+    }
+  }
+  async function rotate(keyId) {
+    setConfirming(null);
+    setPending(`rotate:${keyId}`);
+    setRowError(null);
+    try {
+      const d = await call({ action: "rotate", keyId });
+      if (d.key) setSecret({ key: d.key, keyId: d.key_id });
+      await load();
+    } catch (e) {
+      setRowError({ keyId, msg: e instanceof Error ? e.message : "Could not rotate this key." });
+    } finally {
+      setPending(null);
+    }
+  }
+  async function revoke(keyId) {
+    setConfirming(null);
+    setPending(`revoke:${keyId}`);
+    setRowError(null);
+    try {
+      await call({ action: "revoke", keyId });
+      await load();
+    } catch (e) {
+      setRowError({ keyId, msg: e instanceof Error ? e.message : "Could not revoke this key." });
+    } finally {
+      setPending(null);
+    }
+  }
+  async function copy(v) {
+    try {
+      await navigator.clipboard.writeText(v);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1600);
+    } catch {
+    }
+  }
+  const vars = {
+    // @ts-expect-error CSS custom properties
+    "--abz-accent": t.accent,
+    "--abz-surface": t.surface,
+    "--abz-text": t.text,
+    "--abz-muted": t.muted,
+    "--abz-border": t.border,
+    "--abz-danger": t.danger,
+    "--abz-radius": t.radius,
+    background: t.background,
+    color: t.text,
+    fontFamily: t.fontFamily,
+    fontSize: 14
+  };
+  const card = { background: t.surface, border: `1px solid ${t.border}`, borderRadius: t.radius, overflow: "hidden" };
+  const btn = (kind = "ghost", small = false) => ({
+    cursor: "pointer",
+    borderRadius: 8,
+    fontWeight: 600,
+    fontSize: small ? 12 : 13,
+    padding: small ? "5px 10px" : "8px 14px",
+    fontFamily: "inherit",
+    border: `1px solid ${kind === "primary" ? t.accent : kind === "danger" ? t.danger : t.border}`,
+    background: kind === "primary" ? t.accent : "transparent",
+    color: kind === "primary" ? t.accentText : kind === "danger" ? t.danger : t.text,
+    whiteSpace: "nowrap"
+  });
+  const selectStyle = {
+    fontFamily: "inherit",
+    fontSize: 12,
+    fontWeight: 600,
+    padding: "5px 8px",
+    borderRadius: 8,
+    border: `1px solid ${t.border}`,
+    background: t.surface,
+    color: t.text,
+    cursor: "pointer"
+  };
+  const disabledStyle = (on) => on ? { opacity: 0.5, cursor: "not-allowed" } : {};
+  const secretBg = `color-mix(in srgb, ${t.accent} 8%, transparent)`;
+  const busyAny = creating || pending !== null;
+  const denied = access === "denied";
+  const showPicker = eligible.length > 1;
+  const Picker = showPicker ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", { value: chosenType, onChange: (e) => setChosenType(e.target.value), style: selectStyle, "aria-label": "Key type", disabled: busyAny, children: eligible.map((k) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: k, children: k }, k)) }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `abz-widget ${className ?? ""}`, style: vars, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `.abz-widget button:focus-visible,.abz-widget select:focus-visible{outline:2px solid var(--abz-accent);outline-offset:2px}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: card, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, padding: "14px 16px", borderBottom: `1px solid ${t.border}`, background: headerBg }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { style: { fontSize: 15 }, children: title }),
+        !denied && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+          Picker,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              style: { ...btn("primary", true), ...disabledStyle(busyAny) },
+              disabled: busyAny,
+              onClick: create,
+              "aria-label": "Create a new API key",
+              children: creating ? "Creating\u2026" : "+ Create key"
+            }
+          )
+        ] })
+      ] }),
+      denied && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "28px 20px", textAlign: "center", color: t.muted }, children: "Your account doesn\u2019t have API access." }),
+      !denied && secret && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "status", "aria-live": "polite", style: { margin: 16, padding: 14, borderRadius: 10, border: `1px solid ${t.accent}`, background: secretBg }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 600, marginBottom: 4 }, children: "New API key" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, color: t.muted, marginBottom: 8 }, children: "This is the only time you\u2019ll see this key. Copy it and store it somewhere safe." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              readOnly: true,
+              value: secret.key,
+              onFocus: (e) => e.currentTarget.select(),
+              "aria-label": "New API key value",
+              style: { flex: 1, fontFamily: t.monoFontFamily, fontSize: 13, padding: "8px 10px", borderRadius: 8, border: `1px solid ${t.border}`, background: t.surface, color: t.text, minWidth: 0 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: { ...btn("primary"), ...copied ? { background: t.success, borderColor: t.success } : {} }, onClick: () => copy(secret.key), children: copied ? "Copied" : "Copy" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 10, textAlign: "right" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: btn("ghost", true), onClick: () => setSecret(null), children: "I\u2019ve saved it" }) })
+      ] }),
+      !denied && keys === null && !loadError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-busy": "true", style: { padding: 24, color: t.muted }, children: "Loading your keys\u2026" }),
+      !denied && loadError && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "alert", style: { padding: 20, color: t.danger, fontSize: 13 }, children: [
+        loadError,
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: { ...btn("ghost", true), marginLeft: 6 }, onClick: load, children: "Retry" })
+      ] }),
+      !denied && keys !== null && keys.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "28px 20px", textAlign: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: t.muted, marginBottom: 14 }, children: "You don\u2019t have an API key yet. Create one to start calling the API." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "inline-flex", gap: 8, alignItems: "center" }, children: [
+          Picker,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: { ...btn("primary"), ...disabledStyle(creating) }, disabled: creating, onClick: create, children: creating ? "Creating\u2026" : "Create API key" })
+        ] })
+      ] }),
+      !denied && keys !== null && keys.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: keys.map((k) => {
+        const anyBusy = busyAny;
+        const used = relTime(k.last_used);
+        const created = k.created_at ? new Date(k.created_at).toLocaleDateString() : null;
+        const isConfirm = confirming?.keyId === k.key_id;
+        const showable = !!k.expires_at;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: { padding: "12px 16px", borderTop: `1px solid ${t.border}`, opacity: k.disabled ? 0.6 : 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("code", { "aria-label": `API key ending in ${k.key_suffix ?? ""}`, style: { flex: 1, minWidth: 150, fontFamily: t.monoFontFamily, color: t.muted }, children: [
+              k.key_prefix ?? "\u2022\u2022\u2022",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2022\u2022\u2022\u2022\u2022\u2022" }),
+              k.key_suffix ?? "\u2022\u2022\u2022"
+            ] }),
+            k.environment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 11, padding: "2px 7px", borderRadius: 999, border: `1px solid ${t.border}`, color: t.muted }, children: k.environment }),
+            k.disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 11, fontWeight: 600, color: t.danger }, children: "Revoked" }) : isConfirm ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center", flexBasis: "100%", flexWrap: "wrap", marginTop: 6 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, color: t.text, flex: 1, minWidth: 200 }, children: confirming.action === "rotate" ? "Rotate this key? A new secret is generated now. The current key keeps working for a short grace period, then stops \u2014 anything still using it will break." : "Revoke this key? It stops working immediately and can\u2019t be undone." }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: btn(confirming.action === "revoke" ? "danger" : "primary", true), onClick: () => confirming.action === "rotate" ? rotate(k.key_id) : revoke(k.key_id), children: confirming.action === "rotate" ? "Rotate key" : "Revoke key" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: btn("ghost", true), onClick: () => setConfirming(null), children: "Cancel" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+              showable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  style: { ...btn("ghost", true), ...disabledStyle(anyBusy) },
+                  disabled: anyBusy,
+                  "aria-label": `Show key ending in ${k.key_suffix ?? ""}`,
+                  onClick: () => reveal(k.key_id),
+                  children: pending === `reveal:${k.key_id}` ? "Showing\u2026" : "Show"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  style: { ...btn("ghost", true), ...disabledStyle(anyBusy) },
+                  disabled: anyBusy,
+                  "aria-label": `Rotate key ending in ${k.key_suffix ?? ""}`,
+                  onClick: () => setConfirming({ keyId: k.key_id, action: "rotate" }),
+                  children: pending === `rotate:${k.key_id}` ? "Rotating\u2026" : "Rotate"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  style: { ...btn("danger", true), ...disabledStyle(anyBusy) },
+                  disabled: anyBusy,
+                  "aria-label": `Revoke key ending in ${k.key_suffix ?? ""}`,
+                  onClick: () => setConfirming({ keyId: k.key_id, action: "revoke" }),
+                  children: "Revoke"
+                }
+              )
+            ] })
+          ] }),
+          (created || used) && !isConfirm && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 11, color: t.muted, marginTop: 5 }, children: [
+            created ? `Created ${created}` : "",
+            created && used ? " \xB7 " : "",
+            used ? `Last used ${used}` : created ? " \xB7 Never used" : "Never used"
+          ] }),
+          rowError?.keyId === k.key_id && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "alert", style: { fontSize: 12, color: t.danger, marginTop: 6 }, children: rowError.msg })
+        ] }, k.key_id);
+      }) }),
+      !denied && rowError && rowError.keyId === "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "alert", style: { padding: "0 16px 14px", fontSize: 12, color: t.danger }, children: rowError.msg })
+    ] })
+  ] });
+});
+function byNewest(a, b) {
+  return new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime();
+}
+var react_default = ApiKeyWidget;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ApiKeyWidget
+});