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

package/dist/charts/series.d.ts

@@ -0,0 +1,36 @@
+import { type NumericValue } from '../utils/data/numeric';
+/** 图表色板里的一个颜色：第几个系列色 */
+export type ChartPaletteColor = 'chart1' | 'chart2' | 'chart3' | 'chart4' | 'chart5' | 'chart6' | 'chart7' | 'chart8';
+/** 语义色：好坏、提醒（瀑布图的增减、目标线），跟随主题 */
+export type ChartToneColor = 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+/** 系列颜色：色板里的一个（`'chart3'`）、语义色（`'danger'`），或任意 CSS 颜色（`'#e5484d'`） */
+export type ChartColor = ChartPaletteColor | ChartToneColor | (string & {});
+/** 数据行里取值是数字（number、bigint、Decimal）的字段 */
+export type NumericKey<T> = {
+    [K in keyof T]-?: T[K] extends NumericValue | null | undefined ? K : never;
+}[keyof T] & string;
+/** 一个系列：数据行里的一个数值字段画成一组柱子或一条线 */
+export interface ChartSeries<T> {
+    /** 取值的字段 */
+    key: NumericKey<T>;
+    /** 名称：图例、提示框、读屏的数据表里显示 */
+    label: string;
+    /** 颜色；不写时按系列的顺序取色板（第 1 个系列是 chart1，跟随品牌色） */
+    color?: ChartColor;
+}
+/** 系列加上实际使用的颜色 */
+export interface ResolvedSeries<T> extends ChartSeries<T> {
+    /** CSS 颜色（色板颜色是 CSS 变量） */
+    color: string;
+}
+/**
+ * 一个颜色：色板名、语义色换成 CSS 变量；没写时按位置取色板，多于 8 个时循环使用
+ * （系列、环形图的扇区、网络图的组共用）
+ */
+export declare function resolveColor(color: ChartColor | undefined, index: number): string;
+/** 系列颜色：见 resolveColor */
+export declare function resolveSeries<T>(series: readonly ChartSeries<T>[]): ResolvedSeries<T>[];
+/** 数据行里一个系列的原值：提示框、数据表按它格式化；空值、非数字、NaN 与无穷返回 undefined */
+export declare function seriesValue<T>(row: T, key: NumericKey<T>): NumericValue | undefined;
+/** 画图用的坐标：原值转成 number（Decimal、bigint 的精度对坐标足够） */
+export declare function seriesNumber<T>(row: T, key: NumericKey<T>): number | undefined;

package/dist/charts/series.js

@@ -0,0 +1,60 @@
+import { isDecimal, isNumeric, toNumber } from "../utils/data/numeric.js";
+import { colors } from "../config/theme/tokens.js";
+//#region src/charts/series.ts
+/**
+* 图表的系列与颜色：每个系列是数据行里的一个数值字段，颜色默认按顺序取主题的图表色板（colors.chart1–chart8）。
+* 颜色是 CSS 变量，切换主题、主题编辑器改品牌色都不用重画。
+* 值可以是 number、bigint 或 Decimal：画图时转成 number，提示框与数据表按原值格式化，不丢精度。
+*/
+var PALETTE = [
+	colors.chart1,
+	colors.chart2,
+	colors.chart3,
+	colors.chart4,
+	colors.chart5,
+	colors.chart6,
+	colors.chart7,
+	colors.chart8
+];
+var PALETTE_NAME = /^chart([1-8])$/;
+var TONES = {
+	accent: colors.accent,
+	success: colors.success,
+	warning: colors.warning,
+	danger: colors.danger,
+	info: colors.info,
+	neutral: colors.textMuted
+};
+/**
+* 一个颜色：色板名、语义色换成 CSS 变量；没写时按位置取色板，多于 8 个时循环使用
+* （系列、环形图的扇区、网络图的组共用）
+*/
+function resolveColor(color, index) {
+	const palette = color && PALETTE_NAME.exec(color);
+	if (palette) return PALETTE[Number(palette[1]) - 1];
+	if (color && color in TONES) return TONES[color];
+	return color ?? PALETTE[index % PALETTE.length];
+}
+/** 系列颜色：见 resolveColor */
+function resolveSeries(series) {
+	return series.map((item, index) => ({
+		...item,
+		color: resolveColor(item.color, index)
+	}));
+}
+/** 数据行里一个系列的原值：提示框、数据表按它格式化；空值、非数字、NaN 与无穷返回 undefined */
+function seriesValue(row, key) {
+	const value = row[key];
+	if (!isNumeric(value)) return void 0;
+	if (typeof value === "number" && !Number.isFinite(value)) return void 0;
+	return isDecimal(value) && !value.isFinite() ? void 0 : value;
+}
+/** 画图用的坐标：原值转成 number（Decimal、bigint 的精度对坐标足够） */
+function seriesNumber(row, key) {
+	const value = seriesValue(row, key);
+	return value === void 0 ? void 0 : toNumber(value);
+}
+//#endregion
+export { resolveColor, resolveSeries, seriesNumber, seriesValue };
+
+//# sourceMappingURL=series.js.map

