@jskit-ai/users-web 0.1.37 → 0.1.38

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/users-web",
-  version: "0.1.37",
+  version: "0.1.38",
   kind: "runtime",
   description: "Users web module: workspace selector shell element plus workspace/profile/members UI elements.",
   dependsOn: [
@@ -231,12 +231,12 @@ export default Object.freeze({
       runtime: {
         "@tanstack/vue-query": "5.92.12",
         "@mdi/js": "^7.4.47",
-        "@jskit-ai/http-runtime": "0.1.22",
-        "@jskit-ai/realtime": "0.1.22",
-        "@jskit-ai/kernel": "0.1.23",
-        "@jskit-ai/shell-web": "0.1.22",
-        "@jskit-ai/uploads-image-web": "0.1.1",
-        "@jskit-ai/users-core": "0.1.32",
+        "@jskit-ai/http-runtime": "0.1.23",
+        "@jskit-ai/realtime": "0.1.23",
+        "@jskit-ai/kernel": "0.1.24",
+        "@jskit-ai/shell-web": "0.1.23",
+        "@jskit-ai/uploads-image-web": "0.1.2",
+        "@jskit-ai/users-core": "0.1.33",
         "vuetify": "^4.0.0"
       },
       dev: {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/users-web",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -8,26 +8,30 @@
   "exports": {
     "./client": "./src/client/index.js",
     "./client/components/WorkspaceMembersClientElement": "./src/client/components/WorkspaceMembersClientElement.vue",
-    "./client/composables/useAddEdit": "./src/client/composables/useAddEdit.js",
-    "./client/composables/useCrudSchemaForm": "./src/client/composables/useCrudSchemaForm.js",
-    "./client/composables/crudLookupFieldRuntime": "./src/client/composables/crudLookupFieldRuntime.js",
-    "./client/composables/useList": "./src/client/composables/useList.js",
-    "./client/composables/useView": "./src/client/composables/useView.js",
+    "./client/composables/useAddEdit": "./src/client/composables/records/useAddEdit.js",
+    "./client/composables/useCrudAddEdit": "./src/client/composables/records/useCrudAddEdit.js",
+    "./client/composables/crudLookupFieldRuntime": "./src/client/composables/crud/crudLookupFieldRuntime.js",
+    "./client/composables/useList": "./src/client/composables/records/useList.js",
+    "./client/composables/useCrudList": "./src/client/composables/records/useCrudList.js",
+    "./client/composables/useCrudListParentTitle": "./src/client/composables/useCrudListParentTitle.js",
+    "./client/composables/useView": "./src/client/composables/records/useView.js",
+    "./client/composables/useCrudView": "./src/client/composables/records/useCrudView.js",
     "./client/composables/usePagedCollection": "./src/client/composables/usePagedCollection.js",
     "./client/composables/useAccountSettingsRuntime": "./src/client/composables/useAccountSettingsRuntime.js",
     "./client/composables/usePaths": "./src/client/composables/usePaths.js",
     "./client/composables/useWorkspaceRouteContext": "./src/client/composables/useWorkspaceRouteContext.js",
+    "./client/support/menuLinkTarget": "./src/client/support/menuLinkTarget.js",
     "./client/support/realtimeWorkspace": "./src/client/support/realtimeWorkspace.js"
   },
   "dependencies": {
     "@tanstack/vue-query": "5.92.12",
     "@mdi/js": "^7.4.47",
-    "@jskit-ai/http-runtime": "0.1.22",
-    "@jskit-ai/kernel": "0.1.23",
-    "@jskit-ai/realtime": "0.1.22",
-    "@jskit-ai/shell-web": "0.1.22",
-    "@jskit-ai/uploads-image-web": "0.1.1",
-    "@jskit-ai/users-core": "0.1.32",
+    "@jskit-ai/http-runtime": "0.1.23",
+    "@jskit-ai/kernel": "0.1.24",
+    "@jskit-ai/realtime": "0.1.23",
+    "@jskit-ai/shell-web": "0.1.23",
+    "@jskit-ai/uploads-image-web": "0.1.2",
+    "@jskit-ai/users-core": "0.1.33",
     "vuetify": "^4.0.0"
   }
 }

package/src/client/components/UsersSurfaceAwareMenuLinkItem.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { computed } from "vue";
+import { useRoute } from "vue-router";
 import { useWebPlacementContext } from "@jskit-ai/shell-web/client/placement";
 import { usePaths } from "../composables/usePaths.js";
-import { surfaceRequiresWorkspaceFromPlacementContext } from "../lib/workspaceSurfaceContext.js";
 import { resolveMenuLinkIcon } from "../lib/menuIcons.js";
+import { resolveMenuLinkTarget } from "../support/menuLinkTarget.js";
 
 const props = defineProps({
   label: {
@@ -36,34 +37,22 @@ const props = defineProps({
   }
 });
 
+const route = useRoute();
 const paths = usePaths();
 const { context: placementContext } = useWebPlacementContext();
 
-const targetSurfaceId = computed(() => {
-  const explicitSurface = String(props.surface || "").trim().toLowerCase();
-  if (explicitSurface && explicitSurface !== "*") {
-    return explicitSurface;
-  }
-
-  return String(paths.currentSurfaceId.value || "").trim().toLowerCase();
-});
-
 const resolvedTo = computed(() => {
-  const explicitTo = String(props.to || "").trim();
-  if (explicitTo) {
-    return explicitTo;
-  }
-
-  const workspaceRequired = surfaceRequiresWorkspaceFromPlacementContext(
-    placementContext.value,
-    targetSurfaceId.value
-  );
-  const suffix = workspaceRequired ? props.workspaceSuffix : props.nonWorkspaceSuffix;
-  const normalizedSuffix = String(suffix || "/").trim() || "/";
-
-  return paths.page(normalizedSuffix, {
-    surface: targetSurfaceId.value,
-    mode: "auto"
+  return resolveMenuLinkTarget({
+    to: props.to,
+    surface: props.surface,
+    currentSurfaceId: paths.currentSurfaceId.value,
+    placementContext: placementContext.value,
+    workspaceSuffix: props.workspaceSuffix,
+    nonWorkspaceSuffix: props.nonWorkspaceSuffix,
+    routeParams: route.params || {},
+    resolvePagePath(relativePath, options = {}) {
+      return paths.page(relativePath, options);
+    }
   });
 });
 

package/src/client/components/WorkspaceMembersClientElement.vue

@@ -23,11 +23,11 @@ import { computed, reactive, ref, watch } from "vue";
 import { formatDateTime } from "@jskit-ai/kernel/shared/support";
 import MembersAdminClientElement from "./MembersAdminClientElement.vue";
 import { useCommand } from "../composables/useCommand.js";
-import { useList } from "../composables/useList.js";
-import { useView } from "../composables/useView.js";
+import { useList } from "../composables/records/useList.js";
+import { useView } from "../composables/records/useView.js";
 import { usePaths } from "../composables/usePaths.js";
 import { useAccess } from "../composables/useAccess.js";
-import { useUiFeedback } from "../composables/useUiFeedback.js";
+import { useUiFeedback } from "../composables/runtime/useUiFeedback.js";
 import { useWorkspaceRouteContext } from "../composables/useWorkspaceRouteContext.js";
 import { useShellWebErrorRuntime } from "@jskit-ai/shell-web/client/error";
 import { createWorkspaceRealtimeMatcher } from "../support/realtimeWorkspace.js";

package/src/client/components/WorkspaceProfileClientElement.vue

@@ -71,7 +71,7 @@ import { computed, reactive } from "vue";
 import { validateOperationSection } from "@jskit-ai/http-runtime/shared/validators/operationValidation";
 import { workspaceResource } from "@jskit-ai/users-core/shared/resources/workspaceResource";
 import { USERS_ROUTE_VISIBILITY_WORKSPACE } from "@jskit-ai/users-core/shared/support/usersVisibility";
-import { useAddEdit } from "../composables/useAddEdit.js";
+import { useAddEdit } from "../composables/records/useAddEdit.js";
 import { buildWorkspaceQueryKey } from "../support/workspaceQueryKeys.js";
 
 const emit = defineEmits(["saved"]);

package/src/client/components/WorkspaceSettingsFieldsClientElement.vue

@@ -176,7 +176,7 @@ import {
   DEFAULT_WORKSPACE_LIGHT_PALETTE,
   resolveWorkspaceThemePalettes
 } from "@jskit-ai/users-core/shared/settings";
-import { useAddEdit } from "../composables/useAddEdit.js";
+import { useAddEdit } from "../composables/records/useAddEdit.js";
 import { useWorkspaceRouteContext } from "../composables/useWorkspaceRouteContext.js";
 import { createWorkspaceRealtimeMatcher } from "../support/realtimeWorkspace.js";
 import { buildWorkspaceQueryKey } from "../support/workspaceQueryKeys.js";

package/src/client/components/WorkspacesClientElement.vue

@@ -8,12 +8,12 @@ import {
 import { useShellWebErrorRuntime } from "@jskit-ai/shell-web/client/error";
 import { normalizeWorkspaceList } from "../lib/bootstrap.js";
 import { useCommand } from "../composables/useCommand.js";
-import { useView } from "../composables/useView.js";
+import { useView } from "../composables/records/useView.js";
 import { usePaths } from "../composables/usePaths.js";
 import { useRealtimeQueryInvalidation } from "../composables/useRealtimeQueryInvalidation.js";
 import { useWorkspaceSurfaceId } from "../composables/useWorkspaceSurfaceId.js";
 import { USERS_ROUTE_VISIBILITY_PUBLIC } from "@jskit-ai/users-core/shared/support/usersVisibility";
-import { normalizePendingInvite } from "../composables/accountSettingsRuntimeHelpers.js";
+import { normalizePendingInvite } from "../composables/account-settings/accountSettingsRuntimeHelpers.js";
 
 const route = useRoute();
 const router = useRouter();

package/src/client/composables/account-settings/accountSettingsAvatarUploadRuntime.js

@@ -0,0 +1,61 @@
+import "@jskit-ai/uploads-image-web/client/styles";
+import { createManagedImageAssetRuntime } from "@jskit-ai/uploads-image-web/client/composables/createManagedImageAssetRuntime";
+import { resolveFieldErrors } from "@jskit-ai/http-runtime/client";
+import { usersWebHttpClient } from "../../lib/httpClient.js";
+
+function createAccountSettingsAvatarUploadRuntime({
+  queryClient,
+  sessionQueryKey,
+  accountSettingsQueryKey,
+  selectedAvatarFileName,
+  applySettingsData,
+  reportAccountFeedback
+} = {}) {
+  async function resolveCsrfToken() {
+    const sessionPayload = await queryClient.fetchQuery({
+      queryKey: sessionQueryKey,
+      queryFn: () =>
+        usersWebHttpClient.request("/api/session", {
+          method: "GET"
+        }),
+      staleTime: 60_000
+    });
+
+    const csrfToken = String(sessionPayload?.csrfToken || "");
+    if (!csrfToken) {
+      throw new Error("Unable to prepare secure avatar upload request.");
+    }
+
+    return csrfToken;
+  }
+
+  return createManagedImageAssetRuntime({
+    uploadEndpoint: "/api/settings/profile/avatar",
+    fieldName: "avatar",
+    selectedFileName: selectedAvatarFileName,
+    resolveRequestHeaders: async () => ({
+      "csrf-token": await resolveCsrfToken()
+    }),
+    onUploadSuccess: ({ data }) => {
+      applySettingsData(data);
+      queryClient.setQueryData(accountSettingsQueryKey, data);
+    },
+    reportFeedback: reportAccountFeedback,
+    resolveUploadErrorMessage: ({ error, response, defaultMessage }) => {
+      const body = response?.body && typeof response.body === "object" ? response.body : {};
+      const fieldErrors = resolveFieldErrors(body);
+      return String(fieldErrors.avatar || body?.error || error?.message || defaultMessage);
+    },
+    messages: {
+      uploadSuccess: "Avatar uploaded.",
+      uploadInvalidResponse: "Avatar uploaded, but the response payload was invalid.",
+      uploadError: "Unable to upload avatar.",
+      uploadRestriction: "Selected avatar file does not meet upload restrictions.",
+      editorUnavailable: "Avatar editor is unavailable in this environment.",
+      changeError: "Avatar uploaded, but the settings view could not refresh."
+    },
+    source: "users-web.account-settings-runtime:avatar"
+  });
+}
+
+export { createAccountSettingsAvatarUploadRuntime };

package/src/client/composables/{accountSettingsInvitesRuntime.js → account-settings/accountSettingsInvitesRuntime.js}

@@ -1,4 +1,4 @@
-import { resolveErrorStatusCode } from "../support/runtimeNormalization.js";
+import { resolveErrorStatusCode } from "../../support/runtimeNormalization.js";
 
 function createAccountSettingsInvitesRuntime({
   invitesAvailable,

package/src/client/composables/{accountSettingsRuntimeHelpers.js → account-settings/accountSettingsRuntimeHelpers.js}

@@ -3,7 +3,7 @@ import {
   normalizeReturnToPath as normalizeSharedReturnToPath,
   resolveAllowedOriginsFromPlacementContext
 } from "@jskit-ai/kernel/shared/support";
-import { normalizeRecord } from "../support/runtimeNormalization.js";
+import { normalizeRecord } from "../../support/runtimeNormalization.js";
 
 function normalizeReturnToPath(value, { fallback = "/", accountSettingsPath = "/account", allowedOrigins = [] } = {}) {
   return normalizeSharedReturnToPath(value, {

package/src/client/composables/crud/crudBindingSupport.js

@@ -0,0 +1,75 @@
+import { unref } from "vue";
+import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
+import { asPlainObject } from "../support/scopeHelpers.js";
+
+const CRUD_BINDING_MODE_ROUTE = "route";
+const CRUD_BINDING_MODE_MERGE = "merge";
+const CRUD_BINDING_MODE_EXPLICIT = "explicit";
+const CRUD_BINDING_MODE_NONE = "none";
+
+function normalizeCrudBindingMode(value = "") {
+  const normalizedValue = normalizeText(value).toLowerCase();
+  if (normalizedValue === CRUD_BINDING_MODE_MERGE) {
+    return CRUD_BINDING_MODE_MERGE;
+  }
+  if (normalizedValue === CRUD_BINDING_MODE_EXPLICIT) {
+    return CRUD_BINDING_MODE_EXPLICIT;
+  }
+  if (normalizedValue === CRUD_BINDING_MODE_NONE) {
+    return CRUD_BINDING_MODE_NONE;
+  }
+
+  return CRUD_BINDING_MODE_ROUTE;
+}
+
+function normalizeCrudBindingConfig(binding = {}) {
+  const source = asPlainObject(unref(binding));
+  return Object.freeze({
+    mode: normalizeCrudBindingMode(source.mode),
+    values: source.values ?? null
+  });
+}
+
+function resolveCrudBindingValues(values, context = {}) {
+  if (typeof values === "function") {
+    return asPlainObject(values(context));
+  }
+
+  return asPlainObject(unref(values));
+}
+
+function resolveCrudBoundValues({
+  binding = {},
+  routeValues = {},
+  context = {}
+} = {}) {
+  const normalizedBinding = normalizeCrudBindingConfig(binding);
+  const normalizedRouteValues = asPlainObject(routeValues);
+  const explicitValues = resolveCrudBindingValues(normalizedBinding.values, context);
+
+  if (normalizedBinding.mode === CRUD_BINDING_MODE_NONE) {
+    return {};
+  }
+  if (normalizedBinding.mode === CRUD_BINDING_MODE_EXPLICIT) {
+    return explicitValues;
+  }
+  if (normalizedBinding.mode === CRUD_BINDING_MODE_MERGE) {
+    return {
+      ...normalizedRouteValues,
+      ...explicitValues
+    };
+  }
+
+  return normalizedRouteValues;
+}
+
+export {
+  CRUD_BINDING_MODE_ROUTE,
+  CRUD_BINDING_MODE_MERGE,
+  CRUD_BINDING_MODE_EXPLICIT,
+  CRUD_BINDING_MODE_NONE,
+  normalizeCrudBindingMode,
+  normalizeCrudBindingConfig,
+  resolveCrudBindingValues,
+  resolveCrudBoundValues
+};

package/src/client/composables/{crudLookupFieldLabelSupport.js → crud/crudLookupFieldLabelSupport.js}

@@ -1,6 +1,6 @@
 import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
 import { normalizeCrudLookupContainerKey } from "@jskit-ai/kernel/shared/support/crudLookup";
-import { asPlainObject } from "./scopeHelpers.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
 
 const LOOKUP_LABEL_COMPOSITION_CANDIDATES = Object.freeze([
   Object.freeze(["name", "surname"]),

package/src/client/composables/{crudLookupFieldRuntime.js → crud/crudLookupFieldRuntime.js}

@@ -5,12 +5,13 @@ import {
   normalizeCrudLookupContainerKey,
   resolveCrudLookupApiPathFromNamespace
 } from "@jskit-ai/kernel/shared/support/crudLookup";
-import { useList } from "./useList.js";
+import { normalizeSurfaceId } from "@jskit-ai/kernel/shared/surface/registry";
+import { useList } from "../records/useList.js";
 import {
   resolveLookupItemLabel,
   resolveLookupFieldDisplayValue
 } from "./crudLookupFieldLabelSupport.js";
-import { asPlainObject } from "./scopeHelpers.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
 
 function normalizeQueryKeyPrefix(value) {
   const source = Array.isArray(value) ? value : [];
@@ -109,12 +110,14 @@ function createCrudLookupFieldRuntime({
       defaultValue: defaultLookupContainerKey,
       context: `createCrudLookupFieldRuntime formFields["${key}"].relation.containerKey`
     });
+    const relationSurfaceId = normalizeSurfaceId(rawRelation.surfaceId);
     if (!valueKey) {
       continue;
     }
 
     const runtime = useList({
       adapter: adapter || undefined,
+      ...(relationSurfaceId ? { surfaceId: relationSurfaceId } : {}),
       apiSuffix: apiPath,
       queryKeyFactory: (surfaceId = "", workspaceSlug = "") => [
         ...normalizedQueryKeyPrefix,
@@ -147,6 +150,7 @@ function createCrudLookupFieldRuntime({
         kind: "lookup",
         namespace,
         ...(explicitApiPath ? { apiPath: explicitApiPath } : {}),
+        ...(relationSurfaceId ? { surfaceId: relationSurfaceId } : {}),
         containerKey: relationLookupContainerKey,
         valueKey,
         ...(labelKey ? { labelKey } : {})

package/src/client/composables/{crudSchemaFormHelpers.js → crud/crudSchemaFormHelpers.js}

@@ -1,6 +1,6 @@
 import { validateOperationSection } from "@jskit-ai/http-runtime/shared/validators/operationValidation";
-import { asPlainObject } from "./scopeHelpers.js";
-import { toRouteParamValue } from "./routeTemplateHelpers.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
+import { toRouteParamValue } from "../support/routeTemplateHelpers.js";
 
 const EMPTY_FIELD_ERROR_LIST = Object.freeze([]);
 const fieldErrorListCache = new Map();
@@ -44,6 +44,84 @@ function resolveFormFieldType(field = {}) {
   return String(field.type || "").trim().toLowerCase();
 }
 
+function resolveFormFieldFormat(field = {}) {
+  return String(field.format || "").trim().toLowerCase();
+}
+
+function padDateTimePart(value) {
+  return String(value).padStart(2, "0");
+}
+
+function normalizeTimeWhitespace(value) {
+  return String(value ?? "").replaceAll(/\s+/gu, " ").trim();
+}
+
+function toTimeInputValue(value) {
+  const normalized = normalizeTimeWhitespace(value);
+  if (!normalized) {
+    return "";
+  }
+
+  const twentyFourHourMatch = normalized.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/u);
+  if (twentyFourHourMatch) {
+    const hours = Number(twentyFourHourMatch[1]);
+    const minutes = Number(twentyFourHourMatch[2]);
+    if (hours >= 0 && hours <= 23 && minutes >= 0 && minutes <= 59) {
+      return `${padDateTimePart(hours)}:${padDateTimePart(minutes)}`;
+    }
+    return normalized;
+  }
+
+  const meridiemMatch = normalized.match(/^(\d{1,2}):(\d{2})\s*([ap]\.?m\.?)$/iu);
+  if (!meridiemMatch) {
+    return normalized;
+  }
+
+  const rawHours = Number(meridiemMatch[1]);
+  const minutes = Number(meridiemMatch[2]);
+  if (rawHours < 1 || rawHours > 12 || minutes < 0 || minutes > 59) {
+    return normalized;
+  }
+
+  let hours = rawHours % 12;
+  if (String(meridiemMatch[3] || "").toLowerCase().startsWith("p")) {
+    hours += 12;
+  }
+
+  return `${padDateTimePart(hours)}:${padDateTimePart(minutes)}`;
+}
+
+function toDateTimeLocalInputValue(value) {
+  if (value == null || value === "") {
+    return "";
+  }
+
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return String(value);
+  }
+
+  return [
+    date.getFullYear(),
+    padDateTimePart(date.getMonth() + 1),
+    padDateTimePart(date.getDate())
+  ].join("-") + `T${padDateTimePart(date.getHours())}:${padDateTimePart(date.getMinutes())}`;
+}
+
+function toIsoUtcDateTimeValue(value) {
+  const normalized = String(value ?? "").trim();
+  if (!normalized) {
+    return "";
+  }
+
+  const date = new Date(normalized);
+  if (Number.isNaN(date.getTime())) {
+    return normalized;
+  }
+
+  return date.toISOString();
+}
+
 function resolveFormFieldInitialValue(field = {}) {
   if (Object.prototype.hasOwnProperty.call(field, "initialValue")) {
     return field.initialValue;
@@ -60,6 +138,23 @@ function resolveFormFieldInitialValue(field = {}) {
   return "";
 }
 
+function shouldSerializeClearedFieldAsNull(field = {}) {
+  if (field?.nullable !== true) {
+    return false;
+  }
+
+  const fieldType = resolveFormFieldType(field);
+  const fieldFormat = resolveFormFieldFormat(field);
+
+  return (
+    fieldType === "integer" ||
+    fieldType === "number" ||
+    fieldFormat === "date" ||
+    fieldFormat === "date-time" ||
+    fieldFormat === "time"
+  );
+}
+
 function createCrudFormModel(fields = []) {
   const model = {};
   for (const field of normalizeCrudFormFields(fields)) {
@@ -76,6 +171,8 @@ function buildCrudFormPayload(fields = [], model = {}) {
   for (const field of normalizeCrudFormFields(fields)) {
     const fieldKey = field.key;
     const fieldType = resolveFormFieldType(field);
+    const fieldFormat = resolveFormFieldFormat(field);
+    const clearAsNull = shouldSerializeClearedFieldAsNull(field);
     const rawValue = sourceModel[fieldKey];
 
     if (fieldType === "boolean") {
@@ -86,6 +183,9 @@ function buildCrudFormPayload(fields = [], model = {}) {
     if (fieldType === "integer" || fieldType === "number") {
       const normalizedValue = String(rawValue ?? "").trim();
       if (!normalizedValue) {
+        if (clearAsNull) {
+          payload[fieldKey] = null;
+        }
         continue;
       }
 
@@ -97,6 +197,48 @@ function buildCrudFormPayload(fields = [], model = {}) {
     }
 
     if (rawValue == null) {
+      if (clearAsNull) {
+        payload[fieldKey] = null;
+      }
+      continue;
+    }
+
+    if (fieldFormat === "date") {
+      const normalizedValue = String(rawValue).trim();
+      if (!normalizedValue) {
+        if (clearAsNull) {
+          payload[fieldKey] = null;
+        }
+        continue;
+      }
+
+      payload[fieldKey] = normalizedValue;
+      continue;
+    }
+
+    if (fieldFormat === "date-time") {
+      const normalizedValue = toIsoUtcDateTimeValue(rawValue);
+      if (!normalizedValue) {
+        if (clearAsNull) {
+          payload[fieldKey] = null;
+        }
+        continue;
+      }
+
+      payload[fieldKey] = normalizedValue;
+      continue;
+    }
+
+    if (fieldFormat === "time") {
+      const normalizedValue = toTimeInputValue(rawValue);
+      if (!normalizedValue) {
+        if (clearAsNull) {
+          payload[fieldKey] = null;
+        }
+        continue;
+      }
+
+      payload[fieldKey] = normalizedValue;
       continue;
     }
 
@@ -112,6 +254,7 @@ function applyCrudPayloadToForm(fields = [], model = {}, payload = {}) {
   for (const field of normalizeCrudFormFields(fields)) {
     const fieldKey = field.key;
     const fieldType = resolveFormFieldType(field);
+    const fieldFormat = resolveFormFieldFormat(field);
     const rawValue = sourcePayload[fieldKey];
 
     if (fieldType === "boolean") {
@@ -124,6 +267,16 @@ function applyCrudPayloadToForm(fields = [], model = {}, payload = {}) {
       continue;
     }
 
+    if (fieldFormat === "date-time") {
+      targetModel[fieldKey] = toDateTimeLocalInputValue(rawValue);
+      continue;
+    }
+
+    if (fieldFormat === "time") {
+      targetModel[fieldKey] = toTimeInputValue(rawValue);
+      continue;
+    }
+
     targetModel[fieldKey] = rawValue == null ? "" : String(rawValue);
   }
 }