@xihan-ui/vue 1.1.0 → 2.0.0

package/dist/runtime/use-overlay-exit.js

@@ -1,36 +1,62 @@
-import { onBeforeUnmount, ref, watch } from "vue";
-import { attachCssExit, createPresence } from "@xihan-ui/behavior/presence";
+import { getCurrentInstance, isRef, onBeforeUnmount, onMounted, ref, toValue, watch } from "vue";
+import { attachCssExit, createPresence } from "@xihan-ui/core/presence";
 //#region src/runtime/use-overlay-exit.ts
 /**
-* 返回「此刻该不该可见」。作者把它盖到 content 的 `hidden` 上：
+* 返回当前是否应当可见。作者把它覆盖到 content 的 `hidden` 上：
 * `{ ...api.getContentProps(), hidden: !visible.value || undefined }`。
 */
 function useOverlayExit(options) {
-	const { config, isOpen, contentRef } = options;
+	const { isOpen, contentRef } = options;
 	const visible = ref(isOpen());
-	if (!config) {
-		watch(isOpen, (open) => {
-			visible.value = open;
-		});
-		return visible;
-	}
-	const presence = createPresence({
-		config,
-		open: isOpen(),
-		onRenderedChange: (rendered) => {
-			visible.value = rendered;
+	let presence = null;
+	const tracked = /* @__PURE__ */ new Map();
+	let stopOpen;
+	let stopContent;
+	const start = (config) => {
+		if (!config) {
+			stopOpen = watch(isOpen, (open) => {
+				visible.value = open;
+			});
+			return;
 		}
+		presence = createPresence({
+			config,
+			open: isOpen(),
+			onRenderedChange: (rendered) => {
+				visible.value = rendered;
+			}
+		});
+		options.onPresence?.(presence);
+		visible.value = presence.rendered;
+		stopOpen = watch(isOpen, (open) => presence?.update(open), { flush: "post" });
+		stopContent = watch([contentRef, ...options.additionalExitRefs ?? []], (nodes) => {
+			const next = new Set(nodes.filter((node) => node !== null));
+			for (const node of next) if (!tracked.has(node)) tracked.set(node, attachCssExit(node, presence));
+			for (const [node, detach] of tracked) if (!next.has(node)) {
+				tracked.delete(node);
+				detach();
+			}
+		}, {
+			flush: "post",
+			immediate: true
+		});
+	};
+	const initial = toValue(options.config);
+	const delayed = isRef(options.config) || typeof options.config === "function";
+	if (initial || !delayed) start(initial);
+	else if (getCurrentInstance()) onMounted(() => {
+		const config = toValue(options.config);
+		if (!config) throw new Error("[xh] useOverlayExit 的延迟 RuntimeConfig 在挂载后仍未就绪");
+		start(config);
 	});
-	visible.value = presence.rendered;
-	watch(isOpen, (open) => presence.update(open), { flush: "post" });
-	let detach;
-	watch(contentRef, (el) => {
-		detach?.();
-		detach = el ? attachCssExit(el, presence) : void 0;
-	}, { flush: "post" });
+	else throw new Error("[xh] useOverlayExit 的延迟 RuntimeConfig 只能在 Vue setup 生命周期内使用");
 	onBeforeUnmount(() => {
-		detach?.();
-		presence.dispose();
+		stopOpen?.();
+		stopContent?.();
+		for (const detach of tracked.values()) detach();
+		tracked.clear();
+		presence?.dispose();
+		options.onPresence?.(null);
 	});
 	return visible;
 }

package/dist/runtime/use-overlay-exit.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-overlay-exit.js","names":[],"sources":["../../src/runtime/use-overlay-exit.ts"],"sourcesContent":["import type { PresenceHandle } from '@xihan-ui/behavior/presence'\nimport type { RuntimeConfig } from '@xihan-ui/kernel'\nimport type { Ref } from 'vue'\nimport { attachCssExit, createPresence } from '@xihan-ui/behavior/presence'\nimport { onBeforeUnmount, ref, watch } from 'vue'\n\n// 退场闸门：把「几时真的收起浮层」从展开态挪到 presence 上。\n//\n// 连接层给 content 打的 `hidden` 是跟着 open 走的——收起那一帧节点就不生成盒子了，\n// 退场动画一帧都播不出来。这里把它改成跟着 presence 走：展开时可见、退场动画播完之前\n// 也可见，播完才真收。作者节点始终留在原地，被拉长的是「可见的时间」而不是「存在的时间」。\n//\n// dialog / drawer 那几个是自己在 use-*.ts 里手写这一套的（它们还要连遮罩与层一起管），\n// 浮层族这十几个只需要这一件事，所以收成一个共用件。\n\nexport interface OverlayExitOptions {\n  /**\n   * 运行时配置；reduce 档下 presence 直接不申领租约。\n   * 服务端没有 DOM、也就没有退场可言，传 null 即退化成「可见与否跟着展开态」。\n   */\n  config: RuntimeConfig | null\n  /** 此刻逻辑上是否展开。 */\n  isOpen: () => boolean\n  /** content 节点，退场动画从它身上探测。 */\n  contentRef: Ref<HTMLElement | null>\n}\n\n/**\n * 返回「此刻该不该可见」。作者把它盖到 content 的 `hidden` 上：\n * `{ ...api.getContentProps(), hidden: !visible.value || undefined }`。\n */\nexport function useOverlayExit(options: OverlayExitOptions): Ref<boolean> {\n  const { config, isOpen, contentRef } = options\n  const visible = ref(isOpen())\n\n  if (!config) {\n    watch(isOpen, (open) => {\n      visible.value = open\n    })\n    return visible\n  }\n\n  const presence: PresenceHandle = createPresence({\n    config,\n    open: isOpen(),\n    onRenderedChange: (rendered) => {\n      visible.value = rendered\n    },\n  })\n  visible.value = presence.rendered\n\n  // data-state 提交到 DOM 之后再驱动 presence，让退场探测读到正确的 animationName\n  watch(isOpen, open => presence.update(open), { flush: 'post' })\n\n  // content 就位或更换后把它的 CSS 退场动画接到退出租约；没有退场动画时收起即收起\n  let detach: (() => void) | undefined\n  watch(contentRef, (el) => {\n    detach?.()\n    detach = el ? attachCssExit(el, presence) : undefined\n  }, { flush: 'post' })\n\n  onBeforeUnmount(() => {\n    detach?.()\n    presence.dispose()\n  })\n\n  return visible\n}\n"],"mappings":";;;;;;;AA+BA,SAAgB,eAAe,SAA2C;CACxE,MAAM,EAAE,QAAQ,QAAQ,eAAe;CACvC,MAAM,UAAU,IAAI,OAAO,CAAC;CAE5B,IAAI,CAAC,QAAQ;EACX,MAAM,SAAS,SAAS;GACtB,QAAQ,QAAQ;EAClB,CAAC;EACD,OAAO;CACT;CAEA,MAAM,WAA2B,eAAe;EAC9C;EACA,MAAM,OAAO;EACb,mBAAmB,aAAa;GAC9B,QAAQ,QAAQ;EAClB;CACF,CAAC;CACD,QAAQ,QAAQ,SAAS;CAGzB,MAAM,SAAQ,SAAQ,SAAS,OAAO,IAAI,GAAG,EAAE,OAAO,OAAO,CAAC;CAG9D,IAAI;CACJ,MAAM,aAAa,OAAO;EACxB,SAAS;EACT,SAAS,KAAK,cAAc,IAAI,QAAQ,IAAI,KAAA;CAC9C,GAAG,EAAE,OAAO,OAAO,CAAC;CAEpB,sBAAsB;EACpB,SAAS;EACT,SAAS,QAAQ;CACnB,CAAC;CAED,OAAO;AACT"}
+{"version":3,"file":"use-overlay-exit.js","names":[],"sources":["../../src/runtime/use-overlay-exit.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use overlay exit 相关实现。\n\nimport type { RuntimeConfig } from '@xihan-ui/core'\nimport type { PresenceHandle } from '@xihan-ui/core/presence'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport { attachCssExit, createPresence } from '@xihan-ui/core/presence'\nimport { getCurrentInstance, isRef, onBeforeUnmount, onMounted, ref, toValue, watch } from 'vue'\n\n// 退场闸门：把「几时真的收起浮层」从展开态挪到 presence 上。\n//\n// 连接层给 content 打的 `hidden` 是跟着 open 走的——收起那一帧节点就不生成盒子了，\n// 退场动画一帧都播不出来。这里把它改成跟着 presence 走：展开时可见、退场动画播完之前\n// 也可见，播完才真收。作者节点始终留在原地，被拉长的是「可见的时间」而不是「存在的时间」。\n//\n// dialog / drawer 那几个是自己在 use-*.ts 里手写这一套的（它们还要连遮罩与层一起管），\n// 浮层族这十几个只需要这一件事，所以收成一个共用件。\n\nexport interface OverlayExitOptions {\n  /**\n   * 运行时配置；reduce 档下 presence 直接不申领租约。\n   * 服务端没有 DOM、也就没有退场可言，传 null 即退化为可见与否跟随展开态。\n   * 客户端必须等真实根节点才能确定 realm 时传 ref/getter；挂载后仍为空会明确失败。\n   */\n  config: MaybeRefOrGetter<RuntimeConfig | null>\n  /** 当前逻辑上是否展开。 */\n  isOpen: () => boolean\n  /** content 节点，退场动画从它上面探测。 */\n  contentRef: Ref<HTMLElement | null>\n  /** 与 content 共同决定退出完成的其他真实视觉节点。 */\n  additionalExitRefs?: Array<Ref<HTMLElement | null>>\n  /** Presence 建立后交给需要共用退出生命周期的 Headless 状态机；卸载时回传 null。 */\n  onPresence?: (presence: PresenceHandle | null) => void\n}\n\n/**\n * 返回当前是否应当可见。作者把它覆盖到 content 的 `hidden` 上：\n * `{ ...api.getContentProps(), hidden: !visible.value || undefined }`。\n */\nexport function useOverlayExit(options: OverlayExitOptions): Ref<boolean> {\n  const { isOpen, contentRef } = options\n  const visible = ref(isOpen())\n  let presence: PresenceHandle | null = null\n  const tracked = new Map<HTMLElement, () => void>()\n  let stopOpen: (() => void) | undefined\n  let stopContent: (() => void) | undefined\n\n  const start = (config: RuntimeConfig | null): void => {\n    if (!config) {\n      stopOpen = watch(isOpen, (open) => {\n        visible.value = open\n      })\n      return\n    }\n\n    presence = createPresence({\n      config,\n      open: isOpen(),\n      onRenderedChange: (rendered) => {\n        visible.value = rendered\n      },\n    })\n    options.onPresence?.(presence)\n    visible.value = presence.rendered\n\n    // data-state 提交到 DOM 之后再驱动 presence，让退场探测读到正确的 animationName\n    stopOpen = watch(isOpen, open => presence?.update(open), { flush: 'post' })\n\n    // 延迟配置到挂载期才就绪时 content 已经存在，immediate 负责补上首次 attach。\n    stopContent = watch([contentRef, ...(options.additionalExitRefs ?? [])], (nodes) => {\n      const next = new Set(nodes.filter((node): node is HTMLElement => node !== null))\n      for (const node of next) {\n        if (!tracked.has(node))\n          tracked.set(node, attachCssExit(node, presence!))\n      }\n      for (const [node, detach] of tracked) {\n        if (!next.has(node)) {\n          tracked.delete(node)\n          detach()\n        }\n      }\n    }, { flush: 'post', immediate: true })\n  }\n\n  const initial = toValue(options.config)\n  const delayed = isRef(options.config) || typeof options.config === 'function'\n  if (initial || !delayed) {\n    start(initial)\n  }\n  else if (getCurrentInstance()) {\n    onMounted(() => {\n      const config = toValue(options.config)\n      if (!config)\n        throw new Error('[xh] useOverlayExit 的延迟 RuntimeConfig 在挂载后仍未就绪')\n      start(config)\n    })\n  }\n  else {\n    throw new Error('[xh] useOverlayExit 的延迟 RuntimeConfig 只能在 Vue setup 生命周期内使用')\n  }\n\n  onBeforeUnmount(() => {\n    stopOpen?.()\n    stopContent?.()\n    for (const detach of tracked.values()) detach()\n    tracked.clear()\n    presence?.dispose()\n    options.onPresence?.(null)\n  })\n\n  return visible\n}\n"],"mappings":";;;;;;;AA2CA,SAAgB,eAAe,SAA2C;CACxE,MAAM,EAAE,QAAQ,eAAe;CAC/B,MAAM,UAAU,IAAI,OAAO,CAAC;CAC5B,IAAI,WAAkC;CACtC,MAAM,0BAAU,IAAI,IAA6B;CACjD,IAAI;CACJ,IAAI;CAEJ,MAAM,SAAS,WAAuC;EACpD,IAAI,CAAC,QAAQ;GACX,WAAW,MAAM,SAAS,SAAS;IACjC,QAAQ,QAAQ;GAClB,CAAC;GACD;EACF;EAEA,WAAW,eAAe;GACxB;GACA,MAAM,OAAO;GACb,mBAAmB,aAAa;IAC9B,QAAQ,QAAQ;GAClB;EACF,CAAC;EACD,QAAQ,aAAa,QAAQ;EAC7B,QAAQ,QAAQ,SAAS;EAGzB,WAAW,MAAM,SAAQ,SAAQ,UAAU,OAAO,IAAI,GAAG,EAAE,OAAO,OAAO,CAAC;EAG1E,cAAc,MAAM,CAAC,YAAY,GAAI,QAAQ,sBAAsB,CAAC,CAAE,IAAI,UAAU;GAClF,MAAM,OAAO,IAAI,IAAI,MAAM,QAAQ,SAA8B,SAAS,IAAI,CAAC;GAC/E,KAAK,MAAM,QAAQ,MACjB,IAAI,CAAC,QAAQ,IAAI,IAAI,GACnB,QAAQ,IAAI,MAAM,cAAc,MAAM,QAAS,CAAC;GAEpD,KAAK,MAAM,CAAC,MAAM,WAAW,SAC3B,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG;IACnB,QAAQ,OAAO,IAAI;IACnB,OAAO;GACT;EAEJ,GAAG;GAAE,OAAO;GAAQ,WAAW;EAAK,CAAC;CACvC;CAEA,MAAM,UAAU,QAAQ,QAAQ,MAAM;CACtC,MAAM,UAAU,MAAM,QAAQ,MAAM,KAAK,OAAO,QAAQ,WAAW;CACnE,IAAI,WAAW,CAAC,SACd,MAAM,OAAO;MAEV,IAAI,mBAAmB,GAC1B,gBAAgB;EACd,MAAM,SAAS,QAAQ,QAAQ,MAAM;EACrC,IAAI,CAAC,QACH,MAAM,IAAI,MAAM,gDAAgD;EAClE,MAAM,MAAM;CACd,CAAC;MAGD,MAAM,IAAI,MAAM,6DAA6D;CAG/E,sBAAsB;EACpB,WAAW;EACX,cAAc;EACd,KAAK,MAAM,UAAU,QAAQ,OAAO,GAAG,OAAO;EAC9C,QAAQ,MAAM;EACd,UAAU,QAAQ;EAClB,QAAQ,aAAa,IAAI;CAC3B,CAAC;CAED,OAAO;AACT"}

package/dist/runtime/use-scrollbars.js

@@ -2,17 +2,17 @@ import { vueNormalize } from "./normalize-props.js";
 import { useMachine } from "./use-machine.js";
 import { createVueIdGenerator } from "./vue-id.js";
 import { computed, h, ref, toValue } from "vue";
+import { createScope } from "@xihan-ui/core";
 import { SCROLLBAR_DEFAULT_TYPE, connectScrollbar, isOverflowing, scrollbarMachine } from "@xihan-ui/headless";
-import { createScope } from "@xihan-ui/kernel";
 //#region src/runtime/use-scrollbars.ts
 const DEFAULT_AXES = ["vertical"];
 function useScrollbars(options) {
 	const axes = options.axes ?? DEFAULT_AXES;
-	const scope = createScope(null, createVueIdGenerator());
+	const scope = options.scope ?? createScope(null, createVueIdGenerator());
 	const bars = [];
 	/**
-	* 这条轴的条子此刻常驻在场。判据不走 api：api 里就要读 gutter，读回来会绕成环，
-	* 所以直接读作者给的那份 props 与机器量到的尺寸。
+	* 该轴的滚动条当前常驻在场。判据不经 api：api 中就要读 gutter，读回来会形成循环，
+	* 因此直接读作者提供的 props 与状态机测得的尺寸。
 	*/
 	const standing = (bar) => {
 		const given = toValue(options.props);
@@ -20,7 +20,7 @@ function useScrollbars(options) {
 		const type = given?.type ?? SCROLLBAR_DEFAULT_TYPE;
 		return !native && (type === "always" || isOverflowing(bar.service.context.get("metrics")));
 	};
-	/** 两条轴都在场：各自在末端让出交叉口那一格，只有一条时不让，免得滑块行程平白短一截。 */
+	/** 两条轴都在场：各自在末端让出交叉口一格，只有一条时不让，避免滑块行程无故缩短。 */
 	const both = () => axes.length > 1 && bars.length === axes.length && bars.every(standing);
 	for (const axis of axes) {
 		const rootRef = ref(null);
@@ -28,6 +28,7 @@ function useScrollbars(options) {
 		const service = useMachine(scrollbarMachine, () => ({
 			...toValue(options.props),
 			orientation: axis,
+			anchor: options.anchor,
 			gutter: both()
 		}), scope);
 		service.refs.set("getScrollableEl", options.scrollable);
@@ -41,7 +42,7 @@ function useScrollbars(options) {
 			trackRef
 		});
 	}
-	/** 交叉口补丁只写在竖条里；只有一条轴在场时右下角没有缺口要补，收起来免得平白盖住一块内容。 */
+	/** 交叉口补丁只写在竖条中；只有一条轴在场时右下角没有缺口需要补，收起以免无故遮住一块内容。 */
 	const corner = (bar) => axes.length > 1 && bar.axis === "vertical" ? [h("div", {
 		...bar.api.value.getCornerProps(),
 		hidden: both() ? void 0 : true

package/dist/runtime/use-scrollbars.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-scrollbars.js","names":[],"sources":["../../src/runtime/use-scrollbars.ts"],"sourcesContent":["import type { ScrollbarApi, ScrollbarSchema } from '@xihan-ui/headless'\nimport type { Orientation } from '@xihan-ui/kernel'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef, MaybeRefOrGetter, Ref, VNode } from 'vue'\nimport { connectScrollbar, isOverflowing, SCROLLBAR_DEFAULT_TYPE, scrollbarMachine } from '@xihan-ui/headless'\nimport { createScope } from '@xihan-ui/kernel'\nimport { computed, h, ref, toValue } from 'vue'\nimport { vueNormalize } from './normalize-props'\nimport { useMachine } from './use-machine'\nimport { createVueIdGenerator } from './vue-id'\n\n// 给已有滚动层配一套自绘滚动条。\n//\n// 条子是滚动层的兄弟，挂在组件既有的壳上（浮层族是 positioner，其余是 root）：\n// 壳是定位盒，条子绝对定位贴它的内边距盒，不占布局、不进滚动层内部、不搬去别处。\n// 宿主只交「谁在滚」与「摆哪几条轴」，节点形状与机器接线都在这里，宿主那侧只有一行 render。\n\n/** 交给条子的 props。轴由 axes 决定、让位按实测溢出算，两者都不从外面收。 */\nexport type ScrollbarsProps = Omit<ScrollbarSchema['props'], 'orientation' | 'gutter'>\n\nexport interface ScrollbarsOptions {\n  /**\n   * 真正在滚的那层。收 getter 而不是节点：ref 挂载后才有值，\n   * 多档互斥的宿主（同一个位置有两个可能的滚动层）在这里交此刻活着的那个。\n   */\n  scrollable: () => HTMLElement | null\n  /** 摆哪几条轴，默认只摆竖的。 */\n  axes?: readonly Orientation[]\n  /** 露面时机、尺寸档、方向这些，逐帧现读。 */\n  props?: MaybeRefOrGetter<ScrollbarsProps>\n}\n\nexport interface ScrollbarsHandle {\n  /** 条子的节点，宿主把它拼进壳的子节点末尾。 */\n  render: () => VNode[]\n  /** 重量一遍两条轴的尺寸。 */\n  measure: () => void\n}\n\ninterface Bar {\n  axis: Orientation\n  service: Service<ScrollbarSchema>\n  api: ComputedRef<ScrollbarApi>\n  rootRef: Ref<HTMLElement | null>\n  trackRef: Ref<HTMLElement | null>\n}\n\nconst DEFAULT_AXES: readonly Orientation[] = ['vertical']\n\nexport function useScrollbars(options: ScrollbarsOptions): ScrollbarsHandle {\n  const axes = options.axes ?? DEFAULT_AXES\n  const scope = createScope(null, createVueIdGenerator())\n  const bars: Bar[] = []\n\n  /**\n   * 这条轴的条子此刻常驻在场。判据不走 api：api 里就要读 gutter，读回来会绕成环，\n   * 所以直接读作者给的那份 props 与机器量到的尺寸。\n   */\n  const standing = (bar: Bar): boolean => {\n    const given = toValue(options.props)\n    const native = bar.service.context.get('coarse') && !given?.forceVisible\n    const type = given?.type ?? SCROLLBAR_DEFAULT_TYPE\n    return !native && (type === 'always' || isOverflowing(bar.service.context.get('metrics')))\n  }\n\n  /** 两条轴都在场：各自在末端让出交叉口那一格，只有一条时不让，免得滑块行程平白短一截。 */\n  const both = (): boolean => axes.length > 1 && bars.length === axes.length && bars.every(standing)\n\n  for (const axis of axes) {\n    const rootRef = ref<HTMLElement | null>(null)\n    const trackRef = ref<HTMLElement | null>(null)\n    // 每次取值现读 props：挂载后改 type / size 机器要跟着变\n    const service = useMachine(scrollbarMachine, () => ({\n      ...toValue(options.props),\n      orientation: axis,\n      gutter: both(),\n    }), scope)\n    // 传 getter 而非节点，ref 在挂载后才有值；量尺寸与挂监听都在机器的效应里进行\n    service.refs.set('getScrollableEl', options.scrollable)\n    service.refs.set('getTrackEl', () => trackRef.value)\n    service.refs.set('getRootEl', () => rootRef.value)\n    bars.push({\n      axis,\n      service,\n      api: computed(() => connectScrollbar(service, vueNormalize)),\n      rootRef,\n      trackRef,\n    })\n  }\n\n  /** 交叉口补丁只写在竖条里；只有一条轴在场时右下角没有缺口要补，收起来免得平白盖住一块内容。 */\n  const corner = (bar: Bar): VNode[] =>\n    axes.length > 1 && bar.axis === 'vertical'\n      ? [h('div', {\n          ...bar.api.value.getCornerProps() as Record<string, unknown>,\n          hidden: both() ? undefined : true,\n        })]\n      : []\n\n  return {\n    render: () => bars.map(bar => h('div', {\n      ...bar.api.value.getRootProps() as Record<string, unknown>,\n      key: `xh-scrollbar-${bar.axis}`,\n      ref: bar.rootRef,\n    }, [\n      h('div', {\n        ...bar.api.value.getTrackProps() as Record<string, unknown>,\n        ref: bar.trackRef,\n      }, [h('div', bar.api.value.getThumbProps() as Record<string, unknown>)]),\n      ...corner(bar),\n    ])),\n    measure: () => {\n      for (const bar of bars) bar.api.value.measure()\n    },\n  }\n}\n"],"mappings":";;;;;;;AA+CA,MAAM,eAAuC,CAAC,UAAU;AAExD,SAAgB,cAAc,SAA8C;CAC1E,MAAM,OAAO,QAAQ,QAAQ;CAC7B,MAAM,QAAQ,YAAY,MAAM,qBAAqB,CAAC;CACtD,MAAM,OAAc,CAAC;;;;;CAMrB,MAAM,YAAY,QAAsB;EACtC,MAAM,QAAQ,QAAQ,QAAQ,KAAK;EACnC,MAAM,SAAS,IAAI,QAAQ,QAAQ,IAAI,QAAQ,KAAK,CAAC,OAAO;EAC5D,MAAM,OAAO,OAAO,QAAQ;EAC5B,OAAO,CAAC,WAAW,SAAS,YAAY,cAAc,IAAI,QAAQ,QAAQ,IAAI,SAAS,CAAC;CAC1F;;CAGA,MAAM,aAAsB,KAAK,SAAS,KAAK,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,QAAQ;CAEjG,KAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,UAAU,IAAwB,IAAI;EAC5C,MAAM,WAAW,IAAwB,IAAI;EAE7C,MAAM,UAAU,WAAW,yBAAyB;GAClD,GAAG,QAAQ,QAAQ,KAAK;GACxB,aAAa;GACb,QAAQ,KAAK;EACf,IAAI,KAAK;EAET,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,UAAU;EACtD,QAAQ,KAAK,IAAI,oBAAoB,SAAS,KAAK;EACnD,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;EACjD,KAAK,KAAK;GACR;GACA;GACA,KAAK,eAAe,iBAAiB,SAAS,YAAY,CAAC;GAC3D;GACA;EACF,CAAC;CACH;;CAGA,MAAM,UAAU,QACd,KAAK,SAAS,KAAK,IAAI,SAAS,aAC5B,CAAC,EAAE,OAAO;EACR,GAAG,IAAI,IAAI,MAAM,eAAe;EAChC,QAAQ,KAAK,IAAI,KAAA,IAAY;CAC/B,CAAC,CAAC,IACF,CAAC;CAEP,OAAO;EACL,cAAc,KAAK,KAAI,QAAO,EAAE,OAAO;GACrC,GAAG,IAAI,IAAI,MAAM,aAAa;GAC9B,KAAK,gBAAgB,IAAI;GACzB,KAAK,IAAI;EACX,GAAG,CACD,EAAE,OAAO;GACP,GAAG,IAAI,IAAI,MAAM,cAAc;GAC/B,KAAK,IAAI;EACX,GAAG,CAAC,EAAE,OAAO,IAAI,IAAI,MAAM,cAAc,CAA4B,CAAC,CAAC,GACvE,GAAG,OAAO,GAAG,CACf,CAAC,CAAC;EACF,eAAe;GACb,KAAK,MAAM,OAAO,MAAM,IAAI,IAAI,MAAM,QAAQ;EAChD;CACF;AACF"}
+{"version":3,"file":"use-scrollbars.js","names":[],"sources":["../../src/runtime/use-scrollbars.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use scrollbars 相关实现。\n\nimport type { Orientation, Scope, Service } from '@xihan-ui/core'\nimport type { ScrollbarAnchor, ScrollbarApi, ScrollbarSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, MaybeRefOrGetter, Ref, VNode } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectScrollbar, isOverflowing, SCROLLBAR_DEFAULT_TYPE, scrollbarMachine } from '@xihan-ui/headless'\nimport { computed, h, ref, toValue } from 'vue'\nimport { vueNormalize } from './normalize-props'\nimport { useMachine } from './use-machine'\nimport { createVueIdGenerator } from './vue-id'\n\n// 给已有滚动层配一套自绘滚动条。\n//\n// 条子是滚动层的兄弟，挂在组件既有的壳上（浮层族是 positioner，其余是 root）：\n// 壳是定位盒，条子绝对定位贴它的内边距盒，不占布局、不进滚动层内部、不搬去别处。\n// 多个滚动层并排共用一个壳（级联的列、时间列）时取 anchor: 'layer'：每层各自调一次本组合式，\n// 条子紧跟在该层后面渲染、按层在壳内的偏移盒定位。\n// 宿主只交「谁在滚」与「摆哪几条轴」，节点形状与机器接线都在这里，宿主那侧只有一行 render。\n\n/** 交给滚动条的 props。轴由 axes 决定、让位按实测溢出计算，两者都不从外部接收。 */\nexport type ScrollbarsProps = Omit<ScrollbarSchema['props'], 'orientation' | 'gutter' | 'anchor'>\n\nexport interface ScrollbarsOptions {\n  /**\n   * 真正在滚动的层。接收 getter 而不是节点：ref 挂载后才有值，\n   * 多档互斥的宿主（同一个位置有两个可能的滚动层）在这里返回当前生效的那个。\n   */\n  scrollable: () => HTMLElement | null\n  /** 排布哪几条轴，默认只排竖向。 */\n  axes?: readonly Orientation[]\n  /**\n   * 条子贴在壳边（shell，默认）还是贴在滚动层自己的盒子上（layer）。\n   * layer 要求壳是滚动层的定位祖先，条子渲染在该层之后、仍是壳的子节点。\n   */\n  anchor?: ScrollbarAnchor\n  /** 显示时机、尺寸档、方向等，逐帧现读。 */\n  props?: MaybeRefOrGetter<ScrollbarsProps>\n  /** 已有宿主 Scope 时与它共用，避免 iframe / ShadowRoot 中另回 ambient Document。 */\n  scope?: Scope\n}\n\nexport interface ScrollbarsHandle {\n  /** 滚动条的节点，宿主把它拼接到外壳子节点的末尾。 */\n  render: () => VNode[]\n  /** 重新测量两条轴的尺寸。 */\n  measure: () => void\n}\n\ninterface Bar {\n  axis: Orientation\n  service: Service<ScrollbarSchema>\n  api: ComputedRef<ScrollbarApi>\n  rootRef: Ref<HTMLElement | null>\n  trackRef: Ref<HTMLElement | null>\n}\n\nconst DEFAULT_AXES: readonly Orientation[] = ['vertical']\n\nexport function useScrollbars(options: ScrollbarsOptions): ScrollbarsHandle {\n  const axes = options.axes ?? DEFAULT_AXES\n  const scope = options.scope ?? createScope(null, createVueIdGenerator())\n  const bars: Bar[] = []\n\n  /**\n   * 该轴的滚动条当前常驻在场。判据不经 api：api 中就要读 gutter，读回来会形成循环，\n   * 因此直接读作者提供的 props 与状态机测得的尺寸。\n   */\n  const standing = (bar: Bar): boolean => {\n    const given = toValue(options.props)\n    const native = bar.service.context.get('coarse') && !given?.forceVisible\n    const type = given?.type ?? SCROLLBAR_DEFAULT_TYPE\n    return !native && (type === 'always' || isOverflowing(bar.service.context.get('metrics')))\n  }\n\n  /** 两条轴都在场：各自在末端让出交叉口一格，只有一条时不让，避免滑块行程无故缩短。 */\n  const both = (): boolean => axes.length > 1 && bars.length === axes.length && bars.every(standing)\n\n  for (const axis of axes) {\n    const rootRef = ref<HTMLElement | null>(null)\n    const trackRef = ref<HTMLElement | null>(null)\n    // 每次取值现读 props：挂载后改 type / size 机器要跟着变\n    const service = useMachine(scrollbarMachine, () => ({\n      ...toValue(options.props),\n      orientation: axis,\n      anchor: options.anchor,\n      gutter: both(),\n    }), scope)\n    // 传 getter 而非节点，ref 在挂载后才有值；量尺寸与挂监听都在机器的效应里进行\n    service.refs.set('getScrollableEl', options.scrollable)\n    service.refs.set('getTrackEl', () => trackRef.value)\n    service.refs.set('getRootEl', () => rootRef.value)\n    bars.push({\n      axis,\n      service,\n      api: computed(() => connectScrollbar(service, vueNormalize)),\n      rootRef,\n      trackRef,\n    })\n  }\n\n  /** 交叉口补丁只写在竖条中；只有一条轴在场时右下角没有缺口需要补，收起以免无故遮住一块内容。 */\n  const corner = (bar: Bar): VNode[] =>\n    axes.length > 1 && bar.axis === 'vertical'\n      ? [h('div', {\n          ...bar.api.value.getCornerProps() as Record<string, unknown>,\n          hidden: both() ? undefined : true,\n        })]\n      : []\n\n  return {\n    render: () => bars.map(bar => h('div', {\n      ...bar.api.value.getRootProps() as Record<string, unknown>,\n      key: `xh-scrollbar-${bar.axis}`,\n      ref: bar.rootRef,\n    }, [\n      h('div', {\n        ...bar.api.value.getTrackProps() as Record<string, unknown>,\n        ref: bar.trackRef,\n      }, [h('div', bar.api.value.getThumbProps() as Record<string, unknown>)]),\n      ...corner(bar),\n    ])),\n    measure: () => {\n      for (const bar of bars) bar.api.value.measure()\n    },\n  }\n}\n"],"mappings":";;;;;;;AA8DA,MAAM,eAAuC,CAAC,UAAU;AAExD,SAAgB,cAAc,SAA8C;CAC1E,MAAM,OAAO,QAAQ,QAAQ;CAC7B,MAAM,QAAQ,QAAQ,SAAS,YAAY,MAAM,qBAAqB,CAAC;CACvE,MAAM,OAAc,CAAC;;;;;CAMrB,MAAM,YAAY,QAAsB;EACtC,MAAM,QAAQ,QAAQ,QAAQ,KAAK;EACnC,MAAM,SAAS,IAAI,QAAQ,QAAQ,IAAI,QAAQ,KAAK,CAAC,OAAO;EAC5D,MAAM,OAAO,OAAO,QAAQ;EAC5B,OAAO,CAAC,WAAW,SAAS,YAAY,cAAc,IAAI,QAAQ,QAAQ,IAAI,SAAS,CAAC;CAC1F;;CAGA,MAAM,aAAsB,KAAK,SAAS,KAAK,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,QAAQ;CAEjG,KAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,UAAU,IAAwB,IAAI;EAC5C,MAAM,WAAW,IAAwB,IAAI;EAE7C,MAAM,UAAU,WAAW,yBAAyB;GAClD,GAAG,QAAQ,QAAQ,KAAK;GACxB,aAAa;GACb,QAAQ,QAAQ;GAChB,QAAQ,KAAK;EACf,IAAI,KAAK;EAET,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,UAAU;EACtD,QAAQ,KAAK,IAAI,oBAAoB,SAAS,KAAK;EACnD,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;EACjD,KAAK,KAAK;GACR;GACA;GACA,KAAK,eAAe,iBAAiB,SAAS,YAAY,CAAC;GAC3D;GACA;EACF,CAAC;CACH;;CAGA,MAAM,UAAU,QACd,KAAK,SAAS,KAAK,IAAI,SAAS,aAC5B,CAAC,EAAE,OAAO;EACR,GAAG,IAAI,IAAI,MAAM,eAAe;EAChC,QAAQ,KAAK,IAAI,KAAA,IAAY;CAC/B,CAAC,CAAC,IACF,CAAC;CAEP,OAAO;EACL,cAAc,KAAK,KAAI,QAAO,EAAE,OAAO;GACrC,GAAG,IAAI,IAAI,MAAM,aAAa;GAC9B,KAAK,gBAAgB,IAAI;GACzB,KAAK,IAAI;EACX,GAAG,CACD,EAAE,OAAO;GACP,GAAG,IAAI,IAAI,MAAM,cAAc;GAC/B,KAAK,IAAI;EACX,GAAG,CAAC,EAAE,OAAO,IAAI,IAAI,MAAM,cAAc,CAA4B,CAAC,CAAC,GACvE,GAAG,OAAO,GAAG,CACf,CAAC,CAAC;EACF,eAAe;GACb,KAAK,MAAM,OAAO,MAAM,IAAI,IAAI,MAAM,QAAQ;EAChD;CACF;AACF"}

package/dist/runtime/vue-id.d.ts

@@ -1,4 +1,4 @@
-import { IdGenerator } from "@xihan-ui/kernel";
+import { IdGenerator } from "@xihan-ui/core";
 //#region src/runtime/vue-id.d.ts
 declare function createVueIdGenerator(): IdGenerator;
 //#endregion

package/dist/runtime/vue-id.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vue-id.d.ts","names":[],"sources":["../../src/runtime/vue-id.ts"],"mappings":";;iBAMgB,wBAAwB"}
+{"version":3,"file":"vue-id.d.ts","names":[],"sources":["../../src/runtime/vue-id.ts"],"mappings":";;iBAagB,wBAAwB"}

package/dist/runtime/vue-id.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue-id.js","names":[],"sources":["../../src/runtime/vue-id.ts"],"sourcesContent":["import type { IdGenerator } from '@xihan-ui/kernel'\nimport { useId } from 'vue'\n\nlet fallbackSeq = 0\n\n// 基于 Vue useId 生成 scope id，须在 setup 期调用\nexport function createVueIdGenerator(): IdGenerator {\n  const base = useId() ?? `xh-f${++fallbackSeq}`\n  return {\n    scopeId: () => base,\n    partId: (component, scopeId, part) => `${component}:${scopeId}:${part}`,\n  }\n}\n"],"mappings":";;AAGA,IAAI,cAAc;AAGlB,SAAgB,uBAAoC;CAClD,MAAM,OAAO,MAAM,KAAK,OAAO,EAAE;CACjC,OAAO;EACL,eAAe;EACf,SAAS,WAAW,SAAS,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG;CACnE;AACF"}
+{"version":3,"file":"vue-id.js","names":[],"sources":["../../src/runtime/vue-id.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 vue id 相关实现。\n\nimport type { IdGenerator } from '@xihan-ui/core'\nimport { useId } from 'vue'\n\nlet fallbackSeq = 0\n\n// 基于 Vue useId 生成 scope id，须在 setup 期调用\nexport function createVueIdGenerator(): IdGenerator {\n  const base = useId() ?? `xh-f${++fallbackSeq}`\n  return {\n    scopeId: () => base,\n    partId: (component, scopeId, part) => `${component}:${scopeId}:${part}`,\n  }\n}\n"],"mappings":";;AAUA,IAAI,cAAc;AAGlB,SAAgB,uBAAoC;CAClD,MAAM,OAAO,MAAM,KAAK,OAAO,EAAE;CACjC,OAAO;EACL,eAAe;EACf,SAAS,WAAW,SAAS,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG;CACnE;AACF"}

package/dist/services/dialog-service.d.ts

@@ -1,56 +1,67 @@
 import { XhConfig } from "../config/config.js";
 import { MaybeRefOrGetter, VNodeChild } from "vue";
-import { Tone } from "@xihan-ui/kernel";
+import { Tone } from "@xihan-ui/core";
+import { DialogServiceBadge } from "@xihan-ui/headless";
 //#region src/services/dialog-service.d.ts
 /**
- * 对话框正文。给串走 description 部件（读屏的 aria-describedby 由它接）；
- * 给渲染函数则整块摊在正文位，自己决定渲染什么。
+ * 对话框正文。传字符串时经 description 部件（读屏的 aria-describedby 由它承接）；
+ * 传渲染函数时整块展开在正文位，自行决定渲染内容。
  *
- * 不收裸 VNode：服务的宿主是常驻的，忙态一翻就整棵重渲，
+ * 不接收裸 VNode：服务的宿主是常驻的，忙态切换即整棵重渲，
  * 同一个 VNode 实例被复用时的行为未定义。
  */
 type DialogBody = string | (() => VNodeChild);
+/** 动作异常保留原始原因；可见文案由 actionErrorText 提供。 */
+interface DialogActionError {
+  cause: unknown;
+}
 interface ConfirmOptions {
   title: string;
   content?: DialogBody;
-  /** 确认钮语气，默认 brand；危险操作传 danger。 */
+  /** 确认按钮语气，默认 brand；危险操作传 danger。 */
   tone?: Tone;
-  /** 标题旁的类型徽记。不给则不出徽记。 */
-  badge?: 'info' | 'success' | 'warning' | 'error';
+  /** 标题旁的类型徽记。未提供时不显示徽记。 */
+  badge?: DialogServiceBadge;
   okText?: MaybeRefOrGetter<string>;
   cancelText?: MaybeRefOrGetter<string>;
-  /** Promise 拒绝时对话框保持打开。 */
-  onOk?: () => void | Promise<unknown>;
+  /** false 阻止关闭；抛错或 Promise 拒绝进入 actionError，保持打开。 */
+  onOk?: () => boolean | void | Promise<unknown>;
+  /** 动作失败通知；通知自身失败时拒绝所属请求。 */
+  onActionError?: (error: DialogActionError) => void | Promise<void>;
 }
-/** 单按钮告知框的入参：没有取消钮，徽记由预设档自己定，其余同 confirm。 */
+/** 单按钮告知框的入参：没有取消按钮，徽记由预设档决定，其余同 confirm。 */
 type AlertOptions = Omit<ConfirmOptions, 'tone' | 'badge'>;
-/** 取值型弹窗的入参。正文自己拼表单，确认时把那份值带回来。 */
+/** 取值型弹窗的入参。正文自行拼装表单，确认时把该份值带回。 */
 interface PromptOptions<T extends object> extends Omit<ConfirmOptions, 'onOk' | 'content'> {
-  /** 每次打开建一份初值；服务用 reactive 包起来交给 body 与 onOk，两边同一份。 */
+  /** 每次打开建立一份初值；服务用 reactive 包装后交给 body 与 onOk，两边是同一份。 */
   initialValue: T;
-  /** 用那份可写代理渲染表单主体。 */
+  /** 用该份可写代理渲染表单主体。 */
   body: (value: T) => VNodeChild;
   /** 落焦到哪个节点，CSS 选择器。 */
   initialFocus?: string;
-  /** 返回 false（或拒绝）表示校验没过，弹窗保持打开。 */
+  /** false 只阻止关闭；抛错或拒绝进入独立动作异常，弹窗保持打开。 */
   onOk?: (value: T) => boolean | void | Promise<boolean | void>;
 }
 interface DialogServiceOptions {
-  /** 确认钮文案，缺省 OK。 */
+  /** 确认按钮文案，默认 OK。 */
   okText?: MaybeRefOrGetter<string>;
-  /** 取消钮文案，缺省 Cancel。 */
+  /** 取消按钮文案，默认 Cancel。 */
   cancelText?: MaybeRefOrGetter<string>;
+  /** 动作失败时的安全提示，支持与按钮文案相同的响应式来源。 */
+  actionErrorText?: MaybeRefOrGetter<string>;
   /**
-   * 喂给对话框子树的全局配置（locale / translations / size / portalContainer）。
-   * 本服务自带宿主应用，接不到组件树里的 provideXhConfig，要让它跟应用同语言就从这里给；
-   * 传 ref/getter 即可运行期跟着切语言，也可以之后用 setConfig 推。
+   * 提供给对话框子树的全局配置（locale / translations / size / portalContainer）。
+   * 本服务自带宿主应用，无法接收组件树中的 provideXhConfig，需要与应用同语言时从这里提供；
+   * 传 ref/getter 即可在运行期跟随切换语言，也可以之后用 setConfig 推送。
    */
   config?: MaybeRefOrGetter<XhConfig>;
-  /** 宿主容器；不给就在 body 下新建一个。 */
+  /** 宿主容器；未提供时在 body 下新建一个。 */
   target?: HTMLElement;
 }
 interface DialogService {
-  /** 确认走 onOk 后 resolve true；取消/Esc resolve false。 */
+  /** 当前请求的动作异常，重试、关闭和切换请求时清空。 */
+  readonly actionError: DialogActionError | null;
+  /** 确认经 onOk 后 resolve true；取消/Esc resolve false。 */
   confirm: (options: ConfirmOptions) => Promise<boolean>;
   info: (options: AlertOptions) => Promise<void>;
   success: (options: AlertOptions) => Promise<void>;
@@ -58,12 +69,12 @@ interface DialogService {
   error: (options: AlertOptions) => Promise<void>;
   /** 确认后 resolve 一份值的普通对象快照；取消 / Esc / 卸载 resolve null。 */
   prompt: <T extends object>(options: PromptOptions<T>) => Promise<T | null>;
-  /** 换一份全局配置源。 */
+  /** 更换全局配置源。 */
   setConfig: (next: MaybeRefOrGetter<XhConfig> | undefined) => void;
   /** 卸载宿主应用并移除容器。 */
   dispose: () => void;
 }
 declare function createDialogService(options?: DialogServiceOptions): DialogService;
 //#endregion
-export { AlertOptions, ConfirmOptions, DialogBody, DialogService, DialogServiceOptions, PromptOptions, createDialogService };
+export { AlertOptions, ConfirmOptions, DialogActionError, DialogBody, DialogService, DialogServiceOptions, PromptOptions, createDialogService };
 //# sourceMappingURL=dialog-service.d.ts.map

package/dist/services/dialog-service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-service.d.ts","names":[],"sources":["../../src/services/dialog-service.ts"],"mappings":";;;;;;;;;;;KAsBY,6BAA6B;UAExB;EACf;EACA,UAAU;;EAEV,OAAO;;EAEP;EACA,SAAS;EACT,aAAa;;EAEb,oBAAoB;;;KAIV,eAAe,KAAK;;UAGf,cAAc,0BAA0B,KAAK;;EAE5D,cAAc;;EAEd,OAAO,OAAO,MAAM;;EAEpB;;EAEA,QAAQ,OAAO,uBAAuB;;UAGvB;;EAEf,SAAS;;EAET,aAAa;;;;;;EAMb,SAAS,iBAAiB;;EAE1B,SAAS;;UAGM;;EAEf,UAAU,SAAS,mBAAmB;EACtC,OAAO,SAAS,iBAAiB;EACjC,UAAU,SAAS,iBAAiB;EACpC,UAAU,SAAS,iBAAiB;EACpC,QAAQ,SAAS,iBAAiB;;EAElC,SAAS,kBAAkB,SAAS,cAAc,OAAO,QAAQ;;EAEjE,YAAY,MAAM,iBAAiB;;EAEnC;;iBAyBc,oBAAoB,UAAS,uBAA4B"}
+{"version":3,"file":"dialog-service.d.ts","names":[],"sources":["../../src/services/dialog-service.ts"],"mappings":";;;;;;;;;;;;KA4BY,6BAA6B;;UAGxB;EACf;;UAGe;EACf;EACA,UAAU;;EAEV,OAAO;;EAEP,QAAQ;EACR,SAAS;EACT,aAAa;;EAEb,8BAA8B;;EAE9B,iBAAiB,OAAO,6BAA6B;;;KAI3C,eAAe,KAAK;;UAGf,cAAc,0BAA0B,KAAK;;EAE5D,cAAc;;EAEd,OAAO,OAAO,MAAM;;EAEpB;;EAEA,QAAQ,OAAO,uBAAuB;;UAGvB;;EAEf,SAAS;;EAET,aAAa;;EAEb,kBAAkB;;;;;;EAMlB,SAAS,iBAAiB;;EAE1B,SAAS;;UAGM;;WAEN,aAAa;;EAEtB,UAAU,SAAS,mBAAmB;EACtC,OAAO,SAAS,iBAAiB;EACjC,UAAU,SAAS,iBAAiB;EACpC,UAAU,SAAS,iBAAiB;EACpC,QAAQ,SAAS,iBAAiB;;EAElC,SAAS,kBAAkB,SAAS,cAAc,OAAO,QAAQ;;EAEjE,YAAY,MAAM,iBAAiB;;EAEnC;;iBAqBc,oBAAoB,UAAS,uBAA4B"}

package/dist/services/dialog-service.js

@@ -1,13 +1,11 @@
 import { XhButton, XhButtonIndicator, XhButtonLabel } from "../components/button.js";
-import { XhDialogContent, XhDialogDescription, XhDialogRoot, XhDialogTitle } from "../components/dialog/dialog.js";
-import { spinArc, typeBadge } from "./glyph.js";
-import { mountServiceHost } from "./mount-host.js";
+import { XhDialogBody, XhDialogContent, XhDialogDescription, XhDialogFooter, XhDialogHeader, XhDialogIndicator, XhDialogRoot, XhDialogTitle } from "../components/dialog/dialog.js";
+import { spinArc } from "./glyph.js";
 import { createServiceConfig } from "./service-config.js";
 import { createApp, defineComponent, h, reactive, shallowRef, toRaw, toValue } from "vue";
-import { ensurePortalRoot } from "@xihan-ui/kernel";
+import { ensurePortalRoot } from "@xihan-ui/core";
+import { createDialogServiceController, dialogServiceBadgeTone } from "@xihan-ui/headless";
 //#region src/services/dialog-service.ts
-/** 关到再开之间留出退场窗口，动效走完再放下一个。 */
-const EXIT_WINDOW_MS = 250;
 function createDialogService(options = {}) {
 	if (typeof document === "undefined") throw new Error("createDialogService 需要 document；SSR 里请等到客户端再创建");
 	const defaults = {
@@ -16,128 +14,77 @@ function createDialogService(options = {}) {
 	};
 	const configSource = createServiceConfig(options.config);
 	const holder = options.target ?? document.createElement("div");
-	if (!options.target) ensurePortalRoot(document).appendChild(holder);
-	const current = shallowRef(null);
-	const state = reactive({
-		open: false,
-		busy: false
-	});
-	const queue = [];
-	let disposed = false;
-	let advanceTimer = null;
-	function next() {
-		if (disposed || current.value || queue.length === 0) return;
-		current.value = queue.shift();
-		state.busy = false;
-		state.open = true;
-	}
-	function settle(ok) {
-		const spec = current.value;
-		if (!spec || spec.settled) return;
-		spec.settled = true;
-		spec.resolve(ok);
-	}
-	/** 退场窗口走完再清当前项、放下一个；程序化关闭与机器侧关闭都汇到这里，只挂一只表。 */
-	function scheduleAdvance() {
-		if (advanceTimer) return;
-		advanceTimer = setTimeout(() => {
-			advanceTimer = null;
-			current.value = null;
-			state.busy = false;
-			next();
-		}, EXIT_WINDOW_MS);
-	}
-	function close(ok) {
-		settle(ok);
-		state.open = false;
-		scheduleAdvance();
+	let hostFailure = null;
+	try {
+		if (!options.target) ensurePortalRoot(document).appendChild(holder);
+		if (holder.nodeType !== 1 || holder.ownerDocument !== document || !holder.isConnected) throw new Error("DialogService target 必须是当前文档中已连接的元素");
+	} catch (cause) {
+		hostFailure = { cause };
 	}
+	let publishState = () => {};
+	const controller = createDialogServiceController({ onStateChange: (next) => publishState(next) });
+	const state = shallowRef(controller.state);
+	publishState = (next) => void (state.value = next);
+	if (hostFailure) controller.fail(hostFailure.cause);
 	function onOpenChange(open) {
 		if (open) return;
-		settle(false);
-		state.open = false;
-		scheduleAdvance();
-	}
-	async function ok() {
-		const spec = current.value;
-		if (!spec || state.busy) return;
-		if (spec.onOk) {
-			state.busy = true;
-			try {
-				if (await spec.onOk() === false) {
-					state.busy = false;
-					return;
-				}
-			} catch (err) {
-				state.busy = false;
-				console.error("[xh] confirm onOk 失败，对话框保持打开", err);
-				return;
-			}
-			state.busy = false;
-		}
-		close(true);
+		controller.close(false);
 	}
-	function request(spec) {
-		if (disposed) return Promise.reject(/* @__PURE__ */ new Error("dialog 服务已卸载"));
-		return new Promise((resolve) => {
-			queue.push({
-				...spec,
-				resolve,
-				settled: false
-			});
-			next();
-		});
-	}
-	const Host = defineComponent({
+	const app = createApp(defineComponent({
 		name: "XhDialogServiceHost",
 		setup() {
 			configSource.provide();
 			return () => {
-				const spec = current.value;
+				const serviceState = state.value;
+				if (serviceState.failure) return null;
+				const request = serviceState.current;
+				const spec = request?.spec;
 				return h(XhDialogRoot, {
-					"open": state.open,
+					"open": serviceState.open,
 					"onUpdate:open": onOpenChange,
 					"modal": true,
 					"role": "alertdialog",
-					"closeOnEscape": !state.busy,
+					"closeOnEscape": !serviceState.busy,
 					"closeOnInteractOutside": false,
-					"initialFocus": spec?.initialFocus
+					"initialFocus": spec?.initialFocus,
+					"onExitComplete": () => controller.finishExit(request)
 				}, () => spec ? h(XhDialogContent, null, () => [
-					h("div", {
-						"style": {
-							display: "flex",
-							alignItems: "center",
-							gap: "var(--xh-control-gap-md)"
-						},
-						"data-tone": spec.badge ? toneOfBadge(spec.badge) : void 0
-					}, [spec.badge ? typeBadge(spec.badge) : null, h(XhDialogTitle, () => spec.title)]),
-					typeof spec.content === "string" ? h(XhDialogDescription, () => spec.content) : typeof spec.content === "function" ? spec.content() : null,
-					spec.body && spec.value ? spec.body(spec.value) : null,
-					h("div", { style: {
-						display: "flex",
-						justifyContent: "flex-end",
-						gap: "var(--xh-control-gap-md)"
-					} }, [spec.showCancel ? h(XhButton, {
+					h(XhDialogHeader, null, () => [spec.badge ? h(XhDialogIndicator, { "data-tone": dialogServiceBadgeTone(spec.badge) }) : null, h(XhDialogTitle, () => spec.title)]),
+					h(XhDialogBody, null, () => [
+						typeof spec.content === "string" ? h(XhDialogDescription, () => spec.content) : typeof spec.content === "function" ? spec.content() : null,
+						spec.body && spec.value ? spec.body(spec.value) : null,
+						serviceState.actionError ? h("p", {
+							role: "alert",
+							style: { color: "var(--xh-fg-danger)" }
+						}, toValue(options.actionErrorText) ?? "Action failed. Please try again.") : null
+					]),
+					h(XhDialogFooter, null, () => [spec.showCancel ? h(XhButton, {
 						variant: "ghost",
-						disabled: state.busy,
-						onClick: () => close(false)
+						disabled: serviceState.busy,
+						onClick: () => controller.close(false)
 					}, () => toValue(spec.cancelText)) : null, h(XhButton, {
 						variant: "solid",
 						tone: spec.tone,
-						loading: state.busy,
-						onClick: ok
-					}, () => [state.busy ? h(XhButtonIndicator, () => spinArc()) : null, h(XhButtonLabel, () => state.busy ? `${toValue(spec.okText)}…` : toValue(spec.okText))])])
+						loading: serviceState.busy,
+						onClick: controller.confirmCurrent
+					}, () => [serviceState.busy ? h(XhButtonIndicator, () => spinArc()) : null, h(XhButtonLabel, () => serviceState.busy ? `${toValue(spec.okText)}…` : toValue(spec.okText))])])
 				]) : null);
 			};
 		}
-	});
-	function toneOfBadge(badge) {
-		return badge === "error" ? "danger" : badge;
+	}));
+	let mounted = false;
+	function failHost(cause) {
+		controller.fail(cause);
+	}
+	app.config.errorHandler = failHost;
+	if (!hostFailure) try {
+		app.mount(holder);
+		mounted = true;
+	} catch (cause) {
+		failHost(cause);
 	}
-	const app = createApp(Host);
-	const mounted = mountServiceHost(app, holder, "dialog");
 	const alert = (badge, tone) => async (opts) => {
-		await request({
+		await controller.request({
 			title: opts.title,
 			content: opts.content,
 			tone,
@@ -145,11 +92,15 @@ function createDialogService(options = {}) {
 			cancelText: defaults.cancelText,
 			showCancel: false,
 			badge,
-			onOk: opts.onOk
+			onOk: opts.onOk,
+			onActionError: opts.onActionError
 		});
 	};
 	return {
-		confirm: (opts) => request({
+		get actionError() {
+			return controller.state.actionError;
+		},
+		confirm: (opts) => controller.request({
 			title: opts.title,
 			content: opts.content,
 			tone: opts.tone ?? "brand",
@@ -157,11 +108,12 @@ function createDialogService(options = {}) {
 			cancelText: opts.cancelText ?? defaults.cancelText,
 			showCancel: true,
 			badge: opts.badge,
-			onOk: opts.onOk
+			onOk: opts.onOk,
+			onActionError: opts.onActionError
 		}),
 		prompt: (opts) => {
 			const value = reactive({ ...opts.initialValue });
-			return request({
+			return controller.request({
 				title: opts.title,
 				tone: opts.tone ?? "brand",
 				okText: opts.okText ?? defaults.okText,
@@ -171,7 +123,8 @@ function createDialogService(options = {}) {
 				initialFocus: opts.initialFocus,
 				body: (v) => opts.body(v),
 				value,
-				onOk: opts.onOk ? () => opts.onOk(value) : void 0
+				onOk: opts.onOk ? () => opts.onOk(value) : void 0,
+				onActionError: opts.onActionError
 			}).then((ok) => ok ? { ...toRaw(value) } : null);
 		},
 		info: alert("info", "info"),
@@ -180,13 +133,7 @@ function createDialogService(options = {}) {
 		error: alert("error", "danger"),
 		setConfig: (next) => configSource.set(next),
 		dispose: () => {
-			disposed = true;
-			if (advanceTimer) {
-				clearTimeout(advanceTimer);
-				advanceTimer = null;
-			}
-			settle(false);
-			for (const spec of queue.splice(0)) spec.resolve(false);
+			controller.dispose();
 			if (mounted) app.unmount();
 			if (!options.target) holder.remove();
 		}