@rebasepro/studio 0.6.0 → 0.7.0

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 (function(global, factory) {
-	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@rebasepro/core"), require("react"), require("@rebasepro/ui"), require("react/jsx-runtime"), require("react-router-dom"), require("react-dom"), require("@monaco-editor/react"), require("pgsql-ast-parser"), require("@rebasepro/utils"), require("prism-react-renderer"), require("@rebasepro/client"), require("@rebasepro/types"), require("react-dropzone"), require("@xyflow/react"), require("@xyflow/react/dist/style.css"), require("@rebasepro/common"), require("dagre")) : typeof define === "function" && define.amd ? define([
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@rebasepro/core"), require("react"), require("@rebasepro/ui"), require("react/jsx-runtime"), require("react-router-dom"), require("react-dom"), require("@monaco-editor/react"), require("pgsql-ast-parser"), require("@rebasepro/utils"), require("prism-react-renderer"), require("@rebasepro/client"), require("@rebasepro/types"), require("@rebasepro/common"), require("react-dropzone"), require("@xyflow/react"), require("@xyflow/react/dist/style.css"), require("dagre")) : typeof define === "function" && define.amd ? define([
 		"exports",
 		"@rebasepro/core",
 		"react",
@@ -13,13 +13,13 @@
 		"prism-react-renderer",
 		"@rebasepro/client",
 		"@rebasepro/types",
+		"@rebasepro/common",
 		"react-dropzone",
 		"@xyflow/react",
 		"@xyflow/react/dist/style.css",
-		"@rebasepro/common",
 		"dagre"
-	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["Rebase collection editor"] = {}, global._rebasepro_core, global.react, global._rebasepro_ui, global.react_jsx_runtime, global.react_router_dom, global.react_dom, global._monaco_editor_react, global.pgsql_ast_parser, global._rebasepro_utils, global.prism_react_renderer, global._rebasepro_client, global._rebasepro_types, global.react_dropzone, global._xyflow_react, global._xyflow_react_dist_style_css, global._rebasepro_common, global.dagre));
-})(this, function(exports, _rebasepro_core, react, _rebasepro_ui, react_jsx_runtime, react_router_dom, react_dom, _monaco_editor_react, pgsql_ast_parser, _rebasepro_utils, prism_react_renderer, _rebasepro_client, _rebasepro_types, react_dropzone, _xyflow_react, _xyflow_react_dist_style_css, _rebasepro_common, dagre) {
+	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["Rebase collection editor"] = {}, global._rebasepro_core, global.react, global._rebasepro_ui, global.react_jsx_runtime, global.react_router_dom, global.react_dom, global._monaco_editor_react, global.pgsql_ast_parser, global._rebasepro_utils, global.prism_react_renderer, global._rebasepro_client, global._rebasepro_types, global._rebasepro_common, global.react_dropzone, global._xyflow_react, global._xyflow_react_dist_style_css, global.dagre));
+})(this, function(exports, _rebasepro_core, react, _rebasepro_ui, react_jsx_runtime, react_router_dom, react_dom, _monaco_editor_react, pgsql_ast_parser, _rebasepro_utils, prism_react_renderer, _rebasepro_client, _rebasepro_types, _rebasepro_common, react_dropzone, _xyflow_react, _xyflow_react_dist_style_css, dagre) {
 	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 	//#region \0rolldown/runtime.js
 	var __create = Object.create;
@@ -143,17 +143,26 @@
 			label: "Access Control",
 			dotColor: "bg-rose-400",
 			iconColor: "text-rose-400",
-			tools: [{
-				path: "/users",
-				name: "Users",
-				description: "Manage developers and assign roles in your workspace",
-				icon: "group"
-			}, {
-				path: "/roles",
-				name: "Roles",
-				description: "Create and configure fine-grained access permissions",
-				icon: "ShieldEllipsis"
-			}]
+			tools: [
+				{
+					path: "/users",
+					name: "Users",
+					description: "Manage developers and assign roles in your workspace",
+					icon: "group"
+				},
+				{
+					path: "/roles",
+					name: "Roles",
+					description: "Create and configure fine-grained access permissions",
+					icon: "ShieldEllipsis"
+				},
+				{
+					path: "/api-keys",
+					name: "API Keys",
+					description: "Create and manage scoped keys for machine-to-machine access",
+					icon: "KeyRound"
+				}
+			]
 		}
 	];
 	function StudioHomePage({ additionalActions, additionalChildrenStart, additionalChildrenEnd, sections, hiddenGroups }) {
@@ -896,7 +905,7 @@
 					}) : Object.entries(schemas).map(([schemaName, tables]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "mb-2",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-950 rounded transition-colors",
+							className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors",
 							onClick: () => setExpandedSchemas((prev) => ({
 								...prev,
 								[schemaName]: !prev[schemaName]
@@ -914,7 +923,7 @@
 						}), expandedSchemas[schemaName] && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "ml-3 mt-1 space-y-1",
 							children: tables.map((table) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-950 rounded transition-colors group relative",
+								className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors group relative",
 								onClick: () => setExpandedTables((prev) => ({
 									...prev,
 									[`${schemaName}.${table.tableName}`]: !prev[`${schemaName}.${table.tableName}`]
@@ -1017,7 +1026,7 @@
 							}), expandedTables[`${schemaName}.${table.tableName}`] && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: (0, _rebasepro_ui.cls)("ml-5 mt-1 space-y-0.5 border-l", _rebasepro_ui.defaultBorderMixin),
 								children: table.columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex items-center p-1 group pl-2 hover:bg-surface-50 dark:hover:bg-surface-950 rounded-r relative min-h-[28px]",
+									className: "flex items-center p-1 group pl-2 hover:bg-surface-50 dark:hover:bg-surface-900 rounded-r relative min-h-[28px]",
 									children: [
 										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 											className: "w-3 h-3 mr-1.5 text-text-disabled dark:text-text-disabled-dark shrink-0",
@@ -3130,7 +3139,7 @@ declare const context: JSEditorContext;
 	function CollectionItem({ collection, onInsertCode }) {
 		const [expanded, setExpanded] = (0, react.useState)(false);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-950 rounded transition-colors group relative",
+			className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors group relative",
 			onClick: () => setExpanded(!expanded),
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
@@ -3172,7 +3181,7 @@ declare const context: JSEditorContext;
 		}), expanded && collection.properties.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: (0, _rebasepro_ui.cls)("ml-5 mt-1 space-y-0.5 border-l", _rebasepro_ui.defaultBorderMixin),
 			children: collection.properties.map((prop) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center p-1 pl-2 hover:bg-surface-50 dark:hover:bg-surface-950 rounded-r cursor-pointer transition-colors group/prop relative min-h-[28px]",
+				className: "flex items-center p-1 pl-2 hover:bg-surface-50 dark:hover:bg-surface-900 rounded-r cursor-pointer transition-colors group/prop relative min-h-[28px]",
 				onClick: () => onInsertCode(`"${prop}"`),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 					className: "w-3 h-3 mr-1.5 text-text-disabled dark:text-text-disabled-dark shrink-0",
@@ -3455,7 +3464,7 @@ declare const context: JSEditorContext;
 										children: "No execution history yet"
 									})
 								}) : [...history].reverse().map((code, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "p-2 py-1.5 rounded hover:bg-surface-100 dark:hover:bg-surface-950 cursor-pointer group transition-colors flex items-start",
+									className: "p-2 py-1.5 rounded hover:bg-surface-100 dark:hover:bg-surface-900 cursor-pointer group transition-colors flex items-start",
 									onClick: () => onSelectSnippet(code),
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 										className: "w-3 h-3 mt-1 mr-2 text-text-disabled dark:text-text-disabled-dark group-hover:text-primary transition-colors flex-shrink-0",
@@ -4819,194 +4828,201 @@ return result;
 					open: helpOpen,
 					onOpenChange: setHelpOpen,
 					maxWidth: "3xl",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogContent, {
-						className: "p-4 sm:p-6 lg:p-8 flex flex-col gap-6",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-								variant: "h5",
-								className: "mb-2",
-								children: t("studio_policy_help_title")
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-								className: "text-text-secondary dark:text-text-secondary-dark",
-								children: t("studio_policy_help_intro")
-							})] }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex flex-col gap-4",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Paper, {
-										className: (0, _rebasepro_ui.cls)("p-4 sm:p-5 flex flex-col gap-1", _rebasepro_ui.defaultBorderMixin),
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-											variant: "subtitle2",
-											className: "text-primary dark:text-primary-light font-medium",
-											children: t("studio_policy_help_step1_title")
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-											variant: "body2",
-											className: "text-text-secondary dark:text-text-secondary-dark",
-											children: t("studio_policy_help_step1_desc")
-										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Paper, {
-										className: (0, _rebasepro_ui.cls)("p-4 sm:p-5 flex flex-col gap-1", _rebasepro_ui.defaultBorderMixin),
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-												variant: "subtitle2",
-												className: "text-primary dark:text-primary-light font-medium",
-												children: t("studio_policy_help_step2_title")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-												variant: "body2",
-												className: "text-text-secondary dark:text-text-secondary-dark mb-1",
-												children: t("studio_policy_help_step2_desc")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
-												className: "list-disc pl-5 space-y-1 text-sm text-text-secondary dark:text-text-secondary-dark",
-												children: [
-													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
-														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "public" }),
-														": ",
-														t("studio_policy_help_role_public")
-													] }),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
-														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "authenticated" }),
-														": ",
-														t("studio_policy_help_role_authenticated")
-													] }),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
-														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "anon" }),
-														": ",
-														t("studio_policy_help_role_anon")
-													] })
-												]
-											})
-										]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Paper, {
-										className: (0, _rebasepro_ui.cls)("p-4 sm:p-5 flex flex-col gap-1", _rebasepro_ui.defaultBorderMixin),
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-												variant: "subtitle2",
-												className: "text-primary dark:text-primary-light font-medium",
-												children: t("studio_policy_help_step3_title")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-												variant: "body2",
-												className: "text-text-secondary dark:text-text-secondary-dark mb-1",
-												children: t("studio_policy_help_step3_desc")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-												className: (0, _rebasepro_ui.cls)("bg-surface-100 dark:bg-surface-950 px-3 py-2 rounded-md font-mono text-sm my-2", _rebasepro_ui.defaultBorderMixin),
-												children: "Example: auth.uid() = user_id"
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-												variant: "caption",
-												className: "text-text-secondary dark:text-text-secondary-dark",
-												children: t("studio_policy_help_step3_example")
-											})
-										]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Paper, {
-										className: (0, _rebasepro_ui.cls)("p-4 sm:p-5 flex flex-col gap-1", _rebasepro_ui.defaultBorderMixin),
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-												variant: "subtitle2",
-												className: "text-primary dark:text-primary-light font-medium",
-												children: t("studio_policy_help_step4_title")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-												variant: "body2",
-												className: "text-text-secondary dark:text-text-secondary-dark mb-1",
-												children: t("studio_policy_help_step4_desc")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-												className: (0, _rebasepro_ui.cls)("bg-surface-100 dark:bg-surface-950 px-3 py-2 rounded-md font-mono text-sm my-2", _rebasepro_ui.defaultBorderMixin),
-												children: "Example: auth.uid() = user_id"
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-												variant: "caption",
-												className: "text-text-secondary dark:text-text-secondary-dark",
-												children: t("studio_policy_help_step4_example")
-											})
-										]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Paper, {
-										className: (0, _rebasepro_ui.cls)("p-4 sm:p-5 flex flex-col gap-2 bg-primary/5 dark:bg-primary-bg-dark/10", _rebasepro_ui.defaultBorderMixin),
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.DialogTitle, {
+							hidden: true,
+							children: "Row-Level Security Help"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogContent, {
+							className: "p-4 sm:p-6 lg:p-8 flex flex-col gap-6",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+									variant: "h5",
+									className: "mb-2",
+									children: t("studio_policy_help_title")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+									className: "text-text-secondary dark:text-text-secondary-dark",
+									children: t("studio_policy_help_intro")
+								})] }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex flex-col gap-4",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Paper, {
+											className: (0, _rebasepro_ui.cls)("p-4 sm:p-5 flex flex-col gap-1", _rebasepro_ui.defaultBorderMixin),
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
 												variant: "subtitle2",
 												className: "text-primary dark:text-primary-light font-medium",
