@neut/ui 0.0.16 → 0.0.18

package/dist/components/toggle-group/ToggleGroup/useToggleGroupKeyboard.js

@@ -1,45 +1,15 @@
+import { createRovingNavigation as e } from "../../../utils/roving-navigation.js";
 //#region src/components/toggle-group/ToggleGroup/useToggleGroupKeyboard.ts
-var e = /* @__PURE__ */ new Set([
-	"ArrowLeft",
-	"ArrowRight",
-	"ArrowUp",
-	"ArrowDown",
-	"Home",
-	"End"
-]);
 function t(t) {
-	return { handleKeyDown: (n) => {
-		if (t.disabled() || !e.has(n.key)) return;
-		let r = document.activeElement, i = t.getItems().filter((e) => !e.disabled());
-		if (i.length === 0) return;
-		let a = i.findIndex((e) => e.element === r);
-		if (a === -1) return;
-		let o = t.orientation() === "vertical", s = t.dir(), c = s === "rtl" || s !== "ltr" && typeof document < "u" && getComputedStyle(n.currentTarget).direction === "rtl", l;
-		switch (n.key) {
-			case "Home":
-				l = 0;
-				break;
-			case "End":
-				l = i.length - 1;
-				break;
-			case "ArrowLeft":
-				if (o) return;
-				l = a + (c ? 1 : -1);
-				break;
-			case "ArrowRight":
-				if (o) return;
-				l = a + (c ? -1 : 1);
-				break;
-			case "ArrowUp":
-				if (!o) return;
-				l = a - 1;
-				break;
-			case "ArrowDown":
-				if (!o) return;
-				l = a + 1;
-		}
-		l !== void 0 && (n.preventDefault(), l = t.loopFocus() ? (l + i.length) % i.length : Math.min(i.length - 1, Math.max(0, l)), i[l].element.focus(), t.setHighlightedValue(i[l].value));
-	} };
+	return e({
+		getItems: () => t.getItems(),
+		orientation: t.orientation,
+		dir: t.dir,
+		loop: t.loopFocus,
+		disabled: t.disabled,
+		getDirectionElement: (e) => e.currentTarget,
+		onHighlight: t.setHighlightedValue
+	});
 }
 //#endregion
 export { t as useToggleGroupKeyboard };

package/dist/components/toggle-group/ToggleGroup/useToggleGroupKeyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToggleGroupKeyboard.js","names":["NAV_KEYS","useToggleGroupKeyboard","ctx","e","activeEl","items","item","currentIndex","isVertical","dir","isRTL","nextIndex"],"sources":["../../../../src/components/toggle-group/ToggleGroup/useToggleGroupKeyboard.ts"],"sourcesContent":["import type {\n  ToggleGroupContextValue,\n  ToggleGroupValue,\n} from \"./ToggleGroup.types\";\n\n/** 键盘导航按键:方向键 + Home/End(对齐 base-ui CompositeRoot 的 enableHomeAndEndKeys) */\nconst NAV_KEYS = new Set([\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"ArrowUp\",\n  \"ArrowDown\",\n  \"Home\",\n  \"End\",\n]);\n\n/**\n * ToggleGroup 的 roving focus 键盘导航(纯逻辑,可独立单测)。\n *\n * 方向映射:\n * - horizontal + ltr: ArrowRight → next, ArrowLeft → prev\n * - horizontal + rtl: 左右反转\n * - vertical:          ArrowDown → next, ArrowUp → prev\n * - Home → 第一个,End → 最后一个\n * - loopFocus=true 环绕,false 边界停止;跳过 disabled 的 item\n *\n * 只有焦点已经在某个 item 上时才接管按键,避免影响外部其它元素;\n * 移动焦点后由 item 的 onFocus 更新高亮。\n */\nexport function useToggleGroupKeyboard<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(ctx: ToggleGroupContextValue<TValue>) {\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (ctx.disabled()) return;\n    if (!NAV_KEYS.has(e.key)) return;\n\n    const activeEl = document.activeElement as HTMLElement | null;\n    const items = ctx.getItems().filter((item) => !item.disabled());\n    if (items.length === 0) return;\n\n    const currentIndex = items.findIndex((item) => item.element === activeEl);\n    if (currentIndex === -1) return;\n\n    const isVertical = ctx.orientation() === \"vertical\";\n    // dir 未指定/auto 时,按根元素的实际书写方向判断(兼容祖先节点上的 dir)\n    const dir = ctx.dir();\n    const isRTL =\n      dir === \"rtl\" ||\n      (dir !== \"ltr\" &&\n        typeof document !== \"undefined\" &&\n        getComputedStyle(e.currentTarget as Element).direction === \"rtl\");\n\n    let nextIndex: number | undefined;\n    switch (e.key) {\n      case \"Home\":\n        nextIndex = 0;\n        break;\n      case \"End\":\n        nextIndex = items.length - 1;\n        break;\n      case \"ArrowLeft\":\n        if (isVertical) return;\n        nextIndex = currentIndex + (isRTL ? 1 : -1);\n        break;\n      case \"ArrowRight\":\n        if (isVertical) return;\n        nextIndex = currentIndex + (isRTL ? -1 : 1);\n        break;\n      case \"ArrowUp\":\n        if (!isVertical) return;\n        nextIndex = currentIndex - 1;\n        break;\n      case \"ArrowDown\":\n        if (!isVertical) return;\n        nextIndex = currentIndex + 1;\n        break;\n    }\n\n    if (nextIndex === undefined) return;\n\n    // 方向键与当前布局匹配,接管默认滚动行为\n    e.preventDefault();\n\n    if (ctx.loopFocus()) {\n      nextIndex = (nextIndex + items.length) % items.length;\n    } else {\n      nextIndex = Math.min(items.length - 1, Math.max(0, nextIndex));\n    }\n\n    items[nextIndex].element.focus();\n    ctx.setHighlightedValue(items[nextIndex].value);\n  };\n\n  return { handleKeyDown };\n}\n"],"mappings":";AAMA,IAAMA,oBAAW,IAAI,IAAI;CACvB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAeD,SAAgBC,EAEd,GAAsC;CA8DtC,OAAO,EAAE,gBA7Dc,MAAqB;EAE1C,IADIC,EAAI,SAAS,KACb,CAACF,EAAS,IAAIG,EAAE,GAAG,GAAG;EAE1B,IAAMC,IAAW,SAAS,eACpBC,IAAQH,EAAI,SAAS,CAAC,CAAC,QAAQ,MAAS,CAACI,EAAK,SAAS,CAAC;EAC9D,IAAID,EAAM,WAAW,GAAG;EAExB,IAAME,IAAeF,EAAM,WAAW,MAASC,EAAK,YAAYF,CAAQ;EACxE,IAAIG,MAAiB,IAAI;EAEzB,IAAMC,IAAaN,EAAI,YAAY,MAAM,YAEnCO,IAAMP,EAAI,IAAI,GACdQ,IACJD,MAAQ,SACPA,MAAQ,SACP,OAAO,WAAa,OACpB,iBAAiBN,EAAE,aAAwB,CAAC,CAAC,cAAc,OAE3DQ;EACJ,QAAQR,EAAE,KAAV;GACE,KAAK;IACH,IAAY;IACZ;GACF,KAAK;IACH,IAAYE,EAAM,SAAS;IAC3B;GACF,KAAK;IACH,IAAIG,GAAY;IAChB,IAAYD,KAAgBG,IAAQ,IAAI;IACxC;GACF,KAAK;IACH,IAAIF,GAAY;IAChB,IAAYD,KAAgBG,IAAQ,KAAK;IACzC;GACF,KAAK;IACH,IAAI,CAACF,GAAY;IACjB,IAAYD,IAAe;IAC3B;GACF,KAAK;IACH,IAAI,CAACC,GAAY;IACjB,IAAYD,IAAe;EAE/B;EAEA,AAAII,MAAc,KAAA,MAGlBR,EAAE,eAAe,GAEjB,AAGEQ,IAHET,EAAI,UAAU,KACHS,IAAYN,EAAM,UAAUA,EAAM,SAEnC,KAAK,IAAIA,EAAM,SAAS,GAAG,KAAK,IAAI,GAAGM,CAAS,CAAC,GAG/DN,EAAMM,EAAU,CAAC,QAAQ,MAAM,GAC/BT,EAAI,oBAAoBG,EAAMM,EAAU,CAAC,KAAK;CAChD,EAEuB;AACzB"}
+{"version":3,"file":"useToggleGroupKeyboard.js","names":["useToggleGroupKeyboard","createRovingNavigation","ctx","event"],"sources":["../../../../src/components/toggle-group/ToggleGroup/useToggleGroupKeyboard.ts"],"sourcesContent":["import { createRovingNavigation } from \"~/utils\";\nimport type {\n  ToggleGroupContextValue,\n  ToggleGroupValue,\n} from \"./ToggleGroup.types\";\n\n/**\n * ToggleGroup 的 roving focus 键盘导航。\n *\n * 通用算法已抽到 `~/utils/roving-navigation`(与 Tabs 共用同一份),\n * 这里只接上 context,并补两处 ToggleGroup 特有语义:\n *\n * - 整组 `disabled` 时不接管任何按键;\n * - 判断书写方向时用 `event.currentTarget` 的实际 computed direction,\n *   这样祖先节点上的 `dir=\"rtl\"` 也能被正确识别(对齐 base-ui)。\n */\nexport function useToggleGroupKeyboard<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(ctx: ToggleGroupContextValue<TValue>) {\n  return createRovingNavigation<TValue>({\n    getItems: () => ctx.getItems(),\n    orientation: ctx.orientation,\n    dir: ctx.dir,\n    loop: ctx.loopFocus,\n    disabled: ctx.disabled,\n    getDirectionElement: (event) => event.currentTarget as Element | null,\n    onHighlight: ctx.setHighlightedValue,\n  });\n}\n"],"mappings":";;AAgBA,SAAgBA,EAEd,GAAsC;CACtC,OAAOC,EAA+B;EACpC,gBAAgBC,EAAI,SAAS;EAC7B,aAAaA,EAAI;EACjB,KAAKA,EAAI;EACT,MAAMA,EAAI;EACV,UAAUA,EAAI;EACd,sBAAsB,MAAUC,EAAM;EACtC,aAAaD,EAAI;CACnB,CAAC;AACH"}

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.js

@@ -1,6 +1,6 @@
 import { clsx as e } from "../../../utils/clsx.js";
-import { toggleVariants as t } from "../../toggle/Toggle/Toggle.styles.js";
-import { callEventHandler as n } from "../call-event-handler.js";
+import { callEventHandler as t } from "../../../utils/call-event-handler.js";
+import { toggleVariants as n } from "../../toggle/Toggle/Toggle.styles.js";
 import { useToggleGroupContext as r } from "../ToggleGroup/ToggleGroup.context.js";
 import { toggleGroupItemVariants as i } from "./ToggleGroupItem.styles.js";
 import { delegateEvents as a, insert as o, mergeProps as s, spread as c, template as l, use as u } from "solid-js/web";
