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

package/dist/config/pinyin.js

@@ -0,0 +1,26 @@
+import { match } from "pinyin-pro";
+//#region src/config/pinyin.ts
+/**
+* 拼音匹配（子路径 `@zerodep-dev/vue-tsx-pro-ui/pinyin`；pinyin-pro 是可选的 peer 依赖，用到才安装）：
+* 选项过滤、命令面板、树的搜索除了按字面匹配，还认全拼、首字母与两者混写（“bj”“beijing”“beij”都能搜到“北京”）。
+*
+*   app.use(createUi({ textMatcher: createPinyinMatcher() }))
+*
+* 多音字任一读音都算（“会计”既能搜 kuaiji 也能搜 huiji）；拼音要对上连续的几个字（“hanpin”搜不到“汉语拼音”），
+* 不在中间跳字，免得结果太宽。只有输入里都是字母（可带空格）时才按拼音匹配，输入汉字时就是普通的字面匹配。
+* pinyin-pro 的字典约 300 KB：只有用到这个子路径的应用才打包它。
+*/
+/** 输入是拼音：只有字母与空格 */
+var PINYIN_QUERY = /^[a-z\s]+$/i;
+/** 拼音匹配器：交给 createUi / Provider 的 textMatcher */
+function createPinyinMatcher() {
+	return (text, query) => {
+		const input = query.trim();
+		if (!input || !PINYIN_QUERY.test(input) || !/[㐀-鿿]/.test(text)) return false;
+		return match(text, input.replace(/\s+/g, ""), { continuous: true }) != null;
+	};
+}
+//#endregion
+export { createPinyinMatcher };
+
+//# sourceMappingURL=pinyin.js.map