-												children: t("studio_policy_help_auth_vars_title")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+												children: t("studio_policy_help_step1_title")
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
 												variant: "body2",
 												className: "text-text-secondary dark:text-text-secondary-dark",
-												children: t("studio_policy_help_auth_vars_desc")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
-												className: "list-disc pl-5 space-y-2 text-sm text-text-secondary dark:text-text-secondary-dark font-normal",
-												children: [
-													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-														className: "bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap",
-														children: "auth.uid()"
-													}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-														className: "block mt-0.5",
-														children: ["Returns the current user's ID as text. Example: ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-															className: "bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]",
-															children: "auth.uid() = user_id"
-														})]
-													})] }),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-														className: "bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap",
-														children: "auth.jwt()"
-													}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-														className: "block mt-0.5",
-														children: ["Returns the full JWT payload as JSONB so you can check custom claims. Example: ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-															className: "bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]",
-															children: "auth.jwt() ->> 'email' = 'admin@example.com'"
-														})]
-													})] }),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-														className: "bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap",
-														children: "auth.roles()"
-													}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-														className: "block mt-0.5",
-														children: ["Returns the user's role IDs as a comma-separated string. Best used with: ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-															className: "bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]",
-															children: "string_to_array(auth.roles(), ',') @> ARRAY['admin']"
-														})]
-													})] })
-												]
-											})
-										]
-									})
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: (0, _rebasepro_ui.cls)("mt-2 flex flex-col sm:flex-row justify-between items-start sm:items-center bg-primary/5 dark:bg-primary-bg-dark/10 p-4 rounded-xl border border-primary/10 dark:border-primary/20", _rebasepro_ui.defaultBorderMixin),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-									variant: "body2",
-									className: "text-primary dark:text-primary-light mb-4 sm:mb-0 max-w-md",
-									children: t("studio_policy_help_docs_cta")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
-									component: "a",
-									href: "https://www.postgresql.org/docs/current/sql-createpolicy.html",
-									target: "_blank",
-									variant: "outlined",
-									color: "primary",
-									size: "small",
-									className: "whitespace-nowrap flex-shrink-0",
-									children: t("studio_policy_help_read_docs")
-								})]
+												children: t("studio_policy_help_step1_desc")
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Paper, {
+											className: (0, _rebasepro_ui.cls)("p-4 sm:p-5 flex flex-col gap-1", _rebasepro_ui.defaultBorderMixin),
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "subtitle2",
+													className: "text-primary dark:text-primary-light font-medium",
+													children: t("studio_policy_help_step2_title")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "body2",
+													className: "text-text-secondary dark:text-text-secondary-dark mb-1",
+													children: t("studio_policy_help_step2_desc")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
+													className: "list-disc pl-5 space-y-1 text-sm text-text-secondary dark:text-text-secondary-dark",
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "public" }),
+															": ",
+															t("studio_policy_help_role_public")
+														] }),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "authenticated" }),
+															": ",
+															t("studio_policy_help_role_authenticated")
+														] }),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "anon" }),
+															": ",
+															t("studio_policy_help_role_anon")
+														] })
+													]
+												})
+											]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Paper, {
+											className: (0, _rebasepro_ui.cls)("p-4 sm:p-5 flex flex-col gap-1", _rebasepro_ui.defaultBorderMixin),
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "subtitle2",
+													className: "text-primary dark:text-primary-light font-medium",
+													children: t("studio_policy_help_step3_title")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "body2",
+													className: "text-text-secondary dark:text-text-secondary-dark mb-1",
+													children: t("studio_policy_help_step3_desc")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: (0, _rebasepro_ui.cls)("bg-surface-100 dark:bg-surface-950 px-3 py-2 rounded-md font-mono text-sm my-2", _rebasepro_ui.defaultBorderMixin),
+													children: "Example: auth.uid() = user_id"
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "caption",
+													className: "text-text-secondary dark:text-text-secondary-dark",
+													children: t("studio_policy_help_step3_example")
+												})
+											]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Paper, {
+											className: (0, _rebasepro_ui.cls)("p-4 sm:p-5 flex flex-col gap-1", _rebasepro_ui.defaultBorderMixin),
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "subtitle2",
+													className: "text-primary dark:text-primary-light font-medium",
+													children: t("studio_policy_help_step4_title")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "body2",
+													className: "text-text-secondary dark:text-text-secondary-dark mb-1",
+													children: t("studio_policy_help_step4_desc")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: (0, _rebasepro_ui.cls)("bg-surface-100 dark:bg-surface-950 px-3 py-2 rounded-md font-mono text-sm my-2", _rebasepro_ui.defaultBorderMixin),
+													children: "Example: auth.uid() = user_id"
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "caption",
+													className: "text-text-secondary dark:text-text-secondary-dark",
+													children: t("studio_policy_help_step4_example")
+												})
+											]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Paper, {
+											className: (0, _rebasepro_ui.cls)("p-4 sm:p-5 flex flex-col gap-2 bg-primary/5 dark:bg-primary-bg-dark/10", _rebasepro_ui.defaultBorderMixin),
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "subtitle2",
+													className: "text-primary dark:text-primary-light font-medium",
+													children: t("studio_policy_help_auth_vars_title")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "body2",
+													className: "text-text-secondary dark:text-text-secondary-dark",
+													children: t("studio_policy_help_auth_vars_desc")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
+													className: "list-disc pl-5 space-y-2 text-sm text-text-secondary dark:text-text-secondary-dark font-normal",
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+															className: "bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap",
+															children: "auth.uid()"
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+															className: "block mt-0.5",
+															children: ["Returns the current user's ID as text. Example: ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+																className: "bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]",
+																children: "auth.uid() = user_id"
+															})]
+														})] }),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+															className: "bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap",
+															children: "auth.jwt()"
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+															className: "block mt-0.5",
+															children: ["Returns the full JWT payload as JSONB so you can check custom claims. Example: ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+																className: "bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]",
+																children: "auth.jwt() ->> 'email' = 'admin@example.com'"
+															})]
+														})] }),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+															className: "bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap",
+															children: "auth.roles()"
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+															className: "block mt-0.5",
+															children: ["Returns the user's role IDs as a comma-separated string. Best used with: ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+																className: "bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]",
+																children: "string_to_array(auth.roles(), ',') @> ARRAY['admin']"
+															})]
+														})] })
+													]
+												})
+											]
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: (0, _rebasepro_ui.cls)("mt-2 flex flex-col sm:flex-row justify-between items-start sm:items-center bg-primary/5 dark:bg-primary-bg-dark/10 p-4 rounded-xl border border-primary/10 dark:border-primary/20", _rebasepro_ui.defaultBorderMixin),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+										variant: "body2",
+										className: "text-primary dark:text-primary-light mb-4 sm:mb-0 max-w-md",
+										children: t("studio_policy_help_docs_cta")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
+										component: "a",
+										href: "https://www.postgresql.org/docs/current/sql-createpolicy.html",
+										target: "_blank",
+										variant: "outlined",
+										color: "primary",
+										size: "small",
+										className: "whitespace-nowrap flex-shrink-0",
+										children: t("studio_policy_help_read_docs")
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.DialogActions, {
+							className: "p-4 sm:px-6 sm:pb-6 pt-0 border-t-0",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
+								onClick: () => setHelpOpen(false),
+								variant: "filled",
+								color: "primary",
+								children: t("studio_policy_help_got_it")
 							})
