55:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 56:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4e:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-virtual"}] 4f:["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cn"}]]}]}] 50:["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}] 51:["$","li","zod",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/zod","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"zod"}]]}]}] 52:["$","li","zustand",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/zustand","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"zustand"}]]}]}] 53:["$","$L55",null,{"namespace":"@uicapsule","registryDependencies":[]}] 57:T6b7,"use client"; import type { ChangeEvent, KeyboardEvent } from "react"; import { Input } from "./ui"; import type { SpreadsheetRow } from "../lib/spreadsheet-store"; import { useSpreadsheetStore } from "../lib/spreadsheet-store"; interface EditableCellProps { row: { original: SpreadsheetRow }; column: { id: string }; } export const EditableCell = ({ row, column }: EditableCellProps) => { const editingCell = useSpreadsheetStore((state) => state.editingCell); const setEditingCell = useSpreadsheetStore((state) => state.setEditingCell); const updateData = useSpreadsheetStore((state) => state.updateData); // Cells are cleared to `undefined` by Delete/Backspace; coerce so stays controlled. const value = row.original[column.id] ?? ""; const isEditing = editingCell?.rowId === row.original.id && editingCell?.columnId === column.id; const onChange = (e: ChangeEvent) => { updateData(row.original.id, column.id, e.target.value); }; const onBlur = () => { setEditingCell(null); }; const onKeyDown = (e: KeyboardEvent) => { if (e.key === "Enter" || e.key === "Escape") { setEditingCell(null); } e.stopPropagation(); }; if (isEditing) { return ( ); } return (

{value}

); }; 58:Tc75,"use client"; import { useRef, useState } from "react"; import type { MouseEvent as ReactMouseEvent, RefObject, Ref } from "react"; import { cn } from "cn"; import { MIN_COLUMN_WIDTH } from "../lib/spreadsheet-utils"; /** Half the handle's hit width, so the drag line sits centred on it. */ const DRAG_LINE_OFFSET = 2; interface ResizeHandleProps { columnId: string; width: number; handleColumnResize: (columnId: string, width: number) => void; tableContainerRef: RefObject; dragLineRef: RefObject; setDragLineVisible: (visible: boolean) => void; className?: string; ref?: Ref; } export const ResizeHandle = ({ columnId, width, handleColumnResize, tableContainerRef, dragLineRef, setDragLineVisible, className, ref, }: ResizeHandleProps) => { const [isResizing, setIsResizing] = useState(false); const startXRef = useRef(0); const startWidthRef = useRef(0); const columnStartXRef = useRef(0); const currentMouseXRef = useRef(0); const handleMouseDown = (e: ReactMouseEvent) => { e.preventDefault(); e.stopPropagation(); setIsResizing(true); setDragLineVisible(true); startXRef.current = e.clientX; // Seed with the press position so a click with no drag commits the current width. currentMouseXRef.current = e.clientX; startWidthRef.current = width; const headerElement = e.currentTarget.closest("[data-column-id]"); if (headerElement instanceof HTMLElement) { const rect = headerElement.getBoundingClientRect(); const tableRect = tableContainerRef.current?.getBoundingClientRect(); if (tableRect) { columnStartXRef.current = rect.left - tableRect.left; const initialDragX = columnStartXRef.current + startWidthRef.current - DRAG_LINE_OFFSET; if (dragLineRef.current) { dragLineRef.current.style.left = `${initialDragX}px`; } } } const widthForClientX = (clientX: number) => Math.max(MIN_COLUMN_WIDTH, startWidthRef.current + (clientX - startXRef.current)); const handleMouseMove = (event: MouseEvent) => { currentMouseXRef.current = event.clientX; const dragX = columnStartXRef.current + widthForClientX(event.clientX) - DRAG_LINE_OFFSET; if (dragLineRef.current) { dragLineRef.current.style.left = `${dragX}px`; } }; const handleMouseUp = () => { setIsResizing(false); setDragLineVisible(false); handleColumnResize(columnId, widthForClientX(currentMouseXRef.current)); document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); }; document.addEventListener("mousemove", handleMouseMove); document.addEventListener("mouseup", handleMouseUp); }; return (

); }; 59:T1a2d,"use client"; import { useCallback, useEffect, useMemo, useRef } from "react"; import type { HTMLAttributes, ReactNode, Ref } from "react"; import { cn } from "cn"; import { flexRender, useTable } from "@tanstack/react-table"; import { useVirtualizer } from "@tanstack/react-virtual"; import type { SpreadsheetRow } from "../lib/spreadsheet-store"; import type { ColumnInfo, NavigationMap, SpreadsheetFeatures } from "../lib/spreadsheet-utils"; import type { ColumnDef } from "@tanstack/react-table"; import { useSpreadsheetStore } from "../lib/spreadsheet-store"; import { createNavigationMap, getColumnSizeVars, getRowCells, MIN_COLUMN_WIDTH, spreadsheetFeatures, } from "../lib/spreadsheet-utils"; import { useSpreadsheetHandlers } from "../lib/use-spreadsheet-handlers"; import { TableBody } from "./table-body"; import { ResizeHandle } from "./resize-handle"; export interface SpreadsheetProps extends HTMLAttributes { columns: ColumnDef[]; showRowNumbers?: boolean; renderRowNumber?: (rowIndex: number) => ReactNode; renderRowActions?: (row: SpreadsheetRow, rowIndex: number) => ReactNode; ref?: Ref; } export const Spreadsheet = ({ className, style, columns, showRowNumbers = true, renderRowNumber, renderRowActions, ref, ...props }: SpreadsheetProps) => { "use no memo"; // TanStack Virtual exposes mutable measurements that React Compiler cannot memoize. const data = useSpreadsheetStore((state) => state.data); const selectedCells = useSpreadsheetStore((state) => state.selectedCells); const isDragging = useSpreadsheetStore((state) => state.dragStartCell !== null); const columnWidths = useSpreadsheetStore((state) => state.columnWidths); const setColumnWidths = useSpreadsheetStore((state) => state.setColumnWidths); const dragLineVisible = useSpreadsheetStore((state) => state.dragLineVisible); const setDragLineVisible = useSpreadsheetStore((state) => state.setDragLineVisible); const tableContainerRef = useRef(null); const dragLineRef = useRef(null); const table = useTable({ columns, data, features: spreadsheetFeatures, }); const leafColumns = table.getAllLeafColumns(); const columnMeta = useMemo( () => leafColumns.map((column) => ({ id: column.id })), [leafColumns], ); const navigationMap = useMemo>( () => createNavigationMap(data, columnMeta), [data, columnMeta], ); const columnSizeVars = useMemo(() => getColumnSizeVars(columnWidths), [columnWidths]); const { handleMouseDown, handleMouseMove, handleMouseUp, handleKeyDown } = useSpreadsheetHandlers( { columns: columnMeta, navigationMap, }, ); const handleColumnResize = useCallback( (columnId: string, width: number) => { setColumnWidths((prev) => ({ ...prev, [columnId]: Math.max(MIN_COLUMN_WIDTH, width), })); }, [setColumnWidths], ); const getRowCellsHelper = useCallback( (rowId: string) => getRowCells(rowId, columnMeta), [columnMeta], ); // Mouseup should be global to handle drag ending outside the spreadsheet useEffect(() => { document.addEventListener("mouseup", handleMouseUp); return () => { document.removeEventListener("mouseup", handleMouseUp); }; }, [handleMouseUp]); // oxlint-disable-next-line react/incompatible-library -- This component and its table body opt out of memoization for mutable virtualizer measurements. const rowVirtualizer = useVirtualizer({ count: table.getRowModel().rows.length, estimateSize: () => 36, getScrollElement: () => tableContainerRef.current, overscan: 10, }); return (

{showRowNumbers && (

)} {(table.getHeaderGroups()[0]?.headers ?? []).map((header) => (

handleMouseDown(e, "", header.column.id)} onMouseMove={(e) => handleMouseMove(e, "", header.column.id)} > {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}

))} {showRowNumbers && (

)}

); }; 5a:T76c,"use client"; import type { ComponentProps } from "react"; import { cn } from "cn"; import { useSpreadsheetStore } from "../lib/spreadsheet-store"; export type StatusBarProps = ComponentProps<"div">; export const StatusBar = ({ className, ...props }: StatusBarProps) => (

); export type StatusBarSectionProps = ComponentProps<"div">; export const StatusBarSection = ({ className, ...props }: StatusBarSectionProps) => (

); export const StatusBarMessage = () => { const editingCell = useSpreadsheetStore((state) => state.editingCell); const selectedCells = useSpreadsheetStore((state) => state.selectedCells); const data = useSpreadsheetStore((state) => state.data); const selectedCellsCount = selectedCells.size; if (editingCell) { const rowIndex = data.findIndex((row) => row.id === editingCell.rowId); const displayRowNumber = rowIndex === -1 ? "?" : rowIndex + 1; return ( Editing row {displayRowNumber}, column {editingCell.columnId} ); } if (selectedCellsCount > 0) { return ( Selected: {selectedCellsCount} cell {selectedCellsCount > 1 ? "s" : ""} ); } return Click a cell to select; }; export const StatusBarSummary = () => { const data = useSpreadsheetStore((state) => state.data); // Rows carry an `id` alongside their cell values; only the latter are columns. const columnCount = Object.keys(data[0] ?? {}).filter((key) => key !== "id").length; return ( {data.length} rows × {columnCount} columns ); }; 5b:Tf6e,"use client"; import type { MouseEvent, ReactNode } from "react"; import { cn } from "cn"; import { flexRender } from "@tanstack/react-table"; import type { SpreadsheetRow } from "../lib/spreadsheet-store"; import type { SpreadsheetFeatures } from "../lib/spreadsheet-utils"; import type { Table } from "@tanstack/react-table"; import type { VirtualItem } from "@tanstack/react-virtual"; interface TableBodyProps { virtualItems: VirtualItem[]; table: Table; selectedCells: Set; getRowCells: (rowId: string) => string[]; handleMouseDown: (e: MouseEvent, rowId: string, columnId: string) => void; handleMouseMove: (e: MouseEvent, rowId: string, columnId: string) => void; showRowNumbers?: boolean; renderRowNumber?: (rowIndex: number) => ReactNode; renderRowActions?: (row: SpreadsheetRow, rowIndex: number) => ReactNode; } export const TableBody = ({ virtualItems, table, selectedCells, getRowCells, handleMouseDown, handleMouseMove, showRowNumbers = true, renderRowNumber, renderRowActions, }: TableBodyProps) => ( <> {virtualItems.map((virtualRow) => { const row = table.getRowModel().rows[virtualRow.index]; const rowIndex = virtualRow.index; const rowId = row?.original?.id; if (!rowId) { return null; } const rowCells = getRowCells(rowId); const isRowSelected = rowCells.every((cell) => selectedCells.has(cell)); return (

{showRowNumbers && (

handleMouseDown(e, rowId, "")} onMouseMove={(e) => handleMouseMove(e, rowId, "")} > {renderRowNumber ? renderRowNumber(rowIndex) : rowIndex + 1}

)} {row.getVisibleCells().map((cell) => { const cellKey = `${rowId}:${cell.column.id}`; const isCellSelected = selectedCells.has(cellKey); return (

handleMouseDown(e, rowId, cell.column.id)} onMouseMove={(e) => handleMouseMove(e, rowId, cell.column.id)} > {flexRender(cell.column.columnDef.cell, cell.getContext())}

); })} {renderRowActions && (

{renderRowActions(row.original, rowIndex)}

)}

); })} ); 5c:T885,"use client"; import type { ComponentProps } from "react"; import { Button as ButtonPrimitive } from "@base-ui/react/button"; import { Menu } from "@base-ui/react/menu"; import { cn } from "cn"; import "../spreadsheet.css"; type Styled = Omit & { className?: string }; export const Button = ({ className, variant = "outline", size = "sm", ...props }: Styled & { variant?: "outline" | "ghost"; size?: "sm" | "icon"; }) => ( ); export const Input = ({ className, ...props }: ComponentProps<"input">) => ( ); export const DropdownMenu = Menu.Root; export const DropdownMenuTrigger = Menu.Trigger; export const DropdownMenuContent = ({ className, align = "start", ...props }: Styled & Pick) => ( ); export const DropdownMenuItem = ({ className, ...props }: Styled) => ( ); 5d:T120e,"use client"; import { createContext, use, useMemo } from "react"; import type { ReactNode } from "react"; import { createStore, useStore } from "zustand"; import "../spreadsheet.css"; /** A cell holds the text typed into it, or `undefined` once cleared by Delete/Backspace. */ export type CellValue = string | undefined; export interface SpreadsheetRow { id: string; [key: string]: CellValue; } export interface SpreadsheetStore { data: SpreadsheetRow[]; selectedCells: Set; setSelectedCells: (update: (prev: Set) => Set) => void; editingCell: { rowId: string; columnId: string } | null; setEditingCell: (cell: { rowId: string; columnId: string } | null) => void; dragStartCell: { rowId: string; columnId: string } | null; setDragStartCell: (cell: { rowId: string; columnId: string } | null) => void; columnWidths: Record; setColumnWidths: (update: (prev: Record) => Record) => void; dragLineVisible: boolean; setDragLineVisible: (visible: boolean) => void; updateData: (rowId: string, columnId: string, value: CellValue) => void; updateSelectedCellsData: (value?: CellValue) => void; addRow: (onCreateRow?: (rowIndex: number) => SpreadsheetRow) => void; deleteRow: (rowId: string) => void; } const createSpreadsheetStore = ( initialData: SpreadsheetRow[], initialColumnWidths: Record, ) => createStore((set, get) => ({ addRow: (onCreateRow) => { set((state) => { const nextRow = onCreateRow?.(state.data.length) ?? { id: crypto.randomUUID() }; return { data: [...state.data, nextRow] }; }); }, columnWidths: initialColumnWidths, data: initialData, deleteRow: (rowId) => { set((state) => ({ data: state.data.filter((row) => row.id !== rowId), dragStartCell: state.dragStartCell?.rowId === rowId ? null : state.dragStartCell, editingCell: state.editingCell?.rowId === rowId ? null : state.editingCell, selectedCells: new Set( [...state.selectedCells].filter((key) => !key.startsWith(`${rowId}:`)), ), })); }, dragLineVisible: false, dragStartCell: null, editingCell: null, selectedCells: new Set(), setColumnWidths: (widths) => { set((state) => ({ columnWidths: widths(state.columnWidths), })); }, setDragLineVisible: (visible) => set({ dragLineVisible: visible }), setDragStartCell: (cell) => set({ dragStartCell: cell }), setEditingCell: (cell) => set({ editingCell: cell }), setSelectedCells: (cells) => { set((state) => ({ selectedCells: cells(state.selectedCells), })); }, updateData: (rowId, columnId, value) => { set((state) => ({ data: state.data.map((row) => { if (row.id === rowId) { return { ...row, [columnId]: value }; } return row; }), })); }, updateSelectedCellsData: (value) => { if (get().selectedCells.size === 0) { return; } set((state) => { const newData = [...state.data]; for (const cellKey of state.selectedCells) { const [rowId, columnId] = cellKey.split(":"); if (!rowId || !columnId) { continue; } const rowIndex = newData.findIndex((row) => row.id === rowId); const currentRow = newData[rowIndex]; if (!currentRow) { continue; } newData[rowIndex] = { ...currentRow, [columnId]: value }; } return { data: newData }; }); }, })); type SpreadsheetStoreApi = ReturnType; const SpreadsheetContext = createContext(null); export const SpreadsheetProvider = ({ initialData, initialColumnWidths, children, }: { initialData: SpreadsheetRow[]; initialColumnWidths: Record; children: ReactNode; }) => { const store = useMemo( () => createSpreadsheetStore(initialData, initialColumnWidths), [initialData, initialColumnWidths], ); return (

{children}

); }; export const useSpreadsheetApi = () => { const store = use(SpreadsheetContext); if (!store) { throw new Error("Spreadsheet components require SpreadsheetProvider"); } return store; }; export const useSpreadsheetStore = (selector: (state: SpreadsheetStore) => T): T => useStore(useSpreadsheetApi(), selector); 5e:T195d,import { columnVisibilityFeature, tableFeatures } from "@tanstack/react-table"; import type { SpreadsheetRow } from "./spreadsheet-store"; /** * Features every spreadsheet table is built on. Features are opt-in in * react-table v9, and the body renders through `row.getVisibleCells()`, which * column visibility provides. Declared here rather than in `spreadsheet.tsx` so * the body and cell components can type against it without an import cycle. */ export const spreadsheetFeatures = tableFeatures({ columnVisibilityFeature }); export type SpreadsheetFeatures = typeof spreadsheetFeatures; /** Columns never resize below this, both while dragging and once committed. */ export const MIN_COLUMN_WIDTH = 60; export interface CellPosition { rowId: string; columnId: string; } export interface ColumnInfo { id: string; } export interface NavigationMap { up: string | null; down: string | null; left: string | null; right: string | null; tab: string | null; } export type NavigationDirection = keyof NavigationMap; export const getRowCells = (rowId: string, columns: ColumnInfo[]): string[] => columns.map((col) => `${rowId}:${col.id}`); export const getColumnCells = (columnId: string, data: SpreadsheetRow[]): string[] => data.map((row) => `${row.id}:${columnId}`); export const getRangeCells = ( startRowId: string, startColId: string, endRowId: string, endColId: string, columns: ColumnInfo[], data: SpreadsheetRow[], ): string[] => { const columnIds = columns.map((col) => col.id); const startColIndex = columnIds.indexOf(startColId); const endColIndex = columnIds.indexOf(endColId); const minColIndex = Math.min(startColIndex, endColIndex); const maxColIndex = Math.max(startColIndex, endColIndex); const startRowIndex = data.findIndex((row) => row.id === startRowId); const endRowIndex = data.findIndex((row) => row.id === endRowId); if (startRowIndex === -1 || endRowIndex === -1 || startColIndex === -1 || endColIndex === -1) { return []; } const minRowIndex = Math.min(startRowIndex, endRowIndex); const maxRowIndex = Math.max(startRowIndex, endRowIndex); const cells: string[] = []; for (let rowIndex = minRowIndex; rowIndex <= maxRowIndex; rowIndex += 1) { const row = data[rowIndex]; if (!row) { continue; } for (let colIndex = minColIndex; colIndex <= maxColIndex; colIndex += 1) { const colId = columnIds[colIndex]; if (!colId) { continue; } cells.push(`${row.id}:${colId}`); } } return cells; }; export const toggleRowSelection = ( rowId: string, selectedCells: Set, columns: ColumnInfo[], ): Set => { const rowCells = getRowCells(rowId, columns); const isRowFullySelected = rowCells.every((cell) => selectedCells.has(cell)); const newSelectedCells = new Set(selectedCells); for (const cell of rowCells) { if (isRowFullySelected) { newSelectedCells.delete(cell); } else { newSelectedCells.add(cell); } } return newSelectedCells; }; export const toggleColumnSelection = ( columnId: string, selectedCells: Set, data: SpreadsheetRow[], ): Set => { const columnCells = getColumnCells(columnId, data); const isColumnFullySelected = columnCells.every((cell) => selectedCells.has(cell)); const newSelectedCells = new Set(selectedCells); for (const cell of columnCells) { if (isColumnFullySelected) { newSelectedCells.delete(cell); } else { newSelectedCells.add(cell); } } return newSelectedCells; }; export const toggleCellSelection = (cellKey: string, selectedCells: Set): Set => { const newSelectedCells = new Set(selectedCells); if (newSelectedCells.has(cellKey)) { newSelectedCells.delete(cellKey); } else { newSelectedCells.add(cellKey); } return newSelectedCells; }; export const getFirstSelectedCell = (selectedCells: Set): CellPosition | null => { const [firstSelectedCell] = [...selectedCells]; if (!firstSelectedCell) { return null; } const [rowId, columnId] = firstSelectedCell.split(":"); if (!rowId || !columnId) { return null; } return { columnId, rowId }; }; export const getColumnSizeVars = (columnWidths: Record) => { const colSizes: { [key: string]: number } = {}; for (const [columnId, width] of Object.entries(columnWidths)) { colSizes[`--col-${columnId}-size`] = width; } return colSizes; }; export const isWithinDataAttribute = (target: EventTarget | null, attribute: string): boolean => target instanceof HTMLElement && !!target.closest(`[data-${attribute}]`); export const shouldAllowEditing = (selectedCells: Set, cellKey: string): boolean => selectedCells.has(cellKey) && selectedCells.size === 1; export const createNavigationMap = ( data: SpreadsheetRow[], columns: ColumnInfo[], ): Map => { const navigationMap = new Map(); const columnIds = columns.map((col) => col.id); for (const [rowIndex, row] of data.entries()) { for (const [colIndex, columnId] of columnIds.entries()) { const cellKey = `${row.id}:${columnId}`; const prevRowId = data[rowIndex - 1]?.id; const nextRowId = data[rowIndex + 1]?.id; const prevColId = columnIds[colIndex - 1]; const nextColId = columnIds[colIndex + 1]; const [firstColId] = columnIds; const navigation: NavigationMap = { down: nextRowId ? `${nextRowId}:${columnId}` : null, left: prevColId ? `${row.id}:${prevColId}` : null, right: nextColId ? `${row.id}:${nextColId}` : null, tab: null, up: prevRowId ? `${prevRowId}:${columnId}` : null, }; if (nextColId) { navigation.tab = `${row.id}:${nextColId}`; } else if (nextRowId && firstColId) { navigation.tab = `${nextRowId}:${firstColId}`; } navigationMap.set(cellKey, navigation); } } return navigationMap; }; export const getNextCellPositionFromMap = ( cellKey: string, direction: NavigationDirection, navigationMap: Map, ): CellPosition | null => { const navigation = navigationMap.get(cellKey); if (!navigation) { return null; } const nextCellKey = navigation[direction]; if (!nextCellKey) { return null; } const [rowId, columnId] = nextCellKey.split(":"); if (!rowId || !columnId) { return null; } return { columnId, rowId }; }; 5f:Tc5a,import { useCallback, useMemo } from "react"; import { useChat } from "@ai-sdk/react"; import { StaticChatTransport } from "@loremllm/transport"; import type { StoreApi } from "zustand"; import type { SpreadsheetStore } from "./spreadsheet-store"; import type { UIMessage } from "@ai-sdk/react"; import { useSpreadsheetApi } from "./spreadsheet-store"; type CustomUIMessage = UIMessage< unknown, { updateCell: { rowId: string; columnId: string; value: string; }; } >; // The random index is always in range; the `?? list[0]` only satisfies // `noUncheckedIndexedAccess`, which the non-empty tuple keeps well-typed. const pick = (list: readonly [T, ...T[]]): T => list[Math.floor(Math.random() * list.length)] ?? list[0]; const fakeData = new Map string>([ [ "firstName", () => pick(["John", "Jane", "Michael", "Sarah", "David", "Emily", "James", "Emma"]), ], [ "lastName", () => pick(["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis"]), ], [ "email", () => { const domain = pick(["example.com", "demo.org", "test.io"]); return `${Math.random().toString(36).slice(2, 15)}@${domain}`; }, ], [ "company", () => pick([ "Acme Corp", "Tech Solutions", "Global Industries", "Digital Ventures", "Innovation Labs", "Future Systems", ]), ], [ "role", () => pick([ "Software Engineer", "Product Manager", "Data Scientist", "Designer", "Marketing Director", "Sales Executive", ]), ], ]); const createTransport = (storeApi: StoreApi) => new StaticChatTransport({ chunkDelayMs: [400, 1400], async *mockResponse() { const store = storeApi.getState(); const { selectedCells } = store; const cells = [...selectedCells]; for (const cellKey of cells) { const [rowId, columnId] = cellKey.split(":"); if (!rowId || !columnId) { continue; } const generateValue = fakeData.get(columnId); if (!generateValue) { continue; } const value = generateValue(); store.updateData(rowId, columnId, "Generating..."); yield { data: { columnId, rowId, value }, type: "data-updateCell", }; } }, }); export const useAiEnrichment = () => { const storeApi = useSpreadsheetApi(); const transport = useMemo(() => createTransport(storeApi), [storeApi]); const { sendMessage, status } = useChat({ onData: (dataPart) => { if (dataPart.type === "data-updateCell") { const { rowId, columnId, value } = dataPart.data; const store = storeApi.getState(); store.updateData(rowId, columnId, value); } }, transport, }); const handleEnrich = useCallback(() => { void sendMessage({ text: "enrich" }); }, [sendMessage]); const aiGenerating = status === "streaming" || status === "submitted"; return { aiGenerating, handleEnrich, }; }; 60:T1b81,import { useCallback } from "react"; import type { KeyboardEvent, MouseEvent } from "react"; import type { ColumnInfo, NavigationDirection, NavigationMap } from "./spreadsheet-utils"; import { useSpreadsheetStore } from "./spreadsheet-store"; import { getColumnCells, getFirstSelectedCell, getNextCellPositionFromMap, getRangeCells, getRowCells, isWithinDataAttribute, shouldAllowEditing, toggleCellSelection, toggleColumnSelection, toggleRowSelection, } from "./spreadsheet-utils"; interface UseSpreadsheetHandlersProps { columns: ColumnInfo[]; navigationMap: Map; } /** Keys that move the single-cell selection, mapped to their direction in the navigation map. */ const NAVIGATION_KEYS = new Map([ ["ArrowUp", "up"], ["ArrowDown", "down"], ["ArrowLeft", "left"], ["ArrowRight", "right"], ["Tab", "tab"], ]); export const useSpreadsheetHandlers = ({ columns, navigationMap }: UseSpreadsheetHandlersProps) => { const data = useSpreadsheetStore((state) => state.data); const selectedCells = useSpreadsheetStore((state) => state.selectedCells); const setSelectedCells = useSpreadsheetStore((state) => state.setSelectedCells); const editingCell = useSpreadsheetStore((state) => state.editingCell); const setEditingCell = useSpreadsheetStore((state) => state.setEditingCell); const dragStartCell = useSpreadsheetStore((state) => state.dragStartCell); const setDragStartCell = useSpreadsheetStore((state) => state.setDragStartCell); const updateSelectedCellsData = useSpreadsheetStore((state) => state.updateSelectedCellsData); /** A multi-cell selection has no single edit target, so editing is cancelled. Returns `selection` for chaining. */ const exitEditIfMultiple = useCallback( (selection: Set) => { if (selection.size > 1 && editingCell) { setEditingCell(null); } return selection; }, [editingCell, setEditingCell], ); const handleMouseDown = useCallback( (e: MouseEvent, rowId: string, columnId: string) => { if (e.button !== 0) { return; } const cellKey = `${rowId}:${columnId}`; if (isWithinDataAttribute(e.target, "row-number")) { if (e.ctrlKey || e.metaKey) { setSelectedCells((currentSelectedCells) => exitEditIfMultiple(toggleRowSelection(rowId, currentSelectedCells, columns)), ); } else { setSelectedCells(() => exitEditIfMultiple(new Set(getRowCells(rowId, columns)))); } return; } if (isWithinDataAttribute(e.target, "column-header")) { if (e.ctrlKey || e.metaKey) { setSelectedCells((currentSelectedCells) => exitEditIfMultiple(toggleColumnSelection(columnId, currentSelectedCells, data)), ); } else { setSelectedCells(() => exitEditIfMultiple(new Set(getColumnCells(columnId, data)))); } return; } if (e.ctrlKey || e.metaKey) { setSelectedCells((currentSelectedCells) => exitEditIfMultiple(toggleCellSelection(cellKey, currentSelectedCells)), ); } else if (e.shiftKey) { setSelectedCells((currentSelectedCells) => { if (currentSelectedCells.size === 0) { return new Set([cellKey]); } const [firstSelectedCell] = [...currentSelectedCells]; if (!firstSelectedCell) { return new Set([cellKey]); } const [firstRowId, firstCol] = firstSelectedCell.split(":"); if (!firstRowId || !firstCol) { return new Set([cellKey]); } const rangeCells = getRangeCells(firstRowId, firstCol, rowId, columnId, columns, data); return exitEditIfMultiple(new Set(rangeCells)); }); } else { const isCurrentlyEditing = editingCell?.rowId === rowId && editingCell?.columnId === columnId; const isCurrentlySelected = selectedCells.has(cellKey) && selectedCells.size === 1; if (isCurrentlyEditing) { setTimeout(() => setEditingCell(null), 0); } else if (isCurrentlySelected) { setTimeout(() => setEditingCell({ columnId, rowId }), 0); } else { setSelectedCells(() => new Set([cellKey])); } } setDragStartCell({ columnId, rowId }); }, [ selectedCells, columns, data, editingCell, exitEditIfMultiple, setSelectedCells, setEditingCell, setDragStartCell, ], ); const handleMouseMove = useCallback( (e: MouseEvent, rowId: string, columnId: string) => { if (!dragStartCell) { return; } const rangeCells = getRangeCells( dragStartCell.rowId, dragStartCell.columnId, rowId, columnId, columns, data, ); setSelectedCells(() => exitEditIfMultiple(new Set(rangeCells))); }, [dragStartCell, columns, data, exitEditIfMultiple, setSelectedCells], ); const handleMouseUp = useCallback(() => { setDragStartCell(null); }, [setDragStartCell]); const handleKeyDown = useCallback( (e: KeyboardEvent) => { const firstSelectedCell = getFirstSelectedCell(selectedCells); if (!firstSelectedCell) { return; } const { rowId, columnId } = firstSelectedCell; const { activeElement } = document; if (activeElement && activeElement.tagName === "INPUT") { return; } const direction = NAVIGATION_KEYS.get(e.key); if (direction) { e.preventDefault(); const nextPosition = getNextCellPositionFromMap( `${rowId}:${columnId}`, direction, navigationMap, ); if (nextPosition) { setSelectedCells(() => new Set([`${nextPosition.rowId}:${nextPosition.columnId}`])); } return; } switch (e.key) { case "Enter": { e.preventDefault(); if (editingCell?.rowId === rowId && editingCell?.columnId === columnId) { setEditingCell(null); } else if (shouldAllowEditing(selectedCells, `${rowId}:${columnId}`)) { setEditingCell({ columnId, rowId }); } break; } case "Escape": { e.preventDefault(); if (editingCell) { setEditingCell(null); } else { setSelectedCells(() => new Set()); } break; } case "Delete": case "Backspace": { e.preventDefault(); if (selectedCells.size > 0) { updateSelectedCellsData(); } break; } default: { break; } } }, [ selectedCells, editingCell, setEditingCell, setSelectedCells, updateSelectedCellsData, navigationMap, ], ); return { handleKeyDown, handleMouseDown, handleMouseMove, handleMouseUp, }; }; 61:Tec2,"use client"; import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./components/ui"; import { MoreVerticalIcon, Plus, Sparkles, TrashIcon } from "lucide-react"; import type { SpreadsheetProps } from "./components/spreadsheet"; import { EditableCell } from "./components/editable-cell"; import { Spreadsheet } from "./components/spreadsheet"; import { StatusBar, StatusBarMessage, StatusBarSection, StatusBarSummary, } from "./components/status-bar"; import { Toolbar, ToolbarButton } from "./components/toolbar"; import type { SpreadsheetRow } from "./lib/spreadsheet-store"; import { SpreadsheetProvider, useSpreadsheetStore } from "./lib/spreadsheet-store"; import { useAiEnrichment } from "./lib/use-ai-enrichment"; interface Person extends SpreadsheetRow { id: string; linkedinUrl: string; firstName: string; lastName: string; email: string; company: string; role: string; } const generateSamplePeople = (count: number): Person[] => Array.from({ length: count }, (_, i) => ({ company: "", email: "", firstName: "", id: `${i + 1}`, lastName: "", linkedinUrl: `https://linkedin.com/in/user-${i + 1}`, role: "", })); const initialData = generateSamplePeople(30); const initialColumnWidths = { company: 150, email: 180, firstName: 120, lastName: 120, linkedinUrl: 250, role: 150, }; const RowActions = ({ row }: { row: SpreadsheetRow }) => { const deleteRow = useSpreadsheetStore((state) => state.deleteRow); return ( } > deleteRow(row.id)} className="text-(--destructive)"> Delete ); }; const ToolbarButtons = () => { const { handleEnrich } = useAiEnrichment(); const addRow = useSpreadsheetStore((state) => state.addRow); return ( <> addRow(() => ({ company: "", email: "", firstName: "", id: crypto.randomUUID(), lastName: "", linkedinUrl: "", role: "", })) } > Add Row Enrich ); }; const columns: SpreadsheetProps["columns"] = [ { accessorKey: "linkedinUrl", cell: EditableCell, header: "LinkedIn URL" }, { accessorKey: "firstName", cell: EditableCell, header: "First Name" }, { accessorKey: "lastName", cell: EditableCell, header: "Last Name" }, { accessorKey: "email", cell: EditableCell, header: "Email" }, { accessorKey: "company", cell: EditableCell, header: "Company" }, { accessorKey: "role", cell: EditableCell, header: "Role" }, ]; const Preview = () => ( } /> ); export default Preview; 54:["$","$L56",null,{"files":[{"path":"/components/editable-cell.tsx","content":"$57","type":"registry:file","target":"uicapsule/spreadsheet/components/editable-cell.tsx"},{"path":"/components/resize-handle.tsx","content":"$58","type":"registry:file","target":"uicapsule/spreadsheet/components/resize-handle.tsx"},{"path":"/components/spreadsheet.tsx","content":"$59","type":"registry:file","target":"uicapsule/spreadsheet/components/spreadsheet.tsx"},{"path":"/components/status-bar.tsx","content":"$5a","type":"registry:file","target":"uicapsule/spreadsheet/components/status-bar.tsx"},{"path":"/components/table-body.tsx","content":"$5b","type":"registry:file","target":"uicapsule/spreadsheet/components/table-body.tsx"},{"path":"/components/toolbar.tsx","content":"\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { Button } from \"./ui\";\nimport { cn } from \"cn\";\n\nexport type ToolbarProps = ComponentProps<\"div\">;\n\nexport const Toolbar = ({ className, ...props }: ToolbarProps) => (\n

\n);\n\nexport type ToolbarButtonProps = ComponentProps;\n\nexport const ToolbarButton = (props: ToolbarButtonProps) => (\n