@xihan-ui/vue 1.0.0-alpha.3 → 1.0.0

package/dist/backgrounds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"backgrounds.d.ts","names":[],"sources":["../src/backgrounds.ts"],"mappings":";;;UA4BiB;EACf,QAAQ;EACR,SAAS,eAAe;EACxB,UAAU;;EAEV;;EAEA;;EAEA;;EAEA;;UAGe;WACN,SAAS,WAAW;;;;;EAK7B,SAAS,SAAS;EAClB,YAAY,QAAQ;EACpB,YAAY,OAAO,eAAe;EAClC,WAAW,OAAO,YAAY,UAAU;EACxC;EACA;EACA;;;;;;;;;iBAUc,cAAc,SAAS,uBAAuB;;;;;cAwCjD,4BAAY,8BAAA;;IAGe,MAAA,SAAS;;;;IACnB,MAAA,SAAS,eAAe;;;;IACvB,MAAA,SAAS;;;;;IAEX,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAJE,MAAA,SAAS;;;;IACnB,MAAA,SAAS,eAAe;;;;IACvB,MAAA,SAAS;;;;;IAEX,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAoFpC;KAEU,2BAA2B,4BAA4B;;;;;;;;;;;cAoBtD,aAAa,UAAU,aAAa"}
+{"version":3,"file":"backgrounds.d.ts","names":[],"sources":["../src/backgrounds.ts"],"mappings":";;;UA4BiB;EACf,QAAQ;EACR,SAAS,eAAe;EACxB,UAAU;;EAEV;;EAEA;;EAEA;;EAEA;;UAGe;WACN,SAAS,WAAW;;;;;EAK7B,SAAS,SAAS;EAClB,YAAY,QAAQ;EACpB,YAAY,OAAO,eAAe;EAClC,WAAW,OAAO,YAAY,UAAU;EACxC;EACA;EACA;;;;;;;;;iBAUc,cAAc,SAAS,uBAAuB;;;;;cAwCjD,4BAAY,8BAAA;;IAGe,MAAA,SAAS;;;;IACnB,MAAA,SAAS,eAAe;;;;IACvB,MAAA,SAAS;;;;;IAEX,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAJE,MAAA,SAAS;;;;IACnB,MAAA,SAAS,eAAe;;;;IACvB,MAAA,SAAS;;;;;IAEX,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAuFpC;KAEU,2BAA2B,4BAA4B;;;;;;;;;;;cAoBtD,aAAa,UAAU,aAAa"}

package/dist/backgrounds.js

@@ -141,11 +141,7 @@ const XhBackground = defineComponent({
 		expose(api);
 		return () => {
 			sync();
-			return h(props.as, {
-				"ref": mount,
-				"data-scope": "background",
-				"data-part": "root"
-			}, slots.default?.());
+			return h(props.as, { ref: mount }, slots.default?.());
 		};
 	}
 });

package/dist/backgrounds.js.map

