@astryx-vue/core 0.2.5 → 0.3.0

package/dist/{composables-CWw6t-RJ.js → composables-CbKx9C1Y.js}

@@ -1,8 +1,10 @@
 import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
 import { t as _sfc_main$1 } from "./Kbd-BB-Dw6zE.js";
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, h, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, ref, renderList, toDisplayString, toValue, unref, vShow, watch, withDirectives } from "vue";
+import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, getCurrentScope, h, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, ref, renderList, toDisplayString, toValue, unref, vShow, watch, withDirectives } from "vue";
+import "../styles/indicator-focus-ring.css";
 import "../styles/keyboard-hint.css";
+import "../styles/pressable.css";
 //#region src/composables/useContainerReveal.ts
 function useContainerReveal(options = {}) {
 	function containerProps(reveal = {}) {
@@ -62,6 +64,226 @@ function useControllableState(options) {
 	};
 }
 //#endregion
+//#region src/composables/internal/entryAnimation.ts
+/**
+* 预设对应的共享动画类。时长、缓动和「减少动态效果」的处理都在 `styles/motion.css` 里。
+* 类名里的 above 指元素从下方升上去，below 指从上方落下来。
+*/
+const ENTRY_ANIMATION_CLASSES = {
+	slideDown: "astryx-motion-slide-in-below",
+	slideUp: "astryx-motion-slide-in-above",
+	fadeIn: "astryx-motion-fade-in",
+	scaleIn: "astryx-motion-scale-in"
+};
+let hasPaintedPage = false;
+let isTrackingPaint = false;
+function trackFirstPaint() {
+	if (isTrackingPaint || typeof window === "undefined" || typeof requestAnimationFrame !== "function") return;
+	isTrackingPaint = true;
+	requestAnimationFrame(() => {
+		requestAnimationFrame(() => {
+			hasPaintedPage = true;
+		});
+	});
+}
+/** 首屏是否已经画过。服务端没有 window，永远返回 false。 */
+function isAfterFirstPaint() {
+	trackFirstPaint();
+	return hasPaintedPage;
+}
+/**
+* 对应原版 Astryx 的 `hooks/useEntryAnimation`。
+*
+* 元素挂载时播一次入场动画，但只对首屏画完之后才插进来的元素生效：
+* 首屏就渲染出来的元素不播放，免得整页一起动。
+*
+* 用法是把返回的 `entryClass` 绑到 `class` 上。动画时长和缓动取自主题的
+* motion token，「减少动态效果」打开时动画会直接落到结束状态。
+*/
+function useEntryAnimation(options = {}) {
+	const preset = options.preset ?? "slideDown";
+	return { entryClass: isAfterFirstPaint() ? ENTRY_ANIMATION_CLASSES[preset] : null };
+}
+trackFirstPaint();
+//#endregion
+//#region src/composables/useGridFocus.ts
+/** 网格里一格可以接受的元素：按钮，或者显式可聚焦的元素。 */
+const DEFAULT_CELL_SELECTOR = "button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+/**
+* 对应原版 Astryx 的 `hooks/useGridFocus`。
+*
+* 按 WAI-ARIA 的 grid 模式管二维网格的键盘导航：方向键一格一格走，
+* Home/End 走到行首行尾，Ctrl+Home/Ctrl+End 走到整张网格的开头和结尾，
+* Page Up/Down 交给调用方（日历里就是翻月）。走到边界时可以把事件交出去，
+* 让别的网格接住焦点，例如翻到上个月继续用方向键。
+*
+* 它靠读 DOM 里格子的顺序算行列，所以格子要不要能聚焦、要不要聚焦格子里的某个按钮，
+* 都是通过 `isCellFocusable` 和 `getFocusTarget` 两个回调交给调用方决定。
+*/
+function useGridFocus(options) {
+	const gridRef = ref(null);
+	const cellSelector = options.cellSelector ?? DEFAULT_CELL_SELECTOR;
+	function isRoving() {
+		return toValue(options.hasRovingTabIndex ?? false);
+	}
+	function getCells() {
+		const grid = gridRef.value;
+		if (grid == null) return [];
+		return [...grid.querySelectorAll(cellSelector)];
+	}
+	/** 能接焦点的格子，按 DOM 顺序。 */
+	function getFocusableCells() {
+		return getCells().filter((cell) => options.isCellFocusable?.(cell) ?? true);
+	}
+	function resolveTarget(cell) {
+		return options.getFocusTarget?.(cell) ?? cell;
+	}
+	function indexOfTarget(target) {
+		if (target == null) return -1;
+		return getCells().findIndex((cell) => cell === target || cell.contains(target));
+	}
+	function activeIndex() {
+		const grid = gridRef.value;
+		if (grid == null) return -1;
+		const focused = grid.ownerDocument.activeElement;
+		if (focused == null || !grid.contains(focused)) return -1;
+		return indexOfTarget(focused);
+	}
+	/** 让当前格子成为唯一的 Tab 落脚点，其余格子退出 Tab 顺序。 */
+	function syncRovingTabIndex(index) {
+		if (!isRoving()) return;
+		getCells().forEach((cell, cellIndex) => {
+			const target = resolveTarget(cell);
+			if (target != null) target.tabIndex = cellIndex === index ? 0 : -1;
+		});
+	}
+	function focusTargetOf(cell) {
+		if (cell == null) return false;
+		if (!(options.isCellFocusable?.(cell) ?? true)) return false;
+		const target = resolveTarget(cell);
+		if (target == null) return false;
+		target.focus({ preventScroll: true });
+		syncRovingTabIndex(getCells().indexOf(cell));
+		return true;
+	}
+	function columns() {
+		return Math.max(1, toValue(options.columns));
+	}
+	function columnOf(index) {
+		return index < 0 ? 0 : index % columns();
+	}
+	/** 走到边界外面时，把当前列和步长交给调用方，让另一张网格接住焦点。 */
+	function navigateOut(current, offset, isAfter) {
+		if (current < 0) return;
+		const column = columnOf(current);
+		if (isAfter) options.onNavigateAfter?.(column, offset);
+		else options.onNavigateBefore?.(column, offset);
+	}
+	function moveTo(index, offset) {
+		const cells = getCells();
+		const target = cells[index];
+		if (target == null) {
+			navigateOut(activeIndex(), offset, index >= cells.length);
+			return;
+		}
+		if (!(options.isCellFocusable?.(target) ?? true)) return;
+		focusTargetOf(target);
+	}
+	function handleKeyDown(event) {
+		if (event.defaultPrevented) return;
+		if (gridRef.value == null) return;
+		const index = activeIndex();
+		if (index < 0) return;
+		const cols = columns();
+		const last = getCells().length - 1;
+		const rowStart = index - columnOf(index);
+		switch (event.key) {
+			case "ArrowRight":
+				event.preventDefault();
+				moveTo(index + 1, 1);
+				break;
+			case "ArrowLeft":
+				event.preventDefault();
+				moveTo(index - 1, 1);
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				moveTo(index + cols, cols);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				moveTo(index - cols, cols);
+				break;
+			case "Home":
+				event.preventDefault();
+				moveTo(event.ctrlKey || event.metaKey ? 0 : rowStart, 1);
+				break;
+			case "End":
+				event.preventDefault();
+				moveTo(event.ctrlKey || event.metaKey ? last : rowStart + cols - 1, 1);
+				break;
+			case "PageUp":
+				if (options.onPageUp == null) break;
+				event.preventDefault();
+				options.onPageUp();
+				break;
+			case "PageDown":
+				if (options.onPageDown == null) break;
+				event.preventDefault();
+				options.onPageDown();
+		}
+	}
+	function handleFocus(event) {
+		if (!isRoving()) return;
+		const target = event.target;
+		if (!(target instanceof Element)) return;
+		const index = indexOfTarget(target);
+		if (index < 0) return;
+		syncRovingTabIndex(index);
+	}
+	function focusCell(index) {
+		const cells = getCells();
+		if (cells.length === 0) return;
+		focusTargetOf(cells[Math.min(Math.max(index, 0), cells.length - 1)]);
+	}
+	function focusFirst() {
+		focusTargetOf(getFocusableCells()[0]);
+	}
+	function focusLast() {
+		const cells = getFocusableCells();
+		focusTargetOf(cells[cells.length - 1]);
+	}
+	/** 首次渲染后补上 Tab 落脚点；已经有一个 `tabindex="0"` 的格子就尊重它。 */
+	function seedRovingTabIndex() {
+		if (!isRoving()) return;
+		const cells = getCells();
+		const seeded = cells.findIndex((cell) => {
+			const target = resolveTarget(cell);
+			return target != null && target.tabIndex === 0 && (options.isCellFocusable?.(cell) ?? true);
+		});
+		if (seeded >= 0) {
+			syncRovingTabIndex(seeded);
+			return;
+		}
+		const first = cells.findIndex((cell) => options.isCellFocusable?.(cell) ?? true);
+		if (first >= 0) syncRovingTabIndex(first);
+	}
+	onMounted(seedRovingTabIndex);
+	watch(gridRef, seedRovingTabIndex);
+	watch([() => toValue(options.columns), () => toValue(options.hasRovingTabIndex ?? false)], seedRovingTabIndex);
+	onScopeDispose(() => {
+		gridRef.value = null;
+	});
+	return {
+		gridRef,
+		handleKeyDown,
+		handleFocus,
+		focusCell,
+		focusFirst,
+		focusLast
+	};
+}
+//#endregion
 //#region src/composables/useGridRovingFocus.ts
 /**
 * 网格式导航（roving tabindex）：用方向键在二维网格中移动焦点。
@@ -231,6 +453,57 @@ function useImageMode(src, options = {}) {
 	return mode;
 }
 //#endregion
+//#region src/composables/useIndicatorFocusRing.ts
+/** 读不到 `:focus-visible` 时宁可按可见处理，不能把焦点环弄丢（WCAG 2.4.7）。 */
+function isFocusVisible(target) {
+	try {
+		return target.matches(":focus-visible");
+	} catch {
+		return true;
+	}
+}
+/**
+* 对应原版 Astryx 的 `hooks/useIndicatorFocusRing`。
+*
+* 给「真输入框藏起来、画面上的图形代替它」的控件画标准焦点环：复选框、
+* 单选框都把真正的 input 设成透明，焦点环只能画在旁边那个图形上。
+*
+* 环画在指示器自己的元素上，只有这个元素自己的圆角能决定环的形状；
+* 而且只在 `:focus-visible` 时画，鼠标点一下不会亮。统一放在这里管，
+* 主题换掉指示器也照样有可见焦点，不会因为漏了一个属性就整块没法用键盘。
+*/
+function useIndicatorFocusRing(options) {
+	function indicator() {
+		const child = options.containerRef.value?.firstElementChild;
+		return child instanceof HTMLElement ? child : null;
+	}
+	/** 标记属性 `data-astryx-focus-ring` 的画法是 `styles/indicator-focus-ring.css`。 */
+	function clear() {
+		const element = indicator();
+		if (element != null) delete element.dataset.astryxFocusRing;
+	}
+	function onFocus(event) {
+		if (toValue(options.isDisabled ?? false)) {
+			clear();
+			return;
+		}
+		const target = event.target;
+		if (!(target instanceof Element) || !isFocusVisible(target)) {
+			clear();
+			return;
+		}
+		const element = indicator();
+		if (element != null) element.dataset.astryxFocusRing = "";
+	}
+	function onBlur() {
+		clear();
+	}
+	return { focusProps: {
+		onFocus,
+		onBlur
+	} };
+}
+//#endregion
 //#region src/composables/KeyboardHint.vue
 const _hoisted_1 = { class: "astryx-keyboard-hint__keys" };
 const _hoisted_2 = { class: "astryx-keyboard-hint__label" };
@@ -358,6 +631,7 @@ function useKeyboardHint(options = {}) {
 		const current = event.currentTarget;
 		if (!(current instanceof HTMLElement)) return;
 		if (event.relatedTarget instanceof Node && current.contains(event.relatedTarget)) return;
+		dismissed = true;
 		hide();
 	}
 	function onKeyDown(event) {
@@ -388,6 +662,151 @@ function useKeyboardHint(options = {}) {
 	};
 }
 //#endregion
+//#region src/composables/internal/pressFeedback.ts
+/** 标出要走上报按压模型的元素。样式在 `styles/pressable.css`。 */
+const PRESSABLE_ATTRIBUTE = "data-astryx-pressable";
+/** 按压成立时由控制器写在元素上，抬手时移除。 */
+const PRESSED_ATTRIBUTE = "data-astryx-pressed";
+/** 手指按下多久才算真按了。 */
+const HOLD_MS = 150;
+/** 手指移动超过这个距离就当是滑动，不是按压。 */
+const MOVE_TOLERANCE_PX = 10;
+const PRESSABLE_PROPS = Object.freeze({ [PRESSABLE_ATTRIBUTE]: "" });
+/**
+* 一个文档级的控制器，给所有带标记的元素统一做按压反馈。
+* 第一个用到的组件装上它，最后一个卸载时拆掉，所以每个元素自己不加监听、不加状态。
+*/
+let press = null;
+let users = 0;
+let installed = false;
+let releaseTimer = null;
+function clearPressTimer() {
+	if (press?.timer != null) {
+		clearTimeout(press.timer);
+		press.timer = null;
+	}
+}
+function clearReleaseTimer() {
+	if (releaseTimer != null) {
+		clearTimeout(releaseTimer);
+		releaseTimer = null;
+	}
+}
+function paint(element) {
+	element.setAttribute(PRESSED_ATTRIBUTE, "");
+}
+function unpaint(element) {
+	element.removeAttribute(PRESSED_ATTRIBUTE);
+}
+function reset() {
+	clearPressTimer();
+	if (press != null) unpaint(press.element);
+	press = null;
+}
+/** 抬手后让样式先画到 1，再撤掉属性，这样淡出的是 CSS 过渡。 */
+function releaseAfterTap(element) {
+	paint(element);
+	clearReleaseTimer();
+	releaseTimer = setTimeout(() => {
+		releaseTimer = null;
+		unpaint(element);
+	}, 0);
+}
+function onPointerDown(event) {
+	if (event.pointerType === "mouse") return;
+	const target = event.target;
+	if (!(target instanceof Element)) return;
+	const element = target.closest(`[${PRESSABLE_ATTRIBUTE}]`);
+	if (element == null) return;
+	reset();
+	press = {
+		pointerId: event.pointerId,
+		element,
+		startX: event.clientX,
+		startY: event.clientY,
+		believed: false,
+		cancelled: false,
+		timer: setTimeout(() => {
+			if (press == null || press.cancelled) return;
+			press.believed = true;
+			press.timer = null;
+			paint(press.element);
+		}, HOLD_MS)
+	};
+}
+function onPointerMove(event) {
+	if (press == null || press.cancelled || event.pointerId !== press.pointerId) return;
+	if (Math.hypot(event.clientX - press.startX, event.clientY - press.startY) < MOVE_TOLERANCE_PX) return;
+	press.cancelled = true;
+	clearPressTimer();
+	unpaint(press.element);
+}
+function onPointerUp(event) {
+	if (press == null || event.pointerId !== press.pointerId) return;
+	const current = press;
+	clearPressTimer();
+	press = null;
+	if (current.cancelled || current.believed) unpaint(current.element);
+	else releaseAfterTap(current.element);
+}
+/** 浏览器收回这次手势（来电、系统手势），直接作废，不要补那一下。 */
+function onPointerCancel(event) {
+	if (press == null || event.pointerId !== press.pointerId) return;
+	clearPressTimer();
+	press.cancelled = true;
+	unpaint(press.element);
+	press = null;
+}
+function onScroll() {
+	if (press == null) return;
+	press.cancelled = true;
+	clearPressTimer();
+	unpaint(press.element);
+}
+function install() {
+	if (installed || typeof document === "undefined") return;
+	installed = true;
+	document.addEventListener("pointerdown", onPointerDown, true);
+	document.addEventListener("pointermove", onPointerMove, true);
+	document.addEventListener("pointerup", onPointerUp, true);
+	document.addEventListener("pointercancel", onPointerCancel, true);
+	document.addEventListener("scroll", onScroll, true);
+}
+function uninstall() {
+	if (!installed || typeof document === "undefined") return;
+	installed = false;
+	document.removeEventListener("pointerdown", onPointerDown, true);
+	document.removeEventListener("pointermove", onPointerMove, true);
+	document.removeEventListener("pointerup", onPointerUp, true);
+	document.removeEventListener("pointercancel", onPointerCancel, true);
+	document.removeEventListener("scroll", onScroll, true);
+	clearReleaseTimer();
+	reset();
+}
+/**
+* 对应原版 Astryx 的 `hooks/usePressFeedback`。
+*
+* 手指按下去时，CSS 的 `:active` 会在手指落下的瞬间就亮，而且滚动已经开始了它可能还亮着。
+* 这里的按压模型反过来：先等 150 毫秒，确认这真是按压；手指一动超过 10 像素、
+* 或者页面滚走了，马上作废，本次按压里不再亮回来；快速点一下则在抬手时补上；
+* 松手后 200 毫秒淡出。这几个时间和系统列表的手感一致。
+*
+* 一个文档级控制器给所有带标记的元素做这件事（第一个用到的组件装上，最后一个卸载时拆掉），
+* 所以调用这个组合式函数不会给你的元素加监听，也不加状态。
+*
+* 鼠标上的表现不变：`styles/pressable.css` 里给鼠标留了 `:active`，
+* 在 `@media (pointer: coarse)` 之外才生效。
+*/
+function usePressFeedback() {
+	users += 1;
+	install();
+	if (getCurrentScope() != null) onScopeDispose(() => {
+		users -= 1;
+		if (users <= 0) uninstall();
+	});
+	return { pressableProps: PRESSABLE_PROPS };
+}
+//#endregion
 //#region src/composables/useScrollOverflow.ts
 /**
 * 观察一个横向滚动容器，报告起始边和结束边有没有被挡住。
@@ -486,7 +905,8 @@ function useStreamingText(targetText, isStreaming = false, options) {
 	const speed = computed(() => toValue(options)?.speed ?? "natural");
 	const instant = computed(() => !streaming.value || speed.value === "instant" || prefersReducedMotion.value);
 	watch(target, (next, previous) => {
-		if (next.length === 0 && (previous?.length ?? 0) > 0) displayedLen.value = 0;
+		const revealed = (previous ?? "").slice(0, displayedLen.value);
+		if (next.length === 0 || revealed.length > 0 && !next.startsWith(revealed)) displayedLen.value = 0;
 	});
 	watch(streaming, (next) => {
 		if (!next) displayedLen.value = target.value.length;
@@ -517,4 +937,4 @@ function useStreamingText(targetText, isStreaming = false, options) {
 	});
 }
 //#endregion
-export { imageModeFromPixels as a, useGridRovingFocus as c, useKeyboardHint as i, useControllableState as l, useStreamingText as n, perceptualLightness as o, useScrollOverflow as r, useImageMode as s, snapToGraphemeBoundary as t, useContainerReveal as u };
+export { useKeyboardHint as a, perceptualLightness as c, useGridFocus as d, useEntryAnimation as f, usePressFeedback as i, useImageMode as l, useContainerReveal as m, useStreamingText as n, useIndicatorFocusRing as o, useControllableState as p, useScrollOverflow as r, imageModeFromPixels as s, snapToGraphemeBoundary as t, useGridRovingFocus as u };

package/dist/context-C_peZbXf.js

@@ -0,0 +1,16 @@
+import { computed, inject } from "vue";
+//#region src/LinkProvider/context.ts
+/** 最近的 `LinkProvider` 给的链接组件。 */
+const linkComponentKey = Symbol("astryx-link-component");
+/**
+* 子树默认使用的链接组件。没有 provider 时是 `undefined`，
+* 各处退回自己原来的 `<a>`。
+*
+* 组件自己的 `as` 属性优先，所以用的时候写 `props.as ?? linkComponent.value`。
+*/
+function useLinkComponent() {
+	const provided = inject(linkComponentKey, null);
+	return computed(() => provided ?? void 0);
+}
+//#endregion
+export { useLinkComponent as n, linkComponentKey as t };

package/dist/context-M-er0-Rk.js

@@ -0,0 +1,99 @@
+import { computed, inject } from "vue";
+const ZERO_GUTTER = {
+	blockStart: 0,
+	blockEnd: 0,
+	inlineStart: 0,
+	inlineEnd: 0
+};
+let safeAreaCache;
+/**
+* 算出每条边的空隙：基础空隙和安全区取大，再加上调用方给的额外偏移。
+* `inset` 的每一项会被加到对应那条边上。
+*/
+function resolveLayerGutter(inset) {
+	const safeArea = measureSafeArea();
+	return {
+		blockStart: Math.max(16, safeArea.blockStart) + (inset?.blockStart ?? 0),
+		blockEnd: Math.max(16, safeArea.blockEnd) + (inset?.blockEnd ?? 0),
+		inlineStart: Math.max(16, safeArea.inlineStart) + (inset?.inlineStart ?? 0),
+		inlineEnd: Math.max(16, safeArea.inlineEnd) + (inset?.inlineEnd ?? 0)
+	};
+}
+/**
+* 把 CSS 长度写成 px。浏览器直接返回计算后的值；测试环境这类拿不到计算值的地方
+* 按单位粗略换算。
+*/
+function measureLength(value) {
+	const trimmed = value.trim();
+	if (trimmed === "") return 0;
+	if (typeof document !== "undefined") {
+		const probe = document.createElement("div");
+		probe.style.cssText = `position:absolute;top:0;left:0;width:0;height:0;visibility:hidden;pointer-events:none;padding-top:${trimmed}`;
+		document.body.appendChild(probe);
+		const computed = getComputedStyle(probe).paddingTop;
+		probe.remove();
+		const measured = toPx(computed);
+		if (measured !== 0) return measured;
+	}
+	return toPx(trimmed);
+}
+function toPx(raw) {
+	const value = Number.parseFloat(raw);
+	if (!Number.isFinite(value)) return 0;
+	const unit = raw.trim().replace(/^[-+0-9.]+/, "");
+	if (unit === "rem") return value * rootFontSize();
+	if (unit === "em") return value * 16;
+	return value;
+}
+function rootFontSize() {
+	if (typeof document === "undefined") return 16;
+	const size = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+	return Number.isFinite(size) && size > 0 ? size : 16;
+}
+/**
+* 读设备安全区。给一个探针元素带上 `env(safe-area-inset-*)`，读回计算后的内边距。
+* 读不到（例如没有安全区的桌面浏览器）时全为 0。
+*/
+function measureSafeArea() {
+	if (safeAreaCache != null) return safeAreaCache;
+	if (typeof document === "undefined") return ZERO_GUTTER;
+	const probe = document.createElement("div");
+	probe.style.cssText = "position:absolute;top:0;left:0;width:0;height:0;visibility:hidden;pointer-events:none";
+	probe.style.paddingTop = "env(safe-area-inset-top, 0px)";
+	probe.style.paddingBottom = "env(safe-area-inset-bottom, 0px)";
+	probe.style.paddingLeft = "env(safe-area-inset-left, 0px)";
+	probe.style.paddingRight = "env(safe-area-inset-right, 0px)";
+	document.body.appendChild(probe);
+	const style = getComputedStyle(probe);
+	const measured = {
+		blockStart: toPx(style.paddingTop),
+		blockEnd: toPx(style.paddingBottom),
+		inlineStart: toPx(style.paddingLeft),
+		inlineEnd: toPx(style.paddingRight)
+	};
+	probe.remove();
+	safeAreaCache = measured;
+	return measured;
+}
+/** 清掉安全区缓存。屏幕旋转后调用一次。 */
+function resetLayerSafeArea() {
+	safeAreaCache = void 0;
+}
+//#endregion
+//#region src/LayerProvider/context.ts
+const layerContextKey = Symbol("astryx-layer");
+/** 已经在一个 LayerProvider 里。内层的 provider 会被忽略。 */
+const layerNestingKey = Symbol("astryx-layer-nesting");
+/** 最近的 `LayerProvider` 配置。没有 provider 时是 `null`。 */
+function useLayerConfig() {
+	return inject(layerContextKey, null);
+}
+/**
+* 锚定浮层离视口四条边的距离。基础空隙和设备安全区取大，再加 provider 给的偏移。
+*/
+function useLayerGutter() {
+	const config = useLayerConfig();
+	return computed(() => resolveLayerGutter(config?.value.inset));
+}
+//#endregion
+export { measureLength as a, useLayerGutter as i, layerNestingKey as n, resetLayerSafeArea as o, useLayerConfig as r, resolveLayerGutter as s, layerContextKey as t };