@open-mercato/ui 0.5.1-develop.2912.8d7b1fef24 → 0.5.1-develop.2924.d13908516e

package/dist/backend/crud/CollapsibleGroup.js

@@ -6,11 +6,14 @@ import { cn } from "@open-mercato/shared/lib/utils";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { Button } from "../../primitives/button.js";
 import { useGroupCollapse } from "./useGroupCollapse.js";
+import { SortableGroupHandle, useSortableGroupHandle } from "./SortableGroupHandle.js";
 const CollapsibleGroup = React.forwardRef(
   function CollapsibleGroup2({ groupId, title, pageType, defaultExpanded = true, errorCount = 0, fieldCount, chevronPosition = "right", icon, children }, ref) {
     const t = useT();
     const { expanded, toggle, setExpanded, isHydrated } = useGroupCollapse(pageType, groupId, defaultExpanded);
     const contentId = `collapsible-group-${groupId}`;
+    const sortableHandle = useSortableGroupHandle();
+    const showDragHandle = sortableHandle !== null;
     React.useImperativeHandle(ref, () => ({
       expand: () => setExpanded(true)
     }), [setExpanded]);
@@ -30,6 +33,16 @@ const CollapsibleGroup = React.forwardRef(
       fieldCount === 1 ? t("ui.collapsible.fieldSingular", "field") : t("ui.collapsible.fieldPlural", "fields")
     ] }) : null;
     const errorBadge = errorCount > 0 ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive", children: errorCount === 1 ? t("ui.collapsible.errorSingular", "{{count}} error", { count: errorCount }) : t("ui.collapsible.errorPlural", "{{count}} errors", { count: errorCount }) }) : null;
