@mastra/playground-ui 66.0.0-alpha.6 → 66.0.0-alpha.7

package/dist/AttachmentCard-CciBqu7E.cjs

@@ -0,0 +1,66 @@
+const require_utils = require("./utils-uDc1ofX1.cjs");
+const require_Txt = require("./Txt-BnoSqxKE.cjs");
+const require_primitives_message_surface = require("./primitives/message-surface.cjs.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/ds/components/AttachmentCard/attachment-card.tsx
+/** Sent-file presentation. Upload state and removal controls belong to the composer. */
+function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }) {
+	const className = require_utils.cn(require_primitives_message_surface.messageSurfaceStyle, "relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left", (onClick || href) && "cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors");
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [preview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "block h-44 overflow-hidden border-b border-border bg-fill",
+		children: preview
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex min-w-0 items-center gap-2.5 px-3 py-2.5",
+		children: [!preview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground",
+			"aria-hidden": "true",
+			children: icon
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+				as: "span",
+				variant: "body-sm",
+				className: "block truncate",
+				title: name,
+				children: name
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+				as: "span",
+				variant: "meta",
+				tone: "muted",
+				className: "block truncate",
+				children: typeLabel
+			})]
+		})]
+	})] });
+	if (onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		ref: buttonRef,
+		type: "button",
+		className,
+		onClick,
+		"aria-label": `Preview ${name}`,
+		title: name,
+		children: content
+	});
+	if (href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		className,
+		href,
+		target: "_blank",
+		rel: "noreferrer noopener",
+		"aria-label": `Open ${name}`,
+		title: name,
+		children: content
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		title: name,
+		children: content
+	});
+}
+Object.defineProperty(exports, "AttachmentCard", {
+	enumerable: true,
+	get: function() {
+		return AttachmentCard;
+	}
+});
+
+//# sourceMappingURL=AttachmentCard-CciBqu7E.cjs.map

package/dist/AttachmentCard-CciBqu7E.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentCard-CciBqu7E.cjs","names":["cn","messageSurfaceStyle","_Fragment","Txt"],"sources":["../src/ds/components/AttachmentCard/attachment-card.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport { Txt } from '../Txt';\nimport { messageSurfaceStyle } from '@/ds/primitives/message-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface AttachmentCardProps {\n  name: string;\n  buttonRef?: Ref<HTMLButtonElement>;\n  typeLabel: string;\n  icon: ReactNode;\n  preview?: ReactNode;\n  onClick?: () => void;\n  href?: string;\n}\n\n/** Sent-file presentation. Upload state and removal controls belong to the composer. */\nexport function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }: AttachmentCardProps) {\n  const className = cn(\n    messageSurfaceStyle,\n    'relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left',\n    (onClick || href) &&\n      'cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors',\n  );\n  const content = (\n    <>\n      {preview && <span className=\"block h-44 overflow-hidden border-b border-border bg-fill\">{preview}</span>}\n      <span className=\"flex min-w-0 items-center gap-2.5 px-3 py-2.5\">\n        {!preview && (\n          <span className=\"flex size-5 shrink-0 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <Txt as=\"span\" variant=\"body-sm\" className=\"block truncate\" title={name}>\n            {name}\n          </Txt>\n          <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"block truncate\">\n            {typeLabel}\n          </Txt>\n        </span>\n      </span>\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        className={className}\n        onClick={onClick}\n        aria-label={`Preview ${name}`}\n        title={name}\n      >\n        {content}\n      </button>\n    );\n  }\n  if (href) {\n    return (\n      <a\n        className={className}\n        href={href}\n        target=\"_blank\"\n        rel=\"noreferrer noopener\"\n        aria-label={`Open ${name}`}\n        title={name}\n      >\n        {content}\n      </a>\n    );\n  }\n  return (\n    <div className={className} title={name}>\n      {content}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,eAAe,EAAE,MAAM,WAAW,MAAM,SAAS,SAAS,MAAM,aAAkC;CAChH,MAAM,YAAYA,cAAAA,GAChBC,mCAAAA,qBACA,6EACC,WAAW,SACV,4JACJ;CACA,MAAM,UACJ,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACG,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAU;EAA6D,UAAA;CAAc,CAAA,GACvG,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,CAAC,WACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAyE,eAAY;GAClG,UAAA;EACG,CAAA,GAER,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAU,WAAU;IAAiB,OAAO;IAChE,UAAA;GACE,CAAA,GACL,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAO,MAAK;IAAQ,WAAU;IAClD,UAAA;GACE,CAAA,CACD;EACF,CAAA,CAAA;CACN,CAAA,CAAA,EAAA,CAAA;CAGJ,IAAI,SACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,KAAK;EACL,MAAK;EACM;EACF;EACT,cAAY,WAAW;EACvB,OAAO;EAEN,UAAA;CACK,CAAA;CAGZ,IAAI,MACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACa;EACL;EACN,QAAO;EACP,KAAI;EACJ,cAAY,QAAQ;EACpB,OAAO;EAEN,UAAA;CACA,CAAA;CAGP,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAgB;EAAW,OAAO;EAC/B,UAAA;CACE,CAAA;AAET"}

