@revikornmann/muka-ui 0.10.0 → 0.12.0

package/build/manifest.json

@@ -11,6 +11,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -71,6 +73,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -130,6 +134,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -189,6 +195,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -248,6 +256,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -307,6 +317,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -366,6 +378,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -425,6 +439,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -484,6 +500,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -543,6 +561,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",

package/dist/cjs/components/AgentTaskList/AgentTaskList.css

@@ -20,12 +20,19 @@
   margin: 0;
   cursor: pointer;
   color: var(--color-text-subtle-default);
+  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);
+  text-align: left;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-agent-task-list--open .muka-agent-task-list__header {
   font-family: var(--text-body-sm-bold-fontFamily);
   font-weight: var(--text-body-sm-bold-fontWeight);
   font-size: var(--text-body-sm-bold-fontSize);
   line-height: var(--text-body-sm-bold-lineHeight);
-  text-align: left;
-  -webkit-tap-highlight-color: transparent;
 }
 
 .muka-agent-task-list__header:focus-visible {
@@ -83,7 +90,7 @@
   position: absolute;
   left: 7px;
   width: 1px;
-  background-color: var(--color-border-default, #d9d9d9);
+  background-color: var(--color-border-default);
 }
 
 .muka-agent-task-list__line--top {
@@ -145,3 +152,15 @@
   line-height: var(--text-body-sm-regular-lineHeight);
   word-break: break-word;
 }
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-agent-task-list {
+    break-inside: avoid;
+  }
+
+  .muka-agent-task-list__chevron {
+    display: none;
+  }
+}

package/dist/cjs/components/BottomBar/BottomBar.css

@@ -62,6 +62,25 @@
   flex-direction: row;
 }
 
+/* ─── Chat variant (houses a ChatComposer) ───────────── */
+
+.muka-bottombar--chat .muka-bottombar__content {
+  flex-direction: row;
+  max-width: var(--bottombar-chat-max-width);
+  width: 100%;
+  margin: 0 auto;
+}
+
+/* Docked chat pads its content; the floating card supplies its own padding. */
+.muka-bottombar--chat:not(.muka-bottombar--floating) .muka-bottombar__content {
+  padding: var(--bottombar-chat-padding);
+}
+
+/* Floating chat card widens to the chat cap (overrides the md default below). */
+.muka-bottombar--chat.muka-bottombar--floating .muka-bottombar__content {
+  max-width: var(--bottombar-chat-max-width);
+}
+
 /* ─── Tab item ────────────────────────────────────────── */
 
 .muka-bottombar__tab {
@@ -118,8 +137,6 @@
     var(--bottombar-floating-backdrop-start),
     var(--bottombar-floating-backdrop-end)
   );
