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

package/dist/overlay/CommandPalette.js

@@ -0,0 +1,250 @@
+import { breakpoints } from "../config/theme/tokens.js";
+import { useLang, useTextMatcher } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { visuallyHiddenStyles } from "../base/VisuallyHidden.js";
+import { ButtonBase } from "../base/ButtonBase.js";
+import { Kbd } from "../base/Kbd.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { ariaKeyShortcut, formatHotkey, useHotkeys } from "../utils/dom/hotkeys.js";
+import { handleListKeydown, toListboxOption, useListState } from "../input/list-state.js";
+import { controlParts, useControlAppearance } from "../input/control.js";
+import { Dialog } from "./Dialog.js";
+import { ListboxView, activeOptionId } from "../input/Listbox.js";
+import { Fragment, createVNode, mergeProps, useId, vModelText, watch, withDirectives } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Search } from "@lucide/icons";
+//#region src/overlay/CommandPalette.tsx
+/**
+* 命令面板：Mod+K（macOS 上 ⌘K，其他系统 Ctrl+K）或点触发按钮打开的搜索对话框，边输入边过滤，回车打开。
+* 文档站的站内搜索、后台的“跳转到…”都用它；数据由使用方给，选中后做什么也由使用方决定。
+*
+*   <CommandPalette
+*     items={pages}
+*     toOption={(page) => ({ value: page.path, label: page.title, description: page.summary, group: page.section })}
+*     onAction={(page) => router.push(page.path)}
+*   />
+*
+* 结构是 Dialog（模态、焦点循环、Esc 关闭）里放一个 combobox 输入框与 ListboxView：
+* 焦点一直在输入框上，↑↓ / Page Up / Page Down 移动高亮（aria-activedescendant），Enter 选中；
+* 数据层与 Select、Combobox 相同（useListState），选项多时虚拟滚动。
+* 远程搜索与 Combobox 一样：_inputValue={keyword} 拿到输入，filter={false} 不再本地过滤，取数据时给 loading。
+*/
+/** 交给触发器的属性：展开到按钮上 */
+/** 与数据类型无关的属性；未声明的属性落到对话框（dialog）上 */
+/** 命令面板的属性；items 不是 ListboxOption 或字符串时要给 toOption */
+/** CommandPalette 的样式：dialog、search、input、listbox、trigger、triggerText、triggerLabel */
+var commandPaletteStyles = css.create({
+	dialog: { marginBlockStart: "12dvh" },
+	search: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		paddingBlock: "_sm",
+		paddingInline: "_md",
+		borderBlockEndWidth: "_xs",
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: "_border",
+		fontSize: "_lg"
+	},
+	input: { paddingBlock: "_sm" },
+	listbox: { maxHeight: "min(24rem, 50dvh)" },
+	body: { padding: 0 },
+	trigger: {
+		gap: "_sm",
+		minWidth: {
+			default: null,
+			[breakpoints.sm]: "12rem"
+		},
+		color: "_textMuted",
+		cursor: "pointer"
+	},
+	triggerText: { display: {
+		default: "none",
+		[breakpoints.sm]: "initial"
+	} },
+	triggerLabel: {
+		flexGrow: 1,
+		textAlign: "start",
+		whiteSpace: "nowrap",
+		position: {
+			default: "absolute",
+			[breakpoints.sm]: "static"
+		},
+		width: {
+			default: 1,
+			[breakpoints.sm]: "auto"
+		},
+		height: {
+			default: 1,
+			[breakpoints.sm]: "auto"
+		},
+		overflow: {
+			default: "hidden",
+			[breakpoints.sm]: "visible"
+		},
+		clipPath: {
+			default: "inset(50%)",
+			[breakpoints.sm]: "none"
+		}
+	}
+});
+/** 命令面板：快捷键打开的搜索对话框 */
+var CommandPalette = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const inputValue = bindable(_props, "_inputValue", () => "", _ctx.emit);
+	const items = readonlyProp(_props, "items");
+	const toOption = readonlyProp(_props, "toOption");
+	const onAction = readonlyProp(_props, "onAction");
+	const filter = readonlyProp(_props, "filter");
+	const loading = readonlyProp(_props, "loading", false);
+	const hotkey = readonlyProp(_props, "hotkey", "Mod+K");
+	const placeholder = readonlyProp(_props, "placeholder");
+	const label = readonlyProp(_props, "label");
+	const trigger = readonlyProp(_props, "trigger");
+	const renderOption = readonlyProp(_props, "renderOption");
+	const empty = readonlyProp(_props, "empty");
+	const propsTrigger = readonlyProp(_props, "propsTrigger");
+	const propsInput = readonlyProp(_props, "propsInput");
+	const propsListbox = readonlyProp(_props, "propsListbox");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const textMatcher = useTextMatcher();
+	const listId = useId();
+	const appearance = useControlAppearance(() => ({}));
+	const optionOf = (item) => toListboxOption(item, toOption.value);
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	function matches(item, text) {
+		if (filter.value === false) return true;
+		if (filter.value) return filter.value(item, text);
+		const match = textMatcher();
+		const option = optionOf(item);
+		return match(option.label, text) || match(option.description ?? "", text);
+	}
+	const list = useListState({
+		items: () => inputValue.value ? items.value.filter((item) => matches(item, inputValue.value)) : items.value,
+		toOption: optionOf,
+		selected: () => [],
+		mode: () => "single",
+		onChange: () => {}
+	});
+	watch(() => open.value, (isOpen) => {
+		if (isOpen) inputValue.value = "";
+	});
+	watch([
+		() => inputValue.value,
+		() => open.value,
+		() => list.options.length
+	], () => list.move("first"), { flush: "post" });
+	useHotkeys(() => hotkey.value ? { [hotkey.value]: (event) => setOpen(!open.value, "imperative", event) } : {}, { inInputs: true });
+	function pick(value, event) {
+		const entry = list.options[list.indexOf(value)];
+		if (!entry || entry.disabled) return;
+		setOpen(false, "select", event);
+		onAction.value(entry.item);
+	}
+	function onKeydown(event) {
+		if (handleListKeydown(list, event, { homeEnd: false }, (value) => pick(value, event))) event.preventDefault();
+	}
+	const triggerProps = () => ({
+		onClick: (event) => setOpen(true, "trigger", event),
+		"aria-haspopup": "dialog",
+		"aria-expanded": open.value
+	});
+	/** 默认的触发按钮：画成输入框外壳（只取样式，部件标记归面板自己） */
+	function renderTrigger(shell) {
+		if (trigger.value === false) return null;
+		if (trigger.value) return trigger.value(triggerProps());
+		const text = placeholder.value ?? lang.searchPlaceholder;
+		return createVNode(ButtonBase, mergePartProps({
+			sx: [shell.root.sx, commandPaletteStyles.trigger],
+			"aria-keyshortcuts": hotkey.value ? ariaKeyShortcut(hotkey.value) : void 0
+		}, propsTrigger.value, triggerProps()), { default: () => [
+			createVNode(Icon, {
+				"icon": Search,
+				"sx": shell.icon.sx
+			}, null),
+			createVNode("span", mergeAttrs({ sx: commandPaletteStyles.triggerLabel }), [text]),
+			hotkey.value && createVNode(Kbd, {
+				"sx": commandPaletteStyles.triggerText,
+				"aria-hidden": ariaKeyShortcut(hotkey.value) ? "true" : void 0
+			}, {
+				default: () => [formatHotkey(hotkey.value)],
+				$stable: true
+			})
+		] });
+	}
+	return () => {
+		const shell = controlParts(appearance(), {});
+		return createVNode(Fragment, null, [renderTrigger(shell), createVNode(Dialog, mergeProps(mergePartProps({
+			title: label.value ?? lang.searchLabel,
+			sx: commandPaletteStyles.dialog,
+			size: "sm",
+			closable: false,
+			propsHeader: { sx: visuallyHiddenStyles.hidden },
+			propsBody: { propsContent: { sx: commandPaletteStyles.body } }
+		}, rest), {
+			"_open": open.value,
+			"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+			"onOpenChange": onOpenChange.value
+		}), { default: () => [createVNode("div", mergeAttrs({ sx: commandPaletteStyles.search }), [createVNode(Icon, {
+			"icon": Search,
+			"sx": shell.icon.sx
+		}, null), withDirectives(createVNode("input", mergeProps(mergeAttrs({ sx: [shell.input.sx, commandPaletteStyles.input] }, propsInput.value, {
+			role: "combobox",
+			type: "search",
+			autofocus: true,
+			autocomplete: "off",
+			enterkeyhint: "go",
+			placeholder: placeholder.value ?? lang.searchPlaceholder,
+			"aria-label": label.value ?? lang.searchLabel,
+			"aria-autocomplete": "list",
+			"aria-expanded": true,
+			"aria-controls": listId,
+			"aria-activedescendant": activeOptionId(list, listId),
+			onKeydown
+		}), { "onUpdate:modelValue": ($event) => inputValue.value = $event }), null), [[vModelText, inputValue.value]])]), createVNode(ListboxView, mergePartProps({
+			sx: commandPaletteStyles.listbox,
+			list,
+			id: listId,
+			renderOption: renderOption.value,
+			empty: empty.value,
+			loading: loading.value,
+			propsEmpty: { description: lang.searchEmpty }
+		}, propsListbox.value, {
+			id: listId,
+			"aria-label": label.value ?? lang.searchLabel,
+			onPick: pick
+		}), null)] })]);
+	};
+}, {
+	name: "CommandPalette",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"_inputValue",
+		"onUpdate:_inputValue",
+		"items",
+		"toOption",
+		"onAction",
+		"filter",
+		"loading",
+		"hotkey",
+		"placeholder",
+		"label",
+		"trigger",
+		"renderOption",
+		"empty",
+		"propsTrigger",
+		"propsInput",
+		"propsListbox"
+	]
+});
+//#endregion
+export { CommandPalette, commandPaletteStyles };
+
+//# sourceMappingURL=CommandPalette.js.map