@@ -1 +1 @@
-{"version":3,"file":"backgrounds.js","names":[],"sources":["../src/backgrounds.ts"],"sourcesContent":["// @xihan-ui/vue/backgrounds —— 视觉层的 Vue 适配。\n//\n// 与主入口分开：@xihan-ui/backgrounds 是可选 peer，不用视觉效果的应用不会因为装了本包\n// 而多出一个 WebGL 引擎。用之前先装 @xihan-ui/backgrounds。\n//\n// 三种用法，从轻到重：\n//   v-background   给任意元素或组件的根元素铺一层背景，一个字都不用改组件\n//   XhBackground   独立的视觉组件，插槽内容浮在效果之上\n//   useBackground  自己拿画面实例，接自定义调度或调参面板\n\nimport type {\n  BackgroundEffect,\n  BackgroundQuality,\n  BackgroundSurface,\n  MorphOptions,\n  ParamValue,\n  PointCloud,\n} from '@xihan-ui/backgrounds'\nimport type { Directive, PropType, ShallowRef, VNodeRef } from 'vue'\nimport { createBackgroundSurface } from '@xihan-ui/backgrounds'\nimport {\n  defineComponent,\n  getCurrentScope,\n  h,\n  onScopeDispose,\n  shallowRef,\n} from 'vue'\n\nexport interface UseBackgroundOptions {\n  effect: BackgroundEffect | string\n  params?: Record<string, ParamValue>\n  quality?: BackgroundQuality\n  /** 自动绑定指针事件，默认 true。 */\n  pointer?: boolean\n  /** 创建后立即播放，默认 true。 */\n  autoplay?: boolean\n  /** 系统开启减弱动态效果时冻结时间轴，默认 true。 */\n  respectReducedMotion?: boolean\n  /** 滚出视口时暂停绘制，默认 true。 */\n  pauseOffscreen?: boolean\n}\n\nexport interface UseBackgroundReturn {\n  readonly surface: ShallowRef<BackgroundSurface | null>\n  /**\n   * 挂载点。直接当模板 ref 用：`<div :ref=\"visual.attach\">`，\n   * 渲染器会在元素进出 DOM 时把元素或 null 交进来。\n   */\n  attach: (element: Element | null) => void\n  setEffect: (effect: BackgroundEffect | string) => void\n  setParams: (patch: Record<string, ParamValue>) => void\n  setCloud: (cloud: PointCloud, options?: MorphOptions) => void\n  play: () => void\n  pause: () => void\n  destroy: () => void\n}\n\n/**\n * 建一张受 Vue 生命周期管理的视觉画面。\n *\n * 用**函数式 ref** 而不是监听一个模板 ref：元素由渲染器直接交到手上，\n * 不经过响应式与调度队列，因此不受 flush 时序影响，元素换了也一定收得到。\n * 组件卸载时自动销毁；在 setup 之外调用则需自己调 destroy。\n */\nexport function useBackground(options: UseBackgroundOptions): UseBackgroundReturn {\n  const surface = shallowRef<BackgroundSurface | null>(null)\n  // 元素没换就不动画面：函数式 ref 每次 patch 都会被再调一遍，\n  // 不挡住的话每渲染一帧就销毁重建一次，画面永远停在创建时那份参数上\n  let attached: HTMLElement | null = null\n\n  function attach(element: Element | null): void {\n    const el = element instanceof HTMLElement ? element : null\n    if (el === attached)\n      return\n    attached = el\n    surface.value?.destroy()\n    surface.value = el === null ? null : createBackgroundSurface(el, options)\n  }\n\n  function destroy(): void {\n    attached = null\n    surface.value?.destroy()\n    surface.value = null\n  }\n\n  if (getCurrentScope())\n    onScopeDispose(destroy)\n\n  return {\n    surface,\n    attach,\n    setEffect: (effect): void => surface.value?.setEffect(effect),\n    setParams: (patch): void => surface.value?.setParams(patch),\n    setCloud: (cloud, morph): void => surface.value?.setCloud(cloud, morph),\n    play: (): void => surface.value?.play(),\n    pause: (): void => surface.value?.pause(),\n    destroy,\n  }\n}\n\n/**\n * `<XhBackground>` —— 独立视觉组件。默认插槽的内容浮在效果之上；\n * 画布铺满根元素且 pointer-events: none，不会挡住插槽里的交互。\n */\nexport const XhBackground = defineComponent({\n  name: 'XhBackground',\n  props: {\n    effect: { type: [Object, String] as PropType<BackgroundEffect | string>, required: true },\n    params: { type: Object as PropType<Record<string, ParamValue>>, default: undefined },\n    quality: { type: String as PropType<BackgroundQuality>, default: undefined },\n    /** 数据驱动点云。效果的粒子通道是 cloud 模式时才有意义。 */\n    cloud: { type: Object as PropType<PointCloud | null>, default: null },\n    /** 换点云时的形变时长（秒）。 */\n    morphDuration: { type: Number, default: undefined },\n    pointer: { type: Boolean, default: true },\n    autoplay: { type: Boolean, default: true },\n    respectReducedMotion: { type: Boolean, default: true },\n    pauseOffscreen: { type: Boolean, default: true },\n    /** 渲染成什么标签。 */\n    as: { type: String, default: 'div' },\n  },\n  setup(props, { slots, expose }) {\n    const api = useBackground({\n      effect: props.effect,\n      params: props.params,\n      quality: props.quality,\n      pointer: props.pointer,\n      autoplay: props.autoplay,\n      respectReducedMotion: props.respectReducedMotion,\n      pauseOffscreen: props.pauseOffscreen,\n    })\n\n    let appliedEffect: BackgroundEffect | string | undefined\n    let appliedQuality: BackgroundQuality | undefined\n    let appliedCloud: PointCloud | null = null\n    let appliedAutoplay = props.autoplay\n\n    /**\n     * 把当前 props 推到画面上。在渲染函数里调用而不是挂 watcher：\n     * 渲染函数一定会随 props 变化重跑，且这里读到的参数值同时建立了依赖追踪，\n     * 调用方原地改参数对象里的某一项也收得到。\n     */\n    function sync(): void {\n      const surface = api.surface.value\n      if (surface === null)\n        return\n      if (props.effect !== appliedEffect) {\n        surface.setEffect(props.effect)\n        appliedEffect = props.effect\n      }\n      if (props.quality !== undefined && props.quality !== appliedQuality) {\n        surface.setQuality(props.quality)\n        appliedQuality = props.quality\n      }\n      if (props.params !== undefined)\n        surface.setParams(props.params)\n      if (props.cloud && props.cloud !== appliedCloud) {\n        // 第一份点云直接就位，之后的换形态才走过渡\n        surface.setCloud(props.cloud, { duration: appliedCloud === null ? 0 : props.morphDuration })\n        appliedCloud = props.cloud\n      }\n      if (props.autoplay !== appliedAutoplay) {\n        if (props.autoplay)\n          surface.play()\n        else surface.pause()\n        appliedAutoplay = props.autoplay\n      }\n    }\n\n    // 签名照 VNodeRef 的函数式 ref 写：渲染器在元素进出 DOM 时把元素或 null 交进来。\n    // 同一个元素会被反复交进来，attach 对此幂等；只有真换了画面才重置记账。\n    const mount: VNodeRef = (element): void => {\n      const previous = api.surface.value\n      api.attach(element instanceof HTMLElement ? element : null)\n      const current = api.surface.value\n      if (current === previous || current === null)\n        return\n      appliedEffect = props.effect\n      appliedQuality = props.quality\n      appliedCloud = null\n      appliedAutoplay = props.autoplay\n      sync()\n    }\n\n    expose(api)\n\n    return () => {\n      sync()\n      return h(\n        props.as,\n        { 'ref': mount, 'data-scope': 'background', 'data-part': 'root' },\n        slots.default?.(),\n      )\n    }\n  },\n})\n\nexport type BackgroundDirectiveValue = BackgroundEffect | string | UseBackgroundOptions\n\nfunction toOptions(value: BackgroundDirectiveValue): UseBackgroundOptions {\n  if (typeof value === 'string')\n    return { effect: value }\n  return 'effect' in value ? value : { effect: value }\n}\n\nconst mounted = new WeakMap<HTMLElement, { surface: BackgroundSurface, effect: BackgroundEffect | string }>()\n\n/**\n * `v-background` —— 给任意元素铺一层视觉背景。\n *\n * 用在组件上时，Vue 会把指令落到该组件的单一根元素上，所以给现成组件加背景不需要改组件：\n *\n * ```vue\n * <XhButton v-background=\"fluidEffect\">提交</XhButton>\n * <div v-background=\"{ effect: 'aurora', params: { speed: 1.6 } }\" />\n * ```\n */\nexport const vBackground: Directive<HTMLElement, BackgroundDirectiveValue> = {\n  mounted(el, binding) {\n    const options = toOptions(binding.value)\n    mounted.set(el, { surface: createBackgroundSurface(el, options), effect: options.effect })\n  },\n  updated(el, binding) {\n    const entry = mounted.get(el)\n    if (entry === undefined)\n      return\n    const options = toOptions(binding.value)\n    if (options.effect !== entry.effect) {\n      entry.surface.setEffect(options.effect)\n      entry.effect = options.effect\n    }\n    if (options.params !== undefined)\n      entry.surface.setParams(options.params)\n  },\n  unmounted(el) {\n    mounted.get(el)?.surface.destroy()\n    mounted.delete(el)\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"backgrounds.js","names":[],"sources":["../src/backgrounds.ts"],"sourcesContent":["// @xihan-ui/vue/backgrounds —— 视觉层的 Vue 适配。\n//\n// 与主入口分开：@xihan-ui/backgrounds 是可选 peer，不用视觉效果的应用不会因为装了本包\n// 而多出一个 WebGL 引擎。用之前先装 @xihan-ui/backgrounds。\n//\n// 三种用法，从轻到重：\n//   v-background   给任意元素或组件的根元素铺一层背景，一个字都不用改组件\n//   XhBackground   独立的视觉组件，插槽内容浮在效果之上\n//   useBackground  自己拿画面实例，接自定义调度或调参面板\n\nimport type {\n  BackgroundEffect,\n  BackgroundQuality,\n  BackgroundSurface,\n  MorphOptions,\n  ParamValue,\n  PointCloud,\n} from '@xihan-ui/backgrounds'\nimport type { Directive, PropType, ShallowRef, VNodeRef } from 'vue'\nimport { createBackgroundSurface } from '@xihan-ui/backgrounds'\nimport {\n  defineComponent,\n  getCurrentScope,\n  h,\n  onScopeDispose,\n  shallowRef,\n} from 'vue'\n\nexport interface UseBackgroundOptions {\n  effect: BackgroundEffect | string\n  params?: Record<string, ParamValue>\n  quality?: BackgroundQuality\n  /** 自动绑定指针事件，默认 true。 */\n  pointer?: boolean\n  /** 创建后立即播放，默认 true。 */\n  autoplay?: boolean\n  /** 系统开启减弱动态效果时冻结时间轴，默认 true。 */\n  respectReducedMotion?: boolean\n  /** 滚出视口时暂停绘制，默认 true。 */\n  pauseOffscreen?: boolean\n}\n\nexport interface UseBackgroundReturn {\n  readonly surface: ShallowRef<BackgroundSurface | null>\n  /**\n   * 挂载点。直接当模板 ref 用：`<div :ref=\"visual.attach\">`，\n   * 渲染器会在元素进出 DOM 时把元素或 null 交进来。\n   */\n  attach: (element: Element | null) => void\n  setEffect: (effect: BackgroundEffect | string) => void\n  setParams: (patch: Record<string, ParamValue>) => void\n  setCloud: (cloud: PointCloud, options?: MorphOptions) => void\n  play: () => void\n  pause: () => void\n  destroy: () => void\n}\n\n/**\n * 建一张受 Vue 生命周期管理的视觉画面。\n *\n * 用**函数式 ref** 而不是监听一个模板 ref：元素由渲染器直接交到手上，\n * 不经过响应式与调度队列，因此不受 flush 时序影响，元素换了也一定收得到。\n * 组件卸载时自动销毁；在 setup 之外调用则需自己调 destroy。\n */\nexport function useBackground(options: UseBackgroundOptions): UseBackgroundReturn {\n  const surface = shallowRef<BackgroundSurface | null>(null)\n  // 元素没换就不动画面：函数式 ref 每次 patch 都会被再调一遍，\n  // 不挡住的话每渲染一帧就销毁重建一次，画面永远停在创建时那份参数上\n  let attached: HTMLElement | null = null\n\n  function attach(element: Element | null): void {\n    const el = element instanceof HTMLElement ? element : null\n    if (el === attached)\n      return\n    attached = el\n    surface.value?.destroy()\n    surface.value = el === null ? null : createBackgroundSurface(el, options)\n  }\n\n  function destroy(): void {\n    attached = null\n    surface.value?.destroy()\n    surface.value = null\n  }\n\n  if (getCurrentScope())\n    onScopeDispose(destroy)\n\n  return {\n    surface,\n    attach,\n    setEffect: (effect): void => surface.value?.setEffect(effect),\n    setParams: (patch): void => surface.value?.setParams(patch),\n    setCloud: (cloud, morph): void => surface.value?.setCloud(cloud, morph),\n    play: (): void => surface.value?.play(),\n    pause: (): void => surface.value?.pause(),\n    destroy,\n  }\n}\n\n/**\n * `<XhBackground>` —— 独立视觉组件。默认插槽的内容浮在效果之上；\n * 画布铺满根元素且 pointer-events: none，不会挡住插槽里的交互。\n */\nexport const XhBackground = defineComponent({\n  name: 'XhBackground',\n  props: {\n    effect: { type: [Object, String] as PropType<BackgroundEffect | string>, required: true },\n    params: { type: Object as PropType<Record<string, ParamValue>>, default: undefined },\n    quality: { type: String as PropType<BackgroundQuality>, default: undefined },\n    /** 数据驱动点云。效果的粒子通道是 cloud 模式时才有意义。 */\n    cloud: { type: Object as PropType<PointCloud | null>, default: null },\n    /** 换点云时的形变时长（秒）。 */\n    morphDuration: { type: Number, default: undefined },\n    pointer: { type: Boolean, default: true },\n    autoplay: { type: Boolean, default: true },\n    respectReducedMotion: { type: Boolean, default: true },\n    pauseOffscreen: { type: Boolean, default: true },\n    /** 渲染成什么标签。 */\n    as: { type: String, default: 'div' },\n  },\n  setup(props, { slots, expose }) {\n    const api = useBackground({\n      effect: props.effect,\n      params: props.params,\n      quality: props.quality,\n      pointer: props.pointer,\n      autoplay: props.autoplay,\n      respectReducedMotion: props.respectReducedMotion,\n      pauseOffscreen: props.pauseOffscreen,\n    })\n\n    let appliedEffect: BackgroundEffect | string | undefined\n    let appliedQuality: BackgroundQuality | undefined\n    let appliedCloud: PointCloud | null = null\n    let appliedAutoplay = props.autoplay\n\n    /**\n     * 把当前 props 推到画面上。在渲染函数里调用而不是挂 watcher：\n     * 渲染函数一定会随 props 变化重跑，且这里读到的参数值同时建立了依赖追踪，\n     * 调用方原地改参数对象里的某一项也收得到。\n     */\n    function sync(): void {\n      const surface = api.surface.value\n      if (surface === null)\n        return\n      if (props.effect !== appliedEffect) {\n        surface.setEffect(props.effect)\n        appliedEffect = props.effect\n      }\n      if (props.quality !== undefined && props.quality !== appliedQuality) {\n        surface.setQuality(props.quality)\n        appliedQuality = props.quality\n      }\n      if (props.params !== undefined)\n        surface.setParams(props.params)\n      if (props.cloud && props.cloud !== appliedCloud) {\n        // 第一份点云直接就位，之后的换形态才走过渡\n        surface.setCloud(props.cloud, { duration: appliedCloud === null ? 0 : props.morphDuration })\n        appliedCloud = props.cloud\n      }\n      if (props.autoplay !== appliedAutoplay) {\n        if (props.autoplay)\n          surface.play()\n        else surface.pause()\n        appliedAutoplay = props.autoplay\n      }\n    }\n\n    // 签名照 VNodeRef 的函数式 ref 写：渲染器在元素进出 DOM 时把元素或 null 交进来。\n    // 同一个元素会被反复交进来，attach 对此幂等；只有真换了画面才重置记账。\n    const mount: VNodeRef = (element): void => {\n      const previous = api.surface.value\n      api.attach(element instanceof HTMLElement ? element : null)\n      const current = api.surface.value\n      if (current === previous || current === null)\n        return\n      appliedEffect = props.effect\n      appliedQuality = props.quality\n      appliedCloud = null\n      appliedAutoplay = props.autoplay\n      sync()\n    }\n\n    expose(api)\n\n    return () => {\n      sync()\n      return h(\n        props.as,\n        // 不发 data-scope：这个宿主不归任何皮肤管，几何全在 features/backgrounds 的内联样式里，\n        // 指令用法（v-background 挂在作者自己的元素上）更是连这层壳都没有。\n        // 发了 scope 而没有对应皮肤，开发模式的皮肤在场探测会给出一条永远修不掉的警告\n        { ref: mount },\n        slots.default?.(),\n      )\n    }\n  },\n})\n\nexport type BackgroundDirectiveValue = BackgroundEffect | string | UseBackgroundOptions\n\nfunction toOptions(value: BackgroundDirectiveValue): UseBackgroundOptions {\n  if (typeof value === 'string')\n    return { effect: value }\n  return 'effect' in value ? value : { effect: value }\n}\n\nconst mounted = new WeakMap<HTMLElement, { surface: BackgroundSurface, effect: BackgroundEffect | string }>()\n\n/**\n * `v-background` —— 给任意元素铺一层视觉背景。\n *\n * 用在组件上时，Vue 会把指令落到该组件的单一根元素上，所以给现成组件加背景不需要改组件：\n *\n * ```vue\n * <XhButton v-background=\"fluidEffect\">提交</XhButton>\n * <div v-background=\"{ effect: 'aurora', params: { speed: 1.6 } }\" />\n * ```\n */\nexport const vBackground: Directive<HTMLElement, BackgroundDirectiveValue> = {\n  mounted(el, binding) {\n    const options = toOptions(binding.value)\n    mounted.set(el, { surface: createBackgroundSurface(el, options), effect: options.effect })\n  },\n  updated(el, binding) {\n    const entry = mounted.get(el)\n    if (entry === undefined)\n      return\n    const options = toOptions(binding.value)\n    if (options.effect !== entry.effect) {\n      entry.surface.setEffect(options.effect)\n      entry.effect = options.effect\n    }\n    if (options.params !== undefined)\n      entry.surface.setParams(options.params)\n  },\n  unmounted(el) {\n    mounted.get(el)?.surface.destroy()\n    mounted.delete(el)\n  },\n}\n"],"mappings":"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"}

package/dist/behavior.d.ts

@@ -0,0 +1,38 @@
+import { MaybeRefOrGetter, Ref } from "vue";
+import { RuntimeConfig } from "@xihan-ui/kernel";
+import { HoverIntentOptions, ScrollMetrics, ScrollTrackerOptions, StickToBottomOptions, StickToBottomState, Typeahead, TypeaheadOptions } from "@xihan-ui/behavior";
+//#region src/behavior.d.ts
+/**
+ * 按需加解滚动锁。锁是引用计数的，多处同时锁不会互相踩。
+ *
+ * 锁哪个元素由 `config.scrollRoot?.()` 决定；宿主把滚动搬进了内容容器
+ * （body 自己不滚）时必须在配置里注入，否则锁到的是不滚的那个。
+ */
+declare function useScrollLock(active: MaybeRefOrGetter<boolean>, config: MaybeRefOrGetter<RuntimeConfig>): void;
+/**
+ * 悬停意图：进触发器停够时长才报开，离开时按安全三角判断是不是正朝浮层去。
+ * 用于自建的悬停浮层，省掉「斜着划向子菜单半路就关了」那类手写延时。
+ */
+declare function useHoverIntent(options: HoverIntentOptions): void;
+/** 观察滚动容器的位置与尺寸，值变了才回调。返回最近一次量到的值。 */
+declare function useScrollTracker(options: ScrollTrackerOptions): Ref<ScrollMetrics | null>;
+interface StickToBottom {
+  /** 当前贴底状态，随原语的回调更新。 */
+  state: Ref<StickToBottomState | null>;
+  /** 滚到底部并恢复粘附，默认 'smooth'，reducedMotion 为真时强制 'instant'。 */
+  scrollToBottom: (behavior?: 'smooth' | 'instant') => void;
+  /** 重新读取 scrollEl / contentEl，节点变了就解绑重绑。 */
+  retarget: () => void;
+}
+/**
+ * 内容增长时保持贴底，用户往上滚过就松手不再跟。
+ *
+ * 两个 getter 里读的是 ref 时自动重绑：原语在建好那一刻就绑一次，
+ * 而 setup 阶段模板 ref 还是 null，不重绑等于没挂上。
+ */
+declare function useStickToBottom(options: StickToBottomOptions): StickToBottom;
+/** 连续敲字母跳到匹配项的缓冲，超时自动清空。 */
+declare function useTypeahead(options?: TypeaheadOptions): Typeahead;
+//#endregion
+export { StickToBottom, useHoverIntent, useScrollLock, useScrollTracker, useStickToBottom, useTypeahead };
+//# sourceMappingURL=behavior.d.ts.map

package/dist/behavior.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"behavior.d.ts","names":[],"sources":["../src/behavior.ts"],"mappings":";;;;;;;;;;iBAoCgB,cACd,QAAQ,2BACR,QAAQ,iBAAiB;;;;;iBAwBX,eAAe,SAAS;;iBAMxB,iBAAiB,SAAS,uBAAuB,IAAI;UAapD;;EAEf,OAAO,IAAI;;EAEX,iBAAiB;;EAEjB;;;;;;;;iBASc,iBAAiB,SAAS,uBAAuB;;iBAejD,aAAa,UAAS,mBAAwB"}

package/dist/behavior.js

@@ -0,0 +1,74 @@
+import { onScopeDispose, ref, toValue, watch } from "vue";
+import { acquireScrollLock, createScrollTracker, createStickToBottom, createTypeahead, trackHoverIntent } from "@xihan-ui/behavior";
+//#region src/behavior.ts
+/**
+* 按需加解滚动锁。锁是引用计数的，多处同时锁不会互相踩。
+*
+* 锁哪个元素由 `config.scrollRoot?.()` 决定；宿主把滚动搬进了内容容器
+* （body 自己不滚）时必须在配置里注入，否则锁到的是不滚的那个。
+*/
+function useScrollLock(active, config) {
+	let handle = null;
+	const release = () => {
+		handle?.dispose();
+		handle = null;
+	};
+	watch(() => toValue(active), (on) => {
+		if (on && !handle) handle = acquireScrollLock({ config: toValue(config) });
+		else if (!on) release();
+	}, { immediate: true });
+	onScopeDispose(release);
+}
+/**
+* 悬停意图：进触发器停够时长才报开，离开时按安全三角判断是不是正朝浮层去。
+* 用于自建的悬停浮层，省掉「斜着划向子菜单半路就关了」那类手写延时。
+*/
+function useHoverIntent(options) {
+	onScopeDispose(trackHoverIntent(options));
+}
+/** 观察滚动容器的位置与尺寸，值变了才回调。返回最近一次量到的值。 */
+function useScrollTracker(options) {
+	const metrics = ref(null);
+	const handle = createScrollTracker({
+		...options,
+		onChange: (next) => {
+			metrics.value = next;
+			options.onChange?.(next);
+		}
+	});
+	onScopeDispose(() => handle.dispose());
+	return metrics;
+}
+/**
+* 内容增长时保持贴底，用户往上滚过就松手不再跟。
+*
+* 两个 getter 里读的是 ref 时自动重绑：原语在建好那一刻就绑一次，
+* 而 setup 阶段模板 ref 还是 null，不重绑等于没挂上。
+*/
+function useStickToBottom(options) {
+	const state = ref(null);
+	const handle = createStickToBottom({
+		...options,
+		onChange: (next) => {
+			state.value = next;
+			options.onChange?.(next);
+		}
+	});
+	watch([() => options.scrollEl(), () => options.contentEl()], () => handle.retarget());
+	onScopeDispose(() => handle.dispose());
+	return {
+		state,
+		scrollToBottom: handle.scrollToBottom,
+		retarget: handle.retarget
+	};
+}
+/** 连续敲字母跳到匹配项的缓冲，超时自动清空。 */
+function useTypeahead(options = {}) {
+	const typeahead = createTypeahead(options);
+	onScopeDispose(() => typeahead.clear());
+	return typeahead;
+}
+//#endregion
+export { useHoverIntent, useScrollLock, useScrollTracker, useStickToBottom, useTypeahead };
+
+//# sourceMappingURL=behavior.js.map

package/dist/behavior.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"behavior.js","names":[],"sources":["../src/behavior.ts"],"sourcesContent":["// @xihan-ui/vue/behavior —— 行为原语的 Vue 包装。\n//\n// @xihan-ui/behavior 里的原语都是框架无关的：收一份配置与几个元素 getter，\n// 返回一个要自己释放的句柄。接进 Vue 无非是把释放挂到作用域结束，\n// 于是这些包装只做那一件事，不改原语的语义、也不加新概念。\n//\n// 与主入口分开：自建浮层才用得上这一层，不用的应用不必把它压进主入口的体积。\n// 需要层栈仪式的那几个（消解层、焦点域、背景失活）不在这里——\n// 它们要按顺序接四五个东西，接错的表现是「点子菜单父层跟着关」这种不报错的怪症，\n// 那种场景请直接用库里现成的浮层组件。\nimport type {\n  HoverIntentOptions,\n  ScrollMetrics,\n  ScrollTrackerOptions,\n  StickToBottomOptions,\n  StickToBottomState,\n  Typeahead,\n  TypeaheadOptions,\n} from '@xihan-ui/behavior'\nimport type { RuntimeConfig } from '@xihan-ui/kernel'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport {\n  acquireScrollLock,\n  createScrollTracker,\n  createStickToBottom,\n  createTypeahead,\n  trackHoverIntent,\n} from '@xihan-ui/behavior'\nimport { onScopeDispose, ref, toValue, watch } from 'vue'\n\n/**\n * 按需加解滚动锁。锁是引用计数的，多处同时锁不会互相踩。\n *\n * 锁哪个元素由 `config.scrollRoot?.()` 决定；宿主把滚动搬进了内容容器\n * （body 自己不滚）时必须在配置里注入，否则锁到的是不滚的那个。\n */\nexport function useScrollLock(\n  active: MaybeRefOrGetter<boolean>,\n  config: MaybeRefOrGetter<RuntimeConfig>,\n): void {\n  let handle: { dispose: () => void } | null = null\n  const release = (): void => {\n    handle?.dispose()\n    handle = null\n  }\n  watch(\n    () => toValue(active),\n    (on) => {\n      if (on && !handle)\n        handle = acquireScrollLock({ config: toValue(config) })\n      else if (!on)\n        release()\n    },\n    { immediate: true },\n  )\n  onScopeDispose(release)\n}\n\n/**\n * 悬停意图：进触发器停够时长才报开，离开时按安全三角判断是不是正朝浮层去。\n * 用于自建的悬停浮层，省掉「斜着划向子菜单半路就关了」那类手写延时。\n */\nexport function useHoverIntent(options: HoverIntentOptions): void {\n  const stop = trackHoverIntent(options)\n  onScopeDispose(stop)\n}\n\n/** 观察滚动容器的位置与尺寸，值变了才回调。返回最近一次量到的值。 */\nexport function useScrollTracker(options: ScrollTrackerOptions): Ref<ScrollMetrics | null> {\n  const metrics = ref<ScrollMetrics | null>(null)\n  const handle = createScrollTracker({\n    ...options,\n    onChange: (next) => {\n      metrics.value = next\n      options.onChange?.(next)\n    },\n  })\n  onScopeDispose(() => handle.dispose())\n  return metrics\n}\n\nexport interface StickToBottom {\n  /** 当前贴底状态，随原语的回调更新。 */\n  state: Ref<StickToBottomState | null>\n  /** 滚到底部并恢复粘附，默认 'smooth'，reducedMotion 为真时强制 'instant'。 */\n  scrollToBottom: (behavior?: 'smooth' | 'instant') => void\n  /** 重新读取 scrollEl / contentEl，节点变了就解绑重绑。 */\n  retarget: () => void\n}\n\n/**\n * 内容增长时保持贴底，用户往上滚过就松手不再跟。\n *\n * 两个 getter 里读的是 ref 时自动重绑：原语在建好那一刻就绑一次，\n * 而 setup 阶段模板 ref 还是 null，不重绑等于没挂上。\n */\nexport function useStickToBottom(options: StickToBottomOptions): StickToBottom {\n  const state = ref<StickToBottomState | null>(null)\n  const handle = createStickToBottom({\n    ...options,\n    onChange: (next) => {\n      state.value = next\n      options.onChange?.(next)\n    },\n  })\n  watch([() => options.scrollEl(), () => options.contentEl()], () => handle.retarget())\n  onScopeDispose(() => handle.dispose())\n  return { state, scrollToBottom: handle.scrollToBottom, retarget: handle.retarget }\n}\n\n/** 连续敲字母跳到匹配项的缓冲，超时自动清空。 */\nexport function useTypeahead(options: TypeaheadOptions = {}): Typeahead {\n  const typeahead = createTypeahead(options)\n  onScopeDispose(() => typeahead.clear())\n  return typeahead\n}\n"],"mappings":";;;;;;;;;AAoCA,SAAgB,cACd,QACA,QACM;CACN,IAAI,SAAyC;CAC7C,MAAM,gBAAsB;EAC1B,QAAQ,QAAQ;EAChB,SAAS;CACX;CACA,YACQ,QAAQ,MAAM,IACnB,OAAO;EACN,IAAI,MAAM,CAAC,QACT,SAAS,kBAAkB,EAAE,QAAQ,QAAQ,MAAM,EAAE,CAAC;OACnD,IAAI,CAAC,IACR,QAAQ;CACZ,GACA,EAAE,WAAW,KAAK,CACpB;CACA,eAAe,OAAO;AACxB;;;;;AAMA,SAAgB,eAAe,SAAmC;CAEhE,eADa,iBAAiB,OACZ,CAAC;AACrB;;AAGA,SAAgB,iBAAiB,SAA0D;CACzF,MAAM,UAAU,IAA0B,IAAI;CAC9C,MAAM,SAAS,oBAAoB;EACjC,GAAG;EACH,WAAW,SAAS;GAClB,QAAQ,QAAQ;GAChB,QAAQ,WAAW,IAAI;EACzB;CACF,CAAC;CACD,qBAAqB,OAAO,QAAQ,CAAC;CACrC,OAAO;AACT;;;;;;;AAiBA,SAAgB,iBAAiB,SAA8C;CAC7E,MAAM,QAAQ,IAA+B,IAAI;CACjD,MAAM,SAAS,oBAAoB;EACjC,GAAG;EACH,WAAW,SAAS;GAClB,MAAM,QAAQ;GACd,QAAQ,WAAW,IAAI;EACzB;CACF,CAAC;CACD,MAAM,OAAO,QAAQ,SAAS,SAAS,QAAQ,UAAU,CAAC,SAAS,OAAO,SAAS,CAAC;CACpF,qBAAqB,OAAO,QAAQ,CAAC;CACrC,OAAO;EAAE;EAAO,gBAAgB,OAAO;EAAgB,UAAU,OAAO;CAAS;AACnF;;AAGA,SAAgB,aAAa,UAA4B,CAAC,GAAc;CACtE,MAAM,YAAY,gBAAgB,OAAO;CACzC,qBAAqB,UAAU,MAAM,CAAC;CACtC,OAAO;AACT"}

