@flamingo-stack/openframe-frontend-core 0.0.579-1952.5335.1 → 0.0.579

package/dist/{chunk-L66XBQM6.js → chunk-CP5EYMNL.js}

@@ -14,13 +14,14 @@ import {
   useClaudeMirrorSrc,
   useCopyToClipboard,
   useDeferredError,
+  useDragAndDropEnabled,
   useHorizontalScrollbar,
   useHumanitySignals,
   useKeyboardCollisionPadding,
   useLocalStorage,
   useNotificationPermission,
   useToast
-} from "./chunk-HM2R5MDR.js";
+} from "./chunk-T5HDPHN6.js";
 import {
   Pagination
 } from "./chunk-BBZ6NQL2.js";
@@ -28,7 +29,7 @@ import {
   Checkbox,
   FieldWrapper,
   Input
-} from "./chunk-PQETCTJ4.js";
+} from "./chunk-MXOSTJAG.js";
 import {
   APPROVAL_STATUS,
   ActionsMenuDropdown,
@@ -88,7 +89,7 @@ import {
   useCollapsible,
   useIsHydrated,
   useScrollFade
-} from "./chunk-DBP7S75Q.js";
+} from "./chunk-3AX3ZEY3.js";
 import {
   ToolIcon,
   createHeadingIdDeduper,
@@ -101,7 +102,7 @@ import {
   useIsomorphicLayoutEffect,
   useLgUp,
   useMdUp
-} from "./chunk-W6JA6SFD.js";
+} from "./chunk-JRYS4VMV.js";
 import {
   usePathname,
   useRouter,
@@ -4354,6 +4355,7 @@ var Textarea = forwardRef11(
     className,
     invalid = false,
     label,
+    labelVariant,
     error,
     endIcon,
     endIconAsButton = false,
@@ -4367,7 +4369,7 @@ var Textarea = forwardRef11(
     const reactId = useId3();
     const fieldId = props.id ?? reactId;
     if (!hasAdornment) {
-      return /* @__PURE__ */ jsx36(FieldWrapper, { label, error, children: /* @__PURE__ */ jsx36(
+      return /* @__PURE__ */ jsx36(FieldWrapper, { label, labelVariant, error, children: /* @__PURE__ */ jsx36(
         "textarea",
         {
           className: cn(
@@ -4496,7 +4498,7 @@ var Textarea = forwardRef11(
         ]
       }
     );
-    return /* @__PURE__ */ jsx36(FieldWrapper, { label, error, children: content });
+    return /* @__PURE__ */ jsx36(FieldWrapper, { label, labelVariant, error, children: content });
   }
 );
 Textarea.displayName = "Textarea";
@@ -16015,6 +16017,9 @@ function ActionIconButton({ onClick, disabled, ariaLabel, children }) {
   );
 }
 
+// src/components/ui/ticket-status-config-row.tsx
+import { useId as useId5 } from "react";
+
 // src/components/ui/color-preset-select.tsx
 import { useState as useState40 } from "react";
 import { HexColorPicker } from "react-colorful";
@@ -16284,7 +16289,7 @@ function ColorPickerInput({ value, onChange, disabled, className }) {
 }
 
 // src/components/ui/ticket-status-config-row.tsx
-import { jsx as jsx145, jsxs as jsxs113 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx145, jsxs as jsxs113 } from "react/jsx-runtime";
 function TicketStatusConfigRow({
   variant,
   statusKey,
@@ -16299,82 +16304,152 @@ function TicketStatusConfigRow({
   deleteDisabled,
   deleteDisabledReason,
   dragHandleProps,
-  dragHandleAttributes,
-  isDragging
+  isDragging,
+  moveButtons
 }) {
+  const dragAndDropEnabled = useDragAndDropEnabled();
+  const nameInputId = useId5();
   const isSystem = variant === "system";
   const isCustomColor = !isSystem && presetKey === void 0;
   const previewColor = isSystem ? void 0 : color;
   const showColorPicker = !isSystem && onColorChange && color !== void 0;
   const previewVariant = systemTagVariant ?? (isSystem ? void 0 : "primary");
-  const colClass = "min-w-0 grow basis-[calc(50%-6px)] md:basis-0";
+  const fieldRowOffset = "mt-[calc(var(--font-line-space-h4-body)+0.25rem)]";
+  const chip = /* @__PURE__ */ jsx145(
+    TicketStatusTag,
+    {
+      status: statusKey,
+      label: name || " ",
+      color: previewColor,
+      variant: previewVariant,
+      showIcon: isSystem,
+      className: "max-w-full"
+    }
+  );
   return /* @__PURE__ */ jsxs113(
     "div",
     {
       className: cn(
-        "flex w-full items-start gap-3 rounded-md border border-ods-border bg-ods-card md:gap-[var(--spacing-system-m)]",
+        // Transparent background — only the border outlines the row.
+        "flex w-full items-start gap-3 rounded-md border border-ods-border md:gap-[var(--spacing-system-m)]",
         "p-[var(--spacing-system-m)]",
-        isDragging && "opacity-70 shadow-lg"
+        // The dragged row travels over its siblings, so it needs an opaque back.
+        isDragging && "bg-ods-bg opacity-70 shadow-lg"
       ),
       children: [
-        /* @__PURE__ */ jsx145("div", { className: "flex h-11 w-8 shrink-0 items-center justify-center text-ods-text-secondary md:h-12", children: isSystem ? /* @__PURE__ */ jsx145(DraggerIcon, { size: 24, "aria-hidden": true, className: "opacity-40" }) : /* @__PURE__ */ jsx145(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Drag to reorder",
-            className: "flex size-6 cursor-grab items-center justify-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ods-focus active:cursor-grabbing",
-            ...dragHandleAttributes,
-            ...dragHandleProps,
-            children: /* @__PURE__ */ jsx145(DraggerIcon, { size: 24 })
-          }
-        ) }),
-        /* @__PURE__ */ jsxs113("div", { className: "flex min-w-0 flex-1 flex-wrap items-start gap-x-3 gap-y-4 md:flex-nowrap md:gap-[var(--spacing-system-m)]", children: [
-          /* @__PURE__ */ jsx145("div", { className: cn("flex flex-col gap-[var(--spacing-system-xxs)]", colClass), children: /* @__PURE__ */ jsx145(
-            Input,
-            {
-              value: name,
-              onChange: (e) => onNameChange?.(e.target.value),
-              disabled: isSystem,
-              readOnly: isSystem,
-              "aria-label": "Status name",
-              maxLength: 50
-            }
-          ) }),
-          showColorPicker ? /* @__PURE__ */ jsx145("div", { className: cn("flex", colClass), children: /* @__PURE__ */ jsx145(ColorPresetSelect, { value: color, presetKey, onChange: onColorChange }) }) : /* @__PURE__ */ jsx145("div", { "aria-hidden": true, className: cn("hidden md:block", colClass) }),
-          showColorPicker && isCustomColor ? /* @__PURE__ */ jsx145("div", { className: cn("flex", colClass), children: /* @__PURE__ */ jsx145(ColorPickerInput, { value: color, onChange: (next) => onColorChange({ color: next, preset: void 0 }) }) }) : /* @__PURE__ */ jsx145("div", { "aria-hidden": true, className: cn("hidden md:block", colClass) }),
-          /* @__PURE__ */ jsx145("div", { className: cn("flex h-11 items-center justify-start md:h-12 md:justify-end", colClass), children: /* @__PURE__ */ jsx145(
-            TicketStatusTag,
-            {
-              status: statusKey,
-              label: name || " ",
-              color: previewColor,
-              variant: previewVariant,
-              showIcon: isSystem,
-              className: "max-w-full"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx145("div", { className: "flex h-11 w-12 shrink-0 items-center justify-center md:h-12", children: isSystem ? /* @__PURE__ */ jsx145(TouchFriendlyTooltip, { content: systemTooltip, children: /* @__PURE__ */ jsx145(
-          "button",
+        dragAndDropEnabled && /* @__PURE__ */ jsx145(
+          "div",
           {
-            type: "button",
-            "aria-label": systemTooltip ?? "System status",
-            className: "flex size-6 items-center justify-center text-ods-text-secondary outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
-            children: /* @__PURE__ */ jsx145(InfoCircleIcon, { size: 24 })
+            className: cn(
+              "flex h-11 w-8 shrink-0 items-center justify-center text-ods-text-secondary md:h-12",
+              fieldRowOffset
+            ),
+            children: isSystem ? /* @__PURE__ */ jsx145(DraggerIcon, { size: 24, "aria-hidden": true, className: "opacity-40" }) : /* @__PURE__ */ jsx145(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Drag to reorder",
+                className: "flex size-6 cursor-grab items-center justify-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ods-focus active:cursor-grabbing",
+                ...dragHandleProps,
+                children: /* @__PURE__ */ jsx145(DraggerIcon, { size: 24 })
+              }
+            )
           }
-        ) }) : /* @__PURE__ */ jsx145(TouchFriendlyTooltip, { content: deleteDisabled ? deleteDisabledReason : void 0, children: /* @__PURE__ */ jsx145("span", { className: "inline-flex", children: /* @__PURE__ */ jsx145(
-          Button,
+        ),
+        /* @__PURE__ */ jsxs113(
+          "div",
           {
-            type: "button",
-            variant: "outline",
-            size: "icon",
-            "aria-label": "Delete status",
-            disabled: deleteDisabled,
-            onClick: deleteDisabled ? void 0 : onDelete,
-            className: cn("size-11 md:size-12", deleteDisabled && "pointer-events-none"),
-            children: /* @__PURE__ */ jsx145(TrashIcon, { className: "text-ods-error" })
+            className: cn(
+              "min-w-0 flex-1 items-start gap-x-3 gap-y-[var(--spacing-system-m)] md:gap-x-[var(--spacing-system-m)]",
+              isSystem ? "flex flex-wrap" : (
+                // Mobile custom rows are a strict two-column grid, per the mock:
+                // fields (name / color / hex, all one width) on the left, the
+                // controls and the chip stacked in the right column. From md up
+                // the same children flow as a wrapping flex row.
+                "grid grid-cols-[minmax(0,1fr)_auto] md:flex md:flex-wrap"
+              )
+            ),
+            children: [
+              /* @__PURE__ */ jsxs113("div", { className: "order-1 flex min-w-0 grow basis-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
+                /* @__PURE__ */ jsx145(Label, { variant: "large", htmlFor: nameInputId, children: "Status Name" }),
+                /* @__PURE__ */ jsx145(
+                  Input,
+                  {
+                    id: nameInputId,
+                    value: name,
+                    onChange: (e) => onNameChange?.(e.target.value),
+                    disabled: isSystem,
+                    readOnly: isSystem,
+                    maxLength: 50
+                  }
+                )
+              ] }),
+              showColorPicker ? /* @__PURE__ */ jsxs113("div", { className: "order-3 flex min-w-0 grow basis-full flex-col gap-[var(--spacing-system-xxs)] md:order-2 md:basis-0", children: [
+                /* @__PURE__ */ jsx145(Label, { variant: "large", children: "Color" }),
+                /* @__PURE__ */ jsx145(ColorPresetSelect, { value: color, presetKey, onChange: onColorChange }),
+                isCustomColor && /* @__PURE__ */ jsx145("div", { className: "mt-[var(--spacing-system-xxs)] flex min-w-0", children: /* @__PURE__ */ jsx145(ColorPickerInput, { value: color, onChange: (next) => onColorChange({ color: next, preset: void 0 }) }) })
+              ] }) : /* @__PURE__ */ jsx145("div", { "aria-hidden": true, className: "hidden min-w-0 grow basis-0 lg:order-2 lg:block" }),
+              /* @__PURE__ */ jsx145("div", { "aria-hidden": true, className: "hidden min-w-0 grow basis-0 lg:order-3 lg:block" }),
+              isSystem ? /* @__PURE__ */ jsx145(
+                "div",
+                {
+                  className: cn(
+                    "order-2 flex h-11 min-w-0 grow basis-0 items-center justify-end md:h-12 lg:order-4",
+                    fieldRowOffset
+                  ),
+                  children: chip
+                }
+              ) : /* @__PURE__ */ jsxs113(Fragment25, { children: [
+                /* @__PURE__ */ jsx145(
+                  "div",
+                  {
+                    className: cn(
+                      "hidden h-12 min-w-0 grow basis-0 items-center justify-end lg:order-4 lg:flex",
+                      fieldRowOffset
+                    ),
+                    children: chip
+                  }
+                ),
+                /* @__PURE__ */ jsx145("div", { className: "hidden min-w-0 basis-full items-center justify-end md:order-4 md:flex lg:hidden", children: chip }),
+                /* @__PURE__ */ jsx145("div", { className: cn("order-4 flex h-11 min-w-0 items-center md:hidden", fieldRowOffset), children: chip })
+              ] }),
+              /* @__PURE__ */ jsxs113(
+                "div",
+                {
+                  className: cn(
+                    "flex h-11 shrink-0 items-center justify-end gap-[var(--spacing-system-s)] md:h-12 lg:order-5",
+                    isSystem ? "order-3" : "order-2 md:order-3",
+                    fieldRowOffset
+                  ),
+                  children: [
+                    !isSystem && moveButtons,
+                    isSystem ? /* @__PURE__ */ jsx145("div", { className: "flex w-11 justify-center md:w-12", children: /* @__PURE__ */ jsx145(TouchFriendlyTooltip, { content: systemTooltip, children: /* @__PURE__ */ jsx145(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": systemTooltip ?? "System status",
+                        className: "flex size-6 items-center justify-center text-ods-text-secondary outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
+                        children: /* @__PURE__ */ jsx145(InfoCircleIcon, { size: 24 })
+                      }
+                    ) }) }) : /* @__PURE__ */ jsx145(TouchFriendlyTooltip, { content: deleteDisabled ? deleteDisabledReason : void 0, children: /* @__PURE__ */ jsx145("span", { className: "inline-flex", children: /* @__PURE__ */ jsx145(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "outline",
+                        size: "icon",
+                        "aria-label": "Delete status",
+                        disabled: deleteDisabled,
+                        onClick: deleteDisabled ? void 0 : onDelete,
+                        className: cn("size-11 md:size-12", deleteDisabled && "pointer-events-none"),
+                        children: /* @__PURE__ */ jsx145(TrashIcon, { className: "text-ods-error" })
+                      }
+                    ) }) })
+                  ]
+                }
+              )
+            ]
           }
-        ) }) }) })
+        )
       ]
     }
   );
@@ -16638,7 +16713,7 @@ import { useState as useState43 } from "react";
 
 // src/components/ui/ticket-note-card.tsx
 import { useState as useState42 } from "react";
-import { Fragment as Fragment25, jsx as jsx149, jsxs as jsxs117 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx149, jsxs as jsxs117 } from "react/jsx-runtime";
 function TicketNoteCard({ note, onEdit, onDelete, className }) {
   const [isEditing, setIsEditing] = useState42(false);
   const [editText, setEditText] = useState42(note.text);
@@ -16696,7 +16771,7 @@ function TicketNoteCard({ note, onEdit, onDelete, className }) {
           children: /* @__PURE__ */ jsx149(XmarkIcon, { className: "size-5" })
         }
       )
-    ] }) : /* @__PURE__ */ jsxs117(Fragment25, { children: [
+    ] }) : /* @__PURE__ */ jsxs117(Fragment26, { children: [
       /* @__PURE__ */ jsx149("p", { className: "text-ods-text-primary text-h4", children: note.text }),
       /* @__PURE__ */ jsxs117("p", { className: "truncate text-ods-text-secondary text-h6", title: `${note.authorName} \u2022 ${note.createdAt}`, children: [
         note.authorName,
@@ -16786,7 +16861,7 @@ function TicketNotesSection({
 }
 
 // src/components/ui/ticket-info-section.tsx
-import { Fragment as Fragment26, jsx as jsx151, jsxs as jsxs119 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx151, jsxs as jsxs119 } from "react/jsx-runtime";
 function InfoCell({
   value,
   label,
@@ -16905,7 +16980,7 @@ function TicketInfoSection({
         )
       ] })
     ] }),
-    expanded && /* @__PURE__ */ jsxs119(Fragment26, { children: [
+    expanded && /* @__PURE__ */ jsxs119(Fragment27, { children: [
       createdAt && /* @__PURE__ */ jsx151("div", { className: "grid grid-cols-2 items-center gap-4 border-b border-ods-border bg-ods-bg px-4 py-3", children: /* @__PURE__ */ jsx151(InfoCell, { value: createdAt, label: "Created" }) }),
       /* @__PURE__ */ jsxs119("div", { className: "flex flex-col gap-4 border-b border-ods-border bg-ods-bg p-4", children: [
         description && /* @__PURE__ */ jsx151(SimpleMarkdownRenderer, { content: description }),
@@ -17567,7 +17642,7 @@ function SsoProviderButtons({
 }
 
 // src/components/features/auth/complete-account-form.tsx
-import { Fragment as Fragment27, jsx as jsx162, jsxs as jsxs128 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx162, jsxs as jsxs128 } from "react/jsx-runtime";
 function CompleteAccountForm({
   firstName,
   lastName,
@@ -17616,7 +17691,7 @@ function CompleteAccountForm({
           /* @__PURE__ */ jsx162("h1", { className: "tracking-[-0.64px] text-ods-text-primary text-h2", children: title }),
           /* @__PURE__ */ jsx162("p", { className: "text-ods-text-secondary text-h4", children: subtitle })
         ] }),
-        ssoProviders && ssoProviders.length > 0 && /* @__PURE__ */ jsxs128(Fragment27, { children: [
+        ssoProviders && ssoProviders.length > 0 && /* @__PURE__ */ jsxs128(Fragment28, { children: [
           /* @__PURE__ */ jsx162(
             SsoProviderButtons,
             {
@@ -17753,7 +17828,7 @@ function TermsAgreementLabel({ termsUrl = "#", privacyPolicyUrl = "#" }) {
 }
 
 // src/components/features/auth/create-organization-form.tsx
-import { Fragment as Fragment28, jsx as jsx164, jsxs as jsxs130 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx164, jsxs as jsxs130 } from "react/jsx-runtime";
 function CreateOrganizationForm({
   email,
   organizationName,
@@ -17874,7 +17949,7 @@ function CreateOrganizationForm({
             children: submitLabel
           }
         ),
-        hasSso && /* @__PURE__ */ jsxs130(Fragment28, { children: [
+        hasSso && /* @__PURE__ */ jsxs130(Fragment29, { children: [
           /* @__PURE__ */ jsxs130("div", { className: "flex items-center gap-[var(--spacing-system-s)]", children: [
             /* @__PURE__ */ jsx164("div", { className: "h-px flex-1 bg-ods-border" }),
             /* @__PURE__ */ jsx164("span", { className: "text-ods-text-secondary text-h6", children: dividerLabel }),
@@ -21008,7 +21083,7 @@ var ConfidenceBadge = ({
 };
 
 // src/components/features/seo-editor-preview.tsx
-import { Fragment as Fragment29, jsx as jsx194, jsxs as jsxs155 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx194, jsxs as jsxs155 } from "react/jsx-runtime";
 var SEO_MEDIA_BOX_HEIGHT = "h-[280px]";
 function SEOEditorPreview({
   seoTitle,
@@ -21065,7 +21140,7 @@ function SEOEditorPreview({
           {
             label: "SEO Title",
             error: seoTitleTooLong ? `Too long: search engines may truncate this title (keep it under ${SEO_TITLE_MAX_LENGTH})` : null,
-            labelExtras: aiConfidenceSeoTitle !== void 0 ? /* @__PURE__ */ jsxs155(Fragment29, { children: [
+            labelExtras: aiConfidenceSeoTitle !== void 0 ? /* @__PURE__ */ jsxs155(Fragment30, { children: [
               /* @__PURE__ */ jsx194(AIGeneratedBadge, {}),
               /* @__PURE__ */ jsx194(ConfidenceBadge, { confidence: aiConfidenceSeoTitle, showLabel: true, showPercentage: true, size: "sm" })
             ] }) : void 0,
@@ -21104,7 +21179,7 @@ function SEOEditorPreview({
         Field,
         {
           label: "SEO Keywords",
-          labelExtras: aiConfidenceSeoKeywords !== void 0 ? /* @__PURE__ */ jsxs155(Fragment29, { children: [
+          labelExtras: aiConfidenceSeoKeywords !== void 0 ? /* @__PURE__ */ jsxs155(Fragment30, { children: [
             /* @__PURE__ */ jsx194(AIGeneratedBadge, {}),
             /* @__PURE__ */ jsx194(
               ConfidenceBadge,
@@ -21137,7 +21212,7 @@ function SEOEditorPreview({
           {
             label: "SEO Description",
             error: seoDescriptionTooLong ? `Too long: search engines may truncate this description (keep it under ${SEO_DESCRIPTION_MAX_LENGTH})` : null,
-            labelExtras: aiConfidenceSeoDescription !== void 0 ? /* @__PURE__ */ jsxs155(Fragment29, { children: [
+            labelExtras: aiConfidenceSeoDescription !== void 0 ? /* @__PURE__ */ jsxs155(Fragment30, { children: [
               /* @__PURE__ */ jsx194(AIGeneratedBadge, {}),
               /* @__PURE__ */ jsx194(
                 ConfidenceBadge,
@@ -21228,7 +21303,7 @@ function SEOEditorPreview({
                 "flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-ods-border bg-ods-bg-hover transition-colors hover:border-ods-accent"
               ),
               onClick: () => onOgImageUpload && fileInputRef?.click(),
-              children: isUploading ? /* @__PURE__ */ jsx194(Loader28, { className: "h-8 w-8 animate-spin text-ods-accent" }) : /* @__PURE__ */ jsxs155(Fragment29, { children: [
+              children: isUploading ? /* @__PURE__ */ jsx194(Loader28, { className: "h-8 w-8 animate-spin text-ods-accent" }) : /* @__PURE__ */ jsxs155(Fragment30, { children: [
                 /* @__PURE__ */ jsx194(Upload4, { className: "mb-2 h-8 w-8 text-ods-text-secondary" }),
                 /* @__PURE__ */ jsx194("span", { className: "text-ods-text-secondary text-h6", children: onOgImageUpload ? "Click to upload OG image" : "No image" })
               ] })
@@ -21741,7 +21816,7 @@ function VideoBitesDisplay({
 // src/components/features/walkthrough-video.tsx
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
 import { useCallback as useCallback20, useEffect as useEffect29, useLayoutEffect as useLayoutEffect2, useMemo as useMemo19, useRef as useRef32, useState as useState58 } from "react";
-import { Fragment as Fragment30, jsx as jsx201, jsxs as jsxs160 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx201, jsxs as jsxs160 } from "react/jsx-runtime";
 var isAtEnd = (duration, time) => duration > 0 && duration - time < 1;
 function theaterSeedFromLive(live, fallbackTime, fallbackMuted) {
   const time = live?.getCurrentTime() ?? 0;
@@ -22291,7 +22366,7 @@ function WalkthroughVideo({
       ]
     }
   );
-  return /* @__PURE__ */ jsxs160(Fragment30, { children: [
+  return /* @__PURE__ */ jsxs160(Fragment31, { children: [
     showCard && (inline ? (
       // No wrapper: a positioning / z-index / safe-area shell around an
       // in-flow block is exactly what stops it sizing to its container.
@@ -23784,7 +23859,7 @@ function ViewToggle({
 // src/components/features/policy-configuration-panel.tsx
 import { ChevronDown as ChevronDown8, Shield } from "lucide-react";
 import { useState as useState61 } from "react";
-import { Fragment as Fragment31, jsx as jsx220, jsxs as jsxs175 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx220, jsxs as jsxs175 } from "react/jsx-runtime";
 var approvalLevelLabels = {
   ALLOW: "Allow",
   ASK_USER: "Ask User",
@@ -23850,7 +23925,7 @@ var PolicyRow = ({ policy, categoryId, editMode, onPermissionChange }) => {
 var CategorySection = ({ category, editMode, isExpanded, bulkLevel, onToggle, onBulkLevelChange, onPolicyPermissionChange }) => {
   const { innerRef, containerStyle } = useCollapsible({ expanded: isExpanded, durationMs: 300 });
   const handleBulkChange = (level) => onBulkLevelChange(category.id, level);
-  return /* @__PURE__ */ jsxs175(Fragment31, { children: [
+  return /* @__PURE__ */ jsxs175(Fragment32, { children: [
     /* @__PURE__ */ jsxs175(
       "div",
       {
@@ -23991,7 +24066,7 @@ PolicyConfigurationPanel.displayName = "PolicyConfigurationPanel";
 // src/components/features/waitlist-form.tsx
 import { getCountries as getCountries2 } from "libphonenumber-js";
 import { useEffect as useEffect30, useState as useState62 } from "react";
-import { Fragment as Fragment32, jsx as jsx221, jsxs as jsxs176 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx221, jsxs as jsxs176 } from "react/jsx-runtime";
 function WaitlistForm({
   id = "waitlist-form",
   className,
@@ -24152,7 +24227,7 @@ function WaitlistForm({
               error: showConsentError ? "Please agree to SMS notifications to continue." : void 0,
               disabled: isSubmitting,
               label: smsCheckboxLabel,
-              description: /* @__PURE__ */ jsxs176(Fragment32, { children: [
+              description: /* @__PURE__ */ jsxs176(Fragment33, { children: [
                 consentText,
                 " View our ",
                 /* @__PURE__ */ jsx221(
@@ -25050,7 +25125,7 @@ function NotificationTile({
 }
 
 // src/components/features/notifications/notification-drawer.tsx
-import { Fragment as Fragment33, jsx as jsx225, jsxs as jsxs179 } from "react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx225, jsxs as jsxs179 } from "react/jsx-runtime";
 function NotificationDrawer({
   className,
   liveDurationMs,
@@ -25083,7 +25158,7 @@ function NotificationDrawer({
   } = ctx;
   const renderTile = renderTileProp ?? ctxRenderTile;
   const unreadNotifications = notifications.filter((n) => !n.read);
-  const content = /* @__PURE__ */ jsxs179(Fragment33, { children: [
+  const content = /* @__PURE__ */ jsxs179(Fragment34, { children: [
     /* @__PURE__ */ jsx225("div", { className: "px-[var(--spacing-system-m)] pt-[var(--spacing-system-m)]", children: /* @__PURE__ */ jsx225(
       DrawerTitle,
       {
@@ -25195,7 +25270,7 @@ function DrawerScrollList({
     {
       ref: scrollRef,
       className: "flex flex-1 flex-col gap-[var(--spacing-system-xs)] overflow-y-auto px-[var(--spacing-system-m)]",
-      children: isEmpty && !isLoadingMore ? /* @__PURE__ */ jsx225(EmptyState, {}) : /* @__PURE__ */ jsxs179(Fragment33, { children: [
+      children: isEmpty && !isLoadingMore ? /* @__PURE__ */ jsx225(EmptyState, {}) : /* @__PURE__ */ jsxs179(Fragment34, { children: [
         unreadNotifications.map((n) => {
           const custom = renderTile?.(n, { onComplete, onSettle, liveDurationMs });
           if (custom) return /* @__PURE__ */ jsx225("div", { children: custom }, n.id);
@@ -25217,7 +25292,7 @@ function DrawerScrollList({
   );
 }
 function DrawerLoadingTiles() {
-  return /* @__PURE__ */ jsxs179(Fragment33, { children: [
+  return /* @__PURE__ */ jsxs179(Fragment34, { children: [
     /* @__PURE__ */ jsx225(
       "div",
       {
@@ -25447,7 +25522,7 @@ function approvalMetaToBatchData(approval) {
 }
 
 // src/components/features/notifications/approval-request-notification-tile.tsx
-import { Fragment as Fragment34, jsx as jsx227, jsxs as jsxs180 } from "react/jsx-runtime";
+import { Fragment as Fragment35, jsx as jsx227, jsxs as jsxs180 } from "react/jsx-runtime";
 function ApprovalRequestNotificationTile({
   notification,
   onApprove,
@@ -25497,7 +25572,7 @@ function ApprovalRequestNotificationTile({
       className,
       paused: pinned || processing,
       actions: /* @__PURE__ */ jsxs180("div", { className: "flex w-full items-center gap-[var(--spacing-system-xs)]", children: [
-        status === "pending" ? /* @__PURE__ */ jsxs180(Fragment34, { children: [
+        status === "pending" ? /* @__PURE__ */ jsxs180(Fragment35, { children: [
           /* @__PURE__ */ jsx227(
             Button,
             {
@@ -25982,7 +26057,7 @@ function HeaderButton({
 }
 
 // src/components/features/time-tracker/time-tracker-header-button.tsx
-import { Fragment as Fragment35, jsx as jsx232, jsxs as jsxs183 } from "react/jsx-runtime";
+import { Fragment as Fragment36, jsx as jsx232, jsxs as jsxs183 } from "react/jsx-runtime";
 function TimeTrackerHeaderButton({ className, disabled }) {
   const ctx = useOptionalTimeTracker();
   const elapsedLabel = useTrackerClock({
@@ -26027,7 +26102,7 @@ function TimeTrackerHeaderButton({ className, disabled }) {
           isActive && "md:w-auto md:min-w-[144px] md:justify-center md:gap-[var(--spacing-system-xsf)] md:px-[var(--spacing-system-sf)]",
           className
         ),
-        icon: /* @__PURE__ */ jsxs183(Fragment35, { children: [
+        icon: /* @__PURE__ */ jsxs183(Fragment36, { children: [
           /* @__PURE__ */ jsx232(
             ClockHistoryIcon,
             {
@@ -26082,7 +26157,7 @@ function TimeTrackerHeaderButton({ className, disabled }) {
 import { combine as combine3 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/utils/prevent-unhandled";
-import { Fragment as Fragment38, useCallback as useCallback27, useEffect as useEffect41, useMemo as useMemo23, useRef as useRef41, useState as useState76 } from "react";
+import { Fragment as Fragment39, useCallback as useCallback27, useEffect as useEffect41, useMemo as useMemo23, useRef as useRef41, useState as useState76 } from "react";
 import { createPortal } from "react-dom";
 
 // src/utils/auto-scroll-ancestors.ts
@@ -26468,7 +26543,7 @@ function hasMoveSettled(columns, move) {
 }
 
 // src/components/features/board/ticket-card.tsx
-import { Fragment as Fragment36, jsx as jsx235, jsxs as jsxs186 } from "react/jsx-runtime";
+import { Fragment as Fragment37, jsx as jsx235, jsxs as jsxs186 } from "react/jsx-runtime";
 var PRIORITY_COLOR_CLASS = {
   low: "text-ods-text-secondary",
   medium: "text-ods-info",
@@ -26529,7 +26604,7 @@ function TicketCardBody({ ticket, columnColor, renderAssignSlot, onApprove, onRe
   ] }) : null;
   const timestampLabel = ticket.createdAt ? formatTicketRelativeTime(ticket.createdAt) : null;
   const tooltipLabel = ticket.createdAt ? formatTicketFullTimestamp(ticket.createdAt) : null;
-  return /* @__PURE__ */ jsxs186(Fragment36, { children: [
+  return /* @__PURE__ */ jsxs186(Fragment37, { children: [
     /* @__PURE__ */ jsxs186("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
       /* @__PURE__ */ jsxs186("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-zero)]", title: ticket.title, children: [
         /* @__PURE__ */ jsx235("p", { className: "truncate text-ods-text-primary text-h3", children: ticket.title }),
@@ -26820,7 +26895,7 @@ var TicketCardSkeleton = forwardRef31(
 TicketCardSkeleton.displayName = "TicketCardSkeleton";
 
 // src/components/features/board/board-column.tsx
-import { Fragment as Fragment37, jsx as jsx237, jsxs as jsxs188 } from "react/jsx-runtime";
+import { Fragment as Fragment38, jsx as jsx237, jsxs as jsxs188 } from "react/jsx-runtime";
 var BoardColumn = memo6(function BoardColumnImpl({
   column,
   collapsed = false,
@@ -26895,7 +26970,7 @@ var BoardColumn = memo6(function BoardColumnImpl({
             onArchive: !collapsed && column.archivable && onArchive ? () => onArchive(column.id) : void 0
           }
         ),
-        !collapsed && /* @__PURE__ */ jsxs188(Fragment37, { children: [
+        !collapsed && /* @__PURE__ */ jsxs188(Fragment38, { children: [
           /* @__PURE__ */ jsx237("div", { "aria-hidden": true, className: "-mx-[var(--spacing-system-sf)] h-px shrink-0 bg-ods-border" }),
           /* @__PURE__ */ jsx237(
             ColumnBody,
@@ -26988,7 +27063,7 @@ function ColumnBody({
   );
 }
 function SkeletonStack({ count = 4 }) {
-  return /* @__PURE__ */ jsx237(Fragment37, { children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx237(TicketCardSkeleton, {}, `skeleton-${i}`)) });
+  return /* @__PURE__ */ jsx237(Fragment38, { children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx237(TicketCardSkeleton, {}, `skeleton-${i}`)) });
 }
 function EmptyState2({ columnId }) {
   const aim = useDropAim();
@@ -27085,7 +27160,12 @@ function Board({
   const previewRef = useRef41(null);
   const [reportedMove, setPendingMove] = useState76(null);
   const pendingMove = reportedMove && !hasMoveSettled(columns, reportedMove) ? reportedMove : null;
-  const view = useMemo23(() => pendingMove ? applyPendingMove(columns, pendingMove) : columns, [columns, pendingMove]);
+  const dragAndDropEnabled = useDragAndDropEnabled();
+  const view = useMemo23(() => {
+    const base = pendingMove ? applyPendingMove(columns, pendingMove) : columns;
+    if (dragAndDropEnabled) return base;
+    return base.map((column) => ({ ...column, dragDisabled: true, dropDisabled: true }));
+  }, [columns, pendingMove, dragAndDropEnabled]);
   useEffect41(() => {
     columnsRef.current = view;
     onChangeRef.current = onChange;
@@ -27330,7 +27410,7 @@ function Board({
             const joinLeft = !!(column.system && prev?.system);
             const joinRight = !!(column.system && next?.system);
             const showGap = i > 0 && !joinLeft;
-            return /* @__PURE__ */ jsxs189(Fragment38, { children: [
+            return /* @__PURE__ */ jsxs189(Fragment39, { children: [
               showGap && /* @__PURE__ */ jsx238("div", { "aria-hidden": true, className: "w-[var(--spacing-system-mf)] shrink-0" }),
               /* @__PURE__ */ jsx238(
                 BoardColumn,
@@ -27477,7 +27557,7 @@ import {
   useCallback as useCallback28,
   useContext as useContext12,
   useEffect as useEffect42,
-  useId as useId5,
+  useId as useId6,
   useMemo as useMemo24,
   useRef as useRef42,
   useState as useState77
@@ -27495,7 +27575,8 @@ function useSortableListContext() {
 }
 function SortableList({ onReorder, getItemLabel, disabled = false, className, children }) {
   const listRef = useRef42(null);
-  const dragType = useId5();
+  const dragAndDropEnabled = useDragAndDropEnabled();
+  const dragType = useId6();
   const [announcement, setAnnouncement] = useState77("");
   const onReorderRef = useRef42(onReorder);
   const getItemLabelRef = useRef42(getItemLabel);
@@ -27521,7 +27602,7 @@ function SortableList({ onReorder, getItemLabel, disabled = false, className, ch
   );
   useEffect42(() => {
     const list = listRef.current;
-    if (!list) return void 0;
+    if (!list || disabled || !dragAndDropEnabled) return void 0;
     let drag = null;
     return combine4(
       // Dragging towards the edge of the screen — or past it — scrolls whatever
@@ -27585,7 +27666,7 @@ function SortableList({ onReorder, getItemLabel, disabled = false, className, ch
         }
       })
     );
-  }, [dragType, readItems, reorder]);
+  }, [dragType, disabled, dragAndDropEnabled, readItems, reorder]);
   useIsomorphicLayoutEffect(() => {
     const from = flipFrom.current;
     flipFrom.current = null;
@@ -27617,8 +27698,8 @@ function SortableList({ onReorder, getItemLabel, disabled = false, className, ch
     []
   );
   const context = useMemo24(
-    () => ({ dragType, disabled, reorder, readItems }),
-    [dragType, disabled, reorder, readItems]
+    () => ({ dragType, disabled, dragAndDropEnabled, reorder, readItems }),
+    [dragType, disabled, dragAndDropEnabled, reorder, readItems]
   );
   return /* @__PURE__ */ jsx239(SortableListContext.Provider, { value: context, children: /* @__PURE__ */ jsxs190("div", { ref: listRef, className, children: [
     children,
@@ -27626,13 +27707,63 @@ function SortableList({ onReorder, getItemLabel, disabled = false, className, ch
   ] }) });
 }
 
+// src/components/features/sortable-list/sortable-move-buttons.tsx
+import { useRef as useRef43 } from "react";
+import { jsx as jsx240, jsxs as jsxs191 } from "react/jsx-runtime";
+function SortableMoveButtons({ index, count, label, className }) {
+  const { disabled, reorder } = useSortableListContext();
+  const upRef = useRef43(null);
+  const downRef = useRef43(null);
+  const move = (step) => {
+    const to = index + step;
+    if (to < 0 || to >= count) return;
+    reorder(index, to);
+    requestAnimationFrame(() => {
+      if (step === -1 && to === 0) downRef.current?.focus();
+      if (step === 1 && to === count - 1) upRef.current?.focus();
+    });
+  };
+  const subject = label ?? "item";
+  return /* @__PURE__ */ jsxs191("div", { className: cn("inline-flex shrink-0", className), children: [
+    /* @__PURE__ */ jsx240(
+      Button,
+      {
+        ref: upRef,
+        type: "button",
+        variant: "outline",
+        size: "icon",
+        "aria-label": `Move ${subject} up`,
+        disabled: disabled || index <= 0,
+        onClick: () => move(-1),
+        className: "rounded-r-none border-r-0",
+        children: /* @__PURE__ */ jsx240(Arrow01UpIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx240(
+      Button,
+      {
+        ref: downRef,
+        type: "button",
+        variant: "outline",
+        size: "icon",
+        "aria-label": `Move ${subject} down`,
+        disabled: disabled || index >= count - 1,
+        onClick: () => move(1),
+        className: "rounded-l-none",
+        children: /* @__PURE__ */ jsx240(Arrow01DownIcon, {})
+      }
+    )
+  ] });
+}
+
 // src/components/features/sortable-list/use-sortable-item.ts
 import { combine as combine5 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable as draggable2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
 import { useCallback as useCallback29, useEffect as useEffect43, useState as useState78 } from "react";
 function useSortableItem() {
-  const { dragType, disabled, reorder, readItems } = useSortableListContext();
+  const { dragType, disabled, dragAndDropEnabled, reorder, readItems } = useSortableListContext();
+  const inert = disabled || !dragAndDropEnabled;
   const [item, setItem] = useState78(null);
   const [handle, setHandle] = useState78(null);
   const [isDragging, setIsDragging] = useState78(false);
@@ -27641,7 +27772,7 @@ function useSortableItem() {
     setItem(node);
   }, []);
   useEffect43(() => {
-    if (!item || !handle || disabled) return void 0;
+    if (!item || !handle || inert) return void 0;
     return combine5(
       // The drag has to start as a "move", or its first frame is drawn with the
       // copy cursor — see `drag-effect.ts`.
@@ -27656,11 +27787,11 @@ function useSortableItem() {
         onDrop: () => setIsDragging(false)
       })
     );
-  }, [item, handle, disabled, dragType]);
+  }, [item, handle, inert, dragType]);
   const onKeyDown = useCallback29(
     (event) => {
       const step = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
-      if (!step || disabled) return;
+      if (!step || inert) return;
       const items = readItems();
       const from = items.indexOf(event.currentTarget.closest(`[${SORTABLE_ITEM_ATTRIBUTE}]`));
       const to = from + step;
@@ -27669,65 +27800,49 @@ function useSortableItem() {
       reorder(from, to);
       requestAnimationFrame(() => handle?.focus());
     },
-    [disabled, readItems, reorder, handle]
+    [inert, readItems, reorder, handle]
   );
-  return { itemRef, dragHandleProps: { ref: setHandle, onKeyDown }, isDragging };
+  return { itemRef, dragHandleProps: { ref: setHandle, onKeyDown }, isDragging, dragAndDropEnabled };
 }
 
 // src/components/features/ticket-status-config-list/ticket-status-config-list.tsx
-import {
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  closestCenter,
-  useSensor,
-  useSensors
-} from "@dnd-kit/core";
-import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { useMemo as useMemo25 } from "react";
-import { jsx as jsx240 } from "react/jsx-runtime";
+import { jsx as jsx241 } from "react/jsx-runtime";
 function TicketStatusConfigList({
   items,
   onReorder,
   renderRow,
+  getItemLabel,
   className
 }) {
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  return /* @__PURE__ */ jsx241(
+    SortableList,
+    {
+      onReorder,
+      getItemLabel,
+      className: cn("flex w-full flex-col gap-[var(--spacing-system-xs)]", className),
+      children: items.map((item, index) => /* @__PURE__ */ jsx241(SortableRow, { index, count: items.length, label: getItemLabel?.(index), children: (args) => renderRow(item, args) }, item.id))
+    }
+  );
+}
+function SortableRow({
+  index,
+  count,
+  label,
+  children
+}) {
+  const { itemRef, dragHandleProps, isDragging, dragAndDropEnabled } = useSortableItem();
+  return /* @__PURE__ */ jsx241(
+    "div",
+    {
+      ref: itemRef,
+      className: isDragging ? "relative z-10" : void 0,
+      children: children({
+        dragHandleProps,
+        isDragging,
+        moveButtons: dragAndDropEnabled ? null : /* @__PURE__ */ jsx241(SortableMoveButtons, { index, count, label })
+      })
+    }
   );
-  const handleDragEnd = (event) => {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-    const oldIndex = items.findIndex((i) => i.id === active.id);
-    const newIndex = items.findIndex((i) => i.id === over.id);
-    if (oldIndex === -1 || newIndex === -1) return;
-    onReorder(oldIndex, newIndex);
-  };
-  const sortableIds = useMemo25(() => items.map((i) => i.id), [items]);
-  return /* @__PURE__ */ jsx240(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx240(SortableContext, { items: sortableIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx240("div", { className: cn("flex w-full flex-col gap-[var(--spacing-system-xs)]", className), children: items.map((item) => /* @__PURE__ */ jsx240(SortableRow, { id: item.id, children: (args) => renderRow(item, args) }, item.id)) }) }) });
-}
-function SortableRow({ id, children }) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    // Raise the actively dragged row above its siblings — without this the
-    // stacking follows DOM order, so a row dragged DOWN slides UNDER the rows
-    // below it while a row dragged up correctly renders on top.
-    zIndex: isDragging ? 1 : void 0
-  };
-  return /* @__PURE__ */ jsx240("div", { ref: setNodeRef, style, children: children({
-    dragHandleProps: listeners,
-    dragHandleAttributes: attributes,
-    isDragging
-  }) });
 }
 
 export {
@@ -28217,6 +28332,7 @@ export {
   groupTicketsByStatus,
   SLOT_STICKINESS,
   SortableList,
+  SortableMoveButtons,
   useSortableItem,
   TicketStatusConfigList,
   TableHeader,
@@ -28294,4 +28410,4 @@ export {
   ReopenTicketRequestModal,
   FilterPillRow
 };
-//# sourceMappingURL=chunk-L66XBQM6.js.map
+//# sourceMappingURL=chunk-CP5EYMNL.js.map