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

package/dist/overlay/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","names":["_isVNode","Menu","_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_Fragment","_mergeProps","_vtp_childrenStable","Text","_vtp_forwardChildren"],"sources":["../../src/overlay/Menu.tsx"],"sourcesContent":["/**\n * 菜单（WAI-ARIA 的 Menu Button 模式）：按钮弹出一列操作，复合组件，参考 Radix DropdownMenu、React Aria Menu。\n *\n *   <Menu trigger={(props) => <Button {...props} iconEnd={ChevronDown}>操作</Button>}>\n *     <MenuItem icon={Pencil} onAction={edit}>编辑</MenuItem>\n *     <MenuItem icon={Copy} shortcut=\"Ctrl+D\" onAction={duplicate}>复制</MenuItem>\n *     <Separator decorative={false} />\n *     <MenuGroup label=\"视图\">\n *       <MenuCheckboxItem _checked={showGrid}>显示网格</MenuCheckboxItem>\n *     </MenuGroup>\n *     <MenuRadioGroup _value={sort} label=\"排序\">\n *       <MenuRadioItem value=\"name\">名称</MenuRadioItem>\n *       <MenuRadioItem value=\"date\">日期</MenuRadioItem>\n *     </MenuRadioGroup>\n *     <MenuLinkItem href=\"/settings\">设置</MenuLinkItem>\n *     <MenuItem icon={Trash2} tone=\"danger\" onAction={remove}>删除</MenuItem>\n *   </Menu>\n *\n * 键盘：触发器上 Enter / 空格 / ↓ 打开并聚焦第一项，↑ 打开并聚焦最后一项；菜单里 ↑↓ 移动（循环）、Home / End、\n * 按字母跳到以它开头的项（rovingFocus 的 typeahead），Enter / 空格执行，Esc 关闭并回到触发器，Tab 关闭并继续往后。\n * 执行普通项后关闭菜单；复选项默认不关（常连续勾选几项），单选项默认关闭；都可以用 closeOnSelect 改。\n * 原生 popover=\"auto\" 负责顶层、点击外部关闭与嵌套顺序，定位与焦点进出见 utils/dom/floating。\n */\nimport { Check, ChevronRight, Dot } 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 type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onBeforeUnmount, useId, type VNodeChild } from 'vue';\nimport { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Text, type TextProps } from '../base/Text';\nimport {\n  floatingStyles,\n  pointAnchor,\n  useAnchoredPopover,\n  type FloatingOptions,\n  type FloatingPlacement,\n} from '../utils/dom/floating';\nimport { ariaKeyShortcut, formatHotkey, useHotkeys } from '../utils/dom/hotkeys';\nimport { ScrollArea } from '../layout/ScrollArea';\nimport { useRouterLink } from '../utils/dom/link';\nimport { toElement } from '../utils/dom/element';\nimport { useLazyContent, type LazyContentOptions } from '../utils/motion/presence';\nimport { childNodes } from '../utils/data/text';\nimport {\n  hasContent,\n  defaultLabelledBy,\n  mergeAttrs,\n  mergePartProps,\n  type PartProps,\n  type TriggerProps,\n} from '../utils/props';\nimport { itemStyles } from '../utils/style/item-styles';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { rippleHostStyles, useRipple } from '../utils/dom/ripple';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { rovingFocus } from '../utils/dom/roving-focus';\nimport { inlineArrows, isRtl } from '../utils/dom/direction';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { transitions } from '../utils/style/transitions';\n\n/** Menu 交给菜单项的状态 */\nexport interface MenuState {\n  /** 波纹；不写时沿用配置 */\n  readonly ripple: boolean | undefined;\n  /** 执行了一项：关闭菜单（onOpenChange 的原因是 select），焦点回到触发器 */\n  close(event?: Event): void;\n}\n\n/** Menu 的上下文：自定义菜单项用 useMenuItem 读取 */\nexport const MenuContext = createContext<MenuState>('Menu');\n\n/** MenuRadioGroup 交给组内单选项的状态 */\nexport interface MenuRadioGroupState {\n  /** 选中的值 */\n  readonly value: string | undefined;\n  /** 选中一个值 */\n  select(value: string): void;\n}\n\n/** MenuRadioGroup 的上下文 */\nexport const MenuRadioGroupContext = createContext<MenuRadioGroupState>('MenuRadioGroup');\n\n/** 交给触发器的属性：展开到按钮上（`{...props}`） */\nexport interface MenuTriggerProps extends TriggerProps {\n  /** 菜单以触发器的文字作为名称（aria-labelledby） */\n  id: string;\n  /** 取得触发器元素：定位的参照、关闭后焦点回到这里 */\n  ref: (element: unknown) => void;\n  /** ↓ / ↑ 打开并聚焦第一项 / 最后一项 */\n  onKeydown: (event: KeyboardEvent) => void;\n  /** 告诉读屏这个按钮会打开菜单 */\n  'aria-haspopup': 'menu';\n}\n\n/** 未声明的属性落到菜单（role=\"menu\" 的 div）上 */\nexport interface MenuProps\n  extends\n    PartProps<'div', 'id' | 'popover' | 'role'>,\n    Pick<FloatingOptions, 'offset'>,\n    LazyContentOptions,\n    OpenChangeProps {\n  /** 是否打开：父级可以写 _open={x}；Esc、点击外部、执行菜单项都会关闭并写回 */\n  _open?: boolean;\n  /** 弹出位置，默认 bottom-start；空间不够时自动翻转 */\n  placement?: FloatingPlacement;\n  /** 字号档位，菜单项随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 菜单项按下时的波纹；不写时沿用 createUi / Provider 的 ripple */\n  ripple?: boolean;\n  /** 触发器：`(props) => <Button {...props}>操作</Button>`；ContextMenu 不用触发器时返回 null */\n  trigger: (props: MenuTriggerProps) => VNodeChild;\n  /** 从视口里这个点弹出（右键菜单的指针位置），不以触发器为锚点；关闭后焦点由使用方安排 */\n  point?: { x: number; y: number };\n  /** 菜单项：MenuItem、MenuLinkItem、MenuCheckboxItem、MenuRadioGroup、MenuGroup、MenuSub、Separator */\n  children?: VNodeChild;\n}\n\n/** 菜单项的选择器（漫游焦点、打开时聚焦第一项 / 最后一项） */\nconst ITEMS = '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]';\n\n/** 菜单自己的可用项：不含子菜单里的 */\nfunction menuItemsOf(panel: HTMLElement | null): HTMLElement[] {\n  return [...(panel?.querySelectorAll<HTMLElement>(ITEMS) ?? [])].filter(\n    (item) =>\n      item.parentElement?.closest('[role=\"menu\"]') === panel &&\n      !item.matches(':disabled, [aria-disabled=\"true\"]'),\n  );\n}\n\n/** Menu 的样式：panel、content、label、indicator、hidden、shortcut、groupLabel */\nexport const menuStyles = css.create({\n  // 菜单项多时在 ScrollArea 里滚动（浮层滚动条）；内边距放在内容层上，滚动条贴着菜单边缘\n  panel: {\n    minWidth: '12em',\n    maxWidth: 'calc(100vw - 2em)',\n    lineHeight: '_normal',\n  },\n  content: { padding: '_xs' },\n  label: { flexGrow: 1, minWidth: 0 },\n  // 有说明时文字与说明上下排，作为一个整体占满剩余宽度\n  text: { display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0 },\n  description: { display: 'block' },\n  // 复选、单选的标记占一列，有没有勾都对齐\n  indicator: { flexShrink: 0, width: '1em' },\n  hidden: { visibility: 'hidden' },\n  shortcut: { flexShrink: 0, marginInlineStart: '_lg' },\n  groupLabel: {\n    display: 'block',\n    paddingBlock: '_xs',\n    paddingInline: '_sm',\n    fontWeight: '_semibold',\n  },\n});\n\n/** 菜单：触发器 + 弹出的一列菜单项 */\nexport const Menu = _component(\n  ({\n    _open: open = _bindable(false),\n    onOpenChange,\n    placement = 'bottom-start',\n    offset,\n    size,\n    ripple,\n    trigger,\n    point,\n    lazy = true,\n    children,\n    ...rest\n  }: MenuProps) => {\n    const id = useId();\n    // 菜单项的快捷键在菜单没打开时也要能用：有快捷键的菜单照常渲染菜单项\n    const showContent = useLazyContent(\n      () => open,\n      () => lazy,\n    );\n    const triggerId = `${id}-trigger`;\n    let anchor = _state.raw<HTMLElement | null>(null);\n    let panel = _state.raw<HTMLElement | null>(null);\n    // 打开时聚焦哪一项；Tab 关闭时焦点照常往后走，不还给触发器\n    let focusOnOpen: 'first' | 'last' = 'first';\n    let restoreFocus = true;\n\n    const enabledItems = () => menuItemsOf(panel);\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n\n    MenuContext.provide({\n      get ripple() {\n        return ripple;\n      },\n\n      close: (event) => setOpen(false, 'select', event),\n    });\n\n    function onTriggerKeydown(event: KeyboardEvent) {\n      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;\n      event.preventDefault();\n      focusOnOpen = event.key === 'ArrowDown' ? 'first' : 'last';\n      setOpen(true, 'trigger', event);\n    }\n\n    function onPanelKeydown(event: KeyboardEvent) {\n      // Esc 也由原生 popover 关闭；这里显式关一次，不依赖各浏览器 close watcher 的细节（Firefox 偶尔不关）\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        setOpen(false, 'escape', event);\n        return;\n      }\n      if (event.key !== 'Tab') return;\n      restoreFocus = false;\n      setOpen(false, 'focus', event);\n    }\n\n    const { onToggle } = useAnchoredPopover(\n      () => ({\n        open,\n        anchor: point ? pointAnchor(point.x, point.y) : anchor,\n        panel,\n        floating: { placement, offset, fitHeight: true },\n        restoreFocus,\n      }),\n      {\n        close: (reason, event) => setOpen(false, reason, event),\n        // 打开后聚焦第一项（↑ 打开时最后一项），并为下一次打开恢复默认\n        shown: () => {\n          const items = enabledItems();\n          (focusOnOpen === 'first' ? items[0] : items.at(-1))?.focus();\n          focusOnOpen = 'first';\n          restoreFocus = true;\n        },\n      },\n    );\n    _effect(() =>\n      panel\n        ? rovingFocus(panel, { items: ITEMS, orientation: 'vertical', loop: true, typeahead: true })\n        : undefined,\n    );\n\n    return () => (\n      <>\n        {trigger({\n          id: triggerId,\n          ref: (value) => (anchor = toElement(value)),\n          onClick: (event: MouseEvent) => setOpen(!open, 'trigger', event),\n          onKeydown: onTriggerKeydown,\n          'aria-haspopup': 'menu',\n          'aria-expanded': open,\n          'aria-controls': id,\n        })}\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                floatingStyles.anchored,\n                floatingStyles.surface,\n                floatingStyles.scrollPanel,\n                menuStyles.panel,\n                size && fontSizeStyles[size],\n                transitions.scale,\n              ],\n              // 右键菜单没有触发器：名称由使用方的 aria-label 给\n              'aria-labelledby': anchor ? defaultLabelledBy(rest, triggerId) : undefined,\n            },\n            rest,\n            {\n              ref: _toRef(panel),\n              id,\n              popover: 'auto',\n              role: 'menu',\n              onToggle,\n              onKeydown: onPanelKeydown,\n            },\n          )}\n          data-state={open ? 'open' : 'closed'}\n        >\n          <ScrollArea\n            focusable={false}\n            sx={floatingStyles.scrollArea}\n            propsContent={{ sx: menuStyles.content }}\n          >\n            {(showContent() || hasShortcut(children)) && children}\n          </ScrollArea>\n        </div>\n      </>\n    );\n  },\n);\n\n/** 菜单项内容（图标、文字、快捷键）的选项，各种菜单项共有 */\nexport interface MenuItemContentProps {\n  /** 文字前的图标 */\n  icon?: IconData;\n  /**\n   * 快捷键：`'Mod+D'`（Mod 在 macOS 上是 ⌘，其他系统是 Ctrl，写法见 useHotkeys）。右侧显示成当前系统的写法；\n   * MenuItem、MenuCheckboxItem、MenuRadioItem 在菜单挂载期间注册它（菜单不必打开），按下时执行这一项；\n   * 读屏从菜单项的 aria-keyshortcuts 得知快捷键\n   */\n  shortcut?: string;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 文字层的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 快捷键提示的部件属性 */\n  propsShortcut?: Partial<TextProps>;\n  /** 文字下方的说明（第二行，弱化）：读屏把它当作这一项的描述（aria-describedby），不算进名称 */\n  description?: VNodeChild;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  children?: VNodeChild;\n}\n\n/** 复选、单选项的标记：占一列，没勾选时只占位，各项文字对齐 */\nexport interface MenuItemMark {\n  /** 勾选时显示的图标 */\n  icon: IconData;\n  /** 是否勾选 */\n  checked: boolean;\n  /** 标记图标的部件属性 */\n  props?: Partial<IconProps>;\n}\n\n/** 有说明的菜单项：文字与说明各自的 id（名称只取文字，说明作为描述） */\nexport interface MenuItemContentIds {\n  /** 文字的 id：菜单项的 aria-labelledby */\n  label: string;\n  /** 说明的 id：菜单项的 aria-describedby */\n  description: string;\n}\n\n/** 菜单项文字与说明的 id；在菜单项的 setup 里调用 */\nexport function useMenuItemContentIds(): MenuItemContentIds {\n  const id = useId();\n  return { label: `${id}-label`, description: `${id}-description` };\n}\n\n/** 有说明时菜单项的名称只取文字、说明作为描述；没有说明时名称就是全部内容 */\nexport function menuItemDescribedBy(description: VNodeChild | undefined, ids: MenuItemContentIds) {\n  return description == null\n    ? {}\n    : { 'aria-labelledby': ids.label, 'aria-describedby': ids.description };\n}\n\n/** 菜单项的内容：标记 + 图标 + 文字（与说明）+ 快捷键 */\nexport function menuItemContent(\n  {\n    icon,\n    shortcut,\n    description,\n    propsIcon,\n    propsLabel,\n    propsShortcut,\n    propsDescription,\n    children,\n  }: MenuItemContentProps,\n  mark?: MenuItemMark,\n  ids?: MenuItemContentIds,\n): VNodeChild {\n  return [\n    mark && (\n      <Icon\n        {...mergePartProps<IconProps>(\n          { icon: mark.icon, sx: [menuStyles.indicator, !mark.checked && menuStyles.hidden] },\n          mark.props,\n        )}\n      />\n    ),\n    icon && <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />,\n    description == null ? (\n      <span {...mergeAttrs<'span'>({ sx: menuStyles.label }, propsLabel)}>{children}</span>\n    ) : (\n      <span {...css.attrs(menuStyles.text)}>\n        <span {...mergeAttrs<'span'>({ id: ids?.label }, propsLabel)}>{children}</span>\n        <Text\n          {...mergePartProps<TextProps>(\n            { tone: 'muted', size: 'sm', id: ids?.description, sx: menuStyles.description },\n            propsDescription,\n          )}\n        >\n          {description}\n        </Text>\n      </span>\n    ),\n    shortcut && (\n      <Text\n        {...mergePartProps<TextProps>(\n          { tone: 'muted', size: 'sm', sx: menuStyles.shortcut },\n          propsShortcut,\n          // 有 aria-keyshortcuts 时读屏从它念，显示的文字不重复念；序列键没有，照常念\n          { 'aria-hidden': keyShortcuts(shortcut) ? true : undefined },\n        )}\n      >\n        {formatHotkey(shortcut)}\n      </Text>\n    ),\n  ];\n}\n\n/** 快捷键交给读屏（aria-keyshortcuts）：右侧显示的快捷键文字对读屏隐藏，不重复念 */\nconst keyShortcuts = (shortcut: string | undefined) =>\n  shortcut ? ariaKeyShortcut(shortcut) : undefined;\n\n/** 菜单项的快捷键：不可用时不触发；按下时和点击这一项一样执行（不关心菜单是否打开） */\nfunction useItemShortcut(read: () => { shortcut?: string; disabled: boolean }, run: () => void) {\n  useHotkeys(() => {\n    const { shortcut, disabled } = read();\n    return shortcut && !disabled ? { [shortcut]: run } : {};\n  });\n}\n\n/** 菜单项的色调：菜单里只区分普通操作与破坏性操作，其余状态色会让一列选项显得像警报 */\nexport type MenuItemTone = 'neutral' | 'danger';\n\n/** 菜单项的外观：幽灵按钮，内容靠起始边排列 */\nexport function menuItemSx(tone: MenuItemTone, disabled: boolean): SxStyles {\n  return [\n    itemStyles.row,\n    tone === 'danger' ? itemStyles.danger : itemStyles.hoverable,\n    focusRingStyles.visible,\n    rippleHostStyles.host,\n    disabled && itemStyles.disabled,\n  ] as SxStyles;\n}\n\n/** 菜单项共用的：所在的菜单、按下的波纹（链接项用；按钮项由 ButtonBase 给出）、执行后关闭菜单 */\nexport function useMenuItem() {\n  const menu = MenuContext.inject();\n  return {\n    menu,\n    ripple: useRipple(() => menu.ripple),\n    close: (event?: Event) => menu.close(event),\n  };\n}\n\n/** 按钮类菜单项这一次渲染的取值 */\ninterface ButtonItemOptions {\n  role: 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';\n  tone?: MenuItemTone;\n  disabled: boolean;\n  closeOnSelect: boolean;\n  /** 勾选与单选项的状态；普通项不写 */\n  checked?: boolean;\n  /** 勾选与单选项起始边的标记 */\n  indicator?: MenuItemMark;\n  content: MenuItemContentProps;\n  /** 使用方的其余属性，落到 button 上 */\n  attrs: object;\n}\n\n/**\n * 按钮类菜单项（MenuItem、MenuCheckboxItem、MenuRadioItem）共用的：快捷键、说明的关联、外观与角色，\n * 执行（点击、Enter、空格、快捷键）时调用 run，点击后按 closeOnSelect 关闭菜单。返回渲染函数\n */\nfunction useButtonItem(\n  read: () => { shortcut?: string; disabled: boolean },\n  run: () => void,\n): (options: ButtonItemOptions) => VNodeChild {\n  const item = useMenuItem();\n  const ids = useMenuItemContentIds();\n  useItemShortcut(read, run);\n  return ({\n    role,\n    tone = 'neutral',\n    disabled,\n    closeOnSelect,\n    checked,\n    indicator,\n    content,\n    attrs,\n  }) => (\n    <ButtonBase\n      {...mergePartProps<ButtonBaseProps>(\n        { sx: menuItemSx(tone, disabled), ripple: item.menu.ripple },\n        attrs as Partial<ButtonBaseProps>,\n        {\n          role,\n          disabled,\n          'aria-keyshortcuts': keyShortcuts(content.shortcut),\n          'aria-checked': checked,\n          ...menuItemDescribedBy(content.description, ids),\n          // 使用方的 onClick 先执行，preventDefault 可以拦下执行与关闭（mergeProps 的规则）\n          onClick: (event: MouseEvent) => {\n            run();\n            if (closeOnSelect) item.close(event);\n          },\n        },\n      )}\n      data-state={checked == null ? undefined : checked ? 'checked' : 'unchecked'}\n    >\n      {menuItemContent(content, indicator, ids)}\n    </ButtonBase>\n  );\n}\n\n/** 按钮类菜单项共有的属性；未声明的属性落到 button 上 */\nexport interface MenuButtonItemProps\n  // 原生的 onSelect 是文字选中事件，不是“选了这一项”：去掉它，误写成 onSelect 时类型检查会报错（用 onAction）\n  extends\n    PartProps<'button', 'role' | 'type' | 'disabled' | 'aria-checked' | 'onSelect'>,\n    MenuItemContentProps {\n  /** 不可用：跳过方向键移动，不能执行 */\n  disabled?: boolean;\n  /** 执行后是否关闭菜单 */\n  closeOnSelect?: boolean;\n}\n\n/** 未声明的属性落到 button（role=\"menuitem\"）上 */\nexport interface MenuItemProps extends MenuButtonItemProps {\n  /** 色调：删除等破坏性操作用 danger，默认 neutral */\n  tone?: MenuItemTone;\n  /** 执行（点击、Enter、空格）时调用；默认随后关闭菜单 */\n  onAction?: () => void;\n}\n\n/** 普通菜单项：执行一个操作 */\nexport const MenuItem = _component(\n  ({\n    tone = 'neutral',\n    disabled = false,\n    closeOnSelect = true,\n    onAction,\n    icon,\n    shortcut,\n    description,\n    propsIcon,\n    propsLabel,\n    propsShortcut,\n    propsDescription,\n    children,\n    ...rest\n  }: MenuItemProps) => {\n    const render = useButtonItem(\n      () => ({ shortcut, disabled }),\n      () => onAction?.(),\n    );\n    return () =>\n      render({\n        role: 'menuitem',\n        tone,\n        disabled,\n        closeOnSelect,\n        attrs: rest,\n        content: {\n          icon,\n          shortcut,\n          description,\n          propsIcon,\n          propsLabel,\n          propsShortcut,\n          propsDescription,\n          children,\n        },\n      });\n  },\n);\n\n/** 未声明的属性落到 a（role=\"menuitem\"）上 */\nexport interface MenuLinkItemProps\n  extends PartProps<'a', 'role' | 'aria-disabled'>, MenuItemContentProps {\n  /** 地址：站内链接经路由适配跳转，新标签页打开等照常交给浏览器 */\n  href: string;\n  /** 不可用：去掉 href，跳过方向键移动 */\n  disabled?: boolean;\n}\n\n/** 链接菜单项（a）：跳转到一个地址，随后关闭菜单 */\nexport const MenuLinkItem = _component(\n  ({\n    href,\n    disabled = false,\n    icon,\n    shortcut,\n    description,\n    propsIcon,\n    propsLabel,\n    propsShortcut,\n    propsDescription,\n    children,\n    ...rest\n  }: MenuLinkItemProps) => {\n    const item = useMenuItem();\n    const ids = useMenuItemContentIds();\n    const router = useRouterLink();\n    return () => (\n      <a\n        {...mergeAttrs<'a'>({ sx: menuItemSx('neutral', disabled) }, rest, {\n          role: 'menuitem',\n          href: disabled ? undefined : router.href(href),\n          'aria-keyshortcuts': keyShortcuts(shortcut),\n          'aria-disabled': disabled || undefined,\n          ...menuItemDescribedBy(description, ids),\n          onClick: (event: MouseEvent) => {\n            // 不可用的项不响应点击：不跳转，也不关闭菜单\n            if (disabled) return event.preventDefault();\n            router.onClick(event, href);\n            item.close(event);\n          },\n          ...item.ripple,\n        })}\n        data-disabled={disabled || undefined}\n      >\n        {menuItemContent(\n          {\n            icon,\n            shortcut,\n            description,\n            propsIcon,\n            propsLabel,\n            propsShortcut,\n            propsDescription,\n            children,\n          },\n          undefined,\n          ids,\n        )}\n      </a>\n    );\n  },\n);\n\n/** 未声明的属性落到 button（role=\"menuitemcheckbox\"）上 */\nexport interface MenuCheckboxItemProps extends MenuButtonItemProps {\n  /** 是否勾选：父级写 _checked={x} */\n  _checked?: boolean;\n  /** 勾选标记的部件属性 */\n  propsIndicator?: Partial<IconProps>;\n}\n\n/** 复选菜单项：切换一个开关；默认执行后不关闭菜单 */\nexport const MenuCheckboxItem = _component(\n  ({\n    _checked: checked = _bindable(false),\n    disabled = false,\n    closeOnSelect = false,\n    propsIndicator,\n    icon,\n    shortcut,\n    description,\n    propsIcon,\n    propsLabel,\n    propsShortcut,\n    propsDescription,\n    children,\n    ...rest\n  }: MenuCheckboxItemProps) => {\n    const render = useButtonItem(\n      () => ({ shortcut, disabled }),\n      () => (checked = !checked),\n    );\n    return () =>\n      render({\n        role: 'menuitemcheckbox',\n        disabled,\n        closeOnSelect,\n        checked,\n        indicator: { icon: Check, checked, props: propsIndicator },\n        attrs: rest,\n        content: {\n          icon,\n          shortcut,\n          description,\n          propsIcon,\n          propsLabel,\n          propsShortcut,\n          propsDescription,\n          children,\n        },\n      });\n  },\n);\n\n/** 未声明的属性落到分组的 div（role=\"group\"）上 */\nexport interface MenuGroupProps extends PartProps<'div', 'role'> {\n  /** 分组的标题（显示在组内第一行，同时是分组的名称） */\n  label?: VNodeChild;\n  /** 标题的部件属性 */\n  propsLabel?: Partial<TextProps>;\n  children?: VNodeChild;\n}\n\n/** 渲染分组：role=\"group\"，有标题时 aria-labelledby 指向它 */\nfunction renderGroup(\n  labelId: string,\n  { label, propsLabel, children, ...rest }: MenuGroupProps,\n): VNodeChild {\n  return (\n    <div\n      {...mergeAttrs<'div'>({}, rest, {\n        role: 'group',\n        'aria-labelledby': hasContent(label) ? labelId : undefined,\n      })}\n    >\n      {hasContent(label) && (\n        <Text\n          {...mergePartProps<TextProps>(\n            { tone: 'muted', size: 'sm', sx: menuStyles.groupLabel },\n            propsLabel,\n            { id: labelId },\n          )}\n        >\n          {label}\n        </Text>\n      )}\n      {children}\n    </div>\n  );\n}\n\n/** 菜单里的一组项，带可选的标题 */\nexport const MenuGroup = _component(({ label, propsLabel, children, ...rest }: MenuGroupProps) => {\n  const labelId = useId();\n  return () => renderGroup(labelId, { label, propsLabel, children, ...rest });\n});\n\n/** 未声明的属性落到分组的 div（role=\"group\"）上 */\nexport interface MenuRadioGroupProps extends MenuGroupProps {\n  /** 选中项的值：父级写 _value={x} */\n  _value?: string;\n}\n\n/** 一组单选菜单项：同一时间只选中一项 */\nexport const MenuRadioGroup = _component(\n  ({\n    _value: value = _bindable<string | undefined>(undefined),\n    label,\n    propsLabel,\n    children,\n    ...rest\n  }: MenuRadioGroupProps) => {\n    const labelId = useId();\n    MenuRadioGroupContext.provide({\n      get value() {\n        return value;\n      },\n      select: (next) => (value = next),\n    });\n    return () => renderGroup(labelId, { label, propsLabel, children, ...rest });\n  },\n);\n\n/** 未声明的属性落到 button（role=\"menuitemradio\"）上 */\nexport interface MenuRadioItemProps extends MenuButtonItemProps {\n  /** 这一项的值 */\n  value: string;\n  /** 选中标记的部件属性 */\n  propsIndicator?: Partial<IconProps>;\n}\n\n/** 单选菜单项：放在 MenuRadioGroup 里；默认执行后关闭菜单 */\nexport const MenuRadioItem = _component(\n  ({\n    value,\n    disabled = false,\n    closeOnSelect = true,\n    propsIndicator,\n    icon,\n    shortcut,\n    description,\n    propsIcon,\n    propsLabel,\n    propsShortcut,\n    propsDescription,\n    children,\n    ...rest\n  }: MenuRadioItemProps) => {\n    const group = MenuRadioGroupContext.inject();\n    const render = useButtonItem(\n      () => ({ shortcut, disabled }),\n      () => group.select(value),\n    );\n    return () => {\n      const checked = group.value === value;\n      return render({\n        role: 'menuitemradio',\n        disabled,\n        closeOnSelect,\n        checked,\n        indicator: { icon: Dot, checked, props: propsIndicator },\n        attrs: rest,\n        content: {\n          icon,\n          shortcut,\n          description,\n          propsIcon,\n          propsLabel,\n          propsShortcut,\n          propsDescription,\n          children,\n        },\n      });\n    };\n  },\n);\n\n/** 未声明的属性落到打开子菜单的 button（role=\"menuitem\"）上 */\nexport interface MenuSubProps\n  extends\n    PartProps<\n      'button',\n      'role' | 'type' | 'disabled' | 'aria-haspopup' | 'aria-expanded' | 'aria-controls'\n    >,\n    Omit<MenuItemContentProps, 'shortcut' | 'propsShortcut' | 'children'>,\n    OpenChangeProps {\n  /** 这一项的文字 */\n  label: VNodeChild;\n  /** 不可用：不能打开子菜单 */\n  disabled?: boolean;\n  /** 子菜单是否打开：父级可以写 _open={x} */\n  _open?: boolean;\n  /** 子菜单（role=\"menu\" 的 div）的部件属性 */\n  propsPanel?: PartProps<'div', 'id' | 'popover' | 'role'>;\n  /** 右侧箭头的部件属性 */\n  propsChevron?: Partial<IconProps>;\n  /** 子菜单里的项 */\n  children?: VNodeChild;\n}\n\n/** 指针停在子菜单项上多久后打开（毫秒） */\nconst SUBMENU_OPEN_DELAY = 100;\n/** 指针离开后，在安全三角里最多保持多久（毫秒） */\nconst SUBMENU_GRACE = 400;\n\ntype Point = readonly [number, number];\n\n/** 点 p 是否在三角形 abc 里（三条边的同侧判断） */\nfunction inTriangle(p: Point, a: Point, b: Point, c: Point) {\n  const side = (from: Point, to: Point) =>\n    (p[0] - to[0]) * (from[1] - to[1]) - (from[0] - to[0]) * (p[1] - to[1]);\n  const d1 = side(a, b);\n  const d2 = side(b, c);\n  const d3 = side(c, a);\n  return !((d1 < 0 || d2 < 0 || d3 < 0) && (d1 > 0 || d2 > 0 || d3 > 0));\n}\n\n/**\n * 子菜单：菜单里的一项，打开另一列菜单（WAI-ARIA 的子菜单）。→（从右到左排版时 ←）、Enter、空格打开并聚焦第一项，\n * 子菜单里 ←（→）或 Esc 关闭并回到这一项；指针停一会儿打开，朝子菜单斜着移动时经过别的项也不关（安全三角）。\n * 子菜单里执行一项后，整串菜单都关闭。\n *\n *   <MenuSub label=\"分享\" icon={Share}>\n *     <MenuItem onAction={copyLink}>复制链接</MenuItem>\n *   </MenuSub>\n */\nexport const MenuSub = _component(\n  ({\n    label,\n    _open: open = _bindable(false),\n    onOpenChange,\n    disabled = false,\n    icon,\n    propsIcon,\n    propsLabel,\n    propsPanel,\n    propsChevron,\n    children,\n    ...rest\n  }: MenuSubProps) => {\n    const parent = MenuContext.inject();\n    const id = useId();\n    const triggerId = `${id}-trigger`;\n    let trigger = _state.raw<HTMLElement | null>(null);\n    let panel = _state.raw<HTMLElement | null>(null);\n    let focusOnOpen = false;\n    let openTimer: ReturnType<typeof setTimeout> | undefined;\n    let stopGrace: (() => void) | undefined;\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n\n    MenuContext.provide({\n      get ripple() {\n        return parent.ripple;\n      },\n\n      close: (event) => {\n        setOpen(false, 'select', event);\n        parent.close(event);\n      },\n    });\n\n    const { onToggle } = useAnchoredPopover(\n      () => ({\n        open,\n        anchor: trigger,\n        panel,\n        // 往书写方向的结束边弹出；floating-ui 的 left / right 是物理方向\n        floating: {\n          placement: trigger && isRtl(trigger) ? 'left-start' : 'right-start',\n          offset: 2,\n          fitHeight: true,\n        },\n      }),\n      {\n        close: (reason, event) => setOpen(false, reason, event),\n        shown: () => {\n          if (focusOnOpen) menuItemsOf(panel)[0]?.focus();\n          focusOnOpen = false;\n        },\n      },\n    );\n    _effect(() =>\n      panel\n        ? rovingFocus(panel, { items: ITEMS, orientation: 'vertical', loop: true, typeahead: true })\n        : undefined,\n    );\n    onBeforeUnmount(() => {\n      clearTimeout(openTimer);\n      stopGrace?.();\n    });\n\n    const rtl = () => !!trigger && isRtl(trigger);\n\n    function openWithFocus(event: Event) {\n      if (disabled) return;\n      focusOnOpen = true;\n      // 已经开着（指针打开的）时直接把焦点移进去\n      if (open) menuItemsOf(panel)[0]?.focus();\n      setOpen(true, 'trigger', event);\n    }\n\n    function onTriggerKeydown(event: KeyboardEvent) {\n      if (event.key !== inlineArrows(rtl()).forward) return;\n      event.preventDefault();\n      openWithFocus(event);\n    }\n\n    function onPanelKeydown(event: KeyboardEvent) {\n      // Esc 只关最上层的子菜单，不冒泡到父菜单\n      if (event.key !== 'Escape' && event.key !== inlineArrows(rtl()).backward) return;\n      event.preventDefault();\n      event.stopPropagation();\n      setOpen(false, 'escape', event);\n    }\n\n    // 指针离开这一项：朝子菜单移动（在离开点与子菜单近边组成的三角形里）时保持打开，否则关闭\n    function onTriggerPointerleave(event: PointerEvent) {\n      clearTimeout(openTimer);\n      if (!open || !panel) return;\n      stopGrace?.();\n      const rect = panel.getBoundingClientRect();\n      const edge = rect.left >= event.clientX ? rect.left : rect.right;\n      const start: Point = [event.clientX, event.clientY];\n      const close = () => {\n        stopGrace?.();\n        setOpen(false, 'hover', event);\n      };\n      const onMove = (move: PointerEvent) => {\n        const target = move.target as Node;\n        if (panel?.contains(target) || trigger?.contains(target)) {\n          stopGrace?.();\n          return;\n        }\n        if (!inTriangle([move.clientX, move.clientY], start, [edge, rect.top], [edge, rect.bottom]))\n          close();\n      };\n      const timer = setTimeout(close, SUBMENU_GRACE);\n      document.addEventListener('pointermove', onMove);\n      stopGrace = () => {\n        clearTimeout(timer);\n        document.removeEventListener('pointermove', onMove);\n        stopGrace = undefined;\n      };\n    }\n\n    function onTriggerPointerenter(event: PointerEvent) {\n      if (disabled || event.pointerType === 'touch') return;\n      stopGrace?.();\n      clearTimeout(openTimer);\n      openTimer = setTimeout(() => setOpen(true, 'hover', event), SUBMENU_OPEN_DELAY);\n    }\n\n    return () => (\n      <>\n        <ButtonBase\n          {...mergePartProps<ButtonBaseProps>(\n            { sx: menuItemSx('neutral', disabled), ripple: parent.ripple },\n            rest as Partial<ButtonBaseProps>,\n            {\n              ref: (value: unknown) => (trigger = toElement(value)),\n              id: triggerId,\n              role: 'menuitem',\n              disabled,\n              'aria-haspopup': 'menu',\n              'aria-expanded': open,\n              'aria-controls': id,\n              onClick: openWithFocus,\n              onKeydown: onTriggerKeydown,\n              onPointerenter: onTriggerPointerenter,\n              onPointerleave: onTriggerPointerleave,\n            },\n          )}\n          data-state={open ? 'open' : 'closed'}\n        >\n          {menuItemContent({ icon, propsIcon, propsLabel, children: label })}\n          <Icon\n            {...mergePartProps<IconProps>(\n              { icon: ChevronRight, flipInRtl: true, sx: menuStyles.shortcut },\n              propsChevron,\n            )}\n          />\n        </ButtonBase>\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                floatingStyles.anchored,\n                floatingStyles.surface,\n                floatingStyles.scrollPanel,\n                menuStyles.panel,\n                transitions.scale,\n              ],\n              'aria-labelledby': defaultLabelledBy(propsPanel ?? {}, triggerId),\n            },\n            propsPanel,\n            {\n              ref: _toRef(panel),\n              id,\n              popover: 'auto',\n              role: 'menu',\n              onToggle,\n              onKeydown: onPanelKeydown,\n              onPointerenter: () => stopGrace?.(),\n            },\n          )}\n          data-state={open ? 'open' : 'closed'}\n        >\n          <ScrollArea\n            focusable={false}\n            sx={floatingStyles.scrollArea}\n            propsContent={{ sx: menuStyles.content }}\n          >\n            {children}\n          </ScrollArea>\n        </div>\n      </>\n    );\n  },\n);\n\n/**\n * 内容里有没有带快捷键的菜单项（含分组、子菜单里的）：只生成虚拟节点、不挂载。\n * 快捷键由菜单项注册，延迟渲染时菜单没打开就没有注册，所以这样的菜单不延迟\n */\nfunction hasShortcut(content: VNodeChild): boolean {\n  return childNodes(content).some((node) => {\n    if ((node.props as { shortcut?: unknown } | null)?.shortcut != null) return true;\n    const slot = (node.children as { default?: (...args: never[]) => VNodeChild } | null)?.default;\n    return typeof node.type === 'object' && typeof slot === 'function' && slot.length === 0\n      ? hasShortcut(slot())\n      : false;\n  });\n}\n"],"mappings":"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"}

package/dist/overlay/ModalCore.d.ts

@@ -0,0 +1,132 @@
+import type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type ButtonProps } from '../base/Button';
+import { type PresetIconButtonProps } from '../base/CloseButton';
+import { type HeadingProps } from '../base/Heading';
+import { type TextProps } from '../base/Text';
+import { type FlexProps } from '../layout/Flex';
+import { type ScrollAreaProps } from '../layout/ScrollArea';
+import { type OpenChangeDetails, type OpenChangeProps } from '../utils/dom/open-change';
+import { type LazyContentOptions } from '../utils/motion/presence';
+import { type PartProps } from '../utils/props';
+import type { PartLayer } from '../config/styles';
+import type { StatusTone } from '../utils/style/tone-styles';
+/** 打开、关闭与无障碍关联由组件管理；原生的 title 属性（悬停提示）让给标题 */
+export type ModalManaged = 'open' | 'role' | 'title' | 'aria-labelledby' | 'aria-describedby' | 'aria-modal';
+/** Dialog、Drawer、AlertDialog 共有的 props；未声明的属性落到 dialog 上 */
+export interface ModalProps extends PartProps<'dialog', ModalManaged>, LazyContentOptions, OpenChangeProps {
+    /** 是否打开：父级写 _open={x}；Esc、点击遮罩、关闭按钮都会关闭并写回 */
+    _open?: boolean;
+    /** 标题，同时是对话框的无障碍名称 */
+    title: VNodeChild;
+    /** 标题下的说明，读屏打开时一并念出（aria-describedby） */
+    description?: VNodeChild;
+    /** 底部操作区 */
+    footer?: VNodeChild;
+    /** 标题行右侧的关闭按钮，默认 true */
+    closable?: boolean;
+    /** 点击遮罩是否关闭，默认 true；需要用户明确选择时设为 false（Esc 仍可关闭） */
+    dismissible?: boolean;
+    /**
+     * 用户要关闭时（关闭按钮、取消、Esc、点遮罩）先问它：返回 false（或 resolve 成 false）就不关，
+     * 如表单有未保存的改动时先确认；参数是关闭的原因。确认按钮与父级把 open 改成 false 不经过它
+     */
+    beforeClose?: (details: OpenChangeDetails) => boolean | Promise<boolean>;
+    /**
+     * 确认：写了就在页脚（footer 之后）放“取消”与“确认”两个按钮。返回 Promise 时确认按钮加载中，
+     * 取消、Esc、遮罩、关闭按钮暂不可用，完成后关闭；返回 false（或 resolve 成 false）、失败（reject）时保持打开，
+     * 校验没过、提交失败由调用方提示原因
+     */
+    onConfirm?: () => unknown;
+    /** 确认按钮的文字，默认取语言包（确定） */
+    confirmText?: VNodeChild;
+    /** 取消按钮的文字，默认取语言包（取消） */
+    cancelText?: VNodeChild;
+    /** 确认按钮的色调，默认 accent；删除、驳回这类破坏性操作用 danger */
+    tone?: StatusTone;
+    /** 确认按钮的部件属性（表单的 type="submit" 与 form 写在这里） */
+    propsConfirm?: Partial<ButtonProps>;
+    /** 取消按钮的部件属性 */
+    propsCancel?: Partial<ButtonProps>;
+    /** 标题行的部件属性 */
+    propsHeader?: Partial<FlexProps>;
+    /** 标题的部件属性 */
+    propsTitle?: Partial<HeadingProps>;
+    /** 说明的部件属性 */
+    propsDescription?: Partial<TextProps>;
+    /** 关闭按钮的部件属性 */
+    propsClose?: Partial<PresetIconButtonProps>;
+    /** 正文（滚动区域）的部件属性 */
+    propsBody?: Partial<ScrollAreaProps>;
+    /** 页脚的部件属性 */
+    propsFooter?: Partial<FlexProps>;
+    children?: VNodeChild;
+}
+/** 模态面板的部件：dialog 元素、标题行、标题、关闭按钮、说明、正文（滚动区与里面的内容）、页脚 */
+export type ModalPart = 'root' | 'header' | 'title' | 'close' | 'description' | 'body' | 'bodyContent' | 'footer';
+/** 内核额外需要的：各部件的外观由各组件的配方给出；AlertDialog 改角色 */
+export interface ModalCoreProps extends ModalProps {
+    /** 各部件的默认层（样式 + 部件标记）：Dialog、Drawer 的配方算出（useRecipe），base 里并进了 modalPartStyles */
+    parts: Readonly<Record<ModalPart, PartLayer>>;
+    /** dialog 上另外加的样式（对话框的淡入放大） */
+    panelSx?: SxStyles;
+    /** AlertDialog 改为 alertdialog；不写时是原生 dialog 的隐含角色 */
+    role?: 'alertdialog';
+    /** 直接放在 dialog 里、不随正文滚动的内容（抽屉边上的宽度调整手柄） */
+    edge?: VNodeChild;
+}
+/**
+ * 模态面板共有的样式：Dialog、Drawer 的配方把它并进 base（各自的 root 再加上居中或贴边的样式），
+ * 所以 createUi / Provider 的 styles.Dialog、styles.Drawer 能定制标题行、正文、页脚
+ */
+export declare const modalPartStyles: {
+    readonly root: {
+        readonly boxSizing: 'border-box';
+        readonly display: {
+            readonly default: 'none';
+            readonly ':modal': 'flex';
+        };
+        readonly flexDirection: 'column';
+        readonly padding: 0;
+        readonly borderWidth: '_xs';
+        readonly borderStyle: 'solid';
+        readonly borderColor: '_border';
+        readonly backgroundColor: '_surfaceRaised';
+        readonly color: '_text';
+        readonly boxShadow: '_xl';
+        readonly lineHeight: '_normal';
+    };
+    readonly header: {
+        readonly paddingBlockStart: '_xl';
+        readonly paddingInline: '_xl';
+    };
+    readonly title: {
+        readonly flexGrow: 1;
+        readonly minWidth: 0;
+        readonly margin: 0;
+    };
+    readonly close: {
+        readonly flexShrink: 0;
+        readonly marginBlock: `calc(-1 * ${string})`;
+        readonly marginInlineEnd: `calc(-1 * ${string})`;
+    };
+    readonly description: {
+        readonly marginBlockStart: '_xs';
+        readonly paddingInline: '_xl';
+        readonly color: '_textMuted';
+    };
+    readonly body: {
+        readonly flexGrow: 1;
+        readonly minHeight: 0;
+    };
+    readonly bodyContent: {
+        readonly paddingBlock: '_lg';
+        readonly paddingInline: '_xl';
+    };
+    readonly footer: {
+        readonly paddingBlockEnd: '_xl';
+        readonly paddingInline: '_xl';
+    };
+};
+/** Dialog、Drawer、AlertDialog 的内核：原生模态 dialog 的打开、关闭、焦点与滚动 */
+export declare const ModalCore: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ModalCoreProps>;

package/dist/overlay/ModalCore.js

@@ -0,0 +1,274 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { transitions } from "../utils/style/transitions.js";
+import { Button } from "../base/Button.js";
+import { CloseButton } from "../base/CloseButton.js";
+import { ScrollArea } from "../layout/ScrollArea.js";
+import { openModalDialog } from "../utils/dom/overlay.js";
+import { H2 } from "../base/Heading.js";
+import { useLazyContent } from "../utils/motion/presence.js";
+import { Paragraph } from "../base/Text.js";
+import { Flex } from "../layout/Flex.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { Fragment, createVNode, mergeProps, onBeforeUnmount, ref, shallowRef, unref, useId } from "vue";
+import { _component, bindable, childrenProp, childrenStable, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/overlay/ModalCore.tsx
+/** 打开、关闭与无障碍关联由组件管理；原生的 title 属性（悬停提示）让给标题 */
+/** Dialog、Drawer、AlertDialog 共有的 props；未声明的属性落到 dialog 上 */
+/** 模态面板的部件：dialog 元素、标题行、标题、关闭按钮、说明、正文（滚动区与里面的内容）、页脚 */
+/** 内核额外需要的：各部件的外观由各组件的配方给出；AlertDialog 改角色 */
+/**
+* 模态面板共有的样式：Dialog、Drawer 的配方把它并进 base（各自的 root 再加上居中或贴边的样式），
+* 所以 createUi / Provider 的 styles.Dialog、styles.Drawer 能定制标题行、正文、页脚
+*/
+var modalPartStyles = {
+	root: {
+		boxSizing: "border-box",
+		display: {
+			default: "none",
+			":modal": "flex"
+		},
+		flexDirection: "column",
+		padding: 0,
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_border",
+		backgroundColor: "_surfaceRaised",
+		color: "_text",
+		boxShadow: "_xl",
+		lineHeight: "_normal"
+	},
+	header: {
+		paddingBlockStart: "_xl",
+		paddingInline: "_xl"
+	},
+	title: {
+		flexGrow: 1,
+		minWidth: 0,
+		margin: 0
+	},
+	close: {
+		flexShrink: 0,
+		marginBlock: `calc(-1 * ${t.space.xs})`,
+		marginInlineEnd: `calc(-1 * ${t.space.sm})`
+	},
+	description: {
+		marginBlockStart: "_xs",
+		paddingInline: "_xl",
+		color: "_textMuted"
+	},
+	body: {
+		flexGrow: 1,
+		minHeight: 0
+	},
+	bodyContent: {
+		paddingBlock: "_lg",
+		paddingInline: "_xl"
+	},
+	footer: {
+		paddingBlockEnd: "_xl",
+		paddingInline: "_xl"
+	}
+};
+/** Dialog、Drawer、AlertDialog 的内核：原生模态 dialog 的打开、关闭、焦点与滚动 */
+var ModalCore = /*#__PURE__*/ _component((_props, _ctx) => {
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const title = readonlyProp(_props, "title");
+	const description = readonlyProp(_props, "description");
+	const footer = readonlyProp(_props, "footer");
+	const closable = readonlyProp(_props, "closable", true);
+	const dismissible = readonlyProp(_props, "dismissible", true);
+	const beforeClose = readonlyProp(_props, "beforeClose");
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const onConfirm = readonlyProp(_props, "onConfirm");
+	const confirmText = readonlyProp(_props, "confirmText");
+	const cancelText = readonlyProp(_props, "cancelText");
+	const tone = readonlyProp(_props, "tone", "accent");
+	const propsConfirm = readonlyProp(_props, "propsConfirm");
+	const propsCancel = readonlyProp(_props, "propsCancel");
+	const parts = readonlyProp(_props, "parts");
+	const panelSx = readonlyProp(_props, "panelSx");
+	const role = readonlyProp(_props, "role");
+	const propsHeader = readonlyProp(_props, "propsHeader");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const propsClose = readonlyProp(_props, "propsClose");
+	const propsBody = readonlyProp(_props, "propsBody");
+	const propsFooter = readonlyProp(_props, "propsFooter");
+	const lazy = readonlyProp(_props, "lazy", true);
+	const edge = readonlyProp(_props, "edge");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	const id = useId();
+	const showContent = useLazyContent(() => open.value, () => lazy.value);
+	const titleId = `${id}-title`;
+	const descriptionId = `${id}-description`;
+	let dialog = shallowRef(null);
+	let release;
+	let pending = ref(false);
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	let closing;
+	function closeWith(reason, event) {
+		closing = {
+			reason,
+			event
+		};
+		dialog.value?.close();
+	}
+	/** 用户要关闭：先问 beforeClose，同意了才关 */
+	async function requestClose(reason, event) {
+		if (pending.value || beforeClose.value && !await beforeClose.value({
+			reason,
+			event
+		})) return;
+		closeWith(reason, event);
+	}
+	async function confirm() {
+		if (pending.value) return;
+		pending.value = true;
+		try {
+			if (await onConfirm.value?.() === false) return;
+		} catch (error) {
+			console.error("对话框的 onConfirm 失败，保持打开", error);
+			return;
+		} finally {
+			pending.value = false;
+		}
+		closeWith("confirm");
+	}
+	function show() {
+		if (!dialog.value || dialog.value.open) return;
+		release = openModalDialog(dialog.value, {
+			dismissOnBackdrop: dismissible.value,
+			onDismiss: (event) => void requestClose("outside", event)
+		});
+	}
+	function onCancel(event) {
+		if (!pending.value && !beforeClose.value) {
+			closing = {
+				reason: "escape",
+				event
+			};
+			return;
+		}
+		event.preventDefault();
+		requestClose("escape", event);
+	}
+	function onClose() {
+		release?.();
+		release = void 0;
+		const { reason, event } = closing ?? { reason: "escape" };
+		closing = void 0;
+		setOpen(false, reason, event);
+	}
+	effect(() => {
+		if (open.value) show();
+		else if (dialog.value?.open) dialog.value.close();
+	});
+	onBeforeUnmount(() => release?.());
+	return () => createVNode("dialog", mergeAttrs({
+		...parts.value.root,
+		sx: [
+			parts.value.root.sx,
+			panelSx.value,
+			transitions.backdrop
+		]
+	}, rest, {
+		ref: dialog,
+		role: role.value,
+		"aria-labelledby": titleId,
+		"aria-describedby": hasContent(description.value) ? descriptionId : void 0,
+		onClose,
+		onCancel
+	}), [
+		createVNode(Flex, mergeProps(mergePartProps({
+			...parts.value.header,
+			align: "start",
+			gap: "md"
+		}, propsHeader.value), { "key": "__site1" }), {
+			default: () => [createVNode(H2, mergeProps(mergePartProps({
+				...parts.value.title,
+				size: "lg"
+			}, propsTitle.value, { id: titleId }), { "key": "__site0" }), {
+				default: () => [unref(title)],
+				$stable: true
+			}), closable.value && createVNode(CloseButton, mergePartProps(parts.value.close, propsClose.value, {
+				disabled: pending.value,
+				onClick: (event) => void requestClose("close", event)
+			}), null)],
+			$stable: true
+		}),
+		hasContent(description.value) && createVNode(Paragraph, mergeProps(mergePartProps(parts.value.description, propsDescription.value, { id: descriptionId }), { "key": "__site2" }), {
+			default: () => [unref(description)],
+			$stable: true
+		}),
+		createVNode(ScrollArea, mergeProps(mergePartProps({
+			...parts.value.body,
+			propsContent: parts.value.bodyContent
+		}, propsBody.value), { "key": "__site3" }), {
+			default: () => [showContent() && children.value],
+			$stable: childrenStable()
+		}),
+		(hasContent(footer.value) || onConfirm.value) && createVNode(Flex, mergeProps(mergePartProps({
+			...parts.value.footer,
+			justify: "end",
+			gap: "sm",
+			wrap: true
+		}, propsFooter.value), { "key": "__site6" }), {
+			default: () => [unref(footer), onConfirm.value && createVNode(Fragment, null, [createVNode(Button, mergeProps(mergePartProps({
+				variant: "soft",
+				tone: "neutral"
+			}, propsCancel.value, {
+				disabled: pending.value,
+				onClick: (event) => void requestClose("close", event)
+			}), { "key": "__site4" }), {
+				default: () => [cancelText.value ?? lang.cancel],
+				$stable: true
+			}), createVNode(Button, mergeProps(mergePartProps({ tone: tone.value }, propsConfirm.value, {
+				loading: pending.value,
+				onClick: () => void confirm()
+			}), { "key": "__site5" }), {
+				default: () => [confirmText.value ?? lang.confirm],
+				$stable: true
+			})])],
+			$stable: true
+		}),
+		edge.value
+	]);
+}, {
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"title",
+		"description",
+		"footer",
+		"closable",
+		"dismissible",
+		"beforeClose",
+		"onOpenChange",
+		"onConfirm",
+		"confirmText",
+		"cancelText",
+		"tone",
+		"propsConfirm",
+		"propsCancel",
+		"parts",
+		"panelSx",
+		"role",
+		"propsHeader",
+		"propsTitle",
+		"propsDescription",
+		"propsClose",
+		"propsBody",
+		"propsFooter",
+		"lazy",
+		"edge"
+	],
+	name: "ModalCore"
+});
+//#endregion
+export { ModalCore, modalPartStyles };
+
+//# sourceMappingURL=ModalCore.js.map

package/dist/overlay/ModalCore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalCore.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","_vue_unref","_vtp_childrenStable","_Fragment"],"sources":["../../src/overlay/ModalCore.tsx"],"sourcesContent":["/**\n * 模态面板的内核（原生 dialog + showModal）：Dialog、Drawer、AlertDialog 都建在它上面，只各自给出外观。\n *\n * 顶层渲染、背景 inert、Esc 关闭由浏览器负责；组件补上浏览器不做或不一致的（utils/dom/overlay）：\n * 打开前记下焦点来源、关闭后还回去，焦点循环，锁定页面滚动，点击遮罩关闭\n * （原生的 closedby=\"any\" 到 2026 年 Safari 仍不支持，所以仍用 dismissOnBackdrop）。\n * 初始焦点：浏览器聚焦第一个可聚焦元素，有 autofocus 的优先（参考 Radix Dialog、React Aria Modal）。\n *\n * 写了 onConfirm 时页脚有“取消 / 确认”两个按钮（在 footer 之后）：确认返回 Promise 时按钮加载中、这期间关不掉，\n * 完成后关闭；返回 false 或失败时保持打开（同 Ant Design Modal 的 onOk）。表单在正文里时，确认按钮写\n * propsConfirm={{ type: 'submit', form: 表单的 id }}，在输入框里按 Enter 也是确认。\n *\n * 部件：Header（标题行，Flex）、Title（H2）、Close（CloseButton）、Description（Paragraph）、\n * Body（ScrollArea：内容长时只滚正文，标题与页脚固定）、Footer（Flex，靠结束边排列）、Cancel、Confirm（Button，写了 onConfirm 时）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { PartStyles, SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onBeforeUnmount, useId, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { CloseButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { H2, type HeadingProps } from '../base/Heading';\nimport { Paragraph, type TextProps } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { Flex, type FlexProps } from '../layout/Flex';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport {\n  openSetter,\n  type OpenChangeDetails,\n  type OpenChangeProps,\n  type OpenChangeReasons,\n} from '../utils/dom/open-change';\nimport { openModalDialog } from '../utils/dom/overlay';\nimport { useLazyContent, type LazyContentOptions } from '../utils/motion/presence';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport type { PartLayer } from '../config/styles';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { transitions } from '../utils/style/transitions';\nimport { t } from '../config/theme/tokens';\n\n/** 打开、关闭与无障碍关联由组件管理；原生的 title 属性（悬停提示）让给标题 */\nexport type ModalManaged =\n  'open' | 'role' | 'title' | 'aria-labelledby' | 'aria-describedby' | 'aria-modal';\n\n/** Dialog、Drawer、AlertDialog 共有的 props；未声明的属性落到 dialog 上 */\nexport interface ModalProps\n  extends PartProps<'dialog', ModalManaged>, LazyContentOptions, OpenChangeProps {\n  /** 是否打开：父级写 _open={x}；Esc、点击遮罩、关闭按钮都会关闭并写回 */\n  _open?: boolean;\n  /** 标题，同时是对话框的无障碍名称 */\n  title: VNodeChild;\n  /** 标题下的说明，读屏打开时一并念出（aria-describedby） */\n  description?: VNodeChild;\n  /** 底部操作区 */\n  footer?: VNodeChild;\n  /** 标题行右侧的关闭按钮，默认 true */\n  closable?: boolean;\n  /** 点击遮罩是否关闭，默认 true；需要用户明确选择时设为 false（Esc 仍可关闭） */\n  dismissible?: boolean;\n  /**\n   * 用户要关闭时（关闭按钮、取消、Esc、点遮罩）先问它：返回 false（或 resolve 成 false）就不关，\n   * 如表单有未保存的改动时先确认；参数是关闭的原因。确认按钮与父级把 open 改成 false 不经过它\n   */\n  beforeClose?: (details: OpenChangeDetails) => boolean | Promise<boolean>;\n  /**\n   * 确认：写了就在页脚（footer 之后）放“取消”与“确认”两个按钮。返回 Promise 时确认按钮加载中，\n   * 取消、Esc、遮罩、关闭按钮暂不可用，完成后关闭；返回 false（或 resolve 成 false）、失败（reject）时保持打开，\n   * 校验没过、提交失败由调用方提示原因\n   */\n  onConfirm?: () => unknown;\n  /** 确认按钮的文字，默认取语言包（确定） */\n  confirmText?: VNodeChild;\n  /** 取消按钮的文字，默认取语言包（取消） */\n  cancelText?: VNodeChild;\n  /** 确认按钮的色调，默认 accent；删除、驳回这类破坏性操作用 danger */\n  tone?: StatusTone;\n  /** 确认按钮的部件属性（表单的 type=\"submit\" 与 form 写在这里） */\n  propsConfirm?: Partial<ButtonProps>;\n  /** 取消按钮的部件属性 */\n  propsCancel?: Partial<ButtonProps>;\n  /** 标题行的部件属性 */\n  propsHeader?: Partial<FlexProps>;\n  /** 标题的部件属性 */\n  propsTitle?: Partial<HeadingProps>;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  /** 关闭按钮的部件属性 */\n  propsClose?: Partial<PresetIconButtonProps>;\n  /** 正文（滚动区域）的部件属性 */\n  propsBody?: Partial<ScrollAreaProps>;\n  /** 页脚的部件属性 */\n  propsFooter?: Partial<FlexProps>;\n  children?: VNodeChild;\n}\n\n/** 模态面板的部件：dialog 元素、标题行、标题、关闭按钮、说明、正文（滚动区与里面的内容）、页脚 */\nexport type ModalPart =\n  'root' | 'header' | 'title' | 'close' | 'description' | 'body' | 'bodyContent' | 'footer';\n\n/** 内核额外需要的：各部件的外观由各组件的配方给出；AlertDialog 改角色 */\nexport interface ModalCoreProps extends ModalProps {\n  /** 各部件的默认层（样式 + 部件标记）：Dialog、Drawer 的配方算出（useRecipe），base 里并进了 modalPartStyles */\n  parts: Readonly<Record<ModalPart, PartLayer>>;\n  /** dialog 上另外加的样式（对话框的淡入放大） */\n  panelSx?: SxStyles;\n  /** AlertDialog 改为 alertdialog；不写时是原生 dialog 的隐含角色 */\n  role?: 'alertdialog';\n  /** 直接放在 dialog 里、不随正文滚动的内容（抽屉边上的宽度调整手柄） */\n  edge?: VNodeChild;\n}\n\n/**\n * 模态面板共有的样式：Dialog、Drawer 的配方把它并进 base（各自的 root 再加上居中或贴边的样式），\n * 所以 createUi / Provider 的 styles.Dialog、styles.Drawer 能定制标题行、正文、页脚\n */\nexport const modalPartStyles = {\n  root: {\n    boxSizing: 'border-box',\n    // 只在模态打开时排版；关闭时回到 none，离场过渡由 display 的 allow-discrete 撑住\n    display: { default: 'none', ':modal': 'flex' },\n    flexDirection: 'column',\n    padding: 0,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    backgroundColor: '_surfaceRaised',\n    color: '_text',\n    boxShadow: '_xl',\n    lineHeight: '_normal',\n  },\n  header: { paddingBlockStart: '_xl', paddingInline: '_xl' },\n  title: { flexGrow: 1, minWidth: 0, margin: 0 },\n  close: {\n    flexShrink: 0,\n    marginBlock: `calc(-1 * ${t.space.xs})`,\n    marginInlineEnd: `calc(-1 * ${t.space.sm})`,\n  },\n  description: { marginBlockStart: '_xs', paddingInline: '_xl', color: '_textMuted' },\n  body: { flexGrow: 1, minHeight: 0 },\n  bodyContent: { paddingBlock: '_lg', paddingInline: '_xl' },\n  footer: { paddingBlockEnd: '_xl', paddingInline: '_xl' },\n} as const satisfies PartStyles<ModalPart>;\n\n/** Dialog、Drawer、AlertDialog 的内核：原生模态 dialog 的打开、关闭、焦点与滚动 */\nexport const ModalCore = _component(\n  ({\n    _open: open = _bindable(false),\n    title,\n    description,\n    footer,\n    closable = true,\n    dismissible = true,\n    beforeClose,\n    onOpenChange,\n    onConfirm,\n    confirmText,\n    cancelText,\n    tone = 'accent',\n    propsConfirm,\n    propsCancel,\n    parts,\n    panelSx,\n    role,\n    propsHeader,\n    propsTitle,\n    propsDescription,\n    propsClose,\n    propsBody,\n    propsFooter,\n    lazy = true,\n    edge,\n    children,\n    ...rest\n  }: ModalCoreProps) => {\n    const lang = useLang();\n    const id = useId();\n    const showContent = useLazyContent(\n      () => open,\n      () => lazy,\n    );\n    const titleId = `${id}-title`;\n    const descriptionId = `${id}-description`;\n    let dialog = _state.raw<HTMLDialogElement | null>(null);\n    let release: (() => void) | undefined;\n    // 等确认的结果：这期间关不掉\n    let pending = _state(false);\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    // 这次关闭的原因：关之前记下，原生 close 事件里报告；没记下的是浏览器直接关的（Esc）\n    let closing: OpenChangeDetails | undefined;\n\n    function closeWith(reason: keyof OpenChangeReasons, event?: Event) {\n      closing = { reason, event };\n      dialog?.close();\n    }\n\n    /** 用户要关闭：先问 beforeClose，同意了才关 */\n    async function requestClose(reason: keyof OpenChangeReasons, event?: Event) {\n      if (pending || (beforeClose && !(await beforeClose({ reason, event })))) return;\n      closeWith(reason, event);\n    }\n\n    async function confirm() {\n      if (pending) return;\n      pending = true;\n      try {\n        if ((await onConfirm?.()) === false) return;\n      } catch (error) {\n        // 调用方负责提示失败原因；这里只保持打开，并留下记录\n        console.error('对话框的 onConfirm 失败，保持打开', error);\n        return;\n      } finally {\n        pending = false;\n      }\n      closeWith('confirm');\n    }\n\n    function show() {\n      if (!dialog || dialog.open) return;\n      release = openModalDialog(dialog, {\n        dismissOnBackdrop: dismissible,\n        onDismiss: (event) => void requestClose('outside', event),\n      });\n    }\n\n    // Esc：原生 dialog 先发 cancel；等确认时不关，有 beforeClose 时拦下来，问过再关\n    function onCancel(event: Event) {\n      if (!pending && !beforeClose) {\n        closing = { reason: 'escape', event };\n        return;\n      }\n      event.preventDefault();\n      void requestClose('escape', event);\n    }\n\n    // 不论以什么方式关闭（Esc、遮罩、关闭按钮、open 改为 false），都会触发原生 close 事件；\n    // 使用方的 onClose（原生事件）照常落到 dialog 上，先于这里执行\n    function onClose() {\n      release?.();\n      release = undefined;\n      const { reason, event } = closing ?? { reason: 'escape' };\n      closing = undefined;\n      // 父级把 open 改成 false 时这里已经是 false，不再通知\n      setOpen(false, reason, event);\n    }\n\n    // DOM 更新后执行（首次在挂载后 dialog 已就位）\n    _effect(() => {\n      if (open) show();\n      else if (dialog?.open) dialog.close();\n    });\n    onBeforeUnmount(() => release?.());\n\n    return () => (\n      <dialog\n        {...mergeAttrs<'dialog'>(\n          { ...parts.root, sx: [parts.root.sx, panelSx, transitions.backdrop] },\n          rest,\n          {\n            ref: _toRef(dialog),\n            role,\n            'aria-labelledby': titleId,\n            'aria-describedby': hasContent(description) ? descriptionId : undefined,\n            onClose,\n            onCancel,\n          },\n        )}\n      >\n        <Flex\n          {...mergePartProps<FlexProps>(\n            { ...parts.header, align: 'start', gap: 'md' },\n            propsHeader,\n          )}\n        >\n          <H2\n            {...mergePartProps<HeadingProps>({ ...parts.title, size: 'lg' }, propsTitle, {\n              id: titleId,\n            })}\n          >\n            {title}\n          </H2>\n          {closable && (\n            <CloseButton\n              {...mergePartProps<PresetIconButtonProps>(parts.close, propsClose, {\n                disabled: pending,\n                onClick: (event: MouseEvent) => void requestClose('close', event),\n              })}\n            />\n          )}\n        </Flex>\n        {hasContent(description) && (\n          <Paragraph\n            {...mergePartProps<TextProps>(parts.description, propsDescription, {\n              id: descriptionId,\n            })}\n          >\n            {description}\n          </Paragraph>\n        )}\n        <ScrollArea\n          {...mergePartProps<ScrollAreaProps>(\n            { ...parts.body, propsContent: parts.bodyContent },\n            propsBody,\n          )}\n        >\n          {showContent() && children}\n        </ScrollArea>\n        {(hasContent(footer) || onConfirm) && (\n          <Flex\n            {...mergePartProps<FlexProps>(\n              { ...parts.footer, justify: 'end', gap: 'sm', wrap: true },\n              propsFooter,\n            )}\n          >\n            {footer}\n            {onConfirm && (\n              <>\n                <Button\n                  {...mergePartProps<ButtonProps>(\n                    { variant: 'soft', tone: 'neutral' },\n                    propsCancel,\n                    {\n                      disabled: pending,\n                      onClick: (event: MouseEvent) => void requestClose('close', event),\n                    },\n                  )}\n                >\n                  {cancelText ?? lang.cancel}\n                </Button>\n                <Button\n                  {...mergePartProps<ButtonProps>({ tone }, propsConfirm, {\n                    loading: pending,\n                    onClick: () => void confirm(),\n                  })}\n                >\n                  {confirmText ?? lang.confirm}\n                </Button>\n              </>\n            )}\n          </Flex>\n        )}\n        {edge}\n      </dialog>\n    );\n  },\n  { name: 'ModalCore' },\n);\n"],"mappings":"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"}

package/dist/overlay/Popconfirm.d.ts

@@ -0,0 +1,49 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type ButtonProps } from '../base/Button';
+import { type IconData, type IconProps } from '../base/Icon';
+import { type FlexProps } from '../layout/Flex';
+import { type PartProps } from '../utils/props';
+import { type StatusTone } from '../utils/style/tone-styles';
+import { type PopoverProps } from './Popover';
+/** 未声明的属性落到弹出层的 div 上；位置、箭头、触发器同 Popover */
+export interface PopconfirmProps extends Omit<PopoverProps, 'role' | 'children' | 'title'> {
+    /** 问题，同时是弹出层的无障碍名称 */
+    title: VNodeChild;
+    /** 补充说明（aria-describedby） */
+    description?: VNodeChild;
+    /** 确认按钮与图标的色调，默认 warning；删除这类破坏性操作用 danger */
+    tone?: StatusTone;
+    /** 图标；不写时按色调选，false 不显示 */
+    icon?: IconData | false;
+    /** 确认：返回 Promise 时等它完成再关闭；返回 false、失败时保持打开 */
+    onConfirm: () => unknown;
+    /** 取消（含 Esc、点击外部） */
+    onCancel?: () => void;
+    /** 确认按钮的文字，默认取语言包（确定） */
+    confirmText?: VNodeChild;
+    /** 取消按钮的文字，默认取语言包（取消） */
+    cancelText?: VNodeChild;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 标题的部件属性 */
+    propsTitle?: PartProps<'div'>;
+    /** 说明的部件属性 */
+    propsDescription?: PartProps<'div'>;
+    /** 按钮行的部件属性 */
+    propsFooter?: Partial<FlexProps>;
+    /** 确认按钮的部件属性 */
+    propsConfirm?: Partial<ButtonProps>;
+    /** 取消按钮的部件属性 */
+    propsCancel?: Partial<ButtonProps>;
+}
+/** Popconfirm 的样式：body、icon、title、description、footer */
+export declare const popconfirmStyles: Readonly<{
+    body: css.CompiledStyles;
+    description: css.CompiledStyles;
+    footer: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    title: css.CompiledStyles;
+}>;
+/** 气泡确认：Popover + 问题 + 取消 / 确认 */
+export declare const Popconfirm: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PopconfirmProps>;