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

package/dist/docs-kit/CodePreview.js

@@ -7,8 +7,8 @@ import { Collapse } from "../display/Collapse.js";
 import { Card } from "../display/Card.js";
 import { useMessages } from "../config/lang/messages.js";
 import { docsKitMessages } from "./messages.js";
-import { Fragment, createVNode, mergeProps, ref, useId, watch } from "vue";
-import { _component, bindable, childrenProp, childrenStable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Fragment, createVNode, ref, useId, watch } from "vue";
+import { _component, bindable, childrenProp, childrenStable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { Code } from "@lucide/icons";
 //#region src/docs-kit/CodePreview.tsx
@@ -102,7 +102,7 @@ var CodePreview = /*#__PURE__*/ _component((_props, _ctx) => {
 		load();
 	};
 	watch(() => showCode.value, (shown) => shown && void load(), { immediate: true });
-	return () => createVNode(Card, mergeProps(mergePartProps({
+	return () => createVNode(Card, mergeJsxProps(mergePartProps({
 		variant: "outline",
 		padding: "none",
 		propsFooter: { sx: codePreviewStyles.footer }
@@ -112,7 +112,7 @@ var CodePreview = /*#__PURE__*/ _component((_props, _ctx) => {
 			onFocusin: prepare
 		}), [
 			actions.value,
-			createVNode(Button, mergeProps(mergePartProps({
+			createVNode(Button, mergeJsxProps(mergePartProps({
 				variant: "ghost",
 				tone: "neutral",
 				size: "sm",
@@ -131,7 +131,7 @@ var CodePreview = /*#__PURE__*/ _component((_props, _ctx) => {
 				size: "sm",
 				value: () => source() ?? load()
 			}, propsCopy.value), null)
-		]), createVNode(Collapse, mergeProps(mergePartProps({}, propsCollapse.value, { id: codeId }), {
+		]), createVNode(Collapse, mergeJsxProps(mergePartProps({}, propsCollapse.value, { id: codeId }), {
 			"_open": showCode.value,
 			"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => showCode.value = $event),
 			"key": "__site1"
@@ -151,7 +151,7 @@ var CodePreview = /*#__PURE__*/ _component((_props, _ctx) => {
 		default: () => [createVNode("div", mergeAttrs({ sx: codePreviewStyles.preview }, propsPreview.value, {
 			role: "group",
 			"aria-label": messages.preview
-		}), [createVNode(ScrollArea, mergeProps(mergePartProps({ axis: "x" }, propsPreviewScroll.value), { "key": "__site2" }), {
+		}), [createVNode(ScrollArea, mergeJsxProps(mergePartProps({ axis: "x" }, propsPreviewScroll.value), { "key": "__site2" }), {
 			default: () => [createVNode("div", mergeAttrs({ sx: [codePreviewStyles.layout, align.value === "center" && codePreviewStyles.center] }), [children.value])],
 			$stable: childrenStable()
 		})])],

package/dist/docs-kit/CodePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodePreview.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps","_Fragment","CodeIcon","_vtp_childrenStable"],"sources":["../../src/docs-kit/CodePreview.tsx"],"sourcesContent":["/**\n * 代码示例卡片：上面是运行中的效果，下面是它的源码（可以收起、复制）。文档站的每个示例都是一张。\n *\n *   import source from './Basic.tsx?raw';\n *   <CodePreview code={source}>\n *     <Basic />\n *   </CodePreview>\n *\n * 效果与源码由使用方各自给出（组件本身不执行代码）：示例组件照常 import，源码用 Vite 的 ?raw 导入同一个文件，\n * 两者永远一致。源码默认收起，“显示代码”按钮带 aria-expanded / aria-controls；复制按钮一直在工具栏上。\n * 示例多的页面可以按需加载源码：`code={() => import('./Basic.tsx?raw').then((m) => m.default)}`，\n * 指针移到、焦点进入工具栏或展开时才取，源码不进页面的块。\n * actions 往工具栏最前面加按钮，例如文档站的“在演练场里编辑”。\n * 外框是 Card（outline），源码是 CodeBlock，收起展开用 Collapse（高度过渡，收起后页内搜索仍能找到）。\n */\nimport { Code as CodeIcon } 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 { Button, type ButtonProps } from '../base/Button';\nimport { CodeBlock, type CodeBlockProps } from '../base/CodeBlock';\nimport { CopyButton, type CopyButtonProps } from '../base/CopyButton';\nimport { useMessages } from '../config/lang/messages';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { Card, type CardProps } from '../display/Card';\nimport { Collapse, type CollapseProps } from '../display/Collapse';\nimport { docsKitMessages } from './messages';\n\n/** 效果区的排列 */\nexport interface CodePreviewAligns {\n  /** 从起始边排起、占满宽度（默认）：表单、卡片、长内容 */\n  start: unknown;\n  /** 居中：单个按钮、图标这类小东西 */\n  center: unknown;\n}\n\n/** 未声明的属性落到外框（Card 的 div）上 */\nexport interface CodePreviewProps extends PartProps<'div'> {\n  /** 源码；或按需加载的函数：指针移到、焦点进入工具栏、展开或复制时才调用（只调用一次） */\n  code: string | (() => Promise<string>);\n  /** 源码的语言，默认 tsx */\n  lang?: string;\n  /** 是否显示源码：父级可以写 _showCode={x}；默认收起 */\n  _showCode?: boolean;\n  /** 效果区的排列，默认 start */\n  align?: keyof CodePreviewAligns;\n  /** 源码超过这么多行时折叠（见 CodeBlock 的 maxLines）；不写时不折叠 */\n  maxLines?: number;\n  /** 工具栏上额外的操作，排在“显示代码”前面 */\n  actions?: VNodeChild;\n  /** 运行中的效果 */\n  children?: VNodeChild;\n  /** 外框（Card）的部件属性 */\n  propsCard?: Partial<CardProps>;\n  /** 效果区的部件属性（外层，背景、最小高度写在这里） */\n  propsPreview?: PartProps<'div'>;\n  /** 效果区里横向滚动的 ScrollArea 的部件属性 */\n  propsPreviewScroll?: Partial<ScrollAreaProps>;\n  /** 工具栏的部件属性 */\n  propsToolbar?: PartProps<'div'>;\n  /** “显示代码”按钮的部件属性 */\n  propsToggle?: Partial<ButtonProps>;\n  /** 复制按钮的部件属性 */\n  propsCopy?: Partial<CopyButtonProps>;\n  /** 源码收起展开的部件属性 */\n  propsCollapse?: Partial<CollapseProps>;\n  /** 源码（CodeBlock）的部件属性 */\n  propsCode?: Partial<CodeBlockProps>;\n}\n\n/** CodePreview 的样式：preview、center、footer、toolbar、code */\nexport const codePreviewStyles = css.create({\n  // 效果区：给了最小高度时，效果在里面上下居中\n  preview: { display: 'flex', flexDirection: 'column', justifyContent: 'center' },\n  // 效果的排布：靠起始边时示例占满宽度（里面的网格、卡片按整块宽度排），居中时按内容宽度居中；\n  // 宽内容（表格）在外面的 ScrollArea 里横向滚动，不撑宽卡片\n  layout: {\n    display: 'grid',\n    alignItems: 'center',\n    gap: '_md',\n    padding: '_xl',\n  },\n  center: { justifyItems: 'center' },\n  // Card 的页脚默认是一行靠右的按钮：这里是工具栏加源码，上下排\n  footer: { display: 'block', padding: 0 },\n  toolbar: { display: 'flex', justifyContent: 'flex-end', gap: '_xs', padding: '_xs' },\n  // 源码贴着卡片：去掉 CodeBlock 自己的边框与圆角，只留与工具栏之间的分隔线\n  code: {\n    borderWidth: 0,\n    borderTopWidth: '_xs',\n    borderRadius: 0,\n  },\n});\n\n/** 代码示例卡片：效果 + 可收起的源码 + 复制 */\nexport const CodePreview = _component(\n  ({\n    code,\n    lang = 'tsx',\n    _showCode: showCode = _bindable(false),\n    align = 'start',\n    maxLines,\n    actions,\n    children,\n    propsCard,\n    propsPreview,\n    propsPreviewScroll,\n    propsToolbar,\n    propsToggle,\n    propsCopy,\n    propsCollapse,\n    propsCode,\n    ...rest\n  }: CodePreviewProps) => {\n    const messages = useMessages('docsKit', docsKitMessages);\n    const codeId = useId();\n    // 收起的源码先按纯文本渲染（页内搜索照样找得到）：要显示时才高亮。指针移到、焦点落到“显示代码”上就开始，\n    // 点下去时多半已经高亮好了。一页十来个示例，打开页面时不必一次高亮全部\n    let wanted = _state(false);\n    // 按需加载的源码：同一个加载函数只取一次；换了加载函数（示例热更新）就重新取\n    let loaded = _state<string | null>(null);\n    let loadedFrom: unknown;\n    let pending: Promise<string> | undefined;\n    const source = () => (typeof code === 'string' ? code : loadedFrom === code ? loaded : null);\n    function load(): string | Promise<string> {\n      if (typeof code === 'string') return code;\n      if (loadedFrom === code) return loaded ?? pending!;\n      const from = code;\n      loadedFrom = from;\n      loaded = null;\n      pending = from().then((text) => {\n        if (loadedFrom === from) loaded = text;\n        return text;\n      });\n      return pending;\n    }\n    const prepare = () => {\n      wanted = true;\n      void load();\n    };\n    watch(\n      () => showCode,\n      (shown) => shown && void load(),\n      { immediate: true },\n    );\n    return () => (\n      <Card\n        {...mergePartProps<CardProps>(\n          { variant: 'outline', padding: 'none', propsFooter: { sx: codePreviewStyles.footer } },\n          propsCard,\n          rest as Partial<CardProps>,\n        )}\n        footer={\n          <>\n            <div\n              {...mergeAttrs<'div'>({ sx: codePreviewStyles.toolbar }, propsToolbar, {\n                // 工具栏上的意图（要看、要复制、要编辑）：开始加载与高亮，点下去时多半已经好了\n                onPointerenter: prepare,\n                onFocusin: prepare,\n              })}\n            >\n              {actions}\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'ghost', tone: 'neutral', size: 'sm', icon: CodeIcon },\n                  propsToggle,\n                  {\n                    'aria-expanded': showCode,\n                    'aria-controls': codeId,\n                    onClick: () => (showCode = !showCode),\n                  },\n                )}\n              >\n                {showCode ? messages.hideCode : messages.showCode}\n              </Button>\n              <CopyButton\n                {...mergePartProps<CopyButtonProps>(\n                  {\n                    variant: 'ghost',\n                    tone: 'neutral',\n                    size: 'sm',\n                    value: () => source() ?? load(),\n                  },\n                  propsCopy,\n                )}\n              />\n            </div>\n            <Collapse\n              {...mergePartProps<CollapseProps>({}, propsCollapse, { id: codeId })}\n              _open={showCode}\n            >\n              <CodeBlock\n                {...mergePartProps<CodeBlockProps>(\n                  {\n                    code: source() ?? '',\n                    lang,\n                    highlight: showCode || wanted,\n                    maxLines,\n                    copyable: false,\n                    propsRoot: { sx: codePreviewStyles.code },\n                  },\n                  propsCode,\n                )}\n              />\n            </Collapse>\n          </>\n        }\n      >\n        <div\n          {...mergeAttrs<'div'>({ sx: codePreviewStyles.preview }, propsPreview, {\n            role: 'group',\n            'aria-label': messages.preview,\n          })}\n        >\n          <ScrollArea {...mergePartProps<ScrollAreaProps>({ axis: 'x' }, propsPreviewScroll)}>\n            <div\n              {...mergeAttrs<'div'>({\n                sx: [codePreviewStyles.layout, align === 'center' && codePreviewStyles.center],\n              })}\n            >\n              {children}\n            </div>\n          </ScrollArea>\n        </div>\n      </Card>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"CodePreview.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps","_Fragment","CodeIcon","_vtp_childrenStable"],"sources":["../../src/docs-kit/CodePreview.tsx"],"sourcesContent":["/**\n * 代码示例卡片：上面是运行中的效果，下面是它的源码（可以收起、复制）。文档站的每个示例都是一张。\n *\n *   import source from './Basic.tsx?raw';\n *   <CodePreview code={source}>\n *     <Basic />\n *   </CodePreview>\n *\n * 效果与源码由使用方各自给出（组件本身不执行代码）：示例组件照常 import，源码用 Vite 的 ?raw 导入同一个文件，\n * 两者永远一致。源码默认收起，“显示代码”按钮带 aria-expanded / aria-controls；复制按钮一直在工具栏上。\n * 示例多的页面可以按需加载源码：`code={() => import('./Basic.tsx?raw').then((m) => m.default)}`，\n * 指针移到、焦点进入工具栏或展开时才取，源码不进页面的块。\n * actions 往工具栏最前面加按钮，例如文档站的“在演练场里编辑”。\n * 外框是 Card（outline），源码是 CodeBlock，收起展开用 Collapse（高度过渡，收起后页内搜索仍能找到）。\n */\nimport { Code as CodeIcon } 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 { Button, type ButtonProps } from '../base/Button';\nimport { CodeBlock, type CodeBlockProps } from '../base/CodeBlock';\nimport { CopyButton, type CopyButtonProps } from '../base/CopyButton';\nimport { useMessages } from '../config/lang/messages';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { Card, type CardProps } from '../display/Card';\nimport { Collapse, type CollapseProps } from '../display/Collapse';\nimport { docsKitMessages } from './messages';\n\n/** 效果区的排列 */\nexport interface CodePreviewAligns {\n  /** 从起始边排起、占满宽度（默认）：表单、卡片、长内容 */\n  start: unknown;\n  /** 居中：单个按钮、图标这类小东西 */\n  center: unknown;\n}\n\n/** 未声明的属性落到外框（Card 的 div）上 */\nexport interface CodePreviewProps extends PartProps<'div'> {\n  /** 源码；或按需加载的函数：指针移到、焦点进入工具栏、展开或复制时才调用（只调用一次） */\n  code: string | (() => Promise<string>);\n  /** 源码的语言，默认 tsx */\n  lang?: string;\n  /** 是否显示源码：父级可以写 _showCode={x}；默认收起 */\n  _showCode?: boolean;\n  /** 效果区的排列，默认 start */\n  align?: keyof CodePreviewAligns;\n  /** 源码超过这么多行时折叠（见 CodeBlock 的 maxLines）；不写时不折叠 */\n  maxLines?: number;\n  /** 工具栏上额外的操作，排在“显示代码”前面 */\n  actions?: VNodeChild;\n  /** 运行中的效果 */\n  children?: VNodeChild;\n  /** 外框（Card）的部件属性 */\n  propsCard?: Partial<CardProps>;\n  /** 效果区的部件属性（外层，背景、最小高度写在这里） */\n  propsPreview?: PartProps<'div'>;\n  /** 效果区里横向滚动的 ScrollArea 的部件属性 */\n  propsPreviewScroll?: Partial<ScrollAreaProps>;\n  /** 工具栏的部件属性 */\n  propsToolbar?: PartProps<'div'>;\n  /** “显示代码”按钮的部件属性 */\n  propsToggle?: Partial<ButtonProps>;\n  /** 复制按钮的部件属性 */\n  propsCopy?: Partial<CopyButtonProps>;\n  /** 源码收起展开的部件属性 */\n  propsCollapse?: Partial<CollapseProps>;\n  /** 源码（CodeBlock）的部件属性 */\n  propsCode?: Partial<CodeBlockProps>;\n}\n\n/** CodePreview 的样式：preview、center、footer、toolbar、code */\nexport const codePreviewStyles = css.create({\n  // 效果区：给了最小高度时，效果在里面上下居中\n  preview: { display: 'flex', flexDirection: 'column', justifyContent: 'center' },\n  // 效果的排布：靠起始边时示例占满宽度（里面的网格、卡片按整块宽度排），居中时按内容宽度居中；\n  // 宽内容（表格）在外面的 ScrollArea 里横向滚动，不撑宽卡片\n  layout: {\n    display: 'grid',\n    alignItems: 'center',\n    gap: '_md',\n    padding: '_xl',\n  },\n  center: { justifyItems: 'center' },\n  // Card 的页脚默认是一行靠右的按钮：这里是工具栏加源码，上下排\n  footer: { display: 'block', padding: 0 },\n  toolbar: { display: 'flex', justifyContent: 'flex-end', gap: '_xs', padding: '_xs' },\n  // 源码贴着卡片：去掉 CodeBlock 自己的边框与圆角，只留与工具栏之间的分隔线\n  code: {\n    borderWidth: 0,\n    borderTopWidth: '_xs',\n    borderRadius: 0,\n  },\n});\n\n/** 代码示例卡片：效果 + 可收起的源码 + 复制 */\nexport const CodePreview = _component(\n  ({\n    code,\n    lang = 'tsx',\n    _showCode: showCode = _bindable(false),\n    align = 'start',\n    maxLines,\n    actions,\n    children,\n    propsCard,\n    propsPreview,\n    propsPreviewScroll,\n    propsToolbar,\n    propsToggle,\n    propsCopy,\n    propsCollapse,\n    propsCode,\n    ...rest\n  }: CodePreviewProps) => {\n    const messages = useMessages('docsKit', docsKitMessages);\n    const codeId = useId();\n    // 收起的源码先按纯文本渲染（页内搜索照样找得到）：要显示时才高亮。指针移到、焦点落到“显示代码”上就开始，\n    // 点下去时多半已经高亮好了。一页十来个示例，打开页面时不必一次高亮全部\n    let wanted = _state(false);\n    // 按需加载的源码：同一个加载函数只取一次；换了加载函数（示例热更新）就重新取\n    let loaded = _state<string | null>(null);\n    let loadedFrom: unknown;\n    let pending: Promise<string> | undefined;\n    const source = () => (typeof code === 'string' ? code : loadedFrom === code ? loaded : null);\n    function load(): string | Promise<string> {\n      if (typeof code === 'string') return code;\n      if (loadedFrom === code) return loaded ?? pending!;\n      const from = code;\n      loadedFrom = from;\n      loaded = null;\n      pending = from().then((text) => {\n        if (loadedFrom === from) loaded = text;\n        return text;\n      });\n      return pending;\n    }\n    const prepare = () => {\n      wanted = true;\n      void load();\n    };\n    watch(\n      () => showCode,\n      (shown) => shown && void load(),\n      { immediate: true },\n    );\n    return () => (\n      <Card\n        {...mergePartProps<CardProps>(\n          { variant: 'outline', padding: 'none', propsFooter: { sx: codePreviewStyles.footer } },\n          propsCard,\n          rest as Partial<CardProps>,\n        )}\n        footer={\n          <>\n            <div\n              {...mergeAttrs<'div'>({ sx: codePreviewStyles.toolbar }, propsToolbar, {\n                // 工具栏上的意图（要看、要复制、要编辑）：开始加载与高亮，点下去时多半已经好了\n                onPointerenter: prepare,\n                onFocusin: prepare,\n              })}\n            >\n              {actions}\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'ghost', tone: 'neutral', size: 'sm', icon: CodeIcon },\n                  propsToggle,\n                  {\n                    'aria-expanded': showCode,\n                    'aria-controls': codeId,\n                    onClick: () => (showCode = !showCode),\n                  },\n                )}\n              >\n                {showCode ? messages.hideCode : messages.showCode}\n              </Button>\n              <CopyButton\n                {...mergePartProps<CopyButtonProps>(\n                  {\n                    variant: 'ghost',\n                    tone: 'neutral',\n                    size: 'sm',\n                    value: () => source() ?? load(),\n                  },\n                  propsCopy,\n                )}\n              />\n            </div>\n            <Collapse\n              {...mergePartProps<CollapseProps>({}, propsCollapse, { id: codeId })}\n              _open={showCode}\n            >\n              <CodeBlock\n                {...mergePartProps<CodeBlockProps>(\n                  {\n                    code: source() ?? '',\n                    lang,\n                    highlight: showCode || wanted,\n                    maxLines,\n                    copyable: false,\n                    propsRoot: { sx: codePreviewStyles.code },\n                  },\n                  propsCode,\n                )}\n              />\n            </Collapse>\n          </>\n        }\n      >\n        <div\n          {...mergeAttrs<'div'>({ sx: codePreviewStyles.preview }, propsPreview, {\n            role: 'group',\n            'aria-label': messages.preview,\n          })}\n        >\n          <ScrollArea {...mergePartProps<ScrollAreaProps>({ axis: 'x' }, propsPreviewScroll)}>\n            <div\n              {...mergeAttrs<'div'>({\n                sx: [codePreviewStyles.layout, align === 'center' && codePreviewStyles.center],\n              })}\n            >\n              {children}\n            </div>\n          </ScrollArea>\n        </div>\n      </Card>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/docs-kit/PropsTable.js

@@ -4,8 +4,8 @@ import { Code } from "../base/Code.js";
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from "../table/Table.js";
 import { useMessages } from "../config/lang/messages.js";
 import { docsKitMessages } from "./messages.js";
-import { createTextVNode, createVNode, mergeProps, unref } from "vue";
-import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createTextVNode, createVNode, unref } from "vue";
+import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/docs-kit/PropsTable.tsx
 /** prop 的种类：文档里分开列出 */
@@ -48,7 +48,7 @@ var PropsTable = /*#__PURE__*/ _component((_props, _ctx) => {
 	const caption = readonlyProp(_props, "caption");
 	const rest = restProps(_props, _ctx, true);
 	const messages = useMessages("docsKit", docsKitMessages);
-	return () => createVNode(Table, mergeProps(mergePartProps({ density: "compact" }, rest), { "key": "__site8" }), {
+	return () => createVNode(Table, mergeJsxProps(mergePartProps({ density: "compact" }, rest), { "key": "__site8" }), {
 		default: () => [
 			hasContent(caption.value) && createVNode(TableCaption, { "key": "__site0" }, {
 				default: () => [unref(caption)],
@@ -105,7 +105,7 @@ var PropsTable = /*#__PURE__*/ _component((_props, _ctx) => {
 					])] }),
 					createVNode(TableCell, null, { default: () => [createVNode(Code, { "sx": propsTableStyles.type }, { default: () => [prop.type] })] }),
 					createVNode(TableCell, { "nowrap": true }, { default: () => [prop.default != null ? createVNode(Code, null, { default: () => [prop.default] }) : createVNode("span", mergeAttrs({ sx: propsTableStyles.muted }), [createTextVNode("—")])] }),
-					createVNode(TableCell, { "sx": propsTableStyles.descriptionCell }, { default: () => [createVNode("p", mergeAttrs({ sx: propsTableStyles.description }), [prop.description]), prop.values && prop.values.some((value) => value.description) && createVNode("dl", mergeAttrs({ sx: propsTableStyles.values }), [prop.values.map((value) => [createVNode("dt", mergeProps({ "key": `${value.value}-term` }, mergeAttrs({ sx: propsTableStyles.valueTerm })), [createVNode(Code, null, { default: () => [value.value] })]), createVNode("dd", mergeProps({ "key": `${value.value}-text` }, mergeAttrs({ sx: propsTableStyles.valueText })), [value.description])])])] })
+					createVNode(TableCell, { "sx": propsTableStyles.descriptionCell }, { default: () => [createVNode("p", mergeAttrs({ sx: propsTableStyles.description }), [prop.description]), prop.values && prop.values.some((value) => value.description) && createVNode("dl", mergeAttrs({ sx: propsTableStyles.values }), [prop.values.map((value) => [createVNode("dt", mergeJsxProps({ "key": `${value.value}-term` }, mergeAttrs({ sx: propsTableStyles.valueTerm })), [createVNode(Code, null, { default: () => [value.value] })]), createVNode("dd", mergeJsxProps({ "key": `${value.value}-text` }, mergeAttrs({ sx: propsTableStyles.valueText })), [value.description])])])] })
 				] }))],
 				$stable: true
 			})

package/dist/docs-kit/PropsTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropsTable.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","_vue_unref","_createTextVNode"],"sources":["../../src/docs-kit/PropsTable.tsx"],"sourcesContent":["/**\n * 组件 API 的表格：一行一个 prop，列出名称、类型、默认值与说明；档位类的 prop 在说明下列出每个可选值的含义。\n * 文档站用它展示从类型与 JSDoc 生成的数据（ComponentApi），也可以手写数据给自己的组件做文档。\n *\n *   <PropsTable props={api.props.filter((prop) => prop.kind === 'prop')} />\n *\n * 必填的 prop 名称旁标“必填”，能 `_bind` 双向绑定的标“可绑定”（文案见 messages.ts）。外层是静态表格 Table，窄屏时横向滚动。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Badge } from '../base/Badge';\nimport { Code } from '../base/Code';\nimport { useMessages } from '../config/lang/messages';\nimport { hasContent, mergeAttrs, mergePartProps } from '../utils/props';\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableRow,\n  type TableProps,\n} from '../table/Table';\nimport { docsKitMessages } from './messages';\n\n/** prop 的种类：文档里分开列出 */\nexport interface ApiPropKinds {\n  /** 普通属性：外观、状态、数据 */\n  prop: unknown;\n  /** 部件属性（propsXxx）：透传给内部的某个部件 */\n  part: unknown;\n  /** 事件（onXxx） */\n  event: unknown;\n  /** 内容：children 与渲染函数（renderXxx） */\n  content: unknown;\n}\n\n/** 档位类 prop 的一个可选值 */\nexport interface ApiValue {\n  /** 取值 */\n  value: string;\n  /** 这个值的含义；没有注释时为空 */\n  description: string;\n}\n\n/** 一个 prop 的文档数据 */\nexport interface ApiProp {\n  /** 名称 */\n  name: string;\n  /** 种类 */\n  kind: keyof ApiPropKinds;\n  /** 类型（源码里写的样子，如 `keyof ButtonVariants`） */\n  type: string;\n  /** 必填 */\n  required: boolean;\n  /** 默认值（源码表达式，如 `'button'`、`false`）；没有时不显示 */\n  default?: string;\n  /** 能用 `_bind` 双向绑定 */\n  bindable?: boolean;\n  /** 说明 */\n  description: string;\n  /** 档位类的可选值与各自的含义 */\n  values?: ApiValue[];\n}\n\n/** 一个组件的 API 文档数据 */\nexport interface ComponentApi {\n  /** Props 接口的名字 */\n  name: string;\n  /** 组件名：ButtonProps → Button；泛型组件的 SelectBaseProps → Select */\n  component: string;\n  /** 接口的说明（如“未声明的属性落到 button 上”） */\n  description: string;\n  /** 各个 prop */\n  props: ApiProp[];\n}\n\n/** 未声明的属性落到 table 上 */\nexport interface PropsTableProps extends TableProps {\n  /** 要列出的 prop */\n  props: readonly ApiProp[];\n  /** 表格标题（caption），同时是表格的名称 */\n  caption?: VNodeChild;\n}\n\n/** PropsTable 的样式：name、nameCode、head、descriptionCell、type、muted、description、values、valueTerm、valueText */\nexport const propsTableStyles = css.create({\n  name: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '_xs' },\n  // 属性名不断开：Code 默认可以在任意位置换行，表格会按它把名称列压到最窄\n  nameCode: { whiteSpace: 'nowrap' },\n  // 表头都很短，中文会在任意字间断开（“默认 / 值”）\n  head: { whiteSpace: 'nowrap' },\n  // 说明是最长的一列：至少留出一段可读的宽度，类型再长也不挤掉它\n  descriptionCell: { minWidth: '18rem' },\n  type: { color: '_codeType' },\n  muted: { color: '_textMuted' },\n  description: { margin: 0 },\n  values: {\n    display: 'grid',\n    gridTemplateColumns: 'max-content 1fr',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n    marginBlockStart: '_sm',\n    fontSize: '_sm',\n  },\n  valueTerm: { margin: 0 },\n  valueText: { margin: 0, color: '_textMuted' },\n});\n\n/** 组件 API 的表格：名称、类型、默认值、说明与可选值 */\nexport const PropsTable = _component(({ props, caption, ...rest }: PropsTableProps) => {\n  const messages = useMessages('docsKit', docsKitMessages);\n  return () => (\n    <Table {...mergePartProps<TableProps>({ density: 'compact' }, rest)}>\n      {hasContent(caption) && <TableCaption>{caption}</TableCaption>}\n      <TableHead>\n        <TableRow>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.name}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.type}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.defaultValue}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.description}</TableHeaderCell>\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {props.map((prop) => (\n          <TableRow key={prop.name}>\n            <TableCell>\n              <span {...mergeAttrs<'span'>({ sx: propsTableStyles.name })}>\n                <Code sx={propsTableStyles.nameCode}>{prop.name}</Code>\n                {prop.required && <Badge tone=\"warning\">{messages.required}</Badge>}\n                {prop.bindable && <Badge tone=\"accent\">{messages.bindable}</Badge>}\n              </span>\n            </TableCell>\n            <TableCell>\n              <Code sx={propsTableStyles.type}>{prop.type}</Code>\n            </TableCell>\n            <TableCell nowrap>\n              {prop.default != null ? (\n                <Code>{prop.default}</Code>\n              ) : (\n                <span {...mergeAttrs<'span'>({ sx: propsTableStyles.muted })}>—</span>\n              )}\n            </TableCell>\n            <TableCell sx={propsTableStyles.descriptionCell}>\n              <p {...mergeAttrs<'p'>({ sx: propsTableStyles.description })}>{prop.description}</p>\n              {prop.values && prop.values.some((value) => value.description) && (\n                <dl {...mergeAttrs<'dl'>({ sx: propsTableStyles.values })}>\n                  {prop.values.map((value) => [\n                    <dt\n                      key={`${value.value}-term`}\n                      {...mergeAttrs<'dt'>({ sx: propsTableStyles.valueTerm })}\n                    >\n                      <Code>{value.value}</Code>\n                    </dt>,\n                    <dd\n                      key={`${value.value}-text`}\n                      {...mergeAttrs<'dd'>({ sx: propsTableStyles.valueText })}\n                    >\n                      {value.description}\n                    </dd>,\n                  ])}\n                </dl>\n              )}\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"PropsTable.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","_vue_unref","_createTextVNode"],"sources":["../../src/docs-kit/PropsTable.tsx"],"sourcesContent":["/**\n * 组件 API 的表格：一行一个 prop，列出名称、类型、默认值与说明；档位类的 prop 在说明下列出每个可选值的含义。\n * 文档站用它展示从类型与 JSDoc 生成的数据（ComponentApi），也可以手写数据给自己的组件做文档。\n *\n *   <PropsTable props={api.props.filter((prop) => prop.kind === 'prop')} />\n *\n * 必填的 prop 名称旁标“必填”，能 `_bind` 双向绑定的标“可绑定”（文案见 messages.ts）。外层是静态表格 Table，窄屏时横向滚动。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Badge } from '../base/Badge';\nimport { Code } from '../base/Code';\nimport { useMessages } from '../config/lang/messages';\nimport { hasContent, mergeAttrs, mergePartProps } from '../utils/props';\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableRow,\n  type TableProps,\n} from '../table/Table';\nimport { docsKitMessages } from './messages';\n\n/** prop 的种类：文档里分开列出 */\nexport interface ApiPropKinds {\n  /** 普通属性：外观、状态、数据 */\n  prop: unknown;\n  /** 部件属性（propsXxx）：透传给内部的某个部件 */\n  part: unknown;\n  /** 事件（onXxx） */\n  event: unknown;\n  /** 内容：children 与渲染函数（renderXxx） */\n  content: unknown;\n}\n\n/** 档位类 prop 的一个可选值 */\nexport interface ApiValue {\n  /** 取值 */\n  value: string;\n  /** 这个值的含义；没有注释时为空 */\n  description: string;\n}\n\n/** 一个 prop 的文档数据 */\nexport interface ApiProp {\n  /** 名称 */\n  name: string;\n  /** 种类 */\n  kind: keyof ApiPropKinds;\n  /** 类型（源码里写的样子，如 `keyof ButtonVariants`） */\n  type: string;\n  /** 必填 */\n  required: boolean;\n  /** 默认值（源码表达式，如 `'button'`、`false`）；没有时不显示 */\n  default?: string;\n  /** 能用 `_bind` 双向绑定 */\n  bindable?: boolean;\n  /** 说明 */\n  description: string;\n  /** 档位类的可选值与各自的含义 */\n  values?: ApiValue[];\n}\n\n/** 一个组件的 API 文档数据 */\nexport interface ComponentApi {\n  /** Props 接口的名字 */\n  name: string;\n  /** 组件名：ButtonProps → Button；泛型组件的 SelectBaseProps → Select */\n  component: string;\n  /** 接口的说明（如“未声明的属性落到 button 上”） */\n  description: string;\n  /** 各个 prop */\n  props: ApiProp[];\n}\n\n/** 未声明的属性落到 table 上 */\nexport interface PropsTableProps extends TableProps {\n  /** 要列出的 prop */\n  props: readonly ApiProp[];\n  /** 表格标题（caption），同时是表格的名称 */\n  caption?: VNodeChild;\n}\n\n/** PropsTable 的样式：name、nameCode、head、descriptionCell、type、muted、description、values、valueTerm、valueText */\nexport const propsTableStyles = css.create({\n  name: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '_xs' },\n  // 属性名不断开：Code 默认可以在任意位置换行，表格会按它把名称列压到最窄\n  nameCode: { whiteSpace: 'nowrap' },\n  // 表头都很短，中文会在任意字间断开（“默认 / 值”）\n  head: { whiteSpace: 'nowrap' },\n  // 说明是最长的一列：至少留出一段可读的宽度，类型再长也不挤掉它\n  descriptionCell: { minWidth: '18rem' },\n  type: { color: '_codeType' },\n  muted: { color: '_textMuted' },\n  description: { margin: 0 },\n  values: {\n    display: 'grid',\n    gridTemplateColumns: 'max-content 1fr',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n    marginBlockStart: '_sm',\n    fontSize: '_sm',\n  },\n  valueTerm: { margin: 0 },\n  valueText: { margin: 0, color: '_textMuted' },\n});\n\n/** 组件 API 的表格：名称、类型、默认值、说明与可选值 */\nexport const PropsTable = _component(({ props, caption, ...rest }: PropsTableProps) => {\n  const messages = useMessages('docsKit', docsKitMessages);\n  return () => (\n    <Table {...mergePartProps<TableProps>({ density: 'compact' }, rest)}>\n      {hasContent(caption) && <TableCaption>{caption}</TableCaption>}\n      <TableHead>\n        <TableRow>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.name}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.type}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.defaultValue}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.description}</TableHeaderCell>\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {props.map((prop) => (\n          <TableRow key={prop.name}>\n            <TableCell>\n              <span {...mergeAttrs<'span'>({ sx: propsTableStyles.name })}>\n                <Code sx={propsTableStyles.nameCode}>{prop.name}</Code>\n                {prop.required && <Badge tone=\"warning\">{messages.required}</Badge>}\n                {prop.bindable && <Badge tone=\"accent\">{messages.bindable}</Badge>}\n              </span>\n            </TableCell>\n            <TableCell>\n              <Code sx={propsTableStyles.type}>{prop.type}</Code>\n            </TableCell>\n            <TableCell nowrap>\n              {prop.default != null ? (\n                <Code>{prop.default}</Code>\n              ) : (\n                <span {...mergeAttrs<'span'>({ sx: propsTableStyles.muted })}>—</span>\n              )}\n            </TableCell>\n            <TableCell sx={propsTableStyles.descriptionCell}>\n              <p {...mergeAttrs<'p'>({ sx: propsTableStyles.description })}>{prop.description}</p>\n              {prop.values && prop.values.some((value) => value.description) && (\n                <dl {...mergeAttrs<'dl'>({ sx: propsTableStyles.values })}>\n                  {prop.values.map((value) => [\n                    <dt\n                      key={`${value.value}-term`}\n                      {...mergeAttrs<'dt'>({ sx: propsTableStyles.valueTerm })}\n                    >\n                      <Code>{value.value}</Code>\n                    </dt>,\n                    <dd\n                      key={`${value.value}-text`}\n                      {...mergeAttrs<'dd'>({ sx: propsTableStyles.valueText })}\n                    >\n                      {value.description}\n                    </dd>,\n                  ])}\n                </dl>\n              )}\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n});\n"],"mappings":"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"}

package/dist/feedback/Alert.js

@@ -1,6 +1,6 @@
 import { t } from "../config/theme/tokens.js";
 import { useDefaults } from "../config/defaults.js";
-import { hasContent, mergeAttrs, mergePartProps, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { hasContent, mergeAttrs, mergePartProps, mergeProps } from "../utils/props.js";
 import { fontSizeStyles, relativeFontSizeStyles } from "../utils/style/typography.js";
 import { radiusStyles } from "../utils/style/styles.js";
 import { useRecipe } from "../config/styles.js";
@@ -10,8 +10,8 @@ import { presenceStyles } from "../utils/style/transitions.js";
 import { CloseButton } from "../base/CloseButton.js";
 import { statusIcons, statusToneSx } from "../utils/style/tone-styles.js";
 import { useDismissible } from "../utils/motion/presence.js";
-import { createVNode, mergeProps } from "vue";
-import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/feedback/Alert.tsx
 /** 提示条的样式（实底不用于大块文字，不提供） */
@@ -115,7 +115,7 @@ var Alert = /*#__PURE__*/ _component((_props, _ctx) => {
 		const shownIcon = icon.value === false ? void 0 : icon.value ?? statusIcons[tone.value];
 		const extra = hasContent(description.value) && hasContent(children.value);
 		const text = hasContent(description.value) ? description.value : children.value;
-		return createVNode("div", mergeProps(mergeAttrs({
+		return createVNode("div", mergeJsxProps(mergeAttrs({
 			...s.root,
 			sx: [
 				statusToneSx(shownVariant, tone.value),
@@ -143,7 +143,7 @@ var Alert = /*#__PURE__*/ _component((_props, _ctx) => {
 				extra && createVNode("div", mergeAttrs(s.content, propsContent.value), [children.value])
 			]),
 			hasContent(action.value) && createVNode("div", mergeAttrs(s.action, propsAction.value), [action.value]),
-			onClose.value && createVNode(CloseButton, mergeProps$1({
+			onClose.value && createVNode(CloseButton, mergeProps({
 				...s.close,
 				sx: [s.close.sx, relativeFontSizeStyles.sm]
 			}, propsClose.value, { onClick: dismissible.dismiss }), null)

package/dist/feedback/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","mergeProps"],"sources":["../../src/feedback/Alert.tsx"],"sourcesContent":["/**\n * 提示条（div）：页面或区块里的说明、成功、警告、错误信息。图标按色调自动选（Lucide），可以换或去掉；可以关闭。\n *\n *   <Alert tone=\"warning\" title=\"即将过期\">你的订阅将在 3 天后到期。</Alert>\n *   <Alert tone=\"danger\" live=\"assertive\" onClose={dismiss}>保存失败，请重试</Alert>\n *   <Alert tone=\"info\" title=\"导入完成\" description=\"成功 120 条，失败 3 条。\"><Link href=\"#log\">查看失败原因</Link></Alert>\n *\n * 说明写在 description 或 children 上（同 Empty、Result 的 description）；两个都给时 children 是说明下面的额外内容。\n *\n * 页面加载时就在的提示不需要读屏打断；操作后才出现的用 live 让读屏播报。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { CloseButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Spinner, type SpinnerProps } from '../base/Spinner';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { useDismissible } from '../utils/motion/presence';\nimport { hasContent, mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { statusIcons, statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { presenceStyles } from '../utils/style/transitions';\nimport { fontSizeStyles, relativeFontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { radiusStyles, type Radius } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 提示条的样式（实底不用于大块文字，不提供） */\nexport interface AlertVariants {\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 浅色底加描边 */\n  surface: unknown;\n  /** 只有描边 */\n  outline: unknown;\n}\n\n/** 读屏怎样播报出现的提示 */\nexport interface AlertLives {\n  /** 不主动播报（默认）：页面加载时就在的提示 */\n  off: unknown;\n  /** 礼貌播报（role=\"status\"）：等读屏念完当前内容再念，如“已保存” */\n  polite: unknown;\n  /** 立即播报（role=\"alert\"）：打断当前朗读，只用于错误等紧急信息 */\n  assertive: unknown;\n}\n\n/** 提示条的外观选项；可以用 createUi / Provider 的 defaults.Alert 统一改默认值 */\nexport interface AlertOptions {\n  /** 样式，默认 soft */\n  variant?: keyof AlertVariants;\n  /** 圆角，默认 md；贴着页面顶部的通栏写 none */\n  radius?: Radius;\n}\n\n/** 角色由 live 决定，忙碌由 loading 决定；原生的 title 属性（悬停提示）让给标题 */\nexport type AlertManaged = 'role' | 'title' | 'aria-busy';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface AlertProps extends PartProps<'div', AlertManaged>, AlertOptions {\n  /** 色调，默认 info */\n  tone?: StatusTone;\n  /** 字号档位：图标、内边距随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 标题（加粗的第一行） */\n  title?: VNodeChild;\n  /** 说明（标题下面的正文）；不写时 children 就是说明 */\n  description?: VNodeChild;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 进行中（如“正在上传”）：图标换成加载指示，带 aria-busy */\n  loading?: boolean;\n  /** 读屏播报方式，默认 off */\n  live?: keyof AlertLives;\n  /** 右侧的操作（如“重试”按钮） */\n  action?: VNodeChild;\n  /** 给了就显示关闭按钮：点击后提示条先淡出，离场结束再调用；提示条随后被移除时，焦点交给相邻的可聚焦元素；没被移除就重新显示 */\n  onClose?: () => void;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 加载指示（loading 时代替图标）的部件属性 */\n  propsSpinner?: Partial<SpinnerProps>;\n  /** 文字区（标题与正文的容器）的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 说明（标题下面的正文）的部件属性 */\n  propsDescription?: PartProps<'div'>;\n  /** 额外内容（同时给了 description 与 children 时的 children）的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 关闭按钮的部件属性 */\n  propsClose?: Partial<PresetIconButtonProps>;\n  children?: VNodeChild;\n}\n\n/**\n * 提示条的配方：各部件的布局。样式 × 色调的颜色来自共用的 statusToneStyles（直接写主题 token 的表），\n * 排在配方之前，createUi / Provider 的 styles.Alert 能盖过它\n */\nexport const alertRecipe = css.recipe({\n  name: 'Alert',\n  parts: ['root', 'icon', 'body', 'title', 'description', 'content', 'action', 'close'],\n  base: {\n    // 进场与离场的淡入淡出用 presenceStyles\n    root: {\n      boxSizing: 'border-box',\n      display: 'flex',\n      alignItems: 'flex-start',\n      gap: '_sm',\n      padding: '_md',\n      lineHeight: '_normal',\n    },\n    // 图标与第一行文字对齐：行高 1.5em 里居中 1em 的图标\n    icon: { flexShrink: 0, marginBlock: '0.25em' },\n    body: { flexGrow: 1, minWidth: 0, display: 'grid', gap: '_xs' },\n    title: { fontWeight: '_semibold' },\n    description: { color: '_text' },\n    content: { minWidth: 0 },\n    action: { flexShrink: 0, alignSelf: 'center' },\n    close: { flexShrink: 0, marginBlock: `calc(-1 * ${t.space.xs})`, color: 'inherit' },\n  },\n});\n\n/** 提示条的部件（createUi / Provider 的 styles.Alert 按它定制） */\nexport type AlertPart = (typeof alertRecipe.parts)[number];\n\nconst ROLES = { off: undefined, polite: 'status', assertive: 'alert' } as const;\n\n/** 提示条：图标 + 标题 + 正文 + 操作 + 关闭 */\nexport const Alert = _component(\n  ({\n    variant,\n    radius,\n    tone = 'info',\n    size,\n    title,\n    description,\n    icon,\n    loading = false,\n    live = 'off',\n    action,\n    onClose,\n    propsIcon,\n    propsSpinner,\n    propsBody,\n    propsTitle,\n    propsDescription,\n    propsContent,\n    propsAction,\n    propsClose,\n    children,\n    ...rest\n  }: AlertProps) => {\n    const appearance = useDefaults('Alert', () => ({ variant, radius }), {\n      variant: 'soft',\n      radius: 'md',\n    });\n    const recipe = useRecipe(alertRecipe);\n    // 离场结束才交给使用方移除；使用方没移除时提示条重新出现\n    const dismissible = useDismissible(() => onClose?.());\n    return () => {\n      const { variant: shownVariant, radius: shownRadius } = appearance();\n      const s = recipe({ variant: shownVariant, tone });\n      const shownIcon = icon === false ? undefined : (icon ?? statusIcons[tone]);\n      // 说明取 description，没有时取 children；两个都有时 children 放在说明下面\n      const extra = hasContent(description) && hasContent(children);\n      const text = hasContent(description) ? description : children;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              ...s.root,\n              sx: [\n                statusToneSx(shownVariant, tone),\n                s.root.sx,\n                presenceStyles.fade,\n                radiusStyles[shownRadius],\n                size && fontSizeStyles[size],\n                dismissible.dismissing && presenceStyles.leaving,\n              ],\n            },\n            rest,\n            { ref: dismissible.ref, role: ROLES[live], 'aria-busy': loading || undefined },\n          )}\n          data-tone={tone}\n          data-state={dismissible.state}\n        >\n          {loading ? (\n            <Spinner {...mergePartProps<SpinnerProps>(s.icon, propsSpinner)} />\n          ) : (\n            shownIcon && (\n              <Icon {...mergePartProps<IconProps>({ ...s.icon, icon: shownIcon }, propsIcon)} />\n            )\n          )}\n          <div {...mergeAttrs<'div'>(s.body, propsBody)}>\n            {hasContent(title) && <div {...mergeAttrs<'div'>(s.title, propsTitle)}>{title}</div>}\n            {hasContent(text) && (\n              <div {...mergeAttrs<'div'>(s.description, propsDescription)}>{text}</div>\n            )}\n            {extra && <div {...mergeAttrs<'div'>(s.content, propsContent)}>{children}</div>}\n          </div>\n          {hasContent(action) && <div {...mergeAttrs<'div'>(s.action, propsAction)}>{action}</div>}\n          {onClose && (\n            <CloseButton\n              {...mergeProps<PresetIconButtonProps>(\n                { ...s.close, sx: [s.close.sx, relativeFontSizeStyles.sm] },\n                propsClose,\n                { onClick: dismissible.dismiss },\n              )}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Alert.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/Alert.tsx"],"sourcesContent":["/**\n * 提示条（div）：页面或区块里的说明、成功、警告、错误信息。图标按色调自动选（Lucide），可以换或去掉；可以关闭。\n *\n *   <Alert tone=\"warning\" title=\"即将过期\">你的订阅将在 3 天后到期。</Alert>\n *   <Alert tone=\"danger\" live=\"assertive\" onClose={dismiss}>保存失败，请重试</Alert>\n *   <Alert tone=\"info\" title=\"导入完成\" description=\"成功 120 条，失败 3 条。\"><Link href=\"#log\">查看失败原因</Link></Alert>\n *\n * 说明写在 description 或 children 上（同 Empty、Result 的 description）；两个都给时 children 是说明下面的额外内容。\n *\n * 页面加载时就在的提示不需要读屏打断；操作后才出现的用 live 让读屏播报。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { CloseButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Spinner, type SpinnerProps } from '../base/Spinner';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { useDismissible } from '../utils/motion/presence';\nimport { hasContent, mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { statusIcons, statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { presenceStyles } from '../utils/style/transitions';\nimport { fontSizeStyles, relativeFontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { radiusStyles, type Radius } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 提示条的样式（实底不用于大块文字，不提供） */\nexport interface AlertVariants {\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 浅色底加描边 */\n  surface: unknown;\n  /** 只有描边 */\n  outline: unknown;\n}\n\n/** 读屏怎样播报出现的提示 */\nexport interface AlertLives {\n  /** 不主动播报（默认）：页面加载时就在的提示 */\n  off: unknown;\n  /** 礼貌播报（role=\"status\"）：等读屏念完当前内容再念，如“已保存” */\n  polite: unknown;\n  /** 立即播报（role=\"alert\"）：打断当前朗读，只用于错误等紧急信息 */\n  assertive: unknown;\n}\n\n/** 提示条的外观选项；可以用 createUi / Provider 的 defaults.Alert 统一改默认值 */\nexport interface AlertOptions {\n  /** 样式，默认 soft */\n  variant?: keyof AlertVariants;\n  /** 圆角，默认 md；贴着页面顶部的通栏写 none */\n  radius?: Radius;\n}\n\n/** 角色由 live 决定，忙碌由 loading 决定；原生的 title 属性（悬停提示）让给标题 */\nexport type AlertManaged = 'role' | 'title' | 'aria-busy';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface AlertProps extends PartProps<'div', AlertManaged>, AlertOptions {\n  /** 色调，默认 info */\n  tone?: StatusTone;\n  /** 字号档位：图标、内边距随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 标题（加粗的第一行） */\n  title?: VNodeChild;\n  /** 说明（标题下面的正文）；不写时 children 就是说明 */\n  description?: VNodeChild;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 进行中（如“正在上传”）：图标换成加载指示，带 aria-busy */\n  loading?: boolean;\n  /** 读屏播报方式，默认 off */\n  live?: keyof AlertLives;\n  /** 右侧的操作（如“重试”按钮） */\n  action?: VNodeChild;\n  /** 给了就显示关闭按钮：点击后提示条先淡出，离场结束再调用；提示条随后被移除时，焦点交给相邻的可聚焦元素；没被移除就重新显示 */\n  onClose?: () => void;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 加载指示（loading 时代替图标）的部件属性 */\n  propsSpinner?: Partial<SpinnerProps>;\n  /** 文字区（标题与正文的容器）的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 说明（标题下面的正文）的部件属性 */\n  propsDescription?: PartProps<'div'>;\n  /** 额外内容（同时给了 description 与 children 时的 children）的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 关闭按钮的部件属性 */\n  propsClose?: Partial<PresetIconButtonProps>;\n  children?: VNodeChild;\n}\n\n/**\n * 提示条的配方：各部件的布局。样式 × 色调的颜色来自共用的 statusToneStyles（直接写主题 token 的表），\n * 排在配方之前，createUi / Provider 的 styles.Alert 能盖过它\n */\nexport const alertRecipe = css.recipe({\n  name: 'Alert',\n  parts: ['root', 'icon', 'body', 'title', 'description', 'content', 'action', 'close'],\n  base: {\n    // 进场与离场的淡入淡出用 presenceStyles\n    root: {\n      boxSizing: 'border-box',\n      display: 'flex',\n      alignItems: 'flex-start',\n      gap: '_sm',\n      padding: '_md',\n      lineHeight: '_normal',\n    },\n    // 图标与第一行文字对齐：行高 1.5em 里居中 1em 的图标\n    icon: { flexShrink: 0, marginBlock: '0.25em' },\n    body: { flexGrow: 1, minWidth: 0, display: 'grid', gap: '_xs' },\n    title: { fontWeight: '_semibold' },\n    description: { color: '_text' },\n    content: { minWidth: 0 },\n    action: { flexShrink: 0, alignSelf: 'center' },\n    close: { flexShrink: 0, marginBlock: `calc(-1 * ${t.space.xs})`, color: 'inherit' },\n  },\n});\n\n/** 提示条的部件（createUi / Provider 的 styles.Alert 按它定制） */\nexport type AlertPart = (typeof alertRecipe.parts)[number];\n\nconst ROLES = { off: undefined, polite: 'status', assertive: 'alert' } as const;\n\n/** 提示条：图标 + 标题 + 正文 + 操作 + 关闭 */\nexport const Alert = _component(\n  ({\n    variant,\n    radius,\n    tone = 'info',\n    size,\n    title,\n    description,\n    icon,\n    loading = false,\n    live = 'off',\n    action,\n    onClose,\n    propsIcon,\n    propsSpinner,\n    propsBody,\n    propsTitle,\n    propsDescription,\n    propsContent,\n    propsAction,\n    propsClose,\n    children,\n    ...rest\n  }: AlertProps) => {\n    const appearance = useDefaults('Alert', () => ({ variant, radius }), {\n      variant: 'soft',\n      radius: 'md',\n    });\n    const recipe = useRecipe(alertRecipe);\n    // 离场结束才交给使用方移除；使用方没移除时提示条重新出现\n    const dismissible = useDismissible(() => onClose?.());\n    return () => {\n      const { variant: shownVariant, radius: shownRadius } = appearance();\n      const s = recipe({ variant: shownVariant, tone });\n      const shownIcon = icon === false ? undefined : (icon ?? statusIcons[tone]);\n      // 说明取 description，没有时取 children；两个都有时 children 放在说明下面\n      const extra = hasContent(description) && hasContent(children);\n      const text = hasContent(description) ? description : children;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              ...s.root,\n              sx: [\n                statusToneSx(shownVariant, tone),\n                s.root.sx,\n                presenceStyles.fade,\n                radiusStyles[shownRadius],\n                size && fontSizeStyles[size],\n                dismissible.dismissing && presenceStyles.leaving,\n              ],\n            },\n            rest,\n            { ref: dismissible.ref, role: ROLES[live], 'aria-busy': loading || undefined },\n          )}\n          data-tone={tone}\n          data-state={dismissible.state}\n        >\n          {loading ? (\n            <Spinner {...mergePartProps<SpinnerProps>(s.icon, propsSpinner)} />\n          ) : (\n            shownIcon && (\n              <Icon {...mergePartProps<IconProps>({ ...s.icon, icon: shownIcon }, propsIcon)} />\n            )\n          )}\n          <div {...mergeAttrs<'div'>(s.body, propsBody)}>\n            {hasContent(title) && <div {...mergeAttrs<'div'>(s.title, propsTitle)}>{title}</div>}\n            {hasContent(text) && (\n              <div {...mergeAttrs<'div'>(s.description, propsDescription)}>{text}</div>\n            )}\n            {extra && <div {...mergeAttrs<'div'>(s.content, propsContent)}>{children}</div>}\n          </div>\n          {hasContent(action) && <div {...mergeAttrs<'div'>(s.action, propsAction)}>{action}</div>}\n          {onClose && (\n            <CloseButton\n              {...mergeProps<PresetIconButtonProps>(\n                { ...s.close, sx: [s.close.sx, relativeFontSizeStyles.sm] },\n                propsClose,\n                { onClick: dismissible.dismiss },\n              )}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/feedback/Banner.js

@@ -1,13 +1,13 @@
 import { t } from "../config/theme/tokens.js";
-import { hasContent, mergeAttrs, mergePartProps, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { hasContent, mergeAttrs, mergePartProps, mergeProps } from "../utils/props.js";
 import { fontSizeStyles, relativeFontSizeStyles } from "../utils/style/typography.js";
 import { Icon } from "../base/Icon.js";
 import { presenceStyles } from "../utils/style/transitions.js";
 import { CloseButton } from "../base/CloseButton.js";
 import { statusIcons, statusToneSx } from "../utils/style/tone-styles.js";
 import { useDismissible } from "../utils/motion/presence.js";
-import { createVNode, mergeProps } from "vue";
-import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/feedback/Banner.tsx
 /** 横幅的样式 */
@@ -75,7 +75,7 @@ var Banner = /*#__PURE__*/ _component((_props, _ctx) => {
 	const dismissible = useDismissible(() => onClose.value?.());
 	return () => {
 		const shownIcon = icon.value === false ? void 0 : icon.value ?? statusIcons[tone.value];
-		return createVNode("div", mergeProps(mergeAttrs({ sx: [
+		return createVNode("div", mergeJsxProps(mergeAttrs({ sx: [
 			bannerStyles.root,
 			!onClose.value && bannerStyles.balanced,
 			presenceStyles.fade,
@@ -95,7 +95,7 @@ var Banner = /*#__PURE__*/ _component((_props, _ctx) => {
 			}, propsIcon.value), null),
 			createVNode("div", mergeAttrs({ sx: bannerStyles.content }, propsContent.value), [hasContent(title.value) && createVNode("strong", mergeAttrs({ sx: bannerStyles.title }, propsTitle.value), [title.value]), children.value]),
 			hasContent(action.value) && createVNode("div", mergeAttrs({ sx: bannerStyles.action }, propsAction.value), [action.value]),
-			onClose.value && createVNode(CloseButton, mergeProps$1({ sx: [bannerStyles.close, relativeFontSizeStyles.sm] }, propsClose.value, { onClick: dismissible.dismiss }), null)
+			onClose.value && createVNode(CloseButton, mergeProps({ sx: [bannerStyles.close, relativeFontSizeStyles.sm] }, propsClose.value, { onClick: dismissible.dismiss }), null)
 		]);
 	};
 }, {

package/dist/feedback/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","mergeProps"],"sources":["../../src/feedback/Banner.tsx"],"sourcesContent":["/**\n * 横幅：贴着页面（或区域）顶部的一行通栏通知，系统维护、试用到期、新功能上线、只读模式这类整页都相关的消息。\n *\n *   <Banner tone=\"warning\" title=\"系统维护\" action={<Link href=\"/notice\">查看详情</Link>} onClose={hide}>\n *     今晚 22:00–23:00 暂停服务\n *   </Banner>\n *\n * 和 Alert 的分工：Alert 放在内容里、说明某一块的状态，可以有多行正文；Banner 占满宽度、一行说完，内容居中，\n * 没有圆角，放在页面最上方（AppShell 的顶栏之上或之下）。实底（solid）最醒目，用于必须先看到的消息。\n * 关闭时先离场再报告 onClose（useDismissible），使用方移除并记住“已关闭”；没移除就重新出现。\n * 页面加载时就在的横幅不播报；运行中才出现的用 live（同 Alert）。\n * 部件：Root（div）、Icon、Content（div：标题与正文）、Title（strong）、Action、Close。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { CloseButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { hasContent, mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { useDismissible } from '../utils/motion/presence';\nimport { statusIcons, statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { presenceStyles } from '../utils/style/transitions';\nimport { fontSizeStyles, relativeFontSizeStyles, type TextSize } from '../utils/style/typography';\nimport type { AlertLives } from './Alert';\nimport { t } from '../config/theme/tokens';\n\n/** 横幅的样式 */\nexport interface BannerVariants {\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 实底：最醒目，必须先看到的消息 */\n  solid: unknown;\n}\n\n/** 角色由 live 决定；原生的 title 属性（悬停提示）让给标题 */\nexport type BannerManaged = 'role' | 'title';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface BannerProps extends PartProps<'div', BannerManaged> {\n  /** 色调，默认 info */\n  tone?: StatusTone;\n  /** 样式，默认 soft */\n  variant?: keyof BannerVariants;\n  /** 字号档位，默认继承上下文字号 */\n  size?: TextSize;\n  /** 加粗的开头（“系统维护”），与正文在同一行 */\n  title?: VNodeChild;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 正文后的操作（链接或小按钮） */\n  action?: VNodeChild;\n  /** 读屏播报方式，默认 off（同 Alert） */\n  live?: keyof AlertLives;\n  /** 给了就显示关闭按钮：先离场，离场结束再调用；使用方没移除时重新出现 */\n  onClose?: () => void;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 文字区的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'strong'>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 关闭按钮的部件属性 */\n  propsClose?: Partial<PresetIconButtonProps>;\n  /** 正文 */\n  children?: VNodeChild;\n}\n\n/** Banner 的样式：root、icon、content、title、action、close */\nexport const bannerStyles = css.create({\n  // 内容居中、一行说完；窄屏时换行。关闭按钮贴在结束边，不参与居中\n  root: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexWrap: 'wrap',\n    columnGap: '_sm',\n    rowGap: '_xs',\n    width: '100%',\n    paddingBlock: '_sm',\n    paddingInlineStart: '_lg',\n    paddingInlineEnd: `calc(${t.space.lg} + 2em)`,\n    lineHeight: '_normal',\n    textAlign: 'center',\n  },\n  // 没有关闭按钮时两边留白一样\n  balanced: { paddingInlineEnd: '_lg' },\n  icon: { flexShrink: 0 },\n  content: { minWidth: 0 },\n  title: { fontWeight: '_semibold', marginInlineEnd: '_sm' },\n  action: { flexShrink: 0, fontWeight: '_medium' },\n  close: {\n    position: 'absolute',\n    insetInlineEnd: '_sm',\n    insetBlockStart: '50%',\n    translate: '0 -50%',\n    color: 'inherit',\n  },\n});\n\nconst ROLES = { off: undefined, polite: 'status', assertive: 'alert' } as const;\n\n/** 横幅：一行通栏通知，内容居中，可以关闭 */\nexport const Banner = _component(\n  ({\n    tone = 'info',\n    variant = 'soft',\n    size,\n    title,\n    icon,\n    action,\n    live = 'off',\n    onClose,\n    propsIcon,\n    propsContent,\n    propsTitle,\n    propsAction,\n    propsClose,\n    children,\n    ...rest\n  }: BannerProps) => {\n    // 离场结束才交给使用方移除；使用方没移除时横幅重新出现\n    const dismissible = useDismissible(() => onClose?.());\n    return () => {\n      const shownIcon = icon === false ? undefined : (icon ?? statusIcons[tone]);\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                bannerStyles.root,\n                !onClose && bannerStyles.balanced,\n                presenceStyles.fade,\n                statusToneSx(variant, tone),\n                size && fontSizeStyles[size],\n                dismissible.dismissing && presenceStyles.leaving,\n              ],\n            },\n            rest,\n            { ref: dismissible.ref, role: ROLES[live] },\n          )}\n          data-tone={tone}\n          data-state={dismissible.state}\n        >\n          {shownIcon && (\n            <Icon\n              {...mergePartProps<IconProps>({ icon: shownIcon, sx: bannerStyles.icon }, propsIcon)}\n            />\n          )}\n          <div {...mergeAttrs<'div'>({ sx: bannerStyles.content }, propsContent)}>\n            {hasContent(title) && (\n              <strong {...mergeAttrs<'strong'>({ sx: bannerStyles.title }, propsTitle)}>\n                {title}\n              </strong>\n            )}\n            {children}\n          </div>\n          {hasContent(action) && (\n            <div {...mergeAttrs<'div'>({ sx: bannerStyles.action }, propsAction)}>{action}</div>\n          )}\n          {onClose && (\n            <CloseButton\n              {...mergeProps<PresetIconButtonProps>(\n                { sx: [bannerStyles.close, relativeFontSizeStyles.sm] },\n                propsClose,\n                { onClick: dismissible.dismiss },\n              )}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Banner.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/Banner.tsx"],"sourcesContent":["/**\n * 横幅：贴着页面（或区域）顶部的一行通栏通知，系统维护、试用到期、新功能上线、只读模式这类整页都相关的消息。\n *\n *   <Banner tone=\"warning\" title=\"系统维护\" action={<Link href=\"/notice\">查看详情</Link>} onClose={hide}>\n *     今晚 22:00–23:00 暂停服务\n *   </Banner>\n *\n * 和 Alert 的分工：Alert 放在内容里、说明某一块的状态，可以有多行正文；Banner 占满宽度、一行说完，内容居中，\n * 没有圆角，放在页面最上方（AppShell 的顶栏之上或之下）。实底（solid）最醒目，用于必须先看到的消息。\n * 关闭时先离场再报告 onClose（useDismissible），使用方移除并记住“已关闭”；没移除就重新出现。\n * 页面加载时就在的横幅不播报；运行中才出现的用 live（同 Alert）。\n * 部件：Root（div）、Icon、Content（div：标题与正文）、Title（strong）、Action、Close。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { CloseButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { hasContent, mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { useDismissible } from '../utils/motion/presence';\nimport { statusIcons, statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { presenceStyles } from '../utils/style/transitions';\nimport { fontSizeStyles, relativeFontSizeStyles, type TextSize } from '../utils/style/typography';\nimport type { AlertLives } from './Alert';\nimport { t } from '../config/theme/tokens';\n\n/** 横幅的样式 */\nexport interface BannerVariants {\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 实底：最醒目，必须先看到的消息 */\n  solid: unknown;\n}\n\n/** 角色由 live 决定；原生的 title 属性（悬停提示）让给标题 */\nexport type BannerManaged = 'role' | 'title';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface BannerProps extends PartProps<'div', BannerManaged> {\n  /** 色调，默认 info */\n  tone?: StatusTone;\n  /** 样式，默认 soft */\n  variant?: keyof BannerVariants;\n  /** 字号档位，默认继承上下文字号 */\n  size?: TextSize;\n  /** 加粗的开头（“系统维护”），与正文在同一行 */\n  title?: VNodeChild;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 正文后的操作（链接或小按钮） */\n  action?: VNodeChild;\n  /** 读屏播报方式，默认 off（同 Alert） */\n  live?: keyof AlertLives;\n  /** 给了就显示关闭按钮：先离场，离场结束再调用；使用方没移除时重新出现 */\n  onClose?: () => void;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 文字区的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'strong'>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 关闭按钮的部件属性 */\n  propsClose?: Partial<PresetIconButtonProps>;\n  /** 正文 */\n  children?: VNodeChild;\n}\n\n/** Banner 的样式：root、icon、content、title、action、close */\nexport const bannerStyles = css.create({\n  // 内容居中、一行说完；窄屏时换行。关闭按钮贴在结束边，不参与居中\n  root: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexWrap: 'wrap',\n    columnGap: '_sm',\n    rowGap: '_xs',\n    width: '100%',\n    paddingBlock: '_sm',\n    paddingInlineStart: '_lg',\n    paddingInlineEnd: `calc(${t.space.lg} + 2em)`,\n    lineHeight: '_normal',\n    textAlign: 'center',\n  },\n  // 没有关闭按钮时两边留白一样\n  balanced: { paddingInlineEnd: '_lg' },\n  icon: { flexShrink: 0 },\n  content: { minWidth: 0 },\n  title: { fontWeight: '_semibold', marginInlineEnd: '_sm' },\n  action: { flexShrink: 0, fontWeight: '_medium' },\n  close: {\n    position: 'absolute',\n    insetInlineEnd: '_sm',\n    insetBlockStart: '50%',\n    translate: '0 -50%',\n    color: 'inherit',\n  },\n});\n\nconst ROLES = { off: undefined, polite: 'status', assertive: 'alert' } as const;\n\n/** 横幅：一行通栏通知，内容居中，可以关闭 */\nexport const Banner = _component(\n  ({\n    tone = 'info',\n    variant = 'soft',\n    size,\n    title,\n    icon,\n    action,\n    live = 'off',\n    onClose,\n    propsIcon,\n    propsContent,\n    propsTitle,\n    propsAction,\n    propsClose,\n    children,\n    ...rest\n  }: BannerProps) => {\n    // 离场结束才交给使用方移除；使用方没移除时横幅重新出现\n    const dismissible = useDismissible(() => onClose?.());\n    return () => {\n      const shownIcon = icon === false ? undefined : (icon ?? statusIcons[tone]);\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                bannerStyles.root,\n                !onClose && bannerStyles.balanced,\n                presenceStyles.fade,\n                statusToneSx(variant, tone),\n                size && fontSizeStyles[size],\n                dismissible.dismissing && presenceStyles.leaving,\n              ],\n            },\n            rest,\n            { ref: dismissible.ref, role: ROLES[live] },\n          )}\n          data-tone={tone}\n          data-state={dismissible.state}\n        >\n          {shownIcon && (\n            <Icon\n              {...mergePartProps<IconProps>({ icon: shownIcon, sx: bannerStyles.icon }, propsIcon)}\n            />\n          )}\n          <div {...mergeAttrs<'div'>({ sx: bannerStyles.content }, propsContent)}>\n            {hasContent(title) && (\n              <strong {...mergeAttrs<'strong'>({ sx: bannerStyles.title }, propsTitle)}>\n                {title}\n              </strong>\n            )}\n            {children}\n          </div>\n          {hasContent(action) && (\n            <div {...mergeAttrs<'div'>({ sx: bannerStyles.action }, propsAction)}>{action}</div>\n          )}\n          {onClose && (\n            <CloseButton\n              {...mergeProps<PresetIconButtonProps>(\n                { sx: [bannerStyles.close, relativeFontSizeStyles.sm] },\n                propsClose,\n                { onClick: dismissible.dismiss },\n              )}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;AAsEA,IAAa,eAAe,IAAI,OAAO;CAErC,MAAM;EACJ,WAAW;EACX,UAAU;EACV,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACV,WAAW;EACX,QAAQ;EACR,OAAO;EACP,cAAc;EACd,oBAAoB;EACpB,kBAAkB,QAAQ,EAAE,MAAM,GAAE;EACpC,YAAY;EACZ,WAAW;CACb;CAEA,UAAU,EAAE,kBAAkB,MAAM;CACpC,MAAM,EAAE,YAAY,EAAE;CACtB,SAAS,EAAE,UAAU,EAAE;CACvB,OAAO;EAAE,YAAY;EAAa,iBAAiB;CAAM;CACzD,QAAQ;EAAE,YAAY;EAAG,YAAY;CAAU;CAC/C,OAAO;EACL,UAAU;EACV,gBAAgB;EAChB,iBAAiB;EACjB,WAAW;EACX,OAAO;CACT;AACF,CAAC;AAED,IAAM,QAAQ;CAAE,KAAK,KAAA;CAAW,QAAQ;CAAU,WAAW;AAAQ;;AAGrE,IAAa,SAAS,0BACpB,QAAA,SAgBmB;CAAA,MAAA,OAAAA,aAAA,QAAA,QAfV,MAAM;CAAA,MAAA,UAAAA,aAAA,QAAA,WACH,MAAM;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAKT,KAAK;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAQT,OAAIC,UAAA,QAAA,MAAA,KAAA;CAGP,MAAM,cAAc,qBAAqB,QAAA,QAAU,CAAC;CACpD,aAAa;EACX,MAAM,YAAY,KAAA,UAAS,QAAQ,KAAA,IAAa,KAAA,SAAQ,YAAW,KAAA;EACnE,OAAAC,YAAA,OAAAC,cAEQ,WACF,EACE,IAAI;GACF,aAAa;GACb,CAAA,QAAA,SAAY,aAAa;GACzB,eAAe;GACf,aAAY,QAAA,OAAA,KAAA,KAAc;GAC1B,KAAA,SAAQ,eAAc,KAAA;GACtB,YAAY,cAAc,eAAe;EAAO,EAEpD,GACA,MACA;GAAE,KAAK,YAAY;GAAK,MAAM,MAAK,KAAA;EAAO,CAC5C,GAAC;GAAA,aAAA,KAAA;GAAA,cAEW,YAAY;EAAK,CAAA,GAAA;GAE5B,aAASD,YAAA,MAEF,eAA0B;IAAE,MAAM;IAAW,IAAI,aAAa;GAAK,GAAC,UAAA,KAAW,GAAC,IAAA;GAEvFA,YAAA,OACQ,WAAkB,EAAE,IAAI,aAAa,QAAQ,GAAC,aAAA,KAAc,GAAC,CACnE,WAAU,MAAA,KAAM,KAACA,YAAA,UACJ,WAAqB,EAAE,IAAI,aAAa,MAAM,GAAC,WAAA,KAAY,GAAC,CAAA,MAAA,KAAA,CAAA,GAGzE,SAAA,KAAA,CAAA;GAGF,WAAU,OAAA,KAAO,KAACA,YAAA,OACR,WAAkB,EAAE,IAAI,aAAa,OAAO,GAAC,YAAA,KAAa,GAAC,CAAA,OAAA,KAAA,CAAA;GAErE,QAAA,SAAAA,YAAA,aAEO,WACF,EAAE,IAAI,CAAC,aAAa,OAAO,uBAAuB,EAAE,EAAE,GAAC,WAAA,OAEvD,EAAE,SAAS,YAAY,QAAQ,CACjC,GAAC,IAAA;EAEJ,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/feedback/Empty.js

@@ -4,8 +4,8 @@ import { fontSizeStyles } from "../utils/style/typography.js";
 import { useRecipe } from "../config/styles.js";
 import { Icon } from "../base/Icon.js";
 import { Paragraph, Text as Text$1 } from "../base/Text.js";
-import { createVNode, mergeProps, unref } from "vue";
-import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, unref } from "vue";
+import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { Inbox } from "@lucide/icons";
 //#region src/feedback/Empty.tsx
@@ -82,11 +82,11 @@ var Empty = /*#__PURE__*/ _component((_props, _ctx) => {
 				...s.icon,
 				icon: icon.value ?? Inbox
 			}, propsIcon.value), null),
-			hasContent(title.value) && createVNode(Text$1, mergeProps(mergePartProps(s.title, propsTitle.value), { "key": "__site0" }), {
+			hasContent(title.value) && createVNode(Text$1, mergeJsxProps(mergePartProps(s.title, propsTitle.value), { "key": "__site0" }), {
 				default: () => [unref(title)],
 				$stable: true
 			}),
-			hasContent(description.value) && createVNode(Paragraph, mergeProps(mergePartProps(s.description, propsDescription.value), { "key": "__site1" }), {
+			hasContent(description.value) && createVNode(Paragraph, mergeJsxProps(mergePartProps(s.description, propsDescription.value), { "key": "__site1" }), {
 				default: () => [unref(description)],
 				$stable: true
 			}),

package/dist/feedback/Empty.js.map

@@ -1 +1 @@
-{"version":3,"file":"Empty.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","Text","_mergeProps","_vue_unref"],"sources":["../../src/feedback/Empty.tsx"],"sourcesContent":["/**\n * 空状态：列表、表格、搜索结果、下拉选项没有内容时的说明。图标 + 标题 + 说明 + 操作，居中排列。\n *\n *   <Empty title=\"还没有订单\" description=\"下单后会显示在这里。\" action={<Button>去逛逛</Button>} />\n *   <Empty icon={SearchX} title=\"没有找到“{keyword}”\" size=\"sm\" />\n *\n * 只是展示，不带角色；搜索后才出现的空结果，由所在的列表或区域决定要不要用 aria-live 播报。\n * 部件：Root（div）、Icon、Title（Text）、Description（Paragraph）、Action（div）。\n */\nimport { Inbox } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Paragraph, Text, type TextProps } from '../base/Text';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** Empty 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface EmptyOptions {\n  /** 字号档位，内部尺寸随之缩放；放在下拉框、小卡片里用 sm。不写时继承上下文字号 */\n  size?: TextSize;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface EmptyProps extends PartProps<'div', 'title'>, EmptyOptions {\n  /** 图标，默认 Lucide 的 Inbox；false 不显示 */\n  icon?: IconData | false;\n  /** 标题 */\n  title?: VNodeChild;\n  /** 说明 */\n  description?: VNodeChild;\n  /** 操作（如“新建”按钮） */\n  action?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 标题的部件属性 */\n  propsTitle?: Partial<TextProps>;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 标题与说明之外的内容 */\n  children?: VNodeChild;\n}\n\n/** 空状态的配方：各部件的布局与颜色；字号档位用共用的 fontSizeStyles 另外叠加 */\nexport const emptyRecipe = css.recipe({\n  name: 'Empty',\n  parts: ['root', 'icon', 'title', 'description', 'action'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      gap: '_sm',\n      paddingBlock: '_xl',\n      paddingInline: '_lg',\n      textAlign: 'center',\n      color: '_text',\n    },\n    icon: { width: '2.5em', height: '2.5em', color: '_textMuted', strokeWidth: '_sm' },\n    title: { fontWeight: '_semibold' },\n    description: { maxWidth: '32em', color: '_textMuted' },\n    action: { marginBlockStart: '_sm' },\n  },\n});\n\n/** 空状态的部件（createUi / Provider 的 styles.Empty 按它定制） */\nexport type EmptyPart = (typeof emptyRecipe.parts)[number];\n\n/** 空状态：图标、标题、说明、操作，居中排列 */\nexport const Empty = _component(\n  ({\n    icon,\n    title,\n    description,\n    action,\n    size,\n    propsIcon,\n    propsTitle,\n    propsDescription,\n    propsAction,\n    children,\n    ...rest\n  }: EmptyProps) => {\n    const appearance = useDefaults('Empty', () => ({ size }));\n    const recipe = useRecipe(emptyRecipe);\n    return () => {\n      const textSize = appearance().size;\n      const s = recipe();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.root, sx: [s.root.sx, textSize && fontSizeStyles[textSize]] },\n            rest,\n          )}\n        >\n          {icon !== false && (\n            <Icon {...mergePartProps<IconProps>({ ...s.icon, icon: icon ?? Inbox }, propsIcon)} />\n          )}\n          {hasContent(title) && (\n            <Text {...mergePartProps<TextProps>(s.title, propsTitle)}>{title}</Text>\n          )}\n          {hasContent(description) && (\n            <Paragraph {...mergePartProps<TextProps>(s.description, propsDescription)}>\n              {description}\n            </Paragraph>\n          )}\n          {children}\n          {hasContent(action) && <div {...mergeAttrs<'div'>(s.action, propsAction)}>{action}</div>}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;CACN,OAAO;EAAC;EAAQ;EAAQ;EAAS;EAAe;CAAQ;CACxD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,YAAY;GACZ,KAAK;GACL,cAAc;GACd,eAAe;GACf,WAAW;GACX,OAAO;EACT;EACA,MAAM;GAAE,OAAO;GAAS,QAAQ;GAAS,OAAO;GAAc,aAAa;EAAM;EACjF,OAAO,EAAE,YAAY,YAAY;EACjC,aAAa;GAAE,UAAU;GAAQ,OAAO;EAAa;EACrD,QAAQ,EAAE,kBAAkB,MAAM;CACpC;AACF,CAAC;;;AAMD,IAAa,QAAQ,0BACnB,QAAA,SAYkB;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,mBAAAA,aAAA,QAAA,kBAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MADb,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,aAAa,YAAY,gBAAgB,EAAE,MAAI,KAAA,MAAC,EAAE;CACxD,MAAM,SAAS,UAAU,WAAW;CACpC,aAAa;EACX,MAAM,WAAW,WAAW,CAAC,CAAC;EAC9B,MAAM,IAAI,OAAO;EACjB,OAAAC,YAAA,OAEQ,WACF;GAAE,GAAG,EAAE;GAAM,IAAI,CAAC,EAAE,KAAK,IAAI,YAAY,eAAe,SAAS;EAAE,GACnE,IACF,GAAC;GAEA,KAAA,UAAS,SAAKA,YAAA,MACH,eAA0B;IAAE,GAAG,EAAE;IAAM,MAAM,KAAA,SAAQ;GAAM,GAAC,UAAA,KAAW,GAAC,IAAA;GAEnF,WAAU,MAAA,KAAM,KAACA,YAAAC,QAAAC,WACN,eAA0B,EAAE,OAAK,WAAA,KAAY,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAAAC,MAAA,KAAA,CAAA;IAAA,SAAA;GAAA,CAAA;GAEzD,WAAU,YAAA,KAAY,KAACH,YAAA,WAAAE,WACP,eAA0B,EAAE,aAAW,iBAAA,KAAkB,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAAAC,MAAA,WAAA,CAAA;IAAA,SAAA;GAAA,CAAA;GAG1E,SAAA;GAEA,WAAU,OAAA,KAAO,KAACH,YAAA,OAAa,WAAkB,EAAE,QAAM,YAAA,KAAa,GAAC,CAAA,OAAA,KAAA,CAAA;EAAgB,CAAA;CAG9F;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"Empty.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","Text","_mergeProps","_vue_unref"],"sources":["../../src/feedback/Empty.tsx"],"sourcesContent":["/**\n * 空状态：列表、表格、搜索结果、下拉选项没有内容时的说明。图标 + 标题 + 说明 + 操作，居中排列。\n *\n *   <Empty title=\"还没有订单\" description=\"下单后会显示在这里。\" action={<Button>去逛逛</Button>} />\n *   <Empty icon={SearchX} title=\"没有找到“{keyword}”\" size=\"sm\" />\n *\n * 只是展示，不带角色；搜索后才出现的空结果，由所在的列表或区域决定要不要用 aria-live 播报。\n * 部件：Root（div）、Icon、Title（Text）、Description（Paragraph）、Action（div）。\n */\nimport { Inbox } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Paragraph, Text, type TextProps } from '../base/Text';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** Empty 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface EmptyOptions {\n  /** 字号档位，内部尺寸随之缩放；放在下拉框、小卡片里用 sm。不写时继承上下文字号 */\n  size?: TextSize;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface EmptyProps extends PartProps<'div', 'title'>, EmptyOptions {\n  /** 图标，默认 Lucide 的 Inbox；false 不显示 */\n  icon?: IconData | false;\n  /** 标题 */\n  title?: VNodeChild;\n  /** 说明 */\n  description?: VNodeChild;\n  /** 操作（如“新建”按钮） */\n  action?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 标题的部件属性 */\n  propsTitle?: Partial<TextProps>;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 标题与说明之外的内容 */\n  children?: VNodeChild;\n}\n\n/** 空状态的配方：各部件的布局与颜色；字号档位用共用的 fontSizeStyles 另外叠加 */\nexport const emptyRecipe = css.recipe({\n  name: 'Empty',\n  parts: ['root', 'icon', 'title', 'description', 'action'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      gap: '_sm',\n      paddingBlock: '_xl',\n      paddingInline: '_lg',\n      textAlign: 'center',\n      color: '_text',\n    },\n    icon: { width: '2.5em', height: '2.5em', color: '_textMuted', strokeWidth: '_sm' },\n    title: { fontWeight: '_semibold' },\n    description: { maxWidth: '32em', color: '_textMuted' },\n    action: { marginBlockStart: '_sm' },\n  },\n});\n\n/** 空状态的部件（createUi / Provider 的 styles.Empty 按它定制） */\nexport type EmptyPart = (typeof emptyRecipe.parts)[number];\n\n/** 空状态：图标、标题、说明、操作，居中排列 */\nexport const Empty = _component(\n  ({\n    icon,\n    title,\n    description,\n    action,\n    size,\n    propsIcon,\n    propsTitle,\n    propsDescription,\n    propsAction,\n    children,\n    ...rest\n  }: EmptyProps) => {\n    const appearance = useDefaults('Empty', () => ({ size }));\n    const recipe = useRecipe(emptyRecipe);\n    return () => {\n      const textSize = appearance().size;\n      const s = recipe();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.root, sx: [s.root.sx, textSize && fontSizeStyles[textSize]] },\n            rest,\n          )}\n        >\n          {icon !== false && (\n            <Icon {...mergePartProps<IconProps>({ ...s.icon, icon: icon ?? Inbox }, propsIcon)} />\n          )}\n          {hasContent(title) && (\n            <Text {...mergePartProps<TextProps>(s.title, propsTitle)}>{title}</Text>\n          )}\n          {hasContent(description) && (\n            <Paragraph {...mergePartProps<TextProps>(s.description, propsDescription)}>\n              {description}\n            </Paragraph>\n          )}\n          {children}\n          {hasContent(action) && <div {...mergeAttrs<'div'>(s.action, propsAction)}>{action}</div>}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;CACN,OAAO;EAAC;EAAQ;EAAQ;EAAS;EAAe;CAAQ;CACxD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,YAAY;GACZ,KAAK;GACL,cAAc;GACd,eAAe;GACf,WAAW;GACX,OAAO;EACT;EACA,MAAM;GAAE,OAAO;GAAS,QAAQ;GAAS,OAAO;GAAc,aAAa;EAAM;EACjF,OAAO,EAAE,YAAY,YAAY;EACjC,aAAa;GAAE,UAAU;GAAQ,OAAO;EAAa;EACrD,QAAQ,EAAE,kBAAkB,MAAM;CACpC;AACF,CAAC;;;AAMD,IAAa,QAAQ,0BACnB,QAAA,SAYkB;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,mBAAAA,aAAA,QAAA,kBAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MADb,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,aAAa,YAAY,gBAAgB,EAAE,MAAI,KAAA,MAAC,EAAE;CACxD,MAAM,SAAS,UAAU,WAAW;CACpC,aAAa;EACX,MAAM,WAAW,WAAW,CAAC,CAAC;EAC9B,MAAM,IAAI,OAAO;EACjB,OAAAC,YAAA,OAEQ,WACF;GAAE,GAAG,EAAE;GAAM,IAAI,CAAC,EAAE,KAAK,IAAI,YAAY,eAAe,SAAS;EAAE,GACnE,IACF,GAAC;GAEA,KAAA,UAAS,SAAKA,YAAA,MACH,eAA0B;IAAE,GAAG,EAAE;IAAM,MAAM,KAAA,SAAQ;GAAM,GAAC,UAAA,KAAW,GAAC,IAAA;GAEnF,WAAU,MAAA,KAAM,KAACA,YAAAC,QAAAC,cACN,eAA0B,EAAE,OAAK,WAAA,KAAY,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAAAC,MAAA,KAAA,CAAA;IAAA,SAAA;GAAA,CAAA;GAEzD,WAAU,YAAA,KAAY,KAACH,YAAA,WAAAE,cACP,eAA0B,EAAE,aAAW,iBAAA,KAAkB,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAAAC,MAAA,WAAA,CAAA;IAAA,SAAA;GAAA,CAAA;GAG1E,SAAA;GAEA,WAAU,OAAA,KAAO,KAACH,YAAA,OAAa,WAAkB,EAAE,QAAM,YAAA,KAAa,GAAC,CAAA,OAAA,KAAA,CAAA;EAAgB,CAAA;CAG9F;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/feedback/LoadingBar.js

@@ -1,8 +1,9 @@
 import { t } from "../config/theme/tokens.js";
 import { useLang } from "../config/context.js";
 import { mergeAttrs } from "../utils/props.js";
-import { createVNode, mergeProps, shallowReactive } from "vue";
-import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { useMounted } from "../utils/dom/mounted.js";
+import { createVNode, shallowReactive } from "vue";
+import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/feedback/LoadingBar.tsx
 /** 加载条的状态 */
@@ -103,17 +104,23 @@ var LoadingBar = /*#__PURE__*/ _component((_props, _ctx) => {
 	const controller = readonlyProp(_props, "controller");
 	const rest = restProps(_props, _ctx, true);
 	const lang = useLang();
-	return () => createVNode("div", mergeProps(mergeAttrs({
-		sx: [loadingBarStyles.root, controller.value.visible && loadingBarStyles.visible],
-		"aria-label": lang.loading
-	}, rest, {
-		role: "progressbar",
-		"aria-valuemin": 0,
-		"aria-valuemax": 100,
-		"aria-valuenow": Math.round(controller.value.progress),
-		"aria-busy": controller.value.visible && controller.value.progress < 100,
-		"aria-hidden": controller.value.visible ? void 0 : true
-	}), { "data-state": controller.value.failed ? "error" : controller.value.visible ? "loading" : "idle" }), [createVNode("div", css.attrs(loadingBarStyles.bar, controller.value.failed && loadingBarStyles.failed, css.bind(loadingBarScaleStyles.at, () => [controller.value.progress], true)), null)]);
+	const mounted = useMounted();
+	return () => {
+		const visible = mounted.value && controller.value.visible;
+		const progress = mounted.value ? controller.value.progress : 0;
+		const failed = mounted.value && controller.value.failed;
+		return createVNode("div", mergeJsxProps(mergeAttrs({
+			sx: [loadingBarStyles.root, visible && loadingBarStyles.visible],
+			"aria-label": lang.loading
+		}, rest, {
+			role: "progressbar",
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": Math.round(progress),
+			"aria-busy": visible && progress < 100,
+			"aria-hidden": visible ? void 0 : true
+		}), { "data-state": failed ? "error" : visible ? "loading" : "idle" }), [createVNode("div", css.attrs(loadingBarStyles.bar, failed && loadingBarStyles.failed, css.bind(loadingBarScaleStyles.at, () => [progress])), null)]);
+	};
 }, {
 	name: "LoadingBar",
 	props: ["controller"]

package/dist/feedback/LoadingBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingBar.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/LoadingBar.tsx"],"sourcesContent":["/**\n * 页面顶部的加载条：路由切换、整页刷新数据时，窗口最上方一条细线从左往右走（同 NProgress、GitHub 的顶部进度）。\n * 控制器 + 显示（同 Toast），组件内外都能用：\n *\n *   export const loadingBar = createLoadingBar();       // 应用里创建一次\n *   <LoadingBar controller={loadingBar} />               // App 里放一个\n *   loadingBar.start(); await load(); loadingBar.finish();   // 或 useRouteLoadingBar(router, loadingBar)\n *\n * 不知道真实进度：start 后先快后慢地涨，停在 90% 前等 finish；finish 走满后淡出，error 变成危险色走满后淡出。\n * 很快完成的（200ms 内）不显示，免得每次切换都闪一下。加载条只是视觉提示：对读屏是 role=\"progressbar\"\n * 加 aria-busy，真正的“加载中”应当由页面内容区域（aria-busy、骨架）告诉读屏。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { shallowReactive } from 'vue';\nimport { useLang } from '../config/context';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 加载条的状态 */\nexport interface LoadingBarState {\n  /** 进度，0–100 */\n  readonly progress: number;\n  /** 是否显示（开始一会儿之后、结束淡出之前） */\n  readonly visible: boolean;\n  /** 出错了：危险色 */\n  readonly failed: boolean;\n}\n\n/** 加载条的控制器 */\nexport interface LoadingBarController extends LoadingBarState {\n  /** 开始（已经在走时重新开始计时） */\n  start(): void;\n  /** 完成：走满后淡出 */\n  finish(): void;\n  /** 出错：变成危险色、走满后淡出 */\n  error(): void;\n}\n\n/** createLoadingBar 的选项 */\nexport interface LoadingBarOptions {\n  /** 多久之后才显示（毫秒），默认 200：很快完成的不显示 */\n  delay?: number;\n}\n\n/** 每次涨多少：离 90% 越近涨得越慢 */\nconst trickle = (progress: number) => (90 - progress) * 0.12 + 0.5;\n\n/** 创建加载条的控制器 */\nexport function createLoadingBar({ delay = 200 }: LoadingBarOptions = {}): LoadingBarController {\n  const state = shallowReactive({ progress: 0, visible: false, failed: false });\n  let timer: ReturnType<typeof setInterval> | undefined;\n  let showTimer: ReturnType<typeof setTimeout> | undefined;\n  let hideTimer: ReturnType<typeof setTimeout> | undefined;\n\n  function stop() {\n    clearInterval(timer);\n    clearTimeout(showTimer);\n    clearTimeout(hideTimer);\n  }\n\n  function end(failed: boolean) {\n    stop();\n    if (!state.visible) {\n      state.progress = 0;\n      return;\n    }\n    state.failed = failed;\n    state.progress = 100;\n    // 走满的过渡结束后淡出，淡出后归零\n    hideTimer = setTimeout(() => {\n      state.visible = false;\n      hideTimer = setTimeout(() => (state.progress = 0), 300);\n    }, 300);\n  }\n\n  return {\n    get progress() {\n      return state.progress;\n    },\n    get visible() {\n      return state.visible;\n    },\n    get failed() {\n      return state.failed;\n    },\n    start() {\n      stop();\n      state.failed = false;\n      state.progress = state.visible ? state.progress : 0;\n      showTimer = setTimeout(() => {\n        state.visible = true;\n        state.progress = Math.max(state.progress, 8);\n      }, delay);\n      timer = setInterval(() => {\n        if (state.visible) state.progress = Math.min(state.progress + trickle(state.progress), 90);\n      }, 300);\n    },\n    finish: () => end(false),\n    error: () => end(true),\n  };\n}\n\n/** 未声明的属性落到加载条的 div 上 */\nexport interface LoadingBarProps extends PartProps<'div', 'role'> {\n  /** createLoadingBar 的控制器 */\n  controller: LoadingBarController;\n}\n\n/** LoadingBar 的样式：root、visible、bar、failed */\nexport const loadingBarStyles = css.create({\n  root: {\n    position: 'fixed',\n    insetInline: 0,\n    insetBlockStart: 0,\n    zIndex: 2000,\n    height: '_borderWidths.md',\n    pointerEvents: 'none',\n    opacity: 0,\n    transition: `opacity ${t.durations.md} ${t.easings.standard}`,\n  },\n  visible: { opacity: 1 },\n  bar: {\n    height: '100%',\n    backgroundColor: { default: '_accent', _forcedColors: 'Highlight' },\n    boxShadow: `0 0 8px ${t.colors.accent}`,\n    transformOrigin: { default: 'left center', ':dir(rtl)': 'right center' },\n    transition: `transform ${t.durations.md} ${t.easings.standard}`,\n  },\n  failed: { backgroundColor: '_danger', boxShadow: 'none' },\n});\n\n/** 进度对应的缩放 */\nexport const loadingBarScaleStyles = css.create({\n  at: (progress: number) => ({ transform: `scaleX(${progress / 100})` }),\n});\n\n/** 加载条：显示控制器的进度 */\nexport const LoadingBar = _component(({ controller, ...rest }: LoadingBarProps) => {\n  const lang = useLang();\n  return () => (\n    <div\n      {...mergeAttrs<'div'>(\n        {\n          sx: [loadingBarStyles.root, controller.visible && loadingBarStyles.visible],\n          'aria-label': lang.loading,\n        },\n        rest,\n        {\n          role: 'progressbar',\n          'aria-valuemin': 0,\n          'aria-valuemax': 100,\n          'aria-valuenow': Math.round(controller.progress),\n          'aria-busy': controller.visible && controller.progress < 100,\n          'aria-hidden': controller.visible ? undefined : true,\n        },\n      )}\n      data-state={controller.failed ? 'error' : controller.visible ? 'loading' : 'idle'}\n    >\n      <div\n        {...css.attrs(\n          loadingBarStyles.bar,\n          controller.failed && loadingBarStyles.failed,\n          loadingBarScaleStyles.at(controller.progress),\n        )}\n      />\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"LoadingBar.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/LoadingBar.tsx"],"sourcesContent":["/**\n * 页面顶部的加载条：路由切换、整页刷新数据时，窗口最上方一条细线从左往右走（同 NProgress、GitHub 的顶部进度）。\n * 控制器 + 显示（同 Toast），组件内外都能用：\n *\n *   export const loadingBar = createLoadingBar();       // 应用里创建一次\n *   <LoadingBar controller={loadingBar} />               // App 里放一个\n *   loadingBar.start(); await load(); loadingBar.finish();   // 或 useRouteLoadingBar(router, loadingBar)\n *\n * 不知道真实进度：start 后先快后慢地涨，停在 90% 前等 finish；finish 走满后淡出，error 变成危险色走满后淡出。\n * 很快完成的（200ms 内）不显示，免得每次切换都闪一下。加载条只是视觉提示：对读屏是 role=\"progressbar\"\n * 加 aria-busy，真正的“加载中”应当由页面内容区域（aria-busy、骨架）告诉读屏。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { shallowReactive } from 'vue';\nimport { useLang } from '../config/context';\nimport { useMounted } from '../utils/dom/mounted';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 加载条的状态 */\nexport interface LoadingBarState {\n  /** 进度，0–100 */\n  readonly progress: number;\n  /** 是否显示（开始一会儿之后、结束淡出之前） */\n  readonly visible: boolean;\n  /** 出错了：危险色 */\n  readonly failed: boolean;\n}\n\n/** 加载条的控制器 */\nexport interface LoadingBarController extends LoadingBarState {\n  /** 开始（已经在走时重新开始计时） */\n  start(): void;\n  /** 完成：走满后淡出 */\n  finish(): void;\n  /** 出错：变成危险色、走满后淡出 */\n  error(): void;\n}\n\n/** createLoadingBar 的选项 */\nexport interface LoadingBarOptions {\n  /** 多久之后才显示（毫秒），默认 200：很快完成的不显示 */\n  delay?: number;\n}\n\n/** 每次涨多少：离 90% 越近涨得越慢 */\nconst trickle = (progress: number) => (90 - progress) * 0.12 + 0.5;\n\n/** 创建加载条的控制器 */\nexport function createLoadingBar({ delay = 200 }: LoadingBarOptions = {}): LoadingBarController {\n  const state = shallowReactive({ progress: 0, visible: false, failed: false });\n  let timer: ReturnType<typeof setInterval> | undefined;\n  let showTimer: ReturnType<typeof setTimeout> | undefined;\n  let hideTimer: ReturnType<typeof setTimeout> | undefined;\n\n  function stop() {\n    clearInterval(timer);\n    clearTimeout(showTimer);\n    clearTimeout(hideTimer);\n  }\n\n  function end(failed: boolean) {\n    stop();\n    if (!state.visible) {\n      state.progress = 0;\n      return;\n    }\n    state.failed = failed;\n    state.progress = 100;\n    // 走满的过渡结束后淡出，淡出后归零\n    hideTimer = setTimeout(() => {\n      state.visible = false;\n      hideTimer = setTimeout(() => (state.progress = 0), 300);\n    }, 300);\n  }\n\n  return {\n    get progress() {\n      return state.progress;\n    },\n    get visible() {\n      return state.visible;\n    },\n    get failed() {\n      return state.failed;\n    },\n    start() {\n      stop();\n      state.failed = false;\n      state.progress = state.visible ? state.progress : 0;\n      showTimer = setTimeout(() => {\n        state.visible = true;\n        state.progress = Math.max(state.progress, 8);\n      }, delay);\n      timer = setInterval(() => {\n        if (state.visible) state.progress = Math.min(state.progress + trickle(state.progress), 90);\n      }, 300);\n    },\n    finish: () => end(false),\n    error: () => end(true),\n  };\n}\n\n/** 未声明的属性落到加载条的 div 上 */\nexport interface LoadingBarProps extends PartProps<'div', 'role'> {\n  /** createLoadingBar 的控制器 */\n  controller: LoadingBarController;\n}\n\n/** LoadingBar 的样式：root、visible、bar、failed */\nexport const loadingBarStyles = css.create({\n  root: {\n    position: 'fixed',\n    insetInline: 0,\n    insetBlockStart: 0,\n    zIndex: 2000,\n    height: '_borderWidths.md',\n    pointerEvents: 'none',\n    opacity: 0,\n    transition: `opacity ${t.durations.md} ${t.easings.standard}`,\n  },\n  visible: { opacity: 1 },\n  bar: {\n    height: '100%',\n    backgroundColor: { default: '_accent', _forcedColors: 'Highlight' },\n    boxShadow: `0 0 8px ${t.colors.accent}`,\n    transformOrigin: { default: 'left center', ':dir(rtl)': 'right center' },\n    transition: `transform ${t.durations.md} ${t.easings.standard}`,\n  },\n  failed: { backgroundColor: '_danger', boxShadow: 'none' },\n});\n\n/** 进度对应的缩放 */\nexport const loadingBarScaleStyles = css.create({\n  at: (progress: number) => ({ transform: `scaleX(${progress / 100})` }),\n});\n\n/** 加载条：显示控制器的进度 */\nexport const LoadingBar = _component(({ controller, ...rest }: LoadingBarProps) => {\n  const lang = useLang();\n  // 控制器是整个应用共用的：服务端渲染时它没在加载，浏览器里水合时可能正在加载第一页。挂载前按没在加载渲染，两边一致\n  const mounted = useMounted();\n  return () => {\n    const visible = mounted.value && controller.visible;\n    const progress = mounted.value ? controller.progress : 0;\n    const failed = mounted.value && controller.failed;\n    return (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [loadingBarStyles.root, visible && loadingBarStyles.visible],\n            'aria-label': lang.loading,\n          },\n          rest,\n          {\n            role: 'progressbar',\n            'aria-valuemin': 0,\n            'aria-valuemax': 100,\n            'aria-valuenow': Math.round(progress),\n            'aria-busy': visible && progress < 100,\n            'aria-hidden': visible ? undefined : true,\n          },\n        )}\n        data-state={failed ? 'error' : visible ? 'loading' : 'idle'}\n      >\n        <div\n          {...css.attrs(\n            loadingBarStyles.bar,\n            failed && loadingBarStyles.failed,\n            loadingBarScaleStyles.at(progress),\n          )}\n        />\n      </div>\n    );\n  };\n});\n"],"mappings":"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"}

package/dist/feedback/LoadingOverlay.js

@@ -5,8 +5,8 @@ import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
 import { Spinner } from "../base/Spinner.js";
 import { presenceStyles } from "../utils/style/transitions.js";
 import { usePresence } from "../utils/motion/presence.js";
-import { createVNode, mergeProps } from "vue";
-import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/feedback/LoadingOverlay.tsx
 /** 忙碌由组件按 loading 管理 */
@@ -46,7 +46,7 @@ var LoadingOverlay = /*#__PURE__*/ _component((_props, _ctx) => {
 	const lang = useLang();
 	const shown = useDelayedLoading(() => loading.value);
 	const presence = usePresence(() => shown.value);
-	return () => createVNode("div", mergeAttrs({ sx: loadingOverlayStyles.root }, rest, { "aria-busy": loading.value || void 0 }), [children.value, presence.mounted && createVNode("div", mergeProps(mergeAttrs({ sx: [
+	return () => createVNode("div", mergeAttrs({ sx: loadingOverlayStyles.root }, rest, { "aria-busy": loading.value || void 0 }), [children.value, presence.mounted && createVNode("div", mergeJsxProps(mergeAttrs({ sx: [
 		loadingOverlayStyles.overlay,
 		blur.value && loadingOverlayStyles.blur,
 		presence.state === "closed" && presenceStyles.leaving