@mastra/playground-ui 66.1.0-alpha.2 → 67.0.0

package/dist/domains/metrics/components/breakdown/breakdown-trend-text.d.ts

@@ -0,0 +1 @@
+export * from '../../../../src/domains/metrics/components/breakdown/breakdown-trend-text';

package/dist/domains/metrics/components/breakdown/breakdown-trend-text.es.js

@@ -0,0 +1,24 @@
+import "../../lib/breakdown-table.es.js";
+import { jsx } from "react/jsx-runtime";
+// src/domains/metrics/components/breakdown/breakdown-trend-text.tsx
+var TREND_CLASS = {
+	good: "text-badge-green-foreground",
+	bad: "text-badge-red-foreground"
+};
+/**
+* A change, green when it's good news and red when it's bad; without one, a muted dash. The cell sits
+* in the list's main column, so a flat change is muted too.
+*/
+function BreakdownTrendText({ trend, children }) {
+	if (children === void 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "—"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: trend ? TREND_CLASS[trend] : "text-muted-foreground",
+		children
+	});
+}
+export { BreakdownTrendText };
+
+//# sourceMappingURL=breakdown-trend-text.es.js.map

package/dist/domains/metrics/components/breakdown/breakdown-trend-text.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakdown-trend-text.es.js","names":[],"sources":["../../../../../src/domains/metrics/components/breakdown/breakdown-trend-text.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { DASH } from '../../lib/breakdown-table';\n\nconst TREND_CLASS = { good: 'text-badge-green-foreground', bad: 'text-badge-red-foreground' } as const;\n\n/**\n * A change, green when it's good news and red when it's bad; without one, a muted dash. The cell sits\n * in the list's main column, so a flat change is muted too.\n */\nexport function BreakdownTrendText({ trend, children }: { trend: 'good' | 'bad' | undefined; children?: ReactNode }) {\n  if (children === undefined) return <span className=\"text-muted-foreground\">{DASH}</span>;\n  return <span className={trend ? TREND_CLASS[trend] : 'text-muted-foreground'}>{children}</span>;\n}\n"],"mappings":";;;AAGA,IAAM,cAAc;CAAE,MAAM;CAA+B,KAAK;AAA4B;;;;;AAM5F,SAAgB,mBAAmB,EAAE,OAAO,YAAyE;CACnH,IAAI,aAAa,KAAA,GAAW,OAAO,oBAAC,QAAD;EAAM,WAAU;EAAyB,UAAA;CAAW,CAAA;CACvF,OAAO,oBAAC,QAAD;EAAM,WAAW,QAAQ,YAAY,SAAS;EAA0B;CAAe,CAAA;AAChG"}

package/dist/domains/metrics/components/breakdown-card.cjs.js

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MetricsCard = require("../../../MetricsCard-Dly_H3oX.cjs");
-const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_hooks_use_metrics_span_aggregate = require("../hooks/use-metrics-span-aggregate.cjs.js");
+const require_domains_metrics_hooks_use_metrics_trace_aggregate = require("../hooks/use-metrics-trace-aggregate.cjs.js");
+const require_MetricsCard = require("../../../MetricsCard-CEB-f2sv.cjs");
+const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_hooks_use_metrics_scope = require("../hooks/use-metrics-scope.cjs.js");
 const require_domains_metrics_components_breakdown_breakdown_frame = require("./breakdown/breakdown-frame.cjs.js");
-const require_domains_metrics_hooks_use_metrics_trace_aggregate = require("../hooks/use-metrics-trace-aggregate.cjs.js");
 const require_domains_metrics_components_breakdown_breakdown_tab_body = require("./breakdown/breakdown-tab-body.cjs.js");
 const require_domains_metrics_components_breakdown_breakdown_projects_first = require("./breakdown/breakdown-projects-first.cjs.js");
 let react = require("react");

package/dist/domains/metrics/components/breakdown-card.es.js

@@ -1,9 +1,9 @@
-import { t as MetricsCard } from "../../../MetricsCard-C9GWgT58.js";
-import { ChartCard } from "./chart-card.es.js";
 import { useSpanAggregateGate } from "../hooks/use-metrics-span-aggregate.es.js";
+import { useTraceAggregateGate } from "../hooks/use-metrics-trace-aggregate.es.js";
+import { t as MetricsCard } from "../../../MetricsCard-M8awJ2B_.js";
+import { ChartCard } from "./chart-card.es.js";
 import { useMetricsScope } from "../hooks/use-metrics-scope.es.js";
 import { BREAKDOWN_TITLE } from "./breakdown/breakdown-frame.es.js";
-import { useTraceAggregateGate } from "../hooks/use-metrics-trace-aggregate.es.js";
 import { BreakdownTabBody } from "./breakdown/breakdown-tab-body.es.js";
 import { BreakdownProjectsFirst } from "./breakdown/breakdown-projects-first.es.js";
 import { useState } from "react";

package/dist/domains/metrics/components/card-action-buttons.cjs.js

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_Button = require("../../../Button-YQRflC47.cjs");
+const require_icons_TraceIcon = require("../../../icons/TraceIcon.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 // src/domains/metrics/components/card-action-buttons.tsx
@@ -9,10 +10,10 @@ function OpenInTracesButton({ onClick }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
 		onClick,
 		variant: "ghost",
-		size: "icon-md",
+		size: "icon-sm",
 		tooltip: "View in traces",
 		"aria-label": "View in traces",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.EyeIcon, {})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_TraceIcon.TraceIcon, {})
 	});
 }
 /** Icon button in a MetricsCard top bar that opens the Logs page scoped to
@@ -21,13 +22,52 @@ function OpenErrorsInLogsButton({ onClick }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
 		onClick,
 		variant: "ghost",
-		size: "icon-md",
+		size: "icon-sm",
 		tooltip: "View errors in logs",
 		"aria-label": "View errors in logs",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LogsIcon, {})
 	});
 }
+/** Icon button in a MetricsCard top bar that opens the Logs page scoped to
+*  the card's current dimensions, whatever their status. */
+function OpenInLogsButton({ onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		onClick,
+		variant: "ghost",
+		size: "icon-sm",
+		tooltip: "View in logs",
+		"aria-label": "View in logs",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LogsIcon, {})
+	});
+}
+/** Icon button in a MetricsCard top bar that opens the Spans page scoped to
+*  the card's current dimensions. */
+function OpenInSpansButton({ onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		onClick,
+		variant: "ghost",
+		size: "icon-sm",
+		tooltip: "View in spans",
+		"aria-label": "View in spans",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ListTreeIcon, {})
+	});
+}
+/** Icon button in a MetricsCard top bar that opens the Threads page scoped to
+*  the card's current dimensions. */
+function OpenInThreadsButton({ onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		onClick,
+		variant: "ghost",
+		size: "icon-sm",
+		tooltip: "View in threads",
+		"aria-label": "View in threads",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MessagesSquareIcon, {})
+	});
+}
 exports.OpenErrorsInLogsButton = OpenErrorsInLogsButton;
