@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

package/dist/markdown-renderer.css

@@ -10,8 +10,8 @@
 
 @layer components {
   .mastra-markdown {
-    color: var(--neutral5);
-    font-size: var(--text-ui-md);
+    color: var(--foreground);
+    font-size: var(--text-body);
     line-height: 1.7;
     overflow-wrap: break-word;
   }
@@ -32,22 +32,22 @@
 
   .mastra-markdown :is(h1, h2, h3, h4, h5, h6) {
     margin: 1.6em 0 0.6em;
-    color: var(--neutral6);
-    font-weight: 600;
+    color: var(--foreground);
+    font-weight: 500;
     letter-spacing: -0.012em;
     line-height: 1.35;
   }
 
   .mastra-markdown h1 {
-    font-size: var(--text-header-sm);
+    font-size: var(--text-title);
   }
 
   .mastra-markdown h2 {
-    font-size: var(--text-ui-lg);
+    font-size: var(--text-heading);
   }
 
   .mastra-markdown h3 {
-    font-size: var(--text-ui-md);
+    font-size: var(--text-subheading);
   }
 
   .mastra-markdown :is(h4, h5, h6) {
@@ -55,8 +55,8 @@
   }
 
   .mastra-markdown strong {
-    color: var(--neutral6);
-    font-weight: 600;
+    color: var(--foreground);
+    font-weight: 500;
   }
 
   .mastra-markdown em {
@@ -64,7 +64,7 @@
   }
 
   .mastra-markdown del {
-    color: var(--neutral3);
+    color: var(--muted-foreground);
     text-decoration: line-through;
   }
 
@@ -111,7 +111,7 @@
   }
 
   .mastra-markdown li::marker {
-    color: var(--neutral3);
+    color: var(--muted-foreground);
   }
 
   .mastra-markdown li > p {
@@ -130,24 +130,24 @@
 
   .mastra-markdown blockquote {
     margin: 0.9em 0;
-    border-left: 2px solid var(--border2);
+    border-left: 2px solid var(--border-strong);
     padding-left: 0.9em;
-    color: var(--neutral4);
+    color: var(--muted-foreground);
   }
 
   .mastra-markdown hr {
     margin: 1.5em 0;
     border: 0;
-    border-top: 1px solid var(--border1);
+    border-top: 1px solid var(--border);
   }
 
   /* Fenced blocks render through the design-system CodeBlock, so this only ever
    * matches inline spans. */
   .mastra-markdown :not(pre) > code {
     border-radius: 4px;
-    background: var(--surface-overlay-strong);
+    background: var(--fill);
     padding: 0.1em 0.35em;
-    color: var(--neutral6);
+    color: var(--foreground);
     font-family: var(--font-mono);
     font-size: 0.875em;
   }
@@ -163,15 +163,15 @@
   }
 
   .mastra-markdown :is(th, td) {
-    border: 1px solid var(--border1);
+    border: 1px solid var(--border);
     padding: 0.4em 0.7em;
     text-align: left;
   }
 
   .mastra-markdown th {
-    background: var(--surface-overlay-soft);
-    color: var(--neutral6);
-    font-weight: 600;
+    background: var(--fill-subtle);
+    color: var(--foreground);
+    font-weight: 500;
   }
 
   .mastra-markdown img {

package/dist/message-BrwbcLPi.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { c as cn } from './cn-65Adrsfj.js';
+
+function Message({ from, avatar, footer, pending, children, className, ...props }) {
+  const isUser = from === "user";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "message",
+      "data-from": from,
+      "data-message-pending": pending || void 0,
+      className: cn(
+        "group/message max-w-full min-w-0",
+        isUser && "my-3 ml-auto flex w-fit max-w-[70%] items-start gap-2",
+        !isUser && footer && "mb-3",
+        className
+      ),
+      children: [
+        avatar,
+        /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", isUser && "flex flex-col items-end"), children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "message-content",
+              className: cn(
+                "max-w-full min-w-0 text-body break-words",
+                isUser && "rounded-xl border border-transparent bg-fill-subtle px-4 py-2 text-foreground",
+                isUser && pending && "border-dashed border-border",
+                !isUser && footer && "[&>:last-child]:mb-0"
+              ),
+              children
+            }
+          ),
+          footer && /* @__PURE__ */ jsx("div", { className: "mt-1 max-w-full", children: footer })
+        ] })
+      ]
+    }
+  );
+}
+function MessageActions({ visibility = "hover", children, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      "data-slot": "message-actions",
+      className: cn(
+        "flex flex-wrap items-center gap-1 group-data-[from=user]/message:flex-row-reverse",
+        "motion-safe:transition-opacity [&_button]:pointer-coarse:min-h-11 [&_button]:pointer-coarse:min-w-11",
+        visibility === "hover" && "group-focus-within/message:opacity-100 group-hover/message:opacity-100 pointer-fine:opacity-0",
+        className
+      ),
+      children
+    }
+  );
+}
+function MessageMetadata({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { ...props, className: cn("text-muted-foreground inline-flex items-center gap-1 text-meta", className) });
+}
+
+export { Message as M, MessageMetadata as a, MessageActions as b };
+//# sourceMappingURL=message-BrwbcLPi.js.map

