@opensaas/stack-ui 0.20.1 → 0.21.0

package/dist/lib/useItemForm.d.ts

@@ -0,0 +1,85 @@
+import type { SerializableFieldConfig } from './serializeFieldConfig.js';
+/**
+ * The action an item form submission represents.
+ */
+export type ItemFormAction = 'create' | 'update';
+/**
+ * Transform raw form state into the data shape expected by the server/Prisma.
+ *
+ * This is the shared submit transform used by every item form (the AdminUI
+ * form and the standalone create/edit forms). Keeping it a pure function makes
+ * it testable without rendering a component.
+ *
+ * Behaviour (the superset applied by all forms):
+ * - Relationship fields are converted to Prisma `connect` shape (single or many).
+ *   Empty single relationships and empty many-arrays are omitted.
+ * - Password fields whose value is an `{ isSet }` sentinel (an unchanged password
+ *   read back from the server) are skipped, so they are not re-submitted.
+ * - All other fields pass through unchanged (including `File` objects, which the
+ *   Next.js server action serialises).
+ */
+export declare function transformItemFormData(fields: Record<string, SerializableFieldConfig>, formData: Record<string, unknown>): Record<string, unknown>;
+/**
+ * Apply each field's `valueForClientSerialization` transform to initial data,
+ * so values read from the server are shaped for the client form inputs.
+ *
+ * Operates on the original (non-serialized) field configs because the transform
+ * function is stripped during serialization.
+ */
+export declare function transformInitialData<TData extends Record<string, unknown>>(fields: Record<string, unknown>, initialData: TData): TData;
+/**
+ * Drop system fields (id, createdAt, updatedAt) from a field-config map,
+ * returning the editable entries in declaration order.
+ */
+export declare function getEditableFields(fields: Record<string, SerializableFieldConfig>): Array<[string, SerializableFieldConfig]>;
+/**
+ * Result of a form submission adapter. `false`/error means the submission
+ * failed and the form should surface `error` (and optional per-field errors).
+ */
+export type ItemFormSubmitResult = {
+    success: true;
+} | {
+    success: false;
+    error: string;
+    fieldErrors?: Record<string, string>;
+};
+export interface UseItemFormOptions {
+    /** Serialized field configs (drives rendering + the submit transform). */
+    fields: Record<string, SerializableFieldConfig>;
+    /** Initial form values (already client-serialized). */
+    initialData?: Record<string, unknown>;
+    /** Whether this form creates or updates. Selects the submit action. */
+    mode: ItemFormAction;
+    /**
+     * Submit adapter. Receives the transformed data and the action; each caller
+     * wires this to its own mechanism (AdminUI server action + navigation, or a
+     * standalone `onSubmit` callback). May return void for the legacy/standalone
+     * "throw on failure" style.
+     */
+    onSubmit: (data: Record<string, unknown>, action: ItemFormAction) => Promise<ItemFormSubmitResult | void>;
+    /** Optional fallback message when a submit throws without a message. */
+    errorFallback?: string;
+}
+export interface UseItemFormResult {
+    formData: Record<string, unknown>;
+    errors: Record<string, string>;
+    generalError: string | null;
+    isPending: boolean;
+    editableFields: Array<[string, SerializableFieldConfig]>;
+    handleFieldChange: (fieldName: string, value: unknown) => void;
+    handleSubmit: (e: {
+        preventDefault: () => void;
+    }) => void;
+    setGeneralError: (message: string | null) => void;
+}
+/**
+ * The shared item-form engine.
+ *
+ * Holds the form state, the clear-error-on-change behaviour, the submit
+ * transform, and the pending state (via `useTransition`) that every item form
+ * needs. Callers supply only an `onSubmit` adapter and render the returned
+ * fields/handlers — so the AdminUI form and the standalone create/edit forms
+ * stay thin and share one tested code path.
+ */
+export declare function useItemForm({ fields, initialData, mode, onSubmit, errorFallback, }: UseItemFormOptions): UseItemFormResult;
+//# sourceMappingURL=useItemForm.d.ts.map

