From 0846daa3bf50a20443ed2222b5197a9f02ba83d0 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 17:23:35 +0600
Subject: [PATCH 01/17] feat: add URL cell variant with validation and
 auto-normalization

- Add UrlCell component with smart URL validation
- Auto-normalize URLs (adds https:// prefix if missing)
- Display URLs as clickable links opening in new tab
- Show error state for invalid URLs
- Add URL variant to type definitions
- Update cell renderer and column header to support URL type
- Add website column to demo with faker-generated URLs
---
 public/r/data-grid.json                       |   8 +-
 .../data-grid/data-grid-cell-variants.tsx     | 272 ++++++++++++++++++
 src/components/data-grid/data-grid-cell.tsx   |  13 +
 .../data-grid/data-grid-column-header.tsx     |   3 +
 src/components/data-grid/data-grid-demo.tsx   |  14 +
 src/types/data-grid.ts                        |   3 +
 6 files changed, 309 insertions(+), 4 deletions(-)

diff --git a/public/r/data-grid.json b/public/r/data-grid.json
index fac694e8d..8bfa6fc6d 100644
--- a/public/r/data-grid.json
+++ b/public/r/data-grid.json
@@ -34,7 +34,7 @@
     },
     {
       "path": "src/components/data-grid/data-grid-cell.tsx",
-      "content": "\"use client\";\n\nimport type { Cell, Table } from \"@tanstack/react-table\";\nimport * as React from \"react\";\n\nimport {\n  CheckboxCell,\n  DateCell,\n  FileCell,\n  LongTextCell,\n  MultiSelectCell,\n  NumberCell,\n  SelectCell,\n  ShortTextCell,\n} from \"@/components/data-grid/data-grid-cell-variants\";\n\ninterface DataGridCellProps<TData> {\n  cell: Cell<TData, unknown>;\n  table: Table<TData>;\n}\n\nexport function DataGridCell<TData>({ cell, table }: DataGridCellProps<TData>) {\n  const meta = table.options.meta;\n  const originalRowIndex = cell.row.index;\n\n  const rows = table.getRowModel().rows;\n  const displayRowIndex = rows.findIndex(\n    (row) => row.original === cell.row.original,\n  );\n  const rowIndex = displayRowIndex >= 0 ? displayRowIndex : originalRowIndex;\n  const columnId = cell.column.id;\n\n  const isFocused =\n    meta?.focusedCell?.rowIndex === rowIndex &&\n    meta?.focusedCell?.columnId === columnId;\n  const isEditing =\n    meta?.editingCell?.rowIndex === rowIndex &&\n    meta?.editingCell?.columnId === columnId;\n  const isSelected = meta?.getIsCellSelected?.(rowIndex, columnId) ?? false;\n\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const variant = cellOpts?.variant ?? \"text\";\n\n  switch (variant) {\n    case \"short-text\":\n      return (\n        <ShortTextCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"long-text\":\n      return (\n        <LongTextCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"number\":\n      return (\n        <NumberCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"select\":\n      return (\n        <SelectCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"multi-select\":\n      return (\n        <MultiSelectCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"checkbox\":\n      return (\n        <CheckboxCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"date\":\n      return (\n        <DateCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"file\":\n      return (\n        <FileCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n\n    default:\n      return (\n        <ShortTextCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n  }\n}\n",
+      "content": "\"use client\";\n\nimport type { Cell, Table } from \"@tanstack/react-table\";\nimport * as React from \"react\";\n\nimport {\n  CheckboxCell,\n  DateCell,\n  FileCell,\n  LongTextCell,\n  MultiSelectCell,\n  NumberCell,\n  SelectCell,\n  ShortTextCell,\n  UrlCell,\n} from \"@/components/data-grid/data-grid-cell-variants\";\n\ninterface DataGridCellProps<TData> {\n  cell: Cell<TData, unknown>;\n  table: Table<TData>;\n}\n\nexport function DataGridCell<TData>({ cell, table }: DataGridCellProps<TData>) {\n  const meta = table.options.meta;\n  const originalRowIndex = cell.row.index;\n\n  const rows = table.getRowModel().rows;\n  const displayRowIndex = rows.findIndex(\n    (row) => row.original === cell.row.original,\n  );\n  const rowIndex = displayRowIndex >= 0 ? displayRowIndex : originalRowIndex;\n  const columnId = cell.column.id;\n\n  const isFocused =\n    meta?.focusedCell?.rowIndex === rowIndex &&\n    meta?.focusedCell?.columnId === columnId;\n  const isEditing =\n    meta?.editingCell?.rowIndex === rowIndex &&\n    meta?.editingCell?.columnId === columnId;\n  const isSelected = meta?.getIsCellSelected?.(rowIndex, columnId) ?? false;\n\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const variant = cellOpts?.variant ?? \"text\";\n\n  switch (variant) {\n    case \"short-text\":\n      return (\n        <ShortTextCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"long-text\":\n      return (\n        <LongTextCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"number\":\n      return (\n        <NumberCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"select\":\n      return (\n        <SelectCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"multi-select\":\n      return (\n        <MultiSelectCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"checkbox\":\n      return (\n        <CheckboxCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"date\":\n      return (\n        <DateCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"url\":\n      return (\n        <UrlCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"file\":\n      return (\n        <FileCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n\n    default:\n      return (\n        <ShortTextCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n  }\n}\n",
       "type": "registry:component",
       "target": "src/components/data-grid/data-grid-cell.tsx"
     },
@@ -46,13 +46,13 @@
     },
     {
       "path": "src/components/data-grid/data-grid-cell-variants.tsx",
-      "content": "\"use client\";\n\nimport type { Cell, Table } from \"@tanstack/react-table\";\nimport {\n  Check,\n  File,\n  FileArchive,\n  FileAudio,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo,\n  Presentation,\n  Upload,\n  X,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { DataGridCellWrapper } from \"@/components/data-grid/data-grid-cell-wrapper\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { useBadgeOverflow } from \"@/hooks/use-badge-overflow\";\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getCellKey, getLineCount } from \"@/lib/data-grid\";\nimport { cn } from \"@/lib/utils\";\nimport type { FileCellData } from \"@/types/data-grid\";\n\ninterface CellVariantProps<TData> {\n  cell: Cell<TData, unknown>;\n  table: Table<TData>;\n  rowIndex: number;\n  columnId: string;\n  isEditing: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n}\n\nexport function ShortTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue;\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    // Read the current value directly from the DOM to avoid stale state\n    const currentValue = cellRef.current?.textContent ?? \"\";\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue}\n      </div>\n    </DataGridCellWrapper>\n  );\n}\n\nexport function LongTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  // Debounced auto-save (300ms delay)\n  const debouncedSave = useDebouncedCallback((newValue: string) => {\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n  }, 300);\n\n  const onSave = React.useCallback(() => {\n    // Immediately save any pending changes and close the popover\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onCancel = React.useCallback(() => {\n    // Restore the original value\n    setValue(initialValue ?? \"\");\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue });\n    meta?.onCellEditingStop?.();\n  }, [meta, initialValue, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        // Immediately save any pending changes when closing\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, value, initialValue, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    if (textareaRef.current) {\n      textareaRef.current.focus();\n      const length = textareaRef.current.value.length;\n      textareaRef.current.setSelectionRange(length, length);\n    }\n  }, []);\n\n  const onBlur = React.useCallback(() => {\n    // Immediately save any pending changes on blur\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      const newValue = event.target.value;\n      setValue(newValue);\n      // Debounced auto-save\n      debouncedSave(newValue);\n    },\n    [debouncedSave],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onCancel();\n      } else if (event.key === \"Enter\" && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        onSave();\n      } else if (event.key === \"Tab\") {\n        event.preventDefault();\n        // Save any pending changes\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n        return;\n      }\n      // Stop propagation to prevent grid navigation\n      event.stopPropagation();\n    },\n    [onSave, onCancel, value, initialValue, meta, rowIndex, columnId],\n  );\n\n  return (\n    <Popover open={isEditing} onOpenChange={onOpenChange}>\n      <PopoverAnchor asChild>\n        <DataGridCellWrapper\n          ref={containerRef}\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        >\n          <span data-slot=\"grid-cell-content\">{value}</span>\n        </DataGridCellWrapper>\n      </PopoverAnchor>\n      <PopoverContent\n        data-grid-cell-editor=\"\"\n        align=\"start\"\n        side=\"bottom\"\n        sideOffset={sideOffset}\n        className=\"w-[400px] rounded-none p-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n      >\n        <Textarea\n          placeholder=\"Enter text...\"\n          className=\"min-h-[150px] resize-none rounded-none border-0 shadow-none focus-visible:ring-0\"\n          ref={textareaRef}\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function NumberCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as number;\n  const [value, setValue] = React.useState(String(initialValue ?? \"\"));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const min = cellOpts?.variant === \"number\" ? cellOpts.min : undefined;\n  const max = cellOpts?.variant === \"number\" ? cellOpts.max : undefined;\n  const step = cellOpts?.variant === \"number\" ? cellOpts.step : undefined;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(String(initialValue ?? \"\"));\n  }\n\n  const onBlur = React.useCallback(() => {\n    const numValue = value === \"\" ? null : Number(value);\n    if (numValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue, value]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(String(initialValue ?? \"\"));\n          inputRef.current?.blur();\n        }\n      } else if (isFocused) {\n        // Handle Backspace to start editing with empty value\n        if (event.key === \"Backspace\") {\n          setValue(\"\");\n        } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n          // Handle typing to pre-fill the value when editing starts\n          setValue(event.key);\n        }\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId, value],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, [isEditing]);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <input\n          ref={inputRef}\n          type=\"number\"\n          value={value}\n          min={min}\n          max={max}\n          step={step}\n          onBlur={onBlur}\n          onChange={onChange}\n          className=\"w-full border-none bg-transparent p-0 outline-none\"\n        />\n      ) : (\n        <span data-slot=\"grid-cell-content\">{value}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function SelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"select\" ? cellOpts.options : [];\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n  }\n\n  const onValueChange = React.useCallback(\n    (newValue: string) => {\n      setValue(newValue);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  const displayLabel =\n    options.find((opt) => opt.value === value)?.label ?? value;\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Select\n          value={value}\n          onValueChange={onValueChange}\n          open={isEditing}\n          onOpenChange={onOpenChange}\n        >\n          <SelectTrigger\n            size=\"sm\"\n            className=\"size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent\n            data-grid-cell-editor=\"\"\n            // compensate for the wrapper padding\n            align=\"start\"\n            alignOffset={-8}\n            sideOffset={-8}\n            className=\"min-w-[calc(var(--radix-select-trigger-width)+16px)]\"\n          >\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      ) : (\n        <span data-slot=\"grid-cell-content\">{displayLabel}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function MultiSelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as string[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const [selectedValues, setSelectedValues] =\n    React.useState<string[]>(cellValue);\n  const [searchValue, setSearchValue] = React.useState(\"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"multi-select\" ? cellOpts.options : [];\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setSelectedValues(cellValue);\n    setSearchValue(\"\");\n  }\n\n  const onValueChange = React.useCallback(\n    (value: string) => {\n      const newValues = selectedValues.includes(value)\n        ? selectedValues.filter((v) => v !== value)\n        : [...selectedValues, value];\n\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Clear search input and focus back on input after selection\n      setSearchValue(\"\");\n      queueMicrotask(() => inputRef.current?.focus());\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const removeValue = React.useCallback(\n    (valueToRemove: string, event?: React.MouseEvent) => {\n      event?.stopPropagation();\n      event?.preventDefault();\n      const newValues = selectedValues.filter((v) => v !== valueToRemove);\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Focus back on input after removing\n      setTimeout(() => inputRef.current?.focus(), 0);\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    setSelectedValues([]);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n    queueMicrotask(() => inputRef.current?.focus());\n  }, [meta, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setSelectedValues(cellValue);\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, cellValue, meta],\n  );\n\n  const onInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // Handle backspace when input is empty - remove last selected item\n      if (\n        event.key === \"Backspace\" &&\n        searchValue === \"\" &&\n        selectedValues.length > 0\n      ) {\n        event.preventDefault();\n        const lastValue = selectedValues[selectedValues.length - 1];\n        if (lastValue) {\n          removeValue(lastValue);\n        }\n      }\n      // Prevent escape from propagating to close the popover immediately\n      // Let the command handle it first\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n      }\n    },\n    [searchValue, selectedValues, removeValue],\n  );\n\n  const displayLabels = selectedValues\n    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)\n    .filter(Boolean);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =\n    useBadgeOverflow({\n      items: displayLabels,\n      getLabel: (label) => label,\n      containerRef,\n      lineCount,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[300px] rounded-none p-0\"\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <Command className=\"**:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:border-none **:data-[slot=command-input-wrapper]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden\">\n              <div className=\"flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5\">\n                {selectedValues.map((value) => {\n                  const option = options.find((opt) => opt.value === value);\n                  const label = option?.label ?? value;\n\n                  return (\n                    <Badge\n                      key={value}\n                      variant=\"secondary\"\n                      className=\"h-5 gap-1 px-1.5 text-xs\"\n                    >\n                      {label}\n                      <button\n                        type=\"button\"\n                        onClick={(event) => removeValue(value, event)}\n                        onPointerDown={(event) => {\n                          event.preventDefault();\n                          event.stopPropagation();\n                        }}\n                      >\n                        <X className=\"size-3\" />\n                      </button>\n                    </Badge>\n                  );\n                })}\n                <CommandInput\n                  ref={inputRef}\n                  value={searchValue}\n                  onValueChange={setSearchValue}\n                  onKeyDown={onInputKeyDown}\n                  placeholder=\"Search...\"\n                  className=\"h-auto flex-1 p-0\"\n                />\n              </div>\n              <CommandList className=\"max-h-full\">\n                <CommandEmpty>No options found.</CommandEmpty>\n                <CommandGroup className=\"max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden\">\n                  {options.map((option) => {\n                    const isSelected = selectedValues.includes(option.value);\n\n                    return (\n                      <CommandItem\n                        key={option.value}\n                        value={option.label}\n                        onSelect={() => onValueChange(option.value)}\n                      >\n                        <div\n                          className={cn(\n                            \"flex size-4 items-center justify-center rounded-sm border border-primary\",\n                            isSelected\n                              ? \"bg-primary text-primary-foreground\"\n                              : \"opacity-50 [&_svg]:invisible\",\n                          )}\n                        >\n                          <Check className=\"size-3\" />\n                        </div>\n                        <span>{option.label}</span>\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n                {selectedValues.length > 0 && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <CommandItem\n                        onSelect={clearAll}\n                        className=\"justify-center text-muted-foreground\"\n                      >\n                        Clear all\n                      </CommandItem>\n                    </CommandGroup>\n                  </>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {displayLabels.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleLabels.map((label, index) => (\n            <Badge\n              key={selectedValues[index]}\n              variant=\"secondary\"\n              className=\"h-5 shrink-0 px-1.5 text-xs\"\n            >\n              {label}\n            </Badge>\n          ))}\n          {hiddenBadgeCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenBadgeCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function CheckboxCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as boolean;\n  const [value, setValue] = React.useState(Boolean(initialValue));\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(Boolean(initialValue));\n  }\n\n  const onCheckedChange = React.useCallback(\n    (checked: boolean) => {\n      setValue(checked);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isFocused && (event.key === \" \" || event.key === \"Enter\")) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      } else if (isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isFocused, value, onCheckedChange, meta],\n  );\n\n  const onWrapperClick = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isFocused) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      }\n    },\n    [isFocused, value, onCheckedChange],\n  );\n\n  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const onCheckboxMouseDown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const onCheckboxDoubleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={false}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className=\"flex size-full justify-center\"\n      onClick={onWrapperClick}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Checkbox\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        className=\"border-primary\"\n        onClick={onCheckboxClick}\n        onMouseDown={onCheckboxMouseDown}\n        onDoubleClick={onCheckboxDoubleClick}\n      />\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatDateForDisplay(dateStr: string) {\n  if (!dateStr) return \"\";\n  const date = new Date(dateStr);\n  return date.toLocaleDateString();\n}\n\nexport function DateCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  const selectedDate = value ? new Date(value) : undefined;\n\n  const onDateSelect = React.useCallback(\n    (date: Date | undefined) => {\n      if (!date) return;\n\n      const formattedDate = date.toISOString().split(\"T\")[0] ?? \"\";\n      setValue(formattedDate);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: formattedDate });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Popover open={isEditing} onOpenChange={onOpenChange}>\n        <PopoverAnchor asChild>\n          <span data-slot=\"grid-cell-content\">\n            {formatDateForDisplay(value)}\n          </span>\n        </PopoverAnchor>\n        {isEditing && (\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            alignOffset={-8}\n            className=\"w-auto p-0\"\n          >\n            <Calendar\n              autoFocus\n              captionLayout=\"dropdown\"\n              mode=\"single\"\n              defaultMonth={selectedDate ?? new Date()}\n              selected={selectedDate}\n              onSelect={onDateSelect}\n            />\n          </PopoverContent>\n        )}\n      </Popover>\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 B\";\n  const k = 1024;\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n}\n\nfunction getFileIcon(\n  type: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> {\n  if (type.startsWith(\"image/\")) return FileImage;\n  if (type.startsWith(\"video/\")) return FileVideo;\n  if (type.startsWith(\"audio/\")) return FileAudio;\n  if (type.includes(\"pdf\")) return FileText;\n  if (type.includes(\"zip\") || type.includes(\"rar\")) return FileArchive;\n  if (\n    type.includes(\"word\") ||\n    type.includes(\"document\") ||\n    type.includes(\"doc\")\n  )\n    return FileText;\n  if (type.includes(\"sheet\") || type.includes(\"excel\") || type.includes(\"xls\"))\n    return FileSpreadsheet;\n  if (\n    type.includes(\"presentation\") ||\n    type.includes(\"powerpoint\") ||\n    type.includes(\"ppt\")\n  )\n    return Presentation;\n  return File;\n}\n\nexport function FileCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as FileCellData[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const labelId = React.useId();\n  const descriptionId = React.useId();\n\n  const [files, setFiles] = React.useState<FileCellData[]>(cellValue);\n  const [uploadingFiles, setUploadingFiles] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const [isDraggingOver, setIsDraggingOver] = React.useState(false);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const dropzoneRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const fileCellOpts = cellOpts?.variant === \"file\" ? cellOpts : null;\n  const maxFileSize = fileCellOpts?.maxFileSize ?? 10 * 1024 * 1024;\n  const maxFiles = fileCellOpts?.maxFiles ?? 10;\n  const accept = fileCellOpts?.accept;\n  const multiple = fileCellOpts?.multiple ?? true;\n\n  const acceptedTypes = React.useMemo(\n    () => (accept ? accept.split(\",\").map((t) => t.trim()) : null),\n    [accept],\n  );\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setFiles(cellValue);\n    setError(null);\n  }\n\n  const validateFile = React.useCallback(\n    (file: File): string | null => {\n      if (maxFileSize && file.size > maxFileSize) {\n        return `File size exceeds ${formatFileSize(maxFileSize)}`;\n      }\n      if (acceptedTypes) {\n        const fileExtension = `.${file.name.split(\".\").pop()}`;\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.endsWith(\"/*\")) {\n            // Handle wildcard types like \"image/*\"\n            const baseType = type.slice(0, -2);\n            return file.type.startsWith(`${baseType}/`);\n          }\n          if (type.startsWith(\".\")) {\n            // Handle file extensions like \".pdf\"\n            return fileExtension.toLowerCase() === type.toLowerCase();\n          }\n          // Exact match for specific MIME types\n          return file.type === type;\n        });\n        if (!isAccepted) {\n          return `File type not accepted. Accepted: ${accept}`;\n        }\n      }\n      return null;\n    },\n    [maxFileSize, acceptedTypes, accept],\n  );\n\n  const addFiles = React.useCallback(\n    async (newFiles: File[], skipUpload = false) => {\n      setError(null);\n\n      // Check max files limit\n      if (maxFiles && files.length + newFiles.length > maxFiles) {\n        setError(`Maximum ${maxFiles} files allowed`);\n        return;\n      }\n\n      const validFiles: FileCellData[] = [];\n      let firstError: string | null = null;\n\n      for (const file of newFiles) {\n        const validationError = validateFile(file);\n        if (validationError) {\n          if (!firstError) {\n            firstError = validationError;\n          }\n          continue;\n        }\n\n        // Create file data object with temporary ID\n        const fileData: FileCellData = {\n          id: crypto.randomUUID(),\n          name: file.name,\n          size: file.size,\n          type: file.type,\n          url: URL.createObjectURL(file),\n        };\n        validFiles.push(fileData);\n      }\n\n      if (firstError) {\n        setError(firstError);\n      }\n\n      if (validFiles.length > 0) {\n        // If not skipping upload (dropped on cell), show skeletons first\n        if (!skipUpload) {\n          // Add temp files immediately (will show as skeletons)\n          const tempFiles = validFiles.map((f) => ({ ...f, url: undefined }));\n          const filesWithTemp = [...files, ...tempFiles];\n          setFiles(filesWithTemp);\n\n          // Mark as uploading\n          const uploadingIds = new Set(validFiles.map((f) => f.id));\n          setUploadingFiles(uploadingIds);\n\n          // Simulate upload delay (in real app, this would be actual upload)\n          await new Promise((resolve) => setTimeout(resolve, 800));\n\n          // Replace temp files with real ones\n          const finalFiles = filesWithTemp.map(\n            (f) => validFiles.find((vf) => vf.id === f.id) || f,\n          );\n          setFiles(finalFiles);\n          setUploadingFiles(new Set());\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: finalFiles });\n        } else {\n          // If from editor, add immediately without skeleton\n          const updatedFiles = [...files, ...validFiles];\n          setFiles(updatedFiles);\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n        }\n      }\n    },\n    [files, maxFiles, validateFile, meta, rowIndex, columnId],\n  );\n\n  const removeFile = React.useCallback(\n    (fileId: string) => {\n      setError(null);\n      // Revoke object URL to prevent memory leak\n      const fileToRemove = files.find((f) => f.id === fileId);\n      if (fileToRemove?.url) {\n        URL.revokeObjectURL(fileToRemove.url);\n      }\n      const updatedFiles = files.filter((f) => f.id !== fileId);\n      setFiles(updatedFiles);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n    },\n    [files, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    // Revoke all object URLs to prevent memory leak\n    for (const file of files) {\n      if (file.url) {\n        URL.revokeObjectURL(file.url);\n      }\n    }\n    setFiles([]);\n    setError(null);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n  }, [files, meta, rowIndex, columnId]);\n\n  const onDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setIsDragging(true);\n  }, []);\n\n  const onDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDragging(false);\n    }\n  }, []);\n\n  const onDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      addFiles(droppedFiles, true); // Skip upload skeleton in editor\n    },\n    [addFiles],\n  );\n\n  const onFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const selectedFiles = Array.from(event.target.files ?? []);\n      addFiles(selectedFiles, true); // Skip upload skeleton for manual selection\n      // Reset input so the same file can be selected again\n      event.target.value = \"\";\n    },\n    [addFiles],\n  );\n\n  // Cell-level drag handlers (for dropping directly on cell)\n  const onCellDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Only show drop indicator if dragging files\n    if (event.dataTransfer.types.includes(\"Files\")) {\n      setIsDraggingOver(true);\n    }\n  }, []);\n\n  const onCellDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDraggingOver(false);\n    }\n  }, []);\n\n  const onCellDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onCellDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDraggingOver(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      if (droppedFiles.length > 0) {\n        addFiles(droppedFiles, false); // Show skeleton for dropped files\n      }\n    },\n    [addFiles],\n  );\n\n  const onDropzoneClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const onDropzoneKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onDropzoneClick();\n      }\n    },\n    [onDropzoneClick],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setError(null);\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onEscapeKeyDown: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onEscapeKeyDown\"]\n  > = React.useCallback((event) => {\n    // Prevent the escape key from propagating to the data grid's keyboard handler\n    // which would call blurCell() and remove focus from the cell\n    event.stopPropagation();\n  }, []);\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    // Focus the dropzone for better keyboard UX - users can press Enter again to open file dialog\n    queueMicrotask(() => {\n      dropzoneRef.current?.focus();\n    });\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          setFiles(cellValue);\n          setError(null);\n          meta?.onCellEditingStop?.();\n        } else if (event.key === \" \") {\n          event.preventDefault();\n          onDropzoneClick();\n        }\n      } else if (isFocused && event.key === \"Enter\") {\n        // Handle Enter key to start editing when focused but not editing\n        event.preventDefault();\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [\n      isEditing,\n      isFocused,\n      cellValue,\n      meta,\n      onDropzoneClick,\n      rowIndex,\n      columnId,\n    ],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const file of files) {\n        if (file.url) {\n          URL.revokeObjectURL(file.url);\n        }\n      }\n    };\n  }, [files]);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } =\n    useBadgeOverflow({\n      items: files,\n      getLabel: (file) => file.name,\n      containerRef,\n      lineCount,\n      cacheKeyPrefix: \"file\",\n      iconSize: 12,\n      maxWidth: 100,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className={cn({\n        \"ring-1 ring-primary/80 ring-inset\": isDraggingOver,\n      })}\n      onDragEnter={onCellDragEnter}\n      onDragLeave={onCellDragLeave}\n      onDragOver={onCellDragOver}\n      onDrop={onCellDrop}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[400px] rounded-none p-0\"\n            onEscapeKeyDown={onEscapeKeyDown}\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <div className=\"flex flex-col gap-2 p-3\">\n              <span id={labelId} className=\"sr-only\">\n                File upload\n              </span>\n              <div\n                role=\"region\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                aria-invalid={!!error}\n                data-dragging={isDragging ? \"\" : undefined}\n                data-invalid={error ? \"\" : undefined}\n                tabIndex={isDragging ? -1 : 0}\n                className=\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20\"\n                ref={dropzoneRef}\n                onClick={onDropzoneClick}\n                onDragEnter={onDragEnter}\n                onDragLeave={onDragLeave}\n                onDragOver={onDragOver}\n                onDrop={onDrop}\n                onKeyDown={onDropzoneKeyDown}\n              >\n                <Upload className=\"size-8 text-muted-foreground\" />\n                <div className=\"text-center text-sm\">\n                  <p className=\"font-medium\">\n                    {isDragging ? \"Drop files here\" : \"Drag files here\"}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    or click to browse\n                  </p>\n                </div>\n                <p id={descriptionId} className=\"text-muted-foreground text-xs\">\n                  {maxFileSize\n                    ? `Max size: ${formatFileSize(maxFileSize)}${maxFiles ? ` • Max ${maxFiles} files` : \"\"}`\n                    : maxFiles\n                      ? `Max ${maxFiles} files`\n                      : \"Select files to upload\"}\n                </p>\n              </div>\n              <input\n                type=\"file\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                multiple={multiple}\n                accept={accept}\n                className=\"sr-only\"\n                ref={fileInputRef}\n                onChange={onFileInputChange}\n              />\n              {error && (\n                <div className=\"rounded-md bg-destructive/10 px-3 py-2 text-destructive text-xs\">\n                  {error}\n                </div>\n              )}\n              {files.length > 0 && (\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <p className=\"font-medium text-muted-foreground text-xs\">\n                      {files.length} {files.length === 1 ? \"file\" : \"files\"}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-6 text-muted-foreground text-xs\"\n                      onClick={clearAll}\n                    >\n                      Clear all\n                    </Button>\n                  </div>\n                  <div className=\"max-h-[200px] space-y-1 overflow-y-auto\">\n                    {files.map((file) => {\n                      const FileIcon = getFileIcon(file.type);\n\n                      return (\n                        <div\n                          key={file.id}\n                          className=\"flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1.5\"\n                        >\n                          {FileIcon && (\n                            <FileIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n                          )}\n                          <div className=\"flex-1 overflow-hidden\">\n                            <p className=\"truncate text-sm\">{file.name}</p>\n                            <p className=\"text-muted-foreground text-xs\">\n                              {formatFileSize(file.size)}\n                            </p>\n                          </div>\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            className=\"size-5 rounded-sm\"\n                            onClick={() => removeFile(file.id)}\n                          >\n                            <X className=\"size-3\" />\n                          </Button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {isDraggingOver ? (\n        <div className=\"flex items-center justify-center gap-2 text-primary text-sm\">\n          <Upload className=\"size-4\" />\n          <span>Drop files here</span>\n        </div>\n      ) : files.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleFiles.map((file) => {\n            const isUploading = uploadingFiles.has(file.id);\n\n            if (isUploading) {\n              // Show skeleton for uploading files\n              return (\n                <Skeleton\n                  key={file.id}\n                  className=\"h-5 shrink-0 px-1.5\"\n                  style={{\n                    width: `${Math.min(file.name.length * 8 + 30, 100)}px`,\n                  }}\n                />\n              );\n            }\n\n            return (\n              <Badge\n                key={file.id}\n                variant=\"secondary\"\n                className=\"h-5 shrink-0 gap-1 px-1.5 text-xs\"\n              >\n                {React.createElement(getFileIcon(file.type), {\n                  className: \"size-3 shrink-0\",\n                })}\n                <span className=\"max-w-[100px] truncate\">{file.name}</span>\n              </Badge>\n            );\n          })}\n          {hiddenFileCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenFileCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { Cell, Table } from \"@tanstack/react-table\";\nimport {\n  Check,\n  File,\n  FileArchive,\n  FileAudio,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo,\n  Presentation,\n  Upload,\n  X,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { DataGridCellWrapper } from \"@/components/data-grid/data-grid-cell-wrapper\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { useBadgeOverflow } from \"@/hooks/use-badge-overflow\";\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getCellKey, getLineCount } from \"@/lib/data-grid\";\nimport { cn } from \"@/lib/utils\";\nimport type { FileCellData } from \"@/types/data-grid\";\n\ninterface CellVariantProps<TData> {\n  cell: Cell<TData, unknown>;\n  table: Table<TData>;\n  rowIndex: number;\n  columnId: string;\n  isEditing: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n}\n\nexport function ShortTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue;\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    // Read the current value directly from the DOM to avoid stale state\n    const currentValue = cellRef.current?.textContent ?? \"\";\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue}\n      </div>\n    </DataGridCellWrapper>\n  );\n}\n\nexport function LongTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  // Debounced auto-save (300ms delay)\n  const debouncedSave = useDebouncedCallback((newValue: string) => {\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n  }, 300);\n\n  const onSave = React.useCallback(() => {\n    // Immediately save any pending changes and close the popover\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onCancel = React.useCallback(() => {\n    // Restore the original value\n    setValue(initialValue ?? \"\");\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue });\n    meta?.onCellEditingStop?.();\n  }, [meta, initialValue, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        // Immediately save any pending changes when closing\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, value, initialValue, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    if (textareaRef.current) {\n      textareaRef.current.focus();\n      const length = textareaRef.current.value.length;\n      textareaRef.current.setSelectionRange(length, length);\n    }\n  }, []);\n\n  const onBlur = React.useCallback(() => {\n    // Immediately save any pending changes on blur\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      const newValue = event.target.value;\n      setValue(newValue);\n      // Debounced auto-save\n      debouncedSave(newValue);\n    },\n    [debouncedSave],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onCancel();\n      } else if (event.key === \"Enter\" && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        onSave();\n      } else if (event.key === \"Tab\") {\n        event.preventDefault();\n        // Save any pending changes\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n        return;\n      }\n      // Stop propagation to prevent grid navigation\n      event.stopPropagation();\n    },\n    [onSave, onCancel, value, initialValue, meta, rowIndex, columnId],\n  );\n\n  return (\n    <Popover open={isEditing} onOpenChange={onOpenChange}>\n      <PopoverAnchor asChild>\n        <DataGridCellWrapper\n          ref={containerRef}\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        >\n          <span data-slot=\"grid-cell-content\">{value}</span>\n        </DataGridCellWrapper>\n      </PopoverAnchor>\n      <PopoverContent\n        data-grid-cell-editor=\"\"\n        align=\"start\"\n        side=\"bottom\"\n        sideOffset={sideOffset}\n        className=\"w-[400px] rounded-none p-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n      >\n        <Textarea\n          placeholder=\"Enter text...\"\n          className=\"min-h-[150px] resize-none rounded-none border-0 shadow-none focus-visible:ring-0\"\n          ref={textareaRef}\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function NumberCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as number;\n  const [value, setValue] = React.useState(String(initialValue ?? \"\"));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const min = cellOpts?.variant === \"number\" ? cellOpts.min : undefined;\n  const max = cellOpts?.variant === \"number\" ? cellOpts.max : undefined;\n  const step = cellOpts?.variant === \"number\" ? cellOpts.step : undefined;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(String(initialValue ?? \"\"));\n  }\n\n  const onBlur = React.useCallback(() => {\n    const numValue = value === \"\" ? null : Number(value);\n    if (numValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue, value]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(String(initialValue ?? \"\"));\n          inputRef.current?.blur();\n        }\n      } else if (isFocused) {\n        // Handle Backspace to start editing with empty value\n        if (event.key === \"Backspace\") {\n          setValue(\"\");\n        } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n          // Handle typing to pre-fill the value when editing starts\n          setValue(event.key);\n        }\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId, value],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, [isEditing]);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <input\n          ref={inputRef}\n          type=\"number\"\n          value={value}\n          min={min}\n          max={max}\n          step={step}\n          onBlur={onBlur}\n          onChange={onChange}\n          className=\"w-full border-none bg-transparent p-0 outline-none\"\n        />\n      ) : (\n        <span data-slot=\"grid-cell-content\">{value}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function SelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"select\" ? cellOpts.options : [];\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n  }\n\n  const onValueChange = React.useCallback(\n    (newValue: string) => {\n      setValue(newValue);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  const displayLabel =\n    options.find((opt) => opt.value === value)?.label ?? value;\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Select\n          value={value}\n          onValueChange={onValueChange}\n          open={isEditing}\n          onOpenChange={onOpenChange}\n        >\n          <SelectTrigger\n            size=\"sm\"\n            className=\"size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent\n            data-grid-cell-editor=\"\"\n            // compensate for the wrapper padding\n            align=\"start\"\n            alignOffset={-8}\n            sideOffset={-8}\n            className=\"min-w-[calc(var(--radix-select-trigger-width)+16px)]\"\n          >\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      ) : (\n        <span data-slot=\"grid-cell-content\">{displayLabel}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function MultiSelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as string[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const [selectedValues, setSelectedValues] =\n    React.useState<string[]>(cellValue);\n  const [searchValue, setSearchValue] = React.useState(\"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"multi-select\" ? cellOpts.options : [];\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setSelectedValues(cellValue);\n    setSearchValue(\"\");\n  }\n\n  const onValueChange = React.useCallback(\n    (value: string) => {\n      const newValues = selectedValues.includes(value)\n        ? selectedValues.filter((v) => v !== value)\n        : [...selectedValues, value];\n\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Clear search input and focus back on input after selection\n      setSearchValue(\"\");\n      queueMicrotask(() => inputRef.current?.focus());\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const removeValue = React.useCallback(\n    (valueToRemove: string, event?: React.MouseEvent) => {\n      event?.stopPropagation();\n      event?.preventDefault();\n      const newValues = selectedValues.filter((v) => v !== valueToRemove);\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Focus back on input after removing\n      setTimeout(() => inputRef.current?.focus(), 0);\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    setSelectedValues([]);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n    queueMicrotask(() => inputRef.current?.focus());\n  }, [meta, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setSelectedValues(cellValue);\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, cellValue, meta],\n  );\n\n  const onInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // Handle backspace when input is empty - remove last selected item\n      if (\n        event.key === \"Backspace\" &&\n        searchValue === \"\" &&\n        selectedValues.length > 0\n      ) {\n        event.preventDefault();\n        const lastValue = selectedValues[selectedValues.length - 1];\n        if (lastValue) {\n          removeValue(lastValue);\n        }\n      }\n      // Prevent escape from propagating to close the popover immediately\n      // Let the command handle it first\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n      }\n    },\n    [searchValue, selectedValues, removeValue],\n  );\n\n  const displayLabels = selectedValues\n    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)\n    .filter(Boolean);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =\n    useBadgeOverflow({\n      items: displayLabels,\n      getLabel: (label) => label,\n      containerRef,\n      lineCount,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[300px] rounded-none p-0\"\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <Command className=\"**:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:border-none **:data-[slot=command-input-wrapper]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden\">\n              <div className=\"flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5\">\n                {selectedValues.map((value) => {\n                  const option = options.find((opt) => opt.value === value);\n                  const label = option?.label ?? value;\n\n                  return (\n                    <Badge\n                      key={value}\n                      variant=\"secondary\"\n                      className=\"h-5 gap-1 px-1.5 text-xs\"\n                    >\n                      {label}\n                      <button\n                        type=\"button\"\n                        onClick={(event) => removeValue(value, event)}\n                        onPointerDown={(event) => {\n                          event.preventDefault();\n                          event.stopPropagation();\n                        }}\n                      >\n                        <X className=\"size-3\" />\n                      </button>\n                    </Badge>\n                  );\n                })}\n                <CommandInput\n                  ref={inputRef}\n                  value={searchValue}\n                  onValueChange={setSearchValue}\n                  onKeyDown={onInputKeyDown}\n                  placeholder=\"Search...\"\n                  className=\"h-auto flex-1 p-0\"\n                />\n              </div>\n              <CommandList className=\"max-h-full\">\n                <CommandEmpty>No options found.</CommandEmpty>\n                <CommandGroup className=\"max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden\">\n                  {options.map((option) => {\n                    const isSelected = selectedValues.includes(option.value);\n\n                    return (\n                      <CommandItem\n                        key={option.value}\n                        value={option.label}\n                        onSelect={() => onValueChange(option.value)}\n                      >\n                        <div\n                          className={cn(\n                            \"flex size-4 items-center justify-center rounded-sm border border-primary\",\n                            isSelected\n                              ? \"bg-primary text-primary-foreground\"\n                              : \"opacity-50 [&_svg]:invisible\",\n                          )}\n                        >\n                          <Check className=\"size-3\" />\n                        </div>\n                        <span>{option.label}</span>\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n                {selectedValues.length > 0 && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <CommandItem\n                        onSelect={clearAll}\n                        className=\"justify-center text-muted-foreground\"\n                      >\n                        Clear all\n                      </CommandItem>\n                    </CommandGroup>\n                  </>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {displayLabels.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleLabels.map((label, index) => (\n            <Badge\n              key={selectedValues[index]}\n              variant=\"secondary\"\n              className=\"h-5 shrink-0 px-1.5 text-xs\"\n            >\n              {label}\n            </Badge>\n          ))}\n          {hiddenBadgeCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenBadgeCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function CheckboxCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as boolean;\n  const [value, setValue] = React.useState(Boolean(initialValue));\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(Boolean(initialValue));\n  }\n\n  const onCheckedChange = React.useCallback(\n    (checked: boolean) => {\n      setValue(checked);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isFocused && (event.key === \" \" || event.key === \"Enter\")) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      } else if (isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isFocused, value, onCheckedChange, meta],\n  );\n\n  const onWrapperClick = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isFocused) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      }\n    },\n    [isFocused, value, onCheckedChange],\n  );\n\n  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const onCheckboxMouseDown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const onCheckboxDoubleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={false}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className=\"flex size-full justify-center\"\n      onClick={onWrapperClick}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Checkbox\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        className=\"border-primary\"\n        onClick={onCheckboxClick}\n        onMouseDown={onCheckboxMouseDown}\n        onDoubleClick={onCheckboxDoubleClick}\n      />\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatDateForDisplay(dateStr: string) {\n  if (!dateStr) return \"\";\n  const date = new Date(dateStr);\n  return date.toLocaleDateString();\n}\n\nexport function DateCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  const selectedDate = value ? new Date(value) : undefined;\n\n  const onDateSelect = React.useCallback(\n    (date: Date | undefined) => {\n      if (!date) return;\n\n      const formattedDate = date.toISOString().split(\"T\")[0] ?? \"\";\n      setValue(formattedDate);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: formattedDate });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Popover open={isEditing} onOpenChange={onOpenChange}>\n        <PopoverAnchor asChild>\n          <span data-slot=\"grid-cell-content\">\n            {formatDateForDisplay(value)}\n          </span>\n        </PopoverAnchor>\n        {isEditing && (\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            alignOffset={-8}\n            className=\"w-auto p-0\"\n          >\n            <Calendar\n              autoFocus\n              captionLayout=\"dropdown\"\n              mode=\"single\"\n              defaultMonth={selectedDate ?? new Date()}\n              selected={selectedDate}\n              onSelect={onDateSelect}\n            />\n          </PopoverContent>\n        )}\n      </Popover>\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 B\";\n  const k = 1024;\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n}\n\nfunction getFileIcon(\n  type: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> {\n  if (type.startsWith(\"image/\")) return FileImage;\n  if (type.startsWith(\"video/\")) return FileVideo;\n  if (type.startsWith(\"audio/\")) return FileAudio;\n  if (type.includes(\"pdf\")) return FileText;\n  if (type.includes(\"zip\") || type.includes(\"rar\")) return FileArchive;\n  if (\n    type.includes(\"word\") ||\n    type.includes(\"document\") ||\n    type.includes(\"doc\")\n  )\n    return FileText;\n  if (type.includes(\"sheet\") || type.includes(\"excel\") || type.includes(\"xls\"))\n    return FileSpreadsheet;\n  if (\n    type.includes(\"presentation\") ||\n    type.includes(\"powerpoint\") ||\n    type.includes(\"ppt\")\n  )\n    return Presentation;\n  return File;\n}\n\nexport function FileCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as FileCellData[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const labelId = React.useId();\n  const descriptionId = React.useId();\n\n  const [files, setFiles] = React.useState<FileCellData[]>(cellValue);\n  const [uploadingFiles, setUploadingFiles] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const [isDraggingOver, setIsDraggingOver] = React.useState(false);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const dropzoneRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const fileCellOpts = cellOpts?.variant === \"file\" ? cellOpts : null;\n  const maxFileSize = fileCellOpts?.maxFileSize ?? 10 * 1024 * 1024;\n  const maxFiles = fileCellOpts?.maxFiles ?? 10;\n  const accept = fileCellOpts?.accept;\n  const multiple = fileCellOpts?.multiple ?? true;\n\n  const acceptedTypes = React.useMemo(\n    () => (accept ? accept.split(\",\").map((t) => t.trim()) : null),\n    [accept],\n  );\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setFiles(cellValue);\n    setError(null);\n  }\n\n  const validateFile = React.useCallback(\n    (file: File): string | null => {\n      if (maxFileSize && file.size > maxFileSize) {\n        return `File size exceeds ${formatFileSize(maxFileSize)}`;\n      }\n      if (acceptedTypes) {\n        const fileExtension = `.${file.name.split(\".\").pop()}`;\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.endsWith(\"/*\")) {\n            // Handle wildcard types like \"image/*\"\n            const baseType = type.slice(0, -2);\n            return file.type.startsWith(`${baseType}/`);\n          }\n          if (type.startsWith(\".\")) {\n            // Handle file extensions like \".pdf\"\n            return fileExtension.toLowerCase() === type.toLowerCase();\n          }\n          // Exact match for specific MIME types\n          return file.type === type;\n        });\n        if (!isAccepted) {\n          return `File type not accepted. Accepted: ${accept}`;\n        }\n      }\n      return null;\n    },\n    [maxFileSize, acceptedTypes, accept],\n  );\n\n  const addFiles = React.useCallback(\n    async (newFiles: File[], skipUpload = false) => {\n      setError(null);\n\n      // Check max files limit\n      if (maxFiles && files.length + newFiles.length > maxFiles) {\n        setError(`Maximum ${maxFiles} files allowed`);\n        return;\n      }\n\n      const validFiles: FileCellData[] = [];\n      let firstError: string | null = null;\n\n      for (const file of newFiles) {\n        const validationError = validateFile(file);\n        if (validationError) {\n          if (!firstError) {\n            firstError = validationError;\n          }\n          continue;\n        }\n\n        // Create file data object with temporary ID\n        const fileData: FileCellData = {\n          id: crypto.randomUUID(),\n          name: file.name,\n          size: file.size,\n          type: file.type,\n          url: URL.createObjectURL(file),\n        };\n        validFiles.push(fileData);\n      }\n\n      if (firstError) {\n        setError(firstError);\n      }\n\n      if (validFiles.length > 0) {\n        // If not skipping upload (dropped on cell), show skeletons first\n        if (!skipUpload) {\n          // Add temp files immediately (will show as skeletons)\n          const tempFiles = validFiles.map((f) => ({ ...f, url: undefined }));\n          const filesWithTemp = [...files, ...tempFiles];\n          setFiles(filesWithTemp);\n\n          // Mark as uploading\n          const uploadingIds = new Set(validFiles.map((f) => f.id));\n          setUploadingFiles(uploadingIds);\n\n          // Simulate upload delay (in real app, this would be actual upload)\n          await new Promise((resolve) => setTimeout(resolve, 800));\n\n          // Replace temp files with real ones\n          const finalFiles = filesWithTemp.map(\n            (f) => validFiles.find((vf) => vf.id === f.id) || f,\n          );\n          setFiles(finalFiles);\n          setUploadingFiles(new Set());\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: finalFiles });\n        } else {\n          // If from editor, add immediately without skeleton\n          const updatedFiles = [...files, ...validFiles];\n          setFiles(updatedFiles);\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n        }\n      }\n    },\n    [files, maxFiles, validateFile, meta, rowIndex, columnId],\n  );\n\n  const removeFile = React.useCallback(\n    (fileId: string) => {\n      setError(null);\n      // Revoke object URL to prevent memory leak\n      const fileToRemove = files.find((f) => f.id === fileId);\n      if (fileToRemove?.url) {\n        URL.revokeObjectURL(fileToRemove.url);\n      }\n      const updatedFiles = files.filter((f) => f.id !== fileId);\n      setFiles(updatedFiles);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n    },\n    [files, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    // Revoke all object URLs to prevent memory leak\n    for (const file of files) {\n      if (file.url) {\n        URL.revokeObjectURL(file.url);\n      }\n    }\n    setFiles([]);\n    setError(null);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n  }, [files, meta, rowIndex, columnId]);\n\n  const onDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setIsDragging(true);\n  }, []);\n\n  const onDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDragging(false);\n    }\n  }, []);\n\n  const onDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      addFiles(droppedFiles, true); // Skip upload skeleton in editor\n    },\n    [addFiles],\n  );\n\n  const onFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const selectedFiles = Array.from(event.target.files ?? []);\n      addFiles(selectedFiles, true); // Skip upload skeleton for manual selection\n      // Reset input so the same file can be selected again\n      event.target.value = \"\";\n    },\n    [addFiles],\n  );\n\n  // Cell-level drag handlers (for dropping directly on cell)\n  const onCellDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Only show drop indicator if dragging files\n    if (event.dataTransfer.types.includes(\"Files\")) {\n      setIsDraggingOver(true);\n    }\n  }, []);\n\n  const onCellDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDraggingOver(false);\n    }\n  }, []);\n\n  const onCellDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onCellDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDraggingOver(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      if (droppedFiles.length > 0) {\n        addFiles(droppedFiles, false); // Show skeleton for dropped files\n      }\n    },\n    [addFiles],\n  );\n\n  const onDropzoneClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const onDropzoneKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onDropzoneClick();\n      }\n    },\n    [onDropzoneClick],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setError(null);\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onEscapeKeyDown: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onEscapeKeyDown\"]\n  > = React.useCallback((event) => {\n    // Prevent the escape key from propagating to the data grid's keyboard handler\n    // which would call blurCell() and remove focus from the cell\n    event.stopPropagation();\n  }, []);\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    // Focus the dropzone for better keyboard UX - users can press Enter again to open file dialog\n    queueMicrotask(() => {\n      dropzoneRef.current?.focus();\n    });\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          setFiles(cellValue);\n          setError(null);\n          meta?.onCellEditingStop?.();\n        } else if (event.key === \" \") {\n          event.preventDefault();\n          onDropzoneClick();\n        }\n      } else if (isFocused && event.key === \"Enter\") {\n        // Handle Enter key to start editing when focused but not editing\n        event.preventDefault();\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [\n      isEditing,\n      isFocused,\n      cellValue,\n      meta,\n      onDropzoneClick,\n      rowIndex,\n      columnId,\n    ],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const file of files) {\n        if (file.url) {\n          URL.revokeObjectURL(file.url);\n        }\n      }\n    };\n  }, [files]);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } =\n    useBadgeOverflow({\n      items: files,\n      getLabel: (file) => file.name,\n      containerRef,\n      lineCount,\n      cacheKeyPrefix: \"file\",\n      iconSize: 12,\n      maxWidth: 100,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className={cn({\n        \"ring-1 ring-primary/80 ring-inset\": isDraggingOver,\n      })}\n      onDragEnter={onCellDragEnter}\n      onDragLeave={onCellDragLeave}\n      onDragOver={onCellDragOver}\n      onDrop={onCellDrop}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[400px] rounded-none p-0\"\n            onEscapeKeyDown={onEscapeKeyDown}\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <div className=\"flex flex-col gap-2 p-3\">\n              <span id={labelId} className=\"sr-only\">\n                File upload\n              </span>\n              <div\n                role=\"region\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                aria-invalid={!!error}\n                data-dragging={isDragging ? \"\" : undefined}\n                data-invalid={error ? \"\" : undefined}\n                tabIndex={isDragging ? -1 : 0}\n                className=\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20\"\n                ref={dropzoneRef}\n                onClick={onDropzoneClick}\n                onDragEnter={onDragEnter}\n                onDragLeave={onDragLeave}\n                onDragOver={onDragOver}\n                onDrop={onDrop}\n                onKeyDown={onDropzoneKeyDown}\n              >\n                <Upload className=\"size-8 text-muted-foreground\" />\n                <div className=\"text-center text-sm\">\n                  <p className=\"font-medium\">\n                    {isDragging ? \"Drop files here\" : \"Drag files here\"}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    or click to browse\n                  </p>\n                </div>\n                <p id={descriptionId} className=\"text-muted-foreground text-xs\">\n                  {maxFileSize\n                    ? `Max size: ${formatFileSize(maxFileSize)}${maxFiles ? ` • Max ${maxFiles} files` : \"\"}`\n                    : maxFiles\n                      ? `Max ${maxFiles} files`\n                      : \"Select files to upload\"}\n                </p>\n              </div>\n              <input\n                type=\"file\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                multiple={multiple}\n                accept={accept}\n                className=\"sr-only\"\n                ref={fileInputRef}\n                onChange={onFileInputChange}\n              />\n              {error && (\n                <div className=\"rounded-md bg-destructive/10 px-3 py-2 text-destructive text-xs\">\n                  {error}\n                </div>\n              )}\n              {files.length > 0 && (\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <p className=\"font-medium text-muted-foreground text-xs\">\n                      {files.length} {files.length === 1 ? \"file\" : \"files\"}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-6 text-muted-foreground text-xs\"\n                      onClick={clearAll}\n                    >\n                      Clear all\n                    </Button>\n                  </div>\n                  <div className=\"max-h-[200px] space-y-1 overflow-y-auto\">\n                    {files.map((file) => {\n                      const FileIcon = getFileIcon(file.type);\n\n                      return (\n                        <div\n                          key={file.id}\n                          className=\"flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1.5\"\n                        >\n                          {FileIcon && (\n                            <FileIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n                          )}\n                          <div className=\"flex-1 overflow-hidden\">\n                            <p className=\"truncate text-sm\">{file.name}</p>\n                            <p className=\"text-muted-foreground text-xs\">\n                              {formatFileSize(file.size)}\n                            </p>\n                          </div>\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            className=\"size-5 rounded-sm\"\n                            onClick={() => removeFile(file.id)}\n                          >\n                            <X className=\"size-3\" />\n                          </Button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {isDraggingOver ? (\n        <div className=\"flex items-center justify-center gap-2 text-primary text-sm\">\n          <Upload className=\"size-4\" />\n          <span>Drop files here</span>\n        </div>\n      ) : files.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleFiles.map((file) => {\n            const isUploading = uploadingFiles.has(file.id);\n\n            if (isUploading) {\n              // Show skeleton for uploading files\n              return (\n                <Skeleton\n                  key={file.id}\n                  className=\"h-5 shrink-0 px-1.5\"\n                  style={{\n                    width: `${Math.min(file.name.length * 8 + 30, 100)}px`,\n                  }}\n                />\n              );\n            }\n\n            return (\n              <Badge\n                key={file.id}\n                variant=\"secondary\"\n                className=\"h-5 shrink-0 gap-1 px-1.5 text-xs\"\n              >\n                {React.createElement(getFileIcon(file.type), {\n                  className: \"size-3 shrink-0\",\n                })}\n                <span className=\"max-w-[100px] truncate\">{file.name}</span>\n              </Badge>\n            );\n          })}\n          {hiddenFileCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenFileCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction isValidUrl(urlString: string): boolean {\n  if (!urlString || urlString.trim() === \"\") return true; // Empty is valid (allows clearing)\n\n  try {\n    const url = new URL(urlString);\n    // Only allow http and https protocols\n    return url.protocol === \"http:\" || url.protocol === \"https:\";\n  } catch {\n    // Try adding https:// prefix if missing\n    try {\n      const url = new URL(`https://${urlString}`);\n      return url.protocol === \"https:\";\n    } catch {\n      return false;\n    }\n  }\n}\n\nfunction normalizeUrl(urlString: string): string {\n  if (!urlString || urlString.trim() === \"\") return \"\";\n\n  const trimmed = urlString.trim();\n\n  try {\n    // Try parsing as-is first\n    const url = new URL(trimmed);\n    return url.href;\n  } catch {\n    // Try adding https:// prefix\n    try {\n      const url = new URL(`https://${trimmed}`);\n      return url.href;\n    } catch {\n      // Return as-is if still invalid\n      return trimmed;\n    }\n  }\n}\n\nexport function UrlCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const [isInvalid, setIsInvalid] = React.useState(false);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n    setIsInvalid(false);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue ?? \"\";\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n    // Validate URL\n    if (currentValue && !isValidUrl(currentValue)) {\n      setIsInvalid(true);\n      return;\n    }\n\n    setIsInvalid(false);\n\n    // Normalize the URL (add https:// if needed)\n    const normalizedValue = normalizeUrl(currentValue);\n\n    if (normalizedValue !== initialValue) {\n      meta?.onDataUpdate?.({\n        rowIndex,\n        columnId,\n        value: normalizedValue || null,\n      });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n      // Clear invalid state while typing\n      if (isInvalid) {\n        setIsInvalid(false);\n      }\n    },\n    [isInvalid],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n          // Validate URL\n          if (currentValue && !isValidUrl(currentValue)) {\n            setIsInvalid(true);\n            return;\n          }\n\n          setIsInvalid(false);\n\n          // Normalize the URL\n          const normalizedValue = normalizeUrl(currentValue);\n\n          if (normalizedValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: normalizedValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n          // Validate URL\n          if (currentValue && !isValidUrl(currentValue)) {\n            setIsInvalid(true);\n            return;\n          }\n\n          setIsInvalid(false);\n\n          // Normalize the URL\n          const normalizedValue = normalizeUrl(currentValue);\n\n          if (normalizedValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: normalizedValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue ?? \"\");\n          setIsInvalid(false);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n        setIsInvalid(false);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  const onLinkClick = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (isEditing) {\n        event.preventDefault();\n        return;\n      }\n      // Let the link open naturally in a new tab\n    },\n    [isEditing],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n  const hasValidUrl = value && isValidUrl(value);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n      className={cn({\n        \"ring-1 ring-destructive ring-inset\": isInvalid,\n      })}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue ? (\n          isEditing ? (\n            displayValue\n          ) : hasValidUrl ? (\n            <a\n              href={normalizeUrl(displayValue)}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              onClick={onLinkClick}\n              className=\"truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60\"\n            >\n              {displayValue}\n            </a>\n          ) : (\n            <span className=\"text-muted-foreground\">{displayValue}</span>\n          )\n        ) : null}\n      </div>\n      {isInvalid && (\n        <div className=\"absolute inset-x-0 bottom-0 bg-destructive px-1 py-0.5 text-[10px] text-destructive-foreground\">\n          Invalid URL\n        </div>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n",
       "type": "registry:component",
       "target": "src/components/data-grid/data-grid-cell-variants.tsx"
     },
     {
       "path": "src/components/data-grid/data-grid-column-header.tsx",
-      "content": "\"use client\";\n\nimport type {\n  ColumnSort,\n  Header,\n  SortDirection,\n  SortingState,\n  Table,\n} from \"@tanstack/react-table\";\nimport {\n  BaselineIcon,\n  CalendarIcon,\n  CheckSquareIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n  EyeOffIcon,\n  FileIcon,\n  HashIcon,\n  ListChecksIcon,\n  ListIcon,\n  PinIcon,\n  PinOffIcon,\n  TextInitialIcon,\n  XIcon,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport type { Cell } from \"@/types/data-grid\";\n\nfunction getColumnVariant(variant?: Cell[\"variant\"]): {\n  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;\n  label: string;\n} | null {\n  switch (variant) {\n    case \"short-text\":\n      return { icon: BaselineIcon, label: \"Short text\" };\n    case \"long-text\":\n      return { icon: TextInitialIcon, label: \"Long text\" };\n    case \"number\":\n      return { icon: HashIcon, label: \"Number\" };\n    case \"select\":\n      return { icon: ListIcon, label: \"Select\" };\n    case \"multi-select\":\n      return { icon: ListChecksIcon, label: \"Multi-select\" };\n    case \"checkbox\":\n      return { icon: CheckSquareIcon, label: \"Checkbox\" };\n    case \"date\":\n      return { icon: CalendarIcon, label: \"Date\" };\n    case \"file\":\n      return { icon: FileIcon, label: \"File\" };\n    default:\n      return null;\n  }\n}\n\ninterface DataGridColumnHeaderProps<TData, TValue>\n  extends React.ComponentProps<typeof DropdownMenuTrigger> {\n  header: Header<TData, TValue>;\n  table: Table<TData>;\n}\n\nexport function DataGridColumnHeader<TData, TValue>({\n  header,\n  table,\n  className,\n  onPointerDown,\n  ...props\n}: DataGridColumnHeaderProps<TData, TValue>) {\n  const column = header.column;\n  const label = column.columnDef.meta?.label\n    ? column.columnDef.meta.label\n    : typeof column.columnDef.header === \"string\"\n      ? column.columnDef.header\n      : column.id;\n\n  const isAnyColumnResizing =\n    table.getState().columnSizingInfo.isResizingColumn;\n\n  const cellVariant = column.columnDef.meta?.cell;\n  const columnVariant = getColumnVariant(cellVariant?.variant);\n\n  const pinnedPosition = column.getIsPinned();\n  const isPinnedLeft = pinnedPosition === \"left\";\n  const isPinnedRight = pinnedPosition === \"right\";\n\n  const onSortingChange = React.useCallback(\n    (direction: SortDirection) => {\n      table.setSorting((prev: SortingState) => {\n        const existingSortIndex = prev.findIndex(\n          (sort) => sort.id === column.id,\n        );\n        const newSort: ColumnSort = {\n          id: column.id,\n          desc: direction === \"desc\",\n        };\n\n        if (existingSortIndex >= 0) {\n          const updated = [...prev];\n          updated[existingSortIndex] = newSort;\n          return updated;\n        } else {\n          return [...prev, newSort];\n        }\n      });\n    },\n    [column.id, table],\n  );\n\n  const onSortRemove = React.useCallback(() => {\n    table.setSorting((prev: SortingState) =>\n      prev.filter((sort) => sort.id !== column.id),\n    );\n  }, [column.id, table]);\n\n  const onLeftPin = React.useCallback(() => {\n    column.pin(\"left\");\n  }, [column]);\n\n  const onRightPin = React.useCallback(() => {\n    column.pin(\"right\");\n  }, [column]);\n\n  const onUnpin = React.useCallback(() => {\n    column.pin(false);\n  }, [column]);\n\n  const onTriggerPointerDown = React.useCallback(\n    (event: React.PointerEvent<HTMLButtonElement>) => {\n      onPointerDown?.(event);\n      if (event.defaultPrevented) return;\n\n      if (event.button !== 0) {\n        return;\n      }\n      table.options.meta?.onColumnClick?.(column.id);\n    },\n    [table.options.meta, column.id, onPointerDown],\n  );\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          className={cn(\n            \"flex size-full items-center justify-between gap-2 p-2 text-sm hover:bg-accent/40 data-[state=open]:bg-accent/40 [&_svg]:size-4\",\n            isAnyColumnResizing && \"pointer-events-none\",\n            className,\n          )}\n          onPointerDown={onTriggerPointerDown}\n          {...props}\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-1.5\">\n            {columnVariant && (\n              <Tooltip delayDuration={100}>\n                <TooltipTrigger asChild>\n                  <columnVariant.icon className=\"size-3.5 shrink-0 text-muted-foreground\" />\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  <p>{columnVariant.label}</p>\n                </TooltipContent>\n              </Tooltip>\n            )}\n            <span className=\"truncate\">{label}</span>\n          </div>\n          <ChevronDownIcon className=\"shrink-0 text-muted-foreground\" />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" sideOffset={0} className=\"w-60\">\n          {column.getCanSort() && (\n            <>\n              <DropdownMenuCheckboxItem\n                className=\"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n                checked={column.getIsSorted() === \"asc\"}\n                onClick={() => onSortingChange(\"asc\")}\n              >\n                <ChevronUpIcon />\n                Sort asc\n              </DropdownMenuCheckboxItem>\n              <DropdownMenuCheckboxItem\n                className=\"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n                checked={column.getIsSorted() === \"desc\"}\n                onClick={() => onSortingChange(\"desc\")}\n              >\n                <ChevronDownIcon />\n                Sort desc\n              </DropdownMenuCheckboxItem>\n              {column.getIsSorted() && (\n                <DropdownMenuItem onClick={onSortRemove}>\n                  <XIcon />\n                  Remove sort\n                </DropdownMenuItem>\n              )}\n            </>\n          )}\n          {column.getCanPin() && (\n            <>\n              {column.getCanSort() && <DropdownMenuSeparator />}\n\n              {isPinnedLeft ? (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onUnpin}\n                >\n                  <PinOffIcon />\n                  Unpin from left\n                </DropdownMenuItem>\n              ) : (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onLeftPin}\n                >\n                  <PinIcon />\n                  Pin to left\n                </DropdownMenuItem>\n              )}\n              {isPinnedRight ? (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onUnpin}\n                >\n                  <PinOffIcon />\n                  Unpin from right\n                </DropdownMenuItem>\n              ) : (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onRightPin}\n                >\n                  <PinIcon />\n                  Pin to right\n                </DropdownMenuItem>\n              )}\n            </>\n          )}\n          {column.getCanHide() && (\n            <>\n              <DropdownMenuSeparator />\n              <DropdownMenuCheckboxItem\n                className=\"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n                checked={!column.getIsVisible()}\n                onClick={() => column.toggleVisibility(false)}\n              >\n                <EyeOffIcon />\n                Hide column\n              </DropdownMenuCheckboxItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n      {header.column.getCanResize() && (\n        <DataGridColumnResizer header={header} table={table} label={label} />\n      )}\n    </>\n  );\n}\n\nconst DataGridColumnResizer = React.memo(\n  DataGridColumnResizerImpl,\n  (prev, next) => {\n    const prevColumn = prev.header.column;\n    const nextColumn = next.header.column;\n\n    if (\n      prevColumn.getIsResizing() !== nextColumn.getIsResizing() ||\n      prevColumn.getSize() !== nextColumn.getSize()\n    ) {\n      return false;\n    }\n\n    if (prev.label !== next.label) return false;\n\n    return true;\n  },\n) as typeof DataGridColumnResizerImpl;\n\ninterface DataGridColumnResizerProps<TData, TValue>\n  extends DataGridColumnHeaderProps<TData, TValue> {\n  label: string;\n}\n\nfunction DataGridColumnResizerImpl<TData, TValue>({\n  header,\n  table,\n  label,\n}: DataGridColumnResizerProps<TData, TValue>) {\n  const defaultColumnDef = table._getDefaultColumnDef();\n\n  const onDoubleClick = React.useCallback(() => {\n    header.column.resetSize();\n  }, [header.column]);\n\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label={`Resize ${label} column`}\n      aria-valuenow={header.column.getSize()}\n      aria-valuemin={defaultColumnDef.minSize}\n      aria-valuemax={defaultColumnDef.maxSize}\n      tabIndex={0}\n      className={cn(\n        \"after:-translate-x-1/2 -right-px absolute top-0 z-50 h-full w-0.5 cursor-ew-resize touch-none select-none bg-border transition-opacity after:absolute after:inset-y-0 after:left-1/2 after:h-full after:w-[18px] after:content-[''] hover:bg-primary focus:bg-primary focus:outline-none\",\n        header.column.getIsResizing()\n          ? \"bg-primary\"\n          : \"opacity-0 hover:opacity-100\",\n      )}\n      onDoubleClick={onDoubleClick}\n      onMouseDown={header.getResizeHandler()}\n      onTouchStart={header.getResizeHandler()}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type {\n  ColumnSort,\n  Header,\n  SortDirection,\n  SortingState,\n  Table,\n} from \"@tanstack/react-table\";\nimport {\n  BaselineIcon,\n  CalendarIcon,\n  CheckSquareIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n  EyeOffIcon,\n  FileIcon,\n  HashIcon,\n  LinkIcon,\n  ListChecksIcon,\n  ListIcon,\n  PinIcon,\n  PinOffIcon,\n  TextInitialIcon,\n  XIcon,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport type { Cell } from \"@/types/data-grid\";\n\nfunction getColumnVariant(variant?: Cell[\"variant\"]): {\n  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;\n  label: string;\n} | null {\n  switch (variant) {\n    case \"short-text\":\n      return { icon: BaselineIcon, label: \"Short text\" };\n    case \"long-text\":\n      return { icon: TextInitialIcon, label: \"Long text\" };\n    case \"number\":\n      return { icon: HashIcon, label: \"Number\" };\n    case \"select\":\n      return { icon: ListIcon, label: \"Select\" };\n    case \"multi-select\":\n      return { icon: ListChecksIcon, label: \"Multi-select\" };\n    case \"checkbox\":\n      return { icon: CheckSquareIcon, label: \"Checkbox\" };\n    case \"date\":\n      return { icon: CalendarIcon, label: \"Date\" };\n    case \"url\":\n      return { icon: LinkIcon, label: \"URL\" };\n    case \"file\":\n      return { icon: FileIcon, label: \"File\" };\n    default:\n      return null;\n  }\n}\n\ninterface DataGridColumnHeaderProps<TData, TValue>\n  extends React.ComponentProps<typeof DropdownMenuTrigger> {\n  header: Header<TData, TValue>;\n  table: Table<TData>;\n}\n\nexport function DataGridColumnHeader<TData, TValue>({\n  header,\n  table,\n  className,\n  onPointerDown,\n  ...props\n}: DataGridColumnHeaderProps<TData, TValue>) {\n  const column = header.column;\n  const label = column.columnDef.meta?.label\n    ? column.columnDef.meta.label\n    : typeof column.columnDef.header === \"string\"\n      ? column.columnDef.header\n      : column.id;\n\n  const isAnyColumnResizing =\n    table.getState().columnSizingInfo.isResizingColumn;\n\n  const cellVariant = column.columnDef.meta?.cell;\n  const columnVariant = getColumnVariant(cellVariant?.variant);\n\n  const pinnedPosition = column.getIsPinned();\n  const isPinnedLeft = pinnedPosition === \"left\";\n  const isPinnedRight = pinnedPosition === \"right\";\n\n  const onSortingChange = React.useCallback(\n    (direction: SortDirection) => {\n      table.setSorting((prev: SortingState) => {\n        const existingSortIndex = prev.findIndex(\n          (sort) => sort.id === column.id,\n        );\n        const newSort: ColumnSort = {\n          id: column.id,\n          desc: direction === \"desc\",\n        };\n\n        if (existingSortIndex >= 0) {\n          const updated = [...prev];\n          updated[existingSortIndex] = newSort;\n          return updated;\n        } else {\n          return [...prev, newSort];\n        }\n      });\n    },\n    [column.id, table],\n  );\n\n  const onSortRemove = React.useCallback(() => {\n    table.setSorting((prev: SortingState) =>\n      prev.filter((sort) => sort.id !== column.id),\n    );\n  }, [column.id, table]);\n\n  const onLeftPin = React.useCallback(() => {\n    column.pin(\"left\");\n  }, [column]);\n\n  const onRightPin = React.useCallback(() => {\n    column.pin(\"right\");\n  }, [column]);\n\n  const onUnpin = React.useCallback(() => {\n    column.pin(false);\n  }, [column]);\n\n  const onTriggerPointerDown = React.useCallback(\n    (event: React.PointerEvent<HTMLButtonElement>) => {\n      onPointerDown?.(event);\n      if (event.defaultPrevented) return;\n\n      if (event.button !== 0) {\n        return;\n      }\n      table.options.meta?.onColumnClick?.(column.id);\n    },\n    [table.options.meta, column.id, onPointerDown],\n  );\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          className={cn(\n            \"flex size-full items-center justify-between gap-2 p-2 text-sm hover:bg-accent/40 data-[state=open]:bg-accent/40 [&_svg]:size-4\",\n            isAnyColumnResizing && \"pointer-events-none\",\n            className,\n          )}\n          onPointerDown={onTriggerPointerDown}\n          {...props}\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-1.5\">\n            {columnVariant && (\n              <Tooltip delayDuration={100}>\n                <TooltipTrigger asChild>\n                  <columnVariant.icon className=\"size-3.5 shrink-0 text-muted-foreground\" />\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  <p>{columnVariant.label}</p>\n                </TooltipContent>\n              </Tooltip>\n            )}\n            <span className=\"truncate\">{label}</span>\n          </div>\n          <ChevronDownIcon className=\"shrink-0 text-muted-foreground\" />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" sideOffset={0} className=\"w-60\">\n          {column.getCanSort() && (\n            <>\n              <DropdownMenuCheckboxItem\n                className=\"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n                checked={column.getIsSorted() === \"asc\"}\n                onClick={() => onSortingChange(\"asc\")}\n              >\n                <ChevronUpIcon />\n                Sort asc\n              </DropdownMenuCheckboxItem>\n              <DropdownMenuCheckboxItem\n                className=\"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n                checked={column.getIsSorted() === \"desc\"}\n                onClick={() => onSortingChange(\"desc\")}\n              >\n                <ChevronDownIcon />\n                Sort desc\n              </DropdownMenuCheckboxItem>\n              {column.getIsSorted() && (\n                <DropdownMenuItem onClick={onSortRemove}>\n                  <XIcon />\n                  Remove sort\n                </DropdownMenuItem>\n              )}\n            </>\n          )}\n          {column.getCanPin() && (\n            <>\n              {column.getCanSort() && <DropdownMenuSeparator />}\n\n              {isPinnedLeft ? (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onUnpin}\n                >\n                  <PinOffIcon />\n                  Unpin from left\n                </DropdownMenuItem>\n              ) : (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onLeftPin}\n                >\n                  <PinIcon />\n                  Pin to left\n                </DropdownMenuItem>\n              )}\n              {isPinnedRight ? (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onUnpin}\n                >\n                  <PinOffIcon />\n                  Unpin from right\n                </DropdownMenuItem>\n              ) : (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onRightPin}\n                >\n                  <PinIcon />\n                  Pin to right\n                </DropdownMenuItem>\n              )}\n            </>\n          )}\n          {column.getCanHide() && (\n            <>\n              <DropdownMenuSeparator />\n              <DropdownMenuCheckboxItem\n                className=\"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n                checked={!column.getIsVisible()}\n                onClick={() => column.toggleVisibility(false)}\n              >\n                <EyeOffIcon />\n                Hide column\n              </DropdownMenuCheckboxItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n      {header.column.getCanResize() && (\n        <DataGridColumnResizer header={header} table={table} label={label} />\n      )}\n    </>\n  );\n}\n\nconst DataGridColumnResizer = React.memo(\n  DataGridColumnResizerImpl,\n  (prev, next) => {\n    const prevColumn = prev.header.column;\n    const nextColumn = next.header.column;\n\n    if (\n      prevColumn.getIsResizing() !== nextColumn.getIsResizing() ||\n      prevColumn.getSize() !== nextColumn.getSize()\n    ) {\n      return false;\n    }\n\n    if (prev.label !== next.label) return false;\n\n    return true;\n  },\n) as typeof DataGridColumnResizerImpl;\n\ninterface DataGridColumnResizerProps<TData, TValue>\n  extends DataGridColumnHeaderProps<TData, TValue> {\n  label: string;\n}\n\nfunction DataGridColumnResizerImpl<TData, TValue>({\n  header,\n  table,\n  label,\n}: DataGridColumnResizerProps<TData, TValue>) {\n  const defaultColumnDef = table._getDefaultColumnDef();\n\n  const onDoubleClick = React.useCallback(() => {\n    header.column.resetSize();\n  }, [header.column]);\n\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label={`Resize ${label} column`}\n      aria-valuenow={header.column.getSize()}\n      aria-valuemin={defaultColumnDef.minSize}\n      aria-valuemax={defaultColumnDef.maxSize}\n      tabIndex={0}\n      className={cn(\n        \"after:-translate-x-1/2 -right-px absolute top-0 z-50 h-full w-0.5 cursor-ew-resize touch-none select-none bg-border transition-opacity after:absolute after:inset-y-0 after:left-1/2 after:h-full after:w-[18px] after:content-[''] hover:bg-primary focus:bg-primary focus:outline-none\",\n        header.column.getIsResizing()\n          ? \"bg-primary\"\n          : \"opacity-0 hover:opacity-100\",\n      )}\n      onDoubleClick={onDoubleClick}\n      onMouseDown={header.getResizeHandler()}\n      onTouchStart={header.getResizeHandler()}\n    />\n  );\n}\n",
       "type": "registry:component",
       "target": "src/components/data-grid/data-grid-column-header.tsx"
     },
@@ -106,7 +106,7 @@
     },
     {
       "path": "src/types/data-grid.ts",
-      "content": "import type { RowData } from \"@tanstack/react-table\";\n\nexport type RowHeightValue = \"short\" | \"medium\" | \"tall\" | \"extra-tall\";\n\nexport interface CellSelectOption {\n  label: string;\n  value: string;\n}\n\nexport type Cell =\n  | {\n      variant: \"short-text\";\n    }\n  | {\n      variant: \"long-text\";\n    }\n  | {\n      variant: \"number\";\n      min?: number;\n      max?: number;\n      step?: number;\n    }\n  | {\n      variant: \"select\";\n      options: CellSelectOption[];\n    }\n  | {\n      variant: \"multi-select\";\n      options: CellSelectOption[];\n    }\n  | {\n      variant: \"checkbox\";\n    }\n  | {\n      variant: \"date\";\n    }\n  | {\n      variant: \"file\";\n      maxFileSize?: number;\n      maxFiles?: number;\n      accept?: string;\n      multiple?: boolean;\n    };\n\nexport interface UpdateCell {\n  rowIndex: number;\n  columnId: string;\n  value: unknown;\n}\n\ndeclare module \"@tanstack/react-table\" {\n  // biome-ignore lint/correctness/noUnusedVariables: TData and TValue are used in the ColumnMeta interface\n  interface ColumnMeta<TData extends RowData, TValue> {\n    label?: string;\n    cell?: Cell;\n  }\n\n  // biome-ignore lint/correctness/noUnusedVariables: TData is used in the TableMeta interface\n  interface TableMeta<TData extends RowData> {\n    dataGridRef?: React.RefObject<HTMLElement | null>;\n    cellMapRef?: React.RefObject<Map<string, HTMLDivElement>>;\n    focusedCell?: CellPosition | null;\n    editingCell?: CellPosition | null;\n    selectionState?: SelectionState;\n    searchOpen?: boolean;\n    isScrolling?: boolean;\n    getIsCellSelected?: (rowIndex: number, columnId: string) => boolean;\n    getIsSearchMatch?: (rowIndex: number, columnId: string) => boolean;\n    getIsActiveSearchMatch?: (rowIndex: number, columnId: string) => boolean;\n    onDataUpdate?: (props: UpdateCell | Array<UpdateCell>) => void;\n    onRowsDelete?: (rowIndices: number[]) => void | Promise<void>;\n    onColumnClick?: (columnId: string) => void;\n    onCellClick?: (\n      rowIndex: number,\n      columnId: string,\n      event?: React.MouseEvent,\n    ) => void;\n    onCellDoubleClick?: (rowIndex: number, columnId: string) => void;\n    onCellMouseDown?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent,\n    ) => void;\n    onCellMouseEnter?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent,\n    ) => void;\n    onCellMouseUp?: () => void;\n    onCellContextMenu?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent,\n    ) => void;\n    onCellEditingStart?: (rowIndex: number, columnId: string) => void;\n    onCellEditingStop?: (opts?: {\n      direction?: NavigationDirection;\n      moveToNextRow?: boolean;\n    }) => void;\n    contextMenu?: ContextMenuState;\n    onContextMenuOpenChange?: (open: boolean) => void;\n    rowHeight?: RowHeightValue;\n    onRowHeightChange?: (value: RowHeightValue) => void;\n    onRowSelect?: (\n      rowIndex: number,\n      checked: boolean,\n      shiftKey: boolean,\n    ) => void;\n  }\n}\n\nexport interface CellPosition {\n  rowIndex: number;\n  columnId: string;\n}\n\nexport interface CellRange {\n  start: CellPosition;\n  end: CellPosition;\n}\n\nexport interface SelectionState {\n  selectedCells: Set<string>;\n  selectionRange: CellRange | null;\n  isSelecting: boolean;\n}\n\nexport interface ContextMenuState {\n  open: boolean;\n  x: number;\n  y: number;\n}\n\nexport type NavigationDirection =\n  | \"up\"\n  | \"down\"\n  | \"left\"\n  | \"right\"\n  | \"home\"\n  | \"end\"\n  | \"ctrl+home\"\n  | \"ctrl+end\"\n  | \"pageup\"\n  | \"pagedown\";\n\nexport interface SearchState {\n  searchMatches: CellPosition[];\n  matchIndex: number;\n  searchOpen: boolean;\n  onSearchOpenChange: (open: boolean) => void;\n  searchQuery: string;\n  onSearchQueryChange: (query: string) => void;\n  onSearch: (query: string) => void;\n  onNavigateToNextMatch: () => void;\n  onNavigateToPrevMatch: () => void;\n}\n\nexport interface FileCellData {\n  id: string;\n  name: string;\n  size: number;\n  type: string;\n  url?: string;\n}\n",
+      "content": "import type { RowData } from \"@tanstack/react-table\";\n\nexport type RowHeightValue = \"short\" | \"medium\" | \"tall\" | \"extra-tall\";\n\nexport interface CellSelectOption {\n  label: string;\n  value: string;\n}\n\nexport type Cell =\n  | {\n      variant: \"short-text\";\n    }\n  | {\n      variant: \"long-text\";\n    }\n  | {\n      variant: \"number\";\n      min?: number;\n      max?: number;\n      step?: number;\n    }\n  | {\n      variant: \"select\";\n      options: CellSelectOption[];\n    }\n  | {\n      variant: \"multi-select\";\n      options: CellSelectOption[];\n    }\n  | {\n      variant: \"checkbox\";\n    }\n  | {\n      variant: \"date\";\n    }\n  | {\n      variant: \"url\";\n    }\n  | {\n      variant: \"file\";\n      maxFileSize?: number;\n      maxFiles?: number;\n      accept?: string;\n      multiple?: boolean;\n    };\n\nexport interface UpdateCell {\n  rowIndex: number;\n  columnId: string;\n  value: unknown;\n}\n\ndeclare module \"@tanstack/react-table\" {\n  // biome-ignore lint/correctness/noUnusedVariables: TData and TValue are used in the ColumnMeta interface\n  interface ColumnMeta<TData extends RowData, TValue> {\n    label?: string;\n    cell?: Cell;\n  }\n\n  // biome-ignore lint/correctness/noUnusedVariables: TData is used in the TableMeta interface\n  interface TableMeta<TData extends RowData> {\n    dataGridRef?: React.RefObject<HTMLElement | null>;\n    cellMapRef?: React.RefObject<Map<string, HTMLDivElement>>;\n    focusedCell?: CellPosition | null;\n    editingCell?: CellPosition | null;\n    selectionState?: SelectionState;\n    searchOpen?: boolean;\n    isScrolling?: boolean;\n    getIsCellSelected?: (rowIndex: number, columnId: string) => boolean;\n    getIsSearchMatch?: (rowIndex: number, columnId: string) => boolean;\n    getIsActiveSearchMatch?: (rowIndex: number, columnId: string) => boolean;\n    onDataUpdate?: (props: UpdateCell | Array<UpdateCell>) => void;\n    onRowsDelete?: (rowIndices: number[]) => void | Promise<void>;\n    onColumnClick?: (columnId: string) => void;\n    onCellClick?: (\n      rowIndex: number,\n      columnId: string,\n      event?: React.MouseEvent\n    ) => void;\n    onCellDoubleClick?: (rowIndex: number, columnId: string) => void;\n    onCellMouseDown?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent\n    ) => void;\n    onCellMouseEnter?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent\n    ) => void;\n    onCellMouseUp?: () => void;\n    onCellContextMenu?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent\n    ) => void;\n    onCellEditingStart?: (rowIndex: number, columnId: string) => void;\n    onCellEditingStop?: (opts?: {\n      direction?: NavigationDirection;\n      moveToNextRow?: boolean;\n    }) => void;\n    contextMenu?: ContextMenuState;\n    onContextMenuOpenChange?: (open: boolean) => void;\n    rowHeight?: RowHeightValue;\n    onRowHeightChange?: (value: RowHeightValue) => void;\n    onRowSelect?: (\n      rowIndex: number,\n      checked: boolean,\n      shiftKey: boolean\n    ) => void;\n  }\n}\n\nexport interface CellPosition {\n  rowIndex: number;\n  columnId: string;\n}\n\nexport interface CellRange {\n  start: CellPosition;\n  end: CellPosition;\n}\n\nexport interface SelectionState {\n  selectedCells: Set<string>;\n  selectionRange: CellRange | null;\n  isSelecting: boolean;\n}\n\nexport interface ContextMenuState {\n  open: boolean;\n  x: number;\n  y: number;\n}\n\nexport type NavigationDirection =\n  | \"up\"\n  | \"down\"\n  | \"left\"\n  | \"right\"\n  | \"home\"\n  | \"end\"\n  | \"ctrl+home\"\n  | \"ctrl+end\"\n  | \"pageup\"\n  | \"pagedown\";\n\nexport interface SearchState {\n  searchMatches: CellPosition[];\n  matchIndex: number;\n  searchOpen: boolean;\n  onSearchOpenChange: (open: boolean) => void;\n  searchQuery: string;\n  onSearchQueryChange: (query: string) => void;\n  onSearch: (query: string) => void;\n  onNavigateToNextMatch: () => void;\n  onNavigateToPrevMatch: () => void;\n}\n\nexport interface FileCellData {\n  id: string;\n  name: string;\n  size: number;\n  type: string;\n  url?: string;\n}\n",
       "type": "registry:file",
       "target": "src/types/data-grid.ts"
     }
diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index a326945bc..35d371858 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -1645,3 +1645,275 @@ export function FileCell<TData>({
     </DataGridCellWrapper>
   );
 }
+
+function isValidUrl(urlString: string): boolean {
+  if (!urlString || urlString.trim() === "") return true; // Empty is valid (allows clearing)
+
+  try {
+    const url = new URL(urlString);
+    // Only allow http and https protocols
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    // Try adding https:// prefix if missing
+    try {
+      const url = new URL(`https://${urlString}`);
+      return url.protocol === "https:";
+    } catch {
+      return false;
+    }
+  }
+}
+
+function normalizeUrl(urlString: string): string {
+  if (!urlString || urlString.trim() === "") return "";
+
+  const trimmed = urlString.trim();
+
+  try {
+    // Try parsing as-is first
+    const url = new URL(trimmed);
+    return url.href;
+  } catch {
+    // Try adding https:// prefix
+    try {
+      const url = new URL(`https://${trimmed}`);
+      return url.href;
+    } catch {
+      // Return as-is if still invalid
+      return trimmed;
+    }
+  }
+}
+
+export function UrlCell<TData>({
+  cell,
+  table,
+  rowIndex,
+  columnId,
+  isEditing,
+  isFocused,
+  isSelected,
+}: CellVariantProps<TData>) {
+  const initialValue = cell.getValue() as string;
+  const [value, setValue] = React.useState(initialValue ?? "");
+  const [isInvalid, setIsInvalid] = React.useState(false);
+  const cellRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const meta = table.options.meta;
+
+  const prevInitialValueRef = React.useRef(initialValue);
+  if (initialValue !== prevInitialValueRef.current) {
+    prevInitialValueRef.current = initialValue;
+    setValue(initialValue ?? "");
+    setIsInvalid(false);
+    if (cellRef.current && !isEditing) {
+      cellRef.current.textContent = initialValue ?? "";
+    }
+  }
+
+  const onBlur = React.useCallback(() => {
+    const currentValue = cellRef.current?.textContent?.trim() ?? "";
+
+    // Validate URL
+    if (currentValue && !isValidUrl(currentValue)) {
+      setIsInvalid(true);
+      return;
+    }
+
+    setIsInvalid(false);
+
+    // Normalize the URL (add https:// if needed)
+    const normalizedValue = normalizeUrl(currentValue);
+
+    if (normalizedValue !== initialValue) {
+      meta?.onDataUpdate?.({
+        rowIndex,
+        columnId,
+        value: normalizedValue || null,
+      });
+    }
+    meta?.onCellEditingStop?.();
+  }, [meta, rowIndex, columnId, initialValue]);
+
+  const onInput = React.useCallback(
+    (event: React.FormEvent<HTMLDivElement>) => {
+      const currentValue = event.currentTarget.textContent ?? "";
+      setValue(currentValue);
+      // Clear invalid state while typing
+      if (isInvalid) {
+        setIsInvalid(false);
+      }
+    },
+    [isInvalid],
+  );
+
+  const onWrapperKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (isEditing) {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          const currentValue = cellRef.current?.textContent?.trim() ?? "";
+
+          // Validate URL
+          if (currentValue && !isValidUrl(currentValue)) {
+            setIsInvalid(true);
+            return;
+          }
+
+          setIsInvalid(false);
+
+          // Normalize the URL
+          const normalizedValue = normalizeUrl(currentValue);
+
+          if (normalizedValue !== initialValue) {
+            meta?.onDataUpdate?.({
+              rowIndex,
+              columnId,
+              value: normalizedValue || null,
+            });
+          }
+          meta?.onCellEditingStop?.({ moveToNextRow: true });
+        } else if (event.key === "Tab") {
+          event.preventDefault();
+          const currentValue = cellRef.current?.textContent?.trim() ?? "";
+
+          // Validate URL
+          if (currentValue && !isValidUrl(currentValue)) {
+            setIsInvalid(true);
+            return;
+          }
+
+          setIsInvalid(false);
+
+          // Normalize the URL
+          const normalizedValue = normalizeUrl(currentValue);
+
+          if (normalizedValue !== initialValue) {
+            meta?.onDataUpdate?.({
+              rowIndex,
+              columnId,
+              value: normalizedValue || null,
+            });
+          }
+          meta?.onCellEditingStop?.({
+            direction: event.shiftKey ? "left" : "right",
+          });
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          setValue(initialValue ?? "");
+          setIsInvalid(false);
+          cellRef.current?.blur();
+        }
+      } else if (
+        isFocused &&
+        event.key.length === 1 &&
+        !event.ctrlKey &&
+        !event.metaKey
+      ) {
+        // Handle typing to pre-fill the value when editing starts
+        setValue(event.key);
+        setIsInvalid(false);
+
+        queueMicrotask(() => {
+          if (cellRef.current && cellRef.current.contentEditable === "true") {
+            cellRef.current.textContent = event.key;
+            const range = document.createRange();
+            const selection = window.getSelection();
+            range.selectNodeContents(cellRef.current);
+            range.collapse(false);
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+          }
+        });
+      }
+    },
+    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],
+  );
+
+  const onLinkClick = React.useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      if (isEditing) {
+        event.preventDefault();
+        return;
+      }
+      // Let the link open naturally in a new tab
+    },
+    [isEditing],
+  );
+
+  React.useEffect(() => {
+    if (isEditing && cellRef.current) {
+      cellRef.current.focus();
+
+      if (!cellRef.current.textContent && value) {
+        cellRef.current.textContent = value;
+      }
+
+      if (cellRef.current.textContent) {
+        const range = document.createRange();
+        const selection = window.getSelection();
+        range.collapse(false);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }
+    }
+  }, [isEditing, value]);
+
+  const displayValue = !isEditing ? (value ?? "") : "";
+  const hasValidUrl = value && isValidUrl(value);
+
+  return (
+    <DataGridCellWrapper
+      ref={containerRef}
+      cell={cell}
+      table={table}
+      rowIndex={rowIndex}
+      columnId={columnId}
+      isEditing={isEditing}
+      isFocused={isFocused}
+      isSelected={isSelected}
+      onKeyDown={onWrapperKeyDown}
+      className={cn({
+        "ring-1 ring-destructive ring-inset": isInvalid,
+      })}
+    >
+      <div
+        role="textbox"
+        data-slot="grid-cell-content"
+        contentEditable={isEditing}
+        tabIndex={-1}
+        ref={cellRef}
+        onBlur={onBlur}
+        onInput={onInput}
+        suppressContentEditableWarning
+        className={cn("size-full overflow-hidden outline-none", {
+          "whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden":
+            isEditing,
+        })}
+      >
+        {displayValue ? (
+          isEditing ? (
+            displayValue
+          ) : hasValidUrl ? (
+            <a
+              href={normalizeUrl(displayValue)}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={onLinkClick}
+              className="truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60"
+            >
+              {displayValue}
+            </a>
+          ) : (
+            <span className="text-muted-foreground">{displayValue}</span>
+          )
+        ) : null}
+      </div>
+      {isInvalid && (
+        <div className="absolute inset-x-0 bottom-0 bg-destructive px-1 py-0.5 text-[10px] text-destructive-foreground">
+          Invalid URL
+        </div>
+      )}
+    </DataGridCellWrapper>
+  );
+}
diff --git a/src/components/data-grid/data-grid-cell.tsx b/src/components/data-grid/data-grid-cell.tsx
index c136f6ae4..bdb75eaba 100644
--- a/src/components/data-grid/data-grid-cell.tsx
+++ b/src/components/data-grid/data-grid-cell.tsx
@@ -12,6 +12,7 @@ import {
   NumberCell,
   SelectCell,
   ShortTextCell,
+  UrlCell,
 } from "@/components/data-grid/data-grid-cell-variants";
 
 interface DataGridCellProps<TData> {
@@ -126,6 +127,18 @@ export function DataGridCell<TData>({ cell, table }: DataGridCellProps<TData>) {
           isSelected={isSelected}
         />
       );
+    case "url":
+      return (
+        <UrlCell
+          cell={cell}
+          table={table}
+          rowIndex={rowIndex}
+          columnId={columnId}
+          isEditing={isEditing}
+          isFocused={isFocused}
+          isSelected={isSelected}
+        />
+      );
     case "file":
       return (
         <FileCell
diff --git a/src/components/data-grid/data-grid-column-header.tsx b/src/components/data-grid/data-grid-column-header.tsx
index 992cd1980..96b8db038 100644
--- a/src/components/data-grid/data-grid-column-header.tsx
+++ b/src/components/data-grid/data-grid-column-header.tsx
@@ -16,6 +16,7 @@ import {
   EyeOffIcon,
   FileIcon,
   HashIcon,
+  LinkIcon,
   ListChecksIcon,
   ListIcon,
   PinIcon,
@@ -60,6 +61,8 @@ function getColumnVariant(variant?: Cell["variant"]): {
       return { icon: CheckSquareIcon, label: "Checkbox" };
     case "date":
       return { icon: CalendarIcon, label: "Date" };
+    case "url":
+      return { icon: LinkIcon, label: "URL" };
     case "file":
       return { icon: FileIcon, label: "File" };
     default:
diff --git a/src/components/data-grid/data-grid-demo.tsx b/src/components/data-grid/data-grid-demo.tsx
index 50fa74095..ab7e0b625 100644
--- a/src/components/data-grid/data-grid-demo.tsx
+++ b/src/components/data-grid/data-grid-demo.tsx
@@ -18,6 +18,7 @@ interface Person {
   name?: string;
   age?: number;
   email?: string;
+  website?: string;
   notes?: string;
   salary?: number;
   department?: string;
@@ -125,6 +126,7 @@ function generatePerson(id: number): Person {
     name: `${firstName} ${lastName}`,
     age: faker.number.int({ min: 22, max: 65 }),
     email: faker.internet.email({ firstName, lastName }).toLowerCase(),
+    website: faker.internet.url(),
     notes: faker.helpers.arrayElement(notes),
     salary: faker.number.int({ min: 40000, max: 150000 }),
     department: faker.helpers.arrayElement(departments),
@@ -233,6 +235,18 @@ export function DataGridDemo() {
           },
         },
       },
+      {
+        id: "website",
+        accessorKey: "website",
+        header: "Website",
+        minSize: 240,
+        meta: {
+          label: "Website",
+          cell: {
+            variant: "url",
+          },
+        },
+      },
       {
         id: "notes",
         accessorKey: "notes",
diff --git a/src/types/data-grid.ts b/src/types/data-grid.ts
index 987ba3aca..6e3267ce7 100644
--- a/src/types/data-grid.ts
+++ b/src/types/data-grid.ts
@@ -34,6 +34,9 @@ export type Cell =
   | {
       variant: "date";
     }
+  | {
+      variant: "url";
+    }
   | {
       variant: "file";
       maxFileSize?: number;

From 7158483724bcbaac767ae23d7d970721c6083f00 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 17:51:42 +0600
Subject: [PATCH 02/17] refactor: variant position

---
 public/r/data-grid.json                       |   6 +-
 .../data-grid/data-grid-cell-variants.tsx     | 888 +++++++++---------
 src/components/data-grid/data-grid-cell.tsx   |  20 +-
 3 files changed, 457 insertions(+), 457 deletions(-)

diff --git a/public/r/data-grid.json b/public/r/data-grid.json
index 8bfa6fc6d..94b6c6308 100644
--- a/public/r/data-grid.json
+++ b/public/r/data-grid.json
@@ -34,7 +34,7 @@
     },
     {
       "path": "src/components/data-grid/data-grid-cell.tsx",
-      "content": "\"use client\";\n\nimport type { Cell, Table } from \"@tanstack/react-table\";\nimport * as React from \"react\";\n\nimport {\n  CheckboxCell,\n  DateCell,\n  FileCell,\n  LongTextCell,\n  MultiSelectCell,\n  NumberCell,\n  SelectCell,\n  ShortTextCell,\n  UrlCell,\n} from \"@/components/data-grid/data-grid-cell-variants\";\n\ninterface DataGridCellProps<TData> {\n  cell: Cell<TData, unknown>;\n  table: Table<TData>;\n}\n\nexport function DataGridCell<TData>({ cell, table }: DataGridCellProps<TData>) {\n  const meta = table.options.meta;\n  const originalRowIndex = cell.row.index;\n\n  const rows = table.getRowModel().rows;\n  const displayRowIndex = rows.findIndex(\n    (row) => row.original === cell.row.original,\n  );\n  const rowIndex = displayRowIndex >= 0 ? displayRowIndex : originalRowIndex;\n  const columnId = cell.column.id;\n\n  const isFocused =\n    meta?.focusedCell?.rowIndex === rowIndex &&\n    meta?.focusedCell?.columnId === columnId;\n  const isEditing =\n    meta?.editingCell?.rowIndex === rowIndex &&\n    meta?.editingCell?.columnId === columnId;\n  const isSelected = meta?.getIsCellSelected?.(rowIndex, columnId) ?? false;\n\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const variant = cellOpts?.variant ?? \"text\";\n\n  switch (variant) {\n    case \"short-text\":\n      return (\n        <ShortTextCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"long-text\":\n      return (\n        <LongTextCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"number\":\n      return (\n        <NumberCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"select\":\n      return (\n        <SelectCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"multi-select\":\n      return (\n        <MultiSelectCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"checkbox\":\n      return (\n        <CheckboxCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"date\":\n      return (\n        <DateCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"url\":\n      return (\n        <UrlCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"file\":\n      return (\n        <FileCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n\n    default:\n      return (\n        <ShortTextCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n  }\n}\n",
+      "content": "\"use client\";\n\nimport type { Cell, Table } from \"@tanstack/react-table\";\nimport * as React from \"react\";\n\nimport {\n  CheckboxCell,\n  DateCell,\n  FileCell,\n  LongTextCell,\n  MultiSelectCell,\n  NumberCell,\n  SelectCell,\n  ShortTextCell,\n  UrlCell,\n} from \"@/components/data-grid/data-grid-cell-variants\";\n\ninterface DataGridCellProps<TData> {\n  cell: Cell<TData, unknown>;\n  table: Table<TData>;\n}\n\nexport function DataGridCell<TData>({ cell, table }: DataGridCellProps<TData>) {\n  const meta = table.options.meta;\n  const originalRowIndex = cell.row.index;\n\n  const rows = table.getRowModel().rows;\n  const displayRowIndex = rows.findIndex(\n    (row) => row.original === cell.row.original,\n  );\n  const rowIndex = displayRowIndex >= 0 ? displayRowIndex : originalRowIndex;\n  const columnId = cell.column.id;\n\n  const isFocused =\n    meta?.focusedCell?.rowIndex === rowIndex &&\n    meta?.focusedCell?.columnId === columnId;\n  const isEditing =\n    meta?.editingCell?.rowIndex === rowIndex &&\n    meta?.editingCell?.columnId === columnId;\n  const isSelected = meta?.getIsCellSelected?.(rowIndex, columnId) ?? false;\n\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const variant = cellOpts?.variant ?? \"text\";\n\n  switch (variant) {\n    case \"short-text\":\n      return (\n        <ShortTextCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"long-text\":\n      return (\n        <LongTextCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"number\":\n      return (\n        <NumberCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"url\":\n      return (\n        <UrlCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"checkbox\":\n      return (\n        <CheckboxCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"select\":\n      return (\n        <SelectCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"multi-select\":\n      return (\n        <MultiSelectCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"date\":\n      return (\n        <DateCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n    case \"file\":\n      return (\n        <FileCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n\n    default:\n      return (\n        <ShortTextCell\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        />\n      );\n  }\n}\n",
       "type": "registry:component",
       "target": "src/components/data-grid/data-grid-cell.tsx"
     },
@@ -46,7 +46,7 @@
     },
     {
       "path": "src/components/data-grid/data-grid-cell-variants.tsx",
-      "content": "\"use client\";\n\nimport type { Cell, Table } from \"@tanstack/react-table\";\nimport {\n  Check,\n  File,\n  FileArchive,\n  FileAudio,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo,\n  Presentation,\n  Upload,\n  X,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { DataGridCellWrapper } from \"@/components/data-grid/data-grid-cell-wrapper\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { useBadgeOverflow } from \"@/hooks/use-badge-overflow\";\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getCellKey, getLineCount } from \"@/lib/data-grid\";\nimport { cn } from \"@/lib/utils\";\nimport type { FileCellData } from \"@/types/data-grid\";\n\ninterface CellVariantProps<TData> {\n  cell: Cell<TData, unknown>;\n  table: Table<TData>;\n  rowIndex: number;\n  columnId: string;\n  isEditing: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n}\n\nexport function ShortTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue;\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    // Read the current value directly from the DOM to avoid stale state\n    const currentValue = cellRef.current?.textContent ?? \"\";\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue}\n      </div>\n    </DataGridCellWrapper>\n  );\n}\n\nexport function LongTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  // Debounced auto-save (300ms delay)\n  const debouncedSave = useDebouncedCallback((newValue: string) => {\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n  }, 300);\n\n  const onSave = React.useCallback(() => {\n    // Immediately save any pending changes and close the popover\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onCancel = React.useCallback(() => {\n    // Restore the original value\n    setValue(initialValue ?? \"\");\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue });\n    meta?.onCellEditingStop?.();\n  }, [meta, initialValue, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        // Immediately save any pending changes when closing\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, value, initialValue, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    if (textareaRef.current) {\n      textareaRef.current.focus();\n      const length = textareaRef.current.value.length;\n      textareaRef.current.setSelectionRange(length, length);\n    }\n  }, []);\n\n  const onBlur = React.useCallback(() => {\n    // Immediately save any pending changes on blur\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      const newValue = event.target.value;\n      setValue(newValue);\n      // Debounced auto-save\n      debouncedSave(newValue);\n    },\n    [debouncedSave],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onCancel();\n      } else if (event.key === \"Enter\" && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        onSave();\n      } else if (event.key === \"Tab\") {\n        event.preventDefault();\n        // Save any pending changes\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n        return;\n      }\n      // Stop propagation to prevent grid navigation\n      event.stopPropagation();\n    },\n    [onSave, onCancel, value, initialValue, meta, rowIndex, columnId],\n  );\n\n  return (\n    <Popover open={isEditing} onOpenChange={onOpenChange}>\n      <PopoverAnchor asChild>\n        <DataGridCellWrapper\n          ref={containerRef}\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        >\n          <span data-slot=\"grid-cell-content\">{value}</span>\n        </DataGridCellWrapper>\n      </PopoverAnchor>\n      <PopoverContent\n        data-grid-cell-editor=\"\"\n        align=\"start\"\n        side=\"bottom\"\n        sideOffset={sideOffset}\n        className=\"w-[400px] rounded-none p-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n      >\n        <Textarea\n          placeholder=\"Enter text...\"\n          className=\"min-h-[150px] resize-none rounded-none border-0 shadow-none focus-visible:ring-0\"\n          ref={textareaRef}\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function NumberCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as number;\n  const [value, setValue] = React.useState(String(initialValue ?? \"\"));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const min = cellOpts?.variant === \"number\" ? cellOpts.min : undefined;\n  const max = cellOpts?.variant === \"number\" ? cellOpts.max : undefined;\n  const step = cellOpts?.variant === \"number\" ? cellOpts.step : undefined;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(String(initialValue ?? \"\"));\n  }\n\n  const onBlur = React.useCallback(() => {\n    const numValue = value === \"\" ? null : Number(value);\n    if (numValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue, value]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(String(initialValue ?? \"\"));\n          inputRef.current?.blur();\n        }\n      } else if (isFocused) {\n        // Handle Backspace to start editing with empty value\n        if (event.key === \"Backspace\") {\n          setValue(\"\");\n        } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n          // Handle typing to pre-fill the value when editing starts\n          setValue(event.key);\n        }\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId, value],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, [isEditing]);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <input\n          ref={inputRef}\n          type=\"number\"\n          value={value}\n          min={min}\n          max={max}\n          step={step}\n          onBlur={onBlur}\n          onChange={onChange}\n          className=\"w-full border-none bg-transparent p-0 outline-none\"\n        />\n      ) : (\n        <span data-slot=\"grid-cell-content\">{value}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function SelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"select\" ? cellOpts.options : [];\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n  }\n\n  const onValueChange = React.useCallback(\n    (newValue: string) => {\n      setValue(newValue);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  const displayLabel =\n    options.find((opt) => opt.value === value)?.label ?? value;\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Select\n          value={value}\n          onValueChange={onValueChange}\n          open={isEditing}\n          onOpenChange={onOpenChange}\n        >\n          <SelectTrigger\n            size=\"sm\"\n            className=\"size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent\n            data-grid-cell-editor=\"\"\n            // compensate for the wrapper padding\n            align=\"start\"\n            alignOffset={-8}\n            sideOffset={-8}\n            className=\"min-w-[calc(var(--radix-select-trigger-width)+16px)]\"\n          >\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      ) : (\n        <span data-slot=\"grid-cell-content\">{displayLabel}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function MultiSelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as string[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const [selectedValues, setSelectedValues] =\n    React.useState<string[]>(cellValue);\n  const [searchValue, setSearchValue] = React.useState(\"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"multi-select\" ? cellOpts.options : [];\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setSelectedValues(cellValue);\n    setSearchValue(\"\");\n  }\n\n  const onValueChange = React.useCallback(\n    (value: string) => {\n      const newValues = selectedValues.includes(value)\n        ? selectedValues.filter((v) => v !== value)\n        : [...selectedValues, value];\n\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Clear search input and focus back on input after selection\n      setSearchValue(\"\");\n      queueMicrotask(() => inputRef.current?.focus());\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const removeValue = React.useCallback(\n    (valueToRemove: string, event?: React.MouseEvent) => {\n      event?.stopPropagation();\n      event?.preventDefault();\n      const newValues = selectedValues.filter((v) => v !== valueToRemove);\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Focus back on input after removing\n      setTimeout(() => inputRef.current?.focus(), 0);\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    setSelectedValues([]);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n    queueMicrotask(() => inputRef.current?.focus());\n  }, [meta, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setSelectedValues(cellValue);\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, cellValue, meta],\n  );\n\n  const onInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // Handle backspace when input is empty - remove last selected item\n      if (\n        event.key === \"Backspace\" &&\n        searchValue === \"\" &&\n        selectedValues.length > 0\n      ) {\n        event.preventDefault();\n        const lastValue = selectedValues[selectedValues.length - 1];\n        if (lastValue) {\n          removeValue(lastValue);\n        }\n      }\n      // Prevent escape from propagating to close the popover immediately\n      // Let the command handle it first\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n      }\n    },\n    [searchValue, selectedValues, removeValue],\n  );\n\n  const displayLabels = selectedValues\n    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)\n    .filter(Boolean);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =\n    useBadgeOverflow({\n      items: displayLabels,\n      getLabel: (label) => label,\n      containerRef,\n      lineCount,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[300px] rounded-none p-0\"\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <Command className=\"**:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:border-none **:data-[slot=command-input-wrapper]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden\">\n              <div className=\"flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5\">\n                {selectedValues.map((value) => {\n                  const option = options.find((opt) => opt.value === value);\n                  const label = option?.label ?? value;\n\n                  return (\n                    <Badge\n                      key={value}\n                      variant=\"secondary\"\n                      className=\"h-5 gap-1 px-1.5 text-xs\"\n                    >\n                      {label}\n                      <button\n                        type=\"button\"\n                        onClick={(event) => removeValue(value, event)}\n                        onPointerDown={(event) => {\n                          event.preventDefault();\n                          event.stopPropagation();\n                        }}\n                      >\n                        <X className=\"size-3\" />\n                      </button>\n                    </Badge>\n                  );\n                })}\n                <CommandInput\n                  ref={inputRef}\n                  value={searchValue}\n                  onValueChange={setSearchValue}\n                  onKeyDown={onInputKeyDown}\n                  placeholder=\"Search...\"\n                  className=\"h-auto flex-1 p-0\"\n                />\n              </div>\n              <CommandList className=\"max-h-full\">\n                <CommandEmpty>No options found.</CommandEmpty>\n                <CommandGroup className=\"max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden\">\n                  {options.map((option) => {\n                    const isSelected = selectedValues.includes(option.value);\n\n                    return (\n                      <CommandItem\n                        key={option.value}\n                        value={option.label}\n                        onSelect={() => onValueChange(option.value)}\n                      >\n                        <div\n                          className={cn(\n                            \"flex size-4 items-center justify-center rounded-sm border border-primary\",\n                            isSelected\n                              ? \"bg-primary text-primary-foreground\"\n                              : \"opacity-50 [&_svg]:invisible\",\n                          )}\n                        >\n                          <Check className=\"size-3\" />\n                        </div>\n                        <span>{option.label}</span>\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n                {selectedValues.length > 0 && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <CommandItem\n                        onSelect={clearAll}\n                        className=\"justify-center text-muted-foreground\"\n                      >\n                        Clear all\n                      </CommandItem>\n                    </CommandGroup>\n                  </>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {displayLabels.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleLabels.map((label, index) => (\n            <Badge\n              key={selectedValues[index]}\n              variant=\"secondary\"\n              className=\"h-5 shrink-0 px-1.5 text-xs\"\n            >\n              {label}\n            </Badge>\n          ))}\n          {hiddenBadgeCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenBadgeCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function CheckboxCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as boolean;\n  const [value, setValue] = React.useState(Boolean(initialValue));\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(Boolean(initialValue));\n  }\n\n  const onCheckedChange = React.useCallback(\n    (checked: boolean) => {\n      setValue(checked);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isFocused && (event.key === \" \" || event.key === \"Enter\")) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      } else if (isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isFocused, value, onCheckedChange, meta],\n  );\n\n  const onWrapperClick = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isFocused) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      }\n    },\n    [isFocused, value, onCheckedChange],\n  );\n\n  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const onCheckboxMouseDown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const onCheckboxDoubleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={false}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className=\"flex size-full justify-center\"\n      onClick={onWrapperClick}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Checkbox\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        className=\"border-primary\"\n        onClick={onCheckboxClick}\n        onMouseDown={onCheckboxMouseDown}\n        onDoubleClick={onCheckboxDoubleClick}\n      />\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatDateForDisplay(dateStr: string) {\n  if (!dateStr) return \"\";\n  const date = new Date(dateStr);\n  return date.toLocaleDateString();\n}\n\nexport function DateCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  const selectedDate = value ? new Date(value) : undefined;\n\n  const onDateSelect = React.useCallback(\n    (date: Date | undefined) => {\n      if (!date) return;\n\n      const formattedDate = date.toISOString().split(\"T\")[0] ?? \"\";\n      setValue(formattedDate);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: formattedDate });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Popover open={isEditing} onOpenChange={onOpenChange}>\n        <PopoverAnchor asChild>\n          <span data-slot=\"grid-cell-content\">\n            {formatDateForDisplay(value)}\n          </span>\n        </PopoverAnchor>\n        {isEditing && (\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            alignOffset={-8}\n            className=\"w-auto p-0\"\n          >\n            <Calendar\n              autoFocus\n              captionLayout=\"dropdown\"\n              mode=\"single\"\n              defaultMonth={selectedDate ?? new Date()}\n              selected={selectedDate}\n              onSelect={onDateSelect}\n            />\n          </PopoverContent>\n        )}\n      </Popover>\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 B\";\n  const k = 1024;\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n}\n\nfunction getFileIcon(\n  type: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> {\n  if (type.startsWith(\"image/\")) return FileImage;\n  if (type.startsWith(\"video/\")) return FileVideo;\n  if (type.startsWith(\"audio/\")) return FileAudio;\n  if (type.includes(\"pdf\")) return FileText;\n  if (type.includes(\"zip\") || type.includes(\"rar\")) return FileArchive;\n  if (\n    type.includes(\"word\") ||\n    type.includes(\"document\") ||\n    type.includes(\"doc\")\n  )\n    return FileText;\n  if (type.includes(\"sheet\") || type.includes(\"excel\") || type.includes(\"xls\"))\n    return FileSpreadsheet;\n  if (\n    type.includes(\"presentation\") ||\n    type.includes(\"powerpoint\") ||\n    type.includes(\"ppt\")\n  )\n    return Presentation;\n  return File;\n}\n\nexport function FileCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as FileCellData[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const labelId = React.useId();\n  const descriptionId = React.useId();\n\n  const [files, setFiles] = React.useState<FileCellData[]>(cellValue);\n  const [uploadingFiles, setUploadingFiles] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const [isDraggingOver, setIsDraggingOver] = React.useState(false);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const dropzoneRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const fileCellOpts = cellOpts?.variant === \"file\" ? cellOpts : null;\n  const maxFileSize = fileCellOpts?.maxFileSize ?? 10 * 1024 * 1024;\n  const maxFiles = fileCellOpts?.maxFiles ?? 10;\n  const accept = fileCellOpts?.accept;\n  const multiple = fileCellOpts?.multiple ?? true;\n\n  const acceptedTypes = React.useMemo(\n    () => (accept ? accept.split(\",\").map((t) => t.trim()) : null),\n    [accept],\n  );\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setFiles(cellValue);\n    setError(null);\n  }\n\n  const validateFile = React.useCallback(\n    (file: File): string | null => {\n      if (maxFileSize && file.size > maxFileSize) {\n        return `File size exceeds ${formatFileSize(maxFileSize)}`;\n      }\n      if (acceptedTypes) {\n        const fileExtension = `.${file.name.split(\".\").pop()}`;\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.endsWith(\"/*\")) {\n            // Handle wildcard types like \"image/*\"\n            const baseType = type.slice(0, -2);\n            return file.type.startsWith(`${baseType}/`);\n          }\n          if (type.startsWith(\".\")) {\n            // Handle file extensions like \".pdf\"\n            return fileExtension.toLowerCase() === type.toLowerCase();\n          }\n          // Exact match for specific MIME types\n          return file.type === type;\n        });\n        if (!isAccepted) {\n          return `File type not accepted. Accepted: ${accept}`;\n        }\n      }\n      return null;\n    },\n    [maxFileSize, acceptedTypes, accept],\n  );\n\n  const addFiles = React.useCallback(\n    async (newFiles: File[], skipUpload = false) => {\n      setError(null);\n\n      // Check max files limit\n      if (maxFiles && files.length + newFiles.length > maxFiles) {\n        setError(`Maximum ${maxFiles} files allowed`);\n        return;\n      }\n\n      const validFiles: FileCellData[] = [];\n      let firstError: string | null = null;\n\n      for (const file of newFiles) {\n        const validationError = validateFile(file);\n        if (validationError) {\n          if (!firstError) {\n            firstError = validationError;\n          }\n          continue;\n        }\n\n        // Create file data object with temporary ID\n        const fileData: FileCellData = {\n          id: crypto.randomUUID(),\n          name: file.name,\n          size: file.size,\n          type: file.type,\n          url: URL.createObjectURL(file),\n        };\n        validFiles.push(fileData);\n      }\n\n      if (firstError) {\n        setError(firstError);\n      }\n\n      if (validFiles.length > 0) {\n        // If not skipping upload (dropped on cell), show skeletons first\n        if (!skipUpload) {\n          // Add temp files immediately (will show as skeletons)\n          const tempFiles = validFiles.map((f) => ({ ...f, url: undefined }));\n          const filesWithTemp = [...files, ...tempFiles];\n          setFiles(filesWithTemp);\n\n          // Mark as uploading\n          const uploadingIds = new Set(validFiles.map((f) => f.id));\n          setUploadingFiles(uploadingIds);\n\n          // Simulate upload delay (in real app, this would be actual upload)\n          await new Promise((resolve) => setTimeout(resolve, 800));\n\n          // Replace temp files with real ones\n          const finalFiles = filesWithTemp.map(\n            (f) => validFiles.find((vf) => vf.id === f.id) || f,\n          );\n          setFiles(finalFiles);\n          setUploadingFiles(new Set());\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: finalFiles });\n        } else {\n          // If from editor, add immediately without skeleton\n          const updatedFiles = [...files, ...validFiles];\n          setFiles(updatedFiles);\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n        }\n      }\n    },\n    [files, maxFiles, validateFile, meta, rowIndex, columnId],\n  );\n\n  const removeFile = React.useCallback(\n    (fileId: string) => {\n      setError(null);\n      // Revoke object URL to prevent memory leak\n      const fileToRemove = files.find((f) => f.id === fileId);\n      if (fileToRemove?.url) {\n        URL.revokeObjectURL(fileToRemove.url);\n      }\n      const updatedFiles = files.filter((f) => f.id !== fileId);\n      setFiles(updatedFiles);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n    },\n    [files, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    // Revoke all object URLs to prevent memory leak\n    for (const file of files) {\n      if (file.url) {\n        URL.revokeObjectURL(file.url);\n      }\n    }\n    setFiles([]);\n    setError(null);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n  }, [files, meta, rowIndex, columnId]);\n\n  const onDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setIsDragging(true);\n  }, []);\n\n  const onDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDragging(false);\n    }\n  }, []);\n\n  const onDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      addFiles(droppedFiles, true); // Skip upload skeleton in editor\n    },\n    [addFiles],\n  );\n\n  const onFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const selectedFiles = Array.from(event.target.files ?? []);\n      addFiles(selectedFiles, true); // Skip upload skeleton for manual selection\n      // Reset input so the same file can be selected again\n      event.target.value = \"\";\n    },\n    [addFiles],\n  );\n\n  // Cell-level drag handlers (for dropping directly on cell)\n  const onCellDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Only show drop indicator if dragging files\n    if (event.dataTransfer.types.includes(\"Files\")) {\n      setIsDraggingOver(true);\n    }\n  }, []);\n\n  const onCellDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDraggingOver(false);\n    }\n  }, []);\n\n  const onCellDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onCellDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDraggingOver(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      if (droppedFiles.length > 0) {\n        addFiles(droppedFiles, false); // Show skeleton for dropped files\n      }\n    },\n    [addFiles],\n  );\n\n  const onDropzoneClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const onDropzoneKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onDropzoneClick();\n      }\n    },\n    [onDropzoneClick],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setError(null);\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onEscapeKeyDown: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onEscapeKeyDown\"]\n  > = React.useCallback((event) => {\n    // Prevent the escape key from propagating to the data grid's keyboard handler\n    // which would call blurCell() and remove focus from the cell\n    event.stopPropagation();\n  }, []);\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    // Focus the dropzone for better keyboard UX - users can press Enter again to open file dialog\n    queueMicrotask(() => {\n      dropzoneRef.current?.focus();\n    });\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          setFiles(cellValue);\n          setError(null);\n          meta?.onCellEditingStop?.();\n        } else if (event.key === \" \") {\n          event.preventDefault();\n          onDropzoneClick();\n        }\n      } else if (isFocused && event.key === \"Enter\") {\n        // Handle Enter key to start editing when focused but not editing\n        event.preventDefault();\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [\n      isEditing,\n      isFocused,\n      cellValue,\n      meta,\n      onDropzoneClick,\n      rowIndex,\n      columnId,\n    ],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const file of files) {\n        if (file.url) {\n          URL.revokeObjectURL(file.url);\n        }\n      }\n    };\n  }, [files]);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } =\n    useBadgeOverflow({\n      items: files,\n      getLabel: (file) => file.name,\n      containerRef,\n      lineCount,\n      cacheKeyPrefix: \"file\",\n      iconSize: 12,\n      maxWidth: 100,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className={cn({\n        \"ring-1 ring-primary/80 ring-inset\": isDraggingOver,\n      })}\n      onDragEnter={onCellDragEnter}\n      onDragLeave={onCellDragLeave}\n      onDragOver={onCellDragOver}\n      onDrop={onCellDrop}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[400px] rounded-none p-0\"\n            onEscapeKeyDown={onEscapeKeyDown}\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <div className=\"flex flex-col gap-2 p-3\">\n              <span id={labelId} className=\"sr-only\">\n                File upload\n              </span>\n              <div\n                role=\"region\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                aria-invalid={!!error}\n                data-dragging={isDragging ? \"\" : undefined}\n                data-invalid={error ? \"\" : undefined}\n                tabIndex={isDragging ? -1 : 0}\n                className=\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20\"\n                ref={dropzoneRef}\n                onClick={onDropzoneClick}\n                onDragEnter={onDragEnter}\n                onDragLeave={onDragLeave}\n                onDragOver={onDragOver}\n                onDrop={onDrop}\n                onKeyDown={onDropzoneKeyDown}\n              >\n                <Upload className=\"size-8 text-muted-foreground\" />\n                <div className=\"text-center text-sm\">\n                  <p className=\"font-medium\">\n                    {isDragging ? \"Drop files here\" : \"Drag files here\"}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    or click to browse\n                  </p>\n                </div>\n                <p id={descriptionId} className=\"text-muted-foreground text-xs\">\n                  {maxFileSize\n                    ? `Max size: ${formatFileSize(maxFileSize)}${maxFiles ? ` • Max ${maxFiles} files` : \"\"}`\n                    : maxFiles\n                      ? `Max ${maxFiles} files`\n                      : \"Select files to upload\"}\n                </p>\n              </div>\n              <input\n                type=\"file\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                multiple={multiple}\n                accept={accept}\n                className=\"sr-only\"\n                ref={fileInputRef}\n                onChange={onFileInputChange}\n              />\n              {error && (\n                <div className=\"rounded-md bg-destructive/10 px-3 py-2 text-destructive text-xs\">\n                  {error}\n                </div>\n              )}\n              {files.length > 0 && (\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <p className=\"font-medium text-muted-foreground text-xs\">\n                      {files.length} {files.length === 1 ? \"file\" : \"files\"}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-6 text-muted-foreground text-xs\"\n                      onClick={clearAll}\n                    >\n                      Clear all\n                    </Button>\n                  </div>\n                  <div className=\"max-h-[200px] space-y-1 overflow-y-auto\">\n                    {files.map((file) => {\n                      const FileIcon = getFileIcon(file.type);\n\n                      return (\n                        <div\n                          key={file.id}\n                          className=\"flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1.5\"\n                        >\n                          {FileIcon && (\n                            <FileIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n                          )}\n                          <div className=\"flex-1 overflow-hidden\">\n                            <p className=\"truncate text-sm\">{file.name}</p>\n                            <p className=\"text-muted-foreground text-xs\">\n                              {formatFileSize(file.size)}\n                            </p>\n                          </div>\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            className=\"size-5 rounded-sm\"\n                            onClick={() => removeFile(file.id)}\n                          >\n                            <X className=\"size-3\" />\n                          </Button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {isDraggingOver ? (\n        <div className=\"flex items-center justify-center gap-2 text-primary text-sm\">\n          <Upload className=\"size-4\" />\n          <span>Drop files here</span>\n        </div>\n      ) : files.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleFiles.map((file) => {\n            const isUploading = uploadingFiles.has(file.id);\n\n            if (isUploading) {\n              // Show skeleton for uploading files\n              return (\n                <Skeleton\n                  key={file.id}\n                  className=\"h-5 shrink-0 px-1.5\"\n                  style={{\n                    width: `${Math.min(file.name.length * 8 + 30, 100)}px`,\n                  }}\n                />\n              );\n            }\n\n            return (\n              <Badge\n                key={file.id}\n                variant=\"secondary\"\n                className=\"h-5 shrink-0 gap-1 px-1.5 text-xs\"\n              >\n                {React.createElement(getFileIcon(file.type), {\n                  className: \"size-3 shrink-0\",\n                })}\n                <span className=\"max-w-[100px] truncate\">{file.name}</span>\n              </Badge>\n            );\n          })}\n          {hiddenFileCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenFileCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction isValidUrl(urlString: string): boolean {\n  if (!urlString || urlString.trim() === \"\") return true; // Empty is valid (allows clearing)\n\n  try {\n    const url = new URL(urlString);\n    // Only allow http and https protocols\n    return url.protocol === \"http:\" || url.protocol === \"https:\";\n  } catch {\n    // Try adding https:// prefix if missing\n    try {\n      const url = new URL(`https://${urlString}`);\n      return url.protocol === \"https:\";\n    } catch {\n      return false;\n    }\n  }\n}\n\nfunction normalizeUrl(urlString: string): string {\n  if (!urlString || urlString.trim() === \"\") return \"\";\n\n  const trimmed = urlString.trim();\n\n  try {\n    // Try parsing as-is first\n    const url = new URL(trimmed);\n    return url.href;\n  } catch {\n    // Try adding https:// prefix\n    try {\n      const url = new URL(`https://${trimmed}`);\n      return url.href;\n    } catch {\n      // Return as-is if still invalid\n      return trimmed;\n    }\n  }\n}\n\nexport function UrlCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const [isInvalid, setIsInvalid] = React.useState(false);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n    setIsInvalid(false);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue ?? \"\";\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n    // Validate URL\n    if (currentValue && !isValidUrl(currentValue)) {\n      setIsInvalid(true);\n      return;\n    }\n\n    setIsInvalid(false);\n\n    // Normalize the URL (add https:// if needed)\n    const normalizedValue = normalizeUrl(currentValue);\n\n    if (normalizedValue !== initialValue) {\n      meta?.onDataUpdate?.({\n        rowIndex,\n        columnId,\n        value: normalizedValue || null,\n      });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n      // Clear invalid state while typing\n      if (isInvalid) {\n        setIsInvalid(false);\n      }\n    },\n    [isInvalid],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n          // Validate URL\n          if (currentValue && !isValidUrl(currentValue)) {\n            setIsInvalid(true);\n            return;\n          }\n\n          setIsInvalid(false);\n\n          // Normalize the URL\n          const normalizedValue = normalizeUrl(currentValue);\n\n          if (normalizedValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: normalizedValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n          // Validate URL\n          if (currentValue && !isValidUrl(currentValue)) {\n            setIsInvalid(true);\n            return;\n          }\n\n          setIsInvalid(false);\n\n          // Normalize the URL\n          const normalizedValue = normalizeUrl(currentValue);\n\n          if (normalizedValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: normalizedValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue ?? \"\");\n          setIsInvalid(false);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n        setIsInvalid(false);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  const onLinkClick = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (isEditing) {\n        event.preventDefault();\n        return;\n      }\n      // Let the link open naturally in a new tab\n    },\n    [isEditing],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n  const hasValidUrl = value && isValidUrl(value);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n      className={cn({\n        \"ring-1 ring-destructive ring-inset\": isInvalid,\n      })}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue ? (\n          isEditing ? (\n            displayValue\n          ) : hasValidUrl ? (\n            <a\n              href={normalizeUrl(displayValue)}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              onClick={onLinkClick}\n              className=\"truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60\"\n            >\n              {displayValue}\n            </a>\n          ) : (\n            <span className=\"text-muted-foreground\">{displayValue}</span>\n          )\n        ) : null}\n      </div>\n      {isInvalid && (\n        <div className=\"absolute inset-x-0 bottom-0 bg-destructive px-1 py-0.5 text-[10px] text-destructive-foreground\">\n          Invalid URL\n        </div>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { Cell, Table } from \"@tanstack/react-table\";\nimport {\n  Check,\n  File,\n  FileArchive,\n  FileAudio,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo,\n  Presentation,\n  Upload,\n  X,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { DataGridCellWrapper } from \"@/components/data-grid/data-grid-cell-wrapper\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { useBadgeOverflow } from \"@/hooks/use-badge-overflow\";\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getCellKey, getLineCount } from \"@/lib/data-grid\";\nimport { cn } from \"@/lib/utils\";\nimport type { FileCellData } from \"@/types/data-grid\";\n\ninterface CellVariantProps<TData> {\n  cell: Cell<TData, unknown>;\n  table: Table<TData>;\n  rowIndex: number;\n  columnId: string;\n  isEditing: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n}\n\nexport function ShortTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue;\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    // Read the current value directly from the DOM to avoid stale state\n    const currentValue = cellRef.current?.textContent ?? \"\";\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue}\n      </div>\n    </DataGridCellWrapper>\n  );\n}\n\nexport function LongTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  // Debounced auto-save (300ms delay)\n  const debouncedSave = useDebouncedCallback((newValue: string) => {\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n  }, 300);\n\n  const onSave = React.useCallback(() => {\n    // Immediately save any pending changes and close the popover\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onCancel = React.useCallback(() => {\n    // Restore the original value\n    setValue(initialValue ?? \"\");\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue });\n    meta?.onCellEditingStop?.();\n  }, [meta, initialValue, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        // Immediately save any pending changes when closing\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, value, initialValue, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    if (textareaRef.current) {\n      textareaRef.current.focus();\n      const length = textareaRef.current.value.length;\n      textareaRef.current.setSelectionRange(length, length);\n    }\n  }, []);\n\n  const onBlur = React.useCallback(() => {\n    // Immediately save any pending changes on blur\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      const newValue = event.target.value;\n      setValue(newValue);\n      // Debounced auto-save\n      debouncedSave(newValue);\n    },\n    [debouncedSave],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onCancel();\n      } else if (event.key === \"Enter\" && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        onSave();\n      } else if (event.key === \"Tab\") {\n        event.preventDefault();\n        // Save any pending changes\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n        return;\n      }\n      // Stop propagation to prevent grid navigation\n      event.stopPropagation();\n    },\n    [onSave, onCancel, value, initialValue, meta, rowIndex, columnId],\n  );\n\n  return (\n    <Popover open={isEditing} onOpenChange={onOpenChange}>\n      <PopoverAnchor asChild>\n        <DataGridCellWrapper\n          ref={containerRef}\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        >\n          <span data-slot=\"grid-cell-content\">{value}</span>\n        </DataGridCellWrapper>\n      </PopoverAnchor>\n      <PopoverContent\n        data-grid-cell-editor=\"\"\n        align=\"start\"\n        side=\"bottom\"\n        sideOffset={sideOffset}\n        className=\"w-[400px] rounded-none p-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n      >\n        <Textarea\n          placeholder=\"Enter text...\"\n          className=\"min-h-[150px] resize-none rounded-none border-0 shadow-none focus-visible:ring-0\"\n          ref={textareaRef}\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function NumberCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as number;\n  const [value, setValue] = React.useState(String(initialValue ?? \"\"));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const min = cellOpts?.variant === \"number\" ? cellOpts.min : undefined;\n  const max = cellOpts?.variant === \"number\" ? cellOpts.max : undefined;\n  const step = cellOpts?.variant === \"number\" ? cellOpts.step : undefined;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(String(initialValue ?? \"\"));\n  }\n\n  const onBlur = React.useCallback(() => {\n    const numValue = value === \"\" ? null : Number(value);\n    if (numValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue, value]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(String(initialValue ?? \"\"));\n          inputRef.current?.blur();\n        }\n      } else if (isFocused) {\n        // Handle Backspace to start editing with empty value\n        if (event.key === \"Backspace\") {\n          setValue(\"\");\n        } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n          // Handle typing to pre-fill the value when editing starts\n          setValue(event.key);\n        }\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId, value],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, [isEditing]);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <input\n          ref={inputRef}\n          type=\"number\"\n          value={value}\n          min={min}\n          max={max}\n          step={step}\n          onBlur={onBlur}\n          onChange={onChange}\n          className=\"w-full border-none bg-transparent p-0 outline-none\"\n        />\n      ) : (\n        <span data-slot=\"grid-cell-content\">{value}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction isValidUrl(urlString: string): boolean {\n  if (!urlString || urlString.trim() === \"\") return true; // Empty is valid (allows clearing)\n\n  try {\n    const url = new URL(urlString);\n    // Only allow http and https protocols\n    return url.protocol === \"http:\" || url.protocol === \"https:\";\n  } catch {\n    // Try adding https:// prefix if missing\n    try {\n      const url = new URL(`https://${urlString}`);\n      return url.protocol === \"https:\";\n    } catch {\n      return false;\n    }\n  }\n}\n\nfunction normalizeUrl(urlString: string): string {\n  if (!urlString || urlString.trim() === \"\") return \"\";\n\n  const trimmed = urlString.trim();\n\n  try {\n    // Try parsing as-is first\n    const url = new URL(trimmed);\n    return url.href;\n  } catch {\n    // Try adding https:// prefix\n    try {\n      const url = new URL(`https://${trimmed}`);\n      return url.href;\n    } catch {\n      // Return as-is if still invalid\n      return trimmed;\n    }\n  }\n}\n\nexport function UrlCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const [isInvalid, setIsInvalid] = React.useState(false);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n    setIsInvalid(false);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue ?? \"\";\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n    // Validate URL\n    if (currentValue && !isValidUrl(currentValue)) {\n      setIsInvalid(true);\n      return;\n    }\n\n    setIsInvalid(false);\n\n    // Normalize the URL (add https:// if needed)\n    const normalizedValue = normalizeUrl(currentValue);\n\n    if (normalizedValue !== initialValue) {\n      meta?.onDataUpdate?.({\n        rowIndex,\n        columnId,\n        value: normalizedValue || null,\n      });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n      // Clear invalid state while typing\n      if (isInvalid) {\n        setIsInvalid(false);\n      }\n    },\n    [isInvalid],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n          // Validate URL\n          if (currentValue && !isValidUrl(currentValue)) {\n            setIsInvalid(true);\n            return;\n          }\n\n          setIsInvalid(false);\n\n          // Normalize the URL\n          const normalizedValue = normalizeUrl(currentValue);\n\n          if (normalizedValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: normalizedValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n          // Validate URL\n          if (currentValue && !isValidUrl(currentValue)) {\n            setIsInvalid(true);\n            return;\n          }\n\n          setIsInvalid(false);\n\n          // Normalize the URL\n          const normalizedValue = normalizeUrl(currentValue);\n\n          if (normalizedValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: normalizedValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue ?? \"\");\n          setIsInvalid(false);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n        setIsInvalid(false);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  const onLinkClick = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (isEditing) {\n        event.preventDefault();\n        return;\n      }\n      // Let the link open naturally in a new tab\n    },\n    [isEditing],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n  const hasValidUrl = value && isValidUrl(value);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n      className={cn({\n        \"ring-1 ring-destructive ring-inset\": isInvalid,\n      })}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue ? (\n          isEditing ? (\n            displayValue\n          ) : hasValidUrl ? (\n            <a\n              href={normalizeUrl(displayValue)}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              onClick={onLinkClick}\n              className=\"truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60\"\n            >\n              {displayValue}\n            </a>\n          ) : (\n            <span className=\"text-muted-foreground\">{displayValue}</span>\n          )\n        ) : null}\n      </div>\n      {isInvalid && (\n        <div className=\"absolute inset-x-0 bottom-0 bg-destructive px-1 py-0.5 text-[10px] text-destructive-foreground\">\n          Invalid URL\n        </div>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function CheckboxCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as boolean;\n  const [value, setValue] = React.useState(Boolean(initialValue));\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(Boolean(initialValue));\n  }\n\n  const onCheckedChange = React.useCallback(\n    (checked: boolean) => {\n      setValue(checked);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isFocused && (event.key === \" \" || event.key === \"Enter\")) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      } else if (isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isFocused, value, onCheckedChange, meta],\n  );\n\n  const onWrapperClick = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isFocused) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      }\n    },\n    [isFocused, value, onCheckedChange],\n  );\n\n  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const onCheckboxMouseDown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const onCheckboxDoubleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={false}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className=\"flex size-full justify-center\"\n      onClick={onWrapperClick}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Checkbox\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        className=\"border-primary\"\n        onClick={onCheckboxClick}\n        onMouseDown={onCheckboxMouseDown}\n        onDoubleClick={onCheckboxDoubleClick}\n      />\n    </DataGridCellWrapper>\n  );\n}\n\nexport function SelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"select\" ? cellOpts.options : [];\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n  }\n\n  const onValueChange = React.useCallback(\n    (newValue: string) => {\n      setValue(newValue);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  const displayLabel =\n    options.find((opt) => opt.value === value)?.label ?? value;\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Select\n          value={value}\n          onValueChange={onValueChange}\n          open={isEditing}\n          onOpenChange={onOpenChange}\n        >\n          <SelectTrigger\n            size=\"sm\"\n            className=\"size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent\n            data-grid-cell-editor=\"\"\n            // compensate for the wrapper padding\n            align=\"start\"\n            alignOffset={-8}\n            sideOffset={-8}\n            className=\"min-w-[calc(var(--radix-select-trigger-width)+16px)]\"\n          >\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      ) : (\n        <span data-slot=\"grid-cell-content\">{displayLabel}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function MultiSelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as string[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const [selectedValues, setSelectedValues] =\n    React.useState<string[]>(cellValue);\n  const [searchValue, setSearchValue] = React.useState(\"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"multi-select\" ? cellOpts.options : [];\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setSelectedValues(cellValue);\n    setSearchValue(\"\");\n  }\n\n  const onValueChange = React.useCallback(\n    (value: string) => {\n      const newValues = selectedValues.includes(value)\n        ? selectedValues.filter((v) => v !== value)\n        : [...selectedValues, value];\n\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Clear search input and focus back on input after selection\n      setSearchValue(\"\");\n      queueMicrotask(() => inputRef.current?.focus());\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const removeValue = React.useCallback(\n    (valueToRemove: string, event?: React.MouseEvent) => {\n      event?.stopPropagation();\n      event?.preventDefault();\n      const newValues = selectedValues.filter((v) => v !== valueToRemove);\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Focus back on input after removing\n      setTimeout(() => inputRef.current?.focus(), 0);\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    setSelectedValues([]);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n    queueMicrotask(() => inputRef.current?.focus());\n  }, [meta, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setSelectedValues(cellValue);\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, cellValue, meta],\n  );\n\n  const onInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // Handle backspace when input is empty - remove last selected item\n      if (\n        event.key === \"Backspace\" &&\n        searchValue === \"\" &&\n        selectedValues.length > 0\n      ) {\n        event.preventDefault();\n        const lastValue = selectedValues[selectedValues.length - 1];\n        if (lastValue) {\n          removeValue(lastValue);\n        }\n      }\n      // Prevent escape from propagating to close the popover immediately\n      // Let the command handle it first\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n      }\n    },\n    [searchValue, selectedValues, removeValue],\n  );\n\n  const displayLabels = selectedValues\n    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)\n    .filter(Boolean);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =\n    useBadgeOverflow({\n      items: displayLabels,\n      getLabel: (label) => label,\n      containerRef,\n      lineCount,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[300px] rounded-none p-0\"\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <Command className=\"**:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:border-none **:data-[slot=command-input-wrapper]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden\">\n              <div className=\"flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5\">\n                {selectedValues.map((value) => {\n                  const option = options.find((opt) => opt.value === value);\n                  const label = option?.label ?? value;\n\n                  return (\n                    <Badge\n                      key={value}\n                      variant=\"secondary\"\n                      className=\"h-5 gap-1 px-1.5 text-xs\"\n                    >\n                      {label}\n                      <button\n                        type=\"button\"\n                        onClick={(event) => removeValue(value, event)}\n                        onPointerDown={(event) => {\n                          event.preventDefault();\n                          event.stopPropagation();\n                        }}\n                      >\n                        <X className=\"size-3\" />\n                      </button>\n                    </Badge>\n                  );\n                })}\n                <CommandInput\n                  ref={inputRef}\n                  value={searchValue}\n                  onValueChange={setSearchValue}\n                  onKeyDown={onInputKeyDown}\n                  placeholder=\"Search...\"\n                  className=\"h-auto flex-1 p-0\"\n                />\n              </div>\n              <CommandList className=\"max-h-full\">\n                <CommandEmpty>No options found.</CommandEmpty>\n                <CommandGroup className=\"max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden\">\n                  {options.map((option) => {\n                    const isSelected = selectedValues.includes(option.value);\n\n                    return (\n                      <CommandItem\n                        key={option.value}\n                        value={option.label}\n                        onSelect={() => onValueChange(option.value)}\n                      >\n                        <div\n                          className={cn(\n                            \"flex size-4 items-center justify-center rounded-sm border border-primary\",\n                            isSelected\n                              ? \"bg-primary text-primary-foreground\"\n                              : \"opacity-50 [&_svg]:invisible\",\n                          )}\n                        >\n                          <Check className=\"size-3\" />\n                        </div>\n                        <span>{option.label}</span>\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n                {selectedValues.length > 0 && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <CommandItem\n                        onSelect={clearAll}\n                        className=\"justify-center text-muted-foreground\"\n                      >\n                        Clear all\n                      </CommandItem>\n                    </CommandGroup>\n                  </>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {displayLabels.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleLabels.map((label, index) => (\n            <Badge\n              key={selectedValues[index]}\n              variant=\"secondary\"\n              className=\"h-5 shrink-0 px-1.5 text-xs\"\n            >\n              {label}\n            </Badge>\n          ))}\n          {hiddenBadgeCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenBadgeCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatDateForDisplay(dateStr: string) {\n  if (!dateStr) return \"\";\n  const date = new Date(dateStr);\n  return date.toLocaleDateString();\n}\n\nexport function DateCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  const selectedDate = value ? new Date(value) : undefined;\n\n  const onDateSelect = React.useCallback(\n    (date: Date | undefined) => {\n      if (!date) return;\n\n      const formattedDate = date.toISOString().split(\"T\")[0] ?? \"\";\n      setValue(formattedDate);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: formattedDate });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Popover open={isEditing} onOpenChange={onOpenChange}>\n        <PopoverAnchor asChild>\n          <span data-slot=\"grid-cell-content\">\n            {formatDateForDisplay(value)}\n          </span>\n        </PopoverAnchor>\n        {isEditing && (\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            alignOffset={-8}\n            className=\"w-auto p-0\"\n          >\n            <Calendar\n              autoFocus\n              captionLayout=\"dropdown\"\n              mode=\"single\"\n              defaultMonth={selectedDate ?? new Date()}\n              selected={selectedDate}\n              onSelect={onDateSelect}\n            />\n          </PopoverContent>\n        )}\n      </Popover>\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 B\";\n  const k = 1024;\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n}\n\nfunction getFileIcon(\n  type: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> {\n  if (type.startsWith(\"image/\")) return FileImage;\n  if (type.startsWith(\"video/\")) return FileVideo;\n  if (type.startsWith(\"audio/\")) return FileAudio;\n  if (type.includes(\"pdf\")) return FileText;\n  if (type.includes(\"zip\") || type.includes(\"rar\")) return FileArchive;\n  if (\n    type.includes(\"word\") ||\n    type.includes(\"document\") ||\n    type.includes(\"doc\")\n  )\n    return FileText;\n  if (type.includes(\"sheet\") || type.includes(\"excel\") || type.includes(\"xls\"))\n    return FileSpreadsheet;\n  if (\n    type.includes(\"presentation\") ||\n    type.includes(\"powerpoint\") ||\n    type.includes(\"ppt\")\n  )\n    return Presentation;\n  return File;\n}\n\nexport function FileCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as FileCellData[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const labelId = React.useId();\n  const descriptionId = React.useId();\n\n  const [files, setFiles] = React.useState<FileCellData[]>(cellValue);\n  const [uploadingFiles, setUploadingFiles] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const [isDraggingOver, setIsDraggingOver] = React.useState(false);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const dropzoneRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const fileCellOpts = cellOpts?.variant === \"file\" ? cellOpts : null;\n  const maxFileSize = fileCellOpts?.maxFileSize ?? 10 * 1024 * 1024;\n  const maxFiles = fileCellOpts?.maxFiles ?? 10;\n  const accept = fileCellOpts?.accept;\n  const multiple = fileCellOpts?.multiple ?? true;\n\n  const acceptedTypes = React.useMemo(\n    () => (accept ? accept.split(\",\").map((t) => t.trim()) : null),\n    [accept],\n  );\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setFiles(cellValue);\n    setError(null);\n  }\n\n  const validateFile = React.useCallback(\n    (file: File): string | null => {\n      if (maxFileSize && file.size > maxFileSize) {\n        return `File size exceeds ${formatFileSize(maxFileSize)}`;\n      }\n      if (acceptedTypes) {\n        const fileExtension = `.${file.name.split(\".\").pop()}`;\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.endsWith(\"/*\")) {\n            // Handle wildcard types like \"image/*\"\n            const baseType = type.slice(0, -2);\n            return file.type.startsWith(`${baseType}/`);\n          }\n          if (type.startsWith(\".\")) {\n            // Handle file extensions like \".pdf\"\n            return fileExtension.toLowerCase() === type.toLowerCase();\n          }\n          // Exact match for specific MIME types\n          return file.type === type;\n        });\n        if (!isAccepted) {\n          return `File type not accepted. Accepted: ${accept}`;\n        }\n      }\n      return null;\n    },\n    [maxFileSize, acceptedTypes, accept],\n  );\n\n  const addFiles = React.useCallback(\n    async (newFiles: File[], skipUpload = false) => {\n      setError(null);\n\n      // Check max files limit\n      if (maxFiles && files.length + newFiles.length > maxFiles) {\n        setError(`Maximum ${maxFiles} files allowed`);\n        return;\n      }\n\n      const validFiles: FileCellData[] = [];\n      let firstError: string | null = null;\n\n      for (const file of newFiles) {\n        const validationError = validateFile(file);\n        if (validationError) {\n          if (!firstError) {\n            firstError = validationError;\n          }\n          continue;\n        }\n\n        // Create file data object with temporary ID\n        const fileData: FileCellData = {\n          id: crypto.randomUUID(),\n          name: file.name,\n          size: file.size,\n          type: file.type,\n          url: URL.createObjectURL(file),\n        };\n        validFiles.push(fileData);\n      }\n\n      if (firstError) {\n        setError(firstError);\n      }\n\n      if (validFiles.length > 0) {\n        // If not skipping upload (dropped on cell), show skeletons first\n        if (!skipUpload) {\n          // Add temp files immediately (will show as skeletons)\n          const tempFiles = validFiles.map((f) => ({ ...f, url: undefined }));\n          const filesWithTemp = [...files, ...tempFiles];\n          setFiles(filesWithTemp);\n\n          // Mark as uploading\n          const uploadingIds = new Set(validFiles.map((f) => f.id));\n          setUploadingFiles(uploadingIds);\n\n          // Simulate upload delay (in real app, this would be actual upload)\n          await new Promise((resolve) => setTimeout(resolve, 800));\n\n          // Replace temp files with real ones\n          const finalFiles = filesWithTemp.map(\n            (f) => validFiles.find((vf) => vf.id === f.id) || f,\n          );\n          setFiles(finalFiles);\n          setUploadingFiles(new Set());\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: finalFiles });\n        } else {\n          // If from editor, add immediately without skeleton\n          const updatedFiles = [...files, ...validFiles];\n          setFiles(updatedFiles);\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n        }\n      }\n    },\n    [files, maxFiles, validateFile, meta, rowIndex, columnId],\n  );\n\n  const removeFile = React.useCallback(\n    (fileId: string) => {\n      setError(null);\n      // Revoke object URL to prevent memory leak\n      const fileToRemove = files.find((f) => f.id === fileId);\n      if (fileToRemove?.url) {\n        URL.revokeObjectURL(fileToRemove.url);\n      }\n      const updatedFiles = files.filter((f) => f.id !== fileId);\n      setFiles(updatedFiles);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n    },\n    [files, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    // Revoke all object URLs to prevent memory leak\n    for (const file of files) {\n      if (file.url) {\n        URL.revokeObjectURL(file.url);\n      }\n    }\n    setFiles([]);\n    setError(null);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n  }, [files, meta, rowIndex, columnId]);\n\n  const onDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setIsDragging(true);\n  }, []);\n\n  const onDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDragging(false);\n    }\n  }, []);\n\n  const onDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      addFiles(droppedFiles, true); // Skip upload skeleton in editor\n    },\n    [addFiles],\n  );\n\n  const onFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const selectedFiles = Array.from(event.target.files ?? []);\n      addFiles(selectedFiles, true); // Skip upload skeleton for manual selection\n      // Reset input so the same file can be selected again\n      event.target.value = \"\";\n    },\n    [addFiles],\n  );\n\n  // Cell-level drag handlers (for dropping directly on cell)\n  const onCellDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Only show drop indicator if dragging files\n    if (event.dataTransfer.types.includes(\"Files\")) {\n      setIsDraggingOver(true);\n    }\n  }, []);\n\n  const onCellDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDraggingOver(false);\n    }\n  }, []);\n\n  const onCellDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onCellDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDraggingOver(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      if (droppedFiles.length > 0) {\n        addFiles(droppedFiles, false); // Show skeleton for dropped files\n      }\n    },\n    [addFiles],\n  );\n\n  const onDropzoneClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const onDropzoneKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onDropzoneClick();\n      }\n    },\n    [onDropzoneClick],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setError(null);\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onEscapeKeyDown: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onEscapeKeyDown\"]\n  > = React.useCallback((event) => {\n    // Prevent the escape key from propagating to the data grid's keyboard handler\n    // which would call blurCell() and remove focus from the cell\n    event.stopPropagation();\n  }, []);\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    // Focus the dropzone for better keyboard UX - users can press Enter again to open file dialog\n    queueMicrotask(() => {\n      dropzoneRef.current?.focus();\n    });\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          setFiles(cellValue);\n          setError(null);\n          meta?.onCellEditingStop?.();\n        } else if (event.key === \" \") {\n          event.preventDefault();\n          onDropzoneClick();\n        }\n      } else if (isFocused && event.key === \"Enter\") {\n        // Handle Enter key to start editing when focused but not editing\n        event.preventDefault();\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [\n      isEditing,\n      isFocused,\n      cellValue,\n      meta,\n      onDropzoneClick,\n      rowIndex,\n      columnId,\n    ],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const file of files) {\n        if (file.url) {\n          URL.revokeObjectURL(file.url);\n        }\n      }\n    };\n  }, [files]);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } =\n    useBadgeOverflow({\n      items: files,\n      getLabel: (file) => file.name,\n      containerRef,\n      lineCount,\n      cacheKeyPrefix: \"file\",\n      iconSize: 12,\n      maxWidth: 100,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className={cn({\n        \"ring-1 ring-primary/80 ring-inset\": isDraggingOver,\n      })}\n      onDragEnter={onCellDragEnter}\n      onDragLeave={onCellDragLeave}\n      onDragOver={onCellDragOver}\n      onDrop={onCellDrop}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[400px] rounded-none p-0\"\n            onEscapeKeyDown={onEscapeKeyDown}\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <div className=\"flex flex-col gap-2 p-3\">\n              <span id={labelId} className=\"sr-only\">\n                File upload\n              </span>\n              <div\n                role=\"region\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                aria-invalid={!!error}\n                data-dragging={isDragging ? \"\" : undefined}\n                data-invalid={error ? \"\" : undefined}\n                tabIndex={isDragging ? -1 : 0}\n                className=\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20\"\n                ref={dropzoneRef}\n                onClick={onDropzoneClick}\n                onDragEnter={onDragEnter}\n                onDragLeave={onDragLeave}\n                onDragOver={onDragOver}\n                onDrop={onDrop}\n                onKeyDown={onDropzoneKeyDown}\n              >\n                <Upload className=\"size-8 text-muted-foreground\" />\n                <div className=\"text-center text-sm\">\n                  <p className=\"font-medium\">\n                    {isDragging ? \"Drop files here\" : \"Drag files here\"}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    or click to browse\n                  </p>\n                </div>\n                <p id={descriptionId} className=\"text-muted-foreground text-xs\">\n                  {maxFileSize\n                    ? `Max size: ${formatFileSize(maxFileSize)}${maxFiles ? ` • Max ${maxFiles} files` : \"\"}`\n                    : maxFiles\n                      ? `Max ${maxFiles} files`\n                      : \"Select files to upload\"}\n                </p>\n              </div>\n              <input\n                type=\"file\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                multiple={multiple}\n                accept={accept}\n                className=\"sr-only\"\n                ref={fileInputRef}\n                onChange={onFileInputChange}\n              />\n              {error && (\n                <div className=\"rounded-md bg-destructive/10 px-3 py-2 text-destructive text-xs\">\n                  {error}\n                </div>\n              )}\n              {files.length > 0 && (\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <p className=\"font-medium text-muted-foreground text-xs\">\n                      {files.length} {files.length === 1 ? \"file\" : \"files\"}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-6 text-muted-foreground text-xs\"\n                      onClick={clearAll}\n                    >\n                      Clear all\n                    </Button>\n                  </div>\n                  <div className=\"max-h-[200px] space-y-1 overflow-y-auto\">\n                    {files.map((file) => {\n                      const FileIcon = getFileIcon(file.type);\n\n                      return (\n                        <div\n                          key={file.id}\n                          className=\"flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1.5\"\n                        >\n                          {FileIcon && (\n                            <FileIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n                          )}\n                          <div className=\"flex-1 overflow-hidden\">\n                            <p className=\"truncate text-sm\">{file.name}</p>\n                            <p className=\"text-muted-foreground text-xs\">\n                              {formatFileSize(file.size)}\n                            </p>\n                          </div>\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            className=\"size-5 rounded-sm\"\n                            onClick={() => removeFile(file.id)}\n                          >\n                            <X className=\"size-3\" />\n                          </Button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {isDraggingOver ? (\n        <div className=\"flex items-center justify-center gap-2 text-primary text-sm\">\n          <Upload className=\"size-4\" />\n          <span>Drop files here</span>\n        </div>\n      ) : files.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleFiles.map((file) => {\n            const isUploading = uploadingFiles.has(file.id);\n\n            if (isUploading) {\n              // Show skeleton for uploading files\n              return (\n                <Skeleton\n                  key={file.id}\n                  className=\"h-5 shrink-0 px-1.5\"\n                  style={{\n                    width: `${Math.min(file.name.length * 8 + 30, 100)}px`,\n                  }}\n                />\n              );\n            }\n\n            return (\n              <Badge\n                key={file.id}\n                variant=\"secondary\"\n                className=\"h-5 shrink-0 gap-1 px-1.5 text-xs\"\n              >\n                {React.createElement(getFileIcon(file.type), {\n                  className: \"size-3 shrink-0\",\n                })}\n                <span className=\"max-w-[100px] truncate\">{file.name}</span>\n              </Badge>\n            );\n          })}\n          {hiddenFileCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenFileCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n",
       "type": "registry:component",
       "target": "src/components/data-grid/data-grid-cell-variants.tsx"
     },
@@ -106,7 +106,7 @@
     },
     {
       "path": "src/types/data-grid.ts",
-      "content": "import type { RowData } from \"@tanstack/react-table\";\n\nexport type RowHeightValue = \"short\" | \"medium\" | \"tall\" | \"extra-tall\";\n\nexport interface CellSelectOption {\n  label: string;\n  value: string;\n}\n\nexport type Cell =\n  | {\n      variant: \"short-text\";\n    }\n  | {\n      variant: \"long-text\";\n    }\n  | {\n      variant: \"number\";\n      min?: number;\n      max?: number;\n      step?: number;\n    }\n  | {\n      variant: \"select\";\n      options: CellSelectOption[];\n    }\n  | {\n      variant: \"multi-select\";\n      options: CellSelectOption[];\n    }\n  | {\n      variant: \"checkbox\";\n    }\n  | {\n      variant: \"date\";\n    }\n  | {\n      variant: \"url\";\n    }\n  | {\n      variant: \"file\";\n      maxFileSize?: number;\n      maxFiles?: number;\n      accept?: string;\n      multiple?: boolean;\n    };\n\nexport interface UpdateCell {\n  rowIndex: number;\n  columnId: string;\n  value: unknown;\n}\n\ndeclare module \"@tanstack/react-table\" {\n  // biome-ignore lint/correctness/noUnusedVariables: TData and TValue are used in the ColumnMeta interface\n  interface ColumnMeta<TData extends RowData, TValue> {\n    label?: string;\n    cell?: Cell;\n  }\n\n  // biome-ignore lint/correctness/noUnusedVariables: TData is used in the TableMeta interface\n  interface TableMeta<TData extends RowData> {\n    dataGridRef?: React.RefObject<HTMLElement | null>;\n    cellMapRef?: React.RefObject<Map<string, HTMLDivElement>>;\n    focusedCell?: CellPosition | null;\n    editingCell?: CellPosition | null;\n    selectionState?: SelectionState;\n    searchOpen?: boolean;\n    isScrolling?: boolean;\n    getIsCellSelected?: (rowIndex: number, columnId: string) => boolean;\n    getIsSearchMatch?: (rowIndex: number, columnId: string) => boolean;\n    getIsActiveSearchMatch?: (rowIndex: number, columnId: string) => boolean;\n    onDataUpdate?: (props: UpdateCell | Array<UpdateCell>) => void;\n    onRowsDelete?: (rowIndices: number[]) => void | Promise<void>;\n    onColumnClick?: (columnId: string) => void;\n    onCellClick?: (\n      rowIndex: number,\n      columnId: string,\n      event?: React.MouseEvent\n    ) => void;\n    onCellDoubleClick?: (rowIndex: number, columnId: string) => void;\n    onCellMouseDown?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent\n    ) => void;\n    onCellMouseEnter?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent\n    ) => void;\n    onCellMouseUp?: () => void;\n    onCellContextMenu?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent\n    ) => void;\n    onCellEditingStart?: (rowIndex: number, columnId: string) => void;\n    onCellEditingStop?: (opts?: {\n      direction?: NavigationDirection;\n      moveToNextRow?: boolean;\n    }) => void;\n    contextMenu?: ContextMenuState;\n    onContextMenuOpenChange?: (open: boolean) => void;\n    rowHeight?: RowHeightValue;\n    onRowHeightChange?: (value: RowHeightValue) => void;\n    onRowSelect?: (\n      rowIndex: number,\n      checked: boolean,\n      shiftKey: boolean\n    ) => void;\n  }\n}\n\nexport interface CellPosition {\n  rowIndex: number;\n  columnId: string;\n}\n\nexport interface CellRange {\n  start: CellPosition;\n  end: CellPosition;\n}\n\nexport interface SelectionState {\n  selectedCells: Set<string>;\n  selectionRange: CellRange | null;\n  isSelecting: boolean;\n}\n\nexport interface ContextMenuState {\n  open: boolean;\n  x: number;\n  y: number;\n}\n\nexport type NavigationDirection =\n  | \"up\"\n  | \"down\"\n  | \"left\"\n  | \"right\"\n  | \"home\"\n  | \"end\"\n  | \"ctrl+home\"\n  | \"ctrl+end\"\n  | \"pageup\"\n  | \"pagedown\";\n\nexport interface SearchState {\n  searchMatches: CellPosition[];\n  matchIndex: number;\n  searchOpen: boolean;\n  onSearchOpenChange: (open: boolean) => void;\n  searchQuery: string;\n  onSearchQueryChange: (query: string) => void;\n  onSearch: (query: string) => void;\n  onNavigateToNextMatch: () => void;\n  onNavigateToPrevMatch: () => void;\n}\n\nexport interface FileCellData {\n  id: string;\n  name: string;\n  size: number;\n  type: string;\n  url?: string;\n}\n",
+      "content": "import type { RowData } from \"@tanstack/react-table\";\n\nexport type RowHeightValue = \"short\" | \"medium\" | \"tall\" | \"extra-tall\";\n\nexport interface CellSelectOption {\n  label: string;\n  value: string;\n}\n\nexport type Cell =\n  | {\n      variant: \"short-text\";\n    }\n  | {\n      variant: \"long-text\";\n    }\n  | {\n      variant: \"number\";\n      min?: number;\n      max?: number;\n      step?: number;\n    }\n  | {\n      variant: \"select\";\n      options: CellSelectOption[];\n    }\n  | {\n      variant: \"multi-select\";\n      options: CellSelectOption[];\n    }\n  | {\n      variant: \"checkbox\";\n    }\n  | {\n      variant: \"date\";\n    }\n  | {\n      variant: \"url\";\n    }\n  | {\n      variant: \"file\";\n      maxFileSize?: number;\n      maxFiles?: number;\n      accept?: string;\n      multiple?: boolean;\n    };\n\nexport interface UpdateCell {\n  rowIndex: number;\n  columnId: string;\n  value: unknown;\n}\n\ndeclare module \"@tanstack/react-table\" {\n  // biome-ignore lint/correctness/noUnusedVariables: TData and TValue are used in the ColumnMeta interface\n  interface ColumnMeta<TData extends RowData, TValue> {\n    label?: string;\n    cell?: Cell;\n  }\n\n  // biome-ignore lint/correctness/noUnusedVariables: TData is used in the TableMeta interface\n  interface TableMeta<TData extends RowData> {\n    dataGridRef?: React.RefObject<HTMLElement | null>;\n    cellMapRef?: React.RefObject<Map<string, HTMLDivElement>>;\n    focusedCell?: CellPosition | null;\n    editingCell?: CellPosition | null;\n    selectionState?: SelectionState;\n    searchOpen?: boolean;\n    isScrolling?: boolean;\n    getIsCellSelected?: (rowIndex: number, columnId: string) => boolean;\n    getIsSearchMatch?: (rowIndex: number, columnId: string) => boolean;\n    getIsActiveSearchMatch?: (rowIndex: number, columnId: string) => boolean;\n    onDataUpdate?: (props: UpdateCell | Array<UpdateCell>) => void;\n    onRowsDelete?: (rowIndices: number[]) => void | Promise<void>;\n    onColumnClick?: (columnId: string) => void;\n    onCellClick?: (\n      rowIndex: number,\n      columnId: string,\n      event?: React.MouseEvent,\n    ) => void;\n    onCellDoubleClick?: (rowIndex: number, columnId: string) => void;\n    onCellMouseDown?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent,\n    ) => void;\n    onCellMouseEnter?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent,\n    ) => void;\n    onCellMouseUp?: () => void;\n    onCellContextMenu?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent,\n    ) => void;\n    onCellEditingStart?: (rowIndex: number, columnId: string) => void;\n    onCellEditingStop?: (opts?: {\n      direction?: NavigationDirection;\n      moveToNextRow?: boolean;\n    }) => void;\n    contextMenu?: ContextMenuState;\n    onContextMenuOpenChange?: (open: boolean) => void;\n    rowHeight?: RowHeightValue;\n    onRowHeightChange?: (value: RowHeightValue) => void;\n    onRowSelect?: (\n      rowIndex: number,\n      checked: boolean,\n      shiftKey: boolean,\n    ) => void;\n  }\n}\n\nexport interface CellPosition {\n  rowIndex: number;\n  columnId: string;\n}\n\nexport interface CellRange {\n  start: CellPosition;\n  end: CellPosition;\n}\n\nexport interface SelectionState {\n  selectedCells: Set<string>;\n  selectionRange: CellRange | null;\n  isSelecting: boolean;\n}\n\nexport interface ContextMenuState {\n  open: boolean;\n  x: number;\n  y: number;\n}\n\nexport type NavigationDirection =\n  | \"up\"\n  | \"down\"\n  | \"left\"\n  | \"right\"\n  | \"home\"\n  | \"end\"\n  | \"ctrl+home\"\n  | \"ctrl+end\"\n  | \"pageup\"\n  | \"pagedown\";\n\nexport interface SearchState {\n  searchMatches: CellPosition[];\n  matchIndex: number;\n  searchOpen: boolean;\n  onSearchOpenChange: (open: boolean) => void;\n  searchQuery: string;\n  onSearchQueryChange: (query: string) => void;\n  onSearch: (query: string) => void;\n  onNavigateToNextMatch: () => void;\n  onNavigateToPrevMatch: () => void;\n}\n\nexport interface FileCellData {\n  id: string;\n  name: string;\n  size: number;\n  type: string;\n  url?: string;\n}\n",
       "type": "registry:file",
       "target": "src/types/data-grid.ts"
     }
diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index 35d371858..6f239f6ac 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -466,66 +466,221 @@ export function NumberCell<TData>({
   );
 }
 
-export function SelectCell<TData>({
+function isValidUrl(urlString: string): boolean {
+  if (!urlString || urlString.trim() === "") return true; // Empty is valid (allows clearing)
+
+  try {
+    const url = new URL(urlString);
+    // Only allow http and https protocols
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    // Try adding https:// prefix if missing
+    try {
+      const url = new URL(`https://${urlString}`);
+      return url.protocol === "https:";
+    } catch {
+      return false;
+    }
+  }
+}
+
+function normalizeUrl(urlString: string): string {
+  if (!urlString || urlString.trim() === "") return "";
+
+  const trimmed = urlString.trim();
+
+  try {
+    // Try parsing as-is first
+    const url = new URL(trimmed);
+    return url.href;
+  } catch {
+    // Try adding https:// prefix
+    try {
+      const url = new URL(`https://${trimmed}`);
+      return url.href;
+    } catch {
+      // Return as-is if still invalid
+      return trimmed;
+    }
+  }
+}
+
+export function UrlCell<TData>({
   cell,
   table,
   rowIndex,
   columnId,
-  isFocused,
   isEditing,
+  isFocused,
   isSelected,
 }: CellVariantProps<TData>) {
   const initialValue = cell.getValue() as string;
-  const [value, setValue] = React.useState(initialValue);
+  const [value, setValue] = React.useState(initialValue ?? "");
+  const [isInvalid, setIsInvalid] = React.useState(false);
+  const cellRef = React.useRef<HTMLDivElement>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
   const meta = table.options.meta;
-  const cellOpts = cell.column.columnDef.meta?.cell;
-  const options = cellOpts?.variant === "select" ? cellOpts.options : [];
 
   const prevInitialValueRef = React.useRef(initialValue);
   if (initialValue !== prevInitialValueRef.current) {
     prevInitialValueRef.current = initialValue;
-    setValue(initialValue);
+    setValue(initialValue ?? "");
+    setIsInvalid(false);
+    if (cellRef.current && !isEditing) {
+      cellRef.current.textContent = initialValue ?? "";
+    }
   }
 
-  const onValueChange = React.useCallback(
-    (newValue: string) => {
-      setValue(newValue);
-      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });
-      meta?.onCellEditingStop?.();
-    },
-    [meta, rowIndex, columnId],
-  );
+  const onBlur = React.useCallback(() => {
+    const currentValue = cellRef.current?.textContent?.trim() ?? "";
 
-  const onOpenChange = React.useCallback(
-    (isOpen: boolean) => {
-      if (isOpen) {
-        meta?.onCellEditingStart?.(rowIndex, columnId);
-      } else {
-        meta?.onCellEditingStop?.();
+    // Validate URL
+    if (currentValue && !isValidUrl(currentValue)) {
+      setIsInvalid(true);
+      return;
+    }
+
+    setIsInvalid(false);
+
+    // Normalize the URL (add https:// if needed)
+    const normalizedValue = normalizeUrl(currentValue);
+
+    if (normalizedValue !== initialValue) {
+      meta?.onDataUpdate?.({
+        rowIndex,
+        columnId,
+        value: normalizedValue || null,
+      });
+    }
+    meta?.onCellEditingStop?.();
+  }, [meta, rowIndex, columnId, initialValue]);
+
+  const onInput = React.useCallback(
+    (event: React.FormEvent<HTMLDivElement>) => {
+      const currentValue = event.currentTarget.textContent ?? "";
+      setValue(currentValue);
+      // Clear invalid state while typing
+      if (isInvalid) {
+        setIsInvalid(false);
       }
     },
-    [meta, rowIndex, columnId],
+    [isInvalid],
   );
 
   const onWrapperKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (isEditing && event.key === "Escape") {
-        event.preventDefault();
-        setValue(initialValue);
-        meta?.onCellEditingStop?.();
-      } else if (!isEditing && isFocused && event.key === "Tab") {
-        event.preventDefault();
-        meta?.onCellEditingStop?.({
-          direction: event.shiftKey ? "left" : "right",
+      if (isEditing) {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          const currentValue = cellRef.current?.textContent?.trim() ?? "";
+
+          // Validate URL
+          if (currentValue && !isValidUrl(currentValue)) {
+            setIsInvalid(true);
+            return;
+          }
+
+          setIsInvalid(false);
+
+          // Normalize the URL
+          const normalizedValue = normalizeUrl(currentValue);
+
+          if (normalizedValue !== initialValue) {
+            meta?.onDataUpdate?.({
+              rowIndex,
+              columnId,
+              value: normalizedValue || null,
+            });
+          }
+          meta?.onCellEditingStop?.({ moveToNextRow: true });
+        } else if (event.key === "Tab") {
+          event.preventDefault();
+          const currentValue = cellRef.current?.textContent?.trim() ?? "";
+
+          // Validate URL
+          if (currentValue && !isValidUrl(currentValue)) {
+            setIsInvalid(true);
+            return;
+          }
+
+          setIsInvalid(false);
+
+          // Normalize the URL
+          const normalizedValue = normalizeUrl(currentValue);
+
+          if (normalizedValue !== initialValue) {
+            meta?.onDataUpdate?.({
+              rowIndex,
+              columnId,
+              value: normalizedValue || null,
+            });
+          }
+          meta?.onCellEditingStop?.({
+            direction: event.shiftKey ? "left" : "right",
+          });
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          setValue(initialValue ?? "");
+          setIsInvalid(false);
+          cellRef.current?.blur();
+        }
+      } else if (
+        isFocused &&
+        event.key.length === 1 &&
+        !event.ctrlKey &&
+        !event.metaKey
+      ) {
+        // Handle typing to pre-fill the value when editing starts
+        setValue(event.key);
+        setIsInvalid(false);
+
+        queueMicrotask(() => {
+          if (cellRef.current && cellRef.current.contentEditable === "true") {
+            cellRef.current.textContent = event.key;
+            const range = document.createRange();
+            const selection = window.getSelection();
+            range.selectNodeContents(cellRef.current);
+            range.collapse(false);
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+          }
         });
       }
     },
-    [isEditing, isFocused, initialValue, meta],
+    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],
   );
 
-  const displayLabel =
-    options.find((opt) => opt.value === value)?.label ?? value;
+  const onLinkClick = React.useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      if (isEditing) {
+        event.preventDefault();
+        return;
+      }
+      // Let the link open naturally in a new tab
+    },
+    [isEditing],
+  );
+
+  React.useEffect(() => {
+    if (isEditing && cellRef.current) {
+      cellRef.current.focus();
+
+      if (!cellRef.current.textContent && value) {
+        cellRef.current.textContent = value;
+      }
+
+      if (cellRef.current.textContent) {
+        const range = document.createRange();
+        const selection = window.getSelection();
+        range.collapse(false);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }
+    }
+  }, [isEditing, value]);
+
+  const displayValue = !isEditing ? (value ?? "") : "";
+  const hasValidUrl = value && isValidUrl(value);
 
   return (
     <DataGridCellWrapper
@@ -538,41 +693,256 @@ export function SelectCell<TData>({
       isFocused={isFocused}
       isSelected={isSelected}
       onKeyDown={onWrapperKeyDown}
+      className={cn({
+        "ring-1 ring-destructive ring-inset": isInvalid,
+      })}
     >
-      {isEditing ? (
-        <Select
-          value={value}
-          onValueChange={onValueChange}
-          open={isEditing}
-          onOpenChange={onOpenChange}
-        >
-          <SelectTrigger
-            size="sm"
-            className="size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden"
-          >
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent
-            data-grid-cell-editor=""
-            // compensate for the wrapper padding
-            align="start"
-            alignOffset={-8}
-            sideOffset={-8}
-            className="min-w-[calc(var(--radix-select-trigger-width)+16px)]"
-          >
-            {options.map((option) => (
-              <SelectItem key={option.value} value={option.value}>
-                {option.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      ) : (
-        <span data-slot="grid-cell-content">{displayLabel}</span>
-      )}
-    </DataGridCellWrapper>
-  );
-}
+      <div
+        role="textbox"
+        data-slot="grid-cell-content"
+        contentEditable={isEditing}
+        tabIndex={-1}
+        ref={cellRef}
+        onBlur={onBlur}
+        onInput={onInput}
+        suppressContentEditableWarning
+        className={cn("size-full overflow-hidden outline-none", {
+          "whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden":
+            isEditing,
+        })}
+      >
+        {displayValue ? (
+          isEditing ? (
+            displayValue
+          ) : hasValidUrl ? (
+            <a
+              href={normalizeUrl(displayValue)}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={onLinkClick}
+              className="truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60"
+            >
+              {displayValue}
+            </a>
+          ) : (
+            <span className="text-muted-foreground">{displayValue}</span>
+          )
+        ) : null}
+      </div>
+      {isInvalid && (
+        <div className="absolute inset-x-0 bottom-0 bg-destructive px-1 py-0.5 text-[10px] text-destructive-foreground">
+          Invalid URL
+        </div>
+      )}
+    </DataGridCellWrapper>
+  );
+}
+
+export function CheckboxCell<TData>({
+  cell,
+  table,
+  rowIndex,
+  columnId,
+  isFocused,
+  isSelected,
+}: CellVariantProps<TData>) {
+  const initialValue = cell.getValue() as boolean;
+  const [value, setValue] = React.useState(Boolean(initialValue));
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const meta = table.options.meta;
+
+  const prevInitialValueRef = React.useRef(initialValue);
+  if (initialValue !== prevInitialValueRef.current) {
+    prevInitialValueRef.current = initialValue;
+    setValue(Boolean(initialValue));
+  }
+
+  const onCheckedChange = React.useCallback(
+    (checked: boolean) => {
+      setValue(checked);
+      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });
+    },
+    [meta, rowIndex, columnId],
+  );
+
+  const onWrapperKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (isFocused && (event.key === " " || event.key === "Enter")) {
+        event.preventDefault();
+        event.stopPropagation();
+        onCheckedChange(!value);
+      } else if (isFocused && event.key === "Tab") {
+        event.preventDefault();
+        meta?.onCellEditingStop?.({
+          direction: event.shiftKey ? "left" : "right",
+        });
+      }
+    },
+    [isFocused, value, onCheckedChange, meta],
+  );
+
+  const onWrapperClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      if (isFocused) {
+        event.preventDefault();
+        event.stopPropagation();
+        onCheckedChange(!value);
+      }
+    },
+    [isFocused, value, onCheckedChange],
+  );
+
+  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+  }, []);
+
+  const onCheckboxMouseDown = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation();
+    },
+    [],
+  );
+
+  const onCheckboxDoubleClick = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation();
+    },
+    [],
+  );
+
+  return (
+    <DataGridCellWrapper
+      ref={containerRef}
+      cell={cell}
+      table={table}
+      rowIndex={rowIndex}
+      columnId={columnId}
+      isEditing={false}
+      isFocused={isFocused}
+      isSelected={isSelected}
+      className="flex size-full justify-center"
+      onClick={onWrapperClick}
+      onKeyDown={onWrapperKeyDown}
+    >
+      <Checkbox
+        checked={value}
+        onCheckedChange={onCheckedChange}
+        className="border-primary"
+        onClick={onCheckboxClick}
+        onMouseDown={onCheckboxMouseDown}
+        onDoubleClick={onCheckboxDoubleClick}
+      />
+    </DataGridCellWrapper>
+  );
+}
+
+export function SelectCell<TData>({
+  cell,
+  table,
+  rowIndex,
+  columnId,
+  isFocused,
+  isEditing,
+  isSelected,
+}: CellVariantProps<TData>) {
+  const initialValue = cell.getValue() as string;
+  const [value, setValue] = React.useState(initialValue);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const meta = table.options.meta;
+  const cellOpts = cell.column.columnDef.meta?.cell;
+  const options = cellOpts?.variant === "select" ? cellOpts.options : [];
+
+  const prevInitialValueRef = React.useRef(initialValue);
+  if (initialValue !== prevInitialValueRef.current) {
+    prevInitialValueRef.current = initialValue;
+    setValue(initialValue);
+  }
+
+  const onValueChange = React.useCallback(
+    (newValue: string) => {
+      setValue(newValue);
+      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });
+      meta?.onCellEditingStop?.();
+    },
+    [meta, rowIndex, columnId],
+  );
+
+  const onOpenChange = React.useCallback(
+    (isOpen: boolean) => {
+      if (isOpen) {
+        meta?.onCellEditingStart?.(rowIndex, columnId);
+      } else {
+        meta?.onCellEditingStop?.();
+      }
+    },
+    [meta, rowIndex, columnId],
+  );
+
+  const onWrapperKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (isEditing && event.key === "Escape") {
+        event.preventDefault();
+        setValue(initialValue);
+        meta?.onCellEditingStop?.();
+      } else if (!isEditing && isFocused && event.key === "Tab") {
+        event.preventDefault();
+        meta?.onCellEditingStop?.({
+          direction: event.shiftKey ? "left" : "right",
+        });
+      }
+    },
+    [isEditing, isFocused, initialValue, meta],
+  );
+
+  const displayLabel =
+    options.find((opt) => opt.value === value)?.label ?? value;
+
+  return (
+    <DataGridCellWrapper
+      ref={containerRef}
+      cell={cell}
+      table={table}
+      rowIndex={rowIndex}
+      columnId={columnId}
+      isEditing={isEditing}
+      isFocused={isFocused}
+      isSelected={isSelected}
+      onKeyDown={onWrapperKeyDown}
+    >
+      {isEditing ? (
+        <Select
+          value={value}
+          onValueChange={onValueChange}
+          open={isEditing}
+          onOpenChange={onOpenChange}
+        >
+          <SelectTrigger
+            size="sm"
+            className="size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden"
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent
+            data-grid-cell-editor=""
+            // compensate for the wrapper padding
+            align="start"
+            alignOffset={-8}
+            sideOffset={-8}
+            className="min-w-[calc(var(--radix-select-trigger-width)+16px)]"
+          >
+            {options.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      ) : (
+        <span data-slot="grid-cell-content">{displayLabel}</span>
+      )}
+    </DataGridCellWrapper>
+  );
+}
 
 export function MultiSelectCell<TData>({
   cell,
@@ -845,117 +1215,19 @@ export function MultiSelectCell<TData>({
   );
 }
 
-export function CheckboxCell<TData>({
+function formatDateForDisplay(dateStr: string) {
+  if (!dateStr) return "";
+  const date = new Date(dateStr);
+  return date.toLocaleDateString();
+}
+
+export function DateCell<TData>({
   cell,
   table,
   rowIndex,
   columnId,
   isFocused,
-  isSelected,
-}: CellVariantProps<TData>) {
-  const initialValue = cell.getValue() as boolean;
-  const [value, setValue] = React.useState(Boolean(initialValue));
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const meta = table.options.meta;
-
-  const prevInitialValueRef = React.useRef(initialValue);
-  if (initialValue !== prevInitialValueRef.current) {
-    prevInitialValueRef.current = initialValue;
-    setValue(Boolean(initialValue));
-  }
-
-  const onCheckedChange = React.useCallback(
-    (checked: boolean) => {
-      setValue(checked);
-      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });
-    },
-    [meta, rowIndex, columnId],
-  );
-
-  const onWrapperKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (isFocused && (event.key === " " || event.key === "Enter")) {
-        event.preventDefault();
-        event.stopPropagation();
-        onCheckedChange(!value);
-      } else if (isFocused && event.key === "Tab") {
-        event.preventDefault();
-        meta?.onCellEditingStop?.({
-          direction: event.shiftKey ? "left" : "right",
-        });
-      }
-    },
-    [isFocused, value, onCheckedChange, meta],
-  );
-
-  const onWrapperClick = React.useCallback(
-    (event: React.MouseEvent) => {
-      if (isFocused) {
-        event.preventDefault();
-        event.stopPropagation();
-        onCheckedChange(!value);
-      }
-    },
-    [isFocused, value, onCheckedChange],
-  );
-
-  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {
-    event.stopPropagation();
-  }, []);
-
-  const onCheckboxMouseDown = React.useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.stopPropagation();
-    },
-    [],
-  );
-
-  const onCheckboxDoubleClick = React.useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.stopPropagation();
-    },
-    [],
-  );
-
-  return (
-    <DataGridCellWrapper
-      ref={containerRef}
-      cell={cell}
-      table={table}
-      rowIndex={rowIndex}
-      columnId={columnId}
-      isEditing={false}
-      isFocused={isFocused}
-      isSelected={isSelected}
-      className="flex size-full justify-center"
-      onClick={onWrapperClick}
-      onKeyDown={onWrapperKeyDown}
-    >
-      <Checkbox
-        checked={value}
-        onCheckedChange={onCheckedChange}
-        className="border-primary"
-        onClick={onCheckboxClick}
-        onMouseDown={onCheckboxMouseDown}
-        onDoubleClick={onCheckboxDoubleClick}
-      />
-    </DataGridCellWrapper>
-  );
-}
-
-function formatDateForDisplay(dateStr: string) {
-  if (!dateStr) return "";
-  const date = new Date(dateStr);
-  return date.toLocaleDateString();
-}
-
-export function DateCell<TData>({
-  cell,
-  table,
-  rowIndex,
-  columnId,
-  isFocused,
-  isEditing,
+  isEditing,
   isSelected,
 }: CellVariantProps<TData>) {
   const initialValue = cell.getValue() as string;
@@ -1645,275 +1917,3 @@ export function FileCell<TData>({
     </DataGridCellWrapper>
   );
 }
-
-function isValidUrl(urlString: string): boolean {
-  if (!urlString || urlString.trim() === "") return true; // Empty is valid (allows clearing)
-
-  try {
-    const url = new URL(urlString);
-    // Only allow http and https protocols
-    return url.protocol === "http:" || url.protocol === "https:";
-  } catch {
-    // Try adding https:// prefix if missing
-    try {
-      const url = new URL(`https://${urlString}`);
-      return url.protocol === "https:";
-    } catch {
-      return false;
-    }
-  }
-}
-
-function normalizeUrl(urlString: string): string {
-  if (!urlString || urlString.trim() === "") return "";
-
-  const trimmed = urlString.trim();
-
-  try {
-    // Try parsing as-is first
-    const url = new URL(trimmed);
-    return url.href;
-  } catch {
-    // Try adding https:// prefix
-    try {
-      const url = new URL(`https://${trimmed}`);
-      return url.href;
-    } catch {
-      // Return as-is if still invalid
-      return trimmed;
-    }
-  }
-}
-
-export function UrlCell<TData>({
-  cell,
-  table,
-  rowIndex,
-  columnId,
-  isEditing,
-  isFocused,
-  isSelected,
-}: CellVariantProps<TData>) {
-  const initialValue = cell.getValue() as string;
-  const [value, setValue] = React.useState(initialValue ?? "");
-  const [isInvalid, setIsInvalid] = React.useState(false);
-  const cellRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const meta = table.options.meta;
-
-  const prevInitialValueRef = React.useRef(initialValue);
-  if (initialValue !== prevInitialValueRef.current) {
-    prevInitialValueRef.current = initialValue;
-    setValue(initialValue ?? "");
-    setIsInvalid(false);
-    if (cellRef.current && !isEditing) {
-      cellRef.current.textContent = initialValue ?? "";
-    }
-  }
-
-  const onBlur = React.useCallback(() => {
-    const currentValue = cellRef.current?.textContent?.trim() ?? "";
-
-    // Validate URL
-    if (currentValue && !isValidUrl(currentValue)) {
-      setIsInvalid(true);
-      return;
-    }
-
-    setIsInvalid(false);
-
-    // Normalize the URL (add https:// if needed)
-    const normalizedValue = normalizeUrl(currentValue);
-
-    if (normalizedValue !== initialValue) {
-      meta?.onDataUpdate?.({
-        rowIndex,
-        columnId,
-        value: normalizedValue || null,
-      });
-    }
-    meta?.onCellEditingStop?.();
-  }, [meta, rowIndex, columnId, initialValue]);
-
-  const onInput = React.useCallback(
-    (event: React.FormEvent<HTMLDivElement>) => {
-      const currentValue = event.currentTarget.textContent ?? "";
-      setValue(currentValue);
-      // Clear invalid state while typing
-      if (isInvalid) {
-        setIsInvalid(false);
-      }
-    },
-    [isInvalid],
-  );
-
-  const onWrapperKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (isEditing) {
-        if (event.key === "Enter") {
-          event.preventDefault();
-          const currentValue = cellRef.current?.textContent?.trim() ?? "";
-
-          // Validate URL
-          if (currentValue && !isValidUrl(currentValue)) {
-            setIsInvalid(true);
-            return;
-          }
-
-          setIsInvalid(false);
-
-          // Normalize the URL
-          const normalizedValue = normalizeUrl(currentValue);
-
-          if (normalizedValue !== initialValue) {
-            meta?.onDataUpdate?.({
-              rowIndex,
-              columnId,
-              value: normalizedValue || null,
-            });
-          }
-          meta?.onCellEditingStop?.({ moveToNextRow: true });
-        } else if (event.key === "Tab") {
-          event.preventDefault();
-          const currentValue = cellRef.current?.textContent?.trim() ?? "";
-
-          // Validate URL
-          if (currentValue && !isValidUrl(currentValue)) {
-            setIsInvalid(true);
-            return;
-          }
-
-          setIsInvalid(false);
-
-          // Normalize the URL
-          const normalizedValue = normalizeUrl(currentValue);
-
-          if (normalizedValue !== initialValue) {
-            meta?.onDataUpdate?.({
-              rowIndex,
-              columnId,
-              value: normalizedValue || null,
-            });
-          }
-          meta?.onCellEditingStop?.({
-            direction: event.shiftKey ? "left" : "right",
-          });
-        } else if (event.key === "Escape") {
-          event.preventDefault();
-          setValue(initialValue ?? "");
-          setIsInvalid(false);
-          cellRef.current?.blur();
-        }
-      } else if (
-        isFocused &&
-        event.key.length === 1 &&
-        !event.ctrlKey &&
-        !event.metaKey
-      ) {
-        // Handle typing to pre-fill the value when editing starts
-        setValue(event.key);
-        setIsInvalid(false);
-
-        queueMicrotask(() => {
-          if (cellRef.current && cellRef.current.contentEditable === "true") {
-            cellRef.current.textContent = event.key;
-            const range = document.createRange();
-            const selection = window.getSelection();
-            range.selectNodeContents(cellRef.current);
-            range.collapse(false);
-            selection?.removeAllRanges();
-            selection?.addRange(range);
-          }
-        });
-      }
-    },
-    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],
-  );
-
-  const onLinkClick = React.useCallback(
-    (event: React.MouseEvent<HTMLAnchorElement>) => {
-      if (isEditing) {
-        event.preventDefault();
-        return;
-      }
-      // Let the link open naturally in a new tab
-    },
-    [isEditing],
-  );
-
-  React.useEffect(() => {
-    if (isEditing && cellRef.current) {
-      cellRef.current.focus();
-
-      if (!cellRef.current.textContent && value) {
-        cellRef.current.textContent = value;
-      }
-
-      if (cellRef.current.textContent) {
-        const range = document.createRange();
-        const selection = window.getSelection();
-        range.collapse(false);
-        selection?.removeAllRanges();
-        selection?.addRange(range);
-      }
-    }
-  }, [isEditing, value]);
-
-  const displayValue = !isEditing ? (value ?? "") : "";
-  const hasValidUrl = value && isValidUrl(value);
-
-  return (
-    <DataGridCellWrapper
-      ref={containerRef}
-      cell={cell}
-      table={table}
-      rowIndex={rowIndex}
-      columnId={columnId}
-      isEditing={isEditing}
-      isFocused={isFocused}
-      isSelected={isSelected}
-      onKeyDown={onWrapperKeyDown}
-      className={cn({
-        "ring-1 ring-destructive ring-inset": isInvalid,
-      })}
-    >
-      <div
-        role="textbox"
-        data-slot="grid-cell-content"
-        contentEditable={isEditing}
-        tabIndex={-1}
-        ref={cellRef}
-        onBlur={onBlur}
-        onInput={onInput}
-        suppressContentEditableWarning
-        className={cn("size-full overflow-hidden outline-none", {
-          "whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden":
-            isEditing,
-        })}
-      >
-        {displayValue ? (
-          isEditing ? (
-            displayValue
-          ) : hasValidUrl ? (
-            <a
-              href={normalizeUrl(displayValue)}
-              target="_blank"
-              rel="noopener noreferrer"
-              onClick={onLinkClick}
-              className="truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60"
-            >
-              {displayValue}
-            </a>
-          ) : (
-            <span className="text-muted-foreground">{displayValue}</span>
-          )
-        ) : null}
-      </div>
-      {isInvalid && (
-        <div className="absolute inset-x-0 bottom-0 bg-destructive px-1 py-0.5 text-[10px] text-destructive-foreground">
-          Invalid URL
-        </div>
-      )}
-    </DataGridCellWrapper>
-  );
-}
diff --git a/src/components/data-grid/data-grid-cell.tsx b/src/components/data-grid/data-grid-cell.tsx
index bdb75eaba..64c077d7a 100644
--- a/src/components/data-grid/data-grid-cell.tsx
+++ b/src/components/data-grid/data-grid-cell.tsx
@@ -79,9 +79,9 @@ export function DataGridCell<TData>({ cell, table }: DataGridCellProps<TData>) {
           isSelected={isSelected}
         />
       );
-    case "select":
+    case "url":
       return (
-        <SelectCell
+        <UrlCell
           cell={cell}
           table={table}
           rowIndex={rowIndex}
@@ -91,9 +91,9 @@ export function DataGridCell<TData>({ cell, table }: DataGridCellProps<TData>) {
           isSelected={isSelected}
         />
       );
-    case "multi-select":
+    case "checkbox":
       return (
-        <MultiSelectCell
+        <CheckboxCell
           cell={cell}
           table={table}
           rowIndex={rowIndex}
@@ -103,9 +103,9 @@ export function DataGridCell<TData>({ cell, table }: DataGridCellProps<TData>) {
           isSelected={isSelected}
         />
       );
-    case "checkbox":
+    case "select":
       return (
-        <CheckboxCell
+        <SelectCell
           cell={cell}
           table={table}
           rowIndex={rowIndex}
@@ -115,9 +115,9 @@ export function DataGridCell<TData>({ cell, table }: DataGridCellProps<TData>) {
           isSelected={isSelected}
         />
       );
-    case "date":
+    case "multi-select":
       return (
-        <DateCell
+        <MultiSelectCell
           cell={cell}
           table={table}
           rowIndex={rowIndex}
@@ -127,9 +127,9 @@ export function DataGridCell<TData>({ cell, table }: DataGridCellProps<TData>) {
           isSelected={isSelected}
         />
       );
-    case "url":
+    case "date":
       return (
-        <UrlCell
+        <DateCell
           cell={cell}
           table={table}
           rowIndex={rowIndex}

From ffc923de1faf9672775917d1931ca162f16d6cda Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 17:55:24 +0600
Subject: [PATCH 03/17] refactor: variant type

---
 public/r/data-grid.json                          |  6 +++---
 .../data-grid/data-grid-cell-variants.tsx        | 13 +------------
 .../data-grid/data-grid-column-header.tsx        | 12 ++++++------
 src/types/data-grid.ts                           | 16 +++++++++++++---
 4 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/public/r/data-grid.json b/public/r/data-grid.json
index 94b6c6308..25635987b 100644
--- a/public/r/data-grid.json
+++ b/public/r/data-grid.json
@@ -46,13 +46,13 @@
     },
     {
       "path": "src/components/data-grid/data-grid-cell-variants.tsx",
-      "content": "\"use client\";\n\nimport type { Cell, Table } from \"@tanstack/react-table\";\nimport {\n  Check,\n  File,\n  FileArchive,\n  FileAudio,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo,\n  Presentation,\n  Upload,\n  X,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { DataGridCellWrapper } from \"@/components/data-grid/data-grid-cell-wrapper\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { useBadgeOverflow } from \"@/hooks/use-badge-overflow\";\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getCellKey, getLineCount } from \"@/lib/data-grid\";\nimport { cn } from \"@/lib/utils\";\nimport type { FileCellData } from \"@/types/data-grid\";\n\ninterface CellVariantProps<TData> {\n  cell: Cell<TData, unknown>;\n  table: Table<TData>;\n  rowIndex: number;\n  columnId: string;\n  isEditing: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n}\n\nexport function ShortTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue;\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    // Read the current value directly from the DOM to avoid stale state\n    const currentValue = cellRef.current?.textContent ?? \"\";\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue}\n      </div>\n    </DataGridCellWrapper>\n  );\n}\n\nexport function LongTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  // Debounced auto-save (300ms delay)\n  const debouncedSave = useDebouncedCallback((newValue: string) => {\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n  }, 300);\n\n  const onSave = React.useCallback(() => {\n    // Immediately save any pending changes and close the popover\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onCancel = React.useCallback(() => {\n    // Restore the original value\n    setValue(initialValue ?? \"\");\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue });\n    meta?.onCellEditingStop?.();\n  }, [meta, initialValue, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        // Immediately save any pending changes when closing\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, value, initialValue, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    if (textareaRef.current) {\n      textareaRef.current.focus();\n      const length = textareaRef.current.value.length;\n      textareaRef.current.setSelectionRange(length, length);\n    }\n  }, []);\n\n  const onBlur = React.useCallback(() => {\n    // Immediately save any pending changes on blur\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      const newValue = event.target.value;\n      setValue(newValue);\n      // Debounced auto-save\n      debouncedSave(newValue);\n    },\n    [debouncedSave],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onCancel();\n      } else if (event.key === \"Enter\" && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        onSave();\n      } else if (event.key === \"Tab\") {\n        event.preventDefault();\n        // Save any pending changes\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n        return;\n      }\n      // Stop propagation to prevent grid navigation\n      event.stopPropagation();\n    },\n    [onSave, onCancel, value, initialValue, meta, rowIndex, columnId],\n  );\n\n  return (\n    <Popover open={isEditing} onOpenChange={onOpenChange}>\n      <PopoverAnchor asChild>\n        <DataGridCellWrapper\n          ref={containerRef}\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        >\n          <span data-slot=\"grid-cell-content\">{value}</span>\n        </DataGridCellWrapper>\n      </PopoverAnchor>\n      <PopoverContent\n        data-grid-cell-editor=\"\"\n        align=\"start\"\n        side=\"bottom\"\n        sideOffset={sideOffset}\n        className=\"w-[400px] rounded-none p-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n      >\n        <Textarea\n          placeholder=\"Enter text...\"\n          className=\"min-h-[150px] resize-none rounded-none border-0 shadow-none focus-visible:ring-0\"\n          ref={textareaRef}\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function NumberCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as number;\n  const [value, setValue] = React.useState(String(initialValue ?? \"\"));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const min = cellOpts?.variant === \"number\" ? cellOpts.min : undefined;\n  const max = cellOpts?.variant === \"number\" ? cellOpts.max : undefined;\n  const step = cellOpts?.variant === \"number\" ? cellOpts.step : undefined;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(String(initialValue ?? \"\"));\n  }\n\n  const onBlur = React.useCallback(() => {\n    const numValue = value === \"\" ? null : Number(value);\n    if (numValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue, value]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(String(initialValue ?? \"\"));\n          inputRef.current?.blur();\n        }\n      } else if (isFocused) {\n        // Handle Backspace to start editing with empty value\n        if (event.key === \"Backspace\") {\n          setValue(\"\");\n        } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n          // Handle typing to pre-fill the value when editing starts\n          setValue(event.key);\n        }\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId, value],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, [isEditing]);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <input\n          ref={inputRef}\n          type=\"number\"\n          value={value}\n          min={min}\n          max={max}\n          step={step}\n          onBlur={onBlur}\n          onChange={onChange}\n          className=\"w-full border-none bg-transparent p-0 outline-none\"\n        />\n      ) : (\n        <span data-slot=\"grid-cell-content\">{value}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction isValidUrl(urlString: string): boolean {\n  if (!urlString || urlString.trim() === \"\") return true; // Empty is valid (allows clearing)\n\n  try {\n    const url = new URL(urlString);\n    // Only allow http and https protocols\n    return url.protocol === \"http:\" || url.protocol === \"https:\";\n  } catch {\n    // Try adding https:// prefix if missing\n    try {\n      const url = new URL(`https://${urlString}`);\n      return url.protocol === \"https:\";\n    } catch {\n      return false;\n    }\n  }\n}\n\nfunction normalizeUrl(urlString: string): string {\n  if (!urlString || urlString.trim() === \"\") return \"\";\n\n  const trimmed = urlString.trim();\n\n  try {\n    // Try parsing as-is first\n    const url = new URL(trimmed);\n    return url.href;\n  } catch {\n    // Try adding https:// prefix\n    try {\n      const url = new URL(`https://${trimmed}`);\n      return url.href;\n    } catch {\n      // Return as-is if still invalid\n      return trimmed;\n    }\n  }\n}\n\nexport function UrlCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const [isInvalid, setIsInvalid] = React.useState(false);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n    setIsInvalid(false);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue ?? \"\";\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n    // Validate URL\n    if (currentValue && !isValidUrl(currentValue)) {\n      setIsInvalid(true);\n      return;\n    }\n\n    setIsInvalid(false);\n\n    // Normalize the URL (add https:// if needed)\n    const normalizedValue = normalizeUrl(currentValue);\n\n    if (normalizedValue !== initialValue) {\n      meta?.onDataUpdate?.({\n        rowIndex,\n        columnId,\n        value: normalizedValue || null,\n      });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n      // Clear invalid state while typing\n      if (isInvalid) {\n        setIsInvalid(false);\n      }\n    },\n    [isInvalid],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n          // Validate URL\n          if (currentValue && !isValidUrl(currentValue)) {\n            setIsInvalid(true);\n            return;\n          }\n\n          setIsInvalid(false);\n\n          // Normalize the URL\n          const normalizedValue = normalizeUrl(currentValue);\n\n          if (normalizedValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: normalizedValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n          // Validate URL\n          if (currentValue && !isValidUrl(currentValue)) {\n            setIsInvalid(true);\n            return;\n          }\n\n          setIsInvalid(false);\n\n          // Normalize the URL\n          const normalizedValue = normalizeUrl(currentValue);\n\n          if (normalizedValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: normalizedValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue ?? \"\");\n          setIsInvalid(false);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n        setIsInvalid(false);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  const onLinkClick = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (isEditing) {\n        event.preventDefault();\n        return;\n      }\n      // Let the link open naturally in a new tab\n    },\n    [isEditing],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n  const hasValidUrl = value && isValidUrl(value);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n      className={cn({\n        \"ring-1 ring-destructive ring-inset\": isInvalid,\n      })}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue ? (\n          isEditing ? (\n            displayValue\n          ) : hasValidUrl ? (\n            <a\n              href={normalizeUrl(displayValue)}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              onClick={onLinkClick}\n              className=\"truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60\"\n            >\n              {displayValue}\n            </a>\n          ) : (\n            <span className=\"text-muted-foreground\">{displayValue}</span>\n          )\n        ) : null}\n      </div>\n      {isInvalid && (\n        <div className=\"absolute inset-x-0 bottom-0 bg-destructive px-1 py-0.5 text-[10px] text-destructive-foreground\">\n          Invalid URL\n        </div>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function CheckboxCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as boolean;\n  const [value, setValue] = React.useState(Boolean(initialValue));\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(Boolean(initialValue));\n  }\n\n  const onCheckedChange = React.useCallback(\n    (checked: boolean) => {\n      setValue(checked);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isFocused && (event.key === \" \" || event.key === \"Enter\")) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      } else if (isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isFocused, value, onCheckedChange, meta],\n  );\n\n  const onWrapperClick = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isFocused) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      }\n    },\n    [isFocused, value, onCheckedChange],\n  );\n\n  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const onCheckboxMouseDown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const onCheckboxDoubleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={false}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className=\"flex size-full justify-center\"\n      onClick={onWrapperClick}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Checkbox\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        className=\"border-primary\"\n        onClick={onCheckboxClick}\n        onMouseDown={onCheckboxMouseDown}\n        onDoubleClick={onCheckboxDoubleClick}\n      />\n    </DataGridCellWrapper>\n  );\n}\n\nexport function SelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"select\" ? cellOpts.options : [];\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n  }\n\n  const onValueChange = React.useCallback(\n    (newValue: string) => {\n      setValue(newValue);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  const displayLabel =\n    options.find((opt) => opt.value === value)?.label ?? value;\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Select\n          value={value}\n          onValueChange={onValueChange}\n          open={isEditing}\n          onOpenChange={onOpenChange}\n        >\n          <SelectTrigger\n            size=\"sm\"\n            className=\"size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent\n            data-grid-cell-editor=\"\"\n            // compensate for the wrapper padding\n            align=\"start\"\n            alignOffset={-8}\n            sideOffset={-8}\n            className=\"min-w-[calc(var(--radix-select-trigger-width)+16px)]\"\n          >\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      ) : (\n        <span data-slot=\"grid-cell-content\">{displayLabel}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function MultiSelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as string[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const [selectedValues, setSelectedValues] =\n    React.useState<string[]>(cellValue);\n  const [searchValue, setSearchValue] = React.useState(\"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"multi-select\" ? cellOpts.options : [];\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setSelectedValues(cellValue);\n    setSearchValue(\"\");\n  }\n\n  const onValueChange = React.useCallback(\n    (value: string) => {\n      const newValues = selectedValues.includes(value)\n        ? selectedValues.filter((v) => v !== value)\n        : [...selectedValues, value];\n\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Clear search input and focus back on input after selection\n      setSearchValue(\"\");\n      queueMicrotask(() => inputRef.current?.focus());\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const removeValue = React.useCallback(\n    (valueToRemove: string, event?: React.MouseEvent) => {\n      event?.stopPropagation();\n      event?.preventDefault();\n      const newValues = selectedValues.filter((v) => v !== valueToRemove);\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Focus back on input after removing\n      setTimeout(() => inputRef.current?.focus(), 0);\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    setSelectedValues([]);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n    queueMicrotask(() => inputRef.current?.focus());\n  }, [meta, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setSelectedValues(cellValue);\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, cellValue, meta],\n  );\n\n  const onInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // Handle backspace when input is empty - remove last selected item\n      if (\n        event.key === \"Backspace\" &&\n        searchValue === \"\" &&\n        selectedValues.length > 0\n      ) {\n        event.preventDefault();\n        const lastValue = selectedValues[selectedValues.length - 1];\n        if (lastValue) {\n          removeValue(lastValue);\n        }\n      }\n      // Prevent escape from propagating to close the popover immediately\n      // Let the command handle it first\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n      }\n    },\n    [searchValue, selectedValues, removeValue],\n  );\n\n  const displayLabels = selectedValues\n    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)\n    .filter(Boolean);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =\n    useBadgeOverflow({\n      items: displayLabels,\n      getLabel: (label) => label,\n      containerRef,\n      lineCount,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[300px] rounded-none p-0\"\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <Command className=\"**:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:border-none **:data-[slot=command-input-wrapper]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden\">\n              <div className=\"flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5\">\n                {selectedValues.map((value) => {\n                  const option = options.find((opt) => opt.value === value);\n                  const label = option?.label ?? value;\n\n                  return (\n                    <Badge\n                      key={value}\n                      variant=\"secondary\"\n                      className=\"h-5 gap-1 px-1.5 text-xs\"\n                    >\n                      {label}\n                      <button\n                        type=\"button\"\n                        onClick={(event) => removeValue(value, event)}\n                        onPointerDown={(event) => {\n                          event.preventDefault();\n                          event.stopPropagation();\n                        }}\n                      >\n                        <X className=\"size-3\" />\n                      </button>\n                    </Badge>\n                  );\n                })}\n                <CommandInput\n                  ref={inputRef}\n                  value={searchValue}\n                  onValueChange={setSearchValue}\n                  onKeyDown={onInputKeyDown}\n                  placeholder=\"Search...\"\n                  className=\"h-auto flex-1 p-0\"\n                />\n              </div>\n              <CommandList className=\"max-h-full\">\n                <CommandEmpty>No options found.</CommandEmpty>\n                <CommandGroup className=\"max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden\">\n                  {options.map((option) => {\n                    const isSelected = selectedValues.includes(option.value);\n\n                    return (\n                      <CommandItem\n                        key={option.value}\n                        value={option.label}\n                        onSelect={() => onValueChange(option.value)}\n                      >\n                        <div\n                          className={cn(\n                            \"flex size-4 items-center justify-center rounded-sm border border-primary\",\n                            isSelected\n                              ? \"bg-primary text-primary-foreground\"\n                              : \"opacity-50 [&_svg]:invisible\",\n                          )}\n                        >\n                          <Check className=\"size-3\" />\n                        </div>\n                        <span>{option.label}</span>\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n                {selectedValues.length > 0 && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <CommandItem\n                        onSelect={clearAll}\n                        className=\"justify-center text-muted-foreground\"\n                      >\n                        Clear all\n                      </CommandItem>\n                    </CommandGroup>\n                  </>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {displayLabels.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleLabels.map((label, index) => (\n            <Badge\n              key={selectedValues[index]}\n              variant=\"secondary\"\n              className=\"h-5 shrink-0 px-1.5 text-xs\"\n            >\n              {label}\n            </Badge>\n          ))}\n          {hiddenBadgeCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenBadgeCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatDateForDisplay(dateStr: string) {\n  if (!dateStr) return \"\";\n  const date = new Date(dateStr);\n  return date.toLocaleDateString();\n}\n\nexport function DateCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  const selectedDate = value ? new Date(value) : undefined;\n\n  const onDateSelect = React.useCallback(\n    (date: Date | undefined) => {\n      if (!date) return;\n\n      const formattedDate = date.toISOString().split(\"T\")[0] ?? \"\";\n      setValue(formattedDate);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: formattedDate });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Popover open={isEditing} onOpenChange={onOpenChange}>\n        <PopoverAnchor asChild>\n          <span data-slot=\"grid-cell-content\">\n            {formatDateForDisplay(value)}\n          </span>\n        </PopoverAnchor>\n        {isEditing && (\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            alignOffset={-8}\n            className=\"w-auto p-0\"\n          >\n            <Calendar\n              autoFocus\n              captionLayout=\"dropdown\"\n              mode=\"single\"\n              defaultMonth={selectedDate ?? new Date()}\n              selected={selectedDate}\n              onSelect={onDateSelect}\n            />\n          </PopoverContent>\n        )}\n      </Popover>\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 B\";\n  const k = 1024;\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n}\n\nfunction getFileIcon(\n  type: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> {\n  if (type.startsWith(\"image/\")) return FileImage;\n  if (type.startsWith(\"video/\")) return FileVideo;\n  if (type.startsWith(\"audio/\")) return FileAudio;\n  if (type.includes(\"pdf\")) return FileText;\n  if (type.includes(\"zip\") || type.includes(\"rar\")) return FileArchive;\n  if (\n    type.includes(\"word\") ||\n    type.includes(\"document\") ||\n    type.includes(\"doc\")\n  )\n    return FileText;\n  if (type.includes(\"sheet\") || type.includes(\"excel\") || type.includes(\"xls\"))\n    return FileSpreadsheet;\n  if (\n    type.includes(\"presentation\") ||\n    type.includes(\"powerpoint\") ||\n    type.includes(\"ppt\")\n  )\n    return Presentation;\n  return File;\n}\n\nexport function FileCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as FileCellData[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const labelId = React.useId();\n  const descriptionId = React.useId();\n\n  const [files, setFiles] = React.useState<FileCellData[]>(cellValue);\n  const [uploadingFiles, setUploadingFiles] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const [isDraggingOver, setIsDraggingOver] = React.useState(false);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const dropzoneRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const fileCellOpts = cellOpts?.variant === \"file\" ? cellOpts : null;\n  const maxFileSize = fileCellOpts?.maxFileSize ?? 10 * 1024 * 1024;\n  const maxFiles = fileCellOpts?.maxFiles ?? 10;\n  const accept = fileCellOpts?.accept;\n  const multiple = fileCellOpts?.multiple ?? true;\n\n  const acceptedTypes = React.useMemo(\n    () => (accept ? accept.split(\",\").map((t) => t.trim()) : null),\n    [accept],\n  );\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setFiles(cellValue);\n    setError(null);\n  }\n\n  const validateFile = React.useCallback(\n    (file: File): string | null => {\n      if (maxFileSize && file.size > maxFileSize) {\n        return `File size exceeds ${formatFileSize(maxFileSize)}`;\n      }\n      if (acceptedTypes) {\n        const fileExtension = `.${file.name.split(\".\").pop()}`;\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.endsWith(\"/*\")) {\n            // Handle wildcard types like \"image/*\"\n            const baseType = type.slice(0, -2);\n            return file.type.startsWith(`${baseType}/`);\n          }\n          if (type.startsWith(\".\")) {\n            // Handle file extensions like \".pdf\"\n            return fileExtension.toLowerCase() === type.toLowerCase();\n          }\n          // Exact match for specific MIME types\n          return file.type === type;\n        });\n        if (!isAccepted) {\n          return `File type not accepted. Accepted: ${accept}`;\n        }\n      }\n      return null;\n    },\n    [maxFileSize, acceptedTypes, accept],\n  );\n\n  const addFiles = React.useCallback(\n    async (newFiles: File[], skipUpload = false) => {\n      setError(null);\n\n      // Check max files limit\n      if (maxFiles && files.length + newFiles.length > maxFiles) {\n        setError(`Maximum ${maxFiles} files allowed`);\n        return;\n      }\n\n      const validFiles: FileCellData[] = [];\n      let firstError: string | null = null;\n\n      for (const file of newFiles) {\n        const validationError = validateFile(file);\n        if (validationError) {\n          if (!firstError) {\n            firstError = validationError;\n          }\n          continue;\n        }\n\n        // Create file data object with temporary ID\n        const fileData: FileCellData = {\n          id: crypto.randomUUID(),\n          name: file.name,\n          size: file.size,\n          type: file.type,\n          url: URL.createObjectURL(file),\n        };\n        validFiles.push(fileData);\n      }\n\n      if (firstError) {\n        setError(firstError);\n      }\n\n      if (validFiles.length > 0) {\n        // If not skipping upload (dropped on cell), show skeletons first\n        if (!skipUpload) {\n          // Add temp files immediately (will show as skeletons)\n          const tempFiles = validFiles.map((f) => ({ ...f, url: undefined }));\n          const filesWithTemp = [...files, ...tempFiles];\n          setFiles(filesWithTemp);\n\n          // Mark as uploading\n          const uploadingIds = new Set(validFiles.map((f) => f.id));\n          setUploadingFiles(uploadingIds);\n\n          // Simulate upload delay (in real app, this would be actual upload)\n          await new Promise((resolve) => setTimeout(resolve, 800));\n\n          // Replace temp files with real ones\n          const finalFiles = filesWithTemp.map(\n            (f) => validFiles.find((vf) => vf.id === f.id) || f,\n          );\n          setFiles(finalFiles);\n          setUploadingFiles(new Set());\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: finalFiles });\n        } else {\n          // If from editor, add immediately without skeleton\n          const updatedFiles = [...files, ...validFiles];\n          setFiles(updatedFiles);\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n        }\n      }\n    },\n    [files, maxFiles, validateFile, meta, rowIndex, columnId],\n  );\n\n  const removeFile = React.useCallback(\n    (fileId: string) => {\n      setError(null);\n      // Revoke object URL to prevent memory leak\n      const fileToRemove = files.find((f) => f.id === fileId);\n      if (fileToRemove?.url) {\n        URL.revokeObjectURL(fileToRemove.url);\n      }\n      const updatedFiles = files.filter((f) => f.id !== fileId);\n      setFiles(updatedFiles);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n    },\n    [files, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    // Revoke all object URLs to prevent memory leak\n    for (const file of files) {\n      if (file.url) {\n        URL.revokeObjectURL(file.url);\n      }\n    }\n    setFiles([]);\n    setError(null);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n  }, [files, meta, rowIndex, columnId]);\n\n  const onDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setIsDragging(true);\n  }, []);\n\n  const onDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDragging(false);\n    }\n  }, []);\n\n  const onDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      addFiles(droppedFiles, true); // Skip upload skeleton in editor\n    },\n    [addFiles],\n  );\n\n  const onFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const selectedFiles = Array.from(event.target.files ?? []);\n      addFiles(selectedFiles, true); // Skip upload skeleton for manual selection\n      // Reset input so the same file can be selected again\n      event.target.value = \"\";\n    },\n    [addFiles],\n  );\n\n  // Cell-level drag handlers (for dropping directly on cell)\n  const onCellDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Only show drop indicator if dragging files\n    if (event.dataTransfer.types.includes(\"Files\")) {\n      setIsDraggingOver(true);\n    }\n  }, []);\n\n  const onCellDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDraggingOver(false);\n    }\n  }, []);\n\n  const onCellDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onCellDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDraggingOver(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      if (droppedFiles.length > 0) {\n        addFiles(droppedFiles, false); // Show skeleton for dropped files\n      }\n    },\n    [addFiles],\n  );\n\n  const onDropzoneClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const onDropzoneKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onDropzoneClick();\n      }\n    },\n    [onDropzoneClick],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setError(null);\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onEscapeKeyDown: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onEscapeKeyDown\"]\n  > = React.useCallback((event) => {\n    // Prevent the escape key from propagating to the data grid's keyboard handler\n    // which would call blurCell() and remove focus from the cell\n    event.stopPropagation();\n  }, []);\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    // Focus the dropzone for better keyboard UX - users can press Enter again to open file dialog\n    queueMicrotask(() => {\n      dropzoneRef.current?.focus();\n    });\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          setFiles(cellValue);\n          setError(null);\n          meta?.onCellEditingStop?.();\n        } else if (event.key === \" \") {\n          event.preventDefault();\n          onDropzoneClick();\n        }\n      } else if (isFocused && event.key === \"Enter\") {\n        // Handle Enter key to start editing when focused but not editing\n        event.preventDefault();\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [\n      isEditing,\n      isFocused,\n      cellValue,\n      meta,\n      onDropzoneClick,\n      rowIndex,\n      columnId,\n    ],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const file of files) {\n        if (file.url) {\n          URL.revokeObjectURL(file.url);\n        }\n      }\n    };\n  }, [files]);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } =\n    useBadgeOverflow({\n      items: files,\n      getLabel: (file) => file.name,\n      containerRef,\n      lineCount,\n      cacheKeyPrefix: \"file\",\n      iconSize: 12,\n      maxWidth: 100,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className={cn({\n        \"ring-1 ring-primary/80 ring-inset\": isDraggingOver,\n      })}\n      onDragEnter={onCellDragEnter}\n      onDragLeave={onCellDragLeave}\n      onDragOver={onCellDragOver}\n      onDrop={onCellDrop}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[400px] rounded-none p-0\"\n            onEscapeKeyDown={onEscapeKeyDown}\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <div className=\"flex flex-col gap-2 p-3\">\n              <span id={labelId} className=\"sr-only\">\n                File upload\n              </span>\n              <div\n                role=\"region\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                aria-invalid={!!error}\n                data-dragging={isDragging ? \"\" : undefined}\n                data-invalid={error ? \"\" : undefined}\n                tabIndex={isDragging ? -1 : 0}\n                className=\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20\"\n                ref={dropzoneRef}\n                onClick={onDropzoneClick}\n                onDragEnter={onDragEnter}\n                onDragLeave={onDragLeave}\n                onDragOver={onDragOver}\n                onDrop={onDrop}\n                onKeyDown={onDropzoneKeyDown}\n              >\n                <Upload className=\"size-8 text-muted-foreground\" />\n                <div className=\"text-center text-sm\">\n                  <p className=\"font-medium\">\n                    {isDragging ? \"Drop files here\" : \"Drag files here\"}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    or click to browse\n                  </p>\n                </div>\n                <p id={descriptionId} className=\"text-muted-foreground text-xs\">\n                  {maxFileSize\n                    ? `Max size: ${formatFileSize(maxFileSize)}${maxFiles ? ` • Max ${maxFiles} files` : \"\"}`\n                    : maxFiles\n                      ? `Max ${maxFiles} files`\n                      : \"Select files to upload\"}\n                </p>\n              </div>\n              <input\n                type=\"file\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                multiple={multiple}\n                accept={accept}\n                className=\"sr-only\"\n                ref={fileInputRef}\n                onChange={onFileInputChange}\n              />\n              {error && (\n                <div className=\"rounded-md bg-destructive/10 px-3 py-2 text-destructive text-xs\">\n                  {error}\n                </div>\n              )}\n              {files.length > 0 && (\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <p className=\"font-medium text-muted-foreground text-xs\">\n                      {files.length} {files.length === 1 ? \"file\" : \"files\"}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-6 text-muted-foreground text-xs\"\n                      onClick={clearAll}\n                    >\n                      Clear all\n                    </Button>\n                  </div>\n                  <div className=\"max-h-[200px] space-y-1 overflow-y-auto\">\n                    {files.map((file) => {\n                      const FileIcon = getFileIcon(file.type);\n\n                      return (\n                        <div\n                          key={file.id}\n                          className=\"flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1.5\"\n                        >\n                          {FileIcon && (\n                            <FileIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n                          )}\n                          <div className=\"flex-1 overflow-hidden\">\n                            <p className=\"truncate text-sm\">{file.name}</p>\n                            <p className=\"text-muted-foreground text-xs\">\n                              {formatFileSize(file.size)}\n                            </p>\n                          </div>\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            className=\"size-5 rounded-sm\"\n                            onClick={() => removeFile(file.id)}\n                          >\n                            <X className=\"size-3\" />\n                          </Button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {isDraggingOver ? (\n        <div className=\"flex items-center justify-center gap-2 text-primary text-sm\">\n          <Upload className=\"size-4\" />\n          <span>Drop files here</span>\n        </div>\n      ) : files.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleFiles.map((file) => {\n            const isUploading = uploadingFiles.has(file.id);\n\n            if (isUploading) {\n              // Show skeleton for uploading files\n              return (\n                <Skeleton\n                  key={file.id}\n                  className=\"h-5 shrink-0 px-1.5\"\n                  style={{\n                    width: `${Math.min(file.name.length * 8 + 30, 100)}px`,\n                  }}\n                />\n              );\n            }\n\n            return (\n              <Badge\n                key={file.id}\n                variant=\"secondary\"\n                className=\"h-5 shrink-0 gap-1 px-1.5 text-xs\"\n              >\n                {React.createElement(getFileIcon(file.type), {\n                  className: \"size-3 shrink-0\",\n                })}\n                <span className=\"max-w-[100px] truncate\">{file.name}</span>\n              </Badge>\n            );\n          })}\n          {hiddenFileCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenFileCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  Check,\n  File,\n  FileArchive,\n  FileAudio,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo,\n  Presentation,\n  Upload,\n  X,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { DataGridCellWrapper } from \"@/components/data-grid/data-grid-cell-wrapper\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { useBadgeOverflow } from \"@/hooks/use-badge-overflow\";\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getCellKey, getLineCount } from \"@/lib/data-grid\";\nimport { cn } from \"@/lib/utils\";\nimport type { CellVariantProps, FileCellData } from \"@/types/data-grid\";\n\nexport function ShortTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue;\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    // Read the current value directly from the DOM to avoid stale state\n    const currentValue = cellRef.current?.textContent ?? \"\";\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue}\n      </div>\n    </DataGridCellWrapper>\n  );\n}\n\nexport function LongTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  // Debounced auto-save (300ms delay)\n  const debouncedSave = useDebouncedCallback((newValue: string) => {\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n  }, 300);\n\n  const onSave = React.useCallback(() => {\n    // Immediately save any pending changes and close the popover\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onCancel = React.useCallback(() => {\n    // Restore the original value\n    setValue(initialValue ?? \"\");\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue });\n    meta?.onCellEditingStop?.();\n  }, [meta, initialValue, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        // Immediately save any pending changes when closing\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, value, initialValue, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    if (textareaRef.current) {\n      textareaRef.current.focus();\n      const length = textareaRef.current.value.length;\n      textareaRef.current.setSelectionRange(length, length);\n    }\n  }, []);\n\n  const onBlur = React.useCallback(() => {\n    // Immediately save any pending changes on blur\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      const newValue = event.target.value;\n      setValue(newValue);\n      // Debounced auto-save\n      debouncedSave(newValue);\n    },\n    [debouncedSave],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onCancel();\n      } else if (event.key === \"Enter\" && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        onSave();\n      } else if (event.key === \"Tab\") {\n        event.preventDefault();\n        // Save any pending changes\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n        return;\n      }\n      // Stop propagation to prevent grid navigation\n      event.stopPropagation();\n    },\n    [onSave, onCancel, value, initialValue, meta, rowIndex, columnId],\n  );\n\n  return (\n    <Popover open={isEditing} onOpenChange={onOpenChange}>\n      <PopoverAnchor asChild>\n        <DataGridCellWrapper\n          ref={containerRef}\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        >\n          <span data-slot=\"grid-cell-content\">{value}</span>\n        </DataGridCellWrapper>\n      </PopoverAnchor>\n      <PopoverContent\n        data-grid-cell-editor=\"\"\n        align=\"start\"\n        side=\"bottom\"\n        sideOffset={sideOffset}\n        className=\"w-[400px] rounded-none p-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n      >\n        <Textarea\n          placeholder=\"Enter text...\"\n          className=\"min-h-[150px] resize-none rounded-none border-0 shadow-none focus-visible:ring-0\"\n          ref={textareaRef}\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function NumberCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as number;\n  const [value, setValue] = React.useState(String(initialValue ?? \"\"));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const min = cellOpts?.variant === \"number\" ? cellOpts.min : undefined;\n  const max = cellOpts?.variant === \"number\" ? cellOpts.max : undefined;\n  const step = cellOpts?.variant === \"number\" ? cellOpts.step : undefined;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(String(initialValue ?? \"\"));\n  }\n\n  const onBlur = React.useCallback(() => {\n    const numValue = value === \"\" ? null : Number(value);\n    if (numValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue, value]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(String(initialValue ?? \"\"));\n          inputRef.current?.blur();\n        }\n      } else if (isFocused) {\n        // Handle Backspace to start editing with empty value\n        if (event.key === \"Backspace\") {\n          setValue(\"\");\n        } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n          // Handle typing to pre-fill the value when editing starts\n          setValue(event.key);\n        }\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId, value],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, [isEditing]);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <input\n          ref={inputRef}\n          type=\"number\"\n          value={value}\n          min={min}\n          max={max}\n          step={step}\n          onBlur={onBlur}\n          onChange={onChange}\n          className=\"w-full border-none bg-transparent p-0 outline-none\"\n        />\n      ) : (\n        <span data-slot=\"grid-cell-content\">{value}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction isValidUrl(urlString: string): boolean {\n  if (!urlString || urlString.trim() === \"\") return true; // Empty is valid (allows clearing)\n\n  try {\n    const url = new URL(urlString);\n    // Only allow http and https protocols\n    return url.protocol === \"http:\" || url.protocol === \"https:\";\n  } catch {\n    // Try adding https:// prefix if missing\n    try {\n      const url = new URL(`https://${urlString}`);\n      return url.protocol === \"https:\";\n    } catch {\n      return false;\n    }\n  }\n}\n\nfunction normalizeUrl(urlString: string): string {\n  if (!urlString || urlString.trim() === \"\") return \"\";\n\n  const trimmed = urlString.trim();\n\n  try {\n    // Try parsing as-is first\n    const url = new URL(trimmed);\n    return url.href;\n  } catch {\n    // Try adding https:// prefix\n    try {\n      const url = new URL(`https://${trimmed}`);\n      return url.href;\n    } catch {\n      // Return as-is if still invalid\n      return trimmed;\n    }\n  }\n}\n\nexport function UrlCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const [isInvalid, setIsInvalid] = React.useState(false);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n    setIsInvalid(false);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue ?? \"\";\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n    // Validate URL\n    if (currentValue && !isValidUrl(currentValue)) {\n      setIsInvalid(true);\n      return;\n    }\n\n    setIsInvalid(false);\n\n    // Normalize the URL (add https:// if needed)\n    const normalizedValue = normalizeUrl(currentValue);\n\n    if (normalizedValue !== initialValue) {\n      meta?.onDataUpdate?.({\n        rowIndex,\n        columnId,\n        value: normalizedValue || null,\n      });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n      // Clear invalid state while typing\n      if (isInvalid) {\n        setIsInvalid(false);\n      }\n    },\n    [isInvalid],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n          // Validate URL\n          if (currentValue && !isValidUrl(currentValue)) {\n            setIsInvalid(true);\n            return;\n          }\n\n          setIsInvalid(false);\n\n          // Normalize the URL\n          const normalizedValue = normalizeUrl(currentValue);\n\n          if (normalizedValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: normalizedValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n          // Validate URL\n          if (currentValue && !isValidUrl(currentValue)) {\n            setIsInvalid(true);\n            return;\n          }\n\n          setIsInvalid(false);\n\n          // Normalize the URL\n          const normalizedValue = normalizeUrl(currentValue);\n\n          if (normalizedValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: normalizedValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue ?? \"\");\n          setIsInvalid(false);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n        setIsInvalid(false);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  const onLinkClick = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (isEditing) {\n        event.preventDefault();\n        return;\n      }\n      // Let the link open naturally in a new tab\n    },\n    [isEditing],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n  const hasValidUrl = value && isValidUrl(value);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n      className={cn({\n        \"ring-1 ring-destructive ring-inset\": isInvalid,\n      })}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue ? (\n          isEditing ? (\n            displayValue\n          ) : hasValidUrl ? (\n            <a\n              href={normalizeUrl(displayValue)}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              onClick={onLinkClick}\n              className=\"truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60\"\n            >\n              {displayValue}\n            </a>\n          ) : (\n            <span className=\"text-muted-foreground\">{displayValue}</span>\n          )\n        ) : null}\n      </div>\n      {isInvalid && (\n        <div className=\"absolute inset-x-0 bottom-0 bg-destructive px-1 py-0.5 text-[10px] text-destructive-foreground\">\n          Invalid URL\n        </div>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function CheckboxCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as boolean;\n  const [value, setValue] = React.useState(Boolean(initialValue));\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(Boolean(initialValue));\n  }\n\n  const onCheckedChange = React.useCallback(\n    (checked: boolean) => {\n      setValue(checked);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isFocused && (event.key === \" \" || event.key === \"Enter\")) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      } else if (isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isFocused, value, onCheckedChange, meta],\n  );\n\n  const onWrapperClick = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isFocused) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      }\n    },\n    [isFocused, value, onCheckedChange],\n  );\n\n  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const onCheckboxMouseDown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const onCheckboxDoubleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={false}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className=\"flex size-full justify-center\"\n      onClick={onWrapperClick}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Checkbox\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        className=\"border-primary\"\n        onClick={onCheckboxClick}\n        onMouseDown={onCheckboxMouseDown}\n        onDoubleClick={onCheckboxDoubleClick}\n      />\n    </DataGridCellWrapper>\n  );\n}\n\nexport function SelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"select\" ? cellOpts.options : [];\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n  }\n\n  const onValueChange = React.useCallback(\n    (newValue: string) => {\n      setValue(newValue);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  const displayLabel =\n    options.find((opt) => opt.value === value)?.label ?? value;\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Select\n          value={value}\n          onValueChange={onValueChange}\n          open={isEditing}\n          onOpenChange={onOpenChange}\n        >\n          <SelectTrigger\n            size=\"sm\"\n            className=\"size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent\n            data-grid-cell-editor=\"\"\n            // compensate for the wrapper padding\n            align=\"start\"\n            alignOffset={-8}\n            sideOffset={-8}\n            className=\"min-w-[calc(var(--radix-select-trigger-width)+16px)]\"\n          >\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      ) : (\n        <span data-slot=\"grid-cell-content\">{displayLabel}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function MultiSelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as string[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const [selectedValues, setSelectedValues] =\n    React.useState<string[]>(cellValue);\n  const [searchValue, setSearchValue] = React.useState(\"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"multi-select\" ? cellOpts.options : [];\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setSelectedValues(cellValue);\n    setSearchValue(\"\");\n  }\n\n  const onValueChange = React.useCallback(\n    (value: string) => {\n      const newValues = selectedValues.includes(value)\n        ? selectedValues.filter((v) => v !== value)\n        : [...selectedValues, value];\n\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Clear search input and focus back on input after selection\n      setSearchValue(\"\");\n      queueMicrotask(() => inputRef.current?.focus());\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const removeValue = React.useCallback(\n    (valueToRemove: string, event?: React.MouseEvent) => {\n      event?.stopPropagation();\n      event?.preventDefault();\n      const newValues = selectedValues.filter((v) => v !== valueToRemove);\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Focus back on input after removing\n      setTimeout(() => inputRef.current?.focus(), 0);\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    setSelectedValues([]);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n    queueMicrotask(() => inputRef.current?.focus());\n  }, [meta, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setSelectedValues(cellValue);\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, cellValue, meta],\n  );\n\n  const onInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // Handle backspace when input is empty - remove last selected item\n      if (\n        event.key === \"Backspace\" &&\n        searchValue === \"\" &&\n        selectedValues.length > 0\n      ) {\n        event.preventDefault();\n        const lastValue = selectedValues[selectedValues.length - 1];\n        if (lastValue) {\n          removeValue(lastValue);\n        }\n      }\n      // Prevent escape from propagating to close the popover immediately\n      // Let the command handle it first\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n      }\n    },\n    [searchValue, selectedValues, removeValue],\n  );\n\n  const displayLabels = selectedValues\n    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)\n    .filter(Boolean);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =\n    useBadgeOverflow({\n      items: displayLabels,\n      getLabel: (label) => label,\n      containerRef,\n      lineCount,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[300px] rounded-none p-0\"\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <Command className=\"**:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:border-none **:data-[slot=command-input-wrapper]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden\">\n              <div className=\"flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5\">\n                {selectedValues.map((value) => {\n                  const option = options.find((opt) => opt.value === value);\n                  const label = option?.label ?? value;\n\n                  return (\n                    <Badge\n                      key={value}\n                      variant=\"secondary\"\n                      className=\"h-5 gap-1 px-1.5 text-xs\"\n                    >\n                      {label}\n                      <button\n                        type=\"button\"\n                        onClick={(event) => removeValue(value, event)}\n                        onPointerDown={(event) => {\n                          event.preventDefault();\n                          event.stopPropagation();\n                        }}\n                      >\n                        <X className=\"size-3\" />\n                      </button>\n                    </Badge>\n                  );\n                })}\n                <CommandInput\n                  ref={inputRef}\n                  value={searchValue}\n                  onValueChange={setSearchValue}\n                  onKeyDown={onInputKeyDown}\n                  placeholder=\"Search...\"\n                  className=\"h-auto flex-1 p-0\"\n                />\n              </div>\n              <CommandList className=\"max-h-full\">\n                <CommandEmpty>No options found.</CommandEmpty>\n                <CommandGroup className=\"max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden\">\n                  {options.map((option) => {\n                    const isSelected = selectedValues.includes(option.value);\n\n                    return (\n                      <CommandItem\n                        key={option.value}\n                        value={option.label}\n                        onSelect={() => onValueChange(option.value)}\n                      >\n                        <div\n                          className={cn(\n                            \"flex size-4 items-center justify-center rounded-sm border border-primary\",\n                            isSelected\n                              ? \"bg-primary text-primary-foreground\"\n                              : \"opacity-50 [&_svg]:invisible\",\n                          )}\n                        >\n                          <Check className=\"size-3\" />\n                        </div>\n                        <span>{option.label}</span>\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n                {selectedValues.length > 0 && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <CommandItem\n                        onSelect={clearAll}\n                        className=\"justify-center text-muted-foreground\"\n                      >\n                        Clear all\n                      </CommandItem>\n                    </CommandGroup>\n                  </>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {displayLabels.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleLabels.map((label, index) => (\n            <Badge\n              key={selectedValues[index]}\n              variant=\"secondary\"\n              className=\"h-5 shrink-0 px-1.5 text-xs\"\n            >\n              {label}\n            </Badge>\n          ))}\n          {hiddenBadgeCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenBadgeCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatDateForDisplay(dateStr: string) {\n  if (!dateStr) return \"\";\n  const date = new Date(dateStr);\n  return date.toLocaleDateString();\n}\n\nexport function DateCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  const selectedDate = value ? new Date(value) : undefined;\n\n  const onDateSelect = React.useCallback(\n    (date: Date | undefined) => {\n      if (!date) return;\n\n      const formattedDate = date.toISOString().split(\"T\")[0] ?? \"\";\n      setValue(formattedDate);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: formattedDate });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Popover open={isEditing} onOpenChange={onOpenChange}>\n        <PopoverAnchor asChild>\n          <span data-slot=\"grid-cell-content\">\n            {formatDateForDisplay(value)}\n          </span>\n        </PopoverAnchor>\n        {isEditing && (\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            alignOffset={-8}\n            className=\"w-auto p-0\"\n          >\n            <Calendar\n              autoFocus\n              captionLayout=\"dropdown\"\n              mode=\"single\"\n              defaultMonth={selectedDate ?? new Date()}\n              selected={selectedDate}\n              onSelect={onDateSelect}\n            />\n          </PopoverContent>\n        )}\n      </Popover>\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 B\";\n  const k = 1024;\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n}\n\nfunction getFileIcon(\n  type: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> {\n  if (type.startsWith(\"image/\")) return FileImage;\n  if (type.startsWith(\"video/\")) return FileVideo;\n  if (type.startsWith(\"audio/\")) return FileAudio;\n  if (type.includes(\"pdf\")) return FileText;\n  if (type.includes(\"zip\") || type.includes(\"rar\")) return FileArchive;\n  if (\n    type.includes(\"word\") ||\n    type.includes(\"document\") ||\n    type.includes(\"doc\")\n  )\n    return FileText;\n  if (type.includes(\"sheet\") || type.includes(\"excel\") || type.includes(\"xls\"))\n    return FileSpreadsheet;\n  if (\n    type.includes(\"presentation\") ||\n    type.includes(\"powerpoint\") ||\n    type.includes(\"ppt\")\n  )\n    return Presentation;\n  return File;\n}\n\nexport function FileCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as FileCellData[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const labelId = React.useId();\n  const descriptionId = React.useId();\n\n  const [files, setFiles] = React.useState<FileCellData[]>(cellValue);\n  const [uploadingFiles, setUploadingFiles] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const [isDraggingOver, setIsDraggingOver] = React.useState(false);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const dropzoneRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const fileCellOpts = cellOpts?.variant === \"file\" ? cellOpts : null;\n  const maxFileSize = fileCellOpts?.maxFileSize ?? 10 * 1024 * 1024;\n  const maxFiles = fileCellOpts?.maxFiles ?? 10;\n  const accept = fileCellOpts?.accept;\n  const multiple = fileCellOpts?.multiple ?? true;\n\n  const acceptedTypes = React.useMemo(\n    () => (accept ? accept.split(\",\").map((t) => t.trim()) : null),\n    [accept],\n  );\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setFiles(cellValue);\n    setError(null);\n  }\n\n  const validateFile = React.useCallback(\n    (file: File): string | null => {\n      if (maxFileSize && file.size > maxFileSize) {\n        return `File size exceeds ${formatFileSize(maxFileSize)}`;\n      }\n      if (acceptedTypes) {\n        const fileExtension = `.${file.name.split(\".\").pop()}`;\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.endsWith(\"/*\")) {\n            // Handle wildcard types like \"image/*\"\n            const baseType = type.slice(0, -2);\n            return file.type.startsWith(`${baseType}/`);\n          }\n          if (type.startsWith(\".\")) {\n            // Handle file extensions like \".pdf\"\n            return fileExtension.toLowerCase() === type.toLowerCase();\n          }\n          // Exact match for specific MIME types\n          return file.type === type;\n        });\n        if (!isAccepted) {\n          return `File type not accepted. Accepted: ${accept}`;\n        }\n      }\n      return null;\n    },\n    [maxFileSize, acceptedTypes, accept],\n  );\n\n  const addFiles = React.useCallback(\n    async (newFiles: File[], skipUpload = false) => {\n      setError(null);\n\n      // Check max files limit\n      if (maxFiles && files.length + newFiles.length > maxFiles) {\n        setError(`Maximum ${maxFiles} files allowed`);\n        return;\n      }\n\n      const validFiles: FileCellData[] = [];\n      let firstError: string | null = null;\n\n      for (const file of newFiles) {\n        const validationError = validateFile(file);\n        if (validationError) {\n          if (!firstError) {\n            firstError = validationError;\n          }\n          continue;\n        }\n\n        // Create file data object with temporary ID\n        const fileData: FileCellData = {\n          id: crypto.randomUUID(),\n          name: file.name,\n          size: file.size,\n          type: file.type,\n          url: URL.createObjectURL(file),\n        };\n        validFiles.push(fileData);\n      }\n\n      if (firstError) {\n        setError(firstError);\n      }\n\n      if (validFiles.length > 0) {\n        // If not skipping upload (dropped on cell), show skeletons first\n        if (!skipUpload) {\n          // Add temp files immediately (will show as skeletons)\n          const tempFiles = validFiles.map((f) => ({ ...f, url: undefined }));\n          const filesWithTemp = [...files, ...tempFiles];\n          setFiles(filesWithTemp);\n\n          // Mark as uploading\n          const uploadingIds = new Set(validFiles.map((f) => f.id));\n          setUploadingFiles(uploadingIds);\n\n          // Simulate upload delay (in real app, this would be actual upload)\n          await new Promise((resolve) => setTimeout(resolve, 800));\n\n          // Replace temp files with real ones\n          const finalFiles = filesWithTemp.map(\n            (f) => validFiles.find((vf) => vf.id === f.id) || f,\n          );\n          setFiles(finalFiles);\n          setUploadingFiles(new Set());\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: finalFiles });\n        } else {\n          // If from editor, add immediately without skeleton\n          const updatedFiles = [...files, ...validFiles];\n          setFiles(updatedFiles);\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n        }\n      }\n    },\n    [files, maxFiles, validateFile, meta, rowIndex, columnId],\n  );\n\n  const removeFile = React.useCallback(\n    (fileId: string) => {\n      setError(null);\n      // Revoke object URL to prevent memory leak\n      const fileToRemove = files.find((f) => f.id === fileId);\n      if (fileToRemove?.url) {\n        URL.revokeObjectURL(fileToRemove.url);\n      }\n      const updatedFiles = files.filter((f) => f.id !== fileId);\n      setFiles(updatedFiles);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n    },\n    [files, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    // Revoke all object URLs to prevent memory leak\n    for (const file of files) {\n      if (file.url) {\n        URL.revokeObjectURL(file.url);\n      }\n    }\n    setFiles([]);\n    setError(null);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n  }, [files, meta, rowIndex, columnId]);\n\n  const onDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setIsDragging(true);\n  }, []);\n\n  const onDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDragging(false);\n    }\n  }, []);\n\n  const onDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      addFiles(droppedFiles, true); // Skip upload skeleton in editor\n    },\n    [addFiles],\n  );\n\n  const onFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const selectedFiles = Array.from(event.target.files ?? []);\n      addFiles(selectedFiles, true); // Skip upload skeleton for manual selection\n      // Reset input so the same file can be selected again\n      event.target.value = \"\";\n    },\n    [addFiles],\n  );\n\n  // Cell-level drag handlers (for dropping directly on cell)\n  const onCellDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Only show drop indicator if dragging files\n    if (event.dataTransfer.types.includes(\"Files\")) {\n      setIsDraggingOver(true);\n    }\n  }, []);\n\n  const onCellDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDraggingOver(false);\n    }\n  }, []);\n\n  const onCellDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onCellDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDraggingOver(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      if (droppedFiles.length > 0) {\n        addFiles(droppedFiles, false); // Show skeleton for dropped files\n      }\n    },\n    [addFiles],\n  );\n\n  const onDropzoneClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const onDropzoneKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onDropzoneClick();\n      }\n    },\n    [onDropzoneClick],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setError(null);\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onEscapeKeyDown: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onEscapeKeyDown\"]\n  > = React.useCallback((event) => {\n    // Prevent the escape key from propagating to the data grid's keyboard handler\n    // which would call blurCell() and remove focus from the cell\n    event.stopPropagation();\n  }, []);\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    // Focus the dropzone for better keyboard UX - users can press Enter again to open file dialog\n    queueMicrotask(() => {\n      dropzoneRef.current?.focus();\n    });\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          setFiles(cellValue);\n          setError(null);\n          meta?.onCellEditingStop?.();\n        } else if (event.key === \" \") {\n          event.preventDefault();\n          onDropzoneClick();\n        }\n      } else if (isFocused && event.key === \"Enter\") {\n        // Handle Enter key to start editing when focused but not editing\n        event.preventDefault();\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [\n      isEditing,\n      isFocused,\n      cellValue,\n      meta,\n      onDropzoneClick,\n      rowIndex,\n      columnId,\n    ],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const file of files) {\n        if (file.url) {\n          URL.revokeObjectURL(file.url);\n        }\n      }\n    };\n  }, [files]);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } =\n    useBadgeOverflow({\n      items: files,\n      getLabel: (file) => file.name,\n      containerRef,\n      lineCount,\n      cacheKeyPrefix: \"file\",\n      iconSize: 12,\n      maxWidth: 100,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className={cn({\n        \"ring-1 ring-primary/80 ring-inset\": isDraggingOver,\n      })}\n      onDragEnter={onCellDragEnter}\n      onDragLeave={onCellDragLeave}\n      onDragOver={onCellDragOver}\n      onDrop={onCellDrop}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[400px] rounded-none p-0\"\n            onEscapeKeyDown={onEscapeKeyDown}\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <div className=\"flex flex-col gap-2 p-3\">\n              <span id={labelId} className=\"sr-only\">\n                File upload\n              </span>\n              <div\n                role=\"region\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                aria-invalid={!!error}\n                data-dragging={isDragging ? \"\" : undefined}\n                data-invalid={error ? \"\" : undefined}\n                tabIndex={isDragging ? -1 : 0}\n                className=\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20\"\n                ref={dropzoneRef}\n                onClick={onDropzoneClick}\n                onDragEnter={onDragEnter}\n                onDragLeave={onDragLeave}\n                onDragOver={onDragOver}\n                onDrop={onDrop}\n                onKeyDown={onDropzoneKeyDown}\n              >\n                <Upload className=\"size-8 text-muted-foreground\" />\n                <div className=\"text-center text-sm\">\n                  <p className=\"font-medium\">\n                    {isDragging ? \"Drop files here\" : \"Drag files here\"}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    or click to browse\n                  </p>\n                </div>\n                <p id={descriptionId} className=\"text-muted-foreground text-xs\">\n                  {maxFileSize\n                    ? `Max size: ${formatFileSize(maxFileSize)}${maxFiles ? ` • Max ${maxFiles} files` : \"\"}`\n                    : maxFiles\n                      ? `Max ${maxFiles} files`\n                      : \"Select files to upload\"}\n                </p>\n              </div>\n              <input\n                type=\"file\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                multiple={multiple}\n                accept={accept}\n                className=\"sr-only\"\n                ref={fileInputRef}\n                onChange={onFileInputChange}\n              />\n              {error && (\n                <div className=\"rounded-md bg-destructive/10 px-3 py-2 text-destructive text-xs\">\n                  {error}\n                </div>\n              )}\n              {files.length > 0 && (\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <p className=\"font-medium text-muted-foreground text-xs\">\n                      {files.length} {files.length === 1 ? \"file\" : \"files\"}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-6 text-muted-foreground text-xs\"\n                      onClick={clearAll}\n                    >\n                      Clear all\n                    </Button>\n                  </div>\n                  <div className=\"max-h-[200px] space-y-1 overflow-y-auto\">\n                    {files.map((file) => {\n                      const FileIcon = getFileIcon(file.type);\n\n                      return (\n                        <div\n                          key={file.id}\n                          className=\"flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1.5\"\n                        >\n                          {FileIcon && (\n                            <FileIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n                          )}\n                          <div className=\"flex-1 overflow-hidden\">\n                            <p className=\"truncate text-sm\">{file.name}</p>\n                            <p className=\"text-muted-foreground text-xs\">\n                              {formatFileSize(file.size)}\n                            </p>\n                          </div>\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            className=\"size-5 rounded-sm\"\n                            onClick={() => removeFile(file.id)}\n                          >\n                            <X className=\"size-3\" />\n                          </Button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {isDraggingOver ? (\n        <div className=\"flex items-center justify-center gap-2 text-primary text-sm\">\n          <Upload className=\"size-4\" />\n          <span>Drop files here</span>\n        </div>\n      ) : files.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleFiles.map((file) => {\n            const isUploading = uploadingFiles.has(file.id);\n\n            if (isUploading) {\n              // Show skeleton for uploading files\n              return (\n                <Skeleton\n                  key={file.id}\n                  className=\"h-5 shrink-0 px-1.5\"\n                  style={{\n                    width: `${Math.min(file.name.length * 8 + 30, 100)}px`,\n                  }}\n                />\n              );\n            }\n\n            return (\n              <Badge\n                key={file.id}\n                variant=\"secondary\"\n                className=\"h-5 shrink-0 gap-1 px-1.5 text-xs\"\n              >\n                {React.createElement(getFileIcon(file.type), {\n                  className: \"size-3 shrink-0\",\n                })}\n                <span className=\"max-w-[100px] truncate\">{file.name}</span>\n              </Badge>\n            );\n          })}\n          {hiddenFileCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenFileCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n",
       "type": "registry:component",
       "target": "src/components/data-grid/data-grid-cell-variants.tsx"
     },
     {
       "path": "src/components/data-grid/data-grid-column-header.tsx",
-      "content": "\"use client\";\n\nimport type {\n  ColumnSort,\n  Header,\n  SortDirection,\n  SortingState,\n  Table,\n} from \"@tanstack/react-table\";\nimport {\n  BaselineIcon,\n  CalendarIcon,\n  CheckSquareIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n  EyeOffIcon,\n  FileIcon,\n  HashIcon,\n  LinkIcon,\n  ListChecksIcon,\n  ListIcon,\n  PinIcon,\n  PinOffIcon,\n  TextInitialIcon,\n  XIcon,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport type { Cell } from \"@/types/data-grid\";\n\nfunction getColumnVariant(variant?: Cell[\"variant\"]): {\n  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;\n  label: string;\n} | null {\n  switch (variant) {\n    case \"short-text\":\n      return { icon: BaselineIcon, label: \"Short text\" };\n    case \"long-text\":\n      return { icon: TextInitialIcon, label: \"Long text\" };\n    case \"number\":\n      return { icon: HashIcon, label: \"Number\" };\n    case \"select\":\n      return { icon: ListIcon, label: \"Select\" };\n    case \"multi-select\":\n      return { icon: ListChecksIcon, label: \"Multi-select\" };\n    case \"checkbox\":\n      return { icon: CheckSquareIcon, label: \"Checkbox\" };\n    case \"date\":\n      return { icon: CalendarIcon, label: \"Date\" };\n    case \"url\":\n      return { icon: LinkIcon, label: \"URL\" };\n    case \"file\":\n      return { icon: FileIcon, label: \"File\" };\n    default:\n      return null;\n  }\n}\n\ninterface DataGridColumnHeaderProps<TData, TValue>\n  extends React.ComponentProps<typeof DropdownMenuTrigger> {\n  header: Header<TData, TValue>;\n  table: Table<TData>;\n}\n\nexport function DataGridColumnHeader<TData, TValue>({\n  header,\n  table,\n  className,\n  onPointerDown,\n  ...props\n}: DataGridColumnHeaderProps<TData, TValue>) {\n  const column = header.column;\n  const label = column.columnDef.meta?.label\n    ? column.columnDef.meta.label\n    : typeof column.columnDef.header === \"string\"\n      ? column.columnDef.header\n      : column.id;\n\n  const isAnyColumnResizing =\n    table.getState().columnSizingInfo.isResizingColumn;\n\n  const cellVariant = column.columnDef.meta?.cell;\n  const columnVariant = getColumnVariant(cellVariant?.variant);\n\n  const pinnedPosition = column.getIsPinned();\n  const isPinnedLeft = pinnedPosition === \"left\";\n  const isPinnedRight = pinnedPosition === \"right\";\n\n  const onSortingChange = React.useCallback(\n    (direction: SortDirection) => {\n      table.setSorting((prev: SortingState) => {\n        const existingSortIndex = prev.findIndex(\n          (sort) => sort.id === column.id,\n        );\n        const newSort: ColumnSort = {\n          id: column.id,\n          desc: direction === \"desc\",\n        };\n\n        if (existingSortIndex >= 0) {\n          const updated = [...prev];\n          updated[existingSortIndex] = newSort;\n          return updated;\n        } else {\n          return [...prev, newSort];\n        }\n      });\n    },\n    [column.id, table],\n  );\n\n  const onSortRemove = React.useCallback(() => {\n    table.setSorting((prev: SortingState) =>\n      prev.filter((sort) => sort.id !== column.id),\n    );\n  }, [column.id, table]);\n\n  const onLeftPin = React.useCallback(() => {\n    column.pin(\"left\");\n  }, [column]);\n\n  const onRightPin = React.useCallback(() => {\n    column.pin(\"right\");\n  }, [column]);\n\n  const onUnpin = React.useCallback(() => {\n    column.pin(false);\n  }, [column]);\n\n  const onTriggerPointerDown = React.useCallback(\n    (event: React.PointerEvent<HTMLButtonElement>) => {\n      onPointerDown?.(event);\n      if (event.defaultPrevented) return;\n\n      if (event.button !== 0) {\n        return;\n      }\n      table.options.meta?.onColumnClick?.(column.id);\n    },\n    [table.options.meta, column.id, onPointerDown],\n  );\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          className={cn(\n            \"flex size-full items-center justify-between gap-2 p-2 text-sm hover:bg-accent/40 data-[state=open]:bg-accent/40 [&_svg]:size-4\",\n            isAnyColumnResizing && \"pointer-events-none\",\n            className,\n          )}\n          onPointerDown={onTriggerPointerDown}\n          {...props}\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-1.5\">\n            {columnVariant && (\n              <Tooltip delayDuration={100}>\n                <TooltipTrigger asChild>\n                  <columnVariant.icon className=\"size-3.5 shrink-0 text-muted-foreground\" />\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  <p>{columnVariant.label}</p>\n                </TooltipContent>\n              </Tooltip>\n            )}\n            <span className=\"truncate\">{label}</span>\n          </div>\n          <ChevronDownIcon className=\"shrink-0 text-muted-foreground\" />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" sideOffset={0} className=\"w-60\">\n          {column.getCanSort() && (\n            <>\n              <DropdownMenuCheckboxItem\n                className=\"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n                checked={column.getIsSorted() === \"asc\"}\n                onClick={() => onSortingChange(\"asc\")}\n              >\n                <ChevronUpIcon />\n                Sort asc\n              </DropdownMenuCheckboxItem>\n              <DropdownMenuCheckboxItem\n                className=\"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n                checked={column.getIsSorted() === \"desc\"}\n                onClick={() => onSortingChange(\"desc\")}\n              >\n                <ChevronDownIcon />\n                Sort desc\n              </DropdownMenuCheckboxItem>\n              {column.getIsSorted() && (\n                <DropdownMenuItem onClick={onSortRemove}>\n                  <XIcon />\n                  Remove sort\n                </DropdownMenuItem>\n              )}\n            </>\n          )}\n          {column.getCanPin() && (\n            <>\n              {column.getCanSort() && <DropdownMenuSeparator />}\n\n              {isPinnedLeft ? (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onUnpin}\n                >\n                  <PinOffIcon />\n                  Unpin from left\n                </DropdownMenuItem>\n              ) : (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onLeftPin}\n                >\n                  <PinIcon />\n                  Pin to left\n                </DropdownMenuItem>\n              )}\n              {isPinnedRight ? (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onUnpin}\n                >\n                  <PinOffIcon />\n                  Unpin from right\n                </DropdownMenuItem>\n              ) : (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onRightPin}\n                >\n                  <PinIcon />\n                  Pin to right\n                </DropdownMenuItem>\n              )}\n            </>\n          )}\n          {column.getCanHide() && (\n            <>\n              <DropdownMenuSeparator />\n              <DropdownMenuCheckboxItem\n                className=\"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n                checked={!column.getIsVisible()}\n                onClick={() => column.toggleVisibility(false)}\n              >\n                <EyeOffIcon />\n                Hide column\n              </DropdownMenuCheckboxItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n      {header.column.getCanResize() && (\n        <DataGridColumnResizer header={header} table={table} label={label} />\n      )}\n    </>\n  );\n}\n\nconst DataGridColumnResizer = React.memo(\n  DataGridColumnResizerImpl,\n  (prev, next) => {\n    const prevColumn = prev.header.column;\n    const nextColumn = next.header.column;\n\n    if (\n      prevColumn.getIsResizing() !== nextColumn.getIsResizing() ||\n      prevColumn.getSize() !== nextColumn.getSize()\n    ) {\n      return false;\n    }\n\n    if (prev.label !== next.label) return false;\n\n    return true;\n  },\n) as typeof DataGridColumnResizerImpl;\n\ninterface DataGridColumnResizerProps<TData, TValue>\n  extends DataGridColumnHeaderProps<TData, TValue> {\n  label: string;\n}\n\nfunction DataGridColumnResizerImpl<TData, TValue>({\n  header,\n  table,\n  label,\n}: DataGridColumnResizerProps<TData, TValue>) {\n  const defaultColumnDef = table._getDefaultColumnDef();\n\n  const onDoubleClick = React.useCallback(() => {\n    header.column.resetSize();\n  }, [header.column]);\n\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label={`Resize ${label} column`}\n      aria-valuenow={header.column.getSize()}\n      aria-valuemin={defaultColumnDef.minSize}\n      aria-valuemax={defaultColumnDef.maxSize}\n      tabIndex={0}\n      className={cn(\n        \"after:-translate-x-1/2 -right-px absolute top-0 z-50 h-full w-0.5 cursor-ew-resize touch-none select-none bg-border transition-opacity after:absolute after:inset-y-0 after:left-1/2 after:h-full after:w-[18px] after:content-[''] hover:bg-primary focus:bg-primary focus:outline-none\",\n        header.column.getIsResizing()\n          ? \"bg-primary\"\n          : \"opacity-0 hover:opacity-100\",\n      )}\n      onDoubleClick={onDoubleClick}\n      onMouseDown={header.getResizeHandler()}\n      onTouchStart={header.getResizeHandler()}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type {\n  ColumnSort,\n  Header,\n  SortDirection,\n  SortingState,\n  Table,\n} from \"@tanstack/react-table\";\nimport {\n  BaselineIcon,\n  CalendarIcon,\n  CheckSquareIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n  EyeOffIcon,\n  FileIcon,\n  HashIcon,\n  LinkIcon,\n  ListChecksIcon,\n  ListIcon,\n  PinIcon,\n  PinOffIcon,\n  TextInitialIcon,\n  XIcon,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport type { CellOpts } from \"@/types/data-grid\";\n\nfunction getColumnVariant(variant?: CellOpts[\"variant\"]): {\n  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;\n  label: string;\n} | null {\n  switch (variant) {\n    case \"short-text\":\n      return { icon: BaselineIcon, label: \"Short text\" };\n    case \"long-text\":\n      return { icon: TextInitialIcon, label: \"Long text\" };\n    case \"number\":\n      return { icon: HashIcon, label: \"Number\" };\n    case \"url\":\n      return { icon: LinkIcon, label: \"URL\" };\n    case \"checkbox\":\n      return { icon: CheckSquareIcon, label: \"Checkbox\" };\n    case \"select\":\n      return { icon: ListIcon, label: \"Select\" };\n    case \"multi-select\":\n      return { icon: ListChecksIcon, label: \"Multi-select\" };\n    case \"date\":\n      return { icon: CalendarIcon, label: \"Date\" };\n    case \"file\":\n      return { icon: FileIcon, label: \"File\" };\n    default:\n      return null;\n  }\n}\n\ninterface DataGridColumnHeaderProps<TData, TValue>\n  extends React.ComponentProps<typeof DropdownMenuTrigger> {\n  header: Header<TData, TValue>;\n  table: Table<TData>;\n}\n\nexport function DataGridColumnHeader<TData, TValue>({\n  header,\n  table,\n  className,\n  onPointerDown,\n  ...props\n}: DataGridColumnHeaderProps<TData, TValue>) {\n  const column = header.column;\n  const label = column.columnDef.meta?.label\n    ? column.columnDef.meta.label\n    : typeof column.columnDef.header === \"string\"\n      ? column.columnDef.header\n      : column.id;\n\n  const isAnyColumnResizing =\n    table.getState().columnSizingInfo.isResizingColumn;\n\n  const cellVariant = column.columnDef.meta?.cell;\n  const columnVariant = getColumnVariant(cellVariant?.variant);\n\n  const pinnedPosition = column.getIsPinned();\n  const isPinnedLeft = pinnedPosition === \"left\";\n  const isPinnedRight = pinnedPosition === \"right\";\n\n  const onSortingChange = React.useCallback(\n    (direction: SortDirection) => {\n      table.setSorting((prev: SortingState) => {\n        const existingSortIndex = prev.findIndex(\n          (sort) => sort.id === column.id,\n        );\n        const newSort: ColumnSort = {\n          id: column.id,\n          desc: direction === \"desc\",\n        };\n\n        if (existingSortIndex >= 0) {\n          const updated = [...prev];\n          updated[existingSortIndex] = newSort;\n          return updated;\n        } else {\n          return [...prev, newSort];\n        }\n      });\n    },\n    [column.id, table],\n  );\n\n  const onSortRemove = React.useCallback(() => {\n    table.setSorting((prev: SortingState) =>\n      prev.filter((sort) => sort.id !== column.id),\n    );\n  }, [column.id, table]);\n\n  const onLeftPin = React.useCallback(() => {\n    column.pin(\"left\");\n  }, [column]);\n\n  const onRightPin = React.useCallback(() => {\n    column.pin(\"right\");\n  }, [column]);\n\n  const onUnpin = React.useCallback(() => {\n    column.pin(false);\n  }, [column]);\n\n  const onTriggerPointerDown = React.useCallback(\n    (event: React.PointerEvent<HTMLButtonElement>) => {\n      onPointerDown?.(event);\n      if (event.defaultPrevented) return;\n\n      if (event.button !== 0) {\n        return;\n      }\n      table.options.meta?.onColumnClick?.(column.id);\n    },\n    [table.options.meta, column.id, onPointerDown],\n  );\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          className={cn(\n            \"flex size-full items-center justify-between gap-2 p-2 text-sm hover:bg-accent/40 data-[state=open]:bg-accent/40 [&_svg]:size-4\",\n            isAnyColumnResizing && \"pointer-events-none\",\n            className,\n          )}\n          onPointerDown={onTriggerPointerDown}\n          {...props}\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-1.5\">\n            {columnVariant && (\n              <Tooltip delayDuration={100}>\n                <TooltipTrigger asChild>\n                  <columnVariant.icon className=\"size-3.5 shrink-0 text-muted-foreground\" />\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  <p>{columnVariant.label}</p>\n                </TooltipContent>\n              </Tooltip>\n            )}\n            <span className=\"truncate\">{label}</span>\n          </div>\n          <ChevronDownIcon className=\"shrink-0 text-muted-foreground\" />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" sideOffset={0} className=\"w-60\">\n          {column.getCanSort() && (\n            <>\n              <DropdownMenuCheckboxItem\n                className=\"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n                checked={column.getIsSorted() === \"asc\"}\n                onClick={() => onSortingChange(\"asc\")}\n              >\n                <ChevronUpIcon />\n                Sort asc\n              </DropdownMenuCheckboxItem>\n              <DropdownMenuCheckboxItem\n                className=\"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n                checked={column.getIsSorted() === \"desc\"}\n                onClick={() => onSortingChange(\"desc\")}\n              >\n                <ChevronDownIcon />\n                Sort desc\n              </DropdownMenuCheckboxItem>\n              {column.getIsSorted() && (\n                <DropdownMenuItem onClick={onSortRemove}>\n                  <XIcon />\n                  Remove sort\n                </DropdownMenuItem>\n              )}\n            </>\n          )}\n          {column.getCanPin() && (\n            <>\n              {column.getCanSort() && <DropdownMenuSeparator />}\n\n              {isPinnedLeft ? (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onUnpin}\n                >\n                  <PinOffIcon />\n                  Unpin from left\n                </DropdownMenuItem>\n              ) : (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onLeftPin}\n                >\n                  <PinIcon />\n                  Pin to left\n                </DropdownMenuItem>\n              )}\n              {isPinnedRight ? (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onUnpin}\n                >\n                  <PinOffIcon />\n                  Unpin from right\n                </DropdownMenuItem>\n              ) : (\n                <DropdownMenuItem\n                  className=\"[&_svg]:text-muted-foreground\"\n                  onClick={onRightPin}\n                >\n                  <PinIcon />\n                  Pin to right\n                </DropdownMenuItem>\n              )}\n            </>\n          )}\n          {column.getCanHide() && (\n            <>\n              <DropdownMenuSeparator />\n              <DropdownMenuCheckboxItem\n                className=\"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n                checked={!column.getIsVisible()}\n                onClick={() => column.toggleVisibility(false)}\n              >\n                <EyeOffIcon />\n                Hide column\n              </DropdownMenuCheckboxItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n      {header.column.getCanResize() && (\n        <DataGridColumnResizer header={header} table={table} label={label} />\n      )}\n    </>\n  );\n}\n\nconst DataGridColumnResizer = React.memo(\n  DataGridColumnResizerImpl,\n  (prev, next) => {\n    const prevColumn = prev.header.column;\n    const nextColumn = next.header.column;\n\n    if (\n      prevColumn.getIsResizing() !== nextColumn.getIsResizing() ||\n      prevColumn.getSize() !== nextColumn.getSize()\n    ) {\n      return false;\n    }\n\n    if (prev.label !== next.label) return false;\n\n    return true;\n  },\n) as typeof DataGridColumnResizerImpl;\n\ninterface DataGridColumnResizerProps<TData, TValue>\n  extends DataGridColumnHeaderProps<TData, TValue> {\n  label: string;\n}\n\nfunction DataGridColumnResizerImpl<TData, TValue>({\n  header,\n  table,\n  label,\n}: DataGridColumnResizerProps<TData, TValue>) {\n  const defaultColumnDef = table._getDefaultColumnDef();\n\n  const onDoubleClick = React.useCallback(() => {\n    header.column.resetSize();\n  }, [header.column]);\n\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label={`Resize ${label} column`}\n      aria-valuenow={header.column.getSize()}\n      aria-valuemin={defaultColumnDef.minSize}\n      aria-valuemax={defaultColumnDef.maxSize}\n      tabIndex={0}\n      className={cn(\n        \"after:-translate-x-1/2 -right-px absolute top-0 z-50 h-full w-0.5 cursor-ew-resize touch-none select-none bg-border transition-opacity after:absolute after:inset-y-0 after:left-1/2 after:h-full after:w-[18px] after:content-[''] hover:bg-primary focus:bg-primary focus:outline-none\",\n        header.column.getIsResizing()\n          ? \"bg-primary\"\n          : \"opacity-0 hover:opacity-100\",\n      )}\n      onDoubleClick={onDoubleClick}\n      onMouseDown={header.getResizeHandler()}\n      onTouchStart={header.getResizeHandler()}\n    />\n  );\n}\n",
       "type": "registry:component",
       "target": "src/components/data-grid/data-grid-column-header.tsx"
     },
@@ -106,7 +106,7 @@
     },
     {
       "path": "src/types/data-grid.ts",
-      "content": "import type { RowData } from \"@tanstack/react-table\";\n\nexport type RowHeightValue = \"short\" | \"medium\" | \"tall\" | \"extra-tall\";\n\nexport interface CellSelectOption {\n  label: string;\n  value: string;\n}\n\nexport type Cell =\n  | {\n      variant: \"short-text\";\n    }\n  | {\n      variant: \"long-text\";\n    }\n  | {\n      variant: \"number\";\n      min?: number;\n      max?: number;\n      step?: number;\n    }\n  | {\n      variant: \"select\";\n      options: CellSelectOption[];\n    }\n  | {\n      variant: \"multi-select\";\n      options: CellSelectOption[];\n    }\n  | {\n      variant: \"checkbox\";\n    }\n  | {\n      variant: \"date\";\n    }\n  | {\n      variant: \"url\";\n    }\n  | {\n      variant: \"file\";\n      maxFileSize?: number;\n      maxFiles?: number;\n      accept?: string;\n      multiple?: boolean;\n    };\n\nexport interface UpdateCell {\n  rowIndex: number;\n  columnId: string;\n  value: unknown;\n}\n\ndeclare module \"@tanstack/react-table\" {\n  // biome-ignore lint/correctness/noUnusedVariables: TData and TValue are used in the ColumnMeta interface\n  interface ColumnMeta<TData extends RowData, TValue> {\n    label?: string;\n    cell?: Cell;\n  }\n\n  // biome-ignore lint/correctness/noUnusedVariables: TData is used in the TableMeta interface\n  interface TableMeta<TData extends RowData> {\n    dataGridRef?: React.RefObject<HTMLElement | null>;\n    cellMapRef?: React.RefObject<Map<string, HTMLDivElement>>;\n    focusedCell?: CellPosition | null;\n    editingCell?: CellPosition | null;\n    selectionState?: SelectionState;\n    searchOpen?: boolean;\n    isScrolling?: boolean;\n    getIsCellSelected?: (rowIndex: number, columnId: string) => boolean;\n    getIsSearchMatch?: (rowIndex: number, columnId: string) => boolean;\n    getIsActiveSearchMatch?: (rowIndex: number, columnId: string) => boolean;\n    onDataUpdate?: (props: UpdateCell | Array<UpdateCell>) => void;\n    onRowsDelete?: (rowIndices: number[]) => void | Promise<void>;\n    onColumnClick?: (columnId: string) => void;\n    onCellClick?: (\n      rowIndex: number,\n      columnId: string,\n      event?: React.MouseEvent,\n    ) => void;\n    onCellDoubleClick?: (rowIndex: number, columnId: string) => void;\n    onCellMouseDown?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent,\n    ) => void;\n    onCellMouseEnter?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent,\n    ) => void;\n    onCellMouseUp?: () => void;\n    onCellContextMenu?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent,\n    ) => void;\n    onCellEditingStart?: (rowIndex: number, columnId: string) => void;\n    onCellEditingStop?: (opts?: {\n      direction?: NavigationDirection;\n      moveToNextRow?: boolean;\n    }) => void;\n    contextMenu?: ContextMenuState;\n    onContextMenuOpenChange?: (open: boolean) => void;\n    rowHeight?: RowHeightValue;\n    onRowHeightChange?: (value: RowHeightValue) => void;\n    onRowSelect?: (\n      rowIndex: number,\n      checked: boolean,\n      shiftKey: boolean,\n    ) => void;\n  }\n}\n\nexport interface CellPosition {\n  rowIndex: number;\n  columnId: string;\n}\n\nexport interface CellRange {\n  start: CellPosition;\n  end: CellPosition;\n}\n\nexport interface SelectionState {\n  selectedCells: Set<string>;\n  selectionRange: CellRange | null;\n  isSelecting: boolean;\n}\n\nexport interface ContextMenuState {\n  open: boolean;\n  x: number;\n  y: number;\n}\n\nexport type NavigationDirection =\n  | \"up\"\n  | \"down\"\n  | \"left\"\n  | \"right\"\n  | \"home\"\n  | \"end\"\n  | \"ctrl+home\"\n  | \"ctrl+end\"\n  | \"pageup\"\n  | \"pagedown\";\n\nexport interface SearchState {\n  searchMatches: CellPosition[];\n  matchIndex: number;\n  searchOpen: boolean;\n  onSearchOpenChange: (open: boolean) => void;\n  searchQuery: string;\n  onSearchQueryChange: (query: string) => void;\n  onSearch: (query: string) => void;\n  onNavigateToNextMatch: () => void;\n  onNavigateToPrevMatch: () => void;\n}\n\nexport interface FileCellData {\n  id: string;\n  name: string;\n  size: number;\n  type: string;\n  url?: string;\n}\n",
+      "content": "import type { Cell, RowData, Table } from \"@tanstack/react-table\";\n\nexport type RowHeightValue = \"short\" | \"medium\" | \"tall\" | \"extra-tall\";\n\nexport interface CellSelectOption {\n  label: string;\n  value: string;\n}\n\nexport type CellOpts =\n  | {\n      variant: \"short-text\";\n    }\n  | {\n      variant: \"long-text\";\n    }\n  | {\n      variant: \"number\";\n      min?: number;\n      max?: number;\n      step?: number;\n    }\n  | {\n      variant: \"select\";\n      options: CellSelectOption[];\n    }\n  | {\n      variant: \"multi-select\";\n      options: CellSelectOption[];\n    }\n  | {\n      variant: \"checkbox\";\n    }\n  | {\n      variant: \"date\";\n    }\n  | {\n      variant: \"url\";\n    }\n  | {\n      variant: \"file\";\n      maxFileSize?: number;\n      maxFiles?: number;\n      accept?: string;\n      multiple?: boolean;\n    };\n\nexport interface UpdateCell {\n  rowIndex: number;\n  columnId: string;\n  value: unknown;\n}\n\ndeclare module \"@tanstack/react-table\" {\n  // biome-ignore lint/correctness/noUnusedVariables: TData and TValue are used in the ColumnMeta interface\n  interface ColumnMeta<TData extends RowData, TValue> {\n    label?: string;\n    cell?: CellOpts;\n  }\n\n  // biome-ignore lint/correctness/noUnusedVariables: TData is used in the TableMeta interface\n  interface TableMeta<TData extends RowData> {\n    dataGridRef?: React.RefObject<HTMLElement | null>;\n    cellMapRef?: React.RefObject<Map<string, HTMLDivElement>>;\n    focusedCell?: CellPosition | null;\n    editingCell?: CellPosition | null;\n    selectionState?: SelectionState;\n    searchOpen?: boolean;\n    isScrolling?: boolean;\n    getIsCellSelected?: (rowIndex: number, columnId: string) => boolean;\n    getIsSearchMatch?: (rowIndex: number, columnId: string) => boolean;\n    getIsActiveSearchMatch?: (rowIndex: number, columnId: string) => boolean;\n    onDataUpdate?: (props: UpdateCell | Array<UpdateCell>) => void;\n    onRowsDelete?: (rowIndices: number[]) => void | Promise<void>;\n    onColumnClick?: (columnId: string) => void;\n    onCellClick?: (\n      rowIndex: number,\n      columnId: string,\n      event?: React.MouseEvent,\n    ) => void;\n    onCellDoubleClick?: (rowIndex: number, columnId: string) => void;\n    onCellMouseDown?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent,\n    ) => void;\n    onCellMouseEnter?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent,\n    ) => void;\n    onCellMouseUp?: () => void;\n    onCellContextMenu?: (\n      rowIndex: number,\n      columnId: string,\n      event: React.MouseEvent,\n    ) => void;\n    onCellEditingStart?: (rowIndex: number, columnId: string) => void;\n    onCellEditingStop?: (opts?: {\n      direction?: NavigationDirection;\n      moveToNextRow?: boolean;\n    }) => void;\n    contextMenu?: ContextMenuState;\n    onContextMenuOpenChange?: (open: boolean) => void;\n    rowHeight?: RowHeightValue;\n    onRowHeightChange?: (value: RowHeightValue) => void;\n    onRowSelect?: (\n      rowIndex: number,\n      checked: boolean,\n      shiftKey: boolean,\n    ) => void;\n  }\n}\n\nexport interface CellPosition {\n  rowIndex: number;\n  columnId: string;\n}\n\nexport interface CellRange {\n  start: CellPosition;\n  end: CellPosition;\n}\n\nexport interface SelectionState {\n  selectedCells: Set<string>;\n  selectionRange: CellRange | null;\n  isSelecting: boolean;\n}\n\nexport interface ContextMenuState {\n  open: boolean;\n  x: number;\n  y: number;\n}\n\nexport type NavigationDirection =\n  | \"up\"\n  | \"down\"\n  | \"left\"\n  | \"right\"\n  | \"home\"\n  | \"end\"\n  | \"ctrl+home\"\n  | \"ctrl+end\"\n  | \"pageup\"\n  | \"pagedown\";\n\nexport interface SearchState {\n  searchMatches: CellPosition[];\n  matchIndex: number;\n  searchOpen: boolean;\n  onSearchOpenChange: (open: boolean) => void;\n  searchQuery: string;\n  onSearchQueryChange: (query: string) => void;\n  onSearch: (query: string) => void;\n  onNavigateToNextMatch: () => void;\n  onNavigateToPrevMatch: () => void;\n}\n\nexport interface CellVariantProps<TData> {\n  cell: Cell<TData, unknown>;\n  table: Table<TData>;\n  rowIndex: number;\n  columnId: string;\n  isEditing: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n}\n\nexport interface FileCellData {\n  id: string;\n  name: string;\n  size: number;\n  type: string;\n  url?: string;\n}\n",
       "type": "registry:file",
       "target": "src/types/data-grid.ts"
     }
diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index 6f239f6ac..a07baaeea 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import type { Cell, Table } from "@tanstack/react-table";
 import {
   Check,
   File,
@@ -47,17 +46,7 @@ import { useBadgeOverflow } from "@/hooks/use-badge-overflow";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { getCellKey, getLineCount } from "@/lib/data-grid";
 import { cn } from "@/lib/utils";
-import type { FileCellData } from "@/types/data-grid";
-
-interface CellVariantProps<TData> {
-  cell: Cell<TData, unknown>;
-  table: Table<TData>;
-  rowIndex: number;
-  columnId: string;
-  isEditing: boolean;
-  isFocused: boolean;
-  isSelected: boolean;
-}
+import type { CellVariantProps, FileCellData } from "@/types/data-grid";
 
 export function ShortTextCell<TData>({
   cell,
diff --git a/src/components/data-grid/data-grid-column-header.tsx b/src/components/data-grid/data-grid-column-header.tsx
index 96b8db038..e278dd873 100644
--- a/src/components/data-grid/data-grid-column-header.tsx
+++ b/src/components/data-grid/data-grid-column-header.tsx
@@ -40,9 +40,9 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import type { Cell } from "@/types/data-grid";
+import type { CellOpts } from "@/types/data-grid";
 
-function getColumnVariant(variant?: Cell["variant"]): {
+function getColumnVariant(variant?: CellOpts["variant"]): {
   icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
   label: string;
 } | null {
@@ -53,16 +53,16 @@ function getColumnVariant(variant?: Cell["variant"]): {
       return { icon: TextInitialIcon, label: "Long text" };
     case "number":
       return { icon: HashIcon, label: "Number" };
+    case "url":
+      return { icon: LinkIcon, label: "URL" };
+    case "checkbox":
+      return { icon: CheckSquareIcon, label: "Checkbox" };
     case "select":
       return { icon: ListIcon, label: "Select" };
     case "multi-select":
       return { icon: ListChecksIcon, label: "Multi-select" };
-    case "checkbox":
-      return { icon: CheckSquareIcon, label: "Checkbox" };
     case "date":
       return { icon: CalendarIcon, label: "Date" };
-    case "url":
-      return { icon: LinkIcon, label: "URL" };
     case "file":
       return { icon: FileIcon, label: "File" };
     default:
diff --git a/src/types/data-grid.ts b/src/types/data-grid.ts
index 6e3267ce7..9eb560df9 100644
--- a/src/types/data-grid.ts
+++ b/src/types/data-grid.ts
@@ -1,4 +1,4 @@
-import type { RowData } from "@tanstack/react-table";
+import type { Cell, RowData, Table } from "@tanstack/react-table";
 
 export type RowHeightValue = "short" | "medium" | "tall" | "extra-tall";
 
@@ -7,7 +7,7 @@ export interface CellSelectOption {
   value: string;
 }
 
-export type Cell =
+export type CellOpts =
   | {
       variant: "short-text";
     }
@@ -55,7 +55,7 @@ declare module "@tanstack/react-table" {
   // biome-ignore lint/correctness/noUnusedVariables: TData and TValue are used in the ColumnMeta interface
   interface ColumnMeta<TData extends RowData, TValue> {
     label?: string;
-    cell?: Cell;
+    cell?: CellOpts;
   }
 
   // biome-ignore lint/correctness/noUnusedVariables: TData is used in the TableMeta interface
@@ -158,6 +158,16 @@ export interface SearchState {
   onNavigateToPrevMatch: () => void;
 }
 
+export interface CellVariantProps<TData> {
+  cell: Cell<TData, unknown>;
+  table: Table<TData>;
+  rowIndex: number;
+  columnId: string;
+  isEditing: boolean;
+  isFocused: boolean;
+  isSelected: boolean;
+}
+
 export interface FileCellData {
   id: string;
   name: string;

From 577bc9112d1fedd7815daa7a28ca30c53618ebcb Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:01:04 +0600
Subject: [PATCH 04/17] fix: resolve URL cell re-rendering issue on each
 keystroke

- Added missing range.selectNodeContents() call in UrlCell useEffect
- This ensures proper cursor positioning without visual glitches
- Matches the working implementation in ShortTextCell
---
 src/components/data-grid/data-grid-cell-variants.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index a07baaeea..6b3dd99d6 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -661,6 +661,7 @@ export function UrlCell<TData>({
       if (cellRef.current.textContent) {
         const range = document.createRange();
         const selection = window.getSelection();
+        range.selectNodeContents(cellRef.current);
         range.collapse(false);
         selection?.removeAllRanges();
         selection?.addRange(range);

From e6cf8e69ec2336a64544a651651846b09b3d1e86 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:02:12 +0600
Subject: [PATCH 05/17] fix: remove extra trailing slash from normalized URLs

- Modified normalizeUrl to strip trailing slash when it's just the root path
- Preserves trailing slash if user explicitly includes it
- Prevents URLs like 'example.com' from becoming 'https://example.com/'
---
 src/components/data-grid/data-grid-cell-variants.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index 6b3dd99d6..0f325d0ea 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -481,12 +481,18 @@ function normalizeUrl(urlString: string): string {
   try {
     // Try parsing as-is first
     const url = new URL(trimmed);
-    return url.href;
+    // Remove trailing slash if it's just the root path
+    return url.pathname === "/" && !trimmed.endsWith("/")
+      ? url.href.slice(0, -1)
+      : url.href;
   } catch {
     // Try adding https:// prefix
     try {
       const url = new URL(`https://${trimmed}`);
-      return url.href;
+      // Remove trailing slash if it's just the root path
+      return url.pathname === "/" && !trimmed.endsWith("/")
+        ? url.href.slice(0, -1)
+        : url.href;
     } catch {
       // Return as-is if still invalid
       return trimmed;

From 0f60917f38b675388a5a98cefb01a16770364c17 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:08:27 +0600
Subject: [PATCH 06/17] refactor: simplify URL cell following Airtable pattern

- Remove URL validation and normalization on save
- Accept any text as URL without transformation
- Store exactly what user types (no trailing slashes added)
- Add http:// prefix only when rendering link href
- Remove invalid state and error UI
- Simpler, more predictable behavior
---
 .../data-grid/data-grid-cell-variants.tsx     | 117 +++---------------
 1 file changed, 16 insertions(+), 101 deletions(-)

diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index 0f325d0ea..4e1cb6f8b 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -455,49 +455,18 @@ export function NumberCell<TData>({
   );
 }
 
-function isValidUrl(urlString: string): boolean {
-  if (!urlString || urlString.trim() === "") return true; // Empty is valid (allows clearing)
-
-  try {
-    const url = new URL(urlString);
-    // Only allow http and https protocols
-    return url.protocol === "http:" || url.protocol === "https:";
-  } catch {
-    // Try adding https:// prefix if missing
-    try {
-      const url = new URL(`https://${urlString}`);
-      return url.protocol === "https:";
-    } catch {
-      return false;
-    }
-  }
-}
-
-function normalizeUrl(urlString: string): string {
+function getUrlHref(urlString: string): string {
   if (!urlString || urlString.trim() === "") return "";
 
   const trimmed = urlString.trim();
 
-  try {
-    // Try parsing as-is first
-    const url = new URL(trimmed);
-    // Remove trailing slash if it's just the root path
-    return url.pathname === "/" && !trimmed.endsWith("/")
-      ? url.href.slice(0, -1)
-      : url.href;
-  } catch {
-    // Try adding https:// prefix
-    try {
-      const url = new URL(`https://${trimmed}`);
-      // Remove trailing slash if it's just the root path
-      return url.pathname === "/" && !trimmed.endsWith("/")
-        ? url.href.slice(0, -1)
-        : url.href;
-    } catch {
-      // Return as-is if still invalid
-      return trimmed;
-    }
+  // Check if it already has a protocol
+  if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) {
+    return trimmed;
   }
+
+  // Add http:// prefix for links without protocol
+  return `http://${trimmed}`;
 }
 
 export function UrlCell<TData>({
@@ -511,7 +480,6 @@ export function UrlCell<TData>({
 }: CellVariantProps<TData>) {
   const initialValue = cell.getValue() as string;
   const [value, setValue] = React.useState(initialValue ?? "");
-  const [isInvalid, setIsInvalid] = React.useState(false);
   const cellRef = React.useRef<HTMLDivElement>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
   const meta = table.options.meta;
@@ -520,7 +488,6 @@ export function UrlCell<TData>({
   if (initialValue !== prevInitialValueRef.current) {
     prevInitialValueRef.current = initialValue;
     setValue(initialValue ?? "");
-    setIsInvalid(false);
     if (cellRef.current && !isEditing) {
       cellRef.current.textContent = initialValue ?? "";
     }
@@ -529,22 +496,11 @@ export function UrlCell<TData>({
   const onBlur = React.useCallback(() => {
     const currentValue = cellRef.current?.textContent?.trim() ?? "";
 
-    // Validate URL
-    if (currentValue && !isValidUrl(currentValue)) {
-      setIsInvalid(true);
-      return;
-    }
-
-    setIsInvalid(false);
-
-    // Normalize the URL (add https:// if needed)
-    const normalizedValue = normalizeUrl(currentValue);
-
-    if (normalizedValue !== initialValue) {
+    if (currentValue !== initialValue) {
       meta?.onDataUpdate?.({
         rowIndex,
         columnId,
-        value: normalizedValue || null,
+        value: currentValue || null,
       });
     }
     meta?.onCellEditingStop?.();
@@ -554,12 +510,8 @@ export function UrlCell<TData>({
     (event: React.FormEvent<HTMLDivElement>) => {
       const currentValue = event.currentTarget.textContent ?? "";
       setValue(currentValue);
-      // Clear invalid state while typing
-      if (isInvalid) {
-        setIsInvalid(false);
-      }
     },
-    [isInvalid],
+    [],
   );
 
   const onWrapperKeyDown = React.useCallback(
@@ -568,46 +520,22 @@ export function UrlCell<TData>({
         if (event.key === "Enter") {
           event.preventDefault();
           const currentValue = cellRef.current?.textContent?.trim() ?? "";
-
-          // Validate URL
-          if (currentValue && !isValidUrl(currentValue)) {
-            setIsInvalid(true);
-            return;
-          }
-
-          setIsInvalid(false);
-
-          // Normalize the URL
-          const normalizedValue = normalizeUrl(currentValue);
-
-          if (normalizedValue !== initialValue) {
+          if (currentValue !== initialValue) {
             meta?.onDataUpdate?.({
               rowIndex,
               columnId,
-              value: normalizedValue || null,
+              value: currentValue || null,
             });
           }
           meta?.onCellEditingStop?.({ moveToNextRow: true });
         } else if (event.key === "Tab") {
           event.preventDefault();
           const currentValue = cellRef.current?.textContent?.trim() ?? "";
-
-          // Validate URL
-          if (currentValue && !isValidUrl(currentValue)) {
-            setIsInvalid(true);
-            return;
-          }
-
-          setIsInvalid(false);
-
-          // Normalize the URL
-          const normalizedValue = normalizeUrl(currentValue);
-
-          if (normalizedValue !== initialValue) {
+          if (currentValue !== initialValue) {
             meta?.onDataUpdate?.({
               rowIndex,
               columnId,
-              value: normalizedValue || null,
+              value: currentValue || null,
             });
           }
           meta?.onCellEditingStop?.({
@@ -616,7 +544,6 @@ export function UrlCell<TData>({
         } else if (event.key === "Escape") {
           event.preventDefault();
           setValue(initialValue ?? "");
-          setIsInvalid(false);
           cellRef.current?.blur();
         }
       } else if (
@@ -627,7 +554,6 @@ export function UrlCell<TData>({
       ) {
         // Handle typing to pre-fill the value when editing starts
         setValue(event.key);
-        setIsInvalid(false);
 
         queueMicrotask(() => {
           if (cellRef.current && cellRef.current.contentEditable === "true") {
@@ -676,7 +602,6 @@ export function UrlCell<TData>({
   }, [isEditing, value]);
 
   const displayValue = !isEditing ? (value ?? "") : "";
-  const hasValidUrl = value && isValidUrl(value);
 
   return (
     <DataGridCellWrapper
@@ -689,9 +614,6 @@ export function UrlCell<TData>({
       isFocused={isFocused}
       isSelected={isSelected}
       onKeyDown={onWrapperKeyDown}
-      className={cn({
-        "ring-1 ring-destructive ring-inset": isInvalid,
-      })}
     >
       <div
         role="textbox"
@@ -710,9 +632,9 @@ export function UrlCell<TData>({
         {displayValue ? (
           isEditing ? (
             displayValue
-          ) : hasValidUrl ? (
+          ) : (
             <a
-              href={normalizeUrl(displayValue)}
+              href={getUrlHref(displayValue)}
               target="_blank"
               rel="noopener noreferrer"
               onClick={onLinkClick}
@@ -720,16 +642,9 @@ export function UrlCell<TData>({
             >
               {displayValue}
             </a>
-          ) : (
-            <span className="text-muted-foreground">{displayValue}</span>
           )
         ) : null}
       </div>
-      {isInvalid && (
-        <div className="absolute inset-x-0 bottom-0 bg-destructive px-1 py-0.5 text-[10px] text-destructive-foreground">
-          Invalid URL
-        </div>
-      )}
     </DataGridCellWrapper>
   );
 }

From 4938dbd49bc6c056d51015b07459daead69a4d82 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:10:13 +0600
Subject: [PATCH 07/17] fix: resolve URL cell text duplication issue

- Separate link element from contentEditable div
- When not editing: render <a> tag outside contentEditable div
- When editing: render contentEditable div for text input
- Prevents conflict between React rendering and manual textContent manipulation
- Fixes 'testtest' duplication bug when typing in focused cell
---
 .../data-grid/data-grid-cell-variants.tsx     | 59 +++++++++----------
 src/components/data-grid/data-grid-demo.tsx   |  2 +-
 2 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index 4e1cb6f8b..d0e9bd375 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -615,36 +615,35 @@ export function UrlCell<TData>({
       isSelected={isSelected}
       onKeyDown={onWrapperKeyDown}
     >
-      <div
-        role="textbox"
-        data-slot="grid-cell-content"
-        contentEditable={isEditing}
-        tabIndex={-1}
-        ref={cellRef}
-        onBlur={onBlur}
-        onInput={onInput}
-        suppressContentEditableWarning
-        className={cn("size-full overflow-hidden outline-none", {
-          "whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden":
-            isEditing,
-        })}
-      >
-        {displayValue ? (
-          isEditing ? (
-            displayValue
-          ) : (
-            <a
-              href={getUrlHref(displayValue)}
-              target="_blank"
-              rel="noopener noreferrer"
-              onClick={onLinkClick}
-              className="truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60"
-            >
-              {displayValue}
-            </a>
-          )
-        ) : null}
-      </div>
+      {!isEditing && displayValue ? (
+        <a
+          data-slot="grid-cell-content"
+          href={getUrlHref(displayValue)}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={onLinkClick}
+          className="block size-full truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60"
+        >
+          {displayValue}
+        </a>
+      ) : (
+        <div
+          role="textbox"
+          data-slot="grid-cell-content"
+          contentEditable={isEditing}
+          tabIndex={-1}
+          ref={cellRef}
+          onBlur={onBlur}
+          onInput={onInput}
+          suppressContentEditableWarning
+          className={cn("size-full overflow-hidden outline-none", {
+            "whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden":
+              isEditing,
+          })}
+        >
+          {displayValue}
+        </div>
+      )}
     </DataGridCellWrapper>
   );
 }
diff --git a/src/components/data-grid/data-grid-demo.tsx b/src/components/data-grid/data-grid-demo.tsx
index ab7e0b625..267ada18b 100644
--- a/src/components/data-grid/data-grid-demo.tsx
+++ b/src/components/data-grid/data-grid-demo.tsx
@@ -126,7 +126,7 @@ function generatePerson(id: number): Person {
     name: `${firstName} ${lastName}`,
     age: faker.number.int({ min: 22, max: 65 }),
     email: faker.internet.email({ firstName, lastName }).toLowerCase(),
-    website: faker.internet.url(),
+    website: faker.internet.url().replace(/\/$/, ""),
     notes: faker.helpers.arrayElement(notes),
     salary: faker.number.int({ min: 40000, max: 150000 }),
     department: faker.helpers.arrayElement(departments),

From bfd326f213584e20fee191cc63ff287094b692a9 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:11:39 +0600
Subject: [PATCH 08/17] fix: allow URL cell links to open in new tab

- Add stopPropagation() to link click handler
- Prevents grid event handlers from interfering with link navigation
- Links now properly open in new tab when clicked
---
 src/components/data-grid/data-grid-cell-variants.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index d0e9bd375..7c96c232e 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -577,7 +577,8 @@ export function UrlCell<TData>({
         event.preventDefault();
         return;
       }
-      // Let the link open naturally in a new tab
+      // Stop propagation to prevent grid from interfering with link navigation
+      event.stopPropagation();
     },
     [isEditing],
   );

From 9a5345dc3c08708e7d9c3e5fbc086fe76b49c204 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:13:07 +0600
Subject: [PATCH 09/17] fix: make only link text clickable, not entire cell

- Wrap link in container div instead of making link fill entire cell
- Link now only covers the text itself
- Clicking empty cell space focuses for editing
- Clicking link text opens URL in new tab
---
 .../data-grid/data-grid-cell-variants.tsx     | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index 7c96c232e..6973999c9 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -617,16 +617,17 @@ export function UrlCell<TData>({
       onKeyDown={onWrapperKeyDown}
     >
       {!isEditing && displayValue ? (
-        <a
-          data-slot="grid-cell-content"
-          href={getUrlHref(displayValue)}
-          target="_blank"
-          rel="noopener noreferrer"
-          onClick={onLinkClick}
-          className="block size-full truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60"
-        >
-          {displayValue}
-        </a>
+        <div data-slot="grid-cell-content" className="size-full overflow-hidden">
+          <a
+            href={getUrlHref(displayValue)}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={onLinkClick}
+            className="truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60"
+          >
+            {displayValue}
+          </a>
+        </div>
       ) : (
         <div
           role="textbox"

From 99d552b4cbd6f8ce7af4cbbd7bd3b88561207ca0 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:14:51 +0600
Subject: [PATCH 10/17] refactor: improve URL cell structure and behavior

---
 src/components/data-grid/data-grid-cell-variants.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index 6973999c9..5b218b22b 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -617,7 +617,10 @@ export function UrlCell<TData>({
       onKeyDown={onWrapperKeyDown}
     >
       {!isEditing && displayValue ? (
-        <div data-slot="grid-cell-content" className="size-full overflow-hidden">
+        <div
+          data-slot="grid-cell-content"
+          className="size-full overflow-hidden"
+        >
           <a
             href={getUrlHref(displayValue)}
             target="_blank"

From 53208f01d9afa57bb5f2ae7678673ad5baaae963 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:16:30 +0600
Subject: [PATCH 11/17] feat: highlight URL link when cell is focused

- Change link color to foreground when cell is focused
- Makes it more visible which link is currently focused
- Better visual feedback for keyboard navigation
---
 public/r/data-grid.json                              | 2 +-
 src/components/data-grid/data-grid-cell-variants.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/public/r/data-grid.json b/public/r/data-grid.json
index 25635987b..3005b2a03 100644
--- a/public/r/data-grid.json
+++ b/public/r/data-grid.json
@@ -46,7 +46,7 @@
     },
     {
       "path": "src/components/data-grid/data-grid-cell-variants.tsx",
-      "content": "\"use client\";\n\nimport {\n  Check,\n  File,\n  FileArchive,\n  FileAudio,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo,\n  Presentation,\n  Upload,\n  X,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { DataGridCellWrapper } from \"@/components/data-grid/data-grid-cell-wrapper\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { useBadgeOverflow } from \"@/hooks/use-badge-overflow\";\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getCellKey, getLineCount } from \"@/lib/data-grid\";\nimport { cn } from \"@/lib/utils\";\nimport type { CellVariantProps, FileCellData } from \"@/types/data-grid\";\n\nexport function ShortTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue;\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    // Read the current value directly from the DOM to avoid stale state\n    const currentValue = cellRef.current?.textContent ?? \"\";\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue}\n      </div>\n    </DataGridCellWrapper>\n  );\n}\n\nexport function LongTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  // Debounced auto-save (300ms delay)\n  const debouncedSave = useDebouncedCallback((newValue: string) => {\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n  }, 300);\n\n  const onSave = React.useCallback(() => {\n    // Immediately save any pending changes and close the popover\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onCancel = React.useCallback(() => {\n    // Restore the original value\n    setValue(initialValue ?? \"\");\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue });\n    meta?.onCellEditingStop?.();\n  }, [meta, initialValue, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        // Immediately save any pending changes when closing\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, value, initialValue, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    if (textareaRef.current) {\n      textareaRef.current.focus();\n      const length = textareaRef.current.value.length;\n      textareaRef.current.setSelectionRange(length, length);\n    }\n  }, []);\n\n  const onBlur = React.useCallback(() => {\n    // Immediately save any pending changes on blur\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      const newValue = event.target.value;\n      setValue(newValue);\n      // Debounced auto-save\n      debouncedSave(newValue);\n    },\n    [debouncedSave],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onCancel();\n      } else if (event.key === \"Enter\" && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        onSave();\n      } else if (event.key === \"Tab\") {\n        event.preventDefault();\n        // Save any pending changes\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n        return;\n      }\n      // Stop propagation to prevent grid navigation\n      event.stopPropagation();\n    },\n    [onSave, onCancel, value, initialValue, meta, rowIndex, columnId],\n  );\n\n  return (\n    <Popover open={isEditing} onOpenChange={onOpenChange}>\n      <PopoverAnchor asChild>\n        <DataGridCellWrapper\n          ref={containerRef}\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        >\n          <span data-slot=\"grid-cell-content\">{value}</span>\n        </DataGridCellWrapper>\n      </PopoverAnchor>\n      <PopoverContent\n        data-grid-cell-editor=\"\"\n        align=\"start\"\n        side=\"bottom\"\n        sideOffset={sideOffset}\n        className=\"w-[400px] rounded-none p-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n      >\n        <Textarea\n          placeholder=\"Enter text...\"\n          className=\"min-h-[150px] resize-none rounded-none border-0 shadow-none focus-visible:ring-0\"\n          ref={textareaRef}\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function NumberCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as number;\n  const [value, setValue] = React.useState(String(initialValue ?? \"\"));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const min = cellOpts?.variant === \"number\" ? cellOpts.min : undefined;\n  const max = cellOpts?.variant === \"number\" ? cellOpts.max : undefined;\n  const step = cellOpts?.variant === \"number\" ? cellOpts.step : undefined;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(String(initialValue ?? \"\"));\n  }\n\n  const onBlur = React.useCallback(() => {\n    const numValue = value === \"\" ? null : Number(value);\n    if (numValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue, value]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(String(initialValue ?? \"\"));\n          inputRef.current?.blur();\n        }\n      } else if (isFocused) {\n        // Handle Backspace to start editing with empty value\n        if (event.key === \"Backspace\") {\n          setValue(\"\");\n        } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n          // Handle typing to pre-fill the value when editing starts\n          setValue(event.key);\n        }\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId, value],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, [isEditing]);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <input\n          ref={inputRef}\n          type=\"number\"\n          value={value}\n          min={min}\n          max={max}\n          step={step}\n          onBlur={onBlur}\n          onChange={onChange}\n          className=\"w-full border-none bg-transparent p-0 outline-none\"\n        />\n      ) : (\n        <span data-slot=\"grid-cell-content\">{value}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction isValidUrl(urlString: string): boolean {\n  if (!urlString || urlString.trim() === \"\") return true; // Empty is valid (allows clearing)\n\n  try {\n    const url = new URL(urlString);\n    // Only allow http and https protocols\n    return url.protocol === \"http:\" || url.protocol === \"https:\";\n  } catch {\n    // Try adding https:// prefix if missing\n    try {\n      const url = new URL(`https://${urlString}`);\n      return url.protocol === \"https:\";\n    } catch {\n      return false;\n    }\n  }\n}\n\nfunction normalizeUrl(urlString: string): string {\n  if (!urlString || urlString.trim() === \"\") return \"\";\n\n  const trimmed = urlString.trim();\n\n  try {\n    // Try parsing as-is first\n    const url = new URL(trimmed);\n    return url.href;\n  } catch {\n    // Try adding https:// prefix\n    try {\n      const url = new URL(`https://${trimmed}`);\n      return url.href;\n    } catch {\n      // Return as-is if still invalid\n      return trimmed;\n    }\n  }\n}\n\nexport function UrlCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const [isInvalid, setIsInvalid] = React.useState(false);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n    setIsInvalid(false);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue ?? \"\";\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n    // Validate URL\n    if (currentValue && !isValidUrl(currentValue)) {\n      setIsInvalid(true);\n      return;\n    }\n\n    setIsInvalid(false);\n\n    // Normalize the URL (add https:// if needed)\n    const normalizedValue = normalizeUrl(currentValue);\n\n    if (normalizedValue !== initialValue) {\n      meta?.onDataUpdate?.({\n        rowIndex,\n        columnId,\n        value: normalizedValue || null,\n      });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n      // Clear invalid state while typing\n      if (isInvalid) {\n        setIsInvalid(false);\n      }\n    },\n    [isInvalid],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n          // Validate URL\n          if (currentValue && !isValidUrl(currentValue)) {\n            setIsInvalid(true);\n            return;\n          }\n\n          setIsInvalid(false);\n\n          // Normalize the URL\n          const normalizedValue = normalizeUrl(currentValue);\n\n          if (normalizedValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: normalizedValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n          // Validate URL\n          if (currentValue && !isValidUrl(currentValue)) {\n            setIsInvalid(true);\n            return;\n          }\n\n          setIsInvalid(false);\n\n          // Normalize the URL\n          const normalizedValue = normalizeUrl(currentValue);\n\n          if (normalizedValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: normalizedValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue ?? \"\");\n          setIsInvalid(false);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n        setIsInvalid(false);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  const onLinkClick = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (isEditing) {\n        event.preventDefault();\n        return;\n      }\n      // Let the link open naturally in a new tab\n    },\n    [isEditing],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n  const hasValidUrl = value && isValidUrl(value);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n      className={cn({\n        \"ring-1 ring-destructive ring-inset\": isInvalid,\n      })}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue ? (\n          isEditing ? (\n            displayValue\n          ) : hasValidUrl ? (\n            <a\n              href={normalizeUrl(displayValue)}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              onClick={onLinkClick}\n              className=\"truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60\"\n            >\n              {displayValue}\n            </a>\n          ) : (\n            <span className=\"text-muted-foreground\">{displayValue}</span>\n          )\n        ) : null}\n      </div>\n      {isInvalid && (\n        <div className=\"absolute inset-x-0 bottom-0 bg-destructive px-1 py-0.5 text-[10px] text-destructive-foreground\">\n          Invalid URL\n        </div>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function CheckboxCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as boolean;\n  const [value, setValue] = React.useState(Boolean(initialValue));\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(Boolean(initialValue));\n  }\n\n  const onCheckedChange = React.useCallback(\n    (checked: boolean) => {\n      setValue(checked);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isFocused && (event.key === \" \" || event.key === \"Enter\")) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      } else if (isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isFocused, value, onCheckedChange, meta],\n  );\n\n  const onWrapperClick = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isFocused) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      }\n    },\n    [isFocused, value, onCheckedChange],\n  );\n\n  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const onCheckboxMouseDown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const onCheckboxDoubleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={false}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className=\"flex size-full justify-center\"\n      onClick={onWrapperClick}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Checkbox\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        className=\"border-primary\"\n        onClick={onCheckboxClick}\n        onMouseDown={onCheckboxMouseDown}\n        onDoubleClick={onCheckboxDoubleClick}\n      />\n    </DataGridCellWrapper>\n  );\n}\n\nexport function SelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"select\" ? cellOpts.options : [];\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n  }\n\n  const onValueChange = React.useCallback(\n    (newValue: string) => {\n      setValue(newValue);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  const displayLabel =\n    options.find((opt) => opt.value === value)?.label ?? value;\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Select\n          value={value}\n          onValueChange={onValueChange}\n          open={isEditing}\n          onOpenChange={onOpenChange}\n        >\n          <SelectTrigger\n            size=\"sm\"\n            className=\"size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent\n            data-grid-cell-editor=\"\"\n            // compensate for the wrapper padding\n            align=\"start\"\n            alignOffset={-8}\n            sideOffset={-8}\n            className=\"min-w-[calc(var(--radix-select-trigger-width)+16px)]\"\n          >\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      ) : (\n        <span data-slot=\"grid-cell-content\">{displayLabel}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function MultiSelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as string[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const [selectedValues, setSelectedValues] =\n    React.useState<string[]>(cellValue);\n  const [searchValue, setSearchValue] = React.useState(\"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"multi-select\" ? cellOpts.options : [];\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setSelectedValues(cellValue);\n    setSearchValue(\"\");\n  }\n\n  const onValueChange = React.useCallback(\n    (value: string) => {\n      const newValues = selectedValues.includes(value)\n        ? selectedValues.filter((v) => v !== value)\n        : [...selectedValues, value];\n\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Clear search input and focus back on input after selection\n      setSearchValue(\"\");\n      queueMicrotask(() => inputRef.current?.focus());\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const removeValue = React.useCallback(\n    (valueToRemove: string, event?: React.MouseEvent) => {\n      event?.stopPropagation();\n      event?.preventDefault();\n      const newValues = selectedValues.filter((v) => v !== valueToRemove);\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Focus back on input after removing\n      setTimeout(() => inputRef.current?.focus(), 0);\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    setSelectedValues([]);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n    queueMicrotask(() => inputRef.current?.focus());\n  }, [meta, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setSelectedValues(cellValue);\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, cellValue, meta],\n  );\n\n  const onInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // Handle backspace when input is empty - remove last selected item\n      if (\n        event.key === \"Backspace\" &&\n        searchValue === \"\" &&\n        selectedValues.length > 0\n      ) {\n        event.preventDefault();\n        const lastValue = selectedValues[selectedValues.length - 1];\n        if (lastValue) {\n          removeValue(lastValue);\n        }\n      }\n      // Prevent escape from propagating to close the popover immediately\n      // Let the command handle it first\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n      }\n    },\n    [searchValue, selectedValues, removeValue],\n  );\n\n  const displayLabels = selectedValues\n    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)\n    .filter(Boolean);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =\n    useBadgeOverflow({\n      items: displayLabels,\n      getLabel: (label) => label,\n      containerRef,\n      lineCount,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[300px] rounded-none p-0\"\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <Command className=\"**:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:border-none **:data-[slot=command-input-wrapper]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden\">\n              <div className=\"flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5\">\n                {selectedValues.map((value) => {\n                  const option = options.find((opt) => opt.value === value);\n                  const label = option?.label ?? value;\n\n                  return (\n                    <Badge\n                      key={value}\n                      variant=\"secondary\"\n                      className=\"h-5 gap-1 px-1.5 text-xs\"\n                    >\n                      {label}\n                      <button\n                        type=\"button\"\n                        onClick={(event) => removeValue(value, event)}\n                        onPointerDown={(event) => {\n                          event.preventDefault();\n                          event.stopPropagation();\n                        }}\n                      >\n                        <X className=\"size-3\" />\n                      </button>\n                    </Badge>\n                  );\n                })}\n                <CommandInput\n                  ref={inputRef}\n                  value={searchValue}\n                  onValueChange={setSearchValue}\n                  onKeyDown={onInputKeyDown}\n                  placeholder=\"Search...\"\n                  className=\"h-auto flex-1 p-0\"\n                />\n              </div>\n              <CommandList className=\"max-h-full\">\n                <CommandEmpty>No options found.</CommandEmpty>\n                <CommandGroup className=\"max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden\">\n                  {options.map((option) => {\n                    const isSelected = selectedValues.includes(option.value);\n\n                    return (\n                      <CommandItem\n                        key={option.value}\n                        value={option.label}\n                        onSelect={() => onValueChange(option.value)}\n                      >\n                        <div\n                          className={cn(\n                            \"flex size-4 items-center justify-center rounded-sm border border-primary\",\n                            isSelected\n                              ? \"bg-primary text-primary-foreground\"\n                              : \"opacity-50 [&_svg]:invisible\",\n                          )}\n                        >\n                          <Check className=\"size-3\" />\n                        </div>\n                        <span>{option.label}</span>\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n                {selectedValues.length > 0 && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <CommandItem\n                        onSelect={clearAll}\n                        className=\"justify-center text-muted-foreground\"\n                      >\n                        Clear all\n                      </CommandItem>\n                    </CommandGroup>\n                  </>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {displayLabels.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleLabels.map((label, index) => (\n            <Badge\n              key={selectedValues[index]}\n              variant=\"secondary\"\n              className=\"h-5 shrink-0 px-1.5 text-xs\"\n            >\n              {label}\n            </Badge>\n          ))}\n          {hiddenBadgeCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenBadgeCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatDateForDisplay(dateStr: string) {\n  if (!dateStr) return \"\";\n  const date = new Date(dateStr);\n  return date.toLocaleDateString();\n}\n\nexport function DateCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  const selectedDate = value ? new Date(value) : undefined;\n\n  const onDateSelect = React.useCallback(\n    (date: Date | undefined) => {\n      if (!date) return;\n\n      const formattedDate = date.toISOString().split(\"T\")[0] ?? \"\";\n      setValue(formattedDate);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: formattedDate });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Popover open={isEditing} onOpenChange={onOpenChange}>\n        <PopoverAnchor asChild>\n          <span data-slot=\"grid-cell-content\">\n            {formatDateForDisplay(value)}\n          </span>\n        </PopoverAnchor>\n        {isEditing && (\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            alignOffset={-8}\n            className=\"w-auto p-0\"\n          >\n            <Calendar\n              autoFocus\n              captionLayout=\"dropdown\"\n              mode=\"single\"\n              defaultMonth={selectedDate ?? new Date()}\n              selected={selectedDate}\n              onSelect={onDateSelect}\n            />\n          </PopoverContent>\n        )}\n      </Popover>\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 B\";\n  const k = 1024;\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n}\n\nfunction getFileIcon(\n  type: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> {\n  if (type.startsWith(\"image/\")) return FileImage;\n  if (type.startsWith(\"video/\")) return FileVideo;\n  if (type.startsWith(\"audio/\")) return FileAudio;\n  if (type.includes(\"pdf\")) return FileText;\n  if (type.includes(\"zip\") || type.includes(\"rar\")) return FileArchive;\n  if (\n    type.includes(\"word\") ||\n    type.includes(\"document\") ||\n    type.includes(\"doc\")\n  )\n    return FileText;\n  if (type.includes(\"sheet\") || type.includes(\"excel\") || type.includes(\"xls\"))\n    return FileSpreadsheet;\n  if (\n    type.includes(\"presentation\") ||\n    type.includes(\"powerpoint\") ||\n    type.includes(\"ppt\")\n  )\n    return Presentation;\n  return File;\n}\n\nexport function FileCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as FileCellData[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const labelId = React.useId();\n  const descriptionId = React.useId();\n\n  const [files, setFiles] = React.useState<FileCellData[]>(cellValue);\n  const [uploadingFiles, setUploadingFiles] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const [isDraggingOver, setIsDraggingOver] = React.useState(false);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const dropzoneRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const fileCellOpts = cellOpts?.variant === \"file\" ? cellOpts : null;\n  const maxFileSize = fileCellOpts?.maxFileSize ?? 10 * 1024 * 1024;\n  const maxFiles = fileCellOpts?.maxFiles ?? 10;\n  const accept = fileCellOpts?.accept;\n  const multiple = fileCellOpts?.multiple ?? true;\n\n  const acceptedTypes = React.useMemo(\n    () => (accept ? accept.split(\",\").map((t) => t.trim()) : null),\n    [accept],\n  );\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setFiles(cellValue);\n    setError(null);\n  }\n\n  const validateFile = React.useCallback(\n    (file: File): string | null => {\n      if (maxFileSize && file.size > maxFileSize) {\n        return `File size exceeds ${formatFileSize(maxFileSize)}`;\n      }\n      if (acceptedTypes) {\n        const fileExtension = `.${file.name.split(\".\").pop()}`;\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.endsWith(\"/*\")) {\n            // Handle wildcard types like \"image/*\"\n            const baseType = type.slice(0, -2);\n            return file.type.startsWith(`${baseType}/`);\n          }\n          if (type.startsWith(\".\")) {\n            // Handle file extensions like \".pdf\"\n            return fileExtension.toLowerCase() === type.toLowerCase();\n          }\n          // Exact match for specific MIME types\n          return file.type === type;\n        });\n        if (!isAccepted) {\n          return `File type not accepted. Accepted: ${accept}`;\n        }\n      }\n      return null;\n    },\n    [maxFileSize, acceptedTypes, accept],\n  );\n\n  const addFiles = React.useCallback(\n    async (newFiles: File[], skipUpload = false) => {\n      setError(null);\n\n      // Check max files limit\n      if (maxFiles && files.length + newFiles.length > maxFiles) {\n        setError(`Maximum ${maxFiles} files allowed`);\n        return;\n      }\n\n      const validFiles: FileCellData[] = [];\n      let firstError: string | null = null;\n\n      for (const file of newFiles) {\n        const validationError = validateFile(file);\n        if (validationError) {\n          if (!firstError) {\n            firstError = validationError;\n          }\n          continue;\n        }\n\n        // Create file data object with temporary ID\n        const fileData: FileCellData = {\n          id: crypto.randomUUID(),\n          name: file.name,\n          size: file.size,\n          type: file.type,\n          url: URL.createObjectURL(file),\n        };\n        validFiles.push(fileData);\n      }\n\n      if (firstError) {\n        setError(firstError);\n      }\n\n      if (validFiles.length > 0) {\n        // If not skipping upload (dropped on cell), show skeletons first\n        if (!skipUpload) {\n          // Add temp files immediately (will show as skeletons)\n          const tempFiles = validFiles.map((f) => ({ ...f, url: undefined }));\n          const filesWithTemp = [...files, ...tempFiles];\n          setFiles(filesWithTemp);\n\n          // Mark as uploading\n          const uploadingIds = new Set(validFiles.map((f) => f.id));\n          setUploadingFiles(uploadingIds);\n\n          // Simulate upload delay (in real app, this would be actual upload)\n          await new Promise((resolve) => setTimeout(resolve, 800));\n\n          // Replace temp files with real ones\n          const finalFiles = filesWithTemp.map(\n            (f) => validFiles.find((vf) => vf.id === f.id) || f,\n          );\n          setFiles(finalFiles);\n          setUploadingFiles(new Set());\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: finalFiles });\n        } else {\n          // If from editor, add immediately without skeleton\n          const updatedFiles = [...files, ...validFiles];\n          setFiles(updatedFiles);\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n        }\n      }\n    },\n    [files, maxFiles, validateFile, meta, rowIndex, columnId],\n  );\n\n  const removeFile = React.useCallback(\n    (fileId: string) => {\n      setError(null);\n      // Revoke object URL to prevent memory leak\n      const fileToRemove = files.find((f) => f.id === fileId);\n      if (fileToRemove?.url) {\n        URL.revokeObjectURL(fileToRemove.url);\n      }\n      const updatedFiles = files.filter((f) => f.id !== fileId);\n      setFiles(updatedFiles);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n    },\n    [files, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    // Revoke all object URLs to prevent memory leak\n    for (const file of files) {\n      if (file.url) {\n        URL.revokeObjectURL(file.url);\n      }\n    }\n    setFiles([]);\n    setError(null);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n  }, [files, meta, rowIndex, columnId]);\n\n  const onDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setIsDragging(true);\n  }, []);\n\n  const onDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDragging(false);\n    }\n  }, []);\n\n  const onDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      addFiles(droppedFiles, true); // Skip upload skeleton in editor\n    },\n    [addFiles],\n  );\n\n  const onFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const selectedFiles = Array.from(event.target.files ?? []);\n      addFiles(selectedFiles, true); // Skip upload skeleton for manual selection\n      // Reset input so the same file can be selected again\n      event.target.value = \"\";\n    },\n    [addFiles],\n  );\n\n  // Cell-level drag handlers (for dropping directly on cell)\n  const onCellDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Only show drop indicator if dragging files\n    if (event.dataTransfer.types.includes(\"Files\")) {\n      setIsDraggingOver(true);\n    }\n  }, []);\n\n  const onCellDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDraggingOver(false);\n    }\n  }, []);\n\n  const onCellDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onCellDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDraggingOver(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      if (droppedFiles.length > 0) {\n        addFiles(droppedFiles, false); // Show skeleton for dropped files\n      }\n    },\n    [addFiles],\n  );\n\n  const onDropzoneClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const onDropzoneKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onDropzoneClick();\n      }\n    },\n    [onDropzoneClick],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setError(null);\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onEscapeKeyDown: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onEscapeKeyDown\"]\n  > = React.useCallback((event) => {\n    // Prevent the escape key from propagating to the data grid's keyboard handler\n    // which would call blurCell() and remove focus from the cell\n    event.stopPropagation();\n  }, []);\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    // Focus the dropzone for better keyboard UX - users can press Enter again to open file dialog\n    queueMicrotask(() => {\n      dropzoneRef.current?.focus();\n    });\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          setFiles(cellValue);\n          setError(null);\n          meta?.onCellEditingStop?.();\n        } else if (event.key === \" \") {\n          event.preventDefault();\n          onDropzoneClick();\n        }\n      } else if (isFocused && event.key === \"Enter\") {\n        // Handle Enter key to start editing when focused but not editing\n        event.preventDefault();\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [\n      isEditing,\n      isFocused,\n      cellValue,\n      meta,\n      onDropzoneClick,\n      rowIndex,\n      columnId,\n    ],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const file of files) {\n        if (file.url) {\n          URL.revokeObjectURL(file.url);\n        }\n      }\n    };\n  }, [files]);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } =\n    useBadgeOverflow({\n      items: files,\n      getLabel: (file) => file.name,\n      containerRef,\n      lineCount,\n      cacheKeyPrefix: \"file\",\n      iconSize: 12,\n      maxWidth: 100,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className={cn({\n        \"ring-1 ring-primary/80 ring-inset\": isDraggingOver,\n      })}\n      onDragEnter={onCellDragEnter}\n      onDragLeave={onCellDragLeave}\n      onDragOver={onCellDragOver}\n      onDrop={onCellDrop}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[400px] rounded-none p-0\"\n            onEscapeKeyDown={onEscapeKeyDown}\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <div className=\"flex flex-col gap-2 p-3\">\n              <span id={labelId} className=\"sr-only\">\n                File upload\n              </span>\n              <div\n                role=\"region\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                aria-invalid={!!error}\n                data-dragging={isDragging ? \"\" : undefined}\n                data-invalid={error ? \"\" : undefined}\n                tabIndex={isDragging ? -1 : 0}\n                className=\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20\"\n                ref={dropzoneRef}\n                onClick={onDropzoneClick}\n                onDragEnter={onDragEnter}\n                onDragLeave={onDragLeave}\n                onDragOver={onDragOver}\n                onDrop={onDrop}\n                onKeyDown={onDropzoneKeyDown}\n              >\n                <Upload className=\"size-8 text-muted-foreground\" />\n                <div className=\"text-center text-sm\">\n                  <p className=\"font-medium\">\n                    {isDragging ? \"Drop files here\" : \"Drag files here\"}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    or click to browse\n                  </p>\n                </div>\n                <p id={descriptionId} className=\"text-muted-foreground text-xs\">\n                  {maxFileSize\n                    ? `Max size: ${formatFileSize(maxFileSize)}${maxFiles ? ` • Max ${maxFiles} files` : \"\"}`\n                    : maxFiles\n                      ? `Max ${maxFiles} files`\n                      : \"Select files to upload\"}\n                </p>\n              </div>\n              <input\n                type=\"file\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                multiple={multiple}\n                accept={accept}\n                className=\"sr-only\"\n                ref={fileInputRef}\n                onChange={onFileInputChange}\n              />\n              {error && (\n                <div className=\"rounded-md bg-destructive/10 px-3 py-2 text-destructive text-xs\">\n                  {error}\n                </div>\n              )}\n              {files.length > 0 && (\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <p className=\"font-medium text-muted-foreground text-xs\">\n                      {files.length} {files.length === 1 ? \"file\" : \"files\"}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-6 text-muted-foreground text-xs\"\n                      onClick={clearAll}\n                    >\n                      Clear all\n                    </Button>\n                  </div>\n                  <div className=\"max-h-[200px] space-y-1 overflow-y-auto\">\n                    {files.map((file) => {\n                      const FileIcon = getFileIcon(file.type);\n\n                      return (\n                        <div\n                          key={file.id}\n                          className=\"flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1.5\"\n                        >\n                          {FileIcon && (\n                            <FileIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n                          )}\n                          <div className=\"flex-1 overflow-hidden\">\n                            <p className=\"truncate text-sm\">{file.name}</p>\n                            <p className=\"text-muted-foreground text-xs\">\n                              {formatFileSize(file.size)}\n                            </p>\n                          </div>\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            className=\"size-5 rounded-sm\"\n                            onClick={() => removeFile(file.id)}\n                          >\n                            <X className=\"size-3\" />\n                          </Button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {isDraggingOver ? (\n        <div className=\"flex items-center justify-center gap-2 text-primary text-sm\">\n          <Upload className=\"size-4\" />\n          <span>Drop files here</span>\n        </div>\n      ) : files.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleFiles.map((file) => {\n            const isUploading = uploadingFiles.has(file.id);\n\n            if (isUploading) {\n              // Show skeleton for uploading files\n              return (\n                <Skeleton\n                  key={file.id}\n                  className=\"h-5 shrink-0 px-1.5\"\n                  style={{\n                    width: `${Math.min(file.name.length * 8 + 30, 100)}px`,\n                  }}\n                />\n              );\n            }\n\n            return (\n              <Badge\n                key={file.id}\n                variant=\"secondary\"\n                className=\"h-5 shrink-0 gap-1 px-1.5 text-xs\"\n              >\n                {React.createElement(getFileIcon(file.type), {\n                  className: \"size-3 shrink-0\",\n                })}\n                <span className=\"max-w-[100px] truncate\">{file.name}</span>\n              </Badge>\n            );\n          })}\n          {hiddenFileCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenFileCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  Check,\n  File,\n  FileArchive,\n  FileAudio,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo,\n  Presentation,\n  Upload,\n  X,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { DataGridCellWrapper } from \"@/components/data-grid/data-grid-cell-wrapper\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { useBadgeOverflow } from \"@/hooks/use-badge-overflow\";\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getCellKey, getLineCount } from \"@/lib/data-grid\";\nimport { cn } from \"@/lib/utils\";\nimport type { CellVariantProps, FileCellData } from \"@/types/data-grid\";\n\nexport function ShortTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue;\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    // Read the current value directly from the DOM to avoid stale state\n    const currentValue = cellRef.current?.textContent ?? \"\";\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue}\n      </div>\n    </DataGridCellWrapper>\n  );\n}\n\nexport function LongTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  // Debounced auto-save (300ms delay)\n  const debouncedSave = useDebouncedCallback((newValue: string) => {\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n  }, 300);\n\n  const onSave = React.useCallback(() => {\n    // Immediately save any pending changes and close the popover\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onCancel = React.useCallback(() => {\n    // Restore the original value\n    setValue(initialValue ?? \"\");\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue });\n    meta?.onCellEditingStop?.();\n  }, [meta, initialValue, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        // Immediately save any pending changes when closing\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, value, initialValue, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    if (textareaRef.current) {\n      textareaRef.current.focus();\n      const length = textareaRef.current.value.length;\n      textareaRef.current.setSelectionRange(length, length);\n    }\n  }, []);\n\n  const onBlur = React.useCallback(() => {\n    // Immediately save any pending changes on blur\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      const newValue = event.target.value;\n      setValue(newValue);\n      // Debounced auto-save\n      debouncedSave(newValue);\n    },\n    [debouncedSave],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onCancel();\n      } else if (event.key === \"Enter\" && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        onSave();\n      } else if (event.key === \"Tab\") {\n        event.preventDefault();\n        // Save any pending changes\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n        return;\n      }\n      // Stop propagation to prevent grid navigation\n      event.stopPropagation();\n    },\n    [onSave, onCancel, value, initialValue, meta, rowIndex, columnId],\n  );\n\n  return (\n    <Popover open={isEditing} onOpenChange={onOpenChange}>\n      <PopoverAnchor asChild>\n        <DataGridCellWrapper\n          ref={containerRef}\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        >\n          <span data-slot=\"grid-cell-content\">{value}</span>\n        </DataGridCellWrapper>\n      </PopoverAnchor>\n      <PopoverContent\n        data-grid-cell-editor=\"\"\n        align=\"start\"\n        side=\"bottom\"\n        sideOffset={sideOffset}\n        className=\"w-[400px] rounded-none p-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n      >\n        <Textarea\n          placeholder=\"Enter text...\"\n          className=\"min-h-[150px] resize-none rounded-none border-0 shadow-none focus-visible:ring-0\"\n          ref={textareaRef}\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function NumberCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as number;\n  const [value, setValue] = React.useState(String(initialValue ?? \"\"));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const min = cellOpts?.variant === \"number\" ? cellOpts.min : undefined;\n  const max = cellOpts?.variant === \"number\" ? cellOpts.max : undefined;\n  const step = cellOpts?.variant === \"number\" ? cellOpts.step : undefined;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(String(initialValue ?? \"\"));\n  }\n\n  const onBlur = React.useCallback(() => {\n    const numValue = value === \"\" ? null : Number(value);\n    if (numValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue, value]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(String(initialValue ?? \"\"));\n          inputRef.current?.blur();\n        }\n      } else if (isFocused) {\n        // Handle Backspace to start editing with empty value\n        if (event.key === \"Backspace\") {\n          setValue(\"\");\n        } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n          // Handle typing to pre-fill the value when editing starts\n          setValue(event.key);\n        }\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId, value],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, [isEditing]);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <input\n          ref={inputRef}\n          type=\"number\"\n          value={value}\n          min={min}\n          max={max}\n          step={step}\n          onBlur={onBlur}\n          onChange={onChange}\n          className=\"w-full border-none bg-transparent p-0 outline-none\"\n        />\n      ) : (\n        <span data-slot=\"grid-cell-content\">{value}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction getUrlHref(urlString: string): string {\n  if (!urlString || urlString.trim() === \"\") return \"\";\n\n  const trimmed = urlString.trim();\n\n  // Check if it already has a protocol\n  if (trimmed.startsWith(\"http://\") || trimmed.startsWith(\"https://\")) {\n    return trimmed;\n  }\n\n  // Add http:// prefix for links without protocol\n  return `http://${trimmed}`;\n}\n\nexport function UrlCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue ?? \"\";\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({\n        rowIndex,\n        columnId,\n        value: currentValue || null,\n      });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: currentValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: currentValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue ?? \"\");\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  const onLinkClick = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (isEditing) {\n        event.preventDefault();\n        return;\n      }\n      // Stop propagation to prevent grid from interfering with link navigation\n      event.stopPropagation();\n    },\n    [isEditing],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {!isEditing && displayValue ? (\n        <div\n          data-slot=\"grid-cell-content\"\n          className=\"size-full overflow-hidden\"\n        >\n          <a\n            href={getUrlHref(displayValue)}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            onClick={onLinkClick}\n            className=\"truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60\"\n          >\n            {displayValue}\n          </a>\n        </div>\n      ) : (\n        <div\n          role=\"textbox\"\n          data-slot=\"grid-cell-content\"\n          contentEditable={isEditing}\n          tabIndex={-1}\n          ref={cellRef}\n          onBlur={onBlur}\n          onInput={onInput}\n          suppressContentEditableWarning\n          className={cn(\"size-full overflow-hidden outline-none\", {\n            \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n              isEditing,\n          })}\n        >\n          {displayValue}\n        </div>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function CheckboxCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as boolean;\n  const [value, setValue] = React.useState(Boolean(initialValue));\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(Boolean(initialValue));\n  }\n\n  const onCheckedChange = React.useCallback(\n    (checked: boolean) => {\n      setValue(checked);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isFocused && (event.key === \" \" || event.key === \"Enter\")) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      } else if (isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isFocused, value, onCheckedChange, meta],\n  );\n\n  const onWrapperClick = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isFocused) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      }\n    },\n    [isFocused, value, onCheckedChange],\n  );\n\n  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const onCheckboxMouseDown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const onCheckboxDoubleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={false}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className=\"flex size-full justify-center\"\n      onClick={onWrapperClick}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Checkbox\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        className=\"border-primary\"\n        onClick={onCheckboxClick}\n        onMouseDown={onCheckboxMouseDown}\n        onDoubleClick={onCheckboxDoubleClick}\n      />\n    </DataGridCellWrapper>\n  );\n}\n\nexport function SelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"select\" ? cellOpts.options : [];\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n  }\n\n  const onValueChange = React.useCallback(\n    (newValue: string) => {\n      setValue(newValue);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  const displayLabel =\n    options.find((opt) => opt.value === value)?.label ?? value;\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Select\n          value={value}\n          onValueChange={onValueChange}\n          open={isEditing}\n          onOpenChange={onOpenChange}\n        >\n          <SelectTrigger\n            size=\"sm\"\n            className=\"size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent\n            data-grid-cell-editor=\"\"\n            // compensate for the wrapper padding\n            align=\"start\"\n            alignOffset={-8}\n            sideOffset={-8}\n            className=\"min-w-[calc(var(--radix-select-trigger-width)+16px)]\"\n          >\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      ) : (\n        <span data-slot=\"grid-cell-content\">{displayLabel}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function MultiSelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as string[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const [selectedValues, setSelectedValues] =\n    React.useState<string[]>(cellValue);\n  const [searchValue, setSearchValue] = React.useState(\"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"multi-select\" ? cellOpts.options : [];\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setSelectedValues(cellValue);\n    setSearchValue(\"\");\n  }\n\n  const onValueChange = React.useCallback(\n    (value: string) => {\n      const newValues = selectedValues.includes(value)\n        ? selectedValues.filter((v) => v !== value)\n        : [...selectedValues, value];\n\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Clear search input and focus back on input after selection\n      setSearchValue(\"\");\n      queueMicrotask(() => inputRef.current?.focus());\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const removeValue = React.useCallback(\n    (valueToRemove: string, event?: React.MouseEvent) => {\n      event?.stopPropagation();\n      event?.preventDefault();\n      const newValues = selectedValues.filter((v) => v !== valueToRemove);\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Focus back on input after removing\n      setTimeout(() => inputRef.current?.focus(), 0);\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    setSelectedValues([]);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n    queueMicrotask(() => inputRef.current?.focus());\n  }, [meta, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setSelectedValues(cellValue);\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, cellValue, meta],\n  );\n\n  const onInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // Handle backspace when input is empty - remove last selected item\n      if (\n        event.key === \"Backspace\" &&\n        searchValue === \"\" &&\n        selectedValues.length > 0\n      ) {\n        event.preventDefault();\n        const lastValue = selectedValues[selectedValues.length - 1];\n        if (lastValue) {\n          removeValue(lastValue);\n        }\n      }\n      // Prevent escape from propagating to close the popover immediately\n      // Let the command handle it first\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n      }\n    },\n    [searchValue, selectedValues, removeValue],\n  );\n\n  const displayLabels = selectedValues\n    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)\n    .filter(Boolean);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =\n    useBadgeOverflow({\n      items: displayLabels,\n      getLabel: (label) => label,\n      containerRef,\n      lineCount,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[300px] rounded-none p-0\"\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <Command className=\"**:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:border-none **:data-[slot=command-input-wrapper]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden\">\n              <div className=\"flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5\">\n                {selectedValues.map((value) => {\n                  const option = options.find((opt) => opt.value === value);\n                  const label = option?.label ?? value;\n\n                  return (\n                    <Badge\n                      key={value}\n                      variant=\"secondary\"\n                      className=\"h-5 gap-1 px-1.5 text-xs\"\n                    >\n                      {label}\n                      <button\n                        type=\"button\"\n                        onClick={(event) => removeValue(value, event)}\n                        onPointerDown={(event) => {\n                          event.preventDefault();\n                          event.stopPropagation();\n                        }}\n                      >\n                        <X className=\"size-3\" />\n                      </button>\n                    </Badge>\n                  );\n                })}\n                <CommandInput\n                  ref={inputRef}\n                  value={searchValue}\n                  onValueChange={setSearchValue}\n                  onKeyDown={onInputKeyDown}\n                  placeholder=\"Search...\"\n                  className=\"h-auto flex-1 p-0\"\n                />\n              </div>\n              <CommandList className=\"max-h-full\">\n                <CommandEmpty>No options found.</CommandEmpty>\n                <CommandGroup className=\"max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden\">\n                  {options.map((option) => {\n                    const isSelected = selectedValues.includes(option.value);\n\n                    return (\n                      <CommandItem\n                        key={option.value}\n                        value={option.label}\n                        onSelect={() => onValueChange(option.value)}\n                      >\n                        <div\n                          className={cn(\n                            \"flex size-4 items-center justify-center rounded-sm border border-primary\",\n                            isSelected\n                              ? \"bg-primary text-primary-foreground\"\n                              : \"opacity-50 [&_svg]:invisible\",\n                          )}\n                        >\n                          <Check className=\"size-3\" />\n                        </div>\n                        <span>{option.label}</span>\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n                {selectedValues.length > 0 && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <CommandItem\n                        onSelect={clearAll}\n                        className=\"justify-center text-muted-foreground\"\n                      >\n                        Clear all\n                      </CommandItem>\n                    </CommandGroup>\n                  </>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {displayLabels.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleLabels.map((label, index) => (\n            <Badge\n              key={selectedValues[index]}\n              variant=\"secondary\"\n              className=\"h-5 shrink-0 px-1.5 text-xs\"\n            >\n              {label}\n            </Badge>\n          ))}\n          {hiddenBadgeCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenBadgeCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatDateForDisplay(dateStr: string) {\n  if (!dateStr) return \"\";\n  const date = new Date(dateStr);\n  return date.toLocaleDateString();\n}\n\nexport function DateCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  const selectedDate = value ? new Date(value) : undefined;\n\n  const onDateSelect = React.useCallback(\n    (date: Date | undefined) => {\n      if (!date) return;\n\n      const formattedDate = date.toISOString().split(\"T\")[0] ?? \"\";\n      setValue(formattedDate);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: formattedDate });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Popover open={isEditing} onOpenChange={onOpenChange}>\n        <PopoverAnchor asChild>\n          <span data-slot=\"grid-cell-content\">\n            {formatDateForDisplay(value)}\n          </span>\n        </PopoverAnchor>\n        {isEditing && (\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            alignOffset={-8}\n            className=\"w-auto p-0\"\n          >\n            <Calendar\n              autoFocus\n              captionLayout=\"dropdown\"\n              mode=\"single\"\n              defaultMonth={selectedDate ?? new Date()}\n              selected={selectedDate}\n              onSelect={onDateSelect}\n            />\n          </PopoverContent>\n        )}\n      </Popover>\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 B\";\n  const k = 1024;\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n}\n\nfunction getFileIcon(\n  type: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> {\n  if (type.startsWith(\"image/\")) return FileImage;\n  if (type.startsWith(\"video/\")) return FileVideo;\n  if (type.startsWith(\"audio/\")) return FileAudio;\n  if (type.includes(\"pdf\")) return FileText;\n  if (type.includes(\"zip\") || type.includes(\"rar\")) return FileArchive;\n  if (\n    type.includes(\"word\") ||\n    type.includes(\"document\") ||\n    type.includes(\"doc\")\n  )\n    return FileText;\n  if (type.includes(\"sheet\") || type.includes(\"excel\") || type.includes(\"xls\"))\n    return FileSpreadsheet;\n  if (\n    type.includes(\"presentation\") ||\n    type.includes(\"powerpoint\") ||\n    type.includes(\"ppt\")\n  )\n    return Presentation;\n  return File;\n}\n\nexport function FileCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as FileCellData[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const labelId = React.useId();\n  const descriptionId = React.useId();\n\n  const [files, setFiles] = React.useState<FileCellData[]>(cellValue);\n  const [uploadingFiles, setUploadingFiles] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const [isDraggingOver, setIsDraggingOver] = React.useState(false);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const dropzoneRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const fileCellOpts = cellOpts?.variant === \"file\" ? cellOpts : null;\n  const maxFileSize = fileCellOpts?.maxFileSize ?? 10 * 1024 * 1024;\n  const maxFiles = fileCellOpts?.maxFiles ?? 10;\n  const accept = fileCellOpts?.accept;\n  const multiple = fileCellOpts?.multiple ?? true;\n\n  const acceptedTypes = React.useMemo(\n    () => (accept ? accept.split(\",\").map((t) => t.trim()) : null),\n    [accept],\n  );\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setFiles(cellValue);\n    setError(null);\n  }\n\n  const validateFile = React.useCallback(\n    (file: File): string | null => {\n      if (maxFileSize && file.size > maxFileSize) {\n        return `File size exceeds ${formatFileSize(maxFileSize)}`;\n      }\n      if (acceptedTypes) {\n        const fileExtension = `.${file.name.split(\".\").pop()}`;\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.endsWith(\"/*\")) {\n            // Handle wildcard types like \"image/*\"\n            const baseType = type.slice(0, -2);\n            return file.type.startsWith(`${baseType}/`);\n          }\n          if (type.startsWith(\".\")) {\n            // Handle file extensions like \".pdf\"\n            return fileExtension.toLowerCase() === type.toLowerCase();\n          }\n          // Exact match for specific MIME types\n          return file.type === type;\n        });\n        if (!isAccepted) {\n          return `File type not accepted. Accepted: ${accept}`;\n        }\n      }\n      return null;\n    },\n    [maxFileSize, acceptedTypes, accept],\n  );\n\n  const addFiles = React.useCallback(\n    async (newFiles: File[], skipUpload = false) => {\n      setError(null);\n\n      // Check max files limit\n      if (maxFiles && files.length + newFiles.length > maxFiles) {\n        setError(`Maximum ${maxFiles} files allowed`);\n        return;\n      }\n\n      const validFiles: FileCellData[] = [];\n      let firstError: string | null = null;\n\n      for (const file of newFiles) {\n        const validationError = validateFile(file);\n        if (validationError) {\n          if (!firstError) {\n            firstError = validationError;\n          }\n          continue;\n        }\n\n        // Create file data object with temporary ID\n        const fileData: FileCellData = {\n          id: crypto.randomUUID(),\n          name: file.name,\n          size: file.size,\n          type: file.type,\n          url: URL.createObjectURL(file),\n        };\n        validFiles.push(fileData);\n      }\n\n      if (firstError) {\n        setError(firstError);\n      }\n\n      if (validFiles.length > 0) {\n        // If not skipping upload (dropped on cell), show skeletons first\n        if (!skipUpload) {\n          // Add temp files immediately (will show as skeletons)\n          const tempFiles = validFiles.map((f) => ({ ...f, url: undefined }));\n          const filesWithTemp = [...files, ...tempFiles];\n          setFiles(filesWithTemp);\n\n          // Mark as uploading\n          const uploadingIds = new Set(validFiles.map((f) => f.id));\n          setUploadingFiles(uploadingIds);\n\n          // Simulate upload delay (in real app, this would be actual upload)\n          await new Promise((resolve) => setTimeout(resolve, 800));\n\n          // Replace temp files with real ones\n          const finalFiles = filesWithTemp.map(\n            (f) => validFiles.find((vf) => vf.id === f.id) || f,\n          );\n          setFiles(finalFiles);\n          setUploadingFiles(new Set());\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: finalFiles });\n        } else {\n          // If from editor, add immediately without skeleton\n          const updatedFiles = [...files, ...validFiles];\n          setFiles(updatedFiles);\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n        }\n      }\n    },\n    [files, maxFiles, validateFile, meta, rowIndex, columnId],\n  );\n\n  const removeFile = React.useCallback(\n    (fileId: string) => {\n      setError(null);\n      // Revoke object URL to prevent memory leak\n      const fileToRemove = files.find((f) => f.id === fileId);\n      if (fileToRemove?.url) {\n        URL.revokeObjectURL(fileToRemove.url);\n      }\n      const updatedFiles = files.filter((f) => f.id !== fileId);\n      setFiles(updatedFiles);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n    },\n    [files, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    // Revoke all object URLs to prevent memory leak\n    for (const file of files) {\n      if (file.url) {\n        URL.revokeObjectURL(file.url);\n      }\n    }\n    setFiles([]);\n    setError(null);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n  }, [files, meta, rowIndex, columnId]);\n\n  const onDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setIsDragging(true);\n  }, []);\n\n  const onDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDragging(false);\n    }\n  }, []);\n\n  const onDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      addFiles(droppedFiles, true); // Skip upload skeleton in editor\n    },\n    [addFiles],\n  );\n\n  const onFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const selectedFiles = Array.from(event.target.files ?? []);\n      addFiles(selectedFiles, true); // Skip upload skeleton for manual selection\n      // Reset input so the same file can be selected again\n      event.target.value = \"\";\n    },\n    [addFiles],\n  );\n\n  // Cell-level drag handlers (for dropping directly on cell)\n  const onCellDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Only show drop indicator if dragging files\n    if (event.dataTransfer.types.includes(\"Files\")) {\n      setIsDraggingOver(true);\n    }\n  }, []);\n\n  const onCellDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDraggingOver(false);\n    }\n  }, []);\n\n  const onCellDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onCellDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDraggingOver(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      if (droppedFiles.length > 0) {\n        addFiles(droppedFiles, false); // Show skeleton for dropped files\n      }\n    },\n    [addFiles],\n  );\n\n  const onDropzoneClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const onDropzoneKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onDropzoneClick();\n      }\n    },\n    [onDropzoneClick],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setError(null);\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onEscapeKeyDown: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onEscapeKeyDown\"]\n  > = React.useCallback((event) => {\n    // Prevent the escape key from propagating to the data grid's keyboard handler\n    // which would call blurCell() and remove focus from the cell\n    event.stopPropagation();\n  }, []);\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    // Focus the dropzone for better keyboard UX - users can press Enter again to open file dialog\n    queueMicrotask(() => {\n      dropzoneRef.current?.focus();\n    });\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          setFiles(cellValue);\n          setError(null);\n          meta?.onCellEditingStop?.();\n        } else if (event.key === \" \") {\n          event.preventDefault();\n          onDropzoneClick();\n        }\n      } else if (isFocused && event.key === \"Enter\") {\n        // Handle Enter key to start editing when focused but not editing\n        event.preventDefault();\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [\n      isEditing,\n      isFocused,\n      cellValue,\n      meta,\n      onDropzoneClick,\n      rowIndex,\n      columnId,\n    ],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const file of files) {\n        if (file.url) {\n          URL.revokeObjectURL(file.url);\n        }\n      }\n    };\n  }, [files]);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } =\n    useBadgeOverflow({\n      items: files,\n      getLabel: (file) => file.name,\n      containerRef,\n      lineCount,\n      cacheKeyPrefix: \"file\",\n      iconSize: 12,\n      maxWidth: 100,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className={cn({\n        \"ring-1 ring-primary/80 ring-inset\": isDraggingOver,\n      })}\n      onDragEnter={onCellDragEnter}\n      onDragLeave={onCellDragLeave}\n      onDragOver={onCellDragOver}\n      onDrop={onCellDrop}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[400px] rounded-none p-0\"\n            onEscapeKeyDown={onEscapeKeyDown}\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <div className=\"flex flex-col gap-2 p-3\">\n              <span id={labelId} className=\"sr-only\">\n                File upload\n              </span>\n              <div\n                role=\"region\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                aria-invalid={!!error}\n                data-dragging={isDragging ? \"\" : undefined}\n                data-invalid={error ? \"\" : undefined}\n                tabIndex={isDragging ? -1 : 0}\n                className=\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20\"\n                ref={dropzoneRef}\n                onClick={onDropzoneClick}\n                onDragEnter={onDragEnter}\n                onDragLeave={onDragLeave}\n                onDragOver={onDragOver}\n                onDrop={onDrop}\n                onKeyDown={onDropzoneKeyDown}\n              >\n                <Upload className=\"size-8 text-muted-foreground\" />\n                <div className=\"text-center text-sm\">\n                  <p className=\"font-medium\">\n                    {isDragging ? \"Drop files here\" : \"Drag files here\"}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    or click to browse\n                  </p>\n                </div>\n                <p id={descriptionId} className=\"text-muted-foreground text-xs\">\n                  {maxFileSize\n                    ? `Max size: ${formatFileSize(maxFileSize)}${maxFiles ? ` • Max ${maxFiles} files` : \"\"}`\n                    : maxFiles\n                      ? `Max ${maxFiles} files`\n                      : \"Select files to upload\"}\n                </p>\n              </div>\n              <input\n                type=\"file\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                multiple={multiple}\n                accept={accept}\n                className=\"sr-only\"\n                ref={fileInputRef}\n                onChange={onFileInputChange}\n              />\n              {error && (\n                <div className=\"rounded-md bg-destructive/10 px-3 py-2 text-destructive text-xs\">\n                  {error}\n                </div>\n              )}\n              {files.length > 0 && (\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <p className=\"font-medium text-muted-foreground text-xs\">\n                      {files.length} {files.length === 1 ? \"file\" : \"files\"}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-6 text-muted-foreground text-xs\"\n                      onClick={clearAll}\n                    >\n                      Clear all\n                    </Button>\n                  </div>\n                  <div className=\"max-h-[200px] space-y-1 overflow-y-auto\">\n                    {files.map((file) => {\n                      const FileIcon = getFileIcon(file.type);\n\n                      return (\n                        <div\n                          key={file.id}\n                          className=\"flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1.5\"\n                        >\n                          {FileIcon && (\n                            <FileIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n                          )}\n                          <div className=\"flex-1 overflow-hidden\">\n                            <p className=\"truncate text-sm\">{file.name}</p>\n                            <p className=\"text-muted-foreground text-xs\">\n                              {formatFileSize(file.size)}\n                            </p>\n                          </div>\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            className=\"size-5 rounded-sm\"\n                            onClick={() => removeFile(file.id)}\n                          >\n                            <X className=\"size-3\" />\n                          </Button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {isDraggingOver ? (\n        <div className=\"flex items-center justify-center gap-2 text-primary text-sm\">\n          <Upload className=\"size-4\" />\n          <span>Drop files here</span>\n        </div>\n      ) : files.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleFiles.map((file) => {\n            const isUploading = uploadingFiles.has(file.id);\n\n            if (isUploading) {\n              // Show skeleton for uploading files\n              return (\n                <Skeleton\n                  key={file.id}\n                  className=\"h-5 shrink-0 px-1.5\"\n                  style={{\n                    width: `${Math.min(file.name.length * 8 + 30, 100)}px`,\n                  }}\n                />\n              );\n            }\n\n            return (\n              <Badge\n                key={file.id}\n                variant=\"secondary\"\n                className=\"h-5 shrink-0 gap-1 px-1.5 text-xs\"\n              >\n                {React.createElement(getFileIcon(file.type), {\n                  className: \"size-3 shrink-0\",\n                })}\n                <span className=\"max-w-[100px] truncate\">{file.name}</span>\n              </Badge>\n            );\n          })}\n          {hiddenFileCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenFileCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n",
       "type": "registry:component",
       "target": "src/components/data-grid/data-grid-cell-variants.tsx"
     },
diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index 5b218b22b..b7efbcd9d 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -626,7 +626,12 @@ export function UrlCell<TData>({
             target="_blank"
             rel="noopener noreferrer"
             onClick={onLinkClick}
-            className="truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60"
+            className={cn(
+              "truncate underline underline-offset-2",
+              isFocused
+                ? "text-foreground decoration-foreground/50 hover:decoration-foreground/70"
+                : "text-primary decoration-primary/30 hover:decoration-primary/60",
+            )}
           >
             {displayValue}
           </a>

From 397ae8b0ab7ba21090cc45aa513da1e1d76f3c85 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:19:54 +0600
Subject: [PATCH 12/17] refactor: use data-focused attribute for URL link
 styling

- Replace conditional className logic with data-focused attribute
- Cleaner CSS without linter warnings
- Same visual behavior with better code structure
---
 src/components/data-grid/data-grid-cell-variants.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index b7efbcd9d..785bd72c3 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -626,12 +626,8 @@ export function UrlCell<TData>({
             target="_blank"
             rel="noopener noreferrer"
             onClick={onLinkClick}
-            className={cn(
-              "truncate underline underline-offset-2",
-              isFocused
-                ? "text-foreground decoration-foreground/50 hover:decoration-foreground/70"
-                : "text-primary decoration-primary/30 hover:decoration-primary/60",
-            )}
+            data-focused={isFocused ? "" : undefined}
+            className="truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60 data-focused:text-foreground data-focused:decoration-foreground/50 data-focused:hover:decoration-foreground/70"
           >
             {displayValue}
           </a>

From 4ec7557b3916262b9f755e86d0857ee3e99fba26 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:20:36 +0600
Subject: [PATCH 13/17] chore: rebuild registry

---
 public/r/data-grid.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/r/data-grid.json b/public/r/data-grid.json
index 3005b2a03..914d961b3 100644
--- a/public/r/data-grid.json
+++ b/public/r/data-grid.json
@@ -46,7 +46,7 @@
     },
     {
       "path": "src/components/data-grid/data-grid-cell-variants.tsx",
-      "content": "\"use client\";\n\nimport {\n  Check,\n  File,\n  FileArchive,\n  FileAudio,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo,\n  Presentation,\n  Upload,\n  X,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { DataGridCellWrapper } from \"@/components/data-grid/data-grid-cell-wrapper\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { useBadgeOverflow } from \"@/hooks/use-badge-overflow\";\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getCellKey, getLineCount } from \"@/lib/data-grid\";\nimport { cn } from \"@/lib/utils\";\nimport type { CellVariantProps, FileCellData } from \"@/types/data-grid\";\n\nexport function ShortTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue;\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    // Read the current value directly from the DOM to avoid stale state\n    const currentValue = cellRef.current?.textContent ?? \"\";\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue}\n      </div>\n    </DataGridCellWrapper>\n  );\n}\n\nexport function LongTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  // Debounced auto-save (300ms delay)\n  const debouncedSave = useDebouncedCallback((newValue: string) => {\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n  }, 300);\n\n  const onSave = React.useCallback(() => {\n    // Immediately save any pending changes and close the popover\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onCancel = React.useCallback(() => {\n    // Restore the original value\n    setValue(initialValue ?? \"\");\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue });\n    meta?.onCellEditingStop?.();\n  }, [meta, initialValue, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        // Immediately save any pending changes when closing\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, value, initialValue, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    if (textareaRef.current) {\n      textareaRef.current.focus();\n      const length = textareaRef.current.value.length;\n      textareaRef.current.setSelectionRange(length, length);\n    }\n  }, []);\n\n  const onBlur = React.useCallback(() => {\n    // Immediately save any pending changes on blur\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      const newValue = event.target.value;\n      setValue(newValue);\n      // Debounced auto-save\n      debouncedSave(newValue);\n    },\n    [debouncedSave],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onCancel();\n      } else if (event.key === \"Enter\" && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        onSave();\n      } else if (event.key === \"Tab\") {\n        event.preventDefault();\n        // Save any pending changes\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n        return;\n      }\n      // Stop propagation to prevent grid navigation\n      event.stopPropagation();\n    },\n    [onSave, onCancel, value, initialValue, meta, rowIndex, columnId],\n  );\n\n  return (\n    <Popover open={isEditing} onOpenChange={onOpenChange}>\n      <PopoverAnchor asChild>\n        <DataGridCellWrapper\n          ref={containerRef}\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        >\n          <span data-slot=\"grid-cell-content\">{value}</span>\n        </DataGridCellWrapper>\n      </PopoverAnchor>\n      <PopoverContent\n        data-grid-cell-editor=\"\"\n        align=\"start\"\n        side=\"bottom\"\n        sideOffset={sideOffset}\n        className=\"w-[400px] rounded-none p-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n      >\n        <Textarea\n          placeholder=\"Enter text...\"\n          className=\"min-h-[150px] resize-none rounded-none border-0 shadow-none focus-visible:ring-0\"\n          ref={textareaRef}\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function NumberCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as number;\n  const [value, setValue] = React.useState(String(initialValue ?? \"\"));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const min = cellOpts?.variant === \"number\" ? cellOpts.min : undefined;\n  const max = cellOpts?.variant === \"number\" ? cellOpts.max : undefined;\n  const step = cellOpts?.variant === \"number\" ? cellOpts.step : undefined;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(String(initialValue ?? \"\"));\n  }\n\n  const onBlur = React.useCallback(() => {\n    const numValue = value === \"\" ? null : Number(value);\n    if (numValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue, value]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(String(initialValue ?? \"\"));\n          inputRef.current?.blur();\n        }\n      } else if (isFocused) {\n        // Handle Backspace to start editing with empty value\n        if (event.key === \"Backspace\") {\n          setValue(\"\");\n        } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n          // Handle typing to pre-fill the value when editing starts\n          setValue(event.key);\n        }\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId, value],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, [isEditing]);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <input\n          ref={inputRef}\n          type=\"number\"\n          value={value}\n          min={min}\n          max={max}\n          step={step}\n          onBlur={onBlur}\n          onChange={onChange}\n          className=\"w-full border-none bg-transparent p-0 outline-none\"\n        />\n      ) : (\n        <span data-slot=\"grid-cell-content\">{value}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction getUrlHref(urlString: string): string {\n  if (!urlString || urlString.trim() === \"\") return \"\";\n\n  const trimmed = urlString.trim();\n\n  // Check if it already has a protocol\n  if (trimmed.startsWith(\"http://\") || trimmed.startsWith(\"https://\")) {\n    return trimmed;\n  }\n\n  // Add http:// prefix for links without protocol\n  return `http://${trimmed}`;\n}\n\nexport function UrlCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue ?? \"\";\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({\n        rowIndex,\n        columnId,\n        value: currentValue || null,\n      });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: currentValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: currentValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue ?? \"\");\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  const onLinkClick = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (isEditing) {\n        event.preventDefault();\n        return;\n      }\n      // Stop propagation to prevent grid from interfering with link navigation\n      event.stopPropagation();\n    },\n    [isEditing],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {!isEditing && displayValue ? (\n        <div\n          data-slot=\"grid-cell-content\"\n          className=\"size-full overflow-hidden\"\n        >\n          <a\n            href={getUrlHref(displayValue)}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            onClick={onLinkClick}\n            className=\"truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60\"\n          >\n            {displayValue}\n          </a>\n        </div>\n      ) : (\n        <div\n          role=\"textbox\"\n          data-slot=\"grid-cell-content\"\n          contentEditable={isEditing}\n          tabIndex={-1}\n          ref={cellRef}\n          onBlur={onBlur}\n          onInput={onInput}\n          suppressContentEditableWarning\n          className={cn(\"size-full overflow-hidden outline-none\", {\n            \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n              isEditing,\n          })}\n        >\n          {displayValue}\n        </div>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function CheckboxCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as boolean;\n  const [value, setValue] = React.useState(Boolean(initialValue));\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(Boolean(initialValue));\n  }\n\n  const onCheckedChange = React.useCallback(\n    (checked: boolean) => {\n      setValue(checked);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isFocused && (event.key === \" \" || event.key === \"Enter\")) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      } else if (isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isFocused, value, onCheckedChange, meta],\n  );\n\n  const onWrapperClick = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isFocused) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      }\n    },\n    [isFocused, value, onCheckedChange],\n  );\n\n  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const onCheckboxMouseDown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const onCheckboxDoubleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={false}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className=\"flex size-full justify-center\"\n      onClick={onWrapperClick}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Checkbox\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        className=\"border-primary\"\n        onClick={onCheckboxClick}\n        onMouseDown={onCheckboxMouseDown}\n        onDoubleClick={onCheckboxDoubleClick}\n      />\n    </DataGridCellWrapper>\n  );\n}\n\nexport function SelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"select\" ? cellOpts.options : [];\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n  }\n\n  const onValueChange = React.useCallback(\n    (newValue: string) => {\n      setValue(newValue);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  const displayLabel =\n    options.find((opt) => opt.value === value)?.label ?? value;\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Select\n          value={value}\n          onValueChange={onValueChange}\n          open={isEditing}\n          onOpenChange={onOpenChange}\n        >\n          <SelectTrigger\n            size=\"sm\"\n            className=\"size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent\n            data-grid-cell-editor=\"\"\n            // compensate for the wrapper padding\n            align=\"start\"\n            alignOffset={-8}\n            sideOffset={-8}\n            className=\"min-w-[calc(var(--radix-select-trigger-width)+16px)]\"\n          >\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      ) : (\n        <span data-slot=\"grid-cell-content\">{displayLabel}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function MultiSelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as string[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const [selectedValues, setSelectedValues] =\n    React.useState<string[]>(cellValue);\n  const [searchValue, setSearchValue] = React.useState(\"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"multi-select\" ? cellOpts.options : [];\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setSelectedValues(cellValue);\n    setSearchValue(\"\");\n  }\n\n  const onValueChange = React.useCallback(\n    (value: string) => {\n      const newValues = selectedValues.includes(value)\n        ? selectedValues.filter((v) => v !== value)\n        : [...selectedValues, value];\n\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Clear search input and focus back on input after selection\n      setSearchValue(\"\");\n      queueMicrotask(() => inputRef.current?.focus());\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const removeValue = React.useCallback(\n    (valueToRemove: string, event?: React.MouseEvent) => {\n      event?.stopPropagation();\n      event?.preventDefault();\n      const newValues = selectedValues.filter((v) => v !== valueToRemove);\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Focus back on input after removing\n      setTimeout(() => inputRef.current?.focus(), 0);\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    setSelectedValues([]);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n    queueMicrotask(() => inputRef.current?.focus());\n  }, [meta, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setSelectedValues(cellValue);\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, cellValue, meta],\n  );\n\n  const onInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // Handle backspace when input is empty - remove last selected item\n      if (\n        event.key === \"Backspace\" &&\n        searchValue === \"\" &&\n        selectedValues.length > 0\n      ) {\n        event.preventDefault();\n        const lastValue = selectedValues[selectedValues.length - 1];\n        if (lastValue) {\n          removeValue(lastValue);\n        }\n      }\n      // Prevent escape from propagating to close the popover immediately\n      // Let the command handle it first\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n      }\n    },\n    [searchValue, selectedValues, removeValue],\n  );\n\n  const displayLabels = selectedValues\n    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)\n    .filter(Boolean);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =\n    useBadgeOverflow({\n      items: displayLabels,\n      getLabel: (label) => label,\n      containerRef,\n      lineCount,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[300px] rounded-none p-0\"\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <Command className=\"**:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:border-none **:data-[slot=command-input-wrapper]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden\">\n              <div className=\"flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5\">\n                {selectedValues.map((value) => {\n                  const option = options.find((opt) => opt.value === value);\n                  const label = option?.label ?? value;\n\n                  return (\n                    <Badge\n                      key={value}\n                      variant=\"secondary\"\n                      className=\"h-5 gap-1 px-1.5 text-xs\"\n                    >\n                      {label}\n                      <button\n                        type=\"button\"\n                        onClick={(event) => removeValue(value, event)}\n                        onPointerDown={(event) => {\n                          event.preventDefault();\n                          event.stopPropagation();\n                        }}\n                      >\n                        <X className=\"size-3\" />\n                      </button>\n                    </Badge>\n                  );\n                })}\n                <CommandInput\n                  ref={inputRef}\n                  value={searchValue}\n                  onValueChange={setSearchValue}\n                  onKeyDown={onInputKeyDown}\n                  placeholder=\"Search...\"\n                  className=\"h-auto flex-1 p-0\"\n                />\n              </div>\n              <CommandList className=\"max-h-full\">\n                <CommandEmpty>No options found.</CommandEmpty>\n                <CommandGroup className=\"max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden\">\n                  {options.map((option) => {\n                    const isSelected = selectedValues.includes(option.value);\n\n                    return (\n                      <CommandItem\n                        key={option.value}\n                        value={option.label}\n                        onSelect={() => onValueChange(option.value)}\n                      >\n                        <div\n                          className={cn(\n                            \"flex size-4 items-center justify-center rounded-sm border border-primary\",\n                            isSelected\n                              ? \"bg-primary text-primary-foreground\"\n                              : \"opacity-50 [&_svg]:invisible\",\n                          )}\n                        >\n                          <Check className=\"size-3\" />\n                        </div>\n                        <span>{option.label}</span>\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n                {selectedValues.length > 0 && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <CommandItem\n                        onSelect={clearAll}\n                        className=\"justify-center text-muted-foreground\"\n                      >\n                        Clear all\n                      </CommandItem>\n                    </CommandGroup>\n                  </>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {displayLabels.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleLabels.map((label, index) => (\n            <Badge\n              key={selectedValues[index]}\n              variant=\"secondary\"\n              className=\"h-5 shrink-0 px-1.5 text-xs\"\n            >\n              {label}\n            </Badge>\n          ))}\n          {hiddenBadgeCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenBadgeCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatDateForDisplay(dateStr: string) {\n  if (!dateStr) return \"\";\n  const date = new Date(dateStr);\n  return date.toLocaleDateString();\n}\n\nexport function DateCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  const selectedDate = value ? new Date(value) : undefined;\n\n  const onDateSelect = React.useCallback(\n    (date: Date | undefined) => {\n      if (!date) return;\n\n      const formattedDate = date.toISOString().split(\"T\")[0] ?? \"\";\n      setValue(formattedDate);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: formattedDate });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Popover open={isEditing} onOpenChange={onOpenChange}>\n        <PopoverAnchor asChild>\n          <span data-slot=\"grid-cell-content\">\n            {formatDateForDisplay(value)}\n          </span>\n        </PopoverAnchor>\n        {isEditing && (\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            alignOffset={-8}\n            className=\"w-auto p-0\"\n          >\n            <Calendar\n              autoFocus\n              captionLayout=\"dropdown\"\n              mode=\"single\"\n              defaultMonth={selectedDate ?? new Date()}\n              selected={selectedDate}\n              onSelect={onDateSelect}\n            />\n          </PopoverContent>\n        )}\n      </Popover>\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 B\";\n  const k = 1024;\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n}\n\nfunction getFileIcon(\n  type: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> {\n  if (type.startsWith(\"image/\")) return FileImage;\n  if (type.startsWith(\"video/\")) return FileVideo;\n  if (type.startsWith(\"audio/\")) return FileAudio;\n  if (type.includes(\"pdf\")) return FileText;\n  if (type.includes(\"zip\") || type.includes(\"rar\")) return FileArchive;\n  if (\n    type.includes(\"word\") ||\n    type.includes(\"document\") ||\n    type.includes(\"doc\")\n  )\n    return FileText;\n  if (type.includes(\"sheet\") || type.includes(\"excel\") || type.includes(\"xls\"))\n    return FileSpreadsheet;\n  if (\n    type.includes(\"presentation\") ||\n    type.includes(\"powerpoint\") ||\n    type.includes(\"ppt\")\n  )\n    return Presentation;\n  return File;\n}\n\nexport function FileCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as FileCellData[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const labelId = React.useId();\n  const descriptionId = React.useId();\n\n  const [files, setFiles] = React.useState<FileCellData[]>(cellValue);\n  const [uploadingFiles, setUploadingFiles] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const [isDraggingOver, setIsDraggingOver] = React.useState(false);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const dropzoneRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const fileCellOpts = cellOpts?.variant === \"file\" ? cellOpts : null;\n  const maxFileSize = fileCellOpts?.maxFileSize ?? 10 * 1024 * 1024;\n  const maxFiles = fileCellOpts?.maxFiles ?? 10;\n  const accept = fileCellOpts?.accept;\n  const multiple = fileCellOpts?.multiple ?? true;\n\n  const acceptedTypes = React.useMemo(\n    () => (accept ? accept.split(\",\").map((t) => t.trim()) : null),\n    [accept],\n  );\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setFiles(cellValue);\n    setError(null);\n  }\n\n  const validateFile = React.useCallback(\n    (file: File): string | null => {\n      if (maxFileSize && file.size > maxFileSize) {\n        return `File size exceeds ${formatFileSize(maxFileSize)}`;\n      }\n      if (acceptedTypes) {\n        const fileExtension = `.${file.name.split(\".\").pop()}`;\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.endsWith(\"/*\")) {\n            // Handle wildcard types like \"image/*\"\n            const baseType = type.slice(0, -2);\n            return file.type.startsWith(`${baseType}/`);\n          }\n          if (type.startsWith(\".\")) {\n            // Handle file extensions like \".pdf\"\n            return fileExtension.toLowerCase() === type.toLowerCase();\n          }\n          // Exact match for specific MIME types\n          return file.type === type;\n        });\n        if (!isAccepted) {\n          return `File type not accepted. Accepted: ${accept}`;\n        }\n      }\n      return null;\n    },\n    [maxFileSize, acceptedTypes, accept],\n  );\n\n  const addFiles = React.useCallback(\n    async (newFiles: File[], skipUpload = false) => {\n      setError(null);\n\n      // Check max files limit\n      if (maxFiles && files.length + newFiles.length > maxFiles) {\n        setError(`Maximum ${maxFiles} files allowed`);\n        return;\n      }\n\n      const validFiles: FileCellData[] = [];\n      let firstError: string | null = null;\n\n      for (const file of newFiles) {\n        const validationError = validateFile(file);\n        if (validationError) {\n          if (!firstError) {\n            firstError = validationError;\n          }\n          continue;\n        }\n\n        // Create file data object with temporary ID\n        const fileData: FileCellData = {\n          id: crypto.randomUUID(),\n          name: file.name,\n          size: file.size,\n          type: file.type,\n          url: URL.createObjectURL(file),\n        };\n        validFiles.push(fileData);\n      }\n\n      if (firstError) {\n        setError(firstError);\n      }\n\n      if (validFiles.length > 0) {\n        // If not skipping upload (dropped on cell), show skeletons first\n        if (!skipUpload) {\n          // Add temp files immediately (will show as skeletons)\n          const tempFiles = validFiles.map((f) => ({ ...f, url: undefined }));\n          const filesWithTemp = [...files, ...tempFiles];\n          setFiles(filesWithTemp);\n\n          // Mark as uploading\n          const uploadingIds = new Set(validFiles.map((f) => f.id));\n          setUploadingFiles(uploadingIds);\n\n          // Simulate upload delay (in real app, this would be actual upload)\n          await new Promise((resolve) => setTimeout(resolve, 800));\n\n          // Replace temp files with real ones\n          const finalFiles = filesWithTemp.map(\n            (f) => validFiles.find((vf) => vf.id === f.id) || f,\n          );\n          setFiles(finalFiles);\n          setUploadingFiles(new Set());\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: finalFiles });\n        } else {\n          // If from editor, add immediately without skeleton\n          const updatedFiles = [...files, ...validFiles];\n          setFiles(updatedFiles);\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n        }\n      }\n    },\n    [files, maxFiles, validateFile, meta, rowIndex, columnId],\n  );\n\n  const removeFile = React.useCallback(\n    (fileId: string) => {\n      setError(null);\n      // Revoke object URL to prevent memory leak\n      const fileToRemove = files.find((f) => f.id === fileId);\n      if (fileToRemove?.url) {\n        URL.revokeObjectURL(fileToRemove.url);\n      }\n      const updatedFiles = files.filter((f) => f.id !== fileId);\n      setFiles(updatedFiles);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n    },\n    [files, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    // Revoke all object URLs to prevent memory leak\n    for (const file of files) {\n      if (file.url) {\n        URL.revokeObjectURL(file.url);\n      }\n    }\n    setFiles([]);\n    setError(null);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n  }, [files, meta, rowIndex, columnId]);\n\n  const onDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setIsDragging(true);\n  }, []);\n\n  const onDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDragging(false);\n    }\n  }, []);\n\n  const onDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      addFiles(droppedFiles, true); // Skip upload skeleton in editor\n    },\n    [addFiles],\n  );\n\n  const onFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const selectedFiles = Array.from(event.target.files ?? []);\n      addFiles(selectedFiles, true); // Skip upload skeleton for manual selection\n      // Reset input so the same file can be selected again\n      event.target.value = \"\";\n    },\n    [addFiles],\n  );\n\n  // Cell-level drag handlers (for dropping directly on cell)\n  const onCellDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Only show drop indicator if dragging files\n    if (event.dataTransfer.types.includes(\"Files\")) {\n      setIsDraggingOver(true);\n    }\n  }, []);\n\n  const onCellDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDraggingOver(false);\n    }\n  }, []);\n\n  const onCellDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onCellDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDraggingOver(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      if (droppedFiles.length > 0) {\n        addFiles(droppedFiles, false); // Show skeleton for dropped files\n      }\n    },\n    [addFiles],\n  );\n\n  const onDropzoneClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const onDropzoneKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onDropzoneClick();\n      }\n    },\n    [onDropzoneClick],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setError(null);\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onEscapeKeyDown: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onEscapeKeyDown\"]\n  > = React.useCallback((event) => {\n    // Prevent the escape key from propagating to the data grid's keyboard handler\n    // which would call blurCell() and remove focus from the cell\n    event.stopPropagation();\n  }, []);\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    // Focus the dropzone for better keyboard UX - users can press Enter again to open file dialog\n    queueMicrotask(() => {\n      dropzoneRef.current?.focus();\n    });\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          setFiles(cellValue);\n          setError(null);\n          meta?.onCellEditingStop?.();\n        } else if (event.key === \" \") {\n          event.preventDefault();\n          onDropzoneClick();\n        }\n      } else if (isFocused && event.key === \"Enter\") {\n        // Handle Enter key to start editing when focused but not editing\n        event.preventDefault();\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [\n      isEditing,\n      isFocused,\n      cellValue,\n      meta,\n      onDropzoneClick,\n      rowIndex,\n      columnId,\n    ],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const file of files) {\n        if (file.url) {\n          URL.revokeObjectURL(file.url);\n        }\n      }\n    };\n  }, [files]);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } =\n    useBadgeOverflow({\n      items: files,\n      getLabel: (file) => file.name,\n      containerRef,\n      lineCount,\n      cacheKeyPrefix: \"file\",\n      iconSize: 12,\n      maxWidth: 100,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className={cn({\n        \"ring-1 ring-primary/80 ring-inset\": isDraggingOver,\n      })}\n      onDragEnter={onCellDragEnter}\n      onDragLeave={onCellDragLeave}\n      onDragOver={onCellDragOver}\n      onDrop={onCellDrop}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[400px] rounded-none p-0\"\n            onEscapeKeyDown={onEscapeKeyDown}\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <div className=\"flex flex-col gap-2 p-3\">\n              <span id={labelId} className=\"sr-only\">\n                File upload\n              </span>\n              <div\n                role=\"region\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                aria-invalid={!!error}\n                data-dragging={isDragging ? \"\" : undefined}\n                data-invalid={error ? \"\" : undefined}\n                tabIndex={isDragging ? -1 : 0}\n                className=\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20\"\n                ref={dropzoneRef}\n                onClick={onDropzoneClick}\n                onDragEnter={onDragEnter}\n                onDragLeave={onDragLeave}\n                onDragOver={onDragOver}\n                onDrop={onDrop}\n                onKeyDown={onDropzoneKeyDown}\n              >\n                <Upload className=\"size-8 text-muted-foreground\" />\n                <div className=\"text-center text-sm\">\n                  <p className=\"font-medium\">\n                    {isDragging ? \"Drop files here\" : \"Drag files here\"}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    or click to browse\n                  </p>\n                </div>\n                <p id={descriptionId} className=\"text-muted-foreground text-xs\">\n                  {maxFileSize\n                    ? `Max size: ${formatFileSize(maxFileSize)}${maxFiles ? ` • Max ${maxFiles} files` : \"\"}`\n                    : maxFiles\n                      ? `Max ${maxFiles} files`\n                      : \"Select files to upload\"}\n                </p>\n              </div>\n              <input\n                type=\"file\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                multiple={multiple}\n                accept={accept}\n                className=\"sr-only\"\n                ref={fileInputRef}\n                onChange={onFileInputChange}\n              />\n              {error && (\n                <div className=\"rounded-md bg-destructive/10 px-3 py-2 text-destructive text-xs\">\n                  {error}\n                </div>\n              )}\n              {files.length > 0 && (\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <p className=\"font-medium text-muted-foreground text-xs\">\n                      {files.length} {files.length === 1 ? \"file\" : \"files\"}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-6 text-muted-foreground text-xs\"\n                      onClick={clearAll}\n                    >\n                      Clear all\n                    </Button>\n                  </div>\n                  <div className=\"max-h-[200px] space-y-1 overflow-y-auto\">\n                    {files.map((file) => {\n                      const FileIcon = getFileIcon(file.type);\n\n                      return (\n                        <div\n                          key={file.id}\n                          className=\"flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1.5\"\n                        >\n                          {FileIcon && (\n                            <FileIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n                          )}\n                          <div className=\"flex-1 overflow-hidden\">\n                            <p className=\"truncate text-sm\">{file.name}</p>\n                            <p className=\"text-muted-foreground text-xs\">\n                              {formatFileSize(file.size)}\n                            </p>\n                          </div>\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            className=\"size-5 rounded-sm\"\n                            onClick={() => removeFile(file.id)}\n                          >\n                            <X className=\"size-3\" />\n                          </Button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {isDraggingOver ? (\n        <div className=\"flex items-center justify-center gap-2 text-primary text-sm\">\n          <Upload className=\"size-4\" />\n          <span>Drop files here</span>\n        </div>\n      ) : files.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleFiles.map((file) => {\n            const isUploading = uploadingFiles.has(file.id);\n\n            if (isUploading) {\n              // Show skeleton for uploading files\n              return (\n                <Skeleton\n                  key={file.id}\n                  className=\"h-5 shrink-0 px-1.5\"\n                  style={{\n                    width: `${Math.min(file.name.length * 8 + 30, 100)}px`,\n                  }}\n                />\n              );\n            }\n\n            return (\n              <Badge\n                key={file.id}\n                variant=\"secondary\"\n                className=\"h-5 shrink-0 gap-1 px-1.5 text-xs\"\n              >\n                {React.createElement(getFileIcon(file.type), {\n                  className: \"size-3 shrink-0\",\n                })}\n                <span className=\"max-w-[100px] truncate\">{file.name}</span>\n              </Badge>\n            );\n          })}\n          {hiddenFileCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenFileCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  Check,\n  File,\n  FileArchive,\n  FileAudio,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo,\n  Presentation,\n  Upload,\n  X,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { DataGridCellWrapper } from \"@/components/data-grid/data-grid-cell-wrapper\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { useBadgeOverflow } from \"@/hooks/use-badge-overflow\";\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getCellKey, getLineCount } from \"@/lib/data-grid\";\nimport { cn } from \"@/lib/utils\";\nimport type { CellVariantProps, FileCellData } from \"@/types/data-grid\";\n\nexport function ShortTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue;\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    // Read the current value directly from the DOM to avoid stale state\n    const currentValue = cellRef.current?.textContent ?? \"\";\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue}\n      </div>\n    </DataGridCellWrapper>\n  );\n}\n\nexport function LongTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  // Debounced auto-save (300ms delay)\n  const debouncedSave = useDebouncedCallback((newValue: string) => {\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n  }, 300);\n\n  const onSave = React.useCallback(() => {\n    // Immediately save any pending changes and close the popover\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onCancel = React.useCallback(() => {\n    // Restore the original value\n    setValue(initialValue ?? \"\");\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue });\n    meta?.onCellEditingStop?.();\n  }, [meta, initialValue, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        // Immediately save any pending changes when closing\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, value, initialValue, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    if (textareaRef.current) {\n      textareaRef.current.focus();\n      const length = textareaRef.current.value.length;\n      textareaRef.current.setSelectionRange(length, length);\n    }\n  }, []);\n\n  const onBlur = React.useCallback(() => {\n    // Immediately save any pending changes on blur\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      const newValue = event.target.value;\n      setValue(newValue);\n      // Debounced auto-save\n      debouncedSave(newValue);\n    },\n    [debouncedSave],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onCancel();\n      } else if (event.key === \"Enter\" && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        onSave();\n      } else if (event.key === \"Tab\") {\n        event.preventDefault();\n        // Save any pending changes\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n        return;\n      }\n      // Stop propagation to prevent grid navigation\n      event.stopPropagation();\n    },\n    [onSave, onCancel, value, initialValue, meta, rowIndex, columnId],\n  );\n\n  return (\n    <Popover open={isEditing} onOpenChange={onOpenChange}>\n      <PopoverAnchor asChild>\n        <DataGridCellWrapper\n          ref={containerRef}\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        >\n          <span data-slot=\"grid-cell-content\">{value}</span>\n        </DataGridCellWrapper>\n      </PopoverAnchor>\n      <PopoverContent\n        data-grid-cell-editor=\"\"\n        align=\"start\"\n        side=\"bottom\"\n        sideOffset={sideOffset}\n        className=\"w-[400px] rounded-none p-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n      >\n        <Textarea\n          placeholder=\"Enter text...\"\n          className=\"min-h-[150px] resize-none rounded-none border-0 shadow-none focus-visible:ring-0\"\n          ref={textareaRef}\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function NumberCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as number;\n  const [value, setValue] = React.useState(String(initialValue ?? \"\"));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const min = cellOpts?.variant === \"number\" ? cellOpts.min : undefined;\n  const max = cellOpts?.variant === \"number\" ? cellOpts.max : undefined;\n  const step = cellOpts?.variant === \"number\" ? cellOpts.step : undefined;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(String(initialValue ?? \"\"));\n  }\n\n  const onBlur = React.useCallback(() => {\n    const numValue = value === \"\" ? null : Number(value);\n    if (numValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue, value]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(String(initialValue ?? \"\"));\n          inputRef.current?.blur();\n        }\n      } else if (isFocused) {\n        // Handle Backspace to start editing with empty value\n        if (event.key === \"Backspace\") {\n          setValue(\"\");\n        } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n          // Handle typing to pre-fill the value when editing starts\n          setValue(event.key);\n        }\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId, value],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, [isEditing]);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <input\n          ref={inputRef}\n          type=\"number\"\n          value={value}\n          min={min}\n          max={max}\n          step={step}\n          onBlur={onBlur}\n          onChange={onChange}\n          className=\"w-full border-none bg-transparent p-0 outline-none\"\n        />\n      ) : (\n        <span data-slot=\"grid-cell-content\">{value}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction getUrlHref(urlString: string): string {\n  if (!urlString || urlString.trim() === \"\") return \"\";\n\n  const trimmed = urlString.trim();\n\n  // Check if it already has a protocol\n  if (trimmed.startsWith(\"http://\") || trimmed.startsWith(\"https://\")) {\n    return trimmed;\n  }\n\n  // Add http:// prefix for links without protocol\n  return `http://${trimmed}`;\n}\n\nexport function UrlCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue ?? \"\";\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({\n        rowIndex,\n        columnId,\n        value: currentValue || null,\n      });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: currentValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: currentValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue ?? \"\");\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  const onLinkClick = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (isEditing) {\n        event.preventDefault();\n        return;\n      }\n      // Stop propagation to prevent grid from interfering with link navigation\n      event.stopPropagation();\n    },\n    [isEditing],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {!isEditing && displayValue ? (\n        <div\n          data-slot=\"grid-cell-content\"\n          className=\"size-full overflow-hidden\"\n        >\n          <a\n            href={getUrlHref(displayValue)}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            onClick={onLinkClick}\n            data-focused={isFocused ? \"\" : undefined}\n            className=\"truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60 data-focused:text-foreground data-focused:decoration-foreground/50 data-focused:hover:decoration-foreground/70\"\n          >\n            {displayValue}\n          </a>\n        </div>\n      ) : (\n        <div\n          role=\"textbox\"\n          data-slot=\"grid-cell-content\"\n          contentEditable={isEditing}\n          tabIndex={-1}\n          ref={cellRef}\n          onBlur={onBlur}\n          onInput={onInput}\n          suppressContentEditableWarning\n          className={cn(\"size-full overflow-hidden outline-none\", {\n            \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n              isEditing,\n          })}\n        >\n          {displayValue}\n        </div>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function CheckboxCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as boolean;\n  const [value, setValue] = React.useState(Boolean(initialValue));\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(Boolean(initialValue));\n  }\n\n  const onCheckedChange = React.useCallback(\n    (checked: boolean) => {\n      setValue(checked);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isFocused && (event.key === \" \" || event.key === \"Enter\")) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      } else if (isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isFocused, value, onCheckedChange, meta],\n  );\n\n  const onWrapperClick = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isFocused) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      }\n    },\n    [isFocused, value, onCheckedChange],\n  );\n\n  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const onCheckboxMouseDown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const onCheckboxDoubleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={false}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className=\"flex size-full justify-center\"\n      onClick={onWrapperClick}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Checkbox\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        className=\"border-primary\"\n        onClick={onCheckboxClick}\n        onMouseDown={onCheckboxMouseDown}\n        onDoubleClick={onCheckboxDoubleClick}\n      />\n    </DataGridCellWrapper>\n  );\n}\n\nexport function SelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"select\" ? cellOpts.options : [];\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n  }\n\n  const onValueChange = React.useCallback(\n    (newValue: string) => {\n      setValue(newValue);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  const displayLabel =\n    options.find((opt) => opt.value === value)?.label ?? value;\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Select\n          value={value}\n          onValueChange={onValueChange}\n          open={isEditing}\n          onOpenChange={onOpenChange}\n        >\n          <SelectTrigger\n            size=\"sm\"\n            className=\"size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent\n            data-grid-cell-editor=\"\"\n            // compensate for the wrapper padding\n            align=\"start\"\n            alignOffset={-8}\n            sideOffset={-8}\n            className=\"min-w-[calc(var(--radix-select-trigger-width)+16px)]\"\n          >\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      ) : (\n        <span data-slot=\"grid-cell-content\">{displayLabel}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function MultiSelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as string[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const [selectedValues, setSelectedValues] =\n    React.useState<string[]>(cellValue);\n  const [searchValue, setSearchValue] = React.useState(\"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"multi-select\" ? cellOpts.options : [];\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setSelectedValues(cellValue);\n    setSearchValue(\"\");\n  }\n\n  const onValueChange = React.useCallback(\n    (value: string) => {\n      const newValues = selectedValues.includes(value)\n        ? selectedValues.filter((v) => v !== value)\n        : [...selectedValues, value];\n\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Clear search input and focus back on input after selection\n      setSearchValue(\"\");\n      queueMicrotask(() => inputRef.current?.focus());\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const removeValue = React.useCallback(\n    (valueToRemove: string, event?: React.MouseEvent) => {\n      event?.stopPropagation();\n      event?.preventDefault();\n      const newValues = selectedValues.filter((v) => v !== valueToRemove);\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Focus back on input after removing\n      setTimeout(() => inputRef.current?.focus(), 0);\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    setSelectedValues([]);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n    queueMicrotask(() => inputRef.current?.focus());\n  }, [meta, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setSelectedValues(cellValue);\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, cellValue, meta],\n  );\n\n  const onInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // Handle backspace when input is empty - remove last selected item\n      if (\n        event.key === \"Backspace\" &&\n        searchValue === \"\" &&\n        selectedValues.length > 0\n      ) {\n        event.preventDefault();\n        const lastValue = selectedValues[selectedValues.length - 1];\n        if (lastValue) {\n          removeValue(lastValue);\n        }\n      }\n      // Prevent escape from propagating to close the popover immediately\n      // Let the command handle it first\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n      }\n    },\n    [searchValue, selectedValues, removeValue],\n  );\n\n  const displayLabels = selectedValues\n    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)\n    .filter(Boolean);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =\n    useBadgeOverflow({\n      items: displayLabels,\n      getLabel: (label) => label,\n      containerRef,\n      lineCount,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[300px] rounded-none p-0\"\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <Command className=\"**:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:border-none **:data-[slot=command-input-wrapper]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden\">\n              <div className=\"flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5\">\n                {selectedValues.map((value) => {\n                  const option = options.find((opt) => opt.value === value);\n                  const label = option?.label ?? value;\n\n                  return (\n                    <Badge\n                      key={value}\n                      variant=\"secondary\"\n                      className=\"h-5 gap-1 px-1.5 text-xs\"\n                    >\n                      {label}\n                      <button\n                        type=\"button\"\n                        onClick={(event) => removeValue(value, event)}\n                        onPointerDown={(event) => {\n                          event.preventDefault();\n                          event.stopPropagation();\n                        }}\n                      >\n                        <X className=\"size-3\" />\n                      </button>\n                    </Badge>\n                  );\n                })}\n                <CommandInput\n                  ref={inputRef}\n                  value={searchValue}\n                  onValueChange={setSearchValue}\n                  onKeyDown={onInputKeyDown}\n                  placeholder=\"Search...\"\n                  className=\"h-auto flex-1 p-0\"\n                />\n              </div>\n              <CommandList className=\"max-h-full\">\n                <CommandEmpty>No options found.</CommandEmpty>\n                <CommandGroup className=\"max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden\">\n                  {options.map((option) => {\n                    const isSelected = selectedValues.includes(option.value);\n\n                    return (\n                      <CommandItem\n                        key={option.value}\n                        value={option.label}\n                        onSelect={() => onValueChange(option.value)}\n                      >\n                        <div\n                          className={cn(\n                            \"flex size-4 items-center justify-center rounded-sm border border-primary\",\n                            isSelected\n                              ? \"bg-primary text-primary-foreground\"\n                              : \"opacity-50 [&_svg]:invisible\",\n                          )}\n                        >\n                          <Check className=\"size-3\" />\n                        </div>\n                        <span>{option.label}</span>\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n                {selectedValues.length > 0 && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <CommandItem\n                        onSelect={clearAll}\n                        className=\"justify-center text-muted-foreground\"\n                      >\n                        Clear all\n                      </CommandItem>\n                    </CommandGroup>\n                  </>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {displayLabels.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleLabels.map((label, index) => (\n            <Badge\n              key={selectedValues[index]}\n              variant=\"secondary\"\n              className=\"h-5 shrink-0 px-1.5 text-xs\"\n            >\n              {label}\n            </Badge>\n          ))}\n          {hiddenBadgeCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenBadgeCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatDateForDisplay(dateStr: string) {\n  if (!dateStr) return \"\";\n  const date = new Date(dateStr);\n  return date.toLocaleDateString();\n}\n\nexport function DateCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  const selectedDate = value ? new Date(value) : undefined;\n\n  const onDateSelect = React.useCallback(\n    (date: Date | undefined) => {\n      if (!date) return;\n\n      const formattedDate = date.toISOString().split(\"T\")[0] ?? \"\";\n      setValue(formattedDate);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: formattedDate });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Popover open={isEditing} onOpenChange={onOpenChange}>\n        <PopoverAnchor asChild>\n          <span data-slot=\"grid-cell-content\">\n            {formatDateForDisplay(value)}\n          </span>\n        </PopoverAnchor>\n        {isEditing && (\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            alignOffset={-8}\n            className=\"w-auto p-0\"\n          >\n            <Calendar\n              autoFocus\n              captionLayout=\"dropdown\"\n              mode=\"single\"\n              defaultMonth={selectedDate ?? new Date()}\n              selected={selectedDate}\n              onSelect={onDateSelect}\n            />\n          </PopoverContent>\n        )}\n      </Popover>\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 B\";\n  const k = 1024;\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n}\n\nfunction getFileIcon(\n  type: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> {\n  if (type.startsWith(\"image/\")) return FileImage;\n  if (type.startsWith(\"video/\")) return FileVideo;\n  if (type.startsWith(\"audio/\")) return FileAudio;\n  if (type.includes(\"pdf\")) return FileText;\n  if (type.includes(\"zip\") || type.includes(\"rar\")) return FileArchive;\n  if (\n    type.includes(\"word\") ||\n    type.includes(\"document\") ||\n    type.includes(\"doc\")\n  )\n    return FileText;\n  if (type.includes(\"sheet\") || type.includes(\"excel\") || type.includes(\"xls\"))\n    return FileSpreadsheet;\n  if (\n    type.includes(\"presentation\") ||\n    type.includes(\"powerpoint\") ||\n    type.includes(\"ppt\")\n  )\n    return Presentation;\n  return File;\n}\n\nexport function FileCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as FileCellData[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const labelId = React.useId();\n  const descriptionId = React.useId();\n\n  const [files, setFiles] = React.useState<FileCellData[]>(cellValue);\n  const [uploadingFiles, setUploadingFiles] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const [isDraggingOver, setIsDraggingOver] = React.useState(false);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const dropzoneRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const fileCellOpts = cellOpts?.variant === \"file\" ? cellOpts : null;\n  const maxFileSize = fileCellOpts?.maxFileSize ?? 10 * 1024 * 1024;\n  const maxFiles = fileCellOpts?.maxFiles ?? 10;\n  const accept = fileCellOpts?.accept;\n  const multiple = fileCellOpts?.multiple ?? true;\n\n  const acceptedTypes = React.useMemo(\n    () => (accept ? accept.split(\",\").map((t) => t.trim()) : null),\n    [accept],\n  );\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setFiles(cellValue);\n    setError(null);\n  }\n\n  const validateFile = React.useCallback(\n    (file: File): string | null => {\n      if (maxFileSize && file.size > maxFileSize) {\n        return `File size exceeds ${formatFileSize(maxFileSize)}`;\n      }\n      if (acceptedTypes) {\n        const fileExtension = `.${file.name.split(\".\").pop()}`;\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.endsWith(\"/*\")) {\n            // Handle wildcard types like \"image/*\"\n            const baseType = type.slice(0, -2);\n            return file.type.startsWith(`${baseType}/`);\n          }\n          if (type.startsWith(\".\")) {\n            // Handle file extensions like \".pdf\"\n            return fileExtension.toLowerCase() === type.toLowerCase();\n          }\n          // Exact match for specific MIME types\n          return file.type === type;\n        });\n        if (!isAccepted) {\n          return `File type not accepted. Accepted: ${accept}`;\n        }\n      }\n      return null;\n    },\n    [maxFileSize, acceptedTypes, accept],\n  );\n\n  const addFiles = React.useCallback(\n    async (newFiles: File[], skipUpload = false) => {\n      setError(null);\n\n      // Check max files limit\n      if (maxFiles && files.length + newFiles.length > maxFiles) {\n        setError(`Maximum ${maxFiles} files allowed`);\n        return;\n      }\n\n      const validFiles: FileCellData[] = [];\n      let firstError: string | null = null;\n\n      for (const file of newFiles) {\n        const validationError = validateFile(file);\n        if (validationError) {\n          if (!firstError) {\n            firstError = validationError;\n          }\n          continue;\n        }\n\n        // Create file data object with temporary ID\n        const fileData: FileCellData = {\n          id: crypto.randomUUID(),\n          name: file.name,\n          size: file.size,\n          type: file.type,\n          url: URL.createObjectURL(file),\n        };\n        validFiles.push(fileData);\n      }\n\n      if (firstError) {\n        setError(firstError);\n      }\n\n      if (validFiles.length > 0) {\n        // If not skipping upload (dropped on cell), show skeletons first\n        if (!skipUpload) {\n          // Add temp files immediately (will show as skeletons)\n          const tempFiles = validFiles.map((f) => ({ ...f, url: undefined }));\n          const filesWithTemp = [...files, ...tempFiles];\n          setFiles(filesWithTemp);\n\n          // Mark as uploading\n          const uploadingIds = new Set(validFiles.map((f) => f.id));\n          setUploadingFiles(uploadingIds);\n\n          // Simulate upload delay (in real app, this would be actual upload)\n          await new Promise((resolve) => setTimeout(resolve, 800));\n\n          // Replace temp files with real ones\n          const finalFiles = filesWithTemp.map(\n            (f) => validFiles.find((vf) => vf.id === f.id) || f,\n          );\n          setFiles(finalFiles);\n          setUploadingFiles(new Set());\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: finalFiles });\n        } else {\n          // If from editor, add immediately without skeleton\n          const updatedFiles = [...files, ...validFiles];\n          setFiles(updatedFiles);\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n        }\n      }\n    },\n    [files, maxFiles, validateFile, meta, rowIndex, columnId],\n  );\n\n  const removeFile = React.useCallback(\n    (fileId: string) => {\n      setError(null);\n      // Revoke object URL to prevent memory leak\n      const fileToRemove = files.find((f) => f.id === fileId);\n      if (fileToRemove?.url) {\n        URL.revokeObjectURL(fileToRemove.url);\n      }\n      const updatedFiles = files.filter((f) => f.id !== fileId);\n      setFiles(updatedFiles);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n    },\n    [files, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    // Revoke all object URLs to prevent memory leak\n    for (const file of files) {\n      if (file.url) {\n        URL.revokeObjectURL(file.url);\n      }\n    }\n    setFiles([]);\n    setError(null);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n  }, [files, meta, rowIndex, columnId]);\n\n  const onDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setIsDragging(true);\n  }, []);\n\n  const onDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDragging(false);\n    }\n  }, []);\n\n  const onDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      addFiles(droppedFiles, true); // Skip upload skeleton in editor\n    },\n    [addFiles],\n  );\n\n  const onFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const selectedFiles = Array.from(event.target.files ?? []);\n      addFiles(selectedFiles, true); // Skip upload skeleton for manual selection\n      // Reset input so the same file can be selected again\n      event.target.value = \"\";\n    },\n    [addFiles],\n  );\n\n  // Cell-level drag handlers (for dropping directly on cell)\n  const onCellDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Only show drop indicator if dragging files\n    if (event.dataTransfer.types.includes(\"Files\")) {\n      setIsDraggingOver(true);\n    }\n  }, []);\n\n  const onCellDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDraggingOver(false);\n    }\n  }, []);\n\n  const onCellDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onCellDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDraggingOver(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      if (droppedFiles.length > 0) {\n        addFiles(droppedFiles, false); // Show skeleton for dropped files\n      }\n    },\n    [addFiles],\n  );\n\n  const onDropzoneClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const onDropzoneKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onDropzoneClick();\n      }\n    },\n    [onDropzoneClick],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setError(null);\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onEscapeKeyDown: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onEscapeKeyDown\"]\n  > = React.useCallback((event) => {\n    // Prevent the escape key from propagating to the data grid's keyboard handler\n    // which would call blurCell() and remove focus from the cell\n    event.stopPropagation();\n  }, []);\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    // Focus the dropzone for better keyboard UX - users can press Enter again to open file dialog\n    queueMicrotask(() => {\n      dropzoneRef.current?.focus();\n    });\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          setFiles(cellValue);\n          setError(null);\n          meta?.onCellEditingStop?.();\n        } else if (event.key === \" \") {\n          event.preventDefault();\n          onDropzoneClick();\n        }\n      } else if (isFocused && event.key === \"Enter\") {\n        // Handle Enter key to start editing when focused but not editing\n        event.preventDefault();\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [\n      isEditing,\n      isFocused,\n      cellValue,\n      meta,\n      onDropzoneClick,\n      rowIndex,\n      columnId,\n    ],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const file of files) {\n        if (file.url) {\n          URL.revokeObjectURL(file.url);\n        }\n      }\n    };\n  }, [files]);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } =\n    useBadgeOverflow({\n      items: files,\n      getLabel: (file) => file.name,\n      containerRef,\n      lineCount,\n      cacheKeyPrefix: \"file\",\n      iconSize: 12,\n      maxWidth: 100,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className={cn({\n        \"ring-1 ring-primary/80 ring-inset\": isDraggingOver,\n      })}\n      onDragEnter={onCellDragEnter}\n      onDragLeave={onCellDragLeave}\n      onDragOver={onCellDragOver}\n      onDrop={onCellDrop}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[400px] rounded-none p-0\"\n            onEscapeKeyDown={onEscapeKeyDown}\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <div className=\"flex flex-col gap-2 p-3\">\n              <span id={labelId} className=\"sr-only\">\n                File upload\n              </span>\n              <div\n                role=\"region\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                aria-invalid={!!error}\n                data-dragging={isDragging ? \"\" : undefined}\n                data-invalid={error ? \"\" : undefined}\n                tabIndex={isDragging ? -1 : 0}\n                className=\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20\"\n                ref={dropzoneRef}\n                onClick={onDropzoneClick}\n                onDragEnter={onDragEnter}\n                onDragLeave={onDragLeave}\n                onDragOver={onDragOver}\n                onDrop={onDrop}\n                onKeyDown={onDropzoneKeyDown}\n              >\n                <Upload className=\"size-8 text-muted-foreground\" />\n                <div className=\"text-center text-sm\">\n                  <p className=\"font-medium\">\n                    {isDragging ? \"Drop files here\" : \"Drag files here\"}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    or click to browse\n                  </p>\n                </div>\n                <p id={descriptionId} className=\"text-muted-foreground text-xs\">\n                  {maxFileSize\n                    ? `Max size: ${formatFileSize(maxFileSize)}${maxFiles ? ` • Max ${maxFiles} files` : \"\"}`\n                    : maxFiles\n                      ? `Max ${maxFiles} files`\n                      : \"Select files to upload\"}\n                </p>\n              </div>\n              <input\n                type=\"file\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                multiple={multiple}\n                accept={accept}\n                className=\"sr-only\"\n                ref={fileInputRef}\n                onChange={onFileInputChange}\n              />\n              {error && (\n                <div className=\"rounded-md bg-destructive/10 px-3 py-2 text-destructive text-xs\">\n                  {error}\n                </div>\n              )}\n              {files.length > 0 && (\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <p className=\"font-medium text-muted-foreground text-xs\">\n                      {files.length} {files.length === 1 ? \"file\" : \"files\"}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-6 text-muted-foreground text-xs\"\n                      onClick={clearAll}\n                    >\n                      Clear all\n                    </Button>\n                  </div>\n                  <div className=\"max-h-[200px] space-y-1 overflow-y-auto\">\n                    {files.map((file) => {\n                      const FileIcon = getFileIcon(file.type);\n\n                      return (\n                        <div\n                          key={file.id}\n                          className=\"flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1.5\"\n                        >\n                          {FileIcon && (\n                            <FileIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n                          )}\n                          <div className=\"flex-1 overflow-hidden\">\n                            <p className=\"truncate text-sm\">{file.name}</p>\n                            <p className=\"text-muted-foreground text-xs\">\n                              {formatFileSize(file.size)}\n                            </p>\n                          </div>\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            className=\"size-5 rounded-sm\"\n                            onClick={() => removeFile(file.id)}\n                          >\n                            <X className=\"size-3\" />\n                          </Button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {isDraggingOver ? (\n        <div className=\"flex items-center justify-center gap-2 text-primary text-sm\">\n          <Upload className=\"size-4\" />\n          <span>Drop files here</span>\n        </div>\n      ) : files.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleFiles.map((file) => {\n            const isUploading = uploadingFiles.has(file.id);\n\n            if (isUploading) {\n              // Show skeleton for uploading files\n              return (\n                <Skeleton\n                  key={file.id}\n                  className=\"h-5 shrink-0 px-1.5\"\n                  style={{\n                    width: `${Math.min(file.name.length * 8 + 30, 100)}px`,\n                  }}\n                />\n              );\n            }\n\n            return (\n              <Badge\n                key={file.id}\n                variant=\"secondary\"\n                className=\"h-5 shrink-0 gap-1 px-1.5 text-xs\"\n              >\n                {React.createElement(getFileIcon(file.type), {\n                  className: \"size-3 shrink-0\",\n                })}\n                <span className=\"max-w-[100px] truncate\">{file.name}</span>\n              </Badge>\n            );\n          })}\n          {hiddenFileCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenFileCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n",
       "type": "registry:component",
       "target": "src/components/data-grid/data-grid-cell-variants.tsx"
     },

From c4fc20b802b27e11e89e5e08d0cf7a3305ff3919 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:28:30 +0600
Subject: [PATCH 14/17] security: add explicit protection against dangerous URL
 protocols

- Reject javascript:, data:, vbscript:, and file: protocols
- Defense-in-depth approach (already safe due to http:// prefixing)
- Prevents potential XSS vectors
- Returns empty string for dangerous URLs (link won't be clickable)
---
 src/components/data-grid/data-grid-cell-variants.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index 785bd72c3..7a39df03a 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -460,6 +460,11 @@ function getUrlHref(urlString: string): string {
 
   const trimmed = urlString.trim();
 
+  // Reject dangerous protocols (extra safety, though our http:// prefix would neutralize them)
+  if (/^(javascript|data|vbscript|file):/i.test(trimmed)) {
+    return "";
+  }
+
   // Check if it already has a protocol
   if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) {
     return trimmed;

From 6e022f3e68a9085aca34c98a8c2e5ca41cbabaaa Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:31:12 +0600
Subject: [PATCH 15/17] feat: add toast notification for dangerous URLs

- Show error toast when user clicks on dangerous URL
- Visual indicator: dangerous URLs appear in red with cursor-not-allowed
- Provides clear feedback: 'URL contains a dangerous protocol'
- Improves UX by informing users why their link doesn't work
---
 .../data-grid/data-grid-cell-variants.tsx     | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index 7a39df03a..7bb1d36cd 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -47,6 +47,7 @@ import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { getCellKey, getLineCount } from "@/lib/data-grid";
 import { cn } from "@/lib/utils";
 import type { CellVariantProps, FileCellData } from "@/types/data-grid";
+import { toast } from "sonner";
 
 export function ShortTextCell<TData>({
   cell,
@@ -582,10 +583,21 @@ export function UrlCell<TData>({
         event.preventDefault();
         return;
       }
+
+      // Check if URL was rejected due to dangerous protocol
+      const href = getUrlHref(value);
+      if (!href) {
+        event.preventDefault();
+        toast.error("Invalid URL", {
+          description: "URL contains a dangerous protocol (javascript:, data:, vbscript:, or file:)",
+        });
+        return;
+      }
+
       // Stop propagation to prevent grid from interfering with link navigation
       event.stopPropagation();
     },
-    [isEditing],
+    [isEditing, value],
   );
 
   React.useEffect(() => {
@@ -608,6 +620,8 @@ export function UrlCell<TData>({
   }, [isEditing, value]);
 
   const displayValue = !isEditing ? (value ?? "") : "";
+  const urlHref = displayValue ? getUrlHref(displayValue) : "";
+  const isDangerousUrl = displayValue && !urlHref;
 
   return (
     <DataGridCellWrapper
@@ -627,12 +641,18 @@ export function UrlCell<TData>({
           className="size-full overflow-hidden"
         >
           <a
-            href={getUrlHref(displayValue)}
+            href={urlHref}
             target="_blank"
             rel="noopener noreferrer"
             onClick={onLinkClick}
-            data-focused={isFocused ? "" : undefined}
-            className="truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60 data-focused:text-foreground data-focused:decoration-foreground/50 data-focused:hover:decoration-foreground/70"
+            className={cn(
+              "truncate underline underline-offset-2",
+              isDangerousUrl
+                ? "cursor-not-allowed text-destructive decoration-destructive/50 hover:decoration-destructive/70"
+                : isFocused
+                  ? "text-foreground decoration-foreground/50 hover:decoration-foreground/70"
+                  : "text-primary decoration-primary/30 hover:decoration-primary/60",
+            )}
           >
             {displayValue}
           </a>

From ea97a95f8db1d3fc5d2237ee8561bebb5b1b5ccf Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:32:43 +0600
Subject: [PATCH 16/17] refactor: use data-invalid instead of data-dangerous

- More standard naming convention
- Cleaner data attribute approach avoids CSS class conflicts
- No biome linter warnings
---
 .../data-grid/data-grid-cell-variants.tsx        | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index 7bb1d36cd..b0f6e2ac6 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -14,6 +14,7 @@ import {
   X,
 } from "lucide-react";
 import * as React from "react";
+import { toast } from "sonner";
 import { DataGridCellWrapper } from "@/components/data-grid/data-grid-cell-wrapper";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -47,7 +48,6 @@ import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { getCellKey, getLineCount } from "@/lib/data-grid";
 import { cn } from "@/lib/utils";
 import type { CellVariantProps, FileCellData } from "@/types/data-grid";
-import { toast } from "sonner";
 
 export function ShortTextCell<TData>({
   cell,
@@ -589,7 +589,8 @@ export function UrlCell<TData>({
       if (!href) {
         event.preventDefault();
         toast.error("Invalid URL", {
-          description: "URL contains a dangerous protocol (javascript:, data:, vbscript:, or file:)",
+          description:
+            "URL contains a dangerous protocol (javascript:, data:, vbscript:, or file:)",
         });
         return;
       }
@@ -645,14 +646,9 @@ export function UrlCell<TData>({
             target="_blank"
             rel="noopener noreferrer"
             onClick={onLinkClick}
-            className={cn(
-              "truncate underline underline-offset-2",
-              isDangerousUrl
-                ? "cursor-not-allowed text-destructive decoration-destructive/50 hover:decoration-destructive/70"
-                : isFocused
-                  ? "text-foreground decoration-foreground/50 hover:decoration-foreground/70"
-                  : "text-primary decoration-primary/30 hover:decoration-primary/60",
-            )}
+            data-invalid={isDangerousUrl ? "" : undefined}
+            data-focused={isFocused && !isDangerousUrl ? "" : undefined}
+            className="truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60 data-invalid:cursor-not-allowed data-focused:text-foreground data-invalid:text-destructive data-focused:decoration-foreground/50 data-invalid:decoration-destructive/50 data-focused:hover:decoration-foreground/70 data-invalid:hover:decoration-destructive/70"
           >
             {displayValue}
           </a>

From af7cc298d60df98d5d6018273904aa28315cdae1 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Wed, 19 Nov 2025 18:33:26 +0600
Subject: [PATCH 17/17] chore: rebuild registry again

---
 public/r/data-grid.json                              | 2 +-
 src/components/data-grid/data-grid-cell-variants.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/r/data-grid.json b/public/r/data-grid.json
index 914d961b3..fe00bc79d 100644
--- a/public/r/data-grid.json
+++ b/public/r/data-grid.json
@@ -46,7 +46,7 @@
     },
     {
       "path": "src/components/data-grid/data-grid-cell-variants.tsx",
-      "content": "\"use client\";\n\nimport {\n  Check,\n  File,\n  FileArchive,\n  FileAudio,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo,\n  Presentation,\n  Upload,\n  X,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { DataGridCellWrapper } from \"@/components/data-grid/data-grid-cell-wrapper\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { useBadgeOverflow } from \"@/hooks/use-badge-overflow\";\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getCellKey, getLineCount } from \"@/lib/data-grid\";\nimport { cn } from \"@/lib/utils\";\nimport type { CellVariantProps, FileCellData } from \"@/types/data-grid\";\n\nexport function ShortTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue;\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    // Read the current value directly from the DOM to avoid stale state\n    const currentValue = cellRef.current?.textContent ?? \"\";\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue}\n      </div>\n    </DataGridCellWrapper>\n  );\n}\n\nexport function LongTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  // Debounced auto-save (300ms delay)\n  const debouncedSave = useDebouncedCallback((newValue: string) => {\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n  }, 300);\n\n  const onSave = React.useCallback(() => {\n    // Immediately save any pending changes and close the popover\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onCancel = React.useCallback(() => {\n    // Restore the original value\n    setValue(initialValue ?? \"\");\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue });\n    meta?.onCellEditingStop?.();\n  }, [meta, initialValue, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        // Immediately save any pending changes when closing\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, value, initialValue, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    if (textareaRef.current) {\n      textareaRef.current.focus();\n      const length = textareaRef.current.value.length;\n      textareaRef.current.setSelectionRange(length, length);\n    }\n  }, []);\n\n  const onBlur = React.useCallback(() => {\n    // Immediately save any pending changes on blur\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      const newValue = event.target.value;\n      setValue(newValue);\n      // Debounced auto-save\n      debouncedSave(newValue);\n    },\n    [debouncedSave],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onCancel();\n      } else if (event.key === \"Enter\" && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        onSave();\n      } else if (event.key === \"Tab\") {\n        event.preventDefault();\n        // Save any pending changes\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n        return;\n      }\n      // Stop propagation to prevent grid navigation\n      event.stopPropagation();\n    },\n    [onSave, onCancel, value, initialValue, meta, rowIndex, columnId],\n  );\n\n  return (\n    <Popover open={isEditing} onOpenChange={onOpenChange}>\n      <PopoverAnchor asChild>\n        <DataGridCellWrapper\n          ref={containerRef}\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        >\n          <span data-slot=\"grid-cell-content\">{value}</span>\n        </DataGridCellWrapper>\n      </PopoverAnchor>\n      <PopoverContent\n        data-grid-cell-editor=\"\"\n        align=\"start\"\n        side=\"bottom\"\n        sideOffset={sideOffset}\n        className=\"w-[400px] rounded-none p-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n      >\n        <Textarea\n          placeholder=\"Enter text...\"\n          className=\"min-h-[150px] resize-none rounded-none border-0 shadow-none focus-visible:ring-0\"\n          ref={textareaRef}\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function NumberCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as number;\n  const [value, setValue] = React.useState(String(initialValue ?? \"\"));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const min = cellOpts?.variant === \"number\" ? cellOpts.min : undefined;\n  const max = cellOpts?.variant === \"number\" ? cellOpts.max : undefined;\n  const step = cellOpts?.variant === \"number\" ? cellOpts.step : undefined;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(String(initialValue ?? \"\"));\n  }\n\n  const onBlur = React.useCallback(() => {\n    const numValue = value === \"\" ? null : Number(value);\n    if (numValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue, value]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(String(initialValue ?? \"\"));\n          inputRef.current?.blur();\n        }\n      } else if (isFocused) {\n        // Handle Backspace to start editing with empty value\n        if (event.key === \"Backspace\") {\n          setValue(\"\");\n        } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n          // Handle typing to pre-fill the value when editing starts\n          setValue(event.key);\n        }\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId, value],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, [isEditing]);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <input\n          ref={inputRef}\n          type=\"number\"\n          value={value}\n          min={min}\n          max={max}\n          step={step}\n          onBlur={onBlur}\n          onChange={onChange}\n          className=\"w-full border-none bg-transparent p-0 outline-none\"\n        />\n      ) : (\n        <span data-slot=\"grid-cell-content\">{value}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction getUrlHref(urlString: string): string {\n  if (!urlString || urlString.trim() === \"\") return \"\";\n\n  const trimmed = urlString.trim();\n\n  // Check if it already has a protocol\n  if (trimmed.startsWith(\"http://\") || trimmed.startsWith(\"https://\")) {\n    return trimmed;\n  }\n\n  // Add http:// prefix for links without protocol\n  return `http://${trimmed}`;\n}\n\nexport function UrlCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue ?? \"\";\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({\n        rowIndex,\n        columnId,\n        value: currentValue || null,\n      });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: currentValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: currentValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue ?? \"\");\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  const onLinkClick = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (isEditing) {\n        event.preventDefault();\n        return;\n      }\n      // Stop propagation to prevent grid from interfering with link navigation\n      event.stopPropagation();\n    },\n    [isEditing],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {!isEditing && displayValue ? (\n        <div\n          data-slot=\"grid-cell-content\"\n          className=\"size-full overflow-hidden\"\n        >\n          <a\n            href={getUrlHref(displayValue)}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            onClick={onLinkClick}\n            data-focused={isFocused ? \"\" : undefined}\n            className=\"truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60 data-focused:text-foreground data-focused:decoration-foreground/50 data-focused:hover:decoration-foreground/70\"\n          >\n            {displayValue}\n          </a>\n        </div>\n      ) : (\n        <div\n          role=\"textbox\"\n          data-slot=\"grid-cell-content\"\n          contentEditable={isEditing}\n          tabIndex={-1}\n          ref={cellRef}\n          onBlur={onBlur}\n          onInput={onInput}\n          suppressContentEditableWarning\n          className={cn(\"size-full overflow-hidden outline-none\", {\n            \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n              isEditing,\n          })}\n        >\n          {displayValue}\n        </div>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function CheckboxCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as boolean;\n  const [value, setValue] = React.useState(Boolean(initialValue));\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(Boolean(initialValue));\n  }\n\n  const onCheckedChange = React.useCallback(\n    (checked: boolean) => {\n      setValue(checked);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isFocused && (event.key === \" \" || event.key === \"Enter\")) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      } else if (isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isFocused, value, onCheckedChange, meta],\n  );\n\n  const onWrapperClick = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isFocused) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      }\n    },\n    [isFocused, value, onCheckedChange],\n  );\n\n  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const onCheckboxMouseDown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const onCheckboxDoubleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={false}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className=\"flex size-full justify-center\"\n      onClick={onWrapperClick}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Checkbox\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        className=\"border-primary\"\n        onClick={onCheckboxClick}\n        onMouseDown={onCheckboxMouseDown}\n        onDoubleClick={onCheckboxDoubleClick}\n      />\n    </DataGridCellWrapper>\n  );\n}\n\nexport function SelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"select\" ? cellOpts.options : [];\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n  }\n\n  const onValueChange = React.useCallback(\n    (newValue: string) => {\n      setValue(newValue);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  const displayLabel =\n    options.find((opt) => opt.value === value)?.label ?? value;\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Select\n          value={value}\n          onValueChange={onValueChange}\n          open={isEditing}\n          onOpenChange={onOpenChange}\n        >\n          <SelectTrigger\n            size=\"sm\"\n            className=\"size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent\n            data-grid-cell-editor=\"\"\n            // compensate for the wrapper padding\n            align=\"start\"\n            alignOffset={-8}\n            sideOffset={-8}\n            className=\"min-w-[calc(var(--radix-select-trigger-width)+16px)]\"\n          >\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      ) : (\n        <span data-slot=\"grid-cell-content\">{displayLabel}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function MultiSelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as string[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const [selectedValues, setSelectedValues] =\n    React.useState<string[]>(cellValue);\n  const [searchValue, setSearchValue] = React.useState(\"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"multi-select\" ? cellOpts.options : [];\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setSelectedValues(cellValue);\n    setSearchValue(\"\");\n  }\n\n  const onValueChange = React.useCallback(\n    (value: string) => {\n      const newValues = selectedValues.includes(value)\n        ? selectedValues.filter((v) => v !== value)\n        : [...selectedValues, value];\n\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Clear search input and focus back on input after selection\n      setSearchValue(\"\");\n      queueMicrotask(() => inputRef.current?.focus());\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const removeValue = React.useCallback(\n    (valueToRemove: string, event?: React.MouseEvent) => {\n      event?.stopPropagation();\n      event?.preventDefault();\n      const newValues = selectedValues.filter((v) => v !== valueToRemove);\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Focus back on input after removing\n      setTimeout(() => inputRef.current?.focus(), 0);\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    setSelectedValues([]);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n    queueMicrotask(() => inputRef.current?.focus());\n  }, [meta, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setSelectedValues(cellValue);\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, cellValue, meta],\n  );\n\n  const onInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // Handle backspace when input is empty - remove last selected item\n      if (\n        event.key === \"Backspace\" &&\n        searchValue === \"\" &&\n        selectedValues.length > 0\n      ) {\n        event.preventDefault();\n        const lastValue = selectedValues[selectedValues.length - 1];\n        if (lastValue) {\n          removeValue(lastValue);\n        }\n      }\n      // Prevent escape from propagating to close the popover immediately\n      // Let the command handle it first\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n      }\n    },\n    [searchValue, selectedValues, removeValue],\n  );\n\n  const displayLabels = selectedValues\n    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)\n    .filter(Boolean);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =\n    useBadgeOverflow({\n      items: displayLabels,\n      getLabel: (label) => label,\n      containerRef,\n      lineCount,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[300px] rounded-none p-0\"\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <Command className=\"**:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:border-none **:data-[slot=command-input-wrapper]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden\">\n              <div className=\"flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5\">\n                {selectedValues.map((value) => {\n                  const option = options.find((opt) => opt.value === value);\n                  const label = option?.label ?? value;\n\n                  return (\n                    <Badge\n                      key={value}\n                      variant=\"secondary\"\n                      className=\"h-5 gap-1 px-1.5 text-xs\"\n                    >\n                      {label}\n                      <button\n                        type=\"button\"\n                        onClick={(event) => removeValue(value, event)}\n                        onPointerDown={(event) => {\n                          event.preventDefault();\n                          event.stopPropagation();\n                        }}\n                      >\n                        <X className=\"size-3\" />\n                      </button>\n                    </Badge>\n                  );\n                })}\n                <CommandInput\n                  ref={inputRef}\n                  value={searchValue}\n                  onValueChange={setSearchValue}\n                  onKeyDown={onInputKeyDown}\n                  placeholder=\"Search...\"\n                  className=\"h-auto flex-1 p-0\"\n                />\n              </div>\n              <CommandList className=\"max-h-full\">\n                <CommandEmpty>No options found.</CommandEmpty>\n                <CommandGroup className=\"max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden\">\n                  {options.map((option) => {\n                    const isSelected = selectedValues.includes(option.value);\n\n                    return (\n                      <CommandItem\n                        key={option.value}\n                        value={option.label}\n                        onSelect={() => onValueChange(option.value)}\n                      >\n                        <div\n                          className={cn(\n                            \"flex size-4 items-center justify-center rounded-sm border border-primary\",\n                            isSelected\n                              ? \"bg-primary text-primary-foreground\"\n                              : \"opacity-50 [&_svg]:invisible\",\n                          )}\n                        >\n                          <Check className=\"size-3\" />\n                        </div>\n                        <span>{option.label}</span>\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n                {selectedValues.length > 0 && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <CommandItem\n                        onSelect={clearAll}\n                        className=\"justify-center text-muted-foreground\"\n                      >\n                        Clear all\n                      </CommandItem>\n                    </CommandGroup>\n                  </>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {displayLabels.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleLabels.map((label, index) => (\n            <Badge\n              key={selectedValues[index]}\n              variant=\"secondary\"\n              className=\"h-5 shrink-0 px-1.5 text-xs\"\n            >\n              {label}\n            </Badge>\n          ))}\n          {hiddenBadgeCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenBadgeCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatDateForDisplay(dateStr: string) {\n  if (!dateStr) return \"\";\n  const date = new Date(dateStr);\n  return date.toLocaleDateString();\n}\n\nexport function DateCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  const selectedDate = value ? new Date(value) : undefined;\n\n  const onDateSelect = React.useCallback(\n    (date: Date | undefined) => {\n      if (!date) return;\n\n      const formattedDate = date.toISOString().split(\"T\")[0] ?? \"\";\n      setValue(formattedDate);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: formattedDate });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Popover open={isEditing} onOpenChange={onOpenChange}>\n        <PopoverAnchor asChild>\n          <span data-slot=\"grid-cell-content\">\n            {formatDateForDisplay(value)}\n          </span>\n        </PopoverAnchor>\n        {isEditing && (\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            alignOffset={-8}\n            className=\"w-auto p-0\"\n          >\n            <Calendar\n              autoFocus\n              captionLayout=\"dropdown\"\n              mode=\"single\"\n              defaultMonth={selectedDate ?? new Date()}\n              selected={selectedDate}\n              onSelect={onDateSelect}\n            />\n          </PopoverContent>\n        )}\n      </Popover>\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 B\";\n  const k = 1024;\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n}\n\nfunction getFileIcon(\n  type: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> {\n  if (type.startsWith(\"image/\")) return FileImage;\n  if (type.startsWith(\"video/\")) return FileVideo;\n  if (type.startsWith(\"audio/\")) return FileAudio;\n  if (type.includes(\"pdf\")) return FileText;\n  if (type.includes(\"zip\") || type.includes(\"rar\")) return FileArchive;\n  if (\n    type.includes(\"word\") ||\n    type.includes(\"document\") ||\n    type.includes(\"doc\")\n  )\n    return FileText;\n  if (type.includes(\"sheet\") || type.includes(\"excel\") || type.includes(\"xls\"))\n    return FileSpreadsheet;\n  if (\n    type.includes(\"presentation\") ||\n    type.includes(\"powerpoint\") ||\n    type.includes(\"ppt\")\n  )\n    return Presentation;\n  return File;\n}\n\nexport function FileCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as FileCellData[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const labelId = React.useId();\n  const descriptionId = React.useId();\n\n  const [files, setFiles] = React.useState<FileCellData[]>(cellValue);\n  const [uploadingFiles, setUploadingFiles] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const [isDraggingOver, setIsDraggingOver] = React.useState(false);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const dropzoneRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const fileCellOpts = cellOpts?.variant === \"file\" ? cellOpts : null;\n  const maxFileSize = fileCellOpts?.maxFileSize ?? 10 * 1024 * 1024;\n  const maxFiles = fileCellOpts?.maxFiles ?? 10;\n  const accept = fileCellOpts?.accept;\n  const multiple = fileCellOpts?.multiple ?? true;\n\n  const acceptedTypes = React.useMemo(\n    () => (accept ? accept.split(\",\").map((t) => t.trim()) : null),\n    [accept],\n  );\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setFiles(cellValue);\n    setError(null);\n  }\n\n  const validateFile = React.useCallback(\n    (file: File): string | null => {\n      if (maxFileSize && file.size > maxFileSize) {\n        return `File size exceeds ${formatFileSize(maxFileSize)}`;\n      }\n      if (acceptedTypes) {\n        const fileExtension = `.${file.name.split(\".\").pop()}`;\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.endsWith(\"/*\")) {\n            // Handle wildcard types like \"image/*\"\n            const baseType = type.slice(0, -2);\n            return file.type.startsWith(`${baseType}/`);\n          }\n          if (type.startsWith(\".\")) {\n            // Handle file extensions like \".pdf\"\n            return fileExtension.toLowerCase() === type.toLowerCase();\n          }\n          // Exact match for specific MIME types\n          return file.type === type;\n        });\n        if (!isAccepted) {\n          return `File type not accepted. Accepted: ${accept}`;\n        }\n      }\n      return null;\n    },\n    [maxFileSize, acceptedTypes, accept],\n  );\n\n  const addFiles = React.useCallback(\n    async (newFiles: File[], skipUpload = false) => {\n      setError(null);\n\n      // Check max files limit\n      if (maxFiles && files.length + newFiles.length > maxFiles) {\n        setError(`Maximum ${maxFiles} files allowed`);\n        return;\n      }\n\n      const validFiles: FileCellData[] = [];\n      let firstError: string | null = null;\n\n      for (const file of newFiles) {\n        const validationError = validateFile(file);\n        if (validationError) {\n          if (!firstError) {\n            firstError = validationError;\n          }\n          continue;\n        }\n\n        // Create file data object with temporary ID\n        const fileData: FileCellData = {\n          id: crypto.randomUUID(),\n          name: file.name,\n          size: file.size,\n          type: file.type,\n          url: URL.createObjectURL(file),\n        };\n        validFiles.push(fileData);\n      }\n\n      if (firstError) {\n        setError(firstError);\n      }\n\n      if (validFiles.length > 0) {\n        // If not skipping upload (dropped on cell), show skeletons first\n        if (!skipUpload) {\n          // Add temp files immediately (will show as skeletons)\n          const tempFiles = validFiles.map((f) => ({ ...f, url: undefined }));\n          const filesWithTemp = [...files, ...tempFiles];\n          setFiles(filesWithTemp);\n\n          // Mark as uploading\n          const uploadingIds = new Set(validFiles.map((f) => f.id));\n          setUploadingFiles(uploadingIds);\n\n          // Simulate upload delay (in real app, this would be actual upload)\n          await new Promise((resolve) => setTimeout(resolve, 800));\n\n          // Replace temp files with real ones\n          const finalFiles = filesWithTemp.map(\n            (f) => validFiles.find((vf) => vf.id === f.id) || f,\n          );\n          setFiles(finalFiles);\n          setUploadingFiles(new Set());\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: finalFiles });\n        } else {\n          // If from editor, add immediately without skeleton\n          const updatedFiles = [...files, ...validFiles];\n          setFiles(updatedFiles);\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n        }\n      }\n    },\n    [files, maxFiles, validateFile, meta, rowIndex, columnId],\n  );\n\n  const removeFile = React.useCallback(\n    (fileId: string) => {\n      setError(null);\n      // Revoke object URL to prevent memory leak\n      const fileToRemove = files.find((f) => f.id === fileId);\n      if (fileToRemove?.url) {\n        URL.revokeObjectURL(fileToRemove.url);\n      }\n      const updatedFiles = files.filter((f) => f.id !== fileId);\n      setFiles(updatedFiles);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n    },\n    [files, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    // Revoke all object URLs to prevent memory leak\n    for (const file of files) {\n      if (file.url) {\n        URL.revokeObjectURL(file.url);\n      }\n    }\n    setFiles([]);\n    setError(null);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n  }, [files, meta, rowIndex, columnId]);\n\n  const onDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setIsDragging(true);\n  }, []);\n\n  const onDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDragging(false);\n    }\n  }, []);\n\n  const onDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      addFiles(droppedFiles, true); // Skip upload skeleton in editor\n    },\n    [addFiles],\n  );\n\n  const onFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const selectedFiles = Array.from(event.target.files ?? []);\n      addFiles(selectedFiles, true); // Skip upload skeleton for manual selection\n      // Reset input so the same file can be selected again\n      event.target.value = \"\";\n    },\n    [addFiles],\n  );\n\n  // Cell-level drag handlers (for dropping directly on cell)\n  const onCellDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Only show drop indicator if dragging files\n    if (event.dataTransfer.types.includes(\"Files\")) {\n      setIsDraggingOver(true);\n    }\n  }, []);\n\n  const onCellDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDraggingOver(false);\n    }\n  }, []);\n\n  const onCellDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onCellDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDraggingOver(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      if (droppedFiles.length > 0) {\n        addFiles(droppedFiles, false); // Show skeleton for dropped files\n      }\n    },\n    [addFiles],\n  );\n\n  const onDropzoneClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const onDropzoneKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onDropzoneClick();\n      }\n    },\n    [onDropzoneClick],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setError(null);\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onEscapeKeyDown: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onEscapeKeyDown\"]\n  > = React.useCallback((event) => {\n    // Prevent the escape key from propagating to the data grid's keyboard handler\n    // which would call blurCell() and remove focus from the cell\n    event.stopPropagation();\n  }, []);\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    // Focus the dropzone for better keyboard UX - users can press Enter again to open file dialog\n    queueMicrotask(() => {\n      dropzoneRef.current?.focus();\n    });\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          setFiles(cellValue);\n          setError(null);\n          meta?.onCellEditingStop?.();\n        } else if (event.key === \" \") {\n          event.preventDefault();\n          onDropzoneClick();\n        }\n      } else if (isFocused && event.key === \"Enter\") {\n        // Handle Enter key to start editing when focused but not editing\n        event.preventDefault();\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [\n      isEditing,\n      isFocused,\n      cellValue,\n      meta,\n      onDropzoneClick,\n      rowIndex,\n      columnId,\n    ],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const file of files) {\n        if (file.url) {\n          URL.revokeObjectURL(file.url);\n        }\n      }\n    };\n  }, [files]);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } =\n    useBadgeOverflow({\n      items: files,\n      getLabel: (file) => file.name,\n      containerRef,\n      lineCount,\n      cacheKeyPrefix: \"file\",\n      iconSize: 12,\n      maxWidth: 100,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className={cn({\n        \"ring-1 ring-primary/80 ring-inset\": isDraggingOver,\n      })}\n      onDragEnter={onCellDragEnter}\n      onDragLeave={onCellDragLeave}\n      onDragOver={onCellDragOver}\n      onDrop={onCellDrop}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[400px] rounded-none p-0\"\n            onEscapeKeyDown={onEscapeKeyDown}\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <div className=\"flex flex-col gap-2 p-3\">\n              <span id={labelId} className=\"sr-only\">\n                File upload\n              </span>\n              <div\n                role=\"region\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                aria-invalid={!!error}\n                data-dragging={isDragging ? \"\" : undefined}\n                data-invalid={error ? \"\" : undefined}\n                tabIndex={isDragging ? -1 : 0}\n                className=\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20\"\n                ref={dropzoneRef}\n                onClick={onDropzoneClick}\n                onDragEnter={onDragEnter}\n                onDragLeave={onDragLeave}\n                onDragOver={onDragOver}\n                onDrop={onDrop}\n                onKeyDown={onDropzoneKeyDown}\n              >\n                <Upload className=\"size-8 text-muted-foreground\" />\n                <div className=\"text-center text-sm\">\n                  <p className=\"font-medium\">\n                    {isDragging ? \"Drop files here\" : \"Drag files here\"}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    or click to browse\n                  </p>\n                </div>\n                <p id={descriptionId} className=\"text-muted-foreground text-xs\">\n                  {maxFileSize\n                    ? `Max size: ${formatFileSize(maxFileSize)}${maxFiles ? ` • Max ${maxFiles} files` : \"\"}`\n                    : maxFiles\n                      ? `Max ${maxFiles} files`\n                      : \"Select files to upload\"}\n                </p>\n              </div>\n              <input\n                type=\"file\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                multiple={multiple}\n                accept={accept}\n                className=\"sr-only\"\n                ref={fileInputRef}\n                onChange={onFileInputChange}\n              />\n              {error && (\n                <div className=\"rounded-md bg-destructive/10 px-3 py-2 text-destructive text-xs\">\n                  {error}\n                </div>\n              )}\n              {files.length > 0 && (\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <p className=\"font-medium text-muted-foreground text-xs\">\n                      {files.length} {files.length === 1 ? \"file\" : \"files\"}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-6 text-muted-foreground text-xs\"\n                      onClick={clearAll}\n                    >\n                      Clear all\n                    </Button>\n                  </div>\n                  <div className=\"max-h-[200px] space-y-1 overflow-y-auto\">\n                    {files.map((file) => {\n                      const FileIcon = getFileIcon(file.type);\n\n                      return (\n                        <div\n                          key={file.id}\n                          className=\"flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1.5\"\n                        >\n                          {FileIcon && (\n                            <FileIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n                          )}\n                          <div className=\"flex-1 overflow-hidden\">\n                            <p className=\"truncate text-sm\">{file.name}</p>\n                            <p className=\"text-muted-foreground text-xs\">\n                              {formatFileSize(file.size)}\n                            </p>\n                          </div>\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            className=\"size-5 rounded-sm\"\n                            onClick={() => removeFile(file.id)}\n                          >\n                            <X className=\"size-3\" />\n                          </Button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {isDraggingOver ? (\n        <div className=\"flex items-center justify-center gap-2 text-primary text-sm\">\n          <Upload className=\"size-4\" />\n          <span>Drop files here</span>\n        </div>\n      ) : files.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleFiles.map((file) => {\n            const isUploading = uploadingFiles.has(file.id);\n\n            if (isUploading) {\n              // Show skeleton for uploading files\n              return (\n                <Skeleton\n                  key={file.id}\n                  className=\"h-5 shrink-0 px-1.5\"\n                  style={{\n                    width: `${Math.min(file.name.length * 8 + 30, 100)}px`,\n                  }}\n                />\n              );\n            }\n\n            return (\n              <Badge\n                key={file.id}\n                variant=\"secondary\"\n                className=\"h-5 shrink-0 gap-1 px-1.5 text-xs\"\n              >\n                {React.createElement(getFileIcon(file.type), {\n                  className: \"size-3 shrink-0\",\n                })}\n                <span className=\"max-w-[100px] truncate\">{file.name}</span>\n              </Badge>\n            );\n          })}\n          {hiddenFileCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenFileCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  Check,\n  File,\n  FileArchive,\n  FileAudio,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo,\n  Presentation,\n  Upload,\n  X,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { toast } from \"sonner\";\nimport { DataGridCellWrapper } from \"@/components/data-grid/data-grid-cell-wrapper\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { useBadgeOverflow } from \"@/hooks/use-badge-overflow\";\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getCellKey, getLineCount } from \"@/lib/data-grid\";\nimport { cn } from \"@/lib/utils\";\nimport type { CellVariantProps, FileCellData } from \"@/types/data-grid\";\n\nexport function ShortTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue;\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    // Read the current value directly from the DOM to avoid stale state\n    const currentValue = cellRef.current?.textContent ?? \"\";\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue);\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <div\n        role=\"textbox\"\n        data-slot=\"grid-cell-content\"\n        contentEditable={isEditing}\n        tabIndex={-1}\n        ref={cellRef}\n        onBlur={onBlur}\n        onInput={onInput}\n        suppressContentEditableWarning\n        className={cn(\"size-full overflow-hidden outline-none\", {\n          \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n            isEditing,\n        })}\n      >\n        {displayValue}\n      </div>\n    </DataGridCellWrapper>\n  );\n}\n\nexport function LongTextCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  // Debounced auto-save (300ms delay)\n  const debouncedSave = useDebouncedCallback((newValue: string) => {\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n  }, 300);\n\n  const onSave = React.useCallback(() => {\n    // Immediately save any pending changes and close the popover\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onCancel = React.useCallback(() => {\n    // Restore the original value\n    setValue(initialValue ?? \"\");\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue });\n    meta?.onCellEditingStop?.();\n  }, [meta, initialValue, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        // Immediately save any pending changes when closing\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, value, initialValue, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    if (textareaRef.current) {\n      textareaRef.current.focus();\n      const length = textareaRef.current.value.length;\n      textareaRef.current.setSelectionRange(length, length);\n    }\n  }, []);\n\n  const onBlur = React.useCallback(() => {\n    // Immediately save any pending changes on blur\n    if (value !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, value, initialValue, rowIndex, columnId]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      const newValue = event.target.value;\n      setValue(newValue);\n      // Debounced auto-save\n      debouncedSave(newValue);\n    },\n    [debouncedSave],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onCancel();\n      } else if (event.key === \"Enter\" && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        onSave();\n      } else if (event.key === \"Tab\") {\n        event.preventDefault();\n        // Save any pending changes\n        if (value !== initialValue) {\n          meta?.onDataUpdate?.({ rowIndex, columnId, value });\n        }\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n        return;\n      }\n      // Stop propagation to prevent grid navigation\n      event.stopPropagation();\n    },\n    [onSave, onCancel, value, initialValue, meta, rowIndex, columnId],\n  );\n\n  return (\n    <Popover open={isEditing} onOpenChange={onOpenChange}>\n      <PopoverAnchor asChild>\n        <DataGridCellWrapper\n          ref={containerRef}\n          cell={cell}\n          table={table}\n          rowIndex={rowIndex}\n          columnId={columnId}\n          isEditing={isEditing}\n          isFocused={isFocused}\n          isSelected={isSelected}\n        >\n          <span data-slot=\"grid-cell-content\">{value}</span>\n        </DataGridCellWrapper>\n      </PopoverAnchor>\n      <PopoverContent\n        data-grid-cell-editor=\"\"\n        align=\"start\"\n        side=\"bottom\"\n        sideOffset={sideOffset}\n        className=\"w-[400px] rounded-none p-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n      >\n        <Textarea\n          placeholder=\"Enter text...\"\n          className=\"min-h-[150px] resize-none rounded-none border-0 shadow-none focus-visible:ring-0\"\n          ref={textareaRef}\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function NumberCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as number;\n  const [value, setValue] = React.useState(String(initialValue ?? \"\"));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const min = cellOpts?.variant === \"number\" ? cellOpts.min : undefined;\n  const max = cellOpts?.variant === \"number\" ? cellOpts.max : undefined;\n  const step = cellOpts?.variant === \"number\" ? cellOpts.step : undefined;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(String(initialValue ?? \"\"));\n  }\n\n  const onBlur = React.useCallback(() => {\n    const numValue = value === \"\" ? null : Number(value);\n    if (numValue !== initialValue) {\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue, value]);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const numValue = value === \"\" ? null : Number(value);\n          if (numValue !== initialValue) {\n            meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(String(initialValue ?? \"\"));\n          inputRef.current?.blur();\n        }\n      } else if (isFocused) {\n        // Handle Backspace to start editing with empty value\n        if (event.key === \"Backspace\") {\n          setValue(\"\");\n        } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {\n          // Handle typing to pre-fill the value when editing starts\n          setValue(event.key);\n        }\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId, value],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, [isEditing]);\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <input\n          ref={inputRef}\n          type=\"number\"\n          value={value}\n          min={min}\n          max={max}\n          step={step}\n          onBlur={onBlur}\n          onChange={onChange}\n          className=\"w-full border-none bg-transparent p-0 outline-none\"\n        />\n      ) : (\n        <span data-slot=\"grid-cell-content\">{value}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction getUrlHref(urlString: string): string {\n  if (!urlString || urlString.trim() === \"\") return \"\";\n\n  const trimmed = urlString.trim();\n\n  // Reject dangerous protocols (extra safety, though our http:// prefix would neutralize them)\n  if (/^(javascript|data|vbscript|file):/i.test(trimmed)) {\n    return \"\";\n  }\n\n  // Check if it already has a protocol\n  if (trimmed.startsWith(\"http://\") || trimmed.startsWith(\"https://\")) {\n    return trimmed;\n  }\n\n  // Add http:// prefix for links without protocol\n  return `http://${trimmed}`;\n}\n\nexport function UrlCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isEditing,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const cellRef = React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n    if (cellRef.current && !isEditing) {\n      cellRef.current.textContent = initialValue ?? \"\";\n    }\n  }\n\n  const onBlur = React.useCallback(() => {\n    const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n\n    if (currentValue !== initialValue) {\n      meta?.onDataUpdate?.({\n        rowIndex,\n        columnId,\n        value: currentValue || null,\n      });\n    }\n    meta?.onCellEditingStop?.();\n  }, [meta, rowIndex, columnId, initialValue]);\n\n  const onInput = React.useCallback(\n    (event: React.FormEvent<HTMLDivElement>) => {\n      const currentValue = event.currentTarget.textContent ?? \"\";\n      setValue(currentValue);\n    },\n    [],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Enter\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: currentValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({ moveToNextRow: true });\n        } else if (event.key === \"Tab\") {\n          event.preventDefault();\n          const currentValue = cellRef.current?.textContent?.trim() ?? \"\";\n          if (currentValue !== initialValue) {\n            meta?.onDataUpdate?.({\n              rowIndex,\n              columnId,\n              value: currentValue || null,\n            });\n          }\n          meta?.onCellEditingStop?.({\n            direction: event.shiftKey ? \"left\" : \"right\",\n          });\n        } else if (event.key === \"Escape\") {\n          event.preventDefault();\n          setValue(initialValue ?? \"\");\n          cellRef.current?.blur();\n        }\n      } else if (\n        isFocused &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey\n      ) {\n        // Handle typing to pre-fill the value when editing starts\n        setValue(event.key);\n\n        queueMicrotask(() => {\n          if (cellRef.current && cellRef.current.contentEditable === \"true\") {\n            cellRef.current.textContent = event.key;\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(cellRef.current);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta, rowIndex, columnId],\n  );\n\n  const onLinkClick = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (isEditing) {\n        event.preventDefault();\n        return;\n      }\n\n      // Check if URL was rejected due to dangerous protocol\n      const href = getUrlHref(value);\n      if (!href) {\n        event.preventDefault();\n        toast.error(\"Invalid URL\", {\n          description:\n            \"URL contains a dangerous protocol (javascript:, data:, vbscript:, or file:)\",\n        });\n        return;\n      }\n\n      // Stop propagation to prevent grid from interfering with link navigation\n      event.stopPropagation();\n    },\n    [isEditing, value],\n  );\n\n  React.useEffect(() => {\n    if (isEditing && cellRef.current) {\n      cellRef.current.focus();\n\n      if (!cellRef.current.textContent && value) {\n        cellRef.current.textContent = value;\n      }\n\n      if (cellRef.current.textContent) {\n        const range = document.createRange();\n        const selection = window.getSelection();\n        range.selectNodeContents(cellRef.current);\n        range.collapse(false);\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n      }\n    }\n  }, [isEditing, value]);\n\n  const displayValue = !isEditing ? (value ?? \"\") : \"\";\n  const urlHref = displayValue ? getUrlHref(displayValue) : \"\";\n  const isDangerousUrl = displayValue && !urlHref;\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {!isEditing && displayValue ? (\n        <div\n          data-slot=\"grid-cell-content\"\n          className=\"size-full overflow-hidden\"\n        >\n          <a\n            data-focused={isFocused && !isDangerousUrl ? \"\" : undefined}\n            data-invalid={isDangerousUrl ? \"\" : undefined}\n            href={urlHref}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60 data-invalid:cursor-not-allowed data-focused:text-foreground data-invalid:text-destructive data-focused:decoration-foreground/50 data-invalid:decoration-destructive/50 data-focused:hover:decoration-foreground/70 data-invalid:hover:decoration-destructive/70\"\n            onClick={onLinkClick}\n          >\n            {displayValue}\n          </a>\n        </div>\n      ) : (\n        <div\n          role=\"textbox\"\n          data-slot=\"grid-cell-content\"\n          contentEditable={isEditing}\n          tabIndex={-1}\n          ref={cellRef}\n          onBlur={onBlur}\n          onInput={onInput}\n          suppressContentEditableWarning\n          className={cn(\"size-full overflow-hidden outline-none\", {\n            \"whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden\":\n              isEditing,\n          })}\n        >\n          {displayValue}\n        </div>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function CheckboxCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as boolean;\n  const [value, setValue] = React.useState(Boolean(initialValue));\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(Boolean(initialValue));\n  }\n\n  const onCheckedChange = React.useCallback(\n    (checked: boolean) => {\n      setValue(checked);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked });\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isFocused && (event.key === \" \" || event.key === \"Enter\")) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      } else if (isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isFocused, value, onCheckedChange, meta],\n  );\n\n  const onWrapperClick = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isFocused) {\n        event.preventDefault();\n        event.stopPropagation();\n        onCheckedChange(!value);\n      }\n    },\n    [isFocused, value, onCheckedChange],\n  );\n\n  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const onCheckboxMouseDown = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  const onCheckboxDoubleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={false}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className=\"flex size-full justify-center\"\n      onClick={onWrapperClick}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Checkbox\n        checked={value}\n        onCheckedChange={onCheckedChange}\n        className=\"border-primary\"\n        onClick={onCheckboxClick}\n        onMouseDown={onCheckboxMouseDown}\n        onDoubleClick={onCheckboxDoubleClick}\n      />\n    </DataGridCellWrapper>\n  );\n}\n\nexport function SelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"select\" ? cellOpts.options : [];\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue);\n  }\n\n  const onValueChange = React.useCallback(\n    (newValue: string) => {\n      setValue(newValue);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  const displayLabel =\n    options.find((opt) => opt.value === value)?.label ?? value;\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Select\n          value={value}\n          onValueChange={onValueChange}\n          open={isEditing}\n          onOpenChange={onOpenChange}\n        >\n          <SelectTrigger\n            size=\"sm\"\n            className=\"size-full items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent\n            data-grid-cell-editor=\"\"\n            // compensate for the wrapper padding\n            align=\"start\"\n            alignOffset={-8}\n            sideOffset={-8}\n            className=\"min-w-[calc(var(--radix-select-trigger-width)+16px)]\"\n          >\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      ) : (\n        <span data-slot=\"grid-cell-content\">{displayLabel}</span>\n      )}\n    </DataGridCellWrapper>\n  );\n}\n\nexport function MultiSelectCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as string[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const [selectedValues, setSelectedValues] =\n    React.useState<string[]>(cellValue);\n  const [searchValue, setSearchValue] = React.useState(\"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const options = cellOpts?.variant === \"multi-select\" ? cellOpts.options : [];\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setSelectedValues(cellValue);\n    setSearchValue(\"\");\n  }\n\n  const onValueChange = React.useCallback(\n    (value: string) => {\n      const newValues = selectedValues.includes(value)\n        ? selectedValues.filter((v) => v !== value)\n        : [...selectedValues, value];\n\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Clear search input and focus back on input after selection\n      setSearchValue(\"\");\n      queueMicrotask(() => inputRef.current?.focus());\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const removeValue = React.useCallback(\n    (valueToRemove: string, event?: React.MouseEvent) => {\n      event?.stopPropagation();\n      event?.preventDefault();\n      const newValues = selectedValues.filter((v) => v !== valueToRemove);\n      setSelectedValues(newValues);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });\n      // Focus back on input after removing\n      setTimeout(() => inputRef.current?.focus(), 0);\n    },\n    [selectedValues, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    setSelectedValues([]);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n    queueMicrotask(() => inputRef.current?.focus());\n  }, [meta, rowIndex, columnId]);\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setSelectedValues(cellValue);\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        setSearchValue(\"\");\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, cellValue, meta],\n  );\n\n  const onInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // Handle backspace when input is empty - remove last selected item\n      if (\n        event.key === \"Backspace\" &&\n        searchValue === \"\" &&\n        selectedValues.length > 0\n      ) {\n        event.preventDefault();\n        const lastValue = selectedValues[selectedValues.length - 1];\n        if (lastValue) {\n          removeValue(lastValue);\n        }\n      }\n      // Prevent escape from propagating to close the popover immediately\n      // Let the command handle it first\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n      }\n    },\n    [searchValue, selectedValues, removeValue],\n  );\n\n  const displayLabels = selectedValues\n    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)\n    .filter(Boolean);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =\n    useBadgeOverflow({\n      items: displayLabels,\n      getLabel: (label) => label,\n      containerRef,\n      lineCount,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[300px] rounded-none p-0\"\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <Command className=\"**:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:border-none **:data-[slot=command-input-wrapper]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden\">\n              <div className=\"flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5\">\n                {selectedValues.map((value) => {\n                  const option = options.find((opt) => opt.value === value);\n                  const label = option?.label ?? value;\n\n                  return (\n                    <Badge\n                      key={value}\n                      variant=\"secondary\"\n                      className=\"h-5 gap-1 px-1.5 text-xs\"\n                    >\n                      {label}\n                      <button\n                        type=\"button\"\n                        onClick={(event) => removeValue(value, event)}\n                        onPointerDown={(event) => {\n                          event.preventDefault();\n                          event.stopPropagation();\n                        }}\n                      >\n                        <X className=\"size-3\" />\n                      </button>\n                    </Badge>\n                  );\n                })}\n                <CommandInput\n                  ref={inputRef}\n                  value={searchValue}\n                  onValueChange={setSearchValue}\n                  onKeyDown={onInputKeyDown}\n                  placeholder=\"Search...\"\n                  className=\"h-auto flex-1 p-0\"\n                />\n              </div>\n              <CommandList className=\"max-h-full\">\n                <CommandEmpty>No options found.</CommandEmpty>\n                <CommandGroup className=\"max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden\">\n                  {options.map((option) => {\n                    const isSelected = selectedValues.includes(option.value);\n\n                    return (\n                      <CommandItem\n                        key={option.value}\n                        value={option.label}\n                        onSelect={() => onValueChange(option.value)}\n                      >\n                        <div\n                          className={cn(\n                            \"flex size-4 items-center justify-center rounded-sm border border-primary\",\n                            isSelected\n                              ? \"bg-primary text-primary-foreground\"\n                              : \"opacity-50 [&_svg]:invisible\",\n                          )}\n                        >\n                          <Check className=\"size-3\" />\n                        </div>\n                        <span>{option.label}</span>\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n                {selectedValues.length > 0 && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <CommandItem\n                        onSelect={clearAll}\n                        className=\"justify-center text-muted-foreground\"\n                      >\n                        Clear all\n                      </CommandItem>\n                    </CommandGroup>\n                  </>\n                )}\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {displayLabels.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleLabels.map((label, index) => (\n            <Badge\n              key={selectedValues[index]}\n              variant=\"secondary\"\n              className=\"h-5 shrink-0 px-1.5 text-xs\"\n            >\n              {label}\n            </Badge>\n          ))}\n          {hiddenBadgeCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenBadgeCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatDateForDisplay(dateStr: string) {\n  if (!dateStr) return \"\";\n  const date = new Date(dateStr);\n  return date.toLocaleDateString();\n}\n\nexport function DateCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const initialValue = cell.getValue() as string;\n  const [value, setValue] = React.useState(initialValue ?? \"\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n\n  const prevInitialValueRef = React.useRef(initialValue);\n  if (initialValue !== prevInitialValueRef.current) {\n    prevInitialValueRef.current = initialValue;\n    setValue(initialValue ?? \"\");\n  }\n\n  const selectedDate = value ? new Date(value) : undefined;\n\n  const onDateSelect = React.useCallback(\n    (date: Date | undefined) => {\n      if (!date) return;\n\n      const formattedDate = date.toISOString().split(\"T\")[0] ?? \"\";\n      setValue(formattedDate);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: formattedDate });\n      meta?.onCellEditingStop?.();\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing && event.key === \"Escape\") {\n        event.preventDefault();\n        setValue(initialValue);\n        meta?.onCellEditingStop?.();\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [isEditing, isFocused, initialValue, meta],\n  );\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      onKeyDown={onWrapperKeyDown}\n    >\n      <Popover open={isEditing} onOpenChange={onOpenChange}>\n        <PopoverAnchor asChild>\n          <span data-slot=\"grid-cell-content\">\n            {formatDateForDisplay(value)}\n          </span>\n        </PopoverAnchor>\n        {isEditing && (\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            alignOffset={-8}\n            className=\"w-auto p-0\"\n          >\n            <Calendar\n              autoFocus\n              captionLayout=\"dropdown\"\n              mode=\"single\"\n              defaultMonth={selectedDate ?? new Date()}\n              selected={selectedDate}\n              onSelect={onDateSelect}\n            />\n          </PopoverContent>\n        )}\n      </Popover>\n    </DataGridCellWrapper>\n  );\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 B\";\n  const k = 1024;\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n}\n\nfunction getFileIcon(\n  type: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> {\n  if (type.startsWith(\"image/\")) return FileImage;\n  if (type.startsWith(\"video/\")) return FileVideo;\n  if (type.startsWith(\"audio/\")) return FileAudio;\n  if (type.includes(\"pdf\")) return FileText;\n  if (type.includes(\"zip\") || type.includes(\"rar\")) return FileArchive;\n  if (\n    type.includes(\"word\") ||\n    type.includes(\"document\") ||\n    type.includes(\"doc\")\n  )\n    return FileText;\n  if (type.includes(\"sheet\") || type.includes(\"excel\") || type.includes(\"xls\"))\n    return FileSpreadsheet;\n  if (\n    type.includes(\"presentation\") ||\n    type.includes(\"powerpoint\") ||\n    type.includes(\"ppt\")\n  )\n    return Presentation;\n  return File;\n}\n\nexport function FileCell<TData>({\n  cell,\n  table,\n  rowIndex,\n  columnId,\n  isFocused,\n  isEditing,\n  isSelected,\n}: CellVariantProps<TData>) {\n  const cellValue = React.useMemo(\n    () => (cell.getValue() as FileCellData[]) ?? [],\n    [cell],\n  );\n\n  const cellKey = getCellKey(rowIndex, columnId);\n  const prevCellKeyRef = React.useRef(cellKey);\n\n  const labelId = React.useId();\n  const descriptionId = React.useId();\n\n  const [files, setFiles] = React.useState<FileCellData[]>(cellValue);\n  const [uploadingFiles, setUploadingFiles] = React.useState<Set<string>>(\n    new Set(),\n  );\n  const [isDraggingOver, setIsDraggingOver] = React.useState(false);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const dropzoneRef = React.useRef<HTMLDivElement>(null);\n  const meta = table.options.meta;\n  const cellOpts = cell.column.columnDef.meta?.cell;\n  const sideOffset = -(containerRef.current?.clientHeight ?? 0);\n\n  const fileCellOpts = cellOpts?.variant === \"file\" ? cellOpts : null;\n  const maxFileSize = fileCellOpts?.maxFileSize ?? 10 * 1024 * 1024;\n  const maxFiles = fileCellOpts?.maxFiles ?? 10;\n  const accept = fileCellOpts?.accept;\n  const multiple = fileCellOpts?.multiple ?? true;\n\n  const acceptedTypes = React.useMemo(\n    () => (accept ? accept.split(\",\").map((t) => t.trim()) : null),\n    [accept],\n  );\n\n  if (prevCellKeyRef.current !== cellKey) {\n    prevCellKeyRef.current = cellKey;\n    setFiles(cellValue);\n    setError(null);\n  }\n\n  const validateFile = React.useCallback(\n    (file: File): string | null => {\n      if (maxFileSize && file.size > maxFileSize) {\n        return `File size exceeds ${formatFileSize(maxFileSize)}`;\n      }\n      if (acceptedTypes) {\n        const fileExtension = `.${file.name.split(\".\").pop()}`;\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.endsWith(\"/*\")) {\n            // Handle wildcard types like \"image/*\"\n            const baseType = type.slice(0, -2);\n            return file.type.startsWith(`${baseType}/`);\n          }\n          if (type.startsWith(\".\")) {\n            // Handle file extensions like \".pdf\"\n            return fileExtension.toLowerCase() === type.toLowerCase();\n          }\n          // Exact match for specific MIME types\n          return file.type === type;\n        });\n        if (!isAccepted) {\n          return `File type not accepted. Accepted: ${accept}`;\n        }\n      }\n      return null;\n    },\n    [maxFileSize, acceptedTypes, accept],\n  );\n\n  const addFiles = React.useCallback(\n    async (newFiles: File[], skipUpload = false) => {\n      setError(null);\n\n      // Check max files limit\n      if (maxFiles && files.length + newFiles.length > maxFiles) {\n        setError(`Maximum ${maxFiles} files allowed`);\n        return;\n      }\n\n      const validFiles: FileCellData[] = [];\n      let firstError: string | null = null;\n\n      for (const file of newFiles) {\n        const validationError = validateFile(file);\n        if (validationError) {\n          if (!firstError) {\n            firstError = validationError;\n          }\n          continue;\n        }\n\n        // Create file data object with temporary ID\n        const fileData: FileCellData = {\n          id: crypto.randomUUID(),\n          name: file.name,\n          size: file.size,\n          type: file.type,\n          url: URL.createObjectURL(file),\n        };\n        validFiles.push(fileData);\n      }\n\n      if (firstError) {\n        setError(firstError);\n      }\n\n      if (validFiles.length > 0) {\n        // If not skipping upload (dropped on cell), show skeletons first\n        if (!skipUpload) {\n          // Add temp files immediately (will show as skeletons)\n          const tempFiles = validFiles.map((f) => ({ ...f, url: undefined }));\n          const filesWithTemp = [...files, ...tempFiles];\n          setFiles(filesWithTemp);\n\n          // Mark as uploading\n          const uploadingIds = new Set(validFiles.map((f) => f.id));\n          setUploadingFiles(uploadingIds);\n\n          // Simulate upload delay (in real app, this would be actual upload)\n          await new Promise((resolve) => setTimeout(resolve, 800));\n\n          // Replace temp files with real ones\n          const finalFiles = filesWithTemp.map(\n            (f) => validFiles.find((vf) => vf.id === f.id) || f,\n          );\n          setFiles(finalFiles);\n          setUploadingFiles(new Set());\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: finalFiles });\n        } else {\n          // If from editor, add immediately without skeleton\n          const updatedFiles = [...files, ...validFiles];\n          setFiles(updatedFiles);\n          meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n        }\n      }\n    },\n    [files, maxFiles, validateFile, meta, rowIndex, columnId],\n  );\n\n  const removeFile = React.useCallback(\n    (fileId: string) => {\n      setError(null);\n      // Revoke object URL to prevent memory leak\n      const fileToRemove = files.find((f) => f.id === fileId);\n      if (fileToRemove?.url) {\n        URL.revokeObjectURL(fileToRemove.url);\n      }\n      const updatedFiles = files.filter((f) => f.id !== fileId);\n      setFiles(updatedFiles);\n      meta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });\n    },\n    [files, meta, rowIndex, columnId],\n  );\n\n  const clearAll = React.useCallback(() => {\n    // Revoke all object URLs to prevent memory leak\n    for (const file of files) {\n      if (file.url) {\n        URL.revokeObjectURL(file.url);\n      }\n    }\n    setFiles([]);\n    setError(null);\n    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] });\n  }, [files, meta, rowIndex, columnId]);\n\n  const onDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setIsDragging(true);\n  }, []);\n\n  const onDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDragging(false);\n    }\n  }, []);\n\n  const onDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      addFiles(droppedFiles, true); // Skip upload skeleton in editor\n    },\n    [addFiles],\n  );\n\n  const onFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const selectedFiles = Array.from(event.target.files ?? []);\n      addFiles(selectedFiles, true); // Skip upload skeleton for manual selection\n      // Reset input so the same file can be selected again\n      event.target.value = \"\";\n    },\n    [addFiles],\n  );\n\n  // Cell-level drag handlers (for dropping directly on cell)\n  const onCellDragEnter = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Only show drop indicator if dragging files\n    if (event.dataTransfer.types.includes(\"Files\")) {\n      setIsDraggingOver(true);\n    }\n  }, []);\n\n  const onCellDragLeave = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX;\n    const y = event.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      setIsDraggingOver(false);\n    }\n  }, []);\n\n  const onCellDragOver = React.useCallback((event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const onCellDrop = React.useCallback(\n    (event: React.DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDraggingOver(false);\n\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      if (droppedFiles.length > 0) {\n        addFiles(droppedFiles, false); // Show skeleton for dropped files\n      }\n    },\n    [addFiles],\n  );\n\n  const onDropzoneClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const onDropzoneKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onDropzoneClick();\n      }\n    },\n    [onDropzoneClick],\n  );\n\n  const onOpenChange = React.useCallback(\n    (isOpen: boolean) => {\n      if (isOpen) {\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else {\n        setError(null);\n        meta?.onCellEditingStop?.();\n      }\n    },\n    [meta, rowIndex, columnId],\n  );\n\n  const onEscapeKeyDown: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onEscapeKeyDown\"]\n  > = React.useCallback((event) => {\n    // Prevent the escape key from propagating to the data grid's keyboard handler\n    // which would call blurCell() and remove focus from the cell\n    event.stopPropagation();\n  }, []);\n\n  const onOpenAutoFocus: NonNullable<\n    React.ComponentProps<typeof PopoverContent>[\"onOpenAutoFocus\"]\n  > = React.useCallback((event) => {\n    event.preventDefault();\n    // Focus the dropzone for better keyboard UX - users can press Enter again to open file dialog\n    queueMicrotask(() => {\n      dropzoneRef.current?.focus();\n    });\n  }, []);\n\n  const onWrapperKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (isEditing) {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          setFiles(cellValue);\n          setError(null);\n          meta?.onCellEditingStop?.();\n        } else if (event.key === \" \") {\n          event.preventDefault();\n          onDropzoneClick();\n        }\n      } else if (isFocused && event.key === \"Enter\") {\n        // Handle Enter key to start editing when focused but not editing\n        event.preventDefault();\n        meta?.onCellEditingStart?.(rowIndex, columnId);\n      } else if (!isEditing && isFocused && event.key === \"Tab\") {\n        event.preventDefault();\n        meta?.onCellEditingStop?.({\n          direction: event.shiftKey ? \"left\" : \"right\",\n        });\n      }\n    },\n    [\n      isEditing,\n      isFocused,\n      cellValue,\n      meta,\n      onDropzoneClick,\n      rowIndex,\n      columnId,\n    ],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const file of files) {\n        if (file.url) {\n          URL.revokeObjectURL(file.url);\n        }\n      }\n    };\n  }, [files]);\n\n  const rowHeight = table.options.meta?.rowHeight ?? \"short\";\n  const lineCount = getLineCount(rowHeight);\n\n  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } =\n    useBadgeOverflow({\n      items: files,\n      getLabel: (file) => file.name,\n      containerRef,\n      lineCount,\n      cacheKeyPrefix: \"file\",\n      iconSize: 12,\n      maxWidth: 100,\n    });\n\n  return (\n    <DataGridCellWrapper\n      ref={containerRef}\n      cell={cell}\n      table={table}\n      rowIndex={rowIndex}\n      columnId={columnId}\n      isEditing={isEditing}\n      isFocused={isFocused}\n      isSelected={isSelected}\n      className={cn({\n        \"ring-1 ring-primary/80 ring-inset\": isDraggingOver,\n      })}\n      onDragEnter={onCellDragEnter}\n      onDragLeave={onCellDragLeave}\n      onDragOver={onCellDragOver}\n      onDrop={onCellDrop}\n      onKeyDown={onWrapperKeyDown}\n    >\n      {isEditing ? (\n        <Popover open={isEditing} onOpenChange={onOpenChange}>\n          <PopoverAnchor asChild>\n            <div className=\"absolute inset-0\" />\n          </PopoverAnchor>\n          <PopoverContent\n            data-grid-cell-editor=\"\"\n            align=\"start\"\n            sideOffset={sideOffset}\n            className=\"w-[400px] rounded-none p-0\"\n            onEscapeKeyDown={onEscapeKeyDown}\n            onOpenAutoFocus={onOpenAutoFocus}\n          >\n            <div className=\"flex flex-col gap-2 p-3\">\n              <span id={labelId} className=\"sr-only\">\n                File upload\n              </span>\n              <div\n                role=\"region\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                aria-invalid={!!error}\n                data-dragging={isDragging ? \"\" : undefined}\n                data-invalid={error ? \"\" : undefined}\n                tabIndex={isDragging ? -1 : 0}\n                className=\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20\"\n                ref={dropzoneRef}\n                onClick={onDropzoneClick}\n                onDragEnter={onDragEnter}\n                onDragLeave={onDragLeave}\n                onDragOver={onDragOver}\n                onDrop={onDrop}\n                onKeyDown={onDropzoneKeyDown}\n              >\n                <Upload className=\"size-8 text-muted-foreground\" />\n                <div className=\"text-center text-sm\">\n                  <p className=\"font-medium\">\n                    {isDragging ? \"Drop files here\" : \"Drag files here\"}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    or click to browse\n                  </p>\n                </div>\n                <p id={descriptionId} className=\"text-muted-foreground text-xs\">\n                  {maxFileSize\n                    ? `Max size: ${formatFileSize(maxFileSize)}${maxFiles ? ` • Max ${maxFiles} files` : \"\"}`\n                    : maxFiles\n                      ? `Max ${maxFiles} files`\n                      : \"Select files to upload\"}\n                </p>\n              </div>\n              <input\n                type=\"file\"\n                aria-labelledby={labelId}\n                aria-describedby={descriptionId}\n                multiple={multiple}\n                accept={accept}\n                className=\"sr-only\"\n                ref={fileInputRef}\n                onChange={onFileInputChange}\n              />\n              {error && (\n                <div className=\"rounded-md bg-destructive/10 px-3 py-2 text-destructive text-xs\">\n                  {error}\n                </div>\n              )}\n              {files.length > 0 && (\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <p className=\"font-medium text-muted-foreground text-xs\">\n                      {files.length} {files.length === 1 ? \"file\" : \"files\"}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-6 text-muted-foreground text-xs\"\n                      onClick={clearAll}\n                    >\n                      Clear all\n                    </Button>\n                  </div>\n                  <div className=\"max-h-[200px] space-y-1 overflow-y-auto\">\n                    {files.map((file) => {\n                      const FileIcon = getFileIcon(file.type);\n\n                      return (\n                        <div\n                          key={file.id}\n                          className=\"flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1.5\"\n                        >\n                          {FileIcon && (\n                            <FileIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n                          )}\n                          <div className=\"flex-1 overflow-hidden\">\n                            <p className=\"truncate text-sm\">{file.name}</p>\n                            <p className=\"text-muted-foreground text-xs\">\n                              {formatFileSize(file.size)}\n                            </p>\n                          </div>\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon\"\n                            className=\"size-5 rounded-sm\"\n                            onClick={() => removeFile(file.id)}\n                          >\n                            <X className=\"size-3\" />\n                          </Button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      ) : null}\n      {isDraggingOver ? (\n        <div className=\"flex items-center justify-center gap-2 text-primary text-sm\">\n          <Upload className=\"size-4\" />\n          <span>Drop files here</span>\n        </div>\n      ) : files.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-1 overflow-hidden\">\n          {visibleFiles.map((file) => {\n            const isUploading = uploadingFiles.has(file.id);\n\n            if (isUploading) {\n              // Show skeleton for uploading files\n              return (\n                <Skeleton\n                  key={file.id}\n                  className=\"h-5 shrink-0 px-1.5\"\n                  style={{\n                    width: `${Math.min(file.name.length * 8 + 30, 100)}px`,\n                  }}\n                />\n              );\n            }\n\n            return (\n              <Badge\n                key={file.id}\n                variant=\"secondary\"\n                className=\"h-5 shrink-0 gap-1 px-1.5 text-xs\"\n              >\n                {React.createElement(getFileIcon(file.type), {\n                  className: \"size-3 shrink-0\",\n                })}\n                <span className=\"max-w-[100px] truncate\">{file.name}</span>\n              </Badge>\n            );\n          })}\n          {hiddenFileCount > 0 && (\n            <Badge\n              variant=\"outline\"\n              className=\"h-5 shrink-0 px-1.5 text-muted-foreground text-xs\"\n            >\n              +{hiddenFileCount}\n            </Badge>\n          )}\n        </div>\n      ) : null}\n    </DataGridCellWrapper>\n  );\n}\n",
       "type": "registry:component",
       "target": "src/components/data-grid/data-grid-cell-variants.tsx"
     },
diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx
index b0f6e2ac6..540d015cc 100644
--- a/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/src/components/data-grid/data-grid-cell-variants.tsx
@@ -642,13 +642,13 @@ export function UrlCell<TData>({
           className="size-full overflow-hidden"
         >
           <a
+            data-focused={isFocused && !isDangerousUrl ? "" : undefined}
+            data-invalid={isDangerousUrl ? "" : undefined}
             href={urlHref}
             target="_blank"
             rel="noopener noreferrer"
-            onClick={onLinkClick}
-            data-invalid={isDangerousUrl ? "" : undefined}
-            data-focused={isFocused && !isDangerousUrl ? "" : undefined}
             className="truncate text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60 data-invalid:cursor-not-allowed data-focused:text-foreground data-invalid:text-destructive data-focused:decoration-foreground/50 data-invalid:decoration-destructive/50 data-focused:hover:decoration-foreground/70 data-invalid:hover:decoration-destructive/70"
+            onClick={onLinkClick}
           >
             {displayValue}
           </a>