package/dist/AttachmentCard-DbGp7TYl.js

@@ -0,0 +1,61 @@
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { t as Txt } from "./Txt-BM6TVV_c.js";
+import { messageSurfaceStyle } from "./primitives/message-surface.es.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/ds/components/AttachmentCard/attachment-card.tsx
+/** Sent-file presentation. Upload state and removal controls belong to the composer. */
+function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }) {
+	const className = cn(messageSurfaceStyle, "relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left", (onClick || href) && "cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors");
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [preview && /* @__PURE__ */ jsx("span", {
+		className: "block h-44 overflow-hidden border-b border-border bg-fill",
+		children: preview
+	}), /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 items-center gap-2.5 px-3 py-2.5",
+		children: [!preview && /* @__PURE__ */ jsx("span", {
+			className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground",
+			"aria-hidden": "true",
+			children: icon
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx(Txt, {
+				as: "span",
+				variant: "body-sm",
+				className: "block truncate",
+				title: name,
+				children: name
+			}), /* @__PURE__ */ jsx(Txt, {
+				as: "span",
+				variant: "meta",
+				tone: "muted",
+				className: "block truncate",
+				children: typeLabel
+			})]
+		})]
+	})] });
+	if (onClick) return /* @__PURE__ */ jsx("button", {
+		ref: buttonRef,
+		type: "button",
+		className,
+		onClick,
+		"aria-label": `Preview ${name}`,
+		title: name,
+		children: content
+	});
+	if (href) return /* @__PURE__ */ jsx("a", {
+		className,
+		href,
+		target: "_blank",
+		rel: "noreferrer noopener",
+		"aria-label": `Open ${name}`,
+		title: name,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		title: name,
+		children: content
+	});
+}
+export { AttachmentCard as t };
+
+//# sourceMappingURL=AttachmentCard-DbGp7TYl.js.map

package/dist/AttachmentCard-DbGp7TYl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentCard-DbGp7TYl.js","names":["_Fragment"],"sources":["../src/ds/components/AttachmentCard/attachment-card.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport { Txt } from '../Txt';\nimport { messageSurfaceStyle } from '@/ds/primitives/message-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface AttachmentCardProps {\n  name: string;\n  buttonRef?: Ref<HTMLButtonElement>;\n  typeLabel: string;\n  icon: ReactNode;\n  preview?: ReactNode;\n  onClick?: () => void;\n  href?: string;\n}\n\n/** Sent-file presentation. Upload state and removal controls belong to the composer. */\nexport function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }: AttachmentCardProps) {\n  const className = cn(\n    messageSurfaceStyle,\n    'relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left',\n    (onClick || href) &&\n      'cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors',\n  );\n  const content = (\n    <>\n      {preview && <span className=\"block h-44 overflow-hidden border-b border-border bg-fill\">{preview}</span>}\n      <span className=\"flex min-w-0 items-center gap-2.5 px-3 py-2.5\">\n        {!preview && (\n          <span className=\"flex size-5 shrink-0 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <Txt as=\"span\" variant=\"body-sm\" className=\"block truncate\" title={name}>\n            {name}\n          </Txt>\n          <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"block truncate\">\n            {typeLabel}\n          </Txt>\n        </span>\n      </span>\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        className={className}\n        onClick={onClick}\n        aria-label={`Preview ${name}`}\n        title={name}\n      >\n        {content}\n      </button>\n    );\n  }\n  if (href) {\n    return (\n      <a\n        className={className}\n        href={href}\n        target=\"_blank\"\n        rel=\"noreferrer noopener\"\n        aria-label={`Open ${name}`}\n        title={name}\n      >\n        {content}\n      </a>\n    );\n  }\n  return (\n    <div className={className} title={name}>\n      {content}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,eAAe,EAAE,MAAM,WAAW,MAAM,SAAS,SAAS,MAAM,aAAkC;CAChH,MAAM,YAAY,GAChB,qBACA,6EACC,WAAW,SACV,4JACJ;CACA,MAAM,UACJ,qBAAAA,UAAA,EAAA,UAAA,CACG,WAAW,oBAAC,QAAD;EAAM,WAAU;EAA6D,UAAA;CAAc,CAAA,GACvG,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,CAAC,WACA,oBAAC,QAAD;GAAM,WAAU;GAAyE,eAAY;GAClG,UAAA;EACG,CAAA,GAER,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAU,WAAU;IAAiB,OAAO;IAChE,UAAA;GACE,CAAA,GACL,oBAAC,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAO,MAAK;IAAQ,WAAU;IAClD,UAAA;GACE,CAAA,CACD;EACF,CAAA,CAAA;CACN,CAAA,CAAA,EAAA,CAAA;CAGJ,IAAI,SACF,OACE,oBAAC,UAAD;EACE,KAAK;EACL,MAAK;EACM;EACF;EACT,cAAY,WAAW;EACvB,OAAO;EAEN,UAAA;CACK,CAAA;CAGZ,IAAI,MACF,OACE,oBAAC,KAAD;EACa;EACL;EACN,QAAO;EACP,KAAI;EACJ,cAAY,QAAQ;EACpB,OAAO;EAEN,UAAA;CACA,CAAA;CAGP,OACE,oBAAC,OAAD;EAAgB;EAAW,OAAO;EAC/B,UAAA;CACE,CAAA;AAET"}