package/dist/lib/useItemForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useItemForm.d.ts","sourceRoot":"","sources":["../../src/lib/useItemForm.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AAExE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAIhD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,EAC/C,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAChC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAyBzB;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACxE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,WAAW,EAAE,KAAK,GACjB,KAAK,CAYP;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,GAC9C,KAAK,CAAC,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAE1C;AAED;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAC5B;IAAE,OAAO,EAAE,IAAI,CAAA;CAAE,GACjB;IAAE,OAAO,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,CAAA;AAE3E,MAAM,WAAW,kBAAkB;IACjC,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAA;IAC/C,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACrC,uEAAuE;IACvE,IAAI,EAAE,cAAc,CAAA;IACpB;;;;;OAKG;IACH,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7B,MAAM,EAAE,cAAc,KACnB,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,CAAA;IACzC,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,SAAS,EAAE,OAAO,CAAA;IAClB,cAAc,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAA;IACxD,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9D,YAAY,EAAE,CAAC,CAAC,EAAE;QAAE,cAAc,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAA;IACzD,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAClD;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,aAAkC,GACnC,EAAE,kBAAkB,GAAG,iBAAiB,CA+CxC"}

package/dist/lib/useItemForm.js

@@ -0,0 +1,122 @@
+'use client';
+import { useState, useTransition } from 'react';
+const SYSTEM_FIELDS = ['id', 'createdAt', 'updatedAt'];
+/**
+ * Transform raw form state into the data shape expected by the server/Prisma.
+ *
+ * This is the shared submit transform used by every item form (the AdminUI
+ * form and the standalone create/edit forms). Keeping it a pure function makes
+ * it testable without rendering a component.
+ *
+ * Behaviour (the superset applied by all forms):
+ * - Relationship fields are converted to Prisma `connect` shape (single or many).
+ *   Empty single relationships and empty many-arrays are omitted.
+ * - Password fields whose value is an `{ isSet }` sentinel (an unchanged password
+ *   read back from the server) are skipped, so they are not re-submitted.
+ * - All other fields pass through unchanged (including `File` objects, which the
+ *   Next.js server action serialises).
+ */
+export function transformItemFormData(fields, formData) {
+    const transformed = {};
+    for (const [fieldName, value] of Object.entries(formData)) {
+        const fieldConfig = fields[fieldName];
+        // Skip password fields carrying an { isSet } sentinel (unchanged password).
+        if (typeof value === 'object' && value !== null && 'isSet' in value) {
+            continue;
+        }
+        if (fieldConfig?.type === 'relationship') {
+            if (fieldConfig.many) {
+                if (Array.isArray(value) && value.length > 0) {
+                    transformed[fieldName] = { connect: value.map((id) => ({ id })) };
+                }
+            }
+            else if (value) {
+                transformed[fieldName] = { connect: { id: value } };
+            }
+        }
+        else {
+            transformed[fieldName] = value;
+        }
+    }
+    return transformed;
+}
+/**
+ * Apply each field's `valueForClientSerialization` transform to initial data,
+ * so values read from the server are shaped for the client form inputs.
+ *
+ * Operates on the original (non-serialized) field configs because the transform
+ * function is stripped during serialization.
+ */
+export function transformInitialData(fields, initialData) {
+    const transformed = { ...initialData };
+    for (const [fieldName, fieldConfig] of Object.entries(fields)) {
+        const ui = fieldConfig.ui;
+        const transformer = ui?.valueForClientSerialization;
+        if (typeof transformer === 'function') {
+            transformed[fieldName] = transformer({ value: transformed[fieldName] });
+        }
+    }
+    return transformed;
+}
+/**
+ * Drop system fields (id, createdAt, updatedAt) from a field-config map,
+ * returning the editable entries in declaration order.
+ */
+export function getEditableFields(fields) {
+    return Object.entries(fields).filter(([key]) => !SYSTEM_FIELDS.includes(key));
+}
+/**
+ * The shared item-form engine.
+ *
+ * Holds the form state, the clear-error-on-change behaviour, the submit
+ * transform, and the pending state (via `useTransition`) that every item form
+ * needs. Callers supply only an `onSubmit` adapter and render the returned
+ * fields/handlers — so the AdminUI form and the standalone create/edit forms
+ * stay thin and share one tested code path.
+ */
+export function useItemForm({ fields, initialData = {}, mode, onSubmit, errorFallback = 'Operation failed', }) {
+    const [isPending, startTransition] = useTransition();
+    const [formData, setFormData] = useState(initialData);
+    const [errors, setErrors] = useState({});
+    const [generalError, setGeneralError] = useState(null);
+    const handleFieldChange = (fieldName, value) => {
+        setFormData((prev) => ({ ...prev, [fieldName]: value }));
+        if (errors[fieldName]) {
+            setErrors((prev) => {
+                const next = { ...prev };
+                delete next[fieldName];
+                return next;
+            });
+        }
+    };
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        setErrors({});
+        setGeneralError(null);
+        startTransition(async () => {
+            const data = transformItemFormData(fields, formData);
+            try {
+                const result = await onSubmit(data, mode);
+                // void result → adapter handles its own success/navigation.
+                if (result && result.success === false) {
+                    if (result.fieldErrors)
+                        setErrors(result.fieldErrors);
+                    setGeneralError(result.error || errorFallback);
+                }
+            }
+            catch (error) {
+                setGeneralError(error?.message || errorFallback);
+            }
+        });
+    };
+    return {
+        formData,
+        errors,
+        generalError,
+        isPending,
+        editableFields: getEditableFields(fields),
+        handleFieldChange,
+        handleSubmit,
+        setGeneralError,
+    };
+}

