@revikornmann/muka-ui 0.12.0 → 0.13.0

package/build/manifest.json

@@ -54,6 +54,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -116,6 +117,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -177,6 +179,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -238,6 +241,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -299,6 +303,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -360,6 +365,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -421,6 +427,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -482,6 +489,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -543,6 +551,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -604,6 +613,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",

package/dist/cjs/components/AgentTaskList/AgentTaskList.js

@@ -12,7 +12,7 @@ require("./AgentTaskList.css");
  * Renders a header + a vertical timeline of tasks the agent is performing
  * (e.g. searching the web, querying a database, drafting an answer).
  *
- * Typically rendered above the agent's final reply inside a `ChatBubble`
+ * Typically rendered above the agent's final reply inside a `ChatMessage`
  * with `variant="agent"`.
  */
 const AgentTaskList = ({ title, tasks, defaultOpen = true, open: controlledOpen, onOpenChange, className = '', }) => {

package/dist/cjs/components/BadgeNumber/BadgeNumber.css

@@ -0,0 +1,105 @@
+/* BadgeNumber Component Styles - Using Muka Design Tokens */
+
+.muka-badge-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-full);
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+/*
+ * Sizes — fixed height, matching min-width (so a single digit renders as a
+ * circle), horizontal padding, and bold label typography. Vertical centering
+ * is handled by the fixed height + align-items: center.
+ */
+.muka-badge-number--2xs {
+  height: var(--badge-number-size-2xs);
+  min-width: var(--badge-number-size-2xs);
+  padding: 0 var(--badge-number-padding-2xs);
+  font-family: var(--text-label-xs-bold-fontFamily);
+  font-weight: var(--text-label-xs-bold-fontWeight);
+  font-size: var(--text-label-xs-bold-fontSize);
+  line-height: var(--text-label-xs-bold-lineHeight);
+}
+
+.muka-badge-number--xs {
+  height: var(--badge-number-size-xs);
+  min-width: var(--badge-number-size-xs);
+  padding: 0 var(--badge-number-padding-xs);
+  font-family: var(--text-label-sm-bold-fontFamily);
+  font-weight: var(--text-label-sm-bold-fontWeight);
+  font-size: var(--text-label-sm-bold-fontSize);
+  line-height: var(--text-label-sm-bold-lineHeight);
+}
+
+.muka-badge-number--sm {
+  height: var(--badge-number-size-sm);
+  min-width: var(--badge-number-size-sm);
+  padding: 0 var(--badge-number-padding-sm);
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+  font-size: var(--text-label-md-bold-fontSize);
+  line-height: var(--text-label-md-bold-lineHeight);
+}
+
+.muka-badge-number--md {
+  height: var(--badge-number-size-md);
+  min-width: var(--badge-number-size-md);
+  padding: 0 var(--badge-number-padding-md);
+  font-family: var(--text-label-lg-bold-fontFamily);
+  font-weight: var(--text-label-lg-bold-fontWeight);
+  font-size: var(--text-label-lg-bold-fontSize);
+  line-height: var(--text-label-lg-bold-lineHeight);
+}
+
+.muka-badge-number--lg {
+  height: var(--badge-number-size-lg);
+  min-width: var(--badge-number-size-lg);
+  padding: 0 var(--badge-number-padding-lg);
+  font-family: var(--text-label-2xl-bold-fontFamily);
+  font-weight: var(--text-label-2xl-bold-fontWeight);
+  font-size: var(--text-label-2xl-bold-fontSize);
+  line-height: var(--text-label-2xl-bold-lineHeight);
+}
+
+.muka-badge-number__label {
+  /*
+   * The badge sets a tight line-height for compact sizing, which would clip
+   * glyph descenders; give the label a roomier line-height. Vertical centering
+   * is unaffected because the badge height is fixed and content is centered.
+   */
+  line-height: normal;
+}
+
+/* Neutral variant */
+.muka-badge-number--neutral {
+  background-color: var(--color-surface-level1);
+  color: var(--color-text-default-default);
+}
+
+/* Info variant */
+.muka-badge-number--info {
+  background-color: var(--color-state-info-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Success variant */
+.muka-badge-number--success {
+  background-color: var(--color-state-success-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Warning variant */
+.muka-badge-number--warning {
+  background-color: var(--color-state-warning-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Error variant */
+.muka-badge-number--error {
+  background-color: var(--color-state-error-contrast);
+  color: var(--color-text-default-inverse);
+}

package/dist/cjs/components/BadgeNumber/BadgeNumber.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeNumber = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./BadgeNumber.css");
+const BadgeNumber = ({ children, variant = 'neutral', size = '2xs', className = '', 'aria-label': ariaLabel, ...props }) => {
+    const classes = [
+        'muka-badge-number',
+        `muka-badge-number--${variant}`,
+        `muka-badge-number--${size}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsx)("span", { className: classes, role: "status", "aria-label": ariaLabel, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: "muka-badge-number__label", children: children }) }));
+};
+exports.BadgeNumber = BadgeNumber;
+exports.default = exports.BadgeNumber;
+//# sourceMappingURL=BadgeNumber.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeNumber.js","sourceRoot":"","sources":["../../../../components/BadgeNumber/BadgeNumber.tsx"],"names":[],"mappings":";;;;AACA,6BAA2B;AAepB,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,OAAO,GAAG;QACd,mBAAmB;QACnB,sBAAsB,OAAO,EAAE;QAC/B,sBAAsB,IAAI,EAAE;QAC5B,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,iCAAM,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,gBAAa,SAAS,KAAM,KAAK,YACtE,iCAAM,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAQ,GACvD,CACR,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,WAAW,eAsBtB;AAEF,kBAAe,mBAAW,CAAC"}

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.BadgeNumber = void 0;
+var BadgeNumber_1 = require("./BadgeNumber");
+Object.defineProperty(exports, "BadgeNumber", { enumerable: true, get: function () { return BadgeNumber_1.BadgeNumber; } });
+var BadgeNumber_2 = require("./BadgeNumber");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(BadgeNumber_2).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/BadgeNumber/index.ts"],"names":[],"mappings":";;;;;;AAAA,6CAAmE;AAA1D,0GAAA,WAAW,OAAA;AACpB,6CAAwC;AAA/B,uHAAA,OAAO,OAAA"}

package/dist/cjs/components/{ChatBubble/ChatBubble.css → ChatMessage/ChatMessage.css}

@@ -1,89 +1,107 @@
-/* ChatBubble Component Styles */
+/* ChatMessage Component Styles */
 
-.muka-chat-bubble {
+.muka-chat-message {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 100%;
 }
 
-/* ─── Row: avatar rail + bubble + action bar ───────────────
- *
- * A two-row grid rather than a flex column, so the avatar bottom-aligns to the
- * bubble itself and not to the action bar underneath it (Figma 5223:8520).
- */
+/* ─── Row: avatar rail + bubble ────────────────────────── */
 
-.muka-chat-bubble__row {
+.muka-chat-message__row {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  grid-template-areas:
-    'bubble'
-    'actions';
+  grid-template-areas: 'bubble';
   column-gap: var(--chatbubble-row-gap);
-  row-gap: var(--chatbubble-gap);
   width: 100%;
 }
 
-.muka-chat-bubble--has-avatar .muka-chat-bubble__row {
+.muka-chat-message--has-avatar .muka-chat-message__row {
   grid-template-columns: auto minmax(0, 1fr);
-  grid-template-areas:
-    'rail bubble'
-    '.    actions';
+  grid-template-areas: 'rail bubble';
 }
 
-.muka-chat-bubble--own.muka-chat-bubble--has-avatar .muka-chat-bubble__row {
+.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'
-    'actions .';
+  grid-template-areas: 'bubble rail';
 }
 
-.muka-chat-bubble__rail {
+.muka-chat-message__rail {
   grid-area: rail;
-  /* Sits on the bubble's baseline, above the action bar */
+  /* 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-bubble__bubble {
+.muka-chat-message__bubble {
   grid-area: bubble;
   max-width: var(--chatbubble-max-width);
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--chatbubble-gap);
-  width: 100%;
-  padding: var(--chatbubble-padding);
+  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;
 }
 
-.muka-chat-bubble--own .muka-chat-bubble__bubble,
-.muka-chat-bubble--own .muka-chat-bubble__actions {
+/*
+ * 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-bubble--own .muka-chat-bubble__bubble {
+.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);
-  /* Room for the inset timestamp in the bottom-right corner */
-  padding-right: var(--spacing-6);
 }
 
-.muka-chat-bubble--peer .muka-chat-bubble__bubble {
+.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);
-  box-shadow: var(--shadow-level2);
 }
 
-.muka-chat-bubble--agent .muka-chat-bubble__bubble {
+.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);
@@ -91,21 +109,21 @@
 
 /* ─── Header row (author · meta · time · badge) ────────── */
 
-.muka-chat-bubble__header {
+.muka-chat-message__header {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   gap: var(--chatbubble-row-gap);
 }
 
-.muka-chat-bubble__author {
+.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-bubble__author-meta {
+.muka-chat-message__author-meta {
   /* Inherits the variant's body colour from the bubble */
   color: inherit;
   font-family: var(--text-body-base-regular-fontFamily);
@@ -114,7 +132,7 @@
   line-height: var(--text-body-base-regular-lineHeight);
 }
 
-.muka-chat-bubble__badge {
+.muka-chat-message__badge {
   display: inline-flex;
   align-items: center;
 }
@@ -123,30 +141,30 @@
  * Keep the first line of content clear of the absolutely positioned menu
  * button in the bubble's top-right corner.
  */
-.muka-chat-bubble--has-menu .muka-chat-bubble__header,
-.muka-chat-bubble--has-menu.muka-chat-bubble--no-header .muka-chat-bubble__message {
-  padding-right: var(--spacing-6);
+.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-bubble__body {
+.muka-chat-message__body {
   display: flex;
   flex-direction: column;
   gap: var(--chatbubble-gap);
   min-width: 0;
 }
 
-/* The agent balloon spaces its blocks further apart (Figma 5223:8520) */
-.muka-chat-bubble--agent .muka-chat-bubble__body {
-  gap: var(--chatbubble-body-gap);
-}
-
-.muka-chat-bubble__media {
+.muka-chat-message__media {
   min-width: 0;
 }
 
-.muka-chat-bubble__message {
+.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);
@@ -156,18 +174,20 @@
 }
 
 /* Empty message block should not add a gap of its own */
-.muka-chat-bubble__message:empty {
+.muka-chat-message__message:empty {
   display: none;
 }
 
 /* ─── Embedded card ────────────────────────────────────── */
 
-.muka-chat-bubble__embed {
+.muka-chat-message__embed {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--chatbubble-embed-gap);
-  padding: var(--chatbubble-embed-padding);
+  /* 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;
 }
@@ -176,125 +196,133 @@
  * 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-bubble--own .muka-chat-bubble__embed {
+.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-bubble--peer .muka-chat-bubble__embed {
+.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-bubble--agent .muka-chat-bubble__embed {
+.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-bubble__embed-content {
+.muka-chat-message__embed-content {
   display: flex;
   flex-direction: column;
   gap: var(--chatbubble-embed-gap);
   min-width: 0;
 }
 
-.muka-chat-bubble__embed-copy {
+.muka-chat-message__embed-copy {
   position: absolute;
-  top: var(--chatbubble-embed-padding);
-  right: var(--chatbubble-embed-padding);
+  top: var(--chatbubble-embed-padding-block);
+  right: var(--chatbubble-embed-padding-inline);
 }
 
 /* ─── Stacked full-width action buttons ────────────────── */
 
-.muka-chat-bubble__action-stack {
+.muka-chat-message__action-stack {
   display: flex;
   flex-direction: column;
   gap: var(--chatbubble-action-stack-gap);
 }
 
-/* ─── Inset timestamp (user variant) ───────────────────── */
+/* ─── 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-bubble__timestamp {
+.muka-chat-message__timestamp {
   color: var(--chatbubble-color-timestamp);
-  font-family: var(--text-body-sm-regular-fontFamily);
-  font-weight: var(--text-body-sm-regular-fontWeight);
-  font-size: var(--text-body-sm-regular-fontSize);
-  line-height: var(--text-body-sm-regular-lineHeight);
+  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;
 }
 
-.muka-chat-bubble__timestamp--inset {
-  align-self: flex-end;
+/*
+ * 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 ──────────────────────────────────── */
 
-.muka-chat-bubble__menu {
+/*
+ * 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;
 }
 
-/* ─── Meta action row (below the bubble) ───────────────── */
-
-.muka-chat-bubble__actions {
-  grid-area: actions;
-  max-width: var(--chatbubble-max-width);
-  display: flex;
-  align-items: center;
-  gap: 0;
-}
-
-.muka-chat-bubble--own .muka-chat-bubble__actions,
-.muka-chat-bubble--agent .muka-chat-bubble__actions {
-  justify-content: flex-end;
+.muka-chat-message__menu:focus-within,
+.muka-chat-message--menu-open .muka-chat-message__menu {
+  opacity: 1;
+  pointer-events: auto;
 }
 
-/*
- * The meta row uses 32px icon buttons per the design. Expand the pointer/touch
- * target to the 44px WCAG 2.1 AA minimum without changing the visual size.
- */
-.muka-chat-bubble__actions .muka-button--icon-only {
-  position: relative;
+@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
+  .muka-chat-message__bubble:hover .muka-chat-message__menu {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
-.muka-chat-bubble__actions .muka-button--icon-only::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 44px;
-  height: 44px;
-  transform: translate(-50%, -50%);
+/* 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-bubble__bubble {
+  .muka-chat-message__bubble {
     box-shadow: none;
     break-inside: avoid;
     print-color-adjust: exact;
     -webkit-print-color-adjust: exact;
   }
 
-  .muka-chat-bubble__embed {
+  .muka-chat-message__embed {
     break-inside: avoid;
     print-color-adjust: exact;
     -webkit-print-color-adjust: exact;
   }
 
-  .muka-chat-bubble__menu,
-  .muka-chat-bubble__actions,
-  .muka-chat-bubble__embed-copy,
-  .muka-chat-bubble__action-stack {
+  .muka-chat-message__menu,
+  .muka-chat-message__embed-copy,
+  .muka-chat-message__action-stack {
     display: none;
   }
-
-  .muka-chat-bubble__column {
-    max-width: 100%;
-  }
 }