{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"table-advanced","type":"registry:component","title":"Table Advanced Data Table","description":"The paginated DataTable: Shift+click to sort by several columns, per-column text or select filters plus a global search, a column visibility picker, column reordering, rows that expand into detail panels and range selection with a bulk-action bar.","author":"kara ","dependencies":["clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/table/data-table.tsx","type":"registry:component","target":"@components/motion/table/data-table.tsx","content":"\"use client\";\n// karaui.kamisama-v0.my.id/components/motion/table\n\nimport {\n ArrowLeft,\n ArrowRight,\n ArrowUp,\n ChevronDown,\n ChevronRight,\n Columns3,\n EyeOff,\n GripVertical,\n ListFilter,\n MoreHorizontal,\n Search,\n X,\n} from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n Fragment,\n type ReactNode,\n type RefObject,\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Checkbox } from \"@/components/motion/checkbox\";\nimport { Pagination } from \"@/components/motion/pagination\";\nimport { EASE_OUT, SPRING_LAYOUT, SPRING_PANEL, SPRING_SWAP } from \"@/lib/ease\";\nimport { TOUCH_GESTURE_CLASS } from \"@/lib/touch\";\nimport { cn } from \"@/lib/utils\";\nimport {\n DEFAULT_STACK_BELOW,\n StackedFields,\n StackSortSelect,\n splitStackColumns,\n useStackedLayout,\n} from \"./stacked\";\nimport type {\n HeaderCellRefs,\n MobileLayout,\n SortState,\n TableColumn,\n} from \"./types\";\nimport { useColumnReorder } from \"./use-column-reorder\";\nimport { alignFlex, alignText, readCell, readSortValue } from \"./utils\";\n\n/**\n * DataTable is the paginated sibling of the virtualized `Table`. The virtual\n * table positions a recycled window of fixed-height rows, which cannot carry\n * layout-animated reorders or variable-height expanded rows; this one renders\n * a page of real rows so both can move. It reuses the table's column type,\n * cell readers, reorder hook, `Checkbox` and `Pagination`.\n */\n\nexport type { MobileLayout, SortDirection, SortState } from \"./types\";\n\n/** `string` filters by \"contains\" (text); `string[]` keeps rows whose value is one of the options (select). */\nexport type DataTableFilterValue = string | string[];\nexport type DataTableFilters = Record;\n\nexport type DataTableColumn = TableColumn & {\n /** Adds a filter to the column menu: a \"contains\" text field or a multi-select of options. */\n filter?: \"text\" | \"select\";\n /** Options for a `select` filter. Defaults to the distinct values in `data`. */\n filterOptions?: string[];\n /** Text used by filters and global search. Falls back to the sort value / `row[key]`. */\n filterValue?: (row: T) => string;\n /** Allow hiding the column from the column menu and the Columns picker (default true). */\n hideable?: boolean;\n /** Include the column in the global search (default true). */\n searchable?: boolean;\n};\n\nexport interface DataTableProps {\n data: T[];\n columns: DataTableColumn[];\n /** Stable id per row — keeps selection, expansion and the reorder animation attached to the right row. */\n getRowId?: (row: T, index: number) => string;\n /** Accessible name of a row, used by its checkbox and expand button. Defaults to the first column's text. */\n getRowLabel?: (row: T) => string;\n /** Sort stack, primary first. Click a header to sort by it alone; Shift+click adds a secondary sort. */\n sort?: SortState[];\n defaultSort?: SortState[];\n onSortChange?: (sort: SortState[]) => void;\n /** Per-column filters keyed by column key. */\n filters?: DataTableFilters;\n defaultFilters?: DataTableFilters;\n onFiltersChange?: (filters: DataTableFilters) => void;\n /** Global search across every `searchable` column. */\n search?: string;\n defaultSearch?: string;\n onSearchChange?: (search: string) => void;\n /** Render the search field in the toolbar (default true). */\n showSearch?: boolean;\n searchPlaceholder?: string;\n /** Keys of hidden columns. */\n hiddenColumns?: string[];\n defaultHiddenColumns?: string[];\n onHiddenColumnsChange?: (keys: string[]) => void;\n /** Column key order. */\n columnOrder?: string[];\n defaultColumnOrder?: string[];\n onColumnOrderChange?: (keys: string[]) => void;\n /** Drag headers by their grip, or use Move left/right in the column menu (default true). */\n reorderable?: boolean;\n /** Renders a chevron column; the returned node fills a height-morphing detail panel under the row. */\n renderExpanded?: (row: T) => ReactNode;\n expandedRowIds?: string[];\n defaultExpandedRowIds?: string[];\n onExpandedChange?: (ids: string[]) => void;\n /** Leading checkbox column; Shift+click selects a range. */\n selectable?: boolean;\n selectedRowIds?: string[];\n defaultSelectedRowIds?: string[];\n onSelectionChange?: (ids: string[]) => void;\n /** Extra controls in the selected-count bar, e.g. bulk actions. */\n selectionActions?: (ids: string[]) => ReactNode;\n /** Rows per page; `0` shows every row without pagination (default 10). */\n pageSize?: number;\n /** 1-based page. Resets to 1 when search, filters or sort change. */\n page?: number;\n defaultPage?: number;\n onPageChange?: (page: number) => void;\n /** Extra toolbar content, rendered right of the search field. */\n toolbar?: ReactNode;\n emptyState?: ReactNode;\n /** Narrowest a column without an explicit px width may get before the table scrolls (default 120). */\n minColumnWidth?: number;\n /**\n * `\"scroll\"` (default) keeps today's sideways-scrolling table. `\"stack\"`\n * renders each row as a card (title from `primary` columns, the rest as\n * header: value pairs, with selection, expand and a sort select plus filter\n * chips above the list) whenever the table's own width is below\n * `stackBelow`. The server always renders the table.\n */\n mobileLayout?: MobileLayout;\n /** Width in px under which `mobileLayout=\"stack\"` shows cards (default 560). */\n stackBelow?: number;\n className?: string;\n}\n\ntype Entry = { row: T; id: string };\n\nconst SELECT_COL_PX = 44;\nconst EXPAND_COL_PX = 40;\nconst PANEL_WIDTH = 232;\n\nfunction useControllable(\n value: V | undefined,\n defaultValue: V,\n onChange?: (next: V) => void,\n) {\n const [internal, setInternal] = useState(defaultValue);\n const controlled = value !== undefined;\n const current = controlled ? value : internal;\n const set = useCallback(\n (next: V) => {\n if (!controlled) setInternal(next);\n onChange?.(next);\n },\n [controlled, onChange],\n );\n return [current, set] as const;\n}\n\nconst EMPTY_SORT: SortState[] = [];\nconst EMPTY_FILTERS: DataTableFilters = {};\nconst EMPTY_KEYS: string[] = [];\n\nfunction labelOf(column: DataTableColumn) {\n return typeof column.header === \"string\" ? column.header : column.key;\n}\n\nfunction textOf(row: T, column: DataTableColumn): string {\n if (column.filterValue) return column.filterValue(row);\n const value = readSortValue(row, column) as unknown;\n return value == null ? \"\" : String(value);\n}\n\nfunction isFilterActive(value: DataTableFilterValue | undefined) {\n if (value == null) return false;\n return Array.isArray(value) ? value.length > 0 : value.trim() !== \"\";\n}\n\n/** Next sort stack for a header click. Plain click cycles this column alone (asc → desc → off);\n * Shift+click cycles it inside the stack, appending it as a secondary key when new. */\nexport function nextSortStack(\n sorts: SortState[],\n key: string,\n additive: boolean,\n): SortState[] {\n const existing = sorts.find((s) => s.key === key);\n if (!additive) {\n if (!existing) return [{ key, direction: \"asc\" }];\n // Part of a multi-sort: collapse to this column alone, flipped.\n if (sorts.length > 1)\n return [\n { key, direction: existing.direction === \"asc\" ? \"desc\" : \"asc\" },\n ];\n return existing.direction === \"asc\" ? [{ key, direction: \"desc\" }] : [];\n }\n if (!existing) return [...sorts, { key, direction: \"asc\" }];\n if (existing.direction === \"asc\")\n return sorts.map((s) => (s.key === key ? { key, direction: \"desc\" } : s));\n return sorts.filter((s) => s.key !== key);\n}\n\nfunction compareValues(a: unknown, b: unknown) {\n if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n // Explicit locale so server and client sort identically.\n return String(a ?? \"\").localeCompare(String(b ?? \"\"), \"en-US\", {\n numeric: true,\n sensitivity: \"base\",\n });\n}\n\n/* ------------------------------------------------------------------------ */\n/* Popover panel (column menu + Columns picker) */\n/* ------------------------------------------------------------------------ */\n\ntype AnchorRect = { left: number; right: number; bottom: number };\n\nfunction Panel({\n open,\n onClose,\n getAnchor,\n triggerRef,\n label,\n repositionKey,\n children,\n}: {\n open: boolean;\n onClose: () => void;\n getAnchor: () => AnchorRect | null;\n triggerRef: RefObject;\n label: string;\n /** Re-measure the anchor when this changes (the column moved). */\n repositionKey?: string | number;\n children: ReactNode;\n}) {\n const reduce = useReducedMotion();\n const panelRef = useRef(null);\n const [pos, setPos] = useState<{ top: number; left: number } | null>(null);\n const [mounted, setMounted] = useState(false);\n useEffect(() => setMounted(true), []);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: repositionKey is the re-measure trigger.\n useLayoutEffect(() => {\n if (!open) return;\n const measure = () => {\n const r = getAnchor();\n if (!r) return;\n const left = Math.min(\n Math.max(8, r.right - PANEL_WIDTH),\n window.innerWidth - PANEL_WIDTH - 8,\n );\n const top = r.bottom + 6;\n setPos((prev) =>\n prev && prev.top === top && prev.left === left ? prev : { top, left },\n );\n };\n measure();\n // After a column move the header glides to its new slot (a layout\n // animation); follow it for a moment so the panel stays attached.\n let frame = 0;\n const until = performance.now() + 600;\n const follow = () => {\n measure();\n if (performance.now() < until) frame = requestAnimationFrame(follow);\n };\n frame = requestAnimationFrame(follow);\n return () => cancelAnimationFrame(frame);\n }, [open, getAnchor, repositionKey]);\n\n useEffect(() => {\n if (!open) return;\n const frame = requestAnimationFrame(() => {\n panelRef.current\n ?.querySelector(\n \"input, button:not([disabled]):not([aria-disabled='true'])\",\n )\n ?.focus();\n });\n const inside = (target: EventTarget | null) =>\n target instanceof Node &&\n (panelRef.current?.contains(target) ||\n triggerRef.current?.contains(target));\n const onPointer = (e: PointerEvent) => {\n if (!inside(e.target)) onClose();\n };\n const onKey = (e: KeyboardEvent) => {\n if (e.key !== \"Escape\") return;\n onClose();\n triggerRef.current?.focus();\n };\n // Fixed coordinates go stale once anything outside the panel scrolls.\n const onScroll = (e: Event) => {\n if (!(e.target instanceof Node && panelRef.current?.contains(e.target)))\n onClose();\n };\n document.addEventListener(\"pointerdown\", onPointer, true);\n window.addEventListener(\"keydown\", onKey);\n window.addEventListener(\"scroll\", onScroll, true);\n window.addEventListener(\"resize\", onClose);\n return () => {\n cancelAnimationFrame(frame);\n document.removeEventListener(\"pointerdown\", onPointer, true);\n window.removeEventListener(\"keydown\", onKey);\n window.removeEventListener(\"scroll\", onScroll, true);\n window.removeEventListener(\"resize\", onClose);\n };\n }, [open, onClose, triggerRef]);\n\n if (!mounted) return null;\n return createPortal(\n \n {open && pos ? (\n {\n const next = e.relatedTarget;\n if (\n next instanceof Node &&\n !panelRef.current?.contains(next) &&\n !triggerRef.current?.contains(next)\n )\n onClose();\n }}\n className=\"fixed z-50 overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground text-sm shadow-xl\"\n style={{ top: pos.top, left: pos.left, width: PANEL_WIDTH }}\n initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: -4 }}\n animate={reduce ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0 }}\n exit={\n reduce\n ? { opacity: 0, transition: { duration: 0.1 } }\n : {\n opacity: 0,\n scale: 0.98,\n y: -2,\n transition: { duration: 0.12, ease: EASE_OUT },\n }\n }\n transition={reduce ? { duration: 0.12 } : SPRING_PANEL}\n >\n {children}\n \n ) : null}\n ,\n document.body,\n );\n}\n\nconst PANEL_ITEM =\n \"flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm outline-none transition-colors hover:bg-muted focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground\";\nconst PANEL_HEADING =\n \"px-2.5 pt-2 pb-1 font-medium text-[11px] text-muted-foreground uppercase tracking-wide\";\nconst PANEL_DIVIDER = \"my-1 h-px bg-border\";\n\n/* ------------------------------------------------------------------------ */\n/* DataTable */\n/* ------------------------------------------------------------------------ */\n\nexport function DataTable({\n data,\n columns,\n getRowId,\n getRowLabel,\n sort: sortProp,\n defaultSort = EMPTY_SORT,\n onSortChange,\n filters: filtersProp,\n defaultFilters = EMPTY_FILTERS,\n onFiltersChange,\n search: searchProp,\n defaultSearch = \"\",\n onSearchChange,\n showSearch = true,\n searchPlaceholder = \"Search…\",\n hiddenColumns: hiddenProp,\n defaultHiddenColumns = EMPTY_KEYS,\n onHiddenColumnsChange,\n columnOrder,\n defaultColumnOrder,\n onColumnOrderChange,\n reorderable = true,\n renderExpanded,\n expandedRowIds,\n defaultExpandedRowIds = EMPTY_KEYS,\n onExpandedChange,\n selectable = false,\n selectedRowIds,\n defaultSelectedRowIds = EMPTY_KEYS,\n onSelectionChange,\n selectionActions,\n pageSize = 10,\n page: pageProp,\n defaultPage = 1,\n onPageChange,\n toolbar,\n emptyState = \"No results\",\n minColumnWidth = 120,\n mobileLayout = \"scroll\",\n stackBelow = DEFAULT_STACK_BELOW,\n className,\n}: DataTableProps) {\n const reduce = useReducedMotion() ?? false;\n const uid = useId();\n const rootRef = useRef(null);\n const stacked = useStackedLayout(\n rootRef,\n mobileLayout === \"stack\",\n stackBelow,\n );\n const thRefs: HeaderCellRefs = useRef<\n Record\n >({});\n\n const [sorts, setSorts] = useControllable(sortProp, defaultSort, onSortChange);\n const [filters, setFilters] = useControllable(\n filtersProp,\n defaultFilters,\n onFiltersChange,\n );\n const [search, setSearch] = useControllable(\n searchProp,\n defaultSearch,\n onSearchChange,\n );\n const [hidden, setHidden] = useControllable(\n hiddenProp,\n defaultHiddenColumns,\n onHiddenColumnsChange,\n );\n const [expanded, setExpanded] = useControllable(\n expandedRowIds,\n defaultExpandedRowIds,\n onExpandedChange,\n );\n const [selectedIds, setSelectedIds] = useControllable(\n selectedRowIds,\n defaultSelectedRowIds,\n onSelectionChange,\n );\n const [pageRaw, setPage] = useControllable(pageProp, defaultPage, onPageChange);\n\n const [announcement, setAnnouncement] = useState(\"\");\n // Rows that mount after the first paint (filter, page, data) fade in; the\n // first render stays static so server and client output match.\n const [hydrated, setHydrated] = useState(false);\n useEffect(() => setHydrated(true), []);\n\n const {\n orderedColumns: reorderedColumns,\n dragKey,\n dropIndex,\n startReorder,\n moveReorder,\n endReorder,\n commitOrder,\n } = useColumnReorder({\n columns,\n thRefs,\n order: columnOrder,\n defaultOrder: defaultColumnOrder,\n onColumnOrderChange,\n });\n\n // The hook returns the same column objects it was given, just reordered.\n const orderedColumns = reorderedColumns as DataTableColumn[];\n const hiddenSet = useMemo(() => new Set(hidden), [hidden]);\n const visibleColumns = useMemo(\n () => orderedColumns.filter((c) => !hiddenSet.has(c.key)),\n [orderedColumns, hiddenSet],\n );\n\n /* ---- data pipeline: rows → search → filters → sort → page ---- */\n\n const rows = useMemo[]>(\n () =>\n data.map((row, index) => ({\n row,\n id: getRowId ? getRowId(row, index) : String(index),\n })),\n [data, getRowId],\n );\n\n const filteredRows = useMemo(() => {\n const query = search.trim().toLowerCase();\n const searchable = columns.filter((c) => c.searchable !== false);\n const active = columns.filter((c) => isFilterActive(filters[c.key]));\n if (!query && active.length === 0) return rows;\n return rows.filter(({ row }) => {\n if (\n query &&\n !searchable.some((c) => textOf(row, c).toLowerCase().includes(query))\n )\n return false;\n for (const column of active) {\n const value = filters[column.key];\n const text = textOf(row, column);\n if (Array.isArray(value)) {\n if (!value.includes(text)) return false;\n } else if (!text.toLowerCase().includes(value.trim().toLowerCase())) {\n return false;\n }\n }\n return true;\n });\n }, [rows, columns, search, filters]);\n\n const sortedRows = useMemo(() => {\n const keys = sorts\n .map((s) => ({ s, column: columns.find((c) => c.key === s.key) }))\n .filter(\n (k): k is { s: SortState; column: DataTableColumn } =>\n k.column !== undefined,\n );\n if (keys.length === 0) return filteredRows;\n return [...filteredRows].sort((a, b) => {\n for (const { s, column } of keys) {\n const cmp = compareValues(\n readSortValue(a.row, column),\n readSortValue(b.row, column),\n );\n if (cmp !== 0) return s.direction === \"asc\" ? cmp : -cmp;\n }\n return 0;\n });\n }, [filteredRows, sorts, columns]);\n\n const paged = pageSize > 0;\n const pageCount = paged\n ? Math.max(1, Math.ceil(sortedRows.length / pageSize))\n : 1;\n const page = Math.min(Math.max(1, pageRaw), pageCount);\n const pageRows = paged\n ? sortedRows.slice((page - 1) * pageSize, page * pageSize)\n : sortedRows;\n\n /* ---- sorting ---- */\n\n const applySort = useCallback(\n (next: SortState[]) => {\n setSorts(next);\n setPage(1);\n const primary = next[0];\n const column = primary && columns.find((c) => c.key === primary.key);\n setAnnouncement(\n column\n ? `Sorted by ${next\n .map((s) => {\n const c = columns.find((col) => col.key === s.key);\n return `${c ? labelOf(c) : s.key} ${s.direction === \"asc\" ? \"ascending\" : \"descending\"}`;\n })\n .join(\", then \")}`\n : \"Sorting cleared\",\n );\n },\n [columns, setSorts, setPage],\n );\n\n /* ---- filtering ---- */\n\n const setColumnFilter = useCallback(\n (key: string, value: DataTableFilterValue) => {\n const next = { ...filters };\n if (isFilterActive(value)) next[key] = value;\n else delete next[key];\n setFilters(next);\n setPage(1);\n },\n [filters, setFilters, setPage],\n );\n\n const activeFilterCount = columns.filter((c) =>\n isFilterActive(filters[c.key]),\n ).length;\n\n const clearFilters = useCallback(() => {\n setFilters({});\n if (search) setSearch(\"\");\n setPage(1);\n }, [setFilters, search, setSearch, setPage]);\n\n const selectOptions = useCallback(\n (column: DataTableColumn) => {\n if (column.filterOptions) return column.filterOptions;\n const seen = new Set();\n for (const { row } of rows) seen.add(textOf(row, column));\n return [...seen].sort((a, b) => compareValues(a, b));\n },\n [rows],\n );\n\n /* ---- columns: visibility + keyboard move ---- */\n\n const toggleHidden = useCallback(\n (key: string) => {\n if (hiddenSet.has(key)) setHidden(hidden.filter((k) => k !== key));\n else if (visibleColumns.length > 1) setHidden([...hidden, key]);\n },\n [hidden, hiddenSet, setHidden, visibleColumns.length],\n );\n\n const moveColumn = useCallback(\n (key: string, dir: -1 | 1) => {\n const visibleKeys = visibleColumns.map((c) => c.key);\n const at = visibleKeys.indexOf(key);\n const neighbor = visibleKeys[at + dir];\n if (at === -1 || !neighbor) return;\n const keys = orderedColumns.map((c) => c.key).filter((k) => k !== key);\n const target = keys.indexOf(neighbor) + (dir === 1 ? 1 : 0);\n keys.splice(target, 0, key);\n commitOrder(keys);\n const column = visibleColumns[at];\n setAnnouncement(\n `${labelOf(column)} column moved to position ${at + dir + 1} of ${visibleKeys.length}`,\n );\n },\n [visibleColumns, orderedColumns, commitOrder],\n );\n\n /* ---- expansion ---- */\n\n const expandedSet = useMemo(() => new Set(expanded), [expanded]);\n const toggleExpanded = useCallback(\n (id: string) => {\n setExpanded(\n expandedSet.has(id)\n ? expanded.filter((x) => x !== id)\n : [...expanded, id],\n );\n },\n [expanded, expandedSet, setExpanded],\n );\n\n /* ---- selection (Shift+click selects a range in the current order) ---- */\n\n const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);\n const anchorRef = useRef(null);\n const shiftRef = useRef(false);\n useEffect(() => {\n if (!selectable) return;\n let held = false;\n const onKey = (e: KeyboardEvent) => {\n held = e.shiftKey;\n };\n // Capture phase runs before the checkbox's own click handler, so the\n // toggle knows whether this click (or Space/Enter press) was shifted.\n const onClick = (e: MouseEvent) => {\n shiftRef.current = e.shiftKey || held;\n };\n window.addEventListener(\"keydown\", onKey, true);\n window.addEventListener(\"keyup\", onKey, true);\n window.addEventListener(\"click\", onClick, true);\n return () => {\n window.removeEventListener(\"keydown\", onKey, true);\n window.removeEventListener(\"keyup\", onKey, true);\n window.removeEventListener(\"click\", onClick, true);\n };\n }, [selectable]);\n\n const toggleRow = useCallback(\n (id: string, checked: boolean) => {\n const next = new Set(selectedSet);\n const order = sortedRows.map((r) => r.id);\n const from = anchorRef.current ? order.indexOf(anchorRef.current) : -1;\n const to = order.indexOf(id);\n if (shiftRef.current && from !== -1 && to !== -1) {\n const [lo, hi] = from < to ? [from, to] : [to, from];\n for (let i = lo; i <= hi; i++) {\n if (checked) next.add(order[i]);\n else next.delete(order[i]);\n }\n } else if (checked) next.add(id);\n else next.delete(id);\n shiftRef.current = false;\n anchorRef.current = id;\n setSelectedIds([...next]);\n },\n [selectedSet, sortedRows, setSelectedIds],\n );\n\n const allSelected =\n sortedRows.length > 0 && sortedRows.every((r) => selectedSet.has(r.id));\n const someSelected = sortedRows.some((r) => selectedSet.has(r.id));\n const toggleAll = useCallback(() => {\n const next = new Set(selectedSet);\n for (const r of sortedRows) {\n if (allSelected) next.delete(r.id);\n else next.add(r.id);\n }\n setSelectedIds([...next]);\n }, [allSelected, selectedSet, sortedRows, setSelectedIds]);\n\n const rowLabel = useCallback(\n (row: T) => {\n if (getRowLabel) return getRowLabel(row);\n const first = visibleColumns[0] ?? columns[0];\n return first ? textOf(row, first) : \"row\";\n },\n [getRowLabel, visibleColumns, columns],\n );\n\n /* ---- layout ---- */\n\n const leadCount = (selectable ? 1 : 0) + (renderExpanded ? 1 : 0);\n const spanAll = visibleColumns.length + leadCount;\n const minTableWidth = useMemo(() => {\n let total =\n (selectable ? SELECT_COL_PX : 0) + (renderExpanded ? EXPAND_COL_PX : 0);\n for (const column of visibleColumns) {\n const px =\n column.width?.endsWith(\"px\") && Number.parseFloat(column.width);\n total += px && Number.isFinite(px) ? px : minColumnWidth;\n }\n return Math.round(total);\n }, [visibleColumns, selectable, renderExpanded, minColumnWidth]);\n\n const layoutTransition = reduce ? { duration: 0 } : SPRING_LAYOUT;\n const rowLayout = reduce ? false : (\"position\" as const);\n const firstIndex = paged ? (page - 1) * pageSize : 0;\n const selectedCount = selectedIds.length;\n const numberFormat = useMemo(() => new Intl.NumberFormat(\"en-US\"), []);\n\n // Index of the visible header showing the drop line (`dropIndex` counts\n // hidden columns too, so translate it to the drawn header's key).\n const dropKey =\n dragKey && dropIndex !== null\n ? (orderedColumns[dropIndex]?.key ?? null)\n : null;\n const dropAtEnd =\n dragKey !== null && dropIndex !== null && dropIndex >= orderedColumns.length;\n\n const { primary: titleColumns, fields: fieldColumns } = splitStackColumns(\n visibleColumns,\n );\n const filterChipColumns = visibleColumns.filter((c) => c.filter);\n const hasSortable = visibleColumns.some((c) => c.sortable);\n\n const clearFiltersButton =\n activeFilterCount > 0 || search ? (\n \n Clear search and filters\n \n ) : null;\n\n const expandButton = (id: string, name: string, isOpen: boolean) => (\n toggleExpanded(id)}\n className=\"grid size-7 shrink-0 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 pointer-coarse:size-9\"\n >\n \n \n \n \n );\n\n // Height is the point of this panel: it morphs open from 0 to its content height.\n const detailPanel = (entry: Entry, stackedCard = false) => (\n \n
\n \n {renderExpanded?.(entry.row)}\n
\n \n \n );\n\n return (\n \n {/* Toolbar; the selection bar slides over it while rows are selected. */}\n
\n {showSearch ? (\n
\n \n {\n setSearch(e.target.value);\n setPage(1);\n }}\n placeholder={searchPlaceholder}\n aria-label=\"Search rows\"\n className=\"h-8 w-full min-w-0 rounded-lg border border-border bg-background pr-8 pl-8 text-sm outline-none transition-colors placeholder:text-muted-foreground/70 focus-visible:border-border-strong focus-visible:ring-2 focus-visible:ring-ring/30 [&::-webkit-search-cancel-button]:hidden\"\n />\n \n {search ? (\n {\n setSearch(\"\");\n setPage(1);\n }}\n initial={{ opacity: 0, scale: reduce ? 1 : 0.6 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: reduce ? 1 : 0.6 }}\n transition={reduce ? { duration: 0.1 } : SPRING_SWAP}\n className=\"-translate-y-1/2 absolute top-1/2 right-1.5 grid size-5 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground\"\n >\n \n \n ) : null}\n \n
\n ) : (\n
\n )}\n {activeFilterCount > 0 ? (\n \n \n {activeFilterCount} {activeFilterCount === 1 ? \"filter\" : \"filters\"}\n \n \n ) : null}\n {toolbar}\n \n\n \n {selectable && selectedCount > 0 ? (\n \n \n \n \n \n {numberFormat.format(selectedCount)}\n \n \n \n selected\n \n
\n {selectionActions?.(selectedIds)}\n {\n setSelectedIds([]);\n anchorRef.current = null;\n }}\n className=\"inline-flex h-7 items-center gap-1 rounded-md px-2 font-medium text-xs transition-colors hover:bg-primary-foreground/15\"\n >\n \n Clear\n \n
\n \n ) : null}\n \n
\n\n {stacked ? (\n <>\n {selectable || hasSortable || filterChipColumns.length > 0 ? (\n
\n {selectable ? (\n \n ) : null}\n applySort(next ? [next] : [])}\n className=\"ml-auto\"\n />\n {filterChipColumns.length > 0 ? (\n
\n {filterChipColumns.map((column) => {\n const index = visibleColumns.indexOf(column);\n const sortIndex = sorts.findIndex(\n (s) => s.key === column.key,\n );\n return (\n 0}\n canMoveRight={\n reorderable && index < visibleColumns.length - 1\n }\n reorderable={reorderable}\n canHide={\n column.hideable !== false && visibleColumns.length > 1\n }\n onSort={(direction) =>\n applySort(\n direction\n ? [{ key: column.key, direction }]\n : sorts.filter((s) => s.key !== column.key),\n )\n }\n onFilter={(value) => setColumnFilter(column.key, value)}\n onMove={(dir) => moveColumn(column.key, dir)}\n onHide={() => toggleHidden(column.key)}\n />\n );\n })}\n
\n ) : null}\n
\n ) : null}\n {pageRows.length === 0 ? (\n
\n {emptyState}\n {clearFiltersButton}\n
\n ) : (\n
    \n {pageRows.map((entry) => {\n const isSelected = selectedSet.has(entry.id);\n const isOpen = expandedSet.has(entry.id);\n const name = rowLabel(entry.row);\n return (\n \n
    \n {selectable ? (\n \n toggleRow(entry.id, checked)\n }\n aria-label={`Select ${name}`}\n />\n ) : null}\n
    \n {titleColumns.map((column) => (\n \n {readCell(entry.row, column)}\n \n ))}\n
    \n {renderExpanded\n ? expandButton(entry.id, name, isOpen)\n : null}\n
    \n ({\n key: column.key,\n label: column.header,\n value: readCell(entry.row, column),\n }))}\n />\n \n {renderExpanded && isOpen ? (\n detailPanel(entry, true)\n ) : null}\n \n \n );\n })}\n
