entangle-ui 0.8.2 → 0.9.0

package/dist/esm/components/data/DataTable/DataTable.js

@@ -0,0 +1,502 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { cx } from '../../../utils/cx.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { Checkbox } from '../../primitives/Checkbox/Checkbox.js';
+import '../../primitives/Checkbox/CheckboxGroup.js';
+import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../Icons/ChevronUpIcon.js';
+import { SortIcon } from '../../Icons/SortIcon.js';
+import { tableMinWidthVar, gridTemplateColumnsVar, scrollContainerStyle, innerWrapperStyle, bodyStyle, emptyStateStyle, virtualBodyStyle, totalHeightVar, rootRecipe, headerCellRecipe, headerStyle, skeletonRowStyle, skeletonCellStyle, skeletonBarStyle, cellRecipe, rowRecipe, headerCellInnerStyle, resizeHandleStyle, sortIndicatorRecipe } from './DataTable.css.js';
+
+const DENSITY_ROW_HEIGHT = {
+    comfortable: 40,
+    compact: 32,
+    dense: 24,
+};
+const VIRTUALIZATION_THRESHOLD_DEFAULT = 100;
+const SELECT_COLUMN_WIDTH = 40;
+function getRowKey(rowKey, row, rowIndex) {
+    if (typeof rowKey === 'function')
+        return rowKey(row, rowIndex);
+    const value = row[rowKey];
+    return typeof value === 'string' ? value : String(value);
+}
+function readCellValue(column, row, rowIndex) {
+    const accessor = column.accessor;
+    if (typeof accessor === 'function')
+        return accessor(row, rowIndex);
+    if (typeof accessor === 'string')
+        return row[accessor];
+    return row[column.id];
+}
+function defaultCompare(a, b) {
+    if (a === b)
+        return 0;
+    if (a === null || a === undefined)
+        return 1;
+    if (b === null || b === undefined)
+        return -1;
+    if (typeof a === 'number' && typeof b === 'number')
+        return a - b;
+    if (a instanceof Date && b instanceof Date)
+        return a.getTime() - b.getTime();
+    if (typeof a === 'boolean' && typeof b === 'boolean')
+        return a === b ? 0 : a ? 1 : -1;
+    const sa = typeof a === 'string' ? a : JSON.stringify(a);
+    const sb = typeof b === 'string' ? b : JSON.stringify(b);
+    return sa.localeCompare(sb);
+}
+function nextSortDirection(current) {
+    if (current === null)
+        return 'asc';
+    if (current === 'asc')
+        return 'desc';
+    return null;
+}
+function resolveDimension(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === 'number' ? `${value}px` : value;
+}
+function getColumnTrack(column, override) {
+    if (override !== undefined) {
+        return { templateValue: `${override}px`, minPx: override };
+    }
+    if (column.width !== undefined) {
+        const resolved = resolveDimension(column.width) ?? '1fr';
+        const minPx = typeof column.width === 'number' ? column.width : 0;
+        return { templateValue: resolved, minPx };
+    }
+    const minWidth = column.minWidth ?? 80;
+    return { templateValue: `minmax(${minWidth}px, 1fr)`, minPx: minWidth };
+}
+/**
+ * Data-driven table with sortable columns, row selection, sticky header,
+ * optional sticky first column, optional column resizing, and optional
+ * row virtualization (auto-enabled above 100 rows).
+ *
+ * Uses a CSS grid layout under `role="grid"` so columns line up across the
+ * sticky header and individual virtualized rows without depending on real
+ * `<table>` semantics.
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   rows={users}
+ *   rowKey="id"
+ *   columns={[
+ *     { id: 'name', header: 'Name', accessor: 'name', sortable: true },
+ *     { id: 'role', header: 'Role', accessor: 'role' },
+ *   ]}
+ *   selectionMode="multiple"
+ *   onSelectionChange={setSelected}
+ * />
+ * ```
+ */
+function DataTableInner(props) {
+    const { rows, columns, rowKey, density = 'comfortable', stickyHeader = true, sort, defaultSort, onSortChange, manualSort = false, selectionMode = false, selection, defaultSelection, onSelectionChange, isRowSelectable, onRowClick, onRowActivate, renderRow, emptyState, loading = false, loadingRowCount = 5, virtualized = 'auto', virtualizationThreshold = VIRTUALIZATION_THRESHOLD_DEFAULT, estimatedRowHeight, overscan = 8, height = 480, maxHeight, resizableColumns = false, onColumnResize, className, style, testId, ref, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rest } = props;
+    const [sortState, setSortState] = useControlledState({
+        value: sort ?? undefined,
+        defaultValue: defaultSort ?? undefined,
+        onChange: onSortChange,
+        fallback: { columnId: null, direction: null },
+    });
+    const [selectionState, setSelectionState] = useControlledState({
+        value: selection,
+        defaultValue: defaultSelection,
+        onChange: onSelectionChange,
+        fallback: [],
+    });
+    const [columnWidths, setColumnWidths] = useState({});
+    const [activeRowIndex, setActiveRowIndex] = useState(null);
+    const showSelectColumn = selectionMode === 'multiple';
+    const selectedSet = useMemo(() => new Set(selectionState), [selectionState]);
+    const sortedRows = useMemo(() => {
+        if (manualSort)
+            return rows;
+        const { columnId, direction } = sortState;
+        if (!columnId || direction === null)
+            return rows;
+        const column = columns.find(c => c.id === columnId);
+        if (!column)
+            return rows;
+        const indexed = rows.map((row, idx) => ({ row, idx }));
+        indexed.sort((a, b) => {
+            const valueA = readCellValue(column, a.row, a.idx);
+            const valueB = readCellValue(column, b.row, b.idx);
+            const cmp = column.sortComparator
+                ? column.sortComparator(valueA, valueB, a.row, b.row)
+                : defaultCompare(valueA, valueB);
+            return direction === 'asc' ? cmp : -cmp;
+        });
+        return indexed.map(item => item.row);
+    }, [rows, sortState, columns, manualSort]);
+    const rowKeys = useMemo(() => sortedRows.map((row, idx) => getRowKey(rowKey, row, idx)), [sortedRows, rowKey]);
+    const selectableIndexes = useMemo(() => {
+        if (!selectionMode)
+            return [];
+        if (!isRowSelectable)
+            return sortedRows.map((_, idx) => idx);
+        const result = [];
+        sortedRows.forEach((row, idx) => {
+            if (isRowSelectable(row, idx))
+                result.push(idx);
+        });
+        return result;
+    }, [sortedRows, isRowSelectable, selectionMode]);
+    const allSelectableSelected = selectableIndexes.length > 0 &&
+        selectableIndexes.every(idx => {
+            const k = rowKeys[idx];
+            return k !== undefined && selectedSet.has(k);
+        });
+    const someSelectableSelected = !allSelectableSelected &&
+        selectableIndexes.some(idx => {
+            const k = rowKeys[idx];
+            return k !== undefined && selectedSet.has(k);
+        });
+    const handleSortClick = useCallback((column) => {
+        if (!column.sortable)
+            return;
+        setSortState(prev => {
+            if (prev.columnId === column.id) {
+                const next = nextSortDirection(prev.direction);
+                return next === null
+                    ? { columnId: null, direction: null }
+                    : { columnId: column.id, direction: next };
+            }
+            return { columnId: column.id, direction: 'asc' };
+        });
+    }, [setSortState]);
+    const selectionAnchorRef = useRef(null);
+    const selectionShiftKeyRef = useRef(false);
+    const toggleRowSelection = useCallback((rowKeyValue, row, rowIdx, rangeMode = false) => {
+        if (!selectionMode)
+            return;
+        if (isRowSelectable && !isRowSelectable(row, rowIdx))
+            return;
+        if (selectionMode === 'single') {
+            selectionAnchorRef.current = rowIdx;
+            setSelectionState(prev => prev[0] === rowKeyValue ? [] : [rowKeyValue]);
+            return;
+        }
+        const anchor = selectionAnchorRef.current;
+        if (rangeMode && anchor !== null && anchor !== rowIdx) {
+            const [start, end] = anchor < rowIdx ? [anchor, rowIdx] : [rowIdx, anchor];
+            const rangeKeys = [];
+            for (let i = start; i <= end; i += 1) {
+                const candidate = sortedRows[i];
+                const candidateKey = rowKeys[i];
+                if (candidate === undefined || candidateKey === undefined)
+                    continue;
+                if (isRowSelectable && !isRowSelectable(candidate, i))
+                    continue;
+                rangeKeys.push(candidateKey);
+            }
+            setSelectionState(prev => {
+                const set = new Set(prev);
+                const shouldDeselect = set.has(rowKeyValue);
+                for (const key of rangeKeys) {
+                    if (shouldDeselect)
+                        set.delete(key);
+                    else
+                        set.add(key);
+                }
+                return Array.from(set);
+            });
+            return;
+        }
+        selectionAnchorRef.current = rowIdx;
+        setSelectionState(prev => {
+            const set = new Set(prev);
+            if (set.has(rowKeyValue))
+                set.delete(rowKeyValue);
+            else
+                set.add(rowKeyValue);
+            return Array.from(set);
+        });
+    }, [selectionMode, isRowSelectable, setSelectionState, sortedRows, rowKeys]);
+    const toggleSelectAll = useCallback(() => {
+        if (selectionMode !== 'multiple')
+            return;
+        if (allSelectableSelected) {
+            setSelectionState([]);
+            return;
+        }
+        const next = selectableIndexes
+            .map(idx => rowKeys[idx])
+            .filter((k) => typeof k === 'string');
+        setSelectionState(next);
+    }, [
+        allSelectableSelected,
+        selectableIndexes,
+        rowKeys,
+        selectionMode,
+        setSelectionState,
+    ]);
+    const scrollContainerRef = useRef(null);
+    const shouldVirtualize = virtualized === true ||
+        (virtualized === 'auto' && sortedRows.length > virtualizationThreshold);
+    const rowHeightPx = estimatedRowHeight ?? DENSITY_ROW_HEIGHT[density];
+    const virtualizer = useVirtualizer({
+        count: shouldVirtualize ? sortedRows.length : 0,
+        getScrollElement: () => scrollContainerRef.current,
+        estimateSize: () => rowHeightPx,
+        overscan,
+    });
+    const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];
+    const totalSize = shouldVirtualize ? virtualizer.getTotalSize() : 0;
+    const tracks = useMemo(() => {
+        const items = [];
+        let minWidth = 0;
+        if (showSelectColumn) {
+            items.push(`${SELECT_COLUMN_WIDTH}px`);
+            minWidth += SELECT_COLUMN_WIDTH;
+        }
+        columns.forEach(column => {
+            const t = getColumnTrack(column, columnWidths[column.id]);
+            items.push(t.templateValue);
+            minWidth += t.minPx;
+        });
+        return { template: items.join(' '), minWidth };
+    }, [columns, columnWidths, showSelectColumn]);
+    const renderSortIndicator = (column) => {
+        if (!column.sortable)
+            return null;
+        const active = sortState.columnId === column.id && sortState.direction !== null;
+        const direction = active ? sortState.direction : null;
+        const Icon = direction === 'asc'
+            ? ChevronUpIcon
+            : direction === 'desc'
+                ? ChevronDownIcon
+                : SortIcon;
+        return (jsx("span", { className: sortIndicatorRecipe({ active: active || undefined }), "aria-hidden": "true", children: jsx(Icon, { size: "sm" }) }));
+    };
+    const beginResize = useCallback((columnId, startX, startWidth, column) => {
+        const minWidth = column.minWidth ?? 40;
+        const maxWidth = column.maxWidth ?? Infinity;
+        const handleMove = (event) => {
+            const delta = event.clientX - startX;
+            const next = Math.max(minWidth, Math.min(maxWidth, startWidth + delta));
+            setColumnWidths(prev => ({ ...prev, [columnId]: next }));
+        };
+        const handleUp = () => {
+            window.removeEventListener('pointermove', handleMove);
+            window.removeEventListener('pointerup', handleUp);
+            setColumnWidths(prev => {
+                const finalWidth = prev[columnId];
+                if (finalWidth !== undefined)
+                    onColumnResize?.(columnId, finalWidth);
+                return prev;
+            });
+        };
+        window.addEventListener('pointermove', handleMove);
+        window.addEventListener('pointerup', handleUp);
+    }, [onColumnResize]);
+    const focusRow = useCallback((index) => {
+        if (sortedRows.length === 0)
+            return;
+        const clamped = Math.max(0, Math.min(sortedRows.length - 1, index));
+        setActiveRowIndex(clamped);
+        if (shouldVirtualize) {
+            virtualizer.scrollToIndex(clamped, { align: 'auto' });
+        }
+    }, [sortedRows.length, shouldVirtualize, virtualizer]);
+    const handleKeyDown = useCallback((event) => {
+        if (sortedRows.length === 0)
+            return;
+        const current = activeRowIndex ?? -1;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                focusRow(current + 1);
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                focusRow(current - 1);
+                return;
+            case 'Home':
+                event.preventDefault();
+                focusRow(0);
+                return;
+            case 'End':
+                event.preventDefault();
+                focusRow(sortedRows.length - 1);
+                return;
+            case 'PageDown':
+                event.preventDefault();
+                focusRow(current + 10);
+                return;
+            case 'PageUp':
+                event.preventDefault();
+                focusRow(current - 10);
+                return;
+            case 'Enter': {
+                if (current < 0)
+                    return;
+                event.preventDefault();
+                const row = sortedRows[current];
+                if (row === undefined)
+                    return;
+                const k = rowKeys[current];
+                if (selectionMode === 'single' && k !== undefined) {
+                    toggleRowSelection(k, row, current);
+                }
+                onRowActivate?.(row, current);
+                return;
+            }
+            case ' ': {
+                if (current < 0)
+                    return;
+                if (selectionMode !== 'multiple')
+                    return;
+                event.preventDefault();
+                const row = sortedRows[current];
+                const k = rowKeys[current];
+                if (row === undefined || k === undefined)
+                    return;
+                toggleRowSelection(k, row, current, event.shiftKey);
+                return;
+            }
+            default:
+                return;
+        }
+    }, [
+        activeRowIndex,
+        focusRow,
+        sortedRows,
+        rowKeys,
+        selectionMode,
+        toggleRowSelection,
+        onRowActivate,
+    ]);
+    useEffect(() => {
+        if (activeRowIndex !== null && activeRowIndex >= sortedRows.length) {
+            setActiveRowIndex(sortedRows.length === 0 ? null : sortedRows.length - 1);
+        }
+    }, [activeRowIndex, sortedRows.length]);
+    const renderHeaderCell = (column) => {
+        const ariaSort = column.sortable
+            ? sortState.columnId === column.id && sortState.direction === 'asc'
+                ? 'ascending'
+                : sortState.columnId === column.id && sortState.direction === 'desc'
+                    ? 'descending'
+                    : 'none'
+            : undefined;
+        return (jsxs("div", { role: "columnheader", "data-column-id": column.id, className: cx(headerCellRecipe({
+                align: column.align ?? 'left',
+                sortable: column.sortable ? true : undefined,
+                sticky: column.sticky ? true : undefined,
+            }), column.className), "aria-sort": ariaSort, "aria-hidden": column.ariaHidden ? true : undefined, tabIndex: column.sortable ? 0 : undefined, onClick: column.sortable
+                ? () => {
+                    handleSortClick(column);
+                }
+                : undefined, onKeyDown: column.sortable
+                ? event => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        handleSortClick(column);
+                    }
+                }
+                : undefined, children: [jsxs("span", { className: headerCellInnerStyle, children: [jsx("span", { children: column.header }), renderSortIndicator(column)] }), resizableColumns && !column.disableResize && (jsx("span", { className: resizeHandleStyle, role: "separator", "aria-orientation": "vertical", "aria-label": `Resize column ${column.id}`, onPointerDown: event => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        const startWidth = columnWidths[column.id] ??
+                            event.currentTarget.parentElement?.getBoundingClientRect()
+                                .width ??
+                            100;
+                        beginResize(column.id, event.clientX, startWidth, column);
+                    } }))] }, column.id));
+    };
+    const renderHeader = () => (jsxs("div", { role: "row", "aria-rowindex": 1, className: headerStyle({ sticky: stickyHeader || undefined }), children: [showSelectColumn && (jsx("div", { role: "columnheader", className: headerCellRecipe({ selectColumn: true, sticky: true }), "aria-label": "Select all rows", children: jsx(Checkbox, { checked: allSelectableSelected, indeterminate: someSelectableSelected, onChange: () => {
+                        toggleSelectAll();
+                    }, "aria-label": "Select all rows", size: "sm" }) })), columns.map(renderHeaderCell)] }));
+    const renderCells = (row, rowIdx) => columns.map(column => {
+        const value = readCellValue(column, row, rowIdx);
+        return (jsx("div", { role: "gridcell", className: cx(cellRecipe({
+                align: column.align ?? 'left',
+                sticky: column.sticky ? true : undefined,
+            }), column.className), "data-column-id": column.id, children: column.cell
+                ? column.cell({ value, row, rowIndex: rowIdx, column })
+                : value === null || value === undefined
+                    ? ''
+                    : typeof value === 'string'
+                        ? value
+                        : typeof value === 'number' || typeof value === 'boolean'
+                            ? String(value)
+                            : JSON.stringify(value) }, column.id));
+    });
+    const renderRowElement = (row, rowIdx, options = {}) => {
+        const k = rowKeys[rowIdx] ?? `__row_${rowIdx}__`;
+        const isSelected = selectedSet.has(k);
+        const interactive = selectionMode === 'single' || onRowClick !== undefined;
+        const cells = (jsxs(Fragment, { children: [showSelectColumn && (jsx("div", { role: "gridcell", className: cellRecipe({ selectColumn: true, sticky: true }), onClickCapture: event => {
+                        selectionShiftKeyRef.current = event.shiftKey;
+                    }, onClick: event => {
+                        event.stopPropagation();
+                    }, children: jsx(Checkbox, { checked: isSelected, disabled: isRowSelectable ? !isRowSelectable(row, rowIdx) : false, onChange: () => {
+                            toggleRowSelection(k, row, rowIdx, selectionShiftKeyRef.current);
+                            selectionShiftKeyRef.current = false;
+                        }, "aria-label": `Select row ${rowIdx + 1}`, size: "sm" }) })), renderCells(row, rowIdx)] }));
+        const handleRowClick = (event) => {
+            onRowClick?.(row, rowIdx, event);
+            if (selectionMode === 'single') {
+                toggleRowSelection(k, row, rowIdx);
+            }
+            setActiveRowIndex(rowIdx);
+        };
+        const handleRowDoubleClick = () => {
+            onRowActivate?.(row, rowIdx);
+        };
+        const rowContent = renderRow
+            ? renderRow({ row, rowIndex: rowIdx, selected: isSelected }, cells)
+            : cells;
+        const rowClassName = rowRecipe({
+            virtualized: options.virtualized ? true : undefined,
+            interactive: interactive ? true : undefined,
+            selected: isSelected ? true : undefined,
+            active: activeRowIndex === rowIdx ? true : undefined,
+        });
+        const rowStyle = options.virtualized && options.transformY !== undefined
+            ? { transform: `translateY(${options.transformY}px)` }
+            : undefined;
+        return (jsx("div", { role: "row", "aria-rowindex": rowIdx + 2, "aria-selected": selectionMode ? isSelected : undefined, "data-row-key": k, "data-row-index": rowIdx, "data-row-interactive": interactive ? 'true' : undefined, className: rowClassName, style: rowStyle, onClick: interactive ? handleRowClick : undefined, onDoubleClick: onRowActivate ? handleRowDoubleClick : undefined, children: rowContent }, k));
+    };
+    const renderSkeletonRows = () => {
+        const rowsToRender = Array.from({ length: loadingRowCount }, (_, i) => i);
+        const cellCount = columns.length + (showSelectColumn ? 1 : 0);
+        return rowsToRender.map(idx => (jsx("div", { className: skeletonRowStyle, "aria-hidden": "true", children: Array.from({ length: cellCount }, (_, ci) => (jsx("div", { className: skeletonCellStyle, children: jsx("span", { className: skeletonBarStyle }) }, ci))) }, `__skeleton_${idx}__`)));
+    };
+    const containerStyle = {
+        height: resolveDimension(height),
+        ...(maxHeight !== undefined
+            ? { maxHeight: resolveDimension(maxHeight) }
+            : {}),
+        ...style,
+    };
+    const isEmpty = !loading && sortedRows.length === 0;
+    const totalColumnsCount = columns.length + (showSelectColumn ? 1 : 0);
+    const gridVars = assignInlineVars({
+        [gridTemplateColumnsVar]: tracks.template,
+        [tableMinWidthVar]: `${tracks.minWidth}px`,
+    });
+    return (jsx("div", { ref: ref, role: "grid", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-rowcount": sortedRows.length + 1, "aria-colcount": totalColumnsCount, "aria-multiselectable": selectionMode === 'multiple' ? true : undefined, "data-testid": testId, "data-density": density, tabIndex: 0, className: cx(rootRecipe({ density }), className), style: { ...containerStyle, ...gridVars }, onKeyDown: handleKeyDown, ...rest, children: jsx("div", { ref: scrollContainerRef, className: scrollContainerStyle, children: jsxs("div", { className: innerWrapperStyle, children: [renderHeader(), loading ? (jsx("div", { className: bodyStyle, children: renderSkeletonRows() })) : isEmpty ? (jsx("div", { className: bodyStyle, children: jsx("div", { className: emptyStateStyle, role: "row", children: jsx("div", { role: "gridcell", "aria-colspan": totalColumnsCount, children: emptyState ?? 'No rows to display' }) }) })) : shouldVirtualize ? (jsx("div", { className: virtualBodyStyle, style: assignInlineVars({
+                            [totalHeightVar]: `${totalSize}px`,
+                        }), children: virtualItems.map(item => {
+                            const row = sortedRows[item.index];
+                            if (row === undefined)
+                                return null;
+                            return renderRowElement(row, item.index, {
+                                virtualized: true,
+                                transformY: item.start,
+                            });
+                        }) })) : (jsx("div", { className: bodyStyle, children: sortedRows.map((row, rowIdx) => renderRowElement(row, rowIdx)) }))] }) }) }));
+}
+DataTableInner.displayName = 'DataTable';
+const DataTable = DataTableInner;
+
+export { DataTable };
+//# sourceMappingURL=DataTable.js.map

