@rebasepro/core 0.6.0 → 0.6.1

package/dist/index.umd.js

@@ -2964,70 +2964,79 @@
 	var SECTIONS = [
 		{
 			id: "drawer",
-			label: "Drawer"
+			label: "Drawer",
+			icon: _rebasepro_ui.PanelLeftIcon
 		},
 		{
 			id: "appbar",
-			label: "App Bar"
+			label: "App Bar",
+			icon: _rebasepro_ui.AppWindow
 		},
 		{
 			id: "tabs",
-			label: "Tabs"
+			label: "Tabs",
+			icon: _rebasepro_ui.ListIcon
 		},
 		{
 			id: "editor-sidebar",
-			label: "Editor Sidebar"
+			label: "Editor Sidebar",
+			icon: _rebasepro_ui.ColumnsIcon
 		},
 		{
 			id: "empty-states",
-			label: "Empty States"
+			label: "Empty States",
+			icon: _rebasepro_ui.FileIcon
 		},
 		{
 			id: "typography",
-			label: "Typography"
+			label: "Typography",
+			icon: _rebasepro_ui.TypeIcon
 		},
 		{
 			id: "buttons",
-			label: "Buttons"
+			label: "Buttons",
+			icon: _rebasepro_ui.PlusIcon
 		},
 		{
 			id: "inputs",
-			label: "Form Inputs"
+			label: "Form Inputs",
+			icon: _rebasepro_ui.FileTextIcon
 		},
 		{
 			id: "chips-alerts",
-			label: "Chips & Alerts"
+			label: "Chips & Alerts",
+			icon: _rebasepro_ui.AlertCircleIcon
 		},
 		{
 			id: "users",
-			label: "Users View"
+			label: "Users View",
+			icon: _rebasepro_ui.UserIcon
 		},
 		{
 			id: "user-dialog",
-			label: "User Dialog"
-		},
-		{
-			id: "roles",
-			label: "Roles View"
-		},
-		{
-			id: "role-dialog",
-			label: "Role Dialog"
+			label: "User Dialog",
+			icon: _rebasepro_ui.CircleUserIcon
 		}
 	];
 	function UIReferenceView() {
 		const [activeSection, setActiveSection] = (0, react.useState)("drawer");
+		const scrollContainerRef = react.default.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex h-full w-full overflow-hidden",
+			className: "flex w-full",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, _rebasepro_ui.cls)("flex flex-col h-full relative grow-0 shrink-0 w-[200px] border-r", _rebasepro_ui.defaultBorderMixin),
+				className: (0, _rebasepro_ui.cls)("flex flex-col sticky top-0 h-screen grow-0 shrink-0 w-[200px] border-r", _rebasepro_ui.defaultBorderMixin),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2",
@@ -3061,17 +3070,20 @@
 								})]
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "overflow-hidden bg-surface-50 dark:bg-surface-950/30 rounded-b-lg",
-								children: SECTIONS.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									onClick: () => scrollTo(s.id),
-									className: (0, _rebasepro_ui.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__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.SettingsIcon, { size: _rebasepro_ui.iconSize.small })
-									}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										onClick: () => scrollTo(s.id),
+										className: (0, _rebasepro_ui.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__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: (0, _rebasepro_ui.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__ */ (0, react_jsx_runtime.jsx)(IconComponent, { size: _rebasepro_ui.iconSize.small })
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: "text-text-primary dark:text-surface-200 opacity-100 font-inherit truncate space-x-2",
+											children: s.label.toUpperCase()
+										})]
+									}) }, s.id);
+								})
 							})]
 						})
 					}),
@@ -3091,7 +3103,8 @@
 					})
 				]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex-1 overflow-y-auto",
