@open-mercato/ui 0.5.1-develop.2663.2c29774b5b → 0.5.1-develop.2681.c559bb2bc3

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
-Generated lucide registry with 127 icons -> /home/runner/work/open-mercato/open-mercato/packages/ui/src/backend/icons/lucideRegistry.generated.tsx
-Found 257 entry points
+Generated lucide registry with 134 icons -> /home/runner/work/open-mercato/open-mercato/packages/ui/src/backend/icons/lucideRegistry.generated.tsx
+Found 264 entry points
 ui built successfully

package/dist/backend/CrudForm.js

@@ -3,6 +3,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { DndContext, closestCenter, PointerSensor, KeyboardSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { DataLoader } from "../primitives/DataLoader.js";
 import { flash } from "./FlashMessages.js";
 import dynamic from "next/dynamic";
@@ -67,6 +70,8 @@ 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 { CollapsibleGroup } from "./crud/CollapsibleGroup.js";
+import { useGroupOrder } from "./crud/useGroupOrder.js";
 import { InjectedField } from "./injection/InjectedField.js";
 import { evaluateInjectedVisibility } from "./injection/visibility-utils.js";
 import { ComponentReplacementHandles } from "@open-mercato/shared/modules/widgets/component-registry";
@@ -180,6 +185,16 @@ class FieldDefinitionsManagerErrorBoundary extends React.Component {
     return this.props.children;
   }
 }
