@astryx-vue/core 0.2.6 → 0.4.0

package/dist/{useMergedRefs-CfHHlCsn.js → useMergedRefs-Cb6_w93m.js}

@@ -1,4 +1,4 @@
-import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-Cru9_00b.js";
+import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-B7cvG-_v.js";
 import { computed, shallowRef, toValue, useId } from "vue";
 //#region src/composables/useLayer.ts
 /**
@@ -54,16 +54,36 @@ function useLayer(options) {
 		};
 	});
 	const isMounted = computed(() => !toValue(options.lazyMount) || hasOpened.value);
-	function show() {
+	let isHiding = false;
+	let pendingShow = false;
+	function runShow() {
 		if (isOpen.value) return;
 		hasOpened.value = true;
 		isOpen.value = true;
 		options.onShow?.();
 	}
+	function show() {
+		if (isHiding) {
+			pendingShow = true;
+			queueMicrotask(() => {
+				if (!pendingShow) return;
+				pendingShow = false;
+				runShow();
+			});
+			return;
+		}
+		runShow();
+	}
 	function hide() {
+		pendingShow = false;
 		if (!isOpen.value) return;
-		isOpen.value = false;
-		options.onHide?.();
+		isHiding = true;
+		try {
+			isOpen.value = false;
+			options.onHide?.();
+		} finally {
+			isHiding = false;
+		}
 	}
 	useDismiss({
 		container: contentRef,

package/dist/{useNumberField-4-dIGVed.js → useNumberField-Dk1BE3-K.js}

@@ -18,7 +18,7 @@ function effectiveStep(step, integerOnly) {
 /**
 * 按步长网格走一格：以 min 为起点对齐，先取整再夹到范围内。
 */
