@astryx-vue/lab 0.4.0 → 0.5.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { MaybeRef, VNodeChild } from "vue";
-import { FieldStatusInput, IconSize, PopoverAlignment, PopoverPlacement, SyntaxThemeDefinition } from "@astryx-vue/core";
+import { FieldStatusInput, IconSize, PopoverAlignment, PopoverPlacement, SyntaxThemeDefinition, TokenLine } from "@astryx-vue/core";
 //#region src/CircularProgress/types.d.ts
 /** Variants a theme can extend through declaration merging in TypeScript. */
 interface CircularProgressVariantMap {
@@ -77,14 +77,47 @@ declare const __VLS_base$6: import("vue").DefineComponent<CircularProgressProps,
   isIndeterminate: boolean;
   isDisabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export$11: __VLS_WithSlots$6<typeof __VLS_base$6, __VLS_Slots$6>;
-declare const _default: typeof __VLS_export$11;
+declare const __VLS_export$12: __VLS_WithSlots$6<typeof __VLS_base$6, __VLS_Slots$6>;
+declare const _default: typeof __VLS_export$12;
 type __VLS_WithSlots$6<T, S> = T & {
   new (): {
     $slots: S;
   };
 };
 //#endregion
+//#region src/CodeEditor/types.d.ts
+interface CodeEditorProps {
+  /** 受控文本。 */
+  value: string;
+  /** 高亮语言，默认 plaintext。 */
+  language?: string;
+  /** 可编辑区域的无障碍名称。 */
+  label: string;
+  hasLineNumbers?: boolean;
+  isReadOnly?: boolean;
+  placeholder?: string;
+  maxHeight?: number | string;
+  size?: 'sm' | 'md';
+  tokenizer?: (code: string, language: string) => TokenLine[];
+  /** 告诉读屏用户如何离开 Tab 缩进区域。 */
+  escapeHint?: string;
+}
+interface CodeEditorEmits {
+  change: [value: string];
+}
+//#endregion
+//#region src/CodeEditor/CodeEditor.vue.d.ts
+declare const __VLS_export$11: import("vue").DefineComponent<CodeEditorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  change: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<CodeEditorProps> & Readonly<{
+  onChange?: ((value: string) => any) | undefined;
+}>, {
+  size: "md" | "sm";
+  language: string;
+  escapeHint: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default$1: typeof __VLS_export$11;
+//#endregion
 //#region src/DiffViewer/diffTypes.d.ts
 /**
  * @file diffTypes.ts
@@ -300,9 +333,9 @@ declare const __VLS_base$5: import("vue").DefineComponent<DiffViewerProps, {}, {
 }>, {
   label: string;
   maxHeight: string | number;
-  viewMode: DiffViewerViewMode;
   language: string;
   hasLineNumbers: boolean;
+  viewMode: DiffViewerViewMode;
   isWrapped: boolean;
   inlineHighlight: DiffViewerInlineHighlight;
   changeIndicator: DiffViewerChangeIndicator;
@@ -314,7 +347,7 @@ declare const __VLS_base$5: import("vue").DefineComponent<DiffViewerProps, {}, {
   renderLineAnnotation: (ref: DiffViewerLineRef) => import("vue").VNodeChild;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$10: __VLS_WithSlots$5<typeof __VLS_base$5, __VLS_Slots$5>;
-declare const _default$1: typeof __VLS_export$10;
+declare const _default$2: typeof __VLS_export$10;
 type __VLS_WithSlots$5<T, S> = T & {
   new (): {
     $slots: S;
@@ -399,7 +432,7 @@ declare const __VLS_base$4: import("vue").DefineComponent<InfoTipProps, {}, {},
   content: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$9: __VLS_WithSlots$4<typeof __VLS_base$4, __VLS_Slots$4>;
-declare const _default$2: typeof __VLS_export$9;
+declare const _default$3: typeof __VLS_export$9;
 type __VLS_WithSlots$4<T, S> = T & {
   new (): {
     $slots: S;
@@ -529,7 +562,7 @@ declare const __VLS_export$8: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_
 }>) => import("vue").VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const _default$3: typeof __VLS_export$8;
+declare const _default$4: typeof __VLS_export$8;
 type __VLS_PrettifyLocal$3<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
 //#endregion
 //#region src/LogStream/types.d.ts
@@ -615,7 +648,7 @@ declare const __VLS_base$3: import("vue").DefineComponent<__VLS_PublicProps, {},
   hasTimestamps: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$7: __VLS_WithSlots$3<typeof __VLS_base$3, __VLS_Slots$3>;
-declare const _default$4: typeof __VLS_export$7;
+declare const _default$5: typeof __VLS_export$7;
 type __VLS_WithSlots$3<T, S> = T & {
   new (): {
     $slots: S;
@@ -706,7 +739,7 @@ declare const __VLS_export$6: <T extends SearchableItem>(__VLS_props: NonNullabl
 }>) => import("vue").VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const _default$5: typeof __VLS_export$6;
+declare const _default$6: typeof __VLS_export$6;
 type __VLS_PrettifyLocal$2<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
 //#endregion
 //#region src/Stat/types.d.ts
@@ -758,7 +791,7 @@ declare const __VLS_base$2: import("vue").DefineComponent<StatProps, {}, {}, {},
   size: StatSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$5: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
-declare const _default$7: typeof __VLS_export$5;
+declare const _default$8: typeof __VLS_export$5;
 type __VLS_WithSlots$2<T, S> = T & {
   new (): {
     $slots: S;
@@ -906,7 +939,7 @@ declare const __VLS_export$4: import("vue").DefineComponent<SVGIconProps, {}, {}
   variation: SVGIconVariation;
   color: SVGIconColor;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default$6: typeof __VLS_export$4;
+declare const _default$7: typeof __VLS_export$4;
 //#endregion
 //#region src/SVGIcon/types-xif.d.ts
 /**
@@ -1090,7 +1123,7 @@ declare const __VLS_base$1: import("vue").DefineComponent<TourProps, {}, {}, {},
   isStepCountShown: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$3: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
-declare const _default$8: typeof __VLS_export$3;
+declare const _default$9: typeof __VLS_export$3;
 type __VLS_WithSlots$1<T, S> = T & {
   new (): {
     $slots: S;
@@ -1101,7 +1134,7 @@ type __VLS_WithSlots$1<T, S> = T & {
 type __VLS_Slots = TourStepSlots;
 declare const __VLS_base: any;
 declare const __VLS_export$2: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default$9: typeof __VLS_export$2;
+declare const _default$10: typeof __VLS_export$2;
 type __VLS_WithSlots<T, S> = T & {
   new (): {
     $slots: S;
@@ -1203,7 +1236,7 @@ declare const __VLS_export$1: <T extends string>(__VLS_props: NonNullable<Awaite
 }>) => import("vue").VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const _default$10: typeof __VLS_export$1;
+declare const _default$11: typeof __VLS_export$1;
 type __VLS_PrettifyLocal$1<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
 //#endregion
 //#region src/TransferList/TransferListSelector.vue.d.ts
@@ -1259,7 +1292,7 @@ declare const __VLS_export: <T extends string>(__VLS_props: NonNullable<Awaited<
 }>) => import("vue").VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const _default$11: typeof __VLS_export;
+declare const _default$12: typeof __VLS_export;
 type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
 //#endregion
-export { _default as CircularProgress, type CircularProgressProps, type CircularProgressSize, type CircularProgressVariant, type CircularProgressVariantMap, type CreateDiffFileOptions, _default$1 as DiffViewer, type DiffViewerChangeIndicator, type DiffViewerEmits, type DiffViewerFile, type DiffViewerFileStatus, type DiffViewerHunk, type DiffViewerInlineHighlight, type DiffViewerLine, type DiffViewerLineKind, type DiffViewerLineRef, type DiffViewerProps, type DiffViewerSide, type DiffViewerSlots, type DiffViewerViewMode, type IconShape, type IconShapeRole, _default$2 as InfoTip, type InfoTipProps, type InfoTipSize, type InlineDiffGranularity, type InlineDiffResult, type InlineRange, _default$3 as ListInput, type ListInputChange, type ListInputColumn, type ListInputColumnWidth, type ListInputEmits, type ListInputProps, type ListInputRenderContext, type ListInputValueContext, type LogEntry, _default$4 as LogStream, type LogStreamEmits, type LogStreamLevel, type LogStreamProps, _default$5 as MobileTokenizer, type MobileTokenizerChange, type MobileTokenizerEmits, type MobileTokenizerProps, type PanelGroup, type PanelRow, type PathPersonality, _default$6 as SVGIcon, type SVGIconColor, type SVGIconDef, type SVGIconProps, type SVGIconSize, type SVGIconVariation, type SearchSource, type SearchableItem, _default$7 as Stat, type StatDelta, type StatDeltaDirection, type StatDeltaSentiment, type StatProps, type StatSize, _default$8 as Tour, type TourDismissSource, type TourEmits, type TourProps, type TourSlots, _default$9 as TourStep, type TourStepProps, type TourStepSlots, _default$10 as TransferList, type TransferListEmits, type TransferListOption, type TransferListProps, _default$11 as TransferListSelector, type TransferListSlots, type UseTourReturn, type XIFAnimate, type XIFIcon, type XIFPath, type XIFPersonality, type XIFSlot };
+export { _default as CircularProgress, type CircularProgressProps, type CircularProgressSize, type CircularProgressVariant, type CircularProgressVariantMap, _default$1 as CodeEditor, type CodeEditorEmits, type CodeEditorProps, type CreateDiffFileOptions, _default$2 as DiffViewer, type DiffViewerChangeIndicator, type DiffViewerEmits, type DiffViewerFile, type DiffViewerFileStatus, type DiffViewerHunk, type DiffViewerInlineHighlight, type DiffViewerLine, type DiffViewerLineKind, type DiffViewerLineRef, type DiffViewerProps, type DiffViewerSide, type DiffViewerSlots, type DiffViewerViewMode, type IconShape, type IconShapeRole, _default$3 as InfoTip, type InfoTipProps, type InfoTipSize, type InlineDiffGranularity, type InlineDiffResult, type InlineRange, _default$4 as ListInput, type ListInputChange, type ListInputColumn, type ListInputColumnWidth, type ListInputEmits, type ListInputProps, type ListInputRenderContext, type ListInputValueContext, type LogEntry, _default$5 as LogStream, type LogStreamEmits, type LogStreamLevel, type LogStreamProps, _default$6 as MobileTokenizer, type MobileTokenizerChange, type MobileTokenizerEmits, type MobileTokenizerProps, type PanelGroup, type PanelRow, type PathPersonality, _default$7 as SVGIcon, type SVGIconColor, type SVGIconDef, type SVGIconProps, type SVGIconSize, type SVGIconVariation, type SearchSource, type SearchableItem, _default$8 as Stat, type StatDelta, type StatDeltaDirection, type StatDeltaSentiment, type StatProps, type StatSize, _default$9 as Tour, type TourDismissSource, type TourEmits, type TourProps, type TourSlots, _default$10 as TourStep, type TourStepProps, type TourStepSlots, _default$11 as TransferList, type TransferListEmits, type TransferListOption, type TransferListProps, _default$12 as TransferListSelector, type TransferListSlots, type UseTourReturn, type XIFAnimate, type XIFIcon, type XIFPath, type XIFPersonality, type XIFSlot };

package/dist/index.js

@@ -1,6 +1,7 @@
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useAttrs, useId, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/circular-progress.css";
-import { AlertDialog, BottomSheet, Button, CheckboxIndicator, ComplexSelector, EmptyState, Field, FieldStatus, HStack, Heading, Icon, IconButton, Item, List, Popover, SyntaxTheme, Text, TextInput, Token, Tooltip, VStack, VisuallyHidden, tokenize, useAnnounce, useScrollableArea, useTranslator } from "@astryx-vue/core";
+import { AlertDialog, BottomSheet, Button, CheckboxIndicator, ComplexSelector, EmptyState, Field, FieldStatus, HStack, Heading, Icon, IconButton, Item, List, Popover, SYNC_TOKENIZE_THRESHOLD, SyntaxTheme, Text, TextInput, Token, Tooltip, VStack, VisuallyHidden, applyHighlightRangesFlat, tokenize, tokenizeAsync, useAnnounce, useScrollableArea, useTranslator } from "@astryx-vue/core";
+import "../styles/code-editor.css";
 import "../styles/diff-viewer.css";
 import "../styles/info-tip.css";
 import "../styles/list-input.css";
@@ -33,9 +34,9 @@ function defaultFormatValueLabel(value, max) {
 }
 //#endregion
 //#region src/CircularProgress/CircularProgress.vue
-const _hoisted_1$15 = ["data-size", "data-variant"];
-const _hoisted_2$13 = { class: "astryx-circular-progress__ring" };
-const _hoisted_3$11 = [
+const _hoisted_1$16 = ["data-size", "data-variant"];
+const _hoisted_2$14 = { class: "astryx-circular-progress__ring" };
+const _hoisted_3$12 = [
 	"aria-valuenow",
 	"aria-valuemin",
 	"aria-valuemax",
@@ -44,14 +45,14 @@ const _hoisted_3$11 = [
 	"height",
 	"viewBox"
 ];
-const _hoisted_4$10 = [
+const _hoisted_4$11 = [
 	"data-variant",
 	"cx",
 	"cy",
 	"r",
 	"stroke-width"
 ];
-const _hoisted_5$9 = [
+const _hoisted_5$10 = [
 	"data-variant",
 	"cx",
 	"cy",
@@ -139,7 +140,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"astryx-circular-progress__visually-hidden": !showLabel.value,
 					"astryx-circular-progress__label--disabled": showLabel.value && __props.isDisabled
 				}])
-			}, toDisplayString(__props.label), 3), createElementVNode("div", _hoisted_2$13, [(openBlock(), createElementBlock("svg", {
+			}, toDisplayString(__props.label), 3), createElementVNode("div", _hoisted_2$14, [(openBlock(), createElementBlock("svg", {
 				class: normalizeClass(["astryx-circular-progress__svg", { "astryx-circular-progress__svg--indeterminate": __props.isIndeterminate }]),
 				role: "progressbar",
 				"aria-labelledby": labelId,
@@ -157,7 +158,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				cy: geometry.value.center,
 				r: geometry.value.radius,
 				"stroke-width": geometry.value.strokeWidth
-			}, null, 8, _hoisted_4$10), __props.isIndeterminate ? (openBlock(), createElementBlock("circle", {
+			}, null, 8, _hoisted_4$11), __props.isIndeterminate ? (openBlock(), createElementBlock("circle", {
 				key: 0,
 				class: "astryx-circular-progress__fill astryx-circular-progress__fill--indeterminate",
 				"data-variant": fillVariant.value,
@@ -165,7 +166,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				cy: geometry.value.center,
 				r: geometry.value.radius,
 				"stroke-width": geometry.value.strokeWidth
-			}, null, 8, _hoisted_5$9)) : (openBlock(), createElementBlock("circle", {
+			}, null, 8, _hoisted_5$10)) : (openBlock(), createElementBlock("circle", {
 				key: 1,
 				class: "astryx-circular-progress__fill",
 				"data-variant": fillVariant.value,
@@ -175,10 +176,278 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"stroke-width": geometry.value.strokeWidth,
 				"stroke-dasharray": geometry.value.circumference,
 				"stroke-dashoffset": dashoffset.value
-			}, null, 8, _hoisted_6$8))], 10, _hoisted_3$11)), _ctx.$slots.default || hasCenterContent.value ? (openBlock(), createElementBlock("div", _hoisted_7$6, [renderSlot(_ctx.$slots, "default", {}, () => [hasCenterContent.value ? (openBlock(), createElementBlock("span", {
+			}, null, 8, _hoisted_6$8))], 10, _hoisted_3$12)), _ctx.$slots.default || hasCenterContent.value ? (openBlock(), createElementBlock("div", _hoisted_7$6, [renderSlot(_ctx.$slots, "default", {}, () => [hasCenterContent.value ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				class: normalizeClass(["astryx-circular-progress__value", { "astryx-circular-progress__value--disabled": __props.isDisabled }])
-			}, toDisplayString(valueText.value), 3)) : createCommentVNode("v-if", true)])])) : createCommentVNode("v-if", true)])], 16, _hoisted_1$15);
+			}, toDisplayString(valueText.value), 3)) : createCommentVNode("v-if", true)])])) : createCommentVNode("v-if", true)])], 16, _hoisted_1$16);
+		};
+	}
+});
+//#endregion
+//#region src/CodeEditor/keyboard.ts
+/** 把 caret 放到元素文本的字符偏移处。 */
+function setCaretAtTextOffset(element, offset) {
+	const selection = element.ownerDocument.defaultView?.getSelection();
+	if (!selection) return;
+	const range = element.ownerDocument.createRange();
+	const walker = element.ownerDocument.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+	let node = walker.nextNode();
+	let remaining = Math.max(0, offset);
+	while (node) {
+		const length = node.textContent?.length ?? 0;
+		if (remaining <= length) {
+			range.setStart(node, remaining);
+			range.collapse(true);
+			selection.removeAllRanges();
+			selection.addRange(range);
+			return;
+		}
+		remaining -= length;
+		node = walker.nextNode();
+	}
+	range.selectNodeContents(element);
+	range.collapse(false);
+	selection.removeAllRanges();
+	selection.addRange(range);
+}
+/** 当前 caret 在元素纯文本里的偏移。 */
+function caretTextOffset(element) {
+	const selection = element.ownerDocument.defaultView?.getSelection();
+	if (!selection || selection.rangeCount === 0) return null;
+	const range = selection.getRangeAt(0);
+	const before = range.cloneRange();
+	before.selectNodeContents(element);
+	before.setEnd(range.startContainer, range.startOffset);
+	return before.toString().length;
+}
+/** 用一段文本替换当前选区，并把 caret 放在新文本后面。 */
+function insertAtCaret(element, text) {
+	const selection = element.ownerDocument.defaultView?.getSelection();
+	if (!selection || selection.rangeCount === 0) return;
+	const range = selection.getRangeAt(0);
+	range.deleteContents();
+	const node = element.ownerDocument.createTextNode(text);
+	range.insertNode(node);
+	range.setStartAfter(node);
+	range.setEndAfter(node);
+	selection.removeAllRanges();
+	selection.addRange(range);
+}
+/** 去掉当前行开头最多两个空格，返回新文本和 caret 应到的位置。 */
+function outdentCurrentLine(element) {
+	const offset = caretTextOffset(element);
+	if (offset == null) return null;
+	const value = element.textContent ?? "";
+	const lineStart = value.lastIndexOf("\n", offset - 1) + 1;
+	const line = value.slice(lineStart);
+	const removeCount = line.startsWith("  ") ? 2 : line.startsWith(" ") ? 1 : 0;
+	if (removeCount === 0) return null;
+	return {
+		value: `${value.slice(0, lineStart)}${value.slice(lineStart + removeCount)}`,
+		caret: offset - Math.min(removeCount, Math.max(0, offset - lineStart))
+	};
+}
+//#endregion
+//#region src/CodeEditor/CodeEditor.vue
+const _hoisted_1$15 = ["data-size", "data-language"];
+const _hoisted_2$13 = {
+	key: 0,
+	class: "astryx-code-editor__gutter",
+	"aria-hidden": "true"
+};
+const _hoisted_3$11 = { class: "astryx-code-editor__body" };
+const _hoisted_4$10 = {
+	key: 0,
+	class: "astryx-code-editor__placeholder",
+	"aria-hidden": "true"
+};
+const _hoisted_5$9 = [
+	"contenteditable",
+	"aria-label",
+	"aria-readonly",
+	"aria-describedby"
+];
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxCodeEditor",
+	__name: "CodeEditor",
+	props: {
+		value: {},
+		language: { default: "plaintext" },
+		label: {},
+		hasLineNumbers: { type: Boolean },
+		isReadOnly: { type: Boolean },
+		placeholder: {},
+		maxHeight: {},
+		size: { default: "md" },
+		tokenizer: {},
+		escapeHint: { default: "Press Escape then Tab to move focus out of the editor." }
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const editor = useTemplateRef("editor");
+		const focused = ref(false);
+		const composing = ref(false);
+		const tabMovesFocus = ref(false);
+		const hintId = `astryx-code-editor-${useId()}-escape`;
+		const lines = computed(() => props.value.split("\n"));
+		const showPlaceholder = computed(() => props.value === "" && Boolean(props.placeholder));
+		const containerStyle = computed(() => props.maxHeight == null ? void 0 : { maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight });
+		const AUTO_CLOSE_PAIRS = {
+			"(": ")",
+			"[": "]",
+			"{": "}",
+			"\"": "\"",
+			"'": "'",
+			"`": "`"
+		};
+		const MODE_NEUTRAL_KEYS = /* @__PURE__ */ new Set([
+			"Shift",
+			"Control",
+			"Alt",
+			"Meta",
+			"CapsLock"
+		]);
+		let highlightCleanup;
+		let highlightAbort;
+		function hasHighlightAPI() {
+			return typeof CSS !== "undefined" && "highlights" in CSS && typeof Highlight !== "undefined";
+		}
+		function paint(tokens, element) {
+			highlightCleanup?.();
+			highlightCleanup = tokens.length === 0 ? void 0 : applyHighlightRangesFlat(element, tokens);
+		}
+		function paintCurrent() {
+			const element = editor.value;
+			if (!element || !hasHighlightAPI()) return;
+			highlightAbort?.abort();
+			highlightCleanup?.();
+			highlightCleanup = void 0;
+			const custom = props.tokenizer;
+			if (props.value.length >= SYNC_TOKENIZE_THRESHOLD && custom == null) {
+				const controller = new AbortController();
+				highlightAbort = controller;
+				tokenizeAsync(props.value, props.language, controller.signal).then((tokens) => {
+					if (!controller.signal.aborted && editor.value === element) paint(tokens, element);
+				});
+				return;
+			}
+			paint((custom ?? tokenize)(props.value, props.language), element);
+		}
+		watch([
+			() => props.value,
+			() => props.language,
+			() => props.tokenizer
+		], () => {
+			nextTick(paintCurrent);
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		watch(() => props.value, (value) => {
+			const element = editor.value;
+			if (element && element.textContent !== value) element.textContent = value;
+		}, { flush: "post" });
+		onBeforeUnmount(() => {
+			highlightAbort?.abort();
+			highlightCleanup?.();
+		});
+		function commit() {
+			emit("change", editor.value?.textContent ?? "");
+		}
+		function onInput() {
+			if (!composing.value) commit();
+		}
+		function onKeydown(event) {
+			if (props.isReadOnly) return;
+			if (event.key === "Escape") {
+				if (!event.defaultPrevented) tabMovesFocus.value = true;
+				return;
+			}
+			const element = editor.value;
+			if (!element) return;
+			if (event.key === "Tab") {
+				if (tabMovesFocus.value) {
+					tabMovesFocus.value = false;
+					return;
+				}
+				event.preventDefault();
+				if (event.shiftKey) {
+					const result = outdentCurrentLine(element);
+					if (result == null) return;
+					element.textContent = result.value;
+					setCaretAtTextOffset(element, result.caret);
+				} else insertAtCaret(element, "  ");
+				commit();
+				return;
+			}
+			if (!MODE_NEUTRAL_KEYS.has(event.key)) tabMovesFocus.value = false;
+			if (event.key === "Enter") {
+				event.preventDefault();
+				const offset = caretTextOffset(element);
+				if (offset == null) return;
+				const before = (element.textContent ?? "").slice(0, offset);
+				insertAtCaret(element, `\n${before.slice(before.lastIndexOf("\n") + 1).match(/^\s*/)?.[0] ?? ""}`);
+				commit();
+				return;
+			}
+			const close = AUTO_CLOSE_PAIRS[event.key];
+			if (close) {
+				const selection = element.ownerDocument.defaultView?.getSelection();
+				if (!selection || selection.rangeCount === 0 || !selection.getRangeAt(0).collapsed) return;
+				event.preventDefault();
+				insertAtCaret(element, `${event.key}${close}`);
+				const offset = caretTextOffset(element);
+				if (offset != null) setCaretAtTextOffset(element, offset - close.length);
+				commit();
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["astryx-code-editor", { "is-focused": focused.value }]),
+				"data-size": __props.size,
+				"data-language": __props.language
+			}, [createElementVNode("div", {
+				class: "astryx-code-editor__container",
+				style: normalizeStyle(containerStyle.value)
+			}, [__props.hasLineNumbers ? (openBlock(), createElementBlock("div", _hoisted_2$13, [(openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (_, index) => {
+				return openBlock(), createElementBlock("div", { key: index }, toDisplayString(index + 1), 1);
+			}), 128))])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3$11, [
+				showPlaceholder.value ? (openBlock(), createElementBlock("div", _hoisted_4$10, toDisplayString(__props.placeholder), 1)) : createCommentVNode("v-if", true),
+				createElementVNode("code", {
+					ref_key: "editor",
+					ref: editor,
+					class: "astryx-code-editor__input",
+					contenteditable: __props.isReadOnly ? "false" : "plaintext-only",
+					tabindex: "0",
+					role: "textbox",
+					"aria-multiline": "true",
+					"aria-label": __props.label,
+					"aria-readonly": __props.isReadOnly || void 0,
+					"aria-describedby": __props.isReadOnly ? void 0 : hintId,
+					spellcheck: "false",
+					onInput,
+					onKeydown,
+					onFocus: _cache[0] || (_cache[0] = ($event) => focused.value = true),
+					onBlur: _cache[1] || (_cache[1] = ($event) => {
+						focused.value = false;
+						tabMovesFocus.value = false;
+					}),
+					onCompositionstart: _cache[2] || (_cache[2] = ($event) => composing.value = true),
+					onCompositionend: _cache[3] || (_cache[3] = ($event) => {
+						composing.value = false;
+						onInput();
+					})
+				}, toDisplayString(__props.value), 41, _hoisted_5$9),
+				!__props.isReadOnly ? (openBlock(), createBlock(unref(VisuallyHidden), {
+					key: 1,
+					id: hintId
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.escapeHint), 1)]),
+					_: 1
+				})) : createCommentVNode("v-if", true)
+			])], 4)], 10, _hoisted_1$15);
 		};
 	}
 });
