@flamingo-stack/openframe-frontend-core 0.0.556 → 0.0.557-1828.4873.1

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

@@ -0,0 +1,92 @@
+'use client'
+
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview'
+import { type KeyboardEvent, useCallback, useEffect, useState } from 'react'
+import { holdMoveDragEffect } from '../../../utils/drag-effect'
+import { SORTABLE_ITEM_ATTRIBUTE, useSortableListContext } from './sortable-list'
+
+export interface SortableItem {
+  /** Goes on the item's root element — the thing that moves. */
+  itemRef: (node: HTMLElement | null) => void
+  /**
+   * Goes on the grip. Only the grip starts a drag, so text selection and normal
+   * 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
+  }
+  isDragging: boolean
+}
+
+/**
+ * Registers one item of a {@link SortableList}.
+ *
+ * The item's own element is the draggable, and the list finds it by the marker
+ * this hook sets — so nothing about a row's identity has to survive a round trip
+ * through the DOM, and there is no per-item id to mismatch during hydration.
+ *
+ * Pragmatic drag and drop deliberately ships no keyboard dragging, so the grip
+ * carries its own: Arrow Up / Arrow Down move the item one place. One press, one
+ * move — no lift-and-place mode to get stuck in, and it works identically for
+ * screen-reader users, who hear the result from the list's live region.
+ */
+export function useSortableItem(): SortableItem {
+  const { dragType, disabled, reorder, readItems } = useSortableListContext()
+  // 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)
+  const [handle, setHandle] = useState<HTMLElement | null>(null)
+  const [isDragging, setIsDragging] = useState(false)
+
+  const itemRef = useCallback((node: HTMLElement | null) => {
+    // Set here rather than rendered as a prop: it is this module's private
+    // bookkeeping, and a consumer forgetting to spread it would break the list
+    // silently.
+    node?.setAttribute(SORTABLE_ITEM_ATTRIBUTE, '')
+    setItem(node)
+  }, [])
+
+  useEffect(() => {
+    if (!item || !handle || disabled) return
+    return combine(
+      // The drag has to start as a "move", or its first frame is drawn with the
+      // copy cursor — see `drag-effect.ts`.
+      holdMoveDragEffect(item),
+      draggable({
+        element: item,
+        dragHandle: handle,
+        getInitialData: () => ({ type: dragType }),
+        // The list moves the real item instead — see `SortableList`.
+        onGenerateDragPreview: ({ nativeSetDragImage }) => disableNativeDragPreview({ nativeSetDragImage }),
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      }),
+    )
+  }, [item, handle, disabled, dragType])
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLElement>) => {
+      const step = event.key === 'ArrowUp' ? -1 : event.key === 'ArrowDown' ? 1 : 0
+      if (!step || disabled) return
+      const items = readItems()
+      const from = items.indexOf(event.currentTarget.closest(`[${SORTABLE_ITEM_ATTRIBUTE}]`) as HTMLElement)
+      const to = from + step
+      if (from < 0 || to < 0 || to >= items.length) return
+      event.preventDefault()
+      reorder(from, to)
+      // The grip is re-rendered at its new position; keep the focus on it so a
+      // run of presses keeps moving the same item.
+      requestAnimationFrame(() => handle?.focus())
+    },
+    [disabled, readItems, reorder, handle],
+  )
+
+  return { itemRef, dragHandleProps: { ref: setHandle, onKeyDown }, isDragging }
+}

package/src/components/ui/square-avatar.tsx

