@revikornmann/muka-ui 0.11.0 → 0.13.0

package/dist/styles/components/ChatComposer.css

@@ -1,11 +1,15 @@
 /* ChatComposer Component Styles */
 
+/*
+ * The composer is a bare, fill-width row: no padding, background, border or
+ * max-width of its own (Figma 5243:14141). Whatever hosts it owns the
+ * container — see BottomBar's `chat` variant.
+ */
 .muka-chat-composer {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-3);
   width: 100%;
-  max-width: 768px;
 }
 
 .muka-chat-composer--disabled {
@@ -111,3 +115,11 @@
   right: var(--spacing-2);
   transform: translateY(-50%);
 }
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-chat-composer {
+    display: none;
+  }
+}

package/dist/styles/components/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/styles/components/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/styles/components/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/styles/components/ChatPhotoGrid.css

@@ -0,0 +1,119 @@
+/* ChatPhotoGrid Component Styles */
+
+/*
+ * The grid clips to its own radius and the tiles stay square, so only the four
+ * outer corners round — matching the Figma "Wrapper" frame (5225:1394).
+ */
+.muka-chat-photo-grid {
+  display: grid;
+  gap: var(--chatphotogrid-gap);
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: var(--chatphotogrid-radius);
+}
+
+/* ─── Tiles ────────────────────────────────────────────── */
+
+.muka-chat-photo-grid__tile {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background-color: var(--chatphotogrid-color-placeholder);
+  aspect-ratio: 1 / 1;
+}
+
+button.muka-chat-photo-grid__tile {
+  cursor: pointer;
+  appearance: none;
+}
+
+button.muka-chat-photo-grid__tile:focus-visible {
+  outline: var(--border-width-bold) solid var(--color-border-focus);
+  /* Inset, so the grid's overflow clip cannot cut the ring off on corner tiles */
+  outline-offset: calc(-1 * var(--border-width-bold));
+}
+
+.muka-chat-photo-grid__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ─── Overflow tile ────────────────────────────────────── */
+
+.muka-chat-photo-grid__overflow {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--chatphotogrid-color-overflow-background);
+  color: var(--chatphotogrid-color-overflow-foreground);
+  font-family: var(--text-body-2xl-regular-fontFamily);
+  font-weight: var(--text-body-2xl-regular-fontWeight);
+  font-size: var(--text-body-2xl-regular-fontSize);
+  line-height: var(--text-body-2xl-regular-lineHeight);
+}
+
+/* ─── Layouts ──────────────────────────────────────────── */
+
+.muka-chat-photo-grid--1 {
+  grid-template-columns: 1fr;
+}
+
+.muka-chat-photo-grid--landscape .muka-chat-photo-grid__tile {
+  aspect-ratio: 4 / 3;
+}
+
+.muka-chat-photo-grid--portrait .muka-chat-photo-grid__tile {
+  aspect-ratio: 3 / 4;
+}
+
+.muka-chat-photo-grid--2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.muka-chat-photo-grid--3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.muka-chat-photo-grid--4 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+/* 5 photos: a 2-up row above a 3-up row, on a shared 6-column track */
+.muka-chat-photo-grid--5 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(-n + 2) {
+  grid-column: span 3;
+}
+
+.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(n + 3) {
+  grid-column: span 2;
+}
+
+.muka-chat-photo-grid--6,
+.muka-chat-photo-grid--overflow {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-chat-photo-grid {
+    break-inside: avoid;
+  }
+
+  .muka-chat-photo-grid__image {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+}