@shtabapp/ui-kit 1.85.0 → 1.85.2

package/dist/components/STable/utils/useTableVirtualRows.cjs

@@ -0,0 +1,251 @@
+const require_useTableScrollScale = require("./useTableScrollScale.cjs");
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+let _tanstack_vue_virtual = require("@tanstack/vue-virtual");
+//#region src/components/STable/utils/useTableVirtualRows.ts
+/**
+* Оконная математика поверх @tanstack/vue-virtual для спейсерной виртуализации:
+* строки рендерятся in-flow, вырезанное компенсируют два спейсер-`<tr>` (формула
+* TanStack discussion #476). Замер высот — ручной батч offsetHeight → resizeItem
+* в post-flush (DOM-пул строк несовместим со штатным measureElement: ref-каллбек
+* не перевызывается при смене data-index у переиспользованного элемента).
+* resizeItem сам компенсирует scrollTop при перемере строк выше вьюпорта.
+*/
+var useTableVirtualRows = ({ rowCount, enabled, autoMeasure, estimateRowSize, estimateRowSizeByIndex, overscan, scrollElement, getRowKey, rowsVersion, viewportHeight, extraHeight, headerHeight }) => {
+	let reportModelOffset;
+	const scrollScale = require_useTableScrollScale.useTableScrollScale({
+		scrollElement,
+		totalSize: () => rowVirtualizer.value.getTotalSize(),
+		viewportHeight,
+		extraHeight,
+		onRescale: (modelOffset) => {
+			reportModelOffset?.(modelOffset, false);
+		}
+	});
+	const scrollLookaheadRows = (0, vue.shallowRef)(0);
+	let previousModelOffset = 0;
+	const trackScrollLookahead = (modelOffset, isScrolling, rowSize) => {
+		const deltaRows = Math.round((modelOffset - previousModelOffset) / rowSize);
+		previousModelOffset = modelOffset;
+		scrollLookaheadRows.value = isScrolling ? Math.max(-24, Math.min(24, deltaRows)) : 0;
+	};
+	const rowVirtualizer = (0, _tanstack_vue_virtual.useVirtualizer)((0, vue.computed)(() => {
+		const estimateDefault = (0, vue.toValue)(estimateRowSize);
+		return {
+			count: (0, vue.toValue)(rowCount),
+			enabled: (0, vue.toValue)(enabled),
+			getScrollElement: () => scrollElement.value,
+			estimateSize: (rowIndex) => {
+				return estimateRowSizeByIndex?.(rowIndex) ?? estimateDefault;
+			},
+			getItemKey: getRowKey,
+			overscan: (0, vue.toValue)(overscan),
+			shouldAdjustScrollPositionOnItemSizeChange: () => false,
+			observeElementOffset: (instance, reportOffset) => {
+				reportModelOffset = reportOffset;
+				return (0, _tanstack_vue_virtual.observeElementOffset)(instance, (uiOffset, isScrolling) => {
+					const modelOffset = scrollScale.uiToModel(uiOffset);
+					trackScrollLookahead(modelOffset, isScrolling, estimateDefault);
+					reportOffset(modelOffset, isScrolling);
+				});
+			},
+			scrollToFn: (modelOffset, options, instance) => {
+				(0, _tanstack_vue_virtual.elementScroll)(scrollScale.modelToUi(modelOffset + (options.adjustments ?? 0)), { behavior: options.behavior }, instance);
+			}
+		};
+	}));
+	const virtualItems = (0, vue.computed)(() => {
+		if (!(0, vue.toValue)(enabled)) return [];
+		return rowVirtualizer.value.getVirtualItems();
+	});
+	const totalSize = (0, vue.computed)(() => {
+		return rowVirtualizer.value.getTotalSize();
+	});
+	const buildIndexRange = (fromIndex, toIndex) => {
+		return Array.from({ length: Math.max(0, toIndex - fromIndex + 1) }, (_item, offset) => {
+			return fromIndex + offset;
+		});
+	};
+	/** Границы запаса за окном: вниз — за последней строкой окна, вверх — перед первой. */
+	const resolveLookaheadBounds = (items, lookahead) => {
+		const firstItem = items[0];
+		const lastItem = items[items.length - 1];
+		if (!firstItem || !lastItem) return;
+		return lookahead > 0 ? [lastItem.index + 1, Math.min((0, vue.toValue)(rowCount) - 1, lastItem.index + lookahead)] : [Math.max(0, firstItem.index + lookahead), firstItem.index - 1];
+	};
+	const windowIndexes = (0, vue.computed)(() => {
+		const items = virtualItems.value;
+		const indexes = items.map((virtualItem) => virtualItem.index);
+		const lookahead = scrollLookaheadRows.value;
+		const bounds = lookahead === 0 ? void 0 : resolveLookaheadBounds(items, lookahead);
+		if (!bounds) return indexes;
+		const lookaheadIndexes = buildIndexRange(bounds[0], bounds[1]);
+		return lookahead > 0 ? [...indexes, ...lookaheadIndexes] : [...lookaheadIndexes, ...indexes];
+	});
+	/**
+	* Замер высот (rowHeightMode auto) с двумя оптимизациями против дорогого
+	* forced-layout (профиль heavy-ячеек: ~8мс/свап на чтениях rect):
+	* 1) меряются только ещё не измеренные индексы (measuredIndexSet);
+	* 2) при дальних прыжках замер откладывается на пост-paint кадр (layout уже
+	*    чист) — синхронно в post-flush меряется только соседний скролл ВВЕРХ,
+	*    где дельта строк выше вьюпорта должна компенсироваться scrollTop до
+	*    paint (upward-fix, deviation-класс как у Virtuoso).
+	*/
+	const measuredKeySet = /* @__PURE__ */ new Set();
+	/**
+	* Индекс строки, пригодной к замеру. Плашки прогрессивной гидрации пропускаются:
+	* их высота — оценка, а не контент; они домеряются после полного рендера.
+	*/
+	const resolveMeasurableRowIndex = (rowElement) => {
+		if (!(rowElement instanceof HTMLElement) || rowElement.dataset.placeholder) return;
+		const rowIndex = Number(rowElement.dataset.index);
+		return Number.isInteger(rowIndex) ? rowIndex : void 0;
+	};
+	const measureRows = (onlyUnmeasured) => {
+		if (!(0, vue.toValue)(enabled) || !(0, vue.toValue)(autoMeasure)) return;
+		const container = scrollElement.value;
+		if (!container) return;
+		const rowElements = container.querySelectorAll("tr[data-index]");
+		const pendingRows = [];
+		rowElements.forEach((rowElement) => {
+			const rowIndex = resolveMeasurableRowIndex(rowElement);
+			if (rowIndex === void 0 || !(rowElement instanceof HTMLElement)) return;
+			if (!onlyUnmeasured || !measuredKeySet.has(getRowKey(rowIndex))) pendingRows.push(rowElement);
+		});
+		if (pendingRows.length === 0) return;
+		const measurements = rowVirtualizer.value.measurementsCache;
+		const bandTop = container.getBoundingClientRect().top + (0, vue.toValue)(headerHeight);
+		const modelOffsetBefore = scrollScale.resolveModelOffset(container);
+		const measuredRows = [];
+		let anchorRowIndex = Number.POSITIVE_INFINITY;
+		pendingRows.forEach((rowElement) => {
+			const rowIndex = Number(rowElement.dataset.index);
+			const rowRect = rowElement.getBoundingClientRect();
+			measuredRows.push([rowIndex, Math.round(rowRect.height)]);
+			if (rowRect.bottom > bandTop + 1 && rowIndex < anchorRowIndex) anchorRowIndex = rowIndex;
+		});
+		let aboveAnchorDelta = 0;
+		measuredRows.forEach(([rowIndex, rowHeight]) => {
+			if (rowHeight <= 0) return;
+			measuredKeySet.add(getRowKey(rowIndex));
+			const previousSize = measurements[rowIndex]?.size;
+			if (rowIndex < anchorRowIndex && previousSize !== void 0) aboveAnchorDelta += rowHeight - previousSize;
+			rowVirtualizer.value.resizeItem(rowIndex, rowHeight);
+		});
+		if (aboveAnchorDelta !== 0) scrollScale.setScrollTop(container, scrollScale.modelToUi(modelOffsetBefore + aboveAnchorDelta), modelOffsetBefore + aboveAnchorDelta);
+	};
+	(0, vue.watch)(windowIndexes, () => measureRows(true), { flush: "post" });
+	/** Домер ещё не измеренных строк окна: плашки гидрации сменились контентом. */
+	const measureNewRows = () => {
+		measureRows(true);
+	};
+	/** Полный перемер окна (ресайз колонок/контейнера, внешние изменения контента). */
+	const measureWindowRows = () => {
+		measuredKeySet.clear();
+		measureRows(false);
+	};
+	(0, _vueuse_core.useResizeObserver)(scrollElement, () => {
+		measureWindowRows();
+	});
+	(0, vue.watch)(() => (0, vue.toValue)(rowsVersion), () => {
+		measuredKeySet.clear();
+		measureRows(false);
+	}, { flush: "post" });
+	/**
+	* Выравнивание для `auto` — правило TanStack getOffsetForIndex в модельных координатах.
+	* Полоса видимых строк короче вьюпорта на шапку и полосы tfoot (extraHeight).
+	*/
+	const resolveScrollAlign = (align, measurement) => {
+		if (align !== "auto") return align;
+		const rowsViewport = (0, vue.toValue)(viewportHeight) - (0, vue.toValue)(extraHeight);
+		const currentOffset = scrollScale.modelScrollOffset.value;
+		if (measurement.end >= currentOffset + rowsViewport) return "end";
+		return measurement.start <= currentOffset ? "start" : void 0;
+	};
+	const resolveAlignedOffset = (align, measurement) => {
+		const rowsViewport = (0, vue.toValue)(viewportHeight) - (0, vue.toValue)(extraHeight);
+		if (align === "start") return measurement.start;
+		if (align === "end") return measurement.end - rowsViewport;
+		return measurement.start - (rowsViewport - measurement.size) / 2;
+	};
+	/**
+	* Целевой модельный офсет при сжатии: копия getOffsetForIndex TanStack, но без его
+	* DOM-клампа по scrollHeight (тот приватный и в UI-координатах). Для последней строки
+	* `end` даёт ровно maxModelScrollTop.
+	*/
+	const resolveCompressedScrollOffset = (rowIndex, align) => {
+		const measurements = rowVirtualizer.value.measurementsCache;
+		const measurement = measurements[Math.max(0, Math.min(rowIndex, measurements.length - 1))];
+		if (!measurement) return;
+		const resolvedAlign = resolveScrollAlign(align, measurement);
+		if (!resolvedAlign) return;
+		const alignedOffset = resolveAlignedOffset(resolvedAlign, measurement);
+		return Math.max(0, Math.min(scrollScale.maxModelScrollTop.value, alignedOffset));
+	};
+	const scrollToIndex = (rowIndex, align = "auto") => {
+		const container = scrollElement.value;
+		if (!scrollScale.active.value || !container) {
+			rowVirtualizer.value.scrollToIndex(rowIndex, { align });
+			return;
+		}
+		const modelOffset = resolveCompressedScrollOffset(rowIndex, align);
+		if (modelOffset !== void 0) scrollScale.setScrollTop(container, scrollScale.modelToUi(modelOffset), modelOffset);
+	};
+	/** Видимый диапазон без overscan (для выбора активных sticky-строк). */
+	const visibleRange = (0, vue.computed)(() => {
+		if (!(0, vue.toValue)(enabled) || virtualItems.value.length === 0) return;
+		return rowVirtualizer.value.range ?? void 0;
+	});
+	/** Индекс строки, находящейся на заданном офсете контента (бинпоиск по измерениям). */
+	const getRowIndexAtOffset = (contentOffset) => {
+		const measurements = rowVirtualizer.value.measurementsCache;
+		if (measurements.length === 0) return;
+		let lowIndex = 0;
+		let highIndex = measurements.length - 1;
+		while (lowIndex < highIndex) {
+			const middleIndex = Math.floor((lowIndex + highIndex) / 2);
+			const middleMeasurement = measurements[middleIndex];
+			if (!middleMeasurement) return;
+			if (middleMeasurement.end <= contentOffset) lowIndex = middleIndex + 1;
+			else highIndex = middleIndex;
+		}
+		return lowIndex;
+	};
+	/** Виртуальный офсет строки по индексу (для спейсер-сплита вокруг форс-строк). */
+	const getRowOffset = (rowIndex) => {
+		const measurement = rowVirtualizer.value.measurementsCache[rowIndex];
+		if (!measurement) return;
+		return {
+			start: measurement.start,
+			end: measurement.end
+		};
+	};
+	/** Офсет строки в UI-координатах tbody: модельный минус сдвиг сжатия. */
+	const getRowUiOffset = (rowIndex) => {
+		const rowOffset = getRowOffset(rowIndex);
+		if (!rowOffset) return;
+		const shift = scrollScale.uiShift.value;
+		return {
+			start: rowOffset.start - shift,
+			end: rowOffset.end - shift
+		};
+	};
+	return {
+		rowVirtualizer,
+		virtualItems,
+		windowIndexes,
+		totalSize,
+		uiTotalSize: scrollScale.uiTotalSize,
+		modelScrollOffset: scrollScale.modelScrollOffset,
+		scrollCompressed: scrollScale.active,
+		measureWindowRows,
+		measureNewRows,
+		scrollToIndex,
+		visibleRange,
+		getRowOffset,
+		getRowUiOffset,
+		getRowIndexAtOffset
+	};
+};
+//#endregion
+exports.useTableVirtualRows = useTableVirtualRows;

