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

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

@@ -0,0 +1,101 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { Theme } from './theme';
+/**
+ * 纸张主题的颜色：米黄纸色的页面、深棕墨色的文字、墨蓝的品牌色。
+ * 中性色是自定的暖色 12 级（按 Radix 的用途约定：1–2 背景，3–5 填充，6–8 边框，11–12 文字），
+ * 提示色在 Radix 色阶上往暖、往暗调过，都在纸色上满足 4.5:1（scripts/themes/check.mjs 校验）
+ */
+export declare const paperColors: css.Theme<css.VarGroup<{
+    readonly background: "#fcfcfd";
+    readonly surface: "#fcfcfd";
+    readonly surfaceMuted: "#f9f9fb";
+    readonly surfaceRaised: "#fcfcfd";
+    readonly fill: "#f0f0f3";
+    readonly fillHover: "#e8e8ec";
+    readonly fillActive: "#e0e1e6";
+    readonly text: "#1c2024";
+    readonly textMuted: "#60646c";
+    readonly textPlaceholder: "#80838d";
+    readonly textDisabled: "#b9bbc6";
+    readonly borderMuted: "#d9d9e0";
+    readonly border: "#cdced6";
+    readonly borderStrong: "#b9bbc6";
+    readonly accent: "#3e63dd";
+    readonly accentHover: "#3358d4";
+    readonly accentContrast: "#ffffff";
+    readonly accentText: "#3a5bc7";
+    readonly accentSoft: "#edf2fe";
+    readonly accentSoftHover: "#e1e9ff";
+    readonly accentBorder: "#abbdf9";
+    readonly danger: "#ce2c31";
+    readonly dangerHover: "#b8272c";
+    readonly dangerContrast: "#ffffff";
+    readonly dangerText: "#b8272c";
+    readonly dangerSoft: "#feebec";
+    readonly dangerSoftHover: "#ffdbdc";
+    readonly dangerBorder: "#f4a9aa";
+    readonly successText: "#193b2d";
+    readonly successSoft: "#e6f6eb";
+    readonly successBorder: "#8eceaa";
+    readonly success: "#008751";
+    readonly successHover: "#007143";
+    readonly successContrast: "#ffffff";
+    readonly successSoftHover: "#d6f1df";
+    readonly warningText: "#4f3422";
+    readonly warningSoft: "#fff7c2";
+    readonly warningBorder: "#e9c162";
+    readonly warning: "#ffc53d";
+    readonly warningHover: "#ffcd5f";
+    readonly warningContrast: "#4f3422";
+    readonly warningSoftHover: "#ffee9c";
+    readonly infoText: "#113264";
+    readonly infoSoft: "#e6f4fe";
+    readonly infoBorder: "#8ec8f6";
+    readonly info: "#0073e0";
+    readonly infoHover: "#0060bd";
+    readonly infoContrast: "#ffffff";
+    readonly infoSoftHover: "#d5efff";
+    readonly inverseSurface: "#1c2024";
+    readonly inverseText: "#fcfcfd";
+    readonly focusRing: "#3e63dd";
+    readonly overlay: "rgba(0, 0, 0, 0.4)";
+    readonly selection: "#d2deff";
+    readonly highlight: "#ffee9c";
+    readonly surfaceTranslucent: "rgba(252, 252, 253, 0.8)";
+    readonly codeKeyword: "#3a5bc7";
+    readonly codeString: "#1c7a51";
+    readonly codeNumber: "#bb4500";
+    readonly codeFunction: "#6550b9";
+    readonly codeType: "#007590";
+    readonly codeComment: "#60646c";
+    readonly codeTag: "#cb1d63";
+    readonly codeAttribute: "#815e46";
+    readonly codeInserted: "#e6f6eb";
+    readonly codeDeleted: "#feebec";
+    readonly chart1: "#3e63dd";
+    readonly chart2: "#0d9b8a";
+    readonly chart3: "#ef5f00";
+    readonly chart4: "#e93d82";
+    readonly chart5: "#6e56cf";
+    readonly chart6: "#0797b9";
+    readonly chart7: "#3e9b4f";
+    readonly chart8: "#ab6400";
+}>>;
+/** 纸张主题的阴影：暖棕色，比亮色更轻，像纸放在桌面上 */
+export declare const paperShadows: css.Theme<css.VarGroup<{
+    readonly none: "none";
+    readonly xs: "0 1px 1px 0 #00005506, 0 2px 1px -1px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05)";
+    readonly sm: "0 2px 3px -2px #0000330f, 0 3px 12px -4px rgba(0, 0, 0, 0.1), 0 4px 16px -8px rgba(0, 0, 0, 0.1)";
+    readonly md: "0 8px 40px rgba(0, 0, 0, 0.05), 0 12px 32px -16px #0000330f";
+    readonly lg: "0 12px 60px rgba(0, 0, 0, 0.15), 0 12px 32px -16px #0009321f";
+    readonly xl: "0 12px 60px rgba(0, 0, 0, 0.15), 0 16px 64px #00005506, 0 16px 36px -20px #00062e32";
+}>>;
+/** 纸张主题的字体：标题用衬线，正文仍是无衬线（屏幕上长文更好读）；写全每个变量（嵌套在别的主题里时不继承外层的），正文与等宽与默认相同 */
+export declare const paperFonts: css.Theme<css.VarGroup<{
+    readonly sans: "system-ui, -apple-system, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Source Han Sans SC\", sans-serif";
+    readonly mono: "ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace";
+    readonly serif: "\"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", STSong, \"SimSun\", Georgia, serif";
+    readonly heading: "system-ui, -apple-system, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Source Han Sans SC\", sans-serif";
+}>>;
+/** 纸张主题：米黄纸色、深棕墨色文字、墨蓝品牌色、衬线标题；浏览器配色按亮色 */
+export declare const paperTheme: Theme;

package/dist/config/theme/paper.js

