@rebasepro/studio 0.23.0 → 0.24.0

package/dist/ApiKeysView-B66TdzhH.js

@@ -0,0 +1,1738 @@
+import { t as classifyLoadFailure } from "./load-failure-Bd8lFIO7.js";
+import { t as LoadFailureView } from "./load-failure-view-CBTB_h-h.js";
+import { useApiBase, useApiConfig, useRebaseClient, useSnackbarController, useStorageSources, useStudioCollectionRegistry, useTranslation } from "@rebasepro/app";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Alert, AlertCircleIcon, Button, CheckCircleIcon, Checkbox, Chip, CircularProgress, CopyIcon, DatabaseIcon, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, KeyRoundIcon, Label, MultiSelect, MultiSelectItem, PlusIcon, RefreshCwIcon, Select, SelectItem, ShieldIcon, Tab, Tabs, TagIcon, TextField, Tooltip, Trash2Icon, Typography, WrenchIcon, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ADMIN_ROLE, DEFAULT_STORAGE_SOURCE_KEY, KEY_MANAGEMENT_SCOPES, describeScope, hasAdminRole, isAdminScope, isBuiltInScope, isDataPlaneScope, parseScope, scopeGrantsAny, scopeTargets, summarizeScopes } from "@rebasepro/types";
+//#region src/components/ApiKeys/scopes.ts
+/**
+* The pure half of the API-key panel: reading a key's scopes back as groups a
+* person can scan, and turning the create dialog's picker into the scope list
+* the server mints.
+*
+* The vocabulary itself — what a scope is, which ones take a target, which
+* plane each belongs to — is `@rebasepro/types`' `scopes.ts`, the same module
+* the server enforces with. Nothing here re-derives it; this file only shapes
+* it for the screen, so it can be tested without rendering one.
+*
+* @module
+*/
+/** The planes in the order the panel shows them. */
+var SCOPE_PLANES = [
+	"data",
+	"admin",
+	"app"
+];
+function planeOf(scope) {
+	if (isDataPlaneScope(scope)) return "data";
+	if (isAdminScope(scope)) return "admin";
+	return "app";
+}
+/**
+* A key's scopes, grouped by plane and folded per scope: `data:read:posts` and
+* `data:read:authors` read as one "Read data" row narrowed to two collections,
+* and `data:read` beside them as the same row on every collection.
+*
+* Ordered the way the catalogue lists scopes; a scope the catalogue does not
+* know (an app scope removed since the key was minted) keeps its raw name and
+* lands at the end of the plane it would belong to.
+*/
+function groupKeyScopes(scopes, catalogue = summarizeScopes()) {
+	const bases = [];
+	for (const entry of scopes) {
+		const base = parseScope(entry)?.scope ?? entry;
+		if (!bases.includes(base)) bases.push(base);
+	}
+	const position = (base) => {
+		const index = catalogue.findIndex((summary) => summary.scope === base);
+		return index < 0 ? catalogue.length + bases.indexOf(base) : index;
+	};
+	bases.sort((a, b) => position(a) - position(b));
+	const held = bases.map((base) => {
+		const summary = catalogue.find((entry) => entry.scope === base);
+		const parsed = parseScope(base);
+		const fallback = describeScope(base);
+		return {
+			scope: base,
+			label: summary?.label ?? fallback.label,
+			description: summary?.description ?? fallback.description,
+			plane: summary?.plane ?? planeOf(base),
+			...summary?.target ? { targetKind: summary.target } : {},
+			targets: parsed ? scopeTargets(scopes, base) : "all"
+		};
+	});
+	return SCOPE_PLANES.map((plane) => ({
+		plane,
+		scopes: held.filter((entry) => entry.plane === plane)
+	})).filter((group) => group.scopes.length > 0);
+}
+/** Never offered: a key that manages keys could mint its own successor. */
+function isKeyManagementScope(scope) {
+	return KEY_MANAGEMENT_SCOPES.includes(scope);
+}
+/**
+* The catalogue entries a caller may put on a key: the ones they hold, on at
+* least one target, minus key management. The server refuses anything else
+* (`SCOPE_EXCEEDS_CREATOR`, `KEY_MANAGEMENT_SCOPE`), so offering it would only
+* be a way to fail.
+*/
+function grantableScopes(catalogue, held) {
+	return catalogue.filter((summary) => !isKeyManagementScope(summary.scope) && scopeGrantsAny(held, summary.scope));
+}
+/** `data:read` on everything — the narrowest useful key, and what the dialog opens with. */
+function defaultSelection(grantable) {
+	return grantable.some((summary) => summary.scope === "data:read") ? { "data:read": { mode: "all" } } : {};
+}
+function cleanTargets(targets) {
+	const out = [];
+	for (const raw of targets) {
+		const target = raw.trim();
+		if (target && !/\s/.test(target) && !out.includes(target)) out.push(target);
+	}
+	return out;
+}
+/**
+* The scope strings a selection mints, in catalogue order when one is given.
+*
+* A scope on every target is sent unqualified; one narrowed to targets is sent
+* once per target. A scope narrowed to no target at all grants nothing and is
+* left out — {@link incompleteScopes} is how the dialog says so.
+*/
+function buildScopeList(selection, order = []) {
+	const chosen = Object.keys(selection);
+	const rank = (scope) => {
+		const index = order.indexOf(scope);
+		return index < 0 ? order.length + chosen.indexOf(scope) : index;
+	};
+	const out = [];
+	for (const scope of [...chosen].sort((a, b) => rank(a) - rank(b))) {
+		const choice = selection[scope];
+		if (choice.mode === "all") out.push(scope);
+		else for (const target of cleanTargets(choice.targets)) out.push(`${scope}:${target}`);
+	}
+	return out;
+}
+/** Scopes switched to "only some" with nothing chosen yet. */
+function incompleteScopes(selection) {
+	return Object.entries(selection).filter(([, choice]) => choice.mode === "some" && cleanTargets(choice.targets).length === 0).map(([scope]) => scope);
+}
+/** Free text in a target field: commas or whitespace separate entries. */
+function splitList(text) {
+	return cleanTargets(text.split(/[\s,]+/));
+}
+/**
+* The roles a service key runs as beside `service`: the picked ones, then any
+* typed ones, deduplicated. `service` itself is every service key's identity
+* already, so listing it adds nothing and is dropped, as the server does.
+*/
+function combineRoles(picked, typed) {
+	const out = [];
+	for (const role of [...picked, ...splitList(typed)]) {
+		const id = role.trim();
+		if (id && id !== "service" && !out.includes(id)) out.push(id);
+	}
+	return out;
+}
+var EXPIRY_CHOICES = [
+	"never",
+	"7d",
+	"30d",
+	"90d",
+	"1y"
+];
+var EXPIRY_DAYS = {
+	"7d": 7,
+	"30d": 30,
+	"90d": 90,
+	"1y": 365
+};
+function isExpiryChoice(value) {
+	return EXPIRY_CHOICES.includes(value);
+}
+/** The `expires_at` an expiry choice sends: an ISO instant, or null for never. */
+function expiresAtFor(choice, now = Date.now()) {
+	if (choice === "never") return null;
+	return new Date(now + EXPIRY_DAYS[choice] * 864e5).toISOString();
+}
+/** The `rate_limit` a rate-limit field sends: a positive integer, or null for the server default. */
+function rateLimitFrom(text) {
+	const digits = text.replace(/\D/g, "");
+	if (!digits) return null;
+	const value = parseInt(digits, 10);
+	return value >= 1 ? value : null;
+}
+/** The minting refusals the dialog names, beside the server's own message. */
+var KEY_ERROR_CODES = [
+	"INVALID_SCOPES",
+	"SCOPE_EXCEEDS_CREATOR",
+	"ROLE_EXCEEDS_CREATOR",
+	"UNKNOWN_SCOPE_TARGET",
+	"KEY_MANAGEMENT_SCOPE"
+];
+function codeOf(error) {
+	if (typeof error !== "object" || error === null || !("code" in error)) return null;
+	return typeof error.code === "string" ? error.code : null;
+}
+function isKeyErrorCode(code) {
+	return code !== null && KEY_ERROR_CODES.includes(code);
+}
+function readKeyError(error) {
+	const code = codeOf(error);
+	return {
+		code: isKeyErrorCode(code) ? code : null,
+		message: error instanceof Error ? error.message : String(error)
+	};
+}
+/** The backend answered `403 PERSONAL_KEYS_DISABLED`: the app has not switched them on. */
+function isPersonalKeysDisabled(error) {
+	return codeOf(error) === "PERSONAL_KEYS_DISABLED";
+}
+function isStringArray(value) {
+	return Array.isArray(value) && value.every((entry) => typeof entry === "string");
+}
+function isPlane(value) {
+	return value === "data" || value === "admin" || value === "app";
+}
+function readScopeSummary(value) {
+	if (typeof value !== "object" || value === null) return null;
+	if (!("scope" in value) || typeof value.scope !== "string") return null;
+	if (!("plane" in value) || !isPlane(value.plane)) return null;
+	const label = "label" in value && typeof value.label === "string" ? value.label : value.scope;
+	const description = "description" in value && typeof value.description === "string" ? value.description : "";
+	const target = "target" in value && typeof value.target === "string" ? value.target : void 0;
+	return {
+		scope: value.scope,
+		label,
+		description,
+		plane: value.plane,
+		...target ? { target } : {}
+	};
+}
+/**
+* Read `GET /auth/scopes`. Null for anything that is not that shape — a backend
+* older than scopes answers this route with something else, and offering a
+* picker built from it would offer scopes the server does not know.
+*/
+function readScopeListing(body) {
+	if (typeof body !== "object" || body === null) return null;
+	if (!("scopes" in body) || !Array.isArray(body.scopes)) return null;
+	if (!("held" in body) || !isStringArray(body.held)) return null;
+	const scopes = [];
+	for (const entry of body.scopes) {
+		const summary = readScopeSummary(entry);
+		if (summary) scopes.push(summary);
+	}
+	return {
+		scopes,
+		held: body.held
+	};
+}
+/** Function names out of `GET /functions` — `{ functions: [{ name }] }`. */
+function functionNamesFrom(body) {
+	if (typeof body !== "object" || body === null || !("functions" in body) || !Array.isArray(body.functions)) return [];
+	const names = [];
+	for (const entry of body.functions) if (typeof entry === "object" && entry !== null && "name" in entry && typeof entry.name === "string" && entry.name) names.push(entry.name);
+	return names;
+}
+//#endregion
+//#region src/components/ApiKeys/scope-words.ts
+/**
+* How the key panel words scopes: plane headings, "every collection", the
+* title over a minting refusal. One place, so the detail panel, the create
+* dialog and the secret confirmation cannot drift apart.
+*
+* Every string is a translation key. A built-in scope's label and description
+* are keys too, derived from the scope (`data:read` →
+* `studio_scope_data_read_label`); an app's own scopes are worded as the app
+* declared them, in the server's catalogue (`GET /auth/scopes`).
+*
+* @module
+*/
+/** `data:read` → `studio_scope_data_read_label`. */
+function scopeLabelKey(scope) {
+	return `studio_scope_${scope.replace(/[^a-z0-9]/g, "_")}_label`;
+}
+/** `data:read` → `studio_scope_data_read_description`. */
+function scopeDescriptionKey(scope) {
+	return `studio_scope_${scope.replace(/[^a-z0-9]/g, "_")}_description`;
+}
+/** The translation, or `fallback` when the catalogue has none — i18next answers a missing key with the key. */
+function translatedOr(t, key, fallback) {
+	const text = t(key);
+	return text && text !== key ? text : fallback;
+}
+/**
+* The catalogue in the panel's language. Built-in scopes are translated; an
+* app scope keeps the label its app declared, and a built-in scope this panel
+* has no key for (one the server added since) keeps the server's wording
+* rather than rendering blank or as a key.
+*/
+function localizeScopes(t, catalogue) {
+	return catalogue.map((summary) => isBuiltInScope(summary.scope) ? {
+		...summary,
+		label: translatedOr(t, scopeLabelKey(summary.scope), summary.label),
+		description: translatedOr(t, scopeDescriptionKey(summary.scope), summary.description)
+	} : summary);
+}
+function planeLabel(t, plane) {
+	switch (plane) {
+		case "data": return t("studio_api_keys_plane_data");
+		case "admin": return t("studio_api_keys_plane_admin");
+		case "app": return t("studio_api_keys_plane_app");
+	}
+}
+function planeHint(t, plane) {
+	switch (plane) {
+		case "data": return t("studio_api_keys_plane_data_hint");
+		case "admin": return t("studio_api_keys_plane_admin_hint");
+		case "app": return t("studio_api_keys_plane_app_hint");
+	}
+}
+/** "Every collection", "Every storage source", "Every function", "Any project". */
+function everyTargetLabel(t, targetKind) {
+	switch (targetKind) {
+		case "collection": return t("studio_api_keys_target_all_collection");
+		case "bucket": return t("studio_api_keys_target_all_bucket");
+		case "function": return t("studio_api_keys_target_all_function");
+		default: return t("studio_api_keys_target_all_other", { kind: targetKind });
+	}
+}
+/** One target as a person reads it: the default storage source is "Default bucket", not `(default)`. */
+function targetLabel(t, targetKind, target) {
+	if (targetKind === "bucket" && target === DEFAULT_STORAGE_SOURCE_KEY) return t("studio_api_keys_bucket_default");
+	return target;
+}
+/** A held scope as one line: "Read data — posts, authors", "Read data — every collection", "Read server logs". */
+function heldScopeLine(t, held) {
+	if (!held.targetKind && held.targets === "all") return held.label;
+	const reach = held.targets === "all" ? everyTargetLabel(t, held.targetKind ?? "") : held.targets.map((target) => targetLabel(t, held.targetKind, target)).join(", ");
+	return `${held.label} — ${reach}`;
+}
+/** The title over a refused create; the server's own message goes underneath. */
+function keyErrorTitle(t, code) {
+	switch (code) {
+		case "INVALID_SCOPES": return t("studio_api_keys_error_invalid_scopes");
+		case "SCOPE_EXCEEDS_CREATOR": return t("studio_api_keys_error_scope_exceeds_creator");
+		case "ROLE_EXCEEDS_CREATOR": return t("studio_api_keys_error_role_exceeds_creator");
+		case "UNKNOWN_SCOPE_TARGET": return t("studio_api_keys_error_unknown_scope_target");
+		case "KEY_MANAGEMENT_SCOPE": return t("studio_api_keys_error_key_management_scope");
+		case null: return t("studio_api_keys_error_generic");
+	}
+}
+//#endregion
+//#region src/components/ApiKeys/CreateApiKeyDialog.tsx
+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 PlaneIcon({ plane, className }) {
+	return /* @__PURE__ */ jsx(plane === "data" ? DatabaseIcon : plane === "admin" ? WrenchIcon : TagIcon, {
+		size: iconSize.smallest,
+		className
+	});
+}
+function ScopeRow({ summary, choice, reach, options, draft, onToggle, onChoice, onDraft, first, t }) {
+	const id = `api-key-scope-${summary.scope.replace(/[^a-z0-9-]/gi, "-")}`;
+	const targetKind = summary.target;
+	const pickable = reach === "all" ? options : reach.map((value) => ({
+		value,
+		label: value
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("flex flex-col gap-2 px-3 py-2.5", !first && cls("border-t", defaultBorderMixin)),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "-my-1.5 -ml-2 shrink-0",
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						id,
+						size: "small",
+						checked: !!choice,
+						onCheckedChange: onToggle
+					})
+				}),
+				/* @__PURE__ */ jsxs(Label, {
+					htmlFor: id,
+					className: "flex-1 min-w-0 cursor-pointer",
+					children: [/* @__PURE__ */ jsx(Typography, {
+						variant: "body2",
+						component: "span",
+						gutterBottom: false,
+						className: "block text-[13px] font-medium",
+						children: summary.label
+					}), summary.description && /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						component: "span",
+						color: "secondary",
+						gutterBottom: false,
+						className: "block text-2xs leading-snug font-normal",
+						children: summary.description
+					})]
+				}),
+				/* @__PURE__ */ jsx(Typography, {
+					variant: "caption",
+					color: "disabled",
+					gutterBottom: false,
+					className: "font-mono text-2xs shrink-0 pt-0.5",
+					children: summary.scope
+				})
+			]
+		}), choice && targetKind && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-2 pl-9",
+			children: [reach === "all" && /* @__PURE__ */ jsx("div", {
+				className: "w-52 shrink-0",
+				children: /* @__PURE__ */ jsxs(Select, {
+					size: "small",
+					fullWidth: true,
+					position: "popper",
+					value: choice.mode,
+					"aria-label": t("studio_api_keys_target_mode"),
+					onValueChange: (mode) => onChoice(mode === "all" ? { mode: "all" } : {
+						mode: "some",
+						targets: choice.mode === "some" ? choice.targets : []
+					}),
+					renderValue: (mode) => mode === "all" ? everyTargetLabel(t, targetKind) : t("studio_api_keys_target_some"),
+					children: [/* @__PURE__ */ jsx(SelectItem, {
+						value: "all",
+						children: everyTargetLabel(t, targetKind)
+					}), /* @__PURE__ */ jsx(SelectItem, {
+						value: "some",
+						children: t("studio_api_keys_target_some")
+					})]
+				})
+			}), choice.mode === "some" && (pickable && pickable.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "flex-1 min-w-[12rem]",
+				children: /* @__PURE__ */ jsx(MultiSelect, {
+					size: "small",
+					className: "w-full",
+					value: choice.targets,
+					placeholder: t("studio_api_keys_target_pick"),
+					onValueChange: (targets) => onChoice({
+						mode: "some",
+						targets
+					}),
+					children: pickable.map((option) => /* @__PURE__ */ jsx(MultiSelectItem, {
+						value: option.value,
+						children: option.label
+					}, option.value))
+				})
+			}) : /* @__PURE__ */ jsx(TextField, {
+				size: "small",
+				className: "flex-1 min-w-[12rem]",
+				"aria-label": t("studio_api_keys_target_typed_placeholder", { kind: targetKind }),
+				placeholder: t("studio_api_keys_target_typed_placeholder", { kind: targetKind }),
+				value: draft ?? (choice.mode === "some" ? choice.targets.join(", ") : ""),
+				onChange: (e) => {
+					onDraft(e.target.value);
+					onChoice({
+						mode: "some",
+						targets: splitList(e.target.value)
+					});
+				}
+			}))]
+		})]
+	});
+}
+function CreateApiKeyDialog({ kind, scopeListing, onRetryScopes, onClose, onCreated }) {
+	const client = useRebaseClient();
+	const { t } = useTranslation();
+	const collectionRegistry = useStudioCollectionRegistry();
+	const storageSources = useStorageSources();
+	const apiConfig = useApiConfig();
+	const apiBase = useApiBase();
+	const listing = scopeListing.status === "ready" ? scopeListing.listing : null;
+	/** Built-in scopes in the panel's language; app scopes as the app declared them. */
+	const catalogue = useMemo(() => listing ? localizeScopes(t, listing.scopes) : [], [listing, t]);
+	const grantable = useMemo(() => listing ? grantableScopes(catalogue, listing.held) : [], [listing, catalogue]);
+	const order = useMemo(() => catalogue.map((summary) => summary.scope), [catalogue]);
+	const [name, setName] = useState("");
+	/** Null until the person changes it: the default follows the catalogue once it arrives. */
+	const [chosen, setChosen] = useState(null);
+	const [drafts, setDrafts] = useState({});
+	const [pickedRoles, setPickedRoles] = useState([]);
+	const [typedRoles, setTypedRoles] = useState("");
+	const [roleOptions, setRoleOptions] = useState([]);
+	const [rolesUnavailable, setRolesUnavailable] = useState(false);
+	const [rateLimit, setRateLimit] = useState("");
+	const [expiry, setExpiry] = useState("never");
+	const [creating, setCreating] = useState(false);
+	const [error, setError] = useState(null);
+	const selection = chosen ?? defaultSelection(grantable);
+	const collections = useMemo(() => (collectionRegistry?.collections ?? []).map((col) => col.slug).filter((slug) => !!slug).sort((a, b) => a.localeCompare(b)), [collectionRegistry?.collections]);
+	const buckets = useMemo(() => {
+		const keys = Object.keys(storageSources.sources);
+		if (!keys.includes(DEFAULT_STORAGE_SOURCE_KEY)) keys.unshift(DEFAULT_STORAGE_SOURCE_KEY);
+		return keys.map((key) => ({
+			value: key,
+			label: storageSources.registry[key]?.label ?? (key === DEFAULT_STORAGE_SOURCE_KEY ? t("studio_api_keys_bucket_default") : key)
+		}));
+	}, [
+		storageSources.sources,
+		storageSources.registry,
+		t
+	]);
+	/**
+	* Served functions, so a key can be narrowed to one by name. Best-effort:
+	* a backend that serves none, or refuses the index, leaves the free-text
+	* field — and the server refuses a name it does not serve.
+	*/
+	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 names = functionNamesFrom(await res.json());
+				if (!cancelled) setFunctionNames(names);
+			} catch {}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [apiBase, apiConfig]);
+	const optionsFor = (summary) => {
+		switch (summary.target) {
+			case "collection": return collections.map((slug) => ({
+				value: slug,
+				label: slug
+			}));
+			case "bucket": return buckets;
+			case "function": return functionNames.map((fn) => ({
+				value: fn,
+				label: `${fn}()`
+			}));
+			default: return null;
+		}
+	};
+	useEffect(() => {
+		if (kind !== "service") return;
+		const admin = client?.admin;
+		if (!admin) {
+			setRolesUnavailable(true);
+			return;
+		}
+		let cancelled = false;
+		admin.listRoles().then((res) => {
+			if (!cancelled) setRoleOptions(res.roles);
+		}).catch(() => {
+			if (!cancelled) setRolesUnavailable(true);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [client, kind]);
+	const toggle = (summary, on) => {
+		setChosen((current) => {
+			const next = { ...current ?? defaultSelection(grantable) };
+			if (!on) {
+				delete next[summary.scope];
+				return next;
+			}
+			const reach = listing ? scopeTargets(listing.held, summary.scope) : "all";
+			next[summary.scope] = reach === "all" ? { mode: "all" } : {
+				mode: "some",
+				targets: []
+			};
+			return next;
+		});
+	};
+	const setChoice = (scope, choice) => {
+		setChosen((current) => ({
+			...current ?? defaultSelection(grantable),
+			[scope]: choice
+		}));
+	};
+	const scopes = buildScopeList(selection, order);
+	const incomplete = incompleteScopes(selection);
+	const roles = kind === "service" ? combineRoles(pickedRoles, typedRoles) : [];
+	const runsAsAdmin = hasAdminRole(roles);
+	const granted = groupKeyScopes(scopes, catalogue);
+	const labelOf = (scope) => catalogue.find((summary) => summary.scope === scope)?.label ?? scope;
+	const canSubmit = !!listing && !!name.trim() && scopes.length > 0 && incomplete.length === 0 && !creating;
+	const submitBlockedReason = !name.trim() ? t("studio_api_keys_block_name") : scopes.length === 0 ? t("studio_api_keys_block_scopes") : incomplete.length > 0 ? t("studio_api_keys_block_targets") : "";
+	const handleCreate = async () => {
+		if (!canSubmit || !client) return;
+		setCreating(true);
+		setError(null);
+		try {
+			const expires_at = expiresAtFor(expiry);
+			const created = kind === "service" ? await client.apiKeys?.createKey({
+				name: name.trim(),
+				scopes,
+				roles,
+				rate_limit: rateLimitFrom(rateLimit),
+				expires_at
+			}) : await client.personalKeys?.createKey({
+				name: name.trim(),
+				scopes,
+				expires_at
+			});
+			if (!created) {
+				setError({
+					code: null,
+					message: t("studio_api_keys_unsupported")
+				});
+				return;
+			}
+			onCreated(created.key);
+		} catch (e) {
+			setError(readKeyError(e));
+		} finally {
+			setCreating(false);
+		}
+	};
+	const planes = SCOPE_PLANES.map((plane) => ({
+		plane,
+		scopes: grantable.filter((summary) => summary.plane === plane)
+	})).filter((group) => group.scopes.length > 0);
+	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: kind === "service" ? t("studio_api_keys_create_title") : t("studio_api_keys_create_personal_title")
+			}),
+			/* @__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: kind === "service" ? t("studio_api_keys_create_intro") : t("studio_api_keys_create_personal_intro")
+					}),
+					/* @__PURE__ */ jsx(TextField, {
+						label: t("studio_api_keys_field_name"),
+						value: name,
+						onChange: (e) => setName(e.target.value),
+						placeholder: t("studio_api_keys_field_name_placeholder"),
+						size: "small",
+						autoFocus: true
+					}),
+					/* @__PURE__ */ jsxs("div", { children: [
+						/* @__PURE__ */ jsx(SectionLabel, {
+							hint: t("studio_api_keys_section_scopes_hint"),
+							children: t("studio_api_keys_scopes")
+						}),
+						scopeListing.status === "loading" && /* @__PURE__ */ jsx("div", {
+							className: "flex justify-center py-6",
+							children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" })
+						}),
+						scopeListing.status === "failed" && /* @__PURE__ */ jsxs(Alert, {
+							color: "error",
+							size: "small",
+							action: /* @__PURE__ */ jsx(Button, {
+								size: "small",
+								variant: "text",
+								onClick: onRetryScopes,
+								children: t("retry")
+							}),
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "body2",
+								gutterBottom: false,
+								className: "font-medium",
+								children: t("studio_api_keys_scopes_read_failed")
+							}), scopeListing.message && /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								gutterBottom: false,
+								className: "block font-mono break-all",
+								children: scopeListing.message
+							})]
+						}),
+						listing && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-4",
+							children: [planes.map(({ plane, scopes: offered }) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2 mb-1.5",
+								children: [
+									/* @__PURE__ */ jsx(PlaneIcon, {
+										plane,
+										className: "text-surface-500 dark:text-surface-400"
+									}),
+									/* @__PURE__ */ jsx(Typography, {
+										variant: "body2",
+										gutterBottom: false,
+										className: "text-[13px] font-medium",
+										children: planeLabel(t, plane)
+									}),
+									/* @__PURE__ */ jsx(Typography, {
+										variant: "caption",
+										color: "secondary",
+										gutterBottom: false,
+										className: "text-2xs truncate",
+										children: planeHint(t, plane)
+									})
+								]
+							}), /* @__PURE__ */ jsx("div", {
+								className: cls("rounded-lg border overflow-hidden", defaultBorderMixin),
+								children: offered.map((summary, index) => /* @__PURE__ */ jsx(ScopeRow, {
+									summary,
+									choice: selection[summary.scope],
+									reach: scopeTargets(listing.held, summary.scope),
+									options: optionsFor(summary),
+									draft: drafts[summary.scope],
+									onToggle: (on) => toggle(summary, on),
+									onChoice: (choice) => setChoice(summary.scope, choice),
+									onDraft: (text) => setDrafts((current) => ({
+										...current,
+										[summary.scope]: text
+									})),
+									first: index === 0,
+									t
+								}, summary.scope))
+							})] }, plane)), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								color: "secondary",
+								gutterBottom: false,
+								className: "text-2xs leading-snug max-w-[70ch]",
+								children: t("studio_api_keys_scopes_offered_note")
+							})]
+						})
+					] }),
+					kind === "service" && /* @__PURE__ */ jsxs("div", { children: [
+						/* @__PURE__ */ jsx(SectionLabel, {
+							hint: t("studio_api_keys_roles_rows_hint"),
+							children: t("studio_api_keys_roles")
+						}),
+						/* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							color: "secondary",
+							gutterBottom: false,
+							className: "block mb-3 text-2xs leading-snug max-w-[70ch]",
+							children: t("studio_api_keys_roles_explainer")
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-1 sm:grid-cols-2 gap-3 items-start",
+							children: [roleOptions.length > 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MultiSelect, {
+								size: "small",
+								className: "w-full",
+								label: t("roles"),
+								value: pickedRoles,
+								onValueChange: setPickedRoles,
+								children: roleOptions.map((role) => /* @__PURE__ */ jsx(MultiSelectItem, {
+									value: role.id,
+									children: role.name === role.id ? role.id : `${role.name} (${role.id})`
+								}, role.id))
+							}) }), /* @__PURE__ */ jsx(TextField, {
+								size: "small",
+								label: t("studio_api_keys_roles_other"),
+								placeholder: t("studio_api_keys_roles_other_placeholder"),
+								value: typedRoles,
+								onChange: (e) => setTypedRoles(e.target.value)
+							})]
+						}),
+						rolesUnavailable && /* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							color: "secondary",
+							gutterBottom: false,
+							className: "block mt-1.5 text-2xs",
+							children: t("studio_api_keys_roles_unavailable")
+						}),
+						runsAsAdmin && /* @__PURE__ */ jsx(Alert, {
+							color: "warning",
+							size: "small",
+							outerClassName: "mt-3",
+							children: t("studio_api_keys_roles_admin_warning")
+						})
+					] }),
+					/* @__PURE__ */ jsxs("div", { children: [
+						/* @__PURE__ */ jsx(SectionLabel, { children: t("studio_api_keys_section_limits") }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-1 sm:grid-cols-2 gap-3 items-end",
+							children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Select, {
+								label: t("studio_api_keys_stat_expires"),
+								value: expiry,
+								onValueChange: (value) => {
+									if (isExpiryChoice(value)) setExpiry(value);
+								},
+								size: "small",
+								fullWidth: true,
+								position: "popper",
+								renderValue: (value) => expiryLabel(t, isExpiryChoice(value) ? value : "never"),
+								children: EXPIRY_CHOICES.map((choice) => /* @__PURE__ */ jsx(SelectItem, {
+									value: choice,
+									children: expiryLabel(t, choice)
+								}, choice))
+							}) }), kind === "service" && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Label, {
+								htmlFor: "api-key-rate-limit",
+								className: "block ml-3.5 mb-1 text-text-secondary dark:text-text-secondary-dark",
+								children: t("studio_api_keys_stat_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(Typography, {
+									variant: "caption",
+									color: "secondary",
+									component: "span",
+									gutterBottom: false,
+									className: "text-2xs whitespace-nowrap",
+									children: t("studio_api_keys_rate_limit_unit")
+								})
+							})] })]
+						}),
+						kind === "service" && /* @__PURE__ */ jsxs(Typography, {
+							variant: "caption",
+							color: "secondary",
+							gutterBottom: false,
+							className: "block mt-1.5 text-2xs",
+							children: [
+								t("studio_api_keys_rate_limit_hint"),
+								" ",
+								t("studio_api_keys_rate_limit_scope")
+							]
+						})
+					] }),
+					listing && /* @__PURE__ */ jsxs("div", {
+						className: cls("rounded-lg border px-3 py-2.5 bg-surface-field", 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: t("studio_api_keys_summary_title")
+							}),
+							granted.length === 0 ? /* @__PURE__ */ jsx(Typography, {
+								variant: "body2",
+								color: "secondary",
+								gutterBottom: false,
+								className: "mt-1.5 text-[13px]",
+								children: t("studio_api_keys_summary_empty")
+							}) : /* @__PURE__ */ jsxs("div", {
+								className: "mt-1.5 flex flex-col gap-1",
+								children: [granted.flatMap((group) => group.scopes.map((held) => /* @__PURE__ */ jsxs("div", {
+									className: "flex items-start gap-2",
+									children: [/* @__PURE__ */ jsx(PlaneIcon, {
+										plane: group.plane,
+										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: heldScopeLine(t, held)
+									})]
+								}, held.scope))), kind === "service" && roles.length > 0 && /* @__PURE__ */ jsxs("div", {
+									className: "flex items-start gap-2",
+									children: [/* @__PURE__ */ jsx(ShieldIcon, {
+										size: iconSize.smallest,
+										className: cls("mt-[3px] shrink-0", runsAsAdmin ? "text-amber-600 dark:text-amber-400" : "text-surface-500 dark:text-surface-400")
+									}), /* @__PURE__ */ jsx(Typography, {
+										variant: "body2",
+										gutterBottom: false,
+										className: "text-[13px] leading-snug",
+										children: t("studio_api_keys_summary_roles", { roles: ["service", ...roles].join(", ") })
+									})]
+								})]
+							}),
+							incomplete.length > 0 && /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								color: "secondary",
+								gutterBottom: false,
+								className: "block mt-2 text-2xs",
+								children: incomplete.map((scope) => t("studio_api_keys_target_missing", { scope: labelOf(scope) })).join(" ")
+							})
+						]
+					}),
+					error && /* @__PURE__ */ jsxs(Alert, {
+						color: "error",
+						size: "small",
+						children: [/* @__PURE__ */ jsx(Typography, {
+							variant: "body2",
+							gutterBottom: false,
+							className: "font-medium",
+							children: keyErrorTitle(t, error.code)
+						}), /* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							gutterBottom: false,
+							className: "block leading-snug",
+							children: error.message
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onClick: onClose,
+				disabled: creating,
+				children: t("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 ? t("studio_api_keys_creating") : t("studio_api_keys_create")
+				}) })
+			})] })
+		]
+	});
+}
+function expiryLabel(t, choice) {
+	switch (choice) {
+		case "never": return t("studio_api_keys_never");
+		case "7d": return t("studio_api_keys_expiry_7d");
+		case "30d": return t("studio_api_keys_expiry_30d");
+		case "90d": return t("studio_api_keys_expiry_90d");
+		case "1y": return t("studio_api_keys_expiry_1y");
+	}
+}
+//#endregion
+//#region src/components/ApiKeys/ApiKeysView.tsx
+/** Within a day, relative and in the panel's language; beyond it, the date. */
+function formatRelative(iso, language) {
+	if (!iso) return "—";
+	const date = new Date(iso);
+	const diff = date.getTime() - Date.now();
+	const abs = Math.abs(diff);
+	try {
+		if (abs >= 864e5) return date.toLocaleDateString(language);
+		const format = new Intl.RelativeTimeFormat(language, {
+			numeric: "auto",
+			style: "short"
+		});
+		if (abs < 36e5) return format.format(Math.round(diff / 6e4), "minute");
+		return format.format(Math.round(diff / 36e5), "hour");
+	} catch {
+		return date.toLocaleDateString();
+	}
+}
+function isExpired(key) {
+	return !!(key.expires_at && new Date(key.expires_at) < /* @__PURE__ */ new Date());
+}
+function keyStatus(key) {
+	if (key.revoked_at) return {
+		kind: "revoked",
+		color: "text-red-500"
+	};
+	if (isExpired(key)) return {
+		kind: "expired",
+		color: "text-amber-500"
+	};
+	return {
+		kind: "active",
+		color: "text-emerald-500"
+	};
+}
+function statusLabel(t, kind) {
+	switch (kind) {
+		case "active": return t("studio_api_keys_status_active");
+		case "expired": return t("studio_api_keys_status_expired");
+		case "revoked": return t("studio_api_keys_status_revoked");
+	}
+}
+/**
+* A service key that runs as `admin`: row-level security does not limit its
+* reads, writes or deletes, and it passes `admin` checks in functions and
+* storage. A personal key has no roles of its own.
+*/
+function runsAsAdmin(key) {
+	return key.kind === "service" && hasAdminRole(key.roles);
+}
+/** One short phrase for a list row: the one scope a key holds, or how many. */
+function scopeBrief(t, groups) {
+	const held = groups.flatMap((group) => group.scopes);
+	if (held.length === 0) return "—";
+	if (held.length === 1) return held[0].label;
+	return t("studio_api_keys_scopes_count", { count: held.length });
+}
+/**
+* The scope catalogue — every scope this backend knows, worded, and what the
+* signed-in account holds. The create dialog offers from it; the detail panel
+* labels a key's scopes with it, and falls back to the built-in wording while
+* it is loading or when this backend does not serve it.
+*/
+function useScopeListing(client) {
+	const [state, setState] = useState({ status: "loading" });
+	const [attempt, setAttempt] = useState(0);
+	useEffect(() => {
+		const api = client?.personalKeys;
+		if (!api) {
+			setState({
+				status: "failed",
+				message: ""
+			});
+			return;
+		}
+		let cancelled = false;
+		setState({ status: "loading" });
+		(async () => {
+			try {
+				const listing = readScopeListing(await api.listScopes());
+				if (!cancelled) setState(listing ? {
+					status: "ready",
+					listing
+				} : {
+					status: "failed",
+					message: ""
+				});
+			} catch (e) {
+				if (!cancelled) setState({
+					status: "failed",
+					message: e instanceof Error ? e.message : String(e)
+				});
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [client, attempt]);
+	return [state, useCallback(() => setAttempt((n) => n + 1), [])];
+}
+function ApiKeysView() {
+	const client = useRebaseClient();
+	const { t } = useTranslation();
+	const [kind, setKind] = useState("service");
+	const [scopeListing, retryScopes] = useScopeListing(client);
+	return /* @__PURE__ */ jsx(KeysPane, {
+		kind,
+		tabs: /* @__PURE__ */ jsxs(Tabs, {
+			value: kind,
+			onValueChange: (value) => setKind(value === "personal" ? "personal" : "service"),
+			variant: "boxy",
+			className: "border-b border-hairline",
+			children: [/* @__PURE__ */ jsx(Tab, {
+				value: "service",
+				children: t("studio_api_keys_tab_service")
+			}), /* @__PURE__ */ jsx(Tab, {
+				value: "personal",
+				children: t("studio_api_keys_tab_personal")
+			})]
+		}),
+		scopeListing,
+		onRetryScopes: retryScopes
+	}, kind);
+}
+function KeysPane({ kind, tabs, scopeListing, onRetryScopes }) {
+	const client = useRebaseClient();
+	const snackbar = useSnackbarController();
+	const { t } = useTranslation();
+	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);
+	/** Why the key listing failed, classified — see `load-failure.ts`. */
+	const [failure, setFailure] = useState(null);
+	/** The backend answered PERSONAL_KEYS_DISABLED: a setting, not a failure. */
+	const [personalOff, setPersonalOff] = useState(false);
+	const catalogue = useMemo(() => localizeScopes(t, scopeListing.status === "ready" ? scopeListing.listing.scopes : summarizeScopes()), [t, scopeListing]);
+	const clientRef = useRef(client);
+	clientRef.current = client;
+	const snackbarRef = useRef(snackbar);
+	snackbarRef.current = snackbar;
+	const keysApi = useCallback(() => {
+		const c = clientRef.current;
+		return kind === "service" ? c?.apiKeys : c?.personalKeys;
+	}, [kind]);
+	const loadKeys = useCallback(async () => {
+		const api = keysApi();
+		if (!api) {
+			setLoading(false);
+			return;
+		}
+		try {
+			const res = await api.listKeys();
+			setKeys(res.keys);
+			setFailure(null);
+			setPersonalOff(false);
+		} catch (e) {
+			if (kind === "personal" && isPersonalKeysDisabled(e)) {
+				setPersonalOff(true);
+				setFailure(null);
+			} else setFailure(classifyLoadFailure(e));
+		} finally {
+			setLoading(false);
+		}
+	}, [keysApi, kind]);
+	useEffect(() => {
+		loadKeys();
+	}, [loadKeys]);
+	const handleRevoke = async (id) => {
+		const api = keysApi();
+		if (!api) return;
+		setRevoking(id);
+		try {
+			await api.revokeKey(id);
+			snackbarRef.current.open({
+				type: "success",
+				message: t("studio_api_keys_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));
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex h-full w-full overflow-hidden bg-surface-card",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cls("flex flex-col w-[340px] min-w-[280px] border-r h-full", defaultBorderMixin),
+				children: [
+					tabs,
+					/* @__PURE__ */ jsxs("div", {
+						className: cls("flex items-center justify-between px-4 py-2.5 border-b bg-surface-sheet 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: t("studio_tool_api_keys")
+								}),
+								/* @__PURE__ */ jsx(Chip, {
+									size: "smallest",
+									className: "bg-surface-raised 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: t("studio_api_keys_refresh"),
+								children: /* @__PURE__ */ jsx(RefreshCwIcon, { size: iconSize.smallest })
+							}), /* @__PURE__ */ jsx(Button, {
+								size: "small",
+								color: "primary",
+								disabled: personalOff,
+								onClick: () => setShowCreate(true),
+								startIcon: /* @__PURE__ */ jsx(PlusIcon, { size: iconSize.smallest }),
+								children: t("studio_api_keys_new")
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex-1 overflow-y-auto p-2 space-y-1",
+						children: [
+							loading && /* @__PURE__ */ jsx("div", {
+								className: "flex items-center justify-center h-full",
+								children: /* @__PURE__ */ jsx(CircularProgress, {})
+							}),
+							!loading && failure && /* @__PURE__ */ jsx(LoadFailureView, {
+								failure,
+								title: kind === "service" ? t("studio_api_keys_read_failed") : t("studio_api_keys_personal_read_failed"),
+								deniedTitle: kind === "service" ? t("studio_api_keys_denied_title") : t("studio_api_keys_personal_denied_title"),
+								deniedHint: kind === "service" ? t("studio_api_keys_denied_hint") : t("studio_api_keys_personal_denied_hint"),
+								onRetry: loadKeys
+							}),
+							!loading && personalOff && /* @__PURE__ */ jsx(PersonalKeysOff, {}),
+							!loading && !failure && !personalOff && 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: kind === "service" ? t("studio_api_keys_empty_title") : t("studio_api_keys_personal_empty_title")
+									}),
+									/* @__PURE__ */ jsx(Typography, {
+										variant: "caption",
+										color: "disabled",
+										children: kind === "service" ? t("studio_api_keys_empty_hint") : t("studio_api_keys_personal_empty_hint")
+									})
+								]
+							}),
+							!loading && activeKeys.map((key) => /* @__PURE__ */ jsx(KeyListItem, {
+								apiKey: key,
+								catalogue,
+								selected: selectedId === key.id,
+								onClick: () => setSelectedId(key.id)
+							}, key.id)),
+							!loading && 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: t("studio_api_keys_inactive_heading")
+								})
+							}), inactiveKeys.map((key) => /* @__PURE__ */ jsx(KeyListItem, {
+								apiKey: key,
+								catalogue,
+								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: !personalOff && /* @__PURE__ */ jsx(Typography, {
+						variant: "body2",
+						color: "disabled",
+						children: t("studio_api_keys_select_hint")
+					})
+				}) : /* @__PURE__ */ jsx(KeyDetail, {
+					apiKey: selectedKey,
+					catalogue,
+					revoking: revoking === selectedKey.id,
+					onRevoke: () => setConfirmRevoke(selectedKey)
+				})
+			})]
+		}),
+		/* @__PURE__ */ jsxs(Dialog, {
+			open: confirmRevoke !== null,
+			onOpenChange: (open) => {
+				if (!open && !revoking) setConfirmRevoke(null);
+			},
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					hidden: true,
+					children: t("studio_api_keys_revoke_confirmation")
+				}),
+				/* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsx(Typography, {
+					variant: "subtitle1",
+					className: "font-semibold mb-2",
+					children: t("studio_api_keys_revoke_title", { name: confirmRevoke?.name ?? "" })
+				}), /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					color: "secondary",
+					children: t("studio_api_keys_revoke_body")
+				})] }),
+				/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					onClick: () => setConfirmRevoke(null),
+					disabled: revoking !== null,
+					children: t("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: t("studio_api_keys_revoke")
+				})] })
+			]
+		}),
+		showCreate && /* @__PURE__ */ jsx(CreateApiKeyDialog, {
+			kind,
+			scopeListing,
+			onRetryScopes,
+			onClose: () => setShowCreate(false),
+			onCreated: handleCreated
+		}),
+		showSecret && /* @__PURE__ */ jsx(SecretDisplayDialog, {
+			keyWithSecret: showSecret,
+			catalogue,
+			onClose: () => setShowSecret(null)
+		})
+	] });
+}
+/**
+* Not an error and not a refusal of this person: the app has not enabled
+* personal keys. Says what they are and where the switch is.
+*/
+function PersonalKeysOff() {
+	const { t } = useTranslation();
+	return /* @__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: t("studio_api_keys_personal_off_title")
+			}),
+			/* @__PURE__ */ jsx(Typography, {
+				variant: "caption",
+				color: "disabled",
+				className: "max-w-[34ch]",
+				children: t("studio_api_keys_personal_off_body")
+			}),
+			/* @__PURE__ */ jsx(Typography, {
+				variant: "mono",
+				component: "div",
+				className: "text-[11px] px-2 py-1 rounded-md bg-surface-field",
+				children: "auth: { personalKeys: true }"
+			})
+		]
+	});
+}
+/**
+* Marks a service key that runs as the admin role.
+*
+* Not cosmetic: such a key reads, changes and deletes every row its scopes
+* reach through the admin policies, and without this it is indistinguishable
+* in the list from a narrow one.
+*/
+function AdminChip() {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: t("studio_api_keys_admin_chip_tooltip"),
+		children: /* @__PURE__ */ jsx(Chip, {
+			size: "smallest",
+			colorScheme: "yellow",
+			className: "shrink-0",
+			icon: /* @__PURE__ */ jsx(ShieldIcon, { size: 10 }),
+			children: ADMIN_ROLE
+		})
+	});
+}
+function KeyListItem({ apiKey, catalogue, selected, onClick }) {
+	const { t } = useTranslation();
+	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-hover"),
+		children: [
+			/* @__PURE__ */ jsx("div", { className: cls("w-2 h-2 rounded-full shrink-0", status.kind === "active" ? "bg-emerald-400" : status.kind === "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
+					}), runsAsAdmin(apiKey) && /* @__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: scopeBrief(t, groupKeyScopes(apiKey.scopes, catalogue))
+				})
+			})
+		]
+	});
+}
+function KeyDetail({ apiKey, catalogue, revoking, onRevoke }) {
+	const { t, i18n } = useTranslation();
+	const language = i18n.language;
+	const status = keyStatus(apiKey);
+	const groups = groupKeyScopes(apiKey.scopes, catalogue);
+	const service = apiKey.kind === "service";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: cls("flex items-center justify-between px-5 py-3 border-b bg-surface-card 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: apiKey.name
+						}), runsAsAdmin(apiKey) && /* @__PURE__ */ jsx(AdminChip, {})]
+					}), /* @__PURE__ */ jsxs(Typography, {
+						variant: "caption",
+						color: "secondary",
+						className: "font-mono text-[11px]",
+						children: [apiKey.key_prefix, "•••"]
+					})]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2 shrink-0",
+				children: !apiKey.revoked_at && /* @__PURE__ */ jsx(Button, {
+					size: "small",
+					color: "error",
+					variant: "outlined",
+					onClick: onRevoke,
+					disabled: revoking,
+					startIcon: revoking ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsx(Trash2Icon, { size: iconSize.smallest }),
+					children: t("studio_api_keys_revoke")
+				})
+			})]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "px-5 py-4 bg-surface-sheet",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 md:grid-cols-4 gap-3",
+					children: [
+						/* @__PURE__ */ jsx(StatCard, {
+							label: t("studio_api_keys_stat_status"),
+							value: statusLabel(t, status.kind),
+							className: status.color
+						}),
+						/* @__PURE__ */ jsx(StatCard, {
+							label: t("created"),
+							value: formatRelative(apiKey.created_at, language)
+						}),
+						/* @__PURE__ */ jsx(StatCard, {
+							label: t("studio_api_keys_stat_last_used"),
+							value: formatRelative(apiKey.last_used_at, language)
+						}),
+						/* @__PURE__ */ jsx(StatCard, {
+							label: t("studio_api_keys_stat_expires"),
+							value: apiKey.expires_at ? formatRelative(apiKey.expires_at, language) : t("studio_api_keys_never")
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 md:grid-cols-3 gap-3 mt-3",
+					children: [
+						/* @__PURE__ */ jsx(StatCard, {
+							label: t("studio_api_keys_stat_kind"),
+							value: service ? t("studio_api_keys_kind_service") : t("studio_api_keys_kind_personal")
+						}),
+						/* @__PURE__ */ jsx(StatCard, {
+							label: t("studio_api_keys_stat_rate_limit"),
+							value: apiKey.rate_limit ? t("studio_api_keys_rate_limit_value", { limit: apiKey.rate_limit }) : t("studio_api_keys_rate_limit_default")
+						}),
+						service ? /* @__PURE__ */ jsx(StatCard, {
+							label: t("studio_api_keys_stat_created_by"),
+							value: apiKey.created_by,
+							mono: true
+						}) : /* @__PURE__ */ jsx(StatCard, {
+							label: t("studio_api_keys_stat_owner"),
+							value: apiKey.owner_uid ?? "—",
+							mono: true
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(Typography, {
+					variant: "caption",
+					color: "secondary",
+					className: "block mt-2 text-[11px] leading-snug",
+					children: t("studio_api_keys_rate_limit_scope")
+				})
+			]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: cls("flex items-center gap-2 px-5 py-2 border-y bg-surface-card", defaultBorderMixin),
+			children: [/* @__PURE__ */ jsx(Typography, {
+				variant: "subtitle2",
+				className: "font-semibold text-[13px]",
+				children: t("studio_api_keys_scopes")
+			}), /* @__PURE__ */ jsx(Chip, {
+				size: "smallest",
+				className: "bg-surface-raised text-surface-600 dark:text-surface-300",
+				children: apiKey.scopes.length
+			})]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex-1 overflow-y-auto px-5 py-3 flex flex-col gap-5",
+			children: [/* @__PURE__ */ jsx(RolesBlock, { apiKey }), groups.length === 0 ? /* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				color: "disabled",
+				children: t("studio_api_keys_no_scopes")
+			}) : groups.map((group) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(BlockHeading, {
+				icon: /* @__PURE__ */ jsx(PlaneIcon, {
+					plane: group.plane,
+					className: "text-surface-500 dark:text-surface-400"
+				}),
+				label: planeLabel(t, group.plane),
+				hint: planeHint(t, group.plane)
+			}), /* @__PURE__ */ jsx("div", {
+				className: "space-y-2",
+				children: group.scopes.map((held) => /* @__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__ */ jsxs("div", {
+							className: "flex items-baseline gap-2 min-w-0",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "body2",
+								className: "text-[13px] font-medium truncate",
+								children: held.label
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								color: "disabled",
+								className: "font-mono text-[11px] shrink-0",
+								children: held.scope
+							})]
+						}), held.description && /* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							color: "secondary",
+							className: "block text-[11px] leading-snug",
+							children: held.description
+						})]
+					}), held.targetKind && /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap justify-end gap-1 shrink-0 max-w-[50%]",
+						children: held.targets === "all" ? /* @__PURE__ */ jsx(Chip, {
+							size: "smallest",
+							className: "bg-surface-raised text-surface-600 dark:text-surface-300",
+							children: everyTargetLabel(t, held.targetKind)
+						}) : held.targets.map((target) => /* @__PURE__ */ jsx(Chip, {
+							size: "smallest",
+							className: "font-mono bg-surface-raised text-surface-700 dark:text-surface-200",
+							children: targetLabel(t, held.targetKind, target)
+						}, target))
+					})]
+				}, held.scope))
+			})] }, group.plane))]
+		})
+	] });
+}
+function BlockHeading({ icon, label, hint }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 mb-2 min-w-0",
+		children: [
+			icon,
+			/* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				className: "text-[13px] font-medium shrink-0",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Typography, {
+				variant: "caption",
+				color: "secondary",
+				className: "text-[11px] truncate",
+				children: hint
+			})
+		]
+	});
+}
+/**
+* Who the key runs as — which rows it reads. Scopes, below it, are which
+* endpoints it may call; the two are separate and both are shown.
+*/
+function RolesBlock({ apiKey }) {
+	const { t } = useTranslation();
+	const shield = /* @__PURE__ */ jsx(ShieldIcon, {
+		size: iconSize.smallest,
+		className: "text-surface-500 dark:text-surface-400"
+	});
+	if (apiKey.kind === "personal") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(BlockHeading, {
+		icon: shield,
+		label: t("studio_api_keys_roles"),
+		hint: t("studio_api_keys_roles_rows_hint")
+	}), /* @__PURE__ */ jsx(Typography, {
+		variant: "caption",
+		color: "secondary",
+		className: "block text-[12px] leading-snug",
+		children: t("studio_api_keys_personal_roles")
+	})] });
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx(BlockHeading, {
+			icon: shield,
+			label: t("studio_api_keys_roles"),
+			hint: t("studio_api_keys_roles_rows_hint")
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap gap-1.5",
+			children: [/* @__PURE__ */ jsx(Chip, {
+				size: "small",
+				className: "font-mono bg-surface-raised text-surface-600 dark:text-surface-300",
+				children: "service"
+			}), apiKey.roles.map((role) => /* @__PURE__ */ jsx(Chip, {
+				size: "small",
+				colorScheme: role === ADMIN_ROLE ? "yellow" : void 0,
+				className: cls("font-mono", role !== ADMIN_ROLE && "bg-surface-raised text-surface-700 dark:text-surface-200"),
+				children: role
+			}, role))]
+		}),
+		runsAsAdmin(apiKey) ? /* @__PURE__ */ jsx(Alert, {
+			color: "warning",
+			size: "small",
+			outerClassName: "mt-2",
+			children: t("studio_api_keys_admin_bypasses_rls")
+		}) : /* @__PURE__ */ jsx(Typography, {
+			variant: "caption",
+			color: "secondary",
+			className: "block mt-1.5 text-[11px] leading-snug",
+			children: apiKey.roles.length === 0 ? t("studio_api_keys_roles_service_only") : t("studio_api_keys_roles_service_plus")
+		})
+	] });
+}
+function StatCard({ label, value, mono, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("px-3 py-2 rounded-lg border bg-surface-card", 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] truncate", mono && "font-mono", className),
+			children: value
+		})]
+	});
+}
+function SecretDisplayDialog({ keyWithSecret, catalogue, onClose }) {
+	const { t } = useTranslation();
+	const snackbar = useSnackbarController();
+	const [copied, setCopied] = useState(false);
+	const granted = groupKeyScopes(keyWithSecret.scopes, catalogue).flatMap((group) => group.scopes);
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(keyWithSecret.key);
+			setCopied(true);
+			snackbar.open({
+				type: "success",
+				message: t("studio_api_keys_copied")
+			});
+			setTimeout(() => setCopied(false), 2e3);
+		} catch {
+			snackbar.open({
+				type: "error",
+				message: t("studio_api_keys_copy_failed")
+			});
+		}
+	};
+	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"
+				}), t("studio_api_keys_created_title")]
+			}) }),
+			/* @__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: t("studio_api_keys_copy_now")
+						})]
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						className: "text-amber-600 dark:text-amber-300",
+						children: t("studio_api_keys_copy_now_hint")
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cls("flex items-center gap-2 p-3 rounded-lg border bg-surface-sheet", 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 ? t("copied") : t("copy"),
+						children: /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": copied ? t("copied") : t("copy"),
+							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",
+							className: "block",
+							children: [
+								/* @__PURE__ */ jsx("strong", { children: t("studio_api_keys_name_label") }),
+								" ",
+								keyWithSecret.name
+							]
+						}),
+						/* @__PURE__ */ jsxs(Typography, {
+							variant: "caption",
+							color: "secondary",
+							className: "block",
+							children: [
+								/* @__PURE__ */ jsx("strong", { children: t("studio_api_keys_access_label") }),
+								" ",
+								granted.length > 0 ? granted.map((held) => heldScopeLine(t, held)).join("; ") : "—"
+							]
+						}),
+						runsAsAdmin(keyWithSecret) && /* @__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: t("studio_api_keys_admin_granted") }),
+								" — ",
+								t("studio_api_keys_admin_granted_hint")
+							] })]
+						})
+					]
+				})
+			] }),
+			/* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, {
+				color: "primary",
+				onClick: onClose,
+				children: t("studio_api_keys_done")
+			}) })
+		]
+	});
+}
+//#endregion
+export { ApiKeysView };
+
+//# sourceMappingURL=ApiKeysView-B66TdzhH.js.map