-						]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.DialogActions, {
-						className: "p-4 sm:px-6 sm:pb-6 pt-0 border-t-0",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
-							onClick: () => setHelpOpen(false),
-							variant: "filled",
-							color: "primary",
-							children: t("studio_policy_help_got_it")
 						})
-					})]
+					]
 				})
 			] });
 		};
@@ -5014,6 +5030,12 @@ return result;
 	//#endregion
 	//#region src/components/RLSEditor/RLSEditor.tsx
 	var RLSEditor_exports = /* @__PURE__ */ __exportAll({ RLSEditor: () => RLSEditor$1 });
+	function classifyTableClient(tableName, schemaName, junctionTableNames, isMappedToCollection) {
+		if (_rebasepro_common.REBASE_INTERNAL_SCHEMAS.includes(schemaName) || _rebasepro_common.REBASE_INTERNAL_PREFIXES.some((prefix) => tableName.startsWith(prefix))) return "internal";
+		if (isMappedToCollection) return "collection";
+		if (junctionTableNames.has(tableName)) return "junction";
+		return "other";
+	}
 	/**
 	* Validates and double-quotes a SQL identifier to prevent injection.
 	* Only allows safe Postgres identifiers (letters, digits, underscores).
@@ -5023,6 +5045,81 @@ return result;
 		if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(name)) throw new Error(`Invalid SQL identifier: "${name}". Only letters, digits, and underscores are allowed.`);
 		return `"${name}"`;
 	}
+	function SidebarSection({ title, icon, expanded, onToggle, count, children }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mb-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center p-1.5 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors",
+				onClick: onToggle,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						className: (0, _rebasepro_ui.cls)("w-3 h-3 mr-1.5 transition-transform text-text-disabled dark:text-text-disabled-dark", expanded ? "rotate-90" : ""),
+						fill: "currentColor",
+						viewBox: "0 0 20 20",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" })
+					}),
+					icon,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+						variant: "body2",
+						className: "text-text-primary dark:text-text-primary-dark font-medium text-xs truncate flex-grow ml-1.5",
+						children: title
+					}),
+					count !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-[10px] text-text-disabled dark:text-text-disabled-dark font-medium tabular-nums mr-1",
+						children: count
+					})
+				]
+			}), expanded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "ml-3 mt-0.5 space-y-0.5",
+				children
+			})]
+		});
+	}
+	function SidebarTableRow({ table, isSelected, onSelect, badge, dimmed, t }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			onClick: onSelect,
+			className: (0, _rebasepro_ui.cls)("flex items-center p-1 cursor-pointer rounded transition-colors group relative", isSelected ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light" : "hover:bg-surface-100 dark:hover:bg-surface-900 text-text-secondary dark:text-text-secondary-dark", dimmed && !isSelected && "opacity-60"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					className: "w-3.5 h-3.5 mr-1 shrink-0 text-text-disabled dark:text-text-disabled-dark",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+					variant: "body2",
+					className: "text-xs truncate flex-1 min-w-0",
+					children: table.tableName
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-1.5 shrink-0 ml-2",
+					children: [
+						badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[9px] uppercase tracking-wider font-semibold text-text-disabled dark:text-text-disabled-dark bg-surface-200 dark:bg-surface-800 rounded px-1 py-px",
+							children: badge
+						}),
+						table.rlsEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Tooltip, {
+							title: t("studio_rls_enabled"),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-green-500" })
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Tooltip, {
+							title: t("studio_rls_disabled"),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-orange-400 opacity-50" })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] opacity-40 group-hover:opacity-100 min-w-[1.2rem] text-right font-medium",
+							children: table.policies.length
+						})
+					]
+				})
+			]
+		});
+	}
 	var RLSEditor$1;
 	var init_RLSEditor = __esmMin((() => {
 		init_PolicyEditor();
@@ -5036,6 +5133,7 @@ return result;
 			const [tables, setTables] = (0, react.useState)([]);
 			const [selectedTable, setSelectedTable] = (0, react.useState)(null);
 			const [activeTab, setActiveTab] = (0, react.useState)(0);
+			const [junctionTableNames, setJunctionTableNames] = (0, react.useState)(/* @__PURE__ */ new Set());
 			const [editingPolicy, setEditingPolicy] = (0, react.useState)(null);
 			const [sidebarSize, setSidebarSize] = (0, react.useState)(() => {
 				try {
@@ -5045,7 +5143,11 @@ return result;
 					return 20;
 				}
 			});
-			const [expandedSchemas, setExpandedSchemas] = (0, react.useState)({ public: true });
+			const [expandedSections, setExpandedSections] = (0, react.useState)({
+				collection: true,
+				other: true,
+				internal: false
+			});
 			const [sidebarTab, setSidebarTab] = (0, react.useState)("tables");
 			(0, react.useEffect)(() => {
 				try {
@@ -5127,7 +5229,15 @@ return result;
 					});
 					const sortedTables = Object.values(tableMap).sort((a, b) => a.tableName.localeCompare(b.tableName));
 					setTables(sortedTables);
-					if (sortedTables.length > 0 && !selectedTable) setSelectedTable(`${sortedTables[0].schemaName}.${sortedTables[0].tableName}`);
+					try {
+						const jRows = extractRows(await databaseAdmin.executeSql(_rebasepro_common.JUNCTION_TABLES_SQL));
+						setJunctionTableNames(new Set(jRows.map((r) => r.table_name).filter(Boolean)));
+					} catch {}
+					if (sortedTables.length > 0 && !selectedTable) {
+						const firstUserTable = sortedTables.find((t) => !_rebasepro_common.REBASE_INTERNAL_SCHEMAS.includes(t.schemaName));
+						if (firstUserTable) setSelectedTable(`${firstUserTable.schemaName}.${firstUserTable.tableName}`);
+						else setSelectedTable(`${sortedTables[0].schemaName}.${sortedTables[0].tableName}`);
+					}
 				} catch (e) {
 					console.error("RLS fetch error:", e);
 					setError("Failed to fetch RLS policies: " + (e instanceof Error ? e.message : String(e)));
@@ -5145,18 +5255,38 @@ return result;
 				if (!selectedTable) return null;
 				return tables.find((t) => `${t.schemaName}.${t.tableName}` === selectedTable) || null;
 			}, [selectedTable, tables]);
-			const groupedTables = (0, react.useMemo)(() => {
-				const groups = {};
+			/** Categorize tables into 4 buckets for the sidebar. */
+			const categorizedTables = (0, react.useMemo)(() => {
+				const groups = {
+					collection: [],
+					junction: [],
+					internal: [],
+					other: []
+				};
 				tables.forEach((table) => {
-					if (!groups[table.schemaName]) groups[table.schemaName] = [];
-					groups[table.schemaName].push(table);
+					const isMapped = !!collectionRegistry.collections?.find((c) => c.id === table.tableName || c.path === table.tableName || c.table === table.tableName || c.slug === table.tableName || c.collectionId === table.tableName);
+					groups[classifyTableClient(table.tableName, table.schemaName, junctionTableNames, isMapped)].push(table);
 				});
 				return groups;
-			}, [tables]);
+			}, [
+				tables,
+				junctionTableNames,
+				collectionRegistry.collections
+			]);
 			const activeCollection = (0, react.useMemo)(() => {
 				if (!activeTableData) return null;
 				return collectionRegistry.collections?.find((c) => c.id === activeTableData.tableName || c.path === activeTableData.tableName || c.table === activeTableData.tableName || c.slug === activeTableData.tableName || c.collectionId === activeTableData.tableName) || null;
 			}, [activeTableData, collectionRegistry.collections]);
+			/** The category of the currently selected table. */
+			const activeTableCategory = (0, react.useMemo)(() => {
+				if (!activeTableData) return null;
+				const isMapped = !!activeCollection;
+				return classifyTableClient(activeTableData.tableName, activeTableData.schemaName, junctionTableNames, isMapped);
+			}, [
+				activeTableData,
+				activeCollection,
+				junctionTableNames
+			]);
 			const mergedPolicies = (0, react.useMemo)(() => {
 				if (!activeTableData) return [];
 				const policiesMap = {};
@@ -5254,74 +5384,78 @@ return result;
 									children: isLoading && tables.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										className: "flex justify-center p-4",
 										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.CircularProgress, { size: "small" })
-									}) : Object.keys(groupedTables).length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									}) : tables.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										className: "p-4 text-center",
 										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
 											variant: "caption",
 											className: "text-text-disabled dark:text-text-disabled-dark italic",
 											children: t("studio_rls_no_tables")
 										})