package/dist/overlay/CommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_createVNode","_Fragment","_mergeProps","_withDirectives","_vModelText"],"sources":["../../src/overlay/CommandPalette.tsx"],"sourcesContent":["/**\n * 命令面板：Mod+K（macOS 上 ⌘K，其他系统 Ctrl+K）或点触发按钮打开的搜索对话框，边输入边过滤，回车打开。\n * 文档站的站内搜索、后台的“跳转到…”都用它；数据由使用方给，选中后做什么也由使用方决定。\n *\n *   <CommandPalette\n *     items={pages}\n *     toOption={(page) => ({ value: page.path, label: page.title, description: page.summary, group: page.section })}\n *     onAction={(page) => router.push(page.path)}\n *   />\n *\n * 结构是 Dialog（模态、焦点循环、Esc 关闭）里放一个 combobox 输入框与 ListboxView：\n * 焦点一直在输入框上，↑↓ / Page Up / Page Down 移动高亮（aria-activedescendant），Enter 选中；\n * 数据层与 Select、Combobox 相同（useListState），选项多时虚拟滚动。\n * 远程搜索与 Combobox 一样：_inputValue={keyword} 拿到输入，filter={false} 不再本地过滤，取数据时给 loading。\n */\nimport { Search } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, watch, type VNodeChild } from 'vue';\nimport { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Icon } from '../base/Icon';\nimport { Kbd } from '../base/Kbd';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { useLang, useTextMatcher } from '../config/context';\nimport { controlParts, useControlAppearance, type ControlParts } from '../input/control';\nimport {\n  ListboxView,\n  activeOptionId,\n  type ListboxViewProps,\n  type OptionRenderState,\n} from '../input/Listbox';\nimport {\n  handleListKeydown,\n  useListState,\n  type ListboxOption,\n  type OptionMapping,\n  toListboxOption,\n} from '../input/list-state';\nimport { ariaKeyShortcut, formatHotkey, useHotkeys } from '../utils/dom/hotkeys';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { breakpoints } from '../config/theme/tokens';\nimport { openSetter } from '../utils/dom/open-change';\nimport { Dialog, type DialogProps } from './Dialog';\n\n/** 交给触发器的属性：展开到按钮上 */\nexport interface CommandPaletteTriggerProps {\n  /** 打开面板 */\n  onClick: (event: MouseEvent) => void;\n  /** 告诉读屏这个按钮会打开对话框 */\n  'aria-haspopup': 'dialog';\n  /** 面板是否打开 */\n  'aria-expanded': boolean;\n}\n\n/** 与数据类型无关的属性；未声明的属性落到对话框（dialog）上 */\nexport interface CommandPaletteBaseProps<T> extends Omit<\n  DialogProps,\n  'open' | 'title' | 'description' | 'footer' | 'children' | 'onSelect'\n> {\n  /** 是否打开：父级可以写 _open={x}；快捷键、触发按钮、选中、Esc 都会改它 */\n  _open?: boolean;\n  /** 数据：ListboxOption、字符串，或任意数据加 toOption */\n  items: readonly T[];\n  /** 执行了一项（回车或点击）：面板随即关闭 */\n  onAction: (item: T) => void;\n  /** 输入框里的文字：父级可以写 _inputValue={x}（远程搜索时据此取数据）；每次打开清空 */\n  _inputValue?: string;\n  /** 过滤：默认按选项文字与说明匹配（忽略大小写与重音）；函数自定义；false 不过滤（远程搜索，items 就是结果） */\n  filter?: false | ((item: T, query: string) => boolean);\n  /** 正在取结果（远程搜索）：没有结果时列表里是骨架行，已有结果时顶部显示进度条 */\n  loading?: boolean;\n  /** 打开面板的快捷键，默认 'Mod+K'；false 不注册 */\n  hotkey?: string | false;\n  /** 输入框的占位文字，默认取语言包（搜索文档） */\n  placeholder?: string;\n  /** 面板的名称（读屏念的），默认取语言包（搜索） */\n  label?: string;\n  /** 触发器：`(props) => <IconButton {...props} icon={Search} aria-label=\"搜索\" />`；默认是一个像搜索框的按钮，false 不渲染 */\n  trigger?: ((props: CommandPaletteTriggerProps) => VNodeChild) | false;\n  /** 自定义选项内容 */\n  renderOption?: (item: T, state: OptionRenderState) => VNodeChild;\n  /** 没有匹配时显示的内容；默认是 Empty（文案取语言包） */\n  empty?: VNodeChild;\n  /** 默认触发器的部件属性 */\n  propsTrigger?: Partial<ButtonBaseProps>;\n  /** 输入框的部件属性 */\n  propsInput?: PartProps<'input'>;\n  /** 列表的部件属性 */\n  propsListbox?: Partial<ListboxViewProps<T>>;\n}\n\n/** 命令面板的属性；items 不是 ListboxOption 或字符串时要给 toOption */\nexport type CommandPaletteProps<T = ListboxOption> = CommandPaletteBaseProps<T> & OptionMapping<T>;\n\n/** CommandPalette 的样式：dialog、search、input、listbox、trigger、triggerText、triggerLabel */\nexport const commandPaletteStyles = css.create({\n  // 停在视口上部而不是正中：结果变多变少时输入框不跳\n  dialog: { marginBlockStart: '12dvh' },\n  search: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_border',\n    fontSize: '_lg',\n  },\n  input: { paddingBlock: '_sm' },\n  listbox: { maxHeight: 'min(24rem, 50dvh)' },\n  body: { padding: 0 },\n  // 窄屏（40rem 以下，sizes.sm）只留放大镜图标，不挤占顶栏\n  trigger: {\n    gap: '_sm',\n    minWidth: { default: null, [breakpoints.sm]: '12rem' },\n    color: '_textMuted',\n    cursor: 'pointer',\n  },\n  triggerText: { display: { default: 'none', [breakpoints.sm]: 'initial' } },\n  // 按钮的名称来自这段文字（与看得见的一致，WCAG 2.5.3）：窄屏只留图标时视觉上隐藏，读屏仍念得到\n  triggerLabel: {\n    flexGrow: 1,\n    textAlign: 'start',\n    whiteSpace: 'nowrap',\n    position: { default: 'absolute', [breakpoints.sm]: 'static' },\n    width: { default: 1, [breakpoints.sm]: 'auto' },\n    height: { default: 1, [breakpoints.sm]: 'auto' },\n    overflow: { default: 'hidden', [breakpoints.sm]: 'visible' },\n    clipPath: { default: 'inset(50%)', [breakpoints.sm]: 'none' },\n  },\n});\n\n/** 命令面板：快捷键打开的搜索对话框 */\nexport const CommandPalette = _component(\n  <T,>({\n    _open: open = _bindable(false),\n    onOpenChange,\n    _inputValue: inputValue = _bindable(''),\n    items,\n    toOption,\n    onAction,\n    filter,\n    loading = false,\n    hotkey = 'Mod+K',\n    placeholder,\n    label,\n    trigger,\n    renderOption,\n    empty,\n    propsTrigger,\n    propsInput,\n    propsListbox,\n    ...rest\n  }: CommandPaletteProps<T>) => {\n    const lang = useLang();\n    const textMatcher = useTextMatcher();\n    const listId = useId();\n    const appearance = useControlAppearance(() => ({}));\n    const optionOf = (item: T) => toListboxOption(item, toOption);\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n\n    function matches(item: T, text: string) {\n      if (filter === false) return true;\n      if (filter) return filter(item, text);\n      const match = textMatcher();\n      const option = optionOf(item);\n      return match(option.label, text) || match(option.description ?? '', text);\n    }\n\n    const list = useListState({\n      items: () => (inputValue ? items.filter((item) => matches(item, inputValue)) : items),\n      toOption: optionOf,\n      // 面板不记选择：选中就是执行\n      selected: () => [],\n      mode: () => 'single',\n      onChange: () => {},\n    });\n\n    // 每次打开从空白开始；输入变了高亮第一个结果\n    watch(\n      () => open,\n      (isOpen) => {\n        if (isOpen) inputValue = '';\n      },\n    );\n    // 远程搜索时结果晚到：结果变了也高亮第一个\n    watch([() => inputValue, () => open, () => list.options.length], () => list.move('first'), {\n      flush: 'post',\n    });\n\n    useHotkeys(() => (hotkey ? { [hotkey]: (event) => setOpen(!open, 'imperative', event) } : {}), {\n      inInputs: true,\n    });\n\n    function pick(value: string, event?: Event) {\n      const entry = list.options[list.indexOf(value)];\n      if (!entry || entry.disabled) return;\n      setOpen(false, 'select', event);\n      onAction(entry.item);\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      if (handleListKeydown(list, event, { homeEnd: false }, (value) => pick(value, event)))\n        event.preventDefault();\n    }\n\n    const triggerProps = (): CommandPaletteTriggerProps => ({\n      onClick: (event: MouseEvent) => setOpen(true, 'trigger', event),\n      'aria-haspopup': 'dialog',\n      'aria-expanded': open,\n    });\n\n    /** 默认的触发按钮：画成输入框外壳（只取样式，部件标记归面板自己） */\n    function renderTrigger(shell: ControlParts) {\n      if (trigger === false) return null;\n      if (trigger) return trigger(triggerProps());\n      const text = placeholder ?? lang.searchPlaceholder;\n      return (\n        <ButtonBase\n          {...mergePartProps<ButtonBaseProps>(\n            {\n              sx: [shell.root.sx, commandPaletteStyles.trigger],\n              // 快捷键由 aria-keyshortcuts 告诉读屏，显示它的 Kbd 不算进名称\n              'aria-keyshortcuts': hotkey ? ariaKeyShortcut(hotkey) : undefined,\n            },\n            propsTrigger,\n            triggerProps(),\n          )}\n        >\n          <Icon icon={Search} sx={shell.icon.sx} />\n          <span {...mergeAttrs<'span'>({ sx: commandPaletteStyles.triggerLabel })}>{text}</span>\n          {hotkey && (\n            <Kbd\n              sx={commandPaletteStyles.triggerText}\n              aria-hidden={ariaKeyShortcut(hotkey) ? 'true' : undefined}\n            >\n              {formatHotkey(hotkey)}\n            </Kbd>\n          )}\n        </ButtonBase>\n      );\n    }\n\n    return () => {\n      const shell = controlParts(appearance(), {});\n      return (\n        <>\n          {renderTrigger(shell)}\n          <Dialog\n            {...mergePartProps<DialogProps>(\n              {\n                title: label ?? lang.searchLabel,\n                sx: commandPaletteStyles.dialog,\n                size: 'sm',\n                closable: false,\n                // 标题只给读屏：面板的名称\n                propsHeader: { sx: visuallyHiddenStyles.hidden },\n                propsBody: { propsContent: { sx: commandPaletteStyles.body } },\n              },\n              rest as Partial<DialogProps>,\n            )}\n            _open={open}\n            onOpenChange={onOpenChange}\n          >\n            <div {...mergeAttrs<'div'>({ sx: commandPaletteStyles.search })}>\n              <Icon icon={Search} sx={shell.icon.sx} />\n              {/* _bind 编译为 v-model：输入法组合期间不过滤 */}\n              <input\n                {...mergeAttrs<'input'>(\n                  { sx: [shell.input.sx, commandPaletteStyles.input] },\n                  propsInput,\n                  {\n                    role: 'combobox',\n                    type: 'search',\n                    autofocus: true,\n                    autocomplete: 'off',\n                    enterkeyhint: 'go',\n                    placeholder: placeholder ?? lang.searchPlaceholder,\n                    'aria-label': label ?? lang.searchLabel,\n                    'aria-autocomplete': 'list',\n                    'aria-expanded': true,\n                    'aria-controls': listId,\n                    'aria-activedescendant': activeOptionId(list, listId),\n                    onKeydown,\n                  },\n                )}\n                _value={inputValue}\n              />\n            </div>\n            <ListboxView\n              {...mergePartProps<ListboxViewProps<T>>(\n                {\n                  sx: commandPaletteStyles.listbox,\n                  list,\n                  id: listId,\n                  renderOption,\n                  empty,\n                  loading,\n                  propsEmpty: { description: lang.searchEmpty },\n                },\n                propsListbox,\n                { id: listId, 'aria-label': label ?? lang.searchLabel, onPick: pick },\n              )}\n            />\n          </Dialog>\n        </>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/overlay/ContextMenu.d.ts

@@ -0,0 +1,21 @@
+import { type VNodeChild } from 'vue';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type PartProps } from '../utils/props';
+import { type MenuProps } from './Menu';
+/** 未声明的属性落到区域的 div 上 */
+export interface ContextMenuProps extends PartProps<'div'>, OpenChangeProps {
+    /** 菜单是否打开：父级可以写 _open={x} */
+    _open?: boolean;
+    /** 菜单项：同 Menu 的 children */
+    menu: VNodeChild;
+    /** 菜单的名称，默认取语言包（更多操作） */
+    label?: string;
+    /** 不弹出（浏览器自己的右键菜单照常出现） */
+    disabled?: boolean;
+    /** 菜单（Menu）的部件属性 */
+    propsMenu?: Partial<MenuProps>;
+    /** 区域里的内容 */
+    children?: VNodeChild;
+}
+/** 右键菜单：区域 + 从指针位置弹出的 Menu */
+export declare const ContextMenu: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ContextMenuProps>;

package/dist/overlay/ContextMenu.js

@@ -0,0 +1,76 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { Menu } from "./Menu.js";
+import { createVNode, mergeProps, nextTick, shallowRef, unref, watch } from "vue";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/overlay/ContextMenu.tsx
+/** 未声明的属性落到区域的 div 上 */
+/** 右键菜单：区域 + 从指针位置弹出的 Menu */
+var ContextMenu = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const menu = readonlyProp(_props, "menu");
+	const label = readonlyProp(_props, "label");
+	const disabled = readonlyProp(_props, "disabled", false);
+	const propsMenu = readonlyProp(_props, "propsMenu");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	let point = shallowRef(void 0);
+	let origin = null;
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	function onContextmenu(event) {
+		const target = event.target;
+		if (disabled.value || target.closest("[role=\"menu\"]")) return;
+		event.preventDefault();
+		origin = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		if (event.clientX === 0 && event.clientY === 0) {
+			const rect = target.getBoundingClientRect();
+			point.value = {
+				x: rect.left,
+				y: rect.bottom
+			};
+		} else point.value = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (open.value) {
+			open.value = false;
+			nextTick(() => open.value = true);
+		} else setOpen(true, "trigger", event);
+	}
+	watch(() => open.value, (next) => {
+		if (next) return;
+		const active = document.activeElement;
+		if (!active || active === document.body || active.closest("[role=\"menu\"]")) origin?.focus();
+	}, { flush: "post" });
+	return () => createVNode("div", mergeProps(mergeAttrs({}, rest, { onContextmenu }), { "data-state": open.value ? "open" : "closed" }), [children.value, createVNode(Menu, mergeProps(mergePartProps({
+		trigger: () => null,
+		"aria-label": label.value ?? lang.contextMenuLabel
+	}, propsMenu.value, { point: point.value }), {
+		"_open": open.value,
+		"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+		"onOpenChange": onOpenChange.value,
+		"key": "__site0"
+	}), {
+		default: () => [unref(menu)],
+		$stable: true
+	})]);
+}, {
+	name: "ContextMenu",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"menu",
+		"label",
+		"disabled",
+		"propsMenu"
+	]
+});
+//#endregion
+export { ContextMenu };
+
+//# sourceMappingURL=ContextMenu.js.map

