@jskit-ai/crud-ui-generator 0.1.38 → 0.1.39

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/crud-ui-generator",
-  version: "0.1.38",
+  version: "0.1.39",
   kind: "generator",
   description: "Generate CRUD route trees from resource validators at an explicit route root relative to src/pages/.",
   options: {
@@ -168,7 +168,7 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@jskit-ai/users-web": "0.1.70"
+        "@jskit-ai/users-web": "0.1.71"
       },
       dev: {}
     },

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@jskit-ai/crud-ui-generator",
-  "version": "0.1.38",
+  "version": "0.1.39",
   "type": "module",
   "scripts": {
     "test": "node --test"
   },
   "dependencies": {
-    "@jskit-ai/crud-core": "0.1.63",
-    "@jskit-ai/kernel": "0.1.55"
+    "@jskit-ai/crud-core": "0.1.64",
+    "@jskit-ai/kernel": "0.1.56",
+    "@jskit-ai/resource-crud-core": "0.1.1"
   },
   "exports": {
     "./server/buildTemplateContext": "./src/server/buildTemplateContext.js"

package/src/server/buildTemplateContext.js

@@ -1,6 +1,6 @@
 import {
   requireCrudNamespace
-} from "@jskit-ai/crud-core/shared/crudNamespaceSupport";
+} from "@jskit-ai/resource-crud-core/shared/crudNamespaceSupport";
 import {
   normalizePagesRelativeTargetRoot,
   resolvePageLinkTargetDetails,
@@ -16,7 +16,7 @@ import {
   requireObjectProperties,
   resolveListItemProperties,
   resolveLookupContainerKey,
-  buildResourceFieldMetaMap,
+  buildResourceFieldContractMap,
   createFieldDefinitions,
   createFormFieldDefinitions,
   resolveNearestParentRouteParamKey,
@@ -379,8 +379,21 @@ function ensureFields(fields, fallbackFields = createFieldDefinitions({})) {
   return fallbackFields;
 }
 
-function resolveViewTitleFallbackFieldKey(fields = []) {
+function resolveViewTitleFallbackFieldKey(fields = [], { recordIdFieldKey = "" } = {}) {
   const sourceFields = Array.isArray(fields) ? fields : [];
+  const normalizedRecordIdFieldKey = normalizeText(recordIdFieldKey);
+
+  for (const field of sourceFields) {
+    if (normalizeText(field?.type).toLowerCase() !== "string") {
+      continue;
+    }
+
+    const key = normalizeText(field?.key);
+    if (key && key !== normalizedRecordIdFieldKey) {
+      return key;
+    }
+  }
+
   for (const field of sourceFields) {
     if (normalizeText(field?.type).toLowerCase() !== "string") {
       continue;
@@ -468,7 +481,7 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
   const lookupContainerKey = resolveLookupContainerKey(resource, {
     context: "crud-ui-generator"
   });
-  const fieldMetaMap = buildResourceFieldMetaMap(resource);
+  const fieldContractMap = buildResourceFieldContractMap(resource);
 
   const hasListOperation = selectedOperations.has("list");
   const hasViewOperation = selectedOperations.has("view");
@@ -485,7 +498,7 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
       context: "crud-ui-generator operations.list.realtime"
     });
     listFieldsAll = createFieldDefinitions(resolveListItemProperties(listOutputSchema, { context: "crud-ui-generator" }), {
-      fieldMetaMap,
+      fieldContractMap,
       lookupContainerKey
     });
     validateDisplayFieldsForOperation(selectedDisplayFields, listFieldsAll, "list");
@@ -498,7 +511,7 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
     viewFieldsAll = createFieldDefinitions(
       requireObjectProperties(viewOutputSchema, "operations.view output", { context: "crud-ui-generator" }),
       {
-        fieldMetaMap,
+        fieldContractMap,
         lookupContainerKey
       }
     );
@@ -508,11 +521,11 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
   let createFieldsAll = [];
   if (hasNewOperation) {
     const createOperation = requireOperation(resource, "create", { context: "crud-ui-generator" });
-    const createBodySchema = requireBodySchema(createOperation, "create", { context: "crud-ui-generator" });
+    const createInputSchema = requireBodySchema(createOperation, "create", { context: "crud-ui-generator" });
     createFieldsAll = createFormFieldDefinitions(
-      requireObjectProperties(createBodySchema, "operations.create body", { context: "crud-ui-generator" }),
+      requireObjectProperties(createInputSchema, "operations.create body", { context: "crud-ui-generator" }),
       {
-        fieldMetaMap,
+        fieldContractMap,
         lookupContainerKey,
         parentRouteParamKey
       }
@@ -523,11 +536,11 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
   let editFieldsAll = [];
   if (hasEditOperation) {
     const patchOperation = requireOperation(resource, "patch", { context: "crud-ui-generator" });
-    const patchBodySchema = requireBodySchema(patchOperation, "patch", { context: "crud-ui-generator" });
+    const patchInputSchema = requireBodySchema(patchOperation, "patch", { context: "crud-ui-generator" });
     editFieldsAll = createFormFieldDefinitions(
-      requireObjectProperties(patchBodySchema, "operations.patch body", { context: "crud-ui-generator" }),
+      requireObjectProperties(patchInputSchema, "operations.patch body", { context: "crud-ui-generator" }),
       {
-        fieldMetaMap,
+        fieldContractMap,
         lookupContainerKey,
         parentRouteParamKey
       }
@@ -556,9 +569,6 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
   const editFields = hasEditOperation
     ? filterDisplayFields(selectedDisplayFields, editFieldsAll)
     : [];
-  const viewTitleFallbackFieldKey = hasViewOperation
-    ? resolveViewTitleFallbackFieldKey(viewFieldsAll)
-    : "";
   const recordIdFields =
     listFieldsAll.length > 0
       ? listFieldsAll
@@ -567,6 +577,10 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
         : editFieldsAll.length > 0
           ? editFieldsAll
           : createFieldDefinitions({});
+  const recordIdFieldKey = resolveRecordIdFieldKey(recordIdFields);
+  const viewTitleFallbackFieldKey = hasViewOperation
+    ? resolveViewTitleFallbackFieldKey(viewFieldsAll, { recordIdFieldKey })
+    : "";
 
   const pageLinkTarget = hasListOperation
     ? await resolvePageLinkTargetDetails({

package/src/server/resourceSupport.js

@@ -1,9 +1,9 @@
 import path from "node:path";
-import { resolveCrudRecordChangedEvent } from "@jskit-ai/crud-core/shared/crudNamespaceSupport";
+import { resolveCrudRecordChangedEvent } from "@jskit-ai/resource-crud-core/shared/crudNamespaceSupport";
 import {
   checkCrudLookupFormControl,
   isCrudRuntimeOutputOnlyFieldKey
-} from "@jskit-ai/crud-core/shared/crudFieldMetaSupport";
+} from "@jskit-ai/crud-core/shared/crudFieldSupport";
 import { importFreshModuleFromAbsolutePath } from "@jskit-ai/kernel/server/support";
 import {
   normalizeCrudLookupApiPath,
@@ -12,10 +12,13 @@ import {
   resolveCrudLookupApiPathFromNamespace,
   resolveCrudLookupContainerKey
 } from "@jskit-ai/kernel/shared/support/crudLookup";
+import { buildCrudFieldContractMap } from "@jskit-ai/kernel/shared/support/crudFieldContract";
+import { normalizeSchemaDefinition } from "@jskit-ai/kernel/shared/validators";
 import { normalizeSurfaceId } from "@jskit-ai/kernel/shared/surface/registry";
 import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
 
 const JS_IDENTIFIER_PATTERN = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+const JSON_REST_TRANSPORT_EXTENSION_KEY = "x-json-rest-schema";
 
 function requireOption(options, optionName, { context = "ui-generator" } = {}) {
   const value = normalizeText(options?.[optionName]);
@@ -151,36 +154,56 @@ function resolveOperationRealtimeEvents(
   return normalizedEvents.length > 0 ? normalizedEvents : fallbackEvents;
 }
 
-function requireOutputSchema(operation, operationName, { context = "ui-generator" } = {}) {
-  const outputValidator = operation?.outputValidator;
-  if (!outputValidator || typeof outputValidator !== "object" || Array.isArray(outputValidator)) {
-    throw new Error(`${context} resource operations.${operationName} is missing outputValidator.`);
+function resolveOperationTransportSchema(definition, {
+  context = "ui-generator",
+  defaultMode = "replace",
+  label = "schema definition"
+} = {}) {
+  const normalized = normalizeSchemaDefinition(definition, {
+    context: `${context} ${label}`,
+    defaultMode
+  });
+  if (!normalized?.schema) {
+    throw new Error(`${context} ${label} is missing schema.`);
   }
 
-  const schema = outputValidator.schema;
-  if (!schema || typeof schema !== "object" || Array.isArray(schema)) {
-    throw new Error(`${context} resource operations.${operationName}.outputValidator is missing schema.`);
+  return normalized.schema.toJsonSchema({
+    mode: normalized.mode
+  });
+}
+
+function requireOutputSchema(operation, operationName, { context = "ui-generator" } = {}) {
+  const output = operation?.output;
+  if (!output || typeof output !== "object" || Array.isArray(output)) {
+    throw new Error(`${context} resource operations.${operationName} is missing output.`);
   }
 
-  return schema;
+  return resolveOperationTransportSchema(output, {
+    context,
+    defaultMode: "replace",
+    label: `resource operations.${operationName}.output`
+  });
 }
 
 function requireBodySchema(operation, operationName, { context = "ui-generator" } = {}) {
-  const bodyValidator = operation?.bodyValidator;
-  if (!bodyValidator || typeof bodyValidator !== "object" || Array.isArray(bodyValidator)) {
-    throw new Error(`${context} resource operations.${operationName} is missing bodyValidator.`);
-  }
-
-  const schema = bodyValidator.schema;
-  if (!schema || typeof schema !== "object" || Array.isArray(schema)) {
-    throw new Error(`${context} resource operations.${operationName}.bodyValidator is missing schema.`);
+  const body = operation?.body;
+  if (!body || typeof body !== "object" || Array.isArray(body)) {
+    throw new Error(`${context} resource operations.${operationName} is missing body.`);
   }
 
-  return schema;
+  return resolveOperationTransportSchema(body, {
+    context,
+    defaultMode: operationName === "create" ? "create" : "patch",
+    label: `resource operations.${operationName}.body`
+  });
 }
 
-function requireObjectProperties(schema, contextLabel, { context = "ui-generator" } = {}) {
-  const properties = schema?.properties;
+function requireObjectProperties(schema, contextLabel, { context = "ui-generator", rootSchema = schema } = {}) {
+  const resolvedSchema = resolveObjectSchema(schema, contextLabel, {
+    context,
+    rootSchema
+  });
+  const properties = resolvedSchema?.properties;
   if (!properties || typeof properties !== "object" || Array.isArray(properties)) {
     throw new Error(`${context} expected ${contextLabel} to be an object schema with properties.`);
   }
@@ -189,7 +212,10 @@ function requireObjectProperties(schema, contextLabel, { context = "ui-generator
 }
 
 function resolveListItemProperties(listOutputSchema, { context = "ui-generator" } = {}) {
-  const listProperties = requireObjectProperties(listOutputSchema, "operations.list output", { context });
+  const listProperties = requireObjectProperties(listOutputSchema, "operations.list output", {
+    context,
+    rootSchema: listOutputSchema
+  });
   const itemsSchema = listProperties.items;
   if (!itemsSchema || typeof itemsSchema !== "object" || Array.isArray(itemsSchema)) {
     throw new Error(`${context} expected operations.list output schema to include object items schema.`);
@@ -200,7 +226,10 @@ function resolveListItemProperties(listOutputSchema, { context = "ui-generator"
     throw new Error(`${context} expected operations.list output schema items.items to be an object schema.`);
   }
 
-  return requireObjectProperties(itemSchema, "operations.list output items", { context });
+  return requireObjectProperties(itemSchema, "operations.list output items", {
+    context,
+    rootSchema: listOutputSchema
+  });
 }
 
 function resolveUnionSchemaVariant(schema = {}) {
@@ -235,6 +264,68 @@ function resolveUnionSchemaVariant(schema = {}) {
   return source;
 }
 
+function decodeJsonPointerSegment(segment = "") {
+  return String(segment || "")
+    .replace(/~1/g, "/")
+    .replace(/~0/g, "~");
+}
+
+function resolveSchemaReference(ref = "", rootSchema = {}, { context = "ui-generator", contextLabel = "schema" } = {}) {
+  const normalizedRef = normalizeText(ref);
+  if (!normalizedRef.startsWith("#/")) {
+    throw new Error(`${context} expected ${contextLabel} to use an internal schema reference.`);
+  }
+
+  const segments = normalizedRef
+    .slice(2)
+    .split("/")
+    .map((segment) => decodeJsonPointerSegment(segment))
+    .filter(Boolean);
+
+  let current = rootSchema;
+  for (const segment of segments) {
+    if (!current || typeof current !== "object" || Array.isArray(current) || !Object.hasOwn(current, segment)) {
+      throw new Error(`${context} could not resolve ${contextLabel} reference "${normalizedRef}".`);
+    }
+    current = current[segment];
+  }
+
+  return current;
+}
+
+function resolveObjectSchema(
+  schema = {},
+  contextLabel,
+  { context = "ui-generator", rootSchema = schema } = {}
+) {
+  const source = resolveUnionSchemaVariant(schema);
+  if (source?.properties && typeof source.properties === "object" && !Array.isArray(source.properties)) {
+    return source;
+  }
+
+  const refCandidate = normalizeText(source?.$ref) || normalizeText(source?.allOf?.[0]?.$ref);
+  if (refCandidate) {
+    return resolveObjectSchema(
+      resolveSchemaReference(refCandidate, rootSchema, {
+        context,
+        contextLabel
+      }),
+      contextLabel,
+      {
+        context,
+        rootSchema
+      }
+    );
+  }
+
+  return source;
+}
+
+function resolveJsonRestCastType(schema = {}) {
+  const source = schema && typeof schema === "object" && !Array.isArray(schema) ? schema : {};
+  return normalizeText(source?.[JSON_REST_TRANSPORT_EXTENSION_KEY]?.castType).toLowerCase();
+}
+
 function resolveSchemaType(schema) {
   const source = resolveUnionSchemaVariant(schema);
   const rawType = source?.type;
@@ -252,10 +343,21 @@ function resolveSchemaType(schema) {
   const hasNullableType = Array.isArray(rawType)
     ? rawType.some((entry) => normalizeText(entry).toLowerCase() === "null")
     : false;
+  const castType = resolveJsonRestCastType(source) || resolveJsonRestCastType(schema);
+  let format = normalizeText(source?.format).toLowerCase();
+  if (!format) {
+    if (castType === "date") {
+      format = "date";
+    } else if (castType === "datetime") {
+      format = "date-time";
+    } else if (castType === "time") {
+      format = "time";
+    }
+  }
 
   return {
     type: schemaType,
-    format: normalizeText(source.format).toLowerCase(),
+    format,
     schema: source,
     nullable: hasNullableAnyOf || hasNullableOneOf || hasNullableType
   };
@@ -301,7 +403,7 @@ function toSelectOptionIdentity(value) {
   return `${typeof value}:${String(value)}`;
 }
 
-function normalizeFieldUiOptions(rawOptions, { context = "resource fieldMeta ui.options" } = {}) {
+function normalizeFieldUiOptions(rawOptions, { context = "resource field ui.options" } = {}) {
   if (rawOptions === undefined || rawOptions === null) {
     return [];
   }
@@ -464,37 +566,26 @@ function normalizeLookupRelation(relation = {}) {
   return normalized;
 }
 
-function buildResourceFieldMetaMap(resource = {}) {
+function buildResourceFieldContractMap(resource = {}) {
   const map = {};
-  const entries = Array.isArray(resource?.fieldMeta) ? resource.fieldMeta : [];
+  const entries = Object.values(buildCrudFieldContractMap(resource, {
+    context: "crud ui resource field contract"
+  }));
   for (const rawEntry of entries) {
-    if (!rawEntry || typeof rawEntry !== "object" || Array.isArray(rawEntry)) {
-      continue;
-    }
-
-    const key = normalizeText(rawEntry.key);
+    const key = normalizeText(rawEntry?.key);
     if (!key) {
       continue;
     }
 
-    const nextEntry = {
-      key
-    };
-    const repositoryColumn = normalizeText(rawEntry?.repository?.column);
-    if (repositoryColumn) {
-      nextEntry.repository = {
-        column: repositoryColumn
-      };
-    }
-
+    const nextEntry = { key };
     const relation = normalizeLookupRelation(rawEntry.relation);
     const fieldUiOptions = normalizeFieldUiOptions(rawEntry?.ui?.options, {
-      context: `resource.fieldMeta["${key}"].ui.options`
+      context: `resource schema field "${key}" ui.options`
     });
     if (relation) {
       nextEntry.relation = relation;
       const formControl = checkCrudLookupFormControl(rawEntry?.ui?.formControl, {
-        context: `resource.fieldMeta["${key}"].ui.formControl`,
+        context: `resource schema field "${key}" ui.formControl`,
         defaultValue: "autocomplete"
       });
       if (formControl) {
@@ -522,13 +613,13 @@ function resolveLookupContainerKey(resource = {}, { context = "ui-generator" } =
   });
 }
 
-function toLookupRelation(fieldMetaMap = {}, fieldKey = "", { lookupContainerKey = "lookups" } = {}) {
+function toLookupRelation(fieldContractMap = {}, fieldKey = "", { lookupContainerKey = "lookups" } = {}) {
   const key = normalizeText(fieldKey);
   if (!key) {
     return null;
   }
 
-  const relation = normalizeLookupRelation(fieldMetaMap?.[key]?.relation);
+  const relation = normalizeLookupRelation(fieldContractMap?.[key]?.relation);
   if (!relation) {
     return null;
   }
@@ -585,7 +676,7 @@ function toPositiveInteger(value) {
   return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
 }
 
-function createFieldDefinitions(properties = {}, { fieldMetaMap = {}, lookupContainerKey = "lookups" } = {}) {
+function createFieldDefinitions(properties = {}, { fieldContractMap = {}, lookupContainerKey = "lookups" } = {}) {
   const fields = [];
 
   for (const [rawKey, schema] of Object.entries(properties)) {
@@ -595,7 +686,7 @@ function createFieldDefinitions(properties = {}, { fieldMetaMap = {}, lookupCont
     }
 
     const schemaType = resolveSchemaType(schema);
-    const relation = toLookupRelation(fieldMetaMap, key, { lookupContainerKey });
+    const relation = toLookupRelation(fieldContractMap, key, { lookupContainerKey });
     fields.push({
       key,
       label: resolveFieldLabel(key, relation),
@@ -623,7 +714,7 @@ function createFieldDefinitions(properties = {}, { fieldMetaMap = {}, lookupCont
 function createFormFieldDefinitions(
   properties = {},
   {
-    fieldMetaMap = {},
+    fieldContractMap = {},
     lookupContainerKey = "lookups",
     parentRouteParamKey = ""
   } = {}
@@ -638,14 +729,14 @@ function createFormFieldDefinitions(
     }
 
     const schemaType = resolveSchemaType(schema);
-    const relation = toLookupRelation(fieldMetaMap, key, { lookupContainerKey });
-    const fieldUiOptions = Array.isArray(fieldMetaMap?.[key]?.ui?.options)
-      ? fieldMetaMap[key].ui.options
+    const relation = toLookupRelation(fieldContractMap, key, { lookupContainerKey });
+    const fieldUiOptions = Array.isArray(fieldContractMap?.[key]?.ui?.options)
+      ? fieldContractMap[key].ui.options
       : [];
     const schemaEnumValues = Array.isArray(schemaType.schema?.enum) ? schemaType.schema.enum : [];
     if (!relation && schemaEnumValues.length > 0 && fieldUiOptions.length < 1) {
       throw new Error(
-        `resource form field "${key}" defines schema enum values but is missing resource.fieldMeta["${key}"].ui.options.`
+        `resource form field "${key}" defines schema enum values but is missing schema ui.options metadata.`
       );
     }
     const selectOptions = relation
@@ -660,8 +751,8 @@ function createFormFieldDefinitions(
               )
         );
     const lookupFormControl = relation
-      ? checkCrudLookupFormControl(fieldMetaMap?.[key]?.ui?.formControl, {
-          context: `resource.fieldMeta["${key}"].ui.formControl`,
+      ? checkCrudLookupFormControl(fieldContractMap?.[key]?.ui?.formControl, {
+          context: `resource schema field "${key}" ui.formControl`,
           defaultValue: "autocomplete"
         })
       : "";
@@ -972,7 +1063,7 @@ export {
   requireObjectProperties,
   resolveListItemProperties,
   resolveLookupContainerKey,
-  buildResourceFieldMetaMap,
+  buildResourceFieldContractMap,
   createFieldDefinitions,
   createFormFieldDefinitions,
   resolveNearestParentRouteParamKey,

package/src/server/subcommands/addField.js

@@ -9,7 +9,7 @@ import {
   requireObjectProperties,
   resolveListItemProperties,
   resolveLookupContainerKey,
-  buildResourceFieldMetaMap,
+  buildResourceFieldContractMap,
   createFieldDefinitions,
   createFormFieldDefinitions,
   buildListHeaderColumns,
@@ -124,7 +124,7 @@ function resolveResourceOptions(options = {}, inferredOptions = {}) {
 }
 
 function resolveOperationFields(resource, operationName) {
-  const fieldMetaMap = buildResourceFieldMetaMap(resource);
+  const fieldContractMap = buildResourceFieldContractMap(resource);
   const lookupContainerKey = resolveLookupContainerKey(resource, {
     context: "crud-ui-generator field"
   });
@@ -134,7 +134,7 @@ function resolveOperationFields(resource, operationName) {
     const listOutputSchema = requireOutputSchema(listOperation, "list", { context: "crud-ui-generator field" });
     return createFieldDefinitions(
       resolveListItemProperties(listOutputSchema, { context: "crud-ui-generator field" }),
-      { fieldMetaMap, lookupContainerKey }
+      { fieldContractMap, lookupContainerKey }
     );
   }
 
@@ -143,24 +143,24 @@ function resolveOperationFields(resource, operationName) {
     const viewOutputSchema = requireOutputSchema(viewOperation, "view", { context: "crud-ui-generator field" });
     return createFieldDefinitions(
       requireObjectProperties(viewOutputSchema, "operations.view output", { context: "crud-ui-generator field" }),
-      { fieldMetaMap, lookupContainerKey }
+      { fieldContractMap, lookupContainerKey }
     );
   }
 
   if (operationName === "new") {
     const createOperation = requireOperation(resource, "create", { context: "crud-ui-generator field" });
-    const createBodySchema = requireBodySchema(createOperation, "create", { context: "crud-ui-generator field" });
+    const createInputSchema = requireBodySchema(createOperation, "create", { context: "crud-ui-generator field" });
     return createFormFieldDefinitions(
-      requireObjectProperties(createBodySchema, "operations.create body", { context: "crud-ui-generator field" }),
-      { fieldMetaMap, lookupContainerKey }
+      requireObjectProperties(createInputSchema, "operations.create body", { context: "crud-ui-generator field" }),
+      { fieldContractMap, lookupContainerKey }
     );
   }
 
   const patchOperation = requireOperation(resource, "patch", { context: "crud-ui-generator field" });
-  const patchBodySchema = requireBodySchema(patchOperation, "patch", { context: "crud-ui-generator field" });
+  const patchInputSchema = requireBodySchema(patchOperation, "patch", { context: "crud-ui-generator field" });
   return createFormFieldDefinitions(
-    requireObjectProperties(patchBodySchema, "operations.patch body", { context: "crud-ui-generator field" }),
-    { fieldMetaMap, lookupContainerKey }
+    requireObjectProperties(patchInputSchema, "operations.patch body", { context: "crud-ui-generator field" }),
+    { fieldContractMap, lookupContainerKey }
   );
 }
 

package/templates/src/pages/admin/ui-generator/AddEditForm.vue

@@ -9,9 +9,10 @@
           </div>
           <v-spacer />
           <div class="d-flex ga-2 flex-wrap">
-            <v-btn v-if="cancelTo" variant="tonal" :to="resolveCancelTo(cancelTo)">Cancel</v-btn>
+            <v-btn v-if="cancelTo" color="primary" variant="outlined" :to="resolveCancelTo(cancelTo)">Cancel</v-btn>
             <v-btn
               color="primary"
+              variant="flat"
               :loading="addEdit.isSaving"
               :disabled="addEdit.isSubmitDisabled"
               @click="addEdit.submit"

package/templates/src/pages/admin/ui-generator/EditElement.vue

@@ -10,13 +10,15 @@
           <v-spacer />
           <v-btn
             v-if="UI_CANCEL_URL"
-            variant="text"
+            color="primary"
+            variant="outlined"
             :to="{ path: formRuntime.addEdit.resolveParams(UI_CANCEL_URL), query: $route.query }"
           >
             Cancel
           </v-btn>
           <v-btn
             color="primary"
+            variant="flat"
             :loading="formRuntime.addEdit.isSaving"
             :disabled="formRuntime.addEdit.isSubmitDisabled"
             @click="formRuntime.addEdit.submit"
@@ -61,6 +63,12 @@ const UI_VIEW_URL = __JSKIT_UI_EDIT_PAGE_VIEW_URL__;
 const UI_CANCEL_URL = UI_VIEW_URL || UI_LIST_URL;
 const UI_RECORD_CHANGED_EVENT = __JSKIT_UI_RECORD_CHANGED_EVENT__;
 const UI_EDIT_FORM_FIELDS = [];
+const UI_EDIT_TRANSPORT = Object.freeze({
+  kind: "jsonapi-resource",
+  requestType: "__JSKIT_UI_RESOURCE_NAMESPACE__",
+  responseType: "__JSKIT_UI_RESOURCE_NAMESPACE__",
+  responseKind: "record"
+});
 
 // @jskit-contract crud.ui.form-fields.__JSKIT_UI_RESOURCE_NAMESPACE__.edit.v1
 void UI_EDIT_FORM_FIELDS;
@@ -97,6 +105,7 @@ const formRuntime = useCrudAddEdit({
       routeRecordId.value
     ],
     placementSource: "ui-generator.__JSKIT_UI_RESOURCE_NAMESPACE__.edit",
+    transport: UI_EDIT_TRANSPORT,
     writeMethod: "PATCH",
     fallbackLoadError: "Unable to load record.",
     fallbackSaveError: "Unable to save record.",

package/templates/src/pages/admin/ui-generator/EditWrapperElement.vue

@@ -26,6 +26,12 @@ const UI_LIST_URL = __JSKIT_UI_EDIT_PAGE_LIST_URL__;
 const UI_VIEW_URL = __JSKIT_UI_EDIT_PAGE_VIEW_URL__;
 const UI_CANCEL_URL = UI_VIEW_URL || UI_LIST_URL;
 const UI_RECORD_CHANGED_EVENT = __JSKIT_UI_RECORD_CHANGED_EVENT__;
+const UI_EDIT_TRANSPORT = Object.freeze({
+  kind: "jsonapi-resource",
+  requestType: "__JSKIT_UI_RESOURCE_NAMESPACE__",
+  responseType: "__JSKIT_UI_RESOURCE_NAMESPACE__",
+  responseKind: "record"
+});
 const route = useRoute();
 
 // jskit:crud-ui-fields-target ../_components/__JSKIT_UI_FORM_COMPONENT_FILE__
@@ -58,6 +64,7 @@ const formRuntime = useCrudAddEdit({
       routeRecordId.value
     ],
     placementSource: "ui-generator.__JSKIT_UI_RESOURCE_NAMESPACE__.edit",
+    transport: UI_EDIT_TRANSPORT,
     writeMethod: "PATCH",
     fallbackLoadError: "Unable to load record.",
     fallbackSaveError: "Unable to save record.",