@neut/ui 0.0.17 → 0.0.18

package/dist/components/resizable/useResizablePanelGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizablePanelGroup.js","names":["EPSILON","STORAGE_PREFIX","useResizablePanelGroup","groupElement","setGroupElement","createSignal","dragging","setDragging","store","setStore","createStore","metas","order","initialized","collapsedMemory","orderedMetas","element","meta","effMin","isCollapsedSize","size","storageOf","options","storageKey","id","layout","result","roundPercent","persist","key","storage","next","notify","commit","readSaved","raw","parsed","bounds","reportResize","newSize","was","oldSize","now","applySizes","list","before","produce","value","values","index","report","buildInitial","saved","fromLayout","defined","unknown","used","acc","remaining","fill","initialize","normalizeSizes","scheduleInitialize","registerPanel","item","draft","adjacentOf","prevEl","handleEl","nextEl","prev","prevSize","applyPair","lo","total","hi","clamp","targetPrev","rest","prevOld","nextOld","setAdjacentSize","adjacent","targetPrevSize","nudgeAdjacent","deltaPercent","collapsePanel","current","applyPanelTarget","expandPanel","remembered","nextElement","prevElement","nextMeta","prevMeta","targetSize"],"sources":["../../../src/components/resizable/useResizablePanelGroup.ts"],"sourcesContent":["import { createSignal, type Accessor } from \"solid-js\";\nimport { createStore, produce } from \"solid-js/store\";\nimport type { ResizablePanelGroupContextValue } from \"./resizable.context\";\nimport type {\n  ResizableLayout,\n  ResizableOrientation,\n  ResizablePanelMeta,\n} from \"./resizable.types\";\nimport { clamp, normalizeSizes, roundPercent } from \"./resizable.utils\";\n\nconst EPSILON = 0.001;\nconst STORAGE_PREFIX = \"neut-resizable:\";\n\ninterface Options {\n  orientation: Accessor<ResizableOrientation>;\n  defaultLayout: Accessor<ResizableLayout | undefined>;\n  onLayoutChange: (layout: ResizableLayout) => void;\n  autoSaveId: Accessor<string | undefined>;\n  storage: Accessor<Storage | undefined>;\n  keyboardResizeBy: Accessor<number>;\n}\n\n/**\n * Resizable 的布局引擎(对齐 react-resizable-panels v4 的核心语义,但按 Solid 重写):\n * - 尺寸用**百分比权重**存在 store 里,渲染时映射为 `flex-grow`,拖拽只更新相邻两个\n *   panel 的两个键,子节点不重渲染(细粒度更新);\n * - panel 在挂载时注册(顺序即 DOM 顺序),handle 通过相邻兄弟节点解析前后 panel;\n * - 约束/min/max/collapsible 吸附、归一化到 100、以及命令式 collapse/expand;\n * - 拖拽用 pointer capture,pointermove 由调用方用 rAF 合并,避免高频写 store;\n * - autoSaveId + storage 做布局持久化。\n */\nexport function useResizablePanelGroup(\n  options: Options,\n): ResizablePanelGroupContextValue {\n  const [groupElement, setGroupElement] = createSignal<HTMLElement>();\n  const [dragging, setDragging] = createSignal(false);\n  const [store, setStore] = createStore<Record<string, number>>({});\n\n  const metas = new Map<HTMLElement, ResizablePanelMeta>();\n  let order: HTMLElement[] = [];\n  let initialized = false;\n  const collapsedMemory = new Map<string, number>();\n\n  const orderedMetas = (): ResizablePanelMeta[] =>\n    order\n      .map((element) => metas.get(element))\n      .filter((meta): meta is ResizablePanelMeta => !!meta);\n\n  /** 可折叠时为 collapsedSize,否则为 minSize(即拖拽能到的最小值) */\n  const effMin = (meta: ResizablePanelMeta) =>\n    meta.collapsible() ? meta.collapsedSize() : meta.minSize();\n\n  const isCollapsedSize = (meta: ResizablePanelMeta, size: number) =>\n    meta.collapsible() && size <= meta.collapsedSize() + EPSILON;\n\n  const storageOf = (): Storage | undefined =>\n    options.storage() ??\n    (typeof localStorage !== \"undefined\" ? localStorage : undefined);\n\n  const storageKey = (): string | undefined => {\n    const id = options.autoSaveId();\n    return id ? `${STORAGE_PREFIX}${id}` : undefined;\n  };\n\n  const layout = (): ResizableLayout => {\n    const result: ResizableLayout = {};\n    for (const meta of orderedMetas()) {\n      result[meta.id] = roundPercent(store[meta.id] ?? 0);\n    }\n    return result;\n  };\n\n  const persist = (next: ResizableLayout) => {\n    const key = storageKey();\n    const storage = storageOf();\n    if (!key || !storage) return;\n    try {\n      storage.setItem(key, JSON.stringify(next));\n    } catch {\n      // 隐私模式等场景下忽略持久化失败\n    }\n  };\n\n  /** 只通知布局变化(拖拽的每一帧),不写 storage */\n  const notify = () => options.onLayoutChange(layout());\n\n  /** 通知 + 持久化(离散操作与拖拽结束) */\n  const commit = () => {\n    const next = layout();\n    options.onLayoutChange(next);\n    persist(next);\n  };\n\n  const readSaved = (): ResizableLayout | undefined => {\n    const key = storageKey();\n    const storage = storageOf();\n    if (!key || !storage) return undefined;\n    try {\n      const raw = storage.getItem(key);\n      if (!raw) return undefined;\n      const parsed = JSON.parse(raw) as unknown;\n      return typeof parsed === \"object\" && parsed !== null\n        ? (parsed as ResizableLayout)\n        : undefined;\n    } catch {\n      return undefined;\n    }\n  };\n\n  const bounds = () =>\n    orderedMetas().map((meta) => ({\n      min: effMin(meta),\n      max: meta.maxSize(),\n    }));\n\n  const reportResize = (\n    meta: ResizablePanelMeta,\n    oldSize: number,\n    newSize: number,\n  ) => {\n    meta.onResize?.(roundPercent(newSize));\n    if (!meta.collapsible()) return;\n    const was = isCollapsedSize(meta, oldSize);\n    const now = isCollapsedSize(meta, newSize);\n    if (!was && now) meta.onCollapse?.();\n    else if (was && !now) meta.onExpand?.();\n  };\n\n  const applySizes = (values: number[], report = true) => {\n    const list = orderedMetas();\n    const before = list.map((meta) => store[meta.id] ?? 0);\n    setStore(\n      produce((draft) => {\n        list.forEach((meta, index) => {\n          const value = values[index];\n          if (value !== undefined) draft[meta.id] = value;\n        });\n      }),\n    );\n    if (report) {\n      list.forEach((meta, index) => {\n        const value = values[index];\n        if (value !== undefined) reportResize(meta, before[index]!, value);\n      });\n    }\n  };\n\n  const buildInitial = (): number[] => {\n    const list = orderedMetas();\n    const saved = readSaved() ?? options.defaultLayout();\n    const raw = list.map((meta) => {\n      const fromLayout = saved?.[meta.id];\n      if (fromLayout !== undefined) return fromLayout;\n      return meta.defaultSize;\n    });\n    const defined = raw.filter((value): value is number => value !== undefined);\n    const unknown = raw.length - defined.length;\n    const used = defined.reduce((acc, value) => acc + value, 0);\n    const remaining = Math.max(0, 100 - used);\n    const fill = unknown > 0 ? remaining / unknown : 0;\n    return raw.map((value) => value ?? fill);\n  };\n\n  const initialize = () => {\n    if (initialized) return;\n    // SSR 不计算布局:首屏由 Panel 的 defaultSize fallback 撑起,客户端再归一化\n    if (typeof window === \"undefined\") return;\n    const list = orderedMetas();\n    if (list.length === 0) return;\n    initialized = true;\n    applySizes(normalizeSizes(buildInitial(), bounds()), false);\n    commit();\n  };\n\n  const scheduleInitialize = () => {\n    if (typeof window === \"undefined\") return;\n    queueMicrotask(() => {\n      if (!initialized) initialize();\n    });\n  };\n\n  const registerPanel = (meta: ResizablePanelMeta) => {\n    metas.set(meta.element, meta);\n    order = [...order, meta.element];\n    if (!initialized) {\n      scheduleInitialize();\n    } else if (store[meta.id] === undefined) {\n      // 动态新增:给它默认尺寸,并把其它面板等比压回 100\n      const list = orderedMetas();\n      const raw = list.map((item) =>\n        item.id === meta.id\n          ? (item.defaultSize ?? 100 / list.length)\n          : (store[item.id] ?? 0),\n      );\n      applySizes(normalizeSizes(raw, bounds()));\n      commit();\n    }\n    return () => {\n      metas.delete(meta.element);\n      order = order.filter((element) => element !== meta.element);\n      setStore(\n        produce((draft) => {\n          delete draft[meta.id];\n        }),\n      );\n    };\n  };\n\n  const adjacentOf = (handleEl: HTMLElement) => {\n    let prevEl = handleEl.previousElementSibling as HTMLElement | null;\n    while (prevEl && !metas.has(prevEl)) {\n      prevEl = prevEl.previousElementSibling as HTMLElement | null;\n    }\n    let nextEl = handleEl.nextElementSibling as HTMLElement | null;\n    while (nextEl && !metas.has(nextEl)) {\n      nextEl = nextEl.nextElementSibling as HTMLElement | null;\n    }\n    if (!prevEl || !nextEl) return undefined;\n    const prev = metas.get(prevEl)!;\n    const next = metas.get(nextEl)!;\n    const prevSize = store[prev.id] ?? 0;\n    const nextSize = store[next.id] ?? 0;\n    return { prev, next, prevSize, total: prevSize + nextSize };\n  };\n\n  const applyPair = (\n    prev: ResizablePanelMeta,\n    next: ResizablePanelMeta,\n    targetPrev: number,\n    total: number,\n  ) => {\n    const lo = Math.max(effMin(prev), total - next.maxSize());\n    const hi = Math.min(prev.maxSize(), total - effMin(next));\n    let size = clamp(targetPrev, lo, hi);\n\n    // 折叠吸附:落在 (collapsedSize, minSize) 之间时贴向较近的一端\n    if (\n      prev.collapsible() &&\n      size < prev.minSize() - EPSILON &&\n      size > prev.collapsedSize() + EPSILON\n    ) {\n      size =\n        size - prev.collapsedSize() < prev.minSize() - size\n          ? prev.collapsedSize()\n          : prev.minSize();\n    }\n    if (\n      next.collapsible() &&\n      total - size < next.minSize() - EPSILON &&\n      total - size > next.collapsedSize() + EPSILON\n    ) {\n      const rest = total - size;\n      size =\n        total -\n        (rest - next.collapsedSize() < next.minSize() - rest\n          ? next.collapsedSize()\n          : next.minSize());\n    }\n    size = clamp(size, lo, hi);\n\n    const prevOld = store[prev.id] ?? 0;\n    const nextOld = store[next.id] ?? 0;\n    setStore(\n      produce((draft) => {\n        draft[prev.id] = size;\n        draft[next.id] = total - size;\n      }),\n    );\n    reportResize(prev, prevOld, size);\n    reportResize(next, nextOld, total - size);\n  };\n\n  const setAdjacentSize = (handleEl: HTMLElement, targetPrevSize: number) => {\n    const adjacent = adjacentOf(handleEl);\n    if (!adjacent) return;\n    applyPair(adjacent.prev, adjacent.next, targetPrevSize, adjacent.total);\n    // 拖拽帧只通知,持久化留到 pointerup 的 commitLayout\n    notify();\n  };\n\n  const nudgeAdjacent = (handleEl: HTMLElement, deltaPercent: number) => {\n    const adjacent = adjacentOf(handleEl);\n    if (!adjacent) return;\n    applyPair(\n      adjacent.prev,\n      adjacent.next,\n      adjacent.prevSize + deltaPercent,\n      adjacent.total,\n    );\n    commit();\n  };\n\n  const collapsePanel = (id: string) => {\n    const meta = orderedMetas().find((item) => item.id === id);\n    if (!meta?.collapsible()) return false;\n    const current = store[id] ?? 0;\n    if (isCollapsedSize(meta, current)) return false;\n    collapsedMemory.set(id, current);\n    applyPanelTarget(meta, meta.collapsedSize());\n    commit();\n    return true;\n  };\n\n  const expandPanel = (id: string) => {\n    const meta = orderedMetas().find((item) => item.id === id);\n    if (!meta?.collapsible()) return false;\n    const current = store[id] ?? 0;\n    if (!isCollapsedSize(meta, current)) return false;\n    const remembered = collapsedMemory.get(id) ?? meta.minSize();\n    applyPanelTarget(meta, Math.max(remembered, meta.minSize()));\n    commit();\n    return true;\n  };\n\n  /** 命令式设置单个 panel,并把它与相邻 panel 之间重新分配 */\n  const applyPanelTarget = (meta: ResizablePanelMeta, targetSize: number) => {\n    const index = order.indexOf(meta.element);\n    const nextElement = order[index + 1];\n    const prevElement = order[index - 1];\n    const nextMeta = nextElement ? metas.get(nextElement) : undefined;\n    const prevMeta = prevElement ? metas.get(prevElement) : undefined;\n    if (nextMeta) {\n      const total = (store[meta.id] ?? 0) + (store[nextMeta.id] ?? 0);\n      applyPair(meta, nextMeta, targetSize, total);\n    } else if (prevMeta) {\n      const total = (store[prevMeta.id] ?? 0) + (store[meta.id] ?? 0);\n      applyPair(prevMeta, meta, total - targetSize, total);\n    } else {\n      setStore(meta.id, 100);\n    }\n  };\n\n  const setPanelSize = (id: string, size: number) => {\n    const meta = orderedMetas().find((item) => item.id === id);\n    if (!meta) return;\n    applyPanelTarget(meta, size);\n    commit();\n  };\n\n  const toggleHandleCollapse = (handleEl: HTMLElement) => {\n    const adjacent = adjacentOf(handleEl);\n    if (!adjacent) return;\n    const { prev, next } = adjacent;\n    if (prev.collapsible()) {\n      if (isCollapsedSize(prev, store[prev.id] ?? 0)) {\n        expandPanel(prev.id);\n      } else {\n        collapsePanel(prev.id);\n      }\n      return;\n    }\n    if (next.collapsible()) {\n      if (isCollapsedSize(next, store[next.id] ?? 0)) {\n        expandPanel(next.id);\n      } else {\n        collapsePanel(next.id);\n      }\n      return;\n    }\n  };\n\n  const groupSizePx = () => {\n    const element = groupElement();\n    if (!element) return 0;\n    return options.orientation() === \"horizontal\"\n      ? element.clientWidth\n      : element.clientHeight;\n  };\n\n  const isRtl = () => {\n    const element = groupElement();\n    if (!element) return false;\n    return window.getComputedStyle(element).direction === \"rtl\";\n  };\n\n  return {\n    orientation: options.orientation,\n    sizes: () => store,\n    groupElement,\n    setGroupElement,\n    dragging,\n    keyboardResizeBy: options.keyboardResizeBy,\n    registerPanel,\n    resolveAdjacent: (handleEl) => adjacentOf(handleEl),\n    setAdjacentSize,\n    nudgeAdjacent,\n    toggleHandleCollapse,\n    groupSizePx,\n    isRtl,\n    beginDrag: () => setDragging(true),\n    endDrag: () => setDragging(false),\n    commitLayout: commit,\n    setPanelSize,\n    collapsePanel,\n    expandPanel,\n    isPanelCollapsed: (id) => {\n      const meta = orderedMetas().find((item) => item.id === id);\n      return meta ? isCollapsedSize(meta, store[id] ?? 0) : false;\n    },\n    getPanelSize: (id) => store[id] ?? 0,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useResizablePanelGroup.js","names":["useResizablePanelGroup","groupElement","setGroupElement","createSignal","dragging","setDragging","registry","createPanelRegistry","registryVersion","setRegistryVersion","orderedMetas","sizes","createPanelSizes","reporting","meta","oldSize","newSize","createLayoutReporting","options","registerPanel","createPanelLifecycle","version","adjacentOf","handleEl","sizeOf","setAdjacentSize","adjacent","applyPair","targetPrevSize","notify","nudgeAdjacent","deltaPercent","commit","createPanelCommands","store","element"],"sources":["../../../src/components/resizable/useResizablePanelGroup.ts"],"sourcesContent":["import { createSignal, type Accessor } from \"solid-js\";\nimport type { ResizablePanelGroupContextValue } from \"./resizable.context\";\nimport type {\n  ResizableLayout,\n  ResizableOrientation,\n  ResizablePanelMeta,\n} from \"./resizable.types\";\nimport { createPanelCommands } from \"./resizable.commands\";\nimport { createPanelLifecycle } from \"./resizable.lifecycle\";\nimport { createPanelRegistry } from \"./resizable.registry\";\nimport { createLayoutReporting } from \"./resizable.reporting\";\nimport { createPanelSizes } from \"./resizable.sizes\";\n\ninterface Options {\n  orientation: Accessor<ResizableOrientation>;\n  defaultLayout: Accessor<ResizableLayout | undefined>;\n  onLayoutChange: (layout: ResizableLayout) => void;\n  autoSaveId: Accessor<string | undefined>;\n  storage: Accessor<Storage | undefined>;\n  keyboardResizeBy: Accessor<number>;\n}\n\n/**\n * Resizable 的布局引擎(对齐 react-resizable-panels v4 的核心语义,但按 Solid 重写):\n * - 尺寸用**百分比权重**存在 store 里,渲染时映射为 `flex-grow`,拖拽只更新相邻两个\n *   panel 的两个键,子节点不重渲染(细粒度更新);\n * - panel 在挂载时注册(顺序即 DOM 顺序),handle 通过相邻兄弟节点解析前后 panel;\n * - 约束/min/max/collapsible 吸附、归一化到 100、以及命令式 collapse/expand;\n * - 拖拽用 pointer capture,pointermove 由调用方用 rAF 合并,避免高频写 store;\n * - autoSaveId + storage 做布局持久化。\n */\nexport function useResizablePanelGroup(\n  options: Options,\n): ResizablePanelGroupContextValue {\n  const [groupElement, setGroupElement] = createSignal<HTMLElement>();\n  const [dragging, setDragging] = createSignal(false);\n  const registry = createPanelRegistry();\n  // 注册表变化本身不是响应式的，但 resolveAdjacent 的消费方（Handle 的 aria 值）\n  // 需要「面板挂载/卸载后重算」。这个版本号就是那条依赖边。\n  const [registryVersion, setRegistryVersion] = createSignal(0);\n\n  const orderedMetas = (): ResizablePanelMeta[] => registry.ordered();\n\n  const sizes = createPanelSizes({\n    metas: orderedMetas,\n    registry,\n    reportSizeChange: (meta, oldSize, newSize) =>\n      reporting.reportSizeChange(meta, oldSize, newSize),\n  });\n  const { store, sizeOf, applyPair } = sizes;\n\n  const reporting = createLayoutReporting({\n    metas: orderedMetas,\n    sizeOf,\n    onLayoutChange: options.onLayoutChange,\n    persist: () => ({\n      autoSaveId: options.autoSaveId(),\n      storage: options.storage(),\n    }),\n  });\n  const { notify, commit, readSaved } = reporting;\n\n  const lifecycle = createPanelLifecycle({\n    metas: orderedMetas,\n    registry,\n    sizes,\n    readSaved,\n    defaultLayout: options.defaultLayout,\n    commit,\n    onRegistryChange: () => setRegistryVersion((version) => version + 1),\n  });\n  const registerPanel = lifecycle.registerPanel;\n\n  const adjacentOf = (handleEl: HTMLElement) =>\n    registry.adjacent(handleEl, sizeOf);\n\n  const setAdjacentSize = (handleEl: HTMLElement, targetPrevSize: number) => {\n    const adjacent = adjacentOf(handleEl);\n    if (!adjacent) return;\n    applyPair(adjacent.prev, adjacent.next, targetPrevSize, adjacent.total);\n    // 拖拽帧只通知,持久化留到 pointerup 的 commitLayout\n    notify();\n  };\n\n  const nudgeAdjacent = (handleEl: HTMLElement, deltaPercent: number) => {\n    const adjacent = adjacentOf(handleEl);\n    if (!adjacent) return;\n    applyPair(\n      adjacent.prev,\n      adjacent.next,\n      adjacent.prevSize + deltaPercent,\n      adjacent.total,\n    );\n    commit();\n  };\n\n  const commands = createPanelCommands({\n    metas: orderedMetas,\n    registry,\n    sizes,\n    commit,\n  });\n  const {\n    collapsePanel,\n    expandPanel,\n    setPanelSize,\n    isPanelCollapsed,\n    toggleHandleCollapse,\n  } = commands;\n\n  const groupSizePx = () => {\n    const element = groupElement();\n    if (!element) return 0;\n    return options.orientation() === \"horizontal\"\n      ? element.clientWidth\n      : element.clientHeight;\n  };\n\n  const isRtl = () => {\n    const element = groupElement();\n    if (!element) return false;\n    return window.getComputedStyle(element).direction === \"rtl\";\n  };\n\n  return {\n    orientation: options.orientation,\n    sizes: () => store,\n    groupElement,\n    setGroupElement,\n    dragging,\n    keyboardResizeBy: options.keyboardResizeBy,\n    registerPanel,\n    resolveAdjacent: (handleEl) => {\n      // 读取版本号：面板挂载/卸载后让消费方（如 aria-valuenow）重算\n      registryVersion();\n      return adjacentOf(handleEl);\n    },\n    setAdjacentSize,\n    nudgeAdjacent,\n    toggleHandleCollapse,\n    groupSizePx,\n    isRtl,\n    beginDrag: () => setDragging(true),\n    endDrag: () => setDragging(false),\n    commitLayout: commit,\n    setPanelSize,\n    collapsePanel,\n    expandPanel,\n    isPanelCollapsed,\n    getPanelSize: sizeOf,\n  };\n}\n"],"mappings":";;;;;;;AA+BA,SAAgBA,EACd,GACiC;CACjC,IAAM,CAACC,GAAcC,KAAmBC,EAA0B,GAC5D,CAACC,GAAUC,KAAeF,EAAa,EAAK,GAC5CG,IAAWC,EAAoB,GAG/B,CAACC,GAAiBC,KAAsBN,EAAa,CAAC,GAEtDO,UAA2CJ,EAAS,QAAQ,GAE5DK,IAAQC,EAAiB;EAC7B,OAAOF;EACP;EACA,mBAAmB,GAAM,GAAS,MAChCG,EAAU,iBAAiBC,GAAMC,GAASC,CAAO;CACrD,CAAC,GACK,EAAE,UAAO,WAAQ,iBAAcL,GAE/BE,IAAYI,EAAsB;EACtC,OAAOP;EACP;EACA,gBAAgBQ,EAAQ;EACxB,gBAAgB;GACd,YAAYA,EAAQ,WAAW;GAC/B,SAASA,EAAQ,QAAQ;EAC3B;CACF,CAAC,GACK,EAAE,WAAQ,WAAQ,iBAAcL,GAWhCM,IATYC,EAAqB;EACrC,OAAOV;EACP;EACA;EACA;EACA,eAAeQ,EAAQ;EACvB;EACA,wBAAwBT,GAAoB,MAAYY,IAAU,CAAC;CACrE,CACsB,CAAA,CAAU,eAE1BC,KAAc,MAClBhB,EAAS,SAASiB,GAAUC,CAAM,GAE9BC,KAAmB,GAAuB,MAA2B;EACzE,IAAMC,IAAWJ,EAAWC,CAAQ;EACpC,AAAKG,MACLC,EAAUD,EAAS,MAAMA,EAAS,MAAME,GAAgBF,EAAS,KAAK,GAEtEG,EAAO;CACT,GAEMC,KAAiB,GAAuB,MAAyB;EACrE,IAAMJ,IAAWJ,EAAWC,CAAQ;EACpC,AAAKG,MACLC,EACED,EAAS,MACTA,EAAS,MACTA,EAAS,WAAWK,GACpBL,EAAS,KACX,GACAM,EAAO;CACT,GAQM,EACJ,kBACA,gBACA,iBACA,qBACA,4BAXeC,EAAoB;EACnC,OAAOvB;EACP;EACA;EACA;CACF,CAOI;CAgBJ,OAAO;EACL,aAAaQ,EAAQ;EACrB,aAAagB;EACb;EACA;EACA;EACA,kBAAkBhB,EAAQ;EAC1B;EACA,kBAAkB,OAEhBV,EAAgB,GACTc,EAAWC,CAAQ;EAE5B;EACA;EACA;EACA,mBA9BwB;GACxB,IAAMY,IAAUlC,EAAa;GAE7B,OADKkC,IACEjB,EAAQ,YAAY,MAAM,eAC7BiB,EAAQ,cACRA,EAAQ,eAHS;EAIvB;EAyBE,aAvBkB;GAClB,IAAMA,IAAUlC,EAAa;GAE7B,OADKkC,IACE,OAAO,iBAAiBA,CAAO,CAAC,CAAC,cAAc,QADjC;EAEvB;EAoBE,iBAAiB9B,EAAY,EAAI;EACjC,eAAeA,EAAY,EAAK;EAChC,cAAc2B;EACd;EACA;EACA;EACA;EACA,cAAcR;CAChB;AACF"}

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