+exports.OpenInLogsButton = OpenInLogsButton;
+exports.OpenInSpansButton = OpenInSpansButton;
+exports.OpenInThreadsButton = OpenInThreadsButton;
 exports.OpenInTracesButton = OpenInTracesButton;
 
 //# sourceMappingURL=card-action-buttons.cjs.js.map

package/dist/domains/metrics/components/card-action-buttons.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-action-buttons.cjs.js","names":["Button","EyeIcon","LogsIcon"],"sources":["../../../../src/domains/metrics/components/card-action-buttons.tsx"],"sourcesContent":["import { EyeIcon, LogsIcon } from 'lucide-react';\nimport { Button } from '../../../ds/components/Button/Button';\n\ntype CardActionButtonProps = {\n  onClick: () => void;\n};\n\n/** Icon button in a MetricsCard top bar that opens the Traces page pre-filtered\n *  to whatever dimensions the card knows about. */\nexport function OpenInTracesButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button onClick={onClick} variant=\"ghost\" size=\"icon-md\" tooltip=\"View in traces\" aria-label=\"View in traces\">\n      <EyeIcon />\n    </Button>\n  );\n}\n\n/** Icon button in a MetricsCard top bar that opens the Logs page scoped to\n *  errors for the card's current dimensions. */\nexport function OpenErrorsInLogsButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button\n      onClick={onClick}\n      variant=\"ghost\"\n      size=\"icon-md\"\n      tooltip=\"View errors in logs\"\n      aria-label=\"View errors in logs\"\n    >\n      <LogsIcon />\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;AASA,SAAgB,mBAAmB,EAAE,WAAkC;CACrE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,QAAD;EAAiB;EAAS,SAAQ;EAAQ,MAAK;EAAU,SAAQ;EAAiB,cAAW;EAC3F,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,SAAD,CAAU,CAAA;CACJ,CAAA;AAEZ;;;AAIA,SAAgB,uBAAuB,EAAE,WAAkC;CACzE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,eAAAA,QAAD;EACW;EACT,SAAQ;EACR,MAAK;EACL,SAAQ;EACR,cAAW;EAEX,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,UAAD,CAAW,CAAA;CACL,CAAA;AAEZ"}
+{"version":3,"file":"card-action-buttons.cjs.js","names":["Button","TraceIcon","LogsIcon","ListTreeIcon","MessagesSquareIcon"],"sources":["../../../../src/domains/metrics/components/card-action-buttons.tsx"],"sourcesContent":["import { ListTreeIcon, LogsIcon, MessagesSquareIcon } from 'lucide-react';\nimport { Button } from '../../../ds/components/Button/Button';\nimport { TraceIcon } from '../../../ds/icons/TraceIcon';\n\ntype CardActionButtonProps = {\n  onClick: () => void;\n};\n\n/** Icon button in a MetricsCard top bar that opens the Traces page pre-filtered\n *  to whatever dimensions the card knows about. */\nexport function OpenInTracesButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button onClick={onClick} variant=\"ghost\" size=\"icon-sm\" tooltip=\"View in traces\" aria-label=\"View in traces\">\n      <TraceIcon />\n    </Button>\n  );\n}\n\n/** Icon button in a MetricsCard top bar that opens the Logs page scoped to\n *  errors for the card's current dimensions. */\nexport function OpenErrorsInLogsButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button\n      onClick={onClick}\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      tooltip=\"View errors in logs\"\n      aria-label=\"View errors in logs\"\n    >\n      <LogsIcon />\n    </Button>\n  );\n}\n\n/** Icon button in a MetricsCard top bar that opens the Logs page scoped to\n *  the card's current dimensions, whatever their status. */\nexport function OpenInLogsButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button onClick={onClick} variant=\"ghost\" size=\"icon-sm\" tooltip=\"View in logs\" aria-label=\"View in logs\">\n      <LogsIcon />\n    </Button>\n  );\n}\n\n/** Icon button in a MetricsCard top bar that opens the Spans page scoped to\n *  the card's current dimensions. */\nexport function OpenInSpansButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button onClick={onClick} variant=\"ghost\" size=\"icon-sm\" tooltip=\"View in spans\" aria-label=\"View in spans\">\n      <ListTreeIcon />\n    </Button>\n  );\n}\n\n/** Icon button in a MetricsCard top bar that opens the Threads page scoped to\n *  the card's current dimensions. */\nexport function OpenInThreadsButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button onClick={onClick} variant=\"ghost\" size=\"icon-sm\" tooltip=\"View in threads\" aria-label=\"View in threads\">\n      <MessagesSquareIcon />\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,mBAAmB,EAAE,WAAkC;CACrE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,QAAD;EAAiB;EAAS,SAAQ;EAAQ,MAAK;EAAU,SAAQ;EAAiB,cAAW;EAC3F,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,WAAD,CAAY,CAAA;CACN,CAAA;AAEZ;;;AAIA,SAAgB,uBAAuB,EAAE,WAAkC;CACzE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,eAAAA,QAAD;EACW;EACT,SAAQ;EACR,MAAK;EACL,SAAQ;EACR,cAAW;EAEX,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,UAAD,CAAW,CAAA;CACL,CAAA;AAEZ;;;AAIA,SAAgB,iBAAiB,EAAE,WAAkC;CACnE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,eAAAA,QAAD;EAAiB;EAAS,SAAQ;EAAQ,MAAK;EAAU,SAAQ;EAAe,cAAW;EACzF,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,UAAD,CAAW,CAAA;CACL,CAAA;AAEZ;;;AAIA,SAAgB,kBAAkB,EAAE,WAAkC;CACpE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,eAAAA,QAAD;EAAiB;EAAS,SAAQ;EAAQ,MAAK;EAAU,SAAQ;EAAgB,cAAW;EAC1F,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACG,aAAAA,cAAD,CAAe,CAAA;CACT,CAAA;AAEZ;;;AAIA,SAAgB,oBAAoB,EAAE,WAAkC;CACtE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACH,eAAAA,QAAD;EAAiB;EAAS,SAAQ;EAAQ,MAAK;EAAU,SAAQ;EAAkB,cAAW;EAC5F,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACI,aAAAA,oBAAD,CAAqB,CAAA;CACf,CAAA;AAEZ"}

package/dist/domains/metrics/components/card-action-buttons.es.js

@@ -1,6 +1,7 @@
 import { t as Button } from "../../../Button-Bw1e3ONi.js";
+import { TraceIcon } from "../../../icons/TraceIcon.es.js";
 import { jsx } from "react/jsx-runtime";
-import { EyeIcon, LogsIcon } from "lucide-react";
+import { ListTreeIcon, LogsIcon, MessagesSquareIcon } from "lucide-react";
 // src/domains/metrics/components/card-action-buttons.tsx
 /** Icon button in a MetricsCard top bar that opens the Traces page pre-filtered
 *  to whatever dimensions the card knows about. */
@@ -8,10 +9,10 @@ function OpenInTracesButton({ onClick }) {
 	return /* @__PURE__ */ jsx(Button, {
 		onClick,
 		variant: "ghost",
-		size: "icon-md",
+		size: "icon-sm",
 		tooltip: "View in traces",
 		"aria-label": "View in traces",
-		children: /* @__PURE__ */ jsx(EyeIcon, {})
+		children: /* @__PURE__ */ jsx(TraceIcon, {})
 	});
 }
 /** Icon button in a MetricsCard top bar that opens the Logs page scoped to
@@ -20,12 +21,48 @@ function OpenErrorsInLogsButton({ onClick }) {
 	return /* @__PURE__ */ jsx(Button, {
 		onClick,
 		variant: "ghost",
-		size: "icon-md",
+		size: "icon-sm",
 		tooltip: "View errors in logs",
 		"aria-label": "View errors in logs",
 		children: /* @__PURE__ */ jsx(LogsIcon, {})
 	});
 }