package/dist/esm/components/data/DataTable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sources":["../../../../../../src/components/data/DataTable/DataTable.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;AA+CA;AACE;AACA;AACA;;AAGF;AACA;AAEA;;AAKoC;AAClC;AACA;AACF;AAEA;AAKE;;AACoC;;AAElC;AACF;AACF;AAEA;;AACe;AACb;AAAmC;AACnC;;;;AAEA;;;;AAGA;AACA;AACA;AACF;AAEA;;AAGwB;;AACC;AACvB;AACF;AAEA;;AAG2B;AACzB;AACF;AAOA;AAIE;;;AAGA;;AAEE;AACA;;AAEF;;AAEF;AAEA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACH;;AAuCE;;;AAGE;;AAED;AAED;AAEI;AACA;AACA;AACA;AACD;;;AAKH;AACA;AAEA;AACE;AAAgB;AAChB;AACA;AAAqC;AACrC;AACA;AAAa;;;AAGX;AACA;AACA;AACE;AACA;AACF;AACF;AACA;;AAGF;AAKA;AACE;AAAoB;AACpB;AAAsB;;;AAGpB;AAA+B;AACjC;AACA;;AAGF;AAEE;AACE;;AAEF;;AAGA;AACE;;AAEF;AAEF;;;;;;;;AAQU;;;AAGN;AACF;AAIF;AACA;AAEA;AAEI;;;;AAEA;AACE;;;;AAOF;;;;AAKE;AACE;AACA;AACA;;;;AAEA;;;AAGA;;AAEA;AACE;AAAoB;;AACf;;AAEP;AACF;;;AAIF;;AAEE;AACA;AAA0B;;AACrB;AACL;AACF;AACF;AAIF;;;;;;;;;;;AAUA;;;;;;AAMC;AAED;AAEA;;;;;AAQE;AACA;;AAED;AAED;AACA;AAEA;;;;AAII;;;AAGF;AACE;AACA;AACA;AACF;AACA;;AAGF;;AACwB;AACtB;AAEA;AACA;AAEI;;AAEE;;;AAUR;AAEA;AAOI;AACA;AACA;AACE;AACA;AACA;AACF;;AAEE;AACA;;AAEE;;AAC8B;AAC9B;AACF;AACF;AACA;AACA;AACF;AAIF;AAEI;;;;;;;;AAUJ;AAEI;;AACA;AACA;AACE;;AAEE;;AAEF;;AAEE;;AAEF;;;;AAIA;;AAEE;;AAEF;;AAEE;;AAEF;;AAEE;;;;;;AAKA;;;AAEA;;AAEE;;AAEF;;;;;;;;;AAOA;AACA;AACA;;;;;AAIF;;;AAGJ;;;;;;;;AASC;;;AAKC;;;AAIJ;AACE;AAEI;AACE;AACA;AACE;AACA;;AAER;AAOQ;;;AAGD;;;;AAWC;;AAKI;;;;;;;;AAqBF;AAEE;;AAEA;AACF;;AAMZ;AAEA;AAgBY;AACF;AAUV;;;AASY;;AAED;AAMD;AACA;AACE;AACA;AACE;;AAEE;AACA;AAGd;;;;;AAWA;AAOU;AACF;;AAGA;;AAYI;;AAWZ;;AAEE;AACE;;;AAGJ;;AAGE;AACF;;AAGE;;;;;;;AAQD;;;;AAOD;AAiBF;;;AAIE;;AAcF;AAEA;AACE;;;;AAIA;;;AAIF;;AAGE;AACA;AACD;AAED;AAkCc;AACD;;;AAIwB;AACvB;AACE;;AAED;AACH;AAWd;AAEA;AAEO;;"}

