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

package/src/components/features/board/drop-aim.ts

@@ -0,0 +1,50 @@
+'use client'
+
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge'
+import { createContext, useContext } from 'react'
+import type { BoardTicket } from './types'
+
+/**
+ * Where the drop currently points, resolved once for the whole board.
+ *
+ * Each card used to work this out for itself, from its own hover events. That
+ * only ever answers for a card the pointer is physically over, so the moment the
+ * pointer left the lanes — over the filters, between two columns, below the last
+ * card — the preview vanished even though the drop would still have landed
+ * somewhere. Resolving it in one place and handing it down means the preview
+ * follows the answer wherever the answer came from.
+ */
+export interface DropAim {
+  columnId: string
+  /** The card the preview hangs off, or `null` for a lane with nothing in it. */
+  ticketId: string | null
+  /** Which side of that card. Meaningless when `ticketId` is `null`. */
+  edge: Edge | null
+  /** The card being carried, drawn faded in the room it opened. */
+  ticket: BoardTicket
+}
+
+export const DropAimContext = createContext<DropAim | null>(null)
+
+/**
+ * Picking a card up from the keyboard. Separate from the aim so a card can offer
+ * it without subscribing to something that changes on every pointer move.
+ */
+export const BoardLiftContext = createContext<((ticketId: string) => void) | null>(null)
+
+export function useBoardLift(): ((ticketId: string) => void) | null {
+  return useContext(BoardLiftContext)
+}
+
+/** Null while no drag is pointing anywhere the board would accept. */
+export function useDropAim(): DropAim | null {
+  return useContext(DropAimContext)
+}
+
+/** Whether two aims would draw the same thing — used to keep a pointer moving
+ *  inside one card from re-rendering the board on every frame. */
+export function isSameAim(a: DropAim | null, b: DropAim | null): boolean {
+  if (a === b) return true
+  if (!a || !b) return false
+  return a.columnId === b.columnId && a.ticketId === b.ticketId && a.edge === b.edge
+}

package/src/components/features/board/lane-geometry.ts

@@ -0,0 +1,44 @@
+import { TICKET_ID_ATTRIBUTE } from './use-lane-scroll-anchor'
+
+/** Marks the line showing where a drop would land, wherever it is drawn — on a
+ *  card or in an empty lane. The keyboard needs to find it to scroll it into
+ *  view; a pointer drag brings its own scrolling. */
+export const DROP_LINE_ATTRIBUTE = 'data-board-drop-line'
+
+/**
+ * The card in `lane` whose middle is nearest `pointerY`, ignoring the one being
+ * dragged, or `null` if the lane holds no other card.
+ *
+ * Live rects rather than anything cached: cards carry margins mid-drag that push
+ * them about. The dragged card is skipped by name and not by having no box —
+ * it keeps its slot in the lane until another card takes over holding the room,
+ * so it is a full-height rectangle sitting right where the pointer is.
+ */
+export function nearestCardIn(lane: ParentNode, pointerY: number, draggedTicketId: string): HTMLElement | null {
+  let best: HTMLElement | null = null
+  let bestDistance = Number.POSITIVE_INFINITY
+  for (const card of lane.querySelectorAll<HTMLElement>(`[${TICKET_ID_ATTRIBUTE}]`)) {
+    if (card.dataset.ticketId === draggedTicketId) continue
+    const rect = card.getBoundingClientRect()
+    if (rect.height === 0) continue
+    const distance = Math.abs(pointerY - (rect.top + rect.height / 2))
+    if (distance < bestDistance) {
+      bestDistance = distance
+      best = card
+    }
+  }
+  return best
+}
+
+/**
+ * One card by ticket id, anywhere under `root`.
+ *
+ * A loop rather than an attribute selector: ticket ids are opaque global ids
+ * from the host and go straight into a selector string otherwise.
+ */
+export function cardById(root: ParentNode, ticketId: string): HTMLElement | null {
+  for (const card of root.querySelectorAll<HTMLElement>(`[${TICKET_ID_ATTRIBUTE}]`)) {
+    if (card.dataset.ticketId === ticketId) return card
+  }
+  return null
+}

