@revikornmann/muka-ui 0.11.0 → 0.13.0

package/dist/cjs/components/ChatMessage/ChatMessage.css

@@ -0,0 +1,328 @@
+/* ChatMessage Component Styles */
+
+.muka-chat-message {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 100%;
+}
+
+/* ─── Row: avatar rail + bubble ────────────────────────── */
+
+.muka-chat-message__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas: 'bubble';
+  column-gap: var(--chatbubble-row-gap);
+  width: 100%;
+}
+
+.muka-chat-message--has-avatar .muka-chat-message__row {
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-areas: 'rail bubble';
+}
+
+.muka-chat-message--own.muka-chat-message--has-avatar .muka-chat-message__row {
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas: 'bubble rail';
+}
+
+.muka-chat-message__rail {
+  grid-area: rail;
+  /* Sits on the bubble's baseline (Figma 5355:44091) */
+  align-self: end;
+  display: flex;
+  justify-content: center;
+  min-width: var(--chatbubble-avatar-size);
+}
+
+/*
+ * The Small size in Figma (5373:44702) halves the avatar to 32px and tightens
+ * the gap to the bubble. Size the avatar itself, not just the rail, so the
+ * bubbles keep their alignment. The header row keeps its own gap.
+ */
+@media (max-width: 1023px) {
+  .muka-chat-message__row {
+    column-gap: var(--chatbubble-row-gap-compact);
+  }
+
+  .muka-chat-message__rail {
+    min-width: var(--chatbubble-avatar-size-compact);
+  }
+
+  /* Outweighs the avatar's own size class, which sets width/height directly */
+  .muka-chat-message .muka-chat-message__rail > * {
+    width: var(--chatbubble-avatar-size-compact);
+    height: var(--chatbubble-avatar-size-compact);
+  }
+}
+
+/* ─── Bubble surface ───────────────────────────────────── */
+
+.muka-chat-message__bubble {
+  grid-area: bubble;
+  max-width: var(--chatbubble-max-width);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--chatbubble-gap);
+  padding: var(--chatbubble-padding-block) var(--chatbubble-padding-inline);
+  border-radius: var(--chatbubble-radius);
+  border: var(--border-width-regular) solid transparent;
+  box-shadow: var(--shadow-level2);
+  word-break: break-word;
+}
+
+/*
+ * Length axis (Figma `Text length` on 5355:44091): short messages hug their
+ * content, long ones fill the row up to the shared max width.
+ */
+.muka-chat-message--long .muka-chat-message__bubble {
+  width: 100%;
+}
+
+.muka-chat-message--short .muka-chat-message__bubble {
+  width: fit-content;
+}
+
+.muka-chat-message--own .muka-chat-message__bubble {
+  justify-self: end;
+}
+
+.muka-chat-message--own .muka-chat-message__bubble {
+  background-color: var(--chatbubble-color-own-background);
+  border-color: var(--chatbubble-color-own-border);
+  color: var(--chatbubble-color-own-foreground);
+}
+
+.muka-chat-message--peer .muka-chat-message__bubble {
+  background-color: var(--chatbubble-color-peer-background);
+  border-color: var(--chatbubble-color-peer-border);
+  color: var(--chatbubble-color-peer-foreground);
+}
+
+.muka-chat-message--agent .muka-chat-message__bubble {
+  background-color: var(--chatbubble-color-agent-background);
+  border-color: var(--chatbubble-color-agent-border);
+  color: var(--chatbubble-color-agent-foreground);
+}
+
+/* ─── Header row (author · meta · time · badge) ────────── */
+
+.muka-chat-message__header {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: var(--chatbubble-row-gap);
+}
+
+.muka-chat-message__author {
+  font-family: var(--text-body-base-bold-fontFamily);
+  font-weight: var(--text-body-base-bold-fontWeight);
+  font-size: var(--text-body-base-bold-fontSize);
+  line-height: var(--text-body-base-bold-lineHeight);
+}
+
+.muka-chat-message__author-meta {
+  /* Inherits the variant's body colour from the bubble */
+  color: inherit;
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+}
+
+.muka-chat-message__badge {
+  display: inline-flex;
+  align-items: center;
+}
+
+/*
+ * Keep the first line of content clear of the absolutely positioned menu
+ * button in the bubble's top-right corner.
+ */
+.muka-chat-message--has-menu .muka-chat-message__header,
+.muka-chat-message--has-menu.muka-chat-message--no-header .muka-chat-message__message {
+  padding-right: var(--spacing-10);
+}
+
+/* …and the last line clear of the inset timestamp in the bottom-right corner */
+.muka-chat-message--has-timestamp .muka-chat-message__message {
+  padding-right: var(--spacing-10);
+}
+
+/* ─── Body ─────────────────────────────────────────────── */
+
+.muka-chat-message__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chatbubble-gap);
+  min-width: 0;
+}
+
+.muka-chat-message__media {
+  min-width: 0;
+}
+
+.muka-chat-message__message {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Empty message block should not add a gap of its own */
+.muka-chat-message__message:empty {
+  display: none;
+}
+
+/* ─── Embedded card ────────────────────────────────────── */
+
+.muka-chat-message__embed {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--chatbubble-embed-gap);
+  /* The card is inset from the blocks above and below it (Figma 5289:40562) */
+  margin-block: var(--chatbubble-embed-margin-block);
+  padding: var(--chatbubble-embed-padding-block) var(--chatbubble-embed-padding-inline);
+  border-radius: var(--chatbubble-embed-radius);
+  border: var(--border-width-regular) solid transparent;
+}
+
+/*
+ * The embed sits on the raised surface of its author's role, one step apart
+ * from the bubble it is nested in, and reuses that role's border colour.
+ */
+.muka-chat-message--own .muka-chat-message__embed {
+  background-color: var(--chatbubble-embed-color-own-background);
+  border-color: var(--chatbubble-embed-color-own-border);
+  color: var(--chatbubble-embed-color-own-foreground);
+}
+
+.muka-chat-message--peer .muka-chat-message__embed {
+  background-color: var(--chatbubble-embed-color-peer-background);
+  border-color: var(--chatbubble-embed-color-peer-border);
+  color: var(--chatbubble-embed-color-peer-foreground);
+}
+
+.muka-chat-message--agent .muka-chat-message__embed {
+  background-color: var(--chatbubble-embed-color-agent-background);
+  border-color: var(--chatbubble-embed-color-agent-border);
+  color: var(--chatbubble-embed-color-agent-foreground);
+}
+
+.muka-chat-message__embed-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chatbubble-embed-gap);
+  min-width: 0;
+}
+
+.muka-chat-message__embed-copy {
+  position: absolute;
+  top: var(--chatbubble-embed-padding-block);
+  right: var(--chatbubble-embed-padding-inline);
+}
+
+/* ─── Stacked full-width action buttons ────────────────── */
+
+.muka-chat-message__action-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chatbubble-action-stack-gap);
+}
+
+/* ─── Inset timestamp ──────────────────────────────────── */
+
+/*
+ * Every author puts its timestamp in the bubble's bottom-right corner, below
+ * the message — never in the header row (Figma 5355:44091).
+ */
+
+.muka-chat-message__timestamp {
+  color: var(--chatbubble-color-timestamp);
+  font-family: var(--text-body-xs-regular-fontFamily);
+  font-weight: var(--text-body-xs-regular-fontWeight);
+  font-size: var(--text-body-xs-regular-fontSize);
+  line-height: var(--text-body-xs-regular-lineHeight);
+  white-space: nowrap;
+}
+
+/*
+ * Pinned to the corner rather than stacked below the message, so a one-line
+ * message stays one line tall. The message reserves the width it needs.
+ */
+.muka-chat-message__timestamp--inset {
+  position: absolute;
+  right: var(--spacing-2);
+  bottom: var(--spacing-1);
+}
+
+/*
+ * Media, an embed or an action stack run the full width of the bubble, so the
+ * corner the timestamp sits in has to be cleared for it.
+ */
+.muka-chat-message--has-timestamp.muka-chat-message--has-blocks .muka-chat-message__body {
+  padding-bottom: var(--text-body-xs-regular-lineHeight);
+}
+
+/* ─── Menu affordance ──────────────────────────────────── */
+
+/*
+ * Hidden at rest. Revealed on hover on pointer devices, on keyboard focus
+ * everywhere, and pinned while its menu is open. On touch the equivalent
+ * affordance is a long-press on the bubble, which opens an ActionSheet.
+ */
+.muka-chat-message__menu {
+  position: absolute;
+  top: var(--spacing-1);
+  right: var(--spacing-1);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.muka-chat-message__menu:focus-within,
+.muka-chat-message--menu-open .muka-chat-message__menu {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
+  .muka-chat-message__bubble:hover .muka-chat-message__menu {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+/* Suppress iOS Safari's own callout so the long-press sheet can take over */
+@media (pointer: coarse) {
+  .muka-chat-message--has-menu .muka-chat-message__bubble {
+    -webkit-touch-callout: none;
+  }
+}
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-chat-message__bubble {
+    box-shadow: none;
+    break-inside: avoid;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .muka-chat-message__embed {
+    break-inside: avoid;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .muka-chat-message__menu,
+  .muka-chat-message__embed-copy,
+  .muka-chat-message__action-stack {
+    display: none;
+  }
+}

package/dist/cjs/components/ChatMessage/ChatMessage.js

@@ -0,0 +1,141 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatMessage = exports.ChatMessageVariantContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../Button");
+const Icon_1 = require("../Icon");
+const Menu_1 = require("../Menu");
+const ActionSheet_1 = require("../ActionSheet");
+const useLongPress_1 = require("../../utils/useLongPress");
+require("./ChatMessage.css");
+/**
+ * Messages at or below this many characters hug their content; longer ones fill
+ * the available width (Figma `Text length` axis on `5355:44091`).
+ */
+const SHORT_MESSAGE_MAX_LENGTH = 100;
+/**
+ * Set by `ChatMessageStack` so its children inherit the author without every
+ * message repeating it. Exported for the stack; not part of the public API.
+ */
+exports.ChatMessageVariantContext = (0, react_1.createContext)(null);
+/**
+ * ChatMessage — a single chat message.
+ *
+ * Composes with `ChatMessageList`, and with `ChatMessageStack` for consecutive
+ * messages from one author. Pass `<ChatPhotoGrid />` to `media`, an
+ * `<AgentTaskList />` above the bubble for tool progress, and a `<Badge />` to
+ * `badge` for visibility scope.
+ *
+ * Secondary actions (copy, feedback, regenerate, plus anything in `menuItems`)
+ * live behind one options menu: a dropdown revealed on hover on pointer
+ * devices, and a bottom sheet opened by long-pressing the bubble on touch.
+ */
+const ChatMessage = ({ variant, children, length = 'auto', avatar, reserveAvatar = false, author, authorMeta, badge, timestamp, media, embed, onEmbedCopy, embedCopyLabel = 'Copy', actionStack, onCopy, copyLabel = 'Copy', onFeedback, feedback = null, feedbackUpLabel = 'Helpful', feedbackDownLabel = 'Not helpful', onRefresh, refreshLabel = 'Regenerate', menuItems, menuLabel = 'Message options', menuCancelLabel = 'Cancel', className = '', }) => {
+    const [menuOpen, setMenuOpen] = (0, react_1.useState)(false);
+    const [sheetOpen, setSheetOpen] = (0, react_1.useState)(false);
+    // The trigger is revealed on hover, so focus must not linger on it after a
+    // pointer-driven close — Radix restores focus on close, and the browser marks
+    // that programmatic focus `:focus-visible`, which would pin the button open.
+    // Keyboard users still get focus back, since for them the reveal is correct.
+    const openedWithKeyboard = (0, react_1.useRef)(false);
+    const stackVariant = (0, react_1.useContext)(exports.ChatMessageVariantContext);
+    const resolvedVariant = variant ?? stackVariant ?? 'peer';
+    // The visibility badge hangs off the author line, so it goes when the author does.
+    const showBadge = Boolean(author && badge);
+    const hasHeader = Boolean(author || authorMeta || showBadge);
+    const hasRail = Boolean(avatar || reserveAvatar);
+    const hasBlocks = Boolean(media || embed || actionStack);
+    const resolvedLength = length !== 'auto'
+        ? length
+        : hasBlocks || typeof children !== 'string' || children.length > SHORT_MESSAGE_MAX_LENGTH
+            ? 'long'
+            : 'short';
+    const items = (0, react_1.useMemo)(() => {
+        const resolved = [];
+        if (onCopy) {
+            resolved.push({
+                id: 'copy',
+                label: copyLabel,
+                icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "file-copy", size: "sm" }),
+                onSelect: onCopy,
+            });
+        }
+        if (onFeedback) {
+            resolved.push({
+                id: 'feedback-up',
+                label: feedbackUpLabel,
+                icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "thumb-up", size: "sm" }),
+                checked: feedback === 'up',
+                onSelect: () => onFeedback(feedback === 'up' ? null : 'up'),
+            }, {
+                id: 'feedback-down',
+                label: feedbackDownLabel,
+                icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "thumb-down", size: "sm" }),
+                checked: feedback === 'down',
+                onSelect: () => onFeedback(feedback === 'down' ? null : 'down'),
+            });
+        }
+        if (onRefresh) {
+            resolved.push({
+                id: 'refresh',
+                label: refreshLabel,
+                icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "restart", size: "sm" }),
+                onSelect: onRefresh,
+            });
+        }
+        if (menuItems)
+            resolved.push(...menuItems);
+        return resolved;
+    }, [
+        onCopy,
+        copyLabel,
+        onFeedback,
+        feedback,
+        feedbackUpLabel,
+        feedbackDownLabel,
+        onRefresh,
+        refreshLabel,
+        menuItems,
+    ]);
+    const hasMenu = items.length > 0;
+    const longPress = (0, useLongPress_1.useLongPress)({
+        enabled: hasMenu,
+        onLongPress: () => setSheetOpen(true),
+    });
+    const classes = [
+        'muka-chat-message',
+        `muka-chat-message--${resolvedVariant}`,
+        `muka-chat-message--${resolvedLength}`,
+        hasRail && 'muka-chat-message--has-avatar',
+        hasMenu && 'muka-chat-message--has-menu',
+        timestamp && 'muka-chat-message--has-timestamp',
+        hasBlocks && 'muka-chat-message--has-blocks',
+        menuOpen && 'muka-chat-message--menu-open',
+        !hasHeader && 'muka-chat-message--no-header',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Grouped messages set `reserveAvatar` to keep the rail — and so the bubbles —
+    // aligned with the one message in the stack that draws the avatar.
+    const rail = hasRail ? ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__rail", children: avatar })) : null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, "data-variant": resolvedVariant, "data-length": resolvedLength, children: [(0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-message__row", children: [resolvedVariant !== 'own' ? rail : null, (0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-message__bubble", ...(hasMenu ? longPress : {}), children: [hasHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-message__header", children: [author && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-message__author", children: author })), authorMeta && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-message__author-meta", children: authorMeta })), showBadge && (0, jsx_runtime_1.jsx)("span", { className: "muka-chat-message__badge", children: badge })] })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-message__body", children: [media && (0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__media", children: media }), (0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__message", children: children }), embed && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-message__embed", children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__embed-content", children: embed }), onEmbedCopy && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__embed-copy", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "muted", size: "md", iconOnly: true, type: "button", "aria-label": embedCopyLabel, onClick: onEmbedCopy, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "file-copy", size: "sm" }) }) }))] })), actionStack && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__action-stack", children: actionStack }))] }), timestamp && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-message__timestamp muka-chat-message__timestamp--inset", children: timestamp })), hasMenu && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__menu", children: (0, jsx_runtime_1.jsxs)(Menu_1.Menu, { open: menuOpen, onOpenChange: setMenuOpen, children: [(0, jsx_runtime_1.jsx)(Menu_1.MenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "sm", iconOnly: true, type: "button", "aria-label": menuLabel, onPointerDown: () => {
+                                                    openedWithKeyboard.current = false;
+                                                }, onKeyDown: () => {
+                                                    openedWithKeyboard.current = true;
+                                                }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-down-s", size: "xs" }) }) }), (0, jsx_runtime_1.jsx)(Menu_1.MenuContent, { align: "end", onCloseAutoFocus: (event) => {
+                                                if (!openedWithKeyboard.current)
+                                                    event.preventDefault();
+                                            }, children: items.map((item) => item.checked === undefined ? ((0, jsx_runtime_1.jsx)(Menu_1.MenuItem, { icon: item.icon, destructive: item.destructive, disabled: item.disabled, onSelect: item.onSelect, children: item.label }, item.id)) : ((0, jsx_runtime_1.jsx)(Menu_1.MenuCheckboxItem, { checked: item.checked, disabled: item.disabled, icon: item.icon, onCheckedChange: item.onSelect, children: item.label }, item.id))) })] }) }))] }), resolvedVariant === 'own' ? rail : null] }), hasMenu && ((0, jsx_runtime_1.jsx)(ActionSheet_1.ActionSheet, { open: sheetOpen, onOpenChange: setSheetOpen, title: menuLabel, cancel: { label: menuCancelLabel }, actions: items.map((item) => ({
+                    label: item.label,
+                    icon: item.icon,
+                    onClick: item.onSelect,
+                    destructive: item.destructive,
+                    disabled: item.disabled,
+                })) }))] }));
+};
+exports.ChatMessage = ChatMessage;
+exports.default = exports.ChatMessage;
+//# sourceMappingURL=ChatMessage.js.map