+				ref: scrollContainerRef,
+				className: "flex-1",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SectionBlock, {
 						id: "drawer",
@@ -3126,7 +3139,7 @@
 								className: "block mb-1",
 								children: "Collapsed (72px)"
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: (0, _rebasepro_ui.cls)("flex flex-col h-72 relative w-[72px] border rounded-lg overflow-hidden", _rebasepro_ui.defaultBorderMixin),
+								className: (0, _rebasepro_ui.cls)("flex flex-col h-72 relative w-[72px] border rounded-lg overflow-hidden bg-white dark:bg-surface-900", _rebasepro_ui.defaultBorderMixin),
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2",
@@ -3149,7 +3162,7 @@
 													/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.UserIcon, { size: _rebasepro_ui.iconSize.small }, "user"),
 													/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TagIcon, { size: _rebasepro_ui.iconSize.small }, "tag")
 												].map((icon, i) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
 														className: "shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark",
 														children: icon
@@ -3175,7 +3188,7 @@
 								className: "block mb-1",
 								children: "Expanded (280px)"
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: (0, _rebasepro_ui.cls)("flex flex-col h-72 relative w-[280px] border rounded-lg overflow-hidden", _rebasepro_ui.defaultBorderMixin),
+								className: (0, _rebasepro_ui.cls)("flex flex-col h-72 relative w-[280px] border rounded-lg overflow-hidden bg-white dark:bg-surface-900", _rebasepro_ui.defaultBorderMixin),
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2",
@@ -3229,9 +3242,9 @@
 														active: false
 													}
 												].map(({ label, icon, active }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-													className: (0, _rebasepro_ui.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: (0, _rebasepro_ui.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__ */ (0, react_jsx_runtime.jsx)("div", {
-														className: "shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark",
+														className: (0, _rebasepro_ui.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__ */ (0, react_jsx_runtime.jsx)("div", {
 														className: "text-text-primary dark:text-surface-200 font-inherit truncate",
@@ -3982,29 +3995,70 @@
 									variant: "caption",
 									color: "secondary",
 									className: "block mb-2 font-mono",
-									children: "IconButton"
+									children: "IconButton — sizes"
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									className: "flex flex-wrap gap-3 items-center",
 									children: [
 										[
-											"primary",
-											"secondary",
-											"inherit"
-										].map((c) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.IconButton, {
-											color: c,
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.PencilIcon, {})
-										}, c)),
-										[
-											"small",
-											"medium",
-											"large"
-										].map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.IconButton, {
-											size: s,
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Trash2Icon, {})
+											{
+												s: "smallest",
+												icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.PencilIcon, { size: 14 })
+											},
+											{
+												s: "small",
+												icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.PencilIcon, { size: 16 })
+											},
+											{
+												s: "medium",
+												icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.PencilIcon, { size: 20 })
+											},
+											{
+												s: "large",
+												icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.PencilIcon, { size: 24 })
+											}
+										].map(({ s, icon }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex flex-col items-center gap-1",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.IconButton, {
+												size: s,
+												children: icon
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+												variant: "caption",
+												color: "secondary",
+												children: s
+											})]
 										}, s)),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.IconButton, {
-											disabled: true,
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.PlusIcon, {})
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex flex-col items-center gap-1",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.IconButton, {
+												disabled: true,
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Trash2Icon, { size: 20 })
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+												variant: "caption",
+												color: "secondary",
+												children: "disabled"
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex flex-col items-center gap-1",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.IconButton, {
+												variant: "filled",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.PlusIcon, { size: 20 })
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+												variant: "caption",
+												color: "secondary",
+												children: "filled"
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex flex-col items-center gap-1",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.IconButton, {
+												shape: "square",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.SettingsIcon, { size: 20 })
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+												variant: "caption",
+												color: "secondary",
+												children: "square"
+											})]
 										})
 									]
 								})] }),
@@ -4209,42 +4263,123 @@
 								variant: "caption",
 								color: "secondary",
 								className: "block mb-2 font-mono",
-								children: "Chip — colorScheme × size"
+								children: "Chip — colorScheme"
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
 									colorScheme: s,