-  backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
-  -webkit-backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
   padding: var(--bottombar-floating-padding-top) var(--bottombar-floating-margin-x) var(--bottombar-floating-margin-bottom);
 
   /* The transparent frosted margin around the pill overlays scrolling content;
@@ -274,3 +291,11 @@
     box-shadow: none;
   }
 }
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-bottombar {
+    display: none;
+  }
+}

package/dist/cjs/components/BottomBar/BottomBar.js

@@ -23,6 +23,7 @@ exports.BottomBarTab = BottomBarTab;
  * **Variants:**
  * - `actions`: Renders children as a row of action buttons.
  * - `navigation`: Renders BottomBarTab children as a tab bar.
+ * - `chat`: Houses a ChatComposer, capped at `container.max-width.lg` and centered.
  *
  * **Floating:** When `floating={true}`, the bar becomes a floating card
  * with rounded corners, padding, and shadow — used in "top level" views.

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

@@ -1 +1 @@
-{"version":3,"file":"BottomBar.js","sourceRoot":"","sources":["../../../../components/BottomBar/BottomBar.tsx"],"names":[],"mappings":";;;;AACA,2BAAyB;AAqBzB;;GAEG;AACI,MAAM,YAAY,GAAgC,CAAC,EACxD,IAAI,EACJ,UAAU,EACV,KAAK,EACL,MAAM,GAAG,KAAK,EACd,OAAO,GACR,EAAE,EAAE;IACH,MAAM,UAAU,GAAG;QACjB,qBAAqB;QACrB,MAAM,IAAI,6BAA6B;KACxC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,oCACE,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,KAAK,mBACK,MAAM,gBACT,KAAK,EACjB,IAAI,EAAC,QAAQ,aAEb,iCAAM,SAAS,EAAC,0BAA0B,YACvC,MAAM,IAAI,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,GACpC,EACP,iCAAM,SAAS,EAAC,2BAA2B,YAAE,KAAK,GAAQ,IACnD,CACV,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,YAAY,gBA2BvB;AAsCF;;;;;;;;;;;;;;;;;GAiBG;AACI,MAAM,SAAS,GAA6B,CAAC,EAClD,OAAO,EACP,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,IAAI,EACf,SAAS,EACT,eAAe,GAAG,KAAK,EACvB,QAAQ,EACR,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG;QACvB,gBAAgB;QAChB,mBAAmB,OAAO,EAAE;QAC5B,IAAI,IAAI,mBAAmB,IAAI,EAAE;QACjC,QAAQ,IAAI,0BAA0B;QACtC,SAAS,IAAI,OAAO,KAAK,YAAY,IAAI,2BAA2B,SAAS,EAAE;QAC/E,eAAe,IAAI,8BAA8B;QACjD,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,aAAa,GAAG,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAEvE,OAAO,CACL,oCAAQ,SAAS,EAAE,gBAAgB,aAChC,CAAC,QAAQ,IAAI,QAAQ,IAAI,CACxB,gCAAK,SAAS,EAAC,yBAAyB,EAAC,IAAI,EAAC,WAAW,GAAG,CAC7D,EACD,gCAAK,SAAS,EAAC,yBAAyB,EAAC,IAAI,EAAE,aAAa,YACzD,QAAQ,GACL,IACC,CACV,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,SAAS,aAgCpB;AAEF,kBAAe,iBAAS,CAAC"}
+{"version":3,"file":"BottomBar.js","sourceRoot":"","sources":["../../../../components/BottomBar/BottomBar.tsx"],"names":[],"mappings":";;;;AACA,2BAAyB;AAqBzB;;GAEG;AACI,MAAM,YAAY,GAAgC,CAAC,EACxD,IAAI,EACJ,UAAU,EACV,KAAK,EACL,MAAM,GAAG,KAAK,EACd,OAAO,GACR,EAAE,EAAE;IACH,MAAM,UAAU,GAAG;QACjB,qBAAqB;QACrB,MAAM,IAAI,6BAA6B;KACxC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,oCACE,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,KAAK,mBACK,MAAM,gBACT,KAAK,EACjB,IAAI,EAAC,QAAQ,aAEb,iCAAM,SAAS,EAAC,0BAA0B,YACvC,MAAM,IAAI,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,GACpC,EACP,iCAAM,SAAS,EAAC,2BAA2B,YAAE,KAAK,GAAQ,IACnD,CACV,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,YAAY,gBA2BvB;AAsCF;;;;;;;;;;;;;;;;;;GAkBG;AACI,MAAM,SAAS,GAA6B,CAAC,EAClD,OAAO,EACP,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,IAAI,EACf,SAAS,EACT,eAAe,GAAG,KAAK,EACvB,QAAQ,EACR,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG;QACvB,gBAAgB;QAChB,mBAAmB,OAAO,EAAE;QAC5B,IAAI,IAAI,mBAAmB,IAAI,EAAE;QACjC,QAAQ,IAAI,0BAA0B;QACtC,SAAS,IAAI,OAAO,KAAK,YAAY,IAAI,2BAA2B,SAAS,EAAE;QAC/E,eAAe,IAAI,8BAA8B;QACjD,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,aAAa,GAAG,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAEvE,OAAO,CACL,oCAAQ,SAAS,EAAE,gBAAgB,aAChC,CAAC,QAAQ,IAAI,QAAQ,IAAI,CACxB,gCAAK,SAAS,EAAC,yBAAyB,EAAC,IAAI,EAAC,WAAW,GAAG,CAC7D,EACD,gCAAK,SAAS,EAAC,yBAAyB,EAAC,IAAI,EAAE,aAAa,YACzD,QAAQ,GACL,IACC,CACV,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,SAAS,aAgCpB;AAEF,kBAAe,iBAAS,CAAC"}

package/dist/cjs/components/Button/Button.css

@@ -96,10 +96,13 @@
 }
 
 /* `[data-state="open"]` keeps a Button pressed while it's an open disclosure
-   trigger (Radix Menu/Popover set this on the trigger). */
+   trigger (Radix Menu/Popover set this on the trigger). `[aria-pressed="true"]`
+   gives toggle buttons a visible selected state, so the toggle is not conveyed
+   to sighted users by the accessibility tree alone. */
 .muka-button--primary:active:not(:disabled),
 .muka-button--primary.muka-button--pressed:not(:disabled),