package/dist/server/types.d.ts

@@ -2,7 +2,7 @@
  * Input for the generic server action
  * Re-exported from @opensaas/stack-core for convenience
  */
-export type { ServerActionProps as ServerActionInput } from '@opensaas/stack-core';
+export type { ServerActionProps as ServerActionInput } from '@opensaas/stack-core/internal';
 /**
  * Result of a server action
  */

package/dist/server/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/server/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,YAAY,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAElF;;GAEG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACvD,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,CAAC,CAAA;IACR,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACrC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/server/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,YAAY,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AAE3F;;GAEG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACvD,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,CAAC,CAAA;IACR,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACrC"}

package/dist/styles/globals.css

@@ -1208,6 +1208,11 @@
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensaas/stack-ui",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "description": "Composable React UI components for OpenSaas Stack",
   "type": "module",
   "main": "./dist/index.js",
@@ -77,16 +77,16 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.12.0",
+    "@types/node": "^25.9.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
-    "@vitest/browser": "^4.0.18",
+    "@vitest/browser": "^4.1.8",
     "@vitest/browser-playwright": "^4.1.0",
     "@vitest/coverage-v8": "^4.0.18",
     "happy-dom": "^20.8.3",
     "next": "^16.1.6",
-    "playwright": "^1.58.2",
+    "playwright": "^1.60.0",
     "postcss": "^8.5.8",
     "postcss-cli": "^11.0.1",
     "react": "^19.2.4",
@@ -94,7 +94,7 @@
     "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.0",
