@revikornmann/muka-ui 0.2.1

package/dist/cjs/components/ChatAttachmentChip/ChatAttachmentChip.css

@@ -0,0 +1,153 @@
+/* ChatAttachmentChip Component Styles */
+
+.muka-chat-attachment-chip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  max-width: 240px;
+  padding: var(--spacing-2) var(--spacing-3);
+  background-color: var(--color-surface-level1);
+  border: var(--border-width-regular) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.muka-chat-attachment-chip--uploading {
+  padding-bottom: calc(var(--spacing-2) + 2px);
+}
+
+.muka-chat-attachment-chip--error {
+  border-color: var(--color-state-error-default, var(--color-text-default-default));
+}
+
+.muka-chat-attachment-chip--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Body (icon + text) ───────────────────────────────── */
+
+.muka-chat-attachment-chip__body {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  flex: 1 1 auto;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+  cursor: default;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-chat-attachment-chip--interactive .muka-chat-attachment-chip__body {
+  cursor: pointer;
+}
+
+.muka-chat-attachment-chip--interactive .muka-chat-attachment-chip__body:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+.muka-chat-attachment-chip__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-chat-attachment-chip__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.muka-chat-attachment-chip__name {
+  color: var(--color-text-default-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);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.muka-chat-attachment-chip__meta {
+  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);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.muka-chat-attachment-chip--error .muka-chat-attachment-chip__meta {
+  color: var(--color-state-error-default, var(--color-text-default-default));
+}
+
+/* ─── Remove button ────────────────────────────────────── */
+
+.muka-chat-attachment-chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: none;
+  padding: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--color-text-subtle-default);
+  flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-chat-attachment-chip__remove:hover:not(:disabled) {
+  color: var(--color-text-default-default);
+  background-color: var(--color-surface-level2);
+}
+
+.muka-chat-attachment-chip__remove:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
+}
+
+.muka-chat-attachment-chip__remove:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* ─── Progress bar ─────────────────────────────────────── */
+
+.muka-chat-attachment-chip__progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  background-color: var(--color-surface-level2);
+  overflow: hidden;
+}
+
+.muka-chat-attachment-chip__progress-fill {
+  display: block;
+  height: 100%;
+  background-color: var(--color-action-default);
+  transition: width 0.16s ease;
+}
+
+.muka-chat-attachment-chip--error .muka-chat-attachment-chip__progress-fill {
+  background-color: var(--color-state-error-default, var(--color-text-default-default));
+}

