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

package/dist/theme-customize/ThemeCustomizer.js

@@ -0,0 +1,361 @@
+import { colors } from "../config/theme/tokens.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { readToken } from "../config/theme/theme.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+import { Button } from "../base/Button.js";
+import { CodeBlock } from "../base/CodeBlock.js";
+import { Text as Text$1 } from "../base/Text.js";
+import { Flex } from "../layout/Flex.js";
+import { useFormat } from "../config/lang/format.js";
+import { Alert } from "../feedback/Alert.js";
+import { swatchStyles } from "../utils/style/swatch-styles.js";
+import { ToggleGroup, ToggleItem } from "../input/ToggleGroup.js";
+import { builtinThemes } from "../config/theme/builtin.js";
+import { useMessages } from "../config/lang/messages.js";
+import { downloadFile } from "../utils/dom/download.js";
+import { themeCustomizerMessages } from "./messages.js";
+import { CONTRAST_PAIRS, checkContrast } from "./contrast.js";
+import { elementDesignTokens } from "./design-tokens.js";
+import { ACCENT_SCALES, NEUTRAL_SCALES, scaleSwatch } from "./palette.js";
+import { themeSettingsCode } from "./customize.js";
+import { Fragment, createTextVNode, createVNode, isVNode, mergeProps, nextTick, shallowRef, watch } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Download, FileBraces, RotateCcw } from "@lucide/icons";
+//#region src/theme-customize/ThemeCustomizer.tsx
+/**
+* 主题编辑器：几个旋钮（品牌色、中性色、圆角、缩放、字体、动效）调出自己的主题，实时检查对比度，给出可以粘贴的代码。
+* 只管设置（ThemeSettings）；把设置套到主题上由使用方做（customizeTheme），这样设置可以记在本地、和主题偏好组合：
+*
+*   let settings = _state<ThemeSettings>({});
+*   app.use(createUi({ theme: () => customizeTheme(preference.theme, settings) }));
+*   <ThemeCustomizer _settings={settings} base={preference.theme} />
+*
+* 旋钮分成颜色、形状与尺寸、字体与动效、检查与导出四组；每个选项带示意（色块与名字、圆角的角、字号、字体），
+* 当前取值写在旋钮名称旁边。对比度按 CONTRAST_PAIRS 检查，读的是 contrastTarget（默认页面根元素）上实际生效的颜色，
+* 所以改了设置、换了主题都会重新检查。
+*/
+/** 未声明的属性落到外层 div 上 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** ThemeCustomizer 的样式：root、group、groupHeader、field、fieldHeader、options、option、optionContent 等 */
+var themeCustomizerStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_xl"
+	},
+	group: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_lg",
+		paddingBlockStart: {
+			default: "_lg",
+			":first-child": 0
+		},
+		borderBlockStartWidth: {
+			default: "_xs",
+			":first-child": 0
+		},
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_borderMuted"
+	},
+	groupHeader: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_xs"
+	},
+	field: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm"
+	},
+	fieldHeader: {
+		display: "flex",
+		alignItems: "baseline",
+		justifyContent: "space-between",
+		gap: "_sm"
+	},
+	options: {
+		display: "grid",
+		width: "auto",
+		gridTemplateColumns: "repeat(auto-fill, minmax(6.5em, 1fr))"
+	},
+	option: {
+		justifyContent: "flex-start",
+		minWidth: 0
+	},
+	swatches: { gridTemplateColumns: "repeat(auto-fill, minmax(2em, 1fr))" },
+	swatchOption: {
+		justifyContent: "center",
+		paddingInline: 0
+	},
+	swatchLarge: {
+		width: "1.25em",
+		height: "1.25em"
+	},
+	optionContent: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		minWidth: 0
+	},
+	optionLabel: {
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	swatch: {
+		flexShrink: 0,
+		width: "1em",
+		height: "1em",
+		borderRadius: "_full"
+	},
+	swatchDefault: {
+		boxSizing: "border-box",
+		borderWidth: "_xs",
+		borderStyle: "dashed",
+		borderColor: "_borderStrong"
+	},
+	corner: {
+		flexShrink: 0,
+		boxSizing: "border-box",
+		width: "1em",
+		height: "1em",
+		borderBlockStartWidth: "_sm",
+		borderInlineStartWidth: "_sm",
+		borderBlockStartStyle: "solid",
+		borderInlineStartStyle: "solid",
+		borderColor: "currentColor"
+	},
+	sample: {
+		flexShrink: 0,
+		lineHeight: 1,
+		fontWeight: "_semibold"
+	},
+	sans: { fontFamily: "_sans" },
+	serif: { fontFamily: "_serif" }
+});
+/** ThemeCustomizer 的样式：圆角示意的四档（none、small、medium、large） */
+var themeCustomizerCornerStyles = css.create({
+	none: { borderStartStartRadius: 0 },
+	small: { borderStartStartRadius: "0.2em" },
+	medium: { borderStartStartRadius: "0.45em" },
+	large: { borderStartStartRadius: "0.8em" }
+});
+/** ThemeCustomizer 的动态样式：色块的颜色、缩放示例的字号 */
+var themeCustomizerDynamicStyles = css.create({
+	fill: (color) => ({ backgroundColor: color }),
+	scale: (factor) => ({ fontSize: `${factor}em` })
+});
+/** 内置主题名 → 导出代码里的变量名（high-contrast → highContrastTheme）；不是内置主题时没有 */
+function baseVariable(name) {
+	if (!(name in builtinThemes)) return void 0;
+	return `${name.replace(/-(\w)/g, (_, letter) => letter.toUpperCase())}Theme`;
+}
+var SCALINGS = [
+	.9,
+	.95,
+	1,
+	1.05,
+	1.1
+];
+/** 一个选项：值、示意、名字、悬停提示 */
+/** 选项的排法：list 是示意加名字，swatches 只放色块 */
+/** 主题编辑器：分组的旋钮、对比度检查与导出代码 */
+var ThemeCustomizer = /*#__PURE__*/ _component((_props, _ctx) => {
+	const settings = bindable(_props, "_settings", () => ({}), _ctx.emit);
+	const base = readonlyProp(_props, "base");
+	const contrastTarget = readonlyProp(_props, "contrastTarget");
+	const propsGroup = readonlyProp(_props, "propsGroup");
+	const propsContrast = readonlyProp(_props, "propsContrast");
+	const propsCode = readonlyProp(_props, "propsCode");
+	const propsDownload = readonlyProp(_props, "propsDownload");
+	const propsDownloadTokens = readonlyProp(_props, "propsDownloadTokens");
+	const propsReset = readonlyProp(_props, "propsReset");
+	const rest = restProps(_props, _ctx, true);
+	const messages = useMessages("themeCustomizer", themeCustomizerMessages);
+	const format = useFormat();
+	let issues = shallowRef([]);
+	/** 改一个旋钮：空值表示沿用主题本来的取值 */
+	function set(key, value) {
+		settings.value = {
+			...settings.value,
+			[key]: value === "" ? void 0 : value
+		};
+	}
+	watch(() => [settings.value, base.value], async () => {
+		await nextTick();
+		const target = contrastTarget.value ?? document.documentElement;
+		try {
+			issues.value = checkContrast((token) => readToken(target, colors[token]));
+		} catch {
+			issues.value = [];
+		}
+	}, {
+		immediate: true,
+		deep: true,
+		flush: "post"
+	});
+	/** 页面上实际生效的主题（已经套上这些设置）存成 Figma 变量能导入的设计令牌 */
+	function downloadTokens(customized) {
+		const name = `${base.value.name.replace(/-custom$/, "")}${customized ? "-custom" : ""}`;
+		const tokens = elementDesignTokens(contrastTarget.value ?? document.documentElement);
+		downloadFile(`${name}.tokens.json`, JSON.stringify(tokens, null, 2), "application/json");
+	}
+	const group = (title, hint, children) => createVNode("section", mergeAttrs({ sx: themeCustomizerStyles.group }, propsGroup.value), [createVNode("div", css.attrs(themeCustomizerStyles.groupHeader), [createVNode(Text$1, { "weight": "semibold" }, _isSlot(title) ? title : { default: () => [title] }), createVNode(Text$1, {
+		"size": "sm",
+		"tone": "muted"
+	}, _isSlot(hint) ? hint : { default: () => [hint] })]), children]);
+	/** 一个旋钮：名称与当前取值，下面是选项网格（单选、至少选一项） */
+	const field = (label, current, options, value, onChange, layout = "list") => {
+		let _slot;
+		return createVNode("div", css.attrs(themeCustomizerStyles.field), [createVNode("div", css.attrs(themeCustomizerStyles.fieldHeader), [createVNode(Text$1, {
+			"size": "sm",
+			"weight": "medium"
+		}, _isSlot(label) ? label : { default: () => [label] }), createVNode(Text$1, {
+			"size": "xs",
+			"tone": "muted"
+		}, _isSlot(current) ? current : { default: () => [current] })]), createVNode(ToggleGroup, {
+			"_value": value,
+			"onUpdate:_value": onChange,
+			"required": true,
+			"size": "sm",
+			"aria-label": label,
+			"sx": [themeCustomizerStyles.options, layout === "swatches" && themeCustomizerStyles.swatches]
+		}, _isSlot(_slot = options.map((option) => createVNode(ToggleItem, {
+			"key": option.value,
+			"value": option.value,
+			"title": option.title,
+			"sx": [themeCustomizerStyles.option, layout === "swatches" && themeCustomizerStyles.swatchOption]
+		}, { default: () => [layout === "swatches" ? createVNode(Fragment, null, [option.preview, createVNode(VisuallyHidden, null, { default: () => [option.label] })]) : createVNode("span", css.attrs(themeCustomizerStyles.optionContent), [option.preview, createVNode("span", css.attrs(themeCustomizerStyles.optionLabel), [option.label])])] }))) ? _slot : { default: () => [_slot] })]);
+	};
+	/** 色阶在当前语言下的名字与色值：“靛蓝 #3e63dd”；没选（主题默认）时是“主题默认” */
+	const scaleText = (scale) => scale ? `${messages.colorNames[scale]} ${scaleSwatch(scale, base.value.colorScheme)}` : messages.themeDefault;
+	/** 色阶选项：第一项是“主题默认”，其余是色块；名字与色值在悬停提示与读屏文字里 */
+	const scaleOptions = (scales) => [{
+		value: "",
+		preview: createVNode("span", css.attrs(themeCustomizerStyles.swatch, themeCustomizerStyles.swatchLarge, themeCustomizerStyles.swatchDefault), null),
+		label: messages.themeDefault,
+		title: messages.themeDefault
+	}, ...scales.map((scale) => {
+		const color = scaleSwatch(scale, base.value.colorScheme);
+		return {
+			value: scale,
+			title: `${messages.colorNames[scale]}（${scale}）${color}`,
+			preview: createVNode("span", css.attrs(themeCustomizerStyles.swatch, themeCustomizerStyles.swatchLarge, swatchStyles.ring, themeCustomizerDynamicStyles.fill(color)), null),
+			label: messages.colorNames[scale]
+		};
+	})];
+	return () => {
+		const radii = [
+			["none", messages.radiusNone],
+			["small", messages.radiusSmall],
+			["medium", messages.radiusMedium],
+			["large", messages.radiusLarge]
+		];
+		const fonts = [["sans", messages.fontSans], ["serifHeadings", messages.fontSerifHeadings]];
+		const motions = [
+			["none", messages.motionNone],
+			["fast", messages.motionFast],
+			["normal", messages.motionNormal],
+			["slow", messages.motionSlow]
+		];
+		const radius = settings.value.radius ?? "medium";
+		const scaling = settings.value.scaling ?? 1;
+		const font = settings.value.font ?? "sans";
+		const motion = settings.value.motion ?? "normal";
+		const percent = (factor) => format.number(factor, { style: "percent" });
+		const labelOf = (list, key) => list.find(([value]) => value === key)?.[1];
+		const code = themeSettingsCode(baseVariable(base.value.name.replace(/-custom$/, "")) ?? (base.value.colorScheme === "dark" ? "darkTheme" : "lightTheme"), settings.value, base.value.colorScheme);
+		const customized = Object.values(settings.value).some((value) => value !== void 0);
+		return createVNode("div", mergeAttrs({ sx: themeCustomizerStyles.root }, rest), [
+			group(messages.groupColor, messages.groupColorHint, [field(messages.accent, scaleText(settings.value.accent), scaleOptions(ACCENT_SCALES), settings.value.accent ?? "", (next) => set("accent", next), "swatches"), field(messages.neutral, scaleText(settings.value.neutral), scaleOptions(NEUTRAL_SCALES), settings.value.neutral ?? "", (next) => set("neutral", next), "swatches")]),
+			group(messages.groupShape, messages.groupShapeHint, [field(messages.radius, labelOf(radii, radius), radii.map(([value, label]) => ({
+				value,
+				label,
+				preview: createVNode("span", css.attrs(themeCustomizerStyles.corner, themeCustomizerCornerStyles[value]), null)
+			})), radius, (next) => set("radius", next)), field(messages.scaling, percent(scaling), SCALINGS.map((factor) => ({
+				value: String(factor),
+				label: percent(factor),
+				preview: createVNode("span", css.attrs(themeCustomizerStyles.sample, css.bind(themeCustomizerDynamicStyles.scale, () => [factor])), [createTextVNode("Aa")])
+			})), String(scaling), (next) => set("scaling", Number(next)))]),
+			group(messages.groupType, messages.groupTypeHint, [field(messages.font, labelOf(fonts, font), fonts.map(([value, label]) => ({
+				value,
+				label,
+				preview: createVNode("span", css.attrs(themeCustomizerStyles.sample, value === "sans" ? themeCustomizerStyles.sans : themeCustomizerStyles.serif), [createTextVNode("Aa")])
+			})), font, (next) => set("font", next)), field(messages.motion, labelOf(motions, motion), motions.map(([value, label]) => ({
+				value,
+				label
+			})), motion, (next) => set("motion", next))]),
+			group(messages.groupExport, messages.groupExportHint, [
+				createVNode(Alert, mergeProps(mergePartProps({ title: messages.contrast }, propsContrast.value, { tone: issues.value.length === 0 ? "success" : "warning" }), { "key": "__site1" }), {
+					default: () => [issues.value.length === 0 ? messages.contrastOk(CONTRAST_PAIRS.length) : createVNode(Flex, {
+						"direction": "column",
+						"gap": "xs",
+						"key": "__site0"
+					}, {
+						default: () => [issues.value.map((issue) => createVNode("span", { "key": `${issue.foreground}-${issue.background}` }, [messages.contrastIssue(`${issue.foreground} / ${issue.background}`, format.number(issue.ratio, {
+							minimumFractionDigits: 2,
+							maximumFractionDigits: 2
+						}), issue.minimum)]))],
+						$stable: true
+					})],
+					$stable: true
+				}),
+				createVNode(CodeBlock, mergePartProps({
+					title: messages.code,
+					code,
+					lang: "ts"
+				}, propsCode.value), null),
+				createVNode(Flex, {
+					"gap": "sm",
+					"wrap": true
+				}, { default: () => [
+					createVNode(Button, mergeProps(mergePartProps({
+						variant: "soft",
+						icon: Download
+					}, propsDownload.value, { onClick: () => downloadFile("theme.ts", code, "text/typescript") }), { "key": "__site2" }), {
+						default: () => [messages.download],
+						$stable: true
+					}),
+					createVNode(Button, mergeProps(mergePartProps({
+						variant: "soft",
+						icon: FileBraces
+					}, propsDownloadTokens.value, { onClick: () => downloadTokens(customized) }), { "key": "__site3" }), {
+						default: () => [messages.downloadTokens],
+						$stable: true
+					}),
+					createVNode(Button, mergeProps(mergePartProps({
+						variant: "soft",
+						tone: "neutral",
+						icon: RotateCcw,
+						disabled: !customized
+					}, propsReset.value, { onClick: () => settings.value = {} }), { "key": "__site4" }), {
+						default: () => [messages.reset],
+						$stable: true
+					})
+				] })
+			])
+		]);
+	};
+}, {
+	name: "ThemeCustomizer",
+	props: [
+		"_settings",
+		"onUpdate:_settings",
+		"base",
+		"contrastTarget",
+		"propsGroup",
+		"propsContrast",
+		"propsCode",
+		"propsDownload",
+		"propsDownloadTokens",
+		"propsReset"
+	]
+});
+//#endregion
+export { ThemeCustomizer, themeCustomizerCornerStyles, themeCustomizerDynamicStyles, themeCustomizerStyles };
+
+//# sourceMappingURL=ThemeCustomizer.js.map

