@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.2.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/code-editor/CodeEditor.d.ts

@@ -0,0 +1,18 @@
+import type { Extension } from '@codemirror/state';
+import { type PartProps } from '../utils/props';
+import { type CodeEditorHandle } from './editor';
+/** CodeEditor 的属性 */
+export interface CodeEditorProps extends PartProps<'div'> {
+    /** 代码：父级写 _value={x} 双向绑定 */
+    _value?: string;
+    /** 编辑区的无障碍名称 */
+    'aria-label': string;
+    /** 语言扩展（CodeMirror 的 json()、java()……）；不给时是 TSX。只在挂载时读 */
+    language?: Extension;
+    /** 只读：能选中、复制、搜索，不能改 */
+    readonly?: boolean;
+    /** 编辑器建好了：拿到 CodeMirror 的视图，做撤销、读选区这类更细的操作 */
+    onReady?: (editor: CodeEditorHandle) => void;
+}
+/** 代码编辑器：语法高亮、括号匹配、缩进、搜索，颜色跟随主题 */
+export declare const CodeEditor: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CodeEditorProps>;

package/dist/code-editor/CodeEditor.js

@@ -0,0 +1,57 @@
+import { useConfig } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { inputRecipe } from "../input/control.js";
+import { createEditor } from "./editor.js";
+import { createVNode, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/code-editor/CodeEditor.tsx
+var styles = css.create({ root: {
+	display: "block",
+	height: "20rem",
+	paddingInline: 0,
+	overflow: "hidden"
+} });
+/** CodeEditor 的属性 */
+/** 代码编辑器：语法高亮、括号匹配、缩进、搜索，颜色跟随主题 */
+var CodeEditor = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => "", _ctx.emit);
+	const label = readonlyProp(_props, "ariaLabel");
+	const language = readonlyProp(_props, "language");
+	const readonly = readonlyProp(_props, "readonly");
+	const onReady = readonlyProp(_props, "onReady");
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	let host = shallowRef(null);
+	let editor;
+	const isDark = () => config.theme.colorScheme === "dark";
+	onMounted(() => {
+		editor = createEditor(host.value, {
+			code: value.value,
+			dark: isDark(),
+			label: label.value,
+			language: language.value,
+			readonly: readonly.value,
+			onChange: (code) => value.value = code
+		});
+		onReady.value?.(editor);
+	});
+	onBeforeUnmount(() => editor?.destroy());
+	watch(() => value.value, (code) => editor?.setCode(code));
+	watch(isDark, (dark) => editor?.setDark(dark));
+	return () => createVNode("div", mergeAttrs({ sx: [inputRecipe().root, styles.root] }, rest, { ref: host }), null);
+}, {
+	name: "CodeEditor",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"ariaLabel",
+		"language",
+		"readonly",
+		"onReady"
+	]
+});
+//#endregion
+export { CodeEditor };
+
+//# sourceMappingURL=CodeEditor.js.map

