@open-mercato/ui 0.4.2-canary-c02407ff85

package/dist/backend/CrudForm.js

@@ -0,0 +1,2028 @@
+"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 { Button } from "../primitives/button.js";
+import { DataLoader } from "../primitives/DataLoader.js";
+import { flash } from "./FlashMessages.js";
+import dynamic from "next/dynamic";
+import remarkGfm from "remark-gfm";
+import {
+  Trash2,
+  Save,
+  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,
+  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 { mapCrudServerErrorToFormErrors, parseServerMessage } from "./utils/serverErrors.js";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../primitives/dialog.js";
+import { FieldDefinitionsManager } from "./custom-fields/FieldDefinitionsManager.js";
+import { useInjectionSpotEvents, InjectionSpot, useInjectionWidgets } from "./injection/InjectionSpot.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 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
+};
+function CrudForm({
+  schema,
+  fields,
+  initialValues,
+  submitLabel,
+  customFieldsLoadingMessage,
+  cancelHref,
+  successRedirect,
+  deleteRedirect,
+  onSubmit,
+  onDelete,
+  deleteVisible,
+  twoColumn = false,
+  title,
+  backHref,
+  entityId,
+  entityIds,
+  groups,
+  isLoading = false,
+  loadingMessage,
+  customEntity = false,
+  embedded = false,
+  extraActions,
+  contentHeader,
+  customFieldsetBindings,
+  injectionSpotId
+}) {
+  React.useEffect(() => {
+    loadGeneratedFieldRegistrations().catch(() => {
+    });
+  }, []);
+  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 deleteConfirmMessage = 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 formId = React.useId();
+  const [values, setValues] = React.useState(
+    () => ({ ...initialValues ?? {} })
+  );
+  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 resolvedEntityIds = React.useMemo(() => {
+    if (Array.isArray(entityIds) && entityIds.length) {
+      const dedup = /* @__PURE__ */ new Set();
+      const list = [];
+      entityIds.forEach((id) => {
+        const trimmed = typeof id === "string" ? id.trim() : "";
+        if (!trimmed || dedup.has(trimmed)) return;
+        dedup.add(trimmed);
+        list.push(trimmed);
+      });
+      return list;
+    }
+    if (typeof entityId === "string" && entityId.trim().length > 0) {
+      return [entityId.trim()];
+    }
+    return [];
+  }, [entityId, entityIds]);
+  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 injectionContext = React.useMemo(() => ({
+    formId,
+    entityId: primaryEntityId,
+    isLoading,
+    pending
+  }), [formId, primaryEntityId, isLoading, pending]);
+  const { widgets: injectionWidgets } = useInjectionWidgets(resolvedInjectionSpotId, {
+    context: injectionContext,
+    triggerOnLoad: true
+  });
+  const { triggerEvent: triggerInjectionEvent } = useInjectionSpotEvents(resolvedInjectionSpotId ?? "", injectionWidgets);
+  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 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 handleDelete = React.useCallback(async () => {
+    if (!onDelete) return;
+    try {
+      const ok = typeof window !== "undefined" ? window.confirm(deleteConfirmMessage) : true;
+      if (!ok) return;
+      await onDelete();
+      try {
+        flash(deleteSuccessMessage, "success");
+      } catch {
+      }
+      if (typeof deleteRedirect === "string" && deleteRedirect) {
+        router.push(deleteRedirect);
+      }
+    } catch (err) {
+      const message = err instanceof Error && err.message ? err.message : deleteErrorMessage;
+      try {
+        flash(message, "error");
+      } catch {
+      }
+    }
+  }, [onDelete, deleteRedirect, router, deleteConfirmMessage, deleteSuccessMessage, deleteErrorMessage]);
+  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);
+  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 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 allFields = React.useMemo(() => {
+    if (!cfFields.length) return fields;
+    const provided = new Set(fields.map((f) => f.id));
+    const extras = cfFields.filter((f) => !provided.has(f.id));
+    return [...fields, ...extras];
+  }, [fields, cfFields]);
+  const fieldById = React.useMemo(() => {
+    return new globalThis.Map(allFields.map((f) => [f.id, f]));
+  }, [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 shouldAutoGroup = (!groups || groups.length === 0) && injectionGroupCards.length > 0;
+  const resolvedGroupsForLayout = React.useMemo(() => {
+    const baseGroups = groups && groups.length ? groups : [];
+    const autoGroup = shouldAutoGroup ? [{ id: "__auto-fields__", fields: allFields }] : [];
+    return [...baseGroups.length ? baseGroups : autoGroup, ...injectionGroupCards];
+  }, [allFields, groups, injectionGroupCards, shouldAutoGroup]);
+  const useGroupedLayout = resolvedGroupsForLayout.length > 0;
+  const stackedInjectionWidgets = React.useMemo(
+    () => (injectionWidgets ?? []).filter((widget) => (widget.placement?.kind ?? "stack") === "stack"),
+    [injectionWidgets]
+  );
+  const resolveGroupFields = React.useCallback((g) => {
+    if (g.kind === "customFields") {
+      return cfFields;
+    }
+    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]);
+  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 (typeof document === "undefined") return;
+    const form = document.getElementById(formId);
+    form?.requestSubmit();
+  }, [formId]);
+  const lastFocusedFieldRef = React.useRef(null);
+  const lastErrorFieldRef = React.useRef(null);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+    if (isLoading || isLoadingCustomFields) {
+      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();
+        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, 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) => {
+    setValues((prev) => {
+      if (Object.is(prev[id], nextValue)) return prev;
+      return { ...prev, [id]: nextValue };
+    });
+  }, []);
+  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]
+  );
+  React.useEffect(() => {
+    if (!initialValues) return;
+    setValues((prev) => ({ ...prev, ...initialValues }));
+  }, [initialValues]);
+  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();
+    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;
+      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);
+      }
+      setErrors(requiredErrors);
+      flash(highlightedMessage, "error");
+      return;
+    }
+    if (resolvedEntityIds.length) {
+      try {
+        const mod = await import("./utils/customFieldDefs.js");
+        const defs = await 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 = 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);
+            setErrors((prev) => ({ ...prev, ...mapped }));
+          } else {
+            setErrors((prev) => ({ ...prev, ...result.fieldErrors }));
+          }
+          flash(highlightedMessage, "error");
+          return;
+        }
+      } catch {
+      }
+    }
+    let parsedValues;
+    if (schema) {
+      const res = schema.safeParse(values);
+      if (!res.success) {
+        const fieldErrors = {};
+        res.error.issues.forEach((issue) => {
+          if (issue.path && issue.path.length) fieldErrors[String(issue.path[0])] = issue.message;
+        });
+        if (process.env.NODE_ENV !== "production") {
+          console.debug("[crud-form] Schema validation failed", res.error.issues);
+        }
+        setErrors(fieldErrors);
+        flash(highlightedMessage, "error");
+        return;
+      }
+      parsedValues = res.data;
+    } else {
+      parsedValues = values;
+    }
+    if (resolvedInjectionSpotId) {
+      try {
+        const result = await triggerInjectionEvent("onBeforeSave", parsedValues, injectionContext);
+        if (!result.ok) {
+          if (result.fieldErrors && Object.keys(result.fieldErrors).length) {
+            setErrors(result.fieldErrors);
+          }
+          const message = result.message || t("ui.forms.flash.saveBlocked", "Save blocked by validation");
+          flash(message, "error");
+          setPending(false);
+          return;
+        }
+      } 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);
+    if (resolvedInjectionSpotId) {
+      try {
+        await triggerInjectionEvent("onSave", parsedValues, 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 {
+      await onSubmit?.(parsedValues);
+      if (resolvedInjectionSpotId) {
+        try {
+          await triggerInjectionEvent("onAfterSave", parsedValues, injectionContext);
+        } catch (err) {
+          console.error("[CrudForm] Error in onAfterSave:", err);
+        }
+      }
+      if (successRedirect) router.push(successRedirect);
+    } catch (err) {
+      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];
+        return typeof value === "string" && value.trim().length ? value.trim() : null;
+      })() : null;
+      if (hasFieldErrors) {
+        setErrors(combinedFieldErrors);
+        if (process.env.NODE_ENV !== "production") {
+          console.debug("[crud-form] Submission failed with field errors", combinedFieldErrors);
+        }
+      }
+      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);
+      flash(displayMessage, "error");
+      setFormError(displayMessage);
+    } finally {
+      setPending(false);
+    }
+  };
+  React.useEffect(() => {
+    let cancelled = false;
+    const loadAll = async () => {
+      const loaders = allFields.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;
+    };
+  }, [allFields]);
+  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,
+          values,
+          loadFieldOptions,
+          autoFocus: 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 px-2 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__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex h-8 w-8 items-center justify-center rounded border 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" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: manageFieldsetLabel })
+                ]
+              }
+            )
+          ] }) }, `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",
+                    className: "inline-flex items-center gap-1 rounded border px-2 py-1 text-xs text-muted-foreground hover:text-foreground disabled:opacity-50",
+                    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"}`;
+                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(group.fields)
+                ] }, 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,
+    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",
+      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(
+          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 })
+      ]
+    }
+  ) });
+  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, children: [
+      !embedded ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          backHref ? /* @__PURE__ */ jsxs(Link, { href: backHref, className: "text-sm text-muted-foreground hover:text-foreground", children: [
+            "\u2190 ",
+            backLabel
+          ] }) : null,
+          title ? /* @__PURE__ */ jsx("div", { className: "text-base font-medium", children: title }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          extraActions,
+          showDelete ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: handleDelete, className: "text-red-600 border-red-200 hover:bg-red-50 rounded", children: [
+            /* @__PURE__ */ jsx(Trash2, { className: "size-4 mr-2" }),
+            deleteLabel
+          ] }) : null,
+          cancelHref ? /* @__PURE__ */ jsx(Link, { href: cancelHref, className: "h-9 inline-flex items-center rounded border px-3 text-sm", children: cancelLabel }) : null,
+          /* @__PURE__ */ jsxs(Button, { type: "submit", form: formId, disabled: pending, children: [
+            /* @__PURE__ */ jsx(Save, { className: "size-4 mr-2" }),
+            pending ? savingLabel : resolvedSubmitLabel
+          ] })
+        ] })
+      ] }) : null,
+      contentHeader,
+      /* @__PURE__ */ jsx(
+        DataLoader,
+        {
+          isLoading,
+          loadingMessage: resolvedLoadingMessage,
+          spinnerSize: "md",
+          className: "min-h-[400px]",
+          children: /* @__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,
+                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 ? /* @__PURE__ */ jsx("div", { className: "text-sm text-red-600", children: formError }) : null,
+            /* @__PURE__ */ jsxs("div", { className: `flex items-center ${embedded ? "justify-end" : "justify-between"} gap-2 ${dialogFooterClass}`, children: [
+              embedded ? null : /* @__PURE__ */ jsx("div", {}),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                extraActions,
+                !embedded && showDelete ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: handleDelete, className: "text-red-600 border-red-200 hover:bg-red-50 rounded", children: [
+                  /* @__PURE__ */ jsx(Trash2, { className: "size-4 mr-2" }),
+                  deleteLabel
+                ] }) : null,
+                !embedded && cancelHref ? /* @__PURE__ */ jsx(Link, { href: cancelHref, className: "h-9 inline-flex items-center rounded border px-3 text-sm", children: cancelLabel }) : null,
+                /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: pending, children: [
+                  /* @__PURE__ */ jsx(Save, { className: "size-4 mr-2" }),
+                  pending ? savingLabel : resolvedSubmitLabel
+                ] })
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      fieldsetManagerDialog
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", ref: rootRef, children: [
+    !embedded ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        backHref ? /* @__PURE__ */ jsxs(Link, { href: backHref, className: "text-sm text-muted-foreground hover:text-foreground", children: [
+          "\u2190 ",
+          backLabel
+        ] }) : null,
+        title ? /* @__PURE__ */ jsx("div", { className: "text-base font-medium", children: title }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        extraActions,
+        showDelete ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: handleDelete, className: "text-red-600 border-red-200 hover:bg-red-50 rounded", children: [
+          /* @__PURE__ */ jsx(Trash2, { className: "size-4 mr-2" }),
+          deleteLabel
+        ] }) : null,
+        cancelHref ? /* @__PURE__ */ jsx(Link, { href: cancelHref, className: "h-9 inline-flex items-center rounded border px-3 text-sm", children: cancelLabel }) : null,
+        /* @__PURE__ */ jsxs(Button, { type: "submit", form: formId, disabled: pending, children: [
+          /* @__PURE__ */ jsx(Save, { className: "size-4 mr-2" }),
+          pending ? savingLabel : resolvedSubmitLabel
+        ] })
+      ] })
+    ] }) : null,
+    contentHeader,
+    /* @__PURE__ */ jsx(
+      DataLoader,
+      {
+        isLoading,
+        loadingMessage: resolvedLoadingMessage,
+        spinnerSize: "md",
+        className: "min-h-[400px]",
+        children: /* @__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,
+                  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,
+                    values,
+                    loadFieldOptions,
+                    autoFocus: Boolean(firstFieldId && f.id === firstFieldId),
+                    onSubmitRequest: requestSubmit,
+                    wrapperClassName,
+                    entityIdForField: primaryEntityId ?? void 0,
+                    recordId
+                  },
+                  f.id
+                );
+              }) }),
+              formError ? /* @__PURE__ */ jsx("div", { className: "text-sm text-red-600", children: formError }) : null,
+              /* @__PURE__ */ jsxs("div", { className: `flex items-center ${embedded ? "justify-end" : "justify-end"} gap-2 ${dialogFooterClass}`, children: [
+                extraActions,
+                !embedded && showDelete ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: handleDelete, className: "text-red-600 border-red-200 hover:bg-red-50", children: [
+                  /* @__PURE__ */ jsx(Trash2, { className: "size-4 mr-2" }),
+                  deleteLabel
+                ] }) : null,
+                !embedded && cancelHref ? /* @__PURE__ */ jsx(Link, { href: cancelHref, className: "h-9 inline-flex items-center rounded border px-3 text-sm", children: cancelLabel }) : null,
+                /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: pending, children: [
+                  /* @__PURE__ */ jsx(Save, { className: "size-4 mr-2" }),
+                  pending ? savingLabel : resolvedSubmitLabel
+                ] })
+              ] })
+            ]
+          }
+        ) })
+      }
+    ),
+    fieldsetManagerDialog
+  ] });
+}
+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",
+        {
+          type: "button",
+          className: "block w-full text-left px-2 py-1 text-sm hover:bg-muted",
+          onClick: () => onChange(""),
+          children: "\u2014"
+        }
+      ),
+      filtered.map((opt) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `block w-full text-left px-2 py-1 text-sm hover:bg-muted ${value === opt.value ? "bg-muted" : ""}`,
+          onClick: () => onChange(opt.value),
+          children: opt.label
+        },
+        opt.value
+      ))
+    ] })
+  ] });
+}
+function TextInput({
+  value,
+  onChange,
+  placeholder,
+  autoFocus,
+  onSubmit,
+  disabled,
+  suggestions
+}) {
+  const [local, setLocal] = React.useState(value);
+  const isFocusedRef = React.useRef(false);
+  const userTypingRef = React.useRef(false);
+  const datalistId = React.useId();
+  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();
+      onChange(local);
+      onSubmit?.();
+    }
+  }, [disabled, local, onChange, onSubmit]);
+  const handleFocus = React.useCallback(() => {
+    isFocusedRef.current = true;
+  }, []);
+  const handleBlur = React.useCallback(() => {
+    isFocusedRef.current = false;
+    userTypingRef.current = false;
+    onChange(local);
+  }, [local, onChange]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        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 [local, setLocal] = React.useState(value !== void 0 && value !== null ? String(value) : "");
+  const isFocusedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!isFocusedRef.current) {
+      setLocal(value !== void 0 && value !== null ? String(value) : "");
+    }
+  }, [value]);
+  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();
+      const numValue = local === "" ? void 0 : Number(local);
+      onChange(numValue);
+      onSubmit?.();
+    }
+  }, [local, onChange, onSubmit]);
+  const handleFocus = React.useCallback(() => {
+    isFocusedRef.current = true;
+  }, []);
+  const handleBlur = React.useCallback(() => {
+    isFocusedRef.current = false;
+    const numValue = local === "" ? void 0 : Number(local);
+    onChange(numValue);
+  }, [local, onChange]);
+  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);
+  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;
+    onChange(local);
+  }, [local, onChange]);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: "w-full rounded border px-2 py-2 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;
+    if (!typingRef.current && current !== value) {
+      applyingExternal.current = true;
+      el.innerHTML = value || "";
+      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");
+    }
+  };
+  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", { type: "button", className: "px-2 py-0.5 text-xs rounded hover:bg-muted", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("bold"), children: boldLabel }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "px-2 py-0.5 text-xs rounded hover:bg-muted", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("italic"), children: italicLabel }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "px-2 py-0.5 text-xs rounded hover:bg-muted", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("underline"), children: underlineLabel }),
+      /* @__PURE__ */ jsx("span", { className: "mx-2 text-muted-foreground", children: "|" }),
+      /* @__PURE__ */ jsxs("button", { type: "button", className: "px-2 py-0.5 text-xs rounded hover:bg-muted", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("insertUnorderedList"), children: [
+        "\u2022 ",
+        listLabel
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "px-2 py-0.5 text-xs rounded hover:bg-muted", onMouseDown: (e) => e.preventDefault(), onClick: () => exec("formatBlock", "<h3>"), children: heading3Label }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "px-2 py-0.5 text-xs rounded hover:bg-muted",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            const url = window.prompt(linkUrlPrompt)?.trim();
+            if (url) exec("createLink", url);
+          },
+          children: linkLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: "w-full px-2 py-2 min-h-[160px] focus:outline-none prose prose-sm max-w-none",
+        contentEditable: true,
+        suppressContentEditableWarning: true,
+        onKeyDown,
+        onInput: () => {
+          if (!applyingExternal.current) typingRef.current = true;
+        },
+        onBlur: () => {
+          const el = ref.current;
+          if (!el) return;
+          typingRef.current = false;
+          onChange(el.innerHTML);
+        }
+      }
+    )
+  ] });
+}, (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", { type: "button", className: "px-2 py-0.5 text-xs rounded hover:bg-muted", onMouseDown: (e) => e.preventDefault(), onClick: () => wrap("**"), children: boldLabel }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "px-2 py-0.5 text-xs rounded hover:bg-muted", onMouseDown: (e) => e.preventDefault(), onClick: () => wrap("_"), children: italicLabel }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "px-2 py-0.5 text-xs rounded hover:bg-muted", onMouseDown: (e) => e.preventDefault(), onClick: () => wrap("__"), children: underlineLabel })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: taRef,
+        className: "w-full 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);
+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",
+          {
+            type: "button",
+            onClick: () => toggle(opt.value),
+            className: `w-full text-left px-3 py-2 text-sm hover:bg-muted ${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,
+    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 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";
+    return /* @__PURE__ */ jsxs("div", { className: rootClassName, "data-crud-field-id": field.id, 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 === "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 === "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) => opt.label),
+          loadSuggestions: typeof builtin?.loadOptions === "function" ? async (query) => {
+            const opts = await loadFieldOptions(field, query);
+            return opts.map((opt) => 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 px-2 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__ */ jsx("div", { className: "text-xs text-muted-foreground", 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.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