@neut/ui 0.0.16 → 0.0.17

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

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

package/dist/hooks/useScrollEdges.d.ts

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

package/dist/hooks/useScrollEdges.js

@@ -1,34 +1,36 @@
 import { createEffect as e, createSignal as t, onCleanup as n } from "solid-js";
 //#region src/hooks/useScrollEdges.ts
-function r(r) {
-	let [i, a] = t(!1), [o, s] = t(!1), c = () => {
-		let e = r();
+var r = 4, i = 1;
+function a(a) {
+	let [o, s] = t(!1), [c, l] = t(!1), u = () => {
+		let e = a();
 		if (!e) {
-			a(!1), s(!1);
+			s(!1), l(!1);
 			return;
 		}
-		a(e.scrollTop > 1), s(e.scrollTop + e.clientHeight < e.scrollHeight - 1);
+		let t = e.scrollTop, n = e.scrollHeight - e.clientHeight - t;
+		s((e) => e ? t > i : t > r), l((e) => e ? n > i : n > r);
 	};
 	return e(() => {
-		let e = r();
+		let e = a();
 		if (!e) return;
-		c();
-		let t = new ResizeObserver(c);
+		u();
+		let t = new ResizeObserver(u);
 		t.observe(e), e.firstElementChild && t.observe(e.firstElementChild);
-		let i = new MutationObserver(c);
-		i.observe(e, {
+		let r = new MutationObserver(u);
+		r.observe(e, {
 			childList: !0,
 			subtree: !0
-		}), e.addEventListener("scroll", c, { passive: !0 }), n(() => {
-			t.disconnect(), i.disconnect(), e.removeEventListener("scroll", c);
+		}), e.addEventListener("scroll", u, { passive: !0 }), n(() => {
+			t.disconnect(), r.disconnect(), e.removeEventListener("scroll", u);
 		});
 	}), {
-		canScrollUp: i,
-		canScrollDown: o,
-		refresh: c
+		canScrollUp: o,
+		canScrollDown: c,
+		refresh: u
 	};
 }
 //#endregion
-export { r as useScrollEdges };
+export { a as useScrollEdges };
 
 //# sourceMappingURL=useScrollEdges.js.map

package/dist/hooks/useScrollEdges.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollEdges.js","names":["useScrollEdges","canScrollUp","setCanScrollUp","createSignal","canScrollDown","setCanScrollDown","refresh","el","target","createEffect","resizeObserver","mutationObserver","onCleanup"],"sources":["../../src/hooks/useScrollEdges.ts"],"sourcesContent":["import { createEffect, createSignal, onCleanup, type Accessor } from \"solid-js\";\n\nexport interface ScrollEdges {\n  /** 上方是否还有未显示的内容 */\n  canScrollUp: Accessor<boolean>;\n  /** 下方是否还有未显示的内容 */\n  canScrollDown: Accessor<boolean>;\n  /** 手动刷新一次边缘状态(如打开、内容变化后) */\n  refresh: () => void;\n}\n\n/**\n * 跟踪某个滚动容器上方/下方是否还有未显示的内容，用于驱动滚动提示箭头。\n *\n * 监听 scroll(passive) + ResizeObserver(容器与首个子元素尺寸) +\n * MutationObserver(childList/subtree)，因此面板高度变化、选项增删后显隐都能及时更新。\n */\nexport function useScrollEdges(\n  target: Accessor<HTMLElement | undefined>,\n): ScrollEdges {\n  const [canScrollUp, setCanScrollUp] = createSignal(false);\n  const [canScrollDown, setCanScrollDown] = createSignal(false);\n\n  const refresh = () => {\n    const el = target();\n    if (!el) {\n      setCanScrollUp(false);\n      setCanScrollDown(false);\n      return;\n    }\n    setCanScrollUp(el.scrollTop > 1);\n    setCanScrollDown(el.scrollTop + el.clientHeight < el.scrollHeight - 1);\n  };\n\n  createEffect(() => {\n    const el = target();\n    if (!el) return;\n\n    refresh();\n\n    const resizeObserver = new ResizeObserver(refresh);\n    resizeObserver.observe(el);\n    if (el.firstElementChild) resizeObserver.observe(el.firstElementChild);\n\n    const mutationObserver = new MutationObserver(refresh);\n    mutationObserver.observe(el, { childList: true, subtree: true });\n\n    el.addEventListener(\"scroll\", refresh, { passive: true });\n    onCleanup(() => {\n      resizeObserver.disconnect();\n      mutationObserver.disconnect();\n      el.removeEventListener(\"scroll\", refresh);\n    });\n  });\n\n  return { canScrollUp, canScrollDown, refresh };\n}\n"],"mappings":";;AAiBA,SAAgBA,EACd,GACa;CACb,IAAM,CAACC,GAAaC,KAAkBC,EAAa,EAAK,GAClD,CAACC,GAAeC,KAAoBF,EAAa,EAAK,GAEtDG,UAAgB;EACpB,IAAMC,IAAKC,EAAO;EAClB,IAAI,CAACD,GAAI;GAEP,AADAL,EAAe,EAAK,GACpBG,EAAiB,EAAK;GACtB;EACF;EAEA,AADAH,EAAeK,EAAG,YAAY,CAAC,GAC/BF,EAAiBE,EAAG,YAAYA,EAAG,eAAeA,EAAG,eAAe,CAAC;CACvE;CAuBA,OArBAE,QAAmB;EACjB,IAAMF,IAAKC,EAAO;EAClB,IAAI,CAACD,GAAI;EAET,EAAQ;EAER,IAAMG,IAAiB,IAAI,eAAeJ,CAAO;EAEjD,AADAI,EAAe,QAAQH,CAAE,GACrBA,EAAG,qBAAmBG,EAAe,QAAQH,EAAG,iBAAiB;EAErE,IAAMI,IAAmB,IAAI,iBAAiBL,CAAO;EAIrD,AAHAK,EAAiB,QAAQJ,GAAI;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC,GAE/DA,EAAG,iBAAiB,UAAUD,GAAS,EAAE,SAAS,GAAK,CAAC,GACxDM,QAAgB;GAGd,AAFAF,EAAe,WAAW,GAC1BC,EAAiB,WAAW,GAC5BJ,EAAG,oBAAoB,UAAUD,CAAO;EAC1C,CAAC;CACH,CAAC,GAEM;EAAE;EAAa;EAAe;CAAQ;AAC/C"}
+{"version":3,"file":"useScrollEdges.js","names":["ENTER_THRESHOLD","EXIT_THRESHOLD","useScrollEdges","canScrollUp","setCanScrollUp","createSignal","canScrollDown","setCanScrollDown","refresh","el","target","top","remaining","prev","createEffect","resizeObserver","mutationObserver","onCleanup"],"sources":["../../src/hooks/useScrollEdges.ts"],"sourcesContent":["import { createEffect, createSignal, onCleanup, type Accessor } from \"solid-js\";\n\nexport interface ScrollEdges {\n  /** 上方是否还有未显示的内容 */\n  canScrollUp: Accessor<boolean>;\n  /** 下方是否还有未显示的内容 */\n  canScrollDown: Accessor<boolean>;\n  /** 手动刷新一次边缘状态(如打开、内容变化后) */\n  refresh: () => void;\n}\n\n/** 进入/退出阈值分开(迟滞),避免在边界 1px 处反复翻转导致箭头闪动 */\nconst ENTER_THRESHOLD = 4;\nconst EXIT_THRESHOLD = 1;\n\n/**\n * 跟踪某个滚动容器上方/下方是否还有未显示的内容，用于驱动滚动提示箭头。\n *\n * 监听 scroll(passive) + ResizeObserver(容器与首个子元素尺寸) +\n * MutationObserver(childList/subtree)，因此面板高度变化、选项增删后显隐都能及时更新。\n *\n * 显隐用**迟滞阈值**：从\"无内容\"变为\"有内容\"要超过 4px，反向要回落到 1px 以内，\n * 避免在滚动到边界时 canScroll* 每帧抖动(箭头反复出现/消失)。\n */\nexport function useScrollEdges(\n  target: Accessor<HTMLElement | undefined>,\n): ScrollEdges {\n  const [canScrollUp, setCanScrollUp] = createSignal(false);\n  const [canScrollDown, setCanScrollDown] = createSignal(false);\n\n  const refresh = () => {\n    const el = target();\n    if (!el) {\n      setCanScrollUp(false);\n      setCanScrollDown(false);\n      return;\n    }\n    const top = el.scrollTop;\n    const remaining = el.scrollHeight - el.clientHeight - top;\n    setCanScrollUp((prev) =>\n      prev ? top > EXIT_THRESHOLD : top > ENTER_THRESHOLD,\n    );\n    setCanScrollDown((prev) =>\n      prev ? remaining > EXIT_THRESHOLD : remaining > ENTER_THRESHOLD,\n    );\n  };\n\n  createEffect(() => {\n    const el = target();\n    if (!el) return;\n\n    refresh();\n\n    const resizeObserver = new ResizeObserver(refresh);\n    resizeObserver.observe(el);\n    if (el.firstElementChild) resizeObserver.observe(el.firstElementChild);\n\n    const mutationObserver = new MutationObserver(refresh);\n    mutationObserver.observe(el, { childList: true, subtree: true });\n\n    el.addEventListener(\"scroll\", refresh, { passive: true });\n    onCleanup(() => {\n      resizeObserver.disconnect();\n      mutationObserver.disconnect();\n      el.removeEventListener(\"scroll\", refresh);\n    });\n  });\n\n  return { canScrollUp, canScrollDown, refresh };\n}\n"],"mappings":";;AAYA,IAAMA,IAAkB,GAClBC,IAAiB;AAWvB,SAAgBC,EACd,GACa;CACb,IAAM,CAACC,GAAaC,KAAkBC,EAAa,EAAK,GAClD,CAACC,GAAeC,KAAoBF,EAAa,EAAK,GAEtDG,UAAgB;EACpB,IAAMC,IAAKC,EAAO;EAClB,IAAI,CAACD,GAAI;GAEP,AADAL,EAAe,EAAK,GACpBG,EAAiB,EAAK;GACtB;EACF;EACA,IAAMI,IAAMF,EAAG,WACTG,IAAYH,EAAG,eAAeA,EAAG,eAAeE;EAItD,AAHAP,GAAgB,MACdS,IAAOF,IAAMV,IAAiBU,IAAMX,CACtC,GACAO,GAAkB,MAChBM,IAAOD,IAAYX,IAAiBW,IAAYZ,CAClD;CACF;CAuBA,OArBAc,QAAmB;EACjB,IAAML,IAAKC,EAAO;EAClB,IAAI,CAACD,GAAI;EAET,EAAQ;EAER,IAAMM,IAAiB,IAAI,eAAeP,CAAO;EAEjD,AADAO,EAAe,QAAQN,CAAE,GACrBA,EAAG,qBAAmBM,EAAe,QAAQN,EAAG,iBAAiB;EAErE,IAAMO,IAAmB,IAAI,iBAAiBR,CAAO;EAIrD,AAHAQ,EAAiB,QAAQP,GAAI;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC,GAE/DA,EAAG,iBAAiB,UAAUD,GAAS,EAAE,SAAS,GAAK,CAAC,GACxDS,QAAgB;GAGd,AAFAF,EAAe,WAAW,GAC1BC,EAAiB,WAAW,GAC5BP,EAAG,oBAAoB,UAAUD,CAAO;EAC1C,CAAC;CACH,CAAC,GAEM;EAAE;EAAa;EAAe;CAAQ;AAC/C"}

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/badge';
 export * from './components/breadcrumb';
 export * from './components/button';
 export * from './components/button-group';
+export * from './components/bubble';
 export * from './components/card';
 export * from './components/calendar';
 export * from './components/carousel';
@@ -18,24 +19,32 @@ export * from './components/context-menu';
 export * from './components/date-picker';
 export * from './components/data-table';
 export * from './components/dialog';
+export * from './components/drawer';
 export * from './components/dropdown-menu';
 export * from './components/empty';
 export * from './components/field';
+export * from './components/hover-card';
 export * from './components/image';
 export * from './components/input';
 export * from './components/input-group';
 export * from './components/item';
 export * from './components/kbd';
 export * from './components/label';
+export * from './components/marker';
+export * from './components/message';
+export * from './components/message-scroller';
 export * from './components/pagination';
 export * from './components/number-input';
 export * from './components/popover';
 export * from './components/progress';
+export * from './components/questionnaire';
 export * from './components/radio-group';
+export * from './components/resizable';
 export * from './components/scroll-area';
 export * from './components/scroll-arrows';
 export * from './components/select';
 export * from './components/separator';
+export * from './components/sheet';
 export * from './components/sidebar';
 export * from './components/skeleton';
 export * from './components/slider';