@@ -2,7 +2,7 @@ import { createContext as e, useContext as t } from "solid-js";
 //#region src/components/scroll-area/ScrollArea/ScrollArea.context.ts
 var n = e(), r = () => {
 	let e = t(n);
-	if (!e) throw Error("useScrollAreaContext must be used within a ScrollAreaProvider");
+	if (!e) throw Error("useScrollAreaContext 必须用在 <ScrollArea> 内部");
 	return e;
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.context.js","names":["ScrollAreaContext","createContext","useScrollAreaContext","context","useContext"],"sources":["../../../../src/components/scroll-area/ScrollArea/ScrollArea.context.ts"],"sourcesContent":["import {\n  type Accessor,\n  createContext,\n  type Setter,\n  useContext,\n} from \"solid-js\";\nimport type { ScrollMetrics } from \"./ScrollArea.types\";\n\ninterface ScrollAreaContextValue {\n  hovering: Accessor<boolean>;\n  viewportRef: () => HTMLDivElement | undefined;\n  dragging: Accessor<\"vertical\" | \"horizontal\" | null>;\n  setDragging: Setter<\"vertical\" | \"horizontal\" | null>;\n  vertical: Accessor<ScrollMetrics>;\n  horizontal: Accessor<ScrollMetrics>;\n}\n\nexport const ScrollAreaContext = createContext<ScrollAreaContextValue>();\n\nexport const useScrollAreaContext = () => {\n  const context = useContext(ScrollAreaContext);\n  if (!context) {\n    throw new Error(\n      \"useScrollAreaContext must be used within a ScrollAreaProvider\",\n    );\n  }\n  return context;\n};\n"],"mappings":";;AAiBA,IAAaA,IAAoBC,EAAsC,GAE1DC,UAA6B;CACxC,IAAMC,IAAUC,EAAWJ,CAAiB;CAC5C,IAAI,CAACG,GACH,MAAU,MACR,+DACF;CAEF,OAAOA;AACT"}
+{"version":3,"file":"ScrollArea.context.js","names":["ScrollAreaContext","createContext","useScrollAreaContext","context","useContext"],"sources":["../../../../src/components/scroll-area/ScrollArea/ScrollArea.context.ts"],"sourcesContent":["import {\n  type Accessor,\n  createContext,\n  type Setter,\n  useContext,\n} from \"solid-js\";\nimport type { ScrollMetrics } from \"./ScrollArea.types\";\n\ninterface ScrollAreaContextValue {\n  hovering: Accessor<boolean>;\n  viewportRef: () => HTMLDivElement | undefined;\n  dragging: Accessor<\"vertical\" | \"horizontal\" | null>;\n  setDragging: Setter<\"vertical\" | \"horizontal\" | null>;\n  vertical: Accessor<ScrollMetrics>;\n  horizontal: Accessor<ScrollMetrics>;\n}\n\nexport const ScrollAreaContext = createContext<ScrollAreaContextValue>();\n\nexport const useScrollAreaContext = () => {\n  const context = useContext(ScrollAreaContext);\n  if (!context) {\n    throw new Error(\"useScrollAreaContext 必须用在 <ScrollArea> 内部\");\n  }\n  return context;\n};\n"],"mappings":";;AAiBA,IAAaA,IAAoBC,EAAsC,GAE1DC,UAA6B;CACxC,IAAMC,IAAUC,EAAWJ,CAAiB;CAC5C,IAAI,CAACG,GACH,MAAU,MAAM,2CAA2C;CAE7D,OAAOA;AACT"}

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