package/dist/components/AttachmentCard.cjs.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_AttachmentCard = require("../AttachmentCard-B1fhYov_.cjs");
+const require_AttachmentCard = require("../AttachmentCard-CciBqu7E.cjs");
 exports.AttachmentCard = require_AttachmentCard.AttachmentCard;

package/dist/components/AttachmentCard.es.js

@@ -1 +1 @@
-export { t as AttachmentCard } from "../AttachmentCard-lKP83CZ-.js";
+export { t as AttachmentCard } from "../AttachmentCard-DbGp7TYl.js";

package/dist/domains/chat/attachments/message-attachment.cjs.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_schemes = require("../../../schemes-CW9-2h2z.cjs");
 const require_domains_chat_attachments_attachment_preview_dialog = require("./attachment-preview-dialog.cjs.js");
 const require_domains_chat_attachments_message_attachment_info = require("./message-attachment-info.cjs.js");
-const require_AttachmentCard = require("../../../AttachmentCard-B1fhYov_.cjs");
+const require_AttachmentCard = require("../../../AttachmentCard-CciBqu7E.cjs");
 const require_domains_chat_attachments_message_image_attachment = require("./message-image-attachment.cjs.js");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/domains/chat/attachments/message-attachment.es.js

@@ -1,7 +1,7 @@
 import { i as isBrowserFetchableUrl } from "../../../schemes-DXZtPeV_.js";
 import { PdfPreviewDialog, TxtPreviewDialog } from "./attachment-preview-dialog.es.js";
 import { attachmentInfo, attachmentName, textAttachment } from "./message-attachment-info.es.js";
-import { t as AttachmentCard } from "../../../AttachmentCard-lKP83CZ-.js";
+import { t as AttachmentCard } from "../../../AttachmentCard-DbGp7TYl.js";
 import { MessageImageAttachment } from "./message-image-attachment.es.js";
 import { useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/domains/chat/attachments/message-image-attachment.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_domains_chat_attachments_attachment_preview_dialog = require("./attachment-preview-dialog.cjs.js");
-const require_AttachmentCard = require("../../../AttachmentCard-B1fhYov_.cjs");
+const require_AttachmentCard = require("../../../AttachmentCard-CciBqu7E.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");

package/dist/domains/chat/attachments/message-image-attachment.es.js

@@ -1,5 +1,5 @@
 import { ImagePreviewDialog } from "./attachment-preview-dialog.es.js";
-import { t as AttachmentCard } from "../../../AttachmentCard-lKP83CZ-.js";
+import { t as AttachmentCard } from "../../../AttachmentCard-DbGp7TYl.js";
 import { useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { FileImage } from "lucide-react";

package/dist/style.css

@@ -180,7 +180,6 @@
     --blur-xs: 4px;
     --blur-sm: 8px;
     --blur-md: 12px;
-    --blur-lg: 16px;
     --blur-xl: 24px;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
@@ -2276,10 +2275,6 @@
     height: calc(var(--spacing) * 25);
   }
 
-  .h-28 {
-    height: calc(var(--spacing) * 28);
-  }
-
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
@@ -5865,18 +5860,6 @@
     mask-composite: intersect;
   }
 