package/dist/components/STable/utils/useTableVirtualRows.js

@@ -0,0 +1,251 @@
+import { useTableScrollScale } from "./useTableScrollScale.js";
+import { computed, shallowRef, toValue, watch } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { elementScroll, observeElementOffset, useVirtualizer } from "@tanstack/vue-virtual";
+//#region src/components/STable/utils/useTableVirtualRows.ts
+/**
+* Оконная математика поверх @tanstack/vue-virtual для спейсерной виртуализации:
+* строки рендерятся in-flow, вырезанное компенсируют два спейсер-`<tr>` (формула
+* TanStack discussion #476). Замер высот — ручной батч offsetHeight → resizeItem
+* в post-flush (DOM-пул строк несовместим со штатным measureElement: ref-каллбек
+* не перевызывается при смене data-index у переиспользованного элемента).
+* resizeItem сам компенсирует scrollTop при перемере строк выше вьюпорта.
+*/
+var useTableVirtualRows = ({ rowCount, enabled, autoMeasure, estimateRowSize, estimateRowSizeByIndex, overscan, scrollElement, getRowKey, rowsVersion, viewportHeight, extraHeight, headerHeight }) => {
+	let reportModelOffset;
+	const scrollScale = useTableScrollScale({
+		scrollElement,
+		totalSize: () => rowVirtualizer.value.getTotalSize(),
+		viewportHeight,
+		extraHeight,
+		onRescale: (modelOffset) => {
+			reportModelOffset?.(modelOffset, false);
+		}
+	});
+	const scrollLookaheadRows = shallowRef(0);
+	let previousModelOffset = 0;
+	const trackScrollLookahead = (modelOffset, isScrolling, rowSize) => {
+		const deltaRows = Math.round((modelOffset - previousModelOffset) / rowSize);
+		previousModelOffset = modelOffset;
+		scrollLookaheadRows.value = isScrolling ? Math.max(-24, Math.min(24, deltaRows)) : 0;
+	};
+	const rowVirtualizer = useVirtualizer(computed(() => {
+		const estimateDefault = toValue(estimateRowSize);
+		return {
+			count: toValue(rowCount),
+			enabled: toValue(enabled),
+			getScrollElement: () => scrollElement.value,
+			estimateSize: (rowIndex) => {
+				return estimateRowSizeByIndex?.(rowIndex) ?? estimateDefault;
+			},
+			getItemKey: getRowKey,
+			overscan: toValue(overscan),
+			shouldAdjustScrollPositionOnItemSizeChange: () => false,
+			observeElementOffset: (instance, reportOffset) => {
+				reportModelOffset = reportOffset;
+				return observeElementOffset(instance, (uiOffset, isScrolling) => {
+					const modelOffset = scrollScale.uiToModel(uiOffset);
+					trackScrollLookahead(modelOffset, isScrolling, estimateDefault);
+					reportOffset(modelOffset, isScrolling);
+				});
+			},
+			scrollToFn: (modelOffset, options, instance) => {
+				elementScroll(scrollScale.modelToUi(modelOffset + (options.adjustments ?? 0)), { behavior: options.behavior }, instance);
+			}
+		};
+	}));
+	const virtualItems = computed(() => {
+		if (!toValue(enabled)) return [];
+		return rowVirtualizer.value.getVirtualItems();
+	});
+	const totalSize = computed(() => {
+		return rowVirtualizer.value.getTotalSize();
+	});
+	const buildIndexRange = (fromIndex, toIndex) => {
+		return Array.from({ length: Math.max(0, toIndex - fromIndex + 1) }, (_item, offset) => {
+			return fromIndex + offset;
+		});
+	};
+	/** Границы запаса за окном: вниз — за последней строкой окна, вверх — перед первой. */
+	const resolveLookaheadBounds = (items, lookahead) => {
+		const firstItem = items[0];
+		const lastItem = items[items.length - 1];
+		if (!firstItem || !lastItem) return;
+		return lookahead > 0 ? [lastItem.index + 1, Math.min(toValue(rowCount) - 1, lastItem.index + lookahead)] : [Math.max(0, firstItem.index + lookahead), firstItem.index - 1];
+	};
+	const windowIndexes = computed(() => {
+		const items = virtualItems.value;
+		const indexes = items.map((virtualItem) => virtualItem.index);
+		const lookahead = scrollLookaheadRows.value;
+		const bounds = lookahead === 0 ? void 0 : resolveLookaheadBounds(items, lookahead);
+		if (!bounds) return indexes;
+		const lookaheadIndexes = buildIndexRange(bounds[0], bounds[1]);
+		return lookahead > 0 ? [...indexes, ...lookaheadIndexes] : [...lookaheadIndexes, ...indexes];
+	});
+	/**
+	* Замер высот (rowHeightMode auto) с двумя оптимизациями против дорогого
+	* forced-layout (профиль heavy-ячеек: ~8мс/свап на чтениях rect):
+	* 1) меряются только ещё не измеренные индексы (measuredIndexSet);
+	* 2) при дальних прыжках замер откладывается на пост-paint кадр (layout уже
+	*    чист) — синхронно в post-flush меряется только соседний скролл ВВЕРХ,
+	*    где дельта строк выше вьюпорта должна компенсироваться scrollTop до
+	*    paint (upward-fix, deviation-класс как у Virtuoso).
+	*/
+	const measuredKeySet = /* @__PURE__ */ new Set();
+	/**
+	* Индекс строки, пригодной к замеру. Плашки прогрессивной гидрации пропускаются:
+	* их высота — оценка, а не контент; они домеряются после полного рендера.
+	*/
+	const resolveMeasurableRowIndex = (rowElement) => {
+		if (!(rowElement instanceof HTMLElement) || rowElement.dataset.placeholder) return;
+		const rowIndex = Number(rowElement.dataset.index);
+		return Number.isInteger(rowIndex) ? rowIndex : void 0;
+	};
+	const measureRows = (onlyUnmeasured) => {
+		if (!toValue(enabled) || !toValue(autoMeasure)) return;
+		const container = scrollElement.value;
+		if (!container) return;
+		const rowElements = container.querySelectorAll("tr[data-index]");
+		const pendingRows = [];
+		rowElements.forEach((rowElement) => {
+			const rowIndex = resolveMeasurableRowIndex(rowElement);
+			if (rowIndex === void 0 || !(rowElement instanceof HTMLElement)) return;
+			if (!onlyUnmeasured || !measuredKeySet.has(getRowKey(rowIndex))) pendingRows.push(rowElement);
+		});
+		if (pendingRows.length === 0) return;
+		const measurements = rowVirtualizer.value.measurementsCache;
+		const bandTop = container.getBoundingClientRect().top + toValue(headerHeight);
+		const modelOffsetBefore = scrollScale.resolveModelOffset(container);
+		const measuredRows = [];
+		let anchorRowIndex = Number.POSITIVE_INFINITY;
+		pendingRows.forEach((rowElement) => {
+			const rowIndex = Number(rowElement.dataset.index);
+			const rowRect = rowElement.getBoundingClientRect();
+			measuredRows.push([rowIndex, Math.round(rowRect.height)]);
+			if (rowRect.bottom > bandTop + 1 && rowIndex < anchorRowIndex) anchorRowIndex = rowIndex;
+		});
+		let aboveAnchorDelta = 0;
+		measuredRows.forEach(([rowIndex, rowHeight]) => {
+			if (rowHeight <= 0) return;
+			measuredKeySet.add(getRowKey(rowIndex));
+			const previousSize = measurements[rowIndex]?.size;
+			if (rowIndex < anchorRowIndex && previousSize !== void 0) aboveAnchorDelta += rowHeight - previousSize;
+			rowVirtualizer.value.resizeItem(rowIndex, rowHeight);
+		});
+		if (aboveAnchorDelta !== 0) scrollScale.setScrollTop(container, scrollScale.modelToUi(modelOffsetBefore + aboveAnchorDelta), modelOffsetBefore + aboveAnchorDelta);
+	};
+	watch(windowIndexes, () => measureRows(true), { flush: "post" });
+	/** Домер ещё не измеренных строк окна: плашки гидрации сменились контентом. */
+	const measureNewRows = () => {
+		measureRows(true);
+	};
+	/** Полный перемер окна (ресайз колонок/контейнера, внешние изменения контента). */
+	const measureWindowRows = () => {
+		measuredKeySet.clear();
+		measureRows(false);
+	};
+	useResizeObserver(scrollElement, () => {
+		measureWindowRows();
+	});
+	watch(() => toValue(rowsVersion), () => {
+		measuredKeySet.clear();
+		measureRows(false);
+	}, { flush: "post" });
+	/**
+	* Выравнивание для `auto` — правило TanStack getOffsetForIndex в модельных координатах.
+	* Полоса видимых строк короче вьюпорта на шапку и полосы tfoot (extraHeight).
+	*/
+	const resolveScrollAlign = (align, measurement) => {
+		if (align !== "auto") return align;
+		const rowsViewport = toValue(viewportHeight) - toValue(extraHeight);
+		const currentOffset = scrollScale.modelScrollOffset.value;
+		if (measurement.end >= currentOffset + rowsViewport) return "end";
+		return measurement.start <= currentOffset ? "start" : void 0;
+	};
+	const resolveAlignedOffset = (align, measurement) => {
+		const rowsViewport = toValue(viewportHeight) - toValue(extraHeight);
+		if (align === "start") return measurement.start;
+		if (align === "end") return measurement.end - rowsViewport;
+		return measurement.start - (rowsViewport - measurement.size) / 2;
+	};
+	/**
+	* Целевой модельный офсет при сжатии: копия getOffsetForIndex TanStack, но без его
+	* DOM-клампа по scrollHeight (тот приватный и в UI-координатах). Для последней строки
+	* `end` даёт ровно maxModelScrollTop.
+	*/
+	const resolveCompressedScrollOffset = (rowIndex, align) => {
+		const measurements = rowVirtualizer.value.measurementsCache;
+		const measurement = measurements[Math.max(0, Math.min(rowIndex, measurements.length - 1))];
+		if (!measurement) return;
+		const resolvedAlign = resolveScrollAlign(align, measurement);
+		if (!resolvedAlign) return;
+		const alignedOffset = resolveAlignedOffset(resolvedAlign, measurement);
+		return Math.max(0, Math.min(scrollScale.maxModelScrollTop.value, alignedOffset));
+	};
+	const scrollToIndex = (rowIndex, align = "auto") => {
+		const container = scrollElement.value;
+		if (!scrollScale.active.value || !container) {
+			rowVirtualizer.value.scrollToIndex(rowIndex, { align });
+			return;
+		}
+		const modelOffset = resolveCompressedScrollOffset(rowIndex, align);
+		if (modelOffset !== void 0) scrollScale.setScrollTop(container, scrollScale.modelToUi(modelOffset), modelOffset);
+	};
+	/** Видимый диапазон без overscan (для выбора активных sticky-строк). */
+	const visibleRange = computed(() => {
+		if (!toValue(enabled) || virtualItems.value.length === 0) return;
+		return rowVirtualizer.value.range ?? void 0;
+	});
+	/** Индекс строки, находящейся на заданном офсете контента (бинпоиск по измерениям). */
+	const getRowIndexAtOffset = (contentOffset) => {
+		const measurements = rowVirtualizer.value.measurementsCache;
+		if (measurements.length === 0) return;
+		let lowIndex = 0;
+		let highIndex = measurements.length - 1;
+		while (lowIndex < highIndex) {
+			const middleIndex = Math.floor((lowIndex + highIndex) / 2);
+			const middleMeasurement = measurements[middleIndex];
+			if (!middleMeasurement) return;
+			if (middleMeasurement.end <= contentOffset) lowIndex = middleIndex + 1;
+			else highIndex = middleIndex;
+		}
+		return lowIndex;
+	};
+	/** Виртуальный офсет строки по индексу (для спейсер-сплита вокруг форс-строк). */
+	const getRowOffset = (rowIndex) => {
+		const measurement = rowVirtualizer.value.measurementsCache[rowIndex];
+		if (!measurement) return;
+		return {
+			start: measurement.start,
+			end: measurement.end
+		};
+	};
+	/** Офсет строки в UI-координатах tbody: модельный минус сдвиг сжатия. */
+	const getRowUiOffset = (rowIndex) => {
+		const rowOffset = getRowOffset(rowIndex);
+		if (!rowOffset) return;
+		const shift = scrollScale.uiShift.value;
+		return {
+			start: rowOffset.start - shift,
+			end: rowOffset.end - shift
+		};
+	};
+	return {
+		rowVirtualizer,
+		virtualItems,
+		windowIndexes,
+		totalSize,
+		uiTotalSize: scrollScale.uiTotalSize,
+		modelScrollOffset: scrollScale.modelScrollOffset,
+		scrollCompressed: scrollScale.active,
+		measureWindowRows,
+		measureNewRows,
+		scrollToIndex,
+		visibleRange,
+		getRowOffset,
+		getRowUiOffset,
+		getRowIndexAtOffset
+	};
+};
+//#endregion
+export { useTableVirtualRows };

