@mastra/playground-ui 48.0.0 → 48.1.0-alpha.1

package/dist/ee/signals/theme-filter-banner.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-filter-banner.cjs.js","sources":["../../../src/ee/signals/theme-filter-banner.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport { getSignalHue } from './signal-colors';\nimport { formatSignalName } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { Button } from '@/ds/components/Button';\nimport { nodeColor } from '@/ds/components/SankeyChart';\n\nexport function ThemeFilterBanner({\n  selection,\n  filteredTraceCount,\n  totalTraceCount,\n  onViewDetails,\n  onClear,\n}: {\n  selection: ThemeSelection;\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  onViewDetails: () => void;\n  onClear: () => void;\n}) {\n  const color = nodeColor(getSignalHue(selection.signalName));\n\n  return (\n    <section\n      aria-label=\"Active theme drill-in\"\n      className=\"flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border px-3 py-2\"\n      style={{\n        borderColor: `color-mix(in srgb, ${color} 35%, transparent)`,\n        backgroundColor: `color-mix(in srgb, ${color} 8%, transparent)`,\n      }}\n    >\n      <button\n        aria-label=\"Clear theme filter\"\n        className=\"border-border1 bg-surface2 text-neutral6 hover:bg-surface4 flex items-center gap-1.5 rounded-full border py-1 pr-2 pl-2.5 text-xs font-medium transition-colors\"\n        onClick={onClear}\n        type=\"button\"\n      >\n        <span aria-hidden=\"true\" className=\"size-2 rounded-[2px]\" style={{ backgroundColor: color }} />\n        {formatSignalName(selection.signalName)} · {selection.label}\n        <X aria-hidden=\"true\" className=\"size-3.5\" />\n      </button>\n      <span className=\"text-neutral4 text-xs\">\n        {filteredTraceCount === undefined\n          ? 'Loading theme traces…'\n          : `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that flow through this theme`}\n      </span>\n      <Button\n        aria-label={`View theme details for ${selection.label}`}\n        onClick={onViewDetails}\n        size=\"sm\"\n        type=\"button\"\n        variant=\"ghost\"\n      >\n        Details →\n      </Button>\n    </section>\n  );\n}\n"],"names":["nodeColor","getSignalHue","jsxs","jsx","formatSignalName","X","Button"],"mappings":";;;;;;;;;;;AAOO,SAAS,iBAAA,CAAkB;AAAA,EAChC,SAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,MAAM,KAAA,GAAQA,qBAAA,CAAUC,oCAAA,CAAa,SAAA,CAAU,UAAU,CAAC,CAAA;AAE1D,EAAA,uBACEC,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAW,uBAAA;AAAA,MACX,SAAA,EAAU,yEAAA;AAAA,MACV,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,sBAAsB,KAAK,CAAA,kBAAA,CAAA;AAAA,QACxC,eAAA,EAAiB,sBAAsB,KAAK,CAAA,iBAAA;AAAA,OAC9C;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAA,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAW,oBAAA;AAAA,YACX,SAAA,EAAU,iKAAA;AAAA,YACV,OAAA,EAAS,OAAA;AAAA,YACT,IAAA,EAAK,QAAA;AAAA,YAEL,QAAA,EAAA;AAAA,8BAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,eAAY,MAAA,EAAO,SAAA,EAAU,wBAAuB,KAAA,EAAO,EAAE,eAAA,EAAiB,KAAA,EAAM,EAAG,CAAA;AAAA,cAC5FC,4CAAA,CAAiB,UAAU,UAAU,CAAA;AAAA,cAAE,KAAA;AAAA,cAAI,SAAA,CAAU,KAAA;AAAA,8BACtDD,cAAA,CAACE,aAAA,EAAA,EAAE,aAAA,EAAY,MAAA,EAAO,WAAU,UAAA,EAAW;AAAA;AAAA;AAAA,SAC7C;AAAA,wBACAF,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EACb,QAAA,EAAA,kBAAA,KAAuB,MAAA,GACpB,uBAAA,GACA,CAAA,YAAA,EAAe,kBAAkB,CAAA,IAAA,EAAO,eAAe,CAAA,oCAAA,CAAA,EAC7D,CAAA;AAAA,wBACAA,cAAA;AAAA,UAACG,aAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAY,CAAA,uBAAA,EAA0B,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,YACrD,OAAA,EAAS,aAAA;AAAA,YACT,IAAA,EAAK,IAAA;AAAA,YACL,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAQ,OAAA;AAAA,YACT,QAAA,EAAA;AAAA;AAAA;AAED;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"theme-filter-banner.cjs.js","sources":["../../../src/ee/signals/theme-filter-banner.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport { getSignalHue } from './signal-colors';\nimport { formatSignalName } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { Button } from '@/ds/components/Button';\nimport { nodeColor } from '@/ds/components/SankeyChart';\n\nfunction selectionLabel(selection: ThemeSelection) {\n  return `${formatSignalName(selection.signalName)} · ${selection.kind === 'theme' ? selection.label : 'Noise'}`;\n}\n\nfunction filterSummary({\n  selections,\n  filteredTraceCount,\n  totalTraceCount,\n  isUnavailable,\n}: {\n  selections: ThemeSelection[];\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  isUnavailable?: boolean;\n}) {\n  if (isUnavailable) return 'Filters unavailable for this snapshot';\n  if (filteredTraceCount === undefined) return 'Loading matching traces…';\n  const onlySelection = selections.length === 1 ? selections[0] : undefined;\n  if (onlySelection?.kind === 'noise') {\n    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces assigned to Noise`;\n  }\n  if (onlySelection) {\n    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that flow through this theme`;\n  }\n  return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that match these filters`;\n}\n\nexport function ThemeFilterBanner({\n  selections,\n  filteredTraceCount,\n  totalTraceCount,\n  isUnavailable,\n  onViewDetails,\n  onRemove,\n  onClear,\n}: {\n  selections: ThemeSelection[];\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  isUnavailable?: boolean;\n  onViewDetails: (selection: ThemeSelection) => void;\n  onRemove: (signalName: ThemeSelection['signalName']) => void;\n  onClear: () => void;\n}) {\n  const colors = selections.map(selection => nodeColor(getSignalHue(selection.signalName)));\n  const latestSelection = selections.at(-1);\n  const backgroundGradient = `linear-gradient(90deg, ${colors\n    .map(color => `color-mix(in srgb, ${color} 8%, transparent)`)\n    .join(', ')})`;\n  const borderGradient = `linear-gradient(90deg, ${colors\n    .map(color => `color-mix(in srgb, ${color} 35%, transparent)`)\n    .join(', ')})`;\n\n  return (\n    <section\n      aria-label=\"Active theme drill-in\"\n      className=\"relative flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-transparent px-3 py-2\"\n      style={{ backgroundImage: `${backgroundGradient}, ${borderGradient}`, backgroundClip: 'padding-box, border-box' }}\n    >\n      {selections.map((selection, index) => {\n        const color = colors[index];\n        return (\n          <button\n            key={selection.signalName}\n            aria-label={\n              selections.length === 1 ? `Clear ${selection.kind} filter` : `Clear filter ${selectionLabel(selection)}`\n            }\n            className=\"border-border1 bg-surface2 text-neutral6 hover:bg-surface4 flex items-center gap-1.5 rounded-full border py-1 pr-2 pl-2.5 text-xs font-medium transition-colors\"\n            onClick={() => onRemove(selection.signalName)}\n            type=\"button\"\n          >\n            <span aria-hidden=\"true\" className=\"rounded-0.5 size-2\" style={{ backgroundColor: color }} />\n            {selectionLabel(selection)}\n            <X aria-hidden=\"true\" className=\"size-3.5\" />\n          </button>\n        );\n      })}\n      <span className=\"text-neutral4 text-xs\">\n        {filterSummary({ selections, filteredTraceCount, totalTraceCount, isUnavailable })}\n      </span>\n      {!isUnavailable && filteredTraceCount !== undefined && latestSelection ? (\n        <Button\n          aria-label={\n            latestSelection.kind === 'theme'\n              ? `View theme details for ${latestSelection.label}`\n              : `View noise details for ${formatSignalName(latestSelection.signalName)}`\n          }\n          onClick={() => onViewDetails(latestSelection)}\n          size=\"sm\"\n          type=\"button\"\n          variant=\"ghost\"\n        >\n          Details →\n        </Button>\n      ) : null}\n      {selections.length > 1 ? (\n        <Button onClick={onClear} size=\"sm\" type=\"button\" variant=\"ghost\">\n          Clear all\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"names":["formatSignalName","nodeColor","getSignalHue","jsxs","jsx","X","Button"],"mappings":"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"}

package/dist/ee/signals/theme-filter-banner.es.js

@@ -5,52 +5,77 @@ import { formatSignalName } from './signal-formatting.es.js';
 import { B as Button } from '../../Button-C-9Pzy-Z.js';
 import { n as nodeColor } from '../../sankeyColor-CQ5nkgtL.js';
 
+function selectionLabel(selection) {
+  return `${formatSignalName(selection.signalName)} · ${selection.kind === "theme" ? selection.label : "Noise"}`;
+}
+function filterSummary({
+  selections,
+  filteredTraceCount,
+  totalTraceCount,
+  isUnavailable
+}) {
+  if (isUnavailable) return "Filters unavailable for this snapshot";
+  if (filteredTraceCount === void 0) return "Loading matching traces…";
+  const onlySelection = selections.length === 1 ? selections[0] : void 0;
+  if (onlySelection?.kind === "noise") {
+    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces assigned to Noise`;
+  }
+  if (onlySelection) {
+    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that flow through this theme`;
+  }
+  return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that match these filters`;
+}
 function ThemeFilterBanner({
-  selection,
+  selections,
   filteredTraceCount,
   totalTraceCount,
+  isUnavailable,
   onViewDetails,
+  onRemove,
   onClear
 }) {
-  const color = nodeColor(getSignalHue(selection.signalName));
+  const colors = selections.map((selection) => nodeColor(getSignalHue(selection.signalName)));
+  const latestSelection = selections.at(-1);
+  const backgroundGradient = `linear-gradient(90deg, ${colors.map((color) => `color-mix(in srgb, ${color} 8%, transparent)`).join(", ")})`;
+  const borderGradient = `linear-gradient(90deg, ${colors.map((color) => `color-mix(in srgb, ${color} 35%, transparent)`).join(", ")})`;
   return /* @__PURE__ */ jsxs(
     "section",
     {
       "aria-label": "Active theme drill-in",
-      className: "flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border px-3 py-2",
-      style: {
-        borderColor: `color-mix(in srgb, ${color} 35%, transparent)`,
-        backgroundColor: `color-mix(in srgb, ${color} 8%, transparent)`
-      },
+      className: "relative flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-transparent px-3 py-2",
+      style: { backgroundImage: `${backgroundGradient}, ${borderGradient}`, backgroundClip: "padding-box, border-box" },
       children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            "aria-label": "Clear theme filter",
-            className: "border-border1 bg-surface2 text-neutral6 hover:bg-surface4 flex items-center gap-1.5 rounded-full border py-1 pr-2 pl-2.5 text-xs font-medium transition-colors",
-            onClick: onClear,
-            type: "button",
-            children: [
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-2 rounded-[2px]", style: { backgroundColor: color } }),
-              formatSignalName(selection.signalName),
-              " · ",
-              selection.label,
-              /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-neutral4 text-xs", children: filteredTraceCount === void 0 ? "Loading theme traces…" : `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that flow through this theme` }),
-        /* @__PURE__ */ jsx(
+        selections.map((selection, index) => {
+          const color = colors[index];
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              "aria-label": selections.length === 1 ? `Clear ${selection.kind} filter` : `Clear filter ${selectionLabel(selection)}`,
+              className: "border-border1 bg-surface2 text-neutral6 hover:bg-surface4 flex items-center gap-1.5 rounded-full border py-1 pr-2 pl-2.5 text-xs font-medium transition-colors",
+              onClick: () => onRemove(selection.signalName),
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "rounded-0.5 size-2", style: { backgroundColor: color } }),
+                selectionLabel(selection),
+                /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" })
+              ]
+            },
+            selection.signalName
+          );
+        }),
+        /* @__PURE__ */ jsx("span", { className: "text-neutral4 text-xs", children: filterSummary({ selections, filteredTraceCount, totalTraceCount, isUnavailable }) }),
+        !isUnavailable && filteredTraceCount !== void 0 && latestSelection ? /* @__PURE__ */ jsx(
           Button,
           {
-            "aria-label": `View theme details for ${selection.label}`,
-            onClick: onViewDetails,
+            "aria-label": latestSelection.kind === "theme" ? `View theme details for ${latestSelection.label}` : `View noise details for ${formatSignalName(latestSelection.signalName)}`,
+            onClick: () => onViewDetails(latestSelection),
             size: "sm",
             type: "button",
             variant: "ghost",
             children: "Details →"
           }
-        )
+        ) : null,
+        selections.length > 1 ? /* @__PURE__ */ jsx(Button, { onClick: onClear, size: "sm", type: "button", variant: "ghost", children: "Clear all" }) : null
       ]
     }
   );

