@open-mercato/ui 0.6.4-develop.4371.1.8f3030407e → 0.6.4

package/dist/backend/CrudForm.js

@@ -26,12 +26,12 @@ import {
   SelectValue
 } from "../primitives/select.js";
 import { flash } from "./FlashMessages.js";
-import dynamic from "next/dynamic";
 import { FormHeader } from "./forms/FormHeader.js";
 import { FormFooter } from "./forms/FormFooter.js";
 import { Button } from "../primitives/button.js";
 import { IconButton } from "../primitives/icon-button.js";
 import {
+  Check,
   Settings,
   Layers,
   Tag,
@@ -80,6 +80,8 @@ import { TimePicker } from "./inputs/TimePicker.js";
 import { DatePicker } from "./inputs/DatePicker.js";
 import { mapCrudServerErrorToFormErrors, parseServerMessage } from "./utils/serverErrors.js";
 import { withScopedApiRequestHeaders } from "./utils/apiCall.js";
+import { buildOptimisticLockHeader, extractOptimisticLockConflict } from "./utils/optimisticLock.js";
+import { surfaceRecordConflict } from "./conflicts/index.js";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../primitives/dialog.js";
 import { FieldDefinitionsManager } from "./custom-fields/FieldDefinitionsManager.js";
 import { useConfirmDialog } from "./confirm-dialog/index.js";
@@ -96,6 +98,7 @@ import { InjectedField } from "./injection/InjectedField.js";
 import { evaluateInjectedVisibility } from "./injection/visibility-utils.js";
 import { ComponentReplacementHandles } from "@open-mercato/shared/modules/widgets/component-registry";
 import { RichEditor } from "../primitives/rich-editor.js";
+import MarkdownField from "./inputs/MarkdownField.js";
 const EMPTY_OPTIONS = [];
 const SELECT_CLEAR_SENTINEL = "__crudform_select_clear__";
 const FOCUSABLE_SELECTOR = '[data-crud-focus-target], input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -170,6 +173,41 @@ function readByDotPath(source, path) {
   }
   return current;
 }
+const PROTO_POLLUTING_KEYS = /* @__PURE__ */ new Set(["__proto__", "prototype", "constructor"]);
+function isProtoPollutingKey(key) {
+  return PROTO_POLLUTING_KEYS.has(key);
+}
+function writeByDotPath(target, path, value) {
+  const segments = path.split(".").filter(Boolean);
+  if (segments.length === 0) return;
+  if (segments.some(isProtoPollutingKey)) return;
+  let current = target;
+  for (let index = 0; index < segments.length - 1; index++) {
+    const segment = segments[index];
+    const existing = current[segment];
+    const isSafeObject = !!existing && typeof existing === "object" && !Array.isArray(existing) && (Object.getPrototypeOf(existing) === Object.prototype || Object.getPrototypeOf(existing) === null);
+    if (!isSafeObject) {
+      const created = /* @__PURE__ */ Object.create(null);
+      current[segment] = created;
+      current = created;
+    } else {
+      current = existing;
+    }
+  }
+  const finalSegment = segments[segments.length - 1];
+  if (isProtoPollutingKey(finalSegment)) return;
+  current[finalSegment] = value;
+}
+function collapseDotPathFields(source, dotPathFieldIds) {
+  if (!dotPathFieldIds.size) return source;
+  let result = null;
+  for (const fieldId of dotPathFieldIds) {
+    if (!Object.prototype.hasOwnProperty.call(source, fieldId)) continue;
+    if (!result) result = { ...source };
+    writeByDotPath(result, fieldId, source[fieldId]);
+  }
+  return result ?? source;
+}
 function readInitialCustomFieldValue(source, key) {
   if (!source || !key) return void 0;
   const candidates = [`cf_${key}`, `cf:${key}`, key];
@@ -203,6 +241,29 @@ function serializeIssuePath(path) {
   }).filter((segment) => segment !== null);
   return segments.length > 0 ? segments.join(".") : null;
 }