package/dist/charts/series.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"series.js","names":[],"sources":["../../src/charts/series.ts"],"sourcesContent":["/**\n * 图表的系列与颜色：每个系列是数据行里的一个数值字段，颜色默认按顺序取主题的图表色板（colors.chart1–chart8）。\n * 颜色是 CSS 变量，切换主题、主题编辑器改品牌色都不用重画。\n * 值可以是 number、bigint 或 Decimal：画图时转成 number，提示框与数据表按原值格式化，不丢精度。\n */\nimport { colors } from '../config/theme/tokens';\nimport { isDecimal, isNumeric, toNumber, type NumericValue } from '../utils/data/numeric';\n\n/** 图表色板里的一个颜色：第几个系列色 */\nexport type ChartPaletteColor =\n  'chart1' | 'chart2' | 'chart3' | 'chart4' | 'chart5' | 'chart6' | 'chart7' | 'chart8';\n\n/** 语义色：好坏、提醒（瀑布图的增减、目标线），跟随主题 */\nexport type ChartToneColor = 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';\n\n/** 系列颜色：色板里的一个（`'chart3'`）、语义色（`'danger'`），或任意 CSS 颜色（`'#e5484d'`） */\nexport type ChartColor = ChartPaletteColor | ChartToneColor | (string & {});\n\n/** 数据行里取值是数字（number、bigint、Decimal）的字段 */\nexport type NumericKey<T> = {\n  [K in keyof T]-?: T[K] extends NumericValue | null | undefined ? K : never;\n}[keyof T] &\n  string;\n\n/** 一个系列：数据行里的一个数值字段画成一组柱子或一条线 */\nexport interface ChartSeries<T> {\n  /** 取值的字段 */\n  key: NumericKey<T>;\n  /** 名称：图例、提示框、读屏的数据表里显示 */\n  label: string;\n  /** 颜色；不写时按系列的顺序取色板（第 1 个系列是 chart1，跟随品牌色） */\n  color?: ChartColor;\n}\n\n/** 系列加上实际使用的颜色 */\nexport interface ResolvedSeries<T> extends ChartSeries<T> {\n  /** CSS 颜色（色板颜色是 CSS 变量） */\n  color: string;\n}\n\nconst PALETTE: readonly string[] = [\n  colors.chart1,\n  colors.chart2,\n  colors.chart3,\n  colors.chart4,\n  colors.chart5,\n  colors.chart6,\n  colors.chart7,\n  colors.chart8,\n];\n\nconst PALETTE_NAME = /^chart([1-8])$/;\n\nconst TONES: Record<ChartToneColor, string> = {\n  accent: colors.accent,\n  success: colors.success,\n  warning: colors.warning,\n  danger: colors.danger,\n  info: colors.info,\n  neutral: colors.textMuted,\n};\n\n/**\n * 一个颜色：色板名、语义色换成 CSS 变量；没写时按位置取色板，多于 8 个时循环使用\n * （系列、环形图的扇区、网络图的组共用）\n */\nexport function resolveColor(color: ChartColor | undefined, index: number): string {\n  const palette = color && PALETTE_NAME.exec(color);\n  if (palette) return PALETTE[Number(palette[1]) - 1]!;\n  if (color && color in TONES) return TONES[color as ChartToneColor];\n  return color ?? PALETTE[index % PALETTE.length]!;\n}\n\n/** 系列颜色：见 resolveColor */\nexport function resolveSeries<T>(series: readonly ChartSeries<T>[]): ResolvedSeries<T>[] {\n  return series.map((item, index) => ({ ...item, color: resolveColor(item.color, index) }));\n}\n\n/** 数据行里一个系列的原值：提示框、数据表按它格式化；空值、非数字、NaN 与无穷返回 undefined */\nexport function seriesValue<T>(row: T, key: NumericKey<T>): NumericValue | undefined {\n  const value: unknown = row[key];\n  if (!isNumeric(value)) return undefined;\n  if (typeof value === 'number' && !Number.isFinite(value)) return undefined;\n  return isDecimal(value) && !value.isFinite() ? undefined : value;\n}\n\n/** 画图用的坐标：原值转成 number（Decimal、bigint 的精度对坐标足够） */\nexport function seriesNumber<T>(row: T, key: NumericKey<T>): number | undefined {\n  const value = seriesValue(row, key);\n  return value === undefined ? undefined : toNumber(value);\n}\n"],"mappings":";;;;;;;;AAwCA,IAAM,UAA6B;CACjC,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,eAAe;AAErB,IAAM,QAAwC;CAC5C,QAAQ,OAAO;CACf,SAAS,OAAO;CAChB,SAAS,OAAO;CAChB,QAAQ,OAAO;CACf,MAAM,OAAO;CACb,SAAS,OAAO;AAClB;;;;;AAMA,SAAgB,aAAa,OAA+B,OAAuB;CACjF,MAAM,UAAU,SAAS,aAAa,KAAK,KAAK;CAChD,IAAI,SAAS,OAAO,QAAQ,OAAO,QAAQ,EAAE,IAAI;CACjD,IAAI,SAAS,SAAS,OAAO,OAAO,MAAM;CAC1C,OAAO,SAAS,QAAQ,QAAQ,QAAQ;AAC1C;;AAGA,SAAgB,cAAiB,QAAwD;CACvF,OAAO,OAAO,KAAK,MAAM,WAAW;EAAE,GAAG;EAAM,OAAO,aAAa,KAAK,OAAO,KAAK;CAAE,EAAE;AAC1F;;AAGA,SAAgB,YAAe,KAAQ,KAA8C;CACnF,MAAM,QAAiB,IAAI;CAC3B,IAAI,CAAC,UAAU,KAAK,GAAG,OAAO,KAAA;CAC9B,IAAI,OAAO,UAAU,YAAY,CAAC,OAAO,SAAS,KAAK,GAAG,OAAO,KAAA;CACjE,OAAO,UAAU,KAAK,KAAK,CAAC,MAAM,SAAS,IAAI,KAAA,IAAY;AAC7D;;AAGA,SAAgB,aAAgB,KAAQ,KAAwC;CAC9E,MAAM,QAAQ,YAAY,KAAK,GAAG;CAClC,OAAO,UAAU,KAAA,IAAY,KAAA,IAAY,SAAS,KAAK;AACzD"}

package/dist/charts/single.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 单容器图表（环形图、桑基图、弦图）共用的绘制过程：Unovis 的 SingleContainer 只建一次，数据与配置变化时 update，
+ * 卸载时 destroy；绘图区换了元素（加载、空状态之后重新出现）时容器连同组件、提示框一起重建。
+ * 提示框按选择器触发，内容用 Vue 渲染进同一个元素交给 Unovis 定位。在组件 setup 里调用。
+ *
+ *   const chart = useSingleChart(() => ({
+ *     element: plot, ready: !loading && rows.length > 0, tooltip,
+ *     build: (instance) => ({ component: …, data: rows, triggers: { [Donut.selectors.segment]: (d) => chart.tooltip(…) } }),
+ *   }));
+ */
+import { Tooltip, type ComponentCore } from '@unovis/ts';
+import { type VNode } from 'vue';
+/** 一次绘制要的东西 */
+export interface SingleChartBuild<D> {
+    /** 配置好的组件 */
+    component: ComponentCore<D>;
+    /** 交给组件的数据 */
+    data: D;
+    /** 提示框：选择器 → 悬停的数据 → 内容（Unovis 的 Tooltip triggers） */
+    triggers?: NonNullable<Tooltip['config']['triggers']>;
+    /** 每次画完之后（容器的 onRenderComplete）：组件要在画好之后调整的（地图的标签避让） */
+    onRender?: () => void;
+}
+/** useSingleChart 每次读取的状态 */
+export interface SingleChartState<D> {
+    /** 绘图区元素 */
+    element: HTMLElement | null;
+    /** 可以画了：不在加载中、有数据 */
+    ready: boolean;
+    /** 显示提示框 */
+    tooltip: boolean;
+    /** 配置组件：instance 取跨渲染保留的实例（第一次调用时创建） */
+    build: (instance: <C>(key: string, create: () => C) => C) => SingleChartBuild<D>;
+}
+/** useSingleChart 的返回值 */
+export interface SingleChart {
+    /** 提示框的内容渲染进同一个元素，交给 Unovis 定位 */
+    tooltip(content: VNode): HTMLElement;
+}
+/** 单容器图表的绘制 */
+export declare function useSingleChart<D>(read: () => SingleChartState<D>): SingleChart;

package/dist/charts/single.js