@@ -80,6 +80,11 @@ const SquareAvatar = React.memo(React.forwardRef<HTMLDivElement, SquareAvatarPro
         {resolvedSrc && (
           <Image
             className="absolute -inset-px h-[calc(100%+2px)] w-[calc(100%+2px)] max-w-none object-cover"
+            // Images are draggable by default, and a draggable child WINS over a
+            // draggable ancestor: an avatar inside a drag-and-drop card lets the
+            // browser start its own "drag this picture" instead of the card's
+            // drag, so grabbing a card by its assignee did nothing.
+            draggable={false}
             src={resolvedSrc}
             alt={alt || ''}
             width={sizePx ?? sizePxBySize[size]}

package/src/stories/.TicketCard.stories.md

@@ -12,19 +12,17 @@ Storybook stories for the `TicketCard` board component, covering drag-and-drop c
 | `WithNewMessage` | `Story` | Colored "New Message" tag and tinted card border via `columnColor` |
 | `PendingClientApproval` | `Story` | Collapsed client approval row with approve/reject handlers |
 | `PendingTechApproval` | `Story` | Yellow shield admin approval header variant |
-| `Approved` | `Story` | Green checkmark resolved state |
+| `EscalatedByUser` | `Story` | Escalation flag raised by the requester |
+| `ActivityIndicators` | `Story` | The four activity states (AI working, user typing, waiting, stale) |
 | `AsLink` | `Story` | Full-card anchor overlay via `href` |
-| `DragDisabled` | `Story` | Pinned card — no grab cursor, sortable listeners off |
-| `DragOverlay` | `Story` | Drag-overlay presentation (tilted + elevated shadow) |
+| `DragDisabled` | `Story` | Pinned card — no grab cursor, registers no drag |
 | `Priorities` | `Story` | All four priority colors (`low`, `medium`, `high`, `urgent`) side by side |
-| `Harness` | Helper | Wraps `TicketCard` in the minimal `DndContext` + `SortableContext` required by `useSortable` |
+| `Harness` | Helper | Puts `TicketCard` on the column surface it normally sits on, so its border reads correctly |
 
 ## Usage Example
 
 ```typescript
-// Render the card in a DnD harness (as stories do)
-import { DndContext } from '@dnd-kit/core'
-import { SortableContext } from '@dnd-kit/sortable'
+// The card registers its own drag and drop — no provider to wrap it in
 import { TicketCard } from '../components/features/board'
 
 const ticket = {
@@ -40,8 +38,6 @@ const ticket = {
 
 export function Example() {
   return (
-    <DndContext>
-      <SortableContext items={[ticket.id]}>
         <TicketCard
           ticket={ticket}
           columnId="TECH_REQUIRED"
@@ -49,12 +45,10 @@ export function Example() {
           onApprove={(ticketId, requestId) => console.log('approve', ticketId, requestId)}
           onReject={(ticketId, requestId) => console.log('reject', ticketId, requestId)}
         />
-      </SortableContext>
-    </DndContext>
   )
 }
 ```
 
-> **Note:** `TicketCard` internally calls `useSortable`, which requires both `DndContext` and `SortableContext` ancestors with the card's own `id` registered. In the app the Board provides these; in isolation (tests, stories) you must supply the `Harness` wrapper shown above.
+> **Note:** `TicketCard` registers its drag and drop behaviour against its own DOM node and needs no provider around it, so it renders standalone in tests and stories. Only a `<Board>` gives it somewhere to be dropped.
 
 **Source:** [`TicketCard.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/TicketCard.stories.tsx)

package/src/stories/Board.stories.tsx

@@ -232,7 +232,10 @@ export const Pagination: Story = {
   render: function Render() {
     const TOTAL = 50
     const PAGE = 10
-    const allTickets = Array.from({ length: TOTAL }, (_, i) => baseTicket(i, 'ACTIVE'))
+    // Built once: rebuilding per render hands every card a new object, which
+    // defeats the memoization the board relies on to stay smooth under a drag.
+    const allTickets = React.useMemo(() => Array.from({ length: TOTAL }, (_, i) => baseTicket(i, 'ACTIVE')), [])
+    const loadedRef = React.useRef(PAGE)
 
     const [columns, setColumns] = React.useState<BoardColumnDef[]>([
       columnFromTicketStatus('ACTIVE', allTickets.slice(0, PAGE), { total: TOTAL, hasMore: true }),
@@ -243,13 +246,19 @@ export const Pagination: Story = {
     const handleLoadMore = (columnId: string) => {
       setColumns(prev => prev.map(c => (c.id === columnId ? { ...c, isLoadingMore: true } : c)))
       setTimeout(() => {
+        // APPEND the next page. Re-slicing the seed from 0 also threw away every
+        // drop the person had made, and a drag that auto-scrolls a lane to its
+        // bottom loads a page mid-drag — so the card silently snapped back to
+        // where it started, moments after landing where it was dropped.
+        const from = loadedRef.current
+        loadedRef.current = Math.min(from + PAGE, TOTAL)
+        const page = allTickets.slice(from, loadedRef.current)
         setColumns(prev =>
-          prev.map(c => {
-            if (c.id !== columnId) return c
-            const nextTickets = allTickets.slice(0, c.tickets.length + PAGE)
-            const hasMore = nextTickets.length < TOTAL
-            return { ...c, tickets: nextTickets, hasMore, isLoadingMore: false }
-          }),
+          prev.map(c =>
+            c.id === columnId
+              ? { ...c, tickets: [...c.tickets, ...page], hasMore: loadedRef.current < TOTAL, isLoadingMore: false }
+              : c,
+          ),
         )
       }, 600)
     }

package/src/stories/TicketCard.stories.tsx

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { DndContext } from '@dnd-kit/core'
-import { SortableContext } from '@dnd-kit/sortable'
 import * as React from 'react'
 import {
   TicketCard,
@@ -11,22 +9,17 @@ import {
 import type { PendingToolCallData } from '../components/chat/types'
 
 // =============================================================================
-// Harness — `TicketCard` calls `useSortable`, which reads from a `DndContext` +
-// `SortableContext`. In the app the Board provides these; the story supplies a
-// minimal pair (with the card's own id registered) so drag bookkeeping resolves
-// without a full board. The card renders on `bg-ods-bg`, so we pad it on the
-// darker `bg-ods-card` column surface to keep the border readable.
+// Harness — the card registers its own drag behaviour against the DOM and needs
+// no provider around it, so the story is just the card on the column surface it
+// normally sits on (`bg-ods-card` behind the card's own `bg-ods-bg`, which is
+// what keeps its border readable).
 // =============================================================================
 
 function Harness(args: TicketCardProps) {
   return (
-    <DndContext>
-      <SortableContext items={[args.ticket.id]}>
-        <div className="w-[320px] rounded-lg bg-ods-card p-[var(--spacing-system-sf)]">
-          <TicketCard {...args} />
-        </div>
-      </SortableContext>
-    </DndContext>
+    <div className="w-[320px] rounded-lg bg-ods-card p-[var(--spacing-system-sf)]">
+      <TicketCard {...args} />
+    </div>
   )
 }
 
@@ -178,25 +171,21 @@ export const ActivityIndicators: Story = {
       { kind: 'stale', label: 'No activity for 2 hours' },
     ]
     return (
-      <DndContext>
-        <SortableContext items={activities.map((a) => `ticket-activity-${a.kind}`)}>
-          <div className="flex w-[320px] flex-col gap-[var(--spacing-system-sf)] rounded-lg bg-ods-card p-[var(--spacing-system-sf)]">
-            {activities.map((activity) => (
-              <TicketCard
-                key={activity.kind}
-                columnId="ACTIVE"
-                ticket={{
-                  ...BASE_TICKET,
-                  id: `ticket-activity-${activity.kind}`,
-                  priority: undefined,
-                  tags: undefined,
-                  activity,
-                }}
-              />
-            ))}
-          </div>
-        </SortableContext>
-      </DndContext>
+      <div className="flex w-[320px] flex-col gap-[var(--spacing-system-sf)] rounded-lg bg-ods-card p-[var(--spacing-system-sf)]">
+        {activities.map((activity) => (
+          <TicketCard
+            key={activity.kind}
+            columnId="ACTIVE"
+            ticket={{
+              ...BASE_TICKET,
+              id: `ticket-activity-${activity.kind}`,
+              priority: undefined,
+              tags: undefined,
+              activity,
+            }}
+          />
+        ))}
+      </div>
     )
   },
 }
@@ -242,21 +231,6 @@ export const PendingTechApproval: Story = {
   },
 }
 
-/** `approved` — green check mark in the header right section (resolved look). */
-export const Approved: Story = {
-  args: {
-    ticket: {
-      id: 'ticket-approved',
-      title: 'Slack Installation',
-      ticketNumber: '#1042',
-      status: 'RESOLVED',
-      deviceHostnames: ['PR-OFFICE-02'],
-      organizationName: 'TechFlow Solutions',
-    },
-    approved: true,
-  },
-}
-
 /** `href` set — the whole card is a link (Link anchor overlays the surface). */
 export const AsLink: Story = {
   args: {
@@ -273,39 +247,27 @@ export const DragDisabled: Story = {
   },
 }
 
-/** `isOverlay` — the drag-overlay presentation (tilted + elevated shadow). */
-export const DragOverlay: Story = {
-  args: {
-    ticket: { ...BASE_TICKET, id: 'ticket-overlay' },
-    isOverlay: true,
-  },
-}
-
 /** All four priority flag colors side by side. */
 export const Priorities: Story = {
   render: () => {
     const priorities: BoardTicket['priority'][] = ['low', 'medium', 'high', 'urgent']
     return (
-      <DndContext>
-        <SortableContext items={priorities.map((p) => `ticket-prio-${p}`)}>
-          <div className="flex w-[320px] flex-col gap-[var(--spacing-system-sf)] rounded-lg bg-ods-card p-[var(--spacing-system-sf)]">
-            {priorities.map((p) => (
-              <TicketCard
-                key={p}
-                columnId="ACTIVE"
-                ticket={{
-                  ...BASE_TICKET,
-                  id: `ticket-prio-${p}`,
-                  title: `${p![0].toUpperCase()}${p!.slice(1)} priority ticket`,
-                  priority: p,
-                  tags: undefined,
-                  assignees: undefined,
-                }}
-              />
-            ))}
-          </div>
-        </SortableContext>
-      </DndContext>
+      <div className="flex w-[320px] flex-col gap-[var(--spacing-system-sf)] rounded-lg bg-ods-card p-[var(--spacing-system-sf)]">
+        {priorities.map((p) => (
+          <TicketCard
+            key={p}
+            columnId="ACTIVE"
+            ticket={{
+              ...BASE_TICKET,
+              id: `ticket-prio-${p}`,
+              title: `${p![0].toUpperCase()}${p!.slice(1)} priority ticket`,
+              priority: p,
+              tags: undefined,
+              assignees: undefined,
+            }}
+          />
+        ))}
+      </div>
     )
   },
 }

package/src/utils/auto-scroll-ancestors.ts

@@ -0,0 +1,90 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+import {
+  autoScrollForElements,
+  autoScrollWindowForElements,
+} from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element'
+import { unsafeOverflowAutoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element'
+import { scrollableAncestorsOf } from './scroll-parent'
+
+/**
+ * How far past a scroller's edge a drag still counts as "scroll this".
+ *
+ * Big on purpose: past the edge there is nothing else to hit, so the only
+ * question is whether the intent is obvious, and dragging beyond a container is
+ * about as obvious as intent gets.
+ */
+const OVERFLOW_REACH = 5000
+
+const overflow = () => ({
+  forTopEdge: { top: OVERFLOW_REACH, left: OVERFLOW_REACH, right: OVERFLOW_REACH },
+  forBottomEdge: { bottom: OVERFLOW_REACH, left: OVERFLOW_REACH, right: OVERFLOW_REACH },
+  forLeftEdge: { left: OVERFLOW_REACH, top: OVERFLOW_REACH, bottom: OVERFLOW_REACH },
+  forRightEdge: { right: OVERFLOW_REACH, top: OVERFLOW_REACH, bottom: OVERFLOW_REACH },
+})
+
+/** Straight up and straight down only — no sideways reach at all. */
+const verticalOverflow = () => ({
+  forTopEdge: { top: OVERFLOW_REACH },
+  forBottomEdge: { bottom: OVERFLOW_REACH },
+})
+
+/**
+ * Registers drag auto-scroll for one scroller, both **inside** its edges and
+ * **past** them.
+ *
+ * Pragmatic's over-element scrolling only engages in a band just inside the
+ * edge, so a drag that has already left the container stops scrolling it — you
+ * have to hunt for the strip where it works. dnd-kit kept scrolling however far
+ * out you went, and `unsafeOverflowAutoScrollForElements` is Pragmatic's own
+ * answer for that; "unsafe" here only means it can reach a container the pointer
+ * is not over, which is exactly what is wanted.
+ */
+export function autoScrollBothWays(element: HTMLElement): () => void {
+  return combine(
+    autoScrollForElements({ element }),
+    unsafeOverflowAutoScrollForElements({ element, getOverflow: overflow }),
+  )
+}
+
+/**
+ * Auto-scroll for one of several scrollers standing side by side — a board lane.
+ *
+ * Same as {@link autoScrollBothWays} except that its reach past the edges is
+ * vertical only, and that is the whole point. Lanes sit shoulder to shoulder, so
+ * a reach that also spreads sideways puts a pointer below the board inside
+ * EVERY lane's overflow region at once and scrolls all of them together. Keeping
+ * the region to the lane's own width means the pointer is below exactly one
+ * lane, and only that lane moves — which is what a board is expected to do.
+ */
+export function autoScrollColumn(element: HTMLElement): () => void {
+  return combine(
+    autoScrollForElements({ element }),
+    unsafeOverflowAutoScrollForElements({ element, getOverflow: verticalOverflow }),
+  )
+}
+
+/**
+ * Registers auto-scroll on every scrollable ancestor of `element`, and on the
+ * window.
+ *
+ * dnd-kit walked the ancestor chain for you; Pragmatic makes each scroller opt
+ * in by name, which is why dragging towards the edge of the screen stopped
+ * scrolling anything after the migration. Registering the window alone would
+ * have fixed nothing either: the app's real scroller is the layout's `<main>`,
+ * not the document — so the chain has to be walked.
+ *
+ * Registration is passive; a scroller only moves while a drag is actually near
+ * its edge, so it is safe to call this once on mount.
+ *
+ * Register this ONCE per page region, not once per thing that can be dragged:
+ * Pragmatic keeps one entry per registration and each entry scrolls on its own,
+ * so registering the same `<main>` from five lanes scrolls it five times as
+ * fast.
+ */
+export function autoScrollAncestors(element: HTMLElement): () => void {
+  const cleanups = scrollableAncestorsOf(element).map(autoScrollBothWays)
+  // Cheap and harmless when the document itself does not scroll, and the only
+  // thing that works when it does.
+  cleanups.push(autoScrollWindowForElements())
+  return combine(...cleanups)
+}

package/src/utils/drag-effect.ts

@@ -0,0 +1,26 @@
+/**
+ * Holds a native drag started from `element` to the "move" effect, from its very
+ * first frame.
+ *
+ * The browser picks the drag cursor from `dataTransfer.dropEffect`, and the
+ * value it starts each drag with comes from `effectAllowed`. Pragmatic never
+ * writes `effectAllowed`, so it stays `uninitialized` — which the browser reads
+ * as "all", whose initial `dropEffect` is `copy`. That is the green plus cursor
+ * flashing for one frame at the start of every drag, before the first `dragover`
+ * has had a chance to say otherwise.
+ *
+ * This is a raw listener rather than a Pragmatic callback because `effectAllowed`
+ * can only be written during the `dragstart` event itself, and none of
+ * Pragmatic's callbacks are handed the event.
+ *
+ * Distinct from `preventUnhandled`, which answers the other half of the same
+ * question: this sets what the drag starts as, that keeps it from falling back
+ * to "no drop" over everything that is not a drop target.
+ */
+export function holdMoveDragEffect(element: HTMLElement): () => void {
+  const onDragStart = (event: DragEvent) => {
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+  }
+  element.addEventListener('dragstart', onDragStart)
+  return () => element.removeEventListener('dragstart', onDragStart)
+}

package/src/utils/scroll-parent.ts

@@ -0,0 +1,23 @@
+/** Anything the browser can scroll. */
+const SCROLLABLE = /(auto|scroll|overlay)/
+
+/** Every scrollable ancestor of `element`, innermost first. */
+export function scrollableAncestorsOf(element: HTMLElement): HTMLElement[] {
+  const found: HTMLElement[] = []
+  for (let node = element.parentElement; node && node !== document.body; node = node.parentElement) {
+    const style = getComputedStyle(node)
+    if (SCROLLABLE.test(style.overflowY) || SCROLLABLE.test(style.overflowX)) found.push(node)
+  }
+  return found
+}
+
+/**
+ * The nearest scrollable ancestor, or `null`.
+ *
+ * Stands in for "the working area this thing lives in": in an app whose layout
+ * scrolls a `<main>` rather than the document, that element is exactly the
+ * region a user considers to be the page.
+ */
+export function nearestScrollableAncestor(element: HTMLElement): HTMLElement | null {
+  return scrollableAncestorsOf(element)[0] ?? null
+}