ropav 0.4.0 → 0.6.0

package/dist/components/table/table-cell.js

@@ -3,10 +3,10 @@ import { dataAttr } from "../../utils/assertion.js";
 import { useId as useId$1 } from "../../composables/use-id.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { getCollectionTextValue } from "../../utils/text-value.js";
+import { useVirtualizerItem } from "../virtualizer/use-virtualizer-item.js";
 import { useTableContext, useTableGridContext, useTableRowContext, useTableVirtualizerContext } from "./table.context.js";
-import table_virtualizer_item_default from "./table-virtualizer-item.js";
-import { tableCellId } from "../../composables/use-table-collection.js";
-import { computed, createComponent, createDynamicComponent, createSlot, defineVaporComponent, extend, setStaticTemplateRef, shallowRef, unref, watch } from "vue";
+import { tableCellId } from "./use-table-collection.js";
+import { computed, createDynamicComponent, createSlot, defineVaporComponent, extend, setStaticTemplateRef, shallowRef, unref, watch } from "vue";
 //#region src/components/table/table-cell.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var table_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "table-cell",
@@ -18,7 +18,7 @@ var table_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		const props = __props;
 		const { slots } = useTableContext();
 		const { collection, collectionId, keyboard, selection, tableId, treeColumn } = useTableGridContext();
-		const { cells, hasChildRows, isExpanded, level, rowKey } = useTableRowContext();
+		const { cells, claimCellIndex, hasChildRows, isExpanded, level, rowKey } = useTableRowContext();
 		const cellKey = useId$1();
 		const element = shallowRef(null);
 		watch(element, (current, _previous, onCleanup) => {
@@ -31,7 +31,11 @@ var table_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 			flush: "post",
 			immediate: true
 		});
-		const index = computed(() => cells.indexOf(cellKey.value));
+		const claimedIndex = claimCellIndex();
+		const index = computed(() => {
+			const registered = cells.indexOf(cellKey.value);
+			return registered < 0 ? claimedIndex : registered;
+		});
 		const columnKey = computed(() => index.value < 0 ? null : collection.columns.keyAt(index.value));
 		const isRowHeader = computed(() => columnKey.value != null && collection.rowHeaderColumnKeys.value.has(columnKey.value));
 		const cellId = computed(() => isRowHeader.value && columnKey.value != null ? tableCellId(tableId.value, rowKey.value, columnKey.value) : void 0);
@@ -48,12 +52,10 @@ var table_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 			});
 		};
 		/**
-		* Virtualized, the cell sits inside a wrapper carrying the column's width and offset.
+		* Virtualized, the cell carries the column's width and offset itself, as the row does its own.
 		*
 		* The geometry is found by the cell the row and the column meet at, which means the row has to
-		* carry the `id` its item was keyed by — that key is half of the pair. Until the cell registry has
-		* settled the column is unknown and there is no wrapper yet, the same tick `data-column-index` is
-		* missing for.
+		* carry the `id` its item was keyed by — that key is half of the pair.
 		*/
 		const virtualizer = useTableVirtualizerContext();
 		const layoutInfo = computed(() => {
@@ -61,44 +63,45 @@ var table_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 			return virtualizer.getLayoutInfo(virtualizer.collection.value.cellKey(rowKey.value, columnKey.value));
 		});
 		const parentLayoutInfo = computed(() => virtualizer ? virtualizer.getLayoutInfo(rowKey.value) : null);
