ColumnChooser

import { cn } from "cn"
import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, type ComponentProps, type DragEvent, type ReactNode, type Ref } from "react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { NUMERIC_CLASS } from "@/lib/format"
import { RULE_TONES, RULE_TONE_CLASS, columnName, describeRule, readColumnRule, type ReadColumnRule, type RuleTone, type RuleWordsInput } from "@/lib/grid-rules"
import { EMPTY_COLUMN_STATE, type ColumnDef, type ColumnState } from "@/components/ui/data-grid"

// An undefined word keeps its default, as DataGrid's labels do.
const defined = <W extends object>(words: W | undefined): Partial<W> => Object.fromEntries(Object.entries(words ?? {}).filter(([, word]) => word !== undefined)) as Partial<W>

// The root coordinates controlled grid edits, search, drag ownership and focus.
// Callers own the collection, row contents and any surrounding dialog.

export interface ColumnChooserLabels {
  title: string
  description: string
  search: string
  /** Prefix of a checkbox's name: "Show Price". */
  show: string
  frozen: string
  /** A hidden item's spoken state. */
  hidden: string
  /** How many columns are hidden: a template with `{n}`, or a function of the count, for a plural a template can't hold. */
  hiddenCount: string | ((n: number) => string)
  /** Said before an item's width, which it shows in px. */
  width: string
  /** The rule badges' words, as grid-rules writes them; a partial map keeps the rest. */
  ruleWords: RuleWordsInput
  resetWidth: string
  moveUp: string
  moveDown: string
  resetAll: string
  empty: string
  dragHint: string
  /** Announcement templates accept {name}, and moves also accept {n} and {m}. */
  announceMove?: string
  announceReorder?: string
  announceShow?: string
  announceHide?: string
  announceResetWidth?: string
  announceReset?: string
}

export const DEFAULT_COLUMN_CHOOSER_LABELS: Required<ColumnChooserLabels> = {
  title: "Columns",
  description: "Show, hide, reorder, and size the columns of this grid.",
  search: "Find a column",
  show: "Show",
  frozen: "frozen",
  hidden: "hidden",
  hiddenCount: (n) => `${n.toLocaleString()} hidden`,
  width: "Width",
  ruleWords: {},
  resetWidth: "Reset width",
  moveUp: "Move up",
  moveDown: "Move down",
  resetAll: "Reset all",
  empty: "No column matches.",
  dragHint: "Up and Down move between columns, and Home and End jump to the ends. Drag a column, or hold Alt with an arrow key, to reorder; Alt+Home and Alt+End move to the edge. Space shows or hides a focused column, and Delete resets its width. Frozen columns stay first.",
  announceMove: "{name} moved to {n} of {m}.",
  announceReorder: "{name} reordered.",
  announceShow: "{name} shown.",
  announceHide: "{name} hidden.",
  announceResetWidth: "{name} width reset.",
  announceReset: "Column settings reset.",
}

export interface ColumnChooserProps<T> extends ComponentProps<"div"> {
  columns: ColumnDef<T>[]
  columnState: ColumnState
  onColumnStateChange: (state: ColumnState) => void
  /** The shared defaults restored by reset. Column state remains a complete snapshot. */
  baseState?: ColumnState
  /** Column keys in the collection's render order. Defaults to the search results. */
  presented?: readonly string[]
  /** Rules that name columns, said in words beside the columns they touch: written, or read from saved data. */
  rules?: readonly ReadColumnRule[]
  labels?: Partial<ColumnChooserLabels>
  children: ReactNode
}

/** One column as the chooser lists it. */
export interface ChooserRow<T> {
  column: ColumnDef<T>
  key: string
  name: string
  visible: boolean
  frozen: boolean
  /** The width in force: the state's, else the column's own. */
  width: number
  /** The state holds a width for it. */
  resized: boolean
  /** The rules on this column, each as the grid reads it. */
  rules: ReadColumnRule[]
}

/**
 * The columns in the order the grid shows them, frozen ones first, hidden ones in their place, with
 * the width in force and the rules that name each. A column hidden in its definition is not listed:
 * that is a decision in code, not one for this surface.
 */
export function chooserRows<T>(columns: ColumnDef<T>[], state: ColumnState, rules: readonly ReadColumnRule[] = []): ChooserRow<T>[] {
  const rank = new Map(state.order.map((key, index) => [key, index]))
  const hidden = new Set(state.hidden)
  const ordered = columns
    .filter((column) => !column.hidden)
    .map((column, index) => ({ column, rank: rank.get(column.key) ?? 1e6 + index }))
    .sort((a, b) => a.rank - b.rank)
    .map(({ column }) => column)
  const frozen = ordered.filter((column) => column.frozen === "left")
  const rest = ordered.filter((column) => column.frozen !== "left")
  // Each entry as the grid reads it, once: one that is not an object is no rule, and its names and words are text.
  const read = (Array.isArray(rules) ? rules : []).flatMap((entry) => {
    const rule = readColumnRule(entry)
    return rule ? [rule] : []
  })
  return [...frozen, ...rest].map((column) => ({
    column,
    key: column.key,
    name: columnName(column),
    visible: !hidden.has(column.key),
    frozen: column.frozen === "left",
    width: state.widths[column.key] ?? column.width,
    resized: column.key in state.widths,
    rules: read.filter((rule) => rule.column === column.key),
  }))
}

/** True when the state changes nothing: no order, no widths, nothing hidden. */
export function isDefaultColumnState(state: ColumnState): boolean {
  return state.order.length === 0 && Object.keys(state.widths).length === 0 && state.hidden.length === 0
}

/** The state with one column shown or hidden. */
export function setColumnVisible(state: ColumnState, key: string, visible: boolean): ColumnState {
  const hidden = state.hidden.filter((k) => k !== key)
  return { ...state, hidden: visible ? hidden : [...hidden, key] }
}

/** The state with one column's width forgotten, so the column's own width is in force again. */
export function resetColumnWidth(state: ColumnState, key: string): ColumnState {
  if (!(key in state.widths)) return state
  const widths = { ...state.widths }
  delete widths[key]
  return { ...state, widths }
}

/**
 * The state with one column moved to another's place, the rest shifting to make room. A column stays
 * on its own side of the frozen line: the grid leads with frozen columns whatever the order says, so a
 * move across the line would change nothing and is refused. The full order is written, hidden columns
 * in their places, so a column shown again comes back where it was.
 */
export function moveColumnTo<T>(rows: readonly ChooserRow<T>[], state: ColumnState, key: string, targetKey: string): ColumnState {
  if (key === targetKey) return state
  const from = rows.findIndex((row) => row.key === key)
  const to = rows.findIndex((row) => row.key === targetKey)
  if (from < 0 || to < 0 || rows[from]!.frozen !== rows[to]!.frozen) return state
  const keys = rows.map((row) => row.key)
  keys.splice(from, 1)
  keys.splice(to, 0, key)
  return { ...state, order: keys }
}

/** The state with one column moved one place up (-1) or down (1), on its own side of the frozen line. */
export function moveColumnBy<T>(rows: readonly ChooserRow<T>[], state: ColumnState, key: string, delta: -1 | 1): ColumnState {
  const index = rows.findIndex((row) => row.key === key)
  const target = rows[index + delta]
  if (index < 0 || !target) return state
  return moveColumnTo(rows, state, key, target.key)
}

/** Readings for a column, without accessors tied to the grid's row type. */
export interface ColumnChooserEntry extends Omit<ChooserRow<unknown>, "column" | "rules"> {
  /** The effective width differs from the root's reset baseline. */
  resized: boolean
  rules: { rule: ReadColumnRule; description: string }[]
}

export interface ColumnChooserState {
  rows: readonly ColumnChooserEntry[]
  shown: readonly ColumnChooserEntry[]
  presented: readonly ColumnChooserEntry[]
  query: string
  setQuery: (query: string) => void
  labels: ColumnChooserLabels
  hiddenCount: number
  isDefault: boolean
  reset: () => void
}

interface ChooserContextValue extends ColumnChooserState {
  announcements: ReturnType<typeof createAnnouncements>
  byKey: ReadonlyMap<string, ColumnChooserItemState>
  startDrag: (key: string, event: DragEvent<HTMLDivElement>) => void
  dragOver: (key: string, event: DragEvent<HTMLDivElement>) => void
  drop: (key: string, event: DragEvent<HTMLDivElement>) => void
  endDrag: (key?: string) => void
  focusFallback: () => void
  /** Each item subscribes for its own ownership, so focus moves re-render two items, not the list. */
  registrations: ChooserRegistrations
  registerItem: (key: string, node: HTMLElement | null, optedOut?: boolean, keylessItem?: boolean) => void
  focusStep: (from: string, step: -1 | 1 | "first" | "last") => void
}

interface ChooserRegistrations {
  nodes: Map<string, HTMLElement>
  optedOut: Set<string>
  /** Items that keep every native key: no roving stop, no arrow visits — they own a Tab stop. */
  keyless: Set<string>
  subscribe: (listener: () => void) => () => void
  /** The one presented, registered, coordinated key currently in the tab order. */
  owner: () => string | null
  set: (key: string, node: HTMLElement | null, opted: boolean, keylessItem: boolean) => void
  present: (keys: readonly string[]) => void
  focus: (key: string) => void
  /** Re-resolves against live availability; publishes only when the owner moves. */
  refresh: () => void
  /** The collection's root, the boundary for judging an item's own availability. */
  setRoot: (node: HTMLElement | null) => void
}

const ChooserContext = createContext<ChooserContextValue | null>(null)
const ItemContext = createContext<ColumnChooserItemState | null>(null)
const ControlsContext = createContext<((kind: "visibility" | "resetWidth", element: () => HTMLElement | null) => () => void) | null>(null)

const NO_CONTROL_ELEMENT = () => null

function useChooserContext() {
  const value = useContext(ChooserContext)
  if (!value) throw new Error("ColumnChooser parts must be inside ColumnChooser")
  return value
}

export function useColumnChooser(): ColumnChooserState {
  return useChooserContext()
}

export interface ColumnChooserItemState {
  row: ColumnChooserEntry
  canMoveUp: boolean
  canMoveDown: boolean
  dragging: boolean
  setVisible: (visible: boolean) => void
  move: (delta: -1 | 1) => void
  /** Move to the first or last presented place on the column's side of the frozen line. */
  moveToEdge: (edge: "start" | "end") => void
  resetWidth: () => void
}

export function useColumnChooserItem(): ColumnChooserItemState {
  const value = useContext(ItemContext)
  if (!value) throw new Error("Column readings and controls must be inside ColumnChooserItem")
  return value
}

function assignRef<T>(ref: Ref<T> | undefined, node: T | null) {
  if (typeof ref === "function") return ref(node)
  if (ref) ref.current = node
}

function useChooserRef<T>(localRef: { current: T | null }, forwarded: Ref<T> | undefined) {
  return useCallback((node: T | null) => {
    localRef.current = node
    const cleanup = assignRef(forwarded, node)
    return () => {
      localRef.current = null
      if (typeof cleanup === "function") cleanup()
      else assignRef(forwarded, null)
    }
  }, [localRef, forwarded])
}

/**
 * Unavailable for reasons of its own, judged no higher than the collection's root: a shared
 * ancestor mask hides every item equally and is not the item's fault. Display does not inherit,
 * so each step's own computed display is positional; visibility does inherit, so the item is
 * self-hidden only when the root itself still reads visible.
 */
function unavailableWithin(node: HTMLElement, root: HTMLElement | null) {
  if (!root || !root.contains(node)) return unavailable(node)
  if (node.matches(":disabled") || (node.matches("[aria-disabled=true]") && node.tabIndex < 0)) return true
  const mask = node.closest("[hidden], [aria-hidden=true], [inert]")
  if (mask && mask !== root && root.contains(mask)) return true
  const view = node.ownerDocument.defaultView
  const visibility = view?.getComputedStyle(node).visibility
  const rootVisibility = view?.getComputedStyle(root).visibility
  if ((visibility === "hidden" || visibility === "collapse") && rootVisibility !== visibility) return true
  for (let ancestor: HTMLElement | null = node; ancestor && ancestor !== root; ancestor = ancestor.parentElement) {
    const style = view?.getComputedStyle(ancestor)
    if (style?.display === "none" || style?.contentVisibility === "hidden") return true
  }
  // A closed details hides through the browser's own slotting, which no light ancestor's
  // attribute or style carries, so it is checked by element: content below the root inside a
  // closed details is the item's own fault, except the details' first summary, which stays
  // rendered.
  if (insideClosedDetails(node, root)) return true
  return false
}

/**
 * A disabled fieldset suspends a control unless the control lives in that fieldset's first
 * legend, which HTML leaves enabled; an outer disabled fieldset can still suspend it.
 */
function fieldsetSuspended(el: HTMLElement) {
  for (let fieldset = el.closest("fieldset[disabled]"); fieldset; fieldset = fieldset.parentElement ? fieldset.parentElement.closest("fieldset[disabled]") : null) {
    const legend = Array.prototype.find.call(fieldset.children, (child: Element) => child.tagName === "LEGEND") as Element | undefined
    if (!legend || !legend.contains(el)) return true
  }
  return false
}

function insideClosedDetails(node: HTMLElement, boundary: HTMLElement | null) {
  for (let details = node.closest("details:not([open])"); details && details !== boundary && (!boundary || boundary.contains(details)); details = details.parentElement ? details.parentElement.closest("details:not([open])") : null) {
    const summary = Array.prototype.find.call(details.children, (child: Element) => child.tagName === "SUMMARY") as Element | undefined
    if (!summary || !summary.contains(node)) return true
  }
  return false
}

function unavailable(node: HTMLElement) {
  if (!node.isConnected || node.matches(":disabled") || (node.matches("[aria-disabled=true]") && node.tabIndex < 0) || node.closest("[hidden], [aria-hidden=true], [inert]")) return true
  // Where the platform has it, checkVisibility also sees hiding no ancestor attribute carries,
  // a closed details element's slotted content among it.
  if (typeof node.checkVisibility === "function" && !node.checkVisibility()) return true
  const view = node.ownerDocument.defaultView
  const visibility = view?.getComputedStyle(node).visibility
  if (visibility === "hidden" || visibility === "collapse") return true
  for (let ancestor: HTMLElement | null = node; ancestor; ancestor = ancestor.parentElement) {
    const style = view?.getComputedStyle(ancestor)
    if (style?.display === "none" || style?.contentVisibility === "hidden") return true
  }
  return false
}

function sameSettings<T>(left: readonly ChooserRow<T>[], right: readonly ChooserRow<T>[]) {
  return left.length === right.length && left.every((row, index) => {
    const other = right[index]!
    return row.key === other.key && row.visible === other.visible && Object.is(row.width, other.width)
  })
}

function normalizeSettings<T>(rows: readonly ChooserRow<T>[], state: ColumnState, baseRows: readonly ChooserRow<T>[], baseState: ColumnState): ColumnState {
  const keys = new Set(rows.map((row) => row.key))
  const baseByKey = new Map(baseRows.map((row) => [row.key, row]))
  const order = rows.every((row, index) => row.key === baseRows[index]?.key)
    ? [...new Set([...baseState.order].reverse())].reverse().filter((key) => keys.has(key))
    : rows.map((row) => row.key)
  const hidden = rows.every((row) => row.visible === baseByKey.get(row.key)?.visible)
    ? [...new Set(baseState.hidden)].filter((key) => keys.has(key))
    : [...new Set(state.hidden)].filter((key) => keys.has(key))
  const widths = Object.fromEntries(rows.flatMap((row) => {
    const source = Object.is(row.width, baseByKey.get(row.key)?.width) ? baseState : state
    const width = source.widths[row.key]
    return width === undefined ? [] : [[row.key, width]]
  }))
  return { order, widths, hidden }
}

type ChooserEdit = { kind: "move" | "show" | "hide" | "width"; key: string } | { kind: "reset" }

function createAnnouncements() {
  const empty = { text: "", revision: 0 }
  let snapshot = empty
  const listeners = new Set<() => void>()
  return {
    getSnapshot: () => snapshot,
    getServerSnapshot: () => empty,
    subscribe: (listener: () => void) => {
      listeners.add(listener)
      return () => {
        listeners.delete(listener)
        if (!listeners.size) snapshot = empty
      }
    },
    publish: (text: string) => {
      if (!listeners.size) return
      snapshot = { text, revision: snapshot.revision + 1 }
      listeners.forEach((listener) => listener())
    },
  }
}

function editAnnouncement(edit: ChooserEdit, rows: readonly ColumnChooserEntry[], presented: readonly ColumnChooserEntry[], labels: ColumnChooserLabels) {
  if (edit.kind === "reset") return labels.announceReset ?? DEFAULT_COLUMN_CHOOSER_LABELS.announceReset
  const row = rows.find((row) => row.key === edit.key)
  if (!row) return ""
  const index = presented.findIndex((row) => row.key === edit.key)
  const label = edit.kind === "move" ? (index < 0 ? "announceReorder" : "announceMove") : edit.kind === "show" ? "announceShow" : edit.kind === "hide" ? "announceHide" : "announceResetWidth"
  const template = labels[label] ?? DEFAULT_COLUMN_CHOOSER_LABELS[label]
  return template.replace(/\{(name|n|m)\}/g, (_, token: string) => token === "name" ? row.name : String(token === "n" ? index + 1 : presented.length))
}

