@rezi-ui/core 0.1.0-alpha.7 → 0.1.0-alpha.70

package/dist/renderer/renderToDrawlist/widgets/collections.js

@@ -1,13 +1,18 @@
-import { measureTextCells, truncateWithEllipsis } from "../../../layout/textMeasure.js";
+import { measureTextCells, truncateMiddle, truncateWithEllipsis, } from "../../../layout/textMeasure.js";
+import { FRAME_AUDIT_ENABLED, emitFrameAudit } from "../../../perf/frameAudit.js";
+import { tableRecipe, treeRecipe } from "../../../ui/recipes.js";
 import { distributeColumnWidths } from "../../../widgets/table.js";
 import { computeNodeState, flattenTree } from "../../../widgets/tree.js";
-import { computeVisibleRange, getItemHeight, getItemOffset } from "../../../widgets/virtualList.js";
+import { computeVisibleRange, getItemHeight, getItemOffset, getTotalHeight, resolveVirtualListItemHeightSpec, } from "../../../widgets/virtualList.js";
+import { asTextStyle } from "../../styles.js";
 import { renderBoxBorder } from "../boxBorder.js";
 import { isVisibleRect } from "../indices.js";
-import { renderVNodeSimple } from "../simpleVNode.js";
+import { measureVNodeSimpleHeight, renderVNodeSimple } from "../simpleVNode.js";
 import { clampNonNegative } from "../spacing.js";
 import { mergeTextStyle } from "../textStyle.js";
+import { getColorTokens, readWidgetSize, readWidgetTone, readWidgetVariant, resolveWidgetFocusStyle, } from "../themeTokens.js";
 import { getExpandedSet, getTreePrefixes } from "./files.js";
+import { focusIndicatorEnabled, readFocusConfig, readFocusIndicator, resolveFocusIndicatorStyle, resolveFocusedContentStyle, } from "./focusConfig.js";
 const EMPTY_STRING_ARRAY = Object.freeze([]);
 const SPACE_PAD_CACHE_MAX = 512;
 const spacePadCache = new Map();