package/dist/message-BrwbcLPi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-BrwbcLPi.js","sources":["../src/ds/components/Message/message.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface MessageProps extends ComponentProps<'div'> {\n  from: 'user' | 'assistant';\n  avatar?: ReactNode;\n  footer?: ReactNode;\n  pending?: boolean;\n}\n\nexport function Message({ from, avatar, footer, pending, children, className, ...props }: MessageProps) {\n  const isUser = from === 'user';\n\n  return (\n    <div\n      {...props}\n      data-slot=\"message\"\n      data-from={from}\n      data-message-pending={pending || undefined}\n      className={cn(\n        'group/message max-w-full min-w-0',\n        isUser && 'my-3 ml-auto flex w-fit max-w-[70%] items-start gap-2',\n        !isUser && footer && 'mb-3',\n        className,\n      )}\n    >\n      {avatar}\n      <div className={cn('min-w-0', isUser && 'flex flex-col items-end')}>\n        <div\n          data-slot=\"message-content\"\n          className={cn(\n            'max-w-full min-w-0 text-body break-words',\n            isUser && 'rounded-xl border border-transparent bg-fill-subtle px-4 py-2 text-foreground',\n            isUser && pending && 'border-dashed border-border',\n            !isUser && footer && '[&>:last-child]:mb-0',\n          )}\n        >\n          {children}\n        </div>\n        {footer && <div className=\"mt-1 max-w-full\">{footer}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport interface MessageActionsProps extends ComponentProps<'div'> {\n  visibility?: 'hover' | 'always';\n}\n\nexport function MessageActions({ visibility = 'hover', children, className, ...props }: MessageActionsProps) {\n  return (\n    <div\n      {...props}\n      data-slot=\"message-actions\"\n      className={cn(\n        'flex flex-wrap items-center gap-1 group-data-[from=user]/message:flex-row-reverse',\n        'motion-safe:transition-opacity [&_button]:pointer-coarse:min-h-11 [&_button]:pointer-coarse:min-w-11',\n        visibility === 'hover' &&\n          'group-focus-within/message:opacity-100 group-hover/message:opacity-100 pointer-fine:opacity-0',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function MessageMetadata({ className, ...props }: ComponentProps<'span'>) {\n  return (\n    <span {...props} className={cn('text-muted-foreground inline-flex items-center gap-1 text-meta', className)} />\n  );\n}\n"],"names":[],"mappings":";;;AAUO,SAAS,OAAA,CAAQ,EAAE,IAAA,EAAM,MAAA,EAAQ,MAAA,EAAQ,SAAS,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAAiB;AACtG,EAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AAExB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,SAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,wBAAsB,OAAA,IAAW,MAAA;AAAA,MACjC,SAAA,EAAW,EAAA;AAAA,QACT,kCAAA;AAAA,QACA,MAAA,IAAU,uDAAA;AAAA,QACV,CAAC,UAAU,MAAA,IAAU,MAAA;AAAA,QACrB;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,MAAA;AAAA,6BACA,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,SAAA,EAAW,MAAA,IAAU,yBAAyB,CAAA,EAC/D,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,iBAAA;AAAA,cACV,SAAA,EAAW,EAAA;AAAA,gBACT,0CAAA;AAAA,gBACA,MAAA,IAAU,+EAAA;AAAA,gBACV,UAAU,OAAA,IAAW,6BAAA;AAAA,gBACrB,CAAC,UAAU,MAAA,IAAU;AAAA,eACvB;AAAA,cAEC;AAAA;AAAA,WACH;AAAA,UACC,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAmB,QAAA,EAAA,MAAA,EAAO;AAAA,SAAA,EACtD;AAAA;AAAA;AAAA,GACF;AAEJ;AAMO,SAAS,cAAA,CAAe,EAAE,UAAA,GAAa,OAAA,EAAS,UAAU,SAAA,EAAW,GAAG,OAAM,EAAwB;AAC3G,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,mFAAA;AAAA,QACA,sGAAA;AAAA,QACA,eAAe,OAAA,IACb,+FAAA;AAAA,QACF;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA2B;AAC/E,EAAA,uBACE,GAAA,CAAC,UAAM,GAAG,KAAA,EAAO,WAAW,EAAA,CAAG,gEAAA,EAAkE,SAAS,CAAA,EAAG,CAAA;AAEjH;;;;"}

