@mastra/playground-ui 61.0.0 → 62.0.0-alpha.1

package/dist/metrics-kpi-card-B-CKwzcj.cjs

@@ -0,0 +1,173 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const Badge = require('./Badge-BF6FbLH_.cjs');
+const tooltip = require('./tooltip-C4txPRSa.cjs');
+const Txt = require('./Txt-DXjXpX9r.cjs');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+const skeletonText = require('./skeleton-text-BIxW9ohx.cjs');
+const spinner = require('./spinner-BW4nHg_A.cjs');
+const Card = require('./Card-RlL14eS5.cjs');
+const skeleton = require('./skeleton-bUFvB8ok.cjs');
+
+const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+const isFlat = (changePct) => Math.abs(changePct) < 0.05;
+function changeVariant(changePct, lowerIsBetter) {
+  if (isFlat(changePct)) return "neutral";
+  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;
+  return isGood ? "success" : "destructive";
+}
+function formatChange(changePct) {
+  if (isFlat(changePct)) return "0%";
+  if (changePct >= 1e3) return `×${compact.format(1 + changePct / 100)}`;
+  const digits = Math.abs(changePct) < 10 ? 1 : 0;
+  return `${changePct > 0 ? "+" : ""}${changePct.toFixed(digits)}%`;
+}
+function MetricsKpiCardChange({
+  changePct,
+  comparison = "vs prior period",
+  prevValue,
+  lowerIsBetter,
+  caption = false,
+  className
+}) {
+  const flat = isFlat(changePct);
+  const Icon = changePct >= 0 ? lucideReact.ArrowUpRightIcon : lucideReact.ArrowDownRightIcon;
+  const formattedChange = formatChange(changePct);
+  const description = prevValue ? `${comparison} (${prevValue})` : comparison;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex items-center gap-1.5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipTrigger, { render: /* @__PURE__ */ jsxRuntime.jsx("span", { tabIndex: 0, className: "inline-flex rounded-full" }), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Badge.Badge,
+          {
+            variant: changeVariant(changePct, lowerIsBetter),
+            emphasis: "strong",
+            size: "xs",
+            icon: flat ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+            className: "tabular-nums",
+            "aria-hidden": "true",
+            children: formattedChange
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `${formattedChange} ${description}` })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: description })
+    ] }),
+    caption ? /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "faint", "aria-hidden": "true", children: comparison }) : null
+  ] });
+}
+
+function MetricsKpiCardError({
+  message = "Failed to load data",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", className: utils_cn.cn("text-destructive-foreground", className), children: message });
+}
+
+function MetricsKpiCardFooter({
+  detail,
+  prevValue,
+  isLoading = false,
+  className
+}) {
+  const frame = utils_cn.cn("mt-1 flex items-center justify-between gap-2 border-t border-border pt-2", className);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: frame, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeletonText.SkeletonText, { className: "w-24" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeletonText.SkeletonText, { className: "w-14" })
+    ] });
+  }
+  if (detail == null || detail === false || detail === "") return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: frame, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body-sm", tone: "muted", className: "min-w-0 truncate", children: detail }),
+    prevValue && /* @__PURE__ */ jsxRuntime.jsxs(Txt.Txt, { as: "span", variant: "body-sm", tone: "muted", className: "shrink-0 tabular-nums", children: [
+      "vs ",
+      prevValue
+    ] })
+  ] });
+}
+
+function MetricsKpiCardHeader({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex flex-wrap items-center gap-x-2 gap-y-1", className), children });
+}
+
+function MetricsKpiCardLabel({
+  children,
+  icon,
+  className
+}) {
+  if (!icon) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "subheading", tone: "ink", className, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils_cn.cn("flex items-center justify-between gap-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "subheading", tone: "ink", children }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground [&>svg]:size-4", children: icon })
+  ] });
+}
+
+function MetricsKpiCardLoading({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", className, children: /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "md", variant: "pulse", className: "text-placeholder" }) });
+}
+
+function MetricsKpiCardNoChange({
+  message = "No previous value to compare",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "faint", className, children: message });
+}
+
+function MetricsKpiCardNoData({ message = "No data yet", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "faint", className, children: message });
+}
+
+function MetricsKpiCardPrev({ value, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Txt.Txt,
+    {
+      as: "span",
+      variant: "body-sm",
+      tone: "muted",
+      title: `vs ${value}`,
+      className: utils_cn.cn("ml-auto min-w-0 shrink! truncate tabular-nums", className),
+      children: [
+        "vs ",
+        value
+      ]
+    }
+  );
+}
+
+function MetricsKpiCardRoot({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Card.Card, { className: utils_cn.cn("min-w-72 flex-1 px-4 py-3", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1.5", children }) });
+}
+
+function MetricsKpiCardValue({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("strong", { className: utils_cn.cn("text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]", className), children });
+}
+
+function MetricsKpiCardValueRow({
+  children,
+  isLoading = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex min-h-6 items-center gap-2 whitespace-nowrap *:shrink-0", className), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-20" }) : children });
+}
+
+const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
+  Header: MetricsKpiCardHeader,
+  Label: MetricsKpiCardLabel,
+  ValueRow: MetricsKpiCardValueRow,
+  Value: MetricsKpiCardValue,
+  Change: MetricsKpiCardChange,
+  NoChange: MetricsKpiCardNoChange,
+  NoData: MetricsKpiCardNoData,
+  Error: MetricsKpiCardError,
+  Loading: MetricsKpiCardLoading,
+  Footer: MetricsKpiCardFooter,
+  Prev: MetricsKpiCardPrev
+});
+
+exports.MetricsKpiCard = MetricsKpiCard;
+//# sourceMappingURL=metrics-kpi-card-B-CKwzcj.cjs.map