-		return createComponent(table_virtualizer_item_default, {
-			"layout-info": () => layoutInfo.value,
-			"parent-layout-info": () => parentLayoutInfo.value
+		const placement = virtualizer ? useVirtualizerItem({
+			element,
+			layoutInfo: () => layoutInfo.value,
+			parentLayoutInfo: () => parentLayoutInfo.value
+		}) : null;
+		const n1 = createDynamicComponent(() => unref(virtualizer) ? "div" : "td", {
+			id: () => cellId.value,
+			"aria-colindex": () => unref(virtualizer) && index.value >= 0 ? index.value + 1 : void 0,
+			class: () => unref(composeSlotClassName)(unref(slots).cell, props.class),
+			"data-collection": () => unref(collectionId),
+			"data-column-index": () => index.value < 0 ? void 0 : index.value,
+			"data-disabled": () => unref(dataAttr)(isDisabled.value),
+			"data-expanded": () => unref(dataAttr)(unref(isExpanded)),
+			"data-focus-visible": () => unref(dataAttr)(unref(states).isFocusVisible.value),
+			"data-focused": () => unref(dataAttr)(unref(states).isFocused.value),
+			"data-has-child-items": () => unref(dataAttr)(unref(hasChildRows)),
+			"data-key": () => columnKey.value == null ? void 0 : `${unref(rowKey)}:${columnKey.value}`,
+			"data-level": () => unref(level),
+			"data-pressed": () => unref(dataAttr)(unref(states).isPressed.value),
+			"data-selected": () => unref(dataAttr)(isSelected.value),
+			"data-slot": "table-cell",
+			"data-tree-column": () => unref(dataAttr)(isTreeColumn.value),
+			role: () => isRowHeader.value ? "rowheader" : "gridcell",
+			style: () => unref(placement)?.style.value,
+			tabindex: () => unref(keyboard).cellTabIndex(unref(rowKey), columnKey.value),
+			onBlur: () => unref(states).onBlur,
+			onFocus: () => onFocus,
+			onPointerdown: () => unref(states).onPointerdown
 		}, extend(() => {
-			const n1 = createDynamicComponent(() => unref(virtualizer) ? "div" : "td", {
-				id: () => cellId.value,
-				"aria-colindex": () => unref(virtualizer) && index.value >= 0 ? index.value + 1 : void 0,
-				class: () => unref(composeSlotClassName)(unref(slots).cell, props.class),
-				"data-collection": () => unref(collectionId),
-				"data-column-index": () => index.value < 0 ? void 0 : index.value,
-				"data-disabled": () => unref(dataAttr)(isDisabled.value),
-				"data-expanded": () => unref(dataAttr)(unref(isExpanded)),
-				"data-focus-visible": () => unref(dataAttr)(unref(states).isFocusVisible.value),
-				"data-focused": () => unref(dataAttr)(unref(states).isFocused.value),
-				"data-has-child-items": () => unref(dataAttr)(unref(hasChildRows)),
-				"data-key": () => columnKey.value == null ? void 0 : `${unref(rowKey)}:${columnKey.value}`,
-				"data-level": () => unref(level),
-				"data-pressed": () => unref(dataAttr)(unref(states).isPressed.value),
-				"data-selected": () => unref(dataAttr)(isSelected.value),
-				"data-slot": "table-cell",
-				"data-tree-column": () => unref(dataAttr)(isTreeColumn.value),
-				role: () => isRowHeader.value ? "rowheader" : "gridcell",
-				tabindex: () => unref(keyboard).cellTabIndex(unref(rowKey), columnKey.value),
-				onBlur: () => unref(states).onBlur,
-				onFocus: () => onFocus,
-				onPointerdown: () => unref(states).onPointerdown
-			}, extend(() => {
-				return createSlot("default", {
-					hasChildRows: () => unref(hasChildRows),
-					isDisabled: () => isDisabled.value,
-					isExpanded: () => unref(isExpanded),
-					isSelected: () => isSelected.value,
-					isTreeColumn: () => isTreeColumn.value
-				}, null, 36);
-			}, { _: 8 }), 4);
-			setStaticTemplateRef(n1, element, null, "element");
-			return n1;
-		}, { _: 8 }), true);
+			return createSlot("default", {
+				hasChildRows: () => unref(hasChildRows),
+				isDisabled: () => isDisabled.value,
+				isExpanded: () => unref(isExpanded),
+				isSelected: () => isSelected.value,
+				isTreeColumn: () => isTreeColumn.value
+			}, null, 36);
+		}, { _: 8 }), 1);
+		setStaticTemplateRef(n1, element, null, "element");
+		return n1;
 	}
 });
 //#endregion

package/dist/components/table/table-column-resizer.js

@@ -2,9 +2,9 @@ import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
 import { useId as useId$1 } from "../../composables/use-id.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { useMove } from "../../composables/use-move.js";
 import { useDescription } from "../../composables/use-description.js";
 import { visuallyHiddenStyle } from "../../utils/visually-hidden.js";