package/dist/cjs/components/ChatAttachmentChip/ChatAttachmentChip.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatAttachmentChip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Icon_1 = require("../Icon");
+const Spinner_1 = require("../Spinner");
+require("./ChatAttachmentChip.css");
+/**
+ * ChatAttachmentChip — a single attachment staged inside a `ChatComposer`,
+ * or rendered alongside an agent message that referenced a file.
+ *
+ * Shows the file name, optional meta line, an upload progress bar (when
+ * `progress` is provided), and an optional remove button.
+ */
+const ChatAttachmentChip = ({ name, meta, icon, progress, error = false, onRemove, onClick, disabled = false, removeLabel = 'Remove attachment', className = '', }) => {
+    const isUploading = typeof progress === 'number' && progress < 100;
+    const Tag = onClick ? 'button' : 'div';
+    const classes = [
+        'muka-chat-attachment-chip',
+        isUploading && 'muka-chat-attachment-chip--uploading',
+        error && 'muka-chat-attachment-chip--error',
+        disabled && 'muka-chat-attachment-chip--disabled',
+        onClick && 'muka-chat-attachment-chip--interactive',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [(0, jsx_runtime_1.jsxs)(Tag, { className: "muka-chat-attachment-chip__body", ...(onClick
+                    ? { type: 'button', onClick, disabled }
+                    : {}), children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-chat-attachment-chip__icon", "aria-hidden": "true", children: isUploading
+                            ? (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "sm", variant: "subtle" })
+                            : icon ?? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "attachment", size: "sm" }) }), (0, jsx_runtime_1.jsxs)("span", { className: "muka-chat-attachment-chip__text", children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-chat-attachment-chip__name", children: name }), meta && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-attachment-chip__meta", children: meta }))] })] }), onRemove && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-chat-attachment-chip__remove", onClick: onRemove, disabled: disabled || isUploading, "aria-label": removeLabel, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", size: "xs" }) })), isUploading && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-attachment-chip__progress", role: "progressbar", "aria-valuenow": Math.round(progress), "aria-valuemin": 0, "aria-valuemax": 100, children: (0, jsx_runtime_1.jsx)("span", { className: "muka-chat-attachment-chip__progress-fill", style: { width: `${Math.max(0, Math.min(100, progress))}%` } }) }))] }));
+};
+exports.ChatAttachmentChip = ChatAttachmentChip;
+exports.default = exports.ChatAttachmentChip;
+//# sourceMappingURL=ChatAttachmentChip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatAttachmentChip.js","sourceRoot":"","sources":["../../../../components/ChatAttachmentChip/ChatAttachmentChip.tsx"],"names":[],"mappings":";;;;AACA,kCAA+B;AAC/B,wCAAqC;AACrC,oCAAkC;AAwClC;;;;;;GAMG;AACI,MAAM,kBAAkB,GAAsC,CAAC,EACpE,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,mBAAmB,EACjC,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,GAAG,GAAG,CAAC;IACnE,MAAM,GAAG,GAAqB,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzD,MAAM,OAAO,GAAG;QACd,2BAA2B;QAC3B,WAAW,IAAI,sCAAsC;QACrD,KAAK,IAAI,kCAAkC;QAC3C,QAAQ,IAAI,qCAAqC;QACjD,OAAO,IAAI,wCAAwC;QACnD,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,iCAAK,SAAS,EAAE,OAAO,aACrB,wBAAC,GAAG,IACF,SAAS,EAAC,iCAAiC,KACvC,CAAC,OAAO;oBACV,CAAC,CAAC,EAAE,IAAI,EAAE,QAAiB,EAAE,OAAO,EAAE,QAAQ,EAAE;oBAChD,CAAC,CAAC,EAAE,CAAC,aAEP,iCAAM,SAAS,EAAC,iCAAiC,iBAAa,MAAM,YACjE,WAAW;4BACV,CAAC,CAAC,uBAAC,iBAAO,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,GAAG;4BACxC,CAAC,CAAC,IAAI,IAAI,uBAAC,WAAI,IAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,GAC3C,EAEP,kCAAM,SAAS,EAAC,iCAAiC,aAC/C,iCAAM,SAAS,EAAC,iCAAiC,YAAE,IAAI,GAAQ,EAC9D,IAAI,IAAI,CACP,iCAAM,SAAS,EAAC,iCAAiC,YAAE,IAAI,GAAQ,CAChE,IACI,IACH,EAEL,QAAQ,IAAI,CACX,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,IAAI,WAAW,gBACrB,WAAW,YAEvB,uBAAC,WAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,GACxB,CACV,EAEA,WAAW,IAAI,CACd,iCACE,SAAS,EAAC,qCAAqC,EAC/C,IAAI,EAAC,aAAa,mBACH,IAAI,CAAC,KAAK,CAAC,QAAS,CAAC,mBACrB,CAAC,mBACD,GAAG,YAElB,iCACE,SAAS,EAAC,0CAA0C,EACpD,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,QAAS,CAAC,CAAC,GAAG,EAAE,GAC7D,GACG,CACR,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AA5EW,QAAA,kBAAkB,sBA4E7B;AAEF,kBAAe,0BAAkB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ChatAttachmentChip/index.ts"],"names":[],"mappings":";;;AAAA,2DAG8B;AAF5B,wHAAA,kBAAkB,OAAA"}

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

@@ -0,0 +1,80 @@
+/* ChatBubble Component Styles */
+
+.muka-chat-bubble {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  width: 100%;
+  max-width: 100%;
+}
+
+/* ─── User variant — right-aligned bubble ──────────────── */
+
+.muka-chat-bubble--user {
+  align-items: flex-end;
+}
+
+.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--user .muka-chat-bubble__meta {
+  justify-content: flex-end;
+}
+
+/* ─── Agent variant — no bubble, full width ────────────── */
+
+.muka-chat-bubble--agent {
+  align-items: flex-start;
+}
+
+.muka-chat-bubble--agent .muka-chat-bubble__message {
+  color: var(--color-text-default-default);
+  padding: 0 var(--spacing-2);
+  width: 100%;
+  word-break: break-word;
+}
+
+.muka-chat-bubble--agent .muka-chat-bubble__meta {
+  justify-content: flex-start;
+}
+
+/* ─── Message typography ───────────────────────────────── */
+
+.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);
+}
+
+/* ─── Meta row (timestamp + actions) ───────────────────── */
+
+.muka-chat-bubble__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.muka-chat-bubble__timestamp {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--spacing-2);
+  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);
+  white-space: nowrap;
+}
+
+.muka-chat-bubble__actions {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatBubble = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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.
+ */
+const ChatBubble = ({ variant, children, timestamp, actions, className = '', }) => {
+    const classes = [
+        'muka-chat-bubble',
+        `muka-chat-bubble--${variant}`,
+        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 }))] }))] }));
+};
+exports.ChatBubble = ChatBubble;
+exports.default = exports.ChatBubble;
+//# sourceMappingURL=ChatBubble.js.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ChatBubble/index.ts"],"names":[],"mappings":";;;AAAA,2CAAgE;AAAvD,wGAAA,UAAU,OAAA"}

