@open-mercato/ui 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7195.1.b5efd1d51a

package/dist/backend/CrudForm.js

@@ -381,6 +381,7 @@ function CrudForm({
   loadingMessage,
   customEntity = false,
   embedded = false,
+  density = "default",
   hideFooterActions = false,
   trackDirtyWhenEmbedded = false,
   onDirtyChange,
@@ -886,6 +887,11 @@ function CrudForm({
   }, []);
   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 = "";
+  const isCompactDensity = density === "compact";
+  const densityStackLg = isCompactDensity ? "space-y-3" : "space-y-4";
+  const densityStackMd = isCompactDensity ? "space-y-2" : "space-y-3";
+  const densityCardPadding = isCompactDensity ? "p-3" : "p-4";
+  const densityGroupCardPadding = isCompactDensity ? "px-3 py-2" : "px-4 py-3";
   const buildCustomFieldsManageHref = React.useCallback(
     (targetEntityId) => {
       if (!targetEntityId) return null;
@@ -2551,7 +2557,7 @@ function CrudForm({
           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: `rounded-lg border bg-card ${densityCardPadding} ${densityStackLg}`, 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,
@@ -2763,7 +2769,7 @@ function CrudForm({
                   errorCount: customFieldErrors,
                   fieldCount: customFieldCount,
                   chevronPosition: collapsibleChevronPosition,
-                  children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: customFieldsInnerNodes })
+                  children: /* @__PURE__ */ jsx("div", { className: densityStackMd, children: customFieldsInnerNodes })
                 },
                 g.id
               )
@@ -2812,14 +2818,14 @@ function CrudForm({
                 errorCount: groupErrorCount,
                 fieldCount: groupFields.length,
                 chevronPosition: collapsibleChevronPosition,
-                children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: groupContent })
+                children: /* @__PURE__ */ jsx("div", { className: densityStackMd, children: groupContent })
               },
               g.id
             )
           );
         } else {
           nodes.push(
-            /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card px-4 py-3 space-y-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card ${densityGroupCardPadding} ${densityStackMd}`, children: [
               g.title ? /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: t(g.title, g.title) }) : null,
               groupContent
             ] }, g.id)
@@ -2862,7 +2868,7 @@ function CrudForm({
           spinnerSize: "md",
           className: embedded ? "min-h-[1px]" : "min-h-[400px]",
           children: wrapFormBody(
-            /* @__PURE__ */ jsxs("form", { id: formId, onSubmit: handleSubmit, className: `space-y-4 ${dialogFormPadding}`, children: [
+            /* @__PURE__ */ jsxs("form", { id: formId, onSubmit: handleSubmit, className: `${densityStackLg} ${dialogFormPadding}`, children: [
               resolvedInjectionSpotId ? /* @__PURE__ */ jsx(
                 InjectionSpot,
                 {
@@ -2879,8 +2885,8 @@ function CrudForm({
                 {
                   className: hasSecondaryColumn ? "grid grid-cols-1 lg:grid-cols-[7fr_3fr] gap-4" : "grid grid-cols-1 gap-4",
                   children: [
-                    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", "data-crud-injection-region": true, children: col2Content }) : null
+                    sortableGroupsEnabled ? /* @__PURE__ */ jsx(DndContext, { sensors: sortableSensors, collisionDetection: closestCenter, onDragEnd: handleGroupDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: col1Ids, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx("div", { className: densityStackMd, children: col1Content }) }) }) : /* @__PURE__ */ jsx("div", { className: densityStackMd, children: col1Content }),
+                    hasSecondaryColumn ? /* @__PURE__ */ jsx("div", { className: densityStackMd, "data-crud-injection-region": true, children: col2Content }) : null
                   ]
                 }
               ),
@@ -2945,7 +2951,7 @@ function CrudForm({
             {
               id: formId,
               onSubmit: handleSubmit,
-              className: `${embedded ? "space-y-4" : "rounded-lg border bg-card p-4 space-y-4"} ${dialogFormPadding}`,
+              className: `${embedded ? densityStackLg : `rounded-lg border bg-card ${densityCardPadding} ${densityStackLg}`} ${dialogFormPadding}`,
               children: [
                 resolvedInjectionSpotId ? /* @__PURE__ */ jsx(
                   InjectionSpot,