@revikornmann/muka-ui 0.11.0 → 0.13.0

package/tokens/t4-components/chatbubble.json

@@ -0,0 +1,180 @@
+{
+  "$schema": {
+    "$type": "other",
+    "$value": "https://design-tokens.org/schemas/1.0/schema.json"
+  },
+  "chatbubble": {
+    "max-width": {
+      "$type": "sizing",
+      "$value": "{container.max-width.sm}"
+    },
+    "radius": {
+      "$type": "borderRadius",
+      "$value": "{border.radius.lg}"
+    },
+    "padding": {
+      "block": {
+        "$type": "dimension",
+        "$value": "{spacing.3}"
+      },
+      "inline": {
+        "$type": "dimension",
+        "$value": "{spacing.4}"
+      }
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{spacing.1}"
+    },
+    "row": {
+      "gap": {
+        "$type": "dimension",
+        "$value": "{spacing.3}"
+      },
+      "gap-compact": {
+        "$type": "dimension",
+        "$value": "{spacing.2}"
+      }
+    },
+    "stack": {
+      "gap": {
+        "$type": "dimension",
+        "$value": "{spacing.3}"
+      }
+    },
+    "avatar": {
+      "size": {
+        "$type": "sizing",
+        "$value": "{size.4xl}"
+      },
+      "size-compact": {
+        "$type": "sizing",
+        "$value": "{size.2xl}"
+      }
+    },
+    "color": {
+      "own": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.conversation.own.background}"
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{color.conversation.own.border}"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.conversation.own.foreground}"
+        }
+      },
+      "peer": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.conversation.peer.background}"
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{color.conversation.peer.border}"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.conversation.peer.foreground}"
+        }
+      },
+      "agent": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.conversation.agent.background}"
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{color.conversation.agent.border}"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.conversation.agent.foreground}"
+        }
+      },
+      "timestamp": {
+        "$type": "color",
+        "$value": "{color.conversation.meta}"
+      }
+    },
+    "embed": {
+      "padding": {
+        "block": {
+          "$type": "dimension",
+          "$value": "{spacing.3}"
+        },
+        "inline": {
+          "$type": "dimension",
+          "$value": "{spacing.4}"
+        }
+      },
+      "margin": {
+        "block": {
+          "$type": "dimension",
+          "$value": "{spacing.3}"
+        }
+      },
+      "gap": {
+        "$type": "dimension",
+        "$value": "{spacing.2}"
+      },
+      "radius": {
+        "$type": "borderRadius",
+        "$value": "{border.radius.lg}"
+      },
+      "color": {
+        "own": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.conversation.own.background-raised}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.conversation.own.border}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.conversation.own.foreground}"
+          }
+        },
+        "peer": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.conversation.peer.background-raised}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.conversation.peer.border}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.conversation.peer.foreground}"
+          }
+        },
+        "agent": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.conversation.agent.background-raised}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.conversation.agent.border}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.conversation.agent.foreground}"
+          }
+        }
+      }
+    },
+    "action-stack": {
+      "gap": {
+        "$type": "dimension",
+        "$value": "{spacing.3}"
+      }
+    }
+  }
+}

package/tokens/t4-components/chatphotogrid.json

@@ -0,0 +1,32 @@
+{
+  "$schema": {
+    "$type": "other",
+    "$value": "https://design-tokens.org/schemas/1.0/schema.json"
+  },
+  "chatphotogrid": {
+    "gap": {
+      "$type": "dimension",
+      "$value": "{spacing.1}"
+    },
+    "radius": {
+      "$type": "borderRadius",
+      "$value": "{border.radius.md}"
+    },
+    "color": {
+      "placeholder": {
+        "$type": "color",
+        "$value": "{color.surface.level2}"
+      },
+      "overflow": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.surface.backdrop}"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.text.default.inverse}"
+        }
+      }
+    }
+  }
+}

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

@@ -1,80 +0,0 @@
-/* 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

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

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

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

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

package/dist/esm/components/ChatBubble/ChatBubble.css

@@ -1,80 +0,0 @@
-/* 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/esm/components/ChatBubble/ChatBubble.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './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.
- */
-export const ChatBubble = ({ variant, children, timestamp, actions, className = '', }) => {
-    const classes = [
-        'muka-chat-bubble',
-        `muka-chat-bubble--${variant}`,
-        className,
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (_jsxs("div", { className: classes, "data-variant": variant, children: [_jsx("div", { className: "muka-chat-bubble__message", children: children }), (timestamp || actions) && (_jsxs("div", { className: "muka-chat-bubble__meta", children: [timestamp && (_jsx("span", { className: "muka-chat-bubble__timestamp", children: timestamp })), actions && (_jsx("div", { className: "muka-chat-bubble__actions", children: actions }))] }))] }));
-};
-export default ChatBubble;
-//# sourceMappingURL=ChatBubble.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ChatBubble.js","sourceRoot":"","sources":["../../../../components/ChatBubble/ChatBubble.tsx"],"names":[],"mappings":";AACA,OAAO,kBAAkB,CAAC;AA0B1B;;;;;GAKG;AACH,MAAM,CAAC,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,eAAK,SAAS,EAAE,OAAO,kBAAgB,OAAO,aAC5C,cAAK,SAAS,EAAC,2BAA2B,YAAE,QAAQ,GAAO,EAC1D,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CACzB,eAAK,SAAS,EAAC,wBAAwB,aACpC,SAAS,IAAI,CACZ,eAAM,SAAS,EAAC,6BAA6B,YAAE,SAAS,GAAQ,CACjE,EACA,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,2BAA2B,YAAE,OAAO,GAAO,CAC3D,IACG,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -1,2 +0,0 @@
-export { ChatBubble } from './ChatBubble';
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ChatBubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC"}

package/dist/styles/components/ChatBubble.css

@@ -1,80 +0,0 @@
-/* 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/types/components/ChatBubble/ChatBubble.d.ts

@@ -1,30 +0,0 @@
-import React from 'react';
-import './ChatBubble.css';
-export interface ChatBubbleProps {
-    /**
-     * Message author.
-     * - `user` — right-aligned, level2 surface bubble
-     * - `agent` — full-width, no bubble (text sits directly on the surface)
-     */
-    variant: 'user' | 'agent';
-    /** Message body. Plain text or rich content (e.g. a markdown renderer) */
-    children: React.ReactNode;
-    /** Optional timestamp shown in the meta row (e.g. "19:54") */
-    timestamp?: string;
-    /**
-     * Optional action buttons rendered in the meta row below the message
-     * (typically icon-only buttons: copy, regenerate, like/dislike, edit).
-     */
-    actions?: React.ReactNode;
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * 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.
- */
-export declare const ChatBubble: React.FC<ChatBubbleProps>;
-export default ChatBubble;
-//# sourceMappingURL=ChatBubble.d.ts.map

package/dist/types/components/ChatBubble/ChatBubble.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../../../components/ChatBubble/ChatBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAE1B,0EAA0E;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8BhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/types/components/ChatBubble/index.d.ts

@@ -1,2 +0,0 @@
-export { ChatBubble, type ChatBubbleProps } from './ChatBubble';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/components/ChatBubble/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/ChatBubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC"}