@@ -31,44 +36,161 @@ function cachedSpaces(count) {
 function readCellAlign(raw) {
     return raw === "center" || raw === "right" ? raw : "left";
 }
-function alignCellContent(text, width, align) {
+function readCellOverflow(raw) {
+    return raw === "clip" || raw === "middle" ? raw : "ellipsis";
+}
+function readTableBorderVariant(raw) {
+    switch (raw) {
+        case "single":
+        case "double":
+        case "rounded":
+        case "heavy":
+        case "dashed":
+        case "heavy-dashed":
+            return raw;
+        default:
+            return undefined;
+    }
+}
+function alignCellContent(text, width, align, overflow) {
     if (width <= 0)
-        return "";
-    const clipped = measureTextCells(text) > width ? truncateWithEllipsis(text, width) : text;
+        return { text: "", xOffset: 0, clip: false };
+    const textWidth = measureTextCells(text);
+    if (overflow === "clip" && textWidth > width) {
+        const xOffset = align === "right"
+            ? width - textWidth
+            : align === "center"
+                ? Math.floor((width - textWidth) / 2)
+                : 0;
+        return { text, xOffset, clip: true };
+    }
+    const clipped = textWidth > width
+        ? overflow === "middle"
+            ? truncateMiddle(text, width)
+            : truncateWithEllipsis(text, width)
+        : text;
     const contentWidth = measureTextCells(clipped);
     const pad = Math.max(0, width - contentWidth);
     if (align === "right") {
-        return `${cachedSpaces(pad)}${clipped}`;
+        return { text: `${cachedSpaces(pad)}${clipped}`, xOffset: 0, clip: false };
     }
     if (align === "center") {
         const leftPad = Math.floor(pad / 2);
         const rightPad = pad - leftPad;
-        return `${cachedSpaces(leftPad)}${clipped}${cachedSpaces(rightPad)}`;
+        return {
+            text: `${cachedSpaces(leftPad)}${clipped}${cachedSpaces(rightPad)}`,
+            xOffset: 0,
+            clip: false,
+        };
+    }
+    return { text: `${clipped}${cachedSpaces(pad)}`, xOffset: 0, clip: false };
+}
+function drawAlignedCellText(builder, x, y, w, h, cell, style) {
+    if (cell.clip) {
+        builder.pushClip(x, y, w, h);
+        builder.drawText(x + cell.xOffset, y, cell.text, style);
+        builder.popClip();
+        return;
     }
-    return `${clipped}${cachedSpaces(pad)}`;
+    builder.drawText(x + cell.xOffset, y, cell.text, style);
+}
+function clampScrollTop(scrollTop, totalHeight, viewportHeight) {
+    const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
+    if (!Number.isFinite(scrollTop) || scrollTop <= 0)
+        return 0;
+    if (scrollTop >= maxScrollTop)
+        return maxScrollTop;
+    return scrollTop;
+}
+function clampIndexScrollTop(scrollTop, totalRows, viewportHeight) {
+    return Math.trunc(clampScrollTop(scrollTop, totalRows, viewportHeight));
+}
+function normalizeMeasuredItemHeight(height) {
+    if (!Number.isFinite(height) || height <= 0)
+        return undefined;
+    return Math.max(1, Math.trunc(height));
 }
-export function renderCollectionWidget(builder, focusState, rect, theme, tick, parentStyle, node, nodeStack, styleStack, virtualListStore, tableStore, treeStore, loadedTreeChildrenById, tableRenderCacheById) {
+function setLayoutScrollMetadata(layoutNode, patch) {
+    const prev = layoutNode.meta;
+    const next = Object.freeze({
+        scrollX: patch.scrollX ?? (typeof prev?.scrollX === "number" ? prev.scrollX : 0),
+        scrollY: patch.scrollY ?? (typeof prev?.scrollY === "number" ? prev.scrollY : 0),
+        contentWidth: patch.contentWidth ?? (typeof prev?.contentWidth === "number" ? prev.contentWidth : 0),
+        contentHeight: patch.contentHeight ?? (typeof prev?.contentHeight === "number" ? prev.contentHeight : 0),
+        viewportWidth: patch.viewportWidth ?? (typeof prev?.viewportWidth === "number" ? prev.viewportWidth : 0),
+        viewportHeight: patch.viewportHeight ?? (typeof prev?.viewportHeight === "number" ? prev.viewportHeight : 0),
+    });
+    layoutNode.meta = next;
+}
+export function renderCollectionWidget(builder, focusState, rect, theme, tick, parentStyle, node, layoutNode, nodeStack, styleStack, virtualListStore, tableStore, treeStore, loadedTreeChildrenById, tableRenderCacheById) {
     const vnode = node.vnode;
     switch (vnode.kind) {
         case "virtualList": {
             if (!isVisibleRect(rect))
                 break;
             const props = vnode.props;
-            const { items, itemHeight, overscan = 3, renderItem } = props;
+            const focusConfig = readFocusConfig(props.focusConfig);
+            const showFocusIndicator = focusIndicatorEnabled(focusConfig);
+            const colorTokens = getColorTokens(theme);
+            const selectionStyle = asTextStyle(props.selectionStyle, theme);
+            const { items, overscan = 3, renderItem } = props;
+            const itemHeight = resolveVirtualListItemHeightSpec(props);
+            const estimateMode = props.estimateItemHeight !== undefined;
             // Get virtual list state (scrollTop, selectedIndex)
             const state = virtualListStore
                 ? virtualListStore.get(props.id)
                 : { scrollTop: 0, selectedIndex: 0, viewportHeight: rect.h, startIndex: 0, endIndex: 0 };
-            // Compute visible range with overscan
-            const { startIndex, endIndex, itemOffsets } = computeVisibleRange(items, itemHeight, state.scrollTop, rect.h, overscan);
-            // Update state with viewport dimensions if store is available
-            if (virtualListStore) {
-                virtualListStore.set(props.id, {
-                    viewportHeight: rect.h,
-                    startIndex,
-                    endIndex,
-                });
+            const measuredHeights = estimateMode &&
+                state.measuredHeights !== undefined &&
+                state.measuredWidth === rect.w &&
+                state.measuredItemCount === items.length
+                ? state.measuredHeights
+                : undefined;
+            const totalHeight = getTotalHeight(items, itemHeight, measuredHeights);
+            const effectiveScrollTop = clampScrollTop(state.scrollTop, totalHeight, rect.h);
+            const fixedItemHeight = !estimateMode && measuredHeights === undefined && typeof itemHeight === "number"
+                ? itemHeight > 0
+                    ? itemHeight
+                    : 1
+                : null;
+            let startIndex = 0;
+            let endIndex = 0;
+            let itemOffsets = [];
+            if (fixedItemHeight === null) {
+                const computed = computeVisibleRange(items, itemHeight, effectiveScrollTop, rect.h, overscan, measuredHeights);
+                startIndex = computed.startIndex;
+                endIndex = computed.endIndex;
+                itemOffsets = computed.itemOffsets;
             }
+            else {
+                const safeOverscan = Math.max(0, overscan);
+                const rawStart = Math.floor(effectiveScrollTop / fixedItemHeight);
+                const rawEnd = Math.ceil((effectiveScrollTop + rect.h) / fixedItemHeight);
+                startIndex = Math.max(0, rawStart - safeOverscan);
+                endIndex = Math.min(items.length, rawEnd + safeOverscan);
+            }
+            let nextScrollTop = effectiveScrollTop;
+            let nextMeasuredHeights;
+            let changedMeasuredHeights = false;
+            let deltaAboveViewport = 0;
+            const updateMeasuredHeight = (index, value) => {
+                const normalized = normalizeMeasuredItemHeight(value);
+                if (normalized === undefined)
+                    return;
+                const current = normalizeMeasuredItemHeight((nextMeasuredHeights ?? measuredHeights)?.get(index) ?? 0);
+                if (current === normalized)
+                    return;
+                if (nextMeasuredHeights === undefined) {
+                    nextMeasuredHeights = new Map(measuredHeights ?? []);
+                }
+                nextMeasuredHeights.set(index, normalized);
+                changedMeasuredHeights = true;
+                const priorHeight = getItemHeight(items, itemHeight, index, measuredHeights);
+                const itemBottom = itemOffsets[index + 1] ?? 0;
+                if (itemBottom <= effectiveScrollTop) {
+                    deltaAboveViewport += normalized - priorHeight;
+                }
+            };
             // Apply clip rect for viewport
             builder.pushClip(rect.x, rect.y, rect.w, rect.h);
             nodeStack.push(null);
@@ -77,16 +199,91 @@ export function renderCollectionWidget(builder, focusState, rect, theme, tick, p
                 const item = items[i];
                 if (item === undefined)
                     continue;
-                const h = getItemHeight(items, itemHeight, i);
-                const itemOffset = itemOffsets[i] ?? getItemOffset(items, itemHeight, i);
-                const itemY = rect.y + itemOffset - state.scrollTop;
-                const focused = i === state.selectedIndex;
+                const h = fixedItemHeight ?? getItemHeight(items, itemHeight, i, measuredHeights);
+                const itemOffset = fixedItemHeight === null
+                    ? (itemOffsets[i] ?? getItemOffset(items, itemHeight, i, measuredHeights))
+                    : i * fixedItemHeight;
+                const itemY = rect.y + itemOffset - effectiveScrollTop;
+                const selected = i === state.selectedIndex;
+                const focused = selected && showFocusIndicator;
                 // Skip if item outside viewport (safety check)
                 if (itemY + h < rect.y || itemY >= rect.y + rect.h)
                     continue;
+                let itemParentStyle = parentStyle;
+                if (selected && selectionStyle) {
+                    itemParentStyle = mergeTextStyle(itemParentStyle, selectionStyle);
+                }
+                if (focused) {
+                    const widgetFocusStyle = resolveWidgetFocusStyle(colorTokens, true, false, theme.focusIndicator);
+                    if (widgetFocusStyle) {
+                        itemParentStyle = mergeTextStyle(itemParentStyle, widgetFocusStyle);
+                    }
+                    itemParentStyle = resolveFocusedContentStyle(itemParentStyle, theme, focusConfig);
+                    const focusIndicator = readFocusIndicator(focusConfig);
+                    if (focusIndicator === "background") {
+                        const indicatorStyle = resolveFocusIndicatorStyle(parentStyle, theme, focusConfig, mergeTextStyle(parentStyle, {
+                            bg: colorTokens?.focus.bg ?? theme.colors.secondary,
+                        }));
+                        const rowBg = indicatorStyle.bg;
+                        if (rowBg !== undefined) {
+                            builder.fillRect(rect.x, itemY, rect.w, h, { bg: rowBg });
+                        }
+                    }
+                    else if (selectionStyle?.bg !== undefined) {
+                        builder.fillRect(rect.x, itemY, rect.w, h, { bg: selectionStyle.bg });
+                    }
+                }
+                else if (selected && selectionStyle?.bg !== undefined) {
+                    builder.fillRect(rect.x, itemY, rect.w, h, { bg: selectionStyle.bg });
+                }
                 // Render item to text
                 const itemVNode = renderItem(item, i, focused);
-                renderVNodeSimple(builder, itemVNode, rect.x, itemY, rect.w, h, focused, tick, theme, parentStyle);
+                renderVNodeSimple(builder, itemVNode, rect.x, itemY, rect.w, h, focused, tick, theme, itemParentStyle);
+                if (estimateMode) {
+                    const measuredHeight = typeof props.measureItemHeight === "function"
+                        ? props.measureItemHeight(item, i, {
+                            width: rect.w,
+                            estimatedHeight: h,
+                            vnode: itemVNode,
+                        })
+                        : measureVNodeSimpleHeight(itemVNode, rect.w);
+                    updateMeasuredHeight(i, measuredHeight);
+                }
+            }
+            const renderedStartIndex = startIndex;
+            const renderedEndIndex = endIndex;
+            let finalMeasuredHeights = measuredHeights;
+            let finalTotalHeight = totalHeight;
+            if (changedMeasuredHeights && nextMeasuredHeights !== undefined) {
+                finalMeasuredHeights = nextMeasuredHeights;
+                finalTotalHeight = getTotalHeight(items, itemHeight, finalMeasuredHeights);
+                nextScrollTop = clampScrollTop(effectiveScrollTop + deltaAboveViewport, finalTotalHeight, rect.h);
+            }
+            setLayoutScrollMetadata(layoutNode, {
+                scrollX: 0,
+                // Keep metadata aligned with what this frame actually rendered.
+                // Any scroll correction from fresh measurements is applied on the next frame.
+                scrollY: effectiveScrollTop,
+                contentWidth: rect.w,
+                contentHeight: finalTotalHeight,
+                viewportWidth: rect.w,
+                viewportHeight: rect.h,
+            });
+            // Update state with viewport dimensions if store is available
+            if (virtualListStore) {
+                const patch = {
+                    viewportHeight: rect.h,
+                    startIndex: renderedStartIndex,
+                    endIndex: renderedEndIndex,
+                };
+                if (nextScrollTop !== state.scrollTop)
+                    patch.scrollTop = nextScrollTop;
+                if (estimateMode) {
+                    patch.measuredHeights = finalMeasuredHeights ?? new Map();
+                    patch.measuredWidth = rect.w;
+                    patch.measuredItemCount = items.length;
+                }
+                virtualListStore.set(props.id, patch);
             }
             break;
         }
@@ -94,9 +291,36 @@ export function renderCollectionWidget(builder, focusState, rect, theme, tick, p
             if (!isVisibleRect(rect))
                 break;
             const props = vnode.props;
-            const border = props.border === "none" ? "none" : "single";
-            if (border === "single")
-                renderBoxBorder(builder, rect, "single", undefined, "left", parentStyle);
+            const focusConfig = readFocusConfig(props.focusConfig);
+            const showFocusIndicator = focusIndicatorEnabled(focusConfig);
+            const colorTokens = getColorTokens(theme);
+            const selectionStyle = asTextStyle(props.selectionStyle, theme);
+            const dsSize = readWidgetSize(props.dsSize) ?? "md";
+            const headerRecipe = colorTokens !== null
+                ? tableRecipe(colorTokens, { state: "header", size: dsSize, spacing: theme.spacing })
+                : null;
+            const rowRecipe = colorTokens !== null
+                ? tableRecipe(colorTokens, { state: "row", size: dsSize, spacing: theme.spacing })
+                : null;
+            const stripeRecipe = colorTokens !== null
+                ? tableRecipe(colorTokens, { state: "stripe", size: dsSize, spacing: theme.spacing })
+                : null;
+            const selectedRecipe = colorTokens !== null
+                ? tableRecipe(colorTokens, { state: "selectedRow", size: dsSize, spacing: theme.spacing })
+                : null;
+            const focusedRecipe = colorTokens !== null
+                ? tableRecipe(colorTokens, { state: "focusedRow", size: dsSize, spacing: theme.spacing })
+                : null;
+            const selectionBg = selectionStyle?.bg ??
+                (colorTokens !== null ? selectedRecipe?.bg.bg : theme.colors.secondary);
+            const borderVariant = readTableBorderVariant(props.borderStyle?.variant);
+            const border = props.border === "none" ? "none" : borderVariant === undefined ? "single" : borderVariant;
+            if (border !== "none") {
+                const borderStyle = props.borderStyle?.color
+                    ? mergeTextStyle(parentStyle, { fg: props.borderStyle.color })
+                    : parentStyle;
+                renderBoxBorder(builder, rect, border, undefined, "left", borderStyle);
+            }
             const headerHeight = props.showHeader === false ? 0 : (props.headerHeight ?? 1);
             const rowHeight = props.rowHeight ?? 1;
             const safeRowHeight = rowHeight > 0 ? rowHeight : 1;
@@ -104,7 +328,10 @@ export function renderCollectionWidget(builder, focusState, rect, theme, tick, p
             const selection = (props.selection ?? EMPTY_STRING_ARRAY);
             const selectionMode = props.selectionMode ?? "none";
             const virtualized = props.virtualized !== false;
-            const stripedRows = props.stripedRows === true;
+            const stripedRows = props.stripedRows === true || props.stripeStyle !== undefined;
+            const stripeOddBg = props.stripeStyle?.odd ??
+                (colorTokens !== null ? stripeRecipe?.bg.bg : theme.colors.border);
+            const stripeEvenBg = props.stripeStyle?.even ?? rowRecipe?.bg.bg;
             const tableCache = tableRenderCacheById?.get(props.id);
             const cachedRowKeys = tableCache?.rowKeys;
             const cachedSelectionSet = tableCache?.selectionSet;
@@ -130,6 +357,9 @@ export function renderCollectionWidget(builder, focusState, rect, theme, tick, p
             const { widths } = distributeColumnWidths(props.columns, innerW);
             // Header
             if (headerHeight > 0 && innerW > 0) {
+                if (headerRecipe?.bg.bg) {
+                    builder.fillRect(innerX, innerY, innerW, headerHeight, mergeTextStyle(parentStyle, headerRecipe.bg));
+                }
                 let xCursor = innerX;
                 for (let i = 0; i < props.columns.length; i++) {
                     const col = props.columns[i];
@@ -143,23 +373,38 @@ export function renderCollectionWidget(builder, focusState, rect, theme, tick, p
                         : "";
                     const headerText = `${col.header ?? ""}${sortIndicator}`;
                     const headerAlign = readCellAlign(col.align);
-                    const cell = alignCellContent(headerText, w, headerAlign);
-                    const headerStyle0 = sortIndicator.length > 0
-                        ? mergeTextStyle(parentStyle, { bold: true, fg: theme.colors.info })
-                        : mergeTextStyle(parentStyle, { bold: true });
-                    const isHeaderFocused = focusState.focusedId === props.id &&
+                    const overflow = readCellOverflow(col.overflow);
+                    const cell = alignCellContent(headerText, w, headerAlign, overflow);
+                    const headerStyle0 = colorTokens !== null
+                        ? mergeTextStyle(mergeTextStyle(parentStyle, headerRecipe?.cell), sortIndicator.length > 0 ? { underline: true } : undefined)
+                        : sortIndicator.length > 0
+                            ? mergeTextStyle(parentStyle, { bold: true, fg: theme.colors.info })
+                            : mergeTextStyle(parentStyle, { bold: true });
+                    const isHeaderFocused = showFocusIndicator &&
+                        focusState.focusedId === props.id &&
                         tableState.focusedRowIndex === -1 &&
                         i === tableState.focusedColumnIndex;
                     const headerStyle = isHeaderFocused
-                        ? mergeTextStyle(headerStyle0, { inverse: true })
+                        ? resolveFocusedContentStyle(resolveFocusIndicatorStyle(headerStyle0, theme, focusConfig, mergeTextStyle(headerStyle0, { inverse: true })), theme, focusConfig)
                         : headerStyle0;
-                    builder.drawText(xCursor, innerY, cell, headerStyle);
+                    drawAlignedCellText(builder, xCursor, innerY, w, headerHeight, cell, headerStyle);
                     xCursor += w;
                 }
             }
             // Visible rows
             const rowCount = props.data.length;
-            const effectiveScrollTop = virtualized ? tableState.scrollTop : 0;
+            const totalBodyHeight = rowCount * safeRowHeight;
+            const effectiveScrollTop = virtualized
+                ? clampScrollTop(tableState.scrollTop, totalBodyHeight, bodyH)
+                : 0;
+            setLayoutScrollMetadata(layoutNode, {
+                scrollX: 0,
+                scrollY: effectiveScrollTop,
+                contentWidth: innerW,
+                contentHeight: totalBodyHeight,
+                viewportWidth: innerW,
+                viewportHeight: bodyH,
+            });
             const startIndex = virtualized
                 ? Math.max(0, Math.floor(effectiveScrollTop / safeRowHeight))
                 : 0;
@@ -167,6 +412,27 @@ export function renderCollectionWidget(builder, focusState, rect, theme, tick, p
             const endIndex = virtualized
                 ? Math.min(rowCount, startIndex + visibleRows + overscan)
                 : rowCount;
+            if (FRAME_AUDIT_ENABLED) {
+                emitFrameAudit("tableWidget", "table.layout", Object.freeze({
+                    tableId: props.id,
+                    x: rect.x,
+                    y: rect.y,
+                    w: rect.w,
+                    h: rect.h,
+                    innerW,
+                    innerH,
+                    bodyY,
+                    bodyH,
+                    rowCount,
+                    headerHeight,
+                    rowHeight: safeRowHeight,
+                    virtualized,
+                    startIndex,
+                    endIndex,
+                    visibleRows,
+                    overscan,
+                }));
+            }
             if (tableStore) {
                 tableStore.set(props.id, { viewportHeight: bodyH, startIndex, endIndex });
             }
@@ -186,16 +452,33 @@ export function renderCollectionWidget(builder, focusState, rect, theme, tick, p
                     }
                 }
                 const isFocusedRow = focusState.focusedId === props.id && i === tableState.focusedRowIndex;
+                const suppressFocusedStyle = selectionMode === "single" && needsSelection && isFocusedRow && !isSelected;
+                const showFocusedStyle = showFocusIndicator && isFocusedRow && !suppressFocusedStyle;
                 const yRow = bodyY + i * safeRowHeight - effectiveScrollTop;
                 if (yRow >= bodyY + bodyH)
                     break;
                 if (yRow + safeRowHeight <= bodyY)
                     continue;
-                const rowStripeBg = stripedRows && (i & 1) === 1 ? theme.colors.border : undefined;
-                const rowBg = isFocusedRow ? undefined : isSelected ? theme.colors.secondary : rowStripeBg;
+                let focusedRowStyle = parentStyle;
+                if (showFocusedStyle) {
+                    const focusFallback = mergeTextStyle(colorTokens !== null
+                        ? mergeTextStyle(parentStyle, focusedRecipe?.cell)
+                        : mergeTextStyle(parentStyle, { inverse: true }), resolveWidgetFocusStyle(colorTokens, true, false, theme.focusIndicator));
+                    focusedRowStyle = resolveFocusedContentStyle(resolveFocusIndicatorStyle(parentStyle, theme, focusConfig, focusFallback), theme, focusConfig);
+                }
+                const focusedRowBg = colorTokens !== null ? focusedRecipe?.bg.bg : focusedRowStyle.bg;
+                const rowStripeBg = stripedRows ? ((i & 1) === 1 ? stripeOddBg : stripeEvenBg) : undefined;
+                const rowBg = showFocusedStyle
+                    ? focusedRowBg
+                    : isSelected
+                        ? selectionBg
+                        : (rowStripeBg ?? (colorTokens !== null ? rowRecipe?.bg.bg : undefined));
                 if (rowBg) {
                     builder.fillRect(innerX, yRow, innerW, safeRowHeight, { bg: rowBg });
                 }
+                if (showFocusedStyle && rowBg) {
+                    focusedRowStyle = mergeTextStyle(focusedRowStyle, { bg: rowBg });
+                }
                 let xCursor = innerX;
                 for (let c = 0; c < props.columns.length; c++) {
                     const col = props.columns[c];
@@ -210,16 +493,28 @@ export function renderCollectionWidget(builder, focusState, rect, theme, tick, p
                             : typeof rawValue === "string"
                                 ? rawValue
                                 : String(rawValue);
-                    const style = isFocusedRow ? { inverse: true } : rowBg ? { bg: rowBg } : undefined;
+                    const rowSelectedStyle = !showFocusedStyle && isSelected && selectionStyle
+                        ? mergeTextStyle(parentStyle, selectionStyle)
+                        : colorTokens !== null
+                            ? mergeTextStyle(mergeTextStyle(parentStyle, isSelected
+                                ? selectedRecipe?.cell
+                                : rowStripeBg
+                                    ? stripeRecipe?.cell
+                                    : rowRecipe?.cell), rowBg ? { bg: rowBg } : undefined)
+                            : rowBg
+                                ? mergeTextStyle(parentStyle, { bg: rowBg })
+                                : parentStyle;
+                    const cellStyle = showFocusedStyle ? focusedRowStyle : rowSelectedStyle;
                     if (col.render) {
                         const cellVNode = col.render(rawValue, row, i);
-                        renderVNodeSimple(builder, cellVNode, xCursor, yRow, w, safeRowHeight, isFocusedRow, tick, theme, mergeTextStyle(parentStyle, style));
+                        renderVNodeSimple(builder, cellVNode, xCursor, yRow, w, safeRowHeight, isFocusedRow, tick, theme, cellStyle);
                     }
                     else {
                         const t0 = cellText ?? "";
                         const align = readCellAlign(col.align);
-                        const cell = alignCellContent(t0, w, align);
-                        builder.drawText(xCursor, yRow, cell, mergeTextStyle(parentStyle, style));
+                        const overflow = readCellOverflow(col.overflow);
+                        const cell = alignCellContent(t0, w, align, overflow);
+                        drawAlignedCellText(builder, xCursor, yRow, w, safeRowHeight, cell, cellStyle);
                     }
                     xCursor += w;
                 }
@@ -282,11 +577,56 @@ export function renderCollectionWidget(builder, focusState, rect, theme, tick, p
                         }),
                     });
             }
-            const startIndex = Math.max(0, state.scrollTop);
+            const effectiveScrollTop = clampIndexScrollTop(state.scrollTop, flatNodes.length, rect.h);
+            const startIndex = Math.max(0, effectiveScrollTop);
             const endIndex = Math.min(flatNodes.length, startIndex + rect.h);
+            setLayoutScrollMetadata(layoutNode, {
+                scrollX: 0,
+                scrollY: effectiveScrollTop,
+                contentWidth: rect.w,
+                contentHeight: flatNodes.length,
+                viewportWidth: rect.w,
+                viewportHeight: rect.h,
+            });
             builder.pushClip(rect.x, rect.y, rect.w, rect.h);
             nodeStack.push(null);
             const focusedTree = focusState.focusedId === props.id;
+            const colorTokens = getColorTokens(theme);
+            const dsVariant = readWidgetVariant(props.dsVariant) ?? "ghost";
+            const dsTone = readWidgetTone(props.dsTone) ?? "default";
+            const dsSize = readWidgetSize(props.dsSize) ?? "md";
+            const treeDefaultRecipe = colorTokens !== null
+                ? treeRecipe(colorTokens, {
+                    variant: dsVariant,
+                    tone: dsTone,
+                    size: dsSize,
+                    state: "default",
+                })
+                : null;
+            const treeSelectedRecipe = colorTokens !== null
+                ? treeRecipe(colorTokens, {
+                    variant: dsVariant,
+                    tone: dsTone,
+                    size: dsSize,
+                    state: "selected",
+                })
+                : null;
+            const treeFocusedRecipe = colorTokens !== null
+                ? treeRecipe(colorTokens, {
+                    variant: dsVariant,
+                    tone: dsTone,
+                    size: dsSize,
+                    state: "focus",
+                })
+                : null;
+            const treeDisabledRecipe = colorTokens !== null
+                ? treeRecipe(colorTokens, {
+                    variant: dsVariant,
+                    tone: dsTone,
+                    size: dsSize,
+                    state: "disabled",
+                })
+                : null;
             const showLines = props.showLines !== false;
             const indentSize = props.indentSize ?? 2;
             const prefixes = getTreePrefixes(treeStore, props.id, state, flatNodes, showLines, indentSize);
@@ -295,12 +635,28 @@ export function renderCollectionWidget(builder, focusState, rect, theme, tick, p
                 if (!fn)
                     continue;
                 const ns = computeNodeState(fn, props.expanded, props.selected, focusedTree ? (state.focusedKey ?? props.selected) : undefined, state.loadingKeys, expandedSet);
-                const yRow = rect.y + (i - state.scrollTop);
+                const yRow = rect.y + (i - effectiveScrollTop);
                 const prefix = prefixes[i] ?? "";
                 const prefixW = measureTextCells(prefix);
-                builder.drawText(rect.x, yRow, prefix, mergeTextStyle(parentStyle, { fg: theme.colors.muted }));
+                const rowRecipe = ns.loading
+                    ? treeDisabledRecipe
+                    : ns.focused
+                        ? treeFocusedRecipe
+                        : ns.selected
+                            ? treeSelectedRecipe
+                            : treeDefaultRecipe;
+                const rowBg = rowRecipe?.bg.bg;
+                if (rowBg !== undefined) {
+                    builder.fillRect(rect.x, yRow, rect.w, 1, { bg: rowBg });
+                }
+                const prefixStyle = mergeTextStyle(parentStyle, rowRecipe?.prefix ?? { fg: theme.colors.muted });
+                builder.drawText(rect.x, yRow, prefix, prefixStyle);
                 const nodeVNode = props.renderNode(fn.node, fn.depth, ns);
-                renderVNodeSimple(builder, nodeVNode, rect.x + prefixW, yRow, rect.w - prefixW, 1, ns.focused, tick, theme, parentStyle);
+                let nodeParentStyle = mergeTextStyle(parentStyle, rowRecipe?.node);
+                if (rowBg !== undefined) {
+                    nodeParentStyle = mergeTextStyle(nodeParentStyle, { bg: rowBg });
+                }
+                renderVNodeSimple(builder, nodeVNode, rect.x + prefixW, yRow, rect.w - prefixW, 1, ns.focused, tick, theme, nodeParentStyle);
             }
             break;
         }