+    const dragHandle = showDragHandle ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "inline-flex shrink-0 items-center",
+        onClick: (event) => event.stopPropagation(),
+        onPointerDown: (event) => event.stopPropagation(),
+        onKeyDown: (event) => event.stopPropagation(),
+        children: /* @__PURE__ */ jsx(SortableGroupHandle, { ariaLabel: t("ui.crud.dragHandle.aria", "Drag to reorder") })
+      }
+    ) : null;
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -43,41 +56,53 @@ const CollapsibleGroup = React.forwardRef(
         "data-persistence-hydrated": isHydrated ? "true" : "false",
         "aria-hidden": isHydrated ? void 0 : true,
         children: [
-          title && /* @__PURE__ */ jsx(
-            Button,
+          title && /* @__PURE__ */ jsxs(
+            "div",
             {
-              type: "button",
-              variant: "muted",
-              onClick: toggle,
               className: cn(
-                "w-full px-4 py-3 text-sm font-medium hover:bg-accent/50 rounded-lg",
-                chevronPosition === "left" ? "justify-start gap-2" : "justify-between"
+                "flex items-center gap-2 px-2 py-2",
+                chevronPosition === "left" ? "flex-row" : "flex-row"
               ),
-              "aria-expanded": expanded,
-              "aria-controls": contentId,
-              children: chevronPosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                chevronIcon,
-                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                  icon && /* @__PURE__ */ jsxs("span", { className: "relative shrink-0 text-muted-foreground", children: [
-                    icon,
-                    !expanded && errorCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" })
-                  ] }),
-                  /* @__PURE__ */ jsx("span", { children: title }),
-                  fieldCountLabel,
-                  errorBadge
-                ] })
-              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                  icon && /* @__PURE__ */ jsxs("span", { className: "relative shrink-0 text-muted-foreground", children: [
-                    icon,
-                    !expanded && errorCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" })
-                  ] }),
-                  /* @__PURE__ */ jsx("span", { children: title }),
-                  fieldCountLabel,
-                  errorBadge
-                ] }),
-                chevronIcon
-              ] })
+              children: [
+                dragHandle,
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "muted",
+                    onClick: toggle,
+                    className: cn(
+                      "flex-1 px-2 py-1 text-sm font-medium hover:bg-accent/50 rounded-md",
+                      chevronPosition === "left" ? "justify-start gap-2" : "justify-between"
+                    ),
+                    "aria-expanded": expanded,
+                    "aria-controls": contentId,
+                    children: chevronPosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      chevronIcon,
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                        icon && /* @__PURE__ */ jsxs("span", { className: "relative shrink-0 text-muted-foreground", children: [
+                          icon,
+                          !expanded && errorCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" })
+                        ] }),
+                        /* @__PURE__ */ jsx("span", { children: title }),
+                        fieldCountLabel,
+                        errorBadge
+                      ] })
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                        icon && /* @__PURE__ */ jsxs("span", { className: "relative shrink-0 text-muted-foreground", children: [
+                          icon,
+                          !expanded && errorCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" })
+                        ] }),
+                        /* @__PURE__ */ jsx("span", { children: title }),
+                        fieldCountLabel,
+                        errorBadge
+                      ] }),
+                      chevronIcon
+                    ] })
+                  }
+                )
+              ]
             }
           ),
           /* @__PURE__ */ jsx(

package/dist/backend/crud/CollapsibleGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/crud/CollapsibleGroup.tsx"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '../../primitives/button'\nimport { useGroupCollapse } from './useGroupCollapse'\n\nexport interface CollapsibleGroupProps {\n  groupId: string\n  title?: string\n  pageType: string\n  defaultExpanded?: boolean\n  errorCount?: number\n  fieldCount?: number\n  chevronPosition?: 'left' | 'right'\n  icon?: React.ReactNode\n  children: React.ReactNode\n}\n\nexport interface CollapsibleGroupHandle {\n  expand: () => void\n}\n\nexport const CollapsibleGroup = React.forwardRef<CollapsibleGroupHandle, CollapsibleGroupProps>(\n  function CollapsibleGroup({ groupId, title, pageType, defaultExpanded = true, errorCount = 0, fieldCount, chevronPosition = 'right', icon, children }, ref) {\n    const t = useT()\n    const { expanded, toggle, setExpanded, isHydrated } = useGroupCollapse(pageType, groupId, defaultExpanded)\n    const contentId = `collapsible-group-${groupId}`\n\n    React.useImperativeHandle(ref, () => ({\n      expand: () => setExpanded(true),\n    }), [setExpanded])\n\n    const chevronIcon = (\n      <ChevronDown\n        className={cn(\n          'size-4 shrink-0 motion-safe:transition-transform motion-safe:duration-200',\n          expanded && 'rotate-180'\n        )}\n      />\n    )\n\n    const fieldCountLabel = typeof fieldCount === 'number' && fieldCount > 0 ? (\n      <span className=\"text-xs font-normal text-muted-foreground\">\n        \u00B7 {fieldCount} {fieldCount === 1\n          ? t('ui.collapsible.fieldSingular', 'field')\n          : t('ui.collapsible.fieldPlural', 'fields')}\n      </span>\n    ) : null\n\n    const errorBadge = errorCount > 0 ? (\n      <span className=\"inline-flex items-center rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive\">\n        {errorCount === 1\n          ? t('ui.collapsible.errorSingular', '{{count}} error', { count: errorCount })\n          : t('ui.collapsible.errorPlural', '{{count}} errors', { count: errorCount })}\n      </span>\n    ) : null\n\n    return (\n      <div\n        id={`collapsible-group-wrapper-${groupId}`}\n        className={cn(\n          'rounded-lg border bg-card',\n          !isHydrated && 'invisible',\n          errorCount > 0 && 'border-destructive',\n        )}\n        data-collapsible-group-id={groupId}\n        data-persistence-hydrated={isHydrated ? 'true' : 'false'}\n        aria-hidden={isHydrated ? undefined : true}\n      >\n        {title && (\n          <Button\n            type=\"button\"\n            variant=\"muted\"\n            onClick={toggle}\n            className={cn(\n              'w-full px-4 py-3 text-sm font-medium hover:bg-accent/50 rounded-lg',\n              chevronPosition === 'left' ? 'justify-start gap-2' : 'justify-between',\n            )}\n            aria-expanded={expanded}\n            aria-controls={contentId}\n          >\n            {chevronPosition === 'left' ? (\n              <>\n                {chevronIcon}\n                <span className=\"flex items-center gap-2\">\n                  {icon && <span className=\"relative shrink-0 text-muted-foreground\">{icon}{!expanded && errorCount > 0 && <span className=\"absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive\" />}</span>}\n                  <span>{title}</span>\n                  {fieldCountLabel}\n                  {errorBadge}\n                </span>\n              </>\n            ) : (\n              <>\n                <span className=\"flex items-center gap-2\">\n                  {icon && <span className=\"relative shrink-0 text-muted-foreground\">{icon}{!expanded && errorCount > 0 && <span className=\"absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive\" />}</span>}\n                  <span>{title}</span>\n                  {fieldCountLabel}\n                  {errorBadge}\n                </span>\n                {chevronIcon}\n              </>\n            )}\n          </Button>\n        )}\n        <div\n          id={contentId}\n          className={cn(\n            'motion-safe:transition-all motion-safe:duration-200 overflow-hidden',\n            expanded ? 'max-h-[5000px] opacity-100' : 'max-h-0 opacity-0'\n          )}\n        >\n          <div className=\"px-4 py-3\">\n            {children}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n"],
-  "mappings": ";AAmCM,SAiDQ,UAjDR,KASA,YATA;AAlCN,YAAY,WAAW;AACvB,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,wBAAwB;AAkB1B,MAAM,mBAAmB,MAAM;AAAA,EACpC,SAASA,kBAAiB,EAAE,SAAS,OAAO,UAAU,kBAAkB,MAAM,aAAa,GAAG,YAAY,kBAAkB,SAAS,MAAM,SAAS,GAAG,KAAK;AAC1J,UAAM,IAAI,KAAK;AACf,UAAM,EAAE,UAAU,QAAQ,aAAa,WAAW,IAAI,iBAAiB,UAAU,SAAS,eAAe;AACzG,UAAM,YAAY,qBAAqB,OAAO;AAE9C,UAAM,oBAAoB,KAAK,OAAO;AAAA,MACpC,QAAQ,MAAM,YAAY,IAAI;AAAA,IAChC,IAAI,CAAC,WAAW,CAAC;AAEjB,UAAM,cACJ;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA;AAAA,IACF;AAGF,UAAM,kBAAkB,OAAO,eAAe,YAAY,aAAa,IACrE,qBAAC,UAAK,WAAU,6CAA4C;AAAA;AAAA,MACvD;AAAA,MAAW;AAAA,MAAE,eAAe,IAC3B,EAAE,gCAAgC,OAAO,IACzC,EAAE,8BAA8B,QAAQ;AAAA,OAC9C,IACE;AAEJ,UAAM,aAAa,aAAa,IAC9B,oBAAC,UAAK,WAAU,4GACb,yBAAe,IACZ,EAAE,gCAAgC,mBAAmB,EAAE,OAAO,WAAW,CAAC,IAC1E,EAAE,8BAA8B,oBAAoB,EAAE,OAAO,WAAW,CAAC,GAC/E,IACE;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,6BAA6B,OAAO;AAAA,QACxC,WAAW;AAAA,UACT;AAAA,UACA,CAAC,cAAc;AAAA,UACf,aAAa,KAAK;AAAA,QACpB;AAAA,QACA,6BAA2B;AAAA,QAC3B,6BAA2B,aAAa,SAAS;AAAA,QACjD,eAAa,aAAa,SAAY;AAAA,QAErC;AAAA,mBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,SAAS;AAAA,cACT,WAAW;AAAA,gBACT;AAAA,gBACA,oBAAoB,SAAS,wBAAwB;AAAA,cACvD;AAAA,cACA,iBAAe;AAAA,cACf,iBAAe;AAAA,cAEd,8BAAoB,SACnB,iCACG;AAAA;AAAA,gBACD,qBAAC,UAAK,WAAU,2BACb;AAAA,0BAAQ,qBAAC,UAAK,WAAU,2CAA2C;AAAA;AAAA,oBAAM,CAAC,YAAY,aAAa,KAAK,oBAAC,UAAK,WAAU,mEAAkE;AAAA,qBAAG;AAAA,kBAC9L,oBAAC,UAAM,iBAAM;AAAA,kBACZ;AAAA,kBACA;AAAA,mBACH;AAAA,iBACF,IAEA,iCACE;AAAA,qCAAC,UAAK,WAAU,2BACb;AAAA,0BAAQ,qBAAC,UAAK,WAAU,2CAA2C;AAAA;AAAA,oBAAM,CAAC,YAAY,aAAa,KAAK,oBAAC,UAAK,WAAU,mEAAkE;AAAA,qBAAG;AAAA,kBAC9L,oBAAC,UAAM,iBAAM;AAAA,kBACZ;AAAA,kBACA;AAAA,mBACH;AAAA,gBACC;AAAA,iBACH;AAAA;AAAA,UAEJ;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW;AAAA,gBACT;AAAA,gBACA,WAAW,+BAA+B;AAAA,cAC5C;AAAA,cAEA,8BAAC,SAAI,WAAU,aACZ,UACH;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '../../primitives/button'\nimport { useGroupCollapse } from './useGroupCollapse'\nimport { SortableGroupHandle, useSortableGroupHandle } from './SortableGroupHandle'\n\nexport interface CollapsibleGroupProps {\n  groupId: string\n  title?: string\n  pageType: string\n  defaultExpanded?: boolean\n  errorCount?: number\n  fieldCount?: number\n  chevronPosition?: 'left' | 'right'\n  icon?: React.ReactNode\n  children: React.ReactNode\n}\n\nexport interface CollapsibleGroupHandle {\n  expand: () => void\n}\n\nexport const CollapsibleGroup = React.forwardRef<CollapsibleGroupHandle, CollapsibleGroupProps>(\n  function CollapsibleGroup({ groupId, title, pageType, defaultExpanded = true, errorCount = 0, fieldCount, chevronPosition = 'right', icon, children }, ref) {\n    const t = useT()\n    const { expanded, toggle, setExpanded, isHydrated } = useGroupCollapse(pageType, groupId, defaultExpanded)\n    const contentId = `collapsible-group-${groupId}`\n    const sortableHandle = useSortableGroupHandle()\n    const showDragHandle = sortableHandle !== null\n\n    React.useImperativeHandle(ref, () => ({\n      expand: () => setExpanded(true),\n    }), [setExpanded])\n\n    const chevronIcon = (\n      <ChevronDown\n        className={cn(\n          'size-4 shrink-0 motion-safe:transition-transform motion-safe:duration-200',\n          expanded && 'rotate-180'\n        )}\n      />\n    )\n\n    const fieldCountLabel = typeof fieldCount === 'number' && fieldCount > 0 ? (\n      <span className=\"text-xs font-normal text-muted-foreground\">\n        \u00B7 {fieldCount} {fieldCount === 1\n          ? t('ui.collapsible.fieldSingular', 'field')\n          : t('ui.collapsible.fieldPlural', 'fields')}\n      </span>\n    ) : null\n\n    const errorBadge = errorCount > 0 ? (\n      <span className=\"inline-flex items-center rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive\">\n        {errorCount === 1\n          ? t('ui.collapsible.errorSingular', '{{count}} error', { count: errorCount })\n          : t('ui.collapsible.errorPlural', '{{count}} errors', { count: errorCount })}\n      </span>\n    ) : null\n\n    const dragHandle = showDragHandle ? (\n      <span\n        className=\"inline-flex shrink-0 items-center\"\n        onClick={(event) => event.stopPropagation()}\n        onPointerDown={(event) => event.stopPropagation()}\n        onKeyDown={(event) => event.stopPropagation()}\n      >\n        <SortableGroupHandle ariaLabel={t('ui.crud.dragHandle.aria', 'Drag to reorder')} />\n      </span>\n    ) : null\n\n    return (\n      <div\n        id={`collapsible-group-wrapper-${groupId}`}\n        className={cn(\n          'rounded-lg border bg-card',\n          !isHydrated && 'invisible',\n          errorCount > 0 && 'border-destructive',\n        )}\n        data-collapsible-group-id={groupId}\n        data-persistence-hydrated={isHydrated ? 'true' : 'false'}\n        aria-hidden={isHydrated ? undefined : true}\n      >\n        {title && (\n          <div\n            className={cn(\n              'flex items-center gap-2 px-2 py-2',\n              chevronPosition === 'left' ? 'flex-row' : 'flex-row',\n            )}\n          >\n            {dragHandle}\n            <Button\n              type=\"button\"\n              variant=\"muted\"\n              onClick={toggle}\n              className={cn(\n                'flex-1 px-2 py-1 text-sm font-medium hover:bg-accent/50 rounded-md',\n                chevronPosition === 'left' ? 'justify-start gap-2' : 'justify-between',\n              )}\n              aria-expanded={expanded}\n              aria-controls={contentId}\n            >\n              {chevronPosition === 'left' ? (\n                <>\n                  {chevronIcon}\n                  <span className=\"flex items-center gap-2\">\n                    {icon && <span className=\"relative shrink-0 text-muted-foreground\">{icon}{!expanded && errorCount > 0 && <span className=\"absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive\" />}</span>}\n                    <span>{title}</span>\n                    {fieldCountLabel}\n                    {errorBadge}\n                  </span>\n                </>\n              ) : (\n                <>\n                  <span className=\"flex items-center gap-2\">\n                    {icon && <span className=\"relative shrink-0 text-muted-foreground\">{icon}{!expanded && errorCount > 0 && <span className=\"absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive\" />}</span>}\n                    <span>{title}</span>\n                    {fieldCountLabel}\n                    {errorBadge}\n                  </span>\n                  {chevronIcon}\n                </>\n              )}\n            </Button>\n          </div>\n        )}\n        <div\n          id={contentId}\n          className={cn(\n            'motion-safe:transition-all motion-safe:duration-200 overflow-hidden',\n            expanded ? 'max-h-[5000px] opacity-100' : 'max-h-0 opacity-0'\n          )}\n        >\n          <div className=\"px-4 py-3\">\n            {children}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n"],
+  "mappings": "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",
   "names": ["CollapsibleGroup"]
 }