package/dist/cjs/components/ChatComposer/ChatComposer.css

@@ -0,0 +1,122 @@
+/* ChatComposer Component Styles */
+
+.muka-chat-composer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  width: 100%;
+  max-width: 768px;
+  padding: var(--spacing-3);
+  background-color: var(--color-surface-level3);
+  border-radius: var(--radius-xl);
+  box-shadow:
+    0 0 0.5px var(--color-black-alpha-5, rgba(0, 0, 0, 0.09)),
+    0 8px 8px var(--color-black-alpha-5, rgba(0, 0, 0, 0.09));
+}
+
+.muka-chat-composer--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* ─── Staged attachments slot ──────────────────────────── */
+
+.muka-chat-composer__attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+}
+
+/* ─── Input row ────────────────────────────────────────── */
+
+.muka-chat-composer__row {
+  display: flex;
+  width: 100%;
+  align-items: stretch;
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-lg);
+  background-color: var(--input-field-color-default-background);
+  padding: var(--spacing-2);
+  transition: border-color 0.12s ease;
+}
+
+.muka-chat-composer__row:focus-within {
+  border-color: var(--input-field-color-focus-border, var(--color-action-default));
+}
+
+.muka-chat-composer__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+  resize: none;
+  border: none;
+  background: transparent;
+  outline: none;
+  padding: var(--spacing-1) var(--spacing-2);
+  color: var(--color-text-default-default);
+  font-family: var(--text-body-md-regular-fontFamily);
+  font-weight: var(--text-body-md-regular-fontWeight);
+  font-size: var(--text-body-md-regular-fontSize);
+  line-height: var(--text-body-md-regular-lineHeight);
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.muka-chat-composer__input::placeholder {
+  color: var(--color-text-subtle-default);
+}
+
+/* ─── Actions row (leading + trailing) ─────────────────── */
+
+.muka-chat-composer__actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+}
+
+.muka-chat-composer__leading {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.muka-chat-composer__trailing {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-left: auto;
+}
+
+/* ─── Send button ──────────────────────────────────────── */
+
+.muka-chat-composer__send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-3xl, 40px);
+  height: var(--size-3xl, 40px);
+  border: none;
+  border-radius: var(--radius-lg);
+  background-color: var(--button-color-primary-background-default);
+  color: var(--button-color-primary-foreground-default);
+  cursor: pointer;
+  flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color 0.12s ease;
+}
+
+.muka-chat-composer__send:hover:not(:disabled) {
+  background-color: var(--button-color-primary-background-hover, var(--button-color-primary-background-default));
+}
+
+.muka-chat-composer__send:disabled {
+  background-color: var(--color-surface-level1);
+  color: var(--color-text-subtle-default);
+  cursor: not-allowed;
+}
+
+.muka-chat-composer__send:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
+}

