@opensaas/stack-ui 0.3.0 → 0.5.0

package/.turbo/turbo-build.log

@@ -1,11 +1,11 @@
 
-> @opensaas/stack-ui@0.3.0 build /home/runner/work/stack/stack/packages/ui
+> @opensaas/stack-ui@0.5.0 build /home/runner/work/stack/stack/packages/ui
 > tsc && npm run build:css
 
 npm warn Unknown env config "verify-deps-before-run". This will stop working in the next major version of npm.
 npm warn Unknown env config "npm-globalconfig". This will stop working in the next major version of npm.
 npm warn Unknown env config "_jsr-registry". This will stop working in the next major version of npm.
 
-> @opensaas/stack-ui@0.3.0 build:css
+> @opensaas/stack-ui@0.5.0 build:css
 > mkdir -p dist/styles && postcss ./src/styles/globals.css -o ./dist/styles/globals.css
 

package/CHANGELOG.md

@@ -1,5 +1,143 @@
 # @opensaas/stack-ui
 
+## 0.5.0
+
+## 0.4.0
+
+### Minor Changes
+
+- [#170](https://github.com/OpenSaasAU/stack/pull/170) [`3c4db9d`](https://github.com/OpenSaasAU/stack/commit/3c4db9d8318fc73d291991d8bdfa4f607c3a50ea) Thanks [@list({](https://github.com/list({)! - Add support for virtual fields with proper TypeScript type generation
+
+  Virtual fields are computed fields that don't exist in the database but are added to query results at runtime. This feature enables derived or computed values to be included in your API responses with full type safety.
+
+  **New Features:**
+  - Added `virtual()` field type for defining computed fields in your schema
+  - Virtual fields are automatically excluded from database schema and input types
+  - Virtual fields appear in output types with full TypeScript autocomplete
+  - Virtual fields support `resolveOutput` hooks for custom computation logic
+
+  **Type System Improvements:**
+  - Generated Context type now properly extends AccessContext from core
+  - Separate Input and Output types (e.g., `UserOutput` includes virtual fields, `UserCreateInput` does not)
+  - UI components now accept `AccessContext<any>` for better compatibility with custom context types
+  - Type aliases provide convenience (e.g., `User = UserOutput`)
+
+  **Example Usage:**
+
+  ```typescript
+  import { list, text, virtual } from '@opensaas/stack-core'
+
+  export default config({
+    lists: {
+
+        fields: {
+          name: text(),
+          email: text(),
+          displayName: virtual({
+            type: 'string',
+            hooks: {
+              resolveOutput: async ({ item }) => {
+                return `${item.name} (${item.email})`
+              },
+            },
+          }),
+        },
+      }),
+    },
+  })
+  ```
+
+  The `displayName` field will automatically appear in query results with full TypeScript support, but won't be part of create/update operations or the database schema.
+
+### Patch Changes
+
+- [#172](https://github.com/OpenSaasAU/stack/pull/172) [`929a2a9`](https://github.com/OpenSaasAU/stack/commit/929a2a9a2dfa80b1d973d259dd87828d644ea58d) Thanks [@list<Lists.User.TypeInfo>({](https://github.com/list<Lists.User.TypeInfo>({), [@list<Lists.User.TypeInfo>({](https://github.com/list<Lists.User.TypeInfo>({)! - Improve TypeScript type inference for field configs and list-level hooks by automatically passing TypeInfo from list level down
+
+  This change eliminates the need to manually specify type parameters on field builders when using features like virtual fields, and fixes a critical bug where list-level hooks weren't receiving properly typed parameters.
+
+  ## Field Type Inference Improvements
+
+  Previously, users had to write `virtual<Lists.User.TypeInfo>({...})` to get proper type inference. Now TypeScript automatically infers the correct types from the list-level type parameter.
+
+  **Example:**
+
+  ```typescript
+  // Before
+
+    fields: {
+      displayName: virtual<Lists.User.TypeInfo>({
+        type: 'string',
+        hooks: {
+          resolveOutput: ({ item }) => `${item.name} (${item.email})`,
+        },
+      }),
+    },
+  })
+
+  // After
+
+    fields: {
+      displayName: virtual({
+        type: 'string',
+        hooks: {
+          resolveOutput: ({ item }) => `${item.name} (${item.email})`,
+        },
+      }),
+    },
+  })
+  ```
+
+  ## List-Level Hooks Type Inference Fix
+
+  Fixed a critical type parameter mismatch where `Hooks<TTypeInfo>` was passing the entire TypeInfo object as the first parameter instead of properly destructuring it into three required parameters:
+  1. `TOutput` - The item type (what's stored in DB)
+  2. `TCreateInput` - Prisma create input type
+  3. `TUpdateInput` - Prisma update input type
+
+  **Impact:**
+  - `resolveInput` now receives proper Prisma input types (e.g., `PostCreateInput`, `PostUpdateInput`)
+  - `validateInput` has access to properly typed input data
+  - `beforeOperation` and `afterOperation` have correct item types
+  - All list-level hook callbacks now get full IntelliSense and type checking
+
+  **Example:**
+
+  ```typescript
+  Post: list<Lists.Post.TypeInfo>({
+    fields: { title: text(), content: text() },
+    hooks: {
+      resolveInput: async ({ operation, resolvedData }) => {
+        // ✅ resolvedData is now properly typed as PostCreateInput or PostUpdateInput
+        // ✅ Full autocomplete for title, content, etc.
+        if (operation === 'create') {
+          console.log(resolvedData.title) // TypeScript knows this is string | undefined
+        }
+        return resolvedData
+      },
+      beforeOperation: async ({ operation, item }) => {
+        // ✅ item is now properly typed as Post with all fields
+        if (operation === 'update' && item) {
+          console.log(item.title) // TypeScript knows this is string
+          console.log(item.createdAt) // TypeScript knows this is Date
+        }
+      },
+    },
+  })
+  ```
+
+  ## Breaking Changes
+  - Field types now accept full `TTypeInfo extends TypeInfo` instead of just `TItem`
+  - `FieldsWithItemType` utility replaced with `FieldsWithTypeInfo`
+  - All field builders updated to use new type signature
+  - List-level hooks now receive properly typed parameters (may reveal existing type errors)
+
+  ## Benefits
+  - ✨ Cleaner code without manual type parameter repetition
+  - 🎯 Better type inference in both field-level and list-level hooks
+  - 🔄 Consistent type flow from list configuration down to individual fields
+  - 🛡️ Maintained full type safety with improved DX
+  - 💡 Full IntelliSense support in all hook callbacks
+
 ## 0.3.0
 
 ## 0.2.0

package/dist/components/AdminUI.d.ts

@@ -1,7 +1,7 @@
 import type { ServerActionInput } from '../server/types.js';
-import { AccessContext, OpenSaasConfig } from '@opensaas/stack-core';
-export interface AdminUIProps<TPrisma> {
-    context: AccessContext<TPrisma>;
+import { type AccessContext, OpenSaasConfig } from '@opensaas/stack-core';
+export interface AdminUIProps {
+    context: AccessContext<unknown>;
     config: OpenSaasConfig;
     params?: string[];
     searchParams?: {
@@ -21,5 +21,5 @@ export interface AdminUIProps<TPrisma> {
  * - [list, 'create'] → ItemForm (create)
  * - [list, id] → ItemForm (edit)
  */
-export declare function AdminUI<TPrisma>({ context, config, params, searchParams, basePath, serverAction, onSignOut, }: AdminUIProps<TPrisma>): import("react/jsx-runtime").JSX.Element;
+export declare function AdminUI({ context, config, params, searchParams, basePath, serverAction, onSignOut, }: AdminUIProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AdminUI.d.ts.map

package/dist/components/AdminUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminUI.d.ts","sourceRoot":"","sources":["../../src/components/AdminUI.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAqB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGvF,MAAM,WAAW,YAAY,CAAC,OAAO;IACnC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,YAAY,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAA;KAAE,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,YAAY,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;IAC5D,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAChC;AAED;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,EAC/B,OAAO,EACP,MAAM,EACN,MAAW,EACX,YAAiB,EACjB,QAAmB,EACnB,YAAY,EACZ,SAAS,GACV,EAAE,YAAY,CAAC,OAAO,CAAC,2CA4EvB"}
+{"version":3,"file":"AdminUI.d.ts","sourceRoot":"","sources":["../../src/components/AdminUI.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,KAAK,aAAa,EAAqB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAG5F,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,YAAY,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAA;KAAE,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,YAAY,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;IAC5D,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAChC;AAED;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,MAAM,EACN,MAAW,EACX,YAAiB,EACjB,QAAmB,EACnB,YAAY,EACZ,SAAS,GACV,EAAE,YAAY,2CA4Ed"}

package/dist/components/Dashboard.d.ts

@@ -1,6 +1,6 @@
-import { AccessContext, OpenSaasConfig } from '@opensaas/stack-core';
-export interface DashboardProps<TPrisma> {
-    context: AccessContext<TPrisma>;
+import { type AccessContext, OpenSaasConfig } from '@opensaas/stack-core';
+export interface DashboardProps {
+    context: AccessContext<unknown>;
     config: OpenSaasConfig;
     basePath?: string;
 }
@@ -8,5 +8,5 @@ export interface DashboardProps<TPrisma> {
  * Dashboard landing page showing all available lists
  * Server Component
  */
-export declare function Dashboard<TPrisma>({ context, config, basePath, }: DashboardProps<TPrisma>): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function Dashboard({ context, config, basePath }: DashboardProps): Promise<import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=Dashboard.d.ts.map

package/dist/components/Dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/components/Dashboard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAuB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGzF,MAAM,WAAW,cAAc,CAAC,OAAO;IACrC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED;;;GAGG;AACH,wBAAsB,SAAS,CAAC,OAAO,EAAE,EACvC,OAAO,EACP,MAAM,EACN,QAAmB,GACpB,EAAE,cAAc,CAAC,OAAO,CAAC,oDAkHzB"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/components/Dashboard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAuB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAG9F,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED;;;GAGG;AACH,wBAAsB,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAmB,EAAE,EAAE,cAAc,oDAmHvF"}

package/dist/components/Dashboard.js

@@ -7,13 +7,14 @@ import { Card, CardContent, CardHeader, CardTitle } from '../primitives/card.js'
  * Dashboard landing page showing all available lists
  * Server Component
  */
-export async function Dashboard({ context, config, basePath = '/admin', }) {
+export async function Dashboard({ context, config, basePath = '/admin' }) {
     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);

package/dist/components/ItemForm.d.ts

@@ -1,7 +1,7 @@
 import type { ServerActionInput } from '../server/types.js';
-import { AccessContext, OpenSaasConfig } from '@opensaas/stack-core';
-export interface ItemFormProps<TPrisma> {
-    context: AccessContext<TPrisma>;
+import { type AccessContext, OpenSaasConfig } from '@opensaas/stack-core';
+export interface ItemFormProps {
+    context: AccessContext<unknown>;
     config: OpenSaasConfig;
     listKey: string;
     mode: 'create' | 'edit';
@@ -13,5 +13,5 @@ export interface ItemFormProps<TPrisma> {
  * Item form component - create or edit an item
  * Server Component that fetches data and sets up actions
  */
-export declare function ItemForm<TPrisma>({ context, config, listKey, mode, itemId, basePath, serverAction, }: ItemFormProps<TPrisma>): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function ItemForm({ context, config, listKey, mode, itemId, basePath, serverAction, }: ItemFormProps): Promise<import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=ItemForm.d.ts.map

package/dist/components/ItemForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemForm.d.ts","sourceRoot":"","sources":["../../src/components/ItemForm.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAuB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGzF,MAAM,WAAW,aAAa,CAAC,OAAO;IACpC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,YAAY,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;CAC7D;AAED;;;GAGG;AACH,wBAAsB,QAAQ,CAAC,OAAO,EAAE,EACtC,OAAO,EACP,MAAM,EACN,OAAO,EACP,IAAI,EACJ,MAAM,EACN,QAAmB,EACnB,YAAY,GACb,EAAE,aAAa,CAAC,OAAO,CAAC,oDAmKxB"}
+{"version":3,"file":"ItemForm.d.ts","sourceRoot":"","sources":["../../src/components/ItemForm.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,KAAK,aAAa,EAAuB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAG9F,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,YAAY,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;CAC7D;AAED;;;GAGG;AACH,wBAAsB,QAAQ,CAAC,EAC7B,OAAO,EACP,MAAM,EACN,OAAO,EACP,IAAI,EACJ,MAAM,EACN,QAAmB,EACnB,YAAY,GACb,EAAE,aAAa,oDAuKf"}

package/dist/components/ItemForm.js

@@ -27,10 +27,13 @@ export async function ItemForm({ context, config, listKey, mode, itemId, basePat
                 }
             }
             // 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);
@@ -53,7 +56,8 @@ export async function ItemForm({ context, config, listKey, mode, itemId, basePat
                 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) => ({
                             id: item.id,

package/dist/components/ListView.d.ts

@@ -1,6 +1,6 @@
-import { AccessContext, OpenSaasConfig, type PrismaClientLike } from '@opensaas/stack-core';
-export interface ListViewProps<TPrisma extends PrismaClientLike = PrismaClientLike> {
-    context: AccessContext<TPrisma>;
+import { type AccessContext, OpenSaasConfig } from '@opensaas/stack-core';
+export interface ListViewProps {
+    context: AccessContext<unknown>;
     config: OpenSaasConfig;
     listKey: string;
     basePath?: string;
@@ -13,5 +13,5 @@ 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 declare function ListView<TPrisma extends PrismaClientLike = PrismaClientLike>({ context, config, listKey, basePath, columns, page, pageSize, search, }: ListViewProps<TPrisma>): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function ListView({ context, config, listKey, basePath, columns, page, pageSize, search, }: ListViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=ListView.d.ts.map

package/dist/components/ListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../src/components/ListView.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,aAAa,EAGb,cAAc,EACd,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAA;AAE7B,MAAM,WAAW,aAAa,CAAC,OAAO,SAAS,gBAAgB,GAAG,gBAAgB;IAChF,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;;GAGG;AACH,wBAAsB,QAAQ,CAAC,OAAO,SAAS,gBAAgB,GAAG,gBAAgB,EAAE,EAClF,OAAO,EACP,MAAM,EACN,OAAO,EACP,QAAmB,EACnB,OAAO,EACP,IAAQ,EACR,QAAa,EACb,MAAM,GACP,EAAE,aAAa,CAAC,OAAO,CAAC,oDAqHxB"}
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../src/components/ListView.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,aAAa,EAAuB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE9F,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;;GAGG;AACH,wBAAsB,QAAQ,CAAC,EAC7B,OAAO,EACP,MAAM,EACN,OAAO,EACP,QAAmB,EACnB,OAAO,EACP,IAAQ,EACR,QAAa,EACb,MAAM,GACP,EAAE,aAAa,oDA6Hf"}

package/dist/components/ListView.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from 'next/link.js';
 import { ListViewClient } from './ListViewClient.js';
 import { formatListName } from '../lib/utils.js';
-import { getDbKey, getUrlKey, } from '@opensaas/stack-core';
+import { getDbKey, getUrlKey } from '@opensaas/stack-core';
 /**
  * List view component - displays items in a table
  * Server Component that fetches data and renders client table
@@ -47,15 +47,19 @@ export async function ListView({ context, config, listKey, basePath = '/admin',
                 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);
@@ -65,7 +69,10 @@ export async function ListView({ context, config, listKey, basePath = '/admin',
     // Extract only the relationship refs needed by client (don't send entire config)
     const relationshipRefs = {};
     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;
         }
     });

package/dist/components/Navigation.d.ts

@@ -1,6 +1,6 @@
-import { AccessContext, OpenSaasConfig } from '@opensaas/stack-core';
-export interface NavigationProps<TPrisma> {
-    context: AccessContext<TPrisma>;
+import { type AccessContext, OpenSaasConfig } from '@opensaas/stack-core';
+export interface NavigationProps {
+    context: AccessContext<unknown>;
     config: OpenSaasConfig;
     basePath?: string;
     currentPath?: string;
@@ -10,5 +10,5 @@ export interface NavigationProps<TPrisma> {
  * Navigation sidebar showing all lists
  * Server Component
  */
-export declare function Navigation<TPrisma>({ context, config, basePath, currentPath, onSignOut, }: NavigationProps<TPrisma>): import("react/jsx-runtime").JSX.Element;
+export declare function Navigation({ context, config, basePath, currentPath, onSignOut, }: NavigationProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Navigation.d.ts.map

package/dist/components/Navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../src/components/Navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAa,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAG/E,MAAM,WAAW,eAAe,CAAC,OAAO;IACtC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAChC;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,EAClC,OAAO,EACP,MAAM,EACN,QAAmB,EACnB,WAAgB,EAChB,SAAS,GACV,EAAE,eAAe,CAAC,OAAO,CAAC,2CAkF1B"}
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../src/components/Navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAa,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGpF,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAChC;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,MAAM,EACN,QAAmB,EACnB,WAAgB,EAChB,SAAS,GACV,EAAE,eAAe,2CAkFjB"}

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

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensaas/stack-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Composable React UI components for OpenSaas Stack",
   "type": "module",
   "main": "./dist/index.js",
@@ -60,41 +60,41 @@
     "@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.554.0",
-    "react-hook-form": "^7.54.2",
-    "tailwind-merge": "^3.3.1"
+    "lucide-react": "^0.561.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/browser": "^4.0.9",
-    "@vitest/browser-playwright": "^4.0.9",
-    "@vitest/coverage-v8": "^4.0.4",
-    "happy-dom": "^20.0.0",
-    "next": "^16.0.1",
-    "playwright": "^1.56.1",
-    "postcss": "^8.4.49",
-    "postcss-cli": "^11.0.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.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.3.0"
+    "vitest": "^4.0.15",
+    "@opensaas/stack-core": "0.5.0"
   },
   "scripts": {
     "build": "tsc && npm run build:css",

package/src/components/AdminUI.tsx

@@ -4,11 +4,11 @@ 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 }
@@ -28,7 +28,7 @@ export interface AdminUIProps<TPrisma> {
  * - [list, 'create'] → ItemForm (create)
  * - [list, id] → ItemForm (edit)
  */
-export function AdminUI<TPrisma>({
+export function AdminUI({
   context,
   config,
   params = [],
@@ -36,7 +36,7 @@ export function AdminUI<TPrisma>({
   basePath = '/admin',
   serverAction,
   onSignOut,
-}: AdminUIProps<TPrisma>) {
+}: AdminUIProps) {
   // Parse route from params
   const [urlSegment, action] = params
 

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/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
     }
   })

package/src/components/Navigation.tsx

@@ -1,10 +1,10 @@
 import Link from 'next/link.js'
 import { formatListName } from '../lib/utils.js'
-import { AccessContext, getUrlKey, OpenSaasConfig } from '@opensaas/stack-core'
+import { type AccessContext, getUrlKey, OpenSaasConfig } from '@opensaas/stack-core'
 import { UserMenu } from './UserMenu.js'
 
-export interface NavigationProps<TPrisma> {
-  context: AccessContext<TPrisma>
+export interface NavigationProps {
+  context: AccessContext<unknown>
   config: OpenSaasConfig
   basePath?: string
   currentPath?: string
@@ -15,13 +15,13 @@ export interface NavigationProps<TPrisma> {
  * Navigation sidebar showing all lists
  * Server Component
  */
-export function Navigation<TPrisma>({
+export function Navigation({
   context,
   config,
   basePath = '/admin',
   currentPath = '',
   onSignOut,
-}: NavigationProps<TPrisma>) {
+}: NavigationProps) {
   const lists = Object.keys(config.lists || {})
 
   return (

package/src/primitives/button.tsx

@@ -31,8 +31,7 @@ const buttonVariants = cva(
 )
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean
 }