package/dist/backend/crud/SortableGroupHandle.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { GripVertical } from "lucide-react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { IconButton } from "../../primitives/icon-button.js";
+const SortableGroupHandleContext = React.createContext(null);
+const SortableGroupHandleProvider = SortableGroupHandleContext.Provider;
+function useSortableGroupHandle() {
+  return React.useContext(SortableGroupHandleContext);
+}
+function SortableGroupHandle({ ariaLabel, className }) {
+  const handle = useSortableGroupHandle();
+  if (!handle) return null;
+  const { ref, attributes, listeners, disabled } = handle;
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "xs",
+      ref,
+      "aria-label": ariaLabel,
+      disabled,
+      className: cn(
+        "cursor-grab text-muted-foreground hover:text-foreground active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm",
+        className
+      ),
+      ...attributes,
+      ...listeners ?? {},
+      children: /* @__PURE__ */ jsx(GripVertical, { className: "size-4" })
+    }
+  );
+}
+export {
+  SortableGroupHandle,
+  SortableGroupHandleProvider,
+  useSortableGroupHandle
+};
+//# sourceMappingURL=SortableGroupHandle.js.map

package/dist/backend/crud/SortableGroupHandle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/crud/SortableGroupHandle.tsx"],
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { GripVertical } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { IconButton } from '../../primitives/icon-button'\n\nexport type SortableGroupHandleProps = {\n  ref: (node: HTMLElement | null) => void\n  attributes: Record<string, unknown>\n  listeners: Record<string, unknown> | undefined\n  isDragging: boolean\n  disabled: boolean\n}\n\nconst SortableGroupHandleContext = React.createContext<SortableGroupHandleProps | null>(null)\n\nexport const SortableGroupHandleProvider = SortableGroupHandleContext.Provider\n\nexport function useSortableGroupHandle(): SortableGroupHandleProps | null {\n  return React.useContext(SortableGroupHandleContext)\n}\n\nexport interface SortableGroupHandleButtonProps {\n  ariaLabel: string\n  className?: string\n}\n\nexport function SortableGroupHandle({ ariaLabel, className }: SortableGroupHandleButtonProps) {\n  const handle = useSortableGroupHandle()\n  if (!handle) return null\n  const { ref, attributes, listeners, disabled } = handle\n  return (\n    <IconButton\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"xs\"\n      ref={ref as unknown as React.Ref<HTMLButtonElement>}\n      aria-label={ariaLabel}\n      disabled={disabled}\n      className={cn(\n        'cursor-grab text-muted-foreground hover:text-foreground active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm',\n        className,\n      )}\n      {...(attributes as Record<string, unknown>)}\n      {...((listeners ?? {}) as Record<string, unknown>)}\n    >\n      <GripVertical className=\"size-4\" />\n    </IconButton>\n  )\n}\n"],
+  "mappings": ";AA8CM;AA7CN,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAU3B,MAAM,6BAA6B,MAAM,cAA+C,IAAI;AAErF,MAAM,8BAA8B,2BAA2B;AAE/D,SAAS,yBAA0D;AACxE,SAAO,MAAM,WAAW,0BAA0B;AACpD;AAOO,SAAS,oBAAoB,EAAE,WAAW,UAAU,GAAmC;AAC5F,QAAM,SAAS,uBAAuB;AACtC,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,EAAE,KAAK,YAAY,WAAW,SAAS,IAAI;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL;AAAA,MACA,cAAY;AAAA,MACZ;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAI;AAAA,MACJ,GAAK,aAAa,CAAC;AAAA,MAEpB,8BAAC,gBAAa,WAAU,UAAS;AAAA;AAAA,EACnC;AAEJ;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.5.1-develop.2912.8d7b1fef24",
+  "version": "0.5.1-develop.2924.d13908516e",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -132,12 +132,12 @@
     "recharts": "^3.8.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2912.8d7b1fef24",
+    "@open-mercato/shared": "0.5.1-develop.2924.d13908516e",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2912.8d7b1fef24",
+    "@open-mercato/shared": "0.5.1-develop.2924.d13908516e",
     "@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,7 +3,17 @@ 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 {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type Activators,
+} from '@dnd-kit/core'
+import type { KeyboardSensorOptions } from '@dnd-kit/core'
 import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { DataLoader } from '../primitives/DataLoader'
