@flamingo-stack/openframe-frontend-core 0.0.577 → 0.0.578-snapshot.20260831161155

package/src/components/chat/utils/execute-navigation.ts

@@ -31,7 +31,12 @@
 import type { ChatRuntime } from '../../../contexts/chat-runtime-context';
 import { navigateSamePageHash, STICKY_HEADER_OFFSET_PX } from '../../../utils/same-page-hash-nav';
 import { NEW_TAB_FEATURES, stripSameOriginToPath } from './chat-nav-resolution';
-import { computeIsNewTab } from './nav-anchor-props';
+import { computeIsNewTab, isSameOriginAbsoluteHref } from './nav-anchor-props';
+
+/** Absolute `http(s)` URL pointing at an origin that is not ours. */
+function isForeignOriginHref(href: string): boolean {
+  return /^https?:\/\//i.test(href) && !isSameOriginAbsoluteHref(href);
+}
 
 /** Minimal mouse-event surface — structural so chip buttons / tiles can call it
  *  without casting `React.MouseEvent`. */
@@ -78,7 +83,12 @@ function runNavigation(
     else window.open(href, '_blank', NEW_TAB_FEATURES);
     return;
   }
-  const target = stripSameOriginToPath(href);
+  // A FOREIGN href that the host's `decideNewTab` routed same-tab must reach the
+  // router whole: stripping its origin pushes `/webinars/x` onto OUR origin and
+  // 404s. Same-origin absolutes still get stripped, so an in-app soft nav stays
+  // one. (`stripSameOriginToPath` itself strips unconditionally on purpose — the
+  // hub is one app across several origins and depends on that.)
+  const target = isForeignOriginHref(href) ? href : stripSameOriginToPath(href);
   // Same-page hash target (e.g. a chat card deep-linking to `/faqs#faq-item-49`):
   // route through the UNIFIED same-page-hash primitive FIRST. A host router /
   // `router.push` performs `pushState`, which the HTML spec says does NOT fire a
@@ -139,3 +149,23 @@ export function executeNavigationImperative({
 }: ExecuteNavigationImperativeArgs): void {
   runNavigation(runtime, href, undefined, targetPlatform, fallbackNavigate);
 }
+
+/**
+ * @deprecated Call {@link executeNavigation} directly. Kept only so external
+ * embedders' imports keep resolving; no lib code path goes through it.
+ */
+export function handleChatNavClick(
+  event: NavClickEvent,
+  runtime: ChatRuntime | null | undefined,
+  { href, path, targetPlatform }: ChatNavClickInput,
+  fallbackNavigate?: (path: string) => void,
+): boolean {
+  return executeNavigation({ event, runtime, href, path, targetPlatform, fallbackNavigate });
+}
+
+/** @deprecated Argument shape of the deprecated {@link handleChatNavClick}. */
+export interface ChatNavClickInput {
+  href: string;
+  path?: string | null;
+  targetPlatform?: string | null;
+}

package/src/components/chat/utils/index.ts

@@ -59,7 +59,7 @@ export {
   resolveExternalNavigation,
   type ExternalNavResolution,
 } from './chat-nav-resolution';
-export { handleChatNavClick, type ChatNavClickInput } from './nav-click-handler';
+export { handleChatNavClick, type ChatNavClickInput } from './execute-navigation';
 // The unified navigation-execution primitive — single source of truth for
 // new-tab/same-tab + internal/external + embed/host + the runtime→router→window
 // fallback. Every surface routes through it (handleChatNavClick is now a wrapper).

package/src/components/chat/utils/nav-anchor-props.ts

@@ -33,11 +33,13 @@ import { decideNewTab as libDecideNewTab } from './decide-new-tab';
 /** An ABSOLUTE `http(s)` URL on the current page's origin. Relative hrefs return
  *  false (in embed mode they're hub-relative, not in-app), as do cross-origin
  *  and non-http URLs. SSR-safe: no `window` → false. */