@@ -0,0 +1,117 @@
+import { colors, fonts, shadows } from "./tokens.js";
+import { defaultRadii } from "./light.js";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/config/theme/paper.ts
+/**
+* 纸张主题的颜色：米黄纸色的页面、深棕墨色的文字、墨蓝的品牌色。
+* 中性色是自定的暖色 12 级（按 Radix 的用途约定：1–2 背景，3–5 填充，6–8 边框，11–12 文字），
+* 提示色在 Radix 色阶上往暖、往暗调过，都在纸色上满足 4.5:1（scripts/themes/check.mjs 校验）
+*/
+var paperColors = css.createTheme(colors, {
+	background: "#f5efdf",
+	surface: "#faf5e8",
+	surfaceMuted: "#efe7d3",
+	surfaceRaised: "#fbf8ee",
+	fill: "#ebe2cb",
+	fillHover: "#e4d9be",
+	fillActive: "#dccfb0",
+	text: "#3b2f20",
+	textMuted: "#6b5a43",
+	textPlaceholder: "#76644a",
+	textDisabled: "#b3a383",
+	borderMuted: "#ddd0b2",
+	border: "#cfbf9b",
+	borderStrong: "#9c8762",
+	accent: "#2f4b8f",
+	accentHover: "#27407c",
+	accentContrast: "#ffffff",
+	accentText: "#2a4480",
+	accentSoft: "#e6e3d6",
+	accentSoftHover: "#dcdacd",
+	accentBorder: "#a3adc4",
+	danger: "#a8321f",
+	dangerHover: "#922a19",
+	dangerContrast: "#ffffff",
+	dangerText: "#962c1d",
+	dangerSoft: "#f3dccb",
+	dangerSoftHover: "#ecceb9",
+	dangerBorder: "#d39c84",
+	successText: "#2f4a17",
+	successSoft: "#e3e6c6",
+	successBorder: "#a9b67a",
+	success: "#2f4a17",
+	successHover: "#263d12",
+	successContrast: "#ffffff",
+	successSoftHover: "#d6dbb5",
+	warningText: "#5a3a12",
+	warningSoft: "#f3e2b0",
+	warningBorder: "#d4b265",
+	warning: "#5a3a12",
+	warningHover: "#4b2f0d",
+	warningContrast: "#ffffff",
+	warningSoftHover: "#ecd7a0",
+	infoText: "#1f3b63",
+	infoSoft: "#dfe3db",
+	infoBorder: "#9fb0c4",
+	info: "#1f3b63",
+	infoHover: "#183052",
+	infoContrast: "#ffffff",
+	infoSoftHover: "#d1d8d6",
+	inverseSurface: "#3b2f20",
+	inverseText: "#fbf7ec",
+	focusRing: "#2f4b8f",
+	overlay: "rgba(59, 47, 32, 0.35)",
+	selection: "#dcd3b4",
+	highlight: "#f2d98a",
+	surfaceTranslucent: "rgba(245, 239, 223, 0.82)",
+	codeKeyword: "#2a4480",
+	codeString: "#45601c",
+	codeNumber: "#8a4510",
+	codeFunction: "#6b3a6a",
+	codeType: "#235a5e",
+	codeComment: "#6b5a43",
+	codeTag: "#962c1d",
+	codeAttribute: "#764f14",
+	codeInserted: "#e3e6c6",
+	codeDeleted: "#f3dccb",
+	chart1: "#2f4b8f",
+	chart2: "#008573",
+	chart3: "#cc4e00",
+	chart4: "#e93d82",
+	chart5: "#6e56cf",
+	chart6: "#107d98",
+	chart7: "#3e9b4f",
+	chart8: "#ab6400"
+});
+/** 纸张主题的阴影：暖棕色，比亮色更轻，像纸放在桌面上 */
+var paperShadows = css.createTheme(shadows, {
+	none: "none",
+	xs: "0 1px 1px 0 rgba(80, 60, 30, 0.05), 0 1px 3px 0 rgba(80, 60, 30, 0.05)",
+	sm: "0 2px 3px -2px rgba(80, 60, 30, 0.08), 0 3px 12px -4px rgba(80, 60, 30, 0.1)",
+	md: "0 8px 32px rgba(80, 60, 30, 0.06), 0 12px 28px -16px rgba(80, 60, 30, 0.12)",
+	lg: "0 12px 48px rgba(80, 60, 30, 0.14), 0 12px 32px -16px rgba(80, 60, 30, 0.18)",
+	xl: "0 12px 60px rgba(80, 60, 30, 0.16), 0 16px 36px -20px rgba(80, 60, 30, 0.24)"
+});
+/** 纸张主题的字体：标题用衬线，正文仍是无衬线（屏幕上长文更好读）；写全每个变量（嵌套在别的主题里时不继承外层的），正文与等宽与默认相同 */
+var paperFonts = css.createTheme(fonts, {
+	sans: "system-ui, -apple-system, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Source Han Sans SC\", sans-serif",
+	mono: "ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace",
+	serif: "\"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", STSong, \"SimSun\", Georgia, serif",
+	heading: "\"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", STSong, \"SimSun\", Georgia, serif"
+});
+/** 纸张主题：米黄纸色、深棕墨色文字、墨蓝品牌色、衬线标题；浏览器配色按亮色 */
+var paperTheme = {
+	name: "paper",
+	colorScheme: "light",
+	styles: [
+		paperColors,
+		paperShadows,
+		paperFonts,
+		defaultRadii
+	],
+	overrides: {}
+};
+//#endregion
+export { paperColors, paperFonts, paperShadows, paperTheme };
+
+//# sourceMappingURL=paper.js.map