\n )}\n \n ) : (\n
\n \n \n {selectable ? : null}\n {renderExpanded ? : null}\n {visibleColumns.map((column) => (\n \n ))}\n \n \n \n {selectable ? (\n \n
\n \n
\n \n ) : null}\n {renderExpanded ? (\n \n Expand\n \n ) : null}\n {visibleColumns.map((column, index) => {\n const sortIndex = sorts.findIndex((s) => s.key === column.key);\n const sortState = sortIndex === -1 ? null : sorts[sortIndex];\n const filtered = isFilterActive(filters[column.key]);\n const isDragging = dragKey === column.key;\n const isLast = index === visibleColumns.length - 1;\n return (\n {\n thRefs.current[column.key] = el;\n }}\n layout={rowLayout}\n transition={layoutTransition}\n scope=\"col\"\n aria-sort={\n sortIndex === 0 && sortState\n ? sortState.direction === \"asc\"\n ? \"ascending\"\n : \"descending\"\n : undefined\n }\n data-drop={dropKey === column.key || undefined}\n data-dropend={(dropAtEnd && isLast) || undefined}\n className={cn(\n \"group/th relative border-border border-b bg-muted/60 p-0 font-medium text-muted-foreground\",\n \"data-[drop=true]:before:absolute data-[drop=true]:before:inset-y-1 data-[drop=true]:before:left-0 data-[drop=true]:before:w-0.5 data-[drop=true]:before:rounded-full data-[drop=true]:before:bg-primary\",\n \"data-[dropend=true]:after:absolute data-[dropend=true]:after:inset-y-1 data-[dropend=true]:after:right-0 data-[dropend=true]:after:w-0.5 data-[dropend=true]:after:rounded-full data-[dropend=true]:after:bg-primary\",\n isDragging && \"opacity-50\",\n )}\n >\n \n {reorderable ? (\n startReorder(column.key, e)}\n onPointerMove={moveReorder}\n onPointerUp={endReorder}\n onPointerCancel={endReorder}\n className={cn(\n \"absolute inset-y-0 left-0 z-[1] flex w-4 cursor-grab touch-none items-center justify-center text-muted-foreground/50 opacity-0 transition-[color,opacity] hover:text-foreground active:cursor-grabbing group-hover/th:opacity-100 [@media(hover:none)]:opacity-100\",\n TOUCH_GESTURE_CLASS,\n )}\n >\n \n \n ) : null}\n {column.sortable ? (\n \n applySort(\n nextSortStack(sorts, column.key, e.shiftKey),\n )\n }\n className={cn(\n \"flex h-full min-w-0 flex-1 select-none items-center gap-1 outline-none transition-colors hover:text-foreground focus-visible:text-foreground focus-visible:underline\",\n \"px-4\",\n filtered && \"pr-9\",\n alignFlex(column.align),\n sortState && \"text-foreground\",\n )}\n >\n {column.header}\n 1 && sortState ? sortIndex + 1 : null}\n reduce={reduce}\n />\n \n ) : (\n \n {column.header}\n \n )}\n 0}\n canMoveRight={reorderable && !isLast}\n reorderable={reorderable}\n canHide={\n column.hideable !== false && visibleColumns.length > 1\n }\n onSort={(direction) =>\n applySort(\n direction\n ? [{ key: column.key, direction }]\n : sorts.filter((s) => s.key !== column.key),\n )\n }\n onFilter={(value) => setColumnFilter(column.key, value)}\n onMove={(dir) => moveColumn(column.key, dir)}\n onHide={() => toggleHidden(column.key)}\n />\n
\n \n );\n })}\n \n \n \n {pageRows.length === 0 ? (\n \n \n
\n {emptyState}\n {clearFiltersButton}\n
\n \n \n ) : (\n pageRows.map((entry) => {\n const isSelected = selectedSet.has(entry.id);\n const isOpen = expandedSet.has(entry.id);\n const detailId = `${uid}-detail-${entry.id}`;\n const name = rowLabel(entry.row);\n return (\n \n \n {selectable ? (\n \n
\n \n toggleRow(entry.id, checked)\n }\n aria-label={`Select ${name}`}\n />\n
\n \n ) : null}\n {renderExpanded ? (\n \n
\n toggleExpanded(entry.id)}\n className=\"grid size-7 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50\"\n >\n \n \n \n \n
\n \n ) : null}\n {visibleColumns.map((column) => (\n \n {readCell(entry.row, column)}\n \n ))}\n \n \n {renderExpanded && isOpen ? (\n \n \n {detailPanel(entry)}\n \n \n ) : null}\n \n \n );\n })\n )}\n \n \n
\n )}\n\n {paged ? (\n
\n \n {sortedRows.length === 0\n ? \"0 rows\"\n : `${numberFormat.format(firstIndex + 1)}–${numberFormat.format(\n firstIndex + pageRows.length,\n )} of ${numberFormat.format(sortedRows.length)}`}\n \n {pageCount > 1 ? (\n \n ) : null}\n
\n ) : null}\n\n
\n {announcement}\n
\n \n );\n}\n\n/* ------------------------------------------------------------------------ */\n/* Header parts */\n/* ------------------------------------------------------------------------ */\n\nfunction SortIndicator({\n direction,\n priority,\n reduce,\n}: {\n direction: SortState[\"direction\"] | null;\n priority: number | null;\n reduce: boolean;\n}) {\n return (\n \n \n \n \n \n {priority ? (\n \n {priority}\n \n ) : null}\n \n \n );\n}\n\nfunction ColumnMenu({\n column,\n thRefs,\n position,\n sortState,\n filtered,\n filterValue,\n options,\n canMoveLeft,\n canMoveRight,\n reorderable,\n canHide,\n onSort,\n onFilter,\n onMove,\n onHide,\n chip = false,\n}: {\n /** Render the trigger as a labelled chip anchored to itself (stacked layout) instead of a header-cell button. */\n chip?: boolean;\n column: DataTableColumn;\n thRefs: HeaderCellRefs;\n position: number;\n sortState: SortState | null;\n filtered: boolean;\n filterValue: DataTableFilterValue | undefined;\n options: string[] | null;\n canMoveLeft: boolean;\n canMoveRight: boolean;\n reorderable: boolean;\n canHide: boolean;\n onSort: (direction: SortState[\"direction\"] | null) => void;\n onFilter: (value: DataTableFilterValue) => void;\n onMove: (dir: -1 | 1) => void;\n onHide: () => void;\n}) {\n const [open, setOpen] = useState(false);\n const triggerRef = useRef(null);\n const label = labelOf(column);\n const close = useCallback(() => setOpen(false), []);\n\n // Anchor to the whole header cell, so the panel lines up with the column.\n const getAnchor = useCallback((): AnchorRect | null => {\n const r = (\n chip ? triggerRef.current : thRefs.current[column.key]\n )?.getBoundingClientRect();\n return r ? { left: r.left, right: r.right, bottom: r.bottom } : null;\n }, [chip, thRefs, column.key]);\n\n const hasSort = !!column.sortable;\n const hasFilter = !!column.filter;\n const selected = Array.isArray(filterValue) ? filterValue : [];\n const hasAnything = hasSort || hasFilter || reorderable || canHide;\n if (!hasAnything) return null;\n\n return (\n <>\n {chip ? (\n setOpen((v) => !v)}\n className={cn(\n \"inline-flex h-7 items-center gap-1 rounded-full border px-2.5 text-xs outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 pointer-coarse:h-9 pointer-coarse:px-3\",\n filtered\n ? \"border-primary/40 bg-primary/10 text-foreground\"\n : \"border-border bg-background text-muted-foreground\",\n )}\n >\n {filtered ? (\n \n ) : null}\n {label}\n \n {filtered ? \" (filtered)\" : \"\"} column options\n \n \n \n ) : (\n setOpen((v) => !v)}\n className={cn(\n \"-translate-y-1/2 absolute top-1/2 right-1 grid size-6 place-items-center rounded-md bg-muted outline-none transition-[color,background-color,opacity] hover:bg-background hover:text-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/50\",\n filtered || open\n ? \"text-primary opacity-100\"\n : \"opacity-0 group-hover/th:opacity-100 [@media(hover:none)]:opacity-100\",\n )}\n >\n {filtered ? (\n \n ) : (\n \n )}\n \n )}\n \n {hasSort ? (\n <>\n onSort(\"asc\")}\n className={PANEL_ITEM}\n >\n \n Sort ascending\n \n onSort(\"desc\")}\n className={PANEL_ITEM}\n >\n \n Sort descending\n \n {sortState ? (\n onSort(null)}\n className={PANEL_ITEM}\n >\n \n Clear sort\n \n ) : null}\n \n ) : null}\n {hasFilter ? (\n <>\n {hasSort ?
: null}\n
Filter
\n {column.filter === \"text\" ? (\n
\n onFilter(e.target.value)}\n placeholder={`${label} contains…`}\n aria-label={`Filter ${label} (contains)`}\n className=\"h-8 w-full rounded-md border border-border bg-background px-2.5 text-sm outline-none placeholder:text-muted-foreground/70 focus-visible:border-border-strong focus-visible:ring-2 focus-visible:ring-ring/30\"\n />\n
\n ) : (\n
\n {(options ?? []).map((option) => (\n \n \n onFilter(\n checked\n ? [...selected, option]\n : selected.filter((o) => o !== option),\n )\n }\n label={option}\n className=\"w-full gap-2 text-sm [&_button]:size-4\"\n />\n
\n ))}\n
\n )}\n {filtered ? (\n onFilter(column.filter === \"text\" ? \"\" : [])}\n className={PANEL_ITEM}\n >\n \n Clear filter\n \n ) : null}\n \n ) : null}\n {reorderable || canHide ? (\n <>\n {hasSort || hasFilter ?
: null}\n {reorderable ? (\n <>\n onMove(-1)}\n className={PANEL_ITEM}\n >\n \n Move left\n \n onMove(1)}\n className={PANEL_ITEM}\n >\n \n Move right\n \n \n ) : null}\n {canHide ? (\n {\n setOpen(false);\n onHide();\n }}\n className={PANEL_ITEM}\n >\n \n Hide column\n \n ) : null}\n \n ) : null}\n \n \n );\n}\n\nfunction ColumnsPicker({\n columns,\n hiddenSet,\n visibleCount,\n onToggle,\n}: {\n columns: DataTableColumn[];\n hiddenSet: Set;\n visibleCount: number;\n onToggle: (key: string) => void;\n}) {\n const [open, setOpen] = useState(false);\n const triggerRef = useRef(null);\n const close = useCallback(() => setOpen(false), []);\n const getAnchor = useCallback((): AnchorRect | null => {\n const r = triggerRef.current?.getBoundingClientRect();\n return r ? { left: r.left, right: r.right, bottom: r.bottom } : null;\n }, []);\n const hiddenCount = columns.filter((c) => hiddenSet.has(c.key)).length;\n\n return (\n <>\n setOpen((v) => !v)}\n className=\"inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 text-xs outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50\"\n >\n \n Columns\n {hiddenCount > 0 ? (\n \n {hiddenCount} hidden\n \n ) : null}\n \n \n
Visible columns
\n {columns.map((column) => {\n const visible = !hiddenSet.has(column.key);\n const locked =\n column.hideable === false || (visible && visibleCount <= 1);\n return (\n
\n onToggle(column.key)}\n label={labelOf(column)}\n className=\"w-full gap-2 text-sm [&_button]:size-4\"\n />\n
\n );\n })}\n \n \n );\n}\n"},{"path":"components/motion/table/stacked.tsx","type":"registry:component","target":"@components/motion/table/stacked.tsx","content":"\"use client\";\n\nimport {\n type ReactNode,\n type RefObject,\n useId,\n useLayoutEffect,\n useState,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport type { SortState, TableColumn } from \"./types\";\n\n/*\n * Shared pieces of the stacked (\"card list\") layout both tables switch to in a\n * narrow container (`mobileLayout=\"stack\"`).\n */\n\n/** Container width (px) below which `mobileLayout=\"stack\"` shows cards. */\nexport const DEFAULT_STACK_BELOW = 560;\n\n/**\n * True once the element measures narrower than `stackBelow`. Starts false, so\n * the server and the hydrating client both render the table, then switches in\n * a layout effect (before the first paint after hydration) and follows the\n * element's width from there. The element must not size to its content, or the\n * swap could feed back into the measurement — both tables measure their\n * full-width root.\n */\nexport function useStackedLayout(\n ref: RefObject,\n enabled: boolean,\n stackBelow: number,\n) {\n const [stacked, setStacked] = useState(false);\n useLayoutEffect(() => {\n const el = ref.current;\n if (!enabled || !el) {\n setStacked(false);\n return;\n }\n const update = (width: number) => setStacked(width < stackBelow);\n update(el.getBoundingClientRect().width);\n if (typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver((entries) => {\n const entry = entries[entries.length - 1];\n if (entry) update(entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width);\n });\n observer.observe(el);\n return () => observer.disconnect();\n }, [ref, enabled, stackBelow]);\n return enabled && stacked;\n}\n\n/** Plain-text name of a column, for option labels and announcements. */\nexport function columnLabel(column: TableColumn) {\n return typeof column.header === \"string\" ? column.header : column.key;\n}\n\n/**\n * Splits visible columns into the card title (`primary` columns, or the first\n * column when none opts in) and the label/value fields under it, leaving out\n * `hideOnMobile` columns. A primary column is always shown.\n */\nexport function splitStackColumns>(columns: C[]) {\n const flagged = columns.filter((c) => c.primary);\n const primary = flagged.length > 0 ? flagged : columns.slice(0, 1);\n const titleKeys = new Set(primary.map((c) => c.key));\n const fields = columns.filter((c) => !titleKeys.has(c.key) && !c.hideOnMobile);\n return { primary, fields };\n}\n\n/** Rough card height before measurement: title row + one line per field. */\nexport function estimateCardHeight(fieldCount: number) {\n return 56 + fieldCount * 28;\n}\n\nexport type StackedField = {\n key: string;\n label: ReactNode;\n value: ReactNode;\n /** The value is an input: let it take the full width instead of hugging the right edge. */\n control?: boolean;\n};\n\n/**\n * A card's label/value pairs as a description list, so each value is read\n * with its column header.\n */\nexport function StackedFields({\n fields,\n className,\n}: {\n fields: StackedField[];\n className?: string;\n}) {\n if (fields.length === 0) return null;\n return (\n
\n {fields.map((field) => (\n
\n
\n {field.label}\n
\n \n {field.value}\n \n
\n ))}\n
\n );\n}\n\nconst SORT_NONE = \"\";\n\n/**\n * Compact sort control shown above the cards, where there are no headers to\n * click: one native select of \"column, direction\" pairs.\n */\nexport function StackSortSelect({\n columns,\n value,\n onChange,\n className,\n}: {\n columns: TableColumn[];\n value: SortState | null;\n onChange: (next: SortState | null) => void;\n className?: string;\n}) {\n const id = useId();\n const sortable = columns.filter((c) => c.sortable);\n if (sortable.length === 0) return null;\n const current =\n value && sortable.some((c) => c.key === value.key)\n ? `${value.direction}:${value.key}`\n : SORT_NONE;\n return (\n
\n \n {\n const raw = e.target.value;\n if (raw === SORT_NONE) return onChange(null);\n const split = raw.indexOf(\":\");\n onChange({\n direction: raw.slice(0, split) === \"desc\" ? \"desc\" : \"asc\",\n key: raw.slice(split + 1),\n });\n }}\n className=\"h-8 min-w-0 max-w-full rounded-lg border border-border bg-background px-2 text-foreground text-sm outline-none transition-colors focus-visible:border-border-strong focus-visible:ring-2 focus-visible:ring-ring/30\"\n >\n \n {sortable.map((column) => {\n const label = columnLabel(column);\n return [\n ,\n ,\n ];\n })}\n \n
\n );\n}\n"},{"path":"components/motion/table/types.ts","type":"registry:component","target":"@components/motion/table/types.ts","content":"import type { ReactNode } from \"react\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport type SortState = {\n key: string;\n direction: SortDirection;\n};\n\nexport type TableColumn = {\n /** Stable key; also the default object property read for the cell + sort value. */\n key: string;\n /** Header content. */\n header: ReactNode;\n /** Allow clicking the header to sort by this column. */\n sortable?: boolean;\n /** Cell text alignment. */\n align?: \"left\" | \"center\" | \"right\";\n /** Column width as a CSS length, e.g. \"160px\" or \"20%\". Omit to share remaining space equally. */\n width?: string;\n /** Custom cell renderer. Falls back to `row[key]`. */\n cell?: (row: T) => ReactNode;\n /** Render an inline text input for this column's cells (ignored when `cell` is set). */\n editable?: boolean;\n /** Value used for sorting. Falls back to `row[key]`. */\n sortValue?: (row: T) => string | number;\n /** Stacked layout (`mobileLayout=\"stack\"`): show this cell in the card title.\n * Defaults to the first column when no column sets it. */\n primary?: boolean;\n /** Stacked layout: leave this column out of the card's label/value pairs. */\n hideOnMobile?: boolean;\n};\n\n/**\n * Narrow-container layout. `\"scroll\"` keeps the table and scrolls it sideways;\n * `\"stack\"` renders one card per row while the table's own width is below\n * `stackBelow`.\n */\nexport type MobileLayout = \"scroll\" | \"stack\";\n\nexport type InsertPosition = \"before\" | \"after\";\n\nexport interface TableProps {\n data: T[];\n columns: TableColumn[];\n /** Stable id per row, required for correct selection across sorts. Defaults to row index. */\n getRowId?: (row: T, index: number) => string;\n /** Render a leading checkbox column with select-all in the header. */\n selectable?: boolean;\n selectedRowIds?: string[];\n defaultSelectedRowIds?: string[];\n onSelectionChange?: (ids: string[]) => void;\n sort?: SortState | null;\n defaultSort?: SortState | null;\n onSortChange?: (sort: SortState | null) => void;\n /** Allow dragging the right edge of a header to resize that column. */\n resizable?: boolean;\n /** Minimum column width in px when resizing. */\n minColumnWidth?: number;\n onColumnResize?: (key: string, width: number) => void;\n /** Allow dragging a header grip to reorder columns. */\n reorderable?: boolean;\n onColumnOrderChange?: (keys: string[]) => void;\n /** Called when an `editable` cell changes. */\n onCellEdit?: (rowId: string, columnKey: string, value: string) => void;\n /** When set, non-sortable headers become editable inputs for the column name. */\n onColumnRename?: (columnKey: string, value: string) => void;\n /** Enables the row menu (Insert before / after). Receives the target index. */\n onInsertRow?: (index: number, position: InsertPosition) => void;\n /** Enables Delete in the row menu. */\n onDeleteRow?: (rowId: string, index: number) => void;\n /** Enables the column menu (Insert before / after). Receives the target column index. */\n onInsertColumn?: (index: number, position: InsertPosition) => void;\n /** Enables Delete in the column menu. */\n onDeleteColumn?: (columnKey: string, index: number) => void;\n /** Fixed row height in px — required for virtualization. */\n rowHeight?: number;\n /** Scroll viewport height in px. */\n height?: number;\n /** Rows rendered above/below the viewport. */\n overscan?: number;\n /** Fires when the viewport scrolls near the bottom — load the next page. */\n onEndReached?: () => void;\n /** Currently fetching — shows skeleton rows and pauses `onEndReached`. */\n loading?: boolean;\n /** How many skeleton rows to show while loading more (default 3). */\n skeletonRows?: number;\n emptyState?: ReactNode;\n /**\n * `\"scroll\"` (default) keeps today's sideways-scrolling table. `\"stack\"`\n * swaps to a virtualized card list (title from `primary` columns, the rest as\n * header: value pairs, editable cells stay inputs) whenever the table's own\n * width is below `stackBelow`. The server always renders the table.\n */\n mobileLayout?: MobileLayout;\n /** Width in px under which `mobileLayout=\"stack\"` shows cards (default 560). */\n stackBelow?: number;\n className?: string;\n}\n\n/** A data row paired with its stable id. */\nexport type TableRow = { row: T; id: string };\n\n/** Ref map from column key to its header cell, shared across the resize/reorder hooks. */\nexport type HeaderCellRefs = {\n current: Record;\n};\n"},{"path":"components/motion/table/use-column-reorder.ts","type":"registry:component","target":"@components/motion/table/use-column-reorder.ts","content":"import {\n type PointerEvent as ReactPointerEvent,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\nimport { capturePointer, releasePointer } from \"@/lib/touch\";\nimport type { HeaderCellRefs, TableColumn } from \"./types\";\n\nexport function useColumnReorder({\n columns,\n thRefs,\n order: orderProp,\n defaultOrder,\n onColumnOrderChange,\n}: {\n columns: TableColumn[];\n thRefs: HeaderCellRefs;\n /** Controlled column key order. Omit to keep the order internally. */\n order?: string[];\n /** Initial order for uncontrolled use; defaults to the `columns` order. */\n defaultOrder?: string[];\n onColumnOrderChange?: (keys: string[]) => void;\n}) {\n const [internalOrder, setOrder] = useState(\n () => defaultOrder ?? columns.map((c) => c.key),\n );\n const order = orderProp ?? internalOrder;\n const [dragKey, setDragKey] = useState(null);\n const [dropIndex, setDropIndex] = useState(null);\n\n // Apply the current order, tolerating columns added/removed at runtime. New\n // columns are placed at their position in `columns` (after their left\n // neighbor), not appended — so an inserted column lands where it was added.\n const orderedColumns = useMemo(() => {\n const byKey = new Map(columns.map((c) => [c.key, c]));\n const resultKeys = order.filter((k) => byKey.has(k));\n const present = new Set(resultKeys);\n columns.forEach((column, i) => {\n if (present.has(column.key)) return;\n let at = resultKeys.length;\n if (i === 0) {\n at = 0;\n } else {\n const idx = resultKeys.indexOf(columns[i - 1].key);\n at = idx === -1 ? i : idx + 1;\n }\n resultKeys.splice(at, 0, column.key);\n present.add(column.key);\n });\n return resultKeys\n .map((k) => byKey.get(k))\n .filter((c): c is TableColumn => c !== undefined);\n }, [order, columns]);\n\n const dropIndexFor = useCallback(\n (clientX: number) => {\n for (let i = 0; i < orderedColumns.length; i++) {\n const rect =\n thRefs.current[orderedColumns[i].key]?.getBoundingClientRect();\n if (rect && clientX < rect.left + rect.width / 2) return i;\n }\n return orderedColumns.length;\n },\n [orderedColumns, thRefs],\n );\n\n /** Commit a full key order — the drop of a drag, or a keyboard move. */\n const commitOrder = useCallback(\n (keys: string[]) => {\n if (orderProp === undefined) setOrder(keys);\n onColumnOrderChange?.(keys);\n },\n [orderProp, onColumnOrderChange],\n );\n\n const startReorder = useCallback((key: string, e: ReactPointerEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setDragKey(key);\n capturePointer(e.currentTarget, e.pointerId);\n }, []);\n\n const moveReorder = useCallback(\n (e: ReactPointerEvent) => {\n if (!dragKey) return;\n setDropIndex(dropIndexFor(e.clientX));\n },\n [dragKey, dropIndexFor],\n );\n\n const endReorder = useCallback(\n (e: ReactPointerEvent) => {\n releasePointer(e.currentTarget, e.pointerId);\n if (dragKey && dropIndex !== null) {\n const keys = orderedColumns.map((c) => c.key);\n const from = keys.indexOf(dragKey);\n if (from !== -1) {\n const without = keys.filter((_, i) => i !== from);\n let to = dropIndex;\n if (from < to) to--;\n without.splice(to, 0, dragKey);\n commitOrder(without);\n }\n }\n setDragKey(null);\n setDropIndex(null);\n },\n [dragKey, dropIndex, orderedColumns, commitOrder],\n );\n\n return {\n orderedColumns,\n dragKey,\n dropIndex,\n startReorder,\n moveReorder,\n endReorder,\n commitOrder,\n };\n}\n"},{"path":"components/motion/table/utils.ts","type":"registry:component","target":"@components/motion/table/utils.ts","content":"import type { ReactNode } from \"react\";\nimport type { TableColumn } from \"./types\";\n\nexport const CHECKBOX_PX = 48;\nexport const CHECKBOX_WIDTH = `${CHECKBOX_PX}px`;\n\n/** Highlights the top edge of the active column's header cell. */\nexport const COLUMN_ACTIVE_SHADOW = \"inset 0 1px 0 var(--color-primary)\";\n\nexport function alignFlex(align: TableColumn[\"align\"]) {\n if (align === \"right\") return \"justify-end\";\n if (align === \"center\") return \"justify-center\";\n return \"justify-start\";\n}\n\nexport function alignText(align: TableColumn[\"align\"]) {\n if (align === \"right\") return \"text-right\";\n if (align === \"center\") return \"text-center\";\n return \"text-left\";\n}\n\nexport function readCell(row: T, column: TableColumn): ReactNode {\n if (column.cell) return column.cell(row);\n return (row as Record)[column.key];\n}\n\nexport function readSortValue(\n row: T,\n column: TableColumn,\n): string | number {\n if (column.sortValue) return column.sortValue(row);\n return (row as Record)[column.key];\n}\n"},{"path":"components/motion/checkbox.tsx","type":"registry:component","target":"@components/motion/checkbox.tsx","content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useId } from \"react\";\nimport { EASE_OUT, SPRING_PRESS } from \"@/lib/ease\";\nimport { TOUCH_TARGET_CLASS } from \"@/lib/touch\";\nimport { cn } from \"@/lib/utils\";\n\nconst CHECK_PATH = \"M5 13l4 4L19 7\";\nconst INDETERMINATE_PATH = \"M6 12h12\";\n\nexport interface CheckboxProps {\n checked: boolean;\n onCheckedChange: (checked: boolean) => void;\n disabled?: boolean;\n indeterminate?: boolean;\n label?: string;\n className?: string;\n id?: string;\n \"aria-label\"?: string;\n /** Associates an external message (e.g. a form error) with the control. */\n \"aria-describedby\"?: string;\n}\n\nexport function Checkbox({\n checked,\n onCheckedChange,\n disabled,\n indeterminate,\n label,\n className,\n id: idProp,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedBy,\n}: CheckboxProps) {\n const autoId = useId();\n const id = idProp ?? autoId;\n const reduce = useReducedMotion();\n const showMark = checked || indeterminate;\n const path = indeterminate ? INDETERMINATE_PATH : CHECK_PATH;\n\n return (\n \n !disabled && onCheckedChange(!checked)}\n whileTap={reduce || disabled ? undefined : { scale: 0.92 }}\n transition={SPRING_PRESS}\n data-state={\n checked ? \"checked\" : indeterminate ? \"indeterminate\" : \"unchecked\"\n }\n className={cn(\n \"relative inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 outline-none transition-colors duration-200\",\n TOUCH_TARGET_CLASS,\n \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n \"disabled:cursor-not-allowed disabled:opacity-60\",\n showMark\n ? \"border-primary bg-primary text-primary-foreground\"\n : \"border-muted-foreground/50 bg-background hover:border-muted-foreground\",\n )}\n >\n \n {showMark ? (\n \n {indeterminate ? \"Partially selected\" : \"Selected\"}\n \n \n ) : null}\n \n \n {label ? (\n \n {label}\n \n ) : null}\n \n );\n}\n"},{"path":"components/motion/pagination.tsx","type":"registry:component","target":"@components/motion/pagination.tsx","content":"\"use client\";\n\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport {\n AnimatePresence,\n LayoutGroup,\n motion,\n useReducedMotion,\n type Variants,\n} from \"motion/react\";\nimport { useCallback, useId, useState } from \"react\";\nimport { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS, SPRING_SWAP } from \"@/lib/ease\";\nimport { useHoverCapable } from \"@/lib/hooks/use-hover-capable\";\nimport { TOUCH_TARGET_CLASS, TOUCH_TARGET_Y_CLASS } from \"@/lib/touch\";\nimport { cn } from \"@/lib/utils\";\n\nexport type PaginationVariant = \"numbers\" | \"dots\";\nexport type PaginationItem = number | \"ellipsis\";\n\nexport interface PaginationProps {\n /** Total number of pages (1-based). */\n total: number;\n /** Controlled current page (1-based). */\n page?: number;\n /** Initial page for uncontrolled use. */\n defaultPage?: number;\n onPageChange?: (page: number) => void;\n /** Pages shown on each side of the current page. */\n siblings?: number;\n /** Pages always shown at the start and end. */\n boundaries?: number;\n /** `numbers` renders page buttons; `dots` is a compact indicator row. */\n variant?: PaginationVariant;\n /** Most dots shown at once in the `dots` variant; the window follows the page. */\n maxDots?: number;\n /** Render previous / next controls. */\n showControls?: boolean;\n disabled?: boolean;\n /** Accessible name for the `