-export { OpenErrorsInLogsButton, OpenInTracesButton };
+/** Icon button in a MetricsCard top bar that opens the Logs page scoped to
+*  the card's current dimensions, whatever their status. */
+function OpenInLogsButton({ onClick }) {
+	return /* @__PURE__ */ jsx(Button, {
+		onClick,
+		variant: "ghost",
+		size: "icon-sm",
+		tooltip: "View in logs",
+		"aria-label": "View in logs",
+		children: /* @__PURE__ */ jsx(LogsIcon, {})
+	});
+}
+/** Icon button in a MetricsCard top bar that opens the Spans page scoped to
+*  the card's current dimensions. */
+function OpenInSpansButton({ onClick }) {
+	return /* @__PURE__ */ jsx(Button, {
+		onClick,
+		variant: "ghost",
+		size: "icon-sm",
+		tooltip: "View in spans",
+		"aria-label": "View in spans",
+		children: /* @__PURE__ */ jsx(ListTreeIcon, {})
+	});
+}
+/** Icon button in a MetricsCard top bar that opens the Threads page scoped to
+*  the card's current dimensions. */
+function OpenInThreadsButton({ onClick }) {
+	return /* @__PURE__ */ jsx(Button, {
+		onClick,
+		variant: "ghost",
+		size: "icon-sm",
+		tooltip: "View in threads",
+		"aria-label": "View in threads",
+		children: /* @__PURE__ */ jsx(MessagesSquareIcon, {})
+	});
+}
+export { OpenErrorsInLogsButton, OpenInLogsButton, OpenInSpansButton, OpenInThreadsButton, OpenInTracesButton };
 
 //# sourceMappingURL=card-action-buttons.es.js.map