@@ -0,0 +1,65 @@
+import { chartDuration, createChartInstances, uniqueHighlightFilter, usePlotSeen } from "./frame.js";
+import { render, useId } from "vue";
+import { effect } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { SingleContainer, Tooltip } from "@unovis/ts";
+//#region src/charts/single.tsx
+/**
+* 单容器图表（环形图、桑基图、弦图）共用的绘制过程：Unovis 的 SingleContainer 只建一次，数据与配置变化时 update，
+* 卸载时 destroy；绘图区换了元素（加载、空状态之后重新出现）时容器连同组件、提示框一起重建。
+* 提示框按选择器触发，内容用 Vue 渲染进同一个元素交给 Unovis 定位。在组件 setup 里调用。
+*
+*   const chart = useSingleChart(() => ({
+*     element: plot, ready: !loading && rows.length > 0, tooltip,
+*     build: (instance) => ({ component: …, data: rows, triggers: { [Donut.selectors.segment]: (d) => chart.tooltip(…) } }),
+*   }));
+*/
+/** 一次绘制要的东西 */
+/** useSingleChart 每次读取的状态 */
+/** useSingleChart 的返回值 */
+/** 单容器图表的绘制 */
+function useSingleChart(read) {
+	const id = useId();
+	const instances = createChartInstances();
+	let tooltipElement;
+	let container;
+	let containerElement;
+	const seen = usePlotSeen(() => read().element);
+	effect(() => () => {
+		container?.destroy();
+		if (tooltipElement) render(null, tooltipElement);
+	});
+	effect(() => {
+		const { element, ready, tooltip, build } = read();
+		if (!element || !ready || !seen()) return;
+		if (container && containerElement !== element) {
+			container.destroy();
+			container = void 0;
+			instances.reset();
+		}
+		const { component, data, triggers, onRender } = build(instances.get);
+		const tooltipBox = instances.get("tooltip", () => new Tooltip());
+		tooltipBox.setConfig({ triggers: triggers ?? {} });
+		const config = {
+			component,
+			tooltip: tooltip ? tooltipBox : void 0,
+			ariaLabel: null,
+			duration: chartDuration(element),
+			onRenderComplete: onRender
+		};
+		if (container) container.update(config, void 0, data);
+		else {
+			container = new SingleContainer(element, config, data);
+			containerElement = element;
+			uniqueHighlightFilter(element, `${id}-highlight`);
+		}
+	});
+	return { tooltip(content) {
+		tooltipElement ??= document.createElement("div");
+		render(content, tooltipElement);
+		return tooltipElement;
+	} };
+}
+//#endregion
+export { useSingleChart };
+
+//# sourceMappingURL=single.js.map

package/dist/charts/single.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"single.js","names":[],"sources":["../../src/charts/single.tsx"],"sourcesContent":["/**\n * 单容器图表（环形图、桑基图、弦图）共用的绘制过程：Unovis 的 SingleContainer 只建一次，数据与配置变化时 update，\n * 卸载时 destroy；绘图区换了元素（加载、空状态之后重新出现）时容器连同组件、提示框一起重建。\n * 提示框按选择器触发，内容用 Vue 渲染进同一个元素交给 Unovis 定位。在组件 setup 里调用。\n *\n *   const chart = useSingleChart(() => ({\n *     element: plot, ready: !loading && rows.length > 0, tooltip,\n *     build: (instance) => ({ component: …, data: rows, triggers: { [Donut.selectors.segment]: (d) => chart.tooltip(…) } }),\n *   }));\n */\nimport { SingleContainer, Tooltip, type ComponentCore } from '@unovis/ts';\nimport { render, useId, type VNode } from 'vue';\nimport { chartDuration, createChartInstances, uniqueHighlightFilter, usePlotSeen } from './frame';\n\n/** 一次绘制要的东西 */\nexport interface SingleChartBuild<D> {\n  /** 配置好的组件 */\n  component: ComponentCore<D>;\n  /** 交给组件的数据 */\n  data: D;\n  /** 提示框：选择器 → 悬停的数据 → 内容（Unovis 的 Tooltip triggers） */\n  triggers?: NonNullable<Tooltip['config']['triggers']>;\n  /** 每次画完之后（容器的 onRenderComplete）：组件要在画好之后调整的（地图的标签避让） */\n  onRender?: () => void;\n}\n\n/** useSingleChart 每次读取的状态 */\nexport interface SingleChartState<D> {\n  /** 绘图区元素 */\n  element: HTMLElement | null;\n  /** 可以画了：不在加载中、有数据 */\n  ready: boolean;\n  /** 显示提示框 */\n  tooltip: boolean;\n  /** 配置组件：instance 取跨渲染保留的实例（第一次调用时创建） */\n  build: (instance: <C>(key: string, create: () => C) => C) => SingleChartBuild<D>;\n}\n\n/** useSingleChart 的返回值 */\nexport interface SingleChart {\n  /** 提示框的内容渲染进同一个元素，交给 Unovis 定位 */\n  tooltip(content: VNode): HTMLElement;\n}\n\n/** 单容器图表的绘制 */\nexport function useSingleChart<D>(read: () => SingleChartState<D>): SingleChart {\n  const id = useId();\n  const instances = createChartInstances();\n  let tooltipElement: HTMLElement | undefined;\n  let container: SingleContainer<D> | undefined;\n  let containerElement: HTMLElement | undefined;\n  const seen = usePlotSeen(() => read().element);\n\n  _effect(() => () => {\n    container?.destroy();\n    if (tooltipElement) render(null, tooltipElement);\n  });\n  _effect(() => {\n    const { element, ready, tooltip, build } = read();\n    if (!element || !ready || !seen()) return;\n    // 绘图区换了元素：旧容器连同组件、提示框一起销毁，实例表清空后重新创建\n    if (container && containerElement !== element) {\n      container.destroy();\n      container = undefined;\n      instances.reset();\n    }\n    const { component, data, triggers, onRender } = build(instances.get);\n    const tooltipBox = instances.get('tooltip', () => new Tooltip());\n    tooltipBox.setConfig({ triggers: triggers ?? {} });\n    const config = {\n      component,\n      tooltip: tooltip ? tooltipBox : undefined,\n      ariaLabel: null,\n      duration: chartDuration(element),\n      onRenderComplete: onRender,\n    };\n    if (container) container.update(config, undefined, data);\n    else {\n      container = new SingleContainer<D>(element, config, data);\n      containerElement = element;\n      uniqueHighlightFilter(element, `${id}-highlight`);\n    }\n  });\n\n  return {\n    tooltip(content) {\n      tooltipElement ??= document.createElement('div');\n      render(content, tooltipElement);\n      return tooltipElement;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,eAAkB,MAA8C;CAC9E,MAAM,KAAK,MAAM;CACjB,MAAM,YAAY,qBAAqB;CACvC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM,OAAO,kBAAkB,KAAK,CAAC,CAAC,OAAO;CAE7C,mBAAoB;EAClB,WAAW,QAAQ;EACnB,IAAI,gBAAgB,OAAO,MAAM,cAAc;CACjD,CAAC;CACD,aAAc;EACZ,MAAM,EAAE,SAAS,OAAO,SAAS,UAAU,KAAK;EAChD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,GAAG;EAEnC,IAAI,aAAa,qBAAqB,SAAS;GAC7C,UAAU,QAAQ;GAClB,YAAY,KAAA;GACZ,UAAU,MAAM;EAClB;EACA,MAAM,EAAE,WAAW,MAAM,UAAU,aAAa,MAAM,UAAU,GAAG;EACnE,MAAM,aAAa,UAAU,IAAI,iBAAiB,IAAI,QAAQ,CAAC;EAC/D,WAAW,UAAU,EAAE,UAAU,YAAY,CAAC,EAAE,CAAC;EACjD,MAAM,SAAS;GACb;GACA,SAAS,UAAU,aAAa,KAAA;GAChC,WAAW;GACX,UAAU,cAAc,OAAO;GAC/B,kBAAkB;EACpB;EACA,IAAI,WAAW,UAAU,OAAO,QAAQ,KAAA,GAAW,IAAI;OAClD;GACH,YAAY,IAAI,gBAAmB,SAAS,QAAQ,IAAI;GACxD,mBAAmB;GACnB,sBAAsB,SAAS,GAAG,GAAE,WAAY;EAClD;CACF,CAAC;CAED,OAAO,EACL,QAAQ,SAAS;EACf,mBAAmB,SAAS,cAAc,KAAK;EAC/C,OAAO,SAAS,cAAc;EAC9B,OAAO;CACT,EACF;AACF"}