package/dist/config/pinyin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pinyin.js","names":[],"sources":["../../src/config/pinyin.ts"],"sourcesContent":["/**\n * 拼音匹配（子路径 `@zerodep-dev/vue-tsx-pro-ui/pinyin`；pinyin-pro 是可选的 peer 依赖，用到才安装）：\n * 选项过滤、命令面板、树的搜索除了按字面匹配，还认全拼、首字母与两者混写（“bj”“beijing”“beij”都能搜到“北京”）。\n *\n *   app.use(createUi({ textMatcher: createPinyinMatcher() }))\n *\n * 多音字任一读音都算（“会计”既能搜 kuaiji 也能搜 huiji）；拼音要对上连续的几个字（“hanpin”搜不到“汉语拼音”），\n * 不在中间跳字，免得结果太宽。只有输入里都是字母（可带空格）时才按拼音匹配，输入汉字时就是普通的字面匹配。\n * pinyin-pro 的字典约 300 KB：只有用到这个子路径的应用才打包它。\n */\nimport { match } from 'pinyin-pro';\nimport type { TextMatcher } from './context';\n\n/** 输入是拼音：只有字母与空格 */\nconst PINYIN_QUERY = /^[a-z\\s]+$/i;\n\n/** 拼音匹配器：交给 createUi / Provider 的 textMatcher */\nexport function createPinyinMatcher(): TextMatcher {\n  return (text, query) => {\n    const input = query.trim();\n    if (!input || !PINYIN_QUERY.test(input) || !/[㐀-鿿]/.test(text)) return false;\n    return match(text, input.replace(/\\s+/g, ''), { continuous: true }) != null;\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,IAAM,eAAe;;AAGrB,SAAgB,sBAAmC;CACjD,QAAQ,MAAM,UAAU;EACtB,MAAM,QAAQ,MAAM,KAAK;EACzB,IAAI,CAAC,SAAS,CAAC,aAAa,KAAK,KAAK,KAAK,CAAC,QAAQ,KAAK,IAAI,GAAG,OAAO;EACvE,OAAO,MAAM,MAAM,MAAM,QAAQ,QAAQ,EAAE,GAAG,EAAE,YAAY,KAAK,CAAC,KAAK;CACzE;AACF"}

package/dist/config/query-state.d.ts

@@ -0,0 +1,61 @@
+/**
+ * 放在地址查询参数里的状态（参考 nuqs 的 useQueryState、VueUse 的 useRouteQuery）：刷新、分享链接、后退回来都还在。
+ *
+ *   let view = _fromRef(useQueryState('view', 'all'));            ?view=mine
+ *   const filters = useQueryStates({ keyword: '', year: 2026 });  ?keyword=泵&year=2025
+ *
+ * - 返回的 Ref 是这一页的状态本身：改了立即生效，随后合并写进地址（replace，不加历史记录）；
+ *   地址变了（后退、点了带参数的链接）跟着变
+ * - 等于初始值的键从地址里删掉；地址里的值读不出（格式不对）时用初始值
+ * - 读写按初始值的类型（queryCodecs）：数字、布尔、字符串数组、对象（JSON），其余按字符串；初始值是 null 时按字符串，
+ *   别的类型（数字、日期）写 codec
+ * - 路由适配没有 query、replaceQuery（没配路由、服务端渲染）时就是普通的状态
+ */
+import { type Ref } from 'vue';
+/** 一个值在地址里的写法 */
+export interface QueryCodec<T> {
+    /** 从地址读回；读不出时返回 undefined，用初始值 */
+    parse(value: string | readonly string[]): T | undefined;
+    /** 写进地址的文字；数组写成同名的多个参数 */
+    serialize(value: T): string | readonly string[];
+}
+declare const first: (value: string | readonly string[]) => string;
+/** 常用的写法；useQueryState 按初始值的类型自动选 */
+export declare const queryCodecs: {
+    /** 原样 */
+    string: {
+        parse: typeof first;
+        serialize: (value: string | null) => string;
+    };
+    /** 数字；空着是 null */
+    number: {
+        parse(value: string | readonly string[]): number | null | undefined;
+        serialize: (value: number | null) => string;
+    };
+    /** true / false */
+    boolean: {
+        parse: (value: string | readonly string[]) => boolean | undefined;
+        serialize: StringConstructor;
+    };
+    /** 几个固定值之一（页签、类型）：别的值读不出，用初始值 */
+    oneOf: <const T extends string>(values: readonly T[]) => QueryCodec<T>;
+    /** 字符串数组：同名的多个参数（?tag=a&tag=b） */
+    strings: {
+        parse: (value: string | readonly string[]) => string[];
+        serialize: (value: readonly string[]) => readonly string[];
+    };
+    /** JSON */
+    json: {
+        parse(value: string | readonly string[]): unknown;
+        serialize: (value: unknown) => string;
+    };
+};
+/** 各键的写法；没写的按初始值的类型 */
+export type QueryCodecs<T> = {
+    [K in keyof T]?: QueryCodec<T[K]>;
+};
+/** 地址里的一个参数 ↔ 一个状态（在 setup 里调用；见文件开头） */
+export declare function useQueryState<T>(key: string, initial: T, codec?: QueryCodec<T>): Ref<T>;
+/** 地址里的几个参数 ↔ 一个对象，键名就是参数名（在 setup 里调用；见文件开头） */
+export declare function useQueryStates<T extends object>(initial: T, codecs?: QueryCodecs<T>): Ref<T>;
+export {};

package/dist/config/query-state.js

@@ -0,0 +1,113 @@
+import { useConfig } from "./context.js";
+import { sameValue } from "../utils/data/equality.js";
+import { shallowRef, watch } from "vue";
+//#region src/config/query-state.ts
+/**
+* 放在地址查询参数里的状态（参考 nuqs 的 useQueryState、VueUse 的 useRouteQuery）：刷新、分享链接、后退回来都还在。
+*
+*   let view = _fromRef(useQueryState('view', 'all'));            ?view=mine
+*   const filters = useQueryStates({ keyword: '', year: 2026 });  ?keyword=泵&year=2025
+*
+* - 返回的 Ref 是这一页的状态本身：改了立即生效，随后合并写进地址（replace，不加历史记录）；
+*   地址变了（后退、点了带参数的链接）跟着变
+* - 等于初始值的键从地址里删掉；地址里的值读不出（格式不对）时用初始值
+* - 读写按初始值的类型（queryCodecs）：数字、布尔、字符串数组、对象（JSON），其余按字符串；初始值是 null 时按字符串，
+*   别的类型（数字、日期）写 codec
+* - 路由适配没有 query、replaceQuery（没配路由、服务端渲染）时就是普通的状态
+*/
+var first = (value) => typeof value === "string" ? value : value[0] ?? "";
+/** 常用的写法；useQueryState 按初始值的类型自动选 */
+var queryCodecs = {
+	/** 原样 */
+	string: {
+		parse: first,
+		serialize: (value) => value ?? ""
+	},
+	/** 数字；空着是 null */
+	number: {
+		parse(value) {
+			const text = first(value);
+			if (text === "") return null;
+			const number = Number(text);
+			return Number.isFinite(number) ? number : void 0;
+		},
+		serialize: (value) => value == null ? "" : String(value)
+	},
+	/** true / false */
+	boolean: {
+		parse: (value) => first(value) === "true" ? true : first(value) === "false" ? false : void 0,
+		serialize: String
+	},
+	/** 几个固定值之一（页签、类型）：别的值读不出，用初始值 */
+	oneOf: (values) => ({
+		parse: (value) => values.find((item) => item === first(value)),
+		serialize: (value) => value
+	}),
+	/** 字符串数组：同名的多个参数（?tag=a&tag=b） */
+	strings: {
+		parse: (value) => typeof value === "string" ? [value] : [...value],
+		serialize: (value) => value
+	},
+	/** JSON */
+	json: {
+		parse(value) {
+			try {
+				return JSON.parse(first(value));
+			} catch {
+				return;
+			}
+		},
+		serialize: (value) => JSON.stringify(value)
+	}
+};
+/** 按初始值的类型选写法 */
+function codecOf(initial) {
+	return typeof initial === "number" ? queryCodecs.number : typeof initial === "boolean" ? queryCodecs.boolean : Array.isArray(initial) ? queryCodecs.strings : typeof initial === "object" && initial !== null ? queryCodecs.json : queryCodecs.string;
+}
+/** 一个参数：读回来（没有、读不出时是 initial），写进去（等于 initial 时删掉） */
+function param(key, initial, codec) {
+	return {
+		read: (query) => {
+			const text = query[key];
+			const parsed = text === void 0 ? void 0 : codec.parse(text);
+			return parsed === void 0 ? initial : parsed;
+		},
+		write: (value) => sameValue(value, initial) ? void 0 : codec.serialize(value)
+	};
+}
+/** 地址里的一个参数 ↔ 一个状态（在 setup 里调用；见文件开头） */
+function useQueryState(key, initial, codec = codecOf(initial)) {
+	const { read, write } = param(key, initial, codec);
+	return useQuerySync(initial, read, (value) => ({ [key]: write(value) }));
+}
+/** 地址里的几个参数 ↔ 一个对象，键名就是参数名（在 setup 里调用；见文件开头） */
+function useQueryStates(initial, codecs = {}) {
+	const params = Object.keys(initial).map((key) => ({
+		key,
+		...param(key, initial[key], codecs[key] ?? codecOf(initial[key]))
+	}));
+	return useQuerySync(initial, (query) => {
+		const value = { ...initial };
+		for (const { key, read } of params) value[key] = read(query);
+		return value;
+	}, (value) => Object.fromEntries(params.map(({ key, write }) => [key, write(value[key])])));
+}
+/** 状态以本地为准，与地址双向同步 */
+function useQuerySync(initial, read, write) {
+	const router = useConfig().router;
+	const query = router?.query;
+	const replaceQuery = router?.replaceQuery;
+	const state = shallowRef(query ? read(query()) : initial);
+	if (!query || !replaceQuery) return state;
+	watch(() => read(query()), (value) => {
+		if (!sameValue(value, state.value)) state.value = value;
+	});
+	watch(state, (value) => {
+		if (!sameValue(read(query()), value)) replaceQuery(write(value));
+	});
+	return state;
+}
+//#endregion
+export { queryCodecs, useQueryState, useQueryStates };
+
+//# sourceMappingURL=query-state.js.map

package/dist/config/query-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-state.js","names":[],"sources":["../../src/config/query-state.ts"],"sourcesContent":["/**\n * 放在地址查询参数里的状态（参考 nuqs 的 useQueryState、VueUse 的 useRouteQuery）：刷新、分享链接、后退回来都还在。\n *\n *   let view = _fromRef(useQueryState('view', 'all'));            ?view=mine\n *   const filters = useQueryStates({ keyword: '', year: 2026 });  ?keyword=泵&year=2025\n *\n * - 返回的 Ref 是这一页的状态本身：改了立即生效，随后合并写进地址（replace，不加历史记录）；\n *   地址变了（后退、点了带参数的链接）跟着变\n * - 等于初始值的键从地址里删掉；地址里的值读不出（格式不对）时用初始值\n * - 读写按初始值的类型（queryCodecs）：数字、布尔、字符串数组、对象（JSON），其余按字符串；初始值是 null 时按字符串，\n *   别的类型（数字、日期）写 codec\n * - 路由适配没有 query、replaceQuery（没配路由、服务端渲染）时就是普通的状态\n */\nimport { shallowRef, watch, type Ref } from 'vue';\nimport { sameValue } from '../utils/data/equality';\nimport { useConfig, type QueryPatch, type QueryValues } from './context';\n\n/** 一个值在地址里的写法 */\nexport interface QueryCodec<T> {\n  /** 从地址读回；读不出时返回 undefined，用初始值 */\n  parse(value: string | readonly string[]): T | undefined;\n  /** 写进地址的文字；数组写成同名的多个参数 */\n  serialize(value: T): string | readonly string[];\n}\n\nconst first = (value: string | readonly string[]) =>\n  typeof value === 'string' ? value : (value[0] ?? '');\n\n/** 常用的写法；useQueryState 按初始值的类型自动选 */\nexport const queryCodecs = {\n  /** 原样 */\n  string: {\n    parse: first,\n    serialize: (value) => value ?? '',\n  } satisfies QueryCodec<string | null>,\n  /** 数字；空着是 null */\n  number: {\n    parse(value) {\n      const text = first(value);\n      if (text === '') return null;\n      const number = Number(text);\n      return Number.isFinite(number) ? number : undefined;\n    },\n    serialize: (value) => (value == null ? '' : String(value)),\n  } satisfies QueryCodec<number | null>,\n  /** true / false */\n  boolean: {\n    parse: (value) =>\n      first(value) === 'true' ? true : first(value) === 'false' ? false : undefined,\n    serialize: String,\n  } satisfies QueryCodec<boolean>,\n  /** 几个固定值之一（页签、类型）：别的值读不出，用初始值 */\n  oneOf: <const T extends string>(values: readonly T[]): QueryCodec<T> => ({\n    parse: (value) => values.find((item) => item === first(value)),\n    serialize: (value) => value,\n  }),\n  /** 字符串数组：同名的多个参数（?tag=a&tag=b） */\n  strings: {\n    parse: (value) => (typeof value === 'string' ? [value] : [...value]),\n    serialize: (value) => value,\n  } satisfies QueryCodec<readonly string[]>,\n  /** JSON */\n  json: {\n    parse(value) {\n      try {\n        return JSON.parse(first(value)) as unknown;\n      } catch {\n        return undefined;\n      }\n    },\n    serialize: (value) => JSON.stringify(value),\n  } satisfies QueryCodec<unknown>,\n};\n\n/** 按初始值的类型选写法 */\nfunction codecOf<T>(initial: T): QueryCodec<T> {\n  const codec =\n    typeof initial === 'number'\n      ? queryCodecs.number\n      : typeof initial === 'boolean'\n        ? queryCodecs.boolean\n        : Array.isArray(initial)\n          ? queryCodecs.strings\n          : typeof initial === 'object' && initial !== null\n            ? queryCodecs.json\n            : queryCodecs.string;\n  return codec as QueryCodec<unknown> as QueryCodec<T>;\n}\n\n/** 各键的写法；没写的按初始值的类型 */\nexport type QueryCodecs<T> = { [K in keyof T]?: QueryCodec<T[K]> };\n\n/** 一个参数：读回来（没有、读不出时是 initial），写进去（等于 initial 时删掉） */\nfunction param<T>(key: string, initial: T, codec: QueryCodec<T>) {\n  return {\n    read: (query: QueryValues): T => {\n      const text = query[key];\n      const parsed = text === undefined ? undefined : codec.parse(text);\n      return parsed === undefined ? initial : parsed;\n    },\n    write: (value: T) => (sameValue(value, initial) ? undefined : codec.serialize(value)),\n  };\n}\n\n/** 地址里的一个参数 ↔ 一个状态（在 setup 里调用；见文件开头） */\nexport function useQueryState<T>(\n  key: string,\n  initial: T,\n  codec: QueryCodec<T> = codecOf(initial),\n): Ref<T> {\n  const { read, write } = param(key, initial, codec);\n  return useQuerySync(initial, read, (value) => ({ [key]: write(value) }));\n}\n\n/** 地址里的几个参数 ↔ 一个对象，键名就是参数名（在 setup 里调用；见文件开头） */\nexport function useQueryStates<T extends object>(initial: T, codecs: QueryCodecs<T> = {}): Ref<T> {\n  const params = (Object.keys(initial) as (keyof T & string)[]).map((key) => ({\n    key,\n    ...param(key, initial[key], codecs[key] ?? codecOf(initial[key])),\n  }));\n  return useQuerySync(\n    initial,\n    (query) => {\n      const value = { ...initial };\n      for (const { key, read } of params) value[key] = read(query);\n      return value;\n    },\n    (value) => Object.fromEntries(params.map(({ key, write }) => [key, write(value[key])])),\n  );\n}\n\n/** 状态以本地为准，与地址双向同步 */\nfunction useQuerySync<T>(\n  initial: T,\n  read: (query: QueryValues) => T,\n  write: (value: T) => QueryPatch,\n): Ref<T> {\n  const router = useConfig().router;\n  const query = router?.query;\n  const replaceQuery = router?.replaceQuery;\n  const state = shallowRef(query ? read(query()) : initial) as Ref<T>;\n  if (!query || !replaceQuery) return state;\n  // 地址变了：跟着变（自己写进去的那次读回来相等，不再写）\n  watch(\n    () => read(query()),\n    (value) => {\n      if (!sameValue(value, state.value)) state.value = value;\n    },\n  );\n  watch(state, (value) => {\n    if (!sameValue(read(query()), value)) replaceQuery(write(value));\n  });\n  return state;\n}\n"],"mappings":"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"}

package/dist/config/shiki.d.ts

@@ -0,0 +1,13 @@
+import type { LanguageInput } from 'shiki/types';
+import type { Highlighter } from './context';
+/** createShikiHighlighter 的选项 */
+export interface ShikiHighlighterOptions {
+    /**
+     * 可用的语言：语言名（含别名，如 ts）→ 加载语法的函数。不传时用 Shiki 自带的全部语言（第一次高亮时才加载这张表），
+     * 构建时每种语言单独成块、用到才下载。只用几种语言时传上（Shiki 推荐的细粒度写法），开发服务器不用处理两百多种语法：
+     * `{ ts: () => import('@shikijs/langs/typescript'), tsx: () => import('@shikijs/langs/tsx') }`
+     */
+    languages?: Record<string, () => Promise<LanguageInput>>;
+}
+/** 生成高亮器；Shiki 本身在第一次高亮时才创建，同一个高亮器里的语言只加载一次 */
+export declare function createShikiHighlighter(options?: ShikiHighlighterOptions): Highlighter;

package/dist/config/shiki.js

@@ -0,0 +1,97 @@
+import { colors } from "./theme/tokens.js";
+//#region src/config/shiki.ts
+var THEME = "vue-tsx-pro";
+/** 组件库的 Shiki 主题；createCssVariablesTheme 来自按需加载的 shiki/core */
+function theme(createCssVariablesTheme) {
+	const base = createCssVariablesTheme({
+		name: THEME,
+		variableDefaults: {
+			foreground: String(colors.text),
+			background: "transparent",
+			"token-comment": String(colors.codeComment),
+			"token-punctuation": String(colors.codeComment),
+			"token-keyword": String(colors.codeKeyword),
+			"token-link": String(colors.codeKeyword),
+			"token-string": String(colors.codeString),
+			"token-string-expression": String(colors.codeString),
+			"token-constant": String(colors.codeNumber),
+			"token-function": String(colors.codeFunction),
+			"token-parameter": String(colors.text),
+			"token-inserted": String(colors.codeString),
+			"token-deleted": String(colors.dangerText),
+			"token-changed": String(colors.codeNumber)
+		}
+	});
+	return {
+		...base,
+		tokenColors: [...base.tokenColors ?? [], ...extraTokenColors]
+	};
+}
+/** Shiki 的 CSS 变量主题不区分类型、标签名、属性名：追加几条规则，同样可以用 --shiki-token-* 覆盖 */
+var extraTokenColors = [
+	{
+		scope: [
+			"entity.name.type",
+			"entity.name.class",
+			"support.type",
+			"support.class",
+			"entity.other.inherited-class"
+		],
+		settings: { foreground: `var(--shiki-token-type, ${String(colors.codeType)})` }
+	},
+	{
+		scope: ["entity.name.tag", "support.class.component"],
+		settings: { foreground: `var(--shiki-token-tag, ${String(colors.codeTag)})` }
+	},
+	{
+		scope: ["entity.other.attribute-name"],
+		settings: { foreground: `var(--shiki-token-attribute, ${String(colors.codeAttribute)})` }
+	}
+];
+/** 生成高亮器；Shiki 本身在第一次高亮时才创建，同一个高亮器里的语言只加载一次 */
+function createShikiHighlighter(options = {}) {
+	let languages;
+	const languageTable = () => languages ??= options.languages ? Promise.resolve(options.languages) : import("shiki/langs").then((module) => module.bundledLanguages);
+	let core;
+	const loadCore = async () => {
+		const [shiki, engine] = await Promise.all([import("shiki/core"), import("shiki/engine/javascript")]);
+		return shiki.createHighlighterCore({
+			themes: [theme(shiki.createCssVariablesTheme)],
+			langs: [],
+			engine: engine.createJavaScriptRegexEngine({ forgiving: true })
+		});
+	};
+	const loading = /* @__PURE__ */ new Map();
+	/** 加载语言，返回能否高亮；不认识的语言返回 false */
+	const ensureLanguage = async (highlighter, lang) => {
+		if (highlighter.getLoadedLanguages().includes(lang)) return true;
+		const load = (await languageTable())[lang];
+		if (!load) return false;
+		let pending = loading.get(lang);
+		if (!pending) {
+			pending = load().then(async (grammar) => {
+				await highlighter.loadLanguage(grammar);
+				return true;
+			}, (error) => {
+				loading.delete(lang);
+				throw error;
+			});
+			loading.set(lang, pending);
+		}
+		return pending;
+	};
+	return async (code, lang) => {
+		const highlighter = await (core ??= loadCore());
+		const name = lang.toLowerCase();
+		const known = await ensureLanguage(highlighter, name);
+		return highlighter.codeToHtml(code, {
+			lang: known ? name : "text",
+			theme: THEME,
+			structure: "inline"
+		});
+	};
+}
+//#endregion
+export { createShikiHighlighter };
+
+//# sourceMappingURL=shiki.js.map

package/dist/config/shiki.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shiki.js","names":[],"sources":["../../src/config/shiki.ts"],"sourcesContent":["/**\n * Shiki 代码高亮器（子路径 `@zerodep-dev/vue-tsx-pro-ui/shiki`；shiki 是可选的 peer 依赖，用到才安装）：\n *\n *   app.use(createUi({ highlighter: createShikiHighlighter() }))\n *\n * - 正则引擎用 JavaScript 版（不加载 wasm），语法不完全支持的语言尽量高亮而不是报错\n * - 语言按需加载：第一次遇到某种语言时才下载它的语法；不认识的语言按纯文本显示\n * - Shiki 与正则引擎在第一次高亮时才加载：放在入口里的高亮器不会把它们带进首屏（文档站首屏因此少了约 240 KB）\n * - 颜色用 Shiki 的 CSS 变量主题（另加类型、标签名、属性名三类），默认值指向组件库的代码高亮 tokens（colors.code*）：\n *   切换主题、覆盖 tokens 都不需要重新高亮；使用方也可以用 --shiki-token-keyword 这类变量单独调整\n */\nimport type { HighlighterCore } from 'shiki/core';\nimport type { LanguageInput } from 'shiki/types';\nimport type { Highlighter } from './context';\nimport { colors } from './theme/tokens';\n\n/** createShikiHighlighter 的选项 */\nexport interface ShikiHighlighterOptions {\n  /**\n   * 可用的语言：语言名（含别名，如 ts）→ 加载语法的函数。不传时用 Shiki 自带的全部语言（第一次高亮时才加载这张表），\n   * 构建时每种语言单独成块、用到才下载。只用几种语言时传上（Shiki 推荐的细粒度写法），开发服务器不用处理两百多种语法：\n   * `{ ts: () => import('@shikijs/langs/typescript'), tsx: () => import('@shikijs/langs/tsx') }`\n   */\n  languages?: Record<string, () => Promise<LanguageInput>>;\n}\n\nconst THEME = 'vue-tsx-pro';\n\n/** 组件库的 Shiki 主题；createCssVariablesTheme 来自按需加载的 shiki/core */\nfunction theme(createCssVariablesTheme: typeof import('shiki/core').createCssVariablesTheme) {\n  // colors.x 在运行时是 var(--哈希) 字符串，作为 Shiki 变量的默认值：跟随当前主题\n  const base = createCssVariablesTheme({\n    name: THEME,\n    variableDefaults: {\n      foreground: String(colors.text),\n      background: 'transparent',\n      'token-comment': String(colors.codeComment),\n      'token-punctuation': String(colors.codeComment),\n      'token-keyword': String(colors.codeKeyword),\n      'token-link': String(colors.codeKeyword),\n      'token-string': String(colors.codeString),\n      'token-string-expression': String(colors.codeString),\n      'token-constant': String(colors.codeNumber),\n      'token-function': String(colors.codeFunction),\n      'token-parameter': String(colors.text),\n      'token-inserted': String(colors.codeString),\n      'token-deleted': String(colors.dangerText),\n      'token-changed': String(colors.codeNumber),\n    },\n  });\n  return { ...base, tokenColors: [...(base.tokenColors ?? []), ...extraTokenColors] };\n}\n\n/** Shiki 的 CSS 变量主题不区分类型、标签名、属性名：追加几条规则，同样可以用 --shiki-token-* 覆盖 */\nconst extraTokenColors = [\n  {\n    scope: [\n      'entity.name.type',\n      'entity.name.class',\n      'support.type',\n      'support.class',\n      'entity.other.inherited-class',\n    ],\n    settings: { foreground: `var(--shiki-token-type, ${String(colors.codeType)})` },\n  },\n  {\n    scope: ['entity.name.tag', 'support.class.component'],\n    settings: { foreground: `var(--shiki-token-tag, ${String(colors.codeTag)})` },\n  },\n  {\n    scope: ['entity.other.attribute-name'],\n    settings: { foreground: `var(--shiki-token-attribute, ${String(colors.codeAttribute)})` },\n  },\n];\n\n/** 生成高亮器；Shiki 本身在第一次高亮时才创建，同一个高亮器里的语言只加载一次 */\nexport function createShikiHighlighter(options: ShikiHighlighterOptions = {}): Highlighter {\n  // 全部语言的表有两百多项、每项一个动态导入：传了 languages 的应用不加载它\n  type LanguageTable = Record<string, () => Promise<LanguageInput>>;\n  let languages: Promise<LanguageTable> | undefined;\n  const languageTable = (): Promise<LanguageTable> =>\n    (languages ??= options.languages\n      ? Promise.resolve(options.languages)\n      : import('shiki/langs').then((module): LanguageTable => module.bundledLanguages));\n  let core: Promise<HighlighterCore> | undefined;\n  const loadCore = async () => {\n    const [shiki, engine] = await Promise.all([\n      import('shiki/core'),\n      import('shiki/engine/javascript'),\n    ]);\n    return shiki.createHighlighterCore({\n      themes: [theme(shiki.createCssVariablesTheme)],\n      langs: [],\n      engine: engine.createJavaScriptRegexEngine({ forgiving: true }),\n    });\n  };\n  const loading = new Map<string, Promise<boolean>>();\n\n  /** 加载语言，返回能否高亮；不认识的语言返回 false */\n  const ensureLanguage = async (highlighter: HighlighterCore, lang: string) => {\n    if (highlighter.getLoadedLanguages().includes(lang)) return true;\n    const load = (await languageTable())[lang];\n    if (!load) return false;\n    let pending = loading.get(lang);\n    if (!pending) {\n      pending = load().then(\n        async (grammar) => {\n          await highlighter.loadLanguage(grammar);\n          return true;\n        },\n        (error: unknown) => {\n          // 下载失败（如断网）不缓存，下次再试\n          loading.delete(lang);\n          throw error;\n        },\n      );\n      loading.set(lang, pending);\n    }\n    return pending;\n  };\n\n  return async (code, lang) => {\n    const highlighter = await (core ??= loadCore());\n    const name = lang.toLowerCase();\n    const known = await ensureLanguage(highlighter, name);\n    return highlighter.codeToHtml(code, {\n      lang: known ? name : 'text',\n      theme: THEME,\n      // 只要行内的 span 与 br，外层的 pre、code 由 CodeBlock 渲染\n      structure: 'inline',\n    });\n  };\n}\n"],"mappings":";;AA0BA,IAAM,QAAQ;;AAGd,SAAS,MAAM,yBAA8E;CAE3F,MAAM,OAAO,wBAAwB;EACnC,MAAM;EACN,kBAAkB;GAChB,YAAY,OAAO,OAAO,IAAI;GAC9B,YAAY;GACZ,iBAAiB,OAAO,OAAO,WAAW;GAC1C,qBAAqB,OAAO,OAAO,WAAW;GAC9C,iBAAiB,OAAO,OAAO,WAAW;GAC1C,cAAc,OAAO,OAAO,WAAW;GACvC,gBAAgB,OAAO,OAAO,UAAU;GACxC,2BAA2B,OAAO,OAAO,UAAU;GACnD,kBAAkB,OAAO,OAAO,UAAU;GAC1C,kBAAkB,OAAO,OAAO,YAAY;GAC5C,mBAAmB,OAAO,OAAO,IAAI;GACrC,kBAAkB,OAAO,OAAO,UAAU;GAC1C,iBAAiB,OAAO,OAAO,UAAU;GACzC,iBAAiB,OAAO,OAAO,UAAU;EAC3C;CACF,CAAC;CACD,OAAO;EAAE,GAAG;EAAM,aAAa,CAAC,GAAI,KAAK,eAAe,CAAC,GAAI,GAAG,gBAAgB;CAAE;AACpF;;AAGA,IAAM,mBAAmB;CACvB;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;EACF;EACA,UAAU,EAAE,YAAY,2BAA2B,OAAO,OAAO,QAAQ,EAAE,GAAG;CAChF;CACA;EACE,OAAO,CAAC,mBAAmB,yBAAyB;EACpD,UAAU,EAAE,YAAY,0BAA0B,OAAO,OAAO,OAAO,EAAE,GAAG;CAC9E;CACA;EACE,OAAO,CAAC,6BAA6B;EACrC,UAAU,EAAE,YAAY,gCAAgC,OAAO,OAAO,aAAa,EAAE,GAAG;CAC1F;AACF;;AAGA,SAAgB,uBAAuB,UAAmC,CAAC,GAAgB;CAGzF,IAAI;CACJ,MAAM,sBACH,cAAc,QAAQ,YACnB,QAAQ,QAAQ,QAAQ,SAAS,IACjC,OAAO,cAAc,CAAC,MAAM,WAA0B,OAAO,gBAAgB;CACnF,IAAI;CACJ,MAAM,WAAW,YAAY;EAC3B,MAAM,CAAC,OAAO,UAAU,MAAM,QAAQ,IAAI,CACxC,OAAO,eACP,OAAO,0BACT,CAAC;EACD,OAAO,MAAM,sBAAsB;GACjC,QAAQ,CAAC,MAAM,MAAM,uBAAuB,CAAC;GAC7C,OAAO,CAAC;GACR,QAAQ,OAAO,4BAA4B,EAAE,WAAW,KAAK,CAAC;EAChE,CAAC;CACH;CACA,MAAM,0BAAU,IAAI,IAA8B;;CAGlD,MAAM,iBAAiB,OAAO,aAA8B,SAAiB;EAC3E,IAAI,YAAY,mBAAmB,CAAC,CAAC,SAAS,IAAI,GAAG,OAAO;EAC5D,MAAM,QAAQ,MAAM,cAAc,EAAA,CAAG;EACrC,IAAI,CAAC,MAAM,OAAO;EAClB,IAAI,UAAU,QAAQ,IAAI,IAAI;EAC9B,IAAI,CAAC,SAAS;GACZ,UAAU,KAAK,CAAC,CAAC,KACf,OAAO,YAAY;IACjB,MAAM,YAAY,aAAa,OAAO;IACtC,OAAO;GACT,IACC,UAAmB;IAElB,QAAQ,OAAO,IAAI;IACnB,MAAM;GACR,CACF;GACA,QAAQ,IAAI,MAAM,OAAO;EAC3B;EACA,OAAO;CACT;CAEA,OAAO,OAAO,MAAM,SAAS;EAC3B,MAAM,cAAc,OAAO,SAAS,SAAS;EAC7C,MAAM,OAAO,KAAK,YAAY;EAC9B,MAAM,QAAQ,MAAM,eAAe,aAAa,IAAI;EACpD,OAAO,YAAY,WAAW,MAAM;GAClC,MAAM,QAAQ,OAAO;GACrB,OAAO;GAEP,WAAW;EACb,CAAC;CACH;AACF"}

package/dist/config/styles.d.ts

@@ -0,0 +1,108 @@
+/**
+ * 组件的主题定制：应用级 `createUi({ styles })`、局部 `<Provider styles>` 改组件的样式与档位，不必包一层组件
+ * （参考 MUI 主题的 styleOverrides / variants、Panda 的配方扩展）。
+ *
+ *   createUi({
+ *     styles: {
+ *       Button: {
+ *         base: { root: { letterSpacing: '0.02em' } },                  // 追加在组件自己的样式之后
+ *         variants: { size: { xl: { root: { fontSize: '_xxl' } } } },  // 新档位：先扩展 ButtonVariants 接口
+ *       },
+ *     },
+ *   })
+ *
+ * 合并顺序：组件的基础 < 档位 < 组合档位 < createUi 的定制 < 外层 Provider < 内层 Provider < 使用方的 sx。
+ * 用配方写的组件（css.recipe 给了 name）才认这里的定制；部件上的 data-scope / data-part 也来自配方（partAttrs）。
+ */
+import type { CompiledStyles, Recipe, RecipeExtension } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { BadgePart } from '../base/badge-styles';
+import type { AlertPart } from '../feedback/Alert';
+import type { ButtonPart } from '../base/button-core';
+import type { TabPart } from '../navigation/Tabs';
+import type { DataTablePart } from '../table/table-styles';
+import type { TablePart } from '../table/Table';
+import type { ChoicePart } from '../input/choice-styles';
+import type { InputPart } from '../input/control';
+import type { IndicatorPart } from '../base/Indicator';
+import type { LinkPart } from '../base/Link';
+import type { AvatarPart } from '../display/Avatar';
+import type { CardPart } from '../display/Card';
+import type { EmptyPart } from '../feedback/Empty';
+import type { ProgressPart } from '../feedback/Progress';
+import type { ResultPart } from '../feedback/Result';
+import type { DialogPart } from '../overlay/Dialog';
+import type { DrawerPart } from '../overlay/Drawer';
+/** 可以定制样式的组件与它们的部件；新的配方组件在这里登记 */
+export interface ComponentStyles {
+    /** Button、LinkButton、IconButton、IconLinkButton 共用 */
+    Button?: RecipeExtension<ButtonPart>;
+    /** Badge、Tag 共用 */
+    Badge?: RecipeExtension<BadgePart>;
+    /** Alert */
+    Alert?: RecipeExtension<AlertPart>;
+    /** Tabs 里的标签（Tab） */
+    Tab?: RecipeExtension<TabPart>;
+    /** Link */
+    Link?: RecipeExtension<LinkPart>;
+    /** Indicator */
+    Indicator?: RecipeExtension<IndicatorPart>;
+    /** Avatar（AvatarGroup 的“+N”也取它的外层样式） */
+    Avatar?: RecipeExtension<AvatarPart>;
+    /** Card */
+    Card?: RecipeExtension<CardPart>;
+    /** Progress（条形与环形） */
+    Progress?: RecipeExtension<ProgressPart>;
+    /** Empty */
+    Empty?: RecipeExtension<EmptyPart>;
+    /** Result */
+    Result?: RecipeExtension<ResultPart>;
+    /** Dialog、AlertDialog 共用：dialog 元素与标题行、标题、关闭按钮、说明、正文、页脚 */
+    Dialog?: RecipeExtension<DialogPart>;
+    /** Drawer：同 Dialog 的部件 */
+    Drawer?: RecipeExtension<DrawerPart>;
+    /** TextField、Textarea、NumberField、Select、Combobox、Cascader、TreeSelect、TagsInput、ColorField 与日期输入框的外壳共用 */
+    Input?: RecipeExtension<InputPart>;
+    /** Checkbox、Radio、Switch 与复选组、单选组共用 */
+    Choice?: RecipeExtension<ChoicePart>;
+    /** DataTable、TreeDataTable 共用 */
+    DataTable?: RecipeExtension<DataTablePart>;
+    /** 静态表格 Table 及其行、单元格 */
+    Table?: RecipeExtension<TablePart>;
+}
+/** 各层的定制：外层在前，组件按顺序交给配方（内层排在后面、盖过外层） */
+export type StyleLayers = {
+    readonly [Name in keyof ComponentStyles]?: readonly NonNullable<ComponentStyles[Name]>[];
+};
+/** 加上一层定制：按组件逐个追加在外层之后；这一层没写的组件沿用外层的数组（同一个对象，配方的缓存照样命中） */
+export declare function mergeStyles(outer: StyleLayers, inner: ComponentStyles | undefined): StyleLayers;
+/** 一个部件交给 mergeAttrs / mergeProps 的默认层：样式与部件标记 */
+export type PartLayer = Readonly<{
+    sx: readonly CompiledStyles[];
+    'data-scope': string;
+    'data-part': string;
+}>;
+/**
+ * 配方加上 createUi / Provider 里这个组件的定制：在 setup 里调用，返回的函数在渲染时传档位选择，
+ * 得到每个部件的默认层（样式 + data-scope / data-part），直接交给部件的合并：
+ *
+ *   const recipe = useRecipe(alertRecipe);
+ *   return () => {
+ *     const s = recipe({ variant });
+ *     return <div {...mergeAttrs<'div'>(s.root, rest)}><div {...mergeAttrs<'div'>(s.title, propsTitle)} /></div>;
+ *   };
+ *
+ * 根元素还要加别的样式时：`{ ...s.root, sx: [s.root.sx, 别的] }`
+ */
+export declare function useRecipe<P extends string, V>(recipe: Recipe<P, V>): (selection?: Parameters<Recipe<P, V>>[0]) => Readonly<Record<P, PartLayer>>;
+/** 部件的 data 属性 */
+export type PartAttrs = Readonly<{
+    'data-scope': string;
+    'data-part': string;
+}>;
+/**
+ * 部件的标记：`data-scope="button" data-part="icon"`（组件名转成连字符小写）。使用方的全局 CSS、测试
+ * 都能稳定地选中部件，不依赖生成的类名（同 Ark UI、Zag 的约定）。同一组合返回同一个对象
+ */
+export declare function partAttrs(recipe: {
+    readonly name: string | undefined;
+}, part: string): PartAttrs;

package/dist/config/styles.js

@@ -0,0 +1,59 @@
+import { useConfig } from "./context.js";
+//#region src/config/styles.ts
+/** 加上一层定制：按组件逐个追加在外层之后；这一层没写的组件沿用外层的数组（同一个对象，配方的缓存照样命中） */
+function mergeStyles(outer, inner) {
+	if (!inner) return outer;
+	const merged = { ...outer };
+	for (const [name, extension] of Object.entries(inner)) if (extension) merged[name] = [...merged[name] ?? [], extension];
+	return merged;
+}
+/** 配方算出的样式 → 各部件的默认层；同一组样式（配方按档位组合缓存）返回同一个对象，渲染里不新建 */
+var layerCache = /* @__PURE__ */ new WeakMap();
+/**
+* 配方加上 createUi / Provider 里这个组件的定制：在 setup 里调用，返回的函数在渲染时传档位选择，
+* 得到每个部件的默认层（样式 + data-scope / data-part），直接交给部件的合并：
+*
+*   const recipe = useRecipe(alertRecipe);
+*   return () => {
+*     const s = recipe({ variant });
+*     return <div {...mergeAttrs<'div'>(s.root, rest)}><div {...mergeAttrs<'div'>(s.title, propsTitle)} /></div>;
+*   };
+*
+* 根元素还要加别的样式时：`{ ...s.root, sx: [s.root.sx, 别的] }`
+*/
+function useRecipe(recipe) {
+	const config = useConfig();
+	const name = recipe.name;
+	return (selection) => {
+		const layers = name && config.styles[name];
+		const styles = layers?.length ? recipe(selection, ...layers) : recipe(selection);
+		let result = layerCache.get(styles);
+		if (!result) {
+			result = Object.fromEntries(recipe.parts.map((part) => [part, {
+				sx: styles[part],
+				...partAttrs(recipe, part)
+			}]));
+			layerCache.set(styles, result);
+		}
+		return result;
+	};
+}
+var partCache = /* @__PURE__ */ new Map();
+/**
+* 部件的标记：`data-scope="button" data-part="icon"`（组件名转成连字符小写）。使用方的全局 CSS、测试
+* 都能稳定地选中部件，不依赖生成的类名（同 Ark UI、Zag 的约定）。同一组合返回同一个对象
+*/
+function partAttrs(recipe, part) {
+	const scope = (recipe.name ?? "").replace(/[A-Z]/g, (c, index) => index ? `-${c.toLowerCase()}` : c.toLowerCase());
+	const key = `${scope}\0${part}`;
+	let attrs = partCache.get(key);
+	if (!attrs) partCache.set(key, attrs = Object.freeze({
+		"data-scope": scope,
+		"data-part": part
+	}));
+	return attrs;
+}
+//#endregion
+export { mergeStyles, partAttrs, useRecipe };
+
+//# sourceMappingURL=styles.js.map

package/dist/config/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"sources":["../../src/config/styles.ts"],"sourcesContent":["/**\n * 组件的主题定制：应用级 `createUi({ styles })`、局部 `<Provider styles>` 改组件的样式与档位，不必包一层组件\n * （参考 MUI 主题的 styleOverrides / variants、Panda 的配方扩展）。\n *\n *   createUi({\n *     styles: {\n *       Button: {\n *         base: { root: { letterSpacing: '0.02em' } },                  // 追加在组件自己的样式之后\n *         variants: { size: { xl: { root: { fontSize: '_xxl' } } } },  // 新档位：先扩展 ButtonVariants 接口\n *       },\n *     },\n *   })\n *\n * 合并顺序：组件的基础 < 档位 < 组合档位 < createUi 的定制 < 外层 Provider < 内层 Provider < 使用方的 sx。\n * 用配方写的组件（css.recipe 给了 name）才认这里的定制；部件上的 data-scope / data-part 也来自配方（partAttrs）。\n */\nimport type { CompiledStyles, Recipe, RecipeExtension } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useConfig } from './context';\nimport type { BadgePart } from '../base/badge-styles';\nimport type { AlertPart } from '../feedback/Alert';\nimport type { ButtonPart } from '../base/button-core';\nimport type { TabPart } from '../navigation/Tabs';\nimport type { DataTablePart } from '../table/table-styles';\nimport type { TablePart } from '../table/Table';\nimport type { ChoicePart } from '../input/choice-styles';\nimport type { InputPart } from '../input/control';\nimport type { IndicatorPart } from '../base/Indicator';\nimport type { LinkPart } from '../base/Link';\nimport type { AvatarPart } from '../display/Avatar';\nimport type { CardPart } from '../display/Card';\nimport type { EmptyPart } from '../feedback/Empty';\nimport type { ProgressPart } from '../feedback/Progress';\nimport type { ResultPart } from '../feedback/Result';\nimport type { DialogPart } from '../overlay/Dialog';\nimport type { DrawerPart } from '../overlay/Drawer';\n\n/** 可以定制样式的组件与它们的部件；新的配方组件在这里登记 */\nexport interface ComponentStyles {\n  /** Button、LinkButton、IconButton、IconLinkButton 共用 */\n  Button?: RecipeExtension<ButtonPart>;\n  /** Badge、Tag 共用 */\n  Badge?: RecipeExtension<BadgePart>;\n  /** Alert */\n  Alert?: RecipeExtension<AlertPart>;\n  /** Tabs 里的标签（Tab） */\n  Tab?: RecipeExtension<TabPart>;\n  /** Link */\n  Link?: RecipeExtension<LinkPart>;\n  /** Indicator */\n  Indicator?: RecipeExtension<IndicatorPart>;\n  /** Avatar（AvatarGroup 的“+N”也取它的外层样式） */\n  Avatar?: RecipeExtension<AvatarPart>;\n  /** Card */\n  Card?: RecipeExtension<CardPart>;\n  /** Progress（条形与环形） */\n  Progress?: RecipeExtension<ProgressPart>;\n  /** Empty */\n  Empty?: RecipeExtension<EmptyPart>;\n  /** Result */\n  Result?: RecipeExtension<ResultPart>;\n  /** Dialog、AlertDialog 共用：dialog 元素与标题行、标题、关闭按钮、说明、正文、页脚 */\n  Dialog?: RecipeExtension<DialogPart>;\n  /** Drawer：同 Dialog 的部件 */\n  Drawer?: RecipeExtension<DrawerPart>;\n  /** TextField、Textarea、NumberField、Select、Combobox、Cascader、TreeSelect、TagsInput、ColorField 与日期输入框的外壳共用 */\n  Input?: RecipeExtension<InputPart>;\n  /** Checkbox、Radio、Switch 与复选组、单选组共用 */\n  Choice?: RecipeExtension<ChoicePart>;\n  /** DataTable、TreeDataTable 共用 */\n  DataTable?: RecipeExtension<DataTablePart>;\n  /** 静态表格 Table 及其行、单元格 */\n  Table?: RecipeExtension<TablePart>;\n}\n\n/** 各层的定制：外层在前，组件按顺序交给配方（内层排在后面、盖过外层） */\nexport type StyleLayers = {\n  readonly [Name in keyof ComponentStyles]?: readonly NonNullable<ComponentStyles[Name]>[];\n};\n\n/** 加上一层定制：按组件逐个追加在外层之后；这一层没写的组件沿用外层的数组（同一个对象，配方的缓存照样命中） */\nexport function mergeStyles(outer: StyleLayers, inner: ComponentStyles | undefined): StyleLayers {\n  if (!inner) return outer;\n  const merged: Record<string, readonly unknown[] | undefined> = { ...outer };\n  for (const [name, extension] of Object.entries(inner)) {\n    if (extension) merged[name] = [...(merged[name] ?? []), extension];\n  }\n  return merged as StyleLayers;\n}\n\n/** 一个部件交给 mergeAttrs / mergeProps 的默认层：样式与部件标记 */\nexport type PartLayer = Readonly<{\n  sx: readonly CompiledStyles[];\n  'data-scope': string;\n  'data-part': string;\n}>;\n\n/** 配方算出的样式 → 各部件的默认层；同一组样式（配方按档位组合缓存）返回同一个对象，渲染里不新建 */\nconst layerCache = new WeakMap<object, Readonly<Record<string, PartLayer>>>();\n\n/**\n * 配方加上 createUi / Provider 里这个组件的定制：在 setup 里调用，返回的函数在渲染时传档位选择，\n * 得到每个部件的默认层（样式 + data-scope / data-part），直接交给部件的合并：\n *\n *   const recipe = useRecipe(alertRecipe);\n *   return () => {\n *     const s = recipe({ variant });\n *     return <div {...mergeAttrs<'div'>(s.root, rest)}><div {...mergeAttrs<'div'>(s.title, propsTitle)} /></div>;\n *   };\n *\n * 根元素还要加别的样式时：`{ ...s.root, sx: [s.root.sx, 别的] }`\n */\nexport function useRecipe<P extends string, V>(\n  recipe: Recipe<P, V>,\n): (selection?: Parameters<Recipe<P, V>>[0]) => Readonly<Record<P, PartLayer>> {\n  const config = useConfig();\n  const name = recipe.name as keyof ComponentStyles | undefined;\n  return (selection) => {\n    const layers = name && (config.styles[name] as readonly RecipeExtension<P>[] | undefined);\n    const styles = layers?.length ? recipe(selection, ...layers) : recipe(selection);\n    let result = layerCache.get(styles);\n    if (!result) {\n      result = Object.fromEntries(\n        recipe.parts.map((part) => [part, { sx: styles[part], ...partAttrs(recipe, part) }]),\n      );\n      layerCache.set(styles, result);\n    }\n    return result as Readonly<Record<P, PartLayer>>;\n  };\n}\n\n/** 部件的 data 属性 */\nexport type PartAttrs = Readonly<{ 'data-scope': string; 'data-part': string }>;\n\nconst partCache = new Map<string, PartAttrs>();\n\n/**\n * 部件的标记：`data-scope=\"button\" data-part=\"icon\"`（组件名转成连字符小写）。使用方的全局 CSS、测试\n * 都能稳定地选中部件，不依赖生成的类名（同 Ark UI、Zag 的约定）。同一组合返回同一个对象\n */\nexport function partAttrs(recipe: { readonly name: string | undefined }, part: string): PartAttrs {\n  const scope = (recipe.name ?? '').replace(/[A-Z]/g, (c, index: number) =>\n    index ? `-${c.toLowerCase()}` : c.toLowerCase(),\n  );\n  const key = `${scope}\\0${part}`;\n  let attrs = partCache.get(key);\n  if (!attrs)\n    partCache.set(key, (attrs = Object.freeze({ 'data-scope': scope, 'data-part': part })));\n  return attrs;\n}\n"],"mappings":";;;AAgFA,SAAgB,YAAY,OAAoB,OAAiD;CAC/F,IAAI,CAAC,OAAO,OAAO;CACnB,MAAM,SAAyD,EAAE,GAAG,MAAM;CAC1E,KAAK,MAAM,CAAC,MAAM,cAAc,OAAO,QAAQ,KAAK,GAClD,IAAI,WAAW,OAAO,QAAQ,CAAC,GAAI,OAAO,SAAS,CAAC,GAAI,SAAS;CAEnE,OAAO;AACT;;AAUA,IAAM,6BAAa,IAAI,QAAqD;;;;;;;;;;;;;AAc5E,SAAgB,UACd,QAC6E;CAC7E,MAAM,SAAS,UAAU;CACzB,MAAM,OAAO,OAAO;CACpB,QAAQ,cAAc;EACpB,MAAM,SAAS,QAAS,OAAO,OAAO;EACtC,MAAM,SAAS,QAAQ,SAAS,OAAO,WAAW,GAAG,MAAM,IAAI,OAAO,SAAS;EAC/E,IAAI,SAAS,WAAW,IAAI,MAAM;EAClC,IAAI,CAAC,QAAQ;GACX,SAAS,OAAO,YACd,OAAO,MAAM,KAAK,SAAS,CAAC,MAAM;IAAE,IAAI,OAAO;IAAO,GAAG,UAAU,QAAQ,IAAI;GAAE,CAAC,CAAC,CACrF;GACA,WAAW,IAAI,QAAQ,MAAM;EAC/B;EACA,OAAO;CACT;AACF;AAKA,IAAM,4BAAY,IAAI,IAAuB;;;;;AAM7C,SAAgB,UAAU,QAA+C,MAAyB;CAChG,MAAM,SAAS,OAAO,QAAQ,GAAA,CAAI,QAAQ,WAAW,GAAG,UACtD,QAAQ,IAAI,EAAE,YAAY,MAAM,EAAE,YAAY,CAChD;CACA,MAAM,MAAM,GAAG,MAAM,IAAI;CACzB,IAAI,QAAQ,UAAU,IAAI,GAAG;CAC7B,IAAI,CAAC,OACH,UAAU,IAAI,KAAM,QAAQ,OAAO,OAAO;EAAE,cAAc;EAAO,aAAa;CAAK,CAAC,CAAE;CACxF,OAAO;AACT"}

package/dist/config/theme/boot.d.ts

@@ -0,0 +1,97 @@
+import type { ColorSchemes } from './theme';
+/** 跟随系统的取值 */
+export declare const SYSTEM_THEME = "system";
+/** 记住主题选择的默认 localStorage 键（createThemePreference 与 themeBootScript 共用） */
+export declare const DEFAULT_THEME_STORAGE_KEY = "vue-tsx-pro-theme";
+/** themeBootScript 要知道的每套主题的取值：主题的颜色编译后是 CSS 变量，脚本在应用加载前拿不到 */
+export interface ThemeBootColors {
+    /** 页面背景色 */
+    background: string;
+    /** 文字色 */
+    text: string;
+    /** 浏览器配色方案 */
+    colorScheme: keyof ColorSchemes;
+}
+/**
+ * 防闪烁：生成一段内联到 HTML <head> 的脚本，应用加载前按记住的偏好设好页面底色、文字色与配色方案，
+ * 并写上 data-theme。应用挂载后 createUi 接手（paintDocument 时去掉这里写的行内颜色）。
+ */
+export declare function themeBootScript<Name extends string>(options: {
+    /** 各主题的取值 */
+    themes: Record<Name, ThemeBootColors>;
+    /** 跟随系统时用哪两套，默认 light、dark */
+    system?: {
+        light: Name;
+        dark: Name;
+    };
+    /** 与 createThemePreference 相同的存储键 */
+    storageKey?: string;
+    /** 没记过时的偏好，默认跟随系统 */
+    fallback?: Name | typeof SYSTEM_THEME;
+}): string;
+/**
+ * 内置主题（builtinThemes）的底色、文字色与配色方案，给 themeBootScript 用。
+ * 与主题文件里的 background、text 一致（pnpm themes:check 核对）
+ */
+export declare const builtinThemeBootColors: {
+    readonly light: {
+        readonly background: '#fcfcfd';
+        readonly text: '#1c2024';
+        readonly colorScheme: 'light';
+    };
+    readonly dark: {
+        readonly background: '#111113';
+        readonly text: '#edeef0';
+        readonly colorScheme: 'dark';
+    };
+    readonly paper: {
+        readonly background: '#f5efdf';
+        readonly text: '#3b2f20';
+        readonly colorScheme: 'light';
+    };
+    readonly midnight: {
+        readonly background: '#0d1321';
+        readonly text: '#eef2fa';
+        readonly colorScheme: 'dark';
+    };
+    readonly 'high-contrast': {
+        readonly background: '#ffffff';
+        readonly text: '#000000';
+        readonly colorScheme: 'light';
+    };
+    readonly ocean: {
+        readonly background: '#f7fdff';
+        readonly text: '#10222c';
+        readonly colorScheme: 'light';
+    };
+    readonly forest: {
+        readonly background: '#f9fef9';
+        readonly text: '#182318';
+        readonly colorScheme: 'light';
+    };
+    readonly lemon: {
+        readonly background: '#fefdf2';
+        readonly text: '#232010';
+        readonly colorScheme: 'light';
+    };
+    readonly sakura: {
+        readonly background: '#fffafc';
+        readonly text: '#281b20';
+        readonly colorScheme: 'light';
+    };
+    readonly festive: {
+        readonly background: '#fffaf6';
+        readonly text: '#2c1b13';
+        readonly colorScheme: 'light';
+    };
+    readonly cyberpunk: {
+        readonly background: '#110e20';
+        readonly text: '#ede9ff';
+        readonly colorScheme: 'dark';
+    };
+    readonly coffee: {
+        readonly background: '#180f0a';
+        readonly text: '#ffe9dc';
+        readonly colorScheme: 'dark';
+    };
+};