package/dist/theme-customize/ThemeCustomizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeCustomizer.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","Text","_Fragment","_createTextVNode","_mergeProps"],"sources":["../../src/theme-customize/ThemeCustomizer.tsx"],"sourcesContent":["/**\n * 主题编辑器：几个旋钮（品牌色、中性色、圆角、缩放、字体、动效）调出自己的主题，实时检查对比度，给出可以粘贴的代码。\n * 只管设置（ThemeSettings）；把设置套到主题上由使用方做（customizeTheme），这样设置可以记在本地、和主题偏好组合：\n *\n *   let settings = _state<ThemeSettings>({});\n *   app.use(createUi({ theme: () => customizeTheme(preference.theme, settings) }));\n *   <ThemeCustomizer _settings={settings} base={preference.theme} />\n *\n * 旋钮分成颜色、形状与尺寸、字体与动效、检查与导出四组；每个选项带示意（色块与名字、圆角的角、字号、字体），\n * 当前取值写在旋钮名称旁边。对比度按 CONTRAST_PAIRS 检查，读的是 contrastTarget（默认页面根元素）上实际生效的颜色，\n * 所以改了设置、换了主题都会重新检查。\n */\nimport { Download, FileBraces, RotateCcw } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, watch, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { CodeBlock, type CodeBlockProps } from '../base/CodeBlock';\nimport { Text } from '../base/Text';\nimport { Alert, type AlertProps } from '../feedback/Alert';\nimport { ToggleGroup, ToggleItem } from '../input/ToggleGroup';\nimport { Flex } from '../layout/Flex';\nimport { downloadFile } from '../utils/dom/download';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { swatchStyles } from '../utils/style/swatch-styles';\nimport { useFormat } from '../config/lang/format';\nimport { useMessages } from '../config/lang/messages';\nimport { themeCustomizerMessages } from './messages';\nimport { builtinThemes } from '../config/theme/builtin';\nimport { CONTRAST_PAIRS, checkContrast, type ContrastIssue } from './contrast';\nimport {\n  themeSettingsCode,\n  type FontPresets,\n  type MotionPresets,\n  type RadiusPresets,\n  type ThemeSettings,\n} from './customize';\nimport { elementDesignTokens } from './design-tokens';\nimport {\n  ACCENT_SCALES,\n  NEUTRAL_SCALES,\n  scaleSwatch,\n  type AccentScale,\n  type NeutralScale,\n} from './palette';\nimport { readToken, type Theme } from '../config/theme/theme';\nimport { colors } from '../config/theme/tokens';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ThemeCustomizerProps extends PartProps<'div'> {\n  /** 设置：父级写 _settings={x} */\n  _settings?: ThemeSettings;\n  /** 设置套在哪套主题上：决定色块取亮色还是暗色色阶、导出代码里的基础主题 */\n  base: Theme;\n  /** 从哪个元素上读实际生效的颜色做对比度检查，默认页面根元素 */\n  contrastTarget?: HTMLElement | null;\n  /** 每个分组（section）的部件属性 */\n  propsGroup?: PartProps<'section'>;\n  /** 对比度检查结果（Alert）的部件属性；色调由检查结果决定 */\n  propsContrast?: Omit<Partial<AlertProps>, 'tone'>;\n  /** 导出代码（CodeBlock）的部件属性；代码与语言由组件管理 */\n  propsCode?: Omit<Partial<CodeBlockProps>, 'code' | 'lang'>;\n  /** 下载代码按钮的部件属性 */\n  propsDownload?: Omit<Partial<ButtonProps>, 'onClick'>;\n  /** 下载设计令牌（Figma 变量能导入的 JSON）按钮的部件属性 */\n  propsDownloadTokens?: Omit<Partial<ButtonProps>, 'onClick'>;\n  /** 恢复默认按钮的部件属性 */\n  propsReset?: Omit<Partial<ButtonProps>, 'onClick'>;\n}\n\n/** ThemeCustomizer 的样式：root、group、groupHeader、field、fieldHeader、options、option、optionContent 等 */\nexport const themeCustomizerStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_xl' },\n  group: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_lg',\n    // 组与组之间一条分隔线；第一组上面不画\n    paddingBlockStart: { default: '_lg', ':first-child': 0 },\n    borderBlockStartWidth: { default: '_xs', ':first-child': 0 },\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n  },\n  groupHeader: { display: 'flex', flexDirection: 'column', gap: '_xs' },\n  field: { display: 'flex', flexDirection: 'column', gap: '_sm' },\n  fieldHeader: {\n    display: 'flex',\n    alignItems: 'baseline',\n    justifyContent: 'space-between',\n    gap: '_sm',\n  },\n  // 选项排成网格，窄栏里自动换行；每项左对齐，示意在前、名字在后\n  options: {\n    display: 'grid',\n    // ToggleGroup 默认按内容宽：这里占满整栏，auto-fill 才按栏宽排出几列\n    width: 'auto',\n    gridTemplateColumns: 'repeat(auto-fill, minmax(6.5em, 1fr))',\n  },\n  option: { justifyContent: 'flex-start', minWidth: 0 },\n  // 色板：只放色块，排成紧凑的网格；名字在悬停提示与读屏文字里，选中的名字与色值写在旋钮标题旁\n  swatches: { gridTemplateColumns: 'repeat(auto-fill, minmax(2em, 1fr))' },\n  swatchOption: { justifyContent: 'center', paddingInline: 0 },\n  swatchLarge: { width: '1.25em', height: '1.25em' },\n  optionContent: { display: 'flex', alignItems: 'center', gap: '_sm', minWidth: 0 },\n  optionLabel: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },\n  swatch: { flexShrink: 0, width: '1em', height: '1em', borderRadius: '_full' },\n  // 主题默认：虚线圈，表示“不覆盖，沿用主题自己的颜色”\n  swatchDefault: {\n    boxSizing: 'border-box',\n    borderWidth: '_xs',\n    borderStyle: 'dashed',\n    borderColor: '_borderStrong',\n  },\n  // 圆角示意：一个只有上边与左边的角\n  corner: {\n    flexShrink: 0,\n    boxSizing: 'border-box',\n    width: '1em',\n    height: '1em',\n    borderBlockStartWidth: '_sm',\n    borderInlineStartWidth: '_sm',\n    borderBlockStartStyle: 'solid',\n    borderInlineStartStyle: 'solid',\n    borderColor: 'currentColor',\n  },\n  sample: { flexShrink: 0, lineHeight: 1, fontWeight: '_semibold' },\n  sans: { fontFamily: '_sans' },\n  serif: { fontFamily: '_serif' },\n});\n\n/** ThemeCustomizer 的样式：圆角示意的四档（none、small、medium、large） */\nexport const themeCustomizerCornerStyles = css.create({\n  none: { borderStartStartRadius: 0 },\n  small: { borderStartStartRadius: '0.2em' },\n  medium: { borderStartStartRadius: '0.45em' },\n  large: { borderStartStartRadius: '0.8em' },\n});\n\n// 色块颜色与示例字号是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** ThemeCustomizer 的动态样式：色块的颜色、缩放示例的字号 */\nexport const themeCustomizerDynamicStyles = css.create({\n  fill: (color: string) => ({ backgroundColor: color }),\n  scale: (factor: number) => ({ fontSize: `${factor}em` }),\n});\n\n/** 内置主题名 → 导出代码里的变量名（high-contrast → highContrastTheme）；不是内置主题时没有 */\nfunction baseVariable(name: string): string | undefined {\n  if (!(name in builtinThemes)) return undefined;\n  return `${name.replace(/-(\\w)/g, (_, letter: string) => letter.toUpperCase())}Theme`;\n}\n\nconst SCALINGS = [0.9, 0.95, 1, 1.05, 1.1];\n\n/** 一个选项：值、示意、名字、悬停提示 */\ninterface Option {\n  value: string;\n  preview?: VNodeChild;\n  label: VNodeChild;\n  title?: string;\n}\n\n/** 选项的排法：list 是示意加名字，swatches 只放色块 */\ntype OptionLayout = 'list' | 'swatches';\n\n/** 主题编辑器：分组的旋钮、对比度检查与导出代码 */\nexport const ThemeCustomizer = _component(\n  ({\n    _settings: settings = _bindable<ThemeSettings>({}),\n    base,\n    contrastTarget,\n    propsGroup,\n    propsContrast,\n    propsCode,\n    propsDownload,\n    propsDownloadTokens,\n    propsReset,\n    ...rest\n  }: ThemeCustomizerProps) => {\n    const messages = useMessages('themeCustomizer', themeCustomizerMessages);\n    const format = useFormat();\n    let issues = _state.raw<ContrastIssue[]>([]);\n\n    /** 改一个旋钮：空值表示沿用主题本来的取值 */\n    function set<Key extends keyof ThemeSettings>(key: Key, value: ThemeSettings[Key] | '') {\n      settings = { ...settings, [key]: value === '' ? undefined : value };\n    }\n\n    // 设置或主题变了：等新主题写进页面，再读实际生效的颜色检查对比度\n    watch(\n      () => [settings, base],\n      async () => {\n        await nextTick();\n        const target = contrastTarget ?? document.documentElement;\n        try {\n          issues = checkContrast((token) =>\n            readToken(target, colors[token as keyof typeof colors] as never),\n          );\n        } catch {\n          // 主题的颜色还没写进页面（服务端渲染、没有样式的测试环境）：读不到就不检查\n          issues = [];\n        }\n      },\n      { immediate: true, deep: true, flush: 'post' },\n    );\n\n    /** 页面上实际生效的主题（已经套上这些设置）存成 Figma 变量能导入的设计令牌 */\n    function downloadTokens(customized: boolean) {\n      const name = `${base.name.replace(/-custom$/, '')}${customized ? '-custom' : ''}`;\n      const tokens = elementDesignTokens(contrastTarget ?? document.documentElement);\n      downloadFile(`${name}.tokens.json`, JSON.stringify(tokens, null, 2), 'application/json');\n    }\n\n    const group = (title: string, hint: string, children: VNodeChild) => (\n      <section {...mergeAttrs<'section'>({ sx: themeCustomizerStyles.group }, propsGroup)}>\n        <div {...css.attrs(themeCustomizerStyles.groupHeader)}>\n          <Text weight=\"semibold\">{title}</Text>\n          <Text size=\"sm\" tone=\"muted\">\n            {hint}\n          </Text>\n        </div>\n        {children}\n      </section>\n    );\n\n    /** 一个旋钮：名称与当前取值，下面是选项网格（单选、至少选一项） */\n    const field = (\n      label: string,\n      current: VNodeChild,\n      options: readonly Option[],\n      value: string,\n      onChange: (next: string) => void,\n      layout: OptionLayout = 'list',\n    ) => (\n      <div {...css.attrs(themeCustomizerStyles.field)}>\n        <div {...css.attrs(themeCustomizerStyles.fieldHeader)}>\n          <Text size=\"sm\" weight=\"medium\">\n            {label}\n          </Text>\n          <Text size=\"xs\" tone=\"muted\">\n            {current}\n          </Text>\n        </div>\n        <ToggleGroup\n          _value={value}\n          onUpdate:_value={onChange}\n          required\n          size=\"sm\"\n          aria-label={label}\n          sx={[\n            themeCustomizerStyles.options,\n            layout === 'swatches' && themeCustomizerStyles.swatches,\n          ]}\n        >\n          {options.map((option) => (\n            <ToggleItem\n              key={option.value}\n              value={option.value}\n              title={option.title}\n              sx={[\n                themeCustomizerStyles.option,\n                layout === 'swatches' && themeCustomizerStyles.swatchOption,\n              ]}\n            >\n              {layout === 'swatches' ? (\n                <>\n                  {option.preview}\n                  <VisuallyHidden>{option.label}</VisuallyHidden>\n                </>\n              ) : (\n                <span {...css.attrs(themeCustomizerStyles.optionContent)}>\n                  {option.preview}\n                  <span {...css.attrs(themeCustomizerStyles.optionLabel)}>{option.label}</span>\n                </span>\n              )}\n            </ToggleItem>\n          ))}\n        </ToggleGroup>\n      </div>\n    );\n\n    /** 色阶在当前语言下的名字与色值：“靛蓝 #3e63dd”；没选（主题默认）时是“主题默认” */\n    const scaleText = (scale: AccentScale | NeutralScale | undefined) =>\n      scale\n        ? `${messages.colorNames[scale]} ${scaleSwatch(scale as never, base.colorScheme)}`\n        : messages.themeDefault;\n\n    /** 色阶选项：第一项是“主题默认”，其余是色块；名字与色值在悬停提示与读屏文字里 */\n    const scaleOptions = (scales: readonly (AccentScale | NeutralScale)[]): Option[] => [\n      {\n        value: '',\n        preview: (\n          <span\n            {...css.attrs(\n              themeCustomizerStyles.swatch,\n              themeCustomizerStyles.swatchLarge,\n              themeCustomizerStyles.swatchDefault,\n            )}\n          />\n        ),\n        label: messages.themeDefault,\n        title: messages.themeDefault,\n      },\n      ...scales.map((scale) => {\n        const color = scaleSwatch(scale as never, base.colorScheme);\n        return {\n          value: scale,\n          title: `${messages.colorNames[scale]}（${scale}）${color}`,\n          preview: (\n            <span\n              {...css.attrs(\n                themeCustomizerStyles.swatch,\n                themeCustomizerStyles.swatchLarge,\n                swatchStyles.ring,\n                themeCustomizerDynamicStyles.fill(color),\n              )}\n            />\n          ),\n          label: messages.colorNames[scale],\n        };\n      }),\n    ];\n\n    return () => {\n      const radii: [keyof RadiusPresets, string][] = [\n        ['none', messages.radiusNone],\n        ['small', messages.radiusSmall],\n        ['medium', messages.radiusMedium],\n        ['large', messages.radiusLarge],\n      ];\n      const fonts: [keyof FontPresets, string][] = [\n        ['sans', messages.fontSans],\n        ['serifHeadings', messages.fontSerifHeadings],\n      ];\n      const motions: [keyof MotionPresets, string][] = [\n        ['none', messages.motionNone],\n        ['fast', messages.motionFast],\n        ['normal', messages.motionNormal],\n        ['slow', messages.motionSlow],\n      ];\n      const radius = settings.radius ?? 'medium';\n      const scaling = settings.scaling ?? 1;\n      const font = settings.font ?? 'sans';\n      const motion = settings.motion ?? 'normal';\n      const percent = (factor: number) => format.number(factor, { style: 'percent' });\n      const labelOf = <Key extends string>(list: [Key, string][], key: Key) =>\n        list.find(([value]) => value === key)?.[1];\n      const code = themeSettingsCode(\n        baseVariable(base.name.replace(/-custom$/, '')) ??\n          (base.colorScheme === 'dark' ? 'darkTheme' : 'lightTheme'),\n        settings,\n        base.colorScheme,\n      );\n      const customized = Object.values(settings).some((value) => value !== undefined);\n\n      return (\n        <div {...mergeAttrs<'div'>({ sx: themeCustomizerStyles.root }, rest)}>\n          {group(messages.groupColor, messages.groupColorHint, [\n            field(\n              messages.accent,\n              scaleText(settings.accent),\n              scaleOptions(ACCENT_SCALES),\n              settings.accent ?? '',\n              (next) => set('accent', next as ThemeSettings['accent'] | ''),\n              'swatches',\n            ),\n            field(\n              messages.neutral,\n              scaleText(settings.neutral),\n              scaleOptions(NEUTRAL_SCALES),\n              settings.neutral ?? '',\n              (next) => set('neutral', next as ThemeSettings['neutral'] | ''),\n              'swatches',\n            ),\n          ])}\n          {group(messages.groupShape, messages.groupShapeHint, [\n            field(\n              messages.radius,\n              labelOf(radii, radius),\n              radii.map(([value, label]) => ({\n                value,\n                label,\n                preview: (\n                  <span\n                    {...css.attrs(themeCustomizerStyles.corner, themeCustomizerCornerStyles[value])}\n                  />\n                ),\n              })),\n              radius,\n              (next) => set('radius', next as keyof RadiusPresets),\n            ),\n            field(\n              messages.scaling,\n              percent(scaling),\n              SCALINGS.map((factor) => ({\n                value: String(factor),\n                label: percent(factor),\n                preview: (\n                  <span\n                    {...css.attrs(\n                      themeCustomizerStyles.sample,\n                      themeCustomizerDynamicStyles.scale(factor),\n                    )}\n                  >\n                    Aa\n                  </span>\n                ),\n              })),\n              String(scaling),\n              (next) => set('scaling', Number(next)),\n            ),\n          ])}\n          {group(messages.groupType, messages.groupTypeHint, [\n            field(\n              messages.font,\n              labelOf(fonts, font),\n              fonts.map(([value, label]) => ({\n                value,\n                label,\n                preview: (\n                  <span\n                    {...css.attrs(\n                      themeCustomizerStyles.sample,\n                      value === 'sans' ? themeCustomizerStyles.sans : themeCustomizerStyles.serif,\n                    )}\n                  >\n                    Aa\n                  </span>\n                ),\n              })),\n              font,\n              (next) => set('font', next as keyof FontPresets),\n            ),\n            field(\n              messages.motion,\n              labelOf(motions, motion),\n              motions.map(([value, label]) => ({ value, label })),\n              motion,\n              (next) => set('motion', next as keyof MotionPresets),\n            ),\n          ])}\n          {group(messages.groupExport, messages.groupExportHint, [\n            <Alert\n              {...mergePartProps<AlertProps>({ title: messages.contrast }, propsContrast, {\n                tone: issues.length === 0 ? 'success' : 'warning',\n              })}\n            >\n              {issues.length === 0 ? (\n                messages.contrastOk(CONTRAST_PAIRS.length)\n              ) : (\n                <Flex direction=\"column\" gap=\"xs\">\n                  {issues.map((issue) => (\n                    <span key={`${issue.foreground}-${issue.background}`}>\n                      {messages.contrastIssue(\n                        `${issue.foreground} / ${issue.background}`,\n                        format.number(issue.ratio, {\n                          minimumFractionDigits: 2,\n                          maximumFractionDigits: 2,\n                        }),\n                        issue.minimum,\n                      )}\n                    </span>\n                  ))}\n                </Flex>\n              )}\n            </Alert>,\n            <CodeBlock\n              {...mergePartProps<CodeBlockProps>(\n                { title: messages.code, code, lang: 'ts' },\n                propsCode,\n              )}\n            />,\n            <Flex gap=\"sm\" wrap>\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'soft', icon: Download },\n                  propsDownload,\n                  { onClick: () => downloadFile('theme.ts', code, 'text/typescript') },\n                )}\n              >\n                {messages.download}\n              </Button>\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'soft', icon: FileBraces },\n                  propsDownloadTokens,\n                  { onClick: () => downloadTokens(customized) },\n                )}\n              >\n                {messages.downloadTokens}\n              </Button>\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'soft', tone: 'neutral', icon: RotateCcw, disabled: !customized },\n                  propsReset,\n                  { onClick: () => (settings = {}) },\n                )}\n              >\n                {messages.reset}\n              </Button>\n            </Flex>,\n          ])}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AAuBA,IAAa,wBAAwB,IAAI,OAAO;CAC9C,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;CAAM;CAC7D,OAAO;EACL,SAAS;EACT,eAAe;EACf,KAAK;EAEL,mBAAmB;GAAE,SAAS;GAAO,gBAAgB;EAAE;EACvD,uBAAuB;GAAE,SAAS;GAAO,gBAAgB;EAAE;EAC3D,uBAAuB;EACvB,uBAAuB;CACzB;CACA,aAAa;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;CAAM;CACpE,OAAO;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;CAAM;CAC9D,aAAa;EACX,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,KAAK;CACP;CAEA,SAAS;EACP,SAAS;EAET,OAAO;EACP,qBAAqB;CACvB;CACA,QAAQ;EAAE,gBAAgB;EAAc,UAAU;CAAE;CAEpD,UAAU,EAAE,qBAAqB,sCAAsC;CACvE,cAAc;EAAE,gBAAgB;EAAU,eAAe;CAAE;CAC3D,aAAa;EAAE,OAAO;EAAU,QAAQ;CAAS;CACjD,eAAe;EAAE,SAAS;EAAQ,YAAY;EAAU,KAAK;EAAO,UAAU;CAAE;CAChF,aAAa;EAAE,UAAU;EAAU,cAAc;EAAY,YAAY;CAAS;CAClF,QAAQ;EAAE,YAAY;EAAG,OAAO;EAAO,QAAQ;EAAO,cAAc;CAAQ;CAE5E,eAAe;EACb,WAAW;EACX,aAAa;EACb,aAAa;EACb,aAAa;CACf;CAEA,QAAQ;EACN,YAAY;EACZ,WAAW;EACX,OAAO;EACP,QAAQ;EACR,uBAAuB;EACvB,wBAAwB;EACxB,uBAAuB;EACvB,wBAAwB;EACxB,aAAa;CACf;CACA,QAAQ;EAAE,YAAY;EAAG,YAAY;EAAG,YAAY;CAAY;CAChE,MAAM,EAAE,YAAY,QAAQ;CAC5B,OAAO,EAAE,YAAY,SAAS;AAChC,CAAC;;AAGD,IAAa,8BAA8B,IAAI,OAAO;CACpD,MAAM,EAAE,wBAAwB,EAAE;CAClC,OAAO,EAAE,wBAAwB,QAAQ;CACzC,QAAQ,EAAE,wBAAwB,SAAS;CAC3C,OAAO,EAAE,wBAAwB,QAAQ;AAC3C,CAAC;;AAID,IAAa,+BAA+B,IAAI,OAAO;CACrD,OAAO,WAAmB,EAAE,iBAAiB,MAAM;CACnD,QAAQ,YAAoB,EAAE,UAAU,GAAG,OAAM,IAAK;AACxD,CAAC;;AAGD,SAAS,aAAa,MAAkC;CACtD,IAAI,EAAE,QAAQ,gBAAgB,OAAO,KAAA;CACrC,OAAO,GAAG,KAAK,QAAQ,WAAW,GAAG,WAAmB,OAAO,YAAY,CAAC,EAAC;AAC/E;AAEA,IAAM,WAAW;CAAC;CAAK;CAAM;CAAG;CAAM;AAAG;;;;AAczC,IAAa,kBAAkB,0BAC7B,QAAA,SAW4B;CAAA,MAAA,WAAAC,SAAA,QAAA,oBAVqB,CAAC,IAAC,KAAA,IAAA;CAAA,MAAA,OAAAC,aAAA,QAAA,MAAA;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,sBAAAA,aAAA,QAAA,qBAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAS9C,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,WAAW,YAAY,mBAAmB,uBAAuB;CACvE,MAAM,SAAS,UAAU;CACzB,IAAI,SAAMC,WAA+B,CAAA,CAAE;;CAG3C,SAAS,IAAqC,KAAU,OAAgC;EACtF,SAAA,QAAW;GAAE,GAAA,SAAA;IAAc,MAAM,UAAU,KAAK,KAAA,IAAY;EAAM;CACpE;CAGA,YACQ,CAAA,SAAA,OAAA,KAAA,KAAA,GACN,YAAY;EACV,MAAM,SAAS;EACf,MAAM,SAAS,eAAA,SAAkB,SAAS;EAC1C,IAAI;GACF,OAAA,QAAS,eAAe,UACtB,UAAU,QAAQ,OAAO,MAAsC,CACjE;EACF,QAAQ;GAEN,OAAA,QAAS,CAAA;EACX;CACF,GACA;EAAE,WAAW;EAAM,MAAM;EAAM,OAAO;CAAO,CAC/C;;CAGA,SAAS,eAAe,YAAqB;EAC3C,MAAM,OAAO,GAAG,KAAA,MAAK,KAAK,QAAQ,YAAY,EAAE,IAAI,aAAa,YAAY;EAC7E,MAAM,SAAS,oBAAoB,eAAA,SAAkB,SAAS,eAAe;EAC7E,aAAa,GAAG,KAAI,eAAgB,KAAK,UAAU,QAAQ,MAAM,CAAC,GAAG,kBAAkB;CACzF;CAEA,MAAM,SAAS,OAAe,MAAc,aAAoBC,YAAA,WACjD,WAAsB,EAAE,IAAI,sBAAsB,MAAM,GAAC,WAAA,KAAY,GAAC,CAAAA,YAAA,OACxE,IAAI,MAAM,sBAAsB,WAAW,GAAC,CAAAA,YAAAC,QAAA,EAAA,UAAA,WAAA,GAAA,QAC1B,KAAK,IAAL,QAAK,EAAA,eAAA,CAAL,KAAK,EAAA,CAAA,GAAAD,YAAAC,QAAA;EAAA,QAAA;EAAA,QAAA;CAAA,GAAA,QAE3B,IAAI,IAAJ,OAAI,EAAA,eAAA,CAAJ,IAAI,EAAA,CAAA,CAAA,CAAA,GAGR,QAAQ,CAAA;;CAKb,MAAM,SACJ,OACA,SACA,SACA,OACA,UACA,SAAuB,WAAM;EAAA,IAAA;EAAA,OAAAD,YAAA,OAEpB,IAAI,MAAM,sBAAsB,KAAK,GAAC,CAAAA,YAAA,OACpC,IAAI,MAAM,sBAAsB,WAAW,GAAC,CAAAA,YAAAC,QAAA;GAAA,QAAA;GAAA,UAAA;EAAA,GAAA,QAEhD,KAAK,IAAL,QAAK,EAAA,eAAA,CAAL,KAAK,EAAA,CAAA,GAAAD,YAAAC,QAAA;GAAA,QAAA;GAAA,QAAA;EAAA,GAAA,QAGL,OAAO,IAAP,UAAO,EAAA,eAAA,CAAP,OAAO,EAAA,CAAA,CAAA,CAAA,GAAAD,YAAA,aAAA;GAAA,UAIF;GAAK,mBACI;GAAQ,YAAA;GAAA,QAAA;GAAA,cAGb;GAAK,MACb,CACF,sBAAsB,SACtB,WAAW,cAAc,sBAAsB,QAAQ;EACxD,GAAA,QAAA,QAEA,QAAQ,KAAK,WAAMA,YAAA,YAAA;GAAA,OAEX,OAAO;GAAK,SACV,OAAO;GAAK,SACZ,OAAO;GAAK,MACf,CACF,sBAAsB,QACtB,WAAW,cAAc,sBAAsB,YAAY;EAC5D,GAAA,EAAA,eAAA,CAEA,WAAW,aAAUA,YAAAE,UAAA,MAAA,CAEjB,OAAO,SAAOF,YAAA,gBAAA,MAAA,EAAA,eAAA,CACE,OAAO,KAAK,EAAA,CAAA,CAAA,CAAA,IAAAA,YAAA,QAGrB,IAAI,MAAM,sBAAsB,aAAa,GAAC,CACrD,OAAO,SAAOA,YAAA,QACL,IAAI,MAAM,sBAAsB,WAAW,GAAC,CAAG,OAAO,KAAK,CAAA,CAAA,CAAA,CAExE,EAAA,CAAA,CAEJ,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA;CAAA;;CAMR,MAAM,aAAa,UACjB,QACI,GAAG,SAAS,WAAW,OAAM,GAAI,YAAY,OAAgB,KAAA,MAAK,WAAW,MAC7E,SAAS;;CAGf,MAAM,gBAAgB,WAA8D,CAClF;EACE,OAAO;EACP,SAAOA,YAAA,QAEC,IAAI,MACN,sBAAsB,QACtB,sBAAsB,aACtB,sBAAsB,aACxB,GAAC,IAAA;EAGL,OAAO,SAAS;EAChB,OAAO,SAAS;CAClB,GACA,GAAG,OAAO,KAAK,UAAU;EACvB,MAAM,QAAQ,YAAY,OAAgB,KAAA,MAAK,WAAW;EAC1D,OAAO;GACL,OAAO;GACP,OAAO,GAAG,SAAS,WAAW,OAAM,GAAI,MAAK,GAAI;GACjD,SAAOA,YAAA,QAEC,IAAI,MACN,sBAAsB,QACtB,sBAAsB,aACtB,aAAa,MACb,6BAA6B,KAAK,KAAK,CACzC,GAAC,IAAA;GAGL,OAAO,SAAS,WAAW;EAC7B;CACF,CAAC,CAAC;CAGJ,aAAa;EACX,MAAM,QAAyC;GAC7C,CAAC,QAAQ,SAAS,UAAU;GAC5B,CAAC,SAAS,SAAS,WAAW;GAC9B,CAAC,UAAU,SAAS,YAAY;GAChC,CAAC,SAAS,SAAS,WAAW;EAAC;EAEjC,MAAM,QAAuC,CAC3C,CAAC,QAAQ,SAAS,QAAQ,GAC1B,CAAC,iBAAiB,SAAS,iBAAiB,CAAC;EAE/C,MAAM,UAA2C;GAC/C,CAAC,QAAQ,SAAS,UAAU;GAC5B,CAAC,QAAQ,SAAS,UAAU;GAC5B,CAAC,UAAU,SAAS,YAAY;GAChC,CAAC,QAAQ,SAAS,UAAU;EAAC;EAE/B,MAAM,SAAS,SAAA,MAAS,UAAU;EAClC,MAAM,UAAU,SAAA,MAAS,WAAW;EACpC,MAAM,OAAO,SAAA,MAAS,QAAQ;EAC9B,MAAM,SAAS,SAAA,MAAS,UAAU;EAClC,MAAM,WAAW,WAAmB,OAAO,OAAO,QAAQ,EAAE,OAAO,UAAU,CAAC;EAC9E,MAAM,WAA+B,MAAuB,QAC1D,KAAK,MAAM,CAAC,WAAW,UAAU,GAAG,CAAC,GAAG;EAC1C,MAAM,OAAO,kBACX,aAAa,KAAA,MAAK,KAAK,QAAQ,YAAY,EAAE,CAAC,MAC3C,KAAA,MAAK,gBAAgB,SAAS,cAAc,eAAa,SAAA,OAE5D,KAAA,MAAK,WACP;EACA,MAAM,aAAa,OAAO,OAAM,SAAA,KAAS,CAAC,CAAC,MAAM,UAAU,UAAU,KAAA,CAAS;EAE9E,OAAAA,YAAA,OACW,WAAkB,EAAE,IAAI,sBAAsB,KAAK,GAAG,IAAI,GAAC;GACjE,MAAM,SAAS,YAAY,SAAS,gBAAgB,CACnD,MACE,SAAS,QACT,UAAU,SAAA,MAAS,MAAM,GACzB,aAAa,aAAa,GAC1B,SAAA,MAAS,UAAU,KAClB,SAAS,IAAI,UAAU,IAAoC,GAC5D,UACF,GACA,MACE,SAAS,SACT,UAAU,SAAA,MAAS,OAAO,GAC1B,aAAa,cAAc,GAC3B,SAAA,MAAS,WAAW,KACnB,SAAS,IAAI,WAAW,IAAqC,GAC9D,UACF,CAAC,CACF;GACA,MAAM,SAAS,YAAY,SAAS,gBAAgB,CACnD,MACE,SAAS,QACT,QAAQ,OAAO,MAAM,GACrB,MAAM,KAAK,CAAC,OAAO,YAAY;IAC7B;IACA;IACA,SAAOA,YAAA,QAEC,IAAI,MAAM,sBAAsB,QAAQ,4BAA4B,MAAM,GAAC,IAAA;GAGrF,EAAE,GACF,SACC,SAAS,IAAI,UAAU,IAA2B,CACrD,GACA,MACE,SAAS,SACT,QAAQ,OAAO,GACf,SAAS,KAAK,YAAY;IACxB,OAAO,OAAO,MAAM;IACpB,OAAO,QAAQ,MAAM;IACrB,SAAOA,YAAA,QAEC,IAAI,MACN,sBAAsB,QAAM,IAAA,KAC5B,6BAA6B,aAAK,CAAC,MAAM,CAAA,CAC3C,GAAC,CAAAG,gBAAA,IAAA,CAAA,CAAA;GAKP,EAAE,GACF,OAAO,OAAO,IACb,SAAS,IAAI,WAAW,OAAO,IAAI,CAAC,CACvC,CAAC,CACF;GACA,MAAM,SAAS,WAAW,SAAS,eAAe,CACjD,MACE,SAAS,MACT,QAAQ,OAAO,IAAI,GACnB,MAAM,KAAK,CAAC,OAAO,YAAY;IAC7B;IACA;IACA,SAAOH,YAAA,QAEC,IAAI,MACN,sBAAsB,QACtB,UAAU,SAAS,sBAAsB,OAAO,sBAAsB,KACxE,GAAC,CAAAG,gBAAA,IAAA,CAAA,CAAA;GAKP,EAAE,GACF,OACC,SAAS,IAAI,QAAQ,IAAyB,CACjD,GACA,MACE,SAAS,QACT,QAAQ,SAAS,MAAM,GACvB,QAAQ,KAAK,CAAC,OAAO,YAAY;IAAE;IAAO;GAAM,EAAE,GAClD,SACC,SAAS,IAAI,UAAU,IAA2B,CACrD,CAAC,CACF;GACA,MAAM,SAAS,aAAa,SAAS,iBAAiB;IAAAH,YAAA,OAAAI,WAE/C,eAA2B,EAAE,OAAO,SAAS,SAAS,GAAC,cAAA,OAAiB,EAC1E,MAAM,OAAA,MAAO,WAAW,IAAI,YAAY,UAC1C,CAAC,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;KAAA,eAAA,CAED,OAAA,MAAO,WAAW,IACjB,SAAS,WAAW,eAAe,MAAM,IAACJ,YAAA,MAAA;MAAA,aAAA;MAAA,OAAA;MAAA,OAAA;KAAA,GAAA;MAAA,eAAA,CAGvC,OAAA,MAAO,KAAK,UAAKA,YAAA,QAAA,EAAA,OACL,GAAG,MAAM,WAAU,GAAI,MAAM,aAAY,GAAA,CACjD,SAAS,cACR,GAAG,MAAM,WAAU,KAAM,MAAM,cAC/B,OAAO,OAAO,MAAM,OAAO;OACzB,uBAAuB;OACvB,uBAAuB;MACzB,CAAC,GACD,MAAM,OACR,CAAC,CAAA,CAEJ,CAAC;MAAA,SAAA;KAAA,CAAA,CAEL;KAAA,SAAA;IAAA,CAAA;IAAAA,YAAA,WAGG,eACF;KAAE,OAAO,SAAS;KAAM;KAAM,MAAM;IAAK,GAAC,UAAA,KAE5C,GAAC,IAAA;IAAAA,YAAA,MAAA;KAAA,OAAA;KAAA,QAAA;IAAA,GAAA,EAAA,eAAA;KAAAA,YAAA,QAAAI,WAIK,eACF;MAAE,SAAS;MAAQ,MAAM;KAAS,GAAC,cAAA,OAEnC,EAAE,eAAe,aAAa,YAAY,MAAM,iBAAiB,EAAE,CACrE,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;MAAA,eAAA,CAEA,SAAS,QAAQ;MAAA,SAAA;KAAA,CAAA;KAAAJ,YAAA,QAAAI,WAGd,eACF;MAAE,SAAS;MAAQ,MAAM;KAAW,GAAC,oBAAA,OAErC,EAAE,eAAe,eAAe,UAAU,EAAE,CAC9C,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;MAAA,eAAA,CAEA,SAAS,cAAc;MAAA,SAAA;KAAA,CAAA;KAAAJ,YAAA,QAAAI,WAGpB,eACF;MAAE,SAAS;MAAQ,MAAM;MAAW,MAAM;MAAW,UAAU,CAAC;KAAW,GAAC,WAAA,OAE5E,EAAE,eAAgB,SAAA,QAAW,CAAC,EAAG,CACnC,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;MAAA,eAAA,CAEA,SAAS,KAAK;MAAA,SAAA;KAAA,CAAA;IAAA,EAAA,CAAA;GAAA,CAGpB;EAAC,CAAA;CAGR;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/theme-customize/ThemeThumbnail.d.ts