package/dist/code-editor/CodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode"],"sources":["../../src/code-editor/CodeEditor.tsx"],"sourcesContent":["/**\n * 代码编辑器组件：外壳与输入框相同（边框、悬停、焦点环），里面是 CodeMirror（editor.ts）。\n * CodeMirror 只在这个子路径里：页面用到编辑器时才随子路径加载，组件库主入口不带它。\n *\n *   <CodeEditor _value={code} aria-label=\"代码\" sx={styles.editor} />\n *   <CodeEditor _value={manifest} language={json()} aria-label=\"字段清单\" onReady={(editor) => …} />\n *\n * 高度由使用方给（sx），默认 20rem；未声明的属性落到外壳上。颜色、字体取主题 token，跟着主题变。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { Extension } from '@codemirror/state';\nimport { useConfig } from '../config/context';\nimport { inputRecipe } from '../input/control';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { onBeforeUnmount, onMounted, watch } from 'vue';\nimport { createEditor, type CodeEditorHandle } from './editor';\n\nconst styles = css.create({\n  // 输入框外壳是一行的 inline-flex：改成整块，内边距交给 CodeMirror\n  root: {\n    display: 'block',\n    height: '20rem',\n    paddingInline: 0,\n    overflow: 'hidden',\n  },\n});\n\n/** CodeEditor 的属性 */\nexport interface CodeEditorProps extends PartProps<'div'> {\n  /** 代码：父级写 _value={x} 双向绑定 */\n  _value?: string;\n  /** 编辑区的无障碍名称 */\n  'aria-label': string;\n  /** 语言扩展（CodeMirror 的 json()、java()……）；不给时是 TSX。只在挂载时读 */\n  language?: Extension;\n  /** 只读：能选中、复制、搜索，不能改 */\n  readonly?: boolean;\n  /** 编辑器建好了：拿到 CodeMirror 的视图，做撤销、读选区这类更细的操作 */\n  onReady?: (editor: CodeEditorHandle) => void;\n}\n\n/** 代码编辑器：语法高亮、括号匹配、缩进、搜索，颜色跟随主题 */\nexport const CodeEditor = _component(\n  ({\n    _value: value = _bindable(''),\n    'aria-label': label,\n    language,\n    readonly,\n    onReady,\n    ...rest\n  }: CodeEditorProps) => {\n    const config = useConfig();\n    let host = _state.raw<HTMLElement | null>(null);\n    let editor: CodeEditorHandle | undefined;\n    const isDark = () => config.theme.colorScheme === 'dark';\n\n    onMounted(() => {\n      editor = createEditor(host!, {\n        code: value,\n        dark: isDark(),\n        label,\n        language,\n        readonly,\n        onChange: (code) => (value = code),\n      });\n      onReady?.(editor);\n    });\n    onBeforeUnmount(() => editor?.destroy());\n    watch(\n      () => value,\n      (code) => editor?.setCode(code),\n    );\n    watch(isDark, (dark) => editor?.setDark(dark));\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: [inputRecipe().root, styles.root] }, rest, {\n          ref: _toRef(host),\n        })}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;AAkBA,IAAM,SAAS,IAAI,OAAO,EAExB,MAAM;CACJ,SAAS;CACT,QAAQ;CACR,eAAe;CACf,UAAU;AACZ,EACF,CAAC;;;AAiBD,IAAa,aAAa,0BACxB,QAAA,SAOuB;CAAA,MAAA,QAAAA,SAAA,QAAA,gBANK,IAAE,KAAA,IAAA;CAAA,MAAA,QAAAC,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAKzB,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,SAAS,UAAU;CACzB,IAAI,OAAIC,WAAkC,IAAI;CAC9C,IAAI;CACJ,MAAM,eAAe,OAAO,MAAM,gBAAgB;CAElD,gBAAgB;EACd,SAAS,aAAY,KAAA,OAAQ;GAC3B,MAAI,MAAA;GACJ,MAAM,OAAO;GACb,OAAK,MAAA;GACL,UAAQ,SAAA;GACR,UAAQ,SAAA;GACR,WAAW,SAAU,MAAA,QAAQ;EAC/B,CAAC;EACD,QAAA,QAAU,MAAM;CAClB,CAAC;CACD,sBAAsB,QAAQ,QAAQ,CAAC;CACvC,YACE,MAAA,QACC,SAAS,QAAQ,QAAQ,IAAI,CAChC;CACA,MAAM,SAAS,SAAS,QAAQ,QAAQ,IAAI,CAAC;CAE7C,aAAOC,YAAA,OAEC,WAAkB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,OAAO,IAAI,EAAE,GAAG,MAAM,EACrE,KAAG,KACL,CAAC,GAAC,IAAA;AAGR,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/code-editor/editor.d.ts

