@pilotiq/pilotiq 0.23.1 → 0.24.2

package/src/react/fields/syncRowGates.test.ts

@@ -1,202 +0,0 @@
-import { describe, it } from 'node:test'
-import assert from 'node:assert/strict'
-
-import { syncRowGates, type RowGateMeta } from './syncRowGates.js'
-
-interface TestRow extends RowGateMeta {
-  // Local-only fields the helper must preserve verbatim.
-  children?:    unknown[]
-  type?:        string
-  unknownType?: boolean
-}
-
-function row(id: string, extras: Partial<TestRow> = {}): TestRow {
-  return { id, ...extras }
-}
-
-describe('syncRowGates', () => {
-  it('returns the same reference when every row already matches', () => {
-    const prev = [row('a'), row('b')]
-    const out  = syncRowGates(prev, [{ id: 'a' }, { id: 'b' }])
-    assert.equal(out, prev)
-  })
-
-  it('stamps `hidden: true` when fresh meta hides a previously-visible row', () => {
-    const prev = [row('a'), row('b')]
-    const out  = syncRowGates(prev, [{ id: 'a' }, { id: 'b', hidden: true }])
-    assert.notEqual(out, prev)
-    assert.equal(out[0]?.hidden, undefined)
-    assert.equal(out[1]?.hidden, true)
-  })
-
-  it('clears `hidden` when fresh meta drops the flag', () => {
-    const prev: TestRow[] = [row('a', { hidden: true })]
-    const out = syncRowGates(prev, [{ id: 'a' }])
-    assert.notEqual(out, prev)
-    assert.equal(out[0]?.hidden, undefined)
-    assert.ok(!('hidden' in (out[0] ?? {})))
-  })
-
-  it('toggles each capability flag independently', () => {
-    const prev: TestRow[] = [row('a', { canDelete: false }), row('b', { canClone: false }), row('c', { canReorder: false })]
-    const out = syncRowGates(prev, [
-      { id: 'a' },                          // canDelete cleared
-      { id: 'b', canClone: false },         // canClone unchanged
-      { id: 'c', canDelete: false },        // canReorder cleared, canDelete set
-    ])
-    assert.notEqual(out, prev)
-    assert.equal(out[0]?.canDelete,  undefined)
-    assert.equal(out[1]?.canClone,   false)
-    assert.equal(out[1]?.canDelete,  undefined)
-    assert.equal(out[2]?.canReorder, undefined)
-    assert.equal(out[2]?.canDelete,  false)
-  })
-
-  it('preserves local-only fields (children / type / unknownType) — never echoed back from server', () => {
-    const children = [{ kind: 'placeholder' }]
-    const prev: TestRow[] = [
-      row('a', { children, type: 'heading', unknownType: false }),
-      row('b', { children, type: 'paragraph' }),
-    ]
-    const out = syncRowGates(prev, [{ id: 'a', hidden: true }, { id: 'b' }])
-    assert.equal(out[0]?.children,     children)
-    assert.equal(out[0]?.type,         'heading')
-    assert.equal(out[0]?.unknownType,  false)
-    assert.equal(out[0]?.hidden,       true)
-    assert.equal(out[1]?.children,     children)
-    assert.equal(out[1]?.type,         'paragraph')
-  })
-
-  it('leaves rows whose ids aren\'t in the fresh list untouched (client added a row mid-flight)', () => {
-    const prev = [row('a', { hidden: true }), row('b'), row('c-local-only')]
-    const out = syncRowGates(prev, [{ id: 'a' }, { id: 'b' }])
-    // a's hidden flag cleared because fresh has it, b unchanged, c left alone.
-    assert.equal(out[0]?.hidden, undefined)
-    assert.equal(out[1]?.hidden, undefined)
-    assert.equal(out[2]?.id,     'c-local-only')
-  })
-
-  it('preserves row order — never reorders or appends', () => {
-    const prev = [row('a'), row('b'), row('c')]
-    const out = syncRowGates(prev, [{ id: 'b' }, { id: 'a' }, { id: 'c', hidden: true }])
-    assert.equal(out[0]?.id, 'a')
-    assert.equal(out[1]?.id, 'b')
-    assert.equal(out[2]?.id, 'c')
-    assert.equal(out[2]?.hidden, true)
-  })
-
-  it('does not mutate input rows', () => {
-    const a: TestRow = row('a')
-    const b: TestRow = row('b', { hidden: true })
-    syncRowGates([a, b], [{ id: 'a', hidden: true }, { id: 'b' }])
-    assert.equal(a.hidden, undefined)
-    assert.equal(b.hidden, true)
-  })
-
-  it('returns the same reference when fresh is empty (no row meta to sync)', () => {
-    const prev = [row('a'), row('b')]
-    const out = syncRowGates(prev, [])
-    assert.equal(out, prev)
-  })
-
-  it('treats `hidden: false` and missing `hidden` as equivalent (no-op)', () => {
-    const prev = [row('a')]
-    const out = syncRowGates(prev, [{ id: 'a', hidden: false }])
-    assert.equal(out, prev)
-  })
-
-  it('combines all four flag transitions in a single sync', () => {
-    const prev: TestRow[] = [
-      row('a', { hidden: true, canDelete: false, canClone: false, canReorder: false }),
-    ]
-    const out = syncRowGates(prev, [{ id: 'a' }])
-    assert.notEqual(out, prev)
-    assert.equal(out[0]?.hidden,     undefined)
-    assert.equal(out[0]?.canDelete,  undefined)
-    assert.equal(out[0]?.canClone,   undefined)
-    assert.equal(out[0]?.canReorder, undefined)
-  })
-
-  describe('itemLabel sync', () => {
-    it('updates itemLabel when fresh meta carries a different string', () => {
-      const prev: TestRow[] = [row('a', { itemLabel: 'Apple' })]
-      const out = syncRowGates(prev, [{ id: 'a', itemLabel: 'Apricot' }])
-      assert.notEqual(out, prev)
-      assert.equal(out[0]?.itemLabel, 'Apricot')
-    })
-
-    it('clears itemLabel when fresh meta drops it (label fn returned non-string this resolve)', () => {
-      const prev: TestRow[] = [row('a', { itemLabel: 'Apple' })]
-      const out = syncRowGates(prev, [{ id: 'a' }])
-      assert.notEqual(out, prev)
-      assert.equal(out[0]?.itemLabel, undefined)
-      assert.ok(!('itemLabel' in (out[0] ?? {})))
-    })
-
-    it('stamps itemLabel when fresh meta adds it (was missing on prev)', () => {
-      const prev: TestRow[] = [row('a')]
-      const out = syncRowGates(prev, [{ id: 'a', itemLabel: 'Apple' }])
-      assert.notEqual(out, prev)
-      assert.equal(out[0]?.itemLabel, 'Apple')
-    })
-
-    it('keeps reference identity when itemLabel is byte-identical across resolves', () => {
-      const prev: TestRow[] = [row('a', { itemLabel: 'Apple' })]
-      const out = syncRowGates(prev, [{ id: 'a', itemLabel: 'Apple' }])
-      assert.equal(out, prev)
-    })
-  })
-
-  describe('extraActions sync', () => {
-    it('updates extraActions when the action list changes shape', () => {
-      const prevActions = [{ name: 'send', label: 'Send' }]
-      const freshActions = [{ name: 'send', label: 'Send' }, { name: 'archive', label: 'Archive' }]
-      const prev: TestRow[] = [row('a', { extraActions: prevActions })]
-      const out = syncRowGates(prev, [{ id: 'a', extraActions: freshActions }])
-      assert.notEqual(out, prev)
-      assert.equal(out[0]?.extraActions, freshActions)
-    })
-
-    it('updates extraActions when an action toggles disabled mid-form (visibility re-resolved)', () => {
-      const prevActions  = [{ name: 'send', label: 'Send', disabled: false }]
-      const freshActions = [{ name: 'send', label: 'Send', disabled: true }]
-      const prev: TestRow[] = [row('a', { extraActions: prevActions })]
-      const out = syncRowGates(prev, [{ id: 'a', extraActions: freshActions }])
-      assert.notEqual(out, prev)
-      assert.equal(out[0]?.extraActions, freshActions)
-    })
-
-    it('clears extraActions when fresh meta drops them (every action failed visibility)', () => {
-      const prev: TestRow[] = [row('a', { extraActions: [{ name: 'send' }] })]
-      const out = syncRowGates(prev, [{ id: 'a' }])
-      assert.notEqual(out, prev)
-      assert.equal(out[0]?.extraActions, undefined)
-      assert.ok(!('extraActions' in (out[0] ?? {})))
-    })
-
-    it('treats fresh empty array same as undefined (clears prev)', () => {
-      const prev: TestRow[] = [row('a', { extraActions: [{ name: 'send' }] })]
-      const out = syncRowGates(prev, [{ id: 'a', extraActions: [] }])
-      assert.notEqual(out, prev)
-      assert.equal(out[0]?.extraActions, undefined)
-    })
-
-    it('keeps reference identity when extraActions are byte-identical across resolves', () => {
-      const actions = [{ name: 'send', label: 'Send' }]
-      const prev: TestRow[] = [row('a', { extraActions: actions })]
-      const out = syncRowGates(prev, [{ id: 'a', extraActions: [{ name: 'send', label: 'Send' }] }])
-      assert.equal(out, prev)
-    })
-  })
-
-  it('combines flag + itemLabel + extraActions transitions in a single sync', () => {
-    const prev: TestRow[] = [
-      row('a', { hidden: true, itemLabel: 'Old', extraActions: [{ name: 'a' }] }),
-    ]
-    const out = syncRowGates(prev, [{ id: 'a', itemLabel: 'New', extraActions: [{ name: 'b' }] }])
-    assert.notEqual(out, prev)
-    assert.equal(out[0]?.hidden,       undefined)
-    assert.equal(out[0]?.itemLabel,    'New')
-    assert.deepEqual(out[0]?.extraActions, [{ name: 'b' }])
-  })
-})

