@neut/ui 0.0.17 → 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/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

@@ -2,11 +2,11 @@ import { createPositioner as e } from "../../../lib/positioner/create-positioner
 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 { createEffect as i, createMemo as a, createSignal as o, onCleanup as s } from "solid-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 = n("TooltipContent"), [d, f] = o(), [p, m] = o(), h = e(u.reference, u.floating, {
+	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: () => r({
@@ -15,15 +15,19 @@ function l(l) {
 			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;
@@ -35,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,
@@ -70,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/useScrollLock.js

@@ -1,20 +1,17 @@
-import { createEffect as e, onCleanup as t } from "solid-js";
+import { isOverflowElement as e } from "../lib/positioner/utils/dom.js";
+import { createEffect as t, onCleanup as n } from "solid-js";
 //#region src/hooks/useScrollLock.ts
-var n = 0, r, i = /* @__PURE__ */ new Set();
-function a(e) {
-	let { overflow: t, overflowX: n, overflowY: r } = getComputedStyle(e);
-	return /auto|scroll|overlay|hidden/.test(t + n + r);
-}
+var r = 0, i, a = /* @__PURE__ */ new Set();
 function o() {
-	let e = document.documentElement;
-	return a(e) ? e : document.body;
+	let t = document.documentElement;
+	return e(t) ? t : document.body;
 }
 function s() {
 	return typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("scrollbar-gutter", "stable");
 }
 function c(e) {
 	if (!(e instanceof Element)) return !1;
-	for (let t of i) if (e.closest(t)) return !0;
+	for (let t of a) if (e.closest(t)) return !0;
 	return !1;
 }
 function l() {
@@ -42,17 +39,17 @@ function l() {
 	};
 }
 function u(e) {
-	n += 1, e && i.add(e), n === 1 && (r = l());
+	r += 1, e && a.add(e), r === 1 && (i = l());
 	let t = !1;
 	return () => {
-		t || (t = !0, --n, n === 0 && (r?.(), r = void 0, i.clear()));
+		t || (t = !0, --r, r === 0 && (i?.(), i = void 0, a.clear()));
 	};
 }
-function d(n, r) {
-	e(() => {
-		if (!n()) return;
-		let e = u(r?.allowedSelector);
-		t(e);
+function d(e, r) {
+	t(() => {
+		if (!e()) return;
+		let t = u(r?.allowedSelector);
+		n(t);
 	});
 }
 //#endregion

package/dist/hooks/useScrollLock.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollLock.js","names":["lockCount","release","allowedSelectors","isOverflowElement","el","overflow","overflowX","overflowY","getViewportScroller","html","supportsStableScrollbarGutter","isWithinAllowedScroll","target","selector","lockViewport","body","scroller","previous","scrollbarWidth","gutterSupported","padding","preventScroll","event","acquireLock","allowedSelector","released","useScrollLock","locked","unlock","options"],"sources":["../../src/hooks/useScrollLock.ts"],"sourcesContent":["import { createEffect, onCleanup, type Accessor } from \"solid-js\";\n\nexport interface UseScrollLockOptions {\n  /**\n   * 允许在锁滚动期间继续滚动的容器选择器(通常是浮层自身)。\n   * 未命中该选择器的滚轮/触摸滚动会被拦截;不传则整个页面都锁定滚动。\n   */\n  allowedSelector?: string;\n}\n\n// 多个浮层/嵌套浮层可能同时持锁,用计数避免其中一个关闭就提前恢复页面滚动。\nlet lockCount = 0;\nlet release: (() => void) | undefined;\n// 各持锁浮层允许滚动的容器选择器。preventScroll 读取的是实时集合,\n// 因此即使某个选择器在锁生效之后才加入,也能立即对它放行。\nconst allowedSelectors = new Set<string>();\n\n/** 元素自身是否建立了滚动容器(与 positioner 里的判断口径一致) */\nfunction isOverflowElement(el: Element): boolean {\n  const { overflow, overflowX, overflowY } = getComputedStyle(el);\n  return /auto|scroll|overlay|hidden/.test(overflow + overflowX + overflowY);\n}\n\n/**\n * 页面的滚动容器:html 自己建立了滚动上下文时锁 html,否则锁 body\n * ——把 overflow 写在另一个元素上并不会锁住页面(Base UI 同样的判断)。\n */\nfunction getViewportScroller(): HTMLElement {\n  const html = document.documentElement;\n  return isOverflowElement(html) ? html : document.body;\n}\n\nfunction supportsStableScrollbarGutter(): boolean {\n  return (\n    typeof CSS !== \"undefined\" &&\n    typeof CSS.supports === \"function\" &&\n    CSS.supports(\"scrollbar-gutter\", \"stable\")\n  );\n}\n\nfunction isWithinAllowedScroll(target: EventTarget | null): boolean {\n  if (!(target instanceof Element)) return false;\n  for (const selector of allowedSelectors) {\n    if (target.closest(selector)) return true;\n  }\n  return false;\n}\n\nfunction lockViewport(): () => void {\n  const html = document.documentElement;\n  const body = document.body;\n  const scroller = getViewportScroller();\n\n  const previous = {\n    htmlScrollbarGutter: html.style.scrollbarGutter,\n    scrollerOverflowX: scroller.style.overflowX,\n    scrollerOverflowY: scroller.style.overflowY,\n    bodyPaddingRight: body.style.paddingRight,\n    scrollTop: scroller.scrollTop,\n    scrollLeft: scroller.scrollLeft,\n  };\n\n  // 抵消滚动条消失带来的横向抖动:能用 scrollbar-gutter 就用它,\n  // 否则退化成给 body 补一个滚动条宽度的右内边距。\n  // 只有页面自身真的存在占位滚动条时才需要补偿:滚动条长在某个嵌套容器上时,\n  // 锁 html/body 并不会移除那条滚动条,再给 html 加 gutter 只会额外多出一条空白\n  // (滚动条 + gutter 双倍宽度),反而破坏布局。\n  const scrollbarWidth = Math.max(0, window.innerWidth - html.clientWidth);\n  const gutterSupported = supportsStableScrollbarGutter();\n  if (scrollbarWidth > 0) {\n    if (gutterSupported) {\n      html.style.scrollbarGutter = \"stable\";\n    } else {\n      const padding =\n        Number.parseFloat(getComputedStyle(body).paddingRight) || 0;\n      body.style.paddingRight = `${padding + scrollbarWidth}px`;\n    }\n  }\n\n  scroller.style.overflowX = \"hidden\";\n  scroller.style.overflowY = \"hidden\";\n\n  // 兜底:部分浏览器即使 overflow:hidden 仍能被滚轮/触摸滚动,\n  // 因此直接拦截浮层之外的滚动事件;浮层内部(命中 allowedSelector)保留滚动能力。\n  const preventScroll = (event: Event) => {\n    if (isWithinAllowedScroll(event.target)) return;\n    event.preventDefault();\n  };\n  document.addEventListener(\"wheel\", preventScroll, { passive: false });\n  document.addEventListener(\"touchmove\", preventScroll, { passive: false });\n\n  return () => {\n    html.style.scrollbarGutter = previous.htmlScrollbarGutter;\n    if (!gutterSupported) {\n      body.style.paddingRight = previous.bodyPaddingRight;\n    }\n    scroller.style.overflowX = previous.scrollerOverflowX;\n    scroller.style.overflowY = previous.scrollerOverflowY;\n    document.removeEventListener(\"wheel\", preventScroll);\n    document.removeEventListener(\"touchmove\", preventScroll);\n    scroller.scrollTop = previous.scrollTop;\n    scroller.scrollLeft = previous.scrollLeft;\n  };\n}\n\nfunction acquireLock(allowedSelector?: string): () => void {\n  lockCount += 1;\n  if (allowedSelector) allowedSelectors.add(allowedSelector);\n  if (lockCount === 1) release = lockViewport();\n\n  let released = false;\n  return () => {\n    if (released) return;\n    released = true;\n    lockCount -= 1;\n    if (lockCount === 0) {\n      release?.();\n      release = undefined;\n      // 全部释放后清空放行名单,避免残留的选择器影响下一次锁。\n      allowedSelectors.clear();\n    }\n  };\n}\n\n/**\n * 浮层打开时锁定页面滚动,关闭后恢复——对齐 Base UI 的 modal 行为\n * (文档滚动被锁定、浮层之外的滚轮/触摸滚动被拦截),避免浮窗锚点随页面滚动而\"飘移\"。\n *\n * 多个浮层可同时持锁(引用计数);`allowedSelector` 命中的容器内仍可滚动,\n * 通常传入浮层自身,例如 Popover 传 `[data-slot=\"popover-content\"]`。\n */\nexport function useScrollLock(\n  locked: Accessor<boolean>,\n  options?: UseScrollLockOptions,\n) {\n  createEffect(() => {\n    if (!locked()) return;\n    const unlock = acquireLock(options?.allowedSelector);\n    onCleanup(unlock);\n  });\n}\n"],"mappings":";;AAWA,IAAIA,IAAY,GACZC,GAGEC,oBAAmB,IAAI,IAAY;AAGzC,SAASC,EAAkB,GAAsB;CAC/C,IAAM,EAAE,aAAU,cAAW,iBAAc,iBAAiBC,CAAE;CAC9D,OAAO,6BAA6B,KAAKC,IAAWC,IAAYC,CAAS;AAC3E;AAMA,SAASC,IAAmC;CAC1C,IAAMC,IAAO,SAAS;CACtB,OAAON,EAAkBM,CAAI,IAAIA,IAAO,SAAS;AACnD;AAEA,SAASC,IAAyC;CAChD,OACE,OAAO,MAAQ,OACf,OAAO,IAAI,YAAa,cACxB,IAAI,SAAS,oBAAoB,QAAQ;AAE7C;AAEA,SAASC,EAAsB,GAAqC;CAClE,IAAI,EAAEC,aAAkB,UAAU,OAAO;CACzC,KAAK,IAAMC,KAAYX,GACrB,IAAIU,EAAO,QAAQC,CAAQ,GAAG,OAAO;CAEvC,OAAO;AACT;AAEA,SAASC,IAA2B;CAClC,IAAML,IAAO,SAAS,iBAChBM,IAAO,SAAS,MAChBC,IAAWR,EAAoB,GAE/BS,IAAW;EACf,qBAAqBR,EAAK,MAAM;EAChC,mBAAmBO,EAAS,MAAM;EAClC,mBAAmBA,EAAS,MAAM;EAClC,kBAAkBD,EAAK,MAAM;EAC7B,WAAWC,EAAS;EACpB,YAAYA,EAAS;CACvB,GAOME,IAAiB,KAAK,IAAI,GAAG,OAAO,aAAaT,EAAK,WAAW,GACjEU,IAAkBT,EAA8B;CACtD,IAAIQ,IAAiB,GAAG;EACtB,IAAIC,GACF,EAAK,MAAM,kBAAkB;OACxB;GACL,IAAMC,IACJ,OAAO,WAAW,iBAAiBL,CAAI,CAAC,CAAC,YAAY,KAAK;GAC5D,EAAK,MAAM,eAAe,GAAGK,IAAUF,EAAe;EACxD;CACF;CAGA,AADA,EAAS,MAAM,YAAY,UAC3B,EAAS,MAAM,YAAY;CAI3B,IAAMG,KAAiB,MAAiB;EACtC,AAAIV,EAAsBW,EAAM,MAAM,KACtCA,EAAM,eAAe;CACvB;CAIA,OAHA,SAAS,iBAAiB,SAASD,GAAe,EAAE,SAAS,GAAM,CAAC,GACpE,SAAS,iBAAiB,aAAaA,GAAe,EAAE,SAAS,GAAM,CAAC,SAE3D;EAUX,AATA,EAAK,MAAM,kBAAkBJ,EAAS,qBACjCE,MACH,EAAK,MAAM,eAAeF,EAAS,mBAErC,EAAS,MAAM,YAAYA,EAAS,mBACpC,EAAS,MAAM,YAAYA,EAAS,mBACpC,SAAS,oBAAoB,SAASI,CAAa,GACnD,SAAS,oBAAoB,aAAaA,CAAa,GACvD,EAAS,YAAYJ,EAAS,WAC9B,EAAS,aAAaA,EAAS;CACjC;AACF;AAEA,SAASM,EAAY,GAAsC;CAGzD,AAFA,KAAa,GACTC,KAAiBtB,EAAiB,IAAIsB,CAAe,GACrDxB,MAAc,MAAG,IAAUc,EAAa;CAE5C,IAAIW,IAAW;CACf,aAAa;EACX,AAAIA,MACJ,IAAW,IACX,KACIzB,MAAc,MAChBC,IAAU,GACV,IAAU,KAAA,GAEVC,EAAiB,MAAM;CAE3B;AACF;AASA,SAAgBwB,EACd,GACA,GACA;CACA,QAAmB;EACjB,IAAI,CAACC,EAAO,GAAG;EACf,IAAMC,IAASL,EAAYM,GAAS,eAAe;EACnD,EAAUD,CAAM;CAClB,CAAC;AACH"}
+{"version":3,"file":"useScrollLock.js","names":["lockCount","release","allowedSelectors","getViewportScroller","html","isOverflowElement","supportsStableScrollbarGutter","isWithinAllowedScroll","target","selector","lockViewport","body","scroller","previous","scrollbarWidth","gutterSupported","padding","preventScroll","event","acquireLock","allowedSelector","released","useScrollLock","locked","unlock","options"],"sources":["../../src/hooks/useScrollLock.ts"],"sourcesContent":["import { createEffect, onCleanup, type Accessor } from \"solid-js\";\nimport { isOverflowElement } from \"~/lib\";\n\nexport interface UseScrollLockOptions {\n  /**\n   * 允许在锁滚动期间继续滚动的容器选择器(通常是浮层自身)。\n   * 未命中该选择器的滚轮/触摸滚动会被拦截;不传则整个页面都锁定滚动。\n   */\n  allowedSelector?: string;\n}\n\n// 多个浮层/嵌套浮层可能同时持锁,用计数避免其中一个关闭就提前恢复页面滚动。\nlet lockCount = 0;\nlet release: (() => void) | undefined;\n// 各持锁浮层允许滚动的容器选择器。preventScroll 读取的是实时集合,\n// 因此即使某个选择器在锁生效之后才加入,也能立即对它放行。\nconst allowedSelectors = new Set<string>();\n\n/**\n * 页面的滚动容器:html 自己建立了滚动上下文时锁 html,否则锁 body\n * ——把 overflow 写在另一个元素上并不会锁住页面(Base UI 同样的判断)。\n *\n * `isOverflowElement` 复用 positioner 的实现,保证\"锁哪个元素\"与\n * autoUpdate 监听哪些祖先 scroll 的口径完全一致。\n */\nfunction getViewportScroller(): HTMLElement {\n  const html = document.documentElement;\n  return isOverflowElement(html) ? html : document.body;\n}\n\nfunction supportsStableScrollbarGutter(): boolean {\n  return (\n    typeof CSS !== \"undefined\" &&\n    typeof CSS.supports === \"function\" &&\n    CSS.supports(\"scrollbar-gutter\", \"stable\")\n  );\n}\n\nfunction isWithinAllowedScroll(target: EventTarget | null): boolean {\n  if (!(target instanceof Element)) return false;\n  for (const selector of allowedSelectors) {\n    if (target.closest(selector)) return true;\n  }\n  return false;\n}\n\nfunction lockViewport(): () => void {\n  const html = document.documentElement;\n  const body = document.body;\n  const scroller = getViewportScroller();\n\n  const previous = {\n    htmlScrollbarGutter: html.style.scrollbarGutter,\n    scrollerOverflowX: scroller.style.overflowX,\n    scrollerOverflowY: scroller.style.overflowY,\n    bodyPaddingRight: body.style.paddingRight,\n    scrollTop: scroller.scrollTop,\n    scrollLeft: scroller.scrollLeft,\n  };\n\n  // 抵消滚动条消失带来的横向抖动:能用 scrollbar-gutter 就用它,\n  // 否则退化成给 body 补一个滚动条宽度的右内边距。\n  // 只有页面自身真的存在占位滚动条时才需要补偿:滚动条长在某个嵌套容器上时,\n  // 锁 html/body 并不会移除那条滚动条,再给 html 加 gutter 只会额外多出一条空白\n  // (滚动条 + gutter 双倍宽度),反而破坏布局。\n  const scrollbarWidth = Math.max(0, window.innerWidth - html.clientWidth);\n  const gutterSupported = supportsStableScrollbarGutter();\n  if (scrollbarWidth > 0) {\n    if (gutterSupported) {\n      html.style.scrollbarGutter = \"stable\";\n    } else {\n      const padding =\n        Number.parseFloat(getComputedStyle(body).paddingRight) || 0;\n      body.style.paddingRight = `${padding + scrollbarWidth}px`;\n    }\n  }\n\n  scroller.style.overflowX = \"hidden\";\n  scroller.style.overflowY = \"hidden\";\n\n  // 兜底:部分浏览器即使 overflow:hidden 仍能被滚轮/触摸滚动,\n  // 因此直接拦截浮层之外的滚动事件;浮层内部(命中 allowedSelector)保留滚动能力。\n  const preventScroll = (event: Event) => {\n    if (isWithinAllowedScroll(event.target)) return;\n    event.preventDefault();\n  };\n  document.addEventListener(\"wheel\", preventScroll, { passive: false });\n  document.addEventListener(\"touchmove\", preventScroll, { passive: false });\n\n  return () => {\n    html.style.scrollbarGutter = previous.htmlScrollbarGutter;\n    if (!gutterSupported) {\n      body.style.paddingRight = previous.bodyPaddingRight;\n    }\n    scroller.style.overflowX = previous.scrollerOverflowX;\n    scroller.style.overflowY = previous.scrollerOverflowY;\n    document.removeEventListener(\"wheel\", preventScroll);\n    document.removeEventListener(\"touchmove\", preventScroll);\n    scroller.scrollTop = previous.scrollTop;\n    scroller.scrollLeft = previous.scrollLeft;\n  };\n}\n\nfunction acquireLock(allowedSelector?: string): () => void {\n  lockCount += 1;\n  if (allowedSelector) allowedSelectors.add(allowedSelector);\n  if (lockCount === 1) release = lockViewport();\n\n  let released = false;\n  return () => {\n    if (released) return;\n    released = true;\n    lockCount -= 1;\n    if (lockCount === 0) {\n      release?.();\n      release = undefined;\n      // 全部释放后清空放行名单,避免残留的选择器影响下一次锁。\n      allowedSelectors.clear();\n    }\n  };\n}\n\n/**\n * 浮层打开时锁定页面滚动,关闭后恢复——对齐 Base UI 的 modal 行为\n * (文档滚动被锁定、浮层之外的滚轮/触摸滚动被拦截),避免浮窗锚点随页面滚动而\"飘移\"。\n *\n * 多个浮层可同时持锁(引用计数);`allowedSelector` 命中的容器内仍可滚动,\n * 通常传入浮层自身,例如 Popover 传 `[data-slot=\"popover-content\"]`。\n */\nexport function useScrollLock(\n  locked: Accessor<boolean>,\n  options?: UseScrollLockOptions,\n) {\n  createEffect(() => {\n    if (!locked()) return;\n    const unlock = acquireLock(options?.allowedSelector);\n    onCleanup(unlock);\n  });\n}\n"],"mappings":";;;AAYA,IAAIA,IAAY,GACZC,GAGEC,oBAAmB,IAAI,IAAY;AASzC,SAASC,IAAmC;CAC1C,IAAMC,IAAO,SAAS;CACtB,OAAOC,EAAkBD,CAAI,IAAIA,IAAO,SAAS;AACnD;AAEA,SAASE,IAAyC;CAChD,OACE,OAAO,MAAQ,OACf,OAAO,IAAI,YAAa,cACxB,IAAI,SAAS,oBAAoB,QAAQ;AAE7C;AAEA,SAASC,EAAsB,GAAqC;CAClE,IAAI,EAAEC,aAAkB,UAAU,OAAO;CACzC,KAAK,IAAMC,KAAYP,GACrB,IAAIM,EAAO,QAAQC,CAAQ,GAAG,OAAO;CAEvC,OAAO;AACT;AAEA,SAASC,IAA2B;CAClC,IAAMN,IAAO,SAAS,iBAChBO,IAAO,SAAS,MAChBC,IAAWT,EAAoB,GAE/BU,IAAW;EACf,qBAAqBT,EAAK,MAAM;EAChC,mBAAmBQ,EAAS,MAAM;EAClC,mBAAmBA,EAAS,MAAM;EAClC,kBAAkBD,EAAK,MAAM;EAC7B,WAAWC,EAAS;EACpB,YAAYA,EAAS;CACvB,GAOME,IAAiB,KAAK,IAAI,GAAG,OAAO,aAAaV,EAAK,WAAW,GACjEW,IAAkBT,EAA8B;CACtD,IAAIQ,IAAiB,GAAG;EACtB,IAAIC,GACF,EAAK,MAAM,kBAAkB;OACxB;GACL,IAAMC,IACJ,OAAO,WAAW,iBAAiBL,CAAI,CAAC,CAAC,YAAY,KAAK;GAC5D,EAAK,MAAM,eAAe,GAAGK,IAAUF,EAAe;EACxD;CACF;CAGA,AADA,EAAS,MAAM,YAAY,UAC3B,EAAS,MAAM,YAAY;CAI3B,IAAMG,KAAiB,MAAiB;EACtC,AAAIV,EAAsBW,EAAM,MAAM,KACtCA,EAAM,eAAe;CACvB;CAIA,OAHA,SAAS,iBAAiB,SAASD,GAAe,EAAE,SAAS,GAAM,CAAC,GACpE,SAAS,iBAAiB,aAAaA,GAAe,EAAE,SAAS,GAAM,CAAC,SAE3D;EAUX,AATA,EAAK,MAAM,kBAAkBJ,EAAS,qBACjCE,MACH,EAAK,MAAM,eAAeF,EAAS,mBAErC,EAAS,MAAM,YAAYA,EAAS,mBACpC,EAAS,MAAM,YAAYA,EAAS,mBACpC,SAAS,oBAAoB,SAASI,CAAa,GACnD,SAAS,oBAAoB,aAAaA,CAAa,GACvD,EAAS,YAAYJ,EAAS,WAC9B,EAAS,aAAaA,EAAS;CACjC;AACF;AAEA,SAASM,EAAY,GAAsC;CAGzD,AAFA,KAAa,GACTC,KAAiBlB,EAAiB,IAAIkB,CAAe,GACrDpB,MAAc,MAAG,IAAUU,EAAa;CAE5C,IAAIW,IAAW;CACf,aAAa;EACX,AAAIA,MACJ,IAAW,IACX,KACIrB,MAAc,MAChBC,IAAU,GACV,IAAU,KAAA,GAEVC,EAAiB,MAAM;CAE3B;AACF;AASA,SAAgBoB,EACd,GACA,GACA;CACA,QAAmB;EACjB,IAAI,CAACC,EAAO,GAAG;EACf,IAAMC,IAASL,EAAYM,GAAS,eAAe;EACnD,EAAUD,CAAM;CAClB,CAAC;AACH"}