-.muka-button--primary[data-state="open"]:not(:disabled) {
+.muka-button--primary[data-state="open"]:not(:disabled),
+.muka-button--primary[aria-pressed="true"]:not(:disabled) {
   background-color: var(--button-color-primary-background-pressed);
   color: var(--button-color-primary-foreground-pressed);
   box-shadow: var(--button-color-primary-shadow-pressed);
@@ -128,7 +131,8 @@
 
 .muka-button--secondary:active:not(:disabled),
 .muka-button--secondary.muka-button--pressed:not(:disabled),
-.muka-button--secondary[data-state="open"]:not(:disabled) {
+.muka-button--secondary[data-state="open"]:not(:disabled),
+.muka-button--secondary[aria-pressed="true"]:not(:disabled) {
   background-color: var(--button-color-secondary-background-pressed);
   color: var(--button-color-secondary-foreground-pressed);
   box-shadow: var(--button-color-secondary-shadow-pressed);
@@ -157,7 +161,8 @@
 
 .muka-button--tertiary:active:not(:disabled),
 .muka-button--tertiary.muka-button--pressed:not(:disabled),
-.muka-button--tertiary[data-state="open"]:not(:disabled) {
+.muka-button--tertiary[data-state="open"]:not(:disabled),
+.muka-button--tertiary[aria-pressed="true"]:not(:disabled) {
   background-color: var(--button-color-tertiary-background-pressed);
   color: var(--button-color-tertiary-foreground-pressed);
   border-color: var(--button-color-tertiary-border-pressed);
@@ -186,7 +191,8 @@
 
 .muka-button--ghost:active:not(:disabled),
 .muka-button--ghost.muka-button--pressed:not(:disabled),
-.muka-button--ghost[data-state="open"]:not(:disabled) {
+.muka-button--ghost[data-state="open"]:not(:disabled),
+.muka-button--ghost[aria-pressed="true"]:not(:disabled) {
   background-color: var(--button-color-ghost-background-pressed);
   color: var(--button-color-ghost-foreground-pressed);
   border-color: var(--button-color-ghost-border-pressed);
@@ -215,7 +221,8 @@
 
 .muka-button--muted:active:not(:disabled),
 .muka-button--muted.muka-button--pressed:not(:disabled),
-.muka-button--muted[data-state="open"]:not(:disabled) {
+.muka-button--muted[data-state="open"]:not(:disabled),
+.muka-button--muted[aria-pressed="true"]:not(:disabled) {
   background-color: var(--button-color-muted-background-pressed);
   color: var(--button-color-muted-foreground-pressed);
   border-color: var(--button-color-muted-border-pressed);

package/dist/cjs/components/Button/Button.js

@@ -21,7 +21,7 @@ require("./Button.css");
  * - Uses native <button> element for full keyboard support
  * - Focus indicator meets WCAG 2.4.7 (visible focus)
  * - When iconOnly=true, aria-label is required (dev warning if missing)
- * - Supports aria-pressed for toggle buttons
+ * - Supports aria-pressed for toggle buttons (renders the pressed treatment when true)
  * - Supports aria-expanded/aria-controls for menu buttons
  *
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/button/

package/dist/cjs/components/ChatBubble/ChatBubble.css

@@ -3,69 +3,222 @@
 .muka-chat-bubble {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
   width: 100%;
   max-width: 100%;
 }
 
-/* ─── User variant — right-aligned bubble ──────────────── */
+/* ─── 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).
+ */
 
-.muka-chat-bubble--user {
-  align-items: flex-end;
+.muka-chat-bubble__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    'bubble'
+    'actions';
+  column-gap: var(--chatbubble-row-gap);
+  row-gap: var(--chatbubble-gap);
+  width: 100%;
 }
 
-.muka-chat-bubble--user .muka-chat-bubble__message {
-  background-color: var(--color-surface-level2);
-  color: var(--color-text-default-default);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-4);
-  max-width: min(600px, 100%);
-  word-break: break-word;
+.muka-chat-bubble--has-avatar .muka-chat-bubble__row {
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-areas:
+    'rail bubble'
+    '.    actions';
 }
 
-.muka-chat-bubble--user .muka-chat-bubble__meta {
-  justify-content: flex-end;
+.muka-chat-bubble--own.muka-chat-bubble--has-avatar .muka-chat-bubble__row {
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'bubble  rail'
+    'actions .';
 }
 
-/* ─── Agent variant — no bubble, full width ────────────── */
-
-.muka-chat-bubble--agent {
-  align-items: flex-start;
+.muka-chat-bubble__rail {
+  grid-area: rail;
+  /* Sits on the bubble's baseline, above the action bar */
+  align-self: end;
+  display: flex;
+  justify-content: center;
+  min-width: var(--chatbubble-avatar-size);
 }
 
-.muka-chat-bubble--agent .muka-chat-bubble__message {
-  color: var(--color-text-default-default);
-  padding: 0 var(--spacing-2);
+/* ─── Bubble surface ───────────────────────────────────── */
+
+.muka-chat-bubble__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);
+  border-radius: var(--chatbubble-radius);
+  border: var(--border-width-regular) solid transparent;
   word-break: break-word;
 }
 
-.muka-chat-bubble--agent .muka-chat-bubble__meta {
-  justify-content: flex-start;
+.muka-chat-bubble--own .muka-chat-bubble__bubble,
+.muka-chat-bubble--own .muka-chat-bubble__actions {
+  justify-self: end;
+}
+
+.muka-chat-bubble--own .muka-chat-bubble__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 {
+  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 {
+  background-color: var(--chatbubble-color-agent-background);
+  border-color: var(--chatbubble-color-agent-border);
+  color: var(--chatbubble-color-agent-foreground);
 }
 
-/* ─── Message typography ───────────────────────────────── */
+/* ─── Header row (author · meta · time · badge) ────────── */
+
+.muka-chat-bubble__header {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: var(--chatbubble-row-gap);
+}
+
+.muka-chat-bubble__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 {
+  /* 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-bubble__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-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);
+}
+
+/* ─── Body ─────────────────────────────────────────────── */
+
+.muka-chat-bubble__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 {
+  min-width: 0;
+}
 
 .muka-chat-bubble__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;
 }
 
-/* ─── Meta row (timestamp + actions) ───────────────────── */
+/* Empty message block should not add a gap of its own */
+.muka-chat-bubble__message:empty {
+  display: none;
+}
 
-.muka-chat-bubble__meta {
+/* ─── Embedded card ────────────────────────────────────── */
+
+.muka-chat-bubble__embed {
+  position: relative;
   display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
+  flex-direction: column;
+  gap: var(--chatbubble-embed-gap);
+  padding: var(--chatbubble-embed-padding);
+  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-bubble--own .muka-chat-bubble__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 {
+  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 {
+  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 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chatbubble-embed-gap);
+  min-width: 0;
+}
+
+.muka-chat-bubble__embed-copy {
+  position: absolute;
+  top: var(--chatbubble-embed-padding);
+  right: var(--chatbubble-embed-padding);
+}
+
+/* ─── Stacked full-width action buttons ────────────────── */
+
+.muka-chat-bubble__action-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chatbubble-action-stack-gap);
+}
+
+/* ─── Inset timestamp (user variant) ───────────────────── */
+
 .muka-chat-bubble__timestamp {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 var(--spacing-2);
-  color: var(--color-text-subtle-default);
+  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);
@@ -73,8 +226,75 @@
   white-space: nowrap;
 }
 
+.muka-chat-bubble__timestamp--inset {
+  align-self: flex-end;
+}
+
+/* ─── Menu affordance ──────────────────────────────────── */
+
+.muka-chat-bubble__menu {
+  position: absolute;
+  top: var(--spacing-1);
+  right: var(--spacing-1);
+}
+
+/* ─── 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;
+}
+
+/*
+ * 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;
+}
+
+.muka-chat-bubble__actions .muka-button--icon-only::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 44px;
+  height: 44px;
+  transform: translate(-50%, -50%);
+}
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-chat-bubble__bubble {
+    box-shadow: none;
+    break-inside: avoid;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .muka-chat-bubble__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 {
+    display: none;
+  }
+
+  .muka-chat-bubble__column {
+    max-width: 100%;
+  }
+}

package/dist/cjs/components/ChatBubble/ChatBubble.js

@@ -2,22 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatBubble = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../Button");
+const Icon_1 = require("../Icon");
 require("./ChatBubble.css");
 /**
  * ChatBubble — a single chat message.
  *
- * Composes with `ChatMessageList`. For agent messages, render an `AgentTaskList`
- * above the bubble children if you want to show tool/task progress.
+ * Composes with `ChatMessageList`. Pass `<ChatPhotoGrid />` to `media`, an
+ * `<AgentTaskList />` above the bubble for tool progress, and a `<Badge />` to
+ * `badge` for visibility scope.
  */
-const ChatBubble = ({ variant, children, timestamp, actions, className = '', }) => {
+const ChatBubble = ({ variant, children, avatar, author, authorMeta, badge, timestamp, media, embed, onEmbedCopy, embedCopyLabel = 'Copy', actionStack, onCopy, copyLabel = 'Copy', onFeedback, feedback = null, feedbackUpLabel = 'Helpful', feedbackDownLabel = 'Not helpful', onRefresh, refreshLabel = 'Regenerate', actions, onMenuClick, menuLabel = 'Message options', className = '', }) => {
+    // The own variant shows its timestamp inside the bubble; the others in the header row.
+    const timestampInHeader = variant !== 'own';
+    const hasHeader = Boolean(author || badge || (timestampInHeader && timestamp));
     const classes = [
         'muka-chat-bubble',
         `muka-chat-bubble--${variant}`,
+        avatar && 'muka-chat-bubble--has-avatar',
+        onMenuClick && 'muka-chat-bubble--has-menu',
+        !hasHeader && 'muka-chat-bubble--no-header',
         className,
     ]
         .filter(Boolean)
         .join(' ');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, "data-variant": variant, children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__message", children: children }), (timestamp || actions) && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-bubble__meta", children: [timestamp && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-bubble__timestamp", children: timestamp })), actions && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__actions", children: actions }))] }))] }));
+    // The rail is only reserved when an avatar is supplied. To keep grouped
+    // messages aligned, pass a spacer node for the follow-up messages.
+    const rail = avatar ? ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__rail", children: avatar })) : null;
+    const hasActionBar = Boolean(onCopy || onFeedback || onRefresh || actions);
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes, "data-variant": variant, children: (0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-bubble__row", children: [variant !== 'own' ? rail : null, (0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-bubble__bubble", children: [hasHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-bubble__header", children: [author && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-bubble__author", children: author })), authorMeta && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-bubble__author-meta", children: authorMeta })), timestampInHeader && timestamp && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-bubble__timestamp", children: timestamp })), badge && (0, jsx_runtime_1.jsx)("span", { className: "muka-chat-bubble__badge", children: badge })] })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-bubble__body", children: [media && (0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__media", children: media }), (0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__message", children: children }), embed && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-bubble__embed", children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__embed-content", children: embed }), onEmbedCopy && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__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-bubble__action-stack", children: actionStack }))] }), !timestampInHeader && timestamp && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-bubble__timestamp muka-chat-bubble__timestamp--inset", children: timestamp })), onMenuClick && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__menu", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": menuLabel, onClick: onMenuClick, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-down-s", size: "xs" }) }) }))] }), hasActionBar && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-bubble__actions", children: [onCopy && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": copyLabel, onClick: onCopy, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "file-copy", size: "xs" }) })), onFeedback && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": feedbackUpLabel, "aria-pressed": feedback === 'up', onClick: () => onFeedback(feedback === 'up' ? null : 'up'), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "thumb-up", size: "xs" }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": feedbackDownLabel, "aria-pressed": feedback === 'down', onClick: () => onFeedback(feedback === 'down' ? null : 'down'), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "thumb-down", size: "xs" }) })] })), onRefresh && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": refreshLabel, onClick: onRefresh, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "restart", size: "xs" }) })), actions] })), variant === 'own' ? rail : null] }) }));
 };
 exports.ChatBubble = ChatBubble;
 exports.default = exports.ChatBubble;

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

