@jskit-ai/crud-ui-generator 0.1.6 → 0.1.8

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/crud-ui-generator",
-  version: "0.1.6",
+  version: "0.1.8",
   kind: "generator",
   description: "Generate app-local CRUD UI scaffolds from resource validators.",
   options: {
@@ -136,7 +136,7 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@jskit-ai/users-web": "0.1.37"
+        "@jskit-ai/users-web": "0.1.40"
       },
       dev: {}
     },
@@ -179,7 +179,7 @@ export default Object.freeze({
         }
       },
       {
-        from: "templates/src/pages/admin/ui-generator/NewElement.vue",
+        from: "templates/src/pages/admin/ui-generator/NewWrapperElement.vue",
         toSurface: "${option:surface|lower}",
         toSurfacePath: "${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}/new.vue",
         reason: "Install generated new page.",
@@ -190,12 +190,20 @@ export default Object.freeze({
           export: "buildUiTemplateContext"
         },
         when: {
-          option: "operations",
-          in: ["new"]
+          all: [
+            {
+              option: "operations",
+              in: ["new"]
+            },
+            {
+              option: "operations",
+              in: ["edit"]
+            }
+          ]
         }
       },
       {
-        from: "templates/src/pages/admin/ui-generator/EditElement.vue",
+        from: "templates/src/pages/admin/ui-generator/EditWrapperElement.vue",
         toSurface: "${option:surface|lower}",
         toSurfacePath:
           "${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}/[${option:id-param|trim}]/edit.vue",
@@ -207,8 +215,115 @@ export default Object.freeze({
           export: "buildUiTemplateContext"
         },
         when: {
-          option: "operations",
-          in: ["edit"]
+          all: [
+            {
+              option: "operations",
+              in: ["new"]
+            },
+            {
+              option: "operations",
+              in: ["edit"]
+            }
+          ]
+        }
+      },
+      {
+        from: "templates/src/pages/admin/ui-generator/AddEditForm.vue",
+        toSurface: "${option:surface|lower}",
+        toSurfacePath:
+          "${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}/_components/${option:namespace|singular|pascal|default(Record)}AddEditForm.vue",
+        reason: "Install generated shared add/edit form component.",
+        category: "ui-generator",
+        id: "ui-generator-page-add-edit-form-${option:namespace|snake}",
+        templateContext: {
+          entrypoint: "src/server/buildTemplateContext.js",
+          export: "buildUiTemplateContext"
+        },
+        when: {
+          all: [
+            {
+              option: "operations",
+              in: ["new"]
+            },
+            {
+              option: "operations",
+              in: ["edit"]
+            }
+          ]
+        }
+      },
+      {
+        from: "templates/src/pages/admin/ui-generator/AddEditFormFields.js",
+        toSurface: "${option:surface|lower}",
+        toSurfacePath:
+          "${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}/_components/${option:namespace|singular|pascal|default(Record)}AddEditFormFields.js",
+        reason: "Install generated shared add/edit form field definitions.",
+        category: "ui-generator",
+        id: "ui-generator-page-add-edit-form-fields-${option:namespace|snake}",
+        templateContext: {
+          entrypoint: "src/server/buildTemplateContext.js",
+          export: "buildUiTemplateContext"
+        },
+        when: {
+          all: [
+            {
+              option: "operations",
+              in: ["new"]
+            },
+            {
+              option: "operations",
+              in: ["edit"]
+            }
+          ]
+        }
+      },
+      {
+        from: "templates/src/pages/admin/ui-generator/NewElement.vue",
+        toSurface: "${option:surface|lower}",
+        toSurfacePath: "${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}/new.vue",
+        reason: "Install generated new page.",
+        category: "ui-generator",
+        id: "ui-generator-page-new-standalone-${option:namespace|snake}",
+        templateContext: {
+          entrypoint: "src/server/buildTemplateContext.js",
+          export: "buildUiTemplateContext"
+        },
+        when: {
+          all: [
+            {
+              option: "operations",
+              in: ["new"]
+            },
+            {
+              option: "operations",
+              notIn: ["edit"]
+            }
+          ]
+        }
+      },
+      {
+        from: "templates/src/pages/admin/ui-generator/EditElement.vue",
+        toSurface: "${option:surface|lower}",
+        toSurfacePath:
+          "${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}/[${option:id-param|trim}]/edit.vue",
+        reason: "Install generated edit page.",
+        category: "ui-generator",
+        id: "ui-generator-page-edit-standalone-${option:namespace|snake}",
+        templateContext: {
+          entrypoint: "src/server/buildTemplateContext.js",
+          export: "buildUiTemplateContext"
+        },
+        when: {
+          all: [
+            {
+              option: "operations",
+              in: ["edit"]
+            },
+            {
+              option: "operations",
+              notIn: ["new"]
+            }
+          ]
         }
       }
     ],

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@jskit-ai/crud-ui-generator",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "scripts": {
     "test": "node --test"
   },
   "dependencies": {
-    "@jskit-ai/crud-core": "0.1.31",
-    "@jskit-ai/kernel": "0.1.23"
+    "@jskit-ai/crud-core": "0.1.33",
+    "@jskit-ai/kernel": "0.1.25"
   },
   "exports": {
     "./server/buildTemplateContext": "./src/server/buildTemplateContext.js"

package/src/server/resourceSupport.js

@@ -12,6 +12,7 @@ import {
   resolveCrudLookupApiPathFromNamespace,
   resolveCrudLookupContainerKey
 } from "@jskit-ai/kernel/shared/support/crudLookup";
+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_$]*$/;
@@ -456,6 +457,10 @@ function normalizeLookupRelation(relation = {}) {
       normalized.containerKey = containerKey;
     }
   }
