diff --git a/apps/web/package.json b/apps/web/package.json
index 6a27357..e18001a 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -41,6 +41,7 @@
     "react-hook-form": "^7.60.0",
     "recharts": "3.8.0",
     "shadcn": "^4.19.0",
+    "shiki": "^4.4.3",
     "sonner": "^1.7.0",
     "zod": "^3.25.0"
   },
diff --git a/apps/web/src/components/reui/cascader/cascader-nav.tsx b/apps/web/src/components/reui/cascader/cascader-nav.tsx
index b05a0c8..8950828 100644
--- a/apps/web/src/components/reui/cascader/cascader-nav.tsx
+++ b/apps/web/src/components/reui/cascader/cascader-nav.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import {
   useCascaderActions,
diff --git a/apps/web/src/components/reui/cascader/cascader-virtual.tsx b/apps/web/src/components/reui/cascader/cascader-virtual.tsx
index d5b1dd5..38054ad 100644
--- a/apps/web/src/components/reui/cascader/cascader-virtual.tsx
+++ b/apps/web/src/components/reui/cascader/cascader-virtual.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { CascaderColumnPanel } from "@/components/reui/cascader/cascader-columns"
 import {
@@ -81,7 +79,8 @@ export function useCascaderVirtualizer({
 
   const measureEstimate = React.useCallback(() => estimateSize, [estimateSize])
 
-  // React Compiler bails on `useVirtualizer`; harmless, rows memoise one by one.
+  // React Compiler bails on `useVirtualizer` HERE, and only here - the bail does not
+  // propagate to the components that call this hook. They opt out themselves.
   const virtualizer = useVirtualizer<HTMLElement, HTMLElement>({
     count,
     getScrollElement,
@@ -225,6 +224,11 @@ function CascaderVirtualRows({
   estimateSize,
   overscan,
 }: CascaderVirtualItemsProps) {
+  /* The `useCascaderVirtualizer` bail does NOT reach here: the compiler caches
+     `getVirtualItems()` on the virtualizer, whose identity never changes, so the
+     window freezes on scroll. Inert where no compiler runs. */
+  "use no memo"
+
   const {
     estimateRowSize,
     overscan: rootOverscan,
@@ -375,6 +379,11 @@ function CascaderVirtualColumnRows({
   overscan,
   activeIndex,
 }: CascaderVirtualColumnProps & { activeIndex: number }) {
+  /* The `useCascaderVirtualizer` bail does NOT reach here: the compiler caches
+     `getVirtualItems()` on the virtualizer, whose identity never changes, so the
+     window freezes on scroll. Inert where no compiler runs. */
+  "use no memo"
+
   const {
     estimateRowSize,
     overscan: rootOverscan,
diff --git a/apps/web/src/components/reui/cascader/cascader.tsx b/apps/web/src/components/reui/cascader/cascader.tsx
index 751f644..96bfcff 100644
--- a/apps/web/src/components/reui/cascader/cascader.tsx
+++ b/apps/web/src/components/reui/cascader/cascader.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import {
   useCascaderLoader,
diff --git a/apps/web/src/components/reui/code-block/code-block-highlight.tsx b/apps/web/src/components/reui/code-block/code-block-highlight.tsx
new file mode 100644
index 0000000..4830d51
--- /dev/null
+++ b/apps/web/src/components/reui/code-block/code-block-highlight.tsx
@@ -0,0 +1,1159 @@
+import type { ReactNode } from "react"
+import type { ShikiTransformer } from "shiki"
+
+/**
+ * One themed slice of a line. `color`/`colorDark` emit as `--cb-c`/`--cb-cd`
+ * custom properties, so one rule pair on the `<pre>` theme-switches the whole
+ * block. An uncoloured token keeps both undefined and renders as a bare text
+ * node with no wrapper.
+ */
+export type CodeBlockToken = {
+  content: string
+  color?: string
+  colorDark?: string
+  fontStyle?: CodeBlockFontStyle
+  word?: boolean
+}
+
+export type CodeBlockFontStyle = "italic" | "bold" | "underline"
+
+export type CodeBlockDiffKind = "add" | "remove"
+
+export type CodeBlockLevel = "error" | "warning" | "info"
+
+/**
+ * Per-line presentation state, resolved once at highlight time.
+ *
+ * Two sources merge here: the props on the root, and the classes a shiki
+ * transformer put on the line, so `@shikijs/transformers` notation such as
+ * `[!code ++]` reaches the same place without the renderer knowing shiki
+ * exists. Props win on conflict, because notation lives in the source string,
+ * which a consumer often does not control.
+ */
+export type CodeBlockLineState = {
+  highlighted?: boolean
+  diff?: CodeBlockDiffKind
+  focused?: boolean
+  level?: CodeBlockLevel
+}
+
+/**
+ * A rendered line. `number` is the DISPLAYED number (offset by `startLine`);
+ * line specs address source lines, so changing `startLine` never invalidates
+ * them. Instances are reused across passes when unchanged, which is what lets
+ * the row be a plain `React.memo` and a streamed chunk cost one re-render.
+ */
+export type CodeBlockLine = {
+  tokens: CodeBlockToken[]
+  number: number
+  text: string
+  state?: CodeBlockLineState
+  /**
+   * Replaces the counter-driven gutter number for this row - a unified patch
+   * shows "old new" pairs, a hunk header shows dots. Rendered verbatim.
+   */
+  gutter?: string
+}
+
+/** Source lines, as `[2, 3, 4]` or as a range string such as `"2-4,7"`. */
+export type CodeBlockLineSpec = number[] | string
+
+export type CodeBlockDiffSpec = {
+  added?: CodeBlockLineSpec
+  removed?: CodeBlockLineSpec
+}
+
+export type CodeBlockLevelSpec = Partial<
+  Record<CodeBlockLevel, CodeBlockLineSpec>
+>
+
+/** A word to mark, optionally restricted to some source lines. */
+export type CodeBlockWordSpec =
+  | string
+  | { word: string; lines?: CodeBlockLineSpec }
+
+export type CodeBlockThemes = { light: string; dark: string }
+
+/**
+ * shiki's own transformer type, imported type-only so it erases at compile
+ * time and costs the bundle nothing. The previous structural stand-in
+ * (`Record<string, unknown>`) rejected every real `ShikiTransformer`: an
+ * interface without an index signature is not assignable to it.
+ */
+export type CodeBlockTransformer = ShikiTransformer
+
+export type CodeBlockHighlightOptions = {
+  language?: string
+  themes?: CodeBlockThemes
+  transformers?: CodeBlockTransformer[]
+  startLine?: number
+  /**
+   * Distinguishes same-signature blocks in the line-reuse cache. Without it,
+   * two identically-configured streams evict each other's previous document.
+   * The root passes its own instance id.
+   */
+  instanceKey?: string
+  highlightedLines?: CodeBlockLineSpec
+  highlightedWords?: CodeBlockWordSpec[]
+  focusedLines?: CodeBlockLineSpec
+  diff?: CodeBlockDiffSpec
+  lineLevels?: CodeBlockLevelSpec
+}
+
+/** What a `CodeBlockLineActions` render prop receives. */
+export type CodeBlockLineActionContext = {
+  line: number
+  text: string
+  state?: CodeBlockLineState
+}
+
+export type CodeBlockLineActionsRender = (
+  context: CodeBlockLineActionContext
+) => ReactNode
+
+/* -------------------------------------------------------------------------- */
+/*                                  Languages                                  */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * A STATIC map, never ``import(`shiki/langs/${lang}.mjs`)``: a template import
+ * makes bundlers bundle all ~200 grammars. Written out, each entry is its own
+ * lazy chunk. To add a language, add a line: that is the intended extension
+ * point of this file.
+ */
+export const codeBlockLanguages: Record<string, () => Promise<unknown>> = {
+  bash: () => import("shiki/langs/bash.mjs"),
+  c: () => import("shiki/langs/c.mjs"),
+  cpp: () => import("shiki/langs/cpp.mjs"),
+  csharp: () => import("shiki/langs/csharp.mjs"),
+  css: () => import("shiki/langs/css.mjs"),
+  diff: () => import("shiki/langs/diff.mjs"),
+  docker: () => import("shiki/langs/docker.mjs"),
+  go: () => import("shiki/langs/go.mjs"),
+  graphql: () => import("shiki/langs/graphql.mjs"),
+  html: () => import("shiki/langs/html.mjs"),
+  java: () => import("shiki/langs/java.mjs"),
+  javascript: () => import("shiki/langs/javascript.mjs"),
+  json: () => import("shiki/langs/json.mjs"),
+  jsx: () => import("shiki/langs/jsx.mjs"),
+  kotlin: () => import("shiki/langs/kotlin.mjs"),
+  markdown: () => import("shiki/langs/markdown.mjs"),
+  php: () => import("shiki/langs/php.mjs"),
+  python: () => import("shiki/langs/python.mjs"),
+  ruby: () => import("shiki/langs/ruby.mjs"),
+  rust: () => import("shiki/langs/rust.mjs"),
+  scss: () => import("shiki/langs/scss.mjs"),
+  shell: () => import("shiki/langs/shellscript.mjs"),
+  sql: () => import("shiki/langs/sql.mjs"),
+  swift: () => import("shiki/langs/swift.mjs"),
+  toml: () => import("shiki/langs/toml.mjs"),
+  tsx: () => import("shiki/langs/tsx.mjs"),
+  typescript: () => import("shiki/langs/typescript.mjs"),
+  vue: () => import("shiki/langs/vue.mjs"),
+  yaml: () => import("shiki/langs/yaml.mjs"),
+}
+
+/** Spellings a consumer is likely to pass, mapped onto the map above. */
+const LANGUAGE_ALIASES: Record<string, string> = {
+  "c++": "cpp",
+  "c#": "csharp",
+  cs: "csharp",
+  dockerfile: "docker",
+  htm: "html",
+  js: "javascript",
+  jsonc: "json",
+  md: "markdown",
+  mdx: "markdown",
+  py: "python",
+  rb: "ruby",
+  rs: "rust",
+  sh: "shell",
+  shellscript: "shell",
+  ts: "typescript",
+  yml: "yaml",
+  zsh: "shell",
+}
+
+export const codeBlockThemes: Record<string, () => Promise<unknown>> = {
+  "github-light": () => import("shiki/themes/github-light.mjs"),
+  "github-dark": () => import("shiki/themes/github-dark.mjs"),
+  /**
+   * Design-token theming: every token colour becomes a `var(--code-token-*)`
+   * reference, so the palette lives in the consumer's stylesheet and follows
+   * their themes. Pass as BOTH sides. Variables consumed (prefix `--code-`):
+   * foreground, token-constant, token-string, token-comment, token-keyword,
+   * token-parameter, token-function, token-string-expression,
+   * token-punctuation, token-link.
+   */
+  "css-variables": async () => {
+    const { createCssVariablesTheme } = await import("shiki/core")
+    return createCssVariablesTheme({
+      name: "css-variables",
+      variablePrefix: "--code-",
+      fontStyle: true,
+    })
+  },
+}
+
+export const DEFAULT_CODE_BLOCK_THEMES: CodeBlockThemes = {
+  light: "github-light",
+  dark: "github-dark",
+}
+
+/** Resolves an alias and reports whether the grammar is actually available. */
+export function resolveCodeBlockLanguage(
+  language?: string
+): string | undefined {
+  if (!language) return undefined
+  const normalized = language.trim().toLowerCase()
+  const resolved = LANGUAGE_ALIASES[normalized] ?? normalized
+  return resolved in codeBlockLanguages ? resolved : undefined
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                Pure helpers                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Turns `[2, 3]` or `"2-4,7"` into a set of source line numbers.
+ *
+ * Deliberately total: a reversed range, a negative bound or outright garbage
+ * yields an empty set rather than throwing. These values often come from user
+ * content or from a model, and a code viewer that crashes on a bad range is
+ * worse than one that shows no highlight.
+ */
+export function parseLineSpec(spec?: CodeBlockLineSpec): Set<number> {
+  const out = new Set<number>()
+  if (!spec) return out
+
+  if (Array.isArray(spec)) {
+    for (const value of spec) {
+      if (Number.isInteger(value) && value > 0) out.add(value)
+    }
+    return out
+  }
+
+  for (const part of spec.split(",")) {
+    const trimmed = part.trim()
+    if (!trimmed) continue
+
+    const range = trimmed.match(/^(\d+)\s*-\s*(\d+)$/)
+    if (range) {
+      const start = Number(range[1])
+      const end = Number(range[2])
+      if (start > 0 && end >= start) {
+        for (let line = start; line <= end; line += 1) out.add(line)
+      }
+      continue
+    }
+
+    if (/^\d+$/.test(trimmed)) {
+      const single = Number(trimmed)
+      if (single > 0) out.add(single)
+    }
+  }
+
+  return out
+}
+
+/** Normalises line endings so every downstream offset is LF-based. */
+export function normalizeCode(code: string): string {
+  return code.replace(/\r\n?/g, "\n")
+}
+
+/**
+ * Character ranges for `highlightedWords`, as shiki `decorations`.
+ *
+ * shiki rejects overlapping decorations, so a later match that would overlap an
+ * earlier one is dropped rather than passed through to throw.
+ */
+export function buildWordDecorations(
+  code: string,
+  words?: CodeBlockWordSpec[]
+): { start: number; end: number; properties: { class: string } }[] {
+  if (!words?.length) return []
+
+  const lineStarts: number[] = [0]
+  for (let index = 0; index < code.length; index += 1) {
+    if (code[index] === "\n") lineStarts.push(index + 1)
+  }
+
+  const lineAt = (offset: number) => {
+    let low = 0
+    let high = lineStarts.length - 1
+    while (low < high) {
+      const mid = Math.ceil((low + high) / 2)
+      if (lineStarts[mid] <= offset) low = mid
+      else high = mid - 1
+    }
+    return low + 1
+  }
+
+  const taken: { start: number; end: number }[] = []
+  const out: { start: number; end: number; properties: { class: string } }[] =
+    []
+
+  for (const entry of words) {
+    const word = typeof entry === "string" ? entry : entry.word
+    if (!word) continue
+    const limit =
+      typeof entry === "string" ? undefined : parseLineSpec(entry.lines)
+
+    let from = code.indexOf(word)
+    while (from !== -1) {
+      const to = from + word.length
+      const withinLimit = !limit || limit.size === 0 || limit.has(lineAt(from))
+      const overlaps = taken.some((r) => from < r.end && to > r.start)
+
+      if (withinLimit && !overlaps) {
+        taken.push({ start: from, end: to })
+        out.push({ start: from, end: to, properties: { class: "cb-word" } })
+      }
+      from = code.indexOf(word, from + word.length)
+    }
+  }
+
+  return out.sort((a, b) => a.start - b.start)
+}
+
+/**
+ * Strips `[!code ...]` notation from a copy payload: the transformer already
+ * drops it from RENDERED output, but the raw `code` string would paste the
+ * comment into someone's editor.
+ */
+export function stripNotationComments(code: string): string {
+  return code
+    .split("\n")
+    .map((line) =>
+      line.replace(
+        /\s*(?:\/\/|#|--|;|%|<!--|\/\*)\s*\[!code[^\]]*\]\s*(?:-->|\*\/)?\s*$/,
+        ""
+      )
+    )
+    .join("\n")
+}
+
+/**
+ * Plain, unhighlighted lines. One token per line, no colour.
+ *
+ * This is both the `highlight={false}` renderer and the first paint of a
+ * streaming block, so the tail of a stream is readable before its grammar pass
+ * lands and no frame is ever blank.
+ */
+export function toPlainLines(code: string, startLine = 1): CodeBlockLine[] {
+  return normalizeCode(code)
+    .split("\n")
+    .map((text, index) => ({
+      tokens: text ? [{ content: text }] : [],
+      number: startLine + index,
+      text,
+    }))
+}
+
+/**
+ * Pulls `code` and `language` out of the props react-markdown gives a `pre`:
+ * the glue every AI chat app writes by hand, shipped here instead. Tolerant by
+ * construction, because a still-streaming fence has no closing delimiter and
+ * often no language yet, and must render as plain text rather than throw.
+ */
+export function markdownCodeProps(props: {
+  children?: ReactNode
+  className?: string
+}): { code: string; language?: string } {
+  let language: string | undefined
+  let code = ""
+
+  const readClassName = (value: unknown) => {
+    if (typeof value !== "string") return
+    const match = value.match(/(?:^|\s)language-([\w+#-]+)/)
+    if (match && !language) language = match[1]
+  }
+
+  const walk = (node: unknown): void => {
+    if (node === null || node === undefined || node === false) return
+    if (typeof node === "string") {
+      code += node
+      return
+    }
+    if (typeof node === "number") {
+      code += String(node)
+      return
+    }
+    if (Array.isArray(node)) {
+      for (const child of node) walk(child)
+      return
+    }
+    if (typeof node === "object" && "props" in (node as object)) {
+      const nodeProps = (node as { props?: Record<string, unknown> }).props
+      if (!nodeProps) return
+      readClassName(nodeProps.className)
+      walk(nodeProps.children)
+    }
+  }
+
+  readClassName(props.className)
+  walk(props.children)
+
+  return { code: code.replace(/\n$/, ""), language }
+}
+
+/** One segment of a markdown string: prose, or a fenced code block. */
+export type CodeBlockMarkdownPart = {
+  type: "text" | "code"
+  content: string
+  language?: string
+  /** True for a fence whose closing delimiter has not arrived yet. */
+  open: boolean
+}
+
+/**
+ * Splits markdown into prose and fenced code, for transcripts that render a
+ * raw assistant message without a markdown dependency. The unterminated
+ * trailing fence is the point: mid-stream it comes back as a code part flagged
+ * `open`, instead of being dropped or read as prose.
+ */
+export function markdownFences(markdown: string): CodeBlockMarkdownPart[] {
+  const parts: CodeBlockMarkdownPart[] = []
+  const lines = markdown.split("\n")
+
+  let inFence = false
+  let opener = ""
+  let language: string | undefined
+  let buffer: string[] = []
+
+  const flushText = () => {
+    const text = buffer.join("\n").trim()
+    if (text) parts.push({ type: "text", content: text, open: false })
+    buffer = []
+  }
+
+  const flushCode = (open: boolean) => {
+    parts.push({
+      type: "code",
+      content: buffer.join("\n"),
+      language,
+      open,
+    })
+    buffer = []
+    language = undefined
+  }
+
+  for (const line of lines) {
+    /* CommonMark fences: three or more backticks OR tildes. The closer must
+       repeat the opener's character at least as many times, or a \`\`\`\`
+       fence containing \`\`\` examples would close three lines early. */
+    const fence = line.match(/^\s*(`{3,}|~{3,})([\w+#-]*)\s*$/)
+
+    if (fence && !inFence) {
+      flushText()
+      inFence = true
+      opener = fence[1]
+      language = fence[2] || undefined
+      continue
+    }
+
+    if (
+      fence &&
+      inFence &&
+      fence[1][0] === opener[0] &&
+      fence[1].length >= opener.length &&
+      !fence[2]
+    ) {
+      flushCode(false)
+      inFence = false
+      continue
+    }
+
+    buffer.push(line)
+  }
+
+  /* A fence still open at the end of the string is the streaming case: the
+     closing delimiter has not arrived. Reporting it as code with `open` set is
+     what lets a transcript render the partial block instead of dropping it. */
+  if (inFence) flushCode(true)
+  else flushText()
+
+  return parts
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Engine                                    */
+/* -------------------------------------------------------------------------- */
+
+type HighlighterLike = {
+  codeToHast: (code: string, options: Record<string, unknown>) => unknown
+  getLoadedLanguages: () => string[]
+  loadLanguage: (lang: unknown) => Promise<void>
+  loadTheme: (theme: unknown) => Promise<void>
+}
+
+let highlighterPromise: Promise<HighlighterLike> | null = null
+const loadedLanguages = new Set<string>()
+const loadedThemes = new Set<string>()
+
+/**
+ * One highlighter per page, on the JavaScript regex engine: oniguruma needs
+ * WebAssembly, which forces `'wasm-unsafe-eval'` into every consumer's CSP.
+ * `forgiving` keeps an inexpressible grammar pattern from taking the block
+ * down.
+ */
+async function loadHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = (async () => {
+      const [{ createHighlighterCore }, { createJavaScriptRegexEngine }] =
+        await Promise.all([
+          import("shiki/core"),
+          import("shiki/engine/javascript"),
+        ])
+
+      return (await createHighlighterCore({
+        themes: [],
+        langs: [],
+        engine: createJavaScriptRegexEngine({ forgiving: true }),
+      })) as unknown as HighlighterLike
+    })()
+  }
+
+  return highlighterPromise
+}
+
+/**
+ * Themes register per name, on demand, exactly like languages.
+ *
+ * Baking the FIRST caller's pair into the singleton looks correct until a page
+ * holds two blocks with different `themes` props: the second silently renders
+ * in the first one's colours, because the singleton never learns about the
+ * request. Loading by name makes every block's prop actually mean something.
+ */
+const warnedThemes = new Set<string>()
+
+async function ensureTheme(
+  highlighter: HighlighterLike,
+  name: string,
+  side: "light" | "dark" = "light"
+) {
+  /* Falls back to the MATCHING side (an unknown dark theme used to fall back
+     to github-light, silently rendering light colours in dark mode). */
+  const resolved =
+    name in codeBlockThemes ? name : DEFAULT_CODE_BLOCK_THEMES[side]
+  if (
+    resolved !== name &&
+    process.env.NODE_ENV !== "production" &&
+    !warnedThemes.has(name)
+  ) {
+    warnedThemes.add(name)
+    console.warn(
+      `[code-block] Unknown theme "${name}" - falling back to "${resolved}". ` +
+        "Register it in codeBlockThemes to use it."
+    )
+  }
+  if (loadedThemes.has(resolved)) return resolved
+  await highlighter.loadTheme(await codeBlockThemes[resolved]())
+  loadedThemes.add(resolved)
+  return resolved
+}
+
+async function ensureLanguage(highlighter: HighlighterLike, language: string) {
+  if (loadedLanguages.has(language)) return
+  const loader = codeBlockLanguages[language]
+  if (!loader) return
+  await highlighter.loadLanguage(await loader())
+  loadedLanguages.add(language)
+}
+
+/* -------------------------------------------------------------------------- */
+/*                            hast to normalised lines                         */
+/* -------------------------------------------------------------------------- */
+
+type HastNode = {
+  type: string
+  tagName?: string
+  value?: string
+  properties?: Record<string, unknown>
+  children?: HastNode[]
+}
+
+const FONT_STYLE_BY_DECLARATION: Record<string, CodeBlockFontStyle> = {
+  "font-style:italic": "italic",
+  "font-weight:bold": "bold",
+  "text-decoration:underline": "underline",
+}
+
+/** Splits shiki's inline `style` string into the fields a token carries. */
+function readTokenStyle(style: unknown): Omit<CodeBlockToken, "content"> {
+  if (typeof style !== "string") return {}
+
+  const out: Omit<CodeBlockToken, "content"> = {}
+  for (const declaration of style.split(";")) {
+    const trimmed = declaration.trim()
+    if (!trimmed) continue
+
+    const separator = trimmed.indexOf(":")
+    if (separator === -1) continue
+
+    const property = trimmed.slice(0, separator).trim()
+    const value = trimmed.slice(separator + 1).trim()
+
+    if (property === "color") out.color = value
+    else if (property === "--shiki-dark") out.colorDark = value
+    else {
+      const fontStyle = FONT_STYLE_BY_DECLARATION[`${property}:${value}`]
+      if (fontStyle) out.fontStyle = fontStyle
+    }
+  }
+  return out
+}
+
+/**
+ * shiki emits raw `class` (string or array), not hast's `className`; reading
+ * only `className` finds nothing, which looks like a transformer that never
+ * ran.
+ */
+function classListOf(node: HastNode): string[] {
+  const value = node.properties?.class ?? node.properties?.className
+  if (Array.isArray(value)) return value.map(String)
+  if (typeof value === "string") return value.split(/\s+/).filter(Boolean)
+  return []
+}
+
+/** Maps the classes shiki transformers put on a line onto line state. */
+function stateFromClasses(classes: string[]): CodeBlockLineState | undefined {
+  const state: CodeBlockLineState = {}
+  if (classes.includes("highlighted")) state.highlighted = true
+  if (classes.includes("focused")) state.focused = true
+  if (classes.includes("diff")) {
+    if (classes.includes("add")) state.diff = "add"
+    else if (classes.includes("remove")) state.diff = "remove"
+  }
+  for (const level of ["error", "warning", "info"] as const) {
+    if (classes.includes(level)) state.level = level
+  }
+  return Object.keys(state).length ? state : undefined
+}
+
+function collectTokens(
+  node: HastNode,
+  out: CodeBlockToken[],
+  inWord: boolean
+): void {
+  for (const child of node.children ?? []) {
+    if (child.type === "text") {
+      if (!child.value) continue
+      out.push(
+        inWord ? { content: child.value, word: true } : { content: child.value }
+      )
+      continue
+    }
+    if (child.type !== "element") continue
+
+    const classes = classListOf(child)
+    const childInWord = inWord || classes.includes("cb-word")
+    const style = readTokenStyle(child.properties?.style)
+    const hasStyle = Boolean(style.color || style.colorDark || style.fontStyle)
+
+    /* A styled leaf is a token; a wrapper (a decoration span) is descended into
+       so its own children keep their individual colours. */
+    const onlyText = (child.children ?? []).every(
+      (grandChild) => grandChild.type === "text"
+    )
+
+    if (hasStyle && onlyText) {
+      const content = (child.children ?? []).map((c) => c.value ?? "").join("")
+      if (!content) continue
+      out.push({
+        content,
+        ...style,
+        ...(childInWord ? { word: true } : {}),
+      })
+      continue
+    }
+
+    collectTokens(child, out, childInWord)
+  }
+}
+
+function findCodeElement(root: HastNode): HastNode | undefined {
+  if (root.type === "element" && root.tagName === "code") return root
+  for (const child of root.children ?? []) {
+    const found = findCodeElement(child)
+    if (found) return found
+  }
+  return undefined
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Identity reuse                                 */
+/* -------------------------------------------------------------------------- */
+
+const MAX_TRACKED_DOCUMENTS = 24
+
+/**
+ * Previous result per option signature, so a growing stream can reuse lines.
+ * Keyed WITH the caller's instanceKey: without it, two same-configured blocks
+ * evicted each other's entry on every interleaved pass. Bounded above because
+ * module state outlives requests on the server.
+ */
+const previousDocuments = new Map<string, CodeBlockLine[]>()
+
+function sameLine(a: CodeBlockLine, b: CodeBlockLine): boolean {
+  if (a.number !== b.number || a.text !== b.text) return false
+  if (a.tokens.length !== b.tokens.length) return false
+  if (JSON.stringify(a.state ?? null) !== JSON.stringify(b.state ?? null)) {
+    return false
+  }
+  for (let index = 0; index < a.tokens.length; index += 1) {
+    const left = a.tokens[index]
+    const right = b.tokens[index]
+    if (
+      left.content !== right.content ||
+      left.color !== right.color ||
+      left.colorDark !== right.colorDark ||
+      left.fontStyle !== right.fontStyle ||
+      left.word !== right.word
+    ) {
+      return false
+    }
+  }
+  return true
+}
+
+/**
+ * Swaps freshly built lines for the previous pass's objects where nothing
+ * changed. This is why streaming is cheap: the row is a reference-equality
+ * `memo`, so without this, appending one token to a 400 line file re-renders
+ * 400 subtrees per chunk.
+ */
+function reuseUnchangedLines(
+  key: string,
+  next: CodeBlockLine[]
+): CodeBlockLine[] {
+  const previous = previousDocuments.get(key)
+
+  if (previous) {
+    for (let index = 0; index < next.length; index += 1) {
+      const before = previous[index]
+      if (before && sameLine(before, next[index])) next[index] = before
+    }
+  }
+
+  previousDocuments.set(key, next)
+  if (previousDocuments.size > MAX_TRACKED_DOCUMENTS) {
+    const oldest = previousDocuments.keys().next().value
+    if (oldest !== undefined) previousDocuments.delete(oldest)
+  }
+
+  return next
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                highlightCode                                */
+/* -------------------------------------------------------------------------- */
+
+function applyPropState(
+  lines: CodeBlockLine[],
+  options: CodeBlockHighlightOptions
+): void {
+  const highlighted = parseLineSpec(options.highlightedLines)
+  const focused = parseLineSpec(options.focusedLines)
+  const added = parseLineSpec(options.diff?.added)
+  const removed = parseLineSpec(options.diff?.removed)
+  const levels = {
+    error: parseLineSpec(options.lineLevels?.error),
+    warning: parseLineSpec(options.lineLevels?.warning),
+    info: parseLineSpec(options.lineLevels?.info),
+  }
+
+  lines.forEach((line, index) => {
+    const source = index + 1
+    const state: CodeBlockLineState = { ...line.state }
+
+    if (highlighted.has(source)) state.highlighted = true
+    if (focused.has(source)) state.focused = true
+    if (added.has(source)) state.diff = "add"
+    else if (removed.has(source)) state.diff = "remove"
+    for (const level of ["error", "warning", "info"] as const) {
+      if (levels[level].has(source)) state.level = level
+    }
+
+    line.state = Object.keys(state).length ? state : undefined
+  })
+}
+
+/**
+ * Highlights `code` into the renderer's line shape. Built on `codeToHast` so
+ * consumer transformers run and their line classes land in `line.state`,
+ * making prop state and `[!code ++]` notation one feature, not two code
+ * paths. Safe in a server component: the result is plain JSON.
+ */
+export async function highlightCode(
+  code: string,
+  options: CodeBlockHighlightOptions = {}
+): Promise<CodeBlockLine[]> {
+  const source = normalizeCode(code)
+  const startLine = options.startLine ?? 1
+  const language = resolveCodeBlockLanguage(options.language)
+
+  if (!language) return toPlainLines(source, startLine)
+
+  const themes = options.themes ?? DEFAULT_CODE_BLOCK_THEMES
+  const signature = JSON.stringify([
+    options.instanceKey ?? null,
+    language,
+    themes,
+    startLine,
+    options.highlightedLines ?? null,
+    options.highlightedWords ?? null,
+    options.focusedLines ?? null,
+    options.diff ?? null,
+    options.lineLevels ?? null,
+    (options.transformers ?? []).length,
+  ])
+
+  let root: HastNode
+  try {
+    const highlighter = await loadHighlighter()
+    const [light, dark] = await Promise.all([
+      ensureTheme(highlighter, themes.light),
+      ensureTheme(highlighter, themes.dark),
+    ])
+    await ensureLanguage(highlighter, language)
+
+    root = highlighter.codeToHast(source, {
+      lang: language,
+      themes: { light, dark },
+      defaultColor: "light",
+      cssVariablePrefix: "--shiki-",
+      decorations: buildWordDecorations(source, options.highlightedWords),
+      ...(options.transformers?.length
+        ? { transformers: options.transformers }
+        : {}),
+    }) as HastNode
+  } catch {
+    /* A missing grammar, an unloadable theme or a transformer throwing must not
+       take the surface down. Plain text is always readable. */
+    return toPlainLines(source, startLine)
+  }
+
+  const codeElement = findCodeElement(root)
+  if (!codeElement) return toPlainLines(source, startLine)
+
+  const lines: CodeBlockLine[] = []
+  for (const child of codeElement.children ?? []) {
+    if (child.type !== "element") continue
+    const tokens: CodeBlockToken[] = []
+    collectTokens(child, tokens, false)
+    lines.push({
+      tokens,
+      number: startLine + lines.length,
+      text: tokens.map((token) => token.content).join(""),
+      state: stateFromClasses(classListOf(child)),
+    })
+  }
+
+  if (!lines.length) return toPlainLines(source, startLine)
+
+  applyPropState(lines, options)
+  return reuseUnchangedLines(signature, lines)
+}
+
+/** Test seam: drops the singleton and every cached document. */
+export function resetCodeBlockHighlighter(): void {
+  highlighterPromise = null
+  loadedLanguages.clear()
+  loadedThemes.clear()
+  previousDocuments.clear()
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    ANSI                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The 16 SGR slots as CSS variables with readable defaults per theme, so a
+ * consumer retints terminal output next to their other design tokens
+ * (`--code-ansi-red`, `--code-ansi-bright-blue`, ...). 256-colour and
+ * truecolor sequences bypass the palette and emit their literal colour.
+ */
+const ANSI_SLOTS = [
+  "black",
+  "red",
+  "green",
+  "yellow",
+  "blue",
+  "magenta",
+  "cyan",
+  "white",
+  "bright-black",
+  "bright-red",
+  "bright-green",
+  "bright-yellow",
+  "bright-blue",
+  "bright-magenta",
+  "bright-cyan",
+  "bright-white",
+] as const
+
+const ANSI_LIGHT = [
+  "#3f3f46",
+  "#dc2626",
+  "#16a34a",
+  "#a16207",
+  "#2563eb",
+  "#9333ea",
+  "#0891b2",
+  "#71717a",
+  "#52525b",
+  "#ef4444",
+  "#22c55e",
+  "#ca8a04",
+  "#3b82f6",
+  "#a855f7",
+  "#06b6d4",
+  "#a1a1aa",
+]
+const ANSI_DARK = [
+  "#a1a1aa",
+  "#f87171",
+  "#4ade80",
+  "#facc15",
+  "#60a5fa",
+  "#c084fc",
+  "#22d3ee",
+  "#e4e4e7",
+  "#71717a",
+  "#fca5a5",
+  "#86efac",
+  "#fde047",
+  "#93c5fd",
+  "#d8b4fe",
+  "#67e8f9",
+  "#fafafa",
+]
+
+const ansiVar = (slot: number, fallback: string) =>
+  `var(--code-ansi-${ANSI_SLOTS[slot]}, ${fallback})`
+
+/** xterm 256-colour index to hex, computed rather than tabled. */
+function ansi256(index: number): string {
+  if (index < 16) return ANSI_DARK[index]
+  if (index >= 232) {
+    const v = 8 + (index - 232) * 10
+    const h = v.toString(16).padStart(2, "0")
+    return `#${h}${h}${h}`
+  }
+  const cube = [0, 95, 135, 175, 215, 255]
+  const n = index - 16
+  const to = (v: number) => cube[v].toString(16).padStart(2, "0")
+  return `#${to(Math.floor(n / 36))}${to(Math.floor(n / 6) % 6)}${to(n % 6)}`
+}
+
+// eslint-disable-next-line no-control-regex
+const SGR_RE = /\x1b\[([0-9;]*)m/g
+// eslint-disable-next-line no-control-regex
+/* Everything except SGR (the trailing `m`), which the tokenizer consumes -
+   this regex once matched SGR too and silently stripped every colour. */
+const OTHER_ESCAPES_RE =
+// eslint-disable-next-line no-control-regex
+  /\x1b(?:\[(?![0-9;]*m)[0-9;?]*[A-Za-z]|\][^\x07]*(?:\x07|\x1b\\)|[()][0-9A-B])/g
+
+type AnsiStyle = {
+  color?: string
+  colorDark?: string
+  bold?: boolean
+  italic?: boolean
+  underline?: boolean
+}
+
+/**
+ * Terminal output with SGR colour codes, as renderable lines: feed the result
+ * to the `lines` prop. Covers what agent stdout actually uses - 30-37 / 90-97
+ * foregrounds, 38;5;n and 38;2;r;g;b, bold, italic, underline and resets.
+ * Backgrounds and cursor movements are STRIPPED rather than rendered: a code
+ * surface has its own background, and a partial screen-drawing stream is
+ * better read as text than half-drawn.
+ */
+export function ansiToLines(text: string, startLine = 1): CodeBlockLine[] {
+  const clean = normalizeCode(text).replace(OTHER_ESCAPES_RE, "")
+
+  return clean.split("\n").map((raw, index) => {
+    const tokens: CodeBlockToken[] = []
+    const style: AnsiStyle = {}
+    let plain = ""
+    let last = 0
+
+    const flush = (content: string) => {
+      if (!content) return
+      const fontStyle = style.bold
+        ? ("bold" as const)
+        : style.italic
+          ? ("italic" as const)
+          : style.underline
+            ? ("underline" as const)
+            : undefined
+      tokens.push({
+        content,
+        color: style.color,
+        colorDark: style.colorDark,
+        fontStyle,
+      })
+    }
+
+    SGR_RE.lastIndex = 0
+    let match: RegExpExecArray | null
+    while ((match = SGR_RE.exec(raw))) {
+      flush(raw.slice(last, match.index))
+      plain += raw.slice(last, match.index)
+      last = match.index + match[0].length
+
+      const params = (match[1] || "0").split(";").map(Number)
+      for (let i = 0; i < params.length; i += 1) {
+        const code = params[i]
+        if (code === 0) {
+          delete style.color
+          delete style.colorDark
+          style.bold = style.italic = style.underline = false
+        } else if (code === 1) style.bold = true
+        else if (code === 3) style.italic = true
+        else if (code === 4) style.underline = true
+        else if (code === 22) style.bold = false
+        else if (code === 23) style.italic = false
+        else if (code === 24) style.underline = false
+        else if (code === 39) {
+          delete style.color
+          delete style.colorDark
+        } else if (code >= 30 && code <= 37) {
+          style.color = ansiVar(code - 30, ANSI_LIGHT[code - 30])
+          style.colorDark = ansiVar(code - 30, ANSI_DARK[code - 30])
+        } else if (code >= 90 && code <= 97) {
+          style.color = ansiVar(code - 82, ANSI_LIGHT[code - 82])
+          style.colorDark = ansiVar(code - 82, ANSI_DARK[code - 82])
+        } else if (code === 38 && params[i + 1] === 5) {
+          const hex = ansi256(params[i + 2] ?? 0)
+          style.color = style.colorDark = hex
+          i += 2
+        } else if (code === 38 && params[i + 1] === 2) {
+          const [r, g, b] = [
+            params[i + 2] ?? 0,
+            params[i + 3] ?? 0,
+            params[i + 4] ?? 0,
+          ]
+          const hex = `#${[r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("")}`
+          style.color = style.colorDark = hex
+          i += 4
+        } else if (
+          code === 48 &&
+          (params[i + 1] === 5 || params[i + 1] === 2)
+        ) {
+          i += params[i + 1] === 5 ? 2 : 4
+        }
+        /* 40-47 / 100-107 backgrounds: consumed by falling through. */
+      }
+    }
+    flush(raw.slice(last))
+    plain += raw.slice(last)
+
+    return { number: startLine + index, text: plain, tokens }
+  })
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                Unified diff                                 */
+/* -------------------------------------------------------------------------- */
+
+export type CodeBlockPatchFile = {
+  /** New-side path, or the old one for a deletion. */
+  file: string
+  /** Unified view: context, removed and added lines with dual gutter labels. */
+  lines: CodeBlockLine[]
+  added: number
+  removed: number
+  hunks: { header: string; at: number }[]
+}
+
+/**
+ * A `git diff` / unified patch, as renderable per-file line sets: feed each
+ * file's `lines` to the `lines` prop and the diff tints, `+`/`-` glyphs and
+ * dual old/new gutter numbers all come from the parse - no `diff` prop
+ * arithmetic against a hand-concatenated string. Tokens are plain; patches
+ * read by tint, not grammar.
+ */
+export function parseUnifiedDiff(patch: string): CodeBlockPatchFile[] {
+  const files: CodeBlockPatchFile[] = []
+  let current: CodeBlockPatchFile | null = null
+  let oldNumber = 0
+  let newNumber = 0
+  let width = 4
+
+  const push = (
+    text: string,
+    state: CodeBlockLineState | undefined,
+    gutter: string
+  ) => {
+    if (!current) return
+    current.lines.push({
+      number: current.lines.length + 1,
+      text,
+      tokens: [{ content: text }],
+      state,
+      gutter,
+    })
+  }
+  const pad = (value: number | null) =>
+    (value === null ? "" : String(value)).padStart(width)
+
+  for (const raw of normalizeCode(patch).split("\n")) {
+    const fileHeader = raw.match(/^diff --git a\/(.+) b\/(.+)$/)
+    const plusHeader = raw.match(/^\+\+\+ (?:b\/)?(.+)$/)
+    if (fileHeader || plusHeader) {
+      const name = fileHeader ? fileHeader[2] : plusHeader![1]
+      if (name !== "/dev/null" && (!current || current.file !== name)) {
+        current = { file: name, lines: [], added: 0, removed: 0, hunks: [] }
+        files.push(current)
+      }
+      continue
+    }
+    if (
+      /^(---|index |old mode|new mode|new file|deleted file|similarity|rename |Binary )/.test(
+        raw
+      )
+    ) {
+      continue
+    }
+
+    const hunk = raw.match(/^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(.*)$/)
+    if (hunk && current) {
+      oldNumber = Number(hunk[1])
+      newNumber = Number(hunk[3])
+      width = Math.max(
+        String(oldNumber + Number(hunk[2] ?? 0)).length,
+        String(newNumber + Number(hunk[4] ?? 0)).length,
+        2
+      )
+      current.hunks.push({ header: raw, at: current.lines.length + 1 })
+      push(
+        hunk[5].trim() || raw,
+        { level: "info" },
+        `${"·".padStart(width)} ${"·".padStart(width)}`
+      )
+      continue
+    }
+    if (!current || (!raw && files.length === 0)) continue
+
+    if (raw.startsWith("+")) {
+      push(raw.slice(1), { diff: "add" }, `${pad(null)} ${pad(newNumber)}`)
+      newNumber += 1
+      current.added += 1
+    } else if (raw.startsWith("-")) {
+      push(raw.slice(1), { diff: "remove" }, `${pad(oldNumber)} ${pad(null)}`)
+      oldNumber += 1
+      current.removed += 1
+    } else if (raw.startsWith(" ") || raw === "") {
+      if (current.lines.length === 0 && raw === "") continue
+      push(raw.slice(1), undefined, `${pad(oldNumber)} ${pad(newNumber)}`)
+      oldNumber += 1
+      newNumber += 1
+    }
+  }
+
+  return files
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/code-block/code-block.tsx b/apps/web/src/components/reui/code-block/code-block.tsx
new file mode 100644
index 0000000..025fe39
--- /dev/null
+++ b/apps/web/src/components/reui/code-block/code-block.tsx
@@ -0,0 +1,2236 @@
+"use client"
+
+// Title: Code Block
+// Description: Shadcn code block with Shiki highlighting, streaming, diffs, folding and per-line interaction for AI chat UIs.
+import {
+  Children,
+  createContext,
+  isValidElement,
+  memo,
+  useCallback,
+  useContext,
+  useDeferredValue,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import type {
+  ComponentProps,
+  CSSProperties,
+  KeyboardEvent as ReactKeyboardEvent,
+  ReactNode,
+} from "react"
+import {
+  highlightCode,
+  markdownCodeProps,
+  markdownFences,
+  resolveCodeBlockLanguage,
+  stripNotationComments,
+  toPlainLines,
+} from "@/components/reui/code-block/code-block-highlight"
+import type {
+  CodeBlockDiffSpec,
+  CodeBlockLevelSpec,
+  CodeBlockLine,
+  CodeBlockLineActionsRender,
+  CodeBlockLineSpec,
+  CodeBlockThemes,
+  CodeBlockToken,
+  CodeBlockTransformer,
+  CodeBlockWordSpec,
+} from "@/components/reui/code-block/code-block-highlight"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+
+/* -------------------------------------------------------------------------- */
+/*                                   Context                                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Two contexts: the document changes on every streamed chunk, the config does
+ * not. Splitting them keeps a stream from re-rendering the chrome per chunk.
+ */
+type CodeBlockConfigValue = {
+  language?: string
+  resolvedLanguage?: string
+  showLineNumbers: boolean
+  wrap: boolean
+  setWrap: (wrap: boolean) => void
+  wrapControlled: boolean
+  expanded: boolean
+  setExpanded: (expanded: boolean) => void
+  collapsible: boolean
+  streaming: boolean
+  contentId: string
+}
+
+type CodeBlockDocumentValue = {
+  code: string
+  lines: CodeBlockLine[]
+  selected: Set<number>
+  selectable: boolean
+  toggleLine: (line: number, extend: boolean) => void
+  clearSelection: () => void
+  foldable: boolean
+  foldRegions: CodeBlockFoldRegion[]
+  folded: Set<number>
+  toggleFold: (start: number) => void
+  setFolded: (folded: number[]) => void
+}
+
+const CodeBlockConfigContext = createContext<CodeBlockConfigValue | null>(null)
+const CodeBlockDocumentContext = createContext<CodeBlockDocumentValue | null>(
+  null
+)
+
+/** Lets the copy button tell a header placement from a floating one. */
+const CodeBlockHeaderContext = createContext(false)
+
+/**
+ * The root prepares every prop the code surface needs and publishes the
+ * bundle here. `CodeBlockContent` reads it to render the surface wherever the
+ * consumer composed it - typically inside their own ScrollArea - and the root
+ * renders its built-in scrolling surface only when no `CodeBlockContent` is
+ * found among its children.
+ */
+const CodeBlockSurfacePropsContext =
+  createContext<CodeBlockSurfaceProps | null>(null)
+
+/**
+ * `CodeBlockLineActions` renders nothing itself: it registers its render prop
+ * here and the ACTIVE ROW renders it, so actions stay aligned when soft wrap
+ * gives lines different heights.
+ */
+export type CodeBlockLineActionsSide = "end" | "gutter"
+
+const CodeBlockActionsContext = createContext<{
+  register: (
+    owner: object,
+    render: CodeBlockLineActionsRender | null,
+    side?: CodeBlockLineActionsSide
+  ) => void
+} | null>(null)
+
+/* Next still server-renders "use client" files, and a bare useLayoutEffect
+   logs on every SSR pass. Same alias the event calendar ships. */
+const useIsoLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect
+
+function useInternalConfig(part: string): CodeBlockConfigValue {
+  const context = useContext(CodeBlockConfigContext)
+  if (!context) {
+    throw new Error(`${part} must be used within a CodeBlock`)
+  }
+  return context
+}
+
+function useCodeBlockConfig(
+  part: string
+): CodeBlockConfigValue & { code: string } {
+  const context = useContext(CodeBlockConfigContext)
+  const document = useContext(CodeBlockDocumentContext)
+  if (!context || !document) {
+    throw new Error(`${part} must be used within a CodeBlock`)
+  }
+  /* `code` lives on the DOCUMENT context (it changes per streamed chunk);
+     keeping it out of the config is what lets chrome that ignores the source
+     skip those re-renders. The public hook still returns it. */
+  return useMemo(
+    () => ({ ...context, code: document.code }),
+    [context, document.code]
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Styling                                   */
+/* -------------------------------------------------------------------------- */
+
+/* Radius per style. Every style is named, including the zero rungs: a missing
+   rung is a style someone forgot. The parity suite enforces all-eight-or-one. */
+const ROOT_GHOST_CLASS = "[--code-block-bg:transparent]"
+
+const ROOT_RADIUS_CLASS =
+  "[--code-block-radius:var(--radius-lg)]"
+
+/*
+ * Colour vars use the BASE theme tokens (--card, --primary, ...), never the
+ * --color-* twins: those are static @theme literals that ignore a nested
+ * `.dark` scope, which once painted a white gutter cell on a forced-dark
+ * block. Tints are one system, 8% light / 12% dark (yellow a touch more),
+ * matching the *-light badge weights. This item ships the same cssVars.
+ */
+const ROOT_TOKEN_CLASS = [
+  "[--code-block-padding:--spacing(3)]",
+  "[--code-block-gutter-width:--spacing(9)]",
+  "[--code-block-gutter-gap:--spacing(2.5)]",
+  /* The fold channel sits between the numbers and the code, so both the number
+     cell's padding and the gutter width are expressed against it and a block
+     without folding pays nothing for it. */
+  "[--code-block-fold-width:--spacing(4.5)]",
+  "[--code-block-number-pad:var(--code-block-gutter-gap)]",
+  "data-[gutter-channel]:[--code-block-number-pad:calc(var(--code-block-gutter-gap)+var(--code-block-fold-width))]",
+  /* A diff column breathes: the +/- glyph gets a wider channel. */
+  "data-[has-diff]:[--code-block-gutter-gap:--spacing(4)]",
+  "[--code-block-line-height:1.5rem]",
+  "[--code-block-font-size:0.8125rem]",
+  "[--code-block-copy-inset:--spacing(2)]",
+  /* Where a PINNED control starts. With a header composed in, the root's top
+     edge is the header, so an unadjusted inset drops the copy button onto the
+     title row instead of the code. The header's own `min-h-9` is the height
+     assumed here, plus its 1px bottom border; override the variable for a
+     header built taller than one row. */
+  "[--code-block-header-height:--spacing(9)]",
+  "[--code-block-copy-top:var(--code-block-copy-inset)]",
+  "data-[has-header]:[--code-block-copy-top:calc(var(--code-block-header-height)+1px+var(--code-block-copy-inset))]",
+  /* Room the expanded block keeps under the last line for the floating
+     "Show less" control. */
+  "[--code-block-expand-clearance:--spacing(9)]",
+  /* What sits behind a sticky line number while the code scrolls under it.
+     `ghost` blanks it, because there the surface belongs to the wrapper. */
+  "[--code-block-bg:var(--card)]",
+  "[--code-block-highlight-bg:color-mix(in_oklch,var(--primary)_6%,transparent)]",
+  "dark:[--code-block-highlight-bg:color-mix(in_oklch,var(--primary)_12%,transparent)]",
+  "[--code-block-highlight-bar:color-mix(in_oklch,var(--primary)_60%,transparent)]",
+  "[--code-block-diff-add-bg:color-mix(in_oklch,var(--success)_8%,transparent)]",
+  "dark:[--code-block-diff-add-bg:color-mix(in_oklch,var(--success)_12%,transparent)]",
+  "[--code-block-diff-remove-bg:color-mix(in_oklch,var(--destructive)_8%,transparent)]",
+  "dark:[--code-block-diff-remove-bg:color-mix(in_oklch,var(--destructive)_12%,transparent)]",
+  "[--code-block-error-bg:color-mix(in_oklch,var(--destructive)_8%,transparent)]",
+  "dark:[--code-block-error-bg:color-mix(in_oklch,var(--destructive)_12%,transparent)]",
+  "[--code-block-warning-bg:color-mix(in_oklch,var(--warning)_10%,transparent)]",
+  "dark:[--code-block-warning-bg:color-mix(in_oklch,var(--warning)_14%,transparent)]",
+  "[--code-block-info-bg:color-mix(in_oklch,var(--info)_8%,transparent)]",
+  "dark:[--code-block-info-bg:color-mix(in_oklch,var(--info)_12%,transparent)]",
+  "[--code-block-caret-color:var(--primary)]",
+].join(" ")
+
+const ROOT_BASE_CLASS =
+  "group/code-block relative flex min-w-0 flex-col rounded-(--code-block-radius) text-left"
+
+const ROOT_SURFACE_CLASS =
+  "border border-border bg-card text-card-foreground bg-clip-padding"
+
+/**
+ * The token colour switch: tokens carry only `--cb-c` / `--cb-cd`, and these
+ * two rules recolour the whole block per theme instead of a `dark:` utility on
+ * every span. The `color:` hint is load-bearing: `text-[var(--x)]` is
+ * type-ambiguous to Tailwind and emits NO rule at all, which renders as a
+ * highlighter that silently failed. Same reason the font size uses `length:`.
+ */
+const TOKEN_COLOR_CLASS =
+  "[&_[data-slot=code-block-token]]:text-[color:var(--cb-c,currentColor)] dark:[&_[data-slot=code-block-token]]:text-[color:var(--cb-cd,currentColor)]"
+
+/**
+ * Line numbers are a CSS counter, never DOM: a pseudo-element cannot join a
+ * text selection, so copying yields exact source, and the gutter costs zero
+ * elements. `startLine` is a counter reset on the pre.
+ */
+const LINE_NUMBER_CLASS = [
+  "[[data-code-line-numbers]_&]:before:pointer-events-none",
+  "[[data-code-line-numbers]_&]:before:sticky",
+  "[[data-code-line-numbers]_&]:before:left-0",
+  "[[data-code-line-numbers]_&]:before:z-10",
+  "[[data-code-line-numbers]_&]:before:-ml-(--code-block-gutter-width)",
+  "[[data-code-line-numbers]_&]:before:inline-block",
+  "[[data-code-line-numbers]_&]:before:w-(--code-block-gutter-width)",
+  "[[data-code-line-numbers]_&]:before:pl-(--code-block-padding)",
+  "[[data-code-line-numbers]_&]:before:pr-(--code-block-number-pad)",
+  "[[data-code-line-numbers]_&]:before:bg-(--code-block-bg)",
+  "[[data-code-line-numbers]_&]:before:text-right",
+  "[[data-code-line-numbers]_&]:before:tabular-nums",
+  "[[data-code-line-numbers]_&]:before:text-muted-foreground/50",
+  "[[data-code-line-numbers]_&]:before:select-none",
+  "[[data-code-line-numbers]_&]:before:[counter-increment:cb-line]",
+  "[[data-code-line-numbers]_&]:before:content-[counter(cb-line)]",
+  /* A line carrying its own gutter label (a patch's dual numbers, a hunk
+     marker) renders that instead of the counter. */
+  "[[data-code-line-numbers]_&[data-gutter]]:before:content-[attr(data-gutter)]",
+  "[[data-code-line-numbers]_&[data-gutter]]:before:whitespace-pre",
+].join(" ")
+
+/** Diff glyphs ride in the same pseudo-element family, so they never copy. */
+/**
+ * The diff glyph gets its own channel, centred in the left padding (no
+ * numbers) or in the number-to-code gap. A fixed `left-1` had ~1px of
+ * clearance and would land on the first character.
+ */
+const LINE_DIFF_CLASS = [
+  "data-[diff]:after:absolute",
+  /* Above the number cell. That cell is sticky with an opaque backdrop at z-10,
+     so a glyph sharing its column is painted out at the default z. */
+  "data-[diff]:after:z-20",
+  "data-[diff]:after:left-0",
+  "data-[diff]:after:w-(--code-block-padding)",
+  "data-[diff]:after:text-center",
+  "[[data-code-line-numbers]_&]:data-[diff]:after:-left-(--code-block-gutter-gap)",
+  "[[data-code-line-numbers]_&]:data-[diff]:after:w-(--code-block-gutter-gap)",
+  "data-[diff]:after:select-none",
+  "data-[diff=add]:after:text-success",
+  "data-[diff=remove]:after:text-destructive",
+  "data-[diff=add]:after:content-['+']",
+  "data-[diff=remove]:after:content-['-']",
+].join(" ")
+
+const LINE_STATE_CLASS = [
+  "data-[highlighted]:bg-(--code-block-highlight-bg)",
+  "data-[highlighted]:shadow-[inset_2px_0_0_0_var(--code-block-highlight-bar)]",
+  "data-[diff=add]:bg-(--code-block-diff-add-bg)",
+  "data-[diff=remove]:bg-(--code-block-diff-remove-bg)",
+  "data-[level=error]:bg-(--code-block-error-bg)",
+  "data-[level=warning]:bg-(--code-block-warning-bg)",
+  "data-[level=info]:bg-(--code-block-info-bg)",
+  "data-[selected]:bg-accent",
+  /* Arrow navigation needs a visible position (WCAG 2.4.7); gated on the
+     selectable listbox so plain blocks stay inert on hover. */
+  "[[data-selectable]_&]:data-[active]:bg-muted/40",
+].join(" ")
+
+/**
+ * Focus mode dims the rest and clears on hover.
+ *
+ * Blur alone makes a snippet unreadable if the reader wanted the surrounding
+ * context after all, so hovering the block restores everything.
+ */
+/**
+ * Motion is streaming-only and compositor-only: rows keep identity across
+ * chunks, so the entry animation fires once per NEW line and a static block
+ * never animates. Tokens deliberately do not animate (the plain tail gaining
+ * colour remounts them mid-read). Reduced motion disables the row entry.
+ */
+const LINE_MOTION_CLASS =
+  "[[data-streaming]_&]:animate-in [[data-streaming]_&]:fade-in-0 [[data-streaming]_&]:slide-in-from-bottom-1 [[data-streaming]_&]:duration-150 [[data-streaming]_&]:ease-out motion-reduce:animate-none"
+
+/**
+ * Deliberately no per-token animation. The highlighter runs a chunk behind
+ * the stream and REPLACES the plain-text fallback lines with tokenised ones,
+ * which remounts every token span; a mount-keyed fade therefore re-flashed
+ * whole lines that were already readable, 300ms behind the caret. Colour
+ * arriving instantly reads as highlighting; re-fading reads as a glitch.
+ */
+const TOKEN_MOTION_CLASS = ""
+
+const LINE_FOCUS_CLASS =
+  "data-[blurred]:opacity-40 data-[blurred]:blur-[1.5px] data-[blurred]:transition-[opacity,filter] group-hover/code-block:data-[blurred]:opacity-100 group-hover/code-block:data-[blurred]:blur-none"
+
+/**
+ * `data-code-line`, not `data-line`: rehype-pretty-code apps ship a global
+ * `[data-line] span { color !important }` rule, and reusing its attribute
+ * rendered every token monochrome. Cost a real investigation.
+ */
+const LINE_BASE_CLASS = cn(
+  "relative block min-h-(--code-block-line-height) w-full px-(--code-block-padding) leading-(--code-block-line-height)",
+  /* With numbers on, the left inset lives inside the sticky cell instead, so
+     paying it here too would restore the double count the gutter just lost. */
+  "[[data-code-line-numbers]_&]:pl-0"
+)
+
+/* -------------------------------------------------------------------------- */
+/*                                    Folding                                  */
+/* -------------------------------------------------------------------------- */
+
+export type CodeBlockFoldRegion = {
+  /** Source line that owns the toggle and stays visible when folded. */
+  start: number
+  /** Last source line the region swallows. */
+  end: number
+}
+
+const INDENT_RE = /^[ \t]*/
+
+/**
+ * Regions come from indentation, not the grammar: shiki returns tokens, no
+ * AST, and indentation is language-agnostic where a brace matcher is not.
+ * A tab counts as two columns; only self-consistency matters.
+ */
+function computeFoldRegions(lines: CodeBlockLine[]): CodeBlockFoldRegion[] {
+  const indent = (text: string) =>
+    (INDENT_RE.exec(text)?.[0] ?? "").replace(/\t/g, "  ").length
+  const blank = (text: string) => text.trim().length === 0
+
+  /* One pass with an open-region stack instead of a nested scan per line:
+     the old shape was quadratic on monotonically indenting files and re-ran
+     per streamed chunk. A region closes when a non-blank line returns to its
+     opener's indent; trailing blanks belong to whatever follows. */
+  const regions: CodeBlockFoldRegion[] = []
+  const stack: { start: number; indent: number; last: number }[] = []
+  let previous: { number: number; indent: number } | null = null
+
+  for (const line of lines) {
+    if (blank(line.text)) continue
+    const own = indent(line.text)
+
+    while (stack.length && own <= stack[stack.length - 1].indent) {
+      const open = stack.pop()!
+      if (open.last > open.start) {
+        regions.push({ start: open.start, end: open.last })
+      }
+    }
+    for (const open of stack) open.last = line.number
+
+    if (previous && own > previous.indent) {
+      stack.push({
+        start: previous.number,
+        indent: previous.indent,
+        last: line.number,
+      })
+    }
+    previous = { number: line.number, indent: own }
+  }
+
+  while (stack.length) {
+    const open = stack.pop()!
+    if (open.last > open.start)
+      regions.push({ start: open.start, end: open.last })
+  }
+
+  return regions.sort((a, b) => a.start - b.start)
+}
+
+/** Frozen so the disabled path keeps a stable identity across renders. */
+const EMPTY_FOLD_REGIONS: CodeBlockFoldRegion[] = []
+
+/* -------------------------------------------------------------------------- */
+/*                                    Tokens                                   */
+/* -------------------------------------------------------------------------- */
+
+type TokenStyle = CSSProperties & Record<"--cb-c" | "--cb-cd", string>
+
+function tokenStyle(token: CodeBlockToken): CSSProperties | undefined {
+  if (!token.color && !token.colorDark && !token.fontStyle) return undefined
+
+  const style: Partial<TokenStyle> = {}
+  if (token.color) style["--cb-c"] = token.color
+  if (token.colorDark) style["--cb-cd"] = token.colorDark
+  if (token.fontStyle === "italic") style.fontStyle = "italic"
+  if (token.fontStyle === "bold") style.fontWeight = 700
+  if (token.fontStyle === "underline") style.textDecoration = "underline"
+  return style as CSSProperties
+}
+
+function CodeBlockTokens({ tokens }: { tokens: CodeBlockToken[] }) {
+  return (
+    <>
+      {tokens.map((token, index) => {
+        const style = tokenStyle(token)
+
+        /* An unstyled token needs no element at all. Whitespace and
+           punctuation are most of a file, so this removes most of the spans. */
+        if (!style && !token.word) {
+          return <span key={index}>{token.content}</span>
+        }
+
+        return (
+          <span
+            key={index}
+            data-slot="code-block-token"
+            data-word={token.word || undefined}
+            className={cn(
+              token.word &&
+                "bg-primary/10 ring-primary/20 rounded-sm px-0.5 py-px ring-1 ring-inset"
+            )}
+            style={style}
+          >
+            {token.content}
+          </span>
+        )
+      })}
+    </>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                     Line                                    */
+/* -------------------------------------------------------------------------- */
+
+type CodeBlockLineRowProps = {
+  line: CodeBlockLine
+  selectable: boolean
+  selected: boolean
+  focusMode: boolean
+  active: boolean
+  caret: boolean
+  actions?: CodeBlockLineActionsRender | null
+  actionsSide?: CodeBlockLineActionsSide
+  domIdBase?: string
+  startLine?: number
+  onSelect?: (line: number, extend: boolean) => void
+  foldable?: boolean
+  foldRegion?: CodeBlockFoldRegion
+  folded?: boolean
+  onToggleFold?: (start: number) => void
+}
+
+/**
+ * Plain reference-equality `memo`, on purpose: the highlighter returns the
+ * SAME object for an unchanged line, so a streamed chunk re-renders one row.
+ * A custom comparator would spend that win walking every token.
+ */
+const CodeBlockLineRow = memo(function CodeBlockLineRow({
+  line,
+  selectable,
+  selected,
+  focusMode,
+  active,
+  caret,
+  actions,
+  actionsSide = "end",
+  domIdBase,
+  startLine = 1,
+  onSelect,
+  foldable,
+  foldRegion,
+  folded,
+  onToggleFold,
+}: CodeBlockLineRowProps) {
+  const state = line.state
+  const blurred = focusMode && !state?.focused
+  const lineDomId = domIdBase ? `${domIdBase}-L${line.number}` : undefined
+  const hiddenCount = foldRegion ? foldRegion.end - foldRegion.start : 0
+  /* The fold toggle owns the channel, so a fold-start row keeps its chevron
+     and sends the action back to the row end. */
+  const inGutter = actionsSide === "gutter" && !foldRegion
+
+  return (
+    <span
+      data-slot="code-block-line"
+      data-code-line={line.number}
+      data-gutter={line.gutter}
+      id={lineDomId}
+      data-active={active || undefined}
+      data-highlighted={state?.highlighted || undefined}
+      data-diff={state?.diff}
+      data-focused={state?.focused || undefined}
+      data-blurred={blurred || undefined}
+      data-level={state?.level}
+      data-selected={selected || undefined}
+      role={selectable ? "option" : undefined}
+      aria-selected={selectable ? selected : undefined}
+      tabIndex={selectable ? -1 : undefined}
+      onMouseDown={
+        /* Shift-click is line-range selection here, but the browser also reads
+           it as "extend the text selection", which paints a stray highlight
+           across the block. Suppressing it only for the shift case leaves plain
+           drag-to-select, and therefore copying, untouched. */
+        selectable
+          ? (event) => {
+              if (event.shiftKey) event.preventDefault()
+            }
+          : undefined
+      }
+      onClick={
+        selectable && onSelect
+          ? (event) => onSelect(line.number, event.shiftKey)
+          : undefined
+      }
+      className={cn(
+        LINE_BASE_CLASS,
+        LINE_NUMBER_CLASS,
+        LINE_STATE_CLASS,
+        LINE_DIFF_CLASS,
+        LINE_FOCUS_CLASS,
+        LINE_MOTION_CLASS,
+        selectable && "cursor-pointer"
+      )}
+      /**
+       * Every row re-seeds the counter, making its number absolute rather
+       * than ordinal. That serves two features at once: folding can remove
+       * rows without renumbering the tail, and `content-visibility` can skip
+       * offscreen rows - a style-contained row cannot read a shared counter,
+       * which once rendered every gutter number as 1.
+       */
+      style={{ counterReset: `cb-line ${line.number - 1}` }}
+    >
+      {foldRegion && onToggleFold ? (
+        <button
+          type="button"
+          /* Inside a role="option" row a focusable descendant is invalid ARIA,
+             so the toggle leaves the tab order when the block is selectable;
+             pointer use is unaffected. */
+          tabIndex={selectable ? -1 : undefined}
+          data-slot="code-block-fold-toggle"
+          data-state={folded ? "folded" : "unfolded"}
+          aria-expanded={!folded}
+          aria-label={
+            folded
+              ? `Unfold lines ${foldRegion.start + startLine - 1} to ${foldRegion.end + startLine - 1}`
+              : `Fold lines ${foldRegion.start + startLine - 1} to ${foldRegion.end + startLine - 1}`
+          }
+          onClick={(event) => {
+            /* The row itself may be a selection target, and a fold is not a
+               selection. */
+            event.stopPropagation()
+            onToggleFold(foldRegion.start)
+          }}
+          className={cn(
+            /* Styled as a ghost xs button rather than composed from Button:
+               the ghost variant paints aria-expanded:bg-muted, which would
+               keep every UNFOLDED toggle lit, and its icon rungs do not fit
+               an 18px channel. Hover feedback only; folded state reads
+               through color. */
+            /* Square, centred in the line box: height matches the width and
+               the translate makes up the difference to the 24px line. Open
+               regions read darker than folded ones. */
+            "text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-ring/50 sticky z-20 inline-flex size-(--code-block-fold-width) shrink-0 translate-y-[calc((var(--code-block-line-height)-var(--code-block-fold-width))/2)] cursor-pointer items-center justify-center rounded-[4px] align-top outline-none focus-visible:ring-2",
+            /* Margins cancel: -(4px + width) then +4px, so the toggle paints
+               in the channel, sits 4px from the code, and the code still
+               starts where a row without a toggle does. An uncancelled
+               margin slid every foldable row and clipped characters. The
+               spacing() shorthand is written as a rem literal because
+               `mr-(--spacing(1))` is not valid Tailwind and generates no
+               rule at all - measured live as a 4px drift. */
+            "-ml-[calc(var(--code-block-fold-width)+0.25rem)]",
+            "mr-[0.25rem]",
+            "left-[calc(var(--code-block-gutter-width)-var(--code-block-fold-width)-0.25rem)]",
+            folded && "text-muted-foreground/60"
+          )}
+        >
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="size-3"
+          >
+            <path d={folded ? "m9 18 6-6-6-6" : "m6 9 6 6 6-6"} />
+          </svg>
+        </button>
+      ) : null}
+      {actions && active ? (
+        <span
+          data-slot="code-block-line-actions"
+          data-side={inGutter ? "gutter" : "end"}
+          contentEditable={false}
+          /* An action is a control, not line content. Without this the click
+             bubbles to a selectable row and toggles the very selection the
+             action just consumed, so "add these 6 lines" left line 6 selected
+             behind it. The consumer's own handler has already run by here. */
+          onClick={(event) => event.stopPropagation()}
+          className={cn(
+            /* Inside the <pre>, so the code surface's mono face, pre
+               whitespace and token color would cascade into real buttons
+               placed here. Reset to app typography at the boundary. */
+            "text-foreground z-20 items-center gap-1 font-sans whitespace-normal select-none",
+            !inGutter &&
+              "absolute end-2 top-0 flex h-(--code-block-line-height)",
+            /* ABSOLUTE and centred on the row's START EDGE: `left-0` is where
+               the code column begins (the row box already excludes the
+               gutter), and the -50% translate hangs the control half over the
+               number column, half over the code - the editor treatment. Being
+               out of flow on BOTH axes is the point: an in-flow version
+               pushed the code right by its own width, and an earlier block
+               level one broke the row onto a new line. The control travels
+               with the code on a horizontal scroll; it cannot also be sticky. */
+            inGutter &&
+              "absolute top-1/2 left-0 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center"
+          )}
+        >
+          {actions({ line: line.number, text: line.text, state })}
+        </span>
+      ) : null}
+      <span data-slot="code-block-line-content">
+        {/* An empty line needs an explicit break. Copying a selection relies on
+            the browser emitting a newline between block-level rows, and a row
+            with no text at all contributes neither text nor separator, so a
+            blank line silently vanishes from the pasted source. */}
+        {line.tokens.length === 0 ? <br /> : null}
+        <CodeBlockTokens tokens={line.tokens} />
+        {folded && hiddenCount > 0 ? (
+          /* `select-none` is doing real work: a manual drag-select over a
+             folded block would otherwise paste this chip into the middle of
+             the source. The copy button reads the raw code and never sees it. */
+          <button
+            type="button"
+            tabIndex={selectable ? -1 : undefined}
+            data-slot="code-block-fold-marker"
+            aria-label={`Unfold ${hiddenCount} hidden lines`}
+            onClick={(event) => {
+              event.stopPropagation()
+              onToggleFold?.(line.number)
+            }}
+            /* Same centring as the fold toggle: chip height matches the fold
+               channel and the translate makes up the difference to the line
+               box, so the label sits on the code baseline's visual centre
+               instead of riding high. */
+            className="bg-muted/80 text-muted-foreground hover:bg-muted ml-2 inline-flex h-(--code-block-fold-width) translate-y-[calc((var(--code-block-line-height)-var(--code-block-fold-width))/2)] cursor-pointer items-center rounded-sm px-1.5 align-top text-[0.8em] leading-none select-none"
+          >
+            {`... ${hiddenCount} lines`}
+          </button>
+        ) : null}
+        {caret ? (
+          <span
+            data-slot="code-block-caret"
+            aria-hidden="true"
+            /* An underline caret: a thin strip on the baseline, the shape a
+               terminal uses, instead of a bold block that outweighs the text
+               it follows. */
+            className="ml-0.5 inline-block h-[0.12em] w-[0.55em] translate-y-[0.02em] animate-pulse rounded-[1px] bg-(--code-block-caret-color) motion-reduce:animate-none"
+          />
+        ) : null}
+      </span>
+    </span>
+  )
+})
+
+/* -------------------------------------------------------------------------- */
+/*                                     Root                                    */
+/* -------------------------------------------------------------------------- */
+
+export type CodeBlockProps = {
+  code?: string
+  language?: string
+  lines?: CodeBlockLine[]
+  themes?: CodeBlockThemes
+  highlight?: boolean
+  showLineNumbers?: boolean
+  startLine?: number
+  wrap?: boolean
+  defaultWrap?: boolean
+  onWrapChange?: (wrap: boolean) => void
+  maxLines?: number
+  variant?: "default" | "ghost"
+  label?: string
+  highlightedLines?: CodeBlockLineSpec
+  highlightedWords?: CodeBlockWordSpec[]
+  focusedLines?: CodeBlockLineSpec
+  diff?: CodeBlockDiffSpec
+  lineLevels?: CodeBlockLevelSpec
+  transformers?: CodeBlockTransformer[]
+  streaming?: boolean
+  selectable?: boolean
+  selectedLines?: number[]
+  defaultSelectedLines?: number[]
+  onSelectedLinesChange?: (lines: number[]) => void
+  /** Screen-reader text announced when a stream finishes, for localisation. */
+  completeAnnouncement?: string
+  /** Collapsed state under `maxLines`, controlled. */
+  expanded?: boolean
+  defaultExpanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
+  /** Detects fold regions from indentation and renders a toggle per region. */
+  foldable?: boolean
+  /**
+   * Replaces the indentation heuristic with your own regions (source-numbered,
+   * like every line spec) - grammar folding, JSON blocks, patch hunks.
+   * Implies nothing about `foldable`; pass both.
+   */
+  foldRegions?: CodeBlockFoldRegion[]
+  /** Folded regions by start line, 1-based within `code`. Controlled. */
+  folded?: number[]
+  /** Folded regions by their start line, uncontrolled. */
+  defaultFolded?: number[]
+  onFoldedChange?: (folded: number[]) => void
+  children?: ReactNode
+} & Omit<ComponentProps<"div">, "children" | "onSelect">
+
+/**
+ * The root. `<CodeBlock code={code} language="tsx" />` is a complete block;
+ * passing `lines` from a server component skips the client highlighter and
+ * shiki entirely. Children are CHROME ONLY: the root renders the code surface
+ * itself, so child order never matters and a wrapper cannot break scrolling.
+ */
+function CodeBlock({
+  code,
+  language,
+  lines: linesProp,
+  themes,
+  highlight = true,
+  showLineNumbers = false,
+  startLine = 1,
+  wrap: wrapProp,
+  defaultWrap = false,
+  onWrapChange,
+  maxLines,
+  variant = "default",
+  label,
+  highlightedLines,
+  highlightedWords,
+  focusedLines,
+  diff,
+  lineLevels,
+  transformers,
+  streaming = false,
+  selectable = false,
+  selectedLines,
+  defaultSelectedLines,
+  onSelectedLinesChange,
+  completeAnnouncement,
+  expanded: expandedProp,
+  defaultExpanded = false,
+  onExpandedChange,
+  foldable = false,
+  foldRegions: foldRegionsProp,
+  folded,
+  defaultFolded,
+  onFoldedChange,
+  className,
+  children,
+  ...props
+}: CodeBlockProps) {
+  const contentId = useId()
+  const source = code ?? ""
+  const resolvedLanguage = resolveCodeBlockLanguage(language)
+
+  /* The deferred copy is what a fast stream tokenises against. React keeps the
+     previous render on screen while the new one is prepared, so the block never
+     blanks and the main thread is never blocked by a chunk. */
+  const deferredSource = useDeferredValue(source)
+
+  const plainLines = useMemo(
+    () => toPlainLines(deferredSource, startLine),
+    [deferredSource, startLine]
+  )
+
+  /* The result is tagged with the exact inputs that produced it. Without the
+     tag, swapping `code` kept rendering the PREVIOUS document for the whole
+     async highlight pass - or spliced two files together when the old result
+     was shorter than the new source. */
+  const [highlighted, setHighlighted] = useState<{
+    source: string
+    spec: string
+    lines: CodeBlockLine[]
+  } | null>(null)
+
+  const shouldHighlight =
+    !linesProp && highlight && Boolean(resolvedLanguage) && source.length > 0
+
+  /* Presentation props enter the effect as ONE serialized key: they are
+     inline literals at most call sites, and reference deps would re-tokenize
+     per parent render. The effect parses its inputs back out of the key, so
+     used and depended-on values cannot drift. `transformers` holds functions
+     and stays a reference dep - hoist it to module scope. */
+  const specKey = JSON.stringify([
+    themes ?? null,
+    startLine,
+    highlightedLines ?? null,
+    highlightedWords ?? null,
+    focusedLines ?? null,
+    diff ?? null,
+    lineLevels ?? null,
+  ])
+
+  const transformersWarnedRef = useRef(false)
+  const previousTransformersRef = useRef(transformers)
+  useEffect(() => {
+    if (
+      process.env.NODE_ENV !== "production" &&
+      streaming &&
+      previousTransformersRef.current !== transformers &&
+      !transformersWarnedRef.current
+    ) {
+      transformersWarnedRef.current = true
+      console.warn(
+        "[code-block] `transformers` changed identity during a stream, which " +
+          "re-tokenizes the whole document per chunk. Hoist the array to " +
+          "module scope or memoize it."
+      )
+    }
+    previousTransformersRef.current = transformers
+  }, [transformers, streaming])
+
+  useEffect(() => {
+    if (!shouldHighlight) {
+      setHighlighted(null)
+      return
+    }
+
+    const [
+      specThemes,
+      specStartLine,
+      specHighlightedLines,
+      specHighlightedWords,
+      specFocusedLines,
+      specDiff,
+      specLineLevels,
+    ] = JSON.parse(specKey) as [
+      CodeBlockThemes | null,
+      number,
+      CodeBlockLineSpec | null,
+      CodeBlockWordSpec[] | null,
+      CodeBlockLineSpec | null,
+      CodeBlockDiffSpec | null,
+      CodeBlockLevelSpec | null,
+    ]
+
+    let active = true
+    void highlightCode(deferredSource, {
+      language,
+      instanceKey: contentId,
+      themes: specThemes ?? undefined,
+      transformers,
+      startLine: specStartLine,
+      highlightedLines: specHighlightedLines ?? undefined,
+      highlightedWords: specHighlightedWords ?? undefined,
+      focusedLines: specFocusedLines ?? undefined,
+      diff: specDiff ?? undefined,
+      lineLevels: specLineLevels ?? undefined,
+    }).then((next) => {
+      if (active) {
+        setHighlighted({ source: deferredSource, spec: specKey, lines: next })
+      }
+    })
+
+    return () => {
+      active = false
+    }
+  }, [shouldHighlight, deferredSource, language, transformers, specKey])
+
+  /* Plain text is the floor, never a blank frame: the highlighter runs a
+     chunk behind a stream, so its lines show as-is and the remainder appends
+     as plain text that gains colour a frame later. */
+  const lines = useMemo(() => {
+    if (linesProp) return linesProp
+    if (!shouldHighlight || !highlighted) return plainLines
+    /* The merge below is only valid under the STREAMING invariant: the
+       highlighted source must be a prefix of what is on screen, with the same
+       presentation spec. A swapped `code` or spec falls back to plain text
+       for one highlight pass instead of showing the previous document. */
+    if (
+      highlighted.spec !== specKey ||
+      !deferredSource.startsWith(highlighted.source)
+    ) {
+      return plainLines
+    }
+    if (highlighted.lines.length >= plainLines.length) return highlighted.lines
+    return [...highlighted.lines, ...plainLines.slice(highlighted.lines.length)]
+  }, [
+    linesProp,
+    shouldHighlight,
+    highlighted,
+    plainLines,
+    deferredSource,
+    specKey,
+  ])
+
+  const focusMode = useMemo(
+    () => lines.some((line) => line.state?.focused),
+    [lines]
+  )
+
+  const hasDiff = useMemo(() => lines.some((line) => line.state?.diff), [lines])
+
+  const [internalWrap, setInternalWrap] = useState(defaultWrap)
+  const wrap = wrapProp ?? internalWrap
+  const setWrap = useCallback(
+    (next: boolean) => {
+      if (wrapProp === undefined) setInternalWrap(next)
+      onWrapChange?.(next)
+    },
+    [wrapProp, onWrapChange]
+  )
+
+  const collapsible = typeof maxLines === "number" && lines.length > maxLines
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
+  const expanded = expandedProp ?? internalExpanded
+  const setExpanded = useCallback(
+    (next: boolean) => {
+      if (expandedProp === undefined) setInternalExpanded(next)
+      onExpandedChange?.(next)
+    },
+    [expandedProp, onExpandedChange]
+  )
+  const isExpanded = collapsible ? expanded : true
+
+  const [internalSelected, setInternalSelected] = useState<number[]>(
+    defaultSelectedLines ?? []
+  )
+  const selection = selectedLines ?? internalSelected
+  const selectedSet = useMemo(() => new Set(selection), [selection])
+  const lastSelectedRef = useRef<number | null>(null)
+
+  /* Latest-value refs, so the toggle callbacks below can be created ONCE.
+     With state in their dep lists every selection or fold change minted new
+     identities, which reached every row through `onSelect`/`onToggleFold` and
+     busted the row memo the streaming design rests on. */
+  const selectionStateRef = useRef({
+    selection,
+    selectedSet,
+    controlled: selectedLines !== undefined,
+    onSelectedLinesChange,
+  })
+  selectionStateRef.current = {
+    selection,
+    selectedSet,
+    controlled: selectedLines !== undefined,
+    onSelectedLinesChange,
+  }
+
+  const commitSelection = useCallback((next: number[]) => {
+    if (!selectionStateRef.current.controlled) setInternalSelected(next)
+    selectionStateRef.current.onSelectedLinesChange?.(next)
+  }, [])
+
+  const toggleLine = useCallback(
+    (line: number, extend: boolean) => {
+      const anchor = lastSelectedRef.current
+      const { selection, selectedSet } = selectionStateRef.current
+
+      if (extend && anchor !== null) {
+        const from = Math.min(anchor, line)
+        const to = Math.max(anchor, line)
+        const range: number[] = []
+        for (let value = from; value <= to; value += 1) range.push(value)
+        commitSelection(range)
+        return
+      }
+
+      lastSelectedRef.current = line
+      commitSelection(
+        selectedSet.has(line)
+          ? selection.filter((value) => value !== line)
+          : [...selection, line].sort((a, b) => a - b)
+      )
+    },
+    [commitSelection]
+  )
+
+  /* Regions are SOURCE-numbered (1-based within `code`), like every other
+     line spec, so `folded` values and `highlightedLines` values interchange. */
+  const foldRegions = useMemo(() => {
+    if (!foldable) return EMPTY_FOLD_REGIONS
+    if (foldRegionsProp) return foldRegionsProp
+    return computeFoldRegions(lines).map((region) => ({
+      start: region.start - startLine + 1,
+      end: region.end - startLine + 1,
+    }))
+  }, [foldable, foldRegionsProp, lines, startLine])
+
+  const foldStarts = useMemo(
+    () => new Map(foldRegions.map((region) => [region.start, region])),
+    [foldRegions]
+  )
+
+  const [internalFolded, setInternalFolded] = useState<number[]>(
+    defaultFolded ?? []
+  )
+  const foldedValue = folded ?? internalFolded
+  const foldedSet = useMemo(() => new Set(foldedValue), [foldedValue])
+
+  /* Same latest-value shape as selection, for the same row-memo reason. */
+  const foldStateRef = useRef({
+    foldedValue,
+    foldedSet,
+    controlled: folded !== undefined,
+    onFoldedChange,
+  })
+  foldStateRef.current = {
+    foldedValue,
+    foldedSet,
+    controlled: folded !== undefined,
+    onFoldedChange,
+  }
+
+  const commitFolded = useCallback((next: number[]) => {
+    if (!foldStateRef.current.controlled) setInternalFolded(next)
+    foldStateRef.current.onFoldedChange?.(next)
+  }, [])
+
+  const toggleFold = useCallback(
+    (start: number) => {
+      const { foldedValue, foldedSet } = foldStateRef.current
+      commitFolded(
+        foldedSet.has(start)
+          ? foldedValue.filter((value) => value !== start)
+          : [...foldedValue, start].sort((a, b) => a - b)
+      )
+    },
+    [commitFolded]
+  )
+
+  /**
+   * A line is hidden when ANY folded region covers it, and that one rule is
+   * what makes nesting work without a tree: folding an outer region swallows
+   * the inner toggles as well, their own folded state survives untouched
+   * underneath, and unfolding the outer one restores exactly what the reader
+   * left behind rather than a flattened block.
+   */
+  const renderedLines = useMemo(() => {
+    if (!foldable || foldedSet.size === 0) return lines
+    const hidden = new Set<number>()
+    for (const start of foldedSet) {
+      const region = foldStarts.get(start)
+      if (!region) continue
+      for (let n = region.start + 1; n <= region.end; n += 1) {
+        hidden.add(n + startLine - 1)
+      }
+    }
+    return lines.filter((line) => !hidden.has(line.number))
+  }, [foldable, foldedSet, foldStarts, lines, startLine])
+
+  const configValue = useMemo<CodeBlockConfigValue>(
+    () => ({
+      language,
+      resolvedLanguage,
+      showLineNumbers,
+      wrap,
+      setWrap,
+      wrapControlled: wrapProp !== undefined,
+      expanded: isExpanded,
+      setExpanded,
+      collapsible,
+      streaming,
+      contentId,
+    }),
+    [
+      language,
+      resolvedLanguage,
+      showLineNumbers,
+      wrap,
+      setWrap,
+      wrapProp,
+      isExpanded,
+      collapsible,
+      streaming,
+      contentId,
+    ]
+  )
+
+  const clearSelection = useCallback(
+    () => commitSelection([]),
+    [commitSelection]
+  )
+
+  const documentValue = useMemo<CodeBlockDocumentValue>(
+    () => ({
+      code: source,
+      lines,
+      selected: selectedSet,
+      selectable,
+      toggleLine,
+      clearSelection,
+      foldable,
+      foldRegions,
+      folded: foldedSet,
+      toggleFold,
+      setFolded: commitFolded,
+    }),
+    [
+      source,
+      lines,
+      selectedSet,
+      selectable,
+      toggleLine,
+      clearSelection,
+      foldable,
+      foldRegions,
+      foldedSet,
+      toggleFold,
+      commitFolded,
+    ]
+  )
+
+  const visibleLines = collapsible && !isExpanded ? maxLines : undefined
+
+  /* Detected from the element type rather than a `:has()` selector. This repo
+     has measured `:has()` at 85-120ms of style invalidation per DOM mutation,
+     and a streaming block mutates on every chunk, so the primitive uses none. */
+  const hasHeader = containsElementType(children, CodeBlockHeader)
+
+  const [lineActions, setLineActions] =
+    useState<CodeBlockLineActionsRender | null>(null)
+  const [actionsSide, setActionsSide] =
+    useState<CodeBlockLineActionsSide>("end")
+  const actionsOwnerRef = useRef<object | null>(null)
+  const actionsRegistry = useMemo(
+    () => ({
+      /* Wrapped in a setter callback: a render prop IS a function, so passing
+         it to setState bare would run it as a state updater. Ownership makes
+         a stale unmount a no-op and makes a SECOND live group loud in dev -
+         the registry holds one render prop, so the second silently won. */
+      register: (
+        owner: object,
+        render: CodeBlockLineActionsRender | null,
+        side: CodeBlockLineActionsSide = "end"
+      ) => {
+        if (render) {
+          if (
+            process.env.NODE_ENV !== "production" &&
+            actionsOwnerRef.current &&
+            actionsOwnerRef.current !== owner
+          ) {
+            console.warn(
+              "[code-block] Two CodeBlockLineActions are mounted; the block " +
+                "renders ONE action group and the later mount replaces the " +
+                "earlier one."
+            )
+          }
+          actionsOwnerRef.current = owner
+        } else if (actionsOwnerRef.current !== owner) {
+          return
+        } else {
+          actionsOwnerRef.current = null
+        }
+        setLineActions(() => render)
+        setActionsSide(side)
+      },
+    }),
+    []
+  )
+
+  /* One channel between the numbers and the code, shared by the fold toggle
+     and a gutter-side action. Reserved only when something asks for it, so a
+     plain block keeps the gutter it always had. */
+  /* Only FOLDING reserves gutter space. A gutter-side action floats over the
+     row's start edge instead of widening anything, so a block with actions is
+     geometrically identical to one without. */
+  const gutterChannel = foldable
+
+  /* Walked rather than registered, so server HTML never carries a doubled
+     surface. Sees through plain wrappers; a consumer component boundary is
+     opaque, which the dev-mode guard in CodeBlockContent reports. */
+  const hasContent = containsElementType(children, CodeBlockContent)
+
+  const surfaceProps: CodeBlockSurfaceProps = {
+    lines: renderedLines,
+    gutterMax: lines[lines.length - 1]?.number ?? startLine,
+    foldable,
+    gutterChannel,
+    actionsSide,
+    foldStarts,
+    foldedSet,
+    onToggleFold: toggleFold,
+    expandClearance: collapsible && isExpanded,
+    wrap,
+    startLine,
+    showLineNumbers,
+    focusMode,
+    selectable,
+    selectedSet,
+    toggleLine,
+    visibleLines,
+    streaming,
+    label: label ?? (language ? `${language} code` : "Code"),
+    contentId,
+    actions: lineActions,
+    completeAnnouncement,
+    builtInSurfaceRendered: !hasContent,
+  }
+
+  return (
+    <CodeBlockConfigContext.Provider value={configValue}>
+      <CodeBlockDocumentContext.Provider value={documentValue}>
+        <CodeBlockActionsContext.Provider value={actionsRegistry}>
+          <div
+            data-slot="code-block"
+            data-variant={variant}
+            data-streaming={streaming || undefined}
+            data-has-diff={hasDiff || undefined}
+            data-foldable={foldable || undefined}
+            data-gutter-channel={gutterChannel || undefined}
+            data-has-header={hasHeader || undefined}
+            className={cn(
+              ROOT_BASE_CLASS,
+              ROOT_RADIUS_CLASS,
+              ROOT_TOKEN_CLASS,
+              variant === "default" && ROOT_SURFACE_CLASS,
+              variant === "ghost" && ROOT_GHOST_CLASS,
+              className
+            )}
+            {...props}
+          >
+            <CodeBlockSurfacePropsContext.Provider value={surfaceProps}>
+              {children}
+              {!hasContent && <CodeBlockSurface {...surfaceProps} />}
+            </CodeBlockSurfacePropsContext.Provider>
+          </div>
+        </CodeBlockActionsContext.Provider>
+      </CodeBlockDocumentContext.Provider>
+    </CodeBlockConfigContext.Provider>
+  )
+}
+
+/**
+ * The code surface as a composable part: inside your own ScrollArea the block
+ * stops scrolling internally and the ancestor owns both axes (`maxLines`'
+ * height cap no longer applies). Omitted, the root renders the same surface
+ * itself, exactly as before.
+ */
+function CodeBlockContent({ className }: { className?: string }) {
+  const surface = useContext(CodeBlockSurfacePropsContext)
+  if (!surface) {
+    throw new Error("CodeBlockContent must be used within a CodeBlock")
+  }
+
+  /* The render-time walk cannot see through a consumer's own component
+     boundary; when that happens the root also renders its built-in surface
+     and the code appears twice. Silent double content is the worst failure
+     mode, so development says exactly what to do. */
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production") return
+    if (surface.builtInSurfaceRendered) {
+      console.error(
+        "CodeBlockContent is hidden behind a component boundary, so CodeBlock " +
+          "also rendered its built-in surface and the code appears twice. " +
+          "Compose <CodeBlockContent /> directly in the CodeBlock's children " +
+          "(plain wrappers like a ScrollArea are fine)."
+      )
+    }
+  }, [surface.builtInSurfaceRendered])
+
+  return <CodeBlockSurface {...surface} scroll={false} className={className} />
+}
+
+/**
+ * Sees through plain element wrappers (a ScrollArea, a div) but not through a
+ * consumer's own component boundary - unrendered children are opaque. Compose
+ * `CodeBlockContent` directly in the block's subtree.
+ */
+function containsElementType(node: ReactNode, type: unknown): boolean {
+  for (const child of Children.toArray(node)) {
+    if (!isValidElement(child)) continue
+    if (child.type === type) return true
+    const inner = (child.props as { children?: ReactNode }).children
+    if (inner && containsElementType(inner, type)) return true
+  }
+  return false
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Surface                                   */
+/* -------------------------------------------------------------------------- */
+
+type CodeBlockSurfaceProps = {
+  lines: CodeBlockLine[]
+  wrap: boolean
+  startLine: number
+  showLineNumbers: boolean
+  focusMode: boolean
+  selectable: boolean
+  selectedSet: Set<number>
+  toggleLine: (line: number, extend: boolean) => void
+  visibleLines?: number
+  gutterMax: number
+  foldable: boolean
+  gutterChannel: boolean
+  actionsSide: CodeBlockLineActionsSide
+  foldStarts: Map<number, CodeBlockFoldRegion>
+  foldedSet: Set<number>
+  onToggleFold: (start: number) => void
+  expandClearance: boolean
+  streaming: boolean
+  label: string
+  contentId: string
+  actions?: CodeBlockLineActionsRender | null
+  completeAnnouncement?: string
+  /** true when the root rendered its own surface (no CodeBlockContent found). */
+  builtInSurfaceRendered?: boolean
+  /** false = no scroll container of its own; an ancestor scrolls instead. */
+  scroll?: boolean
+  className?: string
+}
+
+function CodeBlockSurface({
+  lines,
+  wrap,
+  startLine,
+  showLineNumbers,
+  focusMode,
+  selectable,
+  selectedSet,
+  toggleLine,
+  visibleLines,
+  gutterMax,
+  foldable,
+  gutterChannel,
+  actionsSide,
+  foldStarts,
+  foldedSet,
+  onToggleFold,
+  expandClearance,
+  streaming,
+  label,
+  contentId,
+  actions,
+  completeAnnouncement,
+  scroll = true,
+  className,
+}: CodeBlockSurfaceProps) {
+  const viewportRef = useRef<HTMLDivElement | null>(null)
+  const preRef = useRef<HTMLPreElement | null>(null)
+  const [activeLine, setActiveLine] = useState<number | null>(null)
+  const stickRef = useRef(true)
+
+  /* Stick-to-bottom disengages the moment the reader scrolls up, and re-engages
+     when they come back. Reading the scroll position on the event is enough
+     here because nothing is written back during the same frame. */
+  /* Announced once when a stream ends, so a screen reader learns the code is
+     complete without hearing it assembled character by character. */
+  const [announcement, setAnnouncement] = useState("")
+  const wasStreaming = useRef(streaming)
+  useEffect(() => {
+    if (wasStreaming.current && !streaming) {
+      setAnnouncement(
+        completeAnnouncement ??
+          `Code generation complete, ${lines.length} lines.`
+      )
+    }
+    wasStreaming.current = streaming
+  }, [streaming, lines.length, completeAnnouncement])
+
+  /* Stick-to-bottom follows whichever element ACTUALLY scrolls - writing
+     scrollTop to the composed mode's inert viewport was a silent no-op.
+     Resolved per commit: a short block becomes its own scroller the moment
+     it outgrows its cap. */
+  const resolveScroller = useCallback((): HTMLElement | null => {
+    const viewport = viewportRef.current
+    if (!viewport) return null
+    if (viewport.scrollHeight > viewport.clientHeight + 1) return viewport
+
+    let node: HTMLElement | null = viewport.parentElement
+    while (node && node !== document.body) {
+      const overflowY = getComputedStyle(node).overflowY
+      if (
+        (overflowY === "auto" ||
+          overflowY === "scroll" ||
+          overflowY === "overlay") &&
+        node.scrollHeight > node.clientHeight + 1
+      ) {
+        return node
+      }
+      node = node.parentElement
+    }
+
+    /* An AI transcript's default shape scrolls the PAGE. The walk above never
+       reaches the root elements, so without this branch the stream wrote
+       scrollTop to an inert viewport and drifted off screen. */
+    const page = document.scrollingElement as HTMLElement | null
+    if (page && page.scrollHeight > page.clientHeight + 1) return page
+
+    return viewport
+  }, [])
+
+  const handleScroll = useCallback(() => {
+    const viewport = viewportRef.current
+    if (!viewport) return
+    const distance =
+      viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight
+    stickRef.current = distance < 24
+  }, [])
+
+  /* The ancestor case needs its own listener: the reader's intent has to be
+     recorded BEFORE the next chunk grows the content, or the distance already
+     includes what just arrived. Re-attached per chunk rather than diffed,
+     which is a handful of listener swaps a second and keeps this correct when
+     the scrolling element changes underneath. */
+  useEffect(() => {
+    if (!streaming) return
+    const scroller = resolveScroller()
+    if (!scroller || scroller === viewportRef.current) return
+
+    const onScroll = () => {
+      const distance =
+        scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight
+      stickRef.current = distance < 24
+    }
+
+    /* Page scrolls fire on window, not on the scrolling element. */
+    const target: EventTarget =
+      scroller === document.scrollingElement ? window : scroller
+    target.addEventListener("scroll", onScroll, { passive: true })
+    return () => target.removeEventListener("scroll", onScroll)
+  }, [streaming, lines.length, resolveScroller])
+
+  useIsoLayoutEffect(() => {
+    if (!streaming || !stickRef.current) return
+    const scroller = resolveScroller()
+    if (scroller) scroller.scrollTop = scroller.scrollHeight
+  }, [lines, streaming, resolveScroller])
+
+  /* One listener for the whole surface rather than a handler per line: the
+     active row is resolved from the event target, so the floating action group
+     costs one element no matter how long the file is. Focus is tracked as well
+     as hover, or the actions would be unreachable without a pointer. */
+  const trackActive = useCallback(
+    (event: { target: EventTarget | null }) => {
+      if (!actions && !selectable) return
+      const target = event.target as HTMLElement | null
+      const row = target?.closest?.("[data-code-line]") as HTMLElement | null
+      const value = row?.getAttribute("data-code-line")
+
+      /* No row under the pointer means the gutter, which lives in the <pre>'s
+       PADDING and so is covered by no row element. Keep the active line
+       rather than clearing it: clearing here unmounted a gutter action the
+       moment the pointer left the code toward it, so the control vanished
+       before it could be pressed. `onPointerLeave` still clears on exit. */
+      if (!value) return
+      setActiveLine(Number(value))
+    },
+    [actions, selectable]
+  )
+
+  const clearActive = useCallback(() => setActiveLine(null), [])
+
+  /* Rows and keyboard speak DISPLAYED numbers (the gutter, data-code-line);
+     selection state speaks SOURCE numbers like every other line spec. This is
+     the one conversion point between them. */
+  const toggleDisplayed = useCallback(
+    (displayed: number, extend: boolean) =>
+      toggleLine(displayed - startLine + 1, extend),
+    [toggleLine, startLine]
+  )
+
+  const handleKeyDown = useCallback(
+    (event: ReactKeyboardEvent<HTMLElement>) => {
+      if (!selectable) return
+
+      if (event.key === "Escape") {
+        setActiveLine(null)
+        return
+      }
+
+      /* Toggle IN PLACE. Shift+Arrow selects while moving, but without this a
+         keyboard user could never deselect a single line. */
+      if ((event.key === "Enter" || event.key === " ") && activeLine !== null) {
+        event.preventDefault()
+        toggleDisplayed(activeLine, event.shiftKey)
+        return
+      }
+
+      const isArrow = event.key === "ArrowDown" || event.key === "ArrowUp"
+      if (!isArrow && event.key !== "Home" && event.key !== "End") return
+      event.preventDefault()
+
+      /* Step by RENDERED index, not by number arithmetic: folding removes
+         rows, and numeric stepping walked the active line into hidden lines
+         where it silently vanished. */
+      let next: number
+      if (event.key === "Home") {
+        next = lines[0]?.number ?? startLine
+      } else if (event.key === "End") {
+        next = lines[lines.length - 1]?.number ?? startLine
+      } else {
+        const step = event.key === "ArrowDown" ? 1 : -1
+        const index = lines.findIndex((line) => line.number === activeLine)
+        const nextIndex =
+          index === -1
+            ? step === 1
+              ? 0
+              : lines.length - 1
+            : Math.min(lines.length - 1, Math.max(0, index + step))
+        next = lines[nextIndex]?.number ?? startLine
+      }
+
+      setActiveLine(next)
+      const row = preRef.current?.querySelector<HTMLElement>(
+        `[data-code-line="${next}"]`
+      )
+      row?.scrollIntoView({ block: "nearest" })
+      if (isArrow && event.shiftKey) toggleDisplayed(next, true)
+    },
+    [selectable, lines, startLine, activeLine, toggleDisplayed]
+  )
+
+  const lastLineNumber = lines[lines.length - 1]?.number
+
+  /* `startLine` is just a counter reset. Gutter width follows the widest
+     number in the DOCUMENT (not the folded view, or folding the tail would
+     shift every row); `ch` is one digit in the mono `pre`, and the floor of 2
+     stops the column twitching as a stream crosses line 9. Lines carrying
+     their own gutter label (a patch's dual numbers) widen it to the longest
+     label instead. */
+  const gutterDigits = Math.max(
+    2,
+    String(gutterMax ?? startLine).length,
+    ...lines.map((line) => line.gutter?.length ?? 0)
+  )
+
+  const surfaceStyle = {
+    "--code-block-gutter-width": gutterChannel
+      ? `calc(${gutterDigits}ch + var(--code-block-fold-width) + var(--code-block-gutter-gap) + var(--code-block-padding))`
+      : `calc(${gutterDigits}ch + var(--code-block-gutter-gap) + var(--code-block-padding))`,
+    counterReset: `cb-line ${startLine - 1}`,
+  } as CSSProperties
+
+  return (
+    <div
+      data-slot="code-block-content"
+      className={cn(
+        "relative min-w-0 rounded-[inherit]",
+        /* Clipping is the scroll-mode contract only: composed, a clipped pre
+           would hide its own width from the ancestor's viewport and the
+           horizontal scrollbar would never render. */
+        scroll && "flex-1 overflow-hidden"
+      )}
+    >
+      {/* A polite status, deliberately NOT an aria-live region on the code
+          itself: a live region over streaming code narrates every token. */}
+      <span role="status" aria-live="polite" className="sr-only">
+        {announcement}
+      </span>
+      {/* A plain overflow container, deliberately not a ScrollArea primitive.
+          The scroll must stay INSIDE the block (the sticky gutter, the
+          stick-to-bottom stream and `maxLines` all anchor to it), but nothing
+          here needs custom scrollbar machinery, and dropping it leaves the
+          block with no UI-library dependency at all - which is why both twins
+          are the same file. Compose Card, Frame, or your own ScrollArea
+          around the block for outer framing. */}
+      <div
+        ref={viewportRef}
+        data-slot="code-block-viewport"
+        id={contentId}
+        role="region"
+        aria-label={label}
+        aria-busy={streaming || undefined}
+        aria-activedescendant={
+          selectable && activeLine !== null
+            ? `${contentId}-L${activeLine}`
+            : undefined
+        }
+        tabIndex={0}
+        onScroll={handleScroll}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          "focus-visible:ring-ring/50 relative min-w-0 rounded-[inherit] outline-none focus-visible:ring-[3px]",
+          /* Composed under an ancestor scroller the surface scrolls NOTHING
+             itself: both axes belong to the ancestor, whose viewport picks up
+             the pre's overflowing width, and the sticky number cell anchors
+             to that viewport instead. Mixed ownership shipped once and read
+             as two scrollbar styles on one block. */
+          scroll && "[scrollbar-width:thin] overflow-auto",
+          scroll && visibleLines && "max-h-(--cb-max-height)",
+          className
+        )}
+        style={
+          scroll && visibleLines
+            ? ({
+                "--cb-max-height": `calc(${visibleLines} * var(--code-block-line-height) + 2 * var(--code-block-padding))`,
+              } as CSSProperties)
+            : undefined
+        }
+      >
+        <pre
+          ref={preRef}
+          dir="ltr"
+          data-code-line-numbers={showLineNumbers || undefined}
+          data-wrap={wrap || undefined}
+          role={selectable ? "listbox" : undefined}
+          data-selectable={selectable || undefined}
+          aria-multiselectable={selectable || undefined}
+          aria-label={selectable ? `${label} lines` : undefined}
+          onPointerOver={trackActive}
+          onPointerLeave={clearActive}
+          onFocus={trackActive}
+          className={cn(
+            "w-max min-w-full py-(--code-block-padding) font-mono text-(length:--code-block-font-size)",
+            TOKEN_COLOR_CLASS,
+            TOKEN_MOTION_CLASS,
+            /* `min-w-0` must beat the `min-w-full` above, or the pre keeps
+                   a floor of 100% of a scroll container that is itself wider
+                   than the viewport, and wrapping still leaves a stray
+                   horizontal scrollbar. */
+            wrap && "w-full max-w-full min-w-0 break-words whitespace-pre-wrap",
+            showLineNumbers && "pl-(--code-block-gutter-width)",
+            /* The expand control floats over the surface in BOTH states, so
+                   an expanded block reserves a row of clearance rather than
+                   growing a bordered footer under the code. */
+            expandClearance && "pb-(--code-block-expand-clearance)"
+          )}
+          style={surfaceStyle}
+        >
+          {/* `content-visibility: auto` is a measured dead end on BOTH axes:
+                  its style containment breaks the shared gutter counter
+                  (every number renders as 1), and per-row it still fails -
+                  the paint containment clips the number cell, which is
+                  deliberately pulled left OUT of the row's box (verified in
+                  Chrome: forcing one row visible restored only that row's
+                  number). Windowing here means rendering fewer rows, not
+                  containing them. */}
+          {/* presentation, so the listbox owns its options directly. */}
+          <code
+            data-slot="code-block-code"
+            role={selectable ? "presentation" : undefined}
+          >
+            {lines.map((line) => (
+              <CodeBlockLineRow
+                key={line.number}
+                line={line}
+                selectable={selectable}
+                selected={selectedSet.has(line.number - startLine + 1)}
+                focusMode={focusMode}
+                active={activeLine === line.number}
+                caret={streaming && line.number === lastLineNumber}
+                actions={activeLine === line.number ? actions : null}
+                actionsSide={actionsSide}
+                domIdBase={contentId}
+                startLine={startLine}
+                onSelect={toggleDisplayed}
+                foldable={foldable}
+                foldRegion={foldStarts.get(line.number - startLine + 1)}
+                folded={foldedSet.has(line.number - startLine + 1)}
+                onToggleFold={onToggleFold}
+              />
+            ))}
+          </code>
+        </pre>
+      </div>
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Chrome                                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Opt-in header. Absent, the block renders no chrome, so it nests in a Card or
+ * Frame without a doubled bar. Presence flips `data-has-header` on the root,
+ * detected from the element type rather than a `:has()` selector.
+ */
+function CodeBlockHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <CodeBlockHeaderContext.Provider value={true}>
+      <div
+        data-slot="code-block-header"
+        className={cn(
+          "border-border flex min-h-9 shrink-0 items-center gap-2 border-b px-3 py-0 text-sm",
+          className
+        )}
+        {...props}
+      />
+    </CodeBlockHeaderContext.Provider>
+  )
+}
+
+function CodeBlockTitle({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="code-block-title"
+      className={cn(
+        "text-muted-foreground min-w-0 truncate font-mono text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * The resolved language as a label, no props needed. It shows what the
+ * highlighter actually resolved, so an unsupported grammar becomes visible
+ * instead of silently rendering plain.
+ */
+function CodeBlockLanguage({
+  className,
+  children,
+  ...props
+}: ComponentProps<"span">) {
+  const { language, resolvedLanguage } = useInternalConfig("CodeBlockLanguage")
+  const label = children ?? resolvedLanguage ?? language
+
+  if (!label) return null
+
+  return (
+    <span
+      data-slot="code-block-language"
+      data-unsupported={!resolvedLanguage || undefined}
+      className={cn(
+        "border-border bg-muted/60 text-muted-foreground inline-flex shrink-0 items-center rounded-md border px-1.5 py-0.5 font-mono text-[0.6875rem] leading-none uppercase",
+        className
+      )}
+      {...props}
+    >
+      {label}
+    </span>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                  Copy button                                */
+/* -------------------------------------------------------------------------- */
+
+function CopyIcon({ copied }: { copied: boolean }) {
+  return copied ? (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  ) : (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  )
+}
+
+export type CodeBlockCopyButtonProps = {
+  value?: string
+  timeout?: number
+  onCopy?: (value: string) => void
+  onCopyError?: (error: unknown) => void
+  /** Accessible names, for localisation. */
+  labels?: { copy?: string; copied?: string }
+  /** `pinned` floats over the surface; `inline` sits in a header. */
+  position?: "auto" | "pinned" | "inline"
+  alwaysVisible?: boolean
+} & Omit<ComponentProps<typeof Button>, "value" | "onCopy">
+
+/**
+ * Copy button. Inline inside a header, pinned over the surface anywhere else.
+ * Pinning is absolute against the root, not `position: sticky`: sticky still
+ * slides away under HORIZONTAL scroll, and code scrolls sideways constantly.
+ * Notation comments are stripped from the payload, matching what is rendered.
+ */
+function CodeBlockCopyButton({
+  value,
+  timeout = 2000,
+  onCopy,
+  onCopyError,
+  labels,
+  position = "auto",
+  alwaysVisible = false,
+  className,
+  variant = "ghost",
+  size,
+  children,
+  ...props
+}: CodeBlockCopyButtonProps) {
+  const context = useContext(CodeBlockConfigContext)
+  const inHeader = useContext(CodeBlockHeaderContext)
+  const [copied, setCopied] = useState(false)
+  const [copyFailed, setCopyFailed] = useState(false)
+
+  const resolvedPosition =
+    position === "auto" ? (inHeader ? "inline" : "pinned") : position
+
+  /* A header is chrome, so the button takes the smaller icon rung there and the
+     full one when it floats over the code. Both are per-style ladders in the
+     shadcn button, so this stays style-aware instead of pinning a pixel size. */
+  const resolvedSize =
+    size ?? (resolvedPosition === "inline" ? "icon-sm" : "icon")
+
+  useEffect(() => {
+    if (!copied || timeout === 0) return
+    const id = window.setTimeout(() => setCopied(false), timeout)
+    return () => window.clearTimeout(id)
+  }, [copied, timeout])
+
+  useEffect(() => {
+    if (!copyFailed) return
+    const id = window.setTimeout(() => setCopyFailed(false), 2000)
+    return () => window.clearTimeout(id)
+  }, [copyFailed])
+
+  const document_ = useContext(CodeBlockDocumentContext)
+
+  const handleClick = useCallback(() => {
+    /* Server-highlighted blocks pass `lines` and no `code`, so the document
+       text is the fallback; without it this rendered a labelled control that
+       did nothing on the exact path the docs advertise. */
+    const fallback =
+      document_?.code || document_?.lines.map((line) => line.text).join("\n")
+    const payload = stripNotationComments(value ?? fallback ?? "")
+    if (!payload) return
+    if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+      return
+    }
+
+    navigator.clipboard.writeText(payload).then(
+      () => {
+        setCopied(true)
+        onCopy?.(payload)
+      },
+      /* Rejection is routine: a denied permission, or a document that lost
+         focus. Without the handler it surfaced as an unhandled rejection in
+         the consumer's error monitoring. */
+      (error: unknown) => {
+        setCopyFailed(true)
+        onCopyError?.(error)
+      }
+    )
+  }, [value, context, document_, onCopy, onCopyError])
+
+  return (
+    <Button
+      type="button"
+      data-slot="code-block-copy"
+      data-copied={copied || undefined}
+      data-copy-failed={copyFailed || undefined}
+      data-position={resolvedPosition}
+      aria-label={
+        copied ? (labels?.copied ?? "Copied") : (labels?.copy ?? "Copy code")
+      }
+      variant={variant}
+      size={resolvedSize}
+      onClick={handleClick}
+      className={cn(
+        "shrink-0 [&_svg]:size-3.5",
+        resolvedPosition === "pinned" &&
+          /* Physical `right`, not logical `end`: the code surface is forced
+             dir="ltr", so in an RTL app the logical inset landed the button
+             over the first characters instead of the trailing edge. */
+          "absolute top-(--code-block-copy-top) right-(--code-block-copy-inset) z-20",
+        resolvedPosition === "pinned" &&
+          !alwaysVisible &&
+          "opacity-0 transition-opacity group-hover/code-block:opacity-100 focus-visible:opacity-100",
+        className
+      )}
+      {...props}
+    >
+      {children ?? <CopyIcon copied={copied} />}
+    </Button>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Wrap and expand                                */
+/* -------------------------------------------------------------------------- */
+
+function CodeBlockWrapToggle({
+  className,
+  children,
+  variant = "ghost",
+  size = "sm",
+  onClick,
+  ...props
+}: ComponentProps<typeof Button>) {
+  const { wrap, setWrap } = useInternalConfig("CodeBlockWrapToggle")
+
+  return (
+    <Button
+      type="button"
+      data-slot="code-block-wrap-toggle"
+      data-state={wrap ? "on" : "off"}
+      aria-pressed={wrap}
+      variant={variant}
+      size={size}
+      onClick={(event) => {
+        onClick?.(event)
+        if (!event.defaultPrevented) setWrap(!wrap)
+      }}
+      className={cn("shrink-0", className)}
+      {...props}
+    >
+      {children ?? (wrap ? "No wrap" : "Wrap")}
+    </Button>
+  )
+}
+
+/**
+ * Expands a block collapsed by `maxLines`.
+ *
+ * Renders nothing when the content is shorter than the cut, so a consumer can
+ * always compose it without guarding on line count themselves.
+ */
+function CodeBlockExpandButton({
+  className,
+  children,
+  variant = "ghost",
+  size = "sm",
+  onClick,
+  ...props
+}: ComponentProps<typeof Button>) {
+  const { expanded, setExpanded, collapsible, contentId } = useInternalConfig(
+    "CodeBlockExpandButton"
+  )
+
+  if (!collapsible) return null
+
+  return (
+    <div
+      data-slot="code-block-expand"
+      data-state={expanded ? "expanded" : "collapsed"}
+      className={cn(
+        /* Both states float over the surface. Expanded used to rejoin the flex
+           column as a bordered strip, which read as a card footer and moved the
+           block's bottom edge on the first click; the surface reserves a row of
+           clearance instead, so only the label changes. */
+        "absolute inset-x-0 bottom-0 z-10 order-last flex items-end justify-center pt-10 pb-2",
+        /* The fade means "there is more below", so it belongs to the collapsed
+           state only. Expanded, the surface already reserves a clear row for
+           this control, and keeping the gradient just dimmed the last real
+           line of code. */
+        !expanded && "from-card via-card/85 bg-gradient-to-t to-transparent",
+        className
+      )}
+    >
+      <Button
+        type="button"
+        aria-expanded={expanded}
+        aria-controls={contentId}
+        variant={variant}
+        size={size}
+        onClick={(event) => {
+          onClick?.(event)
+          if (!event.defaultPrevented) setExpanded(!expanded)
+        }}
+        {...props}
+      >
+        {children ?? (expanded ? "Show less" : "Show more")}
+      </Button>
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                 Line actions                                */
+/* -------------------------------------------------------------------------- */
+
+export type CodeBlockLineActionsProps = {
+  children: CodeBlockLineActionsRender
+  /**
+   * `end` floats the group over the end of the active row. `gutter` puts it in
+   * the channel beside the line number, which is where a "add this line"
+   * affordance belongs. A fold toggle owns that channel when both are on, so a
+   * gutter action on a fold-start row falls back to `end`.
+   */
+  side?: CodeBlockLineActionsSide
+}
+
+/**
+ * Actions on the hovered or focused line. ONE group exists for the whole
+ * block, rendered inside the active row: a 2,000 line file mounts one button
+ * group, not 2,000.
+ */
+const LANGUAGE_EXTENSIONS: Record<string, string> = {
+  bash: "sh",
+  c: "c",
+  cpp: "cpp",
+  csharp: "cs",
+  css: "css",
+  diff: "patch",
+  docker: "dockerfile",
+  go: "go",
+  graphql: "graphql",
+  html: "html",
+  java: "java",
+  javascript: "js",
+  json: "json",
+  jsx: "jsx",
+  kotlin: "kt",
+  markdown: "md",
+  php: "php",
+  python: "py",
+  ruby: "rb",
+  rust: "rs",
+  sql: "sql",
+  swift: "swift",
+  toml: "toml",
+  tsx: "tsx",
+  typescript: "ts",
+  xml: "xml",
+  yaml: "yaml",
+}
+
+export type CodeBlockDownloadButtonProps = {
+  /** Text to save. Defaults to the block's code with notation stripped. */
+  value?: string
+  /** Defaults to `code.<ext>` from the block's language. */
+  filename?: string
+  onDownload?: (filename: string) => void
+  /** `pinned` floats over the surface; `inline` sits in a header. */
+  position?: "auto" | "pinned" | "inline"
+  alwaysVisible?: boolean
+  /** Accessible name, for localisation. */
+  label?: string
+} & Omit<ComponentProps<typeof Button>, "value">
+
+/**
+ * Saves the block's code as a file - the sibling the copy button was missing
+ * for builder-style output, where the result IS a file and disk is the next
+ * step. Same placement contract as the copy button.
+ */
+function CodeBlockDownloadButton({
+  value,
+  filename,
+  onDownload,
+  position = "auto",
+  alwaysVisible = false,
+  label,
+  className,
+  variant = "ghost",
+  size,
+  children,
+  ...props
+}: CodeBlockDownloadButtonProps) {
+  const context = useContext(CodeBlockConfigContext)
+  const document_ = useContext(CodeBlockDocumentContext)
+  const inHeader = useContext(CodeBlockHeaderContext)
+
+  const resolvedPosition =
+    position === "auto" ? (inHeader ? "inline" : "pinned") : position
+  const resolvedSize =
+    size ?? (resolvedPosition === "inline" ? "icon-sm" : "icon")
+
+  const handleClick = useCallback(() => {
+    const fallback =
+      document_?.code || document_?.lines.map((line) => line.text).join("\n")
+    const payload = stripNotationComments(value ?? fallback ?? "")
+    if (!payload || typeof window === "undefined") return
+
+    const extension =
+      LANGUAGE_EXTENSIONS[context?.resolvedLanguage ?? ""] ?? "txt"
+    const name = filename ?? `code.${extension}`
+    const url = URL.createObjectURL(
+      new Blob([payload], { type: "text/plain;charset=utf-8" })
+    )
+    const anchor = window.document.createElement("a")
+    anchor.href = url
+    anchor.download = name
+    anchor.click()
+    /* Deferred: revoking synchronously races the browser starting the save. */
+    window.setTimeout(() => URL.revokeObjectURL(url), 1000)
+    onDownload?.(name)
+  }, [value, filename, context, document_, onDownload])
+
+  return (
+    <Button
+      type="button"
+      data-slot="code-block-download"
+      data-position={resolvedPosition}
+      aria-label={label ?? "Download code"}
+      variant={variant}
+      size={resolvedSize}
+      onClick={handleClick}
+      className={cn(
+        "shrink-0 [&_svg]:size-3.5",
+        resolvedPosition === "pinned" &&
+          "absolute top-(--code-block-copy-top) right-(--code-block-copy-inset) z-20",
+        resolvedPosition === "pinned" &&
+          !alwaysVisible &&
+          "opacity-0 transition-opacity group-hover/code-block:opacity-100 focus-visible:opacity-100",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M12 3v12m0 0 4-4m-4 4-4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" />
+        </svg>
+      )}
+    </Button>
+  )
+}
+
+function CodeBlockLineActions({
+  children,
+  side = "end",
+}: CodeBlockLineActionsProps) {
+  const registry = useContext(CodeBlockActionsContext)
+  const owner = useRef({}).current
+
+  useEffect(() => {
+    registry?.register(owner, children, side)
+    return () => registry?.register(owner, null)
+  }, [registry, owner, children, side])
+
+  return null
+}
+
+/**
+ * Live folding for anything composed inside the block - a "fold all" control,
+ * a region count. Mirrors `useCodeBlockSelection`; region and start numbers
+ * are source-based like every line spec.
+ */
+function useCodeBlockFolding() {
+  const document = useContext(CodeBlockDocumentContext)
+  if (!document) {
+    throw new Error("useCodeBlockFolding must be used within a CodeBlock")
+  }
+
+  const { foldable, foldRegions, folded, toggleFold, setFolded } = document
+  const foldedStarts = useMemo(
+    () => [...folded].sort((a, b) => a - b),
+    [folded]
+  )
+  const foldAll = useCallback(
+    () => setFolded(foldRegions.map((region) => region.start)),
+    [setFolded, foldRegions]
+  )
+  const unfoldAll = useCallback(() => setFolded([]), [setFolded])
+
+  return {
+    foldable,
+    regions: foldRegions,
+    foldedStarts,
+    toggleFold,
+    foldAll,
+    unfoldAll,
+  }
+}
+
+/**
+ * Live selection for anything composed inside the block - a line action, a
+ * header control. Returns the selected lines as a sorted array plus the same
+ * toggle the rows use, so an "add selection to chat" affordance can act on the
+ * whole range instead of only the hovered line.
+ */
+function useCodeBlockSelection() {
+  const document = useContext(CodeBlockDocumentContext)
+  if (!document) {
+    throw new Error("useCodeBlockSelection must be used within a CodeBlock")
+  }
+
+  const { selected, selectable, toggleLine, clearSelection } = document
+  const selectedLines = useMemo(
+    () => [...selected].sort((a, b) => a - b),
+    [selected]
+  )
+
+  return { selectable, selectedLines, toggleLine, clearSelection }
+}
+
+/* Re-exported so a consumer wires an AI transcript from one import path. */
+export { markdownCodeProps, markdownFences }
+export {
+  ansiToLines,
+  parseUnifiedDiff,
+} from "@/components/reui/code-block/code-block-highlight"
+export type {
+  CodeBlockDiffSpec,
+  CodeBlockHighlightOptions,
+  CodeBlockLevelSpec,
+  CodeBlockLine,
+  CodeBlockLineActionsRender,
+  CodeBlockLineSpec,
+  CodeBlockLineState,
+  CodeBlockPatchFile,
+  CodeBlockThemes,
+  CodeBlockToken,
+  CodeBlockTransformer,
+  CodeBlockWordSpec,
+} from "@/components/reui/code-block/code-block-highlight"
+
+export {
+  CodeBlock,
+  CodeBlockCopyButton,
+  CodeBlockDownloadButton,
+  CodeBlockExpandButton,
+  CodeBlockHeader,
+  CodeBlockLanguage,
+  CodeBlockLineActions,
+  CodeBlockTitle,
+  CodeBlockContent,
+  CodeBlockWrapToggle,
+  useCodeBlockConfig,
+  useCodeBlockFolding,
+  useCodeBlockSelection,
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-cell-selection.tsx b/apps/web/src/components/reui/data-grid/data-grid-cell-selection.tsx
new file mode 100644
index 0000000..6d9e020
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-cell-selection.tsx
@@ -0,0 +1,2605 @@
+import { useEffect, useRef, useState } from "react"
+import type {
+  CSSProperties,
+  KeyboardEvent as ReactKeyboardEvent,
+  ReactNode,
+  RefObject,
+} from "react"
+import { createPortal } from "react-dom"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import type {
+  DataGridCellChange,
+  DataGridCellRejection,
+  DataGridCellsChangeDetails,
+  DataGridColumnCellEdit,
+  DataGridTableInstance,
+} from "@/components/reui/data-grid/data-grid"
+import { Subscribe } from "@tanstack/react-table"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+
+/** Where a finished edit sends the focused cell, or null to stay. */
+type DataGridEditorAdvance = "down" | "up" | "right" | "left" | null
+
+interface DataGridFocusCellOptions {
+  /** Also open the cell's editor, the way Enter would. */
+  edit?: boolean
+}
+
+/** Imperative surface of the cell-selection controller. */
+interface DataGridCellSelectionApi {
+  /**
+   * Moves the grid's cell focus AND the document focus together, retrying
+   * briefly while the row mounts, so a freshly created row is typeable
+   * without an extra click. `edit: true` also opens the cell's editor the
+   * way Enter would. Registered once the controller is wired; null while
+   * cell selection is off.
+   */
+  focusCell: (
+    rowId: string,
+    columnId: string,
+    options?: DataGridFocusCellOptions
+  ) => void
+  /** Clears every range and the focused cell. */
+  clearSelection: () => void
+  /** Scrolls a rendered cell into view without moving focus. */
+  scrollToCell: (rowId: string, columnId: string) => void
+}
+
+/** One open built-in editor: which cell, which control, and its text. */
+interface DataGridEditorSession {
+  rowId: string
+  columnId: string
+  control: "text" | "textarea"
+  /** What the editor opens with: the typed seed or the formatted value. */
+  initialValue: string
+  /** The formatted current value; an unchanged commit dispatches nothing. */
+  baseline: string
+  /** Accessible name for the overlay control, from the column's header. */
+  label: string
+}
+
+/* ------------------------------------------------------------------------- *
+ * Clipboard text: pure, node-testable.
+ * ------------------------------------------------------------------------- */
+
+function serializeDataGridClipboardField(field: string): string {
+  // Excel and Sheets quote a field containing a delimiter and double inner
+  // quotes; everything else ships bare.
+  return /[\t\n\r"]/.test(field)
+    ? '"' + field.replaceAll('"', '""') + '"'
+    : field
+}
+
+/** Row-major grid to TSV, CRLF rows, Excel-style quoting. */
+function serializeDataGridClipboardText(grid: string[][]): string {
+  return grid
+    .map((line) => line.map(serializeDataGridClipboardField).join("\t"))
+    .join("\r\n")
+}
+
+/**
+ * TSV to a row-major grid. A stateful scan, not a split: a quoted field may
+ * contain tabs, quotes and both newline flavors, which is exactly what Excel
+ * emits for a multi-line cell.
+ */
+function parseDataGridClipboardText(text: string): string[][] {
+  const rows: string[][] = []
+  let row: string[] = []
+  let field = ""
+  let quoted = false
+  let i = 0
+
+  while (i < text.length) {
+    const ch = text[i]!
+    if (quoted) {
+      if (ch === '"') {
+        if (text[i + 1] === '"') {
+          field += '"'
+          i += 2
+          continue
+        }
+        quoted = false
+        i += 1
+        continue
+      }
+      field += ch
+      i += 1
+      continue
+    }
+    if (ch === '"' && field === "") {
+      quoted = true
+      i += 1
+      continue
+    }
+    if (ch === "\t") {
+      row.push(field)
+      field = ""
+      i += 1
+      continue
+    }
+    if (ch === "\r" || ch === "\n") {
+      if (ch === "\r" && text[i + 1] === "\n") i += 1
+      row.push(field)
+      rows.push(row)
+      row = []
+      field = ""
+      i += 1
+      continue
+    }
+    field += ch
+    i += 1
+  }
+  row.push(field)
+  rows.push(row)
+
+  // Excel terminates the payload with one newline; that final empty line is
+  // an artifact of the format, not a data row.
+  const last = rows[rows.length - 1]
+  if (rows.length > 1 && last?.length === 1 && last[0] === "") rows.pop()
+
+  return rows
+}
+
+/** Repeats a block cyclically to fill rowCount x columnCount. */
+function tileDataGridClipboardBlock(
+  block: string[][],
+  rowCount: number,
+  columnCount: number
+): string[][] {
+  const tiled: string[][] = []
+  for (let r = 0; r < rowCount; r++) {
+    const source = block[r % block.length] ?? []
+    const line: string[] = []
+    for (let c = 0; c < columnCount; c++) {
+      line.push(source[c % (source.length || 1)] ?? "")
+    }
+    tiled.push(line)
+  }
+  return tiled
+}
+
+function escapeDataGridClipboardHtml(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+}
+
+// A minimal text/html flavor alongside the TSV keeps type fidelity when the
+// paste target is Excel or Sheets. Newlines inside a field become <br>, the
+// HTML representation of a multi-line cell; raw newlines would collapse to
+// spaces on paste.
+function renderDataGridClipboardHtml(grid: string[][]): string {
+  const body = grid
+    .map(
+      (line) =>
+        "<tr>" +
+        line
+          .map(
+            (field) =>
+              "<td>" +
+              escapeDataGridClipboardHtml(field).replace(
+                /\r\n|\r|\n/g,
+                "<br>"
+              ) +
+              "</td>"
+          )
+          .join("") +
+        "</tr>"
+    )
+    .join("")
+  return "<table><tbody>" + body + "</tbody></table>"
+}
+
+/* ------------------------------------------------------------------------- *
+ * Selection geometry: walks in the feature's own index space.
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Columns in render order, the same [start, center, end] space
+ * cellSelectionFeature resolves its bounds against.
+ */
+function getDataGridDisplayOrderedColumns<TData extends object>(
+  table: DataGridTableInstance<TData>
+) {
+  return [
+    ...table.getStartVisibleLeafColumns(),
+    ...table.getCenterVisibleLeafColumns(),
+    ...table.getEndVisibleLeafColumns(),
+  ]
+}
+
+function getDataGridWritableCellEdit<TData extends object>(
+  column: {
+    columnDef: { meta?: { cellEdit?: DataGridColumnCellEdit<TData> } }
+  },
+  /**
+   * The row a write targets. Function-form `editable` is evaluated against
+   * it; without a row the column counts as writable in principle, the
+   * coarse check the fill preview's column filter uses.
+   */
+  row?: TData
+): DataGridColumnCellEdit<TData> | null {
+  const cellEdit = column.columnDef.meta?.cellEdit
+  if (!cellEdit || cellEdit.editable === false) return null
+  if (
+    typeof cellEdit.editable === "function" &&
+    row !== undefined &&
+    !cellEdit.editable(row)
+  ) {
+    return null
+  }
+  return cellEdit
+}
+
+/**
+ * Ids of the rows the view can actually show: the page slice plus rows the
+ * DOM renders outside it (pinned rows under keepPinnedRows). Selection
+ * bounds live in pre-paginated display order, so a range whose corners are
+ * both visible can still span off-page rows in between - a page-boundary
+ * range to a bottom-pinned draft is the standing example. Every batch walk
+ * (copy, clear, paste, fill) filters rows through this set so the cells a
+ * batch touches are exactly the cells the selection paints.
+ */
+function getDataGridRenderedRowIds<TData extends object>(
+  table: DataGridTableInstance<TData>,
+  viewport: HTMLElement | null | undefined
+): Set<string> | null {
+  if (!viewport) return null
+  // When the page slice covers the whole display order (manual pagination,
+  // virtualization, no pagination) no row can be off-page: skip the walk.
+  if (table.getRowModel().rows.length === table.getRowsInDisplayOrder().length) {
+    return null
+  }
+  const rendered = new Set<string>(
+    table.getRowModel().rows.map((row: { id: string }) => row.id)
+  )
+  for (const rowEl of Array.from(
+    viewport.querySelectorAll("tbody tr[data-row-id]")
+  )) {
+    const id = rowEl.getAttribute("data-row-id")
+    if (id) rendered.add(id)
+  }
+  return rendered
+}
+
+/**
+ * Cells of the current selection the view can actually show, under the
+ * same row filter the batch builders use, so a count shown next to the
+ * selection always matches what is painted and what a batch will touch.
+ * The feature's own getSelectedCellCount spans off-page rows instead.
+ */
+function getDataGridVisibleSelectedCellCount<TData extends object>(
+  table: DataGridTableInstance<TData>,
+  /** The grid's body viewport; null falls back to the full-range count. */
+  viewport: HTMLElement | null
+): number {
+  const bounds = table.getCellSelectionBounds()
+  if (!bounds.length) return 0
+  const rows = table.getRowsInDisplayOrder()
+  const columns = getDataGridDisplayOrderedColumns(table)
+  const rendered = getDataGridRenderedRowIds(table, viewport)
+  let count = 0
+  for (const bound of bounds) {
+    let rowCount = 0
+    for (let r = bound.minRowIndex; r <= bound.maxRowIndex; r++) {
+      const row = rows[r]
+      if (row && (!rendered || rendered.has(row.id))) rowCount += 1
+    }
+    let columnCount = 0
+    for (let c = bound.minColumnIndex; c <= bound.maxColumnIndex; c++) {
+      const column = columns[c]
+      if (column && column.columnDef.enableCellSelection !== false) {
+        columnCount += 1
+      }
+    }
+    count += rowCount * columnCount
+  }
+  return count
+}
+
+/**
+ * The bound of the ACTIVE (most recent) region. getCellSelectionBounds()
+ * sorts geometrically, so its last entry is merely the bottom-right
+ * rectangle; the focused cell anchors the newest range, so the bound
+ * containing it is the active one. Falls back to the geometric last when
+ * the focused cell sits in no bound (the newest range was an exclude).
+ */
+function getDataGridActiveBound<TData extends object>(
+  table: DataGridTableInstance<TData>
+) {
+  const bounds = table.getCellSelectionBounds()
+  if (!bounds.length) return null
+  const focused = table.getFocusedCell()
+  if (focused) {
+    // O(1): v9 caches the display index on the row itself.
+    const rowIndex = focused.row.getDisplayIndex()
+    const columnIndex = getDataGridDisplayOrderedColumns(table).findIndex(
+      (column) => column.id === focused.column.id
+    )
+    const containing = bounds.find(
+      (bound) =>
+        rowIndex >= bound.minRowIndex &&
+        rowIndex <= bound.maxRowIndex &&
+        columnIndex >= bound.minColumnIndex &&
+        columnIndex <= bound.maxColumnIndex
+    )
+    if (containing) return containing
+  }
+  return bounds[bounds.length - 1] ?? null
+}
+
+/**
+ * Resolves the cell one visual step away from a given cell: selectable
+ * columns for horizontal, RENDERED row order for vertical. The feature's
+ * own move/extend resolve rows through the page slice and stall on pinned
+ * rows (a bottom-pinned draft), while id-addressed cells work everywhere.
+ * "edge" means the step is at the grid boundary; null means the position
+ * is not resolvable here and the caller should use the feature's move.
+ */
+function getDataGridStepTarget<TData extends object>(
+  table: DataGridTableInstance<TData>,
+  viewport: HTMLElement,
+  from: { rowId: string; columnId: string },
+  direction: "up" | "down" | "left" | "right"
+): { rowId: string; columnId: string } | "edge" | null {
+  if (direction === "left" || direction === "right") {
+    const selectable = getDataGridDisplayOrderedColumns(table).filter(
+      (column) => column.columnDef.enableCellSelection !== false
+    )
+    const index = selectable.findIndex(
+      (column) => column.id === from.columnId
+    )
+    if (index === -1) return null
+    const next = selectable[index + (direction === "right" ? 1 : -1)]
+    return next ? { rowId: from.rowId, columnId: next.id } : "edge"
+  }
+  const renderedIds = Array.from(
+    viewport.querySelectorAll("tbody tr[data-row-id]")
+  ).map((row) => row.getAttribute("data-row-id"))
+  const index = renderedIds.indexOf(from.rowId)
+  if (index === -1) return null
+  const nextId = renderedIds[index + (direction === "down" ? 1 : -1)]
+  return nextId ? { rowId: nextId, columnId: from.columnId } : "edge"
+}
+
+/**
+ * Shift+Arrow: the feature keeps focus on the anchor and grows the range
+ * from its active corner. When its own extend cannot resolve the step
+ * (the active corner sits on a pinned row, or the next visual row is a
+ * pinned row outside the page slice), re-derive the active corner from
+ * the bounds and step it in visual space through selectCellRange.
+ */
+function extendDataGridSelection<TData extends object>(
+  table: DataGridTableInstance<TData>,
+  viewport: HTMLElement,
+  direction: "up" | "down" | "left" | "right"
+): { rowId: string; columnId: string } | null {
+  // The range's active corner: focus stays the anchor, so the corner is
+  // the bound's opposite one. Returned to the caller so the view can
+  // follow the growing edge rather than the anchor.
+  const activeCorner = () => {
+    const focused = table.getFocusedCell()
+    if (!focused) return null
+    const bound = getDataGridActiveBound(table)
+    if (!bound) return null
+    const rows = table.getRowsInDisplayOrder()
+    const allColumns = getDataGridDisplayOrderedColumns(table)
+    const rowIndex = focused.row.getDisplayIndex()
+    const columnIndex = allColumns.findIndex(
+      (column) => column.id === focused.column.id
+    )
+    return {
+      rowId:
+        rows[
+          rowIndex === bound.minRowIndex
+            ? bound.maxRowIndex
+            : bound.minRowIndex
+        ]?.id ?? focused.row.id,
+      columnId:
+        allColumns[
+          columnIndex === bound.minColumnIndex
+            ? bound.maxColumnIndex
+            : bound.minColumnIndex
+        ]?.id ?? focused.column.id,
+    }
+  }
+  const boundKey = () => {
+    const bounds = table.getCellSelectionBounds()
+    const bound = bounds[bounds.length - 1]
+    return bound
+      ? `${bounds.length}:${bound.minRowIndex}-${bound.maxRowIndex}:${bound.minColumnIndex}-${bound.maxColumnIndex}`
+      : "none"
+  }
+  const before = boundKey()
+  table.extendCellSelection(direction)
+  if (boundKey() !== before) return activeCorner()
+  const focused = table.getFocusedCell()
+  if (!focused) return null
+  const active = activeCorner() ?? {
+    rowId: focused.row.id,
+    columnId: focused.column.id,
+  }
+  const target = getDataGridStepTarget(table, viewport, active, direction)
+  if (!target || target === "edge") return null
+  table.selectCellRange(
+    {
+      anchorRowId: focused.row.id,
+      anchorColumnId: focused.column.id,
+      focusRowId: target.rowId,
+      focusColumnId: target.columnId,
+    },
+    { mode: "replace" }
+  )
+  return target
+}
+
+/**
+ * The active region as formatted strings, row-major. Columns opted out of
+ * selection are compacted away, matching the feature's own ranges-data
+ * behavior, and rows the view cannot show are skipped when a viewport is
+ * given. Null when nothing is selected.
+ */
+function getDataGridActiveRegionGrid<TData extends object>(
+  table: DataGridTableInstance<TData>,
+  viewport?: HTMLElement | null
+): string[][] | null {
+  const bound = getDataGridActiveBound(table)
+  if (!bound) return null
+
+  const rows = table.getRowsInDisplayOrder()
+  const columns = getDataGridDisplayOrderedColumns(table)
+  const rendered = getDataGridRenderedRowIds(table, viewport)
+  const grid: string[][] = []
+
+  for (let r = bound.minRowIndex; r <= bound.maxRowIndex; r++) {
+    const row = rows[r]
+    if (!row || (rendered && !rendered.has(row.id))) continue
+    const cells = row.getAllCellsByColumnId()
+    const line: string[] = []
+    for (let c = bound.minColumnIndex; c <= bound.maxColumnIndex; c++) {
+      const column = columns[c]
+      if (!column || column.columnDef.enableCellSelection === false) continue
+      const value = cells[column.id]?.getValue()
+      const format = column.columnDef.meta?.cellEdit?.format
+      line.push(
+        format ? format(value, row.original) : String(value ?? "")
+      )
+    }
+    grid.push(line)
+  }
+
+  return grid.length ? grid : null
+}
+
+/**
+ * A clear/cut batch over the selection's writable cells. Non-writable columns
+ * are skipped silently: clearing is an intent over what the grid owns, and a
+ * rejection per read-only cell would be noise. Null when nothing clears.
+ */
+function buildDataGridClearDetails<TData extends object>(
+  table: DataGridTableInstance<TData>,
+  source: "clear" | "cut",
+  activeRegionOnly: boolean,
+  viewport?: HTMLElement | null
+): DataGridCellsChangeDetails<TData> | null {
+  const allBounds = table.getCellSelectionBounds()
+  const activeBound = getDataGridActiveBound(table)
+  const bounds = activeRegionOnly
+    ? activeBound
+      ? [activeBound]
+      : []
+    : allBounds
+  if (!bounds.length) return null
+
+  const rows = table.getRowsInDisplayOrder()
+  const columns = getDataGridDisplayOrderedColumns(table)
+  const rendered = getDataGridRenderedRowIds(table, viewport)
+  const changes: DataGridCellChange<TData>[] = []
+
+  for (const bound of bounds) {
+    for (let r = bound.minRowIndex; r <= bound.maxRowIndex; r++) {
+      const row = rows[r]
+      if (!row || (rendered && !rendered.has(row.id))) continue
+      const cells = row.getAllCellsByColumnId()
+      for (let c = bound.minColumnIndex; c <= bound.maxColumnIndex; c++) {
+        const column = columns[c]
+        if (!column || column.columnDef.enableCellSelection === false) continue
+        const cellEdit = getDataGridWritableCellEdit<TData>(column, row.original)
+        if (!cellEdit) continue
+        changes.push({
+          rowId: row.id,
+          columnId: column.id,
+          row: row.original,
+          previousValue: cells[column.id]?.getValue(),
+          value: cellEdit.clearValue ?? null,
+        })
+      }
+    }
+  }
+
+  return changes.length ? { source, changes, rejected: [] } : null
+}
+
+type DataGridPasteTarget = {
+  /** Display indexes of the pasted region's first and last row. */
+  startRowIndex: number
+  endRowIndex: number
+  /** How many rows a paste actually wrote (hidden rows are skipped). */
+  rowCount?: number
+  /** Display indexes of the pasted region's first and last column. */
+  startColumnIndex: number
+  endColumnIndex: number
+}
+
+/**
+ * Resolves a parsed clipboard block into a paste batch, Excel semantics:
+ * a 1x1 block fills the whole selected region; a block tiles when the region
+ * is an exact multiple of it; otherwise it pastes once from the region's
+ * top-left, clamped at the grid edges (rows are never grown).
+ */
+function buildDataGridPasteDetails<TData extends object>(
+  table: DataGridTableInstance<TData>,
+  block: string[][],
+  viewport?: HTMLElement | null
+): {
+  details: DataGridCellsChangeDetails<TData>
+  target: DataGridPasteTarget
+} | null {
+  if (!block.length) return null
+  const bound = getDataGridActiveBound(table)
+  if (!bound) return null
+
+  const rows = table.getRowsInDisplayOrder()
+  const columns = getDataGridDisplayOrderedColumns(table)
+  const rendered = getDataGridRenderedRowIds(table, viewport)
+
+  // Copy COMPACTS opt-out columns away, so paste maps block columns over the
+  // same compacted space: selectable columns only, starting at the region's
+  // first selectable column and running past the region for a wider block,
+  // clamped at the grid edge. Walking raw display offsets instead would let
+  // an interior opt-out column swallow a block column silently.
+  const targetColumns: Array<{
+    column: (typeof columns)[number]
+    displayIndex: number
+  }> = []
+  let regionColumns = 0
+  for (let c = bound.minColumnIndex; c < columns.length; c++) {
+    const column = columns[c]
+    if (!column || column.columnDef.enableCellSelection === false) continue
+    targetColumns.push({ column, displayIndex: c })
+    if (c <= bound.maxColumnIndex) regionColumns += 1
+  }
+  if (!regionColumns) return null
+
+  const blockRows = block.length
+  const blockColumns = block.reduce((max, line) => Math.max(max, line.length), 1)
+  const regionRows = bound.maxRowIndex - bound.minRowIndex + 1
+
+  let rowCount: number
+  let columnCount: number
+  if (blockRows === 1 && blockColumns === 1) {
+    rowCount = regionRows
+    columnCount = regionColumns
+  } else if (
+    regionRows % blockRows === 0 &&
+    regionColumns % blockColumns === 0
+  ) {
+    rowCount = regionRows
+    columnCount = regionColumns
+  } else {
+    rowCount = blockRows
+    columnCount = blockColumns
+  }
+
+  const tiled = tileDataGridClipboardBlock(block, rowCount, columnCount)
+  const startRowIndex = bound.minRowIndex
+
+  // Rows the block maps onto: the next rowCount rows the view can show,
+  // starting at the region's top. Off-page rows between a page's tail and
+  // a pinned draft are skipped rather than silently written.
+  const targetRows: Array<{ row: (typeof rows)[number]; displayIndex: number }> =
+    []
+  for (let r = startRowIndex; r < rows.length; r++) {
+    if (targetRows.length === rowCount) break
+    const row = rows[r]
+    if (!row || (rendered && !rendered.has(row.id))) continue
+    targetRows.push({ row, displayIndex: r })
+  }
+
+  const changes: DataGridCellChange<TData>[] = []
+  const rejected: DataGridCellRejection[] = []
+
+  for (let r = 0; r < targetRows.length; r++) {
+    const row = targetRows[r]!.row
+    const cells = row.getAllCellsByColumnId()
+    for (let c = 0; c < columnCount; c++) {
+      const column = targetColumns[c]?.column
+      if (!column) continue
+      const raw = tiled[r]?.[c] ?? ""
+      const cellEdit = getDataGridWritableCellEdit<TData>(column, row.original)
+      if (!cellEdit) {
+        rejected.push({
+          rowId: row.id,
+          columnId: column.id,
+          raw,
+          reason: "readonly",
+        })
+        continue
+      }
+      const value = cellEdit.parse ? cellEdit.parse(raw, row.original) : raw
+      if (value === undefined) {
+        rejected.push({
+          rowId: row.id,
+          columnId: column.id,
+          raw,
+          reason: "invalid",
+        })
+        continue
+      }
+      changes.push({
+        rowId: row.id,
+        columnId: column.id,
+        row: row.original,
+        previousValue: cells[column.id]?.getValue(),
+        value,
+      })
+    }
+  }
+
+  if (!changes.length && !rejected.length) return null
+  const lastTarget =
+    targetColumns[Math.min(columnCount, targetColumns.length) - 1]
+  return {
+    details: { source: "paste", changes, rejected },
+    target: {
+      startRowIndex,
+      endRowIndex: targetRows[targetRows.length - 1]?.displayIndex ?? startRowIndex,
+      rowCount: targetRows.length,
+      startColumnIndex: targetColumns[0]!.displayIndex,
+      endColumnIndex: lastTarget!.displayIndex,
+    },
+  }
+}
+
+/**
+ * The inverse batch: every change's value and previousValue swapped and
+ * rejections dropped. Feed it through the same state update onCellsChange
+ * uses to implement undo; inverting the inverse is redo.
+ */
+function invertDataGridCellsChange<TData extends object>(
+  details: DataGridCellsChangeDetails<TData>
+): DataGridCellsChangeDetails<TData> {
+  return {
+    source: details.source,
+    changes: details.changes.map((change) => ({
+      ...change,
+      value: change.previousValue,
+      previousValue: change.value,
+    })),
+    rejected: [],
+  }
+}
+
+function selectDataGridRegion<TData extends object>(
+  table: DataGridTableInstance<TData>,
+  target: DataGridPasteTarget
+) {
+  const rows = table.getRowsInDisplayOrder()
+  const columns = getDataGridDisplayOrderedColumns(table)
+  const anchorRow = rows[target.startRowIndex]
+  const anchorColumn = columns[target.startColumnIndex]
+  const focusRow = rows[Math.min(target.endRowIndex, rows.length - 1)]
+  const focusColumn = columns[target.endColumnIndex]
+  if (!anchorRow || !anchorColumn || !focusRow || !focusColumn) return
+  table.selectCellRange(
+    {
+      anchorRowId: anchorRow.id,
+      anchorColumnId: anchorColumn.id,
+      focusRowId: focusRow.id,
+      focusColumnId: focusColumn.id,
+    },
+    { mode: "replace" }
+  )
+}
+
+/* ------------------------------------------------------------------------- *
+ * Fill handle drag session.
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Imperative document-level session, the column-resize pattern: preview state
+ * is written as `data-cell-fill-target` attributes outside React, so the drag
+ * costs zero re-renders until release. v1 fills down or right (dominant axis)
+ * by repeating the source region's values; rows outside the rendered
+ * viewport of a virtualized body cannot be targeted mid-drag.
+ *
+ * Vertical distance is measured over the rows the view can show, so a drag
+ * onto a pinned draft fills exactly the rows the preview marked and never
+ * the off-page rows between. A cross-column fill round-trips through the
+ * source's format and the target's parse - the paste contract - because
+ * adjacent grid columns are heterogeneous; a parse rejection lands in the
+ * batch's rejected list, while cells that cannot be written are skipped
+ * and never tinted by the preview.
+ */
+// The fill drag's feedback: ONE dashed border (the Sheets fill marquee)
+// around the whole pending region - the source PLUS the extension - so the
+// drag reads as one growing region, never as a second box glued under the
+// source. While the session runs
+// the viewport carries data-cell-filling and the source cells' own
+// selection chrome rests, so this element is the only painter and nothing
+// can double at the junction. z-[35]: above the sticky pinned cells
+// (z 30) so the border survives crossing a pinned column; below the
+// sticky header (z-40).
+const dataGridGestureOutlineClasses =
+  "outline-primary pointer-events-none absolute z-[35] outline-1 outline-dashed -outline-offset-1"
+
+function startDataGridFillSession<TData extends object>(options: {
+  table: DataGridTableInstance<TData>
+  viewport: HTMLElement
+  onCellsChange: ((details: DataGridCellsChangeDetails<TData>) => void) | null
+}) {
+  const { table, viewport, onCellsChange } = options
+  // Fill over a multi-region selection is undefined territory; Excel refuses
+  // it too.
+  if (table.getCellSelectionBounds().length > 1) return
+  const bound = getDataGridActiveBound(table)
+  if (!bound) return
+
+  const rows = table.getRowsInDisplayOrder()
+  const columns = getDataGridDisplayOrderedColumns(table)
+  // The vertical walk space: rows the view can show, in display order. The
+  // DOM ids seed it (a drag can only target rendered rows), and one pass
+  // over the cached display array resolves them without building per-row
+  // wrappers for a 50k-row model.
+  const domRowIds = new Set<string>()
+  for (const rowEl of Array.from(
+    viewport.querySelectorAll("tbody tr[data-row-id]")
+  )) {
+    const id = rowEl.getAttribute("data-row-id")
+    if (id) domRowIds.add(id)
+  }
+  const visibleRows: Array<{ row: (typeof rows)[number]; displayIndex: number }> =
+    []
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i]!
+    if (domRowIds.has(row.id)) {
+      visibleRows.push({ row, displayIndex: i })
+    }
+  }
+  const visibleIndexById = new Map(
+    visibleRows.map((entry, index) => [entry.row.id, index])
+  )
+  // The source region and its last row, both in visible space.
+  const sourceRows = visibleRows.filter(
+    ({ displayIndex }) =>
+      displayIndex >= bound.minRowIndex && displayIndex <= bound.maxRowIndex
+  )
+  const sourceEndVisibleIndex = sourceRows.length
+    ? visibleIndexById.get(sourceRows[sourceRows.length - 1]!.row.id)!
+    : -1
+  if (sourceEndVisibleIndex === -1) return
+  const columnIndexById = new Map(
+    columns.map((column, index) => [column.id, index])
+  )
+  const isFillableColumn = (column: (typeof columns)[number]) =>
+    column.columnDef.enableCellSelection !== false &&
+    !!getDataGridWritableCellEdit<TData>(column)
+
+  let extension: { axis: "row" | "column"; count: number } | null = null
+  let previewCells: Element[] = []
+
+  const previewOutline = viewport.ownerDocument.createElement("div")
+  previewOutline.setAttribute("data-slot", "data-grid-cell-fill-preview")
+  previewOutline.className = dataGridGestureOutlineClasses
+  previewOutline.style.display = "none"
+  viewport.appendChild(previewOutline)
+  viewport.setAttribute("data-cell-filling", "")
+
+  // The region border wraps source plus extension: its corners are the
+  // source region's first cell and the farthest cell the drag reaches
+  // (the source's own last cell while nothing is extended).
+  const sourceCorner = (rowId: string, columnId: string | undefined) =>
+    columnId
+      ? viewport.querySelector(
+          `tr[data-row-id="${CSS.escape(rowId)}"] td[data-col-id="${CSS.escape(columnId)}"]`
+        )
+      : null
+  const positionPreviewOutline = () => {
+    const first = sourceRows.length
+      ? sourceCorner(sourceRows[0]!.row.id, columns[bound.minColumnIndex]?.id)
+      : null
+    const lastSource = sourceRows.length
+      ? sourceCorner(
+          sourceRows[sourceRows.length - 1]!.row.id,
+          columns[bound.maxColumnIndex]?.id
+        )
+      : null
+    const far = previewCells.length
+      ? previewCells[previewCells.length - 1]!
+      : lastSource
+    if (!first || !far) {
+      previewOutline.style.display = "none"
+      return
+    }
+    const firstRect = first.getBoundingClientRect()
+    const farRect = far.getBoundingClientRect()
+    const viewportRect = viewport.getBoundingClientRect()
+    const left = Math.min(firstRect.left, farRect.left)
+    const top = Math.min(firstRect.top, farRect.top)
+    previewOutline.style.display = "block"
+    previewOutline.style.left = `${left - viewportRect.left + viewport.scrollLeft}px`
+    previewOutline.style.top = `${top - viewportRect.top + viewport.scrollTop}px`
+    previewOutline.style.width = `${Math.max(firstRect.right, farRect.right) - left}px`
+    previewOutline.style.height = `${Math.max(firstRect.bottom, farRect.bottom) - top}px`
+  }
+
+  const clearPreview = () => {
+    for (const cell of previewCells) cell.removeAttribute("data-cell-fill-target")
+    previewCells = []
+    positionPreviewOutline()
+  }
+
+  // Target rows and columns for the current extension: rows in visible
+  // space, and only the columns the commit would actually write, so the
+  // preview never tints a cell the release will skip.
+  const getExtensionTargets = () => {
+    if (!extension) return null
+    const columnEntries = columns.map((column, displayIndex) => ({
+      column,
+      displayIndex,
+    }))
+    return extension.axis === "row"
+      ? {
+          rowEntries: visibleRows.slice(
+            sourceEndVisibleIndex + 1,
+            sourceEndVisibleIndex + 1 + extension.count
+          ),
+          columnEntries: columnEntries
+            .slice(bound.minColumnIndex, bound.maxColumnIndex + 1)
+            .filter(({ column }) => isFillableColumn(column)),
+        }
+      : {
+          rowEntries: sourceRows,
+          columnEntries: columnEntries
+            .slice(
+              bound.maxColumnIndex + 1,
+              bound.maxColumnIndex + 1 + extension.count
+            )
+            .filter(({ column }) => isFillableColumn(column)),
+        }
+  }
+
+  const applyPreview = () => {
+    clearPreview()
+    const targets = getExtensionTargets()
+    if (!targets) return
+    for (const { row } of targets.rowEntries) {
+      const rowElement = viewport.querySelector(
+        `tr[data-row-id="${CSS.escape(row.id)}"]`
+      )
+      if (!rowElement) continue
+      for (const { column } of targets.columnEntries) {
+        if (!getDataGridWritableCellEdit<TData>(column, row.original)) continue
+        const cellElement = rowElement.querySelector(
+          `td[data-col-id="${CSS.escape(column.id)}"]`
+        )
+        if (!cellElement) continue
+        cellElement.setAttribute("data-cell-fill-target", "true")
+        previewCells.push(cellElement)
+      }
+    }
+
+    positionPreviewOutline()
+  }
+
+  const handleMove = (event: MouseEvent) => {
+    const element = document.elementFromPoint(event.clientX, event.clientY)
+    const cellElement = element?.closest?.("td[data-col-id]")
+    const rowElement = cellElement?.closest?.("tr[data-row-id]")
+    if (!cellElement || !rowElement || !viewport.contains(cellElement)) return
+
+    const rowVisibleIndex = visibleIndexById.get(
+      rowElement.getAttribute("data-row-id") ?? ""
+    )
+    const columnIndex = columnIndexById.get(
+      cellElement.getAttribute("data-col-id") ?? ""
+    )
+    if (rowVisibleIndex === undefined || columnIndex === undefined) return
+
+    const rowsDelta = Math.max(0, rowVisibleIndex - sourceEndVisibleIndex)
+    const columnsDelta = Math.max(0, columnIndex - bound.maxColumnIndex)
+    const next: typeof extension =
+      rowsDelta === 0 && columnsDelta === 0
+        ? null
+        : rowsDelta >= columnsDelta
+          ? { axis: "row", count: rowsDelta }
+          : { axis: "column", count: columnsDelta }
+
+    if (next?.axis === extension?.axis && next?.count === extension?.count) {
+      return
+    }
+    extension = next
+    applyPreview()
+  }
+
+  const finish = (commit: boolean) => {
+    document.removeEventListener("mousemove", handleMove)
+    document.removeEventListener("mouseup", handleUp)
+    document.removeEventListener("keydown", handleKey, true)
+    clearPreview()
+    previewOutline.remove()
+    viewport.removeAttribute("data-cell-filling")
+    if (!commit || !extension || !onCellsChange) return
+    const targets = getExtensionTargets()
+    if (!targets || !targets.rowEntries.length) return
+
+    const changes: DataGridCellChange<TData>[] = []
+    const rejected: DataGridCellRejection[] = []
+
+    if (extension.axis === "row") {
+      for (let offset = 0; offset < targets.rowEntries.length; offset++) {
+        const targetRow = targets.rowEntries[offset]!.row
+        const sourceRow = sourceRows[offset % sourceRows.length]!.row
+        const targetCells = targetRow.getAllCellsByColumnId()
+        const sourceCells = sourceRow.getAllCellsByColumnId()
+        for (const { column } of targets.columnEntries) {
+          if (!getDataGridWritableCellEdit<TData>(column, targetRow.original)) {
+            continue
+          }
+          changes.push({
+            rowId: targetRow.id,
+            columnId: column.id,
+            row: targetRow.original,
+            previousValue: targetCells[column.id]?.getValue(),
+            value: sourceCells[column.id]?.getValue(),
+          })
+        }
+      }
+    } else {
+      const regionColumns = bound.maxColumnIndex - bound.minColumnIndex + 1
+      for (const { row } of targets.rowEntries) {
+        const cells = row.getAllCellsByColumnId()
+        for (const { column: targetColumn, displayIndex } of targets.columnEntries) {
+          const offset = displayIndex - (bound.maxColumnIndex + 1)
+          const sourceColumn =
+            columns[bound.minColumnIndex + (offset % regionColumns)]
+          if (!sourceColumn) continue
+          const targetEdit = getDataGridWritableCellEdit<TData>(
+            targetColumn,
+            row.original
+          )
+          if (!targetEdit) continue
+          const sourceValue = cells[sourceColumn.id]?.getValue()
+          let value: unknown = sourceValue
+          // Crossing columns is a type boundary: round-trip through the
+          // source's format and the target's parse, exactly what pasting
+          // the same cells would do. Same-column fills keep raw values.
+          if (targetColumn.id !== sourceColumn.id && targetEdit.parse) {
+            const sourceFormat =
+              sourceColumn.columnDef.meta?.cellEdit?.format
+            const raw = sourceFormat
+              ? sourceFormat(sourceValue, row.original)
+              : String(sourceValue ?? "")
+            const parsed = targetEdit.parse(raw, row.original)
+            if (parsed === undefined) {
+              rejected.push({
+                rowId: row.id,
+                columnId: targetColumn.id,
+                raw,
+                reason: "invalid",
+              })
+              continue
+            }
+            value = parsed
+          }
+          changes.push({
+            rowId: row.id,
+            columnId: targetColumn.id,
+            row: row.original,
+            previousValue: cells[targetColumn.id]?.getValue(),
+            value,
+          })
+        }
+      }
+    }
+
+    if (changes.length || rejected.length) {
+      onCellsChange({ source: "fill", changes, rejected })
+    }
+
+    // Grow the selection over source plus filled cells, Excel's post-fill
+    // shape.
+    selectDataGridRegion(table, {
+      startRowIndex: bound.minRowIndex,
+      endRowIndex:
+        extension.axis === "row"
+          ? targets.rowEntries[targets.rowEntries.length - 1]!.displayIndex
+          : bound.maxRowIndex,
+      startColumnIndex: bound.minColumnIndex,
+      endColumnIndex:
+        bound.maxColumnIndex +
+        (extension.axis === "column" ? extension.count : 0),
+    })
+  }
+
+  const handleUp = () => finish(true)
+  // Capture phase so a cancel cannot also reach the grid's own Escape
+  // handling and clear the selection underneath the drag.
+  const handleKey = (event: KeyboardEvent) => {
+    if (event.key !== "Escape") return
+    event.stopPropagation()
+    finish(false)
+  }
+
+  document.addEventListener("mousemove", handleMove)
+  document.addEventListener("mouseup", handleUp)
+  document.addEventListener("keydown", handleKey, true)
+}
+
+/* ------------------------------------------------------------------------- *
+ * Controller.
+ * ------------------------------------------------------------------------- */
+
+function isDataGridEditableTarget(target: EventTarget | null): boolean {
+  // data-cell-interactive is the same opt-out the mousedown guard honors, so
+  // a custom widget keeps its own keys and clipboard as well as its clicks.
+  return (
+    target instanceof Element &&
+    target.closest(
+      "input, textarea, select, [contenteditable], [data-cell-interactive]"
+    ) != null
+  )
+}
+
+// Keys belong to a focused in-cell control the same way clicks do: the
+// button, link and checkbox set the mousedown guard exempts must keep its
+// native Enter, Space and Tab, or an in-cell button is keyboard-dead.
+// Clipboard stays on the narrower guard: copying the grid selection while a
+// button happens to hold focus is what a spreadsheet user expects.
+function isDataGridInteractiveKeyTarget(target: EventTarget | null): boolean {
+  return (
+    isDataGridEditableTarget(target) ||
+    (target instanceof Element &&
+      target.closest('button, a, [role="checkbox"]') != null)
+  )
+}
+
+/**
+ * Headless spreadsheet controller: keyboard navigation, clipboard, clear and
+ * the fill-handle drag. Mount once inside `<DataGrid>`, next to the table.
+ * Renders only a hidden anchor; the real listeners attach to the grid's own
+ * body viewport, which also receives focus (container-focus model), so a
+ * virtualized row unmounting can never strand `document.activeElement`.
+ */
+function DataGridCellSelection<TData extends object>({
+  apiRef,
+  clipboard = true,
+  keyboard = true,
+}: {
+  /** Receives the controller's imperative API, e.g. for create-row flows. */
+  apiRef?: RefObject<DataGridCellSelectionApi | null>
+  /** Native copy, cut and paste handling. Defaults to true. */
+  clipboard?: boolean
+  /**
+   * Arrows (with Ctrl/Cmd edge jumps), Home/End, PageUp/PageDown, Enter,
+   * F2, type-to-edit, Tab, Ctrl/Cmd+A, Delete, Escape. Defaults to true.
+   */
+  keyboard?: boolean
+}) {
+  // The context value serves `table` and `props` through getters over the
+  // provider's own refs, so a context object captured at mount keeps handing
+  // out the CURRENT instances; no ref mirror is needed here.
+  const context = useDataGrid<TData>()
+
+  const anchorRef = useRef<HTMLSpanElement | null>(null)
+  // The body viewport, once the wiring effect resolves it; the built-in
+  // editor overlay portals into it so it scrolls with the cells.
+  const [viewportEl, setViewportEl] = useState<HTMLElement | null>(null)
+  const [editorSession, setEditorSession] =
+    useState<DataGridEditorSession | null>(null)
+  const { table } = context
+  const enabled =
+    !!context.props.tableLayout?.cellSelection &&
+    table.atoms.cellSelection != null
+
+  useEffect(() => {
+    if (!enabled) return
+    const anchor = anchorRef.current
+    if (!anchor) return
+
+    const root = (anchor.closest('[data-slot="data-grid"]') ??
+      anchor.parentElement) as HTMLElement | null
+    if (!root) return
+
+    // Split header/body grids render two viewports; the body one owns focus.
+    const viewports = Array.from(
+      root.querySelectorAll<HTMLElement>('[data-slot="data-grid-table-viewport"]')
+    )
+    const viewport =
+      viewports.find((node) =>
+        node.querySelector('[data-slot="data-grid-table-body"]')
+      ) ?? viewports[0]
+    if (!viewport) return
+
+    const getTable = () => context.table
+    const getOnCellsChange = () => context.props.onCellsChange ?? null
+    // "single" collapses every grow gesture to the focused cell.
+    const isRangeSelectionEnabled = () =>
+      context.props.tableLayout?.cellSelectionMode !== "single"
+
+    // The focusable element of the container-focus model. The table carries
+    // role="grid", so putting DOM focus (and aria-activedescendant) on it is
+    // what lets a screen reader follow the focused cell.
+    const focusTarget =
+      viewport.querySelector<HTMLElement>(
+        'table[data-slot="data-grid-table"]'
+      ) ?? viewport
+
+    const scrollTdIntoView = (cell: Element | null) =>
+      // Optional call: jsdom and some embedded contexts ship elements
+      // without scrollIntoView.
+      cell?.scrollIntoView?.({
+        block: "nearest",
+        inline: "nearest",
+        behavior: "instant",
+      })
+
+    // Points assistive tech at the virtually focused cell.
+    const syncActiveDescendant = () => {
+      const cell = viewport.querySelector<HTMLElement>("td[data-cell-focused]")
+      if (cell?.id) focusTarget.setAttribute("aria-activedescendant", cell.id)
+      else focusTarget.removeAttribute("aria-activedescendant")
+    }
+
+    const scrollFocusedIntoView = (
+      targetRowIndex?: number,
+      rowCount?: number,
+      // A Shift-extend grows away from the focused cell, which stays the
+      // anchor; the caller names the range's active corner so the view
+      // follows the growing edge instead of snapping back to the anchor.
+      explicitCell?: { rowId: string; columnId: string }
+    ) => {
+      const queryScrollCell = () =>
+        explicitCell
+          ? viewport.querySelector(
+              `tr[data-row-id="${CSS.escape(explicitCell.rowId)}"] td[data-col-id="${CSS.escape(explicitCell.columnId)}"]`
+            )
+          : viewport.querySelector("td[data-cell-focused]")
+      // After the atom write React still has to commit the data attributes;
+      // rAF lands after that commit. Instant, because the app-level
+      // scroll-smooth would otherwise animate every keystroke.
+      requestAnimationFrame(() => {
+        const cell = queryScrollCell()
+        syncActiveDescendant()
+        if (cell || targetRowIndex == null || !rowCount) {
+          scrollTdIntoView(cell)
+          return
+        }
+        // Virtualization: the jump target is not mounted, so there is no td
+        // to scroll to. The spacer rows keep scrollHeight proportional to
+        // the row count, so estimate the offset, let the virtualizer mount
+        // the region, then finish with a precise nearest-scroll.
+        let scroller: HTMLElement | null = viewport
+        while (scroller && scroller.scrollHeight <= scroller.clientHeight) {
+          scroller = scroller.parentElement
+        }
+        if (!scroller) return
+        scroller.scrollTop =
+          ((targetRowIndex + 0.5) / rowCount) * scroller.scrollHeight -
+          scroller.clientHeight / 2
+        requestAnimationFrame(() => {
+          scrollTdIntoView(queryScrollCell())
+          syncActiveDescendant()
+        })
+      })
+    }
+
+    // Opens an editor for the focused writable cell: the grid's own overlay
+    // for a column with a built-in `control`, the consumer's via
+    // `onCellEditRequest` otherwise, and as a last resort the cell's own
+    // interactive content (activated the way a mouse would). Returns false
+    // when nothing can open so the caller falls back to plain navigation.
+    const requestCellEdit = (initialText?: string): boolean => {
+      const table = getTable()
+      const cell = table.getFocusedCell()
+      if (!cell) return false
+      const cellEdit = getDataGridWritableCellEdit<TData>(
+        cell.column,
+        cell.row.original
+      )
+      if (cellEdit?.control) {
+        const baseline = cellEdit.format
+          ? cellEdit.format(cell.getValue(), cell.row.original)
+          : String(cell.getValue() ?? "")
+        const headerTitle = cell.column.columnDef.meta?.headerTitle
+        const header = cell.column.columnDef.header
+        setEditorSession({
+          rowId: cell.row.id,
+          columnId: cell.column.id,
+          control: cellEdit.control,
+          initialValue: initialText ?? baseline,
+          baseline,
+          label:
+            typeof headerTitle === "string"
+              ? headerTitle
+              : typeof header === "string"
+                ? header
+                : cell.column.id,
+        })
+        return true
+      }
+      const onCellEditRequest = context.props.onCellEditRequest
+      if (cellEdit && onCellEditRequest) {
+        onCellEditRequest({
+          rowId: cell.row.id,
+          columnId: cell.column.id,
+          row: cell.row.original,
+          previousValue: cell.getValue(),
+          initialText,
+        })
+        return true
+      }
+      // Generic activation: a custom control rendered in the cell (a
+      // select trigger, a combobox input, a button) toggles from the
+      // keyboard without any consumer wiring - focus it and click it,
+      // the same gesture the mouse performs. The lookup is ORDERED so an
+      // incidental button (a chip's remove button before a combobox
+      // input) never outranks the cell's primary control.
+      // Deliberate activation only (Enter, F2, double-click): typing a
+      // printable character must never toggle a control it cannot type
+      // into, and there is nowhere to put the character.
+      if (initialText !== undefined) return false
+      const focusedCell = viewport.querySelector("td[data-cell-focused]")
+      const control = focusedCell
+        ? [
+            '[role="combobox"]',
+            "select",
+            "input, textarea",
+            'button, a, [role="checkbox"], [tabindex]:not([tabindex="-1"])',
+          ]
+            .map((candidate) =>
+              focusedCell.querySelector<HTMLElement>(candidate)
+            )
+            .find(Boolean)
+        : null
+      if (!control) return false
+      control.focus()
+      control.click()
+      return true
+    }
+
+    // The imperative surface. A consumer that creates a row cannot focus
+    // its cell through state alone: setFocusedCell needs the row in the
+    // table model, DOM focus needs the focus target, and both race the
+    // commit that mounts the row. One bounded timer retry (timers, unlike
+    // animation frames, run in background tabs) settles all of it in order.
+    let focusRetryTimer: ReturnType<typeof setTimeout> | undefined
+    const focusCell: DataGridCellSelectionApi["focusCell"] = (
+      rowId,
+      columnId,
+      options
+    ) => {
+      // A newer call supersedes any chain still polling for an older row.
+      clearTimeout(focusRetryTimer)
+      let attempts = 12
+      const attempt = () => {
+        // The grid can unmount mid-retry; a stale timer must go quiet.
+        if (!viewport.isConnected) return
+        const cell = viewport.querySelector<HTMLElement>(
+          `tr[data-row-id="${CSS.escape(rowId)}"] td[data-col-id="${CSS.escape(columnId)}"]`
+        )
+        if (!cell) {
+          if (attempts-- > 0) focusRetryTimer = setTimeout(attempt, 32)
+          return
+        }
+        getTable().setFocusedCell(rowId, columnId)
+        focusTarget.focus()
+        // The cell's id is static, so assistive tech can point at it ahead
+        // of the data-cell-focused commit the rAF sync waits for.
+        if (cell.id) focusTarget.setAttribute("aria-activedescendant", cell.id)
+        scrollTdIntoView(cell)
+        if (!options?.edit) return
+        // The built-in overlay measures td[data-cell-focused], so the edit
+        // request waits for that attribute to land.
+        let editAttempts = 12
+        const attemptEdit = () => {
+          if (!cell.isConnected) return
+          if (cell.hasAttribute("data-cell-focused")) requestCellEdit()
+          else if (editAttempts-- > 0) {
+            focusRetryTimer = setTimeout(attemptEdit, 32)
+          }
+        }
+        attemptEdit()
+      }
+      attempt()
+    }
+    const clearSelection = () => {
+      getTable().resetCellSelection(true)
+      requestAnimationFrame(syncActiveDescendant)
+    }
+    const scrollToCell = (rowId: string, columnId: string) => {
+      scrollTdIntoView(
+        viewport.querySelector(
+          `tr[data-row-id="${CSS.escape(rowId)}"] td[data-col-id="${CSS.escape(columnId)}"]`
+        )
+      )
+    }
+    if (apiRef) apiRef.current = { focusCell, clearSelection, scrollToCell }
+
+    // Resolves jump targets (Home, End, Ctrl+Arrows, PageUp/PageDown) in the
+    // feature's display-index space and lands them through the range API:
+    // plain jumps collapse to the target cell, Shift jumps keep the active
+    // range's opposite corner as the anchor, the Excel model.
+    const jumpFocus = (
+      rowTarget: "first" | "last" | "same" | { delta: number },
+      columnTarget: "first" | "last" | "same",
+      extend: boolean
+    ): boolean => {
+      const table = getTable()
+      const focused = table.getFocusedCell()
+      if (!focused) return false
+      const rows = table.getRowsInDisplayOrder()
+      const allColumns = getDataGridDisplayOrderedColumns(table)
+      const selectable = allColumns.filter(
+        (column) => column.columnDef.enableCellSelection !== false
+      )
+      if (!rows.length || !selectable.length) return false
+      const rowIndex = focused.row.getDisplayIndex()
+      const targetRowIndex =
+        rowTarget === "first"
+          ? 0
+          : rowTarget === "last"
+            ? rows.length - 1
+            : rowTarget === "same"
+              ? rowIndex
+              : Math.min(
+                  rows.length - 1,
+                  Math.max(0, rowIndex + rowTarget.delta)
+                )
+      // Pagination renders a window of the display order; walk the target
+      // back toward the focus until it lands on a rendered row, so a jump
+      // can never focus an off-page row the view cannot show. DOM rows
+      // join the set so pinned rows outside the page slice stay reachable.
+      let clampedRowIndex = targetRowIndex
+      // With the whole display order in the page slice nothing is off-page
+      // and the clamp cannot move, so skip building the id set.
+      if (table.getRowModel().rows.length !== rows.length) {
+        const rendered = new Set<string | null>(
+          table.getRowModel().rows.map((row: { id: string }) => row.id)
+        )
+        for (const rowEl of Array.from(
+          viewport.querySelectorAll("tbody tr[data-row-id]")
+        )) {
+          rendered.add(rowEl.getAttribute("data-row-id"))
+        }
+        const step = clampedRowIndex >= rowIndex ? -1 : 1
+        while (
+          clampedRowIndex !== rowIndex &&
+          rows[clampedRowIndex] &&
+          !rendered.has(rows[clampedRowIndex].id)
+        ) {
+          clampedRowIndex += step
+        }
+      }
+      const targetRow = rows[clampedRowIndex]
+      const targetColumn =
+        columnTarget === "first"
+          ? selectable[0]
+          : columnTarget === "last"
+            ? selectable[selectable.length - 1]
+            : focused.column
+      if (!targetRow || !targetColumn) return false
+      if (extend) {
+        const bound = getDataGridActiveBound(table)
+        const columnIndex = allColumns.findIndex(
+          (column) => column.id === focused.column.id
+        )
+        let anchorRowId = focused.row.id
+        let anchorColumnId = focused.column.id
+        if (bound) {
+          anchorRowId =
+            rows[
+              rowIndex === bound.minRowIndex
+                ? bound.maxRowIndex
+                : bound.minRowIndex
+            ]?.id ?? anchorRowId
+          anchorColumnId =
+            allColumns[
+              columnIndex === bound.minColumnIndex
+                ? bound.maxColumnIndex
+                : bound.minColumnIndex
+            ]?.id ?? anchorColumnId
+        }
+        table.selectCellRange(
+          {
+            anchorRowId,
+            anchorColumnId,
+            focusRowId: targetRow.id,
+            focusColumnId: targetColumn.id,
+          },
+          { mode: "replace" }
+        )
+      } else {
+        table.setFocusedCell(targetRow.id, targetColumn.id)
+      }
+      scrollFocusedIntoView(
+        clampedRowIndex,
+        rows.length,
+        // The extend keeps focus on the anchor; follow the jump target.
+        extend
+          ? { rowId: targetRow.id, columnId: targetColumn.id }
+          : undefined
+      )
+      return true
+    }
+
+    // One visual-space focus step with the feature's move as the fallback
+    // for unresolvable positions; at an edge the focus stays put.
+    const moveFocusVisual = (
+      direction: "up" | "down" | "left" | "right"
+    ): void => {
+      const table = getTable()
+      const focused = table.getFocusedCell()
+      const target = focused
+        ? getDataGridStepTarget(
+            table,
+            viewport,
+            { rowId: focused.row.id, columnId: focused.column.id },
+            direction
+          )
+        : null
+      if (target === "edge") return
+      if (target) {
+        table.setFocusedCell(target.rowId, target.columnId)
+        return
+      }
+      table.moveCellSelection(direction)
+    }
+
+    // One viewport's worth of rows for PageUp/PageDown, measured from the
+    // live layout; 10 when nothing is measurable (jsdom). Data rows only:
+    // the virtual table's spacer rows carry the whole scroll offset as
+    // height and would collapse the page size to a single row.
+    const getPageJumpSize = (): number => {
+      const row = viewport.querySelector("tbody tr[data-row-id]")
+      // The nearest ancestor that actually scrolls; in the scroll-area
+      // layout the viewport's parent is a full-height content wrapper
+      // whose clientHeight would make the page span the whole table.
+      let scroller: HTMLElement | null = viewport
+      while (scroller && scroller.scrollHeight <= scroller.clientHeight) {
+        scroller = scroller.parentElement
+      }
+      const rowHeight = row?.getBoundingClientRect().height || 0
+      const viewHeight = scroller?.clientHeight || viewport.clientHeight
+      if (!rowHeight || !viewHeight) return 10
+      return Math.max(1, Math.floor(viewHeight / rowHeight) - 1)
+    }
+
+    // The rows appended after the data rows: the add-row affordance and a
+    // consumer appendRow draft. Positional, because an id-less tr is not
+    // enough - expanded-detail rows interleave BETWEEN data rows and the
+    // empty-state row stands alone, and neither belongs to this region.
+    // Virtual spacer rows are aria-hidden and never match.
+    const getAppendedRows = (): HTMLElement[] => {
+      const body = viewport.querySelector("tbody")
+      const appended: HTMLElement[] = []
+      // Backwards from the end, stopping at the first data row: O(appended)
+      // instead of an array of every rendered row per keystroke.
+      let rowEl = body?.lastElementChild
+      while (rowEl && !rowEl.hasAttribute("data-row-id")) {
+        if (
+          rowEl instanceof HTMLElement &&
+          !rowEl.hasAttribute("aria-hidden")
+        ) {
+          appended.unshift(rowEl)
+        }
+        rowEl = rowEl.previousElementSibling
+      }
+      return appended
+    }
+
+    const focusFirstIn = (row: HTMLElement | undefined): boolean => {
+      const focusable = row?.querySelector<HTMLElement>(
+        'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+      if (!focusable) return false
+      focusable.focus()
+      // A control that refuses focus (hidden, inert) must not report
+      // success, or the arrow key that called this dead-ends.
+      return row!.ownerDocument.activeElement === focusable
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return
+
+      // Unified keyboard for the appended region: ArrowDown/ArrowUp walk
+      // between its rows, and ArrowUp from its first row returns to the
+      // grid's cell navigation. Every other key stays native there.
+      const appendedRow =
+        event.target instanceof Element
+          ? (event.target.closest(
+              "tbody > tr:not([data-row-id])"
+            ) as HTMLElement | null)
+          : null
+      if (appendedRow && viewport.contains(appendedRow)) {
+        const appended = getAppendedRows()
+        const index = appended.indexOf(appendedRow)
+        // An id-less row that is NOT appended (expanded detail content,
+        // the empty-state row) keeps every key native.
+        if (index === -1) return
+        if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return
+        if (event.key === "ArrowDown") {
+          if (focusFirstIn(appended[index + 1])) event.preventDefault()
+          return
+        }
+        if (index > 0 && focusFirstIn(appended[index - 1])) {
+          event.preventDefault()
+          return
+        }
+        // Back into the grid, on whatever cell was focused last.
+        focusTarget.focus()
+        syncActiveDescendant()
+        event.preventDefault()
+        return
+      }
+
+      if (isDataGridInteractiveKeyTarget(event.target)) {
+        // The ARIA grid pattern's exit gesture: Escape on an in-cell
+        // control hands DOM focus back to the grid so navigation resumes.
+        // A control that consumed the key first (closing its own popup)
+        // never lets it reach here unprevented, and portal-rendered
+        // popups keep their Escape entirely outside the viewport.
+        if (event.key === "Escape") {
+          const cell = (event.target as Element).closest?.("td[data-col-id]")
+          if (cell && viewport.contains(cell)) {
+            event.preventDefault()
+            event.stopPropagation()
+            focusTarget.focus()
+            syncActiveDescendant()
+          }
+        }
+        return
+      }
+      const table = getTable()
+      const rtl = getComputedStyle(viewport).direction === "rtl"
+      const horizontal = (direction: "left" | "right") =>
+        rtl ? (direction === "left" ? "right" : "left") : direction
+
+      // Ahead of the switch so plain letters still reach the type-to-edit
+      // fall-through below. Matched by code as well as key, so non-Latin
+      // layouts (where the key is the layout's own character) still work.
+      if (
+        (event.key === "a" || event.key === "A" || event.code === "KeyA") &&
+        (event.metaKey || event.ctrlKey) &&
+        // AltGr arrives as Ctrl+Alt; that chord types a character on
+        // central-European layouts and is not a select-all.
+        !event.altKey
+      ) {
+        if (isRangeSelectionEnabled()) {
+          table.selectAllCells()
+          // Select-all moves the feature's focus to the range corner,
+          // which can sit off-page; keep assistive tech pointed right.
+          requestAnimationFrame(syncActiveDescendant)
+        }
+        event.preventDefault()
+        return
+      }
+
+      // Explicit copy and cut chords; see writeSelectionToClipboard for
+      // why the native copy event cannot carry these. Paste stays on the
+      // native event, which browsers do fire at the focused element.
+      if ((event.metaKey || event.ctrlKey) && !event.altKey && clipboard) {
+        const isCopy =
+          event.key === "c" || event.key === "C" || event.code === "KeyC"
+        const isCut =
+          event.key === "x" || event.key === "X" || event.code === "KeyX"
+        if (isCopy || isCut) {
+          event.preventDefault()
+          void writeSelectionToClipboard().then((written) => {
+            if (!written) return
+            context.props.onCellsCopy?.({ ...written, cut: isCut })
+            if (!isCut) return
+            const onCellsChange = getOnCellsChange()
+            if (!onCellsChange) return
+            const details = buildDataGridClearDetails<TData>(
+              getTable(),
+              "cut",
+              true,
+              viewport
+            )
+            if (details) onCellsChange(details)
+          })
+          return
+        }
+      }
+
+      switch (event.key) {
+        case "ArrowUp":
+        case "ArrowDown":
+        case "ArrowLeft":
+        case "ArrowRight": {
+          const direction =
+            event.key === "ArrowUp"
+              ? ("up" as const)
+              : event.key === "ArrowDown"
+                ? ("down" as const)
+                : horizontal(event.key === "ArrowLeft" ? "left" : "right")
+          if (event.metaKey || event.ctrlKey) {
+            // Ctrl/Cmd+Arrow jumps to the grid edge in that direction.
+            const jumped =
+              direction === "up"
+                ? jumpFocus("first", "same", event.shiftKey && isRangeSelectionEnabled())
+                : direction === "down"
+                  ? jumpFocus("last", "same", event.shiftKey && isRangeSelectionEnabled())
+                  : jumpFocus(
+                      "same",
+                      direction === "left" ? "first" : "last",
+                      event.shiftKey && isRangeSelectionEnabled()
+                    )
+            if (jumped) event.preventDefault()
+            return
+          }
+          // ArrowDown on the last rendered row steps into the appended
+          // region (a draft row, or the add-row affordance), keeping one
+          // keyboard model across the whole table.
+          if (direction === "down" && !event.shiftKey) {
+            const focused = table.getFocusedCell()
+            const renderedRows = viewport.querySelectorAll(
+              "tbody tr[data-row-id]"
+            )
+            const lastRenderedId = renderedRows[
+              renderedRows.length - 1
+            ]?.getAttribute("data-row-id")
+            if (
+              focused &&
+              lastRenderedId &&
+              focused.row.id === lastRenderedId &&
+              focusFirstIn(getAppendedRows()[0])
+            ) {
+              event.preventDefault()
+              return
+            }
+          }
+          if (event.shiftKey && isRangeSelectionEnabled()) {
+            const corner = extendDataGridSelection(table, viewport, direction)
+            event.preventDefault()
+            scrollFocusedIntoView(undefined, undefined, corner ?? undefined)
+            return
+          }
+          // Plain arrows step in visual space so navigation crosses
+          // pinned rows and pagination windows the feature's own move
+          // cannot resolve; at a visual edge the focus stays put.
+          const focused = table.getFocusedCell()
+          const target = focused
+            ? getDataGridStepTarget(
+                table,
+                viewport,
+                { rowId: focused.row.id, columnId: focused.column.id },
+                direction
+              )
+            : null
+          if (target === "edge") {
+            event.preventDefault()
+            return
+          }
+          if (target) {
+            table.setFocusedCell(target.rowId, target.columnId)
+            event.preventDefault()
+            scrollFocusedIntoView()
+            return
+          }
+          table.moveCellSelection(direction)
+          event.preventDefault()
+          scrollFocusedIntoView()
+          return
+        }
+        case "Home":
+        case "End": {
+          // Home/End: row start or end; with Ctrl/Cmd, the grid's corners.
+          const edge = event.key === "Home" ? ("first" as const) : ("last" as const)
+          const jumped =
+            event.metaKey || event.ctrlKey
+              ? jumpFocus(edge, edge, event.shiftKey && isRangeSelectionEnabled())
+              : jumpFocus("same", edge, event.shiftKey && isRangeSelectionEnabled())
+          if (jumped) event.preventDefault()
+          return
+        }
+        case "PageUp":
+        case "PageDown": {
+          const delta = (event.key === "PageUp" ? -1 : 1) * getPageJumpSize()
+          if (jumpFocus({ delta }, "same", event.shiftKey && isRangeSelectionEnabled())) {
+            event.preventDefault()
+          }
+          return
+        }
+        case "Enter": {
+          // The Notion/Airtable flow: Enter opens the editor when one is
+          // wired; the Excel move-down stays the fallback.
+          if (!event.shiftKey && requestCellEdit()) {
+            event.preventDefault()
+            return
+          }
+          moveFocusVisual(event.shiftKey ? "up" : "down")
+          event.preventDefault()
+          scrollFocusedIntoView()
+          return
+        }
+        case "F2": {
+          if (requestCellEdit()) event.preventDefault()
+          return
+        }
+        case "Tab": {
+          const before = table.getFocusedCell()
+          // Logical directions, no RTL swap: Tab means "next cell" in both
+          // reading directions, exactly like DOM tab order.
+          moveFocusVisual(event.shiftKey ? "left" : "right")
+          const after = table.getFocusedCell()
+          // Trap Tab only while it moved; at the edges focus leaves the grid,
+          // which keyboard users need to escape it at all.
+          if (after && after.id !== before?.id) {
+            event.preventDefault()
+            scrollFocusedIntoView()
+          }
+          return
+        }
+        case "Delete":
+        case "Backspace": {
+          const onCellsChange = getOnCellsChange()
+          if (!onCellsChange) return
+          const details = buildDataGridClearDetails<TData>(
+            table,
+            "clear",
+            false,
+            viewport
+          )
+          if (details) onCellsChange(details)
+          event.preventDefault()
+          return
+        }
+        case "Escape": {
+          // Consume the key only while it has a selection to clear, so a
+          // grid inside a dialog still lets Escape close the dialog.
+          if (table.getCellSelectionBounds().length) {
+            table.resetCellSelection(true)
+            // The focused-cell attribute is gone after the commit;
+            // aria-activedescendant must not keep naming it.
+            requestAnimationFrame(syncActiveDescendant)
+            event.preventDefault()
+            event.stopPropagation()
+          }
+          return
+        }
+      }
+
+      // Space on a cell whose content is a checkbox toggles it, the
+      // row-select idiom, so the selection column works by keyboard too.
+      if (event.key === " ") {
+        const checkbox = viewport
+          .querySelector("td[data-cell-focused]")
+          ?.querySelector<HTMLElement>(
+            '[role="checkbox"], input[type="checkbox"]'
+          )
+        if (checkbox) {
+          checkbox.click()
+          event.preventDefault()
+          return
+        }
+      }
+
+      // Type-to-edit: a printable character on the focused cell opens the
+      // editor seeded with it, replacing the value the way Notion and
+      // Airtable do. Plain Ctrl/Cmd chords stay shortcuts, but Ctrl+Alt is
+      // AltGr and bare Alt is the macOS Option layer - both type characters.
+      if (
+        event.key.length === 1 &&
+        !event.metaKey &&
+        !(event.ctrlKey && !event.altKey) &&
+        requestCellEdit(event.key)
+      ) {
+        event.preventDefault()
+        return
+      }
+
+      // Space that opened nothing (read-only cell) must not scroll the page
+      // out from under the focused cell.
+      if (event.key === " " && table.getFocusedCell()) {
+        event.preventDefault()
+      }
+    }
+
+    // Writes the active region to the system clipboard in both flavors.
+    // Needed because a native copy event only fires for a text selection
+    // or an editable target, and a focused grid is neither - Cmd/Ctrl+C
+    // would silently do nothing on macOS, Windows and Linux alike. The
+    // async API needs a secure context; the execCommand fallback covers
+    // the rest with the TSV flavor alone.
+    const writeSelectionToClipboard = async (): Promise<{
+      text: string
+      grid: string[][]
+    } | null> => {
+      const grid = getDataGridActiveRegionGrid(getTable(), viewport)
+      if (!grid) return null
+      const text = serializeDataGridClipboardText(grid)
+      try {
+        if (
+          typeof ClipboardItem !== "undefined" &&
+          navigator.clipboard?.write
+        ) {
+          await navigator.clipboard.write([
+            new ClipboardItem({
+              "text/plain": new Blob([text], { type: "text/plain" }),
+              "text/html": new Blob([renderDataGridClipboardHtml(grid)], {
+                type: "text/html",
+              }),
+            }),
+          ])
+          return { text, grid }
+        }
+        if (navigator.clipboard?.writeText) {
+          await navigator.clipboard.writeText(text)
+          return { text, grid }
+        }
+      } catch {
+        // Denied or unavailable; the legacy path below still applies.
+      }
+      const doc = viewport.ownerDocument
+      const scratch = doc.createElement("textarea")
+      scratch.value = text
+      scratch.style.position = "fixed"
+      scratch.style.opacity = "0"
+      doc.body.appendChild(scratch)
+      scratch.select()
+      let copied = false
+      try {
+        copied = doc.execCommand("copy")
+      } catch {
+        copied = false
+      }
+      scratch.remove()
+      focusTarget.focus()
+      return copied ? { text, grid } : null
+    }
+
+    const copySelection = (event: ClipboardEvent, cut: boolean): boolean => {
+      const grid = getDataGridActiveRegionGrid(getTable(), viewport)
+      if (!grid || !event.clipboardData) return false
+      event.preventDefault()
+      const text = serializeDataGridClipboardText(grid)
+      event.clipboardData.setData("text/plain", text)
+      event.clipboardData.setData("text/html", renderDataGridClipboardHtml(grid))
+      context.props.onCellsCopy?.({ text, grid, cut })
+      return true
+    }
+
+    const handleCopy = (event: ClipboardEvent) => {
+      if (isDataGridEditableTarget(event.target)) return
+      copySelection(event, false)
+    }
+
+    const handleCut = (event: ClipboardEvent) => {
+      if (isDataGridEditableTarget(event.target)) return
+      if (!copySelection(event, true)) return
+      const onCellsChange = getOnCellsChange()
+      if (!onCellsChange) return
+      const details = buildDataGridClearDetails<TData>(
+        getTable(),
+        "cut",
+        true,
+        viewport
+      )
+      if (details) onCellsChange(details)
+    }
+
+    const handlePaste = (event: ClipboardEvent) => {
+      if (isDataGridEditableTarget(event.target)) return
+      const onCellsChange = getOnCellsChange()
+      if (!onCellsChange) return
+      const text = event.clipboardData?.getData("text/plain")
+      if (!text) return
+      event.preventDefault()
+      const table = getTable()
+      const result = buildDataGridPasteDetails<TData>(
+        table,
+        parseDataGridClipboardText(text),
+        viewport
+      )
+      if (!result) return
+      onCellsChange(result.details)
+      // The pasted region becomes the selection, the documented contract;
+      // single mode keeps just the focused cell instead.
+      if (isRangeSelectionEnabled()) {
+        selectDataGridRegion(table, result.target)
+      }
+    }
+
+    // Custom-control cells follow the same two-step gesture as editor
+    // cells: the first click on an UNFOCUSED cell only focuses it, the
+    // second activates the control, so moving the focus around can never
+    // fire actions. Radix triggers open on pointerdown and Base UI ones
+    // on click, so the press is intercepted at both; checkboxes keep
+    // their one-click toggle (the row-select idiom), data-cell-interactive
+    // widgets own all their gestures, and single-click edit mode skips
+    // the interception outright.
+    let pressedUnfocusedControl = false
+    const getTwoStepControl = (target: EventTarget | null): Element | null => {
+      if (!(target instanceof Element)) return null
+      if (target.closest("[data-cell-interactive]")) return null
+      if (target.closest('[role="checkbox"], input[type="checkbox"]')) {
+        return null
+      }
+      // Opt-in for widgets whose ACTIVE surface is bigger than any generic
+      // selector can know - a combobox whose whole blank chips strip opens
+      // it, a canvas editor. Marking the wrapper data-cell-control makes a
+      // press anywhere on it two-step, exactly like a bare button.
+      const marked = target.closest("[data-cell-control]")
+      if (marked) return marked
+      return target.closest(
+        'button, a, select, input, textarea, [contenteditable], [role="combobox"]'
+      )
+    }
+    const handleControlPointerDown = (event: PointerEvent) => {
+      pressedUnfocusedControl = false
+      if (event.button !== 0) return
+      if (event.shiftKey || event.ctrlKey || event.metaKey) return
+      if (context.props.tableLayout?.cellEditMode === "click") return
+      const control = getTwoStepControl(event.target)
+      const cell = control?.closest("td[data-col-id]")
+      if (!control || !cell || !viewport.contains(cell)) return
+      if (cell.hasAttribute("data-cell-focused")) return
+      const column = getTable().getColumn(
+        cell.getAttribute("data-col-id") ?? ""
+      )
+      if (!column || column.columnDef.enableCellSelection === false) return
+      pressedUnfocusedControl = true
+      // Stops a Radix trigger's pointerdown open before React's root
+      // delegation sees it; the mouse events that focus the cell ride on.
+      event.stopPropagation()
+    }
+    const handleControlClick = (event: MouseEvent) => {
+      if (!pressedUnfocusedControl) return
+      pressedUnfocusedControl = false
+      // Swallows the activation click a Base UI trigger listens for.
+      event.preventDefault()
+      event.stopPropagation()
+    }
+    const handleControlMouseDown = (event: MouseEvent) => {
+      if (!pressedUnfocusedControl) return
+      // A Base UI trigger opens on the React-delegated mousedown, and all
+      // root-delegated handlers die together when the event stops here -
+      // including the td's own focus logic, so the selection start runs
+      // imperatively: same feature handler, same drag session.
+      event.stopPropagation()
+      event.preventDefault()
+      const cell = (event.target as Element | null)?.closest?.(
+        "td[data-col-id]"
+      )
+      const rowId = cell
+        ?.closest("tr[data-row-id]")
+        ?.getAttribute("data-row-id")
+      const columnId = cell?.getAttribute("data-col-id")
+      if (!rowId || !columnId) return
+      const tableNow = getTable()
+      const cellApi = tableNow
+        .getRowsInDisplayOrder()
+        .find((row) => row.id === rowId)
+        ?.getAllCellsByColumnId()[columnId]
+      if (!cellApi) return
+      if (isRangeSelectionEnabled()) {
+        cellApi.getSelectionStartHandler()(event)
+      } else {
+        tableNow.setFocusedCell(rowId, columnId)
+      }
+      focusTarget.focus()
+      requestAnimationFrame(syncActiveDescendant)
+    }
+
+    // Drag-to-select outranks in-cell controls: when a drag grew the
+    // range, the click that fires on release is swallowed in capture so a
+    // trigger under the pointer never opens. The selection key comparison
+    // is what distinguishes a drag from a motionless click made while a
+    // multi-cell selection already exists (a press on "+ Add row" or an
+    // in-cell control changes nothing, and its click must go through).
+    let dragStartedOnCell = false
+    let dragStartSelectionKey = ""
+    const getSelectionKey = () => {
+      const table = getTable()
+      const bounds = table.getCellSelectionBounds()
+      const bound = bounds[bounds.length - 1]
+      return `${table.getSelectedCellCount()}:${bounds.length}:${
+        bound
+          ? `${bound.minRowIndex},${bound.minColumnIndex},${bound.maxRowIndex},${bound.maxColumnIndex}`
+          : ""
+      }`
+    }
+    const handleDragMouseUp = () => {
+      const wasDrag =
+        dragStartedOnCell &&
+        getTable().getSelectedCellCount() > 1 &&
+        getSelectionKey() !== dragStartSelectionKey
+      dragStartedOnCell = false
+      viewport.removeAttribute("data-cell-selecting")
+      if (!wasDrag) return
+      const squelch = (clickEvent: MouseEvent) => {
+        clickEvent.stopPropagation()
+        clickEvent.preventDefault()
+      }
+      viewport.addEventListener("click", squelch, { capture: true })
+      setTimeout(
+        () => viewport.removeEventListener("click", squelch, true),
+        0
+      )
+    }
+
+    const handleMouseDown = (event: MouseEvent) => {
+      if (event.button !== 0) return
+      // The cell a click focuses reaches assistive tech once React commits.
+      requestAnimationFrame(syncActiveDescendant)
+      const target = event.target as Element | null
+      // A modifier press is a selection gesture all the way through, the
+      // Sheets contract: extending must not hand the keyboard to whatever
+      // control sits under the pointer, or the follow-up Shift+arrows land
+      // in a date button or a combobox input instead of growing the range.
+      // The extension itself runs through the cell's own React handlers, so
+      // the event must NOT be defaultPrevented - the delegated handlers
+      // treat that as consumed and the extension never happens. Only the
+      // browser's focus default is unwanted; it runs after the listeners,
+      // so the grid reclaims focus one task later.
+      if (
+        (event.shiftKey || event.metaKey || event.ctrlKey) &&
+        isRangeSelectionEnabled() &&
+        target?.closest?.("td[data-col-id]")
+      ) {
+        setTimeout(() => focusTarget.focus(), 0)
+      }
+      // Any td press can become a drag; the squelch only arms when the
+      // range actually grew by release time. The attribute hides the fill
+      // handle for the session, so its overhang never sits in the drag
+      // path or churns from cell to cell while the range grows.
+      dragStartedOnCell = !!target?.closest?.("td")
+      if (dragStartedOnCell) {
+        dragStartSelectionKey = getSelectionKey()
+        viewport.setAttribute("data-cell-selecting", "")
+      }
+      if (!target?.closest?.('[data-slot="data-grid-cell-fill-handle"]')) return
+      // Ahead of React's root delegation, so the td underneath never starts a
+      // plain range drag from the handle.
+      event.preventDefault()
+      event.stopPropagation()
+      startDataGridFillSession<TData>({
+        table: getTable(),
+        viewport,
+        onCellsChange: getOnCellsChange(),
+      })
+    }
+
+    // Single-click editing, the opt-in mode: a plain click that landed
+    // on the (now) focused cell opens its editor immediately. Drags were
+    // squelched in capture before this bubble listener, and modifier
+    // clicks are selection gestures.
+    const handleClickToEdit = (event: MouseEvent) => {
+      if (context.props.tableLayout?.cellEditMode !== "click") return
+      if (event.shiftKey || event.ctrlKey || event.metaKey) return
+      if (isDataGridInteractiveKeyTarget(event.target)) return
+      const cell = (event.target as HTMLElement | null)?.closest?.("td")
+      if (!cell?.hasAttribute("data-cell-focused")) return
+      requestCellEdit()
+    }
+
+    // Double-click opens the editor on the cell the first click focused,
+    // matching Sheets. Interactive content keeps its own double-clicks, and
+    // the clicked cell must BE the focused one, or a double-click on a
+    // non-selectable cell would edit whichever cell held focus before.
+    const handleDoubleClick = (event: MouseEvent) => {
+      if (isDataGridInteractiveKeyTarget(event.target)) return
+      const target = event.target as HTMLElement | null
+      const cell = target?.closest?.("td")
+      if (!cell?.hasAttribute("data-cell-focused")) return
+      requestCellEdit()
+    }
+
+    const previousTabIndex = focusTarget.getAttribute("tabindex")
+    const previousOutline = focusTarget.style.outline
+    if (keyboard) {
+      focusTarget.tabIndex = 0
+      // The focused CELL ring is the indicator; the browser's outline around
+      // the whole grid on focus() would double it.
+      focusTarget.style.outline = "none"
+      viewport.addEventListener("keydown", handleKeyDown)
+    }
+    if (clipboard) {
+      viewport.addEventListener("copy", handleCopy)
+      viewport.addEventListener("cut", handleCut)
+      viewport.addEventListener("paste", handlePaste)
+    }
+    viewport.addEventListener("pointerdown", handleControlPointerDown)
+    viewport.addEventListener("mousedown", handleControlMouseDown)
+    viewport.addEventListener("click", handleControlClick)
+    viewport.addEventListener("mousedown", handleMouseDown)
+    viewport.addEventListener("click", handleClickToEdit)
+    viewport.addEventListener("dblclick", handleDoubleClick)
+    viewport.ownerDocument.addEventListener("mouseup", handleDragMouseUp)
+    // Selection-change notifications, read through the context getter so
+    // the latest callback fires without re-running this effect. The
+    // snapshot is only built when a callback is actually wired.
+    const toBound = (bound: {
+      minRowIndex: number
+      maxRowIndex: number
+      minColumnIndex: number
+      maxColumnIndex: number
+    }) => ({
+      minRowIndex: bound.minRowIndex,
+      maxRowIndex: bound.maxRowIndex,
+      minColumnIndex: bound.minColumnIndex,
+      maxColumnIndex: bound.maxColumnIndex,
+    })
+    const selectionSubscription = table.atoms.cellSelection?.subscribe(() => {
+      const onCellSelectionChange = context.props.onCellSelectionChange
+      if (!onCellSelectionChange) return
+      const tableNow = getTable()
+      const focusedCell = tableNow.getFocusedCell()
+      const activeBound = getDataGridActiveBound(tableNow)
+      onCellSelectionChange({
+        focused: focusedCell
+          ? { rowId: focusedCell.row.id, columnId: focusedCell.column.id }
+          : null,
+        bounds: tableNow.getCellSelectionBounds().map(toBound),
+        activeBound: activeBound ? toBound(activeBound) : null,
+        visibleCellCount: getDataGridVisibleSelectedCellCount(
+          tableNow,
+          viewport
+        ),
+      })
+    })
+    setViewportEl(viewport)
+
+    return () => {
+      if (keyboard) {
+        if (previousTabIndex === null) focusTarget.removeAttribute("tabindex")
+        else focusTarget.setAttribute("tabindex", previousTabIndex)
+        focusTarget.style.outline = previousOutline
+        focusTarget.removeAttribute("aria-activedescendant")
+        viewport.removeEventListener("keydown", handleKeyDown)
+      }
+      if (clipboard) {
+        viewport.removeEventListener("copy", handleCopy)
+        viewport.removeEventListener("cut", handleCut)
+        viewport.removeEventListener("paste", handlePaste)
+      }
+      viewport.removeEventListener("pointerdown", handleControlPointerDown)
+      viewport.removeEventListener("mousedown", handleControlMouseDown)
+      viewport.removeEventListener("click", handleControlClick)
+      viewport.removeEventListener("mousedown", handleMouseDown)
+      viewport.removeEventListener("click", handleClickToEdit)
+      viewport.removeEventListener("dblclick", handleDoubleClick)
+      viewport.ownerDocument.removeEventListener("mouseup", handleDragMouseUp)
+      viewport.removeAttribute("data-cell-selecting")
+      selectionSubscription?.unsubscribe()
+      clearTimeout(focusRetryTimer)
+      if (apiRef) apiRef.current = null
+      setViewportEl(null)
+      setEditorSession(null)
+    }
+    // Context getters serve fresh table/props inside every handler, so the
+    // effect re-runs only when the table itself is replaced. apiRef is only
+    // read and written here: keeping it out of the deps means an inline ref
+    // object cannot tear the listeners down every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, keyboard, clipboard, table.store])
+
+  // The editor overlay covers the cell but not the fill handle's
+  // straddling half, which would poke out beneath it; the viewport flags
+  // the session so the handle hides, as it does during a drag.
+  useEffect(() => {
+    if (!viewportEl || !editorSession) return
+    viewportEl.setAttribute("data-cell-editing", "")
+    return () => viewportEl.removeAttribute("data-cell-editing")
+  }, [viewportEl, editorSession])
+
+  // Closing an editor the user finished with keys hands focus back to the
+  // viewport so navigation continues where the edit left off; a commit can
+  // advance first (Tab across, and Enter down or up when
+  // cellEditEnterAdvance opts into the Sheets flow). A blur-initiated close
+  // must NOT refocus: the browser already moved focus where the user
+  // clicked, and yanking it back would reroute their next keystrokes into
+  // the grid.
+  const closeEditorSession = (
+    advance: DataGridEditorAdvance,
+    refocus = true
+  ) => {
+    setEditorSession(null)
+    if (advance) {
+      // Same visual-space step as keyboard navigation, so a commit on a
+      // pinned row advances like any other row.
+      const tableNow = context.table
+      const focused = tableNow.getFocusedCell()
+      const target =
+        focused && viewportEl
+          ? getDataGridStepTarget(
+              tableNow,
+              viewportEl,
+              { rowId: focused.row.id, columnId: focused.column.id },
+              advance
+            )
+          : null
+      if (target && target !== "edge") {
+        tableNow.setFocusedCell(target.rowId, target.columnId)
+      } else if (!target) {
+        tableNow.moveCellSelection(advance)
+      }
+    }
+    if (!refocus) return
+    requestAnimationFrame(() => {
+      const focusEl =
+        viewportEl?.querySelector<HTMLElement>(
+          'table[data-slot="data-grid-table"]'
+        ) ?? viewportEl
+      focusEl?.focus()
+      const cell = viewportEl?.querySelector<HTMLElement>(
+        "td[data-cell-focused]"
+      )
+      if (cell?.id) focusEl?.setAttribute("aria-activedescendant", cell.id)
+      cell?.scrollIntoView?.({
+        block: "nearest",
+        inline: "nearest",
+        behavior: "instant",
+      })
+    })
+  }
+
+  // An unchanged commit dispatches nothing, the Excel model; a parse
+  // rejection reports through the batch's rejected list instead of writing.
+  const commitEditorSession = (
+    raw: string,
+    advance: DataGridEditorAdvance,
+    refocus = true
+  ) => {
+    const session = editorSession
+    closeEditorSession(advance, refocus)
+    const onCellsChange = context.props.onCellsChange
+    if (!session || !onCellsChange || raw === session.baseline) return
+    const tableNow = context.table
+    const row = tableNow
+      .getRowsInDisplayOrder()
+      .find((candidate) => candidate.id === session.rowId)
+    const column = tableNow.getColumn(session.columnId)
+    const cellEdit =
+      column && row
+        ? getDataGridWritableCellEdit<TData>(column, row.original)
+        : null
+    if (!row || !column || !cellEdit) return
+    const previousValue = row.getAllCellsByColumnId()[column.id]?.getValue()
+    let value: unknown = raw
+    if (cellEdit.parse) {
+      const parsed = cellEdit.parse(raw, row.original)
+      if (parsed === undefined) {
+        onCellsChange({
+          source: "edit",
+          changes: [],
+          rejected: [
+            {
+              rowId: session.rowId,
+              columnId: session.columnId,
+              raw,
+              reason: "invalid",
+            },
+          ],
+        })
+        return
+      }
+      value = parsed
+    }
+    onCellsChange({
+      source: "edit",
+      changes: [
+        {
+          rowId: session.rowId,
+          columnId: session.columnId,
+          row: row.original,
+          previousValue,
+          value,
+        },
+      ],
+      rejected: [],
+    })
+  }
+
+  return (
+    <>
+      <span ref={anchorRef} hidden data-slot="data-grid-cell-selection" />
+      {enabled && viewportEl && editorSession ? (
+        <DataGridCellEditorOverlay
+          key={`${editorSession.rowId}:${editorSession.columnId}`}
+          viewport={viewportEl}
+          session={editorSession}
+          enterAdvance={context.props.tableLayout?.cellEditEnterAdvance === true}
+          onCommit={commitEditorSession}
+          onCancel={() => closeEditorSession(null)}
+        />
+      ) : null}
+    </>
+  )
+}
+
+/**
+ * The built-in free-text editor: a portal into the body viewport, positioned
+ * flush over the focused cell with the cell's own font, alignment and
+ * padding, so the text keeps its exact place - the Sheets model. The
+ * `textarea` control grows downward over the rows below as the text wraps.
+ */
+function measureDataGridCellEditorStyle(
+  viewport: HTMLElement
+): CSSProperties | null {
+  const cell = viewport.querySelector<HTMLElement>("td[data-cell-focused]")
+  if (!cell) return null
+  const cellRect = cell.getBoundingClientRect()
+  const viewportRect = viewport.getBoundingClientRect()
+  const cellStyle = getComputedStyle(cell)
+  // The td centers its one line vertically (align-middle); the editor must
+  // put the text in exactly the same place or opening it shifts the value.
+  // Symmetric block padding sized to center one line does that for the
+  // textarea too, and keeps holding as it grows line by line.
+  const lineHeight =
+    Number.parseFloat(cellStyle.lineHeight) ||
+    Number.parseFloat(cellStyle.fontSize) * 1.5 ||
+    20
+  const centeredBlockPadding = Math.max(
+    Number.parseFloat(cellStyle.paddingTop) || 0,
+    (cellRect.height - lineHeight) / 2
+  )
+  return {
+    // Rect deltas are visual; when the viewport itself is the scroll
+    // container (the standalone virtual layout), absolute children live in
+    // content coordinates, so the scroll offset must be added back. The box
+    // matches the cell exactly - editing must not change the cell's
+    // geometry - and the cell's own overlay chrome hides for the session
+    // (data-cell-editing), so the editor's outline is the ONE border.
+    left: cellRect.left - viewportRect.left + viewport.scrollLeft,
+    top: cellRect.top - viewportRect.top + viewport.scrollTop,
+    width: cellRect.width,
+    minHeight: cellRect.height,
+    // The font shorthand can serialize empty (Firefox); the longhands after
+    // it win where set and cover that case.
+    font: cellStyle.font || undefined,
+    fontFamily: cellStyle.fontFamily,
+    fontSize: cellStyle.fontSize,
+    fontWeight: cellStyle.fontWeight,
+    fontStyle: cellStyle.fontStyle,
+    lineHeight: cellStyle.lineHeight,
+    letterSpacing: cellStyle.letterSpacing,
+    textAlign: cellStyle.textAlign as CSSProperties["textAlign"],
+    paddingLeft: cellStyle.paddingLeft,
+    paddingRight: cellStyle.paddingRight,
+    paddingTop: centeredBlockPadding,
+    paddingBottom: centeredBlockPadding,
+  }
+}
+
+function DataGridCellEditorOverlay({
+  viewport,
+  session,
+  enterAdvance,
+  onCommit,
+  onCancel,
+}: {
+  viewport: HTMLElement
+  session: DataGridEditorSession
+  enterAdvance: boolean
+  onCommit: (
+    raw: string,
+    advance: DataGridEditorAdvance,
+    refocus?: boolean
+  ) => void
+  onCancel: () => void
+}) {
+  // Measured lazily at first render: the focused td was committed before the
+  // session opened, and the overlay remounts per cell via its key, so one
+  // measurement holds for the editor's lifetime.
+  const [style] = useState<CSSProperties | null>(() =>
+    measureDataGridCellEditorStyle(viewport)
+  )
+  const finishedRef = useRef(false)
+
+  // The caret belongs at the END of the value (the Excel F2 convention);
+  // a textarea would otherwise open with it at position 0. Set on mount,
+  // before autoFocus lands, so the stored selection is already right.
+  const placeCaretAtEnd = (
+    element: HTMLInputElement | HTMLTextAreaElement | null
+  ) => {
+    if (!element) return
+    const end = element.value.length
+    element.setSelectionRange?.(end, end)
+  }
+
+  useEffect(() => {
+    if (!style) onCancel()
+  }, [style, onCancel])
+
+  // External row changes mid-edit (a live update, a re-sort) move or remove
+  // the cell underneath the overlay; the measured position is then a lie and
+  // a commit could land visually elsewhere. Cancel instead: predictable, and
+  // nothing is written that the user cannot see.
+  useEffect(() => {
+    const body = viewport.querySelector("tbody")
+    if (!body) return
+    const observer = new MutationObserver(() => {
+      if (!finishedRef.current) onCancel()
+    })
+    observer.observe(body, { childList: true, subtree: true })
+    return () => observer.disconnect()
+  }, [viewport, onCancel])
+
+  if (!style) return null
+
+  const finish = (
+    element: HTMLInputElement | HTMLTextAreaElement,
+    commit: boolean,
+    advance: DataGridEditorAdvance = null,
+    refocus = true
+  ) => {
+    // One finish per session: an Enter commit can be chased by the blur the
+    // unmount produces, and a doubled commit would write twice.
+    if (finishedRef.current) return
+    finishedRef.current = true
+    if (commit) onCommit(element.value, advance, refocus)
+    else onCancel()
+  }
+
+  const handleKeyDown = (
+    event: ReactKeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const element = event.currentTarget
+    if (event.key === "Escape") {
+      event.preventDefault()
+      event.stopPropagation()
+      finish(element, false)
+      return
+    }
+    if (event.key === "Tab") {
+      event.preventDefault()
+      finish(element, true, event.shiftKey ? "left" : "right")
+      return
+    }
+    if (event.key !== "Enter") return
+    // A textarea keeps Shift/Alt+Enter as a newline, the Sheets convention.
+    if (session.control === "textarea" && (event.shiftKey || event.altKey)) {
+      return
+    }
+    event.preventDefault()
+    // The default keeps focus on the edited cell, so a corrected value can
+    // be reviewed in place; enterAdvance restores the Sheets move-down.
+    finish(
+      element,
+      true,
+      enterAdvance ? (event.shiftKey ? "up" : "down") : null
+    )
+  }
+
+  // z-[35]: above the sticky pinned cells (zIndex 30), or editing a pinned
+  // cell renders invisibly underneath them; below the sticky header (z-40).
+  // Primary outline at the same 1px weight as the focused cell's box: with
+  // the overlay covering that box, opening the editor reads as the same
+  // border becoming editable.
+  const sharedClassName =
+    "text-foreground bg-background outline-primary absolute z-[35] box-border resize-none outline-1 outline-solid -outline-offset-1"
+
+  return createPortal(
+    session.control === "textarea" ? (
+      <textarea
+        data-slot="data-grid-cell-editor"
+        ref={placeCaretAtEnd}
+        autoFocus
+        aria-label={session.label}
+        defaultValue={session.initialValue}
+        rows={1}
+        style={style}
+        className={cn(sharedClassName, "field-sizing-content overflow-hidden")}
+        onKeyDown={handleKeyDown}
+        onBlur={(event) => finish(event.currentTarget, true, null, false)}
+      />
+    ) : (
+      <input
+        data-slot="data-grid-cell-editor"
+        ref={placeCaretAtEnd}
+        autoFocus
+        aria-label={session.label}
+        defaultValue={session.initialValue}
+        style={style}
+        className={sharedClassName}
+        onKeyDown={handleKeyDown}
+        onBlur={(event) => finish(event.currentTarget, true, null, false)}
+      />
+    ),
+    viewport
+  )
+}
+
+/* ------------------------------------------------------------------------- *
+ * Bulk edit bar.
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Thin shell over row selection for bulk actions: selected count, a slot for
+ * the consumer's controls, and a clear action. Hidden while nothing is
+ * selected. What the controls do stays consumer-owned.
+ *
+ * Presented as a floating toolbar, the Google Sheets way: auto width,
+ * centered, elevated, and sticky to the viewport bottom with breathing room,
+ * so bulk actions stay reachable while the grid scrolls.
+ */
+function DataGridSelectionBar({
+  children,
+  className,
+  label,
+  clearLabel = "Clear",
+  onClear,
+}: {
+  children?: ReactNode
+  className?: string
+  label?: (count: number) => ReactNode
+  clearLabel?: ReactNode
+  onClear?: () => void
+}) {
+  const context = useDataGrid()
+  const rowSelectionAtom = context.table.atoms.rowSelection
+  if (rowSelectionAtom == null) return null
+
+  return (
+    <Subscribe source={rowSelectionAtom}>
+      {() => {
+        // Read through the context getter: this closure re-runs on atom
+        // writes without re-rendering the component, and a captured v9
+        // wrapper would keep reporting the state it was built with.
+        const table = context.table
+        const count = table.getSelectedRowModel().rows.length
+        if (count === 0) return null
+        return (
+          <div
+            data-slot="data-grid-selection-bar"
+            className={cn(
+              "bg-background rounded-lg sticky inset-x-0 bottom-4 z-40 mx-auto flex w-fit max-w-[calc(100%-2rem)] flex-wrap items-center gap-3 border px-4 py-2.5 shadow-lg",
+              className
+            )}
+          >
+            <span className="text-foreground text-sm font-medium">
+              {label ? label(count) : `${count} selected`}
+            </span>
+            <div className="flex flex-1 flex-wrap items-center justify-end gap-2.5">
+              {children}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  context.table.resetRowSelection()
+                  onClear?.()
+                }}
+              >
+                {clearLabel}
+              </Button>
+            </div>
+          </div>
+        )
+      }}
+    </Subscribe>
+  )
+}
+
+export {
+  DataGridCellSelection,
+  DataGridSelectionBar,
+  buildDataGridClearDetails,
+  buildDataGridPasteDetails,
+  getDataGridActiveRegionGrid,
+  getDataGridVisibleSelectedCellCount,
+  invertDataGridCellsChange,
+  parseDataGridClipboardText,
+  serializeDataGridClipboardText,
+  tileDataGridClipboardBlock,
+}
+export type {
+  DataGridCellSelectionApi,
+  DataGridFocusCellOptions,
+  DataGridPasteTarget,
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx b/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx
index 38f19ca..1be3469 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx
@@ -2,6 +2,7 @@
 
 import { useMemo, useState } from "react"
 import { Badge } from "@/components/reui/badge"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
 import type { DataGridFeatures } from "@/components/reui/data-grid/data-grid"
 import type { Column } from "@tanstack/react-table"
 
@@ -31,6 +32,7 @@ function DataGridColumnFilter<TData extends object, TValue>({
   title,
   options,
 }: DataGridColumnFilterProps<TData, TValue>) {
+  const { i18n } = useDataGrid()
   const facets = column?.getFacetedUniqueValues()
   const filterValue = column?.getFilterValue()
   const selectedValues = new Set(
@@ -64,7 +66,7 @@ function DataGridColumnFilter<TData extends object, TValue>({
                 <div className="hidden space-x-1 lg:flex">
                   {selectedValues.size > 2 ? (
                     <Badge variant="secondary" className="px-1 font-normal">
-                      {selectedValues.size} selected
+                      {i18n.labels.filterSelectedCount(selectedValues.size)}
                     </Badge>
                   ) : (
                     options
@@ -97,7 +99,7 @@ function DataGridColumnFilter<TData extends object, TValue>({
         <div className="max-h-[300px] overflow-y-auto">
           {filteredOptions.length === 0 ? (
             <div className="text-muted-foreground py-6 text-center text-sm">
-              No results found.
+              {i18n.labels.filterNoResults}
             </div>
           ) : (
             <div className="p-1">
@@ -173,7 +175,7 @@ function DataGridColumnFilter<TData extends object, TValue>({
                   }}
                   className="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground rounded-md relative flex cursor-pointer items-center justify-center px-2 py-1.5 text-sm outline-hidden select-none"
                 >
-                  Clear filters
+                  {i18n.labels.filterClear}
                 </div>
               </div>
             </>
diff --git a/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx b/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx
index bfb5938..6071db7 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx
@@ -47,16 +47,22 @@ function DataGridColumnHeaderInner<TData extends object, TValue>({
   filter,
   visibility = false,
 }: DataGridColumnHeaderProps<TData, TValue>) {
-  const { isLoading, table, props } = useDataGrid()
+  const { i18n, isLoading, table, props } = useDataGrid()
   const resolvedTitle = title ?? getColumnHeaderLabel(column)
 
-  // TanStack's columnOrder defaults to [] until a consumer seeds it; fall
-  // back to the definition order so Move Left/Right work out of the box.
+  // The order a move rewrites: the consumer's columnOrder (TanStack defaults it
+  // to []), then every leaf it leaves out, in definition order - the same
+  // completion TanStack applies when rendering, so a rendered neighbour is
+  // always present to re-seat beside, even after columns are added later.
   const columnOrderState = table.state.columnOrder
-  const columnOrder =
-    columnOrderState.length > 0
-      ? columnOrderState
-      : table.getAllLeafColumns().map((leafColumn) => leafColumn.id)
+  const definitionOrder = table
+    .getAllColumns()
+    .flatMap((topColumn) => topColumn.getLeafColumns())
+    .map((leafColumn) => leafColumn.id)
+  const columnOrder = [
+    ...columnOrderState,
+    ...definitionOrder.filter((id) => !columnOrderState.includes(id)),
+  ]
   const columnVisibilityKey =
     props.tableLayout?.columnsVisibility && visibility
       ? JSON.stringify(table.state.columnVisibility)
@@ -67,9 +73,46 @@ function DataGridColumnHeaderInner<TData extends object, TValue>({
   const canPin = column.getCanPin()
   const canResize = column.getCanResize()
 
-  const columnIndex = columnOrder.indexOf(column.id)
-  const canMoveLeft = columnIndex > 0
-  const canMoveRight = columnIndex < columnOrder.length - 1
+  // Move neighbours come from what is RENDERED: the column's own pin bucket,
+  // visible columns only. Stepping through the raw columnOrder would trade
+  // places with a hidden or pinned column - an enabled click that moves nothing.
+  // With grouping in TanStack's default "reorder" mode, grouped columns render
+  // first whatever columnOrder says: they neither move nor serve as a target.
+  const groupedColumnMode = (
+    table.options as { groupedColumnMode?: false | "reorder" | "remove" }
+  ).groupedColumnMode
+  const isHoistedByGrouping = (target: object) =>
+    groupedColumnMode !== false &&
+    typeof (target as { getIsGrouped?: unknown }).getIsGrouped === "function" &&
+    (target as { getIsGrouped: () => boolean }).getIsGrouped()
+  const renderedPeers = (
+    isPinned === "start"
+      ? table.getStartVisibleLeafColumns()
+      : isPinned === "end"
+        ? table.getEndVisibleLeafColumns()
+        : table.getCenterVisibleLeafColumns()
+  )
+    .filter((leafColumn) => !isHoistedByGrouping(leafColumn))
+    .map((leafColumn) => leafColumn.id)
+  const renderedIndex = renderedPeers.indexOf(column.id)
+  const leftNeighbour =
+    renderedIndex > 0 ? renderedPeers[renderedIndex - 1] : undefined
+  const rightNeighbour =
+    renderedIndex !== -1 && renderedIndex < renderedPeers.length - 1
+      ? renderedPeers[renderedIndex + 1]
+      : undefined
+  const canMoveLeft = leftNeighbour !== undefined
+  const canMoveRight = rightNeighbour !== undefined
+
+  /** Re-seats this column beside a rendered neighbour; every other column,
+   * hidden or pinned ones included, keeps its place in the full order. */
+  const moveBeside = (neighbourId: string, side: "before" | "after") => {
+    const newOrder = columnOrder.filter((id) => id !== column.id)
+    const at = newOrder.indexOf(neighbourId)
+    if (at === -1) return
+    newOrder.splice(side === "before" ? at : at + 1, 0, column.id)
+    table.setColumnOrder(newOrder)
+  }
 
   const handleSort = () => {
     if (isSorted === "asc") {
@@ -139,7 +182,7 @@ function DataGridColumnHeaderInner<TData extends object, TValue>({
           disabled={!canSort}
         >
           <ArrowUpIcon className="size-3.5!" />
-          <span className="grow">Asc</span>
+          <span className="grow">{i18n.labels.sortAscending}</span>
           {isSorted === "asc" && (
             <CheckIcon className="text-primary size-4 opacity-100!" />
           )}
@@ -156,7 +199,7 @@ function DataGridColumnHeaderInner<TData extends object, TValue>({
           disabled={!canSort}
         >
           <ArrowDownIcon className="size-3.5!" />
-          <span className="grow">Desc</span>
+          <span className="grow">{i18n.labels.sortDescending}</span>
           {isSorted === "desc" && (
             <CheckIcon className="text-primary size-4 opacity-100!" />
           )}
@@ -176,7 +219,7 @@ function DataGridColumnHeaderInner<TData extends object, TValue>({
           onClick={() => column.pin(isPinned === "start" ? false : "start")}
         >
           <ArrowLeftToLineIcon className="size-3.5!" aria-hidden="true" />
-          <span className="grow">Pin to left</span>
+          <span className="grow">{i18n.labels.pinColumnStart}</span>
           {isPinned === "start" && (
             <CheckIcon className="text-primary size-4 opacity-100!" />
           )}
@@ -186,7 +229,7 @@ function DataGridColumnHeaderInner<TData extends object, TValue>({
           onClick={() => column.pin(isPinned === "end" ? false : "end")}
         >
           <ArrowRightToLineIcon className="size-3.5!" aria-hidden="true" />
-          <span className="grow">Pin to right</span>
+          <span className="grow">{i18n.labels.pinColumnEnd}</span>
           {isPinned === "end" && (
             <CheckIcon className="text-primary size-4 opacity-100!" />
           )}
@@ -204,32 +247,22 @@ function DataGridColumnHeaderInner<TData extends object, TValue>({
         <DropdownMenuItem
           key="move-left"
           onClick={() => {
-            if (columnIndex > 0) {
-              const newOrder = [...columnOrder]
-              const [movedColumn] = newOrder.splice(columnIndex, 1)
-              newOrder.splice(columnIndex - 1, 0, movedColumn)
-              table.setColumnOrder(newOrder)
-            }
+            if (leftNeighbour) moveBeside(leftNeighbour, "before")
           }}
           disabled={!canMoveLeft || isPinned !== false}
         >
           <ArrowLeftIcon className="size-3.5!" aria-hidden="true" />
-          <span>Move to Left</span>
+          <span>{i18n.labels.moveColumnStart}</span>
         </DropdownMenuItem>,
         <DropdownMenuItem
           key="move-right"
           onClick={() => {
-            if (columnIndex < columnOrder.length - 1) {
-              const newOrder = [...columnOrder]
-              const [movedColumn] = newOrder.splice(columnIndex, 1)
-              newOrder.splice(columnIndex + 1, 0, movedColumn)
-              table.setColumnOrder(newOrder)
-            }
+            if (rightNeighbour) moveBeside(rightNeighbour, "after")
           }}
           disabled={!canMoveRight || isPinned !== false}
         >
           <ArrowRightIcon className="size-3.5!" aria-hidden="true" />
-          <span>Move to Right</span>
+          <span>{i18n.labels.moveColumnEnd}</span>
         </DropdownMenuItem>
       )
       hasPreviousSection = true
@@ -244,7 +277,7 @@ function DataGridColumnHeaderInner<TData extends object, TValue>({
         <DropdownMenuSub key="visibility">
           <DropdownMenuSubTrigger>
             <Settings2Icon className="size-3.5!" />
-            <span>Columns</span>
+            <span>{i18n.labels.columnsMenu}</span>
           </DropdownMenuSubTrigger>
           <DropdownMenuSubContent side="right">
             {table
@@ -282,7 +315,8 @@ function DataGridColumnHeaderInner<TData extends object, TValue>({
     canMoveRight,
     visibility,
     table,
-    columnIndex,
+    leftNeighbour,
+    rightNeighbour,
     columnOrder,
     columnVisibilityKey, // Needed to update checkbox states when visibility changes
   ])
@@ -314,8 +348,8 @@ function DataGridColumnHeaderInner<TData extends object, TValue>({
             variant="ghost"
             className="rounded-lg -me-1 size-7"
             onClick={() => column.pin(false)}
-            aria-label={`Unpin ${resolvedTitle} column`}
-            title={`Unpin ${resolvedTitle} column`}
+            aria-label={i18n.labels.unpinColumn(resolvedTitle)}
+            title={i18n.labels.unpinColumn(resolvedTitle)}
           >
             <PinOffIcon className="size-3.5! opacity-50!" aria-hidden="true" />
           </Button>
diff --git a/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx b/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx
index 7743500..59acda5 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx
@@ -1,7 +1,10 @@
 "use client"
 
 import type { ReactElement } from "react"
-import { getColumnHeaderLabel } from "@/components/reui/data-grid/data-grid"
+import {
+  getColumnHeaderLabel,
+  useDataGrid,
+} from "@/components/reui/data-grid/data-grid"
 import type { DataGridFeatures } from "@/components/reui/data-grid/data-grid"
 import type { Table } from "@tanstack/react-table"
 
@@ -21,13 +24,15 @@ function DataGridColumnVisibility<TData extends object>({
   table: Table<DataGridFeatures, TData>
   trigger: ReactElement<Record<string, unknown>>
 }) {
+  const { i18n } = useDataGrid()
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger render={trigger} />
       <DropdownMenuContent align="end" className="min-w-[150px]">
         <DropdownMenuGroup>
           <DropdownMenuLabel className="font-medium">
-            Toggle Columns
+            {i18n.labels.toggleColumns}
           </DropdownMenuLabel>
           {table
             .getAllColumns()
diff --git a/apps/web/src/components/reui/data-grid/data-grid-i18n.tsx b/apps/web/src/components/reui/data-grid/data-grid-i18n.tsx
new file mode 100644
index 0000000..f7556e2
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-i18n.tsx
@@ -0,0 +1,99 @@
+export interface DataGridI18nLabels {
+  /* The column header menu. */
+  sortAscending: string
+  sortDescending: string
+  pinColumnStart: string
+  pinColumnEnd: string
+  moveColumnStart: string
+  moveColumnEnd: string
+  columnsMenu: string
+  unpinColumn: (title: string) => string
+  toggleColumns: string
+  /* Row and cell affordances. */
+  rowCreate: string
+  pinRow: string
+  unpinRow: string
+  selectRow: string
+  selectAll: string
+  expandRow: string
+  collapseRow: string
+  dragToReorder: string
+  dragToReorderRow: string
+  reorderingUnavailable: string
+  /* Grid states. */
+  loading: string
+  empty: string
+  allRowsLoaded: string
+  /* Pagination. */
+  rowsPerPage: string
+  paginationInfo: (info: { from: number; to: number; count: number }) => string
+  previousPage: string
+  nextPage: string
+  goToPage: (page: number) => string
+  paginationEllipsis: string
+  /* The faceted column filter. */
+  filterSelectedCount: (count: number) => string
+  filterNoResults: string
+  filterClear: string
+}
+
+export interface DataGridI18nConfig {
+  labels: DataGridI18nLabels
+}
+
+export type DataGridI18nOverrides = {
+  labels?: Partial<DataGridI18nLabels>
+}
+
+const DEFAULT_DATA_GRID_LABELS: DataGridI18nLabels = {
+  sortAscending: "Asc",
+  sortDescending: "Desc",
+  pinColumnStart: "Pin to left",
+  pinColumnEnd: "Pin to right",
+  moveColumnStart: "Move to left",
+  moveColumnEnd: "Move to right",
+  columnsMenu: "Columns",
+  unpinColumn: (title) => `Unpin ${title} column`,
+  toggleColumns: "Toggle Columns",
+  rowCreate: "Add row",
+  pinRow: "Pin row",
+  unpinRow: "Unpin row",
+  selectRow: "Select row",
+  selectAll: "Select all",
+  expandRow: "Expand row",
+  collapseRow: "Collapse row",
+  dragToReorder: "Drag to reorder",
+  dragToReorderRow: "Drag to reorder row",
+  reorderingUnavailable: "Reordering unavailable",
+  loading: "Loading...",
+  empty: "No data available",
+  allRowsLoaded: "All records loaded",
+  rowsPerPage: "Rows per page",
+  paginationInfo: ({ from, to, count }) => `${from} - ${to} of ${count}`,
+  previousPage: "Go to previous page",
+  nextPage: "Go to next page",
+  goToPage: (page) => `Go to page ${page}`,
+  paginationEllipsis: "...",
+  filterSelectedCount: (count) => `${count} selected`,
+  filterNoResults: "No results found.",
+  filterClear: "Clear filters",
+}
+
+const DEFAULT_DATA_GRID_I18N: DataGridI18nConfig = Object.freeze({
+  labels: Object.freeze(DEFAULT_DATA_GRID_LABELS),
+})
+
+/**
+ * A shallow merge per section, deliberately: a deep merge would leak a
+ * default back into a function-valued label the consumer replaced. With no
+ * overrides the frozen default is returned as-is, so the merge is free to
+ * run on every render without producing a new identity.
+ */
+export function mergeDataGridI18n(
+  overrides?: DataGridI18nOverrides
+): DataGridI18nConfig {
+  if (!overrides?.labels) return DEFAULT_DATA_GRID_I18N
+  return {
+    labels: { ...DEFAULT_DATA_GRID_LABELS, ...overrides.labels },
+  }
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx b/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
index 9cbc2f3..c1ce3b9 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
@@ -20,6 +20,8 @@ interface DataGridPaginationProps {
   sizesDescription?: string
   sizesSkeleton?: ReactNode
   more?: boolean
+  /** Page buttons the truncated middle shows; the row adds first, last and
+   *  an ellipsis for each hidden stretch. Clamped to a minimum of 3. */
   moreLimit?: number
   info?: string
   infoSkeleton?: ReactNode
@@ -30,19 +32,113 @@ interface DataGridPaginationProps {
   ellipsisText?: string
 }
 
+/**
+ * One slot in the page row: a page button, or an ellipsis that jumps over the
+ * pages it stands for.
+ */
+type DataGridPaginationItem =
+  | { type: "page"; index: number }
+  | { type: "ellipsis"; direction: "previous"; target: number }
+  | { type: "ellipsis"; direction: "next"; target: number }
+
+/**
+ * The adaptive window: first page, the run around the current one, last page,
+ * with an ellipsis standing in for each hidden stretch. It replaced fixed
+ * BLOCKS (1-5, then 6-10) because a block never shows the last page, so on a
+ * 50-page grid there was no way to reach the end - the primitive wires only
+ * `previousPage()` / `nextPage()`, so there is no last-page arrow either.
+ *
+ * `limit` is `moreLimit`: how many page buttons the truncated middle shows.
+ * At the default of 5 this emits exactly the same rows as the block version
+ * did at `moreLimit: 5`, so the prop keeps both its meaning and its default.
+ * An ellipsis never stands for a single page, because the early return covers
+ * every count a full row could hold.
+ */
+function getDataGridPaginationItems(
+  pageIndex: number,
+  pageCount: number,
+  limit: number
+): DataGridPaginationItem[] {
+  // Pages flanking the current one, per side. The run is rebuilt from it so
+  // the count is always odd: an even `limit` would make the head and tail
+  // rows one slot wider than the middle, and the footer would twitch as the
+  // user pages through.
+  const sibling = Math.max(0, Math.floor(((Math.floor(limit) || 3) - 3) / 2))
+  const pages = sibling * 2 + 3
+
+  // Two ellipses cost the width of two pages, so below this there is nothing
+  // to gain by hiding any.
+  if (pageCount <= pages + 2) {
+    return Array.from({ length: pageCount }, (_, index) => ({
+      type: "page" as const,
+      index,
+    }))
+  }
+
+  if (pageIndex <= sibling + 2) {
+    return [
+      ...Array.from({ length: pages }, (_, index) => ({
+        type: "page" as const,
+        index,
+      })),
+      { type: "ellipsis", direction: "next", target: pages },
+      { type: "page", index: pageCount - 1 },
+    ]
+  }
+
+  if (pageIndex >= pageCount - sibling - 3) {
+    return [
+      { type: "page", index: 0 },
+      {
+        type: "ellipsis",
+        direction: "previous",
+        target: pageCount - pages - 1,
+      },
+      ...Array.from({ length: pages }, (_, offset) => ({
+        type: "page" as const,
+        index: pageCount - pages + offset,
+      })),
+    ]
+  }
+
+  return [
+    { type: "page", index: 0 },
+    {
+      type: "ellipsis",
+      direction: "previous",
+      target: pageIndex - sibling - 1,
+    },
+    ...Array.from({ length: sibling * 2 + 1 }, (_, offset) => ({
+      type: "page" as const,
+      index: pageIndex - sibling + offset,
+    })),
+    { type: "ellipsis", direction: "next", target: pageIndex + sibling + 1 },
+    { type: "page", index: pageCount - 1 },
+  ]
+}
+
+/**
+ * A page button is square at one digit and grows from there, so the row does
+ * not reflow when the count crosses 10 or 100. The floor is each style's own
+ * `icon-sm` square, which is also its `sm` HEIGHT, so the numbers stay square
+ * and keep the arrows' height. Hardcoding one value would be right in three
+ * styles and wrong in five.
+ */
+const PAGE_BUTTON_WIDTH_CLASS =
+  "min-w-7"
+
 function DataGridPagination(props: DataGridPaginationProps): JSX.Element {
-  const { table, recordCount, isLoading } = useDataGrid()
+  const { i18n, table, recordCount, isLoading } = useDataGrid()
 
   const defaultProps: Partial<DataGridPaginationProps> = {
     sizes: [5, 10, 25, 50, 100],
     sizesSkeleton: <Skeleton className="h-8 w-44" />,
     moreLimit: 5,
-    info: "{from} - {to} of {count}",
     infoSkeleton: <Skeleton className="h-8 w-60" />,
-    rowsPerPageLabel: "Rows per page",
-    previousPageLabel: "Go to previous page",
-    nextPageLabel: "Go to next page",
-    ellipsisText: "...",
+    rowsPerPageLabel: i18n.labels.rowsPerPage,
+    previousPageLabel: i18n.labels.previousPage,
+    nextPageLabel: i18n.labels.nextPage,
+    ellipsisText: i18n.labels.paginationEllipsis,
   }
 
   const mergedProps: DataGridPaginationProps = { ...defaultProps, ...props }
@@ -55,84 +151,21 @@ function DataGridPagination(props: DataGridPaginationProps): JSX.Element {
   const to = Math.min((pageIndex + 1) * pageSize, recordCount)
   const pageCount = table.getPageCount()
 
-  // Replace placeholders in paginationInfo
+  // A supplied `info` keeps its placeholder-template contract; the default
+  // routes through the i18n label function, where word order is free.
   const paginationInfo = mergedProps.info
     ? mergedProps.info
         .replaceAll("{from}", from.toString())
         .replaceAll("{to}", to.toString())
         .replaceAll("{count}", recordCount.toString())
-    : `${from} - ${to} of ${recordCount}`
+    : i18n.labels.paginationInfo({ from, to, count: recordCount })
 
-  // Pagination limit logic
-  const paginationMoreLimit = mergedProps.moreLimit || 5
-
-  // Determine the start and end of the pagination group
-  const currentGroupStart =
-    Math.floor(pageIndex / paginationMoreLimit) * paginationMoreLimit
-  const currentGroupEnd = Math.min(
-    currentGroupStart + paginationMoreLimit,
-    pageCount
+  const paginationItems = getDataGridPaginationItems(
+    pageIndex,
+    pageCount,
+    mergedProps.moreLimit ?? 5
   )
 
-  // Render page buttons based on the current group
-  const renderPageButtons = () => {
-    const buttons = []
-    for (let i = currentGroupStart; i < currentGroupEnd; i++) {
-      buttons.push(
-        <Button
-          key={i}
-          size="icon-sm"
-          variant="ghost"
-          className={cn(btnBaseClasses, "text-muted-foreground", {
-            "bg-accent text-accent-foreground": pageIndex === i,
-          })}
-          onClick={() => {
-            if (pageIndex !== i) {
-              table.setPageIndex(i)
-            }
-          }}
-        >
-          {i + 1}
-        </Button>
-      )
-    }
-    return buttons
-  }
-
-  // Render a "previous" ellipsis button if there are previous pages to show
-  const renderEllipsisPrevButton = () => {
-    if (currentGroupStart > 0) {
-      return (
-        <Button
-          size="icon-sm"
-          className={btnBaseClasses}
-          variant="ghost"
-          onClick={() => table.setPageIndex(currentGroupStart - 1)}
-        >
-          {mergedProps.ellipsisText}
-        </Button>
-      )
-    }
-    return null
-  }
-
-  // Render a "next" ellipsis button if there are more pages to show after the current group
-  const renderEllipsisNextButton = () => {
-    if (currentGroupEnd < pageCount) {
-      return (
-        <Button
-          className={btnBaseClasses}
-          variant="ghost"
-          size="icon-sm"
-          onClick={() => table.setPageIndex(currentGroupEnd)}
-        >
-          {mergedProps.ellipsisText}
-        </Button>
-      )
-    }
-    return null
-  }
-
   return (
     <div
       data-slot="data-grid-pagination"
@@ -156,7 +189,15 @@ function DataGridPagination(props: DataGridPaginationProps): JSX.Element {
                 table.setPageSize(newPageSize)
               }}
             >
-              <SelectTrigger className="w-16" size="sm">
+              {/* w-fit with a min, never a fixed width: a fixed w-16 clipped
+                  the value "100" by 1px at nova's paddings, while fit-content
+                  grows the trigger for 3-digit sizes and the min keeps the
+                  1-2 digit ones from collapsing narrower than 64px. */}
+              <SelectTrigger
+                aria-label={mergedProps.rowsPerPageLabel}
+                className="w-fit min-w-16"
+                size="sm"
+              >
                 <SelectValue />
               </SelectTrigger>
               <SelectContent
@@ -183,7 +224,7 @@ function DataGridPagination(props: DataGridPaginationProps): JSX.Element {
               {paginationInfo}
             </div>
             {pageCount > 1 && (
-              <div className="order-1 flex items-center space-x-1">
+              <div className="order-1 flex flex-wrap items-center justify-center gap-1 sm:flex-nowrap">
                 <Button
                   size="icon-sm"
                   variant="ghost"
@@ -197,11 +238,49 @@ function DataGridPagination(props: DataGridPaginationProps): JSX.Element {
                   <ChevronLeftIcon className="size-4" />
                 </Button>
 
-                {renderEllipsisPrevButton()}
-
-                {renderPageButtons()}
-
-                {renderEllipsisNextButton()}
+                {paginationItems.map((item) =>
+                  item.type === "page" ? (
+                    <Button
+                      key={`page-${item.index}`}
+                      size="sm"
+                      variant="ghost"
+                      aria-label={i18n.labels.goToPage(item.index + 1)}
+                      aria-current={
+                        pageIndex === item.index ? "page" : undefined
+                      }
+                      className={cn(
+                        PAGE_BUTTON_WIDTH_CLASS,
+                        "px-1.5 text-sm",
+                        "text-muted-foreground",
+                        {
+                          "bg-accent text-accent-foreground":
+                            pageIndex === item.index,
+                        }
+                      )}
+                      onClick={() => {
+                        if (pageIndex !== item.index) {
+                          table.setPageIndex(item.index)
+                        }
+                      }}
+                    >
+                      {item.index + 1}
+                    </Button>
+                  ) : (
+                    /* Clickable, unlike the shadcn PaginationEllipsis, which is
+                       an aria-hidden span. This one MOVES the user, so it needs
+                       a name saying where. */
+                    <Button
+                      key={`ellipsis-${item.direction}`}
+                      size="icon-sm"
+                      className={btnBaseClasses}
+                      variant="ghost"
+                      aria-label={i18n.labels.goToPage(item.target + 1)}
+                      onClick={() => table.setPageIndex(item.target)}
+                    >
+                      {mergedProps.ellipsisText}
+                    </Button>
+                  )
+                )}
 
                 <Button
                   size="icon-sm"
diff --git a/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx b/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx
index 96adad9..1bf6656 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx
@@ -19,8 +19,11 @@ const INITIAL_METRICS = {
   trackHeight: 0,
 } as const
 
+// Track footprint, measured: horizontal is 8px tall and vertical 6px wide, and
+// each loses 1px to its transparent border plus 2px to p-px, so the thumbs land
+// at 5px and 3px. Shrink these further and the thumb stops being a grab target.
 const SCROLLBAR_CLASSNAME =
-  "flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent"
+  "flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent"
 
 const SCROLLBAR_THUMB_CLASSNAME = "bg-border rounded-full relative flex-1"
 
@@ -454,12 +457,12 @@ function DataGridScrollArea({
           className="pointer-events-none absolute inset-e-0 top-(--data-grid-scrollbar-header-height) z-20 h-(--data-grid-scrollbar-track-height)"
         >
           <div
-            className="pointer-events-auto relative h-full w-2 touch-none p-px"
+            className="pointer-events-auto relative h-full w-1.5 touch-none p-px"
             onPointerDown={handleTrackPointerDown}
           >
             <div
               className={cn(
-                "bg-border absolute end-px w-2",
+                "bg-border absolute end-px w-1.5",
                 "top-(--data-grid-scrollbar-thumb-top) h-(--data-grid-scrollbar-thumb-height)",
                 "rounded-full"
               )}
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx b/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx
index 855c587..bc77da5 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import {
   createContext,
   memo,
@@ -105,7 +107,7 @@ type DataGridTableDndRowDecoration<TData extends object> = (context: {
 function DataGridTableDndRowHandle({
   className,
   disabled,
-  disabledLabel = "Reordering unavailable",
+  disabledLabel,
 }: {
   className?: string
   /**
@@ -118,7 +120,10 @@ function DataGridTableDndRowHandle({
   /** Announced and shown on hover in place of the drag affordance. */
   disabledLabel?: string
 }) {
+  const { i18n } = useDataGrid()
   const context = useContext(SortableRowContext)
+  const resolvedDisabledLabel =
+    disabledLabel ?? i18n.labels.reorderingUnavailable
 
   if (!context || disabled) {
     return (
@@ -133,8 +138,8 @@ function DataGridTableDndRowHandle({
           disabled && "cursor-not-allowed",
           className
         )}
-        aria-label={disabled ? disabledLabel : "Drag to reorder row"}
-        title={disabled ? disabledLabel : undefined}
+        aria-label={disabled ? resolvedDisabledLabel : i18n.labels.dragToReorderRow}
+        title={disabled ? resolvedDisabledLabel : undefined}
         disabled
       >
         <GripHorizontalIcon aria-hidden="true" />
@@ -150,7 +155,7 @@ function DataGridTableDndRowHandle({
         "size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing",
         className
       )}
-      aria-label="Drag to reorder row"
+      aria-label={i18n.labels.dragToReorderRow}
       {...context.attributes}
       {...context.listeners}
     >
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx b/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx
index 4ca6bdc..813da80 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import {
   Fragment,
   memo,
@@ -69,7 +67,7 @@ function DataGridTableDndHeader<TData extends object>({
 }: {
   header: Header<DataGridFeatures, TData, unknown>
 }) {
-  const { props } = useDataGrid()
+  const { i18n, props } = useDataGrid()
   const { column } = header
 
   // Check if column ordering is enabled for this column
@@ -115,7 +113,7 @@ function DataGridTableDndHeader<TData extends object>({
             className={`-ms-2 size-6 ${isDragging ? "cursor-grabbing" : "cursor-grab active:cursor-grabbing"}`}
             {...attributes}
             {...listeners}
-            aria-label="Drag to reorder"
+            aria-label={i18n.labels.dragToReorder}
           >
             <GripVerticalIcon className="opacity-60 hover:opacity-100" aria-hidden="true" />
           </Button>
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx b/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx
index 4b6645b..104ac30 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useRef, useState } from "react"
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import type { CSSProperties, ReactNode } from "react"
 import { useDataGrid } from "@/components/reui/data-grid/data-grid"
 import type {
@@ -6,6 +6,7 @@ import type {
   DataGridTableInstance,
 } from "@/components/reui/data-grid/data-grid"
 import {
+  DataGridTableAddRow,
   DataGridTableBase,
   DataGridTableBody,
   DataGridTableEmpty,
@@ -49,6 +50,33 @@ type DataGridTableVirtualizerInstance = Virtualizer<
 
 type DataGridTableVirtualScrollAlignment = "auto" | "center" | "start" | "end"
 
+interface DataGridTableColumnVirtualizerOptions {
+  /** Off unless explicitly true; a column window is opt-in. */
+  enabled?: boolean
+  overscan?: number
+}
+
+type DataGridTableColumnScrollRequest = {
+  align: DataGridTableVirtualScrollAlignment
+  behavior: ScrollBehavior
+  columnId: string | undefined
+  columnIndex: number
+  scrollElement: HTMLElement
+}
+
+function isSameDataGridTableColumnScrollRequest(
+  previous: DataGridTableColumnScrollRequest | null,
+  next: DataGridTableColumnScrollRequest
+) {
+  return (
+    previous?.align === next.align &&
+    previous.behavior === next.behavior &&
+    previous.columnId === next.columnId &&
+    previous.columnIndex === next.columnIndex &&
+    previous.scrollElement === next.scrollElement
+  )
+}
+
 type DataGridTableVirtualScrollRequest = {
   align: DataGridTableVirtualScrollAlignment
   behavior: ScrollBehavior
@@ -267,6 +295,17 @@ interface DataGridTableVirtualProps<TData extends object> {
   scrollToRowAlign?: DataGridTableVirtualScrollAlignment
   /** Index within the center (non-pinned) row section to reveal. */
   scrollToRowIndex?: number
+  /**
+   * Opt-in horizontal virtualization of the CENTER columns. Activates only
+   * under a fixed table layout with a single ungrouped header row; pinned
+   * columns stay mounted, and anything else falls back to full-column
+   * rendering. `scrollBehavior` is shared with controlled row scrolling.
+   */
+  columnVirtualizerOptions?: DataGridTableColumnVirtualizerOptions
+  /** Alignment used when revealing a controlled target column. */
+  scrollToColumnAlign?: DataGridTableVirtualScrollAlignment
+  /** Index within the center (non-pinned) visible leaf columns to reveal. */
+  scrollToColumnIndex?: number
   footerContent?: ReactNode
   renderHeader?: boolean
   onFetchMore?: () => void
@@ -290,6 +329,7 @@ interface VirtualBodyProps<TData extends object> {
   loadingMoreMessage: ReactNode
   allRowsLoadedMessage: ReactNode
   measureRowRef?: (element: HTMLTableRowElement | null) => void
+  centerColumnWindow?: { start: number; end: number }
 }
 
 function DataGridTableVirtualPinnedPlaceholderCell<TData extends object>({
@@ -424,6 +464,24 @@ function DataGridTableVirtualStatusRow<TData extends object>({
   )
 }
 
+/**
+ * A scroll frame only shifts the window, so every surviving row's inputs are
+ * identical and its last render is reused; the per-frame cost is the rows
+ * entering the window, not all mounted rows. Cell-level state (selection,
+ * focus, row checks) repaints through each cell's own Subscribe, and any real
+ * data change rebuilds the row wrappers, so identity comparison is safe.
+ */
+const MemoizedRenderedRow = memo(
+  DataGridTableRenderedRow,
+  (prev, next) =>
+    prev.row === next.row &&
+    prev.rowIndex === next.rowIndex &&
+    prev.rowRef === next.rowRef &&
+    prev.pinnedBoundary === next.pinnedBoundary &&
+    prev.centerWindow?.start === next.centerWindow?.start &&
+    prev.centerWindow?.end === next.centerWindow?.end
+) as typeof DataGridTableRenderedRow
+
 function DataGridTableVirtualBody<TData extends object>({
   table,
   topRows,
@@ -438,6 +496,7 @@ function DataGridTableVirtualBody<TData extends object>({
   loadingMoreMessage,
   allRowsLoadedMessage,
   measureRowRef,
+  centerColumnWindow,
 }: VirtualBodyProps<TData>) {
   const { isLoading } = useDataGrid()
   const totalRows = topRows.length + centerRows.length + bottomRows.length
@@ -479,9 +538,10 @@ function DataGridTableVirtualBody<TData extends object>({
 
   topRows.forEach((row, index) => {
     renderedRows.push(
-      <DataGridTableRenderedRow
+      <MemoizedRenderedRow
         key={row.id}
         row={row}
+        centerWindow={centerColumnWindow}
         pinnedBoundary={
           index === topRows.length - 1 && hasMiddleSection ? "top" : undefined
         }
@@ -506,11 +566,12 @@ function DataGridTableVirtualBody<TData extends object>({
       if (!row) return
 
       renderedRows.push(
-        <DataGridTableRenderedRow
+        <MemoizedRenderedRow
           key={row.id}
           row={row}
           rowRef={measureRowRef}
           rowIndex={virtualRow.index}
+          centerWindow={centerColumnWindow}
         />
       )
     })
@@ -527,7 +588,12 @@ function DataGridTableVirtualBody<TData extends object>({
   } else {
     centerRows.forEach((row, rowIndex) => {
       renderedRows.push(
-        <DataGridTableRenderedRow key={row.id} row={row} rowIndex={rowIndex} />
+        <MemoizedRenderedRow
+          key={row.id}
+          row={row}
+          rowIndex={rowIndex}
+          centerWindow={centerColumnWindow}
+        />
       )
     })
   }
@@ -557,9 +623,10 @@ function DataGridTableVirtualBody<TData extends object>({
 
   bottomRows.forEach((row, index) => {
     renderedRows.push(
-      <DataGridTableRenderedRow
+      <MemoizedRenderedRow
         key={row.id}
         row={row}
+        centerWindow={centerColumnWindow}
         pinnedBoundary={
           index === 0 && (topRows.length > 0 || hasMiddleSection)
             ? "bottom"
@@ -576,10 +643,15 @@ function DataGridTableVirtualBody<TData extends object>({
  * Memoized virtual body: skip re-renders during active column resize.
  * Column widths update via CSS variables on the <table> element,
  * so the browser handles width changes without React re-renders.
+ * A cell-selection drag gets the same treatment: painting goes through each
+ * cell's own Subscribe, and the virtualizer re-renders itself from inside the
+ * memo boundary, so parent-driven reconciliation during the drag is waste.
  */
 const MemoizedVirtualBody = memo(
   DataGridTableVirtualBody,
-  (_prev, next) => !!next.table.state.columnResizing.isResizingColumn
+  (_prev, next) =>
+    !!next.table.state.columnResizing.isResizingColumn ||
+    next.table._isSelectingCells === true
 ) as typeof DataGridTableVirtualBody
 
 function DataGridTableVirtual<TData extends object>({
@@ -589,6 +661,9 @@ function DataGridTableVirtual<TData extends object>({
   scrollBehavior = "auto",
   scrollToRowAlign = "auto",
   scrollToRowIndex,
+  columnVirtualizerOptions,
+  scrollToColumnAlign = "auto",
+  scrollToColumnIndex,
   footerContent,
   renderHeader = true,
   onFetchMore,
@@ -597,9 +672,22 @@ function DataGridTableVirtual<TData extends object>({
   fetchMoreOffset = 0,
   virtualizerOptions,
 }: DataGridTableVirtualProps<TData>) {
-  const { table, props } = useDataGrid<TData>()
+  const { i18n, table, props } = useDataGrid<TData>()
   const mergedHeaderGroups = getDataGridTableMergedHeaderGroups(table)
   const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table)
+  const centerVisibleColumns = table.getCenterVisibleLeafColumns()
+  // Column windows only where the geometry is provable: a fixed table
+  // layout (undefined defaults to fixed; the colgroup then owns every
+  // width, so colSpan spacers cannot drift) and a single ungrouped header
+  // row (a colSpan group cannot be windowed). Anything else falls back to
+  // full-column rendering silently, the same posture as row virtualization
+  // toward unsupported shapes.
+  const columnVirtualizationActive =
+    columnVirtualizerOptions?.enabled === true &&
+    props.tableLayout?.width !== "auto" &&
+    mergedHeaderGroups.length === 1 &&
+    (mergedHeaderGroups[0]?.headers.every((header) => header.colSpan <= 1) ??
+      false)
   const { topRows, centerRows, bottomRows } = getDataGridTableRowSections(
     table,
     props.tableLayout?.rowsPinnable
@@ -622,9 +710,9 @@ function DataGridTableVirtual<TData extends object>({
 
   const isVirtualizationEnabled = virtualizerOptions?.enabled !== false
   const loadingMoreMessage =
-    props.fetchingMoreMessage || props.loadingMessage || "Loading..."
+    props.fetchingMoreMessage || props.loadingMessage || i18n.labels.loading
   const allRowsLoadedMessage =
-    props.allRowsLoadedMessage || "All records loaded"
+    props.allRowsLoadedMessage || i18n.labels.allRowsLoaded
 
   const handleViewportRef = useCallback((node: HTMLDivElement | null) => {
     setViewportElements({
@@ -679,6 +767,69 @@ function DataGridTableVirtual<TData extends object>({
     ...virtualizerOptionsRest,
   }) as DataGridTableVirtualizerInstance
 
+  // Horizontal offsets invert in RTL; the virtualizer must be told.
+  const isRtl = useMemo(
+    () =>
+      viewportElements.containerElement
+        ? getComputedStyle(viewportElements.containerElement).direction ===
+          "rtl"
+        : false,
+    [viewportElements.containerElement]
+  )
+
+  const resolveColumnKey = useCallback(
+    (index: number) => centerVisibleColumns[index]?.id ?? index,
+    [centerVisibleColumns]
+  )
+
+  const resolveColumnEstimateSize = useCallback(
+    (index: number) => centerVisibleColumns[index]?.getSize() ?? 0,
+    [centerVisibleColumns]
+  )
+
+  const columnVirtualizer = useVirtualizer({
+    horizontal: true,
+    isRtl,
+    count: columnVirtualizationActive ? centerVisibleColumns.length : 0,
+    getScrollElement: resolveScrollElement,
+    getItemKey: resolveColumnKey,
+    estimateSize: resolveColumnEstimateSize,
+    overscan: columnVirtualizerOptions?.overscan ?? 3,
+  })
+
+  // Column sizes are exact reads of getSize(), never DOM-measured, so a
+  // resize commit or a visibility/order/pinning change must resync the
+  // virtualizer's cached sizes by hand.
+  useEffect(() => {
+    if (columnVirtualizationActive) columnVirtualizer.measure()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    columnVirtualizationActive,
+    columnVirtualizer,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    table.state.columnSizing,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    table.state.columnVisibility,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    table.state.columnOrder,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    table.state.columnPinning,
+  ])
+
+  const virtualColumns = columnVirtualizationActive
+    ? columnVirtualizer.getVirtualItems()
+    : []
+  // The window is a contiguous inclusive [start, end] over the center
+  // columns; before the scroll element resolves the item list is empty and
+  // the grid renders full-width for that first frame.
+  const centerColumnWindow =
+    columnVirtualizationActive && virtualColumns.length > 0
+      ? {
+          start: virtualColumns[0]!.index,
+          end: virtualColumns[virtualColumns.length - 1]!.index,
+        }
+      : undefined
+
   const virtualItems = isVirtualizationEnabled
     ? virtualizer.getVirtualItems()
     : []
@@ -705,6 +856,51 @@ function DataGridTableVirtual<TData extends object>({
   // before the consumer flips isFetchingMore, and loops at end-of-data when
   // hasMore is never set.
   const fetchMoreFiredAtCountRef = useRef<number | null>(null)
+  const lastColumnScrollRequestRef =
+    useRef<DataGridTableColumnScrollRequest | null>(null)
+
+  // Controlled column reveal: same dedupe posture as the row request - the
+  // signature keeps ordinary renders from re-scrolling, and exact column
+  // sizes mean no post-measure follow-up pass is needed.
+  useEffect(() => {
+    if (
+      !columnVirtualizationActive ||
+      scrollToColumnIndex === undefined ||
+      scrollToColumnIndex < 0 ||
+      scrollToColumnIndex >= centerVisibleColumns.length ||
+      !viewportElements.scrollElement
+    ) {
+      return
+    }
+    const request: DataGridTableColumnScrollRequest = {
+      align: scrollToColumnAlign,
+      behavior: scrollBehavior,
+      columnId: centerVisibleColumns[scrollToColumnIndex]?.id,
+      columnIndex: scrollToColumnIndex,
+      scrollElement: viewportElements.scrollElement,
+    }
+    if (
+      isSameDataGridTableColumnScrollRequest(
+        lastColumnScrollRequestRef.current,
+        request
+      )
+    ) {
+      return
+    }
+    lastColumnScrollRequestRef.current = request
+    columnVirtualizer.scrollToIndex(scrollToColumnIndex, {
+      align: scrollToColumnAlign,
+      behavior: scrollBehavior === "smooth" ? "smooth" : "auto",
+    })
+  }, [
+    columnVirtualizationActive,
+    columnVirtualizer,
+    centerVisibleColumns,
+    scrollToColumnAlign,
+    scrollToColumnIndex,
+    scrollBehavior,
+    viewportElements.scrollElement,
+  ])
 
   // Resolve after every commit so a stable getter can expose a replaced ref;
   // the request signature prevents duplicate scrolling on ordinary renders.
@@ -847,30 +1043,79 @@ function DataGridTableVirtual<TData extends object>({
     virtualItems,
   ])
 
-  return (
-    <DataGridTableViewport
-      viewportRef={handleViewportRef}
-      className={!usesExternalScrollArea ? "block" : undefined}
-      style={
-        usesExternalScrollArea
-          ? undefined
-          : {
-              height,
-              overflow: "auto",
-              position: "relative",
-              // Standalone mode: this node IS the scroll container, so it
-              // must stay at its parent's width (not the resizable table
-              // width) or horizontal scrolling becomes impossible.
-              width: "auto",
-            }
-      }
-    >
-      <DataGridTableBase>
-        {renderHeader && (
-          <DataGridTableHead>
-            {mergedHeaderGroups.map((headerGroup) => (
-              <DataGridTableHeadRow key={headerGroup.id} rowId={headerGroup.id}>
-                {headerGroup.headers
+  // The header re-renders only when its real inputs move: the table
+  // wrapper (any table state change recreates it), the layout props, and
+  // the column window. A scroll frame changes none of them, so the whole
+  // sortable-header subtree is reused instead of rebuilt per frame.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const headerNode = useMemo(
+    () =>
+      renderHeader && (
+        <DataGridTableHead>
+          {mergedHeaderGroups.map((headerGroup) => (
+            <DataGridTableHeadRow key={headerGroup.id} rowId={headerGroup.id}>
+              {/* Under an active column window the single ungrouped header
+                        row is bucketed start / windowed center / end, with each
+                        off-window flank one colSpan spacer sized by the intact
+                        colgroup - the same shape the body rows take. */}
+              {centerColumnWindow
+                ? headerGroup.headers
+                    .filter((header) => header.column.getIsPinned() === "start")
+                    .map((header) => (
+                      <DataGridTableHeadRowCell header={header} key={header.id}>
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                        {props.tableLayout?.columnsResizable &&
+                          header.column.getCanResize() && (
+                            <DataGridTableHeadRowCellResize header={header} />
+                          )}
+                      </DataGridTableHeadRowCell>
+                    ))
+                : null}
+              {centerColumnWindow && centerColumnWindow.start > 0 ? (
+                <th
+                  aria-hidden="true"
+                  data-slot="data-grid-table-virtual-col-spacer"
+                  colSpan={centerColumnWindow.start}
+                  className="p-0"
+                />
+              ) : null}
+              {centerColumnWindow
+                ? headerGroup.headers
+                    .filter((header) => !header.column.getIsPinned())
+                    .slice(centerColumnWindow.start, centerColumnWindow.end + 1)
+                    .map((header) => (
+                      <DataGridTableHeadRowCell header={header} key={header.id}>
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                        {props.tableLayout?.columnsResizable &&
+                          header.column.getCanResize() && (
+                            <DataGridTableHeadRowCellResize header={header} />
+                          )}
+                      </DataGridTableHeadRowCell>
+                    ))
+                : null}
+              {centerColumnWindow &&
+              centerVisibleColumns.length - 1 - centerColumnWindow.end > 0 ? (
+                <th
+                  aria-hidden="true"
+                  data-slot="data-grid-table-virtual-col-spacer"
+                  colSpan={
+                    centerVisibleColumns.length - 1 - centerColumnWindow.end
+                  }
+                  className="p-0"
+                />
+              ) : null}
+              {!centerColumnWindow &&
+                headerGroup.headers
                   .filter((header) => header.column.getIsPinned() !== "end")
                   .map((header) => {
                     const { column } = header
@@ -890,38 +1135,66 @@ function DataGridTableVirtual<TData extends object>({
                       </DataGridTableHeadRowCell>
                     )
                   })}
-                {props.tableLayout?.columnsResizable &&
-                hasRightPinnedColumns ? (
-                  <DataGridTableFillHeadCell />
-                ) : null}
-                {headerGroup.headers
-                  .filter((header) => header.column.getIsPinned() === "end")
-                  .map((header) => {
-                    const { column } = header
+              {props.tableLayout?.columnsResizable && hasRightPinnedColumns ? (
+                <DataGridTableFillHeadCell />
+              ) : null}
+              {headerGroup.headers
+                .filter((header) => header.column.getIsPinned() === "end")
+                .map((header) => {
+                  const { column } = header
 
-                    return (
-                      <DataGridTableHeadRowCell header={header} key={header.id}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                        {props.tableLayout?.columnsResizable &&
-                          column.getCanResize() && (
-                            <DataGridTableHeadRowCellResize header={header} />
+                  return (
+                    <DataGridTableHeadRowCell header={header} key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
                           )}
-                      </DataGridTableHeadRowCell>
-                    )
-                  })}
-                {props.tableLayout?.columnsResizable &&
-                !hasRightPinnedColumns ? (
-                  <DataGridTableFillHeadCell />
-                ) : null}
-              </DataGridTableHeadRow>
-            ))}
-          </DataGridTableHead>
-        )}
+                      {props.tableLayout?.columnsResizable &&
+                        column.getCanResize() && (
+                          <DataGridTableHeadRowCellResize header={header} />
+                        )}
+                    </DataGridTableHeadRowCell>
+                  )
+                })}
+              {props.tableLayout?.columnsResizable && !hasRightPinnedColumns ? (
+                <DataGridTableFillHeadCell />
+              ) : null}
+            </DataGridTableHeadRow>
+          ))}
+        </DataGridTableHead>
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      renderHeader,
+      table,
+      props.tableLayout,
+      centerColumnWindow,
+      hasRightPinnedColumns,
+    ]
+  )
+
+  return (
+    <DataGridTableViewport
+      viewportRef={handleViewportRef}
+      className={!usesExternalScrollArea ? "block" : undefined}
+      style={
+        usesExternalScrollArea
+          ? undefined
+          : {
+              height,
+              overflow: "auto",
+              position: "relative",
+              // Standalone mode: this node IS the scroll container, so it
+              // must stay at its parent's width (not the resizable table
+              // width) or horizontal scrolling becomes impossible.
+              width: "auto",
+            }
+      }
+    >
+      <DataGridTableBase>
+        {headerNode}
 
         {renderHeader &&
           (props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (
@@ -943,7 +1216,12 @@ function DataGridTableVirtual<TData extends object>({
             loadingMoreMessage={loadingMoreMessage}
             allRowsLoadedMessage={allRowsLoadedMessage}
             measureRowRef={measureRowRef}
+            centerColumnWindow={centerColumnWindow}
           />
+          {/* Same appended region as the standard body, so onRowCreate and
+              a consumer draft work in the virtual layout too. */}
+          {props.appendRow}
+          <DataGridTableAddRow />
         </DataGridTableBody>
 
         {footerContent && (
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table.tsx b/apps/web/src/components/reui/data-grid/data-grid-table.tsx
index d1ecc0d..31599d2 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-table.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-table.tsx
@@ -17,17 +17,24 @@ import type {
   Ref,
   RefObject,
 } from "react"
-import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import {
+  dataGridCellSelectionCellClasses,
+  getDataGridCellSelectionCellAttrs,
+  toDataGridDomId,
+  useDataGrid,
+} from "@/components/reui/data-grid/data-grid"
 import type {
   DataGridFeatures,
   DataGridTableInstance,
 } from "@/components/reui/data-grid/data-grid"
 import { flexRender, Subscribe } from "@tanstack/react-table"
 import type { Cell, Column, Header, Row, Table } from "@tanstack/react-table"
-
 import { cn } from "@evobgp/ui/lib/utils"
+
+import { Button } from "@evobgp/ui/components/button"
 import { Checkbox } from "@evobgp/ui/components/checkbox"
 import { Spinner } from "@evobgp/ui/components/spinner"
+import { PlusIcon } from "lucide-react"
 
 // Static spacing lookups; called once per cell, so they stay plain string
 // picks instead of runtime variant machinery.
@@ -37,6 +44,19 @@ const headerCellSpacingVariants = ({ size }: { size?: "dense" | "default" }) =>
 const bodyCellSpacingVariants = ({ size }: { size?: "dense" | "default" }) =>
   size === "dense" ? "px-2 py-1.5" : "px-3 py-2"
 
+// The truncation wrapper used when cell selection is on: it consumes the
+// td padding with negative margins and restores it as its own, so its
+// overflow clips at exactly the boundary the td's `truncate` used to clip
+// at - including custom cells that pull into the padding the same way.
+const bodyCellTruncateWrapVariants = ({
+  size,
+}: {
+  size?: "dense" | "default"
+}) =>
+  size === "dense"
+    ? "-mx-2 -my-1.5 truncate px-2 py-1.5"
+    : "-mx-3 -my-2 truncate px-3 py-2"
+
 const footerCellSpacingVariants = ({ size }: { size?: "dense" | "default" }) =>
   size === "dense" ? "px-2 py-1.5" : "px-3 py-2"
 
@@ -104,14 +124,14 @@ function getDataGridScrollAreaViewport(node: HTMLElement): HTMLElement | null {
 }
 
 type DataGridResizeStartEvent =
-  | ReactMouseEvent<HTMLDivElement>
-  | ReactTouchEvent<HTMLDivElement>
+  | ReactMouseEvent<HTMLElement>
+  | ReactTouchEvent<HTMLElement>
 
 type DataGridResizeDocumentEvent = globalThis.MouseEvent | globalThis.TouchEvent
 
 function isDataGridTouchEvent(
   event: DataGridResizeStartEvent | DataGridResizeDocumentEvent
-): event is ReactTouchEvent<HTMLDivElement> | globalThis.TouchEvent {
+): event is ReactTouchEvent<HTMLElement> | globalThis.TouchEvent {
   return "touches" in event
 }
 
@@ -150,7 +170,14 @@ function getDataGridResizeEventClientX(
 function startDataGridColumnResizeOnEnd<TData extends object>(
   event: DataGridResizeStartEvent,
   header: Header<DataGridFeatures, TData, unknown>,
-  table: DataGridTableInstance<TData>
+  table: DataGridTableInstance<TData>,
+  /**
+   * Live mode: per-move width updates go straight to the table element's
+   * `--col/--header` variables, so cells track the pointer with ZERO React
+   * renders; state is written twice per drag (start marker, release commit)
+   * instead of per mousemove - which re-renders the consumer's whole tree.
+   */
+  live = false
 ): (() => void) | undefined {
   const column = table.getColumn(header.column.id)
 
@@ -173,14 +200,17 @@ function startDataGridColumnResizeOnEnd<TData extends object>(
   const dragStartClientX = getDataGridResizeEventClientX(event, touchIdentifier)
   const headerCell = event.currentTarget.closest("th")
   const headerRect = headerCell?.getBoundingClientRect()
+  const liveTableElement = live ? headerCell?.closest("table") : null
+  // An end-pinned column is anchored at its end edge and grows from its
+  // START edge, so its whole resize geometry runs mirrored, exactly like
+  // RTL: the anchor is the opposite edge and the drag direction inverts.
+  const resizeRtl =
+    (table.options.columnResizeDirection === "rtl") !==
+    (column.getIsPinned() === "end")
   const startOffset =
     headerRect &&
-    Number.isFinite(
-      table.options.columnResizeDirection === "rtl"
-        ? headerRect.left
-        : headerRect.right
-    )
-      ? table.options.columnResizeDirection === "rtl"
+    Number.isFinite(resizeRtl ? headerRect.left : headerRect.right)
+      ? resizeRtl
         ? headerRect.left
         : headerRect.right
       : dragStartClientX
@@ -198,8 +228,7 @@ function startDataGridColumnResizeOnEnd<TData extends object>(
       (leafHeader) =>
         [leafHeader.column.id, leafHeader.column.getSize()] as [string, number]
     )
-  const directionMultiplier =
-    table.options.columnResizeDirection === "rtl" ? -1 : 1
+  const directionMultiplier = resizeRtl ? -1 : 1
 
   // Clamp the drag to the leaf columns' min/max sizes so the preview
   // indicator matches what the commit will produce (no overshoot followed by
@@ -253,15 +282,30 @@ function startDataGridColumnResizeOnEnd<TData extends object>(
         ) / 100
     })
 
-    table.setColumnResizing((old) => ({
-      ...old,
-      startOffset,
-      startSize,
-      deltaOffset,
-      deltaPercentage,
-      columnSizingStart,
-      isResizingColumn: column.id,
-    }))
+    if (liveTableElement) {
+      columnSizingStart.forEach(([columnId]) => {
+        const nextSize = nextColumnSizing[columnId]
+        if (typeof nextSize !== "number") return
+        liveTableElement.style.setProperty(
+          `--col-${columnId}-size`,
+          String(nextSize)
+        )
+        liveTableElement.style.setProperty(
+          `--header-${columnId}-size`,
+          String(nextSize)
+        )
+      })
+    } else {
+      table.setColumnResizing((old) => ({
+        ...old,
+        startOffset,
+        startSize,
+        deltaOffset,
+        deltaPercentage,
+        columnSizingStart,
+        isResizingColumn: column.id,
+      }))
+    }
 
     if (commit) {
       table.setColumnSizing((old) => ({
@@ -507,21 +551,35 @@ function hasDataGridTableRightPinnedColumns<TData extends object>(
   return (table.state.columnPinning.end?.length ?? 0) > 0
 }
 
+// A meta.fillWidth column absorbs the free space itself, so the fill cells
+// must collapse or the strip would be counted twice.
+function hasDataGridFillColumn<TData extends object>(
+  table: DataGridTableInstance<TData>
+) {
+  return table
+    .getVisibleLeafColumns()
+    .some((column) => column.columnDef.meta?.fillWidth)
+}
+
 function DataGridTableFillCol() {
-  const { props } = useDataGrid()
+  const { props, table } = useDataGrid()
 
   if (!props.tableLayout?.columnsResizable) return null
 
   return (
     <col
       data-slot="data-grid-table-fill-col"
-      style={{ width: "var(--data-grid-fill-size, 0px)" }}
+      style={{
+        width: hasDataGridFillColumn(table)
+          ? 0
+          : "var(--data-grid-fill-size, 0px)",
+      }}
     />
   )
 }
 
 function DataGridTableFillHeadCell() {
-  const { props } = useDataGrid()
+  const { props, table } = useDataGrid()
 
   if (!props.tableLayout?.columnsResizable) return null
 
@@ -529,14 +587,18 @@ function DataGridTableFillHeadCell() {
     <th
       aria-hidden="true"
       data-slot="data-grid-table-fill-head-cell"
-      style={{ width: "var(--data-grid-fill-size, 0px)" }}
+      style={{
+        width: hasDataGridFillColumn(table)
+          ? 0
+          : "var(--data-grid-fill-size, 0px)",
+      }}
       className={cn("p-0", props.tableLayout?.headerBackground && "bg-muted")}
     />
   )
 }
 
 function DataGridTableFillBodyCell() {
-  const { props } = useDataGrid()
+  const { props, table } = useDataGrid()
 
   if (!props.tableLayout?.columnsResizable) return null
 
@@ -544,14 +606,18 @@ function DataGridTableFillBodyCell() {
     <td
       aria-hidden="true"
       data-slot="data-grid-table-fill-body-cell"
-      style={{ width: "var(--data-grid-fill-size, 0px)" }}
+      style={{
+        width: hasDataGridFillColumn(table)
+          ? 0
+          : "var(--data-grid-fill-size, 0px)",
+      }}
       className="p-0"
     />
   )
 }
 
 function DataGridTableFillFootCell() {
-  const { props } = useDataGrid()
+  const { props, table } = useDataGrid()
 
   if (!props.tableLayout?.columnsResizable) return null
 
@@ -559,14 +625,86 @@ function DataGridTableFillFootCell() {
     <td
       aria-hidden="true"
       data-slot="data-grid-table-fill-foot-cell"
-      style={{ width: "var(--data-grid-fill-size, 0px)" }}
+      style={{
+        width: hasDataGridFillColumn(table)
+          ? 0
+          : "var(--data-grid-fill-size, 0px)",
+      }}
       className="p-0"
     />
   )
 }
 
+/**
+ * The quick-create affordance, rendered as the body's last row when
+ * `onRowCreate` is set: one full-width ghost button, the Notion/Airtable
+ * "+ New" idiom. What the click creates stays consumer-owned.
+ */
+function DataGridTableAddRow() {
+  const { i18n, props, table } = useDataGrid()
+
+  if (!props.onRowCreate) return null
+
+  return (
+    <tr
+      data-slot="data-grid-table-add-row"
+      className={cn(
+        "hover:bg-muted/40 [thead+tbody_&:first-child]:border-t",
+        props.tableClassNames?.rowCreate
+      )}
+    >
+      <td
+        // The extra column is the filler strip, rendered only when columns
+        // are resizable.
+        colSpan={
+          table.getVisibleLeafColumns().length +
+          (props.tableLayout?.columnsResizable ? 1 : 0)
+        }
+        className="p-0"
+      >
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          // Block-level flex: inline-flex would sit on the cell's text
+          // baseline and push the icon and label off vertical center.
+          className={cn(
+            "text-muted-foreground flex w-full items-center justify-start rounded-none px-3",
+            props.tableLayout?.dense ? "h-8 px-2" : "h-9"
+          )}
+          onClick={(event) => {
+            // Creating often unmounts this affordance (a draft row takes
+            // its place); focus would fall to the body and strand the
+            // keyboard. Hand it to the grid's focus target instead - but
+            // only when it was actually lost, so a consumer that keeps
+            // the button mounted keeps repeated Enter presses working.
+            // A timer, not rAF: timers also run in background tabs.
+            const button = event.currentTarget
+            const grid = button.closest("table")
+            props.onRowCreate?.()
+            setTimeout(() => {
+              if (
+                !button.isConnected &&
+                grid?.isConnected &&
+                grid.tabIndex >= 0 &&
+                (document.activeElement === document.body ||
+                  !document.activeElement)
+              ) {
+                grid.focus()
+              }
+            }, 0)
+          }}
+        >
+          <PlusIcon className="size-4" aria-hidden="true" />
+          {props.rowCreateLabel ?? i18n.labels.rowCreate}
+        </Button>
+      </td>
+    </tr>
+  )
+}
+
 function DataGridTableBase({ children }: { children: ReactNode }) {
-  const { props, table } = useDataGrid()
+  const { props, table, recordCount } = useDataGrid()
   const leftVisibleColumns = table.getStartVisibleLeafColumns()
   const centerVisibleColumns = table.getCenterVisibleLeafColumns()
   const rightVisibleColumns = table.getEndVisibleLeafColumns()
@@ -581,11 +719,21 @@ function DataGridTableBase({ children }: { children: ReactNode }) {
   const columnSizeVars = useMemo(() => {
     if (!props.tableLayout?.columnsResizable) return undefined
     const headers = table.getFlatHeaders()
-    const colSizes: Record<string, number> = {}
+    // A meta.fillWidth column absorbs the filler strip: its size variable
+    // carries the unitless fill amount, so every consumer of
+    // calc(var(--col-X-size) * 1px) stretches with the container while the
+    // fill cells collapse to zero.
+    const fillColumnId = table
+      .getVisibleLeafColumns()
+      .find((column) => column.columnDef.meta?.fillWidth)?.id
+    const colSizes: Record<string, number | string> = {}
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i]!
       colSizes[`--header-${header.id}-size`] = header.getSize()
-      colSizes[`--col-${header.column.id}-size`] = header.column.getSize()
+      colSizes[`--col-${header.column.id}-size`] =
+        header.column.id === fillColumnId
+          ? `calc(${header.column.getSize()} + var(--data-grid-fill, 0))`
+          : header.column.getSize()
     }
     return colSizes
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -601,11 +749,38 @@ function DataGridTableBase({ children }: { children: ReactNode }) {
     table.state.columnOrder,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     table.state.columnPinning,
+    // A def swap can change a column's `size` without touching sizing
+    // STATE; without this dep the CSS variables keep the old widths. For a
+    // consumer defining columns inline the memo degrades to per-render
+    // recompute, which is the safe direction.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    table.options.columns,
   ])
 
+  // With cell selection on, the table announces as a grid so the tds compute
+  // as gridcells and aria-selected applies; existing grids keep their plain
+  // semantic table untouched.
+  const cellSelectionOn =
+    !!props.tableLayout?.cellSelection && table.atoms.cellSelection != null
+
   return (
     <table
       data-slot="data-grid-table"
+      role={cellSelectionOn ? "grid" : undefined}
+      aria-multiselectable={
+        cellSelectionOn && props.tableLayout?.cellSelectionMode !== "single"
+          ? true
+          : undefined
+      }
+      // recordCount can undercount the rows actually present (a pinned
+      // draft row a consumer keeps out of its totals), and aria-rowindex
+      // is computed from the full display order; the union keeps every
+      // announced index inside the announced count.
+      aria-rowcount={
+        cellSelectionOn
+          ? Math.max(recordCount, table.getRowsInDisplayOrder().length) + 1
+          : undefined
+      }
       className={cn(
         "text-foreground caption-bottom text-left align-middle text-sm font-normal rtl:text-right",
         props.tableLayout?.columnsResizable ? "min-w-0" : "w-full min-w-full",
@@ -681,17 +856,21 @@ function DataGridTableViewport({
     const node = viewportNodeRef.current
     if (!node) return
 
-    const fillWidth = Math.max(
-      0,
-      fillStateRef.current.containerWidth - table.getTotalSize()
-    )
+    const freeSpace = fillStateRef.current.containerWidth - table.getTotalSize()
+    const fillWidth = Math.max(0, freeSpace)
 
     if (fillStateRef.current.appliedFill !== fillWidth) {
       fillStateRef.current.appliedFill = fillWidth
       node.style.setProperty("--data-grid-fill-size", `${fillWidth}px`)
+      // Unitless twin for the meta.fillWidth column, whose size variable
+      // participates in a calc that multiplies by 1px afterwards.
+      node.style.setProperty("--data-grid-fill", String(fillWidth))
     }
 
-    autoSize?.apply(fillWidth)
+    // Signed on purpose: a shrinking container drives the free space
+    // NEGATIVE, which is exactly what tells a meta.autoSize column to hand
+    // its absorbed width back.
+    autoSize?.apply(freeSpace)
   }, [autoSize, table])
 
   const handleViewportRef = useCallback(
@@ -706,6 +885,7 @@ function DataGridTableViewport({
       if (!isColumnsResizable) {
         fillStateRef.current.appliedFill = -1
         node.style.removeProperty("--data-grid-fill-size")
+        node.style.removeProperty("--data-grid-fill")
         return
       }
 
@@ -785,6 +965,7 @@ function DataGridTableHeadRow({
 
   return (
     <tr
+      aria-rowindex={props.tableLayout?.cellSelection ? 1 : undefined}
       className={cn(
         props.tableLayout?.headerBorder && "[&>th]:border-b",
         props.tableLayout?.cellBorder && "*:last:border-e-0",
@@ -809,7 +990,7 @@ function DataGridTableHeadRowCell<TData extends object>({
   dndRef?: React.Ref<HTMLTableCellElement>
   dndStyle?: CSSProperties
 }) {
-  const { props } = useDataGrid()
+  const { props, table } = useDataGrid()
 
   const { column } = header
   const isPinned = column.getIsPinned()
@@ -838,8 +1019,14 @@ function DataGridTableHeadRowCell<TData extends object>({
           ? "ascending"
           : sortDirection === "desc"
             ? "descending"
-            : undefined
+            : column.getCanSort()
+              ? "none"
+              : undefined
       }
+      aria-colindex={
+        props.tableLayout?.cellSelection ? column.getIndex() + 1 : undefined
+      }
+      data-col-id={column.id}
       style={{
         ...(props.tableLayout?.width === "fixed" &&
           !props.tableLayout?.columnsResizable && {
@@ -848,6 +1035,12 @@ function DataGridTableHeadRowCell<TData extends object>({
         ...(props.tableLayout?.columnsPinnable &&
           column.getCanPin() &&
           getPinningStyles(column)),
+        // A sticky child does not ride a sticky ancestor: under a sticky
+        // header the pinned cell's own position:sticky (horizontal) opts it
+        // out of the thead's vertical stickiness, and the corner scrolls
+        // away while its non-positioned siblings stick. Pin both axes on
+        // the cell itself.
+        ...(props.tableLayout?.headerSticky && isPinned && { top: 0 }),
         ...(props.tableLayout?.columnsResizable && {
           width: `calc(var(--header-${header.id}-size) * 1px)`,
         }),
@@ -865,6 +1058,17 @@ function DataGridTableHeadRowCell<TData extends object>({
         headerCellSpacing,
         props.tableLayout?.headerBackground && "bg-muted",
         props.tableLayout?.cellBorder && "border-e",
+        // The resize filler column follows the center group, and a border on
+        // the last center cell would float against that empty strip.
+        props.tableLayout?.cellBorder &&
+          props.tableLayout?.columnsResizable &&
+          // With end-pinned columns but no pin affordance, the pinned edge
+          // draws no separator of its own; keep the border then.
+          (props.tableLayout?.columnsPinnable ||
+            !hasDataGridTableRightPinnedColumns(table)) &&
+          !isPinned &&
+          column.getIsLastColumn("center") &&
+          "border-e-0",
         props.tableLayout?.columnsResizable &&
           column.getCanResize() &&
           (isPinned ? "overflow-hidden" : "overflow-visible"),
@@ -939,7 +1143,7 @@ function DataGridTableHeadRowCellResize<TData extends object>({
     }
   }, [])
 
-  const handleMouseDown = (event: ReactMouseEvent<HTMLDivElement>) => {
+  const handleMouseDown = (event: ReactMouseEvent<HTMLElement>) => {
     // Only the primary button starts a resize; guard before preventDefault so
     // right-click still opens the context menu.
     if (event.button !== 0) return
@@ -947,63 +1151,80 @@ function DataGridTableHeadRowCellResize<TData extends object>({
     event.preventDefault()
     event.stopPropagation()
 
-    if (isResizeModeOnEnd) {
-      stopResizeSessionRef.current?.()
-      stopResizeSessionRef.current = startDataGridColumnResizeOnEnd(
-        event,
-        header,
-        table
-      )
-      return
-    }
-
-    header.getResizeHandler()(event)
+    stopResizeSessionRef.current?.()
+    stopResizeSessionRef.current = startDataGridColumnResizeOnEnd(
+      event,
+      header,
+      table,
+      !isResizeModeOnEnd
+    )
   }
 
-  const handleTouchStart = (event: ReactTouchEvent<HTMLDivElement>) => {
+  const handleTouchStart = (event: ReactTouchEvent<HTMLElement>) => {
     event.preventDefault()
     event.stopPropagation()
 
-    if (isResizeModeOnEnd) {
-      stopResizeSessionRef.current?.()
-      stopResizeSessionRef.current = startDataGridColumnResizeOnEnd(
-        event,
-        header,
-        table
-      )
-      return
-    }
-
-    header.getResizeHandler()(event)
+    stopResizeSessionRef.current?.()
+    stopResizeSessionRef.current = startDataGridColumnResizeOnEnd(
+      event,
+      header,
+      table,
+      !isResizeModeOnEnd
+    )
   }
 
   return (
-    <div
+    // A span, deliberately: consumers stretch end-aligned header CONTENT
+    // with `[&>div]:w-full` on headerClassName, and that compiled child
+    // selector (0,1,1) beats the handle's own w-5 (0,1,0) - a div handle
+    // then covers the whole cell and swallows the menu click. Hardening
+    // w-5 with ! was rejected: the tag change removes the fight instead
+    // of escalating it.
+    <span
+      data-slot="data-grid-table-resize-handle"
       {...{
         onDoubleClick: () => column.resetSize(),
         onMouseDown: handleMouseDown,
         onTouchStart: handleTouchStart,
         className: cn(
-          "absolute top-0 h-full cursor-col-resize user-select-none touch-none z-10 flex",
-          isLastVisibleColumn
-            ? "end-0 w-5 justify-end before:hidden"
-            : isPinned
-              ? cn(
-                  // A pinned column is sticky, so the handle sits inside the
-                  // cell instead of straddling the boundary, where the next
-                  // sticky cell would paint over it.
-                  "end-0 w-5 justify-end",
-                  // With the pin affordance on, the pinned edge already draws
-                  // its own separator and a resize line would double it. But
-                  // pinning is also usable purely as an ordering lock, with no
-                  // affordance and no separator -- and there this line is the
-                  // only thing marking the edge, so hiding it left a resizable
-                  // column showing a resize cursor and no indicator at all.
-                  props.tableLayout?.columnsPinnable
-                    ? "before:hidden"
-                    : "before:absolute before:inset-y-0 before:end-0 before:w-px before:bg-border"
-                )
-              : "-end-2 w-5 justify-center before:absolute before:inset-y-0 before:w-px before:-translate-x-px before:bg-border",
+          "absolute top-0 h-full cursor-col-resize touch-none select-none z-10 flex",
+          isPinned === "end"
+            ? cn(
+                // An end-pinned column grows from its START edge (its end is
+                // anchored), so the handle lives there, inside the sticky
+                // cell.
+                "start-0 w-5 justify-start",
+                props.tableLayout?.columnsPinnable
+                  ? "before:hidden"
+                  : "before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border"
+              )
+            : isLastVisibleColumn
+              ? "end-0 w-5 justify-end before:hidden"
+              : isPinned
+                ? cn(
+                    // A pinned column is sticky, so the handle sits inside the
+                    // cell instead of straddling the boundary, where the next
+                    // sticky cell would paint over it.
+                    "end-0 w-5 justify-end",
+                    // With the pin affordance on, the pinned edge already draws
+                    // its own separator and a resize line would double it. But
+                    // pinning is also usable purely as an ordering lock, with no
+                    // affordance and no separator -- and there this line is the
+                    // only thing marking the edge, so hiding it left a resizable
+                    // column showing a resize cursor and no indicator at all.
+                    props.tableLayout?.columnsPinnable
+                      ? "before:hidden"
+                      : "before:absolute before:inset-y-0 before:end-0 before:w-px before:bg-border"
+                  )
+                : cn(
+                    "-end-2 w-5 justify-center",
+                    // With cell borders on, the th border-e already marks every
+                    // boundary and this always-on line would double it; the wide
+                    // hit area and resize cursor stay.
+                    props.tableLayout?.cellBorder
+                      ? "before:hidden"
+                      : "before:absolute before:inset-y-0 before:w-px before:-translate-x-px before:bg-border"
+                  ),
           column.getIsResizing() &&
             (isResizeModeOnEnd
               ? "opacity-100"
@@ -1066,9 +1287,13 @@ function DataGridTableResizeIndicator({
 
     // deltaOffset is a logical delta (already direction-adjusted); translate
     // by the physical pointer movement so the indicator follows the cursor
-    // in RTL instead of mirroring it.
+    // instead of mirroring it. End-pinned columns resize mirrored (see the
+    // session), so the multiplier matches theirs.
     const directionMultiplier =
-      table.options.columnResizeDirection === "rtl" ? -1 : 1
+      (table.options.columnResizeDirection === "rtl") !==
+      (resizingHeader.column.getIsPinned() === "end")
+        ? -1
+        : 1
     const deltaOffset = (columnResizing.deltaOffset ?? 0) * directionMultiplier
 
     if (headerHeightCacheRef.current.key !== resizingColumnId) {
@@ -1082,11 +1307,35 @@ function DataGridTableResizeIndicator({
     }
 
     const headerHeight = headerHeightCacheRef.current.value
-    const indicatorLeft =
-      typeof columnResizing.startOffset === "number" && viewportElement
-        ? columnResizing.startOffset -
-          viewportElement.getBoundingClientRect().left
-        : resizingHeader.getStart() + resizingHeader.getSize()
+    // Anchor on the live header cell: content math (getStart) cannot place a
+    // STICKY pinned column, while the DOM rect is right for every column at
+    // any scroll position. The state offset and content math stay as
+    // fallbacks for a header that is not in the DOM.
+    const viewportRoot =
+      viewportElement ??
+      indicator.closest<HTMLElement>('[data-slot="data-grid-table-viewport"]')
+    const headerCellElement = viewportRoot?.querySelector<HTMLElement>(
+      `thead th[data-col-id="${CSS.escape(resizingHeader.column.id)}"]`
+    )
+    let indicatorLeft: number
+    if (headerCellElement && viewportRoot) {
+      const anchorRect = headerCellElement.getBoundingClientRect()
+      const edgeClientX =
+        (table.options.columnResizeDirection === "rtl") !==
+        (resizingHeader.column.getIsPinned() === "end")
+          ? anchorRect.left
+          : anchorRect.right
+      indicatorLeft = edgeClientX - viewportRoot.getBoundingClientRect().left
+    } else if (
+      typeof columnResizing.startOffset === "number" &&
+      viewportElement
+    ) {
+      indicatorLeft =
+        columnResizing.startOffset -
+        viewportElement.getBoundingClientRect().left
+    } else {
+      indicatorLeft = resizingHeader.getStart() + resizingHeader.getSize()
+    }
 
     indicator.style.left = `${indicatorLeft}px`
     indicator.style.transform = `translateX(${deltaOffset}px)`
@@ -1146,7 +1395,13 @@ function DataGridTableFoot({ children }: { children: ReactNode }) {
   return (
     <tfoot
       data-slot="data-grid-table-foot"
-      className={cn(props.tableClassNames?.footer)}
+      className={cn(
+        // The rule between the body and the footer. It used to be drawn by the
+        // last body row through an ancestor :has(), which made every style
+        // invalidation re-match the whole grid.
+        props.tableLayout?.rowBorder && "[&>tr:first-child>td]:border-t",
+        props.tableClassNames?.footer
+      )}
     >
       {children}
     </tfoot>
@@ -1154,7 +1409,7 @@ function DataGridTableFoot({ children }: { children: ReactNode }) {
 }
 
 function DataGridTableFootRow({ children }: { children: ReactNode }) {
-  const { props } = useDataGrid()
+  const { props, table } = useDataGrid()
   const footRowBottomBorderClasses = "[&:not(:last-child)>td]:border-b"
 
   return (
@@ -1163,7 +1418,16 @@ function DataGridTableFootRow({ children }: { children: ReactNode }) {
       className={cn(
         props.tableLayout?.footerBackground && "bg-muted/40 dark:bg-background",
         props.tableLayout?.rowBorder && footRowBottomBorderClasses,
-        props.tableLayout?.cellBorder && "*:last:border-e-0"
+        props.tableLayout?.cellBorder && "*:last:border-e-0",
+        // The fill foot cell is the :last child, so the rule above only
+        // strips the filler; the real last cell needs the same treatment or
+        // its border floats into the strip while thead and tbody suppress
+        // theirs. Same pin-affordance gate as the cell-level suppressors.
+        props.tableLayout?.cellBorder &&
+          props.tableLayout?.columnsResizable &&
+          (props.tableLayout?.columnsPinnable ||
+            !hasDataGridTableRightPinnedColumns(table)) &&
+          "[&>td:has(+td[data-slot=data-grid-table-fill-foot-cell])]:border-e-0"
       )}
     >
       {children}
@@ -1215,7 +1479,6 @@ function DataGridTableBodyRowSkeleton({ children }: { children: ReactNode }) {
         props.tableLayout?.cellBorder && "*:last:border-e-0",
         props.tableLayout?.stripped &&
           "odd:bg-muted/90 odd:hover:bg-muted hover:bg-transparent",
-        table.options.enableRowSelection && "*:first:relative",
         props.tableClassNames?.bodyRow
       )}
     >
@@ -1247,6 +1510,15 @@ function DataGridTableBodyRowSkeletonCell<TData extends object>({
         "align-middle",
         bodyCellSpacing,
         props.tableLayout?.cellBorder && "border-e",
+        props.tableLayout?.cellBorder &&
+          props.tableLayout?.columnsResizable &&
+          // With end-pinned columns but no pin affordance, the pinned edge
+          // draws no separator of its own; keep the border then.
+          (props.tableLayout?.columnsPinnable ||
+            !hasDataGridTableRightPinnedColumns(table)) &&
+          !column.getIsPinned() &&
+          column.getIsLastColumn("center") &&
+          "border-e-0",
         props.tableLayout?.columnsResizable &&
           column.getCanResize() &&
           "truncate",
@@ -1284,9 +1556,9 @@ function DataGridTableBodyRow<TData extends object>({
 }) {
   const { props, table } = useDataGrid()
   const isRowPinned = row.getIsPinned()
+  const rowStatus = props.getRowStatus?.(row.original)
 
-  const bodyRowBottomBorderClasses =
-    "[&:not(:last-child)>td]:border-b [tbody:has(+tfoot)_&:last-child>td]:border-b [*:has(>[data-slot=data-grid]+[data-slot=data-grid-pagination])_[data-slot=data-grid]_&:last-child>td]:border-b"
+  const bodyRowBottomBorderClasses = "[&:not(:last-child)>td]:border-b"
 
   return (
     <tr
@@ -1305,10 +1577,37 @@ function DataGridTableBodyRow<TData extends object>({
       data-depth={row.depth || undefined}
       data-row-pinned={isRowPinned || undefined}
       data-row-pinned-boundary={pinnedBoundary}
+      data-row-status={rowStatus}
+      // 1-based after the header row; row.index is the position in the data,
+      // so the announced index stays absolute across pagination.
+      aria-rowindex={
+        props.tableLayout?.cellSelection ? row.index + 2 : undefined
+      }
       onClick={() => props.onRowClick && props.onRowClick(row.original)}
       className={cn(
         "hover:bg-muted/40 data-[state=selected]:bg-muted/50",
+        /* With the pin affordance on, pinned cells hide scrolled content
+           behind an OPAQUE background, which also hides the row's translucent
+           hover and selected tints; they get the same tints premixed over the
+           background instead, the row-status treatment. Pinning used only as
+           an ordering lock leaves cells transparent, so the premix would paint
+           a second, different hover colour: gate it on the same flag. */
+        props.tableLayout?.columnsPinnable &&
+          "hover:[&>td[data-pinned]]:bg-[color-mix(in_oklab,var(--muted)_40%,var(--background))] data-[state=selected]:[&>td[data-pinned]]:bg-[color-mix(in_oklab,var(--muted)_50%,var(--background))]",
         props.onRowClick && "cursor-pointer",
+        // Optional CRUD indications, active only when getRowStatus is
+        // wired; the warning-muted defaults yield to tableClassNames
+        // overrides per status. Pinned cells must stay OPAQUE (they hide
+        // scrolled content), so they get the same tint pre-mixed over the
+        // background instead of inheriting the translucent row fill.
+        props.getRowStatus &&
+          "data-[row-status=deleted]:bg-destructive/5 data-[row-status=deleted]:opacity-60 data-[row-status=dirty]:bg-amber-500/5 data-[row-status=new]:bg-green-500/5 data-[row-status=deleted]:[&_td]:line-through",
+        props.getRowStatus &&
+          props.tableLayout?.columnsPinnable &&
+          "data-[row-status=deleted]:[&>td[data-pinned]]:bg-[color-mix(in_oklab,var(--destructive)_5%,var(--background))] data-[row-status=dirty]:[&>td[data-pinned]]:bg-[color-mix(in_oklab,var(--color-amber-500)_5%,var(--background))] data-[row-status=new]:[&>td[data-pinned]]:bg-[color-mix(in_oklab,var(--color-green-500)_5%,var(--background))]",
+        rowStatus === "new" && props.tableClassNames?.rowNew,
+        rowStatus === "dirty" && props.tableClassNames?.rowDirty,
+        rowStatus === "deleted" && props.tableClassNames?.rowDeleted,
         !props.tableLayout?.stripped &&
           props.tableLayout?.rowBorder &&
           bodyRowBottomBorderClasses,
@@ -1323,14 +1622,18 @@ function DataGridTableBodyRow<TData extends object>({
                 dataIndex % 2 === 0 && "bg-muted/90 hover:bg-muted"
               )
             : "odd:bg-muted/90 odd:hover:bg-muted hover:bg-transparent"),
-        table.options.enableRowSelection && "*:first:relative",
         props.tableLayout?.rowsPinnable &&
           isRowPinned &&
           "bg-muted/30 hover:bg-muted/50",
         pinnedBoundary === "top" &&
           "[&>td]:shadow-[0_2px_0_rgba(0,0,0,0.03)] dark:[&>td]:shadow-[0_2px_0_rgba(255,255,255,0.06)]",
+        // A bottom-pinned row borders scrolled content along its TOP edge,
+        // so its separator shadow casts upward.
         pinnedBoundary === "bottom" &&
-          "[&>td]:shadow-[0_2px_0_rgba(0,0,0,0.03)] dark:[&>td]:shadow-[0_2px_0_rgba(255,255,255,0.06)]",
+          "[&>td]:shadow-[0_-2px_0_rgba(0,0,0,0.03)] dark:[&>td]:shadow-[0_-2px_0_rgba(255,255,255,0.06)]",
+        props.tableLayout?.rowsPinnable &&
+          isRowPinned &&
+          props.tableClassNames?.rowPinned,
         props.tableClassNames?.bodyRow
       )}
     >
@@ -1355,8 +1658,7 @@ function DataGridTableBodyRowExpandded<TData extends object>({
   // would break striping parity, rowBorder, and virtual row measurement.
   if (!expandedContent) return null
 
-  const bodyRowBottomBorderClasses =
-    "[&:not(:last-child)>td]:border-b [tbody:has(+tfoot)_&:last-child>td]:border-b [*:has(>[data-slot=data-grid]+[data-slot=data-grid-pagination])_[data-slot=data-grid]_&:last-child>td]:border-b"
+  const bodyRowBottomBorderClasses = "[&:not(:last-child)>td]:border-b"
 
   return (
     <tr
@@ -1374,18 +1676,37 @@ function DataGridTableBodyRowExpandded<TData extends object>({
   )
 }
 
+/**
+ * Interactive descendants keep their own mousedown semantics: a click on a
+ * button, link, editor or checkbox inside a cell must never start or replace
+ * a range. One selector also covers the row-dnd grip (a button), the expand
+ * toggle, and `data-cell-interactive` - the documented opt-out for custom
+ * widgets built from elements the tag list cannot know about.
+ */
+function isDataGridCellInteractiveTarget(target: EventTarget | null): boolean {
+  return (
+    target instanceof Element &&
+    target.closest(
+      'button, a, input, select, textarea, [contenteditable], [role="checkbox"], [data-cell-interactive], [data-slot="data-grid-table-row-expand"], [data-slot="data-grid-cell-fill-handle"]'
+    ) != null
+  )
+}
+
 function DataGridTableBodyRowCell<TData extends object>({
   children,
   cell,
   dndRef,
   dndStyle,
+  columnIndex,
 }: {
   children: ReactNode
   cell: Cell<DataGridFeatures, TData, unknown>
   dndRef?: React.Ref<HTMLTableCellElement>
   dndStyle?: CSSProperties
+  /** Center-column index under column virtualization; data-column-index. */
+  columnIndex?: number
 }) {
-  const { props } = useDataGrid()
+  const { props, table, gridId } = useDataGrid()
 
   const { column, row } = cell
   const isPinned = column.getIsPinned()
@@ -1396,13 +1717,35 @@ function DataGridTableBodyRowCell<TData extends object>({
     size: props.tableLayout?.dense ? "dense" : "default",
   })
 
-  return (
+  // The atom check backs up the flag: consumers may hand the grid a leaner
+  // bundle without cellSelectionFeature, and the flag alone must not make the
+  // renderer call prototype APIs that were never assigned.
+  const cellSelectionOn =
+    !!props.tableLayout?.cellSelection && table.atoms.cellSelection != null
+  const rangeSelectionOn =
+    cellSelectionOn && props.tableLayout?.cellSelectionMode !== "single"
+
+  const renderTd = (
+    selection: ReturnType<typeof getDataGridCellSelectionCellAttrs> | null
+  ) => (
     <td
       ref={dndRef}
+      // The id is what the controller's aria-activedescendant points at, so
+      // a screen reader tracks the focused cell through the container-focus
+      // model.
+      id={
+        cellSelectionOn
+          ? `${gridId}c-${toDataGridDomId(row.id)}-${toDataGridDomId(column.id)}`
+          : undefined
+      }
+      aria-colindex={cellSelectionOn ? column.getIndex() + 1 : undefined}
       style={{
         ...(props.tableLayout?.columnsPinnable &&
           column.getCanPin() &&
           getPinningStyles(column)),
+        // Paint containment clips at the padding edge, which would erase
+        // the ::before selection chrome on pinned cells.
+        ...(cellSelectionOn ? { contain: undefined } : null),
         ...(props.tableLayout?.columnsResizable && {
           width: `calc(var(--col-${column.id}-size) * 1px)`,
         }),
@@ -1412,12 +1755,79 @@ function DataGridTableBodyRowCell<TData extends object>({
       data-last-col={
         isLastStartPinned ? "start" : isFirstEndPinned ? "end" : undefined
       }
+      data-cell-status={props.getCellStatus?.(row.original, column.id)}
+      data-column-index={columnIndex}
+      {...(selection ? selection : null)}
+      onMouseDown={
+        selection
+          ? (event) => {
+              if (event.button !== 0) return
+              if (isDataGridCellInteractiveTarget(event.target)) {
+                // A modifier click is a SELECTION gesture even on a control:
+                // Shift extends and Ctrl/Cmd adds, exactly as on a plain
+                // cell, so no column is unreachable for ranges.
+                if (
+                  rangeSelectionOn &&
+                  (event.shiftKey || event.metaKey || event.ctrlKey) &&
+                  cell.getCanSelect()
+                ) {
+                  event.preventDefault()
+                  cell.getSelectionStartHandler()(event)
+                  return
+                }
+                // The press starts the range session exactly like a plain
+                // cell: the cell focuses, a drag extends from it, and a
+                // motionless press still ends in the control's own click
+                // (this is why drag releases are squelched upstream, in the
+                // controller, once a drag actually grew the range).
+                if (cell.getCanSelect()) {
+                  if (rangeSelectionOn) {
+                    cell.getSelectionStartHandler()(event)
+                  } else {
+                    table.setFocusedCell(row.id, column.id)
+                  }
+                }
+                return
+              }
+              if (!rangeSelectionOn) {
+                // Single mode: every gesture collapses to the one cell.
+                if (cell.getCanSelect()) {
+                  table.setFocusedCell(row.id, column.id)
+                }
+                return
+              }
+              cell.getSelectionStartHandler()(event)
+            }
+          : undefined
+      }
+      onMouseEnter={
+        rangeSelectionOn
+          ? (event) => cell.getSelectionExtendHandler()(event)
+          : undefined
+      }
       className={cn(
         "align-middle",
         bodyCellSpacing,
+        // The classic edited-cell corner mark, active only when
+        // getCellStatus is wired: amber for "dirty", destructive for
+        // "invalid".
+        props.getCellStatus &&
+          "data-[cell-status=invalid]:after:border-t-destructive data-[cell-status]:relative data-[cell-status]:after:absolute data-[cell-status]:after:end-0 data-[cell-status]:after:top-0 data-[cell-status]:after:size-0 data-[cell-status]:after:border-s-[5px] data-[cell-status]:after:border-t-[5px] data-[cell-status]:after:border-s-transparent data-[cell-status]:after:content-[''] data-[cell-status=dirty]:after:border-t-amber-500",
         props.tableLayout?.cellBorder && "border-e",
+        // Mirror of the head cell rule: no floating border against the
+        // resize filler strip.
+        props.tableLayout?.cellBorder &&
+          props.tableLayout?.columnsResizable &&
+          // With end-pinned columns but no pin affordance, the pinned edge
+          // draws no separator of its own; keep the border then.
+          (props.tableLayout?.columnsPinnable ||
+            !hasDataGridTableRightPinnedColumns(table)) &&
+          !isPinned &&
+          column.getIsLastColumn("center") &&
+          "border-e-0",
         props.tableLayout?.columnsResizable &&
           column.getCanResize() &&
+          !cellSelectionOn &&
           "truncate",
         cell.column.columnDef.meta?.cellClassName,
         props.tableLayout?.columnsPinnable &&
@@ -1430,12 +1840,72 @@ function DataGridTableBodyRowCell<TData extends object>({
         column.getIndex() === 0 ||
           column.getIndex() === row.getVisibleCells().length - 1
           ? props.tableClassNames?.edgeCell
-          : ""
+          : "",
+        selection && dataGridCellSelectionCellClasses
       )}
     >
-      {children}
+      {/* With cell selection on, the td must not clip (its ::before paints
+          the selection chrome 1px outside the cell), so the resize
+          truncation moves to an inner wrapper that clips at the same
+          boundary the td used to. */}
+      {cellSelectionOn &&
+      props.tableLayout?.columnsResizable &&
+      column.getCanResize() ? (
+        <div
+          className={bodyCellTruncateWrapVariants({
+            size: props.tableLayout?.dense ? "dense" : "default",
+          })}
+        >
+          {children}
+        </div>
+      ) : (
+        children
+      )}
+      {props.tableLayout?.cellFillHandle &&
+        selection?.["data-cell-edge-bottom"] &&
+        selection["data-cell-edge-right"] && (
+          <span
+            data-slot="data-grid-cell-fill-handle"
+            /* "dot" stays fully inside the cell corner; "ring" rides the
+               corner point the way Sheets draws it. Either way the handle
+               clamps where straddling would break: at the grid's own
+               boundary (last row, last cell, a last cell followed only by
+               the filler strip), where an overhang would extend the scroll
+               content and clip the selection chrome, and beside a PINNED
+               column, whose sticky layer (z 30) would otherwise paint over
+               the straddling half - raising the handle instead would float
+               it above the pinned column during horizontal scroll. */
+            className={cn(
+              "absolute z-10 cursor-crosshair in-data-[cell-editing]:hidden in-data-[cell-selecting]:hidden",
+              props.tableLayout?.cellFillHandleVariant === "ring"
+                ? "border-primary bg-background -end-[5px] -bottom-[5px] size-[11px] rounded-full border-2 in-[td:has(+[data-slot=data-grid-table-fill-body-cell]+td[data-pinned])]:end-0 in-[td:has(+[data-slot=data-grid-table-fill-body-cell]:last-child)]:end-0 in-[td:has(+td[data-pinned])]:end-0 in-[td:last-child]:end-0 in-[tr:last-child]:bottom-0"
+                : props.tableLayout?.cellFillHandleVariant === "square"
+                  ? /* Abutting the cell borders from inside: no gap and no
+                       overlap, so the square cannot merge with a gridline
+                       into a wider-than-tall blob, and it can never leave
+                       the grid, which is why it needs no boundary clamps. */
+                    "bg-primary end-0 bottom-0 size-[5px]"
+                  : "bg-primary border-background end-0 bottom-0 size-[9px] rounded-full border",
+              props.tableClassNames?.cellFillHandle
+            )}
+          />
+        )}
     </td>
   )
+
+  if (!cellSelectionOn) return renderTd(null)
+
+  // Per-cell subscription with a projecting selector: the atom writes once
+  // per cell crossed during a drag, and shallow-comparing this tuple limits
+  // the re-render to cells whose selection state actually changed.
+  return (
+    <Subscribe
+      source={table.atoms.cellSelection}
+      selector={() => getDataGridCellSelectionCellAttrs(cell)}
+    >
+      {(selection) => renderTd(selection)}
+    </Subscribe>
+  )
 }
 
 function DataGridTableRenderedRow<TData extends object>({
@@ -1443,18 +1913,34 @@ function DataGridTableRenderedRow<TData extends object>({
   pinnedBoundary,
   rowRef,
   rowIndex,
+  centerWindow,
 }: {
   row: Row<DataGridFeatures, TData>
   pinnedBoundary?: DataGridTablePinnedBoundary
   rowRef?: React.Ref<HTMLTableRowElement>
   /** Virtualized list index, rendered as data-index for measureElement. */
   rowIndex?: number
+  /**
+   * Column-virtualization window over the CENTER cells: only the inclusive
+   * [start, end] slice renders, and each flank collapses into one colSpan
+   * spacer. The spacers carry no width of their own - the colgroup stays
+   * complete, so under table-fixed the browser sizes them from the col
+   * elements they span and the layout cannot drift.
+   */
+  centerWindow?: { start: number; end: number }
 }) {
   const { props, table } = useDataGrid()
   const startVisibleCells = row.getStartVisibleCells()
   const centerVisibleCells = row.getCenterVisibleCells()
   const endVisibleCells = row.getEndVisibleCells()
   const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table)
+  const windowedCenterCells = centerWindow
+    ? centerVisibleCells.slice(centerWindow.start, centerWindow.end + 1)
+    : centerVisibleCells
+  const leadingSpacerSpan = centerWindow ? centerWindow.start : 0
+  const trailingSpacerSpan = centerWindow
+    ? Math.max(0, centerVisibleCells.length - 1 - centerWindow.end)
+    : 0
 
   return (
     <Fragment>
@@ -1464,13 +1950,40 @@ function DataGridTableRenderedRow<TData extends object>({
         rowRef={rowRef}
         dataIndex={rowIndex}
       >
-        {[...startVisibleCells, ...centerVisibleCells].map(
+        {startVisibleCells.map(
           (cell: Cell<DataGridFeatures, TData, unknown>) => (
             <DataGridTableBodyRowCell cell={cell} key={cell.id}>
               {flexRender(cell.column.columnDef.cell, cell.getContext())}
             </DataGridTableBodyRowCell>
           )
         )}
+        {leadingSpacerSpan > 0 && (
+          <td
+            aria-hidden="true"
+            data-slot="data-grid-table-virtual-col-spacer"
+            colSpan={leadingSpacerSpan}
+          />
+        )}
+        {windowedCenterCells.map(
+          (cell: Cell<DataGridFeatures, TData, unknown>, cellIndex) => (
+            <DataGridTableBodyRowCell
+              cell={cell}
+              key={cell.id}
+              columnIndex={
+                centerWindow ? centerWindow.start + cellIndex : undefined
+              }
+            >
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </DataGridTableBodyRowCell>
+          )
+        )}
+        {trailingSpacerSpan > 0 && (
+          <td
+            aria-hidden="true"
+            data-slot="data-grid-table-virtual-col-spacer"
+            colSpan={trailingSpacerSpan}
+          />
+        )}
         {props.tableLayout?.columnsResizable && hasRightPinnedColumns ? (
           <DataGridTableFillBodyCell />
         ) : null}
@@ -1489,7 +2002,7 @@ function DataGridTableRenderedRow<TData extends object>({
 }
 
 function DataGridTableEmpty() {
-  const { table, props } = useDataGrid()
+  const { i18n, table, props } = useDataGrid()
   const visibleColumnCount =
     getDataGridTableOrderedVisibleColumns(table).length +
     (props.tableLayout?.columnsResizable ? 1 : 0)
@@ -1500,20 +2013,20 @@ function DataGridTableEmpty() {
         colSpan={Math.max(visibleColumnCount, 1)}
         className="text-muted-foreground py-6 text-center text-sm"
       >
-        {props.emptyMessage || "No data available"}
+        {props.emptyMessage || i18n.labels.empty}
       </td>
     </tr>
   )
 }
 
 function DataGridTableLoader() {
-  const { props } = useDataGrid()
+  const { i18n, props } = useDataGrid()
 
   return (
     <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
       <div className="text-muted-foreground bg-card rounded-lg flex items-center gap-2 border px-4 py-2 text-sm leading-none font-medium">
         <Spinner className="size-5 opacity-60" />
-        {props.loadingMessage || "Loading..."}
+        {props.loadingMessage || i18n.labels.loading}
       </div>
     </div>
   )
@@ -1524,12 +2037,13 @@ function DataGridTableRowPin<TData extends object>({
 }: {
   row: Row<DataGridFeatures, TData>
 }) {
+  const { i18n } = useDataGrid()
   const isPinned = row.getIsPinned()
 
   return (
     <button
       type="button"
-      aria-label={isPinned ? "Unpin row" : "Pin row"}
+      aria-label={isPinned ? i18n.labels.unpinRow : i18n.labels.pinRow}
       onClick={(event) => {
         // Pinning must not bubble into the row's onRowClick handler.
         event.stopPropagation()
@@ -1598,16 +2112,11 @@ function DataGridTableRowSelect<TData extends object>({
 }: {
   row: Row<DataGridFeatures, TData>
 }) {
+  const { i18n } = useDataGrid()
   return (
     <Subscribe source={row.table.atoms.rowSelection}>
       {() => (
         <>
-          <div
-            className={cn(
-              "bg-primary absolute inset-s-0 top-0 bottom-0 hidden w-[2px]",
-              row.getIsSelected() && "block"
-            )}
-          ></div>
           <Checkbox
             checked={row.getIsSelected()}
             indeterminate={row.getIsSomeSelected() && !row.getIsSelected()}
@@ -1616,7 +2125,7 @@ function DataGridTableRowSelect<TData extends object>({
               // Selection must not bubble into the row's onRowClick handler.
               event.stopPropagation()
             }}
-            aria-label="Select row"
+            aria-label={i18n.labels.selectRow}
             className="align-[inherit]"
           />
         </>
@@ -1626,7 +2135,7 @@ function DataGridTableRowSelect<TData extends object>({
 }
 
 function DataGridTableRowSelectAll() {
-  const { table, recordCount, isLoading } = useDataGrid()
+  const { i18n, table, recordCount, isLoading } = useDataGrid()
 
   // `getIsSomePageRowsSelected()` means "at least one" in v9, where v8 meant
   // "some but not all", so the all-selected case has to be excluded explicitly
@@ -1645,7 +2154,7 @@ function DataGridTableRowSelectAll() {
             onCheckedChange={(value) =>
               table.toggleAllPageRowsSelected(!!value)
             }
-            aria-label="Select all"
+            aria-label={i18n.labels.selectAll}
             className="align-[inherit]"
           />
         )
@@ -1667,7 +2176,7 @@ function DataGridTableRowExpand<TData extends object>({
   /** Custom toggle icon; replaces the default chevron. */
   children?: ReactNode
 }) {
-  const { props } = useDataGrid()
+  const { i18n, props } = useDataGrid()
   const isExpanded = row.getIsExpanded()
   const controlSize = props.tableLayout?.dense ? "size-6" : "size-7"
 
@@ -1684,7 +2193,9 @@ function DataGridTableRowExpand<TData extends object>({
         <button
           type="button"
           aria-expanded={isExpanded}
-          aria-label={isExpanded ? "Collapse row" : "Expand row"}
+          aria-label={
+            isExpanded ? i18n.labels.collapseRow : i18n.labels.expandRow
+          }
           onClick={(event) => {
             // Expansion must not bubble into the row's onRowClick handler.
             event.stopPropagation()
@@ -1727,7 +2238,7 @@ function DataGridTableBodyRows<TData extends object>({
 }: {
   table: DataGridTableInstance<TData>
 }) {
-  const { isLoading, props } = useDataGrid()
+  const { i18n, isLoading, props } = useDataGrid()
   const pagination = table.state.pagination
 
   if (isLoading && props.loadingMode === "skeleton" && pagination?.pageSize) {
@@ -1793,7 +2304,7 @@ function DataGridTableBodyRows<TData extends object>({
                 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
               ></path>
             </svg>
-            {props.loadingMessage || "Loading..."}
+            {props.loadingMessage || i18n.labels.loading}
           </div>
         </td>
       </tr>
@@ -1824,10 +2335,15 @@ function DataGridTableBodyRows<TData extends object>({
  * Memoized body rows: skip re-renders during active column resize.
  * Column widths update via CSS variables on the <table> element,
  * so the browser handles width changes without React re-renders.
+ * A cell-selection drag gets the same treatment: the root re-renders once per
+ * cell crossed, but painting goes through each cell's own Subscribe, so row
+ * reconciliation during the drag is pure waste.
  */
 const MemoizedDataGridTableBodyRows = memo(
   DataGridTableBodyRows,
-  (_prev, next) => !!next.table.state.columnResizing.isResizingColumn
+  (_prev, next) =>
+    !!next.table.state.columnResizing.isResizingColumn ||
+    next.table._isSelectingCells === true
 ) as typeof DataGridTableBodyRows
 
 function DataGridTableHeader<TData extends object>() {
@@ -1988,6 +2504,8 @@ function DataGridTable<TData extends object>({
 
         <DataGridTableBody>
           <MemoizedDataGridTableBodyRows table={table} />
+          {props.appendRow}
+          <DataGridTableAddRow />
         </DataGridTableBody>
 
         {footerContent && (
@@ -2000,6 +2518,7 @@ function DataGridTable<TData extends object>({
 
 export {
   DataGridTable,
+  DataGridTableAddRow,
   DataGridTableBase,
   DataGridTableBody,
   DataGridTableBodyRow,
diff --git a/apps/web/src/components/reui/data-grid/data-grid.tsx b/apps/web/src/components/reui/data-grid/data-grid.tsx
index a6186e0..1b90a92 100644
--- a/apps/web/src/components/reui/data-grid/data-grid.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid.tsx
@@ -1,6 +1,19 @@
-import { createContext, useContext, useEffect, useMemo, useRef } from "react"
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+} from "react"
 import type { ReactNode } from "react"
 import {
+  mergeDataGridI18n,
+  type DataGridI18nConfig,
+  type DataGridI18nOverrides,
+} from "@/components/reui/data-grid/data-grid-i18n"
+import {
+  cellSelectionFeature,
   columnFacetingFeature,
   columnFilteringFeature,
   columnOrderingFeature,
@@ -30,6 +43,7 @@ import {
   tableFeatures,
 } from "@tanstack/react-table"
 import type {
+  Cell,
   Column,
   ColumnFiltersState,
   ReactTable,
@@ -49,6 +63,39 @@ import { cn } from "@evobgp/ui/lib/utils"
  * installing the data grid no longer widens `ColumnMeta` for every other
  * table in the consuming app.
  */
+/**
+ * Per-column write contract for the spreadsheet operations (paste, fill,
+ * clear, cut). Presence marks the column writable; every write still flows
+ * through `onCellsChange`, so the consumer's state stays the only data owner.
+ */
+export interface DataGridColumnCellEdit<TData> {
+  /**
+   * Set false for a column that formats clipboard output but is never
+   * written; a function decides per row, so locked rows (archived, another
+   * user's, a totals row) reject like any read-only cell. Defaults to true.
+   */
+  editable?: boolean | ((row: TData) => boolean)
+  /**
+   * Clipboard or fill string to typed value. Return undefined to reject the
+   * cell into `rejected`. Without it the raw string passes through unchanged -
+   * a deliberate non-coercion, so a number column receives strings only when
+   * the consumer chose not to parse.
+   */
+  parse?: (raw: string, row: TData) => unknown
+  /** Typed value to clipboard string. Fallback: String(value ?? ""). */
+  format?: (value: unknown, row: TData) => string
+  /** Value dispatched by Delete/Backspace and cut. Defaults to null. */
+  clearValue?: unknown
+  /**
+   * Opt into the grid's built-in free-text editor: an overlay input (or
+   * auto-growing textarea) flush over the focused cell, opened by Enter, F2,
+   * typing, or double-click, committing through `onCellsChange` as source
+   * `"edit"` with `parse` applied. Columns without it stay consumer-edited
+   * via `onCellEditRequest` or their own cell renderers.
+   */
+  control?: "text" | "textarea"
+}
+
 export interface DataGridColumnMeta<TData> {
   headerTitle?: string
   headerClassName?: string
@@ -56,6 +103,15 @@ export interface DataGridColumnMeta<TData> {
   skeleton?: ReactNode
   expandedContent?: (row: TData) => ReactNode
   autoSize?: boolean
+  cellEdit?: DataGridColumnCellEdit<TData>
+  /**
+   * Under `columnsResizable`, this column absorbs the free space the filler
+   * strip would otherwise hold, so the grid always reads full-width and the
+   * built-in editor covers the whole cell. One column per grid; while free
+   * space remains, manual resizing of this column is visually a no-op (the
+   * absorbed space compensates), the flex-column trade-off.
+   */
+  fillWidth?: boolean
 }
 
 /**
@@ -105,6 +161,10 @@ export const dataGridFeatures = tableFeatures({
   rowSelectionFeature,
   rowExpandingFeature,
   rowPinningFeature,
+  // Registration alone is inert: it seeds a `cellSelection: []` slice and
+  // prototype methods but binds no DOM handlers, so grids without
+  // `tableLayout.cellSelection` render and behave exactly as before.
+  cellSelectionFeature,
   sortedRowModel: createSortedRowModel(),
   filteredRowModel: createFilteredRowModel(),
   paginatedRowModel: createPaginatedRowModel(),
@@ -156,6 +216,131 @@ export function getColumnHeaderLabel<TData extends RowData, TValue>(
   return String(column.id)
 }
 
+/**
+ * The td contract for spreadsheet selection. Call inside a
+ * `Subscribe source={table.atoms.cellSelection}` render only: the reads are
+ * builder calls whose state dependency React Compiler cannot see, exactly the
+ * trap the row-selection checkbox documents.
+ */
+export function getDataGridCellSelectionCellAttrs<TData extends object>(
+  cell: Cell<DataGridFeatures, TData, unknown>
+): {
+  "aria-selected": boolean
+  "data-col-id": string
+  "data-cell-selected": true | undefined
+  "data-cell-focused": true | undefined
+  "data-cell-edge-top": true | undefined
+  "data-cell-edge-right": true | undefined
+  "data-cell-edge-bottom": true | undefined
+  "data-cell-edge-left": true | undefined
+} {
+  const selected = cell.getIsSelected()
+  const edges = cell.getSelectionEdges()
+  return {
+    "aria-selected": selected,
+    "data-col-id": cell.column.id,
+    "data-cell-selected": selected || undefined,
+    "data-cell-focused": cell.getIsFocused() || undefined,
+    "data-cell-edge-top": edges.top || undefined,
+    "data-cell-edge-right": edges.right || undefined,
+    "data-cell-edge-bottom": edges.bottom || undefined,
+    "data-cell-edge-left": edges.left || undefined,
+  }
+}
+
+/**
+ * Selection chrome for a body td, activated by the data attributes above plus
+ * the imperatively toggled `data-cell-fill-target` (fill-drag preview, written
+ * outside React like the resize indicator). A ::before overlay, not outline
+ * or box-shadow: an outline ring hugs the cell box and cannot line up with
+ * the gridlines the perimeter paints on, and the pinned-column dividers
+ * already own the cell's shadow slot (tailwind-merge would collapse a second
+ * shadow-[...] into it).
+ */
+export const dataGridCellSelectionCellClasses = cn(
+  "relative select-none",
+  // A light tint: the selection must read as a range without drowning the
+  // gridlines under a heavy fill. The focused cell stays unfilled. Pinned
+  // cells must stay OPAQUE (they hide scrolled content), so they get the
+  // tint pre-mixed over the background, and the focused pinned cell keeps
+  // a solid background instead of turning transparent.
+  "data-[cell-selected]:bg-primary/4",
+  "data-[cell-selected]:data-pinned:bg-[color-mix(in_oklab,var(--primary)_4%,var(--background))]",
+  "data-[cell-focused]:bg-transparent!",
+  "data-[cell-focused]:data-pinned:bg-background!",
+  // Every selection line is one layout-free ::before overlay per cell. It
+  // reaches 1px BEYOND the cell so each line paints exactly ON the shared
+  // gridline it replaces: the range perimeter and the interior dividers
+  // share this geometry, so where they meet they coincide instead of
+  // stacking into a wider edge, every side stays exactly 1px, and
+  // selecting never adds real borders that shift layout. At the table's
+  // own boundary there is no shared gridline and the overshoot leaves the
+  // scrollable content box, where it is CLIPPED - the perimeter simply
+  // vanished on the first column, last column and last row. So every
+  // overshoot that can hit a boundary goes through a variable the
+  // boundary cells zero out. Longhand inset utilities only, logical
+  // start/end
+  // so RTL mirrors for free; a separate override rule cannot do this,
+  // equal-specificity variants leave shorthand-vs-longhand to sort order.
+  "data-[cell-selected]:before:pointer-events-none data-[cell-selected]:before:absolute data-[cell-selected]:before:top-[var(--data-grid-overlay-top,-1px)] data-[cell-selected]:before:start-[var(--data-grid-overlay-start,-1px)] data-[cell-selected]:before:end-[var(--data-grid-overlay-end,-1px)] data-[cell-selected]:before:bottom-[var(--data-grid-overlay-bottom,-1px)] data-[cell-selected]:before:border-primary data-[cell-selected]:before:content-['']",
+  "data-[cell-focused]:before:pointer-events-none data-[cell-focused]:before:absolute data-[cell-focused]:before:top-[var(--data-grid-overlay-top,-1px)] data-[cell-focused]:before:start-[var(--data-grid-overlay-start,-1px)] data-[cell-focused]:before:end-[var(--data-grid-overlay-end,-1px)] data-[cell-focused]:before:bottom-[var(--data-grid-overlay-bottom,-1px)] data-[cell-focused]:before:border-primary data-[cell-focused]:before:content-['']",
+  // Interior dividers: selected cells repaint their own end and bottom
+  // gridlines on the overlay, so gridline-less grids still divide a range.
+  // The gray color is guarded by not- variants (higher specificity), so a
+  // side that belongs to the range perimeter deterministically stays
+  // primary.
+  "data-[cell-selected]:before:border-e data-[cell-selected]:before:border-b",
+  "data-[cell-selected]:not-data-[cell-edge-right]:before:border-e-border",
+  "data-[cell-selected]:not-data-[cell-edge-bottom]:before:border-b-border",
+  // The Sheets model: a single selected cell IS its own range, so the four
+  // edge attributes below already draw its full primary box; inside a
+  // larger range the anchor reads by its unfilled background alone. The
+  // explicit ring only covers a focused cell with no selection at all.
+  // Edge sides are logical (border-e/border-s): the feature derives edges
+  // from display-order column indexes, which mirror in RTL.
+  "data-[cell-focused]:not-data-[cell-selected]:before:border",
+  "data-[cell-edge-top]:before:border-t data-[cell-edge-right]:before:border-e data-[cell-edge-bottom]:before:border-b data-[cell-edge-left]:before:border-s",
+  // While a fill drag is live the preview border is the ONE painter for
+  // the whole pending region, so the source cells' own chrome rests -
+  // otherwise its lines double against the region border at every shared
+  // edge. display is the no-cascade-fight switch (see below).
+  "in-data-[cell-filling]:data-[cell-selected]:before:hidden",
+  "in-data-[cell-filling]:data-[cell-focused]:before:hidden",
+  // While the built-in editor is open its outline is the one border; the
+  // edited cell's own overlay chrome hides so nothing peeks around the
+  // flush editor. display is the switch because no other before: rule
+  // sets it, so there is no cascade order to lose.
+  "in-data-[cell-editing]:data-[cell-focused]:before:hidden",
+  // Clamped to the cell edge at the grid's own boundary, the overlay's
+  // lines sit flush against the container border instead of being clipped
+  // away outside the scrollable content. A custom property has no cascade
+  // fight to lose. First/last-child cover the boundary columns: when a
+  // filler td follows the last data column, that cell's overshoot lands
+  // INSIDE the table and needs no clamp, and the td:first/last-child of a
+  // row are its logical start/end in RTL too.
+  "in-[tr:last-child]:[--data-grid-overlay-bottom:0px]",
+  // The top overshoot lands under a sticky header, which is positioned and
+  // paints over it - so the first row's perimeter lost its top line. Clamp
+  // inside the cell there, exactly like the other three boundaries.
+  "in-[tr:first-child]:[--data-grid-overlay-top:0px]",
+  "first:[--data-grid-overlay-start:0px]",
+  "last:[--data-grid-overlay-end:0px]",
+  // A pinned column is a boundary like the grid's own edges: the sticky
+  // neighbor would cover an on-gridline overlay line, and re-painting it
+  // from the pinned side doubles into a 2px blur whenever subpixel
+  // positions disagree (browser zoom, fractional fill widths). One
+  // painter instead: the overlay clamps inside its own cell there, the
+  // same custom-property clamp the first and last cells use.
+  "[&:has(+td[data-pinned])]:[--data-grid-overlay-end:0px]",
+  "[&:has(+[data-slot=data-grid-table-fill-body-cell]:last-child)]:[--data-grid-overlay-end:0px]",
+  "[&:has(+[data-slot=data-grid-table-fill-body-cell]+td[data-pinned])]:[--data-grid-overlay-end:0px]",
+  "[td[data-pinned]+&]:[--data-grid-overlay-start:0px]",
+  // Tint only: the dashed region outline is one overlay element drawn by
+  // the fill session, so neighboring target cells never double their edges.
+  "data-[cell-fill-target]:bg-primary/4",
+  "data-[cell-fill-target]:data-pinned:bg-[color-mix(in_oklab,var(--primary)_4%,var(--background))]"
+)
+
 export type DataGridApiFetchParams = {
   pageIndex: number
   pageSize: number
@@ -188,6 +373,10 @@ export interface DataGridContextProps<TData extends object> {
   table: DataGridTableInstance<TData>
   recordCount: number
   isLoading: boolean
+  /** Stable per-grid prefix for the DOM ids ARIA relations point at. */
+  gridId: string
+  /** The merged label set; components read `i18n.labels.<key>`. */
+  i18n: DataGridI18nConfig
   /**
    * Internal coordinator for `meta.autoSize` columns. Lives at the core level
    * so every table variant and viewport instance shares one application state.
@@ -195,13 +384,66 @@ export interface DataGridContextProps<TData extends object> {
   autoSize?: DataGridAutoSizeController
 }
 
+/**
+ * Row and column ids are consumer strings; DOM ids cannot carry spaces or
+ * quotes. One shared sanitizer so `aria-activedescendant` writers and the id
+ * renderers always agree on the same encoding.
+ */
+export function toDataGridDomId(value: string): string {
+  return value.replace(/[^\w-]/g, "_")
+}
+
 export type DataGridAutoSizeController = {
   /**
-   * Grows the first visible `meta.autoSize` column by the given free space.
-   * Applies at most once per column id; safe to call from every viewport
-   * measurement. Returns true when a sizing update was dispatched.
+   * Feeds the controller one viewport measurement: the SIGNED free space
+   * between the scroll container and the table, negative while the table
+   * overflows. The first sight of a `meta.autoSize` column absorbs the
+   * free space into its width; after that, every measurement REFLOWS the
+   * same growth - a wider window widens the column, a narrower one gives
+   * the space back down to the column's `minSize` (or its starting width
+   * when none is set) - so the grid tracks its container live. Commits
+   * are coalesced for performance: sub-pixel deltas are dropped, a
+   * streaming resize gets one leading commit plus one trailing commit at
+   * settle, and a width the user dragged is never touched. Safe to call
+   * from every viewport measurement; returns true when a sizing update
+   * was dispatched.
    */
-  apply: (fillWidth: number) => boolean
+  apply: (freeSpace: number) => boolean
+}
+
+type DataGridAutoSizeReflowState = {
+  applied: { columnId: string; base: number; grown: number } | null
+  settleTimer: ReturnType<typeof setTimeout> | null
+  pendingFreeSpace: number
+  lastCommitAt: number
+}
+
+/**
+ * Bookkeeping keyed on the TABLE STORE, never on a React instance: dev
+ * StrictMode double-mounts the tree, so two controller instances serve one
+ * page and only the first would remember what it absorbed - the second
+ * reads the grown width as a user drag and freezes the column. The store
+ * object is the one identity that provably survives that dance (the
+ * absorbed sizing rides inside it), and the WeakMap lets a discarded
+ * table take its bookkeeping with it.
+ */
+const dataGridAutoSizeStates = new WeakMap<
+  object,
+  DataGridAutoSizeReflowState
+>()
+
+function getDataGridAutoSizeState(store: object): DataGridAutoSizeReflowState {
+  let state = dataGridAutoSizeStates.get(store)
+  if (!state) {
+    state = {
+      applied: null,
+      settleTimer: null,
+      pendingFreeSpace: 0,
+      lastCommitAt: 0,
+    }
+    dataGridAutoSizeStates.set(store, state)
+  }
+  return state
 }
 
 function createDataGridAutoSizeController<TData extends object>(
@@ -217,29 +459,95 @@ function createDataGridAutoSizeController<TData extends object>(
    */
   getTable: () => DataGridTableInstance<TData>
 ): DataGridAutoSizeController {
-  let applied: { columnId: string; base: number; grown: number } | null = null
+  // Reflow coalescing: a live window drag streams a measurement per frame,
+  // and every accepted commit re-renders the table. One leading commit
+  // keeps single snaps (a maximize) instant; the rest of the stream parks
+  // its latest value behind one trailing timer, so a continuous drag costs
+  // two commits instead of sixty a second. The trailing timer may fire
+  // after the grid unmounts; it re-reads the table then, and a sizing
+  // write to the consumer's store is inert once nothing renders it.
+  const SETTLE_MS = 150
+
+  const reflow = (freeSpace: number): boolean => {
+    const table = getTable()
+    const state = getDataGridAutoSizeState(table.store)
+    // LIVE state, never the render snapshot: a measurement can run between
+    // our own sizing commit and React's re-render, and the stale snapshot
+    // would hide the width this controller just wrote.
+    const columnSizing =
+      table.atoms.columnSizing?.get() ?? table.state.columnSizing
+    if (!state.applied) return false
+    const autoSizeColumn = table
+      .getVisibleLeafColumns()
+      .find(
+        (column) => column.columnDef.meta?.autoSize && column.getCanResize()
+      )
+    if (!autoSizeColumn || autoSizeColumn.id !== state.applied.columnId)
+      return false
+    // A width this coordinator did not write belongs to the user's drag;
+    // reflow stands down until a reset re-arms the column.
+    const currentSize = columnSizing[state.applied.columnId]
+    if (currentSize !== undefined && currentSize !== state.applied.grown) {
+      return false
+    }
+    // The free space as it would measure with our growth removed; the
+    // target re-absorbs exactly that, floored at minSize so a narrow
+    // window hands space back without ever crushing the column (no
+    // explicit minSize floors at the starting width instead).
+    const freeAtBase = freeSpace + (state.applied.grown - state.applied.base)
+    const floor = autoSizeColumn.columnDef.minSize ?? state.applied.base
+    const target = Math.max(floor, state.applied.base + freeAtBase)
+    if (Math.abs(target - state.applied.grown) < 1) return false
+    state.applied = { ...state.applied, grown: target }
+    table.setColumnSizing((old) => ({
+      ...old,
+      [state.applied!.columnId]: target,
+    }))
+    return true
+  }
 
   return {
-    apply(fillWidth: number) {
+    apply(freeSpace: number) {
       const table = getTable()
-      const columnSizing = table.state.columnSizing
+      const state = getDataGridAutoSizeState(table.store)
+      // Same live read as `reflow`; the snapshot race is what made the
+      // re-arm check clear the bookkeeping right after the first absorb.
+      const columnSizing =
+        table.atoms.columnSizing?.get() ?? table.state.columnSizing
 
       // Re-arm after reset flows (double-click resetSize, resetColumnSizing,
       // controlled state replacement) so the column re-fills instead of
       // leaving a dead blank strip.
-      if (applied && columnSizing[applied.columnId] === undefined) {
-        applied = null
+      if (state.applied && columnSizing[state.applied.columnId] === undefined) {
+        state.applied = null
       }
 
-      if (fillWidth <= 0) return false
-
       const autoSizeColumn = table
         .getVisibleLeafColumns()
         .find(
           (column) => column.columnDef.meta?.autoSize && column.getCanResize()
         )
 
-      if (!autoSizeColumn || applied?.columnId === autoSizeColumn.id) {
+      if (autoSizeColumn && state.applied?.columnId === autoSizeColumn.id) {
+        state.pendingFreeSpace = freeSpace
+        const now = Date.now()
+        if (now - state.lastCommitAt > SETTLE_MS) {
+          state.lastCommitAt = now
+          return reflow(freeSpace)
+        }
+        if (state.settleTimer !== null) clearTimeout(state.settleTimer)
+        state.settleTimer = setTimeout(() => {
+          state.settleTimer = null
+          state.lastCommitAt = Date.now()
+          reflow(state.pendingFreeSpace)
+        }, SETTLE_MS)
+        return false
+      }
+
+      const fillWidth = Math.max(0, freeSpace)
+      if (fillWidth <= 0) return false
+
+      if (!autoSizeColumn) {
         return false
       }
 
@@ -249,13 +557,13 @@ function createDataGridAutoSizeController<TData extends object>(
       // un-resizable: the drag committed, the next viewport measurement
       // stamped the fill back on top, and the column snapped to its old width.
       //
-      // Deliberately keyed on observed state rather than on `applied`, which
+      // Deliberately keyed on observed state rather than on `state.applied`, which
       // is per-coordinator memory: anything that rebuilds the coordinator
       // (a remount, a new table store) forgets what it did, and the guard has
       // to survive that. An explicit reset clears the entry and re-arms the
       // fill, which is what makes double-click-to-reset still work.
       const currentSize = columnSizing[autoSizeColumn.id]
-      if (currentSize !== undefined && currentSize !== applied?.grown) {
+      if (currentSize !== undefined && currentSize !== state.applied?.grown) {
         return false
       }
 
@@ -264,13 +572,14 @@ function createDataGridAutoSizeController<TData extends object>(
       // user hasn't manually resized that column since, so visibility
       // toggles cannot ratchet the table wider than its container forever.
       const revert =
-        applied && columnSizing[applied.columnId] === applied.grown
-          ? applied
+        state.applied &&
+        columnSizing[state.applied.columnId] === state.applied.grown
+          ? state.applied
           : null
       const base = columnSizing[autoSizeColumn.id] ?? autoSizeColumn.getSize()
       const grown = base + fillWidth
 
-      applied = { columnId: autoSizeColumn.id, base, grown }
+      state.applied = { columnId: autoSizeColumn.id, base, grown }
       table.setColumnSizing((old) => {
         const next = { ...old, [autoSizeColumn.id]: grown }
         if (revert && next[revert.columnId] === revert.grown) {
@@ -291,6 +600,104 @@ export type DataGridRequestParams = {
   columnFilters?: ColumnFiltersState
 }
 
+/** Which spreadsheet operation produced a cell change batch. */
+export type DataGridCellsChangeSource =
+  | "paste"
+  | "cut"
+  | "clear"
+  | "fill"
+  | "edit"
+
+export interface DataGridCellChange<TData> {
+  rowId: string
+  columnId: string
+  /** The consumer's row object, so immutable write-back needs no second lookup. */
+  row: TData
+  /** Accessor value at dispatch time; enables consumer-side undo stacks. */
+  previousValue: unknown
+  /** Typed value produced by `meta.cellEdit.parse`, or `clearValue` for clear/cut. */
+  value: unknown
+}
+
+/** What onCellsCopy receives after the grid writes the clipboard. */
+export interface DataGridCopyDetails {
+  /** The TSV text that reached the clipboard. */
+  text: string
+  /** The same content as a row-major grid of formatted fields. */
+  grid: string[][]
+  /** True when the write came from a cut, which clears the region next. */
+  cut: boolean
+}
+
+/** One resolved positive region, in pre-paginated display indexes. */
+export interface DataGridCellSelectionBound {
+  minRowIndex: number
+  maxRowIndex: number
+  minColumnIndex: number
+  maxColumnIndex: number
+}
+
+/** What onCellSelectionChange receives, resolved from the live selection. */
+export interface DataGridCellSelectionSnapshot {
+  /** The virtually focused cell, the active range's anchor. Null when clear. */
+  focused: { rowId: string; columnId: string } | null
+  /** Every positive region, geometric order. */
+  bounds: DataGridCellSelectionBound[]
+  /** The most recent region, the one copy and paste act on. */
+  activeBound: DataGridCellSelectionBound | null
+  /**
+   * Cells of the selection the view can show - the count that matches the
+   * painted range and what a batch will touch.
+   */
+  visibleCellCount: number
+}
+
+export interface DataGridCellRejection {
+  rowId: string
+  columnId: string
+  raw: string
+  reason: "readonly" | "invalid"
+}
+
+/**
+ * Lifecycle of a row for the optional CRUD indications: "new" and "dirty"
+ * tint the row, "deleted" mutes and strikes it. Purely presentational - the
+ * consumer's state stays the only owner of what the statuses mean.
+ */
+export type DataGridRowStatus = "new" | "dirty" | "deleted"
+
+/**
+ * Lifecycle of a cell for the optional CRUD indications: a corner mark in
+ * the amber tone for "dirty", the destructive tone for "invalid".
+ */
+export type DataGridCellStatus = "dirty" | "invalid"
+
+/**
+ * Asks the consumer to open its editor for the focused cell: Enter or F2, or
+ * a typed printable character (then `initialText` carries it, the
+ * Notion/Airtable type-to-replace flow). Dispatched only for cells whose
+ * column is writable via `meta.cellEdit`.
+ */
+export interface DataGridCellEditRequest<TData> {
+  rowId: string
+  columnId: string
+  row: TData
+  previousValue: unknown
+  /** The typed character that started the edit; absent for Enter and F2. */
+  initialText?: string
+}
+
+/**
+ * One batch per operation, however many cells it spans: a 10k-cell paste is
+ * one callback, one consumer setState, one table rebuild. The grid never
+ * writes data itself.
+ */
+export interface DataGridCellsChangeDetails<TData> {
+  source: DataGridCellsChangeSource
+  changes: DataGridCellChange<TData>[]
+  rejected: DataGridCellRejection[]
+}
+
 export interface DataGridProps<
   TFeatures extends TableFeatures,
   TData extends object,
@@ -300,7 +707,62 @@ export interface DataGridProps<
   recordCount: number
   children?: ReactNode
   onRowClick?: (row: TData) => void
+  /**
+   * Receives every spreadsheet write batch (paste, cut, clear, fill, edit).
+   * Served through the props getter like `onRowClick`, so an inline identity
+   * never republishes the context. Absent: copy still works, writes no-op.
+   */
+  onCellsChange?: (details: DataGridCellsChangeDetails<TData>) => void
+  /**
+   * Opens the consumer's editor from the keyboard: Enter, F2, or typing on
+   * the focused cell. Absent: Enter keeps moving down, typing does nothing.
+   */
+  onCellEditRequest?: (request: DataGridCellEditRequest<TData>) => void
+  /**
+   * Fires on every cell-selection change (focus moves, ranges grow or
+   * clear) with a resolved snapshot, so a selection count, formula bar or
+   * context panel needs no reach into TanStack internals.
+   */
+  onCellSelectionChange?: (snapshot: DataGridCellSelectionSnapshot) => void
+  /**
+   * Fires after the grid writes the clipboard (Cmd/Ctrl+C or X, or the
+   * native copy and cut events), e.g. to confirm with a toast.
+   */
+  onCellsCopy?: (details: DataGridCopyDetails) => void
+  /**
+   * Renders an "Add row" affordance as the table body's last row; clicking
+   * it is the consumer's cue to start creating a row. Absent: no row.
+   */
+  onRowCreate?: () => void
+  /** Label of the onRowCreate affordance. Defaults to "Add row". */
+  rowCreateLabel?: ReactNode
+  /**
+   * Rendered inside the table body after the data rows: the slot a DRAFT
+   * row lives in while it is being created, before it joins `data` and the
+   * pagination math. Supply a `<tr>` of cells; the colgroup sizes them.
+   */
+  appendRow?: ReactNode
+  /**
+   * Optional CRUD indication per row. Return undefined for no indication;
+   * omit the prop entirely to render none anywhere.
+   */
+  getRowStatus?: (row: TData) => DataGridRowStatus | undefined
+  /**
+   * Optional CRUD indication per cell: the classic corner mark on cells the
+   * consumer tracks as edited or invalid.
+   */
+  getCellStatus?: (
+    row: TData,
+    columnId: string
+  ) => DataGridCellStatus | undefined
   isLoading?: boolean
+  /**
+   * Overrides for every built-in string: menu items, aria labels,
+   * pagination copy, state messages. Merged over the defaults; a more
+   * specific component prop (`rowCreateLabel`, `loadingMessage`, the
+   * pagination label props) still wins over its `i18n` counterpart.
+   */
+  i18n?: DataGridI18nOverrides
   loadingMode?: "skeleton" | "spinner"
   loadingMessage?: ReactNode | string
   fetchingMoreMessage?: ReactNode | string
@@ -325,6 +787,36 @@ export interface DataGridProps<
     columnsDraggable?: boolean
     rowsDraggable?: boolean
     rowsPinnable?: boolean
+    /** Spreadsheet cell range selection: mouse ranges, keyboard, clipboard chrome. */
+    cellSelection?: boolean
+    /**
+     * "range" (default): drag, Shift and Ctrl/Cmd gestures and Shift+keys
+     * grow multi-cell regions. "single": one focused cell only - every
+     * gesture collapses to it and Ctrl/Cmd+A is inert.
+     */
+    cellSelectionMode?: "single" | "range"
+    /** Drag-to-fill handle on the selection corner. Requires cellSelection. */
+    cellFillHandle?: boolean
+    /**
+     * How a cell opens its editor from the mouse: "dblclick" (default,
+     * the spreadsheet standard - first click focuses, second edits) or
+     * "click", opening the editor as soon as a plain click lands on the
+     * focused cell; modifier clicks and drags still select.
+     */
+    cellEditMode?: "dblclick" | "click"
+    /**
+     * When true, committing an edit with Enter moves focus down (Shift+Enter
+     * up), the Sheets and Excel convention. Off by default: the commit keeps
+     * focus on the edited cell. Tab always commits and moves across.
+     */
+    cellEditEnterAdvance?: boolean
+    /**
+     * The handle's look: "dot" is a solid primary dot kept inside the
+     * cell corner; "ring" is the Sheets-style hollow circle riding the
+     * corner point, clamped at the grid's own boundary; "square" is the
+     * Excel-style solid square inside the corner. Default "dot".
+     */
+    cellFillHandleVariant?: "dot" | "ring" | "square"
   }
   tableClassNames?: {
     base?: string
@@ -335,6 +827,20 @@ export interface DataGridProps<
     bodyRow?: string
     footer?: string
     edgeCell?: string
+    /** Override the getRowStatus tints; defaults are the warning-muted set. */
+    rowNew?: string
+    rowDirty?: string
+    rowDeleted?: string
+    /**
+     * Override the pinned-row chrome (muted tint, boundary shadow). A grid
+     * that pins a draft row for quick-create wants it to read as an active
+     * row, not a muted one.
+     */
+    rowPinned?: string
+    /** The onRowCreate affordance row, e.g. to match the grid's row height. */
+    rowCreate?: string
+    /** The fill handle, e.g. to restyle or resize it beyond the built-in variants. */
+    cellFillHandle?: string
   }
 }
 
@@ -372,11 +878,16 @@ function DataGridProvider<TData extends object>({
 }) {
   // Latest-props ref: context reads always resolve fresh props through the
   // getter below without the memoized context value depending on unstable
+  // Stable for the grid's lifetime; ARIA ids and relations hang off it.
+  const gridId = useId()
   // ReactNode/function prop identities (inline emptyMessage/onRowClick would
   // otherwise publish a new context value on every consumer render - at
   // mousemove rate during a resize drag, piercing the body-rows memo).
   const propsRef = useRef(props)
   propsRef.current = props
+  const i18n = mergeDataGridI18n(props.i18n)
+  const i18nRef = useRef(i18n)
+  i18nRef.current = i18n
 
   // Same treatment for the table itself, which v9 - unlike v8 - re-creates on
   // every state change. Depending on it directly would republish the context
@@ -401,6 +912,32 @@ function DataGridProvider<TData extends object>({
     table.setOptions((old) => ({ ...old, columnResizeMode: resizeMode }))
   }, [table, resizeMode])
 
+  // With the selection UI on, every paste/fill/clear batch replaces `data`,
+  // and the feature's default autoResetCellSelection would wipe the selection
+  // after each write. Ranges are row-id based and unresolvable ids drop out
+  // of the bounds safely, so keeping state across data edits is the correct
+  // default here.
+  const cellSelectionOn = !!props.tableLayout?.cellSelection
+  useEffect(() => {
+    if (!cellSelectionOn || table.atoms.cellSelection == null) return
+    if (table.options.autoResetCellSelection === false) return
+    table.setOptions((old) => ({ ...old, autoResetCellSelection: false }))
+  }, [table, cellSelectionOn])
+
+  // Rendered row indexes re-base per page, so a range kept across a page flip
+  // re-lights the same positions over different rows. A page change clears
+  // the selection instead - the rule Excel-family grids apply to paginated
+  // range selection.
+  const pageKey = `${table.state.pagination?.pageIndex}:${table.state.pagination?.pageSize}`
+  const previousPageKeyRef = useRef(pageKey)
+  useEffect(() => {
+    if (previousPageKeyRef.current === pageKey) return
+    previousPageKeyRef.current = pageKey
+    if (!cellSelectionOn || table.atoms.cellSelection == null) return
+    tableRef.current.resetCellSelection(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageKey, cellSelectionOn])
+
   // One autoSize coordinator per table instance so split header/body viewports
   // cannot apply the growth twice. Keyed on `table.store`, which v9 keeps
   // stable for the life of the table, rather than on `table` itself: the
@@ -419,6 +956,9 @@ function DataGridProvider<TData extends object>({
   // ReactNode/function props (messages, onRowClick) are also excluded: they
   // are served fresh through the props getter, so unstable inline identities
   // cannot invalidate the context value.
+  // `cellSelection` state is excluded on purpose too: a drag writes it once
+  // per cell crossed, and nothing reads it through context - cells and the
+  // selection bar subscribe to `table.atoms.cellSelection` directly.
   const value = useMemo(
     () => ({
       get props() {
@@ -427,8 +967,12 @@ function DataGridProvider<TData extends object>({
       get table() {
         return tableRef.current
       },
+      get i18n() {
+        return i18nRef.current
+      },
       recordCount: props.recordCount,
       isLoading: props.isLoading || false,
+      gridId,
       autoSize,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -495,6 +1039,8 @@ function DataGrid<TFeatures extends TableFeatures, TData extends object>({
       columnsDraggable: false,
       rowsDraggable: false,
       rowsPinnable: false,
+      cellSelection: false,
+      cellFillHandle: false,
     },
     tableClassNames: {
       base: "",
@@ -555,7 +1101,9 @@ function DataGridContainer({
   return (
     <div
       data-slot="data-grid"
-      className={cn("w-full overflow-hidden", className)}
+      // relative: anchors floating chrome composed inside the container,
+      // like the fill-drag preview outline.
+      className={cn("relative w-full overflow-hidden", className)}
     >
       {children}
     </div>
diff --git a/apps/web/src/components/reui/filters/filters-advanced.tsx b/apps/web/src/components/reui/filters/filters-advanced.tsx
index 8c2fe54..e79cf8d 100644
--- a/apps/web/src/components/reui/filters/filters-advanced.tsx
+++ b/apps/web/src/components/reui/filters/filters-advanced.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { FilterFieldPicker } from "@/components/reui/filters/filters-builder"
 import {
diff --git a/apps/web/src/components/reui/filters/filters-builder.tsx b/apps/web/src/components/reui/filters/filters-builder.tsx
index b4dff2a..7a8b479 100644
--- a/apps/web/src/components/reui/filters/filters-builder.tsx
+++ b/apps/web/src/components/reui/filters/filters-builder.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import {
   Cascader,
diff --git a/apps/web/src/components/reui/filters/filters-chip.tsx b/apps/web/src/components/reui/filters/filters-chip.tsx
index 601c4c7..00ee8e5 100644
--- a/apps/web/src/components/reui/filters/filters-chip.tsx
+++ b/apps/web/src/components/reui/filters/filters-chip.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import {
   filterControlSizes,
diff --git a/apps/web/src/components/reui/filters/filters-context.tsx b/apps/web/src/components/reui/filters/filters-context.tsx
index 479a428..cf5f4f9 100644
--- a/apps/web/src/components/reui/filters/filters-context.tsx
+++ b/apps/web/src/components/reui/filters/filters-context.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import type { FilterDraftAction } from "@/components/reui/filters/filters-draft"
 import type { FilterPathCollapse } from "@/components/reui/filters/filters-lib"
diff --git a/apps/web/src/components/reui/filters/filters-dnd.tsx b/apps/web/src/components/reui/filters/filters-dnd.tsx
index 83290ef..eab3742 100644
--- a/apps/web/src/components/reui/filters/filters-dnd.tsx
+++ b/apps/web/src/components/reui/filters/filters-dnd.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 
 /**
diff --git a/apps/web/src/components/reui/filters/filters-editors.tsx b/apps/web/src/components/reui/filters/filters-editors.tsx
index 8391c2a..e3d93a4 100644
--- a/apps/web/src/components/reui/filters/filters-editors.tsx
+++ b/apps/web/src/components/reui/filters/filters-editors.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import {
   Cascader,
diff --git a/apps/web/src/components/reui/filters/filters-types.tsx b/apps/web/src/components/reui/filters/filters-types.tsx
index 302f0f2..2322ea6 100644
--- a/apps/web/src/components/reui/filters/filters-types.tsx
+++ b/apps/web/src/components/reui/filters/filters-types.tsx
@@ -162,6 +162,14 @@ export interface FilterField<V = unknown, O = unknown> {
   operators?:
     | FilterOperator[]
     | ((field: FilterField<V, O>) => FilterOperator[])
+  /**
+   * The operator this field FALLS BACK to, not a way to preselect one. Both
+   * create paths deliberately start a rule on `operator: ""` so the condition
+   * menu opens with nothing chosen, so this is read when an existing rule
+   * changes field, and it is the value `FilterFieldPicker` hands to `onSelect`.
+   * Ignored, with a dev warning, when it names an operator the field does not
+   * offer; the first visible operator wins instead.
+   */
   defaultOperator?: string
 
   /** Overrides the editor chosen from `type`. See `FilterEditorProps`. */
diff --git a/apps/web/src/components/reui/filters/filters.tsx b/apps/web/src/components/reui/filters/filters.tsx
index 21e5a86..267a0eb 100644
--- a/apps/web/src/components/reui/filters/filters.tsx
+++ b/apps/web/src/components/reui/filters/filters.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { FiltersAdvanced } from "@/components/reui/filters/filters-advanced"
 import { FiltersBuilder } from "@/components/reui/filters/filters-builder"
diff --git a/apps/web/src/components/reui/frame.tsx b/apps/web/src/components/reui/frame.tsx
index 8d2d93c..8a91584 100644
--- a/apps/web/src/components/reui/frame.tsx
+++ b/apps/web/src/components/reui/frame.tsx
@@ -3,36 +3,30 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@evobgp/ui/lib/utils"
 
 /**
- * CSS variable architecture for FramePanel theming:
- *
- * The Frame parent sets --frame-panel-bg and --frame-panel-border-color.
- * FramePanel consumes them directly via bg-(--frame-panel-bg) and
- * border-(--frame-panel-border-color). This means:
- *
- *   - variant="inverse" overrides those vars on Frame → all panels pick it up
- *   - <FramePanel className="bg-blue-50"> adds a direct utility on the element
- *     which wins over bg-(--frame-panel-bg) by Tailwind source order — no
- *     :not() or !important needed
+ * Frame sets --frame-panel-bg and --frame-panel-border-color; FramePanel reads
+ * them back as bg-(--frame-panel-bg) and border-(--frame-panel-border-color).
+ * So variant="inverse" re-points every panel from one place, and a consumer's
+ * own bg-* on a panel still wins on source order, with no :not() and no `!`.
  */
 const frameVariants = cva(
   [
     "relative flex flex-col bg-muted/50 gap-(--frame-gap) px-(--frame-px) py-(--frame-py) rounded-(--frame-radius)",
-    "(--radius-xl)] [--frame-radius:var(--radius-xl)]",
-    "(--radius-none)] (--radius-2xl)] (--radius-lg)] (--radius-none)]",
+    // Each rung is the radius that style's own .cn-card resolves through, so a
+    // Frame and a Card side by side agree. lyra/sera are 0px, NOT
+    // var(--radius-none): no such token exists, and it only reached 0 by being
+    // invalid, which also left --frame-radius empty for anything reading it.
+    "[--frame-radius:var(--radius-xl)]",
     "[--frame-gap:--spacing(0.75)] [--frame-px:--spacing(0.75)] [--frame-py:--spacing(0.75)] [--frame-panel-header-gap:0rem] [--frame-panel-footer-gap:--spacing(1)]",
     "[--frame-panel-px-adjust:0px] [--frame-panel-py-adjust:0px] [--frame-panel-header-px-adjust:0px] [--frame-panel-header-py-adjust:0px] [--frame-panel-footer-px-adjust:0px] [--frame-panel-footer-py-adjust:0px]",
-    "[--frame-panel-px:calc(var(--frame-panel-px-base)_+_var(--frame-panel-px-adjust))] [--frame-panel-py:calc(var(--frame-panel-py-base)_+_var(--frame-panel-py-adjust))] [--frame-panel-header-px:calc(var(--frame-panel-header-px-base)_+_var(--frame-panel-header-px-adjust))] [--frame-panel-header-py:calc(var(--frame-panel-header-py-base)_+_var(--frame-panel-header-py-adjust))] [--frame-panel-footer-px:calc(var(--frame-panel-footer-px-base)_+_var(--frame-panel-footer-px-adjust))] [--frame-panel-footer-py:calc(var(--frame-panel-footer-py-base)_+_var(--frame-panel-footer-py-adjust))]",
-    "(1)] (1)] (1.25)] (1.5)] (1.5)] (0.5)] (1)] (1)]",
-    // Default panel token values — overridden per-variant below
+    "[--frame-panel-px:calc(var(--frame-panel-px-base)+var(--frame-panel-px-adjust))] [--frame-panel-py:calc(var(--frame-panel-py-base)+var(--frame-panel-py-adjust))] [--frame-panel-header-px:calc(var(--frame-panel-header-px-base)+var(--frame-panel-header-px-adjust))] [--frame-panel-header-py:calc(var(--frame-panel-header-py-base)+var(--frame-panel-header-py-adjust))] [--frame-panel-footer-px:calc(var(--frame-panel-footer-px-base)+var(--frame-panel-footer-px-adjust))] [--frame-panel-footer-py:calc(var(--frame-panel-footer-py-base)+var(--frame-panel-footer-py-adjust))]",
+    // Luma alone re-times the frame: wider gap and padding, roomier bars.
+    "",
     "[--frame-panel-bg:var(--color-card)] [--frame-panel-border-color:var(--color-border)] [--frame-border-color:var(--color-border)]",
-    // Concentric inner radius: the panel corner nests smoothly inside the frame
-    // corner instead of matching it. The panel sits inset from the frame's outer
-    // edge by the frame's 1px border + --frame-px padding, so its radius is
-    // reduced by that same gap (radius − gap keeps the two arcs parallel). This
-    // base value assumes the bordered default/inverse frame; `ghost` drops the
-    // 1px border term and `dense` pins it back to the frame radius (its panels
-    // are pulled flush to the edge).
-    "[--frame-panel-radius:calc(var(--frame-radius)_-_var(--frame-px)_-_1px)]",
+    // Concentric: the panel nests inside the frame's corner rather than copying
+    // it. It is inset by the 1px border plus --frame-px, so subtracting exactly
+    // that keeps the two arcs parallel. `ghost` drops the border term (no
+    // border), `dense` pins it to the frame radius (panels sit flush).
+    "[--frame-panel-radius:calc(var(--frame-radius)-var(--frame-px)-1px)]",
   ],
   {
     variants: {
@@ -40,17 +34,12 @@ const frameVariants = cva(
         default: "border border-[var(--frame-border-color)] bg-clip-padding",
         inverse:
           "[--frame-panel-bg:color-mix(in_oklch,var(--color-muted)_40%,transparent)] border border-[var(--frame-border-color)] bg-background bg-clip-padding",
-        // No frame border, so the panel is inset by --frame-px padding only.
-        ghost: "[--frame-panel-radius:calc(var(--frame-radius)_-_var(--frame-px))]",
+        ghost: "[--frame-panel-radius:calc(var(--frame-radius)-var(--frame-px))]",
       },
-      // Header/footer vertical rhythm is tighter than the panel body's, and
-      // the gap widens as the frame grows: the bars read as chrome rather than
-      // as another content block. py ladder is 0.5 / 1.5 / 2 / 2.5 against a
-      // body py of 2 / 3.5 / 4 / 5. These vars are style-agnostic - no
-      // style-*.css overrides them - so this single ladder drives all shadcn
-      // styles. `px` is deliberately left level with the body so header,
-      // content and footer stay left-aligned. `xs` holds at 0.5 (2px): it is
-      // the practical floor, since anything lower stops reading as padding.
+      // Bars read as chrome, not a second content block: py runs 0.5/1.5/2/2.5
+      // against a body py of 2/3.5/4/5, while px stays level with the body so
+      // header, content and footer left-align. xs floors at 0.5 (2px), below
+      // which it stops reading as padding. No style-*.css overrides these.
       spacing: {
         xs: "[--frame-panel-px-base:--spacing(2)] [--frame-panel-py-base:--spacing(2)] [--frame-panel-header-px-base:--spacing(2)] [--frame-panel-header-py-base:--spacing(0.5)] [--frame-panel-footer-px-base:--spacing(2)] [--frame-panel-footer-py-base:--spacing(0.5)]",
         sm: "[--frame-panel-px-base:--spacing(3)] [--frame-panel-py-base:--spacing(3.5)] [--frame-panel-header-px-base:--spacing(3)] [--frame-panel-header-py-base:--spacing(1.5)] [--frame-panel-footer-px-base:--spacing(3)] [--frame-panel-footer-py-base:--spacing(1.5)]",
@@ -72,9 +61,8 @@ const frameVariants = cva(
         ],
       },
       dense: {
-        // Positional rules must stay as parent selectors — cannot be expressed via CSS vars.
-        // Padding is 0 and panels are pulled flush to the frame edge (-mx-px), so
-        // their corners align with the frame radius rather than nesting inside it.
+        // Parent selectors, not CSS vars: these are positional. Panels are
+        // pulled flush (-mx-px), so corners align with the frame's own radius.
         true: "p-0 gap-0 border-[var(--frame-border-color)] [--frame-panel-radius:var(--frame-radius)] [&_[data-slot=frame-panel]]:-mx-px [&_[data-slot=frame-panel]]:before:hidden [&_[data-slot=frame-panel]:last-child]:-mb-px [&:not(:has([data-slot=frame-panel-header]))_[data-slot=frame-panel]:is(:first-child)]:-mt-px",
         false: "",
       },
@@ -117,13 +105,10 @@ function FramePanel({
   return (
     <div
       className={cn(
-        // bg-(--frame-panel-bg) and border-(--frame-panel-border-color) consume the
-        // CSS vars set by the Frame parent. Any explicit bg-* or border-* class passed
-        // via className overrides these by Tailwind source order - no ! needed.
         "relative overflow-hidden rounded-(--frame-panel-radius) border border-(--frame-panel-border-color) bg-(--frame-panel-bg) bg-clip-padding shadow-xs",
         // `fit` sizes the panel to its content; otherwise it grows to fill the frame.
         !fit && "grow",
-        "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--frame-panel-radius)_-_1px)] before:shadow-black/5",
+        "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--frame-panel-radius)-1px)] before:shadow-black/5",
         "dark:bg-clip-border dark:before:shadow-white/5",
         "px-(--frame-panel-px) py-(--frame-panel-py)",
         className
diff --git a/apps/web/src/components/reui/kanban.tsx b/apps/web/src/components/reui/kanban.tsx
index 3f53a3f..7770965 100644
--- a/apps/web/src/components/reui/kanban.tsx
+++ b/apps/web/src/components/reui/kanban.tsx
@@ -13,6 +13,7 @@ import {
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import type {
+  CollisionDetection,
   DragCancelEvent,
   DragEndEvent,
   DragOverEvent,
@@ -22,12 +23,16 @@ import type {
   UniqueIdentifier,
 } from "@dnd-kit/core"
 import {
+  closestCenter,
   defaultDropAnimationSideEffects,
   DndContext,
   DragOverlay,
+  getFirstCollision,
   KeyboardSensor,
   MeasuringStrategy,
   MouseSensor,
+  pointerWithin,
+  rectIntersection,
   TouchSensor,
   useSensor,
   useSensors,
@@ -254,6 +259,49 @@ function Kanban<T>({
     [columns, columnIds, getItemValue, isColumn]
   )
 
+  // The droppable under the pointer, not the one the dragged rect overlaps
+  // most: in the gap between columns that overlap flips with every live-preview
+  // move, and each flip re-runs dragOver until React bails out.
+  const lastOverIdRef = useRef<UniqueIdentifier | null>(null)
+  const collisionDetection = useCallback<CollisionDetection>(
+    (args) => {
+      if (isColumn(args.active.id)) {
+        return closestCenter({
+          ...args,
+          droppableContainers: args.droppableContainers.filter((container) =>
+            isColumn(container.id)
+          ),
+        })
+      }
+
+      // Keyboard drags carry no pointer.
+      if (!args.pointerCoordinates) return rectIntersection(args)
+
+      let overId = getFirstCollision(pointerWithin(args), "id")
+      if (overId != null) {
+        // Over a column's empty space: resolve to its closest item, if any.
+        if (isColumn(overId)) {
+          const itemIds = new Set(columns[overId as string].map(getItemValue))
+          overId =
+            closestCenter({
+              ...args,
+              droppableContainers: args.droppableContainers.filter(
+                (container) => itemIds.has(container.id as string)
+              ),
+            })[0]?.id ?? overId
+        }
+        lastOverIdRef.current = overId
+        return [{ id: overId }]
+      }
+
+      // Between droppables: hold the last target so the preview stays put.
+      return lastOverIdRef.current != null
+        ? [{ id: lastOverIdRef.current }]
+        : rectIntersection(args)
+    },
+    [columns, getItemValue, isColumn]
+  )
+
   const commitChange = useCallback(
     (
       finalValue: Record<string, T[]>,
@@ -312,6 +360,7 @@ function Kanban<T>({
 
   const handleDragStart = useCallback(
     (event: DragStartEvent) => {
+      lastOverIdRef.current = null
       setActiveId(event.active.id)
       onDragStart?.(event)
 
@@ -421,6 +470,7 @@ function Kanban<T>({
       }
 
       dragOriginRef.current = null
+      lastOverIdRef.current = null
       setActiveId(null)
       onDragCancel?.(event)
     },
@@ -437,6 +487,7 @@ function Kanban<T>({
   const handleDragEnd = useCallback(
     (event: DragEndEvent) => {
       const { active, over } = event
+      lastOverIdRef.current = null
       setActiveId(null)
       onDragEnd?.(event)
 
@@ -589,6 +640,7 @@ function Kanban<T>({
         modifiers={modifiers}
         accessibility={accessibility}
         measuring={MEASURING_CONFIG}
+        collisionDetection={collisionDetection}
         onDragStart={handleDragStart}
         onDragOver={handleDragOver}
         onDragEnd={handleDragEnd}
diff --git a/apps/web/src/components/reui/stepper.tsx b/apps/web/src/components/reui/stepper.tsx
index 07468b5..8e986e2 100644
--- a/apps/web/src/components/reui/stepper.tsx
+++ b/apps/web/src/components/reui/stepper.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import type { HTMLAttributes, ReactElement } from "react"
 import {
   Children,
diff --git a/apps/web/src/components/reui/timeline.tsx b/apps/web/src/components/reui/timeline.tsx
index 15ad665..4df72e4 100644
--- a/apps/web/src/components/reui/timeline.tsx
+++ b/apps/web/src/components/reui/timeline.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { createContext, useCallback, useContext, useState } from "react"
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
diff --git a/apps/web/tsconfig.tsbuildinfo b/apps/web/tsconfig.tsbuildinfo
index 791d05a..5f938eb 100644
--- a/apps/web/tsconfig.tsbuildinfo
+++ b/apps/web/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/main.tsx","./src/routetree.gen.ts","./src/vite-env.d.ts","./src/components/app-switcher.tsx","./src/components/category-badge.tsx","./src/components/confirm-dialog.tsx","./src/components/data-grid-cell.tsx","./src/components/empty-state.tsx","./src/components/form-drawer.tsx","./src/components/loading-button.tsx","./src/components/page-header.tsx","./src/components/page-shell.tsx","./src/components/panel-card.tsx","./src/components/query-state.tsx","./src/components/segmented-tabs.tsx","./src/components/select-field.tsx","./src/components/skeletons.tsx","./src/components/status-badge.tsx","./src/components/status-toggle-group.tsx","./src/components/theme-provider.tsx","./src/components/truncated-text.tsx","./src/components/access/access-api-keys-card.tsx","./src/components/access/access-api-keys-grid.tsx","./src/components/access/api-key-create-dialog.tsx","./src/components/access/api-key-token-dialog.tsx","./src/components/analytics/analytics-activity-list.tsx","./src/components/analytics/analytics-card-shell.tsx","./src/components/analytics/analytics-kpi-row.tsx","./src/components/analytics/analytics-progress.tsx","./src/components/analytics/analytics-segment-control.tsx","./src/components/analytics/chart-bar-strip.tsx","./src/components/analytics/chart-donut-metric.tsx","./src/components/analytics/dashboard-network-capacity-card.tsx","./src/components/analytics/dashboard-operations-flow-card.tsx","./src/components/analytics/dashboard-platform-card.tsx","./src/components/analytics/index.ts","./src/components/analytics/monitoring-health-card.tsx","./src/components/analytics/network-overview-analytics-card.tsx","./src/components/dashboard/card-dot-field.tsx","./src/components/dashboard/dashboard-kpi-grid.tsx","./src/components/dashboard/dashboard-kpi-sparkline-row.tsx","./src/components/dashboard/dashboard-network-health.tsx","./src/components/dashboard/dashboard-network-panel.tsx","./src/components/dashboard/dashboard-operations-breakdown.tsx","./src/components/dashboard/dashboard-quick-links.tsx","./src/components/directories/community-create-dialog.tsx","./src/components/directories/directories-communities-grid.tsx","./src/components/directories/directories-doh-grid.tsx","./src/components/directories/directories-row-actions.tsx","./src/components/directories/doh-profile-create-dialog.tsx","./src/components/layout/app-shell.tsx","./src/components/layout/apps-menu.tsx","./src/components/layout/command-palette.tsx","./src/components/layout/nav-user.tsx","./src/components/layout/system-monitor-popover.tsx","./src/components/lookup/lookup-add-step.tsx","./src/components/lookup/lookup-matches-grid.tsx","./src/components/lookup/lookup-search-form.tsx","./src/components/lookup/lookup-status-banner.tsx","./src/components/lookup/lookup-wizard.tsx","./src/components/modules/community-select.tsx","./src/components/modules/module-as-entry-dialog.tsx","./src/components/modules/module-cdn-source-dialog.tsx","./src/components/modules/module-create-dialog.tsx","./src/components/modules/module-domain-entry-dialog.tsx","./src/components/modules/module-edit-dialog.tsx","./src/components/modules/module-entries-grid.tsx","./src/components/modules/module-entries-section.tsx","./src/components/modules/module-ip-range-entry-dialog.tsx","./src/components/modules/module-kpi-cards.tsx","./src/components/modules/modules-list-grid.tsx","./src/components/monitoring/monitoring-ready-grid.tsx","./src/components/network/network-discovered-peers-card.tsx","./src/components/network/network-kpi.tsx","./src/components/network/network-peers-card.tsx","./src/components/network/network-peers-grid.tsx","./src/components/network/network-speakers-card.tsx","./src/components/network/network-speakers-grid.tsx","./src/components/network/peer-form-dialog.tsx","./src/components/network/speaker-form-dialog.tsx","./src/components/operations/operations-jobs-card.tsx","./src/components/operations/operations-jobs-grid.tsx","./src/components/operations/operations-jobs-kanban.tsx","./src/components/operations/operations-revisions-grid.tsx","./src/components/patterns/donut-breakdown-card.tsx","./src/components/patterns/illustrated-empty-state.tsx","./src/components/patterns/index.ts","./src/components/patterns/kpi-sparkline-card.tsx","./src/components/patterns/metric-tone-styles.ts","./src/components/patterns/panel-corners.tsx","./src/components/patterns/projects-empty-state.tsx","./src/components/patterns/segmented-progress-card.tsx","./src/components/reui/alert.tsx","./src/components/reui/autocomplete.tsx","./src/components/reui/badge.tsx","./src/components/reui/date-selector.tsx","./src/components/reui/frame.tsx","./src/components/reui/icon-stack.tsx","./src/components/reui/icon-tile.tsx","./src/components/reui/kanban.tsx","./src/components/reui/number-field.tsx","./src/components/reui/rating.tsx","./src/components/reui/sortable.tsx","./src/components/reui/stepper.tsx","./src/components/reui/timeline.tsx","./src/components/reui/cascader/cascader-async.tsx","./src/components/reui/cascader/cascader-columns.tsx","./src/components/reui/cascader/cascader-context.tsx","./src/components/reui/cascader/cascader-footer.tsx","./src/components/reui/cascader/cascader-i18n.tsx","./src/components/reui/cascader/cascader-item.tsx","./src/components/reui/cascader/cascader-lib.tsx","./src/components/reui/cascader/cascader-nav.tsx","./src/components/reui/cascader/cascader-types.tsx","./src/components/reui/cascader/cascader-virtual.tsx","./src/components/reui/cascader/cascader.tsx","./src/components/reui/data-grid/data-grid-column-filter.tsx","./src/components/reui/data-grid/data-grid-column-header.tsx","./src/components/reui/data-grid/data-grid-column-visibility.tsx","./src/components/reui/data-grid/data-grid-pagination.tsx","./src/components/reui/data-grid/data-grid-scroll-area.tsx","./src/components/reui/data-grid/data-grid-table-dnd-rows.tsx","./src/components/reui/data-grid/data-grid-table-dnd.tsx","./src/components/reui/data-grid/data-grid-table-virtual.tsx","./src/components/reui/data-grid/data-grid-table.tsx","./src/components/reui/data-grid/data-grid.tsx","./src/components/reui/filters/filters-advanced.tsx","./src/components/reui/filters/filters-builder.tsx","./src/components/reui/filters/filters-chip.tsx","./src/components/reui/filters/filters-context.tsx","./src/components/reui/filters/filters-date.tsx","./src/components/reui/filters/filters-dnd.tsx","./src/components/reui/filters/filters-draft.tsx","./src/components/reui/filters/filters-editors.tsx","./src/components/reui/filters/filters-i18n.tsx","./src/components/reui/filters/filters-lib.tsx","./src/components/reui/filters/filters-operators.tsx","./src/components/reui/filters/filters-query.tsx","./src/components/reui/filters/filters-types.tsx","./src/components/reui/filters/filters.tsx","./src/components/reui-kit/data-grid-kit-defaults.test.ts","./src/components/reui-kit/detail-panel.tsx","./src/components/reui-kit/expandable-resource-grid.tsx","./src/components/reui-kit/filter-utils.ts","./src/components/reui-kit/frame-data-grid.tsx","./src/components/reui-kit/frame-section.tsx","./src/components/reui-kit/index.ts","./src/components/reui-kit/kpi-cols.ts","./src/components/reui-kit/kpi-stat-grid.tsx","./src/components/reui-kit/ops-dashboard.tsx","./src/components/reui-kit/quick-action-grid.tsx","./src/components/reui-kit/resource-page.tsx","./src/components/reui-kit/settings-shell.tsx","./src/components/schedule/schedule-jobs-card.tsx","./src/components/schedule/schedule-jobs-grid.tsx","./src/components/schedule/schedule-modules-grid.tsx","./src/components/settings/appearance-settings-tab.tsx","./src/components/settings/bird-settings-tab.tsx","./src/components/settings/connection-settings-tab.tsx","./src/components/settings/sections-settings-tab.tsx","./src/components/settings/session-settings-tab.tsx","./src/components/settings/setting-row.tsx","./src/components/settings/settings-card.tsx","./src/components/settings/settings-field-group.tsx","./src/components/settings/settings-kv-grid.tsx","./src/components/settings/settings-page-shell.tsx","./src/components/settings/settings-setting-field.tsx","./src/components/settings/settings-tabs-data.tsx","./src/hooks/use-app-switcher.ts","./src/hooks/use-copy-to-clipboard.ts","./src/hooks/use-file-upload.ts","./src/hooks/use-mobile.ts","./src/lib/api-client.test.ts","./src/lib/api-client.ts","./src/lib/app-switcher-config.ts","./src/lib/auth.ts","./src/lib/data-grid-defaults.ts","./src/lib/filters-i18n.ts","./src/lib/queryclient.ts","./src/lib/router.ts","./src/lib/ui-labels.ts","./src/lib/ui-surface.ts","./src/lib/access/api-key-labels.ts","./src/lib/metrics/deployment-progress.ts","./src/lib/metrics/index.ts","./src/lib/metrics/job-status-breakdown.ts","./src/lib/metrics/module-type-breakdown.ts","./src/lib/metrics/peer-capacity-bars.ts","./src/lib/metrics/peer-session-breakdown.ts","./src/lib/metrics/readiness-breakdown.test.ts","./src/lib/metrics/readiness-breakdown.ts","./src/lib/metrics/recent-platform-activity.ts","./src/lib/metrics/types.ts","./src/lib/modules/display.ts","./src/lib/modules/helpers.ts","./src/queries/api-keys.ts","./src/queries/app-switcher.ts","./src/queries/auth.ts","./src/queries/directories.ts","./src/queries/lookup.ts","./src/queries/modules.ts","./src/queries/monitoring.ts","./src/queries/network.ts","./src/queries/operations.ts","./src/queries/overview.ts","./src/queries/settings.ts","./src/routes/__root.tsx","./src/routes/_auth.tsx","./src/routes/auth.callback.tsx","./src/routes/index.tsx","./src/routes/_auth/_settings.tsx","./src/routes/_auth/access.tsx","./src/routes/_auth/dashboard.tsx","./src/routes/_auth/directories.tsx","./src/routes/_auth/lookup.tsx","./src/routes/_auth/monitoring.tsx","./src/routes/_auth/network.tsx","./src/routes/_auth/operations.tsx","./src/routes/_auth/schedule.tsx","./src/routes/_auth/_settings/settings.tsx","./src/routes/_auth/_settings/tenant-settings.tsx","./src/routes/_auth/modules/$moduleid.tsx","./src/routes/_auth/modules/index.tsx","./src/routes/_auth/modules/new.tsx","./src/types/api.gen.ts","./src/types/api.ts","./vite.config.ts"],"version":"5.9.3"}
\ No newline at end of file
+{"root":["./src/main.tsx","./src/routetree.gen.ts","./src/vite-env.d.ts","./src/components/app-switcher.tsx","./src/components/category-badge.tsx","./src/components/confirm-dialog.tsx","./src/components/data-grid-cell.tsx","./src/components/empty-state.tsx","./src/components/form-drawer.tsx","./src/components/loading-button.tsx","./src/components/page-header.tsx","./src/components/page-shell.tsx","./src/components/panel-card.tsx","./src/components/query-state.tsx","./src/components/segmented-tabs.tsx","./src/components/select-field.tsx","./src/components/skeletons.tsx","./src/components/status-badge.tsx","./src/components/status-toggle-group.tsx","./src/components/theme-provider.tsx","./src/components/truncated-text.tsx","./src/components/access/access-api-keys-card.tsx","./src/components/access/access-api-keys-grid.tsx","./src/components/access/api-key-create-dialog.tsx","./src/components/access/api-key-token-dialog.tsx","./src/components/analytics/analytics-activity-list.tsx","./src/components/analytics/analytics-card-shell.tsx","./src/components/analytics/analytics-kpi-row.tsx","./src/components/analytics/analytics-progress.tsx","./src/components/analytics/analytics-segment-control.tsx","./src/components/analytics/chart-bar-strip.tsx","./src/components/analytics/chart-donut-metric.tsx","./src/components/analytics/dashboard-network-capacity-card.tsx","./src/components/analytics/dashboard-operations-flow-card.tsx","./src/components/analytics/dashboard-platform-card.tsx","./src/components/analytics/index.ts","./src/components/analytics/monitoring-health-card.tsx","./src/components/analytics/network-overview-analytics-card.tsx","./src/components/dashboard/card-dot-field.tsx","./src/components/dashboard/dashboard-kpi-grid.tsx","./src/components/dashboard/dashboard-network-health.tsx","./src/components/dashboard/dashboard-network-panel.tsx","./src/components/dashboard/dashboard-operations-breakdown.tsx","./src/components/dashboard/dashboard-quick-links.tsx","./src/components/directories/community-create-dialog.tsx","./src/components/directories/directories-communities-grid.tsx","./src/components/directories/directories-doh-grid.tsx","./src/components/directories/directories-row-actions.tsx","./src/components/directories/doh-profile-create-dialog.tsx","./src/components/layout/app-shell.tsx","./src/components/layout/apps-menu.tsx","./src/components/layout/command-palette.tsx","./src/components/layout/nav-user.tsx","./src/components/layout/system-monitor-popover.tsx","./src/components/lookup/lookup-add-step.tsx","./src/components/lookup/lookup-matches-grid.tsx","./src/components/lookup/lookup-search-form.tsx","./src/components/lookup/lookup-status-banner.tsx","./src/components/lookup/lookup-wizard.tsx","./src/components/modules/community-select.tsx","./src/components/modules/module-as-entry-dialog.tsx","./src/components/modules/module-cdn-source-dialog.tsx","./src/components/modules/module-create-dialog.tsx","./src/components/modules/module-domain-entry-dialog.tsx","./src/components/modules/module-edit-dialog.tsx","./src/components/modules/module-entries-grid.tsx","./src/components/modules/module-entries-section.tsx","./src/components/modules/module-ip-range-entry-dialog.tsx","./src/components/modules/module-kpi-cards.tsx","./src/components/modules/modules-list-grid.tsx","./src/components/monitoring/monitoring-ready-grid.tsx","./src/components/network/network-discovered-peers-card.tsx","./src/components/network/network-kpi.tsx","./src/components/network/network-peers-card.tsx","./src/components/network/network-peers-grid.tsx","./src/components/network/network-speakers-card.tsx","./src/components/network/network-speakers-grid.tsx","./src/components/network/peer-form-dialog.tsx","./src/components/network/speaker-form-dialog.tsx","./src/components/operations/job-timeline.tsx","./src/components/operations/operations-jobs-card.tsx","./src/components/operations/operations-jobs-grid.tsx","./src/components/operations/operations-jobs-kanban.tsx","./src/components/operations/operations-revisions-grid.tsx","./src/components/patterns/donut-breakdown-card.tsx","./src/components/patterns/illustrated-empty-state.tsx","./src/components/patterns/index.ts","./src/components/patterns/kpi-sparkline-card.tsx","./src/components/patterns/metric-tone-styles.ts","./src/components/patterns/panel-corners.tsx","./src/components/patterns/projects-empty-state.tsx","./src/components/patterns/segmented-progress-card.tsx","./src/components/reui/alert.tsx","./src/components/reui/autocomplete.tsx","./src/components/reui/badge.tsx","./src/components/reui/date-selector.tsx","./src/components/reui/frame.tsx","./src/components/reui/icon-stack.tsx","./src/components/reui/icon-tile.tsx","./src/components/reui/kanban.tsx","./src/components/reui/number-field.tsx","./src/components/reui/rating.tsx","./src/components/reui/sortable.tsx","./src/components/reui/stepper.tsx","./src/components/reui/timeline.tsx","./src/components/reui/cascader/cascader-async.tsx","./src/components/reui/cascader/cascader-columns.tsx","./src/components/reui/cascader/cascader-context.tsx","./src/components/reui/cascader/cascader-footer.tsx","./src/components/reui/cascader/cascader-i18n.tsx","./src/components/reui/cascader/cascader-item.tsx","./src/components/reui/cascader/cascader-lib.tsx","./src/components/reui/cascader/cascader-nav.tsx","./src/components/reui/cascader/cascader-types.tsx","./src/components/reui/cascader/cascader-virtual.tsx","./src/components/reui/cascader/cascader.tsx","./src/components/reui/code-block/code-block-highlight.tsx","./src/components/reui/code-block/code-block.tsx","./src/components/reui/data-grid/data-grid-cell-selection.tsx","./src/components/reui/data-grid/data-grid-column-filter.tsx","./src/components/reui/data-grid/data-grid-column-header.tsx","./src/components/reui/data-grid/data-grid-column-visibility.tsx","./src/components/reui/data-grid/data-grid-i18n.tsx","./src/components/reui/data-grid/data-grid-pagination.tsx","./src/components/reui/data-grid/data-grid-scroll-area.tsx","./src/components/reui/data-grid/data-grid-table-dnd-rows.tsx","./src/components/reui/data-grid/data-grid-table-dnd.tsx","./src/components/reui/data-grid/data-grid-table-virtual.tsx","./src/components/reui/data-grid/data-grid-table.tsx","./src/components/reui/data-grid/data-grid.tsx","./src/components/reui/filters/filters-advanced.tsx","./src/components/reui/filters/filters-builder.tsx","./src/components/reui/filters/filters-chip.tsx","./src/components/reui/filters/filters-context.tsx","./src/components/reui/filters/filters-date.tsx","./src/components/reui/filters/filters-dnd.tsx","./src/components/reui/filters/filters-draft.tsx","./src/components/reui/filters/filters-editors.tsx","./src/components/reui/filters/filters-i18n.tsx","./src/components/reui/filters/filters-lib.tsx","./src/components/reui/filters/filters-operators.tsx","./src/components/reui/filters/filters-query.tsx","./src/components/reui/filters/filters-types.tsx","./src/components/reui/filters/filters.tsx","./src/components/reui-kit/data-grid-kit-defaults.test.ts","./src/components/reui-kit/detail-panel.tsx","./src/components/reui-kit/expandable-resource-grid.tsx","./src/components/reui-kit/filter-utils.ts","./src/components/reui-kit/frame-data-grid.tsx","./src/components/reui-kit/frame-section.tsx","./src/components/reui-kit/index.ts","./src/components/reui-kit/kpi-cols.ts","./src/components/reui-kit/kpi-stat-grid.tsx","./src/components/reui-kit/ops-dashboard.tsx","./src/components/reui-kit/quick-action-grid.tsx","./src/components/reui-kit/resource-page.tsx","./src/components/reui-kit/settings-shell.tsx","./src/components/schedule/schedule-jobs-card.tsx","./src/components/schedule/schedule-jobs-grid.tsx","./src/components/schedule/schedule-modules-grid.tsx","./src/components/settings/appearance-settings-tab.tsx","./src/components/settings/bird-settings-tab.tsx","./src/components/settings/connection-settings-tab.tsx","./src/components/settings/sections-settings-tab.tsx","./src/components/settings/session-settings-tab.tsx","./src/components/settings/setting-row.tsx","./src/components/settings/settings-card.tsx","./src/components/settings/settings-field-group.tsx","./src/components/settings/settings-kv-grid.tsx","./src/components/settings/settings-page-shell.tsx","./src/components/settings/settings-setting-field.tsx","./src/components/settings/settings-tabs-data.tsx","./src/hooks/use-app-switcher.ts","./src/hooks/use-copy-to-clipboard.ts","./src/hooks/use-file-upload.ts","./src/hooks/use-mobile.ts","./src/lib/api-client.test.ts","./src/lib/api-client.ts","./src/lib/app-switcher-config.ts","./src/lib/auth.ts","./src/lib/filters-i18n.ts","./src/lib/queryclient.ts","./src/lib/reui-i18n-ru.ts","./src/lib/router.ts","./src/lib/ui-labels.ts","./src/lib/ui-surface.ts","./src/lib/access/api-key-labels.ts","./src/lib/metrics/deployment-progress.ts","./src/lib/metrics/index.ts","./src/lib/metrics/job-status-breakdown.ts","./src/lib/metrics/module-type-breakdown.ts","./src/lib/metrics/peer-capacity-bars.ts","./src/lib/metrics/peer-session-breakdown.ts","./src/lib/metrics/readiness-breakdown.test.ts","./src/lib/metrics/readiness-breakdown.ts","./src/lib/metrics/recent-platform-activity.ts","./src/lib/metrics/types.ts","./src/lib/modules/display.ts","./src/lib/modules/helpers.ts","./src/queries/api-keys.ts","./src/queries/app-switcher.ts","./src/queries/auth.ts","./src/queries/directories.ts","./src/queries/lookup.ts","./src/queries/modules.ts","./src/queries/monitoring.ts","./src/queries/network.ts","./src/queries/operations.ts","./src/queries/overview.ts","./src/queries/settings.ts","./src/routes/__root.tsx","./src/routes/_auth.tsx","./src/routes/auth.callback.tsx","./src/routes/index.tsx","./src/routes/_auth/_settings.tsx","./src/routes/_auth/access.tsx","./src/routes/_auth/dashboard.tsx","./src/routes/_auth/directories.tsx","./src/routes/_auth/lookup.tsx","./src/routes/_auth/monitoring.tsx","./src/routes/_auth/network.tsx","./src/routes/_auth/operations.tsx","./src/routes/_auth/schedule.tsx","./src/routes/_auth/_settings/settings.tsx","./src/routes/_auth/_settings/tenant-settings.tsx","./src/routes/_auth/modules/$moduleid.tsx","./src/routes/_auth/modules/index.tsx","./src/routes/_auth/modules/new.tsx","./src/types/api.gen.ts","./src/types/api.ts","./vite.config.ts"],"version":"5.9.3"}
\ No newline at end of file
diff --git a/packages/ui/src/components/button-group.tsx b/packages/ui/src/components/button-group.tsx
index 15697a9..0cfdcff 100644
--- a/packages/ui/src/components/button-group.tsx
+++ b/packages/ui/src/components/button-group.tsx
@@ -1,8 +1,8 @@
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@evobgp/ui/lib/utils"
+
 import { Separator } from "@evobgp/ui/components/separator"
 
 const buttonGroupVariants = cva(
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
index 2f791f1..0d67938 100644
--- a/packages/ui/src/components/button.tsx
+++ b/packages/ui/src/components/button.tsx
@@ -1,6 +1,5 @@
 import { Button as ButtonPrimitive } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@evobgp/ui/lib/utils"
 
 const buttonVariants = cva(
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
index 032a043..5c92eaf 100644
--- a/packages/ui/src/components/checkbox.tsx
+++ b/packages/ui/src/components/checkbox.tsx
@@ -1,5 +1,4 @@
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
-
 import { cn } from "@evobgp/ui/lib/utils"
 import { CheckIcon } from "lucide-react"
 
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
index e914215..61c6086 100644
--- a/packages/ui/src/components/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -2,7 +2,6 @@
 
 import * as React from "react"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
-
 import { cn } from "@evobgp/ui/lib/utils"
 import { ChevronRightIcon, CheckIcon } from "lucide-react"
 
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
index 0b29db7..8cb99ea 100644
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -1,6 +1,5 @@
 import * as React from "react"
 import { Input as InputPrimitive } from "@base-ui/react/input"
-
 import { cn } from "@evobgp/ui/lib/utils"
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
diff --git a/packages/ui/src/components/popover.tsx b/packages/ui/src/components/popover.tsx
index 133b13c..36e387a 100644
--- a/packages/ui/src/components/popover.tsx
+++ b/packages/ui/src/components/popover.tsx
@@ -1,6 +1,5 @@
 import * as React from "react"
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
-
 import { cn } from "@evobgp/ui/lib/utils"
 
 function Popover({ ...props }: PopoverPrimitive.Root.Props) {
diff --git a/packages/ui/src/components/scroll-area.tsx b/packages/ui/src/components/scroll-area.tsx
index 71dc476..f614d43 100644
--- a/packages/ui/src/components/scroll-area.tsx
+++ b/packages/ui/src/components/scroll-area.tsx
@@ -1,8 +1,5 @@
-"use client"
-
 import * as React from "react"
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
-
 import { cn } from "@evobgp/ui/lib/utils"
 
 function ScrollArea({
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index a80f95a..86b30e5 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -2,7 +2,6 @@
 
 import * as React from "react"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
-
 import { cn } from "@evobgp/ui/lib/utils"
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
 
diff --git a/packages/ui/src/components/separator.tsx b/packages/ui/src/components/separator.tsx
index 13e3b9a..9e796ef 100644
--- a/packages/ui/src/components/separator.tsx
+++ b/packages/ui/src/components/separator.tsx
@@ -1,5 +1,4 @@
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
-
 import { cn } from "@evobgp/ui/lib/utils"
 
 function Separator({
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
index cf6dde3..755677c 100644
--- a/packages/ui/src/components/tooltip.tsx
+++ b/packages/ui/src/components/tooltip.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
-
 import { cn } from "@evobgp/ui/lib/utils"
 
 function TooltipProvider({
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bed0406..680a917 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -119,6 +119,9 @@ importers:
       shadcn:
         specifier: ^4.19.0
         version: 4.19.0(typescript@5.9.3)
+      shiki:
+        specifier: ^4.4.3
+        version: 4.4.3
       sonner:
         specifier: ^1.7.0
         version: 1.7.4(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -1414,6 +1417,37 @@ packages:
     peerDependencies:
       semantic-release: '>=20.1.0'
 
+  '@shikijs/core@4.4.3':
+    resolution: {integrity: sha512-QCR4q2ZO/ILJEuwiBMel4wdcTDb1JGwfjKTxPDF6x8ixOaluPrVqIn06C99AcRPhmYlBR56d/Fb+GN58GzExpg==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-javascript@4.4.3':
+    resolution: {integrity: sha512-FbOjFJp9VLdo1Wevs10BBtVxiTWwNLqZh5Gkhjgda/ioL15YOgeSl9n+6XMa3qRlPQzfhFNe641SrynFHYG0nQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-oniguruma@4.4.3':
+    resolution: {integrity: sha512-EcOQkxdxGQrc1Row/cC2c96/v1dbZqGnEVu1qTuT/MJmp6+cXCvQussowVmCv5Tqr3KuY3c7IbM6HTW3LJ1k9w==}
+    engines: {node: '>=20'}
+
+  '@shikijs/langs@4.4.3':
+    resolution: {integrity: sha512-ePic0yfAJGOF83D5wBHK/00EjK65oahBYxFk5epgq33WRv7X9UuxLEV8PtR0szC0z8dl7INIpIodB99JRFlR+A==}
+    engines: {node: '>=20'}
+
+  '@shikijs/primitive@4.4.3':
+    resolution: {integrity: sha512-m0wBeLDQDeIxRdUmrCPdQqfuUamDwRL5isCfYbguKD6NiaKpVbsv+3J81DyIKgNW5h4WAIIr8T4EkgQrBBxvaQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/themes@4.4.3':
+    resolution: {integrity: sha512-w8UHjeUnIR965KMWJHUPXOc2mNJUnK3vpVLYLvw5IYU2mnTTJ89E24OrJDBNiJDQ0qzb0tc4l7mrIXx5cFeIyw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/types@4.4.3':
+    resolution: {integrity: sha512-UEJxmRR++MAGR6hugn0vgVS2W/6lWAts84FFSrnlH9sP0LNol7E5+NQ792pH8liWUhyMyjhTgSUH3k7iD7tc5g==}
+    engines: {node: '>=20'}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
   '@simple-libs/stream-utils@1.2.0':
     resolution: {integrity: sha512-KxXvfapcixpz6rVEB6HPjOUZT22yN6v0vI0urQSk1L8MlEWPDFCZkhw2xmkyoTGYeFw7tWTZd7e3lVzRZRN/EA==}
     engines: {node: '>=18'}
@@ -1716,12 +1750,18 @@ packages:
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
+  '@types/hast@3.0.5':
+    resolution: {integrity: sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==}
+
   '@types/http-cache-semantics@4.2.0':
     resolution: {integrity: sha512-L3LgimLHXtGkWikKnsPg0/VFx9OGZaC+eN1u4r+OB1XRqH3meBIAVC2zr1WdMH+RHmnRkqliQAOHNJ/E0j/e0Q==}
 
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
   '@types/node@20.19.43':
     resolution: {integrity: sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA==}
 
@@ -1742,6 +1782,9 @@ packages:
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
   '@types/use-sync-external-store@0.0.6':
     resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
 
@@ -1810,6 +1853,9 @@ packages:
     resolution: {integrity: sha512-4g3BLxfdTMy8iZG0MaBkadnlRrCJ74cQiFbyEVMrkwIoqdyaXXQM22cotDvrl4x28wgIZ9rEJRoM+mmhSJpJ1g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@ungap/structured-clone@1.4.0':
+    resolution: {integrity: sha512-1mEZtMKPM09vDmQt5y7YvmN2+DFTP7Tg0EWXdic8/C6VRnpb33e4ghisCIE3WZjsE2N8mf+QV1Zqh7ZFYLWInQ==}
+
   '@vitejs/plugin-react@5.2.0':
     resolution: {integrity: sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2078,6 +2124,9 @@ packages:
   caniuse-lite@1.0.30001800:
     resolution: {integrity: sha512-MMHtuAz9Ys840zAY5F4k6fV5GaivZ9sPk+nz0mY+GYVzRBnYkN0mpqkSR92oWRQ19yQWo4HvBV/FnC16AJX8MA==}
 
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
   chai@5.3.3:
     resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
@@ -2101,6 +2150,12 @@ packages:
     resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
     engines: {node: '>=10'}
 
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
   check-error@2.1.3:
     resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
     engines: {node: '>= 16'}
@@ -2191,6 +2246,9 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
   commander@11.1.0:
     resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
     engines: {node: '>=16'}
@@ -2445,6 +2503,10 @@ packages:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
@@ -2452,6 +2514,9 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -2954,6 +3019,12 @@ packages:
     resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
 
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
   highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
 
@@ -2973,6 +3044,9 @@ packages:
     resolution: {integrity: sha512-Hc+ghLoSt6QaYZUv0WBiIvmMDZuZZ7oaDvdH8MbfOO4lOsxdXLEvuC6ePoGs9H1X9oCLyq6+NVN0MKqD+ydxyg==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
   http-cache-semantics@4.2.0:
     resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
 
@@ -3545,6 +3619,9 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
   media-typer@1.1.1:
     resolution: {integrity: sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==}
     engines: {node: '>= 0.8'}
@@ -3568,6 +3645,21 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -3860,6 +3952,12 @@ packages:
     resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
     engines: {node: '>=18'}
 
+  oniguruma-parser@0.12.2:
+    resolution: {integrity: sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==}
+
+  oniguruma-to-es@4.3.6:
+    resolution: {integrity: sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==}
+
   open@10.2.0:
     resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
     engines: {node: '>=18'}
@@ -4133,6 +4231,9 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  property-information@7.2.0:
+    resolution: {integrity: sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==}
+
   proto-list@1.2.4:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
 
@@ -4332,6 +4433,15 @@ packages:
   reftools@1.1.9:
     resolution: {integrity: sha512-OVede/NQE13xBQ+ob5CKd5KyeJYU2YInb1bmV4nRoOfquZPkAkxuOXicSe1PvqIuZZ4kD13sPKBbR7UFDmli6w==}
 
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
   registry-auth-token@5.1.1:
     resolution: {integrity: sha512-P7B4+jq8DeD2nMsAcdfaqHbssgHtZ7Z5+++a5ask90fvmJ8p5je4mOa+wzu+DB4vQ5tdJV/xywY+UnVFeQLV5Q==}
     engines: {node: '>=14'}
@@ -4453,6 +4563,10 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shiki@4.4.3:
+    resolution: {integrity: sha512-Mb/GvXPHBAXdgGIcnfU5L3ldpn1XcxrGkPHwqgRx17/I2XRfqlFKk2vGkHWINn1kdXvzJZeuO3is6I9KLPFm0g==}
+    engines: {node: '>=20'}
+
   should-equal@2.0.0:
     resolution: {integrity: sha512-ZP36TMrK9euEuWQYBig9W55WPC7uo37qzAEmbjHz4gfyuXrEUgF8cUvQVO+w+d3OMfPvSRQJ22lSm8MQJ43LTA==}
 
@@ -4541,6 +4655,9 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
   spawn-error-forwarder@1.0.0:
     resolution: {integrity: sha512-gRjMgK5uFjbCvdibeGJuy3I5OYz6VLoVdsOJdA6wV0WlfQVLFueoqMxwwYD9RODdgb6oUIvlRlsyFSiQkMKu0g==}
 
@@ -4594,6 +4711,9 @@ packages:
   string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
 
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
   stringify-object@5.0.0:
     resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
     engines: {node: '>=14.16'}
@@ -4772,6 +4892,9 @@ packages:
     resolution: {integrity: sha512-aXJDbk6SnumuaZSANd21XAo15ucCDE38H4fkqiGsc3MhCK+wOlZvLP9cB/TvpHT0mOyWgC4Z8EwRlzqYSUzdsA==}
     engines: {node: '>= 0.4'}
 
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
   ts-api-utils@2.5.0:
     resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
     engines: {node: '>=18.12'}
@@ -4870,6 +4993,21 @@ packages:
     resolution: {integrity: sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==}
     engines: {node: '>=12'}
 
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+
   universal-user-agent@7.0.3:
     resolution: {integrity: sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==}
 
@@ -4972,6 +5110,12 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
   victory-vendor@37.3.6:
     resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
 
@@ -5194,6 +5338,9 @@ packages:
   zod@4.4.3:
     resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   '@actions/core@3.0.1':
@@ -6469,6 +6616,46 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@shikijs/core@4.4.3':
+    dependencies:
+      '@shikijs/primitive': 4.4.3
+      '@shikijs/types': 4.4.3
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.5
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@4.4.3':
+    dependencies:
+      '@shikijs/types': 4.4.3
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.6
+
+  '@shikijs/engine-oniguruma@4.4.3':
+    dependencies:
+      '@shikijs/types': 4.4.3
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@4.4.3':
+    dependencies:
+      '@shikijs/types': 4.4.3
+
+  '@shikijs/primitive@4.4.3':
+    dependencies:
+      '@shikijs/types': 4.4.3
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.5
+
+  '@shikijs/themes@4.4.3':
+    dependencies:
+      '@shikijs/types': 4.4.3
+
+  '@shikijs/types@4.4.3':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.5
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
   '@simple-libs/stream-utils@1.2.0': {}
 
   '@sinclair/typebox@0.27.12': {}
@@ -6765,10 +6952,18 @@ snapshots:
 
   '@types/estree@1.0.9': {}
 
+  '@types/hast@3.0.5':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/http-cache-semantics@4.2.0': {}
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/node@20.19.43':
     dependencies:
       undici-types: 6.21.0
@@ -6790,6 +6985,8 @@ snapshots:
   '@types/trusted-types@2.0.7':
     optional: true
 
+  '@types/unist@3.0.3': {}
+
   '@types/use-sync-external-store@0.0.6': {}
 
   '@types/validate-npm-package-name@4.0.2': {}
@@ -6887,6 +7084,8 @@ snapshots:
       '@typescript-eslint/types': 8.62.1
       eslint-visitor-keys: 5.0.1
 
+  '@ungap/structured-clone@1.4.0': {}
+
   '@vitejs/plugin-react@5.2.0(vite@7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0))':
     dependencies:
       '@babel/core': 7.29.7
@@ -7159,6 +7358,8 @@ snapshots:
 
   caniuse-lite@1.0.30001800: {}
 
+  ccount@2.0.1: {}
+
   chai@5.3.3:
     dependencies:
       assertion-error: 2.0.1
@@ -7184,6 +7385,10 @@ snapshots:
 
   char-regex@1.0.2: {}
 
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
   check-error@2.1.3: {}
 
   chokidar@3.6.0:
@@ -7289,6 +7494,8 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  comma-separated-tokens@2.0.3: {}
+
   commander@11.1.0: {}
 
   commander@14.0.3: {}
@@ -7501,10 +7708,16 @@ snapshots:
 
   depd@2.0.0: {}
 
+  dequal@2.0.3: {}
+
   detect-libc@2.1.2: {}
 
   detect-node-es@1.1.0: {}
 
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
   diff-sequences@29.6.3: {}
 
   diff@8.0.4: {}
@@ -8090,6 +8303,24 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+
   highlight.js@10.7.3: {}
 
   hono@4.13.3: {}
@@ -8104,6 +8335,8 @@ snapshots:
     dependencies:
       lru-cache: 11.5.1
 
+  html-void-elements@3.0.0: {}
+
   http-cache-semantics@4.2.0: {}
 
   http-errors@2.0.1:
@@ -8553,6 +8786,18 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.4.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+
   media-typer@1.1.1: {}
 
   meow@12.1.1: {}
@@ -8565,6 +8810,23 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -8762,6 +9024,14 @@ snapshots:
     dependencies:
       mimic-function: 5.0.1
 
+  oniguruma-parser@0.12.2: {}
+
+  oniguruma-to-es@4.3.6:
+    dependencies:
+      oniguruma-parser: 0.12.2
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
   open@10.2.0:
     dependencies:
       default-browser: 5.5.1
@@ -9014,6 +9284,8 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  property-information@7.2.0: {}
+
   proto-list@1.2.4: {}
 
   protobufjs@7.6.5:
@@ -9256,6 +9528,16 @@ snapshots:
 
   reftools@1.1.9: {}
 
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.1.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
   registry-auth-token@5.1.1:
     dependencies:
       '@pnpm/npm-conf': 3.0.3
@@ -9461,6 +9743,17 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  shiki@4.4.3:
+    dependencies:
+      '@shikijs/core': 4.4.3
+      '@shikijs/engine-javascript': 4.4.3
+      '@shikijs/engine-oniguruma': 4.4.3
+      '@shikijs/langs': 4.4.3
+      '@shikijs/themes': 4.4.3
+      '@shikijs/types': 4.4.3
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.5
+
   should-equal@2.0.0:
     dependencies:
       should-type: 1.4.0
@@ -9565,6 +9858,8 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  space-separated-tokens@2.0.2: {}
+
   spawn-error-forwarder@1.0.0: {}
 
   spdx-correct@3.2.0:
@@ -9618,6 +9913,11 @@ snapshots:
     dependencies:
       safe-buffer: 5.1.2
 
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
   stringify-object@5.0.0:
     dependencies:
       get-own-enumerable-keys: 1.0.0
@@ -9769,6 +10069,8 @@ snapshots:
 
   traverse@0.6.8: {}
 
+  trim-lines@3.0.1: {}
+
   ts-api-utils@2.5.0(typescript@5.9.3):
     dependencies:
       typescript: 5.9.3
@@ -9846,6 +10148,29 @@ snapshots:
     dependencies:
       crypto-random-string: 4.0.0
 
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
   universal-user-agent@7.0.3: {}
 
   universalify@2.0.1: {}
@@ -9908,6 +10233,16 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
   victory-vendor@37.3.6:
     dependencies:
       '@types/d3-array': 3.2.2
@@ -10131,3 +10466,5 @@ snapshots:
   zod@3.25.76: {}
 
   zod@4.4.3: {}
+
+  zwitch@2.0.4: {}