-									size: "small",
 									children: s
 								}, s))
 							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+								variant: "caption",
+								color: "secondary",
+								className: "block mb-2 font-mono",
+								children: "Chip — sizes"
+							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
-									colorScheme: "blueDark",
+									colorScheme: "blue",
 									size: sz,
 									children: sz
 								}, sz))
 							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+								variant: "caption",
+								color: "secondary",
+								className: "block mb-2 font-mono",
+								children: "Chip — outlined, error, clickable, icon"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex flex-wrap gap-2 items-center mb-4",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
+										colorScheme: "red",
+										outlined: true,
+										children: "Outlined Red"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
+										colorScheme: "blue",
+										outlined: true,
+										children: "Outlined Blue"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
+										error: true,
+										children: "Error"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
+										error: true,
+										outlined: true,
+										children: "Error Outlined"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
+										onClick: () => {},
+										children: "Clickable"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
+										icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TagIcon, { size: 12 }),
+										colorScheme: "teal",
+										children: "With Icon"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, { children: "Default (no scheme)" }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
+										outlined: true,
+										children: "Default Outlined"
+									})
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
+								variant: "caption",
+								color: "secondary",
+								className: "block mb-2 font-mono",
+								children: "FilterChip"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex flex-wrap gap-2 items-center mb-6",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.FilterChip, {
+										active: true,
+										children: "Active"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.FilterChip, { children: "Inactive" }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.FilterChip, {
+										icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.FilterIcon, { size: 12 }),
+										active: true,
+										children: "With Icon"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.FilterChip, {
+										size: "small",
+										children: "Small"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.FilterChip, {
+										disabled: true,
+										children: "Disabled"
+									})
+								]
+							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
 								variant: "caption",
 								color: "secondary",
