entasis 0.9.2 → 0.10.0

package/dist/components/Chart/chart.proportion.js

@@ -11,7 +11,9 @@ export function compileProportion({ data, mark, path, category, value }) {
         : compileArcs(summaries, variant, id);
 }
 export function isProportionDatum(value) {
-    return (typeof value === 'object' && value !== null && Reflect.get(value, '__entasisProportion') === true);
+    return (typeof value === 'object' &&
+        value !== null &&
+        Reflect.get(value, '__entasisProportion') === true);
 }
 function normalizeProportionVariant(mark, path) {
     const input = mark.variant;
@@ -119,8 +121,11 @@ function compileArcs(summaries, variant, id) {
             })
         ],
         scales: { angle: null, radius: null },
-        inset: 16,
-        radiusRatio: 0.92
+        // A pie has no guides or outside labels to make room for (the legend lives outside the
+        // plot), so it fills the plot like any other mark. The inset only keeps the outer half of
+        // the slice separator stroke inside the plot.
+        inset: arcOptions.strokeWidth,
+        radiusRatio: 1
     });
     return [base];
 }
@@ -162,9 +167,10 @@ function waffleMark(summaries, cells, variant, id) {
                 seriesFromColor: true,
                 render({ chart, color: resolveColor }) {
                     const rows = Math.ceil(variant.cells / variant.columns);
-                    const side = Math.min(chart.width, chart.height) * 0.86;
-                    const gap = Math.min(variant.gap, side / (Math.max(variant.columns, rows) * 2));
-                    const size = Math.max(0, Math.min((side - gap * (variant.columns - 1)) / variant.columns, (side - gap * (rows - 1)) / rows));
+                    // Square cells as large as the plot allows: the grid fills the plot's width or its
+                    // height, whichever runs out first, and centres on the other.
+                    const gap = Math.min(variant.gap, Math.min(chart.width / variant.columns, chart.height / rows) / 2);
+                    const size = Math.max(0, Math.min((chart.width - gap * (variant.columns - 1)) / variant.columns, (chart.height - gap * (rows - 1)) / rows));
                     const width = size * variant.columns + gap * (variant.columns - 1);
                     const height = size * rows + gap * (rows - 1);
                     const originX = chart.x + (chart.width - width) / 2;

package/dist/components/Chart/chart.relation.network.js

@@ -1,5 +1,6 @@
 import { forceCenter, forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY } from 'd3-force';
 import { compileRelationEdges } from './chart.relation.data.js';
+import { axisFraction, estimateLabelWidth, fitAxis, LABEL_LINE_BOX } from './chart.fit.js';
 import { compileRelationPointMarks } from './chart.relation.marks.js';
 export function compileNetworkRelation(data, mark, compiled, path, width, height) {
     const relations = compileRelationEdges(data, compiled, mark, path);
@@ -23,10 +24,37 @@ export function compileNetworkRelation(data, mark, compiled, path, width, height
         .force('y', forceY(height / 2).strength(0.035))
         .stop();
     simulation.tick(300);
-    const padding = radius + compiled.labels.fontSize + 16;
-    const positionedNodes = nodes.map((node) => {
-        const x = clamp(coordinate(node.x, node.id, 'x'), padding, Math.max(padding, width - padding));
-        const y = clamp(coordinate(node.y, node.id, 'y'), padding, Math.max(padding, height - padding));
+    // The simulation settles a shape around the centre at whatever size its forces give it; fit
+    // that shape to the plot on each axis, leaving room for the labels drawn above the nodes.
+    const labels = compiled.labels;
+    const settled = nodes.map((node) => ({
+        node,
+        x: coordinate(node.x, node.id, 'x'),
+        y: coordinate(node.y, node.id, 'y'),
+        labelWidth: labels.enabled
+            ? estimateLabelWidth(node.label, labels.fontSize, labels.fontWeight)
+            : 0
+    }));
+    const xs = settled.map((node) => node.x);
+    const ys = settled.map((node) => node.y);
+    const [xMin, xMax, yMin, yMax] = [
+        Math.min(...xs),
+        Math.max(...xs),
+        Math.min(...ys),
+        Math.max(...ys)
+    ];
+    const xFit = fitAxis(settled.map((node) => {
+        const extent = Math.max(radius, node.labelWidth / 2);
+        return { fraction: axisFraction(node.x, xMin, xMax), before: extent, after: extent };
+    }), width);
+    const yFit = fitAxis(settled.map((node) => ({
+        fraction: axisFraction(node.y, yMin, yMax),
+        before: labels.enabled ? radius + 10 + labels.fontSize * LABEL_LINE_BOX.middle.above : radius,
+        after: radius
+    })), height);
+    const positionedNodes = settled.map(({ node, x: settledX, y: settledY }) => {
+        const x = xFit.start + axisFraction(settledX, xMin, xMax) * xFit.span;
+        const y = yFit.start + axisFraction(settledY, yMin, yMax) * yFit.span;
         return {
             ...node,
             kind: 'relation-node',

package/dist/components/Chart/chart.relation.sankey.js

@@ -3,23 +3,22 @@ import { sankey, sankeyCenter, sankeyJustify, sankeyLeft, sankeyRight } from 'd3
 import { curveBumpX } from 'd3-shape';
 import { compileColor } from './chart.channels.js';
 import { compileRelationEdges } from './chart.relation.data.js';
+import { axisFraction, CHART_FIT_MARGIN, estimateLabelWidth, fitAxis, LABEL_LINE_BOX } from './chart.fit.js';
 import { withoutTooltipPoints } from './chart.mark.js';
 export function compileSankeyRelation(data, mark, compiled, path, width, height) {
     const relations = compileRelationEdges(data, compiled, mark, path);
-    const labelSpace = compiled.labels.enabled ? clamp(width * 0.12, 64, 112) : 24;
-    const top = clamp(height * 0.06, 20, 36);
-    const bottom = top;
+    const labels = compiled.labels;
     const nodeWidth = mark.nodeWidth ?? clamp(width * 0.022, 10, 22);
     const nodeGap = mark.nodeGap ?? clamp(height * 0.055, 10, 30);
-    const graph = sankey()
+    const layout = (top, bottom) => sankey()
         .nodeId((node) => node.identity)
         .nodeAlign(resolveAlignment(mark.align))
         .nodeSort((left, right) => left.index - right.index)
         .nodeWidth(nodeWidth)
         .nodePadding(nodeGap)
         .extent([
-        [labelSpace, top],
-        [Math.max(labelSpace + 1, width - labelSpace), Math.max(top + 1, height - bottom)]
+        [0, top],
+        [width, Math.max(top + 1, height - bottom)]
     ])
         .iterations(32)({
         nodes: compiled.nodes.map((node) => ({ ...node })),
@@ -30,10 +29,58 @@ export function compileSankeyRelation(data, mark, compiled, path, width, height)
             relation
         }))
     });
+    let graph = layout(CHART_FIT_MARGIN, CHART_FIT_MARGIN);
+    // Labels are centred on their node, so only a node shorter than a line pushes its label past
+    // the plot edge. Lay out again with exactly that overhang reserved.
+    const overhang = labelOverhang(graph.nodes, labels, height);
+    if (overhang.top > 0.5 || overhang.bottom > 0.5) {
+        graph = layout(CHART_FIT_MARGIN + overhang.top, CHART_FIT_MARGIN + overhang.bottom);
+    }
+    fitColumns(graph.nodes, nodeWidth, labels, width);
     const nodes = graph.nodes.map((node) => compileNode(node, width));
     const links = graph.links.map(compileLink);
     return compileSankeyMarks(nodes, links, mark, compiled.labels, path);
 }
+function labelOverhang(nodes, labels, height) {
+    if (!labels.enabled)
+        return { top: 0, bottom: 0 };
+    const above = labels.fontSize * LABEL_LINE_BOX.middle.above;
+    const below = labels.fontSize * LABEL_LINE_BOX.middle.below;
+    let top = 0;
+    let bottom = 0;
+    for (const node of nodes) {
+        const { y0, y1 } = resolveNodeBounds(node);
+        const middle = (y0 + y1) / 2;
+        top = Math.max(top, CHART_FIT_MARGIN - (middle - above));
+        bottom = Math.max(bottom, middle + below - (height - CHART_FIT_MARGIN));
+    }
+    return { top, bottom };
+}
+// Columns are placed evenly across the plot, which leaves the outer labels to overflow or, with
+// guessed margins, a gap. Re-place them so the widest outer labels reach the plot edges: a
+// source's label sits left of its node, every other label to the right.
+function fitColumns(nodes, nodeWidth, labels, width) {
+    const columns = nodes.map((node) => resolveNodeBounds(node).x0);
+    const first = Math.min(...columns);
+    const last = Math.max(...columns);
+    const placed = nodes.map((node, index) => {
+        const label = labels.enabled
+            ? 7 + estimateLabelWidth(node.label, labels.fontSize, labels.fontWeight)
+            : 0;
+        const labelOnLeft = (node.targetLinks?.length ?? 0) === 0;
+        return {
+            node,
+            fraction: axisFraction(columns[index] ?? first, first, last),
+            before: labelOnLeft ? label : 0,
+            after: nodeWidth + (labelOnLeft ? 0 : label)
+        };
+    });
+    const fit = fitAxis(placed, width);
+    for (const { node, fraction } of placed) {
+        node.x0 = fit.start + fraction * fit.span;
+        node.x1 = node.x0 + nodeWidth;
+    }
+}
 function compileSankeyMarks(nodes, links, mark, labels, path) {
     const linkMark = link(links, {
         id: `${mark.id ?? path}:links`,

package/dist/components/Chart/chart.relation.tree.js

@@ -1,6 +1,7 @@
 import { stratify, tree } from 'd3-hierarchy';
 import { compileChannel } from './chart.channels.js';
 import { relationKeyIdentity } from './chart.relation.data.js';
+import { axisFraction, estimateLabelWidth, fitAxis, LABEL_LINE_BOX } from './chart.fit.js';
 import { compileRelationPointMarks } from './chart.relation.marks.js';
 export function compileTreeRelation(data, mark, compiled, path, width, height) {
     if (compiled.nodes.length === 0) {
@@ -26,16 +27,74 @@ export function compileTreeRelation(data, mark, compiled, path, width, height) {
         .parentId((node) => node.parentIdentity)(sourceNodes);
     const orientation = mark.orientation ?? 'horizontal';
     const radius = mark.nodeRadius ?? 5;
-    const padding = clamp(Math.min(width, height) * 0.06, 24, 48);
-    const labelSpace = compiled.labels.enabled ? clamp(width * 0.13, 64, 120) : padding;
     const horizontal = orientation === 'horizontal';
-    const breadth = Math.max(1, (horizontal ? height : width) - padding * 2);
-    const depth = Math.max(1, horizontal ? width - labelSpace * 2 : height - padding * 2);
-    const layoutRoot = tree().size([breadth, depth])(root);
-    const nodes = layoutRoot.descendants().map((node) => {
-        const x = horizontal ? labelSpace + node.y : padding + node.x;
-        const y = horizontal ? padding + node.x : padding + node.y;
+    const labels = compiled.labels;
+    // d3 spaces the tree on a unit grid; the fit below maps it onto the plot. Only the relative
+    // positions matter here, and d3's half-separation gaps at the edges are dropped.
+    const layoutRoot = tree().size([1, 1])(root);
+    const layoutNodes = layoutRoot.descendants();
+    const breadthValues = layoutNodes.map((node) => node.x);
+    const breadthMin = Math.min(...breadthValues);
+    const breadthMax = Math.max(...breadthValues);
+    const maxDepth = layoutRoot.height;
+    const placed = layoutNodes.map((node) => {
         const internal = node.children !== undefined;
+        const labelWidth = labels.enabled
+            ? estimateLabelWidth(node.data.label, labels.fontSize, labels.fontWeight)
+            : 0;
+        return {
+            node,
+            internal,
+            labelWidth,
+            breadth: axisFraction(node.x, breadthMin, breadthMax),
+            depth: maxDepth > 0 ? node.depth / maxDepth : 0.5
+        };
+    });
+    // Horizontal: internal labels sit left of their node and leaf labels right, both centred on
+    // it vertically. Vertical: labels are centred on the node, above internal nodes and below
+    // leaves. Each axis is fitted to the extents those labels add around the nodes.
+    const lineAbove = labels.enabled ? labels.fontSize * LABEL_LINE_BOX.middle.above : 0;
+    const lineBelow = labels.enabled ? labels.fontSize * LABEL_LINE_BOX.middle.below : 0;
+    const depthFit = fitAxis(placed.map(({ depth, internal, labelWidth }) => {
+        if (!labels.enabled)
+            return { fraction: depth, before: radius, after: radius };
+        if (horizontal) {
+            return {
+                fraction: depth,
+                before: internal ? radius + 7 + labelWidth : radius,
+                after: internal ? radius : radius + 7 + labelWidth
+            };
+        }
+        return {
+            fraction: depth,
+            before: internal ? radius + 8 + lineAbove : radius,
+            after: internal ? radius : radius + 10 + lineBelow
+        };
+    }), horizontal ? width : height);
+    const breadthFit = fitAxis(placed.map(({ breadth, labelWidth }) => {
+        if (horizontal) {
+            return {
+                fraction: breadth,
+                before: Math.max(radius, lineAbove),
+                after: Math.max(radius, lineBelow)
+            };
+        }
+        const extent = Math.max(radius, labelWidth / 2);
+        return { fraction: breadth, before: extent, after: extent };
+    }), horizontal ? height : width);
+    const position = new Map(placed.map(({ node, breadth, depth }) => {
+        const along = depthFit.start + depth * depthFit.span;
+        const across = breadthFit.start + breadth * breadthFit.span;
+        return [node, horizontal ? { x: along, y: across } : { x: across, y: along }];
+    }));
+    const at = (node) => {
+        const point = position.get(node);
+        if (!point)
+            throw new Error('[Chart] Tree layout lost a positioned node.');
+        return point;
+    };
+    const nodes = placed.map(({ node, internal }) => {
+        const { x, y } = at(node);
         return {
             ...node.data,
             kind: 'relation-node',
@@ -47,21 +106,22 @@ export function compileTreeRelation(data, mark, compiled, path, width, height) {
             labelAnchor: horizontal ? (internal ? 'end' : 'start') : 'middle'
         };
     });
-    const links = layoutRoot.links().map(({ source, target }) => ({
-        kind: 'relation-link',
-        identity: `${source.data.identity}:${target.data.identity}`,
-        source: source.data.id,
-        target: target.data.id,
-        sourceLabel: source.data.label,
-        targetLabel: target.data.label,
-        group: target.data.group,
-        x1: horizontal ? labelSpace + source.y : padding + source.x,
-        y1: horizontal ? padding + source.x : padding + source.y,
-        x2: horizontal ? labelSpace + target.y : padding + target.x,
-        y2: horizontal ? padding + target.x : padding + target.y
-    }));
+    const links = layoutRoot.links().map(({ source, target }) => {
+        const from = at(source);
+        const to = at(target);
+        return {
+            kind: 'relation-link',
+            identity: `${source.data.identity}:${target.data.identity}`,
+            source: source.data.id,
+            target: target.data.id,
+            sourceLabel: source.data.label,
+            targetLabel: target.data.label,
+            group: target.data.group,
+            x1: from.x,
+            y1: from.y,
+            x2: to.x,
+            y2: to.y
+        };
+    });
     return compileRelationPointMarks(nodes, links, mark, compiled.labels, path);
 }
-function clamp(value, minimum, maximum) {
-    return Math.min(maximum, Math.max(minimum, value));
-}

package/dist/components/Chart/chart.series.props.d.ts

@@ -95,6 +95,12 @@ export type ChartSeriesMark<TRow> = ChartDataMarkProps<TRow> & ChartFillStyle<TR
     line?: boolean | ChartLineOptions<TRow>;
     points?: boolean | ChartPointOptions<TRow>;
     curve?: ChartCurve;
+    /**
+     * How an area is painted: `gradient` shades the series colour along the value axis, `solid`
+     * is one flat fill at `fillOpacity` (20% by default). Gradients apply to palette colours.
+     * @default 'gradient'
+     */
+    areaFill?: 'gradient' | 'solid';
     analysis?: readonly [ChartSeriesAnalysis, ...ChartSeriesAnalysis[]];
 };
 type ChartBarCoordinates<TRow> = {

package/dist/components/Chart/chart.state.svelte.d.ts

@@ -78,6 +78,7 @@ export declare class ChartState<TRow extends object> extends BoundChartOptions<C
     readonly plotClass: string;
     readonly size: import("./chart.validation.js").ChartSize | undefined;
     readonly rootStyle: string;
+    readonly plotStyle: string | undefined;
     readonly initialMarkup: string;
     constructor(options: ChartStateOptions<TRow>);
     /** Row key of the pinned datum, controlled by `tooltip.value` when it is provided. */

package/dist/components/Chart/chart.state.svelte.js

@@ -24,13 +24,16 @@ export class ChartState extends BoundChartOptions {
     rootClass = $derived(this.classes.root({ className: this.className }));
     plotClass = $derived(this.classes.plot());
     size = $derived(resolveChartSize(this.height, this.aspectRatio));
-    // `height` and `aspectRatio` own the box when they are set, so they win over the root
-    // class; with neither, the root class keeps its own height and the chart observes it.
-    rootStyle = $derived(this.size?.height !== undefined
-        ? `position:relative;width:100%;height:${this.size.height}px`
+    // `height` and `aspectRatio` size the plot, the box the engine draws into, so they go on the
+    // plot box and the legend row adds to the chart's height. Sizing the root instead left the
+    // plot shorter than the scene the engine laid out, which then shrank to fit. With neither,
+    // the root class keeps its own height and the engine measures what the legend leaves.
+    rootStyle = $derived(this.size ? 'position:relative;width:100%;height:auto' : 'position:relative;width:100%');
+    plotStyle = $derived(this.size?.height !== undefined
+        ? `flex:none;height:${this.size.height}px`
         : this.size?.aspectRatio !== undefined
-            ? `position:relative;width:100%;height:auto;aspect-ratio:${this.size.aspectRatio}`
-            : 'position:relative;width:100%');
+            ? `flex:none;aspect-ratio:${this.size.aspectRatio}`
+            : undefined);
     initialMarkup;
     #adapter;
     #interaction;

package/dist/components/Chart/chart.viewport.svelte.d.ts

@@ -20,6 +20,7 @@ export declare class ChartViewportState<TRow extends object> {
     readonly controls: readonly ChartControl<any, any>[] | undefined;
     readonly status: string;
     constructor(chart: ChartState<TRow>);
+    private clear;
     syncScene(scene: ChartScene<TRow>): void;
     reset: () => void;
     private createControls;

package/dist/components/Chart/chart.viewport.svelte.js

@@ -1,3 +1,4 @@
+import { untrack } from 'svelte';
 import { brushX } from '@tanstack/charts/interaction/brush';
 import { controlledSignal } from '@tanstack/charts/interaction/signal';
 import { resolveChartViewport, sameChartViewportDomain } from './chart.viewport.js';
@@ -20,16 +21,32 @@ export class ChartViewportState {
     animation = $derived(this.configuration?.animation);
     controls = $derived(this.createControls());
     status = $derived(this.isZoomed ? 'Chart zoomed on the x axis.' : '');
+    /** Whether the x scale brushes categories or a continuous range. */
+    #xKind = $derived(this.chart.x?.scale.type === 'band' || this.chart.x?.scale.type === 'point'
+        ? 'categorical'
+        : 'continuous');
     constructor(chart) {
         this.#chart = chart;
         $effect(() => {
             if (this.configuration)
                 return;
-            this.xDomain = undefined;
-            this.fullDomain = [];
-            this.range = undefined;
-            this.isBrushing = false;
+            this.clear();
         });
+        // A zoom window kept across a switch between categorical and continuous x would hold
+        // bounds of the wrong kind; start over from the next scene's domain instead.
+        let kind = untrack(() => this.#xKind);
+        $effect(() => {
+            if (this.#xKind === kind)
+                return;
+            kind = this.#xKind;
+            untrack(() => this.clear());
+        });
+    }
+    clear() {
+        this.xDomain = undefined;
+        this.fullDomain = [];
+        this.range = undefined;
+        this.isBrushing = false;
     }
     syncScene(scene) {
         if (!this.configuration || this.isZoomed)
@@ -81,9 +98,10 @@ export class ChartViewportState {
             ];
         }
         const { start, end } = this.range;
-        if (typeof start === 'string' || typeof end === 'string') {
-            throw new TypeError('[Chart] A continuous brush requires number or Date bounds.');
-        }
+        // Category bounds left from before the x scale turned continuous: the reset above clears
+        // them, and the next scene publishes the continuous domain.
+        if (typeof start === 'string' || typeof end === 'string')
+            return undefined;
         return [
             brushX({
                 ...options,

package/dist/components/DataTable/DataTable.svelte

@@ -64,6 +64,8 @@
 		toolbarSuffix,
 		bulkActions,
 		rowActions,
+		rowActionsWidth,
+		onRowActivate,
 		expandedContent,
 		loading = false,
 		error,
@@ -120,6 +122,8 @@
 				toolbarSuffix,
 				bulkActions,
 				rowActions,
+				rowActionsWidth,
+				onRowActivate,
 				expandedContent,
 				loading,
 				error,
@@ -164,7 +168,8 @@
 			rowCount,
 			selectionMode,
 			pagination,
-			rowActions
+			rowActions,
+			rowActionsWidth
 		];
 		model.reconcileProcessingMode();
 		model.reconcileColumns();
@@ -439,6 +444,18 @@
 		if (pagination === false) return null;
 		return pagination;
 	});
+	// The current size is always offered, so a `pageSize` missing from `pageSizes` still shows in
+	// the select instead of leaving it on its placeholder.
+	const pageSizeItems = $derived.by(() => {
+		const sizes = paginationConfig?.pageSizes ?? [25, 50, 100];
+		const current = tableState!.pagination.pageSize;
+		const offered = sizes.includes(current)
+			? sizes
+			: [...sizes, current].sort((left, right) => left - right);
+		return offered.map((value) => ({ value: String(value), label: String(value) }));
+	});
+	const uid = $props.id();
+	const rowsPerPageId = `${uid}-rows-per-page`;
 	const tableApi: DataTableApi<TData> = {
 		get state() {
 			return model.state;
@@ -633,15 +650,15 @@
 	{#if paginationConfig && paginationConfig.showControls !== false}
 		<div class={classes.footer()}>
 			<div class={classes.toolbarGroup()}>
-				<span class={classes.summary()}>{pageStart}–{pageEnd} of {totalItems}</span>
-				<span class={classes.summary()}>{t.dataTableRowsPerPage}</span>
+				<span class={classes.summary()}>
+					{t.paginationSummary(pageStart, pageEnd, totalItems)}
+				</span>
+				<!-- The visible text names the select; a field label would print it a second time. -->
+				<span id={rowsPerPageId} class={classes.summary()}>{t.dataTableRowsPerPage}</span>
 				<Select
 					size="small"
-					label={t.dataTableRowsPerPage}
-					items={(paginationConfig.pageSizes ?? [25, 50, 100]).map((value) => ({
-						value: String(value),
-						label: String(value)
-					}))}
+					triggerAttrs={{ 'aria-labelledby': rowsPerPageId }}
+					items={pageSizeItems}
 					value={String(tableState!.pagination.pageSize)}
 					{disabled}
 					onValueChange={(value) => model.setPageSize(Number(value))}

package/dist/components/DataTable/DataTableRow.svelte

@@ -151,21 +151,44 @@
 		const control = (event.currentTarget as HTMLElement).querySelector<HTMLElement>(
 			'button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
 		);
-		control?.focus();
+		if (control) control.focus();
+		else if (event.key === 'Enter' && activatesFrom(column.id)) activate(event);
 	};
 
-	const handleCellClick = (event: MouseEvent, rowIndex: number, columnIndex: number) => {
-		if (interactionMode !== 'grid') return;
-		model.moveFocusedCell(rowIndex, columnIndex);
-
+	const handleCellClick = (
+		event: MouseEvent,
+		rowIndex: number,
+		columnIndex: number,
+		columnId: string
+	) => {
 		const target = event.target;
 		const interactive =
 			target instanceof Element
-				? target.closest('button, input, select, textarea, [tabindex]:not([tabindex="-1"])')
+				? target.closest(
+						'a[href], button, input, select, textarea, label, [contenteditable], [tabindex]:not([tabindex="-1"])'
+					)
 				: null;
-		if (interactive && interactive !== event.currentTarget) return;
-		(event.currentTarget as HTMLElement).focus();
+		const onControl = !!interactive && interactive !== event.currentTarget;
+		if (interactionMode === 'grid') {
+			model.moveFocusedCell(rowIndex, columnIndex);
+			if (!onControl) (event.currentTarget as HTMLElement).focus();
+		}
+		// A click that ends a text selection is the reader copying a value, not opening the row.
+		const selecting = !(window.getSelection()?.isCollapsed ?? true);
+		if (!onControl && !selecting && activatesFrom(columnId)) activate(event);
 	};
+
+	// The selection and actions columns own their clicks; group rows expand rather than open.
+	const activatable = $derived(
+		!!model.props.onRowActivate && !model.props.disabled && !row.getIsGrouped()
+	);
+	const activatesFrom = (columnId: string) =>
+		activatable &&
+		columnId !== DATA_TABLE_SELECTION_COLUMN &&
+		columnId !== DATA_TABLE_ACTIONS_COLUMN &&
+		model.editing?.row.id !== row.id;
+	const activate = (event: MouseEvent | KeyboardEvent) =>
+		model.props.onRowActivate?.({ ...rowPayload, event });
 </script>
 
 <tr
@@ -177,7 +200,7 @@
 	data-row-id={row.id}
 	data-grid-row={rowIndex}
 	data-selected={rowSelected}
-	class={classes.row({ density, grouped: row.getIsGrouped() })}
+	class={classes.row({ density, grouped: row.getIsGrouped(), activatable })}
 	style:grid-template-columns={gridTemplate}
 	{@attach measureAttachment}
 >
@@ -225,7 +248,7 @@
 			onmousedown={(event) => {
 				if (event.detail > 1 && config?.editor) event.preventDefault();
 			}}
-			onclick={(event) => handleCellClick(event, rowIndex, allIndex)}
+			onclick={(event) => handleCellClick(event, rowIndex, allIndex, column.id)}
 			onkeydown={(event) => handleCellKeydown(event, column, allIndex)}
 			ondblclick={(event) => {
 				if (!config?.editor) return;

package/dist/components/DataTable/dataTable.mcp.d.ts

@@ -1 +1 @@
-export declare const dataTableDescription = "\n# DataTable\n\nDataTable is the typed, interactive, virtualized table for application data. Its public API is\nEntasis-native; TanStack Table Core remains private, but it must be installed as an optional peer\ndependency. Use Table for static tabular content.\n\n## Requires\n\nDataTable builds its row model with TanStack Table Core, which ships with entasis.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n  import {\n    createDataTableColumnHelper,\n    DataTable\n  } from './index.ts';\n\n  type Person = { id: string; name: string; role: string; active: boolean };\n  const column = createDataTableColumnHelper<Person>();\n  const columns = [\n    column.accessor('name', {\n      id: 'name',\n      header: 'Name',\n      sortable: true,\n      filter: { type: 'text' }\n    }),\n    column.accessor('role', { id: 'role', header: 'Role' }),\n    column.accessor('active', {\n      id: 'active',\n      header: 'Active',\n      filter: { type: 'boolean' }\n    })\n  ];\n</script>\n\n<DataTable\n  {items}\n  {columns}\n  getRowId={(person) => person.id}\n  height={420}\n  search\n  pagination={{ pageSize: 25, pageSizes: [25, 50, 100] }}\n/>\n```\n\n`items`, `columns`, and `getRowId` are required. Without `height`, DataTable fills a\nparent with a definite height so the virtual viewport remains bounded. Pass `virtualize={false}`\ninstead to drop the table into normal document flow at its natural height:\n\n```svelte\n<DataTable {items} {columns} {getRowId} virtualize={false} />\n```\n\n## Core props\n\n- **items**: `readonly TData[]`.\n- **columns**: `readonly DataTableColumn<TData>[]`.\n- **getRowId**: stable row identity used by selection, expansion, virtualization, and focus.\n- **height**: optional `string | number`; otherwise fills a definite-height parent. Only read\n  while virtualizing.\n- **virtualize**: default true. False renders every row in normal flow, so the table needs no\n  height and no definite-height parent.\n- **density**: `compact | normal | comfortable`, default `normal`.\n- **interactionMode**: `table | grid`, default `table`.\n- **processingMode**: `client | manual`, default `client`.\n- **selectionMode**: `none | single | multiple`, default `none`.\n- **pagination**: `false | DataTablePaginationConfig`. False disables pagination processing.\n  `showControls: false` keeps processing active while hiding the built-in footer.\n- **search**: false, true, or placeholder/debounce configuration.\n- **showColumnVisibilityControl**: default false.\n- **stickyHeader**, **overscan**, **estimatedRowHeight**, and **animateRows** control rendering.\n- **disabled** blocks sorting controls, selection paths, editing, and column manipulation.\n- **loading** and **error** drive table states and the NetworkIndicator.\n- **api**: bindable narrow external-control instance handle (`DataTableApi<TData>`).\n- **cell** and **header**: table-level renderer snippets with `renderDefault` delegates.\n- **class**, **theme**, **ref**, and Svelte attachments follow Entasis conventions.\n\n## Column definitions\n\n`DataTableColumn<TData, TValue>` supports `id`, `accessor`, required `header`, optional\n`cell` and `aggregatedCell`, sorting, filtering, grouping, aggregation, editing, visibility,\nresizing, reordering, pinning, alignment, `width` / `minWidth` / `maxWidth`, and column\nclasses.\n\nUse `createDataTableColumnHelper<TData>()` to infer accessor values inside cell and editor\nconfiguration. Raw DataTableColumn definitions remain available as an escape hatch.\n\n## Rendering\n\nColumn-level renderers are part of the default rendering chain. A table-level `cell` renderer\nwraps every public ordinary, grouped, aggregated, and placeholder cell. It does not wrap selection\ncells, action cells, detail rows, or active editors. A table-level `header` renderer wraps only\nconfigured public header content; sorting, menus, dragging, resizing, focus, and ARIA remain owned\nby DataTable.\n\n`DataTableCellRenderPayload<TData>` contains the normal cell payload plus `column`,\n`placeholder`, and `renderDefault`. `DataTableHeaderRenderPayload<TData>` contains the normal\nheader payload plus `renderDefault`.\n\n```svelte\n{#snippet cell({ columnId, value, renderDefault })}\n  {#if columnId === 'status'}\n    <Chip>{value}</Chip>\n  {:else}\n    {@render renderDefault()}\n  {/if}\n{/snippet}\n```\n\nPrecedence is structural rendering or an active editor, then the table-level renderer, then\n`renderDefault`, which resolves the column renderer before the built-in fallback.\n\n## Filters\n\nBuilt-in filters are text, number range, select, multi-select, date range, and boolean.\nA custom filter is `{ type: 'custom', render, predicate }`. Its renderer receives the column,\ncurrent value, active state, `setValue(value)`, and `clear()`; `predicate(row, value,\ncolumnValue)` owns client matching. Filtering, searching, sorting, and grouping reset page one.\n\n## State and external composition\n\nUse `createDataTableState(columns, initialState?, pageSize?)` for controlled state. The bindable\nstate contains sorting, globalFilter, columnFilters, one-based pagination, rowSelection,\ncolumnVisibility, columnOrder, columnPinning, columnSizing, grouping, and expanded.\n\nDataTable updates replace slices immutably and call `onStateChange(nextState)`. Parent-originated\nmutations through `bind:state` are observed without calling that callback again.\n\n`bind:api` exposes a stable `DataTableApi<TData>` with reactive state, totals, visible\nrows, selected loaded rows, save status, and commands for global/column filters, selection clearing,\npage, and page size. Commands use the same guards and reset rules as built-in controls.\n\n```svelte\n<DataTable\n  bind:state\n  bind:api\n  pagination={{ pageSize: 25, showControls: false }}\n  {...props}\n/>\n```\n\n## Client and manual processing\n\nClient mode runs filtering, sorting, grouping, aggregation, expansion, and pagination locally.\n\nManual mode delegates filtering, sorting, and pagination together. It requires `rowCount`, and\n`items` must contain the already processed current page. Grouping and aggregation are client-only\nin this release: grouping commands are hidden and unsupported manual grouping state is normalized\naway. Abort stale requests when state changes. In manual mode, `dataTable.selectedRows` includes\nonly loaded row objects; all selected IDs remain in `state.rowSelection`.\n\n## Editing\n\nBuilt-in editors are text, number, select, date, and switch. A custom editor snippet receives row\nmetadata, draft, pending/error state, `setDraft`, `commit`, and `cancel`. DataTable never\nmutates rows; changed values call `onCellCommit` and render optimistically while the\nNetworkIndicator tracks the request. Unchanged drafts close without a commit. Rejection rolls back,\nrestores the editor and draft, and exposes the error. Only one asynchronous transaction can be\nactive or recoverable. Columns with editors do not enter edit mode without `onCellCommit` and\nissue a development warning.\n\nEnter and outside clicks commit, Escape cancels, and Tab commits without leaving the edited cell.\nCalendar selection synchronizes its draft before commit. Arrow keys remain owned by editor controls.\n\n## Slots\n\n- **caption**, **toolbarPrefix**, **toolbarSuffix**, **bulkActions**, **rowActions**,\n  **expandedContent**, **loadingContent**, **empty**, **noResults**, and **errorContent**.\n- Toolbar slots receive state, selected loaded rows, visible rows, clearFilters, and clearSelection.\n- Row slots receive row identity, selection/expansion state, depth, and guarded toggle actions.\n\n## Accessibility and virtualization\n\nTable mode preserves native table semantics. Grid mode uses one roving cell tab stop with arrows,\nTab/Shift+Tab, Home/End, Ctrl+Home/Ctrl+End, and PageUp/PageDown. Focus is reconciled by row and\ncolumn identity after data, pagination, filtering, grouping, and visibility changes. State rows use\ncomplete column spans and keep recovery controls keyboard reachable. Logical row indices derive\nfrom the final grouped/expanded row model.\n\nRows are virtualized by default; `virtualize={false}` renders all of them in normal flow at\ntheir natural height, keeping the same selection, keyboard navigation, and editing paths. Use it for\nsmall datasets that belong in document flow, not for large ones. Semantic table mode keeps all\ncolumns mounted; grid mode additionally virtualizes center columns while pinned columns stay\nmounted. Resize handles support pointer and\nkeyboard resizing. Reorder handles support left/right keyboard movement and pointer movement within\ntheir current pin region. Logical inset positioning preserves RTL pinning.\n";
+export declare const dataTableDescription = "\n# DataTable\n\nDataTable is the typed, interactive, virtualized table for application data. Its public API is\nEntasis-native; TanStack Table Core remains private, but it must be installed as an optional peer\ndependency. Use Table for static tabular content.\n\n## Requires\n\nDataTable builds its row model with TanStack Table Core, which ships with entasis.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n  import {\n    createDataTableColumnHelper,\n    DataTable\n  } from './index.ts';\n\n  type Person = { id: string; name: string; role: string; active: boolean };\n  const column = createDataTableColumnHelper<Person>();\n  const columns = [\n    column.accessor('name', {\n      id: 'name',\n      header: 'Name',\n      sortable: true,\n      filter: { type: 'text' }\n    }),\n    column.accessor('role', { id: 'role', header: 'Role' }),\n    column.accessor('active', {\n      id: 'active',\n      header: 'Active',\n      filter: { type: 'boolean' }\n    })\n  ];\n</script>\n\n<DataTable\n  {items}\n  {columns}\n  getRowId={(person) => person.id}\n  height={420}\n  search\n  pagination={{ pageSize: 25, pageSizes: [25, 50, 100] }}\n/>\n```\n\n`items`, `columns`, and `getRowId` are required. Without `height`, DataTable fills a\nparent with a definite height so the virtual viewport remains bounded. Pass `virtualize={false}`\ninstead to drop the table into normal document flow at its natural height:\n\n```svelte\n<DataTable {items} {columns} {getRowId} virtualize={false} />\n```\n\n## Core props\n\n- **items**: `readonly TData[]`.\n- **columns**: `readonly DataTableColumn<TData>[]`.\n- **getRowId**: stable row identity used by selection, expansion, virtualization, and focus.\n- **height**: optional `string | number`; otherwise fills a definite-height parent. Only read\n  while virtualizing.\n- **virtualize**: default true. False renders every row in normal flow, so the table needs no\n  height and no definite-height parent.\n- **density**: `compact | normal | comfortable`, default `normal`.\n- **interactionMode**: `table | grid`, default `table`.\n- **processingMode**: `client | manual`, default `client`.\n- **selectionMode**: `none | single | multiple`, default `none`.\n- **pagination**: `false | DataTablePaginationConfig`. False disables pagination processing.\n  `showControls: false` keeps processing active while hiding the built-in footer. The size select\n  always offers the current `pageSize`, even when `pageSizes` leaves it out.\n- **search**: false, true, or placeholder/debounce configuration.\n- **showColumnVisibilityControl**: default false.\n- **stickyHeader**, **overscan**, **estimatedRowHeight**, and **animateRows** control rendering.\n- **disabled** blocks sorting controls, selection paths, editing, and column manipulation.\n- **loading** and **error** drive table states and the NetworkIndicator.\n- **api**: bindable narrow external-control instance handle (`DataTableApi<TData>`).\n- **cell** and **header**: table-level renderer snippets with `renderDefault` delegates.\n- **class**, **theme**, **ref**, and Svelte attachments follow Entasis conventions.\n\n## Column definitions\n\n`DataTableColumn<TData, TValue>` supports `id`, `accessor`, required `header`, optional\n`cell` and `aggregatedCell`, sorting, filtering, grouping, aggregation, editing, visibility,\nresizing, reordering, pinning, alignment, `width` / `minWidth` / `maxWidth`, and column\nclasses.\n\nUse `createDataTableColumnHelper<TData>()` to infer accessor values inside cell and editor\nconfiguration. Raw DataTableColumn definitions remain available as an escape hatch.\n\n## Rendering\n\nColumn-level renderers are part of the default rendering chain. A table-level `cell` renderer\nwraps every public ordinary, grouped, aggregated, and placeholder cell. It does not wrap selection\ncells, action cells, detail rows, or active editors. A table-level `header` renderer wraps only\nconfigured public header content; sorting, menus, dragging, resizing, focus, and ARIA remain owned\nby DataTable.\n\n`DataTableCellRenderPayload<TData>` contains the normal cell payload plus `column`,\n`placeholder`, and `renderDefault`. `DataTableHeaderRenderPayload<TData>` contains the normal\nheader payload plus `renderDefault`.\n\n```svelte\n{#snippet cell({ columnId, value, renderDefault })}\n  {#if columnId === 'status'}\n    <Chip>{value}</Chip>\n  {:else}\n    {@render renderDefault()}\n  {/if}\n{/snippet}\n```\n\nPrecedence is structural rendering or an active editor, then the table-level renderer, then\n`renderDefault`, which resolves the column renderer before the built-in fallback.\n\n## Filters\n\nBuilt-in filters are text, number range, select, multi-select, date range, and boolean.\nA custom filter is `{ type: 'custom', render, predicate }`. Its renderer receives the column,\ncurrent value, active state, `setValue(value)`, and `clear()`; `predicate(row, value,\ncolumnValue)` owns client matching. Filtering, searching, sorting, and grouping reset page one.\n\n## State and external composition\n\nUse `createDataTableState(columns, initialState?, pageSize?)` for controlled state. The bindable\nstate contains sorting, globalFilter, columnFilters, one-based pagination, rowSelection,\ncolumnVisibility, columnOrder, columnPinning, columnSizing, grouping, and expanded.\n\nDataTable updates replace slices immutably and call `onStateChange(nextState)`. Parent-originated\nmutations through `bind:state` are observed without calling that callback again.\n\n`bind:api` exposes a stable `DataTableApi<TData>` with reactive state, totals, visible\nrows, selected loaded rows, save status, and commands for global/column filters, selection clearing,\npage, and page size. Commands use the same guards and reset rules as built-in controls.\n\n```svelte\n<DataTable\n  bind:state\n  bind:api\n  pagination={{ pageSize: 25, showControls: false }}\n  {...props}\n/>\n```\n\n## Client and manual processing\n\nClient mode runs filtering, sorting, grouping, aggregation, expansion, and pagination locally.\n\nManual mode delegates filtering, sorting, and pagination together. It requires `rowCount`, and\n`items` must contain the already processed current page. Grouping and aggregation are client-only\nin this release: grouping commands are hidden and unsupported manual grouping state is normalized\naway. Abort stale requests when state changes. In manual mode, `dataTable.selectedRows` includes\nonly loaded row objects; all selected IDs remain in `state.rowSelection`.\n\n## Editing\n\nBuilt-in editors are text, number, select, date, and switch. A custom editor snippet receives row\nmetadata, draft, pending/error state, `setDraft`, `commit`, and `cancel`. DataTable never\nmutates rows; changed values call `onCellCommit` and render optimistically while the\nNetworkIndicator tracks the request. Unchanged drafts close without a commit. Rejection rolls back,\nrestores the editor and draft, and exposes the error. Only one asynchronous transaction can be\nactive or recoverable. Columns with editors do not enter edit mode without `onCellCommit` and\nissue a development warning.\n\nEnter and outside clicks commit, Escape cancels, and Tab commits without leaving the edited cell.\nCalendar selection synchronizes its draft before commit. Arrow keys remain owned by editor controls.\n\n## Slots\n\n- **caption**, **toolbarPrefix**, **toolbarSuffix**, **bulkActions**, **rowActions**,\n  **expandedContent**, **loadingContent**, **empty**, **noResults**, and **errorContent**.\n- Toolbar slots receive state, selected loaded rows, visible rows, clearFilters, and clearSelection.\n- Row slots receive row identity, selection/expansion state, depth, and guarded toggle actions.\n- The row actions column is 36px, one icon button; set `rowActionsWidth` (pixels) for text\n  buttons or several actions.\n\n## Row activation\n\n`onRowActivate(payload)` receives the row payload plus the native `event`, for modifier keys.\nIt fires on a click anywhere in the row except on a control (link, button, input, label, focusable\nelement), the selection or actions column, a group row, or a click that ends a text selection.\nIn grid mode Enter activates a cell that has no editor and no control. Rows show a pointer while it\nis set. Table-mode rows are not focusable, so keep a link or row action for keyboard users.\n\n## Accessibility and virtualization\n\nTable mode preserves native table semantics. Grid mode uses one roving cell tab stop with arrows,\nTab/Shift+Tab, Home/End, Ctrl+Home/Ctrl+End, and PageUp/PageDown. Focus is reconciled by row and\ncolumn identity after data, pagination, filtering, grouping, and visibility changes. State rows use\ncomplete column spans and keep recovery controls keyboard reachable. Logical row indices derive\nfrom the final grouped/expanded row model.\n\nRows are virtualized by default; `virtualize={false}` renders all of them in normal flow at\ntheir natural height, keeping the same selection, keyboard navigation, and editing paths. Use it for\nsmall datasets that belong in document flow, not for large ones. Semantic table mode keeps all\ncolumns mounted; grid mode additionally virtualizes center columns while pinned columns stay\nmounted. Resize handles support pointer and\nkeyboard resizing. Reorder handles support left/right keyboard movement and pointer movement within\ntheir current pin region. Logical inset positioning preserves RTL pinning.\n";

package/dist/components/DataTable/dataTable.mcp.js

@@ -68,7 +68,8 @@ instead to drop the table into normal document flow at its natural height:
 - **processingMode**: \`client | manual\`, default \`client\`.
 - **selectionMode**: \`none | single | multiple\`, default \`none\`.
 - **pagination**: \`false | DataTablePaginationConfig\`. False disables pagination processing.
-  \`showControls: false\` keeps processing active while hiding the built-in footer.
+  \`showControls: false\` keeps processing active while hiding the built-in footer. The size select
+  always offers the current \`pageSize\`, even when \`pageSizes\` leaves it out.
 - **search**: false, true, or placeholder/debounce configuration.
 - **showColumnVisibilityControl**: default false.
 - **stickyHeader**, **overscan**, **estimatedRowHeight**, and **animateRows** control rendering.
@@ -171,6 +172,16 @@ Calendar selection synchronizes its draft before commit. Arrow keys remain owned
   **expandedContent**, **loadingContent**, **empty**, **noResults**, and **errorContent**.
 - Toolbar slots receive state, selected loaded rows, visible rows, clearFilters, and clearSelection.
 - Row slots receive row identity, selection/expansion state, depth, and guarded toggle actions.
+- The row actions column is 36px, one icon button; set \`rowActionsWidth\` (pixels) for text
+  buttons or several actions.
+
+## Row activation
+
+\`onRowActivate(payload)\` receives the row payload plus the native \`event\`, for modifier keys.
+It fires on a click anywhere in the row except on a control (link, button, input, label, focusable
+element), the selection or actions column, a group row, or a click that ends a text selection.
+In grid mode Enter activates a cell that has no editor and no control. Rows show a pointer while it
+is set. Table-mode rows are not focusable, so keep a link or row action for keyboard users.
 
 ## Accessibility and virtualization