-  .mask-b-from-45\% {
-    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-    --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-    --tw-mask-bottom-from-position: 45%;
-    -webkit-mask-composite: source-in;
-    -webkit-mask-composite: source-in;
-    mask-composite: intersect;
-  }
-
   .mask-b-from-50\% {
     -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
     -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
@@ -5925,18 +5908,6 @@
     mask-composite: intersect;
   }
 
-  .mask-b-to-95\% {
-    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-    --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-    --tw-mask-bottom-to-position: 95%;
-    -webkit-mask-composite: source-in;
-    -webkit-mask-composite: source-in;
-    mask-composite: intersect;
-  }
-
   .mask-b-to-100 {
     -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
     -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
@@ -5990,31 +5961,6 @@
     mask-image: linear-gradient(#000, #000), linear-gradient(#000 40%, #0000), linear-gradient(to top, #000 40%, #0000);
   }
 
-  .\[mask-image\:linear-gradient\(to_bottom\,transparent\,black_15\%\,black_30\%\,transparent_45\%\)\] {
-    -webkit-mask-image: linear-gradient(#0000, #000 15% 30%, #0000 45%);
-    mask-image: linear-gradient(#0000, #000 15% 30%, #0000 45%);
-  }
-
-  .\[mask-image\:linear-gradient\(to_bottom\,transparent_15\%\,black_30\%\,black_45\%\,transparent_60\%\)\] {
-    -webkit-mask-image: linear-gradient(#0000 15%, #000 30% 45%, #0000 60%);
-    mask-image: linear-gradient(#0000 15%, #000 30% 45%, #0000 60%);
-  }
-
-  .\[mask-image\:linear-gradient\(to_bottom\,transparent_30\%\,black_45\%\,black_60\%\,transparent_75\%\)\] {
-    -webkit-mask-image: linear-gradient(#0000 30%, #000 45% 60%, #0000 75%);
-    mask-image: linear-gradient(#0000 30%, #000 45% 60%, #0000 75%);
-  }
-
-  .\[mask-image\:linear-gradient\(to_bottom\,transparent_45\%\,black_60\%\,black_75\%\,transparent_90\%\)\] {
-    -webkit-mask-image: linear-gradient(#0000 45%, #000 60% 75%, #0000 90%);
-    mask-image: linear-gradient(#0000 45%, #000 60% 75%, #0000 90%);
-  }
-
-  .\[mask-image\:linear-gradient\(to_bottom\,transparent_60\%\,black_75\%\)\] {
-    -webkit-mask-image: linear-gradient(#0000 60%, #000 75%);
-    mask-image: linear-gradient(#0000 60%, #000 75%);
-  }
-
   .box-decoration-clone {
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
@@ -7563,24 +7509,6 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
-  .backdrop-blur-\[2px\] {
-    --tw-backdrop-blur: blur(2px);
-    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-  }
-
-  .backdrop-blur-\[32px\] {
-    --tw-backdrop-blur: blur(32px);
-    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-  }
-
-  .backdrop-blur-lg {
-    --tw-backdrop-blur: blur(var(--blur-lg));
-    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-  }
-
   .backdrop-blur-md {
     --tw-backdrop-blur: blur(var(--blur-md));
     -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -9355,11 +9283,6 @@
     z-index: calc(20 * -1);
   }
 
-  .after\:z-10:after {
-    content: var(--tw-content);
-    z-index: 10;
-  }
-
   .after\:h-1:after {
     content: var(--tw-content);
     height: var(--spacing);
@@ -9381,11 +9304,6 @@
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
 
-  .after\:rounded-\[inherit\]:after {
-    content: var(--tw-content);
-    border-radius: inherit;
-  }
-
   .after\:rounded-full:after {
     content: var(--tw-content);
     border-radius: 3.40282e38px;
@@ -9494,28 +9412,11 @@
     mask-image: linear-gradient(to right, #0000, #000 6px calc(100% - 6px), #0000);
   }
 
-  .after\:inset-ring-1:after {
-    content: var(--tw-content);
-    --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
   .after\:shadow-inset:after {
     content: var(--tw-content);
     box-shadow: inset 0 1px 0 var(--inset-highlight), inset 0 0 0 1px var(--inset-rim);
   }
 
-  .after\:inset-ring-white\/15:after {
-    content: var(--tw-content);
-    --tw-inset-ring-color: #ffffff26;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .after\:inset-ring-white\/15:after {
-      --tw-inset-ring-color: color-mix(in oklab, var(--color-white) 15%, transparent);
-    }
-  }
-
   .after\:transition-\[background-color\]:after {
     content: var(--tw-content);
     transition-property: background-color;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "66.0.0-alpha.6",
+  "version": "66.0.0-alpha.7",
   "description": "Mastra Playground components",
   "sideEffects": [
     "**/*.css"
@@ -220,8 +220,8 @@
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
     "@mastra/ai-sdk": "^1.11.2",
-    "@mastra/react": "1.13.0-alpha.6",
-    "@mastra/client-js": "^1.57.0-alpha.6"
+    "@mastra/react": "1.13.0-alpha.7",
+    "@mastra/client-js": "^1.57.0-alpha.7"
   },
   "devDependencies": {
     "@modelcontextprotocol/sdk": "^1.32.2",
@@ -262,12 +262,12 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.12",
     "@internal/lint": "0.0.145",
-    "@mastra/ai-sdk": "1.11.2",
+    "@mastra/client-js": "^1.57.0-alpha.7",
+    "@mastra/core": "1.80.0-alpha.7",
     "@mastra/memory": "1.39.1-alpha.3",
-    "@mastra/react": "1.13.0-alpha.6",
-    "@mastra/client-js": "^1.57.0-alpha.6",
-    "@mastra/core": "1.80.0-alpha.6",
-    "@mastra/schema-compat": "1.3.17-alpha.0"
+    "@mastra/ai-sdk": "1.11.2",
+    "@mastra/schema-compat": "1.3.17-alpha.0",
+    "@mastra/react": "1.13.0-alpha.7"
   },
   "homepage": "https://mastra.ai",
   "repository": {

package/dist/AttachmentCard-B1fhYov_.cjs

@@ -1,81 +0,0 @@
-const require_utils = require("./utils-uDc1ofX1.cjs");
-const require_Txt = require("./Txt-BnoSqxKE.cjs");
-const require_primitives_message_surface = require("./primitives/message-surface.cjs.js");
-let react_jsx_runtime = require("react/jsx-runtime");
-// src/ds/components/AttachmentCard/attachment-preview.tsx
-/** Crossfade between fully blurred bands, then fade the image into the message surface for its caption. */
-function AttachmentPreview({ children }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "relative block h-44 mask-b-from-45% mask-b-to-95%",
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			"aria-hidden": "true",
-			className: "pointer-events-none absolute inset-x-0 bottom-0 h-28",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]" })
-			]
-		})]
-	});
-}
-// src/ds/components/AttachmentCard/attachment-card.tsx
-/** Sent-file presentation. Upload state and removal controls belong to the composer. */
-function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }) {
-	const className = require_utils.cn(require_primitives_message_surface.messageSurfaceStyle, "relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left", preview && "after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15", (onClick || href) && "cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors");
-	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [preview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentPreview, { children: preview }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: require_utils.cn("flex min-w-0 items-center gap-2.5 px-3 py-2.5", preview && "absolute inset-x-0 bottom-0"),
-		children: [!preview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground",
-			"aria-hidden": "true",
-			children: icon
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-				as: "span",
-				variant: "body-sm",
-				className: "block truncate",
-				title: name,
-				children: name
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-				as: "span",
-				variant: "meta",
-				tone: "muted",
-				className: "block truncate",
-				children: typeLabel
-			})]
-		})]
-	})] });
-	if (onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		ref: buttonRef,
-		type: "button",
-		className,
-		onClick,
-		"aria-label": `Preview ${name}`,
-		title: name,
-		children: content
-	});
-	if (href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-		className,
-		href,
-		target: "_blank",
-		rel: "noreferrer noopener",
-		"aria-label": `Open ${name}`,
-		title: name,
-		children: content
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className,
-		title: name,
-		children: content
-	});
-}
-Object.defineProperty(exports, "AttachmentCard", {
-	enumerable: true,
-	get: function() {
-		return AttachmentCard;
-	}
-});
-
-//# sourceMappingURL=AttachmentCard-B1fhYov_.cjs.map