package/dist/components/accordion/accordion.d.ts

@@ -75,7 +75,6 @@ declare const XhAccordionRoot: import("vue").DefineComponent<import("vue").Extra
   "onValue-change"?: ((_details: import("@xihan-ui/headless").AccordionValueChangeDetails) => any) | undefined;
   "onUpdate:value"?: ((_value: string[]) => any) | undefined;
 }>, {
-  size: Size;
   value: string[];
   multiple: boolean;
   collapsible: boolean;
@@ -84,6 +83,7 @@ declare const XhAccordionRoot: import("vue").DefineComponent<import("vue").Extra
   orientation: Orientation;
   dir: Direction;
   tone: Tone;
+  size: Size;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhAccordionItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   value: {

package/dist/components/accordion/context.js

@@ -1,8 +1,8 @@
 import { inject, provide } from "vue";
 //#region src/components/accordion/context.ts
-const KEY = Symbol("xh-accordion");
+const KEY = Symbol.for("xh-accordion");
 /** 条目身份下传给 header/trigger/content，用 getter 以跟随 value/disabled 变更。 */
-const ITEM_KEY = Symbol("xh-accordion-item");
+const ITEM_KEY = Symbol.for("xh-accordion-item");
 function provideAccordion(ctx) {
 	provide(KEY, ctx);
 }

package/dist/components/accordion/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/accordion/context.ts"],"sourcesContent":["import type { AccordionItemProps } from '@xihan-ui/headless'\nimport type { InjectionKey } from 'vue'\nimport type { AccordionContext } from './use-accordion'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<AccordionContext> = Symbol('xh-accordion')\n/** 条目身份下传给 header/trigger/content，用 getter 以跟随 value/disabled 变更。 */\nconst ITEM_KEY: InjectionKey<() => AccordionItemProps> = Symbol('xh-accordion-item')\n\nexport function provideAccordion(ctx: AccordionContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useAccordionContext(): AccordionContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Accordion 部件必须用在 XhAccordionRoot 内')\n  return ctx\n}\n\nexport function provideAccordionItem(item: () => AccordionItemProps): void {\n  provide(ITEM_KEY, item)\n}\n\nexport function useAccordionItem(): () => AccordionItemProps {\n  const item = inject(ITEM_KEY, null)\n  if (!item)\n    throw new Error('[xh] Accordion 条目部件必须用在 XhAccordionItem 内')\n  return item\n}\n"],"mappings":";;AAKA,MAAM,MAAsC,OAAO,cAAc;;AAEjE,MAAM,WAAmD,OAAO,mBAAmB;AAEnF,SAAgB,iBAAiB,KAA6B;CAC5D,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,sBAAwC;CACtD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,yCAAyC;CAC3D,OAAO;AACT;AAEA,SAAgB,qBAAqB,MAAsC;CACzE,QAAQ,UAAU,IAAI;AACxB;AAEA,SAAgB,mBAA6C;CAC3D,MAAM,OAAO,OAAO,UAAU,IAAI;CAClC,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,2CAA2C;CAC7D,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/accordion/context.ts"],"sourcesContent":["import type { AccordionItemProps } from '@xihan-ui/headless'\nimport type { InjectionKey } from 'vue'\nimport type { AccordionContext } from './use-accordion'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<AccordionContext> = Symbol.for('xh-accordion')\n/** 条目身份下传给 header/trigger/content，用 getter 以跟随 value/disabled 变更。 */\nconst ITEM_KEY: InjectionKey<() => AccordionItemProps> = Symbol.for('xh-accordion-item')\n\nexport function provideAccordion(ctx: AccordionContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useAccordionContext(): AccordionContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Accordion 部件必须用在 XhAccordionRoot 内')\n  return ctx\n}\n\nexport function provideAccordionItem(item: () => AccordionItemProps): void {\n  provide(ITEM_KEY, item)\n}\n\nexport function useAccordionItem(): () => AccordionItemProps {\n  const item = inject(ITEM_KEY, null)\n  if (!item)\n    throw new Error('[xh] Accordion 条目部件必须用在 XhAccordionItem 内')\n  return item\n}\n"],"mappings":";;AAKA,MAAM,MAAsC,OAAO,IAAI,cAAc;;AAErE,MAAM,WAAmD,OAAO,IAAI,mBAAmB;AAEvF,SAAgB,iBAAiB,KAA6B;CAC5D,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,sBAAwC;CACtD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,yCAAyC;CAC3D,OAAO;AACT;AAEA,SAAgB,qBAAqB,MAAsC;CACzE,QAAQ,UAAU,IAAI;AACxB;AAEA,SAAgB,mBAA6C;CAC3D,MAAM,OAAO,OAAO,UAAU,IAAI;CAClC,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,2CAA2C;CAC7D,OAAO;AACT"}

package/dist/components/affix/context.js

@@ -1,6 +1,6 @@
 import { inject, provide } from "vue";
 //#region src/components/affix/context.ts
-const KEY = Symbol("xh-affix");
+const KEY = Symbol.for("xh-affix");
 function provideAffix(ctx) {
 	provide(KEY, ctx);
 }

package/dist/components/affix/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/affix/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { AffixContext } from './use-affix'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<AffixContext> = Symbol('xh-affix')\n\nexport function provideAffix(ctx: AffixContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useAffixContext(): AffixContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Affix 部件必须用在 XhAffixRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAkC,OAAO,UAAU;AAEzD,SAAgB,aAAa,KAAyB;CACpD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,kBAAgC;CAC9C,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,iCAAiC;CACnD,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/affix/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { AffixContext } from './use-affix'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<AffixContext> = Symbol.for('xh-affix')\n\nexport function provideAffix(ctx: AffixContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useAffixContext(): AffixContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Affix 部件必须用在 XhAffixRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAkC,OAAO,IAAI,UAAU;AAE7D,SAAgB,aAAa,KAAyB;CACpD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,kBAAgC;CAC9C,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,iCAAiC;CACnD,OAAO;AACT"}

package/dist/components/alert/context.js

@@ -1,6 +1,6 @@
 import { inject, provide } from "vue";
 //#region src/components/alert/context.ts
-const KEY = Symbol("xh-alert");
+const KEY = Symbol.for("xh-alert");
 function provideAlert(ctx) {
 	provide(KEY, ctx);
 }

package/dist/components/alert/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/alert/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { AlertContext } from './use-alert'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<AlertContext> = Symbol('xh-alert')\n\nexport function provideAlert(ctx: AlertContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useAlertContext(): AlertContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Alert 部件必须用在 XhAlertRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAkC,OAAO,UAAU;AAEzD,SAAgB,aAAa,KAAyB;CACpD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,kBAAgC;CAC9C,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,iCAAiC;CACnD,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/alert/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { AlertContext } from './use-alert'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<AlertContext> = Symbol.for('xh-alert')\n\nexport function provideAlert(ctx: AlertContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useAlertContext(): AlertContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Alert 部件必须用在 XhAlertRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAkC,OAAO,IAAI,UAAU;AAE7D,SAAgB,aAAa,KAAyB;CACpD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,kBAAgC;CAC9C,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,iCAAiC;CACnD,OAAO;AACT"}

package/dist/components/anchor/anchor.d.ts

@@ -106,16 +106,16 @@ declare const XhAnchorRoot: import("vue").DefineComponent<import("vue").ExtractP
   "onValue-change"?: ((_details: import("@xihan-ui/headless").AnchorValueChangeDetails) => any) | undefined;
   "onUpdate:value"?: ((_value: string | null) => any) | undefined;
 }>, {
-  size: Size;
   value: string | null;
   defaultValue: string | null;
   orientation: Orientation;
   dir: Direction;
   tone: Tone;
-  translations: Partial<AnchorTranslations>;
+  size: Size;
   targets: readonly string[];
   offset: number;
   smooth: boolean;
+  translations: Partial<AnchorTranslations>;
   scrollElement: HTMLElement | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhAnchorList: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/dist/components/anchor/context.js

@@ -1,6 +1,6 @@
 import { inject, provide } from "vue";
 //#region src/components/anchor/context.ts
-const KEY = Symbol("xh-anchor");
+const KEY = Symbol.for("xh-anchor");
 function provideAnchor(ctx) {
 	provide(KEY, ctx);
 }

package/dist/components/anchor/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/anchor/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { AnchorContext } from './use-anchor'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<AnchorContext> = Symbol('xh-anchor')\n\nexport function provideAnchor(ctx: AnchorContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useAnchorContext(): AnchorContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Anchor 部件必须用在 XhAnchorRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAmC,OAAO,WAAW;AAE3D,SAAgB,cAAc,KAA0B;CACtD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,mBAAkC;CAChD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,mCAAmC;CACrD,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/anchor/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { AnchorContext } from './use-anchor'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<AnchorContext> = Symbol.for('xh-anchor')\n\nexport function provideAnchor(ctx: AnchorContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useAnchorContext(): AnchorContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Anchor 部件必须用在 XhAnchorRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAmC,OAAO,IAAI,WAAW;AAE/D,SAAgB,cAAc,KAA0B;CACtD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,mBAAkC;CAChD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,mCAAmC;CACrD,OAAO;AACT"}

package/dist/components/avatar/context.js

@@ -1,6 +1,6 @@
 import { inject, provide } from "vue";
 //#region src/components/avatar/context.ts
-const KEY = Symbol("xh-avatar");
+const KEY = Symbol.for("xh-avatar");
 function provideAvatar(ctx) {
 	provide(KEY, ctx);
 }

package/dist/components/avatar/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/avatar/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { AvatarContext } from './use-avatar'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<AvatarContext> = Symbol('xh-avatar')\n\nexport function provideAvatar(ctx: AvatarContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useAvatarContext(): AvatarContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Avatar 部件必须用在 XhAvatarRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAmC,OAAO,WAAW;AAE3D,SAAgB,cAAc,KAA0B;CACtD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,mBAAkC;CAChD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,mCAAmC;CACrD,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/avatar/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { AvatarContext } from './use-avatar'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<AvatarContext> = Symbol.for('xh-avatar')\n\nexport function provideAvatar(ctx: AvatarContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useAvatarContext(): AvatarContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Avatar 部件必须用在 XhAvatarRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAmC,OAAO,IAAI,WAAW;AAE/D,SAAgB,cAAc,KAA0B;CACtD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,mBAAkC;CAChD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,mCAAmC;CACrD,OAAO;AACT"}

package/dist/components/avatar-group/context.js

@@ -1,6 +1,6 @@
 import { inject, provide } from "vue";
 //#region src/components/avatar-group/context.ts
-const KEY = Symbol("xh-avatar-group");
+const KEY = Symbol.for("xh-avatar-group");
 function provideAvatarGroup(ctx) {
 	provide(KEY, ctx);
 }

package/dist/components/avatar-group/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/avatar-group/context.ts"],"sourcesContent":["import type { AvatarGroupApi } from '@xihan-ui/headless'\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport { inject, provide } from 'vue'\n\nexport interface AvatarGroupContext {\n  api: ComputedRef<AvatarGroupApi>\n}\n\nconst KEY: InjectionKey<AvatarGroupContext> = Symbol('xh-avatar-group')\n\nexport function provideAvatarGroup(ctx: AvatarGroupContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useAvatarGroupContext(): AvatarGroupContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] AvatarGroup 部件必须用在 XhAvatarGroupRoot 内')\n  return ctx\n}\n"],"mappings":";;AAQA,MAAM,MAAwC,OAAO,iBAAiB;AAEtE,SAAgB,mBAAmB,KAA+B;CAChE,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,wBAA4C;CAC1D,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,6CAA6C;CAC/D,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/avatar-group/context.ts"],"sourcesContent":["import type { AvatarGroupApi } from '@xihan-ui/headless'\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport { inject, provide } from 'vue'\n\nexport interface AvatarGroupContext {\n  api: ComputedRef<AvatarGroupApi>\n}\n\nconst KEY: InjectionKey<AvatarGroupContext> = Symbol.for('xh-avatar-group')\n\nexport function provideAvatarGroup(ctx: AvatarGroupContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useAvatarGroupContext(): AvatarGroupContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] AvatarGroup 部件必须用在 XhAvatarGroupRoot 内')\n  return ctx\n}\n"],"mappings":";;AAQA,MAAM,MAAwC,OAAO,IAAI,iBAAiB;AAE1E,SAAgB,mBAAmB,KAA+B;CAChE,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,wBAA4C;CAC1D,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,6CAA6C;CAC/D,OAAO;AACT"}

package/dist/components/back-top/back-top.d.ts

@@ -66,10 +66,10 @@ declare const XhBackTopRoot: import("vue").DefineComponent<import("vue").Extract
 }>> & Readonly<{
   "onVisible-change"?: ((_details: import("@xihan-ui/headless").BackTopVisibleChangeDetails) => any) | undefined;
 }>, {
-  target: HTMLElement | null;
-  size: Size;
   tone: Tone;
+  size: Size;
   translations: Partial<BackTopTranslations>;
+  target: HTMLElement | null;
   visibilityHeight: number;
   behavior: BackTopBehavior;
 }, SlotsType<{

package/dist/components/back-top/context.js

@@ -1,6 +1,6 @@
 import { inject, provide } from "vue";
 //#region src/components/back-top/context.ts
-const KEY = Symbol("xh-back-top");
+const KEY = Symbol.for("xh-back-top");
 function provideBackTop(ctx) {
 	provide(KEY, ctx);
 }

package/dist/components/back-top/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/back-top/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { BackTopContext } from './use-back-top'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<BackTopContext> = Symbol('xh-back-top')\n\nexport function provideBackTop(ctx: BackTopContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useBackTopContext(): BackTopContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] BackTop 部件必须用在 XhBackTopRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAoC,OAAO,aAAa;AAE9D,SAAgB,eAAe,KAA2B;CACxD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,oBAAoC;CAClD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,qCAAqC;CACvD,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/back-top/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { BackTopContext } from './use-back-top'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<BackTopContext> = Symbol.for('xh-back-top')\n\nexport function provideBackTop(ctx: BackTopContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useBackTopContext(): BackTopContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] BackTop 部件必须用在 XhBackTopRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAoC,OAAO,IAAI,aAAa;AAElE,SAAgB,eAAe,KAA2B;CACxD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,oBAAoC;CAClD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,qCAAqC;CACvD,OAAO;AACT"}

package/dist/components/badge/badge.d.ts

@@ -1,74 +1,166 @@
-import { PropType } from "vue";
-import { BadgeVariant } from "@xihan-ui/headless";
+import { PropType, SlotsType, VNode } from "vue";
+import { BadgePlacement } from "@xihan-ui/headless";
 import { Size, Tone } from "@xihan-ui/kernel";
 //#region src/components/badge/badge.d.ts
-declare const XhBadge: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-  variant: PropType<BadgeVariant>;
-  tone: PropType<Tone>;
-  size: PropType<Size>;
-  /** 计数：给了它徽标就自己出数字，超过 max 写成「max+」。 */
-  count: {
-    type: NumberConstructor;
-    default: undefined;
+/**
+ * 锚点：被标记的那个东西（按钮、头像、标签页）写进默认插槽，角标另起一层贴在它的角上。
+ *
+ * 角标是挂在别的元素角上的一枚标记，不是可以单独摆的药丸——
+ * 行内的状态药丸请用 tag。
+ */
+declare const XhBadgeRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  readonly tone: PropType<Tone>;
+  readonly size: PropType<Size>;
+  /** 挂在哪个角上，默认 top-end。 */
+  readonly placement: PropType<BadgePlacement>;
+  /** 计数：给了它角标就自己出数字，超过 max 写成「max+」。 */
+  readonly count: {
+    readonly type: NumberConstructor;
+    readonly default: undefined;
   };
   /** 计数上限，默认 99。 */
-  max: {
-    type: NumberConstructor;
-    default: undefined;
+  readonly max: {
+    readonly type: NumberConstructor;
+    readonly default: undefined;
   };
   /** 计数为 0 时是否照样显示，默认不显示。 */
-  showZero: {
-    type: BooleanConstructor;
-    default: undefined;
+  readonly showZero: {
+    readonly type: BooleanConstructor;
+    readonly default: undefined;
   };
   /** 只出一个点，不出数字。 */
-  dot: {
-    type: BooleanConstructor;
-    default: undefined;
+  readonly dot: {
+    readonly type: BooleanConstructor;
+    readonly default: undefined;
   };
-  /** 读屏怎么念这枚徽标，例如「3 条未读」。 */
-  label: {
-    type: StringConstructor;
-    default: undefined;
+  /** 读屏怎么念这枚角标，例如「3 条未读」。 */
+  readonly label: {
+    readonly type: StringConstructor;
+    readonly default: undefined;
   };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => 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: PropType<BadgeVariant>;
-  tone: PropType<Tone>;
-  size: PropType<Size>;
-  /** 计数：给了它徽标就自己出数字，超过 max 写成「max+」。 */
-  count: {
-    type: NumberConstructor;
-    default: undefined;
+  readonly tone: PropType<Tone>;
+  readonly size: PropType<Size>;
+  /** 挂在哪个角上，默认 top-end。 */
+  readonly placement: PropType<BadgePlacement>;
+  /** 计数：给了它角标就自己出数字，超过 max 写成「max+」。 */
+  readonly count: {
+    readonly type: NumberConstructor;
+    readonly default: undefined;
   };
   /** 计数上限，默认 99。 */
-  max: {
-    type: NumberConstructor;
-    default: undefined;
+  readonly max: {
+    readonly type: NumberConstructor;
+    readonly default: undefined;
   };
   /** 计数为 0 时是否照样显示，默认不显示。 */
-  showZero: {
-    type: BooleanConstructor;
-    default: undefined;
+  readonly showZero: {
+    readonly type: BooleanConstructor;
+    readonly default: undefined;
   };
   /** 只出一个点，不出数字。 */
-  dot: {
-    type: BooleanConstructor;
-    default: undefined;
+  readonly dot: {
+    readonly type: BooleanConstructor;
+    readonly default: undefined;
   };
-  /** 读屏怎么念这枚徽标，例如「3 条未读」。 */
-  label: {
-    type: StringConstructor;
-    default: undefined;
+  /** 读屏怎么念这枚角标，例如「3 条未读」。 */
+  readonly label: {
+    readonly type: StringConstructor;
+    readonly default: undefined;
   };
 }>> & Readonly<{}>, {
-  label: string;
-  max: number;
-  count: number;
-  showZero: boolean;
-  dot: boolean;
+  readonly label: string;
+  readonly max: number;
+  readonly count: number;
+  readonly showZero: boolean;
+  readonly dot: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 角标本身，绝对定位在锚点的某个角上。不给内容就用算好的计数文本。 */
+declare const XhBadgeIndicator: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+  default?: (props: {
+    text: string;
+  }) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * 一步到位的写法：默认插槽放被标记的东西，角标自动跟上。
+ *
+ * 要往角标里塞自定义内容（比如一枚小图标）时改用 XhBadgeRoot + XhBadgeIndicator。
+ */
+declare const XhBadge: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  readonly tone: PropType<Tone>;
+  readonly size: PropType<Size>;
+  /** 挂在哪个角上，默认 top-end。 */
+  readonly placement: PropType<BadgePlacement>;
+  /** 计数：给了它角标就自己出数字，超过 max 写成「max+」。 */
+  readonly count: {
+    readonly type: NumberConstructor;
+    readonly default: undefined;
+  };
+  /** 计数上限，默认 99。 */
+  readonly max: {
+    readonly type: NumberConstructor;
+    readonly default: undefined;
+  };
+  /** 计数为 0 时是否照样显示，默认不显示。 */
+  readonly showZero: {
+    readonly type: BooleanConstructor;
+    readonly default: undefined;
+  };
+  /** 只出一个点，不出数字。 */
+  readonly dot: {
+    readonly type: BooleanConstructor;
+    readonly default: undefined;
+  };
+  /** 读屏怎么念这枚角标，例如「3 条未读」。 */
+  readonly label: {
+    readonly type: StringConstructor;
+    readonly default: undefined;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  readonly tone: PropType<Tone>;
+  readonly size: PropType<Size>;
+  /** 挂在哪个角上，默认 top-end。 */
+  readonly placement: PropType<BadgePlacement>;
+  /** 计数：给了它角标就自己出数字，超过 max 写成「max+」。 */
+  readonly count: {
+    readonly type: NumberConstructor;
+    readonly default: undefined;
+  };
+  /** 计数上限，默认 99。 */
+  readonly max: {
+    readonly type: NumberConstructor;
+    readonly default: undefined;
+  };
+  /** 计数为 0 时是否照样显示，默认不显示。 */
+  readonly showZero: {
+    readonly type: BooleanConstructor;
+    readonly default: undefined;
+  };
+  /** 只出一个点，不出数字。 */
+  readonly dot: {
+    readonly type: BooleanConstructor;
+    readonly default: undefined;
+  };
+  /** 读屏怎么念这枚角标，例如「3 条未读」。 */
+  readonly label: {
+    readonly type: StringConstructor;
+    readonly default: undefined;
+  };
+}>> & Readonly<{}>, {
+  readonly label: string;
+  readonly max: number;
+  readonly count: number;
+  readonly showZero: boolean;
+  readonly dot: boolean;
+}, SlotsType<{
+  default?: () => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { XhBadge };
+export { XhBadge, XhBadgeIndicator, XhBadgeRoot };
 //# sourceMappingURL=badge.d.ts.map

package/dist/components/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","names":[],"sources":["../../../src/components/badge/badge.ts"],"mappings":";;;;cAQa,uBAAO,8BAAA;EAGG,SAAA,SAAS;EACZ,MAAA,SAAS;EACT,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAFN,SAAA,SAAS;EACZ,MAAA,SAAS;EACT,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAqB3B"}
+{"version":3,"file":"badge.d.ts","names":[],"sources":["../../../src/components/badge/badge.ts"],"mappings":";;;;;;;;;;cAgCa,2BAAW,8BAAA;WAtBN,MAAA,SAAS;WACT,MAAA,SAAS;;WAEJ,WAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAHd,MAAA,SAAS;WACT,MAAA,SAAS;;WAEJ,WAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCA6B9B;;cAGW,gCAAgB,0BAAA,oBAAA,4BAAA;;;EAEY,WAAC;IAAS;QAAmB;kCASpE;;;;;;cAOW,uBAAO,8BAAA;WArDF,MAAA,SAAS;WACT,MAAA,SAAS;;WAEJ,WAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAHd,MAAA,SAAS;WACT,MAAA,SAAS;;WAEJ,WAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDS,gBAAM;kCAI7C"}