export function ColumnChooser<T>({ columns, columnState, onColumnStateChange, baseState = EMPTY_COLUMN_STATE, presented, rules, labels: labelsProp, children, className, ref, role = "group", tabIndex = -1, "aria-label": ariaLabel, onFocusCapture, onBlurCapture, ...props }: ColumnChooserProps<T>) {
  const labels = { ...DEFAULT_COLUMN_CHOOSER_LABELS, ...defined(labelsProp) }
  const ruleWords = labels.ruleWords
  // Definition-hidden columns keep their settings if application policy exposes them later.
  const knownColumns = useMemo(() => columns.map((column) => column.hidden ? { ...column, hidden: false } : column), [columns])
  const stateRows = useMemo(() => chooserRows(knownColumns, columnState, rules), [knownColumns, columnState, rules])
  const baseRows = useMemo(() => chooserRows(knownColumns, baseState), [knownColumns, baseState])
  const rows = useMemo(() => {
    const editable = new Set(columns.filter((column) => !column.hidden).map((column) => column.key))
    const baseByKey = new Map(baseRows.map((row) => [row.key, row]))
    return stateRows.filter((row) => editable.has(row.key)).map(({ column, rules, ...row }) => ({ ...row, resized: !Object.is(row.width, baseByKey.get(row.key)?.width), rules: rules.map((rule) => ({ rule, description: describeRule(rule, [column], "highlight", ruleWords) })) }))
  }, [columns, stateRows, baseRows, ruleWords])
  const [query, setQuery] = useState("")
  const [dragging, setDragging] = useState<string | null>(null)
  const drag = useRef<{ key: string; frozen: boolean } | null>(null)
  const id = useId()
  const dragType = `application/x-tradecn-column-${id.replace(/[^a-z0-9]/gi, "").toLowerCase()}`
  const root = useRef<HTMLDivElement>(null)
  const rootRef = useChooserRef(root, ref)
  const focused = useRef<HTMLElement | null>(null)
  const q = query.trim().toLowerCase()
  const shown = q ? rows.filter((row) => row.name.toLowerCase().includes(q) || row.key.toLowerCase().includes(q)) : rows
  const rowByKey = new Map(rows.map((row) => [row.key, row]))
  const presentedRows = [...new Set(presented ?? shown.map((row) => row.key))].flatMap((key) => {
    const row = rowByKey.get(key)
    return row ? [row] : []
  })
  const neighbors = new Map<string, { up?: string; down?: string }>()
  for (const frozen of [true, false]) {
    const group = presentedRows.filter((row) => row.frozen === frozen)
    group.forEach((row, index) => neighbors.set(row.key, { up: group[index - 1]?.key, down: group[index + 1]?.key }))
  }
  const hiddenCount = rows.filter((row) => !row.visible).length
  const isDefault = sameSettings(stateRows, baseRows)
  // One presented item carries the tab stop; arrows move between items (roving focus). Items
  // register their nodes, and whether an explicit tabIndex opted them out, through a store each
  // item subscribes to for its own ownership alone, so registration, search, and focus moves
  // re-render the items they touch instead of the collection.
  const [registrations] = useState<ChooserRegistrations>(() => {
    const nodes = new Map<string, HTMLElement>()
    const optedOut = new Set<string>()
    const keyless = new Set<string>()
    const listeners = new Set<() => void>()
    let presented: readonly string[] = []
    let active: string | null = null
    let owner: string | null = null
    let rootEl: HTMLElement | null = null
    // The stop stays on the focused coordinated item while it is presented and registered, else
    // it falls to the first presented key with a usable registered item.
    const resolve = () => {
      const usable = (key: string) => {
        const node = nodes.get(key)
        return node !== undefined && !optedOut.has(key) && !unavailable(node)
      }
      // When nothing is usable — an ancestor masks every item — the stop falls back to an item
      // that is clean by its own fault, judged no higher than the collection's root: a standing
      // owner first, so a shared mask never moves the stop, then the focused item, then the
      // first presented one. Unreachable while hidden, tabbable the moment the mask lifts.
      const clean = (key: string) => {
        const node = nodes.get(key)
        return node !== undefined && !optedOut.has(key) && !unavailableWithin(node, rootEl)
      }
      // A registered coordinated item always leaves one stop standing: usable first, then clean
      // by its own fault, then — when a mask inside the root hides everything — any registered
      // item at all, the standing owner preferred at every tier.
      const registered = (key: string) => nodes.has(key) && !optedOut.has(key)
      const next = (active !== null && presented.includes(active) && usable(active) ? active : presented.find(usable))
        ?? (owner !== null && presented.includes(owner) && clean(owner) ? owner : undefined)
        ?? (active !== null && presented.includes(active) && clean(active) ? active : presented.find(clean))
        ?? (owner !== null && presented.includes(owner) && registered(owner) ? owner : undefined)
        ?? presented.find(registered)
        ?? null
      if (next === owner) return false
      owner = next
      return true
    }
    const publish = () => {
      for (const listener of listeners) listener()
    }
    return {
      nodes,
      optedOut,
      keyless,
      subscribe: (listener: () => void) => {
        listeners.add(listener)
        return () => void listeners.delete(listener)
      },
      owner: () => owner,
      set(key, node, opted, keylessItem) {
        if (node) {
          if (nodes.get(key) === node && optedOut.has(key) === opted && keyless.has(key) === keylessItem) return
          nodes.set(key, node)
          if (opted) optedOut.add(key)
          else optedOut.delete(key)
          if (keylessItem) keyless.add(key)
          else keyless.delete(key)
        } else {
          if (!nodes.has(key)) return
          nodes.delete(key)
          optedOut.delete(key)
          keyless.delete(key)
        }
        if (resolve()) publish()
      },
      present(keys) {
        presented = keys
        if (resolve()) publish()
      },
      focus(key) {
        active = key
        if (resolve()) publish()
      },
      refresh() {
        if (resolve()) publish()
      },
      setRoot(node) {
        rootEl = node
        if (resolve()) publish()
      },
    }
  })
  // The root is the boundary for judging an item's own availability.
  useLayoutEffect(() => {
    registrations.setRoot(root.current)
    return () => registrations.setRoot(null)
  }, [registrations])
  // A change inside the root can hide the owner without any commit — a collapsible kept
  // mounted, a class toggle, a details element. The root watches its own subtree and asks the
  // store to re-resolve; publish-on-change keeps it from looping, and the cost is scoped to
  // this collection's markup.
  useEffect(() => {
    const node = root.current
    if (!node) return
    const observer = new MutationObserver(() => registrations.refresh())
    observer.observe(node, { attributes: true, subtree: true, attributeFilter: ["hidden", "inert", "aria-hidden", "open", "class", "style"] })
    return () => observer.disconnect()
  }, [registrations])
  // Presentation order reaches the store after each commit; the owner moves only when it must.
  useLayoutEffect(() => {
    registrations.present(presentedRows.map((row) => row.key))
  })
  // Again after paint: a modal elsewhere can hold the page aria-hidden through the mount commit,
  // which reads every item as unusable; by now the transient is gone and the items subscribe.
  useEffect(() => {
    registrations.present(presentedRows.map((row) => row.key))
  })
  const registerItem = useCallback((key: string, node: HTMLElement | null, optedOut = false, keylessItem = false) => registrations.set(key, node, optedOut, keylessItem), [registrations])
  const focusStep = (from: string, step: -1 | 1 | "first" | "last") => {
    const keys = presentedRows.map((row) => row.key)
    const index = keys.indexOf(from)
    // Scan past unregistered or unavailable items: a hidden column between two live ones must
    // not wall off arrows, and Home and End walk inward from their edge to the first usable item.
    const usable = (key: string | undefined) => {
      if (key === undefined || registrations.keyless.has(key)) return null
      const node = registrations.nodes.get(key)
      return node && !unavailable(node) ? { key, node } : null
    }
    let found: { key: string; node: HTMLElement } | null = null
    if (step === "first" || step === "last") {
      for (const key of step === "first" ? keys : [...keys].reverse()) if ((found = usable(key))) break
    } else if (index >= 0) {
      for (let i = index + step; i >= 0 && i < keys.length; i += step) if ((found = usable(keys[i]))) break
    }
    if (!found || found.key === from) return
    // Navigation can visit an opted-out item, but the roving stop stays with a coordinated one.
    if (!registrations.optedOut.has(found.key)) registrations.focus(found.key)
    found.node.focus()
  }
  const [announcements] = useState(createAnnouncements)
  const committed = useRef({ state: columnState, rows: stateRows })
  const pending = useRef<{ state: ColumnState; before: ChooserRow<T>[]; rows: ChooserRow<T>[]; edit: ChooserEdit } | null>(null)
  useLayoutEffect(() => {
    const previous = committed.current
    committed.current = { state: columnState, rows: stateRows }
    if (sameSettings(previous.rows, stateRows)) return
    const proposed = pending.current
    // A child layout effect can submit the next edit before this root processes the current commit.
    if (proposed?.state === columnState && sameSettings(proposed.before, stateRows)) return
    pending.current = null
    if (previous.state !== columnState && proposed && sameSettings(proposed.rows, stateRows)) {
      const message = editAnnouncement(proposed.edit, rows, presentedRows, labels)
      if (message) announcements.publish(message)
    }
  })
  const focusFallback = useCallback(() => {
    const node = root.current
    if (!node?.isConnected) return
    const search = [...node.querySelectorAll<HTMLInputElement>("[data-column-search]:not(:disabled):not([hidden])")].find(input => input.closest("[data-slot=tradecn-column-chooser]") === node)
    const target = search && !unavailable(search) ? search : node
    target.focus()
  }, [])
  const endDrag = useCallback((key?: string) => {
    if (!drag.current || (key !== undefined && drag.current.key !== key)) return
    drag.current = null
    setDragging(null)
  }, [setDragging])
  useLayoutEffect(() => {
    const current = drag.current
    if (current && !rows.some((row) => row.key === current.key && row.frozen === current.frozen)) endDrag(current.key)
    const node = root.current
    const previous = focused.current
    if (node && previous && unavailable(previous) && (node.ownerDocument.activeElement === previous || node.ownerDocument.activeElement === node.ownerDocument.body)) focusFallback()
  })
  const change = (next: ColumnState, edit: ChooserEdit) => {
    if (next === columnState) return
    const nextRows = chooserRows(knownColumns, next)
    if (sameSettings(stateRows, nextRows)) return
    pending.current = { state: columnState, before: stateRows, rows: nextRows, edit }
    onColumnStateChange(normalizeSettings(nextRows, next, baseRows, baseState))
  }
  const byKey = new Map(rows.map((row): [string, ColumnChooserItemState] => [row.key, {
    row,
    canMoveUp: neighbors.get(row.key)?.up !== undefined,
    canMoveDown: neighbors.get(row.key)?.down !== undefined,
    dragging: dragging === row.key,
    setVisible: (visible) => change(setColumnVisible(columnState, row.key, visible), { kind: visible ? "show" : "hide", key: row.key }),
    move: (delta) => {
      const target = neighbors.get(row.key)?.[delta === -1 ? "up" : "down"]
      if (target !== undefined) change(moveColumnTo(stateRows, columnState, row.key, target), { kind: "move", key: row.key })
    },
    moveToEdge: (edge) => {
      if (!presentedRows.some((presentedRow) => presentedRow.key === row.key)) return
      const side = presentedRows.filter((presentedRow) => presentedRow.frozen === row.frozen)
      const target = edge === "start" ? side[0] : side[side.length - 1]
      if (target && target.key !== row.key) change(moveColumnTo(stateRows, columnState, row.key, target.key), { kind: "move", key: row.key })
    },
    resetWidth: () => {
      const width = baseState.widths[row.key]
      change(width === undefined ? resetColumnWidth(columnState, row.key) : { ...columnState, widths: { ...columnState.widths, [row.key]: width } }, { kind: "width", key: row.key })
    },
  }]))
  const accepts = (key: string, event: DragEvent<HTMLDivElement>) => {
    const current = drag.current
    const from = current && byKey.get(current.key)?.row
    const target = byKey.get(key)?.row
    return !!(current && from && target && current.key !== key && from.frozen === current.frozen && from.frozen === target.frozen && event.dataTransfer.types.includes(dragType))
  }
  return <ChooserContext value={{
    rows, shown, presented: presentedRows, query, setQuery, labels, hiddenCount, isDefault, byKey, focusFallback, endDrag, announcements,
    registrations, registerItem, focusStep,
    reset: () => change(baseState, { kind: "reset" }),
    startDrag: (key, event) => {
      const row = byKey.get(key)?.row
      if (!row) return
      event.dataTransfer.setData(dragType, key)
      event.dataTransfer.setData("text/plain", key)
      event.dataTransfer.effectAllowed = "move"
      drag.current = { key, frozen: row.frozen }
      setDragging(key)
    },
    dragOver: (key, event) => {
      if (!accepts(key, event)) return
      event.preventDefault()
      event.dataTransfer.dropEffect = "move"
    },
    drop: (key, event) => {
      const current = drag.current
      const accepted = accepts(key, event)
      if (current) endDrag(current.key)
      if (!accepted || !current) return
      event.preventDefault()
      change(moveColumnTo(stateRows, columnState, current.key, key), { kind: "move", key: current.key })
    },
  }}>
    <div role={role} tabIndex={tabIndex} aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : labels.title)} data-hidden={hiddenCount} className={cn("flex min-w-0 flex-col gap-2 text-xs lining-nums tabular-nums", className)} {...props} data-slot="tradecn-column-chooser" ref={rootRef} onFocusCapture={(event) => {
      onFocusCapture?.(event)
      if (event.currentTarget.contains(event.target) && event.target.closest("[data-slot=tradecn-column-chooser]") === event.currentTarget) focused.current = event.target
    }} onBlurCapture={(event) => {
      onBlurCapture?.(event)
      if (!event.currentTarget.contains(event.relatedTarget) && (event.relatedTarget || !unavailable(event.target))) focused.current = null
    }}>{children}</div>
  </ChooserContext>
}

/** Mount once per chooser. Announces committed states matching pending edits; unrelated updates stay silent. */
export function ColumnChooserAnnouncer({ className, ...props }: Omit<ComponentProps<"span">, "children">) {
  const { announcements } = useChooserContext()
  const message = useSyncExternalStore(announcements.subscribe, announcements.getSnapshot, announcements.getServerSnapshot)
  return <span role="status" aria-live="polite" aria-atomic="true" className={cn("sr-only", className)} {...props}>{message.text && <span key={message.revision}>{message.text}</span>}</span>
}

export function ColumnChooserSearch({ onChange, className, "aria-label": ariaLabel, ...props }: Omit<ComponentProps<typeof Input>, "value" | "defaultValue">) {
  const { query, setQuery, labels } = useColumnChooser()
  return <Input aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : labels.search)} placeholder={labels.search} spellCheck={false} autoComplete="off" data-column-search="" className={cn("h-7 max-w-56 text-xs md:text-xs", className)} {...props} value={query} onChange={(event) => {
    onChange?.(event)
    if (!event.defaultPrevented) setQuery(event.target.value)
  }} />
}

export function ColumnChooserHiddenCount({ className, ...props }: Omit<ComponentProps<"span">, "children">) {
  const { hiddenCount, labels } = useColumnChooser()
  return <span data-column-hidden-count={hiddenCount} className={cn("text-muted-foreground", NUMERIC_CLASS, className)} {...props}>{typeof labels.hiddenCount === "function" ? labels.hiddenCount(hiddenCount) : labels.hiddenCount.replace("{n}", hiddenCount.toLocaleString())}</span>
}

type ActionProps = Omit<ComponentProps<typeof Button>, "children"> & { children: ReactNode }

export function ColumnChooserResetAll({ type = "button", variant = "outline", size, disabled, onClick, className, ...props }: ActionProps) {
  const { isDefault, reset } = useColumnChooser()
  return <Button type={type} variant={variant} size={size === undefined ? "sm" : size} className={cn(size === undefined && "h-7 px-2 text-xs", className)} {...props} disabled={disabled || isDefault} onClick={(event) => {
    onClick?.(event)
    if (!event.defaultPrevented) reset()
  }} />
}

export interface ColumnChooserItemProps extends ComponentProps<"div"> {
  columnKey: string
  children: ReactNode
}

export function ColumnChooserItem({ columnKey, ...props }: ColumnChooserItemProps) {
  const { byKey } = useChooserContext()
  const item = byKey.get(columnKey)
  return item ? <ChooserItem key={columnKey} item={item} {...props} /> : null
}

function isElement(target: EventTarget): target is Element {
  // Popouts can contain nodes created in either window, even after adoption back to the page.
  return "nodeType" in target && target.nodeType === 1
}

function ownsItemEvent(event: { target: EventTarget; currentTarget: HTMLDivElement }) {
  return isElement(event.target) && event.currentTarget.contains(event.target) && event.target.closest("[data-slot=tradecn-column-chooser-item]") === event.currentTarget && event.target.closest("[data-slot=tradecn-column-chooser]") === event.currentTarget.closest("[data-slot=tradecn-column-chooser]")
}

// Widget roles whose keyboard model uses the arrows, per the ARIA authoring practices. A separator
// only receives keys when it is focusable, and a focusable separator is a splitter that owns them.
const ARROW_OWNING_ROLES = new Set("application columnheader combobox grid gridcell listbox menu menubar menuitem menuitemcheckbox menuitemradio option radio radiogroup row rowheader scrollbar searchbox separator slider spinbutton tab tablist textbox toolbar tree treegrid treeitem".split(" "))

// Controls whose own keys matter: carets, selects, radios, sliders, and ARIA widgets built on
// generic elements. Any recognized arrow-owning token counts, a conservative reading of fallback
// role lists. A checkbox or plain button owns no arrows. The walk checks the item itself last and
// stays inside it, so an editable item, or one given an arrow-owning role, keeps its own keys.
function arrowOwningTarget(target: EventTarget, item: HTMLElement) {
  if (!isElement(target)) return false
  for (let node: Element | null = target; node; node = node.parentElement) {
    if (node.matches('input:not([type="checkbox"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, [contenteditable]:not([contenteditable="false"])')) return true
    const role = node.getAttribute("role")
    if (role && role.toLowerCase().split(/[\t\n\f\r ]+/).some((token) => ARROW_OWNING_ROLES.has(token))) return true
    if (node === item) break
  }
  return false
}

function ChooserItem({ item, className, ref, role = "group", tabIndex, draggable = true, "aria-label": ariaLabel, onKeyDown, onDragStart, onDragOver, onDrop, onDragEnd, onFocusCapture, onBlurCapture, ...props }: ComponentProps<"div"> & { item: ColumnChooserItemState }) {
  const { row, dragging, move, moveToEdge, setVisible, resetWidth } = item
  const { labels, focusFallback, startDrag, dragOver, drop, endDrag, registrations, registerItem, focusStep } = useChooserContext()
  const isOwner = useSyncExternalStore(registrations.subscribe, () => registrations.owner() === row.key, () => false)
  // An item made editable, or given an arrow-owning role of its own, keeps every native key:
  // the handler bows out, the metadata advertises nothing, the roving model opts it out, and
  // it owns a Tab stop of its own, since no arrow can reach it.
  const itemKeyless = (props.contentEditable !== undefined && props.contentEditable !== false && props.contentEditable !== "false") || (role ?? "").toLowerCase().split(/[\t\n\f\r ]+/).some((token) => ARROW_OWNING_ROLES.has(token))
  const [controls, setControls] = useState<{ visibility: { element: () => HTMLElement | null }[]; resetWidth: { element: () => HTMLElement | null }[] }>({ visibility: [], resetWidth: [] })
  const registerControl = useCallback((kind: "visibility" | "resetWidth", element: () => HTMLElement | null) => {
    // Each registration is its own token: two getter-less declarations share one element
    // function, and removing one must never remove the other.
    const token = { element }
    setControls((current) => ({ ...current, [kind]: [...current[kind], token] }))
    return () => setControls((current) => ({ ...current, [kind]: current[kind].filter((entry) => entry !== token) }))
  }, [])
  // Effectively enabled at press time: a declared control can still sit in a disabled fieldset,
  // where HTML leaves the first legend's controls enabled; a getter-less declaration counts as
  // live.
  const liveControl = (kind: "visibility" | "resetWidth") => controls[kind].some((entry) => {
    const el = entry.element()
    return !el || !(el.matches(":disabled") || fieldsetSuspended(el))
  })
  // The command runs through the live control itself when one is in the DOM: a click carries
  // every veto — onClick preventDefault, a checkbox's cancel, readOnly — exactly as a pointer
  // does. Only a getter-less public declaration falls back to the direct call.
  const runControl = (kind: "visibility" | "resetWidth", direct: () => void) => {
    for (const entry of controls[kind]) {
      const el = entry.element()
      if (el && !(el.matches(":disabled") || fieldsetSuspended(el))) {
        el.click()
        return
      }
    }
    direct()
  }
  const root = useRef<HTMLDivElement>(null)
  const rootRef = useChooserRef(root, ref)
  // Registration is a layout effect, not part of the ref: an inline caller ref changes identity
  // every render, and re-registering on each change would invalidate the provider's subscription
  // in a loop.
  useLayoutEffect(() => {
    registerItem(row.key, root.current, tabIndex !== undefined || itemKeyless, itemKeyless)
    return () => registerItem(row.key, null)
  }, [row.key, registerItem, tabIndex, itemKeyless])
  // Any commit of an item can change its availability — hidden, inert, aria-hidden, a class or
  // style that removes it — so every one re-resolves; the store publishes only when the owner
  // actually moves, which keeps re-renders from looping.
  useLayoutEffect(() => {
    registrations.refresh()
  })
  const focused = useRef<HTMLElement | null>(null)
  useLayoutEffect(() => {
    const node = root.current
    const previous = focused.current
    if (node && previous && unavailable(previous) && (node.ownerDocument.activeElement === previous || node.ownerDocument.activeElement === node.ownerDocument.body)) node.focus()
    // Keyed DOM moves can return focus to body without removing the focused control.
    else if (node && previous && node.contains(previous) && node.ownerDocument.activeElement === node.ownerDocument.body) previous.focus()
  })
  useLayoutEffect(() => {
    const node = root.current
    return () => {
      endDrag(row.key)
      if (node?.contains(node.ownerDocument.activeElement)) {
        const ownerDocument = node.ownerDocument
        queueMicrotask(() => {
          if (!node.isConnected && ownerDocument.activeElement === ownerDocument.body) focusFallback()
        })
      }
    }
  }, [row.key, endDrag, focusFallback])
  return <ItemContext value={item}><ControlsContext value={registerControl}><div role={role} tabIndex={tabIndex ?? (itemKeyless || isOwner ? 0 : -1)} draggable={draggable} aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : row.name)} aria-description={row.visible ? undefined : labels.hidden} aria-keyshortcuts={itemKeyless ? undefined : `${controls.visibility.length ? "Space " : ""}Alt+ArrowUp Alt+ArrowDown Alt+Home Alt+End${controls.resetWidth.length ? " Delete Backspace" : ""}`} data-column={row.key} data-visible={row.visible ? "true" : "false"} data-frozen={row.frozen || undefined} data-dragging={dragging || undefined} className={cn("group flex min-w-0 items-center gap-2 rounded-sm border border-transparent px-1.5 py-1 outline-none focus-visible:border-foreground data-[dragging]:border-dashed data-[dragging]:border-foreground", !row.visible && "text-muted-foreground", className)} {...props} data-slot="tradecn-column-chooser-item" ref={rootRef} onFocusCapture={(event) => {
    onFocusCapture?.(event)
    if (ownsItemEvent(event)) {
      focused.current = event.target
      // An explicitly opted-out item never takes the roving stop, even by pointer focus.
      if (tabIndex === undefined && !itemKeyless) registrations.focus(row.key)
    }
  }} onBlurCapture={(event) => {
    onBlurCapture?.(event)
    if (!event.currentTarget.contains(event.relatedTarget) && (event.relatedTarget || !unavailable(event.target))) focused.current = null
  }} onKeyDown={(event) => {
    onKeyDown?.(event)
    if (!ownsItemEvent(event) || event.defaultPrevented || event.nativeEvent.isComposing || event.ctrlKey || event.metaKey) return
    // A control that owns its arrows keeps every arrow chord: word movement, combobox opening, slider steps.
    if (arrowOwningTarget(event.target, event.currentTarget)) return
    if (event.altKey) {
      if (event.shiftKey || (event.key !== "ArrowUp" && event.key !== "ArrowDown" && event.key !== "Home" && event.key !== "End")) return
      event.preventDefault()
      event.stopPropagation()
      if (event.key === "ArrowUp" || event.key === "ArrowDown") move(event.key === "ArrowUp" ? -1 : 1)
      else moveToEdge(event.key === "Home" ? "start" : "end")
      return
    }
    if (event.shiftKey) return
    if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Home" || event.key === "End") {
      event.preventDefault()
      event.stopPropagation()
      focusStep(row.key, event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : event.key === "Home" ? "first" : "last")
      return
    }
    if (event.target !== event.currentTarget) return
    // Space and Delete run only where the layout renders the matching control, so a visible-only
    // list cannot hide a column it offers no way to bring back, and a held key toggles once.
    if (event.key === " " && controls.visibility.length && liveControl("visibility")) {
      // Every handled Space cancels, or held repeats scroll the page; the toggle runs once.
      // A control that is effectively disabled where it stands never claims the key at all.
      event.preventDefault()
      event.stopPropagation()
      if (!event.repeat) runControl("visibility", () => setVisible(!row.visible))
    } else if ((event.key === "Delete" || event.key === "Backspace") && controls.resetWidth.length && !event.repeat && row.resized && liveControl("resetWidth")) {
      event.preventDefault()
      event.stopPropagation()
      runControl("resetWidth", resetWidth)
    }
  }} onDragStart={(event) => {
    onDragStart?.(event)
    if (ownsItemEvent(event) && !event.defaultPrevented) startDrag(row.key, event)
  }} onDragOver={(event) => {
    onDragOver?.(event)
    if (ownsItemEvent(event) && !event.defaultPrevented) dragOver(row.key, event)
  }} onDrop={(event) => {
    onDrop?.(event)
    if (!ownsItemEvent(event)) return
    if (!event.defaultPrevented) drop(row.key, event)
    else endDrag()
  }} onDragEnd={(event) => {
    onDragEnd?.(event)
    if (ownsItemEvent(event)) endDrag(row.key)
  }} /></ControlsContext></ItemContext>
}