+function SortableGroupItem({ id, children, disabled }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id, disabled });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    position: "relative"
+  };
+  return /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners, children });
+}
 function CrudForm({
   schema,
   fields,
@@ -205,6 +220,8 @@ function CrudForm({
   customEntity = false,
   embedded = false,
   hideFooterActions = false,
+  trackDirtyWhenEmbedded = false,
+  onDirtyChange,
   extraActions,
   versionHistory,
   contentHeader,
@@ -213,6 +230,8 @@ function CrudForm({
   customFieldsetBindings,
   injectionSpotId,
   replacementHandle,
+  collapsibleGroups,
+  sortableGroups,
   shouldBypassUnsavedChangesGuard
 }) {
   React.useEffect(() => {
@@ -262,6 +281,12 @@ function CrudForm({
   const [fieldsetEditorTarget, setFieldsetEditorTarget] = React.useState(null);
   const [isInDialog, setIsInDialog] = React.useState(false);
   const rootRef = React.useRef(null);
+  const collapsibleGroupsEnabled = Boolean(collapsibleGroups);
+  const collapsiblePageType = typeof collapsibleGroups === "object" ? collapsibleGroups.pageType : formId;
+  const collapsibleChevronPosition = typeof collapsibleGroups === "object" ? collapsibleGroups.chevronPosition : void 0;
+  const groupCollapseRefs = React.useRef(/* @__PURE__ */ new Map());
+  const sortableGroupsEnabled = Boolean(sortableGroups);
+  const sortablePageType = typeof sortableGroups === "object" ? sortableGroups.pageType : formId;
   const fieldsetManagerRef = React.useRef(null);
   const resolvedEntityIdsKey = React.useMemo(() => buildResolvedEntityIdsKey(entityId, entityIds), [entityId, entityIds]);
   const resolvedEntityIds = React.useMemo(
@@ -320,7 +345,7 @@ function CrudForm({
     shouldBypassUnsavedChangesGuardRef.current = shouldBypassUnsavedChangesGuard;
   }, [shouldBypassUnsavedChangesGuard]);
   React.useEffect(() => {
-    if (embedded) {
+    if (embedded && !trackDirtyWhenEmbedded) {
       isDirtyRef.current = false;
       setHasUnsavedChanges(false);
       return;
@@ -335,7 +360,10 @@ function CrudForm({
     const dirty = currentSnapshot !== snapshot;
     isDirtyRef.current = dirty;
     setHasUnsavedChanges(dirty);
-  }, [embedded, values]);
+  }, [embedded, trackDirtyWhenEmbedded, values]);
+  React.useEffect(() => {
+    onDirtyChange?.(hasUnsavedChanges);
+  }, [hasUnsavedChanges, onDirtyChange]);
   const allowNextNavigation = React.useCallback(() => {
     navigationPromptBypassRef.current = true;
     if (typeof window !== "undefined") {
@@ -389,7 +417,7 @@ function CrudForm({
     }
   }, [allowNextNavigation, confirm, t]);
   React.useEffect(() => {
-    if (embedded || !hasUnsavedChanges) return;
+    if (embedded && !trackDirtyWhenEmbedded || !hasUnsavedChanges) return;
     const beforeUnloadHandler = (event) => {
       if (!isDirtyRef.current) return;
       event.preventDefault();
@@ -463,7 +491,7 @@ function CrudForm({
       window.history.pushState = originalPushState;
       window.history.replaceState = originalReplaceState;
     };
-  }, [allowNextNavigation, clearDirtyState, confirmUnsavedChanges, embedded, hasUnsavedChanges, router]);
+  }, [allowNextNavigation, clearDirtyState, confirmUnsavedChanges, embedded, hasUnsavedChanges, router, trackDirtyWhenEmbedded]);
   const { widgets: injectionWidgets } = useInjectionWidgets(resolvedInjectionSpotId, {
     context: injectionContext,
     triggerOnLoad: true
@@ -1241,6 +1269,33 @@ function CrudForm({
     return [...baseGroups.length ? baseGroups : autoGroup, ...injectionGroupCards];
   }, [allFields, groupsWithInjectedFields, injectionGroupCards, shouldAutoGroup]);
   const useGroupedLayout = resolvedGroupsForLayout.length > 0;
+  const defaultGroupIds = React.useMemo(() => resolvedGroupsForLayout.map((g) => g.id), [resolvedGroupsForLayout]);
+  const { orderedIds: sortedGroupIds, reorder: reorderGroups } = useGroupOrder(
+    sortablePageType,
+    defaultGroupIds
+  );
+  const sortableSensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor)
+  );
+  const handleGroupDragEnd = React.useCallback((event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = sortedGroupIds.indexOf(String(active.id));
+    const newIndex = sortedGroupIds.indexOf(String(over.id));
+    if (oldIndex !== -1 && newIndex !== -1) reorderGroups(oldIndex, newIndex);
+  }, [sortedGroupIds, reorderGroups]);
+  React.useEffect(() => {
+    if (!collapsibleGroupsEnabled || Object.keys(errors).length === 0) return;
+    const errorFieldIds = new Set(Object.keys(errors));
+    for (const g of resolvedGroupsForLayout) {
+      const groupFieldIds = (g.fields ?? []).map((f) => typeof f === "string" ? f : f.id);
+      const hasError = groupFieldIds.some((id) => errorFieldIds.has(id));
+      if (hasError) {
+        groupCollapseRefs.current.get(g.id)?.expand();
+      }
+    }
+  }, [errors, collapsibleGroupsEnabled, resolvedGroupsForLayout]);
   const stackedInjectionWidgets = React.useMemo(
     () => (injectionWidgets ?? []).filter((widget) => (widget.placement?.kind ?? "stack") === "stack"),
     [injectionWidgets]
@@ -2149,39 +2204,104 @@ function CrudForm({
     );
   }, [formReadOnly, handleReadOnlyFocusCapture, handleReadOnlyKeyDownCapture, readOnlyOverlay]);
   if (useGroupedLayout) {
+    const sortedGroups = sortableGroupsEnabled ? [...resolvedGroupsForLayout].sort((a, b) => {
+      const ai = sortedGroupIds.indexOf(a.id);
+      const bi = sortedGroupIds.indexOf(b.id);
+      return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi);
+    }) : resolvedGroupsForLayout;
     const col1 = [];
     const col2 = [];
-    for (const g of resolvedGroupsForLayout) {
+    for (const g of sortedGroups) {
       if ((g.column ?? 1) === 2) col2.push(g);
       else col1.push(g);
     }
+    const col1Ids = col1.map((g) => g.id);
     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`)
-            );
+            const loadingContent = /* @__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`);
+            if (collapsibleGroupsEnabled && g.title) {
+              nodes.push(
+                /* @__PURE__ */ jsx(
+                  CollapsibleGroup,
+                  {
+                    groupId: g.id,
+                    title: t(g.title, g.title),
+                    pageType: collapsiblePageType,
+                    chevronPosition: collapsibleChevronPosition,
+                    children: loadingContent
+                  },
+                  `${g.id}-loading-collapsible`
+                )
+              );
+            } else {
+              nodes.push(loadingContent);
+            }
             continue;
           }
+          const customFieldsInnerNodes = [];
           if (g.component) {
-            nodes.push(
+            customFieldsInnerNodes.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);
+          if (renderedSections.length) customFieldsInnerNodes.push(...renderedSections);
+          if (collapsibleGroupsEnabled && g.title) {
+            const customFieldCount = customFieldLayout.reduce(
+              (sum, entity) => sum + entity.sections.reduce(
+                (sSum, section) => sSum + section.groups.reduce(
+                  (gSum, group) => gSum + group.fields.length,
+                  0
+                ),
+                0
+              ),
+              0
+            );
+            const customFieldErrors = customFieldLayout.reduce(
+              (sum, entity) => sum + entity.sections.reduce(
+                (sSum, section) => sSum + section.groups.reduce(
+                  (gSum, group) => gSum + group.fields.filter((f) => errors[f.id]).length,
+                  0
+                ),
+                0
+              ),
+              0
+            );
+            nodes.push(
+              /* @__PURE__ */ jsx(
+                CollapsibleGroup,
+                {
+                  ref: (handle) => {
+                    if (handle) groupCollapseRefs.current.set(g.id, handle);
+                    else groupCollapseRefs.current.delete(g.id);
+                  },
+                  groupId: g.id,
+                  title: t(g.title, g.title),
+                  pageType: collapsiblePageType,
+                  errorCount: customFieldErrors,
+                  fieldCount: customFieldCount,
+                  chevronPosition: collapsibleChevronPosition,
+                  children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: customFieldsInnerNodes })
+                },
+                g.id
+              )
+            );
+          } else {
+            nodes.push(...customFieldsInnerNodes);
+          }
           continue;
         }
         const componentNode = g.component ? g.component({ values, setValue, errors }) : null;
@@ -2192,28 +2312,56 @@ function CrudForm({
           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,
+        const groupFieldIds = (g.fields ?? []).map((f) => typeof f === "string" ? f : f.id);
+        const groupErrorCount = groupFieldIds.filter((id) => errors[id]).length;
+        const groupContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+          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]" })
+            }
+          )
+        ] });
+        if (collapsibleGroupsEnabled && g.title) {
+          nodes.push(
             /* @__PURE__ */ jsx(
-              DataLoader,
+              CollapsibleGroup,
               {
-                isLoading: false,
-                loadingMessage: resolvedLoadingMessage,
-                spinnerSize: "md",
-                className: "min-h-[1px]",
-                children: groupFields.length > 0 ? renderFields(groupFields) : /* @__PURE__ */ jsx("div", { className: "min-h-[1px]" })
-              }
+                ref: (handle) => {
+                  if (handle) groupCollapseRefs.current.set(g.id, handle);
+                  else groupCollapseRefs.current.delete(g.id);
+                },
+                groupId: g.id,
+                title: t(g.title, g.title),
+                pageType: collapsiblePageType,
+                errorCount: groupErrorCount,
+                fieldCount: groupFields.length,
+                chevronPosition: collapsibleChevronPosition,
+                children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: groupContent })
+              },
+              g.id
             )
-          ] }, g.id)
-        );
+          );
+        } else {
+          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,
+              groupContent
+            ] }, g.id)
+          );
+        }
       }
       return nodes;
     };