package/dist/overlay/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps","_vue_unref"],"sources":["../../src/overlay/ContextMenu.tsx"],"sourcesContent":["/**\n * 右键菜单（div）：在一块区域里右键（或键盘的 Shift+F10、菜单键）时，从指针位置弹出菜单。\n * 菜单项与 Menu 完全相同（MenuItem、MenuCheckboxItem、MenuSub…），菜单本身就是一个以指针位置为锚点的 Menu。\n *\n *   <ContextMenu menu={<><MenuItem onAction={rename}>重命名</MenuItem><MenuItem tone=\"danger\" onAction={remove}>删除</MenuItem></>}>\n *     <FileCard file={file} />\n *   </ContextMenu>\n *\n * 键盘打开时（contextmenu 事件不带指针坐标）从获得焦点的元素左下角弹出；关闭后焦点回到打开前的元素。\n * 区域本身不可聚焦：键盘用户要能打开，里面得有可聚焦的元素（同 Radix ContextMenu）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { nextTick, watch, type VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { Menu, type MenuProps } from './Menu';\n\n/** 未声明的属性落到区域的 div 上 */\nexport interface ContextMenuProps extends PartProps<'div'>, OpenChangeProps {\n  /** 菜单是否打开：父级可以写 _open={x} */\n  _open?: boolean;\n  /** 菜单项：同 Menu 的 children */\n  menu: VNodeChild;\n  /** 菜单的名称，默认取语言包（更多操作） */\n  label?: string;\n  /** 不弹出（浏览器自己的右键菜单照常出现） */\n  disabled?: boolean;\n  /** 菜单（Menu）的部件属性 */\n  propsMenu?: Partial<MenuProps>;\n  /** 区域里的内容 */\n  children?: VNodeChild;\n}\n\n/** 右键菜单：区域 + 从指针位置弹出的 Menu */\nexport const ContextMenu = _component(\n  ({\n    _open: open = _bindable(false),\n    onOpenChange,\n    menu,\n    label,\n    disabled = false,\n    propsMenu,\n    children,\n    ...rest\n  }: ContextMenuProps) => {\n    const lang = useLang();\n    let point = _state.raw<{ x: number; y: number } | undefined>(undefined);\n    // 打开前焦点所在的元素：关闭后还给它\n    let origin: HTMLElement | null = null;\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n\n    function onContextmenu(event: MouseEvent) {\n      const target = event.target as HTMLElement;\n      // 菜单渲染在区域里：在菜单上右键不再打开\n      if (disabled || target.closest('[role=\"menu\"]')) return;\n      event.preventDefault();\n      origin = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n      // 键盘打开时没有指针坐标：从获得焦点的元素左下角弹出\n      if (event.clientX === 0 && event.clientY === 0) {\n        const rect = target.getBoundingClientRect();\n        point = { x: rect.left, y: rect.bottom };\n      } else point = { x: event.clientX, y: event.clientY };\n      // 已经开着时先关再开，菜单换到新的位置（仍算开着，不通知）\n      if (open) {\n        open = false;\n        void nextTick(() => (open = true));\n      } else setOpen(true, 'trigger', event);\n    }\n\n    watch(\n      () => open,\n      (next) => {\n        if (next) return;\n        const active = document.activeElement;\n        if (!active || active === document.body || active.closest('[role=\"menu\"]')) origin?.focus();\n      },\n      { flush: 'post' },\n    );\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({}, rest, { onContextmenu })}\n        data-state={open ? 'open' : 'closed'}\n      >\n        {children}\n        <Menu\n          {...mergePartProps<MenuProps>(\n            { trigger: () => null, 'aria-label': label ?? lang.contextMenuLabel },\n            propsMenu,\n            { point },\n          )}\n          _open={open}\n          onOpenChange={onOpenChange}\n        >\n          {menu}\n        </Menu>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAmCA,IAAa,cAAc,0BACzB,QAAA,SASwB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,OAAAA,SAAA,QAAA,eARE,OAAK,KAAA,IAAA;CAAA,MAAA,eAAAC,aAAA,QAAA,cAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAIlB,KAAK;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAGb,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,IAAI,QAAKC,WAAoD,KAAA,CAAS;CAEtE,IAAI,SAA6B;CACjC,MAAM,UAAU,iBACd,KAAA,QACC,SAAU,KAAA,QAAO,YAClB,aAAA,KACF;CAEA,SAAS,cAAc,OAAmB;EACxC,MAAM,SAAS,MAAM;EAErB,IAAI,SAAA,SAAY,OAAO,QAAQ,iBAAe,GAAG;EACjD,MAAM,eAAe;EACrB,SAAS,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;EAElF,IAAI,MAAM,YAAY,KAAK,MAAM,YAAY,GAAG;GAC9C,MAAM,OAAO,OAAO,sBAAsB;GAC1C,MAAA,QAAQ;IAAE,GAAG,KAAK;IAAM,GAAG,KAAK;GAAO;EACzC,OAAO,MAAA,QAAQ;GAAE,GAAG,MAAM;GAAS,GAAG,MAAM;EAAQ;EAEpD,IAAA,KAAA,OAAU;GACR,KAAA,QAAO;GACP,eAAqB,KAAA,QAAO,IAAK;EACnC,OAAO,QAAQ,MAAM,WAAW,KAAK;CACvC;CAEA,YACE,KAAA,QACC,SAAS;EACR,IAAI,MAAM;EACV,MAAM,SAAS,SAAS;EACxB,IAAI,CAAC,UAAU,WAAW,SAAS,QAAQ,OAAO,QAAQ,iBAAe,GAAG,QAAQ,MAAM;CAC5F,GACA,EAAE,OAAO,OAAO,CAClB;CAEA,aAAOC,YAAA,OAAAC,WAEC,WAAkB,CAAC,GAAG,MAAM,EAAE,cAAc,CAAC,GAAC,EAAA,cACtC,KAAA,QAAO,SAAS,SAAQ,CAAA,GAAA,CAAA,SAAA,OAAAD,YAAA,MAAAC,WAI9B,eACF;EAAE,eAAe;EAAM,cAAc,MAAA,SAAS,KAAK;CAAiB,GAAC,UAAA,OAErE,EAAE,OAAK,MAAA,MAAC,CACV,GAAC;EAAA,SAAA,KAAA;EAAA,kBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,KAAA,QAAA;EAAA,gBAAA,aAAA;EAAA,OAAA;CAAA,CAAA,GAAA;EAAA,eAAA,CAAAC,MAAA,IAAA,CAAA;EAAA,SAAA;CAAA,CAAA,CAAA,CAAA;AAQT,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/overlay/Dialog.d.ts

@@ -0,0 +1,70 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { ContainerSizes } from '../layout/Container';
+import { type DetachedOverlayHandle, type DetachedOverlayOptions } from './detached';
+import { type ModalProps } from './ModalCore';
+/** 对话框的宽度档位，与 Container 相同（30–80rem），另加 full 占满视口 */
+export interface DialogSizes extends ContainerSizes {
+    /** 占满视口（四周留出 1em） */
+    full: unknown;
+}
+/** 对话框的外观选项；可以用 createUi / Provider 的 defaults.Dialog 统一改默认值（AlertDialog 也用它） */
+export interface DialogOptions {
+    /** 宽度档位，默认 xs（30rem）；窄屏时不超出视口 */
+    size?: keyof DialogSizes;
+}
+/** 未声明的属性落到 dialog 上 */
+export interface DialogProps extends ModalProps, DialogOptions {
+}
+/**
+ * 对话框的配方（Dialog、AlertDialog 共用）：部件同 ModalCore（base 并进了 modalPartStyles）；
+ * root 是 dialog 元素，宽度占满可用空间、高度上限、圆角，宽度档位不超出视口，full 占满视口
+ */
+export declare const dialogRecipe: css.Recipe<"body" | "bodyContent" | "close" | "description" | "footer" | "header" | "root" | "title", {
+    readonly size: {
+        readonly xs: {
+            readonly root: {
+                readonly maxWidth: `min(${string}, calc(100vw - 2em))`;
+            };
+        };
+        readonly sm: {
+            readonly root: {
+                readonly maxWidth: `min(${string}, calc(100vw - 2em))`;
+            };
+        };
+        readonly md: {
+            readonly root: {
+                readonly maxWidth: `min(${string}, calc(100vw - 2em))`;
+            };
+        };
+        readonly lg: {
+            readonly root: {
+                readonly maxWidth: `min(${string}, calc(100vw - 2em))`;
+            };
+        };
+        readonly xl: {
+            readonly root: {
+                readonly maxWidth: `min(${string}, calc(100vw - 2em))`;
+            };
+        };
+        readonly full: {
+            readonly root: {
+                readonly maxWidth: "calc(100vw - 2em)";
+                readonly height: "calc(100dvh - 2em)";
+            };
+        };
+    };
+}>;
+/** 对话框的部件（createUi / Provider 的 styles.Dialog 按它定制，AlertDialog 也用它） */
+export type DialogPart = (typeof dialogRecipe.parts)[number];
+/** 模态对话框：居中显示，淡入放大 */
+export declare const Dialog: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<DialogProps>;
+/** useDialog 返回的：open 打开一个对话框 */
+export interface DialogApi {
+    /** 打开对话框：属性同 Dialog（open 由句柄管理），content 是正文；返回句柄 */
+    open(options: DetachedOverlayOptions<DialogProps>): DetachedOverlayHandle<DialogProps>;
+}
+/**
+ * 命令式对话框：在组件 setup 里调用。对话框渲染到 body 末尾，沿用调用处的主题、语言等配置，关上后自动卸载。
+ * 句柄的 closed 得到关上的原因（确认是 confirm）；只想问一句“确定吗”用 useConfirm。
+ */
+export declare function useDialog(): DialogApi;

package/dist/overlay/Dialog.js

@@ -0,0 +1,91 @@
+import { t } from "../config/theme/tokens.js";
+import { useDefaults } from "../config/defaults.js";
+import { useRecipe } from "../config/styles.js";
+import { transitions } from "../utils/style/transitions.js";
+import { useDetachedOverlay } from "./detached.js";
+import { ModalCore, modalPartStyles } from "./ModalCore.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/overlay/Dialog.tsx
+/** 对话框的宽度档位，与 Container 相同（30–80rem），另加 full 占满视口 */
+/** 对话框的外观选项；可以用 createUi / Provider 的 defaults.Dialog 统一改默认值（AlertDialog 也用它） */
+/** 未声明的属性落到 dialog 上 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* 对话框的配方（Dialog、AlertDialog 共用）：部件同 ModalCore（base 并进了 modalPartStyles）；
+* root 是 dialog 元素，宽度占满可用空间、高度上限、圆角，宽度档位不超出视口，full 占满视口
+*/
+var dialogRecipe = css.recipe({
+	name: "Dialog",
+	parts: [
+		"root",
+		"header",
+		"title",
+		"close",
+		"description",
+		"body",
+		"bodyContent",
+		"footer"
+	],
+	base: {
+		...modalPartStyles,
+		root: {
+			...modalPartStyles.root,
+			width: "_full",
+			maxHeight: "calc(100dvh - 2em)",
+			borderRadius: "_xl"
+		}
+	},
+	variants: { size: {
+		xs: { root: { maxWidth: `min(${t.sizes.xs}, calc(100vw - 2em))` } },
+		sm: { root: { maxWidth: `min(${t.sizes.sm}, calc(100vw - 2em))` } },
+		md: { root: { maxWidth: `min(${t.sizes.md}, calc(100vw - 2em))` } },
+		lg: { root: { maxWidth: `min(${t.sizes.lg}, calc(100vw - 2em))` } },
+		xl: { root: { maxWidth: `min(${t.sizes.xl}, calc(100vw - 2em))` } },
+		full: { root: {
+			maxWidth: "calc(100vw - 2em)",
+			height: "calc(100dvh - 2em)"
+		} }
+	} }
+});
+/** 对话框的部件（createUi / Provider 的 styles.Dialog 按它定制，AlertDialog 也用它） */
+/** 模态对话框：居中显示，淡入放大 */
+var Dialog = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const size = readonlyProp(_props, "size");
+	const rest = restProps(_props, _ctx, true);
+	const appearance = useDefaults("Dialog", () => ({ size: size.value }), { size: "xs" });
+	const recipe = useRecipe(dialogRecipe);
+	return () => createVNode(ModalCore, mergeProps(rest, {
+		"parts": recipe({ size: appearance().size }),
+		"panelSx": transitions.scale,
+		"_open": open.value,
+		"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+	}), null);
+}, {
+	name: "Dialog",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"size"
+	]
+});
+/** useDialog 返回的：open 打开一个对话框 */
+/**
+* 命令式对话框：在组件 setup 里调用。对话框渲染到 body 末尾，沿用调用处的主题、语言等配置，关上后自动卸载。
+* 句柄的 closed 得到关上的原因（确认是 confirm）；只想问一句“确定吗”用 useConfirm。
+*/
+function useDialog() {
+	return { open: useDetachedOverlay((props, host, children) => createVNode(Dialog, mergeProps(props, {
+		"_open": host.open,
+		"onUpdate:_open": ($event) => host.open = $event
+	}), _isSlot(children) ? children : { default: () => [children] })) };
+}
+//#endregion
+export { Dialog, dialogRecipe, useDialog };
+
+//# sourceMappingURL=Dialog.js.map

package/dist/overlay/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/overlay/Dialog.tsx"],"sourcesContent":["/**\n * 模态对话框：居中显示，淡入放大。内核见 ModalCore.tsx，贴着视口一侧滑入的见 Drawer。\n *\n *   <Dialog _open={editing} title=\"编辑资料\" footer={<Button onClick={save}>保存</Button>}>…</Dialog>\n *\n * 不想自己管 open（从表格的一行打开详情、在回调里弹出）时用命令式的 useDialog：\n *\n *   const dialog = useDialog();                    // setup 里\n *   const handle = dialog.open({ title: '订单详情', size: 'md', content: () => <OrderDetail id={id} /> });\n *   handle.update({ title: '订单详情（已发货）' }); handle.close(); await handle.closed;\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { ContainerSizes } from '../layout/Container';\nimport {\n  useDetachedOverlay,\n  type DetachedOverlayHandle,\n  type DetachedOverlayOptions,\n} from './detached';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { transitions } from '../utils/style/transitions';\nimport { ModalCore, modalPartStyles, type ModalProps } from './ModalCore';\nimport { t } from '../config/theme/tokens';\n\n/** 对话框的宽度档位，与 Container 相同（30–80rem），另加 full 占满视口 */\nexport interface DialogSizes extends ContainerSizes {\n  /** 占满视口（四周留出 1em） */\n  full: unknown;\n}\n\n/** 对话框的外观选项；可以用 createUi / Provider 的 defaults.Dialog 统一改默认值（AlertDialog 也用它） */\nexport interface DialogOptions {\n  /** 宽度档位，默认 xs（30rem）；窄屏时不超出视口 */\n  size?: keyof DialogSizes;\n}\n\n/** 未声明的属性落到 dialog 上 */\nexport interface DialogProps extends ModalProps, DialogOptions {}\n\n/**\n * 对话框的配方（Dialog、AlertDialog 共用）：部件同 ModalCore（base 并进了 modalPartStyles）；\n * root 是 dialog 元素，宽度占满可用空间、高度上限、圆角，宽度档位不超出视口，full 占满视口\n */\nexport const dialogRecipe = css.recipe({\n  name: 'Dialog',\n  parts: ['root', 'header', 'title', 'close', 'description', 'body', 'bodyContent', 'footer'],\n  base: {\n    ...modalPartStyles,\n    root: {\n      ...modalPartStyles.root,\n      width: '_full',\n      // 原生 dialog 已限制 max-width / max-height 不超出视口；这里只把高度上限放到四周各留 1em\n      maxHeight: 'calc(100dvh - 2em)',\n      borderRadius: '_xl',\n    },\n  },\n  variants: {\n    size: {\n      xs: { root: { maxWidth: `min(${t.sizes.xs}, calc(100vw - 2em))` } },\n      sm: { root: { maxWidth: `min(${t.sizes.sm}, calc(100vw - 2em))` } },\n      md: { root: { maxWidth: `min(${t.sizes.md}, calc(100vw - 2em))` } },\n      lg: { root: { maxWidth: `min(${t.sizes.lg}, calc(100vw - 2em))` } },\n      xl: { root: { maxWidth: `min(${t.sizes.xl}, calc(100vw - 2em))` } },\n      full: { root: { maxWidth: 'calc(100vw - 2em)', height: 'calc(100dvh - 2em)' } },\n    },\n  },\n});\n\n/** 对话框的部件（createUi / Provider 的 styles.Dialog 按它定制，AlertDialog 也用它） */\nexport type DialogPart = (typeof dialogRecipe.parts)[number];\n\n/** 模态对话框：居中显示，淡入放大 */\nexport const Dialog = _component(\n  ({ _open: open = _bindable(false), size, ...rest }: DialogProps) => {\n    const appearance = useDefaults('Dialog', () => ({ size }), { size: 'xs' });\n    const recipe = useRecipe(dialogRecipe);\n    return () => (\n      <ModalCore\n        {...rest}\n        parts={recipe({ size: appearance().size })}\n        panelSx={transitions.scale}\n        _open={open}\n      />\n    );\n  },\n);\n\n/** useDialog 返回的：open 打开一个对话框 */\nexport interface DialogApi {\n  /** 打开对话框：属性同 Dialog（open 由句柄管理），content 是正文；返回句柄 */\n  open(options: DetachedOverlayOptions<DialogProps>): DetachedOverlayHandle<DialogProps>;\n}\n\n/**\n * 命令式对话框：在组件 setup 里调用。对话框渲染到 body 末尾，沿用调用处的主题、语言等配置，关上后自动卸载。\n * 句柄的 closed 得到关上的原因（确认是 confirm）；只想问一句“确定吗”用 useConfirm。\n */\nexport function useDialog(): DialogApi {\n  const open = useDetachedOverlay<DialogProps>((props, host, children) => (\n    <Dialog {...props} _open={host.open}>\n      {children}\n    </Dialog>\n  ));\n  return { open };\n}\n"],"mappings":";;;;;;;;;;;;;AAqCA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;;;;AAOA,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM;CACN,OAAO;EAAC;EAAQ;EAAU;EAAS;EAAS;EAAe;EAAQ;EAAe;CAAQ;CAC1F,MAAM;EACJ,GAAG;EACH,MAAM;GACJ,GAAG,gBAAgB;GACnB,OAAO;GAEP,WAAW;GACX,cAAc;EAChB;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE,MAAM,GAAE,sBAAuB,EAAE;EAClE,IAAI,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE,MAAM,GAAE,sBAAuB,EAAE;EAClE,IAAI,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE,MAAM,GAAE,sBAAuB,EAAE;EAClE,IAAI,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE,MAAM,GAAE,sBAAuB,EAAE;EAClE,IAAI,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE,MAAM,GAAE,sBAAuB,EAAE;EAClE,MAAM,EAAE,MAAM;GAAE,UAAU;GAAqB,QAAQ;EAAqB,EAAE;CAChF,EACF;AACF,CAAC;;;AAMD,IAAa,SAAS,0BACpB,QAAA,SAAoE;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,OAAAC,SAAA,QAAA,eAAzC,OAAK,KAAA,IAAA;CAAA,MAAA,OAAAC,aAAA,QAAA,MAAA;CAAA,MAAY,OAAIC,UAAA,QAAA,MAAA,IAAA;CAC9C,MAAM,aAAa,YAAY,iBAAiB,EAAE,MAAI,KAAA,MAAC,IAAI,EAAE,MAAM,KAAK,CAAC;CACzE,MAAM,SAAS,UAAU,YAAY;CACrC,aAAOC,YAAA,WAAAC,WAEC,MAAI;EAAA,SACD,OAAO,EAAE,MAAM,WAAW,CAAC,CAAC,KAAK,CAAC;EAAC,WACjC,YAAY;EAAK,SAAA,KAAA;EAAA,kBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,KAAA,QAAA;CAAA,CAAA,GAAA,IAAA;AAIhC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;;;;AAYA,SAAgB,YAAuB;CAMrC,OAAO,EAAE,MALI,oBAAiC,OAAO,MAAM,aAAQD,YAAA,QAAAC,WACrD,OAAK;EAAA,SAAS,KAAK;EAAI,mBAAA,WAAT,KAAK,OAAI;CAAA,CAAA,GAAA,QAChC,QAAQ,IAAR,WAAQ,EAAA,eAAA,CAAR,QAAQ,EAAA,CAAA,CAGJ,EAAK;AAChB"}