package/dist/metrics-kpi-card-B-CKwzcj.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpi-card-B-CKwzcj.cjs","sources":["../src/ds/components/MetricsKpiCard/metrics-kpi-card-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-error.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-footer.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-header.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-label.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-loading.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-data.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-prev.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value-row.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card.tsx"],"sourcesContent":["import { ArrowDownRightIcon, ArrowUpRightIcon } from 'lucide-react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\n// A change that rounds to 0.0% is no change: a neutral badge, no arrow.\nconst isFlat = (changePct: number) => Math.abs(changePct) < 0.05;\n\n// Green when the value moved the good way, red when it moved the bad way.\nfunction changeVariant(changePct: number, lowerIsBetter?: boolean) {\n  if (isFlat(changePct)) return 'neutral';\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n  return isGood ? 'success' : 'destructive';\n}\n\n// Past +1000% a percentage is unreadable, so show how many times bigger the value got instead.\nfunction formatChange(changePct: number) {\n  if (isFlat(changePct)) return '0%';\n  if (changePct >= 1000) return `×${compact.format(1 + changePct / 100)}`;\n  const digits = Math.abs(changePct) < 10 ? 1 : 0;\n  return `${changePct > 0 ? '+' : ''}${changePct.toFixed(digits)}%`;\n}\n\nexport function MetricsKpiCardChange({\n  changePct,\n  comparison = 'vs prior period',\n  prevValue,\n  lowerIsBetter,\n  caption = false,\n  className,\n}: {\n  changePct: number;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". Shown on hover. */\n  comparison?: string;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  /** Show the comparison as inline text. Off by default: pair the badge with\n   *  `MetricsKpiCard.Footer`, which shows the prior value itself. */\n  caption?: boolean;\n  className?: string;\n}) {\n  const flat = isFlat(changePct);\n  const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;\n  const formattedChange = formatChange(changePct);\n  const description = prevValue ? `${comparison} (${prevValue})` : comparison;\n\n  return (\n    <div className={cn('flex items-center gap-1.5', className)}>\n      <Tooltip>\n        <TooltipTrigger render={<span tabIndex={0} className=\"inline-flex rounded-full\" />}>\n          <Badge\n            variant={changeVariant(changePct, lowerIsBetter)}\n            emphasis=\"strong\"\n            size=\"xs\"\n            icon={flat ? undefined : <Icon />}\n            className=\"tabular-nums\"\n            aria-hidden=\"true\"\n          >\n            {formattedChange}\n          </Badge>\n          <span className=\"sr-only\">{`${formattedChange} ${description}`}</span>\n        </TooltipTrigger>\n        <TooltipContent>{description}</TooltipContent>\n      </Tooltip>\n      {caption ? (\n        <Txt as=\"span\" variant=\"meta\" tone=\"faint\" aria-hidden=\"true\">\n          {comparison}\n        </Txt>\n      ) : null}\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" className={cn('text-destructive-foreground', className)}>\n      {message}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { SkeletonText } from '@/ds/components/Skeleton';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/**\n * Bottom row under a hairline: one line of context on the left (e.g. \"1.3K server errors\")\n * and the prior period's value on the right. Only worth its hairline when there is a detail\n * line; a card with just a prior value puts it in the value row (`MetricsKpiCard.Prev`).\n */\nexport function MetricsKpiCardFooter({\n  detail,\n  prevValue,\n  isLoading = false,\n  className,\n}: {\n  detail: ReactNode;\n  prevValue?: string;\n  /** Skeletons in the detail's and prior value's line boxes, so the card keeps its height. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  const frame = cn('mt-1 flex items-center justify-between gap-2 border-t border-border pt-2', className);\n  if (isLoading) {\n    return (\n      <div className={frame}>\n        <SkeletonText className=\"w-24\" />\n        <SkeletonText className=\"w-14\" />\n      </div>\n    );\n  }\n  if (detail == null || detail === false || detail === '') return null;\n  return (\n    <div className={frame}>\n      <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"min-w-0 truncate\">\n        {detail}\n      </Txt>\n      {prevValue && (\n        <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n          vs {prevValue}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardHeader({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex flex-wrap items-center gap-x-2 gap-y-1', className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({\n  children,\n  icon,\n  className,\n}: {\n  children: string;\n  /** Optional glyph shown at the far end of the label row (e.g. a lucide icon). */\n  icon?: ReactNode;\n  className?: string;\n}) {\n  if (!icon) {\n    return (\n      <Txt as=\"span\" variant=\"subheading\" tone=\"ink\" className={className}>\n        {children}\n      </Txt>\n    );\n  }\n  return (\n    <span className={cn('flex items-center justify-between gap-2', className)}>\n      <Txt as=\"span\" variant=\"subheading\" tone=\"ink\">\n        {children}\n      </Txt>\n      <span aria-hidden className=\"shrink-0 text-muted-foreground [&>svg]:size-4\">\n        {icon}\n      </span>\n    </span>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <Txt as=\"span\" className={className}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/**\n * The prior period's value, pushed to the end of the value row. Use it when the card has\n * no detail line; with one, pass `prevValue` to `MetricsKpiCard.Footer` instead.\n */\nexport function MetricsKpiCardPrev({ value, className }: { value: string; className?: string }) {\n  return (\n    <Txt\n      as=\"span\"\n      variant=\"body-sm\"\n      tone=\"muted\"\n      title={`vs ${value}`}\n      // The value row keeps its children from shrinking; the prior value is the one part that\n      // may give way in a narrow card, truncating with the full text in the title.\n      className={cn('ml-auto min-w-0 shrink! truncate tabular-nums', className)}\n    >\n      vs {value}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <Card className={cn('min-w-72 flex-1 px-4 py-3', className)}>\n      <div className=\"grid gap-1.5\">{children}</div>\n    </Card>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <strong className={cn('text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]', className)}>\n      {children}\n    </strong>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValueRow({\n  children,\n  isLoading = false,\n  className,\n}: {\n  children?: ReactNode;\n  /** A value-sized skeleton in place of the value and its change badge. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex min-h-6 items-center gap-2 whitespace-nowrap *:shrink-0', className)}>\n      {isLoading ? <Skeleton className=\"h-6 w-20\" /> : children}\n    </div>\n  );\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\nimport { MetricsKpiCardFooter } from './metrics-kpi-card-footer';\nimport { MetricsKpiCardHeader } from './metrics-kpi-card-header';\nimport { MetricsKpiCardLabel } from './metrics-kpi-card-label';\nimport { MetricsKpiCardLoading } from './metrics-kpi-card-loading';\nimport { MetricsKpiCardNoChange } from './metrics-kpi-card-no-change';\nimport { MetricsKpiCardNoData } from './metrics-kpi-card-no-data';\nimport { MetricsKpiCardPrev } from './metrics-kpi-card-prev';\nimport { MetricsKpiCardRoot } from './metrics-kpi-card-root';\nimport { MetricsKpiCardValue } from './metrics-kpi-card-value';\nimport { MetricsKpiCardValueRow } from './metrics-kpi-card-value-row';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Header: MetricsKpiCardHeader,\n  Label: MetricsKpiCardLabel,\n  ValueRow: MetricsKpiCardValueRow,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n  Footer: MetricsKpiCardFooter,\n  Prev: MetricsKpiCardPrev,\n});\n"],"names":["ArrowUpRightIcon","ArrowDownRightIcon","cn","jsxs","Tooltip","TooltipTrigger","jsx","Badge","TooltipContent","Txt","SkeletonText","Spinner","Card","Skeleton"],"mappings":"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"}

package/dist/metrics-kpi-card-gvgEnnuU.js

@@ -0,0 +1,171 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowUpRightIcon, ArrowDownRightIcon } from 'lucide-react';
+import { B as Badge } from './Badge-3-G2I_cx.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-CCZcMbgy.js';
+import { T as Txt } from './Txt-BuzYj7Vy.js';
+import { c as cn } from './cn-coERSHz5.js';
+import { S as SkeletonText } from './skeleton-text-1EIyq68x.js';
+import { S as Spinner } from './spinner-CFtgt3oI.js';
+import { C as Card } from './Card-BQtRz0KD.js';
+import { S as Skeleton } from './skeleton-Bjxvf3Y-.js';
+
+const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+const isFlat = (changePct) => Math.abs(changePct) < 0.05;
+function changeVariant(changePct, lowerIsBetter) {
+  if (isFlat(changePct)) return "neutral";
+  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;
+  return isGood ? "success" : "destructive";
+}
+function formatChange(changePct) {
+  if (isFlat(changePct)) return "0%";
+  if (changePct >= 1e3) return `×${compact.format(1 + changePct / 100)}`;
+  const digits = Math.abs(changePct) < 10 ? 1 : 0;
+  return `${changePct > 0 ? "+" : ""}${changePct.toFixed(digits)}%`;
+}
+function MetricsKpiCardChange({
+  changePct,
+  comparison = "vs prior period",
+  prevValue,
+  lowerIsBetter,
+  caption = false,
+  className
+}) {
+  const flat = isFlat(changePct);
+  const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;
+  const formattedChange = formatChange(changePct);
+  const description = prevValue ? `${comparison} (${prevValue})` : comparison;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", className), children: [
+    /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxs(TooltipTrigger, { render: /* @__PURE__ */ jsx("span", { tabIndex: 0, className: "inline-flex rounded-full" }), children: [
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: changeVariant(changePct, lowerIsBetter),
+            emphasis: "strong",
+            size: "xs",
+            icon: flat ? void 0 : /* @__PURE__ */ jsx(Icon, {}),
+            className: "tabular-nums",
+            "aria-hidden": "true",
+            children: formattedChange
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: `${formattedChange} ${description}` })
+      ] }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: description })
+    ] }),
+    caption ? /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "faint", "aria-hidden": "true", children: comparison }) : null
+  ] });
+}
+
+function MetricsKpiCardError({
+  message = "Failed to load data",
+  className
+}) {
+  return /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", className: cn("text-destructive-foreground", className), children: message });
+}
+
+function MetricsKpiCardFooter({
+  detail,
+  prevValue,
+  isLoading = false,
+  className
+}) {
+  const frame = cn("mt-1 flex items-center justify-between gap-2 border-t border-border pt-2", className);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: frame, children: [
+      /* @__PURE__ */ jsx(SkeletonText, { className: "w-24" }),
+      /* @__PURE__ */ jsx(SkeletonText, { className: "w-14" })
+    ] });
+  }
+  if (detail == null || detail === false || detail === "") return null;
+  return /* @__PURE__ */ jsxs("div", { className: frame, children: [
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body-sm", tone: "muted", className: "min-w-0 truncate", children: detail }),
+    prevValue && /* @__PURE__ */ jsxs(Txt, { as: "span", variant: "body-sm", tone: "muted", className: "shrink-0 tabular-nums", children: [
+      "vs ",
+      prevValue
+    ] })
+  ] });
+}
+
+function MetricsKpiCardHeader({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-x-2 gap-y-1", className), children });
+}
+
+function MetricsKpiCardLabel({
+  children,
+  icon,
+  className
+}) {
+  if (!icon) {
+    return /* @__PURE__ */ jsx(Txt, { as: "span", variant: "subheading", tone: "ink", className, children });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: cn("flex items-center justify-between gap-2", className), children: [
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "subheading", tone: "ink", children }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground [&>svg]:size-4", children: icon })
+  ] });
+}
+
+function MetricsKpiCardLoading({ className }) {
+  return /* @__PURE__ */ jsx(Txt, { as: "span", className, children: /* @__PURE__ */ jsx(Spinner, { size: "md", variant: "pulse", className: "text-placeholder" }) });
+}
+
+function MetricsKpiCardNoChange({
+  message = "No previous value to compare",
+  className
+}) {
+  return /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "faint", className, children: message });
+}
+
+function MetricsKpiCardNoData({ message = "No data yet", className }) {
+  return /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "faint", className, children: message });
+}
+
+function MetricsKpiCardPrev({ value, className }) {
+  return /* @__PURE__ */ jsxs(
+    Txt,
+    {
+      as: "span",
+      variant: "body-sm",
+      tone: "muted",
+      title: `vs ${value}`,
+      className: cn("ml-auto min-w-0 shrink! truncate tabular-nums", className),
+      children: [
+        "vs ",
+        value
+      ]
+    }
+  );
+}
+
+function MetricsKpiCardRoot({ children, className }) {
+  return /* @__PURE__ */ jsx(Card, { className: cn("min-w-72 flex-1 px-4 py-3", className), children: /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children }) });
+}
+
+function MetricsKpiCardValue({ children, className }) {
+  return /* @__PURE__ */ jsx("strong", { className: cn("text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]", className), children });
+}
+
+function MetricsKpiCardValueRow({
+  children,
+  isLoading = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-h-6 items-center gap-2 whitespace-nowrap *:shrink-0", className), children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-20" }) : children });
+}
+
+const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
+  Header: MetricsKpiCardHeader,
+  Label: MetricsKpiCardLabel,
+  ValueRow: MetricsKpiCardValueRow,
+  Value: MetricsKpiCardValue,
+  Change: MetricsKpiCardChange,
+  NoChange: MetricsKpiCardNoChange,
+  NoData: MetricsKpiCardNoData,
+  Error: MetricsKpiCardError,
+  Loading: MetricsKpiCardLoading,
+  Footer: MetricsKpiCardFooter,
+  Prev: MetricsKpiCardPrev
+});
+
+export { MetricsKpiCard as M };
+//# sourceMappingURL=metrics-kpi-card-gvgEnnuU.js.map