package/dist/components/STabs/STabs.vue.cjs

@@ -0,0 +1,6 @@
+const require_STabs_vue_vue_type_script_setup_true_lang = require("./STabs.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                           */
+//#region src/components/STabs/STabs.vue
+var STabs_default = require_STabs_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = STabs_default;

package/dist/components/STabs/STabs.vue.js

@@ -0,0 +1,6 @@
+import STabs_vue_vue_type_script_setup_true_lang_default from "./STabs.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                         */
+//#region src/components/STabs/STabs.vue
+var STabs_default = STabs_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { STabs_default as default };

package/dist/components/STabs/STabs.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,133 @@
+const require_SButton_types = require("../SButton/SButton.types.cjs");
+const require_useSelectionGroup = require("../../composables/useSelectionGroup.cjs");
+const require_SButton = require("../SButton/SButton.vue.cjs");
+const require_useAriaAttrs = require("../../composables/useAriaAttrs.cjs");
+const require_context = require("./utils/context.cjs");
+const require_STab_types = require("../STab/STab.types.cjs");
+const require_useTabsIndicator = require("./utils/useTabsIndicator.cjs");
+let vue = require("vue");
+let _shtabapp_ui_kit_primitives = require("@shtabapp/ui-kit-primitives");
+let _vueuse_core = require("@vueuse/core");
+//#region src/components/STabs/STabs.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-tabs__body" };
+var _hoisted_2 = ["aria-disabled"];
+var STabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "STabs",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		appearance: { default: () => require_STab_types.ESTabAppearance.PRIMARY },
+		size: { default: () => require_STab_types.ESTabSize.LARGE },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		mandatory: {
+			type: Boolean,
+			default: true
+		},
+		addable: {
+			type: Boolean,
+			default: false
+		},
+		loop: {
+			type: Boolean,
+			default: true
+		}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ (0, vue.mergeModels)(["add"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		const { t } = (0, _shtabapp_ui_kit_primitives.useUiKitI18n)();
+		const { getRootAttrs, getAriaAttrs } = require_useAriaAttrs.useAriaAttrs();
+		const emit = __emit;
+		const tabsBodyRef = (0, vue.useTemplateRef)("tabsBodyRef");
+		const tabsTrackRef = (0, vue.useTemplateRef)("tabsTrackRef");
+		const { arrivedState } = (0, _vueuse_core.useScroll)(tabsBodyRef, {
+			throttle: 100,
+			offset: { right: 1 }
+		});
+		const selection = require_useSelectionGroup.useSelectionGroup({
+			modelValue: () => modelValue.value,
+			onUpdateModelValue: (next) => {
+				if (!require_useSelectionGroup.isSingleSelectionValue(next)) return;
+				modelValue.value = next;
+			},
+			mode: require_useSelectionGroup.ESelectionMode.SINGLE,
+			mandatory: () => __props.mandatory,
+			orientation: require_useSelectionGroup.ESelectionOrientation.HORIZONTAL,
+			loop: () => __props.loop
+		});
+		(0, vue.provide)(require_context.sTabsInjectionKey, {
+			mode: () => require_useSelectionGroup.ESelectionMode.SINGLE,
+			isSelected: selection.isSelected,
+			selectItem: selection.toggle,
+			registerItem: selection.registerItem,
+			getItemTabIndex: selection.getItemTabIndex,
+			getGroupTabIndex: selection.getGroupTabIndex,
+			handleItemKeydown: selection.handleItemKeydown,
+			appearance: () => __props.appearance,
+			size: () => __props.size,
+			disabled: () => __props.disabled
+		});
+		const showSlidingIndicator = (0, vue.computed)(() => __props.appearance === require_STab_types.ESTabAppearance.PRIMARY);
+		const { indicatorStyle, indicatorIsBilling } = require_useTabsIndicator.useTabsIndicator({
+			trackEl: () => tabsTrackRef.value,
+			selectedValue: () => modelValue.value,
+			enabled: showSlidingIndicator
+		});
+		const showFade = (0, vue.computed)(() => {
+			return __props.addable && !arrivedState.right;
+		});
+		const rootClasses = (0, vue.computed)(() => [
+			`s-ui-tabs--appearance-${__props.appearance}`,
+			`s-ui-tabs--size-${__props.size}`,
+			__props.addable ? "s-ui-tabs--addable" : void 0
+		]);
+		const handleAddClick = () => {
+			if (__props.disabled) return;
+			emit("add");
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ class: ["s-ui-tabs", rootClasses.value] }, (0, vue.unref)(getRootAttrs)()), [(0, vue.createElementVNode)("div", _hoisted_1, [(0, vue.createElementVNode)("div", {
+				ref_key: "tabsBodyRef",
+				ref: tabsBodyRef,
+				class: "s-ui-tabs__scroll"
+			}, [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({
+				ref_key: "tabsTrackRef",
+				ref: tabsTrackRef,
+				class: "s-ui-tabs__track",
+				role: "tablist",
+				"aria-orientation": "horizontal"
+			}, (0, vue.unref)(getAriaAttrs)(), { "aria-disabled": __props.disabled ? true : void 0 }), [showSlidingIndicator.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				key: 0,
+				class: (0, vue.normalizeClass)(["s-ui-tabs__indicator", { "s-ui-tabs__indicator--billing": (0, vue.unref)(indicatorIsBilling) }]),
+				style: (0, vue.normalizeStyle)((0, vue.unref)(indicatorStyle)),
+				"aria-hidden": "true"
+			}, null, 6)) : (0, vue.createCommentVNode)("", true), (0, vue.renderSlot)(_ctx.$slots, "default")], 16, _hoisted_2)], 512), __props.addable ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				key: 0,
+				class: (0, vue.normalizeClass)(["s-ui-tabs__fade", { "s-ui-tabs__fade--visible": showFade.value }]),
+				"aria-hidden": "true"
+			}, null, 2)) : (0, vue.createCommentVNode)("", true)]), __props.addable ? (0, vue.renderSlot)(_ctx.$slots, "add", { key: 0 }, () => [(0, vue.createVNode)((0, vue.unref)(require_SButton.default), {
+				class: "s-ui-tabs__add",
+				icon: "plus",
+				appearance: (0, vue.unref)(require_SButton_types.EButtonAppearance).BARE,
+				variant: (0, vue.unref)(require_SButton_types.EButtonVariant).NEUTRAL,
+				size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+				disabled: __props.disabled,
+				"aria-label": (0, vue.unref)(t)("tabs.add"),
+				onClick: handleAddClick
+			}, null, 8, [
+				"appearance",
+				"variant",
+				"size",
+				"disabled",
+				"aria-label"
+			])]) : (0, vue.createCommentVNode)("", true)], 16);
+		};
+	}
+});
+//#endregion
+exports.default = STabs_vue_vue_type_script_setup_true_lang_default;