@@ -531,7 +800,7 @@ const _hoisted_47 = {
 	key: 0,
 	class: "astryx-diff-viewer__annotation-content"
 };
-const _sfc_main$16 = /*@__PURE__*/ defineComponent({
+const _sfc_main$17 = /*@__PURE__*/ defineComponent({
 	name: "AstryxDiffViewerTable",
 	__name: "DiffViewerTable",
 	props: {
@@ -1262,7 +1531,7 @@ const _hoisted_11$1 = {
 	class: "astryx-diff-viewer__message"
 };
 const _hoisted_12 = ["aria-label"];
-const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 	name: "AstryxDiffViewer",
 	inheritAttrs: false,
 	__name: "DiffViewer",
@@ -1451,7 +1720,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				}), [createElementVNode("div", {
 					ref: unref(scroll).content,
 					class: "astryx-diff-viewer__content"
-				}, [createVNode(_sfc_main$16, {
+				}, [createVNode(_sfc_main$17, {
 					"view-mode": __props.viewMode,
 					"unified-rows": unifiedRows.value,
 					"split-rows": splitRows.value,
@@ -1773,7 +2042,7 @@ function parseUnifiedDiff(patch) {
 //#endregion
 //#region src/InfoTip/InfoTip.vue
 const _hoisted_1$12 = ["aria-label"];
-const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 	name: "AstryxInfoTip",
 	__name: "InfoTip",
 	props: {
@@ -1900,7 +2169,7 @@ const _hoisted_7$3 = {
 	key: 0,
 	class: "astryx-list-input__control-cell astryx-list-input__control-cell--reorder"
 };
-const _sfc_main$15 = /*@__PURE__*/ defineComponent({
+const _sfc_main$16 = /*@__PURE__*/ defineComponent({
 	name: "AstryxListInputRow",
 	__name: "ListInputRow",
 	props: {
@@ -2346,7 +2615,7 @@ const _hoisted_5$5 = {
 	class: "astryx-list-input__action-content"
 };
 const focusableFieldSelector = "[data-list-input-cell] input, [data-list-input-cell] select, [data-list-input-cell] textarea, [data-list-input-cell] button, [data-list-input-cell] [tabindex]:not([tabindex=\"-1\"])";
-const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 	name: "AstryxListInput",
 	inheritAttrs: false,
 	__name: "ListInput",
@@ -2624,7 +2893,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 						description: unref(t)("@astryx.listInput.emptyDescription", { itemName: __props.itemName }),
 						"is-compact": ""
 					}, null, 8, ["title", "description"])])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(reorder).displayValue.value, (item, index) => {
-						return openBlock(), createBlock(_sfc_main$15, {
+						return openBlock(), createBlock(_sfc_main$16, {
 							key: itemKeyOf(item),
 							item,
 							index,
@@ -2739,7 +3008,7 @@ const _hoisted_11 = {
 	key: 0,
 	class: "astryx-log-stream__detail"
 };
-const _sfc_main$14 = /*@__PURE__*/ defineComponent({
+const _sfc_main$15 = /*@__PURE__*/ defineComponent({
 	name: "AstryxLogStreamRow",
 	__name: "LogStreamRow",
 	props: {
@@ -2843,7 +3112,7 @@ function useLogFollow(options) {
 //#region src/LogStream/LogStream.vue
 const _hoisted_1$8 = ["data-variant"];
 const _hoisted_2$7 = ["aria-label", "aria-live"];
-const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 	name: "AstryxLogStream",
 	inheritAttrs: false,
 	__name: "LogStream",
@@ -2909,7 +3178,7 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 					style: normalizeStyle(scrollerStyle.value),
 					onScrollPassive: _cache[0] || (_cache[0] = (...args) => unref(handleScroll) && unref(handleScroll)(...args))
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.entries, (entry) => {
-					return renderSlot(_ctx.$slots, "entry", { entry }, () => [createVNode(_sfc_main$14, {
+					return renderSlot(_ctx.$slots, "entry", { entry }, () => [createVNode(_sfc_main$15, {
 						entry,
 						"has-timestamps": __props.hasTimestamps,
 						"has-source": hasSource.value,
@@ -3075,7 +3344,7 @@ const _hoisted_10$1 = {
 	class: "astryx-mobile-tokenizer__footer"
 };
 const CREATABLE_ID_PREFIX = "__xds_create__";
-const _sfc_main$5 = /*@__PURE__*/ defineComponent({
+const _sfc_main$6 = /*@__PURE__*/ defineComponent({
 	name: "AstryxMobileTokenizer",
 	inheritAttrs: false,
 	__name: "MobileTokenizer",
@@ -3398,7 +3667,7 @@ const _hoisted_10 = {
 	key: 1,
 	class: "astryx-stat__media"
 };
-const _sfc_main$7 = /*@__PURE__*/ defineComponent({
+const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 	name: "AstryxStat",
 	inheritAttrs: false,
 	__name: "Stat",
@@ -4255,7 +4524,7 @@ const _hoisted_6$1 = {
 	key: 1,
 	class: "astryx-svg-icon__layer astryx-svg-icon__layer--secondary-stroke"
 };
-const _sfc_main$6 = /*@__PURE__*/ defineComponent({
+const _sfc_main$7 = /*@__PURE__*/ defineComponent({
 	name: "AstryxSvgIcon",
 	inheritAttrs: false,
 	__name: "SVGIcon",
@@ -4491,7 +4760,7 @@ const xifExamples = [
 const TOUR_CONTEXT_KEY = Symbol("AstryxTour");
 //#endregion
 //#region src/Tour/Tour.vue
-const _sfc_main$8 = /*@__PURE__*/ defineComponent({
+const _sfc_main$9 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTour",
 	__name: "Tour",
 	props: {
@@ -4555,7 +4824,7 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 //#endregion
 //#region src/Tour/TourHighlight.vue
 const _hoisted_1$4 = ["data-testid"];
-const _sfc_main$13 = /*@__PURE__*/ defineComponent({
+const _sfc_main$14 = /*@__PURE__*/ defineComponent({
 	__name: "TourHighlight",
 	props: {
 		rect: {},
@@ -4599,7 +4868,7 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 //#region src/Tour/TourStep.vue
 const _hoisted_1$3 = ["data-testid"];
 const _hoisted_2$3 = { key: 1 };
-const _sfc_main$9 = /*@__PURE__*/ defineComponent({
+const _sfc_main$10 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTourStep",
 	__name: "TourStep",
 	props: {
@@ -4666,7 +4935,7 @@ const _sfc_main$9 = /*@__PURE__*/ defineComponent({
 			if (!open) tour?.onDismiss("close");
 		}
 		return (_ctx, _cache) => {
-			return unref(tour) && isActiveStep.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(_sfc_main$13, {
+			return unref(tour) && isActiveStep.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(_sfc_main$14, {
 				rect: rect.value,
 				"has-backdrop": unref(tour).hasBackdrop.value,
 				onBackdropClick: _cache[0] || (_cache[0] = ($event) => unref(tour).onDismiss("backdrop"))
@@ -4833,7 +5102,7 @@ const _hoisted_5 = {
 	class: "astryx-transfer-list-panel__group-heading"
 };
 const _hoisted_6 = ["data-transfer-list-empty"];
-const _sfc_main$12 = /*@__PURE__*/ defineComponent({
+const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferListPanel",
 	__name: "TransferListPanel",
 	props: {
@@ -5305,7 +5574,7 @@ const _hoisted_3$1 = {
 	class: "astryx-transfer-list__controls"
 };
 const _hoisted_4 = { class: "astryx-transfer-list-collection" };
-const _sfc_main$10 = /*@__PURE__*/ defineComponent({
+const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferList",
 	inheritAttrs: false,
 	__name: "TransferList",
@@ -5579,7 +5848,7 @@ const _sfc_main$10 = /*@__PURE__*/ defineComponent({
 					default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("@astryx.transferList.reorderInstructions")), 1)]),
 					_: 1
 				}),
-				createElementVNode("div", _hoisted_4, [createVNode(_sfc_main$12, {
+				createElementVNode("div", _hoisted_4, [createVNode(_sfc_main$13, {
 					side: "selected",
 					"heading-id": selectedHeadingId,
 					label: selectedLabel.value,
@@ -5615,7 +5884,7 @@ const _sfc_main$10 = /*@__PURE__*/ defineComponent({
 					"dragging-value",
 					"grabbed-value",
 					"drop-target"
-				]), createVNode(_sfc_main$12, {
+				]), createVNode(_sfc_main$13, {
 					side: "available",
 					"heading-id": availableHeadingId,
 					label: availableLabel.value,
@@ -5670,7 +5939,7 @@ const _hoisted_3 = {
 	class: "astryx-transfer-list-selector__footer"
 };
 const DEFAULT_SELECTOR_WIDTH = "min(41rem, calc(100vw - 32px))";
-const _sfc_main$11 = /*@__PURE__*/ defineComponent({
+const _sfc_main$12 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferListSelector",
 	__name: "TransferListSelector",
 	props: {
@@ -5807,7 +6076,7 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 				}, [createElementVNode("fieldset", {
 					class: "astryx-transfer-list-selector__fieldset",
 					disabled: __props.isDisabled
-				}, [createVNode(_sfc_main$10, {
+				}, [createVNode(_sfc_main$11, {
 					label: __props.label,
 					"is-label-hidden": "",
 					options: __props.options,
@@ -5886,4 +6155,4 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-export { _sfc_main as CircularProgress, _sfc_main$1 as DiffViewer, _sfc_main$2 as InfoTip, _sfc_main$3 as ListInput, _sfc_main$4 as LogStream, _sfc_main$5 as MobileTokenizer, _sfc_main$6 as SVGIcon, _sfc_main$7 as Stat, _sfc_main$8 as Tour, _sfc_main$9 as TourStep, _sfc_main$10 as TransferList, _sfc_main$11 as TransferListSelector, addCurvature, adjustTension, applyPersonality, bellIcon, calendarIcon, checkIcon, createDiffFile, eyeIcon, folderIcon, heartIcon, homeIcon, lockIcon, mailIcon, menuIcon, parseUnifiedDiff, roundCorners, searchIcon, settingsIcon, shieldIcon, starIcon, starterIcons, useTour, xIcon, xifBell, xifBellOverride, xifCheck, xifExamples, xifFile, xifHome, xifShield, xifStar };
+export { _sfc_main as CircularProgress, _sfc_main$1 as CodeEditor, _sfc_main$2 as DiffViewer, _sfc_main$3 as InfoTip, _sfc_main$4 as ListInput, _sfc_main$5 as LogStream, _sfc_main$6 as MobileTokenizer, _sfc_main$7 as SVGIcon, _sfc_main$8 as Stat, _sfc_main$9 as Tour, _sfc_main$10 as TourStep, _sfc_main$11 as TransferList, _sfc_main$12 as TransferListSelector, addCurvature, adjustTension, applyPersonality, bellIcon, calendarIcon, checkIcon, createDiffFile, eyeIcon, folderIcon, heartIcon, homeIcon, lockIcon, mailIcon, menuIcon, parseUnifiedDiff, roundCorners, searchIcon, settingsIcon, shieldIcon, starIcon, starterIcons, useTour, xIcon, xifBell, xifBellOverride, xifCheck, xifExamples, xifFile, xifHome, xifShield, xifStar };

package/lab.css

@@ -10,3 +10,4 @@
 @import './styles/list-input.css';
 @import './styles/diff-viewer.css';
 @import './styles/tour.css';
+@import './styles/code-editor.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/lab",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Astryx lab components for Vue 3 — experimental components that may change. Ships only under the canary dist-tag.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -53,7 +53,7 @@
   ],
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@astryx-vue/core": "^0.7.12"
+    "@astryx-vue/core": "^0.7.13"
   },
   "devDependencies": {
     "@types/node": "26.6.4",
@@ -64,7 +64,7 @@
     "unplugin-vue": "8.0.0",
     "vue": "3.5.43",
     "vue-tsc": "3.3.12",
-    "@astryx-vue/core": "^0.7.12"
+    "@astryx-vue/core": "^0.7.13"
   },
   "scripts": {
     "build": "tsdown",

package/styles/code-editor.css

@@ -0,0 +1,95 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-code-editor {
+    position: relative;
+    display: flex;
+    border: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #ebebeb);
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: var(--astryx-color-background-muted, #f5f5f5);
+    overflow: hidden;
+  }
+
+  .astryx-code-editor.is-focused {
+    border-color: var(--astryx-color-accent, #0064e0);
+    box-shadow: 0 0 0 1px var(--astryx-color-accent, #0064e0);
+  }
+
+  .astryx-code-editor__container {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    overflow: auto;
+  }
+
+  .astryx-code-editor__gutter {
+    flex-shrink: 0;
+    padding-block: var(--astryx-spacing-3, 12px);
+    padding-inline-start: var(--astryx-spacing-4, 16px);
+    padding-inline-end: var(--astryx-spacing-3, 12px);
+    border-inline-end: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #ebebeb);
+    color: var(--astryx-color-text-disabled, #a3a3a3);
+    font-family: var(--astryx-font-family-code, monospace);
+    line-height: var(--astryx-text-code-leading, 1.5);
+    text-align: end;
+    user-select: none;
+  }
+
+  .astryx-code-editor__body {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .astryx-code-editor__input {
+    display: block;
+    min-height: 3em;
+    margin: 0;
+    padding-block: var(--astryx-spacing-3, 12px);
+    padding-inline: var(--astryx-spacing-4, 16px);
+    color: var(--astryx-color-text-primary, #171717);
+    caret-color: var(--astryx-color-text-primary, #171717);
+    font-family: var(--astryx-font-family-code, monospace);
+    line-height: var(--astryx-text-code-leading, 1.5);
+    tab-size: 2;
+    white-space: pre;
+    word-break: normal;
+    overflow-wrap: normal;
+    outline: none;
+  }
+
+  .astryx-code-editor__input,
+  .astryx-code-editor__gutter {
+    font-size: var(--astryx-text-code-size, 14px);
+  }
+
+  .astryx-code-editor[data-size='sm'] .astryx-code-editor__input,
+  .astryx-code-editor[data-size='sm'] .astryx-code-editor__gutter {
+    font-size: var(--astryx-font-size-sm, 12px);
+  }
+
+  .astryx-code-editor__placeholder {
+    position: absolute;
+    top: var(--astryx-spacing-3, 12px);
+    inset-inline-start: var(--astryx-spacing-4, 16px);
+    color: var(--astryx-color-text-disabled, #a3a3a3);
+    font-family: var(--astryx-font-family-code, monospace);
+    line-height: var(--astryx-text-code-leading, 1.5);
+    pointer-events: none;
+    user-select: none;
+  }
+}
+
+.astryx-code-editor__input::highlight(astryx-keyword) { color: var(--astryx-code-syntax-keyword, #52237b); }
+.astryx-code-editor__input::highlight(astryx-string) { color: var(--astryx-code-syntax-string, #004800); }
+.astryx-code-editor__input::highlight(astryx-comment) { color: var(--astryx-code-syntax-comment, #605f52); }
+.astryx-code-editor__input::highlight(astryx-number) { color: var(--astryx-code-syntax-number, #622e00); }
+.astryx-code-editor__input::highlight(astryx-function) { color: var(--astryx-code-syntax-function, #203a6c); }
+.astryx-code-editor__input::highlight(astryx-type) { color: var(--astryx-code-syntax-type, #52237b); }
+.astryx-code-editor__input::highlight(astryx-tag) { color: var(--astryx-code-syntax-tag, #6d211c); }
+.astryx-code-editor__input::highlight(astryx-attribute) { color: var(--astryx-code-syntax-attribute, #413e00); }
+.astryx-code-editor__input::highlight(astryx-property) { color: var(--astryx-code-syntax-property, #203a6c); }
+.astryx-code-editor__input::highlight(astryx-operator) { color: var(--astryx-code-syntax-operator, #171717); }
+.astryx-code-editor__input::highlight(astryx-constant) { color: var(--astryx-code-syntax-constant, #622e00); }
+.astryx-code-editor__input::highlight(astryx-punctuation) { color: var(--astryx-code-syntax-punctuation, #525252); }
+.astryx-code-editor__input::highlight(astryx-variable) { color: var(--astryx-code-syntax-variable, #203a6c); }