@@ -76,6 +86,7 @@ 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 { SortableGroupHandleProvider, type SortableGroupHandleProps } from './crud/SortableGroupHandle'
 import { useGroupOrder } from './crud/useGroupOrder'
 import { InjectedField } from './injection/InjectedField'
 import type { InjectionFieldDefinition, FieldContext } from '@open-mercato/shared/modules/widgets/injection'
@@ -92,6 +103,31 @@ const CRUDFORM_EXTENDED_EVENTS_ENABLED = parseBooleanWithDefault(
   true,
 )
 
+function isFormControlTarget(target: EventTarget | null): boolean {
+  if (!target || typeof (target as Element).tagName !== 'string') return false
+  const el = target as HTMLElement
+  const tag = el.tagName
+  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true
+  if (el.isContentEditable) return true
+  return false
+}
+
+function resolveActivatorEventTarget(event: React.SyntheticEvent | Event): EventTarget | null {
+  const native = (event as React.SyntheticEvent).nativeEvent
+  if (native && typeof (native as Event).target !== 'undefined') return (native as Event).target
+  return (event as Event).target ?? null
+}
+
+class GuardedKeyboardSensor extends KeyboardSensor {
+  static activators: Activators<KeyboardSensorOptions> = KeyboardSensor.activators.map((activator) => ({
+    eventName: activator.eventName,
+    handler: (event, options, context) => {
+      if (isFormControlTarget(resolveActivatorEventTarget(event))) return false
+      return activator.handler(event, options, context)
+    },
+  }))
+}
+
 function resolveInternalNavigationTarget(target: string | URL | null | undefined): string | null {
   if (typeof window === 'undefined' || target == null) return null
   try {
@@ -426,16 +462,31 @@ 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 {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    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,
   }
+  const handleProps = React.useMemo<SortableGroupHandleProps>(() => ({
+    ref: setActivatorNodeRef,
+    attributes: attributes as unknown as Record<string, unknown>,
+    listeners: listeners as unknown as Record<string, unknown> | undefined,
+    isDragging,
+    disabled: !!disabled,
+  }), [setActivatorNodeRef, attributes, listeners, isDragging, disabled])
   return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      {children}
+    <div ref={setNodeRef} style={style}>
+      <SortableGroupHandleProvider value={handleProps}>{children}</SortableGroupHandleProvider>
     </div>
   )
 }
