@astryx-vue/lab 0.4.0 → 0.5.1

package/dist/index.js

@@ -1,6 +1,9 @@
 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 { 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, useAstryxMessages, useGridFocus, useScrollableArea, useTranslator } from "@astryx-vue/core";
+import "../styles/chat-emoji-picker.css";
+import "../styles/chat-reaction-bar.css";
 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 "../styles/code-editor.css";
 import "../styles/diff-viewer.css";
 import "../styles/info-tip.css";
 import "../styles/list-input.css";
@@ -11,6 +14,289 @@ import "../styles/svg-icon.css";
 import "../styles/tour.css";
 import "../styles/transfer-list.css";
 import "../styles/transfer-list-selector.css";
+//#region src/Chat/emojis.ts
+/**
+* 两行常用回应。调用方可以用 `emojis` 换成自己的一组。
+* 内容和原版 `DEFAULT_CHAT_EMOJIS` 一致。
+*/
+const DEFAULT_CHAT_EMOJIS = [
+	{
+		emoji: "👍",
+		name: "thumbs up"
+	},
+	{
+		emoji: "❤️",
+		name: "heart"
+	},
+	{
+		emoji: "😂",
+		name: "joy"
+	},
+	{
+		emoji: "🎉",
+		name: "tada"
+	},
+	{
+		emoji: "😮",
+		name: "wow"
+	},
+	{
+		emoji: "😢",
+		name: "cry"
+	},
+	{
+		emoji: "🔥",
+		name: "fire"
+	},
+	{
+		emoji: "👀",
+		name: "eyes"
+	},
+	{
+		emoji: "✅",
+		name: "check"
+	},
+	{
+		emoji: "🙏",
+		name: "pray"
+	},
+	{
+		emoji: "💯",
+		name: "hundred"
+	},
+	{
+		emoji: "🚀",
+		name: "rocket"
+	},
+	{
+		emoji: "😍",
+		name: "heart eyes"
+	},
+	{
+		emoji: "🤔",
+		name: "thinking"
+	},
+	{
+		emoji: "👋",
+		name: "wave"
+	},
+	{
+		emoji: "⭐",
+		name: "star"
+	}
+];
+//#endregion
+//#region src/Chat/filterEmojis.ts
+/** 短名包含查询，或者查询本身就是那个表情字符。大小写不敏感，首尾空白不算。 */
+function filterEmojis(emojis, query) {
+	const trimmed = query.trim().toLowerCase();
+	if (trimmed === "") return [...emojis];
+	return emojis.filter((option) => option.name.toLowerCase().includes(trimmed) || option.emoji === trimmed);
+}
+//#endregion
+//#region src/Chat/ChatEmojiPicker.vue
+const _hoisted_1$18 = {
+	key: 0,
+	class: "astryx-chat-emoji-picker__empty"
+};
+const _hoisted_2$16 = ["aria-label"];
+const _hoisted_3$14 = [
+	"data-emoji",
+	"aria-label",
+	"onClick"
+];
+const _hoisted_4$13 = { "aria-hidden": "true" };
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxChatEmojiPicker",
+	inheritAttrs: false,
+	__name: "ChatEmojiPicker",
+	props: {
+		emojis: {},
+		label: {},
+		searchLabel: {}
+	},
+	emits: ["select"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useTranslator();
+		const messages = useAstryxMessages();
+		const query = ref("");
+		const isOpen = ref(false);
+		const panel = useTemplateRef("panel");
+		const { gridRef, handleKeyDown } = useGridFocus({ columns: 8 });
+		function setGrid(element) {
+			gridRef.value = element instanceof HTMLElement ? element : null;
+		}
+		const options = computed(() => props.emojis ?? DEFAULT_CHAT_EMOJIS);
+		const visible = computed(() => filterEmojis(options.value, query.value));
+		const dialogLabel = computed(() => props.label ?? messages.value.emojiPicker.pickLabel);
+		const searchText = computed(() => props.searchLabel ?? t("@astryx.emojiPicker.searchLabel"));
+		const gridLabel = computed(() => t("@astryx.emojiPicker.label"));
+		const emptyText = computed(() => t("@astryx.emojiPicker.noResults", { query: query.value.trim() }));
+		function onOpenChange(open) {
+			isOpen.value = open;
+			if (!open) query.value = "";
+		}
+		function pick(emoji) {
+			emit("select", emoji);
+			query.value = "";
+			isOpen.value = false;
+		}
+		__expose({ element: panel });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Popover), {
+				"is-open": isOpen.value,
+				label: dialogLabel.value,
+				placement: "below",
+				alignment: "start",
+				padding: 2,
+				width: 320,
+				onOpenChange
+			}, {
+				content: withCtx(() => [createElementVNode("div", mergeProps({
+					ref_key: "panel",
+					ref: panel,
+					class: "astryx-chat-emoji-picker"
+				}, _ctx.$attrs), [createVNode(unref(TextInput), {
+					modelValue: query.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+					class: "astryx-chat-emoji-picker__search",
+					label: searchText.value,
+					"is-label-hidden": "",
+					size: "sm",
+					placeholder: searchText.value,
+					"has-clear": "",
+					width: "100%"
+				}, null, 8, [
+					"modelValue",
+					"label",
+					"placeholder"
+				]), visible.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1$18, toDisplayString(emptyText.value), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- 焦点在格子按钮上，方向键冒泡到这层再按网格移动。 "), createElementVNode("div", {
+					ref: setGrid,
+					class: "astryx-chat-emoji-picker__grid",
+					role: "group",
+					"aria-label": gridLabel.value,
+					onKeydown: _cache[1] || (_cache[1] = (...args) => unref(handleKeyDown) && unref(handleKeyDown)(...args))
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visible.value, (option) => {
+					return openBlock(), createElementBlock("button", {
+						key: option.emoji,
+						type: "button",
+						class: "astryx-chat-emoji-picker__cell",
+						"data-emoji": option.emoji,
+						"aria-label": unref(messages).emojiPicker.reactWith(option.name),
+						onClick: ($event) => pick(option.emoji)
+					}, [createElementVNode("span", _hoisted_4$13, toDisplayString(option.emoji), 1)], 8, _hoisted_3$14);
+				}), 128))], 40, _hoisted_2$16)], 2112))], 16)]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["is-open", "label"]);
+		};
+	}
+});
+//#endregion
+//#region src/Chat/ChatReactionBar.vue
+const _hoisted_1$17 = ["aria-label"];
+const _hoisted_2$15 = [
+	"data-selected",
+	"aria-pressed",
+	"aria-label",
+	"onClick"
+];
+const _hoisted_3$13 = {
+	class: "astryx-chat-reaction-bar__emoji",
+	"aria-hidden": "true"
+};
+const _hoisted_4$12 = { class: "astryx-chat-reaction-bar__count" };
+const _hoisted_5$11 = [
+	"data-selected",
+	"aria-pressed",
+	"aria-label",
+	"onClick"
+];
+const _hoisted_6$9 = {
+	class: "astryx-chat-reaction-bar__emoji",
+	"aria-hidden": "true"
+};
+const _hoisted_7$7 = { class: "astryx-chat-reaction-bar__count" };
+const _hoisted_8$5 = ["aria-label"];
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxChatReactionBar",
+	inheritAttrs: false,
+	__name: "ChatReactionBar",
+	props: {
+		reactions: {},
+		emojis: {},
+		addLabel: {},
+		label: {}
+	},
+	emits: ["toggle", "add"],
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const instance = getCurrentInstance();
+		const { t } = useTranslator();
+		const messages = useAstryxMessages();
+		const root = useTemplateRef("root");
+		const groupLabel = computed(() => props.label ?? messages.value.comments.reactionsLabel);
+		const addLabel = computed(() => props.addLabel ?? t("@astryx.comments.addReaction"));
+		const hasAdd = computed(() => {
+			const vnodeProps = instance?.vnode.props;
+			return vnodeProps?.onAdd != null || vnodeProps?.onAddOnce != null;
+		});
+		function pillLabel(reaction) {
+			return reaction.label ?? messages.value.comments.reactionWith(reaction.count, reaction.emoji);
+		}
+		__expose({ element: root });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "root",
+				ref: root,
+				class: "astryx-chat-reaction-bar",
+				role: "group",
+				"aria-label": groupLabel.value
+			}, _ctx.$attrs), [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.reactions, (reaction) => {
+				return openBlock(), createElementBlock(Fragment, { key: reaction.emoji }, [reaction.label != null ? (openBlock(), createBlock(unref(Tooltip), {
+					key: 0,
+					content: reaction.label
+				}, {
+					default: withCtx(() => [createElementVNode("button", {
+						type: "button",
+						class: "astryx-chat-reaction-bar__pill",
+						"data-selected": reaction.isSelected === true || void 0,
+						"aria-pressed": reaction.isSelected === true,
+						"aria-label": pillLabel(reaction),
+						onClick: ($event) => _ctx.$emit("toggle", reaction.emoji)
+					}, [createElementVNode("span", _hoisted_3$13, toDisplayString(reaction.emoji), 1), createElementVNode("span", _hoisted_4$12, toDisplayString(reaction.count), 1)], 8, _hoisted_2$15)]),
+					_: 2
+				}, 1032, ["content"])) : (openBlock(), createElementBlock("button", {
+					key: 1,
+					type: "button",
+					class: "astryx-chat-reaction-bar__pill",
+					"data-selected": reaction.isSelected === true || void 0,
+					"aria-pressed": reaction.isSelected === true,
+					"aria-label": pillLabel(reaction),
+					onClick: ($event) => _ctx.$emit("toggle", reaction.emoji)
+				}, [createElementVNode("span", _hoisted_6$9, toDisplayString(reaction.emoji), 1), createElementVNode("span", _hoisted_7$7, toDisplayString(reaction.count), 1)], 8, _hoisted_5$11))], 64);
+			}), 128)), hasAdd.value ? (openBlock(), createBlock(_sfc_main, {
+				key: 0,
+				emojis: __props.emojis,
+				label: addLabel.value,
+				onSelect: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add", $event))
+			}, {
+				default: withCtx(() => [createVNode(unref(Tooltip), { content: addLabel.value }, {
+					default: withCtx(() => [createElementVNode("button", {
+						type: "button",
+						class: "astryx-chat-reaction-bar__add",
+						"aria-label": addLabel.value
+					}, " + ", 8, _hoisted_8$5)]),
+					_: 1
+				}, 8, ["content"])]),
+				_: 1
+			}, 8, ["emojis", "label"])) : createCommentVNode("v-if", true)], 16, _hoisted_1$17);
+		};
+	}
+});
+//#endregion
 //#region src/CircularProgress/types.ts
 /** Ring geometry per size: outer diameter and stroke width in px. */
 const SIZE_CONFIG = {
@@ -33,9 +319,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 +330,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",
@@ -71,7 +357,7 @@ const _hoisted_7$6 = {
 	key: 0,
 	class: "astryx-circular-progress__center"
 };
-const _sfc_main = /*@__PURE__*/ defineComponent({
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 	name: "AstryxCircularProgress",
 	inheritAttrs: false,
 	__name: "CircularProgress",
@@ -139,7 +425,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 +443,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 +451,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 +461,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$3 = /*@__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 +1085,7 @@ const _hoisted_47 = {
 	key: 0,
 	class: "astryx-diff-viewer__annotation-content"
 };
-const _sfc_main$16 = /*@__PURE__*/ defineComponent({
+const _sfc_main$19 = /*@__PURE__*/ defineComponent({
 	name: "AstryxDiffViewerTable",
 	__name: "DiffViewerTable",
 	props: {
@@ -1262,7 +1816,7 @@ const _hoisted_11$1 = {
 	class: "astryx-diff-viewer__message"
 };
 const _hoisted_12 = ["aria-label"];
-const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 	name: "AstryxDiffViewer",
 	inheritAttrs: false,
 	__name: "DiffViewer",
@@ -1451,7 +2005,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$19, {
 					"view-mode": __props.viewMode,
 					"unified-rows": unifiedRows.value,
 					"split-rows": splitRows.value,
@@ -1773,7 +2327,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$5 = /*@__PURE__*/ defineComponent({
 	name: "AstryxInfoTip",
 	__name: "InfoTip",
 	props: {
@@ -1900,7 +2454,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$18 = /*@__PURE__*/ defineComponent({
 	name: "AstryxListInputRow",
 	__name: "ListInputRow",
 	props: {
@@ -2346,7 +2900,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$6 = /*@__PURE__*/ defineComponent({
 	name: "AstryxListInput",
 	inheritAttrs: false,
 	__name: "ListInput",
@@ -2624,7 +3178,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$18, {
 							key: itemKeyOf(item),
 							item,
 							index,
@@ -2739,7 +3293,7 @@ const _hoisted_11 = {
 	key: 0,
 	class: "astryx-log-stream__detail"
 };
-const _sfc_main$14 = /*@__PURE__*/ defineComponent({
+const _sfc_main$17 = /*@__PURE__*/ defineComponent({
 	name: "AstryxLogStreamRow",
 	__name: "LogStreamRow",
 	props: {
@@ -2843,7 +3397,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$7 = /*@__PURE__*/ defineComponent({
 	name: "AstryxLogStream",
 	inheritAttrs: false,
 	__name: "LogStream",
@@ -2909,7 +3463,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$17, {
 						entry,
 						"has-timestamps": __props.hasTimestamps,
 						"has-source": hasSource.value,
@@ -3075,7 +3629,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$8 = /*@__PURE__*/ defineComponent({
 	name: "AstryxMobileTokenizer",
 	inheritAttrs: false,
 	__name: "MobileTokenizer",
@@ -3398,7 +3952,7 @@ const _hoisted_10 = {
 	key: 1,
 	class: "astryx-stat__media"
 };
-const _sfc_main$7 = /*@__PURE__*/ defineComponent({
+const _sfc_main$10 = /*@__PURE__*/ defineComponent({
 	name: "AstryxStat",
 	inheritAttrs: false,
 	__name: "Stat",
@@ -4255,7 +4809,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$9 = /*@__PURE__*/ defineComponent({
 	name: "AstryxSvgIcon",
 	inheritAttrs: false,
 	__name: "SVGIcon",
@@ -4491,7 +5045,7 @@ const xifExamples = [
 const TOUR_CONTEXT_KEY = Symbol("AstryxTour");
 //#endregion
 //#region src/Tour/Tour.vue
-const _sfc_main$8 = /*@__PURE__*/ defineComponent({
+const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTour",
 	__name: "Tour",
 	props: {
@@ -4555,7 +5109,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$16 = /*@__PURE__*/ defineComponent({
 	__name: "TourHighlight",
 	props: {
 		rect: {},
@@ -4599,7 +5153,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$12 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTourStep",
 	__name: "TourStep",
 	props: {
@@ -4666,7 +5220,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$16, {
 				rect: rect.value,
 				"has-backdrop": unref(tour).hasBackdrop.value,
 				onBackdropClick: _cache[0] || (_cache[0] = ($event) => unref(tour).onDismiss("backdrop"))
@@ -4833,7 +5387,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$15 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferListPanel",
 	__name: "TransferListPanel",
 	props: {
@@ -5305,7 +5859,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$13 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferList",
 	inheritAttrs: false,
 	__name: "TransferList",
@@ -5579,7 +6133,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$15, {
 					side: "selected",
 					"heading-id": selectedHeadingId,
 					label: selectedLabel.value,
@@ -5615,7 +6169,7 @@ const _sfc_main$10 = /*@__PURE__*/ defineComponent({
 					"dragging-value",
 					"grabbed-value",
 					"drop-target"
-				]), createVNode(_sfc_main$12, {
+				]), createVNode(_sfc_main$15, {
 					side: "available",
 					"heading-id": availableHeadingId,
 					label: availableLabel.value,
@@ -5670,7 +6224,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$14 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferListSelector",
 	__name: "TransferListSelector",
 	props: {
@@ -5807,7 +6361,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$13, {
 					label: __props.label,
 					"is-label-hidden": "",
 					options: __props.options,
@@ -5886,4 +6440,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 ChatEmojiPicker, _sfc_main$1 as ChatReactionBar, _sfc_main$2 as CircularProgress, _sfc_main$3 as CodeEditor, DEFAULT_CHAT_EMOJIS, _sfc_main$4 as DiffViewer, _sfc_main$5 as InfoTip, _sfc_main$6 as ListInput, _sfc_main$7 as LogStream, _sfc_main$8 as MobileTokenizer, _sfc_main$9 as SVGIcon, _sfc_main$10 as Stat, _sfc_main$11 as Tour, _sfc_main$12 as TourStep, _sfc_main$13 as TransferList, _sfc_main$14 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 };