@xihan-ui/vue 2.0.0 → 3.0.0

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":["/*\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"}
+{"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 / command / image-viewer 的遮罩经 additionalExitRefs\n// 一并计入，轻提示与通知卡片也经它把 Presence 交给机器。\n\nexport interface OverlayExitOptions {\n  /**\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      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":";;;;;;;AA0CA,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,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

@@ -10,6 +10,7 @@ function useScrollbars(options) {
 	const axes = options.axes ?? DEFAULT_AXES;
 	const scope = options.scope ?? createScope(null, createVueIdGenerator());
 	const bars = [];
+	const built = ref(0);
 	/**
 	* 该轴的滚动条当前常驻在场。判据不经 api：api 中就要读 gutter，读回来会形成循环，
 	* 因此直接读作者提供的 props 与状态机测得的尺寸。
@@ -21,7 +22,7 @@ function useScrollbars(options) {
 		return !native && (type === "always" || isOverflowing(bar.service.context.get("metrics")));
 	};
 	/** 两条轴都在场：各自在末端让出交叉口一格，只有一条时不让，避免滑块行程无故缩短。 */
-	const both = () => axes.length > 1 && bars.length === axes.length && bars.every(standing);
+	const both = () => axes.length > 1 && built.value === axes.length && bars.every(standing);
 	for (const axis of axes) {
 		const rootRef = ref(null);
 		const trackRef = ref(null);
@@ -41,6 +42,7 @@ function useScrollbars(options) {
 			rootRef,
 			trackRef
 		});