+function normalizeDirtySnapshotValue(value) {
+  if (value === void 0 || value === null || value === "") return void 0;
+  if (Array.isArray(value)) {
+    const normalized2 = value.map((entry) => normalizeDirtySnapshotValue(entry)).filter((entry) => entry !== void 0);
+    return normalized2.length ? normalized2 : void 0;
+  }
+  if (typeof value !== "object") return value;
+  const prototype = Object.getPrototypeOf(value);
+  if (prototype !== Object.prototype && prototype !== null) return value;
+  const normalized = {};
+  const record = value;
+  for (const key of Object.keys(record).sort()) {
+    const nextValue = normalizeDirtySnapshotValue(record[key]);
+    if (nextValue !== void 0) normalized[key] = nextValue;
+  }
+  return Object.keys(normalized).length ? normalized : void 0;
+}
+function createDirtySnapshot(source) {
+  return JSON.stringify(normalizeDirtySnapshotValue(source) ?? {});
+}
+function createDirtyValueSnapshot(value) {
+  return JSON.stringify(normalizeDirtySnapshotValue(value) ?? null);
+}
 const FIELDSET_ICON_COMPONENTS = {
   layers: Layers,
   tag: Tag,
@@ -296,6 +357,8 @@ function CrudForm({
   onSubmit,
   onDelete,
   deleteVisible,
+  optimisticLockUpdatedAt,
+  disableOptimisticLock = false,
   twoColumn = false,
   title,
   backHref,
@@ -403,6 +466,16 @@ function CrudForm({
   }, [values]);
   const fallbackRecordId = recordId || (versionHistory?.resourceId === void 0 || versionHistory.resourceId === null ? void 0 : String(versionHistory.resourceId).trim() || void 0);
   const operation = recordId ? "update" : "create";
+  const resolvedOptimisticLockUpdatedAt = React.useMemo(() => {
+    if (disableOptimisticLock) return null;
+    if (optimisticLockUpdatedAt !== void 0) return optimisticLockUpdatedAt;
+    const source = initialValues;
+    const camel = source?.updatedAt;
+    if (typeof camel === "string" && camel.length > 0) return camel;
+    const snake = source?.updated_at;
+    if (typeof snake === "string" && snake.length > 0) return snake;
+    return null;
+  }, [disableOptimisticLock, optimisticLockUpdatedAt, initialValues]);
   const injectionContext = React.useMemo(() => ({
     formId,
     entityId: primaryEntityId,
@@ -443,7 +516,7 @@ function CrudForm({
       setHasUnsavedChanges(false);
       return;
     }
-    const currentSnapshot = JSON.stringify(values);
+    const currentSnapshot = createDirtySnapshot(values);
     const dirty = currentSnapshot !== snapshot;
     isDirtyRef.current = dirty;
     setHasUnsavedChanges(dirty);
@@ -484,7 +557,9 @@ function CrudForm({
   }, [clearSubmitNavigationBypass]);
   const clearDirtyState = React.useCallback((snapshotSource) => {
     const source = snapshotSource ?? valuesRef.current;
-    dirtyBaselineSnapshotRef.current = JSON.stringify(source);
+    dirtyBaselineSnapshotRef.current = createDirtySnapshot(source);
+    dirtyBaselineValuesRef.current = { ...source };
+    userEditedFieldIdsRef.current.clear();
     isDirtyRef.current = false;
     setHasUnsavedChanges(false);
   }, []);
@@ -523,7 +598,7 @@ function CrudForm({
       if (!target) return;
       if (shouldBypassUnsavedChangesGuardRef.current?.(target)) return;
       const baselineSnapshot = dirtyBaselineSnapshotRef.current;
-      if (baselineSnapshot && JSON.stringify(valuesRef.current) === baselineSnapshot) {
+      if (baselineSnapshot && createDirtySnapshot(valuesRef.current) === baselineSnapshot) {
         isDirtyRef.current = false;
         setHasUnsavedChanges(false);
         return;
@@ -552,7 +627,7 @@ function CrudForm({
         return original(data, unused, url);
       }
       const baselineSnapshot = dirtyBaselineSnapshotRef.current;
-      if (baselineSnapshot && JSON.stringify(valuesRef.current) === baselineSnapshot) {
+      if (baselineSnapshot && createDirtySnapshot(valuesRef.current) === baselineSnapshot) {
         isDirtyRef.current = false;
         setHasUnsavedChanges(false);
         return original(data, unused, url);
@@ -828,8 +903,13 @@ function CrudForm({
           return;
         }
       }
-      if (injectionRequestHeaders && Object.keys(injectionRequestHeaders).length > 0) {
-        await withScopedApiRequestHeaders(injectionRequestHeaders, async () => {
+      const optimisticLockHeader = buildOptimisticLockHeader(resolvedOptimisticLockUpdatedAt);
+      const mergedDeleteHeaders = {
+        ...injectionRequestHeaders ?? {},
+        ...optimisticLockHeader
+      };
+      if (Object.keys(mergedDeleteHeaders).length > 0) {
+        await withScopedApiRequestHeaders(mergedDeleteHeaders, async () => {
           await onDelete();
         });
       } else {
@@ -873,10 +953,18 @@ function CrudForm({
         }
       } catch {
       }
-      const message = err instanceof Error && err.message ? err.message : deleteErrorMessage;
-      try {
-        flash(message, "error");
-      } catch {
+      const optimisticLockConflict = extractOptimisticLockConflict(err);
+      if (optimisticLockConflict) {
+        try {
+          surfaceRecordConflict(err, t);
+        } catch {
+        }
+      } else {
+        const message = err instanceof Error && err.message ? err.message : deleteErrorMessage;
+        try {
+          flash(message, "error");
+        } catch {
+        }
       }
     } finally {
       deletingRef.current = false;
@@ -1237,6 +1325,19 @@ function CrudForm({
   const fieldById = React.useMemo(() => {
     return new globalThis.Map(allFields.map((f) => [f.id, f]));
   }, [allFields]);
+  const dotPathBaseFieldIds = React.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    const cfFieldIds = new Set(cfFields.map((field) => field.id));
+    for (const field of allFields) {
+      const fieldId = field.id;
+      if (!fieldId.includes(".")) continue;
+      if (injectedFieldIdSet.has(fieldId)) continue;
+      if (fieldId.startsWith("cf_") || fieldId.startsWith("cf:")) continue;
+      if (cfFieldIds.has(fieldId)) continue;
+      ids.add(fieldId);
+    }
+    return ids;
+  }, [allFields, injectedFieldIdSet, cfFields]);
   const validateFieldOnBlur = React.useCallback(async (fieldId, sourceValues) => {
     if (formReadOnly) return;
     const field = fieldById.get(fieldId);
@@ -1287,7 +1388,7 @@ function CrudForm({
       for (const injectedId of injectedFieldIdSet) {
         delete coreValues[injectedId];
       }
-      const result = schema.safeParse(coreValues);
+      const result = schema.safeParse(collapseDotPathFields(coreValues, dotPathBaseFieldIds));
       if (!result.success) {
         const schemaFieldErrors = {};
         result.error.issues.forEach((issue) => {
@@ -1316,6 +1417,7 @@ function CrudForm({
   }, [
     cfDefinitions,
     customEntity,
+    dotPathBaseFieldIds,
     fieldById,
     formReadOnly,
     hiddenBaseFieldIds,
@@ -1554,14 +1656,38 @@ function CrudForm({
       lastErrorFieldRef.current = fieldId;
     }
   }, [errors, formId]);
+  const updateEditedFieldMarker = React.useCallback((id, nextValue, baselineSource = dirtyBaselineValuesRef.current) => {
+    if (baselineSource && createDirtyValueSnapshot(baselineSource[id]) === createDirtyValueSnapshot(nextValue)) {
+      userEditedFieldIdsRef.current.delete(id);
+      return;
+    }
+    userEditedFieldIdsRef.current.add(id);
+  }, []);
   const setValue = React.useCallback((id, nextValue) => {
     let nextData = null;
+    let nextDirty = null;
+    const currentValue = valuesRef.current[id];
+    if (!Object.is(currentValue, nextValue)) {
+      updateEditedFieldMarker(id, nextValue);
+    }
     setValues((prev) => {
       if (Object.is(prev[id], nextValue)) return prev;
+      const baselineSource = dirtyBaselineValuesRef.current ?? prev;
+      updateEditedFieldMarker(id, nextValue, baselineSource);
       nextData = { ...prev, [id]: nextValue };
       valuesRef.current = nextData;
+      if (!(embedded && !trackDirtyWhenEmbedded)) {
+        const baseline = dirtyBaselineSnapshotRef.current ?? createDirtySnapshot(prev);
+        dirtyBaselineSnapshotRef.current = baseline;
+        dirtyBaselineValuesRef.current = baselineSource;
+        nextDirty = createDirtySnapshot(nextData) !== baseline;
+      }
       return nextData;
     });
+    if (nextDirty !== null) {
+      isDirtyRef.current = nextDirty;
+      setHasUnsavedChanges(nextDirty);
+    }
     const clearedMessages = [];
     setErrors((prev) => {
       if (!Object.keys(prev).length) return prev;
@@ -1621,7 +1747,7 @@ function CrudForm({
     }).catch((err) => {
       console.error("[CrudForm] Error in onFieldChange:", err);
     });
-  }, [extendedInjectionEventsEnabled, flash, t, translateValidationMessage, triggerInjectionEvent]);
+  }, [embedded, extendedInjectionEventsEnabled, flash, t, trackDirtyWhenEmbedded, translateValidationMessage, triggerInjectionEvent, updateEditedFieldMarker]);
   const onBlurRequest = React.useCallback((fieldId) => {
     void validateFieldOnBlur(fieldId);
   }, [validateFieldOnBlur]);
@@ -1645,19 +1771,31 @@ function CrudForm({
   );
   const appliedInitialValuesSnapshotRef = React.useRef(void 0);
   const dirtyBaselineSnapshotRef = React.useRef(void 0);
+  const dirtyBaselineValuesRef = React.useRef(void 0);
+  const userEditedFieldIdsRef = React.useRef(/* @__PURE__ */ new Set());
   React.useLayoutEffect(() => {
     if (!initialValues) return;
     const snapshot = JSON.stringify({
       initialValues,
       injectedFieldIds: injectedFieldDefinitions.map((definition) => definition.id),
-      customFieldMappings: cfDefinitions.map((definition) => definition.key)
+      customFieldMappings: cfDefinitions.map((definition) => definition.key),
+      dotPathBaseFieldIds: Array.from(dotPathBaseFieldIds)
     });
     if (appliedInitialValuesSnapshotRef.current === snapshot) return;
     appliedInitialValuesSnapshotRef.current = snapshot;
     const initialRecord = initialValues;
     let mergedValues = null;
+    let hadUnsavedEdits = false;
     setValues((prev) => {
-      const merged = { ...prev, ...initialValues };
+      const priorBaseline = dirtyBaselineSnapshotRef.current;
+      const editedFieldIds = userEditedFieldIdsRef.current;
+      hadUnsavedEdits = editedFieldIds.size > 0 || priorBaseline !== void 0 && createDirtySnapshot(prev) !== priorBaseline;
+      const merged = { ...prev };
+      const mergedRecord = merged;
+      for (const [key, value] of Object.entries(initialValues)) {
+        if (editedFieldIds.has(key)) continue;
+        mergedRecord[key] = value;
+      }
       for (const definition of injectedFieldDefinitions) {
         if (merged[definition.id] !== void 0) continue;
         const extracted = readByDotPath(initialRecord, definition.id);
@@ -1675,11 +1813,20 @@ function CrudForm({
           merged[targetId] = extracted;
         }
       }
+      for (const fieldId of dotPathBaseFieldIds) {
+        if (merged[fieldId] !== void 0) continue;
+        const extracted = readByDotPath(initialRecord, fieldId);
+        if (extracted !== void 0) {
+          ;
+          merged[fieldId] = extracted;
+        }
+      }
       mergedValues = merged;
       return mergedValues;
     });
-    if (mergedValues) {
-      dirtyBaselineSnapshotRef.current = JSON.stringify(mergedValues);
+    if (mergedValues && !hadUnsavedEdits) {
+      dirtyBaselineSnapshotRef.current = createDirtySnapshot(mergedValues);
+      dirtyBaselineValuesRef.current = { ...mergedValues };
     }
     if (!extendedInjectionEventsEnabled || !mergedValues) return;
     let cancelled = false;
@@ -1692,7 +1839,9 @@ function CrudForm({
         );
         const transformed = result.data;
         if (cancelled || !transformed) return;
-        dirtyBaselineSnapshotRef.current = JSON.stringify(transformed);
+        if (isDirtyRef.current) return;
+        dirtyBaselineSnapshotRef.current = createDirtySnapshot(transformed);
+        dirtyBaselineValuesRef.current = { ...transformed };
         setValues(transformed);
       } catch (err) {
         console.error("[CrudForm] Error in transformDisplayData:", err);
@@ -1705,6 +1854,7 @@ function CrudForm({
   }, [
     cfDefinitions,
     customEntity,
+    dotPathBaseFieldIds,
     extendedInjectionEventsEnabled,
     initialValues,
     injectedFieldDefinitions,
@@ -1744,7 +1894,8 @@ function CrudForm({
       return mergedValues;
     });
     if (mergedValues) {
-      dirtyBaselineSnapshotRef.current = JSON.stringify(mergedValues);
+      dirtyBaselineSnapshotRef.current = createDirtySnapshot(mergedValues);
+      dirtyBaselineValuesRef.current = { ...mergedValues };
     }
   }, [isLoading, initialValuesHasId, cfDefinitions, customEntity]);
   const markFormAsClean = React.useCallback((snapshotSource) => {
@@ -1861,7 +2012,7 @@ function CrudForm({
       }
       let parsedValues;
       if (schema) {
-        const res = schema.safeParse(coreValues);
+        const res = schema.safeParse(collapseDotPathFields(coreValues, dotPathBaseFieldIds));
         if (!res.success) {
           const fieldErrors = {};
           res.error.issues.forEach((issue) => {
@@ -1891,7 +2042,7 @@ function CrudForm({
             for (const injectedId of injectedFieldIdSet) {
               delete projectedCoreValues[injectedId];
             }
-            coreSubmitValues = schema ? schema.parse(projectedCoreValues) : projectedCoreValues;
+            coreSubmitValues = schema ? schema.parse(collapseDotPathFields(projectedCoreValues, dotPathBaseFieldIds)) : projectedCoreValues;
             if (result.applyToForm) {
               setValues(result.data);
             }
@@ -1962,8 +2113,13 @@ function CrudForm({
       }
       try {
         submitNavigationBypassRef.current = true;
-        if (injectionRequestHeaders && Object.keys(injectionRequestHeaders).length > 0) {
-          await withScopedApiRequestHeaders(injectionRequestHeaders, async () => {
+        const optimisticLockHeader = buildOptimisticLockHeader(resolvedOptimisticLockUpdatedAt);
+        const mergedSubmitHeaders = {
+          ...injectionRequestHeaders ?? {},
+          ...optimisticLockHeader
+        };
+        if (Object.keys(mergedSubmitHeaders).length > 0) {
+          await withScopedApiRequestHeaders(mergedSubmitHeaders, async () => {
             await onSubmit?.(coreSubmitValues, submitContext);
           });
         } else {
@@ -2014,7 +2170,8 @@ function CrudForm({
             console.debug("[crud-form] Submission failed with field errors", transformedErrors);
           }
         }
-        let displayMessage = typeof helperMessage === "string" && helperMessage.trim() ? helperMessage.trim() : "";
+        const optimisticLockConflict = extractOptimisticLockConflict(err);
+        let displayMessage = optimisticLockConflict ? t("ui.forms.flash.recordModified", "This record was modified by someone else. Refresh and try again.") : typeof helperMessage === "string" && helperMessage.trim() ? helperMessage.trim() : "";
         if (hasFieldErrors) {
           const lowered = displayMessage.toLowerCase();
           const highlightedLower = highlightedMessage.toLowerCase();
@@ -2029,7 +2186,12 @@ function CrudForm({
           displayMessage = hasFieldErrors ? highlightedMessage : saveErrorMessage;
         }
         displayMessage = parseServerMessage(displayMessage);
-        if (!hasFieldErrors) {
+        if (optimisticLockConflict) {
+          try {
+            surfaceRecordConflict(err, t);
+          } catch {
+          }
+        } else if (!hasFieldErrors) {
           flash(displayMessage, "error");
         }
         setFormError(displayMessage);
@@ -2093,8 +2255,8 @@ function CrudForm({
       if (!("type" in f) || f.type === "custom") continue;
       const builtin = f;
       const staticOptions = builtin.options ?? EMPTY_OPTIONS;
-      const dynamic2 = dynamicOptions[f.id];
-      if (dynamic2 && dynamic2.length) {
+      const dynamic = dynamicOptions[f.id];
+      if (dynamic && dynamic.length) {
         const merged = [];
         const seen = /* @__PURE__ */ new Set();
         for (const opt of staticOptions) {
@@ -2102,7 +2264,7 @@ function CrudForm({
           seen.add(opt.value);
           merged.push(opt);
         }
-        for (const opt of dynamic2) {
+        for (const opt of dynamic) {
           if (seen.has(opt.value)) continue;
           seen.add(opt.value);
           merged.push(opt);
@@ -2110,8 +2272,8 @@ function CrudForm({
         map.set(f.id, merged);
       } else if (staticOptions.length) {
         map.set(f.id, staticOptions);
-      } else if (dynamic2) {
-        map.set(f.id, dynamic2);
+      } else if (dynamic) {
+        map.set(f.id, dynamic);
       }
     }
     return map;
@@ -2916,58 +3078,8 @@ function TextAreaInput({
     }
   );
 }
-const MDEditor = dynamic(async () => {
-  const mod = await import("@uiw/react-md-editor");
-  return mod.default;
-}, { ssr: false });
-let markdownPreviewOptionsPromise = null;
-async function loadMarkdownPreviewOptions() {
-  if (!markdownPreviewOptionsPromise) {
-    markdownPreviewOptionsPromise = import("remark-gfm").then((mod) => ({ remarkPlugins: [mod.default ?? mod] })).catch(() => ({}));
-  }
-  return markdownPreviewOptionsPromise;
-}
-const EMPTY_PREVIEW_OPTIONS = {};
 const MarkdownEditor = React.memo(function MarkdownEditor2({ value = "", onChange }) {
-  const containerRef = React.useRef(null);
-  const [local, setLocal] = React.useState(value);
-  const [previewOptions, setPreviewOptions] = React.useState(EMPTY_PREVIEW_OPTIONS);
-  const typingRef = React.useRef(false);
-  React.useEffect(() => {
-    if (!typingRef.current) setLocal(value);
-  }, [value]);
-  React.useEffect(() => {
-    let mounted = true;
-    void loadMarkdownPreviewOptions().then((resolved) => {
-      if (!mounted) return;
-      setPreviewOptions(resolved);
-    });
-    return () => {
-      mounted = false;
-    };
-  }, []);
-  const handleChange = React.useCallback((v) => {
-    typingRef.current = true;
-    setLocal(v ?? "");
-  }, []);
-  const commit = React.useCallback(() => {
-    if (!typingRef.current) return;
-    typingRef.current = false;
-    onChange(local);
-    requestAnimationFrame(() => {
-      const ta = containerRef.current?.querySelector("textarea");
-      ta?.focus();
-    });
-  }, [local, onChange]);
-  return /* @__PURE__ */ jsx("div", { ref: containerRef, "data-color-mode": "light", className: "w-full", onBlur: () => commit(), children: /* @__PURE__ */ jsx(
-    MDEditor,
-    {
-      value: local,
-      height: 220,
-      onChange: handleChange,
-      previewOptions
-    }
-  ) });
+  return /* @__PURE__ */ jsx(MarkdownField, { value, onChange });
 }, (prev, next) => prev.value === next.value);
 const HtmlRichEditorField = React.memo(function HtmlRichEditorField2({ value = "", onChange }) {
   const t = useT();
@@ -3111,12 +3223,20 @@ const ListboxMultiSelect = React.memo(function ListboxMultiSelect2({
         return /* @__PURE__ */ jsx(
           Button,
           {
+            type: "button",
             variant: "ghost",
             size: "sm",
             onClick: () => toggle(opt.value),
             className: `w-full justify-start rounded-none font-normal px-3 py-2 ${isSel ? "bg-muted" : ""}`,
             children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Checkbox, { checked: isSel, disabled: true, tabIndex: -1, className: "pointer-events-none" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: `inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors ${isSel ? "border-accent-indigo bg-accent-indigo text-accent-indigo-foreground" : "border-input bg-background"}`,
+                  children: isSel ? /* @__PURE__ */ jsx(Check, { className: "size-3.5", "aria-hidden": "true" }) : null
+                }
+              ),
               /* @__PURE__ */ jsx("span", { children: opt.label })
             ] })
           },
@@ -3165,6 +3285,12 @@ const FieldControl = React.memo(
     const placeholder = builtin?.placeholder;
     const rootClassName = wrapperClassName ? `space-y-1 ${wrapperClassName}` : "space-y-1";
     const validateOnWrapperBlur = supportsWrapperBlurValidation(field);
+    const singleSelectValue = Array.isArray(value) ? String(value[0] ?? "") : value == null ? "" : String(value);
+    const singleSelectOptionsKey = React.useMemo(
+      () => options.map((opt) => `${opt.value}:${opt.label}`).join("\0"),
+      [options]
+    );
+    const singleSelectLabel = singleSelectValue ? options.find((option) => option.value === singleSelectValue)?.label : void 0;
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -3350,7 +3476,7 @@ const FieldControl = React.memo(
           field.type === "select" && !builtin?.multiple && /* @__PURE__ */ jsxs(
             Select,
             {
-              value: Array.isArray(value) ? String(value[0] ?? "") : value == null ? "" : String(value),
+              value: singleSelectValue,
               onValueChange: (next) => {
                 if (!next || next === SELECT_CLEAR_SENTINEL) {
                   const isCustomField = field.id.startsWith("cf_") || field.id.startsWith("cf:");
@@ -3361,13 +3487,14 @@ const FieldControl = React.memo(
               },
               disabled,
               children: [
-                /* @__PURE__ */ jsx(SelectTrigger, { "data-crud-focus-target": "", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("ui.forms.select.emptyOption", "\u2014") }) }),
+                /* @__PURE__ */ jsx(SelectTrigger, { "data-crud-focus-target": "", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("ui.forms.select.emptyOption", "\u2014"), children: singleSelectLabel }) }),
                 /* @__PURE__ */ jsxs(SelectContent, { children: [
                   !field.required && value != null && value !== "" && /* @__PURE__ */ jsx(SelectItem, { value: SELECT_CLEAR_SENTINEL, children: t("ui.forms.select.clearOption", "\u2014 Clear \u2014") }),
                   options.filter((opt) => opt.value !== "").map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))
                 ] })
               ]
-            }
+            },
+            `${field.id}:${singleSelectValue}:${singleSelectOptionsKey}`
           ),
           field.type === "select" && builtin?.multiple && builtin.listbox === true && /* @__PURE__ */ jsx(
             ListboxMultiSelect,