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

package/dist/primitives/avatar.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "@open-mercato/shared/lib/utils";
+const avatarVariants = cva(
+  "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full font-semibold select-none",
+  {
+    variants: {
+      size: {
+        xs: "size-5 text-xs",
+        sm: "size-7 text-xs",
+        md: "size-9 text-sm",
+        lg: "size-12 text-base",
+        xl: "size-16 text-xl"
+      },
+      variant: {
+        default: "bg-primary/10 text-primary",
+        monochrome: "bg-muted text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+function computeInitials(label) {
+  const trimmed = label.trim();
+  if (!trimmed.length) return "?";
+  const parts = trimmed.split(/\s+/).filter(Boolean);
+  if (parts.length === 1) {
+    return parts[0].slice(0, 2).toUpperCase();
+  }
+  const first = parts[0][0] ?? "";
+  const last = parts[parts.length - 1][0] ?? "";
+  return (first + last).toUpperCase();
+}
+const Avatar = React.forwardRef(
+  ({ className, label, src, icon, size, variant, ariaLabel, ...rest }, ref) => {
+    const initials = React.useMemo(() => computeInitials(label), [label]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "img",
+        "aria-label": ariaLabel ?? label,
+        className: cn(avatarVariants({ size, variant }), className),
+        ...rest,
+        children: src ? /* @__PURE__ */ jsx("img", { src, alt: "", className: "size-full object-cover", "aria-hidden": "true" }) : icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex items-center justify-center [&>svg]:size-[55%]", children: icon }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: initials })
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+export {
+  Avatar,
+  avatarVariants
+};
+//# sourceMappingURL=avatar.js.map

package/dist/primitives/avatar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/avatar.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst avatarVariants = cva(\n  'inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full font-semibold select-none',\n  {\n    variants: {\n      size: {\n        xs: 'size-5 text-xs',\n        sm: 'size-7 text-xs',\n        md: 'size-9 text-sm',\n        lg: 'size-12 text-base',\n        xl: 'size-16 text-xl',\n      },\n      variant: {\n        default: 'bg-primary/10 text-primary',\n        monochrome: 'bg-muted text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  },\n)\n\nfunction computeInitials(label: string): string {\n  const trimmed = label.trim()\n  if (!trimmed.length) return '?'\n  const parts = trimmed.split(/\\s+/).filter(Boolean)\n  if (parts.length === 1) {\n    return parts[0].slice(0, 2).toUpperCase()\n  }\n  const first = parts[0][0] ?? ''\n  const last = parts[parts.length - 1][0] ?? ''\n  return (first + last).toUpperCase()\n}\n\nexport type AvatarProps = {\n  label: string\n  src?: string | null\n  icon?: React.ReactNode\n  ariaLabel?: string\n} & VariantProps<typeof avatarVariants> &\n  Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label'>\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  ({ className, label, src, icon, size, variant, ariaLabel, ...rest }, ref) => {\n    const initials = React.useMemo(() => computeInitials(label), [label])\n    return (\n      <div\n        ref={ref}\n        role=\"img\"\n        aria-label={ariaLabel ?? label}\n        className={cn(avatarVariants({ size, variant }), className)}\n        {...rest}\n      >\n        {src ? (\n          <img src={src} alt=\"\" className=\"size-full object-cover\" aria-hidden=\"true\" />\n        ) : icon ? (\n          <span aria-hidden=\"true\" className=\"flex items-center justify-center [&>svg]:size-[55%]\">\n            {icon}\n          </span>\n        ) : (\n          <span aria-hidden=\"true\">{initials}</span>\n        )}\n      </div>\n    )\n  },\n)\n\nAvatar.displayName = 'Avatar'\n\nexport { avatarVariants }\n"],
+  "mappings": "AA2DU;AA3DV,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,SAAS,gBAAgB,OAAuB;AAC9C,QAAM,UAAU,MAAM,KAAK;AAC3B,MAAI,CAAC,QAAQ,OAAQ,QAAO;AAC5B,QAAM,QAAQ,QAAQ,MAAM,KAAK,EAAE,OAAO,OAAO;AACjD,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,YAAY;AAAA,EAC1C;AACA,QAAM,QAAQ,MAAM,CAAC,EAAE,CAAC,KAAK;AAC7B,QAAM,OAAO,MAAM,MAAM,SAAS,CAAC,EAAE,CAAC,KAAK;AAC3C,UAAQ,QAAQ,MAAM,YAAY;AACpC;AAUO,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,WAAW,OAAO,KAAK,MAAM,MAAM,SAAS,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC3E,UAAM,WAAW,MAAM,QAAQ,MAAM,gBAAgB,KAAK,GAAG,CAAC,KAAK,CAAC;AACpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY,aAAa;AAAA,QACzB,WAAW,GAAG,eAAe,EAAE,MAAM,QAAQ,CAAC,GAAG,SAAS;AAAA,QACzD,GAAG;AAAA,QAEH,gBACC,oBAAC,SAAI,KAAU,KAAI,IAAG,WAAU,0BAAyB,eAAY,QAAO,IAC1E,OACF,oBAAC,UAAK,eAAY,QAAO,WAAU,uDAChC,gBACH,IAEA,oBAAC,UAAK,eAAY,QAAQ,oBAAS;AAAA;AAAA,IAEvC;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.5.1-develop.2663.2c29774b5b",
+  "version": "0.5.1-develop.2681.c559bb2bc3",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -132,12 +132,12 @@
     "recharts": "^3.8.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2663.2c29774b5b",
+    "@open-mercato/shared": "0.5.1-develop.2681.c559bb2bc3",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2663.2c29774b5b",
+    "@open-mercato/shared": "0.5.1-develop.2681.c559bb2bc3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/CrudForm.tsx

@@ -3,6 +3,9 @@ import * as React from 'react'
 import Link from 'next/link'
 import { z } from 'zod'
 import { useRouter } from 'next/navigation'
+import { DndContext, closestCenter, PointerSensor, KeyboardSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core'
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
 import { DataLoader } from '../primitives/DataLoader'
 import { flash } from './FlashMessages'
 import dynamic from 'next/dynamic'
@@ -71,6 +74,8 @@ import { VersionHistoryAction } from './version-history/VersionHistoryAction'
 import { parseBooleanWithDefault } from '@open-mercato/shared/lib/boolean'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { useInjectionDataWidgets } from './injection/useInjectionDataWidgets'
+import { CollapsibleGroup, type CollapsibleGroupHandle } from './crud/CollapsibleGroup'
+import { useGroupOrder } from './crud/useGroupOrder'
 import { InjectedField } from './injection/InjectedField'
 import type { InjectionFieldDefinition, FieldContext } from '@open-mercato/shared/modules/widgets/injection'
 import { evaluateInjectedVisibility } from './injection/visibility-utils'
@@ -247,6 +252,18 @@ export type CrudFormProps<TValues extends Record<string, unknown>> = {
   embedded?: boolean
   // Hide the footer action bar (Save/Cancel/Delete) when embedding in a custom layout
   hideFooterActions?: boolean
+  /**
+   * Opt-in: track dirty state even when `embedded` is true, AND enable the form's built-in
+   * navigation protection (beforeunload, link-click intercept, pushState/replaceState/popstate).
+   *
+   * Default: false — preserves pre-existing behavior where embedded forms do not maintain
+   * internal unsaved-changes state and leave navigation guarding to the parent page.
+   *
+   * When enabled, the parent may also subscribe to dirty transitions via `onDirtyChange` to
+   * mirror the state in its own UI (disabled save button, header indicators, etc.).
+   */
+  trackDirtyWhenEmbedded?: boolean
+  onDirtyChange?: (dirty: boolean) => void
   // Optional custom content injected between the header actions and the form body
   contentHeader?: React.ReactNode
   readOnly?: boolean
@@ -256,6 +273,15 @@ export type CrudFormProps<TValues extends Record<string, unknown>> = {
   // Optional injection spot ID for widget injection
   injectionSpotId?: string
   replacementHandle?: string
+  // Enable collapsible group headers with localStorage persistence.
+  // Pass `true` to enable with auto-generated pageType, or `{ pageType }` for explicit key.
+  collapsibleGroups?: boolean | { pageType: string; chevronPosition?: 'left' | 'right' }
+  /**
+   * Enable drag-and-drop reordering of groups with localStorage persistence.
+   * NOTE: Only column-1 groups are sortable. Column-2 (sidebar) groups are fixed
+   * by design and always render in their declared order.
+   */
+  sortableGroups?: boolean | { pageType: string }
   // Lets the host page allow specific internal navigation targets to bypass
   // the unsaved-changes guard (e.g. navigating between sub-pages of the same record).
   // The function receives the resolved internal target (`pathname + search + hash`).
@@ -398,6 +424,21 @@ class FieldDefinitionsManagerErrorBoundary extends React.Component<
   }
 }
 
+function SortableGroupItem({ id, children, disabled }: { id: string; children: React.ReactNode; disabled?: boolean }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id, disabled })
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    position: 'relative' as const,
+  }
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      {children}
+    </div>
+  )
+}
+
 export function CrudForm<TValues extends Record<string, unknown>>({
   schema,
   fields,
@@ -423,6 +464,8 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   customEntity = false,
   embedded = false,
   hideFooterActions = false,
+  trackDirtyWhenEmbedded = false,
+  onDirtyChange,
   extraActions,
   versionHistory,
   contentHeader,
@@ -431,6 +474,8 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   customFieldsetBindings,
   injectionSpotId,
   replacementHandle,
+  collapsibleGroups,
+  sortableGroups,
   shouldBypassUnsavedChangesGuard,
 }: CrudFormProps<TValues>) {
   // Ensure module field components are registered (client-side)
@@ -484,6 +529,16 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   const [fieldsetEditorTarget, setFieldsetEditorTarget] = React.useState<{ entityId: string; fieldsetCode: string | null; view: 'entity' | 'fieldset' } | null>(null)
   const [isInDialog, setIsInDialog] = React.useState(false)
   const rootRef = React.useRef<HTMLDivElement | null>(null)
+
+  // Collapsible groups support
+  const collapsibleGroupsEnabled = Boolean(collapsibleGroups)
+  const collapsiblePageType = typeof collapsibleGroups === 'object' ? collapsibleGroups.pageType : formId
+  const collapsibleChevronPosition = typeof collapsibleGroups === 'object' ? collapsibleGroups.chevronPosition : undefined
+  const groupCollapseRefs = React.useRef(new Map<string, CollapsibleGroupHandle>())
+
+  // Sortable groups support
+  const sortableGroupsEnabled = Boolean(sortableGroups)
+  const sortablePageType = typeof sortableGroups === 'object' ? sortableGroups.pageType : formId
   const fieldsetManagerRef = React.useRef<FieldDefinitionsManagerHandle | null>(null)
   const resolvedEntityIdsKey = React.useMemo(() => buildResolvedEntityIdsKey(entityId, entityIds), [entityId, entityIds])
   const resolvedEntityIds = React.useMemo(
@@ -552,7 +607,9 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   }, [shouldBypassUnsavedChangesGuard])
 
   React.useEffect(() => {
-    if (embedded) {
+    // Preserve pre-existing behavior: embedded forms do not track dirty state by default.
+    // Opt-in via `trackDirtyWhenEmbedded` when the parent actually needs the callback.
+    if (embedded && !trackDirtyWhenEmbedded) {
       isDirtyRef.current = false
       setHasUnsavedChanges(false)
       return
@@ -567,7 +624,11 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     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
@@ -628,7 +689,10 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   }, [allowNextNavigation, confirm, t])
 
   React.useEffect(() => {
-    if (embedded || !hasUnsavedChanges) return
+    // Navigation protection runs when the form is tracking dirty state.
+    // Embedded hosts must opt in via `trackDirtyWhenEmbedded` so parent pages that manage
+    // their own protection (or have none by design) keep their pre-existing behavior.
+    if ((embedded && !trackDirtyWhenEmbedded) || !hasUnsavedChanges) return
     const beforeUnloadHandler = (event: BeforeUnloadEvent) => {
       if (!isDirtyRef.current) return
       event.preventDefault()
@@ -709,7 +773,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       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,
@@ -1594,6 +1658,38 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     return [...(baseGroups.length ? baseGroups : autoGroup), ...injectionGroupCards]
   }, [allFields, groupsWithInjectedFields, injectionGroupCards, shouldAutoGroup])
   const useGroupedLayout = resolvedGroupsForLayout.length > 0
+
+  // Sortable group order
+  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: DragEndEvent) => {
+    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])
+
+  // Auto-expand collapsed groups that contain validation errors
+  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],
@@ -2687,12 +2783,22 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   // If groups are provided, render the two-column grouped layout
   if (useGroupedLayout) {
 
+    // Sort groups by user-preferred order when sortable is enabled
+    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: CrudFormGroup[] = []
     const col2: CrudFormGroup[] = []
-    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: CrudFormGroup[]) => {
       const nodes: React.ReactNode[] = []
@@ -2700,7 +2806,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         const isCustomFieldsGroup = g.kind === 'customFields'
         if (isCustomFieldsGroup) {
           if (isLoadingCustomFields) {
-            nodes.push(
+            const loadingContent = (
               <div key={`${g.id}-loading`} className="rounded-lg border bg-card p-4">
                 <DataLoader
                   isLoading
@@ -2710,19 +2816,74 @@ export function CrudForm<TValues extends Record<string, unknown>>({
                 >
                   <div />
                 </DataLoader>
-              </div>,
+              </div>
             )
+            if (collapsibleGroupsEnabled && g.title) {
+              nodes.push(
+                <CollapsibleGroup
+                  key={`${g.id}-loading-collapsible`}
+                  groupId={g.id}
+                  title={t(g.title, g.title)}
+                  pageType={collapsiblePageType}
+                  chevronPosition={collapsibleChevronPosition}
+                >
+                  {loadingContent}
+                </CollapsibleGroup>,
+              )
+            } else {
+              nodes.push(loadingContent)
+            }
             continue
           }
+
+          const customFieldsInnerNodes: React.ReactNode[] = []
           if (g.component) {
-            nodes.push(
+            customFieldsInnerNodes.push(
               <div key={`${g.id}-component`} className="rounded-lg border bg-card px-4 py-3">
                 {g.component({ values, setValue, errors })}
               </div>,
             )
           }
           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(
+              <CollapsibleGroup
+                key={g.id}
+                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}
+              >
+                <div className="space-y-3">
+                  {customFieldsInnerNodes}
+                </div>
+              </CollapsibleGroup>,
+            )
+          } else {
+            nodes.push(...customFieldsInnerNodes)
+          }
           continue
         }
 
@@ -2734,11 +2895,11 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           continue
         }
         const groupFields = resolveGroupFields(g)
-        nodes.push(
-          <div key={g.id} className="rounded-lg border bg-card px-4 py-3 space-y-3">
-            {g.title ? (
-              <div className="text-sm font-medium">{t(g.title, g.title)}</div>
-            ) : null}
+        const groupFieldIds = (g.fields ?? []).map((f) => (typeof f === 'string' ? f : f.id))
+        const groupErrorCount = groupFieldIds.filter((id) => errors[id]).length
+
+        const groupContent = (
+          <>
             {g.description ? <div className="text-xs text-muted-foreground">{t(g.description, g.description)}</div> : null}
             {componentNode ? (
               <div>{componentNode}</div>
@@ -2751,14 +2912,54 @@ export function CrudForm<TValues extends Record<string, unknown>>({
             >
               {groupFields.length > 0 ? renderFields(groupFields) : <div className="min-h-[1px]" />}
             </DataLoader>
-          </div>,
+          </>
         )
+
+        if (collapsibleGroupsEnabled && g.title) {
+          nodes.push(
+            <CollapsibleGroup
+              key={g.id}
+              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}
+            >
+              <div className="space-y-3">
+                {groupContent}
+              </div>
+            </CollapsibleGroup>,
+          )
+        } else {
+          nodes.push(
+            <div key={g.id} className="rounded-lg border bg-card px-4 py-3 space-y-3">
+              {g.title ? (
+                <div className="text-sm font-medium">{t(g.title, g.title)}</div>
+              ) : null}
+              {groupContent}
+            </div>,
+          )
+        }
       }
       return nodes
     }
 
-    const col1Content = renderGroupedCards(col1)
+    const col1Nodes = renderGroupedCards(col1)
     const col2Content = renderGroupedCards(col2)
+
+    // Wrap col1 nodes in sortable items when enabled
+    const col1Content = sortableGroupsEnabled
+      ? col1Nodes.map((node, i) => (
+          <SortableGroupItem key={col1[i]?.id ?? i} id={col1[i]?.id ?? String(i)}>
+            {node}
+          </SortableGroupItem>
+        ))
+      : col1Nodes
     const hasSecondaryColumn = col2Content.length > 0
 
     return (
@@ -2806,10 +3007,18 @@ export function CrudForm<TValues extends Record<string, unknown>>({
                 ? 'grid grid-cols-1 lg:grid-cols-[7fr_3fr] gap-4'
                 : 'grid grid-cols-1 gap-4'}
             >
-              <div className="space-y-3">{col1Content}</div>
+              {sortableGroupsEnabled ? (
+                <DndContext sensors={sortableSensors} collisionDetection={closestCenter} onDragEnd={handleGroupDragEnd}>
+                  <SortableContext items={col1Ids} strategy={verticalListSortingStrategy}>
+                    <div className="space-y-3">{col1Content}</div>
+                  </SortableContext>
+                </DndContext>
+              ) : (
+                <div className="space-y-3">{col1Content}</div>
+              )}
               {hasSecondaryColumn ? <div className="space-y-3">{col2Content}</div> : null}
             </div>
-            {formError && !Object.keys(errors).length ? <div className="text-sm text-red-600">{formError}</div> : null}
+            {formError && !Object.keys(errors).length ? <div className="text-sm text-status-error-text">{formError}</div> : null}
             {hideFooterActions || formReadOnly ? null : (
               <FormFooter
                 embedded={embedded}
@@ -2904,7 +3113,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
                 )
               })}
             </div>
-            {formError && !Object.keys(errors).length ? <div className="text-sm text-red-600">{formError}</div> : null}
+            {formError && !Object.keys(errors).length ? <div className="text-sm text-status-error-text">{formError}</div> : null}
             {hideFooterActions || formReadOnly ? null : (
               <FormFooter
                 embedded={embedded}
@@ -3584,7 +3793,7 @@ const FieldControl = React.memo(function FieldControlImpl({
       {field.type !== 'checkbox' && field.label.trim().length > 0 ? (
         <label className="block text-sm font-medium">
           {field.label}
-          {field.required ? <span className="text-red-600"> *</span> : null}
+          {field.required ? <span className="text-status-error-text"> *</span> : null}
         </label>
       ) : null}
       {field.type === 'text' && (
@@ -3846,7 +4055,7 @@ const FieldControl = React.memo(function FieldControlImpl({
           <div>{field.description}</div>
         </div>
       ) : null}
-      {error ? <div className="text-xs text-red-600">{error}</div> : null}
+      {error ? <div className="text-xs text-status-error-text">{error}</div> : null}
     </div>
   )
 },

package/src/backend/Page.tsx

@@ -1,8 +1,16 @@
 import * as React from 'react'
 import { cn } from '@open-mercato/shared/lib/utils'
 
-export function Page({ children, className }: { children: React.ReactNode; className?: string }) {
-  return <div className={cn('space-y-6', className)}>{children}</div>
+export function Page({
+  children,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('space-y-6', className)} {...props}>
+      {children}
+    </div>
+  )
 }
 
 export function PageHeader({
@@ -25,6 +33,14 @@ export function PageHeader({
   )
 }
 
-export function PageBody({ children, className }: { children: React.ReactNode; className?: string }) {
-  return <div className={cn('space-y-4', className)}>{children}</div>
+export function PageBody({
+  children,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('space-y-4', className)} {...props}>
+      {children}
+    </div>
+  )
 }

package/src/backend/__tests__/AttachmentsSection.test.tsx

@@ -0,0 +1,82 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { AttachmentsSection } from '../detail/AttachmentsSection'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+
+jest.mock('@open-mercato/ui/backend/utils/apiCall', () => ({
+  apiCall: jest.fn(),
+}))
+
+jest.mock('../injection/useRegisteredComponent', () => ({
+  useRegisteredComponent: <T,>(_handle: string, fallback?: React.ComponentType<T>) =>
+    fallback ?? ((() => null) as React.ComponentType<T>),
+}))
+
+jest.mock('../detail/AttachmentMetadataDialog', () => ({
+  AttachmentMetadataDialog: ({
+    open,
+    item,
+  }: {
+    open: boolean
+    item: { fileName?: string | null } | null
+  }) => (open ? <div data-testid="attachment-metadata-dialog">{item?.fileName ?? 'unknown'}</div> : null),
+}))
+
+jest.mock('../detail/AttachmentDeleteDialog', () => ({
+  AttachmentDeleteDialog: () => null,
+}))
+
+describe('AttachmentsSection', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+    ;(apiCall as jest.Mock).mockImplementation((url: string) => {
+      if (url.startsWith('/api/attachments?')) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          result: {
+            items: [
+              {
+                id: 'attachment-1',
+                fileName: 'Quarterly Report.pdf',
+                fileSize: 2048,
+                mimeType: 'application/pdf',
+                thumbnailUrl: null,
+                tags: [],
+                assignments: [],
+                customFieldValues: {},
+              },
+            ],
+          },
+          response: { status: 200 },
+        })
+      }
+
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        result: {},
+        response: { status: 200 },
+      })
+    })
+  })
+
+  it('renders attachment cards without nesting buttons and keeps keyboard activation', async () => {
+    const { container } = renderWithProviders(
+      <AttachmentsSection entityId="customers:customer_entity" recordId="record-1" />,
+      { dict: {} },
+    )
+
+    const card = await screen.findByRole('button', { name: /quarterly report\.pdf/i })
+    expect(container.querySelectorAll('button button')).toHaveLength(0)
+
+    fireEvent.keyDown(card, { key: 'Enter' })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('attachment-metadata-dialog')).toHaveTextContent('Quarterly Report.pdf')
+    })
+  })
+})