package/dist/esm/components/editor/ChatPanel/ChatCodeBlock.js

@@ -3,12 +3,94 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useState, useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { cx } from '../../../utils/cx.js';
+import '../../Icons/AddIcon.js';
+import '../../Icons/AiChatIcon.js';
+import '../../Icons/AiSparklesIcon.js';
+import '../../Icons/ArrowDownIcon.js';
+import '../../Icons/ArrowLeftIcon.js';
+import '../../Icons/ArrowRightIcon.js';
+import '../../Icons/ArrowUpIcon.js';
+import '../../Icons/BookmarkIcon.js';
+import '../../Icons/CalendarIcon.js';
+import '../../Icons/ChevronDownIcon.js';
+import '../../Icons/ChevronUpIcon.js';
+import '../../Icons/ClockIcon.js';
+import '../../Icons/CloseIcon.js';
+import '../../Icons/CloudUploadIcon.js';
+import '../../Icons/CodeIcon.js';
+import { CopyIcon } from '../../Icons/CopyIcon.js';
+import '../../Icons/CutIcon.js';
+import '../../Icons/DownloadIcon.js';
+import '../../Icons/EditIcon.js';
+import '../../Icons/ErrorIcon.js';
+import '../../Icons/ExternalLinkIcon.js';
+import '../../Icons/EyeDropperIcon.js';
+import '../../Icons/EyeIcon.js';
+import '../../Icons/FilterIcon.js';
+import '../../Icons/FirstIcon.js';
+import '../../Icons/FolderIcon.js';
+import '../../Icons/FullscreenIcon.js';
+import '../../Icons/GridIcon.js';
+import '../../Icons/HeartIcon.js';
+import '../../Icons/HelpIcon.js';
+import '../../Icons/HomeIcon.js';
+import '../../Icons/InfoIcon.js';
+import '../../Icons/LastIcon.js';
+import '../../Icons/LinkIcon.js';
+import '../../Icons/ListIcon.js';
+import '../../Icons/LockIcon.js';
+import '../../Icons/MaximizeIcon.js';
+import '../../Icons/MenuIcon.js';
+import '../../Icons/MinimizeIcon.js';
+import '../../Icons/PasteIcon.js';
+import '../../Icons/PlayIcon.js';
+import '../../Icons/RedoIcon.js';
+import '../../Icons/RefreshIcon.js';
+import '../../Icons/RobotIcon.js';
+import '../../Icons/SaveIcon.js';
+import '../../Icons/SearchIcon.js';
+import '../../Icons/SettingsIcon.js';
+import '../../Icons/SortIcon.js';
+import '../../Icons/StarIcon.js';
+import '../../Icons/SuccessIcon.js';
+import '../../Icons/TagIcon.js';
+import '../../Icons/TrashIcon.js';
+import '../../Icons/UndoIcon.js';
+import '../../Icons/UnlinkIcon.js';
+import '../../Icons/UnlockIcon.js';
+import '../../Icons/UploadIcon.js';
+import '../../Icons/UserIcon.js';
+import '../../Icons/WarningIcon.js';
+import '../../Icons/ZoomInIcon.js';
+import '../../Icons/ZoomOutIcon.js';
+import { CheckIcon } from '../../Icons/CheckIcon.js';
+import '../../Icons/CircleIcon.js';
+import '../../Icons/TangentFreeIcon.js';
+import '../../Icons/TangentAlignedIcon.js';
+import '../../Icons/TangentMirroredIcon.js';
+import '../../Icons/TangentAutoIcon.js';
+import '../../Icons/TangentLinearIcon.js';
+import '../../Icons/TangentStepIcon.js';
+import '../../Icons/ArchiveIcon.js';
+import '../../Icons/DotsVerticalIcon.js';
+import '../../Icons/DotsHorizontalIcon.js';
+import '../../Icons/ChevronLeftIcon.js';
+import '../../Icons/ChevronRightIcon.js';
+import '../../Icons/FolderOpenIcon.js';
+import '../../Icons/FolderCogIcon.js';
+import '../../Icons/UsersIcon.js';
+import '../../Icons/BuildingIcon.js';
+import '../../Icons/FileTextIcon.js';
+import '../../Icons/PauseIcon.js';
+import '../../Icons/StopIcon.js';
+import '../../Icons/SendIcon.js';
+import '../../Icons/TerminalIcon.js';
+import '../../Icons/GitBranchIcon.js';
+import '../../Icons/BugIcon.js';
+import '../../Icons/MinusIcon.js';
+import '../../Icons/PinIcon.js';
 import { codeBlockHeaderStyle, codeBlockLanguageStyle, codeBlockActionsStyle, codeBlockCopyButtonStyle, codeBlockLineNumbersColumnStyle, codeBlockPreStyle, codeBlockMaxHeightVar, codeBlockContentWithLineNumbersStyle, codeBlockContentStyle, codeBlockContainerStyle } from './ChatPanel.css.js';
 