@@ -1,2 +1,11 @@
 import { ScrollAreaProps } from './ScrollArea.types';
+/**
+ * 自定义滚动容器。
+ *
+ * 职责边界（SRP）：
+ * - 指标采集（scroll / resize）→ `useScrollAreaMetrics.ts`
+ * - 尺寸换算 → `ScrollArea.utils.ts`
+ * - 滚动条交互 → `ScrollBar/`
+ * - 本文件只负责：组合 Provider、渲染视口 DOM 与样式
+ */
 export declare const ScrollArea: (props: ScrollAreaProps) => import('solid-js').JSX.Element;

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

@@ -1,67 +1,56 @@
 import { clsx as e } from "../../../utils/clsx.js";
 import { ScrollBar as t } from "../ScrollBar/ScrollBar.js";
 import { ScrollAreaContext as n } from "./ScrollArea.context.js";
-import { computeMetrics as r } from "./ScrollArea.utils.js";
+import { useScrollAreaMetrics as r } from "./useScrollAreaMetrics.js";
 import { className as i, createComponent as a, effect as o, insert as s, mergeProps as c, setAttribute as l, spread as u, template as d, use as f } from "solid-js/web";
-import { createSignal as p, onCleanup as m, splitProps as h } from "solid-js";
+import { createSignal as p, splitProps as m } from "solid-js";
 //#region src/components/scroll-area/ScrollArea/ScrollArea.tsx