-import { useMove } from "../../composables/use-move.js";
 import { useTableColumnContext, useTableColumnLayoutContext, useTableContext } from "./table.context.js";
 import { child, computed, defineVaporComponent, on, renderEffect, setAttr, setClass, setProp, setStaticTemplateRef, setStyle, setValue, shallowRef, template, unref, watch } from "vue";
 //#region src/components/table/table-column-resizer.vue?vue&type=script&setup=true&vapor=true&lang.ts

package/dist/components/table/table-column.js

@@ -6,7 +6,7 @@ import { getCollectionTextValue } from "../../utils/text-value.js";
 import { useDescription } from "../../composables/use-description.js";
 import { provideTableColumnContext, useTableColumnLayoutContext, useTableContext, useTableGridContext, useTableVirtualizerContext } from "./table.context.js";
 import table_virtualizer_item_default from "./table-virtualizer-item.js";
-import { tableColumnHeaderId } from "../../composables/use-table-collection.js";
+import { tableColumnHeaderId } from "./use-table-collection.js";
 import { computed, createComponent, createDynamicComponent, createSlot, defineVaporComponent, extend, setStaticTemplateRef, shallowRef, unref, watch } from "vue";
 //#region src/components/table/table-column.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var table_column_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({

package/dist/components/table/table-content.js

@@ -5,6 +5,7 @@ import { useControllableState } from "../../composables/use-controllable-state.j
 import { useSelectionManager } from "../../composables/use-selection-manager.js";
 import { provideVirtualizerStateContext, useVirtualizerConfigContext } from "../virtualizer/virtualizer.context.js";
 import { Size } from "../../utils/virtualizer-geometry.js";
+import virtualizer_scrollbar_default from "../virtualizer/virtualizer-scrollbar.js";
 import { useDndPersistedKeys } from "../../composables/use-dnd-persisted-keys.js";
 import { useTypeahead } from "../../composables/use-typeahead.js";
 import { useVirtualizer } from "../../composables/use-virtualizer.js";
@@ -13,13 +14,13 @@ import { useLocale } from "../../composables/use-locale.js";
 import { useDescription } from "../../composables/use-description.js";
 import { announce } from "../../utils/live-announcer.js";
 import { provideTableColumnLayoutContext, provideTableGridContext, provideTableVirtualizerContext, useTableContext, useTableResizableContainerContext } from "./table.context.js";
-import { useTableCollection } from "../../composables/use-table-collection.js";
-import { toTableDragCollection } from "../../composables/table-drag-collection.js";
-import { useGridKeyboard } from "../../composables/use-grid-keyboard.js";
-import { useGridSelectionAnnouncement } from "../../composables/use-grid-selection-announcement.js";
-import { buildColumnWidths, useTableColumnLayout } from "../../composables/use-table-column-layout.js";
+import { useTableCollection } from "./use-table-collection.js";
 import { TreeDropTargetDelegate } from "../../utils/dnd-tree-drop-target-delegate.js";
-import { computed, createDynamicComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setInsertionState, setStaticTemplateRef, setStyle, shallowRef, template, unref, watch } from "vue";
+import { toTableDragCollection } from "./table-drag-collection.js";
+import { useGridKeyboard } from "./use-grid-keyboard.js";
+import { useGridSelectionAnnouncement } from "./use-grid-selection-announcement.js";
+import { buildColumnWidths, useTableColumnLayout } from "./use-table-column-layout.js";
+import { computed, createComponent, createDynamicComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setInsertionState, setStaticTemplateRef, setStyle, shallowRef, template, unref, watch } from "vue";
 //#region src/components/table/table-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div role=presentation>");
 var table_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -207,7 +208,9 @@ var table_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 				containerSize.value = size;
 				virtualizer.setSize(size);
 			},