-function isSameOriginAbsoluteHref(href: string): boolean {
+export function isSameOriginAbsoluteHref(href: string): boolean {
   if (typeof window === 'undefined') return false;
   if (!/^https?:\/\//i.test(href)) return false;
   try {
-    return new URL(href).origin === window.location.origin;
+    // Origin off `location.href`, not `location.origin`: jsdom leaves the latter
+    // undefined, which reads as "every URL is foreign" under test.
+    return new URL(href).origin === new URL(window.location.href).origin;
   } catch {
     return false;
   }

package/src/components/chat/utils/resolve-fetched-card-href.ts

@@ -31,7 +31,7 @@
  * Pure — no React, no DOM. The caller owns `safeHref` validation.
  */
 
-import type { ComposeContentUrl } from '../../../utils/content-href';
+import type { ComposeContentUrl, ComposedContentUrl } from '../../../utils/content-href';
 import { canonicalContentRefType } from '../../../utils/list-url';
 
 export interface FetchedCardHrefInput {
@@ -90,12 +90,60 @@ function readPlatforms(item: unknown, canonicalType: string): Array<{ name?: str
  * when the host wired no seam (the caller then keeps the card unlinked, which
  * is the pre-existing behavior).
  */
+/**
+ * Where a fetch-mode card's destination came from. The loader needs the source,
+ * not just the string: only the `item` branch must leave the ref's own
+ * `targetPlatform` untouched.
+ */
+export type FetchedCardHrefChoice =
+  | { source: 'hostOverride'; href: string; targetPlatform: string | null }
+  | { source: 'item'; href: string; targetPlatform?: undefined }
+  | { source: 'composed'; href: string; targetPlatform: string | null };
+
+/**
+ * Decide a fetched card's destination between the two producers that can claim
+ * it. Pure, so the precedence is testable on its own — it used to live as
+ * inline ternaries in `ChatCardLoader`.
+ *
+ *   1. an EXPLICIT host override — the host said where this type lives in its
+ *      own app, which beats everything;
+ *   2. the fetched row's own url (`registry.fallbackHref`) — minted by the
+ *      content host for ITS surface, authoritative in the absence of (1);
+ *   3. the composer's synthesized href, unless the registry opted out
+ *      (`noComposedHref`) because the synthesis would be a 404.
+ *
+ * (2) beating (3) is why `noComposedHref` exists; (1) beating (2) is what keeps
+ * a re-homed type (an embedder serving hub tickets under `/help-center/tickets`)
+ * from following the content host's path into an unrelated route of its own.
+ */
+export function pickFetchedCardHref({
+  composed,
+  itemHref,
+  allowComposed,
+}: {
+  /** Result of {@link resolveFetchedCardHref}, or null when unresolvable. */
+  composed: ComposedContentUrl | null;
+  /** `registry.fallbackHref(item)` — the fetched row's own destination. */
+  itemHref: string | null;
+  /** False for registry entries flagged `noComposedHref`. */
+  allowComposed: boolean;
+}): FetchedCardHrefChoice | null {
+  if (composed?.hostOverride) {
+    return { source: 'hostOverride', href: composed.href, targetPlatform: composed.targetPlatform };
+  }
+  if (itemHref) return { source: 'item', href: itemHref };
+  if (composed && allowComposed) {
+    return { source: 'composed', href: composed.href, targetPlatform: composed.targetPlatform };
+  }
+  return null;
+}
+
 export function resolveFetchedCardHref({
   contentRefType,
   id,
   item,
   composeContentUrl,
-}: FetchedCardHrefInput): { href: string; targetPlatform: string | null } | null {
+}: FetchedCardHrefInput): ComposedContentUrl | null {
   if (!composeContentUrl || !contentRefType || !id) return null;
   const canonicalType = canonicalContentRefType(contentRefType);
   return composeContentUrl({

package/src/components/features/board/.board.md

@@ -15,6 +15,7 @@ Kanban-style drag-and-drop board built on Pragmatic drag and drop, managing mult
 - **Nothing moves during a drag** — The dragged card stays put and fades; the landing place is a line. No margins open, no slots close, so the lane's height cannot wander and an edge flip costs one span instead of a relayout plus a card render
 - **One aim, one preview** — Where the drop points is resolved once, in the board's monitor, and handed down (`drop-aim.ts`). Each card used to work it out from its own hover events, which only ever answers for a card the pointer is physically over — so the preview vanished the moment the pointer left the lanes, even though the drop would still have landed. The board's answer is compared before it is stored, so a pointer moving inside one card does not re-render anything
 - **Cross-column guards** — `dropDisabled` and `allowedFromColumns` are enforced by each target's `canDrop`, so an invalid drop is never accepted and nothing has to be reverted
+- **No DnD on touch** — `useDragAndDropEnabled()` gates the whole board: on touch/narrow viewports (`(pointer: fine) and (hover: hover) and (min-width: 800px)` fails) every column is forced `dragDisabled`/`dropDisabled`, so nothing registers a draggable or a target — the HTML5 drag events Pragmatic builds on never fire under touch anyway. Card moves there go through the ticket itself, not the board
 - **Optimistic view** — The board renders `applyPendingMove(columns, pendingMove)` from the drop until the host's answer arrives (`pending-move.ts`), so the move is on screen instantly and the host's data replaces an identical picture. "Landed" is judged per kind of move: across lanes, arriving in the new lane once the old one has let go (a server may re-sort the lane, so the exact index would never come); within one lane, the exact slot. Weaker tests (a fresh `columns` array, the card leaving its old index) fire on a lane's own poll and snap the card back mid-flight. A 2s timeout is the backstop for a host that never applies the change
 - **Dragged card** — The card under the pointer is the browser's own native drag image (a styled DOM clone via `setCustomNativeDragPreview`), so the browser moves it — over its own chrome included — and carrying a card re-renders nothing and cannot freeze at the viewport edge. On drop, a portal copy takes over for one 160ms FLIP glide from the release point into the slot the move just opened, then hands over to the real card (hidden under it via `LandingCardContext` for exactly that long)
 - **Keyboard move** — Space on a focused card lifts it; the arrows walk it (up/down through slots, left/right through lanes, skipping any that will not take it); space or enter drops it; escape puts it back. Lift-and-place rather than one-press-one-move, because on a board every press would otherwise be its own write to the server. The lifted card feeds the same aim a pointer drag does, and the drop line is scrolled into view on every step — arrow keys bring no auto-scroll of their own. Keys are handled on the board, not the card: once a card is lifted they belong to the move rather than to whatever holds focus. Rules live in `aim.ts`, pure and unit-tested

package/src/components/features/board/board.tsx

@@ -5,6 +5,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/ad
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/utils/prevent-unhandled';
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
+import { useDragAndDropEnabled } from '../../../hooks/ui/use-drag-and-drop-enabled';
 import { useHorizontalScrollbar } from '../../../hooks/ui/use-horizontal-scrollbar';
 import { useIsomorphicLayoutEffect } from '../../../hooks/ui/use-isomorphic-layout-effect';
 import { autoScrollBothWays } from '../../../utils/auto-scroll-ancestors';
@@ -169,7 +170,16 @@ export function Board({
   // Publishing it from an effect instead committed one whole frame with the card
   // still held in its pending position after the host had already caught up.
   const pendingMove = reportedMove && !hasMoveSettled(columns, reportedMove) ? reportedMove : null;
-  const view = useMemo(() => (pendingMove ? applyPendingMove(columns, pendingMove) : columns), [columns, pendingMove]);
+  // On touch/narrow viewports no card is draggable and no lane is a drop
+  // target: the HTML5 drag events Pragmatic builds on never fire under touch,
+  // so instead of shipping a drag that half-works, none is initialized at all.
+  // Card moves there go through the ticket itself (its dialog), not the board.
+  const dragAndDropEnabled = useDragAndDropEnabled();
+  const view = useMemo(() => {
+    const base = pendingMove ? applyPendingMove(columns, pendingMove) : columns;
+    if (dragAndDropEnabled) return base;
+    return base.map(column => ({ ...column, dragDisabled: true, dropDisabled: true }));
+  }, [columns, pendingMove, dragAndDropEnabled]);
   // EVERYTHING downstream reads `view`, never `columns`: it is what is on
   // screen, so it is also what a drag, a keyboard move and a drop are about.
   // `columns` is only ever consulted to ask whether the host has caught up.

package/src/components/features/sortable-list/.sortable-list.md

@@ -1,13 +1,14 @@
 <!-- source-hash: manual -->
 A vertical list whose items are reordered by dragging a handle, built on Pragmatic drag and drop.
+**The one sortable-list implementation in the stack** — every ordered list (schedule scripts,
+ticket statuses, AI quick actions via `TicketStatusConfigList`) runs on it; `@dnd-kit` is gone.
 
-> **Currently unused.** It was written for the ordered lists — schedule scripts, ticket statuses,
-> AI quick actions — and those have since gone back to `@dnd-kit` (`TicketStatusConfigList`), whose
-> pointer sensors work under touch where the HTML5 drag-and-drop API this is built on does not.
-> Kept, not deleted: it is a complete and general implementation, and the ticket board next door
-> still runs on the same library. Reach for `TicketStatusConfigList` for a new ordered list; reach
-> for this one only if you specifically need what it does differently — slot geometry with
-> hysteresis, a FLIP drop animation, and auto-scroll through every scrollable ancestor.
+The HTML5 drag-and-drop API this is built on does not fire under touch — which is why those lists
+once went back to `@dnd-kit`. The answer now is not a second library: on touch/narrow viewports
+(`useDragAndDropEnabled()` is `false`) **no drag is initialized at all**, and each row renders an
+explicit up/down `SortableMoveButtons` pair instead of its handle. Explicit buttons because on
+touch nothing else survives contact with the page: a drag fights scrolling, long-press fights the
+context menu.
 
 Deliberately **not** the ticket board, which moves cards between columns and needs a different
 model.
@@ -17,21 +18,26 @@ model.
 | Export | Description |
 |---|---|
 | `SortableList` | The container. Owns the geometry, the drag monitor and the live region |
-| `useSortableItem` | Registers one item: gives back `itemRef`, `dragHandleProps` and `isDragging` |
+| `useSortableItem` | Registers one item: gives back `itemRef`, `dragHandleProps`, `isDragging` and `dragAndDropEnabled` |
+| `SortableMoveButtons` | The touch fallback: a joined up/down pair, disabled at the ends, announcing through the list's live region |
 | `SLOT_STICKINESS` | The dead band around a slot boundary, as a share of one slot's travel |
 
 ## Usage
 
 ```tsx
 <SortableList onReorder={move} getItemLabel={i => rows[i].name} className="flex flex-col gap-6">
-  {rows.map(row => <Row key={row.id} row={row} />)}
+  {rows.map((row, i) => <Row key={row.id} row={row} index={i} count={rows.length} />)}
 </SortableList>
 
-function Row({ row }) {
-  const { itemRef, dragHandleProps, isDragging } = useSortableItem()
+function Row({ row, index, count }) {
+  const { itemRef, dragHandleProps, isDragging, dragAndDropEnabled } = useSortableItem()
   return (
     <div ref={itemRef} className={isDragging ? 'border-ods-accent shadow-lg' : 'border-ods-border'}>
-      <button type="button" {...dragHandleProps} aria-label="Reorder…"><DraggerIcon /></button>
+      {dragAndDropEnabled ? (
+        <button type="button" {...dragHandleProps} aria-label="Reorder…"><DraggerIcon /></button>
+      ) : (
+        <SortableMoveButtons index={index} count={count} label={row.name} />
+      )}
       …
     </div>
   )
@@ -76,6 +82,11 @@ function Row({ row }) {
   moves the list and the pointer together and nothing goes stale.
 - **Keyboard.** Pragmatic drag and drop ships none, so `dragHandleProps` carries Arrow Up / Arrow
   Down — one press, one move. The list announces every move through its own live region.
+- **Input gating.** `useDragAndDropEnabled()` — `(pointer: fine) and (hover: hover) and
+  (min-width: 800px)` — decides whether any drag exists. `false` (touch, narrow windows, and SSR /
+  first render) skips every Pragmatic registration; `SortableMoveButtons` go through the same
+  `reorder` as a drop, so the announcement and the `onReorder` contract are identical on every
+  input. The consumer `disabled` prop still switches everything off, buttons included.
 
 ## Source
 

package/src/components/features/sortable-list/index.ts

@@ -1,3 +1,4 @@
 export { SLOT_STICKINESS } from './slot-geometry';
 export { SortableList, type SortableListProps } from './sortable-list';
-export { type SortableItem, useSortableItem } from './use-sortable-item';
+export { SortableMoveButtons, type SortableMoveButtonsProps } from './sortable-move-buttons';
+export { type SortableDragHandleProps, type SortableItem, useSortableItem } from './use-sortable-item';

package/src/components/features/sortable-list/sortable-list.tsx

@@ -14,6 +14,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useDragAndDropEnabled } from '../../../hooks/ui/use-drag-and-drop-enabled';
 import { useIsomorphicLayoutEffect } from '../../../hooks/ui/use-isomorphic-layout-effect';
 import { autoScrollAncestors, autoScrollBothWays } from '../../../utils/auto-scroll-ancestors';
 import { type DragSlots, measureSlots, resolveSlot, shiftFor } from './slot-geometry';
@@ -30,8 +31,15 @@ const EASING = 'cubic-bezier(0.2, 0, 0, 1)';
 interface SortableListContextValue {
   /** Distinguishes this list's drags from any other list's on the page. */
   dragType: string;
+  /** The consumer's `disabled` prop: everything off, move buttons included. */
   disabled: boolean;
-  /** Reorders the list. Used by the drop AND by a handle's arrow keys. */
+  /**
+   * The input-type gate (`useDragAndDropEnabled`): `false` on touch/narrow
+   * viewports, where no drag is registered and rows render explicit
+   * `SortableMoveButtons` instead of a handle.
+   */
+  dragAndDropEnabled: boolean;
+  /** Reorders the list. Used by the drop, a handle's arrow keys AND the move buttons. */
   reorder: (from: number, to: number) => void;
   /** Every registered item, in DOM order. */
   readItems: () => HTMLElement[];
@@ -82,6 +90,9 @@ export interface SortableListProps {
  */
 export function SortableList({ onReorder, getItemLabel, disabled = false, className, children }: SortableListProps) {
   const listRef = useRef<HTMLDivElement>(null);
+  // False on touch/narrow viewports: no drag is initialized anywhere in the
+  // list, and rows fall back to explicit move buttons.
+  const dragAndDropEnabled = useDragAndDropEnabled();
   // Stable across renders and never rendered, so there is no hydration to
   // mismatch — unlike keying a drag on a random per-item id.
   const dragType = useId();
@@ -126,7 +137,7 @@ export function SortableList({ onReorder, getItemLabel, disabled = false, classN
 
   useEffect(() => {
     const list = listRef.current;
-    if (!list) return undefined;
+    if (!list || disabled || !dragAndDropEnabled) return undefined;
 
     /** Alive for one drag; this effect body is its whole scope. */
     let drag: (DragSlots & { items: HTMLElement[]; to: number; startY: number }) | null = null;
@@ -218,7 +229,7 @@ export function SortableList({ onReorder, getItemLabel, disabled = false, classN
         },
       }),
     );
-  }, [dragType, readItems, reorder]);
+  }, [dragType, disabled, dragAndDropEnabled, readItems, reorder]);
 
   // Runs after the commit that carries BOTH the reorder and the tick above, so
   // the DOM is already in its final order — which is why `onReorder` never has
@@ -267,8 +278,8 @@ export function SortableList({ onReorder, getItemLabel, disabled = false, classN
   );
 
   const context = useMemo<SortableListContextValue>(
-    () => ({ dragType, disabled, reorder, readItems }),
-    [dragType, disabled, reorder, readItems],
+    () => ({ dragType, disabled, dragAndDropEnabled, reorder, readItems }),
+    [dragType, disabled, dragAndDropEnabled, reorder, readItems],
   );
 
   return (

package/src/components/features/sortable-list/sortable-move-buttons.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useRef } from 'react';
+import { cn } from '../../../utils/cn';
+import { Arrow01DownIcon } from '../../icons-v2-generated/arrows/arrow-01-down-icon';
+import { Arrow01UpIcon } from '../../icons-v2-generated/arrows/arrow-01-up-icon';
+import { Button } from '../../ui/button';
+import { useSortableListContext } from './sortable-list';
+
+export interface SortableMoveButtonsProps {
+  /** The row's current position — the caller renders the rows, so it knows. */
+  index: number;
+  /** How many rows the list has; the down button is disabled on the last one. */
+  count: number;
+  /** Names the row in the buttons' accessible labels, e.g. "On Hold". */
+  label?: string;
+  className?: string;
+}
+
+/**
+ * The touch replacement for a drag handle: an up/down pair rendered by a row of
+ * a {@link SortableList} when `dragAndDropEnabled` is `false` (see
+ * `useSortableItem`). Explicit buttons because on touch nothing else survives
+ * contact with the page: a drag fights scrolling, long-press fights the context
+ * menu, and the HTML5 drag events behind Pragmatic never fire at all.
+ *
+ * Moves go through the list's `reorder`, so they hit the same `onReorder`
+ * callback and the same live region as a drop or a handle's arrow keys.
+ *
+ * One joined pair per the design: outer corners rounded, a single hairline
+ * between the halves, each half disabled at its end of the list.
+ */
+export function SortableMoveButtons({ index, count, label, className }: SortableMoveButtonsProps) {
+  const { disabled, reorder } = useSortableListContext();
+  const upRef = useRef<HTMLButtonElement>(null);
+  const downRef = useRef<HTMLButtonElement>(null);
+
+  const move = (step: -1 | 1) => {
+    const to = index + step;
+    if (to < 0 || to >= count) return;
+    reorder(index, to);
+    // The row this pair sits in keeps its DOM nodes, but the pressed half may
+    // come back disabled (the row reached an end) — hand focus to the other
+    // half so a keyboard user is not dropped to the page body.
+    requestAnimationFrame(() => {
+      if (step === -1 && to === 0) downRef.current?.focus();
+      if (step === 1 && to === count - 1) upRef.current?.focus();
+    });
+  };
+
+  const subject = label ?? 'item';
+
+  return (
+    <div className={cn('inline-flex shrink-0', className)}>
+      <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"
+      >
+        <Arrow01UpIcon />
+      </Button>
+      <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"
+      >
+        <Arrow01DownIcon />
+      </Button>
+    </div>
+  );
+}

package/src/components/features/sortable-list/use-sortable-item.ts

@@ -15,14 +15,23 @@ export interface SortableItem {
    * clicking inside the item keep working, and it carries the keyboard
    * alternative — so spread it rather than picking it apart.
    */
-  dragHandleProps: {
-    // Callback refs, not `Ref<HTMLElement>`: a ref OBJECT of the wider type
-    // cannot be attached to a `<button>` or a `<div>`, a callback taking the
-    // wider type can.
-    ref: (node: HTMLElement | null) => void;
-    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
-  };
+  dragHandleProps: SortableDragHandleProps;
   isDragging: boolean;
+  /**
+   * The input-type gate: `false` on touch/narrow viewports (and during SSR).
+   * When `false` the item registers no drag at all — render explicit move
+   * controls (`SortableMoveButtons`) instead of the drag handle.
+   */
+  dragAndDropEnabled: boolean;
+}
+
+/** What `dragHandleProps` carries — spread it onto the grip, don't pick it apart. */
+export interface SortableDragHandleProps {
+  // Callback refs, not `Ref<HTMLElement>`: a ref OBJECT of the wider type
+  // cannot be attached to a `<button>` or a `<div>`, a callback taking the
+  // wider type can.
+  ref: (node: HTMLElement | null) => void;
+  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
 }
 
 /**
@@ -38,7 +47,10 @@ export interface SortableItem {
  * screen-reader users, who hear the result from the list's live region.
  */
 export function useSortableItem(): SortableItem {
-  const { dragType, disabled, reorder, readItems } = useSortableListContext();
+  const { dragType, disabled, dragAndDropEnabled, reorder, readItems } = useSortableListContext();
+  // Both stop the drag registration and the keyboard path; only the consumer's
+  // `disabled` also stops the move buttons, which are the touch replacement.
+  const inert = disabled || !dragAndDropEnabled;
   // State rather than refs: registration has to wait until the consumer has
   // actually rendered its grip, and only a re-render tells us it did.
   const [item, setItem] = useState<HTMLElement | null>(null);
@@ -54,7 +66,7 @@ export function useSortableItem(): SortableItem {
   }, []);
 
   useEffect(() => {
-    if (!item || !handle || disabled) return undefined;
+    if (!item || !handle || inert) return undefined;
     return combine(
       // The drag has to start as a "move", or its first frame is drawn with the
       // copy cursor — see `drag-effect.ts`.
@@ -69,12 +81,12 @@ export function useSortableItem(): SortableItem {
         onDrop: () => setIsDragging(false),
       }),
     );
-  }, [item, handle, disabled, dragType]);
+  }, [item, handle, inert, dragType]);
 
   const onKeyDown = useCallback(
     (event: KeyboardEvent<HTMLElement>) => {
       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}]`) as HTMLElement);
       const to = from + step;
@@ -85,8 +97,8 @@ export function useSortableItem(): SortableItem {
       // run of presses keeps moving the same item.
       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 };
 }

package/src/components/features/ticket-status-config-list/ticket-status-config-list.tsx

@@ -1,94 +1,87 @@
 'use client';
 
-import {
-  DndContext,
-  type DragEndEvent,
-  type DraggableAttributes,
-  type DraggableSyntheticListeners,
-  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 { type CSSProperties, type ReactNode, useMemo } from 'react';
+import type { ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
+import { SortableList } from '../sortable-list/sortable-list';
+import { SortableMoveButtons } from '../sortable-list/sortable-move-buttons';
+import { type SortableDragHandleProps, useSortableItem } from '../sortable-list/use-sortable-item';
 
 export interface SortableRowRenderArgs {
-  dragHandleProps: DraggableSyntheticListeners;
-  dragHandleAttributes: DraggableAttributes;
+  /** Spread onto the grip whole — it carries the ref and the keyboard path. */
+  dragHandleProps: SortableDragHandleProps;
   isDragging: boolean;
+  /**
+   * The touch replacement for the grip: an up/down `SortableMoveButtons` pair,
+   * non-null exactly when drag is unavailable (touch/narrow viewports). Render
+   * it where the row's reorder control belongs — and no grip beside it.
+   */
+  moveButtons: ReactNode | null;
 }
 
 export interface TicketStatusConfigListProps<T extends { id: string }> {
   items: T[];
   onReorder: (oldIndex: number, newIndex: number) => void;
   renderRow: (item: T, args: SortableRowRenderArgs) => ReactNode;
+  /** Names a row for the live region and the move buttons, e.g. its status name. */
+  getItemLabel?: (index: number) => string | undefined;
   className?: string;
 }
 
+/**
+ * A reorderable list of config rows (ticket statuses, AI quick actions), built
+ * on {@link SortableList} — Pragmatic drag and drop on desktop, an explicit
+ * up/down pair on touch, where the HTML5 drag events never fire.
+ *
+ * `id` keys React rows only; the reorder itself is DOM-order based, so
+ * duplicates in `items` cannot collide.
+ */
 export function TicketStatusConfigList<T extends { id: string }>({
   items,
   onReorder,
   renderRow,
+  getItemLabel,
   className,
 }: TicketStatusConfigListProps<T>) {
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-  );
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    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 = useMemo(() => items.map(i => i.id), [items]);
-
   return (
-    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-      <SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
-        <div className={cn('flex w-full flex-col gap-[var(--spacing-system-xs)]', className)}>
-          {items.map(item => (
-            <SortableRow key={item.id} id={item.id}>
-              {args => renderRow(item, args)}
-            </SortableRow>
-          ))}
-        </div>
-      </SortableContext>
-    </DndContext>
+    <SortableList
+      onReorder={onReorder}
+      getItemLabel={getItemLabel}
+      className={cn('flex w-full flex-col gap-[var(--spacing-system-xs)]', className)}
+    >
+      {items.map((item, index) => (
+        <SortableRow key={item.id} index={index} count={items.length} label={getItemLabel?.(index)}>
+          {args => renderRow(item, args)}
+        </SortableRow>
+      ))}
+    </SortableList>
   );
 }
 
-function SortableRow({ id, children }: { id: string; children: (args: SortableRowRenderArgs) => ReactNode }) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
-
-  const style: CSSProperties = {
-    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 : undefined,
-  };
+function SortableRow({
+  index,
+  count,
+  label,
+  children,
+}: {
+  index: number;
+  count: number;
+  label?: string;
+  children: (args: SortableRowRenderArgs) => ReactNode;
+}) {
+  const { itemRef, dragHandleProps, isDragging, dragAndDropEnabled } = useSortableItem();
 
   return (
-    <div ref={setNodeRef} style={style}>
+    <div
+      ref={itemRef}
+      // 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.
+      className={isDragging ? 'relative z-10' : undefined}
+    >
       {children({
-        dragHandleProps: listeners,
-        dragHandleAttributes: attributes,
+        dragHandleProps,
         isDragging,
+        moveButtons: dragAndDropEnabled ? null : <SortableMoveButtons index={index} count={count} label={label} />,
       })}
     </div>
   );