package/src/components/features/board/pending-move.ts

@@ -0,0 +1,116 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+import type { BoardColumnDef } from './types'
+
+/** The move that was reported, so we can show it and recognise it arriving. */
+export interface PendingMove {
+  ticketId: string
+  /** The lane it came from — what tells a lane change apart from a reorder. */
+  fromColumnId: string
+  toColumnId: string
+  /** The card it was dropped after, or `null` for the head of the lane. */
+  afterTicketId: string | null
+}
+
+/**
+ * `columns` with a move that has been reported but not yet answered already
+ * applied — what the board renders between the drop and the host's new data.
+ *
+ * A drop cannot repaint the board from the host's data in the same frame it
+ * happens: the host is told about the move through `onChange` and answers with
+ * new `columns`, and no data layer worth using is synchronous about that —
+ * react-query, for one, notifies its subscribers from a `setTimeout(0)`, which
+ * is a whole macrotask (and therefore at least one paint) after the drop event.
+ * Rendering the host's answer literally therefore means the card is still in its
+ * old lane for that gap and arrives in the new one afterwards.
+ *
+ * Hiding the card across the gap was the previous answer, and it is why a drop
+ * read as the ticket vanishing and reappearing somewhere else. Showing the move
+ * immediately is the same optimistic update every board of this kind does, and
+ * it makes the handover invisible: the host's answer, when it comes, describes
+ * exactly the picture already on screen.
+ *
+ * Untouched columns keep their identity so the memoized lanes can skip the
+ * render.
+ */
+export function applyPendingMove(columns: BoardColumnDef[], move: PendingMove): BoardColumnDef[] {
+  const ticket = columns.flatMap(column => column.tickets).find(t => t.id === move.ticketId)
+  if (!ticket || !columns.some(column => column.id === move.toColumnId)) return columns
+
+  return columns.map(column => {
+    const without = column.tickets.filter(t => t.id !== move.ticketId)
+    if (column.id !== move.toColumnId) {
+      return without.length === column.tickets.length ? column : { ...column, tickets: without }
+    }
+    return { ...column, tickets: insertAfter(without, ticket, move.afterTicketId) }
+  })
+}
+
+function insertAfter<T extends { id: string }>(tickets: T[], ticket: T, afterId: string | null): T[] {
+  if (afterId === null) return [ticket, ...tickets]
+  const after = tickets.findIndex(t => t.id === afterId)
+  // The card it was dropped after is gone — archived, or moved by someone else
+  // while this drag was in the air. The end of the lane is the honest answer,
+  // and the host's own reply overrides it a moment later anyway.
+  const at = after < 0 ? tickets.length : after + 1
+  return [...tickets.slice(0, at), ticket, ...tickets.slice(at)]
+}
+
+/**
+ * The id of the card currently flying from the pointer into the slot it was
+ * dropped in — hidden for exactly that long, because the drag preview is
+ * covering it.
+ *
+ * Only the one card cares, which is why this is an id and not a flag on every
+ * card.
+ */
+export const LandingCardContext = createContext<string | null>(null)
+
+/** True while this card is under the preview travelling into its slot. */
+export function useIsLanding(ticketId: string): boolean {
+  return useContext(LandingCardContext) === ticketId
+}
+
+/**
+ * Whether THIS move has reached `columns`, so the board can stop standing in for
+ * the host and render its data plainly again.
+ *
+ * Two weaker tests were tried and both hand back too early, at which point the
+ * board snaps to whatever the host currently says — the card jumping back to its
+ * old lane for a frame:
+ *
+ * - The identity of the `columns` array. A host on react-query hands the board a
+ *   fresh one whenever anything notifies — a cancelled refetch, a loading flag,
+ *   a live update on an untouched lane.
+ * - The card no longer sitting at its old index. Each lane here polls on its own
+ *   timer and takes live updates, so a ticket arriving above this one shifts the
+ *   index and reads as "the move landed" when nothing of the sort happened.
+ *
+ * A lane change and a reorder need different tests, though, and using the strict
+ * one for both is what left a card to jump seconds after it landed:
+ *
+ * - **Across lanes**, arriving in the new lane IS the host applying the move.
+ *   Which slot it ends up in is then the host's business — a server that sorts a
+ *   lane its own way will not reproduce the dropped index, and holding out for
+ *   one it will never send means showing a position that is quietly wrong until
+ *   the timeout corrects it in a visible jump. The old lane has to have let go
+ *   of the card as well: the two lanes are separate queries answering at their
+ *   own pace, and standing aside in between would show the card in both.
+ * - **Within one lane** the card is in that lane either way, so only the exact
+ *   slot distinguishes "applied" from "not yet".
+ *
+ * Answering "not yet" for a move the host never applies is safe: the board gives
+ * up on it after a timeout regardless, and the card returns to where the host
+ * says it is — which is the correct thing to show once a move has failed.
+ */
+export function hasMoveSettled(columns: readonly BoardColumnDef[], move: PendingMove): boolean {
+  const tickets = columns.find(c => c.id === move.toColumnId)?.tickets
+  if (!tickets) return false
+  const index = tickets.findIndex(t => t.id === move.ticketId)
+  if (index < 0) return false
+  if (move.fromColumnId === move.toColumnId) {
+    return (tickets[index - 1]?.id ?? null) === move.afterTicketId
+  }
+  return !columns.find(c => c.id === move.fromColumnId)?.tickets.some(t => t.id === move.ticketId)
+}

