@zerodep-dev/vue-tsx-pro-ui 0.3.0 → 0.3.2

package/dist/layout/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","names":["_vtp_readonlyProp","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","_vtp_childrenProp","_vtp_restProps"],"sources":["../../src/layout/ScrollArea.tsx"],"sourcesContent":["/**\n * 滚动区域：浮层滚动条。滚动仍是浏览器原生的（触控板惯性、键盘、页内搜索、无障碍都不变），\n * 只把原生滚动条隐藏，换成半透明、绝对定位浮在内容上方的滚动条：出现、消失都不占位，不改变布局尺寸。\n * 参考 Radix ScrollArea。\n *\n *   <ScrollArea sx={styles.panel}>…</ScrollArea>            高度（或最大高度）由使用方给\n *   <ScrollArea axis=\"both\" type=\"always\">…</ScrollArea>\n *\n * 滚动条对读屏隐藏（滚动由视口本身承担）；内容超出时视口可聚焦，键盘照常滚动。\n * 滚动条本身是 OverlayScrollbar：整页的浮层滚动条（PageScrollbar）也用它。\n *\n * 要在外面拿到真正滚动的元素（虚拟滚动、自己控制滚动）时用 propsViewport 的 ref：\n *   <ScrollArea propsViewport={{ ref: (element) => (scroller = toElement(element)) }}>…</ScrollArea>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { startMove } from '../utils/dom/move';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { isRtl } from '../utils/dom/direction';\nimport { batchLayout } from '../utils/dom/layout-batch';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { t } from '../config/theme/tokens';\n\n/** 哪个方向可以滚动 */\nexport interface ScrollAreaAxes {\n  /** 纵向（默认），横向超出的部分裁掉 */\n  y: unknown;\n  /** 横向，纵向超出的部分裁掉 */\n  x: unknown;\n  /** 两个方向 */\n  both: unknown;\n}\n\n/** 滚动条什么时候显示 */\nexport interface ScrollbarTypes {\n  /** 指针在区域上方或正在滚动时显示（默认） */\n  hover: unknown;\n  /** 只在滚动时显示，停下后淡出 */\n  scroll: unknown;\n  /** 内容超出时一直显示 */\n  always: unknown;\n}\n\n/** 未声明的属性落到外层（决定尺寸的那一层）；视口的属性（aria-label 等）用 propsViewport */\nexport interface ScrollAreaProps extends PartProps<'div'> {\n  /** 可以滚动的方向，默认 y */\n  axis?: keyof ScrollAreaAxes;\n  /** 滚动条什么时候显示，默认 hover */\n  type?: keyof ScrollbarTypes;\n  /** 停止滚动、指针离开后多久淡出（毫秒），默认 600 */\n  hideDelay?: number;\n  /**\n   * 内容超出时视口可以用 Tab 聚焦（键盘滚动），默认 true。视口本身另有角色并自己管焦点（列表框、菜单），\n   * 或焦点在别处、由那里控制滚动（命令面板的输入框）时关掉，tabindex 由使用方经 propsViewport 给\n   */\n  focusable?: boolean;\n  /** 视口（真正滚动的元素）的部件属性；ref 拿到它可以自己控制滚动 */\n  propsViewport?: PartProps<'div'>;\n  /** 内容层（视口里包着 children 的 div）的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 滚动条轨道的部件属性，两个方向都用它（data-axis 区分 x、y） */\n  propsScrollbar?: PartProps<'div', 'aria-hidden'>;\n  /** 滑块的部件属性；大小与位置由组件写在行内样式上 */\n  propsThumb?: PartProps<'div'>;\n  children?: VNodeChild;\n}\n\n/** 滑块的最小长度（px）：内容再长也能抓得住 */\nconst MIN_THUMB = 20;\n\n/** ScrollArea 的样式：root、viewport、y、x、both、wideContent */\nexport const scrollAreaStyles = css.create({\n  // flex 纵向：使用方只给 max-height 时视口也能被限制住（视口 min-height: 0 可以收缩）\n  root: { position: 'relative', display: 'flex', flexDirection: 'column', overflow: 'hidden' },\n  viewport: {\n    flexGrow: 1,\n    minHeight: 0,\n    // 隐藏原生滚动条：Firefox、新版 Chromium 与 Safari 用标准属性，旧版 WebKit 用伪元素\n    scrollbarWidth: 'none',\n    '::-webkit-scrollbar': { display: 'none' },\n    // 焦点环画在里面：外层 overflow: hidden 会裁掉画在外面的\n    outlineOffset: `calc(-1 * ${t.borderWidths.sm})`,\n  },\n  y: { overflowX: 'hidden', overflowY: 'auto' },\n  x: { overflowX: 'auto', overflowY: 'hidden' },\n  both: { overflow: 'auto' },\n  // 横向滚动时内容按自己的宽度撑开，宽度变化也能被 ResizeObserver 观察到\n  wideContent: { display: 'table', minWidth: '_full' },\n});\n\n/** OverlayScrollbar 的样式：track、hidden、y、x、yCorner、xCorner、thumb 等 */\nexport const scrollAreaBarStyles = css.create({\n  track: {\n    position: 'absolute',\n    zIndex: 1,\n    boxSizing: 'border-box',\n    touchAction: 'none',\n    userSelect: 'none',\n    transition: `opacity ${t.durations.md} ${t.easings.standard}`,\n  },\n  hidden: { opacity: 0, pointerEvents: 'none' },\n  // 整页的滚动条：隐藏时仍接收指针，指针移到窗口边缘就显示出来\n  hiddenReveal: { opacity: 0 },\n  // 整页的滚动条固定在视口一侧，盖在粘性顶栏之上\n  fixed: { position: 'fixed', zIndex: 20 },\n  // 粗细：0.5em 的滑块加两侧各 2px 的留白\n  y: {\n    insetBlock: 0,\n    insetInlineEnd: 0,\n    width: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})`,\n  },\n  x: {\n    insetInline: 0,\n    bottom: 0,\n    height: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})`,\n  },\n  // 两个方向都有时让出右下角，两条滚动条不重叠\n  yCorner: { bottom: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})` },\n  xCorner: { insetInlineEnd: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})` },\n  thumb: {\n    position: 'absolute',\n    borderRadius: '_full',\n    // 半透明：浮在内容上也不完全遮住下面的文字\n    backgroundColor: {\n      default: `color-mix(in srgb, ${t.colors.textMuted} 50%, transparent)`,\n      ':hover': `color-mix(in srgb, ${t.colors.textMuted} 75%, transparent)`,\n    },\n    transition: `background-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  thumbY: { top: 0, insetInline: '_borderWidths.sm' },\n  thumbX: { insetInlineStart: 0, insetBlock: '_borderWidths.sm' },\n});\n\n/** OverlayScrollbar 的属性 */\nexport interface OverlayScrollbarProps {\n  /** 方向 */\n  axis: 'x' | 'y';\n  /** 真正滚动的元素；整页滚动时是 document.scrollingElement（滚动事件在 window 上） */\n  viewport: HTMLElement | null;\n  /** 内容：它的尺寸变化时重新计算滑块 */\n  content: HTMLElement | null;\n  /** 指针进入它时显示滚动条（type 为 hover 时）；不给时只看指针是否在滚动条上 */\n  hoverTarget?: HTMLElement | null;\n  /** 什么时候显示，默认 hover */\n  type?: keyof ScrollbarTypes;\n  /** 停止滚动、指针离开后多久淡出（毫秒），默认 600 */\n  hideDelay?: number;\n  /** 两个方向都有滚动条：让出右下角 */\n  corner?: boolean;\n  /** 固定在视口一侧（整页的滚动条）：隐藏时仍接收指针，移到窗口边缘就显示 */\n  fixed?: boolean;\n  /** 轨道的部件属性 */\n  propsScrollbar?: PartProps<'div', 'aria-hidden'>;\n  /** 滑块的部件属性 */\n  propsThumb?: PartProps<'div'>;\n  /** 内容是否超出视口（这个方向能不能滚动）变化时调用 */\n  onOverflowChange?: (overflowing: boolean) => void;\n}\n\n/**\n * 一个方向的浮层滚动条：轨道与滑块，滚动、悬停时出现，停下后淡出；拖动滑块、点击轨道翻页、滚轮转交给视口。\n * ScrollArea 与 PageScrollbar 都用它。单独一个组件，滚动、悬停只让它自己重新渲染，不牵动内容\n */\nexport const OverlayScrollbar = _component(\n  ({\n    axis,\n    viewport,\n    content,\n    hoverTarget,\n    type = 'hover',\n    hideDelay = 600,\n    corner = false,\n    fixed = false,\n    propsScrollbar,\n    propsThumb,\n    onOverflowChange,\n  }: OverlayScrollbarProps) => {\n    let track = _state.raw<HTMLElement | null>(null);\n    let thumb = _state.raw<HTMLElement | null>(null);\n    let overflowing = _state(false);\n    let active = _state(false);\n    let hovering = false;\n    let dragging = false;\n    let hideTimer: ReturnType<typeof setTimeout> | undefined;\n\n    /** 视口的尺寸与滚动位置；横向时滚动位置取绝对值（从右到左排版时 scrollLeft 为负） */\n    const measure = (element: HTMLElement) =>\n      axis === 'y'\n        ? { view: element.clientHeight, size: element.scrollHeight, position: element.scrollTop }\n        : {\n            view: element.clientWidth,\n            size: element.scrollWidth,\n            position: Math.abs(element.scrollLeft),\n          };\n    /** 从右到左排版时横向的方向要反过来 */\n    const sign = () => (axis === 'x' && viewport && isRtl(viewport) ? -1 : 1);\n    const thumbSize = (view: number, size: number, trackSize: number) =>\n      Math.max(MIN_THUMB, (view / size) * trackSize);\n\n    // 滑块的大小与位置随滚动频繁变化，直接写到元素上，不经过渲染。read 量、返回的函数写\n    function read() {\n      if (!viewport || !track || !thumb) return;\n      // 看不见的（收起的 Collapse 是 hidden=\"until-found\"，即 content-visibility: hidden）不量：\n      // 在这种子树里读尺寸，浏览器每次都要为它单独排一遍版。显示出来时 ResizeObserver 会再通知\n      if (viewport.checkVisibility?.() === false) return;\n      const element = thumb;\n      const { view, size, position } = measure(viewport);\n      const trackSize = axis === 'y' ? track.clientHeight : track.clientWidth;\n      const length = thumbSize(view, size, trackSize);\n      const offset = size > view ? (position / (size - view)) * (trackSize - length) : 0;\n      const direction = sign();\n      return () => {\n        const next = size > view + 1;\n        if (next !== overflowing) {\n          overflowing = next;\n          onOverflowChange?.(next);\n        }\n        if (axis === 'y') {\n          element.style.height = `${length}px`;\n          element.style.transform = `translateY(${offset}px)`;\n        } else {\n          element.style.width = `${length}px`;\n          element.style.transform = `translateX(${direction * offset}px)`;\n        }\n      };\n    }\n    // 滚动时立即对齐；挂载、尺寸变化时合并到这一轮的先读后写里（一页十几个滚动区域只排一次版）\n    const sync = () => read()?.();\n    const syncLater = () => batchLayout(read);\n\n    // 整页的滚动条（fixed）不论 type，指针移到它上面都显示\n    const revealsOnHover = () => type === 'hover' || fixed;\n\n    function show() {\n      active = true;\n      scheduleHide();\n    }\n    function scheduleHide() {\n      clearTimeout(hideTimer);\n      hideTimer = setTimeout(() => {\n        if (!dragging && !(revealsOnHover() && hovering)) active = false;\n      }, hideDelay);\n    }\n\n    _effect(() => {\n      if (!viewport || !content) return;\n      const element = viewport;\n      // 整页滚动时滚动事件发在 window 上；窗口高度变了（不改变内容尺寸）也要重算\n      const scroller = element === document.scrollingElement ? window : element;\n      const hover = hoverTarget ?? track;\n      syncLater();\n      const onScroll = () => {\n        sync();\n        show();\n      };\n      const onEnter = () => {\n        hovering = true;\n        if (!revealsOnHover()) return;\n        // 绝对定位的后代（图表的提示框）撑出、收回溢出时内容尺寸不变，ResizeObserver 察觉不到，显示前重新量\n        sync();\n        show();\n      };\n      const onLeave = () => {\n        hovering = false;\n        scheduleHide();\n      };\n      scroller.addEventListener('scroll', onScroll, { passive: true });\n      if (scroller === window) window.addEventListener('resize', sync);\n      hover?.addEventListener('pointerenter', onEnter);\n      hover?.addEventListener('pointerleave', onLeave);\n      return () => {\n        scroller.removeEventListener('scroll', onScroll);\n        window.removeEventListener('resize', sync);\n        hover?.removeEventListener('pointerenter', onEnter);\n        hover?.removeEventListener('pointerleave', onLeave);\n        clearTimeout(hideTimer);\n      };\n    });\n    useResizeObserver(() => [viewport, content], syncLater);\n\n    /** 拖动滑块：位移按“可滚动距离 / 滑块可移动距离”换算成滚动距离 */\n    function dragThumb(event: PointerEvent) {\n      if (!viewport || !track || !thumb) return;\n      event.stopPropagation();\n      const element = viewport;\n      const { view, size, position } = measure(element);\n      const trackSize = axis === 'y' ? track.clientHeight : track.clientWidth;\n      const ratio = (size - view) / (trackSize - thumbSize(view, size, trackSize));\n      const direction = sign();\n      dragging = true;\n      startMove(event, {\n        onMove: ({ deltaX, deltaY }) => {\n          const target = position + (axis === 'y' ? deltaY : direction * deltaX) * ratio;\n          if (axis === 'y') element.scrollTop = target;\n          else element.scrollLeft = direction * target;\n        },\n        onEnd: () => {\n          dragging = false;\n          scheduleHide();\n        },\n      });\n    }\n\n    /** 点击轨道的空白处：朝那一侧翻一页 */\n    function pageTo(event: PointerEvent) {\n      if (!viewport || !thumb || event.button !== 0) return;\n      const rect = thumb.getBoundingClientRect();\n      const { view } = measure(viewport);\n      // 点在滑块之前（上方；横向时为起始一侧）就往回翻\n      const rtl = sign() === -1;\n      const before =\n        axis === 'y'\n          ? event.clientY < rect.top\n          : rtl\n            ? event.clientX > rect.right\n            : event.clientX < rect.left;\n      const page = (before ? -1 : 1) * view * 0.9;\n      viewport.scrollBy(axis === 'y' ? { top: page } : { left: sign() * page });\n    }\n\n    /** 滚动条盖在视口上面，滚轮落在它上面时转交给视口 */\n    function forwardWheel(event: WheelEvent) {\n      if (!viewport) return;\n      event.preventDefault();\n      viewport.scrollBy({ left: event.deltaX, top: event.deltaY });\n    }\n\n    return () => {\n      const visible = overflowing && (type === 'always' || active);\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                scrollAreaBarStyles.track,\n                scrollAreaBarStyles[axis],\n                fixed && scrollAreaBarStyles.fixed,\n                corner &&\n                  (axis === 'y' ? scrollAreaBarStyles.yCorner : scrollAreaBarStyles.xCorner),\n              ],\n            },\n            propsScrollbar,\n            {\n              sx:\n                !visible && (fixed ? scrollAreaBarStyles.hiddenReveal : scrollAreaBarStyles.hidden),\n              ref: _toRef(track),\n              'aria-hidden': true,\n              onPointerdown: pageTo,\n              onWheel: forwardWheel,\n            },\n          )}\n          data-axis={axis}\n          data-state={visible ? 'visible' : 'hidden'}\n        >\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  scrollAreaBarStyles.thumb,\n                  axis === 'y' ? scrollAreaBarStyles.thumbY : scrollAreaBarStyles.thumbX,\n                ],\n              },\n              propsThumb,\n              { ref: _toRef(thumb), onPointerdown: dragThumb },\n            )}\n          />\n        </div>\n      );\n    };\n  },\n  { name: 'OverlayScrollbar' },\n);\n\n/** 滚动区域：原生滚动 + 半透明的浮层滚动条，出现与消失都不占位 */\nexport const ScrollArea = _component(\n  ({\n    axis = 'y',\n    type = 'hover',\n    hideDelay = 600,\n    focusable = true,\n    propsViewport,\n    propsContent,\n    propsScrollbar,\n    propsThumb,\n    children,\n    ...rest\n  }: ScrollAreaProps) => {\n    let root = _state.raw<HTMLElement | null>(null);\n    let viewport = _state.raw<HTMLElement | null>(null);\n    let content = _state.raw<HTMLElement | null>(null);\n    // 哪个方向的内容超出了视口：能滚动时视口才进 Tab 顺序，没超出的侧栏、代码块不多一个空的 Tab 位\n    let overflowing = _state({ x: false, y: false });\n\n    return () => {\n      const both = axis === 'both';\n      const bar = (barAxis: 'x' | 'y') => (\n        <OverlayScrollbar\n          axis={barAxis}\n          hoverTarget={root}\n          viewport={viewport}\n          content={content}\n          type={type}\n          hideDelay={hideDelay}\n          corner={both}\n          propsScrollbar={propsScrollbar}\n          propsThumb={propsThumb}\n          onOverflowChange={(value) => (overflowing = { ...overflowing, [barAxis]: value })}\n        />\n      );\n      return (\n        <div {...mergeAttrs<'div'>({ sx: scrollAreaStyles.root }, rest, { ref: _toRef(root) })}>\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [focusRingStyles.visible, scrollAreaStyles.viewport, scrollAreaStyles[axis]],\n              },\n              propsViewport,\n              {\n                ref: _toRef(viewport),\n                ...(focusable && (overflowing.x || overflowing.y) && { tabindex: 0 }),\n              },\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>(\n                { sx: axis !== 'y' && scrollAreaStyles.wideContent },\n                propsContent,\n                {\n                  ref: _toRef(content),\n                },\n              )}\n            >\n              {children}\n            </div>\n          </div>\n          {axis !== 'x' && bar('y')}\n          {axis !== 'y' && bar('x')}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ScrollArea.js","names":["_vtp_readonlyProp","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","_vtp_childrenProp","_vtp_restProps"],"sources":["../../src/layout/ScrollArea.tsx"],"sourcesContent":["/**\n * 滚动区域：浮层滚动条。滚动仍是浏览器原生的（触控板惯性、键盘、页内搜索、无障碍都不变），\n * 只把原生滚动条隐藏，换成半透明、绝对定位浮在内容上方的滚动条：出现、消失都不占位，不改变布局尺寸。\n * 参考 Radix ScrollArea。\n *\n *   <ScrollArea sx={styles.panel}>…</ScrollArea>            高度（或最大高度）由使用方给\n *   <ScrollArea axis=\"both\" type=\"always\">…</ScrollArea>\n *\n * 滚动条对读屏隐藏（滚动由视口本身承担）；内容超出时视口可聚焦，键盘照常滚动。\n * 滚动条本身是 OverlayScrollbar：整页的浮层滚动条（PageScrollbar）也用它。\n *\n * 要在外面拿到真正滚动的元素（虚拟滚动、自己控制滚动）时用 propsViewport 的 ref：\n *   <ScrollArea propsViewport={{ ref: (element) => (scroller = toElement(element)) }}>…</ScrollArea>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { startMove } from '../utils/dom/move';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { isRtl } from '../utils/dom/direction';\nimport { batchLayout } from '../utils/dom/layout-batch';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { t } from '../config/theme/tokens';\n\n/** 哪个方向可以滚动 */\nexport interface ScrollAreaAxes {\n  /** 纵向（默认），横向超出的部分裁掉 */\n  y: unknown;\n  /** 横向，纵向超出的部分裁掉 */\n  x: unknown;\n  /** 两个方向 */\n  both: unknown;\n}\n\n/** 滚动条什么时候显示 */\nexport interface ScrollbarTypes {\n  /** 指针在区域上方或正在滚动时显示（默认） */\n  hover: unknown;\n  /** 只在滚动时显示，停下后淡出 */\n  scroll: unknown;\n  /** 内容超出时一直显示 */\n  always: unknown;\n}\n\n/** 未声明的属性落到外层（决定尺寸的那一层）；视口的属性（aria-label 等）用 propsViewport */\nexport interface ScrollAreaProps extends PartProps<'div'> {\n  /** 可以滚动的方向，默认 y */\n  axis?: keyof ScrollAreaAxes;\n  /** 滚动条什么时候显示，默认 hover */\n  type?: keyof ScrollbarTypes;\n  /** 停止滚动、指针离开后多久淡出（毫秒），默认 600 */\n  hideDelay?: number;\n  /**\n   * 内容超出时视口可以用 Tab 聚焦（键盘滚动），默认 true。视口本身另有角色并自己管焦点（列表框、菜单），\n   * 或焦点在别处、由那里控制滚动（命令面板的输入框）时关掉，tabindex 由使用方经 propsViewport 给\n   */\n  focusable?: boolean;\n  /** 视口（真正滚动的元素）的部件属性；ref 拿到它可以自己控制滚动 */\n  propsViewport?: PartProps<'div'>;\n  /** 内容层（视口里包着 children 的 div）的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 滚动条轨道的部件属性，两个方向都用它（data-axis 区分 x、y） */\n  propsScrollbar?: PartProps<'div', 'aria-hidden'>;\n  /** 滑块的部件属性；大小与位置由组件写在行内样式上 */\n  propsThumb?: PartProps<'div'>;\n  children?: VNodeChild;\n}\n\n/** 滑块的最小长度（px）：内容再长也能抓得住 */\nconst MIN_THUMB = 20;\n\n/** ScrollArea 的样式：root、viewport、y、x、both、wideContent */\nexport const scrollAreaStyles = css.create({\n  // flex 纵向：使用方只给 max-height 时视口也能被限制住（视口 min-height: 0 可以收缩）\n  root: { position: 'relative', display: 'flex', flexDirection: 'column', overflow: 'hidden' },\n  viewport: {\n    flexGrow: 1,\n    minHeight: 0,\n    // 隐藏原生滚动条：Firefox、新版 Chromium 与 Safari 用标准属性，旧版 WebKit 用伪元素\n    scrollbarWidth: 'none',\n    '::-webkit-scrollbar': { display: 'none' },\n    // 焦点环画在里面：外层 overflow: hidden 会裁掉画在外面的\n    outlineOffset: `calc(-1 * ${t.borderWidths.sm})`,\n  },\n  y: { overflowX: 'hidden', overflowY: 'auto' },\n  x: { overflowX: 'auto', overflowY: 'hidden' },\n  both: { overflow: 'auto' },\n  // 横向滚动时内容按自己的宽度撑开，宽度变化也能被 ResizeObserver 观察到\n  wideContent: { display: 'table', minWidth: '_full' },\n});\n\n/** OverlayScrollbar 的样式：track、hidden、y、x、yCorner、xCorner、thumb 等 */\nexport const scrollAreaBarStyles = css.create({\n  track: {\n    position: 'absolute',\n    zIndex: 1,\n    boxSizing: 'border-box',\n    touchAction: 'none',\n    userSelect: 'none',\n    transition: `opacity ${t.durations.md} ${t.easings.standard}`,\n  },\n  hidden: { opacity: 0, pointerEvents: 'none' },\n  // 整页的滚动条：隐藏时仍接收指针，指针移到窗口边缘就显示出来\n  hiddenReveal: { opacity: 0 },\n  // 整页的滚动条固定在视口一侧，盖在粘性顶栏之上\n  fixed: { position: 'fixed', zIndex: 20 },\n  // 粗细：0.5em 的滑块加两侧各 2px 的留白\n  y: {\n    insetBlock: 0,\n    insetInlineEnd: 0,\n    width: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})`,\n  },\n  x: {\n    insetInline: 0,\n    bottom: 0,\n    height: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})`,\n  },\n  // 两个方向都有时让出右下角，两条滚动条不重叠\n  yCorner: { bottom: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})` },\n  xCorner: { insetInlineEnd: `calc(${t.space.sm} + 2 * ${t.borderWidths.sm})` },\n  thumb: {\n    position: 'absolute',\n    borderRadius: '_full',\n    // 半透明：浮在内容上也不完全遮住下面的文字\n    backgroundColor: {\n      default: `color-mix(in srgb, ${t.colors.textMuted} 50%, transparent)`,\n      ':hover': `color-mix(in srgb, ${t.colors.textMuted} 75%, transparent)`,\n    },\n    transition: `background-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  thumbY: { top: 0, insetInline: '_borderWidths.sm' },\n  thumbX: { insetInlineStart: 0, insetBlock: '_borderWidths.sm' },\n});\n\n/** OverlayScrollbar 的属性 */\nexport interface OverlayScrollbarProps {\n  /** 方向 */\n  axis: 'x' | 'y';\n  /** 真正滚动的元素；整页滚动时是 document.scrollingElement（滚动事件在 window 上） */\n  viewport: HTMLElement | null;\n  /** 内容：它的尺寸变化时重新计算滑块 */\n  content: HTMLElement | null;\n  /** 指针进入它时显示滚动条（type 为 hover 时）；不给时只看指针是否在滚动条上 */\n  hoverTarget?: HTMLElement | null;\n  /** 什么时候显示，默认 hover */\n  type?: keyof ScrollbarTypes;\n  /** 停止滚动、指针离开后多久淡出（毫秒），默认 600 */\n  hideDelay?: number;\n  /** 两个方向都有滚动条：让出右下角 */\n  corner?: boolean;\n  /** 固定在视口一侧（整页的滚动条）：隐藏时仍接收指针，移到窗口边缘就显示 */\n  fixed?: boolean;\n  /** 轨道的部件属性 */\n  propsScrollbar?: PartProps<'div', 'aria-hidden'>;\n  /** 滑块的部件属性 */\n  propsThumb?: PartProps<'div'>;\n  /** 内容是否超出视口（这个方向能不能滚动）变化时调用 */\n  onOverflowChange?: (overflowing: boolean) => void;\n}\n\n/**\n * 一个方向的浮层滚动条：轨道与滑块，滚动、悬停时出现，停下后淡出；拖动滑块、点击轨道翻页、滚轮转交给视口。\n * ScrollArea 与 PageScrollbar 都用它。单独一个组件，滚动、悬停只让它自己重新渲染，不牵动内容\n */\nexport const OverlayScrollbar = _component(\n  ({\n    axis,\n    viewport,\n    content,\n    hoverTarget,\n    type = 'hover',\n    hideDelay = 600,\n    corner = false,\n    fixed = false,\n    propsScrollbar,\n    propsThumb,\n    onOverflowChange,\n  }: OverlayScrollbarProps) => {\n    let track = _state.raw<HTMLElement | null>(null);\n    let thumb = _state.raw<HTMLElement | null>(null);\n    let overflowing = _state(false);\n    let active = _state(false);\n    let hovering = false;\n    let dragging = false;\n    let hideTimer: ReturnType<typeof setTimeout> | undefined;\n\n    /** 视口的尺寸与滚动位置；横向时滚动位置取绝对值（从右到左排版时 scrollLeft 为负） */\n    const measure = (element: HTMLElement) =>\n      axis === 'y'\n        ? { view: element.clientHeight, size: element.scrollHeight, position: element.scrollTop }\n        : {\n            view: element.clientWidth,\n            size: element.scrollWidth,\n            position: Math.abs(element.scrollLeft),\n          };\n    /** 从右到左排版时横向的方向要反过来 */\n    const sign = () => (axis === 'x' && viewport && isRtl(viewport) ? -1 : 1);\n    const thumbSize = (view: number, size: number, trackSize: number) =>\n      Math.max(MIN_THUMB, (view / size) * trackSize);\n\n    // 滑块的大小与位置随滚动频繁变化，直接写到元素上，不经过渲染。read 量、返回的函数写\n    function read() {\n      if (!viewport || !track || !thumb) return;\n      // 看不见的（收起的 Collapse 是 hidden=\"until-found\"，即 content-visibility: hidden）不量：\n      // 在这种子树里读尺寸，浏览器每次都要为它单独排一遍版。显示出来时 ResizeObserver 会再通知\n      if (viewport.checkVisibility?.() === false) return;\n      const element = thumb;\n      const { view, size, position } = measure(viewport);\n      const trackSize = axis === 'y' ? track.clientHeight : track.clientWidth;\n      const length = thumbSize(view, size, trackSize);\n      const offset = size > view ? (position / (size - view)) * (trackSize - length) : 0;\n      const direction = sign();\n      return () => {\n        const next = size > view + 1;\n        if (next !== overflowing) {\n          overflowing = next;\n          onOverflowChange?.(next);\n        }\n        if (axis === 'y') {\n          element.style.height = `${length}px`;\n          element.style.transform = `translateY(${offset}px)`;\n        } else {\n          element.style.width = `${length}px`;\n          element.style.transform = `translateX(${direction * offset}px)`;\n        }\n      };\n    }\n    // 滚动时立即对齐；挂载、尺寸变化时合并到这一轮的先读后写里（一页十几个滚动区域只排一次版）\n    const sync = () => read()?.();\n    const syncLater = () => batchLayout(read);\n\n    // 整页的滚动条（fixed）不论 type，指针移到它上面都显示\n    const revealsOnHover = () => type === 'hover' || fixed;\n\n    function show() {\n      active = true;\n      scheduleHide();\n    }\n    function scheduleHide() {\n      clearTimeout(hideTimer);\n      hideTimer = setTimeout(() => {\n        if (!dragging && !(revealsOnHover() && hovering)) active = false;\n      }, hideDelay);\n    }\n\n    _effect(() => {\n      if (!viewport || !content) return;\n      const element = viewport;\n      // 整页滚动时滚动事件发在 window 上；窗口高度变了（不改变内容尺寸）也要重算\n      const scroller = element === document.scrollingElement ? window : element;\n      const hover = hoverTarget ?? track;\n      syncLater();\n      const onScroll = () => {\n        sync();\n        show();\n      };\n      const onEnter = () => {\n        hovering = true;\n        if (!revealsOnHover()) return;\n        // 绝对定位的后代（图表的提示框）撑出、收回溢出时内容尺寸不变，ResizeObserver 察觉不到，显示前重新量\n        sync();\n        show();\n      };\n      const onLeave = () => {\n        hovering = false;\n        scheduleHide();\n      };\n      scroller.addEventListener('scroll', onScroll, { passive: true });\n      if (scroller === window) window.addEventListener('resize', sync);\n      hover?.addEventListener('pointerenter', onEnter);\n      hover?.addEventListener('pointerleave', onLeave);\n      return () => {\n        scroller.removeEventListener('scroll', onScroll);\n        window.removeEventListener('resize', sync);\n        hover?.removeEventListener('pointerenter', onEnter);\n        hover?.removeEventListener('pointerleave', onLeave);\n        clearTimeout(hideTimer);\n      };\n    });\n    useResizeObserver(() => [viewport, content], syncLater);\n\n    /** 拖动滑块：位移按“可滚动距离 / 滑块可移动距离”换算成滚动距离 */\n    function dragThumb(event: PointerEvent) {\n      if (!viewport || !track || !thumb) return;\n      event.stopPropagation();\n      const element = viewport;\n      const { view, size, position } = measure(element);\n      const trackSize = axis === 'y' ? track.clientHeight : track.clientWidth;\n      const ratio = (size - view) / (trackSize - thumbSize(view, size, trackSize));\n      const direction = sign();\n      dragging = true;\n      startMove(event, {\n        onMove: ({ deltaX, deltaY }) => {\n          const target = position + (axis === 'y' ? deltaY : direction * deltaX) * ratio;\n          if (axis === 'y') element.scrollTop = target;\n          else element.scrollLeft = direction * target;\n        },\n        onEnd: () => {\n          dragging = false;\n          scheduleHide();\n        },\n      });\n    }\n\n    /** 点击轨道的空白处：朝那一侧翻一页 */\n    function pageTo(event: PointerEvent) {\n      if (!viewport || !thumb || event.button !== 0) return;\n      const rect = thumb.getBoundingClientRect();\n      const { view } = measure(viewport);\n      // 点在滑块之前（上方；横向时为起始一侧）就往回翻\n      const rtl = sign() === -1;\n      const before =\n        axis === 'y'\n          ? event.clientY < rect.top\n          : rtl\n            ? event.clientX > rect.right\n            : event.clientX < rect.left;\n      const page = (before ? -1 : 1) * view * 0.9;\n      viewport.scrollBy(axis === 'y' ? { top: page } : { left: sign() * page });\n    }\n\n    /** 滚动条盖在视口上面，滚轮落在它上面时转交给视口 */\n    function forwardWheel(event: WheelEvent) {\n      if (!viewport) return;\n      event.preventDefault();\n      viewport.scrollBy({ left: event.deltaX, top: event.deltaY });\n    }\n\n    return () => {\n      const visible = overflowing && (type === 'always' || active);\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                scrollAreaBarStyles.track,\n                scrollAreaBarStyles[axis],\n                fixed && scrollAreaBarStyles.fixed,\n                corner &&\n                  (axis === 'y' ? scrollAreaBarStyles.yCorner : scrollAreaBarStyles.xCorner),\n              ],\n            },\n            propsScrollbar,\n            {\n              sx:\n                !visible && (fixed ? scrollAreaBarStyles.hiddenReveal : scrollAreaBarStyles.hidden),\n              ref: _toRef(track),\n              'aria-hidden': true,\n              onPointerdown: pageTo,\n              onWheel: forwardWheel,\n            },\n          )}\n          data-axis={axis}\n          data-state={visible ? 'visible' : 'hidden'}\n        >\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  scrollAreaBarStyles.thumb,\n                  axis === 'y' ? scrollAreaBarStyles.thumbY : scrollAreaBarStyles.thumbX,\n                ],\n              },\n              propsThumb,\n              { ref: _toRef(thumb), onPointerdown: dragThumb },\n            )}\n          />\n        </div>\n      );\n    };\n  },\n  { name: 'OverlayScrollbar' },\n);\n\n/** 滚动区域：原生滚动 + 半透明的浮层滚动条，出现与消失都不占位 */\nexport const ScrollArea = _component(\n  ({\n    axis = 'y',\n    type = 'hover',\n    hideDelay = 600,\n    focusable = true,\n    propsViewport,\n    propsContent,\n    propsScrollbar,\n    propsThumb,\n    children,\n    ...rest\n  }: ScrollAreaProps) => {\n    let root = _state.raw<HTMLElement | null>(null);\n    let viewport = _state.raw<HTMLElement | null>(null);\n    let content = _state.raw<HTMLElement | null>(null);\n    // 哪个方向的内容超出了视口：能滚动时视口才进 Tab 顺序，没超出的侧栏、代码块不多一个空的 Tab 位\n    let overflowing = _state({ x: false, y: false });\n\n    return () => {\n      const both = axis === 'both';\n      const bar = (barAxis: 'x' | 'y') => (\n        <OverlayScrollbar\n          axis={barAxis}\n          hoverTarget={root}\n          viewport={viewport}\n          content={content}\n          type={type}\n          hideDelay={hideDelay}\n          corner={both}\n          propsScrollbar={propsScrollbar}\n          propsThumb={propsThumb}\n          onOverflowChange={(value) => (overflowing = { ...overflowing, [barAxis]: value })}\n        />\n      );\n      return (\n        <div {...mergeAttrs<'div'>({ sx: scrollAreaStyles.root }, rest, { ref: _toRef(root) })}>\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [focusRingStyles.visible, scrollAreaStyles.viewport, scrollAreaStyles[axis]],\n              },\n              propsViewport,\n              {\n                ref: _toRef(viewport),\n                ...(focusable && (overflowing.x || overflowing.y) && { tabindex: 0 }),\n              },\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>(\n                { sx: axis !== 'y' && scrollAreaStyles.wideContent },\n                propsContent,\n                {\n                  ref: _toRef(content),\n                },\n              )}\n            >\n              {children}\n            </div>\n          </div>\n          {axis !== 'x' && bar('y')}\n          {axis !== 'y' && bar('x')}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/layout/Separator.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 /** 角色与朝向由组件管理 */

package/dist/layout/Separator.js

@@ -1,7 +1,7 @@
 import { mergeAttrs } from "../utils/props.js";
 import { createVNode, useId } from "vue";
 import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/Separator.tsx
 /** 角色与朝向由组件管理 */
 /** 分隔线方向 */

package/dist/layout/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/layout/Separator.tsx"],"sourcesContent":["/**\n * 分隔线。默认是装饰性的（对读屏隐藏）；分隔的是两组不同的内容、需要读屏感知时设 decorative={false}，\n * 渲染为 role=\"separator\"（竖向时带 aria-orientation）。\n *\n *   <Separator />\n *   <Flex align=\"center\" gap=\"sm\">A<Separator orientation=\"vertical\" />B</Flex>\n *   <Separator>或者</Separator>                       横线中间带文字\n *   <Separator labelAlign=\"start\">更改后</Separator>  文字靠起始边，线在后面\n *\n * 带文字（只用于横线）时：文字照常给读屏，两段线对读屏隐藏；decorative={false} 时整条是 role=\"separator\"、以文字为名称。\n *\n * 部件：Root（div）；带文字时还有 Label（span）与 Line（两段线，span）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 角色与朝向由组件管理 */\nexport type SeparatorManaged = 'role' | 'aria-orientation' | 'aria-hidden';\n\n/** 分隔线方向 */\nexport interface SeparatorOrientations {\n  /** 横线：上下两部分之间，占满容器宽度（默认） */\n  horizontal: unknown;\n  /** 竖线：左右两部分之间，在 flex 容器里随行高拉伸 */\n  vertical: unknown;\n}\n\n/** 文字在横线上的位置 */\nexport interface SeparatorLabelAligns {\n  /** 起始边：文字在前、线在后，像一节的小标题 */\n  start: unknown;\n  /** 居中（默认）：两边各一段线，如“或者” */\n  center: unknown;\n  /** 结束边 */\n  end: unknown;\n}\n\n/** 未声明的属性落到 div 上 */\nexport interface SeparatorProps extends PartProps<'div', SeparatorManaged> {\n  /** 方向，默认 horizontal */\n  orientation?: keyof SeparatorOrientations;\n  /** 是否只是视觉装饰，默认 true：对读屏隐藏（带文字时文字仍给读屏） */\n  decorative?: boolean;\n  /** 带文字时文字的位置，默认 center */\n  labelAlign?: keyof SeparatorLabelAligns;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 两段线的部件属性 */\n  propsLine?: PartProps<'span', 'aria-hidden'>;\n  /** 线上的文字（只用于横线） */\n  children?: VNodeChild;\n}\n\n/** Separator 的样式：root、horizontal、vertical、labelled、label、line */\nexport const separatorStyles = css.create({\n  // Windows 高对比（forced-colors）下系统会把背景色改掉，线就看不见了：改用系统的文字色并保留它\n  root: {\n    flexShrink: 0,\n    backgroundColor: { default: '_borderMuted', _forcedColors: 'CanvasText' },\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n  horizontal: { height: '_borderWidths.xs', width: '_full' },\n  // 在 flex 容器里随行高拉伸\n  vertical: { width: '_borderWidths.xs', alignSelf: 'stretch' },\n  // 带文字：外层不画线，两段线各自伸展\n  labelled: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_md',\n    width: '_full',\n    color: '_textMuted',\n    // 比所在文字小一档（0.93em ≈ 默认字号下的 sm）\n    fontSize: '0.93em',\n    lineHeight: '_tight',\n  },\n  label: { flexShrink: 0, whiteSpace: 'nowrap' },\n  line: {\n    flexGrow: 1,\n    height: '_borderWidths.xs',\n    backgroundColor: { default: '_borderMuted', _forcedColors: 'CanvasText' },\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n});\n\n/** 分隔线（div）：默认装饰性、对读屏隐藏；decorative={false} 时为 role=\"separator\"；可以带文字 */\nexport const Separator = _component(\n  ({\n    orientation = 'horizontal',\n    decorative = true,\n    labelAlign = 'center',\n    propsLabel,\n    propsLine,\n    children,\n    ...rest\n  }: SeparatorProps) => {\n    const labelId = useId();\n    return () => {\n      if (children == null || orientation === 'vertical') {\n        return (\n          <div\n            {...mergeAttrs<'div'>(\n              { sx: [separatorStyles.root, separatorStyles[orientation]] },\n              rest,\n              {\n                role: decorative ? 'none' : 'separator',\n                'aria-orientation':\n                  !decorative && orientation === 'vertical' ? 'vertical' : undefined,\n                'aria-hidden': decorative ? 'true' : undefined,\n              },\n            )}\n          />\n        );\n      }\n      const line = () => (\n        <span\n          {...mergeAttrs<'span'>({ sx: separatorStyles.line }, propsLine, { 'aria-hidden': true })}\n        />\n      );\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: separatorStyles.labelled }, rest, {\n            role: decorative ? 'none' : 'separator',\n            'aria-labelledby': decorative ? undefined : labelId,\n          })}\n          data-label-align={labelAlign}\n        >\n          {labelAlign !== 'start' && line()}\n          <span {...mergeAttrs<'span'>({ sx: separatorStyles.label }, propsLabel, { id: labelId })}>\n            {children}\n          </span>\n          {labelAlign !== 'end' && line()}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AAwDA,IAAa,kBAAkB,IAAI,OAAO;CAExC,MAAM;EACJ,YAAY;EACZ,iBAAiB;GAAE,SAAS;GAAgB,eAAe;EAAa;EACxE,mBAAmB;GAAE,SAAS;GAAM,eAAe;EAAO;CAC5D;CACA,YAAY;EAAE,QAAQ;EAAoB,OAAO;CAAQ;CAEzD,UAAU;EAAE,OAAO;EAAoB,WAAW;CAAU;CAE5D,UAAU;EACR,SAAS;EACT,YAAY;EACZ,KAAK;EACL,OAAO;EACP,OAAO;EAEP,UAAU;EACV,YAAY;CACd;CACA,OAAO;EAAE,YAAY;EAAG,YAAY;CAAS;CAC7C,MAAM;EACJ,UAAU;EACV,QAAQ;EACR,iBAAiB;GAAE,SAAS;GAAgB,eAAe;EAAa;EACxE,mBAAmB;GAAE,SAAS;GAAM,eAAe;EAAO;CAC5D;AACF,CAAC;;AAGD,IAAa,YAAY,0BACvB,QAAA,SAQsB;CAAA,MAAA,cAAAA,aAAA,QAAA,eAPN,YAAY;CAAA,MAAA,aAAAA,aAAA,QAAA,cACb,IAAI;CAAA,MAAA,aAAAA,aAAA,QAAA,cACJ,QAAQ;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIlB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,UAAU,MAAM;CACtB,aAAa;EACX,IAAI,SAAA,SAAY,QAAQ,YAAA,UAAgB,YACtC,OAAAC,YAAA,OAEQ,WACF,EAAE,IAAI,CAAC,gBAAgB,MAAM,gBAAe,YAAA,MAAa,EAAE,GAC3D,MACA;GACE,MAAM,WAAA,QAAa,SAAS;GAC5B,oBACE,CAAA,WAAA,SAAe,YAAA,UAAgB,aAAa,aAAa,KAAA;GAC3D,eAAe,WAAA,QAAa,SAAS,KAAA;EACvC,CACF,GAAC,IAAA;EAIP,MAAM,aAAOA,YAAA,QAEL,WAAmB,EAAE,IAAI,gBAAgB,KAAK,GAAC,UAAA,OAAa,EAAE,eAAe,KAAK,CAAC,GAAC,IAAA;EAG5F,OAAAA,YAAA,OAAAC,cAEQ,WAAkB,EAAE,IAAI,gBAAgB,SAAS,GAAG,MAAM;GAC5D,MAAM,WAAA,QAAa,SAAS;GAC5B,mBAAmB,WAAA,QAAa,KAAA,IAAY;EAC9C,CAAC,GAAC,EAAA,oBAAA,WAAA,MAAA,CAAA,GAAA;GAGD,WAAA,UAAe,WAAW,KAAK;GAACD,YAAA,QACvB,WAAmB,EAAE,IAAI,gBAAgB,MAAM,GAAC,WAAA,OAAc,EAAE,IAAI,QAAQ,CAAC,GAAC,CAAA,SAAA,KAAA,CAAA;GAGvF,WAAA,UAAe,SAAS,KAAK;EAAC,CAAA;CAGrC;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"Separator.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/layout/Separator.tsx"],"sourcesContent":["/**\n * 分隔线。默认是装饰性的（对读屏隐藏）；分隔的是两组不同的内容、需要读屏感知时设 decorative={false}，\n * 渲染为 role=\"separator\"（竖向时带 aria-orientation）。\n *\n *   <Separator />\n *   <Flex align=\"center\" gap=\"sm\">A<Separator orientation=\"vertical\" />B</Flex>\n *   <Separator>或者</Separator>                       横线中间带文字\n *   <Separator labelAlign=\"start\">更改后</Separator>  文字靠起始边，线在后面\n *\n * 带文字（只用于横线）时：文字照常给读屏，两段线对读屏隐藏；decorative={false} 时整条是 role=\"separator\"、以文字为名称。\n *\n * 部件：Root（div）；带文字时还有 Label（span）与 Line（两段线，span）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 角色与朝向由组件管理 */\nexport type SeparatorManaged = 'role' | 'aria-orientation' | 'aria-hidden';\n\n/** 分隔线方向 */\nexport interface SeparatorOrientations {\n  /** 横线：上下两部分之间，占满容器宽度（默认） */\n  horizontal: unknown;\n  /** 竖线：左右两部分之间，在 flex 容器里随行高拉伸 */\n  vertical: unknown;\n}\n\n/** 文字在横线上的位置 */\nexport interface SeparatorLabelAligns {\n  /** 起始边：文字在前、线在后，像一节的小标题 */\n  start: unknown;\n  /** 居中（默认）：两边各一段线，如“或者” */\n  center: unknown;\n  /** 结束边 */\n  end: unknown;\n}\n\n/** 未声明的属性落到 div 上 */\nexport interface SeparatorProps extends PartProps<'div', SeparatorManaged> {\n  /** 方向，默认 horizontal */\n  orientation?: keyof SeparatorOrientations;\n  /** 是否只是视觉装饰，默认 true：对读屏隐藏（带文字时文字仍给读屏） */\n  decorative?: boolean;\n  /** 带文字时文字的位置，默认 center */\n  labelAlign?: keyof SeparatorLabelAligns;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 两段线的部件属性 */\n  propsLine?: PartProps<'span', 'aria-hidden'>;\n  /** 线上的文字（只用于横线） */\n  children?: VNodeChild;\n}\n\n/** Separator 的样式：root、horizontal、vertical、labelled、label、line */\nexport const separatorStyles = css.create({\n  // Windows 高对比（forced-colors）下系统会把背景色改掉，线就看不见了：改用系统的文字色并保留它\n  root: {\n    flexShrink: 0,\n    backgroundColor: { default: '_borderMuted', _forcedColors: 'CanvasText' },\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n  horizontal: { height: '_borderWidths.xs', width: '_full' },\n  // 在 flex 容器里随行高拉伸\n  vertical: { width: '_borderWidths.xs', alignSelf: 'stretch' },\n  // 带文字：外层不画线，两段线各自伸展\n  labelled: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_md',\n    width: '_full',\n    color: '_textMuted',\n    // 比所在文字小一档（0.93em ≈ 默认字号下的 sm）\n    fontSize: '0.93em',\n    lineHeight: '_tight',\n  },\n  label: { flexShrink: 0, whiteSpace: 'nowrap' },\n  line: {\n    flexGrow: 1,\n    height: '_borderWidths.xs',\n    backgroundColor: { default: '_borderMuted', _forcedColors: 'CanvasText' },\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n});\n\n/** 分隔线（div）：默认装饰性、对读屏隐藏；decorative={false} 时为 role=\"separator\"；可以带文字 */\nexport const Separator = _component(\n  ({\n    orientation = 'horizontal',\n    decorative = true,\n    labelAlign = 'center',\n    propsLabel,\n    propsLine,\n    children,\n    ...rest\n  }: SeparatorProps) => {\n    const labelId = useId();\n    return () => {\n      if (children == null || orientation === 'vertical') {\n        return (\n          <div\n            {...mergeAttrs<'div'>(\n              { sx: [separatorStyles.root, separatorStyles[orientation]] },\n              rest,\n              {\n                role: decorative ? 'none' : 'separator',\n                'aria-orientation':\n                  !decorative && orientation === 'vertical' ? 'vertical' : undefined,\n                'aria-hidden': decorative ? 'true' : undefined,\n              },\n            )}\n          />\n        );\n      }\n      const line = () => (\n        <span\n          {...mergeAttrs<'span'>({ sx: separatorStyles.line }, propsLine, { 'aria-hidden': true })}\n        />\n      );\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: separatorStyles.labelled }, rest, {\n            role: decorative ? 'none' : 'separator',\n            'aria-labelledby': decorative ? undefined : labelId,\n          })}\n          data-label-align={labelAlign}\n        >\n          {labelAlign !== 'start' && line()}\n          <span {...mergeAttrs<'span'>({ sx: separatorStyles.label }, propsLabel, { id: labelId })}>\n            {children}\n          </span>\n          {labelAlign !== 'end' && line()}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AAwDA,IAAa,kBAAkB,IAAI,OAAO;CAExC,MAAM;EACJ,YAAY;EACZ,iBAAiB;GAAE,SAAS;GAAgB,eAAe;EAAa;EACxE,mBAAmB;GAAE,SAAS;GAAM,eAAe;EAAO;CAC5D;CACA,YAAY;EAAE,QAAQ;EAAoB,OAAO;CAAQ;CAEzD,UAAU;EAAE,OAAO;EAAoB,WAAW;CAAU;CAE5D,UAAU;EACR,SAAS;EACT,YAAY;EACZ,KAAK;EACL,OAAO;EACP,OAAO;EAEP,UAAU;EACV,YAAY;CACd;CACA,OAAO;EAAE,YAAY;EAAG,YAAY;CAAS;CAC7C,MAAM;EACJ,UAAU;EACV,QAAQ;EACR,iBAAiB;GAAE,SAAS;GAAgB,eAAe;EAAa;EACxE,mBAAmB;GAAE,SAAS;GAAM,eAAe;EAAO;CAC5D;AACF,CAAC;;AAGD,IAAa,YAAY,0BACvB,QAAA,SAQsB;CAAA,MAAA,cAAAA,aAAA,QAAA,eAPN,YAAY;CAAA,MAAA,aAAAA,aAAA,QAAA,cACb,IAAI;CAAA,MAAA,aAAAA,aAAA,QAAA,cACJ,QAAQ;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIlB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,UAAU,MAAM;CACtB,aAAa;EACX,IAAI,SAAA,SAAY,QAAQ,YAAA,UAAgB,YACtC,OAAAC,YAAA,OAEQ,WACF,EAAE,IAAI,CAAC,gBAAgB,MAAM,gBAAe,YAAA,MAAa,EAAE,GAC3D,MACA;GACE,MAAM,WAAA,QAAa,SAAS;GAC5B,oBACE,CAAA,WAAA,SAAe,YAAA,UAAgB,aAAa,aAAa,KAAA;GAC3D,eAAe,WAAA,QAAa,SAAS,KAAA;EACvC,CACF,GAAC,IAAA;EAIP,MAAM,aAAOA,YAAA,QAEL,WAAmB,EAAE,IAAI,gBAAgB,KAAK,GAAC,UAAA,OAAa,EAAE,eAAe,KAAK,CAAC,GAAC,IAAA;EAG5F,OAAAA,YAAA,OAAAC,cAEQ,WAAkB,EAAE,IAAI,gBAAgB,SAAS,GAAG,MAAM;GAC5D,MAAM,WAAA,QAAa,SAAS;GAC5B,mBAAmB,WAAA,QAAa,KAAA,IAAY;EAC9C,CAAC,GAAC,EAAA,oBAAA,WAAA,MAAA,CAAA,GAAA;GAGD,WAAA,UAAe,WAAW,KAAK;GAACD,YAAA,QACvB,WAAmB,EAAE,IAAI,gBAAgB,MAAM,GAAC,WAAA,OAAc,EAAE,IAAI,QAAQ,CAAC,GAAC,CAAA,SAAA,KAAA,CAAA;GAGvF,WAAA,UAAe,SAAS,KAAK;EAAC,CAAA;CAGrC;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/layout/Splitter.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type VNodeChild } from 'vue';
 import { type IconButtonProps } from '../base/IconButton';
 import { type PartProps } from '../utils/props';

package/dist/layout/Splitter.js

@@ -7,7 +7,7 @@ import { startMove } from "../utils/dom/move.js";
 import { inlineArrows, isRtl } from "../utils/dom/direction.js";
 import { createVNode, shallowRef, useId } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@lucide/icons";
 //#region src/layout/Splitter.tsx
 /**

package/dist/layout/Splitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Splitter.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_untrack","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/layout/Splitter.tsx"],"sourcesContent":["/**\n * 分栏：两栏并排（或上下），中间的分隔条可以拖动调整比例，一侧可以收起。收件箱（左列表、右预览）、\n * 主从视图、编辑器与预览这类“两块都要看、比例因人而异”的布局。\n *\n *   <Splitter _size={listSize} collapsible=\"end\" _collapsed={previewHidden}\n *     start={<List />} end={<Preview />} />\n *\n * size 是起始一栏占的百分比（父级写 _bind 记住），拖动时夹在 minSize–maxSize 之间；双击分隔条回到初始比例。\n * 分隔条按 WAI-ARIA 的 Window Splitter 模式：role=\"separator\"、可聚焦，←/→（上下排列时 ↑/↓）每次调 5%，\n * Home / End 到最小 / 最大，Enter 收起或展开可收起的那一侧；从右到左排版下左右键自动镜像。\n * 写了 collapsible 时分隔条中间有收起、展开的小按钮；收起的一栏不显示（hidden），另一栏占满。\n * 两栏各自滚动：内容放在里面自己的滚动容器里（或直接用 ScrollArea）。\n */\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport { clamp } from '../utils/data/number';\nimport { inlineArrows, isRtl } from '../utils/dom/direction';\nimport { startMove } from '../utils/dom/move';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\n\n/** 两栏的排法 */\nexport interface SplitterOrientations {\n  /** 左右并排（默认） */\n  horizontal: unknown;\n  /** 上下排列 */\n  vertical: unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface SplitterProps extends PartProps<'div'> {\n  /** 起始一栏（左或上）的内容 */\n  start: VNodeChild;\n  /** 结束一栏（右或下）的内容 */\n  end: VNodeChild;\n  /**\n   * 两栏的排法\n   * @default 'horizontal'\n   */\n  orientation?: keyof SplitterOrientations;\n  /**\n   * 起始一栏占的百分比：父级写 _size={x} 记住拖动后的比例\n   * @default 50\n   */\n  _size?: number;\n  /**\n   * 起始一栏最少占多少（百分比）\n   * @default 20\n   */\n  minSize?: number;\n  /**\n   * 起始一栏最多占多少（百分比）\n   * @default 80\n   */\n  maxSize?: number;\n  /** 哪一侧可以收起；不写时不能收起 */\n  collapsible?: 'start' | 'end';\n  /** 可收起的那一侧收着：父级写 _collapsed={x} */\n  _collapsed?: boolean;\n  /** 分隔条的名称（读屏），默认取语言包（调整分栏） */\n  label?: string;\n  /** 外面一圈边框、圆角与表面色：独立成块（收件箱的列表与预览） */\n  bordered?: boolean;\n  /** 起始一栏（div）的部件属性 */\n  propsStart?: PartProps<'div'>;\n  /** 结束一栏（div）的部件属性 */\n  propsEnd?: PartProps<'div'>;\n  /** 分隔条（div，role=\"separator\"）的部件属性 */\n  propsHandle?: PartProps<'div'>;\n  /** 收起、展开按钮的部件属性 */\n  propsToggle?: Partial<IconButtonProps>;\n}\n\n/** 键盘每按一次调多少（百分比） */\nconst STEP = 5;\n\n/** Splitter 的样式：root、pane、handle、line、toggle… */\nexport const splitterStyles = css.create({\n  root: { display: 'grid', minWidth: 0, minHeight: 0, height: '100%' },\n  bordered: {\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_lg',\n    backgroundColor: '_surface',\n    overflow: 'hidden',\n  },\n  pane: { minWidth: 0, minHeight: 0, overflow: 'auto' },\n  // 分隔条：看得见的是中间一条细线，能拖的范围更宽；悬停、拖动时变成强调色\n  // 分隔条所在的格：分隔条铺满它，收起按钮叠在中间（不放进可聚焦的分隔条里：交互元素不能嵌套）\n  track: { position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' },\n  handle: {\n    position: 'absolute',\n    inset: 0,\n    touchAction: 'none',\n    outlineStyle: 'none',\n    color: { default: '_borderMuted', ':hover': '_borderStrong', ':focus-visible': '_accent' },\n  },\n  handleHorizontal: { width: '_space.md', cursor: 'col-resize' },\n  handleVertical: { height: '_space.md', cursor: 'row-resize' },\n  line: { position: 'absolute', backgroundColor: 'currentColor', pointerEvents: 'none' },\n  lineHorizontal: { insetBlock: 0, insetInlineStart: 'calc(50% - 0.5px)', width: '1px' },\n  lineVertical: { insetInline: 0, top: 'calc(50% - 0.5px)', height: '1px' },\n  // 收起、展开的小按钮压在线上：背景盖住线\n  toggle: { position: 'relative', zIndex: 1, backgroundColor: '_surface', cursor: 'pointer' },\n});\n\n/** Splitter 的动态样式：两栏与分隔条的轨道 */\nexport const splitterDynamicStyles = css.create({\n  columns: (template: string) => ({ gridTemplateColumns: template }),\n  rows: (template: string) => ({ gridTemplateRows: template }),\n});\n\n/** 分栏 */\nexport const Splitter = _component(\n  ({\n    start,\n    end,\n    orientation = 'horizontal',\n    _size: size = _bindable(50),\n    minSize = 20,\n    maxSize = 80,\n    collapsible,\n    _collapsed: collapsed = _bindable(false),\n    label,\n    bordered = false,\n    propsStart,\n    propsEnd,\n    propsHandle,\n    propsToggle,\n    ...rest\n  }: SplitterProps) => {\n    const lang = useLang();\n    const id = useId();\n    const initialSize = _untrack(size);\n    let root = _state.raw<HTMLElement | null>(null);\n    const horizontal = () => orientation === 'horizontal';\n    const fit = (value: number) => Math.round(clamp(value, minSize, maxSize) * 10) / 10;\n\n    function onPointerdown(event: PointerEvent) {\n      if (!root || (event.target as Element).closest('button')) return;\n      const rect = root.getBoundingClientRect();\n      const total = horizontal() ? rect.width : rect.height;\n      const from = size;\n      const sign = horizontal() && isRtl(root) ? -1 : 1;\n      event.preventDefault();\n      startMove(event, {\n        onMove: ({ deltaX, deltaY }) => {\n          const delta = (horizontal() ? deltaX * sign : deltaY) / total;\n          size = fit(from + delta * 100);\n          // 拖动即展开：收着的一侧被拖出来\n          if (collapsed) collapsed = false;\n        },\n      });\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      if (event.key === 'Enter' && collapsible) {\n        event.preventDefault();\n        collapsed = !collapsed;\n        return;\n      }\n      const { forward, backward } = horizontal()\n        ? inlineArrows(root ? isRtl(root) : false)\n        : { forward: 'ArrowDown', backward: 'ArrowUp' };\n      const next =\n        event.key === forward\n          ? size + STEP\n          : event.key === backward\n            ? size - STEP\n            : event.key === 'Home'\n              ? minSize\n              : event.key === 'End'\n                ? maxSize\n                : null;\n      if (next == null) return;\n      event.preventDefault();\n      size = fit(next);\n      if (collapsed) collapsed = false;\n    }\n\n    /** 收起、展开按钮的箭头：指向收起的方向 */\n    const toggleIcon = () => {\n      const towardStart = (collapsible === 'start') !== collapsed;\n      if (horizontal()) return towardStart ? ChevronLeft : ChevronRight;\n      return towardStart ? ChevronUp : ChevronDown;\n    };\n\n    return () => {\n      const hideStart = collapsed && collapsible === 'start';\n      const hideEnd = collapsed && collapsible === 'end';\n      const template = hideStart\n        ? '0 auto minmax(0, 1fr)'\n        : hideEnd\n          ? 'minmax(0, 1fr) auto 0'\n          : `minmax(0, ${size}fr) auto minmax(0, ${100 - size}fr)`;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                splitterStyles.root,\n                bordered && splitterStyles.bordered,\n                horizontal()\n                  ? splitterDynamicStyles.columns(template)\n                  : splitterDynamicStyles.rows(template),\n              ],\n            },\n            rest,\n            { ref: (element: unknown) => (root = element as HTMLElement | null) },\n          )}\n          data-orientation={orientation}\n          data-collapsed={collapsed ? collapsible : undefined}\n        >\n          <div\n            {...mergeAttrs<'div'>({ sx: splitterStyles.pane }, propsStart, {\n              id: `${id}-start`,\n              hidden: hideStart || undefined,\n            })}\n          >\n            {start}\n          </div>\n          <div\n            {...css.attrs(\n              splitterStyles.track,\n              horizontal() ? splitterStyles.handleHorizontal : splitterStyles.handleVertical,\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    splitterStyles.handle,\n                    horizontal() ? splitterStyles.handleHorizontal : splitterStyles.handleVertical,\n                    focusRingStyles.visible,\n                  ],\n                },\n                propsHandle,\n                {\n                  role: 'separator',\n                  tabindex: 0,\n                  'aria-label': label ?? lang.splitterResize,\n                  'aria-orientation': horizontal() ? 'vertical' : 'horizontal',\n                  'aria-controls': `${id}-start`,\n                  'aria-valuenow': hideStart ? 0 : hideEnd ? 100 : size,\n                  'aria-valuemin': minSize,\n                  'aria-valuemax': maxSize,\n                  onPointerdown,\n                  onKeydown,\n                  onDblclick: () => (size = fit(initialSize)),\n                },\n              )}\n            >\n              <span\n                {...css.attrs(\n                  splitterStyles.line,\n                  horizontal() ? splitterStyles.lineHorizontal : splitterStyles.lineVertical,\n                )}\n              />\n            </div>\n            {collapsible && (\n              <IconButton\n                {...mergePartProps<IconButtonProps>(\n                  {\n                    icon: toggleIcon(),\n                    size: 'xs',\n                    variant: 'outline',\n                    tone: 'neutral',\n                    sx: splitterStyles.toggle,\n                    'aria-label': collapsed ? lang.splitterExpand : lang.splitterCollapse,\n                  },\n                  propsToggle,\n                  {\n                    'aria-expanded': !collapsed,\n                    'aria-controls': collapsible === 'start' ? `${id}-start` : `${id}-end`,\n                    // 键盘用户在分隔条上按 Enter：按钮不进 Tab 顺序，免得多停一次\n                    tabindex: -1,\n                    onClick: () => (collapsed = !collapsed),\n                  },\n                )}\n              />\n            )}\n          </div>\n          <div\n            {...mergeAttrs<'div'>({ sx: splitterStyles.pane }, propsEnd, {\n              id: `${id}-end`,\n              hidden: hideEnd || undefined,\n            })}\n          >\n            {end}\n          </div>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Splitter.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_untrack","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/layout/Splitter.tsx"],"sourcesContent":["/**\n * 分栏：两栏并排（或上下），中间的分隔条可以拖动调整比例，一侧可以收起。收件箱（左列表、右预览）、\n * 主从视图、编辑器与预览这类“两块都要看、比例因人而异”的布局。\n *\n *   <Splitter _size={listSize} collapsible=\"end\" _collapsed={previewHidden}\n *     start={<List />} end={<Preview />} />\n *\n * size 是起始一栏占的百分比（父级写 _bind 记住），拖动时夹在 minSize–maxSize 之间；双击分隔条回到初始比例。\n * 分隔条按 WAI-ARIA 的 Window Splitter 模式：role=\"separator\"、可聚焦，←/→（上下排列时 ↑/↓）每次调 5%，\n * Home / End 到最小 / 最大，Enter 收起或展开可收起的那一侧；从右到左排版下左右键自动镜像。\n * 写了 collapsible 时分隔条中间有收起、展开的小按钮；收起的一栏不显示（hidden），另一栏占满。\n * 两栏各自滚动：内容放在里面自己的滚动容器里（或直接用 ScrollArea）。\n */\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport { clamp } from '../utils/data/number';\nimport { inlineArrows, isRtl } from '../utils/dom/direction';\nimport { startMove } from '../utils/dom/move';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\n\n/** 两栏的排法 */\nexport interface SplitterOrientations {\n  /** 左右并排（默认） */\n  horizontal: unknown;\n  /** 上下排列 */\n  vertical: unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface SplitterProps extends PartProps<'div'> {\n  /** 起始一栏（左或上）的内容 */\n  start: VNodeChild;\n  /** 结束一栏（右或下）的内容 */\n  end: VNodeChild;\n  /**\n   * 两栏的排法\n   * @default 'horizontal'\n   */\n  orientation?: keyof SplitterOrientations;\n  /**\n   * 起始一栏占的百分比：父级写 _size={x} 记住拖动后的比例\n   * @default 50\n   */\n  _size?: number;\n  /**\n   * 起始一栏最少占多少（百分比）\n   * @default 20\n   */\n  minSize?: number;\n  /**\n   * 起始一栏最多占多少（百分比）\n   * @default 80\n   */\n  maxSize?: number;\n  /** 哪一侧可以收起；不写时不能收起 */\n  collapsible?: 'start' | 'end';\n  /** 可收起的那一侧收着：父级写 _collapsed={x} */\n  _collapsed?: boolean;\n  /** 分隔条的名称（读屏），默认取语言包（调整分栏） */\n  label?: string;\n  /** 外面一圈边框、圆角与表面色：独立成块（收件箱的列表与预览） */\n  bordered?: boolean;\n  /** 起始一栏（div）的部件属性 */\n  propsStart?: PartProps<'div'>;\n  /** 结束一栏（div）的部件属性 */\n  propsEnd?: PartProps<'div'>;\n  /** 分隔条（div，role=\"separator\"）的部件属性 */\n  propsHandle?: PartProps<'div'>;\n  /** 收起、展开按钮的部件属性 */\n  propsToggle?: Partial<IconButtonProps>;\n}\n\n/** 键盘每按一次调多少（百分比） */\nconst STEP = 5;\n\n/** Splitter 的样式：root、pane、handle、line、toggle… */\nexport const splitterStyles = css.create({\n  root: { display: 'grid', minWidth: 0, minHeight: 0, height: '100%' },\n  bordered: {\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_lg',\n    backgroundColor: '_surface',\n    overflow: 'hidden',\n  },\n  pane: { minWidth: 0, minHeight: 0, overflow: 'auto' },\n  // 分隔条：看得见的是中间一条细线，能拖的范围更宽；悬停、拖动时变成强调色\n  // 分隔条所在的格：分隔条铺满它，收起按钮叠在中间（不放进可聚焦的分隔条里：交互元素不能嵌套）\n  track: { position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' },\n  handle: {\n    position: 'absolute',\n    inset: 0,\n    touchAction: 'none',\n    outlineStyle: 'none',\n    color: { default: '_borderMuted', ':hover': '_borderStrong', ':focus-visible': '_accent' },\n  },\n  handleHorizontal: { width: '_space.md', cursor: 'col-resize' },\n  handleVertical: { height: '_space.md', cursor: 'row-resize' },\n  line: { position: 'absolute', backgroundColor: 'currentColor', pointerEvents: 'none' },\n  lineHorizontal: { insetBlock: 0, insetInlineStart: 'calc(50% - 0.5px)', width: '1px' },\n  lineVertical: { insetInline: 0, top: 'calc(50% - 0.5px)', height: '1px' },\n  // 收起、展开的小按钮压在线上：背景盖住线\n  toggle: { position: 'relative', zIndex: 1, backgroundColor: '_surface', cursor: 'pointer' },\n});\n\n/** Splitter 的动态样式：两栏与分隔条的轨道 */\nexport const splitterDynamicStyles = css.create({\n  columns: (template: string) => ({ gridTemplateColumns: template }),\n  rows: (template: string) => ({ gridTemplateRows: template }),\n});\n\n/** 分栏 */\nexport const Splitter = _component(\n  ({\n    start,\n    end,\n    orientation = 'horizontal',\n    _size: size = _bindable(50),\n    minSize = 20,\n    maxSize = 80,\n    collapsible,\n    _collapsed: collapsed = _bindable(false),\n    label,\n    bordered = false,\n    propsStart,\n    propsEnd,\n    propsHandle,\n    propsToggle,\n    ...rest\n  }: SplitterProps) => {\n    const lang = useLang();\n    const id = useId();\n    const initialSize = _untrack(size);\n    let root = _state.raw<HTMLElement | null>(null);\n    const horizontal = () => orientation === 'horizontal';\n    const fit = (value: number) => Math.round(clamp(value, minSize, maxSize) * 10) / 10;\n\n    function onPointerdown(event: PointerEvent) {\n      if (!root || (event.target as Element).closest('button')) return;\n      const rect = root.getBoundingClientRect();\n      const total = horizontal() ? rect.width : rect.height;\n      const from = size;\n      const sign = horizontal() && isRtl(root) ? -1 : 1;\n      event.preventDefault();\n      startMove(event, {\n        onMove: ({ deltaX, deltaY }) => {\n          const delta = (horizontal() ? deltaX * sign : deltaY) / total;\n          size = fit(from + delta * 100);\n          // 拖动即展开：收着的一侧被拖出来\n          if (collapsed) collapsed = false;\n        },\n      });\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      if (event.key === 'Enter' && collapsible) {\n        event.preventDefault();\n        collapsed = !collapsed;\n        return;\n      }\n      const { forward, backward } = horizontal()\n        ? inlineArrows(root ? isRtl(root) : false)\n        : { forward: 'ArrowDown', backward: 'ArrowUp' };\n      const next =\n        event.key === forward\n          ? size + STEP\n          : event.key === backward\n            ? size - STEP\n            : event.key === 'Home'\n              ? minSize\n              : event.key === 'End'\n                ? maxSize\n                : null;\n      if (next == null) return;\n      event.preventDefault();\n      size = fit(next);\n      if (collapsed) collapsed = false;\n    }\n\n    /** 收起、展开按钮的箭头：指向收起的方向 */\n    const toggleIcon = () => {\n      const towardStart = (collapsible === 'start') !== collapsed;\n      if (horizontal()) return towardStart ? ChevronLeft : ChevronRight;\n      return towardStart ? ChevronUp : ChevronDown;\n    };\n\n    return () => {\n      const hideStart = collapsed && collapsible === 'start';\n      const hideEnd = collapsed && collapsible === 'end';\n      const template = hideStart\n        ? '0 auto minmax(0, 1fr)'\n        : hideEnd\n          ? 'minmax(0, 1fr) auto 0'\n          : `minmax(0, ${size}fr) auto minmax(0, ${100 - size}fr)`;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                splitterStyles.root,\n                bordered && splitterStyles.bordered,\n                horizontal()\n                  ? splitterDynamicStyles.columns(template)\n                  : splitterDynamicStyles.rows(template),\n              ],\n            },\n            rest,\n            { ref: (element: unknown) => (root = element as HTMLElement | null) },\n          )}\n          data-orientation={orientation}\n          data-collapsed={collapsed ? collapsible : undefined}\n        >\n          <div\n            {...mergeAttrs<'div'>({ sx: splitterStyles.pane }, propsStart, {\n              id: `${id}-start`,\n              hidden: hideStart || undefined,\n            })}\n          >\n            {start}\n          </div>\n          <div\n            {...css.attrs(\n              splitterStyles.track,\n              horizontal() ? splitterStyles.handleHorizontal : splitterStyles.handleVertical,\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    splitterStyles.handle,\n                    horizontal() ? splitterStyles.handleHorizontal : splitterStyles.handleVertical,\n                    focusRingStyles.visible,\n                  ],\n                },\n                propsHandle,\n                {\n                  role: 'separator',\n                  tabindex: 0,\n                  'aria-label': label ?? lang.splitterResize,\n                  'aria-orientation': horizontal() ? 'vertical' : 'horizontal',\n                  'aria-controls': `${id}-start`,\n                  'aria-valuenow': hideStart ? 0 : hideEnd ? 100 : size,\n                  'aria-valuemin': minSize,\n                  'aria-valuemax': maxSize,\n                  onPointerdown,\n                  onKeydown,\n                  onDblclick: () => (size = fit(initialSize)),\n                },\n              )}\n            >\n              <span\n                {...css.attrs(\n                  splitterStyles.line,\n                  horizontal() ? splitterStyles.lineHorizontal : splitterStyles.lineVertical,\n                )}\n              />\n            </div>\n            {collapsible && (\n              <IconButton\n                {...mergePartProps<IconButtonProps>(\n                  {\n                    icon: toggleIcon(),\n                    size: 'xs',\n                    variant: 'outline',\n                    tone: 'neutral',\n                    sx: splitterStyles.toggle,\n                    'aria-label': collapsed ? lang.splitterExpand : lang.splitterCollapse,\n                  },\n                  propsToggle,\n                  {\n                    'aria-expanded': !collapsed,\n                    'aria-controls': collapsible === 'start' ? `${id}-start` : `${id}-end`,\n                    // 键盘用户在分隔条上按 Enter：按钮不进 Tab 顺序，免得多停一次\n                    tabindex: -1,\n                    onClick: () => (collapsed = !collapsed),\n                  },\n                )}\n              />\n            )}\n          </div>\n          <div\n            {...mergeAttrs<'div'>({ sx: splitterStyles.pane }, propsEnd, {\n              id: `${id}-end`,\n              hidden: hideEnd || undefined,\n            })}\n          >\n            {end}\n          </div>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/layout/ViewportFill.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type FlexProps } from './Flex';
 import type { Space } from '../utils/style/styles';
 /** 未声明的属性落到 Flex（div）上 */

package/dist/layout/ViewportFill.js

@@ -5,7 +5,7 @@ import { useEventListener } from "../utils/dom/event-listener.js";
 import { Flex } from "./Flex.js";
 import { createVNode, onMounted, ref, shallowRef } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/layout/ViewportFill.tsx
 /** 未声明的属性落到 Flex（div）上 */
 /** ViewportFill 的样式：root */

package/dist/layout/ViewportFill.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewportFill.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/layout/ViewportFill.tsx"],"sourcesContent":["/**\n * 占满到窗口底边：从自己的顶边一直到视口底边（留出 bottom 的间距），里面竖排。列表页让表格正好占满一屏、\n * 在表格里滚动，分页贴着窗口底边；收件箱的左右分栏占满剩下的高度。\n *\n *   <ViewportFill gap=\"md\">\n *     <Toolbar />\n *     <DataTable propsRoot={{ sx: fillStyles.grow }} />     表格 flexGrow 撑满剩下的\n *     <Pagination />\n *   </ViewportFill>\n *\n * 顶边的位置量出来（上面的页头、页签、查询栏换行变高都跟着变），不用手算“视口高度减顶栏减内边距”。\n * 窗口太矮时不小于 minHeight，整页滚动。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted } from 'vue';\nimport { space } from '../config/theme/tokens';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { toElement } from '../utils/dom/element';\nimport { useEventListener } from '../utils/dom/event-listener';\nimport { Flex, type FlexProps } from './Flex';\nimport type { Space } from '../utils/style/styles';\n\n/** 未声明的属性落到 Flex（div）上 */\nexport interface ViewportFillProps extends Omit<FlexProps, 'direction'> {\n  /**\n   * 离视口底边留多少（与外壳正文 AppShell main 的内边距一致：留得比它少，整页会多出一截滚动）\n   * @default 'xl'\n   */\n  bottom?: Space;\n  /**\n   * 最小高度：窗口太矮时整页滚动\n   * @default '24rem'\n   */\n  minHeight?: string;\n}\n\n/** ViewportFill 的样式：root */\nexport const viewportFillStyles = css.create({\n  root: { minWidth: 0 },\n});\n\n/** ViewportFill 的动态样式：高度 */\nexport const viewportFillDynamicStyles = css.create({\n  size: (top: number, bottom: string, min: string) => ({\n    height: `calc(100dvh - ${top}px - ${bottom})`,\n    minHeight: min,\n  }),\n});\n\n/** 占满到窗口底边 */\nexport const ViewportFill = _component(\n  ({ bottom = 'xl', minHeight = '24rem', sx, ...rest }: ViewportFillProps) => {\n    let element = _state.raw<HTMLElement | null>(null);\n    // 顶边在文档里的位置（不随滚动变）\n    let top = _state(0);\n    const measure = () => {\n      if (!element) return;\n      const next = Math.round(element.getBoundingClientRect().top + window.scrollY);\n      if (next !== top) top = next;\n    };\n    onMounted(measure);\n    useEventListener(() => window, 'resize', measure);\n    // 上面的内容变高（查询栏换行、提示出现）时文档的尺寸跟着变\n    useResizeObserver(() => (element ? document.body : null), measure);\n    return () => (\n      <Flex\n        {...rest}\n        direction=\"column\"\n        ref={(value: unknown) => (element = toElement(value))}\n        sx={[\n          viewportFillStyles.root,\n          viewportFillDynamicStyles.size(top, space[bottom], minHeight),\n          sx,\n        ]}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AAsCA,IAAa,qBAAqB,IAAI,OAAO,EAC3C,MAAM,EAAE,UAAU,EAAE,EACtB,CAAC;;AAGD,IAAa,4BAA4B,IAAI,OAAO,EAClD,OAAO,KAAa,QAAgB,SAAiB;CACnD,QAAQ,iBAAiB,IAAG,OAAQ,OAAM;CAC1C,WAAW;AACb,GACF,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SAA4E;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UAAhE,IAAI;CAAA,MAAA,YAAAA,aAAA,QAAA,aAAc,OAAO;CAAA,MAAA,KAAAA,aAAA,QAAA,IAAA;CAAA,MAAS,OAAIC,UAAA,QAAA,MAAA,IAAA;CAChD,IAAI,UAAOC,WAAkC,IAAI;CAEjD,IAAI,MAAGC,IAAU,CAAC;CAClB,MAAM,gBAAgB;EACpB,IAAI,CAAA,QAAA,OAAU;EACd,MAAM,OAAO,KAAK,MAAM,QAAA,MAAQ,sBAAsB,CAAC,CAAC,MAAM,OAAO,OAAO;EAC5E,IAAI,SAAI,IAAA,OAAU,IAAA,QAAM;CAC1B;CACA,UAAU,OAAO;CACjB,uBAAuB,QAAQ,UAAU,OAAO;CAEhD,wBAAyB,QAAA,QAAU,SAAS,OAAO,MAAO,OAAO;CACjE,aAAOC,YAAA,MAAAC,cAEC,MAAI;EAAA,aAAA;EAAA,OAAA,OAAA,OAAA,OAAA,MAEF,UAAoB,QAAA,QAAU,UAAU,KAAK;EAAE,MACjD;GACF,mBAAmB;GAAI,IAAA,KACvB,0BAA0B,YAAI;IAAA,IAAA;IAAM,MAAK,OAAA;IAAQ,UAAA;GAAA,GAAA,IAAA;GAAA,GAAA;EAAA;CAElD,CAAA,GAAA,IAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"ViewportFill.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/layout/ViewportFill.tsx"],"sourcesContent":["/**\n * 占满到窗口底边：从自己的顶边一直到视口底边（留出 bottom 的间距），里面竖排。列表页让表格正好占满一屏、\n * 在表格里滚动，分页贴着窗口底边；收件箱的左右分栏占满剩下的高度。\n *\n *   <ViewportFill gap=\"md\">\n *     <Toolbar />\n *     <DataTable propsRoot={{ sx: fillStyles.grow }} />     表格 flexGrow 撑满剩下的\n *     <Pagination />\n *   </ViewportFill>\n *\n * 顶边的位置量出来（上面的页头、页签、查询栏换行变高都跟着变），不用手算“视口高度减顶栏减内边距”。\n * 窗口太矮时不小于 minHeight，整页滚动。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted } from 'vue';\nimport { space } from '../config/theme/tokens';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { toElement } from '../utils/dom/element';\nimport { useEventListener } from '../utils/dom/event-listener';\nimport { Flex, type FlexProps } from './Flex';\nimport type { Space } from '../utils/style/styles';\n\n/** 未声明的属性落到 Flex（div）上 */\nexport interface ViewportFillProps extends Omit<FlexProps, 'direction'> {\n  /**\n   * 离视口底边留多少（与外壳正文 AppShell main 的内边距一致：留得比它少，整页会多出一截滚动）\n   * @default 'xl'\n   */\n  bottom?: Space;\n  /**\n   * 最小高度：窗口太矮时整页滚动\n   * @default '24rem'\n   */\n  minHeight?: string;\n}\n\n/** ViewportFill 的样式：root */\nexport const viewportFillStyles = css.create({\n  root: { minWidth: 0 },\n});\n\n/** ViewportFill 的动态样式：高度 */\nexport const viewportFillDynamicStyles = css.create({\n  size: (top: number, bottom: string, min: string) => ({\n    height: `calc(100dvh - ${top}px - ${bottom})`,\n    minHeight: min,\n  }),\n});\n\n/** 占满到窗口底边 */\nexport const ViewportFill = _component(\n  ({ bottom = 'xl', minHeight = '24rem', sx, ...rest }: ViewportFillProps) => {\n    let element = _state.raw<HTMLElement | null>(null);\n    // 顶边在文档里的位置（不随滚动变）\n    let top = _state(0);\n    const measure = () => {\n      if (!element) return;\n      const next = Math.round(element.getBoundingClientRect().top + window.scrollY);\n      if (next !== top) top = next;\n    };\n    onMounted(measure);\n    useEventListener(() => window, 'resize', measure);\n    // 上面的内容变高（查询栏换行、提示出现）时文档的尺寸跟着变\n    useResizeObserver(() => (element ? document.body : null), measure);\n    return () => (\n      <Flex\n        {...rest}\n        direction=\"column\"\n        ref={(value: unknown) => (element = toElement(value))}\n        sx={[\n          viewportFillStyles.root,\n          viewportFillDynamicStyles.size(top, space[bottom], minHeight),\n          sx,\n        ]}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AAsCA,IAAa,qBAAqB,IAAI,OAAO,EAC3C,MAAM,EAAE,UAAU,EAAE,EACtB,CAAC;;AAGD,IAAa,4BAA4B,IAAI,OAAO,EAClD,OAAO,KAAa,QAAgB,SAAiB;CACnD,QAAQ,iBAAiB,IAAG,OAAQ,OAAM;CAC1C,WAAW;AACb,GACF,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SAA4E;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UAAhE,IAAI;CAAA,MAAA,YAAAA,aAAA,QAAA,aAAc,OAAO;CAAA,MAAA,KAAAA,aAAA,QAAA,IAAA;CAAA,MAAS,OAAIC,UAAA,QAAA,MAAA,IAAA;CAChD,IAAI,UAAOC,WAAkC,IAAI;CAEjD,IAAI,MAAGC,IAAU,CAAC;CAClB,MAAM,gBAAgB;EACpB,IAAI,CAAA,QAAA,OAAU;EACd,MAAM,OAAO,KAAK,MAAM,QAAA,MAAQ,sBAAsB,CAAC,CAAC,MAAM,OAAO,OAAO;EAC5E,IAAI,SAAI,IAAA,OAAU,IAAA,QAAM;CAC1B;CACA,UAAU,OAAO;CACjB,uBAAuB,QAAQ,UAAU,OAAO;CAEhD,wBAAyB,QAAA,QAAU,SAAS,OAAO,MAAO,OAAO;CACjE,aAAOC,YAAA,MAAAC,cAEC,MAAI;EAAA,aAAA;EAAA,OAAA,OAAA,OAAA,OAAA,MAEF,UAAoB,QAAA,QAAU,UAAU,KAAK;EAAE,MACjD;GACF,mBAAmB;GAAI,IAAA,KACvB,0BAA0B,YAAI;IAAA,IAAA;IAAM,MAAK,OAAA;IAAQ,UAAA;GAAA,GAAA,IAAA;GAAA,GAAA;EAAA;CAElD,CAAA,GAAA,IAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/navigation/Breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type IconButtonProps } from '../base/IconButton';
 import { type IconData } from '../base/Icon';

package/dist/navigation/Breadcrumbs.js

@@ -8,7 +8,7 @@ import { FlexOrderedList } from "../layout/Flex.js";
 import { Menu as Menu$1, MenuItem, MenuLinkItem } from "../overlay/Menu.js";
 import { createVNode, isVNode } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ChevronRight, Ellipsis } from "@lucide/icons";
 //#region src/navigation/Breadcrumbs.tsx
 /**

package/dist/navigation/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","Menu"],"sources":["../../src/navigation/Breadcrumbs.tsx"],"sourcesContent":["/**\n * 面包屑（nav > ol）：当前页在站点层级里的位置。最后一项是当前页（aria-current=\"page\"，不是链接）。\n * 链接用 Link（站内链接经路由适配跳转），分隔符默认是 Lucide 的 ChevronRight，从右到左排版时翻转。\n *\n *   <Breadcrumbs items={[{ label: '首页', href: '/' }, { label: '订单', href: '/orders' }, { label: '#1024' }]} />\n *\n * 路径太长时用 maxItems 折叠中间部分：折叠处是一个菜单按钮，被折叠的各级在菜单里（链接菜单项），\n * 同 Radix Themes / shadcn 的做法；展开整条路径会把布局撑乱，菜单不会。\n *\n * 应用内的层级（文件夹、组织架构的下钻）没有地址：给 onNavigate 时没有 href 的各级是链接样式的按钮，\n * 点了交给它；当前一级标 aria-current=\"location\"（是“在哪一级”，不是“哪一页”）。\n *\n *   <Breadcrumbs items={path.map((dept) => ({ key: dept.id, label: dept.name }))} onNavigate={(_, index) => (path = path.slice(0, index + 1))} />\n */\nimport { ChevronRight, Ellipsis } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { Icon, type IconData } from '../base/Icon';\nimport { Link, type LinkProps } from '../base/Link';\nimport { useLang } from '../config/context';\nimport { Menu, MenuItem, MenuLinkItem, type MenuProps } from '../overlay/Menu';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { FlexOrderedList, type FlexProps } from '../layout/Flex';\n\n/** 一级路径 */\nexport interface BreadcrumbItem {\n  /** 唯一的 key；不写时用 href，再没有时用位置 */\n  key?: string;\n  /** 显示的文字 */\n  label: VNodeChild;\n  /** 地址；最后一项（当前页）不需要 */\n  href?: string;\n  /** 文字前的图标 */\n  icon?: IconData;\n}\n\n/** 未声明的属性落到 nav 上；aria-label 默认取语言包（面包屑） */\nexport interface BreadcrumbsProps extends PartProps<'nav'> {\n  /** 路径，从根到当前页；最后一项是当前页 */\n  items: readonly BreadcrumbItem[];\n  /** 分隔符，默认是右向的 chevron 图标 */\n  separator?: VNodeChild;\n  /** 超过这么多项时折叠中间部分（保留第一项与最后两项），被折叠的各级放进菜单 */\n  maxItems?: number;\n  /** 列表（ol）的部件属性 */\n  propsList?: Partial<FlexProps<'ol'>>;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: BreadcrumbItem, index: number) => PartProps<'li'>);\n  /** 折叠处那一项（li，里面是折叠按钮与菜单）的部件属性 */\n  propsCollapsedItem?: PartProps<'li'>;\n  /** 链接的部件属性 */\n  propsLink?: Partial<LinkProps>;\n  /** 每一项文字（图标加文字）的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 当前页（最后一项）的部件属性 */\n  propsCurrent?: PartProps<'span'>;\n  /** 分隔符的部件属性 */\n  propsSeparator?: PartProps<'span'>;\n  /** 折叠按钮（菜单的触发器）的部件属性 */\n  propsExpand?: Partial<IconButtonProps>;\n  /** 被折叠各级的菜单的部件属性 */\n  propsMenu?: Partial<MenuProps>;\n  /** 应用内的层级导航：给了时没有 href 的各级是按钮，点了调用它（index 是在 items 里的位置） */\n  onNavigate?: (item: BreadcrumbItem, index: number) => void;\n}\n\n/** Breadcrumbs 的样式：list、item、current、separator、label、expand */\nexport const breadcrumbsStyles = css.create({\n  // 横排、换行、间距由 FlexOrderedList 给\n  list: { fontSize: '_sm' },\n  item: { display: 'inline-flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n  current: { color: '_text', fontWeight: '_medium' },\n  separator: { display: 'inline-flex', color: '_textMuted' },\n  label: { display: 'inline-flex', alignItems: 'center', gap: '_xs' },\n  expand: { width: '1.75em', minHeight: '1.75em' },\n});\n\n/** 面包屑：链接 + 分隔符，最后一项是当前页 */\nexport const Breadcrumbs = _component(\n  ({\n    items,\n    separator,\n    maxItems,\n    propsList,\n    propsItem,\n    propsCollapsedItem,\n    propsLink,\n    propsLabel,\n    propsCurrent,\n    propsSeparator,\n    propsExpand,\n    propsMenu,\n    onNavigate,\n    ...rest\n  }: BreadcrumbsProps) => {\n    const lang = useLang();\n\n    return () => {\n      const collapse = maxItems != null && items.length > maxItems;\n      // 折叠时保留第一项与最后两项，中间换成展开按钮\n      const shown: (BreadcrumbItem | 'collapsed')[] = collapse\n        ? [items[0]!, 'collapsed', ...items.slice(-2)]\n        : [...items];\n      const last = items.length - 1;\n      // 每处各生成一个节点：同一个 VNode 不能放在多个位置\n      const sep = () => (\n        <span\n          {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.separator }, propsSeparator, {\n            'aria-hidden': true,\n          })}\n        >\n          {separator ?? <Icon icon={ChevronRight} flipInRtl />}\n        </span>\n      );\n\n      return (\n        <nav {...mergeAttrs<'nav'>({ 'aria-label': lang.breadcrumbs }, rest)}>\n          <FlexOrderedList\n            {...mergePartProps<FlexProps<'ol'>>(\n              { wrap: true, align: 'center', gap: 'xs', sx: breadcrumbsStyles.list },\n              propsList,\n            )}\n          >\n            {shown.map((entry, position) => {\n              if (entry === 'collapsed') {\n                return (\n                  <li\n                    key=\"collapsed\"\n                    {...mergeAttrs<'li'>({ sx: breadcrumbsStyles.item }, propsCollapsedItem)}\n                  >\n                    <Menu\n                      {...mergePartProps<MenuProps>(\n                        {\n                          // 被折叠的各级链接一直在 DOM 里：页内搜索、爬虫找得到；一页只有一个，不必延迟\n                          lazy: false,\n                          trigger: (props) => (\n                            <IconButton\n                              {...mergePartProps<IconButtonProps>(\n                                {\n                                  sx: breadcrumbsStyles.expand,\n                                  size: 'sm',\n                                  icon: Ellipsis,\n                                  'aria-label': lang.breadcrumbsExpand,\n                                },\n                                propsExpand,\n                                props,\n                              )}\n                            />\n                          ),\n                        },\n                        propsMenu,\n                      )}\n                    >\n                      {items.slice(1, -2).map((hidden, offset) =>\n                        hidden.href != null ? (\n                          <MenuLinkItem key={offset} href={hidden.href} icon={hidden.icon}>\n                            {hidden.label}\n                          </MenuLinkItem>\n                        ) : (\n                          <MenuItem\n                            key={offset}\n                            icon={hidden.icon}\n                            disabled={!onNavigate}\n                            onAction={() => onNavigate?.(hidden, offset + 1)}\n                          >\n                            {hidden.label}\n                          </MenuItem>\n                        ),\n                      )}\n                    </Menu>\n                    {sep()}\n                  </li>\n                );\n              }\n              const index = items.indexOf(entry);\n              const own = typeof propsItem === 'function' ? propsItem(entry, index) : propsItem;\n              const label = (\n                <span {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.label }, propsLabel)}>\n                  {entry.icon && <Icon icon={entry.icon} />}\n                  {entry.label}\n                </span>\n              );\n              return (\n                <li\n                  key={entry.key ?? entry.href ?? index}\n                  {...mergeAttrs<'li'>({ sx: breadcrumbsStyles.item }, own)}\n                >\n                  {index === last ? (\n                    <span\n                      {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.current }, propsCurrent, {\n                        'aria-current': onNavigate ? 'location' : 'page',\n                      })}\n                    >\n                      {label}\n                    </span>\n                  ) : entry.href != null ? (\n                    <Link\n                      {...mergePartProps<LinkProps>(\n                        { tone: 'muted', underline: 'hover', href: entry.href },\n                        propsLink,\n                      )}\n                    >\n                      {label}\n                    </Link>\n                  ) : onNavigate ? (\n                    <Button variant=\"link\" onClick={() => onNavigate(entry, index)}>\n                      {label}\n                    </Button>\n                  ) : (\n                    label\n                  )}\n                  {position < shown.length - 1 && sep()}\n                </li>\n              );\n            })}\n          </FlexOrderedList>\n        </nav>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","Menu"],"sources":["../../src/navigation/Breadcrumbs.tsx"],"sourcesContent":["/**\n * 面包屑（nav > ol）：当前页在站点层级里的位置。最后一项是当前页（aria-current=\"page\"，不是链接）。\n * 链接用 Link（站内链接经路由适配跳转），分隔符默认是 Lucide 的 ChevronRight，从右到左排版时翻转。\n *\n *   <Breadcrumbs items={[{ label: '首页', href: '/' }, { label: '订单', href: '/orders' }, { label: '#1024' }]} />\n *\n * 路径太长时用 maxItems 折叠中间部分：折叠处是一个菜单按钮，被折叠的各级在菜单里（链接菜单项），\n * 同 Radix Themes / shadcn 的做法；展开整条路径会把布局撑乱，菜单不会。\n *\n * 应用内的层级（文件夹、组织架构的下钻）没有地址：给 onNavigate 时没有 href 的各级是链接样式的按钮，\n * 点了交给它；当前一级标 aria-current=\"location\"（是“在哪一级”，不是“哪一页”）。\n *\n *   <Breadcrumbs items={path.map((dept) => ({ key: dept.id, label: dept.name }))} onNavigate={(_, index) => (path = path.slice(0, index + 1))} />\n */\nimport { ChevronRight, Ellipsis } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { Icon, type IconData } from '../base/Icon';\nimport { Link, type LinkProps } from '../base/Link';\nimport { useLang } from '../config/context';\nimport { Menu, MenuItem, MenuLinkItem, type MenuProps } from '../overlay/Menu';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { FlexOrderedList, type FlexProps } from '../layout/Flex';\n\n/** 一级路径 */\nexport interface BreadcrumbItem {\n  /** 唯一的 key；不写时用 href，再没有时用位置 */\n  key?: string;\n  /** 显示的文字 */\n  label: VNodeChild;\n  /** 地址；最后一项（当前页）不需要 */\n  href?: string;\n  /** 文字前的图标 */\n  icon?: IconData;\n}\n\n/** 未声明的属性落到 nav 上；aria-label 默认取语言包（面包屑） */\nexport interface BreadcrumbsProps extends PartProps<'nav'> {\n  /** 路径，从根到当前页；最后一项是当前页 */\n  items: readonly BreadcrumbItem[];\n  /** 分隔符，默认是右向的 chevron 图标 */\n  separator?: VNodeChild;\n  /** 超过这么多项时折叠中间部分（保留第一项与最后两项），被折叠的各级放进菜单 */\n  maxItems?: number;\n  /** 列表（ol）的部件属性 */\n  propsList?: Partial<FlexProps<'ol'>>;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: BreadcrumbItem, index: number) => PartProps<'li'>);\n  /** 折叠处那一项（li，里面是折叠按钮与菜单）的部件属性 */\n  propsCollapsedItem?: PartProps<'li'>;\n  /** 链接的部件属性 */\n  propsLink?: Partial<LinkProps>;\n  /** 每一项文字（图标加文字）的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 当前页（最后一项）的部件属性 */\n  propsCurrent?: PartProps<'span'>;\n  /** 分隔符的部件属性 */\n  propsSeparator?: PartProps<'span'>;\n  /** 折叠按钮（菜单的触发器）的部件属性 */\n  propsExpand?: Partial<IconButtonProps>;\n  /** 被折叠各级的菜单的部件属性 */\n  propsMenu?: Partial<MenuProps>;\n  /** 应用内的层级导航：给了时没有 href 的各级是按钮，点了调用它（index 是在 items 里的位置） */\n  onNavigate?: (item: BreadcrumbItem, index: number) => void;\n}\n\n/** Breadcrumbs 的样式：list、item、current、separator、label、expand */\nexport const breadcrumbsStyles = css.create({\n  // 横排、换行、间距由 FlexOrderedList 给\n  list: { fontSize: '_sm' },\n  item: { display: 'inline-flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n  current: { color: '_text', fontWeight: '_medium' },\n  separator: { display: 'inline-flex', color: '_textMuted' },\n  label: { display: 'inline-flex', alignItems: 'center', gap: '_xs' },\n  expand: { width: '1.75em', minHeight: '1.75em' },\n});\n\n/** 面包屑：链接 + 分隔符，最后一项是当前页 */\nexport const Breadcrumbs = _component(\n  ({\n    items,\n    separator,\n    maxItems,\n    propsList,\n    propsItem,\n    propsCollapsedItem,\n    propsLink,\n    propsLabel,\n    propsCurrent,\n    propsSeparator,\n    propsExpand,\n    propsMenu,\n    onNavigate,\n    ...rest\n  }: BreadcrumbsProps) => {\n    const lang = useLang();\n\n    return () => {\n      const collapse = maxItems != null && items.length > maxItems;\n      // 折叠时保留第一项与最后两项，中间换成展开按钮\n      const shown: (BreadcrumbItem | 'collapsed')[] = collapse\n        ? [items[0]!, 'collapsed', ...items.slice(-2)]\n        : [...items];\n      const last = items.length - 1;\n      // 每处各生成一个节点：同一个 VNode 不能放在多个位置\n      const sep = () => (\n        <span\n          {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.separator }, propsSeparator, {\n            'aria-hidden': true,\n          })}\n        >\n          {separator ?? <Icon icon={ChevronRight} flipInRtl />}\n        </span>\n      );\n\n      return (\n        <nav {...mergeAttrs<'nav'>({ 'aria-label': lang.breadcrumbs }, rest)}>\n          <FlexOrderedList\n            {...mergePartProps<FlexProps<'ol'>>(\n              { wrap: true, align: 'center', gap: 'xs', sx: breadcrumbsStyles.list },\n              propsList,\n            )}\n          >\n            {shown.map((entry, position) => {\n              if (entry === 'collapsed') {\n                return (\n                  <li\n                    key=\"collapsed\"\n                    {...mergeAttrs<'li'>({ sx: breadcrumbsStyles.item }, propsCollapsedItem)}\n                  >\n                    <Menu\n                      {...mergePartProps<MenuProps>(\n                        {\n                          // 被折叠的各级链接一直在 DOM 里：页内搜索、爬虫找得到；一页只有一个，不必延迟\n                          lazy: false,\n                          trigger: (props) => (\n                            <IconButton\n                              {...mergePartProps<IconButtonProps>(\n                                {\n                                  sx: breadcrumbsStyles.expand,\n                                  size: 'sm',\n                                  icon: Ellipsis,\n                                  'aria-label': lang.breadcrumbsExpand,\n                                },\n                                propsExpand,\n                                props,\n                              )}\n                            />\n                          ),\n                        },\n                        propsMenu,\n                      )}\n                    >\n                      {items.slice(1, -2).map((hidden, offset) =>\n                        hidden.href != null ? (\n                          <MenuLinkItem key={offset} href={hidden.href} icon={hidden.icon}>\n                            {hidden.label}\n                          </MenuLinkItem>\n                        ) : (\n                          <MenuItem\n                            key={offset}\n                            icon={hidden.icon}\n                            disabled={!onNavigate}\n                            onAction={() => onNavigate?.(hidden, offset + 1)}\n                          >\n                            {hidden.label}\n                          </MenuItem>\n                        ),\n                      )}\n                    </Menu>\n                    {sep()}\n                  </li>\n                );\n              }\n              const index = items.indexOf(entry);\n              const own = typeof propsItem === 'function' ? propsItem(entry, index) : propsItem;\n              const label = (\n                <span {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.label }, propsLabel)}>\n                  {entry.icon && <Icon icon={entry.icon} />}\n                  {entry.label}\n                </span>\n              );\n              return (\n                <li\n                  key={entry.key ?? entry.href ?? index}\n                  {...mergeAttrs<'li'>({ sx: breadcrumbsStyles.item }, own)}\n                >\n                  {index === last ? (\n                    <span\n                      {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.current }, propsCurrent, {\n                        'aria-current': onNavigate ? 'location' : 'page',\n                      })}\n                    >\n                      {label}\n                    </span>\n                  ) : entry.href != null ? (\n                    <Link\n                      {...mergePartProps<LinkProps>(\n                        { tone: 'muted', underline: 'hover', href: entry.href },\n                        propsLink,\n                      )}\n                    >\n                      {label}\n                    </Link>\n                  ) : onNavigate ? (\n                    <Button variant=\"link\" onClick={() => onNavigate(entry, index)}>\n                      {label}\n                    </Button>\n                  ) : (\n                    label\n                  )}\n                  {position < shown.length - 1 && sep()}\n                </li>\n              );\n            })}\n          </FlexOrderedList>\n        </nav>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/navigation/NavBar.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type IconData } from '../base/Icon';
 import { type PartProps } from '../utils/props';
 /** 横向导航的一项：有 href 是链接，有 children 是下拉菜单（一层） */

package/dist/navigation/NavBar.js

@@ -10,7 +10,7 @@ import { Menu as Menu$1, MenuGroup, MenuLinkItem } from "../overlay/Menu.js";
 import { useOverflowItems } from "../utils/dom/overflow.js";
 import { createVNode, isVNode, shallowRef } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ChevronDown, Ellipsis } from "@lucide/icons";
 //#region src/navigation/NavBar.tsx
 /**

package/dist/navigation/NavBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","Menu","_mergeProps"],"sources":["../../src/navigation/NavBar.tsx"],"sourcesContent":["/**\n * 横向导航（顶部菜单）：一行链接，有子项的是下拉菜单；放不下时后面的收进“更多”菜单。后台的顶栏、门户的主导航。\n * 参考 Ant Design Menu 的 horizontal 模式（溢出收进“…”）。侧边的多级导航用 NavList。\n *\n *   <NavBar\n *     items={[\n *       { label: '工作台', href: '/' },\n *       { label: '采购', children: [{ label: '采购单', href: '/po' }, { label: '供应商', href: '/suppliers' }] },\n *       { label: '报表', href: '/reports', badge: 3 },\n *     ]}\n *     aria-label=\"主导航\"\n *   />\n *\n * - 当前页按路由适配的 isActive 判断（同 NavList），链接带 aria-current=\"page\" 与下划线；子项是当前页时它的菜单按钮也高亮。\n * - 下拉菜单是 Menu（↑↓ 移动、Esc 关闭回到按钮），菜单项是链接（MenuLinkItem）。\n * - 放不下：useOverflowItems 量出前几项，其余收进“更多”（菜单里有子项的项按分组列出）；藏起来的项不占位、读屏与 Tab 跳过。\n *\n * 部件：Root（nav）、List（ul）、Item（li）、Link（a）、Trigger（有子项时的按钮）、More（“更多”按钮）。\n */\nimport { ChevronDown, Ellipsis } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Badge } from '../base/Badge';\nimport { ButtonBase } from '../base/ButtonBase';\nimport { Icon, type IconData } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Menu, MenuGroup, MenuLinkItem } from '../overlay/Menu';\nimport { useRouterLink } from '../utils/dom/link';\nimport { useOverflowItems } from '../utils/dom/overflow';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 横向导航的一项：有 href 是链接，有 children 是下拉菜单（一层） */\nexport interface NavBarItem {\n  /** 文字 */\n  label: string;\n  /** 链接地址 */\n  href?: string;\n  /** 文字前的图标 */\n  icon?: IconData;\n  /** 下拉菜单里的子项 */\n  children?: readonly NavBarItem[];\n  /** 计数角标（待办、未读），0 不显示 */\n  badge?: number;\n  /** 不可用 */\n  disabled?: boolean;\n}\n\n/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */\nexport interface NavBarProps extends PartProps<'nav'> {\n  /** 各项 */\n  items: readonly NavBarItem[];\n  /** 列表（ul）的部件属性 */\n  propsList?: PartProps<'ul'>;\n}\n\n/** NavBar 的样式：list、item、link、current、badge、more */\nexport const navBarStyles = css.create({\n  // 一行：放不下的项由 useOverflowItems 移出排版（容器要 position: relative，间距用 column-gap）\n  list: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'stretch',\n    columnGap: '_xs',\n    minWidth: 0,\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  item: { display: 'flex', flexShrink: 0 },\n  link: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_xs',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    paddingInline: '_md',\n    borderRadius: '_md',\n    color: { default: '_textMuted', ':hover': '_text' },\n    fontWeight: '_medium',\n    whiteSpace: 'nowrap',\n    textDecoration: 'none',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n    // 当前页的下划线画在底边（与 Tabs 的下划线同色）\n    boxShadow: 'none',\n    transition: `color ${t.durations.sm} ${t.easings.standard}, background-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  current: {\n    color: { default: '_accentText', ':hover': '_accentText' },\n    boxShadow: `inset 0 calc(-1 * ${t.borderWidths.sm}) 0 ${t.colors.accent}`,\n    borderEndStartRadius: 0,\n    borderEndEndRadius: 0,\n  },\n  disabled: { opacity: '_disabled', pointerEvents: 'none' },\n});\n\n/** 子项里有没有当前页 */\nconst hasActive = (item: NavBarItem, isActive: (href: string) => boolean): boolean =>\n  (item.href != null && isActive(item.href)) ||\n  (item.children ?? []).some((child) => hasActive(child, isActive));\n\n/** 横向导航：一行链接与下拉菜单，放不下的收进“更多” */\nexport const NavBar = _component(({ items, propsList, ...rest }: NavBarProps) => {\n  const lang = useLang();\n  const router = useRouterLink();\n  let list = _state.raw<HTMLElement | null>(null);\n  const overflow = useOverflowItems({ container: () => list, count: () => items.length });\n\n  const badge = (count = 0) =>\n    count > 0 && (\n      <Badge size=\"xs\" variant=\"solid\" tone=\"danger\" radius=\"full\">\n        {count > 99 ? '99+' : count}\n      </Badge>\n    );\n\n  /** 菜单里的链接（下拉菜单、“更多”菜单共用） */\n  const menuLinks = (children: readonly NavBarItem[]) =>\n    children.map((child) => (\n      <MenuLinkItem\n        key={child.href ?? child.label}\n        href={child.href ?? ''}\n        icon={child.icon}\n        disabled={child.disabled}\n        aria-current={child.href && router.isActive(child.href) ? 'page' : undefined}\n      >\n        {child.label}\n      </MenuLinkItem>\n    ));\n\n  function renderItem(item: NavBarItem) {\n    const current = hasActive(item, router.isActive);\n    const sx = [\n      navBarStyles.link,\n      focusRingStyles.visible,\n      current && navBarStyles.current,\n      item.disabled && navBarStyles.disabled,\n    ];\n    const content = [item.icon && <Icon icon={item.icon} />, item.label, badge(item.badge)];\n    if (item.children?.length) {\n      return (\n        <Menu\n          trigger={(props) => (\n            <ButtonBase\n              {...props}\n              sx={sx}\n              disabled={item.disabled}\n              data-state={current ? 'active' : 'inactive'}\n            >\n              {content}\n              <Icon icon={ChevronDown} />\n            </ButtonBase>\n          )}\n        >\n          {menuLinks(item.children)}\n        </Menu>\n      );\n    }\n    return (\n      <a\n        {...css.attrs(...sx)}\n        href={item.disabled || item.href == null ? undefined : router.href(item.href)}\n        aria-current={current ? 'page' : undefined}\n        aria-disabled={item.disabled || undefined}\n        data-state={current ? 'active' : 'inactive'}\n        onClick={(event: MouseEvent) => item.href && router.onClick(event, item.href)}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  /** “更多”菜单：收起来的各项，有子项的按分组列出 */\n  function renderMore() {\n    const hidden = items.slice(overflow.visible);\n    const current = hidden.some((item) => hasActive(item, router.isActive));\n    return (\n      <Menu\n        placement=\"bottom-end\"\n        trigger={(props) => (\n          <ButtonBase\n            {...props}\n            sx={[navBarStyles.link, focusRingStyles.visible, current && navBarStyles.current]}\n            aria-label={lang.navBarMore}\n          >\n            <Icon icon={Ellipsis} />\n          </ButtonBase>\n        )}\n      >\n        {hidden.map((item) =>\n          item.children?.length ? (\n            <MenuGroup key={item.label} label={item.label}>\n              {menuLinks(item.children)}\n            </MenuGroup>\n          ) : (\n            menuLinks([item])\n          ),\n        )}\n      </Menu>\n    );\n  }\n\n  return () => (\n    <nav {...mergeAttrs<'nav'>({}, rest)}>\n      <ul {...mergeAttrs<'ul'>({ sx: navBarStyles.list }, propsList, { ref: _toRef(list) })}>\n        {items.map((item, index) => (\n          <li\n            key={item.href ?? item.label}\n            {...css.attrs(navBarStyles.item)}\n            {...overflow.itemProps(index)}\n          >\n            {renderItem(item)}\n          </li>\n        ))}\n        <li {...css.attrs(navBarStyles.item)} {...overflow.restProps()}>\n          {renderMore()}\n        </li>\n      </ul>\n    </nav>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"NavBar.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","Menu","_mergeProps"],"sources":["../../src/navigation/NavBar.tsx"],"sourcesContent":["/**\n * 横向导航（顶部菜单）：一行链接，有子项的是下拉菜单；放不下时后面的收进“更多”菜单。后台的顶栏、门户的主导航。\n * 参考 Ant Design Menu 的 horizontal 模式（溢出收进“…”）。侧边的多级导航用 NavList。\n *\n *   <NavBar\n *     items={[\n *       { label: '工作台', href: '/' },\n *       { label: '采购', children: [{ label: '采购单', href: '/po' }, { label: '供应商', href: '/suppliers' }] },\n *       { label: '报表', href: '/reports', badge: 3 },\n *     ]}\n *     aria-label=\"主导航\"\n *   />\n *\n * - 当前页按路由适配的 isActive 判断（同 NavList），链接带 aria-current=\"page\" 与下划线；子项是当前页时它的菜单按钮也高亮。\n * - 下拉菜单是 Menu（↑↓ 移动、Esc 关闭回到按钮），菜单项是链接（MenuLinkItem）。\n * - 放不下：useOverflowItems 量出前几项，其余收进“更多”（菜单里有子项的项按分组列出）；藏起来的项不占位、读屏与 Tab 跳过。\n *\n * 部件：Root（nav）、List（ul）、Item（li）、Link（a）、Trigger（有子项时的按钮）、More（“更多”按钮）。\n */\nimport { ChevronDown, Ellipsis } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Badge } from '../base/Badge';\nimport { ButtonBase } from '../base/ButtonBase';\nimport { Icon, type IconData } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Menu, MenuGroup, MenuLinkItem } from '../overlay/Menu';\nimport { useRouterLink } from '../utils/dom/link';\nimport { useOverflowItems } from '../utils/dom/overflow';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 横向导航的一项：有 href 是链接，有 children 是下拉菜单（一层） */\nexport interface NavBarItem {\n  /** 文字 */\n  label: string;\n  /** 链接地址 */\n  href?: string;\n  /** 文字前的图标 */\n  icon?: IconData;\n  /** 下拉菜单里的子项 */\n  children?: readonly NavBarItem[];\n  /** 计数角标（待办、未读），0 不显示 */\n  badge?: number;\n  /** 不可用 */\n  disabled?: boolean;\n}\n\n/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */\nexport interface NavBarProps extends PartProps<'nav'> {\n  /** 各项 */\n  items: readonly NavBarItem[];\n  /** 列表（ul）的部件属性 */\n  propsList?: PartProps<'ul'>;\n}\n\n/** NavBar 的样式：list、item、link、current、badge、more */\nexport const navBarStyles = css.create({\n  // 一行：放不下的项由 useOverflowItems 移出排版（容器要 position: relative，间距用 column-gap）\n  list: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'stretch',\n    columnGap: '_xs',\n    minWidth: 0,\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  item: { display: 'flex', flexShrink: 0 },\n  link: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_xs',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    paddingInline: '_md',\n    borderRadius: '_md',\n    color: { default: '_textMuted', ':hover': '_text' },\n    fontWeight: '_medium',\n    whiteSpace: 'nowrap',\n    textDecoration: 'none',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n    // 当前页的下划线画在底边（与 Tabs 的下划线同色）\n    boxShadow: 'none',\n    transition: `color ${t.durations.sm} ${t.easings.standard}, background-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  current: {\n    color: { default: '_accentText', ':hover': '_accentText' },\n    boxShadow: `inset 0 calc(-1 * ${t.borderWidths.sm}) 0 ${t.colors.accent}`,\n    borderEndStartRadius: 0,\n    borderEndEndRadius: 0,\n  },\n  disabled: { opacity: '_disabled', pointerEvents: 'none' },\n});\n\n/** 子项里有没有当前页 */\nconst hasActive = (item: NavBarItem, isActive: (href: string) => boolean): boolean =>\n  (item.href != null && isActive(item.href)) ||\n  (item.children ?? []).some((child) => hasActive(child, isActive));\n\n/** 横向导航：一行链接与下拉菜单，放不下的收进“更多” */\nexport const NavBar = _component(({ items, propsList, ...rest }: NavBarProps) => {\n  const lang = useLang();\n  const router = useRouterLink();\n  let list = _state.raw<HTMLElement | null>(null);\n  const overflow = useOverflowItems({ container: () => list, count: () => items.length });\n\n  const badge = (count = 0) =>\n    count > 0 && (\n      <Badge size=\"xs\" variant=\"solid\" tone=\"danger\" radius=\"full\">\n        {count > 99 ? '99+' : count}\n      </Badge>\n    );\n\n  /** 菜单里的链接（下拉菜单、“更多”菜单共用） */\n  const menuLinks = (children: readonly NavBarItem[]) =>\n    children.map((child) => (\n      <MenuLinkItem\n        key={child.href ?? child.label}\n        href={child.href ?? ''}\n        icon={child.icon}\n        disabled={child.disabled}\n        aria-current={child.href && router.isActive(child.href) ? 'page' : undefined}\n      >\n        {child.label}\n      </MenuLinkItem>\n    ));\n\n  function renderItem(item: NavBarItem) {\n    const current = hasActive(item, router.isActive);\n    const sx = [\n      navBarStyles.link,\n      focusRingStyles.visible,\n      current && navBarStyles.current,\n      item.disabled && navBarStyles.disabled,\n    ];\n    const content = [item.icon && <Icon icon={item.icon} />, item.label, badge(item.badge)];\n    if (item.children?.length) {\n      return (\n        <Menu\n          trigger={(props) => (\n            <ButtonBase\n              {...props}\n              sx={sx}\n              disabled={item.disabled}\n              data-state={current ? 'active' : 'inactive'}\n            >\n              {content}\n              <Icon icon={ChevronDown} />\n            </ButtonBase>\n          )}\n        >\n          {menuLinks(item.children)}\n        </Menu>\n      );\n    }\n    return (\n      <a\n        {...css.attrs(...sx)}\n        href={item.disabled || item.href == null ? undefined : router.href(item.href)}\n        aria-current={current ? 'page' : undefined}\n        aria-disabled={item.disabled || undefined}\n        data-state={current ? 'active' : 'inactive'}\n        onClick={(event: MouseEvent) => item.href && router.onClick(event, item.href)}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  /** “更多”菜单：收起来的各项，有子项的按分组列出 */\n  function renderMore() {\n    const hidden = items.slice(overflow.visible);\n    const current = hidden.some((item) => hasActive(item, router.isActive));\n    return (\n      <Menu\n        placement=\"bottom-end\"\n        trigger={(props) => (\n          <ButtonBase\n            {...props}\n            sx={[navBarStyles.link, focusRingStyles.visible, current && navBarStyles.current]}\n            aria-label={lang.navBarMore}\n          >\n            <Icon icon={Ellipsis} />\n          </ButtonBase>\n        )}\n      >\n        {hidden.map((item) =>\n          item.children?.length ? (\n            <MenuGroup key={item.label} label={item.label}>\n              {menuLinks(item.children)}\n            </MenuGroup>\n          ) : (\n            menuLinks([item])\n          ),\n        )}\n      </Menu>\n    );\n  }\n\n  return () => (\n    <nav {...mergeAttrs<'nav'>({}, rest)}>\n      <ul {...mergeAttrs<'ul'>({ sx: navBarStyles.list }, propsList, { ref: _toRef(list) })}>\n        {items.map((item, index) => (\n          <li\n            key={item.href ?? item.label}\n            {...css.attrs(navBarStyles.item)}\n            {...overflow.itemProps(index)}\n          >\n            {renderItem(item)}\n          </li>\n        ))}\n        <li {...css.attrs(navBarStyles.item)} {...overflow.restProps()}>\n          {renderMore()}\n        </li>\n      </ul>\n    </nav>\n  );\n});\n"],"mappings":"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"}

package/dist/navigation/NavList.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type VNodeChild } from 'vue';
 import { type ButtonBaseProps } from '../base/ButtonBase';
 import { type IconData, type IconProps } from '../base/Icon';

package/dist/navigation/NavList.js

@@ -16,7 +16,7 @@ import { itemStyles } from "../utils/style/item-styles.js";
 import { HoverCard } from "../overlay/HoverCard.js";
 import { Fragment, computed, createVNode, isVNode, onBeforeUnmount, ref, useId, watch } from "vue";
 import { _component, bindable, childrenProp, childrenStable, createContext, forwardChildren, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ChevronRight } from "@lucide/icons";
 //#region src/navigation/NavList.tsx
 /**