package/dist/domains/metrics/components/card-action-buttons.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-action-buttons.es.js","names":[],"sources":["../../../../src/domains/metrics/components/card-action-buttons.tsx"],"sourcesContent":["import { EyeIcon, LogsIcon } from 'lucide-react';\nimport { Button } from '../../../ds/components/Button/Button';\n\ntype CardActionButtonProps = {\n  onClick: () => void;\n};\n\n/** Icon button in a MetricsCard top bar that opens the Traces page pre-filtered\n *  to whatever dimensions the card knows about. */\nexport function OpenInTracesButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button onClick={onClick} variant=\"ghost\" size=\"icon-md\" tooltip=\"View in traces\" aria-label=\"View in traces\">\n      <EyeIcon />\n    </Button>\n  );\n}\n\n/** Icon button in a MetricsCard top bar that opens the Logs page scoped to\n *  errors for the card's current dimensions. */\nexport function OpenErrorsInLogsButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button\n      onClick={onClick}\n      variant=\"ghost\"\n      size=\"icon-md\"\n      tooltip=\"View errors in logs\"\n      aria-label=\"View errors in logs\"\n    >\n      <LogsIcon />\n    </Button>\n  );\n}\n"],"mappings":";;;;;;AASA,SAAgB,mBAAmB,EAAE,WAAkC;CACrE,OACE,oBAAC,QAAD;EAAiB;EAAS,SAAQ;EAAQ,MAAK;EAAU,SAAQ;EAAiB,cAAW;EAC3F,UAAA,oBAAC,SAAD,CAAU,CAAA;CACJ,CAAA;AAEZ;;;AAIA,SAAgB,uBAAuB,EAAE,WAAkC;CACzE,OACE,oBAAC,QAAD;EACW;EACT,SAAQ;EACR,MAAK;EACL,SAAQ;EACR,cAAW;EAEX,UAAA,oBAAC,UAAD,CAAW,CAAA;CACL,CAAA;AAEZ"}
+{"version":3,"file":"card-action-buttons.es.js","names":[],"sources":["../../../../src/domains/metrics/components/card-action-buttons.tsx"],"sourcesContent":["import { ListTreeIcon, LogsIcon, MessagesSquareIcon } from 'lucide-react';\nimport { Button } from '../../../ds/components/Button/Button';\nimport { TraceIcon } from '../../../ds/icons/TraceIcon';\n\ntype CardActionButtonProps = {\n  onClick: () => void;\n};\n\n/** Icon button in a MetricsCard top bar that opens the Traces page pre-filtered\n *  to whatever dimensions the card knows about. */\nexport function OpenInTracesButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button onClick={onClick} variant=\"ghost\" size=\"icon-sm\" tooltip=\"View in traces\" aria-label=\"View in traces\">\n      <TraceIcon />\n    </Button>\n  );\n}\n\n/** Icon button in a MetricsCard top bar that opens the Logs page scoped to\n *  errors for the card's current dimensions. */\nexport function OpenErrorsInLogsButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button\n      onClick={onClick}\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      tooltip=\"View errors in logs\"\n      aria-label=\"View errors in logs\"\n    >\n      <LogsIcon />\n    </Button>\n  );\n}\n\n/** Icon button in a MetricsCard top bar that opens the Logs page scoped to\n *  the card's current dimensions, whatever their status. */\nexport function OpenInLogsButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button onClick={onClick} variant=\"ghost\" size=\"icon-sm\" tooltip=\"View in logs\" aria-label=\"View in logs\">\n      <LogsIcon />\n    </Button>\n  );\n}\n\n/** Icon button in a MetricsCard top bar that opens the Spans page scoped to\n *  the card's current dimensions. */\nexport function OpenInSpansButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button onClick={onClick} variant=\"ghost\" size=\"icon-sm\" tooltip=\"View in spans\" aria-label=\"View in spans\">\n      <ListTreeIcon />\n    </Button>\n  );\n}\n\n/** Icon button in a MetricsCard top bar that opens the Threads page scoped to\n *  the card's current dimensions. */\nexport function OpenInThreadsButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button onClick={onClick} variant=\"ghost\" size=\"icon-sm\" tooltip=\"View in threads\" aria-label=\"View in threads\">\n      <MessagesSquareIcon />\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;AAUA,SAAgB,mBAAmB,EAAE,WAAkC;CACrE,OACE,oBAAC,QAAD;EAAiB;EAAS,SAAQ;EAAQ,MAAK;EAAU,SAAQ;EAAiB,cAAW;EAC3F,UAAA,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;AAEZ;;;AAIA,SAAgB,uBAAuB,EAAE,WAAkC;CACzE,OACE,oBAAC,QAAD;EACW;EACT,SAAQ;EACR,MAAK;EACL,SAAQ;EACR,cAAW;EAEX,UAAA,oBAAC,UAAD,CAAW,CAAA;CACL,CAAA;AAEZ;;;AAIA,SAAgB,iBAAiB,EAAE,WAAkC;CACnE,OACE,oBAAC,QAAD;EAAiB;EAAS,SAAQ;EAAQ,MAAK;EAAU,SAAQ;EAAe,cAAW;EACzF,UAAA,oBAAC,UAAD,CAAW,CAAA;CACL,CAAA;AAEZ;;;AAIA,SAAgB,kBAAkB,EAAE,WAAkC;CACpE,OACE,oBAAC,QAAD;EAAiB;EAAS,SAAQ;EAAQ,MAAK;EAAU,SAAQ;EAAgB,cAAW;EAC1F,UAAA,oBAAC,cAAD,CAAe,CAAA;CACT,CAAA;AAEZ;;;AAIA,SAAgB,oBAAoB,EAAE,WAAkC;CACtE,OACE,oBAAC,QAAD;EAAiB;EAAS,SAAQ;EAAQ,MAAK;EAAU,SAAQ;EAAkB,cAAW;EAC5F,UAAA,oBAAC,oBAAD,CAAqB,CAAA;CACf,CAAA;AAEZ"}

package/dist/domains/metrics/components/chart-area.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MetricsCard = require("../../../MetricsCard-Dly_H3oX.cjs");
+const require_MetricsCard = require("../../../MetricsCard-CEB-f2sv.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/chart-area.tsx
 /** A card's chart or list, filling the card body; an empty range shows a message over it. */

package/dist/domains/metrics/components/chart-area.es.js

@@ -1,4 +1,4 @@
-import { t as MetricsCard } from "../../../MetricsCard-C9GWgT58.js";
+import { t as MetricsCard } from "../../../MetricsCard-M8awJ2B_.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/domains/metrics/components/chart-area.tsx
 /** A card's chart or list, filling the card body; an empty range shows a message over it. */

package/dist/domains/metrics/components/chart-card-error.cjs.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_Button = require("../../../Button-YQRflC47.cjs");
 const require_domains_auth_components_permission_denied = require("../../auth/components/permission-denied.cjs.js");
 const require_domains_auth_components_session_expired = require("../../auth/components/session-expired.cjs.js");
-const require_MetricsCard = require("../../../MetricsCard-Dly_H3oX.cjs");
+const require_MetricsCard = require("../../../MetricsCard-CEB-f2sv.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mastra_react_hooks_query = require("@mastra/react/hooks/query");
 let lucide_react = require("lucide-react");

package/dist/domains/metrics/components/chart-card-error.es.js

@@ -1,7 +1,7 @@
 import { t as Button } from "../../../Button-Bw1e3ONi.js";
 import { PermissionDenied } from "../../auth/components/permission-denied.es.js";
 import { SessionExpired } from "../../auth/components/session-expired.es.js";
-import { t as MetricsCard } from "../../../MetricsCard-C9GWgT58.js";
+import { t as MetricsCard } from "../../../MetricsCard-M8awJ2B_.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { is401UnauthorizedError, is403ForbiddenError } from "@mastra/react/hooks/query";
 import { RotateCcwIcon } from "lucide-react";

package/dist/domains/metrics/components/chart-card.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_utils = require("../../../utils-uDc1ofX1.cjs");
-const require_MetricsCard = require("../../../MetricsCard-Dly_H3oX.cjs");
+const require_MetricsCard = require("../../../MetricsCard-CEB-f2sv.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 // src/domains/metrics/components/chart-card.tsx
@@ -8,75 +8,76 @@ let lucide_react = require("lucide-react");
 * Pure layout for a metrics chart card. The body has a fixed height, so the loading,
 * error, empty and loaded states take the same room and nothing shifts around the card.
 */
-function ChartCard({ variant = "default", title, href, LinkComponent, titleMenu, total, isLoading = false, description, summary, actions, toolbar, isUpdating = false, bodyHeight = "fixed", className, children }) {
+function ChartCard({ variant = "default", title, href, LinkComponent, titleMenu, total, change, isLoading = false, actions, toolbar, isUpdating = false, bodyHeight = "fixed", className, children }) {
 	const fade = require_utils.cn("transition-opacity duration-200", isUpdating && "opacity-50");
 	const compact = variant === "compact";
+	const hero = variant === "hero";
+	const chart = !hero && bodyHeight === "fixed";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_MetricsCard.MetricsCard, {
 		className: require_utils.cn("min-h-0! min-w-0! grid-cols-1", compact && "h-84", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_MetricsCard.MetricsCard.TopBar, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartCardHeading, {
+			hero ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Headline, {
+				label: title,
+				value: typeof total === "string" ? total : "—",
+				change,
+				isLoading,
+				className: fade
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartCardHeading, {
 				title,
 				href,
 				LinkComponent,
-				description,
-				titleMenu,
-				compact
+				titleMenu
 			}),
 			actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Actions, {
-				reveal: "hover",
+				reveal: hero ? "always" : "hover",
+				className: require_utils.cn(hero && "my-0 self-center"),
 				children: actions
 			}),
-			compact && total !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Total, {
+			!hero && total !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Total, {
 				value: total,
 				isLoading,
 				className: fade
-			}),
-			!compact && summary && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_utils.cn("order-last flex w-24 shrink-0 justify-end", fade),
-				children: summary
 			})
 		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_MetricsCard.MetricsCard.Content, {
 			className: require_utils.cn("flex flex-col gap-4 overflow-visible", compact && "min-h-0"),
-			children: [toolbar, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_utils.cn("relative flex min-h-0 min-w-0 flex-col", compact ? "flex-1" : bodyHeight === "fit" ? "min-h-60" : "h-60", fade),
+			children: [toolbar || chart && toolbar !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": true,
+				className: "min-h-6"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_utils.cn("relative flex min-h-0 min-w-0 flex-col", bodyClass(variant, bodyHeight), fade),
 				children
 			})]
 		})]
 	});
 }
-/** The title: a view menu, a lone compact title, or the default title, each with the description on default cards. */
-function ChartCardHeading({ title, href, LinkComponent, description, titleMenu, compact }) {
-	if (titleMenu) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.TitleMenu, {
-			title,
-			...titleMenu
-		}), !compact && description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Description, { children: description })]
+/** The body's height: compact cards fill what the toolbar leaves; charts fill the card, at least 240px. */
+function bodyClass(variant, bodyHeight) {
+	if (variant === "compact") return "flex-1";
+	if (variant === "hero") return void 0;
+	if (bodyHeight === "fit") return "min-h-60";
+	return "min-h-60 flex-1";
+}
+/** The title: a view menu, a link to a fuller view, or plain. */
+function ChartCardHeading({ title, href, LinkComponent, titleMenu }) {
+	if (titleMenu) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.TitleMenu, {
+		title,
+		...titleMenu
 	});