-    const col1Content = renderGroupedCards(col1);
+    const col1Nodes = renderGroupedCards(col1);
     const col2Content = renderGroupedCards(col2);
+    const col1Content = sortableGroupsEnabled ? col1Nodes.map((node, i) => /* @__PURE__ */ jsx(SortableGroupItem, { id: col1[i]?.id ?? String(i), children: node }, col1[i]?.id ?? i)) : col1Nodes;
     const hasSecondaryColumn = col2Content.length > 0;
     return /* @__PURE__ */ jsxs("div", { className: "space-y-4", ref: rootRef, "data-component-handle": resolvedReplacementHandle, children: [
       !embedded ? /* @__PURE__ */ jsx(
@@ -2261,12 +2409,12 @@ function CrudForm({
                 {
                   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 }),
+                    sortableGroupsEnabled ? /* @__PURE__ */ jsx(DndContext, { sensors: sortableSensors, collisionDetection: closestCenter, onDragEnd: handleGroupDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: col1Ids, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: col1Content }) }) }) : /* @__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,
+              formError && !Object.keys(errors).length ? /* @__PURE__ */ jsx("div", { className: "text-sm text-status-error-text", children: formError }) : null,
               hideFooterActions || formReadOnly ? null : /* @__PURE__ */ jsx(
                 FormFooter,
                 {
@@ -2362,7 +2510,7 @@ function CrudForm({
                     f.id
                   );
                 }) }),
-                formError && !Object.keys(errors).length ? /* @__PURE__ */ jsx("div", { className: "text-sm text-red-600", children: formError }) : null,
+                formError && !Object.keys(errors).length ? /* @__PURE__ */ jsx("div", { className: "text-sm text-status-error-text", children: formError }) : null,
                 hideFooterActions || formReadOnly ? null : /* @__PURE__ */ jsx(
                   FormFooter,
                   {
@@ -2962,7 +3110,7 @@ const FieldControl = React.memo(
         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
+            field.required ? /* @__PURE__ */ jsx("span", { className: "text-status-error-text", children: " *" }) : null
           ] }) : null,
           field.type === "text" && /* @__PURE__ */ jsx(
             TextInput,
@@ -3194,7 +3342,7 @@ const FieldControl = React.memo(
             /* @__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
+          error ? /* @__PURE__ */ jsx("div", { className: "text-xs text-status-error-text", children: error }) : null
         ]
       }
     );