package/dist/cjs/components/ChatComposer/ChatComposer.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatComposer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Icon_1 = require("../Icon");
+const Spinner_1 = require("../Spinner");
+require("./ChatComposer.css");
+/**
+ * ChatComposer — input affordance for chat conversations.
+ *
+ * Auto-growing textarea with a send button. Submits on Enter (Shift+Enter for
+ * newline). Designed to live in a `BottomBar`.
+ */
+exports.ChatComposer = (0, react_1.forwardRef)(({ value, onChange, onSubmit, placeholder = 'Reply...', attachments, leading, trailing, loading = false, disabled = false, hideSendButton = false, sendLabel = 'Send message', maxHeight = 160, autoFocus = false, className = '', }, forwardedRef) => {
+    const textareaRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(forwardedRef, () => textareaRef.current);
+    (0, react_1.useEffect)(() => {
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        el.style.height = 'auto';
+        const next = Math.min(el.scrollHeight, maxHeight);
+        el.style.height = `${next}px`;
+    }, [value, maxHeight]);
+    const canSubmit = !disabled && !loading && value.trim().length > 0;
+    const handleSubmit = () => {
+        if (!canSubmit)
+            return;
+        onSubmit?.(value);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+    const classes = [
+        'muka-chat-composer',
+        disabled && 'muka-chat-composer--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsxs)("form", { className: classes, onSubmit: (e) => {
+            e.preventDefault();
+            handleSubmit();
+        }, children: [attachments && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-composer__attachments", children: attachments })), (0, jsx_runtime_1.jsx)("div", { className: "muka-chat-composer__row", children: (0, jsx_runtime_1.jsx)("textarea", { ref: textareaRef, className: "muka-chat-composer__input", value: value, onChange: (e) => onChange(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, autoFocus: autoFocus, rows: 1, "aria-label": placeholder }) }), (leading || (!hideSendButton && (trailing || true))) && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-composer__actions", children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-chat-composer__leading", children: leading }), (0, jsx_runtime_1.jsx)("div", { className: "muka-chat-composer__trailing", children: trailing ?? (!hideSendButton && ((0, jsx_runtime_1.jsx)("button", { type: "submit", className: "muka-chat-composer__send", disabled: !canSubmit, "aria-label": sendLabel, children: loading ? ((0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "sm", variant: "inverse" })) : ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-up", size: "sm" })) }))) })] }))] }));
+});
+exports.ChatComposer.displayName = 'ChatComposer';
+exports.default = exports.ChatComposer;
+//# sourceMappingURL=ChatComposer.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ChatComposer/index.ts"],"names":[],"mappings":";;;AAAA,+CAAsE;AAA7D,4GAAA,YAAY,OAAA"}

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

@@ -0,0 +1,24 @@
+/* ChatMessageList Component Styles */
+
+.muka-chat-message-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  overflow-x: clip;
+  overflow-y: auto;
+  background-color: var(--color-surface-level3);
+  padding: var(--section-padding-vertical-default, var(--spacing-8))
+    var(--section-padding-horizontal-default, var(--spacing-4));
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.muka-chat-message-list__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-8);
+  width: 100%;
+  max-width: 640px;
+  margin: 0 auto;
+}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatMessageList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("./ChatMessageList.css");
+/**
+ * ChatMessageList — vertically scrolling container for chat messages.
+ *
+ * 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`.
+ */
+const ChatMessageList = ({ children, autoScroll = true, className = '', 'aria-label': ariaLabel = 'Chat messages', }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!autoScroll)
+            return;
+        const el = ref.current;
+        if (!el)
+            return;
+        el.scrollTop = el.scrollHeight;
+    }, [children, autoScroll]);
+    const classes = ['muka-chat-message-list', className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: classes, role: "log", "aria-live": "polite", "aria-label": ariaLabel, children: (0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message-list__inner", children: children }) }));
+};
+exports.ChatMessageList = ChatMessageList;
+exports.default = exports.ChatMessageList;
+//# sourceMappingURL=ChatMessageList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageList.js","sourceRoot":"","sources":["../../../../components/ChatMessageList/ChatMessageList.tsx"],"names":[],"mappings":";;;;AAAA,iCAAiD;AACjD,iCAA+B;AAmB/B;;;;;;;GAOG;AACI,MAAM,eAAe,GAAmC,CAAC,EAC9D,QAAQ,EACR,UAAU,GAAG,IAAI,EACjB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,GAAG,eAAe,GAC1C,EAAE,EAAE;IACH,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEzC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAE3B,MAAM,OAAO,GAAG,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEhF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,IAAI,EAAC,KAAK,eACA,QAAQ,gBACN,SAAS,YAErB,gCAAK,SAAS,EAAC,+BAA+B,YAAE,QAAQ,GAAO,GAC3D,CACP,CAAC;AACJ,CAAC,CAAC;AA5BW,QAAA,eAAe,mBA4B1B;AAEF,kBAAe,uBAAe,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ChatMessageList/index.ts"],"names":[],"mappings":";;;AAAA,qDAA+E;AAAtE,kHAAA,eAAe,OAAA"}