@@ -4542,271 +4677,6 @@
 								})
 							]
 						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SectionBlock, {
-						id: "roles",
-						title: "Roles View — RolesView.tsx",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Typography, {
-								variant: "body2",
-								color: "secondary",
-								className: "mb-4",
-								children: [
-									"Layout from ",
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-										className: "font-mono text-xs",
-										children: "RolesView"
-									}),
-									": same header pattern, table, and ",
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-										className: "font-mono text-xs",
-										children: "CollectionPermissionsMatrix"
-									}),
-									" with ",
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-										className: "font-mono text-xs",
-										children: "defaultBorderMixin"
-									}),
-									"."
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex items-center mt-12",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-									gutterBottom: true,
-									variant: "h4",
-									className: "grow",
-									component: "h4",
-									children: "Roles"
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
-									startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.PlusIcon, {}),
-									children: "Add role"
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "w-full overflow-auto",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Table, {
-									className: "w-full",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.TableHeader, { children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TableCell, {
-											header: true,
-											className: "w-16"
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TableCell, {
-											header: true,
-											children: "Role"
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TableCell, {
-											header: true,
-											className: "items-center",
-											children: "Is Admin"
-										})
-									] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TableBody, { children: [
-										{
-											id: "admin",
-											name: "Admin",
-											isAdmin: true
-										},
-										{
-											id: "editor",
-											name: "Editor",
-											isAdmin: false
-										},
-										{
-											id: "viewer",
-											name: "Viewer",
-											isAdmin: false
-										}
-									].map((role) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.TableRow, { children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TableCell, {
-											style: { width: "64px" },
-											children: !role.isAdmin && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Tooltip, {
-												asChild: true,
-												title: "Delete this role",
-												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.IconButton, {
-													size: "small",
-													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Trash2Icon, {})
-												})
-											})
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TableCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
-											colorScheme: role.isAdmin ? "purpleDark" : "blueDark",
-											size: "small",
-											children: role.name
-										}) }),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TableCell, {
-											className: "items-center",
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Checkbox, {
-												checked: role.isAdmin ?? false,
-												disabled: true
-											})
-										})
-									] }, role.id)) })]
-								})
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "mt-4",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-									variant: "label",
-									className: "mb-2 block text-surface-500 dark:text-surface-400 uppercase tracking-wide text-xs",
-									children: "Collection permissions"
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: `rounded-lg overflow-hidden border w-full ${_rebasepro_ui.defaultBorderMixin}`,
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Table, {
-										className: "w-full",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.TableHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TableCell, {
-											header: true,
-											children: "Collection"
-										}), [
-											"Read",
-											"Create",
-											"Edit",
-											"Delete"
-										].map((op) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TableCell, {
-											header: true,
-											align: "center",
-											className: "w-20",
-											children: op
-										}, op))] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TableBody, { children: [{
-											name: "Posts",
-											slug: "posts"
-										}, {
-											name: "Authors",
-											slug: "authors"
-										}].map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.TableRow, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.TableCell, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "flex items-center gap-1.5",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "font-medium",
-												children: col.name
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Tooltip, {
-												title: "No security rules defined — all operations unrestricted",
-												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Chip, {
-													size: "smallest",
-													colorScheme: "gray",
-													children: "no rules"
-												})
-											})]
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: "text-xs text-surface-400 font-mono",
-											children: col.slug
-										})] }), [
-											"select",
-											"insert",
-											"update",
-											"delete"
-										].map((op) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TableCell, {
-											align: "center",
-											className: "w-20",
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "text-green-500 dark:text-green-400 font-bold",
-												children: "✓"
-											})
-										}, op))] }, col.slug)) })]
-									})
-								})]
-							})
-						]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SectionBlock, {
-						id: "role-dialog",
-						title: "Role Dialog — RoleDetailsForm",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Typography, {
-							variant: "body2",
-							color: "secondary",
-							className: "mb-4",
-							children: [
-								"Exact structure of ",
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-									className: "font-mono text-xs",
-									children: "RoleDetailsForm"
-								}),
-								": ",
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-									className: "font-mono text-xs",
-									children: "col-span-4"
-								}),
-								" grid, Role ID + Name + Is Admin checkbox."
-							]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: `rounded-lg border w-full max-w-xl ${_rebasepro_ui.defaultBorderMixin}`,
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "px-6 pt-6 pb-2",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Typography, {
-										variant: "h4",
-										children: "Role"
-									})
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "px-6 py-4",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "grid grid-cols-12 gap-4",
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-												className: "col-span-12 sm:col-span-4",
-												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TextField, {
-													name: "id",
-													required: true,
-													value: "editor",
-													onChange: () => {},
-													label: "Role ID",
-													disabled: true
-												})
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-												className: "col-span-12 sm:col-span-4",
-												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.TextField, {
-													name: "name",
-													required: true,
-													value: "Editor",
-													onChange: () => {},
-													label: "Role Name"
-												})
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-												className: "col-span-12 sm:col-span-4 flex items-start pt-2",
-												children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-													className: "flex items-center gap-2 cursor-pointer mt-3",
-													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Checkbox, {
-														checked: false,
-														onCheckedChange: () => {}
-													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: "font-medium",
-														children: "Is Admin"
-													})]
-												})
-											})
-										]
-									})
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex items-center justify-end gap-2 px-6 pb-6",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.Button, {
-										variant: "text",
-										children: "Cancel"
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rebasepro_ui.LoadingButton, {
-										variant: "filled",
-										loading: false,
-										children: "Update"
-									})]
-								})
-							]
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "px-6 py-8",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rebasepro_ui.Typography, {
-							variant: "caption",
-							color: "secondary",
-							children: [
-								"Hidden debug reference — ",
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-									className: "font-mono text-xs",
-									children: "/debug/ui"
-								}),
-								". Not linked from sidebar."
-							]
-						})
 					})
 				]
 			})]
@@ -5684,7 +5554,7 @@
 								})
 							] })]
 						}),
-						additionalComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						additionalComponent && mode === "buttons" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "w-full",
 							children: additionalComponent
 						})