+		built.value = bars.length;
 	}
 	/** 交叉口补丁只写在竖条中；只有一条轴在场时右下角没有缺口需要补，收起以免无故遮住一块内容。 */
 	const corner = (bar) => axes.length > 1 && bar.axis === "vertical" ? [h("div", {

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

@@ -1 +1 @@
-{"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"}
+{"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  // 建齐没有：第一条轴的机器在循环里就要读 gutter，那时数组还没填满。这一位必须是响应式的，\n  // props 取值器读到的一切都要能让依赖它的计算失效，普通数组的长度做不到。\n  const built = ref(0)\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 && built.value === 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    built.value = bars.length\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;CAGrB,MAAM,QAAQ,IAAI,CAAC;;;;;CAMnB,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,MAAM,UAAU,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;EACD,MAAM,QAAQ,KAAK;CACrB;;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/services/notification-service.d.ts

@@ -1,18 +1,23 @@
 import { XhConfig } from "../config/config.js";
 import { MaybeRefOrGetter } from "vue";
-import { NotificationDedupe, NotificationOptions, NotificationPlacement, NotificationTranslations } from "@xihan-ui/headless";
+import { NotificationDedupe, NotificationOptions, NotificationPlacement, NotificationPreset, NotificationTranslations } from "@xihan-ui/headless";
 //#region src/services/notification-service.d.ts
 interface NotificationServiceOptions {
-  /** 默认落位，默认 bottom-end；单条可用 options.placement 覆盖。 */
+  /** 形态预设，默认 card；轻提示传 'toast'。决定下面几项没写时的缺省值与卡片排版。 */
+  preset?: NotificationPreset;
+  /** 默认落位：card 为 bottom-end，toast 为 bottom；单条可用 options.placement 覆盖。 */
   placement?: NotificationPlacement;
-  /** 每个位置最多同时保留几条，超出时先移除低优先级的、同级中移除最旧的。默认 5；传 Infinity 即不限。 */
+  /** 每个位置最多同时保留几条，超出时先移除低优先级的、同级中移除最旧的：card 为 5、toast 为 3；传 Infinity 即不限。 */
   max?: number;
   /** 重复的判定方式，默认 'id'；传 'content' 则同一内容合并为一条并计数。 */
   dedupe?: NotificationDedupe;
-  /** 同一堆叠内的间距（px），默认 16。 */
+  /** 同一堆叠内的间距（px）：card 为 16、toast 为 12。 */
   gap?: number;
+  /** 单条未写 duration 时的停留毫秒：card 为 5000、toast 为 4000。 */
   duration?: number;
-  removeDelay?: number;
+  /** 同一位置的几条叠成一摞：card 默认不叠，toast 默认叠。 */
+  stacked?: boolean;
+  /** 页面切到后台时暂停计时：card 默认关闭，toast 默认开启。 */
   pauseOnPageIdle?: boolean;
   /** 通知的文案：堆叠区的读屏名与卡片上关闭按钮的读屏名，统一在一个桶中。 */
   translations?: MaybeRefOrGetter<Partial<NotificationTranslations>>;
@@ -32,18 +37,32 @@ interface NotificationServiceOptions {
 interface NotificationCreateOptions extends NotificationOptions {
   onAction?: () => void;
 }
-/** 类型糖的入参：只差 type 与 title，其余同 create。 */
+/** 语气糖的入参：只差 tone / loading 与 title，其余同 create。 */
 type NotificationMessageOptions = Omit<NotificationCreateOptions, 'tone' | 'loading' | 'title'>;
+/** promise 三态的标题：成功与失败可以传函数，拿到结果后再拼装标题。 */
+interface NotificationPromiseOptions<T> extends Omit<NotificationMessageOptions, 'duration'> {
+  loading: string;
+  success: string | ((value: T) => string);
+  error: string | ((reason: unknown) => string);
+}
 interface NotificationService {
   /** 入队并返回 id；同 id 已存在则就地改写，被合并的返回被并入的那一条。 */
   create: (options?: NotificationCreateOptions) => string;
   update: (id: string, options: Partial<NotificationOptions>) => void;
+  /** 立即从队列中删除，不播退场动画。卡片自己的关闭按钮先播退场动画再移出。 */
   dismiss: (id: string) => void;
   dismissAll: () => void;
   info: (title: string, options?: NotificationMessageOptions) => string;
   success: (title: string, options?: NotificationMessageOptions) => string;
   warning: (title: string, options?: NotificationMessageOptions) => string;
   danger: (title: string, options?: NotificationMessageOptions) => string;
+  /** 以 loading 态弹出一条并返回 id，之后用 update(id, { loading: false, tone: 'success', title: … }) 收尾。 */
+  loading: (title: string, options?: NotificationMessageOptions) => string;
+  /**
+   * 先弹出一条 loading，Promise 落定后就地改写为 success / danger；说明等其余字段三态共用。
+   * Promise 的结果原样交回调用方，拒绝也照旧拒绝。
+   */
+  promise: <T>(input: Promise<T> | (() => Promise<T>), options: NotificationPromiseOptions<T>) => Promise<T>;
   /** 暂停当前这些卡片的计时，'service' 这一路与指针、焦点并存。 */
   pauseAll: () => void;
   resumeAll: () => void;
@@ -54,5 +73,5 @@ interface NotificationService {
 }
 declare function createNotificationService(options?: NotificationServiceOptions): NotificationService;
 //#endregion
-export { NotificationCreateOptions, NotificationMessageOptions, NotificationService, NotificationServiceOptions, createNotificationService };
+export { NotificationCreateOptions, NotificationMessageOptions, NotificationPromiseOptions, NotificationService, NotificationServiceOptions, createNotificationService };
 //# sourceMappingURL=notification-service.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"notification-service.d.ts","names":[],"sources":["../../src/services/notification-service.ts"],"mappings":";;;;UAsCiB;;EAEf,YAAY;;EAEZ;;EAEA,SAAS;;EAET;EACA;EACA;EACA;;EAEA,eAAe,iBAAiB,QAAQ;;;;;;EAMxC,SAAS,iBAAiB;;EAE1B,SAAS;;;;;;UAOM,kCAAkC;EACjD;;;KAIU,6BAA6B,KAAK;UAE7B;;EAEf,SAAS,UAAU;EACnB,SAAS,YAAY,SAAS,QAAQ;EACtC,UAAU;EACV;EACA,OAAO,eAAe,UAAU;EAChC,UAAU,eAAe,UAAU;EACnC,UAAU,eAAe,UAAU;EACnC,SAAS,eAAe,UAAU;;EAElC;EACA;;EAEA,YAAY,MAAM,iBAAiB;;EAEnC;;iBAuCc,0BAA0B,UAAS,6BAAkC"}
+{"version":3,"file":"notification-service.d.ts","names":[],"sources":["../../src/services/notification-service.ts"],"mappings":";;;;UAsCiB;;EAEf,SAAS;;EAET,YAAY;;EAEZ;;EAEA,SAAS;;EAET;;EAEA;;EAEA;;EAEA;;EAEA,eAAe,iBAAiB,QAAQ;;;;;;EAMxC,SAAS,iBAAiB;;EAE1B,SAAS;;;;;;UAOM,kCAAkC;EACjD;;;KAIU,6BAA6B,KAAK;;UAG7B,2BAA2B,WAAW,KAAK;EAC1D;EACA,oBAAoB,OAAO;EAC3B,kBAAkB;;UAGH;;EAEf,SAAS,UAAU;EACnB,SAAS,YAAY,SAAS,QAAQ;;EAEtC,UAAU;EACV;EACA,OAAO,eAAe,UAAU;EAChC,UAAU,eAAe,UAAU;EACnC,UAAU,eAAe,UAAU;EACnC,SAAS,eAAe,UAAU;;EAElC,UAAU,eAAe,UAAU;;;;;EAKnC,UAAU,GAAG,OAAO,QAAQ,YAAY,QAAQ,KAAK,SAAS,2BAA2B,OAAO,QAAQ;;EAExG;EACA;;EAEA,YAAY,MAAM,iBAAiB;;EAEnC;;iBAsCc,0BAA0B,UAAS,6BAAkC"}

package/dist/services/notification-service.js

@@ -1,21 +1,21 @@
 import { vueNormalize } from "../runtime/normalize-props.js";
 import { useMachine } from "../runtime/use-machine.js";
-import { XhNotificationItem, XhNotificationItemActionTrigger, XhNotificationItemCloseTrigger, XhNotificationItemDescription, XhNotificationItemIndicator, XhNotificationItemTitle } from "../components/notification/notification.js";
+import { XhNotificationItem, XhNotificationItemActionTrigger, XhNotificationItemCloseTrigger, XhNotificationItemContent, XhNotificationItemDescription, XhNotificationItemIndicator, XhNotificationItemTitle } from "../components/notification/notification.js";
 import { createServiceConfig } from "./service-config.js";
 import { mountServiceHost } from "./mount-host.js";
-import { Fragment, computed, createApp, defineComponent, h, shallowRef, toValue } from "vue";
+import { Fragment, computed, createApp, defineComponent, h, ref, shallowRef, toValue } from "vue";
 import { ensurePortalRoot } from "@xihan-ui/core";
 import { connectNotification, createFeedbackServiceController, notificationMachine, resolveFeedbackServiceTitle } from "@xihan-ui/headless";
 //#region src/services/notification-service.ts
 function defaultCard(item, translations, paused, onUnmounted, onAction) {
 	return h(XhNotificationItem, {
 		id: item.id,
+		preset: item.preset,
 		title: resolveFeedbackServiceTitle(item),
 		description: item.description,
 		tone: item.tone,
 		loading: item.loading,
 		duration: item.duration,
-		removeDelay: item.removeDelay,
 		closable: item.closable,
 		pauseOnPageIdle: item.pauseOnPageIdle,
 		paused,
@@ -23,13 +23,12 @@ function defaultCard(item, translations, paused, onUnmounted, onAction) {
 		onStatusChange: ({ id, status }) => {
 			if (status === "unmounted") onUnmounted(id);
 		},
-		onAction: () => onAction(item.id)
+		onAction: ({ id }) => onAction(id)
 	}, () => [
 		h(XhNotificationItemIndicator),
-		h(XhNotificationItemTitle),
-		h(XhNotificationItemDescription),
+		h(XhNotificationItemContent, () => [h(XhNotificationItemTitle), h(XhNotificationItemDescription)]),
 		item.actionLabel ? h(XhNotificationItemActionTrigger, () => item.actionLabel) : null,
-		item.closable !== false ? h(XhNotificationItemCloseTrigger) : null
+		item.closable ? h(XhNotificationItemCloseTrigger) : null
 	]);
 }
 function createNotificationService(options = {}) {
@@ -53,6 +52,8 @@ function createNotificationService(options = {}) {
 				...queueProps,
 				translations: toValue(queueProps.translations)
 			}), void 0, { start: "setup" });
+			const rootRef = ref(null);
+			service.refs.set("getRootEl", () => rootRef.value);
 			const api = computed(() => connectNotification(service, vueNormalize));
 			controller.attach({
 				create: (opts) => api.value.create(opts),
@@ -63,7 +64,10 @@ function createNotificationService(options = {}) {
 			return () => {
 				const value = api.value;
 				controller.syncItems(value.visibleNotifications.map((item) => item.id));
-				return h("div", value.getRootProps(), value.placements.map((placement) => h("div", {
+				return h("div", {
+					...value.getRootProps(),
+					ref: rootRef
+				}, value.placements.map((placement) => h("div", {
 					key: placement,
 					...value.getGroupProps({ placement })
 				}, value.getItemsByPlacement(placement).map((item) => h(Fragment, { key: item.id }, [defaultCard(item, toValue(queueProps.translations), pausedAll.value, controller.unmounted, controller.invokeAction)])))));
@@ -91,6 +95,29 @@ function createNotificationService(options = {}) {
 		success: sugar("success"),
 		warning: sugar("warning"),
 		danger: sugar("danger"),
+		loading: (title, opts = {}) => create({
+			...opts,
+			loading: true,
+			title
+		}),
+		promise: (input, opts) => {
+			const { loading, success, error, ...rest } = opts;
+			const running = typeof input === "function" ? input() : input;
+			const { onAction, ...record } = rest;
+			return controller.trackPromise(running, {
+				...record,
+				loading: true,
+				title: loading
+			}, (value) => ({
+				loading: false,
+				tone: "success",
+				title: typeof success === "function" ? success(value) : success
+			}), (reason) => ({
+				loading: false,
+				tone: "danger",
+				title: typeof error === "function" ? error(reason) : error
+			}), onAction);
+		},
 		pauseAll: controller.pauseAll,
 		resumeAll: controller.resumeAll,
 		setConfig: (next) => configSource.set(next),

package/dist/services/notification-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-service.js","names":[],"sources":["../../src/services/notification-service.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// 全局命令式通知服务：自带一个挂到 body 的宿主应用与默认渲染模板。\n//\n// 通知常常不是从组件树里发出来的——推送连接的回调、后台任务的收尾、拦截器里的\n// 一条系统消息，调用点都在组件之外。要它们各自去找一份队列上下文并不现实，\n// 所以队列由本服务持有，业务代码只管发。\n//\n// 队列要长在页面结构里（比如通知中心那一栏自己排版）时，用组件形态的\n// XhNotificationRoot，那是另一条路，两者不共享队列。\nimport type {\n  NotificationDedupe,\n  NotificationOptions,\n  NotificationPlacement,\n  NotificationTranslations,\n  ResolvedNotification,\n} from '@xihan-ui/headless'\nimport type { App, MaybeRefOrGetter, VNode } from 'vue'\nimport type { XhConfig } from '../config/config'\nimport { ensurePortalRoot } from '@xihan-ui/core'\nimport { connectNotification, createFeedbackServiceController, notificationMachine, resolveFeedbackServiceTitle } from '@xihan-ui/headless'\nimport { computed, createApp, defineComponent, Fragment, h, shallowRef, toValue } from 'vue'\nimport {\n  XhNotificationItem,\n  XhNotificationItemActionTrigger,\n  XhNotificationItemCloseTrigger,\n  XhNotificationItemDescription,\n  XhNotificationItemIndicator,\n  XhNotificationItemTitle,\n} from '../components/notification/notification'\nimport { vueNormalize } from '../runtime/normalize-props'\nimport { useMachine } from '../runtime/use-machine'\nimport { mountServiceHost } from './mount-host'\nimport { createServiceConfig } from './service-config'\n\nexport interface NotificationServiceOptions {\n  /** 默认落位，默认 bottom-end；单条可用 options.placement 覆盖。 */\n  placement?: NotificationPlacement\n  /** 每个位置最多同时保留几条，超出时先移除低优先级的、同级中移除最旧的。默认 5；传 Infinity 即不限。 */\n  max?: number\n  /** 重复的判定方式，默认 'id'；传 'content' 则同一内容合并为一条并计数。 */\n  dedupe?: NotificationDedupe\n  /** 同一堆叠内的间距（px），默认 16。 */\n  gap?: number\n  duration?: number\n  removeDelay?: number\n  pauseOnPageIdle?: boolean\n  /** 通知的文案：堆叠区的读屏名与卡片上关闭按钮的读屏名，统一在一个桶中。 */\n  translations?: MaybeRefOrGetter<Partial<NotificationTranslations>>\n  /**\n   * 提供给通知子树的全局配置（locale / translations / size / portalContainer）。\n   * 本服务自带宿主应用，无法接收组件树中的 provideXhConfig，需要与应用同语言时从这里提供；\n   * 传 ref/getter 即可在运行期跟随切换语言，也可以之后用 setConfig 推送。\n   */\n  config?: MaybeRefOrGetter<XhConfig>\n  /** 宿主容器；未提供时在 body 下新建一个。 */\n  target?: HTMLElement\n}\n\n/**\n * create 的入参。`actionLabel` 是卡片上行内动作按钮的文案，`onAction` 是按下它执行的动作：\n * 回调不进入队列记录（该记录要能被整份替换、序列化、比对），服务按 id 单独保存一张表。\n */\nexport interface NotificationCreateOptions extends NotificationOptions {\n  onAction?: () => void\n}\n\n/** 类型糖的入参：只差 type 与 title，其余同 create。 */\nexport type NotificationMessageOptions = Omit<NotificationCreateOptions, 'tone' | 'loading' | 'title'>\n\nexport interface NotificationService {\n  /** 入队并返回 id；同 id 已存在则就地改写，被合并的返回被并入的那一条。 */\n  create: (options?: NotificationCreateOptions) => string\n  update: (id: string, options: Partial<NotificationOptions>) => void\n  dismiss: (id: string) => void\n  dismissAll: () => void\n  info: (title: string, options?: NotificationMessageOptions) => string\n  success: (title: string, options?: NotificationMessageOptions) => string\n  warning: (title: string, options?: NotificationMessageOptions) => string\n  danger: (title: string, options?: NotificationMessageOptions) => string\n  /** 暂停当前这些卡片的计时，'service' 这一路与指针、焦点并存。 */\n  pauseAll: () => void\n  resumeAll: () => void\n  /** 更换全局配置源。 */\n  setConfig: (next: MaybeRefOrGetter<XhConfig> | undefined) => void\n  /** 卸载宿主应用并移除容器。 */\n  dispose: () => void\n}\n\nfunction defaultCard(\n  item: ResolvedNotification,\n  translations: Partial<NotificationTranslations> | undefined,\n  paused: boolean,\n  onUnmounted: (id: string) => void,\n  onAction: (id: string) => void,\n): VNode {\n  return h(XhNotificationItem, {\n    id: item.id,\n    title: resolveFeedbackServiceTitle(item),\n    description: item.description,\n    tone: item.tone,\n    loading: item.loading,\n    duration: item.duration,\n    removeDelay: item.removeDelay,\n    closable: item.closable,\n    pauseOnPageIdle: item.pauseOnPageIdle,\n    paused,\n    translations,\n    onStatusChange: ({ id, status }: { id: string, status: string }) => {\n      if (status === 'unmounted')\n        onUnmounted(id)\n    },\n    onAction: () => onAction(item.id),\n  }, () => [\n    // 四个节点平铺：两列网格与右上角那颗叉都归皮肤，模板套一层行容器只会与它打架。\n    // 指示符与说明都恒渲染——皮肤的 :empty 规则负责把空盒收走，\n    // 而 aria-describedby 无条件指着说明那一个，节点缺席就成了悬空引用\n    h(XhNotificationItemIndicator),\n    h(XhNotificationItemTitle),\n    h(XhNotificationItemDescription),\n    item.actionLabel ? h(XhNotificationItemActionTrigger, () => item.actionLabel) : null,\n    item.closable !== false ? h(XhNotificationItemCloseTrigger) : null,\n  ])\n}\n\nexport function createNotificationService(options: NotificationServiceOptions = {}): NotificationService {\n  if (typeof document === 'undefined')\n    throw new Error('createNotificationService 需要 document；SSR 里请等到客户端再创建')\n\n  const { target, config, ...queueProps } = options\n  const configSource = createServiceConfig(config)\n  const holder = target ?? document.createElement('div')\n  if (!target)\n    ensurePortalRoot(document).appendChild(holder)\n\n  let publishState: (paused: boolean) => void = () => {}\n  const controller = createFeedbackServiceController<NotificationOptions, Partial<NotificationOptions>>({\n    name: 'notification',\n    onStateChange: state => publishState(state.paused),\n  })\n  const pausedAll = shallowRef(controller.state.paused)\n  publishState = paused => void (pausedAll.value = paused)\n\n  const Host = defineComponent({\n    name: 'XhNotificationServiceHost',\n    setup() {\n      configSource.provide()\n      // props 每帧现展开：文案是 getter 时才跟得上运行期切语言。\n      // 队列机器在 setup 里当场 start：它没有 DOM 锚点，而端口紧接着就接上。\n      // 等 mounted 再 start 的话，从业务组件的 onMounted 懒建本服务时，宿主的 mounted\n      // 会排到调用方那条 post-flush 队列的队尾，调用方接着发的第一条命令就撞上 SEND_BEFORE_MOUNT\n      const service = useMachine(\n        notificationMachine,\n        () => ({ ...queueProps, translations: toValue(queueProps.translations) }),\n        undefined,\n        { start: 'setup' },\n      )\n      // 部件不经 provide/inject 取队列：本服务自己收 status-change 把走完退场的那条删掉，\n      // 卡片与队列之间因此没有第二条隐式链路\n      const api = computed(() => connectNotification(service, vueNormalize))\n      controller.attach({\n        create: opts => api.value.create(opts),\n        update: (id, opts) => api.value.update(id, opts),\n        dismiss: id => api.value.dismiss(id),\n        dismissAll: () => api.value.dismissAll(),\n      })\n      return () => {\n        const value = api.value\n        controller.syncItems(value.visibleNotifications.map(item => item.id))\n        return h('div', value.getRootProps() as Record<string, unknown>, value.placements.map(placement =>\n          h(\n            'div',\n            { key: placement, ...value.getGroupProps({ placement }) as Record<string, unknown> },\n            // 按队列身份 id 给 key，避免节点被就地复用\n            value.getItemsByPlacement(placement).map(item => h(Fragment, { key: item.id }, [\n              defaultCard(\n                item,\n                toValue(queueProps.translations),\n                pausedAll.value,\n                controller.unmounted,\n                controller.invokeAction,\n              ),\n            ])),\n          )))\n      }\n    },\n  })\n\n  const app: App = createApp(Host)\n  const mounted = mountServiceHost(app, holder, 'notification')\n  if (!mounted)\n    controller.attach(null)\n\n  /** 入队一条；回调另存一张表，队列记录中只保留文案。 */\n  const create = (opts: NotificationCreateOptions = {}): string => {\n    const { onAction, ...record } = opts\n    return controller.create(record, onAction)\n  }\n\n  const sugar = (tone: NotificationOptions['tone']) =>\n    (title: string, opts: NotificationMessageOptions = {}): string =>\n      create({ ...opts, tone, title })\n\n  return {\n    create,\n    update: controller.update,\n    dismiss: controller.dismiss,\n    dismissAll: controller.dismissAll,\n    info: sugar('info'),\n    success: sugar('success'),\n    warning: sugar('warning'),\n    danger: sugar('danger'),\n    pauseAll: controller.pauseAll,\n    resumeAll: controller.resumeAll,\n    setConfig: next => configSource.set(next),\n    dispose: () => {\n      if (mounted)\n        app.unmount()\n      controller.dispose()\n      if (!target)\n        holder.remove()\n    },\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"notification-service.js","names":[],"sources":["../../src/services/notification-service.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// 全局命令式通知服务：自带一个挂到 body 的宿主应用与默认渲染模板，\n// info/success 等命令在任意模块作用域可调（请求拦截器、推送回调、store），\n// 不要求调用点在组件树内。卡片与轻提示是同一个服务的两种预设，preset 在创建时定下。\n//\n// 队列要长在页面结构里（比如通知中心那一栏自己排版）时，用组件形态的\n// XhNotificationRoot，那是另一条路，两者不共享队列。\nimport type {\n  NotificationDedupe,\n  NotificationOptions,\n  NotificationPlacement,\n  NotificationPreset,\n  NotificationTranslations,\n  ResolvedNotification,\n} from '@xihan-ui/headless'\nimport type { App, MaybeRefOrGetter, VNode } from 'vue'\nimport type { XhConfig } from '../config/config'\nimport { ensurePortalRoot } from '@xihan-ui/core'\nimport { connectNotification, createFeedbackServiceController, notificationMachine, resolveFeedbackServiceTitle } from '@xihan-ui/headless'\nimport { computed, createApp, defineComponent, Fragment, h, ref, shallowRef, toValue } from 'vue'\nimport {\n  XhNotificationItem,\n  XhNotificationItemActionTrigger,\n  XhNotificationItemCloseTrigger,\n  XhNotificationItemContent,\n  XhNotificationItemDescription,\n  XhNotificationItemIndicator,\n  XhNotificationItemTitle,\n} from '../components/notification/notification'\nimport { vueNormalize } from '../runtime/normalize-props'\nimport { useMachine } from '../runtime/use-machine'\nimport { mountServiceHost } from './mount-host'\nimport { createServiceConfig } from './service-config'\n\nexport interface NotificationServiceOptions {\n  /** 形态预设，默认 card；轻提示传 'toast'。决定下面几项没写时的缺省值与卡片排版。 */\n  preset?: NotificationPreset\n  /** 默认落位：card 为 bottom-end，toast 为 bottom；单条可用 options.placement 覆盖。 */\n  placement?: NotificationPlacement\n  /** 每个位置最多同时保留几条，超出时先移除低优先级的、同级中移除最旧的：card 为 5、toast 为 3；传 Infinity 即不限。 */\n  max?: number\n  /** 重复的判定方式，默认 'id'；传 'content' 则同一内容合并为一条并计数。 */\n  dedupe?: NotificationDedupe\n  /** 同一堆叠内的间距（px）：card 为 16、toast 为 12。 */\n  gap?: number\n  /** 单条未写 duration 时的停留毫秒：card 为 5000、toast 为 4000。 */\n  duration?: number\n  /** 同一位置的几条叠成一摞：card 默认不叠，toast 默认叠。 */\n  stacked?: boolean\n  /** 页面切到后台时暂停计时：card 默认关闭，toast 默认开启。 */\n  pauseOnPageIdle?: boolean\n  /** 通知的文案：堆叠区的读屏名与卡片上关闭按钮的读屏名，统一在一个桶中。 */\n  translations?: MaybeRefOrGetter<Partial<NotificationTranslations>>\n  /**\n   * 提供给通知子树的全局配置（locale / translations / size / portalContainer）。\n   * 本服务自带宿主应用，无法接收组件树中的 provideXhConfig，需要与应用同语言时从这里提供；\n   * 传 ref/getter 即可在运行期跟随切换语言，也可以之后用 setConfig 推送。\n   */\n  config?: MaybeRefOrGetter<XhConfig>\n  /** 宿主容器；未提供时在 body 下新建一个。 */\n  target?: HTMLElement\n}\n\n/**\n * create 的入参。`actionLabel` 是卡片上行内动作按钮的文案，`onAction` 是按下它执行的动作：\n * 回调不进入队列记录（该记录要能被整份替换、序列化、比对），服务按 id 单独保存一张表。\n */\nexport interface NotificationCreateOptions extends NotificationOptions {\n  onAction?: () => void\n}\n\n/** 语气糖的入参：只差 tone / loading 与 title，其余同 create。 */\nexport type NotificationMessageOptions = Omit<NotificationCreateOptions, 'tone' | 'loading' | 'title'>\n\n/** promise 三态的标题：成功与失败可以传函数，拿到结果后再拼装标题。 */\nexport interface NotificationPromiseOptions<T> extends Omit<NotificationMessageOptions, 'duration'> {\n  loading: string\n  success: string | ((value: T) => string)\n  error: string | ((reason: unknown) => string)\n}\n\nexport interface NotificationService {\n  /** 入队并返回 id；同 id 已存在则就地改写，被合并的返回被并入的那一条。 */\n  create: (options?: NotificationCreateOptions) => string\n  update: (id: string, options: Partial<NotificationOptions>) => void\n  /** 立即从队列中删除，不播退场动画。卡片自己的关闭按钮先播退场动画再移出。 */\n  dismiss: (id: string) => void\n  dismissAll: () => void\n  info: (title: string, options?: NotificationMessageOptions) => string\n  success: (title: string, options?: NotificationMessageOptions) => string\n  warning: (title: string, options?: NotificationMessageOptions) => string\n  danger: (title: string, options?: NotificationMessageOptions) => string\n  /** 以 loading 态弹出一条并返回 id，之后用 update(id, { loading: false, tone: 'success', title: … }) 收尾。 */\n  loading: (title: string, options?: NotificationMessageOptions) => string\n  /**\n   * 先弹出一条 loading，Promise 落定后就地改写为 success / danger；说明等其余字段三态共用。\n   * Promise 的结果原样交回调用方，拒绝也照旧拒绝。\n   */\n  promise: <T>(input: Promise<T> | (() => Promise<T>), options: NotificationPromiseOptions<T>) => Promise<T>\n  /** 暂停当前这些卡片的计时，'service' 这一路与指针、焦点并存。 */\n  pauseAll: () => void\n  resumeAll: () => void\n  /** 更换全局配置源。 */\n  setConfig: (next: MaybeRefOrGetter<XhConfig> | undefined) => void\n  /** 卸载宿主应用并移除容器。 */\n  dispose: () => void\n}\n\nfunction defaultCard(\n  item: ResolvedNotification,\n  translations: Partial<NotificationTranslations> | undefined,\n  paused: boolean,\n  onUnmounted: (id: string) => void,\n  onAction: (id: string) => void,\n): VNode {\n  return h(XhNotificationItem, {\n    id: item.id,\n    preset: item.preset,\n    title: resolveFeedbackServiceTitle(item),\n    description: item.description,\n    tone: item.tone,\n    loading: item.loading,\n    duration: item.duration,\n    closable: item.closable,\n    pauseOnPageIdle: item.pauseOnPageIdle,\n    paused,\n    translations,\n    onStatusChange: ({ id, status }: { id: string, status: string }) => {\n      if (status === 'unmounted')\n        onUnmounted(id)\n    },\n    onAction: ({ id }: { id: string }) => onAction(id),\n  }, () => [\n    // 两种预设同一份结构，排版归皮肤按 data-preset 给。\n    // 指示符与说明都恒渲染——皮肤的 :empty 规则负责把空盒收走，\n    // 而 aria-describedby 无条件指着说明那一个，节点缺席就成了悬空引用\n    h(XhNotificationItemIndicator),\n    h(XhNotificationItemContent, () => [h(XhNotificationItemTitle), h(XhNotificationItemDescription)]),\n    item.actionLabel ? h(XhNotificationItemActionTrigger, () => item.actionLabel) : null,\n    item.closable ? h(XhNotificationItemCloseTrigger) : null,\n  ])\n}\n\nexport function createNotificationService(options: NotificationServiceOptions = {}): NotificationService {\n  if (typeof document === 'undefined')\n    throw new Error('createNotificationService 需要 document；SSR 里请等到客户端再创建')\n\n  const { target, config, ...queueProps } = options\n  const configSource = createServiceConfig(config)\n  const holder = target ?? document.createElement('div')\n  if (!target)\n    ensurePortalRoot(document).appendChild(holder)\n\n  let publishState: (paused: boolean) => void = () => {}\n  const controller = createFeedbackServiceController<NotificationOptions, Partial<NotificationOptions>>({\n    name: 'notification',\n    onStateChange: state => publishState(state.paused),\n  })\n  const pausedAll = shallowRef(controller.state.paused)\n  publishState = paused => void (pausedAll.value = paused)\n\n  const Host = defineComponent({\n    name: 'XhNotificationServiceHost',\n    setup() {\n      configSource.provide()\n      // props 每帧现展开：文案是 getter 时才跟得上运行期切语言。\n      // 队列机器在 setup 里当场 start：它没有 DOM 锚点，而端口紧接着就接上。\n      // 等 mounted 再 start 的话，从业务组件的 onMounted 懒建本服务时，宿主的 mounted\n      // 会排到调用方那条 post-flush 队列的队尾，调用方接着发的第一条命令就撞上 SEND_BEFORE_MOUNT\n      const service = useMachine(\n        notificationMachine,\n        () => ({ ...queueProps, translations: toValue(queueProps.translations) }),\n        undefined,\n        { start: 'setup' },\n      )\n      // 条目到达与叠摞都挂在作用域包装上；机器的追踪在首次提交之后才去取它\n      const rootRef = ref<HTMLElement | null>(null)\n      service.refs.set('getRootEl', () => rootRef.value)\n      // 部件不经 provide/inject 取队列：本服务自己收 status-change 把走完退场的那条删掉，\n      // 卡片与队列之间因此没有第二条隐式链路\n      const api = computed(() => connectNotification(service, vueNormalize))\n      controller.attach({\n        create: opts => api.value.create(opts),\n        update: (id, opts) => api.value.update(id, opts),\n        dismiss: id => api.value.dismiss(id),\n        dismissAll: () => api.value.dismissAll(),\n      })\n      return () => {\n        const value = api.value\n        controller.syncItems(value.visibleNotifications.map(item => item.id))\n        return h('div', { ...value.getRootProps() as Record<string, unknown>, ref: rootRef }, value.placements.map(placement =>\n          h(\n            'div',\n            { key: placement, ...value.getGroupProps({ placement }) as Record<string, unknown> },\n            // 按队列身份 id 给 key，避免节点被就地复用\n            value.getItemsByPlacement(placement).map(item => h(Fragment, { key: item.id }, [\n              defaultCard(\n                item,\n                toValue(queueProps.translations),\n                pausedAll.value,\n                controller.unmounted,\n                controller.invokeAction,\n              ),\n            ])),\n          )))\n      }\n    },\n  })\n\n  const app: App = createApp(Host)\n  const mounted = mountServiceHost(app, holder, 'notification')\n  if (!mounted)\n    controller.attach(null)\n\n  /** 入队一条；回调另存一张表，队列记录中只保留文案。 */\n  const create = (opts: NotificationCreateOptions = {}): string => {\n    const { onAction, ...record } = opts\n    return controller.create(record, onAction)\n  }\n\n  const sugar = (tone: NotificationOptions['tone']) =>\n    (title: string, opts: NotificationMessageOptions = {}): string =>\n      create({ ...opts, tone, title })\n\n  return {\n    create,\n    update: controller.update,\n    dismiss: controller.dismiss,\n    dismissAll: controller.dismissAll,\n    info: sugar('info'),\n    success: sugar('success'),\n    warning: sugar('warning'),\n    danger: sugar('danger'),\n    loading: (title, opts = {}) => create({ ...opts, loading: true, title }),\n    promise: <T>(input: Promise<T> | (() => Promise<T>), opts: NotificationPromiseOptions<T>): Promise<T> => {\n      const { loading, success, error, ...rest } = opts\n      const running = typeof input === 'function' ? input() : input\n      const { onAction, ...record } = rest\n      return controller.trackPromise(\n        running,\n        { ...record, loading: true, title: loading },\n        value => ({ loading: false, tone: 'success', title: typeof success === 'function' ? success(value) : success }),\n        reason => ({ loading: false, tone: 'danger', title: typeof error === 'function' ? error(reason) : error }),\n        onAction,\n      )\n    },\n    pauseAll: controller.pauseAll,\n    resumeAll: controller.resumeAll,\n    setConfig: next => configSource.set(next),\n    dispose: () => {\n      if (mounted)\n        app.unmount()\n      controller.dispose()\n      if (!target)\n        holder.remove()\n    },\n  }\n}\n"],"mappings":"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"}

package/dist/sound.d.ts

@@ -1,7 +1,6 @@
 import { DialogService } from "./services/dialog-service.js";
-import { ToastService } from "./services/toast-service.js";
 import { Directive } from "vue";
-import { DialogSoundKey, DialogSoundServiceOptions, SoundChoice, SoundPlayer, SoundPressOptions, ToastSoundServiceOptions } from "@xihan-ui/sound";
+import { DialogSoundKey, DialogSoundServiceOptions, NotificationSoundKey, NotificationSoundServiceOptions, NotificationSoundServicePort, SoundChoice, SoundPlayer, SoundPressOptions } from "@xihan-ui/sound";
 //#region src/sound.d.ts
 /**
  * 取共享播放器，没有时建立一个默认的。
@@ -10,7 +9,7 @@ import { DialogSoundKey, DialogSoundServiceOptions, SoundChoice, SoundPlayer, So
 declare function getSoundPlayer(): SoundPlayer;
 /** 换为自行配置的播放器（更换主题、接入用户偏好）。自动建立的播放器会被销毁。 */
 declare function setSoundPlayer(player: SoundPlayer): void;
-interface ToastSoundOptions extends Omit<ToastSoundServiceOptions, 'player' | 'attachUnlock'> {
+interface NotificationSoundOptions extends Omit<NotificationSoundServiceOptions, 'player' | 'attachUnlock'> {
   /** 使用哪个播放器，默认共享播放器。 */
   player?: SoundPlayer;
 }
@@ -18,14 +17,14 @@ interface ToastSoundOptions extends Omit<ToastSoundServiceOptions, 'player' | 'a
  * 为命令式通知服务配上声音：入队即发声，调用点无需修改。
  *
  * ```ts
- * export const toast = withToastSound(createToastService())
- * toast.success('已保存') // 视觉 + 听觉
+ * export const notify = withNotificationSound(createNotificationService())
+ * notify.success('已保存') // 视觉 + 听觉
  * ```
  *
  * `update` 只在类型改变且新类型不是 loading 时发声：上传完成时应当发声，
  * 修改文案不应发声。
  */
-declare function withToastSound(service: ToastService, options?: ToastSoundOptions): ToastService;
+declare function withNotificationSound<Service extends NotificationSoundServicePort>(service: Service, options?: NotificationSoundOptions): Service;
 interface DialogSoundOptions extends Omit<DialogSoundServiceOptions, 'player' | 'attachUnlock'> {
   player?: SoundPlayer;
 }
@@ -50,5 +49,5 @@ type SoundDirectiveValue = string | SoundDirectiveOptions | undefined;
  */
 declare const vSound: Directive<HTMLElement, SoundDirectiveValue>;
 //#endregion
-export { type DialogSoundKey, DialogSoundOptions, type SoundChoice, SoundDirectiveOptions, SoundDirectiveValue, ToastSoundOptions, getSoundPlayer, setSoundPlayer, vSound, withDialogSound, withToastSound };
+export { type DialogSoundKey, DialogSoundOptions, type NotificationSoundKey, NotificationSoundOptions, type SoundChoice, SoundDirectiveOptions, SoundDirectiveValue, getSoundPlayer, setSoundPlayer, vSound, withDialogSound, withNotificationSound };
 //# sourceMappingURL=sound.d.ts.map

package/dist/sound.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sound.d.ts","names":[],"sources":["../src/sound.ts"],"mappings":";;;;;;;;;iBA6BgB,kBAAkB;;iBAKlB,eAAe,QAAQ;UAItB,0BAA0B,KAAK;;EAE9C,SAAS;;;;;;;;;;;;;iBAcK,eAAe,SAAS,cAAc,UAAS,oBAAyB;UAQvE,2BAA2B,KAAK;EAC/C,SAAS;;;;;;iBAOK,gBAAgB,SAAS,eAAe,UAAS,qBAA0B;UAQ1E,8BAA8B;KAEnC,+BAA+B;;;;;;;;;;;;;cAgB9B,QAAQ,UAAU,aAAa"}
+{"version":3,"file":"sound.d.ts","names":[],"sources":["../src/sound.ts"],"mappings":";;;;;;;;iBA4BgB,kBAAkB;;iBAKlB,eAAe,QAAQ;UAItB,iCAAiC,KAAK;;EAErD,SAAS;;;;;;;;;;;;;iBAcK,sBAAsB,gBAAgB,8BAA8B,SAAS,SAAS,UAAS,2BAAgC;UAQ9H,2BAA2B,KAAK;EAC/C,SAAS;;;;;;iBAOK,gBAAgB,SAAS,eAAe,UAAS,qBAA0B;UAQ1E,8BAA8B;KAEnC,+BAA+B;;;;;;;;;;;;;cAgB9B,QAAQ,UAAU,aAAa"}

package/dist/sound.js

@@ -1,4 +1,4 @@
-import { attachDocumentSoundUnlock, createSharedSoundPlayerController, isSoundTargetDisabled, resolveSoundPressOptions, withDialogSoundService, withToastSoundService } from "@xihan-ui/sound";
+import { attachDocumentSoundUnlock, createSharedSoundPlayerController, isSoundTargetDisabled, resolveSoundPressOptions, withDialogSoundService, withNotificationSoundService } from "@xihan-ui/sound";
 //#region src/sound.ts
 const shared = createSharedSoundPlayerController();
 /**
@@ -16,15 +16,15 @@ function setSoundPlayer(player) {
 * 为命令式通知服务配上声音：入队即发声，调用点无需修改。
 *
 * ```ts
-* export const toast = withToastSound(createToastService())
-* toast.success('已保存') // 视觉 + 听觉
+* export const notify = withNotificationSound(createNotificationService())
+* notify.success('已保存') // 视觉 + 听觉
 * ```
 *
 * `update` 只在类型改变且新类型不是 loading 时发声：上传完成时应当发声，
 * 修改文案不应发声。
 */
-function withToastSound(service, options = {}) {
-	return withToastSoundService(service, {
+function withNotificationSound(service, options = {}) {
+	return withNotificationSoundService(service, {
 		...options,
 		player: options.player ?? getSoundPlayer(),
 		attachUnlock: attachDocumentSoundUnlock
@@ -78,6 +78,6 @@ const vSound = {
 	}
 };
 //#endregion
-export { getSoundPlayer, setSoundPlayer, vSound, withDialogSound, withToastSound };
+export { getSoundPlayer, setSoundPlayer, vSound, withDialogSound, withNotificationSound };
 
 //# sourceMappingURL=sound.js.map

package/dist/sound.js.map

@@ -1 +1 @@
-{"version":3,"file":"sound.js","names":[],"sources":["../src/sound.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// @xihan-ui/vue/sound —— 声音层的 Vue 适配。\n//\n// 与主入口分开：@xihan-ui/sound 是可选 peer，不用音效的应用不会因为装了本包\n// 而多出一个音频引擎。用之前先装 @xihan-ui/sound。\n//\n// 三种用法，从轻到重：\n//   v-sound          给任意元素或组件按下时配一声，一个字都不用改组件\n//   withToastSound   给命令式反馈服务配上声音，调用点一行都不用改\n//   getSoundPlayer   自己拿播放器，接偏好开关或调音面板\n\nimport type { DialogSoundServiceOptions, SoundPressOptions as SharedSoundPressOptions, SoundPlayer, ToastSoundServiceOptions } from '@xihan-ui/sound'\nimport type { Directive } from 'vue'\nimport type { DialogService } from './services/dialog-service'\nimport type { ToastService } from './services/toast-service'\nimport { attachDocumentSoundUnlock, createSharedSoundPlayerController, isSoundTargetDisabled, resolveSoundPressOptions, withDialogSoundService, withToastSoundService } from '@xihan-ui/sound'\n\nexport type { DialogSoundKey, SoundChoice } from '@xihan-ui/sound'\n\nconst shared = createSharedSoundPlayerController()\n\n/**\n * 取共享播放器，没有时建立一个默认的。\n * 播放器本身很轻，音频上下文要等第一次真正发声才建立，取用后不使用不产生开销。\n */\nexport function getSoundPlayer(): SoundPlayer {\n  return shared.getPlayer()\n}\n\n/** 换为自行配置的播放器（更换主题、接入用户偏好）。自动建立的播放器会被销毁。 */\nexport function setSoundPlayer(player: SoundPlayer): void {\n  shared.setPlayer(player)\n}\n\nexport interface ToastSoundOptions extends Omit<ToastSoundServiceOptions, 'player' | 'attachUnlock'> {\n  /** 使用哪个播放器，默认共享播放器。 */\n  player?: SoundPlayer\n}\n\n/**\n * 为命令式通知服务配上声音：入队即发声，调用点无需修改。\n *\n * ```ts\n * export const toast = withToastSound(createToastService())\n * toast.success('已保存') // 视觉 + 听觉\n * ```\n *\n * `update` 只在类型改变且新类型不是 loading 时发声：上传完成时应当发声，\n * 修改文案不应发声。\n */\nexport function withToastSound(service: ToastService, options: ToastSoundOptions = {}): ToastService {\n  return withToastSoundService(service, {\n    ...options,\n    player: options.player ?? getSoundPlayer(),\n    attachUnlock: attachDocumentSoundUnlock,\n  })\n}\n\nexport interface DialogSoundOptions extends Omit<DialogSoundServiceOptions, 'player' | 'attachUnlock'> {\n  player?: SoundPlayer\n}\n\n/**\n * 为命令式确认框服务配上声音：弹出时发声，关闭时不发声\n * （按钮的按下声与随后的通知已经表明了结果）。\n */\nexport function withDialogSound(service: DialogService, options: DialogSoundOptions = {}): DialogService {\n  return withDialogSoundService(service, {\n    ...options,\n    player: options.player ?? getSoundPlayer(),\n    attachUnlock: attachDocumentSoundUnlock,\n  })\n}\n\nexport interface SoundDirectiveOptions extends SharedSoundPressOptions {}\n\nexport type SoundDirectiveValue = string | SoundDirectiveOptions | undefined\n\nconst bound = new WeakMap<HTMLElement, { handler: () => void, options: ReturnType<typeof resolveSoundPressOptions> }>()\n\n/**\n * `v-sound`：为任意元素按下时配一声。\n *\n * 挂在 click 上而不是 pointerdown：键盘按 Enter / Space 激活也要发声，\n * 而按下后拖开取消的操作不应发声。\n *\n * ```vue\n * <XhButton v-sound>提交</XhButton>\n * <XhButton v-sound=\"'send'\">发送</XhButton>\n * <div v-sound=\"{ sound: 'toggle-on', volume: 0.6 }\" />\n * ```\n */\nexport const vSound: Directive<HTMLElement, SoundDirectiveValue> = {\n  mounted(el, binding) {\n    const entry = {\n      options: resolveSoundPressOptions(binding.value),\n      handler: (): void => {\n        if (isSoundTargetDisabled(el))\n          return\n        const { sound, volume, player } = entry.options\n        ;(player ?? getSoundPlayer()).play(sound, volume === undefined ? undefined : { volume })\n      },\n    }\n    bound.set(el, entry)\n    el.addEventListener('click', entry.handler)\n  },\n  updated(el, binding) {\n    const entry = bound.get(el)\n    if (entry)\n      entry.options = resolveSoundPressOptions(binding.value)\n  },\n  unmounted(el) {\n    const entry = bound.get(el)\n    if (entry)\n      el.removeEventListener('click', entry.handler)\n    bound.delete(el)\n  },\n}\n"],"mappings":";;AAuBA,MAAM,SAAS,kCAAkC;;;;;AAMjD,SAAgB,iBAA8B;CAC5C,OAAO,OAAO,UAAU;AAC1B;;AAGA,SAAgB,eAAe,QAA2B;CACxD,OAAO,UAAU,MAAM;AACzB;;;;;;;;;;;;AAkBA,SAAgB,eAAe,SAAuB,UAA6B,CAAC,GAAiB;CACnG,OAAO,sBAAsB,SAAS;EACpC,GAAG;EACH,QAAQ,QAAQ,UAAU,eAAe;EACzC,cAAc;CAChB,CAAC;AACH;;;;;AAUA,SAAgB,gBAAgB,SAAwB,UAA8B,CAAC,GAAkB;CACvG,OAAO,uBAAuB,SAAS;EACrC,GAAG;EACH,QAAQ,QAAQ,UAAU,eAAe;EACzC,cAAc;CAChB,CAAC;AACH;AAMA,MAAM,wBAAQ,IAAI,QAAoG;;;;;;;;;;;;;AActH,MAAa,SAAsD;CACjE,QAAQ,IAAI,SAAS;EACnB,MAAM,QAAQ;GACZ,SAAS,yBAAyB,QAAQ,KAAK;GAC/C,eAAqB;IACnB,IAAI,sBAAsB,EAAE,GAC1B;IACF,MAAM,EAAE,OAAO,QAAQ,WAAW,MAAM;IACvC,CAAC,UAAU,eAAe,EAAA,CAAG,KAAK,OAAO,WAAW,KAAA,IAAY,KAAA,IAAY,EAAE,OAAO,CAAC;GACzF;EACF;EACA,MAAM,IAAI,IAAI,KAAK;EACnB,GAAG,iBAAiB,SAAS,MAAM,OAAO;CAC5C;CACA,QAAQ,IAAI,SAAS;EACnB,MAAM,QAAQ,MAAM,IAAI,EAAE;EAC1B,IAAI,OACF,MAAM,UAAU,yBAAyB,QAAQ,KAAK;CAC1D;CACA,UAAU,IAAI;EACZ,MAAM,QAAQ,MAAM,IAAI,EAAE;EAC1B,IAAI,OACF,GAAG,oBAAoB,SAAS,MAAM,OAAO;EAC/C,MAAM,OAAO,EAAE;CACjB;AACF"}
+{"version":3,"file":"sound.js","names":[],"sources":["../src/sound.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// @xihan-ui/vue/sound —— 声音层的 Vue 适配。\n//\n// 与主入口分开：@xihan-ui/sound 是可选 peer，不用音效的应用不会因为装了本包\n// 而多出一个音频引擎。用之前先装 @xihan-ui/sound。\n//\n// 三种用法，从轻到重：\n//   v-sound          给任意元素或组件按下时配一声，一个字都不用改组件\n//   withNotificationSound  给命令式通知服务配上声音，调用点一行都不用改\n//   getSoundPlayer   自己拿播放器，接偏好开关或调音面板\n\nimport type { DialogSoundServiceOptions, NotificationSoundServiceOptions, NotificationSoundServicePort, SoundPressOptions as SharedSoundPressOptions, SoundPlayer } from '@xihan-ui/sound'\nimport type { Directive } from 'vue'\nimport type { DialogService } from './services/dialog-service'\nimport { attachDocumentSoundUnlock, createSharedSoundPlayerController, isSoundTargetDisabled, resolveSoundPressOptions, withDialogSoundService, withNotificationSoundService } from '@xihan-ui/sound'\n\nexport type { DialogSoundKey, NotificationSoundKey, SoundChoice } from '@xihan-ui/sound'\n\nconst shared = createSharedSoundPlayerController()\n\n/**\n * 取共享播放器，没有时建立一个默认的。\n * 播放器本身很轻，音频上下文要等第一次真正发声才建立，取用后不使用不产生开销。\n */\nexport function getSoundPlayer(): SoundPlayer {\n  return shared.getPlayer()\n}\n\n/** 换为自行配置的播放器（更换主题、接入用户偏好）。自动建立的播放器会被销毁。 */\nexport function setSoundPlayer(player: SoundPlayer): void {\n  shared.setPlayer(player)\n}\n\nexport interface NotificationSoundOptions extends Omit<NotificationSoundServiceOptions, 'player' | 'attachUnlock'> {\n  /** 使用哪个播放器，默认共享播放器。 */\n  player?: SoundPlayer\n}\n\n/**\n * 为命令式通知服务配上声音：入队即发声，调用点无需修改。\n *\n * ```ts\n * export const notify = withNotificationSound(createNotificationService())\n * notify.success('已保存') // 视觉 + 听觉\n * ```\n *\n * `update` 只在类型改变且新类型不是 loading 时发声：上传完成时应当发声，\n * 修改文案不应发声。\n */\nexport function withNotificationSound<Service extends NotificationSoundServicePort>(service: Service, options: NotificationSoundOptions = {}): Service {\n  return withNotificationSoundService(service, {\n    ...options,\n    player: options.player ?? getSoundPlayer(),\n    attachUnlock: attachDocumentSoundUnlock,\n  })\n}\n\nexport interface DialogSoundOptions extends Omit<DialogSoundServiceOptions, 'player' | 'attachUnlock'> {\n  player?: SoundPlayer\n}\n\n/**\n * 为命令式确认框服务配上声音：弹出时发声，关闭时不发声\n * （按钮的按下声与随后的通知已经表明了结果）。\n */\nexport function withDialogSound(service: DialogService, options: DialogSoundOptions = {}): DialogService {\n  return withDialogSoundService(service, {\n    ...options,\n    player: options.player ?? getSoundPlayer(),\n    attachUnlock: attachDocumentSoundUnlock,\n  })\n}\n\nexport interface SoundDirectiveOptions extends SharedSoundPressOptions {}\n\nexport type SoundDirectiveValue = string | SoundDirectiveOptions | undefined\n\nconst bound = new WeakMap<HTMLElement, { handler: () => void, options: ReturnType<typeof resolveSoundPressOptions> }>()\n\n/**\n * `v-sound`：为任意元素按下时配一声。\n *\n * 挂在 click 上而不是 pointerdown：键盘按 Enter / Space 激活也要发声，\n * 而按下后拖开取消的操作不应发声。\n *\n * ```vue\n * <XhButton v-sound>提交</XhButton>\n * <XhButton v-sound=\"'send'\">发送</XhButton>\n * <div v-sound=\"{ sound: 'toggle-on', volume: 0.6 }\" />\n * ```\n */\nexport const vSound: Directive<HTMLElement, SoundDirectiveValue> = {\n  mounted(el, binding) {\n    const entry = {\n      options: resolveSoundPressOptions(binding.value),\n      handler: (): void => {\n        if (isSoundTargetDisabled(el))\n          return\n        const { sound, volume, player } = entry.options\n        ;(player ?? getSoundPlayer()).play(sound, volume === undefined ? undefined : { volume })\n      },\n    }\n    bound.set(el, entry)\n    el.addEventListener('click', entry.handler)\n  },\n  updated(el, binding) {\n    const entry = bound.get(el)\n    if (entry)\n      entry.options = resolveSoundPressOptions(binding.value)\n  },\n  unmounted(el) {\n    const entry = bound.get(el)\n    if (entry)\n      el.removeEventListener('click', entry.handler)\n    bound.delete(el)\n  },\n}\n"],"mappings":";;AAsBA,MAAM,SAAS,kCAAkC;;;;;AAMjD,SAAgB,iBAA8B;CAC5C,OAAO,OAAO,UAAU;AAC1B;;AAGA,SAAgB,eAAe,QAA2B;CACxD,OAAO,UAAU,MAAM;AACzB;;;;;;;;;;;;AAkBA,SAAgB,sBAAoE,SAAkB,UAAoC,CAAC,GAAY;CACrJ,OAAO,6BAA6B,SAAS;EAC3C,GAAG;EACH,QAAQ,QAAQ,UAAU,eAAe;EACzC,cAAc;CAChB,CAAC;AACH;;;;;AAUA,SAAgB,gBAAgB,SAAwB,UAA8B,CAAC,GAAkB;CACvG,OAAO,uBAAuB,SAAS;EACrC,GAAG;EACH,QAAQ,QAAQ,UAAU,eAAe;EACzC,cAAc;CAChB,CAAC;AACH;AAMA,MAAM,wBAAQ,IAAI,QAAoG;;;;;;;;;;;;;AActH,MAAa,SAAsD;CACjE,QAAQ,IAAI,SAAS;EACnB,MAAM,QAAQ;GACZ,SAAS,yBAAyB,QAAQ,KAAK;GAC/C,eAAqB;IACnB,IAAI,sBAAsB,EAAE,GAC1B;IACF,MAAM,EAAE,OAAO,QAAQ,WAAW,MAAM;IACvC,CAAC,UAAU,eAAe,EAAA,CAAG,KAAK,OAAO,WAAW,KAAA,IAAY,KAAA,IAAY,EAAE,OAAO,CAAC;GACzF;EACF;EACA,MAAM,IAAI,IAAI,KAAK;EACnB,GAAG,iBAAiB,SAAS,MAAM,OAAO;CAC5C;CACA,QAAQ,IAAI,SAAS;EACnB,MAAM,QAAQ,MAAM,IAAI,EAAE;EAC1B,IAAI,OACF,MAAM,UAAU,yBAAyB,QAAQ,KAAK;CAC1D;CACA,UAAU,IAAI;EACZ,MAAM,QAAQ,MAAM,IAAI,EAAE;EAC1B,IAAI,OACF,GAAG,oBAAoB,SAAS,MAAM,OAAO;EAC/C,MAAM,OAAO,EAAE;CACjB;AACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xihan-ui/vue",
   "type": "module",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "XiHan.UI Vue adapter — components, composables, machine runtime.",
   "author": {
     "name": "XiHanFun",
@@ -59,9 +59,9 @@
   },
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@xihan-ui/backgrounds": "^2.0.0",
-    "@xihan-ui/code-highlight": "^2.0.0",
-    "@xihan-ui/sound": "^2.0.0"
+    "@xihan-ui/backgrounds": "^3.0.0",
+    "@xihan-ui/code-highlight": "^3.0.0",
+    "@xihan-ui/sound": "^3.0.0"
   },
   "peerDependenciesMeta": {
     "@xihan-ui/backgrounds": {
@@ -75,11 +75,12 @@
     }
   },
   "dependencies": {
-    "@xihan-ui/core": "^2.0.0",
-    "@xihan-ui/headless": "^2.0.0",
-    "@xihan-ui/motion": "^2.0.0",
-    "@xihan-ui/pointer": "^2.0.0",
-    "@xihan-ui/position": "^2.0.0"
+    "@xihan-ui/core": "^3.0.0",
+    "@xihan-ui/headless": "^3.0.0",
+    "@xihan-ui/motion": "^3.0.0",
+    "@xihan-ui/pointer": "^3.0.0",
+    "@xihan-ui/position": "^3.0.0",
+    "@xihan-ui/viz": "^3.0.0"
   },
   "devDependencies": {
     "@vitest/browser": "^4.1.11",
@@ -89,13 +90,13 @@
     "playwright": "^1.62.0",
     "vitest": "^4.1.11",
     "vue": "^3.5.40",
-    "@xihan-ui/backgrounds": "2.0.0",
+    "@xihan-ui/backgrounds": "3.0.0",
     "@xihan-ui/build": "0.0.0",
-    "@xihan-ui/code-highlight": "2.0.0",
-    "@xihan-ui/sound": "2.0.0",
-    "@xihan-ui/styles": "2.0.0",
+    "@xihan-ui/code-highlight": "3.0.0",
+    "@xihan-ui/sound": "3.0.0",
+    "@xihan-ui/styles": "3.0.0",
     "@xihan-ui/testing": "0.0.0",
-    "@xihan-ui/tokens": "2.0.0",
+    "@xihan-ui/tokens": "3.0.0",
     "@xihan-ui/tsconfig": "0.0.0"
   },
   "scripts": {

package/dist/components/gradient-text/gradient-text.d.ts

@@ -1,36 +0,0 @@
-import { PropType } from "vue";
-import { Tone } from "@xihan-ui/core";
-import { GradientTextDirection } from "@xihan-ui/headless";
-//#region src/components/gradient-text/gradient-text.d.ts
-declare const XhGradientText: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-  from: {
-    type: StringConstructor;
-  };
-  to: {
-    type: StringConstructor;
-  };
-  direction: {
-    type: PropType<GradientTextDirection>;
-  };
-  tone: {
-    type: PropType<Tone>;
-  };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-  [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-  from: {
-    type: StringConstructor;
-  };
-  to: {
-    type: StringConstructor;
-  };
-  direction: {
-    type: PropType<GradientTextDirection>;
-  };
-  tone: {
-    type: PropType<Tone>;
-  };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-//#endregion
-export { XhGradientText };
-//# sourceMappingURL=gradient-text.d.ts.map

package/dist/components/gradient-text/gradient-text.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"gradient-text.d.ts","names":[],"sources":["../../../src/components/gradient-text/gradient-text.ts"],"mappings":";;;;cAca,8BAAc,8BAAA;;;;;;;;IAMM,MAAA,SAAS;;;IACd,MAAA,SAAS;;;;;;;;;;;;IADJ,MAAA,SAAS;;;IACd,MAAA,SAAS;;MASnC,oDAAA"}

package/dist/components/gradient-text/gradient-text.js

@@ -1,20 +0,0 @@
-import { vueNormalize } from "../../runtime/normalize-props.js";
-import { defineComponent, h } from "vue";
-import { connectGradientText } from "@xihan-ui/headless";
-//#region src/components/gradient-text/gradient-text.ts
-const XhGradientText = defineComponent({
-	name: "XhGradientText",
-	props: {
-		from: { type: String },
-		to: { type: String },
-		direction: { type: String },
-		tone: { type: String }
-	},
-	setup(props, { slots }) {
-		return () => h("span", connectGradientText(props, vueNormalize).getRootProps(), slots.default?.());
-	}
-});
-//#endregion
-export { XhGradientText };
-
-//# sourceMappingURL=gradient-text.js.map

package/dist/components/gradient-text/gradient-text.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"gradient-text.js","names":[],"sources":["../../../src/components/gradient-text/gradient-text.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// 提供 gradient text 相关实现。\n\nimport type { Tone } from '@xihan-ui/core'\nimport type { GradientTextDirection, GradientTextProps } from '@xihan-ui/headless'\nimport type { PropType } from 'vue'\nimport { connectGradientText } from '@xihan-ui/headless'\nimport { defineComponent, h } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\n\nexport const XhGradientText = defineComponent({\n  name: 'XhGradientText',\n  // 有 connect 兜底的 prop：普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    from: { type: String },\n    to: { type: String },\n    direction: { type: String as PropType<GradientTextDirection> },\n    tone: { type: String as PropType<Tone> },\n  },\n  setup(props, { slots }) {\n    return () => h(\n      'span',\n      connectGradientText(props as GradientTextProps, vueNormalize).getRootProps() as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n"],"mappings":";;;;AAcA,MAAa,iBAAiB,gBAAgB;CAC5C,MAAM;CAEN,OAAO;EACL,MAAM,EAAE,MAAM,OAAO;EACrB,IAAI,EAAE,MAAM,OAAO;EACnB,WAAW,EAAE,MAAM,OAA0C;EAC7D,MAAM,EAAE,MAAM,OAAyB;CACzC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,aAAa,EACX,QACA,oBAAoB,OAA4B,YAAY,CAAC,CAAC,aAAa,GAC3E,MAAM,UAAU,CAClB;CACF;AACF,CAAC"}

package/dist/components/icon-wrapper/icon-wrapper.d.ts

@@ -1,29 +0,0 @@
-import { PropType } from "vue";
-import { ActionVariant, Size, Tone } from "@xihan-ui/core";
-//#region src/components/icon-wrapper/icon-wrapper.d.ts
-declare const XhIconWrapper: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-  variant: {
-    type: PropType<ActionVariant>;
-  };
-  tone: {
-    type: PropType<Tone>;
-  };
-  size: {
-    type: PropType<Size>;
-  };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-  [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-  variant: {
-    type: PropType<ActionVariant>;
-  };
-  tone: {
-    type: PropType<Tone>;
-  };
-  size: {
-    type: PropType<Size>;
-  };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-//#endregion
-export { XhIconWrapper };
-//# sourceMappingURL=icon-wrapper.d.ts.map

package/dist/components/icon-wrapper/icon-wrapper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-wrapper.d.ts","names":[],"sources":["../../../src/components/icon-wrapper/icon-wrapper.ts"],"mappings":";;;cAea,6BAAa,8BAAA;;IAIK,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;;;;IAFN,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;MASnC,oDAAA"}