package/dist/AttachmentCard-B1fhYov_.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"AttachmentCard-B1fhYov_.cjs","names":["cn","messageSurfaceStyle","_Fragment","Txt"],"sources":["../src/ds/components/AttachmentCard/attachment-preview.tsx","../src/ds/components/AttachmentCard/attachment-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Crossfade between fully blurred bands, then fade the image into the message surface for its caption. */\nexport function AttachmentPreview({ children }: { children: ReactNode }) {\n  return (\n    <span className=\"relative block h-44 mask-b-from-45% mask-b-to-95%\">\n      {children}\n      {/* Fully opaque, overlapping bands replace sharp pixels as the blur radius increases.\n          Fading each layer across its entire height would leave sharp detail visible underneath. */}\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 bottom-0 h-28\">\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]\" />\n      </span>\n    </span>\n  );\n}\n","import type { ReactNode, Ref } from 'react';\nimport { Txt } from '../Txt';\nimport { AttachmentPreview } from './attachment-preview';\nimport { messageSurfaceStyle } from '@/ds/primitives/message-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface AttachmentCardProps {\n  name: string;\n  buttonRef?: Ref<HTMLButtonElement>;\n  typeLabel: string;\n  icon: ReactNode;\n  preview?: ReactNode;\n  onClick?: () => void;\n  href?: string;\n}\n\n/** Sent-file presentation. Upload state and removal controls belong to the composer. */\nexport function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }: AttachmentCardProps) {\n  const className = cn(\n    messageSurfaceStyle,\n    'relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left',\n    preview &&\n      'after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15',\n    (onClick || href) &&\n      'cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors',\n  );\n  const content = (\n    <>\n      {preview && <AttachmentPreview>{preview}</AttachmentPreview>}\n      <span className={cn('flex min-w-0 items-center gap-2.5 px-3 py-2.5', preview && 'absolute inset-x-0 bottom-0')}>\n        {!preview && (\n          <span className=\"flex size-5 shrink-0 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <Txt as=\"span\" variant=\"body-sm\" className=\"block truncate\" title={name}>\n            {name}\n          </Txt>\n          <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"block truncate\">\n            {typeLabel}\n          </Txt>\n        </span>\n      </span>\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        className={className}\n        onClick={onClick}\n        aria-label={`Preview ${name}`}\n        title={name}\n      >\n        {content}\n      </button>\n    );\n  }\n  if (href) {\n    return (\n      <a\n        className={className}\n        href={href}\n        target=\"_blank\"\n        rel=\"noreferrer noopener\"\n        aria-label={`Open ${name}`}\n        title={name}\n      >\n        {content}\n      </a>\n    );\n  }\n  return (\n    <div className={className} title={name}>\n      {content}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAGA,SAAgB,kBAAkB,EAAE,YAAqC;CACvE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,UAGD,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAAnC,UAAA;IACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,+HAAgI,CAAA;IAChJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,gIAAiI,CAAA;IACjJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,gIAAiI,CAAA;IACjJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,gIAAiI,CAAA;IACjJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,0GAA2G,CAAA;GACvH;EACF,CAAA,CAAA;;AAEV;;;ACDA,SAAgB,eAAe,EAAE,MAAM,WAAW,MAAM,SAAS,SAAS,MAAM,aAAkC;CAChH,MAAM,YAAYA,cAAAA,GAChBC,mCAAAA,qBACA,4EACA,WACE,2IACD,WAAW,SACV,4JACJ;CACA,MAAM,UACJ,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACG,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD,EAAA,UAAoB,QAA2B,CAAA,GAC3D,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EAAM,WAAWF,cAAAA,GAAG,iDAAiD,WAAW,6BAA6B;EAA7G,UAAA,CACG,CAAC,WACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAyE,eAAY;GAClG,UAAA;EACG,CAAA,GAER,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACG,YAAAA,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAU,WAAU;IAAiB,OAAO;IAChE,UAAA;GACE,CAAA,GACL,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAO,MAAK;IAAQ,WAAU;IAClD,UAAA;GACE,CAAA,CACD;EACF,CAAA,CAAA;CACN,CAAA,CAAA,EAAA,CAAA;CAGJ,IAAI,SACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,KAAK;EACL,MAAK;EACM;EACF;EACT,cAAY,WAAW;EACvB,OAAO;EAEN,UAAA;CACK,CAAA;CAGZ,IAAI,MACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACa;EACL;EACN,QAAO;EACP,KAAI;EACJ,cAAY,QAAQ;EACpB,OAAO;EAEN,UAAA;CACA,CAAA;CAGP,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAgB;EAAW,OAAO;EAC/B,UAAA;CACE,CAAA;AAET"}

