@astryx-vue/core 0.2.6 → 0.4.0

package/dist/{useResizable-B3ahKLoZ.js → useResizable-I3BCiLSL.js}

@@ -1,4 +1,6 @@
-import { t as isApplePlatform } from "./platform-B_9W_aHW.js";
+import { a as isImeKeyEvent } from "./layerDepth-CNDh-IHb.js";
+import { t as isApplePlatform } from "./isApplePlatform-B1ju6F5B.js";
+import { r as registerResizableChannel } from "./resizableChannel-3vivrEcT.js";
 import { computed, onBeforeUnmount, onMounted, onScopeDispose, reactive, ref, toValue, watch } from "vue";
 //#region src/composables/useHotkeys.ts
 const KEY_ALIASES = {
@@ -17,9 +19,6 @@ function isTypingTarget(target) {
 	const tag = target.tagName;
 	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
 }
-function isImeKeyEvent(event) {
-	return event.isComposing === true || event.key === "Process" || event.keyCode === 229;
-}
 function matchesCombo(keys, event, isApple) {
 	const parts = keys.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean);
 	if (parts.length === 0) return false;
@@ -77,13 +76,48 @@ function useHotkeys(hotkeys) {
 	});
 }
 //#endregion
+//#region src/composables/internal/resizableStorage.ts
+const STORAGE_PREFIX = "astryx-resizable:";
+function loadPersistedState(key) {
+	if (typeof window === "undefined") return null;
+	try {
+		const raw = localStorage.getItem(STORAGE_PREFIX + key);
+		if (raw == null) return null;
+		const parsed = JSON.parse(raw);
+		if (typeof parsed === "number" && Number.isFinite(parsed)) return parsed === 0 ? {
+			size: null,
+			isCollapsed: true
+		} : {
+			size: parsed,
+			isCollapsed: null
+		};
+		if (typeof parsed === "object" && parsed != null) {
+			const record = parsed;
+			const hasSize = typeof record.size === "number" && Number.isFinite(record.size) && record.size > 0;
+			if (hasSize || record.isCollapsed === true) return {
+				size: hasSize ? record.size : null,
+				isCollapsed: record.isCollapsed === true
+			};
+		}
+	} catch {
+		return null;
+	}
+	return null;
+}
+function savePersistedState(key, size, isCollapsed) {
+	try {
+		localStorage.setItem(STORAGE_PREFIX + key, JSON.stringify({
+			size,
+			isCollapsed
+		}));
+	} catch {}
+}
+//#endregion
 //#region src/composables/useResizable.ts
 const DEFAULT_SIZE = 250;
 const DEFAULT_MIN = 50;
 const DEFAULT_COLLAPSED_SIZE = 40;
-const SNAP_DISTANCE = 8;
 const UNMEASURED_BASIS = 1200;
-const STORAGE_PREFIX = "astryx-resizable:";
 function percent(value, options) {
 	return {
 		type: "percent",
@@ -142,34 +176,16 @@ function clampSize(size, min, max, snaps) {
 			nearestDist = dist;
 		}
 	}
-	if (nearestDist > SNAP_DISTANCE) return clamped;
 	return Math.min(max, Math.max(min, nearest));
 }