-// ─── Icons ───────────────────────────────────────────────────────
-const CopyIcon = () => (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [jsx("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }), jsx("path", { d: "M11 5V3.5A1.5 1.5 0 009.5 2H3.5A1.5 1.5 0 002 3.5V9.5A1.5 1.5 0 003.5 11H5", stroke: "currentColor", strokeWidth: "1.5" })] }));
-const CheckIcon = () => (jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M3 8.5L6.5 12L13 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-// ─── Component ───────────────────────────────────────────────────
 const ChatCodeBlock = /*#__PURE__*/ React.memo(({ code, language, copyable = true, lineNumbers = false, maxHeight = 400, actions, className, style, testId, ref, ...rest }) => {
     const [copied, setCopied] = useState(false);
     const handleCopy = useCallback(() => {
@@ -24,7 +106,7 @@ const ChatCodeBlock = /*#__PURE__*/ React.memo(({ code, language, copyable = tru
     }, [code]);
     const lines = code.split('\n');
     const showHeader = language != null || copyable || actions != null;
-    return (jsxs("div", { ref: ref, className: cx(codeBlockContainerStyle, className), style: style, "data-testid": testId, ...rest, children: [showHeader && (jsxs("div", { className: codeBlockHeaderStyle, children: [language != null && (jsx("span", { className: codeBlockLanguageStyle, children: language })), jsxs("div", { className: codeBlockActionsStyle, children: [actions, copyable && (jsx("button", { type: "button", className: codeBlockCopyButtonStyle, onClick: handleCopy, "aria-label": copied ? 'Copied' : 'Copy code', children: copied ? jsx(CheckIcon, {}) : jsx(CopyIcon, {}) }))] })] })), jsxs("div", { className: cx(codeBlockContentStyle, lineNumbers && codeBlockContentWithLineNumbersStyle), style: assignInlineVars({
+    return (jsxs("div", { ref: ref, className: cx(codeBlockContainerStyle, className), style: style, "data-testid": testId, ...rest, children: [showHeader && (jsxs("div", { className: codeBlockHeaderStyle, children: [language != null && (jsx("span", { className: codeBlockLanguageStyle, children: language })), jsxs("div", { className: codeBlockActionsStyle, children: [actions, copyable && (jsx("button", { type: "button", className: codeBlockCopyButtonStyle, onClick: handleCopy, "aria-label": copied ? 'Copied' : 'Copy code', children: copied ? (jsx(CheckIcon, { size: 12, decorative: true })) : (jsx(CopyIcon, { size: 12, decorative: true })) }))] })] })), jsxs("div", { className: cx(codeBlockContentStyle, lineNumbers && codeBlockContentWithLineNumbersStyle), style: assignInlineVars({
                     [codeBlockMaxHeightVar]: `${maxHeight}px`,
                 }), "data-testid": testId ? `${testId}-content` : undefined, children: [lineNumbers && (jsx("div", { className: codeBlockLineNumbersColumnStyle, "aria-hidden": "true", "data-testid": testId ? `${testId}-line-numbers` : undefined, children: lines.map((_, i) => (jsx("div", { children: i + 1 }, i))) })), jsx("pre", { className: codeBlockPreStyle, children: jsx("code", { children: code }) })] })] }));
 });

package/dist/esm/components/editor/ChatPanel/ChatCodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatCodeBlock.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatCodeBlock.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAmBA;AAEA;AAyBA;AAkBA;AAEO;;AAgBH;AACE;;;;;AAKE;;;AAGA;AACJ;;;;AAwCQ;AACD;AAoBT;AAGF;;"}
+{"version":3,"file":"ChatCodeBlock.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatCodeBlock.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO;;AAgBH;AACE;;;;;AAKE;;;AAGA;AACJ;;;AAKA;AAuCQ;AACD;AAoBT;AAGF;;"}