@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/utils/dom/layout-batch.js

@@ -0,0 +1,26 @@
+//#region src/utils/dom/layout-batch.ts
+var reads = [];
+/** 一个读取或写入出错：报出来（下一个微任务里抛出），这一轮别的读写照常执行 */
+function safely(task) {
+	try {
+		return task();
+	} catch (error) {
+		queueMicrotask(() => {
+			throw error;
+		});
+		return;
+	}
+}
+function flush() {
+	const writes = reads.splice(0).map((read) => safely(read));
+	for (const write of writes) if (write) safely(write);
+}
+/** 登记一次读取（返回写入）：这一轮的读取都执行完，再执行写入 */
+function batchLayout(read) {
+	reads.push(read);
+	if (reads.length === 1) queueMicrotask(flush);
+}
+//#endregion
+export { batchLayout };
+
+//# sourceMappingURL=layout-batch.js.map

package/dist/utils/dom/layout-batch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-batch.js","names":[],"sources":["../../../src/utils/dom/layout-batch.ts"],"sourcesContent":["/**\n * 先读后写：当前任务里登记的读取在一个微任务里依次执行，全部读完再依次执行它们返回的写入。\n * 各组件挂载后、尺寸变化时各自“读布局 → 写样式”，一个写完下一个读就要重新布局；\n * 合并后一整轮只布局一次（同 fastdom 的 measure / mutate）。\n *\n *   batchLayout(() => {\n *     const width = item.offsetWidth;                      // 读\n *     return () => (bar.style.width = `${width}px`);       // 写\n *   });\n */\n\ntype Read = () => (() => void) | void;\n\nconst reads: Read[] = [];\n\n/** 一个读取或写入出错：报出来（下一个微任务里抛出），这一轮别的读写照常执行 */\nfunction safely<T>(task: () => T): T | undefined {\n  try {\n    return task();\n  } catch (error) {\n    queueMicrotask(() => {\n      throw error;\n    });\n    return undefined;\n  }\n}\n\nfunction flush() {\n  const writes = reads.splice(0).map((read) => safely(read));\n  for (const write of writes) if (write) safely(write);\n}\n\n/** 登记一次读取（返回写入）：这一轮的读取都执行完，再执行写入 */\nexport function batchLayout(read: Read): void {\n  reads.push(read);\n  if (reads.length === 1) queueMicrotask(flush);\n}\n"],"mappings":";AAaA,IAAM,QAAgB,CAAC;;AAGvB,SAAS,OAAU,MAA8B;CAC/C,IAAI;EACF,OAAO,KAAK;CACd,SAAS,OAAO;EACd,qBAAqB;GACnB,MAAM;EACR,CAAC;EACD;CACF;AACF;AAEA,SAAS,QAAQ;CACf,MAAM,SAAS,MAAM,OAAO,CAAC,CAAC,CAAC,KAAK,SAAS,OAAO,IAAI,CAAC;CACzD,KAAK,MAAM,SAAS,QAAQ,IAAI,OAAO,OAAO,KAAK;AACrD;;AAGA,SAAgB,YAAY,MAAkB;CAC5C,MAAM,KAAK,IAAI;CACf,IAAI,MAAM,WAAW,GAAG,eAAe,KAAK;AAC9C"}

package/dist/utils/dom/link.d.ts

@@ -0,0 +1,18 @@
+/** 这次点击该不该交给路由：只拦普通左键点击同源、在当前窗口打开、不是下载的链接 */
+export declare function shouldRouteClick(event: MouseEvent, anchor: HTMLAnchorElement): boolean;
+/** 外部链接（external）的属性：新窗口打开，不把本页交给对方（window.opener）、不带来源地址 */
+export declare const externalLinkAttrs: {
+    readonly target: '_blank';
+    readonly rel: 'noopener noreferrer';
+};
+/** 链接的路由能力：渲染的地址、点击处理（展开到 <a> 的 onClick）与“是不是当前页” */
+export interface RouterLink {
+    /** 渲染到 <a href> 上的地址：站内链接经路由的 resolve 补上 base 与 hash 模式的 #；没有 resolve 时原样 */
+    href: (href: string) => string;
+    /** 站内链接的普通点击改由路由跳转，交给路由的是写在组件上的原文 href；没有配置路由时什么也不做 */
+    onClick: (event: MouseEvent, href: string) => void;
+    /** href 是不是当前页；没有配置 isActive 时为 false。在渲染里调用以跟随路由变化 */
+    isActive: (href: string | undefined) => boolean;
+}
+/** 在组件 setup 里调用 */
+export declare function useRouterLink(): RouterLink;

package/dist/utils/dom/link.js