package/dist/metrics-kpi-card-gvgEnnuU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpi-card-gvgEnnuU.js","sources":["../src/ds/components/MetricsKpiCard/metrics-kpi-card-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-error.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-footer.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-header.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-label.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-loading.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-data.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-prev.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value-row.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card.tsx"],"sourcesContent":["import { ArrowDownRightIcon, ArrowUpRightIcon } from 'lucide-react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\n// A change that rounds to 0.0% is no change: a neutral badge, no arrow.\nconst isFlat = (changePct: number) => Math.abs(changePct) < 0.05;\n\n// Green when the value moved the good way, red when it moved the bad way.\nfunction changeVariant(changePct: number, lowerIsBetter?: boolean) {\n  if (isFlat(changePct)) return 'neutral';\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n  return isGood ? 'success' : 'destructive';\n}\n\n// Past +1000% a percentage is unreadable, so show how many times bigger the value got instead.\nfunction formatChange(changePct: number) {\n  if (isFlat(changePct)) return '0%';\n  if (changePct >= 1000) return `×${compact.format(1 + changePct / 100)}`;\n  const digits = Math.abs(changePct) < 10 ? 1 : 0;\n  return `${changePct > 0 ? '+' : ''}${changePct.toFixed(digits)}%`;\n}\n\nexport function MetricsKpiCardChange({\n  changePct,\n  comparison = 'vs prior period',\n  prevValue,\n  lowerIsBetter,\n  caption = false,\n  className,\n}: {\n  changePct: number;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". Shown on hover. */\n  comparison?: string;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  /** Show the comparison as inline text. Off by default: pair the badge with\n   *  `MetricsKpiCard.Footer`, which shows the prior value itself. */\n  caption?: boolean;\n  className?: string;\n}) {\n  const flat = isFlat(changePct);\n  const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;\n  const formattedChange = formatChange(changePct);\n  const description = prevValue ? `${comparison} (${prevValue})` : comparison;\n\n  return (\n    <div className={cn('flex items-center gap-1.5', className)}>\n      <Tooltip>\n        <TooltipTrigger render={<span tabIndex={0} className=\"inline-flex rounded-full\" />}>\n          <Badge\n            variant={changeVariant(changePct, lowerIsBetter)}\n            emphasis=\"strong\"\n            size=\"xs\"\n            icon={flat ? undefined : <Icon />}\n            className=\"tabular-nums\"\n            aria-hidden=\"true\"\n          >\n            {formattedChange}\n          </Badge>\n          <span className=\"sr-only\">{`${formattedChange} ${description}`}</span>\n        </TooltipTrigger>\n        <TooltipContent>{description}</TooltipContent>\n      </Tooltip>\n      {caption ? (\n        <Txt as=\"span\" variant=\"meta\" tone=\"faint\" aria-hidden=\"true\">\n          {comparison}\n        </Txt>\n      ) : null}\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" className={cn('text-destructive-foreground', className)}>\n      {message}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { SkeletonText } from '@/ds/components/Skeleton';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/**\n * Bottom row under a hairline: one line of context on the left (e.g. \"1.3K server errors\")\n * and the prior period's value on the right. Only worth its hairline when there is a detail\n * line; a card with just a prior value puts it in the value row (`MetricsKpiCard.Prev`).\n */\nexport function MetricsKpiCardFooter({\n  detail,\n  prevValue,\n  isLoading = false,\n  className,\n}: {\n  detail: ReactNode;\n  prevValue?: string;\n  /** Skeletons in the detail's and prior value's line boxes, so the card keeps its height. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  const frame = cn('mt-1 flex items-center justify-between gap-2 border-t border-border pt-2', className);\n  if (isLoading) {\n    return (\n      <div className={frame}>\n        <SkeletonText className=\"w-24\" />\n        <SkeletonText className=\"w-14\" />\n      </div>\n    );\n  }\n  if (detail == null || detail === false || detail === '') return null;\n  return (\n    <div className={frame}>\n      <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"min-w-0 truncate\">\n        {detail}\n      </Txt>\n      {prevValue && (\n        <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n          vs {prevValue}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardHeader({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex flex-wrap items-center gap-x-2 gap-y-1', className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({\n  children,\n  icon,\n  className,\n}: {\n  children: string;\n  /** Optional glyph shown at the far end of the label row (e.g. a lucide icon). */\n  icon?: ReactNode;\n  className?: string;\n}) {\n  if (!icon) {\n    return (\n      <Txt as=\"span\" variant=\"subheading\" tone=\"ink\" className={className}>\n        {children}\n      </Txt>\n    );\n  }\n  return (\n    <span className={cn('flex items-center justify-between gap-2', className)}>\n      <Txt as=\"span\" variant=\"subheading\" tone=\"ink\">\n        {children}\n      </Txt>\n      <span aria-hidden className=\"shrink-0 text-muted-foreground [&>svg]:size-4\">\n        {icon}\n      </span>\n    </span>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <Txt as=\"span\" className={className}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/**\n * The prior period's value, pushed to the end of the value row. Use it when the card has\n * no detail line; with one, pass `prevValue` to `MetricsKpiCard.Footer` instead.\n */\nexport function MetricsKpiCardPrev({ value, className }: { value: string; className?: string }) {\n  return (\n    <Txt\n      as=\"span\"\n      variant=\"body-sm\"\n      tone=\"muted\"\n      title={`vs ${value}`}\n      // The value row keeps its children from shrinking; the prior value is the one part that\n      // may give way in a narrow card, truncating with the full text in the title.\n      className={cn('ml-auto min-w-0 shrink! truncate tabular-nums', className)}\n    >\n      vs {value}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <Card className={cn('min-w-72 flex-1 px-4 py-3', className)}>\n      <div className=\"grid gap-1.5\">{children}</div>\n    </Card>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <strong className={cn('text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]', className)}>\n      {children}\n    </strong>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValueRow({\n  children,\n  isLoading = false,\n  className,\n}: {\n  children?: ReactNode;\n  /** A value-sized skeleton in place of the value and its change badge. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex min-h-6 items-center gap-2 whitespace-nowrap *:shrink-0', className)}>\n      {isLoading ? <Skeleton className=\"h-6 w-20\" /> : children}\n    </div>\n  );\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\nimport { MetricsKpiCardFooter } from './metrics-kpi-card-footer';\nimport { MetricsKpiCardHeader } from './metrics-kpi-card-header';\nimport { MetricsKpiCardLabel } from './metrics-kpi-card-label';\nimport { MetricsKpiCardLoading } from './metrics-kpi-card-loading';\nimport { MetricsKpiCardNoChange } from './metrics-kpi-card-no-change';\nimport { MetricsKpiCardNoData } from './metrics-kpi-card-no-data';\nimport { MetricsKpiCardPrev } from './metrics-kpi-card-prev';\nimport { MetricsKpiCardRoot } from './metrics-kpi-card-root';\nimport { MetricsKpiCardValue } from './metrics-kpi-card-value';\nimport { MetricsKpiCardValueRow } from './metrics-kpi-card-value-row';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Header: MetricsKpiCardHeader,\n  Label: MetricsKpiCardLabel,\n  ValueRow: MetricsKpiCardValueRow,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n  Footer: MetricsKpiCardFooter,\n  Prev: MetricsKpiCardPrev,\n});\n"],"names":[],"mappings":"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"}

package/dist/metrics-line-chart-BBn0LeqC.js

@@ -0,0 +1,121 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ComposedChart, CartesianGrid, Tooltip, Line, Area } from 'recharts';
+import { M as MetricsLineChartLegend, a as MetricsLineChartTooltip } from './metrics-line-chart-tooltip-bgRf6KTb.js';
+import { C as ChartSkeleton } from './chart-skeleton-C2-qELLI.js';
+import { useChartSize, CHART_GRID_PROPS, CHART_CURSOR_PROPS } from './primitives/chart-axes.es.js';
+import { compactNumber, Y_AXIS_WIDTH, timeXAxis, valueYAxis } from './primitives/chart-frame.es.js';
+import { CHART_MARGIN } from './primitives/chart-layout.es.js';
+import { ChartPlot } from './primitives/chart-plot.es.js';
+import { useChartDefsId } from './primitives/use-chart-defs-id.es.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+const LINE_WIDTH = 1.75;
+const AREA_OPACITY = 0.12;
+const SPARSE_POINTS = 12;
+function SmoothCursor({ points }) {
+  const [top, bottom] = points ?? [];
+  if (!top || !bottom) return null;
+  return /* @__PURE__ */ jsx(
+    "line",
+    {
+      x1: 0,
+      x2: 0,
+      y1: top.y,
+      y2: bottom.y,
+      ...CHART_CURSOR_PROPS,
+      className: "pointer-events-none transition-transform duration-150 ease-out",
+      style: { transform: `translateX(${top.x}px)` }
+    }
+  );
+}
+function MetricsLineChart(props) {
+  const { data, series, height = 210, showLegend = true, isLoading = false, className } = props;
+  const root = cn(height === "fill" && "flex min-h-0 flex-1 flex-col", className);
+  return /* @__PURE__ */ jsxs("div", { className: root, children: [
+    showLegend && /* @__PURE__ */ jsx(MetricsLineChartLegend, { data: isLoading ? void 0 : data, series, className: "mb-4" }),
+    isLoading ? /* @__PURE__ */ jsx(ChartSkeleton, { kind: "line", height }) : /* @__PURE__ */ jsx(LinePlot, { ...props })
+  ] });
+}
+function LinePlot({
+  data,
+  series,
+  height = 210,
+  yDomain,
+  onPointClick,
+  onBucketClick,
+  xKey = "time",
+  timestampKey = "tsMs",
+  xLabels = "auto",
+  tooltipLabelKey,
+  showDots = false,
+  valueFormatter,
+  axisFormatter,
+  showYAxis = true
+}) {
+  const id = useChartDefsId();
+  const { size, onResize, ref } = useChartSize();
+  const format = valueFormatter ?? compactNumber.format;
+  const isSparse = (key) => data.filter((row) => typeof row[key] === "number").length <= SPARSE_POINTS;
+  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);
+  const activeDot = (s) => ({
+    r: 3.5,
+    fill: s.color,
+    stroke: "var(--background)",
+    strokeWidth: 2,
+    ...onPointClick && {
+      style: { cursor: "pointer" },
+      onClick: (_, payload) => {
+        if (isRecord(payload) && isRecord(payload.payload)) onPointClick(payload.payload, s.dataKey);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx(ChartPlot, { height, plotRef: ref, onResize, clickable: !!onBucketClick, children: /* @__PURE__ */ jsxs(
+    ComposedChart,
+    {
+      data,
+      margin: CHART_MARGIN,
+      onClick: (state) => {
+        const i = state?.activeTooltipIndex;
+        const row = i === void 0 || i === null ? void 0 : data[Number(i)];
+        if (onBucketClick && row) onBucketClick(row, Number(i));
+      },
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: series.map((s, i) => /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-area-${i}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: s.color, stopOpacity: AREA_OPACITY }),
+          /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: s.color, stopOpacity: 0 })
+        ] }, s.dataKey)) }),
+        /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_GRID_PROPS }),
+        timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth }),
+        valueYAxis({ show: showYAxis, size, formatter: axisFormatter ?? format, domain: yDomain }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: /* @__PURE__ */ jsx(MetricsLineChartTooltip, { formatValue: format, labelKey: tooltipLabelKey }),
+            cursor: /* @__PURE__ */ jsx(SmoothCursor, {})
+          }
+        ),
+        series.map((s, i) => {
+          const common = {
+            type: "monotone",
+            dataKey: s.dataKey,
+            name: s.label,
+            stroke: s.color,
+            strokeWidth: s.emphasis ? LINE_WIDTH + 0.5 : LINE_WIDTH,
+            strokeDasharray: s.dashed ? "4 3" : void 0,
+            dot: showDots || isSparse(s.dataKey) ? { r: 3, fill: s.color, strokeWidth: 0 } : false,
+            activeDot: activeDot(s),
+            isAnimationActive: false,
+            connectNulls: true
+          };
+          return s.dashed ? /* @__PURE__ */ jsx(Line, { ...common }, s.dataKey) : /* @__PURE__ */ jsx(Area, { ...common, fill: `url(#${id}-area-${i})`, fillOpacity: 1 }, s.dataKey);
+        })
+      ]
+    }
+  ) });
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+
+export { MetricsLineChart as M };
+//# sourceMappingURL=metrics-line-chart-BBn0LeqC.js.map