-    "@opensaas/stack-core": "0.20.1"
+    "@opensaas/stack-core": "0.21.0"
   },
   "scripts": {
     "build": "tsc && npm run build:css",

package/src/components/ItemFormClient.tsx

@@ -9,6 +9,7 @@ import { LoadingSpinner } from './LoadingSpinner.js'
 import { Button } from '../primitives/button.js'
 import type { ServerActionInput } from '../server/types.js'
 import type { SerializableFieldConfig } from '../lib/serializeFieldConfig.js'
+import { useItemForm, type ItemFormSubmitResult } from '../lib/useItemForm.js'
 
 export interface ItemFormClientProps {
   listKey: string
@@ -23,8 +24,29 @@ export interface ItemFormClientProps {
 }
 
 /**
- * Client component for interactive form
- * Handles form state, validation, and submission
+ * Normalise a server action's response into the form engine's result shape.
+ * Supports both the `{ success, error, fieldErrors }` envelope and the legacy
+ * "truthy data = success, null = access denied" convention.
+ */
+function toSubmitResult(result: unknown, deniedMessage: string): ItemFormSubmitResult {
+  if (result && typeof result === 'object' && 'success' in result) {
+    const r = result as
+      | { success: true; data: unknown }
+      | { success: false; error: string; fieldErrors?: Record<string, string> }
+    return r.success
+      ? { success: true }
+      : { success: false, error: r.error, fieldErrors: r.fieldErrors }
+  }
+  if (result) return { success: true }
+  return { success: false, error: deniedMessage }
+}
+
+/**
+ * Client component for the AdminUI item form.
+ *
+ * Shares the form state/transform/error/pending logic with the standalone
+ * forms via `useItemForm`; this component only adapts submission to the
+ * AdminUI server action + router navigation, and adds the delete flow.
  */
 export function ItemFormClient({
   listKey,
@@ -38,149 +60,57 @@ export function ItemFormClient({
   relationshipData = {},
 }: ItemFormClientProps) {
   const router = useRouter()
-  const [isPending, startTransition] = useTransition()
-  const [formData, setFormData] = useState<Record<string, unknown>>(initialData)
-  const [errors, setErrors] = useState<Record<string, string>>({})
-  const [generalError, setGeneralError] = useState<string | null>(null)
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
-
-  const handleFieldChange = (fieldName: string, value: unknown) => {
-    setFormData((prev) => ({ ...prev, [fieldName]: value }))
-    // Clear error for this field when user starts typing
-    if (errors[fieldName]) {
-      setErrors((prev) => {
-        const newErrors = { ...prev }
-        delete newErrors[fieldName]
-        return newErrors
-      })
-    }
-  }
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setErrors({})
-    setGeneralError(null)
-
-    startTransition(async () => {
-      // 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 - 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 },
-              }
-            }
-          }
-        } 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
-        }
-      }
-
+  // Separate transition for delete (not a form submit, so outside the engine).
+  const [isDeleting, startDeleteTransition] = useTransition()
+
+  const {
+    formData,
+    errors,
+    generalError,
+    isPending,
+    editableFields,
+    handleFieldChange,
+    handleSubmit,
+    setGeneralError,
+  } = useItemForm({
+    fields,
+    initialData,
+    mode: mode === 'create' ? 'create' : 'update',
+    errorFallback: 'Access denied or operation failed',
+    onSubmit: async (data, action) => {
       const result =
-        mode === 'create'
-          ? await serverAction({
-              listKey,
-              action: 'create',
-              data: transformedData,
-            })
-          : await serverAction({
-              listKey,
-              action: 'update',
-              id: itemId!,
-              data: transformedData,
-            })
+        action === 'create'
+          ? await serverAction({ listKey, action: 'create', data })
+          : await serverAction({ listKey, action: 'update', id: itemId!, data })
 
-      // 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 {
-          // Handle error response
-          if (actionResult.fieldErrors) {
-            setErrors(actionResult.fieldErrors)
-          }
-          setGeneralError(actionResult.error)
-        }
-      } else if (result) {
-        // Legacy format: result is the data itself
+      const normalized = toSubmitResult(result, 'Access denied or operation failed')
+      if (normalized.success) {
         router.push(`${basePath}/${urlKey}`)
         router.refresh()
-      } else {
-        // null result means access denied
-        setGeneralError('Access denied or operation failed')
       }
-    })
-  }
+      return normalized
+    },
+  })
 