@@ -0,0 +1,20 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+import { type Theme } from '../config/theme/theme';
+/** 未声明的属性落到外层 span 上 */
+export interface ThemeThumbnailProps extends PartProps<'span', 'aria-hidden'> {
+    /** 画哪一套主题 */
+    theme: Theme;
+    /** 卡片的部件属性 */
+    propsCard?: PartProps<'span'>;
+}
+/** ThemeThumbnail 的样式：root、card、title、line、button */
+export declare const themeThumbnailStyles: Readonly<{
+    button: css.CompiledStyles;
+    card: css.CompiledStyles;
+    line: css.CompiledStyles;
+    root: css.CompiledStyles;
+    title: css.CompiledStyles;
+}>;
+/** 主题缩略图：缩小的页面一角，颜色取自这套主题 */
+export declare const ThemeThumbnail: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ThemeThumbnailProps>;

package/dist/theme-customize/ThemeThumbnail.js

@@ -0,0 +1,82 @@
+import { mergeAttrs } from "../utils/props.js";
+import { themeAttrs } from "../config/theme/theme.js";
+import { swatchStyles } from "../utils/style/swatch-styles.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/theme-customize/ThemeThumbnail.tsx
+/** 未声明的属性落到外层 span 上 */
+/** ThemeThumbnail 的样式：root、card、title、line、button */
+var themeThumbnailStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "flex-end",
+		justifyContent: "flex-end",
+		flexShrink: 0,
+		width: "6em",
+		height: "3.75em",
+		padding: "0.5em 0 0 0.75em",
+		overflow: "hidden",
+		borderRadius: "_md",
+		backgroundColor: "_background"
+	},
+	card: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.3em",
+		width: "100%",
+		height: "100%",
+		padding: "0.5em",
+		borderStartStartRadius: "_sm",
+		borderTopWidth: "_xs",
+		borderInlineStartWidth: "_xs",
+		borderTopStyle: "solid",
+		borderInlineStartStyle: "solid",
+		borderColor: "_border",
+		backgroundColor: "_surfaceRaised"
+	},
+	title: {
+		width: "70%",
+		height: "0.35em",
+		borderRadius: "_full",
+		backgroundColor: "_text"
+	},
+	line: {
+		width: "90%",
+		height: "0.25em",
+		borderRadius: "_full",
+		backgroundColor: "_textMuted"
+	},
+	button: {
+		width: "45%",
+		height: "0.6em",
+		marginBlockStart: "auto",
+		borderRadius: "_sm",
+		backgroundColor: "_accent"
+	}
+});
+/** 主题缩略图：缩小的页面一角，颜色取自这套主题 */
+var ThemeThumbnail = /*#__PURE__*/ _component((_props, _ctx) => {
+	const theme = readonlyProp(_props, "theme");
+	const propsCard = readonlyProp(_props, "propsCard");
+	const rest = restProps(_props, _ctx, true);
+	return () => {
+		const { class: themeClass, style, "data-theme": name } = themeAttrs(theme.value);
+		return createVNode("span", mergeProps(mergeAttrs({
+			sx: [themeThumbnailStyles.root, swatchStyles.ring],
+			class: themeClass,
+			style
+		}, rest, { "aria-hidden": true }), { "data-theme": name }), [createVNode("span", mergeAttrs({ sx: themeThumbnailStyles.card }, propsCard.value), [
+			createVNode("span", css.attrs(themeThumbnailStyles.title), null),
+			createVNode("span", css.attrs(themeThumbnailStyles.line), null),
+			createVNode("span", css.attrs(themeThumbnailStyles.button), null)
+		])]);
+	};
+}, {
+	name: "ThemeThumbnail",
+	props: ["theme", "propsCard"]
+});
+//#endregion
+export { ThemeThumbnail, themeThumbnailStyles };
+
+//# sourceMappingURL=ThemeThumbnail.js.map