package/src/react/fields/syncRowGates.ts

@@ -1,66 +0,0 @@
-// Match by `id`: rows in `fresh` come from server re-resolve of whatever
-// rows the client posted, so any row missing from `fresh` (a client-added
-// row that arrived after the live() request fired) is left untouched.
-// Returns `prev` reference unchanged when nothing differs — caller's
-// `setRows` then no-ops, avoiding a render cascade on idempotent responses.
-export interface RowGateMeta {
-  id:            string
-  hidden?:       boolean
-  canDelete?:    false
-  canClone?:     false
-  canReorder?:   false
-  itemLabel?:    string
-  extraActions?: readonly unknown[]
-}
-
-export function syncRowGates<R extends RowGateMeta>(
-  prev:  R[],
-  fresh: ReadonlyArray<RowGateMeta>,
-): R[] {
-  const byId = new Map<string, RowGateMeta>()
-  for (const r of fresh) byId.set(r.id, r)
-
-  let changed = false
-  const next = prev.map((row): R => {
-    const m = byId.get(row.id)
-    if (!m) return row
-
-    const targetHidden     = m.hidden === true
-    const targetCanDelete  = m.canDelete  === false ? (false as const) : undefined
-    const targetCanClone   = m.canClone   === false ? (false as const) : undefined
-    const targetCanReorder = m.canReorder === false ? (false as const) : undefined
-    const targetItemLabel  = typeof m.itemLabel === 'string' ? m.itemLabel : undefined
-    const targetExtra      = m.extraActions && m.extraActions.length > 0 ? m.extraActions : undefined
-
-    const extraDiffers =
-      (row.extraActions?.length ?? 0) !== (targetExtra?.length ?? 0)
-      || (targetExtra !== undefined && JSON.stringify(row.extraActions) !== JSON.stringify(targetExtra))
-
-    if (
-      Boolean(row.hidden)  === targetHidden &&
-      row.canDelete        === targetCanDelete &&
-      row.canClone         === targetCanClone &&
-      row.canReorder       === targetCanReorder &&
-      row.itemLabel        === targetItemLabel &&
-      !extraDiffers
-    ) return row
-
-    changed = true
-    const updated = { ...row }
-    if (targetHidden)     updated.hidden     = true
-    else delete updated.hidden
-    if (targetCanDelete  === false) updated.canDelete  = false
-    else delete updated.canDelete
-    if (targetCanClone   === false) updated.canClone   = false
-    else delete updated.canClone
-    if (targetCanReorder === false) updated.canReorder = false
-    else delete updated.canReorder
-    if (targetItemLabel !== undefined) updated.itemLabel = targetItemLabel
-    else delete updated.itemLabel
-    if (targetExtra !== undefined) updated.extraActions = targetExtra
-    else delete updated.extraActions
-    return updated
-  })
-
-  return changed ? next : prev
-}