-									}) : Object.entries(groupedTables).map(([schemaName, schemaTables]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "mb-2",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-950 rounded transition-colors",
-											onClick: () => setExpandedSchemas((prev) => ({
+									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+										categorizedTables.collection.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSection, {
+											title: "Schema Collections",
+											icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.DatabaseIcon, {
+												size: 12,
+												className: "text-primary dark:text-primary-light"
+											}),
+											expanded: expandedSections.collection ?? true,
+											onToggle: () => setExpandedSections((prev) => ({
 												...prev,
-												[schemaName]: !prev[schemaName]
+												collection: !(prev.collection ?? true)
 											})),
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-												className: (0, _rebasepro_ui.cls)("w-3 h-3 mr-1 transition-transform", expandedSchemas[schemaName] ? "rotate-90" : ""),
-												fill: "currentColor",
-												viewBox: "0 0 20 20",
-												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" })
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-												variant: "body2",
-												className: "text-text-primary dark:text-text-primary-dark font-medium text-xs truncate flex-grow",
-												children: schemaName
-											})]
-										}), expandedSchemas[schemaName] && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											className: "ml-3 mt-1 space-y-0.5",
-											children: schemaTables.map((table) => {
-												const key = `${table.schemaName}.${table.tableName}`;
-												return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-													onClick: () => setSelectedTable(key),
-													className: (0, _rebasepro_ui.cls)("flex items-center p-1 cursor-pointer rounded transition-colors group relative", selectedTable === key ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light" : "hover:bg-surface-100 dark:hover:bg-surface-950 text-text-secondary dark:text-text-secondary-dark"),
-													children: [
-														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-															className: "w-3.5 h-3.5 mr-1 shrink-0 text-text-disabled dark:text-text-disabled-dark",
-															fill: "none",
-															stroke: "currentColor",
-															viewBox: "0 0 24 24",
-															children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-																strokeLinecap: "round",
-																strokeLinejoin: "round",
-																strokeWidth: 2,
-																d: "M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-															})
-														}),
-														/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-															variant: "body2",
-															className: "text-xs truncate flex-1 min-w-0",
-															children: table.tableName
-														}),
-														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-															className: "flex items-center gap-1.5 shrink-0 ml-2",
-															children: [table.rlsEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Tooltip, {
-																title: t("studio_rls_enabled"),
-																children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-green-500" })
-															}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Tooltip, {
-																title: t("studio_rls_disabled"),
-																children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-orange-400 opacity-50" })
-															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																className: "text-[10px] opacity-40 group-hover:opacity-100 min-w-[1.2rem] text-right font-medium",
-																children: table.policies.length
-															})]
-														})
-													]
-												}, key);
-											})
-										})]
-									}, schemaName))
+											children: categorizedTables.collection.map((table) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarTableRow, {
+												table,
+												isSelected: selectedTable === `${table.schemaName}.${table.tableName}`,
+												onSelect: () => setSelectedTable(`${table.schemaName}.${table.tableName}`),
+												t
+											}, `${table.schemaName}.${table.tableName}`))
+										}),
+										(categorizedTables.other.length > 0 || categorizedTables.junction.length > 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SidebarSection, {
+											title: "Other Tables",
+											icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.AlertTriangleIcon, {
+												size: 12,
+												className: "text-yellow-500 dark:text-yellow-400"
+											}),
+											expanded: expandedSections.other ?? true,
+											onToggle: () => setExpandedSections((prev) => ({
+												...prev,
+												other: !(prev.other ?? true)
+											})),
+											children: [categorizedTables.other.map((table) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarTableRow, {
+												table,
+												isSelected: selectedTable === `${table.schemaName}.${table.tableName}`,
+												onSelect: () => setSelectedTable(`${table.schemaName}.${table.tableName}`),
+												t
+											}, `${table.schemaName}.${table.tableName}`)), categorizedTables.junction.map((table) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarTableRow, {
+												table,
+												isSelected: selectedTable === `${table.schemaName}.${table.tableName}`,
+												onSelect: () => setSelectedTable(`${table.schemaName}.${table.tableName}`),
+												badge: "Junction",
+												dimmed: true,
+												t
+											}, `${table.schemaName}.${table.tableName}`))]
+										}),
+										categorizedTables.internal.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSection, {
+											title: "Rebase Internal",
+											icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.LockIcon, {
+												size: 12,
+												className: "text-text-disabled dark:text-text-disabled-dark"
+											}),
+											expanded: expandedSections.internal ?? false,
+											onToggle: () => setExpandedSections((prev) => ({
+												...prev,
+												internal: !(prev.internal ?? false)
+											})),
+											count: categorizedTables.internal.length,
+											children: categorizedTables.internal.map((table) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarTableRow, {
+												table,
+												isSelected: selectedTable === `${table.schemaName}.${table.tableName}`,
+												onSelect: () => setSelectedTable(`${table.schemaName}.${table.tableName}`),
+												dimmed: true,
+												t
+											}, `${table.schemaName}.${table.tableName}`))
+										})
+									] })
 								})]
 							}), sidebarTab === "info" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "flex flex-col h-full",
@@ -5484,10 +5618,11 @@ return result;
 										size: "small",
 										onClick: async () => {
 											const table = activeTableData.tableName;
+											const qualifiedTable = `${sanitizeSqlIdentifier(activeTableData.schemaName)}.${sanitizeSqlIdentifier(table)}`;
 											const action = activeTableData.rlsEnabled ? "DISABLE" : "ENABLE";
 											if (!confirm(`Are you sure you want to ${action.toLowerCase()} Row Level Security on "${table}"?`)) return;
 											try {
-												await databaseAdmin.executeSql(`ALTER TABLE ${sanitizeSqlIdentifier(table)} ${action} ROW LEVEL SECURITY`);
+												await databaseAdmin.executeSql(`ALTER TABLE ${qualifiedTable} ${action} ROW LEVEL SECURITY`);
 												snackbarController.open({
 													type: "success",
 													message: `RLS ${action.toLowerCase()}d on ${table}`
@@ -5514,7 +5649,6 @@ return result;
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
 										size: "small",
 										color: "primary",
-										disabled: !activeCollection,
 										onClick: () => setEditingPolicy("new"),
 										children: t("studio_rls_create_policy")
 									})
@@ -5555,31 +5689,57 @@ return result;
 							schema: activeTableData.schemaName,
 							table: activeTableData.tableName,
 							onSave: async (newPolicy) => {
-								if (!activeCollection) return;
-								const rule = {
-									name: newPolicy.policyname,
-									operation: newPolicy.cmd?.toLowerCase(),
-									mode: newPolicy.permissive?.toLowerCase(),
-									using: newPolicy.qual || void 0,
-									withCheck: newPolicy.with_check || void 0,
-									roles: newPolicy.roles
-								};
-								const existingRules = ((0, _rebasepro_types.isPostgresCollection)(activeCollection) ? activeCollection.securityRules : void 0) || [];
-								let newRules;
-								if (editingPolicy === "new") newRules = [...existingRules, rule];
-								else newRules = existingRules.map((r) => r.name === editingPolicy.policyname ? rule : r);
-								try {
-									if (!(await fetch(`${apiUrl}/api/schema-editor/collection/save`, {
-										method: "POST",
-										headers: { "Content-Type": "application/json" },
-										body: JSON.stringify({
-											collectionId: activeCollection.id || activeCollection.path || activeCollection.alias || activeTableData.tableName,
-											collectionData: { securityRules: newRules }
-										})
-									})).ok) throw new Error("Failed to save policy");
-									snackbarController.open({
+								if (activeCollection) {
+									const rule = {
+										name: newPolicy.policyname,
+										operation: newPolicy.cmd?.toLowerCase(),
+										mode: newPolicy.permissive?.toLowerCase(),
+										using: newPolicy.qual || void 0,
+										withCheck: newPolicy.with_check || void 0,
+										roles: newPolicy.roles
+									};
+									const existingRules = ((0, _rebasepro_types.isPostgresCollection)(activeCollection) ? activeCollection.securityRules : void 0) || [];
+									let newRules;
+									if (editingPolicy === "new") newRules = [...existingRules, rule];
+									else newRules = existingRules.map((r) => r.name === editingPolicy.policyname ? rule : r);
+									try {
+										if (!(await fetch(`${apiUrl}/api/schema-editor/collection/save`, {
+											method: "POST",
+											headers: { "Content-Type": "application/json" },
+											body: JSON.stringify({
+												collectionId: activeCollection.id || activeCollection.path || activeCollection.alias || activeTableData.tableName,
+												collectionData: { securityRules: newRules }
+											})
+										})).ok) throw new Error("Failed to save policy");
+										snackbarController.open({
+											type: "success",
+											message: "Policy saved successfully"
+										});
+										setEditingPolicy(null);
+										fetchRLSData();
+									} catch (e) {
+										snackbarController.open({
+											type: "error",
+											message: e instanceof Error ? e.message : String(e)
+										});
+									}
+								} else try {
+									const qualifiedTable = `${sanitizeSqlIdentifier(activeTableData.schemaName)}.${sanitizeSqlIdentifier(activeTableData.tableName)}`;
+									const policyName = sanitizeSqlIdentifier(newPolicy.policyname || "unnamed_policy");
+									const cmd = newPolicy.cmd || "ALL";
+									const permissive = (newPolicy.permissive || "PERMISSIVE") === "PERMISSIVE" ? "PERMISSIVE" : "RESTRICTIVE";
+									const roles = newPolicy.roles && newPolicy.roles.length > 0 ? newPolicy.roles.map((r) => sanitizeSqlIdentifier(r)).join(", ") : "public";
+									if (editingPolicy !== "new") await databaseAdmin.executeSql(`DROP POLICY IF EXISTS ${policyName} ON ${qualifiedTable}`);
+									let sql = `CREATE POLICY ${policyName} ON ${qualifiedTable}`;
+									sql += ` AS ${permissive}`;
+									sql += ` FOR ${cmd}`;
+									sql += ` TO ${roles}`;
+									if (newPolicy.qual) sql += ` USING (${newPolicy.qual})`;
+									if (newPolicy.with_check) sql += ` WITH CHECK (${newPolicy.with_check})`;
+									await databaseAdmin.executeSql(sql);
+									snackbarController.open({
 										type: "success",
-										message: "Policy saved successfully"
+										message: `Policy "${newPolicy.policyname}" applied directly via SQL`
 									});
 									setEditingPolicy(null);
 									fetchRLSData();
@@ -5598,17 +5758,59 @@ return result;
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									className: "max-w-4xl mx-auto flex flex-col gap-6",
 									children: [
-										activeTableData && !activeCollection && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Alert, {
+										activeTableData && activeTableCategory === "internal" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Alert, {
+											color: "info",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "flex items-start gap-2",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.LockIcon, {
+													size: 16,
+													className: "shrink-0 mt-0.5"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "body2",
+													className: "mb-1 font-semibold",
+													children: "Rebase System Table"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "caption",
+													className: "opacity-80",
+													children: "This table is managed internally by Rebase. Its security policies are configured automatically. Editing policies on system tables is an advanced operation."
+												})] })]
+											})
+										}),
+										activeTableData && activeTableCategory === "junction" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Alert, {
+											color: "info",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "flex items-start gap-2",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Link2Icon, {
+													size: 16,
+													className: "shrink-0 mt-0.5"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "body2",
+													className: "mb-1 font-semibold",
+													children: "Junction Table"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "caption",
+													className: "opacity-80",
+													children: "This is an auto-generated junction table for a many-to-many relation. Its access is typically managed through the related collections' policies. You can still add RLS policies directly if needed."
+												})] })]
+											})
+										}),
+										activeTableData && activeTableCategory === "other" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Alert, {
 											color: "warning",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-												variant: "body2",
-												className: "mb-1",
-												children: "Table not managed by Rebase"
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-												variant: "caption",
-												className: "opacity-80",
-												children: "This table is not mapped to a Rebase Schema via code. To edit security policies visually, you must first import this table into a Schema configuration file."
-											})]
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "flex items-start gap-2",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.AlertTriangleIcon, {
+													size: 16,
+													className: "shrink-0 mt-0.5"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "body2",
+													className: "mb-1 font-semibold",
+													children: "Unmapped Table"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+													variant: "caption",
+													className: "opacity-80",
+													children: "This table exists in the database but isn't mapped to a collection definition. Import it into a Schema configuration file to manage security policies visually."
+												})] })]
+											})
 										}),
 										activeTableData && !activeTableData.rlsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											className: (0, _rebasepro_ui.cls)("p-4 sm:p-5 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-900/50 rounded-lg flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between", _rebasepro_ui.defaultBorderMixin),