+  const surfaceId = normalizeSurfaceId(relation.surfaceId);
+  if (surfaceId) {
+    normalized.surfaceId = surfaceId;
+  }
   return normalized;
 }
 
@@ -845,6 +850,7 @@ function buildFormColumns(fields = []) {
                 label="${label}"
                 variant="outlined"
                 density="comfortable"
+                autocomplete="off"
                 :items='resolveLookupItems(${JSON.stringify(key)}, { selectedValue: ${formAccessor}, selectedRecord: formRuntime.addEdit.resource.data })'
                 ${lookupSearchBindings}
                 item-title="label"

package/src/server/subcommands/addField.js

@@ -69,6 +69,25 @@ function resolveTargetFilePath(appRoot, targetFile) {
   };
 }
 
+function resolvePathWithinAppRoot(appRoot, absolutePath) {
+  const appRootAbsolute = path.resolve(String(appRoot || ""));
+  const resolvedAbsolutePath = path.resolve(String(absolutePath || ""));
+  const relativePath = path.relative(appRootAbsolute, resolvedAbsolutePath);
+  if (
+    !relativePath ||
+    relativePath === ".." ||
+    relativePath.startsWith(`..${path.sep}`) ||
+    path.isAbsolute(relativePath)
+  ) {
+    throw new Error("crud-ui-generator field target file must stay within app root.");
+  }
+
+  return {
+    absolutePath: resolvedAbsolutePath,
+    relativePath
+  };
+}
+
 function inferResourceOptionsFromSource(screenSource = "") {
   const source = String(screenSource || "");
   const importPattern = /import\s*\{\s*resource(?:\s+as\s+([A-Za-z_$][A-Za-z0-9_$]*))?\s*\}\s*from\s*["']\/([^"']+)["'];?/g;
@@ -171,22 +190,26 @@ function insertBeforeAnchor(source, { anchor = "", snippet = "" } = {}) {
     };
   }
 
-  if (String(source || "").includes(normalizedSnippet)) {
-    return {
-      content: source,
-      changed: false
-    };
-  }
-
   const sourceText = String(source || "");
   const escapedAnchor = normalizedAnchor.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   const anchorLinePattern = new RegExp(`^([ \\t]*)${escapedAnchor}[ \\t]*$`, "m");
-  const anchorLineMatch = sourceText.match(anchorLinePattern);
+  const anchorLineMatch = anchorLinePattern.exec(sourceText);
   if (!anchorLineMatch) {
     throw new Error(`crud-ui-generator field could not find anchor: ${normalizedAnchor}`);
   }
+  const anchorLineIndex = Number(anchorLineMatch.index ?? -1);
   const anchorIndent = String(anchorLineMatch[1] || "");
   const alignedAnchorLine = `${anchorIndent}${normalizedAnchor}`;
+  const scopedSource = sourceText.slice(resolveAnchorScopeStart(sourceText, {
+    anchorIndex: anchorLineIndex,
+    anchor: normalizedAnchor
+  }), anchorLineIndex);
+  if (scopedSource.includes(normalizedSnippet)) {
+    return {
+      content: source,
+      changed: false
+    };
+  }
 
   return {
     content: sourceText.replace(anchorLinePattern, `${normalizedSnippet}\n${alignedAnchorLine}`),
@@ -194,14 +217,47 @@ function insertBeforeAnchor(source, { anchor = "", snippet = "" } = {}) {
   };
 }
 
