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

package/dist/base/CodeBlock.d.ts

@@ -0,0 +1,89 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type ScrollAreaProps } from '../layout/ScrollArea';
+import { type ButtonBaseProps } from './ButtonBase';
+import { type CopyButtonProps } from './CopyButton';
+import { type IconProps } from './Icon';
+/** 行号的写法：`'1,3-5'` 或 `[1, 3, 4, 5]`（从 1 开始） */
+export type LineSpec = string | readonly number[];
+/** 未声明的属性落到 pre 上；原生的 title 属性（悬停提示）让给标题栏 */
+export interface CodeBlockProps extends PartProps<'pre', 'title'> {
+    /** 代码文本 */
+    code: string;
+    /** 语言（如 ts、vue、bash），交给高亮器；不写时不高亮，高亮器不认识的语言也按纯文本显示 */
+    lang?: string;
+    /**
+     * 高亮：false 时先按纯文本显示，改成 true 时才交给高亮器。看不见的代码（收起的示例源码）可以等要显示时再高亮，
+     * 页面打开时不必一次高亮全部
+     * @default true
+     */
+    highlight?: boolean;
+    /** 标题栏：通常是文件名；有标题时复制按钮放在标题栏里 */
+    title?: VNodeChild;
+    /** 长行自动换行，而不是横向滚动 */
+    wrap?: boolean;
+    /** 显示复制按钮，默认 true */
+    copyable?: boolean;
+    /** 显示行号 */
+    lineNumbers?: boolean;
+    /** 强调的行：`'2,4-5'` */
+    highlightLines?: LineSpec;
+    /** 新增的行（diff）：绿色底 */
+    addedLines?: LineSpec;
+    /** 删除的行（diff）：红色底 */
+    removedLines?: LineSpec;
+    /** 超过这么多行时折叠，底部的按钮展开；不写时不折叠 */
+    maxLines?: number;
+    /** 内层 code 元素的部件属性 */
+    propsCode?: PartProps<'code'>;
+    /** 外层（包着标题栏、pre 与复制按钮的 div）的部件属性 */
+    propsRoot?: PartProps<'div'>;
+    /** 标题栏的部件属性 */
+    propsHeader?: PartProps<'div'>;
+    /** 标题栏里标题文字的部件属性 */
+    propsTitle?: PartProps<'span'>;
+    /** 代码区（包着滚动区域与右上角复制按钮的 div）的部件属性 */
+    propsBody?: PartProps<'div'>;
+    /** 按行渲染时每一行的部件属性 */
+    propsLine?: PartProps<'span'>;
+    /** 每行行号的部件属性 */
+    propsLineNumber?: PartProps<'span', 'aria-hidden'>;
+    /** 复制按钮的部件属性 */
+    propsCopy?: Partial<CopyButtonProps>;
+    /** 横向滚动区域（ScrollArea）的部件属性 */
+    propsScroll?: Partial<ScrollAreaProps>;
+    /** 展开、收起长代码的按钮的部件属性 */
+    propsExpand?: Partial<ButtonBaseProps>;
+    /** 展开按钮里箭头图标的部件属性；展开后的翻转由组件管理 */
+    propsExpandIcon?: Partial<IconProps>;
+}
+/** `'1,3-5'` → Set{1, 3, 4, 5}；数组原样收进集合 */
+export declare function parseLineSpec(spec: LineSpec | undefined): Set<number>;
+/** CodeBlock 的样式 */
+export declare const codeBlockStyles: Readonly<{
+    added: css.CompiledStyles;
+    body: css.CompiledStyles;
+    code: css.CompiledStyles;
+    collapsed: css.CompiledStyles;
+    copy: css.CompiledStyles;
+    expand: css.CompiledStyles;
+    expandOpen: css.CompiledStyles;
+    header: css.CompiledStyles;
+    highlighted: css.CompiledStyles;
+    line: css.CompiledStyles;
+    lineNumber: css.CompiledStyles;
+    lines: css.CompiledStyles;
+    removed: css.CompiledStyles;
+    root: css.CompiledStyles;
+    title: css.CompiledStyles;
+    withCopy: css.CompiledStyles;
+    wrap: css.CompiledStyles;
+    wrapper: css.CompiledStyles;
+}>;
+/** CodeBlock 的动态样式：折叠后的最大高度 */
+export declare const codeBlockDynamicStyles: Readonly<{
+    readonly maxLines: (lines: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 代码块：高亮、复制、标题栏、行号、行高亮、diff、长代码折叠 */
+export declare const CodeBlock: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CodeBlockProps>;

package/dist/base/CodeBlock.js

@@ -0,0 +1,265 @@
+import { t } from "../config/theme/tokens.js";
+import { useConfig, useLang } from "../config/context.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "./Icon.js";
+import { disclosureStyles } from "../utils/style/transitions.js";
+import { ButtonBase } from "./ButtonBase.js";
+import { ScrollArea } from "../layout/ScrollArea.js";
+import { CopyButton } from "./CopyButton.js";
+import { computed, createVNode, mergeProps, ref, shallowRef } from "vue";
+import { _component, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronDown } from "@lucide/icons";
+//#region src/base/CodeBlock.tsx
+/**
+* 代码块（pre > code）。高亮器经配置注入（createUi / Provider 的 highlighter，见 config/context.ts），
+* 本组件不依赖 Shiki：没有高亮器、或没给语言时显示纯文本。
+*
+*   <CodeBlock code={source} lang="ts" />
+*   <CodeBlock code={source} lang="ts" title="main.ts" lineNumbers highlightLines="2,4-5" maxLines={20} />
+*
+* - 高亮是异步的：先显示纯文本，结果到了再替换；等宽字体下两者排版相同，布局不跳动。
+* - 长行在 ScrollArea 里横向滚动：浮层滚动条不占高度；滚动区域可聚焦（带焦点环），键盘也能滚动。
+* - 复制按钮（CopyButton）在右上角，有标题时放在标题栏里；复制成功后经 aria-live 播报“已复制”。
+* - 行号、行高亮、新增与删除的行：按行渲染（高亮结果按 <br> 拆行；代码里的 < 都已转义，拆分是安全的）；
+*   都不用时整段写进 innerHTML，不为每行建节点。行号不可选中，复制的是 code 本身。
+* - 长代码：maxLines 之外折叠，底部的按钮展开或收起。
+*/
+/** 行号的写法：`'1,3-5'` 或 `[1, 3, 4, 5]`（从 1 开始） */
+/** 未声明的属性落到 pre 上；原生的 title 属性（悬停提示）让给标题栏 */
+/** `'1,3-5'` → Set{1, 3, 4, 5}；数组原样收进集合 */
+function parseLineSpec(spec) {
+	if (spec == null) return /* @__PURE__ */ new Set();
+	if (typeof spec !== "string") return new Set(spec);
+	const lines = /* @__PURE__ */ new Set();
+	for (const part of spec.split(",")) {
+		const [from, to = from] = part.split("-").map((text) => Number(text.trim()));
+		if (!Number.isInteger(from) || !Number.isInteger(to)) continue;
+		for (let line = from; line <= to; line++) lines.add(line);
+	}
+	return lines;
+}
+/** CodeBlock 的样式 */
+var codeBlockStyles = css.create({
+	wrapper: {
+		minWidth: 0,
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_borderMuted",
+		borderRadius: "_md",
+		backgroundColor: "_surface",
+		overflow: "hidden"
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,
+		paddingInlineStart: "_lg",
+		paddingInlineEnd: "_xs",
+		borderBottomWidth: "_xs",
+		borderBottomStyle: "solid",
+		borderBottomColor: "_borderMuted",
+		backgroundColor: "_surfaceMuted",
+		color: "_textMuted",
+		fontFamily: "_mono",
+		fontSize: "0.85em"
+	},
+	title: {
+		flexGrow: 1,
+		minWidth: 0,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	body: { position: "relative" },
+	withCopy: { paddingInlineEnd: `calc(${t.space.md} + max(${t.sizes.control}, ${t.sizes.minTarget}))` },
+	copy: {
+		position: "absolute",
+		top: "_space.xs",
+		insetInlineEnd: "_space.xs"
+	},
+	root: {
+		boxSizing: "border-box",
+		margin: 0,
+		paddingBlock: "_md",
+		paddingInline: "_lg",
+		color: "_text",
+		fontFamily: "_mono",
+		direction: "ltr",
+		fontVariantLigatures: "none",
+		fontSize: "0.9em",
+		lineHeight: "_normal",
+		tabSize: 2
+	},
+	collapsed: { overflowY: "hidden" },
+	wrap: {
+		whiteSpace: "pre-wrap",
+		overflowWrap: "anywhere"
+	},
+	code: {
+		fontFamily: "inherit",
+		fontSize: "inherit"
+	},
+	lines: {
+		display: "inline-block",
+		minWidth: "100%"
+	},
+	line: {
+		display: "block",
+		minHeight: "1lh",
+		marginInline: `calc(-1 * ${t.space.lg})`,
+		paddingInline: "_lg"
+	},
+	highlighted: { backgroundColor: "_fill" },
+	added: { backgroundColor: "_codeInserted" },
+	removed: { backgroundColor: "_codeDeleted" },
+	lineNumber: {
+		display: "inline-block",
+		minWidth: "2ch",
+		marginInlineEnd: "_lg",
+		color: "_codeComment",
+		textAlign: "end",
+		userSelect: "none"
+	},
+	expand: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "_xs",
+		width: "_full",
+		minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,
+		borderTopWidth: "_xs",
+		borderTopStyle: "solid",
+		borderTopColor: "_borderMuted",
+		backgroundColor: {
+			default: "_surfaceMuted",
+			":hover": "_fill"
+		},
+		color: "_textMuted",
+		fontSize: "_sm"
+	},
+	expandOpen: { rotate: "180deg" }
+});
+/** 按行拆开；结尾的换行不算新的一行（文件末尾通常有一个），不然行号会多出一行空的 */
+function splitLines(text, separator) {
+	const lines = text.split(separator);
+	if (lines.length > 1 && lines.at(-1) === "") lines.pop();
+	return lines;
+}
+/** CodeBlock 的动态样式：折叠后的最大高度 */
+var codeBlockDynamicStyles = css.create({ maxLines: (lines) => ({ maxHeight: `calc(${lines} * 1lh + 2 * 0.75em)` }) });
+/** 代码块：高亮、复制、标题栏、行号、行高亮、diff、长代码折叠 */
+var CodeBlock = /*#__PURE__*/ _component((_props, _ctx) => {
+	const code = readonlyProp(_props, "code");
+	const lang = readonlyProp(_props, "lang");
+	const highlight = readonlyProp(_props, "highlight", true);
+	const title = readonlyProp(_props, "title");
+	const wrap = readonlyProp(_props, "wrap", false);
+	const copyable = readonlyProp(_props, "copyable", true);
+	const lineNumbers = readonlyProp(_props, "lineNumbers", false);
+	const highlightLines = readonlyProp(_props, "highlightLines");
+	const addedLines = readonlyProp(_props, "addedLines");
+	const removedLines = readonlyProp(_props, "removedLines");
+	const maxLines = readonlyProp(_props, "maxLines");
+	const propsCode = readonlyProp(_props, "propsCode");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsHeader = readonlyProp(_props, "propsHeader");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsBody = readonlyProp(_props, "propsBody");
+	const propsLine = readonlyProp(_props, "propsLine");
+	const propsLineNumber = readonlyProp(_props, "propsLineNumber");
+	const propsCopy = readonlyProp(_props, "propsCopy");
+	const propsScroll = readonlyProp(_props, "propsScroll");
+	const propsExpand = readonlyProp(_props, "propsExpand");
+	const propsExpandIcon = readonlyProp(_props, "propsExpandIcon");
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	const labels = useLang();
+	let html = shallowRef(null);
+	let expanded = ref(false);
+	effect(() => {
+		const highlighter = config.highlighter;
+		html.value = null;
+		if (!highlighter || !lang.value || !highlight.value) return;
+		let stale = false;
+		highlighter(code.value, lang.value).then((result) => {
+			if (!stale) html.value = result;
+		}, (error) => console.error(`CodeBlock 高亮 ${lang.value} 代码失败，显示纯文本`, error));
+		return () => stale = true;
+	});
+	const marks = computed(() => ({
+		highlighted: parseLineSpec(highlightLines.value),
+		added: parseLineSpec(addedLines.value),
+		removed: parseLineSpec(removedLines.value)
+	}));
+	const lineCount = computed(() => splitLines(code.value, "\n").length);
+	const byLine = computed(() => lineNumbers.value || marks.value.highlighted.size + marks.value.added.size + marks.value.removed.size > 0);
+	/** 按行渲染：高亮结果按 <br> 拆，纯文本按换行拆 */
+	function renderLines() {
+		return (html.value == null ? splitLines(code.value, "\n") : splitLines(html.value, "<br>")).map((line, index) => {
+			const number = index + 1;
+			return createVNode("span", mergeProps({ "key": number }, mergeAttrs({ sx: [
+				codeBlockStyles.line,
+				marks.value.highlighted.has(number) && codeBlockStyles.highlighted,
+				marks.value.added.has(number) && codeBlockStyles.added,
+				marks.value.removed.has(number) && codeBlockStyles.removed
+			] }, propsLine.value), { "data-diff": marks.value.added.has(number) ? "added" : marks.value.removed.has(number) ? "removed" : void 0 }), [lineNumbers.value && createVNode("span", mergeAttrs({ sx: codeBlockStyles.lineNumber }, propsLineNumber.value, { "aria-hidden": "true" }), [number]), html.value == null ? line : createVNode("span", { "innerHTML": line }, null)]);
+		});
+	}
+	return () => {
+		const collapsible = maxLines.value != null && lineCount.value > maxLines.value;
+		const collapsed = collapsible && !expanded.value;
+		const codeProps = mergeAttrs({ sx: [codeBlockStyles.code, byLine.value && codeBlockStyles.lines] }, propsCode.value);
+		const copyButton = (inHeader) => createVNode(CopyButton, mergePartProps({
+			sx: !inHeader && codeBlockStyles.copy,
+			size: "sm",
+			tone: "neutral",
+			value: code.value
+		}, propsCopy.value), null);
+		return createVNode("div", mergeAttrs({ sx: codeBlockStyles.wrapper }, propsRoot.value), [
+			hasContent(title.value) && createVNode("div", mergeAttrs({ sx: codeBlockStyles.header }, propsHeader.value), [createVNode("span", mergeAttrs({ sx: codeBlockStyles.title }, propsTitle.value), [title.value]), copyable.value && copyButton(true)]),
+			createVNode("div", mergeAttrs({ sx: codeBlockStyles.body }, propsBody.value), [createVNode(ScrollArea, mergeProps({ "axis": "x" }, mergePartProps({}, propsScroll.value)), { default: () => [createVNode("pre", mergeProps(mergeAttrs({ sx: [codeBlockStyles.root, copyable.value && title.value == null && codeBlockStyles.withCopy] }, rest, { sx: [wrap.value && codeBlockStyles.wrap, collapsed && [codeBlockStyles.collapsed, css.bind(codeBlockDynamicStyles.maxLines, () => [maxLines.value], true)]] }), { "data-lang": lang.value }), [byLine.value ? createVNode("code", codeProps, [renderLines()]) : html.value == null ? createVNode("code", codeProps, [code.value]) : createVNode("code", mergeProps(codeProps, { "innerHTML": html.value }), null)])] }), copyable.value && title.value == null && copyButton(false)]),
+			collapsible && createVNode(ButtonBase, mergeProps(mergePartProps({ sx: codeBlockStyles.expand }, propsExpand.value, {
+				"aria-expanded": expanded.value,
+				onClick: () => expanded.value = !expanded.value
+			}), { "key": "__site0" }), {
+				default: () => [expanded.value ? labels.codeCollapse : labels.codeExpand, createVNode(Icon, mergePartProps({
+					icon: ChevronDown,
+					sx: disclosureStyles.icon
+				}, propsExpandIcon.value, { sx: expanded.value && codeBlockStyles.expandOpen }), null)],
+				$stable: true
+			})
+		]);
+	};
+}, {
+	name: "CodeBlock",
+	props: [
+		"code",
+		"lang",
+		"highlight",
+		"title",
+		"wrap",
+		"copyable",
+		"lineNumbers",
+		"highlightLines",
+		"addedLines",
+		"removedLines",
+		"maxLines",
+		"propsCode",
+		"propsRoot",
+		"propsHeader",
+		"propsTitle",
+		"propsBody",
+		"propsLine",
+		"propsLineNumber",
+		"propsCopy",
+		"propsScroll",
+		"propsExpand",
+		"propsExpandIcon"
+	]
+});
+//#endregion
+export { CodeBlock, codeBlockDynamicStyles, codeBlockStyles, parseLineSpec };
+
+//# sourceMappingURL=CodeBlock.js.map

package/dist/base/CodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/base/CodeBlock.tsx"],"sourcesContent":["/**\n * 代码块（pre > code）。高亮器经配置注入（createUi / Provider 的 highlighter，见 config/context.ts），\n * 本组件不依赖 Shiki：没有高亮器、或没给语言时显示纯文本。\n *\n *   <CodeBlock code={source} lang=\"ts\" />\n *   <CodeBlock code={source} lang=\"ts\" title=\"main.ts\" lineNumbers highlightLines=\"2,4-5\" maxLines={20} />\n *\n * - 高亮是异步的：先显示纯文本，结果到了再替换；等宽字体下两者排版相同，布局不跳动。\n * - 长行在 ScrollArea 里横向滚动：浮层滚动条不占高度；滚动区域可聚焦（带焦点环），键盘也能滚动。\n * - 复制按钮（CopyButton）在右上角，有标题时放在标题栏里；复制成功后经 aria-live 播报“已复制”。\n * - 行号、行高亮、新增与删除的行：按行渲染（高亮结果按 <br> 拆行；代码里的 < 都已转义，拆分是安全的）；\n *   都不用时整段写进 innerHTML，不为每行建节点。行号不可选中，复制的是 code 本身。\n * - 长代码：maxLines 之外折叠，底部的按钮展开或收起。\n */\nimport { ChevronDown } 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 { useConfig, useLang } from '../config/context';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { disclosureStyles } from '../utils/style/transitions';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { ButtonBase, type ButtonBaseProps } from './ButtonBase';\nimport { CopyButton, type CopyButtonProps } from './CopyButton';\nimport { Icon, type IconProps } from './Icon';\nimport { t } from '../config/theme/tokens';\n\n/** 行号的写法：`'1,3-5'` 或 `[1, 3, 4, 5]`（从 1 开始） */\nexport type LineSpec = string | readonly number[];\n\n/** 未声明的属性落到 pre 上；原生的 title 属性（悬停提示）让给标题栏 */\nexport interface CodeBlockProps extends PartProps<'pre', 'title'> {\n  /** 代码文本 */\n  code: string;\n  /** 语言（如 ts、vue、bash），交给高亮器；不写时不高亮，高亮器不认识的语言也按纯文本显示 */\n  lang?: string;\n  /**\n   * 高亮：false 时先按纯文本显示，改成 true 时才交给高亮器。看不见的代码（收起的示例源码）可以等要显示时再高亮，\n   * 页面打开时不必一次高亮全部\n   * @default true\n   */\n  highlight?: boolean;\n  /** 标题栏：通常是文件名；有标题时复制按钮放在标题栏里 */\n  title?: VNodeChild;\n  /** 长行自动换行，而不是横向滚动 */\n  wrap?: boolean;\n  /** 显示复制按钮，默认 true */\n  copyable?: boolean;\n  /** 显示行号 */\n  lineNumbers?: boolean;\n  /** 强调的行：`'2,4-5'` */\n  highlightLines?: LineSpec;\n  /** 新增的行（diff）：绿色底 */\n  addedLines?: LineSpec;\n  /** 删除的行（diff）：红色底 */\n  removedLines?: LineSpec;\n  /** 超过这么多行时折叠，底部的按钮展开；不写时不折叠 */\n  maxLines?: number;\n  /** 内层 code 元素的部件属性 */\n  propsCode?: PartProps<'code'>;\n  /** 外层（包着标题栏、pre 与复制按钮的 div）的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 标题栏的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 标题栏里标题文字的部件属性 */\n  propsTitle?: PartProps<'span'>;\n  /** 代码区（包着滚动区域与右上角复制按钮的 div）的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 按行渲染时每一行的部件属性 */\n  propsLine?: PartProps<'span'>;\n  /** 每行行号的部件属性 */\n  propsLineNumber?: PartProps<'span', 'aria-hidden'>;\n  /** 复制按钮的部件属性 */\n  propsCopy?: Partial<CopyButtonProps>;\n  /** 横向滚动区域（ScrollArea）的部件属性 */\n  propsScroll?: Partial<ScrollAreaProps>;\n  /** 展开、收起长代码的按钮的部件属性 */\n  propsExpand?: Partial<ButtonBaseProps>;\n  /** 展开按钮里箭头图标的部件属性；展开后的翻转由组件管理 */\n  propsExpandIcon?: Partial<IconProps>;\n}\n\n/** `'1,3-5'` → Set{1, 3, 4, 5}；数组原样收进集合 */\nexport function parseLineSpec(spec: LineSpec | undefined): Set<number> {\n  if (spec == null) return new Set();\n  if (typeof spec !== 'string') return new Set(spec);\n  const lines = new Set<number>();\n  for (const part of spec.split(',')) {\n    const [from, to = from] = part.split('-').map((text) => Number(text.trim()));\n    if (!Number.isInteger(from) || !Number.isInteger(to)) continue;\n    for (let line = from!; line <= to!; line++) lines.add(line);\n  }\n  return lines;\n}\n\n/** CodeBlock 的样式 */\nexport const codeBlockStyles = css.create({\n  // minWidth: 0：放在 grid / flex 里时外层不被最长的一行代码撑宽（滚动的是里面的 pre）\n  wrapper: {\n    minWidth: 0,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    overflow: 'hidden',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    paddingInlineStart: '_lg',\n    paddingInlineEnd: '_xs',\n    borderBottomWidth: '_xs',\n    borderBottomStyle: 'solid',\n    borderBottomColor: '_borderMuted',\n    backgroundColor: '_surfaceMuted',\n    color: '_textMuted',\n    fontFamily: '_mono',\n    fontSize: '0.85em',\n  },\n  title: {\n    flexGrow: 1,\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  body: { position: 'relative' },\n  // 给复制按钮留出位置，第一行的末尾不被盖住\n  withCopy: {\n    paddingInlineEnd: `calc(${t.space.md} + max(${t.sizes.control}, ${t.sizes.minTarget}))`,\n  },\n  copy: { position: 'absolute', top: '_space.xs', insetInlineEnd: '_space.xs' },\n  root: {\n    boxSizing: 'border-box',\n    margin: 0,\n    paddingBlock: '_md',\n    paddingInline: '_lg',\n    color: '_text',\n    fontFamily: '_mono',\n    // 代码总是从左到右排：从右到左的页面里也不跟着镜像\n    direction: 'ltr',\n    // 代码字体的连字（=> 显示成 ⇒）会让照着抄的人看错，一律关掉\n    fontVariantLigatures: 'none',\n    // 相对周围文字略小：等宽字体的字面显得大；是比例不是字号档位\n    fontSize: '0.9em',\n    lineHeight: '_normal',\n    tabSize: 2,\n  },\n  collapsed: { overflowY: 'hidden' },\n  wrap: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' },\n  // 继承 pre 的字体：浏览器默认给 code 设了 monospace 字号缩放\n  code: { fontFamily: 'inherit', fontSize: 'inherit' },\n  // 按行渲染时：code 至少与 pre 一样宽，行的底色铺满横向滚动的整行\n  lines: { display: 'inline-block', minWidth: '100%' },\n  line: {\n    display: 'block',\n    minHeight: '1lh',\n    marginInline: `calc(-1 * ${t.space.lg})`,\n    paddingInline: '_lg',\n  },\n  highlighted: { backgroundColor: '_fill' },\n  added: { backgroundColor: '_codeInserted' },\n  removed: { backgroundColor: '_codeDeleted' },\n  lineNumber: {\n    display: 'inline-block',\n    minWidth: '2ch',\n    marginInlineEnd: '_lg',\n    color: '_codeComment',\n    textAlign: 'end',\n    userSelect: 'none',\n  },\n  expand: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_xs',\n    width: '_full',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    borderTopWidth: '_xs',\n    borderTopStyle: 'solid',\n    borderTopColor: '_borderMuted',\n    backgroundColor: { default: '_surfaceMuted', ':hover': '_fill' },\n    color: '_textMuted',\n    fontSize: '_sm',\n  },\n  expandOpen: { rotate: '180deg' },\n});\n\n/** 按行拆开；结尾的换行不算新的一行（文件末尾通常有一个），不然行号会多出一行空的 */\nfunction splitLines(text: string, separator: string): string[] {\n  const lines = text.split(separator);\n  if (lines.length > 1 && lines.at(-1) === '') lines.pop();\n  return lines;\n}\n\n// 折叠后的高度按行数算，是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** CodeBlock 的动态样式：折叠后的最大高度 */\nexport const codeBlockDynamicStyles = css.create({\n  maxLines: (lines: number) => ({ maxHeight: `calc(${lines} * 1lh + 2 * 0.75em)` }),\n});\n\n/** 代码块：高亮、复制、标题栏、行号、行高亮、diff、长代码折叠 */\nexport const CodeBlock = _component(\n  ({\n    code,\n    lang,\n    highlight = true,\n    title,\n    wrap = false,\n    copyable = true,\n    lineNumbers = false,\n    highlightLines,\n    addedLines,\n    removedLines,\n    maxLines,\n    propsCode,\n    propsRoot,\n    propsHeader,\n    propsTitle,\n    propsBody,\n    propsLine,\n    propsLineNumber,\n    propsCopy,\n    propsScroll,\n    propsExpand,\n    propsExpandIcon,\n    ...rest\n  }: CodeBlockProps) => {\n    const config = useConfig();\n    const labels = useLang();\n    // 当前代码的高亮结果；代码或语言变了先清空，回到纯文本\n    let html = _state.raw<string | null>(null);\n    let expanded = _state(false);\n\n    _effect(() => {\n      const highlighter = config.highlighter;\n      html = null;\n      if (!highlighter || !lang || !highlight) return;\n      let stale = false;\n      highlighter(code, lang).then(\n        (result) => {\n          if (!stale) html = result;\n        },\n        (error: unknown) => console.error(`CodeBlock 高亮 ${lang} 代码失败，显示纯文本`, error),\n      );\n      return () => (stale = true);\n    });\n\n    const marks = _derived.by(() => ({\n      highlighted: parseLineSpec(highlightLines),\n      added: parseLineSpec(addedLines),\n      removed: parseLineSpec(removedLines),\n    }));\n    const lineCount = _derived(splitLines(code, '\\n').length);\n    const byLine = _derived(\n      lineNumbers || marks.highlighted.size + marks.added.size + marks.removed.size > 0,\n    );\n\n    /** 按行渲染：高亮结果按 <br> 拆，纯文本按换行拆 */\n    function renderLines() {\n      const lines = html == null ? splitLines(code, '\\n') : splitLines(html, '<br>');\n      return lines.map((line, index) => {\n        const number = index + 1;\n        return (\n          <span\n            key={number}\n            {...mergeAttrs<'span'>(\n              {\n                sx: [\n                  codeBlockStyles.line,\n                  marks.highlighted.has(number) && codeBlockStyles.highlighted,\n                  marks.added.has(number) && codeBlockStyles.added,\n                  marks.removed.has(number) && codeBlockStyles.removed,\n                ],\n              },\n              propsLine,\n            )}\n            data-diff={\n              marks.added.has(number) ? 'added' : marks.removed.has(number) ? 'removed' : undefined\n            }\n          >\n            {lineNumbers && (\n              <span\n                {...mergeAttrs<'span'>({ sx: codeBlockStyles.lineNumber }, propsLineNumber, {\n                  'aria-hidden': 'true',\n                })}\n              >\n                {number}\n              </span>\n            )}\n            {html == null ? line : <span innerHTML={line} />}\n          </span>\n        );\n      });\n    }\n\n    return () => {\n      const collapsible = maxLines != null && lineCount > maxLines;\n      const collapsed = collapsible && !expanded;\n      const codeProps = mergeAttrs<'code'>(\n        { sx: [codeBlockStyles.code, byLine && codeBlockStyles.lines] },\n        propsCode,\n      );\n      const copyButton = (inHeader: boolean) => (\n        <CopyButton\n          {...mergePartProps<CopyButtonProps>(\n            { sx: !inHeader && codeBlockStyles.copy, size: 'sm', tone: 'neutral', value: code },\n            propsCopy,\n          )}\n        />\n      );\n      return (\n        <div {...mergeAttrs<'div'>({ sx: codeBlockStyles.wrapper }, propsRoot)}>\n          {hasContent(title) && (\n            <div {...mergeAttrs<'div'>({ sx: codeBlockStyles.header }, propsHeader)}>\n              <span {...mergeAttrs<'span'>({ sx: codeBlockStyles.title }, propsTitle)}>\n                {title}\n              </span>\n              {copyable && copyButton(true)}\n            </div>\n          )}\n          <div {...mergeAttrs<'div'>({ sx: codeBlockStyles.body }, propsBody)}>\n            <ScrollArea axis=\"x\" {...mergePartProps<ScrollAreaProps>({}, propsScroll)}>\n              <pre\n                {...mergeAttrs<'pre'>(\n                  {\n                    sx: [\n                      codeBlockStyles.root,\n                      copyable && title == null && codeBlockStyles.withCopy,\n                    ],\n                  },\n                  rest,\n                  {\n                    sx: [\n                      wrap && codeBlockStyles.wrap,\n                      collapsed && [\n                        codeBlockStyles.collapsed,\n                        codeBlockDynamicStyles.maxLines(maxLines!),\n                      ],\n                    ],\n                  },\n                )}\n                data-lang={lang}\n              >\n                {byLine ? (\n                  <code {...codeProps}>{renderLines()}</code>\n                ) : html == null ? (\n                  <code {...codeProps}>{code}</code>\n                ) : (\n                  <code {...codeProps} innerHTML={html} />\n                )}\n              </pre>\n            </ScrollArea>\n            {copyable && title == null && copyButton(false)}\n          </div>\n          {collapsible && (\n            <ButtonBase\n              {...mergePartProps<ButtonBaseProps>({ sx: codeBlockStyles.expand }, propsExpand, {\n                'aria-expanded': expanded,\n                onClick: () => (expanded = !expanded),\n              })}\n            >\n              {expanded ? labels.codeCollapse : labels.codeExpand}\n              <Icon\n                {...mergePartProps<IconProps>(\n                  { icon: ChevronDown, sx: disclosureStyles.icon },\n                  propsExpandIcon,\n                  { sx: expanded && codeBlockStyles.expandOpen },\n                )}\n              />\n            </ButtonBase>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/base/CopyButton.d.ts

@@ -0,0 +1,40 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+import { type ButtonOptions } from './button-core';
+import type { IconProps } from './Icon';
+/** 不可用、忙碌由组件管理；value 是要复制的文字（不是原生 value） */
+export type CopyButtonManaged = 'disabled' | 'aria-disabled' | 'aria-busy' | 'value' | 'type';
+/** 未声明的属性落到 button 上 */
+export interface CopyButtonProps extends PartProps<'button', CopyButtonManaged>, Omit<ButtonOptions, 'loading' | 'propsSpinner'> {
+    /**
+     * 要复制的文字；给函数时点击时才取值，可以返回 Promise（内容按需加载，等待时按钮转圈）。
+     * 返回字符串时同步写入剪贴板；Safari 只认点击当下的写入，异步内容最好提前加载好
+     */
+    value: string | (() => string | Promise<string>);
+    /** 按钮的无障碍名称，默认取语言包（复制） */
+    'aria-label'?: string;
+    /** 对勾保持多久（毫秒）后复原，默认 2000 */
+    timeout?: number;
+    /**
+     * 样式：默认不带底色
+     * @default 'ghost'
+     */
+    variant?: ButtonOptions['variant'];
+    /**
+     * 色调：默认中性色
+     * @default 'neutral'
+     */
+    tone?: ButtonOptions['tone'];
+    /** 不可用 */
+    disabled?: boolean;
+    /** 复制完成后调用：是否成功，失败时还有原因（不安全的上下文、用户拒绝权限、取值出错） */
+    onCopied?: (success: boolean, error?: unknown) => void;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+}
+/** CopyButton 的样式：copied（对勾弹出；减少动态效果时时长为 0） */
+export declare const copyButtonStyles: Readonly<{
+    copied: css.CompiledStyles;
+}>;
+/** 复制按钮：复制后显示对勾并播报 */
+export declare const CopyButton: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CopyButtonProps>;

package/dist/base/CopyButton.js

@@ -0,0 +1,113 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { buttonContent, buttonPart, buttonSx, useButtonAppearance, useButtonBehavior } from "./button-core.js";
+import { announce } from "../utils/dom/announcer.js";
+import { useClipboard } from "../utils/dom/clipboard.js";
+import { createVNode, mergeProps, ref } from "vue";
+import { _component, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Check, Copy } from "@lucide/icons";
+//#region src/base/CopyButton.tsx
+/**
+* 复制按钮（button）：点击把 value 复制到剪贴板，图标换成对勾（缩放弹出），读屏播报“已复制”，几秒后复原。
+* 外观同 IconButton（button-core.ts），默认 ghost 样式。
+*
+*   <CopyButton value={apiKey} />
+*   <CopyButton value={() => editor.getText()} aria-label="复制全文" />
+*   <CopyButton value={() => fetchSnippet(id)} />   点击时才取（返回 Promise）
+*/
+/** 不可用、忙碌由组件管理；value 是要复制的文字（不是原生 value） */
+/** 未声明的属性落到 button 上 */
+var pop = css.keyframes({ from: {
+	transform: "scale(0.5)",
+	opacity: 0
+} });
+/** CopyButton 的样式：copied（对勾弹出；减少动态效果时时长为 0） */
+var copyButtonStyles = css.create({ copied: {
+	animationName: pop,
+	animationDuration: "_durations.md",
+	animationTimingFunction: "_easings.enter"
+} });
+/** 复制按钮：复制后显示对勾并播报 */
+var CopyButton = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = readonlyProp(_props, "value");
+	const label = readonlyProp(_props, "ariaLabel");
+	const timeout = readonlyProp(_props, "timeout");
+	const variant = readonlyProp(_props, "variant");
+	const tone = readonlyProp(_props, "tone");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const ripple = readonlyProp(_props, "ripple");
+	const disabled = readonlyProp(_props, "disabled", false);
+	const onCopied = readonlyProp(_props, "onCopied");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const clipboard = useClipboard({ timeout: untrack(() => timeout.value) });
+	let pending = ref(false);
+	const appearance = useButtonAppearance(() => ({
+		variant: variant.value,
+		tone: tone.value,
+		size: size.value,
+		radius: radius.value
+	}), "ghost", "neutral");
+	const behavior = useButtonBehavior(() => ({
+		disabled: disabled.value,
+		loading: pending.value,
+		ripple: ripple.value
+	}), () => () => void copy());
+	async function copy() {
+		let success = false;
+		let error;
+		try {
+			const text = typeof value.value === "function" ? value.value() : value.value;
+			pending.value = typeof text !== "string";
+			success = await clipboard.copy(typeof text === "string" ? text : await text);
+			error = clipboard.error;
+		} catch (reason) {
+			error = reason;
+		} finally {
+			pending.value = false;
+		}
+		if (success) {
+			announce(lang.copied);
+			onCopied.value?.(true);
+		} else onCopied.value?.(false, error);
+	}
+	return () => createVNode("button", mergeProps(mergeAttrs({
+		...buttonPart,
+		sx: buttonSx(appearance(), {
+			disabled: disabled.value,
+			square: true
+		}),
+		"aria-label": label.value ?? lang.copy
+	}, rest, {
+		...behavior(),
+		type: "button"
+	}), { "data-state": clipboard.copied ? "copied" : "idle" }), [buttonContent({
+		icon: clipboard.copied ? Check : Copy,
+		propsIcon: mergePartProps(propsIcon.value ?? {}, {
+			key: clipboard.copied ? "copied" : "copy",
+			sx: clipboard.copied && copyButtonStyles.copied
+		})
+	}, { loading: pending.value })]);
+}, {
+	name: "CopyButton",
+	props: [
+		"value",
+		"ariaLabel",
+		"timeout",
+		"variant",
+		"tone",
+		"size",
+		"radius",
+		"ripple",
+		"disabled",
+		"onCopied",
+		"propsIcon"
+	]
+});
+//#endregion
+export { CopyButton, copyButtonStyles };
+
+//# sourceMappingURL=CopyButton.js.map

package/dist/base/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","names":["_vtp_readonlyProp","_vtp_restProps","_vtp_untrack","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/base/CopyButton.tsx"],"sourcesContent":["/**\n * 复制按钮（button）：点击把 value 复制到剪贴板，图标换成对勾（缩放弹出），读屏播报“已复制”，几秒后复原。\n * 外观同 IconButton（button-core.ts），默认 ghost 样式。\n *\n *   <CopyButton value={apiKey} />\n *   <CopyButton value={() => editor.getText()} aria-label=\"复制全文\" />\n *   <CopyButton value={() => fetchSnippet(id)} />   点击时才取（返回 Promise）\n */\nimport { Check, Copy } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useLang } from '../config/context';\nimport { announce } from '../utils/dom/announcer';\nimport { useClipboard } from '../utils/dom/clipboard';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  buttonContent,\n  buttonPart,\n  buttonSx,\n  useButtonAppearance,\n  useButtonBehavior,\n  type ButtonOptions,\n} from './button-core';\nimport type { IconProps } from './Icon';\n\n/** 不可用、忙碌由组件管理；value 是要复制的文字（不是原生 value） */\nexport type CopyButtonManaged = 'disabled' | 'aria-disabled' | 'aria-busy' | 'value' | 'type';\n\n/** 未声明的属性落到 button 上 */\nexport interface CopyButtonProps\n  extends PartProps<'button', CopyButtonManaged>, Omit<ButtonOptions, 'loading' | 'propsSpinner'> {\n  /**\n   * 要复制的文字；给函数时点击时才取值，可以返回 Promise（内容按需加载，等待时按钮转圈）。\n   * 返回字符串时同步写入剪贴板；Safari 只认点击当下的写入，异步内容最好提前加载好\n   */\n  value: string | (() => string | Promise<string>);\n  /** 按钮的无障碍名称，默认取语言包（复制） */\n  'aria-label'?: string;\n  /** 对勾保持多久（毫秒）后复原，默认 2000 */\n  timeout?: number;\n  /**\n   * 样式：默认不带底色\n   * @default 'ghost'\n   */\n  variant?: ButtonOptions['variant'];\n  /**\n   * 色调：默认中性色\n   * @default 'neutral'\n   */\n  tone?: ButtonOptions['tone'];\n  /** 不可用 */\n  disabled?: boolean;\n  /** 复制完成后调用：是否成功，失败时还有原因（不安全的上下文、用户拒绝权限、取值出错） */\n  onCopied?: (success: boolean, error?: unknown) => void;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n}\n\nconst pop = css.keyframes({ from: { transform: 'scale(0.5)', opacity: 0 } });\n\n/** CopyButton 的样式：copied（对勾弹出；减少动态效果时时长为 0） */\nexport const copyButtonStyles = css.create({\n  copied: {\n    animationName: pop,\n    animationDuration: '_durations.md',\n    animationTimingFunction: '_easings.enter',\n  },\n});\n\n/** 复制按钮：复制后显示对勾并播报 */\nexport const CopyButton = _component(\n  ({\n    value,\n    'aria-label': label,\n    timeout,\n    variant,\n    tone,\n    size,\n    radius,\n    ripple,\n    disabled = false,\n    onCopied,\n    propsIcon,\n    ...rest\n  }: CopyButtonProps) => {\n    const lang = useLang();\n    const clipboard = useClipboard({ timeout: _untrack(timeout) });\n    // 异步取值时转圈、忽略重复点击\n    let pending = _state(false);\n    const appearance = useButtonAppearance(\n      () => ({ variant, tone, size, radius }),\n      'ghost',\n      // 只有图标的按钮多是工具栏、卡片角上的次要操作：默认中性色，一排图标不会满屏品牌色\n      'neutral',\n    );\n    const behavior = useButtonBehavior(\n      () => ({ disabled, loading: pending, ripple }),\n      () => () => void copy(),\n    );\n\n    // 点击处理里不等它：取值出错也在这里收住，经 onCopied 告诉使用方，不留下没人处理的 rejection\n    async function copy() {\n      let success = false;\n      let error: unknown;\n      try {\n        const text = typeof value === 'function' ? value() : value;\n        pending = typeof text !== 'string';\n        // 字符串在点击当下就写入（不先 await），Safari 才认\n        success = await clipboard.copy(typeof text === 'string' ? text : await text);\n        error = clipboard.error;\n      } catch (reason) {\n        error = reason;\n      } finally {\n        pending = false;\n      }\n      if (success) {\n        // 经共用的播报区念“已复制”：按钮里的 aria-live 区域各家读屏念不念不一定\n        announce(lang.copied);\n        onCopied?.(true);\n      } else onCopied?.(false, error);\n    }\n\n    return () => (\n      <button\n        {...mergeAttrs<'button'>(\n          {\n            ...buttonPart,\n            sx: buttonSx(appearance(), { disabled, square: true }),\n            'aria-label': label ?? lang.copy,\n          },\n          rest,\n          { ...behavior(), type: 'button' },\n        )}\n        data-state={clipboard.copied ? 'copied' : 'idle'}\n      >\n        {buttonContent(\n          {\n            icon: clipboard.copied ? Check : Copy,\n            // 换图标时换一个元素，弹出动画才会重播\n            propsIcon: mergePartProps<Partial<IconProps>>(propsIcon ?? {}, {\n              key: clipboard.copied ? 'copied' : 'copy',\n              sx: clipboard.copied && copyButtonStyles.copied,\n            }),\n          },\n          { loading: pending },\n        )}\n      </button>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0DA,IAAM,MAAM,IAAI,UAAU,EAAE,MAAM;CAAE,WAAW;CAAc,SAAS;AAAE,EAAE,CAAC;;AAG3E,IAAa,mBAAmB,IAAI,OAAO,EACzC,QAAQ;CACN,eAAe;CACf,mBAAmB;CACnB,yBAAyB;AAC3B,EACF,CAAC;;AAGD,IAAa,aAAa,0BACxB,QAAA,SAauB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAJV,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAGb,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,aAAa,EAAE,SAAOC,cAAA,QAAA,KAAA,EAAoB,CAAC;CAE7D,IAAI,UAAOC,IAAU,KAAK;CAC1B,MAAM,aAAa,2BACV;EAAE,SAAO,QAAA;EAAE,MAAI,KAAA;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;CAAC,IACrC,SAEA,SACF;CACA,MAAM,WAAW,yBACR;EAAE,UAAQ,SAAA;EAAE,SAAO,QAAA;EAAW,QAAM,OAAA;CAAC,gBAChC,KAAK,KAAK,CACxB;CAGA,eAAe,OAAO;EACpB,IAAI,UAAU;EACd,IAAI;EACJ,IAAI;GACF,MAAM,OAAO,OAAA,MAAA,UAAiB,aAAa,MAAA,MAAM,IAAC,MAAA;GAClD,QAAA,QAAU,OAAO,SAAS;GAE1B,UAAU,MAAM,UAAU,KAAK,OAAO,SAAS,WAAW,OAAO,MAAM,IAAI;GAC3E,QAAQ,UAAU;EACpB,SAAS,QAAQ;GACf,QAAQ;EACV,UAAU;GACR,QAAA,QAAU;EACZ;EACA,IAAI,SAAS;GAEX,SAAS,KAAK,MAAM;GACpB,SAAA,QAAW,IAAI;EACjB,OAAO,SAAA,QAAW,OAAO,KAAK;CAChC;CAEA,aAAOC,YAAA,UAAAC,WAEC,WACF;EACE,GAAG;EACH,IAAI,SAAS,WAAW,GAAG;GAAE,UAAQ,SAAA;GAAE,QAAQ;EAAK,CAAC;EACrD,cAAc,MAAA,SAAS,KAAK;CAC9B,GACA,MACA;EAAE,GAAG,SAAS;EAAG,MAAM;CAAS,CAClC,GAAC,EAAA,cACW,UAAU,SAAS,WAAW,OAAM,CAAA,GAAA,CAE/C,cACC;EACE,MAAM,UAAU,SAAS,QAAQ;EAEjC,WAAW,eAAmC,UAAA,SAAa,CAAC,GAAG;GAC7D,KAAK,UAAU,SAAS,WAAW;GACnC,IAAI,UAAU,UAAU,iBAAiB;EAC3C,CAAC;CACH,GACA,EAAE,SAAO,QAAA,MAAU,CACrB,CAAC,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/base/Heading.d.ts

@@ -0,0 +1,49 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type FontSize, type FontWeight, type TextAlign, type TextWrap, type Tone } from '../utils/style/typography';
+/** 标题组件可用的标签 */
+export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/** 未声明的属性落到 h1–h6 元素上 */
+export interface HeadingProps extends PartProps<HeadingTag> {
+    /** 字号档位，不写时按级别：H1 xxxl、H2 xxl、H3 xl、H4 lg、H5–H6 md */
+    size?: FontSize;
+    /** 字重，默认 semibold */
+    weight?: FontWeight;
+    /** 色调，不写时继承 */
+    tone?: Tone;
+    /** 水平对齐，不写时继承 */
+    align?: TextAlign;
+    /** 单行省略 */
+    truncate?: boolean;
+    /** 最多显示几行，超出的省略（同 Text） */
+    lineClamp?: number;
+    /** 换行方式，默认 balance（各行长度均衡）；同 Text 的 wrap */
+    wrap?: TextWrap;
+    /** 有 id 时在末尾放一个指向本节的锚点链接（#），悬停或聚焦时显示：文档里方便复制本节的链接 */
+    anchor?: boolean;
+    /** 锚点链接的部件属性 */
+    propsAnchor?: PartProps<'a'>;
+    children?: VNodeChild;
+}
+/** H1–H6 的样式：root、xxl、xxxl */
+export declare const headingStyles: Readonly<{
+    anchor: css.CompiledStyles;
+    root: css.CompiledStyles;
+    xxl: css.CompiledStyles;
+    xxxl: css.CompiledStyles;
+}>;
+/** 生成标题组件：标签与默认字号（H1–H6 由它生成） */
+export declare function createHeading(tag: HeadingTag, defaultSize: FontSize): import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<HeadingProps>;
+/** 页面主标题，每页一个；默认字号 xxxl（30px） */
+export declare const H1: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<HeadingProps>;
+/** 页面里的一级分区；默认字号 xxl（24px） */
+export declare const H2: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<HeadingProps>;
+/** 分区里的小节；默认字号 xl（18px） */
+export declare const H3: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<HeadingProps>;
+/** 四级标题；默认字号 lg（16px） */
+export declare const H4: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<HeadingProps>;
+/** 五级标题；默认字号 md（14px） */
+export declare const H5: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<HeadingProps>;
+/** 六级标题；默认字号 md（14px） */
+export declare const H6: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<HeadingProps>;