-function loadPersistedState(key) {
-	if (typeof window === "undefined") return null;
-	try {
-		const raw = localStorage.getItem(STORAGE_PREFIX + key);
-		if (raw == null) return null;
-		const parsed = JSON.parse(raw);
-		if (typeof parsed === "number" && Number.isFinite(parsed)) return parsed === 0 ? {
-			size: null,
-			isCollapsed: true
-		} : {
-			size: parsed,
-			isCollapsed: null
-		};
-		if (typeof parsed === "object" && parsed != null) {
-			const record = parsed;
-			const hasSize = typeof record.size === "number" && Number.isFinite(record.size) && record.size > 0;
-			if (hasSize || record.isCollapsed === true) return {
-				size: hasSize ? record.size : null,
-				isCollapsed: record.isCollapsed === true
-			};
-		}
-	} catch {
-		return null;
-	}
-	return null;
+function sizeDependsOnBasis(value) {
+	if (typeof value === "string") return value.trim().endsWith("%");
+	return typeof value === "object" && value != null && value.type === "percent";
+}
+function contentBox(element, direction) {
+	const style = getComputedStyle(element);
+	const size = direction === "vertical" ? element.clientHeight - Number.parseFloat(style.paddingTop) - Number.parseFloat(style.paddingBottom) : element.clientWidth - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight);
+	return Number.isFinite(size) ? size : null;
 }
 function useSingleRegion(options, cascade) {
 	const direction = options.direction ?? "horizontal";
@@ -181,10 +197,25 @@ function useSingleRegion(options, cascade) {
 	const isCollapsed = ref(false);
 	const basisMeasured = ref(true);
 	const controlledCollapse = computed(() => options.isCollapsed);
+	const clientExtent = ref(null);
 	let origin = DEFAULT_SIZE;
 	let settledDefault = false;
 	let dragging = false;
 	let dragLimits = null;
+	function observesContainer() {
+		return options.containerRef != null && (sizeDependsOnBasis(options.minSize) || sizeDependsOnBasis(options.maxSize) || sizeDependsOnBasis(options.defaultSize));
+	}
+	function reportedMax(min, max) {
+		if (Number.isFinite(max)) return max;
+		let basis;
+		if (options.containerRef != null) {
+			if (!sizeDependsOnBasis(options.minSize) && !sizeDependsOnBasis(options.maxSize)) return void 0;
+			const element = options.containerRef.value;
+			basis = element == null ? null : contentBox(element, direction);
+		} else basis = clientExtent.value;
+		if (basis == null || !(basis > 0)) return void 0;
+		return Math.max(basis, isCollapsed.value ? min : size.value);
+	}
 	function currentBasis() {
 		return readBasis(options.containerRef?.value, direction);
 	}
@@ -227,12 +258,7 @@ function useSingleRegion(options, cascade) {
 	restore();
 	function persist() {
 		if (!options.autoSaveId || !basisMeasured.value) return;
-		try {
-			localStorage.setItem(STORAGE_PREFIX + options.autoSaveId, JSON.stringify({
-				size: expandedSize.value,
-				isCollapsed: isCollapsed.value
-			}));
-		} catch {}
+		savePersistedState(options.autoSaveId, expandedSize.value, isCollapsed.value);
 	}
 	function setCollapsed(next) {
 		if (!collapsible && next) return;
@@ -295,7 +321,7 @@ function useSingleRegion(options, cascade) {
 	}
 	const props = computed(() => {
 		const { min, max } = limits();
-		return {
+		const value = {
 			_size: size.value,
 			_isCollapsed: isCollapsed.value,
 			_onResizeStart: onResizeStart,
@@ -310,6 +336,11 @@ function useSingleRegion(options, cascade) {
 			_direction: direction,
 			_isResizableProps: true
 		};
+		registerResizableChannel(value, {
+			collapse: () => setCollapsed(true),
+			expand: () => setCollapsed(false)
+		}, reportedMax(min, max));
+		return value;
 	});
 	function measureDefault() {
 		if (settledDefault || options.containerRef == null) return;
@@ -325,9 +356,10 @@ function useSingleRegion(options, cascade) {
 	}
 	let observer;
 	onMounted(() => {
+		if (options.containerRef == null && typeof window !== "undefined") clientExtent.value = direction === "vertical" ? window.innerHeight : window.innerWidth;
 		measureDefault();
 		const element = options.containerRef?.value;
-		if (element == null || typeof ResizeObserver === "undefined") return;
+		if (element == null || typeof ResizeObserver === "undefined" || !observesContainer()) return;
 		observer = new ResizeObserver(() => measureDefault());
 		observer.observe(element);
 	});

package/dist/useResolvedLabelHidden-B2rlWiaI.js

@@ -0,0 +1,30 @@
+import { computed, getCurrentInstance } from "vue";
+//#region src/composables/useResolvedLabelHidden.ts
+function wasPropPassed(name) {
+	const raw = getCurrentInstance()?.vnode.props;
+	if (raw == null) return false;
+	if (Object.hasOwn(raw, name)) return true;
+	const kebab = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+	return Object.hasOwn(raw, kebab);
+}
+/**
+* 隐藏标签的正名是 `isLabelHidden`，旧名 `labelHidden` 先留着。
+*
+* 默认不隐藏时，两个名字任一为真就隐藏。Vue 会把没传的布尔属性当成 false，
+* 这种默认值用「或」就够了。
+*
+* 默认隐藏（PowerSearch）时必须分清「没传」和「传了 false」。
+* 两个都传了，听正名。这个判断要在 setup 里做：渲染函数里拿不到当前实例。
+*/
+function useResolvedLabelHidden(isLabelHidden, labelHidden, fallback = false) {
+	if (!fallback) return computed(() => Boolean(isLabelHidden()) || Boolean(labelHidden()));
+	const passedNew = wasPropPassed("isLabelHidden");
+	const passedOld = wasPropPassed("labelHidden");
+	return computed(() => {
+		if (passedNew) return Boolean(isLabelHidden());
+		if (passedOld) return Boolean(labelHidden());
+		return true;
+	});
+}
+//#endregion
+export { useResolvedLabelHidden as t };

package/dist/{useRestoreFocus-Djw9RUIf.js → useRestoreFocus-XEKs5-gp.js}

@@ -1,12 +1,43 @@
-import { n as getFocusables } from "./focus-CpficIgf.js";
+import { a as isImeKeyEvent } from "./layerDepth-CNDh-IHb.js";
+import { r as getFocusables } from "./focus-l8jVTcqd.js";
+import { r as trackInteractionModality, t as getInteractionModality } from "./interactionModality-ACpTMhak.js";
 import { onScopeDispose, ref, toValue, watch } from "vue";
+//#region src/composables/internal/focusReturn.ts
+function isTextEntry(element) {
+	return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement || element.isContentEditable;
+}
+/**
+* 程序移动焦点，焦点环跟着上一次的输入走：
+* 上一次是键盘就照常画环，上一次是鼠标或手指就不画。
+*
+* 用鼠标或手指关掉浮层后，焦点回到触发器上，但触发器不会突然亮起一圈焦点环。
+* 文本输入类元素例外：它们本来就要画出「打字会落在这里」，多一次 blur 还可能触发校验，
+* 所以一律直接聚焦。`options` 原样交给 `focus()`，例如 `preventScroll`。
+*/
+function focusForLastInput(element, options) {
+	trackInteractionModality();
+	if (isTextEntry(element) || getInteractionModality() !== "pointer") {
+		element.focus(options);
+		return;
+	}
+	if (element.matches(":focus-visible")) element.blur();
+	element.focus({
+		...options,
+		focusVisible: false
+	});
+}
+//#endregion
 //#region src/composables/useFocusTrap.ts
 /**
 * 在容器内陷阱键盘焦点，按 Tab 时循环聚焦容器内的可聚焦元素。
 * 用于模态对话框、抽屉等需要限制焦点范围的浮层组件。
 *
 * 打开时把焦点送进容器，关闭或卸载时把焦点还给打开前聚焦的元素；
-* 焦点从没进过容器、或者已经被别处拿走时不还。
+* 焦点从没进过容器、或者已经被别处拿走时不还。还焦点时焦点环跟着上一次的输入走：
+* 用鼠标或手指关掉的，回到触发器上不画环。
+*
+* Tab 只在焦点真的在陷阱里面时才被拦下。浮层开着、焦点却合理地留在外面
+* （例如挂在输入框上的列表框）时，拦下 Tab 会让整个页面都没法用 Tab。
 */
 function useFocusTrap(options = {}) {
 	const containerRef = options.container ?? ref(null);
@@ -30,12 +61,13 @@ function useFocusTrap(options = {}) {
 	function onKeyDown(event) {
 		if (!isActive()) return;
 		if (event.key === "Escape") {
+			if (event.defaultPrevented || isImeKeyEvent(event)) return;
 			if (options.onEscape != null && (isTargetInside(event) || isFocusInside())) options.onEscape();
 			return;
 		}
 		if (event.key !== "Tab") return;
 		const el = containerRef.value;
-		if (!el || !el.contains(event.target)) return;
+		if (!el || !isFocusInside()) return;
 		const focusables = getFocusables(el);
 		if (focusables.length === 0) {
 			event.preventDefault();
@@ -43,7 +75,13 @@ function useFocusTrap(options = {}) {
 		}
 		const first = focusables[0];
 		const last = focusables[focusables.length - 1];
-		const active = typeof document !== "undefined" ? document.activeElement : null;
+		const active = document.activeElement;
+		if (active === el) {
+			event.preventDefault();
+			if (event.shiftKey) last.focus();
+			else first.focus();
+			return;
+		}
 		if (event.shiftKey && active === first) {
 			event.preventDefault();
 			last.focus();
@@ -69,6 +107,7 @@ function useFocusTrap(options = {}) {
 		if (focusables.length > 0) focusables[focusables.length - 1].focus();
 	}
 	function activate() {
+		trackInteractionModality();
 		if (typeof document !== "undefined") {
 			const active = document.activeElement;
 			previouslyFocused = active instanceof HTMLElement && active !== document.body ? active : null;
@@ -88,7 +127,7 @@ function useFocusTrap(options = {}) {
 		if (target == null || !hasEntered || !target.isConnected) return;
 		const active = typeof document === "undefined" ? null : document.activeElement;
 		if (active != null && active !== document.body && !isFocusInside()) return;
-		target.focus();
+		focusForLastInput(target);
 	}
 	function deactivate() {
 		teardown();
@@ -123,18 +162,21 @@ function useFocusTrap(options = {}) {
 /**
 * 在浮层组件打开时保存当前焦点元素，关闭时恢复焦点。
 * 用于对话框、抽屉、弹出菜单等浮层组件。
+*
+* 恢复时焦点环跟着上一次的输入走：键盘关掉的照常画环，鼠标或手指关掉的不画。
 */
 function useRestoreFocus(options) {
 	const { isEnabled, shouldRestore } = options;
 	let savedElement = null;
 	function save() {
 		if (!isEnabled.value || typeof document === "undefined") return;
+		trackInteractionModality();
 		const active = document.activeElement;
 		if (active instanceof HTMLElement) savedElement = active;
 	}
 	function restore() {
 		if (!isEnabled.value || !savedElement) return;
-		if (savedElement.isConnected && !savedElement.hasAttribute("disabled")) savedElement.focus();
+		if (savedElement.isConnected && !savedElement.hasAttribute("disabled")) focusForLastInput(savedElement);
 		savedElement = null;
 	}
 	watch(shouldRestore, (should) => {
@@ -150,4 +192,4 @@ function useRestoreFocus(options) {
 	};
 }
 //#endregion
-export { useFocusTrap as n, useRestoreFocus as t };
+export { useFocusTrap as n, focusForLastInput as r, useRestoreFocus as t };

package/dist/useScrollOverflow-DuMoGXmm.js

@@ -0,0 +1,67 @@
+import { getCurrentScope, onScopeDispose, ref } from "vue";
+//#region src/composables/useScrollOverflow.ts
+/**
+* 浏览器是不是真的在渲染这个元素。在 `display: none` 的祖先下、或者 `content-visibility: hidden`
+* 的子树里，读布局要么答 0，要么逼浏览器把整棵藏起来的子树排一遍。没有 `checkVisibility` 的浏览器照常量。
+*/
+function isRendered(node) {
+	return typeof node.checkVisibility !== "function" || node.checkVisibility();
+}
+/**
+* 观察一个横向滚动容器，报告起始边和结束边有没有被挡住。容差 1px。
+*
+* 每次滚动都量。尺寸变化和刚绑上时，只在容器真的被渲染时才量：藏起来的容器没有边可报，
+* 保留上一次的结果，等它露出来之后的那次尺寸变化再量。藏着的容器被脚本滚动时照样量，
+* 因为同样大小地露出来不会再有尺寸变化。
+*/
+function useScrollOverflow() {
+	const element = ref(null);
+	const overflowStart = ref(false);
+	const overflowEnd = ref(false);
+	const hasOverflow = ref(false);
+	let observer;
+	function measureNow(node) {
+		const tolerance = 1;
+		const maxScroll = node.scrollWidth - node.clientWidth;
+		const nextStart = Math.abs(node.scrollLeft) > tolerance;
+		const nextEnd = Math.abs(node.scrollLeft) < maxScroll - tolerance;
+		const nextHas = node.scrollWidth > node.clientWidth + tolerance;
+		overflowStart.value = nextStart;
+		overflowEnd.value = nextEnd;
+		hasOverflow.value = nextHas;
+	}
+	function measure() {
+		const node = element.value;
+		if (node != null && isRendered(node)) measureNow(node);
+	}
+	function measureOnScroll() {
+		const node = element.value;
+		if (node != null) measureNow(node);
+	}
+	function unbind() {
+		element.value?.removeEventListener("scroll", measureOnScroll);
+		observer?.disconnect();
+		observer = void 0;
+	}
+	function scrollRef(node) {
+		if (element.value === node) return;
+		unbind();
+		element.value = node;
+		if (node == null) return;
+		node.addEventListener("scroll", measureOnScroll, { passive: true });
+		if (typeof ResizeObserver !== "undefined") {
+			observer = new ResizeObserver(measure);
+			observer.observe(node);
+		}
+		measure();
+	}
+	if (getCurrentScope() != null) onScopeDispose(unbind);
+	return {
+		scrollRef,
+		overflowStart,
+		overflowEnd,
+		hasOverflow
+	};
+}
+//#endregion
+export { useScrollOverflow as t };

package/dist/useScrollableArea-BE8b3qm7.js

@@ -0,0 +1,222 @@
+import { a as INACTIVE_AXIS_STATE, c as isMeasurable, d as measureScrollAxis, i as DEFAULT_AXIS_MAPPING, l as mappingsEqual, n as registerScrollOwner, o as axisStatesEqual, r as unregisterScrollOwner, s as getLogicalAxisMapping, t as attachScrollKeyboardDelegation, u as measureOverflow } from "./scrollKeyboardDelegation-D7cumnOl.js";
+import { computed, onBeforeUnmount, ref, shallowRef, watch } from "vue";
+//#region src/composables/internal/scrollInvalidation.ts
+/**
+* 什么时候要重新量一块滚动区域。
+*
+* 尺寸变化（ResizeObserver）、滚动、窗口和可视视口变化、图片加载、过渡和动画结束、
+* 内容和祖先的属性变化（class、dir、hidden、style 会改书写方向和可见性）、字体加载完成。
+* 这些信号只负责「该量了」，量本身由调用方合并到一次里做。
+*/
+function watchScrollInvalidation(viewport, content, schedule) {
+	const doc = viewport.ownerDocument;
+	const view = doc.defaultView;
+	const cleanups = [];
+	function on(target, type, capture = false) {
+		if (target == null) return;
+		target.addEventListener(type, schedule, {
+			capture,
+			passive: true
+		});
+		cleanups.push(() => target.removeEventListener(type, schedule, capture));
+	}
+	if (typeof ResizeObserver !== "undefined") {
+		const observer = new ResizeObserver(schedule);
+		observer.observe(viewport);
+		observer.observe(content);
+		cleanups.push(() => observer.disconnect());
+	}
+	on(viewport, "scroll");
+	on(view, "resize");
+	on(view?.visualViewport, "resize");
+	on(content, "load", true);
+	for (const element of [viewport, content]) {
+		on(element, "transitionend");
+		on(element, "animationend");
+	}
+	if (typeof MutationObserver !== "undefined") {
+		const attributeFilter = [
+			"class",
+			"dir",
+			"hidden",
+			"style"
+		];
+		const observer = new MutationObserver(schedule);
+		observer.observe(viewport, {
+			attributes: true,
+			attributeFilter
+		});
+		observer.observe(content, {
+			attributes: true,
+			attributeFilter,
+			characterData: true,
+			childList: true,
+			subtree: true
+		});
+		for (let ancestor = viewport.parentElement; ancestor != null; ancestor = ancestor.parentElement) observer.observe(ancestor, {
+			attributes: true,
+			attributeFilter
+		});
+		cleanups.push(() => observer.disconnect());
+	}
+	const fonts = doc.fonts;
+	if (fonts != null) {
+		fonts.addEventListener?.("loadingdone", schedule);
+		cleanups.push(() => fonts.removeEventListener?.("loadingdone", schedule));
+		fonts.ready?.then(schedule);
+	}
+	return () => {
+		for (const cleanup of cleanups) cleanup();
+	};
+}
+//#endregion
+//#region src/composables/useScrollableArea.ts
+function sameState(a, b) {
+	return axisStatesEqual(a.inline, b.inline) && axisStatesEqual(a.block, b.block);
+}
+/**
+* 对应原版 Astryx 的 `hooks/useScrollableArea`：可滚动容器系统的核心。
+*
+* 按逻辑轴（行内 / 块方向）给调用方的视口和内容加上滚动行为：
+* 只有内容真的溢出时视口才变成滚动容器；量出每条轴能不能滚、到没到两头；
+* 能滚时视口进入 Tab 顺序，让键盘也能滚；`overscroll: 'contain'` 只在真能滚的轴上生效。
+* 量出的状态登记到滚动归属表里，嵌套的滚动区域和键盘委托都靠它分清谁是哪一层。
+* 藏起来、没挂上或者尺寸为 0 的视口量不出来，保留上一次的结果，等下一次有效的信号。
+*/
+function useScrollableArea(options) {
+	const viewport = shallowRef(null);
+	const content = ref(null);
+	const measured = shallowRef({
+		inline: INACTIVE_AXIS_STATE,
+		block: INACTIVE_AXIS_STATE
+	});
+	const overflowInline = ref(false);
+	const overflowBlock = ref(false);
+	const mapping = shallowRef(DEFAULT_AXIS_MAPPING);
+	const viewportHasFocus = ref(false);
+	const axis = computed(() => options.axis ?? "block");
+	const overscroll = computed(() => options.overscroll ?? "allow");
+	const stickyContainment = computed(() => options.stickyContainment ?? "whenScrollable");
+	const keyboardAccess = computed(() => options.keyboardAccess ?? {
+		owner: "viewport",
+		label: options.label ?? "",
+		role: options.role
+	});
+	function requested(name) {
+		return axis.value === name || axis.value === "both";
+	}
+	function measure() {
+		const element = viewport.value;
+		if (element == null) return;
+		const style = getComputedStyle(element);
+		if (!isMeasurable(element, style)) return;
+		const nextMapping = getLogicalAxisMapping(style.writingMode, style.direction);
+		const next = {
+			inline: measureScrollAxis(element, "inline", nextMapping, requested("inline"), style),
+			block: measureScrollAxis(element, "block", nextMapping, requested("block"), style)
+		};
+		registerScrollOwner(element, next);
+		overflowInline.value = measureOverflow(element, "inline", nextMapping);
+		overflowBlock.value = measureOverflow(element, "block", nextMapping);
+		if (!mappingsEqual(mapping.value, nextMapping)) mapping.value = nextMapping;
+		if (!sameState(measured.value, next)) measured.value = next;
+	}
+	let queued = false;
+	function queueMeasure() {
+		if (queued) return;
+		queued = true;
+		queueMicrotask(() => {
+			queued = false;
+			measure();
+		});
+	}
+	function onViewportFocusIn(event) {
+		viewportHasFocus.value = event.target === viewport.value;
+	}
+	function onViewportFocusOut() {
+		viewportHasFocus.value = false;
+	}
+	function bind(element) {
+		const node = element instanceof HTMLElement ? element : null;
+		if (viewport.value === node) return;
+		const previous = viewport.value;
+		if (previous != null) {
+			unregisterScrollOwner(previous);
+			previous.removeEventListener("focusin", onViewportFocusIn);
+			previous.removeEventListener("focusout", onViewportFocusOut);
+		}
+		viewport.value = node;
+		if (node == null) return;
+		registerScrollOwner(node, measured.value);
+		node.addEventListener("focusin", onViewportFocusIn);
+		node.addEventListener("focusout", onViewportFocusOut);
+	}
+	watch([viewport, content], ([element, inner], _previous, onCleanup) => {
+		if (element == null || inner == null) return;
+		onCleanup(watchScrollInvalidation(element, inner, queueMeasure));
+		queueMeasure();
+	}, { immediate: true });
+	watch(axis, queueMeasure);
+	const state = computed(() => ({
+		inline: requested("inline") ? measured.value.inline : INACTIVE_AXIS_STATE,
+		block: requested("block") ? measured.value.block : INACTIVE_AXIS_STATE
+	}));
+	const scrollable = computed(() => state.value.inline.isScrollable || state.value.block.isScrollable);
+	watch([
+		() => keyboardAccess.value.owner,
+		scrollable,
+		viewport,
+		content
+	], ([owner, isScrollable, element, inner], _previous, onCleanup) => {
+		if (owner !== "contentOrViewport" || !isScrollable || element == null || inner == null) return;
+		onCleanup(attachScrollKeyboardDelegation(element, inner));
+	}, { immediate: true });
+	onBeforeUnmount(() => bind(null));
+	const viewportStyle = computed(() => {
+		const map = mapping.value;
+		const onX = (name) => map[name] === "x";
+		const requestedX = requested("inline") && onX("inline") || requested("block") && onX("block");
+		const requestedY = requested("inline") && !onX("inline") || requested("block") && !onX("block");
+		const overflowingX = overflowInline.value && onX("inline") || overflowBlock.value && onX("block");
+		const overflowingY = overflowInline.value && !onX("inline") || overflowBlock.value && !onX("block");
+		const always = stickyContainment.value === "always";
+		const contains = overflowingX || overflowingY || always;
+		const style = {
+			overflowX: contains ? (always ? requestedX : overflowingX) ? "auto" : "hidden" : "clip",
+			overflowY: contains ? (always ? requestedY : overflowingY) ? "auto" : "hidden" : "clip"
+		};
+		for (const name of ["inline", "block"]) {
+			if (!requested(name)) continue;
+			const contain = overscroll.value === "contain" && state.value[name].isScrollable;
+			style[onX(name) ? "overscrollBehaviorX" : "overscrollBehaviorY"] = contain ? "contain" : "auto";
+		}
+		return style;
+	});
+	return {
+		content,
+		state,
+		viewport: bind,
+		viewportAttrs: computed(() => {
+			const access = keyboardAccess.value;
+			const inline = state.value.inline;
+			const block = state.value.block;
+			const attrs = {
+				"data-scroll-axis": axis.value,
+				"data-scrollable-inline": inline.isScrollable ? "true" : void 0,
+				"data-scrollable-block": block.isScrollable ? "true" : void 0,
+				"data-scroll-inline-start": inline.atStart ? "true" : void 0,
+				"data-scroll-inline-end": inline.atEnd ? "true" : void 0,
+				"data-scroll-block-start": block.atStart ? "true" : void 0,
+				"data-scroll-block-end": block.atEnd ? "true" : void 0
+			};
+			if (access.owner === "content") return attrs;
+			attrs.role = access.role ?? "group";
+			attrs["aria-label"] = access.label;
+			attrs.tabindex = scrollable.value ? 0 : viewportHasFocus.value ? -1 : void 0;
+			return attrs;
+		}),
+		viewportStyle
+	};
+}
+//#endregion
+export { useScrollableArea as t };

package/dist/useScrollbars-C2NJ6Qwq.js

@@ -0,0 +1,43 @@
+import { inject, onScopeDispose, readonly, shallowRef, toValue, watch } from "vue";
+//#region src/Scrollbars/context.ts
+/**
+* 最近的 `ScrollbarsProvider` 提供的内容。
+*
+* 这个文件只能用 `import type` 引 overlayscrollbars。
+* 所有滚动组件都会引它，没有套 provider 的用户不应该因此把 overlayscrollbars 打进包。
+*/
+const scrollbarsKey = Symbol("astryx-scrollbars");
+//#endregion
+//#region src/Scrollbars/useScrollbars.ts
+/**
+* 给一个滚动容器挂上自绘滚动条。
+*
+* 外层没有 `ScrollbarsProvider` 时，或者在服务端渲染时，什么都不做，也不建任何 watcher。
+* 容器本身就是视口，所以容器的 overflow 怎么变，滚动条就怎么跟。
+*/
+function useScrollbars(target, options = {}) {
+	const ctx = inject(scrollbarsKey, null);
+	const active = shallowRef(false);
+	if (!ctx || typeof HTMLElement === "undefined") return { active: readonly(active) };
+	let handle = null;
+	function release() {
+		handle?.destroy();
+		handle = null;
+		active.value = false;
+	}
+	watch([() => toValue(target), () => ctx.enabled.value && (toValue(options.enabled) ?? true)], ([element, enabled]) => {
+		release();
+		if (enabled && element instanceof HTMLElement) {
+			handle = ctx.mount(element, ctx.options.value);
+			active.value = true;
+		}
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	watch(ctx.options, (next) => handle?.update(next), { deep: true });
+	onScopeDispose(release);
+	return { active: readonly(active) };
+}
+//#endregion
+export { scrollbarsKey as n, useScrollbars as t };