@neut/ui 0.0.16 → 0.0.18

package/dist/components/scroll-area/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","names":["createSignal","onCleanup","splitProps","ScrollAreaProps","ScrollMetrics","clsx","ScrollBar","ScrollAreaContext","computeMetrics","ScrollArea","props","viewportRef","HTMLDivElement","local","others","hovering","setHovering","dragging","setDragging","verticalMetrics","setVerticalMetrics","thumbRatio","thumbOffset","scrollable","horizontalMetrics","setHorizontalMetrics","updateMetrics","el","HTMLElement","clientHeight","scrollTop","scrollHeight","clientWidth","scrollLeft","scrollWidth","setup","update","ro","ResizeObserver","observe","firstElementChild","addEventListener","passive","disconnect","removeEventListener","_el$","_tmpl$2","_$spread","_$mergeProps","class","_$insert","_$createComponent","Provider","value","vertical","horizontal","children","_el$2","_tmpl$","_ref$","_$use","_$effect","_p$","_v$","_v$2","orientation","e","_$setAttribute","t","_$className","undefined","_$mergeProps","_$createComponent","_$use","_$setAttribute","_$className","_tmpl$","_tmpl$2","ScrollArea","viewportRef","local","others","splitProps","props","hovering","setHovering","createSignal","dragging","setDragging","verticalMetrics","setVerticalMetrics","horizontalMetrics","setHorizontalMetrics","updateMetrics","computeMetrics","el","setup","update","ro","onCleanup","_el$","spread","mergeProps","\"class\"","clsx","insert","createComponent","ScrollAreaContext","_el$2","_ref$","use","effect","_v$","_v$2","_p$","setAttribute","className","ScrollBar"],"sources":["../../../../src/components/scroll-area/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { createSignal, onCleanup, splitProps } from \"solid-js\";\nimport type { ScrollAreaProps, ScrollMetrics } from \"./ScrollArea.types\";\nimport { clsx } from \"~/utils\";\nimport { ScrollBar } from \"../ScrollBar\";\nimport { ScrollAreaContext } from \"./ScrollArea.context\";\nimport { computeMetrics } from \"./ScrollArea.utils\";\n\nexport const ScrollArea = (props: ScrollAreaProps) => {\n  let viewportRef: HTMLDivElement | undefined;\n\n  const [local, others] = splitProps(props, [\n    \"orientation\",\n    \"class\",\n    \"classList\",\n    \"children\",\n    \"aria-label\",\n  ]);\n\n  const [hovering, setHovering] = createSignal(false);\n  const [dragging, setDragging] = createSignal<\n    \"vertical\" | \"horizontal\" | null\n  >(null);\n\n  const [verticalMetrics, setVerticalMetrics] = createSignal<ScrollMetrics>({\n    thumbRatio: 1,\n    thumbOffset: 0,\n    scrollable: false,\n  });\n  const [horizontalMetrics, setHorizontalMetrics] = createSignal<ScrollMetrics>(\n    {\n      thumbRatio: 1,\n      thumbOffset: 0,\n      scrollable: false,\n    },\n  );\n\n  function updateMetrics(el: HTMLElement) {\n    setVerticalMetrics(\n      computeMetrics(el.clientHeight, el.scrollTop, el.scrollHeight),\n    );\n    setHorizontalMetrics(\n      computeMetrics(el.clientWidth, el.scrollLeft, el.scrollWidth),\n    );\n  }\n\n  function setup(el: HTMLDivElement) {\n    viewportRef = el; // ref 赋值\n\n    updateMetrics(el);\n\n    const update = () => updateMetrics(el);\n\n    const ro = new ResizeObserver(update);\n    ro.observe(el);\n\n    if (el.firstElementChild) {\n      ro.observe(el.firstElementChild);\n    }\n\n    el.addEventListener(\"scroll\", update, { passive: true });\n\n    onCleanup(() => {\n      ro.disconnect();\n      el.removeEventListener(\"scroll\", update);\n    });\n  }\n\n  return (\n    <div\n      data-slot=\"scroll-area\"\n      class={clsx(\"relative\", local.class)}\n      onMouseEnter={() => setHovering(true)}\n      onMouseLeave={() => setHovering(false)}\n      {...others}\n    >\n      <ScrollAreaContext.Provider\n        value={{\n          hovering,\n          viewportRef: () => viewportRef,\n          dragging,\n          setDragging,\n          vertical: verticalMetrics,\n          horizontal: horizontalMetrics,\n        }}\n      >\n        <div\n          ref={setup}\n          data-slot=\"scroll-area-viewport\"\n          role=\"region\"\n          aria-label={local[\"aria-label\"] ?? \"Scrollable content\"}\n          class={clsx(\n            // \"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-neutral-400/50 dark:focus-visible:ring-neutral-500/50 focus-visible:outline-1\",\n            // \"overflow-scroll\",\n            // \"[scrollbar-width:none]\",\n            \"size-full rounded-[inherit] transition-[color,box-shadow] outline-none\",\n            // Native scrollbars hidden via CSS; custom ones provided below\n            \"scrollbar-none [&::-webkit-scrollbar]:hidden\",\n            // Focus ring — meets WCAG 2.4.7\n            \"focus-visible:ring-2 focus-visible:ring-offset-1\",\n            \"focus-visible:ring-ring/50\",\n            // Overflow based on which scrollbars are active\n            local.orientation === \"vertical\"\n              ? \"overflow-y-scroll overflow-x-hidden\"\n              : local.orientation === \"horizontal\"\n                ? \"overflow-x-scroll overflow-y-hidden\"\n                : \"overflow-scroll\",\n          )}\n        >\n          {local.children}\n        </div>\n        <ScrollBar orientation={local.orientation} />\n      </ScrollAreaContext.Provider>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;iIAOaS,KAAcC,MAA2B;CACpD,IAAIC,GAEE,CAACE,GAAOC,KAAUZ,EAAWQ,GAAO;EACxC;EACA;EACA;EACA;EACA;CAAY,CACb,GAEK,CAACK,GAAUC,KAAehB,EAAa,EAAK,GAC5C,CAACiB,GAAUC,KAAelB,EAE9B,IAAI,GAEA,CAACmB,GAAiBC,KAAsBpB,EAA4B;EACxEqB,YAAY;EACZC,aAAa;EACbC,YAAY;CACd,CAAC,GACK,CAACC,GAAmBC,KAAwBzB,EAChD;EACEqB,YAAY;EACZC,aAAa;EACbC,YAAY;CACd,CACF;CAEA,SAASG,EAAcC,GAAiB;EAItCF,AAHAL,EACEZ,EAAemB,EAAGE,cAAcF,EAAGG,WAAWH,EAAGI,YAAY,CAC/D,GACAN,EACEjB,EAAemB,EAAGK,aAAaL,EAAGM,YAAYN,EAAGO,WAAW,CAC9D;CACF;CAEA,SAASC,EAAMR,GAAoB;EAGjCD,AAFAf,IAAcgB,GAEdD,EAAcC,CAAE;EAEhB,IAAMS,UAAeV,EAAcC,CAAE,GAE/BU,IAAK,IAAIC,eAAeF,CAAM;EASpCnC,AARAoC,EAAGE,QAAQZ,CAAE,GAETA,EAAGa,qBACLH,EAAGE,QAAQZ,EAAGa,iBAAiB,GAGjCb,EAAGc,iBAAiB,UAAUL,GAAQ,EAAEM,SAAS,GAAK,CAAC,GAEvDzC,QAAgB;GAEd0B,AADAU,EAAGM,WAAW,GACdhB,EAAGiB,oBAAoB,UAAUR,CAAM;EACzC,CAAC;CACH;CAEA,cAAA;EAAA,IAAAS,IAAAC,EAAA;EA2C+C,OA3C/CD,EAAAJ,iBAAA,oBAKwBzB,EAAY,EAAK,CAAC,GAAA6B,EAAAJ,iBAAA,oBADlBzB,EAAY,EAAI,CAAC,GAAA+B,EAAAF,GAAAG,EAAA,EAAA,IAAAuD,QAAA;GAAA,OAD9BlG,EAAK,YAAYQ,EAAMoC,KAAK;EAAC,EAAA,GAGhCnC,CAAM,GAAA,IAAA,EAAA,GAAAoC,EAAAL,GAAAM,EAET5C,EAAkB6C,UAAQ;GACzBC,OAAO;IACLtC;IACAJ,mBAAmBA;IACnBM;IACAC;IACAoC,UAAUnC;IACVoC,YAAY/B;GACd;GAAC,IAAAgC,WAAA;IAAA,OAAA,QAAA;KAAA,IAAAC,IAAAC,EAAA,GAAAC,IAGMxB;KAoBJ,OApBS,OAAAwB,KAAA,aAAAC,EAAAD,GAAAF,CAAA,IAALtB,IAAKsB,GAAAP,EAAAO,SAsBT5C,EAAM2C,QAAQ,GAAAK,GAAAC,MAAA;MAAA,IAAAC,IAnBHlD,EAAM,iBAAiB,sBAAoBmD,IAChD3D,EAIL,0EAEA,gDAEA,oDACA,8BAEAQ,EAAMoD,gBAAgB,aAClB,wCACApD,EAAMoD,gBAAgB,eACpB,wCACA,iBACR;MAAC,OAAAF,MAAAD,EAAAI,KAAAC,EAAAV,GAAA,cAAAK,EAAAI,IAAAH,CAAA,GAAAC,MAAAF,EAAAM,KAAAC,EAAAZ,GAAAK,EAAAM,IAAAJ,CAAA,GAAAF;KAAA,GAAA;MAAAI,GAAAI,KAAAA;MAAAF,GAAAE,KAAAA;KAAA,CAAA,GAAAb;IAAA,EAAA,CAAA,GAAAN,EAIF7C,GAAS,EAAA,IAAC2D,cAAW;KAAA,OAAEpD,EAAMoD;IAAW,EAAA,CAAA,CAAA;GAAA;EAAA,CAAA,CAAA,GAAApB;CAAA,EAAA,CAAA;AAIjD"}
+{"version":3,"file":"ScrollArea.js","names":["createSignal","splitProps","ScrollAreaProps","clsx","ScrollBar","ScrollAreaContext","useScrollAreaMetrics","ScrollArea","props","local","others","hovering","setHovering","dragging","setDragging","metrics","overflowClass","orientation","_el$","_tmpl$2","addEventListener","_$spread","_$mergeProps","class","classList","_$insert","_$createComponent","Provider","value","viewportRef","vertical","horizontal","children","_el$2","_tmpl$","_ref$","setup","_$use","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_$className","undefined","_$mergeProps","_$createComponent","_$use","_$setAttribute","_$className","_tmpl$","_tmpl$2","ScrollArea","local","others","splitProps","props","hovering","setHovering","createSignal","dragging","setDragging","metrics","useScrollAreaMetrics","overflowClass","_el$","spread","mergeProps","\"class\"","clsx","insert","createComponent","ScrollAreaContext","_el$2","_ref$","use","effect","_v$","_v$2","_p$","setAttribute","className","ScrollBar"],"sources":["../../../../src/components/scroll-area/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { createSignal, splitProps } from \"solid-js\";\nimport type { ScrollAreaProps } from \"./ScrollArea.types\";\nimport { clsx } from \"~/utils\";\nimport { ScrollBar } from \"../ScrollBar\";\nimport { ScrollAreaContext } from \"./ScrollArea.context\";\nimport { useScrollAreaMetrics } from \"./useScrollAreaMetrics\";\n\n/**\n * 自定义滚动容器。\n *\n * 职责边界（SRP）：\n * - 指标采集（scroll / resize）→ `useScrollAreaMetrics.ts`\n * - 尺寸换算 → `ScrollArea.utils.ts`\n * - 滚动条交互 → `ScrollBar/`\n * - 本文件只负责：组合 Provider、渲染视口 DOM 与样式\n */\nexport const ScrollArea = (props: ScrollAreaProps) => {\n  const [local, others] = splitProps(props, [\n    \"orientation\",\n    \"class\",\n    \"classList\",\n    \"children\",\n    \"aria-label\",\n  ]);\n\n  const [hovering, setHovering] = createSignal(false);\n  const [dragging, setDragging] = createSignal<\n    \"vertical\" | \"horizontal\" | null\n  >(null);\n\n  const metrics = useScrollAreaMetrics();\n\n  const overflowClass = () => {\n    if (local.orientation === \"vertical\") {\n      return \"overflow-y-scroll overflow-x-hidden\";\n    }\n    if (local.orientation === \"horizontal\") {\n      return \"overflow-x-scroll overflow-y-hidden\";\n    }\n    return \"overflow-scroll\";\n  };\n\n  return (\n    <div\n      data-slot=\"scroll-area\"\n      class={clsx(\"relative\", local.class, local.classList)}\n      classList={local.classList}\n      onMouseEnter={() => setHovering(true)}\n      onMouseLeave={() => setHovering(false)}\n      {...others}\n    >\n      <ScrollAreaContext.Provider\n        value={{\n          hovering,\n          viewportRef: metrics.viewportRef,\n          dragging,\n          setDragging,\n          vertical: metrics.vertical,\n          horizontal: metrics.horizontal,\n        }}\n      >\n        <div\n          ref={metrics.setup}\n          data-slot=\"scroll-area-viewport\"\n          role=\"region\"\n          aria-label={local[\"aria-label\"] ?? \"Scrollable content\"}\n          class={clsx(\n            \"size-full rounded-[inherit] transition-[color,box-shadow] outline-none\",\n            // Native scrollbars hidden via CSS; custom ones provided below\n            \"scrollbar-none [&::-webkit-scrollbar]:hidden\",\n            // Focus ring — meets WCAG 2.4.7\n            \"focus-visible:ring-2 focus-visible:ring-offset-1\",\n            \"focus-visible:ring-ring/50\",\n            overflowClass(),\n          )}\n        >\n          {local.children}\n        </div>\n        <ScrollBar orientation={local.orientation} />\n      </ScrollAreaContext.Provider>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;iIAgBaO,KAAcC,MAA2B;CACpD,IAAM,CAACC,GAAOC,KAAUT,EAAWO,GAAO;EACxC;EACA;EACA;EACA;EACA;CAAY,CACb,GAEK,CAACG,GAAUC,KAAeZ,EAAa,EAAK,GAC5C,CAACa,GAAUC,KAAed,EAE9B,IAAI,GAEAe,IAAUT,EAAqB,GAE/BU,UACAP,EAAMQ,gBAAgB,aACjB,wCAELR,EAAMQ,gBAAgB,eACjB,wCAEF;CAGT,cAAA;EAAA,IAAAC,IAAAC,EAAA;EAoC+C,OApC/CD,EAAAE,iBAAA,oBAMwBR,EAAY,EAAK,CAAC,GAAAM,EAAAE,iBAAA,oBADlBR,EAAY,EAAI,CAAC,GAAAS,EAAAH,GAAAI,EAAA;GAAA,IAAAgD,QAAA;IAAA,OAF9BnE,EAAK,YAAYM,EAAMc,OAAOd,EAAMe,SAAS;GAAC;GAAA,IACrDA,YAAS;IAAA,OAAEf,EAAMe;GAAS;EAAA,GAGtBd,CAAM,GAAA,IAAA,EAAA,GAAAe,EAAAP,GAAAQ,EAETrB,EAAkBsB,UAAQ;GAAA,IACzBC,QAAK;IAAA,OAAE;KACLjB;KACAkB,aAAad,EAAQc;KACrBhB;KACAC;KACAgB,UAAUf,EAAQe;KAClBC,YAAYhB,EAAQgB;IACtB;GAAC;GAAA,IAAAC,WAAA;IAAA,OAAA,QAAA;KAAA,IAAAC,IAAAC,EAAA,GAAAC,IAGMpB,EAAQqB;KAYZ,OAZiB,OAAAD,KAAA,aAAAE,EAAAF,GAAAF,CAAA,IAAblB,EAAQqB,QAAKH,GAAAR,EAAAQ,SAcjBxB,EAAMuB,QAAQ,GAAAM,GAAAC,MAAA;MAAA,IAAAC,IAXH/B,EAAM,iBAAiB,sBAAoBgC,IAChDtC,EACL,0EAEA,gDAEA,oDACA,8BACAa,EAAc,CAChB;MAAC,OAAAwB,MAAAD,EAAAG,KAAAC,EAAAV,GAAA,cAAAM,EAAAG,IAAAF,CAAA,GAAAC,MAAAF,EAAAK,KAAAC,EAAAZ,GAAAM,EAAAK,IAAAH,CAAA,GAAAF;KAAA,GAAA;MAAAG,GAAAI,KAAAA;MAAAF,GAAAE,KAAAA;KAAA,CAAA,GAAAb;IAAA,EAAA,CAAA,GAAAP,EAIFtB,GAAS,EAAA,IAACa,cAAW;KAAA,OAAER,EAAMQ;IAAW,EAAA,CAAA,CAAA;GAAA;EAAA,CAAA,CAAA,GAAAC;CAAA,EAAA,CAAA;AAIjD"}

package/dist/components/scroll-area/ScrollArea/ScrollArea.utils.js

@@ -6,10 +6,10 @@ function e(e, t, n) {
 		thumbOffset: 0,
 		scrollable: !1
 	};
-	let i = e / n, a = n - e;
+	let i = n - e;
 	return {
-		thumbRatio: i,
-		thumbOffset: a > 0 ? t / a : 0,
+		thumbRatio: e / n,
+		thumbOffset: t / i,
 		scrollable: r
 	};
 }