package/src/react/fields/textInputControls.tsx

@@ -1,238 +0,0 @@
-import React, { useState, useCallback } from 'react'
-import type { ElementMeta } from '../../schema/Element.js'
-import { useToast } from '../Toaster.js'
-
-/**
- * TextField rich affordances live in this file (audit gap #3):
- *  - `revealable()` — eye-icon toggle that flips `type="password"` ↔ `text`
- *  - `copyable(message?)` — copy-to-clipboard button + toast
- *  - `prefixAction(Action) / suffixAction(Action)` — embedded Action buttons
- *  - `mask(pattern)`     — keystroke-by-keystroke pattern formatter
- *
- * The components export a `useTextInputControls(el, name)` hook that
- * returns `{ before, after, type, applyMask }` so the calling renderer
- * can mount the controls inside `FieldShell`'s `before / after` slots
- * and feed the masked value back through the controlled-input bridge.
- *
- * Mask alphabet:
- *   `9` — digit (0-9)
- *   `a` — alpha (A-Za-z)
- *   `*` — alphanumeric or any character
- *   anything else — literal (rendered verbatim)
- *
- * Submitted values are stripped of mask literals via `stripCharacters`
- * (server-side coerce); the client also strips on input so what the user
- * sees in the DOM matches what gets posted.
- */
-
-export interface TextInputControlsResult {
-  before: React.ReactNode
-  after:  React.ReactNode
-  /** Effective `type` attribute — `'password'` when password+!revealed,
-   *  `'text'` otherwise. Pass through to the rendered `<input>`. */
-  type:   string
-  /** When the field has `mask(pattern)` set, format `value` against the
-   *  pattern. Returns the formatted string. Skips when no mask. */
-  applyMask: (value: string) => string
-}
-
-/** `renderAction(meta)` is supplied by the caller (SchemaRenderer's
- *  `renderElement`) to avoid an import cycle between the controls
- *  module and the main schema renderer. */
-export function useTextInputControls(
-  el:           ElementMeta,
-  name:         string,
-  renderAction: (meta: ElementMeta) => React.ReactNode,
-): TextInputControlsResult {
-  const isPassword  = el['password']   === true
-  const isRevealable= el['revealable'] === true
-  const isCopyable  = el['copyable']   === true
-  const copyMessage = (el['copyMessage'] as string | undefined) ?? 'Copied!'
-  const mask        = el['mask']       as string | undefined
-  const prefixAct   = el['prefixAction'] as ElementMeta | undefined
-  const suffixAct   = el['suffixAction'] as ElementMeta | undefined
-
-  const [revealed, setRevealed] = useState(false)
-  const inputId = name
-
-  const onCopy = useCopyHandler(inputId, copyMessage)
-
-  const type = isPassword && !revealed ? 'password' : 'text'
-
-  const beforeNodes: React.ReactNode[] = []
-  if (prefixAct) beforeNodes.push(
-    <div key="pre-act" className="shrink-0">{renderAction(prefixAct)}</div>
-  )
-
-  const afterNodes: React.ReactNode[] = []
-  if (isCopyable)   afterNodes.push(<CopyButton    key="copy"    onCopy={onCopy} />)
-  if (isRevealable && isPassword) {
-    afterNodes.push(
-      <RevealToggle
-        key="reveal"
-        revealed={revealed}
-        onToggle={() => setRevealed(v => !v)}
-      />
-    )
-  }
-  if (suffixAct) afterNodes.push(
-    <div key="suf-act" className="shrink-0">{renderAction(suffixAct)}</div>
-  )
-
-  const applyMask = useCallback((value: string): string => {
-    if (!mask) return value
-    return formatWithMask(value, mask)
-  }, [mask])
-
-  return {
-    before: beforeNodes.length > 0 ? <>{beforeNodes}</> : null,
-    after:  afterNodes.length  > 0 ? <>{afterNodes}</>  : null,
-    type,
-    applyMask,
-  }
-}
-
-/**
- * Format `raw` against `mask` using the documented alphabet. Literals
- * in the mask render verbatim and consume no source character; pattern
- * tokens consume the next matching source character (skipping
- * mismatches so the user can paste an already-formatted value and have
- * it re-format cleanly).
- */
-export function formatWithMask(raw: string, mask: string): string {
-  let out = ''
-  let r   = 0
-  for (let m = 0; m < mask.length; m++) {
-    const token = mask[m]!
-    const isPattern = token === '9' || token === 'a' || token === '*'
-    if (isPattern) {
-      if (r >= raw.length) break
-      // Advance through `raw` until we find a matching character.
-      while (r < raw.length) {
-        const ch = raw[r]!
-        const ok = token === '9'
-          ? /[0-9]/.test(ch)
-          : token === 'a'
-            ? /[A-Za-z]/.test(ch)
-            : true
-        r++
-        if (ok) { out += ch; break }
-      }
-    } else {
-      // Literal character — emit even when raw is exhausted, so a
-      // partially-typed value still shows the upcoming chrome
-      // (e.g. `(415) ` after the user types three digits). Consume the
-      // matching raw char if present so a paste of the already-formatted
-      // value doesn't double up.
-      out += token
-      if (raw[r] === token) r++
-    }
-  }
-  return out
-}
-
-function useCopyHandler(
-  inputId: string,
-  message: string,
-): () => void {
-  const { notify } = useToast()
-  return () => {
-    if (typeof document === 'undefined') return
-    const el = document.getElementById(inputId) as HTMLInputElement | HTMLTextAreaElement | null
-    if (!el) return
-    const value = el.value
-    const writeText = navigator?.clipboard?.writeText?.bind(navigator.clipboard)
-    if (writeText) {
-      writeText(value).then(
-        () => notify({ type: 'success', title: message, duration: 2000 }),
-        () => notify({ type: 'error',   title: 'Copy failed' }),
-      )
-    } else {
-      // Fallback: select + execCommand. Modern browsers all expose
-      // navigator.clipboard, so this is rare-path.
-      el.select()
-      try {
-        document.execCommand('copy')
-        notify({ type: 'success', title: message, duration: 2000 })
-      } catch {
-        notify({ type: 'error', title: 'Copy failed' })
-      }
-      el.setSelectionRange?.(0, 0)
-    }
-  }
-}
-
-function ChromeButton({ onClick, ariaLabel, children, autoFocus }: {
-  onClick:    (e: React.MouseEvent) => void
-  ariaLabel:  string
-  children:   React.ReactNode
-  autoFocus?: boolean
-}): React.ReactElement {
-  return (
-    <button
-      type="button"
-      tabIndex={-1}
-      onClick={(e) => { e.preventDefault(); onClick(e) }}
-      aria-label={ariaLabel}
-      className="inline-flex items-center justify-center rounded-md size-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground shrink-0"
-      autoFocus={autoFocus}
-    >
-      {children}
-    </button>
-  )
-}
-
-function CopyButton({ onCopy }: { onCopy: () => void }): React.ReactElement {
-  return (
-    <ChromeButton onClick={onCopy} ariaLabel="Copy">
-      <CopyIcon className="size-4" />
-    </ChromeButton>
-  )
-}
-
-function RevealToggle({ revealed, onToggle }: {
-  revealed: boolean
-  onToggle: () => void
-}): React.ReactElement {
-  return (
-    <ChromeButton
-      onClick={onToggle}
-      ariaLabel={revealed ? 'Hide value' : 'Show value'}
-    >
-      {revealed ? <EyeOffIcon className="size-4" /> : <EyeIcon className="size-4" />}
-    </ChromeButton>
-  )
-}
-
-// ─── Inline icon SVGs (avoids pulling lucide-react import into this file
-// without checking it's already a dep — keeps the bundle stable). ────
-
-function CopyIcon(props: React.SVGProps<SVGSVGElement>): React.ReactElement {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
-      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
-    </svg>
-  )
-}
-
-function EyeIcon(props: React.SVGProps<SVGSVGElement>): React.ReactElement {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
-      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
-      <circle cx="12" cy="12" r="3" />
-    </svg>
-  )
-}
-
-function EyeOffIcon(props: React.SVGProps<SVGSVGElement>): React.ReactElement {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
-      <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
-      <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
-      <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
-      <line x1="2" x2="22" y1="2" y2="22" />
-    </svg>
-  )
-}
-

