@rebasepro/core 0.5.0 → 0.6.1

package/dist/util/icons.d.ts

@@ -12,9 +12,9 @@ export type IconViewProps = {
     group?: string;
     icon?: string | React.ReactNode;
 };
-export declare const IconForView: React.NamedExoticComponent<{
+export declare const IconForView: React.MemoExoticComponent<({ collectionOrView, className, color, size }: {
     collectionOrView?: IconViewProps;
     color?: IconColor;
     className?: string;
     size?: "smallest" | "small" | "medium" | "large" | number;
-}>;
+}) => React.ReactElement>;

package/dist/vitePlugin.js

@@ -62,7 +62,10 @@ function rebaseCollectionsPlugin(options) {
           return `${prefix}{ __rebaseLazy: true, load: () => import(${quote}${importPath}${quote}) }`;
         }
       );
-      return { code: transformed, map: null };
+      return {
+        code: transformed,
+        map: null
+      };
     }
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/core",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Rebase core — framework-agnostic runtime for data-driven admin panels",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -48,15 +48,15 @@
   "dependencies": {
     "compressorjs": "^1.3.0",
     "fast-equals": "6.0.0",
-    "fuse.js": "^7.3.0",
-    "i18next": "^23.16.8",
+    "fuse.js": "^7.4.2",
+    "i18next": "^26.3.1",
     "notistack": "^3.0.2",
-    "react-i18next": "^14.1.3",
-    "@rebasepro/common": "0.5.0",
-    "@rebasepro/formex": "0.5.0",
-    "@rebasepro/types": "0.5.0",
-    "@rebasepro/ui": "0.5.0",
-    "@rebasepro/utils": "0.5.0"
+    "react-i18next": "^17.0.8",
+    "@rebasepro/common": "0.6.1",
+    "@rebasepro/types": "0.6.1",
+    "@rebasepro/utils": "0.6.1",
+    "@rebasepro/ui": "0.6.1",
+    "@rebasepro/formex": "0.6.1"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -68,22 +68,22 @@
     "@jest/globals": "^30.4.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^20.19.41",
-    "@types/react": "^19.2.15",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^25.9.3",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/react-measure": "^2.0.12",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "^6.0.2",
     "babel-plugin-react-compiler": "beta",
-    "cross-env": "^7.0.3",
-    "esbuild": "^0.25.12",
-    "jest": "^29.7.0",
+    "cross-env": "^10.1.0",
+    "esbuild": "^0.28.1",
+    "jest": "^30.4.2",
     "jest-environment-jsdom": "^30.4.1",
-    "react-router-dom": "^7.15.1",
-    "ts-jest": "^29.4.10",
-    "tsd": "^0.31.2",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.3"
+    "react-router-dom": "^7.17.0",
+    "ts-jest": "^29.4.11",
+    "tsd": "^0.33.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
   },
   "files": [
     "dist",

package/src/components/Debug/UIReferenceView.tsx

@@ -13,7 +13,9 @@
 import React, { useState } from "react";
 import {
     Alert,
+    AlertCircleIcon,
     Avatar,
+    AppWindow,
     BooleanSwitch,
     Button,
     Checkbox,
@@ -21,9 +23,14 @@ import {
     ChevronsLeftIcon,
     ChevronsRightIcon,
     Chip,
+    CircleUserIcon,
     CircularProgress,
     cls,
+    ColumnsIcon,
     defaultBorderMixin,
+    FileIcon,
+    FileTextIcon,
+    FilterChip,
     FilterIcon,
     FolderIcon,
     IconButton,
@@ -38,6 +45,7 @@ import {
     MoonIcon,
     MultiSelect,
     MultiSelectItem,
+    PanelLeftIcon,
     PencilIcon,
     PlusIcon,
     SearchBar,
@@ -59,54 +67,45 @@ import {
     TextField,
     Tooltip,
     Trash2Icon,
+    TypeIcon,
     Typography,
     UserIcon
 } from "@rebasepro/ui";
 import { RebaseLogo } from "../RebaseLogo";
 
 const SECTIONS = [
-    { id: "drawer",
-label: "Drawer" },
-    { id: "appbar",
-label: "App Bar" },
-    { id: "tabs",
-label: "Tabs" },
-    { id: "editor-sidebar",
-label: "Editor Sidebar" },
-    { id: "empty-states",
-label: "Empty States" },
-    { id: "typography",
-label: "Typography" },
-    { id: "buttons",
-label: "Buttons" },
-    { id: "inputs",
-label: "Form Inputs" },
-    { id: "chips-alerts",
-label: "Chips & Alerts" },
-    { id: "users",
-label: "Users View" },
-    { id: "user-dialog",
-label: "User Dialog" },
-    { id: "roles",
-label: "Roles View" },
-    { id: "role-dialog",
-label: "Role Dialog" }
+    { id: "drawer", label: "Drawer", icon: PanelLeftIcon },
+    { id: "appbar", label: "App Bar", icon: AppWindow },
+    { id: "tabs", label: "Tabs", icon: ListIcon },
+    { id: "editor-sidebar", label: "Editor Sidebar", icon: ColumnsIcon },
+    { id: "empty-states", label: "Empty States", icon: FileIcon },
+    { id: "typography", label: "Typography", icon: TypeIcon },
+    { id: "buttons", label: "Buttons", icon: PlusIcon },
+    { id: "inputs", label: "Form Inputs", icon: FileTextIcon },
+    { id: "chips-alerts", label: "Chips & Alerts", icon: AlertCircleIcon },
+    { id: "users", label: "Users View", icon: UserIcon },
+    { id: "user-dialog", label: "User Dialog", icon: CircleUserIcon }
 ];
 
 export function UIReferenceView() {
     const [activeSection, setActiveSection] = useState("drawer");
+    const scrollContainerRef = React.useRef<HTMLDivElement>(null);
 
     const scrollTo = (id: string) => {
-        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 (
-        <div className="flex h-full w-full overflow-hidden">
+        <div className="flex w-full">
 
             {/* ── Sidebar nav (same structure as DefaultDrawer) ─────────────── */}
-            <div className={cls("flex flex-col h-full relative grow-0 shrink-0 w-[200px] border-r", defaultBorderMixin)}>
+            <div className={cls("flex flex-col sticky top-0 h-screen grow-0 shrink-0 w-[200px] border-r", defaultBorderMixin)}>
                 {/* DrawerLogo */}
                 <div className="flex flex-row items-center shrink-0 pt-4 pb-2 px-2">
                     <div className="shrink-0 flex items-center justify-center w-[56px] h-[40px]">
@@ -127,28 +126,31 @@ block: "start" });
                         </div>
                         {/* Nav items — from DrawerNavigationItem */}
                         <div className="overflow-hidden bg-surface-50 dark:bg-surface-950/30 rounded-b-lg">
-                            {SECTIONS.map(s => (
-                                <div key={s.id}>
-                                    <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" : ""
-                                        )}
-                                    >
-                                        <div className="shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark">
-                                            <SettingsIcon size={iconSize.small}/>
-                                        </div>
-                                        <div className="text-text-primary dark:text-surface-200 opacity-100 font-inherit truncate space-x-2">
-                                            {s.label.toUpperCase()}
+                            {SECTIONS.map(s => {
+                                const IconComponent = s.icon;
+                                return (
+                                    <div key={s.id}>
+                                        <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" : ""
+                                            )}
+                                        >
+                                            <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")}>
+                                                <IconComponent size={iconSize.small}/>
+                                            </div>
+                                            <div className="text-text-primary dark:text-surface-200 opacity-100 font-inherit truncate space-x-2">
+                                                {s.label.toUpperCase()}
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            ))}
+                                );
+                            })}
                         </div>
                     </div>
                 </div>
@@ -171,8 +173,8 @@ block: "start" });
                 </div>
             </div>
 