package/dist/message-CszposMZ.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+function Message({ from, avatar, footer, pending, children, className, ...props }) {
+  const isUser = from === "user";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "message",
+      "data-from": from,
+      "data-message-pending": pending || void 0,
+      className: utils_cn.cn(
+        "group/message max-w-full min-w-0",
+        isUser && "my-3 ml-auto flex w-fit max-w-[70%] items-start gap-2",
+        !isUser && footer && "mb-3",
+        className
+      ),
+      children: [
+        avatar,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("min-w-0", isUser && "flex flex-col items-end"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "message-content",
+              className: utils_cn.cn(
+                "max-w-full min-w-0 text-body break-words",
+                isUser && "rounded-xl border border-transparent bg-fill-subtle px-4 py-2 text-foreground",
+                isUser && pending && "border-dashed border-border",
+                !isUser && footer && "[&>:last-child]:mb-0"
+              ),
+              children
+            }
+          ),
+          footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 max-w-full", children: footer })
+        ] })
+      ]
+    }
+  );
+}
+function MessageActions({ visibility = "hover", children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      "data-slot": "message-actions",
+      className: utils_cn.cn(
+        "flex flex-wrap items-center gap-1 group-data-[from=user]/message:flex-row-reverse",
+        "motion-safe:transition-opacity [&_button]:pointer-coarse:min-h-11 [&_button]:pointer-coarse:min-w-11",
+        visibility === "hover" && "group-focus-within/message:opacity-100 group-hover/message:opacity-100 pointer-fine:opacity-0",
+        className
+      ),
+      children
+    }
+  );
+}
+function MessageMetadata({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: utils_cn.cn("text-muted-foreground inline-flex items-center gap-1 text-meta", className) });
+}
+
+exports.Message = Message;
+exports.MessageActions = MessageActions;
+exports.MessageMetadata = MessageMetadata;
+//# sourceMappingURL=message-CszposMZ.cjs.map