package/dist/config/Provider.d.ts

@@ -0,0 +1,52 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type Highlighter, type TextMatcher, type UiRouter } from './context';
+import { type ComponentDefaults } from './defaults';
+import { type ComponentStyles } from './styles';
+import { type Lang } from './lang/lang';
+import type { WorkCalendar } from '../utils/data/workdays';
+import type { HttpClient } from '../utils/request/http';
+import { type ThemeInput } from './theme/theme';
+/** 局部配置；都不写时只是透明的容器，沿用上层配置 */
+export interface ProviderProps {
+    /** 主题；不写时沿用上层配置 */
+    theme?: ThemeInput;
+    /** 语言；只写要改的字段，其余沿用上层配置 */
+    lang?: Partial<Lang>;
+    /** 代码高亮器（CodeBlock 用）；不写时沿用上层配置 */
+    highlighter?: Highlighter;
+    /** 额外的文字匹配（拼音）；不写时沿用上层配置 */
+    textMatcher?: TextMatcher;
+    /** 组件默认值：按组件逐个与上层合并，只写要改的 */
+    defaults?: ComponentDefaults;
+    /** 组件的主题定制：追加在上层的定制之后（见 styles.ts） */
+    styles?: ComponentStyles;
+    /** 路由适配；不写时沿用上层配置 */
+    router?: UiRouter;
+    /** 请求客户端；不写时沿用上层配置 */
+    http?: HttpClient;
+    /** 工作日历；不写时沿用上层配置 */
+    workCalendar?: WorkCalendar;
+    /** 波纹效果的开关；不写时沿用上层配置 */
+    ripple?: boolean;
+    children?: VNodeChild;
+}
+/** Provider 的样式：root、themed */
+export declare const providerStyles: Readonly<{
+    root: css.CompiledStyles;
+    themed: css.CompiledStyles;
+}>;
+/**
+ * 局部配置主题与语言，可以嵌套：内层只写要改的部分，其余继承外层。
+ * 应用级配置见 createUi。
+ */
+export declare const Provider: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ProviderProps>;
+/** ConfigScope 的 props */
+export interface ConfigScopeProps {
+    children?: VNodeChild;
+}
+/**
+ * 给移出 Provider 的内容（Teleport 到 body 的 Toaster 等）重新带上当前的主题、语言与文字方向：
+ * 主题变量、lang、dir 都挂在 Provider 的元素上，传送出去的元素不再是它的后代。
+ */
+export declare const ConfigScope: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ConfigScopeProps>;

package/dist/config/Provider.js

@@ -0,0 +1,111 @@
+import { ConfigContext, useConfig } from "./context.js";
+import { mergeDefaults } from "./defaults.js";
+import { mergeStyles } from "./styles.js";
+import { resolveTheme, themeAttrs } from "./theme/theme.js";
+import { usePrefersDark } from "../utils/dom/media-query.js";
+import { defineLang } from "./lang/lang.js";
+import { computed, createVNode, mergeProps } from "vue";
+import { _component, childrenProp, readonlyProp } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/config/Provider.tsx
+/** 局部配置；都不写时只是透明的容器，沿用上层配置 */
+/** Provider 的样式：root、themed */
+var providerStyles = css.create({
+	root: { display: "contents" },
+	themed: {
+		color: "_text",
+		fontFamily: "_sans",
+		fontSize: "_md",
+		lineHeight: "_normal"
+	}
+});
+/**
+* 局部配置主题与语言，可以嵌套：内层只写要改的部分，其余继承外层。
+* 应用级配置见 createUi。
+*/
+var Provider = /*#__PURE__*/ _component((_props, _ctx) => {
+	const theme = readonlyProp(_props, "theme");
+	const lang = readonlyProp(_props, "lang");
+	const highlighter = readonlyProp(_props, "highlighter");
+	const textMatcher = readonlyProp(_props, "textMatcher");
+	const defaults = readonlyProp(_props, "defaults");
+	const styles = readonlyProp(_props, "styles");
+	const router = readonlyProp(_props, "router");
+	const http = readonlyProp(_props, "http");
+	const workCalendar = readonlyProp(_props, "workCalendar");
+	const ripple = readonlyProp(_props, "ripple");
+	const children = childrenProp(_props);
+	const parent = useConfig();
+	const prefersDark = usePrefersDark();
+	const currentTheme = computed(() => theme.value ? resolveTheme(theme.value, prefersDark.value) : parent.theme);
+	const currentLang = computed(() => lang.value ? defineLang(parent.lang, lang.value) : parent.lang);
+	const currentDefaults = computed(() => mergeDefaults(parent.defaults, defaults.value));
+	const currentStyles = computed(() => mergeStyles(parent.styles, styles.value));
+	ConfigContext.provide({
+		get theme() {
+			return currentTheme.value;
+		},
+		get lang() {
+			return currentLang.value;
+		},
+		get highlighter() {
+			return highlighter.value ?? parent.highlighter;
+		},
+		get textMatcher() {
+			return textMatcher.value ?? parent.textMatcher;
+		},
+		get defaults() {
+			return currentDefaults.value;
+		},
+		get styles() {
+			return currentStyles.value;
+		},
+		get router() {
+			return router.value ?? parent.router;
+		},
+		get http() {
+			return http.value ?? parent.http;
+		},
+		get workCalendar() {
+			return workCalendar.value ?? parent.workCalendar;
+		},
+		get ripple() {
+			return ripple.value ?? parent.ripple;
+		}
+	});
+	return () => createVNode("div", mergeProps(theme.value ? themeAttrs(currentTheme.value) : {}, css.attrs(providerStyles.root, theme.value != null && providerStyles.themed), {
+		"lang": currentLang.value.code,
+		"dir": currentLang.value.direction
+	}), [children.value]);
+}, {
+	name: "Provider",
+	props: [
+		"theme",
+		"lang",
+		"highlighter",
+		"textMatcher",
+		"defaults",
+		"styles",
+		"router",
+		"http",
+		"workCalendar",
+		"ripple"
+	]
+});
+/** ConfigScope 的 props */
+/**
+* 给移出 Provider 的内容（Teleport 到 body 的 Toaster 等）重新带上当前的主题、语言与文字方向：
+* 主题变量、lang、dir 都挂在 Provider 的元素上，传送出去的元素不再是它的后代。
+*/
+var ConfigScope = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const children = childrenProp(_props2);
+	const config = useConfig();
+	return () => createVNode("div", mergeProps(themeAttrs(config.theme), css.attrs(providerStyles.root, providerStyles.themed), {
+		"lang": config.lang.code,
+		"dir": config.lang.direction
+	}), [children.value]);
+}, { name: "ConfigScope" });
+//#endregion
+export { ConfigScope, Provider, providerStyles };
+
+//# sourceMappingURL=Provider.js.map