@@ -5722,7 +5924,6 @@ return result;
 															variant: "text",
 															color: "primary",
 															onClick: () => setEditingPolicy(policy),
-															disabled: !activeCollection,
 															children: t("studio_rls_edit")
 														}),
 														policy.status !== "code_only" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Tooltip, {
@@ -5732,9 +5933,10 @@ return result;
 																size: "small",
 																onClick: async () => {
 																	const table = activeTableData.tableName;
+																	const qualifiedTable = `${sanitizeSqlIdentifier(activeTableData.schemaName)}.${sanitizeSqlIdentifier(table)}`;
 																	if (!confirm(`Drop policy "${policy.policyname}" from table "${table}"?`)) return;
 																	try {
-																		await databaseAdmin.executeSql(`DROP POLICY ${sanitizeSqlIdentifier(policy.policyname)} ON ${sanitizeSqlIdentifier(table)}`);
+																		await databaseAdmin.executeSql(`DROP POLICY ${sanitizeSqlIdentifier(policy.policyname)} ON ${qualifiedTable}`);
 																		snackbarController.open({
 																			type: "success",
 																			message: `Policy "${policy.policyname}" dropped`
@@ -5771,7 +5973,7 @@ return result;
 													className: "text-text-disabled dark:text-text-disabled-dark max-w-sm mb-4",
 													children: "RLS is enabled on this table but no policies exist. All access is denied by default (Postgres deny-all). Create a policy to allow specific access."
 												}),
-												activeCollection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
 													size: "small",
 													variant: "filled",
 													color: "primary",
@@ -6180,30 +6382,37 @@ return result;
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Dialog, {
 			open: deleteDialogOpen,
 			onOpenChange: setDeleteDialogOpen,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-				variant: "subtitle1",
-				className: "mb-2",
-				children: "Delete File?"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Typography, {
-				className: "text-surface-accent-600 dark:text-surface-accent-400",
-				children: [
-					"Are you sure you want to delete \"",
-					file.name,
-					"\"? This action cannot be undone."
-				]
-			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogActions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
-				variant: "text",
-				onClick: () => setDeleteDialogOpen(false),
-				children: "Cancel"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
-				variant: "filled",
-				color: "error",
-				onClick: () => {
-					setDeleteDialogOpen(false);
-					onDelete();
-				},
-				children: "Delete"
-			})] })]
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.DialogTitle, {
+					hidden: true,
+					children: "Delete File"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+					variant: "subtitle1",
+					className: "mb-2",
+					children: "Delete File?"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Typography, {
+					className: "text-surface-accent-600 dark:text-surface-accent-400",
+					children: [
+						"Are you sure you want to delete \"",
+						file.name,
+						"\"? This action cannot be undone."
+					]
+				})] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogActions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
+					variant: "text",
+					onClick: () => setDeleteDialogOpen(false),
+					children: "Cancel"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
+					variant: "filled",
+					color: "error",
+					onClick: () => {
+						setDeleteDialogOpen(false);
+						onDelete();
+					},
+					children: "Delete"
+				})] })
+			]
 		})] });
 	}
 	var StorageView$1;
@@ -7094,31 +7303,38 @@ return result;
 								setDeleteDialogTarget(null);
 							}
 						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-							variant: "subtitle1",
-							className: "font-semibold mb-2",
-							children: deleteDialogTarget === "selection" ? `Delete ${selectedPaths.size} item${selectedPaths.size !== 1 ? "s" : ""}?` : deleteDialogTarget ? `Delete folder "${deleteDialogTarget.name}"?` : "Delete?"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-							variant: "body2",
-							color: "secondary",
-							children: deleteDialogTarget === "selection" ? "This will permanently delete all selected files and folders, including their contents. This action cannot be undone." : "This will permanently delete the folder and all of its contents. This action cannot be undone."
-						})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogActions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
-							variant: "text",
-							onClick: () => {
-								setDeleteDialogOpen(false);
-								setDeleteDialogTarget(null);
-							},
-							disabled: deleting,
-							children: "Cancel"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.LoadingButton, {
-							color: "error",
-							loading: deleting,
-							onClick: deleteDialogTarget === "selection" ? handleBulkDelete : handleConfirmDeleteFolder,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Trash2Icon, {
-								size: 14,
-								className: "mr-1"
-							}), "Delete"]
-						})] })]
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.DialogTitle, {
+								hidden: true,
+								children: "Delete Confirmation"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+								variant: "subtitle1",
+								className: "font-semibold mb-2",
+								children: deleteDialogTarget === "selection" ? `Delete ${selectedPaths.size} item${selectedPaths.size !== 1 ? "s" : ""}?` : deleteDialogTarget ? `Delete folder "${deleteDialogTarget.name}"?` : "Delete?"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+								variant: "body2",
+								color: "secondary",
+								children: deleteDialogTarget === "selection" ? "This will permanently delete all selected files and folders, including their contents. This action cannot be undone." : "This will permanently delete the folder and all of its contents. This action cannot be undone."
+							})] }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogActions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
+								variant: "text",
+								onClick: () => {
+									setDeleteDialogOpen(false);
+									setDeleteDialogTarget(null);
+								},
+								disabled: deleting,
+								children: "Cancel"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.LoadingButton, {
+								color: "error",
+								loading: deleting,
+								onClick: deleteDialogTarget === "selection" ? handleBulkDelete : handleConfirmDeleteFolder,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Trash2Icon, {
+									size: 14,
+									className: "mr-1"
+								}), "Delete"]
+							})] })
+						]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Dialog, {
 						open: newFolderDialogOpen,
@@ -7128,13 +7344,12 @@ return result;
 								setNewFolderName("");
 							}
 						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogContent, { children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-								variant: "subtitle1",
-								className: "font-semibold mb-4",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.DialogTitle, {
+								hidden: true,
 								children: "New Folder"
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TextField, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TextField, {
 								autoFocus: true,
 								size: "small",
 								label: "Folder name",
@@ -7148,8 +7363,7 @@ return result;
 								},
 								disabled: creatingFolder,
 								placeholder: "Enter folder name"
-							}),
-							currentPath && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Typography, {
+							}), currentPath && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Typography, {
 								variant: "caption",
 								color: "secondary",
 								className: "mt-2",
@@ -7161,25 +7375,26 @@ return result;
 										"/"
 									]
 								})]