@@ -1668,7 +1719,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   )
   const sortableSensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-    useSensor(KeyboardSensor),
+    useSensor(GuardedKeyboardSensor),
   )
   const handleGroupDragEnd = React.useCallback((event: DragEndEvent) => {
     const { active, over } = event

package/src/backend/__tests__/CrudForm.sortable.test.tsx

@@ -0,0 +1,96 @@
+/** @jest-environment jsdom */
+jest.setTimeout(15000)
+
+const triggerInjectionEventMock = jest.fn(async (_event: string, data: Record<string, unknown>) => ({
+  ok: true,
+  data,
+}))
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: () => {} }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: triggerInjectionEventMock }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
+
+import * as React from 'react'
+import { fireEvent } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
+
+const fields: CrudField[] = [
+  { id: 'name', label: 'Name', type: 'text' },
+  { id: 'note', label: 'Note', type: 'text' },
+]
+
+const groups: CrudFormGroup[] = [
+  { id: 'main', title: 'Main', fields: ['name'], column: 1 },
+  { id: 'extra', title: 'Extra', fields: ['note'], column: 1 },
+]
+
+describe('CrudForm sortable groups', () => {
+  it('renders a drag handle button with the expected aria-label when sortable + collapsible', () => {
+    const { container } = renderWithProviders(
+      <CrudForm
+        title="Form"
+        fields={fields}
+        groups={groups}
+        onSubmit={() => {}}
+        sortableGroups={true}
+        collapsibleGroups={true}
+      />,
+    )
+    const handles = container.querySelectorAll('button[aria-label="Drag to reorder"]')
+    expect(handles.length).toBe(2)
+  })
+
+  it('does not render any drag handle when sortable is disabled', () => {
+    const { container } = renderWithProviders(
+      <CrudForm
+        title="Form"
+        fields={fields}
+        groups={groups}
+        onSubmit={() => {}}
+        collapsibleGroups={true}
+      />,
+    )
+    const handles = container.querySelectorAll('button[aria-label="Drag to reorder"]')
+    expect(handles.length).toBe(0)
+  })
+
+  it('does not greys out a sortable card when space is pressed from a focused input', () => {
+    const { container } = renderWithProviders(
+      <CrudForm
+        title="Form"
+        fields={fields}
+        groups={groups}
+        initialValues={{ name: '' }}
+        onSubmit={() => {}}
+        sortableGroups={true}
+        collapsibleGroups={true}
+      />,
+    )
+    const input = container.querySelector('[data-crud-field-id="name"] input[type="text"]') as HTMLInputElement
+    expect(input).not.toBeNull()
+    input.focus()
+    fireEvent.keyDown(input, { key: ' ', code: 'Space' })
+    const sortableHandles = container.querySelectorAll('button[aria-label="Drag to reorder"]')
+    expect(sortableHandles.length).toBeGreaterThan(0)
+    sortableHandles.forEach((handle) => {
+      const card = handle.closest('[style]') as HTMLElement | null
+      const style = card?.getAttribute('style') || ''
+      expect(style).not.toMatch(/opacity:\s*0\.5/)
+    })
+  })
+})