package/src/components/features/board/resolve-drop.ts

@@ -0,0 +1,28 @@
+import { aimFromTarget, aimToChange } from './aim'
+import type { BoardChange, BoardColumnDef } from './types'
+
+/** What a drop carries: the card that moved, and what it was dropped onto. */
+interface DropInput {
+  /** `getInitialData` from the dragged card. */
+  source: Record<string | symbol, unknown>
+  /** The innermost drop target under the pointer — a card, or a lane. */
+  target: Record<string | symbol, unknown> | undefined
+}
+
+/**
+ * Turns a drop into the move to report, or `null` when nothing moved.
+ *
+ * Both steps live in `aim.ts`, shared with the keyboard and with the line drawn
+ * during the drag: the target becomes a slot, the slot becomes a change. Having
+ * the drop work it out separately is how a board ends up drawing a line in one
+ * place and committing a move to another.
+ */
+export function resolveBoardDrop(
+  columns: readonly BoardColumnDef[],
+  { source, target }: DropInput,
+): BoardChange | null {
+  if (!target) return null
+  const ticketId = String(source.ticketId)
+  const aim = aimFromTarget(columns, ticketId, target)
+  return aim && aimToChange(columns, ticketId, aim)
+}

package/src/components/features/board/ticket-card.tsx

@@ -1,18 +1,43 @@
 'use client'
 
-import { useSortable } from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source'
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview'
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge'
 import Link from '../../../embed-shims/next-link'
