@rebasepro/core 0.6.0 → 0.6.1

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import React, { createContext, lazy, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Alert, AlertTriangleIcon, ArrowLeftIcon, Avatar, BooleanSwitch, Button, CHIP_COLORS, CenteredView, CheckIcon, Checkbox, ChevronDownIcon, ChevronsLeftIcon, ChevronsRightIcon, Chip, CircleUserIcon, CircularProgress, Container, Dialog, DialogActions, DialogContent, DialogTitle, ErrorBoundary, FolderIcon, IconButton, LanguagesIcon, LoadingButton, LogOutIcon, MailIcon, Menu, MenuItem, MoonIcon, MultiSelect, MultiSelectItem, Paper, PencilIcon, PlusIcon, Popover, SearchBar, Select, SelectItem, Separator, SettingsIcon, Skeleton, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableRow, Tabs, TagIcon, TextField, Tooltip, Trash2Icon, Typography, UserIcon, Wand2Icon, cls, colorClassesMapping, coolIconKeys, defaultBorderMixin, getColorSchemeForSeed, iconKeys, iconSize, lucideIcons } from "@rebasepro/ui";
+import { Alert, AlertCircleIcon, AlertTriangleIcon, AppWindow, ArrowLeftIcon, Avatar, BooleanSwitch, Button, CHIP_COLORS, CenteredView, CheckIcon, Checkbox, ChevronDownIcon, ChevronsLeftIcon, ChevronsRightIcon, Chip, CircleUserIcon, CircularProgress, ColumnsIcon, Container, Dialog, DialogActions, DialogContent, DialogTitle, ErrorBoundary, FileIcon, FileTextIcon, FilterChip, FilterIcon, FolderIcon, IconButton, LanguagesIcon, ListIcon, LoadingButton, LogOutIcon, MailIcon, Menu, MenuItem, MoonIcon, MultiSelect, MultiSelectItem, PanelLeftIcon, Paper, PencilIcon, PlusIcon, Popover, SearchBar, Select, SelectItem, Separator, SettingsIcon, Skeleton, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableRow, Tabs, TagIcon, TextField, Tooltip, Trash2Icon, TypeIcon, Typography, UserIcon, Wand2Icon, cls, colorClassesMapping, coolIconKeys, defaultBorderMixin, getColorSchemeForSeed, iconKeys, iconSize, lucideIcons } from "@rebasepro/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import { EntityReference, EntityRelation, GeoPoint, Vector, isLazyComponentRef } from "@rebasepro/types";
@@ -2932,70 +2932,79 @@ var UIStyleGuide = () => {
 var SECTIONS = [
 	{
 		id: "drawer",
-		label: "Drawer"
+		label: "Drawer",
+		icon: PanelLeftIcon
 	},
 	{
 		id: "appbar",
-		label: "App Bar"
+		label: "App Bar",
+		icon: AppWindow
 	},
 	{
 		id: "tabs",
-		label: "Tabs"
+		label: "Tabs",
+		icon: ListIcon
 	},
 	{
 		id: "editor-sidebar",
-		label: "Editor Sidebar"
+		label: "Editor Sidebar",
+		icon: ColumnsIcon
 	},
 	{
 		id: "empty-states",
-		label: "Empty States"
+		label: "Empty States",
+		icon: FileIcon
 	},
 	{
 		id: "typography",
-		label: "Typography"
+		label: "Typography",
+		icon: TypeIcon
 	},
 	{
 		id: "buttons",
-		label: "Buttons"
+		label: "Buttons",
+		icon: PlusIcon
 	},
 	{
 		id: "inputs",
-		label: "Form Inputs"
+		label: "Form Inputs",
+		icon: FileTextIcon
 	},
 	{
 		id: "chips-alerts",
-		label: "Chips & Alerts"
+		label: "Chips & Alerts",
+		icon: AlertCircleIcon
 	},
 	{
 		id: "users",
-		label: "Users View"
+		label: "Users View",
+		icon: UserIcon
 	},
 	{
 		id: "user-dialog",
-		label: "User Dialog"
-	},
-	{
-		id: "roles",
-		label: "Roles View"
-	},
-	{
-		id: "role-dialog",
-		label: "Role Dialog"
+		label: "User Dialog",
+		icon: CircleUserIcon
 	}
 ];
 function UIReferenceView() {
 	const [activeSection, setActiveSection] = useState("drawer");
+	const scrollContainerRef = React.useRef(null);
 	const scrollTo = (id) => {
-		document.getElementById(id)?.scrollIntoView({
-			behavior: "smooth",
-			block: "start"
-		});
+		const el = document.getElementById(id);
+		const container = scrollContainerRef.current;
+		if (el && container) {
+			const offsetTop = el.offsetTop - container.offsetTop;
+			container.scrollTo({
+				top: offsetTop,
+				behavior: "smooth"
+			});
+		}
 		setActiveSection(id);
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-full w-full overflow-hidden",
+		className: "flex w-full",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cls("flex flex-col h-full relative grow-0 shrink-0 w-[200px] border-r", defaultBorderMixin),
+			className: cls("flex flex-col sticky top-0 h-screen grow-0 shrink-0 w-[200px] border-r", defaultBorderMixin),
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2",
@@ -3029,17 +3038,20 @@ function UIReferenceView() {
 							})]
 						}), /* @__PURE__ */ jsx("div", {
 							className: "overflow-hidden bg-surface-50 dark:bg-surface-950/30 rounded-b-lg",
-							children: SECTIONS.map((s) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", {
-								onClick: () => scrollTo(s.id),
-								className: cls("rounded-lg truncate", "hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800/75 text-text-primary dark:text-surface-200 hover:text-surface-900 dark:hover:text-white", "flex flex-row items-center", "pr-4 h-10", "font-semibold text-xs cursor-pointer", activeSection === s.id ? "bg-surface-accent-200/60 dark:bg-surface-950 dark:bg-opacity-50" : ""),
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark",
-									children: /* @__PURE__ */ jsx(SettingsIcon, { size: iconSize.small })
-								}), /* @__PURE__ */ jsx("div", {
-									className: "text-text-primary dark:text-surface-200 opacity-100 font-inherit truncate space-x-2",
-									children: s.label.toUpperCase()
-								})]
-							}) }, s.id))
+							children: SECTIONS.map((s) => {
+								const IconComponent = s.icon;
+								return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", {
+									onClick: () => scrollTo(s.id),
+									className: cls("rounded-lg truncate group/nav", "hover:bg-primary/5 dark:hover:bg-primary/5 text-text-primary dark:text-surface-200 hover:text-surface-900 dark:hover:text-white", "flex flex-row items-center", "pr-4 h-10", "font-medium text-xs cursor-pointer", activeSection === s.id ? "bg-primary/8 dark:bg-primary/10 text-primary dark:text-primary" : ""),
+									children: [/* @__PURE__ */ jsx("div", {
+										className: cls("shrink-0 flex items-center justify-center w-[56px] h-[40px] text-surface-500 dark:text-text-secondary-dark transition-colors duration-150 group-hover/nav:text-primary", activeSection === s.id && "text-primary dark:text-primary"),
+										children: /* @__PURE__ */ jsx(IconComponent, { size: iconSize.small })
+									}), /* @__PURE__ */ jsx("div", {
+										className: "text-text-primary dark:text-surface-200 opacity-100 font-inherit truncate space-x-2",
+										children: s.label.toUpperCase()
+									})]
+								}) }, s.id);
+							})
 						})]
 					})
 				}),