/**
 * Declares that this item renders a control for one of the item-level keys, so Space or Delete
 * stays live where a caller-owned control covers the command. A disabled control declares
 * nothing. Pass `element` so a state only the DOM knows — a disabled enclosing fieldset —
 * suspends the key while the declaration stands; without one the command counts as enabled.
 */
export function useColumnChooserCommand(kind: "visibility" | "resetWidth", enabled = true, element?: () => HTMLElement | null) {
  const registerControl = useContext(ControlsContext)
  useLayoutEffect(() => (enabled ? registerControl?.(kind, element ?? NO_CONTROL_ELEMENT) : undefined), [registerControl, kind, enabled, element])
}

export function ColumnChooserVisibility({ onClick, onCheckedChange, tabIndex = -1, ref, "aria-label": ariaLabel, ...props }: Omit<ComponentProps<typeof Checkbox>, "checked" | "defaultChecked" | "indeterminate">) {
  const { row, setVisible } = useColumnChooserItem()
  const { labels } = useColumnChooser()
  const local = useRef<HTMLElement | null>(null)
  const mergedRef = useChooserRef(local, ref)
  const element = useCallback(() => local.current, [])
  // Presence tells the item Space has a rendered counterpart, so the key runs only here — a
  // read-only checkbox rejects changes from everywhere, the keyboard included. Read untyped:
  // one base's checkbox types carry readOnly and the other's do not.
  const readOnly = "readOnly" in props && Boolean((props as { readOnly?: unknown }).readOnly)
  useColumnChooserCommand("visibility", !props.disabled && !readOnly, element)
  return <Checkbox ref={mergedRef} tabIndex={tabIndex} aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : `${labels.show} ${row.name}`)} {...props} checked={row.visible} onClick={(event) => {
    onClick?.(event)
    // Some built-ins separate browser cancellation from their own click handler.
    if (event.defaultPrevented && "preventBaseUIHandler" in event && typeof event.preventBaseUIHandler === "function") event.preventBaseUIHandler()
  }} onCheckedChange={(...args) => {
    onCheckedChange?.(...args)
    const details: unknown = args.slice(1)[0]
    if (details && typeof details === "object" && "isCanceled" in details && details.isCanceled) return
    setVisible(args[0] === true)
  }} />
}

export function ColumnChooserName({ className, ...props }: Omit<ComponentProps<"span">, "children">) {
  const { row } = useColumnChooserItem()
  return <span title={row.name} className={cn("min-w-20 flex-1 truncate font-medium", className)} {...props}>{row.name}</span>
}

export function ColumnChooserFrozen({ className, ...props }: Omit<ComponentProps<typeof Badge>, "children">) {
  const { row } = useColumnChooserItem()
  const { labels } = useColumnChooser()
  return row.frozen ? <Badge variant="outline" data-column-frozen className={cn("h-4 px-1.5 text-xs", className)} {...props}>{labels.frozen}</Badge> : null
}

export function ColumnChooserRule({ ruleIndex, className, ...props }: Omit<ComponentProps<typeof Badge>, "children"> & { ruleIndex: number }) {
  const { row } = useColumnChooserItem()
  const reading = row.rules[ruleIndex]
  if (!reading) return null
  const { rule, description } = reading
  return <Badge variant="outline" data-column-rule={rule.id} title={description} className={cn("h-4 min-w-0 shrink px-1.5 text-xs", (RULE_TONES as readonly string[]).includes(rule.tone ?? "") && RULE_TONE_CLASS[rule.tone as RuleTone], className)} {...props}><span className="min-w-0 truncate">{rule.label?.trim() || description}</span></Badge>
}

export function ColumnChooserWidth({ className, "aria-label": ariaLabel, ...props }: Omit<ComponentProps<"span">, "children">) {
  const { row } = useColumnChooserItem()
  const { labels } = useColumnChooser()
  // Words in the span rather than a label on it: a screen reader can pass over a label on an element with no role.
  return <span aria-label={ariaLabel} data-column-width={row.width} className={cn("w-14 shrink-0 text-right text-muted-foreground", NUMERIC_CLASS, className)} {...props}>{ariaLabel || props["aria-labelledby"] ? null : <span className="sr-only">{labels.width} </span>}{row.width} px</span>
}

export function ColumnChooserResetWidth({ type = "button", variant = "ghost", size, disabled, onClick, className, tabIndex = -1, ref, "aria-label": ariaLabel, ...props }: ActionProps) {
  const { row, resetWidth } = useColumnChooserItem()
  const { labels } = useColumnChooser()
  const local = useRef<HTMLElement | null>(null)
  const mergedRef = useChooserRef(local, ref)
  const element = useCallback(() => local.current, [])
  // Presence tells the item Delete has a rendered counterpart, so the key runs only here — and
  // the control renders disabled for an unresized column, so the declaration follows both.
  useColumnChooserCommand("resetWidth", !disabled && row.resized, element)
  return <Button ref={mergedRef} type={type} variant={variant} size={size === undefined ? "sm" : size} aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : `${labels.resetWidth}: ${row.name}`)} aria-hidden={!row.resized || undefined} tabIndex={tabIndex} className={cn(size === undefined && "h-6 px-1.5 text-xs", !row.resized && "invisible", className)} {...props} disabled={disabled || !row.resized} onClick={(event) => {
    onClick?.(event)
    if (!event.defaultPrevented) resetWidth()
  }} />
}

export function ColumnChooserMove({ direction, type = "button", variant = "ghost", size, disabled, onClick, className, tabIndex = -1, "aria-label": ariaLabel, ...props }: ActionProps & { direction: "up" | "down" }) {
  const { row, canMoveUp, canMoveDown, move } = useColumnChooserItem()
  const { labels } = useColumnChooser()
  return <Button type={type} variant={variant} size={size === undefined ? "sm" : size} aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : `${direction === "up" ? labels.moveUp : labels.moveDown}: ${row.name}`)} tabIndex={tabIndex} className={cn(size === undefined && "h-6 px-1.5 text-xs", className)} {...props} disabled={disabled || !(direction === "up" ? canMoveUp : canMoveDown)} onClick={(event) => {
    onClick?.(event)
    if (!event.defaultPrevented) move(direction === "up" ? -1 : 1)
  }} />
}

import { defaultRangeExtractor, useVirtualizer, type Range } from "@tanstack/react-virtual"
import { cn } from "cn"
import {
  Fragment,
  memo,
  useCallback,
  useEffect,
  useId,
  useInsertionEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
  useSyncExternalStore,
  type CSSProperties,
  type KeyboardEvent,
  type MouseEvent,
  type PointerEvent,
  type ReactNode,
  type RefObject,
  type SyntheticEvent,
  type UIEvent,
} from "react"
import { Checkbox } from "@/components/ui/checkbox"
import { ContextMenu, ContextMenuContent, ContextMenuTrigger } from "@/components/ui/context-menu"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { createFlashMemory, playFlash, useFlash, type FlashMemory } from "@/hooks/use-flash"
import { useRow, useRowIds, useStoreMeta, useView } from "@/hooks/use-row-store"
import { MONO_NUMERIC_CLASS, NULL_TOKEN, NUMERIC_CLASS } from "@/lib/format"
import { applyRules, columnName, compareDirected, compareValues, compileComparator, compileFilter, type AppliedRules, type ReadGridRules, type RuleDecoration } from "@/lib/grid-rules"
import type { RowId, RowStore, RowView } from "@/lib/row-store"

// A virtualized grid fed by a RowStore one row at a time.
//
// Rows subscribe to their own store entry, so a delta to one row re-renders one row; header, body,
// and every other row stay put. Numeric cells flash by direction through a shared flash memory keyed
// by row and column, so a row that scrolls out and back resumes its flash. Rows are positioned by
// TanStack Virtual with a fixed height, which makes "keep the viewport pinned while rows arrive
// above" exact arithmetic instead of measurement.
//
// Markup is a div grid with ARIA grid roles rather than a <table>: transform-positioned rows and
// per-cell sticky frozen columns do not survive <tbody>.

export interface ColumnDef<T> {
  key: string
  header: ReactNode
  /**
   * The column's name in words, for its header's name, its menu and resize handle, and the column chooser. By default
   * the header when that is a string; give one to a column whose header is an icon or other markup.
   */
  title?: string
  width: number
  minWidth?: number
  align?: "left" | "right" | "center"
  frozen?: "left"
  sortable?: boolean
  hidden?: boolean
  /** The value the column shows; also what sorting and flash direction compare. */
  accessor: (row: T) => unknown
  /** Text for the value. Defaults to String(value), NULL_TOKEN for null. */
  format?: (value: unknown, row: T) => string
  /** Custom cell content. The cell still flashes by `accessor` value. `edit` is there when the column is editable and the grid has `onEdit`. */
  cell?: (ctx: { row: T; value: unknown; rowId: RowId; edit?: CellEditHandle }) => ReactNode
  /** Flash on change. Defaults to the preset's variant for numeric columns and off otherwise. */
  flash?: false | "fill" | "ring"
  /** Right-aligned, lining tabular figures in the numeric family, flashes by default. */
  numeric?: boolean
  /** The family a numeric cell sets in: `numeric` (the sans, digits at one width) by default, or `mono` for fraction quotes, so digits and the dash take one width; a tailed quote still runs longer than an untailed one. */
  font?: "numeric" | "mono"
  /** Reads a value typed into a rule in this column's own format (`99-16+` on a 32nds column). Default: a number for a numeric column, the text itself otherwise. */
  parse?: (text: string) => unknown
  /** Lets the cell be edited in place, when the grid has `onEdit`. An edit is a command the server answers, never a local truth. */
  edit?: CellEdit<T>
}

export interface ColumnState {
  order: string[]
  widths: Record<string, number>
  hidden: string[]
}

/** What stops an edit, in a sentence: what `parse` or `validate` return instead of a value. */
export interface EditProblem {
  problem: string
}

export function editProblem(problem: string): EditProblem {
  return { problem }
}

export function isEditProblem(value: unknown): value is EditProblem {
  return typeof value === "object" && value !== null && Object.keys(value).length === 1 && typeof (value as EditProblem).problem === "string"
}

/** How a commit came: the editor's Enter or Tab, leaving the editor, or a toggle or cell control committing a value; whether the key was held; and which opening of the editor it came from. */
export interface EditCommit {
  via: "enter" | "tab" | "blur" | "value"
  /** True for a held key's repeats: Enter or Tab in an editor, or a cell control's commit that passes `{ repeat: true }`. False for a blur, and for a toggle, whose held Space, Enter, or F2 commits once. */
  repeat: boolean
  /** One number per opening of an editor, unique across every grid on the page, so a check that asks a question can keep its answer to that opening. Value commits share session 0. */
  session: number
  /** The value another cell of this row has sent and not yet had back, by column key, so a check reads the row as it shows; undefined while nothing is out there. */
  pending?: (key: string) => unknown
}

// Numbered across every grid, so answers kept per opening never cross from one grid to another, or from a
// grid's openings before its store changed to those after.
let editorOpenings = 0

/** How a column's cells are edited. Every function gets the row, because a step or a check can depend on it. */
export interface CellEdit<T> {
  /** Reads the typed text as a value, or says what is wrong with it. */
  parse: (text: string, row: T) => unknown
  /** The text the editor opens with. Default: the column's `format`, else the value as text, blank for null. */
  format?: (value: unknown, row: T) => string
  /** A check on the parsed value before it is committed. The grid also says how the commit came, so a check that asks a question can insist on a fresh Enter for the answer; a direct call may leave it out. */
  validate?: (value: unknown, row: T, commit?: EditCommit) => EditProblem | null | undefined
  /** Up and Down in the editor: the value one step away, ten with Shift. Left out, the arrows do nothing. */
  step?: (value: unknown, dir: 1 | -1, big: boolean, row: T) => unknown
  /** Enter or Space on the focused cell commits this in place of opening an editor: a checkbox column. */
  toggle?: (value: unknown, row: T) => unknown
  /** False keeps this row's cell read-only. Default: editable. */
  canEdit?: (row: T) => boolean
}

/** What `onEdit` is handed: one cell's committed value, with what it replaces. */
export interface EditChange<T> {
  rowId: RowId
  key: string
  value: unknown
  previous: unknown
  row: T
}

/**
 * Where an edit stands. `editing` while the editor is open; `pending` from the commit until a later batch
 * brings the row's value to the committed one or `onEdit`'s promise resolves; `rejected` when that promise
 * rejects, with the server's message and the value that stands.
 */
export type EditStatus =
  | { kind: "editing"; text: string; problem: string | null; selectAll: boolean; initial?: string | null; focused?: boolean; prior?: EditStatus; session?: number }
  | { kind: "pending"; value: unknown; text: string; tracked?: boolean }
  | { kind: "rejected"; value: unknown; message: string }

/** What a `cell` renderer gets for an editable column: the edit's status, and a way to commit a value of its own (a checkbox's). */
export interface CellEditHandle {
  status: EditStatus | undefined
  /** Validates and sends a value. Pass `{ repeat: true }` for a commit a held key repeats, so a check that asks a question never takes it for an answer. */
  commit: (value: unknown, how?: { repeat?: boolean }) => void
  open: () => void
}

export type SortState = { key: string; dir: "asc" | "desc" } | null
export type SelectionMode = "none" | "single" | "multi"
export type DataGridPreset = "blotter" | "watchlist" | "rfq" | "option-chain" | "tape" | "parameters"

export interface RowEnterBehavior {
  /** Highlight rows as they arrive. */
  highlight: boolean
  /** Keep the first visible row where it is when rows arrive above it. */
  pinViewport: boolean
  /**
   * Follow the tail: the viewport goes to the end as rows arrive there, until a key, a pointer, or a
   * scroll away from the end stops it. A "N new" pill then counts the arrivals and returns to the end.
   * What the `tape` preset does; off elsewhere.
   */
  followTail?: boolean
}

export interface DataGridPresetConfig {
  rowHeight: number
  fontClass: string
  reorderHoldMs: number
  flash: "fill" | "ring"
  selectionMode: SelectionMode
  rowEnter: RowEnterBehavior
  announceRowCount: "off" | "debounced"
}

export const DATA_GRID_PRESETS: Record<DataGridPreset, DataGridPresetConfig> = {
  blotter: { rowHeight: 24, fontClass: "text-xs", reorderHoldMs: 750, flash: "fill", selectionMode: "multi", rowEnter: { highlight: true, pinViewport: true }, announceRowCount: "debounced" },
  watchlist: { rowHeight: 22, fontClass: "text-xs", reorderHoldMs: 0, flash: "fill", selectionMode: "single", rowEnter: { highlight: false, pinViewport: false }, announceRowCount: "off" },
  rfq: { rowHeight: 26, fontClass: "text-xs", reorderHoldMs: 1000, flash: "ring", selectionMode: "single", rowEnter: { highlight: true, pinViewport: true }, announceRowCount: "debounced" },
  "option-chain": { rowHeight: 20, fontClass: "text-xs", reorderHoldMs: 0, flash: "ring", selectionMode: "none", rowEnter: { highlight: false, pinViewport: false }, announceRowCount: "off" },
  tape: { rowHeight: 22, fontClass: "text-xs", reorderHoldMs: 0, flash: "fill", selectionMode: "single", rowEnter: { highlight: true, pinViewport: false, followTail: true }, announceRowCount: "debounced" },
  parameters: { rowHeight: 24, fontClass: "text-xs", reorderHoldMs: 0, flash: "ring", selectionMode: "single", rowEnter: { highlight: false, pinViewport: true }, announceRowCount: "off" },
}

export const EMPTY_COLUMN_STATE: ColumnState = { order: [], widths: {}, hidden: [] }

/**
 * The grid's own words. A template fills `{name}` with a column's title and `{n}` and `{m}` with counts; a label that
 * holds a count also takes a function of it, for a plural a template can't hold.
 */
export interface DataGridLabels {
  /** A row's selection box. */
  selectRow: string
  /** The selection boxes' column header. */
  selection: string
  /** A header's menu button, `{name}` the column's title. */
  columnMenu: string
  /** A header's resize handle, `{name}` the column's title. */
  resizeColumn: string
  sortAscending: string
  sortDescending: string
  clearSort: string
  moveLeft: string
  moveRight: string
  hideColumn: string
  /** The header menu's reset item, `{n}` the hidden columns. */
  resetColumns: string | ((hidden: number) => string)
  /** What a screen reader hears once the row count settles, `{n}` the rows in view and `{m}` the rows that arrived since. */
  rowCount: string | ((rows: number, arrived: number) => string)
  /** The button that takes a paused tape back to its end, `{n}` the rows that arrived since. */
  newRows: string | ((n: number) => string)
  /** A refused edit whose error carries no message of its own. */
  rejected: string
  /** An open editor's commit after the cell stopped taking edits: the text stays until Escape. */
  notEditable: string
  /** What a screen reader hears on a cell whose edit is sent and not yet back. */
  pending: string
  /** An empty view, unless `emptyState` says otherwise. */
  noRows: string
}

export const DEFAULT_DATA_GRID_LABELS: DataGridLabels = {
  selectRow: "Select row",
  selection: "Selection",
  columnMenu: "{name} column menu",
  resizeColumn: "Resize {name}",
  sortAscending: "Sort ascending",
  sortDescending: "Sort descending",
  clearSort: "Clear sort",
  moveLeft: "Move left",
  moveRight: "Move right",
  hideColumn: "Hide column",
  resetColumns: (hidden) => (hidden ? `Reset columns (${hidden.toLocaleString()} hidden)` : "Reset columns"),
  rowCount: (rows, arrived) => `${rows.toLocaleString()} ${rows === 1 ? "row" : "rows"}${arrived ? `, ${arrived.toLocaleString()} new` : ""}`,
  newRows: (n) => `${n.toLocaleString()} new`,
  rejected: "Rejected",
  notEditable: "This cell can't be edited now.",
  pending: "Pending",
  noRows: "No rows",
}

/** A label's text: a template filled with names and counts, a count's in the reader's locale. */
function fillLabel(template: string, values: Record<string, string | number>): string {
  return template.replace(/\{(\w+)\}/g, (match, name: string) => {
    const value = values[name]
    return value === undefined ? match : typeof value === "number" ? value.toLocaleString() : value
  })
}