package/dist/components/scroll-area/ScrollArea/ScrollArea.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.utils.js","names":["computeMetrics","scrollable","scrollSize","client","thumbRatio","maxScroll","scroll"],"sources":["../../../../src/components/scroll-area/ScrollArea/ScrollArea.utils.ts"],"sourcesContent":["import type { ScrollMetrics } from \"./ScrollArea.types\";\n\nexport function computeMetrics(\n  client: number,\n  scroll: number,\n  scrollSize: number,\n): ScrollMetrics {\n  const scrollable = scrollSize > client + 1; // +1 to absorb sub-pixel rounding\n  if (!scrollable) return { thumbRatio: 1, thumbOffset: 0, scrollable: false };\n  const thumbRatio = client / scrollSize;\n  const maxScroll = scrollSize - client;\n  const thumbOffset = maxScroll > 0 ? scroll / maxScroll : 0;\n  return { thumbRatio, thumbOffset, scrollable };\n}\n"],"mappings":";AAEA,SAAgBA,EACd,GACA,GACA,GACe;CACf,IAAMC,IAAaC,IAAaC,IAAS;CACzC,IAAI,CAACF,GAAY,OAAO;EAAE,YAAY;EAAG,aAAa;EAAG,YAAY;CAAM;CAC3E,IAAMG,IAAaD,IAASD,GACtBG,IAAYH,IAAaC;CAE/B,OAAO;EAAE;EAAY,aADDE,IAAY,IAAIC,IAASD,IAAY;EACvB;CAAW;AAC/C"}
+{"version":3,"file":"ScrollArea.utils.js","names":["computeMetrics","scrollable","scrollSize","client","maxScroll","scroll"],"sources":["../../../../src/components/scroll-area/ScrollArea/ScrollArea.utils.ts"],"sourcesContent":["import type { ScrollMetrics } from \"./ScrollArea.types\";\n\nexport function computeMetrics(\n  client: number,\n  scroll: number,\n  scrollSize: number,\n): ScrollMetrics {\n  // +1 吸收亚像素舍入：仅超出 1px 以内视为不可滚动\n  const scrollable = scrollSize > client + 1;\n  if (!scrollable) return { thumbRatio: 1, thumbOffset: 0, scrollable: false };\n  // scrollable 蕴含 maxScroll >= 2，因此这里不需要再兜底除零\n  const maxScroll = scrollSize - client;\n  return {\n    thumbRatio: client / scrollSize,\n    thumbOffset: scroll / maxScroll,\n    scrollable,\n  };\n}\n"],"mappings":";AAEA,SAAgBA,EACd,GACA,GACA,GACe;CAEf,IAAMC,IAAaC,IAAaC,IAAS;CACzC,IAAI,CAACF,GAAY,OAAO;EAAE,YAAY;EAAG,aAAa;EAAG,YAAY;CAAM;CAE3E,IAAMG,IAAYF,IAAaC;CAC/B,OAAO;EACL,YAAYA,IAASD;EACrB,aAAaG,IAASD;EACtB;CACF;AACF"}

package/dist/components/scroll-area/ScrollArea/useScrollAreaMetrics.d.ts

@@ -0,0 +1,22 @@
+import { Accessor } from 'solid-js';
+import { ScrollMetrics } from './ScrollArea.types';
+export interface ScrollAreaMetrics {
+    vertical: Accessor<ScrollMetrics>;
+    horizontal: Accessor<ScrollMetrics>;
+    /** 视口元素访问器（供 ScrollBar 读写滚动位置） */
+    viewportRef: () => HTMLDivElement | undefined;
+    /** 传给视口的 `ref`：绑定监听与观察器 */
+    setup: (el: HTMLDivElement) => void;
+}
+/**
+ * 视口（viewport）的滚动指标采集。
+ *
+ * 单一职责：监听视口的 `scroll` 与尺寸变化（`ResizeObserver` 同时观察视口与
+ * 其内容元素），把尺寸换算成 `ScrollMetrics`。不关心渲染与交互。
+ *
+ * 注意：内容元素必须等 Solid 挂载完成后才能拿到——`ref` 回调执行时子节点
+ * 尚未插入（Solid 延迟创建 children），此时读 `firstElementChild` 会拿到一个
+ * 随后被替换掉的占位节点，导致内容尺寸变化永远不触发刷新。因此这里在
+ * `onMount` 里才去观察内容元素。
+ */
+export declare function useScrollAreaMetrics(): ScrollAreaMetrics;

package/dist/components/scroll-area/ScrollArea/useScrollAreaMetrics.js

