@rebasepro/studio 0.6.1 → 0.8.0

package/dist/ApiKeysView-D-_FSlNL.js

@@ -0,0 +1,684 @@
+import { useRebaseClient, useSnackbarController } from "@rebasepro/core";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AlertCircleIcon, Button, CheckCircleIcon, Checkbox, Chip, CircularProgress, CopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, KeyRoundIcon, PlusIcon, RefreshCwIcon, Select, SelectItem, TextField, Tooltip, Trash2Icon, Typography, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#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 permissionSummary(perms) {
+	if (perms.length === 0) return "No permissions";
+	const wildcard = perms.find((p) => p.collection === "*");
+	if (wildcard) return `All collections (${wildcard.operations.join(", ")})`;
+	if (perms.length === 1) return `${perms[0].collection} (${perms[0].operations.join(", ")})`;
+	return `${perms.length} collections`;
+}
+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 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 {
+			setKeys((await c.apiKeys.listKeys()).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__ */ jsx(Typography, {
+									variant: "subtitle1",
+									className: "font-semibold truncate",
+									children: selectedKey.name
+								}), /* @__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: () => handleRevoke(selectedKey.id),
+								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 gap-3 mt-3",
+							children: [/* @__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__ */ jsx("div", {
+						className: "flex-1 overflow-y-auto px-5 py-3",
+						children: 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__ */ jsx(Typography, {
+									variant: "body2",
+									className: "font-mono text-[13px] font-medium flex-1",
+									children: perm.collection === "*" ? "* (all collections)" : perm.collection
+								}), /* @__PURE__ */ jsx("div", {
+									className: "flex items-center gap-1",
+									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))
+						})
+					})
+				] })
+			})]
+		}),
+		showCreate && /* @__PURE__ */ jsx(CreateApiKeyDialog, {
+			onClose: () => setShowCreate(false),
+			onCreated: handleCreated
+		}),
+		showSecret && /* @__PURE__ */ jsx(SecretDisplayDialog, {
+			keyWithSecret: showSecret,
+			onClose: () => setShowSecret(null)
+		})
+	] });
+}
+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__ */ jsx(Typography, {
+					variant: "body2",
+					className: "truncate font-medium text-[13px]",
+					children: apiKey.name
+				}), /* @__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 CreateApiKeyDialog({ onClose, onCreated }) {
+	const client = useRebaseClient();
+	const snackbar = useSnackbarController();
+	const [name, setName] = useState("");
+	const [permissions, setPermissions] = useState([{
+		collection: "*",
+		read: true,
+		write: false,
+		delete: false
+	}]);
+	const [rateLimit, setRateLimit] = useState("");
+	const [expiresIn, setExpiresIn] = useState("never");
+	const [creating, setCreating] = useState(false);
+	const addRow = () => setPermissions([...permissions, {
+		collection: "",
+		read: true,
+		write: false,
+		delete: false
+	}]);
+	const removeRow = (idx) => setPermissions(permissions.filter((_, i) => i !== idx));
+	const updateRow = (idx, field, value) => {
+		setPermissions(permissions.map((row, i) => i === idx ? {
+			...row,
+			[field]: value
+		} : row));
+	};
+	const handleCreate = async () => {
+		if (!client?.apiKeys || !name.trim()) return;
+		const apiPerms = permissions.filter((r) => r.collection.trim()).map((r) => ({
+			collection: r.collection.trim(),
+			operations: [
+				...r.read ? ["read"] : [],
+				...r.write ? ["write"] : [],
+				...r.delete ? ["delete"] : []
+			]
+		})).filter((p) => p.operations.length > 0);
+		if (apiPerms.length === 0) {
+			snackbar.open({
+				type: "error",
+				message: "At least one permission is required"
+			});
+			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: apiPerms,
+				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);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open: true,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		maxWidth: "lg",
+		children: [
+			/* @__PURE__ */ jsx(DialogTitle, { children: "Create API Key" }),
+			/* @__PURE__ */ jsxs(DialogContent, {
+				className: "space-y-4",
+				children: [
+					/* @__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(Typography, {
+							variant: "caption",
+							color: "secondary",
+							className: "text-[11px] uppercase tracking-wider font-medium mb-2 block",
+							children: "Permissions"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "space-y-2",
+							children: permissions.map((row, idx) => /* @__PURE__ */ jsxs("div", {
+								className: cls("flex items-center gap-2 p-2 rounded-lg border", defaultBorderMixin),
+								children: [
+									/* @__PURE__ */ jsx(TextField, {
+										size: "small",
+										value: row.collection,
+										onChange: (e) => updateRow(idx, "collection", e.target.value),
+										placeholder: "Collection slug or *",
+										className: "flex-1"
+									}),
+									/* @__PURE__ */ jsxs("label", {
+										className: "flex items-center gap-1 text-xs cursor-pointer",
+										children: [/* @__PURE__ */ jsx(Checkbox, {
+											size: "small",
+											checked: row.read,
+											onCheckedChange: (v) => updateRow(idx, "read", !!v)
+										}), /* @__PURE__ */ jsx("span", {
+											className: "text-emerald-600 dark:text-emerald-400",
+											children: "read"
+										})]
+									}),
+									/* @__PURE__ */ jsxs("label", {
+										className: "flex items-center gap-1 text-xs cursor-pointer",
+										children: [/* @__PURE__ */ jsx(Checkbox, {
+											size: "small",
+											checked: row.write,
+											onCheckedChange: (v) => updateRow(idx, "write", !!v)
+										}), /* @__PURE__ */ jsx("span", {
+											className: "text-blue-600 dark:text-blue-400",
+											children: "write"
+										})]
+									}),
+									/* @__PURE__ */ jsxs("label", {
+										className: "flex items-center gap-1 text-xs cursor-pointer",
+										children: [/* @__PURE__ */ jsx(Checkbox, {
+											size: "small",
+											checked: row.delete,
+											onCheckedChange: (v) => updateRow(idx, "delete", !!v)
+										}), /* @__PURE__ */ jsx("span", {
+											className: "text-red-600 dark:text-red-400",
+											children: "delete"
+										})]
+									}),
+									permissions.length > 1 && /* @__PURE__ */ jsx(IconButton, {
+										size: "small",
+										onClick: () => removeRow(idx),
+										children: /* @__PURE__ */ jsx(Trash2Icon, { size: iconSize.smallest })
+									})
+								]
+							}, idx))
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							size: "small",
+							variant: "text",
+							onClick: addRow,
+							className: "mt-1",
+							startIcon: /* @__PURE__ */ jsx(PlusIcon, { size: iconSize.smallest }),
+							children: "Add collection"
+						})
+					] }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-4",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "flex-1",
+							children: /* @__PURE__ */ jsxs(Select, {
+								label: "Expires",
+								value: expiresIn,
+								onValueChange: setExpiresIn,
+								size: "small",
+								renderValue: (v) => v === "never" ? "Never" : v === "7d" ? "7 days" : v === "30d" ? "30 days" : v === "90d" ? "90 days" : "1 year",
+								children: [
+									/* @__PURE__ */ jsx(SelectItem, {
+										value: "never",
+										children: "Never"
+									}),
+									/* @__PURE__ */ jsx(SelectItem, {
+										value: "7d",
+										children: "7 days"
+									}),
+									/* @__PURE__ */ jsx(SelectItem, {
+										value: "30d",
+										children: "30 days"
+									}),
+									/* @__PURE__ */ jsx(SelectItem, {
+										value: "90d",
+										children: "90 days"
+									}),
+									/* @__PURE__ */ jsx(SelectItem, {
+										value: "1y",
+										children: "1 year"
+									})
+								]
+							})
+						}), /* @__PURE__ */ jsx("div", {
+							className: "flex-1",
+							children: /* @__PURE__ */ jsx(TextField, {
+								label: "Rate Limit (per 15 min)",
+								value: rateLimit,
+								onChange: (e) => setRateLimit(e.target.value.replace(/\D/g, "")),
+								placeholder: "Default: 1000",
+								size: "small"
+							})
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onClick: onClose,
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				color: "primary",
+				onClick: handleCreate,
+				disabled: creating || !name.trim(),
+				startIcon: creating ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : void 0,
+				children: "Create Key"
+			})] })
+		]
+	});
+}
+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: "Permissions:" }),
+							" ",
+							permissionSummary(keyWithSecret.permissions)
+						]
+					})]
+				})
+			] }),
+			/* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, {
+				color: "primary",
+				onClick: onClose,
+				children: "Done"
+			}) })
+		]
+	});
+}
+//#endregion
+export { ApiKeysView };
+
+//# sourceMappingURL=ApiKeysView-D-_FSlNL.js.map