package/dist/AttachmentCard-lKP83CZ-.js

@@ -1,76 +0,0 @@
-import { t as cn } from "./utils-DQx8TpNT.js";
-import { t as Txt } from "./Txt-BM6TVV_c.js";
-import { messageSurfaceStyle } from "./primitives/message-surface.es.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-// src/ds/components/AttachmentCard/attachment-preview.tsx
-/** Crossfade between fully blurred bands, then fade the image into the message surface for its caption. */
-function AttachmentPreview({ children }) {
-	return /* @__PURE__ */ jsxs("span", {
-		className: "relative block h-44 mask-b-from-45% mask-b-to-95%",
-		children: [children, /* @__PURE__ */ jsxs("span", {
-			"aria-hidden": "true",
-			className: "pointer-events-none absolute inset-x-0 bottom-0 h-28",
-			children: [
-				/* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]" }),
-				/* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs" }),
-				/* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm" }),
-				/* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg" }),
-				/* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]" })
-			]
-		})]
-	});
-}
-// src/ds/components/AttachmentCard/attachment-card.tsx
-/** Sent-file presentation. Upload state and removal controls belong to the composer. */
-function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }) {
-	const className = cn(messageSurfaceStyle, "relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left", preview && "after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15", (onClick || href) && "cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors");
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [preview && /* @__PURE__ */ jsx(AttachmentPreview, { children: preview }), /* @__PURE__ */ jsxs("span", {
-		className: cn("flex min-w-0 items-center gap-2.5 px-3 py-2.5", preview && "absolute inset-x-0 bottom-0"),
-		children: [!preview && /* @__PURE__ */ jsx("span", {
-			className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground",
-			"aria-hidden": "true",
-			children: icon
-		}), /* @__PURE__ */ jsxs("span", {
-			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ jsx(Txt, {
-				as: "span",
-				variant: "body-sm",
-				className: "block truncate",
-				title: name,
-				children: name
-			}), /* @__PURE__ */ jsx(Txt, {
-				as: "span",
-				variant: "meta",
-				tone: "muted",
-				className: "block truncate",
-				children: typeLabel
-			})]
-		})]
-	})] });
-	if (onClick) return /* @__PURE__ */ jsx("button", {
-		ref: buttonRef,
-		type: "button",
-		className,
-		onClick,
-		"aria-label": `Preview ${name}`,
-		title: name,
-		children: content
-	});
-	if (href) return /* @__PURE__ */ jsx("a", {
-		className,
-		href,
-		target: "_blank",
-		rel: "noreferrer noopener",
-		"aria-label": `Open ${name}`,
-		title: name,
-		children: content
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className,
-		title: name,
-		children: content
-	});
-}
-export { AttachmentCard as t };
-
-//# sourceMappingURL=AttachmentCard-lKP83CZ-.js.map

package/dist/AttachmentCard-lKP83CZ-.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AttachmentCard-lKP83CZ-.js","names":["_Fragment"],"sources":["../src/ds/components/AttachmentCard/attachment-preview.tsx","../src/ds/components/AttachmentCard/attachment-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Crossfade between fully blurred bands, then fade the image into the message surface for its caption. */\nexport function AttachmentPreview({ children }: { children: ReactNode }) {\n  return (\n    <span className=\"relative block h-44 mask-b-from-45% mask-b-to-95%\">\n      {children}\n      {/* Fully opaque, overlapping bands replace sharp pixels as the blur radius increases.\n          Fading each layer across its entire height would leave sharp detail visible underneath. */}\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 bottom-0 h-28\">\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]\" />\n      </span>\n    </span>\n  );\n}\n","import type { ReactNode, Ref } from 'react';\nimport { Txt } from '../Txt';\nimport { AttachmentPreview } from './attachment-preview';\nimport { messageSurfaceStyle } from '@/ds/primitives/message-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface AttachmentCardProps {\n  name: string;\n  buttonRef?: Ref<HTMLButtonElement>;\n  typeLabel: string;\n  icon: ReactNode;\n  preview?: ReactNode;\n  onClick?: () => void;\n  href?: string;\n}\n\n/** Sent-file presentation. Upload state and removal controls belong to the composer. */\nexport function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }: AttachmentCardProps) {\n  const className = cn(\n    messageSurfaceStyle,\n    'relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left',\n    preview &&\n      'after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15',\n    (onClick || href) &&\n      'cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors',\n  );\n  const content = (\n    <>\n      {preview && <AttachmentPreview>{preview}</AttachmentPreview>}\n      <span className={cn('flex min-w-0 items-center gap-2.5 px-3 py-2.5', preview && 'absolute inset-x-0 bottom-0')}>\n        {!preview && (\n          <span className=\"flex size-5 shrink-0 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <Txt as=\"span\" variant=\"body-sm\" className=\"block truncate\" title={name}>\n            {name}\n          </Txt>\n          <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"block truncate\">\n            {typeLabel}\n          </Txt>\n        </span>\n      </span>\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        className={className}\n        onClick={onClick}\n        aria-label={`Preview ${name}`}\n        title={name}\n      >\n        {content}\n      </button>\n    );\n  }\n  if (href) {\n    return (\n      <a\n        className={className}\n        href={href}\n        target=\"_blank\"\n        rel=\"noreferrer noopener\"\n        aria-label={`Open ${name}`}\n        title={name}\n      >\n        {content}\n      </a>\n    );\n  }\n  return (\n    <div className={className} title={name}>\n      {content}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAGA,SAAgB,kBAAkB,EAAE,YAAqC;CACvE,OACE,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,UAGD,qBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAAnC,UAAA;IACE,oBAAC,QAAD,EAAM,WAAU,+HAAgI,CAAA;IAChJ,oBAAC,QAAD,EAAM,WAAU,gIAAiI,CAAA;IACjJ,oBAAC,QAAD,EAAM,WAAU,gIAAiI,CAAA;IACjJ,oBAAC,QAAD,EAAM,WAAU,gIAAiI,CAAA;IACjJ,oBAAC,QAAD,EAAM,WAAU,0GAA2G,CAAA;GACvH;EACF,CAAA,CAAA;;AAEV;;;ACDA,SAAgB,eAAe,EAAE,MAAM,WAAW,MAAM,SAAS,SAAS,MAAM,aAAkC;CAChH,MAAM,YAAY,GAChB,qBACA,4EACA,WACE,2IACD,WAAW,SACV,4JACJ;CACA,MAAM,UACJ,qBAAAA,UAAA,EAAA,UAAA,CACG,WAAW,oBAAC,mBAAD,EAAA,UAAoB,QAA2B,CAAA,GAC3D,qBAAC,QAAD;EAAM,WAAW,GAAG,iDAAiD,WAAW,6BAA6B;EAA7G,UAAA,CACG,CAAC,WACA,oBAAC,QAAD;GAAM,WAAU;GAAyE,eAAY;GAClG,UAAA;EACG,CAAA,GAER,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAU,WAAU;IAAiB,OAAO;IAChE,UAAA;GACE,CAAA,GACL,oBAAC,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAO,MAAK;IAAQ,WAAU;IAClD,UAAA;GACE,CAAA,CACD;EACF,CAAA,CAAA;CACN,CAAA,CAAA,EAAA,CAAA;CAGJ,IAAI,SACF,OACE,oBAAC,UAAD;EACE,KAAK;EACL,MAAK;EACM;EACF;EACT,cAAY,WAAW;EACvB,OAAO;EAEN,UAAA;CACK,CAAA;CAGZ,IAAI,MACF,OACE,oBAAC,KAAD;EACa;EACL;EACN,QAAO;EACP,KAAI;EACJ,cAAY,QAAQ;EACpB,OAAO;EAEN,UAAA;CACA,CAAA;CAGP,OACE,oBAAC,OAAD;EAAgB;EAAW,OAAO;EAC/B,UAAA;CACE,CAAA;AAET"}

package/dist/src/ds/components/AttachmentCard/attachment-preview.d.ts

@@ -1,5 +0,0 @@
-import type { ReactNode } from 'react';
-/** Crossfade between fully blurred bands, then fade the image into the message surface for its caption. */
-export declare function AttachmentPreview({ children }: {
-    children: ReactNode;
-}): import("react").JSX.Element;