-			onVisibleRectChange: virtualizer.setVisibleRect
+			onVisibleRectChange: virtualizer.setVisibleRect,
+			scrollAdjustment: () => virtualizer.scrollAdjustment.value,
+			takeScrollAdjustment: virtualizer.takeScrollAdjustment
 		});
 		/**
 		* The rows inside the window. The body renders these rather than every row it was given.
@@ -373,6 +376,13 @@ var table_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 				getIndex: (key) => collection.rows.getIndex(key),
 				getLayoutInfo: virtualizer.getLayoutInfo,
 				itemCount: computed(() => collection.rows.size.value),
+				scroll: {
+					box: scroll.scrollBox,
+					offset: scroll.scrollOffset,
+					scrollSize: scroll.scrollSize,
+					scrollTo: scroll.scrollTo,
+					size: virtualizer.size
+				},
 				shouldObserveItemSize: virtualizerConfig.shouldObserveItemSize,
 				updateItemSize: virtualizer.updateItemSize
 			});
@@ -411,16 +421,23 @@ var table_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		* A CSS table lays its own columns out, and the two declarations below are how a resizable one is
 		* held to the widths it was given. Virtualized there is no CSS table to hold: the elements are
 		* divs, every cell is placed absolutely, and `min-content` on a div would collapse it.
+		*
+		* A windowed table hides the native scrollbar and draws its own in the content wrapper below: a
+		* native thumb is moved by the compositor, a frame ahead of the rows, and across a long collection
+		* that frame shows an empty body. Wheel, trackpad and keyboard scrolling stay native.
 		*/
-		const tableStyle = computed(() => layout && !isVirtualized ? {
-			tableLayout: "fixed",
-			width: "min-content"
-		} : void 0);
+		const tableStyle = computed(() => {
+			if (isVirtualized) return { scrollbarWidth: "none" };
+			return layout ? {
+				tableLayout: "fixed",
+				width: "min-content"
+			} : void 0;
+		});
 		const _on_dragenter = ($event) => unref(droppable)?.handlers.onDragenter($event);
 		const _on_dragleave = ($event) => unref(droppable)?.handlers.onDragleave($event);
 		const _on_dragover = ($event) => unref(droppable)?.handlers.onDragover($event);
 		const _on_drop = ($event) => unref(droppable)?.handlers.onDrop($event);
-		const n7 = createDynamicComponent(() => isVirtualized ? "div" : "table", {
+		const n8 = createDynamicComponent(() => isVirtualized ? "div" : "table", {
 			id: () => unref(tableId),
 			"aria-colcount": () => isVirtualized ? unref(collection).columns.size.value : void 0,
 			"aria-describedby": () => unref(describedBy),
@@ -444,17 +461,19 @@ var table_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 			onKeydownCapture: () => unref(typeahead).onKeydownCapture
 		}, extend(() => {
 			return createIf(() => isVirtualized, () => {
-				const n3 = t0();
-				renderEffect(() => setStyle(n3, unref(scroll)?.contentStyle.value));
-				setInsertionState(n3);
+				const n4 = t0();
+				renderEffect(() => setStyle(n4, unref(scroll)?.contentStyle.value));
+				setInsertionState(n4);
+				createComponent(virtualizer_scrollbar_default);
+				setInsertionState(n4, 1);
 				createSlot();
-				return n3;
+				return n4;
 			}, () => {
 				return createSlot("default", null, null, 36);
 			}, 389);
 		}, { _: 8 }), 1);
-		setStaticTemplateRef(n7, element, null, "element");
-		return n7;
+		setStaticTemplateRef(n8, element, null, "element");
+		return n8;
 	}
 });
 //#endregion

package/dist/{composables → components/table}/table-drag-collection.d.ts

@@ -1,4 +1,4 @@
-import type { DragCollection } from "../utils/dnd-types.js";
+import type { DragCollection } from "../../utils/dnd-types.js";
 import type { UseTableCollectionReturn } from "./use-table-collection.js";
 /**
  * A `DragCollection` over a table's rows.

package/dist/{composables → components/table}/table-drag-collection.js

@@ -1,4 +1,4 @@
-//#region src/composables/table-drag-collection.ts
+//#region src/components/table/table-drag-collection.ts
 /**
 * A `DragCollection` over a table's rows.
 *

package/dist/components/table/table-drop-indicator.js

@@ -33,7 +33,9 @@ var table_drop_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default
 		const virtualizer = useTableVirtualizerContext();
 		const virtualizerState = useVirtualizerStateContext();
 		const element = shallowRef(null);
-		const indicator = dropState && dragAndDropHooks?.useDropIndicator ? dragAndDropHooks.useDropIndicator({ target: props.target }, dropState, element) : null;
+		const indicator = dropState && dragAndDropHooks?.useDropIndicator ? dragAndDropHooks.useDropIndicator({ get target() {
+			return props.target;
+		} }, dropState, element) : null;
 		const isHidden = computed(() => indicator?.isHidden.value ?? true);
 		const isDropTarget = computed(() => indicator?.isDropTarget.value ?? false);
 		/** Depth of the gap, so an indented indicator lines up with the rows it sits between. */