-	if (href) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col items-start",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(compact ? "h3" : "h2", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartCardTitleLink, {
+	if (href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+		className: "flex",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartCardTitleLink, {
 			href,
 			LinkComponent,
-			medium: compact,
 			children: title
-		}) }), !compact && description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Description, { children: description })]
-	});
-	if (compact) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Title, {
-		as: "h3",
-		weight: "medium",
-		children: title
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.TitleAndDescription, {
-		title,
-		description
+		})
 	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Title, { children: title });
 }
 /** The title as a link to a fuller view, with an expand icon after it; hover fills its own box, not the row. */
-function ChartCardTitleLink({ href, LinkComponent, medium, children }) {
+function ChartCardTitleLink({ href, LinkComponent, children }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LinkComponent ?? "a", {
 		href,
-		className: require_utils.cn("-mx-1.5 -my-0.5 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-body text-foreground hover:bg-fill-subtle", "focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus focus-visible:outline-solid", medium && "font-medium"),
+		className: require_utils.cn("-mx-1.5 -my-0.5 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-body font-medium text-foreground hover:bg-fill-subtle", "focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus focus-visible:outline-solid"),
 		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Maximize2Icon, {
 			"aria-hidden": true,
 			className: "size-3.5 text-muted-foreground"

package/dist/domains/metrics/components/chart-card.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-card.cjs.js","names":["cn","MetricsCard","Maximize2Icon"],"sources":["../../../../src/domains/metrics/components/chart-card.tsx"],"sourcesContent":["import { Maximize2Icon } from 'lucide-react';\nimport type { ElementType, ReactNode } from 'react';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsCardTitleMenuProps } from '@/ds/components/MetricsCard';\nimport type { LinkComponentProps } from '@/lib/framework';\n\n/** What `LinkComponent` gets: anchor props, with `href` always set. */\ntype ChartCardLinkProps = LinkComponentProps & { href: string };\nimport { cn } from '@/lib/utils';\n\nexport type ChartCardProps = {\n  /**\n   * Card layout.\n   * - `default`: title and description, the summary top right, a 240px body.\n   * - `compact`: a one-line header (title, `total` on the right), and one card height, so cards\n   *   in a grid line up; the chart fills what the toolbar leaves. For small cards in a grid.\n   */\n  variant?: 'default' | 'compact';\n  title: string;\n  /**\n   * Makes the title a link, marked by an expand icon, to a fuller view of the chart (e.g. the\n   * chart in an explorer). Ignored with `titleMenu`.\n   */\n  href?: string;\n  /** Renders `href` links, e.g. the app's router link; it gets anchor props. Default `a`. */\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  /** Makes the title a dropdown of the card's views (e.g. by model, by provider). */\n  titleMenu?: Omit<MetricsCardTitleMenuProps<string>, 'title' | 'className'>;\n  /** Compact cards: the card's total, right of the title in the same type. */\n  total?: string;\n  /** Compact cards: a skeleton in place of `total`. */\n  isLoading?: boolean;\n  description?: string;\n  /** The headline number, top right: a `MetricsCard.Summary`. Its slot has a fixed width, so the title wraps the same loading or loaded. */\n  summary?: ReactNode;\n  /** Top-bar buttons revealed on hover, e.g. \"View in Traces\". */\n  actions?: ReactNode;\n  /** Tabs and legend above the body; they stay in every state. */\n  toolbar?: ReactNode;\n  /** Previous data stays on screen, dimmed, while a new range or filter loads. */\n  isUpdating?: boolean;\n  /**\n   * `fixed` (default): the body is one chart high in every state. `fit`: at least that high, and\n   * taller when the content needs it, for lists that grow with \"Show more\".\n   */\n  bodyHeight?: 'fixed' | 'fit';\n  className?: string;\n  children: ReactNode;\n};\n\n/**\n * Pure layout for a metrics chart card. The body has a fixed height, so the loading,\n * error, empty and loaded states take the same room and nothing shifts around the card.\n */\nexport function ChartCard({\n  variant = 'default',\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n  total,\n  isLoading = false,\n  description,\n  summary,\n  actions,\n  toolbar,\n  isUpdating = false,\n  bodyHeight = 'fixed',\n  className,\n  children,\n}: ChartCardProps) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  const compact = variant === 'compact';\n  return (\n    <MetricsCard className={cn('min-h-0! min-w-0! grid-cols-1', compact && 'h-84', className)}>\n      <MetricsCard.TopBar>\n        <ChartCardHeading\n          title={title}\n          href={href}\n          LinkComponent={LinkComponent}\n          description={description}\n          titleMenu={titleMenu}\n          compact={compact}\n        />\n        {actions && <MetricsCard.Actions reveal=\"hover\">{actions}</MetricsCard.Actions>}\n        {compact && total !== undefined && <MetricsCard.Total value={total} isLoading={isLoading} className={fade} />}\n        {!compact && summary && <div className={cn('order-last flex w-24 shrink-0 justify-end', fade)}>{summary}</div>}\n      </MetricsCard.TopBar>\n      <MetricsCard.Content className={cn('flex flex-col gap-4 overflow-visible', compact && 'min-h-0')}>\n        {toolbar}\n        <div\n          className={cn(\n            'relative flex min-h-0 min-w-0 flex-col',\n            compact ? 'flex-1' : bodyHeight === 'fit' ? 'min-h-60' : 'h-60',\n            fade,\n          )}\n        >\n          {children}\n        </div>\n      </MetricsCard.Content>\n    </MetricsCard>\n  );\n}\n\n/** The title: a view menu, a lone compact title, or the default title, each with the description on default cards. */\nfunction ChartCardHeading({\n  title,\n  href,\n  LinkComponent,\n  description,\n  titleMenu,\n  compact,\n}: Pick<ChartCardProps, 'title' | 'href' | 'LinkComponent' | 'description' | 'titleMenu'> & { compact: boolean }) {\n  if (titleMenu) {\n    return (\n      <div className=\"flex flex-col\">\n        <MetricsCard.TitleMenu title={title} {...titleMenu} />\n        {!compact && description && <MetricsCard.Description>{description}</MetricsCard.Description>}\n      </div>\n    );\n  }\n  if (href) {\n    const Heading = compact ? 'h3' : 'h2';\n    return (\n      <div className=\"flex flex-col items-start\">\n        <Heading>\n          <ChartCardTitleLink href={href} LinkComponent={LinkComponent} medium={compact}>\n            {title}\n          </ChartCardTitleLink>\n        </Heading>\n        {!compact && description && <MetricsCard.Description>{description}</MetricsCard.Description>}\n      </div>\n    );\n  }\n  if (compact) {\n    return (\n      <MetricsCard.Title as=\"h3\" weight=\"medium\">\n        {title}\n      </MetricsCard.Title>\n    );\n  }\n  return <MetricsCard.TitleAndDescription title={title} description={description} />;\n}\n\n/** The title as a link to a fuller view, with an expand icon after it; hover fills its own box, not the row. */\nfunction ChartCardTitleLink({\n  href,\n  LinkComponent,\n  medium,\n  children,\n}: {\n  href: string;\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  medium: boolean;\n  children: string;\n}) {\n  const Anchor = LinkComponent ?? 'a';\n  return (\n    <Anchor\n      href={href}\n      className={cn(\n        '-mx-1.5 -my-0.5 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-body text-foreground hover:bg-fill-subtle',\n        'focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus focus-visible:outline-solid',\n        medium && 'font-medium',\n      )}\n    >\n      {children}\n      <Maximize2Icon aria-hidden className=\"size-3.5 text-muted-foreground\" />\n    </Anchor>\n  );\n}\n"],"mappings":";;;;;;;;;;AAsDA,SAAgB,UAAU,EACxB,UAAU,WACV,OACA,MACA,eACA,WACA,OACA,YAAY,OACZ,aACA,SACA,SACA,SACA,aAAa,OACb,aAAa,SACb,WACA,YACiB;CACjB,MAAM,OAAOA,cAAAA,GAAG,mCAAmC,cAAc,YAAY;CAC7E,MAAM,UAAU,YAAY;CAC5B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,oBAAAA,aAAD;EAAa,WAAWD,cAAAA,GAAG,iCAAiC,WAAW,QAAQ,SAAS;EAAxF,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,oBAAAA,YAAY,QAAb,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;IACS;IACD;IACS;IACF;IACF;IACF;GACV,CAAA;GACA,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,SAAb;IAAqB,QAAO;IAAS,UAAA;GAA6B,CAAA;GAC7E,WAAW,UAAU,KAAA,KAAa,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,OAAb;IAAmB,OAAO;IAAkB;IAAW,WAAW;GAAO,CAAA;GAC3G,CAAC,WAAW,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAWD,cAAAA,GAAG,6CAA6C,IAAI;IAAI,UAAA;GAAa,CAAA;EAC3F,EAAA,CAAA,GACpB,iBAAA,GAAA,kBAAA,KAAA,CAACC,oBAAAA,YAAY,SAAb;GAAqB,WAAWD,cAAAA,GAAG,wCAAwC,WAAW,SAAS;GAA/F,UAAA,CACG,SACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAWA,cAAAA,GACT,0CACA,UAAU,WAAW,eAAe,QAAQ,aAAa,QACzD,IACF;IAEC;GACE,CAAA,CACc;EACV,CAAA,CAAA;;AAEjB;;AAGA,SAAS,iBAAiB,EACxB,OACA,MACA,eACA,aACA,WACA,WACgH;CAChH,IAAI,WACF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,WAAb;GAA8B;GAAO,GAAI;EAAY,CAAA,GACpD,CAAC,WAAW,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,aAAb,EAAA,UAA0B,YAAqC,CAAA,CACxF;;CAGT,IAAI,MAEF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAHY,UAAU,OAAO,MAG7B,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD;GAA0B;GAAqB;GAAe,QAAQ;GACnE,UAAA;EACiB,CAAA,EACb,CAAA,GACR,CAAC,WAAW,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,aAAb,EAAA,UAA0B,YAAqC,CAAA,CACxF;;CAGT,IAAI,SACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,OAAb;EAAmB,IAAG;EAAK,QAAO;EAC/B,UAAA;CACgB,CAAA;CAGvB,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,qBAAb;EAAwC;EAAoB;CAAc,CAAA;AACnF;;AAGA,SAAS,mBAAmB,EAC1B,MACA,eACA,QACA,YAMC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAFa,iBAAiB,KAE9B;EACQ;EACN,WAAWD,cAAAA,GACT,4HACA,0HACA,UAAU,aACZ;EANF,UAAA,CAQG,UACD,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,eAAD;GAAe,eAAA;GAAY,WAAU;EAAkC,CAAA,CACjE;;AAEZ"}
+{"version":3,"file":"chart-card.cjs.js","names":["cn","MetricsCard","Maximize2Icon"],"sources":["../../../../src/domains/metrics/components/chart-card.tsx"],"sourcesContent":["import { Maximize2Icon } from 'lucide-react';\nimport type { ElementType, ReactNode } from 'react';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsCardTitleMenuProps, MetricsCardTotalPart } from '@/ds/components/MetricsCard';\nimport type { LinkComponentProps } from '@/lib/framework';\n\n/** What `LinkComponent` gets: anchor props, with `href` always set. */\ntype ChartCardLinkProps = LinkComponentProps & { href: string };\nimport { cn } from '@/lib/utils';\n\nexport type ChartCardProps<V extends string = string> = {\n  /**\n   * Card layout. `default` and `compact` share one header: the title, and `total` on the right.\n   * - `default`: a 240px body.\n   * - `compact`: one card height, so cards in a grid line up; the chart fills what the toolbar\n   *   leaves. For small cards in a grid.\n   * - `hero`: one large chart that is the page's subject (an explorer): the title as a label over\n   *   a large `total`, with `change` beside it, and `actions` always shown. The body is as tall\n   *   as its content.\n   */\n  variant?: 'default' | 'compact' | 'hero';\n  title: string;\n  /**\n   * Makes the title a link, marked by an expand icon, to a fuller view of the chart (e.g. the\n   * chart in an explorer). Ignored with `titleMenu` and on `hero` cards.\n   */\n  href?: string;\n  /** Renders `href` links, e.g. the app's router link; it gets anchor props. Default `a`. */\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  /**\n   * Makes the title a dropdown of the card's views (e.g. \"Agent latency\", \"Tool latency\"), in\n   * place of tabs. `title` is the picked view's label. Ignored on `hero` cards.\n   */\n  titleMenu?: Omit<MetricsCardTitleMenuProps<V>, 'title' | 'className'>;\n  /**\n   * The card's headline number: right of the title, or the large value on `hero` cards. A card\n   * charting a few different things can pass one total each, marked with its series' color.\n   */\n  total?: string | readonly MetricsCardTotalPart[];\n  /** `hero` cards: the change against the previous period, e.g. \"+71.4%\". */\n  change?: string;\n  /** A skeleton in place of `total`. */\n  isLoading?: boolean;\n  /** Top-bar buttons, e.g. \"View in traces\": revealed on hover, except on `hero` cards. */\n  actions?: ReactNode;\n  /**\n   * Legend and controls above the body; they stay in every state. Pass `false` or `null` while\n   * there's nothing to show yet, and the row keeps its height.\n   */\n  toolbar?: ReactNode;\n  /** Previous data stays on screen, dimmed, while a new range or filter loads. */\n  isUpdating?: boolean;\n  /**\n   * `default` cards. `fixed` (default): a chart, at least 240px high in every state and filling\n   * the card when the card is taller (a grid row). `fit`: at least that high, and as tall as the\n   * content needs, for lists that grow with \"Show more\".\n   */\n  bodyHeight?: 'fixed' | 'fit';\n  className?: string;\n  children: ReactNode;\n};\n\n/**\n * Pure layout for a metrics chart card. The body has a fixed height, so the loading,\n * error, empty and loaded states take the same room and nothing shifts around the card.\n */\nexport function ChartCard<V extends string = string>({\n  variant = 'default',\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n  total,\n  change,\n  isLoading = false,\n  actions,\n  toolbar,\n  isUpdating = false,\n  bodyHeight = 'fixed',\n  className,\n  children,\n}: ChartCardProps<V>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  const compact = variant === 'compact';\n  const hero = variant === 'hero';\n  const chart = !hero && bodyHeight === 'fixed';\n  return (\n    <MetricsCard className={cn('min-h-0! min-w-0! grid-cols-1', compact && 'h-84', className)}>\n      <MetricsCard.TopBar>\n        {hero ? (\n          <MetricsCard.Headline\n            label={title}\n            value={typeof total === 'string' ? total : '—'}\n            change={change}\n            isLoading={isLoading}\n            className={fade}\n          />\n        ) : (\n          <ChartCardHeading title={title} href={href} LinkComponent={LinkComponent} titleMenu={titleMenu} />\n        )}\n        {actions && (\n          <MetricsCard.Actions reveal={hero ? 'always' : 'hover'} className={cn(hero && 'my-0 self-center')}>\n            {actions}\n          </MetricsCard.Actions>\n        )}\n        {!hero && total !== undefined && <MetricsCard.Total value={total} isLoading={isLoading} className={fade} />}\n      </MetricsCard.TopBar>\n      <MetricsCard.Content className={cn('flex flex-col gap-4 overflow-visible', compact && 'min-h-0')}>\n        {/* A card with a toolbar keeps its row while the toolbar is empty (`false` or `null` while\n            loading, empty or on error), so its plot starts where its neighbours' do. A card that\n            passes no toolbar (a legend drawn by the chart itself) gets no row. */}\n        {toolbar || (chart && toolbar !== undefined && <div aria-hidden className=\"min-h-6\" />)}\n        <div\n          className={cn(\n            'relative flex min-h-0 min-w-0 flex-col',\n            // A chart fills the card, so a card stretched to its row's height draws a taller chart, not a gap.\n            bodyClass(variant, bodyHeight),\n            fade,\n          )}\n        >\n          {children}\n        </div>\n      </MetricsCard.Content>\n    </MetricsCard>\n  );\n}\n\n/** The body's height: compact cards fill what the toolbar leaves; charts fill the card, at least 240px. */\nfunction bodyClass(variant: ChartCardProps['variant'], bodyHeight: ChartCardProps['bodyHeight']) {\n  if (variant === 'compact') return 'flex-1';\n  if (variant === 'hero') return undefined;\n  if (bodyHeight === 'fit') return 'min-h-60';\n  return 'min-h-60 flex-1';\n}\n\n/** The title: a view menu, a link to a fuller view, or plain. */\nfunction ChartCardHeading<V extends string>({\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n}: Pick<ChartCardProps<V>, 'title' | 'href' | 'LinkComponent' | 'titleMenu'>) {\n  if (titleMenu) return <MetricsCard.TitleMenu title={title} {...titleMenu} />;\n  if (href) {\n    return (\n      <h3 className=\"flex\">\n        <ChartCardTitleLink href={href} LinkComponent={LinkComponent}>\n          {title}\n        </ChartCardTitleLink>\n      </h3>\n    );\n  }\n  return <MetricsCard.Title>{title}</MetricsCard.Title>;\n}\n\n/** The title as a link to a fuller view, with an expand icon after it; hover fills its own box, not the row. */\nfunction ChartCardTitleLink({\n  href,\n  LinkComponent,\n  children,\n}: {\n  href: string;\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  children: string;\n}) {\n  const Anchor = LinkComponent ?? 'a';\n  return (\n    <Anchor\n      href={href}\n      className={cn(\n        '-mx-1.5 -my-0.5 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-body font-medium text-foreground hover:bg-fill-subtle',\n        'focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus focus-visible:outline-solid',\n      )}\n    >\n      {children}\n      <Maximize2Icon aria-hidden className=\"size-3.5 text-muted-foreground\" />\n    </Anchor>\n  );\n}\n"],"mappings":";;;;;;;;;;AAkEA,SAAgB,UAAqC,EACnD,UAAU,WACV,OACA,MACA,eACA,WACA,OACA,QACA,YAAY,OACZ,SACA,SACA,aAAa,OACb,aAAa,SACb,WACA,YACoB;CACpB,MAAM,OAAOA,cAAAA,GAAG,mCAAmC,cAAc,YAAY;CAC7E,MAAM,UAAU,YAAY;CAC5B,MAAM,OAAO,YAAY;CACzB,MAAM,QAAQ,CAAC,QAAQ,eAAe;CACtC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,oBAAAA,aAAD;EAAa,WAAWD,cAAAA,GAAG,iCAAiC,WAAW,QAAQ,SAAS;EAAxF,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,oBAAAA,YAAY,QAAb,EAAA,UAAA;GACG,OACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,UAAb;IACE,OAAO;IACP,OAAO,OAAO,UAAU,WAAW,QAAQ;IACnC;IACG;IACX,WAAW;GACZ,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;IAAyB;IAAa;IAAqB;IAA0B;GAAY,CAAA;GAElG,WACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,SAAb;IAAqB,QAAQ,OAAO,WAAW;IAAS,WAAWD,cAAAA,GAAG,QAAQ,kBAAkB;IAC7F,UAAA;GACkB,CAAA;GAEtB,CAAC,QAAQ,UAAU,KAAA,KAAa,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,OAAb;IAAmB,OAAO;IAAkB;IAAW,WAAW;GAAO,CAAA;EACxF,EAAA,CAAA,GACpB,iBAAA,GAAA,kBAAA,KAAA,CAACA,oBAAAA,YAAY,SAAb;GAAqB,WAAWD,cAAAA,GAAG,wCAAwC,WAAW,SAAS;GAA/F,UAAA,CAIG,WAAY,SAAS,YAAY,KAAA,KAAa,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,eAAA;IAAY,WAAU;GAAW,CAAA,GACrF,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAWA,cAAAA,GACT,0CAEA,UAAU,SAAS,UAAU,GAC7B,IACF;IAEC;GACE,CAAA,CACc;EACV,CAAA,CAAA;;AAEjB;;AAGA,SAAS,UAAU,SAAoC,YAA0C;CAC/F,IAAI,YAAY,WAAW,OAAO;CAClC,IAAI,YAAY,QAAQ,OAAO,KAAA;CAC/B,IAAI,eAAe,OAAO,OAAO;CACjC,OAAO;AACT;;AAGA,SAAS,iBAAmC,EAC1C,OACA,MACA,eACA,aAC4E;CAC5E,IAAI,WAAW,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,WAAb;EAA8B;EAAO,GAAI;CAAY,CAAA;CAC3E,IAAI,MACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,WAAU;EACZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD;GAA0B;GAAqB;GAC5C,UAAA;EACiB,CAAA;CAClB,CAAA;CAGR,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,OAAb,EAAA,UAAoB,MAAyB,CAAA;AACtD;;AAGA,SAAS,mBAAmB,EAC1B,MACA,eACA,YAKC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAFa,iBAAiB,KAE9B;EACQ;EACN,WAAWD,cAAAA,GACT,wIACA,wHACF;EALF,UAAA,CAOG,UACD,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,eAAD;GAAe,eAAA;GAAY,WAAU;EAAkC,CAAA,CACjE;;AAEZ"}

package/dist/domains/metrics/components/chart-card.es.js

@@ -1,5 +1,5 @@
 import { t as cn } from "../../../utils-DQx8TpNT.js";
-import { t as MetricsCard } from "../../../MetricsCard-C9GWgT58.js";
+import { t as MetricsCard } from "../../../MetricsCard-M8awJ2B_.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Maximize2Icon } from "lucide-react";
 // src/domains/metrics/components/chart-card.tsx
@@ -7,75 +7,76 @@ import { Maximize2Icon } from "lucide-react";
 * Pure layout for a metrics chart card. The body has a fixed height, so the loading,
 * error, empty and loaded states take the same room and nothing shifts around the card.
 */
-function ChartCard({ variant = "default", title, href, LinkComponent, titleMenu, total, isLoading = false, description, summary, actions, toolbar, isUpdating = false, bodyHeight = "fixed", className, children }) {
+function ChartCard({ variant = "default", title, href, LinkComponent, titleMenu, total, change, isLoading = false, actions, toolbar, isUpdating = false, bodyHeight = "fixed", className, children }) {
 	const fade = cn("transition-opacity duration-200", isUpdating && "opacity-50");
 	const compact = variant === "compact";
+	const hero = variant === "hero";
+	const chart = !hero && bodyHeight === "fixed";
 	return /* @__PURE__ */ jsxs(MetricsCard, {
 		className: cn("min-h-0! min-w-0! grid-cols-1", compact && "h-84", className),
 		children: [/* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
-			/* @__PURE__ */ jsx(ChartCardHeading, {
+			hero ? /* @__PURE__ */ jsx(MetricsCard.Headline, {
+				label: title,
+				value: typeof total === "string" ? total : "—",
+				change,
+				isLoading,
+				className: fade
+			}) : /* @__PURE__ */ jsx(ChartCardHeading, {
 				title,
 				href,
 				LinkComponent,
-				description,
-				titleMenu,
-				compact
+				titleMenu
 			}),
 			actions && /* @__PURE__ */ jsx(MetricsCard.Actions, {
-				reveal: "hover",
+				reveal: hero ? "always" : "hover",
+				className: cn(hero && "my-0 self-center"),
 				children: actions
 			}),
-			compact && total !== void 0 && /* @__PURE__ */ jsx(MetricsCard.Total, {
+			!hero && total !== void 0 && /* @__PURE__ */ jsx(MetricsCard.Total, {
 				value: total,
 				isLoading,
 				className: fade
-			}),
-			!compact && summary && /* @__PURE__ */ jsx("div", {
-				className: cn("order-last flex w-24 shrink-0 justify-end", fade),
-				children: summary
 			})
 		] }), /* @__PURE__ */ jsxs(MetricsCard.Content, {
 			className: cn("flex flex-col gap-4 overflow-visible", compact && "min-h-0"),
-			children: [toolbar, /* @__PURE__ */ jsx("div", {
-				className: cn("relative flex min-h-0 min-w-0 flex-col", compact ? "flex-1" : bodyHeight === "fit" ? "min-h-60" : "h-60", fade),
+			children: [toolbar || chart && toolbar !== void 0 && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "min-h-6"
+			}), /* @__PURE__ */ jsx("div", {
+				className: cn("relative flex min-h-0 min-w-0 flex-col", bodyClass(variant, bodyHeight), fade),
 				children
 			})]
 		})]
 	});
 }
-/** The title: a view menu, a lone compact title, or the default title, each with the description on default cards. */
-function ChartCardHeading({ title, href, LinkComponent, description, titleMenu, compact }) {
-	if (titleMenu) return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col",
-		children: [/* @__PURE__ */ jsx(MetricsCard.TitleMenu, {
-			title,
-			...titleMenu
-		}), !compact && description && /* @__PURE__ */ jsx(MetricsCard.Description, { children: description })]
+/** The body's height: compact cards fill what the toolbar leaves; charts fill the card, at least 240px. */
+function bodyClass(variant, bodyHeight) {
+	if (variant === "compact") return "flex-1";
+	if (variant === "hero") return void 0;
+	if (bodyHeight === "fit") return "min-h-60";
+	return "min-h-60 flex-1";
+}
+/** The title: a view menu, a link to a fuller view, or plain. */
+function ChartCardHeading({ title, href, LinkComponent, titleMenu }) {
+	if (titleMenu) return /* @__PURE__ */ jsx(MetricsCard.TitleMenu, {
+		title,
+		...titleMenu
 	});
-	if (href) return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col items-start",
-		children: [/* @__PURE__ */ jsx(compact ? "h3" : "h2", { children: /* @__PURE__ */ jsx(ChartCardTitleLink, {
+	if (href) return /* @__PURE__ */ jsx("h3", {
+		className: "flex",
+		children: /* @__PURE__ */ jsx(ChartCardTitleLink, {
 			href,
 			LinkComponent,
-			medium: compact,
 			children: title
-		}) }), !compact && description && /* @__PURE__ */ jsx(MetricsCard.Description, { children: description })]
-	});
-	if (compact) return /* @__PURE__ */ jsx(MetricsCard.Title, {
-		as: "h3",
-		weight: "medium",
-		children: title
-	});
-	return /* @__PURE__ */ jsx(MetricsCard.TitleAndDescription, {
-		title,
-		description
+		})
 	});
+	return /* @__PURE__ */ jsx(MetricsCard.Title, { children: title });
 }
 /** The title as a link to a fuller view, with an expand icon after it; hover fills its own box, not the row. */
-function ChartCardTitleLink({ href, LinkComponent, medium, children }) {
+function ChartCardTitleLink({ href, LinkComponent, children }) {
 	return /* @__PURE__ */ jsxs(LinkComponent ?? "a", {
 		href,
-		className: cn("-mx-1.5 -my-0.5 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-body text-foreground hover:bg-fill-subtle", "focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus focus-visible:outline-solid", medium && "font-medium"),
+		className: cn("-mx-1.5 -my-0.5 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-body font-medium text-foreground hover:bg-fill-subtle", "focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus focus-visible:outline-solid"),
 		children: [children, /* @__PURE__ */ jsx(Maximize2Icon, {
 			"aria-hidden": true,
 			className: "size-3.5 text-muted-foreground"