@morscherlab/mint-sdk 1.1.25 → 1.2.0-beta.10

package/src/composables/useGeneratedAnalysis.ts

@@ -12,7 +12,8 @@ import type {
   JobsStatusTrayAdapter,
   PluginJobCenterSource,
 } from './useJobsStatusTray'
-import { normalizeJobState } from '../jobs'
+import { useEventStream, type EventStreamMessage } from './useEventStream'
+import { isActiveJobStatus, normalizeJobState } from '../jobs'
 import type {
   GeneratedAnalysisJob,
   GeneratedAnalysisJobInput,
@@ -110,7 +111,6 @@ export interface UsePluginJobsReturn extends PluginJobCenterSource {
 
 export type UseGeneratedAnalysisReturn = UsePluginJobsReturn
 
-const ACTIVE_STATUSES = new Set(['awaiting_input', 'queued', 'running'])
 const AUTH_TOKEN_KEY = 'mint-auth-token'
 const SESSION_NOT_FOUND_DETAIL = 'Session not found'
 const MAX_RESULT_CACHE_ENTRIES = 32
@@ -125,6 +125,10 @@ interface PluginJobWaiter {
   abort?: () => void
 }
 
+type PluginJobStreamData = GeneratedAnalysisJobInput | {
+  jobs: GeneratedAnalysisJobInput[]
+}
+
 class GeneratedAnalysisRequestError extends Error {
   constructor(
     readonly status: number,
@@ -200,10 +204,6 @@ function createPluginJobs(
   const error = shallowRef<string | null>(null)
   const status = shallowRef<'idle' | 'initializing' | 'ready' | 'paused' | 'error' | 'disposed'>('idle')
   let pollTimer: ReturnType<typeof setTimeout> | undefined
-  let streamReconnectTimer: ReturnType<typeof setTimeout> | undefined
-  let streamController: AbortController | undefined
-  let streamConnected = false
-  let streamConnecting = false
   let disposed = false
   let paused = false
   let initialized = false
@@ -217,6 +217,17 @@ function createPluginJobs(
   const resultRetryAttempts = new Map<string, number>()
   const resultRetryTimers = new Map<string, ReturnType<typeof setTimeout>>()
   const downloadRefreshTimers = new Map<string, ReturnType<typeof setTimeout>>()
+  const jobStream = useEventStream<PluginJobStreamData>(`${baseUrl}/jobs/events`, {
+    transport,
+    immediate: false,
+    reconnectDelayMs: streamReconnectDelay,
+    parseJson: true,
+    errorLabel: 'Job stream',
+    onOpen: clearPoll,
+    onMessage: applyJobStreamMessage,
+    onError: schedulePollForActiveJobs,
+    onClose: schedulePollForActiveJobs,
+  })
 
   const latestResult = computed<GeneratedAnalysisResult | null>(() => {
     const job = currentCompletedJob()
@@ -242,7 +253,7 @@ function createPluginJobs(
       if (disposed) return
       initialized = true
       status.value = paused ? 'paused' : 'ready'
-      if (streamEnabled && !paused) void connectJobStream()
+      if (streamEnabled && !paused) jobStream.start()
     })().catch((cause: unknown) => {
       if (!disposed) {
         error.value = errorMessage(cause, 'Failed to initialize generated analysis')
@@ -303,7 +314,7 @@ function createPluginJobs(
         )
       }
       const job = upsertJob(jobInput, definitionId)
-      if (!streamConnected) schedulePoll()
+      if (!jobStream.isConnected.value) schedulePoll()
       return job
     } catch (cause) {
       error.value = errorMessage(cause, 'Failed to submit analysis')
@@ -461,12 +472,12 @@ function createPluginJobs(
       .then((payload) => {
         if (disposed) return jobs.value
         if (revision !== jobsRevision) {
-          if (jobs.value.some(job => ACTIVE_STATUSES.has(job.status))) schedulePoll()
+          if (jobs.value.some(job => isActiveJobStatus(job.status))) schedulePoll()
           return jobs.value
         }
         replaceJobs(payload.jobs)
         error.value = null
-        if (!paused && !streamConnected && jobs.value.some(job => ACTIVE_STATUSES.has(job.status))) {
+        if (!paused && !jobStream.isConnected.value && jobs.value.some(job => isActiveJobStatus(job.status))) {
           schedulePoll()
         }
         return jobs.value
@@ -518,7 +529,7 @@ function createPluginJobs(
     const current = typeof job === 'string'
       ? jobs.value.find(candidate => candidate.job_id === jobId)
       : jobs.value.find(candidate => candidate.job_id === jobId) ?? job
-    if (current && !ACTIVE_STATUSES.has(current.status)) {
+    if (current && !isActiveJobStatus(current.status)) {
       return terminalWaitResult(current, options.rejectOnFailure === true)
     }
     if (paused) return Promise.reject(new Error('Plugin jobs runtime is paused'))
@@ -540,12 +551,12 @@ function createPluginJobs(
       waiting.add(waiter)
       jobWaiters.set(jobId, waiting)
       if (!paused) {
-        if (streamEnabled) void connectJobStream()
-        if (!streamConnected) schedulePoll()
+        if (streamEnabled) jobStream.start()
+        if (!jobStream.isConnected.value) schedulePoll()
       }
       void getJob(jobId, { signal: options.signal }).catch((cause: unknown) => {
         if (current && isRetryableJobLookupError(cause)) {
-          if (!streamConnected) schedulePoll()
+          if (!jobStream.isConnected.value) schedulePoll()
           return
         }
         removeJobWaiter(jobId, waiter)
@@ -555,7 +566,7 @@ function createPluginJobs(
   }
 
   function settleJobWaiters(job: GeneratedAnalysisJob): void {
-    if (ACTIVE_STATUSES.has(job.status)) return
+    if (isActiveJobStatus(job.status)) return
     const waiting = jobWaiters.get(job.job_id)
     if (!waiting) return
     jobWaiters.delete(job.job_id)
@@ -895,7 +906,7 @@ function createPluginJobs(
   }
 
   function schedulePoll(): void {
-    if (disposed || paused || streamConnected || pollTimer !== undefined) return
+    if (disposed || paused || jobStream.isConnected.value || pollTimer !== undefined) return
     pollTimer = setTimeout(async () => {
       pollTimer = undefined
       if (disposed) return
@@ -903,90 +914,31 @@ function createPluginJobs(
         await refreshJobs()
       } catch (cause) {
         error.value = errorMessage(cause, 'Failed to refresh analysis jobs')
-        if (jobs.value.some(job => ACTIVE_STATUSES.has(job.status))) schedulePoll()
+        if (jobs.value.some(job => isActiveJobStatus(job.status))) schedulePoll()
       }
     }, pollInterval)
   }
 
-  async function connectJobStream(): Promise<void> {
-    if (disposed || paused || streamConnecting || streamConnected) return
-    streamConnecting = true
-    streamController = new AbortController()
-    try {
-      const response = await transport(`${baseUrl}/jobs/events`, {
-        method: 'GET',
-        headers: { Accept: 'text/event-stream' },
-        signal: streamController.signal,
-      })
-      if (!response.ok) throw new Error(`Job stream failed (${response.status})`)
-      if (!response.body) throw new Error('Job stream response has no readable body')
-      streamConnected = true
-      if (pollTimer !== undefined) {
-        clearTimeout(pollTimer)
-        pollTimer = undefined
-      }
-      await consumeJobStream(response.body)
-    } catch (cause) {
-      if (!isAbortError(cause) && !disposed) {
-        if (jobs.value.some(job => ACTIVE_STATUSES.has(job.status))) schedulePoll()
-      }
-    } finally {
-      streamConnected = false
-      streamConnecting = false
-      streamController = undefined
-      if (!disposed && !paused) scheduleStreamReconnect()
-    }
+  function clearPoll(): void {
+    if (pollTimer === undefined) return
+    clearTimeout(pollTimer)
+    pollTimer = undefined
   }
 
-  async function consumeJobStream(body: ReadableStream<Uint8Array>): Promise<void> {
-    const reader = body.getReader()
-    const decoder = new TextDecoder()
-    let buffer = ''
-    try {
-      while (!disposed) {
-        const { done, value } = await reader.read()
-        buffer += decoder.decode(value, { stream: !done })
-        const blocks = buffer.split(/\r?\n\r?\n/)
-        buffer = blocks.pop() ?? ''
-        for (const block of blocks) applyJobStreamEvent(block)
-        if (done) {
-          if (buffer.trim()) applyJobStreamEvent(buffer)
-          return
-        }
-      }
-    } finally {
-      reader.releaseLock()
-    }
+  function schedulePollForActiveJobs(): void {
+    if (jobs.value.some(job => isActiveJobStatus(job.status))) schedulePoll()
   }
 
-  function applyJobStreamEvent(block: string): void {
-    let event = 'message'
-    const data: string[] = []
-    for (const line of block.split(/\r?\n/)) {
-      if (!line || line.startsWith(':')) continue
-      if (line.startsWith('event:')) event = line.slice('event:'.length).trim()
-      if (line.startsWith('data:')) data.push(line.slice('data:'.length).trimStart())
-    }
-    if (!data.length) return
-    const payload = JSON.parse(data.join('\n')) as (
-      GeneratedAnalysisJobInput | { jobs: GeneratedAnalysisJobInput[] }
-    )
-    if (event === 'snapshot' && 'jobs' in payload) {
+  function applyJobStreamMessage(message: EventStreamMessage<PluginJobStreamData>): void {
+    if (message.event === 'snapshot' && 'jobs' in message.data) {
+      const payload = message.data
       replaceJobs(payload.jobs)
-    } else if (event === 'job' || event === 'terminal') {
-      upsertJob(payload as GeneratedAnalysisJobInput)
+    } else if (message.event === 'job' || message.event === 'terminal') {
+      upsertJob(message.data as GeneratedAnalysisJobInput)
     }
     error.value = null
   }
 
-  function scheduleStreamReconnect(): void {
-    if (disposed || paused || streamReconnectTimer !== undefined) return
-    streamReconnectTimer = setTimeout(() => {
-      streamReconnectTimer = undefined
-      void connectJobStream()
-    }, streamReconnectDelay)
-  }
-
   async function cancelJob(job: GeneratedAnalysisJob | string): Promise<GeneratedAnalysisJob> {
     const jobId = typeof job === 'string' ? job : job.job_id
     const revision = beginJobOperation(jobId)
@@ -1030,19 +982,17 @@ function createPluginJobs(
     deleteJob: async job => deleteJob(job as GeneratedAnalysisJob),
     clearFinishedJobs: async () => clearFinishedJobs(),
   }
+
   function pause(): void {
     if (disposed || paused) return
     paused = true
     status.value = 'paused'
-    if (pollTimer !== undefined) clearTimeout(pollTimer)
-    if (streamReconnectTimer !== undefined) clearTimeout(streamReconnectTimer)
-    pollTimer = undefined
-    streamReconnectTimer = undefined
+    clearPoll()
     for (const jobId of resultRetryTimers.keys()) clearResultRetry(jobId)
     for (const jobId of downloadRefreshTimers.keys()) {
       clearManagedDownloadRefresh(jobId)
     }
-    streamController?.abort()
+    jobStream.stop()
   }
 
   function resume(): void {
@@ -1053,8 +1003,8 @@ function createPluginJobs(
     for (const [jobId, result] of Object.entries(resultCache.value)) {
       scheduleManagedDownloadRefresh(jobId, managedDownloadRefreshDelay(result))
     }
-    if (streamEnabled) void connectJobStream()
-    else if (jobs.value.some(job => ACTIVE_STATUSES.has(job.status))) schedulePoll()
+    if (streamEnabled) jobStream.start()
+    else if (jobs.value.some(job => isActiveJobStatus(job.status))) schedulePoll()
   }
 
   function dispose(): void {
@@ -1062,10 +1012,7 @@ function createPluginJobs(
     disposed = true
     paused = true
     status.value = 'disposed'
-    if (pollTimer !== undefined) clearTimeout(pollTimer)
-    if (streamReconnectTimer !== undefined) clearTimeout(streamReconnectTimer)
-    pollTimer = undefined
-    streamReconnectTimer = undefined
+    clearPoll()
     for (const timer of resultRetryTimers.values()) clearTimeout(timer)
     resultRetryTimers.clear()
     resultRetryAttempts.clear()
@@ -1075,7 +1022,7 @@ function createPluginJobs(
     for (const jobId of jobWaiters.keys()) rejectJobWaiters(jobId, cause)
     jobRevisions.clear()
     pendingJobOperations.clear()
-    streamController?.abort()
+    jobStream.stop()
   }
 
   async function request<T>(path: string, init: RequestInit): Promise<T> {
@@ -1229,10 +1176,6 @@ function createGeneratedSessionStorage(candidate?: Storage): GeneratedSessionSto
   }
 }
 
-function isAbortError(error: unknown): boolean {
-  return error instanceof DOMException && error.name === 'AbortError'
-}
-
 function isSessionNotFoundError(error: unknown): boolean {
   return error instanceof GeneratedAnalysisRequestError
     && error.status === 404

package/src/composables/useJobsStatusTray.ts

@@ -485,7 +485,7 @@ export function usePluginJobCenter(
   }
 }
 
-/** Backward-compatible name for the plugin job-center controller. */
+/** @deprecated Use `usePluginJobCenter()` for the plugin job-center controller. */
 export function useJobsStatusTray(
   options: UseJobsStatusTrayOptions = {},
 ): UseJobsStatusTrayReturn {

package/src/composables/useListReorder.story.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+/** Demonstrates `useListReorder`: drag a row, or focus a handle and press Alt with the arrow keys. */
+import { ref } from 'vue'
+import { useListReorder } from './useListReorder'
+
+interface Step { id: string; name: string }
+
+const steps = ref<Step[]>([
+  { id: 's1', name: 'Thaw samples' },
+  { id: 's2', name: 'Quench metabolism' },
+  { id: 's3', name: 'Extract metabolites' },
+  { id: 's4', name: 'Dry down' },
+])
+
+const handles = new Map<string, HTMLElement>()
+
+function setHandle(id: string, el: Element | null) {
+  if (el instanceof HTMLElement) handles.set(id, el)
+  else handles.delete(id)
+}
+
+const {
+  draggingId,
+  dragOverId,
+  announcement,
+  announcerStyle,
+  onDragStart,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onDragEnd,
+  onKeydown,
+} = useListReorder<Step>({
+  items: () => steps.value,
+  getId: (step) => step.id,
+  getLabel: (step) => step.name,
+  getElement: (id) => handles.get(id),
+  itemNoun: 'Step',
+  onReorder: ({ items }) => {
+    steps.value = items
+  },
+})
+
+function initState() {
+  return { showAnnouncement: true }
+}
+</script>
+
+<template>
+  <Story title="Composables/useListReorder">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <p class="mint-story-hint">
+            Drag a row, or focus its handle and press Alt with the up/down arrow keys.
+          </p>
+          <ul class="mint-story-list">
+            <li
+              v-for="(step, index) in steps"
+              :key="step.id"
+              class="mint-story-row"
+              :class="{
+                'mint-story-row--dragging': draggingId === step.id,
+                'mint-story-row--over': dragOverId === step.id,
+              }"
+              draggable="true"
+              @dragstart="onDragStart($event, step, index)"
+              @dragover="onDragOver($event, step, index)"
+              @dragleave="onDragLeave"
+              @drop="onDrop($event, step, index)"
+              @dragend="onDragEnd"
+            >
+              <button
+                :ref="(el) => setHandle(step.id, el as Element | null)"
+                type="button"
+                class="mint-story-handle"
+                :aria-label="`Reorder ${step.name}. Press Alt with the arrow keys to move it.`"
+                @keydown="onKeydown($event, step, index)"
+              >
+                ⠿
+              </button>
+              <span>{{ index + 1 }}. {{ step.name }}</span>
+            </li>
+          </ul>
+
+          <p v-if="state.showAnnouncement" class="mint-story-hint">
+            Live region: <em>{{ announcement || '—' }}</em>
+          </p>
+          <div role="status" aria-live="polite" :style="announcerStyle">{{ announcement }}</div>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.showAnnouncement" title="Show live-region text" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.mint-story-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.mint-story-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.mint-story-row--dragging {
+  opacity: 0.5;
+}
+
+.mint-story-row--over {
+  border-color: var(--color-primary);
+}
+
+.mint-story-handle {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--text-muted);
+  cursor: grab;
+  font-size: 1rem;
+}
+
+.mint-story-hint {
+  margin: 0 0 0.75rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+</style>

package/src/composables/useListReorder.ts

@@ -0,0 +1,242 @@
+import { nextTick, ref, type Ref } from 'vue'
+
+/** Inline style for a visually hidden `aria-live` region (no global utility class in the SDK). */
+export const REORDER_ANNOUNCER_STYLE = Object.freeze({
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: '0',
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: '0',
+})
+
+export interface UseReorderAnnouncerReturn {
+  /** Bind to a polite live region's text content. */
+  announcement: Ref<string>
+  /** Publishes a message to the live region. */
+  announce: (message: string) => void
+  /** Bind to the live region's `style` so it stays visually hidden. */
+  announcerStyle: typeof REORDER_ANNOUNCER_STYLE
+}
+
+/**
+ * Screen-reader announcements for drag/keyboard move interactions. Bind
+ * `announcement` to a `role="status" aria-live="polite"` element styled with
+ * `announcerStyle`.
+ */
+export function useReorderAnnouncer(): UseReorderAnnouncerReturn {
+  const announcement = ref('')
+
+  function announce(message: string) {
+    // Re-announce identical consecutive messages by clearing first.
+    if (announcement.value === message) announcement.value = ''
+    void nextTick(() => {
+      announcement.value = message
+    })
+  }
+
+  return { announcement, announce, announcerStyle: REORDER_ANNOUNCER_STYLE }
+}
+
+export interface ListReorderMove<T> {
+  /** Index the item moved from, within `items()`. */
+  fromIndex: number
+  /** Index the item moved to, within `items()`. */
+  toIndex: number
+  /** The reordered array (a copy — `items()` is never mutated). */
+  items: T[]
+  /** Whether the move came from the keyboard or a pointer drag. */
+  source: 'keyboard' | 'drag'
+}
+
+export interface UseListReorderOptions<T> {
+  /** The list being reordered, in its canonical (not merely rendered) order. */
+  items: () => T[]
+  /** Stable id for an item; falls back to the render index when ids repeat. */
+  getId: (item: T, index: number) => string
+  /** Applies the move. The composable never mutates the source array. */
+  onReorder: (move: ListReorderMove<T>) => void
+  /** Human-readable name used in announcements. Defaults to the item's id. */
+  getLabel?: (item: T, index: number) => string
+  /** Blocks every reorder while it returns `true` (readonly / non-sortable lists). */
+  disabled?: () => boolean
+  /** Resolves the focusable element for an id so keyboard moves keep focus on the item. */
+  getElement?: (id: string) => HTMLElement | null | undefined
+  /** Noun used in announcements, e.g. `'Reagent'`. Default `'Item'`. */
+  itemNoun?: string
+}
+
+export interface UseListReorderReturn<T> {
+  /** Id of the item currently being dragged, or `null`. */
+  draggingId: Ref<string | null>
+  /** Id of the item the pointer is hovering as a drop target, or `null`. */
+  dragOverId: Ref<string | null>
+  isDragging: (id: string) => boolean
+  isDragOver: (id: string) => boolean
+  announcement: Ref<string>
+  announcerStyle: typeof REORDER_ANNOUNCER_STYLE
+  announce: (message: string) => void
+  /** Bind to the draggable element's `@dragstart`. */
+  onDragStart: (event: DragEvent, item: T, index: number) => void
+  /** Bind to `@dragover` — calls `preventDefault()` so the drop is accepted. */
+  onDragOver: (event: DragEvent, item: T, index: number) => void
+  /** Bind to `@dragleave`. */
+  onDragLeave: () => void
+  /** Bind to `@drop`. */
+  onDrop: (event: DragEvent, item: T, index: number) => void
+  /** Bind to `@dragend`. */
+  onDragEnd: () => void
+  /**
+   * Bind to the item's (or its drag handle's) `@keydown`: Alt+ArrowUp / Alt+ArrowLeft
+   * moves the item one position earlier, Alt+ArrowDown / Alt+ArrowRight one later.
+   */
+  onKeydown: (event: KeyboardEvent, item: T, index: number) => void
+  /** Moves an item between two indices of `items()` programmatically. */
+  move: (fromIndex: number, toIndex: number, source?: 'keyboard' | 'drag') => void
+}
+
+/** Pure helper: a copy of `items` with the entry at `from` moved to `to`. */
+export function reorderList<T>(items: T[], from: number, to: number): T[] {
+  const next = [...items]
+  const [moved] = next.splice(from, 1)
+  next.splice(to, 0, moved)
+  return next
+}
+
+/**
+ * Keyboard-accessible list reordering shared by the SDK's drag-to-reorder lists.
+ * It owns the HTML5 drag state, the drop-index maths, and an Alt+Arrow keyboard
+ * alternative that announces every move through a polite live region — so a
+ * reorder never depends on a pointer.
+ */
+export function useListReorder<T>(options: UseListReorderOptions<T>): UseListReorderReturn<T> {
+  const draggingId = ref<string | null>(null)
+  const dragOverId = ref<string | null>(null)
+  const { announcement, announce, announcerStyle } = useReorderAnnouncer()
+  const noun = options.itemNoun ?? 'Item'
+
+  function isDisabled(): boolean {
+    return options.disabled?.() === true
+  }
+
+  function idFor(item: T, index: number): string {
+    return options.getId(item, index)
+  }
+
+  /** Index within `items()`, resolved by id so filtered/sorted renders still map back. */
+  function indexOf(item: T, renderIndex: number): number {
+    const id = idFor(item, renderIndex)
+    const found = options.items().findIndex((candidate, index) => idFor(candidate, index) === id)
+    return found === -1 ? renderIndex : found
+  }
+
+  function labelFor(index: number): string {
+    const item = options.items()[index]
+    if (item === undefined) return noun
+    return options.getLabel?.(item, index) ?? idFor(item, index)
+  }
+
+  function clearDragState() {
+    draggingId.value = null
+    dragOverId.value = null
+  }
+
+  function move(fromIndex: number, toIndex: number, source: 'keyboard' | 'drag' = 'keyboard') {
+    if (isDisabled()) return
+    const items = options.items()
+    if (
+      fromIndex === toIndex ||
+      fromIndex < 0 ||
+      toIndex < 0 ||
+      fromIndex >= items.length ||
+      toIndex >= items.length
+    ) return
+
+    const movedId = idFor(items[fromIndex], fromIndex)
+    const label = labelFor(fromIndex)
+    options.onReorder({
+      fromIndex,
+      toIndex,
+      items: reorderList(items, fromIndex, toIndex),
+      source,
+    })
+    announce(`${label} moved to position ${toIndex + 1} of ${items.length}.`)
+    void nextTick(() => options.getElement?.(movedId)?.focus())
+  }
+
+  function onDragStart(event: DragEvent, item: T, index: number) {
+    if (isDisabled()) return
+    const id = idFor(item, index)
+    draggingId.value = id
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move'
+      event.dataTransfer.setData('text/plain', id)
+    }
+  }
+
+  function onDragOver(event: DragEvent, item: T, index: number) {
+    if (isDisabled() || draggingId.value === null) return
+    event.preventDefault()
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+    const id = idFor(item, index)
+    dragOverId.value = id === draggingId.value ? null : id
+  }
+
+  function onDragLeave() {
+    dragOverId.value = null
+  }
+
+  function onDrop(event: DragEvent, item: T, index: number) {
+    if (isDisabled() || draggingId.value === null) {
+      clearDragState()
+      return
+    }
+    event.preventDefault()
+
+    const items = options.items()
+    const fromIndex = items.findIndex((candidate, i) => idFor(candidate, i) === draggingId.value)
+    const toIndex = indexOf(item, index)
+    clearDragState()
+    if (fromIndex === -1) return
+    move(fromIndex, toIndex, 'drag')
+  }
+
+  function onDragEnd() {
+    clearDragState()
+  }
+
+  function onKeydown(event: KeyboardEvent, item: T, index: number) {
+    if (isDisabled() || !event.altKey) return
+    const direction =
+      event.key === 'ArrowUp' || event.key === 'ArrowLeft'
+        ? -1
+        : event.key === 'ArrowDown' || event.key === 'ArrowRight'
+          ? 1
+          : 0
+    if (direction === 0) return
+
+    event.preventDefault()
+    const fromIndex = indexOf(item, index)
+    move(fromIndex, fromIndex + direction, 'keyboard')
+  }
+
+  return {
+    draggingId,
+    dragOverId,
+    isDragging: (id: string) => draggingId.value === id,
+    isDragOver: (id: string) => dragOverId.value === id,
+    announcement,
+    announcerStyle,
+    announce,
+    onDragStart,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDragEnd,
+    onKeydown,
+    move,
+  }
+}