package/dist/cjs/components/ChatMessage/ChatMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.js","sourceRoot":"","sources":["../../../../components/ChatMessage/ChatMessage.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/ChatMessage/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatMessageVariantContext = exports.ChatMessage = void 0;
+var ChatMessage_1 = require("./ChatMessage");
+Object.defineProperty(exports, "ChatMessage", { enumerable: true, get: function () { return ChatMessage_1.ChatMessage; } });
+Object.defineProperty(exports, "ChatMessageVariantContext", { enumerable: true, get: function () { return ChatMessage_1.ChatMessageVariantContext; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/ChatMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ChatMessage/index.ts"],"names":[],"mappings":";;;AAAA,6CAMuB;AALrB,0GAAA,WAAW,OAAA;AACX,wHAAA,yBAAyB,OAAA"}

package/dist/cjs/components/ChatMessageList/ChatMessageList.css

@@ -19,6 +19,22 @@
   align-items: stretch;
   gap: var(--spacing-8);
   width: 100%;
-  max-width: 640px;
+  max-width: var(--container-max-width-sm);
   margin: 0 auto;
 }
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-chat-message-list {
+    overflow: visible;
+    height: auto;
+    max-height: none;
+    background: none;
+    padding: 0;
+  }
+
+  .muka-chat-message-list__inner {
+    max-width: 100%;
+  }
+}

package/dist/cjs/components/ChatMessageList/ChatMessageList.js

@@ -11,7 +11,7 @@ require("./ChatMessageList.css");
  * Auto-scrolls to bottom when content changes. Pin the list to the bottom of
  * the conversation so new messages stay in view as they arrive.
  *
- * Composes with `ChatBubble` and `TypingIndicator`.
+ * Composes with `ChatMessage` and `TypingIndicator`.
  */
 const ChatMessageList = ({ children, autoScroll = true, className = '', 'aria-label': ariaLabel = 'Chat messages', }) => {
     const ref = (0, react_1.useRef)(null);

package/dist/cjs/components/ChatMessageStack/ChatMessageStack.css

@@ -0,0 +1,51 @@
+/* ChatMessageStack Component Styles */
+
+.muka-chat-message-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chatbubble-stack-gap);
+  width: 100%;
+  max-width: 100%;
+}
+
+.muka-chat-message-stack__messages {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chatbubble-stack-gap);
+  width: 100%;
+}
+
+/*
+ * Reasoning sits above the stack, indented past the avatar rail so it lines up
+ * with the bubbles rather than with the avatar (Figma 5379:47300).
+ */
+.muka-chat-message-stack__reasoning {
+  min-width: 0;
+}
+
+.muka-chat-message-stack--has-avatar .muka-chat-message-stack__reasoning {
+  padding-left: calc(var(--chatbubble-avatar-size) + var(--chatbubble-row-gap));
+}
+
+.muka-chat-message-stack--own.muka-chat-message-stack--has-avatar
+  .muka-chat-message-stack__reasoning {
+  padding-left: 0;
+  padding-right: calc(var(--chatbubble-avatar-size) + var(--chatbubble-row-gap));
+}
+
+/* Follow the message's compact rail and gap below the desktop breakpoint */
+@media (max-width: 1023px) {
+  .muka-chat-message-stack--has-avatar .muka-chat-message-stack__reasoning {
+    padding-left: calc(
+      var(--chatbubble-avatar-size-compact) + var(--chatbubble-row-gap-compact)
+    );
+  }
+
+  .muka-chat-message-stack--own.muka-chat-message-stack--has-avatar
+    .muka-chat-message-stack__reasoning {
+    padding-left: 0;
+    padding-right: calc(
+      var(--chatbubble-avatar-size-compact) + var(--chatbubble-row-gap-compact)
+    );
+  }
+}

