@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/patterns/AppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vtp_untrack","_vue_shallowRef","_createVNode","MenuIcon","_mergeProps","_vue_unref"],"sources":["../../src/patterns/AppShell.tsx"],"sourcesContent":["/**\n * 应用外壳：粘性顶栏、左侧栏（导航）、正文、右侧栏（本页目录），文档站与后台的整页骨架。\n *\n *   <AppShell\n *     brand={<AppShellBrand href=\"/\" icon={Boxes}>采购管理平台</AppShellBrand>}\n *     header={<><CommandPalette … /><ThemeSwitcher preference={preference} /></>}\n *     sidebar={<NavList aria-label=\"文档\">…</NavList>}\n *     aside={<TableOfContents items={headings} />}\n *   >\n *     <Prose>…</Prose>\n *   </AppShell>\n *\n * 响应式（宽度按容器档位 sizes.lg / sizes.xl）：\n * - 64rem 以上显示左侧栏；更窄时收进从起始边滑出的 Drawer，顶栏最前面出现打开它的按钮。\n *   抽屉里点了链接（换页）、或窗口变宽时自动关闭。\n * - 80rem 以上显示右侧栏；更窄时不显示（目录这类辅助内容）。\n * 两侧栏粘在顶栏下面，内容多时各自滚动（ScrollArea）。顶栏半透明，滚动的正文从下面透出（backdrop-filter）。\n * 整页与两侧栏都是浮层滚动条（PageScrollbar、ScrollArea）：不占宽度，滚动时出现。\n *\n * 写了 brand 时，侧栏常驻的宽度下品牌这一格与侧栏同宽，侧栏的竖线一直延伸到顶栏顶端，\n * header 的内容从竖线之后开始、与正文的起始边对齐（本页的页签放在这里）。\n *\n * sidebarMode=\"overlay\"：侧栏改为盖在页面上面的抽屉，开不开都不占正文的位置（正文总是整宽，布局不随侧栏变化）。\n * “菜单”按钮固定在顶栏品牌格的结束边，开关都是它（aria-expanded）；抽屉从顶栏下面弹出、盖在正文上。\n * 抽屉结束边可以拖动调整宽度（ResizeHandle，也能聚焦后用 ← / →，双击回到初始宽度），父级写 _sidebarWidth={x} 记住；\n * 顶栏的品牌格按初始宽度，拖动时不变。焦点在抽屉里时按 Esc 收起、焦点回到“菜单”；窄屏时点了链接也收起。\n * 拖到比 160px 窄时侧栏变紧凑：里面的 NavList 只显示图标（名称在提示里），小节标题只剩图标（NavCompactContext）。\n *\n * 品牌格里一般放 AppShellBrand：品牌色的标志与产品名，点了回首页；自己的标志图写在它的 logo 里。\n *\n * 几种布局与区域：\n * - nav：顶栏里品牌后面的导航（NavBar）。只有 nav 时是顶部导航布局，和 sidebar 一起时是混合布局（顶栏一级、侧栏二级）。\n * - tabs：正文上面的页签区（PageTabs，和路由同步用 useRouteTabs）；footer：正文下面的页脚，内容少时也贴着底部。\n * - sidebarCollapsible：docked 侧栏底部有“收起侧栏”，收起后只剩图标栏（宽屏时；导航变紧凑、分组悬停弹出，\n *   品牌格只剩标志），父级写 _sidebarCollapsed={x} 记住。\n *\n * 自带 SkipLink（跳到正文）；顶栏的高度经 layoutVars.stickyOffset 交给里面的标题，锚点跳转后不被顶栏挡住。\n */\nimport { Menu as MenuIcon, PanelLeftClose, PanelLeftOpen } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, watch, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { useMessages } from '../config/lang/messages';\nimport { patternsMessages } from './messages';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { NavCompactContext } from '../navigation/NavList';\nimport { SkipLink } from '../navigation/SkipLink';\nimport { PageScrollbar } from '../layout/PageScrollbar';\nimport { ResizeHandle, type ResizeHandleProps } from '../layout/ResizeHandle';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { Drawer, type DrawerProps } from '../overlay/Drawer';\nimport { useMediaQuery } from '../utils/dom/media-query';\nimport { toElement } from '../utils/dom/element';\nimport { useRouterLink } from '../utils/dom/link';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { breakpoints, t } from '../config/theme/tokens';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { layoutVars } from '../utils/style/vars';\n\n/** 顶栏高度：也是两侧栏粘住的位置、标题跳转时让开的距离 */\nconst HEADER_HEIGHT = '3rem';\n/** 左侧栏的宽度：顶栏的品牌格与它同宽 */\nconst SIDEBAR_WIDTH = '16rem';\n/** 侧栏收起成图标栏时的宽度 */\nconst RAIL_WIDTH = '3.5rem';\n/** 抽屉式侧栏的默认宽度与可以拖动的范围（px） */\nconst OVERLAY_WIDTH = 256;\n// 最窄可以收到只剩滚动条那么宽\nconst OVERLAY_MIN_WIDTH = 16;\nconst OVERLAY_MAX_WIDTH = 480;\n// 比它窄时侧栏只放得下图标：导航变紧凑\nconst OVERLAY_COMPACT_WIDTH = 160;\n// 运行时判断侧栏是否常驻（useMediaQuery 要的是不带 @media 的查询）\nconst WIDE_QUERY = breakpoints.lg.replace('@media ', '');\n\n/** 左侧栏的形式 */\nexport interface AppShellSidebarModes {\n  /** 宽屏时占一列、窄屏时收进抽屉（默认） */\n  docked: unknown;\n  /** 各宽度都是盖在页面上面的抽屉，不占正文的位置，可以收起、拖动宽度 */\n  overlay: unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface AppShellProps extends PartProps<'div'> {\n  /** 顶栏起始边的品牌（标志与产品名）：有侧栏时这一格与侧栏同宽，侧栏的竖线延伸到顶 */\n  brand?: VNodeChild;\n  /** 顶栏的内容：搜索、本页的页签、主题切换…（没写 brand 时标志也放这里） */\n  header?: VNodeChild;\n  /** 左侧栏：站点导航；窄屏时收进抽屉 */\n  sidebar?: VNodeChild;\n  /** 右侧栏：本页目录等辅助内容；较窄时不显示 */\n  aside?: VNodeChild;\n  /** 顶栏里品牌后面的导航（NavBar）：只有它时是顶部导航布局，和 sidebar 一起时是混合布局（顶栏一级、侧栏二级） */\n  nav?: VNodeChild;\n  /** 正文上面的页签区（PageTabs：打开过的页面） */\n  tabs?: VNodeChild;\n  /** 正文下面的页脚（版权、备案号、版本） */\n  footer?: VNodeChild;\n  /** docked 侧栏底部有“收起侧栏”按钮：收起后只剩图标栏（导航变紧凑，分组的子项悬停弹出） */\n  sidebarCollapsible?: boolean;\n  /** docked 侧栏收起了：父级可以写 _sidebarCollapsed={x} 记住 */\n  _sidebarCollapsed?: boolean;\n  /** 左侧栏的形式，默认 docked */\n  sidebarMode?: keyof AppShellSidebarModes;\n  /** 侧栏抽屉是否打开（docked 时只在窄屏有抽屉）：父级可以写 _sidebarOpen={x} */\n  _sidebarOpen?: boolean;\n  /**\n   * overlay 抽屉的宽度（px），默认 256，范围 16–480（窄到几乎只剩滚动条；比 160 窄时导航只显示图标）：\n   * 父级写 _sidebarWidth={x} 记住拖动后的宽度\n   */\n  _sidebarWidth?: number;\n  /** 页面最前面的“跳到正文”链接，默认 true */\n  skipLink?: boolean;\n  /** 整页用浮层滚动条（PageScrollbar：不占宽度，滚动时出现），默认 true */\n  pageScrollbar?: boolean;\n  /** 顶栏（header）的部件属性 */\n  propsHeader?: PartProps<'header'>;\n  /** 品牌格（div）的部件属性 */\n  propsBrand?: PartProps<'div'>;\n  /** 顶栏里 header 内容那一格（div）的部件属性 */\n  propsHeaderContent?: PartProps<'div'>;\n  /** 顶栏下面的主体（侧栏、正文、右栏的栅格）的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 左侧栏（div）的部件属性 */\n  propsSidebar?: PartProps<'div'>;\n  /** 左侧栏里的滚动区域的部件属性（docked 的侧栏与 overlay 的抽屉共用） */\n  propsSidebarScroll?: Partial<ScrollAreaProps>;\n  /** 正文（main）的部件属性 */\n  propsMain?: PartProps<'main'>;\n  /** 顶栏里导航那一格的部件属性 */\n  propsNav?: PartProps<'div'>;\n  /** 页签区的部件属性 */\n  propsTabs?: PartProps<'div'>;\n  /** 页脚（footer）的部件属性 */\n  propsFooter?: PartProps<'footer'>;\n  /** “收起侧栏”按钮的部件属性 */\n  propsCollapse?: Partial<IconButtonProps>;\n  /** 右侧栏（aside）的部件属性 */\n  propsAside?: PartProps<'aside'>;\n  /** 右侧栏里的滚动区域的部件属性 */\n  propsAsideScroll?: Partial<ScrollAreaProps>;\n  /** docked 时窄屏打开侧栏的按钮的部件属性 */\n  propsMenuButton?: Partial<IconButtonProps>;\n  /** overlay 时品牌格里开关抽屉的“菜单”按钮的部件属性 */\n  propsSidebarToggle?: Partial<ButtonProps>;\n  /** overlay 抽屉宽度调整手柄的部件属性 */\n  propsResizeHandle?: Partial<ResizeHandleProps>;\n  /** 窄屏时的侧栏抽屉的部件属性 */\n  propsDrawer?: Partial<DrawerProps>;\n  /** 正文 */\n  children?: VNodeChild;\n}\n\n/** AppShell 交给里面的部件的状态：侧栏收起时品牌只剩标志 */\nexport interface AppShellState {\n  /** docked 侧栏收起成了图标栏（宽屏时） */\n  collapsed: () => boolean;\n}\n\n/** AppShell 的上下文：AppShellBrand 据此在侧栏收起时只显示标志；不在 AppShell 里时为 null */\nexport const AppShellContext = createContext<AppShellState | null>('AppShell');\n\n/** 外壳把顶栏高度交给里面的标题与粘性侧栏 */\nexport const appShellOffset = css.createTheme(layoutVars, { stickyOffset: HEADER_HEIGHT });\n\n/** AppShell 的样式：root、header、menuButton、body、sidebar、main、aside 等 */\nexport const appShellStyles = css.create({\n  // 整页的界面基准文字（同 Provider）：没有 Provider 时页面是浏览器默认的 16px，与组件的 md 档位对不上\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: '100dvh',\n    color: '_text',\n    fontSize: '_md',\n    lineHeight: '_normal',\n  },\n  header: {\n    position: 'sticky',\n    top: 0,\n    // 盖住滚动的正文与粘性侧栏；低于浮层（顶层渲染）与 SkipLink\n    zIndex: 10,\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_md',\n    height: HEADER_HEIGHT,\n    flexShrink: 0,\n    paddingInline: '_lg',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_border',\n    backgroundColor: '_surfaceTranslucent',\n    backdropFilter: 'blur(12px) saturate(1.5)',\n  },\n  menuButton: { display: { default: 'inline-flex', [breakpoints.lg]: 'none' }, flexShrink: 0 },\n  // 有品牌格与侧栏：宽屏时品牌格贴着起始边；品牌格与内容之间隔开正文的内边距，内容与正文的起始边对齐\n  headerWithBrand: {\n    paddingInlineStart: { default: null, [breakpoints.lg]: 0 },\n    columnGap: { default: null, [breakpoints.lg]: '_xl' },\n  },\n  brand: { display: 'flex', alignItems: 'center', gap: '_sm', flexShrink: 0, minWidth: 0 },\n  // 宽屏时与侧栏同宽，结束边的竖线与侧栏的竖线接上\n  brandRail: {\n    alignSelf: { default: null, [breakpoints.lg]: 'stretch' },\n    boxSizing: 'border-box',\n    width: { default: null, [breakpoints.lg]: SIDEBAR_WIDTH },\n    paddingInline: { default: null, [breakpoints.lg]: '_lg' },\n    borderInlineEndWidth: { default: null, [breakpoints.lg]: '_xs' },\n    borderInlineEndStyle: { default: null, [breakpoints.lg]: 'solid' },\n    borderInlineEndColor: { default: null, [breakpoints.lg]: '_border' },\n  },\n  headerContent: { display: 'flex', alignItems: 'center', gap: '_md', flexGrow: 1, minWidth: 0 },\n  body: { display: 'grid', flexGrow: 1, gridTemplateColumns: 'minmax(0, 1fr)' },\n  withSidebar: {\n    gridTemplateColumns: { default: null, [breakpoints.lg]: `${SIDEBAR_WIDTH} minmax(0, 1fr)` },\n  },\n  withAside: { gridTemplateColumns: { default: null, [breakpoints.xl]: 'minmax(0, 1fr) 14rem' } },\n  // 一个属性上两个断点：窄的一档用 lgOnly，不和 xl 重叠（见 breakpoints 的说明）\n  withBoth: {\n    gridTemplateColumns: {\n      default: null,\n      [breakpoints.lgOnly]: `${SIDEBAR_WIDTH} minmax(0, 1fr)`,\n      [breakpoints.xl]: `${SIDEBAR_WIDTH} minmax(0, 1fr) 14rem`,\n    },\n  },\n  // 两侧栏：粘在顶栏下面、占满剩下的视口高度，内容多时各自滚动，滚到头不带动页面\n  rail: {\n    position: 'sticky',\n    top: layoutVars.stickyOffset,\n    boxSizing: 'border-box',\n    height: `calc(100dvh - ${layoutVars.stickyOffset})`,\n  },\n  // 侧栏里的滚动区域：浮层滚动条，滚到头不带动页面；内边距放在内容层上，滚动条贴着侧栏边缘\n  railScroll: { height: '_full' },\n  railViewport: { overscrollBehavior: 'contain' },\n  sidebar: {\n    display: { default: 'none', [breakpoints.lg]: 'block' },\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_border',\n  },\n  sidebarContent: { paddingBlock: '_xl', paddingInline: '_md' },\n  // 紧凑的侧栏：两边只留一点，图标居中\n  sidebarContentCompact: { paddingInline: '_xs' },\n  aside: { display: { default: 'none', [breakpoints.xl]: 'block' } },\n  asideContent: { paddingBlock: '_xl', paddingInline: '_lg' },\n  // 正文由 SkipLink 聚焦（tabindex=-1）：不显示焦点框\n  main: { minWidth: 0, paddingBlock: '_xl', paddingInline: '_xl', outlineStyle: 'none' },\n  // overlay：从顶栏下面弹出、盖在正文上（低于顶栏与顶层渲染的浮层）；从起始边滑入，收起后不显示（inert，不能聚焦）。\n  // 打开时 translate 是 none：否则抽屉会成为里面 fixed 元素的包含块（同 Drawer）\n  overlay: {\n    position: 'fixed',\n    top: HEADER_HEIGHT,\n    bottom: 0,\n    insetInlineStart: 0,\n    zIndex: 9,\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    maxWidth: 'calc(100vw - 3rem)',\n    // 拖得很窄时内容裁在抽屉里，不溢出到正文上\n    overflow: 'hidden',\n    backgroundColor: '_surface',\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_border',\n    boxShadow: '_lg',\n    // 收起：滑出去之后再隐藏（visibility 延迟到滑完）\n    visibility: 'hidden',\n    translate: { default: '-100% 0', ':dir(rtl)': '100% 0' },\n    transition: `translate ${t.durations.md} ${t.easings.exit}, visibility 0s linear ${t.durations.md}`,\n  },\n  // 打开：立刻可见，再滑进来\n  overlayOpen: {\n    visibility: 'visible',\n    translate: 'none',\n    transition: `translate ${t.durations.lg} ${t.easings.enter}, visibility 0s`,\n  },\n  overlayScroll: { flexGrow: 1, minHeight: 0 },\n  // overlay 时顶栏的品牌格：宽屏时按抽屉的初始宽度，“菜单”在它的结束边\n  brandOverlay: {\n    alignSelf: { default: null, [breakpoints.lg]: 'stretch' },\n    justifyContent: 'space-between',\n    boxSizing: 'border-box',\n    paddingInlineStart: { default: null, [breakpoints.lg]: '_lg' },\n    paddingInlineEnd: { default: null, [breakpoints.lg]: '_sm' },\n    borderInlineEndWidth: { default: null, [breakpoints.lg]: '_xs' },\n    borderInlineEndStyle: { default: null, [breakpoints.lg]: 'solid' },\n    borderInlineEndColor: { default: null, [breakpoints.lg]: '_border' },\n  },\n  toggle: { flexShrink: 0 },\n  // 侧栏收起成图标栏：栅格的第一列、品牌格都变窄，品牌只剩标志\n  withSidebarCollapsed: {\n    gridTemplateColumns: { default: null, [breakpoints.lg]: `${RAIL_WIDTH} minmax(0, 1fr)` },\n  },\n  withBothCollapsed: {\n    gridTemplateColumns: {\n      default: null,\n      [breakpoints.lgOnly]: `${RAIL_WIDTH} minmax(0, 1fr)`,\n      [breakpoints.xl]: `${RAIL_WIDTH} minmax(0, 1fr) 14rem`,\n    },\n  },\n  brandRailCollapsed: {\n    width: { default: null, [breakpoints.lg]: RAIL_WIDTH },\n    justifyContent: { default: null, [breakpoints.lg]: 'center' },\n    paddingInline: { default: null, [breakpoints.lg]: '_xs' },\n  },\n  // 有收起按钮的侧栏：滚动区域占满剩下的高度，按钮在最下面\n  sidebarColumn: {\n    display: { default: 'none', [breakpoints.lg]: 'flex' },\n    flexDirection: 'column',\n  },\n  sidebarScroll: { flexGrow: 1, minHeight: 0, height: 'auto' },\n  collapseBar: {\n    display: 'flex',\n    justifyContent: 'flex-end',\n    flexShrink: 0,\n    padding: '_sm',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n  },\n  collapseBarCollapsed: { justifyContent: 'center' },\n  // 顶栏的导航：占品牌与右边工具之间的位置；有导航时右边的工具按内容宽、靠结束边\n  nav: { display: 'flex', alignItems: 'center', alignSelf: 'stretch', flexGrow: 1, minWidth: 0 },\n  headerContentAfterNav: { flexGrow: 0, justifyContent: 'flex-end' },\n  // 正文那一列：页签区、正文、页脚上下排，页脚在内容少时也贴着底部\n  column: { display: 'flex', flexDirection: 'column', minWidth: 0 },\n  mainGrow: { flexGrow: 1 },\n  tabs: { paddingBlockStart: '_sm', paddingInline: '_xl' },\n  footer: {\n    paddingBlock: '_lg',\n    paddingInline: '_xl',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n    color: '_textMuted',\n    fontSize: '_sm',\n  },\n});\n\n/** AppShell 的动态样式：抽屉的宽度、宽屏时品牌格的宽度（px） */\nexport const appShellDynamicStyles = css.create({\n  width: (px: number) => ({ width: px }),\n  brandWidth: (px: number) => ({ width: { default: null, [breakpoints.lg]: px } }),\n});\n\n/** 应用外壳：粘性顶栏、左侧栏、正文、右侧栏；窄屏时左侧栏收进抽屉 */\nexport const AppShell = _component(\n  ({\n    brand,\n    header,\n    sidebar,\n    aside,\n    nav,\n    tabs,\n    footer,\n    sidebarMode = 'docked',\n    _sidebarOpen: sidebarOpen = _bindable(false),\n    _sidebarWidth: sidebarWidth = _bindable(OVERLAY_WIDTH),\n    sidebarCollapsible = false,\n    _sidebarCollapsed: sidebarCollapsed = _bindable(false),\n    skipLink = true,\n    pageScrollbar = true,\n    propsHeader,\n    propsBrand,\n    propsSidebar,\n    propsMain,\n    propsAside,\n    propsMenuButton,\n    propsSidebarToggle,\n    propsResizeHandle,\n    propsDrawer,\n    propsHeaderContent,\n    propsBody,\n    propsSidebarScroll,\n    propsAsideScroll,\n    propsNav,\n    propsTabs,\n    propsFooter,\n    propsCollapse,\n    children,\n    ...rest\n  }: AppShellProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const id = useId();\n    const mainId = `${id}-main`;\n    const sidebarId = `${id}-sidebar`;\n    const overlay = () => sidebarMode === 'overlay';\n    const docked = () => hasContent(sidebar) && !overlay();\n    const wide = useMediaQuery(WIDE_QUERY);\n    // docked 的侧栏收起成图标栏：只在宽屏（窄屏时侧栏在抽屉里，抽屉总是完整的）\n    const collapsed = () => docked() && sidebarCollapsible && sidebarCollapsed && wide.value;\n    const compact = () => (overlay() && sidebarWidth < OVERLAY_COMPACT_WIDTH) || collapsed();\n    NavCompactContext.provide(compact);\n    AppShellContext.provide({ collapsed });\n    // docked：变宽后侧栏已经显示出来，抽屉没必要再开着\n    watch(wide, (isWide) => {\n      if (isWide && !overlay()) sidebarOpen = false;\n    });\n    // 抽屉里点了链接（通常是换页）：关闭抽屉；overlay 在宽屏时不关（挡不住正文的主要部分，常要连着换几页）\n    function closeOnNavigate(event: MouseEvent) {\n      if (overlay() && wide.value) return;\n      if (event.target instanceof Element && event.target.closest('a[href]')) sidebarOpen = false;\n    }\n\n    // overlay：品牌格按初始宽度，拖动抽屉时不变；双击手柄回到它\n    // 记住的宽度是拖窄后的紧凑宽度时，品牌格与双击回到的宽度按默认宽度（品牌格太窄会和顶栏的内容叠在一起）\n    const remembered = _untrack(sidebarWidth);\n    const initialWidth = remembered < OVERLAY_COMPACT_WIDTH ? OVERLAY_WIDTH : remembered;\n    // Esc 收起：焦点在抽屉里，收起后它不能聚焦了，回到“菜单”\n    let toggleButton = _state.raw<HTMLElement | null>(null);\n    function onOverlayKeydown(event: KeyboardEvent) {\n      if (event.key !== 'Escape' || event.defaultPrevented) return;\n      event.preventDefault();\n      sidebarOpen = false;\n      toggleButton?.focus();\n    }\n\n    /** overlay 的“菜单”：开关抽屉，图标随开关切换 */\n    const sidebarToggle = () => (\n      <Button\n        {...mergePartProps<ButtonProps>(\n          {\n            variant: 'ghost',\n            tone: 'neutral',\n            size: 'sm',\n            icon: sidebarOpen ? PanelLeftClose : PanelLeftOpen,\n            sx: appShellStyles.toggle,\n          },\n          propsSidebarToggle,\n          {\n            ref: (element: unknown) => (toggleButton = toElement(element)),\n            'aria-expanded': sidebarOpen,\n            'aria-controls': sidebarId,\n            onClick: () => (sidebarOpen = !sidebarOpen),\n          },\n        )}\n      >\n        {messages.navigationMenu}\n      </Button>\n    );\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: [appShellStyles.root, appShellOffset] }, rest)}>\n        {skipLink && <SkipLink href={`#${mainId}`} />}\n        {pageScrollbar && <PageScrollbar />}\n        <header\n          {...mergeAttrs<'header'>(\n            {\n              sx: [\n                appShellStyles.header,\n                hasContent(brand) && hasContent(sidebar) && appShellStyles.headerWithBrand,\n              ],\n            },\n            propsHeader,\n          )}\n        >\n          {hasContent(sidebar) && !overlay() && (\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                {\n                  sx: appShellStyles.menuButton,\n                  icon: MenuIcon,\n                  'aria-label': messages.navigationOpen,\n                },\n                propsMenuButton,\n                { 'aria-expanded': sidebarOpen, onClick: () => (sidebarOpen = true) },\n              )}\n            />\n          )}\n          {hasContent(brand) && (\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    appShellStyles.brand,\n                    hasContent(sidebar) &&\n                      (overlay()\n                        ? [\n                            appShellStyles.brandOverlay,\n                            appShellDynamicStyles.brandWidth(initialWidth),\n                          ]\n                        : [\n                            appShellStyles.brandRail,\n                            collapsed() && appShellStyles.brandRailCollapsed,\n                          ]),\n                  ],\n                },\n                propsBrand,\n              )}\n            >\n              {brand}\n              {hasContent(sidebar) && overlay() && sidebarToggle()}\n            </div>\n          )}\n          {!hasContent(brand) && hasContent(sidebar) && overlay() && sidebarToggle()}\n          {hasContent(nav) && (\n            <div {...mergeAttrs<'div'>({ sx: appShellStyles.nav }, propsNav)}>{nav}</div>\n          )}\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  appShellStyles.headerContent,\n                  hasContent(nav) && appShellStyles.headerContentAfterNav,\n                ],\n              },\n              propsHeaderContent,\n            )}\n          >\n            {header}\n          </div>\n        </header>\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                appShellStyles.body,\n                docked() && hasContent(aside)\n                  ? collapsed()\n                    ? appShellStyles.withBothCollapsed\n                    : appShellStyles.withBoth\n                  : docked()\n                    ? collapsed()\n                      ? appShellStyles.withSidebarCollapsed\n                      : appShellStyles.withSidebar\n                    : hasContent(aside) && appShellStyles.withAside,\n              ],\n            },\n            propsBody,\n          )}\n        >\n          {docked() && (\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    appShellStyles.rail,\n                    appShellStyles.sidebar,\n                    sidebarCollapsible && appShellStyles.sidebarColumn,\n                  ],\n                },\n                propsSidebar,\n              )}\n            >\n              <ScrollArea\n                {...mergePartProps<ScrollAreaProps>(\n                  {\n                    sx: [\n                      appShellStyles.railScroll,\n                      sidebarCollapsible && appShellStyles.sidebarScroll,\n                    ],\n                    propsViewport: { sx: appShellStyles.railViewport },\n                    propsContent: {\n                      sx: [\n                        appShellStyles.sidebarContent,\n                        collapsed() && appShellStyles.sidebarContentCompact,\n                      ],\n                    },\n                  },\n                  propsSidebarScroll,\n                )}\n              >\n                {sidebar}\n              </ScrollArea>\n              {sidebarCollapsible && (\n                <div\n                  {...css.attrs(\n                    appShellStyles.collapseBar,\n                    collapsed() && appShellStyles.collapseBarCollapsed,\n                  )}\n                >\n                  <IconButton\n                    {...mergePartProps<IconButtonProps>(\n                      {\n                        icon: sidebarCollapsed ? PanelLeftOpen : PanelLeftClose,\n                        size: 'sm',\n                        variant: 'ghost',\n                        propsIcon: { flipInRtl: true },\n                        'aria-label': sidebarCollapsed\n                          ? messages.sidebarExpand\n                          : messages.sidebarCollapse,\n                      },\n                      propsCollapse,\n                      { onClick: () => (sidebarCollapsed = !sidebarCollapsed) },\n                    )}\n                  />\n                </div>\n              )}\n            </div>\n          )}\n          <div {...css.attrs(appShellStyles.column)}>\n            {hasContent(tabs) && (\n              <div {...mergeAttrs<'div'>({ sx: appShellStyles.tabs }, propsTabs)}>{tabs}</div>\n            )}\n            <main\n              {...mergeAttrs<'main'>(\n                { sx: [appShellStyles.main, appShellStyles.mainGrow] },\n                propsMain,\n                {\n                  id: mainId,\n                  tabindex: -1,\n                },\n              )}\n            >\n              {children}\n            </main>\n            {hasContent(footer) && (\n              <footer {...mergeAttrs<'footer'>({ sx: appShellStyles.footer }, propsFooter)}>\n                {footer}\n              </footer>\n            )}\n          </div>\n          {hasContent(aside) && (\n            <aside\n              {...mergeAttrs<'aside'>(\n                { sx: [appShellStyles.rail, appShellStyles.aside] },\n                propsAside,\n              )}\n            >\n              <ScrollArea\n                {...mergePartProps<ScrollAreaProps>(\n                  {\n                    sx: appShellStyles.railScroll,\n                    propsViewport: { sx: appShellStyles.railViewport },\n                    propsContent: { sx: appShellStyles.asideContent },\n                  },\n                  propsAsideScroll,\n                )}\n              >\n                {aside}\n              </ScrollArea>\n            </aside>\n          )}\n        </div>\n        {hasContent(sidebar) && overlay() && (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  appShellStyles.overlay,\n                  sidebarOpen && appShellStyles.overlayOpen,\n                  appShellDynamicStyles.width(sidebarWidth),\n                ],\n              },\n              propsSidebar,\n              {\n                id: sidebarId,\n                inert: !sidebarOpen,\n                onKeydown: onOverlayKeydown,\n                onClick: closeOnNavigate,\n              },\n            )}\n          >\n            <ScrollArea\n              {...mergePartProps<ScrollAreaProps>(\n                {\n                  sx: appShellStyles.overlayScroll,\n                  propsViewport: { sx: appShellStyles.railViewport },\n                  propsContent: {\n                    sx: [\n                      appShellStyles.sidebarContent,\n                      compact() && appShellStyles.sidebarContentCompact,\n                    ],\n                  },\n                },\n                propsSidebarScroll,\n              )}\n            >\n              {sidebar}\n            </ScrollArea>\n            <ResizeHandle\n              aria-label={messages.navigationResize}\n              {...propsResizeHandle}\n              width={sidebarWidth}\n              minWidth={OVERLAY_MIN_WIDTH}\n              maxWidth={OVERLAY_MAX_WIDTH}\n              defaultWidth={initialWidth}\n              onWidthChange={(px: number) => (sidebarWidth = px)}\n            />\n          </div>\n        )}\n        {docked() && (\n          <Drawer\n            {...mergePartProps<DrawerProps>(\n              { title: messages.navigation, side: 'start' },\n              propsDrawer,\n              {\n                onClick: closeOnNavigate,\n              },\n            )}\n            _open={sidebarOpen}\n          >\n            {sidebar}\n          </Drawer>\n        )}\n      </div>\n    );\n  },\n);\n\n/** 未声明的属性落到链接（a）上 */\nexport interface AppShellBrandProps extends PartProps<'a', 'href'> {\n  /** 点了去哪儿，一般是首页 */\n  href: string;\n  /** 标志的图标（品牌色） */\n  icon?: IconData;\n  /** 标志的图片等，写了时不画 icon */\n  logo?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 产品名 */\n  children?: VNodeChild;\n}\n\n/** AppShellBrand 的样式：root、mark */\nexport const appShellBrandStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_sm',\n    flexShrink: 0,\n    color: '_text',\n    textDecoration: 'none',\n    fontWeight: '_semibold',\n    fontSize: '_lg',\n    borderRadius: '_sm',\n  },\n  mark: { color: '_accentText' },\n});\n\n/**\n * 外壳顶栏的品牌：品牌色的标志（装饰，对读屏隐藏）与产品名，名字就是链接的名称，点了回首页（走路由适配）。\n * 放在 AppShell 的 brand 里\n */\nexport const AppShellBrand = _component(\n  ({ href, icon, logo, propsIcon, children, ...rest }: AppShellBrandProps) => {\n    const router = useRouterLink();\n    const shell = AppShellContext.inject(null);\n    return () => (\n      <a\n        {...mergeAttrs<'a'>({ sx: [appShellBrandStyles.root, focusRingStyles.visible] }, rest, {\n          href: router.href(href),\n          onClick: (event: MouseEvent) => router.onClick(event, href),\n        })}\n      >\n        {logo ??\n          (icon && (\n            <Icon\n              {...mergePartProps<IconProps>({ icon, sx: appShellBrandStyles.mark }, propsIcon)}\n            />\n          ))}\n        {/* 侧栏收起成图标栏时品牌格只放得下标志：产品名留给读屏（仍是链接的名称） */}\n        <span {...css.attrs(shell?.collapsed() && visuallyHiddenStyles.hidden)}>{children}</span>\n      </a>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/patterns/CommentThread.d.ts