-function steppedValue(options) {
+function computeSteppedValue(options) {
 	const { currentValue, direction, min, max, step, integerOnly } = options;
 	const stride = effectiveStep(step, integerOnly);
 	const stepBase = min != null && (!integerOnly || Number.isInteger(min)) ? min : 0;
@@ -52,7 +52,7 @@ function useNumberField(options) {
 	const readIntegerOnly = () => Boolean(toValue(options.integerOnly));
 	const locked = () => readDisabled() || readReadOnly();
 	function nextValue(direction) {
-		return steppedValue({
+		return computeSteppedValue({
 			currentValue: value.value,
 			direction,
 			min: readMin(),
@@ -125,4 +125,4 @@ function useNumberField(options) {
 	};
 }
 //#endregion
-export { useNumberField as t };
+export { useNumberField as n, computeSteppedValue as t };

package/dist/useOptionActionGrid-CkJcuvaU.js

@@ -0,0 +1,97 @@
+import { cloneVNode, computed, defineComponent, h, isVNode, ref, watch } from "vue";
+//#region src/selectors/optionAction.ts
+function isOptionAction(value) {
+	if (value == null || value === false) return false;
+	return isVNode(value) || typeof value === "object" || typeof value === "function";
+}
+//#endregion
+//#region src/selectors/optionActionView.ts
+/** 把调用方的操作画出来，不另包一层标签。缺 id 时补上，读屏才能指到它。 */
+const OptionAction = defineComponent({
+	name: "AstryxOptionAction",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		domId: {
+			type: String,
+			required: true
+		}
+	},
+	setup(props) {
+		return () => {
+			const node = props.node;
+			if (!isVNode(node)) return h(node, { id: props.domId });
+			if (typeof node.props?.id === "string" && node.props.id !== "") return node;
+			return cloneVNode(node, { id: props.domId });
+		};
+	}
+});
+//#endregion
+//#region src/selectors/useOptionActionGrid.ts
+/**
+* 选项操作的键盘列。上一项、下一项仍交给列表模型。
+* 行末方向键走到操作，行首方向键走回选项。搜索框里只有光标已经顶到边上才接管。
+*/
+function useOptionActionGrid(options) {
+	const column = ref("option");
+	watch(() => options.activeIndex.value, () => {
+		column.value = "option";
+	});
+	watch(options.isOpen, (open) => {
+		if (!open) column.value = "option";
+	});
+	function towardAction(event) {
+		return options.getListbox() != null && getComputedStyle(options.getListbox()).direction === "rtl" ? event.key === "ArrowLeft" : event.key === "ArrowRight";
+	}
+	function towardOption(event) {
+		return options.getListbox() != null && getComputedStyle(options.getListbox()).direction === "rtl" ? event.key === "ArrowRight" : event.key === "ArrowLeft";
+	}
+	function caretAllows(event, edge) {
+		const target = event.target;
+		if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) return true;
+		const point = edge === "end" ? target.value.length : 0;
+		return target.selectionStart === point && target.selectionEnd === point;
+	}
+	function activate(index) {
+		const id = options.actionId(index);
+		const listed = options.getListbox()?.querySelector(`#${CSS.escape(id)}`);
+		(listed?.matches("button, a, input, [role=\"button\"]") ? listed : listed?.querySelector("button, a, input, [role=\"button\"]"))?.click();
+	}
+	/** 返回 true 表示这个键已经用掉，不要再交给列表模型。 */
+	function onKeyDown(event) {
+		if (!options.enabled() || !options.isOpen() || options.activeIndex.value < 0) return false;
+		const index = options.activeIndex.value;
+		if (towardAction(event) && column.value === "option" && options.rowHasAction(index) && caretAllows(event, "end")) {
+			event.preventDefault();
+			column.value = "action";
+			return true;
+		}
+		if (towardOption(event) && column.value === "action" && caretAllows(event, "start")) {
+			event.preventDefault();
+			column.value = "option";
+			return true;
+		}
+		if (column.value !== "action") return false;
+		const typingSpace = event.key === " " && event.target instanceof HTMLInputElement;
+		if ((event.key === "Enter" || event.key === " ") && !typingSpace) {
+			event.preventDefault();
+			activate(index);
+			return true;
+		}
+		return false;
+	}
+	return {
+		column,
+		onKeyDown,
+		activeDescendant: computed(() => {
+			const index = options.activeIndex.value;
+			if (!options.isOpen() || index < 0) return void 0;
+			if (column.value === "action" && options.rowHasAction(index)) return options.actionId(index);
+			return options.optionId(index);
+		})
+	};
+}
+//#endregion
+export { OptionAction as n, isOptionAction as r, useOptionActionGrid as t };

package/dist/{usePositionedLayer-Cru9_00b.js → usePositionedLayer-B7cvG-_v.js}

@@ -1,62 +1,50 @@
+import { n as useLayerTeleportTarget } from "./useLayerMountTarget-BmZyeKWE.js";
+import { i as pushLayer, n as useLayerDepth } from "./layerDepth-CNDh-IHb.js";
 import { i as useLayerGutter, s as resolveLayerGutter } from "./context-M-er0-Rk.js";
-import { nextTick, onScopeDispose, ref, watch } from "vue";
+import { nextTick, onScopeDispose, ref, toValue, watch } from "vue";
 //#region src/composables/useDismiss.ts
-const escapeStack = [];
 /**
 * 统一处理浮层组件的关闭逻辑：点击外部和按 Escape 键。
 * 用于 Popover、Tooltip、DropdownMenu、ContextMenu 等。
 *
-* 设计决策：
-* - 使用 pointerdown 事件（包含 mouse 和 touch）
-* - 在 nextTick 后附加监听器，避免打开时的点击立即触发关闭
-* - Escape 键使用全局栈，确保最内层的浮层优先处理
+* 真正的判定在 `layer/dismissStack.ts` 里：全页面共用一个关闭栈，
+* 一次点外面只关最上面那一层，Escape 也只打最上面那一层。这里只负责在
+* `isEnabled` 变真时把这一层登记进去，变假或作用域销毁时摘出来。
+*
+* 因为所有浮层都走这个入口，用它的组件自动获得了「只关最上面一层」的行为，
+* 组件自己不用改。
 */
 function useDismiss(options) {
-	const { container, trigger, isEnabled, enableEscape = { value: true }, onDismiss } = options;
-	let isAttached = false;
-	function dismissFromEscape() {
-		if (options.onEscape != null) options.onEscape();
-		else onDismiss();
-	}
-	function onClickOutside(event) {
-		if (!isEnabled.value) return;
-		const el = container.value;
-		if (!el) return;
-		const target = event.target;
-		if (el.contains(target)) return;
-		if ((trigger?.value)?.contains(target)) return;
-		onDismiss();
+	const { container, trigger, isEnabled, onDismiss } = options;
+	const token = {};
+	const depth = useLayerDepth();
+	let unregister = null;
+	function register() {
+		unregister = pushLayer({
+			token,
+			depth,
+			getContainer: () => container.value,
+			getTrigger: () => trigger?.value ?? null,
+			dismissOnPointerOutside: true,
+			dismissOnEscape: escapeMode(),
+			onEscape: options.onEscape,
+			onDismiss
+		});
 	}
-	function onEscapeKey(event) {
-		if (!isEnabled.value || !enableEscape.value) return;
-		if (event.key === "Escape") {
-			if (escapeStack[escapeStack.length - 1] === dismissFromEscape) {
-				event.preventDefault();
-				dismissFromEscape();
-			}
-		}
-	}
-	async function setup() {
-		if (typeof document === "undefined" || isAttached) return;
-		await nextTick();
-		if (!isEnabled.value) return;
-		isAttached = true;
-		document.addEventListener("pointerdown", onClickOutside, true);
-		document.addEventListener("keydown", onEscapeKey, true);
-		if (enableEscape.value) escapeStack.push(dismissFromEscape);
+	function escapeMode() {
+		return toValue(options.dismissOnEscape) ?? "close";
 	}
 	function teardown() {
-		if (typeof document === "undefined" || !isAttached) return;
-		isAttached = false;
-		document.removeEventListener("pointerdown", onClickOutside, true);
-		document.removeEventListener("keydown", onEscapeKey, true);
-		const index = escapeStack.indexOf(dismissFromEscape);
-		if (index !== -1) escapeStack.splice(index, 1);
+		unregister?.();
+		unregister = null;
+	}
+	function sync(enabled) {
+		if (enabled) {
+			teardown();
+			register();
+		} else teardown();
 	}
-	watch(isEnabled, (enabled) => {
-		if (enabled) setup();
-		else teardown();
-	}, { immediate: true });
+	watch([isEnabled, () => escapeMode()], ([enabled]) => sync(enabled), { immediate: true });
 	onScopeDispose(teardown);
 }
 //#endregion
@@ -113,7 +101,9 @@ function usePositionedLayer(options) {
 		placement: placement.value
 	});
 	const gutter = useLayerGutter();
+	const teleportTarget = useLayerTeleportTarget();
 	function update() {
+		if (typeof window === "undefined") return;
 		const anchorEl = anchor.value;
 		const layerEl = layer.value;
 		if (!anchorEl || !layerEl || !isOpen.value) return;
@@ -154,8 +144,10 @@ function usePositionedLayer(options) {
 		watchGeometry();
 	}
 	function detach() {
-		window.removeEventListener("scroll", update, true);
-		window.removeEventListener("resize", update);
+		if (typeof window !== "undefined") {
+			window.removeEventListener("scroll", update, true);
+			window.removeEventListener("resize", update);
+		}
 		clearInterval(pollId);
 		pollId = void 0;
 	}
@@ -167,8 +159,10 @@ function usePositionedLayer(options) {
 	});
 	watch([placement, alignment], update);
 	watch(gutter, update);
+	onScopeDispose(detach);
 	return {
 		position,
+		teleportTarget,
 		update,
 		detach
 	};

package/dist/usePressFeedback-BJCpjEpv.js

@@ -0,0 +1,319 @@
+import { getCurrentInstance, getCurrentScope, onMounted, onScopeDispose } from "vue";
+import "../styles/pressable.css";
+const IDLE = {
+	originX: 0,
+	originY: 0,
+	phase: "idle"
+};
+function travelled(gesture, x, y) {
+	return Math.hypot(x - gesture.originX, y - gesture.originY) > 10;
+}
+function to(gesture, phase, paint, timer) {
+	return {
+		gesture: {
+			...gesture,
+			phase
+		},
+		paint,
+		timer
+	};
+}
+function stay(gesture, paint) {
+	return {
+		gesture,
+		paint,
+		timer: null
+	};
+}
+function stepArmed(gesture, event) {
+	switch (event.kind) {
+		case "move": return travelled(gesture, event.x, event.y) ? to(gesture, "dead", "none", null) : stay(gesture, "none");
+		case "cancel": return to(gesture, "dead", "none", null);
+		case "onset": return to(gesture, "pressed", "on", null);
+		case "up": return to(gesture, "flash", "on", "flash");
+		default: return stay(gesture, "none");
+	}
+}
+function stepPressed(gesture, event) {
+	if (event.kind === "move" && !travelled(gesture, event.x, event.y)) return stay(gesture, "on");
+	if (event.kind === "move" || event.kind === "cancel") return to(gesture, "dead", "none", null);
+	if (event.kind === "up") return to(gesture, "fading", "fading", "fade");
+	return stay(gesture, "on");
+}
+/**
+* 一个事件，一个答案。
+*/
+function pressGestureStep(gesture, event) {
+	if (event.kind === "down") return {
+		gesture: {
+			originX: event.x,
+			originY: event.y,
+			phase: "armed"
+		},
+		paint: "none",
+		timer: "onset"
+	};
+	switch (gesture.phase) {
+		case "armed": return stepArmed(gesture, event);
+		case "pressed": return stepPressed(gesture, event);
+		case "flash": return event.kind === "flashEnd" ? to(gesture, "fading", "fading", "fade") : stay(gesture, "on");
+		case "fading": return event.kind === "fadeEnd" ? stay(IDLE, "none") : stay(gesture, "fading");
+		case "dead": return event.kind === "up" ? stay(IDLE, "none") : stay(gesture, "none");
+		case "idle": return stay(IDLE, "none");
+	}
+}
+function idlePressGesture() {
+	return IDLE;
+}
+//#endregion
+//#region src/composables/internal/pressFeedback.ts
+/**
+* 触屏按压模型的 DOM 那一半：整个文档只有一个委托控制器，
+* 在手指下最里层的可按元素上写 `data-astryx-press`。
+*
+* 为什么挂在文档上、而不是每个元素一套监听：虚拟列表可能有上千行，每行四个监听加一份状态
+* 承受不起。这里整个文档就几个监听，一次按压只改一个元素的一个属性，不触发任何组件更新。
+*
+* 鼠标完全不管，CSS 的 `:active` 照旧。手指下，`@media (pointer: coarse)` 里的 `:active`
+* 被样式丢掉，改由这里在按压成立时写 `on`，抬手淡出时写 `fading`。
+* 样式见 `styles/pressable.css`。
+*/
+/** 可按元素的标记。控制器用 `closest()` 找它。 */
+const PRESSABLE_ATTRIBUTE = "data-astryx-pressable";
+/** 按压成立且手指还在时为 `on`，抬手淡出时为 `fading`，其余时候不存在。 */
+const PRESSED_ATTRIBUTE = "data-astryx-press";
+/** 不可用的元素怎么按都不画。 */
+const DISABLED = ":disabled, [aria-disabled=\"true\"]";
+let live = null;
+/** 有几个调用方装着控制器。大于 0 时监听才在。 */
+let holders = 0;
+/** 上一次「被手指带动」的滚动发生在什么时候、在哪个滚动容器里。只记手指带动的，程序滚动不算。 */
+let lastScrollAt = 0;
+let lastScroller = null;
+/** 上一次手指在屏幕上是什么时候、落在哪里。 */
+let lastTouchAt = 0;
+let lastTouchTarget = null;
+const TIMER_MS = {
+	fade: 200,
+	flash: 100,
+	onset: 150
+};
+const TIMER_EVENT = {
+	fade: "fadeEnd",
+	flash: "flashEnd",
+	onset: "onset"
+};
+function paintElement(element, paint) {
+	if (paint === "none") element.removeAttribute(PRESSED_ATTRIBUTE);
+	else element.setAttribute(PRESSED_ATTRIBUTE, paint);
+}
+function clearTimer() {
+	if (live?.timer != null) {
+		clearTimeout(live.timer);
+		live.timer = null;
+	}
+}
+/**
+* 把一个事件交给状态机，再让 DOM 照答案画。
+*
+* 计时器规则：阶段没变、又没要新计时器的一步是路过，原来那个计时器必须留着。
+* 如果每步都先清掉，会有三种手势最后停在「没人碰却亮着」：
+* 等待期内手指在容差内抖了一下（真手指都会抖），onset 被清掉，按压永远不亮；
+* 轻点的 100ms 闪亮期内来了 pointercancel 或滚动，flashEnd 被清掉，一直亮着；
+* 淡出期内同样，`fading` 留在元素上。
+*/
+function apply(step) {
+	if (live == null) return;
+	const phaseMoved = step.gesture.phase !== live.gesture.phase;
+	if (step.timer != null || phaseMoved) clearTimer();
+	live.gesture = step.gesture;
+	paintElement(live.element, step.paint);
+	if (step.gesture.phase === "idle") {
+		live = null;
+		return;
+	}
+	if (step.timer != null) {
+		const kind = step.timer;
+		live.timer = setTimeout(() => {
+			if (live != null) live.timer = null;
+			apply(pressGestureStep(live?.gesture ?? idlePressGesture(), { kind: TIMER_EVENT[kind] }));
+		}, TIMER_MS[kind]);
+	}
+}
+/**
+* 手指下最里层的可按元素。里层优先：可按的行里有个按钮，按钮接走这次按压。
+* 不可用的元素也会接走，但什么都不画，所以按在禁用控件上不会把外面那一行点亮。
+*/
+function surfaceAt(target) {
+	if (!(target instanceof Element)) return null;
+	const found = target.closest(`[${PRESSABLE_ATTRIBUTE}]`);
+	if (!(found instanceof HTMLElement) || found.matches(DISABLED)) return null;
+	return found;
+}
+/**
+* 这次触摸是不是在给手指刚甩动的列表「刹车」。原生列表刹车时什么都不亮。
+* 两个条件都要满足：滚动容器包着这个元素，而且那次滚动是手指在这个容器里带起来的。
+*/
+function scrollerIsBraking(element) {
+	if (Date.now() - lastScrollAt >= 150) return false;
+	return lastScroller instanceof Node && lastScroller.contains(element);
+}
+/** 手势一死就让出唯一的跟踪槽位。变成滚动的手势以 pointercancel 结束，没有 pointerup。 */
+function releaseIfDead() {
+	if (live?.gesture.phase === "dead") {
+		clearTimer();
+		live = null;
+	}
+}
+/** 擦掉颜色、忘掉手势，不经过状态机。 */
+function finish() {
+	if (live == null) return;
+	clearTimer();
+	live.element.removeAttribute(PRESSED_ATTRIBUTE);
+	live = null;
+}
+function onPointerDown(event) {
+	if (event.pointerType === "mouse") return;
+	if (live != null) {
+		const fingerIsUp = live.gesture.phase === "fading" || live.gesture.phase === "flash";
+		finish();
+		if (!fingerIsUp) return;
+	}
+	const element = surfaceAt(event.target);
+	const braking = element != null && scrollerIsBraking(element);
+	lastTouchAt = Date.now();
+	lastTouchTarget = event.target instanceof Node ? event.target : null;
+	if (element == null || braking) return;
+	live = {
+		element,
+		gesture: idlePressGesture(),
+		pointerId: event.pointerId,
+		timer: null
+	};
+	apply(pressGestureStep(live.gesture, {
+		kind: "down",
+		x: event.clientX,
+		y: event.clientY
+	}));
+}
+function isOtherPointer(event) {
+	return live == null || live.pointerId != null && event.pointerId !== live.pointerId;
+}
+function onPointerMove(event) {
+	if (isOtherPointer(event)) return;
+	apply(pressGestureStep(live.gesture, {
+		kind: "move",
+		x: event.clientX,
+		y: event.clientY
+	}));
+}
+function onPointerUp(event) {
+	if (event.pointerType === "mouse") return;
+	lastTouchAt = Date.now();
+	if (event.target instanceof Node) lastTouchTarget = event.target;
+	if (isOtherPointer(event)) return;
+	apply(pressGestureStep(live.gesture, { kind: "up" }));
+	releaseIfDead();
+}
+/** 滚动接管了手势，或者平台拿走了它。iOS 上 pointercancel 比第一个 scroll 事件还早到。 */
+function onCancel() {
+	if (live == null) return;
+	apply(pressGestureStep(live.gesture, { kind: "cancel" }));
+	releaseIfDead();
+}
+/** 文档里任何一处滚动。scroll 不冒泡，只能在捕获阶段听。 */
+function onScroll(event) {
+	const scroller = event.target instanceof Node ? event.target : document;
+	if (Date.now() - lastTouchAt < 3e3 && lastTouchTarget != null && scroller.contains(lastTouchTarget)) {
+		lastScrollAt = Date.now();
+		lastScroller = scroller;
+	}
+	if (live == null) return;
+	if (scroller === document || scroller.contains(live.element)) onCancel();
+}
+/** 兜底：页面被切到后台时，不留下亮着的元素。 */
+function onVisibilityChange() {
+	if (document.visibilityState === "hidden") finish();
+}
+const PASSIVE_CAPTURE = {
+	capture: true,
+	passive: true
+};
+const WINDOW_LISTENERS = [
+	["pointerdown", onPointerDown],
+	["pointermove", onPointerMove],
+	["pointerup", onPointerUp],
+	["pointercancel", onCancel],
+	["touchcancel", onCancel],
+	["dragstart", onCancel]
+];
+function addListeners() {
+	for (const [type, listener] of WINDOW_LISTENERS) window.addEventListener(type, listener, PASSIVE_CAPTURE);
+	document.addEventListener("scroll", onScroll, PASSIVE_CAPTURE);
+	document.addEventListener("visibilitychange", onVisibilityChange);
+}
+function removeListeners() {
+	for (const [type, listener] of WINDOW_LISTENERS) window.removeEventListener(type, listener, PASSIVE_CAPTURE);
+	document.removeEventListener("scroll", onScroll, PASSIVE_CAPTURE);
+	document.removeEventListener("visibilitychange", onVisibilityChange);
+}
+function resetClocks() {
+	lastScrollAt = 0;
+	lastScroller = null;
+	lastTouchAt = 0;
+	lastTouchTarget = null;
+}
+/**
+* 在这个文档上装好按压控制器。调多少次都只装一份，有人持有时监听就在。
+* 返回释放函数：每次安装各调一次；最后一个释放时拆掉监听，并清掉颜色和刹车时钟。
+* 服务端什么都不做。
+*/
+function installPressFeedback() {
+	if (typeof window === "undefined" || typeof document === "undefined") return () => void 0;
+	if (holders === 0) addListeners();
+	holders += 1;
+	let released = false;
+	return () => {
+		if (released) return;
+		released = true;
+		holders -= 1;
+		if (holders > 0) return;
+		removeListeners();
+		finish();
+		resetClocks();
+	};
+}
+//#endregion
+//#region src/composables/usePressFeedback.ts
+const MARKER_ONLY = Object.freeze({ [PRESSABLE_ATTRIBUTE]: "" });
+const WITH_OVERLAY = Object.freeze({
+	[PRESSABLE_ATTRIBUTE]: "",
+	class: "astryx-pressable"
+});
+/**
+* 对应原版 Astryx 的 `hooks/usePressFeedback`。
+*
+* 把一个元素标成触屏按压模型的可按表面，并确保文档级控制器已经装上。
+*
+* 手指下，CSS 的 `:active` 落手就亮，滚动开始了还可能亮着。按压模型反过来：
+* 先等 150 毫秒确认是按压；手指挪动超过 10 像素或者页面滚动，立刻作废，这次手势里不再亮回来；
+* 太快的轻点在抬手时补亮；抬手后 200 毫秒淡出。鼠标不受影响，`:active` 照旧。
+*
+* 一个文档只有一个控制器：第一个挂载的可按组件装上，最后一个卸载时拆掉。
+* 调用它不会给元素加监听或状态，一次按压只改一个属性。服务端不装。
+*/
+function usePressFeedback(options = {}) {
+	let release = null;
+	const install = () => {
+		release ??= installPressFeedback();
+	};
+	if (getCurrentInstance() != null) onMounted(install);
+	else install();
+	if (getCurrentScope() != null) onScopeDispose(() => {
+		release?.();
+		release = null;
+	});
+	return { pressableProps: options.hasOverlay === false ? MARKER_ONLY : WITH_OVERLAY };
+}
+//#endregion
+export { usePressFeedback as t };

package/dist/{useResizable-DDwPpPe6.d.ts → useResizable-1MHPNaRD.d.ts}

@@ -196,10 +196,28 @@ interface TablePanelPatch {
   variant: 'muted' | 'transparent';
   render: () => VNodeChild;
 }
+/**
+ * 直接挂在 `<tr>` 上的事件，用来把整行当成一个悬停或聚焦的靶子（例如整行弹详情卡片）。
+ * 多个插件给同一个事件时都会调用。
+ */
+interface TableRowListeners {
+  /** 指针进入这一行。 */
+  onMouseenter?: (event: MouseEvent) => void;
+  /** 指针离开这一行。 */
+  onMouseleave?: (event: MouseEvent) => void;
+  /** 行内元素获得焦点。焦点事件冒泡，所以绑在行上也能收到。 */
+  onFocus?: (event: FocusEvent) => void;
+  /** 行内元素失去焦点。 */
+  onBlur?: (event: FocusEvent) => void;
+}
 interface TableRowPatch {
   attrs?: Record<string, string | undefined>;
   class?: string;
   onClick?: (event: MouseEvent) => void;
+  /** 行元素挂上、卸下时回调（卸下时传入 `null`），用来把 `<tr>` 本身交给 `useHoverCard` 这类工具。 */
+  ref?: (element: HTMLTableRowElement | null) => void;
+  /** 挂在 `<tr>` 上的事件。 */
+  listeners?: TableRowListeners;
   suppressSelection?: boolean;
   skipRowIndex?: boolean;
   group?: TableGroupPatch;
@@ -406,4 +424,4 @@ declare function useResizable(options: UseResizableSingleOptions): ResizableRegi
 type UseResizableOptions = UseResizableSingleOptions | UseResizableMultiConfig;
 type ResizableState = ResizableRegion;
 //#endregion
-export { ToolbarSlots as $, TablePanelPatch as A, TableSortEntry as B, TableFilterField as C, TableFilterVariant as D, TableFilterValue as E, TableRowProps as F, TableSelectionState as G, TableTextOverflow as H, TableSelectionToolbarProps as I, useTableSelection as J, UseTableSelectionConfig as K, TableSelectionToolbarSlots as L, TableProps as M, TableRowMenuItem as N, TableGroupPatch as O, TableRowPatch as P, ToolbarSize as Q, TableSlots as R, TableDividers as S, TableFilterState as T, TableVerticalAlign as U, TableSortState as V, TableSelectedKeysSetter as W, ToolbarOrientation as X, useTableSelectionState as Y, ToolbarProps as Z, TableCellProps as _, ResizableRegionConfig as a, TableColumnResizeContribution as b, UseResizableMultiConfig as c, percent as d, ToolbarVariant as et, useResizable as f, TableCellPatch as g, ProportionalWidth as h, ResizableRegion as i, TablePlugin as j, TableHeaderPatch as k, UseResizableOptions as l, PixelWidth as m, ResizablePercentSize as n, ResizableSize as o, ColumnWidth as p, UseTableSelectionStateConfig as q, ResizableProps as r, ResizableState as s, ResizableDirection as t, UseResizableSingleOptions as u, TableColumn as v, TableFilterFieldType as w, TableDensity as x, TableColumnAlign as y, TableSortDirection as z };
+export { ToolbarSize as $, TablePanelPatch as A, TableSortDirection as B, TableFilterField as C, TableFilterVariant as D, TableFilterValue as E, TableRowPatch as F, TableSelectedKeysSetter as G, TableSortState as H, TableRowProps as I, UseTableSelectionStateConfig as J, TableSelectionState as K, TableSelectionToolbarProps as L, TableProps as M, TableRowListeners as N, TableGroupPatch as O, TableRowMenuItem as P, ToolbarProps as Q, TableSelectionToolbarSlots as R, TableDividers as S, TableFilterState as T, TableTextOverflow as U, TableSortEntry as V, TableVerticalAlign as W, useTableSelectionState as X, useTableSelection as Y, ToolbarOrientation as Z, TableCellProps as _, ResizableRegionConfig as a, TableColumnResizeContribution as b, UseResizableMultiConfig as c, percent as d, ToolbarSlots as et, useResizable as f, TableCellPatch as g, ProportionalWidth as h, ResizableRegion as i, TablePlugin as j, TableHeaderPatch as k, UseResizableOptions as l, PixelWidth as m, ResizablePercentSize as n, ResizableSize as o, ColumnWidth as p, UseTableSelectionConfig as q, ResizableProps as r, ResizableState as s, ResizableDirection as t, ToolbarVariant as tt, UseResizableSingleOptions as u, TableColumn as v, TableFilterFieldType as w, TableDensity as x, TableColumnAlign as y, TableSlots as z };