@@ -3059,7 +3071,8 @@ function UIReferenceView() {
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex-1 overflow-y-auto",
+			ref: scrollContainerRef,
+			className: "flex-1",
 			children: [
 				/* @__PURE__ */ jsxs(SectionBlock, {
 					id: "drawer",
@@ -3094,7 +3107,7 @@ function UIReferenceView() {
 							className: "block mb-1",
 							children: "Collapsed (72px)"
 						}), /* @__PURE__ */ jsxs("div", {
-							className: cls("flex flex-col h-72 relative w-[72px] border rounded-lg overflow-hidden", defaultBorderMixin),
+							className: cls("flex flex-col h-72 relative w-[72px] border rounded-lg overflow-hidden bg-white dark:bg-surface-900", defaultBorderMixin),
 							children: [
 								/* @__PURE__ */ jsx("div", {
 									className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2",
@@ -3117,7 +3130,7 @@ function UIReferenceView() {
 												/* @__PURE__ */ jsx(UserIcon, { size: iconSize.small }, "user"),
 												/* @__PURE__ */ jsx(TagIcon, { size: iconSize.small }, "tag")
 											].map((icon, i) => /* @__PURE__ */ jsx("div", {
-												className: "rounded-lg truncate hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800/75 flex flex-row items-center h-10",
+												className: "rounded-lg truncate hover:bg-primary/5 dark:hover:bg-primary/5 flex flex-row items-center h-10",
 												children: /* @__PURE__ */ jsx("div", {
 													className: "shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark",
 													children: icon
@@ -3143,7 +3156,7 @@ function UIReferenceView() {
 							className: "block mb-1",
 							children: "Expanded (280px)"
 						}), /* @__PURE__ */ jsxs("div", {
-							className: cls("flex flex-col h-72 relative w-[280px] border rounded-lg overflow-hidden", defaultBorderMixin),
+							className: cls("flex flex-col h-72 relative w-[280px] border rounded-lg overflow-hidden bg-white dark:bg-surface-900", defaultBorderMixin),
 							children: [
 								/* @__PURE__ */ jsxs("div", {
 									className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2",
@@ -3197,9 +3210,9 @@ function UIReferenceView() {
 													active: false
 												}
 											].map(({ label, icon, active }) => /* @__PURE__ */ jsxs("div", {
-												className: cls("rounded-lg truncate hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800/75 text-text-primary dark:text-surface-200 hover:text-surface-900 dark:hover:text-white flex flex-row items-center pr-4 h-10 font-semibold text-xs cursor-pointer", active ? "bg-surface-accent-200/60 dark:bg-surface-950 dark:bg-opacity-50" : ""),
+												className: cls("rounded-lg truncate hover:bg-primary/5 dark:hover:bg-primary/5 text-text-primary dark:text-surface-200 hover:text-surface-900 dark:hover:text-white flex flex-row items-center pr-4 h-10 font-medium text-xs cursor-pointer", active ? "bg-primary/8 dark:bg-primary/10 text-primary dark:text-primary" : ""),
 												children: [/* @__PURE__ */ jsx("div", {
-													className: "shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark",
+													className: cls("shrink-0 flex items-center justify-center w-[56px] h-[40px] transition-colors duration-150", active ? "text-primary dark:text-primary" : "text-surface-500 dark:text-text-secondary-dark"),
 													children: icon
 												}), /* @__PURE__ */ jsx("div", {
 													className: "text-text-primary dark:text-surface-200 font-inherit truncate",
@@ -3950,29 +3963,70 @@ function UIReferenceView() {
 								variant: "caption",
 								color: "secondary",
 								className: "block mb-2 font-mono",
-								children: "IconButton"
+								children: "IconButton — sizes"
 							}), /* @__PURE__ */ jsxs("div", {
 								className: "flex flex-wrap gap-3 items-center",
 								children: [
 									[
-										"primary",
-										"secondary",
-										"inherit"
-									].map((c) => /* @__PURE__ */ jsx(IconButton, {
-										color: c,
-										children: /* @__PURE__ */ jsx(PencilIcon, {})
-									}, c)),
-									[
-										"small",
-										"medium",
-										"large"
-									].map((s) => /* @__PURE__ */ jsx(IconButton, {
-										size: s,
-										children: /* @__PURE__ */ jsx(Trash2Icon, {})
+										{
+											s: "smallest",
+											icon: /* @__PURE__ */ jsx(PencilIcon, { size: 14 })
+										},
+										{
+											s: "small",
+											icon: /* @__PURE__ */ jsx(PencilIcon, { size: 16 })
+										},
+										{
+											s: "medium",
+											icon: /* @__PURE__ */ jsx(PencilIcon, { size: 20 })
+										},
+										{
+											s: "large",
+											icon: /* @__PURE__ */ jsx(PencilIcon, { size: 24 })
+										}
+									].map(({ s, icon }) => /* @__PURE__ */ jsxs("div", {
+										className: "flex flex-col items-center gap-1",
+										children: [/* @__PURE__ */ jsx(IconButton, {
+											size: s,
+											children: icon
+										}), /* @__PURE__ */ jsx(Typography, {
+											variant: "caption",
+											color: "secondary",
+											children: s
+										})]
 									}, s)),
-									/* @__PURE__ */ jsx(IconButton, {
-										disabled: true,
-										children: /* @__PURE__ */ jsx(PlusIcon, {})
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex flex-col items-center gap-1",
+										children: [/* @__PURE__ */ jsx(IconButton, {
+											disabled: true,
+											children: /* @__PURE__ */ jsx(Trash2Icon, { size: 20 })
+										}), /* @__PURE__ */ jsx(Typography, {
+											variant: "caption",
+											color: "secondary",
+											children: "disabled"
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex flex-col items-center gap-1",
+										children: [/* @__PURE__ */ jsx(IconButton, {
+											variant: "filled",
+											children: /* @__PURE__ */ jsx(PlusIcon, { size: 20 })
+										}), /* @__PURE__ */ jsx(Typography, {
+											variant: "caption",
+											color: "secondary",
+											children: "filled"
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex flex-col items-center gap-1",
+										children: [/* @__PURE__ */ jsx(IconButton, {
+											shape: "square",
+											children: /* @__PURE__ */ jsx(SettingsIcon, { size: 20 })
+										}), /* @__PURE__ */ jsx(Typography, {
+											variant: "caption",
+											color: "secondary",
+											children: "square"
+										})]
 									})
 								]
 							})] }),
@@ -4177,42 +4231,123 @@ function UIReferenceView() {
 							variant: "caption",
 							color: "secondary",
 							className: "block mb-2 font-mono",
-							children: "Chip — colorScheme × size"
+							children: "Chip — colorScheme"
 						}),
 						/* @__PURE__ */ jsx("div", {
 							className: "flex flex-wrap gap-2 mb-4",
 							children: [
-								"grayLight",
-								"grayDark",
-								"redLight",
-								"redDark",
-								"blueDark",
-								"blueLight",
-								"greenDark",
-								"greenLight",
-								"yellowLight",
-								"yellowDark",
-								"orangeLight",
-								"purpleDark",
-								"pinkLight"
+								"blue",
+								"teal",
+								"red",
+								"green",
+								"yellow",
+								"orange",
+								"purple",
+								"pink",
+								"cyan",
+								"indigo",
+								"violet",
+								"fuchsia",
+								"rose",
+								"emerald",
+								"gray"
 							].map((s) => /* @__PURE__ */ jsx(Chip, {
 								colorScheme: s,
-								size: "small",
 								children: s
 							}, s))
 						}),
+						/* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							color: "secondary",
+							className: "block mb-2 font-mono",
+							children: "Chip — sizes"
+						}),
 						/* @__PURE__ */ jsx("div", {
-							className: "flex flex-wrap gap-2 mb-6",
+							className: "flex flex-wrap gap-2 items-center mb-4",
 							children: [
 								"smallest",
 								"small",
-								"medium"
+								"medium",
+								"large"
 							].map((sz) => /* @__PURE__ */ jsx(Chip, {
-								colorScheme: "blueDark",
+								colorScheme: "blue",
 								size: sz,
 								children: sz
 							}, sz))
 						}),
+						/* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							color: "secondary",
+							className: "block mb-2 font-mono",
+							children: "Chip — outlined, error, clickable, icon"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap gap-2 items-center mb-4",
+							children: [
+								/* @__PURE__ */ jsx(Chip, {
+									colorScheme: "red",
+									outlined: true,
+									children: "Outlined Red"
+								}),
+								/* @__PURE__ */ jsx(Chip, {
+									colorScheme: "blue",
+									outlined: true,
+									children: "Outlined Blue"
+								}),
+								/* @__PURE__ */ jsx(Chip, {
+									error: true,
+									children: "Error"
+								}),
+								/* @__PURE__ */ jsx(Chip, {
+									error: true,
+									outlined: true,
+									children: "Error Outlined"
+								}),
+								/* @__PURE__ */ jsx(Chip, {
+									onClick: () => {},
+									children: "Clickable"
+								}),
+								/* @__PURE__ */ jsx(Chip, {
+									icon: /* @__PURE__ */ jsx(TagIcon, { size: 12 }),
+									colorScheme: "teal",
+									children: "With Icon"
+								}),
+								/* @__PURE__ */ jsx(Chip, { children: "Default (no scheme)" }),
+								/* @__PURE__ */ jsx(Chip, {
+									outlined: true,
+									children: "Default Outlined"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							color: "secondary",
+							className: "block mb-2 font-mono",
+							children: "FilterChip"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap gap-2 items-center mb-6",
+							children: [
+								/* @__PURE__ */ jsx(FilterChip, {
+									active: true,
+									children: "Active"
+								}),
+								/* @__PURE__ */ jsx(FilterChip, { children: "Inactive" }),
+								/* @__PURE__ */ jsx(FilterChip, {
+									icon: /* @__PURE__ */ jsx(FilterIcon, { size: 12 }),
+									active: true,
+									children: "With Icon"
+								}),
+								/* @__PURE__ */ jsx(FilterChip, {
+									size: "small",
+									children: "Small"
+								}),
+								/* @__PURE__ */ jsx(FilterChip, {
+									disabled: true,
+									children: "Disabled"
+								})
+							]
+						}),
 						/* @__PURE__ */ jsx(Typography, {
 							variant: "caption",
 							color: "secondary",
@@ -4510,271 +4645,6 @@ function UIReferenceView() {
 							})
 						]
 					})]
-				}),
-				/* @__PURE__ */ jsxs(SectionBlock, {
-					id: "roles",
-					title: "Roles View — RolesView.tsx",
-					children: [
-						/* @__PURE__ */ jsxs(Typography, {
-							variant: "body2",
-							color: "secondary",
-							className: "mb-4",
-							children: [
-								"Layout from ",
-								/* @__PURE__ */ jsx("code", {
-									className: "font-mono text-xs",
-									children: "RolesView"
-								}),
-								": same header pattern, table, and ",
-								/* @__PURE__ */ jsx("code", {
-									className: "font-mono text-xs",
-									children: "CollectionPermissionsMatrix"
-								}),
-								" with ",
-								/* @__PURE__ */ jsx("code", {
-									className: "font-mono text-xs",
-									children: "defaultBorderMixin"
-								}),
-								"."
-							]
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center mt-12",
-							children: [/* @__PURE__ */ jsx(Typography, {
-								gutterBottom: true,
-								variant: "h4",
-								className: "grow",
-								component: "h4",
-								children: "Roles"
-							}), /* @__PURE__ */ jsx(Button, {
-								startIcon: /* @__PURE__ */ jsx(PlusIcon, {}),
-								children: "Add role"
-							})]
-						}),
-						/* @__PURE__ */ jsx("div", {
-							className: "w-full overflow-auto",
-							children: /* @__PURE__ */ jsxs(Table, {
-								className: "w-full",
-								children: [/* @__PURE__ */ jsxs(TableHeader, { children: [
-									/* @__PURE__ */ jsx(TableCell, {
-										header: true,
-										className: "w-16"
-									}),
-									/* @__PURE__ */ jsx(TableCell, {
-										header: true,
-										children: "Role"
-									}),
-									/* @__PURE__ */ jsx(TableCell, {
-										header: true,
-										className: "items-center",
-										children: "Is Admin"
-									})
-								] }), /* @__PURE__ */ jsx(TableBody, { children: [
-									{
-										id: "admin",
-										name: "Admin",
-										isAdmin: true
-									},
-									{
-										id: "editor",
-										name: "Editor",
-										isAdmin: false
-									},
-									{
-										id: "viewer",
-										name: "Viewer",
-										isAdmin: false
-									}
-								].map((role) => /* @__PURE__ */ jsxs(TableRow, { children: [
-									/* @__PURE__ */ jsx(TableCell, {
-										style: { width: "64px" },
-										children: !role.isAdmin && /* @__PURE__ */ jsx(Tooltip, {
-											asChild: true,
-											title: "Delete this role",
-											children: /* @__PURE__ */ jsx(IconButton, {
-												size: "small",
-												children: /* @__PURE__ */ jsx(Trash2Icon, {})
-											})
-										})
-									}),
-									/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Chip, {
-										colorScheme: role.isAdmin ? "purpleDark" : "blueDark",
-										size: "small",
-										children: role.name
-									}) }),
-									/* @__PURE__ */ jsx(TableCell, {
-										className: "items-center",
-										children: /* @__PURE__ */ jsx(Checkbox, {
-											checked: role.isAdmin ?? false,
-											disabled: true
-										})
-									})
-								] }, role.id)) })]
-							})
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "mt-4",
-							children: [/* @__PURE__ */ jsx(Typography, {
-								variant: "label",
-								className: "mb-2 block text-surface-500 dark:text-surface-400 uppercase tracking-wide text-xs",
-								children: "Collection permissions"
-							}), /* @__PURE__ */ jsx("div", {
-								className: `rounded-lg overflow-hidden border w-full ${defaultBorderMixin}`,
-								children: /* @__PURE__ */ jsxs(Table, {
-									className: "w-full",
-									children: [/* @__PURE__ */ jsxs(TableHeader, { children: [/* @__PURE__ */ jsx(TableCell, {
-										header: true,
-										children: "Collection"
-									}), [
-										"Read",
-										"Create",
-										"Edit",
-										"Delete"
-									].map((op) => /* @__PURE__ */ jsx(TableCell, {
-										header: true,
-										align: "center",
-										className: "w-20",
-										children: op
-									}, op))] }), /* @__PURE__ */ jsx(TableBody, { children: [{
-										name: "Posts",
-										slug: "posts"
-									}, {
-										name: "Authors",
-										slug: "authors"
-									}].map((col) => /* @__PURE__ */ jsxs(TableRow, { children: [/* @__PURE__ */ jsxs(TableCell, { children: [/* @__PURE__ */ jsxs("div", {
-										className: "flex items-center gap-1.5",
-										children: [/* @__PURE__ */ jsx("span", {
-											className: "font-medium",
-											children: col.name
-										}), /* @__PURE__ */ jsx(Tooltip, {
-											title: "No security rules defined — all operations unrestricted",
-											children: /* @__PURE__ */ jsx(Chip, {
-												size: "smallest",
-												colorScheme: "gray",
-												children: "no rules"
-											})
-										})]
-									}), /* @__PURE__ */ jsx("span", {
-										className: "text-xs text-surface-400 font-mono",
-										children: col.slug
-									})] }), [
-										"select",
-										"insert",
-										"update",
-										"delete"
-									].map((op) => /* @__PURE__ */ jsx(TableCell, {
-										align: "center",
-										className: "w-20",
-										children: /* @__PURE__ */ jsx("span", {
-											className: "text-green-500 dark:text-green-400 font-bold",
-											children: "✓"
-										})
-									}, op))] }, col.slug)) })]
-								})
-							})]
-						})
-					]
-				}),
-				/* @__PURE__ */ jsxs(SectionBlock, {
-					id: "role-dialog",
-					title: "Role Dialog — RoleDetailsForm",
-					children: [/* @__PURE__ */ jsxs(Typography, {
-						variant: "body2",
-						color: "secondary",
-						className: "mb-4",
-						children: [
-							"Exact structure of ",
-							/* @__PURE__ */ jsx("code", {
-								className: "font-mono text-xs",
-								children: "RoleDetailsForm"
-							}),
-							": ",
-							/* @__PURE__ */ jsx("code", {
-								className: "font-mono text-xs",
-								children: "col-span-4"
-							}),
-							" grid, Role ID + Name + Is Admin checkbox."
-						]
-					}), /* @__PURE__ */ jsxs("div", {
-						className: `rounded-lg border w-full max-w-xl ${defaultBorderMixin}`,
-						children: [
-							/* @__PURE__ */ jsx("div", {
-								className: "px-6 pt-6 pb-2",
-								children: /* @__PURE__ */ jsx(Typography, {
-									variant: "h4",
-									children: "Role"
-								})
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "px-6 py-4",
-								children: /* @__PURE__ */ jsxs("div", {
-									className: "grid grid-cols-12 gap-4",
-									children: [
-										/* @__PURE__ */ jsx("div", {
-											className: "col-span-12 sm:col-span-4",
-											children: /* @__PURE__ */ jsx(TextField, {
-												name: "id",
-												required: true,
-												value: "editor",
-												onChange: () => {},
-												label: "Role ID",
-												disabled: true
-											})
-										}),
-										/* @__PURE__ */ jsx("div", {
-											className: "col-span-12 sm:col-span-4",
-											children: /* @__PURE__ */ jsx(TextField, {
-												name: "name",
-												required: true,
-												value: "Editor",
-												onChange: () => {},
-												label: "Role Name"
-											})
-										}),
-										/* @__PURE__ */ jsx("div", {
-											className: "col-span-12 sm:col-span-4 flex items-start pt-2",
-											children: /* @__PURE__ */ jsxs("label", {
-												className: "flex items-center gap-2 cursor-pointer mt-3",
-												children: [/* @__PURE__ */ jsx(Checkbox, {
-													checked: false,
-													onCheckedChange: () => {}
-												}), /* @__PURE__ */ jsx("span", {
-													className: "font-medium",
-													children: "Is Admin"
-												})]
-											})
-										})
-									]
-								})
-							}),
-							/* @__PURE__ */ jsxs("div", {
-								className: "flex items-center justify-end gap-2 px-6 pb-6",
-								children: [/* @__PURE__ */ jsx(Button, {
-									variant: "text",
-									children: "Cancel"
-								}), /* @__PURE__ */ jsx(LoadingButton, {
-									variant: "filled",
-									loading: false,
-									children: "Update"
-								})]
-							})
-						]
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "px-6 py-8",
-					children: /* @__PURE__ */ jsxs(Typography, {
-						variant: "caption",
-						color: "secondary",
-						children: [
-							"Hidden debug reference — ",
-							/* @__PURE__ */ jsx("code", {
-								className: "font-mono text-xs",
-								children: "/debug/ui"
-							}),
-							". Not linked from sidebar."
-						]
-					})
 				})
 			]
 		})]
@@ -5652,7 +5522,7 @@ function LoginView({ logo, authController, noUserComponent, disableSignupScreen
 							})
 						] })]
 					}),
-					additionalComponent && /* @__PURE__ */ jsx("div", {
+					additionalComponent && mode === "buttons" && /* @__PURE__ */ jsx("div", {
 						className: "w-full",
 						children: additionalComponent
 					})