-var g = /*#__PURE__*/ d("<div data-slot=scroll-area-viewport role=region>"), _ = /*#__PURE__*/ d("<div data-slot=scroll-area>"), v = (d) => {
-	let v, [y, b] = h(d, [
+var h = /*#__PURE__*/ d("<div data-slot=scroll-area-viewport role=region>"), g = /*#__PURE__*/ d("<div data-slot=scroll-area>"), _ = (d) => {
+	let [_, v] = m(d, [
 		"orientation",
 		"class",
 		"classList",
 		"children",
 		"aria-label"
-	]), [x, S] = p(!1), [C, w] = p(null), [T, E] = p({
-		thumbRatio: 1,
-		thumbOffset: 0,
-		scrollable: !1
-	}), [D, O] = p({
-		thumbRatio: 1,
-		thumbOffset: 0,
-		scrollable: !1
-	});
-	function k(e) {
-		E(r(e.clientHeight, e.scrollTop, e.scrollHeight)), O(r(e.clientWidth, e.scrollLeft, e.scrollWidth));
-	}
-	function A(e) {
-		v = e, k(e);
-		let t = () => k(e), n = new ResizeObserver(t);
-		n.observe(e), e.firstElementChild && n.observe(e.firstElementChild), e.addEventListener("scroll", t, { passive: !0 }), m(() => {
-			n.disconnect(), e.removeEventListener("scroll", t);
-		});
-	}
+	]), [y, b] = p(!1), [x, S] = p(null), C = r(), w = () => _.orientation === "vertical" ? "overflow-y-scroll overflow-x-hidden" : _.orientation === "horizontal" ? "overflow-x-scroll overflow-y-hidden" : "overflow-scroll";
 	return (() => {
-		var r = _();
-		return r.addEventListener("mouseleave", () => S(!1)), r.addEventListener("mouseenter", () => S(!0)), u(r, c({ get class() {
-			return e("relative", y.class);
-		} }, b), !1, !0), s(r, a(n.Provider, {
-			value: {
-				hovering: x,
-				viewportRef: () => v,
-				dragging: C,
-				setDragging: w,
-				vertical: T,
-				horizontal: D
+		var r = g();
+		return r.addEventListener("mouseleave", () => b(!1)), r.addEventListener("mouseenter", () => b(!0)), u(r, c({
+			get class() {
+				return e("relative", _.class, _.classList);
+			},
+			get classList() {
+				return _.classList;
+			}
+		}, v), !1, !0), s(r, a(n.Provider, {
+			get value() {
+				return {
+					hovering: y,
+					viewportRef: C.viewportRef,
+					dragging: x,
+					setDragging: S,
+					vertical: C.vertical,
+					horizontal: C.horizontal
+				};
 			},
 			get children() {
 				return [(() => {
-					var t = g(), n = A;
-					return typeof n == "function" ? f(n, t) : A = t, s(t, () => y.children), o((n) => {
-						var r = y["aria-label"] ?? "Scrollable content", a = e("size-full rounded-[inherit] transition-[color,box-shadow] outline-none", "scrollbar-none [&::-webkit-scrollbar]:hidden", "focus-visible:ring-2 focus-visible:ring-offset-1", "focus-visible:ring-ring/50", y.orientation === "vertical" ? "overflow-y-scroll overflow-x-hidden" : y.orientation === "horizontal" ? "overflow-x-scroll overflow-y-hidden" : "overflow-scroll");
+					var t = h(), n = C.setup;
+					return typeof n == "function" ? f(n, t) : C.setup = t, s(t, () => _.children), o((n) => {
+						var r = _["aria-label"] ?? "Scrollable content", a = e("size-full rounded-[inherit] transition-[color,box-shadow] outline-none", "scrollbar-none [&::-webkit-scrollbar]:hidden", "focus-visible:ring-2 focus-visible:ring-offset-1", "focus-visible:ring-ring/50", w());
 						return r !== n.e && l(t, "aria-label", n.e = r), a !== n.t && i(t, n.t = a), n;
 					}, {
 						e: void 0,
 						t: void 0
 					}), t;
 				})(), a(t, { get orientation() {
-					return y.orientation;
+					return _.orientation;
 				} })];
 			}
 		})), r;
 	})();
 };
 //#endregion
-export { v as ScrollArea };
+export { _ as ScrollArea };
 
 //# sourceMappingURL=ScrollArea.js.map

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"}