package/dist/message-CszposMZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-CszposMZ.cjs","sources":["../src/ds/components/Message/message.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface MessageProps extends ComponentProps<'div'> {\n  from: 'user' | 'assistant';\n  avatar?: ReactNode;\n  footer?: ReactNode;\n  pending?: boolean;\n}\n\nexport function Message({ from, avatar, footer, pending, children, className, ...props }: MessageProps) {\n  const isUser = from === 'user';\n\n  return (\n    <div\n      {...props}\n      data-slot=\"message\"\n      data-from={from}\n      data-message-pending={pending || undefined}\n      className={cn(\n        'group/message max-w-full min-w-0',\n        isUser && 'my-3 ml-auto flex w-fit max-w-[70%] items-start gap-2',\n        !isUser && footer && 'mb-3',\n        className,\n      )}\n    >\n      {avatar}\n      <div className={cn('min-w-0', isUser && 'flex flex-col items-end')}>\n        <div\n          data-slot=\"message-content\"\n          className={cn(\n            'max-w-full min-w-0 text-body break-words',\n            isUser && 'rounded-xl border border-transparent bg-fill-subtle px-4 py-2 text-foreground',\n            isUser && pending && 'border-dashed border-border',\n            !isUser && footer && '[&>:last-child]:mb-0',\n          )}\n        >\n          {children}\n        </div>\n        {footer && <div className=\"mt-1 max-w-full\">{footer}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport interface MessageActionsProps extends ComponentProps<'div'> {\n  visibility?: 'hover' | 'always';\n}\n\nexport function MessageActions({ visibility = 'hover', children, className, ...props }: MessageActionsProps) {\n  return (\n    <div\n      {...props}\n      data-slot=\"message-actions\"\n      className={cn(\n        'flex flex-wrap items-center gap-1 group-data-[from=user]/message:flex-row-reverse',\n        'motion-safe:transition-opacity [&_button]:pointer-coarse:min-h-11 [&_button]:pointer-coarse:min-w-11',\n        visibility === 'hover' &&\n          'group-focus-within/message:opacity-100 group-hover/message:opacity-100 pointer-fine:opacity-0',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function MessageMetadata({ className, ...props }: ComponentProps<'span'>) {\n  return (\n    <span {...props} className={cn('text-muted-foreground inline-flex items-center gap-1 text-meta', className)} />\n  );\n}\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;;AAUO,SAAS,OAAA,CAAQ,EAAE,IAAA,EAAM,MAAA,EAAQ,MAAA,EAAQ,SAAS,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAAiB;AACtG,EAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AAExB,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,SAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,wBAAsB,OAAA,IAAW,MAAA;AAAA,MACjC,SAAA,EAAWC,WAAA;AAAA,QACT,kCAAA;AAAA,QACA,MAAA,IAAU,uDAAA;AAAA,QACV,CAAC,UAAU,MAAA,IAAU,MAAA;AAAA,QACrB;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,MAAA;AAAA,wCACA,KAAA,EAAA,EAAI,SAAA,EAAWA,YAAG,SAAA,EAAW,MAAA,IAAU,yBAAyB,CAAA,EAC/D,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,iBAAA;AAAA,cACV,SAAA,EAAWD,WAAA;AAAA,gBACT,0CAAA;AAAA,gBACA,MAAA,IAAU,+EAAA;AAAA,gBACV,UAAU,OAAA,IAAW,6BAAA;AAAA,gBACrB,CAAC,UAAU,MAAA,IAAU;AAAA,eACvB;AAAA,cAEC;AAAA;AAAA,WACH;AAAA,UACC,MAAA,oBAAUC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAmB,QAAA,EAAA,MAAA,EAAO;AAAA,SAAA,EACtD;AAAA;AAAA;AAAA,GACF;AAEJ;AAMO,SAAS,cAAA,CAAe,EAAE,UAAA,GAAa,OAAA,EAAS,UAAU,SAAA,EAAW,GAAG,OAAM,EAAwB;AAC3G,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAWD,WAAA;AAAA,QACT,mFAAA;AAAA,QACA,sGAAA;AAAA,QACA,eAAe,OAAA,IACb,+FAAA;AAAA,QACF;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA2B;AAC/E,EAAA,uBACEC,cAAA,CAAC,UAAM,GAAG,KAAA,EAAO,WAAWD,WAAA,CAAG,gEAAA,EAAkE,SAAS,CAAA,EAAG,CAAA;AAEjH;;;;;;"}