@rebasepro/studio 0.17.2 → 0.17.3-canary.g785baa2

package/dist/ApiKeysView-DiCurTEU.js

@@ -0,0 +1,1224 @@
+import { useApiBase, useApiConfig, useRebaseClient, useSnackbarController, useStudioCollectionRegistry } from "@rebasepro/app";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AlertCircleIcon, AlertTriangleIcon, BooleanSwitchWithLabel, Button, CheckCircleIcon, ChevronsUpDownIcon, Chip, CircularProgress, CopyIcon, DatabaseIcon, Dialog, DialogActions, DialogContent, DialogTitle, FolderIcon, FunctionSquareIcon, GlobeIcon, IconButton, KeyRoundIcon, PlusIcon, RefreshCwIcon, Select, SelectGroup, SelectItem, ShieldIcon, TextField, Tooltip, Trash2Icon, Typography, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+/** Grants the storage routes. */
+var RESOURCE_STORAGE = "storage";
+/** Grants every custom function. */
+var RESOURCE_ALL_FUNCTIONS = "functions";
+/** Prefix addressing a single custom function. */
+var FUNCTION_PREFIX = "functions/";
+/** Classify a raw `collection` field into the namespace it addresses. */
+function parseResource(collection) {
+	const value = collection.trim();
+	if (value === "*") return {
+		kind: "everything",
+		name: ""
+	};
+	if (value === "storage") return {
+		kind: "storage",
+		name: ""
+	};
+	if (value === "functions") return {
+		kind: "all-functions",
+		name: ""
+	};
+	if (value.startsWith("functions/")) return {
+		kind: "function",
+		name: value.slice(10)
+	};
+	return {
+		kind: "collection",
+		name: value
+	};
+}
+/**
+* Short label for a resource — what a picker or a chip shows.
+*
+* Deliberately not the raw value: `"*"` alone is the thing nobody could read.
+*/
+function resourceLabel(collection) {
+	const { kind, name } = parseResource(collection);
+	switch (kind) {
+		case "everything": return "Everything";
+		case "storage": return "Storage";
+		case "all-functions": return "All functions";
+		case "function": return name ? `${name}()` : "Function";
+		case "collection": return name || "—";
+	}
+}
+/**
+* The resource as a sentence fragment, for "this key can read <fragment>".
+*
+* `"everything"` spells out all three namespaces, because that is exactly the
+* fact the old `*` input hid.
+*/
+function resourcePhrase(collection) {
+	const { kind, name } = parseResource(collection);
+	switch (kind) {
+		case "everything": return "every collection, every custom function and storage";
+		case "storage": return "storage";
+		case "all-functions": return "every custom function";
+		case "function": return name ? `the ${name} function` : "one function";
+		case "collection": return name ? `the ${name} collection` : "an unnamed collection";
+	}
+}
+/** How each operation reads for a given namespace, so the sentence stays true. */
+function operationPhrase(kind, operation) {
+	if (kind === "all-functions" || kind === "function") return operation === "read" ? "call (GET)" : operation === "write" ? "call (POST, PUT, PATCH)" : "call (DELETE)";
+	if (kind === "storage") return operation === "read" ? "download from" : operation === "write" ? "upload to" : "delete from";
+	return operation;
+}
+/** Join with an Oxford-less "and", the way the rest of the panel reads. */
+function joinPhrases(parts) {
+	if (parts.length <= 1) return parts[0] ?? "";
+	return `${parts.slice(0, -1).join(", ")} and ${parts[parts.length - 1]}`;
+}
+/**
+* One plain sentence per permission entry: what the key will actually be able
+* to do. An entry with no operations selected grants nothing and says so,
+* rather than being silently dropped at submit time.
+*/
+function grantSentence(perm) {
+	const { kind } = parseResource(perm.collection);
+	const target = resourcePhrase(perm.collection);
+	if (perm.operations.length === 0) return `No access to ${target}`;
+	const verbs = joinPhrases(perm.operations.map((op) => operationPhrase(kind, op)));
+	return `${verbs.charAt(0).toUpperCase() + verbs.slice(1)} ${target}`;
+}
+/**
+* Dense one-line summary for list rows and the created-key confirmation.
+*
+* The wildcard wins over everything else in the array, because the guard
+* returns on the first match — a key holding `*` is a full-access key no
+* matter what else is listed beside it.
+*/
+function permissionSummary(perms) {
+	if (perms.length === 0) return "No permissions";
+	const wildcard = perms.find((p) => p.collection === "*");
+	if (wildcard) return `Everything (${wildcard.operations.join(", ")})`;
+	if (perms.length === 1) return `${resourceLabel(perms[0].collection)} (${perms[0].operations.join(", ")})`;
+	return `${perms.length} resources`;
+}
+//#endregion
+//#region src/components/ApiKeys/CreateApiKeyDialog.tsx
+var OPERATIONS = [
+	"read",
+	"write",
+	"delete"
+];
+/** What each operation actually permits, per namespace, shown on the toggle. */
+var OPERATION_HINT = {
+	everything: {
+		read: "GET on every resource",
+		write: "POST, PUT and PATCH on every resource",
+		delete: "DELETE on every resource"
+	},
+	collection: {
+		read: "List and get snapshots",
+		write: "Create and update snapshots",
+		delete: "Delete snapshots"
+	},
+	storage: {
+		read: "List and download files",
+		write: "Upload files and create folders",
+		delete: "Delete files"
+	},
+	"all-functions": {
+		read: "Call any function over GET",
+		write: "Call any function over POST, PUT or PATCH",
+		delete: "Call any function over DELETE"
+	},
+	function: {
+		read: "Call it over GET",
+		write: "Call it over POST, PUT or PATCH",
+		delete: "Call it over DELETE"
+	}
+};
+/**
+* Picker value that switches a row to free text.
+*
+* Never reaches the wire — choosing it sets `freeText` and clears the resource
+* — so it only has to be a value no collection slug would take.
+*/
+var SENTINEL_FREE_TEXT = "__custom__";
+var rowToPermission = (row) => ({
+	collection: row.resource.trim(),
+	operations: OPERATIONS.filter((op) => row[op])
+});
+var rowGrantsNothing = (row) => {
+	const perm = rowToPermission(row);
+	return !perm.collection || perm.operations.length === 0;
+};
+function ResourceIcon({ kind, className }) {
+	return /* @__PURE__ */ jsx(kind === "everything" ? GlobeIcon : kind === "storage" ? FolderIcon : kind === "all-functions" || kind === "function" ? FunctionSquareIcon : DatabaseIcon, {
+		size: iconSize.smallest,
+		className
+	});
+}
+var OPERATION_STYLES = {
+	read: {
+		on: "bg-emerald-500/12 text-emerald-700 dark:text-emerald-300 ring-emerald-500/40",
+		dot: "bg-emerald-500"
+	},
+	write: {
+		on: "bg-blue-500/12 text-blue-700 dark:text-blue-300 ring-blue-500/40",
+		dot: "bg-blue-500"
+	},
+	delete: {
+		on: "bg-rose-500/12 text-rose-700 dark:text-rose-300 ring-rose-500/40",
+		dot: "bg-rose-500"
+	}
+};
+function OperationToggles({ row, onToggle }) {
+	const kind = parseResource(row.resource).kind;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-1",
+		role: "group",
+		"aria-label": "Allowed operations",
+		children: OPERATIONS.map((op) => {
+			const active = row[op];
+			const styles = OPERATION_STYLES[op];
+			return /* @__PURE__ */ jsx(Tooltip, {
+				title: OPERATION_HINT[kind][op],
+				delayDuration: 400,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-pressed": active,
+					onClick: () => onToggle(op, !active),
+					className: cls("flex items-center gap-1.5 h-7 pl-2 pr-2.5 rounded-md text-2xs font-medium", "ring-1 transition-colors duration-150 cursor-pointer", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary", active ? styles.on : "bg-transparent ring-transparent text-surface-500 dark:text-surface-400 hover:bg-surface-accent-100 dark:hover:bg-surface-800"),
+					children: [/* @__PURE__ */ jsx("span", { className: cls("w-1.5 h-1.5 rounded-full transition-colors duration-150", active ? styles.dot : "bg-surface-300 dark:bg-surface-600") }), op]
+				})
+			}, op);
+		})
+	});
+}
+function SectionLabel({ children, hint }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-baseline gap-2 mb-2",
+		children: [/* @__PURE__ */ jsx(Typography, {
+			variant: "label",
+			className: "text-2xs uppercase tracking-wider font-semibold text-surface-600 dark:text-surface-300",
+			gutterBottom: false,
+			children
+		}), hint && /* @__PURE__ */ jsx(Typography, {
+			variant: "caption",
+			color: "secondary",
+			className: "text-2xs",
+			gutterBottom: false,
+			children: hint
+		})]
+	});
+}
+function CreateApiKeyDialog({ onClose, onCreated }) {
+	const client = useRebaseClient();
+	const snackbar = useSnackbarController();
+	const collectionRegistry = useStudioCollectionRegistry();
+	const apiConfig = useApiConfig();
+	const apiBase = useApiBase();
+	const [name, setName] = useState("");
+	const [rows, setRows] = useState([{
+		resource: "*",
+		read: true,
+		write: false,
+		delete: false,
+		freeText: false
+	}]);
+	const [admin, setAdmin] = useState(false);
+	const [rateLimit, setRateLimit] = useState("");
+	const [expiresIn, setExpiresIn] = useState("never");
+	const [creating, setCreating] = useState(false);
+	const collections = useMemo(() => (collectionRegistry?.collections ?? []).map((col) => ({
+		slug: col.slug,
+		name: col.name
+	})).filter((col) => !!col.slug).sort((a, b) => a.slug.localeCompare(b.slug)), [collectionRegistry?.collections]);
+	/**
+	* Deployed functions, so a single-function grant can be picked instead of
+	* spelled `functions/<name>` from memory. Best-effort: this is an ordinary
+	* API route, and a backend that serves no functions — or refuses the
+	* request — just leaves the free-text escape to cover it.
+	*/
+	const [functionNames, setFunctionNames] = useState([]);
+	useEffect(() => {
+		if (!apiBase) return;
+		let cancelled = false;
+		(async () => {
+			try {
+				const token = await apiConfig?.getAuthToken?.();
+				const res = await fetch(`${apiBase}/functions`, { headers: token ? { Authorization: `Bearer ${token}` } : void 0 });
+				if (!res.ok) return;
+				const body = await res.json();
+				if (cancelled) return;
+				setFunctionNames((body.functions ?? []).map((fn) => fn.name).filter((fnName) => !!fnName));
+			} catch {}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [apiBase, apiConfig]);
+	const updateRow = useCallback((idx, patch) => {
+		setRows((current) => current.map((row, i) => i === idx ? {
+			...row,
+			...patch
+		} : row));
+	}, []);
+	const addRow = () => setRows((current) => [...current, {
+		resource: collections[0]?.slug ?? "",
+		read: true,
+		write: false,
+		delete: false,
+		freeText: collections.length === 0
+	}]);
+	const removeRow = (idx) => setRows((current) => current.filter((_, i) => i !== idx));
+	const effectivePermissions = useMemo(() => rows.map(rowToPermission).filter((perm) => perm.collection && perm.operations.length > 0), [rows]);
+	const droppedRows = rows.filter(rowGrantsNothing).length;
+	const hasWildcard = rows.some((row) => row.resource === "*" && OPERATIONS.some((op) => row[op]));
+	const canSubmit = !!name.trim() && effectivePermissions.length > 0 && !creating;
+	const handleCreate = async () => {
+		if (!client?.apiKeys || !canSubmit) return;
+		let expires_at = null;
+		if (expiresIn === "7d") expires_at = new Date(Date.now() + 7 * 864e5).toISOString();
+		else if (expiresIn === "30d") expires_at = new Date(Date.now() + 30 * 864e5).toISOString();
+		else if (expiresIn === "90d") expires_at = new Date(Date.now() + 90 * 864e5).toISOString();
+		else if (expiresIn === "1y") expires_at = new Date(Date.now() + 365 * 864e5).toISOString();
+		setCreating(true);
+		try {
+			onCreated((await client.apiKeys.createKey({
+				name: name.trim(),
+				permissions: effectivePermissions,
+				admin,
+				rate_limit: rateLimit ? parseInt(rateLimit, 10) : null,
+				expires_at
+			})).key);
+		} catch (e) {
+			snackbar.open({
+				type: "error",
+				message: e instanceof Error ? e.message : String(e)
+			});
+		} finally {
+			setCreating(false);
+		}
+	};
+	const submitBlockedReason = !name.trim() ? "Name the key first" : effectivePermissions.length === 0 ? "Grant at least one operation on one resource" : "";
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open: true,
+		onOpenChange: (open) => {
+			if (!open && !creating) onClose();
+		},
+		maxWidth: "2xl",
+		children: [
+			/* @__PURE__ */ jsx(DialogTitle, {
+				variant: "subtitle1",
+				gutterBottom: false,
+				className: "font-semibold",
+				children: "Create API key"
+			}),
+			/* @__PURE__ */ jsxs(DialogContent, {
+				includeMargin: false,
+				className: "px-8 pt-2 pb-4 flex flex-col gap-6",
+				children: [
+					/* @__PURE__ */ jsx(Typography, {
+						variant: "body2",
+						color: "secondary",
+						gutterBottom: false,
+						className: "text-[13px] max-w-[62ch]",
+						children: "A credential for scripts, cron jobs and agents. It authenticates as itself rather than as a user, and reaches only what you grant here."
+					}),
+					/* @__PURE__ */ jsx(TextField, {
+						label: "Name",
+						value: name,
+						onChange: (e) => setName(e.target.value),
+						placeholder: "e.g. Analytics pipeline",
+						size: "small",
+						autoFocus: true
+					}),
+					/* @__PURE__ */ jsxs("div", { children: [
+						/* @__PURE__ */ jsx(SectionLabel, {
+							hint: "What the key may call",
+							children: "Access"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: cls("rounded-lg border overflow-hidden", defaultBorderMixin),
+							children: rows.map((row, idx) => {
+								const parsed = parseResource(row.resource);
+								return /* @__PURE__ */ jsxs("div", {
+									role: "group",
+									"aria-label": `Resource ${idx + 1}`,
+									className: cls("flex flex-wrap items-center gap-x-3 gap-y-2 px-3 py-2.5", idx > 0 && cls("border-t", defaultBorderMixin)),
+									children: [
+										/* @__PURE__ */ jsxs("div", {
+											className: "flex items-center gap-2 flex-1 min-w-[15rem]",
+											children: [/* @__PURE__ */ jsx(ResourceIcon, {
+												kind: parsed.kind,
+												className: cls("shrink-0", parsed.kind === "everything" ? "text-amber-600 dark:text-amber-400" : "text-surface-500 dark:text-surface-400")
+											}), row.freeText ? /* @__PURE__ */ jsx(TextField, {
+												size: "small",
+												"aria-label": `Resource ${idx + 1} name`,
+												value: row.resource,
+												onChange: (e) => updateRow(idx, { resource: e.target.value }),
+												placeholder: "collection slug, or functions/<name>",
+												className: "flex-1",
+												endAdornment: /* @__PURE__ */ jsx(Tooltip, {
+													title: "Back to the list",
+													children: /* @__PURE__ */ jsx(IconButton, {
+														size: "smallest",
+														"aria-label": "Pick from the list instead",
+														onClick: () => updateRow(idx, {
+															resource: collections[0]?.slug ?? "*",
+															freeText: false
+														}),
+														children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: iconSize.smallest })
+													})
+												})
+											}) : /* @__PURE__ */ jsxs(Select, {
+												size: "small",
+												fullWidth: true,
+												className: "flex-1",
+												"aria-label": `Resource ${idx + 1}`,
+												value: row.resource,
+												position: "popper",
+												onValueChange: (value) => {
+													if (value === SENTINEL_FREE_TEXT) updateRow(idx, {
+														freeText: true,
+														resource: ""
+													});
+													else updateRow(idx, {
+														resource: value,
+														freeText: false
+													});
+												},
+												renderValue: (value) => /* @__PURE__ */ jsx("span", {
+													className: "truncate",
+													children: value === "*" ? "Everything" : value === "storage" ? "Storage" : value === "functions" ? "All functions" : String(value).startsWith("functions/") ? `${String(value).slice(FUNCTION_PREFIX.length)}()` : String(value)
+												}),
+												children: [
+													/* @__PURE__ */ jsx(SelectItem, {
+														value: "*",
+														children: /* @__PURE__ */ jsxs("div", {
+															className: "flex flex-col text-left",
+															children: [/* @__PURE__ */ jsx("span", { children: "Everything" }), /* @__PURE__ */ jsx("span", {
+																className: "text-2xs text-text-secondary dark:text-text-secondary-dark",
+																children: "Every collection, every function and storage"
+															})]
+														})
+													}),
+													collections.length > 0 && /* @__PURE__ */ jsx(SelectGroup, {
+														label: "Collections",
+														children: collections.map((col) => /* @__PURE__ */ jsx(SelectItem, {
+															value: col.slug,
+															children: /* @__PURE__ */ jsxs("div", {
+																className: "flex flex-col text-left",
+																children: [/* @__PURE__ */ jsx("span", { children: col.slug }), col.name && col.name !== col.slug && /* @__PURE__ */ jsx("span", {
+																	className: "text-2xs text-text-secondary dark:text-text-secondary-dark",
+																	children: col.name
+																})]
+															})
+														}, col.slug))
+													}),
+													/* @__PURE__ */ jsxs(SelectGroup, {
+														label: "Functions",
+														children: [/* @__PURE__ */ jsx(SelectItem, {
+															value: RESOURCE_ALL_FUNCTIONS,
+															children: "All functions"
+														}), functionNames.map((fnName) => /* @__PURE__ */ jsxs(SelectItem, {
+															value: `${FUNCTION_PREFIX}${fnName}`,
+															children: [fnName, "()"]
+														}, fnName))]
+													}),
+													/* @__PURE__ */ jsx(SelectGroup, {
+														label: "Storage",
+														children: /* @__PURE__ */ jsx(SelectItem, {
+															value: RESOURCE_STORAGE,
+															children: "Storage"
+														})
+													}),
+													/* @__PURE__ */ jsx(SelectGroup, {
+														label: "Other",
+														children: /* @__PURE__ */ jsx(SelectItem, {
+															value: SENTINEL_FREE_TEXT,
+															children: "Type a name…"
+														})
+													})
+												]
+											})]
+										}),
+										/* @__PURE__ */ jsx(OperationToggles, {
+											row,
+											onToggle: (operation, value) => updateRow(idx, { [operation]: value })
+										}),
+										/* @__PURE__ */ jsx(Tooltip, {
+											title: rows.length > 1 ? "Remove" : "At least one resource is required",
+											children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, {
+												size: "small",
+												disabled: rows.length === 1,
+												onClick: () => removeRow(idx),
+												"aria-label": `Remove resource ${idx + 1}`,
+												children: /* @__PURE__ */ jsx(Trash2Icon, { size: iconSize.smallest })
+											}) })
+										})
+									]
+								}, idx);
+							})
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							size: "small",
+							variant: "text",
+							onClick: addRow,
+							className: "mt-1.5",
+							startIcon: /* @__PURE__ */ jsx(PlusIcon, { size: iconSize.smallest }),
+							children: "Add resource"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: cls("mt-3 rounded-lg border px-3 py-2.5 bg-surface-accent-50 dark:bg-surface-900", defaultBorderMixin),
+							children: [
+								/* @__PURE__ */ jsx(Typography, {
+									variant: "label",
+									gutterBottom: false,
+									className: "text-2xs uppercase tracking-wider font-semibold text-surface-600 dark:text-surface-300",
+									children: "This key will be able to"
+								}),
+								effectivePermissions.length === 0 ? /* @__PURE__ */ jsx(Typography, {
+									variant: "body2",
+									gutterBottom: false,
+									className: "mt-1.5 text-[13px] text-surface-500 dark:text-surface-400",
+									children: "Nothing yet — pick a resource and at least one operation."
+								}) : /* @__PURE__ */ jsxs("ul", {
+									className: "mt-1.5 space-y-1",
+									children: [effectivePermissions.map((perm, idx) => /* @__PURE__ */ jsxs("li", {
+										className: "flex items-start gap-2",
+										children: [/* @__PURE__ */ jsx(ResourceIcon, {
+											kind: parseResource(perm.collection).kind,
+											className: "mt-[3px] shrink-0 text-surface-500 dark:text-surface-400"
+										}), /* @__PURE__ */ jsx(Typography, {
+											variant: "body2",
+											gutterBottom: false,
+											className: "text-[13px] leading-snug",
+											children: grantSentence(perm)
+										})]
+									}, idx)), admin && /* @__PURE__ */ jsxs("li", {
+										className: "flex items-start gap-2",
+										children: [/* @__PURE__ */ jsx(ShieldIcon, {
+											size: iconSize.smallest,
+											className: "mt-[3px] shrink-0 text-amber-600 dark:text-amber-400"
+										}), /* @__PURE__ */ jsxs(Typography, {
+											variant: "body2",
+											gutterBottom: false,
+											className: "text-[13px] leading-snug",
+											children: [
+												"Reach every admin route — users, roles, cron, backups, logs — and read through the ",
+												/* @__PURE__ */ jsx("span", {
+													className: "font-mono text-2xs",
+													children: "default_admin"
+												}),
+												" policies"
+											]
+										})]
+									})]
+								}),
+								droppedRows > 0 && effectivePermissions.length > 0 && /* @__PURE__ */ jsx(Typography, {
+									variant: "caption",
+									gutterBottom: false,
+									className: "block mt-2 text-2xs text-surface-500 dark:text-surface-400",
+									children: droppedRows === 1 ? "1 row grants nothing and will not be saved." : `${droppedRows} rows grant nothing and will not be saved.`
+								})
+							]
+						}),
+						hasWildcard && /* @__PURE__ */ jsxs("div", {
+							className: "flex items-start gap-2 mt-2 px-1",
+							children: [/* @__PURE__ */ jsx(AlertTriangleIcon, {
+								size: iconSize.smallest,
+								className: "mt-[3px] shrink-0 text-amber-600 dark:text-amber-400"
+							}), /* @__PURE__ */ jsxs(Typography, {
+								variant: "caption",
+								gutterBottom: false,
+								className: "text-2xs text-amber-700 dark:text-amber-300 leading-snug max-w-[70ch]",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "font-semibold",
+									children: "Everything"
+								}), " is the widest grant there is. It also covers collections and functions you add later, without this key being edited again."]
+							})]
+						})
+					] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(SectionLabel, {
+						hint: "Off for almost every key",
+						children: "Admin role"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cls("rounded-lg border px-3 py-2.5 transition-colors duration-150", admin ? "border-amber-500/40 bg-amber-500/[0.06]" : defaultBorderMixin),
+						children: [/* @__PURE__ */ jsx(BooleanSwitchWithLabel, {
+							size: "small",
+							position: "start",
+							invisible: true,
+							value: admin,
+							onValueChange: setAdmin,
+							label: /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx(ShieldIcon, {
+									size: iconSize.smallest,
+									className: admin ? "text-amber-600 dark:text-amber-400" : "text-surface-500 dark:text-surface-400"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-[13px]",
+									children: "Grant the admin role"
+								})]
+							})
+						}), /* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							color: "secondary",
+							gutterBottom: false,
+							className: "block mt-1.5 text-2xs leading-snug max-w-[70ch]",
+							children: admin ? "The key passes the admin-gated routes and reads through the default_admin RLS policies — far wider than the resources above. It still cannot manage API keys." : "Without it the key carries only the service role, and RLS grants it nothing unless a collection policy names that role."
+						})]
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [
+						/* @__PURE__ */ jsx(SectionLabel, { children: "Limits" }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-1 sm:grid-cols-2 gap-3 items-end",
+							children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Select, {
+								label: "Expires",
+								value: expiresIn,
+								onValueChange: setExpiresIn,
+								size: "small",
+								fullWidth: true,
+								position: "popper",
+								renderValue: (v) => v === "never" ? "Never" : v === "7d" ? "In 7 days" : v === "30d" ? "In 30 days" : v === "90d" ? "In 90 days" : "In 1 year",
+								children: [
+									/* @__PURE__ */ jsx(SelectItem, {
+										value: "never",
+										children: "Never"
+									}),
+									/* @__PURE__ */ jsx(SelectItem, {
+										value: "7d",
+										children: "In 7 days"
+									}),
+									/* @__PURE__ */ jsx(SelectItem, {
+										value: "30d",
+										children: "In 30 days"
+									}),
+									/* @__PURE__ */ jsx(SelectItem, {
+										value: "90d",
+										children: "In 90 days"
+									}),
+									/* @__PURE__ */ jsx(SelectItem, {
+										value: "1y",
+										children: "In 1 year"
+									})
+								]
+							}) }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+								htmlFor: "api-key-rate-limit",
+								className: "block text-sm font-medium ml-3.5 mb-1 text-text-secondary dark:text-text-secondary-dark",
+								children: "Rate limit"
+							}), /* @__PURE__ */ jsx(TextField, {
+								id: "api-key-rate-limit",
+								value: rateLimit,
+								onChange: (e) => setRateLimit(e.target.value.replace(/\D/g, "")),
+								placeholder: "1000",
+								size: "small",
+								endAdornment: /* @__PURE__ */ jsx("span", {
+									className: "text-2xs text-text-secondary dark:text-text-secondary-dark whitespace-nowrap",
+									children: "/ 15 min"
+								})
+							})] })]
+						}),
+						/* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							color: "secondary",
+							gutterBottom: false,
+							className: "block mt-1.5 text-2xs",
+							children: "Leave the rate limit empty for the server default of 1000 requests per 15-minute window."
+						})
+					] })
+				]
+			}),
+			/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onClick: onClose,
+				disabled: creating,
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(Tooltip, {
+				title: submitBlockedReason,
+				children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Button, {
+					color: "primary",
+					onClick: handleCreate,
+					disabled: !canSubmit,
+					startIcon: creating ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : void 0,
+					children: creating ? "Creating…" : "Create key"
+				}) })
+			})] })
+		]
+	});
+}
+//#endregion
+//#region src/components/ApiKeys/ApiKeysView.tsx
+function formatRelative(iso) {
+	if (!iso) return "—";
+	const d = new Date(iso);
+	const now = Date.now();
+	const diff = d.getTime() - now;
+	const abs = Math.abs(diff);
+	if (abs < 6e4) return diff > 0 ? "in <1m" : "<1m ago";
+	if (abs < 36e5) {
+		const m = Math.round(abs / 6e4);
+		return diff > 0 ? `in ${m}m` : `${m}m ago`;
+	}
+	if (abs < 864e5) {
+		const h = Math.round(abs / 36e5);
+		return diff > 0 ? `in ${h}h` : `${h}h ago`;
+	}
+	return d.toLocaleDateString();
+}
+function isExpired(key) {
+	return !!(key.expires_at && new Date(key.expires_at) < /* @__PURE__ */ new Date());
+}
+function keyStatus(key) {
+	if (key.revoked_at) return {
+		label: "Revoked",
+		color: "text-red-500"
+	};
+	if (isExpired(key)) return {
+		label: "Expired",
+		color: "text-amber-500"
+	};
+	return {
+		label: "Active",
+		color: "text-emerald-500"
+	};
+}
+function ApiKeysView() {
+	const client = useRebaseClient();
+	const snackbar = useSnackbarController();
+	const [keys, setKeys] = useState([]);
+	const [loading, setLoading] = useState(true);
+	const [selectedId, setSelectedId] = useState(null);
+	const [showCreate, setShowCreate] = useState(false);
+	const [showSecret, setShowSecret] = useState(null);
+	const [revoking, setRevoking] = useState(null);
+	const [confirmRevoke, setConfirmRevoke] = useState(null);
+	const clientRef = useRef(client);
+	clientRef.current = client;
+	const snackbarRef = useRef(snackbar);
+	snackbarRef.current = snackbar;
+	const loadKeys = useCallback(async () => {
+		const c = clientRef.current;
+		if (!c?.apiKeys) {
+			setLoading(false);
+			return;
+		}
+		try {
+			const res = await c.apiKeys.listKeys();
+			setKeys(res.keys);
+		} catch (e) {
+			snackbarRef.current.open({
+				type: "error",
+				message: e instanceof Error ? e.message : String(e)
+			});
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+	useEffect(() => {
+		loadKeys();
+	}, [loadKeys]);
+	const handleRevoke = async (id) => {
+		const c = clientRef.current;
+		if (!c?.apiKeys) return;
+		setRevoking(id);
+		try {
+			await c.apiKeys.revokeKey(id);
+			snackbarRef.current.open({
+				type: "success",
+				message: "API key revoked"
+			});
+			await loadKeys();
+			if (selectedId === id) setSelectedId(null);
+		} catch (e) {
+			snackbarRef.current.open({
+				type: "error",
+				message: e instanceof Error ? e.message : String(e)
+			});
+		} finally {
+			setRevoking(null);
+		}
+	};
+	const handleCreated = (keyWithSecret) => {
+		setShowCreate(false);
+		setShowSecret(keyWithSecret);
+		loadKeys();
+	};
+	const selectedKey = keys.find((k) => k.id === selectedId);
+	const activeKeys = keys.filter((k) => !k.revoked_at && !isExpired(k));
+	const inactiveKeys = keys.filter((k) => k.revoked_at || isExpired(k));
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center h-full",
+		children: /* @__PURE__ */ jsx(CircularProgress, {})
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex h-full w-full overflow-hidden bg-white dark:bg-surface-950",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cls("flex flex-col w-[340px] min-w-[280px] border-r h-full", defaultBorderMixin),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cls("flex items-center justify-between px-4 py-2.5 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx(KeyRoundIcon, {
+								size: iconSize.smallest,
+								className: "text-primary"
+							}),
+							/* @__PURE__ */ jsx(Typography, {
+								variant: "subtitle2",
+								className: "font-semibold",
+								children: "API Keys"
+							}),
+							/* @__PURE__ */ jsx(Chip, {
+								size: "smallest",
+								className: "bg-surface-200 dark:bg-surface-700 text-surface-600 dark:text-surface-300",
+								children: activeKeys.length
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ jsx(IconButton, {
+							size: "small",
+							onClick: loadKeys,
+							title: "Refresh",
+							children: /* @__PURE__ */ jsx(RefreshCwIcon, { size: iconSize.smallest })
+						}), /* @__PURE__ */ jsx(Button, {
+							size: "small",
+							color: "primary",
+							onClick: () => setShowCreate(true),
+							startIcon: /* @__PURE__ */ jsx(PlusIcon, { size: iconSize.smallest }),
+							children: "New"
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex-1 overflow-y-auto p-2 space-y-1",
+					children: [
+						activeKeys.length === 0 && inactiveKeys.length === 0 && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col items-center justify-center h-full gap-3 text-center p-6",
+							children: [
+								/* @__PURE__ */ jsx(KeyRoundIcon, {
+									size: iconSize.medium,
+									className: "text-surface-300 dark:text-surface-600"
+								}),
+								/* @__PURE__ */ jsx(Typography, {
+									variant: "body2",
+									color: "secondary",
+									children: "No API keys yet"
+								}),
+								/* @__PURE__ */ jsx(Typography, {
+									variant: "caption",
+									color: "disabled",
+									children: "Create a key to enable machine-to-machine authentication"
+								})
+							]
+						}),
+						activeKeys.map((key) => /* @__PURE__ */ jsx(KeyListItem, {
+							apiKey: key,
+							selected: selectedId === key.id,
+							onClick: () => setSelectedId(key.id)
+						}, key.id)),
+						inactiveKeys.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+							className: "px-2 pt-3 pb-1",
+							children: /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								color: "disabled",
+								className: "text-[10px] uppercase tracking-wider font-medium",
+								children: "Revoked / Expired"
+							})
+						}), inactiveKeys.map((key) => /* @__PURE__ */ jsx(KeyListItem, {
+							apiKey: key,
+							selected: selectedId === key.id,
+							onClick: () => setSelectedId(key.id)
+						}, key.id))] })
+					]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex-1 flex flex-col min-w-0 h-full overflow-hidden",
+				children: !selectedKey ? /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center h-full",
+					children: /* @__PURE__ */ jsx(Typography, {
+						variant: "body2",
+						color: "disabled",
+						children: "Select an API key to view details"
+					})
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: cls("flex items-center justify-between px-5 py-3 border-b bg-white dark:bg-surface-950 min-h-[56px]", defaultBorderMixin),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3 min-w-0",
+							children: [/* @__PURE__ */ jsx(KeyRoundIcon, {
+								size: iconSize.small,
+								className: "text-primary shrink-0"
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2 min-w-0",
+									children: [/* @__PURE__ */ jsx(Typography, {
+										variant: "subtitle1",
+										className: "font-semibold truncate",
+										children: selectedKey.name
+									}), selectedKey.admin && /* @__PURE__ */ jsx(AdminChip, {})]
+								}), /* @__PURE__ */ jsxs(Typography, {
+									variant: "caption",
+									color: "secondary",
+									className: "font-mono text-[11px]",
+									children: [selectedKey.key_prefix, "•••"]
+								})]
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "flex items-center gap-2 shrink-0",
+							children: !selectedKey.revoked_at && /* @__PURE__ */ jsx(Button, {
+								size: "small",
+								color: "error",
+								variant: "outlined",
+								onClick: () => setConfirmRevoke(selectedKey),
+								disabled: revoking === selectedKey.id,
+								startIcon: revoking === selectedKey.id ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsx(Trash2Icon, { size: iconSize.smallest }),
+								children: "Revoke"
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "px-5 py-4 bg-surface-50 dark:bg-surface-900/50",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-2 md:grid-cols-4 gap-3",
+							children: [
+								/* @__PURE__ */ jsx(StatCard, {
+									label: "Status",
+									value: keyStatus(selectedKey).label,
+									className: keyStatus(selectedKey).color
+								}),
+								/* @__PURE__ */ jsx(StatCard, {
+									label: "Created",
+									value: formatRelative(selectedKey.created_at)
+								}),
+								/* @__PURE__ */ jsx(StatCard, {
+									label: "Last Used",
+									value: formatRelative(selectedKey.last_used_at)
+								}),
+								/* @__PURE__ */ jsx(StatCard, {
+									label: "Expires",
+									value: selectedKey.expires_at ? formatRelative(selectedKey.expires_at) : "Never"
+								})
+							]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-2 md:grid-cols-3 gap-3 mt-3",
+							children: [
+								/* @__PURE__ */ jsx(StatCard, {
+									label: "Role",
+									value: selectedKey.admin ? "Admin" : "Service",
+									className: selectedKey.admin ? "text-amber-600 dark:text-amber-400" : void 0
+								}),
+								/* @__PURE__ */ jsx(StatCard, {
+									label: "Rate Limit",
+									value: selectedKey.rate_limit ? `${selectedKey.rate_limit}/15min` : "Default (1000/15min)"
+								}),
+								/* @__PURE__ */ jsx(StatCard, {
+									label: "Created By",
+									value: selectedKey.created_by,
+									mono: true
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cls("flex items-center gap-2 px-5 py-2 border-y bg-white dark:bg-surface-950", defaultBorderMixin),
+						children: [/* @__PURE__ */ jsx(Typography, {
+							variant: "subtitle2",
+							className: "font-semibold text-[13px]",
+							children: "Permissions"
+						}), /* @__PURE__ */ jsx(Chip, {
+							size: "smallest",
+							className: "bg-surface-200 dark:bg-surface-700 text-surface-600 dark:text-surface-300",
+							children: selectedKey.permissions.length
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex-1 overflow-y-auto px-5 py-3",
+						children: [selectedKey.admin && /* @__PURE__ */ jsxs("div", {
+							className: "flex items-start gap-2 mb-3 px-3 py-2 rounded-lg border border-amber-500/40 bg-amber-500/[0.06]",
+							children: [/* @__PURE__ */ jsx(ShieldIcon, {
+								size: iconSize.smallest,
+								className: "mt-[3px] shrink-0 text-amber-600 dark:text-amber-400"
+							}), /* @__PURE__ */ jsxs(Typography, {
+								variant: "caption",
+								className: "text-[12px] leading-snug text-amber-700 dark:text-amber-300",
+								children: [
+									"This key holds the ",
+									/* @__PURE__ */ jsx("span", {
+										className: "font-semibold",
+										children: "admin role"
+									}),
+									": it also passes the admin-gated routes — users, roles, cron, backups, logs — and reads through the",
+									/* @__PURE__ */ jsx("span", {
+										className: "font-mono",
+										children: " default_admin"
+									}),
+									" RLS policies, beyond the resources listed here."
+								]
+							})]
+						}), selectedKey.permissions.length === 0 ? /* @__PURE__ */ jsx(Typography, {
+							variant: "body2",
+							color: "disabled",
+							children: "No permissions configured"
+						}) : /* @__PURE__ */ jsx("div", {
+							className: "space-y-2",
+							children: selectedKey.permissions.map((perm, idx) => /* @__PURE__ */ jsxs("div", {
+								className: cls("flex items-center gap-3 px-3 py-2 rounded-lg border", defaultBorderMixin),
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex-1 min-w-0",
+									children: [/* @__PURE__ */ jsx(Typography, {
+										variant: "body2",
+										className: "text-[13px] font-medium truncate",
+										children: resourceLabel(perm.collection)
+									}), /* @__PURE__ */ jsx(Typography, {
+										variant: "caption",
+										color: "secondary",
+										className: "text-[11px]",
+										children: resourcePhrase(perm.collection)
+									})]
+								}), /* @__PURE__ */ jsx("div", {
+									className: "flex items-center gap-1 shrink-0",
+									children: perm.operations.map((op) => /* @__PURE__ */ jsx(Chip, {
+										size: "smallest",
+										className: cls(op === "read" && "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300", op === "write" && "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300", op === "delete" && "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300"),
+										children: op
+									}, op))
+								})]
+							}, idx))
+						})]
+					})
+				] })
+			})]
+		}),
+		/* @__PURE__ */ jsxs(Dialog, {
+			open: confirmRevoke !== null,
+			onOpenChange: (open) => {
+				if (!open && !revoking) setConfirmRevoke(null);
+			},
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					hidden: true,
+					children: "Revoke Confirmation"
+				}),
+				/* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(Typography, {
+					variant: "subtitle1",
+					className: "font-semibold mb-2",
+					children: [
+						"Revoke \"",
+						confirmRevoke?.name,
+						"\"?"
+					]
+				}), /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					color: "secondary",
+					children: "Requests authenticated with this key will stop working immediately. This action cannot be undone."
+				})] }),
+				/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					onClick: () => setConfirmRevoke(null),
+					disabled: revoking !== null,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					color: "error",
+					disabled: revoking !== null,
+					startIcon: revoking !== null ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsx(Trash2Icon, { size: iconSize.smallest }),
+					onClick: async () => {
+						if (!confirmRevoke) return;
+						await handleRevoke(confirmRevoke.id);
+						setConfirmRevoke(null);
+					},
+					children: "Revoke"
+				})] })
+			]
+		}),
+		showCreate && /* @__PURE__ */ jsx(CreateApiKeyDialog, {
+			onClose: () => setShowCreate(false),
+			onCreated: handleCreated
+		}),
+		showSecret && /* @__PURE__ */ jsx(SecretDisplayDialog, {
+			keyWithSecret: showSecret,
+			onClose: () => setShowSecret(null)
+		})
+	] });
+}
+/**
+* Marks a key that carries the admin role.
+*
+* Not cosmetic: an admin key reaches the admin routes and the `default_admin`
+* RLS policies, and without this it is indistinguishable in the list from a
+* read-only one.
+*/
+function AdminChip() {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: "Carries the admin role: the admin-gated routes and the default_admin RLS policies",
+		children: /* @__PURE__ */ jsxs(Chip, {
+			size: "smallest",
+			className: "shrink-0 bg-amber-500/12 dark:bg-amber-500/12 text-amber-700 dark:text-amber-300 border-amber-500/30 dark:border-amber-500/30",
+			children: [/* @__PURE__ */ jsx(ShieldIcon, { size: 10 }), "admin"]
+		})
+	});
+}
+function KeyListItem({ apiKey, selected, onClick }) {
+	const status = keyStatus(apiKey);
+	return /* @__PURE__ */ jsxs("div", {
+		onClick,
+		className: cls("flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-all", selected ? "bg-primary/10 dark:bg-primary/15 ring-1 ring-primary/30" : "hover:bg-surface-100 dark:hover:bg-surface-950"),
+		children: [
+			/* @__PURE__ */ jsx("div", { className: cls("w-2 h-2 rounded-full shrink-0", status.label === "Active" ? "bg-emerald-400" : status.label === "Expired" ? "bg-amber-400" : "bg-red-400") }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5 min-w-0",
+					children: [/* @__PURE__ */ jsx(Typography, {
+						variant: "body2",
+						className: "truncate font-medium text-[13px]",
+						children: apiKey.name
+					}), apiKey.admin && /* @__PURE__ */ jsx(AdminChip, {})]
+				}), /* @__PURE__ */ jsxs(Typography, {
+					variant: "caption",
+					color: "secondary",
+					className: "truncate text-[11px] font-mono",
+					children: [apiKey.key_prefix, "•••"]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				children: /* @__PURE__ */ jsx(Typography, {
+					variant: "caption",
+					color: "disabled",
+					className: "text-[10px]",
+					children: permissionSummary(apiKey.permissions)
+				})
+			})
+		]
+	});
+}
+function StatCard({ label, value, mono, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("px-3 py-2 rounded-lg border bg-white dark:bg-surface-900", defaultBorderMixin),
+		children: [/* @__PURE__ */ jsx(Typography, {
+			variant: "caption",
+			color: "secondary",
+			className: "text-[10px] uppercase tracking-wider font-medium",
+			children: label
+		}), /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			className: cls("mt-0.5 font-semibold text-[13px]", mono && "font-mono", className),
+			children: value
+		})]
+	});
+}
+function SecretDisplayDialog({ keyWithSecret, onClose }) {
+	const snackbar = useSnackbarController();
+	const [copied, setCopied] = useState(false);
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(keyWithSecret.key);
+			setCopied(true);
+			snackbar.open({
+				type: "success",
+				message: "API key copied to clipboard"
+			});
+			setTimeout(() => setCopied(false), 2e3);
+		} catch {
+			snackbar.open({
+				type: "error",
+				message: "Failed to copy"
+			});
+		}
+	};
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open: true,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		maxWidth: "md",
+		children: [
+			/* @__PURE__ */ jsx(DialogTitle, { children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(CheckCircleIcon, {
+					size: iconSize.small,
+					className: "text-emerald-500"
+				}), "API Key Created"]
+			}) }),
+			/* @__PURE__ */ jsxs(DialogContent, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800/50 mb-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 mb-1",
+						children: [/* @__PURE__ */ jsx(AlertCircleIcon, {
+							size: iconSize.smallest,
+							className: "text-amber-600 dark:text-amber-400"
+						}), /* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							className: "font-semibold text-amber-700 dark:text-amber-400",
+							children: "Copy your key now — it won't be shown again"
+						})]
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						className: "text-amber-600 dark:text-amber-300",
+						children: "This is the only time the full API key will be displayed. Store it securely."
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cls("flex items-center gap-2 p-3 rounded-lg border bg-surface-50 dark:bg-surface-900", defaultBorderMixin),
+					children: [/* @__PURE__ */ jsx("code", {
+						className: "flex-1 text-[12px] font-mono break-all text-surface-700 dark:text-surface-300 select-all",
+						children: keyWithSecret.key
+					}), /* @__PURE__ */ jsx(Tooltip, {
+						title: copied ? "Copied!" : "Copy",
+						children: /* @__PURE__ */ jsx(IconButton, {
+							size: "small",
+							onClick: handleCopy,
+							children: copied ? /* @__PURE__ */ jsx(CheckCircleIcon, {
+								size: iconSize.smallest,
+								className: "text-emerald-500"
+							}) : /* @__PURE__ */ jsx(CopyIcon, { size: iconSize.smallest })
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-4 space-y-1",
+					children: [
+						/* @__PURE__ */ jsxs(Typography, {
+							variant: "caption",
+							color: "secondary",
+							children: [
+								/* @__PURE__ */ jsx("strong", { children: "Name:" }),
+								" ",
+								keyWithSecret.name
+							]
+						}),
+						/* @__PURE__ */ jsxs(Typography, {
+							variant: "caption",
+							color: "secondary",
+							children: [
+								/* @__PURE__ */ jsx("strong", { children: "Access:" }),
+								" ",
+								permissionSummary(keyWithSecret.permissions)
+							]
+						}),
+						keyWithSecret.admin && /* @__PURE__ */ jsxs(Typography, {
+							variant: "caption",
+							className: "flex items-center gap-1.5 text-amber-700 dark:text-amber-300",
+							children: [/* @__PURE__ */ jsx(ShieldIcon, {
+								size: iconSize.smallest,
+								className: "shrink-0"
+							}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("strong", { children: "Admin role granted" }), " — the admin routes and the default_admin policies"] })]
+						})
+					]
+				})
+			] }),
+			/* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, {
+				color: "primary",
+				onClick: onClose,
+				children: "Done"
+			}) })
+		]
+	});
+}
+//#endregion
+export { ApiKeysView };
+
+//# sourceMappingURL=ApiKeysView-DiCurTEU.js.map