@@ -0,0 +1,44 @@
+import { useConfig } from "../../config/context.js";
+//#region src/utils/dom/link.ts
+/**
+* 链接与路由适配（config 的 router，参考 React Aria 的 RouterProvider）：
+* 组件渲染真正的 <a href>（右键菜单、新标签页打开、读屏都正常），普通左键点击站内链接时交给路由跳转。
+* Link、LinkButton、导航组件共用。
+*/
+/** 这次点击该不该交给路由：只拦普通左键点击同源、在当前窗口打开、不是下载的链接 */
+function shouldRouteClick(event, anchor) {
+	if (event.defaultPrevented || event.button !== 0) return false;
+	if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return false;
+	if (anchor.target && anchor.target !== "_self") return false;
+	if (anchor.hasAttribute("download")) return false;
+	return anchor.origin === window.location.origin;
+}
+/** 外部链接（external）的属性：新窗口打开，不把本页交给对方（window.opener）、不带来源地址 */
+var externalLinkAttrs = {
+	target: "_blank",
+	rel: "noopener noreferrer"
+};
+/** 外部链接（带协议、// 开头）与页内锚点（#…）不经过路由 */
+var isRoutable = (href) => !/^([a-z][\w+.-]*:|\/\/|#)/i.test(href);
+/** 在组件 setup 里调用 */
+function useRouterLink() {
+	const config = useConfig();
+	return {
+		href: (href) => {
+			const resolve = config.router?.resolve;
+			return resolve && isRoutable(href) ? resolve(href) : href;
+		},
+		onClick(event, href) {
+			const router = config.router;
+			const anchor = event.currentTarget;
+			if (!router || !(anchor instanceof HTMLAnchorElement) || !shouldRouteClick(event, anchor)) return;
+			event.preventDefault();
+			router.navigate(href);
+		},
+		isActive: (href) => href != null && config.router?.isActive?.(href) || false
+	};
+}
+//#endregion
+export { externalLinkAttrs, shouldRouteClick, useRouterLink };
+
+//# sourceMappingURL=link.js.map

package/dist/utils/dom/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","names":[],"sources":["../../../src/utils/dom/link.ts"],"sourcesContent":["/**\n * 链接与路由适配（config 的 router，参考 React Aria 的 RouterProvider）：\n * 组件渲染真正的 <a href>（右键菜单、新标签页打开、读屏都正常），普通左键点击站内链接时交给路由跳转。\n * Link、LinkButton、导航组件共用。\n */\nimport { useConfig } from '../../config/context';\n\n/** 这次点击该不该交给路由：只拦普通左键点击同源、在当前窗口打开、不是下载的链接 */\nexport function shouldRouteClick(event: MouseEvent, anchor: HTMLAnchorElement): boolean {\n  if (event.defaultPrevented || event.button !== 0) return false;\n  if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return false;\n  if (anchor.target && anchor.target !== '_self') return false;\n  if (anchor.hasAttribute('download')) return false;\n  return anchor.origin === window.location.origin;\n}\n\n/** 外部链接（external）的属性：新窗口打开，不把本页交给对方（window.opener）、不带来源地址 */\nexport const externalLinkAttrs = { target: '_blank', rel: 'noopener noreferrer' } as const;\n\n/** 外部链接（带协议、// 开头）与页内锚点（#…）不经过路由 */\nconst isRoutable = (href: string) => !/^([a-z][\\w+.-]*:|\\/\\/|#)/i.test(href);\n\n/** 链接的路由能力：渲染的地址、点击处理（展开到 <a> 的 onClick）与“是不是当前页” */\nexport interface RouterLink {\n  /** 渲染到 <a href> 上的地址：站内链接经路由的 resolve 补上 base 与 hash 模式的 #；没有 resolve 时原样 */\n  href: (href: string) => string;\n  /** 站内链接的普通点击改由路由跳转，交给路由的是写在组件上的原文 href；没有配置路由时什么也不做 */\n  onClick: (event: MouseEvent, href: string) => void;\n  /** href 是不是当前页；没有配置 isActive 时为 false。在渲染里调用以跟随路由变化 */\n  isActive: (href: string | undefined) => boolean;\n}\n\n/** 在组件 setup 里调用 */\nexport function useRouterLink(): RouterLink {\n  const config = useConfig();\n  return {\n    href: (href) => {\n      const resolve = config.router?.resolve;\n      return resolve && isRoutable(href) ? resolve(href) : href;\n    },\n    onClick(event, href) {\n      const router = config.router;\n      const anchor = event.currentTarget;\n      if (!router || !(anchor instanceof HTMLAnchorElement) || !shouldRouteClick(event, anchor)) {\n        return;\n      }\n      event.preventDefault();\n      // 交给路由的是原文（不是渲染出的带 base 的地址）：base、相对路径由路由自己处理\n      router.navigate(href);\n    },\n    isActive: (href) => (href != null && config.router?.isActive?.(href)) || false,\n  };\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,iBAAiB,OAAmB,QAAoC;CACtF,IAAI,MAAM,oBAAoB,MAAM,WAAW,GAAG,OAAO;CACzD,IAAI,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM,QAAQ,OAAO;CAC7E,IAAI,OAAO,UAAU,OAAO,WAAW,SAAS,OAAO;CACvD,IAAI,OAAO,aAAa,UAAU,GAAG,OAAO;CAC5C,OAAO,OAAO,WAAW,OAAO,SAAS;AAC3C;;AAGA,IAAa,oBAAoB;CAAE,QAAQ;CAAU,KAAK;AAAsB;;AAGhF,IAAM,cAAc,SAAiB,CAAC,4BAA4B,KAAK,IAAI;;AAa3E,SAAgB,gBAA4B;CAC1C,MAAM,SAAS,UAAU;CACzB,OAAO;EACL,OAAO,SAAS;GACd,MAAM,UAAU,OAAO,QAAQ;GAC/B,OAAO,WAAW,WAAW,IAAI,IAAI,QAAQ,IAAI,IAAI;EACvD;EACA,QAAQ,OAAO,MAAM;GACnB,MAAM,SAAS,OAAO;GACtB,MAAM,SAAS,MAAM;GACrB,IAAI,CAAC,UAAU,EAAE,kBAAkB,sBAAsB,CAAC,iBAAiB,OAAO,MAAM,GACtF;GAEF,MAAM,eAAe;GAErB,OAAO,SAAS,IAAI;EACtB;EACA,WAAW,SAAU,QAAQ,QAAQ,OAAO,QAAQ,WAAW,IAAI,KAAM;CAC3E;AACF"}

package/dist/utils/dom/media-query.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 媒体查询的响应式结果：随视口、系统设置变化。
+ *
+ *   const wide = useMediaQuery('(min-width: 64rem)');
+ *   if (wide.value) …
+ *
+ * 能用 CSS 媒体查询解决的（显示与隐藏、排版）写在样式里；只有行为要随之变化时（宽屏时关掉抽屉）才用它。
+ */
+import { type Ref } from 'vue';
+/** 媒体查询是否命中（在 setup 或 effectScope 里调用）；没有 matchMedia 的环境（服务端）恒为 false */
+export declare function useMediaQuery(query: string): Readonly<Ref<boolean>>;
+/** 系统是否偏好暗色（prefers-color-scheme: dark） */
+export declare function usePrefersDark(): Readonly<Ref<boolean>>;
+/**
+ * 系统是否要求减少动态效果（prefers-reduced-motion: reduce）。
+ * 取主题时长的动画不需要它（时长 token 已经是 0）；给装饰性、循环播放的动画判断要不要播。
+ */
+export declare function useReducedMotion(): Readonly<Ref<boolean>>;

package/dist/utils/dom/media-query.js

@@ -0,0 +1,36 @@
+import { onScopeDispose, shallowRef } from "vue";
+//#region src/utils/dom/media-query.ts
+/**
+* 媒体查询的响应式结果：随视口、系统设置变化。
+*
+*   const wide = useMediaQuery('(min-width: 64rem)');
+*   if (wide.value) …
+*
+* 能用 CSS 媒体查询解决的（显示与隐藏、排版）写在样式里；只有行为要随之变化时（宽屏时关掉抽屉）才用它。
+*/
+/** 媒体查询是否命中（在 setup 或 effectScope 里调用）；没有 matchMedia 的环境（服务端）恒为 false */
+function useMediaQuery(query) {
+	const list = globalThis.matchMedia?.(query);
+	const matches = shallowRef(list?.matches ?? false);
+	if (list) {
+		const update = (event) => matches.value = event.matches;
+		list.addEventListener("change", update);
+		onScopeDispose(() => list.removeEventListener("change", update));
+	}
+	return matches;
+}
+/** 系统是否偏好暗色（prefers-color-scheme: dark） */
+function usePrefersDark() {
+	return useMediaQuery("(prefers-color-scheme: dark)");
+}
+/**
+* 系统是否要求减少动态效果（prefers-reduced-motion: reduce）。
+* 取主题时长的动画不需要它（时长 token 已经是 0）；给装饰性、循环播放的动画判断要不要播。
+*/
+function useReducedMotion() {
+	return useMediaQuery("(prefers-reduced-motion: reduce)");
+}
+//#endregion
+export { useMediaQuery, usePrefersDark, useReducedMotion };
+
+//# sourceMappingURL=media-query.js.map

package/dist/utils/dom/media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-query.js","names":[],"sources":["../../../src/utils/dom/media-query.ts"],"sourcesContent":["/**\n * 媒体查询的响应式结果：随视口、系统设置变化。\n *\n *   const wide = useMediaQuery('(min-width: 64rem)');\n *   if (wide.value) …\n *\n * 能用 CSS 媒体查询解决的（显示与隐藏、排版）写在样式里；只有行为要随之变化时（宽屏时关掉抽屉）才用它。\n */\nimport { onScopeDispose, shallowRef, type Ref } from 'vue';\n\n/** 媒体查询是否命中（在 setup 或 effectScope 里调用）；没有 matchMedia 的环境（服务端）恒为 false */\nexport function useMediaQuery(query: string): Readonly<Ref<boolean>> {\n  const list = globalThis.matchMedia?.(query);\n  const matches = shallowRef(list?.matches ?? false);\n  if (list) {\n    const update = (event: MediaQueryListEvent) => (matches.value = event.matches);\n    list.addEventListener('change', update);\n    onScopeDispose(() => list.removeEventListener('change', update));\n  }\n  return matches;\n}\n\n/** 系统是否偏好暗色（prefers-color-scheme: dark） */\nexport function usePrefersDark(): Readonly<Ref<boolean>> {\n  return useMediaQuery('(prefers-color-scheme: dark)');\n}\n\n/**\n * 系统是否要求减少动态效果（prefers-reduced-motion: reduce）。\n * 取主题时长的动画不需要它（时长 token 已经是 0）；给装饰性、循环播放的动画判断要不要播。\n */\nexport function useReducedMotion(): Readonly<Ref<boolean>> {\n  return useMediaQuery('(prefers-reduced-motion: reduce)');\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAgB,cAAc,OAAuC;CACnE,MAAM,OAAO,WAAW,aAAa,KAAK;CAC1C,MAAM,UAAU,WAAW,MAAM,WAAW,KAAK;CACjD,IAAI,MAAM;EACR,MAAM,UAAU,UAAgC,QAAQ,QAAQ,MAAM;EACtE,KAAK,iBAAiB,UAAU,MAAM;EACtC,qBAAqB,KAAK,oBAAoB,UAAU,MAAM,CAAC;CACjE;CACA,OAAO;AACT;;AAGA,SAAgB,iBAAyC;CACvD,OAAO,cAAc,8BAA8B;AACrD;;;;;AAMA,SAAgB,mBAA2C;CACzD,OAAO,cAAc,kCAAkC;AACzD"}

package/dist/utils/dom/move.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 拖动工具：在 pointerdown 里调用 startMove，之后的移动、松开、取消都由它跟踪（COMPONENTS.md §7 拖动工具）。
+ * 参考 React Aria 的 useMove，直接基于 Pointer Events，不用手势库：
+ *   - setPointerCapture：指针移出元素、移出窗口也能继续拖
+ *   - pointercancel、失去捕获（系统手势、弹窗打断）按结束处理，不会卡在拖动状态
+ *   - 拖动期间禁止选中文字；拖动超过阈值后吞掉随后的 click，拖完不会误触发点击
+ *   - 只响应主按钮（鼠标左键、触摸、笔尖）
+ * 元素自己要设 touch-action（如 none），否则触摸拖动会被浏览器当成页面滚动。
+ * 键盘替代由组件自己提供（WCAG 2.5.7）。
+ *
+ *   onPointerdown={(event) => startMove(event, { onMove: ({ deltaX }) => … })}
+ */
+/** 一次移动的位置：clientX/Y 是当前位置，deltaX/Y 是相对按下时的位移（px） */
+export interface MovePoint {
+    /** 当前位置（视口坐标） */
+    readonly clientX: number;
+    /** 当前位置（视口坐标） */
+    readonly clientY: number;
+    /** 相对按下位置的横向位移 */
+    readonly deltaX: number;
+    /** 相对按下位置的纵向位移 */
+    readonly deltaY: number;
+}
+/** startMove 的回调与选项 */
+export interface MoveOptions {
+    /** 指针移动（位移超过 threshold 之后才开始报告） */
+    onMove: (point: MovePoint, event: PointerEvent) => void;
+    /** 结束：松开、取消或失去捕获；moved 表示是否真的拖动过（超过阈值） */
+    onEnd?: (point: MovePoint & {
+        readonly moved: boolean;
+        readonly cancelled: boolean;
+    }) => void;
+    /** 位移超过多少 px 才算拖动，默认 0（按下即开始）；需要区分点击与拖动时设 3 左右 */
+    threshold?: number;
+    /**
+     * 捕获指针、接收后续事件的元素，默认是按下的元素（event.currentTarget）。
+     * 拖动中会被移动的元素（排序时 Vue 重排 DOM）要换成不动的祖先：元素一离开文档就失去捕获，拖动会被当成取消
+     */
+    captureTarget?: Element;
+    /**
+     * 拖过之后吞掉随后的 click，默认 threshold 大于 0 时吞（阈值为 0 时按下即拖动，吞了就没有单击了）。
+     * 捕获在祖先上时 click 落在祖先上（如画布的空白处），按下即拖、又不该算点击的要设 true
+     */
+    swallowClick?: boolean;
+}
+/** 按下时调用：开始跟踪这个指针，返回提前结束的函数（组件卸载时调用）。不是主按钮时什么也不做 */
+export declare function startMove(event: PointerEvent, options: MoveOptions): () => void;

package/dist/utils/dom/move.js

@@ -0,0 +1,69 @@
+//#region src/utils/dom/move.ts
+/** 按下时调用：开始跟踪这个指针，返回提前结束的函数（组件卸载时调用）。不是主按钮时什么也不做 */
+function startMove(event, options) {
+	if (event.button !== 0 || !(event.currentTarget instanceof Element)) return () => {};
+	const target = options.captureTarget ?? event.currentTarget;
+	const { pointerId, clientX: startX, clientY: startY } = event;
+	const threshold = options.threshold ?? 0;
+	const swallowClick = options.swallowClick ?? threshold > 0;
+	let moved = threshold === 0;
+	let finished = false;
+	let last = {
+		clientX: startX,
+		clientY: startY,
+		deltaX: 0,
+		deltaY: 0
+	};
+	try {
+		target.setPointerCapture(pointerId);
+	} catch {}
+	const root = document.documentElement;
+	const userSelect = root.style.userSelect;
+	root.style.userSelect = "none";
+	const onMove = (move) => {
+		if (move.pointerId !== pointerId) return;
+		last = {
+			clientX: move.clientX,
+			clientY: move.clientY,
+			deltaX: move.clientX - startX,
+			deltaY: move.clientY - startY
+		};
+		if (!moved && Math.hypot(last.deltaX, last.deltaY) < threshold) return;
+		moved = true;
+		options.onMove(last, move);
+	};
+	const finish = (cancelled) => {
+		if (finished) return;
+		finished = true;
+		target.removeEventListener("pointermove", onMove);
+		target.removeEventListener("pointerup", onUp);
+		target.removeEventListener("pointercancel", onCancel);
+		target.removeEventListener("lostpointercapture", onCancel);
+		root.style.userSelect = userSelect;
+		if (target.hasPointerCapture?.(pointerId)) target.releasePointerCapture(pointerId);
+		if (moved && swallowClick) {
+			const swallow = (click) => click.stopPropagation();
+			window.addEventListener("click", swallow, {
+				capture: true,
+				once: true
+			});
+			setTimeout(() => window.removeEventListener("click", swallow, { capture: true }));
+		}
+		options.onEnd?.({
+			...last,
+			moved,
+			cancelled
+		});
+	};
+	const onUp = (up) => up.pointerId === pointerId && finish(false);
+	const onCancel = (cancel) => cancel.pointerId === pointerId && finish(true);
+	target.addEventListener("pointermove", onMove);
+	target.addEventListener("pointerup", onUp);
+	target.addEventListener("pointercancel", onCancel);
+	target.addEventListener("lostpointercapture", onCancel);
+	return () => finish(true);
+}
+//#endregion
+export { startMove };
+
+//# sourceMappingURL=move.js.map

package/dist/utils/dom/move.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"move.js","names":[],"sources":["../../../src/utils/dom/move.ts"],"sourcesContent":["/**\n * 拖动工具：在 pointerdown 里调用 startMove，之后的移动、松开、取消都由它跟踪（COMPONENTS.md §7 拖动工具）。\n * 参考 React Aria 的 useMove，直接基于 Pointer Events，不用手势库：\n *   - setPointerCapture：指针移出元素、移出窗口也能继续拖\n *   - pointercancel、失去捕获（系统手势、弹窗打断）按结束处理，不会卡在拖动状态\n *   - 拖动期间禁止选中文字；拖动超过阈值后吞掉随后的 click，拖完不会误触发点击\n *   - 只响应主按钮（鼠标左键、触摸、笔尖）\n * 元素自己要设 touch-action（如 none），否则触摸拖动会被浏览器当成页面滚动。\n * 键盘替代由组件自己提供（WCAG 2.5.7）。\n *\n *   onPointerdown={(event) => startMove(event, { onMove: ({ deltaX }) => … })}\n */\n\n/** 一次移动的位置：clientX/Y 是当前位置，deltaX/Y 是相对按下时的位移（px） */\nexport interface MovePoint {\n  /** 当前位置（视口坐标） */\n  readonly clientX: number;\n  /** 当前位置（视口坐标） */\n  readonly clientY: number;\n  /** 相对按下位置的横向位移 */\n  readonly deltaX: number;\n  /** 相对按下位置的纵向位移 */\n  readonly deltaY: number;\n}\n\n/** startMove 的回调与选项 */\nexport interface MoveOptions {\n  /** 指针移动（位移超过 threshold 之后才开始报告） */\n  onMove: (point: MovePoint, event: PointerEvent) => void;\n  /** 结束：松开、取消或失去捕获；moved 表示是否真的拖动过（超过阈值） */\n  onEnd?: (point: MovePoint & { readonly moved: boolean; readonly cancelled: boolean }) => void;\n  /** 位移超过多少 px 才算拖动，默认 0（按下即开始）；需要区分点击与拖动时设 3 左右 */\n  threshold?: number;\n  /**\n   * 捕获指针、接收后续事件的元素，默认是按下的元素（event.currentTarget）。\n   * 拖动中会被移动的元素（排序时 Vue 重排 DOM）要换成不动的祖先：元素一离开文档就失去捕获，拖动会被当成取消\n   */\n  captureTarget?: Element;\n  /**\n   * 拖过之后吞掉随后的 click，默认 threshold 大于 0 时吞（阈值为 0 时按下即拖动，吞了就没有单击了）。\n   * 捕获在祖先上时 click 落在祖先上（如画布的空白处），按下即拖、又不该算点击的要设 true\n   */\n  swallowClick?: boolean;\n}\n\n/** 按下时调用：开始跟踪这个指针，返回提前结束的函数（组件卸载时调用）。不是主按钮时什么也不做 */\nexport function startMove(event: PointerEvent, options: MoveOptions): () => void {\n  if (event.button !== 0 || !(event.currentTarget instanceof Element)) return () => {};\n  const target = options.captureTarget ?? event.currentTarget;\n  const { pointerId, clientX: startX, clientY: startY } = event;\n  const threshold = options.threshold ?? 0;\n  const swallowClick = options.swallowClick ?? threshold > 0;\n  let moved = threshold === 0;\n  let finished = false;\n  let last: MovePoint = { clientX: startX, clientY: startY, deltaX: 0, deltaY: 0 };\n\n  // 捕获失败（指针已经松开、元素不在文档里）时照常用元素上的事件，只是移出元素后收不到\n  try {\n    target.setPointerCapture(pointerId);\n  } catch {}\n  const root = document.documentElement;\n  const userSelect = root.style.userSelect;\n  root.style.userSelect = 'none';\n\n  const onMove = (move: PointerEvent) => {\n    if (move.pointerId !== pointerId) return;\n    last = {\n      clientX: move.clientX,\n      clientY: move.clientY,\n      deltaX: move.clientX - startX,\n      deltaY: move.clientY - startY,\n    };\n    if (!moved && Math.hypot(last.deltaX, last.deltaY) < threshold) return;\n    moved = true;\n    options.onMove(last, move);\n  };\n  const finish = (cancelled: boolean) => {\n    if (finished) return;\n    finished = true;\n    target.removeEventListener('pointermove', onMove as EventListener);\n    target.removeEventListener('pointerup', onUp as EventListener);\n    target.removeEventListener('pointercancel', onCancel as EventListener);\n    target.removeEventListener('lostpointercapture', onCancel as EventListener);\n    root.style.userSelect = userSelect;\n    if (target.hasPointerCapture?.(pointerId)) target.releasePointerCapture(pointerId);\n    if (moved && swallowClick) {\n      const swallow = (click: Event) => click.stopPropagation();\n      window.addEventListener('click', swallow, { capture: true, once: true });\n      setTimeout(() => window.removeEventListener('click', swallow, { capture: true }));\n    }\n    options.onEnd?.({ ...last, moved, cancelled });\n  };\n  const onUp = (up: PointerEvent) => up.pointerId === pointerId && finish(false);\n  const onCancel = (cancel: PointerEvent) => cancel.pointerId === pointerId && finish(true);\n\n  target.addEventListener('pointermove', onMove as EventListener);\n  target.addEventListener('pointerup', onUp as EventListener);\n  target.addEventListener('pointercancel', onCancel as EventListener);\n  target.addEventListener('lostpointercapture', onCancel as EventListener);\n  return () => finish(true);\n}\n"],"mappings":";;AA8CA,SAAgB,UAAU,OAAqB,SAAkC;CAC/E,IAAI,MAAM,WAAW,KAAK,EAAE,MAAM,yBAAyB,UAAU,aAAa,CAAC;CACnF,MAAM,SAAS,QAAQ,iBAAiB,MAAM;CAC9C,MAAM,EAAE,WAAW,SAAS,QAAQ,SAAS,WAAW;CACxD,MAAM,YAAY,QAAQ,aAAa;CACvC,MAAM,eAAe,QAAQ,gBAAgB,YAAY;CACzD,IAAI,QAAQ,cAAc;CAC1B,IAAI,WAAW;CACf,IAAI,OAAkB;EAAE,SAAS;EAAQ,SAAS;EAAQ,QAAQ;EAAG,QAAQ;CAAE;CAG/E,IAAI;EACF,OAAO,kBAAkB,SAAS;CACpC,QAAQ,CAAC;CACT,MAAM,OAAO,SAAS;CACtB,MAAM,aAAa,KAAK,MAAM;CAC9B,KAAK,MAAM,aAAa;CAExB,MAAM,UAAU,SAAuB;EACrC,IAAI,KAAK,cAAc,WAAW;EAClC,OAAO;GACL,SAAS,KAAK;GACd,SAAS,KAAK;GACd,QAAQ,KAAK,UAAU;GACvB,QAAQ,KAAK,UAAU;EACzB;EACA,IAAI,CAAC,SAAS,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM,IAAI,WAAW;EAChE,QAAQ;EACR,QAAQ,OAAO,MAAM,IAAI;CAC3B;CACA,MAAM,UAAU,cAAuB;EACrC,IAAI,UAAU;EACd,WAAW;EACX,OAAO,oBAAoB,eAAe,MAAuB;EACjE,OAAO,oBAAoB,aAAa,IAAqB;EAC7D,OAAO,oBAAoB,iBAAiB,QAAyB;EACrE,OAAO,oBAAoB,sBAAsB,QAAyB;EAC1E,KAAK,MAAM,aAAa;EACxB,IAAI,OAAO,oBAAoB,SAAS,GAAG,OAAO,sBAAsB,SAAS;EACjF,IAAI,SAAS,cAAc;GACzB,MAAM,WAAW,UAAiB,MAAM,gBAAgB;GACxD,OAAO,iBAAiB,SAAS,SAAS;IAAE,SAAS;IAAM,MAAM;GAAK,CAAC;GACvE,iBAAiB,OAAO,oBAAoB,SAAS,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;EAClF;EACA,QAAQ,QAAQ;GAAE,GAAG;GAAM;GAAO;EAAU,CAAC;CAC/C;CACA,MAAM,QAAQ,OAAqB,GAAG,cAAc,aAAa,OAAO,KAAK;CAC7E,MAAM,YAAY,WAAyB,OAAO,cAAc,aAAa,OAAO,IAAI;CAExF,OAAO,iBAAiB,eAAe,MAAuB;CAC9D,OAAO,iBAAiB,aAAa,IAAqB;CAC1D,OAAO,iBAAiB,iBAAiB,QAAyB;CAClE,OAAO,iBAAiB,sBAAsB,QAAyB;CACvE,aAAa,OAAO,IAAI;AAC1B"}

package/dist/utils/dom/open-change.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 浮层开关的原因：Dialog、Drawer、Popover、Menu、Tooltip、Select、DatePicker 等的 onOpenChange(open, { reason, event })
+ * 都用这一套（参考 Base UI 的 eventDetails.reason）。只报告用户的操作与命令式调用；父级直接改 open 时不调用。
+ *
+ *   <Dialog _open={open} onOpenChange={(open, { reason }) => reason === 'escape' && track('esc')} …>
+ */
+/** onOpenChange 的原因 */
+export interface OpenChangeReasons {
+    /** 点了触发器（或在触发器上按 Enter、空格、方向键） */
+    trigger: unknown;
+    /** 点了浮层外面（模态的遮罩），或别的浮层打开把它顶掉 */
+    outside: unknown;
+    /** 按了 Esc */
+    escape: unknown;
+    /** 关闭按钮、取消按钮 */
+    close: unknown;
+    /** 确认按钮（对话框、Popconfirm） */
+    confirm: unknown;
+    /** 选了一项（菜单项、下拉选项、日期），浮层随之关闭 */
+    select: unknown;
+    /** 指针移入移出（Tooltip、HoverCard、子菜单） */
+    hover: unknown;
+    /** 焦点移入移出（Tooltip、离开下拉框） */
+    focus: unknown;
+    /** 代码调用：useDialog 的 open / close、快捷键（CommandPalette） */
+    imperative: unknown;
+}
+/** onOpenChange 的第二个参数 */
+export interface OpenChangeDetails {
+    /** 为什么打开或关闭 */
+    reason: keyof OpenChangeReasons;
+    /** 引起变化的原生事件（有的话） */
+    event?: Event;
+}
+/** 浮层共有的 onOpenChange 属性 */
+export interface OpenChangeProps {
+    /**
+     * 用户打开、关闭之后调用，带原因（Esc、点外面、关闭按钮、选了一项……）；父级改 open 时不调用。
+     * 只是通知：模态要在关闭前确认用 beforeClose
+     */
+    onOpenChange?: (open: boolean, details: OpenChangeDetails) => void;
+}
+/** openSetter 返回的开关函数：改 open 并通知 onOpenChange */
+export type SetOpen = (open: boolean, reason: keyof OpenChangeReasons, event?: Event) => void;
+/**
+ * 浮层的开关：改 open（写回父级的 _bind）并调用 onOpenChange；值没变时什么也不做。在组件 setup 里调用：
+ *
+ *   const setOpen = openSetter(() => open, (next) => (open = next), () => onOpenChange);
+ *   setOpen(false, 'select', event);
+ */
+export declare function openSetter(read: () => boolean, write: (open: boolean) => void, handler: () => OpenChangeProps['onOpenChange']): SetOpen;

package/dist/utils/dom/open-change.js

@@ -0,0 +1,21 @@
+//#region src/utils/dom/open-change.ts
+/**
+* 浮层的开关：改 open（写回父级的 _bind）并调用 onOpenChange；值没变时什么也不做。在组件 setup 里调用：
+*
+*   const setOpen = openSetter(() => open, (next) => (open = next), () => onOpenChange);
+*   setOpen(false, 'select', event);
+*/
+function openSetter(read, write, handler) {
+	return (open, reason, event) => {
+		if (read() === open) return;
+		write(open);
+		handler()?.(open, {
+			reason,
+			event
+		});
+	};
+}
+//#endregion
+export { openSetter };
+
+//# sourceMappingURL=open-change.js.map

package/dist/utils/dom/open-change.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"open-change.js","names":[],"sources":["../../../src/utils/dom/open-change.ts"],"sourcesContent":["/**\n * 浮层开关的原因：Dialog、Drawer、Popover、Menu、Tooltip、Select、DatePicker 等的 onOpenChange(open, { reason, event })\n * 都用这一套（参考 Base UI 的 eventDetails.reason）。只报告用户的操作与命令式调用；父级直接改 open 时不调用。\n *\n *   <Dialog _open={open} onOpenChange={(open, { reason }) => reason === 'escape' && track('esc')} …>\n */\n\n/** onOpenChange 的原因 */\nexport interface OpenChangeReasons {\n  /** 点了触发器（或在触发器上按 Enter、空格、方向键） */\n  trigger: unknown;\n  /** 点了浮层外面（模态的遮罩），或别的浮层打开把它顶掉 */\n  outside: unknown;\n  /** 按了 Esc */\n  escape: unknown;\n  /** 关闭按钮、取消按钮 */\n  close: unknown;\n  /** 确认按钮（对话框、Popconfirm） */\n  confirm: unknown;\n  /** 选了一项（菜单项、下拉选项、日期），浮层随之关闭 */\n  select: unknown;\n  /** 指针移入移出（Tooltip、HoverCard、子菜单） */\n  hover: unknown;\n  /** 焦点移入移出（Tooltip、离开下拉框） */\n  focus: unknown;\n  /** 代码调用：useDialog 的 open / close、快捷键（CommandPalette） */\n  imperative: unknown;\n}\n\n/** onOpenChange 的第二个参数 */\nexport interface OpenChangeDetails {\n  /** 为什么打开或关闭 */\n  reason: keyof OpenChangeReasons;\n  /** 引起变化的原生事件（有的话） */\n  event?: Event;\n}\n\n/** 浮层共有的 onOpenChange 属性 */\nexport interface OpenChangeProps {\n  /**\n   * 用户打开、关闭之后调用，带原因（Esc、点外面、关闭按钮、选了一项……）；父级改 open 时不调用。\n   * 只是通知：模态要在关闭前确认用 beforeClose\n   */\n  onOpenChange?: (open: boolean, details: OpenChangeDetails) => void;\n}\n\n/** openSetter 返回的开关函数：改 open 并通知 onOpenChange */\nexport type SetOpen = (open: boolean, reason: keyof OpenChangeReasons, event?: Event) => void;\n\n/**\n * 浮层的开关：改 open（写回父级的 _bind）并调用 onOpenChange；值没变时什么也不做。在组件 setup 里调用：\n *\n *   const setOpen = openSetter(() => open, (next) => (open = next), () => onOpenChange);\n *   setOpen(false, 'select', event);\n */\nexport function openSetter(\n  read: () => boolean,\n  write: (open: boolean) => void,\n  handler: () => OpenChangeProps['onOpenChange'],\n): SetOpen {\n  return (open, reason, event) => {\n    if (read() === open) return;\n    write(open);\n    handler()?.(open, { reason, event });\n  };\n}\n"],"mappings":";;;;;;;AAuDA,SAAgB,WACd,MACA,OACA,SACS;CACT,QAAQ,MAAM,QAAQ,UAAU;EAC9B,IAAI,KAAK,MAAM,MAAM;EACrB,MAAM,IAAI;EACV,QAAQ,CAAC,GAAG,MAAM;GAAE;GAAQ;EAAM,CAAC;CACrC;AACF"}

package/dist/utils/dom/overflow.d.ts

@@ -0,0 +1,29 @@
+/** useOverflowItems 的选项 */
+export interface OverflowItemsOptions {
+    /** 一行的容器（元素或组件实例） */
+    container: () => unknown;
+    /** 项数 */
+    count: () => number;
+    /** 至少显示几项（再窄也不折起），默认 0 */
+    min?: () => number;
+    /** 同一行里还要给别的东西留出的宽度（px），如 TagsInput 的输入框，默认 0 */
+    reserve?: () => number;
+}
+/** useOverflowItems 的返回值 */
+export interface OverflowItems {
+    /** 显示前几项 */
+    readonly visible: number;
+    /** 折起了几项（count − visible） */
+    readonly hidden: number;
+    /** 第 index 项的属性：展开到项的根元素上 */
+    itemProps(index: number): Record<string, unknown>;
+    /** “+N”的属性：展开到它的根元素上 */
+    restProps(): Record<string, unknown>;
+}
+/** 量出一行放得下几项（在 setup 里调用） */
+export declare function useOverflowItems(options: OverflowItemsOptions): OverflowItems;
+/**
+ * 前几项放得下：都放得下时不需要“+N”；否则在留出“+N”的宽度后尽量多放
+ * （widths 是各项的宽度，gap 是项之间的间距）
+ */
+export declare function fitCount(widths: readonly number[], restWidth: number, gap: number, available: number): number;

package/dist/utils/dom/overflow.js

@@ -0,0 +1,108 @@
+import { batchLayout } from "./layout-batch.js";
+import { useResizeObserver } from "./resize.js";
+import { shallowRef, watch } from "vue";
+//#region src/utils/dom/overflow.ts
+/**
+* 一行放不下时折起后面的项：量出容器放得下前几项，其余收进“+N”（或“更多”菜单）。
+* Select / TreeSelect 的 maxTagCount、Tabs 溢出、横向导航、工具栏都用它。参考 rc-overflow（Ant Design）的做法：
+* 所有项都渲染，放不下的移出排版、藏起来但仍可测量，宽度变了、项数变了就重新算。
+*
+*   const overflow = useOverflowItems({ container: () => row, count: () => tags.length });
+*   <div ref={row} style="display: flex; gap: 4px">
+*     {tags.map((tag, index) => <Tag {...overflow.itemProps(index)}>{tag}</Tag>)}
+*     <Tag {...overflow.restProps()}>+{overflow.hidden}</Tag>
+*   </div>
+*
+* - 容器是一行（flex、不换行、position: relative）；项与“+N”都是它的直接子元素，间距取容器的 column-gap。
+*   itemProps、restProps 里有 style（藏起来时），与项自己的 style 一起用 mergeAttrs 合并。
+* - 藏起来的项：绝对定位、visibility: hidden、aria-hidden 与 inert，不占位、读屏与 Tab 都跳过。
+*   “+N”在没有折起的项时同样藏起来（仍要量它的宽度，决定最后一项放不放得下）。
+* - 宽度在下一次布局时读（batchLayout，与别的组件的读取合在一次布局里）；量不到布局（服务端、测试环境）时全部显示。
+*/
+/** 藏起来但仍可测量：移出排版、不可见，读屏与 Tab 跳过 */
+var MEASURE_ONLY = {
+	position: "absolute",
+	visibility: "hidden",
+	pointerEvents: "none",
+	insetInlineStart: 0,
+	insetBlockStart: 0
+};
+/** 量出一行放得下几项（在 setup 里调用） */
+function useOverflowItems(options) {
+	const visible = shallowRef(Number.POSITIVE_INFINITY);
+	const container = () => {
+		const value = options.container();
+		return value instanceof HTMLElement ? value : null;
+	};
+	function measure() {
+		batchLayout(() => {
+			const root = container();
+			if (!root) return;
+			const items = [...root.querySelectorAll(":scope > [data-overflow-item]")];
+			const rest = root.querySelector(":scope > [data-overflow-rest]");
+			const style = getComputedStyle(root);
+			const available = root.clientWidth - (parseFloat(style.paddingInlineStart) || 0) - (parseFloat(style.paddingInlineEnd) || 0) - (options.reserve?.() ?? 0);
+			const gap = parseFloat(style.columnGap) || 0;
+			const widths = items.map((item) => item.getBoundingClientRect().width);
+			const restWidth = rest?.getBoundingClientRect().width ?? 0;
+			if (available <= 0 && widths.every((width) => width === 0)) return () => visible.value = Number.POSITIVE_INFINITY;
+			const fit = fitCount(widths, restWidth, gap, available);
+			const next = Math.max(fit, Math.min(options.min?.() ?? 0, widths.length));
+			return () => visible.value = next;
+		});
+	}
+	useResizeObserver(() => {
+		const root = container();
+		if (!root) return [];
+		return [root, ...root.querySelectorAll(":scope > [data-overflow-item]")];
+	}, measure);
+	watch(() => [
+		options.count(),
+		options.reserve?.(),
+		options.min?.()
+	], measure, {
+		immediate: true,
+		flush: "post"
+	});
+	const shown = () => Math.min(visible.value, options.count());
+	return {
+		get visible() {
+			return shown();
+		},
+		get hidden() {
+			return options.count() - shown();
+		},
+		itemProps: (index) => index < shown() ? { "data-overflow-item": index } : {
+			"data-overflow-item": index,
+			"aria-hidden": "true",
+			inert: true,
+			style: MEASURE_ONLY
+		},
+		restProps: () => shown() < options.count() ? { "data-overflow-rest": "" } : {
+			"data-overflow-rest": "",
+			"aria-hidden": "true",
+			inert: true,
+			style: MEASURE_ONLY
+		}
+	};
+}
+/**
+* 前几项放得下：都放得下时不需要“+N”；否则在留出“+N”的宽度后尽量多放
+* （widths 是各项的宽度，gap 是项之间的间距）
+*/
+function fitCount(widths, restWidth, gap, available) {
+	if (widths.reduce((sum, width, index) => sum + width + (index ? gap : 0), 0) <= available) return widths.length;
+	let used = restWidth;
+	let count = 0;
+	for (const width of widths) {
+		const next = used + gap + width;
+		if (next > available) break;
+		used = next;
+		count++;
+	}
+	return count;
+}
+//#endregion
+export { fitCount, useOverflowItems };
+
+//# sourceMappingURL=overflow.js.map

package/dist/utils/dom/overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow.js","names":[],"sources":["../../../src/utils/dom/overflow.ts"],"sourcesContent":["/**\n * 一行放不下时折起后面的项：量出容器放得下前几项，其余收进“+N”（或“更多”菜单）。\n * Select / TreeSelect 的 maxTagCount、Tabs 溢出、横向导航、工具栏都用它。参考 rc-overflow（Ant Design）的做法：\n * 所有项都渲染，放不下的移出排版、藏起来但仍可测量，宽度变了、项数变了就重新算。\n *\n *   const overflow = useOverflowItems({ container: () => row, count: () => tags.length });\n *   <div ref={row} style=\"display: flex; gap: 4px\">\n *     {tags.map((tag, index) => <Tag {...overflow.itemProps(index)}>{tag}</Tag>)}\n *     <Tag {...overflow.restProps()}>+{overflow.hidden}</Tag>\n *   </div>\n *\n * - 容器是一行（flex、不换行、position: relative）；项与“+N”都是它的直接子元素，间距取容器的 column-gap。\n *   itemProps、restProps 里有 style（藏起来时），与项自己的 style 一起用 mergeAttrs 合并。\n * - 藏起来的项：绝对定位、visibility: hidden、aria-hidden 与 inert，不占位、读屏与 Tab 都跳过。\n *   “+N”在没有折起的项时同样藏起来（仍要量它的宽度，决定最后一项放不放得下）。\n * - 宽度在下一次布局时读（batchLayout，与别的组件的读取合在一次布局里）；量不到布局（服务端、测试环境）时全部显示。\n */\nimport { shallowRef, watch } from 'vue';\nimport { batchLayout } from './layout-batch';\nimport { useResizeObserver } from './resize';\n\n/** useOverflowItems 的选项 */\nexport interface OverflowItemsOptions {\n  /** 一行的容器（元素或组件实例） */\n  container: () => unknown;\n  /** 项数 */\n  count: () => number;\n  /** 至少显示几项（再窄也不折起），默认 0 */\n  min?: () => number;\n  /** 同一行里还要给别的东西留出的宽度（px），如 TagsInput 的输入框，默认 0 */\n  reserve?: () => number;\n}\n\n/** useOverflowItems 的返回值 */\nexport interface OverflowItems {\n  /** 显示前几项 */\n  readonly visible: number;\n  /** 折起了几项（count − visible） */\n  readonly hidden: number;\n  /** 第 index 项的属性：展开到项的根元素上 */\n  itemProps(index: number): Record<string, unknown>;\n  /** “+N”的属性：展开到它的根元素上 */\n  restProps(): Record<string, unknown>;\n}\n\n/** 藏起来但仍可测量：移出排版、不可见，读屏与 Tab 跳过 */\nconst MEASURE_ONLY = {\n  position: 'absolute',\n  visibility: 'hidden',\n  pointerEvents: 'none',\n  insetInlineStart: 0,\n  insetBlockStart: 0,\n} as const;\n\n/** 量出一行放得下几项（在 setup 里调用） */\nexport function useOverflowItems(options: OverflowItemsOptions): OverflowItems {\n  const visible = shallowRef(Number.POSITIVE_INFINITY);\n  const container = () => {\n    const value = options.container();\n    return value instanceof HTMLElement ? value : null;\n  };\n\n  function measure() {\n    batchLayout(() => {\n      const root = container();\n      if (!root) return;\n      const items = [...root.querySelectorAll<HTMLElement>(':scope > [data-overflow-item]')];\n      const rest = root.querySelector<HTMLElement>(':scope > [data-overflow-rest]');\n      const style = getComputedStyle(root);\n      const available =\n        root.clientWidth -\n        (parseFloat(style.paddingInlineStart) || 0) -\n        (parseFloat(style.paddingInlineEnd) || 0) -\n        (options.reserve?.() ?? 0);\n      const gap = parseFloat(style.columnGap) || 0;\n      const widths = items.map((item) => item.getBoundingClientRect().width);\n      const restWidth = rest?.getBoundingClientRect().width ?? 0;\n      // 量不到布局：全部显示\n      if (available <= 0 && widths.every((width) => width === 0)) {\n        return () => (visible.value = Number.POSITIVE_INFINITY);\n      }\n      const fit = fitCount(widths, restWidth, gap, available);\n      const next = Math.max(fit, Math.min(options.min?.() ?? 0, widths.length));\n      return () => (visible.value = next);\n    });\n  }\n\n  useResizeObserver(() => {\n    const root = container();\n    if (!root) return [];\n    return [root, ...root.querySelectorAll<HTMLElement>(':scope > [data-overflow-item]')];\n  }, measure);\n  // 挂载后量一次；项数变了、留出的宽度变了：新的项渲染后重新量\n  watch(() => [options.count(), options.reserve?.(), options.min?.()], measure, {\n    immediate: true,\n    flush: 'post',\n  });\n\n  const shown = () => Math.min(visible.value, options.count());\n  return {\n    get visible() {\n      return shown();\n    },\n    get hidden() {\n      return options.count() - shown();\n    },\n    itemProps: (index) =>\n      index < shown()\n        ? { 'data-overflow-item': index }\n        : { 'data-overflow-item': index, 'aria-hidden': 'true', inert: true, style: MEASURE_ONLY },\n    restProps: () =>\n      shown() < options.count()\n        ? { 'data-overflow-rest': '' }\n        : { 'data-overflow-rest': '', 'aria-hidden': 'true', inert: true, style: MEASURE_ONLY },\n  };\n}\n\n/**\n * 前几项放得下：都放得下时不需要“+N”；否则在留出“+N”的宽度后尽量多放\n * （widths 是各项的宽度，gap 是项之间的间距）\n */\nexport function fitCount(\n  widths: readonly number[],\n  restWidth: number,\n  gap: number,\n  available: number,\n): number {\n  const total = widths.reduce((sum, width, index) => sum + width + (index ? gap : 0), 0);\n  if (total <= available) return widths.length;\n  let used = restWidth;\n  let count = 0;\n  for (const width of widths) {\n    const next = used + gap + width;\n    if (next > available) break;\n    used = next;\n    count++;\n  }\n  return count;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8CA,IAAM,eAAe;CACnB,UAAU;CACV,YAAY;CACZ,eAAe;CACf,kBAAkB;CAClB,iBAAiB;AACnB;;AAGA,SAAgB,iBAAiB,SAA8C;CAC7E,MAAM,UAAU,WAAW,OAAO,iBAAiB;CACnD,MAAM,kBAAkB;EACtB,MAAM,QAAQ,QAAQ,UAAU;EAChC,OAAO,iBAAiB,cAAc,QAAQ;CAChD;CAEA,SAAS,UAAU;EACjB,kBAAkB;GAChB,MAAM,OAAO,UAAU;GACvB,IAAI,CAAC,MAAM;GACX,MAAM,QAAQ,CAAC,GAAG,KAAK,iBAA8B,+BAA+B,CAAC;GACrF,MAAM,OAAO,KAAK,cAA2B,+BAA+B;GAC5E,MAAM,QAAQ,iBAAiB,IAAI;GACnC,MAAM,YACJ,KAAK,eACJ,WAAW,MAAM,kBAAkB,KAAK,MACxC,WAAW,MAAM,gBAAgB,KAAK,MACtC,QAAQ,UAAU,KAAK;GAC1B,MAAM,MAAM,WAAW,MAAM,SAAS,KAAK;GAC3C,MAAM,SAAS,MAAM,KAAK,SAAS,KAAK,sBAAsB,CAAC,CAAC,KAAK;GACrE,MAAM,YAAY,MAAM,sBAAsB,CAAC,CAAC,SAAS;GAEzD,IAAI,aAAa,KAAK,OAAO,OAAO,UAAU,UAAU,CAAC,GACvD,aAAc,QAAQ,QAAQ,OAAO;GAEvC,MAAM,MAAM,SAAS,QAAQ,WAAW,KAAK,SAAS;GACtD,MAAM,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,QAAQ,MAAM,KAAK,GAAG,OAAO,MAAM,CAAC;GACxE,aAAc,QAAQ,QAAQ;EAChC,CAAC;CACH;CAEA,wBAAwB;EACtB,MAAM,OAAO,UAAU;EACvB,IAAI,CAAC,MAAM,OAAO,CAAC;EACnB,OAAO,CAAC,MAAM,GAAG,KAAK,iBAA8B,+BAA+B,CAAC;CACtF,GAAG,OAAO;CAEV,YAAY;EAAC,QAAQ,MAAM;EAAG,QAAQ,UAAU;EAAG,QAAQ,MAAM;CAAC,GAAG,SAAS;EAC5E,WAAW;EACX,OAAO;CACT,CAAC;CAED,MAAM,cAAc,KAAK,IAAI,QAAQ,OAAO,QAAQ,MAAM,CAAC;CAC3D,OAAO;EACL,IAAI,UAAU;GACZ,OAAO,MAAM;EACf;EACA,IAAI,SAAS;GACX,OAAO,QAAQ,MAAM,IAAI,MAAM;EACjC;EACA,YAAY,UACV,QAAQ,MAAM,IACV,EAAE,sBAAsB,MAAM,IAC9B;GAAE,sBAAsB;GAAO,eAAe;GAAQ,OAAO;GAAM,OAAO;EAAa;EAC7F,iBACE,MAAM,IAAI,QAAQ,MAAM,IACpB,EAAE,sBAAsB,GAAG,IAC3B;GAAE,sBAAsB;GAAI,eAAe;GAAQ,OAAO;GAAM,OAAO;EAAa;CAC5F;AACF;;;;;AAMA,SAAgB,SACd,QACA,WACA,KACA,WACQ;CAER,IADc,OAAO,QAAQ,KAAK,OAAO,UAAU,MAAM,SAAS,QAAQ,MAAM,IAAI,CAChF,KAAS,WAAW,OAAO,OAAO;CACtC,IAAI,OAAO;CACX,IAAI,QAAQ;CACZ,KAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,OAAO,OAAO,MAAM;EAC1B,IAAI,OAAO,WAAW;EACtB,OAAO;EACP;CACF;CACA,OAAO;AACT"}

package/dist/utils/dom/overlay.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 点击模态 dialog 的遮罩时调用 onDismiss。不能只看 event.target === dialog：
+ * dialog 自己的内边距、以及在内容里按下再拖到遮罩上松开（选中文字）时，click 的目标也是 dialog。
+ * 所以按坐标判断，而且按下与松开都要在 dialog 的边框之外。返回撤销函数。
+ */
+export declare function dismissOnBackdrop(dialog: HTMLDialogElement, onDismiss: (event: MouseEvent) => void): () => void;
+/**
+ * 记下一个打开的模态（Dialog 等组件在 showModal 后调用），返回移除函数，重复调用无副作用。
+ * 模态打开时外面的元素都是 inert 的，顶层的 manual popover 也不例外（见 native-overlay 的浏览器测试），
+ * 所以要在模态打开期间可交互的浮层（Toaster）用 topModal() 把自己移进最上层的模态里。
+ */
+export declare function trackModal(dialog: HTMLDialogElement): () => void;
+/** 最上层的模态 dialog；没有时为 undefined。在渲染或 computed 里读取会跟着变化 */
+export declare function topModal(): HTMLDialogElement | undefined;
+/** openModalDialog 的选项 */
+export interface ModalDialogOptions {
+    /** 锁定页面滚动，默认 true */
+    lockScroll?: boolean;
+    /** 点遮罩（对话框外面）关闭，默认 false */
+    dismissOnBackdrop?: boolean;
+    /** 点遮罩时怎样关闭，默认直接 dialog.close()（要先确认时换成自己的） */
+    onDismiss?: (event: MouseEvent) => void;
+}
+/**
+ * 以模态方式打开原生 dialog，接上全部的模态行为：记下焦点来源、showModal、登记为最上层的模态（topModal）、
+ * 锁定页面滚动、焦点陷阱，可选点遮罩关闭。返回释放函数：dialog 关闭时调用，撤销以上并把焦点还给来源。
+ * ModalCore（Dialog、Drawer、AlertDialog、CommandPalette）与 Tour 共用
+ */
+export declare function openModalDialog(dialog: HTMLDialogElement, { lockScroll: lock, dismissOnBackdrop: dismiss, onDismiss, }?: ModalDialogOptions): () => void;
+/**
+ * 锁定页面滚动（打开模态时）。可以叠加：最后一个解锁时才恢复。
+ * 去掉滚动条后在结束边（滚动条那一侧，从右到左时在左边）补上等宽的内边距，加在原有的内边距上，
+ * 页面内容不会左右跳动。返回解锁函数，重复调用无副作用。
+ */
+export declare function lockScroll(): () => void;