-import * as React from 'react'
-import { ClockIcon, DotsLoaderIcon, LaptopIcon, Flag02Icon, MessagesIcon, UserCheckIcon } from '../../icons-v2-generated'
+import {
+  memo,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react'
+import {
+  ClockIcon,
+  DotsLoaderIcon,
+  LaptopIcon,
+  Flag02Icon,
+  MessagesIcon,
+  UserCheckIcon,
+} from '../../icons-v2-generated'
 import { DeletedUserAvatar } from '../../ui/deleted-user-avatar'
 import { SquareAvatar } from '../../ui/square-avatar'
 import { Tag } from '../../ui/tag'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip'
 import { cn } from '../../../utils/cn'
+import { holdMoveDragEffect } from '../../../utils/drag-effect'
 import { getReadableTextColor } from '../../../utils/ods-color-utils'
 import { formatTicketRelativeTime, formatTicketFullTimestamp } from '../../../utils/date-utils'
 import { BoardTicketApproval } from './board-ticket-approval'
+import { useBoardLift, useDropAim } from './drop-aim'
+import { useIsLanding } from './pending-move'
+import { DROP_LINE_ATTRIBUTE } from './lane-geometry'
+import { TICKET_ID_ATTRIBUTE } from './use-lane-scroll-anchor'
 import type { BoardPriority, BoardTicket, BoardTicketActivityKind } from './types'
 
 const PRIORITY_COLOR_CLASS: Record<BoardPriority, string> = {
@@ -22,6 +47,13 @@ const PRIORITY_COLOR_CLASS: Record<BoardPriority, string> = {
   urgent: 'text-ods-error',
 }
 
+/** How faded the card is where it would land. Matches what dnd-kit left behind. */
+const DRAGGED_CARD_OPACITY = 0.4
+
+/** How solid the card under the pointer is. Jira's look: carried, not lifted off
+ *  the page entirely. */
+export const DRAG_PREVIEW_OPACITY = 0.9
+
 const MAX_VISIBLE_TAGS = 2
 const MAX_VISIBLE_ASSIGNEES = 3
 
@@ -45,7 +77,7 @@ const TICKET_CARD_SHELL =
 export interface TicketCardBodyProps {
   ticket: BoardTicket
   columnColor?: string
-  renderAssignSlot?: (ticket: BoardTicket) => React.ReactNode
+  renderAssignSlot?: (ticket: BoardTicket) => ReactNode
   /** Approval callbacks receive the request id directly (the draggable
    *  `TicketCard` adapts its own `(ticketId, requestId)` signature onto these). */
   onApprove?: (requestId?: string) => void | Promise<void>
@@ -169,20 +201,23 @@ export function TicketCardBody({ ticket, columnColor, renderAssignSlot, onApprov
 
 export interface TicketCardViewProps extends TicketCardBodyProps {
   className?: string
+  /** Merged over the shell's own — the board uses it to fade the copy it leaves
+   *  behind and to place the one that follows the pointer. */
+  style?: CSSProperties
 }
 
 /**
  * The exact board `TicketCard` visual, standalone — same shell + `TicketCardBody`
- * as the draggable card, but without the `useSortable` dnd-kit dependency, so it
- * renders anywhere from static props. Use this outside a `<Board>`.
+ * as the draggable card, but registering no drag behaviour, so it renders
+ * anywhere from static props. Use this outside a `<Board>`.
  */
-export function TicketCardView({ className, ...bodyProps }: TicketCardViewProps) {
+export function TicketCardView({ className, style, ...bodyProps }: TicketCardViewProps) {
   const { ticket, columnColor } = bodyProps
   const showNewMessage = !!ticket.hasNewMessage && !!columnColor
   return (
     <div
       className={cn(TICKET_CARD_SHELL, className)}
-      style={showNewMessage ? { borderColor: columnColor } : undefined}
+      style={showNewMessage ? { borderColor: columnColor, ...style } : style}
     >
       <div className="relative z-10 flex flex-col gap-[var(--spacing-system-sf)]">
         <TicketCardBody {...bodyProps} />
@@ -200,85 +235,256 @@ export interface TicketCardProps {
   columnId: string
   columnColor?: string
   href?: string
-  isOverlay?: boolean
   dragDisabled?: boolean
-  renderAssignSlot?: (ticket: BoardTicket) => React.ReactNode
+  /** The owning column's drop rules. A card is a drop target in its own right,
+   *  and Pragmatic does not let a lane's `canDrop` veto its children — so the
+   *  rules have to be answered here too, or a blocked lane still accepts a drop
+   *  straight onto one of its cards. */
+  dropDisabled?: boolean
+  allowedFromColumns?: string[]
+  renderAssignSlot?: (ticket: BoardTicket) => ReactNode
   onApprove?: (ticketId: string, requestId?: string) => void | Promise<void>
   onReject?: (ticketId: string, requestId?: string) => void | Promise<void>
 }
 
-export function TicketCard({
+/** Memoized: a drag moves one card, but it re-renders the column lists around
+ *  it, and a board carries dozens of cards whose props did not change. Hosts
+ *  must pass stable `renderAssignSlot` / `onApprove` / `onReject` (useCallback)
+ *  for this to bite — an inline arrow re-renders every card on every keystroke
+ *  anywhere in the page. */
+export const TicketCard = memo(function TicketCard({
   ticket,
   columnId,
   columnColor,
   href,
-  isOverlay = false,
   dragDisabled,
+  dropDisabled,
+  allowedFromColumns,
   renderAssignSlot,
   onApprove,
   onReject,
 }: TicketCardProps) {
-  const sortableData = React.useMemo(() => ({ columnId, type: 'ticket' as const }), [columnId])
-  const sortable = useSortable({ id: ticket.id, data: sortableData, disabled: dragDisabled })
+  const ref = useRef<HTMLDivElement>(null)
+  // Read at drag start rather than captured: the registration below is keyed on
+  // the ticket's id, so capturing the object would hand a renamed or re-tagged
+  // ticket to the drag — and to the preview drawn from it — as it was when the
+  // card first mounted.
+  const ticketRef = useRef(ticket)
+  ticketRef.current = ticket
+  const [isDragging, setIsDragging] = useState(false)
+  // Set by the board for the moment after a drop in which this card is already
+  // in its new slot and the drag preview is still gliding into it.
+  const isLanding = useIsLanding(ticket.id)
+
+  // Where the drop points, worked out once for the whole board — see
+  // `drop-aim.ts` for why this stopped being each card's own business.
+  const aim = useDropAim()
+  // Matched on the LANE as well as the card, and both halves are load-bearing.
+  // The board resolves one landing place, in one named lane; a ticket id is only
+  // unique within a lane here, because each lane is its own query and a ticket
+  // whose status just changed is listed by the new lane before the old one has
+  // caught up. Matching on the id alone drew the line in both lanes at once —
+  // including a lane that refuses the card altogether, since the aim it was
+  // drawing came from the other one.
+  const closestEdge = aim && aim.columnId === columnId && aim.ticketId === ticket.id ? aim.edge : null
+  // Not lane-scoped, and deliberately: `aim.columnId` is where the card is
+  // GOING, while the card being carried is still sitting in the lane it came
+  // from. True for a pointer drag and for a keyboard lift alike — the aim always
+  // names the card being moved, whichever picked it up.
+  const isSource = isDragging || aim?.ticket.id === ticket.id
+
+  const lift = useBoardLift()
+  const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {
+    // Space lifts; Enter is left to the link, which opens the ticket.
+    if (e.key !== ' ' || dragDisabled || !lift) return
+    e.preventDefault()
+    lift(ticket.id)
+  }
+
+  // Both roles live on the same element, and both keep their state HERE. That is
+  // the point of the whole drag stack: hovering this card re-renders this card,
+  // not the board — nothing subscribes upward, so cost does not grow with how
+  // many cards are mounted.
+  useEffect(() => {
+    const element = ref.current
+    if (!element || dragDisabled) return
+
+    const identity = { type: 'ticket' as const, ticketId: ticket.id, columnId }
+
+    return combine(
+      // Before anything else: the drag has to start as a "move", or its first
+      // frame is drawn with the copy cursor — see `drag-effect.ts`.
+      holdMoveDragEffect(element),
+      draggable({
+        element,
+        // Read at drag start rather than captured, so a card renamed or re-tagged
+        // since it mounted travels as it is now. No height: it was here for a
+        // lane that opened room for the card, and nothing opens room any more —
+        // it was costing a forced layout read at the start of every drag to
+        // produce a field no one read.
+        getInitialData: () => ({ ...identity, ticket: ticketRef.current }),
+        /**
+         * The card under the pointer is the browser's own drag image, styled by
+         * us. Drawing it ourselves as a positioned element was tried and has one
+         * unfixable flaw: an element in the page cannot leave the page. Carry a
+         * card up towards the address bar and the pointer crosses into the
+         * browser's own chrome, where no `dragover` reaches the document — so
+         * the card freezes at the top edge and only catches up when the drag
+         * ends. A native drag image is moved by the browser itself and floats
+         * over everything, which is why Jira's card does not stick there.
+         *
+         * A clone rather than a second React tree: this is a photograph, taken
+         * once, and a copy of the card's own DOM is a photograph of exactly what
+         * is on screen — assignee slot and all — with no providers to re-supply
+         * and no chance of it rendering a loading state into the picture.
+         */
+        onGenerateDragPreview: ({ nativeSetDragImage, location, source }) => {
+          const { width } = source.element.getBoundingClientRect()
+          setCustomNativeDragPreview({
+            nativeSetDragImage,
+            // Holds the card under the same part of itself it was grabbed by.
+            getOffset: preserveOffsetOnSource({ element: source.element, input: location.current.input }),
+            render: ({ container }) => {
+              const clone = source.element.cloneNode(true) as HTMLElement
+              // The card is a flex item stretched by its lane; on its own it
+              // would shrink to its contents.
+              clone.style.width = `${width}px`
+              clone.style.opacity = String(DRAG_PREVIEW_OPACITY)
+              clone.classList.add('shadow-card-hover')
+              container.appendChild(clone)
+            },
+          })
+        },
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      }),
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) => {
+          if (source.data.type !== 'ticket' || source.data.ticketId === ticket.id) return false
+          const from = String(source.data.columnId)
+          if (from === columnId) return true
+          if (dropDisabled) return false
+          return !allowedFromColumns || allowedFromColumns.includes(from)
+        },
+        // The edge rides along in the drop target's own data, so the board reads
+        // "above or below this card" straight off the drop it receives.
+        getData: ({ input, element: self }) =>
+          attachClosestEdge({ ...identity }, { input, element: self, allowedEdges: ['top', 'bottom'] }),
+        // Sticky, so crossing the gap between two cards — which is lane padding
+        // and belongs to no card's box — keeps answering with the card just
+        // left, rather than handing the question to the lane for those few
+        // pixels and back again. Both answer with the same slot (the lane
+        // resolves the nearest card and its edge), so this is about not
+        // re-deriving it from a different target every few pixels, NOT about
+        // reaching room a card has opened: nothing moves during a drag here.
+        getIsSticky: () => true,
+      }),
+    )
+  }, [ticket.id, columnId, dragDisabled, dropDisabled, allowedFromColumns])
 
   const showNewMessage = !!ticket.hasNewMessage && !!columnColor
 
-  const style: React.CSSProperties = isOverlay
-    ? {}
-    : {
-        transform: CSS.Transform.toString(sortable.transform),
-        transition: sortable.transition,
-      }
+  const style: CSSProperties = {}
   if (showNewMessage) style.borderColor = columnColor
 
-  const handleClick = (e: React.MouseEvent) => {
-    if (sortable.isDragging) e.preventDefault()
+  const handleClick = (e: MouseEvent) => {
+    if (isDragging) e.preventDefault()
   }
 
-  const body = (
-    <TicketCardBody
-      ticket={ticket}
-      columnColor={columnColor}
-      renderAssignSlot={renderAssignSlot}
-      onApprove={onApprove ? requestId => onApprove(ticket.id, requestId) : undefined}
-      onReject={onReject ? requestId => onReject(ticket.id, requestId) : undefined}
-    />
+  // Held as one memoized element, not re-created per render. A card being
+  // dragged over re-renders on every edge flip — it owns the hover state that
+  // draws the preview — and the body is the expensive half: avatars, tags,
+  // tooltips, a host's assignee picker with its own queries. Keeping the same
+  // element object lets React bail out of that whole subtree, so only the thin
+  // wrapper around it re-renders.
+  const body = useMemo(
+    () => (
+      <TicketCardBody
+        ticket={ticket}
+        columnColor={columnColor}
+        renderAssignSlot={renderAssignSlot}
+        onApprove={onApprove ? requestId => onApprove(ticket.id, requestId) : undefined}
+        onReject={onReject ? requestId => onReject(ticket.id, requestId) : undefined}
+      />
+    ),
+    [ticket, columnColor, renderAssignSlot, onApprove, onReject],
   )
 
-  const cardClasses = cn(
-    TICKET_CARD_SHELL,
-    !dragDisabled && 'cursor-pointer',
-    sortable.isDragging && !isOverlay && 'opacity-40',
-    isOverlay && 'rotate-1 shadow-card-hover',
-  )
+  // No transition on the margins below, and that is not a style choice: room is
+  // opened at one card and given back at another, and a transition interrupted
+  // part-way — which is every target change while the pointer keeps moving —
+  // restarts from where it got to, so the two ends run at different rates and
+  // the lane's height wanders. The rearrangement is instant instead.
+  const cardClasses = cn(TICKET_CARD_SHELL, !dragDisabled && 'cursor-pointer')
 
   const outerProps = {
-    ref: isOverlay ? undefined : sortable.setNodeRef,
+    ref,
     style,
     className: cardClasses,
-    ...(isOverlay ? {} : sortable.attributes),
-    ...(isOverlay ? {} : sortable.listeners),
+    // Read by the lane's scroll anchor to keep the list still when tickets are
+    // inserted above the viewport — see `use-lane-scroll-anchor.ts`.
+    [TICKET_ID_ATTRIBUTE]: ticket.id,
   }
 
   const innerWrapperClass = 'relative z-10 flex flex-col gap-[var(--spacing-system-sf)]'
 
-  if (isOverlay) {
-    return (
-      <div {...outerProps}>
-        <div className={innerWrapperClass}>{body}</div>
-      </div>
-    )
+  if (isSource) {
+    // Stays exactly where it is, faded. NOTHING about the lane moves during a
+    // drag — no room opens, no slot closes — so there is no layout to keep
+    // balanced and no height to wander. That is what makes the line below
+    // affordable, and it is why this is also the cheap option.
+    //
+    // Safe to do from state: React commits this AFTER the `dragstart` handler
+    // returns, and it is only removing the source synchronously inside that
+    // handler that lets a browser abort the drag.
+    style.opacity = DRAGGED_CARD_OPACITY
+  } else if (isLanding) {
+    // Already here, and the preview is on its way to this exact box. Hidden and
+    // not removed: the slot it holds is what the preview is aiming at, and it is
+    // what keeps the lane from moving again the instant it settled.
+    style.visibility = 'hidden'
   }
 
+  /**
+   * Where the card would land, drawn as a line rather than as an opened gap.
+   *
+   * Opening a card's worth of room and drawing a copy of the card in it costs a
+   * lane relayout plus a whole card render — avatars, tags, tooltips, the host's
+   * assignee slot — on every edge flip, and the flips come as fast as the
+   * pointer moves. A line is one absolutely positioned span, changes no layout,
+   * and says the same thing.
+   */
+  const insertionLine = closestEdge ? (
+    <span
+      aria-hidden
+      {...{ [DROP_LINE_ATTRIBUTE]: '' }}
+      className={cn(
+        // Nothing sticks out sideways or beyond the line's own 2px: the lane
+        // scrolls, and a scroll container clips whatever leaves its padding box
+        // — an end cap or a knob on this would be cut off against the first and
+        // last card in every lane.
+        'pointer-events-none absolute inset-x-0 z-10 h-0.5 rounded-full bg-ods-accent',
+        // Centred in the lane's own gap, so it reads as sitting between two
+        // cards rather than as belonging to one of them. The lane reserves the
+        // matching sliver at its ends (see `board-column.tsx`).
+        closestEdge === 'top' ? '-top-[5px]' : '-bottom-[5px]',
+      )}
+    />
+  ) : null
+
   if (href) {
     return (
       <div {...outerProps}>
+        {insertionLine}
         <Link
           href={href}
           draggable={false}
           prefetch={false}
           onClick={handleClick}
+          onKeyDown={handleKeyDown}
           aria-label={ticket.title}
+          aria-keyshortcuts="Space"
           className="absolute inset-0 z-0 rounded-md focus-visible:outline-none"
         />
         <div className={cn('pointer-events-none', innerWrapperClass)}>{body}</div>
@@ -288,16 +494,19 @@ export function TicketCard({
 
   return (
     <div {...outerProps}>
+      {insertionLine}
       <button
         type="button"
         onClick={handleClick}
+        onKeyDown={handleKeyDown}
         aria-label={ticket.title}
+        aria-keyshortcuts="Space"
         className="absolute inset-0 z-0 cursor-pointer rounded-md focus-visible:outline-none"
       />
       <div className={cn('pointer-events-none', innerWrapperClass)}>{body}</div>
     </div>
   )
-}
+})
 
 function TicketTagRow({ tags }: { tags: string[] }) {
   const visible = tags.slice(0, MAX_VISIBLE_TAGS)