@@ -1 +1 @@
-{"version":3,"file":"ChatBubble.js","sourceRoot":"","sources":["../../../../components/ChatBubble/ChatBubble.tsx"],"names":[],"mappings":";;;;AACA,4BAA0B;AA0B1B;;;;;GAKG;AACI,MAAM,UAAU,GAA8B,CAAC,EACpD,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,OAAO,GAAG;QACd,kBAAkB;QAClB,qBAAqB,OAAO,EAAE;QAC9B,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,iCAAK,SAAS,EAAE,OAAO,kBAAgB,OAAO,aAC5C,gCAAK,SAAS,EAAC,2BAA2B,YAAE,QAAQ,GAAO,EAC1D,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CACzB,iCAAK,SAAS,EAAC,wBAAwB,aACpC,SAAS,IAAI,CACZ,iCAAM,SAAS,EAAC,6BAA6B,YAAE,SAAS,GAAQ,CACjE,EACA,OAAO,IAAI,CACV,gCAAK,SAAS,EAAC,2BAA2B,YAAE,OAAO,GAAO,CAC3D,IACG,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,UAAU,cA8BrB;AAEF,kBAAe,kBAAU,CAAC"}
+{"version":3,"file":"ChatBubble.js","sourceRoot":"","sources":["../../../../components/ChatBubble/ChatBubble.tsx"],"names":[],"mappings":"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"}