package/dist/config/Provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/config/Provider.tsx"],"sourcesContent":["import { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport {\n  ConfigContext,\n  useConfig,\n  type Highlighter,\n  type TextMatcher,\n  type UiRouter,\n} from './context';\nimport { mergeDefaults, type ComponentDefaults } from './defaults';\nimport { mergeStyles, type ComponentStyles } from './styles';\nimport { defineLang, type Lang } from './lang/lang';\nimport { usePrefersDark } from '../utils/dom/media-query';\nimport type { WorkCalendar } from '../utils/data/workdays';\nimport type { HttpClient } from '../utils/request/http';\nimport { resolveTheme, themeAttrs, type ThemeInput } from './theme/theme';\n\n/** 局部配置；都不写时只是透明的容器，沿用上层配置 */\nexport interface ProviderProps {\n  /** 主题；不写时沿用上层配置 */\n  theme?: ThemeInput;\n  /** 语言；只写要改的字段，其余沿用上层配置 */\n  lang?: Partial<Lang>;\n  /** 代码高亮器（CodeBlock 用）；不写时沿用上层配置 */\n  highlighter?: Highlighter;\n  /** 额外的文字匹配（拼音）；不写时沿用上层配置 */\n  textMatcher?: TextMatcher;\n  /** 组件默认值：按组件逐个与上层合并，只写要改的 */\n  defaults?: ComponentDefaults;\n  /** 组件的主题定制：追加在上层的定制之后（见 styles.ts） */\n  styles?: ComponentStyles;\n  /** 路由适配；不写时沿用上层配置 */\n  router?: UiRouter;\n  /** 请求客户端；不写时沿用上层配置 */\n  http?: HttpClient;\n  /** 工作日历；不写时沿用上层配置 */\n  workCalendar?: WorkCalendar;\n  /** 波纹效果的开关；不写时沿用上层配置 */\n  ripple?: boolean;\n  children?: VNodeChild;\n}\n\n/** Provider 的样式：root、themed */\nexport const providerStyles = css.create({\n  // 不产生盒子，不影响布局；主题变量与文字样式照常由子元素继承\n  root: { display: 'contents' },\n  themed: {\n    color: '_text',\n    fontFamily: '_sans',\n    fontSize: '_md',\n    lineHeight: '_normal',\n  },\n});\n\n/**\n * 局部配置主题与语言，可以嵌套：内层只写要改的部分，其余继承外层。\n * 应用级配置见 createUi。\n */\nexport const Provider = _component(\n  ({\n    theme,\n    lang,\n    highlighter,\n    textMatcher,\n    defaults,\n    styles,\n    router,\n    http,\n    workCalendar,\n    ripple,\n    children,\n  }: ProviderProps) => {\n    const parent = useConfig();\n    const prefersDark = usePrefersDark();\n    const currentTheme = _derived(theme ? resolveTheme(theme, prefersDark.value) : parent.theme);\n    const currentLang = _derived(lang ? defineLang(parent.lang, lang) : parent.lang);\n    const currentDefaults = _derived(mergeDefaults(parent.defaults, defaults));\n    const currentStyles = _derived(mergeStyles(parent.styles, styles));\n    ConfigContext.provide({\n      get theme() {\n        return currentTheme;\n      },\n      get lang() {\n        return currentLang;\n      },\n      get highlighter() {\n        return highlighter ?? parent.highlighter;\n      },\n      get textMatcher() {\n        return textMatcher ?? parent.textMatcher;\n      },\n      get defaults() {\n        return currentDefaults;\n      },\n      get styles() {\n        return currentStyles;\n      },\n      get router() {\n        return router ?? parent.router;\n      },\n      get http() {\n        return http ?? parent.http;\n      },\n      get workCalendar() {\n        return workCalendar ?? parent.workCalendar;\n      },\n      get ripple() {\n        return ripple ?? parent.ripple;\n      },\n    });\n\n    return () => (\n      <div\n        {...(theme ? themeAttrs(currentTheme) : {})}\n        {...css.attrs(providerStyles.root, theme != null && providerStyles.themed)}\n        lang={currentLang.code}\n        dir={currentLang.direction}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/** ConfigScope 的 props */\nexport interface ConfigScopeProps {\n  children?: VNodeChild;\n}\n\n/**\n * 给移出 Provider 的内容（Teleport 到 body 的 Toaster 等）重新带上当前的主题、语言与文字方向：\n * 主题变量、lang、dir 都挂在 Provider 的元素上，传送出去的元素不再是它的后代。\n */\nexport const ConfigScope = _component(({ children }: ConfigScopeProps) => {\n  const config = useConfig();\n  return () => (\n    <div\n      {...themeAttrs(config.theme)}\n      {...css.attrs(providerStyles.root, providerStyles.themed)}\n      lang={config.lang.code}\n      dir={config.lang.direction}\n    >\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AA4CA,IAAa,iBAAiB,IAAI,OAAO;CAEvC,MAAM,EAAE,SAAS,WAAW;CAC5B,QAAQ;EACN,OAAO;EACP,YAAY;EACZ,UAAU;EACV,YAAY;CACd;AACF,CAAC;;;;;AAMD,IAAa,WAAW,0BACtB,QAAA,SAYqB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CACnB,MAAM,SAAS,UAAU;CACzB,MAAM,cAAc,eAAe;CACnC,MAAM,eAAYC,eAAY,MAAA,QAAQ,aAAY,MAAA,OAAQ,YAAY,KAAK,IAAI,OAAO,KAAK;CAC3F,MAAM,cAAWA,eAAY,KAAA,QAAO,WAAW,OAAO,MAAI,KAAA,KAAM,IAAI,OAAO,IAAI;CAC/E,MAAM,kBAAeA,eAAY,cAAc,OAAO,UAAQ,SAAA,KAAU,CAAC;CACzE,MAAM,gBAAaA,eAAY,YAAY,OAAO,QAAM,OAAA,KAAQ,CAAC;CACjE,cAAc,QAAQ;EACpB,IAAI,QAAQ;GACV,OAAA,aAAA;EACF;EACA,IAAI,OAAO;GACT,OAAA,YAAA;EACF;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,WAAW;GACb,OAAA,gBAAA;EACF;EACA,IAAI,SAAS;GACX,OAAA,cAAA;EACF;EACA,IAAI,SAAS;GACX,OAAO,OAAA,SAAU,OAAO;EAC1B;EACA,IAAI,OAAO;GACT,OAAO,KAAA,SAAQ,OAAO;EACxB;EACA,IAAI,eAAe;GACjB,OAAO,aAAA,SAAgB,OAAO;EAChC;EACA,IAAI,SAAS;GACX,OAAO,OAAA,SAAU,OAAO;EAC1B;CACF,CAAC;CAED,aAAOC,YAAA,OAAAC,WAEE,MAAA,QAAQ,WAAU,aAAA,KAAa,IAAI,CAAC,GACrC,IAAI,MAAM,eAAe,MAAM,MAAA,SAAS,QAAQ,eAAe,MAAM,GAAC;EAAA,QACpE,YAAA,MAAY;EAAI,OACjB,YAAA,MAAY;CAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAKhC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;;;;AAWA,IAAa,cAAc,0BAAW,SAAA,UAAoC;CAAA,MAAA,WAAAH,aAAA,OAAA;CACxE,MAAM,SAAS,UAAU;CACzB,aAAOE,YAAA,OAAAC,WAEC,WAAW,OAAO,KAAK,GACvB,IAAI,MAAM,eAAe,MAAM,eAAe,MAAM,GAAC;EAAA,QACnD,OAAO,KAAK;EAAI,OACjB,OAAO,KAAK;CAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAKhC,GAAC,EAAA,MAAA,cAAA,CAAA"}

package/dist/config/context.d.ts

@@ -0,0 +1,90 @@
+import type { WorkCalendar } from '../utils/data/workdays';
+import type { HttpClient } from '../utils/request/http';
+import type { ComponentDefaults } from './defaults';
+import type { StyleLayers } from './styles';
+import type { Lang } from './lang/lang';
+import type { Theme } from './theme/theme';
+/**
+ * 代码高亮器：代码 + 语言 → 高亮后的行内 HTML（只含 span 与换行的 br，不含 pre、code），交给 CodeBlock。
+ * 组件库不依赖具体实现；Shiki 的实现见子路径 `@zerodep-dev/vue-tsx-pro-ui/shiki` 的 createShikiHighlighter。
+ * 返回的 HTML 直接写进页面，实现方负责转义代码里的文字。
+ */
+export type Highlighter = (code: string, lang: string) => Promise<string>;
+/**
+ * 额外的文字匹配：选项过滤、命令面板、树的搜索在内置匹配（忽略大小写与重音的包含）之外再试它，任一命中就算。
+ * 拼音匹配见子路径 `@zerodep-dev/vue-tsx-pro-ui/pinyin` 的 createPinyinMatcher
+ */
+export type TextMatcher = (text: string, query: string) => boolean;
+/**
+ * 路由适配（参考 React Aria 的 RouterProvider 与 useHref）：组件库不依赖具体的路由库。
+ * Link、LinkButton、导航组件渲染的仍是 <a href>；普通左键点击站内链接时改由 navigate 跳转（不刷新页面），
+ * 新窗口打开、按着修饰键、外部链接、下载照常交给浏览器。
+ *
+ *   createUi({ router: { navigate: (href) => router.push(href), isActive: (href) => route.path === href } })
+ */
+export interface UiRouter {
+    /** 站内跳转；收到的是组件上写的原文（/orders），不是 resolve 之后的地址 */
+    navigate: (href: string) => void;
+    /**
+     * 站内链接渲染到 <a href> 上的真实地址：补上路由的 base（/admin/orders）、hash 模式的 #（#/orders），
+     * 新标签页打开、复制链接才对。不写时原样渲染
+     */
+    resolve?: (href: string) => string;
+    /** href 是不是当前页：导航组件据此加 aria-current="page"。在渲染时调用，读路由的响应式状态就能跟随变化 */
+    isActive?: (href: string) => boolean;
+    /**
+     * 站内跳转之前问一下（useLeaveConfirmation 用）：guard 返回 false（或 resolve 成 false）时不跳转；返回注销函数。
+     * 只在路径变了时问，同一页里换 query、锚点不问
+     */
+    beforeLeave?: (guard: () => boolean | Promise<boolean>) => () => void;
+    /** 当前地址的查询参数（useQueryState 用）；读路由的响应式状态，在 watch、渲染里读能跟随变化 */
+    query?: () => QueryValues;
+    /**
+     * 改当前地址的查询参数（replace，不加历史记录）：patch 里的键覆盖，值为 undefined 的删掉，其余不动。
+     * 同一轮里调用几次要合并成一次跳转（各状态分别写入时互不覆盖）
+     */
+    replaceQuery?: (patch: QueryPatch) => void;
+}
+/** 地址里的查询参数：同名多个时是数组；只写了键（?flag）时是空字符串 */
+export type QueryValues = Readonly<Record<string, string | readonly string[]>>;
+/** 要改的查询参数：undefined 是删掉 */
+export type QueryPatch = Readonly<Record<string, string | readonly string[] | undefined>>;
+/** 提供方用 getter 暴露当前值，读取方在渲染或 computed 里读取即可跟随变化 */
+export interface UiConfig {
+    /** 当前主题（明暗已按系统设置选定） */
+    readonly theme: Theme;
+    /** 当前语言：地区格式与界面文案 */
+    readonly lang: Lang;
+    /** 代码高亮器；没有时 CodeBlock 显示纯文本 */
+    readonly highlighter?: Highlighter;
+    /** 额外的文字匹配（拼音）；没有时只按字面匹配 */
+    readonly textMatcher?: TextMatcher;
+    /** 组件默认值（见 defaults.ts） */
+    readonly defaults: ComponentDefaults;
+    /** 组件的主题定制，外层在前（见 styles.ts） */
+    readonly styles: StyleLayers;
+    /** 路由适配；没有时链接就是普通的页面跳转 */
+    readonly router?: UiRouter;
+    /** 请求客户端（远程选项、上传、列表查询用）；没有时 useHttp 给一个默认的 createHttpClient() */
+    readonly http?: HttpClient;
+    /** 工作日历（时限、剩余工作日用）；没有时只按周末算 */
+    readonly workCalendar?: WorkCalendar;
+    /** 可点击组件按下时的波纹效果，默认开启；组件的 ripple prop 可以单独覆盖 */
+    readonly ripple: boolean;
+}
+/** 配置的注入键：createUi 在应用级提供，Provider 在局部覆盖 */
+export declare const ConfigContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<UiConfig>;
+/** 默认配置：亮色主题 + 简体中文 */
+export declare const defaultConfig: UiConfig;
+/** 当前的主题与语言配置；没有 createUi 与 Provider 时为默认配置 */
+export declare function useConfig(): UiConfig;
+/**
+ * 当前语言：`const lang = useLang()`，之后 `lang.confirm`、`lang.timeZone`。
+ * 返回的对象总是转发到最新配置，在渲染函数里读取即可随 Provider 切换语言。
+ */
+export declare function useLang(): Lang;
+/**
+ * 当前配置下的文字匹配：内置匹配（按当前语言忽略大小写与重音）或 textMatcher（拼音）任一命中。
+ * 在 setup 里调用，返回的函数在渲染、计算里调用（读到最新的语言与配置）
+ */
+export declare function useTextMatcher(): () => TextMatcher;

package/dist/config/context.js

@@ -0,0 +1,58 @@
+import { createMatcher } from "../utils/data/collation.js";
+import { zhCN } from "./lang/zh-CN.js";
+import { lightTheme } from "./theme/light.js";
+import { createContext } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/config/context.ts
+/**
+* 组件库配置（主题与语言）的上下文：应用级由 createUi 提供，局部由 <Provider> 覆盖；
+* 都没有时使用默认值（亮色主题 + 简体中文），组件单独使用也能工作。
+*/
+/** 配置的注入键：createUi 在应用级提供，Provider 在局部覆盖 */
+var ConfigContext = createContext("Provider");
+/** 默认配置：亮色主题 + 简体中文 */
+var defaultConfig = {
+	theme: lightTheme,
+	lang: zhCN,
+	defaults: {},
+	styles: {},
+	ripple: true
+};
+/** 当前的主题与语言配置；没有 createUi 与 Provider 时为默认配置 */
+function useConfig() {
+	return ConfigContext.inject(defaultConfig);
+}
+/**
+* 当前语言：`const lang = useLang()`，之后 `lang.confirm`、`lang.timeZone`。
+* 返回的对象总是转发到最新配置，在渲染函数里读取即可随 Provider 切换语言。
+*/
+function useLang() {
+	const config = useConfig();
+	return new Proxy({}, {
+		get: (_, key) => Reflect.get(config.lang, key),
+		has: (_, key) => Reflect.has(config.lang, key),
+		ownKeys: () => Reflect.ownKeys(config.lang),
+		getOwnPropertyDescriptor: (_, key) => {
+			const descriptor = Reflect.getOwnPropertyDescriptor(config.lang, key);
+			return descriptor && {
+				...descriptor,
+				configurable: true
+			};
+		}
+	});
+}
+/**
+* 当前配置下的文字匹配：内置匹配（按当前语言忽略大小写与重音）或 textMatcher（拼音）任一命中。
+* 在 setup 里调用，返回的函数在渲染、计算里调用（读到最新的语言与配置）
+*/
+function useTextMatcher() {
+	const config = useConfig();
+	return () => {
+		const builtin = createMatcher(config.lang.code);
+		const extra = config.textMatcher;
+		return extra ? (text, query) => builtin(text, query) || extra(text, query) : builtin;
+	};
+}
+//#endregion
+export { ConfigContext, defaultConfig, useConfig, useLang, useTextMatcher };
+
+//# sourceMappingURL=context.js.map

package/dist/config/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../src/config/context.ts"],"sourcesContent":["/**\n * 组件库配置（主题与语言）的上下文：应用级由 createUi 提供，局部由 <Provider> 覆盖；\n * 都没有时使用默认值（亮色主题 + 简体中文），组件单独使用也能工作。\n */\nimport { createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { createMatcher } from '../utils/data/collation';\nimport type { WorkCalendar } from '../utils/data/workdays';\nimport type { HttpClient } from '../utils/request/http';\nimport type { ComponentDefaults } from './defaults';\nimport type { StyleLayers } from './styles';\nimport type { Lang } from './lang/lang';\nimport { zhCN } from './lang/zh-CN';\nimport { lightTheme } from './theme/light';\nimport type { Theme } from './theme/theme';\n\n/**\n * 代码高亮器：代码 + 语言 → 高亮后的行内 HTML（只含 span 与换行的 br，不含 pre、code），交给 CodeBlock。\n * 组件库不依赖具体实现；Shiki 的实现见子路径 `@zerodep-dev/vue-tsx-pro-ui/shiki` 的 createShikiHighlighter。\n * 返回的 HTML 直接写进页面，实现方负责转义代码里的文字。\n */\nexport type Highlighter = (code: string, lang: string) => Promise<string>;\n\n/**\n * 额外的文字匹配：选项过滤、命令面板、树的搜索在内置匹配（忽略大小写与重音的包含）之外再试它，任一命中就算。\n * 拼音匹配见子路径 `@zerodep-dev/vue-tsx-pro-ui/pinyin` 的 createPinyinMatcher\n */\nexport type TextMatcher = (text: string, query: string) => boolean;\n\n/**\n * 路由适配（参考 React Aria 的 RouterProvider 与 useHref）：组件库不依赖具体的路由库。\n * Link、LinkButton、导航组件渲染的仍是 <a href>；普通左键点击站内链接时改由 navigate 跳转（不刷新页面），\n * 新窗口打开、按着修饰键、外部链接、下载照常交给浏览器。\n *\n *   createUi({ router: { navigate: (href) => router.push(href), isActive: (href) => route.path === href } })\n */\nexport interface UiRouter {\n  /** 站内跳转；收到的是组件上写的原文（/orders），不是 resolve 之后的地址 */\n  navigate: (href: string) => void;\n  /**\n   * 站内链接渲染到 <a href> 上的真实地址：补上路由的 base（/admin/orders）、hash 模式的 #（#/orders），\n   * 新标签页打开、复制链接才对。不写时原样渲染\n   */\n  resolve?: (href: string) => string;\n  /** href 是不是当前页：导航组件据此加 aria-current=\"page\"。在渲染时调用，读路由的响应式状态就能跟随变化 */\n  isActive?: (href: string) => boolean;\n  /**\n   * 站内跳转之前问一下（useLeaveConfirmation 用）：guard 返回 false（或 resolve 成 false）时不跳转；返回注销函数。\n   * 只在路径变了时问，同一页里换 query、锚点不问\n   */\n  beforeLeave?: (guard: () => boolean | Promise<boolean>) => () => void;\n  /** 当前地址的查询参数（useQueryState 用）；读路由的响应式状态，在 watch、渲染里读能跟随变化 */\n  query?: () => QueryValues;\n  /**\n   * 改当前地址的查询参数（replace，不加历史记录）：patch 里的键覆盖，值为 undefined 的删掉，其余不动。\n   * 同一轮里调用几次要合并成一次跳转（各状态分别写入时互不覆盖）\n   */\n  replaceQuery?: (patch: QueryPatch) => void;\n}\n\n/** 地址里的查询参数：同名多个时是数组；只写了键（?flag）时是空字符串 */\nexport type QueryValues = Readonly<Record<string, string | readonly string[]>>;\n\n/** 要改的查询参数：undefined 是删掉 */\nexport type QueryPatch = Readonly<Record<string, string | readonly string[] | undefined>>;\n\n/** 提供方用 getter 暴露当前值，读取方在渲染或 computed 里读取即可跟随变化 */\nexport interface UiConfig {\n  /** 当前主题（明暗已按系统设置选定） */\n  readonly theme: Theme;\n  /** 当前语言：地区格式与界面文案 */\n  readonly lang: Lang;\n  /** 代码高亮器；没有时 CodeBlock 显示纯文本 */\n  readonly highlighter?: Highlighter;\n  /** 额外的文字匹配（拼音）；没有时只按字面匹配 */\n  readonly textMatcher?: TextMatcher;\n  /** 组件默认值（见 defaults.ts） */\n  readonly defaults: ComponentDefaults;\n  /** 组件的主题定制，外层在前（见 styles.ts） */\n  readonly styles: StyleLayers;\n  /** 路由适配；没有时链接就是普通的页面跳转 */\n  readonly router?: UiRouter;\n  /** 请求客户端（远程选项、上传、列表查询用）；没有时 useHttp 给一个默认的 createHttpClient() */\n  readonly http?: HttpClient;\n  /** 工作日历（时限、剩余工作日用）；没有时只按周末算 */\n  readonly workCalendar?: WorkCalendar;\n  /** 可点击组件按下时的波纹效果，默认开启；组件的 ripple prop 可以单独覆盖 */\n  readonly ripple: boolean;\n}\n\n/** 配置的注入键：createUi 在应用级提供，Provider 在局部覆盖 */\nexport const ConfigContext = createContext<UiConfig>('Provider');\n\n/** 默认配置：亮色主题 + 简体中文 */\nexport const defaultConfig: UiConfig = {\n  theme: lightTheme,\n  lang: zhCN,\n  defaults: {},\n  styles: {},\n  ripple: true,\n};\n\n/** 当前的主题与语言配置；没有 createUi 与 Provider 时为默认配置 */\nexport function useConfig(): UiConfig {\n  return ConfigContext.inject(defaultConfig);\n}\n\n/**\n * 当前语言：`const lang = useLang()`，之后 `lang.confirm`、`lang.timeZone`。\n * 返回的对象总是转发到最新配置，在渲染函数里读取即可随 Provider 切换语言。\n */\nexport function useLang(): Lang {\n  const config = useConfig();\n  // 所有读取都转发到当前语言，展开与 Object.keys 也能拿到完整字段\n  return new Proxy({} as Lang, {\n    get: (_, key) => Reflect.get(config.lang, key),\n    has: (_, key) => Reflect.has(config.lang, key),\n    ownKeys: () => Reflect.ownKeys(config.lang),\n    getOwnPropertyDescriptor: (_, key) => {\n      const descriptor = Reflect.getOwnPropertyDescriptor(config.lang, key);\n      return descriptor && { ...descriptor, configurable: true };\n    },\n  });\n}\n\n/**\n * 当前配置下的文字匹配：内置匹配（按当前语言忽略大小写与重音）或 textMatcher（拼音）任一命中。\n * 在 setup 里调用，返回的函数在渲染、计算里调用（读到最新的语言与配置）\n */\nexport function useTextMatcher(): () => TextMatcher {\n  const config = useConfig();\n  return () => {\n    const builtin = createMatcher(config.lang.code);\n    const extra = config.textMatcher;\n    return extra ? (text, query) => builtin(text, query) || extra(text, query) : builtin;\n  };\n}\n"],"mappings":";;;;;;;;;;AA0FA,IAAa,gBAAgB,cAAwB,UAAU;;AAG/D,IAAa,gBAA0B;CACrC,OAAO;CACP,MAAM;CACN,UAAU,CAAC;CACX,QAAQ,CAAC;CACT,QAAQ;AACV;;AAGA,SAAgB,YAAsB;CACpC,OAAO,cAAc,OAAO,aAAa;AAC3C;;;;;AAMA,SAAgB,UAAgB;CAC9B,MAAM,SAAS,UAAU;CAEzB,OAAO,IAAI,MAAM,CAAC,GAAW;EAC3B,MAAM,GAAG,QAAQ,QAAQ,IAAI,OAAO,MAAM,GAAG;EAC7C,MAAM,GAAG,QAAQ,QAAQ,IAAI,OAAO,MAAM,GAAG;EAC7C,eAAe,QAAQ,QAAQ,OAAO,IAAI;EAC1C,2BAA2B,GAAG,QAAQ;GACpC,MAAM,aAAa,QAAQ,yBAAyB,OAAO,MAAM,GAAG;GACpE,OAAO,cAAc;IAAE,GAAG;IAAY,cAAc;GAAK;EAC3D;CACF,CAAC;AACH;;;;;AAMA,SAAgB,iBAAoC;CAClD,MAAM,SAAS,UAAU;CACzB,aAAa;EACX,MAAM,UAAU,cAAc,OAAO,KAAK,IAAI;EAC9C,MAAM,QAAQ,OAAO;EACrB,OAAO,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK,KAAK,MAAM,MAAM,KAAK,IAAI;CAC/E;AACF"}

package/dist/config/createUi.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 应用级配置：在宿主入口里 `app.use(createUi({ theme, lang }))`，所有 TSX 页面共享，不必逐页包裹 Provider。
+ * 传入 ref 或 getter 即可在运行时切换主题与语言。
+ */
+import { type MaybeRefOrGetter, type Plugin } from 'vue';
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type Highlighter, type TextMatcher, type UiRouter } from './context';
+import type { ComponentDefaults } from './defaults';
+import { type ComponentStyles } from './styles';
+import { type Lang } from './lang/lang';
+import type { WorkCalendar } from '../utils/data/workdays';
+import type { HttpClient } from '../utils/request/http';
+import { type ThemeInput } from './theme/theme';
+/** 应用级配置；theme 与 lang 可以传 ref 或 getter，运行时切换，其余在安装时确定 */
+export interface UiOptions {
+    /** 主题；不写时用亮色主题，也不改动页面根元素 */
+    theme?: MaybeRefOrGetter<ThemeInput>;
+    /** 只写要改的字段，其余用简体中文的默认值 */
+    lang?: MaybeRefOrGetter<Partial<Lang>>;
+    /** 代码高亮器（CodeBlock 用），如 `@zerodep-dev/vue-tsx-pro-ui/shiki` 的 createShikiHighlighter()；不写时显示纯文本 */
+    highlighter?: Highlighter;
+    /** 额外的文字匹配，如 `@zerodep-dev/vue-tsx-pro-ui/pinyin` 的 createPinyinMatcher()：选项过滤、命令面板认拼音；不写时只按字面匹配 */
+    textMatcher?: TextMatcher;
+    /** 组件默认值，如 `{ Button: { variant: 'outline' } }`（见 defaults.ts） */
+    defaults?: ComponentDefaults;
+    /** 组件的主题定制：追加样式、新增档位，如 `{ Button: { base: { root: { letterSpacing: '0.02em' } } } }`（见 styles.ts） */
+    styles?: ComponentStyles;
+    /** 路由适配：站内链接不刷新页面地跳转、导航组件判断当前页（见 UiRouter） */
+    router?: UiRouter;
+    /** 请求客户端：createHttpClient({ baseURL, onRequest, onResponse })，或包一层 axios、ky（见 HttpClient） */
+    http?: HttpClient;
+    /** 工作日历：createWorkCalendar({ holidays, workdays }) 带上法定节假日与调休；不写时只按周末算 */
+    workCalendar?: WorkCalendar;
+    /** 按下时的波纹效果，默认 true；关掉后组件的 ripple prop 仍可单独打开 */
+    ripple?: boolean;
+    /**
+     * 页面根元素也用主题的背景色、文字色与字体，并去掉 body 的默认外边距，默认 false。
+     * 整页都由组件库主题管理的站点（如文档站）打开：页面边缘、回弹滚动露出的地方不再是浏览器的默认色，
+     * AppShell 贴满窗口、四周不留 8px 的白边；配合 themeBootScript 时接手它写的行内颜色
+     */
+    paintDocument?: boolean;
+}
+/** paintDocument 时页面根元素的样式 */
+export declare const documentStyles: Readonly<{
+    body: css.CompiledStyles;
+    page: css.CompiledStyles;
+}>;
+/**
+ * 应用级配置的 Vue 插件：`app.use(createUi({ theme: { light: lightTheme, dark: darkTheme } }))`。
+ * 主题的 CSS 变量写在页面根元素上，所有 TSX 页面共享；应用卸载时撤销。
+ */
+export declare function createUi(options?: UiOptions): Plugin;