package/dist/ee/signals/theme-filter-banner.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-filter-banner.es.js","sources":["../../../src/ee/signals/theme-filter-banner.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport { getSignalHue } from './signal-colors';\nimport { formatSignalName } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { Button } from '@/ds/components/Button';\nimport { nodeColor } from '@/ds/components/SankeyChart';\n\nexport function ThemeFilterBanner({\n  selection,\n  filteredTraceCount,\n  totalTraceCount,\n  onViewDetails,\n  onClear,\n}: {\n  selection: ThemeSelection;\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  onViewDetails: () => void;\n  onClear: () => void;\n}) {\n  const color = nodeColor(getSignalHue(selection.signalName));\n\n  return (\n    <section\n      aria-label=\"Active theme drill-in\"\n      className=\"flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border px-3 py-2\"\n      style={{\n        borderColor: `color-mix(in srgb, ${color} 35%, transparent)`,\n        backgroundColor: `color-mix(in srgb, ${color} 8%, transparent)`,\n      }}\n    >\n      <button\n        aria-label=\"Clear theme filter\"\n        className=\"border-border1 bg-surface2 text-neutral6 hover:bg-surface4 flex items-center gap-1.5 rounded-full border py-1 pr-2 pl-2.5 text-xs font-medium transition-colors\"\n        onClick={onClear}\n        type=\"button\"\n      >\n        <span aria-hidden=\"true\" className=\"size-2 rounded-[2px]\" style={{ backgroundColor: color }} />\n        {formatSignalName(selection.signalName)} · {selection.label}\n        <X aria-hidden=\"true\" className=\"size-3.5\" />\n      </button>\n      <span className=\"text-neutral4 text-xs\">\n        {filteredTraceCount === undefined\n          ? 'Loading theme traces…'\n          : `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that flow through this theme`}\n      </span>\n      <Button\n        aria-label={`View theme details for ${selection.label}`}\n        onClick={onViewDetails}\n        size=\"sm\"\n        type=\"button\"\n        variant=\"ghost\"\n      >\n        Details →\n      </Button>\n    </section>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAOO,SAAS,iBAAA,CAAkB;AAAA,EAChC,SAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,YAAA,CAAa,SAAA,CAAU,UAAU,CAAC,CAAA;AAE1D,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAW,uBAAA;AAAA,MACX,SAAA,EAAU,yEAAA;AAAA,MACV,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,sBAAsB,KAAK,CAAA,kBAAA,CAAA;AAAA,QACxC,eAAA,EAAiB,sBAAsB,KAAK,CAAA,iBAAA;AAAA,OAC9C;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAW,oBAAA;AAAA,YACX,SAAA,EAAU,iKAAA;AAAA,YACV,OAAA,EAAS,OAAA;AAAA,YACT,IAAA,EAAK,QAAA;AAAA,YAEL,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,eAAY,MAAA,EAAO,SAAA,EAAU,wBAAuB,KAAA,EAAO,EAAE,eAAA,EAAiB,KAAA,EAAM,EAAG,CAAA;AAAA,cAC5F,gBAAA,CAAiB,UAAU,UAAU,CAAA;AAAA,cAAE,KAAA;AAAA,cAAI,SAAA,CAAU,KAAA;AAAA,8BACtD,GAAA,CAAC,CAAA,EAAA,EAAE,aAAA,EAAY,MAAA,EAAO,WAAU,UAAA,EAAW;AAAA;AAAA;AAAA,SAC7C;AAAA,wBACA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EACb,QAAA,EAAA,kBAAA,KAAuB,MAAA,GACpB,uBAAA,GACA,CAAA,YAAA,EAAe,kBAAkB,CAAA,IAAA,EAAO,eAAe,CAAA,oCAAA,CAAA,EAC7D,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAY,CAAA,uBAAA,EAA0B,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,YACrD,OAAA,EAAS,aAAA;AAAA,YACT,IAAA,EAAK,IAAA;AAAA,YACL,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAQ,OAAA;AAAA,YACT,QAAA,EAAA;AAAA;AAAA;AAED;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"theme-filter-banner.es.js","sources":["../../../src/ee/signals/theme-filter-banner.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport { getSignalHue } from './signal-colors';\nimport { formatSignalName } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { Button } from '@/ds/components/Button';\nimport { nodeColor } from '@/ds/components/SankeyChart';\n\nfunction selectionLabel(selection: ThemeSelection) {\n  return `${formatSignalName(selection.signalName)} · ${selection.kind === 'theme' ? selection.label : 'Noise'}`;\n}\n\nfunction filterSummary({\n  selections,\n  filteredTraceCount,\n  totalTraceCount,\n  isUnavailable,\n}: {\n  selections: ThemeSelection[];\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  isUnavailable?: boolean;\n}) {\n  if (isUnavailable) return 'Filters unavailable for this snapshot';\n  if (filteredTraceCount === undefined) return 'Loading matching traces…';\n  const onlySelection = selections.length === 1 ? selections[0] : undefined;\n  if (onlySelection?.kind === 'noise') {\n    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces assigned to Noise`;\n  }\n  if (onlySelection) {\n    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that flow through this theme`;\n  }\n  return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that match these filters`;\n}\n\nexport function ThemeFilterBanner({\n  selections,\n  filteredTraceCount,\n  totalTraceCount,\n  isUnavailable,\n  onViewDetails,\n  onRemove,\n  onClear,\n}: {\n  selections: ThemeSelection[];\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  isUnavailable?: boolean;\n  onViewDetails: (selection: ThemeSelection) => void;\n  onRemove: (signalName: ThemeSelection['signalName']) => void;\n  onClear: () => void;\n}) {\n  const colors = selections.map(selection => nodeColor(getSignalHue(selection.signalName)));\n  const latestSelection = selections.at(-1);\n  const backgroundGradient = `linear-gradient(90deg, ${colors\n    .map(color => `color-mix(in srgb, ${color} 8%, transparent)`)\n    .join(', ')})`;\n  const borderGradient = `linear-gradient(90deg, ${colors\n    .map(color => `color-mix(in srgb, ${color} 35%, transparent)`)\n    .join(', ')})`;\n\n  return (\n    <section\n      aria-label=\"Active theme drill-in\"\n      className=\"relative flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-transparent px-3 py-2\"\n      style={{ backgroundImage: `${backgroundGradient}, ${borderGradient}`, backgroundClip: 'padding-box, border-box' }}\n    >\n      {selections.map((selection, index) => {\n        const color = colors[index];\n        return (\n          <button\n            key={selection.signalName}\n            aria-label={\n              selections.length === 1 ? `Clear ${selection.kind} filter` : `Clear filter ${selectionLabel(selection)}`\n            }\n            className=\"border-border1 bg-surface2 text-neutral6 hover:bg-surface4 flex items-center gap-1.5 rounded-full border py-1 pr-2 pl-2.5 text-xs font-medium transition-colors\"\n            onClick={() => onRemove(selection.signalName)}\n            type=\"button\"\n          >\n            <span aria-hidden=\"true\" className=\"rounded-0.5 size-2\" style={{ backgroundColor: color }} />\n            {selectionLabel(selection)}\n            <X aria-hidden=\"true\" className=\"size-3.5\" />\n          </button>\n        );\n      })}\n      <span className=\"text-neutral4 text-xs\">\n        {filterSummary({ selections, filteredTraceCount, totalTraceCount, isUnavailable })}\n      </span>\n      {!isUnavailable && filteredTraceCount !== undefined && latestSelection ? (\n        <Button\n          aria-label={\n            latestSelection.kind === 'theme'\n              ? `View theme details for ${latestSelection.label}`\n              : `View noise details for ${formatSignalName(latestSelection.signalName)}`\n          }\n          onClick={() => onViewDetails(latestSelection)}\n          size=\"sm\"\n          type=\"button\"\n          variant=\"ghost\"\n        >\n          Details →\n        </Button>\n      ) : null}\n      {selections.length > 1 ? (\n        <Button onClick={onClear} size=\"sm\" type=\"button\" variant=\"ghost\">\n          Clear all\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/{highlight-C2uRVhiA.cjs → highlight-CEt2vhD8.cjs}

@@ -21,7 +21,18 @@ const langAliases = {
   sh: "bash",
   bash: "bash",
   shell: "bash",
-  zsh: "bash"
+  zsh: "bash",
+  yml: "yaml",
+  yaml: "yaml",
+  diff: "diff",
+  patch: "diff",
+  css: "css",
+  scss: "css",
+  html: "html",
+  htm: "html",
+  xml: "xml",
+  svg: "xml",
+  sql: "sql"
 };
 let highlighterPromise = null;
 function getHighlighter() {
@@ -41,7 +52,13 @@ function getHighlighter() {
           import('shiki/langs/json.mjs'),
           import('shiki/langs/bash.mjs'),
           import('shiki/langs/markdown.mjs'),
-          import('shiki/langs/python.mjs')
+          import('shiki/langs/python.mjs'),
+          import('shiki/langs/yaml.mjs'),
+          import('shiki/langs/diff.mjs'),
+          import('shiki/langs/css.mjs'),
+          import('shiki/langs/html.mjs'),
+          import('shiki/langs/xml.mjs'),
+          import('shiki/langs/sql.mjs')
         ],
         engine: createJavaScriptRegexEngine()
       });
@@ -65,4 +82,4 @@ async function highlight(code, language) {
 }
 
 exports.highlight = highlight;
-//# sourceMappingURL=highlight-C2uRVhiA.cjs.map
+//# sourceMappingURL=highlight-CEt2vhD8.cjs.map

package/dist/highlight-CEt2vhD8.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight-CEt2vhD8.cjs","sources":["../src/ds/components/CodeEditor/highlight.ts"],"sourcesContent":["import type { HighlighterCore, ThemedToken } from 'shiki/core';\n\n/**\n * Languages we support for syntax highlighting in code blocks. A superset of\n * the editable CodeMirror `codeLanguages` set: read-only blocks (markdown\n * fences, chat output) also carry yaml, diff, css, html, xml and sql. Using\n * fine-grained Shiki imports (rather than the full `shiki` bundle) means only\n * these grammars are bundled, instead of a chunk for every language Shiki\n * knows about.\n */\nconst langAliases: Record<string, string> = {\n  js: 'javascript',\n  javascript: 'javascript',\n  mjs: 'javascript',\n  cjs: 'javascript',\n  node: 'javascript',\n  ts: 'typescript',\n  typescript: 'typescript',\n  mts: 'typescript',\n  cts: 'typescript',\n  tsx: 'tsx',\n  jsx: 'jsx',\n  json: 'json',\n  json5: 'json',\n  md: 'markdown',\n  markdown: 'markdown',\n  py: 'python',\n  python: 'python',\n  sh: 'bash',\n  bash: 'bash',\n  shell: 'bash',\n  zsh: 'bash',\n  yml: 'yaml',\n  yaml: 'yaml',\n  diff: 'diff',\n  patch: 'diff',\n  css: 'css',\n  scss: 'css',\n  html: 'html',\n  htm: 'html',\n  xml: 'xml',\n  svg: 'xml',\n  sql: 'sql',\n};\n\nlet highlighterPromise: Promise<HighlighterCore> | null = null;\n\nfunction getHighlighter(): Promise<HighlighterCore> {\n  if (!highlighterPromise) {\n    highlighterPromise = (async () => {\n      const [{ createHighlighterCore }, { createJavaScriptRegexEngine }] = await Promise.all([\n        import('shiki/core'),\n        import('shiki/engine/javascript'),\n      ]);\n\n      return createHighlighterCore({\n        themes: [import('shiki/themes/github-light.mjs'), import('shiki/themes/github-dark.mjs')],\n        langs: [\n          import('shiki/langs/javascript.mjs'),\n          import('shiki/langs/typescript.mjs'),\n          import('shiki/langs/tsx.mjs'),\n          import('shiki/langs/jsx.mjs'),\n          import('shiki/langs/json.mjs'),\n          import('shiki/langs/bash.mjs'),\n          import('shiki/langs/markdown.mjs'),\n          import('shiki/langs/python.mjs'),\n          import('shiki/langs/yaml.mjs'),\n          import('shiki/langs/diff.mjs'),\n          import('shiki/langs/css.mjs'),\n          import('shiki/langs/html.mjs'),\n          import('shiki/langs/xml.mjs'),\n          import('shiki/langs/sql.mjs'),\n        ],\n        engine: createJavaScriptRegexEngine(),\n      });\n    })();\n  }\n\n  return highlighterPromise;\n}\n\nexport async function highlight(code: string, language: string): Promise<ThemedToken[][] | null> {\n  const lang = langAliases[language?.toLowerCase()];\n  if (!lang) return null;\n\n  const highlighter = await getHighlighter();\n\n  const { tokens } = highlighter.codeToTokens(code, {\n    lang,\n    defaultColor: false,\n    themes: {\n      light: 'github-light',\n      dark: 'github-dark',\n    },\n  });\n\n  return tokens;\n}\n"],"names":[],"mappings":";;AAUA,MAAM,WAAA,GAAsC;AAAA,EAC1C,EAAA,EAAI,YAAA;AAAA,EACJ,UAAA,EAAY,YAAA;AAAA,EACZ,GAAA,EAAK,YAAA;AAAA,EACL,GAAA,EAAK,YAAA;AAAA,EACL,IAAA,EAAM,YAAA;AAAA,EACN,EAAA,EAAI,YAAA;AAAA,EACJ,UAAA,EAAY,YAAA;AAAA,EACZ,GAAA,EAAK,YAAA;AAAA,EACL,GAAA,EAAK,YAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,KAAA,EAAO,MAAA;AAAA,EACP,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU,UAAA;AAAA,EACV,EAAA,EAAI,QAAA;AAAA,EACJ,MAAA,EAAQ,QAAA;AAAA,EACR,EAAA,EAAI,MAAA;AAAA,EACJ,IAAA,EAAM,MAAA;AAAA,EACN,KAAA,EAAO,MAAA;AAAA,EACP,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,KAAA,EAAO,MAAA;AAAA,EACP,GAAA,EAAK,KAAA;AAAA,EACL,IAAA,EAAM,KAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK;AACP,CAAA;AAEA,IAAI,kBAAA,GAAsD,IAAA;AAE1D,SAAS,cAAA,GAA2C;AAClD,EAAA,IAAI,CAAC,kBAAA,EAAoB;AACvB,IAAA,kBAAA,GAAA,CAAsB,YAAY;AAChC,MAAA,MAAM,CAAC,EAAE,qBAAA,EAAsB,EAAG,EAAE,6BAA6B,CAAA,GAAI,MAAM,OAAA,CAAQ,GAAA,CAAI;AAAA,QACrF,OAAO,YAAY,CAAA;AAAA,QACnB,OAAO,yBAAyB;AAAA,OACjC,CAAA;AAED,MAAA,OAAO,qBAAA,CAAsB;AAAA,QAC3B,QAAQ,CAAC,OAAO,+BAA+B,CAAA,EAAG,OAAO,8BAA8B,CAAC,CAAA;AAAA,QACxF,KAAA,EAAO;AAAA,UACL,OAAO,4BAA4B,CAAA;AAAA,UACnC,OAAO,4BAA4B,CAAA;AAAA,UACnC,OAAO,qBAAqB,CAAA;AAAA,UAC5B,OAAO,qBAAqB,CAAA;AAAA,UAC5B,OAAO,sBAAsB,CAAA;AAAA,UAC7B,OAAO,sBAAsB,CAAA;AAAA,UAC7B,OAAO,0BAA0B,CAAA;AAAA,UACjC,OAAO,wBAAwB,CAAA;AAAA,UAC/B,OAAO,sBAAsB,CAAA;AAAA,UAC7B,OAAO,sBAAsB,CAAA;AAAA,UAC7B,OAAO,qBAAqB,CAAA;AAAA,UAC5B,OAAO,sBAAsB,CAAA;AAAA,UAC7B,OAAO,qBAAqB,CAAA;AAAA,UAC5B,OAAO,qBAAqB;AAAA,SAC9B;AAAA,QACA,QAAQ,2BAAA;AAA4B,OACrC,CAAA;AAAA,IACH,CAAA,GAAG;AAAA,EACL;AAEA,EAAA,OAAO,kBAAA;AACT;AAEA,eAAsB,SAAA,CAAU,MAAc,QAAA,EAAmD;AAC/F,EAAA,MAAM,IAAA,GAAO,WAAA,CAAY,QAAA,EAAU,WAAA,EAAa,CAAA;AAChD,EAAA,IAAI,CAAC,MAAM,OAAO,IAAA;AAElB,EAAA,MAAM,WAAA,GAAc,MAAM,cAAA,EAAe;AAEzC,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,WAAA,CAAY,aAAa,IAAA,EAAM;AAAA,IAChD,IAAA;AAAA,IACA,YAAA,EAAc,KAAA;AAAA,IACd,MAAA,EAAQ;AAAA,MACN,KAAA,EAAO,cAAA;AAAA,MACP,IAAA,EAAM;AAAA;AACR,GACD,CAAA;AAED,EAAA,OAAO,MAAA;AACT;;;;"}

package/dist/{highlight-Dis62bkj.js → highlight-CSJjjoqh.js}

@@ -19,7 +19,18 @@ const langAliases = {
   sh: "bash",
   bash: "bash",
   shell: "bash",
-  zsh: "bash"
+  zsh: "bash",
+  yml: "yaml",
+  yaml: "yaml",
+  diff: "diff",
+  patch: "diff",
+  css: "css",
+  scss: "css",
+  html: "html",
+  htm: "html",
+  xml: "xml",
+  svg: "xml",
+  sql: "sql"
 };
 let highlighterPromise = null;
 function getHighlighter() {
@@ -39,7 +50,13 @@ function getHighlighter() {
           import('shiki/langs/json.mjs'),
           import('shiki/langs/bash.mjs'),
           import('shiki/langs/markdown.mjs'),
-          import('shiki/langs/python.mjs')
+          import('shiki/langs/python.mjs'),
+          import('shiki/langs/yaml.mjs'),
+          import('shiki/langs/diff.mjs'),
+          import('shiki/langs/css.mjs'),
+          import('shiki/langs/html.mjs'),
+          import('shiki/langs/xml.mjs'),
+          import('shiki/langs/sql.mjs')
         ],
         engine: createJavaScriptRegexEngine()
       });
@@ -63,4 +80,4 @@ async function highlight(code, language) {
 }
 
 export { highlight as h };
-//# sourceMappingURL=highlight-Dis62bkj.js.map
+//# sourceMappingURL=highlight-CSJjjoqh.js.map

package/dist/highlight-CSJjjoqh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight-CSJjjoqh.js","sources":["../src/ds/components/CodeEditor/highlight.ts"],"sourcesContent":["import type { HighlighterCore, ThemedToken } from 'shiki/core';\n\n/**\n * Languages we support for syntax highlighting in code blocks. A superset of\n * the editable CodeMirror `codeLanguages` set: read-only blocks (markdown\n * fences, chat output) also carry yaml, diff, css, html, xml and sql. Using\n * fine-grained Shiki imports (rather than the full `shiki` bundle) means only\n * these grammars are bundled, instead of a chunk for every language Shiki\n * knows about.\n */\nconst langAliases: Record<string, string> = {\n  js: 'javascript',\n  javascript: 'javascript',\n  mjs: 'javascript',\n  cjs: 'javascript',\n  node: 'javascript',\n  ts: 'typescript',\n  typescript: 'typescript',\n  mts: 'typescript',\n  cts: 'typescript',\n  tsx: 'tsx',\n  jsx: 'jsx',\n  json: 'json',\n  json5: 'json',\n  md: 'markdown',\n  markdown: 'markdown',\n  py: 'python',\n  python: 'python',\n  sh: 'bash',\n  bash: 'bash',\n  shell: 'bash',\n  zsh: 'bash',\n  yml: 'yaml',\n  yaml: 'yaml',\n  diff: 'diff',\n  patch: 'diff',\n  css: 'css',\n  scss: 'css',\n  html: 'html',\n  htm: 'html',\n  xml: 'xml',\n  svg: 'xml',\n  sql: 'sql',\n};\n\nlet highlighterPromise: Promise<HighlighterCore> | null = null;\n\nfunction getHighlighter(): Promise<HighlighterCore> {\n  if (!highlighterPromise) {\n    highlighterPromise = (async () => {\n      const [{ createHighlighterCore }, { createJavaScriptRegexEngine }] = await Promise.all([\n        import('shiki/core'),\n        import('shiki/engine/javascript'),\n      ]);\n\n      return createHighlighterCore({\n        themes: [import('shiki/themes/github-light.mjs'), import('shiki/themes/github-dark.mjs')],\n        langs: [\n          import('shiki/langs/javascript.mjs'),\n          import('shiki/langs/typescript.mjs'),\n          import('shiki/langs/tsx.mjs'),\n          import('shiki/langs/jsx.mjs'),\n          import('shiki/langs/json.mjs'),\n          import('shiki/langs/bash.mjs'),\n          import('shiki/langs/markdown.mjs'),\n          import('shiki/langs/python.mjs'),\n          import('shiki/langs/yaml.mjs'),\n          import('shiki/langs/diff.mjs'),\n          import('shiki/langs/css.mjs'),\n          import('shiki/langs/html.mjs'),\n          import('shiki/langs/xml.mjs'),\n          import('shiki/langs/sql.mjs'),\n        ],\n        engine: createJavaScriptRegexEngine(),\n      });\n    })();\n  }\n\n  return highlighterPromise;\n}\n\nexport async function highlight(code: string, language: string): Promise<ThemedToken[][] | null> {\n  const lang = langAliases[language?.toLowerCase()];\n  if (!lang) return null;\n\n  const highlighter = await getHighlighter();\n\n  const { tokens } = highlighter.codeToTokens(code, {\n    lang,\n    defaultColor: false,\n    themes: {\n      light: 'github-light',\n      dark: 'github-dark',\n    },\n  });\n\n  return tokens;\n}\n"],"names":[],"mappings":"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"}

package/dist/markdown-renderer-D1vSFfp9.cjs

@@ -0,0 +1,86 @@
+'use strict';
+
+require('./markdown-renderer.css');const jsxRuntime = require('react/jsx-runtime');
+const Markdown = require('react-markdown');
+const remarkGfm = require('remark-gfm');
+const codeBlock = require('./code-block-Dn0K3DkE.cjs');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+function MarkdownRenderer({ children, className, externalLinkTarget = "tab" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Markdown,
+    {
+      remarkPlugins: [remarkGfm],
+      components: externalLinkTarget === "window" ? WINDOW_COMPONENTS : COMPONENTS,
+      className: utils_cn.cn("mastra-markdown", className),
+      children: decodeEscapedNewlines(children)
+    }
+  );
+}
+function decodeEscapedNewlines(text) {
+  return text.includes("\n") ? text : text.replace(/\\n/g, "\n");
+}
+function languageOf(node) {
+  const classNames = node.properties.className;
+  if (!Array.isArray(classNames)) return void 0;
+  const language = classNames.find((entry) => typeof entry === "string" && entry.startsWith("language-"));
+  return typeof language === "string" ? language.slice("language-".length) : void 0;
+}
+function fencedCode(node) {
+  const child = node?.children.find((entry) => entry.type === "element" && entry.tagName === "code");
+  if (child?.type !== "element") return void 0;
+  const code = child.children.map((entry) => entry.type === "text" ? entry.value : "").join("");
+  return { code: code.replace(/\n$/, ""), language: languageOf(child) };
+}
+function MarkdownCodeBlock({ node, children }) {
+  const fenced = fencedCode(node);
+  if (!fenced) return /* @__PURE__ */ jsxRuntime.jsx("pre", { children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    codeBlock.CodeBlock,
+    {
+      code: fenced.code,
+      lang: fenced.language,
+      overflow: "scroll",
+      className: "bg-surface1 my-3",
+      copyMessage: "Copied code to clipboard"
+    }
+  );
+}
+const POPUP_WINDOW_FEATURES = "popup=yes,width=720,height=800,resizable=yes,scrollbars=yes";
+function isPlainLeftClick(event) {
+  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+}
+function markdownLink(externalLinkTarget) {
+  return function MarkdownLink({ href, title, children }) {
+    const isExternal = /^https?:\/\//i.test(href ?? "");
+    const openInPopup = (event) => {
+      if (!isExternal || externalLinkTarget !== "window" || !isPlainLeftClick(event)) return;
+      const popup = window.open(href, "_blank", POPUP_WINDOW_FEATURES);
+      if (!popup) return;
+      popup.opener = null;
+      event.preventDefault();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href,
+        title,
+        onClick: openInPopup,
+        target: isExternal ? "_blank" : void 0,
+        rel: isExternal ? "noopener noreferrer" : void 0,
+        children
+      }
+    );
+  };
+}
+const COMPONENTS = {
+  pre: MarkdownCodeBlock,
+  a: markdownLink("tab")
+};
+const WINDOW_COMPONENTS = {
+  ...COMPONENTS,
+  a: markdownLink("window")
+};
+
+exports.MarkdownRenderer = MarkdownRenderer;
+//# sourceMappingURL=markdown-renderer-D1vSFfp9.cjs.map

package/dist/markdown-renderer-D1vSFfp9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-renderer-D1vSFfp9.cjs","sources":["../src/ds/components/MarkdownRenderer/markdown-renderer.tsx"],"sourcesContent":["import type { MouseEvent, MouseEventHandler, ReactNode } from 'react';\nimport Markdown from 'react-markdown';\nimport type { Components, ExtraProps } from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\n\nimport { CodeBlock } from '@/ds/components/CodeBlock';\nimport { cn } from '@/lib/utils';\n\nimport './markdown-renderer.css';\n\nexport type MarkdownExternalLinkTarget = 'tab' | 'window';\n\nexport interface MarkdownRendererProps {\n  children: string;\n  className?: string;\n  externalLinkTarget?: MarkdownExternalLinkTarget;\n}\n\n/**\n * Renders a markdown string. Agent output can carry attacker-influenced text\n * (file contents, tool output, web pages): react-markdown escapes raw HTML and\n * drops dangerous link schemes, so nothing here reaches the DOM as markup.\n */\nexport function MarkdownRenderer({ children, className, externalLinkTarget = 'tab' }: MarkdownRendererProps) {\n  return (\n    <Markdown\n      remarkPlugins={[remarkGfm]}\n      components={externalLinkTarget === 'window' ? WINDOW_COMPONENTS : COMPONENTS}\n      className={cn('mastra-markdown', className)}\n    >\n      {decodeEscapedNewlines(children)}\n    </Markdown>\n  );\n}\n\n// Agent networks emit their text with literal `\\n`. Only unescape when the text\n// has no real newline, otherwise a `\"a\\nb\"` inside a code fence gets shredded.\nfunction decodeEscapedNewlines(text: string): string {\n  return text.includes('\\n') ? text : text.replace(/\\\\n/g, '\\n');\n}\n\ntype MarkdownNode = NonNullable<ExtraProps['node']>;\n\nfunction languageOf(node: MarkdownNode): string | undefined {\n  const classNames = node.properties.className;\n  if (!Array.isArray(classNames)) return undefined;\n\n  const language = classNames.find(entry => typeof entry === 'string' && entry.startsWith('language-'));\n  return typeof language === 'string' ? language.slice('language-'.length) : undefined;\n}\n\nfunction fencedCode(node: MarkdownNode | undefined): { code: string; language?: string } | undefined {\n  const child = node?.children.find(entry => entry.type === 'element' && entry.tagName === 'code');\n  if (child?.type !== 'element') return undefined;\n\n  const code = child.children.map(entry => (entry.type === 'text' ? entry.value : '')).join('');\n  return { code: code.replace(/\\n$/, ''), language: languageOf(child) };\n}\n\nfunction MarkdownCodeBlock({ node, children }: { node?: MarkdownNode; children?: ReactNode }) {\n  const fenced = fencedCode(node);\n  if (!fenced) return <pre>{children}</pre>;\n\n  return (\n    <CodeBlock\n      code={fenced.code}\n      lang={fenced.language}\n      overflow=\"scroll\"\n      className=\"bg-surface1 my-3\"\n      copyMessage=\"Copied code to clipboard\"\n    />\n  );\n}\n\nconst POPUP_WINDOW_FEATURES = 'popup=yes,width=720,height=800,resizable=yes,scrollbars=yes';\n\nfunction isPlainLeftClick(event: MouseEvent): boolean {\n  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;\n}\n\nfunction markdownLink(externalLinkTarget: MarkdownExternalLinkTarget): NonNullable<Components['a']> {\n  return function MarkdownLink({ href, title, children }) {\n    const isExternal = /^https?:\\/\\//i.test(href ?? '');\n\n    const openInPopup: MouseEventHandler<HTMLAnchorElement> = event => {\n      if (!isExternal || externalLinkTarget !== 'window' || !isPlainLeftClick(event)) return;\n\n      const popup = window.open(href, '_blank', POPUP_WINDOW_FEATURES);\n      if (!popup) return;\n\n      popup.opener = null;\n      event.preventDefault();\n    };\n\n    return (\n      <a\n        href={href}\n        title={title}\n        onClick={openInPopup}\n        target={isExternal ? '_blank' : undefined}\n        rel={isExternal ? 'noopener noreferrer' : undefined}\n      >\n        {children}\n      </a>\n    );\n  };\n}\n\n// Elements are listed one by one: react-markdown also passes its `node`, which\n// React would forward to the DOM as a stray attribute. Everything else is\n// styled from markdown-renderer.css.\nconst COMPONENTS: Components = {\n  pre: MarkdownCodeBlock,\n  a: markdownLink('tab'),\n};\n\nconst WINDOW_COMPONENTS: Components = {\n  ...COMPONENTS,\n  a: markdownLink('window'),\n};\n"],"names":["jsx","cn","CodeBlock"],"mappings":"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"}

package/dist/markdown-renderer-DmYYQHxu.js

@@ -0,0 +1,84 @@
+import { jsx } from 'react/jsx-runtime';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { C as CodeBlock } from './code-block-DqKXZajq.js';
+import { c as cn } from './cn-BakJzhuv.js';
+
+import './markdown-renderer.css';function MarkdownRenderer({ children, className, externalLinkTarget = "tab" }) {
+  return /* @__PURE__ */ jsx(
+    Markdown,
+    {
+      remarkPlugins: [remarkGfm],
+      components: externalLinkTarget === "window" ? WINDOW_COMPONENTS : COMPONENTS,
+      className: cn("mastra-markdown", className),
+      children: decodeEscapedNewlines(children)
+    }
+  );
+}
+function decodeEscapedNewlines(text) {
+  return text.includes("\n") ? text : text.replace(/\\n/g, "\n");
+}
+function languageOf(node) {
+  const classNames = node.properties.className;
+  if (!Array.isArray(classNames)) return void 0;
+  const language = classNames.find((entry) => typeof entry === "string" && entry.startsWith("language-"));
+  return typeof language === "string" ? language.slice("language-".length) : void 0;
+}
+function fencedCode(node) {
+  const child = node?.children.find((entry) => entry.type === "element" && entry.tagName === "code");
+  if (child?.type !== "element") return void 0;
+  const code = child.children.map((entry) => entry.type === "text" ? entry.value : "").join("");
+  return { code: code.replace(/\n$/, ""), language: languageOf(child) };
+}
+function MarkdownCodeBlock({ node, children }) {
+  const fenced = fencedCode(node);
+  if (!fenced) return /* @__PURE__ */ jsx("pre", { children });
+  return /* @__PURE__ */ jsx(
+    CodeBlock,
+    {
+      code: fenced.code,
+      lang: fenced.language,
+      overflow: "scroll",
+      className: "bg-surface1 my-3",
+      copyMessage: "Copied code to clipboard"
+    }
+  );
+}
+const POPUP_WINDOW_FEATURES = "popup=yes,width=720,height=800,resizable=yes,scrollbars=yes";
+function isPlainLeftClick(event) {
+  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+}
+function markdownLink(externalLinkTarget) {
+  return function MarkdownLink({ href, title, children }) {
+    const isExternal = /^https?:\/\//i.test(href ?? "");
+    const openInPopup = (event) => {
+      if (!isExternal || externalLinkTarget !== "window" || !isPlainLeftClick(event)) return;
+      const popup = window.open(href, "_blank", POPUP_WINDOW_FEATURES);
+      if (!popup) return;
+      popup.opener = null;
+      event.preventDefault();
+    };
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        title,
+        onClick: openInPopup,
+        target: isExternal ? "_blank" : void 0,
+        rel: isExternal ? "noopener noreferrer" : void 0,
+        children
+      }
+    );
+  };
+}
+const COMPONENTS = {
+  pre: MarkdownCodeBlock,
+  a: markdownLink("tab")
+};
+const WINDOW_COMPONENTS = {
+  ...COMPONENTS,
+  a: markdownLink("window")
+};
+
+export { MarkdownRenderer as M };
+//# sourceMappingURL=markdown-renderer-DmYYQHxu.js.map