-            {/* ── Main scroll area ───────────────────────────────────────────── */}
-            <div className="flex-1 overflow-y-auto">
+            {/* ── Main content area ───────────────────────────────────────────── */}
+            <div ref={scrollContainerRef} className="flex-1">
 
                 {/* ═══════════════════════════════════════════════
                     SECTION: Drawer
@@ -187,7 +189,7 @@ block: "start" });
                         {/* Collapsed — exact markup from DefaultDrawer + DrawerNavigationItem */}
                         <div>
                             <Typography variant="caption" color="secondary" className="block mb-1">Collapsed (72px)</Typography>
-                            <div className={cls("flex flex-col h-72 relative w-[72px] border rounded-lg overflow-hidden", defaultBorderMixin)}>
+                            <div className={cls("flex flex-col h-72 relative w-[72px] border rounded-lg overflow-hidden bg-white dark:bg-surface-900", defaultBorderMixin)}>
                                 <div className="flex flex-row items-center shrink-0 pt-4 pb-2 px-2">
                                     <div className="shrink-0 flex items-center justify-center w-[56px] h-[40px]">
                                         <RebaseLogo width="28px" height="28px"/>
@@ -197,7 +199,7 @@ block: "start" });
                                     <div className="my-2 mx-2 flex flex-col">
                                         <div className="overflow-hidden rounded-lg bg-surface-50 dark:bg-surface-950/30">
                                             {[<FolderIcon key="folder" size={iconSize.small}/>, <UserIcon key="user" size={iconSize.small}/>, <TagIcon key="tag" size={iconSize.small}/>].map((icon, i) => (
-                                                <div key={i} className="rounded-lg truncate hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800/75 flex flex-row items-center h-10">
+                                                <div key={i} className="rounded-lg truncate hover:bg-primary/5 dark:hover:bg-primary/5 flex flex-row items-center h-10">
                                                     <div className="shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark">
                                                         {icon}
                                                     </div>
@@ -219,7 +221,7 @@ block: "start" });
                         {/* Expanded — exact markup from DefaultDrawer + DrawerNavigationGroup + DrawerNavigationItem */}
                         <div>
                             <Typography variant="caption" color="secondary" className="block mb-1">Expanded (280px)</Typography>
-                            <div className={cls("flex flex-col h-72 relative w-[280px] border rounded-lg overflow-hidden", defaultBorderMixin)}>
+                            <div className={cls("flex flex-col h-72 relative w-[280px] border rounded-lg overflow-hidden bg-white dark:bg-surface-900", defaultBorderMixin)}>
                                 {/* DrawerLogo */}
                                 <div className="flex flex-row items-center shrink-0 pt-4 pb-2 px-2">
                                     <div className="shrink-0 flex items-center justify-center w-[56px] h-[40px]">
@@ -249,10 +251,10 @@ icon: <TagIcon size={iconSize.small}/>,
 active: false }
                                             ].map(({ label, icon, active }) => (
                                                 <div key={label} 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" : ""
+                                                    "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" : ""
                                                 )}>