-							})
-						] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogActions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
-							variant: "text",
-							onClick: () => {
-								setNewFolderDialogOpen(false);
-								setNewFolderName("");
-							},
-							disabled: creatingFolder,
-							children: "Cancel"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.LoadingButton, {
-							color: "primary",
-							loading: creatingFolder,
-							disabled: !newFolderName.trim(),
-							onClick: handleCreateFolder,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.FolderPlusIcon, {
-								size: 14,
-								className: "mr-1"
-							}), "Create"]
-						})] })]
+							})] }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogActions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
+								variant: "text",
+								onClick: () => {
+									setNewFolderDialogOpen(false);
+									setNewFolderName("");
+								},
+								disabled: creatingFolder,
+								children: "Cancel"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.LoadingButton, {
+								color: "primary",
+								loading: creatingFolder,
+								disabled: !newFolderName.trim(),
+								onClick: handleCreateFolder,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.FolderPlusIcon, {
+									size: 14,
+									className: "mr-1"
+								}), "Create"]
+							})] })
+						]
 					})
 				]
 			});
@@ -7193,7 +7408,7 @@ return result;
 		if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
 		return `${(ms / 6e4).toFixed(1)}m`;
 	}
-	function formatRelative$1(iso) {
+	function formatRelative$2(iso) {
 		if (!iso) return "—";
 		const d = new Date(iso);
 		const now = Date.now();
@@ -7481,20 +7696,20 @@ return result;
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "grid grid-cols-2 md:grid-cols-4 gap-3",
 								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$1, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$2, {
 										label: "Schedule",
 										value: selectedJob.schedule,
 										mono: true
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$1, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$2, {
 										label: "Last Run",
-										value: formatRelative$1(selectedJob.lastRunAt)
+										value: formatRelative$2(selectedJob.lastRunAt)
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$1, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$2, {
 										label: "Next Run",
-										value: selectedJob.enabled ? formatRelative$1(selectedJob.nextRunAt) : "Paused"
+										value: selectedJob.enabled ? formatRelative$2(selectedJob.nextRunAt) : "Paused"
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$1, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$2, {
 										label: "Duration",
 										value: selectedJob.lastDurationMs !== void 0 ? formatDuration(selectedJob.lastDurationMs) : "—"
 									})
@@ -7503,16 +7718,16 @@ return result;
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "grid grid-cols-3 gap-3 mt-3",
 								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$1, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$2, {
 										label: "Status",
 										value: selectedJob.state.toUpperCase(),
 										chipColor: selectedJob.state === "error" ? "red" : selectedJob.state === "disabled" ? "gray" : "green"
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$1, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$2, {
 										label: "Total Runs",
 										value: String(selectedJob.totalRuns)
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$1, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$2, {
 										label: "Failures",
 										value: String(selectedJob.totalFailures),
 										highlight: selectedJob.totalFailures > 0
@@ -7579,7 +7794,7 @@ return result;
 			})]
 		});
 	}
-	function StatCard$1({ label, value, mono, chipColor, highlight }) {
+	function StatCard$2({ label, value, mono, chipColor, highlight }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: (0, _rebasepro_ui.cls)("px-3 py-2 rounded-lg border bg-white dark:bg-surface-900", _rebasepro_ui.defaultBorderMixin),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
@@ -8736,7 +8951,7 @@ return result;
 		if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 		return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
 	}
-	function formatRelative(date) {
+	function formatRelative$1(date) {
 		if (!date) return "—";
 		const d = date instanceof Date ? date : new Date(date);
 		if (isNaN(d.getTime())) return "—";
@@ -8938,7 +9153,7 @@ return result;
 											"from ",
 											branch.parentDatabase,
 											" · ",
-											formatRelative(branch.createdAt)
+											formatRelative$1(branch.createdAt)
 										]
 									})]
 								}),
@@ -9002,21 +9217,21 @@ return result;
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "grid grid-cols-2 md:grid-cols-4 gap-3",
 								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$1, {
 										label: "Branch Name",
 										value: selected.name,
 										mono: true
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$1, {
 										label: "Source Database",
 										value: selected.parentDatabase,
 										mono: true
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$1, {
 										label: "Created",
-										value: formatRelative(selected.createdAt)
+										value: formatRelative$1(selected.createdAt)
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard$1, {
 										label: "Size",
 										value: formatSize(selected.sizeBytes)
 									})
@@ -9118,13 +9333,12 @@ return result;
 								}) }),
 								branches.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Select, {
 									label: "Source Database",
-									value: sourceBranch ?? "",
-									onValueChange: (v) => setSourceBranch(v || void 0),
+									value: sourceBranch ?? "__main__",
+									onValueChange: (v) => setSourceBranch(v === "__main__" ? void 0 : v),
 									placeholder: "Default (main database)",
 									size: "small",
-									renderValue: (v) => v || "Default (main database)",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.SelectItem, {
-										value: "",
+										value: "__main__",
 										children: "Default (main database)"
 									}), branches.map((b) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.SelectItem, {
 										value: b.name,
@@ -9165,7 +9379,7 @@ return result;
 			]
 		});
 	}
-	function StatCard({ label, value, mono }) {
+	function StatCard$1({ label, value, mono }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: (0, _rebasepro_ui.cls)("px-3 py-2 rounded-lg border bg-white dark:bg-surface-900", _rebasepro_ui.defaultBorderMixin),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
@@ -10154,16 +10368,16 @@ return result;
 	var LogsExplorer_exports = /* @__PURE__ */ __exportAll({ LogsExplorer: () => LogsExplorer$1 });
 	function LogsExplorer$1() {
 		const [logs, setLogs] = (0, react.useState)([]);
-		const [level, setLevel] = (0, react.useState)("");
-		const [source, setSource] = (0, react.useState)("");
+		const [level, setLevel] = (0, react.useState)("all");
+		const [source, setSource] = (0, react.useState)("all");
 		const [search, setSearch] = (0, react.useState)("");
 		const [autoScroll, setAutoScroll] = (0, react.useState)(true);
 		const containerRef = (0, react.useRef)(null);
 		const fetchLogs = (0, react.useCallback)(async () => {
 			try {
 				const params = new URLSearchParams();
-				if (level) params.set("level", level);
-				if (source) params.set("source", source);
+				if (level && level !== "all") params.set("level", level);
+				if (source && source !== "all") params.set("source", source);
 				if (search) params.set("search", search);
 				params.set("limit", "200");
 				const resp = await fetch(`/api/logs?${params}`);
@@ -10200,22 +10414,9 @@ return result;
 			if (autoScroll && containerRef.current) containerRef.current.scrollTop = containerRef.current.scrollHeight;
 		}, [logs, autoScroll]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			style: {
-				display: "flex",
-				flexDirection: "column",
-				height: "calc(100vh - 64px)",
-				background: "#1e1e2e",
-				color: "#cdd6f4"
-			},
+			className: "flex flex-col h-[calc(100vh-64px)] w-full bg-surface-50 dark:bg-surface-800",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: {
-					display: "flex",
-					gap: 8,
-					padding: "8px 16px",
-					borderBottom: "1px solid #313244",
-					alignItems: "center",
-					flexWrap: "wrap"
-				},
+				className: (0, _rebasepro_ui.cls)("flex gap-2 p-3 border-b items-center flex-wrap shrink-0", _rebasepro_ui.defaultBorderMixin),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Select, {
 						value: level,
@@ -10224,7 +10425,7 @@ return result;
 						placeholder: "All Levels",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.SelectItem, {
-								value: "",
+								value: "all",
 								children: "All Levels"
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.SelectItem, {
@@ -10252,7 +10453,7 @@ return result;
 						placeholder: "All Sources",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.SelectItem, {
-								value: "",
+								value: "all",
 								children: "All Sources"
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.SelectItem, {
@@ -10285,7 +10486,7 @@ return result;
 						className: "flex-1 min-w-[200px]"
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex items-center gap-1.5 cursor-pointer",
+						className: "flex items-center gap-1.5 cursor-pointer ml-2",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Checkbox, {
 							id: "auto-scroll",
 							checked: autoScroll,
@@ -10294,79 +10495,58 @@ return result;
 							padding: false
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Label, {
 							htmlFor: "auto-scroll",
-							className: "text-xs select-none cursor-pointer",
+							className: "text-xs select-none cursor-pointer text-surface-600 dark:text-surface-400",
 							children: "Auto-scroll"
 						})]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						style: {
-							fontSize: 12,
-							color: "#6c7086"
-						},
-						children: [logs.length, " entries"]
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ml-auto pl-4",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Typography, {
+							variant: "caption",
+							color: "secondary",
+							children: [logs.length, " entries"]
+						})
 					})
 				]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: containerRef,
-				style: {
-					flex: 1,
-					overflow: "auto",
-					fontFamily: "monospace",
-					fontSize: 12,
-					padding: "8px 0"
-				},
+				className: "flex-1 overflow-auto py-2",
 				children: [logs.map((log) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					style: {
-						padding: "2px 16px",
-						display: "flex",
-						gap: 8,
-						borderBottom: "1px solid #181825"
-					},
+					className: (0, _rebasepro_ui.cls)("flex gap-4 px-4 py-[6px] border-b hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors", _rebasepro_ui.defaultBorderMixin),
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							style: {
-								color: "#6c7086",
-								flexShrink: 0
-							},
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+							variant: "body2",
+							color: "secondary",
+							className: "w-[72px] shrink-0 font-mono",
 							children: new Date(log.timestamp).toLocaleTimeString()
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							style: {
-								color: LEVEL_COLORS[log.level] || "#cdd6f4",
-								width: 40,
-								flexShrink: 0,
-								textTransform: "uppercase",
-								fontWeight: 600
-							},
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+							variant: "body2",
+							className: (0, _rebasepro_ui.cls)("w-[48px] shrink-0 uppercase font-semibold font-mono", LEVEL_COLORS[log.level] || "text-surface-500"),
 							children: log.level
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							style: {
-								color: SOURCE_COLORS[log.source] || "#cdd6f4",
-								width: 64,
-								flexShrink: 0
-							},
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Typography, {
+							variant: "body2",
+							className: (0, _rebasepro_ui.cls)("w-[80px] shrink-0 font-mono", SOURCE_COLORS[log.source] || "text-surface-500"),
 							children: [
 								"[",
 								log.source,
 								"]"
 							]
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							style: {
-								color: "#cdd6f4",
-								flex: 1
-							},
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+							variant: "body2",
+							className: "flex-1 font-mono break-all whitespace-pre-wrap text-surface-900 dark:text-surface-100",
 							children: log.message
 						})
 					]
 				}, log.id)), logs.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: {
-						padding: 32,
-						textAlign: "center",
-						color: "#6c7086"
-					},
-					children: "No log entries yet. Logs will appear here as requests come in."
+					className: "p-8 text-center",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+						variant: "body2",
+						color: "secondary",
+						children: "No log entries yet. Logs will appear here as requests come in."
+					})
 				})]
 			})]
 		});