package/dist/markdown-renderer-DmYYQHxu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-renderer-DmYYQHxu.js","sources":["../src/ds/components/MarkdownRenderer/markdown-renderer.tsx"],"sourcesContent":["import type { MouseEvent, MouseEventHandler, ReactNode } from 'react';\nimport Markdown from 'react-markdown';\nimport type { Components, ExtraProps } from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\n\nimport { CodeBlock } from '@/ds/components/CodeBlock';\nimport { cn } from '@/lib/utils';\n\nimport './markdown-renderer.css';\n\nexport type MarkdownExternalLinkTarget = 'tab' | 'window';\n\nexport interface MarkdownRendererProps {\n  children: string;\n  className?: string;\n  externalLinkTarget?: MarkdownExternalLinkTarget;\n}\n\n/**\n * Renders a markdown string. Agent output can carry attacker-influenced text\n * (file contents, tool output, web pages): react-markdown escapes raw HTML and\n * drops dangerous link schemes, so nothing here reaches the DOM as markup.\n */\nexport function MarkdownRenderer({ children, className, externalLinkTarget = 'tab' }: MarkdownRendererProps) {\n  return (\n    <Markdown\n      remarkPlugins={[remarkGfm]}\n      components={externalLinkTarget === 'window' ? WINDOW_COMPONENTS : COMPONENTS}\n      className={cn('mastra-markdown', className)}\n    >\n      {decodeEscapedNewlines(children)}\n    </Markdown>\n  );\n}\n\n// Agent networks emit their text with literal `\\n`. Only unescape when the text\n// has no real newline, otherwise a `\"a\\nb\"` inside a code fence gets shredded.\nfunction decodeEscapedNewlines(text: string): string {\n  return text.includes('\\n') ? text : text.replace(/\\\\n/g, '\\n');\n}\n\ntype MarkdownNode = NonNullable<ExtraProps['node']>;\n\nfunction languageOf(node: MarkdownNode): string | undefined {\n  const classNames = node.properties.className;\n  if (!Array.isArray(classNames)) return undefined;\n\n  const language = classNames.find(entry => typeof entry === 'string' && entry.startsWith('language-'));\n  return typeof language === 'string' ? language.slice('language-'.length) : undefined;\n}\n\nfunction fencedCode(node: MarkdownNode | undefined): { code: string; language?: string } | undefined {\n  const child = node?.children.find(entry => entry.type === 'element' && entry.tagName === 'code');\n  if (child?.type !== 'element') return undefined;\n\n  const code = child.children.map(entry => (entry.type === 'text' ? entry.value : '')).join('');\n  return { code: code.replace(/\\n$/, ''), language: languageOf(child) };\n}\n\nfunction MarkdownCodeBlock({ node, children }: { node?: MarkdownNode; children?: ReactNode }) {\n  const fenced = fencedCode(node);\n  if (!fenced) return <pre>{children}</pre>;\n\n  return (\n    <CodeBlock\n      code={fenced.code}\n      lang={fenced.language}\n      overflow=\"scroll\"\n      className=\"bg-surface1 my-3\"\n      copyMessage=\"Copied code to clipboard\"\n    />\n  );\n}\n\nconst POPUP_WINDOW_FEATURES = 'popup=yes,width=720,height=800,resizable=yes,scrollbars=yes';\n\nfunction isPlainLeftClick(event: MouseEvent): boolean {\n  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;\n}\n\nfunction markdownLink(externalLinkTarget: MarkdownExternalLinkTarget): NonNullable<Components['a']> {\n  return function MarkdownLink({ href, title, children }) {\n    const isExternal = /^https?:\\/\\//i.test(href ?? '');\n\n    const openInPopup: MouseEventHandler<HTMLAnchorElement> = event => {\n      if (!isExternal || externalLinkTarget !== 'window' || !isPlainLeftClick(event)) return;\n\n      const popup = window.open(href, '_blank', POPUP_WINDOW_FEATURES);\n      if (!popup) return;\n\n      popup.opener = null;\n      event.preventDefault();\n    };\n\n    return (\n      <a\n        href={href}\n        title={title}\n        onClick={openInPopup}\n        target={isExternal ? '_blank' : undefined}\n        rel={isExternal ? 'noopener noreferrer' : undefined}\n      >\n        {children}\n      </a>\n    );\n  };\n}\n\n// Elements are listed one by one: react-markdown also passes its `node`, which\n// React would forward to the DOM as a stray attribute. Everything else is\n// styled from markdown-renderer.css.\nconst COMPONENTS: Components = {\n  pre: MarkdownCodeBlock,\n  a: markdownLink('tab'),\n};\n\nconst WINDOW_COMPONENTS: Components = {\n  ...COMPONENTS,\n  a: markdownLink('window'),\n};\n"],"names":[],"mappings":";;;;;;AAuBO,SAAS,iBAAiB,EAAE,QAAA,EAAU,SAAA,EAAW,kBAAA,GAAqB,OAAM,EAA0B;AAC3G,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAe,CAAC,SAAS,CAAA;AAAA,MACzB,UAAA,EAAY,kBAAA,KAAuB,QAAA,GAAW,iBAAA,GAAoB,UAAA;AAAA,MAClE,SAAA,EAAW,EAAA,CAAG,iBAAA,EAAmB,SAAS,CAAA;AAAA,MAEzC,gCAAsB,QAAQ;AAAA;AAAA,GACjC;AAEJ;AAIA,SAAS,sBAAsB,IAAA,EAAsB;AACnD,EAAA,OAAO,IAAA,CAAK,SAAS,IAAI,CAAA,GAAI,OAAO,IAAA,CAAK,OAAA,CAAQ,QAAQ,IAAI,CAAA;AAC/D;AAIA,SAAS,WAAW,IAAA,EAAwC;AAC1D,EAAA,MAAM,UAAA,GAAa,KAAK,UAAA,CAAW,SAAA;AACnC,EAAA,IAAI,CAAC,KAAA,CAAM,OAAA,CAAQ,UAAU,GAAG,OAAO,MAAA;AAEvC,EAAA,MAAM,QAAA,GAAW,UAAA,CAAW,IAAA,CAAK,CAAA,KAAA,KAAS,OAAO,UAAU,QAAA,IAAY,KAAA,CAAM,UAAA,CAAW,WAAW,CAAC,CAAA;AACpG,EAAA,OAAO,OAAO,QAAA,KAAa,QAAA,GAAW,SAAS,KAAA,CAAM,WAAA,CAAY,MAAM,CAAA,GAAI,MAAA;AAC7E;AAEA,SAAS,WAAW,IAAA,EAAiF;AACnG,EAAA,MAAM,KAAA,GAAQ,IAAA,EAAM,QAAA,CAAS,IAAA,CAAK,CAAA,KAAA,KAAS,MAAM,IAAA,KAAS,SAAA,IAAa,KAAA,CAAM,OAAA,KAAY,MAAM,CAAA;AAC/F,EAAA,IAAI,KAAA,EAAO,IAAA,KAAS,SAAA,EAAW,OAAO,MAAA;AAEtC,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,QAAA,CAAS,GAAA,CAAI,CAAA,KAAA,KAAU,KAAA,CAAM,IAAA,KAAS,MAAA,GAAS,KAAA,CAAM,KAAA,GAAQ,EAAG,CAAA,CAAE,KAAK,EAAE,CAAA;AAC5F,EAAA,OAAO,EAAE,IAAA,EAAM,IAAA,CAAK,OAAA,CAAQ,KAAA,EAAO,EAAE,CAAA,EAAG,QAAA,EAAU,UAAA,CAAW,KAAK,CAAA,EAAE;AACtE;AAEA,SAAS,iBAAA,CAAkB,EAAE,IAAA,EAAM,QAAA,EAAS,EAAkD;AAC5F,EAAA,MAAM,MAAA,GAAS,WAAW,IAAI,CAAA;AAC9B,EAAA,IAAI,CAAC,MAAA,EAAQ,uBAAO,GAAA,CAAC,SAAK,QAAA,EAAS,CAAA;AAEnC,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,MAAM,MAAA,CAAO,IAAA;AAAA,MACb,MAAM,MAAA,CAAO,QAAA;AAAA,MACb,QAAA,EAAS,QAAA;AAAA,MACT,SAAA,EAAU,kBAAA;AAAA,MACV,WAAA,EAAY;AAAA;AAAA,GACd;AAEJ;AAEA,MAAM,qBAAA,GAAwB,6DAAA;AAE9B,SAAS,iBAAiB,KAAA,EAA4B;AACpD,EAAA,OAAO,KAAA,CAAM,MAAA,KAAW,CAAA,IAAK,CAAC,KAAA,CAAM,OAAA,IAAW,CAAC,KAAA,CAAM,OAAA,IAAW,CAAC,KAAA,CAAM,QAAA,IAAY,CAAC,KAAA,CAAM,MAAA;AAC7F;AAEA,SAAS,aAAa,kBAAA,EAA8E;AAClG,EAAA,OAAO,SAAS,YAAA,CAAa,EAAE,IAAA,EAAM,KAAA,EAAO,UAAS,EAAG;AACtD,IAAA,MAAM,UAAA,GAAa,eAAA,CAAgB,IAAA,CAAK,IAAA,IAAQ,EAAE,CAAA;AAElD,IAAA,MAAM,cAAoD,CAAA,KAAA,KAAS;AACjE,MAAA,IAAI,CAAC,UAAA,IAAc,kBAAA,KAAuB,YAAY,CAAC,gBAAA,CAAiB,KAAK,CAAA,EAAG;AAEhF,MAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,IAAA,CAAK,IAAA,EAAM,UAAU,qBAAqB,CAAA;AAC/D,MAAA,IAAI,CAAC,KAAA,EAAO;AAEZ,MAAA,KAAA,CAAM,MAAA,GAAS,IAAA;AACf,MAAA,KAAA,CAAM,cAAA,EAAe;AAAA,IACvB,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,KAAA;AAAA,QACA,OAAA,EAAS,WAAA;AAAA,QACT,MAAA,EAAQ,aAAa,QAAA,GAAW,MAAA;AAAA,QAChC,GAAA,EAAK,aAAa,qBAAA,GAAwB,MAAA;AAAA,QAEzC;AAAA;AAAA,KACH;AAAA,EAEJ,CAAA;AACF;AAKA,MAAM,UAAA,GAAyB;AAAA,EAC7B,GAAA,EAAK,iBAAA;AAAA,EACL,CAAA,EAAG,aAAa,KAAK;AACvB,CAAA;AAEA,MAAM,iBAAA,GAAgC;AAAA,EACpC,GAAG,UAAA;AAAA,EACH,CAAA,EAAG,aAAa,QAAQ;AAC1B,CAAA;;;;"}