@astryx-vue/lab 0.5.0 → 0.5.2

package/README.md

@@ -31,6 +31,8 @@ Or pick single files: `@astryx-vue/lab/styles/stat.css`, `.../log-stream.css`, a
 | `ListInput` | Editable records with custom input columns, validation, and reordering. |
 | `MobileTokenizer` | Touch-friendly multi-select with search and creation in a bottom sheet. |
 | `TransferList` | Dual-panel selection with search, grouping, and reordering. |
+| `ChatEmojiPicker` | Popover emoji grid with shortname filtering and arrow-key navigation. |
+| `ChatReactionBar` | Emoji reaction pills under a message, with an optional add button. |
 
 ## Documentation
 

package/dist/index.d.ts

@@ -1,5 +1,120 @@
 import { MaybeRef, VNodeChild } from "vue";
 import { FieldStatusInput, IconSize, PopoverAlignment, PopoverPlacement, SyntaxThemeDefinition, TokenLine } from "@astryx-vue/core";
+//#region src/Chat/types.d.ts
+interface ChatEmojiOption {
+  /** 表情字符，例如 "🎉"。 */
+  emoji: string;
+  /** 短名，用来过滤，也用来生成按钮的无障碍名，例如 "tada"。 */
+  name: string;
+}
+interface ChatEmojiPickerProps {
+  /**
+   * 网格里的表情，每行 8 个。
+   * @default DEFAULT_CHAT_EMOJIS
+   */
+  emojis?: readonly ChatEmojiOption[];
+  /**
+   * 弹出层对话框的无障碍名。
+   * 不传时用内置的 “Pick an emoji”。
+   */
+  label?: string;
+  /**
+   * 过滤框的占位符和隐藏标签。
+   * 不传时用 `@astryx.emojiPicker.searchLabel`。
+   */
+  searchLabel?: string;
+}
+interface ChatEmojiPickerEmits {
+  /** 选中的表情。弹出层随后关闭，过滤词清空。 */
+  select: [emoji: string];
+}
+interface ChatEmojiPickerSlots {
+  /** 触发元素，里面要有一个按钮。 */
+  default?: () => unknown;
+}
+interface ChatReaction {
+  /** 表情字符，例如 "🎉"。 */
+  emoji: string;
+  /** 用这个表情回应的人数。 */
+  count: number;
+  /**
+   * 当前用户是不是已经回应过。
+   * 为真时胶囊用强调色，并且 `aria-pressed="true"`。
+   * @default false
+   */
+  isSelected?: boolean;
+  /**
+   * 给人看的说明，同时作为提示和无障碍名，
+   * 例如 "Ana and Dana reacted with 🎉"。
+   * 不传时按数量生成 “N reaction(s) with …”。
+   */
+  label?: string;
+}
+interface ChatReactionBarProps {
+  /** 按显示顺序排列的回应。 */
+  reactions: readonly ChatReaction[];
+  /**
+   * 添加回应时，选择器里的表情。
+   * @default DEFAULT_CHAT_EMOJIS
+   */
+  emojis?: readonly ChatEmojiOption[];
+  /**
+   * 添加按钮和选择器对话框的无障碍名。
+   * 不传时用 `@astryx.comments.addReaction`。
+   */
+  addLabel?: string;
+  /**
+   * 这一组回应的无障碍名。
+   * 不传时用内置的 “Reactions”。
+   */
+  label?: string;
+}
+interface ChatReactionBarEmits {
+  /** 用户点了某个已有回应。 */
+  toggle: [emoji: string];
+  /**
+   * 用户从选择器里新加了一个表情。
+   * 只有监听了这个事件，末尾才会出现添加按钮。
+   */
+  add: [emoji: string];
+}
+//#endregion
+//#region src/Chat/ChatEmojiPicker.vue.d.ts
+type __VLS_Slots$7 = ChatEmojiPickerSlots;
+declare const __VLS_base$7: import("vue").DefineComponent<ChatEmojiPickerProps, {
+  element: Readonly<import("vue").ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  select: (emoji: string) => any;
+}, string, import("vue").PublicProps, Readonly<ChatEmojiPickerProps> & Readonly<{
+  onSelect?: ((emoji: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$14: __VLS_WithSlots$7<typeof __VLS_base$7, __VLS_Slots$7>;
+declare const _default: typeof __VLS_export$14;
+type __VLS_WithSlots$7<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/Chat/ChatReactionBar.vue.d.ts
+declare const __VLS_export$13: import("vue").DefineComponent<ChatReactionBarProps, {
+  element: Readonly<import("vue").ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  add: (emoji: string) => any;
+  toggle: (emoji: string) => any;
+}, string, import("vue").PublicProps, Readonly<ChatReactionBarProps> & Readonly<{
+  onAdd?: ((emoji: string) => any) | undefined;
+  onToggle?: ((emoji: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default$1: typeof __VLS_export$13;
+//#endregion
+//#region src/Chat/emojis.d.ts
+/**
+ * 两行常用回应。调用方可以用 `emojis` 换成自己的一组。
+ * 内容和原版 `DEFAULT_CHAT_EMOJIS` 一致。
+ */
+export declare const DEFAULT_CHAT_EMOJIS: readonly ChatEmojiOption[];
+//#endregion
 //#region src/CircularProgress/types.d.ts
 /** Variants a theme can extend through declaration merging in TypeScript. */
 interface CircularProgressVariantMap {
@@ -68,17 +183,17 @@ type __VLS_Slots$6 = {} & {
 };
 declare const __VLS_base$6: import("vue").DefineComponent<CircularProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CircularProgressProps> & Readonly<{}>, {
   value: number;
-  size: CircularProgressSize;
   max: number;
   isLabelHidden: boolean;
   hasValueLabel: boolean;
   formatValueLabel: (value: number, max: number) => string;
+  size: CircularProgressSize;
   variant: keyof CircularProgressVariantMap;
   isIndeterminate: boolean;
   isDisabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$12: __VLS_WithSlots$6<typeof __VLS_base$6, __VLS_Slots$6>;
-declare const _default: typeof __VLS_export$12;
+declare const _default$2: typeof __VLS_export$12;
 type __VLS_WithSlots$6<T, S> = T & {
   new (): {
     $slots: S;
@@ -116,7 +231,7 @@ declare const __VLS_export$11: import("vue").DefineComponent<CodeEditorProps, {}
   language: string;
   escapeHint: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default$1: typeof __VLS_export$11;
+declare const _default$3: typeof __VLS_export$11;
 //#endregion
 //#region src/DiffViewer/diffTypes.d.ts
 /**
@@ -347,7 +462,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$2: typeof __VLS_export$10;
+declare const _default$4: typeof __VLS_export$10;
 type __VLS_WithSlots$5<T, S> = T & {
   new (): {
     $slots: S;
@@ -432,7 +547,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$3: typeof __VLS_export$9;
+declare const _default$5: typeof __VLS_export$9;
 type __VLS_WithSlots$4<T, S> = T & {
   new (): {
     $slots: S;
@@ -562,7 +677,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$4: typeof __VLS_export$8;
+declare const _default$6: 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
@@ -648,7 +763,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$5: typeof __VLS_export$7;
+declare const _default$7: typeof __VLS_export$7;
 type __VLS_WithSlots$3<T, S> = T & {
   new (): {
     $slots: S;
@@ -739,7 +854,7 @@ declare const __VLS_export$6: <T extends SearchableItem>(__VLS_props: NonNullabl
 }>) => import("vue").VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const _default$6: typeof __VLS_export$6;
+declare const _default$8: 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
@@ -786,12 +901,12 @@ type __VLS_Slots$2 = {} & {
 };
 declare const __VLS_base$2: import("vue").DefineComponent<StatProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StatProps> & Readonly<{}>, {
   value: string;
+  size: StatSize;
   delta: StatDelta;
   description: string;
-  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$8: typeof __VLS_export$5;
+declare const _default$10: typeof __VLS_export$5;
 type __VLS_WithSlots$2<T, S> = T & {
   new (): {
     $slots: S;
@@ -939,7 +1054,7 @@ declare const __VLS_export$4: import("vue").DefineComponent<SVGIconProps, {}, {}
   variation: SVGIconVariation;
   color: SVGIconColor;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default$7: typeof __VLS_export$4;
+declare const _default$9: typeof __VLS_export$4;
 //#endregion
 //#region src/SVGIcon/types-xif.d.ts
 /**
@@ -1123,7 +1238,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$9: typeof __VLS_export$3;
+declare const _default$11: typeof __VLS_export$3;
 type __VLS_WithSlots$1<T, S> = T & {
   new (): {
     $slots: S;
@@ -1134,7 +1249,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$10: typeof __VLS_export$2;
+declare const _default$12: typeof __VLS_export$2;
 type __VLS_WithSlots<T, S> = T & {
   new (): {
     $slots: S;
@@ -1236,7 +1351,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$11: typeof __VLS_export$1;
+declare const _default$13: 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
@@ -1292,7 +1407,7 @@ declare const __VLS_export: <T extends string>(__VLS_props: NonNullable<Awaited<
 }>) => import("vue").VNode & {
   __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const _default$12: typeof __VLS_export;
+declare const _default$14: 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, _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 };
+export { type ChatEmojiOption, _default as ChatEmojiPicker, type ChatEmojiPickerEmits, type ChatEmojiPickerProps, type ChatEmojiPickerSlots, type ChatReaction, _default$1 as ChatReactionBar, type ChatReactionBarEmits, type ChatReactionBarProps, _default$2 as CircularProgress, type CircularProgressProps, type CircularProgressSize, type CircularProgressVariant, type CircularProgressVariantMap, _default$3 as CodeEditor, type CodeEditorEmits, type CodeEditorProps, type CreateDiffFileOptions, _default$4 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$5 as InfoTip, type InfoTipProps, type InfoTipSize, type InlineDiffGranularity, type InlineDiffResult, type InlineRange, _default$6 as ListInput, type ListInputChange, type ListInputColumn, type ListInputColumnWidth, type ListInputEmits, type ListInputProps, type ListInputRenderContext, type ListInputValueContext, type LogEntry, _default$7 as LogStream, type LogStreamEmits, type LogStreamLevel, type LogStreamProps, _default$8 as MobileTokenizer, type MobileTokenizerChange, type MobileTokenizerEmits, type MobileTokenizerProps, type PanelGroup, type PanelRow, type PathPersonality, _default$9 as SVGIcon, type SVGIconColor, type SVGIconDef, type SVGIconProps, type SVGIconSize, type SVGIconVariation, type SearchSource, type SearchableItem, _default$10 as Stat, type StatDelta, type StatDeltaDirection, type StatDeltaSentiment, type StatProps, type StatSize, _default$11 as Tour, type TourDismissSource, type TourEmits, type TourProps, type TourSlots, _default$12 as TourStep, type TourStepProps, type TourStepSlots, _default$13 as TransferList, type TransferListEmits, type TransferListOption, type TransferListProps, _default$14 as TransferListSelector, type TransferListSlots, type UseTourReturn, type XIFAnimate, type XIFIcon, type XIFPath, type XIFPersonality, type XIFSlot };

package/dist/index.js

@@ -1,6 +1,8 @@
 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, 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";
@@ -12,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 = {
@@ -72,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",
@@ -267,7 +552,7 @@ const _hoisted_5$9 = [
 	"aria-readonly",
 	"aria-describedby"
 ];
-const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 	name: "AstryxCodeEditor",
 	__name: "CodeEditor",
 	props: {
@@ -800,7 +1085,7 @@ const _hoisted_47 = {
 	key: 0,
 	class: "astryx-diff-viewer__annotation-content"
 };
-const _sfc_main$17 = /*@__PURE__*/ defineComponent({
+const _sfc_main$19 = /*@__PURE__*/ defineComponent({
 	name: "AstryxDiffViewerTable",
 	__name: "DiffViewerTable",
 	props: {
@@ -1531,7 +1816,7 @@ const _hoisted_11$1 = {
 	class: "astryx-diff-viewer__message"
 };
 const _hoisted_12 = ["aria-label"];
-const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 	name: "AstryxDiffViewer",
 	inheritAttrs: false,
 	__name: "DiffViewer",
@@ -1720,7 +2005,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 				}), [createElementVNode("div", {
 					ref: unref(scroll).content,
 					class: "astryx-diff-viewer__content"
-				}, [createVNode(_sfc_main$17, {
+				}, [createVNode(_sfc_main$19, {
 					"view-mode": __props.viewMode,
 					"unified-rows": unifiedRows.value,
 					"split-rows": splitRows.value,
@@ -2042,7 +2327,7 @@ function parseUnifiedDiff(patch) {
 //#endregion
 //#region src/InfoTip/InfoTip.vue
 const _hoisted_1$12 = ["aria-label"];
-const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 	name: "AstryxInfoTip",
 	__name: "InfoTip",
 	props: {
@@ -2169,7 +2454,7 @@ const _hoisted_7$3 = {
 	key: 0,
 	class: "astryx-list-input__control-cell astryx-list-input__control-cell--reorder"
 };
-const _sfc_main$16 = /*@__PURE__*/ defineComponent({
+const _sfc_main$18 = /*@__PURE__*/ defineComponent({
 	name: "AstryxListInputRow",
 	__name: "ListInputRow",
 	props: {
@@ -2615,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$4 = /*@__PURE__*/ defineComponent({
+const _sfc_main$6 = /*@__PURE__*/ defineComponent({
 	name: "AstryxListInput",
 	inheritAttrs: false,
 	__name: "ListInput",
@@ -2893,7 +3178,7 @@ const _sfc_main$4 = /*@__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$16, {
+						return openBlock(), createBlock(_sfc_main$18, {
 							key: itemKeyOf(item),
 							item,
 							index,
@@ -3008,7 +3293,7 @@ const _hoisted_11 = {
 	key: 0,
 	class: "astryx-log-stream__detail"
 };
-const _sfc_main$15 = /*@__PURE__*/ defineComponent({
+const _sfc_main$17 = /*@__PURE__*/ defineComponent({
 	name: "AstryxLogStreamRow",
 	__name: "LogStreamRow",
 	props: {
@@ -3112,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$5 = /*@__PURE__*/ defineComponent({
+const _sfc_main$7 = /*@__PURE__*/ defineComponent({
 	name: "AstryxLogStream",
 	inheritAttrs: false,
 	__name: "LogStream",
@@ -3178,7 +3463,7 @@ const _sfc_main$5 = /*@__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$15, {
+					return renderSlot(_ctx.$slots, "entry", { entry }, () => [createVNode(_sfc_main$17, {
 						entry,
 						"has-timestamps": __props.hasTimestamps,
 						"has-source": hasSource.value,
@@ -3344,7 +3629,7 @@ const _hoisted_10$1 = {
 	class: "astryx-mobile-tokenizer__footer"
 };
 const CREATABLE_ID_PREFIX = "__xds_create__";
-const _sfc_main$6 = /*@__PURE__*/ defineComponent({
+const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 	name: "AstryxMobileTokenizer",
 	inheritAttrs: false,
 	__name: "MobileTokenizer",
@@ -3667,7 +3952,7 @@ const _hoisted_10 = {
 	key: 1,
 	class: "astryx-stat__media"
 };
-const _sfc_main$8 = /*@__PURE__*/ defineComponent({
+const _sfc_main$10 = /*@__PURE__*/ defineComponent({
 	name: "AstryxStat",
 	inheritAttrs: false,
 	__name: "Stat",
@@ -4524,7 +4809,7 @@ const _hoisted_6$1 = {
 	key: 1,
 	class: "astryx-svg-icon__layer astryx-svg-icon__layer--secondary-stroke"
 };
-const _sfc_main$7 = /*@__PURE__*/ defineComponent({
+const _sfc_main$9 = /*@__PURE__*/ defineComponent({
 	name: "AstryxSvgIcon",
 	inheritAttrs: false,
 	__name: "SVGIcon",
@@ -4760,7 +5045,7 @@ const xifExamples = [
 const TOUR_CONTEXT_KEY = Symbol("AstryxTour");
 //#endregion
 //#region src/Tour/Tour.vue
-const _sfc_main$9 = /*@__PURE__*/ defineComponent({
+const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTour",
 	__name: "Tour",
 	props: {
@@ -4824,7 +5109,7 @@ const _sfc_main$9 = /*@__PURE__*/ defineComponent({
 //#endregion
 //#region src/Tour/TourHighlight.vue
 const _hoisted_1$4 = ["data-testid"];
-const _sfc_main$14 = /*@__PURE__*/ defineComponent({
+const _sfc_main$16 = /*@__PURE__*/ defineComponent({
 	__name: "TourHighlight",
 	props: {
 		rect: {},
@@ -4868,7 +5153,7 @@ const _sfc_main$14 = /*@__PURE__*/ defineComponent({
 //#region src/Tour/TourStep.vue
 const _hoisted_1$3 = ["data-testid"];
 const _hoisted_2$3 = { key: 1 };
-const _sfc_main$10 = /*@__PURE__*/ defineComponent({
+const _sfc_main$12 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTourStep",
 	__name: "TourStep",
 	props: {
@@ -4907,6 +5192,7 @@ const _sfc_main$10 = /*@__PURE__*/ defineComponent({
 			};
 		}
 		function stopMeasuring() {
+			if (typeof window === "undefined") return;
 			window.removeEventListener("scroll", measure, true);
 			window.removeEventListener("resize", measure);
 		}
@@ -4935,7 +5221,7 @@ const _sfc_main$10 = /*@__PURE__*/ defineComponent({
 			if (!open) tour?.onDismiss("close");
 		}
 		return (_ctx, _cache) => {
-			return unref(tour) && isActiveStep.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(_sfc_main$14, {
+			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"))
@@ -5102,7 +5388,7 @@ const _hoisted_5 = {
 	class: "astryx-transfer-list-panel__group-heading"
 };
 const _hoisted_6 = ["data-transfer-list-empty"];
-const _sfc_main$13 = /*@__PURE__*/ defineComponent({
+const _sfc_main$15 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferListPanel",
 	__name: "TransferListPanel",
 	props: {
@@ -5574,7 +5860,7 @@ const _hoisted_3$1 = {
 	class: "astryx-transfer-list__controls"
 };
 const _hoisted_4 = { class: "astryx-transfer-list-collection" };
-const _sfc_main$11 = /*@__PURE__*/ defineComponent({
+const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferList",
 	inheritAttrs: false,
 	__name: "TransferList",
@@ -5848,7 +6134,7 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 					default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("@astryx.transferList.reorderInstructions")), 1)]),
 					_: 1
 				}),
-				createElementVNode("div", _hoisted_4, [createVNode(_sfc_main$13, {
+				createElementVNode("div", _hoisted_4, [createVNode(_sfc_main$15, {
 					side: "selected",
 					"heading-id": selectedHeadingId,
 					label: selectedLabel.value,
@@ -5884,7 +6170,7 @@ const _sfc_main$11 = /*@__PURE__*/ defineComponent({
 					"dragging-value",
 					"grabbed-value",
 					"drop-target"
-				]), createVNode(_sfc_main$13, {
+				]), createVNode(_sfc_main$15, {
 					side: "available",
 					"heading-id": availableHeadingId,
 					label: availableLabel.value,
@@ -5939,7 +6225,7 @@ const _hoisted_3 = {
 	class: "astryx-transfer-list-selector__footer"
 };
 const DEFAULT_SELECTOR_WIDTH = "min(41rem, calc(100vw - 32px))";
-const _sfc_main$12 = /*@__PURE__*/ defineComponent({
+const _sfc_main$14 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTransferListSelector",
 	__name: "TransferListSelector",
 	props: {
@@ -6076,7 +6362,7 @@ const _sfc_main$12 = /*@__PURE__*/ defineComponent({
 				}, [createElementVNode("fieldset", {
 					class: "astryx-transfer-list-selector__fieldset",
 					disabled: __props.isDisabled
-				}, [createVNode(_sfc_main$11, {
+				}, [createVNode(_sfc_main$13, {
 					label: __props.label,
 					"is-label-hidden": "",
 					options: __props.options,
@@ -6155,4 +6441,4 @@ const _sfc_main$12 = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-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 };
+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 };

package/lab.css

@@ -11,3 +11,5 @@
 @import './styles/diff-viewer.css';
 @import './styles/tour.css';
 @import './styles/code-editor.css';
+@import './styles/chat-emoji-picker.css';
+@import './styles/chat-reaction-bar.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/lab",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "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.13"
+    "@astryx-vue/core": "^0.7.14"
   },
   "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.13"
+    "@astryx-vue/core": "^0.7.14"
   },
   "scripts": {
     "build": "tsdown",

package/styles/chat-emoji-picker.css

@@ -0,0 +1,80 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-chat-emoji-picker {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-2, 8px);
+    box-sizing: border-box;
+    min-width: 0;
+  }
+
+  .astryx-chat-emoji-picker__search {
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* 8 列固定格子。方向键按这个几何走，不把格子拉成不等宽。 */
+  .astryx-chat-emoji-picker__grid {
+    display: grid;
+    grid-template-columns: repeat(8, 32px);
+    gap: var(--astryx-spacing-0-5, 2px);
+    justify-content: start;
+  }
+
+  .astryx-chat-emoji-picker__cell {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    margin: 0;
+    padding: 0;
+    border-style: none;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    background-color: transparent;
+    color: inherit;
+    font-family: var(--astryx-font-family-body, inherit);
+    font-size: 18px;
+    line-height: var(--astryx-text-body-leading, 1.4286);
+    cursor: pointer;
+    transition-property: background-color;
+    transition-duration: var(--astryx-duration-fast, 125ms);
+    transition-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  /*
+   * 格子紧挨着，外扩的焦点环会压到旁边的格子，所以向内收 2px。
+   * 禁用和 aria-disabled 不给悬停底，指针也回到普通箭头（原版 a11y #5247 / #5335）。
+   */
+  @media (hover: hover) {
+    .astryx-chat-emoji-picker__cell:hover:where(:not(:disabled, [aria-disabled='true'])) {
+      background-color: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
+    }
+  }
+
+  .astryx-chat-emoji-picker__cell:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
+  .astryx-chat-emoji-picker__cell:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: -2px;
+  }
+
+  .astryx-chat-emoji-picker__empty {
+    padding-block: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-1, 4px);
+    color: var(--astryx-color-text-secondary, light-dark(#6a6a6a, #9e9e9e));
+    font-family: var(--astryx-font-family-body, inherit);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-chat-emoji-picker__cell {
+      transition-duration: 0s;
+    }
+  }
+}

package/styles/chat-reaction-bar.css

@@ -0,0 +1,96 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-chat-reaction-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-chat-reaction-bar__pill,
+  .astryx-chat-reaction-bar__add {
+    box-sizing: border-box;
+    margin: 0;
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+    background-color: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
+    font-family: var(--astryx-font-family-body, inherit);
+    cursor: pointer;
+    transition-property: border-color, background-color;
+    transition-duration: var(--astryx-duration-fast, 125ms);
+    transition-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-chat-reaction-bar__pill {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    height: 24px;
+    padding-inline: var(--astryx-spacing-2, 8px);
+    border-radius: var(--astryx-radius-full, 9999px);
+  }
+
+  .astryx-chat-reaction-bar__pill[data-selected] {
+    border-color: var(--astryx-color-accent, currentcolor);
+    background-color: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
+  }
+
+  /* 悬停只加深边框。自己已经选中的胶囊保持强调色，不被悬停盖掉。 */
+  @media (hover: hover) {
+    .astryx-chat-reaction-bar__pill:hover:where(:not(:disabled, [aria-disabled='true'], [data-selected])),
+    .astryx-chat-reaction-bar__add:hover:where(:not(:disabled, [aria-disabled='true'])) {
+      border-color: var(--astryx-color-border-emphasized, light-dark(#d4d4d4, #525252));
+    }
+  }
+
+  .astryx-chat-reaction-bar__pill:is(:disabled, [aria-disabled='true']),
+  .astryx-chat-reaction-bar__add:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
+  .astryx-chat-reaction-bar__pill:focus-visible,
+  .astryx-chat-reaction-bar__add:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: var(--astryx-focus-outline-offset, 2px);
+  }
+
+  .astryx-chat-reaction-bar__emoji {
+    font-size: var(--astryx-text-body-size, 1rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+  }
+
+  .astryx-chat-reaction-bar__count {
+    color: var(--astryx-color-text-secondary, light-dark(#6a6a6a, #9e9e9e));
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    font-weight: var(--astryx-font-weight-medium, 500);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+  }
+
+  .astryx-chat-reaction-bar__pill[data-selected] .astryx-chat-reaction-bar__count {
+    color: var(--astryx-color-text-accent, currentcolor);
+    font-weight: var(--astryx-font-weight-semibold, 600);
+  }
+
+  .astryx-chat-reaction-bar__add {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 24px;
+    padding: 0;
+    border-radius: var(--astryx-radius-full, 9999px);
+    color: var(--astryx-color-icon-secondary, light-dark(#6a6a6a, #9e9e9e));
+    font-size: 15px;
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-chat-reaction-bar__pill,
+    .astryx-chat-reaction-bar__add {
+      transition-duration: 0s;
+    }
+  }
+}