@opensaas/stack-ui 0.1.7 → 0.4.0

package/dist/components/UserMenu.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter } from 'next/navigation.js';
+import { Button } from '../primitives/button.js';
+/**
+ * User menu component with sign-out button
+ * Client Component
+ */
+export function UserMenu({ userName, userEmail, onSignOut }) {
+    const router = useRouter();
+    const handleSignOut = async () => {
+        if (onSignOut) {
+            await onSignOut();
+        }
+        router.push('/sign-in');
+    };
+    return (_jsxs("div", { className: "p-4 border-t border-border bg-gradient-to-br from-primary/5 to-accent/5", children: [_jsxs("div", { className: "flex items-center space-x-3 mb-3", children: [_jsx("div", { className: "h-9 w-9 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-lg shadow-primary/25", children: _jsx("span", { className: "text-sm font-bold text-primary-foreground", children: userName?.[0]?.toUpperCase() || '?' }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium truncate", children: userName || 'User' }), _jsx("p", { className: "text-xs text-muted-foreground truncate", children: userEmail || '' })] })] }), _jsx(Button, { onClick: handleSignOut, variant: "outline", size: "sm", className: "w-full text-sm", children: "Sign Out" })] }));
+}

package/dist/components/fields/TextField.d.ts

@@ -8,6 +8,7 @@ export interface TextFieldProps {
     disabled?: boolean;
     required?: boolean;
     mode?: 'read' | 'edit';
+    displayMode?: 'input' | 'textarea';
 }
-export declare function TextField({ name, value, onChange, label, placeholder, error, disabled, required, mode, }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextField({ name, value, onChange, label, placeholder, error, disabled, required, mode, displayMode, }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/components/fields/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/TextField.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,GACd,EAAE,cAAc,2CA8BhB"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/TextField.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;CACnC;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,EACb,WAAqB,GACtB,EAAE,cAAc,2CAgChB"}

package/dist/components/fields/TextField.js

@@ -1,11 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from '../../primitives/input.js';
+import { Textarea } from '../../primitives/textarea.js';
 import { Label } from '../../primitives/label.js';
 import { cn } from '../../lib/utils.js';
-export function TextField({ name, value, onChange, label, placeholder, error, disabled, required, mode = 'edit', }) {
+export function TextField({ name, value, onChange, label, placeholder, error, disabled, required, mode = 'edit', displayMode = 'input', }) {
     if (mode === 'read') {
         return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-muted-foreground", children: label }), _jsx("p", { className: "text-sm", children: value || '-' })] }));
     }
-    return (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsx(Input, { id: name, name: name, type: "text", value: value || '', onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, required: required, className: cn(error && 'border-destructive') }), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
+    const InputComponent = displayMode === 'textarea' ? Textarea : Input;
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsx(InputComponent, { id: name, name: name, type: displayMode === 'input' ? 'text' : undefined, value: value || '', onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, required: required, className: cn(error && 'border-destructive') }), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
 }

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { AdminUI } from './components/AdminUI.js';
 export { Dashboard } from './components/Dashboard.js';
 export { Navigation } from './components/Navigation.js';
+export { UserMenu } from './components/UserMenu.js';
 export { ListView } from './components/ListView.js';
 export { ListViewClient } from './components/ListViewClient.js';
 export { ItemForm } from './components/ItemForm.js';
@@ -12,6 +13,7 @@ export { TextField, IntegerField, CheckboxField, SelectField, TimestampField, Pa
 export type { AdminUIProps } from './components/AdminUI.js';
 export type { DashboardProps } from './components/Dashboard.js';
 export type { NavigationProps } from './components/Navigation.js';
+export type { UserMenuProps } from './components/UserMenu.js';
 export type { ListViewProps } from './components/ListView.js';
 export type { ListViewClientProps } from './components/ListViewClient.js';
 export type { ItemFormProps } from './components/ItemForm.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAG5F,OAAO,EACL,SAAS,EACT,YAAY,EACZ,aAAa,EACb,WAAW,EACX,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,8BAA8B,CAAA;AAGrC,YAAY,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,YAAY,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,YAAY,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AACjE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AACvE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AAEzE,YAAY,EACV,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,GACpB,MAAM,8BAA8B,CAAA;AAGrC,OAAO,EACL,cAAc,EACd,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,MAAM,kCAAkC,CAAA;AAEzC,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,iBAAiB,GAClB,MAAM,kCAAkC,CAAA;AAGzC,OAAO,EAAE,EAAE,EAAE,cAAc,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAG1F,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAG5F,OAAO,EACL,SAAS,EACT,YAAY,EACZ,aAAa,EACb,WAAW,EACX,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,8BAA8B,CAAA;AAGrC,YAAY,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,YAAY,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,YAAY,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AACjE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AACvE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AAEzE,YAAY,EACV,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,GACpB,MAAM,8BAA8B,CAAA;AAGrC,OAAO,EACL,cAAc,EACd,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,MAAM,kCAAkC,CAAA;AAEzC,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,iBAAiB,GAClB,MAAM,kCAAkC,CAAA;AAGzC,OAAO,EAAE,EAAE,EAAE,cAAc,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAG1F,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/index.js

@@ -2,6 +2,7 @@
 export { AdminUI } from './components/AdminUI.js';
 export { Dashboard } from './components/Dashboard.js';
 export { Navigation } from './components/Navigation.js';
+export { UserMenu } from './components/UserMenu.js';
 export { ListView } from './components/ListView.js';
 export { ListViewClient } from './components/ListViewClient.js';
 export { ItemForm } from './components/ItemForm.js';

package/dist/primitives/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/primitives/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/primitives/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EAwBnB,CAAA;AAED,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,MAAM,uFAOX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/primitives/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EAwBnB,CAAA;AAED,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,MAAM,uFAOX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/styles/globals.css

@@ -244,6 +244,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .sr-only {
     position: absolute;
     width: 1px;
@@ -300,6 +303,24 @@
   .z-50 {
     z-index: 50;
   }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
@@ -333,6 +354,9 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensaas/stack-ui",
-  "version": "0.1.7",
+  "version": "0.4.0",
   "description": "Composable React UI components for OpenSaas Stack",
   "type": "module",
   "main": "./dist/index.js",
@@ -51,44 +51,50 @@
     "url": "https://github.com/OpenSaasAU/stack/issues"
   },
   "peerDependencies": {
+    "@opensaas/stack-core": "^0",
     "next": "^15.0.0 || ^16.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@opensaas/stack-core": "0.1.7"
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "lucide-react": "^0.553.0",
-    "react-hook-form": "^7.54.2",
-    "tailwind-merge": "^3.3.1"
+    "lucide-react": "^0.555.0",
+    "react-hook-form": "^7.68.0",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/postcss": "^4.1.17",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^24.7.2",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "@vitejs/plugin-react": "^5.0.0",
-    "@vitest/coverage-v8": "^4.0.4",
-    "happy-dom": "^20.0.0",
-    "postcss": "^8.4.49",
-    "postcss-cli": "^11.0.0",
-    "tailwindcss": "^4.0.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser": "^4.0.15",
+    "@vitest/browser-playwright": "^4.0.15",
+    "@vitest/coverage-v8": "^4.0.15",
+    "happy-dom": "^20.0.11",
+    "next": "^16.0.7",
+    "playwright": "^1.57.0",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.0",
-    "@opensaas/stack-core": "0.1.7"
+    "vitest": "^4.0.15",
+    "@opensaas/stack-core": "0.4.0"
   },
   "scripts": {
     "build": "tsc && npm run build:css",
@@ -97,6 +103,9 @@
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest --coverage",
+    "test:browser": "BROWSER_TEST=true vitest --run",
+    "test:browser:ui": "BROWSER_TEST=true vitest --ui",
+    "test:browser:coverage": "BROWSER_TEST=true vitest --coverage --run",
     "clean": "rm -rf .turbo dist tsconfig.tsbuildinfo"
   }
 }

package/src/components/AdminUI.tsx

@@ -4,17 +4,18 @@ import { Dashboard } from './Dashboard.js'
 import { ListView } from './ListView.js'
 import { ItemForm } from './ItemForm.js'
 import type { ServerActionInput } from '../server/types.js'
-import { AccessContext, getListKeyFromUrl, OpenSaasConfig } from '@opensaas/stack-core'
+import { type AccessContext, getListKeyFromUrl, OpenSaasConfig } from '@opensaas/stack-core'
 import { generateThemeCSS } from '../lib/theme.js'
 
-export interface AdminUIProps<TPrisma> {
-  context: AccessContext<TPrisma>
+export interface AdminUIProps {
+  context: AccessContext<unknown>
   config: OpenSaasConfig
   params?: string[]
   searchParams?: { [key: string]: string | string[] | undefined }
   basePath?: string
   // Server action can return any shape depending on the list item type
   serverAction: (input: ServerActionInput) => Promise<unknown>
+  onSignOut?: () => Promise<void>
 }
 
 /**
@@ -27,14 +28,15 @@ export interface AdminUIProps<TPrisma> {
  * - [list, 'create'] → ItemForm (create)
  * - [list, id] → ItemForm (edit)
  */
-export function AdminUI<TPrisma>({
+export function AdminUI({
   context,
   config,
   params = [],
   searchParams = {},
   basePath = '/admin',
   serverAction,
-}: AdminUIProps<TPrisma>) {
+  onSignOut,
+}: AdminUIProps) {
   // Parse route from params
   const [urlSegment, action] = params
 
@@ -104,6 +106,7 @@ export function AdminUI<TPrisma>({
           config={config}
           basePath={basePath}
           currentPath={currentPath}
+          onSignOut={onSignOut}
         />
         <main className="flex-1 overflow-y-auto">{content}</main>
       </div>

package/src/components/Dashboard.tsx

@@ -1,10 +1,10 @@
 import Link from 'next/link.js'
 import { formatListName } from '../lib/utils.js'
-import { AccessContext, getDbKey, getUrlKey, OpenSaasConfig } from '@opensaas/stack-core'
+import { type AccessContext, getDbKey, getUrlKey, OpenSaasConfig } from '@opensaas/stack-core'
 import { Card, CardContent, CardHeader, CardTitle } from '../primitives/card.js'
 
-export interface DashboardProps<TPrisma> {
-  context: AccessContext<TPrisma>
+export interface DashboardProps {
+  context: AccessContext<unknown>
   config: OpenSaasConfig
   basePath?: string
 }
@@ -13,19 +13,16 @@ export interface DashboardProps<TPrisma> {
  * Dashboard landing page showing all available lists
  * Server Component
  */
-export async function Dashboard<TPrisma>({
-  context,
-  config,
-  basePath = '/admin',
-}: DashboardProps<TPrisma>) {
+export async function Dashboard({ context, config, basePath = '/admin' }: DashboardProps) {
   const lists = Object.keys(config.lists || {})
 
   // Get counts for each list
   const listCounts = await Promise.all(
     lists.map(async (listKey) => {
       try {
-        const count = await context.db[getDbKey(listKey)]?.count()
-        return { listKey, count: count || 0 }
+        const delegate = context.db[getDbKey(listKey)]
+        const count = delegate?.count ? await delegate.count() : 0
+        return { listKey, count }
       } catch (error) {
         console.error(`Failed to get count for ${listKey}:`, error)
         return { listKey, count: 0 }

package/src/components/ItemForm.tsx

@@ -3,11 +3,11 @@ import Link from 'next/link.js'
 import { ItemFormClient } from './ItemFormClient.js'
 import { formatListName } from '../lib/utils.js'
 import type { ServerActionInput } from '../server/types.js'
-import { AccessContext, getDbKey, getUrlKey, OpenSaasConfig } from '@opensaas/stack-core'
+import { type AccessContext, getDbKey, getUrlKey, OpenSaasConfig } from '@opensaas/stack-core'
 import { serializeFieldConfigs } from '../lib/serializeFieldConfig.js'
 
-export interface ItemFormProps<TPrisma> {
-  context: AccessContext<TPrisma>
+export interface ItemFormProps {
+  context: AccessContext<unknown>
   config: OpenSaasConfig
   listKey: string
   mode: 'create' | 'edit'
@@ -21,7 +21,7 @@ export interface ItemFormProps<TPrisma> {
  * Item form component - create or edit an item
  * Server Component that fetches data and sets up actions
  */
-export async function ItemForm<TPrisma>({
+export async function ItemForm({
   context,
   config,
   listKey,
@@ -29,7 +29,7 @@ export async function ItemForm<TPrisma>({
   itemId,
   basePath = '/admin',
   serverAction,
-}: ItemFormProps<TPrisma>) {
+}: ItemFormProps) {
   const listConfig = config.lists[listKey]
   const urlKey = getUrlKey(listKey)
 
@@ -58,10 +58,13 @@ export async function ItemForm<TPrisma>({
       }
 
       // Fetch item with relationships included
-      itemData = await context.db[getDbKey(listKey)].findUnique({
-        where: { id: itemId },
-        ...(Object.keys(includeRelationships).length > 0 && { include: includeRelationships }),
-      })
+      const delegate = context.db[getDbKey(listKey)]
+      if (delegate?.findUnique) {
+        itemData = await delegate.findUnique({
+          where: { id: itemId },
+          ...(Object.keys(includeRelationships).length > 0 && { include: includeRelationships }),
+        })
+      }
     } catch (error) {
       console.error(`Failed to fetch item ${itemId}:`, error)
     }
@@ -102,7 +105,8 @@ export async function ItemForm<TPrisma>({
         if (relatedListConfig) {
           try {
             const dbContext = context.db
-            const relatedItems = await dbContext[getDbKey(relatedListName)].findMany({})
+            const delegate = dbContext[getDbKey(relatedListName)]
+            const relatedItems = delegate?.findMany ? await delegate.findMany({}) : []
 
             // Use 'name' field as label if it exists, otherwise use 'id'
             relationshipData[fieldName] = relatedItems.map((item: Record<string, unknown>) => ({

package/src/components/ItemFormClient.tsx

@@ -62,68 +62,81 @@ export function ItemFormClient({
     setGeneralError(null)
 
     startTransition(async () => {
-      try {
-        // Transform relationship fields to Prisma format
-        // Filter out password fields with isSet objects (unchanged passwords)
-        // File/Image fields: pass File objects through (Next.js will serialize them)
-        const transformedData: Record<string, unknown> = {}
-        for (const [fieldName, value] of Object.entries(formData)) {
-          const fieldConfig = fields[fieldName]
-
-          // Skip password fields that have { isSet: boolean } value (not being changed)
-          if (typeof value === 'object' && value !== null && 'isSet' in value) {
-            continue
-          }
+      // Transform relationship fields to Prisma format
+      // Filter out password fields with isSet objects (unchanged passwords)
+      // File/Image fields: pass File objects through (Next.js will serialize them)
+      const transformedData: Record<string, unknown> = {}
+      for (const [fieldName, value] of Object.entries(formData)) {
+        const fieldConfig = fields[fieldName]
 
-          // Transform relationship fields - check discriminated union type
-          const fieldAny = fieldConfig as { type: string; many?: boolean }
-          if (fieldAny?.type === 'relationship') {
-            if (fieldAny.many) {
-              // Many relationship: use connect format
-              if (Array.isArray(value) && value.length > 0) {
-                transformedData[fieldName] = {
-                  connect: value.map((id: string) => ({ id })),
-                }
-              }
-            } else {
-              // Single relationship: use connect format
-              if (value) {
-                transformedData[fieldName] = {
-                  connect: { id: value },
-                }
+        // Skip password fields that have { isSet: boolean } value (not being changed)
+        if (typeof value === 'object' && value !== null && 'isSet' in value) {
+          continue
+        }
+
+        // Transform relationship fields - check discriminated union type
+        const fieldAny = fieldConfig as { type: string; many?: boolean }
+        if (fieldAny?.type === 'relationship') {
+          if (fieldAny.many) {
+            // Many relationship: use connect format
+            if (Array.isArray(value) && value.length > 0) {
+              transformedData[fieldName] = {
+                connect: value.map((id: string) => ({ id })),
               }
             }
           } else {
-            // Non-relationship field: pass through (including File objects for file/image fields)
-            // File objects will be serialized by Next.js server action
-            transformedData[fieldName] = value
+            // Single relationship: use connect format
+            if (value) {
+              transformedData[fieldName] = {
+                connect: { id: value },
+              }
+            }
           }
+        } else {
+          // Non-relationship field: pass through (including File objects for file/image fields)
+          // File objects will be serialized by Next.js server action
+          transformedData[fieldName] = value
         }
+      }
+
+      const result =
+        mode === 'create'
+          ? await serverAction({
+              listKey,
+              action: 'create',
+              data: transformedData,
+            })
+          : await serverAction({
+              listKey,
+              action: 'update',
+              id: itemId!,
+              data: transformedData,
+            })
 
-        const result =
-          mode === 'create'
-            ? await serverAction({
-                listKey,
-                action: 'create',
-                data: transformedData,
-              })
-            : await serverAction({
-                listKey,
-                action: 'update',
-                id: itemId!,
-                data: transformedData,
-              })
-
-        if (result) {
+      // Check if result has the new format with success/error fields
+      if (result && typeof result === 'object' && 'success' in result) {
+        const actionResult = result as
+          | { success: true; data: unknown }
+          | { success: false; error: string; fieldErrors?: Record<string, string> }
+
+        if (actionResult.success) {
           // Navigate back to list view
           router.push(`${basePath}/${urlKey}`)
           router.refresh()
         } else {
-          setGeneralError('Access denied or operation failed')
+          // Handle error response
+          if (actionResult.fieldErrors) {
+            setErrors(actionResult.fieldErrors)
+          }
+          setGeneralError(actionResult.error)
         }
-      } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : 'Failed to save item'
-        setGeneralError(errorMessage)
+      } else if (result) {
+        // Legacy format: result is the data itself
+        router.push(`${basePath}/${urlKey}`)
+        router.refresh()
+      } else {
+        // null result means access denied
+        setGeneralError('Access denied or operation failed')
       }
     })
   }
@@ -135,22 +148,31 @@ export function ItemFormClient({
     setShowDeleteConfirm(false)
 
     startTransition(async () => {
-      try {
-        const result = await serverAction({
-          listKey,
-          action: 'delete',
-          id: itemId,
-        })
-
-        if (result) {
+      const result = await serverAction({
+        listKey,
+        action: 'delete',
+        id: itemId,
+      })
+
+      // Check if result has the new format with success/error fields
+      if (result && typeof result === 'object' && 'success' in result) {
+        const actionResult = result as
+          | { success: true; data: unknown }
+          | { success: false; error: string; fieldErrors?: Record<string, string> }
+
+        if (actionResult.success) {
           router.push(`${basePath}/${urlKey}`)
           router.refresh()
         } else {
-          setGeneralError('Access denied or failed to delete item')
+          setGeneralError(actionResult.error)
         }
-      } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : 'Failed to delete item'
-        setGeneralError(errorMessage)
+      } else if (result) {
+        // Legacy format: result is the data itself
+        router.push(`${basePath}/${urlKey}`)
+        router.refresh()
+      } else {
+        // null result means access denied
+        setGeneralError('Access denied or failed to delete item')
       }
     })
   }

package/src/components/ListView.tsx

@@ -1,16 +1,10 @@
 import Link from 'next/link.js'
 import { ListViewClient } from './ListViewClient.js'
 import { formatListName } from '../lib/utils.js'
-import {
-  AccessContext,
-  getDbKey,
-  getUrlKey,
-  OpenSaasConfig,
-  type PrismaClientLike,
-} from '@opensaas/stack-core'
+import { type AccessContext, getDbKey, getUrlKey, OpenSaasConfig } from '@opensaas/stack-core'
 
-export interface ListViewProps<TPrisma extends PrismaClientLike = PrismaClientLike> {
-  context: AccessContext<TPrisma>
+export interface ListViewProps {
+  context: AccessContext<unknown>
   config: OpenSaasConfig
   listKey: string
   basePath?: string
@@ -24,7 +18,7 @@ export interface ListViewProps<TPrisma extends PrismaClientLike = PrismaClientLi
  * List view component - displays items in a table
  * Server Component that fetches data and renders client table
  */
-export async function ListView<TPrisma extends PrismaClientLike = PrismaClientLike>({
+export async function ListView({
   context,
   config,
   listKey,
@@ -33,7 +27,7 @@ export async function ListView<TPrisma extends PrismaClientLike = PrismaClientLi
   page = 1,
   pageSize = 50,
   search,
-}: ListViewProps<TPrisma>) {
+}: ListViewProps) {
   const key = getDbKey(listKey)
   const urlKey = getUrlKey(listKey)
   const listConfig = config.lists[listKey]
@@ -86,15 +80,18 @@ export async function ListView<TPrisma extends PrismaClientLike = PrismaClientLi
         include[fieldName] = true
       }
     })
-    ;[items, total] = await Promise.all([
-      dbContext[key].findMany({
-        where,
-        skip,
-        take: pageSize,
-        ...(Object.keys(include).length > 0 ? { include } : {}),
-      }),
-      dbContext[key].count({ where }),
-    ])
+    const delegate = dbContext[key]
+    if (delegate?.findMany && delegate?.count) {
+      ;[items, total] = await Promise.all([
+        delegate.findMany({
+          where,
+          skip,
+          take: pageSize,
+          ...(Object.keys(include).length > 0 ? { include } : {}),
+        }),
+        delegate.count({ where }),
+      ])
+    }
   } catch (error) {
     console.error(`Failed to fetch ${listKey}:`, error)
   }
@@ -105,7 +102,12 @@ export async function ListView<TPrisma extends PrismaClientLike = PrismaClientLi
   // Extract only the relationship refs needed by client (don't send entire config)
   const relationshipRefs: Record<string, string> = {}
   Object.entries(listConfig.fields).forEach(([fieldName, field]) => {
-    if ('type' in field && field.type === 'relationship' && 'ref' in field && field.ref) {
+    if (
+      'type' in field &&
+      field.type === 'relationship' &&
+      'ref' in field &&
+      typeof field.ref === 'string'
+    ) {
       relationshipRefs[fieldName] = field.ref
     }
   })