package/dist/metrics-line-chart-BBn0LeqC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-line-chart-BBn0LeqC.js","sources":["../src/ds/components/MetricsLineChart/metrics-line-chart.tsx"],"sourcesContent":["import { Area, CartesianGrid, ComposedChart, Line, Tooltip } from 'recharts';\nimport { MetricsLineChartLegend } from './metrics-line-chart-legend';\nimport { MetricsLineChartTooltip } from './metrics-line-chart-tooltip';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport { CHART_CURSOR_PROPS, CHART_GRID_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { Y_AXIS_WIDTH, compactNumber, timeXAxis, valueYAxis } from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsLineChartSeries = {\n  dataKey: string;\n  label: string;\n  color: string;\n  aggregate?: (data: Record<string, unknown>[]) => { value: string; suffix?: string };\n  /** A secondary reading (e.g. an average next to counts): dashed, no fill under it. */\n  dashed?: boolean;\n  /** The series to read first (e.g. P95 among percentiles): a slightly heavier line. */\n  emphasis?: boolean;\n};\n\n/** Line weight; an emphasised series adds half a pixel. */\nconst LINE_WIDTH = 1.75;\n/** Opacity at the top of the fill under a line (it fades to nothing at the base). */\nconst AREA_OPACITY = 0.12;\n/** A series with this few points gets a dot on each: a lone point draws no line at all. */\nconst SPARSE_POINTS = 12;\n\n// Positioned via transform so the hover line glides between points instead of jumping.\nfunction SmoothCursor({ points }: { points?: { x: number; y: number }[] }) {\n  const [top, bottom] = points ?? [];\n  if (!top || !bottom) return null;\n  return (\n    <line\n      x1={0}\n      x2={0}\n      y1={top.y}\n      y2={bottom.y}\n      {...CHART_CURSOR_PROPS}\n      className=\"pointer-events-none transition-transform duration-150 ease-out\"\n      style={{ transform: `translateX(${top.x}px)` }}\n    />\n  );\n}\n\nexport type MetricsLineChartPointClickHandler = (point: Record<string, unknown>, seriesKey: string) => void;\n\nexport type MetricsLineChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Click on a series' active dot. */\n  onPointClick?: MetricsLineChartPointClickHandler;\n  /** Click anywhere on a bucket (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  /** Render a visible dot on every point. Series with few points get them anyway. */\n  showDots?: boolean;\n  /** Set to `false` to render `MetricsLineChartLegend` elsewhere, e.g. next to tabs. */\n  showLegend?: boolean;\n  /** Formats tooltip values (e.g. `ms`, `%`), and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsLineChart(props: MetricsLineChartProps) {\n  const { data, series, height = 210, showLegend = true, isLoading = false, className } = props;\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root}>\n      {showLegend && <MetricsLineChartLegend data={isLoading ? undefined : data} series={series} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"line\" height={height} /> : <LinePlot {...props} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in. */\nfunction LinePlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  onPointClick,\n  onBucketClick,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  showDots = false,\n  valueFormatter,\n  axisFormatter,\n  showYAxis = true,\n}: MetricsLineChartProps) {\n  const id = useChartDefsId();\n  const { size, onResize, ref } = useChartSize();\n\n  const format = valueFormatter ?? compactNumber.format;\n  const isSparse = (key: string) => data.filter(row => typeof row[key] === 'number').length <= SPARSE_POINTS;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const activeDot = (s: MetricsLineChartSeries) => ({\n    r: 3.5,\n    fill: s.color,\n    stroke: 'var(--background)',\n    strokeWidth: 2,\n    ...(onPointClick && {\n      style: { cursor: 'pointer' },\n      onClick: (_: unknown, payload: unknown) => {\n        // Recharts passes the dot's props; the hovered row is under `payload`.\n        if (isRecord(payload) && isRecord(payload.payload)) onPointClick(payload.payload, s.dataKey);\n      },\n    }),\n  });\n\n  return (\n    <ChartPlot height={height} plotRef={ref} onResize={onResize} clickable={!!onBucketClick}>\n      <ComposedChart\n        data={data}\n        margin={CHART_MARGIN}\n        onClick={state => {\n          const i = state?.activeTooltipIndex;\n          const row = i === undefined || i === null ? undefined : data[Number(i)];\n          if (onBucketClick && row) onBucketClick(row, Number(i));\n        }}\n      >\n        <defs>\n          {series.map((s, i) => (\n            <linearGradient key={s.dataKey} id={`${id}-area-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor={s.color} stopOpacity={AREA_OPACITY} />\n              <stop offset=\"95%\" stopColor={s.color} stopOpacity={0} />\n            </linearGradient>\n          ))}\n        </defs>\n        <CartesianGrid {...CHART_GRID_PROPS} />\n        {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n        {valueYAxis({ show: showYAxis, size, formatter: axisFormatter ?? format, domain: yDomain })}\n        <Tooltip\n          content={<MetricsLineChartTooltip formatValue={format} labelKey={tooltipLabelKey} />}\n          cursor={<SmoothCursor />}\n        />\n        {series.map((s, i) => {\n          const common = {\n            type: 'monotone' as const,\n            dataKey: s.dataKey,\n            name: s.label,\n            stroke: s.color,\n            strokeWidth: s.emphasis ? LINE_WIDTH + 0.5 : LINE_WIDTH,\n            strokeDasharray: s.dashed ? '4 3' : undefined,\n            dot: showDots || isSparse(s.dataKey) ? { r: 3, fill: s.color, strokeWidth: 0 } : false,\n            activeDot: activeDot(s),\n            isAnimationActive: false,\n            connectNulls: true,\n          };\n          return s.dashed ? (\n            <Line key={s.dataKey} {...common} />\n          ) : (\n            <Area key={s.dataKey} {...common} fill={`url(#${id}-area-${i})`} fillOpacity={1} />\n          );\n        })}\n      </ComposedChart>\n    </ChartPlot>\n  );\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null;\n}\n"],"names":[],"mappings":"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"}