@@ -0,0 +1,52 @@
+import { type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+/** 一处修改：把 [from, to) 换成 insert */
+export interface CodeChange {
+    /** 开始位置（字符偏移，含） */
+    readonly from: number;
+    /** 结束位置（不含）；等于 from 时是插入 */
+    readonly to: number;
+    /** 换上的文字；空串是删除 */
+    readonly insert: string;
+}
+/** 编辑器实例的操作 */
+export interface CodeEditorHandle {
+    /** CodeMirror 的视图：读状态（view.state）、派发修改、做撤销等更细的操作 */
+    readonly view: EditorView;
+    /** 换掉全部代码（与当前内容相同时什么都不做） */
+    setCode(code: string): void;
+    /**
+     * 改几段代码（位置都按改之前的），当作用户的修改：进撤销历史、回传 onChange。
+     * 默认单独成一步撤销（可视化编辑器的一次操作）；merge 为 true 时像打字一样，与紧挨着的上一次修改合成一步（属性面板里逐字输入）
+     */
+    edit(changes: readonly CodeChange[], options?: {
+        merge?: boolean;
+    }): void;
+    /** 撤销一步；没有可撤销的时返回 false */
+    undo(): boolean;
+    /** 重做一步；没有可重做的时返回 false */
+    redo(): boolean;
+    /** 光标移到第几行第几列（都从 1 起，超出时取最近的）、滚进视野并聚焦：编译错误列表点一条跳过去 */
+    goTo(line: number, column?: number): void;
+    /** 跟随站点主题的明暗 */
+    setDark(dark: boolean): void;
+    /** 拆掉编辑器（组件卸载时） */
+    destroy(): void;
+}
+/** createEditor 的选项 */
+export interface CodeEditorOptions {
+    /** 初始代码 */
+    code: string;
+    /** 当前是不是暗色主题 */
+    dark: boolean;
+    /** 编辑区的无障碍名称 */
+    label: string;
+    /** 语言扩展；不给时是 TSX */
+    language?: Extension;
+    /** 只读：能选中、复制、搜索，不能改 */
+    readonly?: boolean;
+    /** 用户改了代码 */
+    onChange: (code: string) => void;
+}
+/** 在 parent 里创建编辑器 */
+export declare function createEditor(parent: HTMLElement, { code, dark, label, language, readonly, onChange }: CodeEditorOptions): CodeEditorHandle;

package/dist/code-editor/editor.js

@@ -0,0 +1,225 @@
+import { colors, fontSizes, fonts, radii } from "../config/theme/tokens.js";
+import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap, indentWithTab, isolateHistory, redo, temporarilySetTabFocusMode, undo } from "@codemirror/commands";
+import { javascript } from "@codemirror/lang-javascript";
+import { HighlightStyle, bracketMatching, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting } from "@codemirror/language";
+import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+import { Annotation, Compartment, EditorState, Transaction } from "@codemirror/state";
+import { EditorView, drawSelection, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+//#region src/code-editor/editor.ts
+/**
+* 代码编辑器的内核：CodeMirror 6。CodeEditor.tsx 挂载时建一个；不用 Vue 时也可以直接调 createEditor。
+* 语言由使用方传（CodeMirror 的语言扩展，如 json()、java()），默认 TSX。
+*
+* 颜色、字体全部取主题 token（colors.code* 与 Shiki 代码块同一套），切换主题、主题编辑器调色都跟着变；
+* 明暗只影响 CodeMirror 自带的少量默认样式，用 Compartment 切换。
+* Tab 用来缩进；按 Esc 后再按 Tab 才把焦点移出编辑器（CodeMirror 的 tab-focus 模式），键盘用户不会被困住。
+*/
+var c = (token) => String(token);
+/** 标记 setCode 发起的修改：不当作用户编辑回传 */
+var external = Annotation.define();
+var highlightStyle = HighlightStyle.define([
+	{
+		tag: [
+			tags.keyword,
+			tags.modifier,
+			tags.operatorKeyword,
+			tags.self
+		],
+		color: c(colors.codeKeyword)
+	},
+	{
+		tag: [
+			tags.string,
+			tags.special(tags.string),
+			tags.regexp
+		],
+		color: c(colors.codeString)
+	},
+	{
+		tag: [
+			tags.number,
+			tags.bool,
+			tags.null,
+			tags.atom
+		],
+		color: c(colors.codeNumber)
+	},
+	{
+		tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],
+		color: c(colors.codeFunction)
+	},
+	{
+		tag: [
+			tags.typeName,
+			tags.className,
+			tags.namespace
+		],
+		color: c(colors.codeType)
+	},
+	{
+		tag: tags.comment,
+		color: c(colors.codeComment),
+		fontStyle: "italic"
+	},
+	{
+		tag: [tags.punctuation, tags.angleBracket],
+		color: c(colors.codeComment)
+	},
+	{
+		tag: tags.tagName,
+		color: c(colors.codeTag)
+	},
+	{
+		tag: tags.attributeName,
+		color: c(colors.codeAttribute)
+	},
+	{
+		tag: tags.invalid,
+		color: c(colors.dangerText)
+	}
+]);
+var theme = EditorView.theme({
+	"&": {
+		height: "100%",
+		color: c(colors.text),
+		backgroundColor: c(colors.surface),
+		fontSize: c(fontSizes.sm)
+	},
+	"&.cm-focused": { outline: "none" },
+	".cm-scroller": {
+		fontFamily: c(fonts.mono),
+		lineHeight: "1.6",
+		scrollbarWidth: "thin",
+		scrollbarColor: `color-mix(in srgb, ${c(colors.textMuted)} 50%, transparent) transparent`
+	},
+	".cm-content": {
+		caretColor: c(colors.text),
+		paddingBlock: "12px"
+	},
+	".cm-cursor, .cm-dropCursor": { borderLeftColor: c(colors.text) },
+	"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": { backgroundColor: c(colors.selection) },
+	".cm-activeLine": { backgroundColor: c(colors.surfaceMuted) },
+	".cm-gutters": {
+		color: c(colors.codeComment),
+		backgroundColor: c(colors.surface),
+		border: "none"
+	},
+	".cm-activeLineGutter": {
+		color: c(colors.text),
+		backgroundColor: c(colors.surfaceMuted)
+	},
+	"&.cm-focused .cm-matchingBracket": {
+		backgroundColor: c(colors.accentSoft),
+		outline: `1px solid ${c(colors.accentBorder)}`
+	},
+	".cm-selectionMatch, .cm-searchMatch": { backgroundColor: c(colors.highlight) },
+	".cm-tooltip": {
+		color: c(colors.text),
+		backgroundColor: c(colors.surfaceRaised),
+		border: `1px solid ${c(colors.border)}`,
+		borderRadius: c(radii.md),
+		overflow: "hidden"
+	},
+	".cm-tooltip-autocomplete > ul": { fontFamily: c(fonts.mono) },
+	".cm-tooltip-autocomplete > ul > li[aria-selected]": {
+		color: c(colors.text),
+		backgroundColor: c(colors.accentSoft)
+	},
+	".cm-panels": {
+		color: c(colors.text),
+		backgroundColor: c(colors.surfaceMuted)
+	},
+	".cm-panels-bottom": { borderTop: `1px solid ${c(colors.border)}` }
+});
+/** 在 parent 里创建编辑器 */
+function createEditor(parent, { code, dark, label, language, readonly, onChange }) {
+	const darkMode = new Compartment();
+	const view = new EditorView({
+		parent,
+		state: EditorState.create({
+			doc: code,
+			extensions: [
+				lineNumbers(),
+				highlightActiveLineGutter(),
+				foldGutter(),
+				history(),
+				drawSelection(),
+				indentOnInput(),
+				bracketMatching(),
+				closeBrackets(),
+				autocompletion(),
+				highlightActiveLine(),
+				highlightSelectionMatches(),
+				language ?? javascript({
+					jsx: true,
+					typescript: true
+				}),
+				EditorState.readOnly.of(readonly === true),
+				syntaxHighlighting(highlightStyle),
+				EditorState.tabSize.of(2),
+				theme,
+				darkMode.of(EditorView.darkTheme.of(dark)),
+				EditorView.contentAttributes.of({ "aria-label": label }),
+				keymap.of([
+					...closeBracketsKeymap,
+					...completionKeymap,
+					...searchKeymap,
+					...foldKeymap,
+					...historyKeymap,
+					...defaultKeymap,
+					{
+						key: "Escape",
+						run: temporarilySetTabFocusMode
+					},
+					indentWithTab
+				]),
+				EditorView.updateListener.of((update) => {
+					if (update.docChanged && update.transactions.some((tr) => !tr.annotation(external))) onChange(update.state.doc.toString());
+				})
+			]
+		})
+	});
+	return {
+		view,
+		setCode(next) {
+			if (next === view.state.doc.toString()) return;
+			view.dispatch({
+				changes: {
+					from: 0,
+					to: view.state.doc.length,
+					insert: next
+				},
+				annotations: external.of(true)
+			});
+		},
+		edit(changes, { merge = false } = {}) {
+			if (changes.length === 0) return;
+			view.dispatch({
+				changes: [...changes],
+				annotations: merge ? Transaction.userEvent.of("input.type") : isolateHistory.of("full")
+			});
+		},
+		undo: () => undo(view),
+		redo: () => redo(view),
+		goTo(line, column = 1) {
+			const doc = view.state.doc;
+			const target = doc.line(Math.min(Math.max(line, 1), doc.lines));
+			const pos = target.from + Math.min(Math.max(column - 1, 0), target.length);
+			view.dispatch({
+				selection: { anchor: pos },
+				effects: EditorView.scrollIntoView(pos, { y: "center" })
+			});
+			view.focus();
+		},
+		setDark(next) {
+			view.dispatch({ effects: darkMode.reconfigure(EditorView.darkTheme.of(next)) });
+		},
+		destroy: () => view.destroy()
+	};
+}
+//#endregion
+export { createEditor };
+
+//# sourceMappingURL=editor.js.map