package/src/backend/crud/CollapsibleGroup.tsx

@@ -5,6 +5,7 @@ import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '../../primitives/button'
 import { useGroupCollapse } from './useGroupCollapse'
+import { SortableGroupHandle, useSortableGroupHandle } from './SortableGroupHandle'
 
 export interface CollapsibleGroupProps {
   groupId: string
@@ -27,6 +28,8 @@ export const CollapsibleGroup = React.forwardRef<CollapsibleGroupHandle, Collaps
     const t = useT()
     const { expanded, toggle, setExpanded, isHydrated } = useGroupCollapse(pageType, groupId, defaultExpanded)
     const contentId = `collapsible-group-${groupId}`
+    const sortableHandle = useSortableGroupHandle()
+    const showDragHandle = sortableHandle !== null
 
     React.useImperativeHandle(ref, () => ({
       expand: () => setExpanded(true),
@@ -57,6 +60,17 @@ export const CollapsibleGroup = React.forwardRef<CollapsibleGroupHandle, Collaps
       </span>
     ) : null
 
+    const dragHandle = showDragHandle ? (
+      <span
+        className="inline-flex shrink-0 items-center"
+        onClick={(event) => event.stopPropagation()}
+        onPointerDown={(event) => event.stopPropagation()}
+        onKeyDown={(event) => event.stopPropagation()}
+      >
+        <SortableGroupHandle ariaLabel={t('ui.crud.dragHandle.aria', 'Drag to reorder')} />
+      </span>
+    ) : null
+
     return (
       <div
         id={`collapsible-group-wrapper-${groupId}`}
@@ -70,39 +84,47 @@ export const CollapsibleGroup = React.forwardRef<CollapsibleGroupHandle, Collaps
         aria-hidden={isHydrated ? undefined : true}
       >
         {title && (
-          <Button
-            type="button"
-            variant="muted"
-            onClick={toggle}
+          <div
             className={cn(
-              'w-full px-4 py-3 text-sm font-medium hover:bg-accent/50 rounded-lg',
-              chevronPosition === 'left' ? 'justify-start gap-2' : 'justify-between',
+              'flex items-center gap-2 px-2 py-2',
+              chevronPosition === 'left' ? 'flex-row' : 'flex-row',
             )}
-            aria-expanded={expanded}
-            aria-controls={contentId}
           >
-            {chevronPosition === 'left' ? (
-              <>
-                {chevronIcon}
-                <span className="flex items-center gap-2">
-                  {icon && <span className="relative shrink-0 text-muted-foreground">{icon}{!expanded && errorCount > 0 && <span className="absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" />}</span>}
-                  <span>{title}</span>
-                  {fieldCountLabel}
-                  {errorBadge}
-                </span>
-              </>
-            ) : (
-              <>
-                <span className="flex items-center gap-2">
-                  {icon && <span className="relative shrink-0 text-muted-foreground">{icon}{!expanded && errorCount > 0 && <span className="absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" />}</span>}
-                  <span>{title}</span>
-                  {fieldCountLabel}
-                  {errorBadge}
-                </span>
-                {chevronIcon}
-              </>
-            )}
-          </Button>
+            {dragHandle}
+            <Button
+              type="button"
+              variant="muted"
+              onClick={toggle}
+              className={cn(
+                'flex-1 px-2 py-1 text-sm font-medium hover:bg-accent/50 rounded-md',
+                chevronPosition === 'left' ? 'justify-start gap-2' : 'justify-between',
+              )}
+              aria-expanded={expanded}
+              aria-controls={contentId}
+            >
+              {chevronPosition === 'left' ? (
+                <>
+                  {chevronIcon}
+                  <span className="flex items-center gap-2">
+                    {icon && <span className="relative shrink-0 text-muted-foreground">{icon}{!expanded && errorCount > 0 && <span className="absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" />}</span>}
+                    <span>{title}</span>
+                    {fieldCountLabel}
+                    {errorBadge}
+                  </span>
+                </>
+              ) : (
+                <>
+                  <span className="flex items-center gap-2">
+                    {icon && <span className="relative shrink-0 text-muted-foreground">{icon}{!expanded && errorCount > 0 && <span className="absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" />}</span>}
+                    <span>{title}</span>
+                    {fieldCountLabel}
+                    {errorBadge}
+                  </span>
+                  {chevronIcon}
+                </>
+              )}
+            </Button>
+          </div>
         )}
         <div
           id={contentId}

package/src/backend/crud/SortableGroupHandle.tsx

@@ -0,0 +1,50 @@
+'use client'
+import * as React from 'react'
+import { GripVertical } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { IconButton } from '../../primitives/icon-button'
+
+export type SortableGroupHandleProps = {
+  ref: (node: HTMLElement | null) => void
+  attributes: Record<string, unknown>
+  listeners: Record<string, unknown> | undefined
+  isDragging: boolean
+  disabled: boolean
+}
+
+const SortableGroupHandleContext = React.createContext<SortableGroupHandleProps | null>(null)
+
+export const SortableGroupHandleProvider = SortableGroupHandleContext.Provider
+
+export function useSortableGroupHandle(): SortableGroupHandleProps | null {
+  return React.useContext(SortableGroupHandleContext)
+}
+
+export interface SortableGroupHandleButtonProps {
+  ariaLabel: string
+  className?: string
+}
+
+export function SortableGroupHandle({ ariaLabel, className }: SortableGroupHandleButtonProps) {
+  const handle = useSortableGroupHandle()
+  if (!handle) return null
+  const { ref, attributes, listeners, disabled } = handle
+  return (
+    <IconButton
+      type="button"
+      variant="ghost"
+      size="xs"
+      ref={ref as unknown as React.Ref<HTMLButtonElement>}
+      aria-label={ariaLabel}
+      disabled={disabled}
+      className={cn(
+        'cursor-grab text-muted-foreground hover:text-foreground active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm',
+        className,
+      )}
+      {...(attributes as Record<string, unknown>)}
+      {...((listeners ?? {}) as Record<string, unknown>)}
+    >
+      <GripVertical className="size-4" />
+    </IconButton>
+  )
+}