@@ -0,0 +1,34 @@
+import { computeMetrics as e } from "./ScrollArea.utils.js";
+import { createSignal as t, onCleanup as n, onMount as r } from "solid-js";
+//#region src/components/scroll-area/ScrollArea/useScrollAreaMetrics.ts
+var i = {
+	thumbRatio: 1,
+	thumbOffset: 0,
+	scrollable: !1
+};
+function a() {
+	let [a, o] = t(i), [s, c] = t(i), l, u = null, d = null, f = null, p = () => {
+		l && (o(e(l.clientHeight, l.scrollTop, l.scrollHeight)), c(e(l.clientWidth, l.scrollLeft, l.scrollWidth)));
+	}, m = () => {
+		let e = l?.firstElementChild ?? null;
+		d && e !== u && (u && d.unobserve(u), u = e, u && d.observe(u));
+	};
+	return n(() => {
+		d?.disconnect(), d = null, f?.disconnect(), f = null, u = null, l?.removeEventListener("scroll", p), l = void 0;
+	}), r(() => {
+		m(), p();
+	}), {
+		vertical: a,
+		horizontal: s,
+		viewportRef: () => l,
+		setup: (e) => {
+			l = e, p(), d?.disconnect(), d = new ResizeObserver(() => p()), d.observe(e), u = null, m(), e.addEventListener("scroll", p, { passive: !0 }), typeof MutationObserver < "u" && (f = new MutationObserver(() => {
+				m(), p();
+			}), f.observe(e, { childList: !0 }));
+		}
+	};
+}
+//#endregion
+export { a as useScrollAreaMetrics };
+
+//# sourceMappingURL=useScrollAreaMetrics.js.map

package/dist/components/scroll-area/ScrollArea/useScrollAreaMetrics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollAreaMetrics.js","names":["EMPTY_METRICS","useScrollAreaMetrics","vertical","setVertical","createSignal","horizontal","setHorizontal","viewport","content","observer","mutations","measure","computeMetrics","observeContent","next","onCleanup","onMount","el"],"sources":["../../../../src/components/scroll-area/ScrollArea/useScrollAreaMetrics.ts"],"sourcesContent":["import { type Accessor, createSignal, onCleanup, onMount } from \"solid-js\";\nimport type { ScrollMetrics } from \"./ScrollArea.types\";\nimport { computeMetrics } from \"./ScrollArea.utils\";\n\nconst EMPTY_METRICS: ScrollMetrics = {\n  thumbRatio: 1,\n  thumbOffset: 0,\n  scrollable: false,\n};\n\nexport interface ScrollAreaMetrics {\n  vertical: Accessor<ScrollMetrics>;\n  horizontal: Accessor<ScrollMetrics>;\n  /** 视口元素访问器（供 ScrollBar 读写滚动位置） */\n  viewportRef: () => HTMLDivElement | undefined;\n  /** 传给视口的 `ref`：绑定监听与观察器 */\n  setup: (el: HTMLDivElement) => void;\n}\n\n/**\n * 视口（viewport）的滚动指标采集。\n *\n * 单一职责：监听视口的 `scroll` 与尺寸变化（`ResizeObserver` 同时观察视口与\n * 其内容元素），把尺寸换算成 `ScrollMetrics`。不关心渲染与交互。\n *\n * 注意：内容元素必须等 Solid 挂载完成后才能拿到——`ref` 回调执行时子节点\n * 尚未插入（Solid 延迟创建 children），此时读 `firstElementChild` 会拿到一个\n * 随后被替换掉的占位节点，导致内容尺寸变化永远不触发刷新。因此这里在\n * `onMount` 里才去观察内容元素。\n */\nexport function useScrollAreaMetrics(): ScrollAreaMetrics {\n  const [vertical, setVertical] = createSignal<ScrollMetrics>(EMPTY_METRICS);\n  const [horizontal, setHorizontal] =\n    createSignal<ScrollMetrics>(EMPTY_METRICS);\n\n  let viewport: HTMLDivElement | undefined;\n  let content: Element | null = null;\n  let observer: ResizeObserver | null = null;\n  let mutations: MutationObserver | null = null;\n\n  const measure = () => {\n    if (!viewport) return;\n    setVertical(\n      computeMetrics(\n        viewport.clientHeight,\n        viewport.scrollTop,\n        viewport.scrollHeight,\n      ),\n    );\n    setHorizontal(\n      computeMetrics(\n        viewport.clientWidth,\n        viewport.scrollLeft,\n        viewport.scrollWidth,\n      ),\n    );\n  };\n\n  const observeContent = () => {\n    const next = viewport?.firstElementChild ?? null;\n    if (!observer || next === content) return;\n    if (content) observer.unobserve(content);\n    content = next;\n    if (content) observer.observe(content);\n  };\n\n  const setup = (el: HTMLDivElement) => {\n    viewport = el;\n    measure();\n\n    observer?.disconnect();\n    observer = new ResizeObserver(() => measure());\n    observer.observe(el);\n    content = null;\n    // 内容还没挂载，先不观察；onMount 时再观察真实的内容元素\n    observeContent();\n\n    el.addEventListener(\"scroll\", measure, { passive: true });\n\n    // 内容元素可能被替换（动态 children、spacer 增删），\n    // 变化后重新指向真正的内容元素，否则它的大小变化不会触发刷新\n    if (typeof MutationObserver !== \"undefined\") {\n      mutations = new MutationObserver(() => {\n        observeContent();\n        measure();\n      });\n      mutations.observe(el, { childList: true });\n    }\n  };\n\n  // 注意：cleanup 必须注册在 hook 作用域，不能写进 ref 回调里——\n  // ref 回调执行时 owner 已经脱离，`onCleanup` 注册的清理函数永远不会被调用，\n  // 结果就是 ResizeObserver 与 scroll 监听泄漏。\n  onCleanup(() => {\n    observer?.disconnect();\n    observer = null;\n    mutations?.disconnect();\n    mutations = null;\n    content = null;\n    viewport?.removeEventListener(\"scroll\", measure);\n    viewport = undefined;\n  });\n\n  onMount(() => {\n    observeContent();\n    measure();\n  });\n\n  return { vertical, horizontal, viewportRef: () => viewport, setup };\n}\n"],"mappings":";;;AAIA,IAAMA,IAA+B;CACnC,YAAY;CACZ,aAAa;CACb,YAAY;AACd;AAsBA,SAAgBC,IAA0C;CACxD,IAAM,CAACC,GAAUC,KAAeC,EAA4BJ,CAAa,GACnE,CAACK,GAAYC,KACjBF,EAA4BJ,CAAa,GAEvCO,GACAC,IAA0B,MAC1BC,IAAkC,MAClCC,IAAqC,MAEnCC,UAAgB;EACpB,AAAKJ,MACLJ,EACES,EACEL,EAAS,cACTA,EAAS,WACTA,EAAS,YACX,CACF,GACAD,EACEM,EACEL,EAAS,aACTA,EAAS,YACTA,EAAS,WACX,CACF;CACF,GAEMM,UAAuB;EAC3B,IAAMC,IAAOP,GAAU,qBAAqB;EAC5C,AAAKE,KAAYK,MAASN,MACtBA,KAASC,EAAS,UAAUD,CAAO,GACvC,IAAUM,GACNN,KAASC,EAAS,QAAQD,CAAO;CACvC;CA4CA,OAfAO,QAAgB;EAOd,AANAN,GAAU,WAAW,GACrB,IAAW,MACXC,GAAW,WAAW,GACtB,IAAY,MACZ,IAAU,MACVH,GAAU,oBAAoB,UAAUI,CAAO,GAC/C,IAAW,KAAA;CACb,CAAC,GAEDK,QAAc;EAEZ,AADAH,EAAe,GACfF,EAAQ;CACV,CAAC,GAEM;EAAE;EAAU;EAAY,mBAAmBJ;EAAU,QA1C7C,MAAuB;GAepC,AAdA,IAAWU,GACXN,EAAQ,GAERF,GAAU,WAAW,GACrB,IAAW,IAAI,qBAAqBE,EAAQ,CAAC,GAC7CF,EAAS,QAAQQ,CAAE,GACnB,IAAU,MAEVJ,EAAe,GAEfI,EAAG,iBAAiB,UAAUN,GAAS,EAAE,SAAS,GAAK,CAAC,GAIpD,OAAO,mBAAqB,QAC9B,IAAY,IAAI,uBAAuB;IAErC,AADAE,EAAe,GACfF,EAAQ;GACV,CAAC,GACDD,EAAU,QAAQO,GAAI,EAAE,WAAW,GAAK,CAAC;EAE7C;CAoBkE;AACpE"}

package/dist/components/scroll-area/ScrollBar/ScrollBar.d.ts

@@ -1,2 +1,10 @@
 import { ScrollBarProps } from './ScrollBar.types';
+/**
+ * 自定义滚动条。
+ *
+ * 职责边界（SRP）：
+ * - 数值/几何换算 → `ScrollBar.utils.ts`（纯函数，可独立单测）
+ * - 指针/键盘事件 → `useScrollBarInteraction.ts`
+ * - 本文件只负责：从 Context 读取指标、组装状态、渲染 DOM 与样式
+ */
 export declare const ScrollBar: (props: ScrollBarProps) => import('solid-js').JSX.Element;

package/dist/components/scroll-area/ScrollBar/ScrollBar.js

@@ -1,89 +1,56 @@
 import { clsx as e } from "../../../utils/clsx.js";
-import { useScrollAreaContext as t } from "../ScrollArea/ScrollArea.context.js";
-import { className as n, delegateEvents as r, effect as i, mergeProps as a, setAttribute as o, spread as s, style as c, template as l, use as u } from "solid-js/web";
-import { createMemo as d, createSignal as f, mergeProps as p, onCleanup as m, splitProps as h } from "solid-js";
+import { computeAriaValueNow as t, computeThumbStyle as n, isScrollBarVisible as r, isVertical as i } from "./ScrollBar.utils.js";
+import { useScrollBarInteraction as a } from "./useScrollBarInteraction.js";
+import { useScrollAreaContext as o } from "../ScrollArea/ScrollArea.context.js";
+import { addEventListener as s, className as c, delegateEvents as l, effect as u, mergeProps as d, setAttribute as f, spread as p, style as m, template as h, use as g } from "solid-js/web";
+import { createMemo as _, createSignal as v, mergeProps as y, splitProps as b } from "solid-js";
 //#region src/components/scroll-area/ScrollBar/ScrollBar.tsx