@@ -10374,20 +10554,699 @@ return result;
 	var LEVEL_COLORS, SOURCE_COLORS;
 	var init_LogsExplorer = __esmMin((() => {
 		LEVEL_COLORS = {
-			debug: "#6c7086",
-			info: "#89b4fa",
-			warn: "#f9e2af",
-			error: "#f38ba8"
+			debug: "text-surface-500",
+			info: "text-blue-600 dark:text-blue-500",
+			warn: "text-amber-600 dark:text-amber-500",
+			error: "text-red-600 dark:text-red-500"
 		};
 		SOURCE_COLORS = {
-			api: "#74c7ec",
-			auth: "#cba6f7",
-			storage: "#a6e3a1",
-			realtime: "#fab387",
-			system: "#6c7086"
+			api: "text-sky-600 dark:text-sky-400",
+			auth: "text-purple-600 dark:text-purple-400",
+			storage: "text-green-600 dark:text-green-500",
+			realtime: "text-orange-600 dark:text-orange-400",
+			system: "text-surface-600 dark:text-surface-400"
 		};
 	}));
 	//#endregion
+	//#region src/components/ApiKeys/ApiKeysView.tsx
+	var ApiKeysView_exports = /* @__PURE__ */ __exportAll({ ApiKeysView: () => ApiKeysView$1 });
+	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$1() {
+		const client = (0, _rebasepro_core.useRebaseClient)();
+		const snackbar = (0, _rebasepro_core.useSnackbarController)();
+		const [keys, setKeys] = (0, react.useState)([]);
+		const [loading, setLoading] = (0, react.useState)(true);
+		const [selectedId, setSelectedId] = (0, react.useState)(null);
+		const [showCreate, setShowCreate] = (0, react.useState)(false);
+		const [showSecret, setShowSecret] = (0, react.useState)(null);
+		const [revoking, setRevoking] = (0, react.useState)(null);
+		const clientRef = (0, react.useRef)(client);
+		clientRef.current = client;
+		const snackbarRef = (0, react.useRef)(snackbar);
+		snackbarRef.current = snackbar;
+		const loadKeys = (0, react.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);
+			}
+		}, []);
+		(0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex items-center justify-center h-full",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.CircularProgress, {})
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex h-full w-full overflow-hidden bg-white dark:bg-surface-950",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: (0, _rebasepro_ui.cls)("flex flex-col w-[340px] min-w-[280px] border-r h-full", _rebasepro_ui.defaultBorderMixin),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: (0, _rebasepro_ui.cls)("flex items-center justify-between px-4 py-2.5 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", _rebasepro_ui.defaultBorderMixin),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.KeyRoundIcon, {
+									size: _rebasepro_ui.iconSize.smallest,
+									className: "text-primary"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+									variant: "subtitle2",
+									className: "font-semibold",
+									children: "API Keys"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
+									size: "smallest",
+									className: "bg-surface-200 dark:bg-surface-700 text-surface-600 dark:text-surface-300",
+									children: activeKeys.length
+								})
+							]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.IconButton, {
+								size: "small",
+								onClick: loadKeys,
+								title: "Refresh",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.RefreshCwIcon, { size: _rebasepro_ui.iconSize.smallest })
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
+								size: "small",
+								color: "primary",
+								onClick: () => setShowCreate(true),
+								startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.PlusIcon, { size: _rebasepro_ui.iconSize.smallest }),
+								children: "New"
+							})]
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex-1 overflow-y-auto p-2 space-y-1",
+						children: [
+							activeKeys.length === 0 && inactiveKeys.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex flex-col items-center justify-center h-full gap-3 text-center p-6",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.KeyRoundIcon, {
+										size: _rebasepro_ui.iconSize.medium,
+										className: "text-surface-300 dark:text-surface-600"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+										variant: "body2",
+										color: "secondary",
+										children: "No API keys yet"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+										variant: "caption",
+										color: "disabled",
+										children: "Create a key to enable machine-to-machine authentication"
+									})
+								]
+							}),
+							activeKeys.map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyListItem, {
+								apiKey: key,
+								selected: selectedId === key.id,
+								onClick: () => setSelectedId(key.id)
+							}, key.id)),
+							inactiveKeys.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "px-2 pt-3 pb-1",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+									variant: "caption",
+									color: "disabled",
+									className: "text-[10px] uppercase tracking-wider font-medium",
+									children: "Revoked / Expired"
+								})
+							}), inactiveKeys.map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyListItem, {
+								apiKey: key,
+								selected: selectedId === key.id,
+								onClick: () => setSelectedId(key.id)
+							}, key.id))] })
+						]
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex-1 flex flex-col min-w-0 h-full overflow-hidden",
+					children: !selectedKey ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex items-center justify-center h-full",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+							variant: "body2",
+							color: "disabled",
+							children: "Select an API key to view details"
+						})
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: (0, _rebasepro_ui.cls)("flex items-center justify-between px-5 py-3 border-b bg-white dark:bg-surface-950 min-h-[56px]", _rebasepro_ui.defaultBorderMixin),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-3 min-w-0",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.KeyRoundIcon, {
+									size: _rebasepro_ui.iconSize.small,
+									className: "text-primary shrink-0"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+										variant: "subtitle1",
+										className: "font-semibold truncate",
+										children: selectedKey.name
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Typography, {
+										variant: "caption",
+										color: "secondary",
+										className: "font-mono text-[11px]",
+										children: [selectedKey.key_prefix, "•••"]
+									})]
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex items-center gap-2 shrink-0",
+								children: !selectedKey.revoked_at && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
+									size: "small",
+									color: "error",
+									variant: "outlined",
+									onClick: () => handleRevoke(selectedKey.id),
+									disabled: revoking === selectedKey.id,
+									startIcon: revoking === selectedKey.id ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.CircularProgress, { size: "smallest" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Trash2Icon, { size: _rebasepro_ui.iconSize.smallest }),
+									children: "Revoke"
+								})
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "px-5 py-4 bg-surface-50 dark:bg-surface-900/50",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "grid grid-cols-2 md:grid-cols-4 gap-3",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard, {
+										label: "Status",
+										value: keyStatus(selectedKey).label,
+										className: keyStatus(selectedKey).color
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard, {
+										label: "Created",
+										value: formatRelative(selectedKey.created_at)
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard, {
+										label: "Last Used",
+										value: formatRelative(selectedKey.last_used_at)
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard, {
+										label: "Expires",
+										value: selectedKey.expires_at ? formatRelative(selectedKey.expires_at) : "Never"
+									})
+								]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "grid grid-cols-2 gap-3 mt-3",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard, {
+									label: "Rate Limit",
+									value: selectedKey.rate_limit ? `${selectedKey.rate_limit}/15min` : "Default (1000/15min)"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCard, {
+									label: "Created By",
+									value: selectedKey.created_by,
+									mono: true
+								})]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: (0, _rebasepro_ui.cls)("flex items-center gap-2 px-5 py-2 border-y bg-white dark:bg-surface-950", _rebasepro_ui.defaultBorderMixin),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+								variant: "subtitle2",
+								className: "font-semibold text-[13px]",
+								children: "Permissions"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
+								size: "smallest",
+								className: "bg-surface-200 dark:bg-surface-700 text-surface-600 dark:text-surface-300",
+								children: selectedKey.permissions.length
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "flex-1 overflow-y-auto px-5 py-3",
+							children: selectedKey.permissions.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+								variant: "body2",
+								color: "disabled",
+								children: "No permissions configured"
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "space-y-2",
+								children: selectedKey.permissions.map((perm, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: (0, _rebasepro_ui.cls)("flex items-center gap-3 px-3 py-2 rounded-lg border", _rebasepro_ui.defaultBorderMixin),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+										variant: "body2",
+										className: "font-mono text-[13px] font-medium flex-1",
+										children: perm.collection === "*" ? "* (all collections)" : perm.collection
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "flex items-center gap-1",
+										children: perm.operations.map((op) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
+											size: "smallest",
+											className: (0, _rebasepro_ui.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__ */ (0, react_jsx_runtime.jsx)(CreateApiKeyDialog, {
+				onClose: () => setShowCreate(false),
+				onCreated: handleCreated
+			}),
+			showSecret && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecretDisplayDialog, {
+				keyWithSecret: showSecret,
+				onClose: () => setShowSecret(null)
+			})
+		] });
+	}
+	function KeyListItem({ apiKey, selected, onClick }) {
+		const status = keyStatus(apiKey);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			onClick,
+			className: (0, _rebasepro_ui.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__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, _rebasepro_ui.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex-1 min-w-0",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+						variant: "body2",
+						className: "truncate font-medium text-[13px]",
+						children: apiKey.name
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Typography, {
+						variant: "caption",
+						color: "secondary",
+						className: "truncate text-[11px] font-mono",
+						children: [apiKey.key_prefix, "•••"]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "shrink-0",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+						variant: "caption",
+						color: "disabled",
+						className: "text-[10px]",
+						children: permissionSummary(apiKey.permissions)
+					})
+				})
+			]
+		});
+	}
+	function StatCard({ label, value, mono, className }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, _rebasepro_ui.cls)("px-3 py-2 rounded-lg border bg-white dark:bg-surface-900", _rebasepro_ui.defaultBorderMixin),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+				variant: "caption",
+				color: "secondary",
+				className: "text-[10px] uppercase tracking-wider font-medium",
+				children: label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+				variant: "body2",
+				className: (0, _rebasepro_ui.cls)("mt-0.5 font-semibold text-[13px]", mono && "font-mono", className),
+				children: value
+			})]
+		});
+	}
+	function CreateApiKeyDialog({ onClose, onCreated }) {
+		const client = (0, _rebasepro_core.useRebaseClient)();
+		const snackbar = (0, _rebasepro_core.useSnackbarController)();
+		const [name, setName] = (0, react.useState)("");
+		const [permissions, setPermissions] = (0, react.useState)([{
+			collection: "*",
+			read: true,
+			write: false,
+			delete: false
+		}]);
+		const [rateLimit, setRateLimit] = (0, react.useState)("");
+		const [expiresIn, setExpiresIn] = (0, react.useState)("never");
+		const [creating, setCreating] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Dialog, {
+			open: true,
+			onOpenChange: (open) => {
+				if (!open) onClose();
+			},
+			maxWidth: "lg",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.DialogTitle, { children: "Create API Key" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogContent, {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TextField, {
+							label: "Name",
+							value: name,
+							onChange: (e) => setName(e.target.value),
+							placeholder: "e.g. Analytics Pipeline",
+							size: "small",
+							autoFocus: true
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+								variant: "caption",
+								color: "secondary",
+								className: "text-[11px] uppercase tracking-wider font-medium mb-2 block",
+								children: "Permissions"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "space-y-2",
+								children: permissions.map((row, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: (0, _rebasepro_ui.cls)("flex items-center gap-2 p-2 rounded-lg border", _rebasepro_ui.defaultBorderMixin),
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TextField, {
+											size: "small",
+											value: row.collection,
+											onChange: (e) => updateRow(idx, "collection", e.target.value),
+											placeholder: "Collection slug or *",
+											className: "flex-1"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+											className: "flex items-center gap-1 text-xs cursor-pointer",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Checkbox, {
+												size: "small",
+												checked: row.read,
+												onCheckedChange: (v) => updateRow(idx, "read", !!v)
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "text-emerald-600 dark:text-emerald-400",
+												children: "read"
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+											className: "flex items-center gap-1 text-xs cursor-pointer",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Checkbox, {
+												size: "small",
+												checked: row.write,
+												onCheckedChange: (v) => updateRow(idx, "write", !!v)
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "text-blue-600 dark:text-blue-400",
+												children: "write"
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+											className: "flex items-center gap-1 text-xs cursor-pointer",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Checkbox, {
+												size: "small",
+												checked: row.delete,
+												onCheckedChange: (v) => updateRow(idx, "delete", !!v)
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "text-red-600 dark:text-red-400",
+												children: "delete"
+											})]
+										}),
+										permissions.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.IconButton, {
+											size: "small",
+											onClick: () => removeRow(idx),
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Trash2Icon, { size: _rebasepro_ui.iconSize.smallest })
+										})
+									]
+								}, idx))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
+								size: "small",
+								variant: "text",
+								onClick: addRow,
+								className: "mt-1",
+								startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.PlusIcon, { size: _rebasepro_ui.iconSize.smallest }),
+								children: "Add collection"
+							})
+						] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex gap-4",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex-1",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.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__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.SelectItem, {
+											value: "never",
+											children: "Never"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.SelectItem, {
+											value: "7d",
+											children: "7 days"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.SelectItem, {
+											value: "30d",
+											children: "30 days"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.SelectItem, {
+											value: "90d",
+											children: "90 days"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.SelectItem, {
+											value: "1y",
+											children: "1 year"
+										})
+									]
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex-1",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TextField, {
+									label: "Rate Limit (per 15 min)",
+									value: rateLimit,
+									onChange: (e) => setRateLimit(e.target.value.replace(/\D/g, "")),
+									placeholder: "Default: 1000",
+									size: "small"
+								})
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogActions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
+					variant: "text",
+					onClick: onClose,
+					children: "Cancel"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
+					color: "primary",
+					onClick: handleCreate,
+					disabled: creating || !name.trim(),
+					startIcon: creating ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.CircularProgress, { size: "smallest" }) : void 0,
+					children: "Create Key"
+				})] })
+			]
+		});
+	}
+	function SecretDisplayDialog({ keyWithSecret, onClose }) {
+		const snackbar = (0, _rebasepro_core.useSnackbarController)();
+		const [copied, setCopied] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Dialog, {
+			open: true,
+			onOpenChange: (open) => {
+				if (!open) onClose();
+			},
+			maxWidth: "md",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.DialogTitle, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.CheckCircleIcon, {
+						size: _rebasepro_ui.iconSize.small,
+						className: "text-emerald-500"
+					}), "API Key Created"]
+				}) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.DialogContent, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2 mb-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.AlertCircleIcon, {
+								size: _rebasepro_ui.iconSize.smallest,
+								className: "text-amber-600 dark:text-amber-400"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.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__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: (0, _rebasepro_ui.cls)("flex items-center gap-2 p-3 rounded-lg border bg-surface-50 dark:bg-surface-900", _rebasepro_ui.defaultBorderMixin),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+							className: "flex-1 text-[12px] font-mono break-all text-surface-700 dark:text-surface-300 select-all",
+							children: keyWithSecret.key
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Tooltip, {
+							title: copied ? "Copied!" : "Copy",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.IconButton, {
+								size: "small",
+								onClick: handleCopy,
+								children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.CheckCircleIcon, {
+									size: _rebasepro_ui.iconSize.smallest,
+									className: "text-emerald-500"
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.CopyIcon, { size: _rebasepro_ui.iconSize.smallest })
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mt-4 space-y-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Typography, {
+							variant: "caption",
+							color: "secondary",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Name:" }),
+								" ",
+								keyWithSecret.name
+							]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Typography, {
+							variant: "caption",
+							color: "secondary",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Permissions:" }),
+								" ",
+								permissionSummary(keyWithSecret.permissions)
+							]
+						})]
+					})
+				] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.DialogActions, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
+					color: "primary",
+					onClick: onClose,
+					children: "Done"
+				}) })
+			]
+		});
+	}
+	var init_ApiKeysView = __esmMin((() => {}));
+	//#endregion
 	//#region src/components/RebaseStudio.tsx
 	var SQLEditor = (0, react.lazy)(() => Promise.resolve().then(() => (init_SQLEditor(), SQLEditor_exports)).then((m) => ({ default: m.SQLEditor })));
 	var JSEditor = (0, react.lazy)(() => Promise.resolve().then(() => (init_JSEditor(), JSEditor_exports)).then((m) => ({ default: m.JSEditor })));