export interface DataGridProps<T> {
  store: RowStore<T>
  /** A view you own (your comparator, your filter). Without it the grid makes one from `sort` and `filter`. */
  view?: RowView<T>
  columns: ColumnDef<T>[]
  preset?: DataGridPreset
  rowHeight?: number
  overscan?: number
  /** Only used by the grid's own view. */
  filter?: (row: T) => boolean
  reorderHoldMs?: number
  columnState?: ColumnState
  onColumnStateChange?: (state: ColumnState) => void
  /** Initial uncontrolled columns and the latest Reset columns target. Changes do not overwrite current settings. */
  baseState?: ColumnState
  sort?: SortState
  onSortChange?: (sort: SortState) => void
  selection?: ReadonlySet<RowId>
  onSelectionChange?: (selection: ReadonlySet<RowId>) => void
  selectionMode?: SelectionMode
  /** Show a checkbox column (multi only). */
  selectionColumn?: boolean
  focusedRowId?: RowId | null
  onFocusedRowChange?: (id: RowId | null) => void
  onRowActivate?: (row: T, id: RowId) => void
  /** Items for the right-click menu, given the rows it applies to (the selection, or the row under the pointer) and the row it opened on. */
  renderContextMenu?: (rows: T[], ids: RowId[], target?: RowId | null) => ReactNode
  rowEnter?: Partial<RowEnterBehavior>
  announceRowCount?: "off" | "debounced"
  /** Accessible name for the grid. */
  label: string
  /** The grid's own words, for another language or house style. */
  labels?: Partial<DataGridLabels>
  emptyState?: ReactNode
  getRowProps?: (row: T, id: RowId) => RowDecoration | undefined
  /**
   * A row's name that holds while its cells tick, such as its symbol. Without it a row is named by its cells,
   * so a screen reader can read the focused row again at every update. With it, the grid reads the focused
   * row's cells once, politely, when focus rests on the row. `null` is the same as leaving it out, for a preset
   * that names its rows. Keep its identity stable between renders, as with `filter`.
   */
  getRowLabel?: ((row: T, id: RowId) => string) | null
  /**
   * Rules as data: cells and rows to color, rows to show, and the order, from `grid-rules`. The grid
   * wires them itself; `cell`, `getRowProps`, `filter`, and `sort` stay yours for what code has to do.
   * With a `view` of your own the grid ignores `rules.filter` and `rules.sort`, as it ignores `filter`.
   * Keep the object's identity stable between renders, as with `filter`.
   */
  rules?: ReadGridRules
  /**
   * Totals: a sticky row under the body with one value per column named here, given the view's rows
   * (filtered and ordered, what is on screen). Recomputed once per applied batch, never per frame, and
   * never flashed. Keep the object's identity stable between renders, as with `filter`.
   */
  footer?: Record<string, (rows: T[]) => string>
  /**
   * A cell was edited: send the change on. Editing is on only when this is given, for the columns with
   * `edit`. The cell shows the committed value as pending until a later batch brings the row's value to it
   * or the promise you return resolves; a rejected promise keeps the previous value and prints the
   * message in the cell. Multi-cell paste is not part of this.
   */
  onEdit?: (change: EditChange<T>) => void | Promise<unknown>
  flashWindowMs?: number
  className?: string
  /** Viewport size before layout is measured (tests, server rendering). */
  initialRect?: { width: number; height: number }
}

/** What `getRowProps` may put on a row. A rule's decoration from `grid-rules` is one. */
export interface RowDecoration {
  className?: string
  "data-state"?: string
  "data-rule"?: string
  "data-tone"?: string
  "aria-description"?: string
}

type Resolved<T> = ColumnDef<T> & { width: number; minWidth: number }

const EMPTY_SET: ReadonlySet<RowId> = new Set()
const SELECT_WIDTH = 32
const ENTER_WINDOW_MS = 1500
// How long focus rests on a row before the grid reads a labelled row's cells.
const ROW_READING_REST_MS = 400
// What a live region said stays only as long as a screen reader takes to say it: left in the grid, it would meet a
// reader browsing the rows later with words the grid no longer stands by.
const SPOKEN_MS = 5000

// ARIA roles that take no name from an author, and the elements that take one without a role.
const NAMELESS_ROLES = new Set(["generic", "presentation", "none", "caption", "code", "deletion", "emphasis", "insertion", "paragraph", "strong", "subscript", "superscript", "time"])
const NAMED_TAGS = new Set(["A", "AREA", "BUTTON", "IFRAME", "IMG", "INPUT", "METER", "OUTPUT", "PROGRESS", "SELECT", "TEXTAREA", "svg"])
const TEXT_INPUTS = new Set(["", "text", "search", "tel", "url", "email", "number"])

const takesName = (element: Element) => {
  const role = element.getAttribute("role")?.trim().split(/\s+/)[0]
  return role ? !NAMELESS_ROLES.has(role) : NAMED_TAGS.has(element.tagName)
}

// What a screen reader says for a node inside a cell, after the accessible-name rules for content: a text field's or
// a select's value, which is what the row holds; on an element that takes a name, the targets of `aria-labelledby`,
// hidden ones included, else its `aria-label`; an image's `alt`; otherwise its content, with hidden parts left out.
function spokenText(node: Node, referenced = false): string {
  if (node.nodeType === 3) return node.textContent ?? ""
  if (node.nodeType !== 1) return ""
  const element = node as Element
  if (!referenced && (element.getAttribute("aria-hidden") === "true" || element.hasAttribute("hidden"))) return ""
  const tag = element.tagName
  if (tag === "TEXTAREA" || (tag === "INPUT" && TEXT_INPUTS.has((element as HTMLInputElement).type))) return (element as HTMLInputElement).value
  if (tag === "SELECT") return Array.from((element as HTMLSelectElement).selectedOptions, (option) => option.text).join(" ")
  const named = takesName(element)
  const ids = referenced || !named ? null : element.getAttribute("aria-labelledby")?.trim()
  if (ids) {
    const root = element.getRootNode() as Document | ShadowRoot
    const text = ids.split(/\s+/).map((id) => root.getElementById(id)).map((target) => (target ? spokenText(target, true).trim() : "")).filter(Boolean).join(" ")
    if (text) return text
  }
  const label = element.getAttribute("aria-label")?.trim()
  if (label && named) return label
  if (tag === "IMG") return element.getAttribute("alt") ?? ""
  // Elements side by side read as separate words, as their layout shows them ("Client A", "Tier 1"); text beside
  // an element runs on, so a word split across inline elements stays one word.
  let text = ""
  let last: Node | null = null
  for (const child of element.childNodes) {
    const part = spokenText(child, referenced)
    if (!part) continue
    if (last?.nodeType === 1 && child.nodeType === 1) text += " "
    text += part
    last = child
  }
  return text
}

// A row's cells as one reading: each column's words in order, the selection box left out.
function rowReading(row: Element): string {
  return Array.from(row.children)
    .filter((cell) => cell.hasAttribute("data-col"))
    .map((cell) => spokenText(cell).replace(/\s+/g, " ").trim())
    .filter(Boolean)
    .join(", ")
}

// When a mark's flash window begins: at arrival, or, for a mark a reorder hold
// parked, when that hold lapses — frozen at `now` while the hold is still running.
interface EnterMark {
  at: number
  until: number | null
}
const enterStart = (mark: EnterMark, now: number) => (mark.until !== null ? Math.max(mark.at, Math.min(mark.until, now)) : mark.at)

// Native controls and focus targets own interaction regardless of an authored role.
const ROW_CONTROLS = 'a[href], button, input, select, textarea, label, summary, audio[controls], video[controls], iframe, object, embed, [contenteditable]:not([contenteditable="false"]), [tabindex], [data-grid-interaction="control"]'
const CONTROL_ROLES = new Set("button link checkbox radio switch combobox listbox option textbox searchbox slider spinbutton scrollbar tab tablist toolbar menu menubar menuitem menuitemcheckbox menuitemradio tree treeitem radiogroup doc-backlink doc-biblioref doc-glossref doc-noteref".split(" "))
// Include noninteractive roles: in "status button", status wins. Abstract roles cannot win a fallback list.
const ARIA_ROLES = new Set([
  ..."alert alertdialog application article banner blockquote button caption cell checkbox code columnheader combobox comment complementary contentinfo definition deletion dialog directory document emphasis feed figure form generic grid gridcell group heading image img insertion link list listbox listitem log main mark marquee math menu menubar menuitem menuitemcheckbox menuitemradio meter navigation none note option paragraph presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox sectionfooter sectionheader separator slider spinbutton status strong subscript suggestion superscript switch tab table tablist tabpanel term textbox time timer toolbar tooltip tree treegrid treeitem".split(" "),
  ..."document object symbol".split(" ").map(role => `graphics-${role}`),
  ..."abstract acknowledgments afterword appendix backlink biblioentry bibliography biblioref chapter colophon conclusion cover credit credits dedication endnote endnotes epigraph epilogue errata example footnote foreword glossary glossref index introduction noteref notice pagebreak pagefooter pageheader pagelist part preface prologue pullquote qna subtitle tip toc".split(" ").map(role => `doc-${role}`),
])

function roleOf(element: Element): string | undefined {
  const value = element.getAttribute("role")
  if (!value) return
  for (const token of value.split(/[\t\n\f\r ]+/)) {
    if (!/^[A-Za-z-]+$/.test(token)) continue
    const role = token.toLowerCase()
    if (ARIA_ROLES.has(role)) return role
  }
}

function independentGrid(element: Element): boolean {
  const role = roleOf(element)
  return role === "grid" || role === "treegrid" || element.getAttribute("data-grid-interaction") === "independent"
}

function gridTarget(root: HTMLElement | null, target: EventTarget, path?: EventTarget[]): Element | undefined {
  const element = target as Element
  // Portals can dispatch both an inner-target pass and a host-retargeted pass.
  if (!root?.contains(element)) return undefined
  if (path) {
    for (const entry of path) {
      if (entry === root) return element
      if ((entry as Node).nodeType === 1 && independentGrid(entry as Element)) return undefined
    }
  } else {
    for (let node: Element | null = element; node; node = node.parentElement) {
      if (node === root) return element
      if (independentGrid(node)) return undefined
    }
  }
  return undefined
}

function pathMatches(root: HTMLElement | null, path: EventTarget[], matches: (element: Element) => boolean): boolean {
  for (const entry of path) {
    if (entry === root) return false
    if ((entry as Node).nodeType === 1 && matches(entry as Element)) return true
  }
  return false
}

function rejectMenuStart(root: HTMLElement | null, event: SyntheticEvent) {
  const native = event.nativeEvent
  if (event.type === "contextmenu" && root && native.composedPath().includes(root)) {
    // Base's document listener also claims contained context menus, including at a hydrated document root.
    event.stopPropagation()
    if (native.currentTarget === root.ownerDocument) native.stopImmediatePropagation()
    return
  }
  // React's dispatcher checks this query before visiting an ancestor. This compatibility shim
  // skips the menu trigger without blocking native listeners used by dialog dismissal and touch tracking.
  event.isPropagationStopped = () => true
}

function useControllable<V>(value: V | undefined, onChange: ((v: V) => void) | undefined, initial: V): [V, (v: V) => void] {
  const [internal, setInternal] = useState(initial)
  const controlled = value !== undefined
  const current = controlled ? value : internal
  const set = useCallback(
    (v: V) => {
      if (!controlled) setInternal(v)
      onChange?.(v)
    },
    [controlled, onChange],
  )
  return [current, set]
}

/** Nulls last, numbers numerically, everything else as text. `compareValues` in `grid-rules`, kept here by name. */
export function compareForSort(a: unknown, b: unknown): number {
  return compareValues(a, b)
}

/** The header's sort as a comparator, a null last whichever way it runs. */
export function comparatorFor<T>(columns: ColumnDef<T>[], sort: SortState): ((a: T, b: T) => number) | undefined {
  if (!sort) return undefined
  const col = columns.find((c) => c.key === sort.key)
  if (!col) return undefined
  return (x, y) => compareDirected(col.accessor(x), col.accessor(y), sort.dir)
}

/** One comparator after another: the first that tells two rows apart decides. Undefined when there is none. */
function chainComparators<T>(...comparators: (((a: T, b: T) => number) | undefined)[]): ((a: T, b: T) => number) | undefined {
  const list = comparators.filter((c): c is (a: T, b: T) => number => c !== undefined)
  if (!list.length) return undefined
  if (list.length === 1) return list[0]
  return (a, b) => {
    for (const compare of list) {
      const c = compare(a, b)
      if (c !== 0) return c
    }
    return 0
  }
}

/** Order, hide, and size columns by state; frozen columns lead. */
export function resolveColumns<T>(columns: ColumnDef<T>[], state: ColumnState): Resolved<T>[] {
  const rank = new Map(state.order.map((k, i) => [k, i]))
  const hidden = new Set(state.hidden)
  const ordered = columns
    .map((c, i) => ({ c, r: rank.get(c.key) ?? 1e6 + i }))
    .sort((a, b) => a.r - b.r)
    .map(({ c }) => c)
    .filter((c) => !c.hidden && !hidden.has(c.key))
  const frozen = ordered.filter((c) => c.frozen === "left")
  const rest = ordered.filter((c) => c.frozen !== "left")
  return [...frozen, ...rest].map((c) => {
    const minWidth = c.minWidth ?? 48
    return { ...c, minWidth, width: Math.max(minWidth, state.widths[c.key] ?? c.width) }
  })
}

/**
 * CSV of the given rows and columns, RFC 4180 quoting, leaving out a column whose definition says `hidden`. Pass
 * `resolveColumns(columns, columnState)` to export the columns as the grid shows them, in its order and without the
 * ones the column state hides.
 */