package/dist/components/table/table-resizable-container.d.ts

@@ -1,11 +1,10 @@
 import type { CollectionKey } from "../../composables/use-collection.js";
-import type { TableColumnSize } from "../../composables/use-table-column-layout.js";
 import type { TableResizableContainerProps } from "./table.types.js";
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<TableResizableContainerProps & {
-        onResize?: ((widths: Map<CollectionKey, TableColumnSize>) => any) | undefined;
-        onResizeEnd?: ((widths: Map<CollectionKey, TableColumnSize>) => any) | undefined;
-        onResizeStart?: ((widths: Map<CollectionKey, TableColumnSize>) => any) | undefined;
+        onResize?: ((widths: Map<CollectionKey, import("../../utils/flex-sizing.js").FlexSize>) => any) | undefined;
+        onResizeEnd?: ((widths: Map<CollectionKey, import("../../utils/flex-sizing.js").FlexSize>) => any) | undefined;
+        onResizeStart?: ((widths: Map<CollectionKey, import("../../utils/flex-sizing.js").FlexSize>) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -14,7 +13,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     slots: {
         default?: () => unknown;
     };
-    emit: ((evt: "resize", widths: Map<CollectionKey, TableColumnSize>) => void) & ((evt: "resizeEnd", widths: Map<CollectionKey, TableColumnSize>) => void) & ((evt: "resizeStart", widths: Map<CollectionKey, TableColumnSize>) => void);
+    emit: ((evt: "resize", widths: Map<CollectionKey, import("../../utils/flex-sizing.js").FlexSize>) => void) & ((evt: "resizeEnd", widths: Map<CollectionKey, import("../../utils/flex-sizing.js").FlexSize>) => void) & ((evt: "resizeStart", widths: Map<CollectionKey, import("../../utils/flex-sizing.js").FlexSize>) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/table/table-row.js

@@ -2,9 +2,10 @@ import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
 import { useId as useId$1 } from "../../composables/use-id.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { useVirtualizerItem } from "../virtualizer/use-virtualizer-item.js";
 import { visuallyHiddenStyle } from "../../utils/visually-hidden.js";
 import { provideTableRowContext, useTableContext, useTableGridContext, useTableVirtualizerContext } from "./table.context.js";
-import { createTableRegistry, isTableCellControl, tableCellId } from "../../composables/use-table-collection.js";
+import { createTableRegistry, isTableCellControl, tableCellId } from "./use-table-collection.js";
 import { computed, createDynamicComponent, createIf, createSlot, defineVaporComponent, extend, on, renderEffect, setDynamicProps, setStaticTemplateRef, shallowRef, template, unref, watch } from "vue";
 //#region src/components/table/table-row.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>");
@@ -43,14 +44,14 @@ var table_row_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 				return columnKey != null && rowHeaders.has(columnKey);
 			}).map((key) => cells.getItem(key)?.textValue() ?? "").filter(Boolean).join(" ");
 		};