+function resolveAnchorScopeStart(source = "", { anchorIndex = -1, anchor = "" } = {}) {
+  const sourceText = String(source || "");
+  const resolvedAnchorIndex = Number.isInteger(anchorIndex) ? anchorIndex : -1;
+  if (resolvedAnchorIndex <= 0) {
+    return 0;
+  }
+
+  const normalizedAnchor = String(anchor || "");
+  let familyToken = "";
+  if (normalizedAnchor.includes("jskit:crud-ui-fields:")) {
+    familyToken = "jskit:crud-ui-fields:";
+  } else if (normalizedAnchor.includes("jskit:crud-ui-form-fields:")) {
+    familyToken = "jskit:crud-ui-form-fields:";
+  }
+  if (!familyToken) {
+    return 0;
+  }
+
+  const previousFamilyMarkerIndex = sourceText.lastIndexOf(familyToken, resolvedAnchorIndex - 1);
+  if (previousFamilyMarkerIndex < 0) {
+    return 0;
+  }
+
+  const previousLineEndIndex = sourceText.indexOf("\n", previousFamilyMarkerIndex);
+  if (previousLineEndIndex < 0) {
+    return 0;
+  }
+
+  return previousLineEndIndex + 1;
+}
+
 function buildAnchorInsertions(operationName, field) {
   if (operationName === "list") {
     return [
       {
+        targetKind: "screen",
         anchor: "<!-- jskit:crud-ui-fields:list-header -->",
         snippet: buildListHeaderColumns([field])
       },
       {
+        targetKind: "screen",
         anchor: "<!-- jskit:crud-ui-fields:list-row -->",
         snippet: buildListRowColumns([field])
       }
@@ -211,6 +267,7 @@ function buildAnchorInsertions(operationName, field) {
   if (operationName === "view") {
     return [
       {
+        targetKind: "screen",
         anchor: "<!-- jskit:crud-ui-fields:view -->",
         snippet: buildViewColumns([field])
       }
@@ -220,10 +277,12 @@ function buildAnchorInsertions(operationName, field) {
   if (operationName === "new") {
     return [
       {
+        targetKind: "screen",
         anchor: "<!-- jskit:crud-ui-fields:new -->",
         snippet: buildFormColumns([field])
       },
       {
+        targetKind: "form-fields",
         anchor: "// jskit:crud-ui-form-fields:new",
         snippet: renderObjectPushLines("UI_CREATE_FORM_FIELDS", [field])
       }
@@ -232,16 +291,67 @@ function buildAnchorInsertions(operationName, field) {
 
   return [
     {
+      targetKind: "screen",
       anchor: "<!-- jskit:crud-ui-fields:edit -->",
       snippet: buildFormColumns([field])
     },
     {
+      targetKind: "form-fields",
       anchor: "// jskit:crud-ui-form-fields:edit",
       snippet: renderObjectPushLines("UI_EDIT_FORM_FIELDS", [field])
     }
   ];
 }
 
+function resolveGeneratedTargetComment(source = "", commentName = "") {
+  const escapedCommentName = String(commentName || "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const pattern = new RegExp(`^\\s*//\\s*jskit:${escapedCommentName}\\s+(.+?)\\s*$`, "m");
+  const match = String(source || "").match(pattern);
+  return normalizeText(match?.[1]);
+}
+
+function resolveOperationTargetFiles({
+  appRoot,
+  operationName,
+  targetAbsolutePath,
+  source = ""
+} = {}) {
+  if (operationName !== "new" && operationName !== "edit") {
+    const targetFile = resolvePathWithinAppRoot(appRoot, targetAbsolutePath);
+    return {
+      screen: targetFile,
+      "form-fields": targetFile
+    };
+  }
+
+  const directScreenAnchor =
+    operationName === "new" ? "<!-- jskit:crud-ui-fields:new -->" : "<!-- jskit:crud-ui-fields:edit -->";
+  const directFormFieldsAnchor =
+    operationName === "new" ? "// jskit:crud-ui-form-fields:new" : "// jskit:crud-ui-form-fields:edit";
+
+  const sourceText = String(source || "");
+  if (sourceText.includes(directScreenAnchor) && sourceText.includes(directFormFieldsAnchor)) {
+    const targetFile = resolvePathWithinAppRoot(appRoot, targetAbsolutePath);
+    return {
+      screen: targetFile,
+      "form-fields": targetFile
+    };
+  }
+
+  const screenTarget = resolveGeneratedTargetComment(sourceText, "crud-ui-fields-target");
+  const formFieldsTarget = resolveGeneratedTargetComment(sourceText, "crud-ui-form-fields-target");
+  if (!screenTarget || !formFieldsTarget) {
+    throw new Error(
+      `crud-ui-generator field could not find direct ${operationName} anchors or generated shared-form target comments in ${toPosixPath(path.relative(appRoot, targetAbsolutePath))}.`
+    );
+  }
+
+  return {
+    screen: resolvePathWithinAppRoot(appRoot, path.resolve(path.dirname(targetAbsolutePath), screenTarget)),
+    "form-fields": resolvePathWithinAppRoot(appRoot, path.resolve(path.dirname(targetAbsolutePath), formFieldsTarget))
+  };
+}
+
 function parseSubcommandArgs(args = []) {
   const source = Array.isArray(args) ? args : [];
   const fieldKey = normalizeText(source[0]);
@@ -289,23 +399,57 @@ async function runGeneratorSubcommand({
   const fields = resolveOperationFields(resource, operationName);
   const field = resolveFieldDefinition(fields, fieldKey);
   const insertions = buildAnchorInsertions(operationName, field);
+  const operationTargets = resolveOperationTargetFiles({
+    appRoot,
+    operationName,
+    targetAbsolutePath,
+    source: originalSource
+  });
+
+  const fileStates = new Map();
+  fileStates.set(targetAbsolutePath, {
+    source: originalSource,
+    changed: false,
+    path: resolvePathWithinAppRoot(appRoot, targetAbsolutePath)
+  });
 
-  let nextSource = originalSource;
   let changed = false;
   for (const insertion of insertions) {
-    const applied = insertBeforeAnchor(nextSource, insertion);
-    nextSource = applied.content;
+    const targetFile = operationTargets[insertion.targetKind] || operationTargets.screen;
+    let state = fileStates.get(targetFile.absolutePath);
+    if (!state) {
+      state = {
+        source: await readFile(targetFile.absolutePath, "utf8"),
+        changed: false,
+        path: targetFile
+      };
+      fileStates.set(targetFile.absolutePath, state);
+    }
+
+    const applied = insertBeforeAnchor(state.source, insertion);
+    state.source = applied.content;
+    state.changed = state.changed || applied.changed;
     changed = changed || applied.changed;
   }
 
   if (changed && dryRun !== true) {
-    await writeFile(targetAbsolutePath, nextSource, "utf8");
+    for (const state of fileStates.values()) {
+      if (!state.changed) {
+        continue;
+      }
+      await writeFile(state.path.absolutePath, state.source, "utf8");
+    }
   }
 
+  const touchedFiles = Array.from(fileStates.values())
+    .filter((state) => state.changed)
+    .map((state) => toPosixPath(state.path.relativePath))
+    .sort();
+
   return {
-    touchedFiles: changed ? [toPosixPath(targetRelativePath)] : [],
+    touchedFiles,
     summary: changed
-      ? `Added field "${field.key}" to ${operationName} in ${toPosixPath(targetRelativePath)}.`
+      ? `Added field "${field.key}" to ${operationName} in ${touchedFiles.join(", ")}.`
       : `Field "${field.key}" already exists in ${operationName} for ${toPosixPath(targetRelativePath)}.`
   };
 }

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

@@ -0,0 +1,105 @@
+<template>
+  <section class="ui-generator-add-edit-form d-flex flex-column ga-4">
+    <v-card rounded="xl" elevation="1" border>
+      <v-card-item class="pb-2">
+        <div class="d-flex align-start ga-3 flex-wrap w-100">
+          <div>
+            <v-card-title class="px-0">{{ title }}</v-card-title>
+            <v-card-subtitle class="px-0">{{ subtitle }}</v-card-subtitle>
+          </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
+              color="primary"
+              :loading="formRuntime.addEdit.isSaving"
+              :disabled="formRuntime.addEdit.isSubmitDisabled"
+              @click="formRuntime.addEdit.submit"
+            >
+              {{ saveLabel }}
+            </v-btn>
+          </div>
+        </div>
+      </v-card-item>
+
+      <v-card-text class="pt-0">
+        <p v-if="formRuntime.addEdit.loadError" class="text-body-2 text-medium-emphasis mb-0">
+          {{ formRuntime.addEdit.loadError }}
+        </p>
+        <template v-else-if="formRuntime.showFormSkeleton">
+          <v-skeleton-loader type="heading, text@2, article" />
+        </template>
+        <v-form v-else @submit.prevent="formRuntime.addEdit.submit" novalidate>
+          <v-progress-linear v-if="formRuntime.addEdit.isRefetching" indeterminate class="mb-4" />
+          <v-row>
+            <template v-if="mode === 'new'">
+              <!-- jskit:crud-ui-fields:new -->
+__JSKIT_UI_CREATE_FORM_COLUMNS__
+            </template>
+            <template v-else>
+              <!-- jskit:crud-ui-fields:edit -->
+__JSKIT_UI_EDIT_FORM_COLUMNS__
+            </template>
+          </v-row>
+        </v-form>
+      </v-card-text>
+    </v-card>
+  </section>
+</template>
+
+<script setup>
+const props = defineProps({
+  mode: {
+    type: String,
+    default: "new"
+  },
+  formRuntime: {
+    type: Object,
+    required: true
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  subtitle: {
+    type: String,
+    default: ""
+  },
+  saveLabel: {
+    type: String,
+    default: "Save"
+  },
+  cancelTo: {
+    type: [String, Object],
+    default: ""
+  },
+  resolveLookupItems: {
+    type: Function,
+    required: true
+  },
+  resolveLookupLoading: {
+    type: Function,
+    required: true
+  },
+  resolveLookupSearch: {
+    type: Function,
+    required: true
+  },
+  setLookupSearch: {
+    type: Function,
+    required: true
+  }
+});
+
+function resolveCancelTo(target) {
+  if (!target) {
+    return "";
+  }
+
+  if (typeof target === "string") {
+    return props.formRuntime.addEdit.resolveParams(target);
+  }
+
+  return target;
+}
+</script>

package/templates/src/pages/admin/ui-generator/AddEditFormFields.js

@@ -0,0 +1,17 @@
+const UI_CREATE_FORM_FIELDS = [];
+
+// @jskit-contract crud.ui.form-fields.${option:namespace|snake}.new.v1
+void UI_CREATE_FORM_FIELDS;
+// jskit:crud-ui-form-fields:new
+__JSKIT_UI_CREATE_FORM_FIELD_PUSH_LINES__
+Object.freeze(UI_CREATE_FORM_FIELDS);
+
+const UI_EDIT_FORM_FIELDS = [];
+
+// @jskit-contract crud.ui.form-fields.${option:namespace|snake}.edit.v1
+void UI_EDIT_FORM_FIELDS;
+// jskit:crud-ui-form-fields:edit
+__JSKIT_UI_EDIT_FORM_FIELD_PUSH_LINES__
+Object.freeze(UI_EDIT_FORM_FIELDS);
+
+export { UI_CREATE_FORM_FIELDS, UI_EDIT_FORM_FIELDS };

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

@@ -48,7 +48,7 @@ __JSKIT_UI_EDIT_FORM_COLUMNS__
 <script setup>
 import { computed } from "vue";
 import { useRoute } from "vue-router";
-import { useCrudSchemaForm } from "@jskit-ai/users-web/client/composables/useCrudSchemaForm";
+import { useCrudAddEdit } from "@jskit-ai/users-web/client/composables/useCrudAddEdit";
 import { createCrudLookupFieldRuntime } from "@jskit-ai/users-web/client/composables/crudLookupFieldRuntime";
 import { resource as uiResource } from "/${option:resource-file|trim}";
 
@@ -94,7 +94,7 @@ const {
   setLookupSearch
 } = lookupFieldRuntime;
 
-const formRuntime = useCrudSchemaForm({
+const formRuntime = useCrudAddEdit({
   resource: uiResource,
   operationName: "patch",
   formFields: UI_EDIT_FORM_FIELDS,

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

@@ -0,0 +1,108 @@
+<template>
+  <${option:namespace|singular|pascal|default(Record)}AddEditForm
+    mode="edit"
+    :form-runtime="formRuntime"
+    title="Edit ${option:namespace|singular|pascal|default(Record)}"
+    subtitle="Update the selected ${option:namespace|singular|default(record)}."
+    save-label="Save changes"
+    :cancel-to="cancelTo"
+    :resolve-lookup-items="resolveLookupItems"
+    :resolve-lookup-loading="resolveLookupLoading"
+    :resolve-lookup-search="resolveLookupSearch"
+    :set-lookup-search="setLookupSearch"
+  />
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { useCrudAddEdit } from "@jskit-ai/users-web/client/composables/useCrudAddEdit";
+import { createCrudLookupFieldRuntime } from "@jskit-ai/users-web/client/composables/crudLookupFieldRuntime";
+import { resource as uiResource } from "/${option:resource-file|trim}";
+import ${option:namespace|singular|pascal|default(Record)}AddEditForm from "../_components/${option:namespace|singular|pascal|default(Record)}AddEditForm.vue";
+import { UI_EDIT_FORM_FIELDS } from "../_components/${option:namespace|singular|pascal|default(Record)}AddEditFormFields.js";
+
+const UI_OPERATION_ADAPTER = null;
+const UI_RECORD_ID_PARAM = "${option:id-param|trim}";
+const UI_API_BASE_URL = "${option:api-path|trim}";
+const UI_EDIT_API_URL = `${UI_API_BASE_URL}/:${UI_RECORD_ID_PARAM}`;
+const UI_LIST_URL = __JSKIT_UI_HAS_LIST_ROUTE__ ? "../.." : "";
+const UI_VIEW_URL = __JSKIT_UI_HAS_VIEW_ROUTE__ ? ".." : "";
+const UI_CANCEL_URL = UI_VIEW_URL || UI_LIST_URL;
+const UI_RECORD_CHANGED_EVENT = __JSKIT_UI_RECORD_CHANGED_EVENT__;
+const route = useRoute();
+
+// jskit:crud-ui-fields-target ../_components/${option:namespace|singular|pascal|default(Record)}AddEditForm.vue
+// jskit:crud-ui-form-fields-target ../_components/${option:namespace|singular|pascal|default(Record)}AddEditFormFields.js
+
+const routeRecordId = computed(() => {
+  const source = route.params?.[UI_RECORD_ID_PARAM];
+  if (Array.isArray(source)) {
+    return String(source[0] ?? "").trim();
+  }
+
+  return String(source ?? "").trim();
+});
+
+const lookupFieldRuntime = createCrudLookupFieldRuntime({
+  formFields: UI_EDIT_FORM_FIELDS,
+  adapter: UI_OPERATION_ADAPTER || undefined,
+  recordIdParam: UI_RECORD_ID_PARAM,
+  lookupContainerKey: uiResource?.contract?.lookup?.containerKey,
+  queryKeyPrefix: ["ui-generator", "${option:namespace|kebab}", "lookup", "edit"],
+  placementSourcePrefix: "ui-generator.${option:namespace|kebab}.edit.lookup"
+});
+const {
+  resolveLookupItems,
+  resolveLookupLoading,
+  resolveLookupSearch,
+  setLookupSearch
+} = lookupFieldRuntime;
+
+const formRuntime = useCrudAddEdit({
+  resource: uiResource,
+  operationName: "patch",
+  formFields: UI_EDIT_FORM_FIELDS,
+  addEditOptions: {
+    adapter: UI_OPERATION_ADAPTER || undefined,
+    apiUrlTemplate: UI_EDIT_API_URL,
+    queryKeyFactory: (surfaceId = "", workspaceSlug = "") => [
+      "ui-generator",
+      "${option:namespace|kebab}",
+      "edit",
+      String(surfaceId || ""),
+      String(workspaceSlug || ""),
+      routeRecordId.value
+    ],
+    placementSource: "ui-generator.${option:namespace|kebab}.edit",
+    writeMethod: "PATCH",
+    fallbackLoadError: "Unable to load record.",
+    fallbackSaveError: "Unable to save record.",
+    recordIdParam: UI_RECORD_ID_PARAM,
+    routeRecordId,
+    viewUrlTemplate: UI_VIEW_URL,
+    listUrlTemplate: UI_LIST_URL,
+    realtime: UI_RECORD_CHANGED_EVENT
+      ? {
+          event: UI_RECORD_CHANGED_EVENT
+        }
+      : null
+  },
+  saveSuccess: {
+    invalidateQueryKey: ["ui-generator", "${option:namespace|kebab}"],
+    listUrlTemplate: UI_LIST_URL
+  }
+});
+
+const cancelTo = computed(() => {
+  const resolvedPath = formRuntime.addEdit.resolveParams(UI_CANCEL_URL);
+  if (!resolvedPath) {
+    return "";
+  }
+
+  return {
+    path: resolvedPath,
+    query: route.query
+  };
+});
+</script>

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

@@ -4,7 +4,7 @@
       <v-card-item>
         <div class="d-flex align-center ga-3 flex-wrap w-100">
           <div>
-            <v-card-title class="px-0">${option:namespace|plural|pascal}</v-card-title>
+            <v-card-title class="px-0">{{ listHeadingTitle }}</v-card-title>
             <v-card-subtitle class="px-0">Manage ${option:namespace|plural|default(records)}.</v-card-subtitle>
           </div>
           <v-spacer />
@@ -82,7 +82,9 @@ __JSKIT_UI_LIST_ROW_COLUMNS__
 </template>
 
 <script setup>
-import { useList } from "@jskit-ai/users-web/client/composables/useList";
+import { computed } from "vue";
+import { useCrudListParentTitle } from "@jskit-ai/users-web/client/composables/useCrudListParentTitle";
+import { useCrudList } from "@jskit-ai/users-web/client/composables/useCrudList";
 import { resource as uiResource } from "/${option:resource-file|trim}";
 
 const UI_OPERATION_ADAPTER = null;
@@ -94,7 +96,7 @@ const UI_NEW_URL = __JSKIT_UI_HAS_NEW_ROUTE__ ? "./new" : "";
 const UI_RECORD_CHANGED_EVENTS = __JSKIT_UI_LIST_REALTIME_EVENTS__;
 const UI_ROUTE_QUERY_BLACKLIST = Object.freeze(["include", "cursor", "limit"]);
 
-const records = useList({
+const records = useCrudList({
   adapter: UI_OPERATION_ADAPTER || undefined,
   resource: uiResource,
   apiSuffix: UI_LIST_API_URL,
@@ -128,6 +130,26 @@ const records = useList({
       }
     : null
 });
+
+const parentTitle = useCrudListParentTitle({
+  listRuntime: records,
+  resource: uiResource,
+  adapter: UI_OPERATION_ADAPTER || undefined,
+  recordIdParam: UI_RECORD_ID_PARAM,
+  queryKeyPrefix: ["ui-generator", "${option:namespace|kebab}", "list", "parent-title"],
+  placementSource: "ui-generator.${option:namespace|kebab}.list.parent-title",
+  fallbackLoadError: "Unable to load parent record.",
+  notFoundMessage: "Parent record not found."
+});
+
+const listHeadingTitle = computed(() => {
+  const resolvedParentTitle = String(parentTitle.title || "").trim();
+  if (!resolvedParentTitle) {
+    return "${option:route-path|pascal}";
+  }
+
+  return `${option:route-path|pascal} for ${resolvedParentTitle}`;
+});
 </script>
 
 <style scoped>

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

@@ -36,7 +36,7 @@ __JSKIT_UI_CREATE_FORM_COLUMNS__
 </template>
 
 <script setup>
-import { useCrudSchemaForm } from "@jskit-ai/users-web/client/composables/useCrudSchemaForm";
+import { useCrudAddEdit } from "@jskit-ai/users-web/client/composables/useCrudAddEdit";
 import { createCrudLookupFieldRuntime } from "@jskit-ai/users-web/client/composables/crudLookupFieldRuntime";
 import { resource as uiResource } from "/${option:resource-file|trim}";
 
@@ -69,7 +69,7 @@ const {
   setLookupSearch
 } = lookupFieldRuntime;
 
-const formRuntime = useCrudSchemaForm({
+const formRuntime = useCrudAddEdit({
   resource: uiResource,
   operationName: "create",
   formFields: UI_CREATE_FORM_FIELDS,

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

@@ -0,0 +1,81 @@
+<template>
+  <${option:namespace|singular|pascal|default(Record)}AddEditForm
+    mode="new"
+    :form-runtime="formRuntime"
+    title="New ${option:namespace|singular|pascal|default(Record)}"
+    subtitle="Create a new ${option:namespace|singular|default(record)}."
+    save-label="Save ${option:namespace|singular|default(record)}"
+    :cancel-to="UI_CANCEL_URL"
+    :resolve-lookup-items="resolveLookupItems"
+    :resolve-lookup-loading="resolveLookupLoading"
+    :resolve-lookup-search="resolveLookupSearch"
+    :set-lookup-search="setLookupSearch"
+  />
+</template>
+
+<script setup>
+import { useCrudAddEdit } from "@jskit-ai/users-web/client/composables/useCrudAddEdit";
+import { createCrudLookupFieldRuntime } from "@jskit-ai/users-web/client/composables/crudLookupFieldRuntime";
+import { resource as uiResource } from "/${option:resource-file|trim}";
+import ${option:namespace|singular|pascal|default(Record)}AddEditForm from "./_components/${option:namespace|singular|pascal|default(Record)}AddEditForm.vue";
+import { UI_CREATE_FORM_FIELDS } from "./_components/${option:namespace|singular|pascal|default(Record)}AddEditFormFields.js";
+
+const UI_OPERATION_ADAPTER = null;
+const UI_RECORD_ID_PARAM = "${option:id-param|trim}";
+const UI_CREATE_API_URL = "${option:api-path|trim}";
+const UI_LIST_URL = __JSKIT_UI_HAS_LIST_ROUTE__ ? ".." : "";
+const UI_VIEW_URL = __JSKIT_UI_HAS_VIEW_ROUTE__ ? `../:${UI_RECORD_ID_PARAM}` : "";
+const UI_CANCEL_URL = UI_LIST_URL;
+const UI_RECORD_CHANGED_EVENT = __JSKIT_UI_RECORD_CHANGED_EVENT__;
+
+// jskit:crud-ui-fields-target ./_components/${option:namespace|singular|pascal|default(Record)}AddEditForm.vue
+// jskit:crud-ui-form-fields-target ./_components/${option:namespace|singular|pascal|default(Record)}AddEditFormFields.js
+
+const lookupFieldRuntime = createCrudLookupFieldRuntime({
+  formFields: UI_CREATE_FORM_FIELDS,
+  adapter: UI_OPERATION_ADAPTER || undefined,
+  recordIdParam: UI_RECORD_ID_PARAM,
+  lookupContainerKey: uiResource?.contract?.lookup?.containerKey,
+  queryKeyPrefix: ["ui-generator", "${option:namespace|kebab}", "lookup", "new"],
+  placementSourcePrefix: "ui-generator.${option:namespace|kebab}.new.lookup"
+});
+const {
+  resolveLookupItems,
+  resolveLookupLoading,
+  resolveLookupSearch,
+  setLookupSearch
+} = lookupFieldRuntime;
+
+const formRuntime = useCrudAddEdit({
+  resource: uiResource,
+  operationName: "create",
+  formFields: UI_CREATE_FORM_FIELDS,
+  addEditOptions: {
+    adapter: UI_OPERATION_ADAPTER || undefined,
+    apiSuffix: UI_CREATE_API_URL,
+    queryKeyFactory: (surfaceId = "", workspaceSlug = "") => [
+      "ui-generator",
+      "${option:namespace|kebab}",
+      "create",
+      String(surfaceId || ""),
+      String(workspaceSlug || "")
+    ],
+    placementSource: "ui-generator.${option:namespace|kebab}.new",
+    readEnabled: false,
+    writeMethod: "POST",
+    fallbackSaveError: "Unable to save record.",
+    recordIdParam: UI_RECORD_ID_PARAM,
+    viewUrlTemplate: UI_VIEW_URL,
+    listUrlTemplate: UI_LIST_URL,
+    realtime: UI_RECORD_CHANGED_EVENT
+      ? {
+          event: UI_RECORD_CHANGED_EVENT
+        }
+      : null
+  },
+  saveSuccess: {
+    invalidateQueryKey: ["ui-generator", "${option:namespace|kebab}"],
+    listUrlTemplate: UI_LIST_URL
+  }
+});
+</script>

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

@@ -55,7 +55,7 @@ __JSKIT_UI_VIEW_COLUMNS__
 </template>
 
 <script setup>
-import { useView } from "@jskit-ai/users-web/client/composables/useView";
+import { useCrudView } from "@jskit-ai/users-web/client/composables/useCrudView";
 
 const UI_OPERATION_ADAPTER = null;
 const UI_RECORD_ID_PARAM = "${option:id-param|trim}";
@@ -66,7 +66,7 @@ const UI_EDIT_URL = __JSKIT_UI_HAS_EDIT_ROUTE__ ? "./edit" : "";
 const UI_VIEW_TITLE_FALLBACK_FIELD_KEY = __JSKIT_UI_VIEW_TITLE_FALLBACK_FIELD_KEY__;
 const UI_RECORD_CHANGED_EVENT = __JSKIT_UI_RECORD_CHANGED_EVENT__;
 
-const view = useView({
+const view = useCrudView({
   adapter: UI_OPERATION_ADAPTER || undefined,
   apiUrlTemplate: UI_VIEW_API_URL,
   recordIdParam: UI_RECORD_ID_PARAM,

package/test/addFieldSubcommand.test.js

@@ -148,6 +148,148 @@ UI_EDIT_FORM_FIELDS.push({ key: "firstName", component: "text" });
   });
 });
 
+test("field patches generated shared add/edit component targets from wrapper page", async () => {
+  await withTempApp(async (appRoot) => {
+    const resourceFile = "packages/contacts/src/shared/contactResource.js";
+    const editFile = "src/pages/admin/crm/contacts/[recordId]/edit.vue";
+    const addEditFormFile = "src/pages/admin/crm/contacts/_components/ContactAddEditForm.vue";
+    const addEditFieldsFile = "src/pages/admin/crm/contacts/_components/ContactAddEditFormFields.js";
+
+    await writeAppFile(appRoot, resourceFile, RESOURCE_SOURCE);
+    await writeAppFile(
+      appRoot,
+      editFile,
+      `<template>
+  <ContactAddEditForm />
+</template>
+<script setup>
+import { resource as uiResource } from "/packages/contacts/src/shared/contactResource.js";
+// jskit:crud-ui-fields-target ../_components/ContactAddEditForm.vue
+// jskit:crud-ui-form-fields-target ../_components/ContactAddEditFormFields.js
+</script>
+`
+    );
+    await writeAppFile(
+      appRoot,
+      addEditFormFile,
+      `<template>
+  <v-row>
+    <!-- jskit:crud-ui-fields:edit -->
+  </v-row>
+</template>
+`
+    );
+    await writeAppFile(
+      appRoot,
+      addEditFieldsFile,
+      `const UI_EDIT_FORM_FIELDS = [];
+// jskit:crud-ui-form-fields:edit
+UI_EDIT_FORM_FIELDS.push({ key: "firstName", component: "text" });
+`
+    );
+
+    const result = await runGeneratorSubcommand({
+      appRoot,
+      subcommand: "field",
+      args: ["vetId", "edit", editFile],
+      options: {}
+    });
+
+    assert.deepEqual(result.touchedFiles, [addEditFormFile, addEditFieldsFile]);
+
+    const addEditFormSource = await readFile(path.join(appRoot, addEditFormFile), "utf8");
+    assert.match(
+      addEditFormSource,
+      /<v-autocomplete[\s\S]*resolveLookupItems\("vetId", \{ selectedValue: formRuntime\.form\.vetId, selectedRecord: formRuntime\.addEdit\.resource\.data \}\)/
+    );
+
+    const addEditFieldsSource = await readFile(path.join(appRoot, addEditFieldsFile), "utf8");
+    assert.match(addEditFieldsSource, /UI_EDIT_FORM_FIELDS\.push\(\{[\s\S]*"key": "vetId"/);
+  });
+});
+
+test("field patches both shared add/edit branches when markup snippets are identical", async () => {
+  await withTempApp(async (appRoot) => {
+    const resourceFile = "packages/contacts/src/shared/contactResource.js";
+    const newFile = "src/pages/admin/crm/contacts/new.vue";
+    const editFile = "src/pages/admin/crm/contacts/[recordId]/edit.vue";
+    const addEditFormFile = "src/pages/admin/crm/contacts/_components/ContactAddEditForm.vue";
+    const addEditFieldsFile = "src/pages/admin/crm/contacts/_components/ContactAddEditFormFields.js";
+
+    await writeAppFile(appRoot, resourceFile, RESOURCE_SOURCE);
+    await writeAppFile(
+      appRoot,
+      newFile,
+      `<template>
+  <ContactAddEditForm />
+</template>
+<script setup>
+import { resource as uiResource } from "/packages/contacts/src/shared/contactResource.js";
+// jskit:crud-ui-fields-target ./_components/ContactAddEditForm.vue
+// jskit:crud-ui-form-fields-target ./_components/ContactAddEditFormFields.js
+</script>
+`
+    );
+    await writeAppFile(
+      appRoot,
+      editFile,
+      `<template>
+  <ContactAddEditForm />
+</template>
+<script setup>
+import { resource as uiResource } from "/packages/contacts/src/shared/contactResource.js";
+// jskit:crud-ui-fields-target ../_components/ContactAddEditForm.vue
+// jskit:crud-ui-form-fields-target ../_components/ContactAddEditFormFields.js
+</script>
+`
+    );
+    await writeAppFile(
+      appRoot,
+      addEditFormFile,
+      `<template>
+  <v-row>
+    <template v-if="mode === 'new'">
+      <!-- jskit:crud-ui-fields:new -->
+    </template>
+    <template v-else>
+      <!-- jskit:crud-ui-fields:edit -->
+    </template>
+  </v-row>
+</template>
+`
+    );
+    await writeAppFile(
+      appRoot,
+      addEditFieldsFile,
+      `const UI_CREATE_FORM_FIELDS = [];
+// jskit:crud-ui-form-fields:new
+const UI_EDIT_FORM_FIELDS = [];
+// jskit:crud-ui-form-fields:edit
+`
+    );
+
+    await runGeneratorSubcommand({
+      appRoot,
+      subcommand: "field",
+      args: ["vetId", "new", newFile],
+      options: {}
+    });
+    await runGeneratorSubcommand({
+      appRoot,
+      subcommand: "field",
+      args: ["vetId", "edit", editFile],
+      options: {}
+    });
+
+    const addEditFormSource = await readFile(path.join(appRoot, addEditFormFile), "utf8");
+    assert.equal((addEditFormSource.match(/resolveLookupItems\("vetId"/g) || []).length, 2);
+
+    const addEditFieldsSource = await readFile(path.join(appRoot, addEditFieldsFile), "utf8");
+    assert.match(addEditFieldsSource, /UI_CREATE_FORM_FIELDS\.push\(\{[\s\S]*"key": "vetId"/);
+    assert.match(addEditFieldsSource, /UI_EDIT_FORM_FIELDS\.push\(\{[\s\S]*"key": "vetId"/);
+  });
+});
+
 test("field patches list screen when resource-file is passed explicitly", async () => {
   await withTempApp(async (appRoot) => {
     const resourceFile = "packages/contacts/src/shared/contactResource.js";

package/test/buildTemplateContext.test.js

@@ -173,6 +173,83 @@ const resource = {
 export { resource };
 `;
 
+const LOOKUP_RESOURCE_SOURCE = `const recordSchema = {
+  type: "object",
+  properties: {
+    id: { type: "integer" },
+    serviceId: { type: ["integer", "null"] },
+    name: { type: "string" }
+  },
+  additionalProperties: false
+};
+
+const bodySchema = {
+  type: "object",
+  properties: {
+    serviceId: { type: ["integer", "null"] },
+    name: { type: "string", maxLength: 255 }
+  },
+  additionalProperties: false
+};
+
+const resource = {
+  operations: {
+    list: {
+      outputValidator: {
+        schema: {
+          type: "object",
+          properties: {
+            items: {
+              type: "array",
+              items: recordSchema
+            },
+            nextCursor: { type: ["string", "null"] }
+          },
+          additionalProperties: false
+        }
+      }
+    },
+    view: {
+      outputValidator: {
+        schema: recordSchema
+      }
+    },
+    create: {
+      bodyValidator: {
+        schema: bodySchema
+      },
+      outputValidator: {
+        schema: recordSchema
+      }
+    },
+    patch: {
+      bodyValidator: {
+        schema: bodySchema
+      },
+      outputValidator: {
+        schema: recordSchema
+      }
+    }
+  },
+  fieldMeta: [
+    {
+      key: "serviceId",
+      relation: {
+        kind: "lookup",
+        namespace: "services",
+        valueKey: "id",
+        surfaceId: "console"
+      },
+      ui: {
+        formControl: "autocomplete"
+      }
+    }
+  ]
+};
+
+export { resource };
+`;
+
 test("buildUiTemplateContext derives list/view/new/edit placeholders from resource validators", async () => {
   await withTempApp(async (appRoot) => {
     const resourceFile = "packages/customers/src/shared/customerResource.js";
@@ -220,6 +297,31 @@ test("buildUiTemplateContext derives list/view/new/edit placeholders from resour
   });
 });
 
+test("buildUiTemplateContext disables browser autofill on lookup autocomplete fields", async () => {
+  await withTempApp(async (appRoot) => {
+    const resourceFile = "packages/availabilities/src/shared/availabilityResource.js";
+    await writeResource(appRoot, resourceFile, LOOKUP_RESOURCE_SOURCE);
+
+    const context = await buildUiTemplateContext({
+      appRoot,
+      options: {
+        namespace: "availabilities",
+        "api-path": "/availabilities",
+        operations: "new,edit",
+        "resource-file": resourceFile
+      }
+    });
+
+    assert.match(context.__JSKIT_UI_CREATE_FORM_COLUMNS__, /<v-autocomplete[\s\S]*autocomplete="off"/);
+    assert.match(context.__JSKIT_UI_EDIT_FORM_COLUMNS__, /<v-autocomplete[\s\S]*autocomplete="off"/);
+
+    const createFields = JSON.parse(context.__JSKIT_UI_CREATE_FORM_FIELDS__);
+    const editFields = JSON.parse(context.__JSKIT_UI_EDIT_FORM_FIELDS__);
+    assert.equal(createFields[0].relation.surfaceId, "console");
+    assert.equal(editFields[0].relation.surfaceId, "console");
+  });
+});
+
 test("buildUiTemplateContext includes hidden default list fields when explicitly selected", async () => {
   await withTempApp(async (appRoot) => {
     const resourceFile = "packages/customers/src/shared/customerResource.js";