package/dist/code-editor/editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.js","names":[],"sources":["../../src/code-editor/editor.ts"],"sourcesContent":["/**\n * 代码编辑器的内核：CodeMirror 6。CodeEditor.tsx 挂载时建一个；不用 Vue 时也可以直接调 createEditor。\n * 语言由使用方传（CodeMirror 的语言扩展，如 json()、java()），默认 TSX。\n *\n * 颜色、字体全部取主题 token（colors.code* 与 Shiki 代码块同一套），切换主题、主题编辑器调色都跟着变；\n * 明暗只影响 CodeMirror 自带的少量默认样式，用 Compartment 切换。\n * Tab 用来缩进；按 Esc 后再按 Tab 才把焦点移出编辑器（CodeMirror 的 tab-focus 模式），键盘用户不会被困住。\n */\nimport {\n  autocompletion,\n  closeBrackets,\n  closeBracketsKeymap,\n  completionKeymap,\n} from '@codemirror/autocomplete';\nimport {\n  defaultKeymap,\n  history,\n  historyKeymap,\n  indentWithTab,\n  isolateHistory,\n  redo,\n  temporarilySetTabFocusMode,\n  undo,\n} from '@codemirror/commands';\nimport { javascript } from '@codemirror/lang-javascript';\nimport {\n  bracketMatching,\n  foldGutter,\n  foldKeymap,\n  HighlightStyle,\n  indentOnInput,\n  syntaxHighlighting,\n} from '@codemirror/language';\nimport { highlightSelectionMatches, searchKeymap } from '@codemirror/search';\nimport {\n  Annotation,\n  Compartment,\n  EditorState,\n  Transaction,\n  type Extension,\n} from '@codemirror/state';\nimport {\n  drawSelection,\n  EditorView,\n  highlightActiveLine,\n  highlightActiveLineGutter,\n  keymap,\n  lineNumbers,\n} from '@codemirror/view';\nimport { tags } from '@lezer/highlight';\nimport { colors, fonts, fontSizes, radii } from '../config/theme/tokens';\n\n// token 在运行时是 var(--哈希) 字符串\nconst c = (token: unknown) => String(token);\n\n/** 标记 setCode 发起的修改：不当作用户编辑回传 */\nconst external = Annotation.define<boolean>();\n\nconst highlightStyle = HighlightStyle.define([\n  {\n    tag: [tags.keyword, tags.modifier, tags.operatorKeyword, tags.self],\n    color: c(colors.codeKeyword),\n  },\n  { tag: [tags.string, tags.special(tags.string), tags.regexp], color: c(colors.codeString) },\n  { tag: [tags.number, tags.bool, tags.null, tags.atom], color: c(colors.codeNumber) },\n  {\n    tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],\n    color: c(colors.codeFunction),\n  },\n  { tag: [tags.typeName, tags.className, tags.namespace], color: c(colors.codeType) },\n  { tag: tags.comment, color: c(colors.codeComment), fontStyle: 'italic' },\n  { tag: [tags.punctuation, tags.angleBracket], color: c(colors.codeComment) },\n  { tag: tags.tagName, color: c(colors.codeTag) },\n  { tag: tags.attributeName, color: c(colors.codeAttribute) },\n  { tag: tags.invalid, color: c(colors.dangerText) },\n]);\n\nconst theme = EditorView.theme({\n  '&': {\n    height: '100%',\n    color: c(colors.text),\n    backgroundColor: c(colors.surface),\n    fontSize: c(fontSizes.sm),\n  },\n  // 外框（CodeEditor）画焦点环\n  '&.cm-focused': { outline: 'none' },\n  '.cm-scroller': {\n    fontFamily: c(fonts.mono),\n    lineHeight: '1.6',\n    // CodeMirror 自己管滚动，套不了 ScrollArea：原生滚动条改细，滑块取浮层滚动条（scrollAreaBarStyles.thumb）的颜色，外观一致\n    scrollbarWidth: 'thin',\n    scrollbarColor: `color-mix(in srgb, ${c(colors.textMuted)} 50%, transparent) transparent`,\n  },\n  '.cm-content': { caretColor: c(colors.text), paddingBlock: '12px' },\n  '.cm-cursor, .cm-dropCursor': { borderLeftColor: c(colors.text) },\n  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':\n    { backgroundColor: c(colors.selection) },\n  '.cm-activeLine': { backgroundColor: c(colors.surfaceMuted) },\n  // 行号与 CodeBlock 的同色：textPlaceholder 在编辑器底色上不到 4.5:1\n  '.cm-gutters': {\n    color: c(colors.codeComment),\n    backgroundColor: c(colors.surface),\n    border: 'none',\n  },\n  '.cm-activeLineGutter': { color: c(colors.text), backgroundColor: c(colors.surfaceMuted) },\n  '&.cm-focused .cm-matchingBracket': {\n    backgroundColor: c(colors.accentSoft),\n    outline: `1px solid ${c(colors.accentBorder)}`,\n  },\n  '.cm-selectionMatch, .cm-searchMatch': { backgroundColor: c(colors.highlight) },\n  '.cm-tooltip': {\n    color: c(colors.text),\n    backgroundColor: c(colors.surfaceRaised),\n    border: `1px solid ${c(colors.border)}`,\n    borderRadius: c(radii.md),\n    overflow: 'hidden',\n  },\n  '.cm-tooltip-autocomplete > ul': { fontFamily: c(fonts.mono) },\n  '.cm-tooltip-autocomplete > ul > li[aria-selected]': {\n    color: c(colors.text),\n    backgroundColor: c(colors.accentSoft),\n  },\n  '.cm-panels': { color: c(colors.text), backgroundColor: c(colors.surfaceMuted) },\n  '.cm-panels-bottom': { borderTop: `1px solid ${c(colors.border)}` },\n});\n\n/** 一处修改：把 [from, to) 换成 insert */\nexport interface CodeChange {\n  /** 开始位置（字符偏移，含） */\n  readonly from: number;\n  /** 结束位置（不含）；等于 from 时是插入 */\n  readonly to: number;\n  /** 换上的文字；空串是删除 */\n  readonly insert: string;\n}\n\n/** 编辑器实例的操作 */\nexport interface CodeEditorHandle {\n  /** CodeMirror 的视图：读状态（view.state）、派发修改、做撤销等更细的操作 */\n  readonly view: EditorView;\n  /** 换掉全部代码（与当前内容相同时什么都不做） */\n  setCode(code: string): void;\n  /**\n   * 改几段代码（位置都按改之前的），当作用户的修改：进撤销历史、回传 onChange。\n   * 默认单独成一步撤销（可视化编辑器的一次操作）；merge 为 true 时像打字一样，与紧挨着的上一次修改合成一步（属性面板里逐字输入）\n   */\n  edit(changes: readonly CodeChange[], options?: { merge?: boolean }): void;\n  /** 撤销一步；没有可撤销的时返回 false */\n  undo(): boolean;\n  /** 重做一步；没有可重做的时返回 false */\n  redo(): boolean;\n  /** 光标移到第几行第几列（都从 1 起，超出时取最近的）、滚进视野并聚焦：编译错误列表点一条跳过去 */\n  goTo(line: number, column?: number): void;\n  /** 跟随站点主题的明暗 */\n  setDark(dark: boolean): void;\n  /** 拆掉编辑器（组件卸载时） */\n  destroy(): void;\n}\n\n/** createEditor 的选项 */\nexport interface CodeEditorOptions {\n  /** 初始代码 */\n  code: string;\n  /** 当前是不是暗色主题 */\n  dark: boolean;\n  /** 编辑区的无障碍名称 */\n  label: string;\n  /** 语言扩展；不给时是 TSX */\n  language?: Extension;\n  /** 只读：能选中、复制、搜索，不能改 */\n  readonly?: boolean;\n  /** 用户改了代码 */\n  onChange: (code: string) => void;\n}\n\n/** 在 parent 里创建编辑器 */\nexport function createEditor(\n  parent: HTMLElement,\n  { code, dark, label, language, readonly, onChange }: CodeEditorOptions,\n): CodeEditorHandle {\n  const darkMode = new Compartment();\n  const view = new EditorView({\n    parent,\n    state: EditorState.create({\n      doc: code,\n      extensions: [\n        lineNumbers(),\n        highlightActiveLineGutter(),\n        foldGutter(),\n        history(),\n        drawSelection(),\n        indentOnInput(),\n        bracketMatching(),\n        closeBrackets(),\n        autocompletion(),\n        highlightActiveLine(),\n        highlightSelectionMatches(),\n        language ?? javascript({ jsx: true, typescript: true }),\n        EditorState.readOnly.of(readonly === true),\n        syntaxHighlighting(highlightStyle),\n        EditorState.tabSize.of(2),\n        theme,\n        darkMode.of(EditorView.darkTheme.of(dark)),\n        EditorView.contentAttributes.of({ 'aria-label': label }),\n        keymap.of([\n          ...closeBracketsKeymap,\n          ...completionKeymap,\n          ...searchKeymap,\n          ...foldKeymap,\n          ...historyKeymap,\n          ...defaultKeymap,\n          // 补全、搜索面板没有接住的 Esc：下一次 Tab 移出焦点\n          { key: 'Escape', run: temporarilySetTabFocusMode },\n          indentWithTab,\n        ]),\n        EditorView.updateListener.of((update) => {\n          if (update.docChanged && update.transactions.some((tr) => !tr.annotation(external)))\n            onChange(update.state.doc.toString());\n        }),\n      ],\n    }),\n  });\n  return {\n    view,\n    setCode(next) {\n      if (next === view.state.doc.toString()) return;\n      view.dispatch({\n        changes: { from: 0, to: view.state.doc.length, insert: next },\n        annotations: external.of(true),\n      });\n    },\n    edit(changes, { merge = false } = {}) {\n      if (changes.length === 0) return;\n      view.dispatch({\n        changes: [...changes],\n        annotations: merge ? Transaction.userEvent.of('input.type') : isolateHistory.of('full'),\n      });\n    },\n    undo: () => undo(view),\n    redo: () => redo(view),\n    goTo(line, column = 1) {\n      const doc = view.state.doc;\n      const target = doc.line(Math.min(Math.max(line, 1), doc.lines));\n      const pos = target.from + Math.min(Math.max(column - 1, 0), target.length);\n      view.dispatch({\n        selection: { anchor: pos },\n        effects: EditorView.scrollIntoView(pos, { y: 'center' }),\n      });\n      view.focus();\n    },\n    setDark(next) {\n      view.dispatch({ effects: darkMode.reconfigure(EditorView.darkTheme.of(next)) });\n    },\n    destroy: () => view.destroy(),\n  };\n}\n"],"mappings":"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"}

package/dist/code-editor/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 代码编辑器（子路径 `@zerodep-dev/vue-tsx-pro-ui/code-editor`）：CodeMirror 6，颜色、字体取主题 token；Esc 后 Tab 移出焦点。
+ * 依赖可选的 peer：@codemirror/*（autocomplete、commands、lang-javascript、language、search、state、view）与 @lezer/highlight，用到时安装。
+ *
+ *   import { CodeEditor } from '@zerodep-dev/vue-tsx-pro-ui/code-editor';
+ *   <CodeEditor _value={source} aria-label="表单源码" />
+ */
+export { CodeEditor, type CodeEditorProps } from './CodeEditor';
+export { createEditor, type CodeChange, type CodeEditorHandle, type CodeEditorOptions, } from './editor';

package/dist/code-editor/index.js

@@ -0,0 +1,3 @@
+import { createEditor } from "./editor.js";
+import { CodeEditor } from "./CodeEditor.js";
+export { CodeEditor, createEditor };