package/dist/config/theme/paper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paper.js","names":[],"sources":["../../../src/config/theme/paper.ts"],"sourcesContent":["import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { defaultRadii } from './light';\nimport type { Theme } from './theme';\nimport { colors, fonts, shadows } from './tokens';\n\n/**\n * 纸张主题的颜色：米黄纸色的页面、深棕墨色的文字、墨蓝的品牌色。\n * 中性色是自定的暖色 12 级（按 Radix 的用途约定：1–2 背景，3–5 填充，6–8 边框，11–12 文字），\n * 提示色在 Radix 色阶上往暖、往暗调过，都在纸色上满足 4.5:1（scripts/themes/check.mjs 校验）\n */\nexport const paperColors = css.createTheme(colors, {\n  background: '#f5efdf',\n  surface: '#faf5e8',\n  surfaceMuted: '#efe7d3',\n  surfaceRaised: '#fbf8ee',\n  fill: '#ebe2cb',\n  fillHover: '#e4d9be',\n  fillActive: '#dccfb0',\n  text: '#3b2f20',\n  textMuted: '#6b5a43',\n  textPlaceholder: '#76644a',\n  textDisabled: '#b3a383',\n  borderMuted: '#ddd0b2',\n  border: '#cfbf9b',\n  borderStrong: '#9c8762',\n  accent: '#2f4b8f',\n  accentHover: '#27407c',\n  accentContrast: '#ffffff',\n  accentText: '#2a4480',\n  accentSoft: '#e6e3d6',\n  accentSoftHover: '#dcdacd',\n  accentBorder: '#a3adc4',\n  danger: '#a8321f',\n  dangerHover: '#922a19',\n  dangerContrast: '#ffffff',\n  dangerText: '#962c1d',\n  dangerSoft: '#f3dccb',\n  dangerSoftHover: '#ecceb9',\n  dangerBorder: '#d39c84',\n  successText: '#2f4a17',\n  successSoft: '#e3e6c6',\n  successBorder: '#a9b67a',\n  success: '#2f4a17',\n  successHover: '#263d12',\n  successContrast: '#ffffff',\n  successSoftHover: '#d6dbb5',\n  warningText: '#5a3a12',\n  warningSoft: '#f3e2b0',\n  warningBorder: '#d4b265',\n  warning: '#5a3a12',\n  warningHover: '#4b2f0d',\n  warningContrast: '#ffffff',\n  warningSoftHover: '#ecd7a0',\n  infoText: '#1f3b63',\n  infoSoft: '#dfe3db',\n  infoBorder: '#9fb0c4',\n  info: '#1f3b63',\n  infoHover: '#183052',\n  infoContrast: '#ffffff',\n  infoSoftHover: '#d1d8d6',\n  inverseSurface: '#3b2f20',\n  inverseText: '#fbf7ec',\n  focusRing: '#2f4b8f',\n  overlay: 'rgba(59, 47, 32, 0.35)',\n  selection: '#dcd3b4',\n  highlight: '#f2d98a',\n  surfaceTranslucent: 'rgba(245, 239, 223, 0.82)',\n  codeKeyword: '#2a4480',\n  codeString: '#45601c',\n  codeNumber: '#8a4510',\n  codeFunction: '#6b3a6a',\n  codeType: '#235a5e',\n  codeComment: '#6b5a43',\n  codeTag: '#962c1d',\n  codeAttribute: '#764f14',\n  codeInserted: '#e3e6c6',\n  codeDeleted: '#f3dccb',\n  // 图表系列：纸色上取能到 3:1 的一级，偏冷的几种取 11 级\n  chart1: '#2f4b8f',\n  chart2: '#008573',\n  chart3: '#cc4e00',\n  chart4: '#e93d82',\n  chart5: '#6e56cf',\n  chart6: '#107d98',\n  chart7: '#3e9b4f',\n  chart8: '#ab6400',\n});\n\n/** 纸张主题的阴影：暖棕色，比亮色更轻，像纸放在桌面上 */\nexport const paperShadows = css.createTheme(shadows, {\n  none: 'none',\n  xs: '0 1px 1px 0 rgba(80, 60, 30, 0.05), 0 1px 3px 0 rgba(80, 60, 30, 0.05)',\n  sm: '0 2px 3px -2px rgba(80, 60, 30, 0.08), 0 3px 12px -4px rgba(80, 60, 30, 0.1)',\n  md: '0 8px 32px rgba(80, 60, 30, 0.06), 0 12px 28px -16px rgba(80, 60, 30, 0.12)',\n  lg: '0 12px 48px rgba(80, 60, 30, 0.14), 0 12px 32px -16px rgba(80, 60, 30, 0.18)',\n  xl: '0 12px 60px rgba(80, 60, 30, 0.16), 0 16px 36px -20px rgba(80, 60, 30, 0.24)',\n});\n\n/** 纸张主题的字体：标题用衬线，正文仍是无衬线（屏幕上长文更好读）；写全每个变量（嵌套在别的主题里时不继承外层的），正文与等宽与默认相同 */\nexport const paperFonts = css.createTheme(fonts, {\n  sans: 'system-ui, -apple-system, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Source Han Sans SC\", sans-serif',\n  mono: 'ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace',\n  serif: '\"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", STSong, \"SimSun\", Georgia, serif',\n  heading: '\"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", STSong, \"SimSun\", Georgia, serif',\n});\n\n/** 纸张主题：米黄纸色、深棕墨色文字、墨蓝品牌色、衬线标题；浏览器配色按亮色 */\nexport const paperTheme: Theme = {\n  name: 'paper',\n  colorScheme: 'light',\n  styles: [paperColors, paperShadows, paperFonts, defaultRadii],\n  overrides: {},\n};\n"],"mappings":";;;;;;;;;AAUA,IAAa,cAAc,IAAI,YAAY,QAAQ;CACjD,YAAY;CACZ,SAAS;CACT,cAAc;CACd,eAAe;CACf,MAAM;CACN,WAAW;CACX,YAAY;CACZ,MAAM;CACN,WAAW;CACX,iBAAiB;CACjB,cAAc;CACd,aAAa;CACb,QAAQ;CACR,cAAc;CACd,QAAQ;CACR,aAAa;CACb,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,iBAAiB;CACjB,cAAc;CACd,QAAQ;CACR,aAAa;CACb,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,iBAAiB;CACjB,cAAc;CACd,aAAa;CACb,aAAa;CACb,eAAe;CACf,SAAS;CACT,cAAc;CACd,iBAAiB;CACjB,kBAAkB;CAClB,aAAa;CACb,aAAa;CACb,eAAe;CACf,SAAS;CACT,cAAc;CACd,iBAAiB;CACjB,kBAAkB;CAClB,UAAU;CACV,UAAU;CACV,YAAY;CACZ,MAAM;CACN,WAAW;CACX,cAAc;CACd,eAAe;CACf,gBAAgB;CAChB,aAAa;CACb,WAAW;CACX,SAAS;CACT,WAAW;CACX,WAAW;CACX,oBAAoB;CACpB,aAAa;CACb,YAAY;CACZ,YAAY;CACZ,cAAc;CACd,UAAU;CACV,aAAa;CACb,SAAS;CACT,eAAe;CACf,cAAc;CACd,aAAa;CAEb,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;AACV,CAAC;;AAGD,IAAa,eAAe,IAAI,YAAY,SAAS;CACnD,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,CAAC;;AAGD,IAAa,aAAa,IAAI,YAAY,OAAO;CAC/C,MAAM;CACN,MAAM;CACN,OAAO;CACP,SAAS;AACX,CAAC;;AAGD,IAAa,aAAoB;CAC/B,MAAM;CACN,aAAa;CACb,QAAQ;EAAC;EAAa;EAAc;EAAY;CAAY;CAC5D,WAAW,CAAC;AACd"}

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

@@ -0,0 +1,34 @@
+import { type RevealOrigin } from '../../utils/motion/reveal';
+import { SYSTEM_THEME } from './boot';
+import type { Theme } from './theme';
+/** createThemePreference 的选项 */
+export interface ThemePreferenceOptions<Name extends string> {
+    /** 可选的主题：名字 → 主题 */
+    themes: Record<Name, Theme>;
+    /** 跟随系统时，亮色与暗色各用哪一套；默认 light、dark */
+    system?: {
+        light: NoInfer<Name>;
+        dark: NoInfer<Name>;
+    };
+    /** 记住选择的 localStorage 键，默认 'vue-tsx-pro-theme'；false 不记 */
+    storageKey?: string | false;
+    /** 没记过（或记的主题已经没有了）时的偏好，默认跟随系统 */
+    fallback?: NoInfer<Name> | typeof SYSTEM_THEME;
+}
+/** 主题偏好：当前的选择、解析出的主题，以及切换 */
+export interface ThemePreference<Name extends string> {
+    /** 可选的主题名，按 themes 里的顺序（ThemeSwitcher 据此列出选项） */
+    readonly names: readonly Name[];
+    /** 当前的选择：某一套主题，或 'system' */
+    readonly preference: Name | typeof SYSTEM_THEME;
+    /** 解析出的主题名（跟随系统时按系统明暗） */
+    readonly name: Name;
+    /** 解析出的主题，交给 createUi 或 Provider */
+    readonly theme: Theme;
+    /** 切换；给了 origin 时从那里圆形展开新主题（见 revealTransition） */
+    set(preference: Name | typeof SYSTEM_THEME, options?: {
+        origin?: RevealOrigin;
+    }): Promise<void>;
+}
+/** 创建主题偏好；在应用的生命周期里一直有效（跟随系统与其他标签页的监听不撤销） */
+export declare function createThemePreference<Name extends string>(options: ThemePreferenceOptions<Name>): ThemePreference<Name>;

package/dist/config/theme/preference.js

@@ -0,0 +1,67 @@
+import { usePrefersDark } from "../../utils/dom/media-query.js";
+import "./boot.js";
+import { revealTransition } from "../../utils/motion/reveal.js";
+import { computed, effectScope, shallowRef } from "vue";
+//#region src/config/theme/preference.ts
+/**
+* 主题偏好：用户选“跟随系统”或某一套主题，记在本地存储里，下次打开、其他标签页都沿用。
+* 在创建应用前调用，把 theme 交给 createUi：
+*
+*   const preference = createThemePreference({ themes: { light: lightTheme, dark: darkTheme, paper: paperTheme } });
+*   app.use(createUi({ theme: () => preference.theme, paintDocument: true }));
+*   preference.set('paper', { origin: { x: event.clientX, y: event.clientY } });   // 从点击处圆形展开
+*
+* 页面加载时先闪一下默认主题：在 HTML 的 <head> 里内联 themeBootScript(…) 生成的脚本，应用加载前就把底色设对（见 boot.ts）。
+*/
+/** 创建主题偏好；在应用的生命周期里一直有效（跟随系统与其他标签页的监听不撤销） */
+function createThemePreference(options) {
+	const names = Object.keys(options.themes);
+	const system = options.system ?? {
+		light: "light",
+		dark: "dark"
+	};
+	const storageKey = options.storageKey ?? "vue-tsx-pro-theme";
+	const fallback = options.fallback ?? "system";
+	const isChoice = (value) => value === "system" || names.includes(value);
+	const read = () => {
+		const stored = storageKey ? safeStorage()?.getItem(storageKey) : null;
+		return isChoice(stored) ? stored : fallback;
+	};
+	const preference = shallowRef(read());
+	const name = effectScope(true).run(() => {
+		const prefersDark = usePrefersDark();
+		return computed(() => preference.value === "system" ? prefersDark.value ? system.dark : system.light : preference.value);
+	});
+	if (storageKey && typeof window !== "undefined") window.addEventListener("storage", (event) => {
+		if (event.key === storageKey) preference.value = read();
+	});
+	return {
+		names,
+		get preference() {
+			return preference.value;
+		},
+		get name() {
+			return name.value;
+		},
+		get theme() {
+			return options.themes[name.value];
+		},
+		set(next, setOptions) {
+			if (!isChoice(next)) throw new Error(`没有名为 ${String(next)} 的主题`);
+			if (storageKey) safeStorage()?.setItem(storageKey, next);
+			return revealTransition(() => preference.value = next, setOptions?.origin);
+		}
+	};
+}
+/** 隐私模式、禁用存储时 localStorage 会抛错：当作没有存储 */
+function safeStorage() {
+	try {
+		return globalThis.localStorage;
+	} catch {
+		return;
+	}
+}
+//#endregion
+export { createThemePreference };
+
+//# sourceMappingURL=preference.js.map

package/dist/config/theme/preference.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preference.js","names":[],"sources":["../../../src/config/theme/preference.ts"],"sourcesContent":["/**\n * 主题偏好：用户选“跟随系统”或某一套主题，记在本地存储里，下次打开、其他标签页都沿用。\n * 在创建应用前调用，把 theme 交给 createUi：\n *\n *   const preference = createThemePreference({ themes: { light: lightTheme, dark: darkTheme, paper: paperTheme } });\n *   app.use(createUi({ theme: () => preference.theme, paintDocument: true }));\n *   preference.set('paper', { origin: { x: event.clientX, y: event.clientY } });   // 从点击处圆形展开\n *\n * 页面加载时先闪一下默认主题：在 HTML 的 <head> 里内联 themeBootScript(…) 生成的脚本，应用加载前就把底色设对（见 boot.ts）。\n */\nimport { computed, effectScope, shallowRef } from 'vue';\nimport { revealTransition, type RevealOrigin } from '../../utils/motion/reveal';\nimport { usePrefersDark } from '../../utils/dom/media-query';\nimport { DEFAULT_THEME_STORAGE_KEY, SYSTEM_THEME } from './boot';\nimport type { Theme } from './theme';\n\n/** createThemePreference 的选项 */\nexport interface ThemePreferenceOptions<Name extends string> {\n  /** 可选的主题：名字 → 主题 */\n  themes: Record<Name, Theme>;\n  /** 跟随系统时，亮色与暗色各用哪一套；默认 light、dark */\n  system?: { light: NoInfer<Name>; dark: NoInfer<Name> };\n  /** 记住选择的 localStorage 键，默认 'vue-tsx-pro-theme'；false 不记 */\n  storageKey?: string | false;\n  /** 没记过（或记的主题已经没有了）时的偏好，默认跟随系统 */\n  fallback?: NoInfer<Name> | typeof SYSTEM_THEME;\n}\n\n/** 主题偏好：当前的选择、解析出的主题，以及切换 */\nexport interface ThemePreference<Name extends string> {\n  /** 可选的主题名，按 themes 里的顺序（ThemeSwitcher 据此列出选项） */\n  readonly names: readonly Name[];\n  /** 当前的选择：某一套主题，或 'system' */\n  readonly preference: Name | typeof SYSTEM_THEME;\n  /** 解析出的主题名（跟随系统时按系统明暗） */\n  readonly name: Name;\n  /** 解析出的主题，交给 createUi 或 Provider */\n  readonly theme: Theme;\n  /** 切换；给了 origin 时从那里圆形展开新主题（见 revealTransition） */\n  set(preference: Name | typeof SYSTEM_THEME, options?: { origin?: RevealOrigin }): Promise<void>;\n}\n\n/** 创建主题偏好；在应用的生命周期里一直有效（跟随系统与其他标签页的监听不撤销） */\nexport function createThemePreference<Name extends string>(\n  options: ThemePreferenceOptions<Name>,\n): ThemePreference<Name> {\n  const names = Object.keys(options.themes) as Name[];\n  const system =\n    options.system ?? ({ light: 'light', dark: 'dark' } as { light: Name; dark: Name });\n  const storageKey = options.storageKey ?? DEFAULT_THEME_STORAGE_KEY;\n  const fallback = options.fallback ?? SYSTEM_THEME;\n  const isChoice = (value: unknown): value is Name | typeof SYSTEM_THEME =>\n    value === SYSTEM_THEME || names.includes(value as Name);\n\n  const read = () => {\n    const stored = storageKey ? safeStorage()?.getItem(storageKey) : null;\n    return isChoice(stored) ? stored : fallback;\n  };\n  const preference = shallowRef<Name | typeof SYSTEM_THEME>(read());\n\n  // 跟随系统的监听不属于哪个组件，放在自己的作用域里\n  const scope = effectScope(true);\n  const name = scope.run(() => {\n    const prefersDark = usePrefersDark();\n    return computed<Name>(() =>\n      preference.value === SYSTEM_THEME\n        ? prefersDark.value\n          ? system.dark\n          : system.light\n        : preference.value,\n    );\n  })!;\n\n  // 其他标签页改了偏好：跟着变\n  if (storageKey && typeof window !== 'undefined') {\n    window.addEventListener('storage', (event) => {\n      if (event.key === storageKey) preference.value = read();\n    });\n  }\n\n  return {\n    names,\n    get preference() {\n      return preference.value;\n    },\n    get name() {\n      return name.value;\n    },\n    get theme() {\n      return options.themes[name.value];\n    },\n    set(next, setOptions) {\n      if (!isChoice(next)) throw new Error(`没有名为 ${String(next)} 的主题`);\n      if (storageKey) safeStorage()?.setItem(storageKey, next);\n      return revealTransition(() => (preference.value = next), setOptions?.origin);\n    },\n  };\n}\n\n/** 隐私模式、禁用存储时 localStorage 会抛错：当作没有存储 */\nfunction safeStorage(): Storage | undefined {\n  try {\n    return globalThis.localStorage;\n  } catch {\n    return undefined;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA2CA,SAAgB,sBACd,SACuB;CACvB,MAAM,QAAQ,OAAO,KAAK,QAAQ,MAAM;CACxC,MAAM,SACJ,QAAQ,UAAW;EAAE,OAAO;EAAS,MAAM;CAAO;CACpD,MAAM,aAAa,QAAQ,cAAA;CAC3B,MAAM,WAAW,QAAQ,YAAA;CACzB,MAAM,YAAY,UAChB,UAAA,YAA0B,MAAM,SAAS,KAAa;CAExD,MAAM,aAAa;EACjB,MAAM,SAAS,aAAa,YAAY,CAAC,EAAE,QAAQ,UAAU,IAAI;EACjE,OAAO,SAAS,MAAM,IAAI,SAAS;CACrC;CACA,MAAM,aAAa,WAAuC,KAAK,CAAC;CAIhE,MAAM,OADQ,YAAY,IACb,CAAA,CAAM,UAAU;EAC3B,MAAM,cAAc,eAAe;EACnC,OAAO,eACL,WAAW,UAAA,WACP,YAAY,QACV,OAAO,OACP,OAAO,QACT,WAAW,KACjB;CACF,CAAC;CAGD,IAAI,cAAc,OAAO,WAAW,aAClC,OAAO,iBAAiB,YAAY,UAAU;EAC5C,IAAI,MAAM,QAAQ,YAAY,WAAW,QAAQ,KAAK;CACxD,CAAC;CAGH,OAAO;EACL;EACA,IAAI,aAAa;GACf,OAAO,WAAW;EACpB;EACA,IAAI,OAAO;GACT,OAAO,KAAK;EACd;EACA,IAAI,QAAQ;GACV,OAAO,QAAQ,OAAO,KAAK;EAC7B;EACA,IAAI,MAAM,YAAY;GACpB,IAAI,CAAC,SAAS,IAAI,GAAG,MAAM,IAAI,MAAM,QAAQ,OAAO,IAAI,EAAE,KAAK;GAC/D,IAAI,YAAY,YAAY,CAAC,EAAE,QAAQ,YAAY,IAAI;GACvD,OAAO,uBAAwB,WAAW,QAAQ,MAAO,YAAY,MAAM;EAC7E;CACF;AACF;;AAGA,SAAS,cAAmC;CAC1C,IAAI;EACF,OAAO,WAAW;CACpB,QAAQ;EACN;CACF;AACF"}

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

@@ -0,0 +1,103 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { Theme } from './theme';
+/**
+ * 樱花主题的颜色：淡粉的页面、樱粉的品牌色。中性色按 slate 各级亮度换成粉色相（oklch 355°），品牌色取 Radix pink 色阶，实色加深到白字够对比度。
+ * 先按风格取色，再按对比度要求调深浅（pnpm themes:check 校验）
+ */
+export declare const sakuraColors: css.Theme<css.VarGroup<{
+    readonly background: "#fcfcfd";
+    readonly surface: "#fcfcfd";
+    readonly surfaceMuted: "#f9f9fb";
+    readonly surfaceRaised: "#fcfcfd";
+    readonly fill: "#f0f0f3";
+    readonly fillHover: "#e8e8ec";
+    readonly fillActive: "#e0e1e6";
+    readonly text: "#1c2024";
+    readonly textMuted: "#60646c";
+    readonly textPlaceholder: "#80838d";
+    readonly textDisabled: "#b9bbc6";
+    readonly borderMuted: "#d9d9e0";
+    readonly border: "#cdced6";
+    readonly borderStrong: "#b9bbc6";
+    readonly accent: "#3e63dd";
+    readonly accentHover: "#3358d4";
+    readonly accentContrast: "#ffffff";
+    readonly accentText: "#3a5bc7";
+    readonly accentSoft: "#edf2fe";
+    readonly accentSoftHover: "#e1e9ff";
+    readonly accentBorder: "#abbdf9";
+    readonly danger: "#ce2c31";
+    readonly dangerHover: "#b8272c";
+    readonly dangerContrast: "#ffffff";
+    readonly dangerText: "#b8272c";
+    readonly dangerSoft: "#feebec";
+    readonly dangerSoftHover: "#ffdbdc";
+    readonly dangerBorder: "#f4a9aa";
+    readonly successText: "#193b2d";
+    readonly successSoft: "#e6f6eb";
+    readonly successBorder: "#8eceaa";
+    readonly success: "#008751";
+    readonly successHover: "#007143";
+    readonly successContrast: "#ffffff";
+    readonly successSoftHover: "#d6f1df";
+    readonly warningText: "#4f3422";
+    readonly warningSoft: "#fff7c2";
+    readonly warningBorder: "#e9c162";
+    readonly warning: "#ffc53d";
+    readonly warningHover: "#ffcd5f";
+    readonly warningContrast: "#4f3422";
+    readonly warningSoftHover: "#ffee9c";
+    readonly infoText: "#113264";
+    readonly infoSoft: "#e6f4fe";
+    readonly infoBorder: "#8ec8f6";
+    readonly info: "#0073e0";
+    readonly infoHover: "#0060bd";
+    readonly infoContrast: "#ffffff";
+    readonly infoSoftHover: "#d5efff";
+    readonly inverseSurface: "#1c2024";
+    readonly inverseText: "#fcfcfd";
+    readonly focusRing: "#3e63dd";
+    readonly overlay: "rgba(0, 0, 0, 0.4)";
+    readonly selection: "#d2deff";
+    readonly highlight: "#ffee9c";
+    readonly surfaceTranslucent: "rgba(252, 252, 253, 0.8)";
+    readonly codeKeyword: "#3a5bc7";
+    readonly codeString: "#1c7a51";
+    readonly codeNumber: "#bb4500";
+    readonly codeFunction: "#6550b9";
+    readonly codeType: "#007590";
+    readonly codeComment: "#60646c";
+    readonly codeTag: "#cb1d63";
+    readonly codeAttribute: "#815e46";
+    readonly codeInserted: "#e6f6eb";
+    readonly codeDeleted: "#feebec";
+    readonly chart1: "#3e63dd";
+    readonly chart2: "#0d9b8a";
+    readonly chart3: "#ef5f00";
+    readonly chart4: "#e93d82";
+    readonly chart5: "#6e56cf";
+    readonly chart6: "#0797b9";
+    readonly chart7: "#3e9b4f";
+    readonly chart8: "#ab6400";
+}>>;
+/** 樱花主题的阴影：带主色调的投影 */
+export declare const sakuraShadows: css.Theme<css.VarGroup<{
+    readonly none: "none";
+    readonly xs: "0 1px 1px 0 #00005506, 0 2px 1px -1px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05)";
+    readonly sm: "0 2px 3px -2px #0000330f, 0 3px 12px -4px rgba(0, 0, 0, 0.1), 0 4px 16px -8px rgba(0, 0, 0, 0.1)";
+    readonly md: "0 8px 40px rgba(0, 0, 0, 0.05), 0 12px 32px -16px #0000330f";
+    readonly lg: "0 12px 60px rgba(0, 0, 0, 0.15), 0 12px 32px -16px #0009321f";
+    readonly xl: "0 12px 60px rgba(0, 0, 0, 0.15), 0 16px 64px #00005506, 0 16px 36px -20px #00062e32";
+}>>;
+/** 樱花主题的圆角：比默认更圆 */
+export declare const sakuraRadii: css.Theme<css.VarGroup<{
+    readonly none: "0";
+    readonly xs: "0.15em";
+    readonly sm: "0.25em";
+    readonly md: "0.4em";
+    readonly lg: "0.7em";
+    readonly xl: "1em";
+    readonly full: "9999px";
+}>>;
+/** 樱花主题：淡粉底、樱粉品牌色、圆润的圆角；浏览器配色按亮色 */
+export declare const sakuraTheme: Theme;

package/dist/config/theme/sakura.js

@@ -0,0 +1,119 @@
+import { colors, radii, shadows } from "./tokens.js";
+import { defaultFonts } from "./light.js";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/config/theme/sakura.ts
+/**
+* 樱花主题的颜色：淡粉的页面、樱粉的品牌色。中性色按 slate 各级亮度换成粉色相（oklch 355°），品牌色取 Radix pink 色阶，实色加深到白字够对比度。
+* 先按风格取色，再按对比度要求调深浅（pnpm themes:check 校验）
+*/
+var sakuraColors = css.createTheme(colors, {
+	background: "#fffafc",
+	surface: "#fffafc",
+	surfaceMuted: "#fef7f9",
+	surfaceRaised: "#fffafc",
+	fill: "#f9edf1",
+	fillHover: "#f1e5e9",
+	fillActive: "#eadee2",
+	text: "#281b20",
+	textMuted: "#6f5f64",
+	textPlaceholder: "#8f7e84",
+	textDisabled: "#c4b8bc",
+	borderMuted: "#e2d6da",
+	border: "#d7cbcf",
+	borderStrong: "#c4b8bc",
+	accent: "#cd3797",
+	accentHover: "#ad2d7f",
+	accentContrast: "#ffffff",
+	accentText: "#b91e82",
+	accentSoft: "#fee9f5",
+	accentSoftHover: "#fbdcef",
+	accentBorder: "#e7acd0",
+	danger: "#d83a3f",
+	dangerHover: "#b62f34",
+	dangerContrast: "#ffffff",
+	dangerText: "#c31e28",
+	dangerSoft: "#feebec",
+	dangerSoftHover: "#ffdbdc",
+	dangerBorder: "#f4a9aa",
+	successText: "#193b2d",
+	successSoft: "#e6f6eb",
+	successBorder: "#8eceaa",
+	success: "#008751",
+	successHover: "#007143",
+	successContrast: "#ffffff",
+	successSoftHover: "#d6f1df",
+	warningText: "#4f3422",
+	warningSoft: "#fff7c2",
+	warningBorder: "#e9c162",
+	warning: "#ffc53d",
+	warningHover: "#ffcd5f",
+	warningContrast: "#4f3422",
+	warningSoftHover: "#ffee9c",
+	infoText: "#113264",
+	infoSoft: "#e6f4fe",
+	infoBorder: "#8ec8f6",
+	info: "#0073e0",
+	infoHover: "#0060bd",
+	infoContrast: "#ffffff",
+	infoSoftHover: "#d5efff",
+	inverseSurface: "#281b20",
+	inverseText: "#fffafc",
+	focusRing: "#cd3797",
+	overlay: "rgba(40, 27, 32, 0.4)",
+	selection: "#f6cee7",
+	highlight: "#ffee9c",
+	surfaceTranslucent: "rgba(255, 250, 252, 0.8)",
+	codeKeyword: "#b91e82",
+	codeString: "#147a51",
+	codeNumber: "#bf4100",
+	codeFunction: "#6550b9",
+	codeType: "#007590",
+	codeComment: "#6f5f64",
+	codeTag: "#cb1d63",
+	codeAttribute: "#815e46",
+	codeInserted: "#e6f6eb",
+	codeDeleted: "#feebec",
+	chart1: "#cd3797",
+	chart2: "#a144af",
+	chart3: "#df3478",
+	chart4: "#654dc4",
+	chart5: "#0d9b8a",
+	chart6: "#ef5f00",
+	chart7: "#309dba",
+	chart8: "#3e9b4f"
+});
+/** 樱花主题的阴影：带主色调的投影 */
+var sakuraShadows = css.createTheme(shadows, {
+	none: "none",
+	xs: "0 1px 1px 0 rgba(90, 20, 50, 0.04), 0 2px 1px -1px rgba(90, 20, 50, 0.05), 0 1px 3px 0 rgba(90, 20, 50, 0.05)",
+	sm: "0 2px 3px -2px rgba(90, 20, 50, 0.06), 0 3px 12px -4px rgba(90, 20, 50, 0.1), 0 4px 16px -8px rgba(90, 20, 50, 0.1)",
+	md: "0 8px 40px rgba(90, 20, 50, 0.05), 0 12px 32px -16px rgba(90, 20, 50, 0.08)",
+	lg: "0 12px 60px rgba(90, 20, 50, 0.15), 0 12px 32px -16px rgba(90, 20, 50, 0.12)",
+	xl: "0 12px 60px rgba(90, 20, 50, 0.15), 0 16px 64px rgba(90, 20, 50, 0.04), 0 16px 36px -20px rgba(90, 20, 50, 0.2)"
+});
+/** 樱花主题的圆角：比默认更圆 */
+var sakuraRadii = css.createTheme(radii, {
+	none: "0",
+	xs: "0.2em",
+	sm: "0.35em",
+	md: "0.55em",
+	lg: "0.85em",
+	xl: "1.2em",
+	full: "9999px"
+});
+/** 樱花主题：淡粉底、樱粉品牌色、圆润的圆角；浏览器配色按亮色 */
+var sakuraTheme = {
+	name: "sakura",
+	colorScheme: "light",
+	styles: [
+		sakuraColors,
+		sakuraShadows,
+		defaultFonts,
+		sakuraRadii
+	],
+	overrides: {}
+};
+//#endregion
+export { sakuraColors, sakuraRadii, sakuraShadows, sakuraTheme };
+
+//# sourceMappingURL=sakura.js.map

package/dist/config/theme/sakura.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sakura.js","names":[],"sources":["../../../src/config/theme/sakura.ts"],"sourcesContent":["import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { defaultFonts } from './light';\nimport type { Theme } from './theme';\nimport { colors, radii, shadows } from './tokens';\n\n/**\n * 樱花主题的颜色：淡粉的页面、樱粉的品牌色。中性色按 slate 各级亮度换成粉色相（oklch 355°），品牌色取 Radix pink 色阶，实色加深到白字够对比度。\n * 先按风格取色，再按对比度要求调深浅（pnpm themes:check 校验）\n */\nexport const sakuraColors = css.createTheme(colors, {\n  background: '#fffafc',\n  surface: '#fffafc',\n  surfaceMuted: '#fef7f9',\n  surfaceRaised: '#fffafc',\n  fill: '#f9edf1',\n  fillHover: '#f1e5e9',\n  fillActive: '#eadee2',\n  text: '#281b20',\n  textMuted: '#6f5f64',\n  textPlaceholder: '#8f7e84',\n  textDisabled: '#c4b8bc',\n  borderMuted: '#e2d6da',\n  border: '#d7cbcf',\n  borderStrong: '#c4b8bc',\n  accent: '#cd3797',\n  accentHover: '#ad2d7f',\n  accentContrast: '#ffffff',\n  accentText: '#b91e82',\n  accentSoft: '#fee9f5',\n  accentSoftHover: '#fbdcef',\n  accentBorder: '#e7acd0',\n  danger: '#d83a3f',\n  dangerHover: '#b62f34',\n  dangerContrast: '#ffffff',\n  dangerText: '#c31e28',\n  dangerSoft: '#feebec',\n  dangerSoftHover: '#ffdbdc',\n  dangerBorder: '#f4a9aa',\n  successText: '#193b2d',\n  successSoft: '#e6f6eb',\n  successBorder: '#8eceaa',\n  success: '#008751',\n  successHover: '#007143',\n  successContrast: '#ffffff',\n  successSoftHover: '#d6f1df',\n  warningText: '#4f3422',\n  warningSoft: '#fff7c2',\n  warningBorder: '#e9c162',\n  warning: '#ffc53d',\n  warningHover: '#ffcd5f',\n  warningContrast: '#4f3422',\n  warningSoftHover: '#ffee9c',\n  infoText: '#113264',\n  infoSoft: '#e6f4fe',\n  infoBorder: '#8ec8f6',\n  info: '#0073e0',\n  infoHover: '#0060bd',\n  infoContrast: '#ffffff',\n  infoSoftHover: '#d5efff',\n  inverseSurface: '#281b20',\n  inverseText: '#fffafc',\n  focusRing: '#cd3797',\n  overlay: 'rgba(40, 27, 32, 0.4)',\n  selection: '#f6cee7',\n  highlight: '#ffee9c',\n  surfaceTranslucent: 'rgba(255, 250, 252, 0.8)',\n  codeKeyword: '#b91e82',\n  codeString: '#147a51',\n  codeNumber: '#bf4100',\n  codeFunction: '#6550b9',\n  codeType: '#007590',\n  codeComment: '#6f5f64',\n  codeTag: '#cb1d63',\n  codeAttribute: '#815e46',\n  codeInserted: '#e6f6eb',\n  codeDeleted: '#feebec',\n  chart1: '#cd3797',\n  chart2: '#a144af',\n  chart3: '#df3478',\n  chart4: '#654dc4',\n  chart5: '#0d9b8a',\n  chart6: '#ef5f00',\n  chart7: '#309dba',\n  chart8: '#3e9b4f',\n});\n\n/** 樱花主题的阴影：带主色调的投影 */\nexport const sakuraShadows = css.createTheme(shadows, {\n  none: 'none',\n  xs: '0 1px 1px 0 rgba(90, 20, 50, 0.04), 0 2px 1px -1px rgba(90, 20, 50, 0.05), 0 1px 3px 0 rgba(90, 20, 50, 0.05)',\n  sm: '0 2px 3px -2px rgba(90, 20, 50, 0.06), 0 3px 12px -4px rgba(90, 20, 50, 0.1), 0 4px 16px -8px rgba(90, 20, 50, 0.1)',\n  md: '0 8px 40px rgba(90, 20, 50, 0.05), 0 12px 32px -16px rgba(90, 20, 50, 0.08)',\n  lg: '0 12px 60px rgba(90, 20, 50, 0.15), 0 12px 32px -16px rgba(90, 20, 50, 0.12)',\n  xl: '0 12px 60px rgba(90, 20, 50, 0.15), 0 16px 64px rgba(90, 20, 50, 0.04), 0 16px 36px -20px rgba(90, 20, 50, 0.2)',\n});\n\n/** 樱花主题的圆角：比默认更圆 */\nexport const sakuraRadii = css.createTheme(radii, {\n  none: '0',\n  xs: '0.2em',\n  sm: '0.35em',\n  md: '0.55em',\n  lg: '0.85em',\n  xl: '1.2em',\n  full: '9999px',\n});\n\n/** 樱花主题：淡粉底、樱粉品牌色、圆润的圆角；浏览器配色按亮色 */\nexport const sakuraTheme: Theme = {\n  name: 'sakura',\n  colorScheme: 'light',\n  styles: [sakuraColors, sakuraShadows, defaultFonts, sakuraRadii],\n  overrides: {},\n};\n"],"mappings":";;;;;;;;AASA,IAAa,eAAe,IAAI,YAAY,QAAQ;CAClD,YAAY;CACZ,SAAS;CACT,cAAc;CACd,eAAe;CACf,MAAM;CACN,WAAW;CACX,YAAY;CACZ,MAAM;CACN,WAAW;CACX,iBAAiB;CACjB,cAAc;CACd,aAAa;CACb,QAAQ;CACR,cAAc;CACd,QAAQ;CACR,aAAa;CACb,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,iBAAiB;CACjB,cAAc;CACd,QAAQ;CACR,aAAa;CACb,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,iBAAiB;CACjB,cAAc;CACd,aAAa;CACb,aAAa;CACb,eAAe;CACf,SAAS;CACT,cAAc;CACd,iBAAiB;CACjB,kBAAkB;CAClB,aAAa;CACb,aAAa;CACb,eAAe;CACf,SAAS;CACT,cAAc;CACd,iBAAiB;CACjB,kBAAkB;CAClB,UAAU;CACV,UAAU;CACV,YAAY;CACZ,MAAM;CACN,WAAW;CACX,cAAc;CACd,eAAe;CACf,gBAAgB;CAChB,aAAa;CACb,WAAW;CACX,SAAS;CACT,WAAW;CACX,WAAW;CACX,oBAAoB;CACpB,aAAa;CACb,YAAY;CACZ,YAAY;CACZ,cAAc;CACd,UAAU;CACV,aAAa;CACb,SAAS;CACT,eAAe;CACf,cAAc;CACd,aAAa;CACb,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;AACV,CAAC;;AAGD,IAAa,gBAAgB,IAAI,YAAY,SAAS;CACpD,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,CAAC;;AAGD,IAAa,cAAc,IAAI,YAAY,OAAO;CAChD,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR,CAAC;;AAGD,IAAa,cAAqB;CAChC,MAAM;CACN,aAAa;CACb,QAAQ;EAAC;EAAc;EAAe;EAAc;CAAW;CAC/D,WAAW,CAAC;AACd"}

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

@@ -0,0 +1,59 @@
+import type { CssVar, Theme as GroupThemeOf } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { t } from './tokens';
+type Groups = typeof t;
+/** 某一组 tokens 的主题（createTheme 的结果） */
+export type GroupTheme = {
+    [Group in keyof Groups]: GroupThemeOf<Groups[Group]>;
+}[keyof Groups];
+/** 按分组覆盖部分 token：`{ colors: { accent: '#e5484d' }, fontSizes: { md: '16px' } }` */
+export type ThemeOverrides = {
+    -readonly [Group in keyof Groups]?: {
+        [Token in keyof Groups[Group] & string]?: string;
+    };
+};
+/** 浏览器配色方案（color-scheme） */
+export interface ColorSchemes {
+    /** 亮色：原生表单控件、滚动条用亮色样式 */
+    light: unknown;
+    /** 暗色：原生表单控件、滚动条用暗色样式 */
+    dark: unknown;
+}
+/** 一套主题：defineTheme 的结果，交给 createUi 或 Provider */
+export interface Theme {
+    /** 主题名，写在容器的 data-theme 上，便于调试与宿主 CSS 定位 */
+    readonly name: string;
+    /** 浏览器配色方案，影响原生表单控件与滚动条 */
+    readonly colorScheme: keyof ColorSchemes;
+    /** 编译期生成的主题样式，每组一个（createTheme 的结果）；内置主题都写全颜色、阴影、字体、圆角，嵌套时不继承外层主题 */
+    readonly styles: readonly GroupTheme[];
+    /** 运行时覆盖的取值 */
+    readonly overrides: ThemeOverrides;
+}
+/** 一个主题，或明暗两套主题（跟随系统 prefers-color-scheme 切换） */
+export type ThemeInput = Theme | {
+    readonly light: Theme;
+    readonly dark: Theme;
+};
+/** 明暗两套主题时按系统设置选一套，单个主题原样返回 */
+export declare function resolveTheme(input: ThemeInput, prefersDark: boolean): Theme;
+/**
+ * 基于已有主题局部修改：`defineTheme(lightTheme, { colors: { accent: '#e5484d' } })`。
+ * 修改按分组合并，未提到的 token 沿用基础主题。
+ */
+export declare function defineTheme(base: Theme, overrides: ThemeOverrides, meta?: Partial<Pick<Theme, 'name' | 'colorScheme'>>): Theme;
+/** 主题落到容器元素上的属性：编译期主题的 class、运行时覆盖的 CSS 变量与配色方案 */
+export declare function themeAttrs(theme: Theme): {
+    class: string | undefined;
+    style: (Readonly<Record<string, string>> | undefined)[];
+    'data-theme': string;
+};
+/** 运行时覆盖的 token 写成 CSS 变量，并带上配色方案 */
+export declare function themeVariables(theme: Theme): Record<string, string>;
+/** token 在元素上的当前取值；元素不在主题范围里（没加载组件库的样式、还没挂载）时为空字符串 */
+export declare function tokenValue(element: Element, token: CssVar): string;
+/**
+ * token 在元素上的当前取值，含主题覆盖与媒体查询：`readToken(el, colors.accent)` → `'#3e63dd'`；读不到时报错。
+ * 给拿不到 CSS 变量的地方用：JS 动画的时长与缓动（utils/motion/animation 的 themeTransition、useAnimate）、canvas 图表与 3D 场景的颜色。
+ */
+export declare function readToken(element: Element, token: CssVar): string;
+export {};