-  const handleDelete = async () => {
+  const handleDelete = () => {
     if (!itemId) return
-
     setGeneralError(null)
     setShowDeleteConfirm(false)
 
-    startTransition(async () => {
-      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(actionResult.error)
-        }
-      } else if (result) {
-        // Legacy format: result is the data itself
+    startDeleteTransition(async () => {
+      const result = await serverAction({ listKey, action: 'delete', id: itemId })
+      const normalized = toSubmitResult(result, 'Access denied or failed to delete item')
+      if (normalized.success) {
         router.push(`${basePath}/${urlKey}`)
         router.refresh()
       } else {
-        // null result means access denied
-        setGeneralError('Access denied or failed to delete item')
+        setGeneralError(normalized.error)
       }
     })
   }
 
-  // Filter out system fields
-  const editableFields = Object.entries(fields).filter(
-    ([key]) => !['id', 'createdAt', 'updatedAt'].includes(key),
-  )
+  const busy = isPending || isDeleting
 
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
@@ -201,7 +131,7 @@ export function ItemFormClient({
             value={formData[fieldName]}
             onChange={(value) => handleFieldChange(fieldName, value)}
             error={errors[fieldName]}
-            disabled={isPending}
+            disabled={busy}
             mode="edit"
             relationshipItems={relationshipData[fieldName] || []}
             relationshipLoading={false}
@@ -213,7 +143,7 @@ export function ItemFormClient({
       {/* Form Actions */}
       <div className="flex items-center justify-between pt-6 border-t border-border">
         <div className="flex gap-3">
-          <Button type="submit" disabled={isPending} className="gap-2">
+          <Button type="submit" disabled={busy} className="gap-2">
             {isPending && (
               <LoadingSpinner
                 size="sm"
@@ -226,7 +156,7 @@ export function ItemFormClient({
             type="button"
             variant="secondary"
             onClick={() => router.push(`${basePath}/${urlKey}`)}
-            disabled={isPending}
+            disabled={busy}
           >
             Cancel
           </Button>
@@ -238,7 +168,7 @@ export function ItemFormClient({
             type="button"
             variant="destructive"
             onClick={() => setShowDeleteConfirm(true)}
-            disabled={isPending}
+            disabled={busy}
           >
             Delete
           </Button>

package/src/components/fields/FieldRenderer.tsx

@@ -57,36 +57,17 @@ function FieldRendererInner({
     mode,
   }
 
-  // Add field-type-specific props
-  const specificProps: Record<string, unknown> = {}
-
-  if (fieldConfig.type === 'select' && 'options' in fieldConfig && fieldConfig.options) {
-    specificProps.options = fieldConfig.options.map(
-      (opt: string | { label: string; value: string }) =>
-        typeof opt === 'string' ? { label: opt, value: opt } : opt,
-    )
-  }
-
-  if (fieldConfig.type === 'password') {
-    specificProps.showConfirm = mode === 'edit'
-  }
-
-  if (fieldConfig.type === 'relationship') {
-    specificProps.items = relationshipItems
-    specificProps.isLoading = relationshipLoading
-    specificProps.many = fieldConfig.many || false
-
-    // Extract related list key from ref (format: 'ListName.fieldName')
-    if (fieldConfig.ref) {
-      const [relatedListName] = fieldConfig.ref.split('.')
-      specificProps.relatedListKey = getUrlKey(relatedListName)
-      specificProps.basePath = basePath
-    }
-  }
+  // Derive field-type-specific props from data-presence checks — no branching on fieldConfig.type.
+  const specificProps: Record<string, unknown> = buildFallbackUIProps(
+    fieldConfig,
+    relationshipItems,
+    relationshipLoading,
+    basePath,
+  )
 
   // Pass through any UI options from fieldConfig.ui (excluding component and fieldType)
   if (fieldConfig.ui) {
-    const { _component, _fieldType, ...uiOptions } = fieldConfig.ui
+    const { component: _component, fieldType: _fieldType, ...uiOptions } = fieldConfig.ui
     Object.assign(specificProps, uiOptions)
   }
 
@@ -94,6 +75,36 @@ function FieldRendererInner({
   return <Component {...allProps} />
 }
 
+/**
+ * Derive field-specific UI props from the serialised field config using
+ * data-presence checks rather than `fieldConfig.type` comparisons.
+ */
+function buildFallbackUIProps(
+  fieldConfig: SerializableFieldConfig,
+  relationshipItems: Array<{ id: string; label: string }> | undefined,
+  relationshipLoading: boolean | undefined,
+  basePath: string | undefined,
+): Record<string, unknown> {
+  const props: Record<string, unknown> = {}
+
+  // Select options — only present on select fields
+  if (fieldConfig.options) {
+    props.options = fieldConfig.options
+  }
+
+  // Relationship props — only present on relationship fields
+  if (fieldConfig.ref) {
+    const [relatedListName] = fieldConfig.ref.split('.')
+    props.relatedListKey = getUrlKey(relatedListName ?? '')
+    props.many = fieldConfig.many || false
+    props.items = relationshipItems
+    props.isLoading = relationshipLoading
+    props.basePath = basePath
+  }
+
+  return props
+}
+
 /**
  * Factory component that renders the appropriate field type
  * based on the field configuration and component registry

package/src/components/fields/FileField.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useCallback, useState } from 'react'
-import type { FileMetadata } from '@opensaas/stack-core'
+import type { FileMetadata } from '@opensaas/stack-core/internal'
 import { Button } from '../../primitives/button.js'
 import { Input } from '../../primitives/input.js'
 import { Label } from '../../primitives/label.js'

package/src/components/fields/ImageField.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useCallback, useState } from 'react'
-import type { ImageMetadata } from '@opensaas/stack-core'
+import type { ImageMetadata } from '@opensaas/stack-core/internal'
 import { Button } from '../../primitives/button.js'
 import { Input } from '../../primitives/input.js'
 import { Label } from '../../primitives/label.js'