package/dist/cjs/components/ChatMessageStack/ChatMessageStack.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatMessageStack = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const ChatMessage_1 = require("../ChatMessage");
+require("./ChatMessageStack.css");
+/**
+ * ChatMessageStack — consecutive messages from one author.
+ *
+ * Only the first message carries the author line and only the last carries the
+ * avatar; the messages in between reserve the rail so the bubbles stay aligned.
+ * Pass plain `<ChatMessage>` children and let the stack place those parts.
+ *
+ * Compose inside a `ChatMessageList`.
+ */
+const ChatMessageStack = ({ variant, children, avatar, author, authorMeta, badge, reasoning, className = '', }) => {
+    const messages = react_1.default.Children.toArray(children).filter(react_1.default.isValidElement);
+    const lastIndex = messages.length - 1;
+    const classes = [
+        'muka-chat-message-stack',
+        `muka-chat-message-stack--${variant}`,
+        avatar && 'muka-chat-message-stack--has-avatar',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsx)(ChatMessage_1.ChatMessageVariantContext.Provider, { value: variant, children: (0, jsx_runtime_1.jsxs)("div", { className: classes, "data-variant": variant, children: [reasoning && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message-stack__reasoning", children: reasoning })), (0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message-stack__messages", children: messages.map((message, index) => {
+                        const isLast = index === lastIndex;
+                        const isFirst = index === 0;
+                        // Only the first message carries the author line and only the last
+                        // carries the avatar; the rest reserve the rail so the bubbles line
+                        // up (Figma 5379:47050).
+                        const overrides = {
+                            author: isFirst ? author : undefined,
+                            authorMeta: isFirst ? authorMeta : undefined,
+                            badge: isFirst ? badge : undefined,
+                            avatar: isLast ? avatar : undefined,
+                            reserveAvatar: Boolean(avatar) && !isLast,
+                        };
+                        return react_1.default.cloneElement(message, overrides);
+                    }) })] }) }));
+};
+exports.ChatMessageStack = ChatMessageStack;
+exports.default = exports.ChatMessageStack;
+//# sourceMappingURL=ChatMessageStack.js.map