export function exportCsv<T>(store: RowStore<T>, columns: ColumnDef<T>[], ids: readonly RowId[]): string {
  const cols = columns.filter((c) => !c.hidden)
  // Spreadsheets execute cells led by = + - @ or a tab or carriage return: free-text
  // fields — a message, an author — must not run as formulas when the file is opened.
  // The apostrophe prefix is the spreadsheet convention for "this is text".
  // A sign-led field is data only when the WHOLE field is a number: a leading digit
  // does not stop a spreadsheet from evaluating what follows it.
  const wholeNumber = /^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i
  const neutral = (s: string) => (/^[=@\t\r]/.test(s) || (/^[+-]/.test(s) && !wholeNumber.test(s)) ? `'${s}` : s)
  // A finite numeric accessor usually formats to a number — +1,234.50 from a signed
  // formatter included — and number-shaped text is data. The sign rule still applies
  // to numeric text that does not read as one number, and the hard leads always
  // neutralize: a formatter may emit arbitrary text.
  const numberShaped = /^[+-]?(\d{1,3}(,\d{3})+|\d+)(\.\d*)?$|^[+-]?\.\d+$|^[+-]?\d+(\.\d*)?e[+-]?\d+$/i
  const esc = (s: string, numeric = false) => {
    const t = numeric ? (/^[=@\t\r]/.test(s) || (/^[+-]/.test(s) && !numberShaped.test(s)) ? `'${s}` : s) : neutral(s)
    return /[",\r\n]/.test(t) ? `"${t.replace(/"/g, '""')}"` : t
  }
  const header = cols.map((c) => esc(columnName(c))).join(",")
  const lines: string[] = []
  for (const id of ids) {
    const row = store.getRow(id)
    if (row === undefined) continue
    lines.push(
      cols
        .map((c) => {
          const v = c.accessor(row)
          const numeric = typeof v === "number" && Number.isFinite(v)
          const text = c.format ? c.format(v, row) : v === null || v === undefined ? "" : String(v)
          // The library's formatters print a typographic minus, which a spreadsheet reads as text: a number's sign goes
          // out as the hyphen-minus, so a sum over the column counts every negative.
          // Only where the cell then reads as one number: a unit after it, as in -2.5mm, would be text either way.
          const ascii = numeric ? text.replace(/\u2212/g, "-") : text
          return esc(numeric && numberShaped.test(ascii) ? ascii : text, numeric)
        })
        .join(","),
    )
  }
  return [header, ...lines].join("\r\n") + "\r\n"
}

// Editing. One editor at a time, its status kept in a tracker the cells subscribe to one key at a time,
// so typing in or settling one cell re-renders that cell and nothing else; opening, moving, or closing the
// editor also renders the grid once, which keeps the row being edited rendered. The controller is one
// object for the grid's life; its callbacks read the latest props through a ref.

const cellKey = (rowId: RowId, key: string) => `${rowId}\u0000${key}`

interface EditTracker {
  get(key: string): EditStatus | undefined
  set(key: string, status: EditStatus | undefined): void
  subscribe(key: string, cb: () => void): () => void
  /** The cell whose editor is open. */
  editing(): string | null
  /** Called whenever the open editor moves to another cell, or closes. */
  subscribeOpen(cb: () => void): () => void
}

function createEditTracker(): EditTracker {
  const statuses = new Map<string, EditStatus>()
  const listeners = new Map<string, Set<() => void>>()
  const openListeners = new Set<() => void>()
  let open: string | null = null
  return {
    get: (key) => statuses.get(key),
    set(key, status) {
      const was = open
      if (status) statuses.set(key, status)
      else statuses.delete(key)
      if (status?.kind === "editing") open = key
      else if (open === key) open = null
      const set = listeners.get(key)
      if (set) for (const cb of set) cb()
      if (open !== was) for (const cb of openListeners) cb()
    },
    subscribe(key, cb) {
      let set = listeners.get(key)
      if (!set) listeners.set(key, (set = new Set()))
      set.add(cb)
      return () => {
        set!.delete(cb)
        if (!set!.size) listeners.delete(key)
      }
    },
    editing: () => open,
    subscribeOpen(cb) {
      openListeners.add(cb)
      return () => void openListeners.delete(cb)
    },
  }
}

interface EditController {
  tracker: EditTracker
  reconcileColumns(keys: ReadonlySet<string>): void
  unmountEditor(key: string, input: HTMLInputElement): void
  editorFocusFell: { current: boolean }
  markFocused(rowId: RowId, key: string): void
  rowOf(k: string): RowId | undefined
  forget(k: string): void
  open(rowId: RowId, key: string, typed?: string): void
  type(rowId: RowId, key: string, text: string): void
  /** Parse, check, and send. `move` opens the next (1) or previous (-1) editable cell of the row after. */
  commit(rowId: RowId, key: string, how: EditCommit, move?: 1 | -1): void
  /** A value a cell renderer settled itself (a checkbox): sent as it is. */
  commitValue(rowId: RowId, key: string, value: unknown, repeat?: boolean): void
  cancel(rowId: RowId, key: string): void
  step(rowId: RowId, key: string, dir: 1 | -1, big: boolean): void
  /** Focus left the editor: commit what parses, drop what does not. */
  blur(rowId: RowId, key: string): void
  /** A later batch brought the row's value to the committed one. */
  settle(rowId: RowId, key: string): void
  settlePrior(rowId: RowId, key: string): void
}

function editText<T>(col: ColumnDef<T>, value: unknown, row: T): string {
  if (col.edit?.format) return col.edit.format(value, row)
  if (value === null || value === undefined) return ""
  return col.format ? col.format(value, row) : String(value)
}

// Alt with a letter: the letter typed, or the key's place where Option composes another character, as "ß" for Option+S on
// a Mac. AltGr typing a character is typing, not a shortcut.
function altLetter(e: KeyboardEvent<HTMLElement>): string | null {
  if (!e.altKey) return null
  // Windows reports AltGr as Ctrl and Alt, whatever letter its key leaves; Firefox on a Mac reports AltGraph for Option
  // alone, which is no typing key.
  if (e.getModifierState("AltGraph") && e.ctrlKey) return null
  if (/^[a-z]$/i.test(e.key)) return e.key.toLowerCase()
  return /^Key[A-Z]$/.test(e.code) ? e.code.slice(3).toLowerCase() : null
}

// A row id as an id attribute can carry it: letters, digits, and hyphens as they stand, anything else, an underscore
// included, as an underscore and its four hex digits. No space splits an IDREF list, no two row ids meet, and no
// string, a lone surrogate included, throws.
function idPart(id: RowId): string {
  return id.replace(/[^A-Za-z0-9-]/g, (unit) => `_${unit.charCodeAt(0).toString(16).padStart(4, "0")}`)
}

/** A data cell's DOM id: the grid's, the column's place, and the row's. */
function cellDomId(uid: string, rowId: RowId, index: number): string {
  return `${uid}-c${index}-${idPart(rowId)}`
}

function messageOf(error: unknown, fallback: string): string {
  // An Error with no words, as `new Error(response.statusText)` is over HTTP/2, says the fallback too, and so does
  // one whose message can't become text: the cell leaves pending whatever the rejection carries.
  if (typeof error === "string") return error.trim() || fallback
  if (!(error instanceof Error)) return fallback
  try {
    return String(error.message ?? "").trim() || fallback
  } catch {
    return fallback
  }
}

/** The tree an element's focus is read in: its shadow root's, else its document's, whose active element is a shadow host while focus is inside one. */
function focusRoot(el: Node): Document | ShadowRoot {
  return el.getRootNode() as Document | ShadowRoot
}

/** Focus fell when the element that held it left: to the body, or to a shadow root's host with nothing in that root focused. */
function focusFell(root: Document | ShadowRoot, doc: Document, gone?: Element): boolean {
  const active = doc.activeElement
  if (active === null || active === doc.body || (gone !== undefined && active === gone)) return true
  return root !== doc && active === (root as ShadowRoot).host && (root.activeElement === null || root.activeElement === gone)
}

function canEditCell<T>(col: ColumnDef<T> | undefined, row: T | undefined): col is ColumnDef<T> & { edit: CellEdit<T> } {
  return Boolean(col?.edit) && row !== undefined && (col!.edit!.canEdit?.(row) ?? true)
}

const noopSubscribe = () => () => {}
const undefinedStatus = () => undefined

const FILL_CLASSES = "data-[direction=up]:bg-up-soft data-[direction=down]:bg-down-soft data-[direction=flat]:bg-flat-soft"
const RING_CLASSES = "data-[direction=up]:shadow-[inset_0_0_0_1px_var(--up)] data-[direction=down]:shadow-[inset_0_0_0_1px_var(--down)] data-[direction=flat]:shadow-[inset_0_0_0_1px_var(--flat)]"
// A selected row is marked by a bar at the start of its first cell, not filled: a fill behind a row's up and down text
// can drop it below 4.5 to 1 in the light themes. The first cell is the selection box's when there is one, and a frozen
// first column keeps the bar in view as the grid scrolls sideways.
const SELECTED_BAR = "before:pointer-events-none before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-primary"

function alignClass(col: { align?: "left" | "right" | "center"; numeric?: boolean }) {
  const a = col.align ?? (col.numeric ? "right" : "left")
  return a === "right" ? "text-right" : a === "center" ? "text-center" : "text-left"
}

interface CellProps<T> {
  col: Resolved<T>
  row: T
  rowId: RowId
  id: string
  colIndex: number
  left: number | undefined
  memory: FlashMemory
  flashVariant: "fill" | "ring"
  flashWindowMs: number
  focusedCol: boolean
  /** The first cell of a selected row with no selection box draws the selection's bar. */
  selectedBar: boolean
  rules: AppliedRules<T> | null
  /** The row's own rule, for a frozen cell to paint: its opaque background would otherwise cut a gap in the row's tint. */
  rowRule: RuleDecoration | undefined
  rowClassName: string | undefined
  /** The grid's editing, or null when it has no `onEdit`. */
  edits: EditController | null
  pendingLabel: string
  /** The focused row's cell in the focused column: the keyboard's cell. */
  active: boolean
}

interface CellEditorProps {
  rowId: RowId
  colKey: string
  label: string
  status: Extract<EditStatus, { kind: "editing" }>
  numeric: boolean
  className: string
  edits: EditController
}

// The editor: a bare input the size of the cell. Enter commits, Escape reverts, Tab and Shift+Tab commit
// and move along the row, bare Up and Down step. With a modifier held the arrows are not its business:
// they belong to whoever listens above it, the way a ticket's mod+up reaches its registry from a field.
function CellEditor({ rowId, colKey, label, status, numeric, className, edits }: CellEditorProps) {
  const problemId = useId()
  const ref = useRef<HTMLInputElement>(null)
  const selectAll = status.selectAll
  useLayoutEffect(() => {
    const input = ref.current
    return () => { if (input) edits.unmountEditor(colKey, input) }
  }, [edits, colKey])
  const focused = status.focused ?? false
  useEffect(() => {
    const el = ref.current
    if (!el) return
    // Once per OPEN, not per mount: a remount of the open editor (a Suspense or Activity
    // reconnect, or a grid that had no height getting one) must not take focus a second time,
    // while a fresh open() of a mounted cell resets the flag and focuses again. StrictMode's
    // rehearsal runs this twice before the flag is read back, focusing twice, harmlessly.
    if (focused) return
    edits.markFocused(rowId, colKey)
    el.focus({ preventScroll: true })
    if (selectAll) el.select()
    else el.setSelectionRange(el.value.length, el.value.length)
    // A keystroke must not reselect the text under the hand.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [focused])
  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    const mod = e.metaKey || e.ctrlKey || e.altKey
    switch (e.key) {
      case "Enter":
        e.preventDefault()
        edits.commit(rowId, colKey, { via: "enter", repeat: e.repeat, session: status.session ?? 0 })
        return
      case "Escape":
        e.preventDefault()
        edits.cancel(rowId, colKey)
        return
      case "Tab":
        e.preventDefault()
        edits.commit(rowId, colKey, { via: "tab", repeat: e.repeat, session: status.session ?? 0 }, e.shiftKey ? -1 : 1)
        return
      case "ArrowUp":
      case "ArrowDown":
        if (mod) return
        e.preventDefault()
        edits.step(rowId, colKey, e.key === "ArrowUp" ? 1 : -1, e.shiftKey)
        return
    }
  }
  return (
    <>
      <input
        ref={ref}
        data-cell-editor=""
        data-numeric={numeric ? "" : undefined}
        aria-label={label}
        aria-invalid={status.problem ? true : undefined}
        aria-describedby={status.problem ? problemId : undefined}
        title={status.problem ?? undefined}
        value={status.text}
        autoComplete="off"
        spellCheck={false}
        // The text keyboard, not the decimal pad: a phone's pad has no minus, and a numeric column can go below zero.
        className={cn("h-full w-full min-w-0 bg-background px-2 text-inherit outline-none ring-2 ring-inset ring-foreground aria-invalid:ring-destructive", numeric && "text-right", className)}
        onChange={(e) => edits.type(rowId, colKey, e.target.value)}
        onKeyDown={onKeyDown}
        onBlur={() => edits.blur(rowId, colKey)}
      />
      {/* The problem in words, over the cell above, where a keyboard user sees it: the ring alone says only that something is wrong. */}
      {status.problem && (
        <span id={problemId} data-cell-problem="" className="pointer-events-none absolute bottom-full left-0 z-10 mb-px w-max max-w-[min(24rem,80vw)] rounded-sm border border-destructive bg-background px-1.5 py-0.5 text-xs font-normal whitespace-normal text-destructive not-italic shadow-sm">
          {status.problem}
        </span>
      )}
    </>
  )
}

function Cell<T>({ col, row, rowId, id, colIndex, left, memory, flashVariant, flashWindowMs, focusedCol, selectedBar, rules, rowRule, rowClassName, edits, pendingLabel, active }: CellProps<T>) {
  const value = col.accessor(row)
  const ref = useRef<HTMLDivElement>(null)
  const flash = col.flash ?? (col.numeric ? flashVariant : false)
  const key = cellKey(rowId, col.key)
  useFlash(ref, value, { memory, cellKey: key, variant: flash || "fill", windowMs: flashWindowMs, disabled: !flash })
  // Editable cells follow their own entry in the tracker; the rest subscribe to nothing.
  const editable = edits !== null && Boolean(col.edit)
  const tracker = editable ? edits.tracker : null
  const subscribe = useCallback((cb: () => void) => (tracker ? tracker.subscribe(key, cb) : noopSubscribe()), [tracker, key])
  const get = useCallback(() => (tracker ? tracker.get(key) : undefined), [tracker, key])
  const status = useSyncExternalStore(subscribe, get, undefinedStatus)
  // A later batch brought the row's value to the committed one: the edit is settled, and the cell reads the store again.
  // A covered pending settles the same way, or a close after the store moved on would restore a pending nothing can clear.
  const settled = status?.kind === "pending" && Object.is(status.value, value)
  const coveredSettled = status?.kind === "editing" && status.prior?.kind === "pending" && Object.is(status.prior.value, value)
  useEffect(() => {
    if (settled) edits?.settle(rowId, col.key)
    else if (coveredSettled) edits?.settlePrior(rowId, col.key)
  }, [settled, coveredSettled, edits, rowId, col.key])
  const handle = useMemo<CellEditHandle | undefined>(
    () => (editable ? { status, commit: (next, how) => edits!.commitValue(rowId, col.key, next, how?.repeat), open: () => edits!.open(rowId, col.key) } : undefined),
    [editable, status, edits, rowId, col.key],
  )
  const numericClass = col.numeric ? (col.font === "mono" ? MONO_NUMERIC_CLASS : NUMERIC_CLASS) : ""
  const header = columnName(col)
  const editing = status?.kind === "editing"
  const pendingText = status?.kind === "pending" && !col.cell ? status.text : null
  const content = editing
    ? null
    : pendingText !== null
      ? pendingText
      : col.cell
        ? col.cell({ row, value, rowId, edit: handle })
        : col.format
          ? col.format(value, row)
          : value === null || value === undefined
            ? NULL_TOKEN
            : String(value)
  // A matched rule names itself on the cell and says its words to a screen reader; the color is the hint.
  const rule = rules?.cell(col.key, row)
  const rejected = status?.kind === "rejected" ? status.message : null
  return (
    <div
      ref={ref}
      id={id}
      role="gridcell"
      aria-colindex={colIndex + 1}
      // A pending edit says so beside a rule's words: the italics and dotted underline are what a sighted reader sees.
      aria-description={rejected ?? ([status?.kind === "pending" ? pendingLabel : undefined, rule?.["aria-description"]].filter(Boolean).join(", ") || undefined)}
      aria-readonly={editable ? !canEditCell(col, row) : undefined}
      data-col={col.key}
      data-numeric={col.numeric ? "" : undefined}
      data-focused-col={focusedCol || undefined}
      data-rule={rule?.["data-rule"]}
      data-tone={rule?.["data-tone"]}
      data-editable={editable && canEditCell(col, row) ? "" : undefined}
      data-editing={editing || undefined}
      data-pending={status?.kind === "pending" || undefined}
      data-rejected={rejected ?? undefined}
      title={rejected ?? (typeof content === "string" ? content : undefined)}
      className={cn(
        "flex h-full min-w-0 items-center",
        editing ? "relative overflow-visible" : "truncate px-2",
        alignClass(col),
        col.numeric && cn("justify-end", numericClass),
        col.align === "center" && "justify-center",
        flash === "ring" ? RING_CLASSES : flash === "fill" ? FILL_CLASSES : undefined,
        // Before the frozen position, so a frozen cell stays sticky under the bar's `relative`.
        selectedBar && cn("relative", SELECTED_BAR),
        left !== undefined && "sticky z-10 bg-background",
        // On a frozen cell the column's tint is a background image, so the cell keeps its opaque background under it.
        focusedCol && (left !== undefined ? "bg-[linear-gradient(color-mix(in_oklab,var(--muted)_50%,transparent),color-mix(in_oklab,var(--muted)_50%,transparent))]" : "bg-muted/50"),
        // The underline outlasts a rule's tint, which sets the text color.
        status?.kind === "pending" && "text-muted-foreground italic underline decoration-dotted underline-offset-2",
        rejected !== null && "text-destructive",
        // A frozen cell paints an opaque background over the row's, so it takes the row's own decoration too: a rule's
        // tint, and your class from getRowProps, a tint or a mark, or the row would show a hole at the frozen columns.
        // A cell rule's own decoration comes last, so it wins over the row's where both set the same thing.
        left !== undefined ? cn(rowRule?.className, rowClassName, rule?.className) : rule?.className,
        // The keyboard's cell carries its own mark: the column's tint is too faint to find it by.
        active && !editing && "outline-2 -outline-offset-2 outline-foreground",
      )}
      style={left !== undefined ? { left } : undefined}
    >
      {editing ? (
        <CellEditor rowId={rowId} colKey={col.key} label={header} status={status} numeric={Boolean(col.numeric)} className={numericClass} edits={edits!} />
      ) : (
        // Beside a refusal the value keeps its digits and the message is what gives way.
        <span className={cn("truncate", rejected !== null && "shrink-0")}>{content}</span>
      )}
      {rejected !== null && <span data-edit-message="" className="ml-1 truncate">{rejected}</span>}
    </div>
  )
}

interface RowProps<T> {
  store: RowStore<T>
  id: RowId
  index: number
  domId: string
  /** The grid's id, which its cells' ids start with. */
  uid: string
  columns: Resolved<T>[]
  template: string
  lefts: (number | undefined)[]
  width: number
  height: number
  start: number
  selected: boolean
  focused: boolean
  focusedColKey: string | null
  selectionColumn: boolean
  selectable: boolean
  selectLabel: string
  onToggle: (id: RowId) => void
  memory: FlashMemory
  flashVariant: "fill" | "ring"
  flashWindowMs: number
  entered: Map<RowId, EnterMark>
  highlightEnter: boolean
  getRowProps?: (row: T, id: RowId) => RowDecoration | undefined
  getRowLabel?: ((row: T, id: RowId) => string) | null
  rules: AppliedRules<T> | null
  edits: EditController | null
  pendingLabel: string
}

function RowInner<T>(p: RowProps<T>) {
  const row = useRow(p.store, p.id)
  const ref = useRef<HTMLDivElement>(null)
  useLayoutEffect(() => {
    const mark = p.entered.get(p.id)
    if (p.highlightEnter && mark !== undefined && ref.current) {
      const now = Date.now()
      // A mark still parked by a running hold keeps waiting: its window opens at
      // the release, and the grid's release sweep plays it — overscan rows mount
      // while parked and must not burn their flash off screen.
      if (mark.until !== null && now < mark.until) return
      p.entered.delete(p.id)
      // A row that arrived off-view and scrolls in later flashes only the remainder
      // of its window — measured from the hold release when one parked it — and an
      // arrival from minutes ago is not news.
      const elapsed = now - enterStart(mark, now)
      if (elapsed < ENTER_WINDOW_MS) playFlash(ref.current, "flat", { windowMs: ENTER_WINDOW_MS, variant: "fill", elapsed })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  if (row === undefined) return null
  const extra = p.getRowProps?.(row, p.id)
  // A row rule paints under whatever your own props say: yours are read last, so they win a class.
  const rule = p.rules?.getRowProps(row)
  const rowLabel = p.getRowLabel?.(row, p.id) || undefined
  // Each cell's id once per render, for the row's label and the cell alike.
  const cellIds = p.columns.map((_, i) => cellDomId(p.uid, p.id, i))
  return (
    <div
      ref={ref}
      role="row"
      id={p.domId}
      data-row-id={p.id}
      data-state={extra?.["data-state"]}
      data-rule={extra?.["data-rule"] ?? rule?.["data-rule"]}
      data-tone={extra?.["data-tone"] ?? rule?.["data-tone"]}
      // Your words for the row, then a rule's, so neither hides the other.
      aria-description={[extra?.["aria-description"], rule?.["aria-description"]].filter(Boolean).join(", ") || undefined}
      aria-label={rowLabel}
      // Without a label of its own a row is named by its data cells, never by its selection box.
      aria-labelledby={rowLabel ? undefined : cellIds.join(" ") || undefined}
      data-focused={p.focused || undefined}
      aria-rowindex={p.index + 2}
      aria-selected={p.selectable ? p.selected : undefined}
      className={cn(
        // An editor's problem shows over the row above, the sticky header included.
        "absolute top-0 left-0 grid items-stretch border-b border-border/60 has-[[data-cell-problem]]:z-40",
        FILL_CLASSES,
        // Focus marks in the foreground, which clears 3 to 1 on every surface in every palette; shadcn's default ring
        // doesn't against white.
        p.focused && "outline-1 -outline-offset-1 outline-foreground",
        rule?.className,
        extra?.className,
      )}
      style={{ gridTemplateColumns: p.template, width: p.width, height: p.height, transform: `translateY(${p.start}px)` }}
    >
      {p.selectionColumn && (
        <div role="gridcell" aria-colindex={1} className={cn("sticky left-0 z-10 flex items-center justify-center bg-background", p.selected && SELECTED_BAR)}>
          <Checkbox tabIndex={-1} checked={p.selected} onCheckedChange={() => p.onToggle(p.id)} aria-label={p.selectLabel} />
        </div>
      )}
      {p.columns.map((col, i) => (
        <Cell
          key={col.key}
          col={col}
          row={row}
          rowId={p.id}
          id={cellIds[i]!}
          colIndex={i + (p.selectionColumn ? 1 : 0)}
          left={p.lefts[i]}
          memory={p.memory}
          flashVariant={p.flashVariant}
          flashWindowMs={p.flashWindowMs}
          focusedCol={p.focusedColKey === col.key}
          selectedBar={p.selected && !p.selectionColumn && i === 0}
          rules={p.rules}
          rowRule={rule}
          rowClassName={extra?.className}
          edits={p.edits}
          pendingLabel={p.pendingLabel}
          active={p.focused && p.focusedColKey === col.key}
        />
      ))}
    </div>
  )
}
const Row = memo(RowInner) as typeof RowInner

interface FooterProps<T> {
  store: RowStore<T>
  ids: readonly RowId[]
  columns: Resolved<T>[]
  template: string
  lefts: (number | undefined)[]
  width: number
  height: number
  footer: Record<string, (rows: T[]) => string>
  selectionColumn: boolean
  rowIndex: number
}

// The totals row. Its own component on the store's meta, which changes once per applied batch: the
// view's rows are read once and each column's function runs once, at the feed's pace and never per
// frame or per row. Nothing here flashes.
function FooterInner<T>(p: FooterProps<T>) {
  const meta = useStoreMeta(p.store)
  const values = useMemo(() => {
    void meta.version
    const rows: T[] = []
    for (const id of p.ids) {
      const row = p.store.getRow(id)
      if (row !== undefined) rows.push(row)
    }
    const out = new Map<string, string>()
    for (const col of p.columns) {
      const total = p.footer[col.key]
      if (total) out.set(col.key, total(rows))
    }
    return out
  }, [meta.version, p.ids, p.columns, p.footer, p.store])
  return (
    <div role="row" aria-rowindex={p.rowIndex} data-grid-footer="" className="sticky bottom-0 z-20 mt-auto grid border-t border-border bg-background font-medium" style={{ gridTemplateColumns: p.template, width: p.width, height: p.height }}>
      {p.selectionColumn && <div role="gridcell" aria-colindex={1} className="sticky left-0 z-10 bg-background" />}
      {p.columns.map((col, i) => {
        const left = p.lefts[i]
        const text = values.get(col.key)
        return (
          <div
            key={col.key}
            role="gridcell"
            aria-colindex={i + (p.selectionColumn ? 1 : 0) + 1}
            data-col={col.key}
            data-numeric={col.numeric ? "" : undefined}
            title={text}
            className={cn("flex h-full min-w-0 items-center truncate px-2", alignClass(col), col.numeric && cn("justify-end", col.font === "mono" ? MONO_NUMERIC_CLASS : NUMERIC_CLASS), col.align === "center" && "justify-center", left !== undefined && "sticky z-10 bg-background")}
            style={left !== undefined ? { left } : undefined}
          >
            <span className="truncate">{text}</span>
          </div>
        )
      })}
    </div>
  )
}
const FooterRow = memo(FooterInner) as typeof FooterInner

export function DataGrid<T>(props: DataGridProps<T>) {
  const {
    store,
    columns,
    label,
    className,
    emptyState,
    getRowProps,
    getRowLabel,
    onRowActivate,
    renderContextMenu,
    footer,
    onEdit,
    initialRect,
    overscan = 8,
    baseState = EMPTY_COLUMN_STATE,
  } = props
  const preset = DATA_GRID_PRESETS[props.preset ?? "blotter"]
  const rowHeight = props.rowHeight ?? preset.rowHeight
  const selectionMode = props.selectionMode ?? preset.selectionMode
  const selectionColumn = Boolean(props.selectionColumn) && selectionMode === "multi"
  const rowEnter = { ...preset.rowEnter, ...props.rowEnter }
  const announceRowCount = props.announceRowCount ?? preset.announceRowCount
  // A window that isn't a finite length of zero or more would throw from the flash animation: the default stands in.
  const flashWindowMs = Number.isFinite(props.flashWindowMs) && props.flashWindowMs! >= 0 ? props.flashWindowMs! : 900
  // A word left undefined keeps its default.
  const labels = useMemo(() => ({ ...DEFAULT_DATA_GRID_LABELS, ...Object.fromEntries(Object.entries(props.labels ?? {}).filter(([, word]) => word !== undefined)) }) as DataGridLabels, [props.labels])
  // The words a timer says later, read when it fires.
  const latestLabels = useRef(labels)
  useInsertionEffect(() => {
    latestLabels.current = labels
  })
  const reorderHoldMs = props.reorderHoldMs ?? preset.reorderHoldMs

  const [sort, setSort] = useControllable(props.sort, props.onSortChange, null as SortState)
  const [columnState, setColumnState] = useControllable(props.columnState, props.onColumnStateChange, baseState)
  const [selection, setSelection] = useControllable(props.selection, props.onSelectionChange, EMPTY_SET)
  const [focusedRowId, setFocusedRowId] = useControllable<RowId | null>(props.focusedRowId, props.onFocusedRowChange, null)
  const [focusedColKey, setFocusedColKey] = useState<string | null>(null)
  const anchorRef = useRef<RowId | null>(null)

  // The view: yours, or one made from sort, filter, and the rules. A header sort comes first and the
  // rules' order breaks its ties; every filter rule has to hold, along with your own filter.
  const ruleSort = props.rules?.sort
  const ruleFilter = props.rules?.filter
  const ruleColumns = props.rules?.columns
  const comparator = useMemo(() => chainComparators(comparatorFor(columns, sort), ruleSort?.length ? compileComparator(ruleSort, columns) : undefined), [columns, sort, ruleSort])
  const ownFilter = props.filter
  const filter = useMemo(() => {
    const byRules = ruleFilter?.length ? compileFilter(ruleFilter, columns) : undefined
    if (!byRules) return ownFilter
    if (!ownFilter) return byRules
    return (row: T) => ownFilter(row) && byRules(row)
  }, [ownFilter, ruleFilter, columns])
  const rules = useMemo(() => (ruleColumns?.length ? applyRules(ruleColumns, columns) : null), [ruleColumns, columns])
  const ownOptions = useMemo(() => (props.view ? null : { comparator, filter, reorderHoldMs }), [props.view, comparator, filter, reorderHoldMs])
  const ownView = useView(store, ownOptions)
  const view = props.view ?? ownView!
  const ids = useRowIds(view)
  const indexOf = useMemo(() => new Map(ids.map((id, i) => [id, i] as const)), [ids])
  // A focused row the view lets go of hands focus to the row now at its place, the last row if it was last, so the keys
  // go on from where the trader was and a screen reader hears where focus went. Only a row the view held: focus a parent
  // sets on a row that hasn't arrived yet waits for it.
  const focusedAt = useRef<{ id: RowId; index: number } | null>(null)
  useLayoutEffect(() => {
    if (focusedRowId === null) {
      focusedAt.current = null
      return
    }
    const at = indexOf.get(focusedRowId)
    if (at !== undefined) {
      focusedAt.current = { id: focusedRowId, index: at }
      return
    }
    const was = focusedAt.current
    if (was?.id !== focusedRowId || ids.length === 0) return
    const index = Math.min(was.index, ids.length - 1)
    // The row asked for is the one recorded now: a parent that keeps the departed id is asked once, and one that applies
    // the row asked for after it has left too gets another.
    focusedAt.current = { id: ids[index]!, index }
    setFocusedRowId(ids[index]!)
  })

  const resolved = useMemo(() => resolveColumns(columns, columnState), [columns, columnState])
  if (focusedColKey !== null && !resolved.some(column => column.key === focusedColKey)) setFocusedColKey(null)
  const lefts = useMemo(() => {
    let x = selectionColumn ? SELECT_WIDTH : 0
    return resolved.map((c) => {
      if (c.frozen !== "left") return undefined
      const left = x
      x += c.width
      return left
    })
  }, [resolved, selectionColumn])
  const template = useMemo(() => (selectionColumn ? `${SELECT_WIDTH}px ` : "") + resolved.map((c) => `${c.width}px`).join(" "), [resolved, selectionColumn])
  const totalWidth = useMemo(() => resolved.reduce((s, c) => s + c.width, selectionColumn ? SELECT_WIDTH : 0), [resolved, selectionColumn])

  const memory = useMemo(() => createFlashMemory(), [])
  const scrollRef = useRef<HTMLDivElement>(null)
  const rootRef = useRef<HTMLDivElement>(null)
  const visibleEditColumns = useRef<ReadonlySet<string>>(EMPTY_SET)
  const editorFocusChecks = useRef(new Set<{ key: string; unavailable: boolean }>())

  // Scrolls a row into view. Set once the virtualizer exists; the controller calls it when an editor opens.
  const revealRow = useRef<(rowId: RowId) => void>(() => {})
  // The column layout as of this commit, published before any layout effect runs, so a reveal called from a cell's own
  // layout effect, in the commit that adds or moves its column, measures the new layout.
  const layout = useRef({ resolved, selectionColumn })
  useInsertionEffect(() => {
    layout.current = { resolved, selectionColumn }
  })
  // Sideways, a column comes clear of the frozen ones on the left and inside the viewport's right edge, its left edge
  // first when it is wider than the space between. A frozen column is always in view.
  const revealColumn = useRef((key: string) => {
    const el = scrollRef.current
    const { resolved, selectionColumn } = layout.current
    const i = resolved.findIndex((c) => c.key === key)
    if (!el || i < 0 || resolved[i]!.frozen === "left") return
    const lead = selectionColumn ? SELECT_WIDTH : 0
    let x = lead
    let stuck = lead
    for (let j = 0; j < resolved.length; j++) {
      if (j < i) x += resolved[j]!.width
      if (resolved[j]!.frozen === "left") stuck += resolved[j]!.width
    }
    const start = x - stuck
    const end = x + resolved[i]!.width - el.clientWidth
    if (el.scrollLeft > start) el.scrollLeft = start
    else if (el.scrollLeft < end) el.scrollLeft = Math.min(end, start)
  })
  // A column moved or resized by the keys or its header menu, with the order and width the request gives the columns
  // and the column focus it was asked under: the commit that lays the columns out exactly so, however late a controlled
  // parent applies the change, brings the column into view, and no other commit does.
  const columnToReveal = useRef<{ key: string; order: readonly string[]; width: number; focus: string | null } | null>(null)

  // Editing: one controller for the grid's life, reading the latest columns and onEdit through a ref, so the
  // memoized rows are handed one object and never re-render for it. Null without `onEdit`: nothing opens.
  const editLatest = useRef({ columns, resolved, onEdit, inView: (rowId: RowId) => indexOf.has(rowId), rejected: labels.rejected, notEditable: labels.notEditable })
  useInsertionEffect(() => {
    editLatest.current = { columns, resolved, onEdit, inView: (rowId: RowId) => indexOf.has(rowId), rejected: labels.rejected, notEditable: labels.notEditable }
  })
  const editable = Boolean(onEdit)
  const edits = useMemo<EditController | null>(() => {
    if (!editable) return null
    const tracker = createEditTracker()
    let activeColumn: string | null = null
    const cellsByKey = new Map<string, RowId>()
    const column = (key: string) => editLatest.current.columns.find((c) => c.key === key)
    const focusGrid = () => rootRef.current?.focus({ preventScroll: true })
    // A check reads the row as it shows: a value another of its cells sent is the one in view until the row brings it back.
    const withPending = (rowId: RowId, how: EditCommit): EditCommit => ({
      ...how,
      pending: (key) => {
        const now = tracker.get(cellKey(rowId, key))
        const out = now?.kind === "editing" ? now.prior : now
        return out?.kind === "pending" ? out.value : undefined
      },
    })
    const send = (rowId: RowId, col: ColumnDef<T> & { edit: CellEdit<T> }, row: T, value: unknown) => {
      const previous = col.accessor(row)
      const k = cellKey(rowId, col.key)
      if (Object.is(value, previous)) {
        tracker.set(k, undefined)
        return
      }
      tracker.set(k, { kind: "pending", value, text: editText(col, value, row), tracked: false })
      let result: void | Promise<unknown>
      try {
        result = editLatest.current.onEdit?.({ rowId, key: col.key, value, previous, row })
      } catch (error) {
        tracker.set(k, { kind: "rejected", value: previous, message: messageOf(error, editLatest.current.rejected) })
        return
      }
      if (result && typeof (result as Promise<unknown>).then === "function") {
        const started = tracker.get(k)
        if (started?.kind === "pending") tracker.set(k, { ...started, tracked: true })
        ;(result as Promise<unknown>).then(
          () => {
            const now = tracker.get(k)
            if (now?.kind === "pending" && Object.is(now.value, value)) tracker.set(k, undefined)
            // A reopened untouched editor covers the pending status as prior: the
            // settle rewrites it there, or the close would restore a pending with
            // no live promise behind it.
            else if (now?.kind === "editing" && now.prior?.kind === "pending" && Object.is(now.prior.value, value)) tracker.set(k, { ...now, prior: undefined })
          },
          (error: unknown) => {
            const now = tracker.get(k)
            if (now?.kind === "pending" && Object.is(now.value, value)) tracker.set(k, { kind: "rejected", value: previous, message: messageOf(error, editLatest.current.rejected) })
            else if (now?.kind === "editing" && now.prior?.kind === "pending" && Object.is(now.prior.value, value)) tracker.set(k, { ...now, prior: { kind: "rejected", value: previous, message: messageOf(error, editLatest.current.rejected) } })
          },
        )
      }
    }
    const moveOn = (rowId: RowId, key: string, move: 1 | -1 | undefined) => {
      if (!move) return focusGrid()
      const row = store.getRow(rowId)
      const list = editLatest.current.resolved
      let i = list.findIndex((c) => c.key === key) + move
      for (; i >= 0 && i < list.length; i += move) {
        const next = list[i]!
        if (canEditCell(next, row) && !next.edit.toggle) {
          setFocusedColKey(next.key)
          return open(rowId, next.key)
        }
      }
      focusGrid()
    }
    function open(rowId: RowId, key: string, typed?: string) {
      if (!visibleEditColumns.current.has(key)) return
      // A retained handle must not open an editor on a row the view no longer holds:
      // it would mount and take focus whenever the row next returned.
      if (!editLatest.current.inView(rowId)) return
      const col = column(key)
      const row = store.getRow(rowId)
      if (!canEditCell(col, row) || col.edit.toggle) return
      cellsByKey.set(cellKey(rowId, key), rowId)
      // Sideways as the row is below: the editor opens with its column in sight.
      revealColumn.current(key)
      const k = cellKey(rowId, key)
      const before = tracker.editing()
      if (before && before !== k) {
        const covered = tracker.get(before)
        cellsByKey.delete(before)
        tracker.set(before, covered?.kind === "editing" ? covered.prior : undefined)
      }
      // A pending cell reopens on what it shows, the committed value, not on the value the store still holds.
      const now = tracker.get(k)
      // Reopening the cell already being edited is a request for focus, not a reset:
      // the draft, its problem, and what the editor covers all stay. A blur always
      // resolves the editor, so one open without focus comes from a remount (above).
      if (now?.kind === "editing" && typed === undefined) {
        activeColumn = key
        tracker.set(k, { ...now, selectAll: true, focused: false })
        revealRow.current(rowId)
        return
      }
      const text = now?.kind === "pending" ? now.text : editText(col, col.accessor(row!), row!)
      activeColumn = key
      // The status this editor replaced comes back if it closes untouched: reopening a
      // pending cell and leaving must not erase a promise-backed pending or a later
      // rejection. A pending with no live promise can never settle, so reopening
      // dismisses it the way v1 did — any close then clears the cell.
      const covered = now?.kind === "editing" ? now.prior : now
      const prior = covered?.kind === "pending" && !covered.tracked ? undefined : covered
      tracker.set(k, { kind: "editing", text: typed ?? text, problem: null, selectAll: typed === undefined, initial: typed === undefined ? text : null, focused: false, prior, session: ++editorOpenings })
      // The editing row is always rendered (see `keep` below), so its editor mounts and takes focus now; bring it
      // to where the keys are, which for a row scrolled out of the window is not where the viewport is.
      revealRow.current(rowId)
    }
    const controller: EditController = {
      tracker,
      editorFocusFell: { current: false },
      reconcileColumns(keys) {
        const active = tracker.editing()
        if (active !== null && activeColumn !== null && !keys.has(activeColumn)) {
          const covered = tracker.get(active)
          cellsByKey.delete(active)
          tracker.set(active, covered?.kind === "editing" ? covered.prior : undefined)
        }
      },
      unmountEditor(key, input) {
        const doc = input.ownerDocument
        // Asked of the input's own tree: inside a shadow root the document's active element is the host.
        const root = focusRoot(input)
        if (root.activeElement !== input) return
        controller.editorFocusFell.current = true
        const check = { key, unavailable: !visibleEditColumns.current.has(key) }
        editorFocusChecks.current.add(check)
        // Remember the removal commit even if the column returns before this focus check runs.
        queueMicrotask(() => {
          editorFocusChecks.current.delete(check)
          const grid = rootRef.current
          if (input.isConnected || !check.unavailable || !grid?.isConnected || grid.ownerDocument !== doc) return
          if (!focusFell(root, doc, input)) return
          focusGrid()
        })
      },
      open,
      rowOf: (k: string) => cellsByKey.get(k),
      forget: (k: string) => void cellsByKey.delete(k),
      markFocused(rowId, key) {
        const k = cellKey(rowId, key)
        const now = tracker.get(k)
        if (now?.kind === "editing" && !now.focused) tracker.set(k, { ...now, focused: true })
      },
      type(rowId, key, text) {
        const k = cellKey(rowId, key)
        const now = tracker.get(k)
        if (now?.kind === "editing") tracker.set(k, { ...now, text, problem: null })
      },
      commit(rowId, key, how, move) {
        const k = cellKey(rowId, key)
        const now = tracker.get(k)
        if (now?.kind !== "editing") return
        // Opened and left unchanged: a format that rounds must not turn looking into
        // an edit, so the untouched text sends nothing and the covered state comes
        // back — ahead of the permission check, so a revocation mid-look cannot
        // erase a pending or rejected state the way it refuses a real change.
        if (now.initial != null && now.text === now.initial) {
          cellsByKey.delete(k)
          tracker.set(k, now.prior)
          moveOn(rowId, key, move)
          return
        }
        const col = column(key)
        const row = store.getRow(rowId)
        if (!canEditCell(col, row)) {
          // The row is still here and the server stopped allowing the edit: the typed text stays, saying so, until
          // Escape or the edit is allowed again. A row or column that left takes the editor with it.
          if (row !== undefined && col?.edit) return tracker.set(k, { ...now, problem: editLatest.current.notEditable })
          cellsByKey.delete(k)
          tracker.set(k, now.prior)
          return focusGrid()
        }
        const parsed = col.edit.parse(now.text, row!)
        const problem = isEditProblem(parsed) ? parsed : col.edit.validate?.(parsed, row!, withPending(rowId, how))
        if (problem) {
          tracker.set(k, { ...now, problem: problem.problem })
          return
        }
        cellsByKey.delete(k)
        send(rowId, col, row!, parsed)
        moveOn(rowId, key, move)
      },
      commitValue(rowId, key, value, repeat = false) {
        const col = column(key)
        const row = store.getRow(rowId)
        if (!canEditCell(col, row)) return
        const problem = col.edit.validate?.(value, row!, withPending(rowId, { via: "value", repeat, session: 0 }))
        if (problem) {
          tracker.set(cellKey(rowId, key), { kind: "rejected", value: col.accessor(row!), message: problem.problem })
          return
        }
        send(rowId, col, row!, value)
      },
      cancel(rowId, key) {
        const k = cellKey(rowId, key)
        cellsByKey.delete(k)
        const now = tracker.get(k)
        if (now?.kind === "editing") tracker.set(k, now.prior)
        focusGrid()
      },
      step(rowId, key, dir, big) {
        const k = cellKey(rowId, key)
        const now = tracker.get(k)
        const col = column(key)
        const row = store.getRow(rowId)
        if (now?.kind !== "editing" || !canEditCell(col, row) || !col.edit.step) return
        const typed = col.edit.parse(now.text, row!)
        const from = isEditProblem(typed) ? col.accessor(row!) : typed
        const next = col.edit.step(from, dir, big, row!)
        tracker.set(k, { ...now, text: editText(col, next, row!), problem: null })
      },
      blur(rowId, key) {
        const k = cellKey(rowId, key)
        cellsByKey.delete(k)
        const now = tracker.get(k)
        if (now?.kind !== "editing") return
        if (now.initial != null && now.text === now.initial) return tracker.set(k, now.prior)
        const col = column(key)
        const row = store.getRow(rowId)
        if (!canEditCell(col, row)) return tracker.set(k, now.prior)
        const parsed = col.edit.parse(now.text, row!)
        if (isEditProblem(parsed) || col.edit.validate?.(parsed, row!, withPending(rowId, { via: "blur", repeat: false, session: now.session ?? 0 }))) return tracker.set(k, now.prior)
        send(rowId, col, row!, parsed)
      },
      settle(rowId, key) {
        const k = cellKey(rowId, key)
        if (tracker.get(k)?.kind === "pending") tracker.set(k, undefined)
      },
      settlePrior(rowId, key) {
        const k = cellKey(rowId, key)
        const now = tracker.get(k)
        if (now?.kind === "editing" && now.prior?.kind === "pending") tracker.set(k, { ...now, prior: undefined })
      },
    }
    return controller
  }, [editable, store])
  // Publish committed visibility before custom cells run layout effects; notify trackers in layout.
  useInsertionEffect(() => {
    visibleEditColumns.current = edits ? new Set(resolved.filter(col => col.edit && !col.edit.toggle).map(col => col.key)) : EMPTY_SET
    for (const check of editorFocusChecks.current) {
      if (!visibleEditColumns.current.has(check.key)) check.unavailable = true
    }
  }, [edits, resolved])
  useLayoutEffect(() => {
    edits?.reconcileColumns(visibleEditColumns.current)
  }, [edits, resolved])
  // A row that a filter or removal takes out of the view takes its open editor
  // with it; the editor cannot then grab focus back when the row returns, and focus
  // its unmount dropped on body comes home to the grid — only then: a feed commit
  // that closes a never-focused editor moves nothing.
  useLayoutEffect(() => {
    if (!edits) return
    // Read-and-clear up front: the flag answers for this commit's unmount only,
    // never for a Tab chain or scroll-out from some earlier one.
    const fell = edits.editorFocusFell.current
    edits.editorFocusFell.current = false
    const k = edits.tracker.editing()
    if (k === null) return
    const rowId = edits.rowOf(k)
    if (rowId !== undefined && !indexOf.has(rowId)) {
      const covered = edits.tracker.get(k)
      edits.forget(k)
      edits.tracker.set(k, covered?.kind === "editing" ? covered.prior : undefined)
      const grid = rootRef.current
      if (fell && grid && focusFell(focusRoot(grid), grid.ownerDocument)) grid.focus({ preventScroll: true })
    }
  }, [edits, indexOf])
  // The row whose editor is open, so the grid renders again when an editor opens on another row, or closes.
  const subscribeOpenEditor = useCallback((cb: () => void) => (edits ? edits.tracker.subscribeOpen(cb) : noopSubscribe()), [edits])
  const openEditor = useSyncExternalStore(subscribeOpenEditor, () => edits?.tracker.editing() ?? null, () => null)
  const editingRowId = openEditor === null ? undefined : edits?.rowOf(openEditor)
  // The focused row and the row being edited are rendered wherever the viewport is: aria-activedescendant names an
  // element that exists, Shift+F10 opens on a row that is there, and an editor scrolled or re-sorted out of the window
  // keeps its input, its draft, and its focus instead of dropping them on the page.
  const keep = useMemo(() => {
    const kept: number[] = []
    for (const id of [focusedRowId, editingRowId]) {
      const i = id === null || id === undefined ? undefined : indexOf.get(id)
      if (i !== undefined && !kept.includes(i)) kept.push(i)
    }
    return kept
  }, [focusedRowId, editingRowId, indexOf])
  const rangeExtractor = useCallback((range: Range) => {
    const indexes = defaultRangeExtractor(range)
    const extra = keep.filter((i) => i < range.count && !indexes.includes(i))
    return extra.length ? [...indexes, ...extra].sort((a, b) => a - b) : indexes
  }, [keep])
  const virtualizer = useVirtualizer({
    count: ids.length,
    getScrollElement: () => scrollRef.current,
    estimateSize: () => rowHeight,
    overscan,
    getItemKey: (i) => ids[i]!,
    rangeExtractor,
    initialRect,
    // The sticky header sits in normal flow above the rows, so row i really starts at
    // (i+1) x rowHeight inside the scroller: scrollMargin tells the virtualizer so, and
    // the paddings keep an aligned row clear of the sticky header above and the sticky
    // footer below. Rows keep rendering at v.start - scrollMargin inside the rowgroup,
    // which itself sits after the header, so nothing moves visually.
    scrollMargin: rowHeight,
    scrollPaddingStart: rowHeight,
    scrollPaddingEnd: footer ? rowHeight : 0,
  })
  const items = virtualizer.getVirtualItems()
  // Published before any layout effect runs, so an editor a cell opens from its own layout effect, in the commit that
  // adds its row, scrolls to where the row now is.
  useInsertionEffect(() => {
    revealRow.current = (rowId) => {
      const i = indexOf.get(rowId)
      if (i !== undefined) virtualizer.scrollToIndex(i, { align: "auto" })
    }
  })
  // A row focus moves to, by the keys, a parent, or a hand-off, comes into view, as does a row focus waited for when it
  // arrives; a row already in view stays where it is.
  const focusedInView = focusedRowId !== null && indexOf.has(focusedRowId)
  useLayoutEffect(() => {
    if (focusedRowId !== null && focusedInView) revealRow.current(focusedRowId)
  }, [focusedRowId, focusedInView])
  useLayoutEffect(() => {
    const pending = columnToReveal.current
    if (pending !== null) {
      const i = resolved.findIndex((c) => c.key === pending.key)
      if (pending.focus !== focusedColKey || i < 0) columnToReveal.current = null
      else if (resolved.length === pending.order.length && resolved.every((c, k) => c.key === pending.order[k]) && resolved[i]!.width === pending.width) {
        columnToReveal.current = null
        revealColumn.current(pending.key)
      }
    }
  })
  const uid = useId()
  // Escaped, so any row id makes one IDREF, and prefixed apart from the cells' ids, so none collide.
  const domId = useCallback((id: RowId) => `${uid}-r-${idPart(id)}`, [uid])

  // A tape follows its tail: new rows land at the end and the viewport goes there after every commit,
  // until a key, a pointer, or a scroll away from the end stops it. Then the arrivals count up on a
  // pill, and pressing it, or scrolling back to the end, follows again. Both are state set from
  // handlers, so the effect below only reads them.
  const followTail = Boolean(rowEnter.followTail)
  const [following, setFollowing] = useState(true)
  // The store's rows when following stopped: the button counts the rows in view since that the store didn't hold, so a
  // filter letting rows back in, or rows leaving, never reads as news.
  const [pausedStore, setPausedStore] = useState<ReadonlySet<RowId> | null>(null)
  const behind = useMemo(() => (followTail && !following && pausedStore ? ids.reduce((n, id) => (pausedStore.has(id) ? n : n + 1), 0) : 0), [followTail, following, pausedStore, ids])
  useLayoutEffect(() => {
    if (followTail && scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight
  }, [followTail])

  // Arrival marks, in the insertion phase: all insertion effects for a commit run
  // before any layout effect, so a row mounting in the commit of its arrival finds
  // its mark — a mount-only layout effect in the row checks after this has written.
  // A mark parked by a reorder hold carries that hold's deadline, captured at
  // arrival: its window starts when the hold lapses, however late the release is
  // observed, and no later hold can touch it. The grid's own touches extend the
  // deadlines of marks still parked, synchronously, where an extension cannot be
  // mistaken for a new hold; extending a supplied view directly leaves them, so
  // that extension shortens the remainder rather than restarting it.
  const entered = useRef(new Map<RowId, EnterMark>()).current
  // After a touch extends the hold, move still-parked marks to the new deadline.
  // Only unexpired marks move: one whose hold already lapsed belongs to a finished
  // hold, and the touch that follows starts a new one that must not revive it.
  const refreshParkedMarks = () => {
    const deadline = view.isHeld() ? (view.holdExpiresAt?.() ?? null) : null
    if (deadline === null) return
    const now = Date.now()
    for (const [id, mark] of entered) if (mark.until !== null && mark.until > now && mark.until < deadline) entered.set(id, { at: mark.at, until: deadline })
    scheduleReleaseSweep()
  }
  // A release that reorders nothing publishes nothing, so no commit observes it:
  // the deadline timer plays those flashes. Rendered commits sweep synchronously
  // and the timer re-arms for whatever is still parked.
  const sweepTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const highlightRef = useRef(rowEnter.highlight)
  useInsertionEffect(() => { highlightRef.current = rowEnter.highlight }, [rowEnter.highlight])
  const sweepDueMarks = useCallback(() => {
    // The ref, not the closure: a timer armed before highlighting turned off must
    // not flash on a stale true while the stand-down effect is still queued.
    if (!highlightRef.current || !scrollRef.current) return
    const now = Date.now()
    let due: Map<RowId, number> | null = null
    for (const [id, mark] of entered) {
      if (mark.until !== null && now >= mark.until) {
        const elapsed = now - enterStart(mark, now)
        if (elapsed < ENTER_WINDOW_MS) (due ??= new Map()).set(id, elapsed)
        else entered.delete(id)
      }
    }
    if (due) {
      for (const el of scrollRef.current.querySelectorAll<HTMLElement>("[data-row-id]")) {
        const id = el.dataset.rowId
        const elapsed = id !== undefined ? due.get(id) : undefined
        // A nested grid's rows can share ids with this one: the DOM id says whose row this is.
        if (id !== undefined && elapsed !== undefined && el.id === domId(id)) {
          entered.delete(id)
          playFlash(el, "flat", { windowMs: ENTER_WINDOW_MS, variant: "fill", elapsed })
        }
      }
    }
  }, [entered, domId])
  const scheduleReleaseSweep = useCallback(() => {
    if (sweepTimerRef.current !== null) clearTimeout(sweepTimerRef.current)
    sweepTimerRef.current = null
    const now = Date.now()
    let next = Infinity
    for (const [, mark] of entered) if (mark.until !== null && mark.until > now) next = Math.min(next, mark.until)
    if (next === Infinity) return
    sweepTimerRef.current = setTimeout(() => {
      sweepTimerRef.current = null
      sweepDueMarks()
      scheduleReleaseSweep()
    }, Math.min(next - now, 2 ** 31 - 1))
  }, [entered, sweepDueMarks])
  useEffect(() => () => { if (sweepTimerRef.current !== null) clearTimeout(sweepTimerRef.current) }, [])
  useEffect(() => {
    if (rowEnter.highlight) return
    // Highlighting turned off: an armed timer would fire its old closure and
    // flash anyway, and unobserved marks would linger. Stand both down.
    if (sweepTimerRef.current !== null) clearTimeout(sweepTimerRef.current)
    sweepTimerRef.current = null
    entered.clear()
  }, [rowEnter.highlight, entered])
  const prevIdsRef = useRef<readonly RowId[]>(ids)
  const markIdsRef = useRef<readonly RowId[]>(ids)
  const newSinceAnnounce = useRef(0)
  // One diff per commit: the insertion effect computes it and the layout effect
  // consumes it, so an order change builds two id sets, not four.
  const diffRef = useRef<{ prev: readonly RowId[]; entering: RowId[]; arrived: RowId[]; departed: RowId[] } | null>(null)
  // The rows the store has held, from mount on: a row entering the view is an arrival only when the store didn't hold
  // it, so a row a filter lets back in neither flashes nor counts as new. Every row entering still moves the viewport.
  const knownIds = useRef<{ store: RowStore<T>; ids: Set<RowId> } | null>(null)
  useInsertionEffect(() => {
    const prev = markIdsRef.current
    // Another store starts known as it stands, so its rows don't all read as arrivals.
    if (knownIds.current?.store !== store) knownIds.current = { store, ids: new Set(store.getIds()) }
    const known = knownIds.current.ids
    if (prev === ids) return
    markIdsRef.current = ids
    const prevSet = new Set(prev)
    const nowSet = new Set(ids)
    const entering: RowId[] = []
    const arrived: RowId[] = []
    for (const id of ids) {
      if (prevSet.has(id)) continue
      entering.push(id)
      if (!known.has(id)) arrived.push(id)
      known.add(id)
    }
    const departed: RowId[] = []
    for (const id of prev) {
      if (nowSet.has(id)) continue
      departed.push(id)
      if (store.getRow(id) === undefined) known.delete(id)
    }
    // A row the store let go of while out of view stays known: past twice the store, start again from what it holds.
    if (known.size > 2 * store.getIds().length + 64) knownIds.current = { store, ids: new Set(store.getIds()) }
    diffRef.current = { prev, entering, arrived, departed }
    if (!rowEnter.highlight) return
    const at = Date.now()
    const until = view.isHeld() ? (view.holdExpiresAt?.() ?? null) : null
    for (const id of arrived) entered.set(id, { at, until })
    for (const [id, mark] of entered) {
      if (!nowSet.has(id)) entered.delete(id)
      else if (at - enterStart(mark, at) >= ENTER_WINDOW_MS) entered.delete(id)
    }
    if (until !== null) scheduleReleaseSweep()
  }, [ids, rowEnter.highlight, entered, view, store])

  // The scroll work stays in the layout phase, where refs belong to this commit:
  // pin the viewport, follow the tail, count arrivals, forget departed flashes.
  useLayoutEffect(() => {
    const prev = prevIdsRef.current
    if (prev === ids) return
    // The insertion effect stashed this commit's diff; a StrictMode replay reaches
    // the early return above, so a stale stash is never consumed twice.
    const stash = diffRef.current
    const fresh = stash !== null && stash.prev === prev
    const entering = fresh ? stash.entering : []
    // Without this commit's diff there's no telling arrivals from rows let back in, so none is counted as new.
    const arrived = fresh ? stash.arrived : []
    const departed = fresh ? stash.departed : []
    if (!fresh) {
      const prevSet = new Set(prev)
      const nowSet = new Set(ids)
      for (const id of ids) if (!prevSet.has(id)) (entering as RowId[]).push(id)
      for (const id of prev) if (!nowSet.has(id)) (departed as RowId[]).push(id)
    }
    diffRef.current = null
    for (const id of departed) memory.forget(`${id}\u0000`)
    if ((entering.length || departed.length) && rowEnter.pinViewport && scrollRef.current) {
      const el = scrollRef.current
      const firstIndex = Math.floor(el.scrollTop / rowHeight)
      const firstId = prev[firstIndex]
      const nextIndex = firstId !== undefined ? indexOf.get(firstId) : undefined
      if (nextIndex !== undefined && nextIndex !== firstIndex) el.scrollTop += (nextIndex - firstIndex) * rowHeight
    }
    if (entering.length && followTail && following && scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight
    newSinceAnnounce.current += arrived.length
    prevIdsRef.current = ids
  }, [ids, indexOf, rowHeight, rowEnter.pinViewport, followTail, following, memory])

  const stopFollowing = () => {
    if (!followTail || !following) return
    setFollowing(false)
    setPausedStore(new Set(store.getIds()))
  }
  const toTail = (e: MouseEvent<HTMLButtonElement>) => {
    // The button goes once following resumes: focus on it moves to the grid first, rather than fall to the page.
    // Inside a shadow root the document's active element is the host, so ask the root the button is in.
    if ((e.currentTarget.getRootNode() as Document | ShadowRoot).activeElement === e.currentTarget) rootRef.current?.focus({ preventScroll: true })
    const el = scrollRef.current
    if (el) el.scrollTop = el.scrollHeight
    setFollowing(true)
  }
  const onScroll = followTail
    ? (e: UIEvent<HTMLDivElement>) => {
        const el = e.currentTarget
        const atTail = el.scrollTop + el.clientHeight >= el.scrollHeight - 1
        if (atTail === following) return
        if (atTail) setFollowing(true)
        else stopFollowing()
      }
    : undefined

  const [announcement, setAnnouncement] = useState("")
  useEffect(() => {
    if (announceRowCount === "off") return
    const t = setTimeout(() => {
      const fresh = newSinceAnnounce.current
      newSinceAnnounce.current = 0
      const { rowCount } = latestLabels.current
      setAnnouncement(typeof rowCount === "function" ? rowCount(ids.length, fresh) : fillLabel(rowCount, { n: ids.length, m: fresh }))
    }, 1000)
    return () => clearTimeout(t)
  }, [ids.length, announceRowCount])
  useEffect(() => {
    if (!announcement) return
    const t = setTimeout(() => setAnnouncement(""), SPOKEN_MS)
    return () => clearTimeout(t)
  }, [announcement])

  // A row named by `getRowLabel` keeps its name while its cells tick, so its cells are read here instead: once, when
  // focus rests on a row (another row, or the grid taking focus), and never because a cell changed.
  const readsRows = typeof getRowLabel === "function"
  const [reading, setReading] = useState("")
  const [arrivals, setArrivals] = useState(0)
  useEffect(() => {
    if (!readsRows || focusedRowId === null) return
    const t = setTimeout(() => {
      const root = rootRef.current
      // Inside a shadow root the document's active element is the host, so ask the root the grid is in.
      if (!root || (root.getRootNode() as Document | ShadowRoot).activeElement !== root) return
      const id = domId(focusedRowId)
      const row = Array.from(root.querySelectorAll<HTMLElement>('[role="row"][data-row-id]')).find((el) => el.id === id)
      const text = row ? rowReading(row) : ""
      // The same words again would change nothing a live region hears, so a repeat differs by an invisible character.
      if (text) setReading((was) => (was === text ? `${text}\u200b` : text))
    }, ROW_READING_REST_MS)
    return () => clearTimeout(t)
  }, [readsRows, focusedRowId, arrivals, domId])
  useEffect(() => {
    if (!reading) return
    const t = setTimeout(() => setReading(""), SPOKEN_MS)
    return () => clearTimeout(t)
  }, [reading])

  // Selection and focus, by id.
  const select = useCallback(
    (targets: RowId[], mode: "replace" | "toggle" | "range") => {
      if (selectionMode === "none") return
      if (selectionMode === "single" || mode === "replace") {
        setSelection(new Set(targets.slice(-1)))
        anchorRef.current = targets[targets.length - 1] ?? null
        return
      }
      const next = new Set(selection)
      if (mode === "toggle") {
        for (const id of targets) if (next.has(id)) next.delete(id)
        else next.add(id)
        anchorRef.current = targets[targets.length - 1] ?? anchorRef.current
      } else {
        const to = targets[targets.length - 1]!
        const from = anchorRef.current ?? to
        // Capture and focus callbacks can publish a new order before this render commits.
        const currentIds = view.getIds()
        const a = currentIds === ids ? indexOf.get(from) ?? 0 : Math.max(0, currentIds.indexOf(from))
        const b = currentIds === ids ? indexOf.get(to) ?? -1 : currentIds.indexOf(to)
        if (b < 0) return
        for (let i = Math.min(a, b); i <= Math.max(a, b); i++) next.add(currentIds[i]!)
      }
      setSelection(next)
    },
    [ids, indexOf, selection, selectionMode, setSelection, view],
  )

  const focusIndex = useCallback(
    (index: number, extend = false) => {
      if (!ids.length) return
      const i = Math.max(0, Math.min(ids.length - 1, index))
      const id = ids[i]!
      setFocusedRowId(id)
      virtualizer.scrollToIndex(i, { align: "auto" })
      if (extend && selectionMode === "multi") select([id], "range")
      else if (selectionMode === "single") select([id], "replace")
    },
    [ids, select, selectionMode, setFocusedRowId, virtualizer],
  )

  const cycleSort = useCallback(
    (key: string) => {
      const col = columns.find((c) => c.key === key)
      if (!col?.sortable) return
      setSort(!sort || sort.key !== key ? { key, dir: "asc" } : sort.dir === "asc" ? { key, dir: "desc" } : null)
    },
    [columns, sort, setSort],
  )

  const updateColumns = useCallback(
    (fn: (s: ColumnState) => ColumnState) => setColumnState(fn(columnState)),
    [columnState, setColumnState],
  )
  const moveColumn = useCallback(
    (key: string, delta: -1 | 1) => {
      const order = resolved.map((c) => c.key)
      const i = order.indexOf(key)
      const j = i + delta
      if (i < 0 || j < 0 || j >= order.length) return
      ;[order[i], order[j]] = [order[j]!, order[i]!]
      updateColumns((s) => ({ ...s, order }))
    },
    [resolved, updateColumns],
  )
  const resizeColumn = useCallback(
    (key: string, width: number) => {
      const col = resolved.find((c) => c.key === key)
      if (!col) return
      // A drag or a key that leaves the width as it is, at the minimum, changes nothing.
      const next = Math.max(col.minWidth, Math.round(width))
      if (next === col.width) return
      updateColumns((s) => ({ ...s, widths: { ...s.widths, [key]: next } }))
    },
    [resolved, updateColumns],
  )
  const hideColumn = useCallback((key: string) => updateColumns((s) => ({ ...s, hidden: [...new Set([...s.hidden, key])] })), [updateColumns])
  const resetColumns = useCallback(() => setColumnState(baseState), [baseState, setColumnState])
  // A move or resize the keys or a header menu ask for. A request that can't change the layout changes nothing: past
  // either end, across the frozen boundary (frozen columns lead whatever the order says), or under the minimum width.
  // Otherwise it's recorded before the state changes, so a commit the change flushes at once still finds it.
  const requestColumn = (key: string, change: { move: -1 | 1 } | { widen: number }) => {
    const i = resolved.findIndex((c) => c.key === key)
    const at = resolved[i]
    if (!at) return
    const order = resolved.map((c) => c.key)
    if ("move" in change) {
      const beside = resolved[i + change.move]
      if (!beside || (beside.frozen === "left") !== (at.frozen === "left")) return
      ;[order[i], order[i + change.move]] = [beside.key, at.key]
      columnToReveal.current = { key, order, width: at.width, focus: focusedColKey }
      moveColumn(key, change.move)
    } else {
      const width = Math.max(at.minWidth, Math.round(at.width + change.widen))
      if (width === at.width) return
      columnToReveal.current = { key, order, width, focus: focusedColKey }
      resizeColumn(key, width)
    }
  }
  // A key that moves row focus brings the focused column back too, should a wheel have scrolled it away.
  const revealFocusedColumn = () => {
    if (focusedColKey !== null) revealColumn.current(focusedColKey)
  }

  // The sticky header and footer each cover one row of the viewport.
  const visibleCount = Math.max(1, Math.floor((scrollRef.current?.clientHeight ?? initialRect?.height ?? rowHeight * 10) / rowHeight) - 1 - (footer ? 1 : 0))

  // The focused cell's column when it can be edited now, else undefined.
  const editableFocus = () => {
    if (!edits || focusedRowId === null || focusedColKey === null) return undefined
    const col = resolved.find((c) => c.key === focusedColKey)
    return canEditCell(col, store.getRow(focusedRowId)) ? col : undefined
  }

  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    // Nested grids and portals own their keys, including reorder holds and following.
    const path = e.nativeEvent.composedPath()
    if (!gridTarget(e.currentTarget, e.target, path)) return
    // A key is interaction wherever in the grid it lands, the editor included: it holds the order, so a batch cannot
    // re-sort the row being typed into away from the hand while a hold lasts, and it stops a tape following its tail.
    view.touch()
    refreshParkedMarks()
    stopFollowing()
    // The editor owns its keys; what it lets through (a modifier-held arrow) is for the listeners above the grid.
    if (pathMatches(e.currentTarget, path, element => element.hasAttribute("data-cell-editor"))) return
    // Focused controls own their keys; application handlers can also claim a grid key in capture.
    if (e.defaultPrevented || e.target !== e.currentTarget) return
    const fi = focusedRowId !== null ? (indexOf.get(focusedRowId) ?? -1) : -1
    const ci = focusedColKey !== null ? resolved.findIndex((c) => c.key === focusedColKey) : -1
    const mod = e.metaKey || e.ctrlKey
    // Commands that act on the focused row require it to be in the current view, the
    // same bar aria-activedescendant holds: a row a filter or removal took out is not
    // silently activated, edited, selected, or menued.
    const focusedInView = fi >= 0
    // Typing on an editable cell opens its editor with the character typed.
    if (focusedInView && !e.repeat && e.key.length === 1 && e.key !== " " && !mod && !e.altKey) {
      const col = editableFocus()
      if (col && !col.edit.toggle) {
        e.preventDefault()
        edits!.open(focusedRowId!, col.key, e.key)
        return
      }
    }
    const letter = altLetter(e)
    if ((letter === "s" || letter === "h") && focusedColKey) {
      e.preventDefault()
      // Once per press: a held Alt+S would cycle the sort on every repeat, and a parent that hasn't applied a hide yet
      // would be asked again on every repeat.
      if (e.repeat) return
      if (letter === "s") cycleSort(focusedColKey)
      else hideColumn(focusedColKey)
      return
    }
    switch (e.key) {
      case "ArrowDown":
        e.preventDefault()
        focusIndex(fi + 1, e.shiftKey)
        revealFocusedColumn()
        return
      case "ArrowUp":
        e.preventDefault()
        focusIndex(fi <= 0 ? 0 : fi - 1, e.shiftKey)
        revealFocusedColumn()
        return
      case "PageDown":
        e.preventDefault()
        focusIndex(fi + visibleCount, e.shiftKey)
        revealFocusedColumn()
        return
      case "PageUp":
        e.preventDefault()
        focusIndex(fi - visibleCount, e.shiftKey)
        revealFocusedColumn()
        return
      case "Home":
        e.preventDefault()
        focusIndex(0, e.shiftKey)
        revealFocusedColumn()
        return
      case "End":
        e.preventDefault()
        focusIndex(ids.length - 1, e.shiftKey)
        revealFocusedColumn()
        return
      case "ArrowLeft":
      case "ArrowRight": {
        e.preventDefault()
        const delta = e.key === "ArrowLeft" ? -1 : 1
        if (e.altKey && focusedColKey) {
          // The commit that lays the columns out as asked brings the column into view; focus or a pointer moving on
          // first drops the request, and a layout the parent changes or never applies doesn't scroll the grid for it.
          requestColumn(focusedColKey, e.shiftKey ? { widen: delta * 8 } : { move: delta })
          return
        }
        const next = resolved[Math.max(0, Math.min(resolved.length - 1, ci < 0 ? (delta > 0 ? 0 : resolved.length - 1) : ci + delta))]
        setFocusedColKey(next?.key ?? null)
        // Focus moved into a column whose place hasn't changed: bring it into view now, so a key typed next edits a
        // column in sight.
        if (next) revealColumn.current(next.key)
        return
      }
      case " ": {
        e.preventDefault()
        // A held Space acts once, as a native checkbox's does: each repeat would toggle the value the server
        // just acknowledged, or the row's selection, back again.
        if (!focusedInView || e.repeat) return
        const col = editableFocus()
        if (col?.edit.toggle) {
          const row = store.getRow(focusedRowId!)!
          // A toggle commits where it can be seen, as an editor opens.
          revealColumn.current(col.key)
          edits!.commitValue(focusedRowId!, col.key, col.edit.toggle(col.accessor(row), row), false)
          return
        }
        if (focusedRowId !== null) select([focusedRowId], selectionMode === "multi" ? "toggle" : "replace")
        return
      }
      case "Enter":
      case "F2": {
        if (!focusedInView) return
        const col = editableFocus()
        if (col) {
          e.preventDefault()
          // Once per press: a held key would commit a toggle again, or close and reopen an editor on each repeat.
          if (e.repeat) return
          const row = store.getRow(focusedRowId!)!
          if (col.edit.toggle) {
            revealColumn.current(col.key)
            edits!.commitValue(focusedRowId!, col.key, col.edit.toggle(col.accessor(row), row), false)
          } else edits!.open(focusedRowId!, col.key)
          return
        }
        if (e.key === "F2") return
        if (focusedRowId !== null) {
          const row = store.getRow(focusedRowId)
          // A held Enter activates the row once, as a held key commits a toggle once.
          if (row !== undefined && !e.repeat) onRowActivate?.(row, focusedRowId)
        }
        return
      }
      case "Escape":
        // Once per press: the repeats of an Escape that closed an editor land here and would clear the selection.
        if (!e.repeat && selectionMode !== "none" && selection.size) setSelection(EMPTY_SET)
        return
      case "a":
      case "A":
        if (mod && selectionMode === "multi") {
          e.preventDefault()
          if (!e.repeat) setSelection(new Set(ids))
        }
        return
      case "ContextMenu":
      case "F10":
        if (e.key === "F10" && !e.shiftKey) return
        e.preventDefault()
        if (!e.repeat) openContextMenuAtFocus()
        return
    }
  }

  const openContextMenuAtFocus = () => {
    if (focusedRowId === null) return
    const root = rootRef.current
    const id = domId(focusedRowId)
    // The focused row renders even outside the window: bring it into view, so the menu opens where it can be seen.
    const index = indexOf.get(focusedRowId)
    if (index !== undefined) virtualizer.scrollToIndex(index, { align: "auto" })
    const el = Array.from(root?.querySelectorAll<HTMLElement>('[role="row"][data-row-id]') ?? []).find(row => row.id === id)
    const ownerWindow = el?.ownerDocument.defaultView
    if (!el || !ownerWindow || !gridTarget(root, el)) return
    // At the focused cell, brought into view first, as a wheel may have scrolled it away, else the row's visible left
    // edge: scrolled sideways, the row's own left edge sits off to the left of the grid.
    if (focusedColKey !== null) revealColumn.current(focusedColKey)
    const r = el.getBoundingClientRect()
    const cell = focusedColKey === null ? undefined : Array.from(el.children).find((child) => child.getAttribute("data-col") === focusedColKey)
    const port = scrollRef.current?.getBoundingClientRect()
    const left = cell ? cell.getBoundingClientRect().left : Math.max(r.left, port?.left ?? r.left)
    el.dispatchEvent(new ownerWindow.MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: left + 8, clientY: r.top + r.height / 2, button: 2 }))
  }

  const rowTarget = (event: { target: EventTarget; nativeEvent: Event }, includeShadowTarget = false) => {
    const path = event.nativeEvent.composedPath()
    const root = rootRef.current
    // Menu starts can reach the primitive before a shadow portal's host-targeted pass.
    const target = includeShadowTarget && !root?.contains(event.target as Node)
      ? path.find(entry => (entry as Node).nodeType === 1 && root?.contains(entry as Node)) ?? event.target
      : event.target
    const element = gridTarget(root, target, path)
    if (!element || pathMatches(root, path, element => element.matches(ROW_CONTROLS) || CONTROL_ROLES.has(roleOf(element) ?? ""))) return undefined
    const row = element.closest<HTMLElement>('[role="row"][data-row-id]')
    const id = row?.dataset.rowId
    if (id === undefined || row?.id !== domId(id) || !indexOf.has(id) || store.getRow(id) === undefined) return undefined
    // A capture handler may change membership before React commits the new rows.
    const currentIds = view.getIds()
    if (currentIds !== ids && !currentIds.includes(id)) return undefined
    return { element, id }
  }

  // The row the menu opens on, taken from the event that opens it, since a parent that controls focus may not
  // have moved focus there yet: a pointer down starts a touch's long press, and a contextmenu event — the
  // pointer's, or the one the keyboard sends to the focused row — opens it at once.
  const [menuRow, setMenuRow] = useState<RowId | null>(null)

  // Right-click targets the row under the pointer: focus it, and make it the selection unless it is already selected.
  const onContextMenu = (e: MouseEvent<HTMLDivElement>) => {
    const target = rowTarget(e, true)
    if (e.defaultPrevented || !target) {
      rejectMenuStart(rootRef.current, e)
      return
    }
    const { id } = target
    setMenuRow(id)
    setFocusedRowId(id)
    if (!selection.has(id)) select([id], "replace")
  }

  const onPointerDownCapture = (e: PointerEvent<HTMLDivElement>) => {
    if (!gridTarget(rootRef.current, e.target, e.nativeEvent.composedPath())) return
    columnToReveal.current = null
    view.touch()
    refreshParkedMarks()
    stopFollowing()
  }

  const onRowPointerDown = (e: PointerEvent<HTMLDivElement>) => {
    const target = rowTarget(e)
    if (e.defaultPrevented || !target) {
      // Radix starts long-press menus from pointerdown; Base UI uses touchstart below.
      if (renderContextMenu && e.pointerType !== "mouse" && (e.defaultPrevented || !rowTarget(e, true))) rejectMenuStart(rootRef.current, e)
      return
    }
    const { id } = target
    setMenuRow(id)
    setFocusedRowId(id)
    if (e.button !== 0) return
    if (e.shiftKey) select([id], "range")
    else if (e.metaKey || e.ctrlKey) select([id], "toggle")
    else select([id], "replace")
  }

  // A double click on an editable cell opens it; anywhere else on the row it activates the row.
  const onRowDoubleClick = (e: MouseEvent<HTMLDivElement>) => {
    if (e.defaultPrevented) return
    const target = rowTarget(e)
    if (!target) return
    const { element, id } = target
    const row = store.getRow(id)
    if (row === undefined) return
    const key = element.closest<HTMLElement>("[data-col]")?.dataset.col
    const col = key !== undefined ? resolved.find((c) => c.key === key) : undefined
    if (edits && canEditCell(col, row) && !col.edit.toggle) {
      setFocusedRowId(id)
      setFocusedColKey(col.key)
      edits.open(id, col.key)
      return
    }
    onRowActivate?.(row, id)
  }

  const toggle = useCallback((id: RowId) => select([id], "toggle"), [select])

  // A rapid reopen must get fresh content even while the previous popup is still exiting.
  const [menuOpening, setMenuOpening] = useState(0)
  const contextRows = useMemo(() => {
    // With nothing selected the menu acts on the row it opened on, even when focus has since moved off a row that left.
    const opened = menuRow ?? focusedRowId
    const targets = selection.size ? [...selection] : opened !== null ? [opened] : []
    return { opening: menuOpening, ids: targets, target: menuRow ?? focusedRowId, rows: targets.map((id) => store.getRow(id)).filter((r): r is T => r !== undefined) }
  }, [selection, focusedRowId, store, menuOpening, menuRow])

  const body = (
    <div
      ref={scrollRef}
      className="relative h-full min-h-0 flex-1 overflow-auto"
      onPointerDownCapture={onPointerDownCapture}
      onPointerDown={onRowPointerDown}
      onDoubleClick={onRowDoubleClick}
      onContextMenu={renderContextMenu ? onContextMenu : undefined}
      onTouchStart={renderContextMenu ? event => {
        // Multiple touches must reach the primitive so it can cancel a pending long press.
        if (event.touches.length === 1 && (event.defaultPrevented || !rowTarget(event, true))) rejectMenuStart(rootRef.current, event)
      } : undefined}
      onScroll={onScroll}
    >
      {/* At least the viewport tall, so a footer sits at the bottom edge when the rows do not reach it. */}
      <div className="flex min-h-full flex-col">
      <div
        role="row"
        aria-rowindex={1}
        className="sticky top-0 z-20 grid border-b border-border bg-background text-muted-foreground"
        style={{ gridTemplateColumns: template, width: totalWidth, height: rowHeight }}
      >
        {selectionColumn && <div role="columnheader" aria-colindex={1} aria-label={labels.selection} className="sticky left-0 z-30 bg-background" />}
        {resolved.map((col, i) => (
          <HeaderCell
            key={col.key}
            gridRef={rootRef}
            col={col}
            colIndex={i + (selectionColumn ? 1 : 0)}
            left={lefts[i]}
            sort={sort?.key === col.key ? sort.dir : null}
            focused={focusedColKey === col.key}
            canMoveLeft={i > 0 && (resolved[i - 1]!.frozen === "left") === (col.frozen === "left")}
            canMoveRight={i < resolved.length - 1 && (resolved[i + 1]!.frozen === "left") === (col.frozen === "left")}
            onSort={() => cycleSort(col.key)}
            onFocus={() => setFocusedColKey(col.key)}
            onHide={() => hideColumn(col.key)}
            onMove={(d) => requestColumn(col.key, { move: d })}
            onReset={resetColumns}
            onResize={(w) => resizeColumn(col.key, w)}
            hiddenCount={columnState.hidden.length}
            labels={labels}
          />
        ))}
      </div>
      {ids.length === 0 ? (
        <div id={`${uid}-empty`} className="p-4 text-muted-foreground">{emptyState ?? labels.noRows}</div>
      ) : (
        <div role="rowgroup" className="relative shrink-0" style={{ height: virtualizer.getTotalSize(), width: totalWidth }}>
          {items.map((v) => {
            const id = ids[v.index]!
            return (
              <Row
                key={v.key}
                store={store}
                id={id}
                index={v.index}
                domId={domId(id)}
                uid={uid}
                columns={resolved}
                template={template}
                lefts={lefts}
                width={totalWidth}
                height={rowHeight}
                start={v.start - rowHeight}
                selected={selection.has(id)}
                focused={focusedRowId === id}
                focusedColKey={focusedColKey}
                selectionColumn={selectionColumn}
                selectable={selectionMode !== "none"}
                selectLabel={labels.selectRow}
                pendingLabel={labels.pending}
                onToggle={toggle}
                memory={memory}
                flashVariant={preset.flash}
                flashWindowMs={flashWindowMs}
                entered={entered}
                highlightEnter={rowEnter.highlight}
                getRowProps={getRowProps}
                getRowLabel={getRowLabel}
                rules={rules}
                edits={edits}
              />
            )
          })}
        </div>
      )}
      {footer && <FooterRow store={store} ids={ids} columns={resolved} template={template} lefts={lefts} width={totalWidth} height={rowHeight} footer={footer} selectionColumn={selectionColumn} rowIndex={ids.length + 2} />}
      </div>
    </div>
  )

  return (
    <div
      ref={rootRef}
      role="grid"
      data-slot="tradecn-data-grid"
      data-preset={props.preset ?? "blotter"}
      data-editable={edits ? "" : undefined}
      tabIndex={0}
      aria-label={label}
      aria-rowcount={ids.length + (footer ? 2 : 1)}
      aria-colcount={resolved.length + (selectionColumn ? 1 : 0)}
      aria-multiselectable={selectionMode === "multi" || undefined}
      aria-activedescendant={focusedRowId !== null && indexOf.has(focusedRowId) ? domId(focusedRowId) : undefined}
      aria-describedby={ids.length === 0 ? `${uid}-empty` : undefined}
      onKeyDown={onKeyDown}
      onFocus={readsRows ? (e) => { if (e.target === e.currentTarget) setArrivals((n) => n + 1) } : undefined}
      // Focus leaving the grid takes the row's reading with it.
      onBlur={readsRows ? (e) => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setReading("") } : undefined}
      className={cn("relative flex h-full min-h-0 flex-col overflow-hidden rounded-md border border-border bg-background text-foreground outline-none focus-visible:ring-2 focus-visible:ring-foreground/60 lining-nums tabular-nums", preset.fontClass, className)}
      style={{ lineHeight: `${rowHeight}px` } as CSSProperties}
    >
      {renderContextMenu ? (
        <ContextMenu onOpenChange={open => { if (open) setMenuOpening(value => value + 1) }}>
          <ContextMenuTrigger className="contents">{body}</ContextMenuTrigger>
          <ContextMenuContent><Fragment key={contextRows.opening}>{renderContextMenu(contextRows.rows, contextRows.ids, contextRows.target)}</Fragment></ContextMenuContent>
        </ContextMenu>
      ) : (
        body
      )}
      {behind > 0 && (
        <button
          type="button"
          data-grid-behind={behind}
          onClick={toTail}
          className="absolute left-1/2 z-30 -translate-x-1/2 rounded-full bg-primary px-2.5 py-0.5 text-primary-foreground shadow-sm hover:bg-primary/90"
          style={{ bottom: (footer ? rowHeight : 0) + 8 }}
        >
          {typeof labels.newRows === "function" ? labels.newRows(behind) : fillLabel(labels.newRows, { n: behind })}
        </button>
      )}
      {announceRowCount !== "off" && (
        <div aria-live="polite" className="sr-only">
          {announcement}
        </div>
      )}
      {readsRows && (
        <div aria-live="polite" aria-atomic="true" className="sr-only" data-grid-row-reading="">
          {reading}
        </div>
      )}
    </div>
  )
}

interface HeaderCellProps<T> {
  gridRef: RefObject<HTMLDivElement | null>
  col: Resolved<T>
  colIndex: number
  left: number | undefined
  sort: "asc" | "desc" | null
  focused: boolean
  canMoveLeft: boolean
  canMoveRight: boolean
  hiddenCount: number
  labels: DataGridLabels
  onSort: () => void
  onFocus: () => void
  onHide: () => void
  onMove: (delta: -1 | 1) => void
  onReset: () => void
  onResize: (width: number) => void
}

function HeaderCell<T>(p: HeaderCellProps<T>) {
  const { col, gridRef } = p
  const triggerRef = useRef<HTMLButtonElement>(null)
  const menuRef = useRef<HTMLDivElement>(null)
  const resizeRef = useRef(p.onResize)
  const resizeGesture = useRef<{ pointerId: number; owner: Window; end: () => void } | null>(null)
  useInsertionEffect(() => { resizeRef.current = p.onResize })
  useLayoutEffect(() => () => resizeGesture.current?.end(), [])
  useLayoutEffect(() => () => {
    const trigger = triggerRef.current
    const menu = menuRef.current
    const grid = gridRef.current
    const doc = trigger?.ownerDocument
    if (!trigger || !grid || !doc) return
    // Focus read in each tree it can be in: the trigger's, which inside a shadow root isn't the document's, and the
    // menu's, wherever it was portaled.
    const root = focusRoot(trigger)
    const inMenu = menu ? focusRoot(menu).activeElement : null
    const active = root.activeElement === trigger ? trigger : inMenu && menu?.contains(inMenu) ? inMenu : null
    if (!active) return
    // Wait for removal and the menu's cleanup. A surviving trigger (including effect replay) owns its focus.
    queueMicrotask(() => {
      if (trigger.isConnected || !grid.isConnected) return
      const current = menu ? focusRoot(menu).activeElement : null
      if (focusFell(root, doc, trigger) || (current !== null && (current === active || menu?.contains(current)))) grid.focus({ preventScroll: true })
    })
  }, [gridRef])
  const startResize = (e: PointerEvent<HTMLDivElement>) => {
    if (e.defaultPrevented || e.button !== 0 || !e.isPrimary) return
    const handle = e.currentTarget
    const owner = handle.ownerDocument.defaultView
    if (!owner) return
    if (resizeGesture.current?.owner !== owner) resizeGesture.current?.end()
    if (resizeGesture.current && resizeGesture.current.pointerId !== e.pointerId) return
    e.preventDefault()
    e.stopPropagation()
    resizeGesture.current?.end()
    const pointerId = e.pointerId
    const startX = e.clientX
    const startW = col.width
    const move = (ev: globalThis.PointerEvent) => {
      if (ev.pointerId !== pointerId) return
      if (!(ev.buttons & 1) || !handle.isConnected || handle.ownerDocument.defaultView !== owner) {
        end()
        return
      }
      resizeRef.current(startW + ev.clientX - startX)
    }
    const finish = (ev: globalThis.PointerEvent) => {
      if (ev.pointerId === pointerId) end()
    }
    const end = () => {
      if (resizeGesture.current?.end !== end) return
      observer.disconnect()
      owner.removeEventListener("pointermove", move, true)
      owner.removeEventListener("pointerup", finish, true)
      owner.removeEventListener("pointercancel", finish, true)
      owner.removeEventListener("lostpointercapture", finish, true)
      owner.removeEventListener("blur", end)
      handle.removeEventListener("lostpointercapture", finish)
      resizeGesture.current = null
      if (handle.hasPointerCapture?.(pointerId)) handle.releasePointerCapture(pointerId)
    }
    // Watch ancestor removal only while dragging; row updates need no subtree observation.
    const observer = new owner.MutationObserver(() => {
      if (!handle.isConnected || handle.ownerDocument.defaultView !== owner) end()
      else observeAncestors()
    })
    const observeAncestors = () => {
      observer.disconnect()
      for (let node: Node | null = handle.parentNode; node; node = node.parentNode ?? (node.nodeType === 11 ? (node as ShadowRoot).host : null)) {
        observer.observe(node, { childList: true })
      }
    }
    observeAncestors()
    resizeGesture.current = { pointerId, owner, end }
    owner.addEventListener("pointermove", move, true)
    owner.addEventListener("pointerup", finish, true)
    owner.addEventListener("pointercancel", finish, true)
    owner.addEventListener("lostpointercapture", finish, true)
    owner.addEventListener("blur", end)
    // Adoption can deliver capture loss through the handle's new document.
    handle.addEventListener("lostpointercapture", finish)
    // Synthetic events may not have an active browser pointer to capture.
    try { handle.setPointerCapture?.(pointerId) } catch { /* Window listeners still end the gesture. */ }
  }
  // The column's name in words: its title, its header when that is words, else its key. A header is named by it alone,
  // never by the menu button and resize handle inside, which have names of their own; give a header of markup a title.
  const name = columnName(col)
  const words = col.title?.trim() || (typeof col.header === "string" ? col.header.trim() : "")
  return (
    <div
      role="columnheader"
      aria-label={name}
      aria-colindex={p.colIndex + 1}
      aria-sort={p.sort === "asc" ? "ascending" : p.sort === "desc" ? "descending" : col.sortable ? "none" : undefined}
      data-col={col.key}
      data-focused-col={p.focused || undefined}
      className={cn("group relative flex h-full min-w-0 items-center gap-1 px-2 font-medium select-none", alignClass(col), p.left !== undefined && "sticky z-30 bg-background", p.focused && "text-foreground")}
      style={p.left !== undefined ? { left: p.left } : undefined}
      onPointerDown={p.onFocus}
    >
      <span
        className={cn("min-w-0 flex-1 truncate", col.sortable && "cursor-pointer hover:text-foreground")}
        title={words || undefined}
        onClick={col.sortable ? p.onSort : undefined}
      >
        {col.header}
        {p.sort && <span aria-hidden className="ml-1">{p.sort === "asc" ? "\u25B2" : "\u25BC"}</span>}
      </span>
      <DropdownMenu>
        <DropdownMenuTrigger
          ref={triggerRef}
          aria-label={fillLabel(p.labels.columnMenu, { name })}
          className="rounded px-1 text-muted-foreground opacity-0 hover:bg-muted hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100 data-[popup-open]:opacity-100 data-[state=open]:opacity-100"
        >
          <svg aria-hidden width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
            <circle cx="5" cy="1.5" r="1.2" />
            <circle cx="5" cy="5" r="1.2" />
            <circle cx="5" cy="8.5" r="1.2" />
          </svg>
        </DropdownMenuTrigger>
        <DropdownMenuContent ref={menuRef} align="end">
          {col.sortable && <DropdownMenuItem onClick={p.onSort}>{p.sort === "asc" ? p.labels.sortDescending : p.sort === "desc" ? p.labels.clearSort : p.labels.sortAscending}</DropdownMenuItem>}
          <DropdownMenuItem disabled={!p.canMoveLeft} onClick={() => p.onMove(-1)}>
            {p.labels.moveLeft}
          </DropdownMenuItem>
          <DropdownMenuItem disabled={!p.canMoveRight} onClick={() => p.onMove(1)}>
            {p.labels.moveRight}
          </DropdownMenuItem>
          <DropdownMenuItem onClick={p.onHide}>{p.labels.hideColumn}</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem onClick={p.onReset}>{typeof p.labels.resetColumns === "function" ? p.labels.resetColumns(p.hiddenCount) : fillLabel(p.labels.resetColumns, { n: p.hiddenCount })}</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <div
        role="separator"
        aria-orientation="vertical"
        aria-label={fillLabel(p.labels.resizeColumn, { name })}
        onPointerDown={startResize}
        className="absolute top-0 right-0 h-full w-1.5 touch-none cursor-col-resize hover:bg-ring/40"
      />
    </div>
  )
}