@@ -10398,6 +11257,7 @@ return result;
 	var BranchesView = (0, react.lazy)(() => Promise.resolve().then(() => (init_BranchesView(), BranchesView_exports)).then((m) => ({ default: m.BranchesView })));
 	var ApiExplorer = (0, react.lazy)(() => Promise.resolve().then(() => (init_ApiExplorer(), ApiExplorer_exports)).then((m) => ({ default: m.ApiExplorer })));
 	var LogsExplorer = (0, react.lazy)(() => Promise.resolve().then(() => (init_LogsExplorer(), LogsExplorer_exports)).then((m) => ({ default: m.LogsExplorer })));
+	var ApiKeysView = (0, react.lazy)(() => Promise.resolve().then(() => (init_ApiKeysView(), ApiKeysView_exports)).then((m) => ({ default: m.ApiKeysView })));
 	/**
 	* Declarative component to configure the Studio in Rebase.
 	* Renders nothing — purely registers config into the RebaseRegistry.
@@ -10421,7 +11281,8 @@ return result;
 				"schema-visualizer",
 				"branches",
 				"api",
-				"logs"
+				"logs",
+				"api-keys"
 			];
 			const suspense = (el) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
 				fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.CircularProgressCenter, {}),
@@ -10499,6 +11360,14 @@ return result;
 				description: "Real-time system and query logs",
 				view: suspense(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogsExplorer, {}))
 			});
+			if (activeTools.includes("api-keys")) views.push({
+				slug: "api-keys",
+				name: "API Keys",
+				group: "Access Control",
+				icon: "KeyRound",
+				description: "Create and manage scoped API keys",
+				view: suspense(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApiKeysView, {}))
+			});
 			return views;
 		}, [tools]);
 		const homePageRef = react.default.useRef(resolvedHomePage);