package/dist/cjs/components/ChatMessageStack/ChatMessageStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageStack.js","sourceRoot":"","sources":["../../../../components/ChatMessageStack/ChatMessageStack.tsx"],"names":[],"mappings":";;;;;;;AAAA,kDAA0B;AAC1B,gDAIwB;AACxB,kCAAgC;AAyChC;;;;;;;;GAQG;AACI,MAAM,gBAAgB,GAAoC,CAAC,EAChE,OAAO,EACP,QAAQ,EACR,MAAM,EACN,MAAM,EACN,UAAU,EACV,KAAK,EACL,SAAS,EACT,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,eAAK,CAAC,cAAc,CAAC,CAAC;IAC/E,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IAEtC,MAAM,OAAO,GAAG;QACd,yBAAyB;QACzB,4BAA4B,OAAO,EAAE;QACrC,MAAM,IAAI,qCAAqC;QAC/C,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,uBAAC,uCAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAChD,iCAAK,SAAS,EAAE,OAAO,kBAAgB,OAAO,aAC3C,SAAS,IAAI,CACZ,gCAAK,SAAS,EAAC,oCAAoC,YAAE,SAAS,GAAO,CACtE,EAED,gCAAK,SAAS,EAAC,mCAAmC,YAC/C,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;wBAC/B,MAAM,MAAM,GAAG,KAAK,KAAK,SAAS,CAAC;wBACnC,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC;wBAE5B,mEAAmE;wBACnE,oEAAoE;wBACpE,yBAAyB;wBACzB,MAAM,SAAS,GAA8B;4BAC3C,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;4BACpC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;4BAC5C,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;4BAClC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;4BACnC,aAAa,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;yBAC1C,CAAC;wBAEF,OAAO,eAAK,CAAC,YAAY,CACvB,OAA+C,EAC/C,SAAS,CACV,CAAC;oBACJ,CAAC,CAAC,GACE,IACF,GAC6B,CACtC,CAAC;AACJ,CAAC,CAAC;AAtDW,QAAA,gBAAgB,oBAsD3B;AAEF,kBAAe,wBAAgB,CAAC"}

package/dist/cjs/components/ChatMessageStack/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatMessageStack = void 0;
+var ChatMessageStack_1 = require("./ChatMessageStack");
+Object.defineProperty(exports, "ChatMessageStack", { enumerable: true, get: function () { return ChatMessageStack_1.ChatMessageStack; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/ChatMessageStack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ChatMessageStack/index.ts"],"names":[],"mappings":";;;AAAA,uDAAkF;AAAzE,oHAAA,gBAAgB,OAAA"}