@human-kit/svelte-components 1.0.0-alpha.16 → 1.0.0-alpha.18

package/dist/table/root/context.js

@@ -1,10 +1,51 @@
-import { getContext, setContext } from 'svelte';
+import { flushSync, getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 const TABLE_KEY = Symbol('table');
 const TABLE_SECTION_KEY = Symbol('table-section');
 const TABLE_ROW_KEY = Symbol('table-row');
 const TABLE_COLUMN_KEY = Symbol('table-column');
 const TABLE_CELL_KEY = Symbol('table-cell');
+const IS_BROWSER = typeof window !== 'undefined';
+export const DEFAULT_TABLE_COLUMN_MIN_WIDTH = 60;
+export function distributeRoundedWidths(entries, targetTotal) {
+    let delta = targetTotal - entries.reduce((total, entry) => total + entry.width, 0);
+    if (delta === 0)
+        return entries;
+    const prioritizedEntries = [...entries].sort((left, right) => {
+        if (delta > 0) {
+            if (right.remainder !== left.remainder)
+                return right.remainder - left.remainder;
+            return right.index - left.index;
+        }
+        if (left.remainder !== right.remainder)
+            return left.remainder - right.remainder;
+        return left.index - right.index;
+    });
+    while (delta !== 0) {
+        let updated = false;
+        for (const entry of prioritizedEntries) {
+            if (delta > 0) {
+                if (entry.maxWidth !== undefined && entry.width >= entry.maxWidth)
+                    continue;
+                entry.width += 1;
+                delta -= 1;
+                updated = true;
+            }
+            else {
+                if (entry.width <= entry.minWidth)
+                    continue;
+                entry.width -= 1;
+                delta += 1;
+                updated = true;
+            }
+            if (delta === 0)
+                break;
+        }
+        if (!updated)
+            break;
+    }
+    return entries;
+}
 export function createTableContext(options = {}) {
     let selectionMode = options.selectionMode ?? 'none';
     let selectionBehavior = options.selectionBehavior ?? 'toggle';
@@ -20,15 +61,19 @@ export function createTableContext(options = {}) {
     const disabledKeys = new Set(options.disabledKeys ?? []);
     const hiddenColumnIds = new Set(options.initialHiddenColumns ?? []);
     let resizingColumnId = null;
+    let resizeSession = null;
     let suppressNextHeaderClick = false;
     const columns = new Map();
     const columnIds = new Map();
     const columnOrder = [];
     const columnsWithResizers = new Set();
+    let resizerLayoutReady = false;
     const columnWidths = new Map(options.initialColumnWidths ?? []);
     const rows = new Map();
     const headerRowOrder = [];
     const bodyRowOrder = [];
+    let bodyRowsInitialized = false;
+    let selectableBodyRowCount = 0;
     const cells = new Map();
     const cellOrder = [];
     let orderedRowTokensCache = {
@@ -39,6 +84,7 @@ export function createTableContext(options = {}) {
     let visibleOrderedColumnTokensCache = null;
     let columnWidthsCache = null;
     let visibleColumnWidthsCache = null;
+    let resolvedVisibleColumnWidthsCache = null;
     let navigableCellsCache = null;
     let rowsWithCellsCache = null;
     const layoutVersion = writable(0);
@@ -60,11 +106,21 @@ export function createTableContext(options = {}) {
         visibleOrderedColumnTokensCache = null;
         columnWidthsCache = null;
         visibleColumnWidthsCache = null;
+        resolvedVisibleColumnWidthsCache = null;
         navigableCellsCache = null;
         rowsWithCellsCache = null;
     }
     let layoutNotifyScheduled = false;
+    let selectionNotifyScheduled = false;
     let widthNotifyScheduled = false;
+    function syncResizerLayoutReady(nextReady) {
+        if (resizerLayoutReady === nextReady)
+            return;
+        resizerLayoutReady = nextReady;
+        invalidateLayoutCaches();
+        layoutVersion.update((value) => value + 1);
+        notifyWidth();
+    }
     function notifyLayout() {
         invalidateLayoutCaches();
         if (!layoutNotifyScheduled) {
@@ -76,7 +132,13 @@ export function createTableContext(options = {}) {
         }
     }
     function notifySelection() {
-        selectionVersion.update((value) => value + 1);
+        if (!selectionNotifyScheduled) {
+            selectionNotifyScheduled = true;
+            queueMicrotask(() => {
+                selectionNotifyScheduled = false;
+                selectionVersion.update((value) => value + 1);
+            });
+        }
     }
     function notifyFocus() {
         focusVersion.update((value) => value + 1);
@@ -88,6 +150,7 @@ export function createTableContext(options = {}) {
     function notifyWidth() {
         columnWidthsCache = null;
         visibleColumnWidthsCache = null;
+        resolvedVisibleColumnWidthsCache = null;
         if (!widthNotifyScheduled) {
             widthNotifyScheduled = true;
             queueMicrotask(() => {
@@ -96,22 +159,52 @@ export function createTableContext(options = {}) {
             });
         }
     }
+    function notifyWidthImmediately() {
+        columnWidthsCache = null;
+        visibleColumnWidthsCache = null;
+        resolvedVisibleColumnWidthsCache = null;
+        flushSync(() => {
+            widthVersion.update((value) => value + 1);
+        });
+    }
+    function refreshMeasuredLayout() {
+        notifyWidthImmediately();
+    }
     function notifyResize() {
         resizeVersion.update((value) => value + 1);
     }
-    function normalizeColumnWidth(width) {
+    function parseColumnWidth(width) {
         if (typeof width === 'number') {
-            return Number.isFinite(width) ? width : undefined;
+            return Number.isFinite(width) ? { unit: 'px', value: width } : undefined;
         }
         if (typeof width === 'string') {
-            const match = width.trim().match(/^(\d+(?:\.\d+)?)px$/i);
+            const match = width.trim().match(/^(\d+(?:\.\d+)?)(px|%|fr)$/i);
             if (!match)
                 return undefined;
             const next = Number(match[1]);
-            return Number.isFinite(next) ? next : undefined;
+            if (!Number.isFinite(next))
+                return undefined;
+            const unit = match[2].toLowerCase();
+            return { unit, value: next };
         }
         return undefined;
     }
+    function normalizeColumnWidth(width) {
+        const parsed = parseColumnWidth(width);
+        if (!parsed)
+            return undefined;
+        if (parsed.unit === 'px') {
+            return typeof width === 'number' ? width : `${parsed.value}px`;
+        }
+        if (parsed.unit === '%') {
+            return `${parsed.value}%`;
+        }
+        return `${parsed.value}fr`;
+    }
+    function isRelativeColumnWidth(width) {
+        const parsed = parseColumnWidth(width);
+        return parsed ? parsed.unit !== 'px' : false;
+    }
     function getColumnRegistrationById(columnId) {
         const token = columnIds.get(columnId);
         return token ? columns.get(token) : undefined;
@@ -125,10 +218,72 @@ export function createTableContext(options = {}) {
     function getColumnMaxWidth(columnId) {
         return getColumnRegistrationById(columnId)?.maxWidth;
     }
-    function clampColumnWidth(columnId, width) {
+    function getFixedColumnWidthSpec(columnId) {
+        return normalizeColumnWidth(getColumnRegistrationById(columnId)?.width);
+    }
+    function getManagedColumnWidthSpec(columnId) {
+        return normalizeColumnWidth(columnWidths.get(columnId));
+    }
+    function getDefaultColumnWidthSpec(columnId) {
+        return normalizeColumnWidth(getColumnRegistrationById(columnId)?.defaultWidth);
+    }
+    function hasAuthoredColumnWidthSpec(columnId) {
+        return (getFixedColumnWidthSpec(columnId) !== undefined ||
+            getManagedColumnWidthSpec(columnId) !== undefined ||
+            getDefaultColumnWidthSpec(columnId) !== undefined);
+    }
+    function getEffectiveColumnWidthSpec(columnId) {
+        const fixedWidth = getFixedColumnWidthSpec(columnId);
+        if (fixedWidth !== undefined) {
+            return fixedWidth;
+        }
+        const managedWidth = getManagedColumnWidthSpec(columnId);
+        if (managedWidth !== undefined) {
+            return managedWidth;
+        }
+        const defaultWidth = getDefaultColumnWidthSpec(columnId);
+        if (defaultWidth !== undefined) {
+            return defaultWidth;
+        }
+        return resizerLayoutReady && columnsWithResizers.size > 0 ? '1fr' : undefined;
+    }
+    function getMeasuredTableWidth() {
+        const tableCell = Array.from(cells.values()).find((cell) => cell.element)?.element;
+        const tableElement = tableCell?.closest('table');
+        const tableWidth = tableElement?.getBoundingClientRect().width;
+        const containerElement = tableElement?.parentElement;
+        const containerClientWidth = containerElement?.clientWidth;
+        const containerStyle = containerElement ? getComputedStyle(containerElement) : undefined;
+        const containerPaddingLeft = Number.parseFloat(containerStyle?.paddingLeft ?? '0');
+        const containerPaddingRight = Number.parseFloat(containerStyle?.paddingRight ?? '0');
+        const containerWidth = containerClientWidth !== undefined && Number.isFinite(containerClientWidth)
+            ? containerClientWidth - containerPaddingLeft - containerPaddingRight
+            : undefined;
+        // Use the container width as the stable reference for fr/% resolution.
+        // Using Math.max(table, container) causes a feedback loop during resize:
+        // the table grows → measurement returns more → fr columns get more space →
+        // the table grows further. The container width is stable and represents
+        // the actual available space the table should fill.
+        const width = containerWidth ?? tableWidth;
+        if (width === undefined || width <= 0 || !Number.isFinite(width)) {
+            return undefined;
+        }
+        return Math.round(width);
+    }
+    function getColumnWidthBounds(columnId) {
         const registration = getColumnRegistrationById(columnId);
-        const minWidth = registration?.minWidth ?? 75;
-        const maxWidth = registration?.maxWidth;
+        const fixedWidth = parseColumnWidth(registration?.width);
+        const minWidth = registration?.minWidth ??
+            (fixedWidth?.unit === 'px'
+                ? Math.min(fixedWidth.value, DEFAULT_TABLE_COLUMN_MIN_WIDTH)
+                : DEFAULT_TABLE_COLUMN_MIN_WIDTH);
+        return {
+            minWidth,
+            maxWidth: registration?.maxWidth
+        };
+    }
+    function clampColumnWidth(columnId, width) {
+        const { minWidth, maxWidth } = getColumnWidthBounds(columnId);
         let next = Math.round(width);
         if (Number.isNaN(next) || !Number.isFinite(next)) {
             next = minWidth;
@@ -139,11 +294,22 @@ export function createTableContext(options = {}) {
         }
         return next;
     }
+    function resolveRelativeColumnWidthAllocations(entries, targetTotal) {
+        const allocations = entries.map((entry) => {
+            const { minWidth, maxWidth } = getColumnWidthBounds(entry.columnId);
+            return {
+                ...entry,
+                width: clampColumnWidth(entry.columnId, entry.exactWidth),
+                minWidth,
+                maxWidth,
+                remainder: entry.exactWidth - Math.floor(entry.exactWidth)
+            };
+        });
+        return distributeRoundedWidths(allocations, targetTotal);
+    }
     function hasResizableColumns() {
         for (const column of columns.values()) {
-            if (isColumnHidden(column.id))
-                continue;
-            if (columnsWithResizers.has(column.token))
+            if (isColumnResizable(column.id))
                 return true;
         }
         return false;
@@ -152,12 +318,26 @@ export function createTableContext(options = {}) {
         if (columnsWithResizers.has(columnToken))
             return;
         columnsWithResizers.add(columnToken);
-        notifyLayout();
+        if (IS_BROWSER) {
+            syncResizerLayoutReady(true);
+            return;
+        }
+        resizerLayoutReady = false;
+        invalidateLayoutCaches();
+        layoutVersion.update((value) => value + 1);
+        notifyWidth();
     }
     function unregisterColumnResizer(columnToken) {
         if (!columnsWithResizers.delete(columnToken))
             return;
-        notifyLayout();
+        if (IS_BROWSER) {
+            syncResizerLayoutReady(columnsWithResizers.size > 0);
+            return;
+        }
+        resizerLayoutReady = false;
+        invalidateLayoutCaches();
+        layoutVersion.update((value) => value + 1);
+        notifyWidth();
     }
     function sameColumnMetadata(left, right) {
         return (left.token === right.token &&
@@ -271,15 +451,72 @@ export function createTableContext(options = {}) {
         return getColumnRegistrationById(columnId)?.textValue;
     }
     function getColumnWidth(columnId) {
-        const managedWidth = columnWidths.get(columnId);
-        if (managedWidth !== undefined) {
-            return clampColumnWidth(columnId, managedWidth);
+        const parsed = parseColumnWidth(getEffectiveColumnWidthSpec(columnId));
+        if (!parsed)
+            return undefined;
+        if (!isColumnHidden(columnId)) {
+            if (parsed.unit !== 'px') {
+                return undefined;
+            }
+            return getResolvedVisibleColumnWidths().get(columnId);
         }
-        const registration = getColumnRegistrationById(columnId);
-        if (!registration)
+        return parsed?.unit === 'px' ? clampColumnWidth(columnId, parsed.value) : undefined;
+    }
+    function formatCssLength(length) {
+        const rounded = Math.round(length * 1000) / 1000;
+        return Number.isInteger(rounded) ? `${rounded}` : `${rounded}`;
+    }
+    function getColumnWidthStyle(columnId) {
+        const resolvedWidth = getColumnWidth(columnId);
+        if (resolvedWidth !== undefined) {
+            return `${resolvedWidth}px`;
+        }
+        const parsed = parseColumnWidth(getEffectiveColumnWidthSpec(columnId));
+        if (!parsed)
             return undefined;
-        const nextWidth = normalizeColumnWidth(registration.width) ?? normalizeColumnWidth(registration.defaultWidth);
-        return nextWidth !== undefined ? clampColumnWidth(columnId, nextWidth) : undefined;
+        if (parsed.unit === 'px') {
+            return `${clampColumnWidth(columnId, parsed.value)}px`;
+        }
+        if (parsed.unit === '%') {
+            return `${parsed.value}%`;
+        }
+        let fixedPxTotal = 0;
+        let percentTotal = 0;
+        let totalFr = 0;
+        for (const token of getVisibleOrderedColumnTokens()) {
+            const column = columns.get(token);
+            if (!column)
+                continue;
+            const spec = parseColumnWidth(getEffectiveColumnWidthSpec(column.id));
+            if (!spec)
+                continue;
+            if (spec.unit === 'px') {
+                fixedPxTotal += clampColumnWidth(column.id, spec.value);
+                continue;
+            }
+            if (spec.unit === '%') {
+                percentTotal += spec.value;
+                continue;
+            }
+            totalFr += spec.value;
+        }
+        if (totalFr <= 0)
+            return undefined;
+        const frShare = parsed.value / totalFr;
+        const availableWidthTerms = ['100%'];
+        if (fixedPxTotal > 0) {
+            availableWidthTerms.push(`${formatCssLength(fixedPxTotal)}px`);
+        }
+        if (percentTotal > 0) {
+            availableWidthTerms.push(`${formatCssLength(percentTotal)}%`);
+        }
+        const availableWidthExpression = availableWidthTerms.length === 1
+            ? availableWidthTerms[0]
+            : `(${availableWidthTerms.join(' - ')})`;
+        if (frShare === 1) {
+            return `calc(${availableWidthExpression})`;
+        }
+        return `calc(${availableWidthExpression} * ${formatCssLength(frShare)})`;
     }
     function isColumnResizable(columnId) {
         const column = getColumnRegistrationById(columnId);
@@ -297,7 +534,7 @@ export function createTableContext(options = {}) {
             const column = columns.get(token);
             if (!column)
                 continue;
-            const width = getColumnWidth(column.id);
+            const width = getManagedColumnWidthSpec(column.id);
             if (width !== undefined) {
                 widths.set(column.id, width);
             }
@@ -317,6 +554,70 @@ export function createTableContext(options = {}) {
         visibleColumnWidthsCache = widths;
         return widths;
     }
+    function hasRelativeVisibleColumnWidths() {
+        for (const token of getVisibleOrderedColumnTokens()) {
+            const column = columns.get(token);
+            if (!column)
+                continue;
+            if (isRelativeColumnWidth(getEffectiveColumnWidthSpec(column.id))) {
+                return true;
+            }
+        }
+        return false;
+    }
+    function getResolvedVisibleColumnWidths() {
+        if (resolvedVisibleColumnWidthsCache)
+            return resolvedVisibleColumnWidthsCache;
+        const widths = new Map();
+        const flexibleColumns = [];
+        const relativeColumns = [];
+        const tableWidth = getMeasuredTableWidth();
+        let fixedWidthTotal = 0;
+        let exactRelativeWidthTotal = 0;
+        let totalFr = 0;
+        for (const [index, token] of getVisibleOrderedColumnTokens().entries()) {
+            const column = columns.get(token);
+            if (!column)
+                continue;
+            const parsed = parseColumnWidth(getEffectiveColumnWidthSpec(column.id));
+            if (!parsed)
+                continue;
+            if (parsed.unit === 'px') {
+                const nextWidth = clampColumnWidth(column.id, parsed.value);
+                widths.set(column.id, nextWidth);
+                fixedWidthTotal += nextWidth;
+                continue;
+            }
+            if (parsed.unit === '%') {
+                if (tableWidth === undefined)
+                    continue;
+                const exactWidth = (tableWidth * parsed.value) / 100;
+                relativeColumns.push({ columnId: column.id, index, exactWidth });
+                exactRelativeWidthTotal += exactWidth;
+                continue;
+            }
+            flexibleColumns.push({ columnId: column.id, fr: parsed.value, index });
+            totalFr += parsed.value;
+        }
+        if (tableWidth !== undefined && flexibleColumns.length > 0 && totalFr > 0) {
+            const distributableWidth = Math.max(tableWidth - fixedWidthTotal - exactRelativeWidthTotal, 0);
+            for (const entry of flexibleColumns) {
+                relativeColumns.push({
+                    columnId: entry.columnId,
+                    index: entry.index,
+                    exactWidth: (distributableWidth * entry.fr) / totalFr
+                });
+            }
+        }
+        if (tableWidth !== undefined && relativeColumns.length > 0) {
+            const targetRelativeTotal = Math.max(tableWidth - fixedWidthTotal, 0);
+            for (const entry of resolveRelativeColumnWidthAllocations(relativeColumns, targetRelativeTotal)) {
+                widths.set(entry.columnId, entry.width);
+            }
+        }
+        resolvedVisibleColumnWidthsCache = widths;
+        return widths;
+    }
     function getMeasuredHeaderWidth(columnToken) {
         const headerCell = Array.from(cells.values()).find((cell) => cell.section === 'header' && cell.columnToken === columnToken && cell.element);
         const width = headerCell?.element?.getBoundingClientRect().width;
@@ -325,42 +626,110 @@ export function createTableContext(options = {}) {
         }
         return Math.round(width);
     }
-    function freezeColumnWidthsFromLayout() {
-        const next = new Map();
-        let changed = false;
-        for (const token of columnOrder) {
+    function getFixedVisibleColumnWidthTotal() {
+        let total = 0;
+        for (const token of getVisibleOrderedColumnTokens()) {
             const column = columns.get(token);
             if (!column)
                 continue;
+            if (getFixedColumnWidthSpec(column.id) === undefined)
+                continue;
+            const measuredWidth = getMeasuredHeaderWidth(token);
+            const resolvedWidth = getColumnWidth(column.id) ?? measuredWidth;
+            if (resolvedWidth === undefined)
+                continue;
+            total += clampColumnWidth(column.id, resolvedWidth);
+        }
+        return total;
+    }
+    function getResizableRelativeTailColumnId(activeColumnId) {
+        return getVisibleOrderedColumnTokens()
+            .map((token) => columns.get(token))
+            .filter((column) => !!column)
+            .filter((column) => {
+            if (column.id === activeColumnId)
+                return false;
+            if (getFixedColumnWidthSpec(column.id) !== undefined)
+                return false;
+            return isRelativeColumnWidth(getEffectiveColumnWidthSpec(column.id));
+        })
+            .at(-1)?.id;
+    }
+    function prepareColumnWidthsForResize(activeColumnId) {
+        const next = new Map(columnWidths);
+        const baselineWidths = new Map();
+        const preservedFlexibleColumnId = getResizableRelativeTailColumnId(activeColumnId);
+        const preservedFlexibleEffectiveWidth = preservedFlexibleColumnId
+            ? normalizeColumnWidth(getEffectiveColumnWidthSpec(preservedFlexibleColumnId))
+            : undefined;
+        const measuredTableWidth = getMeasuredTableWidth();
+        const fixedVisibleColumnWidthTotal = getFixedVisibleColumnWidthTotal();
+        for (const token of getVisibleOrderedColumnTokens()) {
+            const column = columns.get(token);
+            if (!column)
+                continue;
+            if (getFixedColumnWidthSpec(column.id) !== undefined)
+                continue;
             const measuredWidth = getMeasuredHeaderWidth(token);
-            const resolvedWidth = measuredWidth ?? getColumnWidth(column.id);
+            const resolvedWidth = getColumnWidth(column.id) ?? measuredWidth;
             if (resolvedWidth === undefined)
                 continue;
-            const clampedWidth = clampColumnWidth(column.id, resolvedWidth);
-            next.set(column.id, clampedWidth);
-            if (columnWidths.get(column.id) !== clampedWidth) {
-                changed = true;
+            const frozenWidth = clampColumnWidth(column.id, resolvedWidth);
+            next.set(column.id, frozenWidth);
+            baselineWidths.set(column.id, frozenWidth);
+        }
+        let changed = next.size !== columnWidths.size;
+        if (!changed) {
+            for (const [columnId, width] of next) {
+                if (columnWidths.get(columnId) !== width) {
+                    changed = true;
+                    break;
+                }
             }
         }
-        if (!changed || next.size === 0)
+        if (!changed)
             return;
         columnWidths.clear();
         for (const [columnId, width] of next) {
             columnWidths.set(columnId, width);
         }
         columnWidthsCache = null;
+        visibleColumnWidthsCache = null;
+        const baselineTotalWidth = Array.from(baselineWidths.values()).reduce((total, current) => total + current, 0);
+        resizeSession = {
+            activeColumnId: activeColumnId,
+            flexibleTailColumnId: preservedFlexibleColumnId,
+            flexibleTailRestoreWidth: preservedFlexibleColumnId && isRelativeColumnWidth(preservedFlexibleEffectiveWidth)
+                ? preservedFlexibleEffectiveWidth
+                : undefined,
+            baselineWidths,
+            baselineAvailableTableWidth: measuredTableWidth !== undefined
+                ? Math.max(measuredTableWidth - fixedVisibleColumnWidthTotal, 0)
+                : baselineTotalWidth,
+            baselineTotalWidth
+        };
         options.onColumnWidthsChange?.(getColumnWidths());
         notifyWidth();
     }
+    function shouldPrepareColumnWidthsForResize(columnId) {
+        if (getFixedColumnWidthSpec(columnId) !== undefined)
+            return false;
+        if (!hasRelativeVisibleColumnWidths())
+            return false;
+        return resizeSession?.activeColumnId !== columnId;
+    }
     function setColumnWidths(widths) {
         const next = new Map();
+        const incomingWidths = widths ? new Map(widths) : undefined;
         for (const token of columnOrder) {
             const column = columns.get(token);
             if (!column)
                 continue;
-            const incomingWidth = widths ? new Map(widths).get(column.id) : undefined;
+            if (getFixedColumnWidthSpec(column.id) !== undefined)
+                continue;
+            const incomingWidth = normalizeColumnWidth(incomingWidths?.get(column.id));
             if (incomingWidth !== undefined) {
-                next.set(column.id, clampColumnWidth(column.id, incomingWidth));
+                next.set(column.id, incomingWidth);
             }
         }
         columnWidths.clear();
@@ -370,13 +739,36 @@ export function createTableContext(options = {}) {
         notifyWidth();
     }
     function setColumnWidth(columnId, width) {
+        if (getFixedColumnWidthSpec(columnId) !== undefined)
+            return;
         if (!isColumnResizable(columnId))
             return;
+        if (shouldPrepareColumnWidthsForResize(columnId)) {
+            prepareColumnWidthsForResize(columnId);
+        }
         const nextWidth = clampColumnWidth(columnId, width);
-        if (columnWidths.get(columnId) === nextWidth)
+        const currentWidth = columnWidths.get(columnId);
+        if (resizeSession?.activeColumnId === columnId &&
+            resizeSession.flexibleTailColumnId !== undefined) {
+            const baselineActiveWidth = resizeSession.baselineWidths.get(columnId);
+            const baselineTailWidth = resizeSession.baselineWidths.get(resizeSession.flexibleTailColumnId);
+            if (baselineActiveWidth !== undefined && baselineTailWidth !== undefined) {
+                const widthDelta = nextWidth - baselineActiveWidth;
+                const overflowWidth = Math.max(resizeSession.baselineTotalWidth - resizeSession.baselineAvailableTableWidth, 0);
+                const tailTargetWidth = widthDelta >= 0
+                    ? baselineTailWidth - widthDelta
+                    : baselineTailWidth + Math.max(-widthDelta - overflowWidth, 0);
+                const tailWidth = clampColumnWidth(resizeSession.flexibleTailColumnId, tailTargetWidth);
+                if (columnWidths.get(resizeSession.flexibleTailColumnId) !== tailWidth) {
+                    columnWidths.set(resizeSession.flexibleTailColumnId, tailWidth);
+                }
+            }
+        }
+        if (currentWidth === nextWidth)
             return;
         columnWidths.set(columnId, nextWidth);
         columnWidthsCache = null;
+        visibleColumnWidthsCache = null;
         options.onColumnWidthsChange?.(getColumnWidths());
         notifyWidth();
     }
@@ -502,9 +894,7 @@ export function createTableContext(options = {}) {
         notifyWidth();
     }
     function measureIntrinsicElementWidth(cell) {
-        const target = cell.querySelector('[data-table-header-content]') ??
-            cell.firstElementChild ??
-            cell;
+        const target = cell;
         const clone = target.cloneNode(true);
         for (const separator of clone.querySelectorAll('[role="separator"]')) {
             separator.remove();
@@ -563,9 +953,7 @@ export function createTableContext(options = {}) {
     function startColumnResize(columnId) {
         if (!isColumnResizable(columnId) || resizingColumnId === columnId)
             return;
-        if (getVisibleColumnWidths().size < getVisibleColumnCount()) {
-            freezeColumnWidthsFromLayout();
-        }
+        resizeSession = null;
         resizingColumnId = columnId;
         options.onColumnResizeStart?.(columnId);
         notifyResize();
@@ -573,8 +961,24 @@ export function createTableContext(options = {}) {
     function endColumnResize() {
         if (!resizingColumnId)
             return;
+        let restoredFlexibleTail = false;
+        if (resizeSession?.flexibleTailColumnId !== undefined &&
+            resizeSession.activeColumnId !== resizeSession.flexibleTailColumnId &&
+            resizeSession.flexibleTailRestoreWidth !== undefined) {
+            const tailColumnId = resizeSession.flexibleTailColumnId;
+            columnWidths.set(tailColumnId, resizeSession.flexibleTailRestoreWidth);
+            columnWidthsCache = null;
+            visibleColumnWidthsCache = null;
+            resolvedVisibleColumnWidthsCache = null;
+            restoredFlexibleTail = true;
+        }
         resizingColumnId = null;
+        if (restoredFlexibleTail) {
+            options.onColumnWidthsChange?.(getColumnWidths());
+        }
+        resizeSession = null;
         options.onColumnResizeEnd?.(getColumnWidths());
+        notifyWidthImmediately();
         notifyResize();
     }
     function suppressHeaderClickOnce() {
@@ -587,6 +991,7 @@ export function createTableContext(options = {}) {
     }
     function registerRow(row) {
         const existing = rows.get(row.token);
+        const previousSelectableBodyRowCount = selectableBodyRowCount;
         const targetOrder = row.section === 'header' ? headerRowOrder : row.section === 'body' ? bodyRowOrder : null;
         const alreadyOrdered = targetOrder ? targetOrder.includes(row.token) : false;
         const wasInHeader = headerRowOrder.includes(row.token);
@@ -602,15 +1007,29 @@ export function createTableContext(options = {}) {
         if (wasInBody) {
             bodyRowOrder.splice(bodyRowOrder.indexOf(row.token), 1);
         }
+        const previousSelectableBodyRow = isSelectableBodyRow(existing);
         rows.set(row.token, row);
         if (targetOrder && !targetOrder.includes(row.token)) {
             targetOrder.push(row.token);
         }
+        const nextSelectableBodyRow = isSelectableBodyRow(row);
+        if (previousSelectableBodyRow !== nextSelectableBodyRow) {
+            selectableBodyRowCount += nextSelectableBodyRow ? 1 : -1;
+        }
+        if ((selectedKeys.size > 0 && (existing?.section === 'body' || row.section === 'body')) ||
+            (bodyRowsInitialized &&
+                (previousSelectableBodyRowCount === 0) !== (selectableBodyRowCount === 0))) {
+            notifySelection();
+        }
         notifyLayout();
     }
     function unregisterRow(token) {
         const row = rows.get(token);
+        const previousSelectableBodyRowCount = selectableBodyRowCount;
         rows.delete(token);
+        if (isSelectableBodyRow(row)) {
+            selectableBodyRowCount = Math.max(0, selectableBodyRowCount - 1);
+        }
         if (focusedRowTarget?.rowToken === token) {
             focusedRowTarget = null;
             notifyFocus();
@@ -633,8 +1052,23 @@ export function createTableContext(options = {}) {
                 notifyFocus();
             }
         }
+        if ((selectedKeys.size > 0 && row?.section === 'body') ||
+            (bodyRowsInitialized &&
+                (previousSelectableBodyRowCount === 0) !== (selectableBodyRowCount === 0))) {
+            notifySelection();
+        }
         notifyLayout();
     }
+    function markBodyRowsInitialized() {
+        if (bodyRowsInitialized)
+            return;
+        const optimisticHasSelectableRows = selectionMode === 'multiple' || selectedKeys.size > 0;
+        bodyRowsInitialized = true;
+        const actualHasSelectableRows = selectableBodyRowCount > 0 || selectedKeys.size > 0;
+        if (optimisticHasSelectableRows !== actualHasSelectableRows) {
+            notifySelection();
+        }
+    }
     function getBodyRowCount() {
         return getOrderedRowTokens('body').length;
     }
@@ -684,6 +1118,20 @@ export function createTableContext(options = {}) {
             return false;
         return disabledKeys.has(id);
     }
+    function isSelectableBodyRow(row) {
+        return (row?.section === 'body' &&
+            row.id !== undefined &&
+            !isRowSelectionDisabled(row.id, row.disabled));
+    }
+    function recomputeSelectableBodyRowCount() {
+        let nextSelectableBodyRowCount = 0;
+        for (const token of bodyRowOrder) {
+            if (isSelectableBodyRow(rows.get(token))) {
+                nextSelectableBodyRowCount += 1;
+            }
+        }
+        selectableBodyRowCount = nextSelectableBodyRowCount;
+    }
     function isRowDisabled(id, localDisabled = false) {
         return disabledBehavior === 'all' && isRowSelectionDisabled(id, localDisabled);
     }
@@ -719,7 +1167,10 @@ export function createTableContext(options = {}) {
         return 'some';
     }
     function hasSelectableRows() {
-        return getOrderedSelectableRowIds().length > 0 || selectedKeys.size > 0;
+        if (!bodyRowsInitialized) {
+            return selectionMode === 'multiple' || selectedKeys.size > 0;
+        }
+        return selectableBodyRowCount > 0 || selectedKeys.size > 0;
     }
     function isRowFocused(token) {
         if (focusedRowTarget?.rowToken === token)
@@ -1378,16 +1829,22 @@ export function createTableContext(options = {}) {
         notifySelection();
     }
     function setDisabledKeys(keys) {
+        const previousSelectableBodyRowCount = selectableBodyRowCount;
         disabledKeys.clear();
         if (keys) {
             for (const key of keys) {
                 disabledKeys.add(key);
             }
         }
+        recomputeSelectableBodyRowCount();
         invalidateLayoutCaches();
         reconcileFocusAfterDisabledStateChange();
         notifyLayout();
-        notifySelection();
+        if (selectedKeys.size > 0 ||
+            (bodyRowsInitialized &&
+                (previousSelectableBodyRowCount === 0) !== (selectableBodyRowCount === 0))) {
+            notifySelection();
+        }
     }
     function setRowActionHandler(handler) {
         onRowAction = handler;
@@ -1465,12 +1922,17 @@ export function createTableContext(options = {}) {
         getVisibleColumnIndexByToken,
         getColumnTextValue,
         getColumnWidth,
+        getColumnWidthStyle,
+        hasAuthoredColumnWidthSpec,
         getColumnMinWidth,
         getColumnMaxWidth,
         isColumnHidden,
         isColumnResizable,
         getColumnWidths,
         getVisibleColumnWidths,
+        getResolvedVisibleColumnWidths,
+        hasRelativeVisibleColumnWidths,
+        refreshMeasuredLayout,
         setColumnWidths,
         setColumnWidth,
         setHiddenColumns,
@@ -1482,6 +1944,7 @@ export function createTableContext(options = {}) {
         hasResizableColumns,
         registerRow,
         unregisterRow,
+        markBodyRowsInitialized,
         getHeaderRowCount,
         getBodyRowCount,
         isRowSelected,