-var g = /*#__PURE__*/ l("<div data-slot=scroll-area-scrollbar role=scrollbar aria-controls=scroll-area-viewport aria-valuemin=0 aria-valuemax=100 tabindex=0><div data-slot=scroll-area-thumb>"), _ = 20, v = (r) => {
-	let l = t(), v, y = p({ orientation: "vertical" }, r), [b, x] = h(y, [
+var x = /*#__PURE__*/ h("<div data-slot=scroll-area-scrollbar role=scrollbar aria-controls=scroll-area-viewport aria-valuemin=0 aria-valuemax=100 tabindex=0><div data-slot=scroll-area-thumb>"), S = (l) => {
+	let h = o(), S = y({ orientation: "vertical" }, l), [C, w] = b(S, [
 		"orientation",
 		"class",
 		"classList"
-	]), [S, C] = f(!1), w = () => b.orientation === "vertical", T = d(() => w() ? l.vertical() : l.horizontal()), E = d(() => {
-		let e = T(), t = (w() ? v?.clientHeight ?? 0 : v?.clientWidth ?? 0) - 2, n = t * e.thumbRatio, r = Math.max(n, _), i = Math.max(0, t - r) * e.thumbOffset;
-		return w() ? {
-			height: `${r}px`,
-			transform: `translateY(${i}px)`
-		} : {
-			width: `${r}px`,
-			transform: `translateX(${i}px)`
-		};
-	}), D = d(() => Math.round(T().thumbOffset * 100));
-	function O(e) {
-		e.preventDefault(), e.stopPropagation();
-		let t = l.viewportRef();
-		if (!t) return;
-		l.setDragging(b.orientation), C(!0);
-		let n = w() ? e.clientY : e.clientX, r = w() ? t.scrollTop : t.scrollLeft, i = w() ? t.scrollHeight - t.clientHeight : t.scrollWidth - t.clientWidth, a = i / ((w() ? v.clientHeight : v.clientWidth) - 2 - (w() ? e.currentTarget.clientHeight : e.currentTarget.clientWidth));
-		function o(e) {
-			let o = (w() ? e.clientY : e.clientX) - n, s = Math.max(0, Math.min(i, r + o * a));
-			w() ? t.scrollTop = s : t.scrollLeft = s;
+	]), [T, E] = v(), [D, O] = v(!1), k = () => C.orientation, A = () => i(k()), j = _(() => A() ? h.vertical() : h.horizontal()), M = _(() => {
+		let e = T(), t = e ? A() ? e.clientHeight : e.clientWidth : 0;
+		return n(k(), j(), t);
+	}), N = _(() => t(j())), P = _(() => r(h.hovering(), h.dragging(), k(), D())), F = a({
+		track: T,
+		viewport: h.viewportRef,
+		orientation: k,
+		onDragChange: (e) => {
+			h.setDragging(e ? k() : null), O(e);
 		}
-		function s() {
-			l.setDragging(null), C(!1), window.removeEventListener("pointermove", o), window.removeEventListener("pointerup", s);
-		}
-		window.addEventListener("pointermove", o), window.addEventListener("pointerup", s), m(() => {
-			window.removeEventListener("pointermove", o), window.removeEventListener("pointerup", s);
-		});
-	}
-	function k(e) {
-		if (e.target.dataset.slot === "scroll-area-thumb") return;
-		let t = l.viewportRef();
-		if (!t) return;
-		let n = v.getBoundingClientRect(), r = (w() ? (e.clientY - n.top) / n.height : (e.clientX - n.left) / n.width) * (w() ? t.scrollHeight - t.clientHeight : t.scrollWidth - t.clientWidth);
-		t.scrollTo({
-			[w() ? "top" : "left"]: r,
-			behavior: "smooth"
-		});
-	}
-	function A(e) {
-		let t = l.viewportRef();
-		if (!t) return;
-		let n = w() ? t.clientHeight : t.clientWidth, r = {
-			ArrowDown: 40,
-			ArrowRight: 40,
-			ArrowUp: -40,
-			ArrowLeft: -40,
-			PageDown: n,
-			PageUp: -n,
-			Home: -Infinity,
-			End: Infinity
-		}[e.key];
-		r !== void 0 && (e.preventDefault(), w() ? t.scrollTop = Math.max(0, Math.min(t.scrollHeight - t.clientHeight, r === Infinity ? t.scrollHeight : r === -Infinity ? 0 : t.scrollTop + r)) : t.scrollLeft = Math.max(0, Math.min(t.scrollWidth - t.clientWidth, r === Infinity ? t.scrollWidth : r === -Infinity ? 0 : t.scrollLeft + r)));
-	}
-	let j = d(() => l.hovering() || l.dragging() === r.orientation || S());
+	});
 	return (() => {
-		var t = g(), r = t.firstChild;
-		t.$$keydown = A, t.$$pointerdown = k;
-		var d = v;
-		return typeof d == "function" ? u(d, t) : v = t, s(t, a({
+		var t = x(), n = t.firstChild;
+		return g(E, t), p(t, d({
 			get "aria-orientation"() {
-				return b.orientation;
+				return k();
 			},
 			get "aria-valuenow"() {
-				return D();
+				return N();
+			},
+			get onPointerDown() {
+				return F.onTrackPointerDown;
+			},
+			get onKeyDown() {
+				return F.onKeyDown;
 			},
 			get "data-orientation"() {
-				return b.orientation;
+				return k();
 			},
 			get "data-hovering"() {
-				return l.hovering() ? "" : void 0;
+				return h.hovering() ? "" : void 0;
 			},
 			get class() {
-				return e("absolute touch-none select-none transition-opacity duration-150", j() ? "opacity-100" : "opacity-0", w() ? "right-0 top-0 h-full w-2.5 border-l border-l-transparent p-px flex flex-col" : "bottom-0 left-0 w-full h-2.5 border-t border-t-transparent p-px flex flex-row", "outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/70 dark:focus-visible:ring-neutral-500/70", b.class);
+				return e("absolute touch-none select-none transition-opacity duration-150", P() ? "opacity-100" : "opacity-0", A() ? "right-0 top-0 h-full w-2.5 border-l border-l-transparent p-px flex flex-col" : "bottom-0 left-0 w-full h-2.5 border-t border-t-transparent p-px flex flex-row", "outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/70 dark:focus-visible:ring-neutral-500/70", C.class, C.classList);
+			},
+			get classList() {
+				return C.classList;
 			}
-		}, x), !1, !0), r.$$pointerdown = O, i((t) => {
-			var i = b.orientation, a = e("relative rounded-full bg-border", "hover:bg-neutral-400 dark:hover:bg-white/30", S() ? "bg-neutral-500 dark:bg-white/40" : "", "transition-colors duration-100", w() ? "min-h-5 w-full" : "min-w-5 h-full"), s = E();
-			return i !== t.e && o(r, "data-orientation", t.e = i), a !== t.t && n(r, t.t = a), t.a = c(r, s, t.a), t;
+		}, w), !1, !0), s(n, "pointerdown", F.onThumbPointerDown, !0), u((t) => {
+			var r = k(), i = e("relative rounded-full bg-border", "hover:bg-neutral-400 dark:hover:bg-white/30", D() ? "bg-neutral-500 dark:bg-white/40" : "", "transition-colors duration-100", A() ? "min-h-5 w-full" : "min-w-5 h-full"), a = M();
+			return r !== t.e && f(n, "data-orientation", t.e = r), i !== t.t && c(n, t.t = i), t.a = m(n, a, t.a), t;
 		}, {
 			e: void 0,
 			t: void 0,
@@ -91,8 +58,8 @@ var g = /*#__PURE__*/ l("<div data-slot=scroll-area-scrollbar role=scrollbar ari
 		}), t;
 	})();
 };
-r(["pointerdown", "keydown"]);
+l(["pointerdown"]);
 //#endregion
-export { v as ScrollBar };
+export { S as ScrollBar };
 
 //# sourceMappingURL=ScrollBar.js.map

package/dist/components/scroll-area/ScrollBar/ScrollBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollBar.js","names":["createMemo","createSignal","mergeProps","onCleanup","splitProps","ScrollBarProps","clsx","useScrollAreaContext","MIN_THUMB_PX","ScrollBar","props","ctx","trackEl","HTMLDivElement","merged","orientation","const","local","others","active","setActive","isVertical","metrics","vertical","horizontal","thumbStyle","m","trackSize","clientHeight","clientWidth","trackInnerSize","rawThumbSize","thumbRatio","thumbSize","Math","max","maxOffset","offset","thumbOffset","height","transform","width","ariaValueNow","round","onThumbPointerDown","e","PointerEvent","preventDefault","stopPropagation","viewport","viewportRef","setDragging","startPointer","clientY","clientX","startScroll","scrollTop","scrollLeft","maxScroll","scrollHeight","scrollWidth","currentTarget","scrollRatio","onMove","me","delta","newScroll","min","onUp","window","removeEventListener","addEventListener","onTrackPointerDown","target","HTMLElement","dataset","slot","rect","getBoundingClientRect","clickPos","top","left","scrollTo","behavior","onKeyDown","KeyboardEvent","step","pageSize","keyMap","Record","ArrowDown","ArrowRight","ArrowUp","ArrowLeft","PageDown","PageUp","Home","Infinity","End","key","undefined","visible","hovering","dragging","_el$","_tmpl$","_el$2","firstChild","$$keydown","$$pointerdown","_ref$","_$use","_$spread","_$mergeProps","aria-orientation","aria-valuenow","data-orientation","data-hovering","class","_$effect","_p$","_v$","_v$2","_v$3","_$setAttribute","t","_$className","a","_$style","_$delegateEvents","mergeProps","_$use","_$mergeProps","_$setAttribute","_$className","_$style","_$delegateEvents","mergeProps$1","_tmpl$","MIN_THUMB_PX","ScrollBar","ctx","useScrollAreaContext","trackEl","merged","props","local","others","splitProps","active","setActive","createSignal","isVertical","metrics","createMemo","thumbStyle","m","trackInnerSize","rawThumbSize","thumbSize","offset","ariaValueNow","onThumbPointerDown","viewport","startPointer","startScroll","maxScroll","scrollRatio","onMove","delta","me","newScroll","onUp","onCleanup","onTrackPointerDown","rect","target","onKeyDown","pageSize","visible","_el$","_el$2","_ref$","use","spread","mergeProps","\"class\"","clsx","effect","_v$","_v$2","_v$3","_p$","setAttribute","className","style","delegateEvents"],"sources":["../../../../src/components/scroll-area/ScrollBar/ScrollBar.tsx"],"sourcesContent":["import {\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport type { ScrollBarProps } from \"./ScrollBar.types\";\nimport { clsx } from \"~/utils\";\nimport { useScrollAreaContext } from \"../ScrollArea\";\n\n// Minimum thumb length in px so it's always clickable\nconst MIN_THUMB_PX = 20;\n\nexport const ScrollBar = (props: ScrollBarProps) => {\n  const ctx = useScrollAreaContext();\n\n  let trackEl!: HTMLDivElement;\n\n  const merged = mergeProps({ orientation: \"vertical\" } as const, props);\n\n  const [local, others] = splitProps(merged, [\n    \"orientation\",\n    \"class\",\n    \"classList\",\n  ]);\n\n  const [active, setActive] = createSignal(false);\n  const isVertical = () => local.orientation === \"vertical\";\n\n  const metrics = createMemo(() =>\n    isVertical() ? ctx.vertical() : ctx.horizontal(),\n  );\n\n  /**\n   * Compute thumb CSS: we clamp to MIN_THUMB_PX, then shift the offset so the\n   * thumb never overflows the track.\n   */\n  const thumbStyle = createMemo(() => {\n    const m = metrics();\n\n    const trackSize = isVertical()\n      ? (trackEl?.clientHeight ?? 0)\n      : (trackEl?.clientWidth ?? 0);\n\n    const trackInnerSize = trackSize - 2; // track有内边距\n\n    const rawThumbSize = trackInnerSize * m.thumbRatio;\n    const thumbSize = Math.max(rawThumbSize, MIN_THUMB_PX);\n\n    // Adjust offset to account for clamping\n    const maxOffset = Math.max(0, trackInnerSize - thumbSize);\n    const offset = maxOffset * m.thumbOffset;\n\n    if (isVertical()) {\n      return {\n        height: `${thumbSize}px`,\n        transform: `translateY(${offset}px)`,\n      };\n    }\n    return {\n      width: `${thumbSize}px`,\n      transform: `translateX(${offset}px)`,\n    };\n  });\n\n  // ARIA value: 0–100 integer representing scroll position\n  const ariaValueNow = createMemo(() =>\n    Math.round(metrics().thumbOffset * 100),\n  );\n\n  // ── Drag handling ─────────────────────────────────────────────────────────\n  function onThumbPointerDown(e: PointerEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    ctx.setDragging(local.orientation);\n    setActive(true);\n\n    const startPointer = isVertical() ? e.clientY : e.clientX;\n    const startScroll = isVertical() ? viewport.scrollTop : viewport.scrollLeft;\n    const maxScroll = isVertical()\n      ? viewport.scrollHeight - viewport.clientHeight\n      : viewport.scrollWidth - viewport.clientWidth;\n\n    const trackSize = isVertical() ? trackEl.clientHeight : trackEl.clientWidth;\n    const trackInnerSize = trackSize - 2; // track有内边距\n\n    const thumbSize = isVertical()\n      ? (e.currentTarget as HTMLDivElement).clientHeight\n      : (e.currentTarget as HTMLDivElement).clientWidth;\n    const scrollRatio = maxScroll / (trackInnerSize - thumbSize);\n\n    function onMove(me: PointerEvent) {\n      const delta = (isVertical() ? me.clientY : me.clientX) - startPointer;\n\n      const newScroll = Math.max(\n        0,\n        Math.min(maxScroll, startScroll + delta * scrollRatio),\n      );\n      if (isVertical()) {\n        viewport!.scrollTop = newScroll;\n      } else {\n        viewport!.scrollLeft = newScroll;\n      }\n    }\n\n    function onUp() {\n      ctx.setDragging(null);\n      setActive(false);\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerup\", onUp);\n    }\n\n    window.addEventListener(\"pointermove\", onMove);\n    window.addEventListener(\"pointerup\", onUp);\n\n    onCleanup(() => {\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerup\", onUp);\n    });\n  }\n\n  // ── Track click: page-scroll (click above/below thumb) ───────────────────\n  function onTrackPointerDown(e: PointerEvent) {\n    // Ignore if the target is the thumb itself\n    if ((e.target as HTMLElement).dataset.slot === \"scroll-area-thumb\") return;\n\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    const rect = trackEl.getBoundingClientRect();\n    const clickPos = isVertical()\n      ? (e.clientY - rect.top) / rect.height\n      : (e.clientX - rect.left) / rect.width;\n\n    const maxScroll = isVertical()\n      ? viewport.scrollHeight - viewport.clientHeight\n      : viewport.scrollWidth - viewport.clientWidth;\n\n    const target = clickPos * maxScroll;\n\n    viewport.scrollTo({\n      [isVertical() ? \"top\" : \"left\"]: target,\n      behavior: \"smooth\",\n    });\n  }\n\n  // ── Keyboard scrolling on the scrollbar track ─────────────────────────────\n  function onKeyDown(e: KeyboardEvent) {\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    const step = 40; // px per keypress\n    const pageSize = isVertical()\n      ? viewport.clientHeight\n      : viewport.clientWidth;\n\n    const keyMap: Record<string, number> = {\n      ArrowDown: step,\n      ArrowRight: step,\n      ArrowUp: -step,\n      ArrowLeft: -step,\n      PageDown: pageSize,\n      PageUp: -pageSize,\n      Home: -Infinity,\n      End: Infinity,\n    };\n\n    const delta = keyMap[e.key];\n    if (delta === undefined) return;\n\n    e.preventDefault();\n\n    if (isVertical()) {\n      viewport.scrollTop = Math.max(\n        0,\n        Math.min(\n          viewport.scrollHeight - viewport.clientHeight,\n          delta === Infinity\n            ? viewport.scrollHeight\n            : delta === -Infinity\n              ? 0\n              : viewport.scrollTop + delta,\n        ),\n      );\n    } else {\n      viewport.scrollLeft = Math.max(\n        0,\n        Math.min(\n          viewport.scrollWidth - viewport.clientWidth,\n          delta === Infinity\n            ? viewport.scrollWidth\n            : delta === -Infinity\n              ? 0\n              : viewport.scrollLeft + delta,\n        ),\n      );\n    }\n  }\n\n  // ── Visibility: show while hovering or dragging ───────────────────────────\n  const visible = createMemo(\n    () => ctx.hovering() || ctx.dragging() === props.orientation || active(),\n  );\n\n  return (\n    <div\n      ref={trackEl}\n      data-slot=\"scroll-area-scrollbar\"\n      // WCAG 4.1.2: expose as scrollbar widget\n      role=\"scrollbar\"\n      aria-controls=\"scroll-area-viewport\"\n      aria-orientation={local.orientation}\n      aria-valuenow={ariaValueNow()}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      tabIndex={0}\n      onPointerDown={onTrackPointerDown}\n      onKeyDown={onKeyDown}\n      data-orientation={local.orientation}\n      data-hovering={ctx.hovering() ? \"\" : undefined}\n      class={clsx(\n        // Layout\n        \"absolute touch-none select-none transition-opacity duration-150\",\n        // Opacity — visible on hover/drag, hidden otherwise\n        visible() ? \"opacity-100\" : \"opacity-0\",\n        // Axis-specific positioning & size\n        isVertical()\n          ? \"right-0 top-0 h-full w-2.5 border-l border-l-transparent p-px flex flex-col\"\n          : \"bottom-0 left-0 w-full h-2.5 border-t border-t-transparent p-px flex flex-row\",\n        // Keyboard focus ring\n        \"outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/70 dark:focus-visible:ring-neutral-500/70\",\n        local.class,\n      )}\n      {...others}\n    >\n      <div\n        data-slot=\"scroll-area-thumb\"\n        onPointerDown={onThumbPointerDown}\n        data-orientation={local.orientation}\n        class={clsx(\n          \"relative rounded-full bg-border\",\n          // Hover / active state\n          \"hover:bg-neutral-400 dark:hover:bg-white/30\",\n          active() ? \"bg-neutral-500 dark:bg-white/40\" : \"\",\n          \"transition-colors duration-100\",\n          // Ensure thumb is always reachable\n          isVertical() ? \"min-h-5 w-full\" : \"min-w-5 h-full\",\n        )}\n        style={thumbStyle()}\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ScrollBar.js","names":["createMemo","createSignal","mergeProps","splitProps","ScrollBarProps","clsx","useScrollAreaContext","computeAriaValueNow","computeThumbStyle","isScrollBarVisible","isVertical","useScrollBarInteraction","ScrollBar","props","ctx","merged","orientation","const","local","others","trackEl","setTrackEl","HTMLDivElement","active","setActive","isVerticalAxis","metrics","vertical","horizontal","thumbStyle","el","trackSize","clientHeight","clientWidth","ariaValueNow","visible","hovering","dragging","interaction","track","viewport","viewportRef","onDragChange","setDragging","_el$","_tmpl$","_el$2","firstChild","_$use","_$spread","_$mergeProps","aria-orientation","aria-valuenow","onPointerDown","onTrackPointerDown","onKeyDown","data-orientation","data-hovering","undefined","class","classList","_$addEventListener","onThumbPointerDown","_$effect","_p$","_v$","_v$2","_v$3","e","_$setAttribute","t","_$className","a","_$style","_$delegateEvents","mergeProps","_$mergeProps","_$setAttribute","_$className","_$style","_$delegateEvents","mergeProps$1","_tmpl$","ScrollBar","ctx","useScrollAreaContext","merged","props","local","others","splitProps","trackEl","setTrackEl","createSignal","active","setActive","orientation","isVerticalAxis","isVertical","metrics","createMemo","thumbStyle","el","trackSize","computeThumbStyle","ariaValueNow","computeAriaValueNow","visible","isScrollBarVisible","interaction","useScrollBarInteraction","dragging","_el$","_el$2","use","spread","mergeProps","\"class\"","clsx","addEventListener","effect","_v$","_v$2","_v$3","_p$","setAttribute","className","style","delegateEvents"],"sources":["../../../../src/components/scroll-area/ScrollBar/ScrollBar.tsx"],"sourcesContent":["import { createMemo, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport type { ScrollBarProps } from \"./ScrollBar.types\";\nimport { clsx } from \"~/utils\";\nimport { useScrollAreaContext } from \"../ScrollArea\";\nimport {\n  computeAriaValueNow,\n  computeThumbStyle,\n  isScrollBarVisible,\n  isVertical,\n} from \"./ScrollBar.utils\";\nimport { useScrollBarInteraction } from \"./useScrollBarInteraction\";\n\n/**\n * 自定义滚动条。\n *\n * 职责边界（SRP）：\n * - 数值/几何换算 → `ScrollBar.utils.ts`（纯函数，可独立单测）\n * - 指针/键盘事件 → `useScrollBarInteraction.ts`\n * - 本文件只负责：从 Context 读取指标、组装状态、渲染 DOM 与样式\n */\nexport const ScrollBar = (props: ScrollBarProps) => {\n  const ctx = useScrollAreaContext();\n\n  const merged = mergeProps({ orientation: \"vertical\" } as const, props);\n\n  const [local, others] = splitProps(merged, [\n    \"orientation\",\n    \"class\",\n    \"classList\",\n  ]);\n\n  const [trackEl, setTrackEl] = createSignal<HTMLDivElement>();\n  const [active, setActive] = createSignal(false);\n\n  const orientation = () => local.orientation;\n  const isVerticalAxis = () => isVertical(orientation());\n\n  const metrics = createMemo(() =>\n    isVerticalAxis() ? ctx.vertical() : ctx.horizontal(),\n  );\n\n  /** 滑块内联样式：先夹住最小长度，再重算位移避免溢出 track */\n  const thumbStyle = createMemo(() => {\n    const el = trackEl();\n    const trackSize = el\n      ? isVerticalAxis()\n        ? el.clientHeight\n        : el.clientWidth\n      : 0;\n    return computeThumbStyle(orientation(), metrics(), trackSize);\n  });\n\n  const ariaValueNow = createMemo(() => computeAriaValueNow(metrics()));\n\n  const visible = createMemo(() =>\n    isScrollBarVisible(ctx.hovering(), ctx.dragging(), orientation(), active()),\n  );\n\n  const interaction = useScrollBarInteraction({\n    track: trackEl,\n    viewport: ctx.viewportRef,\n    orientation,\n    onDragChange: (dragging) => {\n      ctx.setDragging(dragging ? orientation() : null);\n      setActive(dragging);\n    },\n  });\n\n  return (\n    <div\n      ref={setTrackEl}\n      data-slot=\"scroll-area-scrollbar\"\n      // WCAG 4.1.2: expose as scrollbar widget\n      role=\"scrollbar\"\n      aria-controls=\"scroll-area-viewport\"\n      aria-orientation={orientation()}\n      aria-valuenow={ariaValueNow()}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      tabIndex={0}\n      onPointerDown={interaction.onTrackPointerDown}\n      onKeyDown={interaction.onKeyDown}\n      data-orientation={orientation()}\n      data-hovering={ctx.hovering() ? \"\" : undefined}\n      class={clsx(\n        // Layout\n        \"absolute touch-none select-none transition-opacity duration-150\",\n        // Opacity — visible on hover/drag, hidden otherwise\n        visible() ? \"opacity-100\" : \"opacity-0\",\n        // Axis-specific positioning & size\n        isVerticalAxis()\n          ? \"right-0 top-0 h-full w-2.5 border-l border-l-transparent p-px flex flex-col\"\n          : \"bottom-0 left-0 w-full h-2.5 border-t border-t-transparent p-px flex flex-row\",\n        // Keyboard focus ring\n        \"outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/70 dark:focus-visible:ring-neutral-500/70\",\n        local.class,\n        local.classList,\n      )}\n      classList={local.classList}\n      {...others}\n    >\n      <div\n        data-slot=\"scroll-area-thumb\"\n        onPointerDown={interaction.onThumbPointerDown}\n        data-orientation={orientation()}\n        class={clsx(\n          \"relative rounded-full bg-border\",\n          // Hover / active state\n          \"hover:bg-neutral-400 dark:hover:bg-white/30\",\n          active() ? \"bg-neutral-500 dark:bg-white/40\" : \"\",\n          \"transition-colors duration-100\",\n          // Ensure thumb is always reachable\n          isVerticalAxis() ? \"min-h-5 w-full\" : \"min-w-5 h-full\",\n        )}\n        style={thumbStyle()}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;kMAoBaY,KAAaC,MAA0B;CAClD,IAAMC,IAAMR,EAAqB,GAE3BS,IAASb,EAAW,EAAEc,aAAa,WAAW,GAAYH,CAAK,GAE/D,CAACK,GAAOC,KAAUhB,EAAWY,GAAQ;EACzC;EACA;EACA;CAAW,CACZ,GAEK,CAACK,GAASC,KAAcpB,EAA6B,GACrD,CAACsB,GAAQC,KAAavB,EAAa,EAAK,GAExCe,UAAoBE,EAAMF,aAC1BS,UAAuBf,EAAWM,EAAY,CAAC,GAE/CU,IAAU1B,QACdyB,EAAe,IAAIX,EAAIa,SAAS,IAAIb,EAAIc,WAAW,CACrD,GAGMC,IAAa7B,QAAiB;EAClC,IAAM8B,IAAKV,EAAQ,GACbW,IAAYD,IACdL,EAAe,IACbK,EAAGE,eACHF,EAAGG,cACL;EACJ,OAAOzB,EAAkBQ,EAAY,GAAGU,EAAQ,GAAGK,CAAS;CAC9D,CAAC,GAEKG,IAAelC,QAAiBO,EAAoBmB,EAAQ,CAAC,CAAC,GAE9DS,IAAUnC,QACdS,EAAmBK,EAAIsB,SAAS,GAAGtB,EAAIuB,SAAS,GAAGrB,EAAY,GAAGO,EAAO,CAAC,CAC5E,GAEMe,IAAc3B,EAAwB;EAC1C4B,OAAOnB;EACPoB,UAAU1B,EAAI2B;EACdzB;EACA0B,eAAeL,MAAa;GAE1Bb,AADAV,EAAI6B,YAAYN,IAAWrB,EAAY,IAAI,IAAI,GAC/CQ,EAAUa,CAAQ;EACpB;CACF,CAAC;CAED,cAAA;EAAA,IAAAO,IAAAC,EAAA,GAAAC,IAAAF,EAAAG;EA8CyB,OA9CzBC,EAES3B,GAAUuB,CAAA,GAAAK,EAAAL,GAAAM,EAAA;GAAA,IAAA,qBAAA;IAAA,OAKGlC,EAAY;GAAC;GAAA,IAAA,kBAAA;IAAA,OAChBkB,EAAa;GAAC;GAAA,IAI7BmB,gBAAa;IAAA,OAAEf,EAAYgB;GAAkB;GAAA,IAC7CC,YAAS;IAAA,OAAEjB,EAAYiB;GAAS;GAAA,IAAA,qBAAA;IAAA,OACdvC,EAAY;GAAC;GAAA,IAAA,kBAAA;IAAA,OAChBF,EAAIsB,SAAS,IAAI,KAAKsB,KAAAA;GAAS;GAAA,IAAA2D,QAAA;IAAA,OACvChH,EAEL,mEAEA8B,EAAQ,IAAI,gBAAgB,aAE5BV,EAAe,IACX,gFACA,iFAEJ,8GACAP,EAAMyC,OACNzC,EAAM0C,SACR;GAAC;GAAA,IACDA,YAAS;IAAA,OAAE1C,EAAM0C;GAAS;EAAA,GACtBzC,CAAM,GAAA,IAAA,EAAA,GAAA0C,EAAAf,GAAA,eAIOR,EAAYwB,oBAAkB,EAAA,GAAAC,GAAAC,MAAA;GAAA,IAAAC,IAC3BjD,EAAY,GAACkD,IACxB7D,EACL,mCAEA,+CACAkB,EAAO,IAAI,oCAAoC,IAC/C,kCAEAE,EAAe,IAAI,mBAAmB,gBACxC,GAAC0C,IACMtC,EAAW;GAAC,OAAAoC,MAAAD,EAAAI,KAAAC,EAAAvB,GAAA,oBAAAkB,EAAAI,IAAAH,CAAA,GAAAC,MAAAF,EAAAM,KAAAC,EAAAzB,GAAAkB,EAAAM,IAAAJ,CAAA,GAAAF,EAAAQ,IAAAC,EAAA3B,GAAAqB,GAAAH,EAAAQ,CAAA,GAAAR;EAAA,GAAA;GAAAI,GAAAV,KAAAA;GAAAY,GAAAZ,KAAAA;GAAAc,GAAAd,KAAAA;EAAA,CAAA,GAAAd;CAAA,EAAA,CAAA;AAI3B;AAAE8B,EAAA,CAAA,aAAA,CAAA"}

package/dist/components/scroll-area/ScrollBar/ScrollBar.utils.d.ts

@@ -0,0 +1,56 @@
+import { ScrollMetrics } from '../ScrollArea/ScrollArea.types';
+/** 滑块最小长度（px），保证任何比例下都点得到 */
+export declare const MIN_THUMB_PX = 20;
+/** track 的内边距（Tailwind `p-px`），由 track 尺寸减去得到内容区 */
+export declare const TRACK_PADDING_PX = 2;
+/** 键盘每按一次的滚动步长（px） */
+export declare const KEYBOARD_STEP_PX = 40;
+export type Orientation = "horizontal" | "vertical";
+export declare function isVertical(orientation: Orientation): boolean;
+/**
+ * 滑块的内联样式：先按比例算出长度并用 `MIN_THUMB_PX` 夹住，
+ * 再按夹住后的可用空间重算位移，保证滑块永远不溢出 track。
+ */
+export declare function computeThumbStyle(orientation: Orientation, metrics: ScrollMetrics, trackSize: number): {
+    height?: string;
+    width?: string;
+    transform: string;
+};
+/** ARIA `aria-valuenow`：0–100 的整数滚动位置 */
+export declare function computeAriaValueNow(metrics: ScrollMetrics): number;
+/** 每次按下/移动时沿当前轴读取指针坐标 */
+export declare function pointerCoord(orientation: Orientation, event: PointerEvent): number;
+/** 当前轴的最大可滚动距离 */
+export declare function maxScrollOf(orientation: Orientation, viewport: HTMLElement): number;
+/** 当前轴的滚动位置 */
+export declare function scrollPosOf(orientation: Orientation, viewport: HTMLElement): number;
+/** 把滚动位置写回当前轴 */
+export declare function applyScrollPos(orientation: Orientation, viewport: HTMLElement, value: number): void;
+/**
+ * 拖动滑块时的「像素位移 → 滚动距离」比例。
+ * 分母是 track 内容区减去滑块长度；为 0（滑块占满 track）时返回 1 以避免除零。
+ */
+export declare function thumbDragRatio(maxScroll: number, trackSize: number, thumbSize: number): number;
+/** 按比例把拖动位移映射成新滚动位置（夹在 [0, maxScroll]） */
+export declare function scrollFromDrag(startScroll: number, deltaPx: number, ratio: number, maxScroll: number): number;
+/**
+ * 点击 track 空白处时的目标滚动位置：按点击点在 track 上的比例换算。
+ * `rect` 尺寸为 0（jsdom 无布局）时返回 0，避免 NaN。
+ */
+export declare function scrollFromTrackClick(orientation: Orientation, rect: {
+    top: number;
+    left: number;
+    height: number;
+    width: number;
+}, event: PointerEvent, maxScroll: number): number;
+/** 键盘按键 → 滚动增量；不可识别的键返回 `undefined`（调用方跳过） */
+export declare function keyboardScrollDelta(key: string, pageSize: number): number | undefined;
+/**
+ * 把键盘增量应用到 [0, max] 区间。
+ * `delta` 为 ±Infinity 时分别落到两端（Home / End 语义）。
+ * 注意：这里用 `scrollSize` 而不是 `max` 作为 End 的目标，保留原有行为
+ * （浏览器会自动夹到最大值）。
+ */
+export declare function scrollFromKeyboard(current: number, delta: number, max: number, scrollSize: number): number;
+/** 可见性：悬停、正在拖动当前轴、或滑块处于按压态 */
+export declare function isScrollBarVisible(hovering: boolean, dragging: "horizontal" | "vertical" | null, orientation: Orientation, active: boolean): boolean;

package/dist/components/scroll-area/ScrollBar/ScrollBar.utils.js

@@ -0,0 +1,61 @@
+function e(e) {
+	return e === "vertical";
+}
+function t(t, n, r) {
+	let i = r - 2, a = Math.max(i * n.thumbRatio, 20), o = Math.max(0, i - a) * n.thumbOffset;
+	return e(t) ? {
+		height: `${a}px`,
+		transform: `translateY(${o}px)`
+	} : {
+		width: `${a}px`,
+		transform: `translateX(${o}px)`
+	};
+}
+function n(e) {
+	return Math.round(e.thumbOffset * 100);
+}
+function r(t, n) {
+	return e(t) ? n.clientY : n.clientX;
+}
+function i(t, n) {
+	return e(t) ? n.scrollHeight - n.clientHeight : n.scrollWidth - n.clientWidth;
+}
+function a(t, n) {
+	return e(t) ? n.scrollTop : n.scrollLeft;
+}
+function o(t, n, r) {
+	e(t) ? n.scrollTop = r : n.scrollLeft = r;
+}
+function s(e, t, n) {
+	let r = t - 2 - n;
+	return r === 0 ? 1 : e / r;
+}
+function c(e, t, n, r) {
+	return Math.max(0, Math.min(r, e + t * n));
+}
+function l(t, n, r, i) {
+	let a = e(t) ? n.height : n.width;
+	return a === 0 ? 0 : (e(t) ? r.clientY - n.top : r.clientX - n.left) / a * i;
+}
+function u(e, t) {
+	return {
+		ArrowDown: 40,
+		ArrowRight: 40,
+		ArrowUp: -40,
+		ArrowLeft: -40,
+		PageDown: t,
+		PageUp: -t,
+		Home: -Infinity,
+		End: Infinity
+	}[e];
+}
+function d(e, t, n, r) {
+	return t === Infinity ? r : t === -Infinity ? 0 : Math.max(0, Math.min(n, e + t));
+}
+function f(e, t, n, r) {
+	return e || t === n || r;
+}
+//#endregion
+export { o as applyScrollPos, n as computeAriaValueNow, t as computeThumbStyle, f as isScrollBarVisible, e as isVertical, u as keyboardScrollDelta, i as maxScrollOf, r as pointerCoord, c as scrollFromDrag, d as scrollFromKeyboard, l as scrollFromTrackClick, a as scrollPosOf, s as thumbDragRatio };
+
+//# sourceMappingURL=ScrollBar.utils.js.map

package/dist/components/scroll-area/ScrollBar/ScrollBar.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollBar.utils.js","names":["isVertical","orientation","computeThumbStyle","trackInnerSize","trackSize","thumbSize","metrics","offset","computeAriaValueNow","pointerCoord","event","maxScrollOf","viewport","scrollPosOf","applyScrollPos","value","thumbDragRatio","denominator","maxScroll","scrollFromDrag","startScroll","deltaPx","ratio","scrollFromTrackClick","size","rect","keyboardScrollDelta","pageSize","key","scrollFromKeyboard","delta","scrollSize","max","current","isScrollBarVisible","hovering","dragging","active"],"sources":["../../../../src/components/scroll-area/ScrollBar/ScrollBar.utils.ts"],"sourcesContent":["/**\n * ScrollBar 的纯计算逻辑。\n *\n * 单一职责：只做「几何/数值换算」，不碰 DOM 事件、不持有信号、不渲染。\n * 这样滚动条的核心数学可以脱离 jsdom 的布局限制被直接单测。\n */\n\nimport type { ScrollMetrics } from \"../ScrollArea/ScrollArea.types\";\n\n/** 滑块最小长度（px），保证任何比例下都点得到 */\nexport const MIN_THUMB_PX = 20;\n/** track 的内边距（Tailwind `p-px`），由 track 尺寸减去得到内容区 */\nexport const TRACK_PADDING_PX = 2;\n/** 键盘每按一次的滚动步长（px） */\nexport const KEYBOARD_STEP_PX = 40;\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport function isVertical(orientation: Orientation): boolean {\n  return orientation === \"vertical\";\n}\n\n/**\n * 滑块的内联样式：先按比例算出长度并用 `MIN_THUMB_PX` 夹住，\n * 再按夹住后的可用空间重算位移，保证滑块永远不溢出 track。\n */\nexport function computeThumbStyle(\n  orientation: Orientation,\n  metrics: ScrollMetrics,\n  trackSize: number,\n): { height?: string; width?: string; transform: string } {\n  const trackInnerSize = trackSize - TRACK_PADDING_PX;\n  const thumbSize = Math.max(trackInnerSize * metrics.thumbRatio, MIN_THUMB_PX);\n  const maxOffset = Math.max(0, trackInnerSize - thumbSize);\n  const offset = maxOffset * metrics.thumbOffset;\n\n  return isVertical(orientation)\n    ? { height: `${thumbSize}px`, transform: `translateY(${offset}px)` }\n    : { width: `${thumbSize}px`, transform: `translateX(${offset}px)` };\n}\n\n/** ARIA `aria-valuenow`：0–100 的整数滚动位置 */\nexport function computeAriaValueNow(metrics: ScrollMetrics): number {\n  return Math.round(metrics.thumbOffset * 100);\n}\n\n/** 每次按下/移动时沿当前轴读取指针坐标 */\nexport function pointerCoord(\n  orientation: Orientation,\n  event: PointerEvent,\n): number {\n  return isVertical(orientation) ? event.clientY : event.clientX;\n}\n\n/** 当前轴的最大可滚动距离 */\nexport function maxScrollOf(\n  orientation: Orientation,\n  viewport: HTMLElement,\n): number {\n  return isVertical(orientation)\n    ? viewport.scrollHeight - viewport.clientHeight\n    : viewport.scrollWidth - viewport.clientWidth;\n}\n\n/** 当前轴的滚动位置 */\nexport function scrollPosOf(\n  orientation: Orientation,\n  viewport: HTMLElement,\n): number {\n  return isVertical(orientation) ? viewport.scrollTop : viewport.scrollLeft;\n}\n\n/** 把滚动位置写回当前轴 */\nexport function applyScrollPos(\n  orientation: Orientation,\n  viewport: HTMLElement,\n  value: number,\n): void {\n  if (isVertical(orientation)) {\n    viewport.scrollTop = value;\n  } else {\n    viewport.scrollLeft = value;\n  }\n}\n\n/**\n * 拖动滑块时的「像素位移 → 滚动距离」比例。\n * 分母是 track 内容区减去滑块长度；为 0（滑块占满 track）时返回 1 以避免除零。\n */\nexport function thumbDragRatio(\n  maxScroll: number,\n  trackSize: number,\n  thumbSize: number,\n): number {\n  const denominator = trackSize - TRACK_PADDING_PX - thumbSize;\n  return denominator === 0 ? 1 : maxScroll / denominator;\n}\n\n/** 按比例把拖动位移映射成新滚动位置（夹在 [0, maxScroll]） */\nexport function scrollFromDrag(\n  startScroll: number,\n  deltaPx: number,\n  ratio: number,\n  maxScroll: number,\n): number {\n  return Math.max(0, Math.min(maxScroll, startScroll + deltaPx * ratio));\n}\n\n/**\n * 点击 track 空白处时的目标滚动位置：按点击点在 track 上的比例换算。\n * `rect` 尺寸为 0（jsdom 无布局）时返回 0，避免 NaN。\n */\nexport function scrollFromTrackClick(\n  orientation: Orientation,\n  rect: { top: number; left: number; height: number; width: number },\n  event: PointerEvent,\n  maxScroll: number,\n): number {\n  const size = isVertical(orientation) ? rect.height : rect.width;\n  if (size === 0) return 0;\n  const offset = isVertical(orientation)\n    ? event.clientY - rect.top\n    : event.clientX - rect.left;\n  return (offset / size) * maxScroll;\n}\n\n/** 键盘按键 → 滚动增量；不可识别的键返回 `undefined`（调用方跳过） */\nexport function keyboardScrollDelta(\n  key: string,\n  pageSize: number,\n): number | undefined {\n  const keyMap: Record<string, number> = {\n    ArrowDown: KEYBOARD_STEP_PX,\n    ArrowRight: KEYBOARD_STEP_PX,\n    ArrowUp: -KEYBOARD_STEP_PX,\n    ArrowLeft: -KEYBOARD_STEP_PX,\n    PageDown: pageSize,\n    PageUp: -pageSize,\n    Home: -Infinity,\n    End: Infinity,\n  };\n  return keyMap[key];\n}\n\n/**\n * 把键盘增量应用到 [0, max] 区间。\n * `delta` 为 ±Infinity 时分别落到两端（Home / End 语义）。\n * 注意：这里用 `scrollSize` 而不是 `max` 作为 End 的目标，保留原有行为\n * （浏览器会自动夹到最大值）。\n */\nexport function scrollFromKeyboard(\n  current: number,\n  delta: number,\n  max: number,\n  scrollSize: number,\n): number {\n  if (delta === Infinity) return scrollSize;\n  if (delta === -Infinity) return 0;\n  return Math.max(0, Math.min(max, current + delta));\n}\n\n/** 可见性：悬停、正在拖动当前轴、或滑块处于按压态 */\nexport function isScrollBarVisible(\n  hovering: boolean,\n  dragging: \"horizontal\" | \"vertical\" | null,\n  orientation: Orientation,\n  active: boolean,\n): boolean {\n  return hovering || dragging === orientation || active;\n}\n"],"mappings":"AAkBA,SAAgBA,EAAW,GAAmC;CAC5D,OAAOC,MAAgB;AACzB;AAMA,SAAgBC,EACd,GACA,GACA,GACwD;CACxD,IAAMC,IAAiBC,IAAA,GACjBC,IAAY,KAAK,IAAIF,IAAiBG,EAAQ,YAAA,EAAwB,GAEtEC,IADY,KAAK,IAAI,GAAGJ,IAAiBE,CAChC,IAAYC,EAAQ;CAEnC,OAAON,EAAWC,CAAW,IACzB;EAAE,QAAQ,GAAGI,EAAU;EAAK,WAAW,cAAcE,EAAO;CAAK,IACjE;EAAE,OAAO,GAAGF,EAAU;EAAK,WAAW,cAAcE,EAAO;CAAK;AACtE;AAGA,SAAgBC,EAAoB,GAAgC;CAClE,OAAO,KAAK,MAAMF,EAAQ,cAAc,GAAG;AAC7C;AAGA,SAAgBG,EACd,GACA,GACQ;CACR,OAAOT,EAAWC,CAAW,IAAIS,EAAM,UAAUA,EAAM;AACzD;AAGA,SAAgBC,EACd,GACA,GACQ;CACR,OAAOX,EAAWC,CAAW,IACzBW,EAAS,eAAeA,EAAS,eACjCA,EAAS,cAAcA,EAAS;AACtC;AAGA,SAAgBC,EACd,GACA,GACQ;CACR,OAAOb,EAAWC,CAAW,IAAIW,EAAS,YAAYA,EAAS;AACjE;AAGA,SAAgBE,EACd,GACA,GACA,GACM;CACN,AAAId,EAAWC,CAAW,IACxB,EAAS,YAAYc,IAErB,EAAS,aAAaA;AAE1B;AAMA,SAAgBC,EACd,GACA,GACA,GACQ;CACR,IAAMC,IAAcb,IAAA,IAA+BC;CACnD,OAAOY,MAAgB,IAAI,IAAIC,IAAYD;AAC7C;AAGA,SAAgBE,EACd,GACA,GACA,GACA,GACQ;CACR,OAAO,KAAK,IAAI,GAAG,KAAK,IAAID,GAAWE,IAAcC,IAAUC,CAAK,CAAC;AACvE;AAMA,SAAgBC,EACd,GACA,GACA,GACA,GACQ;CACR,IAAMC,IAAOxB,EAAWC,CAAW,IAAIwB,EAAK,SAASA,EAAK;CAK1D,OAJID,MAAS,IAAU,KACRxB,EAAWC,CAAW,IACjCS,EAAM,UAAUe,EAAK,MACrBf,EAAM,UAAUe,EAAK,QACRD,IAAQN;AAC3B;AAGA,SAAgBQ,EACd,GACA,GACoB;CAWpB,OAAO;EATL,WAAA;EACA,YAAA;EACA,SAAS;EACT,WAAW;EACX,UAAUC;EACV,QAAQ,CAACA;EACT,MAAM;EACN,KAAK;CAEA,EAAOC;AAChB;AAQA,SAAgBC,EACd,GACA,GACA,GACA,GACQ;CAGR,OAFIC,MAAU,WAAiBC,IAC3BD,MAAU,YAAkB,IACzB,KAAK,IAAI,GAAG,KAAK,IAAIE,GAAKC,IAAUH,CAAK,CAAC;AACnD;AAGA,SAAgBI,EACd,GACA,GACA,GACA,GACS;CACT,OAAOC,KAAYC,MAAanC,KAAeoC;AACjD"}

package/dist/components/scroll-area/ScrollBar/scroll-bar.thumb-drag.d.ts

@@ -0,0 +1,25 @@
+import { Accessor } from 'solid-js';
+import { Orientation } from './ScrollBar.utils';
+export interface ThumbDragContext {
+    /** track 元素（拖动比例、点击换算都要读它的尺寸） */
+    track: () => HTMLDivElement | undefined;
+    /** 被滚动容器 */
+    viewport: () => HTMLDivElement | undefined;
+    orientation: Accessor<Orientation>;
+    /** 拖动开始/结束（组件用它维护 active 高亮） */
+    onDragChange: (dragging: boolean) => void;
+}
+export interface ThumbDragSession {
+    /** 开始一次拖动；viewport / track / thumb 缺一不可，前置条件不足时什么都不做 */
+    start: (event: PointerEvent) => void;
+    /** 结束并解绑（组件卸载时兜底调用） */
+    dispose: () => void;
+}
+/**
+ * 拖动滑块的一次会话。
+ *
+ * 单一职责：把指针位移按「滚动距离 / 可用轨道长度」的比例映射成滚动位置。
+ * 监听挂在 window 上（指针移出 track 也继续跟手），结束后统一解绑；
+ * 具体的比例与坐标换算委托给 `ScrollBar.utils`。
+ */
+export declare function createThumbDrag(ctx: ThumbDragContext): ThumbDragSession;

package/dist/components/scroll-area/ScrollBar/scroll-bar.thumb-drag.js

@@ -0,0 +1,26 @@
+import { applyScrollPos as e, isVertical as t, maxScrollOf as n, pointerCoord as r, scrollFromDrag as i, scrollPosOf as a, thumbDragRatio as o } from "./ScrollBar.utils.js";
+//#region src/components/scroll-area/ScrollBar/scroll-bar.thumb-drag.ts
+function s(s) {
+	let c = null;
+	return {
+		start: (l) => {
+			l.preventDefault(), l.stopPropagation();
+			let u = s.viewport(), d = s.track(), f = l.currentTarget;
+			if (!u || !d || !f) return;
+			let p = s.orientation(), m = t(p), h = r(p, l), g = a(p, u), _ = n(p, u), v = m ? d.clientHeight : d.clientWidth, y = m ? f.clientHeight : f.clientWidth, b = o(_, v, y), x = (t) => {
+				let n = r(p, t) - h;
+				e(p, u, i(g, n, b, _));
+			}, S = () => c?.();
+			c = () => {
+				window.removeEventListener("pointermove", x), window.removeEventListener("pointerup", S), c = null, s.onDragChange(!1);
+			}, s.onDragChange(!0), window.addEventListener("pointermove", x), window.addEventListener("pointerup", S);
+		},
+		dispose() {
+			c?.();
+		}
+	};
+}
+//#endregion
+export { s as createThumbDrag };
+
+//# sourceMappingURL=scroll-bar.thumb-drag.js.map

package/dist/components/scroll-area/ScrollBar/scroll-bar.thumb-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-bar.thumb-drag.js","names":["createThumbDrag","detach","event","vp","ctx","track","thumb","axis","vertical","isVertical","startPointer","pointerCoord","startScroll","scrollPosOf","maxScroll","maxScrollOf","trackSize","thumbSize","ratio","thumbDragRatio","onMove","delta","moveEvent","scrollFromDrag","onUp"],"sources":["../../../../src/components/scroll-area/ScrollBar/scroll-bar.thumb-drag.ts"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport {\n  applyScrollPos,\n  isVertical,\n  maxScrollOf,\n  type Orientation,\n  pointerCoord,\n  scrollFromDrag,\n  scrollPosOf,\n  thumbDragRatio,\n} from \"./ScrollBar.utils\";\n\nexport interface ThumbDragContext {\n  /** track 元素（拖动比例、点击换算都要读它的尺寸） */\n  track: () => HTMLDivElement | undefined;\n  /** 被滚动容器 */\n  viewport: () => HTMLDivElement | undefined;\n  orientation: Accessor<Orientation>;\n  /** 拖动开始/结束（组件用它维护 active 高亮） */\n  onDragChange: (dragging: boolean) => void;\n}\n\nexport interface ThumbDragSession {\n  /** 开始一次拖动；viewport / track / thumb 缺一不可，前置条件不足时什么都不做 */\n  start: (event: PointerEvent) => void;\n  /** 结束并解绑（组件卸载时兜底调用） */\n  dispose: () => void;\n}\n\n/**\n * 拖动滑块的一次会话。\n *\n * 单一职责：把指针位移按「滚动距离 / 可用轨道长度」的比例映射成滚动位置。\n * 监听挂在 window 上（指针移出 track 也继续跟手），结束后统一解绑；\n * 具体的比例与坐标换算委托给 `ScrollBar.utils`。\n */\nexport function createThumbDrag(ctx: ThumbDragContext): ThumbDragSession {\n  /** 拖动期间挂到 window 上的解绑函数，用于卸载兜底 */\n  let detach: (() => void) | null = null;\n\n  const start = (event: PointerEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const vp = ctx.viewport();\n    const track = ctx.track();\n    const thumb = event.currentTarget as HTMLDivElement | null;\n    if (!vp || !track || !thumb) return;\n\n    const axis = ctx.orientation();\n    const vertical = isVertical(axis);\n    const startPointer = pointerCoord(axis, event);\n    const startScroll = scrollPosOf(axis, vp);\n    const maxScroll = maxScrollOf(axis, vp);\n    const trackSize = vertical ? track.clientHeight : track.clientWidth;\n    const thumbSize = vertical ? thumb.clientHeight : thumb.clientWidth;\n    const ratio = thumbDragRatio(maxScroll, trackSize, thumbSize);\n\n    const onMove = (moveEvent: PointerEvent) => {\n      const delta = pointerCoord(axis, moveEvent) - startPointer;\n      applyScrollPos(\n        axis,\n        vp,\n        scrollFromDrag(startScroll, delta, ratio, maxScroll),\n      );\n    };\n\n    const onUp = () => detach?.();\n\n    detach = () => {\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerup\", onUp);\n      detach = null;\n      ctx.onDragChange(false);\n    };\n\n    ctx.onDragChange(true);\n    window.addEventListener(\"pointermove\", onMove);\n    window.addEventListener(\"pointerup\", onUp);\n  };\n\n  return {\n    start,\n    dispose() {\n      detach?.();\n    },\n  };\n}\n"],"mappings":";;AAoCA,SAAgBA,EAAgB,GAAyC;CAEvE,IAAIC,IAA8B;CA2ClC,OAAO;EACL,QA1Ca,MAAwB;GAErC,AADAC,EAAM,eAAe,GACrBA,EAAM,gBAAgB;GAEtB,IAAMC,IAAKC,EAAI,SAAS,GAClBC,IAAQD,EAAI,MAAM,GAClBE,IAAQJ,EAAM;GACpB,IAAI,CAACC,KAAM,CAACE,KAAS,CAACC,GAAO;GAE7B,IAAMC,IAAOH,EAAI,YAAY,GACvBI,IAAWC,EAAWF,CAAI,GAC1BG,IAAeC,EAAaJ,GAAML,CAAK,GACvCU,IAAcC,EAAYN,GAAMJ,CAAE,GAClCW,IAAYC,EAAYR,GAAMJ,CAAE,GAChCa,IAAYR,IAAWH,EAAM,eAAeA,EAAM,aAClDY,IAAYT,IAAWF,EAAM,eAAeA,EAAM,aAClDY,IAAQC,EAAeL,GAAWE,GAAWC,CAAS,GAEtDG,KAAU,MAA4B;IAC1C,IAAMC,IAAQV,EAAaJ,GAAMe,CAAS,IAAIZ;IAC9C,EACEH,GACAJ,GACAoB,EAAeX,GAAaS,GAAOH,GAAOJ,CAAS,CACrD;GACF,GAEMU,UAAavB,IAAS;GAW5B,AATA,UAAe;IAIb,AAHA,OAAO,oBAAoB,eAAemB,CAAM,GAChD,OAAO,oBAAoB,aAAaI,CAAI,GAC5C,IAAS,MACTpB,EAAI,aAAa,EAAK;GACxB,GAEAA,EAAI,aAAa,EAAI,GACrB,OAAO,iBAAiB,eAAegB,CAAM,GAC7C,OAAO,iBAAiB,aAAaI,CAAI;EAC3C;EAIE,UAAU;GACR,IAAS;EACX;CACF;AACF"}

package/dist/components/scroll-area/ScrollBar/useScrollBarInteraction.d.ts

@@ -0,0 +1,19 @@
+import { Accessor } from 'solid-js';
+import { Orientation } from './ScrollBar.utils';
+interface Options {
+    /** track 元素访问器（拖动比例、点击换算都要读它的尺寸） */
+    track: () => HTMLDivElement | undefined;
+    /** 被滚动容器的访问器 */
+    viewport: () => HTMLDivElement | undefined;
+    /** 当前滚动轴 */
+    orientation: Accessor<Orientation>;
+    /** 拖动开始/结束的回调（组件用它维护 dragging 状态） */
+    onDragChange: (dragging: boolean) => void;
+}
+export interface ScrollBarInteraction {
+    onThumbPointerDown: (event: PointerEvent) => void;
+    onTrackPointerDown: (event: PointerEvent) => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+}
+export declare function useScrollBarInteraction({ track, viewport, orientation, onDragChange, }: Options): ScrollBarInteraction;
+export {};

package/dist/components/scroll-area/ScrollBar/useScrollBarInteraction.js

@@ -0,0 +1,37 @@
+import { applyScrollPos as e, isVertical as t, keyboardScrollDelta as n, maxScrollOf as r, scrollFromKeyboard as i, scrollFromTrackClick as a, scrollPosOf as o } from "./ScrollBar.utils.js";
+import { createThumbDrag as s } from "./scroll-bar.thumb-drag.js";
+import { onCleanup as c } from "solid-js";
+//#region src/components/scroll-area/ScrollBar/useScrollBarInteraction.ts
+function l({ track: l, viewport: u, orientation: d, onDragChange: f }) {
+	let p = s({
+		track: l,
+		viewport: u,
+		orientation: d,
+		onDragChange: f
+	});
+	return c(p.dispose), {
+		onThumbPointerDown: (e) => p.start(e),
+		onTrackPointerDown: (e) => {
+			let n = u(), i = l();
+			if (!n || !i) return;
+			let o = d(), s = a(o, i.getBoundingClientRect(), e, r(o, n));
+			n.scrollTo({
+				[t(o) ? "top" : "left"]: s,
+				behavior: "smooth"
+			});
+		},
+		onKeyDown: (a) => {
+			let s = u();
+			if (!s) return;
+			let c = d(), l = t(c) ? s.clientHeight : s.clientWidth, f = n(a.key, l);
+			if (f === void 0) return;
+			a.preventDefault();
+			let p = t(c) ? s.scrollHeight : s.scrollWidth, m = r(c, s);
+			e(c, s, i(o(c, s), f, m, p));
+		}
+	};
+}
+//#endregion
+export { l as useScrollBarInteraction };
+
+//# sourceMappingURL=useScrollBarInteraction.js.map