package/dist/theme-customize/ThemeThumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeThumbnail.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/theme-customize/ThemeThumbnail.tsx"],"sourcesContent":["/**\n * 主题缩略图（span）：用这套主题画一个缩小的页面：底色上一张卡片，卡片里标题、正文两行字和一个品牌色按钮。\n * 主题选择器、主题列表里代替主题名旁边的色点，一眼看出底色、表面、文字与品牌色的搭配。\n *\n *   <ThemeThumbnail theme={oceanTheme} />\n *\n * 颜色来自套在它上面的主题变量（themeAttrs），换主题不用重画；纯装饰，对读屏隐藏，名字由使用方写在旁边。\n * 尺寸用 em，随字号缩放。部件：Root（span）、Card（卡片）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { swatchStyles } from '../utils/style/swatch-styles';\nimport { themeAttrs, type Theme } from '../config/theme/theme';\n\n/** 未声明的属性落到外层 span 上 */\nexport interface ThemeThumbnailProps extends PartProps<'span', 'aria-hidden'> {\n  /** 画哪一套主题 */\n  theme: Theme;\n  /** 卡片的部件属性 */\n  propsCard?: PartProps<'span'>;\n}\n\n/** ThemeThumbnail 的样式：root、card、title、line、button */\nexport const themeThumbnailStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'flex-end',\n    justifyContent: 'flex-end',\n    flexShrink: 0,\n    width: '6em',\n    height: '3.75em',\n    padding: '0.5em 0 0 0.75em',\n    overflow: 'hidden',\n    borderRadius: '_md',\n    backgroundColor: '_background',\n  },\n  // 卡片从右下角探出来：像页面的一角\n  card: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '0.3em',\n    width: '100%',\n    height: '100%',\n    padding: '0.5em',\n    borderStartStartRadius: '_sm',\n    borderTopWidth: '_xs',\n    borderInlineStartWidth: '_xs',\n    borderTopStyle: 'solid',\n    borderInlineStartStyle: 'solid',\n    borderColor: '_border',\n    backgroundColor: '_surfaceRaised',\n  },\n  title: { width: '70%', height: '0.35em', borderRadius: '_full', backgroundColor: '_text' },\n  line: { width: '90%', height: '0.25em', borderRadius: '_full', backgroundColor: '_textMuted' },\n  button: {\n    width: '45%',\n    height: '0.6em',\n    marginBlockStart: 'auto',\n    borderRadius: '_sm',\n    backgroundColor: '_accent',\n  },\n});\n\n/** 主题缩略图：缩小的页面一角，颜色取自这套主题 */\nexport const ThemeThumbnail = _component(({ theme, propsCard, ...rest }: ThemeThumbnailProps) => {\n  return () => {\n    const { class: themeClass, style, 'data-theme': name } = themeAttrs(theme);\n    return (\n      <span\n        {...mergeAttrs<'span'>(\n          { sx: [themeThumbnailStyles.root, swatchStyles.ring], class: themeClass, style },\n          rest,\n          { 'aria-hidden': true },\n        )}\n        data-theme={name}\n      >\n        <span {...mergeAttrs<'span'>({ sx: themeThumbnailStyles.card }, propsCard)}>\n          <span {...css.attrs(themeThumbnailStyles.title)} />\n          <span {...css.attrs(themeThumbnailStyles.line)} />\n          <span {...css.attrs(themeThumbnailStyles.button)} />\n        </span>\n      </span>\n    );\n  };\n});\n"],"mappings":";;;;;;;;;AAwBA,IAAa,uBAAuB,IAAI,OAAO;CAC7C,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,cAAc;EACd,iBAAiB;CACnB;CAEA,MAAM;EACJ,SAAS;EACT,eAAe;EACf,KAAK;EACL,OAAO;EACP,QAAQ;EACR,SAAS;EACT,wBAAwB;EACxB,gBAAgB;EAChB,wBAAwB;EACxB,gBAAgB;EAChB,wBAAwB;EACxB,aAAa;EACb,iBAAiB;CACnB;CACA,OAAO;EAAE,OAAO;EAAO,QAAQ;EAAU,cAAc;EAAS,iBAAiB;CAAQ;CACzF,MAAM;EAAE,OAAO;EAAO,QAAQ;EAAU,cAAc;EAAS,iBAAiB;CAAa;CAC7F,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,kBAAkB;EAClB,cAAc;EACd,iBAAiB;CACnB;AACF,CAAC;;AAGD,IAAa,iBAAiB,0BAAW,QAAA,SAAwD;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAhC,OAAIC,UAAA,QAAA,MAAA,IAAA;CACnE,aAAa;EACX,MAAM,EAAE,OAAO,YAAY,OAAO,cAAc,SAAS,WAAU,MAAA,KAAM;EACzE,OAAAC,YAAA,QAAAC,WAEQ,WACF;GAAE,IAAI,CAAC,qBAAqB,MAAM,aAAa,IAAI;GAAG,OAAO;GAAY;EAAM,GAC/E,MACA,EAAE,eAAe,KAAK,CACxB,GAAC,EAAA,cACW,KAAI,CAAA,GAAA,CAAAD,YAAA,QAEN,WAAmB,EAAE,IAAI,qBAAqB,KAAK,GAAC,UAAA,KAAW,GAAC;GAAAA,YAAA,QAC9D,IAAI,MAAM,qBAAqB,KAAK,GAAC,IAAA;GAAAA,YAAA,QACrC,IAAI,MAAM,qBAAqB,IAAI,GAAC,IAAA;GAAAA,YAAA,QACpC,IAAI,MAAM,qBAAqB,MAAM,GAAC,IAAA;EAAA,CAAA,CAAA,CAAA;CAIxD;AACF,GAAC;CAAA,MAAA;CAAA,OAAA,CAAA,SAAA,WAAA;AAAA,CAAA"}

package/dist/theme-customize/contrast.d.ts

@@ -0,0 +1,27 @@
+/** 要检查的一对颜色 token：[前景, 背景, 最低对比度, 说明] */
+export type ContrastPair = readonly [
+    foreground: string,
+    background: string,
+    minimum: number,
+    label: string
+];
+/** 要检查的颜色组合 */
+export declare const CONTRAST_PAIRS: readonly ContrastPair[];
+/** 一处对比度不够的组合 */
+export interface ContrastIssue {
+    /** 前景 token */
+    foreground: string;
+    /** 背景 token */
+    background: string;
+    /** 实际对比度 */
+    ratio: number;
+    /** 要求的最低对比度 */
+    minimum: number;
+    /** 用途说明 */
+    label: string;
+}
+/**
+ * 按 CONTRAST_PAIRS 检查一套配色；read 读出 token 的取值（主题文件里的字面量，或页面上算出来的 CSS 变量）。
+ * 半透明的背景叠在 background（页面背景）上算
+ */
+export declare function checkContrast(read: (token: string) => string): ContrastIssue[];