@freighttech/ui 0.13.18

package/dist/backend/CrudForm.js

@@ -0,0 +1,3163 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { DataLoader } from "../primitives/DataLoader.js";
+import { flash } from "./FlashMessages.js";
+import dynamic from "next/dynamic";
+import remarkGfm from "remark-gfm";
+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 {
+  Settings,
+  Layers,
+  Tag,
+  Sparkles,
+  Package,
+  Shirt,
+  Grid,
+  ShoppingBag,
+  ShoppingCart,
+  Store,
+  Users,
+  Briefcase,
+  Building,
+  BookOpen,
+  Bookmark,
+  Camera,
+  Car,
+  Clock,
+  Cloud,
+  Compass,
+  CreditCard,
+  Database,
+  Flame,
+  Gift,
+  Globe,
+  Heart,
+  Info,
+  Key,
+  Map as MapIcon,
+  Palette,
+  Shield,
+  Star,
+  Truck,
+  Zap,
+  Coins
+} from "lucide-react";
+import { loadGeneratedFieldRegistrations } from "./fields/registry.js";
+import { buildFormFieldFromCustomFieldDef } from "./utils/customFieldForms.js";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { TagsInput } from "./inputs/TagsInput.js";
+import { ComboboxInput } from "./inputs/ComboboxInput.js";
+import { format, parseISO } from "date-fns";
+import { DateTimePicker } from "./inputs/DateTimePicker.js";
+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 { Dialog, DialogContent, DialogHeader, DialogTitle } from "../primitives/dialog.js";
+import { FieldDefinitionsManager } from "./custom-fields/FieldDefinitionsManager.js";
+import { useConfirmDialog } from "./confirm-dialog/index.js";
+import { useInjectionSpotEvents, InjectionSpot, useInjectionWidgets } from "./injection/InjectionSpot.js";
+import { dispatchBackendMutationError } from "./injection/mutationEvents.js";
+import { VersionHistoryAction } from "./version-history/VersionHistoryAction.js";
+import { parseBooleanWithDefault } from "@open-mercato/shared/lib/boolean";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useInjectionDataWidgets } from "./injection/useInjectionDataWidgets.js";
+import { InjectedField } from "./injection/InjectedField.js";
+import { evaluateInjectedVisibility } from "./injection/visibility-utils.js";
+import { ComponentReplacementHandles } from "@open-mercato/shared/modules/widgets/component-registry";
+import { sanitizeHtmlRichText, sanitizeRichTextHref, sanitizeRichTextPasteContent } from "./utils/richTextSanitizer.js";
+const EMPTY_OPTIONS = [];
+const FOCUSABLE_SELECTOR = '[data-crud-focus-target], input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const CRUDFORM_EXTENDED_EVENTS_ENABLED = parseBooleanWithDefault(
+  process.env.NEXT_PUBLIC_OM_CRUDFORM_EXTENDED_EVENTS_ENABLED,
+  true
+);
+function resolveInternalNavigationTarget(target) {
+  if (typeof window === "undefined" || target == null) return null;
+  try {
+    const url = target instanceof URL ? target : new URL(target, window.location.origin);
+    if (url.origin !== window.location.origin) return null;
+    const currentPath = `${window.location.pathname}${window.location.search}`;
+    const nextPath = `${url.pathname}${url.search}`;
+    if (nextPath === currentPath) return null;
+    return `${url.pathname}${url.search}${url.hash}`;
+  } catch {
+    return null;
+  }
+}
+function buildResolvedEntityIdsKey(entityId, entityIds) {
+  const dedup = /* @__PURE__ */ new Set();
+  const list = [];
+  if (Array.isArray(entityIds) && entityIds.length) {
+    entityIds.forEach((id) => {
+      const trimmed = typeof id === "string" ? id.trim() : "";
+      if (!trimmed || dedup.has(trimmed)) return;
+      dedup.add(trimmed);
+      list.push(trimmed);
+    });
+  } else if (typeof entityId === "string" && entityId.trim().length > 0) {
+    list.push(entityId.trim());
+  }
+  return list.join("\0");
+}
+function readByDotPath(source, path) {
+  if (!source || !path) return void 0;
+  if (Object.prototype.hasOwnProperty.call(source, path)) return source[path];
+  const segments = path.split(".").filter(Boolean);
+  let current = source;
+  for (const segment of segments) {
+    if (!current || typeof current !== "object" || Array.isArray(current)) return void 0;
+    current = current[segment];
+  }
+  return current;
+}
+function serializeIssuePath(path) {
+  if (!Array.isArray(path) || path.length === 0) return null;
+  const segments = path.map((segment) => {
+    if (typeof segment === "string" || typeof segment === "number") {
+      const normalized = String(segment).trim();
+      return normalized.length > 0 ? normalized : null;
+    }
+    return null;
+  }).filter((segment) => segment !== null);
+  return segments.length > 0 ? segments.join(".") : null;
+}
+const FIELDSET_ICON_COMPONENTS = {
+  layers: Layers,
+  tag: Tag,
+  sparkles: Sparkles,
+  package: Package,
+  shirt: Shirt,
+  grid: Grid,
+  shoppingBag: ShoppingBag,
+  shoppingCart: ShoppingCart,
+  store: Store,
+  users: Users,
+  briefcase: Briefcase,
+  building: Building,
+  bookOpen: BookOpen,
+  bookmark: Bookmark,
+  camera: Camera,
+  car: Car,
+  clock: Clock,
+  cloud: Cloud,
+  compass: Compass,
+  creditCard: CreditCard,
+  database: Database,
+  flame: Flame,
+  gift: Gift,
+  globe: Globe,
+  heart: Heart,
+  key: Key,
+  map: MapIcon,
+  palette: Palette,
+  shield: Shield,
+  star: Star,
+  truck: Truck,
+  zap: Zap,
+  coins: Coins
+};
+class FieldDefinitionsManagerErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-3 p-6 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("p", { children: this.props.unavailableMessage }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: this.props.onClose, children: "Close" })
+      ] });
+    }
+    return this.props.children;
+  }
+}
+function CrudForm({
+  schema,
+  fields,
+  initialValues,
+  submitLabel,
+  submitIcon,
+  formId: providedFormId,
+  customFieldsLoadingMessage,
+  cancelHref,
+  successRedirect,
+  deleteRedirect,
+  onSubmit,
+  onDelete,
+  deleteVisible,
+  twoColumn = false,
+  title,
+  backHref,
+  entityId,
+  entityIds,
+  groups,
+  isLoading = false,
+  loadingMessage,
+  customEntity = false,
+  embedded = false,
+  hideFooterActions = false,
+  extraActions,
+  versionHistory,
+  contentHeader,
+  readOnly = false,
+  readOnlyOverlay,
+  customFieldsetBindings,
+  injectionSpotId,
+  replacementHandle
+}) {
+  React.useEffect(() => {
+    loadGeneratedFieldRegistrations().catch(() => {
+    });
+  }, []);
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
+  const router = useRouter();
+  const t = useT();
+  const resolvedSubmitLabel = submitLabel ?? t("ui.forms.actions.save");
+  const resolvedLoadingMessage = loadingMessage ?? t("ui.forms.loading");
+  const resolvedCustomFieldsLoadingMessage = customFieldsLoadingMessage ?? resolvedLoadingMessage;
+  const cancelLabel = t("ui.forms.actions.cancel");
+  const deleteLabel = t("ui.forms.actions.delete");
+  const savingLabel = t("ui.forms.status.saving");
+  const backLabel = t("ui.navigation.back");
+  const customFieldsLabel = t("entities.customFields.title");
+  const fieldsetSelectorLabel = t("entities.customFields.fieldsetSelectorLabel", "Fieldset");
+  const emptyFieldsetMessage = t("entities.customFields.emptyFieldset", "No fields defined for this fieldset.");
+  const defaultFieldsetLabel = t("entities.customFields.defaultFieldset", "Default");
+  const manageFieldsetLabel = t("entities.customFields.manageFieldset", "Manage fields");
+  const fieldsetDialogTitle = t("entities.customFields.manageDialogTitle", "Edit custom fields");
+  const fieldsetDialogUnavailable = t("entities.customFields.manageDialogUnavailable", "Field definitions page is unavailable.");
+  const hasVersionHistory = Boolean(versionHistory?.resourceKind);
+  const deleteConfirmMessage = hasVersionHistory ? t("ui.forms.confirmDeleteWithUndo", "Delete this record? You can restore it using version history.") : t("ui.forms.confirmDelete");
+  const deleteSuccessMessage = t("ui.forms.flash.deleteSuccess");
+  const deleteErrorMessage = t("ui.forms.flash.deleteError");
+  const saveErrorMessage = t("ui.forms.flash.saveError");
+  const internalFormId = React.useId();
+  const formId = providedFormId ?? internalFormId;
+  const formReadOnly = Boolean(readOnly);
+  const [values, setValues] = React.useState(
+    () => ({ ...initialValues ?? {} })
+  );
+  const valuesRef = React.useRef(values);
+  const [errors, setErrors] = React.useState({});
+  const [pending, setPending] = React.useState(false);
+  const [formError, setFormError] = React.useState(null);
+  const [dynamicOptions, setDynamicOptions] = React.useState({});
+  const [cfDefinitions, setCfDefinitions] = React.useState([]);
+  const [cfMetadata, setCfMetadata] = React.useState(null);
+  const [cfFieldsetSelections, setCfFieldsetSelections] = React.useState({});
+  const [isLoadingCustomFields, setIsLoadingCustomFields] = React.useState(false);
+  const [customFieldDefsVersion, setCustomFieldDefsVersion] = React.useState(0);
+  const [fieldsetEditorTarget, setFieldsetEditorTarget] = React.useState(null);
+  const [isInDialog, setIsInDialog] = React.useState(false);
+  const rootRef = React.useRef(null);
+  const fieldsetManagerRef = React.useRef(null);
+  const resolvedEntityIdsKey = React.useMemo(() => buildResolvedEntityIdsKey(entityId, entityIds), [entityId, entityIds]);
+  const resolvedEntityIds = React.useMemo(
+    () => resolvedEntityIdsKey ? resolvedEntityIdsKey.split("\0") : [],
+    [resolvedEntityIdsKey]
+  );
+  const primaryEntityId = resolvedEntityIds.length ? resolvedEntityIds[0] : null;
+  const resolvedInjectionSpotId = React.useMemo(() => {
+    if (injectionSpotId) return injectionSpotId;
+    if (resolvedEntityIds.length) {
+      const normalized = resolvedEntityIds[0].replace(/[:]+/g, ".");
+      return `crud-form:${normalized}`;
+    }
+    return void 0;
+  }, [injectionSpotId, resolvedEntityIds]);
+  const resolvedReplacementHandle = React.useMemo(() => {
+    if (replacementHandle) return replacementHandle;
+    if (resolvedEntityIds.length) return ComponentReplacementHandles.crudForm(resolvedEntityIds[0].replace(/[:]+/g, "."));
+    return ComponentReplacementHandles.crudForm("unknown");
+  }, [replacementHandle, resolvedEntityIds]);
+  const headerInjectionSpotId = resolvedInjectionSpotId ? `${resolvedInjectionSpotId}:header` : void 0;
+  const recordId = React.useMemo(() => {
+    const raw = values.id;
+    if (typeof raw === "string") return raw;
+    if (typeof raw === "number") return String(raw);
+    return void 0;
+  }, [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 injectionContext = React.useMemo(() => ({
+    formId,
+    entityId: primaryEntityId,
+    resourceKind: versionHistory?.resourceKind,
+    resourceId: recordId ?? versionHistory?.resourceId,
+    recordId: fallbackRecordId,
+    isLoading,
+    pending,
+    operation
+  }), [formId, primaryEntityId, versionHistory?.resourceKind, versionHistory?.resourceId, recordId, fallbackRecordId, isLoading, pending, operation]);
+  const injectionContextRef = React.useRef(injectionContext);
+  React.useEffect(() => {
+    injectionContextRef.current = injectionContext;
+  }, [injectionContext]);
+  React.useEffect(() => {
+    valuesRef.current = values;
+  }, [values]);
+  const isDirtyRef = React.useRef(false);
+  const navigationPromptBypassRef = React.useRef(false);
+  const navigationConfirmPendingRef = React.useRef(false);
+  const submitNavigationBypassRef = React.useRef(false);
+  const submitNavigationBypassTimeoutRef = React.useRef(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);
+  const popStateRollbackRef = React.useRef(false);
+  React.useEffect(() => {
+    if (embedded) {
+      isDirtyRef.current = false;
+      setHasUnsavedChanges(false);
+      return;
+    }
+    const snapshot = dirtyBaselineSnapshotRef.current;
+    if (!snapshot) {
+      isDirtyRef.current = false;
+      setHasUnsavedChanges(false);
+      return;
+    }
+    const currentSnapshot = JSON.stringify(values);
+    const dirty = currentSnapshot !== snapshot;
+    isDirtyRef.current = dirty;
+    setHasUnsavedChanges(dirty);
+  }, [embedded, values]);
+  const allowNextNavigation = React.useCallback(() => {
+    navigationPromptBypassRef.current = true;
+    if (typeof window !== "undefined") {
+      window.setTimeout(() => {
+        navigationPromptBypassRef.current = false;
+      }, 0);
+    }
+  }, []);
+  const clearSubmitNavigationBypass = React.useCallback(() => {
+    submitNavigationBypassRef.current = false;
+    if (typeof window !== "undefined" && submitNavigationBypassTimeoutRef.current !== null) {
+      window.clearTimeout(submitNavigationBypassTimeoutRef.current);
+      submitNavigationBypassTimeoutRef.current = null;
+    }
+  }, []);
+  const keepSubmitNavigationBypassAlive = React.useCallback(() => {
+    if (typeof window === "undefined") return;
+    submitNavigationBypassRef.current = true;
+    if (submitNavigationBypassTimeoutRef.current !== null) {
+      window.clearTimeout(submitNavigationBypassTimeoutRef.current);
+    }
+    submitNavigationBypassTimeoutRef.current = window.setTimeout(() => {
+      submitNavigationBypassRef.current = false;
+      submitNavigationBypassTimeoutRef.current = null;
+    }, 1500);
+  }, []);
+  React.useEffect(() => {
+    return () => {
+      clearSubmitNavigationBypass();
+    };
+  }, [clearSubmitNavigationBypass]);
+  const clearDirtyState = React.useCallback((snapshotSource) => {
+    const source = snapshotSource ?? valuesRef.current;
+    dirtyBaselineSnapshotRef.current = JSON.stringify(source);
+    isDirtyRef.current = false;
+    setHasUnsavedChanges(false);
+  }, []);
+  const confirmUnsavedChanges = React.useCallback(async () => {
+    if (!isDirtyRef.current || typeof window === "undefined") return true;
+    if (navigationPromptBypassRef.current || submitNavigationBypassRef.current) return true;
+    if (navigationConfirmPendingRef.current) return false;
+    navigationConfirmPendingRef.current = true;
+    try {
+      const confirmed = await confirm({
+        title: t("ui.forms.confirmUnsavedChanges", "You have unsaved changes. Are you sure you want to leave?")
+      });
+      if (confirmed) allowNextNavigation();
+      return confirmed;
+    } finally {
+      navigationConfirmPendingRef.current = false;
+    }
+  }, [allowNextNavigation, confirm, t]);
+  React.useEffect(() => {
+    if (embedded || !hasUnsavedChanges) return;
+    const beforeUnloadHandler = (event) => {
+      if (!isDirtyRef.current) return;
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", beforeUnloadHandler);
+    const clickHandler = (event) => {
+      if (event.defaultPrevented) return;
+      if (!isDirtyRef.current) return;
+      const anchor = event.target?.closest?.("a[href]");
+      if (!anchor) return;
+      const href = anchor.getAttribute("href");
+      if (!href || href.startsWith("#") || href.startsWith("mailto:") || href.startsWith("tel:")) return;
+      if (anchor.target === "_blank" || event.metaKey || event.ctrlKey || event.shiftKey) return;
+      const target = resolveInternalNavigationTarget(href);
+      if (!target) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (navigationConfirmPendingRef.current) return;
+      void confirmUnsavedChanges().then((confirmed) => {
+        if (!confirmed) return;
+        clearDirtyState();
+        router.push(target);
+      });
+    };
+    document.addEventListener("click", clickHandler, true);
+    const originalPushState = window.history.pushState.bind(window.history);
+    const originalReplaceState = window.history.replaceState.bind(window.history);
+    const createHistoryInterceptor = (original) => ((data, unused, url) => {
+      const target = resolveInternalNavigationTarget(url ?? null);
+      if (!target || navigationPromptBypassRef.current || submitNavigationBypassRef.current) {
+        return original(data, unused, url);
+      }
+      if (navigationConfirmPendingRef.current) {
+        return void 0;
+      }
+      void confirmUnsavedChanges().then((confirmed) => {
+        if (!confirmed) return;
+        clearDirtyState();
+        original(data, unused, url);
+      });
+      return void 0;
+    });
+    const popStateHandler = () => {
+      if (popStateRollbackRef.current) {
+        popStateRollbackRef.current = false;
+        return;
+      }
+      if (!isDirtyRef.current || navigationPromptBypassRef.current || submitNavigationBypassRef.current) return;
+      popStateRollbackRef.current = true;
+      window.history.go(1);
+      if (navigationConfirmPendingRef.current) return;
+      void confirmUnsavedChanges().then((confirmed) => {
+        if (!confirmed) return;
+        clearDirtyState();
+        allowNextNavigation();
+        window.history.back();
+      });
+    };
+    window.history.pushState = createHistoryInterceptor(originalPushState);
+    window.history.replaceState = createHistoryInterceptor(originalReplaceState);
+    window.addEventListener("popstate", popStateHandler);
+    return () => {
+      window.removeEventListener("beforeunload", beforeUnloadHandler);
+      document.removeEventListener("click", clickHandler, true);
+      window.removeEventListener("popstate", popStateHandler);
+      window.history.pushState = originalPushState;
+      window.history.replaceState = originalReplaceState;
+    };
+  }, [allowNextNavigation, clearDirtyState, confirmUnsavedChanges, embedded, hasUnsavedChanges, router]);
+  const { widgets: injectionWidgets } = useInjectionWidgets(resolvedInjectionSpotId, {
+    context: injectionContext,
+    triggerOnLoad: true
+  });
+  const { widgets: injectedFieldWidgets } = useInjectionDataWidgets(
+    resolvedInjectionSpotId ? `${resolvedInjectionSpotId}:fields` : "__disabled__:fields"
+  );
+  const { triggerEvent: triggerInjectionEvent } = useInjectionSpotEvents(resolvedInjectionSpotId ?? "", injectionWidgets);
+  const extendedInjectionEventsEnabled = CRUDFORM_EXTENDED_EVENTS_ENABLED && Boolean(resolvedInjectionSpotId);
+  const transformValidationErrors = React.useCallback(
+    async (fieldErrors) => {
+      if (!extendedInjectionEventsEnabled || !Object.keys(fieldErrors).length) return fieldErrors;
+      try {
+        const result = await triggerInjectionEvent(
+          "transformValidation",
+          fieldErrors,
+          injectionContextRef.current,
+          { originalData: valuesRef.current }
+        );
+        const transformed = result.data;
+        if (!transformed || typeof transformed !== "object" || Array.isArray(transformed)) return fieldErrors;
+        return Object.fromEntries(
+          Object.entries(transformed).map(([key, value]) => [key, String(value)])
+        );
+      } catch (err) {
+        console.error("[CrudForm] Error in transformValidation:", err);
+        return fieldErrors;
+      }
+    },
+    [extendedInjectionEventsEnabled, triggerInjectionEvent]
+  );
+  const translateValidationMessage = React.useCallback(
+    (message) => {
+      if (typeof message !== "string") return "";
+      const trimmed = message.trim();
+      if (!trimmed) return "";
+      return t(trimmed, trimmed);
+    },
+    [t]
+  );
+  const translateValidationErrors = React.useCallback(
+    (fieldErrors) => Object.fromEntries(
+      Object.entries(fieldErrors).map(([fieldId, message]) => [fieldId, translateValidationMessage(message)])
+    ),
+    [translateValidationMessage]
+  );
+  const mapDefsForValidation = React.useCallback(
+    (definitions) => definitions.map((definition) => ({
+      key: definition.key,
+      kind: definition.kind,
+      configJson: {
+        validation: Array.isArray(definition.validation) ? definition.validation : []
+      }
+    })),
+    []
+  );
+  const canNavigateTo = React.useCallback(
+    async (target) => {
+      if (!extendedInjectionEventsEnabled) return true;
+      try {
+        const result = await triggerInjectionEvent(
+          "onBeforeNavigate",
+          valuesRef.current,
+          injectionContextRef.current,
+          { target }
+        );
+        if (!result.ok) {
+          flash(result.message || t("ui.forms.flash.saveBlocked", "Save blocked by validation"), "error");
+          return false;
+        }
+        return true;
+      } catch (err) {
+        const message = err instanceof Error && err.message ? err.message : t("ui.forms.flash.saveBlocked", "Save blocked by validation");
+        flash(message, "error");
+        return false;
+      }
+    },
+    [extendedInjectionEventsEnabled, t, triggerInjectionEvent]
+  );
+  const navigateWithGuard = React.useCallback(
+    async (target) => {
+      if (!target) return;
+      const allowed = await canNavigateTo(target);
+      if (allowed) {
+        allowNextNavigation();
+        router.push(target);
+      }
+    },
+    [allowNextNavigation, canNavigateTo, router]
+  );
+  React.useEffect(() => {
+    if (!extendedInjectionEventsEnabled || typeof window === "undefined") return;
+    const handleEvent = (event) => {
+      const customEvent = event;
+      void triggerInjectionEvent("onAppEvent", valuesRef.current, injectionContextRef.current, {
+        appEvent: customEvent.detail
+      }).catch((err) => {
+        console.error("[CrudForm] Error in onAppEvent:", err);
+      });
+    };
+    window.addEventListener("om:event", handleEvent);
+    return () => {
+      window.removeEventListener("om:event", handleEvent);
+    };
+  }, [extendedInjectionEventsEnabled, triggerInjectionEvent]);
+  React.useEffect(() => {
+    if (!extendedInjectionEventsEnabled || typeof document === "undefined") return;
+    const emitVisibility = () => {
+      void triggerInjectionEvent("onVisibilityChange", valuesRef.current, injectionContextRef.current, {
+        visible: document.visibilityState === "visible"
+      }).catch((err) => {
+        console.error("[CrudForm] Error in onVisibilityChange:", err);
+      });
+    };
+    document.addEventListener("visibilitychange", emitVisibility);
+    emitVisibility();
+    return () => {
+      document.removeEventListener("visibilitychange", emitVisibility);
+    };
+  }, [extendedInjectionEventsEnabled, triggerInjectionEvent]);
+  React.useEffect(() => {
+    if (!extendedInjectionEventsEnabled) return;
+    const root = rootRef.current;
+    if (!root || typeof window === "undefined") return;
+    const handleClickCapture = (event) => {
+      if (event.defaultPrevented) return;
+      if (event.button !== 0) return;
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      const targetElement = event.target instanceof Element ? event.target : null;
+      const linkElement = targetElement?.closest("a[href]");
+      if (!(linkElement instanceof HTMLAnchorElement)) return;
+      if (!root.contains(linkElement)) return;
+      if (linkElement.target && linkElement.target !== "_self") return;
+      const rawHref = linkElement.getAttribute("href");
+      if (!rawHref || rawHref.startsWith("#")) return;
+      let target = rawHref;
+      if (rawHref.startsWith("http://") || rawHref.startsWith("https://")) {
+        try {
+          const parsed = new URL(rawHref);
+          if (parsed.origin !== window.location.origin) return;
+          target = `${parsed.pathname}${parsed.search}${parsed.hash}`;
+        } catch {
+          return;
+        }
+      } else if (!rawHref.startsWith("/")) {
+        return;
+      }
+      event.preventDefault();
+      void navigateWithGuard(target);
+    };
+    root.addEventListener("click", handleClickCapture, true);
+    return () => {
+      root.removeEventListener("click", handleClickCapture, true);
+    };
+  }, [extendedInjectionEventsEnabled, navigateWithGuard]);
+  React.useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    setIsInDialog(Boolean(root.closest("[data-dialog-content]")));
+  }, []);
+  const dialogFooterClass = isInDialog ? "sticky bottom-0 left-0 right-0 z-20 -mx-6 px-6 bg-card border-t border-border/70 py-2 sm:-mx-6 sm:px-6" : "";
+  const dialogFormPadding = isInDialog ? "pb-4" : "";
+  const buildCustomFieldsManageHref = React.useCallback(
+    (targetEntityId) => {
+      if (!targetEntityId) return null;
+      try {
+        const encoded = encodeURIComponent(targetEntityId);
+        return customEntity ? `/backend/entities/user/${encoded}` : `/backend/entities/system/${encoded}`;
+      } catch {
+        return null;
+      }
+    },
+    [customEntity]
+  );
+  const refreshCustomFieldDefinitions = React.useCallback(() => {
+    setCustomFieldDefsVersion((prev) => prev + 1);
+  }, []);
+  const handleDelete = React.useCallback(async () => {
+    if (!onDelete) return;
+    const deletePayload = values;
+    try {
+      const confirmed = await confirm({
+        title: deleteConfirmMessage,
+        variant: "destructive"
+      });
+      if (!confirmed) return;
+      let injectionRequestHeaders;
+      if (resolvedInjectionSpotId) {
+        try {
+          const result = await triggerInjectionEvent("onBeforeDelete", deletePayload, injectionContext);
+          if (!result.ok) {
+            try {
+              if (typeof window !== "undefined") {
+                dispatchBackendMutationError({
+                  contextId: formId,
+                  formId,
+                  error: result.details ?? result
+                });
+                window.dispatchEvent(new CustomEvent("om:crud-save-error", {
+                  detail: {
+                    formId,
+                    error: result.details ?? result
+                  }
+                }));
+              }
+            } catch {
+            }
+            if (result.fieldErrors && Object.keys(result.fieldErrors).length) {
+              const transformedErrors = await transformValidationErrors(result.fieldErrors);
+              setErrors(translateValidationErrors(transformedErrors));
+            }
+            const message = result.message || t("ui.forms.flash.saveBlocked", "Save blocked by validation");
+            flash(message, "error");
+            return;
+          }
+          injectionRequestHeaders = result.requestHeaders;
+        } catch (err) {
+          console.error("[CrudForm] Error in onBeforeDelete:", err);
+          flash(t("ui.forms.flash.saveBlocked", "Save blocked by validation"), "error");
+          return;
+        }
+      }
+      setPending(true);
+      if (resolvedInjectionSpotId) {
+        try {
+          await triggerInjectionEvent("onDelete", deletePayload, injectionContext);
+        } catch (err) {
+          console.error("[CrudForm] Error in onDelete:", err);
+          flash(t("ui.forms.flash.saveBlocked", "Save blocked by validation"), "error");
+          return;
+        }
+      }
+      if (injectionRequestHeaders && Object.keys(injectionRequestHeaders).length > 0) {
+        await withScopedApiRequestHeaders(injectionRequestHeaders, async () => {
+          await onDelete();
+        });
+      } else {
+        await onDelete();
+      }
+      if (resolvedInjectionSpotId) {
+        try {
+          await triggerInjectionEvent("onAfterDelete", deletePayload, injectionContext);
+        } catch (err) {
+          console.error("[CrudForm] Error in onAfterDelete:", err);
+        }
+      }
+      try {
+        flash(deleteSuccessMessage, "success");
+      } catch {
+      }
+      if (typeof deleteRedirect === "string" && deleteRedirect) {
+        await navigateWithGuard(deleteRedirect);
+      }
+    } catch (err) {
+      if (resolvedInjectionSpotId) {
+        try {
+          await triggerInjectionEvent("onDeleteError", deletePayload, injectionContext, { error: err });
+        } catch (hookError) {
+          console.error("[CrudForm] Error in onDeleteError:", hookError);
+        }
+      }
+      try {
+        if (typeof window !== "undefined") {
+          dispatchBackendMutationError({
+            contextId: formId,
+            formId,
+            error: err
+          });
+          window.dispatchEvent(new CustomEvent("om:crud-save-error", {
+            detail: {
+              formId,
+              error: err
+            }
+          }));
+        }
+      } catch {
+      }
+      const message = err instanceof Error && err.message ? err.message : deleteErrorMessage;
+      try {
+        flash(message, "error");
+      } catch {
+      }
+    } finally {
+      setPending(false);
+    }
+  }, [
+    confirm,
+    deleteConfirmMessage,
+    deleteErrorMessage,
+    deleteRedirect,
+    deleteSuccessMessage,
+    formId,
+    injectionContext,
+    onDelete,
+    resolvedInjectionSpotId,
+    navigateWithGuard,
+    t,
+    transformValidationErrors,
+    triggerInjectionEvent,
+    values
+  ]);
+  const isNewRecord = React.useMemo(() => {
+    const rawId = values.id;
+    if (rawId === void 0 || rawId === null) return true;
+    return typeof rawId === "string" ? rawId.trim().length === 0 : false;
+  }, [values]);
+  const showDelete = Boolean(onDelete) && (typeof deleteVisible === "boolean" ? deleteVisible : !isNewRecord);
+  const versionHistoryEnabled = Boolean(versionHistory?.resourceId && String(versionHistory.resourceId).trim().length > 0);
+  const versionHistoryAction = /* @__PURE__ */ jsx(
+    VersionHistoryAction,
+    {
+      config: versionHistoryEnabled ? versionHistory : null,
+      t,
+      canUndoRedo: versionHistory?.canUndoRedo,
+      autoCheckAcl: versionHistory?.autoCheckAcl
+    }
+  );
+  const headerInjectionAction = headerInjectionSpotId ? /* @__PURE__ */ jsx(
+    InjectionSpot,
+    {
+      spotId: headerInjectionSpotId,
+      context: injectionContext,
+      data: values,
+      onDataChange: (newData) => setValues(newData),
+      disabled: pending
+    }
+  ) : null;
+  const headerExtraActions = versionHistoryEnabled || headerInjectionAction || extraActions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    versionHistoryEnabled ? versionHistoryAction : null,
+    headerInjectionAction,
+    extraActions
+  ] }) : void 0;
+  React.useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      if (!resolvedEntityIds.length) {
+        setCfDefinitions([]);
+        setCfMetadata(null);
+        setIsLoadingCustomFields(false);
+        return;
+      }
+      setIsLoadingCustomFields(true);
+      try {
+        const mod = await import("./utils/customFieldForms.js");
+        const { definitions, metadata } = await mod.fetchCustomFieldFormStructure(resolvedEntityIds, void 0, { bareIds: customEntity });
+        if (!cancelled) {
+          setCfDefinitions(definitions);
+          setCfMetadata(metadata);
+          setCfFieldsetSelections((prev) => {
+            const next = {};
+            let changed = false;
+            resolvedEntityIds.forEach((entityId2) => {
+              const existing = prev[entityId2];
+              const fieldsets = metadata.fieldsetsByEntity?.[entityId2] ?? [];
+              const defaultSelection = fieldsets[0]?.code ?? null;
+              const value = existing !== void 0 ? existing : defaultSelection;
+              next[entityId2] = value;
+              if (existing !== value) changed = true;
+            });
+            if (Object.keys(prev).length !== Object.keys(next).length) changed = true;
+            return changed ? next : prev;
+          });
+          setIsLoadingCustomFields(false);
+        }
+      } catch {
+        if (!cancelled) {
+          setCfDefinitions([]);
+          setCfMetadata(null);
+          setIsLoadingCustomFields(false);
+        }
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [resolvedEntityIds, customEntity, customFieldDefsVersion]);
+  React.useEffect(() => {
+    if (!customFieldsetBindings) return;
+    setCfFieldsetSelections((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      resolvedEntityIds.forEach((entityId2) => {
+        const binding = customFieldsetBindings[entityId2];
+        if (!binding) return;
+        const raw = values[binding.valueKey];
+        if (typeof raw === "string" && raw.trim().length > 0) {
+          const normalized = raw.trim();
+          if (next[entityId2] !== normalized) {
+            next[entityId2] = normalized;
+            changed = true;
+          }
+        }
+      });
+      return changed ? next : prev;
+    });
+  }, [customFieldsetBindings, resolvedEntityIds, values]);
+  const fieldsetsByEntity = cfMetadata?.fieldsetsByEntity ?? {};
+  const entitySettings = cfMetadata?.entitySettings ?? {};
+  const { cfFields, customFieldLayout } = React.useMemo(() => {
+    if (!cfDefinitions.length) return { cfFields: [], customFieldLayout: [] };
+    const aggregated = [];
+    const layout = [];
+    const defsByEntity = new globalThis.Map();
+    cfDefinitions.forEach((def) => {
+      const entityId2 = typeof def.entityId === "string" && def.entityId.trim().length ? def.entityId.trim() : resolvedEntityIds[0];
+      if (!entityId2) return;
+      const bucket = defsByEntity.get(entityId2) ?? [];
+      bucket.push(def);
+      defsByEntity.set(entityId2, bucket);
+    });
+    const buildSection = (entityId2, fieldsetCode, defList, fieldset) => {
+      if (!defList.length) return null;
+      const groupsMap = new globalThis.Map();
+      const order = [];
+      const fieldsetGroupMap = new globalThis.Map();
+      if (Array.isArray(fieldset?.groups)) {
+        fieldset.groups.forEach((group) => {
+          if (!group?.code) return;
+          fieldsetGroupMap.set(group.code, { code: group.code, title: group.title, hint: group.hint });
+        });
+      }
+      const sortedDefs = [...defList].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
+      const ensureBucket = (code, def) => {
+        const key = code ?? "__default__";
+        let bucket = groupsMap.get(key);
+        if (!bucket) {
+          const fallbackMeta = code ? fieldsetGroupMap.get(code) : void 0;
+          const directMeta = code ? def.group : void 0;
+          const label = code === null ? void 0 : directMeta?.title || fallbackMeta?.title || directMeta?.code || fallbackMeta?.code || code;
+          const hint = directMeta?.hint || fallbackMeta?.hint;
+          bucket = { code, label, hint, fields: [] };
+          groupsMap.set(key, bucket);
+          order.push(key);
+        } else if (code && !bucket.label) {
+          const fallbackMeta = fieldsetGroupMap.get(code);
+          const directMeta = def.group ?? void 0;
+          bucket.label = directMeta?.title || fallbackMeta?.title || directMeta?.code || fallbackMeta?.code || bucket.label;
+          bucket.hint = directMeta?.hint || fallbackMeta?.hint || bucket.hint;
+        }
+        return bucket;
+      };
+      sortedDefs.forEach((definition) => {
+        const field = buildFormFieldFromCustomFieldDef(definition, { bareIds: customEntity });
+        if (!field) return;
+        aggregated.push(field);
+        const bucket = ensureBucket(definition.group?.code ?? null, definition);
+        bucket.fields.push(field);
+      });
+      const groups2 = order.map((key) => groupsMap.get(key)).filter((group) => group.fields.length > 0);
+      if (!groups2.length) return null;
+      return {
+        entityId: entityId2,
+        fieldsetCode,
+        fieldset,
+        title: fieldset?.label ?? customFieldsLabel,
+        description: fieldset?.description,
+        groups: groups2
+      };
+    };
+    const entityIds2 = resolvedEntityIds.length ? resolvedEntityIds : Array.from(defsByEntity.keys());
+    entityIds2.forEach((entityId2) => {
+      const defsForEntity = defsByEntity.get(entityId2) ?? [];
+      if (!defsForEntity.length) return;
+      const availableFieldsets = fieldsetsByEntity[entityId2] ?? [];
+      const hasFieldsets = availableFieldsets.length > 0;
+      const singleFieldsetPerRecord = entitySettings[entityId2]?.singleFieldsetPerRecord !== false;
+      const defsByFieldset = new globalThis.Map();
+      defsForEntity.forEach((def) => {
+        const memberships = Array.isArray(def.fieldsets) ? def.fieldsets.filter((entry) => typeof entry === "string").map((entry) => entry.trim()).filter((entry) => entry.length > 0) : [];
+        if (memberships.length > 0) {
+          memberships.forEach((code2) => {
+            const bucket2 = defsByFieldset.get(code2) ?? [];
+            bucket2.push(def);
+            defsByFieldset.set(code2, bucket2);
+          });
+          return;
+        }
+        const code = typeof def.fieldset === "string" && def.fieldset.trim().length > 0 ? def.fieldset.trim() : null;
+        const bucket = defsByFieldset.get(code) ?? [];
+        bucket.push(def);
+        defsByFieldset.set(code, bucket);
+      });
+      const sections = [];
+      const createEmptySection = (code) => {
+        const fieldset = code ? availableFieldsets.find((fs) => fs.code === code) : void 0;
+        return {
+          entityId: entityId2,
+          fieldsetCode: code,
+          fieldset,
+          title: fieldset?.label ?? customFieldsLabel,
+          description: fieldset?.description,
+          groups: []
+        };
+      };
+      if (!hasFieldsets) {
+        const fallbackDefs = defsByFieldset.get(null) ?? Array.from(defsByFieldset.values()).flat();
+        const section = buildSection(entityId2, null, fallbackDefs, void 0);
+        if (section) sections.push(section);
+      } else if (singleFieldsetPerRecord) {
+        const availableCodes = availableFieldsets.map((fs) => fs.code);
+        const activeFieldset = cfFieldsetSelections[entityId2] && availableCodes.includes(cfFieldsetSelections[entityId2]) ? cfFieldsetSelections[entityId2] : availableFieldsets[0]?.code ?? null;
+        const targetDefs = activeFieldset ? defsByFieldset.get(activeFieldset) ?? [] : defsByFieldset.get(null) ?? [];
+        const targetSection = activeFieldset ? buildSection(
+          entityId2,
+          activeFieldset,
+          targetDefs,
+          availableFieldsets.find((fs) => fs.code === activeFieldset)
+        ) : buildSection(entityId2, null, targetDefs, void 0);
+        if (targetSection) {
+          sections.push(targetSection);
+        } else if (activeFieldset) {
+          sections.push(createEmptySection(activeFieldset));
+        }
+        const unassigned = defsByFieldset.get(null);
+        if (unassigned?.length && activeFieldset) {
+          const generalSection = buildSection(entityId2, null, unassigned, void 0);
+          if (generalSection) sections.push(generalSection);
+        }
+      } else {
+        availableFieldsets.forEach((fieldset) => {
+          const list = defsByFieldset.get(fieldset.code) ?? [];
+          const section = buildSection(entityId2, fieldset.code, list, fieldset);
+          if (section) sections.push(section);
+        });
+        const unassigned = defsByFieldset.get(null);
+        if (unassigned?.length) {
+          const section = buildSection(entityId2, null, unassigned, void 0);
+          if (section) sections.push(section);
+        }
+      }
+      if (!sections.length && hasFieldsets) {
+        const fallbackCode = availableFieldsets[0]?.code ?? null;
+        sections.push(createEmptySection(fallbackCode));
+      }
+      layout.push({
+        entityId: entityId2,
+        sections,
+        availableFieldsets,
+        singleFieldsetPerRecord,
+        hasFieldsets,
+        activeFieldset: cfFieldsetSelections[entityId2] ?? availableFieldsets[0]?.code ?? null
+      });
+    });
+    return { cfFields: aggregated, customFieldLayout: layout };
+  }, [
+    cfDefinitions,
+    cfFieldsetSelections,
+    customEntity,
+    customFieldsLabel,
+    entitySettings,
+    fieldsetsByEntity,
+    resolvedEntityIds
+  ]);
+  const injectedFieldDefinitions = React.useMemo(() => {
+    const definitions = [];
+    for (const widget of injectedFieldWidgets) {
+      if (!("fields" in widget)) continue;
+      for (const field of widget.fields ?? []) {
+        definitions.push(field);
+      }
+    }
+    return definitions;
+  }, [injectedFieldWidgets]);
+  const injectedFieldContext = React.useMemo(() => {
+    const recordValues = values;
+    const organizationId = typeof recordValues.organizationId === "string" ? recordValues.organizationId : null;
+    const tenantId = typeof recordValues.tenantId === "string" ? recordValues.tenantId : null;
+    const userId = typeof recordValues.userId === "string" ? recordValues.userId : null;
+    return {
+      organizationId,
+      tenantId,
+      userId,
+      record: recordValues
+    };
+  }, [values]);
+  const hiddenInjectedFieldIds = React.useMemo(() => {
+    const hidden = /* @__PURE__ */ new Set();
+    for (const definition of injectedFieldDefinitions) {
+      if (!evaluateInjectedVisibility(definition.visibleWhen, values, injectedFieldContext)) {
+        hidden.add(definition.id);
+      }
+    }
+    return hidden;
+  }, [injectedFieldContext, injectedFieldDefinitions, values]);
+  const injectedFieldIdSet = React.useMemo(
+    () => new Set(injectedFieldDefinitions.map((definition) => definition.id)),
+    [injectedFieldDefinitions]
+  );
+  const injectedCrudFields = React.useMemo(() => {
+    return injectedFieldDefinitions.map((definition) => ({
+      id: definition.id,
+      label: definition.label,
+      type: "custom",
+      readOnly: definition.readOnly,
+      component: ({ value, setValue: setValue2, values: formValues }) => /* @__PURE__ */ jsx(
+        InjectedField,
+        {
+          field: definition,
+          value,
+          onChange: (_, nextValue) => setValue2(nextValue),
+          context: injectedFieldContext,
+          formData: formValues ?? values
+        }
+      )
+    }));
+  }, [injectedFieldContext, injectedFieldDefinitions, values]);
+  const allFields = React.useMemo(() => {
+    const base = [...fields, ...injectedCrudFields];
+    if (groups) {
+      const provided2 = new Set(base.map((f) => f.id));
+      for (const group of groups) {
+        if (!group.fields) continue;
+        for (const entry of group.fields) {
+          if (typeof entry === "string") continue;
+          if (!provided2.has(entry.id)) {
+            provided2.add(entry.id);
+            base.push(entry);
+          }
+        }
+      }
+    }
+    if (!cfFields.length) return base;
+    const provided = new Set(base.map((f) => f.id));
+    const extras = cfFields.filter((f) => !provided.has(f.id));
+    return [...base, ...extras];
+  }, [fields, injectedCrudFields, cfFields, groups]);
+  const fieldById = React.useMemo(() => {
+    return new globalThis.Map(allFields.map((f) => [f.id, f]));
+  }, [allFields]);
+  const validateFieldOnBlur = React.useCallback(async (fieldId, sourceValues) => {
+    if (formReadOnly) return;
+    const field = fieldById.get(fieldId);
+    if (!field || field.disabled) return;
+    if (hiddenInjectedFieldIds.has(fieldId)) return;
+    const nextValues = sourceValues ?? valuesRef.current;
+    const nextFieldErrors = {};
+    const requiredMessage = t("ui.forms.errors.required");
+    const value = nextValues[fieldId];
+    const isArray = Array.isArray(value);
+    const isString = typeof value === "string";
+    const empty = value === void 0 || value === null || isString && value.trim() === "" || isArray && value.length === 0 || field.type === "checkbox" && value !== true;
+    if (field.required && empty) {
+      nextFieldErrors[fieldId] = requiredMessage;
+    }
+    const customFieldKey = customEntity ? cfDefinitions.some((definition) => definition.key === fieldId) ? fieldId : null : fieldId.startsWith("cf_") ? fieldId.replace(/^cf_/, "") : null;
+    if (!Object.keys(nextFieldErrors).length && customFieldKey) {
+      const defsForField = cfDefinitions.filter((definition) => definition.key === customFieldKey);
+      if (defsForField.length) {
+        try {
+          const { validateValuesAgainstDefs } = await import("@open-mercato/shared/modules/entities/validation");
+          const validationResult = validateValuesAgainstDefs(
+            { [customFieldKey]: value },
+            mapDefsForValidation(defsForField)
+          );
+          if (!validationResult.ok) {
+            const normalizedFieldErrors = customEntity ? Object.fromEntries(
+              Object.entries(validationResult.fieldErrors).map(([key, message]) => [
+                key.replace(/^cf_/, ""),
+                String(message)
+              ])
+            ) : Object.fromEntries(
+              Object.entries(validationResult.fieldErrors).map(([key, message]) => [key, String(message)])
+            );
+            const transformedErrors = await transformValidationErrors(normalizedFieldErrors);
+            Object.assign(nextFieldErrors, translateValidationErrors(transformedErrors));
+          }
+        } catch {
+        }
+      }
+    }
+    if (!Object.keys(nextFieldErrors).length && schema) {
+      const widgetValues = { ...nextValues };
+      for (const hiddenId of hiddenInjectedFieldIds) {
+        delete widgetValues[hiddenId];
+      }
+      const coreValues = { ...widgetValues };
+      for (const injectedId of injectedFieldIdSet) {
+        delete coreValues[injectedId];
+      }
+      const result = schema.safeParse(coreValues);
+      if (!result.success) {
+        const schemaFieldErrors = {};
+        result.error.issues.forEach((issue) => {
+          const path = serializeIssuePath(issue.path);
+          if (!path) return;
+          if (path === fieldId || path.startsWith(`${fieldId}.`) || fieldId.startsWith(`${path}.`)) {
+            schemaFieldErrors[path] = issue.message;
+          }
+        });
+        if (Object.keys(schemaFieldErrors).length) {
+          const transformedErrors = await transformValidationErrors(schemaFieldErrors);
+          Object.assign(nextFieldErrors, translateValidationErrors(transformedErrors));
+        }
+      }
+    }
+    setErrors((prev) => {
+      const next = Object.fromEntries(
+        Object.entries(prev).filter(([existingFieldId]) => !(existingFieldId === fieldId || existingFieldId.startsWith(`${fieldId}.`) || fieldId.startsWith(`${existingFieldId}.`)))
+      );
+      for (const [key, message] of Object.entries(nextFieldErrors)) {
+        next[key] = message;
+      }
+      const same = Object.keys(next).length === Object.keys(prev).length && Object.entries(next).every(([key, message]) => prev[key] === message);
+      return same ? prev : next;
+    });
+  }, [
+    cfDefinitions,
+    customEntity,
+    fieldById,
+    formReadOnly,
+    hiddenInjectedFieldIds,
+    injectedFieldIdSet,
+    mapDefsForValidation,
+    schema,
+    t,
+    transformValidationErrors,
+    translateValidationErrors
+  ]);
+  const allFieldsRef = React.useRef(allFields);
+  allFieldsRef.current = allFields;
+  const dynamicOptionLoaderKey = React.useMemo(() => {
+    return allFields.filter((f) => f.type !== "custom" && typeof f.loadOptions === "function").map((f) => f.id).join("\0");
+  }, [allFields]);
+  const injectionGroupCards = React.useMemo(() => {
+    if (!injectionWidgets || injectionWidgets.length === 0) return [];
+    const pairs = injectionWidgets.filter((widget) => (widget.placement?.kind ?? "stack") === "group").map((widget) => {
+      const priority = typeof widget.placement?.priority === "number" ? widget.placement.priority : 0;
+      const group = {
+        id: `widget:${widget.widgetId}`,
+        title: widget.placement?.groupLabel ?? widget.module.metadata.title,
+        description: widget.placement?.groupDescription ?? widget.module.metadata.description,
+        column: widget.placement?.column === 2 ? 2 : 1,
+        component: () => /* @__PURE__ */ jsx(
+          widget.module.Widget,
+          {
+            context: injectionContext,
+            data: values,
+            onDataChange: (next) => setValues(next),
+            disabled: pending
+          }
+        )
+      };
+      return { group, priority };
+    });
+    pairs.sort((a, b) => b.priority - a.priority);
+    return pairs.map((p) => p.group);
+  }, [injectionWidgets, injectionContext, pending, setValues, values]);
+  const groupsWithInjectedFields = React.useMemo(() => {
+    if (!groups || groups.length === 0 || injectedFieldDefinitions.length === 0) return groups;
+    const cloned = groups.map((group) => ({ ...group, fields: [...group.fields ?? []] }));
+    const fallbackIndex = cloned.length - 1;
+    for (const definition of injectedFieldDefinitions) {
+      const targetIndex = cloned.findIndex((group) => group.id === definition.group);
+      const index = targetIndex >= 0 ? targetIndex : fallbackIndex;
+      if (targetIndex < 0 && process.env.NODE_ENV !== "production") {
+        console.warn(`[CrudForm] Injected field "${definition.id}" targets group "${definition.group}" which does not exist. Appended to last group.`);
+      }
+      if (index < 0) continue;
+      const fieldEntries = cloned[index].fields ?? [];
+      if (!fieldEntries.some((entry) => typeof entry === "string" && entry === definition.id)) {
+        fieldEntries.push(definition.id);
+      }
+      cloned[index].fields = fieldEntries;
+    }
+    return cloned;
+  }, [groups, injectedFieldDefinitions]);
+  const shouldAutoGroup = (!groupsWithInjectedFields || groupsWithInjectedFields.length === 0) && injectionGroupCards.length > 0;
+  const resolvedGroupsForLayout = React.useMemo(() => {
+    const baseGroups = groupsWithInjectedFields && groupsWithInjectedFields.length ? groupsWithInjectedFields : [];
+    const autoGroup = shouldAutoGroup ? [{ id: "__auto-fields__", fields: allFields }] : [];
+    return [...baseGroups.length ? baseGroups : autoGroup, ...injectionGroupCards];
+  }, [allFields, groupsWithInjectedFields, injectionGroupCards, shouldAutoGroup]);
+  const useGroupedLayout = resolvedGroupsForLayout.length > 0;
+  const stackedInjectionWidgets = React.useMemo(
+    () => (injectionWidgets ?? []).filter((widget) => (widget.placement?.kind ?? "stack") === "stack"),
+    [injectionWidgets]
+  );
+  const placedCustomFieldIds = React.useMemo(() => {
+    const placed = /* @__PURE__ */ new Set();
+    for (const other of groups ?? []) {
+      if (other.kind === "customFields" || !other.fields) continue;
+      for (const entry of other.fields) {
+        if (typeof entry === "string") placed.add(entry);
+        else if (entry && typeof entry.id === "string") placed.add(entry.id);
+      }
+    }
+    return placed;
+  }, [groups]);
+  const resolveGroupFields = React.useCallback((g) => {
+    if (g.kind === "customFields") {
+      return cfFields.filter((f) => !placedCustomFieldIds.has(f.id));
+    }
+    const src = g.fields || [];
+    const result = [];
+    for (const item of src) {
+      if (typeof item === "string") {
+        const found = fieldById.get(item);
+        if (found) result.push(found);
+      } else if (item) {
+        result.push(item);
+      }
+    }
+    return result;
+  }, [cfFields, fieldById, placedCustomFieldIds]);
+  const customFieldsManageHref = React.useMemo(() => buildCustomFieldsManageHref(primaryEntityId), [buildCustomFieldsManageHref, primaryEntityId]);
+  const customFieldsEmptyState = React.useMemo(() => {
+    const text = t("entities.customFields.empty");
+    const action = t("entities.customFields.addFirst");
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-dashed border-muted-foreground/50 bg-muted/10 px-3 py-4 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        text,
+        " "
+      ] }),
+      customFieldsManageHref ? /* @__PURE__ */ jsx(Link, { href: customFieldsManageHref, className: "font-medium text-primary hover:underline", children: action }) : /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: action })
+    ] });
+  }, [customFieldsManageHref, t]);
+  const firstFieldId = React.useMemo(() => {
+    if (useGroupedLayout) {
+      const col1 = [];
+      const col2 = [];
+      for (const g of resolvedGroupsForLayout) {
+        if ((g.column ?? 1) === 2) col2.push(g);
+        else col1.push(g);
+      }
+      const scan = (list) => {
+        for (const group of list) {
+          const resolved = resolveGroupFields(group);
+          for (const field of resolved) {
+            if (field?.id && !field.disabled) return field.id;
+          }
+        }
+        return null;
+      };
+      const fromCol1 = scan(col1);
+      if (fromCol1) return fromCol1;
+      const fromCol2 = scan(col2);
+      if (fromCol2) return fromCol2;
+    }
+    for (const field of allFields) {
+      if (field?.id && !field.disabled) return field.id;
+    }
+    return null;
+  }, [allFields, resolveGroupFields, resolvedGroupsForLayout, useGroupedLayout]);
+  const requestSubmit = React.useCallback(() => {
+    if (formReadOnly) return;
+    if (typeof document === "undefined") return;
+    const form = document.getElementById(formId);
+    form?.requestSubmit();
+  }, [formId, formReadOnly]);
+  const lastFocusedFieldRef = React.useRef(null);
+  const lastErrorFieldRef = React.useRef(null);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+    if (isLoading || isLoadingCustomFields || formReadOnly) {
+      lastFocusedFieldRef.current = null;
+      return;
+    }
+    if (!firstFieldId) return;
+    if (lastFocusedFieldRef.current === firstFieldId) return;
+    const run = () => {
+      const form = document.getElementById(formId);
+      if (!form) return;
+      const active = typeof document !== "undefined" ? document.activeElement : null;
+      if (active && form.contains(active)) {
+        return;
+      }
+      const container = form.querySelector(`[data-crud-field-id="${firstFieldId}"]`);
+      const target = container?.querySelector(FOCUSABLE_SELECTOR) ?? form.querySelector(FOCUSABLE_SELECTOR);
+      if (target && typeof target.focus === "function") {
+        target.focus({ preventScroll: true });
+        if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+          try {
+            target.select();
+          } catch {
+          }
+        }
+        lastFocusedFieldRef.current = firstFieldId;
+      }
+    };
+    const frame = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(run) : window.setTimeout(run, 0);
+    return () => {
+      if (typeof window === "undefined") return;
+      if (typeof window.cancelAnimationFrame === "function") {
+        window.cancelAnimationFrame(frame);
+      } else {
+        window.clearTimeout(frame);
+      }
+    };
+  }, [firstFieldId, formId, formReadOnly, isLoading, isLoadingCustomFields]);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+    const entries = Object.entries(errors);
+    if (!entries.length) {
+      lastErrorFieldRef.current = null;
+      return;
+    }
+    const [fieldId] = entries[0];
+    if (!fieldId || lastErrorFieldRef.current === fieldId) return;
+    const form = document.getElementById(formId);
+    if (!form) return;
+    const container = form.querySelector(`[data-crud-field-id="${fieldId}"]`);
+    const target = container?.querySelector(FOCUSABLE_SELECTOR) ?? form.querySelector(`[name="${fieldId}"]`) ?? container ?? null;
+    if (target && typeof target.focus === "function") {
+      target.focus();
+      if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+        try {
+          target.select();
+        } catch {
+        }
+      }
+      lastErrorFieldRef.current = fieldId;
+    }
+  }, [errors, formId]);
+  const setValue = React.useCallback((id, nextValue) => {
+    let nextData = null;
+    setValues((prev) => {
+      if (Object.is(prev[id], nextValue)) return prev;
+      nextData = { ...prev, [id]: nextValue };
+      valuesRef.current = nextData;
+      return nextData;
+    });
+    const clearedMessages = [];
+    setErrors((prev) => {
+      if (!Object.keys(prev).length) return prev;
+      let changed = false;
+      const nextEntries = Object.entries(prev).filter(([fieldId, message]) => {
+        const shouldClear = fieldId === id || fieldId.startsWith(`${id}.`) || id.startsWith(`${fieldId}.`);
+        if (shouldClear) {
+          changed = true;
+          clearedMessages.push(message);
+        }
+        return !shouldClear;
+      });
+      return changed ? Object.fromEntries(nextEntries) : prev;
+    });
+    if (clearedMessages.length) {
+      const highlightedMessage = t("ui.forms.errors.highlighted");
+      const translatedMessages = new Set(
+        clearedMessages.map((message) => translateValidationMessage(message)).filter((message) => message.trim().length > 0)
+      );
+      setFormError((prev) => {
+        if (!prev) return prev;
+        const normalized = prev.trim();
+        if (!normalized) return null;
+        if (normalized === highlightedMessage || translatedMessages.has(normalized)) {
+          return null;
+        }
+        return prev;
+      });
+    }
+    if (!nextData || !extendedInjectionEventsEnabled) return;
+    void triggerInjectionEvent("onFieldChange", nextData, injectionContextRef.current, {
+      fieldId: id,
+      fieldValue: nextValue
+    }).then((result) => {
+      if (!result.ok) return;
+      const change = result.fieldChange;
+      if (!change) return;
+      const updates = { ...change.sideEffects ?? {} };
+      if (change.value !== void 0) {
+        updates[id] = change.value;
+      }
+      if (Object.keys(updates).length > 0) {
+        setValues((prev) => {
+          let changed = false;
+          const next = { ...prev };
+          for (const [key, value] of Object.entries(updates)) {
+            if (Object.is(next[key], value)) continue;
+            next[key] = value;
+            changed = true;
+          }
+          return changed ? next : prev;
+        });
+      }
+      for (const message of change.messages ?? []) {
+        flash(message.text, message.severity);
+      }
+    }).catch((err) => {
+      console.error("[CrudForm] Error in onFieldChange:", err);
+    });
+  }, [extendedInjectionEventsEnabled, t, translateValidationMessage, triggerInjectionEvent]);
+  const handleFieldsetSelectionChange = React.useCallback(
+    (entityId2, nextCode) => {
+      setCfFieldsetSelections((prev) => ({ ...prev, [entityId2]: nextCode }));
+      const bindingKey = customFieldsetBindings?.[entityId2]?.valueKey;
+      if (bindingKey) {
+        setValue(bindingKey, nextCode ?? void 0);
+      }
+    },
+    [customFieldsetBindings, setValue]
+  );
+  const handleOpenFieldsetEditor = React.useCallback(
+    (entityId2, fieldsetCode, view = "entity") => {
+      const href = buildCustomFieldsManageHref(entityId2);
+      if (!href) return;
+      setFieldsetEditorTarget({ entityId: entityId2, fieldsetCode, view });
+    },
+    [buildCustomFieldsManageHref]
+  );
+  const appliedInitialValuesSnapshotRef = React.useRef(void 0);
+  const dirtyBaselineSnapshotRef = React.useRef(void 0);
+  React.useLayoutEffect(() => {
+    if (!initialValues) return;
+    const snapshot = JSON.stringify(initialValues);
+    if (appliedInitialValuesSnapshotRef.current === snapshot) return;
+    appliedInitialValuesSnapshotRef.current = snapshot;
+    let mergedValues = null;
+    setValues((prev) => {
+      const merged = { ...prev, ...initialValues };
+      for (const definition of injectedFieldDefinitions) {
+        if (merged[definition.id] !== void 0) continue;
+        const extracted = readByDotPath(initialValues, definition.id);
+        if (extracted !== void 0) {
+          ;
+          merged[definition.id] = extracted;
+        }
+      }
+      mergedValues = merged;
+      return mergedValues;
+    });
+    if (mergedValues) {
+      dirtyBaselineSnapshotRef.current = JSON.stringify(mergedValues);
+    }
+    if (!extendedInjectionEventsEnabled || !mergedValues) return;
+    let cancelled = false;
+    const run = async () => {
+      try {
+        const result = await triggerInjectionEvent(
+          "transformDisplayData",
+          mergedValues,
+          injectionContextRef.current
+        );
+        const transformed = result.data;
+        if (cancelled || !transformed) return;
+        dirtyBaselineSnapshotRef.current = JSON.stringify(transformed);
+        setValues(transformed);
+      } catch (err) {
+        console.error("[CrudForm] Error in transformDisplayData:", err);
+      }
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [extendedInjectionEventsEnabled, initialValues, injectedFieldDefinitions, triggerInjectionEvent]);
+  const cfDefaultsAppliedRef = React.useRef(false);
+  const initialValuesHasId = React.useMemo(() => {
+    if (!initialValues) return false;
+    const raw = initialValues.id;
+    return raw !== void 0 && raw !== null && raw !== "";
+  }, [initialValues]);
+  React.useEffect(() => {
+    if (isLoading) return;
+    if (initialValuesHasId) return;
+    if (!cfDefinitions.length) return;
+    if (cfDefaultsAppliedRef.current) return;
+    cfDefaultsAppliedRef.current = true;
+    const defaults = {};
+    const prefix = customEntity ? "" : "cf_";
+    for (const def of cfDefinitions) {
+      if (def.defaultValue === void 0 || def.defaultValue === null) continue;
+      const fieldId = `${prefix}${def.key}`;
+      defaults[fieldId] = def.defaultValue;
+    }
+    if (Object.keys(defaults).length === 0) return;
+    let mergedValues = null;
+    setValues((prev) => {
+      const merged = { ...prev };
+      let applied = false;
+      for (const [fieldId, defaultVal] of Object.entries(defaults)) {
+        if (merged[fieldId] !== void 0) continue;
+        merged[fieldId] = defaultVal;
+        applied = true;
+      }
+      if (!applied) return prev;
+      mergedValues = merged;
+      return mergedValues;
+    });
+    if (mergedValues) {
+      dirtyBaselineSnapshotRef.current = JSON.stringify(mergedValues);
+    }
+  }, [isLoading, initialValuesHasId, cfDefinitions, customEntity]);
+  const markFormAsClean = React.useCallback((snapshotSource) => {
+    clearDirtyState(snapshotSource);
+  }, [clearDirtyState]);
+  const buildFieldsetEditorHref = React.useCallback(
+    (includeViewParam) => {
+      if (!fieldsetEditorTarget) return null;
+      const base = buildCustomFieldsManageHref(fieldsetEditorTarget.entityId);
+      if (!base) return null;
+      const params = [];
+      if (fieldsetEditorTarget.fieldsetCode) {
+        params.push(`fieldset=${encodeURIComponent(fieldsetEditorTarget.fieldsetCode)}`);
+      }
+      if (includeViewParam && fieldsetEditorTarget.view === "fieldset") {
+        params.push("view=fieldset");
+      }
+      if (!params.length) return base;
+      const connector = base.includes("?") ? "&" : "?";
+      return `${base}${connector}${params.join("&")}`;
+    },
+    [buildCustomFieldsManageHref, fieldsetEditorTarget]
+  );
+  const fieldsetEditorFullHref = React.useMemo(() => buildFieldsetEditorHref(false), [buildFieldsetEditorHref]);
+  const handleFieldsetDialogSave = React.useCallback(() => {
+    if (!fieldsetManagerRef.current) return;
+    void fieldsetManagerRef.current.submit();
+  }, []);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (formReadOnly) return;
+    setFormError(null);
+    setErrors({});
+    const requiredMessage = t("ui.forms.errors.required");
+    const highlightedMessage = t("ui.forms.errors.highlighted");
+    try {
+      if (typeof document !== "undefined") {
+        const activeElement = document.activeElement;
+        if (activeElement instanceof HTMLElement) {
+          activeElement.blur();
+          await new Promise((resolve) => setTimeout(resolve, 0));
+        }
+      }
+    } catch {
+    }
+    const requiredErrors = {};
+    for (const field of allFields) {
+      if (!field.required) continue;
+      if (field.disabled) continue;
+      if (hiddenInjectedFieldIds.has(field.id)) continue;
+      const v = values[field.id];
+      const isArray = Array.isArray(v);
+      const isString = typeof v === "string";
+      const empty = v === void 0 || v === null || isString && v.trim() === "" || isArray && v.length === 0 || field.type === "checkbox" && v !== true;
+      if (empty) requiredErrors[field.id] = requiredMessage;
+    }
+    if (Object.keys(requiredErrors).length) {
+      if (process.env.NODE_ENV !== "production") {
+        console.debug("[crud-form] Required field errors prevented submit", requiredErrors);
+      }
+      const transformedErrors = await transformValidationErrors(requiredErrors);
+      setErrors(transformedErrors);
+      flash(highlightedMessage, "error");
+      return;
+    }
+    if (resolvedEntityIds.length) {
+      try {
+        const defs = cfDefinitions.length ? cfDefinitions : await import("./utils/customFieldDefs.js").then((mod) => mod.fetchCustomFieldDefs(resolvedEntityIds));
+        const { validateValuesAgainstDefs } = await import("@open-mercato/shared/modules/entities/validation");
+        const cfValues = {};
+        if (customEntity) {
+          for (const def of defs) {
+            if (Object.prototype.hasOwnProperty.call(values, def.key)) {
+              cfValues[def.key] = values[def.key];
+            }
+          }
+        } else {
+          for (const [k, v] of Object.entries(values)) {
+            if (k.startsWith("cf_")) cfValues[k.replace(/^cf_/, "")] = v;
+          }
+        }
+        const defsForValidation = mapDefsForValidation(defs);
+        const result = validateValuesAgainstDefs(cfValues, defsForValidation);
+        if (!result.ok) {
+          if (customEntity) {
+            const mapped = {};
+            for (const [ek, ev] of Object.entries(result.fieldErrors)) mapped[ek.replace(/^cf_/, "")] = String(ev);
+            const transformedErrors = await transformValidationErrors(mapped);
+            setErrors((prev) => ({ ...prev, ...translateValidationErrors(transformedErrors) }));
+          } else {
+            const transformedErrors = await transformValidationErrors(
+              Object.fromEntries(
+                Object.entries(result.fieldErrors).map(([key, value]) => [key, String(value)])
+              )
+            );
+            setErrors((prev) => ({ ...prev, ...translateValidationErrors(transformedErrors) }));
+          }
+          flash(highlightedMessage, "error");
+          return;
+        }
+      } catch {
+      }
+    }
+    const widgetValues = { ...valuesRef.current };
+    for (const hiddenId of hiddenInjectedFieldIds) {
+      delete widgetValues[hiddenId];
+    }
+    const coreValues = { ...widgetValues };
+    for (const injectedId of injectedFieldIdSet) {
+      delete coreValues[injectedId];
+    }
+    let parsedValues;
+    if (schema) {
+      const res = schema.safeParse(coreValues);
+      if (!res.success) {
+        const fieldErrors = {};
+        res.error.issues.forEach((issue) => {
+          const path = serializeIssuePath(issue.path);
+          if (path) fieldErrors[path] = issue.message;
+        });
+        if (process.env.NODE_ENV !== "production") {
+          console.debug("[crud-form] Schema validation failed", res.error.issues);
+        }
+        const transformedErrors = await transformValidationErrors(fieldErrors);
+        setErrors(translateValidationErrors(transformedErrors));
+        flash(highlightedMessage, "error");
+        return;
+      }
+      parsedValues = res.data;
+    } else {
+      parsedValues = coreValues;
+    }
+    let submitValues = widgetValues;
+    let coreSubmitValues = parsedValues;
+    if (extendedInjectionEventsEnabled) {
+      try {
+        const result = await triggerInjectionEvent("transformFormData", submitValues, injectionContext);
+        if (result.data) {
+          submitValues = result.data;
+          const projectedCoreValues = { ...result.data };
+          for (const injectedId of injectedFieldIdSet) {
+            delete projectedCoreValues[injectedId];
+          }
+          coreSubmitValues = schema ? schema.parse(projectedCoreValues) : projectedCoreValues;
+          if (result.applyToForm) {
+            setValues(result.data);
+          }
+        }
+      } catch (err) {
+        console.error("[CrudForm] Error in transformFormData:", err);
+      }
+    }
+    let injectionRequestHeaders;
+    if (resolvedInjectionSpotId) {
+      try {
+        const result = await triggerInjectionEvent("onBeforeSave", submitValues, injectionContext);
+        if (!result.ok) {
+          try {
+            if (typeof window !== "undefined") {
+              dispatchBackendMutationError({
+                contextId: formId,
+                formId,
+                error: result.details ?? result
+              });
+              window.dispatchEvent(new CustomEvent("om:crud-save-error", {
+                detail: {
+                  formId,
+                  error: result.details ?? result
+                }
+              }));
+            }
+          } catch {
+          }
+          if (result.fieldErrors && Object.keys(result.fieldErrors).length) {
+            const transformedErrors = await transformValidationErrors(result.fieldErrors);
+            setErrors(translateValidationErrors(transformedErrors));
+          }
+          const message = result.message || t("ui.forms.flash.saveBlocked", "Save blocked by validation");
+          flash(message, "error");
+          setPending(false);
+          return;
+        }
+        injectionRequestHeaders = result.requestHeaders;
+      } catch (err) {
+        console.error("[CrudForm] Error in onBeforeSave:", err);
+        flash(t("ui.forms.flash.saveBlocked", "Save blocked by validation"), "error");
+        setPending(false);
+        return;
+      }
+    }
+    setPending(true);
+    const nativeSubmitter = "nativeEvent" in e ? e.nativeEvent.submitter : null;
+    const submitContext = nativeSubmitter instanceof HTMLElement ? {
+      submitter: {
+        id: nativeSubmitter.id || void 0,
+        name: "name" in nativeSubmitter && typeof nativeSubmitter.name === "string" && nativeSubmitter.name.trim().length > 0 ? nativeSubmitter.name : void 0,
+        value: "value" in nativeSubmitter && typeof nativeSubmitter.value === "string" && nativeSubmitter.value.trim().length > 0 ? nativeSubmitter.value : void 0,
+        dataset: Object.fromEntries(
+          Object.entries(nativeSubmitter.dataset).filter((entry) => typeof entry[1] === "string")
+        )
+      }
+    } : void 0;
+    if (resolvedInjectionSpotId) {
+      try {
+        await triggerInjectionEvent("onSave", submitValues, injectionContext);
+      } catch (err) {
+        console.error("[CrudForm] Error in onSave:", err);
+        flash(t("ui.forms.flash.saveBlocked", "Save blocked by validation"), "error");
+        setPending(false);
+        return;
+      }
+    }
+    try {
+      submitNavigationBypassRef.current = true;
+      if (injectionRequestHeaders && Object.keys(injectionRequestHeaders).length > 0) {
+        await withScopedApiRequestHeaders(injectionRequestHeaders, async () => {
+          await onSubmit?.(coreSubmitValues, submitContext);
+        });
+      } else {
+        await onSubmit?.(coreSubmitValues, submitContext);
+      }
+      if (resolvedInjectionSpotId) {
+        try {
+          await triggerInjectionEvent("onAfterSave", submitValues, injectionContext);
+        } catch (err) {
+          console.error("[CrudForm] Error in onAfterSave:", err);
+        }
+      }
+      markFormAsClean(valuesRef.current);
+      keepSubmitNavigationBypassAlive();
+      if (successRedirect) await navigateWithGuard(successRedirect);
+    } catch (err) {
+      clearSubmitNavigationBypass();
+      try {
+        if (typeof window !== "undefined") {
+          dispatchBackendMutationError({
+            contextId: formId,
+            formId,
+            error: err
+          });
+          window.dispatchEvent(new CustomEvent("om:crud-save-error", {
+            detail: {
+              formId,
+              error: err
+            }
+          }));
+        }
+      } catch {
+      }
+      const { message: helperMessage, fieldErrors: serverFieldErrors } = mapCrudServerErrorToFormErrors(err, { customEntity });
+      const combinedFieldErrors = serverFieldErrors ?? {};
+      const hasFieldErrors = Object.keys(combinedFieldErrors).length > 0;
+      const firstFieldMessage = hasFieldErrors ? (() => {
+        const firstKey = Object.keys(combinedFieldErrors)[0];
+        if (!firstKey) return null;
+        const value = combinedFieldErrors[firstKey];
+        if (typeof value !== "string" || !value.trim().length) return null;
+        return translateValidationMessage(value);
+      })() : null;
+      if (hasFieldErrors) {
+        const transformedErrors = await transformValidationErrors(combinedFieldErrors);
+        setErrors(translateValidationErrors(transformedErrors));
+        if (process.env.NODE_ENV !== "production") {
+          console.debug("[crud-form] Submission failed with field errors", transformedErrors);
+        }
+      }
+      let displayMessage = typeof helperMessage === "string" && helperMessage.trim() ? helperMessage.trim() : "";
+      if (hasFieldErrors) {
+        const lowered = displayMessage.toLowerCase();
+        const highlightedLower = highlightedMessage.toLowerCase();
+        if (!displayMessage || lowered === "invalid input" || lowered === highlightedLower) {
+          displayMessage = firstFieldMessage ?? highlightedMessage;
+        }
+      }
+      if (!displayMessage && err instanceof Error && typeof err.message === "string" && err.message.trim()) {
+        displayMessage = err.message.trim();
+      }
+      if (!displayMessage) {
+        displayMessage = hasFieldErrors ? highlightedMessage : saveErrorMessage;
+      }
+      displayMessage = parseServerMessage(displayMessage);
+      if (!hasFieldErrors) {
+        flash(displayMessage, "error");
+      }
+      setFormError(displayMessage);
+    } finally {
+      setPending(false);
+    }
+  };
+  React.useEffect(() => {
+    let cancelled = false;
+    const loadAll = async () => {
+      const loaders = allFieldsRef.current.filter(
+        (f) => f.type !== "custom" && typeof f.loadOptions === "function"
+      ).map(async (f) => {
+        try {
+          const opts = await f.loadOptions();
+          if (!cancelled) setDynamicOptions((prev) => ({ ...prev, [f.id]: opts }));
+        } catch {
+        }
+      });
+      await Promise.all(loaders);
+    };
+    loadAll();
+    return () => {
+      cancelled = true;
+    };
+  }, [dynamicOptionLoaderKey]);
+  const loadFieldOptions = React.useCallback(async (field, query) => {
+    if (!("type" in field) || field.type === "custom") return EMPTY_OPTIONS;
+    const builtin = field;
+    const loader = builtin.loadOptions;
+    if (typeof loader === "function") {
+      if (query === void 0 && Array.isArray(dynamicOptions[field.id])) return dynamicOptions[field.id];
+      try {
+        const fetched = await loader(query);
+        if (query === void 0) {
+          setDynamicOptions((prev) => ({
+            ...prev,
+            [field.id]: fetched
+          }));
+        }
+        return fetched;
+      } catch {
+        return builtin.options ?? EMPTY_OPTIONS;
+      }
+    }
+    return dynamicOptions[field.id] || builtin.options || EMPTY_OPTIONS;
+  }, [dynamicOptions]);
+  const fieldOptionsById = React.useMemo(() => {
+    const map = new globalThis.Map();
+    for (const f of allFields) {
+      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 merged = [];
+        const seen = /* @__PURE__ */ new Set();
+        for (const opt of staticOptions) {
+          if (seen.has(opt.value)) continue;
+          seen.add(opt.value);
+          merged.push(opt);
+        }
+        for (const opt of dynamic2) {
+          if (seen.has(opt.value)) continue;
+          seen.add(opt.value);
+          merged.push(opt);
+        }
+        map.set(f.id, merged);
+      } else if (staticOptions.length) {
+        map.set(f.id, staticOptions);
+      } else if (dynamic2) {
+        map.set(f.id, dynamic2);
+      }
+    }
+    return map;
+  }, [allFields, dynamicOptions]);
+  const usesResponsiveLayout = allFields.some(
+    (field) => field.layout === "half" || field.layout === "third"
+  );
+  const grid = twoColumn ? "grid grid-cols-1 lg:grid-cols-[7fr_3fr] gap-4" : usesResponsiveLayout ? "grid grid-cols-1 gap-4 md:grid-cols-6" : "grid grid-cols-1 gap-4";
+  const resolveLayoutClass = (layout) => {
+    switch (layout) {
+      case "half":
+        return "md:col-span-3";
+      case "third":
+        return "md:col-span-2";
+      default:
+        return "md:col-span-6";
+    }
+  };
+  const renderFields = (fieldList) => {
+    const usesResponsive = fieldList.some(
+      (field) => field.layout === "half" || field.layout === "third"
+    );
+    const gridClass = usesResponsive ? "grid grid-cols-1 gap-4 md:grid-cols-6" : "grid grid-cols-1 gap-4";
+    return /* @__PURE__ */ jsx("div", { className: gridClass, children: fieldList.map((f) => {
+      const layout = f.layout ?? "full";
+      const wrapperClassName = usesResponsive ? resolveLayoutClass(layout) : void 0;
+      return /* @__PURE__ */ jsx(
+        FieldControl,
+        {
+          field: f,
+          value: values[f.id],
+          error: errors[f.id],
+          options: fieldOptionsById.get(f.id) || EMPTY_OPTIONS,
+          setValue,
+          onBlurRequest: (fieldId) => {
+            void validateFieldOnBlur(fieldId);
+          },
+          values,
+          loadFieldOptions,
+          autoFocus: !formReadOnly && Boolean(firstFieldId && f.id === firstFieldId),
+          onSubmitRequest: requestSubmit,
+          wrapperClassName,
+          entityIdForField: primaryEntityId ?? void 0,
+          recordId
+        },
+        f.id
+      );
+    }) });
+  };
+  const renderCustomFieldsContent = React.useCallback(() => {
+    if (!customFieldLayout.length) {
+      return [
+        /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-4", children: customFieldsEmptyState }, "custom-fields-empty")
+      ];
+    }
+    const nodes = [];
+    const multipleEntities = customFieldLayout.length > 1;
+    customFieldLayout.forEach((entityLayout) => {
+      const manageHref = buildCustomFieldsManageHref(entityLayout.entityId);
+      const showSelector = entityLayout.hasFieldsets && entityLayout.singleFieldsetPerRecord && entityLayout.availableFieldsets.length > 0;
+      if (multipleEntities) {
+        nodes.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "px-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+              children: entityLayout.entityId
+            },
+            `custom-fields-entity-${entityLayout.entityId}`
+          )
+        );
+      }
+      if (showSelector) {
+        nodes.push(
+          /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: fieldsetSelectorLabel }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                className: "h-9 rounded border pl-3 pr-8 text-sm",
+                value: entityLayout.activeFieldset ?? "",
+                onChange: (event) => handleFieldsetSelectionChange(
+                  entityLayout.entityId,
+                  event.target.value || null
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: defaultFieldsetLabel }),
+                  entityLayout.availableFieldsets.map((fs) => /* @__PURE__ */ jsx("option", { value: fs.code, children: fs.label }, fs.code))
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "outline",
+                className: "text-muted-foreground hover:text-foreground",
+                onClick: () => handleOpenFieldsetEditor(entityLayout.entityId, entityLayout.activeFieldset ?? null, "fieldset"),
+                disabled: !manageHref,
+                title: manageFieldsetLabel,
+                children: /* @__PURE__ */ jsx(Settings, { className: "size-4" })
+              }
+            )
+          ] }) }, `custom-fields-selector-${entityLayout.entityId}`)
+        );
+      }
+      if (entityLayout.sections.length) {
+        entityLayout.sections.forEach((section) => {
+          const FieldsetIcon = section.fieldset?.icon ? FIELDSET_ICON_COMPONENTS[section.fieldset.icon] : null;
+          const sectionKey = `${entityLayout.entityId}:${section.fieldsetCode ?? "default"}`;
+          const manageDisabled = !manageHref;
+          nodes.push(
+            /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+                  FieldsetIcon ? /* @__PURE__ */ jsx(FieldsetIcon, { className: "size-5 text-muted-foreground" }) : null,
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: section.title }),
+                    section.description ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: section.description }) : null
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "muted",
+                    size: "sm",
+                    className: "text-xs",
+                    onClick: () => handleOpenFieldsetEditor(entityLayout.entityId, section.fieldsetCode, "fieldset"),
+                    disabled: manageDisabled,
+                    children: [
+                      /* @__PURE__ */ jsx(Settings, { className: "size-4" }),
+                      manageFieldsetLabel
+                    ]
+                  }
+                )
+              ] }),
+              section.groups.map((group) => {
+                const groupKey = `${section.fieldsetCode ?? "default"}:${group.code ?? "default"}`;
+                const visibleFields = placedCustomFieldIds.size > 0 ? group.fields.filter((f) => !placedCustomFieldIds.has(f.id)) : group.fields;
+                if (!visibleFields.length) return null;
+                return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  group.label ? /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: group.label }),
+                    group.hint ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: group.hint }) : null
+                  ] }) : null,
+                  renderFields(visibleFields)
+                ] }, groupKey);
+              }),
+              !section.groups.length ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: emptyFieldsetMessage }) : null
+            ] }, sectionKey)
+          );
+        });
+      } else {
+        nodes.push(
+          /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-4", children: customFieldsEmptyState }, `custom-fields-empty-${entityLayout.entityId}`)
+        );
+      }
+    });
+    return nodes;
+  }, [
+    buildCustomFieldsManageHref,
+    customFieldLayout,
+    customFieldsEmptyState,
+    defaultFieldsetLabel,
+    emptyFieldsetMessage,
+    fieldsetSelectorLabel,
+    handleFieldsetSelectionChange,
+    handleOpenFieldsetEditor,
+    manageFieldsetLabel,
+    placedCustomFieldIds,
+    renderFields
+  ]);
+  const fieldsetManagerDialog = /* @__PURE__ */ jsx(Dialog, { open: fieldsetEditorTarget !== null, onOpenChange: (open) => {
+    if (!open) setFieldsetEditorTarget(null);
+  }, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: "max-w-5xl w-full",
+      "aria-describedby": void 0,
+      onKeyDown: (event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+          event.preventDefault();
+          handleFieldsetDialogSave();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: fieldsetDialogTitle }) }),
+        fieldsetEditorTarget ? /* @__PURE__ */ jsx(
+          FieldDefinitionsManagerErrorBoundary,
+          {
+            onClose: () => setFieldsetEditorTarget(null),
+            unavailableMessage: fieldsetDialogUnavailable,
+            children: /* @__PURE__ */ jsx(
+              FieldDefinitionsManager,
+              {
+                ref: fieldsetManagerRef,
+                entityId: fieldsetEditorTarget.entityId,
+                initialFieldset: fieldsetEditorTarget.fieldsetCode,
+                fullEditorHref: fieldsetEditorFullHref ?? void 0,
+                onSaved: refreshCustomFieldDefinitions,
+                onClose: () => setFieldsetEditorTarget(null)
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground px-4 text-center", children: fieldsetDialogUnavailable })
+      ]
+    }
+  ) });
+  const handleReadOnlyFocusCapture = React.useCallback((event) => {
+    if (!formReadOnly) return;
+    const target = event.target;
+    if (target instanceof HTMLElement) target.blur();
+  }, [formReadOnly]);
+  const handleReadOnlyKeyDownCapture = React.useCallback((event) => {
+    if (!formReadOnly) return;
+    event.preventDefault();
+  }, [formReadOnly]);
+  const wrapFormBody = React.useCallback((children, className) => {
+    if (!formReadOnly) return children;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("relative", className),
+        onFocusCapture: handleReadOnlyFocusCapture,
+        onKeyDownCapture: handleReadOnlyKeyDownCapture,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-none select-none opacity-70", children }),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-start justify-center rounded-lg bg-background/60 p-4 backdrop-blur-[1px] sm:p-6", children: readOnlyOverlay ?? /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-border/70 bg-background/95 px-4 py-3 shadow-sm" }) })
+        ]
+      }
+    );
+  }, [formReadOnly, handleReadOnlyFocusCapture, handleReadOnlyKeyDownCapture, readOnlyOverlay]);
+  if (useGroupedLayout) {
+    const col1 = [];
+    const col2 = [];
+    for (const g of resolvedGroupsForLayout) {
+      if ((g.column ?? 1) === 2) col2.push(g);
+      else col1.push(g);
+    }
+    const renderGroupedCards = (items) => {
+      const nodes = [];
+      for (const g of items) {
+        const isCustomFieldsGroup = g.kind === "customFields";
+        if (isCustomFieldsGroup) {
+          if (isLoadingCustomFields) {
+            nodes.push(
+              /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-4", children: /* @__PURE__ */ jsx(
+                DataLoader,
+                {
+                  isLoading: true,
+                  loadingMessage: resolvedCustomFieldsLoadingMessage,
+                  spinnerSize: "md",
+                  className: "min-h-[1px]",
+                  children: /* @__PURE__ */ jsx("div", {})
+                }
+              ) }, `${g.id}-loading`)
+            );
+            continue;
+          }
+          if (g.component) {
+            nodes.push(
+              /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card px-4 py-3", children: g.component({ values, setValue, errors }) }, `${g.id}-component`)
+            );
+          }
+          const renderedSections = renderCustomFieldsContent();
+          if (renderedSections.length) nodes.push(...renderedSections);
+          continue;
+        }
+        const componentNode = g.component ? g.component({ values, setValue, errors }) : null;
+        if (g.bare) {
+          if (componentNode) {
+            nodes.push(/* @__PURE__ */ jsx(React.Fragment, { children: componentNode }, g.id));
+          }
+          continue;
+        }
+        const groupFields = resolveGroupFields(g);
+        nodes.push(
+          /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card px-4 py-3 space-y-3", children: [
+            g.title ? /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: t(g.title, g.title) }) : null,
+            g.description ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: t(g.description, g.description) }) : null,
+            componentNode ? /* @__PURE__ */ jsx("div", { children: componentNode }) : null,
+            /* @__PURE__ */ jsx(
+              DataLoader,
+              {
+                isLoading: false,
+                loadingMessage: resolvedLoadingMessage,
+                spinnerSize: "md",
+                className: "min-h-[1px]",
+                children: groupFields.length > 0 ? renderFields(groupFields) : /* @__PURE__ */ jsx("div", { className: "min-h-[1px]" })
+              }
+            )
+          ] }, g.id)
+        );
+      }
+      return nodes;
+    };
+    const col1Content = renderGroupedCards(col1);
+    const col2Content = renderGroupedCards(col2);
+    const hasSecondaryColumn = col2Content.length > 0;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", ref: rootRef, "data-component-handle": resolvedReplacementHandle, children: [
+      !embedded ? /* @__PURE__ */ jsx(
+        FormHeader,
+        {
+          mode: "edit",
+          backHref,
+          backLabel,
+          title,
+          actions: {
+            extraActions: headerExtraActions,
+            showDelete: !formReadOnly && showDelete,
+            onDelete: handleDelete,
+            // NOSONAR — async→void assignment is valid TypeScript
+            deleteLabel,
+            cancelHref,
+            cancelLabel,
+            submit: formReadOnly ? void 0 : { formId, pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon }
+          }
+        }
+      ) : headerExtraActions ? /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-2 mb-2", children: headerExtraActions }) : null,
+      contentHeader,
+      /* @__PURE__ */ jsx(
+        DataLoader,
+        {
+          isLoading,
+          loadingMessage: resolvedLoadingMessage,
+          spinnerSize: "md",
+          className: embedded ? "min-h-[1px]" : "min-h-[400px]",
+          children: wrapFormBody(
+            /* @__PURE__ */ jsxs("form", { id: formId, onSubmit: handleSubmit, className: `space-y-4 ${dialogFormPadding}`, children: [
+              resolvedInjectionSpotId ? /* @__PURE__ */ jsx(
+                InjectionSpot,
+                {
+                  spotId: resolvedInjectionSpotId,
+                  context: injectionContext,
+                  data: values,
+                  onDataChange: (newData) => setValues(newData),
+                  disabled: pending || formReadOnly,
+                  widgetsOverride: stackedInjectionWidgets
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: hasSecondaryColumn ? "grid grid-cols-1 lg:grid-cols-[7fr_3fr] gap-4" : "grid grid-cols-1 gap-4",
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: col1Content }),
+                    hasSecondaryColumn ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children: col2Content }) : null
+                  ]
+                }
+              ),
+              formError && !Object.keys(errors).length ? /* @__PURE__ */ jsx("div", { className: "text-sm text-red-600", children: formError }) : null,
+              hideFooterActions || formReadOnly ? null : /* @__PURE__ */ jsx(
+                FormFooter,
+                {
+                  embedded,
+                  className: dialogFooterClass,
+                  actions: {
+                    extraActions,
+                    showDelete: !embedded && showDelete,
+                    onDelete: handleDelete,
+                    // NOSONAR — async→void assignment is valid TypeScript
+                    deleteLabel,
+                    cancelHref: !embedded ? cancelHref : void 0,
+                    cancelLabel,
+                    submit: { pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon }
+                  }
+                }
+              )
+            ] })
+          )
+        }
+      ),
+      fieldsetManagerDialog,
+      ConfirmDialogElement
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", ref: rootRef, "data-component-handle": resolvedReplacementHandle, children: [
+    !embedded ? /* @__PURE__ */ jsx(
+      FormHeader,
+      {
+        mode: "edit",
+        backHref,
+        backLabel,
+        title,
+        actions: {
+          extraActions: headerExtraActions,
+          showDelete: !formReadOnly && showDelete,
+          onDelete: handleDelete,
+          // NOSONAR — async→void assignment is valid TypeScript
+          deleteLabel,
+          cancelHref,
+          cancelLabel,
+          submit: formReadOnly ? void 0 : { formId, pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon }
+        }
+      }
+    ) : headerExtraActions ? /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-2 mb-2", children: headerExtraActions }) : null,
+    contentHeader,
+    /* @__PURE__ */ jsx(
+      DataLoader,
+      {
+        isLoading,
+        loadingMessage: resolvedLoadingMessage,
+        spinnerSize: "md",
+        className: embedded ? "min-h-[1px]" : "min-h-[400px]",
+        children: wrapFormBody(
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+            "form",
+            {
+              id: formId,
+              onSubmit: handleSubmit,
+              className: `${embedded ? "space-y-4" : "rounded-lg border bg-card p-4 space-y-4"} ${dialogFormPadding}`,
+              children: [
+                resolvedInjectionSpotId ? /* @__PURE__ */ jsx(
+                  InjectionSpot,
+                  {
+                    spotId: resolvedInjectionSpotId,
+                    context: injectionContext,
+                    data: values,
+                    onDataChange: (newData) => setValues(newData),
+                    disabled: pending || formReadOnly,
+                    widgetsOverride: stackedInjectionWidgets
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx("div", { className: grid, children: allFields.map((f) => {
+                  const layout = f.layout ?? "full";
+                  const wrapperClassName = usesResponsiveLayout ? resolveLayoutClass(layout) : void 0;
+                  return /* @__PURE__ */ jsx(
+                    FieldControl,
+                    {
+                      field: f,
+                      value: values[f.id],
+                      error: errors[f.id],
+                      options: fieldOptionsById.get(f.id) || EMPTY_OPTIONS,
+                      setValue,
+                      onBlurRequest: (fieldId) => {
+                        void validateFieldOnBlur(fieldId);
+                      },
+                      values,
+                      loadFieldOptions,
+                      autoFocus: !formReadOnly && Boolean(firstFieldId && f.id === firstFieldId),
+                      onSubmitRequest: requestSubmit,
+                      wrapperClassName,
+                      entityIdForField: primaryEntityId ?? void 0,
+                      recordId
+                    },
+                    f.id
+                  );
+                }) }),
+                formError && !Object.keys(errors).length ? /* @__PURE__ */ jsx("div", { className: "text-sm text-red-600", children: formError }) : null,
+                hideFooterActions || formReadOnly ? null : /* @__PURE__ */ jsx(
+                  FormFooter,
+                  {
+                    embedded,
+                    className: dialogFooterClass,
+                    actions: {
+                      extraActions,
+                      showDelete: !embedded && showDelete,
+                      onDelete: handleDelete,
+                      // NOSONAR — async→void assignment is valid TypeScript
+                      deleteLabel,
+                      cancelHref: !embedded ? cancelHref : void 0,
+                      cancelLabel,
+                      submit: { pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon }
+                    }
+                  }
+                )
+              ]
+            }
+          ) })
+        )
+      }
+    ),
+    fieldsetManagerDialog,
+    ConfirmDialogElement
+  ] });
+}
+function RelationSelect({
+  value,
+  onChange,
+  options,
+  placeholder,
+  autoFocus
+}) {
+  const t = useT();
+  const [query, setQuery] = React.useState("");
+  const inputRef = React.useRef(null);
+  const filtered = React.useMemo(() => {
+    const q = query.toLowerCase().trim();
+    if (!q) return options;
+    return options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
+  }, [query, options]);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        className: "w-full h-9 rounded border px-2 text-sm",
+        placeholder: placeholder || t("ui.forms.listbox.searchPlaceholder", "Search..."),
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        autoFocus,
+        "data-crud-focus-target": ""
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "max-h-40 overflow-auto rounded border", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "w-full justify-start rounded-none font-normal",
+          onClick: () => onChange(""),
+          children: "\u2014"
+        }
+      ),
+      filtered.map((opt) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: `w-full justify-start rounded-none font-normal ${value === opt.value ? "bg-muted" : ""}`,
+          onClick: () => onChange(opt.value),
+          children: opt.label
+        },
+        opt.value
+      ))
+    ] })
+  ] });
+}
+function TextInput({
+  value,
+  onChange,
+  placeholder,
+  autoFocus,
+  onSubmit,
+  disabled,
+  suggestions,
+  inputType = "text"
+}) {
+  const [local, setLocal] = React.useState(value);
+  const isFocusedRef = React.useRef(false);
+  const userTypingRef = React.useRef(false);
+  const datalistId = React.useId();
+  const commitIfChanged = React.useCallback(() => {
+    if (local === value) return;
+    onChange(local);
+  }, [local, onChange, value]);
+  React.useEffect(() => {
+    if (!isFocusedRef.current || !userTypingRef.current) {
+      setLocal(value);
+    }
+  }, [value]);
+  const handleChange = React.useCallback((e) => {
+    if (disabled) return;
+    const next = e.target.value;
+    userTypingRef.current = true;
+    setLocal(next);
+    onChange(next);
+  }, [disabled, onChange]);
+  const handleKeyDown = React.useCallback((e) => {
+    if (disabled) return;
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      commitIfChanged();
+      onSubmit?.();
+    }
+  }, [commitIfChanged, disabled, onSubmit]);
+  const handleFocus = React.useCallback(() => {
+    isFocusedRef.current = true;
+  }, []);
+  const handleBlur = React.useCallback(() => {
+    isFocusedRef.current = false;
+    userTypingRef.current = false;
+    commitIfChanged();
+  }, [commitIfChanged]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: inputType,
+        className: "w-full h-9 rounded border px-2 text-sm",
+        placeholder,
+        value: local,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        spellCheck: false,
+        autoFocus,
+        "data-crud-focus-target": "",
+        disabled,
+        list: suggestions && suggestions.length > 0 ? datalistId : void 0
+      }
+    ),
+    suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx("datalist", { id: datalistId, children: suggestions.map((suggestion) => /* @__PURE__ */ jsx("option", { value: suggestion }, suggestion)) })
+  ] });
+}
+function NumberInput({
+  value,
+  onChange,
+  placeholder,
+  autoFocus,
+  onSubmit
+}) {
+  const serializedValue = value !== void 0 && value !== null ? String(value) : "";
+  const [local, setLocal] = React.useState(serializedValue);
+  const isFocusedRef = React.useRef(false);
+  const commitIfChanged = React.useCallback(() => {
+    if (local === serializedValue) return;
+    const numValue = local === "" ? void 0 : Number(local);
+    onChange(numValue);
+  }, [local, onChange, serializedValue]);
+  React.useEffect(() => {
+    if (!isFocusedRef.current) {
+      setLocal(serializedValue);
+    }
+  }, [serializedValue]);
+  const handleChange = React.useCallback((e) => {
+    const next = e.target.value;
+    setLocal(next);
+    const numValue = next === "" ? void 0 : Number(next);
+    onChange(numValue);
+  }, [onChange]);
+  const handleKeyDown = React.useCallback((e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      commitIfChanged();
+      onSubmit?.();
+    }
+  }, [commitIfChanged, onSubmit]);
+  const handleFocus = React.useCallback(() => {
+    isFocusedRef.current = true;
+  }, []);
+  const handleBlur = React.useCallback(() => {
+    isFocusedRef.current = false;
+    commitIfChanged();
+  }, [commitIfChanged]);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "number",
+      className: "w-full h-9 rounded border px-2 text-sm",
+      placeholder,
+      value: local,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      autoFocus,
+      "data-crud-focus-target": ""
+    }
+  );
+}
+function TextAreaInput({
+  value,
+  onChange,
+  placeholder,
+  autoFocus
+}) {
+  const [local, setLocal] = React.useState(value);
+  const isFocusedRef = React.useRef(false);
+  const commitIfChanged = React.useCallback(() => {
+    if (local === value) return;
+    onChange(local);
+  }, [local, onChange, value]);
+  React.useEffect(() => {
+    if (!isFocusedRef.current) setLocal(value);
+  }, [value]);
+  const handleChange = React.useCallback((e) => {
+    const next = e.target.value;
+    setLocal(next);
+    onChange(next);
+  }, [onChange]);
+  const handleFocus = React.useCallback(() => {
+    isFocusedRef.current = true;
+  }, []);
+  const handleBlur = React.useCallback(() => {
+    isFocusedRef.current = false;
+    commitIfChanged();
+  }, [commitIfChanged]);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: "w-full rounded border px-2 py-2 min-h-[80px] sm:min-h-[120px] text-sm",
+      placeholder,
+      value: local,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      autoFocus,
+      "data-crud-focus-target": ""
+    }
+  );
+}
+const MDEditor = dynamic(async () => {
+  const mod = await import("@uiw/react-md-editor");
+  return mod.default;
+}, { ssr: false });
+const MarkdownEditor = React.memo(function MarkdownEditor2({ value = "", onChange }) {
+  const containerRef = React.useRef(null);
+  const [local, setLocal] = React.useState(value);
+  const typingRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!typingRef.current) setLocal(value);
+  }, [value]);
+  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: { remarkPlugins: [remarkGfm] }
+    }
+  ) });
+}, (prev, next) => prev.value === next.value);
+const HtmlRichTextEditor = React.memo(function HtmlRichTextEditor2({ value = "", onChange }) {
+  const t = useT();
+  const boldLabel = t("ui.forms.richtext.bold");
+  const italicLabel = t("ui.forms.richtext.italic");
+  const underlineLabel = t("ui.forms.richtext.underline");
+  const listLabel = t("ui.forms.richtext.list");
+  const heading3Label = t("ui.forms.richtext.heading3");
+  const linkLabel = t("ui.forms.richtext.link");
+  const linkUrlPrompt = t("ui.forms.richtext.linkUrlPrompt");
+  const ref = React.useRef(null);
+  const applyingExternal = React.useRef(false);
+  const typingRef = React.useRef(false);
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const current = el.innerHTML;
+    const sanitizedValue = sanitizeHtmlRichText(value);
+    if (!typingRef.current && current !== sanitizedValue) {
+      applyingExternal.current = true;
+      el.innerHTML = sanitizedValue;
+      requestAnimationFrame(() => {
+        applyingExternal.current = false;
+      });
+    }
+  }, [value]);
+  const exec = (cmd, arg) => {
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    try {
+      document.execCommand(cmd, false, arg);
+    } catch {
+    }
+  };
+  const onKeyDown = (e) => {
+    const isMod = e.metaKey || e.ctrlKey;
+    if (!isMod) return;
+    const k = e.key.toLowerCase();
+    if (k === "b") {
+      e.preventDefault();
+      exec("bold");
+    }
+    if (k === "i") {
+      e.preventDefault();
+      exec("italic");
+    }
+    if (k === "u") {
+      e.preventDefault();
+      exec("underline");
+    }
+  };
+  const onPaste = (e) => {
+    const html = e.clipboardData.getData("text/html");
+    const text = e.clipboardData.getData("text/plain");
+    const sanitizedPaste = sanitizeRichTextPasteContent(html, text);
+    if (!sanitizedPaste) return;
+    e.preventDefault();
+    exec(sanitizedPaste.command, sanitizedPaste.value);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full rounded border", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-2 py-1 border-b", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-auto px-2 py-0.5 text-xs", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("bold"), children: boldLabel }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-auto px-2 py-0.5 text-xs", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("italic"), children: italicLabel }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-auto px-2 py-0.5 text-xs", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("underline"), children: underlineLabel }),
+      /* @__PURE__ */ jsx("span", { className: "mx-2 text-muted-foreground", children: "|" }),
+      /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", className: "h-auto px-2 py-0.5 text-xs", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("insertUnorderedList"), children: [
+        "\u2022 ",
+        listLabel
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-auto px-2 py-0.5 text-xs", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("formatBlock", "<h3>"), children: heading3Label }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "h-auto px-2 py-0.5 text-xs",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            const url = sanitizeRichTextHref(window.prompt(linkUrlPrompt));
+            if (url) exec("createLink", url);
+          },
+          children: linkLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: "w-full px-2 py-2 min-h-[100px] sm:min-h-[160px] focus:outline-none prose prose-sm max-w-none",
+        contentEditable: true,
+        suppressContentEditableWarning: true,
+        onKeyDown,
+        onPaste,
+        onInput: () => {
+          if (!applyingExternal.current) typingRef.current = true;
+        },
+        onBlur: () => {
+          const el = ref.current;
+          if (!el) return;
+          typingRef.current = false;
+          const sanitizedValue = sanitizeHtmlRichText(el.innerHTML);
+          if (el.innerHTML !== sanitizedValue) {
+            applyingExternal.current = true;
+            el.innerHTML = sanitizedValue;
+            requestAnimationFrame(() => {
+              applyingExternal.current = false;
+            });
+          }
+          onChange(sanitizedValue);
+        }
+      }
+    )
+  ] });
+}, (prev, next) => prev.value === next.value);
+const SimpleMarkdownEditor = React.memo(function SimpleMarkdownEditor2({ value = "", onChange }) {
+  const t = useT();
+  const boldLabel = t("ui.forms.richtext.bold");
+  const italicLabel = t("ui.forms.richtext.italic");
+  const underlineLabel = t("ui.forms.richtext.underline");
+  const markdownPlaceholder = t("ui.forms.richtext.placeholder");
+  const sampleText = t("ui.forms.richtext.sampleText");
+  const taRef = React.useRef(null);
+  const [local, setLocal] = React.useState(value);
+  const typingRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!typingRef.current) setLocal(value);
+  }, [value]);
+  const wrap = (before, after = before) => {
+    const el = taRef.current;
+    if (!el) return;
+    const start = el.selectionStart ?? 0;
+    const end = el.selectionEnd ?? 0;
+    const sel = value.slice(start, end) || sampleText;
+    const next = value.slice(0, start) + before + sel + after + value.slice(end);
+    onChange(next);
+    queueMicrotask(() => {
+      const caret = start + before.length + sel.length + after.length;
+      el.focus();
+      el.setSelectionRange(caret, caret);
+    });
+  };
+  const onKeyDown = (e) => {
+    const isMod = e.metaKey || e.ctrlKey;
+    if (!isMod) return;
+    const key = e.key.toLowerCase();
+    if (key === "b") {
+      e.preventDefault();
+      wrap("**");
+    }
+    if (key === "i") {
+      e.preventDefault();
+      wrap("_");
+    }
+    if (key === "u") {
+      e.preventDefault();
+      wrap("__");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full rounded border", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-2 py-1 border-b", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-auto px-2 py-0.5 text-xs", onMouseDown: (e) => e.preventDefault(), onClick: () => wrap("**"), children: boldLabel }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-auto px-2 py-0.5 text-xs", onMouseDown: (e) => e.preventDefault(), onClick: () => wrap("_"), children: italicLabel }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-auto px-2 py-0.5 text-xs", onMouseDown: (e) => e.preventDefault(), onClick: () => wrap("__"), children: underlineLabel })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: taRef,
+        className: "w-full min-h-[100px] sm:min-h-[160px] resize-y px-2 py-2 font-mono text-sm outline-none",
+        spellCheck: false,
+        value: local,
+        onChange: (e) => {
+          typingRef.current = true;
+          setLocal(e.target.value);
+        },
+        onBlur: () => {
+          if (typingRef.current) {
+            typingRef.current = false;
+            onChange(local);
+          }
+        },
+        onKeyDown,
+        placeholder: markdownPlaceholder
+      }
+    )
+  ] });
+}, (prev, next) => prev.value === next.value);
+function supportsWrapperBlurValidation(field) {
+  return field.type === "text" || field.type === "password" || field.type === "textarea" || field.type === "checkbox" || field.type === "select" || field.type === "number";
+}
+const ListboxMultiSelect = React.memo(function ListboxMultiSelect2({
+  options,
+  placeholder,
+  value,
+  onChange,
+  autoFocus
+}) {
+  const t = useT();
+  const searchPlaceholder = placeholder || t("ui.forms.listbox.searchPlaceholder");
+  const noMatchesLabel = t("ui.forms.listbox.noMatches");
+  const [query, setQuery] = React.useState("");
+  const filtered = React.useMemo(() => {
+    const q = query.toLowerCase().trim();
+    if (!q) return options;
+    return options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
+  }, [options, query]);
+  const toggle = React.useCallback(
+    (val) => {
+      const set = new Set(value);
+      if (set.has(val)) set.delete(val);
+      else set.add(val);
+      onChange(Array.from(set));
+    },
+    [value, onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "mb-2 w-full h-8 rounded border px-2 text-sm",
+        placeholder: searchPlaceholder,
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        autoFocus,
+        "data-crud-focus-target": ""
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "rounded border max-h-48 overflow-auto divide-y", children: [
+      filtered.map((opt) => {
+        const isSel = value.includes(opt.value);
+        return /* @__PURE__ */ jsx(
+          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("input", { type: "checkbox", className: "size-4", readOnly: true, checked: isSel }),
+              /* @__PURE__ */ jsx("span", { children: opt.label })
+            ] })
+          },
+          opt.value
+        );
+      }),
+      !filtered.length ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: noMatchesLabel }) : null
+    ] })
+  ] });
+});
+const FieldControl = React.memo(
+  function FieldControlImpl({
+    field,
+    value,
+    error,
+    options,
+    setValue,
+    onBlurRequest,
+    values,
+    loadFieldOptions,
+    autoFocus,
+    onSubmitRequest,
+    wrapperClassName,
+    entityIdForField,
+    recordId
+  }) {
+    const t = useT();
+    const fieldSetValue = React.useCallback(
+      (nextValue) => setValue(field.id, nextValue),
+      [setValue, field.id]
+    );
+    const setFormValue = React.useCallback(
+      (targetId, nextValue) => setValue(targetId, nextValue),
+      [setValue]
+    );
+    const builtin = field.type === "custom" ? null : field;
+    const hasLoader = typeof builtin?.loadOptions === "function";
+    const disabled = Boolean(field.disabled);
+    const readOnly = Boolean(field.readOnly);
+    const autoFocusField = autoFocus && !disabled;
+    React.useEffect(() => {
+      if (!hasLoader || field.type === "custom") return;
+      loadFieldOptions(field).catch(() => {
+      });
+    }, [field, hasLoader, loadFieldOptions]);
+    const placeholder = builtin?.placeholder;
+    const rootClassName = wrapperClassName ? `space-y-1 ${wrapperClassName}` : "space-y-1";
+    const validateOnWrapperBlur = supportsWrapperBlurValidation(field);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: rootClassName,
+        "data-crud-field-id": field.id,
+        onBlur: validateOnWrapperBlur ? (event) => {
+          const nextFocused = event.relatedTarget;
+          if (nextFocused instanceof Node && event.currentTarget.contains(nextFocused)) return;
+          onBlurRequest(field.id);
+        } : void 0,
+        children: [
+          field.type !== "checkbox" && field.label.trim().length > 0 ? /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium", children: [
+            field.label,
+            field.required ? /* @__PURE__ */ jsx("span", { className: "text-red-600", children: " *" }) : null
+          ] }) : null,
+          field.type === "text" && /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: value == null ? "" : String(value),
+              placeholder,
+              onChange: (next) => fieldSetValue(next),
+              autoFocus: autoFocusField,
+              onSubmit: onSubmitRequest,
+              disabled,
+              suggestions: field.type === "text" ? field.suggestions : void 0
+            }
+          ),
+          field.type === "password" && /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: value == null ? "" : String(value),
+              placeholder,
+              onChange: (next) => fieldSetValue(next),
+              autoFocus: autoFocusField,
+              onSubmit: onSubmitRequest,
+              disabled,
+              inputType: "password"
+            }
+          ),
+          field.type === "number" && /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              value: typeof value === "number" || typeof value === "string" ? value : null,
+              placeholder,
+              onChange: fieldSetValue,
+              autoFocus: autoFocusField,
+              onSubmit: onSubmitRequest
+            }
+          ),
+          field.type === "date" && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "date",
+              className: "w-full h-9 rounded border px-2 text-sm",
+              value: typeof value === "string" ? value : "",
+              onChange: (e) => setValue(field.id, e.target.value || void 0),
+              autoFocus: autoFocusField,
+              "data-crud-focus-target": "",
+              disabled
+            }
+          ),
+          field.type === "datetime-local" && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "datetime-local",
+              className: "w-full h-9 rounded border px-2 text-sm",
+              value: typeof value === "string" ? value : "",
+              onChange: (e) => setValue(field.id, e.target.value || void 0),
+              autoFocus: autoFocusField,
+              "data-crud-focus-target": "",
+              disabled
+            }
+          ),
+          field.type === "datepicker" && /* @__PURE__ */ jsx(
+            DatePicker,
+            {
+              value: typeof value === "string" && value ? parseISO(value) : value instanceof Date ? value : null,
+              onChange: (date) => setValue(field.id, date ? format(date, "yyyy-MM-dd") : void 0),
+              disabled,
+              readOnly,
+              placeholder,
+              minDate: builtin?.minDate,
+              maxDate: builtin?.maxDate,
+              displayFormat: builtin?.displayFormat,
+              closeOnSelect: builtin?.closeOnSelect,
+              locale: builtin?.locale
+            }
+          ),
+          field.type === "datetime" && /* @__PURE__ */ jsx(
+            DateTimePicker,
+            {
+              value: typeof value === "string" && value ? new Date(value) : value instanceof Date ? value : null,
+              onChange: (date) => setValue(field.id, date ? date.toISOString() : void 0),
+              disabled,
+              readOnly,
+              placeholder,
+              minuteStep: builtin?.minuteStep,
+              minDate: builtin?.minDate,
+              maxDate: builtin?.maxDate,
+              displayFormat: builtin?.displayFormat,
+              locale: builtin?.locale
+            }
+          ),
+          field.type === "time" && /* @__PURE__ */ jsx(
+            TimePicker,
+            {
+              value: typeof value === "string" ? value : null,
+              onChange: (time) => setValue(field.id, time ?? void 0),
+              disabled,
+              readOnly,
+              placeholder,
+              minuteStep: builtin?.minuteStep
+            }
+          ),
+          field.type === "textarea" && /* @__PURE__ */ jsx(
+            TextAreaInput,
+            {
+              value: value == null ? "" : String(value),
+              placeholder,
+              onChange: (next) => fieldSetValue(next),
+              autoFocus: autoFocusField
+            }
+          ),
+          field.type === "richtext" && builtin?.editor === "simple" && /* @__PURE__ */ jsx(SimpleMarkdownEditor, { value: String(value ?? ""), onChange: fieldSetValue }),
+          field.type === "richtext" && builtin?.editor === "html" && /* @__PURE__ */ jsx(HtmlRichTextEditor, { value: String(value ?? ""), onChange: fieldSetValue }),
+          field.type === "richtext" && (!builtin?.editor || builtin.editor !== "simple" && builtin.editor !== "html") && /* @__PURE__ */ jsx(MarkdownEditor, { value: String(value ?? ""), onChange: fieldSetValue }),
+          field.type === "tags" && /* @__PURE__ */ jsx(
+            TagsInput,
+            {
+              value: Array.isArray(value) ? value.filter((item) => typeof item === "string") : [],
+              onChange: (next) => fieldSetValue(next),
+              placeholder,
+              autoFocus: autoFocusField,
+              suggestions: options.map((opt) => ({ value: opt.value, label: opt.label })),
+              loadSuggestions: typeof builtin?.loadOptions === "function" ? async (query) => {
+                const opts = await loadFieldOptions(field, query);
+                return opts.map((opt) => ({ value: opt.value, label: opt.label }));
+              } : void 0
+            }
+          ),
+          field.type === "combobox" && /* @__PURE__ */ jsx(
+            ComboboxInput,
+            {
+              value: typeof value === "string" ? value : String(value ?? ""),
+              onChange: (next) => fieldSetValue(next),
+              placeholder,
+              autoFocus: autoFocusField,
+              suggestions: builtin?.suggestions ? builtin.suggestions : options.map((opt) => ({ value: opt.value, label: opt.label })),
+              loadSuggestions: typeof builtin?.loadOptions === "function" ? async (query) => {
+                const opts = await loadFieldOptions(field, query);
+                return opts.map((opt) => ({ value: opt.value, label: opt.label }));
+              } : void 0,
+              allowCustomValues: builtin?.allowCustomValues ?? true,
+              disabled
+            }
+          ),
+          field.type === "checkbox" && /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                className: "size-4",
+                checked: value === true,
+                onChange: (e) => setValue(field.id, e.target.checked),
+                "data-crud-focus-target": "",
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-sm", children: field.label })
+          ] }),
+          field.type === "select" && !builtin?.multiple && /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "w-full h-9 rounded border pl-3 pr-8 text-sm",
+              value: Array.isArray(value) ? String(value[0] ?? "") : value == null ? "" : String(value),
+              onChange: (e) => setValue(field.id, e.target.value || void 0),
+              "data-crud-focus-target": "",
+              disabled,
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: t("ui.forms.select.emptyOption", "\u2014") }),
+                options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+              ]
+            }
+          ),
+          field.type === "select" && builtin?.multiple && builtin.listbox === true && /* @__PURE__ */ jsx(
+            ListboxMultiSelect,
+            {
+              options,
+              placeholder,
+              value: Array.isArray(value) ? value.filter((item) => typeof item === "string") : [],
+              onChange: (vals) => setValue(field.id, vals),
+              autoFocus: autoFocusField
+            }
+          ),
+          field.type === "select" && builtin?.multiple && builtin.listbox !== true && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: options.map((opt) => {
+            const arr = Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
+            const checked = arr.includes(opt.value);
+            return /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: "size-4",
+                  checked,
+                  onChange: (e) => {
+                    const next = new Set(arr);
+                    if (e.target.checked) {
+                      next.add(opt.value);
+                    } else {
+                      next.delete(opt.value);
+                    }
+                    setValue(field.id, Array.from(next));
+                  },
+                  disabled
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-sm", children: opt.label })
+            ] }, opt.value);
+          }) }),
+          field.type === "relation" && /* @__PURE__ */ jsx(
+            RelationSelect,
+            {
+              options,
+              placeholder,
+              value: Array.isArray(value) ? String(value[0] ?? "") : value == null ? "" : String(value),
+              onChange: (selected) => setValue(field.id, selected),
+              autoFocus: autoFocusField
+            }
+          ),
+          field.type === "custom" && /* @__PURE__ */ jsx(Fragment, { children: field.component({
+            id: field.id,
+            value,
+            error,
+            setValue: fieldSetValue,
+            setFormValue,
+            values,
+            entityId: entityIdForField,
+            recordId,
+            autoFocus,
+            disabled
+          }) }),
+          field.description ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Info, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsx("div", { children: field.description })
+          ] }) : null,
+          error ? /* @__PURE__ */ jsx("div", { className: "text-xs text-red-600", children: error }) : null
+        ]
+      }
+    );
+  },
+  (prev, next) => prev.field.id === next.field.id && prev.field.type === next.field.type && prev.field.label === next.field.label && prev.field.description === next.field.description && prev.field.required === next.field.required && prev.value === next.value && prev.error === next.error && prev.options === next.options && prev.loadFieldOptions === next.loadFieldOptions && prev.autoFocus === next.autoFocus && prev.onSubmitRequest === next.onSubmitRequest && prev.wrapperClassName === next.wrapperClassName && prev.entityIdForField === next.entityIdForField && prev.recordId === next.recordId && (prev.field.type !== "custom" || prev.values === next.values && prev.field.component === next.field.component)
+);
+export {
+  CrudForm
+};
+//# sourceMappingURL=CrudForm.js.map