@chefuicore/core 1.0.0 → 1.0.2

package/dist/index.js

@@ -11378,5 +11378,2405 @@ ChefUiRating = __decorate([
     t('chef-ui-rating')
 ], ChefUiRating);
 
-export { ChefButton, ChefIcon, ChefUILicense, ChefUiAccordion, ChefUiAccordionItem, ChefUiActionButton, ChefUiAlert, ChefUiAppBar, ChefUiAvatar, ChefUiAvatarGroup, ChefUiBadge, ChefUiBreadcrumbItem, ChefUiBreadcrumbs, ChefUiCalendar, ChefUiCard, ChefUiCardHeader, ChefUiCardMedia, ChefUiCheckbox, ChefUiChip, ChefUiCircularProgress, ChefUiDialog, ChefUiDivider, ChefUiDrawer, ChefUiLinearProgress, ChefUiList, ChefUiListItem, ChefUiListSubheader, ChefUiMenu, ChefUiMenuDivider, ChefUiMenuItem, ChefUiPagination, ChefUiRadio, ChefUiRadioGroup, ChefUiRating, ChefUiReaction, ChefUiSelect, ChefUiSkeleton, ChefUiSlider, ChefUiSnackbar, ChefUiStepper, ChefUiSwitch, ChefUiTab, ChefUiTabPanel, ChefUiTabs, ChefUiTextField, ChefUiToolbar, ChefUiTooltip, IconResolver, generateLicenseToken, iconResolver };
+// ─── Column Types ───────────────────────────────────────────────────────────
+// ─── Density Config ─────────────────────────────────────────────────────────
+const DENSITY_ROW_HEIGHT = {
+    compact: 36,
+    standard: 52,
+    comfortable: 64,
+};
+const DENSITY_HEADER_HEIGHT = {
+    compact: 40,
+    standard: 56,
+    comfortable: 64,
+};
+// ─── Filter Operators by Type ───────────────────────────────────────────────
+const FILTER_OPERATORS = {
+    string: [
+        { label: 'contains', value: 'contains' },
+        { label: 'equals', value: 'equals' },
+        { label: 'starts with', value: 'startsWith' },
+        { label: 'ends with', value: 'endsWith' },
+        { label: 'is empty', value: 'isEmpty' },
+        { label: 'is not empty', value: 'isNotEmpty' },
+    ],
+    number: [
+        { label: '=', value: '=' },
+        { label: '!=', value: '!=' },
+        { label: '>', value: '>' },
+        { label: '>=', value: '>=' },
+        { label: '<', value: '<' },
+        { label: '<=', value: '<=' },
+    ],
+    date: [
+        { label: 'is', value: 'is' },
+        { label: 'before', value: 'before' },
+        { label: 'after', value: 'after' },
+        { label: 'on or before', value: 'onOrBefore' },
+        { label: 'on or after', value: 'onOrAfter' },
+    ],
+    boolean: [
+        { label: 'is true', value: 'isTrue' },
+        { label: 'is false', value: 'isFalse' },
+    ],
+    singleSelect: [
+        { label: 'equals', value: 'equals' },
+        { label: 'is not', value: '!=' },
+    ],
+};
+
+/**
+ * Get the value of a cell for sorting, applying valueGetter if defined.
+ */
+function getCellValue$1(row, colDef) {
+    if (colDef.valueGetter) {
+        return colDef.valueGetter(row);
+    }
+    return row[colDef.field];
+}
+/**
+ * Compare two values based on column type.
+ */
+function compareValues(a, b, type) {
+    // Handle nulls/undefined
+    if (a == null && b == null)
+        return 0;
+    if (a == null)
+        return -1;
+    if (b == null)
+        return 1;
+    switch (type) {
+        case 'number':
+            return Number(a) - Number(b);
+        case 'date': {
+            const da = a instanceof Date ? a.getTime() : new Date(a).getTime();
+            const db = b instanceof Date ? b.getTime() : new Date(b).getTime();
+            if (isNaN(da) && isNaN(db))
+                return 0;
+            if (isNaN(da))
+                return -1;
+            if (isNaN(db))
+                return 1;
+            return da - db;
+        }
+        case 'boolean': {
+            const ba = a === true || a === 'true' ? 1 : 0;
+            const bb = b === true || b === 'true' ? 1 : 0;
+            return ba - bb;
+        }
+        case 'string':
+        case 'singleSelect':
+        default:
+            return String(a).localeCompare(String(b), undefined, { sensitivity: 'base' });
+    }
+}
+/**
+ * Sort rows using a multi-column sort model.
+ * Uses stable sort (maintains relative order of equal elements).
+ */
+function sortRows(rows, sortModel, columns) {
+    if (!sortModel || sortModel.length === 0)
+        return rows;
+    const colMap = new Map();
+    for (const col of columns) {
+        colMap.set(col.field, col);
+    }
+    // Create indexed array for stable sort
+    const indexed = rows.map((row, idx) => ({ row, idx }));
+    indexed.sort((a, b) => {
+        for (const sortItem of sortModel) {
+            const colDef = colMap.get(sortItem.field);
+            if (!colDef)
+                continue;
+            const valA = getCellValue$1(a.row, colDef);
+            const valB = getCellValue$1(b.row, colDef);
+            const type = colDef.type || 'string';
+            let cmp = compareValues(valA, valB, type);
+            if (sortItem.sort === 'desc')
+                cmp = -cmp;
+            if (cmp !== 0)
+                return cmp;
+        }
+        // Stable sort: preserve original order
+        return a.idx - b.idx;
+    });
+    return indexed.map(item => item.row);
+}
+/**
+ * Cycle sort direction: null -> 'asc' -> 'desc' -> null
+ */
+function getNextSortDirection(current) {
+    if (current === null || current === undefined)
+        return 'asc';
+    if (current === 'asc')
+        return 'desc';
+    return null;
+}
+/**
+ * Toggle sort for a field in the sort model.
+ * If multiSort is false, replaces the entire sort model.
+ */
+function toggleSort(sortModel, field, multiSort) {
+    const existingIndex = sortModel.findIndex(s => s.field === field);
+    const existingDirection = existingIndex >= 0 ? sortModel[existingIndex].sort : null;
+    const nextDirection = getNextSortDirection(existingDirection === 'asc' ? 'asc' : existingDirection === 'desc' ? 'desc' : null);
+    if (multiSort) {
+        const newModel = [...sortModel];
+        if (existingIndex >= 0) {
+            if (nextDirection === null) {
+                newModel.splice(existingIndex, 1);
+            }
+            else {
+                newModel[existingIndex] = { field, sort: nextDirection };
+            }
+        }
+        else if (nextDirection !== null) {
+            newModel.push({ field, sort: nextDirection });
+        }
+        return newModel;
+    }
+    else {
+        if (nextDirection === null)
+            return [];
+        return [{ field, sort: nextDirection }];
+    }
+}
+
+/**
+ * Get the value of a cell for filtering, applying valueGetter if defined.
+ */
+function getCellValue(row, colDef) {
+    if (colDef.valueGetter) {
+        return colDef.valueGetter(row);
+    }
+    return row[colDef.field];
+}
+/**
+ * Evaluate a single filter item against a row.
+ */
+function evaluateFilter(row, filter, colDef) {
+    if (!colDef)
+        return true;
+    const value = getCellValue(row, colDef);
+    const filterValue = filter.value;
+    const type = colDef.type || 'string';
+    switch (filter.operator) {
+        // ── String operators ──
+        case 'contains':
+            if (value == null)
+                return false;
+            return String(value).toLowerCase().includes(String(filterValue || '').toLowerCase());
+        case 'equals':
+            if (value == null && filterValue == null)
+                return true;
+            if (value == null || filterValue == null)
+                return false;
+            return String(value).toLowerCase() === String(filterValue).toLowerCase();
+        case 'startsWith':
+            if (value == null)
+                return false;
+            return String(value).toLowerCase().startsWith(String(filterValue || '').toLowerCase());
+        case 'endsWith':
+            if (value == null)
+                return false;
+            return String(value).toLowerCase().endsWith(String(filterValue || '').toLowerCase());
+        case 'isEmpty':
+            return value == null || String(value).trim() === '';
+        case 'isNotEmpty':
+            return value != null && String(value).trim() !== '';
+        // ── Number operators ──
+        case '=':
+            return Number(value) === Number(filterValue);
+        case '!=':
+            return Number(value) !== Number(filterValue);
+        case '>':
+            return Number(value) > Number(filterValue);
+        case '>=':
+            return Number(value) >= Number(filterValue);
+        case '<':
+            return Number(value) < Number(filterValue);
+        case '<=':
+            return Number(value) <= Number(filterValue);
+        // ── Date operators ──
+        case 'is': {
+            if (type === 'date') {
+                const d = toDateString(value);
+                const fd = toDateString(filterValue);
+                return d === fd;
+            }
+            return String(value) === String(filterValue);
+        }
+        case 'before': {
+            const d = toDate(value);
+            const fd = toDate(filterValue);
+            if (!d || !fd)
+                return false;
+            return d < fd;
+        }
+        case 'after': {
+            const d = toDate(value);
+            const fd = toDate(filterValue);
+            if (!d || !fd)
+                return false;
+            return d > fd;
+        }
+        case 'onOrBefore': {
+            const d = toDate(value);
+            const fd = toDate(filterValue);
+            if (!d || !fd)
+                return false;
+            return d <= fd;
+        }
+        case 'onOrAfter': {
+            const d = toDate(value);
+            const fd = toDate(filterValue);
+            if (!d || !fd)
+                return false;
+            return d >= fd;
+        }
+        // ── Boolean operators ──
+        case 'isTrue':
+            return value === true || value === 'true' || value === 1;
+        case 'isFalse':
+            return value === false || value === 'false' || value === 0 || value == null;
+        default:
+            return true;
+    }
+}
+function toDate(v) {
+    if (!v)
+        return null;
+    const d = v instanceof Date ? v : new Date(v);
+    return isNaN(d.getTime()) ? null : d;
+}
+function toDateString(v) {
+    const d = toDate(v);
+    if (!d)
+        return '';
+    return d.toISOString().split('T')[0];
+}
+/**
+ * Filter rows using the filter model.
+ */
+function filterRows(rows, filterModel, columns) {
+    const colMap = new Map();
+    for (const col of columns) {
+        colMap.set(col.field, col);
+    }
+    let result = rows;
+    // Apply quick filter
+    if (filterModel.quickFilterValue && filterModel.quickFilterValue.trim()) {
+        const query = filterModel.quickFilterValue.toLowerCase().trim();
+        result = result.filter(row => {
+            return columns.some(col => {
+                const val = getCellValue(row, col);
+                if (val == null)
+                    return false;
+                return String(val).toLowerCase().includes(query);
+            });
+        });
+    }
+    // Apply column filters
+    const activeFilters = filterModel.items.filter(item => {
+        // Skip filters without values (except isEmpty/isNotEmpty/isTrue/isFalse)
+        const noValueOps = ['isEmpty', 'isNotEmpty', 'isTrue', 'isFalse'];
+        if (noValueOps.includes(item.operator))
+            return true;
+        return item.value !== undefined && item.value !== null && item.value !== '';
+    });
+    if (activeFilters.length === 0)
+        return result;
+    const logicOp = filterModel.logicOperator || 'and';
+    return result.filter(row => {
+        if (logicOp === 'and') {
+            return activeFilters.every(filter => evaluateFilter(row, filter, colMap.get(filter.field)));
+        }
+        else {
+            return activeFilters.some(filter => evaluateFilter(row, filter, colMap.get(filter.field)));
+        }
+    });
+}
+/**
+ * Get the default operator for a column type.
+ */
+function getDefaultOperator(type) {
+    switch (type) {
+        case 'number': return '=';
+        case 'date': return 'is';
+        case 'boolean': return 'isTrue';
+        case 'singleSelect': return 'equals';
+        default: return 'contains';
+    }
+}
+
+/**
+ * Get the display value for a cell, applying valueFormatter if defined.
+ */
+function getDisplayValue$1(row, colDef) {
+    let value = colDef.valueGetter ? colDef.valueGetter(row) : row[colDef.field];
+    if (colDef.valueFormatter) {
+        value = colDef.valueFormatter(value, row);
+    }
+    if (value == null)
+        return '';
+    return String(value);
+}
+/**
+ * Escape a CSV cell value (wrap in quotes if contains comma, newline, or quote).
+ */
+function escapeCsvCell(value) {
+    if (value.includes(',') || value.includes('"') || value.includes('\n') || value.includes('\r')) {
+        return '"' + value.replace(/"/g, '""') + '"';
+    }
+    return value;
+}
+/**
+ * Export rows to CSV format string.
+ */
+function exportToCsv(rows, columns, options = {}) {
+    const delimiter = options.delimiter || ',';
+    const includeHeaders = options.includeHeaders !== false;
+    const lines = [];
+    if (includeHeaders) {
+        const headers = columns.map(col => escapeCsvCell(col.headerName || col.field));
+        lines.push(headers.join(delimiter));
+    }
+    for (const row of rows) {
+        const cells = columns.map(col => escapeCsvCell(getDisplayValue$1(row, col)));
+        lines.push(cells.join(delimiter));
+    }
+    let content = lines.join('\n');
+    if (options.utf8WithBom !== false) {
+        content = '\uFEFF' + content;
+    }
+    return content;
+}
+/**
+ * Export rows to Excel-compatible format (tab-separated).
+ */
+function exportToExcel(rows, columns, options = {}) {
+    return exportToCsv(rows, columns, { ...options, delimiter: '\t' });
+}
+/**
+ * Trigger a file download in the browser.
+ */
+function downloadFile(content, fileName, mimeType) {
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+}
+/**
+ * Export and download as CSV.
+ */
+function downloadCsv(rows, columns, options = {}) {
+    const csv = exportToCsv(rows, columns, options);
+    const fileName = (options.fileName || 'data') + '.csv';
+    downloadFile(csv, fileName, 'text/csv;charset=utf-8;');
+}
+/**
+ * Export and download as Excel (tab-separated .xls).
+ */
+function downloadExcel(rows, columns, options = {}) {
+    const tsv = exportToExcel(rows, columns, options);
+    const fileName = (options.fileName || 'data') + '.xls';
+    downloadFile(tsv, fileName, 'application/vnd.ms-excel;charset=utf-8;');
+}
+
+/**
+ * Get the display value for a cell.
+ */
+function getDisplayValue(row, colDef) {
+    let value = colDef.valueGetter ? colDef.valueGetter(row) : row[colDef.field];
+    if (colDef.valueFormatter) {
+        value = colDef.valueFormatter(value, row);
+    }
+    if (value == null)
+        return '';
+    return String(value);
+}
+/**
+ * Convert selected rows to tab-separated text for clipboard.
+ * Compatible with Excel/Google Sheets paste.
+ */
+function rowsToClipboardText(rows, columns, includeHeaders = true) {
+    const lines = [];
+    if (includeHeaders) {
+        lines.push(columns.map(col => col.headerName || col.field).join('\t'));
+    }
+    for (const row of rows) {
+        const cells = columns.map(col => {
+            const val = getDisplayValue(row, col);
+            // Escape tabs and newlines
+            return val.replace(/\t/g, ' ').replace(/\n/g, ' ');
+        });
+        lines.push(cells.join('\t'));
+    }
+    return lines.join('\n');
+}
+/**
+ * Copy text to clipboard using the Clipboard API.
+ */
+async function copyToClipboard(text) {
+    try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            await navigator.clipboard.writeText(text);
+            return true;
+        }
+        // Fallback for older browsers
+        const textarea = document.createElement('textarea');
+        textarea.value = text;
+        textarea.style.position = 'fixed';
+        textarea.style.left = '-9999px';
+        document.body.appendChild(textarea);
+        textarea.select();
+        const success = document.execCommand('copy');
+        document.body.removeChild(textarea);
+        return success;
+    }
+    catch {
+        return false;
+    }
+}
+
+let ChefUiDataGrid = class ChefUiDataGrid extends i {
+    constructor() {
+        // ═══════════════════════════════════════════════════════════════════════════
+        // PROPERTIES
+        // ═══════════════════════════════════════════════════════════════════════════
+        super(...arguments);
+        this.rows = [];
+        this.columns = [];
+        this.pageSize = 10;
+        this.pageSizeOptions = [10, 25, 50, 100];
+        this.checkboxSelection = false;
+        this.sortable = true;
+        this.filterable = true;
+        this.editable = false;
+        this.resizableColumns = true;
+        this.reorderableColumns = false;
+        this.showToolbar = false;
+        this.density = 'standard';
+        this.loading = false;
+        this.autoHeight = false;
+        this.rowHeight = 0;
+        this.headerHeight = 0;
+        this.disableVirtualization = false;
+        this.treeData = false;
+        this.clipboardEnabled = true;
+        this.pinnedColumns = {};
+        this.rowGroupingModel = [];
+        this.aggregationModel = {};
+        this.exportOptions = {};
+        this.noRowsMessage = 'No rows';
+        this.loadingMessage = 'Loading...';
+        // ═══════════════════════════════════════════════════════════════════════════
+        // INTERNAL STATE
+        // ═══════════════════════════════════════════════════════════════════════════
+        this._currentPage = 0;
+        this._sortModel = [];
+        this._filterModel = { items: [], quickFilterValue: '' };
+        this._selectedRows = new Set();
+        this._editingCell = null;
+        this._editValue = '';
+        this._columnWidths = new Map();
+        this._columnOrder = [];
+        this._hiddenColumns = new Set();
+        this._expandedRows = new Set();
+        this._expandedGroups = new Set();
+        this._scrollTop = 0;
+        this._containerHeight = 400;
+        // UI state
+        this._activeFilterColumn = null;
+        this._filterPopoverField = null;
+        this._filterPopoverX = 0;
+        this._filterPopoverY = 0;
+        this._columnMenuField = null;
+        this._columnMenuX = 0;
+        this._columnMenuY = 0;
+        this._densityMenuOpen = false;
+        this._columnsMenuOpen = false;
+        this._exportMenuOpen = false;
+        this._contextMenuField = null;
+        // Resize state
+        this._resizing = false;
+        this._resizeField = '';
+        this._resizeStartX = 0;
+        this._resizeStartWidth = 0;
+        // Reorder state
+        this._reorderField = '';
+        this._reorderTargetField = '';
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // COMPUTED
+    // ═══════════════════════════════════════════════════════════════════════════
+    get _effectiveRowHeight() {
+        return this.rowHeight || DENSITY_ROW_HEIGHT[this.density];
+    }
+    get _effectiveHeaderHeight() {
+        return this.headerHeight || DENSITY_HEADER_HEIGHT[this.density];
+    }
+    get _orderedColumns() {
+        if (this._columnOrder.length === 0)
+            return this.columns;
+        const colMap = new Map(this.columns.map(c => [c.field, c]));
+        const ordered = [];
+        for (const field of this._columnOrder) {
+            const col = colMap.get(field);
+            if (col)
+                ordered.push(col);
+        }
+        // Add any new columns not in order
+        for (const col of this.columns) {
+            if (!this._columnOrder.includes(col.field)) {
+                ordered.push(col);
+            }
+        }
+        return ordered;
+    }
+    get _visibleColumns() {
+        return this._orderedColumns.filter(c => !this._hiddenColumns.has(c.field));
+    }
+    get _processedRows() {
+        let result = [...this.rows];
+        // Apply filters
+        if (this._filterModel.items.length > 0 || this._filterModel.quickFilterValue) {
+            result = filterRows(result, this._filterModel, this.columns);
+        }
+        // Apply sort
+        if (this._sortModel.length > 0) {
+            result = sortRows(result, this._sortModel, this.columns);
+        }
+        return result;
+    }
+    get _groupedRows() {
+        const processed = this._processedRows;
+        // If row grouping is active
+        if (this.rowGroupingModel.length > 0) {
+            return this._buildGroupedRows(processed);
+        }
+        // If tree data (handled by row data containing hierarchy)
+        if (this.treeData) {
+            return this._buildTreeRows(processed);
+        }
+        // Plain rows
+        return processed.map(row => ({
+            id: row.id ?? processed.indexOf(row),
+            data: row,
+            type: 'data',
+            depth: 0,
+        }));
+    }
+    get _flatRows() {
+        const grouped = this._groupedRows;
+        const result = [];
+        const flatten = (rows) => {
+            for (const row of rows) {
+                result.push(row);
+            }
+        };
+        flatten(grouped);
+        return result;
+    }
+    get _paginatedRows() {
+        const all = this._flatRows;
+        const start = this._currentPage * this.pageSize;
+        const end = start + this.pageSize;
+        return all.slice(start, end);
+    }
+    get _totalRowCount() {
+        return this._flatRows.length;
+    }
+    get _totalPages() {
+        return Math.ceil(this._totalRowCount / this.pageSize);
+    }
+    get _visibleRows() {
+        if (this.disableVirtualization || this.autoHeight) {
+            return this._paginatedRows;
+        }
+        const rh = this._effectiveRowHeight;
+        const start = Math.floor(this._scrollTop / rh);
+        const visibleCount = Math.ceil(this._containerHeight / rh);
+        const buffer = 5;
+        const from = Math.max(0, start - buffer);
+        const to = Math.min(this._paginatedRows.length, start + visibleCount + buffer);
+        return this._paginatedRows.slice(from, to).map((row, i) => ({
+            ...row,
+            _virtualIndex: from + i,
+        }));
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // LIFECYCLE
+    // ═══════════════════════════════════════════════════════════════════════════
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this._initColumnOrder();
+        this._initColumnWidths();
+        this._observeContainerResize();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('columns')) {
+            this._initColumnOrder();
+            this._initColumnWidths();
+        }
+        if (changedProperties.has('rows')) {
+            // Reset page if rows change and current page is out of bounds
+            if (this._currentPage >= this._totalPages && this._totalPages > 0) {
+                this._currentPage = this._totalPages - 1;
+            }
+        }
+    }
+    _initColumnOrder() {
+        if (this._columnOrder.length === 0 && this.columns.length > 0) {
+            this._columnOrder = this.columns.map(c => c.field);
+        }
+    }
+    _initColumnWidths() {
+        for (const col of this.columns) {
+            if (!this._columnWidths.has(col.field) && col.width) {
+                this._columnWidths.set(col.field, col.width);
+            }
+        }
+    }
+    _observeContainerResize() {
+        if (typeof ResizeObserver !== 'undefined' && this._bodyEl) {
+            const ro = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    this._containerHeight = entry.contentRect.height;
+                }
+            });
+            ro.observe(this._bodyEl);
+        }
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // GROUPING & TREE DATA
+    // ═══════════════════════════════════════════════════════════════════════════
+    _buildGroupedRows(rows) {
+        if (this.rowGroupingModel.length === 0)
+            return rows.map((r, i) => ({
+                id: r.id ?? i, data: r, type: 'data', depth: 0,
+            }));
+        const result = [];
+        const groupField = this.rowGroupingModel[0];
+        // Group rows by field value
+        const groups = new Map();
+        for (const row of rows) {
+            const val = row[groupField] ?? '(empty)';
+            if (!groups.has(val))
+                groups.set(val, []);
+            groups.get(val).push(row);
+        }
+        for (const [groupValue, groupRows] of groups) {
+            const groupKey = `${groupField}:${groupValue}`;
+            const isExpanded = this._expandedGroups.has(groupKey);
+            // Compute aggregations
+            const aggregations = {};
+            for (const [field, fn] of Object.entries(this.aggregationModel)) {
+                aggregations[field] = this._computeAggregation(groupRows, field, fn);
+            }
+            result.push({
+                id: groupKey,
+                data: {},
+                type: 'group',
+                depth: 0,
+                isExpanded,
+                childCount: groupRows.length,
+                groupField,
+                groupValue,
+                aggregations,
+            });
+            if (isExpanded) {
+                for (const row of groupRows) {
+                    result.push({
+                        id: row.id ?? rows.indexOf(row),
+                        data: row,
+                        type: 'data',
+                        depth: 1,
+                    });
+                }
+            }
+        }
+        return result;
+    }
+    _buildTreeRows(rows) {
+        // Simple tree: rows with _parentId and _depth fields
+        const result = [];
+        const rootRows = rows.filter(r => !r._parentId);
+        const childMap = new Map();
+        for (const row of rows) {
+            if (row._parentId) {
+                if (!childMap.has(row._parentId))
+                    childMap.set(row._parentId, []);
+                childMap.get(row._parentId).push(row);
+            }
+        }
+        const addRow = (row, depth) => {
+            const id = row.id;
+            const children = childMap.get(id) || [];
+            const isExpanded = this._expandedRows.has(id);
+            result.push({
+                id,
+                data: row,
+                type: 'tree',
+                depth,
+                isExpanded,
+                childCount: children.length,
+            });
+            if (isExpanded) {
+                for (const child of children) {
+                    addRow(child, depth + 1);
+                }
+            }
+        };
+        for (const row of rootRows) {
+            addRow(row, 0);
+        }
+        return result;
+    }
+    _computeAggregation(rows, field, fn) {
+        const values = rows.map(r => r[field]).filter(v => v != null && v !== '');
+        if (values.length === 0)
+            return null;
+        switch (fn) {
+            case 'sum': return values.reduce((a, b) => Number(a) + Number(b), 0);
+            case 'avg': {
+                const sum = values.reduce((a, b) => Number(a) + Number(b), 0);
+                return Math.round((sum / values.length) * 100) / 100;
+            }
+            case 'min': return Math.min(...values.map(Number));
+            case 'max': return Math.max(...values.map(Number));
+            case 'count': return values.length;
+            case 'size': return rows.length;
+            default: return null;
+        }
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // EVENT HANDLERS
+    // ═══════════════════════════════════════════════════════════════════════════
+    // ── Sorting ──
+    _handleSort(field, e) {
+        const col = this.columns.find(c => c.field === field);
+        if (!col || col.sortable === false || !this.sortable)
+            return;
+        this._sortModel = toggleSort(this._sortModel, field, e.shiftKey);
+        this.dispatchEvent(new CustomEvent('sort-change', { detail: { sortModel: this._sortModel } }));
+    }
+    // ── Filtering ──
+    _openFilterPopover(field, e) {
+        // Close other menus first
+        this._densityMenuOpen = false;
+        this._columnsMenuOpen = false;
+        this._exportMenuOpen = false;
+        this._contextMenuField = null;
+        if (this._filterPopoverField === field) {
+            this._filterPopoverField = null;
+            return;
+        }
+        // Calculate position relative to grid-container
+        const icon = e.currentTarget;
+        const gridContainer = this.shadowRoot.querySelector('.grid-container');
+        if (icon && gridContainer) {
+            const iconRect = icon.getBoundingClientRect();
+            const gridRect = gridContainer.getBoundingClientRect();
+            this._filterPopoverX = iconRect.left - gridRect.left;
+            this._filterPopoverY = iconRect.bottom - gridRect.top + 4;
+        }
+        this._filterPopoverField = field;
+    }
+    // ── Column Header Menu ──
+    _openColumnMenu(field, e) {
+        e.stopPropagation();
+        // Close other menus
+        this._filterPopoverField = null;
+        this._densityMenuOpen = false;
+        this._columnsMenuOpen = false;
+        this._exportMenuOpen = false;
+        if (this._columnMenuField === field) {
+            this._columnMenuField = null;
+            return;
+        }
+        const btn = e.currentTarget;
+        const gridContainer = this.shadowRoot.querySelector('.grid-container');
+        if (btn && gridContainer) {
+            const btnRect = btn.getBoundingClientRect();
+            const gridRect = gridContainer.getBoundingClientRect();
+            this._columnMenuX = btnRect.left - gridRect.left;
+            this._columnMenuY = btnRect.bottom - gridRect.top + 4;
+        }
+        this._columnMenuField = field;
+    }
+    _closeColumnMenu() {
+        this._columnMenuField = null;
+    }
+    _columnMenuSort(field, dir) {
+        // Set sort to specific direction
+        this._sortModel = [{ field, sort: dir }];
+        this.dispatchEvent(new CustomEvent('sort-change', { detail: { sortModel: this._sortModel } }));
+        this._closeColumnMenu();
+    }
+    _columnMenuUnsort(field) {
+        this._sortModel = this._sortModel.filter(s => s.field !== field);
+        this.dispatchEvent(new CustomEvent('sort-change', { detail: { sortModel: this._sortModel } }));
+        this._closeColumnMenu();
+    }
+    _columnMenuFilter(field) {
+        this._closeColumnMenu();
+        // Open filter popover — we need to calculate position from the header cell
+        const headerCells = this.shadowRoot.querySelectorAll('.header-cell');
+        const gridContainer = this.shadowRoot.querySelector('.grid-container');
+        const col = this._visibleColumns.find(c => c.field === field);
+        if (!col || !gridContainer)
+            return;
+        const colIdx = this._visibleColumns.indexOf(col);
+        const adjustedIdx = this.checkboxSelection ? colIdx + 1 : colIdx;
+        const headerCell = headerCells[adjustedIdx];
+        if (headerCell) {
+            const cellRect = headerCell.getBoundingClientRect();
+            const gridRect = gridContainer.getBoundingClientRect();
+            this._filterPopoverX = cellRect.left - gridRect.left;
+            this._filterPopoverY = cellRect.bottom - gridRect.top + 4;
+        }
+        this._filterPopoverField = field;
+    }
+    _columnMenuHide(field) {
+        const newHidden = new Set(this._hiddenColumns);
+        newHidden.add(field);
+        this._hiddenColumns = newHidden;
+        this.dispatchEvent(new CustomEvent('column-visibility-change', {
+            detail: { hiddenColumns: Array.from(newHidden) },
+        }));
+        this._closeColumnMenu();
+    }
+    _columnMenuManageColumns() {
+        this._closeColumnMenu();
+        this._columnsMenuOpen = true;
+    }
+    _updateFilter(field, operator, value) {
+        const items = this._filterModel.items.filter(i => i.field !== field);
+        items.push({ field, operator, value });
+        this._filterModel = { ...this._filterModel, items };
+        this._currentPage = 0;
+        this.dispatchEvent(new CustomEvent('filter-change', { detail: { filterModel: this._filterModel } }));
+    }
+    _removeFilter(field) {
+        const items = this._filterModel.items.filter(i => i.field !== field);
+        this._filterModel = { ...this._filterModel, items };
+        this._filterPopoverField = null;
+        this.dispatchEvent(new CustomEvent('filter-change', { detail: { filterModel: this._filterModel } }));
+    }
+    _handleQuickFilter(e) {
+        const value = e.target.value;
+        this._filterModel = { ...this._filterModel, quickFilterValue: value };
+        this._currentPage = 0;
+    }
+    // ── Pagination ──
+    _goToPage(page) {
+        if (page < 0 || page >= this._totalPages)
+            return;
+        this._currentPage = page;
+        this.dispatchEvent(new CustomEvent('page-change', { detail: { page } }));
+    }
+    _changePageSize(e) {
+        this.pageSize = Number(e.target.value);
+        this._currentPage = 0;
+    }
+    // ── Selection ──
+    _toggleRowSelection(rowId, e) {
+        const newSelection = new Set(this._selectedRows);
+        if (newSelection.has(rowId)) {
+            newSelection.delete(rowId);
+        }
+        else {
+            newSelection.add(rowId);
+        }
+        this._selectedRows = newSelection;
+        this.dispatchEvent(new CustomEvent('selection-change', {
+            detail: { selectedRows: Array.from(newSelection) },
+        }));
+    }
+    _toggleSelectAll() {
+        const pageRowIds = this._paginatedRows
+            .filter(r => r.type === 'data' || r.type === 'tree')
+            .map(r => r.id);
+        const allSelected = pageRowIds.every(id => this._selectedRows.has(id));
+        if (allSelected) {
+            this._selectedRows = new Set();
+        }
+        else {
+            this._selectedRows = new Set(pageRowIds);
+        }
+        this.dispatchEvent(new CustomEvent('selection-change', {
+            detail: { selectedRows: Array.from(this._selectedRows) },
+        }));
+    }
+    // ── Cell Editing ──
+    _startEditing(rowId, field) {
+        const col = this.columns.find(c => c.field === field);
+        if (!col || !col.editable || !this.editable)
+            return;
+        const row = this.rows.find(r => (r.id ?? this.rows.indexOf(r)) === rowId);
+        if (!row)
+            return;
+        this._editingCell = { rowId, field };
+        this._editValue = col.valueGetter ? col.valueGetter(row) : row[field];
+        this.dispatchEvent(new CustomEvent('cell-edit-start', { detail: { rowId, field } }));
+    }
+    _commitEdit() {
+        if (!this._editingCell)
+            return;
+        const { rowId, field } = this._editingCell;
+        this.dispatchEvent(new CustomEvent('cell-edit-commit', {
+            detail: { rowId, field, value: this._editValue },
+        }));
+        // Update the row in place
+        const rowIndex = this.rows.findIndex(r => (r.id ?? this.rows.indexOf(r)) === rowId);
+        if (rowIndex >= 0) {
+            const col = this.columns.find(c => c.field === field);
+            if (col?.valueSetter) {
+                col.valueSetter(this.rows[rowIndex], this._editValue);
+            }
+            else {
+                this.rows[rowIndex][field] = this._editValue;
+            }
+            this.requestUpdate();
+        }
+        this._editingCell = null;
+        this._editValue = '';
+        this.dispatchEvent(new CustomEvent('cell-edit-stop', { detail: { rowId, field } }));
+    }
+    _cancelEdit() {
+        if (!this._editingCell)
+            return;
+        const { rowId, field } = this._editingCell;
+        this._editingCell = null;
+        this._editValue = '';
+        this.dispatchEvent(new CustomEvent('cell-edit-stop', { detail: { rowId, field } }));
+    }
+    _handleEditKeydown(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this._commitEdit();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            this._cancelEdit();
+        }
+        else if (e.key === 'Tab') {
+            e.preventDefault();
+            this._commitEdit();
+            // Move to next editable cell
+            if (this._editingCell) {
+                const cols = this._visibleColumns.filter(c => c.editable);
+                const idx = cols.findIndex(c => c.field === this._editingCell.field);
+                if (idx >= 0 && idx < cols.length - 1) {
+                    this._startEditing(this._editingCell.rowId, cols[idx + 1].field);
+                }
+            }
+        }
+    }
+    // ── Column Resize ──
+    _startResize(field, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._resizing = true;
+        this._resizeField = field;
+        this._resizeStartX = e.clientX;
+        this._resizeStartWidth = this._getColumnWidth(field);
+        const onMove = (ev) => {
+            const diff = ev.clientX - this._resizeStartX;
+            const col = this.columns.find(c => c.field === this._resizeField);
+            const minW = col?.minWidth ?? 50;
+            const maxW = col?.maxWidth ?? 800;
+            const newWidth = Math.max(minW, Math.min(maxW, this._resizeStartWidth + diff));
+            const newMap = new Map(this._columnWidths);
+            newMap.set(this._resizeField, newWidth);
+            this._columnWidths = newMap;
+        };
+        const onUp = () => {
+            this._resizing = false;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            this.dispatchEvent(new CustomEvent('column-resize', {
+                detail: { field: this._resizeField, width: this._columnWidths.get(this._resizeField) },
+            }));
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }
+    // ── Column Reorder ──
+    _handleDragStart(field, e) {
+        if (!this.reorderableColumns)
+            return;
+        this._reorderField = field;
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', field);
+    }
+    _handleDragOver(field, e) {
+        if (!this.reorderableColumns || !this._reorderField)
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        this._reorderTargetField = field;
+    }
+    _handleDrop(field, e) {
+        e.preventDefault();
+        if (!this._reorderField || this._reorderField === field)
+            return;
+        const newOrder = [...this._columnOrder];
+        const fromIdx = newOrder.indexOf(this._reorderField);
+        const toIdx = newOrder.indexOf(field);
+        if (fromIdx < 0 || toIdx < 0)
+            return;
+        newOrder.splice(fromIdx, 1);
+        newOrder.splice(toIdx, 0, this._reorderField);
+        this._columnOrder = newOrder;
+        this._reorderField = '';
+        this._reorderTargetField = '';
+        this.dispatchEvent(new CustomEvent('column-reorder', { detail: { columnOrder: newOrder } }));
+    }
+    _handleDragEnd() {
+        this._reorderField = '';
+        this._reorderTargetField = '';
+    }
+    // ── Column Pinning ──
+    _pinColumn(field, side) {
+        const left = (this.pinnedColumns.left || []).filter(f => f !== field);
+        const right = (this.pinnedColumns.right || []).filter(f => f !== field);
+        if (side === 'left')
+            left.push(field);
+        if (side === 'right')
+            right.push(field);
+        this.pinnedColumns = { left, right };
+        this._contextMenuField = null;
+    }
+    // ── Column Visibility ──
+    _toggleColumnVisibility(field) {
+        const newHidden = new Set(this._hiddenColumns);
+        if (newHidden.has(field)) {
+            newHidden.delete(field);
+        }
+        else {
+            newHidden.add(field);
+        }
+        this._hiddenColumns = newHidden;
+        this.dispatchEvent(new CustomEvent('column-visibility-change', {
+            detail: { hiddenColumns: Array.from(newHidden) },
+        }));
+    }
+    // ── Expand/Collapse ──
+    _toggleRowExpand(rowId) {
+        const newExpanded = new Set(this._expandedRows);
+        if (newExpanded.has(rowId)) {
+            newExpanded.delete(rowId);
+            this.dispatchEvent(new CustomEvent('row-collapse', { detail: { rowId } }));
+        }
+        else {
+            newExpanded.add(rowId);
+            this.dispatchEvent(new CustomEvent('row-expand', { detail: { rowId } }));
+        }
+        this._expandedRows = newExpanded;
+    }
+    _toggleGroupExpand(groupKey) {
+        const newExpanded = new Set(this._expandedGroups);
+        if (newExpanded.has(groupKey)) {
+            newExpanded.delete(groupKey);
+        }
+        else {
+            newExpanded.add(groupKey);
+        }
+        this._expandedGroups = newExpanded;
+    }
+    // ── Scroll ──
+    _handleScroll(e) {
+        this._scrollTop = e.target.scrollTop;
+    }
+    // ── Keyboard ──
+    _handleGridKeydown(e) {
+        if (this._editingCell)
+            return; // Let edit handlers take over
+        // Copy
+        if ((e.ctrlKey || e.metaKey) && e.key === 'c' && this.clipboardEnabled) {
+            e.preventDefault();
+            this._copySelection();
+        }
+    }
+    async _copySelection() {
+        const selectedData = this.rows.filter(r => {
+            const id = r.id ?? this.rows.indexOf(r);
+            return this._selectedRows.has(id);
+        });
+        if (selectedData.length === 0)
+            return;
+        const text = rowsToClipboardText(selectedData, this._visibleColumns);
+        await copyToClipboard(text);
+    }
+    // ── Export ──
+    _exportCsv() {
+        const data = this._processedRows;
+        downloadCsv(data, this._visibleColumns, this.exportOptions);
+        this._exportMenuOpen = false;
+        this.dispatchEvent(new CustomEvent('export', { detail: { format: 'csv' } }));
+    }
+    _exportExcel() {
+        const data = this._processedRows;
+        downloadExcel(data, this._visibleColumns, this.exportOptions);
+        this._exportMenuOpen = false;
+        this.dispatchEvent(new CustomEvent('export', { detail: { format: 'excel' } }));
+    }
+    // ── Density ──
+    _changeDensity(d) {
+        this.density = d;
+        this._densityMenuOpen = false;
+    }
+    // ── Grid Click ──
+    _handleGridClick(e) {
+        const path = e.composedPath();
+        // Don't close menus if user clicked inside an overlay/popover/dropdown
+        const insideOverlay = path.some(el => el instanceof HTMLElement && (el.classList?.contains('filter-popover') ||
+            el.classList?.contains('column-menu') ||
+            el.classList?.contains('dropdown') ||
+            el.classList?.contains('filter-icon') ||
+            el.classList?.contains('toolbar-btn') ||
+            el.classList?.contains('column-menu-btn')));
+        if (!insideOverlay) {
+            this._closeAllMenus();
+        }
+    }
+    // ── Helpers ──
+    _getColumnWidth(field) {
+        if (this._columnWidths.has(field))
+            return this._columnWidths.get(field);
+        const col = this.columns.find(c => c.field === field);
+        return col?.width ?? 150;
+    }
+    _getCellValue(row, col) {
+        return col.valueGetter ? col.valueGetter(row) : row[col.field];
+    }
+    _getDisplayValue(row, col) {
+        let val = this._getCellValue(row, col);
+        if (col.valueFormatter)
+            val = col.valueFormatter(val, row);
+        if (val == null)
+            return '';
+        if (col.type === 'boolean')
+            return val ? '✓' : '✗';
+        if (col.type === 'date' && val instanceof Date)
+            return val.toLocaleDateString();
+        return String(val);
+    }
+    _closeAllMenus(except) {
+        if (except !== 'filter')
+            this._filterPopoverField = null;
+        if (except !== 'density')
+            this._densityMenuOpen = false;
+        if (except !== 'columns')
+            this._columnsMenuOpen = false;
+        if (except !== 'export')
+            this._exportMenuOpen = false;
+        if (except !== 'context')
+            this._contextMenuField = null;
+        if (except !== 'columnMenu')
+            this._columnMenuField = null;
+    }
+    _getSortDirection(field) {
+        const s = this._sortModel.find(s => s.field === field);
+        return s ? s.sort : null;
+    }
+    _getSortIndex(field) {
+        return this._sortModel.findIndex(s => s.field === field);
+    }
+    _getFilterForField(field) {
+        return this._filterModel.items.find(i => i.field === field);
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // RENDER
+    // ═══════════════════════════════════════════════════════════════════════════
+    render() {
+        this.autoHeight
+            ? 'auto'
+            : `${Math.min(this._paginatedRows.length * this._effectiveRowHeight, this._containerHeight || 400)}px`;
+        return b `
+      <div class="grid-container"
+        tabindex="0"
+        role="grid"
+        aria-rowcount="${this._totalRowCount}"
+        aria-colcount="${this._visibleColumns.length}"
+        @keydown="${this._handleGridKeydown}"
+        @click="${(e) => this._handleGridClick(e)}"
+      >
+        ${this.showToolbar ? this._renderToolbar() : A}
+        ${this._renderHeader()}
+        <div class="grid-body"
+          style="height: ${this.autoHeight ? 'auto' : (this._containerHeight || 400) + 'px'}; max-height: ${this.autoHeight ? 'none' : '600px'}"
+          @scroll="${this._handleScroll}"
+        >
+          ${this.loading ? b `
+            <div class="loading-overlay">
+              <div class="loading-spinner"></div>
+              ${this.loadingMessage}
+            </div>
+          ` : A}
+          ${this._paginatedRows.length === 0 && !this.loading ? b `
+            <div class="no-rows">${this.noRowsMessage}</div>
+          ` : this._renderBody()}
+        </div>
+        ${this._renderFooter()}
+        ${this._filterPopoverField ? this._renderFilterPopoverOverlay() : A}
+        ${this._columnMenuField ? this._renderColumnMenu() : A}
+        ${this._columnsMenuOpen && !this.showToolbar ? this._renderColumnsPanel() : A}
+      </div>
+    `;
+    }
+    // ── Filter Popover Overlay ──
+    _renderFilterPopoverOverlay() {
+        const col = this.columns.find(c => c.field === this._filterPopoverField);
+        if (!col)
+            return A;
+        return this._renderFilterPopover(col);
+    }
+    // ── Column Header Menu ──
+    _renderColumnMenu() {
+        const field = this._columnMenuField;
+        const col = this.columns.find(c => c.field === field);
+        if (!col)
+            return A;
+        const sortDir = this._getSortDirection(field);
+        const isSortable = this.sortable && col.sortable !== false;
+        const isFilterable = this.filterable && col.filterable !== false;
+        const isPinnable = col.pinnable !== false;
+        const isHideable = col.hideable !== false;
+        const isPinnedLeft = (this.pinnedColumns.left || []).includes(field);
+        const isPinnedRight = (this.pinnedColumns.right || []).includes(field);
+        return b `
+      <div class="column-menu"
+        style="left:${this._columnMenuX}px; top:${this._columnMenuY}px"
+        @click="${(e) => e.stopPropagation()}">
+
+        ${isSortable ? b `
+          <button class="column-menu-item" @click="${() => this._columnMenuSort(field, 'asc')}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+            Sort by ASC
+          </button>
+          <button class="column-menu-item" @click="${() => this._columnMenuSort(field, 'desc')}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
+            Sort by DESC
+          </button>
+          ${sortDir ? b `
+            <button class="column-menu-item" @click="${() => this._columnMenuUnsort(field)}">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              Unsort
+            </button>
+          ` : A}
+          <div class="column-menu-divider"></div>
+        ` : A}
+
+        ${isPinnable ? b `
+          <button class="column-menu-item" @click="${() => { this._pinColumn(field, isPinnedLeft ? 'none' : 'left'); this._closeColumnMenu(); }}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 4.5L7.5 12l3 3L18 7.5"/><path d="M2 22l5.5-5.5"/></svg>
+            ${isPinnedLeft ? 'Unpin from left' : 'Pin to left'}
+          </button>
+          <button class="column-menu-item" @click="${() => { this._pinColumn(field, isPinnedRight ? 'none' : 'right'); this._closeColumnMenu(); }}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 4.5L16.5 12l-3 3L6 7.5"/><path d="M22 22l-5.5-5.5"/></svg>
+            ${isPinnedRight ? 'Unpin from right' : 'Pin to right'}
+          </button>
+          <div class="column-menu-divider"></div>
+        ` : A}
+
+        ${isFilterable ? b `
+          <button class="column-menu-item" @click="${() => this._columnMenuFilter(field)}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
+            Filter
+          </button>
+          <div class="column-menu-divider"></div>
+        ` : A}
+
+        ${isHideable ? b `
+          <button class="column-menu-item" @click="${() => this._columnMenuHide(field)}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
+            Hide column
+          </button>
+        ` : A}
+
+        <button class="column-menu-item" @click="${() => this._columnMenuManageColumns()}">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+          Manage columns
+        </button>
+      </div>
+    `;
+    }
+    // ── Toolbar ──
+    _renderToolbar() {
+        return b `
+      <div class="toolbar" @click="${(e) => e.stopPropagation()}">
+        <div class="toolbar-search">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          </svg>
+          <input type="text" placeholder="Search..."
+            .value="${this._filterModel.quickFilterValue || ''}"
+            @input="${this._handleQuickFilter}" />
+        </div>
+        <div class="toolbar-spacer"></div>
+
+        <!-- Density -->
+        <div style="position:relative">
+          <button class="toolbar-btn" @click="${(e) => { e.stopPropagation(); this._closeAllMenus('density'); this._densityMenuOpen = !this._densityMenuOpen; }}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line>
+            </svg>
+            Density
+          </button>
+          ${this._densityMenuOpen ? b `
+            <div class="dropdown" @click="${(e) => e.stopPropagation()}">
+              <div class="dropdown-item ${this.density === 'compact' ? 'active' : ''}" @click="${() => this._changeDensity('compact')}">Compact</div>
+              <div class="dropdown-item ${this.density === 'standard' ? 'active' : ''}" @click="${() => this._changeDensity('standard')}">Standard</div>
+              <div class="dropdown-item ${this.density === 'comfortable' ? 'active' : ''}" @click="${() => this._changeDensity('comfortable')}">Comfortable</div>
+            </div>
+          ` : A}
+        </div>
+
+        <!-- Columns -->
+        <div style="position:relative">
+          <button class="toolbar-btn" @click="${(e) => { e.stopPropagation(); this._closeAllMenus('columns'); this._columnsMenuOpen = !this._columnsMenuOpen; }}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect>
+              <rect x="3" y="14" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect>
+            </svg>
+            Columns
+          </button>
+          ${this._columnsMenuOpen ? b `
+            <div class="dropdown" style="max-height:300px;overflow-y:auto" @click="${(e) => e.stopPropagation()}">
+              ${this.columns.filter(c => c.hideable !== false).map(col => b `
+                <label class="dropdown-item">
+                  <input type="checkbox"
+                    ?checked="${!this._hiddenColumns.has(col.field)}"
+                    @change="${() => this._toggleColumnVisibility(col.field)}" />
+                  ${col.headerName || col.field}
+                </label>
+              `)}
+            </div>
+          ` : A}
+        </div>
+
+        <!-- Export -->
+        <div style="position:relative">
+          <button class="toolbar-btn" @click="${(e) => { e.stopPropagation(); this._closeAllMenus('export'); this._exportMenuOpen = !this._exportMenuOpen; }}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path>
+              <polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line>
+            </svg>
+            Export
+          </button>
+          ${this._exportMenuOpen ? b `
+            <div class="dropdown" @click="${(e) => e.stopPropagation()}">
+              <div class="dropdown-item" @click="${this._exportCsv}">Download as CSV</div>
+              <div class="dropdown-item" @click="${this._exportExcel}">Download as Excel</div>
+            </div>
+          ` : A}
+        </div>
+      </div>
+    `;
+    }
+    // ── Header ──
+    _renderHeader() {
+        return b `
+      <div class="grid-header" style="height:${this._effectiveHeaderHeight}px" role="row">
+        ${this.checkboxSelection ? b `
+          <div class="checkbox-cell" style="height:${this._effectiveHeaderHeight}px">
+            <input type="checkbox"
+              @change="${this._toggleSelectAll}"
+              .checked="${this._paginatedRows.filter(r => r.type !== 'group').every(r => this._selectedRows.has(r.id))
+            && this._paginatedRows.filter(r => r.type !== 'group').length > 0}"
+              .indeterminate="${this._selectedRows.size > 0
+            && !this._paginatedRows.filter(r => r.type !== 'group').every(r => this._selectedRows.has(r.id))}"
+            />
+          </div>
+        ` : A}
+        ${this._visibleColumns.map(col => this._renderHeaderCell(col))}
+      </div>
+    `;
+    }
+    _renderHeaderCell(col) {
+        const width = this._getColumnWidth(col.field);
+        const sortDir = this._getSortDirection(col.field);
+        const sortIdx = this._getSortIndex(col.field);
+        const isSortable = this.sortable && col.sortable !== false;
+        const hasFilter = this._getFilterForField(col.field) !== undefined;
+        const isReorderable = this.reorderableColumns;
+        const isResizable = this.resizableColumns && col.resizable !== false;
+        const isMenuOpen = this._columnMenuField === col.field;
+        return b `
+      <div class="header-cell ${isSortable ? 'sortable' : ''}"
+        style="width:${width}px; height:${this._effectiveHeaderHeight}px; text-align:${col.headerAlign || col.align || 'left'}"
+        role="columnheader"
+        aria-sort="${sortDir === 'asc' ? 'ascending' : sortDir === 'desc' ? 'descending' : 'none'}"
+        @click="${(e) => isSortable && this._handleSort(col.field, e)}"
+        draggable="${isReorderable ? 'true' : 'false'}"
+        @dragstart="${(e) => this._handleDragStart(col.field, e)}"
+        @dragover="${(e) => this._handleDragOver(col.field, e)}"
+        @drop="${(e) => this._handleDrop(col.field, e)}"
+        @dragend="${this._handleDragEnd}"
+      >
+        <span class="header-text">${col.headerName || col.field}</span>
+        ${sortDir ? b `
+          <span class="sort-icon">${sortDir === 'asc' ? '↑' : '↓'}</span>
+          ${this._sortModel.length > 1 ? b `<span class="sort-index">${sortIdx + 1}</span>` : A}
+        ` : A}
+        ${hasFilter ? b `<span class="sort-icon" style="color:var(--dg-primary);font-size:10px">⧫</span>` : A}
+
+        <button class="column-menu-btn ${isMenuOpen ? 'active' : ''}"
+          @click="${(e) => this._openColumnMenu(col.field, e)}">⋮</button>
+
+        ${isResizable ? b `
+          <div class="resize-handle" @mousedown="${(e) => this._startResize(col.field, e)}"></div>
+        ` : A}
+      </div>
+    `;
+    }
+    // ── Standalone Columns Panel ──
+    _renderColumnsPanel() {
+        return b `
+      <div class="column-menu"
+        style="right:8px; top:${this._effectiveHeaderHeight + 8}px; left:auto; max-height:300px; overflow-y:auto"
+        @click="${(e) => e.stopPropagation()}">
+        ${this.columns.filter(c => c.hideable !== false).map(col => b `
+          <label class="column-menu-item" style="cursor:pointer">
+            <input type="checkbox" style="cursor:pointer"
+              ?checked="${!this._hiddenColumns.has(col.field)}"
+              @change="${() => this._toggleColumnVisibility(col.field)}" />
+            ${col.headerName || col.field}
+          </label>
+        `)}
+      </div>
+    `;
+    }
+    // ── Filter Popover ──
+    _renderFilterPopover(col) {
+        const type = col.type || 'string';
+        const operators = FILTER_OPERATORS[type] || FILTER_OPERATORS.string;
+        const existing = this._getFilterForField(col.field);
+        const currentOp = existing?.operator || getDefaultOperator(type);
+        const currentVal = existing?.value ?? '';
+        return b `
+      <div class="filter-popover"
+        style="left:${this._filterPopoverX}px; top:${this._filterPopoverY}px"
+        @click="${(e) => e.stopPropagation()}">
+        <div class="filter-popover-title">Filter: ${col.headerName || col.field}</div>
+        <select
+          .value="${currentOp}"
+          @change="${(e) => {
+            const op = e.target.value;
+            const valInput = this.shadowRoot.querySelector(`#filter-val-${col.field}`);
+            this._updateFilter(col.field, op, valInput?.value ?? currentVal);
+        }}"
+        >
+          ${operators.map(op => b `
+            <option value="${op.value}" ?selected="${op.value === currentOp}">${op.label}</option>
+          `)}
+        </select>
+
+        ${!['isEmpty', 'isNotEmpty', 'isTrue', 'isFalse'].includes(currentOp) ? b `
+          ${type === 'boolean' ? A :
+            type === 'singleSelect' && col.valueOptions ? b `
+              <select id="filter-val-${col.field}" .value="${currentVal}"
+                @change="${(e) => this._updateFilter(col.field, currentOp, e.target.value)}">
+                <option value="">-- Select --</option>
+                ${col.valueOptions.map(opt => {
+                const val = typeof opt === 'string' ? opt : opt.value;
+                const label = typeof opt === 'string' ? opt : opt.label;
+                return b `<option value="${val}" ?selected="${val === currentVal}">${label}</option>`;
+            })}
+              </select>
+            ` : b `
+              <input id="filter-val-${col.field}"
+                type="${type === 'number' ? 'number' : type === 'date' ? 'date' : 'text'}"
+                .value="${currentVal}"
+                placeholder="Value..."
+                @keydown="${(e) => {
+                if (e.key === 'Enter') {
+                    this._updateFilter(col.field, currentOp, e.target.value);
+                }
+            }}" />
+            `}
+        ` : A}
+
+        <div class="filter-popover-actions">
+          <button class="filter-clear-btn" @click="${() => this._removeFilter(col.field)}">Clear</button>
+          <button class="filter-apply-btn" @click="${() => {
+            const valInput = this.shadowRoot.querySelector(`#filter-val-${col.field}`);
+            this._updateFilter(col.field, currentOp, valInput?.value ?? '');
+            this._filterPopoverField = null;
+        }}">Apply</button>
+        </div>
+      </div>
+    `;
+    }
+    // ── Body ──
+    _renderBody() {
+        const rows = this.disableVirtualization || this.autoHeight
+            ? this._paginatedRows
+            : this._visibleRows;
+        const rh = this._effectiveRowHeight;
+        const totalHeight = this._paginatedRows.length * rh;
+        if (this.disableVirtualization || this.autoHeight) {
+            return b `
+        <div class="grid-body-inner">
+          ${rows.map(row => this._renderRow(row))}
+        </div>
+      `;
+        }
+        // Virtual scrolling
+        return b `
+      <div class="grid-body-inner" style="height:${totalHeight}px">
+        ${rows.map(row => {
+            const vIdx = row._virtualIndex ?? 0;
+            return b `
+            <div style="position:absolute; top:${vIdx * rh}px; width:100%">
+              ${this._renderRow(row)}
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+    _renderRow(row) {
+        if (row.type === 'group') {
+            return this._renderGroupRow(row);
+        }
+        const isSelected = this._selectedRows.has(row.id);
+        const rh = this._effectiveRowHeight;
+        return b `
+      <div class="grid-row ${isSelected ? 'selected' : ''}"
+        style="height:${rh}px"
+        role="row"
+        aria-selected="${isSelected}"
+        @click="${(e) => {
+            this.dispatchEvent(new CustomEvent('row-click', { detail: { row: row.data, rowId: row.id } }));
+        }}"
+      >
+        ${this.checkboxSelection ? b `
+          <div class="checkbox-cell" style="height:${rh}px">
+            <input type="checkbox"
+              .checked="${isSelected}"
+              @change="${() => this._toggleRowSelection(row.id)}"
+              @click="${(e) => e.stopPropagation()}" />
+          </div>
+        ` : A}
+
+        ${this._visibleColumns.map((col, colIdx) => this._renderCell(row, col, colIdx))}
+      </div>
+    `;
+    }
+    _renderGroupRow(row) {
+        const groupKey = `${row.groupField}:${row.groupValue}`;
+        const rh = this._effectiveRowHeight;
+        this._visibleColumns.length + (this.checkboxSelection ? 1 : 0);
+        return b `
+      <div class="grid-row group-row" style="height:${rh}px"
+        @click="${() => this._toggleGroupExpand(groupKey)}">
+        <div class="grid-cell" style="width:100%; height:${rh}px">
+          <span class="expand-toggle">${row.isExpanded ? '▾' : '▸'}</span>
+          <span style="font-weight:600">${row.groupField}: ${row.groupValue}</span>
+          <span style="margin-left:8px;color:var(--dg-text-secondary)">(${row.childCount})</span>
+          ${row.aggregations ? Object.entries(row.aggregations).map(([field, val]) => b `
+            <span style="margin-left:16px;font-weight:400;color:var(--dg-text-secondary)">
+              ${field}: ${val}
+            </span>
+          `) : A}
+        </div>
+      </div>
+    `;
+    }
+    _renderCell(row, col, colIdx) {
+        const width = this._getColumnWidth(col.field);
+        const rh = this._effectiveRowHeight;
+        const isEditing = this._editingCell?.rowId === row.id && this._editingCell?.field === col.field;
+        const value = this._getCellValue(row.data, col);
+        // Tree indent
+        const indent = (row.type === 'tree' || row.type === 'data') && row.depth ? row.depth * 24 : 0;
+        const showExpand = row.type === 'tree' && (row.childCount ?? 0) > 0 && colIdx === 0;
+        return b `
+      <div class="grid-cell"
+        style="width:${width}px; height:${rh}px"
+        role="gridcell"
+        @dblclick="${() => this._startEditing(row.id, col.field)}"
+        @click="${(e) => {
+            this.dispatchEvent(new CustomEvent('cell-click', { detail: { row: row.data, field: col.field, value } }));
+        }}"
+      >
+        ${colIdx === 0 && indent > 0 ? b `<span class="tree-indent" style="width:${indent}px"></span>` : A}
+        ${showExpand ? b `
+          <span class="expand-toggle" @click="${(e) => { e.stopPropagation(); this._toggleRowExpand(row.id); }}">
+            ${row.isExpanded ? '▾' : '▸'}
+          </span>
+        ` : A}
+
+        ${isEditing ? this._renderEditCell(row, col, value) :
+            col.renderCell ? col.renderCell({ value, row: row.data, field: col.field, colDef: col, rowIndex: 0, isEditing: false }) :
+                b `<span class="cell-content ${col.align || ''}">${this._getDisplayValue(row.data, col)}</span>`}
+      </div>
+    `;
+    }
+    _renderEditCell(row, col, value) {
+        const type = col.type || 'string';
+        if (col.renderEditCell) {
+            return col.renderEditCell({ value, row: row.data, field: col.field, colDef: col });
+        }
+        if (type === 'boolean') {
+            return b `
+        <input type="checkbox"
+          .checked="${!!this._editValue}"
+          @change="${(e) => { this._editValue = e.target.checked; this._commitEdit(); }}"
+          @keydown="${this._handleEditKeydown}" />
+      `;
+        }
+        if (type === 'singleSelect' && col.valueOptions) {
+            return b `
+        <select class="cell-edit-select"
+          .value="${this._editValue ?? ''}"
+          @change="${(e) => { this._editValue = e.target.value; this._commitEdit(); }}"
+          @keydown="${this._handleEditKeydown}">
+          ${col.valueOptions.map(opt => {
+                const val = typeof opt === 'string' ? opt : opt.value;
+                const label = typeof opt === 'string' ? opt : opt.label;
+                return b `<option value="${val}" ?selected="${val === this._editValue}">${label}</option>`;
+            })}
+        </select>
+      `;
+        }
+        return b `
+      <input class="cell-edit-input"
+        type="${type === 'number' ? 'number' : type === 'date' ? 'date' : 'text'}"
+        .value="${this._editValue ?? ''}"
+        @input="${(e) => { this._editValue = e.target.value; }}"
+        @keydown="${this._handleEditKeydown}"
+        @blur="${this._commitEdit}" />
+    `;
+    }
+    // ── Footer ──
+    _renderFooter() {
+        const start = this._currentPage * this.pageSize + 1;
+        const end = Math.min(start + this.pageSize - 1, this._totalRowCount);
+        return b `
+      <div class="grid-footer">
+        <div class="footer-info">
+          ${this._selectedRows.size > 0 ? b `
+            <span>${this._selectedRows.size} row(s) selected</span>
+          ` : A}
+          <span>Rows per page:</span>
+          <select class="page-size-select" @change="${this._changePageSize}">
+            ${this.pageSizeOptions.map(s => b `
+              <option value="${s}" ?selected="${s === this.pageSize}">${s}</option>
+            `)}
+          </select>
+          <span>${this._totalRowCount > 0 ? `${start}–${end} of ${this._totalRowCount}` : '0 rows'}</span>
+        </div>
+        <div class="footer-pagination">
+          <button class="page-btn" ?disabled="${this._currentPage === 0}" @click="${() => this._goToPage(0)}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="11 17 6 12 11 7"></polyline><polyline points="18 17 13 12 18 7"></polyline></svg>
+          </button>
+          <button class="page-btn" ?disabled="${this._currentPage === 0}" @click="${() => this._goToPage(this._currentPage - 1)}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"></polyline></svg>
+          </button>
+          ${this._renderPageButtons()}
+          <button class="page-btn" ?disabled="${this._currentPage >= this._totalPages - 1}" @click="${() => this._goToPage(this._currentPage + 1)}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
+          </button>
+          <button class="page-btn" ?disabled="${this._currentPage >= this._totalPages - 1}" @click="${() => this._goToPage(this._totalPages - 1)}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg>
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    _renderPageButtons() {
+        const total = this._totalPages;
+        if (total <= 7) {
+            return Array.from({ length: total }, (_, i) => b `
+        <button class="page-btn ${i === this._currentPage ? 'active' : ''}" @click="${() => this._goToPage(i)}">${i + 1}</button>
+      `);
+        }
+        const pages = [];
+        const current = this._currentPage;
+        pages.push(0);
+        if (current > 2)
+            pages.push('...');
+        for (let i = Math.max(1, current - 1); i <= Math.min(total - 2, current + 1); i++) {
+            pages.push(i);
+        }
+        if (current < total - 3)
+            pages.push('...');
+        pages.push(total - 1);
+        return pages.map(p => typeof p === 'string'
+            ? b `<span style="padding:0 4px">…</span>`
+            : b `<button class="page-btn ${p === current ? 'active' : ''}" @click="${() => this._goToPage(p)}">${p + 1}</button>`);
+    }
+};
+// ═══════════════════════════════════════════════════════════════════════════
+// STYLES
+// ═══════════════════════════════════════════════════════════════════════════
+ChefUiDataGrid.styles = i$3 `
+    :host {
+      display: block;
+      --dg-border: #e0e0e0;
+      --dg-header-bg: #fafafa;
+      --dg-row-hover: #f5f5f5;
+      --dg-row-selected: #e3f2fd;
+      --dg-primary: #1976d2;
+      --dg-text: #000000;
+      --dg-text-secondary: #555;
+      --dg-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: var(--dg-font);
+      color: var(--dg-text);
+    }
+
+    *, *::before, *::after { box-sizing: border-box; }
+
+    .grid-container {
+      border: 1px solid var(--dg-border);
+      border-radius: 4px;
+      overflow: visible;
+      position: relative;
+      background: #fff;
+    }
+
+    /* ── Toolbar ── */
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      border-bottom: 1px solid var(--dg-border);
+      background: var(--dg-header-bg);
+      flex-wrap: wrap;
+    }
+
+    .toolbar-search {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      background: #fff;
+      border: 1px solid var(--dg-border);
+      border-radius: 4px;
+      padding: 4px 10px;
+      flex: 1;
+      max-width: 300px;
+    }
+
+    .toolbar-search svg { width: 16px; height: 16px; color: #999; flex-shrink: 0; }
+
+    .toolbar-search input {
+      border: none;
+      outline: none;
+      font-size: 13px;
+      flex: 1;
+      min-width: 0;
+      background: transparent;
+      font-family: var(--dg-font);
+    }
+
+    .toolbar-btn {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px 12px;
+      border: 1px solid var(--dg-border);
+      border-radius: 4px;
+      background: #fff;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--dg-text);
+      transition: background 0.15s;
+      position: relative;
+      font-family: var(--dg-font);
+    }
+
+    .toolbar-btn:hover { background: #f0f0f0; }
+    .toolbar-btn svg { width: 16px; height: 16px; }
+
+    .toolbar-spacer { flex: 1; }
+
+    /* ── Dropdown menus ── */
+    .dropdown {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      margin-top: 4px;
+      background: #fff;
+      border: 1px solid var(--dg-border);
+      border-radius: 6px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+      z-index: 100;
+      min-width: 160px;
+      padding: 4px 0;
+    }
+
+    .dropdown-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      cursor: pointer;
+      font-size: 13px;
+      transition: background 0.15s;
+      white-space: nowrap;
+    }
+
+    .dropdown-item:hover { background: #f5f5f5; }
+    .dropdown-item.active { color: var(--dg-primary); font-weight: 500; }
+
+    .dropdown-item input[type="checkbox"] {
+      margin: 0;
+      cursor: pointer;
+    }
+
+    /* ── Header ── */
+    .grid-header {
+      display: flex;
+      background: var(--dg-header-bg);
+      border-bottom: 2px solid var(--dg-border);
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      overflow: visible;
+    }
+
+    .header-cell {
+      display: flex;
+      align-items: center;
+      padding: 0 12px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--dg-text);
+      border-right: 1px solid var(--dg-border);
+      position: relative;
+      user-select: none;
+      overflow: visible;
+      flex-shrink: 0;
+    }
+
+    .header-cell:last-child { border-right: none; }
+
+    .header-cell.sortable { cursor: pointer; }
+    .header-cell.sortable:hover { background: #f0f0f0; }
+
+    .header-text {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .sort-icon { margin-left: 4px; font-size: 11px; color: var(--dg-primary); }
+    .sort-index { font-size: 9px; color: var(--dg-primary); margin-left: 2px; }
+
+    .filter-icon {
+      margin-left: 4px;
+      cursor: pointer;
+      opacity: 0.4;
+      transition: opacity 0.15s;
+      width: 14px;
+      height: 14px;
+    }
+
+    .filter-icon:hover, .filter-icon.active { opacity: 1; color: var(--dg-primary); }
+
+    .resize-handle {
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 6px;
+      cursor: col-resize;
+      z-index: 2;
+    }
+
+    .resize-handle:hover { background: var(--dg-primary); opacity: 0.3; }
+
+    .checkbox-cell {
+      width: 48px;
+      min-width: 48px;
+      max-width: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      border-right: 1px solid var(--dg-border);
+    }
+
+    .checkbox-cell input { cursor: pointer; width: 16px; height: 16px; }
+
+    /* ── Body ── */
+    .grid-body {
+      overflow-y: auto;
+      overflow-x: auto;
+      position: relative;
+    }
+
+    .grid-body-inner {
+      position: relative;
+    }
+
+    .grid-row {
+      display: flex;
+      border-bottom: 1px solid #f0f0f0;
+      transition: background 0.1s;
+      position: relative;
+    }
+
+    .grid-row:hover { background: var(--dg-row-hover); }
+    .grid-row.selected { background: var(--dg-row-selected); }
+
+    .grid-row.group-row {
+      background: #f8f8f8;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .grid-row.group-row:hover { background: #f0f0f0; }
+
+    .grid-cell {
+      display: flex;
+      align-items: center;
+      padding: 0 12px;
+      font-size: 13px;
+      overflow: hidden;
+      flex-shrink: 0;
+      border-right: 1px solid transparent;
+    }
+
+    .grid-cell:last-child { border-right: none; }
+
+    .cell-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+    }
+
+    .cell-content.right { text-align: right; }
+    .cell-content.center { text-align: center; }
+
+    .cell-edit-input {
+      width: 100%;
+      border: 2px solid var(--dg-primary);
+      border-radius: 3px;
+      padding: 4px 8px;
+      font-size: 13px;
+      font-family: var(--dg-font);
+      outline: none;
+      background: #fff;
+    }
+
+    .cell-edit-select {
+      width: 100%;
+      border: 2px solid var(--dg-primary);
+      border-radius: 3px;
+      padding: 4px 8px;
+      font-size: 13px;
+      font-family: var(--dg-font);
+      outline: none;
+      background: #fff;
+    }
+
+    .expand-toggle {
+      cursor: pointer;
+      margin-right: 4px;
+      user-select: none;
+      font-size: 12px;
+      width: 20px;
+      text-align: center;
+      flex-shrink: 0;
+    }
+
+    .tree-indent {
+      display: inline-block;
+      flex-shrink: 0;
+    }
+
+    /* ── Footer ── */
+    .grid-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 16px;
+      border-top: 1px solid var(--dg-border);
+      background: var(--dg-header-bg);
+      font-size: 13px;
+      color: var(--dg-text-secondary);
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .footer-info { display: flex; align-items: center; gap: 16px; }
+    .footer-pagination { display: flex; align-items: center; gap: 4px; }
+
+    .page-btn {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--dg-border);
+      border-radius: 4px;
+      background: #fff;
+      cursor: pointer;
+      font-size: 13px;
+      transition: background 0.15s;
+      color: var(--dg-text);
+      font-family: var(--dg-font);
+    }
+
+    .page-btn:hover:not(:disabled) { background: #f0f0f0; }
+    .page-btn:disabled { opacity: 0.4; cursor: default; }
+    .page-btn.active { background: var(--dg-primary); color: #fff; border-color: var(--dg-primary); }
+    .page-btn svg { width: 14px; height: 14px; }
+
+    .page-size-select {
+      border: 1px solid var(--dg-border);
+      border-radius: 4px;
+      padding: 4px 8px;
+      font-size: 13px;
+      background: #fff;
+      cursor: pointer;
+      font-family: var(--dg-font);
+    }
+
+    /* ── Filter Popover ── */
+    .filter-popover {
+      position: absolute;
+      background: #fff;
+      border: 1px solid var(--dg-border);
+      border-radius: 8px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+      z-index: 1000;
+      padding: 16px;
+      min-width: 280px;
+      max-width: 340px;
+    }
+
+    .filter-popover-title {
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 12px;
+    }
+
+    .filter-popover select,
+    .filter-popover input {
+      width: 100%;
+      padding: 8px 10px;
+      border: 1px solid var(--dg-border);
+      border-radius: 4px;
+      font-size: 13px;
+      margin-bottom: 8px;
+      font-family: var(--dg-font);
+      outline: none;
+    }
+
+    .filter-popover select:focus,
+    .filter-popover input:focus { border-color: var(--dg-primary); }
+
+    .filter-popover-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    .filter-apply-btn, .filter-clear-btn {
+      flex: 1;
+      padding: 8px;
+      border-radius: 4px;
+      font-size: 13px;
+      cursor: pointer;
+      font-family: var(--dg-font);
+      border: 1px solid var(--dg-border);
+    }
+
+    .filter-apply-btn {
+      background: var(--dg-primary);
+      color: #fff;
+      border-color: var(--dg-primary);
+    }
+
+    .filter-clear-btn { background: #fff; }
+    .filter-apply-btn:hover { opacity: 0.9; }
+    .filter-clear-btn:hover { background: #f5f5f5; }
+
+    /* ── Loading ── */
+    .loading-overlay {
+      position: absolute;
+      inset: 0;
+      background: rgba(255,255,255,0.7);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 50;
+      font-size: 14px;
+      color: var(--dg-text-secondary);
+    }
+
+    .loading-spinner {
+      width: 24px;
+      height: 24px;
+      border: 3px solid #e0e0e0;
+      border-top-color: var(--dg-primary);
+      border-radius: 50%;
+      animation: dg-spin 0.8s linear infinite;
+      margin-right: 8px;
+    }
+
+    @keyframes dg-spin { to { transform: rotate(360deg); } }
+
+    /* ── No Rows ── */
+    .no-rows {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 48px 16px;
+      color: var(--dg-text-secondary);
+      font-size: 14px;
+    }
+
+    /* ── Column Menu Button ── */
+    .column-menu-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      color: #999;
+      font-size: 16px;
+      flex-shrink: 0;
+      margin-left: 2px;
+      padding: 0;
+      transition: background 0.15s, color 0.15s;
+      font-family: var(--dg-font);
+      line-height: 1;
+    }
+
+    .column-menu-btn:hover { background: rgba(0,0,0,0.08); color: var(--dg-text); }
+    .column-menu-btn.active { background: rgba(0,0,0,0.08); color: var(--dg-primary); }
+
+    /* ── Column Menu ── */
+    .column-menu {
+      position: absolute;
+      background: #fff;
+      border: 1px solid var(--dg-border);
+      border-radius: 8px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+      z-index: 1000;
+      padding: 6px 0;
+      min-width: 200px;
+    }
+
+    .column-menu-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      padding: 9px 16px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      font-size: 13px;
+      text-align: left;
+      transition: background 0.15s;
+      font-family: var(--dg-font);
+      color: var(--dg-text);
+      white-space: nowrap;
+    }
+
+    .column-menu-item:hover { background: #f5f5f5; }
+
+    .column-menu-item svg {
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+      color: #666;
+    }
+
+    .column-menu-item:hover svg { color: var(--dg-text); }
+
+    .column-menu-divider {
+      height: 1px;
+      background: var(--dg-border);
+      margin: 4px 0;
+    }
+
+    /* ── Responsive ── */
+    @media (max-width: 600px) {
+      .toolbar { padding: 6px 8px; }
+      .toolbar-search { max-width: 100%; }
+      .grid-footer { font-size: 12px; padding: 6px 8px; }
+      .page-btn { width: 28px; height: 28px; font-size: 12px; }
+      .header-cell { padding: 0 8px; font-size: 12px; }
+      .grid-cell { padding: 0 8px; font-size: 12px; }
+    }
+  `;
+__decorate([
+    n({ type: Array })
+], ChefUiDataGrid.prototype, "rows", void 0);
+__decorate([
+    n({ type: Array })
+], ChefUiDataGrid.prototype, "columns", void 0);
+__decorate([
+    n({ type: Number })
+], ChefUiDataGrid.prototype, "pageSize", void 0);
+__decorate([
+    n({ type: Array })
+], ChefUiDataGrid.prototype, "pageSizeOptions", void 0);
+__decorate([
+    n({ type: Boolean })
+], ChefUiDataGrid.prototype, "checkboxSelection", void 0);
+__decorate([
+    n({ type: Boolean })
+], ChefUiDataGrid.prototype, "sortable", void 0);
+__decorate([
+    n({ type: Boolean })
+], ChefUiDataGrid.prototype, "filterable", void 0);
+__decorate([
+    n({ type: Boolean })
+], ChefUiDataGrid.prototype, "editable", void 0);
+__decorate([
+    n({ type: Boolean })
+], ChefUiDataGrid.prototype, "resizableColumns", void 0);
+__decorate([
+    n({ type: Boolean })
+], ChefUiDataGrid.prototype, "reorderableColumns", void 0);
+__decorate([
+    n({ type: Boolean })
+], ChefUiDataGrid.prototype, "showToolbar", void 0);
+__decorate([
+    n({ type: String })
+], ChefUiDataGrid.prototype, "density", void 0);
+__decorate([
+    n({ type: Boolean })
+], ChefUiDataGrid.prototype, "loading", void 0);
+__decorate([
+    n({ type: Boolean })
+], ChefUiDataGrid.prototype, "autoHeight", void 0);
+__decorate([
+    n({ type: Number })
+], ChefUiDataGrid.prototype, "rowHeight", void 0);
+__decorate([
+    n({ type: Number })
+], ChefUiDataGrid.prototype, "headerHeight", void 0);
+__decorate([
+    n({ type: Boolean })
+], ChefUiDataGrid.prototype, "disableVirtualization", void 0);
+__decorate([
+    n({ type: Boolean })
+], ChefUiDataGrid.prototype, "treeData", void 0);
+__decorate([
+    n({ type: Boolean })
+], ChefUiDataGrid.prototype, "clipboardEnabled", void 0);
+__decorate([
+    n({ type: Object })
+], ChefUiDataGrid.prototype, "pinnedColumns", void 0);
+__decorate([
+    n({ type: Array })
+], ChefUiDataGrid.prototype, "rowGroupingModel", void 0);
+__decorate([
+    n({ type: Object })
+], ChefUiDataGrid.prototype, "aggregationModel", void 0);
+__decorate([
+    n({ type: Object })
+], ChefUiDataGrid.prototype, "exportOptions", void 0);
+__decorate([
+    n({ type: String })
+], ChefUiDataGrid.prototype, "noRowsMessage", void 0);
+__decorate([
+    n({ type: String })
+], ChefUiDataGrid.prototype, "loadingMessage", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_currentPage", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_sortModel", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_filterModel", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_selectedRows", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_editingCell", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_editValue", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_columnWidths", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_columnOrder", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_hiddenColumns", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_expandedRows", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_expandedGroups", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_scrollTop", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_containerHeight", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_activeFilterColumn", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_filterPopoverField", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_filterPopoverX", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_filterPopoverY", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_columnMenuField", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_columnMenuX", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_columnMenuY", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_densityMenuOpen", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_columnsMenuOpen", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_exportMenuOpen", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_contextMenuField", void 0);
+__decorate([
+    e('.grid-body')
+], ChefUiDataGrid.prototype, "_bodyEl", void 0);
+ChefUiDataGrid = __decorate([
+    t('chef-ui-data-grid')
+], ChefUiDataGrid);
+
+export { ChefButton, ChefIcon, ChefUILicense, ChefUiAccordion, ChefUiAccordionItem, ChefUiActionButton, ChefUiAlert, ChefUiAppBar, ChefUiAvatar, ChefUiAvatarGroup, ChefUiBadge, ChefUiBreadcrumbItem, ChefUiBreadcrumbs, ChefUiCalendar, ChefUiCard, ChefUiCardHeader, ChefUiCardMedia, ChefUiCheckbox, ChefUiChip, ChefUiCircularProgress, ChefUiDataGrid, ChefUiDialog, ChefUiDivider, ChefUiDrawer, ChefUiLinearProgress, ChefUiList, ChefUiListItem, ChefUiListSubheader, ChefUiMenu, ChefUiMenuDivider, ChefUiMenuItem, ChefUiPagination, ChefUiRadio, ChefUiRadioGroup, ChefUiRating, ChefUiReaction, ChefUiSelect, ChefUiSkeleton, ChefUiSlider, ChefUiSnackbar, ChefUiStepper, ChefUiSwitch, ChefUiTab, ChefUiTabPanel, ChefUiTabs, ChefUiTextField, ChefUiToolbar, ChefUiTooltip, DENSITY_HEADER_HEIGHT, DENSITY_ROW_HEIGHT, FILTER_OPERATORS, IconResolver, generateLicenseToken, iconResolver };
 //# sourceMappingURL=index.js.map