@@ -33,9 +33,9 @@ function g(a) {
 	}), (() => {
 		var r = h();
 		return r.addEventListener("focus", (e) => {
-			C() || l.setHighlightedValue(_.value), n(_.onFocus, e);
+			C() || l.setHighlightedValue(_.value), t(_.onFocus, e);
 		}), r.$$click = (e) => {
-			n(_.onClick, e), !e.defaultPrevented && !C() && l.toggleItem(_.value, e, e.currentTarget);
+			t(_.onClick, e), !e.defaultPrevented && !C() && l.toggleItem(_.value, e, e.currentTarget);
 		}, u((e) => {
 			y = e;
 		}, r), c(r, s({
@@ -70,7 +70,7 @@ function g(a) {
 				return S();
 			},
 			get class() {
-				return e(t({
+				return e(n({
 					variant: b(),
 					size: x()
 				}), i(), _.class);

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.js","names":["mergeProps","onCleanup","onMount","splitProps","JSX","clsx","toggleVariants","callEventHandler","useToggleGroupContext","ToggleGroupValue","toggleGroupItemVariants","ToggleGroupItemProps","ToggleGroupItem","props","TValue","Element","ctx","merged","type","const","local","rest","elementRef","HTMLButtonElement","variant","size","pressed","isPressed","value","disabled","tabIndex","highlighted","highlightedValue","isUsable","undefined","isFirstEnabled","registerItem","element","_el$","_tmpl$","addEventListener","e","setHighlightedValue","onFocus","$$click","onClick","defaultPrevented","toggleItem","currentTarget","_$use","el","_$spread","_$mergeProps","tabindex","data-variant","data-size","data-spacing","spacing","data-pressed","data-disabled","data-state","aria-pressed","class","classList","_$insert","children","_$delegateEvents","mergeProps","_$mergeProps","_$delegateEvents","mergeProps$1","_tmpl$","ToggleGroupItem","ctx","useToggleGroupContext","merged","props","local","rest","splitProps","elementRef","variant","size","pressed","disabled","tabIndex","highlighted","onMount","_el$","callEventHandler","use","el","spread","mergeProps","\"class\"","clsx","toggleVariants","toggleGroupItemVariants","insert","delegateEvents"],"sources":["../../../../src/components/toggle-group/ToggleGroupItem/ToggleGroupItem.tsx"],"sourcesContent":["import { mergeProps, onCleanup, onMount, splitProps, type JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { toggleVariants } from \"~/components/toggle/Toggle/Toggle.styles\";\nimport { callEventHandler } from \"../call-event-handler\";\nimport { useToggleGroupContext } from \"../ToggleGroup/ToggleGroup.context\";\nimport type { ToggleGroupValue } from \"../ToggleGroup/ToggleGroup.types\";\nimport { toggleGroupItemVariants } from \"./ToggleGroupItem.styles\";\nimport type { ToggleGroupItemProps } from \"./ToggleGroupItem.types\";\n\n/**\n * ToggleGroupItem:ToggleGroup 内的两态按钮。\n *\n * - 选中值由 ToggleGroup 统一持有,点击通过 `ctx.toggleItem` 触发变更\n * - disabled 继承整组状态,可在 item 上单独禁用\n * - roving tabindex:整组只有一个 tab 停靠点,方向键在同组内移动焦点\n */\nexport function ToggleGroupItem<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(props: ToggleGroupItemProps<TValue>): JSX.Element {\n  // context 用宽值类型读取:item 无法从父级推导 group 的值类型,\n  // 自己的 TValue 始终可以传给宽类型参数\n  const ctx = useToggleGroupContext(\"ToggleGroupItem\");\n  const merged = mergeProps({ type: \"button\" as const }, props);\n\n  const [local, rest] = splitProps(merged, [\n    \"value\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"classList\",\n    \"disabled\",\n    \"type\",\n    \"onClick\",\n    \"onFocus\",\n    \"children\",\n  ]);\n\n  let elementRef: HTMLButtonElement | undefined;\n\n  // 组级未显式指定 variant/size 时,item 可单独覆盖\n  const variant = () => ctx.variant() ?? local.variant ?? \"default\";\n  const size = () => ctx.size() ?? local.size ?? \"default\";\n  const pressed = () => ctx.isPressed(local.value);\n  const disabled = () => ctx.disabled() || !!local.disabled;\n\n  // roving tabindex:高亮 item 持 0;高亮缺失或指向不可用 item(disabled/卸载)时,\n  // 首个可用 item 持 0 作为键盘起点,避免整组键盘不可达\n  const tabIndex = () => {\n    if (disabled()) return -1;\n    const highlighted = ctx.highlightedValue();\n    if (highlighted === local.value && ctx.isUsable(local.value)) return 0;\n    if (\n      (highlighted === undefined || !ctx.isUsable(highlighted)) &&\n      ctx.isFirstEnabled(local.value)\n    ) {\n      return 0;\n    }\n    return -1;\n  };\n\n  onMount(() => {\n    onCleanup(\n      ctx.registerItem({\n        value: local.value,\n        disabled,\n        element: elementRef!,\n      }),\n    );\n  });\n\n  return (\n    <button\n      ref={(el) => {\n        elementRef = el;\n      }}\n      type={local.type}\n      disabled={disabled()}\n      tabindex={tabIndex()}\n      data-slot=\"toggle-group-item\"\n      data-variant={variant()}\n      data-size={size()}\n      data-spacing={ctx.spacing()}\n      data-pressed={pressed() ? \"\" : null}\n      data-disabled={disabled() ? \"\" : null}\n      data-state={pressed() ? \"on\" : \"off\"}\n      aria-pressed={pressed()}\n      class={clsx(\n        toggleVariants({ variant: variant(), size: size() }),\n        toggleGroupItemVariants(),\n        local.class,\n      )}\n      classList={local.classList}\n      onClick={(e) => {\n        // 用户回调优先,可用 preventDefault() 阻止本次选中\n        callEventHandler(local.onClick, e);\n        if (!e.defaultPrevented && !disabled()) {\n          ctx.toggleItem(local.value, e, e.currentTarget);\n        }\n      }}\n      onFocus={(e) => {\n        // 聚焦更新高亮(roving focus 起点)\n        if (!disabled()) ctx.setHighlightedValue(local.value);\n        callEventHandler(local.onFocus, e);\n      }}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgBY,EAEdC,GAAkD;CAGlD,IAAMG,IAAMR,EAAsB,iBAAiB,GAC7CS,IAASjB,EAAW,EAAEkB,MAAM,SAAkB,GAAGL,CAAK,GAEtD,CAACO,GAAOC,KAAQlB,EAAWc,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEGK,GAGEE,UAAgBR,EAAIQ,QAAQ,KAAKJ,EAAMI,WAAW,WAClDC,UAAaT,EAAIS,KAAK,KAAKL,EAAMK,QAAQ,WACzCC,UAAgBV,EAAIW,UAAUP,EAAMQ,KAAK,GACzCC,UAAiBb,EAAIa,SAAS,KAAK,CAAC,CAACT,EAAMS,UAI3CC,UAAiB;EACrB,IAAID,EAAS,GAAG,OAAO;EACvB,IAAME,IAAcf,EAAIgB,iBAAiB;EAQzC,OAPID,MAAgBX,EAAMQ,SAASZ,EAAIiB,SAASb,EAAMQ,KAAK,MAExDG,MAAgBG,KAAAA,KAAa,CAAClB,EAAIiB,SAASF,CAAW,MACvDf,EAAImB,eAAef,EAAMQ,KAAK,IAEvB,IAEF;CACT;CAYA,OAVA1B,QAAc;EACZD,EACEe,EAAIoB,aAAa;GACfR,OAAOR,EAAMQ;GACbC;GACAQ,SAASf;EACX,CAAC,CACH;CACF,CAAC,UAED;EAAA,IAAAgB,IAAAC,EAAA;EAoCmB,OApCnBD,EAAAE,iBAAA,UA6BcC,MAAM;GAGdlC,AADKsB,EAAS,KAAGb,EAAI0B,oBAAoBtB,EAAMQ,KAAK,GACpDrB,EAAiBa,EAAMuB,SAASF,CAAC;EACnC,CAAC,GAAAH,EAAAM,WAXSH,MAAM;GAGd,AADAlC,EAAiBa,EAAMyB,SAASJ,CAAC,GAC7B,CAACA,EAAEK,oBAAoB,CAACjB,EAAS,KACnCb,EAAI+B,WAAW3B,EAAMQ,OAAOa,GAAGA,EAAEO,aAAa;EAElD,GAACC,GA1BKC,MAAO;GACX5B,IAAa4B;EACf,GAACZ,CAAA,GAAAa,EAAAb,GAAAc,EAAA;GAAA,IACDlC,OAAI;IAAA,OAAEE,EAAMF;GAAI;GAAA,IAChBW,WAAQ;IAAA,OAAEA,EAAS;GAAC;GAAA,IACpBwB,WAAQ;IAAA,OAAEvB,EAAS;GAAC;GAAA,IAAA,iBAAA;IAAA,OAENN,EAAQ;GAAC;GAAA,IAAA,cAAA;IAAA,OACZC,EAAK;GAAC;GAAA,IAAA,iBAAA;IAAA,OACHT,EAAIyC,QAAQ;GAAC;GAAA,IAAA,iBAAA;IAAA,OACb/B,EAAQ,IAAI,KAAK;GAAI;GAAA,IAAA,kBAAA;IAAA,OACpBG,EAAS,IAAI,KAAK;GAAI;GAAA,IAAA,eAAA;IAAA,OACzBH,EAAQ,IAAI,OAAO;GAAK;GAAA,IAAA,iBAAA;IAAA,OACtBA,EAAQ;GAAC;GAAA,IAAAoE,QAAA;IAAA,OAChBzF,EACLC,EAAe;KAAEkB,SAASA,EAAQ;KAAGC,MAAMA,EAAK;IAAE,CAAC,GACnDf,EAAwB,GACxBU,EAAM0C,KACR;GAAC;GAAA,IACDC,YAAS;IAAA,OAAE3C,EAAM2C;GAAS;EAAA,GAatB1C,CAAI,GAAA,IAAA,EAAA,GAAA2C,EAAA1B,SAEPlB,EAAM6C,QAAQ,GAAA3B;CAAA,EAAA,CAAA;AAGrB;AAAC4B,EAAA,CAAA,OAAA,CAAA"}
+{"version":3,"file":"ToggleGroupItem.js","names":["mergeProps","onCleanup","onMount","splitProps","JSX","clsx","toggleVariants","callEventHandler","useToggleGroupContext","ToggleGroupValue","toggleGroupItemVariants","ToggleGroupItemProps","ToggleGroupItem","props","TValue","Element","ctx","merged","type","const","local","rest","elementRef","HTMLButtonElement","variant","size","pressed","isPressed","value","disabled","tabIndex","highlighted","highlightedValue","isUsable","undefined","isFirstEnabled","registerItem","element","_el$","_tmpl$","addEventListener","e","setHighlightedValue","onFocus","$$click","onClick","defaultPrevented","toggleItem","currentTarget","_$use","el","_$spread","_$mergeProps","tabindex","data-variant","data-size","data-spacing","spacing","data-pressed","data-disabled","data-state","aria-pressed","class","classList","_$insert","children","_$delegateEvents","mergeProps","_$mergeProps","_$delegateEvents","mergeProps$1","_tmpl$","ToggleGroupItem","ctx","useToggleGroupContext","merged","props","local","rest","splitProps","elementRef","variant","size","pressed","disabled","tabIndex","highlighted","onMount","_el$","callEventHandler","use","el","spread","mergeProps","\"class\"","clsx","toggleVariants","toggleGroupItemVariants","insert","delegateEvents"],"sources":["../../../../src/components/toggle-group/ToggleGroupItem/ToggleGroupItem.tsx"],"sourcesContent":["import { mergeProps, onCleanup, onMount, splitProps, type JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { toggleVariants } from \"~/components/toggle/Toggle/Toggle.styles\";\nimport { callEventHandler } from \"~/utils\";\nimport { useToggleGroupContext } from \"../ToggleGroup/ToggleGroup.context\";\nimport type { ToggleGroupValue } from \"../ToggleGroup/ToggleGroup.types\";\nimport { toggleGroupItemVariants } from \"./ToggleGroupItem.styles\";\nimport type { ToggleGroupItemProps } from \"./ToggleGroupItem.types\";\n\n/**\n * ToggleGroupItem:ToggleGroup 内的两态按钮。\n *\n * - 选中值由 ToggleGroup 统一持有,点击通过 `ctx.toggleItem` 触发变更\n * - disabled 继承整组状态,可在 item 上单独禁用\n * - roving tabindex:整组只有一个 tab 停靠点,方向键在同组内移动焦点\n */\nexport function ToggleGroupItem<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(props: ToggleGroupItemProps<TValue>): JSX.Element {\n  // context 用宽值类型读取:item 无法从父级推导 group 的值类型,\n  // 自己的 TValue 始终可以传给宽类型参数\n  const ctx = useToggleGroupContext(\"ToggleGroupItem\");\n  const merged = mergeProps({ type: \"button\" as const }, props);\n\n  const [local, rest] = splitProps(merged, [\n    \"value\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"classList\",\n    \"disabled\",\n    \"type\",\n    \"onClick\",\n    \"onFocus\",\n    \"children\",\n  ]);\n\n  let elementRef: HTMLButtonElement | undefined;\n\n  // 组级未显式指定 variant/size 时,item 可单独覆盖\n  const variant = () => ctx.variant() ?? local.variant ?? \"default\";\n  const size = () => ctx.size() ?? local.size ?? \"default\";\n  const pressed = () => ctx.isPressed(local.value);\n  const disabled = () => ctx.disabled() || !!local.disabled;\n\n  // roving tabindex:高亮 item 持 0;高亮缺失或指向不可用 item(disabled/卸载)时,\n  // 首个可用 item 持 0 作为键盘起点,避免整组键盘不可达\n  const tabIndex = () => {\n    if (disabled()) return -1;\n    const highlighted = ctx.highlightedValue();\n    if (highlighted === local.value && ctx.isUsable(local.value)) return 0;\n    if (\n      (highlighted === undefined || !ctx.isUsable(highlighted)) &&\n      ctx.isFirstEnabled(local.value)\n    ) {\n      return 0;\n    }\n    return -1;\n  };\n\n  onMount(() => {\n    onCleanup(\n      ctx.registerItem({\n        value: local.value,\n        disabled,\n        element: elementRef!,\n      }),\n    );\n  });\n\n  return (\n    <button\n      ref={(el) => {\n        elementRef = el;\n      }}\n      type={local.type}\n      disabled={disabled()}\n      tabindex={tabIndex()}\n      data-slot=\"toggle-group-item\"\n      data-variant={variant()}\n      data-size={size()}\n      data-spacing={ctx.spacing()}\n      data-pressed={pressed() ? \"\" : null}\n      data-disabled={disabled() ? \"\" : null}\n      data-state={pressed() ? \"on\" : \"off\"}\n      aria-pressed={pressed()}\n      class={clsx(\n        toggleVariants({ variant: variant(), size: size() }),\n        toggleGroupItemVariants(),\n        local.class,\n      )}\n      classList={local.classList}\n      onClick={(e) => {\n        // 用户回调优先,可用 preventDefault() 阻止本次选中\n        callEventHandler(local.onClick, e);\n        if (!e.defaultPrevented && !disabled()) {\n          ctx.toggleItem(local.value, e, e.currentTarget);\n        }\n      }}\n      onFocus={(e) => {\n        // 聚焦更新高亮(roving focus 起点)\n        if (!disabled()) ctx.setHighlightedValue(local.value);\n        callEventHandler(local.onFocus, e);\n      }}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgBY,EAEdC,GAAkD;CAGlD,IAAMG,IAAMR,EAAsB,iBAAiB,GAC7CS,IAASjB,EAAW,EAAEkB,MAAM,SAAkB,GAAGL,CAAK,GAEtD,CAACO,GAAOC,KAAQlB,EAAWc,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEGK,GAGEE,UAAgBR,EAAIQ,QAAQ,KAAKJ,EAAMI,WAAW,WAClDC,UAAaT,EAAIS,KAAK,KAAKL,EAAMK,QAAQ,WACzCC,UAAgBV,EAAIW,UAAUP,EAAMQ,KAAK,GACzCC,UAAiBb,EAAIa,SAAS,KAAK,CAAC,CAACT,EAAMS,UAI3CC,UAAiB;EACrB,IAAID,EAAS,GAAG,OAAO;EACvB,IAAME,IAAcf,EAAIgB,iBAAiB;EAQzC,OAPID,MAAgBX,EAAMQ,SAASZ,EAAIiB,SAASb,EAAMQ,KAAK,MAExDG,MAAgBG,KAAAA,KAAa,CAAClB,EAAIiB,SAASF,CAAW,MACvDf,EAAImB,eAAef,EAAMQ,KAAK,IAEvB,IAEF;CACT;CAYA,OAVA1B,QAAc;EACZD,EACEe,EAAIoB,aAAa;GACfR,OAAOR,EAAMQ;GACbC;GACAQ,SAASf;EACX,CAAC,CACH;CACF,CAAC,UAED;EAAA,IAAAgB,IAAAC,EAAA;EAoCmB,OApCnBD,EAAAE,iBAAA,UA6BcC,MAAM;GAGdlC,AADKsB,EAAS,KAAGb,EAAI0B,oBAAoBtB,EAAMQ,KAAK,GACpDrB,EAAiBa,EAAMuB,SAASF,CAAC;EACnC,CAAC,GAAAH,EAAAM,WAXSH,MAAM;GAGd,AADAlC,EAAiBa,EAAMyB,SAASJ,CAAC,GAC7B,CAACA,EAAEK,oBAAoB,CAACjB,EAAS,KACnCb,EAAI+B,WAAW3B,EAAMQ,OAAOa,GAAGA,EAAEO,aAAa;EAElD,GAACC,GA1BKC,MAAO;GACX5B,IAAa4B;EACf,GAACZ,CAAA,GAAAa,EAAAb,GAAAc,EAAA;GAAA,IACDlC,OAAI;IAAA,OAAEE,EAAMF;GAAI;GAAA,IAChBW,WAAQ;IAAA,OAAEA,EAAS;GAAC;GAAA,IACpBwB,WAAQ;IAAA,OAAEvB,EAAS;GAAC;GAAA,IAAA,iBAAA;IAAA,OAENN,EAAQ;GAAC;GAAA,IAAA,cAAA;IAAA,OACZC,EAAK;GAAC;GAAA,IAAA,iBAAA;IAAA,OACHT,EAAIyC,QAAQ;GAAC;GAAA,IAAA,iBAAA;IAAA,OACb/B,EAAQ,IAAI,KAAK;GAAI;GAAA,IAAA,kBAAA;IAAA,OACpBG,EAAS,IAAI,KAAK;GAAI;GAAA,IAAA,eAAA;IAAA,OACzBH,EAAQ,IAAI,OAAO;GAAK;GAAA,IAAA,iBAAA;IAAA,OACtBA,EAAQ;GAAC;GAAA,IAAAoE,QAAA;IAAA,OAChBzF,EACLC,EAAe;KAAEkB,SAASA,EAAQ;KAAGC,MAAMA,EAAK;IAAE,CAAC,GACnDf,EAAwB,GACxBU,EAAM0C,KACR;GAAC;GAAA,IACDC,YAAS;IAAA,OAAE3C,EAAM2C;GAAS;EAAA,GAatB1C,CAAI,GAAA,IAAA,EAAA,GAAA2C,EAAA1B,SAEPlB,EAAM6C,QAAQ,GAAA3B;CAAA,EAAA,CAAA;AAGrB;AAAC4B,EAAA,CAAA,OAAA,CAAA"}

package/dist/components/tooltip/TooltipContent/TooltipContent.js

@@ -1,6 +1,6 @@
 import { clsx as e } from "../../../utils/clsx.js";
 import { getAlignment as t, getSide as n } from "../../../lib/positioner/core/placement.js";
-import { getTransformOrigin as r } from "./TooltipContent.utils.js";
+import { getTransformOrigin as r } from "../../../lib/positioner/utils/floating.js";
 import { useTooltipContent as i } from "./useTooltipContent.js";
 import { TooltipContentContext as a } from "./TooltipContent.context.js";
 import { Portal as o, createComponent as s, effect as c, insert as l, mergeProps as u, setAttribute as d, spread as f, style as p, template as m, use as h } from "solid-js/web";

package/dist/components/tooltip/TooltipContent/TooltipContent.utils.d.ts

@@ -1,58 +1,14 @@
-import { Middleware, Placement, Side, Alignment } from '../../../lib';
-/**
- * 把 shadcn/Radix 风格的 side + align 拆分参数，转换成核心库统一用的
- * `Placement` 字符串（比如 side='top' + align='start' → 'top-start'）。
- * align 是 'center'（默认对齐、不偏移）时不带后缀，直接是 side 本身。
- */
-export declare function toPhysicalSide(side: Side | "inline-start" | "inline-end", dir?: string): Side;
-export declare function toPlacement(side: Side | "inline-start" | "inline-end", align: Alignment | "center", dir?: string): Placement;
-/**
- * 根据最终生效的 placement，算出缩放动画应该以哪个点为锚点（CSS transform-origin）。
- * 锚点应该落在"贴近 trigger 的那条边"上——比如 placement 是 'top'（content 在
- * trigger 上方），锚点就该是 content 自己的底边，缩放动画看起来才会像是
- * "从 trigger 那里长出来"，而不是原地放大缩小（默认的 transform-origin 是
- * 几何中心 50% 50%，视觉上和"从哪个方向冒出来"没有任何关联）。
- * 交叉轴（对齐方向）同理：align 是 start 就贴左/上边，end 就贴右/下边。
- */
-export declare function getTransformOrigin(placement: Placement): string;
+import { Middleware } from '../../../lib';
+export { toPhysicalSide, toPlacement, getTransformOrigin, } from '../../../lib';
 export interface BuildTooltipMiddlewareOptions {
     sideOffset: number;
-    /** 沿交叉轴（对齐方向）的偏移，对应 offset middleware 的 crossAxis */
+    /** 沿交叉轴(对齐方向)的偏移,对应 offset middleware 的 crossAxis */
     alignOffset: number;
     collisionPadding: number;
     arrowElement: () => Element | undefined;
 }
 /**
- * Tooltip 定位管线的固定配方：
- *
- * 1. offset      — 沿主轴保持 sideOffset 间距，沿交叉轴偏移 alignOffset
- * 2. flip        — 主轴方向放不下就翻到对面（比如上方没空间就翻到下方）
- * 3. shift       — 翻转后仍溢出，就在不换边的前提下贴边平移
- * 4. arrow       — 算出箭头相对 content 的偏移，让它始终指向 trigger 中心
- * 5. hide        — trigger 被自己的滚动容器完全裁掉时标记隐藏
- * 6. containingBlockOffset — 修正祖先元素 transform 等属性导致的 position:fixed
- *    包含块偏移（demo 里通常不出现，放进有大量 transform 的真实项目后才会暴露，
- *    详见该 middleware 自身的注释）。放在最后一位，因为它修正的是"最终要写进
- *    DOM 的坐标"，前面几步都在统一的视口坐标系里计算，不受这个偏移影响。
- *
- * 特意没有用 size 中间件去动态限制 max-height、允许内容超长时滚动——
- * tooltip 不应该出现滚动条（这不是本库的一般性限制，是 tooltip 这个组件
- * 类型本身该有的样子，shadcn/Radix 的 Tooltip 也是这么做的）。宽度上限
- * 靠 TooltipContent.tsx 里静态的 `max-w-xs` class 兜底，让文字自然换行；
- * 高度完全不做限制，交给内容自身的实际高度决定。
- *
- * 这个决定还有一个技术上的原因：早先的实现里试过用 size 中间件动态算
- * max-height 配合 overflow:auto 实现"超长内容可滚动"，结果发现内层元素
- * 一旦同时具备 overflow:auto 和入场动画（zoom-in-95 会给它加一个 transform），
- * 动画播放期间 transform 会让这个元素变成箭头新的包含块（CSS 规范：非 none
- * 的 transform 会创建包含块），箭头戳出内层边缘的那部分又会被算进内层的
- * 可滚动溢出区域——于是出现了"打开瞬间闪一下滚动条，箭头跟着被遮住，
- * 动画播完滚动条消失、箭头才重新出现"这种诡异现象。去掉滚动能力后，
- * 这个耦合从根上就不存在了。
- *
- * 顺序不能随便换：arrow 必须在 shift/flip 之后（要用最终坐标才能算对偏移），
- * containingBlockOffset 必须在所有其他 middleware 之后。
- *
- * 单独抽成函数是为了让 useTooltipContent 保持简洁，也方便针对这套管线单独测试。
+ * Tooltip 定位管线:offset → flip → shift → arrow → hide → containingBlockOffset。
+ * 与 Popover/HoverCard 共用 createFloatingMiddleware,只多了 arrow。
  */
 export declare function createTooltipMiddleware(options: BuildTooltipMiddlewareOptions): Middleware[];

package/dist/components/tooltip/TooltipContent/TooltipContent.utils.js

@@ -1,44 +1,15 @@
-import { getAlignment as e, getSide as t } from "../../../lib/positioner/core/placement.js";
-import { offset as n } from "../../../lib/positioner/middleware/offset.js";
-import { shift as r } from "../../../lib/positioner/middleware/shift.js";
-import { flip as i } from "../../../lib/positioner/middleware/flip.js";
-import { arrow as a } from "../../../lib/positioner/middleware/arrow.js";
-import { hide as o } from "../../../lib/positioner/middleware/hide.js";
-import { containingBlockOffset as s } from "../../../lib/positioner/middleware/containing-block-offset.js";
+import { createFloatingMiddleware as e, getTransformOrigin as t, toPlacement as n } from "../../../lib/positioner/utils/floating.js";
 //#region src/components/tooltip/TooltipContent/TooltipContent.utils.ts
-function c(e, t) {
-	return e === "inline-start" ? t === "rtl" ? "right" : "left" : e === "inline-end" ? t === "rtl" ? "left" : "right" : e;
-}
-function l(e, t, n) {
-	let r = c(e, n);
-	return t === "center" ? r : `${r}-${t}`;
-}
-function u(n) {
-	let r = t(n), i = e(n), a = i === "start" ? "0%" : i === "end" ? "100%" : "50%";
-	switch (r) {
-		case "top": return `${a} 100%`;
-		case "bottom": return `${a} 0%`;
-		case "left": return `100% ${a}`;
-		case "right": return `0% ${a}`;
-	}
-}
-function d(e) {
-	return [
-		n({
-			mainAxis: e.sideOffset,
-			crossAxis: e.alignOffset
-		}),
-		i(),
-		r({ padding: e.collisionPadding }),
-		a({
-			element: e.arrowElement,
-			padding: 6
-		}),
-		o(),
-		s()
-	];
+function r(t) {
+	return e({
+		sideOffset: t.sideOffset,
+		alignOffset: t.alignOffset,
+		collisionPadding: t.collisionPadding,
+		arrowElement: t.arrowElement,
+		arrowPadding: 6
+	});
 }
 //#endregion
-export { d as createTooltipMiddleware, u as getTransformOrigin, c as toPhysicalSide, l as toPlacement };
+export { r as createTooltipMiddleware, t as getTransformOrigin, n as toPlacement };
 
 //# sourceMappingURL=TooltipContent.utils.js.map

package/dist/components/tooltip/TooltipContent/TooltipContent.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.utils.js","names":["toPhysicalSide","side","dir","toPlacement","physical","align","getTransformOrigin","getSide","placement","getAlignment","crossAxisOrigin","createTooltipMiddleware","offset","options","flip","shift","arrow","hide","containingBlockOffset"],"sources":["../../../../src/components/tooltip/TooltipContent/TooltipContent.utils.ts"],"sourcesContent":["import {\n  offset,\n  flip,\n  shift,\n  arrow,\n  hide,\n  containingBlockOffset,\n  getSide,\n  getAlignment,\n  type Middleware,\n  type Placement,\n  type Side,\n  type Alignment,\n} from \"~/lib\";\n\n/**\n * 把 shadcn/Radix 风格的 side + align 拆分参数，转换成核心库统一用的\n * `Placement` 字符串（比如 side='top' + align='start' → 'top-start'）。\n * align 是 'center'（默认对齐、不偏移）时不带后缀，直接是 side 本身。\n */\nexport function toPhysicalSide(\n  side: Side | \"inline-start\" | \"inline-end\",\n  dir?: string,\n): Side {\n  if (side === \"inline-start\") {\n    return dir === \"rtl\" ? \"right\" : \"left\";\n  }\n  if (side === \"inline-end\") {\n    return dir === \"rtl\" ? \"left\" : \"right\";\n  }\n  return side;\n}\n\nexport function toPlacement(\n  side: Side | \"inline-start\" | \"inline-end\",\n  align: Alignment | \"center\",\n  dir?: string,\n): Placement {\n  const physical = toPhysicalSide(side, dir);\n  return align === \"center\" ? physical : (`${physical}-${align}` as Placement);\n}\n\n/**\n * 根据最终生效的 placement，算出缩放动画应该以哪个点为锚点（CSS transform-origin）。\n * 锚点应该落在\"贴近 trigger 的那条边\"上——比如 placement 是 'top'（content 在\n * trigger 上方），锚点就该是 content 自己的底边，缩放动画看起来才会像是\n * \"从 trigger 那里长出来\"，而不是原地放大缩小（默认的 transform-origin 是\n * 几何中心 50% 50%，视觉上和\"从哪个方向冒出来\"没有任何关联）。\n * 交叉轴（对齐方向）同理：align 是 start 就贴左/上边，end 就贴右/下边。\n */\nexport function getTransformOrigin(placement: Placement): string {\n  const side = getSide(placement);\n  const align = getAlignment(placement);\n  const crossAxisOrigin =\n    align === \"start\" ? \"0%\" : align === \"end\" ? \"100%\" : \"50%\";\n\n  switch (side) {\n    case \"top\":\n      return `${crossAxisOrigin} 100%`;\n    case \"bottom\":\n      return `${crossAxisOrigin} 0%`;\n    case \"left\":\n      return `100% ${crossAxisOrigin}`;\n    case \"right\":\n      return `0% ${crossAxisOrigin}`;\n  }\n}\n\nexport interface BuildTooltipMiddlewareOptions {\n  sideOffset: number;\n  /** 沿交叉轴（对齐方向）的偏移，对应 offset middleware 的 crossAxis */\n  alignOffset: number;\n  collisionPadding: number;\n  arrowElement: () => Element | undefined;\n}\n\n/**\n * Tooltip 定位管线的固定配方：\n *\n * 1. offset      — 沿主轴保持 sideOffset 间距，沿交叉轴偏移 alignOffset\n * 2. flip        — 主轴方向放不下就翻到对面（比如上方没空间就翻到下方）\n * 3. shift       — 翻转后仍溢出，就在不换边的前提下贴边平移\n * 4. arrow       — 算出箭头相对 content 的偏移，让它始终指向 trigger 中心\n * 5. hide        — trigger 被自己的滚动容器完全裁掉时标记隐藏\n * 6. containingBlockOffset — 修正祖先元素 transform 等属性导致的 position:fixed\n *    包含块偏移（demo 里通常不出现，放进有大量 transform 的真实项目后才会暴露，\n *    详见该 middleware 自身的注释）。放在最后一位，因为它修正的是\"最终要写进\n *    DOM 的坐标\"，前面几步都在统一的视口坐标系里计算，不受这个偏移影响。\n *\n * 特意没有用 size 中间件去动态限制 max-height、允许内容超长时滚动——\n * tooltip 不应该出现滚动条（这不是本库的一般性限制，是 tooltip 这个组件\n * 类型本身该有的样子，shadcn/Radix 的 Tooltip 也是这么做的）。宽度上限\n * 靠 TooltipContent.tsx 里静态的 `max-w-xs` class 兜底，让文字自然换行；\n * 高度完全不做限制，交给内容自身的实际高度决定。\n *\n * 这个决定还有一个技术上的原因：早先的实现里试过用 size 中间件动态算\n * max-height 配合 overflow:auto 实现\"超长内容可滚动\"，结果发现内层元素\n * 一旦同时具备 overflow:auto 和入场动画（zoom-in-95 会给它加一个 transform），\n * 动画播放期间 transform 会让这个元素变成箭头新的包含块（CSS 规范：非 none\n * 的 transform 会创建包含块），箭头戳出内层边缘的那部分又会被算进内层的\n * 可滚动溢出区域——于是出现了\"打开瞬间闪一下滚动条，箭头跟着被遮住，\n * 动画播完滚动条消失、箭头才重新出现\"这种诡异现象。去掉滚动能力后，\n * 这个耦合从根上就不存在了。\n *\n * 顺序不能随便换：arrow 必须在 shift/flip 之后（要用最终坐标才能算对偏移），\n * containingBlockOffset 必须在所有其他 middleware 之后。\n *\n * 单独抽成函数是为了让 useTooltipContent 保持简洁，也方便针对这套管线单独测试。\n */\nexport function createTooltipMiddleware(\n  options: BuildTooltipMiddlewareOptions,\n): Middleware[] {\n  return [\n    offset({ mainAxis: options.sideOffset, crossAxis: options.alignOffset }),\n    flip(),\n    shift({ padding: options.collisionPadding }),\n    arrow({ element: options.arrowElement, padding: 6 }),\n    hide(),\n    containingBlockOffset(),\n  ];\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgBA,EACd,GACA,GACM;CAON,OANIC,MAAS,iBACJC,MAAQ,QAAQ,UAAU,SAE/BD,MAAS,eACJC,MAAQ,QAAQ,SAAS,UAE3BD;AACT;AAEA,SAAgBE,EACd,GACA,GACA,GACW;CACX,IAAMC,IAAWJ,EAAeC,GAAMC,CAAG;CACzC,OAAOG,MAAU,WAAWD,IAAY,GAAGA,EAAS,GAAGC;AACzD;AAUA,SAAgBC,EAAmB,GAA8B;CAC/D,IAAML,IAAOM,EAAQC,CAAS,GACxBH,IAAQI,EAAaD,CAAS,GAC9BE,IACJL,MAAU,UAAU,OAAOA,MAAU,QAAQ,SAAS;CAExD,QAAQJ,GAAR;EACE,KAAK,OACH,OAAO,GAAGS,EAAgB;EAC5B,KAAK,UACH,OAAO,GAAGA,EAAgB;EAC5B,KAAK,QACH,OAAO,QAAQA;EACjB,KAAK,SACH,OAAO,MAAMA;CACjB;AACF;AA2CA,SAAgBC,EACd,GACc;CACd,OAAO;EACLC,EAAO;GAAE,UAAUC,EAAQ;GAAY,WAAWA,EAAQ;EAAY,CAAC;EACvEC,EAAK;EACLC,EAAM,EAAE,SAASF,EAAQ,iBAAiB,CAAC;EAC3CG,EAAM;GAAE,SAASH,EAAQ;GAAc,SAAS;EAAE,CAAC;EACnDI,EAAK;EACLC,EAAsB;CACxB;AACF"}
+{"version":3,"file":"TooltipContent.utils.js","names":["createTooltipMiddleware","createFloatingMiddleware","options","getTransformOrigin","toPlacement"],"sources":["../../../../src/components/tooltip/TooltipContent/TooltipContent.utils.ts"],"sourcesContent":["import { createFloatingMiddleware, type Middleware } from \"~/lib\";\n\n// 定位相关的纯函数已抽到 ~/lib/positioner/utils/floating,这里保留原有导出名,\n// 避免 Tooltip 内部 import 变动。\nexport {\n  toPhysicalSide,\n  toPlacement,\n  getTransformOrigin,\n} from \"~/lib\";\n\nexport interface BuildTooltipMiddlewareOptions {\n  sideOffset: number;\n  /** 沿交叉轴(对齐方向)的偏移,对应 offset middleware 的 crossAxis */\n  alignOffset: number;\n  collisionPadding: number;\n  arrowElement: () => Element | undefined;\n}\n\n/**\n * Tooltip 定位管线:offset → flip → shift → arrow → hide → containingBlockOffset。\n * 与 Popover/HoverCard 共用 createFloatingMiddleware,只多了 arrow。\n */\nexport function createTooltipMiddleware(\n  options: BuildTooltipMiddlewareOptions,\n): Middleware[] {\n  return createFloatingMiddleware({\n    sideOffset: options.sideOffset,\n    alignOffset: options.alignOffset,\n    collisionPadding: options.collisionPadding,\n    arrowElement: options.arrowElement,\n    arrowPadding: 6,\n  });\n}\n"],"mappings":";;AAsBA,SAAgBA,EACd,GACc;CACd,OAAOC,EAAyB;EAC9B,YAAYC,EAAQ;EACpB,aAAaA,EAAQ;EACrB,kBAAkBA,EAAQ;EAC1B,cAAcA,EAAQ;EACtB,cAAc;CAChB,CAAC;AACH"}

package/dist/components/tooltip/TooltipContent/usePresence.d.ts

@@ -0,0 +1,27 @@
+import { Accessor } from 'solid-js';
+/** 没有触发任何 CSS animation 时的兜底卸载延迟（ms） */
+export declare const EXIT_FALLBACK_MS = 300;
+export interface UsePresenceOptions {
+    /** 逻辑上是否应该打开 */
+    visible: Accessor<boolean>;
+    /** 真正承载进出场动画的元素（没有它就无法等 animationend） */
+    element: Accessor<HTMLElement | undefined>;
+    /**
+     * 一次性询问"这次关闭是否要跳过退场动画"（例如被同组的另一个浮层抢占，
+     * 必须立即卸载以免两个浮层同时出现在屏幕上）。
+     */
+    consumeSuppressExitAnimation: () => boolean;
+    /** 兜底卸载延迟，默认 300ms */
+    fallbackMs?: number;
+}
+/**
+ * 退场动画支持（Presence）：
+ *
+ * `visible` 从 true 变 false 时不立刻卸载节点——先让调用方把 `data-state` 切到
+ * closed 触发退场动画，等内容元素自己的 `animationend` 触发后才把 `mounted`
+ * 置 false，交给 `<Show>` 卸载。若动画永远不会触发（没装动画库、只用了
+ * transition 而自定义样式里没有 @keyframes），则由兜底定时器收尾。
+ *
+ * 单次关闭只会卸载一次：animationend 与兜底定时器都会在 `onCleanup` 里回收。
+ */
+export declare function usePresence(options: UsePresenceOptions): Accessor<boolean>;

package/dist/components/tooltip/TooltipContent/usePresence.js

@@ -0,0 +1,24 @@
+import { createEffect as e, createSignal as t, onCleanup as n } from "solid-js";
+function r(r) {
+	let i = r.fallbackMs ?? 300, [a, o] = t(r.visible());
+	return e((e) => {
+		let t = r.visible(), a = r.element();
+		if (t) o(!0);
+		else if (e && a) {
+			if (r.consumeSuppressExitAnimation()) o(!1);
+			else {
+				let e = (e) => {
+					e.target === a && o(!1);
+				};
+				a.addEventListener("animationend", e), n(() => a.removeEventListener("animationend", e));
+				let t = window.setTimeout(() => o(!1), i);
+				n(() => window.clearTimeout(t));
+			}
+		} else o(!1);
+		return t;
+	}, r.visible()), a;
+}
+//#endregion
+export { r as usePresence };
+
+//# sourceMappingURL=usePresence.js.map

package/dist/components/tooltip/TooltipContent/usePresence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePresence.js","names":["usePresence","fallbackMs","options","mounted","setMounted","createSignal","createEffect","visible","element","wasVisible","handleAnimationEnd","event","onCleanup","fallback"],"sources":["../../../../src/components/tooltip/TooltipContent/usePresence.ts"],"sourcesContent":["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\n/** 没有触发任何 CSS animation 时的兜底卸载延迟（ms） */\nexport const EXIT_FALLBACK_MS = 300;\n\nexport interface UsePresenceOptions {\n  /** 逻辑上是否应该打开 */\n  visible: Accessor<boolean>;\n  /** 真正承载进出场动画的元素（没有它就无法等 animationend） */\n  element: Accessor<HTMLElement | undefined>;\n  /**\n   * 一次性询问\"这次关闭是否要跳过退场动画\"（例如被同组的另一个浮层抢占，\n   * 必须立即卸载以免两个浮层同时出现在屏幕上）。\n   */\n  consumeSuppressExitAnimation: () => boolean;\n  /** 兜底卸载延迟，默认 300ms */\n  fallbackMs?: number;\n}\n\n/**\n * 退场动画支持（Presence）：\n *\n * `visible` 从 true 变 false 时不立刻卸载节点——先让调用方把 `data-state` 切到\n * closed 触发退场动画，等内容元素自己的 `animationend` 触发后才把 `mounted`\n * 置 false，交给 `<Show>` 卸载。若动画永远不会触发（没装动画库、只用了\n * transition 而自定义样式里没有 @keyframes），则由兜底定时器收尾。\n *\n * 单次关闭只会卸载一次：animationend 与兜底定时器都会在 `onCleanup` 里回收。\n */\nexport function usePresence(options: UsePresenceOptions): Accessor<boolean> {\n  const fallbackMs = options.fallbackMs ?? EXIT_FALLBACK_MS;\n  const [mounted, setMounted] = createSignal(options.visible());\n\n  createEffect<boolean>((wasVisible) => {\n    const visible = options.visible();\n    const element = options.element();\n\n    if (visible) {\n      setMounted(true);\n    } else if (wasVisible && element) {\n      if (options.consumeSuppressExitAnimation()) {\n        setMounted(false);\n      } else {\n        const handleAnimationEnd = (event: AnimationEvent) => {\n          // 忽略从子元素冒泡上来的 animationend，只认元素自己播放的那个动画\n          if (event.target !== element) return;\n          setMounted(false);\n        };\n        element.addEventListener(\"animationend\", handleAnimationEnd);\n        onCleanup(() =>\n          element.removeEventListener(\"animationend\", handleAnimationEnd),\n        );\n\n        const fallback = window.setTimeout(() => setMounted(false), fallbackMs);\n        onCleanup(() => window.clearTimeout(fallback));\n      }\n    } else {\n      // 走到这里必然 !visible（上面的 if 已排除 visible 分支），无需再判一次\n      setMounted(false);\n    }\n\n    return visible;\n  }, options.visible());\n\n  return mounted;\n}\n"],"mappings":";AA6BA,SAAgBA,EAAY,GAAgD;CAC1E,IAAMC,IAAaC,EAAQ,cAAA,KACrB,CAACC,GAASC,KAAcC,EAAaH,EAAQ,QAAQ,CAAC;CAiC5D,OA/BAI,GAAuB,MAAe;EACpC,IAAMC,IAAUL,EAAQ,QAAQ,GAC1BM,IAAUN,EAAQ,QAAQ;EAEhC,IAAIK,GACF,EAAW,EAAI;OACV,IAAIE,KAAcD,GAAS;GAChC,IAAIN,EAAQ,6BAA6B,GACvC,EAAW,EAAK;QACX;IACL,IAAMQ,KAAsB,MAA0B;KAEpD,AAAIC,EAAM,WAAWH,KACrBJ,EAAW,EAAK;IAClB;IAEA,AADAI,EAAQ,iBAAiB,gBAAgBE,CAAkB,GAC3DE,QACEJ,EAAQ,oBAAoB,gBAAgBE,CAAkB,CAChE;IAEA,IAAMG,IAAW,OAAO,iBAAiBT,EAAW,EAAK,GAAGH,CAAU;IACtE,QAAgB,OAAO,aAAaY,CAAQ,CAAC;GAC/C;EACF,OAEE,EAAW,EAAK;EAGlB,OAAON;CACT,GAAGL,EAAQ,QAAQ,CAAC,GAEbC;AACT"}

package/dist/components/tooltip/TooltipContent/useTooltipContent.js

@@ -1,28 +1,33 @@
 import { createPositioner as e } from "../../../lib/positioner/create-positioner.js";
-import { useTooltipContext as t } from "../Tooltip/Tooltip.context.js";
-import { createTooltipMiddleware as n, toPlacement as r } from "./TooltipContent.utils.js";
-import { createEffect as i, createMemo as a, createSignal as o, onCleanup as s } from "solid-js";
+import { toPlacement as t } from "../../../lib/positioner/utils/floating.js";
+import { useTooltipContext as n } from "../Tooltip/Tooltip.context.js";
+import { createTooltipMiddleware as r } from "./TooltipContent.utils.js";
+import { usePresence as i } from "./usePresence.js";
+import { createEffect as a, createMemo as o, createSignal as s, onCleanup as c } from "solid-js";
 //#region src/components/tooltip/TooltipContent/useTooltipContent.ts
-var c = 300;
 function l(l) {
-	let u = t("TooltipContent"), [d, f] = o(), [p, m] = o(), h = e(u.reference, u.floating, {
-		placement: () => r(l().side ?? "top", l().align ?? "center", l().dir),
+	let u = n("TooltipContent"), [d, f] = s(), [p, m] = s(), h = e(u.reference, u.floating, {
+		placement: () => t(l().side ?? "top", l().align ?? "center", l().dir),
 		strategy: "fixed",
-		middleware: () => n({
+		middleware: () => r({
 			sideOffset: l().sideOffset ?? 4,
 			alignOffset: l().alignOffset ?? 0,
 			collisionPadding: l().collisionPadding ?? 8,
 			arrowElement: d
 		})
-	}), g = a(() => u.open() && !h.middlewareData().hide?.referenceHidden), [_, v] = o("closed");
-	i(() => {
+	}), g = o(() => u.open() && !h.middlewareData().hide?.referenceHidden), [_, v] = s("closed");
+	a(() => {
 		if (g()) {
 			let e = requestAnimationFrame(() => v("open"));
-			s(() => cancelAnimationFrame(e));
+			c(() => cancelAnimationFrame(e));
 		} else v("closed");
 	});
-	let [y, b] = o(), [x, S] = o(g());
-	i(() => {
+	let [y, b] = s(), x = i({
+		visible: g,
+		element: p,
+		consumeSuppressExitAnimation: () => u.consumeSuppressExitAnimation()
+	});
+	return a(() => {
 		if (!x()) return;
 		let e = u.pendingSlideFrom();
 		if (!e || !h.isPositioned()) return;
@@ -34,32 +39,7 @@ function l(l) {
 			x: 0,
 			y: 0
 		}));
-	});
-	let C = a(() => {
-		let e = y();
-		if (!e) return {};
-		let t = e.x === 0 && e.y === 0;
-		return {
-			transform: `translate(${e.x}px, ${e.y}px)`,
-			transition: t ? "transform 150ms ease" : void 0
-		};
-	});
-	return i((e) => {
-		let t = g(), n = p();
-		if (t) S(!0);
-		else if (e && n) {
-			if (u.consumeSuppressExitAnimation()) S(!1);
-			else {
-				let e = (e) => {
-					e.target === n && S(!1);
-				};
-				n.addEventListener("animationend", e), s(() => n.removeEventListener("animationend", e));
-				let t = window.setTimeout(() => S(!1), c);
-				s(() => window.clearTimeout(t));
-			}
-		} else t || S(!1);
-		return t;
-	}, g()), {
+	}), {
 		ctx: u,
 		pos: h,
 		isVisible: g,
@@ -69,7 +49,15 @@ function l(l) {
 		setArrowElement: f,
 		contentElement: p,
 		setContentElement: m,
-		slideStyle: C
+		slideStyle: o(() => {
+			let e = y();
+			if (!e) return {};
+			let t = e.x === 0 && e.y === 0;
+			return {
+				transform: `translate(${e.x}px, ${e.y}px)`,
+				transition: t ? "transform 150ms ease" : void 0
+			};
+		})
 	};
 }
 //#endregion

package/dist/components/tooltip/TooltipContent/useTooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltipContent.js","names":["EXIT_FALLBACK_MS","useTooltipContent","ctx","useTooltipContext","arrowElement","setArrowElement","createSignal","contentElement","setContentElement","pos","createPositioner","toPlacement","props","createTooltipMiddleware","isVisible","createMemo","animationState","setAnimationState","raf","slideOffset","setSlideOffset","mounted","setMounted","from","dx","dy","slideStyle","offset","atRest","createEffect","visible","el","wasVisible","handleAnimationEnd","onCleanup","fallback"],"sources":["../../../../src/components/tooltip/TooltipContent/useTooltipContent.ts"],"sourcesContent":["import { createSignal, createMemo, createEffect, onCleanup } from \"solid-js\";\nimport { createPositioner, type Positioner } from \"~/lib\";\nimport { useTooltipContext } from \"../Tooltip/Tooltip.context\";\nimport { createTooltipMiddleware, toPlacement } from \"./TooltipContent.utils\";\nimport type { TooltipContentProps } from \"./TooltipContent.types\";\n\n/** 没有触发任何 CSS animation 时的兜底卸载延迟（ms）——比如没装 tailwindcss-animate、\n * 或者自定义样式只用了 transition 而不是 @keyframes，animationend 永远不会触发，\n * 避免元素卡在 DOM 里退不出去。 */\nconst EXIT_FALLBACK_MS = 300;\n\nexport interface UseTooltipContentResult {\n  ctx: ReturnType<typeof useTooltipContext>;\n  pos: Positioner;\n  /** 综合了 open 状态 + hide 中间件的 referenceHidden 判断，代表\"逻辑上应不应该打开\" */\n  isVisible: () => boolean;\n  /**\n   * 代表\"DOM 里要不要还留着这个节点\"。isVisible 变 false 之后，mounted 不会立刻\n   * 跟着变 false，而是等退场动画播完（或者兜底超时）才变——展示层应该用它来控制\n   * <Show>，而不是直接用 isVisible，否则退场动画根本来不及播放就被卸载了。\n   */\n  mounted: () => boolean;\n  /**\n   * 真正用来驱动 data-state（进而驱动 CSS 进出场动画 class）的状态，\n   * 展示层应该用它，而不是直接用 isVisible。\n   *\n   * 和 isVisible 的区别只在\"打开\"这一侧：isVisible 变 true 的瞬间，\n   * animationState 不会立刻跟着变 \"open\"，而是等一帧（requestAnimationFrame）\n   * 之后才变——这一帧的间隙用来让箭头（TooltipArrow）完成挂载、把自己注册给\n   * arrow middleware、拿到正确的位置偏移。如果不等这一帧，动画会在箭头位置\n   * 还没算对的时候就开始播放，播到一半箭头才\"跳\"到正确位置，看起来就像是\n   * 箭头比内容慢一拍——这正是因为内容的淡入/缩放靠的是 CSS 动画（父元素的\n   * opacity/transform 会连带影响所有子元素，包括箭头，两者本该同步），而箭头\n   * 的具体位置靠的是 JS 算出来的 left/top，这是两套完全独立的机制，只有当\n   * \"开始播放动画\"这个时间点晚于\"箭头位置算完\"，才能保证两者观感一致。\n   * 关闭这一侧不需要这个延迟，isVisible 变 false 时 animationState 立刻跟着变。\n   */\n  animationState: () => \"open\" | \"closed\";\n  arrowElement: () => Element | undefined;\n  setArrowElement: (el: Element) => void;\n  /** 内层内容元素（真正播放进出场动画的那一层），TooltipContent 需要把它 ref 进来 */\n  contentElement: () => HTMLElement | undefined;\n  setContentElement: (el: HTMLElement) => void;\n  /**\n   * 加在\"滑动层\"（定位层和内容层之间的中间那层）上的 style。\n   * 命中 TooltipGroup 抢占时会有一个非零初始偏移，下一帧起会用 CSS transition\n   * 平滑归零，从而制造出\"从旧 tooltip 位置滑到新位置\"的效果；平时是空对象，\n   * 不产生任何影响。\n   */\n  slideStyle: () => { transform?: string; transition?: string };\n}\n\nexport function useTooltipContent(\n  props: () => TooltipContentProps,\n): UseTooltipContentResult {\n  const ctx = useTooltipContext(\"TooltipContent\");\n  const [arrowElement, setArrowElement] = createSignal<Element>();\n  const [contentElement, setContentElement] = createSignal<HTMLElement>();\n\n  const pos = createPositioner(ctx.reference, ctx.floating, {\n    placement: () =>\n      toPlacement(\n        props().side ?? \"top\",\n        props().align ?? \"center\",\n        props().dir,\n      ),\n    strategy: \"fixed\",\n    middleware: () =>\n      createTooltipMiddleware({\n        sideOffset: props().sideOffset ?? 4,\n        alignOffset: props().alignOffset ?? 0,\n        collisionPadding: props().collisionPadding ?? 8,\n        arrowElement,\n      }),\n  });\n\n  // reference 完全滚出视口（比如所在容器被单独滚动）时，hide middleware 会标记\n  // referenceHidden，这里据此隐藏浮层，避免它悬空显示在一个已经看不到的触发器旁边。\n  const isVisible = createMemo(\n    () => ctx.open() && !pos.middlewareData().hide?.referenceHidden,\n  );\n\n  // --- 箭头和内容同步入场：延迟一帧再触发动画 class ---\n  // 见 UseTooltipContentResult.animationState 的注释：只有\"开始播放动画\"这个\n  // 时间点晚于\"箭头位置算完\"，才能保证箭头不会在动画播到一半时才跳到正确位置。\n  const [animationState, setAnimationState] = createSignal<\"open\" | \"closed\">(\n    \"closed\",\n  );\n\n  createEffect(() => {\n    if (isVisible()) {\n      const raf = requestAnimationFrame(() => setAnimationState(\"open\"));\n      onCleanup(() => cancelAnimationFrame(raf));\n    } else {\n      // 关闭不需要等——退场动画本来就是从\"当前已经落定的位置\"往外淡出/缩小，\n      // 不存在箭头位置还没算好这个问题，没理由延迟。\n      setAnimationState(\"closed\");\n    }\n  });\n\n  // --- TooltipGroup 抢占时的\"滑入\"过渡（FLIP 技术） ---\n  const [slideOffset, setSlideOffset] = createSignal<{\n    x: number;\n    y: number;\n  }>();\n\n  const [mounted, setMounted] = createSignal(isVisible());\n\n  createEffect(() => {\n    if (!mounted()) return;\n    const from = ctx.pendingSlideFrom();\n    if (!from) return;\n    // 必须等真正定位完成（知道自己算出来的最终坐标）才能算出\"要从哪滑过来\"的差值。\n    if (!pos.isPositioned()) return;\n\n    const dx = from.x - pos.x();\n    const dy = from.y - pos.y();\n    // 第一步：把偏移设成非零值——这一步和 floatingStyles() 的最终坐标叠加后，\n    // 视觉上让新 tooltip 一出现就恰好在旧 tooltip 原来的位置，没有任何跳动。\n    setSlideOffset({ x: dx, y: dy });\n    // 消费一次立刻清空，避免后续 autoUpdate（滚动/resize 触发的重新定位）\n    // 又把这次的偏移重新套用一遍。\n    ctx.clearPendingSlideFrom();\n\n    // 第二步：下一帧再把偏移量归零。因为这次更新带上了 transition（见下面\n    // slideStyle 的实现），浏览器会把\"从非零偏移回到 0\"这个变化平滑动画出来，\n    // 效果就是从旧位置滑到新位置。用 requestAnimationFrame 而不是同步归零，\n    // 是为了确保浏览器先真正画出第一帧（非零偏移、无 transition），\n    // 下一帧的变化才有\"起点\"可以过渡，不会被浏览器合并成一次跳变。\n    requestAnimationFrame(() => setSlideOffset({ x: 0, y: 0 }));\n  });\n\n  const slideStyle = createMemo(() => {\n    const offset = slideOffset();\n    if (!offset) return {};\n    const atRest = offset.x === 0 && offset.y === 0;\n    return {\n      transform: `translate(${offset.x}px, ${offset.y}px)`,\n      // 只有\"归零\"这一步才带 transition：非零的那一帧要求瞬间落位、不能有动画，\n      // 否则会先看到它从视口原点飞过来，而不是从旧 tooltip 的位置飞过来。\n      transition: atRest ? \"transform 150ms ease\" : undefined,\n    };\n  });\n\n  // --- 退场动画支持（Presence）---\n  // isVisible 从 true 变 false 的瞬间，不立刻让 <Show> 卸载节点：先把 data-state\n  // 切到 closed（触发退场动画的 CSS class），等这个节点自己的 animationend 触发\n  // （或者兜底超时）之后，才真正把 mounted 设为 false，交给 <Show> 卸载。\n  createEffect((wasVisible: boolean) => {\n    const visible = isVisible();\n    const el = contentElement();\n\n    if (visible) {\n      setMounted(true);\n    } else if (wasVisible && el) {\n      if (ctx.consumeSuppressExitAnimation()) {\n        // 被 TooltipGroup 抢占强制关闭：跳过退场动画，立即卸载，避免和正在\n        // 滑入的新 tooltip 同时出现在屏幕上（这是\"同时存在两个 tooltip\"这个\n        // bug 的根因——之前不管什么原因关闭，都统一走了退场动画那条路）。\n        setMounted(false);\n      } else {\n        const handleAnimationEnd = (e: AnimationEvent) => {\n          // 忽略从子元素冒泡上来的 animationend，只认内容元素自己播放的那个动画\n          if (e.target !== el) return;\n          setMounted(false);\n        };\n        el.addEventListener(\"animationend\", handleAnimationEnd);\n        onCleanup(() =>\n          el.removeEventListener(\"animationend\", handleAnimationEnd),\n        );\n\n        const fallback = window.setTimeout(\n          () => setMounted(false),\n          EXIT_FALLBACK_MS,\n        );\n        onCleanup(() => window.clearTimeout(fallback));\n      }\n    } else if (!visible) {\n      setMounted(false);\n    }\n\n    return visible;\n  }, isVisible());\n\n  return {\n    ctx,\n    pos,\n    isVisible,\n    mounted,\n    animationState,\n    arrowElement,\n    setArrowElement,\n    contentElement,\n    setContentElement,\n    slideStyle,\n  };\n}\n"],"mappings":";;;;;AASA,IAAMA,IAAmB;AA2CzB,SAAgBC,EACd,GACyB;CACzB,IAAMC,IAAMC,EAAkB,gBAAgB,GACxC,CAACC,GAAcC,KAAmBC,EAAsB,GACxD,CAACC,GAAgBC,KAAqBF,EAA0B,GAEhEG,IAAMC,EAAiBR,EAAI,WAAWA,EAAI,UAAU;EACxD,iBACES,EACEC,EAAM,CAAC,CAAC,QAAQ,OAChBA,EAAM,CAAC,CAAC,SAAS,UACjBA,EAAM,CAAC,CAAC,GACV;EACF,UAAU;EACV,kBACEC,EAAwB;GACtB,YAAYD,EAAM,CAAC,CAAC,cAAc;GAClC,aAAaA,EAAM,CAAC,CAAC,eAAe;GACpC,kBAAkBA,EAAM,CAAC,CAAC,oBAAoB;GAC9C;EACF,CAAC;CACL,CAAC,GAIKE,IAAYC,QACVb,EAAI,KAAK,KAAK,CAACO,EAAI,eAAe,CAAC,CAAC,MAAM,eAClD,GAKM,CAACO,GAAgBC,KAAqBX,EAC1C,QACF;CAEA,QAAmB;EACjB,IAAIQ,EAAU,GAAG;GACf,IAAMI,IAAM,4BAA4BD,EAAkB,MAAM,CAAC;GACjE,QAAgB,qBAAqBC,CAAG,CAAC;EAC3C,OAGE,EAAkB,QAAQ;CAE9B,CAAC;CAGD,IAAM,CAACC,GAAaC,KAAkBd,EAGnC,GAEG,CAACe,GAASC,KAAchB,EAAaQ,EAAU,CAAC;CAEtD,QAAmB;EACjB,IAAI,CAACO,EAAQ,GAAG;EAChB,IAAME,IAAOrB,EAAI,iBAAiB;EAGlC,IAFI,CAACqB,KAED,CAACd,EAAI,aAAa,GAAG;EAEzB,IAAMe,IAAKD,EAAK,IAAId,EAAI,EAAE,GACpBgB,IAAKF,EAAK,IAAId,EAAI,EAAE;EAa1B,AAVAW,EAAe;GAAE,GAAGI;GAAI,GAAGC;EAAG,CAAC,GAG/BvB,EAAI,sBAAsB,GAO1B,4BAA4BkB,EAAe;GAAE,GAAG;GAAG,GAAG;EAAE,CAAC,CAAC;CAC5D,CAAC;CAED,IAAMM,IAAaX,QAAiB;EAClC,IAAMY,IAASR,EAAY;EAC3B,IAAI,CAACQ,GAAQ,OAAO,CAAC;EACrB,IAAMC,IAASD,EAAO,MAAM,KAAKA,EAAO,MAAM;EAC9C,OAAO;GACL,WAAW,aAAaA,EAAO,EAAE,MAAMA,EAAO,EAAE;GAGhD,YAAYC,IAAS,yBAAyB,KAAA;EAChD;CACF,CAAC;CA0CD,OApCAC,GAAc,MAAwB;EACpC,IAAMC,IAAUhB,EAAU,GACpBiB,IAAKxB,EAAe;EAE1B,IAAIuB,GACF,EAAW,EAAI;OACV,IAAIE,KAAcD,GAAI;GAC3B,IAAI7B,EAAI,6BAA6B,GAInC,EAAW,EAAK;QACX;IACL,IAAM+B,KAAsB,MAAsB;KAEhD,AAAI,EAAE,WAAWF,KACjBT,EAAW,EAAK;IAClB;IAEA,AADAS,EAAG,iBAAiB,gBAAgBE,CAAkB,GACtDC,QACEH,EAAG,oBAAoB,gBAAgBE,CAAkB,CAC3D;IAEA,IAAME,IAAW,OAAO,iBAChBb,EAAW,EAAK,GACtBtB,CACF;IACA,QAAgB,OAAO,aAAamC,CAAQ,CAAC;GAC/C;EACF,OAAO,AAAKL,KACVR,EAAW,EAAK;EAGlB,OAAOQ;CACT,GAAGhB,EAAU,CAAC,GAEP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"useTooltipContent.js","names":["useTooltipContent","ctx","useTooltipContext","arrowElement","setArrowElement","createSignal","contentElement","setContentElement","pos","createPositioner","toPlacement","props","createTooltipMiddleware","isVisible","createMemo","animationState","setAnimationState","raf","slideOffset","setSlideOffset","mounted","usePresence","createEffect","from","dx","dy","offset","atRest"],"sources":["../../../../src/components/tooltip/TooltipContent/useTooltipContent.ts"],"sourcesContent":["import { createSignal, createMemo, createEffect, onCleanup } from \"solid-js\";\nimport { createPositioner, type Positioner } from \"~/lib\";\nimport { useTooltipContext } from \"../Tooltip/Tooltip.context\";\nimport { createTooltipMiddleware, toPlacement } from \"./TooltipContent.utils\";\nimport { usePresence } from \"./usePresence\";\nimport type { TooltipContentProps } from \"./TooltipContent.types\";\n\nexport interface UseTooltipContentResult {\n  ctx: ReturnType<typeof useTooltipContext>;\n  pos: Positioner;\n  /** 综合了 open 状态 + hide 中间件的 referenceHidden 判断，代表\"逻辑上应不应该打开\" */\n  isVisible: () => boolean;\n  /**\n   * 代表\"DOM 里要不要还留着这个节点\"。isVisible 变 false 之后，mounted 不会立刻\n   * 跟着变 false，而是等退场动画播完（或者兜底超时）才变——展示层应该用它来控制\n   * <Show>，而不是直接用 isVisible，否则退场动画根本来不及播放就被卸载了。\n   */\n  mounted: () => boolean;\n  /**\n   * 真正用来驱动 data-state（进而驱动 CSS 进出场动画 class）的状态，\n   * 展示层应该用它，而不是直接用 isVisible。\n   *\n   * 和 isVisible 的区别只在\"打开\"这一侧：isVisible 变 true 的瞬间，\n   * animationState 不会立刻跟着变 \"open\"，而是等一帧（requestAnimationFrame）\n   * 之后才变——这一帧的间隙用来让箭头（TooltipArrow）完成挂载、把自己注册给\n   * arrow middleware、拿到正确的位置偏移。如果不等这一帧，动画会在箭头位置\n   * 还没算对的时候就开始播放，播到一半箭头才\"跳\"到正确位置，看起来就像是\n   * 箭头比内容慢一拍——这正是因为内容的淡入/缩放靠的是 CSS 动画（父元素的\n   * opacity/transform 会连带影响所有子元素，包括箭头，两者本该同步），而箭头\n   * 的具体位置靠的是 JS 算出来的 left/top，这是两套完全独立的机制，只有当\n   * \"开始播放动画\"这个时间点晚于\"箭头位置算完\"，才能保证两者观感一致。\n   * 关闭这一侧不需要这个延迟，isVisible 变 false 时 animationState 立刻跟着变。\n   */\n  animationState: () => \"open\" | \"closed\";\n  arrowElement: () => Element | undefined;\n  setArrowElement: (el: Element) => void;\n  /** 内层内容元素（真正播放进出场动画的那一层），TooltipContent 需要把它 ref 进来 */\n  contentElement: () => HTMLElement | undefined;\n  setContentElement: (el: HTMLElement) => void;\n  /**\n   * 加在\"滑动层\"（定位层和内容层之间的中间那层）上的 style。\n   * 命中 TooltipGroup 抢占时会有一个非零初始偏移，下一帧起会用 CSS transition\n   * 平滑归零，从而制造出\"从旧 tooltip 位置滑到新位置\"的效果；平时是空对象，\n   * 不产生任何影响。\n   */\n  slideStyle: () => { transform?: string; transition?: string };\n}\n\nexport function useTooltipContent(\n  props: () => TooltipContentProps,\n): UseTooltipContentResult {\n  const ctx = useTooltipContext(\"TooltipContent\");\n  const [arrowElement, setArrowElement] = createSignal<Element>();\n  const [contentElement, setContentElement] = createSignal<HTMLElement>();\n\n  const pos = createPositioner(ctx.reference, ctx.floating, {\n    placement: () =>\n      toPlacement(\n        props().side ?? \"top\",\n        props().align ?? \"center\",\n        props().dir,\n      ),\n    strategy: \"fixed\",\n    middleware: () =>\n      createTooltipMiddleware({\n        sideOffset: props().sideOffset ?? 4,\n        alignOffset: props().alignOffset ?? 0,\n        collisionPadding: props().collisionPadding ?? 8,\n        arrowElement,\n      }),\n  });\n\n  // reference 完全滚出视口（比如所在容器被单独滚动）时，hide middleware 会标记\n  // referenceHidden，这里据此隐藏浮层，避免它悬空显示在一个已经看不到的触发器旁边。\n  const isVisible = createMemo(\n    () => ctx.open() && !pos.middlewareData().hide?.referenceHidden,\n  );\n\n  // --- 箭头和内容同步入场：延迟一帧再触发动画 class ---\n  // 见 UseTooltipContentResult.animationState 的注释：只有\"开始播放动画\"这个\n  // 时间点晚于\"箭头位置算完\"，才能保证箭头不会在动画播到一半时才跳到正确位置。\n  const [animationState, setAnimationState] = createSignal<\"open\" | \"closed\">(\n    \"closed\",\n  );\n\n  createEffect(() => {\n    if (isVisible()) {\n      const raf = requestAnimationFrame(() => setAnimationState(\"open\"));\n      onCleanup(() => cancelAnimationFrame(raf));\n    } else {\n      // 关闭不需要等——退场动画本来就是从\"当前已经落定的位置\"往外淡出/缩小，\n      // 不存在箭头位置还没算好这个问题，没理由延迟。\n      setAnimationState(\"closed\");\n    }\n  });\n\n  // --- TooltipGroup 抢占时的\"滑入\"过渡（FLIP 技术） ---\n  const [slideOffset, setSlideOffset] = createSignal<{\n    x: number;\n    y: number;\n  }>();\n\n  const mounted = usePresence({\n    visible: isVisible,\n    element: contentElement,\n    consumeSuppressExitAnimation: () => ctx.consumeSuppressExitAnimation(),\n  });\n\n  createEffect(() => {\n    if (!mounted()) return;\n    const from = ctx.pendingSlideFrom();\n    if (!from) return;\n    // 必须等真正定位完成（知道自己算出来的最终坐标）才能算出\"要从哪滑过来\"的差值。\n    if (!pos.isPositioned()) return;\n\n    const dx = from.x - pos.x();\n    const dy = from.y - pos.y();\n    // 第一步：把偏移设成非零值——这一步和 floatingStyles() 的最终坐标叠加后，\n    // 视觉上让新 tooltip 一出现就恰好在旧 tooltip 原来的位置，没有任何跳动。\n    setSlideOffset({ x: dx, y: dy });\n    // 消费一次立刻清空，避免后续 autoUpdate（滚动/resize 触发的重新定位）\n    // 又把这次的偏移重新套用一遍。\n    ctx.clearPendingSlideFrom();\n\n    // 第二步：下一帧再把偏移量归零。因为这次更新带上了 transition（见下面\n    // slideStyle 的实现），浏览器会把\"从非零偏移回到 0\"这个变化平滑动画出来，\n    // 效果就是从旧位置滑到新位置。用 requestAnimationFrame 而不是同步归零，\n    // 是为了确保浏览器先真正画出第一帧（非零偏移、无 transition），\n    // 下一帧的变化才有\"起点\"可以过渡，不会被浏览器合并成一次跳变。\n    requestAnimationFrame(() => setSlideOffset({ x: 0, y: 0 }));\n  });\n\n  const slideStyle = createMemo(() => {\n    const offset = slideOffset();\n    if (!offset) return {};\n    const atRest = offset.x === 0 && offset.y === 0;\n    return {\n      transform: `translate(${offset.x}px, ${offset.y}px)`,\n      // 只有\"归零\"这一步才带 transition：非零的那一帧要求瞬间落位、不能有动画，\n      // 否则会先看到它从视口原点飞过来，而不是从旧 tooltip 的位置飞过来。\n      transition: atRest ? \"transform 150ms ease\" : undefined,\n    };\n  });\n\n  return {\n    ctx,\n    pos,\n    isVisible,\n    mounted,\n    animationState,\n    arrowElement,\n    setArrowElement,\n    contentElement,\n    setContentElement,\n    slideStyle,\n  };\n}\n"],"mappings":";;;;;;;AAgDA,SAAgBA,EACd,GACyB;CACzB,IAAMC,IAAMC,EAAkB,gBAAgB,GACxC,CAACC,GAAcC,KAAmBC,EAAsB,GACxD,CAACC,GAAgBC,KAAqBF,EAA0B,GAEhEG,IAAMC,EAAiBR,EAAI,WAAWA,EAAI,UAAU;EACxD,iBACES,EACEC,EAAM,CAAC,CAAC,QAAQ,OAChBA,EAAM,CAAC,CAAC,SAAS,UACjBA,EAAM,CAAC,CAAC,GACV;EACF,UAAU;EACV,kBACEC,EAAwB;GACtB,YAAYD,EAAM,CAAC,CAAC,cAAc;GAClC,aAAaA,EAAM,CAAC,CAAC,eAAe;GACpC,kBAAkBA,EAAM,CAAC,CAAC,oBAAoB;GAC9C;EACF,CAAC;CACL,CAAC,GAIKE,IAAYC,QACVb,EAAI,KAAK,KAAK,CAACO,EAAI,eAAe,CAAC,CAAC,MAAM,eAClD,GAKM,CAACO,GAAgBC,KAAqBX,EAC1C,QACF;CAEA,QAAmB;EACjB,IAAIQ,EAAU,GAAG;GACf,IAAMI,IAAM,4BAA4BD,EAAkB,MAAM,CAAC;GACjE,QAAgB,qBAAqBC,CAAG,CAAC;EAC3C,OAGE,EAAkB,QAAQ;CAE9B,CAAC;CAGD,IAAM,CAACC,GAAaC,KAAkBd,EAGnC,GAEGe,IAAUC,EAAY;EAC1B,SAASR;EACT,SAASP;EACT,oCAAoCL,EAAI,6BAA6B;CACvE,CAAC;CAsCD,OApCAqB,QAAmB;EACjB,IAAI,CAACF,EAAQ,GAAG;EAChB,IAAMG,IAAOtB,EAAI,iBAAiB;EAGlC,IAFI,CAACsB,KAED,CAACf,EAAI,aAAa,GAAG;EAEzB,IAAMgB,IAAKD,EAAK,IAAIf,EAAI,EAAE,GACpBiB,IAAKF,EAAK,IAAIf,EAAI,EAAE;EAa1B,AAVAW,EAAe;GAAE,GAAGK;GAAI,GAAGC;EAAG,CAAC,GAG/BxB,EAAI,sBAAsB,GAO1B,4BAA4BkB,EAAe;GAAE,GAAG;GAAG,GAAG;EAAE,CAAC,CAAC;CAC5D,CAAC,GAcM;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YAtBiBL,QAAiB;GAClC,IAAMY,IAASR,EAAY;GAC3B,IAAI,CAACQ,GAAQ,OAAO,CAAC;GACrB,IAAMC,IAASD,EAAO,MAAM,KAAKA,EAAO,MAAM;GAC9C,OAAO;IACL,WAAW,aAAaA,EAAO,EAAE,MAAMA,EAAO,EAAE;IAGhD,YAAYC,IAAS,yBAAyB,KAAA;GAChD;EACF,CAYE;CACF;AACF"}

package/dist/hooks/useFontLoader.js

@@ -77,7 +77,7 @@ function o(n) {
 		a(c);
 	}), e(() => {
 		if (!s || c.length === 0) return;
-		let e = o ?? document.documentElement, n = c[0], r = e.getAttribute("data-lang");
+		let e = o, n = c[0], r = e.getAttribute("data-lang");
 		e.setAttribute("data-lang", n), t(() => {
 			r === null ? e.removeAttribute("data-lang") : e.setAttribute("data-lang", r);
 		});

package/dist/hooks/useFontLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFontLoader.js","names":["FONT_MAP","loaded","filterValidLangs","langs","lang","loadGoogleFonts","toLoad","families","family","weights","link","useFontLoader","options","validLangs","createEffect","apply","el","targetRef","prev","onCleanup"],"sources":["../../src/hooks/useFontLoader.ts"],"sourcesContent":["import { createEffect, onCleanup } from \"solid-js\";\n\n// ─── 字体配置表 ────────────────────────────────────────────────\nconst FONT_MAP = {\n  en: { family: \"Inter\", weights: \"400;500;700\" },\n  fr: { family: \"Inter\", weights: \"400;500;700\" },\n  de: { family: \"Inter\", weights: \"400;500;700\" },\n  ru: { family: \"Noto+Sans\", weights: \"400;500;700\" },\n  \"zh-hans\": { family: \"Noto+Sans+SC\", weights: \"400;500;700\" },\n  \"zh-hant\": { family: \"Noto+Sans+TC\", weights: \"400;500;700\" },\n  ja: { family: \"Noto+Sans+JP\", weights: \"400;500;700\" },\n  ko: { family: \"Noto+Sans+KR\", weights: \"400;500;700\" },\n  hi: { family: \"Noto+Sans+Devanagari\", weights: \"400;500;700\" },\n  th: { family: \"Noto+Sans+Thai\", weights: \"400;500;700\" },\n  bn: { family: \"Noto+Sans+Bengali\", weights: \"400;500;700\" },\n  ar: { family: \"Noto+Sans+Arabic\", weights: \"400;500;700\" },\n  he: { family: \"Noto+Sans+Hebrew\", weights: \"400;500;700\" },\n  fa: { family: \"Noto+Sans+Arabic\", weights: \"400;500;700\" },\n} as const satisfies Record<string, { family: string; weights: string }>;\n\nexport type Lang = keyof typeof FONT_MAP;\n\n// ─── 已加载字体缓存（模块级单例，避免重复插入） ──────────────\nconst loaded = new Set<string>();\n\nfunction filterValidLangs(langs: string[]): Lang[] {\n  return langs.filter((lang): lang is Lang => {\n    if (lang in FONT_MAP) return true;\n    if (!import.meta.env.PROD) {\n      console.warn(\n        `[useFontLoader] unsupported lang: \"${lang}\". ` +\n          `Supported values: ${Object.keys(FONT_MAP).join(\", \")}`,\n      );\n    }\n    return false;\n  });\n}\n\nexport interface UseFontLoaderOptions {\n  /**\n   * 要加载的字体对应的语言\n   *\n   * 默认为`en`\n   */\n  langs?: Lang | Lang[];\n\n  /**\n   * 指定 data-lang 写入的目标元素。\n   * - 传入 ref：仅在该元素上生效，适合局部语言切换。\n   * - 不传（undefined）：写入 ，全局生效。\n   * 卸载时自动恢复目标元素的原始 data-lang 值。\n   *\n   * apply 为 false 时此选项无效。\n   */\n  targetRef?: HTMLElement;\n\n  /**\n   * 是否将 data-lang 写入目标元素以应用字体样式。\n   * - true（默认）：写入 data-lang，字体立即生效。\n   * - false：仅预加载字体资源，不修改任何 DOM，\n   *   适合提前预热用户可能切换到的语言字体。\n   * @default\n   */\n  apply?: boolean;\n}\n\n/* ----------------------------------------------------------------\n   工具：插入 Google Fonts\n   ---------------------------------------------------------------- */\nfunction loadGoogleFonts(langs: Lang[]): void {\n  const toLoad = langs.filter((lang) => !loaded.has(FONT_MAP[lang].family));\n  if (toLoad.length === 0) return;\n\n  const families = [\n    ...new Set(\n      toLoad.map((lang) => {\n        const { family, weights } = FONT_MAP[lang];\n        return `family=${family}:wght@${weights}`;\n      }),\n    ),\n  ];\n\n  const link = document.createElement(\"link\");\n  link.rel = \"stylesheet\";\n  link.href = `https://fonts.googleapis.com/css2?${families.join(\"&\")}&display=swap`;\n\n  document.head.appendChild(link);\n  for (const lang of toLoad) {\n    loaded.add(FONT_MAP[lang].family);\n  }\n}\n\n// ─── Hook ─────────────────────────────────────────────────────\nexport function useFontLoader(options?: UseFontLoaderOptions) {\n  const {\n    langs = \"en\",\n    targetRef = document.documentElement,\n    apply = true,\n  } = options ?? {};\n\n  const langList = Array.isArray(langs) ? langs : [langs];\n  const validLangs = filterValidLangs(langList);\n\n  // --- 加载字体资源 ---\n  createEffect(() => {\n    loadGoogleFonts(validLangs);\n  });\n\n  // --- 将 data-lang 写入目标元素 ---\n  createEffect(() => {\n    if (!apply || validLangs.length === 0) return;\n\n    // targetRef 未传或 ref.current 尚未挂载时，回退到\n    const el = targetRef ?? document.documentElement;\n    const lang = validLangs[0];\n    const prev = el.getAttribute(\"data-lang\");\n\n    el.setAttribute(\"data-lang\", lang);\n\n    onCleanup(() => {\n      // 卸载时恢复：原本有值则还原，原本无则移除\n      if (prev === null) {\n        el.removeAttribute(\"data-lang\");\n      } else {\n        el.setAttribute(\"data-lang\", prev);\n      }\n    });\n  });\n}\n"],"mappings":";;AAGA,IAAMA,IAAW;CACf,IAAI;EAAE,QAAQ;EAAS,SAAS;CAAc;CAC9C,IAAI;EAAE,QAAQ;EAAS,SAAS;CAAc;CAC9C,IAAI;EAAE,QAAQ;EAAS,SAAS;CAAc;CAC9C,IAAI;EAAE,QAAQ;EAAa,SAAS;CAAc;CAClD,WAAW;EAAE,QAAQ;EAAgB,SAAS;CAAc;CAC5D,WAAW;EAAE,QAAQ;EAAgB,SAAS;CAAc;CAC5D,IAAI;EAAE,QAAQ;EAAgB,SAAS;CAAc;CACrD,IAAI;EAAE,QAAQ;EAAgB,SAAS;CAAc;CACrD,IAAI;EAAE,QAAQ;EAAwB,SAAS;CAAc;CAC7D,IAAI;EAAE,QAAQ;EAAkB,SAAS;CAAc;CACvD,IAAI;EAAE,QAAQ;EAAqB,SAAS;CAAc;CAC1D,IAAI;EAAE,QAAQ;EAAoB,SAAS;CAAc;CACzD,IAAI;EAAE,QAAQ;EAAoB,SAAS;CAAc;CACzD,IAAI;EAAE,QAAQ;EAAoB,SAAS;CAAc;AAC3D,GAKMC,oBAAS,IAAI,IAAY;AAE/B,SAASC,EAAiB,GAAyB;CACjD,OAAOC,EAAM,QAAQ,MACfC,KAAQJ,CAQb;AACH;AAiCA,SAASK,EAAgB,GAAqB;CAC5C,IAAMC,IAASH,EAAM,QAAQ,MAAS,CAACF,EAAO,IAAID,EAASI,EAAK,CAAC,MAAM,CAAC;CACxE,IAAIE,EAAO,WAAW,GAAG;CAEzB,IAAMC,IAAW,CACf,GAAG,IAAI,IACLD,EAAO,KAAK,MAAS;EACnB,IAAM,EAAE,WAAQ,eAAYN,EAASI;EACrC,OAAO,UAAUI,EAAO,QAAQC;CAClC,CAAC,CACH,CACF,GAEMC,IAAO,SAAS,cAAc,MAAM;CAI1C,AAHA,EAAK,MAAM,cACX,EAAK,OAAO,qCAAqCH,EAAS,KAAK,GAAG,EAAE,gBAEpE,SAAS,KAAK,YAAYG,CAAI;CAC9B,KAAK,IAAMN,KAAQE,GACjB,EAAO,IAAIN,EAASI,EAAK,CAAC,MAAM;AAEpC;AAGA,SAAgBO,EAAc,GAAgC;CAC5D,IAAM,EACJ,WAAQ,MACR,eAAY,SAAS,iBACrB,WAAQ,OACNC,KAAW,CAAC,GAGVC,IAAaX,EADF,MAAM,QAAQC,CAAK,IAAIA,IAAQ,CAACA,CAAK,CACV;CAQ5C,AALAW,QAAmB;EACjB,EAAgBD,CAAU;CAC5B,CAAC,GAGDC,QAAmB;EACjB,IAAI,CAACC,KAASF,EAAW,WAAW,GAAG;EAGvC,IAAMG,IAAKC,KAAa,SAAS,iBAC3Bb,IAAOS,EAAW,IAClBK,IAAOF,EAAG,aAAa,WAAW;EAIxC,AAFAA,EAAG,aAAa,aAAaZ,CAAI,GAEjCe,QAAgB;GAEd,AAAID,MAAS,OACXF,EAAG,gBAAgB,WAAW,IAE9BA,EAAG,aAAa,aAAaE,CAAI;EAErC,CAAC;CACH,CAAC;AACH"}
+{"version":3,"file":"useFontLoader.js","names":["FONT_MAP","loaded","filterValidLangs","langs","lang","loadGoogleFonts","toLoad","families","family","weights","link","useFontLoader","options","validLangs","createEffect","apply","el","targetRef","prev","onCleanup"],"sources":["../../src/hooks/useFontLoader.ts"],"sourcesContent":["import { createEffect, onCleanup } from \"solid-js\";\n\n// ─── 字体配置表 ────────────────────────────────────────────────\nconst FONT_MAP = {\n  en: { family: \"Inter\", weights: \"400;500;700\" },\n  fr: { family: \"Inter\", weights: \"400;500;700\" },\n  de: { family: \"Inter\", weights: \"400;500;700\" },\n  ru: { family: \"Noto+Sans\", weights: \"400;500;700\" },\n  \"zh-hans\": { family: \"Noto+Sans+SC\", weights: \"400;500;700\" },\n  \"zh-hant\": { family: \"Noto+Sans+TC\", weights: \"400;500;700\" },\n  ja: { family: \"Noto+Sans+JP\", weights: \"400;500;700\" },\n  ko: { family: \"Noto+Sans+KR\", weights: \"400;500;700\" },\n  hi: { family: \"Noto+Sans+Devanagari\", weights: \"400;500;700\" },\n  th: { family: \"Noto+Sans+Thai\", weights: \"400;500;700\" },\n  bn: { family: \"Noto+Sans+Bengali\", weights: \"400;500;700\" },\n  ar: { family: \"Noto+Sans+Arabic\", weights: \"400;500;700\" },\n  he: { family: \"Noto+Sans+Hebrew\", weights: \"400;500;700\" },\n  fa: { family: \"Noto+Sans+Arabic\", weights: \"400;500;700\" },\n} as const satisfies Record<string, { family: string; weights: string }>;\n\nexport type Lang = keyof typeof FONT_MAP;\n\n// ─── 已加载字体缓存（模块级单例，避免重复插入） ──────────────\nconst loaded = new Set<string>();\n\nfunction filterValidLangs(langs: string[]): Lang[] {\n  return langs.filter((lang): lang is Lang => {\n    if (lang in FONT_MAP) return true;\n    if (!import.meta.env.PROD) {\n      console.warn(\n        `[useFontLoader] unsupported lang: \"${lang}\". ` +\n          `Supported values: ${Object.keys(FONT_MAP).join(\", \")}`,\n      );\n    }\n    return false;\n  });\n}\n\nexport interface UseFontLoaderOptions {\n  /**\n   * 要加载的字体对应的语言\n   *\n   * 默认为`en`\n   */\n  langs?: Lang | Lang[];\n\n  /**\n   * 指定 data-lang 写入的目标元素。\n   * - 传入 ref：仅在该元素上生效，适合局部语言切换。\n   * - 不传（undefined）：写入 ，全局生效。\n   * 卸载时自动恢复目标元素的原始 data-lang 值。\n   *\n   * apply 为 false 时此选项无效。\n   */\n  targetRef?: HTMLElement;\n\n  /**\n   * 是否将 data-lang 写入目标元素以应用字体样式。\n   * - true（默认）：写入 data-lang，字体立即生效。\n   * - false：仅预加载字体资源，不修改任何 DOM，\n   *   适合提前预热用户可能切换到的语言字体。\n   * @default\n   */\n  apply?: boolean;\n}\n\n/* ----------------------------------------------------------------\n   工具：插入 Google Fonts\n   ---------------------------------------------------------------- */\nfunction loadGoogleFonts(langs: Lang[]): void {\n  const toLoad = langs.filter((lang) => !loaded.has(FONT_MAP[lang].family));\n  if (toLoad.length === 0) return;\n\n  const families = [\n    ...new Set(\n      toLoad.map((lang) => {\n        const { family, weights } = FONT_MAP[lang];\n        return `family=${family}:wght@${weights}`;\n      }),\n    ),\n  ];\n\n  const link = document.createElement(\"link\");\n  link.rel = \"stylesheet\";\n  link.href = `https://fonts.googleapis.com/css2?${families.join(\"&\")}&display=swap`;\n\n  document.head.appendChild(link);\n  for (const lang of toLoad) {\n    loaded.add(FONT_MAP[lang].family);\n  }\n}\n\n// ─── Hook ─────────────────────────────────────────────────────\nexport function useFontLoader(options?: UseFontLoaderOptions) {\n  const {\n    langs = \"en\",\n    targetRef = document.documentElement,\n    apply = true,\n  } = options ?? {};\n\n  const langList = Array.isArray(langs) ? langs : [langs];\n  const validLangs = filterValidLangs(langList);\n\n  // --- 加载字体资源 ---\n  createEffect(() => {\n    loadGoogleFonts(validLangs);\n  });\n\n  // --- 将 data-lang 写入目标元素 ---\n  createEffect(() => {\n    if (!apply || validLangs.length === 0) return;\n\n    // targetRef 在解构 options 时已默认成 document.documentElement\n    // （显式传 undefined 也会走默认值），因此这里不再需要二次兜底。\n    const el = targetRef;\n    const lang = validLangs[0];\n    const prev = el.getAttribute(\"data-lang\");\n\n    el.setAttribute(\"data-lang\", lang);\n\n    onCleanup(() => {\n      // 卸载时恢复：原本有值则还原，原本无则移除\n      if (prev === null) {\n        el.removeAttribute(\"data-lang\");\n      } else {\n        el.setAttribute(\"data-lang\", prev);\n      }\n    });\n  });\n}\n"],"mappings":";;AAGA,IAAMA,IAAW;CACf,IAAI;EAAE,QAAQ;EAAS,SAAS;CAAc;CAC9C,IAAI;EAAE,QAAQ;EAAS,SAAS;CAAc;CAC9C,IAAI;EAAE,QAAQ;EAAS,SAAS;CAAc;CAC9C,IAAI;EAAE,QAAQ;EAAa,SAAS;CAAc;CAClD,WAAW;EAAE,QAAQ;EAAgB,SAAS;CAAc;CAC5D,WAAW;EAAE,QAAQ;EAAgB,SAAS;CAAc;CAC5D,IAAI;EAAE,QAAQ;EAAgB,SAAS;CAAc;CACrD,IAAI;EAAE,QAAQ;EAAgB,SAAS;CAAc;CACrD,IAAI;EAAE,QAAQ;EAAwB,SAAS;CAAc;CAC7D,IAAI;EAAE,QAAQ;EAAkB,SAAS;CAAc;CACvD,IAAI;EAAE,QAAQ;EAAqB,SAAS;CAAc;CAC1D,IAAI;EAAE,QAAQ;EAAoB,SAAS;CAAc;CACzD,IAAI;EAAE,QAAQ;EAAoB,SAAS;CAAc;CACzD,IAAI;EAAE,QAAQ;EAAoB,SAAS;CAAc;AAC3D,GAKMC,oBAAS,IAAI,IAAY;AAE/B,SAASC,EAAiB,GAAyB;CACjD,OAAOC,EAAM,QAAQ,MACfC,KAAQJ,CAQb;AACH;AAiCA,SAASK,EAAgB,GAAqB;CAC5C,IAAMC,IAASH,EAAM,QAAQ,MAAS,CAACF,EAAO,IAAID,EAASI,EAAK,CAAC,MAAM,CAAC;CACxE,IAAIE,EAAO,WAAW,GAAG;CAEzB,IAAMC,IAAW,CACf,GAAG,IAAI,IACLD,EAAO,KAAK,MAAS;EACnB,IAAM,EAAE,WAAQ,eAAYN,EAASI;EACrC,OAAO,UAAUI,EAAO,QAAQC;CAClC,CAAC,CACH,CACF,GAEMC,IAAO,SAAS,cAAc,MAAM;CAI1C,AAHA,EAAK,MAAM,cACX,EAAK,OAAO,qCAAqCH,EAAS,KAAK,GAAG,EAAE,gBAEpE,SAAS,KAAK,YAAYG,CAAI;CAC9B,KAAK,IAAMN,KAAQE,GACjB,EAAO,IAAIN,EAASI,EAAK,CAAC,MAAM;AAEpC;AAGA,SAAgBO,EAAc,GAAgC;CAC5D,IAAM,EACJ,WAAQ,MACR,eAAY,SAAS,iBACrB,WAAQ,OACNC,KAAW,CAAC,GAGVC,IAAaX,EADF,MAAM,QAAQC,CAAK,IAAIA,IAAQ,CAACA,CAAK,CACV;CAQ5C,AALAW,QAAmB;EACjB,EAAgBD,CAAU;CAC5B,CAAC,GAGDC,QAAmB;EACjB,IAAI,CAACC,KAASF,EAAW,WAAW,GAAG;EAIvC,IAAMG,IAAKC,GACLb,IAAOS,EAAW,IAClBK,IAAOF,EAAG,aAAa,WAAW;EAIxC,AAFAA,EAAG,aAAa,aAAaZ,CAAI,GAEjCe,QAAgB;GAEd,AAAID,MAAS,OACXF,EAAG,gBAAgB,WAAW,IAE9BA,EAAG,aAAa,aAAaE,CAAI;EAErC,CAAC;CACH,CAAC;AACH"}

package/dist/hooks/useScrollEdges.d.ts

@@ -12,5 +12,8 @@ export interface ScrollEdges {
  *
  * 监听 scroll(passive) + ResizeObserver(容器与首个子元素尺寸) +
  * MutationObserver(childList/subtree)，因此面板高度变化、选项增删后显隐都能及时更新。
+ *
+ * 显隐用**迟滞阈值**：从"无内容"变为"有内容"要超过 4px，反向要回落到 1px 以内，
+ * 避免在滚动到边界时 canScroll* 每帧抖动(箭头反复出现/消失)。
  */
 export declare function useScrollEdges(target: Accessor<HTMLElement | undefined>): ScrollEdges;