package/src/react/fields/useRowReorderDnd.ts

@@ -1,78 +0,0 @@
-import React, { useState } from 'react'
-
-/**
- * Shared HTML5 drag-and-drop wiring for any list of rows that the user
- * can reorder. Consumed by `TableRendererBody` (POSTs the new order
- * to the server with rollback), `RepeaterInput`, and `BuilderInput`
- * (both mutate local row state in place).
- *
- * Generic on `HTMLElement` so the same handlers wire onto a `<div>`
- * row (card / grid layouts) AND a `<tr>` row (table layout) — the
- * consumer cast happens at the JSX boundary.
- */
-
-export interface RowReorderDnd {
-  dragId: string | null
-  /** The boundary slot the cursor is over (0..rows.length); null when no drag is active. */
-  dropAt: number | null
-  onDragStart: (id:  string) => (e: React.DragEvent<HTMLElement>) => void
-  onDragOver:  (idx: number) => (e: React.DragEvent<HTMLElement>) => void
-  onDrop:      (e: React.DragEvent<HTMLElement>) => void
-  onDragEnd:   () => void
-}
-
-export interface UseRowReorderDndOptions {
-  /** When false, every handler short-circuits without firing `onDrop`. */
-  enabled: boolean
-  /** Fires once per successful drop, after the hook has cleared its drag state. */
-  onDrop:  (fromId: string, dropAt: number) => void | Promise<void>
-}
-
-export function useRowReorderDnd({
-  enabled,
-  onDrop,
-}: UseRowReorderDndOptions): RowReorderDnd {
-  const [dragId, setDragId] = useState<string | null>(null)
-  const [dropAt, setDropAt] = useState<number | null>(null)
-
-  const handleDragStart = (id: string) => (e: React.DragEvent<HTMLElement>): void => {
-    if (!enabled) return
-    setDragId(id)
-    // dataTransfer needs *something* to register the drag in Firefox.
-    e.dataTransfer.effectAllowed = 'move'
-    try { e.dataTransfer.setData('text/plain', id) } catch { /* IE quirk; ignore */ }
-  }
-
-  const handleDragOver = (idx: number) => (e: React.DragEvent<HTMLElement>): void => {
-    if (!enabled || dragId === null) return
-    e.preventDefault()
-    e.dataTransfer.dropEffect = 'move'
-    // Drop above this row when cursor is in its top half, below when in its bottom half.
-    const rect      = e.currentTarget.getBoundingClientRect()
-    const aboveHalf = e.clientY < rect.top + rect.height / 2
-    setDropAt(aboveHalf ? idx : idx + 1)
-  }
-
-  const handleDrop = (e: React.DragEvent<HTMLElement>): void => {
-    if (!enabled || dragId === null || dropAt === null) {
-      setDragId(null); setDropAt(null); return
-    }
-    e.preventDefault()
-    const fromId = dragId
-    const at     = dropAt
-    setDragId(null); setDropAt(null)
-    void onDrop(fromId, at)
-  }
-
-  const handleDragEnd = (): void => {
-    setDragId(null); setDropAt(null)
-  }
-
-  return {
-    dragId, dropAt,
-    onDragStart: handleDragStart,
-    onDragOver:  handleDragOver,
-    onDrop:      handleDrop,
-    onDragEnd:   handleDragEnd,
-  }
-}