-		watch(element, (current, _previous, onCleanup) => {
+		watch([element, rowKey], ([current, key], _previous, onCleanup) => {
 			if (!current) return;
-			onCleanup(collection.rows.register(rowKey.value, {
+			onCleanup(collection.rows.register(key, {
 				element: () => element.value,
 				isDisabled: () => false,
 				textValue
 			}));
-			onCleanup(collection.tree.register(rowKey.value, {
+			onCleanup(collection.tree.register(key, {
 				element: () => element.value,
 				hasChildRows: () => hasChildRows.value,
 				level: () => props.level ?? 0,
@@ -76,7 +77,9 @@ var table_row_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		*/
 		const draggable = dragState && dragAndDropHooks?.useDraggableItem ? dragAndDropHooks.useDraggableItem({
 			hasDragButton: true,
-			key: rowKey.value
+			get key() {
+				return rowKey.value;
+			}
 		}, dragState) : null;
 		/**
 		* Dropping **on** the row, as an element a screen reader can reach.
@@ -86,20 +89,29 @@ var table_row_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		* The gaps between rows are `Table.DropIndicator`, placed by the caller.
 		*/
 		const dropIndicatorElement = shallowRef(null);
-		const dropIndicator = dropState && dragAndDropHooks?.useDropIndicator ? dragAndDropHooks.useDropIndicator({ target: {
+		const dropTarget = computed(() => ({
 			dropPosition: "on",
 			key: rowKey.value,
 			type: "item"
+		}));
+		const dropIndicator = dropState && dragAndDropHooks?.useDropIndicator ? dragAndDropHooks.useDropIndicator({ get target() {
+			return dropTarget.value;
 		} }, dropState, dropIndicatorElement) : null;
 		const isDragging = computed(() => dragState?.isDragging(rowKey.value) ?? false);
 		const isDropTarget = computed(() => dropIndicator?.isDropTarget.value ?? false);
 		const allowsDragging = computed(() => draggable != null);
-		/** Attributes from the drag half. Never listeners — Vapor re-attaches every `on*` key spread
-		* through `v-bind` on each render, so those are wired statically with `@event` instead. */
+		/**
+		* Attributes from the drag half, bound by name below. Never listeners — Vapor re-attaches every
+		* `on*` key spread through `v-bind` on each render, so those are wired statically with `@event`.
+		* Not spread either: an object spread onto the element turns every attribute on it into a merged
+		* lookup, paid on every mount, and a windowed row mounts on every scroll.
+		*/
 		const dragAttrs = computed(() => draggable?.attrs.value ?? {});
+		let claimedCells = 0;
 		provideTableRowContext({
 			ariaLabelledBy,
 			cells,
+			claimCellIndex: () => claimedCells++,
 			drag: draggable,
 			hasChildRows,
 			isDisabled,
@@ -124,6 +136,20 @@ var table_row_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		* body's first row is two. A tree grid reports depth instead, exactly as React Aria does.
 		*/
 		const virtualizer = useTableVirtualizerContext();
+		/**
+		* Where the row sits, when the table is windowed.
+		*
+		* The row is its own wrapper: it carries the geometry the layout gave it rather than sitting inside
+		* an element that does. Every row of the window mounts on a scroll that moves it, and a wrapper
+		* would be a second component and a second element for each of them.
+		*/
+		const layoutInfo = computed(() => virtualizer ? virtualizer.getLayoutInfo(rowKey.value) : null);
+		const parentLayoutInfo = computed(() => virtualizer ? virtualizer.getLayoutInfo(virtualizer.collection.value.bodyKey) : null);
+		const placement = virtualizer ? useVirtualizerItem({
+			element,
+			layoutInfo: () => layoutInfo.value,
+			parentLayoutInfo: () => parentLayoutInfo.value
+		}) : null;
 		const ariaRowIndex = computed(() => {
 			if (!virtualizer || isTree.value) return void 0;
 			const index = collection.rows.getIndex(rowKey.value);
@@ -158,7 +184,11 @@ var table_row_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 				}, 4);
 			}, { _: 8 }));
 		});
-		const n6 = createDynamicComponent(() => unref(virtualizer) ? "div" : "tr", { $: [() => dragAttrs.value, {
+		const _on_drag = ($event) => unref(draggable)?.handlers.onDrag($event);
+		const _on_dragend = ($event) => unref(draggable)?.handlers.onDragend($event);
+		const _on_dragstart = ($event) => unref(draggable)?.handlers.onDragstart($event);
+		const n6 = createDynamicComponent(() => unref(virtualizer) ? "div" : "tr", {
+			"aria-describedby": () => dragAttrs.value["aria-describedby"],
 			"aria-disabled": () => isDisabled.value || void 0,
 			"aria-expanded": () => isTree.value && hasChildRows.value ? isExpanded.value : void 0,
 			"aria-labelledby": () => ariaLabelledBy.value || void 0,
@@ -183,19 +213,20 @@ var table_row_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 			"data-selected": () => unref(dataAttr)(isSelected.value),
 			"data-selection-mode": () => selectionMode.value === "none" ? void 0 : selectionMode.value,
 			"data-slot": "table-row",
+			draggable: () => dragAttrs.value.draggable,
 			role: "row",
-			style: () => ({ "--table-row-level": level.value }),
+			style: () => [unref(placement)?.style.value, { "--table-row-level": level.value }],
 			tabindex: () => unref(keyboard).rowTabIndex(rowKey.value),
 			onBlur: () => unref(states).onBlur,
 			onClick: () => onClick,
-			onDrag: () => ($event) => unref(draggable)?.handlers.onDrag($event),
-			onDragend: () => ($event) => unref(draggable)?.handlers.onDragend($event),
-			onDragstart: () => ($event) => unref(draggable)?.handlers.onDragstart($event),
+			onDrag: () => _on_drag,
+			onDragend: () => _on_dragend,
+			onDragstart: () => _on_dragstart,
 			onFocus: () => onFocus,
 			onPointerdown: () => unref(states).onPointerdown,
 			onPointerenter: () => unref(states).onPointerenter,
 			onPointerleave: () => unref(states).onPointerleave
-		}] }, extend(() => {
+		}, extend(() => {
 			return createSlot("default", {
 				allowsDragging: () => allowsDragging.value,
 				hasChildRows: () => hasChildRows.value,

package/dist/components/table/table-virtualizer-item.d.ts

@@ -1,11 +1,6 @@
-import type { LayoutInfo } from "../../utils/virtualizer-layout-info.js";
+import type { VirtualizerItemProps } from "../virtualizer/virtualizer.types.js";
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
-    props: import('vue').PublicProps & __VLS_PrettifyLocal<{
-        /** Where this part goes, or `null` while the layout cannot say yet. */
-        layoutInfo?: LayoutInfo | null;
-        /** The enclosing part's layout info, which the offset is relative to. */
-        parentLayoutInfo?: LayoutInfo | null;
-    }> & (typeof globalThis extends {
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<VirtualizerItemProps> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;

package/dist/components/table/table-virtualizer-item.js

@@ -1,9 +1,10 @@
-import virtualizer_item_default from "../virtualizer/virtualizer-item.js";
+import { useVirtualizerItem } from "../virtualizer/use-virtualizer-item.js";
 import { useTableVirtualizerContext } from "./table.context.js";
-import { createComponent, createIf, createSlot, defineVaporComponent, extend, unref } from "vue";
+import { createIf, createSlot, defineVaporComponent, renderEffect, setInsertionState, setStaticTemplateRef, setStyle, shallowRef, template, unref } from "vue";
 //#region src/components/table/table-virtualizer-item.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div role=presentation>", 1);
 /**
-* A `VirtualizerItem` wrapper for a table part, or nothing at all.
+* The wrapper around a part of a virtualized table, or nothing at all.
 *
 * A part of a virtualized table sits inside a wrapper carrying the geometry the layout worked out
 * for it, and a part of a plain table sits inside nothing. That is one element's difference in
@@ -14,6 +15,10 @@ import { createComponent, createIf, createSlot, defineVaporComponent, extend, un
 * column's geometry only exists once the column has registered itself from the DOM, so a wrapper
 * conditional on the geometry would destroy the element whose registration created it, unregister
 * it, and flap between the two branches for ever.
+*
+* The wrapper is rendered here rather than delegated to `VirtualizerItem`: a drop indicator mounts
+* one of these for every row of the window, and a scroll that replaces the window pays for every
+* component instance in it. Rows and cells go further and carry their geometry themselves.
 */
 var table_virtualizer_item_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "table-virtualizer-item",
@@ -24,13 +29,19 @@ var table_virtualizer_item_vue_vue_type_script_setup_true_vapor_true_lang_defaul
 	setup(__props) {
 		const props = __props;
 		const isVirtualized = useTableVirtualizerContext() != null;
+		const element = shallowRef(null);
+		const style = isVirtualized ? useVirtualizerItem({
+			element,
+			layoutInfo: () => props.layoutInfo,
+			parentLayoutInfo: () => props.parentLayoutInfo
+		}).style : null;
 		return createIf(() => isVirtualized, () => {
-			return createComponent(unref(virtualizer_item_default), {
-				"layout-info": () => props.layoutInfo,
-				"parent-layout-info": () => props.parentLayoutInfo
-			}, extend(() => {
-				return createSlot("default", null, null, 36);
-			}, { _: 8 }), true);
+			const n3 = t0();
+			renderEffect(() => setStyle(n3, unref(style)));
+			setInsertionState(n3);
+			createSlot();
+			setStaticTemplateRef(n3, element, null, "element");
+			return n3;
 		}, () => {
 			return createSlot();
 		}, 261);

package/dist/components/table/table.context.d.ts

@@ -1,16 +1,16 @@
-import type { TableCellMeta, TableCollectionItems, TableRegistry, UseTableCollectionReturn } from "../../composables/index.js";
 import type { CollectionKey } from "../../composables/use-collection.js";
 import type { DragAndDropHooks } from "../../composables/use-drag-and-drop.js";
 import type { UseDraggableCollectionStateReturn } from "../../composables/use-draggable-collection-state.js";
 import type { UseDraggableItemReturn } from "../../composables/use-draggable-item.js";
 import type { UseDroppableCollectionStateReturn } from "../../composables/use-droppable-collection-state.js";
-import type { UseGridKeyboardReturn } from "../../composables/use-grid-keyboard.js";
 import type { UseSelectionManagerReturn } from "../../composables/use-selection-manager.js";
-import type { TableColumnSize, UseTableColumnLayoutReturn } from "../../composables/use-table-column-layout.js";
 import type { VirtualizerView } from "../../composables/use-virtualizer.js";
 import type { VirtualizerTableCollection } from "../../utils/virtualizer-collection.js";
 import type { LayoutInfo, VirtualizerKey } from "../../utils/virtualizer-layout-info.js";
 import type { TableSortDescriptor, TableSortDirection } from "./table.types.js";
+import type { UseGridKeyboardReturn } from "./use-grid-keyboard.js";
+import type { TableCellMeta, TableCollectionItems, TableRegistry, UseTableCollectionReturn } from "./use-table-collection.js";
+import type { TableColumnSize, UseTableColumnLayoutReturn } from "./use-table-column-layout.js";
 import type { tableVariants } from "@ropav/styles";
 import type { ComputedRef } from "vue";
 export interface TableContext {
@@ -74,6 +74,14 @@ export interface TableRowContext {
     ariaLabelledBy: ComputedRef<string>;
     /** The cells of this row, which is how a cell learns which column it sits under. */
     cells: TableRegistry<TableCellMeta>;
+    /**
+     * The position a cell takes among its siblings until the registry has read the DOM.
+     *
+     * Cells set up in template order, so the count of those before it is where a cell sits — and
+     * knowing it during the first render is what lets a windowed cell be placed under its column
+     * the moment it mounts, rather than a tick later in a second pass over every cell of the row.
+     */
+    claimCellIndex: () => number;
     /**
      * What `Table.DragHandle` needs to turn a pressable into this row's drag control, or `null`
      * when the table is not draggable.

package/dist/components/table/table.types.d.ts

@@ -1,8 +1,8 @@
 import type { CollectionKey } from "../../composables/use-collection.js";
 import type { DragAndDropHooks } from "../../composables/use-drag-and-drop.js";
 import type { DisabledBehavior, SelectionBehavior, SelectionMode } from "../../composables/use-selection-manager.js";
-import type { TableColumnSize } from "../../composables/use-table-column-layout.js";
 import type { DropTarget } from "../../utils/dnd-types.js";
+import type { TableColumnSize } from "./use-table-column-layout.js";
 import type { CheckboxVariants, TableVariants } from "@ropav/styles";
 export interface TableRootProps {
     class?: string;

package/dist/{composables → components/table}/use-grid-keyboard.d.ts

@@ -1,6 +1,6 @@
-import type { CollectionKey } from "./use-collection.js";
-import type { ListKeyboardLayoutDelegate } from "./use-list-keyboard.js";
-import type { UseSelectionManagerReturn } from "./use-selection-manager.js";
+import type { CollectionKey } from "../../composables/use-collection.js";
+import type { ListKeyboardLayoutDelegate } from "../../composables/use-list-keyboard.js";
+import type { UseSelectionManagerReturn } from "../../composables/use-selection-manager.js";
 import type { UseTableCollectionReturn } from "./use-table-collection.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
 /**