-                                                    <div className="shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark">
+                                                    <div 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")}>
                                                         {icon}
                                                     </div>
                                                     <div className="text-text-primary dark:text-surface-200 font-inherit truncate">
@@ -623,15 +625,31 @@ selected: true }, { name: "Tags" }].map(c => (
                             </div>
                         </div>
                         <div>
-                            <Typography variant="caption" color="secondary" className="block mb-2 font-mono">IconButton</Typography>
+                            <Typography variant="caption" color="secondary" className="block mb-2 font-mono">IconButton — sizes</Typography>
                             <div className="flex flex-wrap gap-3 items-center">
-                                {(["primary", "secondary", "inherit"] as const).map(c => (
-                                    <IconButton key={c} color={c}><PencilIcon/></IconButton>
-                                ))}
-                                {(["small", "medium", "large"] as const).map(s => (
-                                    <IconButton key={s} size={s}><Trash2Icon/></IconButton>
+                                {([
+                                    { s: "smallest" as const, icon: <PencilIcon size={14}/> },
+                                    { s: "small" as const, icon: <PencilIcon size={16}/> },
+                                    { s: "medium" as const, icon: <PencilIcon size={20}/> },
+                                    { s: "large" as const, icon: <PencilIcon size={24}/> }
+                                ]).map(({ s, icon }) => (
+                                    <div key={s} className="flex flex-col items-center gap-1">
+                                        <IconButton size={s}>{icon}</IconButton>
+                                        <Typography variant="caption" color="secondary">{s}</Typography>
+                                    </div>
                                 ))}
-                                <IconButton disabled><PlusIcon/></IconButton>
+                                <div className="flex flex-col items-center gap-1">
+                                    <IconButton disabled><Trash2Icon size={20}/></IconButton>
+                                    <Typography variant="caption" color="secondary">disabled</Typography>
+                                </div>
+                                <div className="flex flex-col items-center gap-1">
+                                    <IconButton variant="filled"><PlusIcon size={20}/></IconButton>
+                                    <Typography variant="caption" color="secondary">filled</Typography>
+                                </div>
+                                <div className="flex flex-col items-center gap-1">
+                                    <IconButton shape="square"><SettingsIcon size={20}/></IconButton>
+                                    <Typography variant="caption" color="secondary">square</Typography>
+                                </div>
                             </div>
                         </div>
                         <div>
@@ -706,17 +724,37 @@ selected: true }, { name: "Tags" }].map(c => (
                     SECTION: Chips & Alerts
                 ═══════════════════════════════════════════════ */}
                 <SectionBlock id="chips-alerts" title="Chips & Alerts">
-                    <Typography variant="caption" color="secondary" className="block mb-2 font-mono">Chip — colorScheme × size</Typography>
+                    <Typography variant="caption" color="secondary" className="block mb-2 font-mono">Chip — colorScheme</Typography>
                     <div className="flex flex-wrap gap-2 mb-4">
-                        {(["grayLight", "grayDark", "redLight", "redDark", "blueDark", "blueLight", "greenDark", "greenLight", "yellowLight", "yellowDark", "orangeLight", "purpleDark", "pinkLight"] as const).map(s => (
-                            <Chip key={s} colorScheme={s} size="small">{s}</Chip>
+                        {(["blue", "teal", "red", "green", "yellow", "orange", "purple", "pink", "cyan", "indigo", "violet", "fuchsia", "rose", "emerald", "gray"] as const).map(s => (
+                            <Chip key={s} colorScheme={s}>{s}</Chip>
                         ))}
                     </div>
-                    <div className="flex flex-wrap gap-2 mb-6">
-                        {(["smallest", "small", "medium"] as const).map(sz => (
-                            <Chip key={sz} colorScheme="blueDark" size={sz}>{sz}</Chip>
+                    <Typography variant="caption" color="secondary" className="block mb-2 font-mono">Chip — sizes</Typography>
+                    <div className="flex flex-wrap gap-2 items-center mb-4">
+                        {(["smallest", "small", "medium", "large"] as const).map(sz => (
+                            <Chip key={sz} colorScheme="blue" size={sz}>{sz}</Chip>
                         ))}
                     </div>
+                    <Typography variant="caption" color="secondary" className="block mb-2 font-mono">Chip — outlined, error, clickable, icon</Typography>
+                    <div className="flex flex-wrap gap-2 items-center mb-4">
+                        <Chip colorScheme="red" outlined>Outlined Red</Chip>
+                        <Chip colorScheme="blue" outlined>Outlined Blue</Chip>
+                        <Chip error>Error</Chip>
+                        <Chip error outlined>Error Outlined</Chip>
+                        <Chip onClick={() => {}}>Clickable</Chip>
+                        <Chip icon={<TagIcon size={12}/>} colorScheme="teal">With Icon</Chip>
+                        <Chip>Default (no scheme)</Chip>
+                        <Chip outlined>Default Outlined</Chip>
+                    </div>
+                    <Typography variant="caption" color="secondary" className="block mb-2 font-mono">FilterChip</Typography>
+                    <div className="flex flex-wrap gap-2 items-center mb-6">
+                        <FilterChip active>Active</FilterChip>
+                        <FilterChip>Inactive</FilterChip>
+                        <FilterChip icon={<FilterIcon size={12}/>} active>With Icon</FilterChip>
+                        <FilterChip size="small">Small</FilterChip>
+                        <FilterChip disabled>Disabled</FilterChip>
+                    </div>
                     <Typography variant="caption" color="secondary" className="block mb-2 font-mono">Alert — color variants</Typography>
                     <div className="flex flex-col gap-2">
                         <Alert color="info">Info — informational message</Alert>
@@ -850,136 +888,6 @@ roles: [] }
                         </div>
                     </div>
                 </SectionBlock>
-
-                {/* ═══════════════════════════════════════════════
-                    SECTION: Roles View
-                ═══════════════════════════════════════════════ */}
-                <SectionBlock id="roles" title="Roles View — RolesView.tsx">
-                    <Typography variant="body2" color="secondary" className="mb-4">
-                        Layout from <code className="font-mono text-xs">RolesView</code>: same header pattern, table, and <code className="font-mono text-xs">CollectionPermissionsMatrix</code> with <code className="font-mono text-xs">defaultBorderMixin</code>.
-                    </Typography>
-                    <div className="flex items-center mt-12">
-                        <Typography gutterBottom variant="h4" className="grow" component="h4">Roles</Typography>
-                        <Button startIcon={<PlusIcon/>}>Add role</Button>
-                    </div>
-                    <div className="w-full overflow-auto">
-                        <Table className="w-full">
-                            <TableHeader>
-                                <TableCell header className="w-16"></TableCell>
-                                <TableCell header>Role</TableCell>
-                                <TableCell header className="items-center">Is Admin</TableCell>
-                            </TableHeader>
-                            <TableBody>
-                                {[
-                                    { id: "admin",
-name: "Admin",
-isAdmin: true },
-                                    { id: "editor",
-name: "Editor",
-isAdmin: false },
-                                    { id: "viewer",
-name: "Viewer",
-isAdmin: false }
-                                ].map(role => (
-                                    <TableRow key={role.id}>
-                                        <TableCell style={{ width: "64px" }}>
-                                            {!role.isAdmin && (
-                                                <Tooltip asChild title="Delete this role">
-                                                    <IconButton size="small"><Trash2Icon/></IconButton>
-                                                </Tooltip>
-                                            )}
-                                        </TableCell>
-                                        <TableCell>
-                                            <Chip colorScheme={role.isAdmin ? "purpleDark" : "blueDark"} size="small">{role.name}</Chip>
-                                        </TableCell>
-                                        <TableCell className="items-center">
-                                            <Checkbox checked={role.isAdmin ?? false} disabled/>
-                                        </TableCell>
-                                    </TableRow>
-                                ))}
-                            </TableBody>
-                        </Table>
-                    </div>
-                    {/* CollectionPermissionsMatrix — from RolesView line 365-406 */}
-                    <div className="mt-4">
-                        <Typography variant="label" className="mb-2 block text-surface-500 dark:text-surface-400 uppercase tracking-wide text-xs">
-                            Collection permissions
-                        </Typography>
-                        <div className={`rounded-lg overflow-hidden border w-full ${defaultBorderMixin}`}>
-                            <Table className="w-full">
-                                <TableHeader>
-                                    <TableCell header>Collection</TableCell>
-                                    {["Read", "Create", "Edit", "Delete"].map(op => (
-                                        <TableCell key={op} header align="center" className="w-20">{op}</TableCell>
-                                    ))}
-                                </TableHeader>
-                                <TableBody>
-                                    {[{ name: "Posts",
-slug: "posts" }, { name: "Authors",
-slug: "authors" }].map(col => (
-                                        <TableRow key={col.slug}>
-                                            <TableCell>
-                                                <div className="flex items-center gap-1.5">
-                                                    <span className="font-medium">{col.name}</span>
-                                                    <Tooltip title="No security rules defined — all operations unrestricted">
-                                                        <Chip size="smallest" colorScheme="gray">no rules</Chip>
-                                                    </Tooltip>
-                                                </div>
-                                                <span className="text-xs text-surface-400 font-mono">{col.slug}</span>
-                                            </TableCell>
-                                            {["select", "insert", "update", "delete"].map(op => (
-                                                <TableCell key={op} align="center" className="w-20">
-                                                    <span className="text-green-500 dark:text-green-400 font-bold">✓</span>
-                                                </TableCell>
-                                            ))}
-                                        </TableRow>
-                                    ))}
-                                </TableBody>
-                            </Table>
-                        </div>
-                    </div>
-                </SectionBlock>
-
-                {/* ═══════════════════════════════════════════════
-                    SECTION: Role Dialog
-                ═══════════════════════════════════════════════ */}
-                <SectionBlock id="role-dialog" title="Role Dialog — RoleDetailsForm">
-                    <Typography variant="body2" color="secondary" className="mb-4">
-                        Exact structure of <code className="font-mono text-xs">RoleDetailsForm</code>: <code className="font-mono text-xs">col-span-4</code> grid, Role ID + Name + Is Admin checkbox.
-                    </Typography>
-                    <div className={`rounded-lg border w-full max-w-xl ${defaultBorderMixin}`}>
-                        <div className="px-6 pt-6 pb-2">
-                            <Typography variant="h4">Role</Typography>
-                        </div>
-                        <div className="px-6 py-4">
-                            <div className="grid grid-cols-12 gap-4">
-                                <div className="col-span-12 sm:col-span-4">
-                                    <TextField name="id" required value="editor" onChange={() => {}} label="Role ID" disabled/>
-                                </div>
-                                <div className="col-span-12 sm:col-span-4">
-                                    <TextField name="name" required value="Editor" onChange={() => {}} label="Role Name"/>
-                                </div>
-                                <div className="col-span-12 sm:col-span-4 flex items-start pt-2">
-                                    <label className="flex items-center gap-2 cursor-pointer mt-3">
-                                        <Checkbox checked={false} onCheckedChange={() => {}}/>
-                                        <span className="font-medium">Is Admin</span>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="flex items-center justify-end gap-2 px-6 pb-6">
-                            <Button variant="text">Cancel</Button>
-                            <LoadingButton variant="filled" loading={false}>Update</LoadingButton>
-                        </div>
-                    </div>
-                </SectionBlock>
-
-                {/* Footer */}
-                <div className="px-6 py-8">
-                    <Typography variant="caption" color="secondary">
-                        Hidden debug reference — <code className="font-mono text-xs">/debug/ui</code>. Not linked from sidebar.
-                    </Typography>
-                </div>
             </div>
         </div>
     );

package/src/components/ErrorView.tsx

@@ -28,19 +28,29 @@ export function ErrorView({
     tooltip,
     onRetry
 }: ErrorViewProps): React.ReactElement {
-    const component = error instanceof Error ? error.message : error;
-    console.warn("ErrorView", JSON.stringify(error))
+    const message = error instanceof Error ? error.message : error;
+    // Extract error code from ApiError instances (e.g. PG error codes like "42P01")
+    const errorCode = error instanceof Error && "code" in error
+        ? (error as Error & { code?: string }).code
+        : undefined;
 
     const body = (
         <div
             className="flex flex-col m-2">
-            <div className="flex items-start">
-                <AlertTriangleIcon className="mx-2 mt-0.5"/>
-                <div className="pl-2">
+            <div className="flex items-center gap-2">
+                <AlertTriangleIcon className="shrink-0"/>
+                <div>
                     {title && <Typography
                         variant={"body2"}
                         className="font-medium text-text-primary">{title}</Typography>}
-                    <Typography variant={"body2"} className="text-text-secondary">{component}</Typography>
+                    <Typography variant={"body2"} className="text-text-secondary">{message}</Typography>
+                    {errorCode && (
+                        <span
+                            className="inline-block mt-1 px-1.5 py-0.5 text-[10px] font-mono rounded bg-surface-200 dark:bg-surface-700 text-text-secondary"
+                        >
+                            {errorCode}
+                        </span>
+                    )}
                     {onRetry && (
                         <div className="mt-3">
                             <Button