@jskit-ai/crud-ui-generator 0.1.31 → 0.1.32

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/crud-ui-generator",
-  version: "0.1.31",
+  version: "0.1.32",
   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.63"
+        "@jskit-ai/users-web": "0.1.64"
       },
       dev: {}
     },

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@jskit-ai/crud-ui-generator",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "type": "module",
   "scripts": {
     "test": "node --test"
   },
   "dependencies": {
-    "@jskit-ai/crud-core": "0.1.56",
-    "@jskit-ai/kernel": "0.1.48"
+    "@jskit-ai/crud-core": "0.1.57",
+    "@jskit-ai/kernel": "0.1.49"
   },
   "exports": {
     "./server/buildTemplateContext": "./src/server/buildTemplateContext.js"

package/src/server/buildTemplateContext.js

@@ -258,6 +258,77 @@ function filterDisplayFields(selectedFieldKeys, fields) {
   });
 }
 
+function rewriteGeneratedBlockIndent(source = "", { trimPrefix = "", addPrefix = "" } = {}) {
+  const text = String(source || "");
+  const trimmedPrefix = String(trimPrefix || "");
+  const extraPrefix = String(addPrefix || "");
+  if (!text) {
+    return "";
+  }
+
+  return text
+    .split("\n")
+    .map((line) => {
+      let nextLine = line;
+      if (trimmedPrefix && nextLine.startsWith(trimmedPrefix)) {
+        nextLine = nextLine.slice(trimmedPrefix.length);
+      }
+      return `${extraPrefix}${nextLine}`;
+    })
+    .join("\n");
+}
+
+function hasLookupFormFields(fields = []) {
+  return (Array.isArray(fields) ? fields : []).some((field) => normalizeText(field?.component).toLowerCase() === "lookup");
+}
+
+function buildLookupImportLine(fields = []) {
+  return hasLookupFormFields(fields)
+    ? 'import { createCrudLookupFieldRuntime } from "@jskit-ai/users-web/client/composables/crudLookupFieldRuntime";'
+    : "";
+}
+
+function buildLookupRuntimeSetup(fields = [], {
+  formFieldsVariable = "",
+  resourceNamespace = "",
+  mode = ""
+} = {}) {
+  if (!hasLookupFormFields(fields)) {
+    return "";
+  }
+
+  const normalizedFormFieldsVariable = normalizeText(formFieldsVariable) || "UI_FORM_FIELDS";
+  const normalizedResourceNamespace = normalizeText(resourceNamespace) || "resource";
+  const normalizedMode = normalizeText(mode) || "new";
+
+  return `const lookupFieldRuntime = createCrudLookupFieldRuntime({
+  formFields: ${normalizedFormFieldsVariable},
+  adapter: UI_OPERATION_ADAPTER || undefined,
+  recordIdParam: UI_RECORD_ID_PARAM,
+  lookupContainerKey: uiResource?.contract?.lookup?.containerKey,
+  queryKeyPrefix: ["ui-generator", "${normalizedResourceNamespace}", "lookup", "${normalizedMode}"],
+  placementSourcePrefix: "ui-generator.${normalizedResourceNamespace}.${normalizedMode}.lookup"
+});
+const {
+  resolveLookupItems,
+  resolveLookupLoading,
+  resolveLookupSearch,
+  setLookupSearch
+} = lookupFieldRuntime;
+`;
+}
+
+function buildLookupFormProps(fields = []) {
+  if (!hasLookupFormFields(fields)) {
+    return "";
+  }
+
+  return `    :resolve-lookup-items="resolveLookupItems"
+    :resolve-lookup-loading="resolveLookupLoading"
+    :resolve-lookup-search="resolveLookupSearch"
+    :set-lookup-search="setLookupSearch"`;
+}
+
 function filterDefaultHiddenListFields(selectedFieldKeys, fields, { recordIdFieldKey = "" } = {}) {
   const selectedFields = Array.isArray(selectedFieldKeys) ? selectedFieldKeys : [];
   const availableFields = Array.isArray(fields) ? fields : [];
@@ -485,6 +556,8 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
   const menuMarker = hasListOperation
     ? `jskit:crud-ui-generator.page.link:${pageTarget.surfaceId}:${pageTarget.routeUrlSuffix}`
     : "";
+  const createFormColumns = buildFormColumns(createFields);
+  const editFormColumns = buildFormColumns(editFields);
 
   return {
     __JSKIT_UI_RESOURCE_IMPORT_PATH__: `/${normalizeRelativeAppPath(options?.["resource-file"])}`,
@@ -508,12 +581,37 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
     __JSKIT_UI_HAS_VIEW_ROUTE__: hasViewOperation ? "true" : "false",
     __JSKIT_UI_HAS_NEW_ROUTE__: hasNewOperation ? "true" : "false",
     __JSKIT_UI_HAS_EDIT_ROUTE__: hasEditOperation ? "true" : "false",
-    __JSKIT_UI_CREATE_FORM_COLUMNS__: buildFormColumns(createFields),
-    __JSKIT_UI_EDIT_FORM_COLUMNS__: buildFormColumns(editFields),
+    __JSKIT_UI_LIST_PAGE_VIEW_URL__: JSON.stringify(hasViewOperation ? `./:${normalizeText(options?.["id-param"]) || "recordId"}` : ""),
+    __JSKIT_UI_LIST_PAGE_EDIT_URL__: JSON.stringify(hasEditOperation ? `./:${normalizeText(options?.["id-param"]) || "recordId"}/edit` : ""),
+    __JSKIT_UI_LIST_PAGE_NEW_URL__: JSON.stringify(hasNewOperation ? "./new" : ""),
+    __JSKIT_UI_NEW_PAGE_LIST_URL__: JSON.stringify(hasListOperation ? ".." : ""),
+    __JSKIT_UI_NEW_PAGE_VIEW_URL__: JSON.stringify(hasViewOperation ? `../:${normalizeText(options?.["id-param"]) || "recordId"}` : ""),
+    __JSKIT_UI_EDIT_PAGE_LIST_URL__: JSON.stringify(hasListOperation ? "../.." : ""),
+    __JSKIT_UI_EDIT_PAGE_VIEW_URL__: JSON.stringify(hasViewOperation ? ".." : ""),
+    __JSKIT_UI_VIEW_PAGE_LIST_URL__: JSON.stringify(hasListOperation ? ".." : ""),
+    __JSKIT_UI_VIEW_PAGE_EDIT_URL__: JSON.stringify(hasEditOperation ? "./edit" : ""),
+    __JSKIT_UI_CREATE_FORM_COLUMNS__: createFormColumns,
+    __JSKIT_UI_EDIT_FORM_COLUMNS__: editFormColumns,
+    __JSKIT_UI_CREATE_FORM_COLUMNS_DIRECT__: rewriteGeneratedBlockIndent(createFormColumns, { trimPrefix: "  " }),
+    __JSKIT_UI_EDIT_FORM_COLUMNS_DIRECT__: rewriteGeneratedBlockIndent(editFormColumns, { trimPrefix: "  " }),
     __JSKIT_UI_CREATE_FORM_FIELDS__: JSON.stringify(createFields),
     __JSKIT_UI_EDIT_FORM_FIELDS__: JSON.stringify(editFields),
     __JSKIT_UI_CREATE_FORM_FIELD_PUSH_LINES__: renderObjectPushLines("UI_CREATE_FORM_FIELDS", createFields),
     __JSKIT_UI_EDIT_FORM_FIELD_PUSH_LINES__: renderObjectPushLines("UI_EDIT_FORM_FIELDS", editFields),
+    __JSKIT_UI_CREATE_LOOKUP_IMPORT_LINE__: buildLookupImportLine(createFields),
+    __JSKIT_UI_EDIT_LOOKUP_IMPORT_LINE__: buildLookupImportLine(editFields),
+    __JSKIT_UI_CREATE_LOOKUP_RUNTIME_SETUP__: buildLookupRuntimeSetup(createFields, {
+      formFieldsVariable: "UI_CREATE_FORM_FIELDS",
+      resourceNamespace,
+      mode: "new"
+    }),
+    __JSKIT_UI_EDIT_LOOKUP_RUNTIME_SETUP__: buildLookupRuntimeSetup(editFields, {
+      formFieldsVariable: "UI_EDIT_FORM_FIELDS",
+      resourceNamespace,
+      mode: "edit"
+    }),
+    __JSKIT_UI_CREATE_LOOKUP_FORM_PROPS__: buildLookupFormProps(createFields),
+    __JSKIT_UI_EDIT_LOOKUP_FORM_PROPS__: buildLookupFormProps(editFields),
     __JSKIT_UI_MENU_MARKER__: menuMarker,
     __JSKIT_UI_MENU_PLACEMENT_ID__: String(pageLinkTarget?.pageTarget?.placementId || ""),
     __JSKIT_UI_MENU_PLACEMENT_TARGET__: String(pageLinkTarget?.placementTarget?.id || ""),

package/src/server/resourceSupport.js

@@ -728,7 +728,18 @@ function escapeHtml(value) {
 }
 
 function serializeTemplateBindingValue(value) {
-  return JSON.stringify(value).replaceAll("'", "\\u0027");
+  return JSON.stringify(value)
+    .replaceAll("&", "&")
+    .replaceAll('"', """)
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll("'", "\\u0027");
+}
+
+function renderTemplateJsStringLiteral(value) {
+  return `'${String(value || "")
+    .replaceAll("\\", "\\\\")
+    .replaceAll("'", "\\'")}'`;
 }
 
 function buildListHeaderColumns(fields = []) {
@@ -822,84 +833,93 @@ function buildFormColumns(fields = []) {
       }
 
       const label = escapeHtml(field?.label || toFieldLabel(key));
-      const formAccessor = toAccessorExpression("formRuntime.form", key);
-      const fieldErrorExpression = `formRuntime.resolveFieldErrors(${JSON.stringify(key)})`;
+      const formAccessor = toAccessorExpression("formState", key);
+      const fieldKeyLiteral = renderTemplateJsStringLiteral(key);
+      const fieldErrorExpression = `resolveFieldErrors(${fieldKeyLiteral})`;
       const component = normalizeText(field?.component).toLowerCase();
       if (component === "switch") {
-        return `            <v-col cols="12" md="6">
-              <v-switch
-                v-model="${formAccessor}"
-                label="${label}"
-                color="primary"
-                hide-details="auto"
-                :disabled="formRuntime.addEdit.isFieldLocked"
-                :error-messages='${fieldErrorExpression}'
-              />
-            </v-col>`;
+        return `              <v-col cols="12" md="6">
+                <v-switch
+                  v-model="${formAccessor}"
+                  label="${label}"
+                  color="primary"
+                  hide-details="auto"
+                  :disabled="addEdit.isFieldLocked"
+                  :error-messages="${fieldErrorExpression}"
+                />
+              </v-col>`;
       }
 
       if (component === "select") {
         const selectOptions = Array.isArray(field?.options) ? field.options : [];
-        return `            <v-col cols="12" md="6">
-              <v-select
-                v-model="${formAccessor}"
-                label="${label}"
-                variant="outlined"
-                density="comfortable"
-                :items='${serializeTemplateBindingValue(selectOptions)}'
-                item-title="label"
-                item-value="value"
-                :disabled="formRuntime.addEdit.isFieldLocked"
-                :clearable="${field.nullable === true ? "true" : "false"}"
-                :error-messages='${fieldErrorExpression}'
-              />
-            </v-col>`;
+        return `              <v-col cols="12" md="6">
+                <v-select
+                  v-model="${formAccessor}"
+                  label="${label}"
+                  variant="outlined"
+                  density="comfortable"
+                  :items="${serializeTemplateBindingValue(selectOptions)}"
+                  item-title="label"
+                  item-value="value"
+                  :disabled="addEdit.isFieldLocked"
+                  :clearable="${field.nullable === true ? "true" : "false"}"
+                  :error-messages="${fieldErrorExpression}"
+                />
+              </v-col>`;
       }
 
       if (component === "lookup") {
         const lookupFormControl = field?.lookupFormControl === "select" ? "select" : "autocomplete";
         const useAutocomplete = lookupFormControl !== "select";
         const lookupComponentTag = useAutocomplete ? "v-autocomplete" : "v-select";
-        const lookupSearchBindings = useAutocomplete
-          ? `\n                :search='resolveLookupSearch(${JSON.stringify(key)})'\n                @update:search='setLookupSearch(${JSON.stringify(key)}, $event)'`
-          : "";
-        const lookupNoFilterLine = useAutocomplete ? "\n                no-filter" : "";
-        return `            <v-col cols="12" md="6">
-              <${lookupComponentTag}
-                v-model="${formAccessor}"
-                label="${label}"
-                variant="outlined"
-                density="comfortable"
-                autocomplete="off"
-                :items='resolveLookupItems(${JSON.stringify(key)}, { selectedValue: ${formAccessor}, selectedRecord: formRuntime.addEdit.resource.data })'
-                ${lookupSearchBindings}
-                item-title="label"
-                item-value="value"
-                ${lookupNoFilterLine}
-                :loading='resolveLookupLoading(${JSON.stringify(key)})'
-                :disabled="formRuntime.addEdit.isFieldLocked"
-                :clearable="${field.nullable === true ? "true" : "false"}"
-                :error-messages='${fieldErrorExpression}'
-              />
-            </v-col>`;
+        const lookupAttributeLines = [
+          `                  :items="resolveLookupItems(${fieldKeyLiteral}, { selectedValue: ${formAccessor}, selectedRecord: addEdit.resource.data })"`
+        ];
+        if (useAutocomplete) {
+          lookupAttributeLines.push(
+            `                  :search="resolveLookupSearch(${fieldKeyLiteral})"`,
+            `                  @update:search="setLookupSearch(${fieldKeyLiteral}, $event)"`
+          );
+        }
+        lookupAttributeLines.push(
+          `                  item-title="label"`,
+          `                  item-value="value"`
+        );
+        if (useAutocomplete) {
+          lookupAttributeLines.push("                  no-filter");
+        }
+        return `              <v-col cols="12" md="6">
+                <${lookupComponentTag}
+                  v-model="${formAccessor}"
+                  label="${label}"
+                  variant="outlined"
+                  density="comfortable"
+                  autocomplete="off"
+${lookupAttributeLines.join("\n")}
+                  :loading="resolveLookupLoading(${fieldKeyLiteral})"
+                  :disabled="addEdit.isFieldLocked"
+                  :clearable="${field.nullable === true ? "true" : "false"}"
+                  :error-messages="${fieldErrorExpression}"
+                />
+              </v-col>`;
       }
 
       const inputType = normalizeText(field?.inputType) || "text";
       const maxLength = Number.isInteger(field?.maxLength) && field.maxLength > 0
         ? String(field.maxLength)
         : "undefined";
-      return `            <v-col cols="12" md="6">
-              <v-text-field
-                v-model="${formAccessor}"
-                label="${label}"
-                type="${escapeHtml(inputType)}"
-                variant="outlined"
-                density="comfortable"
-                :maxlength="${maxLength}"
-                :readonly="formRuntime.addEdit.isFieldLocked"
-                :error-messages='${fieldErrorExpression}'
-              />
-            </v-col>`;
+      return `              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="${formAccessor}"
+                  label="${label}"
+                  type="${escapeHtml(inputType)}"
+                  variant="outlined"
+                  density="comfortable"
+                  :maxlength="${maxLength}"
+                  :readonly="addEdit.isFieldLocked"
+                  :error-messages="${fieldErrorExpression}"
+                />
+              </v-col>`;
     })
     .filter(Boolean)
     .join("\n");

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

@@ -12,9 +12,9 @@
             <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"
+              :loading="addEdit.isSaving"
+              :disabled="addEdit.isSubmitDisabled"
+              @click="addEdit.submit"
             >
               {{ saveLabel }}
             </v-btn>
@@ -23,14 +23,14 @@
       </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 v-if="addEdit.loadError" class="text-body-2 text-medium-emphasis mb-0">
+          {{ 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-form v-else @submit.prevent="addEdit.submit" novalidate>
+          <v-progress-linear v-if="addEdit.isRefetching" indeterminate class="mb-4" />
           <v-row>
             <template v-if="mode === 'new'">
               <!-- jskit:crud-ui-fields:new -->
@@ -91,6 +91,14 @@ const props = defineProps({
   }
 });
 
+const formRuntime = props.formRuntime;
+const addEdit = formRuntime.addEdit;
+const formState = formRuntime.form;
+
+function resolveFieldErrors(fieldKey) {
+  return formRuntime.resolveFieldErrors(fieldKey);
+}
+
 function resolveCancelTo(target) {
   if (!target) {
     return "";

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

@@ -37,7 +37,7 @@
           <v-progress-linear v-if="formRuntime.addEdit.isRefetching" indeterminate class="mb-4" />
           <v-row>
             <!-- jskit:crud-ui-fields:edit -->
-__JSKIT_UI_EDIT_FORM_COLUMNS__
+__JSKIT_UI_EDIT_FORM_COLUMNS_DIRECT__
           </v-row>
         </v-form>
       </v-card-text>
@@ -49,15 +49,15 @@ __JSKIT_UI_EDIT_FORM_COLUMNS__
 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";
+__JSKIT_UI_EDIT_LOOKUP_IMPORT_LINE__
 import { resource as uiResource } from "__JSKIT_UI_RESOURCE_IMPORT_PATH__";
 
 const UI_OPERATION_ADAPTER = null;
 const UI_RECORD_ID_PARAM = "__JSKIT_UI_RECORD_ID_PARAM__";
 const UI_API_BASE_URL = "__JSKIT_UI_API_BASE_URL__";
 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_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_FORM_FIELDS = [];
@@ -79,20 +79,7 @@ const routeRecordId = computed(() => {
   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", "__JSKIT_UI_RESOURCE_NAMESPACE__", "lookup", "edit"],
-  placementSourcePrefix: "ui-generator.__JSKIT_UI_RESOURCE_NAMESPACE__.edit.lookup"
-});
-const {
-  resolveLookupItems,
-  resolveLookupLoading,
-  resolveLookupSearch,
-  setLookupSearch
-} = lookupFieldRuntime;
+__JSKIT_UI_EDIT_LOOKUP_RUNTIME_SETUP__
 
 const formRuntime = useCrudAddEdit({
   resource: uiResource,
@@ -128,4 +115,10 @@ const formRuntime = useCrudAddEdit({
     listUrlTemplate: UI_LIST_URL
   }
 });
+const addEdit = formRuntime.addEdit;
+const formState = formRuntime.form;
+
+function resolveFieldErrors(fieldKey) {
+  return formRuntime.resolveFieldErrors(fieldKey);
+}
 </script>

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

@@ -6,10 +6,7 @@
     subtitle="Update the selected __JSKIT_UI_RESOURCE_SINGULAR_TITLE__."
     save-label="Save changes"
     :cancel-to="cancelTo"
-    :resolve-lookup-items="resolveLookupItems"
-    :resolve-lookup-loading="resolveLookupLoading"
-    :resolve-lookup-search="resolveLookupSearch"
-    :set-lookup-search="setLookupSearch"
+__JSKIT_UI_EDIT_LOOKUP_FORM_PROPS__
   />
 </template>
 
@@ -17,7 +14,7 @@
 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";
+__JSKIT_UI_EDIT_LOOKUP_IMPORT_LINE__
 import { resource as uiResource } from "__JSKIT_UI_RESOURCE_IMPORT_PATH__";
 import CrudAddEditForm from "../_components/__JSKIT_UI_FORM_COMPONENT_FILE__";
 import { UI_EDIT_FORM_FIELDS } from "../_components/__JSKIT_UI_FORM_FIELDS_FILE__";
@@ -26,8 +23,8 @@ const UI_OPERATION_ADAPTER = null;
 const UI_RECORD_ID_PARAM = "__JSKIT_UI_RECORD_ID_PARAM__";
 const UI_API_BASE_URL = "__JSKIT_UI_API_BASE_URL__";
 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_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 route = useRoute();
@@ -44,20 +41,7 @@ const routeRecordId = computed(() => {
   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", "__JSKIT_UI_RESOURCE_NAMESPACE__", "lookup", "edit"],
-  placementSourcePrefix: "ui-generator.__JSKIT_UI_RESOURCE_NAMESPACE__.edit.lookup"
-});
-const {
-  resolveLookupItems,
-  resolveLookupLoading,
-  resolveLookupSearch,
-  setLookupSearch
-} = lookupFieldRuntime;
+__JSKIT_UI_EDIT_LOOKUP_RUNTIME_SETUP__
 
 const formRuntime = useCrudAddEdit({
   resource: uiResource,

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

@@ -40,8 +40,8 @@
               <tr>
 __JSKIT_UI_LIST_HEADER_COLUMNS__
                 <!-- jskit:crud-ui-fields:list-header -->
-                <th v-if="UI_VIEW_URL" class="text-right"></th>
-                <th v-if="UI_EDIT_URL" class="text-right"></th>
+                <th v-if="UI_VIEW_URL" class="text-right" />
+                <th v-if="UI_EDIT_URL" class="text-right" />
               </tr>
             </thead>
             <tbody>
@@ -90,9 +90,9 @@ import { resource as uiResource } from "__JSKIT_UI_RESOURCE_IMPORT_PATH__";
 const UI_OPERATION_ADAPTER = null;
 const UI_RECORD_ID_PARAM = "__JSKIT_UI_RECORD_ID_PARAM__";
 const UI_LIST_API_URL = "__JSKIT_UI_API_BASE_URL__";
-const UI_VIEW_URL = __JSKIT_UI_HAS_VIEW_ROUTE__ ? `./:${UI_RECORD_ID_PARAM}` : "";
-const UI_EDIT_URL = __JSKIT_UI_HAS_EDIT_ROUTE__ ? `./:${UI_RECORD_ID_PARAM}/edit` : "";
-const UI_NEW_URL = __JSKIT_UI_HAS_NEW_ROUTE__ ? "./new" : "";
+const UI_VIEW_URL = __JSKIT_UI_LIST_PAGE_VIEW_URL__;
+const UI_EDIT_URL = __JSKIT_UI_LIST_PAGE_EDIT_URL__;
+const UI_NEW_URL = __JSKIT_UI_LIST_PAGE_NEW_URL__;
 const UI_RECORD_CHANGED_EVENTS = __JSKIT_UI_LIST_REALTIME_EVENTS__;
 const UI_ROUTE_QUERY_BLACKLIST = Object.freeze(["include", "cursor", "limit"]);
 

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

@@ -27,7 +27,7 @@
         <v-form v-else @submit.prevent="formRuntime.addEdit.submit" novalidate>
           <v-row>
             <!-- jskit:crud-ui-fields:new -->
-__JSKIT_UI_CREATE_FORM_COLUMNS__
+__JSKIT_UI_CREATE_FORM_COLUMNS_DIRECT__
           </v-row>
         </v-form>
       </v-card-text>
@@ -37,14 +37,14 @@ __JSKIT_UI_CREATE_FORM_COLUMNS__
 
 <script setup>
 import { useCrudAddEdit } from "@jskit-ai/users-web/client/composables/useCrudAddEdit";
-import { createCrudLookupFieldRuntime } from "@jskit-ai/users-web/client/composables/crudLookupFieldRuntime";
+__JSKIT_UI_CREATE_LOOKUP_IMPORT_LINE__
 import { resource as uiResource } from "__JSKIT_UI_RESOURCE_IMPORT_PATH__";
 
 const UI_OPERATION_ADAPTER = null;
 const UI_RECORD_ID_PARAM = "__JSKIT_UI_RECORD_ID_PARAM__";
 const UI_CREATE_API_URL = "__JSKIT_UI_API_BASE_URL__";
-const UI_LIST_URL = __JSKIT_UI_HAS_LIST_ROUTE__ ? ".." : "";
-const UI_VIEW_URL = __JSKIT_UI_HAS_VIEW_ROUTE__ ? `../:${UI_RECORD_ID_PARAM}` : "";
+const UI_LIST_URL = __JSKIT_UI_NEW_PAGE_LIST_URL__;
+const UI_VIEW_URL = __JSKIT_UI_NEW_PAGE_VIEW_URL__;
 const UI_RECORD_CHANGED_EVENT = __JSKIT_UI_RECORD_CHANGED_EVENT__;
 const UI_CREATE_FORM_FIELDS = [];
 
@@ -54,20 +54,7 @@ void UI_CREATE_FORM_FIELDS;
 __JSKIT_UI_CREATE_FORM_FIELD_PUSH_LINES__
 Object.freeze(UI_CREATE_FORM_FIELDS);
 
-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", "__JSKIT_UI_RESOURCE_NAMESPACE__", "lookup", "new"],
-  placementSourcePrefix: "ui-generator.__JSKIT_UI_RESOURCE_NAMESPACE__.new.lookup"
-});
-const {
-  resolveLookupItems,
-  resolveLookupLoading,
-  resolveLookupSearch,
-  setLookupSearch
-} = lookupFieldRuntime;
+__JSKIT_UI_CREATE_LOOKUP_RUNTIME_SETUP__
 
 const formRuntime = useCrudAddEdit({
   resource: uiResource,
@@ -101,4 +88,10 @@ const formRuntime = useCrudAddEdit({
     listUrlTemplate: UI_LIST_URL
   }
 });
+const addEdit = formRuntime.addEdit;
+const formState = formRuntime.form;
+
+function resolveFieldErrors(fieldKey) {
+  return formRuntime.resolveFieldErrors(fieldKey);
+}
 </script>

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

@@ -6,16 +6,13 @@
     subtitle="Create a new __JSKIT_UI_RESOURCE_SINGULAR_TITLE__."
     save-label="Save __JSKIT_UI_RESOURCE_SINGULAR_TITLE__"
     :cancel-to="UI_CANCEL_URL"
-    :resolve-lookup-items="resolveLookupItems"
-    :resolve-lookup-loading="resolveLookupLoading"
-    :resolve-lookup-search="resolveLookupSearch"
-    :set-lookup-search="setLookupSearch"
+__JSKIT_UI_CREATE_LOOKUP_FORM_PROPS__
   />
 </template>
 
 <script setup>
 import { useCrudAddEdit } from "@jskit-ai/users-web/client/composables/useCrudAddEdit";
-import { createCrudLookupFieldRuntime } from "@jskit-ai/users-web/client/composables/crudLookupFieldRuntime";
+__JSKIT_UI_CREATE_LOOKUP_IMPORT_LINE__
 import { resource as uiResource } from "__JSKIT_UI_RESOURCE_IMPORT_PATH__";
 import CrudAddEditForm from "./_components/__JSKIT_UI_FORM_COMPONENT_FILE__";
 import { UI_CREATE_FORM_FIELDS } from "./_components/__JSKIT_UI_FORM_FIELDS_FILE__";
@@ -23,28 +20,15 @@ import { UI_CREATE_FORM_FIELDS } from "./_components/__JSKIT_UI_FORM_FIELDS_FILE
 const UI_OPERATION_ADAPTER = null;
 const UI_RECORD_ID_PARAM = "__JSKIT_UI_RECORD_ID_PARAM__";
 const UI_CREATE_API_URL = "__JSKIT_UI_API_BASE_URL__";
-const UI_LIST_URL = __JSKIT_UI_HAS_LIST_ROUTE__ ? ".." : "";
-const UI_VIEW_URL = __JSKIT_UI_HAS_VIEW_ROUTE__ ? `../:${UI_RECORD_ID_PARAM}` : "";
+const UI_LIST_URL = __JSKIT_UI_NEW_PAGE_LIST_URL__;
+const UI_VIEW_URL = __JSKIT_UI_NEW_PAGE_VIEW_URL__;
 const UI_CANCEL_URL = UI_LIST_URL;
 const UI_RECORD_CHANGED_EVENT = __JSKIT_UI_RECORD_CHANGED_EVENT__;
 
 // jskit:crud-ui-fields-target ./_components/__JSKIT_UI_FORM_COMPONENT_FILE__
 // jskit:crud-ui-form-fields-target ./_components/__JSKIT_UI_FORM_FIELDS_FILE__
 
-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", "__JSKIT_UI_RESOURCE_NAMESPACE__", "lookup", "new"],
-  placementSourcePrefix: "ui-generator.__JSKIT_UI_RESOURCE_NAMESPACE__.new.lookup"
-});
-const {
-  resolveLookupItems,
-  resolveLookupLoading,
-  resolveLookupSearch,
-  setLookupSearch
-} = lookupFieldRuntime;
+__JSKIT_UI_CREATE_LOOKUP_RUNTIME_SETUP__
 
 const formRuntime = useCrudAddEdit({
   resource: uiResource,

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

@@ -61,8 +61,8 @@ const UI_OPERATION_ADAPTER = null;
 const UI_RECORD_ID_PARAM = "__JSKIT_UI_RECORD_ID_PARAM__";
 const UI_API_BASE_URL = "__JSKIT_UI_API_BASE_URL__";
 const UI_VIEW_API_URL = `${UI_API_BASE_URL}/:${UI_RECORD_ID_PARAM}`;
-const UI_LIST_URL = __JSKIT_UI_HAS_LIST_ROUTE__ ? ".." : "";
-const UI_EDIT_URL = __JSKIT_UI_HAS_EDIT_ROUTE__ ? "./edit" : "";
+const UI_LIST_URL = __JSKIT_UI_VIEW_PAGE_LIST_URL__;
+const UI_EDIT_URL = __JSKIT_UI_VIEW_PAGE_EDIT_URL__;
 const UI_VIEW_TITLE_FALLBACK_FIELD_KEY = __JSKIT_UI_VIEW_TITLE_FALLBACK_FIELD_KEY__;
 const UI_RECORD_CHANGED_EVENT = __JSKIT_UI_RECORD_CHANGED_EVENT__;
 

package/test/addFieldSubcommand.test.js

@@ -130,12 +130,16 @@ UI_EDIT_FORM_FIELDS.push({ key: "firstName", component: "text" });
     const editSource = await readFile(path.join(appRoot, editFile), "utf8");
     assert.match(
       editSource,
-      /<v-autocomplete[\s\S]*resolveLookupItems\("vetId", \{ selectedValue: formRuntime\.form\.vetId, selectedRecord: formRuntime\.addEdit\.resource\.data \}\)/
+      /<v-autocomplete[\s\S]*resolveLookupItems\('vetId', \{ selectedValue: formState\.vetId, selectedRecord: addEdit\.resource\.data \}\)/
     );
-    assert.match(editSource, /:items='resolveLookupItems\("vetId", \{ selectedValue: formRuntime\.form\.vetId, selectedRecord: formRuntime\.addEdit\.resource\.data \}\)'/);
-    assert.match(editSource, /:search='resolveLookupSearch\("vetId"\)'/);
-    assert.match(editSource, /@update:search='setLookupSearch\("vetId", \$event\)'/);
-    assert.match(editSource, /:loading='resolveLookupLoading\("vetId"\)'/);
+    assert.match(editSource, /:items="resolveLookupItems\('vetId', \{ selectedValue: formState\.vetId, selectedRecord: addEdit\.resource\.data \}\)"/);
+    assert.match(
+      editSource,
+      /\n {18}:items="resolveLookupItems\('vetId', \{ selectedValue: formState\.vetId, selectedRecord: addEdit\.resource\.data \}\)"\n {18}:search="resolveLookupSearch\('vetId'\)"\n {18}@update:search="setLookupSearch\('vetId', \$event\)"\n {18}item-title="label"\n {18}item-value="value"\n {18}no-filter/
+    );
+    assert.match(editSource, /:search="resolveLookupSearch\('vetId'\)"/);
+    assert.match(editSource, /@update:search="setLookupSearch\('vetId', \$event\)"/);
+    assert.match(editSource, /:loading="resolveLookupLoading\('vetId'\)"/);
     assert.match(editSource, /UI_EDIT_FORM_FIELDS\.push\(\{[\s\S]*"key": "vetId"/);
 
     const second = await runGeneratorSubcommand({
@@ -200,7 +204,7 @@ UI_EDIT_FORM_FIELDS.push({ key: "firstName", component: "text" });
     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 \}\)/
+      /<v-autocomplete[\s\S]*resolveLookupItems\('vetId', \{ selectedValue: formState\.vetId, selectedRecord: addEdit\.resource\.data \}\)/
     );
 
     const addEditFieldsSource = await readFile(path.join(appRoot, addEditFieldsFile), "utf8");
@@ -282,7 +286,7 @@ const UI_EDIT_FORM_FIELDS = [];
     });
 
     const addEditFormSource = await readFile(path.join(appRoot, addEditFormFile), "utf8");
-    assert.equal((addEditFormSource.match(/resolveLookupItems\("vetId"/g) || []).length, 2);
+    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"/);

package/test/buildTemplateContext.test.js

@@ -190,6 +190,82 @@ const resource = {
 export { resource };
 `;
 
+const SELECT_RESOURCE_SOURCE = `const recordSchema = {
+  type: "object",
+  properties: {
+    id: { type: "integer" },
+    type: { type: "string" }
+  },
+  additionalProperties: false
+};
+
+const bodySchema = {
+  type: "object",
+  properties: {
+    type: { type: "string", enum: ["dryer", "pallet racking", "freezer", "coolroom"] }
+  },
+  additionalProperties: false
+};
+
+const resource = {
+  namespace: "locations",
+  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: "type",
+      ui: {
+        formControl: "select",
+        options: [
+          { value: "dryer", label: "Dryer" },
+          { value: "pallet racking", label: "Pallet Racking" },
+          { value: "freezer", label: "Freezer" },
+          { value: "coolroom", label: "Coolroom" }
+        ]
+      }
+    }
+  ]
+};
+
+export { resource };
+`;
+
 const LOOKUP_RESOURCE_SOURCE = `const recordSchema = {
   type: "object",
   properties: {
@@ -325,11 +401,20 @@ test("buildUiTemplateContext derives CRUD placeholders from the explicit target-
     assert.match(context.__JSKIT_UI_LIST_HEADER_COLUMNS__, /First Name/);
     assert.match(context.__JSKIT_UI_LIST_ROW_COLUMNS__, /record\.firstName/);
     assert.match(context.__JSKIT_UI_VIEW_COLUMNS__, /view\.record\?\.firstName/);
-    assert.match(context.__JSKIT_UI_CREATE_FORM_COLUMNS__, /formRuntime\.form\.firstName/);
-    assert.match(context.__JSKIT_UI_EDIT_FORM_COLUMNS__, /formRuntime\.form\.email/);
+    assert.match(context.__JSKIT_UI_CREATE_FORM_COLUMNS__, /formState\.firstName/);
+    assert.match(context.__JSKIT_UI_EDIT_FORM_COLUMNS__, /formState\.email/);
     assert.equal(context.__JSKIT_UI_RECORD_CHANGED_EVENT__, "\"customers.record.changed\"");
     assert.equal(context.__JSKIT_UI_LIST_RECORD_ID_EXPR__, "item.id");
     assert.equal(context.__JSKIT_UI_VIEW_TITLE_FALLBACK_FIELD_KEY__, "\"firstName\"");
+    assert.equal(context.__JSKIT_UI_LIST_PAGE_VIEW_URL__, "\"./:customerId\"");
+    assert.equal(context.__JSKIT_UI_LIST_PAGE_EDIT_URL__, "\"./:customerId/edit\"");
+    assert.equal(context.__JSKIT_UI_LIST_PAGE_NEW_URL__, "\"./new\"");
+    assert.equal(context.__JSKIT_UI_NEW_PAGE_LIST_URL__, "\"..\"");
+    assert.equal(context.__JSKIT_UI_NEW_PAGE_VIEW_URL__, "\"../:customerId\"");
+    assert.equal(context.__JSKIT_UI_EDIT_PAGE_LIST_URL__, "\"../..\"");
+    assert.equal(context.__JSKIT_UI_EDIT_PAGE_VIEW_URL__, "\"..\"");
+    assert.equal(context.__JSKIT_UI_VIEW_PAGE_LIST_URL__, "\"..\"");
+    assert.equal(context.__JSKIT_UI_VIEW_PAGE_EDIT_URL__, "\"./edit\"");
   });
 });
 
@@ -343,7 +428,7 @@ test("buildUiTemplateContext keeps non-nullable booleans as switches", async ()
     });
 
     assert.match(context.__JSKIT_UI_CREATE_FORM_COLUMNS__, /<v-switch/);
-    assert.match(context.__JSKIT_UI_CREATE_FORM_COLUMNS__, /formRuntime\.form\.vip/);
+    assert.match(context.__JSKIT_UI_CREATE_FORM_COLUMNS__, /formState\.vip/);
   });
 });
 
@@ -365,6 +450,76 @@ test("buildUiTemplateContext renders nullable booleans as tri-state selects by d
   });
 });
 
+test("buildUiTemplateContext omits lookup runtime placeholders when form fields do not include lookups", async () => {
+  await withTempApp(async (appRoot) => {
+    await writeResource(appRoot, RESOURCE_FILE, FULL_RESOURCE_SOURCE);
+
+    const context = await buildUiTemplateContext({
+      appRoot,
+      options: createOptions()
+    });
+
+    assert.equal(context.__JSKIT_UI_CREATE_LOOKUP_IMPORT_LINE__, "");
+    assert.equal(context.__JSKIT_UI_EDIT_LOOKUP_IMPORT_LINE__, "");
+    assert.equal(context.__JSKIT_UI_CREATE_LOOKUP_RUNTIME_SETUP__, "");
+    assert.equal(context.__JSKIT_UI_EDIT_LOOKUP_RUNTIME_SETUP__, "");
+    assert.equal(context.__JSKIT_UI_CREATE_LOOKUP_FORM_PROPS__, "");
+    assert.equal(context.__JSKIT_UI_EDIT_LOOKUP_FORM_PROPS__, "");
+  });
+});
+
+test("buildUiTemplateContext indents direct-page form columns without changing shared form columns", async () => {
+  await withTempApp(async (appRoot) => {
+    await writeResource(appRoot, RESOURCE_FILE, FULL_RESOURCE_SOURCE);
+
+    const context = await buildUiTemplateContext({
+      appRoot,
+      options: createOptions()
+    });
+
+    assert.match(context.__JSKIT_UI_CREATE_FORM_COLUMNS__, /^ {14}<v-col/m);
+    assert.match(context.__JSKIT_UI_EDIT_FORM_COLUMNS__, /^ {14}<v-col/m);
+    assert.match(context.__JSKIT_UI_CREATE_FORM_COLUMNS_DIRECT__, /^ {12}<v-col/m);
+    assert.match(context.__JSKIT_UI_EDIT_FORM_COLUMNS_DIRECT__, /^ {12}<v-col/m);
+  });
+});
+
+test("buildUiTemplateContext includes lookup runtime placeholders when form fields include lookups", async () => {
+  await withTempApp(async (appRoot) => {
+    await writeResource(appRoot, RESOURCE_FILE, LOOKUP_RESOURCE_SOURCE);
+
+    const context = await buildUiTemplateContext({
+      appRoot,
+      options: createOptions({
+        "display-fields": "serviceId"
+      })
+    });
+
+    assert.match(context.__JSKIT_UI_CREATE_LOOKUP_IMPORT_LINE__, /createCrudLookupFieldRuntime/);
+    assert.match(context.__JSKIT_UI_EDIT_LOOKUP_IMPORT_LINE__, /createCrudLookupFieldRuntime/);
+    assert.match(context.__JSKIT_UI_CREATE_LOOKUP_RUNTIME_SETUP__, /resolveLookupItems/);
+    assert.match(context.__JSKIT_UI_EDIT_LOOKUP_RUNTIME_SETUP__, /resolveLookupItems/);
+    assert.match(context.__JSKIT_UI_CREATE_LOOKUP_FORM_PROPS__, /resolve-lookup-items/);
+    assert.match(context.__JSKIT_UI_EDIT_LOOKUP_FORM_PROPS__, /resolve-lookup-items/);
+  });
+});
+
+test("buildUiTemplateContext escapes select option bindings safely for Vue attributes", async () => {
+  await withTempApp(async (appRoot) => {
+    await writeResource(appRoot, RESOURCE_FILE, SELECT_RESOURCE_SOURCE);
+
+    const context = await buildUiTemplateContext({
+      appRoot,
+      options: createOptions()
+    });
+
+    assert.match(
+      context.__JSKIT_UI_CREATE_FORM_COLUMNS__,
+      /:items="\[\{&quot;value&quot;:&quot;dryer&quot;,&quot;label&quot;:&quot;Dryer&quot;\},\{&quot;value&quot;:&quot;pallet racking&quot;,&quot;label&quot;:&quot;Pallet Racking&quot;\},\{&quot;value&quot;:&quot;freezer&quot;,&quot;label&quot;:&quot;Freezer&quot;\},\{&quot;value&quot;:&quot;coolroom&quot;,&quot;label&quot;:&quot;Coolroom&quot;\}\]"/
+    );
+  });
+});
+
 test("buildUiTemplateContext derives menu auth visibility from the target surface policy", async () => {
   await withTempApp(async (appRoot) => {
     await writeFile(