@@ -0,0 +1,128 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type MentionsProps } from '../input/Mentions';
+import type { ListboxOption } from '../input/list-state';
+import { type UploadFile, type UploadHandler } from '../input/Upload';
+import { type PartProps } from '../utils/props';
+/** 留言的一个附件 */
+export interface CommentAttachment {
+    /** 文件名 */
+    name: string;
+    /** 地址：文件名链到它（预览、下载） */
+    url?: string;
+    /** 大小（字节） */
+    size?: number;
+}
+/** 一条留言 */
+export interface CommentItem {
+    /** 标识 */
+    id: string;
+    /** 作者 */
+    author: string;
+    /** 作者的头像地址；没有时显示首字母 */
+    avatar?: string;
+    /** 作者的身份（岗位、“供应商”标记），在名字后面 */
+    role?: VNodeChild;
+    /** 内容：文字，“@名字”按 people 高亮 */
+    content: string;
+    /** 发表的时间（ISO） */
+    time: string;
+    /** 改过 */
+    edited?: boolean;
+    /** 附件 */
+    attachments?: readonly CommentAttachment[];
+    /** 内容下面的补充（逐条回应的“采纳 / 不采纳”、引用的字段对比） */
+    extra?: VNodeChild;
+    /** 回复（只分一层，回复里的 replies 不显示） */
+    replies?: readonly CommentItem[];
+}
+/** 写好的一条留言：onSend 收到它 */
+export interface CommentDraft {
+    /** 内容（去掉首尾空白） */
+    content: string;
+    /** 内容里 @ 到的人（people 的 value） */
+    mentions: string[];
+    /** 上传完成的附件 */
+    attachments: UploadFile[];
+    /** 回复哪一串（那一串第一条留言的 id）；新的一串没有 */
+    replyTo?: string;
+}
+/** 写留言的人：输入框前面的头像 */
+export interface CommentAuthor {
+    /** 名字 */
+    name: string;
+    /** 头像地址 */
+    avatar?: string;
+}
+/** 未声明的属性落到外层 div 上 */
+export interface CommentComposerProps extends PartProps<'div'> {
+    /** 发送：返回 Promise 时等它完成，成功后清空；失败（reject）时保留内容并提示 */
+    onSend: (draft: Omit<CommentDraft, 'replyTo'>) => unknown;
+    /** 取消（回复时）：有它时显示取消按钮，按 Esc 也是取消 */
+    onCancel?: () => void;
+    /** 可以 @ 的人 */
+    people?: readonly ListboxOption[];
+    /** 上传附件；不给时不能带附件 */
+    upload?: UploadHandler;
+    /** 写留言的人：输入框前面的头像 */
+    author?: CommentAuthor;
+    /** 一开始的内容（回复时的“@作者 ”） */
+    initialText?: string;
+    /** 挂载后聚焦输入框（点了回复） */
+    autofocus?: boolean;
+    /** 输入框的提示，默认取文案 */
+    placeholder?: string;
+    /** 输入框（Mentions）的部件属性；它的 aria-label 是输入框的名称 */
+    propsMentions?: Partial<MentionsProps>;
+}
+/** CommentThread、CommentComposer 的样式 */
+export declare const commentStyles: Readonly<{
+    actions: css.CompiledStyles;
+    attachment: css.CompiledStyles;
+    attachments: css.CompiledStyles;
+    author: css.CompiledStyles;
+    body: css.CompiledStyles;
+    composer: css.CompiledStyles;
+    composerFooter: css.CompiledStyles;
+    composerMain: css.CompiledStyles;
+    composerNoAvatar: css.CompiledStyles;
+    composerTools: css.CompiledStyles;
+    content: css.CompiledStyles;
+    error: css.CompiledStyles;
+    header: css.CompiledStyles;
+    hint: css.CompiledStyles;
+    item: css.CompiledStyles;
+    list: css.CompiledStyles;
+    meta: css.CompiledStyles;
+    replies: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 写留言的输入框：提及、附件、发送 */
+export declare const CommentComposer: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CommentComposerProps>;
+/** 未声明的属性落到外层 div 上 */
+export interface CommentThreadProps extends PartProps<'div'> {
+    /** 留言，旧的在前；回复在各自的 replies 里 */
+    comments: readonly CommentItem[];
+    /** 可以 @ 的人：输入框的候选，也是留言里“@名字”高亮的依据 */
+    people?: readonly ListboxOption[];
+    /** 发送一条留言或回复；不给时只读（没有输入框与回复按钮） */
+    onSend?: (draft: CommentDraft) => unknown;
+    /** 上传附件；不给时不能带附件 */
+    upload?: UploadHandler;
+    /** 当前用户：输入框前面的头像 */
+    currentUser?: CommentAuthor;
+    /** 每条留言的操作（编辑、删除、标为已解决），在回复按钮后面 */
+    actions?: (comment: CommentItem) => VNodeChild;
+    /** 没有留言时显示的内容，默认取文案 */
+    empty?: VNodeChild;
+    /** “现在”的时间戳：相对时间按它算，默认是当前时间（文档与测试里固定它） */
+    now?: number;
+    /** 列表（ul）的部件属性 */
+    propsList?: PartProps<'ul'>;
+    /** 每条留言（li）的部件属性，可以按条计算 */
+    propsItem?: PartProps<'li'> | ((comment: CommentItem) => PartProps<'li'>);
+    /** 输入框（CommentComposer）的部件属性 */
+    propsComposer?: Partial<Omit<CommentComposerProps, 'onSend'>>;
+}
+/** 一串留言与回复，下面是输入框 */
+export declare const CommentThread: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CommentThreadProps>;

package/dist/patterns/CommentThread.js

@@ -0,0 +1,386 @@
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { Button } from "../base/Button.js";
+import { Link } from "../base/Link.js";
+import { useFormat } from "../config/lang/format.js";
+import { Avatar, initials } from "../display/Avatar.js";
+import { Empty } from "../feedback/Empty.js";
+import { MentionText, Mentions } from "../input/Mentions.js";
+import { Upload as Upload$1 } from "../input/Upload.js";
+import { useMessages } from "../config/lang/messages.js";
+import { patternsMessages } from "./messages.js";
+import { Fragment, createVNode, mergeProps, onMounted, ref, shallowRef } from "vue";
+import { _component, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Paperclip } from "@lucide/icons";
+//#region src/patterns/CommentThread.tsx
+/**
+* 留言：一串留言与回复（沟通记录、协商的逐条回应、审批时的讨论），下面是写留言的输入框。
+* 留言里可以 @ 人（Mentions）、带附件（Upload），回复只分一层：回复一条回复时仍挂在那串下面，开头写上“@作者 ”。
+*
+*   <CommentThread
+*     comments={comments}                                  // { id, author, avatar?, role?, content, time, attachments?, replies? }
+*     people={people}                                      // 可以 @ 的人（ListboxOption），留言里“@名字”按它高亮
+*     upload={(file, context) => api.upload(file, context)} // 不给时不能带附件
+*     onSend={async (draft) => await api.comment(draft)} // { content, mentions, attachments, replyTo? }；不给时只读
+*   />
+*
+* 发送：按钮或 Ctrl + Enter；onSend 返回 Promise 时按钮转圈，成功后清空，失败时保留内容并提示。
+* 留言存在哪、发出去以后怎样出现在 comments 里由应用决定（乐观更新或重新取）。
+* 时间写成相对现在（3 分钟前），悬停看完整时间。actions 给每条留言加操作（编辑、删除、标为已解决）。
+*
+* 单独的输入框用 CommentComposer（协商回复、审批意见）。
+* 部件：Root（div）、List（ul）、Item（li，可以按条计算）、Composer（CommentComposer）。
+*/
+/** 留言的一个附件 */
+/** 一条留言 */
+/** 写好的一条留言：onSend 收到它 */
+/** 写留言的人：输入框前面的头像 */
+/** 未声明的属性落到外层 div 上 */
+/** CommentThread、CommentComposer 的样式 */
+var commentStyles = css.create({
+	root: {
+		display: "grid",
+		gap: "_lg"
+	},
+	list: {
+		display: "grid",
+		gap: "_lg",
+		margin: 0,
+		padding: 0,
+		listStyle: "none"
+	},
+	item: {
+		display: "grid",
+		gridTemplateColumns: "auto 1fr",
+		columnGap: "_sm",
+		alignItems: "start"
+	},
+	body: {
+		display: "grid",
+		gap: "_xs",
+		minWidth: 0
+	},
+	header: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		columnGap: "_sm",
+		rowGap: "_xs"
+	},
+	author: {
+		fontWeight: "_semibold",
+		color: "_text"
+	},
+	meta: {
+		fontSize: "_sm",
+		color: "_textMuted"
+	},
+	content: { color: "_text" },
+	attachments: {
+		display: "flex",
+		flexWrap: "wrap",
+		columnGap: "_md",
+		rowGap: "_xs",
+		margin: 0,
+		padding: 0,
+		listStyle: "none",
+		fontSize: "_sm"
+	},
+	attachment: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.25em"
+	},
+	actions: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "_sm",
+		fontSize: "_sm"
+	},
+	replies: {
+		display: "grid",
+		gap: "_md",
+		margin: 0,
+		marginBlockStart: "_xs",
+		paddingInlineStart: "_md",
+		listStyle: "none",
+		borderInlineStartWidth: "_sm",
+		borderInlineStartStyle: "solid",
+		borderInlineStartColor: "_borderMuted"
+	},
+	composer: {
+		display: "grid",
+		gridTemplateColumns: "auto 1fr",
+		columnGap: "_sm",
+		alignItems: "start"
+	},
+	composerNoAvatar: { gridTemplateColumns: "1fr" },
+	composerMain: {
+		display: "grid",
+		gap: "_xs",
+		minWidth: 0
+	},
+	composerFooter: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: "_xs"
+	},
+	composerTools: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm"
+	},
+	hint: {
+		fontSize: "_xs",
+		color: "_textMuted"
+	},
+	error: {
+		fontSize: "_sm",
+		color: "_dangerText"
+	}
+});
+/** 头像：有图片用图片，没有时是名字的首字母（名字就在旁边，头像只是装饰） */
+var authorAvatar = (name, avatar) => createVNode(Avatar, {
+	"src": avatar,
+	"fallback": initials(name),
+	"size": "sm"
+}, null);
+/** 写留言的输入框：提及、附件、发送 */
+var CommentComposer = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const onSend = readonlyProp(_props, "onSend");
+	const onCancel = readonlyProp(_props, "onCancel");
+	const people = readonlyProp(_props, "people", () => []);
+	const upload = readonlyProp(_props, "upload");
+	const author = readonlyProp(_props, "author");
+	const initialText = readonlyProp(_props, "initialText", "");
+	const autofocus = readonlyProp(_props, "autofocus", false);
+	const placeholder = readonlyProp(_props, "placeholder");
+	const propsMentions = readonlyProp(_props, "propsMentions");
+	const rest = restProps(_props, _ctx, true);
+	const messages = useMessages("patterns", patternsMessages);
+	let text = ref(untrack(() => initialText.value));
+	let mentions = ref([]);
+	let files = ref([]);
+	let attaching = ref(false);
+	let sending = ref(false);
+	let failed = ref(false);
+	let root = shallowRef(null);
+	onMounted(() => {
+		if (!autofocus.value) return;
+		const input = root.value?.querySelector("textarea");
+		input?.focus();
+		input?.setSelectionRange(input.value.length, input.value.length);
+	});
+	const uploading = () => files.value.some((file) => file.status === "uploading" || file.status === "selected");
+	const sendable = () => text.value.trim() !== "" && !uploading() && !sending.value;
+	async function send() {
+		if (!sendable()) return;
+		sending.value = true;
+		failed.value = false;
+		try {
+			await onSend.value({
+				content: text.value.trim(),
+				mentions: mentions.value,
+				attachments: files.value.filter((file) => file.status === "done")
+			});
+			text.value = "";
+			files.value = [];
+			attaching.value = false;
+		} catch {
+			failed.value = true;
+		} finally {
+			sending.value = false;
+		}
+	}
+	function onKeydown(event) {
+		if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+			event.preventDefault();
+			send();
+		} else if (event.key === "Escape" && onCancel.value && !event.defaultPrevented) onCancel.value();
+	}
+	return () => createVNode("div", mergeAttrs({ sx: [commentStyles.composer, !author.value && commentStyles.composerNoAvatar] }, rest, { ref: root }), [author.value && authorAvatar(author.value.name, author.value.avatar), createVNode("div", css.attrs(commentStyles.composerMain), [
+		createVNode(Mentions, mergeProps(mergePartProps({
+			rows: 2,
+			maxRows: 10,
+			placeholder: placeholder.value ?? messages.commentPlaceholder,
+			"aria-label": messages.comments
+		}, propsMentions.value, {
+			items: people.value,
+			onKeydown
+		}), {
+			"_value": text.value,
+			"onUpdate:_value": _cache[0] || (_cache[0] = ($event) => text.value = $event),
+			"_mentions": mentions.value,
+			"onUpdate:_mentions": _cache[1] || (_cache[1] = ($event) => mentions.value = $event)
+		}), null),
+		upload.value && attaching.value && createVNode(Upload$1, {
+			"_value": files.value,
+			"onUpdate:_value": _cache[2] || (_cache[2] = ($event) => files.value = $event),
+			"upload": upload.value,
+			"multiple": true
+		}, null),
+		failed.value && createVNode("div", mergeProps({ "role": "alert" }, css.attrs(commentStyles.error)), [messages.commentSendFailed]),
+		createVNode("div", css.attrs(commentStyles.composerFooter), [createVNode("div", css.attrs(commentStyles.composerTools), [upload.value && createVNode(Button, {
+			"variant": "ghost",
+			"tone": "neutral",
+			"size": "sm",
+			"icon": Paperclip,
+			"aria-pressed": attaching.value,
+			"onClick": _cache[3] || (_cache[3] = () => attaching.value = !attaching.value),
+			"key": "__site0"
+		}, {
+			default: () => [files.value.length > 0 ? `${messages.commentAttach} ${files.value.length}` : messages.commentAttach],
+			$stable: true
+		}), createVNode("span", css.attrs(commentStyles.hint), [messages.commentSendHint])]), createVNode("div", css.attrs(commentStyles.composerTools), [onCancel.value && createVNode(Button, {
+			"variant": "ghost",
+			"tone": "neutral",
+			"size": "sm",
+			"onClick": onCancel.value,
+			"key": "__site1"
+		}, {
+			default: () => [messages.commentCancel],
+			$stable: true
+		}), createVNode(Button, {
+			"size": "sm",
+			"loading": sending.value,
+			"disabled": !sendable(),
+			"onClick": _cache[4] || (_cache[4] = () => void send()),
+			"key": "__site2"
+		}, {
+			default: () => [messages.commentSend],
+			$stable: true
+		})])])
+	])]);
+}, {
+	name: "CommentComposer",
+	props: [
+		"onSend",
+		"onCancel",
+		"people",
+		"upload",
+		"author",
+		"initialText",
+		"autofocus",
+		"placeholder",
+		"propsMentions"
+	]
+});
+/** 未声明的属性落到外层 div 上 */
+/** 一串留言与回复，下面是输入框 */
+var CommentThread = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const comments = readonlyProp(_props2, "comments");
+	const people = readonlyProp(_props2, "people", () => []);
+	const onSend = readonlyProp(_props2, "onSend");
+	const upload = readonlyProp(_props2, "upload");
+	const currentUser = readonlyProp(_props2, "currentUser");
+	const actions = readonlyProp(_props2, "actions");
+	const empty = readonlyProp(_props2, "empty");
+	const now = readonlyProp(_props2, "now");
+	const propsList = readonlyProp(_props2, "propsList");
+	const propsItem = readonlyProp(_props2, "propsItem");
+	const propsComposer = readonlyProp(_props2, "propsComposer");
+	const rest = restProps(_props2, _ctx2, true);
+	const messages = useMessages("patterns", patternsMessages);
+	const format = useFormat();
+	let replying = ref(null);
+	const item = (comment, thread) => {
+		const own = typeof propsItem.value === "function" ? propsItem.value(comment) : propsItem.value;
+		const top = comment === thread;
+		return createVNode("li", mergeProps({ "key": comment.id }, mergeAttrs({ sx: commentStyles.item }, own)), [authorAvatar(comment.author, comment.avatar), createVNode("article", mergeProps(css.attrs(commentStyles.body), { "aria-label": comment.author }), [
+			createVNode("div", css.attrs(commentStyles.header), [
+				createVNode("span", css.attrs(commentStyles.author), [comment.author]),
+				comment.role,
+				createVNode("time", mergeProps({
+					"datetime": comment.time,
+					"title": format.date(comment.time, {
+						dateStyle: "medium",
+						timeStyle: "short"
+					})
+				}, css.attrs(commentStyles.meta)), [format.relative(comment.time, { now: now.value })]),
+				comment.edited && createVNode("span", css.attrs(commentStyles.meta), [messages.commentEdited])
+			]),
+			createVNode(MentionText, {
+				"text": comment.content,
+				"options": people.value,
+				"sx": commentStyles.content
+			}, null),
+			comment.attachments && comment.attachments.length > 0 && createVNode("ul", mergeProps(css.attrs(commentStyles.attachments), { "aria-label": messages.commentAttachments }), [comment.attachments.map((file) => createVNode("li", mergeProps({ "key": file.name }, css.attrs(commentStyles.attachment)), [
+				createVNode(Icon, { "icon": Paperclip }, null),
+				file.url ? createVNode(Link, { "href": file.url }, { default: () => [file.name] }) : file.name,
+				file.size != null && createVNode("span", css.attrs(commentStyles.meta), [format.fileSize(file.size)])
+			]))]),
+			comment.extra,
+			(onSend.value || actions.value) && createVNode("div", css.attrs(commentStyles.actions), [onSend.value && createVNode(Button, {
+				"variant": "link",
+				"tone": "neutral",
+				"size": "sm",
+				"onClick": () => replying.value = {
+					thread: thread.id,
+					to: comment.author
+				}
+			}, {
+				default: () => [messages.commentReply],
+				$stable: true
+			}), actions.value?.(comment)]),
+			top && replies(thread)
+		])]);
+	};
+	/** 一串的回复与回复的输入框 */
+	const replies = (thread) => {
+		const list = thread.replies ?? [];
+		const open = replying.value?.thread === thread.id;
+		if (list.length === 0 && !open) return null;
+		return createVNode(Fragment, null, [list.length > 0 && createVNode("ul", mergeProps(css.attrs(commentStyles.replies), { "aria-label": messages.commentReplies(list.length) }), [list.map((reply) => item(reply, thread))]), open && onSend.value && createVNode(CommentComposer, mergeProps(mergePartProps({
+			people: people.value,
+			upload: upload.value,
+			author: currentUser.value
+		}, propsComposer.value, {
+			key: `${thread.id}:${replying.value.to}`,
+			initialText: `@${replying.value.to} `,
+			autofocus: true,
+			propsMentions: {
+				...propsComposer.value?.propsMentions,
+				"aria-label": messages.commentReplyTo(replying.value.to)
+			},
+			onCancel: () => replying.value = null
+		}), { "onSend": async (draft) => {
+			await onSend.value({
+				...draft,
+				replyTo: thread.id
+			});
+			replying.value = null;
+		} }), null)]);
+	};
+	return () => createVNode("div", mergeAttrs({ sx: commentStyles.root }, rest), [comments.value.length === 0 ? hasContent(empty.value) ? empty.value : createVNode(Empty, {
+		"size": "sm",
+		"title": messages.commentsEmpty
+	}, null) : createVNode("ul", mergeProps(mergeAttrs({ sx: commentStyles.list }, propsList.value), { "aria-label": messages.comments }), [comments.value.map((comment) => item(comment, comment))]), onSend.value && createVNode(CommentComposer, mergeProps(mergePartProps({
+		people: people.value,
+		upload: upload.value,
+		author: currentUser.value
+	}, propsComposer.value), { "onSend": onSend.value }), null)]);
+}, {
+	name: "CommentThread",
+	props: [
+		"comments",
+		"people",
+		"onSend",
+		"upload",
+		"currentUser",
+		"actions",
+		"empty",
+		"now",
+		"propsList",
+		"propsItem",
+		"propsComposer"
+	]
+});
+//#endregion
+export { CommentComposer, CommentThread, commentStyles };
+
+//# sourceMappingURL=CommentThread.js.map