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

package/dist/primitives/chart-axes.es.js

@@ -0,0 +1,68 @@
+import { useRef, useState, useLayoutEffect } from 'react';
+import { X_AXIS_HEIGHT, CHART_MARGIN, CHART_AXIS_FONT_SIZE } from './chart-layout.es.js';
+
+const CHART_GRID_PROPS = {
+  vertical: false,
+  stroke: "var(--border)",
+  strokeDasharray: "3 3",
+  strokeOpacity: 0.5
+};
+const CHART_CURSOR_PROPS = { stroke: "var(--border)", strokeDasharray: "3 3", strokeWidth: 0.8 };
+function useChartSize() {
+  const ref = useRef(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  useLayoutEffect(() => {
+    const rect = ref.current?.getBoundingClientRect();
+    if (rect) setSize({ width: rect.width, height: rect.height });
+  }, []);
+  const onResize = (width, height) => setSize((prev) => prev.width === width && prev.height === height ? prev : { width, height });
+  return { size, onResize, ref };
+}
+function chartYTickCount(height) {
+  if (!height) return 3;
+  const plot = height - X_AXIS_HEIGHT - CHART_MARGIN.top;
+  return Math.min(5, Math.max(3, Math.round(plot / 48) + 1));
+}
+const MINUTE = 6e4;
+const DAY = 24 * 60 * MINUTE;
+const STEPS = [5, 10, 15, 30, 60, 120, 180, 240, 360, 720, 1440, 2880, 10080];
+const LABEL_GAP = 48;
+const labelWidth = (text) => text.length * CHART_AXIS_FONT_SIZE * 0.58;
+function pickTimeTicks(timestamps, labels, plotWidth, mode = "auto") {
+  const last = labels.length - 1;
+  if (last < 0) return /* @__PURE__ */ new Set();
+  const ends = /* @__PURE__ */ new Set([0, last]);
+  if (mode === "edges" || labels.length < 3) return ends;
+  const widest = Math.max(...labels.map((l) => labelWidth(l)));
+  const fit = Math.floor(plotWidth / (widest + LABEL_GAP));
+  if (fit < 3) return ends;
+  const ts = timestamps.every(isFiniteNumber) ? timestamps : void 0;
+  const bucket = ts ? (ts[1] ?? 0) - (ts[0] ?? 0) : 0;
+  const span = ts ? ((ts[last] ?? 0) - (ts[0] ?? 0) + bucket) / MINUTE : 0;
+  const step = ts ? STEPS.find((n) => n * MINUTE >= bucket && n * MINUTE % bucket === 0 && span / n <= fit) : void 0;
+  if (!ts || !(bucket > 0) || step === void 0) {
+    const every = Math.ceil(labels.length / fit);
+    const even = /* @__PURE__ */ new Set();
+    for (let i = 0; i <= last; i += every) even.add(i);
+    if (!even.has(last)) {
+      if (last % every < every / 2) even.delete(last - last % every);
+      even.add(last);
+    }
+    return even.size < 3 ? ends : even;
+  }
+  const picked = /* @__PURE__ */ new Set();
+  ts.forEach((t, i) => {
+    const d = new Date(t);
+    const midnight = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+    const onClock = bucket >= DAY || d.getHours() === 0 && d.getMinutes() === 0;
+    const onStep = step < 1440 ? d.getSeconds() === 0 && (d.getHours() * 60 + d.getMinutes()) % step === 0 : onClock && Math.round(midnight / DAY) % (step / 1440) === 0;
+    if (onStep) picked.add(i);
+  });
+  return picked.size < 3 ? ends : picked;
+}
+function isFiniteNumber(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+export { CHART_CURSOR_PROPS, CHART_GRID_PROPS, chartYTickCount, labelWidth, pickTimeTicks, useChartSize };
+//# sourceMappingURL=chart-axes.es.js.map

package/dist/primitives/chart-axes.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-axes.es.js","sources":["../../src/ds/primitives/chart-axes.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN, X_AXIS_HEIGHT } from './chart-layout';\n\n/** Horizontal rulers: short dashes on the border color at half strength. */\nexport const CHART_GRID_PROPS = {\n  vertical: false,\n  stroke: 'var(--border)',\n  strokeDasharray: '3 3',\n  strokeOpacity: 0.5,\n} as const;\n\n/** Hover line of line charts: dashed like the grid, full border color, a hair thinner than a series. */\nexport const CHART_CURSOR_PROPS = { stroke: 'var(--border)', strokeDasharray: '3 3', strokeWidth: 0.8 } as const;\n\n/**\n * How x-axis labels are placed.\n * - `auto`: as many labels as fit the width, on round clock times (12 AM, 6 AM, ...) when the\n *   rows carry timestamps, so every chart on a page shares one time grid.\n * - `edges`: only the first and last bucket, pinned to the plot's edges (small cards).\n */\nexport type ChartXLabels = 'auto' | 'edges';\n\nexport type ChartSize = { width: number; height: number };\n\n/**\n * The chart's size, read before the first paint (so labels and the y tick count are right on\n * the first frame, no jump) and kept current by ResponsiveContainer's `onResize`.\n */\nexport function useChartSize() {\n  const ref = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<ChartSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    const rect = ref.current?.getBoundingClientRect();\n    if (rect) setSize({ width: rect.width, height: rect.height });\n  }, []);\n  const onResize = (width: number, height: number) =>\n    setSize(prev => (prev.width === width && prev.height === height ? prev : { width, height }));\n  return { size, onResize, ref };\n}\n\n/** About one gridline per 48px of plot, 3 to 5 ticks, on Recharts' round values. */\nexport function chartYTickCount(height: number) {\n  if (!height) return 3;\n  const plot = height - X_AXIS_HEIGHT - CHART_MARGIN.top;\n  return Math.min(5, Math.max(3, Math.round(plot / 48) + 1));\n}\n\nconst MINUTE = 60_000;\nconst DAY = 24 * 60 * MINUTE;\n/** Round label steps, in minutes: 5m ... 30m, 1h ... 12h, then days and a week. */\nconst STEPS = [5, 10, 15, 30, 60, 120, 180, 240, 360, 720, 1440, 2880, 10080];\n/** Minimum clear space between two x-axis labels. */\nconst LABEL_GAP = 48;\n/** Rough label width at the axis font size. */\nexport const labelWidth = (text: string) => text.length * CHART_AXIS_FONT_SIZE * 0.58;\n\n/**\n * Which buckets get a label: the smallest round step whose labels fit the width, on\n * clock-aligned times (hours divisible by the step, days on local midnight or, for daily\n * buckets, on their local date). Without\n * timestamps, evenly spaced buckets that fit; when fewer than three would show, just the\n * first and last bucket.\n */\nexport function pickTimeTicks(\n  timestamps: Array<number | undefined>,\n  labels: string[],\n  plotWidth: number,\n  mode: ChartXLabels = 'auto',\n): Set<number> {\n  const last = labels.length - 1;\n  if (last < 0) return new Set();\n  const ends = new Set([0, last]);\n  if (mode === 'edges' || labels.length < 3) return ends;\n  const widest = Math.max(...labels.map(l => labelWidth(l)));\n  const fit = Math.floor(plotWidth / (widest + LABEL_GAP));\n  if (fit < 3) return ends;\n  const ts = timestamps.every(isFiniteNumber) ? timestamps : undefined;\n  const bucket = ts ? (ts[1] ?? 0) - (ts[0] ?? 0) : 0;\n  // From the full range, so gaps (missing buckets) can't make the series look shorter.\n  const span = ts ? ((ts[last] ?? 0) - (ts[0] ?? 0) + bucket) / MINUTE : 0;\n  // The smallest round step that is a whole number of buckets and whose labels fit.\n  const step = ts ? STEPS.find(n => n * MINUTE >= bucket && (n * MINUTE) % bucket === 0 && span / n <= fit) : undefined;\n  if (!ts || !(bucket > 0) || step === undefined) {\n    // No time grid to align to (or buckets longer than a week): every `every`-th bucket,\n    // ending on the last one.\n    const every = Math.ceil(labels.length / fit);\n    const even = new Set<number>();\n    for (let i = 0; i <= last; i += every) even.add(i);\n    if (!even.has(last)) {\n      if (last % every < every / 2) even.delete(last - (last % every));\n      even.add(last);\n    }\n    return even.size < 3 ? ends : even;\n  }\n  const picked = new Set<number>();\n  ts.forEach((t, i) => {\n    const d = new Date(t);\n    const midnight = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();\n    // Daily buckets are often cut on UTC midnight, which isn't local midnight: they align by\n    // local date. Shorter buckets need the clock time itself.\n    const onClock = bucket >= DAY || (d.getHours() === 0 && d.getMinutes() === 0);\n    const onStep =\n      step < 1440\n        ? d.getSeconds() === 0 && (d.getHours() * 60 + d.getMinutes()) % step === 0\n        : onClock && Math.round(midnight / DAY) % (step / 1440) === 0;\n    if (onStep) picked.add(i);\n  });\n  // Two clock labels land off-centre (one mid-plot, one at an edge): label the ends instead.\n  return picked.size < 3 ? ends : picked;\n}\n\nfunction isFiniteNumber(value: number | undefined): value is number {\n  return typeof value === 'number' && Number.isFinite(value);\n}\n"],"names":[],"mappings":"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"}

package/dist/primitives/chart-column-layout.cjs.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const CHART_MIN_SEGMENT = 3;
+const amount = (v) => v !== void 0 && Number.isFinite(v) && v > 0 ? v : 0;
+function stackedSegmentBox(values, self, geo, { gap = 0, minSize = CHART_MIN_SEGMENT } = {}) {
+  const amounts = values.map(amount);
+  const value = amounts[self] ?? 0;
+  if (!(value > 0) || !Number.isFinite(geo.y) || !Number.isFinite(geo.height)) return void 0;
+  const ppu = geo.height / value;
+  const below = amounts.slice(0, self).reduce((sum, v) => sum + v, 0);
+  const bottom = geo.y + geo.height + below * ppu;
+  const live = amounts.flatMap((v, i) => v > 0 ? [i] : []);
+  const total = amounts.reduce((sum, v) => sum + v, 0) * ppu;
+  const gaps = gap * (live.length - 1);
+  const h = (i) => heights[i] ?? 0;
+  const heights = amounts.map((v) => v > 0 && total > 0 ? Math.max(v * ppu * (total - gaps) / total, 0) : 0);
+  const small = live.filter((i) => h(i) < minSize);
+  const large = live.filter((i) => h(i) >= minSize);
+  const deficit = small.reduce((sum, i) => sum + minSize - h(i), 0);
+  const spare = large.reduce((sum, i) => sum + h(i) - minSize, 0);
+  for (const i of small) heights[i] = minSize;
+  for (const i of large) {
+    heights[i] = spare >= deficit ? h(i) - (spare > 0 ? (h(i) - minSize) / spare * deficit : 0) : minSize;
+  }
+  let top = bottom;
+  for (const i of live) {
+    top -= h(i);
+    if (i === self) return { y: top, height: h(i) };
+    top -= gap;
+  }
+  return void 0;
+}
+function singleBarBox(value, geo, { minSize = CHART_MIN_SEGMENT } = {}) {
+  if (!(amount(value) > 0) || !Number.isFinite(geo.y) || !Number.isFinite(geo.height)) return void 0;
+  if (geo.height >= minSize) return geo;
+  return { y: geo.y + geo.height - minSize, height: minSize };
+}
+
+exports.CHART_MIN_SEGMENT = CHART_MIN_SEGMENT;
+exports.singleBarBox = singleBarBox;
+exports.stackedSegmentBox = stackedSegmentBox;
+//# sourceMappingURL=chart-column-layout.cjs.js.map

package/dist/primitives/chart-column-layout.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-column-layout.cjs.js","sources":["../../src/ds/primitives/chart-column-layout.ts"],"sourcesContent":["/**\n * Geometry for bar columns, so small values never draw as an unreadable sliver.\n *\n * A non-zero value always gets at least `minSize` pixels; a zero gets nothing. In a stack the\n * extra height is taken from the segments that can spare it, so the column keeps its true\n * height. A column too short to hold every segment at the minimum grows just enough to (one\n * request next to a 3,000-request peak still shows as a few pixels, not half of one).\n */\n\n/** Smallest height a non-zero bar or stacked segment is drawn at. */\nexport const CHART_MIN_SEGMENT = 3;\n\nexport type SegmentBox = { y: number; height: number };\n\n/** A drawable amount: missing, negative and non-finite values count as zero. */\nconst amount = (v: number | undefined) => (v !== undefined && Number.isFinite(v) && v > 0 ? v : 0);\n\n/**\n * Lays out one stacked column and returns the box of segment `self`, or `undefined` when its value is\n * zero. `geo` is the box Recharts computed for that segment (its true y and height); segments\n * stack bottom to top in `values` order with `gap` pixels between them.\n */\nexport function stackedSegmentBox(\n  values: number[],\n  self: number,\n  geo: SegmentBox,\n  { gap = 0, minSize = CHART_MIN_SEGMENT }: { gap?: number; minSize?: number } = {},\n): SegmentBox | undefined {\n  const amounts = values.map(amount);\n  const value = amounts[self] ?? 0;\n  if (!(value > 0) || !Number.isFinite(geo.y) || !Number.isFinite(geo.height)) return undefined;\n  // Pixels per unit, from this segment's own box; every segment shares the scale.\n  const ppu = geo.height / value;\n  const below = amounts.slice(0, self).reduce((sum, v) => sum + v, 0);\n  const bottom = geo.y + geo.height + below * ppu;\n  const live = amounts.flatMap((v, i) => (v > 0 ? [i] : []));\n  const total = amounts.reduce((sum, v) => sum + v, 0) * ppu;\n  const gaps = gap * (live.length - 1);\n  const h = (i: number) => heights[i] ?? 0;\n  const heights = amounts.map(v => (v > 0 && total > 0 ? Math.max((v * ppu * (total - gaps)) / total, 0) : 0));\n  const small = live.filter(i => h(i) < minSize);\n  const large = live.filter(i => h(i) >= minSize);\n  const deficit = small.reduce((sum, i) => sum + minSize - h(i), 0);\n  const spare = large.reduce((sum, i) => sum + h(i) - minSize, 0);\n  for (const i of small) heights[i] = minSize;\n  for (const i of large) {\n    // Take the deficit from the larger segments, in proportion to what each can spare. When\n    // they can't spare enough, every segment sits at the minimum and the column grows to fit.\n    heights[i] = spare >= deficit ? h(i) - (spare > 0 ? ((h(i) - minSize) / spare) * deficit : 0) : minSize;\n  }\n  let top = bottom;\n  for (const i of live) {\n    top -= h(i);\n    if (i === self) return { y: top, height: h(i) };\n    top -= gap;\n  }\n  return undefined;\n}\n\n/** A single (unstacked) bar: grows up from its base to `minSize` when its value is tiny. */\nexport function singleBarBox(\n  value: number,\n  geo: SegmentBox,\n  { minSize = CHART_MIN_SEGMENT }: { minSize?: number } = {},\n): SegmentBox | undefined {\n  if (!(amount(value) > 0) || !Number.isFinite(geo.y) || !Number.isFinite(geo.height)) return undefined;\n  if (geo.height >= minSize) return geo;\n  return { y: geo.y + geo.height - minSize, height: minSize };\n}\n"],"names":[],"mappings":"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"}

package/dist/primitives/chart-column-layout.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/primitives/chart-column-layout'
+export {}

package/dist/primitives/chart-column-layout.es.js

@@ -0,0 +1,38 @@
+const CHART_MIN_SEGMENT = 3;
+const amount = (v) => v !== void 0 && Number.isFinite(v) && v > 0 ? v : 0;
+function stackedSegmentBox(values, self, geo, { gap = 0, minSize = CHART_MIN_SEGMENT } = {}) {
+  const amounts = values.map(amount);
+  const value = amounts[self] ?? 0;
+  if (!(value > 0) || !Number.isFinite(geo.y) || !Number.isFinite(geo.height)) return void 0;
+  const ppu = geo.height / value;
+  const below = amounts.slice(0, self).reduce((sum, v) => sum + v, 0);
+  const bottom = geo.y + geo.height + below * ppu;
+  const live = amounts.flatMap((v, i) => v > 0 ? [i] : []);
+  const total = amounts.reduce((sum, v) => sum + v, 0) * ppu;
+  const gaps = gap * (live.length - 1);
+  const h = (i) => heights[i] ?? 0;
+  const heights = amounts.map((v) => v > 0 && total > 0 ? Math.max(v * ppu * (total - gaps) / total, 0) : 0);
+  const small = live.filter((i) => h(i) < minSize);
+  const large = live.filter((i) => h(i) >= minSize);
+  const deficit = small.reduce((sum, i) => sum + minSize - h(i), 0);
+  const spare = large.reduce((sum, i) => sum + h(i) - minSize, 0);
+  for (const i of small) heights[i] = minSize;
+  for (const i of large) {
+    heights[i] = spare >= deficit ? h(i) - (spare > 0 ? (h(i) - minSize) / spare * deficit : 0) : minSize;
+  }
+  let top = bottom;
+  for (const i of live) {
+    top -= h(i);
+    if (i === self) return { y: top, height: h(i) };
+    top -= gap;
+  }
+  return void 0;
+}
+function singleBarBox(value, geo, { minSize = CHART_MIN_SEGMENT } = {}) {
+  if (!(amount(value) > 0) || !Number.isFinite(geo.y) || !Number.isFinite(geo.height)) return void 0;
+  if (geo.height >= minSize) return geo;
+  return { y: geo.y + geo.height - minSize, height: minSize };
+}
+
+export { CHART_MIN_SEGMENT, singleBarBox, stackedSegmentBox };
+//# sourceMappingURL=chart-column-layout.es.js.map

package/dist/primitives/chart-column-layout.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-column-layout.es.js","sources":["../../src/ds/primitives/chart-column-layout.ts"],"sourcesContent":["/**\n * Geometry for bar columns, so small values never draw as an unreadable sliver.\n *\n * A non-zero value always gets at least `minSize` pixels; a zero gets nothing. In a stack the\n * extra height is taken from the segments that can spare it, so the column keeps its true\n * height. A column too short to hold every segment at the minimum grows just enough to (one\n * request next to a 3,000-request peak still shows as a few pixels, not half of one).\n */\n\n/** Smallest height a non-zero bar or stacked segment is drawn at. */\nexport const CHART_MIN_SEGMENT = 3;\n\nexport type SegmentBox = { y: number; height: number };\n\n/** A drawable amount: missing, negative and non-finite values count as zero. */\nconst amount = (v: number | undefined) => (v !== undefined && Number.isFinite(v) && v > 0 ? v : 0);\n\n/**\n * Lays out one stacked column and returns the box of segment `self`, or `undefined` when its value is\n * zero. `geo` is the box Recharts computed for that segment (its true y and height); segments\n * stack bottom to top in `values` order with `gap` pixels between them.\n */\nexport function stackedSegmentBox(\n  values: number[],\n  self: number,\n  geo: SegmentBox,\n  { gap = 0, minSize = CHART_MIN_SEGMENT }: { gap?: number; minSize?: number } = {},\n): SegmentBox | undefined {\n  const amounts = values.map(amount);\n  const value = amounts[self] ?? 0;\n  if (!(value > 0) || !Number.isFinite(geo.y) || !Number.isFinite(geo.height)) return undefined;\n  // Pixels per unit, from this segment's own box; every segment shares the scale.\n  const ppu = geo.height / value;\n  const below = amounts.slice(0, self).reduce((sum, v) => sum + v, 0);\n  const bottom = geo.y + geo.height + below * ppu;\n  const live = amounts.flatMap((v, i) => (v > 0 ? [i] : []));\n  const total = amounts.reduce((sum, v) => sum + v, 0) * ppu;\n  const gaps = gap * (live.length - 1);\n  const h = (i: number) => heights[i] ?? 0;\n  const heights = amounts.map(v => (v > 0 && total > 0 ? Math.max((v * ppu * (total - gaps)) / total, 0) : 0));\n  const small = live.filter(i => h(i) < minSize);\n  const large = live.filter(i => h(i) >= minSize);\n  const deficit = small.reduce((sum, i) => sum + minSize - h(i), 0);\n  const spare = large.reduce((sum, i) => sum + h(i) - minSize, 0);\n  for (const i of small) heights[i] = minSize;\n  for (const i of large) {\n    // Take the deficit from the larger segments, in proportion to what each can spare. When\n    // they can't spare enough, every segment sits at the minimum and the column grows to fit.\n    heights[i] = spare >= deficit ? h(i) - (spare > 0 ? ((h(i) - minSize) / spare) * deficit : 0) : minSize;\n  }\n  let top = bottom;\n  for (const i of live) {\n    top -= h(i);\n    if (i === self) return { y: top, height: h(i) };\n    top -= gap;\n  }\n  return undefined;\n}\n\n/** A single (unstacked) bar: grows up from its base to `minSize` when its value is tiny. */\nexport function singleBarBox(\n  value: number,\n  geo: SegmentBox,\n  { minSize = CHART_MIN_SEGMENT }: { minSize?: number } = {},\n): SegmentBox | undefined {\n  if (!(amount(value) > 0) || !Number.isFinite(geo.y) || !Number.isFinite(geo.height)) return undefined;\n  if (geo.height >= minSize) return geo;\n  return { y: geo.y + geo.height - minSize, height: minSize };\n}\n"],"names":[],"mappings":"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"}

package/dist/primitives/chart-frame.cjs.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const recharts = require('recharts');
+const primitives_chartAxes = require('./chart-axes.cjs.js');
+const primitives_chartLayout = require('./chart-layout.cjs.js');
+const primitives_chartTimeTick = require('./chart-time-tick.cjs.js');
+const colors = require('../colors-ChgVDfmK.cjs');
+
+const compactNumber = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+const CHART_TICK = { fontSize: primitives_chartLayout.CHART_AXIS_FONT_SIZE, fill: colors.CHART_LABEL_COLOR };
+function timeXAxis({
+  data,
+  xKey,
+  timestampKey,
+  xLabels,
+  plotWidth
+}) {
+  const labels = data.map((row) => String(row[xKey] ?? ""));
+  const timestamps = data.map((row) => {
+    const t = row[timestampKey];
+    return typeof t === "number" ? t : void 0;
+  });
+  const picked = primitives_chartAxes.pickTimeTicks(timestamps, labels, plotWidth, xLabels);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.XAxis,
+    {
+      dataKey: xKey,
+      height: primitives_chartLayout.X_AXIS_HEIGHT,
+      tick: (props) => /* @__PURE__ */ jsxRuntime.jsx(primitives_chartTimeTick.ChartTimeTick, { ...props, picked, count: data.length, plotWidth }),
+      tickLine: false,
+      axisLine: false,
+      tickMargin: 6,
+      interval: 0
+    }
+  );
+}
+const Y_AXIS_WIDTH = 44;
+function valueYAxis({
+  id = 0,
+  show,
+  size,
+  formatter,
+  domain,
+  right = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.YAxis,
+    {
+      yAxisId: id,
+      hide: !show,
+      orientation: right ? "right" : "left",
+      tick: CHART_TICK,
+      tickLine: false,
+      axisLine: false,
+      width: Y_AXIS_WIDTH,
+      tickMargin: 4,
+      tickFormatter: formatter,
+      domain,
+      tickCount: primitives_chartAxes.chartYTickCount(size.height)
+    }
+  );
+}
+
+exports.CHART_TICK = CHART_TICK;
+exports.Y_AXIS_WIDTH = Y_AXIS_WIDTH;
+exports.compactNumber = compactNumber;
+exports.timeXAxis = timeXAxis;
+exports.valueYAxis = valueYAxis;
+//# sourceMappingURL=chart-frame.cjs.js.map

package/dist/primitives/chart-frame.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-frame.cjs.js","sources":["../../src/ds/primitives/chart-frame.tsx"],"sourcesContent":["import { XAxis, YAxis } from 'recharts';\nimport { chartYTickCount, pickTimeTicks } from './chart-axes';\nimport type { ChartSize, ChartXLabels } from './chart-axes';\nimport { CHART_AXIS_FONT_SIZE, X_AXIS_HEIGHT } from './chart-layout';\nimport { ChartTimeTick } from './chart-time-tick';\nimport type { ChartTimeTickProps } from './chart-time-tick';\nimport { CHART_LABEL_COLOR } from '@/ds/tokens';\n\n/** A chart's height: pixels, or `fill` to grow with its parent (a flex column, e.g. a card). */\nexport type ChartHeight = number | 'fill';\n\nexport const compactNumber = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\nexport const CHART_TICK = { fontSize: CHART_AXIS_FONT_SIZE, fill: CHART_LABEL_COLOR };\n\n/** The x-axis of a time series: labels from `xKey`, placed on clock times from `timestampKey`. */\nexport function timeXAxis({\n  data,\n  xKey,\n  timestampKey,\n  xLabels,\n  plotWidth,\n}: {\n  data: Record<string, unknown>[];\n  xKey: string;\n  timestampKey: string;\n  xLabels: ChartXLabels;\n  plotWidth: number;\n}) {\n  const labels = data.map(row => String(row[xKey] ?? ''));\n  const timestamps = data.map(row => {\n    const t = row[timestampKey];\n    return typeof t === 'number' ? t : undefined;\n  });\n  const picked = pickTimeTicks(timestamps, labels, plotWidth, xLabels);\n  return (\n    <XAxis\n      dataKey={xKey}\n      height={X_AXIS_HEIGHT}\n      tick={(props: Omit<ChartTimeTickProps, 'picked' | 'count' | 'plotWidth'>) => (\n        <ChartTimeTick {...props} picked={picked} count={data.length} plotWidth={plotWidth} />\n      )}\n      tickLine={false}\n      axisLine={false}\n      tickMargin={6}\n      // Render every tick slot; ChartTimeTick decides which ones print a label.\n      interval={0}\n    />\n  );\n}\n\n/** Width of the y-axis label column when shown. */\nexport const Y_AXIS_WIDTH = 44;\n\nexport function valueYAxis({\n  id = 0,\n  show,\n  size,\n  formatter,\n  domain,\n  right = false,\n}: {\n  id?: string | number;\n  show: boolean;\n  size: ChartSize;\n  formatter: (value: number) => string;\n  domain?: [number, number];\n  right?: boolean;\n}) {\n  return (\n    <YAxis\n      yAxisId={id}\n      hide={!show}\n      orientation={right ? 'right' : 'left'}\n      tick={CHART_TICK}\n      tickLine={false}\n      axisLine={false}\n      width={Y_AXIS_WIDTH}\n      tickMargin={4}\n      tickFormatter={formatter}\n      domain={domain}\n      tickCount={chartYTickCount(size.height)}\n    />\n  );\n}\n"],"names":["CHART_AXIS_FONT_SIZE","CHART_LABEL_COLOR","pickTimeTicks","jsx","XAxis","X_AXIS_HEIGHT","ChartTimeTick","YAxis","chartYTickCount"],"mappings":";;;;;;;;;;;AAWO,MAAM,aAAA,GAAgB,IAAI,IAAA,CAAK,YAAA,CAAa,IAAA,EAAM,EAAE,QAAA,EAAU,SAAA,EAAW,qBAAA,EAAuB,CAAA,EAAG;AAEnG,MAAM,UAAA,GAAa,EAAE,QAAA,EAAUA,2CAAA,EAAsB,MAAMC,wBAAA;AAG3D,SAAS,SAAA,CAAU;AAAA,EACxB,IAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,MAAM,MAAA,GAAS,KAAK,GAAA,CAAI,CAAA,GAAA,KAAO,OAAO,GAAA,CAAI,IAAI,CAAA,IAAK,EAAE,CAAC,CAAA;AACtD,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,CAAA,GAAA,KAAO;AACjC,IAAA,MAAM,CAAA,GAAI,IAAI,YAAY,CAAA;AAC1B,IAAA,OAAO,OAAO,CAAA,KAAM,QAAA,GAAW,CAAA,GAAI,MAAA;AAAA,EACrC,CAAC,CAAA;AACD,EAAA,MAAM,MAAA,GAASC,kCAAA,CAAc,UAAA,EAAY,MAAA,EAAQ,WAAW,OAAO,CAAA;AACnE,EAAA,uBACEC,cAAA;AAAA,IAACC,cAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,IAAA;AAAA,MACT,MAAA,EAAQC,oCAAA;AAAA,MACR,IAAA,EAAM,CAAC,KAAA,qBACLF,cAAA,CAACG,sCAAA,EAAA,EAAe,GAAG,KAAA,EAAO,MAAA,EAAgB,KAAA,EAAO,IAAA,CAAK,MAAA,EAAQ,SAAA,EAAsB,CAAA;AAAA,MAEtF,QAAA,EAAU,KAAA;AAAA,MACV,QAAA,EAAU,KAAA;AAAA,MACV,UAAA,EAAY,CAAA;AAAA,MAEZ,QAAA,EAAU;AAAA;AAAA,GACZ;AAEJ;AAGO,MAAM,YAAA,GAAe;AAErB,SAAS,UAAA,CAAW;AAAA,EACzB,EAAA,GAAK,CAAA;AAAA,EACL,IAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA,GAAQ;AACV,CAAA,EAOG;AACD,EAAA,uBACEH,cAAA;AAAA,IAACI,cAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,EAAA;AAAA,MACT,MAAM,CAAC,IAAA;AAAA,MACP,WAAA,EAAa,QAAQ,OAAA,GAAU,MAAA;AAAA,MAC/B,IAAA,EAAM,UAAA;AAAA,MACN,QAAA,EAAU,KAAA;AAAA,MACV,QAAA,EAAU,KAAA;AAAA,MACV,KAAA,EAAO,YAAA;AAAA,MACP,UAAA,EAAY,CAAA;AAAA,MACZ,aAAA,EAAe,SAAA;AAAA,MACf,MAAA;AAAA,MACA,SAAA,EAAWC,oCAAA,CAAgB,IAAA,CAAK,MAAM;AAAA;AAAA,GACxC;AAEJ;;;;;;;;"}

package/dist/primitives/chart-frame.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/primitives/chart-frame'
+export {}

package/dist/primitives/chart-frame.es.js

@@ -0,0 +1,64 @@
+import { jsx } from 'react/jsx-runtime';
+import { XAxis, YAxis } from 'recharts';
+import { pickTimeTicks, chartYTickCount } from './chart-axes.es.js';
+import { CHART_AXIS_FONT_SIZE, X_AXIS_HEIGHT } from './chart-layout.es.js';
+import { ChartTimeTick } from './chart-time-tick.es.js';
+import { C as CHART_LABEL_COLOR } from '../colors-DkKF8vme.js';
+
+const compactNumber = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+const CHART_TICK = { fontSize: CHART_AXIS_FONT_SIZE, fill: CHART_LABEL_COLOR };
+function timeXAxis({
+  data,
+  xKey,
+  timestampKey,
+  xLabels,
+  plotWidth
+}) {
+  const labels = data.map((row) => String(row[xKey] ?? ""));
+  const timestamps = data.map((row) => {
+    const t = row[timestampKey];
+    return typeof t === "number" ? t : void 0;
+  });
+  const picked = pickTimeTicks(timestamps, labels, plotWidth, xLabels);
+  return /* @__PURE__ */ jsx(
+    XAxis,
+    {
+      dataKey: xKey,
+      height: X_AXIS_HEIGHT,
+      tick: (props) => /* @__PURE__ */ jsx(ChartTimeTick, { ...props, picked, count: data.length, plotWidth }),
+      tickLine: false,
+      axisLine: false,
+      tickMargin: 6,
+      interval: 0
+    }
+  );
+}
+const Y_AXIS_WIDTH = 44;
+function valueYAxis({
+  id = 0,
+  show,
+  size,
+  formatter,
+  domain,
+  right = false
+}) {
+  return /* @__PURE__ */ jsx(
+    YAxis,
+    {
+      yAxisId: id,
+      hide: !show,
+      orientation: right ? "right" : "left",
+      tick: CHART_TICK,
+      tickLine: false,
+      axisLine: false,
+      width: Y_AXIS_WIDTH,
+      tickMargin: 4,
+      tickFormatter: formatter,
+      domain,
+      tickCount: chartYTickCount(size.height)
+    }
+  );
+}
+
+export { CHART_TICK, Y_AXIS_WIDTH, compactNumber, timeXAxis, valueYAxis };
+//# sourceMappingURL=chart-frame.es.js.map

package/dist/primitives/chart-frame.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-frame.es.js","sources":["../../src/ds/primitives/chart-frame.tsx"],"sourcesContent":["import { XAxis, YAxis } from 'recharts';\nimport { chartYTickCount, pickTimeTicks } from './chart-axes';\nimport type { ChartSize, ChartXLabels } from './chart-axes';\nimport { CHART_AXIS_FONT_SIZE, X_AXIS_HEIGHT } from './chart-layout';\nimport { ChartTimeTick } from './chart-time-tick';\nimport type { ChartTimeTickProps } from './chart-time-tick';\nimport { CHART_LABEL_COLOR } from '@/ds/tokens';\n\n/** A chart's height: pixels, or `fill` to grow with its parent (a flex column, e.g. a card). */\nexport type ChartHeight = number | 'fill';\n\nexport const compactNumber = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\nexport const CHART_TICK = { fontSize: CHART_AXIS_FONT_SIZE, fill: CHART_LABEL_COLOR };\n\n/** The x-axis of a time series: labels from `xKey`, placed on clock times from `timestampKey`. */\nexport function timeXAxis({\n  data,\n  xKey,\n  timestampKey,\n  xLabels,\n  plotWidth,\n}: {\n  data: Record<string, unknown>[];\n  xKey: string;\n  timestampKey: string;\n  xLabels: ChartXLabels;\n  plotWidth: number;\n}) {\n  const labels = data.map(row => String(row[xKey] ?? ''));\n  const timestamps = data.map(row => {\n    const t = row[timestampKey];\n    return typeof t === 'number' ? t : undefined;\n  });\n  const picked = pickTimeTicks(timestamps, labels, plotWidth, xLabels);\n  return (\n    <XAxis\n      dataKey={xKey}\n      height={X_AXIS_HEIGHT}\n      tick={(props: Omit<ChartTimeTickProps, 'picked' | 'count' | 'plotWidth'>) => (\n        <ChartTimeTick {...props} picked={picked} count={data.length} plotWidth={plotWidth} />\n      )}\n      tickLine={false}\n      axisLine={false}\n      tickMargin={6}\n      // Render every tick slot; ChartTimeTick decides which ones print a label.\n      interval={0}\n    />\n  );\n}\n\n/** Width of the y-axis label column when shown. */\nexport const Y_AXIS_WIDTH = 44;\n\nexport function valueYAxis({\n  id = 0,\n  show,\n  size,\n  formatter,\n  domain,\n  right = false,\n}: {\n  id?: string | number;\n  show: boolean;\n  size: ChartSize;\n  formatter: (value: number) => string;\n  domain?: [number, number];\n  right?: boolean;\n}) {\n  return (\n    <YAxis\n      yAxisId={id}\n      hide={!show}\n      orientation={right ? 'right' : 'left'}\n      tick={CHART_TICK}\n      tickLine={false}\n      axisLine={false}\n      width={Y_AXIS_WIDTH}\n      tickMargin={4}\n      tickFormatter={formatter}\n      domain={domain}\n      tickCount={chartYTickCount(size.height)}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,aAAA,GAAgB,IAAI,IAAA,CAAK,YAAA,CAAa,IAAA,EAAM,EAAE,QAAA,EAAU,SAAA,EAAW,qBAAA,EAAuB,CAAA,EAAG;AAEnG,MAAM,UAAA,GAAa,EAAE,QAAA,EAAU,oBAAA,EAAsB,MAAM,iBAAA;AAG3D,SAAS,SAAA,CAAU;AAAA,EACxB,IAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,MAAM,MAAA,GAAS,KAAK,GAAA,CAAI,CAAA,GAAA,KAAO,OAAO,GAAA,CAAI,IAAI,CAAA,IAAK,EAAE,CAAC,CAAA;AACtD,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,CAAA,GAAA,KAAO;AACjC,IAAA,MAAM,CAAA,GAAI,IAAI,YAAY,CAAA;AAC1B,IAAA,OAAO,OAAO,CAAA,KAAM,QAAA,GAAW,CAAA,GAAI,MAAA;AAAA,EACrC,CAAC,CAAA;AACD,EAAA,MAAM,MAAA,GAAS,aAAA,CAAc,UAAA,EAAY,MAAA,EAAQ,WAAW,OAAO,CAAA;AACnE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,IAAA;AAAA,MACT,MAAA,EAAQ,aAAA;AAAA,MACR,IAAA,EAAM,CAAC,KAAA,qBACL,GAAA,CAAC,aAAA,EAAA,EAAe,GAAG,KAAA,EAAO,MAAA,EAAgB,KAAA,EAAO,IAAA,CAAK,MAAA,EAAQ,SAAA,EAAsB,CAAA;AAAA,MAEtF,QAAA,EAAU,KAAA;AAAA,MACV,QAAA,EAAU,KAAA;AAAA,MACV,UAAA,EAAY,CAAA;AAAA,MAEZ,QAAA,EAAU;AAAA;AAAA,GACZ;AAEJ;AAGO,MAAM,YAAA,GAAe;AAErB,SAAS,UAAA,CAAW;AAAA,EACzB,EAAA,GAAK,CAAA;AAAA,EACL,IAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA,GAAQ;AACV,CAAA,EAOG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,EAAA;AAAA,MACT,MAAM,CAAC,IAAA;AAAA,MACP,WAAA,EAAa,QAAQ,OAAA,GAAU,MAAA;AAAA,MAC/B,IAAA,EAAM,UAAA;AAAA,MACN,QAAA,EAAU,KAAA;AAAA,MACV,QAAA,EAAU,KAAA;AAAA,MACV,KAAA,EAAO,YAAA;AAAA,MACP,UAAA,EAAY,CAAA;AAAA,MACZ,aAAA,EAAe,SAAA;AAAA,MACf,MAAA;AAAA,MACA,SAAA,EAAW,eAAA,CAAgB,IAAA,CAAK,MAAM;AAAA;AAAA,GACxC;AAEJ;;;;"}

package/dist/primitives/chart-layout.cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const CHART_MARGIN = { top: 8, right: 0, bottom: 0, left: 0 };
+const X_AXIS_HEIGHT = 22;
+const CHART_AXIS_FONT_SIZE = 11;
+
+exports.CHART_AXIS_FONT_SIZE = CHART_AXIS_FONT_SIZE;
+exports.CHART_MARGIN = CHART_MARGIN;
+exports.X_AXIS_HEIGHT = X_AXIS_HEIGHT;
+//# sourceMappingURL=chart-layout.cjs.js.map

package/dist/primitives/chart-layout.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-layout.cjs.js","sources":["../../src/ds/primitives/chart-layout.ts"],"sourcesContent":["/**\n * Shared plot geometry for the metrics charts.\n *\n * Recharts reserves a 30px band under the plot for x-axis labels by default; our labels are\n * 11px, so most of that band was empty and the card's bottom padding looked about three times\n * its top. `X_AXIS_HEIGHT` fits the band to the label, and the bottom margin is 0 so the card's\n * own padding is the only space below. No side margins: `ChartTimeTick` keeps the outer labels\n * inside the plot, so the plot lines up with the card's content. The top margin keeps a peak's\n * rounded corner and an active dot clear of the card's top bar.\n */\nexport const CHART_MARGIN = { top: 8, right: 0, bottom: 0, left: 0 };\n\nexport const X_AXIS_HEIGHT = 22;\n\n/** Axis labels of the metrics charts: 11px in the body font, muted. */\nexport const CHART_AXIS_FONT_SIZE = 11;\n"],"names":[],"mappings":";;;;AAUO,MAAM,YAAA,GAAe,EAAE,GAAA,EAAK,CAAA,EAAG,OAAO,CAAA,EAAG,MAAA,EAAQ,CAAA,EAAG,IAAA,EAAM,CAAA;AAE1D,MAAM,aAAA,GAAgB;AAGtB,MAAM,oBAAA,GAAuB;;;;;;"}

package/dist/primitives/chart-layout.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/primitives/chart-layout'
+export {}

package/dist/primitives/chart-layout.es.js

@@ -0,0 +1,6 @@
+const CHART_MARGIN = { top: 8, right: 0, bottom: 0, left: 0 };
+const X_AXIS_HEIGHT = 22;
+const CHART_AXIS_FONT_SIZE = 11;
+
+export { CHART_AXIS_FONT_SIZE, CHART_MARGIN, X_AXIS_HEIGHT };
+//# sourceMappingURL=chart-layout.es.js.map

package/dist/primitives/chart-layout.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-layout.es.js","sources":["../../src/ds/primitives/chart-layout.ts"],"sourcesContent":["/**\n * Shared plot geometry for the metrics charts.\n *\n * Recharts reserves a 30px band under the plot for x-axis labels by default; our labels are\n * 11px, so most of that band was empty and the card's bottom padding looked about three times\n * its top. `X_AXIS_HEIGHT` fits the band to the label, and the bottom margin is 0 so the card's\n * own padding is the only space below. No side margins: `ChartTimeTick` keeps the outer labels\n * inside the plot, so the plot lines up with the card's content. The top margin keeps a peak's\n * rounded corner and an active dot clear of the card's top bar.\n */\nexport const CHART_MARGIN = { top: 8, right: 0, bottom: 0, left: 0 };\n\nexport const X_AXIS_HEIGHT = 22;\n\n/** Axis labels of the metrics charts: 11px in the body font, muted. */\nexport const CHART_AXIS_FONT_SIZE = 11;\n"],"names":[],"mappings":"AAUO,MAAM,YAAA,GAAe,EAAE,GAAA,EAAK,CAAA,EAAG,OAAO,CAAA,EAAG,MAAA,EAAQ,CAAA,EAAG,IAAA,EAAM,CAAA;AAE1D,MAAM,aAAA,GAAgB;AAGtB,MAAM,oBAAA,GAAuB;;;;"}

package/dist/primitives/chart-plot.cjs.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const recharts = require('recharts');
+const utils_cn = require('../cn-TqD01zH-.cjs');
+
+function ChartPlot({
+  height,
+  plotRef,
+  onResize,
+  clickable,
+  children
+}) {
+  const surface = utils_cn.cn(
+    "w-full [&_.recharts-surface]:overflow-visible [&_.recharts-surface]:outline-none",
+    "[&_*:focus:not(:focus-visible)]:outline-none",
+    clickable && "[&_.recharts-surface]:cursor-pointer"
+  );
+  if (height === "fill") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative min-h-45 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: plotRef, className: utils_cn.cn("absolute inset-0", surface), children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", onResize, children }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: plotRef, className: surface, style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", onResize, children }) });
+}
+
+exports.ChartPlot = ChartPlot;
+//# sourceMappingURL=chart-plot.cjs.js.map

package/dist/primitives/chart-plot.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-plot.cjs.js","sources":["../../src/ds/primitives/chart-plot.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { ResponsiveContainer } from 'recharts';\nimport type { ChartHeight } from './chart-frame';\nimport { cn } from '@/lib/utils';\n\n/**\n * Sizes the plot. `fill` takes the parent's free height, out of flow: a ResponsiveContainer at\n * 100% height can round a pixel past its box, which would make the card scroll by a hair.\n */\nexport function ChartPlot({\n  height,\n  plotRef,\n  onResize,\n  clickable,\n  children,\n}: {\n  height: ChartHeight;\n  plotRef: React.Ref<HTMLDivElement>;\n  onResize: (width: number, height: number) => void;\n  clickable?: boolean;\n  children: ReactNode;\n}) {\n  // Recharts makes parts of the plot focusable for keyboard use; a mouse click shouldn't leave a\n  // focus ring around the chart, keyboard focus still shows one.\n  const surface = cn(\n    'w-full [&_.recharts-surface]:overflow-visible [&_.recharts-surface]:outline-none',\n    '[&_*:focus:not(:focus-visible)]:outline-none',\n    clickable && '[&_.recharts-surface]:cursor-pointer',\n  );\n  if (height === 'fill') {\n    return (\n      <div className=\"relative min-h-45 flex-1\">\n        <div ref={plotRef} className={cn('absolute inset-0', surface)}>\n          <ResponsiveContainer width=\"100%\" height=\"100%\" onResize={onResize}>\n            {children}\n          </ResponsiveContainer>\n        </div>\n      </div>\n    );\n  }\n  return (\n    <div ref={plotRef} className={surface} style={{ height }}>\n      <ResponsiveContainer width=\"100%\" height=\"100%\" onResize={onResize}>\n        {children}\n      </ResponsiveContainer>\n    </div>\n  );\n}\n"],"names":["cn","jsx","ResponsiveContainer"],"mappings":";;;;;;;;AASO,SAAS,SAAA,CAAU;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAMG;AAGD,EAAA,MAAM,OAAA,GAAUA,WAAA;AAAA,IACd,kFAAA;AAAA,IACA,8CAAA;AAAA,IACA,SAAA,IAAa;AAAA,GACf;AACA,EAAA,IAAI,WAAW,MAAA,EAAQ;AACrB,IAAA,uBACEC,cAAA,CAAC,SAAI,SAAA,EAAU,0BAAA,EACb,yCAAC,KAAA,EAAA,EAAI,GAAA,EAAK,OAAA,EAAS,SAAA,EAAWD,WAAA,CAAG,kBAAA,EAAoB,OAAO,CAAA,EAC1D,QAAA,kBAAAC,cAAA,CAACC,gCAAoB,KAAA,EAAM,MAAA,EAAO,QAAO,MAAA,EAAO,QAAA,EAC7C,QAAA,EACH,CAAA,EACF,CAAA,EACF,CAAA;AAAA,EAEJ;AACA,EAAA,sCACG,KAAA,EAAA,EAAI,GAAA,EAAK,SAAS,SAAA,EAAW,OAAA,EAAS,OAAO,EAAE,MAAA,EAAO,EACrD,QAAA,kBAAAD,cAAA,CAACC,gCAAoB,KAAA,EAAM,MAAA,EAAO,QAAO,MAAA,EAAO,QAAA,EAC7C,UACH,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/primitives/chart-plot.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/primitives/chart-plot'
+export {}

package/dist/primitives/chart-plot.es.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { ResponsiveContainer } from 'recharts';
+import { c as cn } from '../cn-coERSHz5.js';
+
+function ChartPlot({
+  height,
+  plotRef,
+  onResize,
+  clickable,
+  children
+}) {
+  const surface = cn(
+    "w-full [&_.recharts-surface]:overflow-visible [&_.recharts-surface]:outline-none",
+    "[&_*:focus:not(:focus-visible)]:outline-none",
+    clickable && "[&_.recharts-surface]:cursor-pointer"
+  );
+  if (height === "fill") {
+    return /* @__PURE__ */ jsx("div", { className: "relative min-h-45 flex-1", children: /* @__PURE__ */ jsx("div", { ref: plotRef, className: cn("absolute inset-0", surface), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", onResize, children }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: plotRef, className: surface, style: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", onResize, children }) });
+}
+
+export { ChartPlot };
+//# sourceMappingURL=chart-plot.es.js.map

package/dist/primitives/chart-plot.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-plot.es.js","sources":["../../src/ds/primitives/chart-plot.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { ResponsiveContainer } from 'recharts';\nimport type { ChartHeight } from './chart-frame';\nimport { cn } from '@/lib/utils';\n\n/**\n * Sizes the plot. `fill` takes the parent's free height, out of flow: a ResponsiveContainer at\n * 100% height can round a pixel past its box, which would make the card scroll by a hair.\n */\nexport function ChartPlot({\n  height,\n  plotRef,\n  onResize,\n  clickable,\n  children,\n}: {\n  height: ChartHeight;\n  plotRef: React.Ref<HTMLDivElement>;\n  onResize: (width: number, height: number) => void;\n  clickable?: boolean;\n  children: ReactNode;\n}) {\n  // Recharts makes parts of the plot focusable for keyboard use; a mouse click shouldn't leave a\n  // focus ring around the chart, keyboard focus still shows one.\n  const surface = cn(\n    'w-full [&_.recharts-surface]:overflow-visible [&_.recharts-surface]:outline-none',\n    '[&_*:focus:not(:focus-visible)]:outline-none',\n    clickable && '[&_.recharts-surface]:cursor-pointer',\n  );\n  if (height === 'fill') {\n    return (\n      <div className=\"relative min-h-45 flex-1\">\n        <div ref={plotRef} className={cn('absolute inset-0', surface)}>\n          <ResponsiveContainer width=\"100%\" height=\"100%\" onResize={onResize}>\n            {children}\n          </ResponsiveContainer>\n        </div>\n      </div>\n    );\n  }\n  return (\n    <div ref={plotRef} className={surface} style={{ height }}>\n      <ResponsiveContainer width=\"100%\" height=\"100%\" onResize={onResize}>\n        {children}\n      </ResponsiveContainer>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AASO,SAAS,SAAA,CAAU;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAMG;AAGD,EAAA,MAAM,OAAA,GAAU,EAAA;AAAA,IACd,kFAAA;AAAA,IACA,8CAAA;AAAA,IACA,SAAA,IAAa;AAAA,GACf;AACA,EAAA,IAAI,WAAW,MAAA,EAAQ;AACrB,IAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAU,0BAAA,EACb,8BAAC,KAAA,EAAA,EAAI,GAAA,EAAK,OAAA,EAAS,SAAA,EAAW,EAAA,CAAG,kBAAA,EAAoB,OAAO,CAAA,EAC1D,QAAA,kBAAA,GAAA,CAAC,uBAAoB,KAAA,EAAM,MAAA,EAAO,QAAO,MAAA,EAAO,QAAA,EAC7C,QAAA,EACH,CAAA,EACF,CAAA,EACF,CAAA;AAAA,EAEJ;AACA,EAAA,2BACG,KAAA,EAAA,EAAI,GAAA,EAAK,SAAS,SAAA,EAAW,OAAA,EAAS,OAAO,EAAE,MAAA,EAAO,EACrD,QAAA,kBAAA,GAAA,CAAC,uBAAoB,KAAA,EAAM,MAAA,EAAO,QAAO,MAAA,EAAO,QAAA,EAC7C,UACH,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/primitives/chart-time-tick.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const primitives_chartAxes = require('./chart-axes.cjs.js');
+const primitives_chartLayout = require('./chart-layout.cjs.js');
+const colors = require('../colors-ChgVDfmK.cjs');
+
+function ChartTimeTick({ x = 0, y = 0, payload, picked, count, plotWidth }) {
+  if (!payload || !plotWidth || !picked.has(payload.index)) return null;
+  const text = String(payload.value);
+  const half = payload.offset ?? 0;
+  const left = half > 0 ? x - half * (2 * payload.index + 1) : x - payload.index * plotWidth / Math.max(count - 1, 1);
+  const w = primitives_chartAxes.labelWidth(text) / 2;
+  const tx = Math.min(Math.max(x, left + w), left + plotWidth - w);
+  return /* @__PURE__ */ jsxRuntime.jsx("text", { x: tx, y, dy: "0.71em", textAnchor: "middle", fontSize: primitives_chartLayout.CHART_AXIS_FONT_SIZE, fill: colors.CHART_LABEL_COLOR, children: text });
+}
+
+exports.ChartTimeTick = ChartTimeTick;
+//# sourceMappingURL=chart-time-tick.cjs.js.map

package/dist/primitives/chart-time-tick.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-time-tick.cjs.js","sources":["../../src/ds/primitives/chart-time-tick.tsx"],"sourcesContent":["import { labelWidth } from './chart-axes';\nimport { CHART_AXIS_FONT_SIZE } from './chart-layout';\nimport { CHART_LABEL_COLOR } from '@/ds/tokens';\n\nexport type ChartTimeTickProps = {\n  x?: number;\n  y?: number;\n  index?: number;\n  payload?: { value: string; index: number; offset?: number };\n  /** Buckets that print a label (from `pickTimeTicks`). */\n  picked: Set<number>;\n  count: number;\n  plotWidth: number;\n};\n\n/**\n * An x label on picked buckets only, centred on its bucket and nudged inward only as far as it\n * takes to stay inside the plot, so the chart needs no side margin.\n */\nexport function ChartTimeTick({ x = 0, y = 0, payload, picked, count, plotWidth }: ChartTimeTickProps) {\n  if (!payload || !plotWidth || !picked.has(payload.index)) return null;\n  const text = String(payload.value);\n  const half = payload.offset ?? 0;\n  // Bars sit in bands (label at the band's centre); lines sit on points (first at the edge).\n  const left = half > 0 ? x - half * (2 * payload.index + 1) : x - (payload.index * plotWidth) / Math.max(count - 1, 1);\n  const w = labelWidth(text) / 2;\n  const tx = Math.min(Math.max(x, left + w), left + plotWidth - w);\n  return (\n    <text x={tx} y={y} dy=\"0.71em\" textAnchor=\"middle\" fontSize={CHART_AXIS_FONT_SIZE} fill={CHART_LABEL_COLOR}>\n      {text}\n    </text>\n  );\n}\n"],"names":["labelWidth","jsx","CHART_AXIS_FONT_SIZE","CHART_LABEL_COLOR"],"mappings":";;;;;;;;;AAmBO,SAAS,aAAA,CAAc,EAAE,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,GAAG,OAAA,EAAS,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAU,EAAuB;AACrG,EAAA,IAAI,CAAC,OAAA,IAAW,CAAC,SAAA,IAAa,CAAC,OAAO,GAAA,CAAI,OAAA,CAAQ,KAAK,CAAA,EAAG,OAAO,IAAA;AACjE,EAAA,MAAM,IAAA,GAAO,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA;AACjC,EAAA,MAAM,IAAA,GAAO,QAAQ,MAAA,IAAU,CAAA;AAE/B,EAAA,MAAM,OAAO,IAAA,GAAO,CAAA,GAAI,CAAA,GAAI,IAAA,IAAQ,IAAI,OAAA,CAAQ,KAAA,GAAQ,CAAA,CAAA,GAAK,CAAA,GAAK,QAAQ,KAAA,GAAQ,SAAA,GAAa,KAAK,GAAA,CAAI,KAAA,GAAQ,GAAG,CAAC,CAAA;AACpH,EAAA,MAAM,CAAA,GAAIA,+BAAA,CAAW,IAAI,CAAA,GAAI,CAAA;AAC7B,EAAA,MAAM,EAAA,GAAK,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,GAAO,CAAC,CAAA,EAAG,IAAA,GAAO,SAAA,GAAY,CAAC,CAAA;AAC/D,EAAA,uBACEC,cAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAG,EAAA,EAAI,CAAA,EAAM,EAAA,EAAG,QAAA,EAAS,UAAA,EAAW,QAAA,EAAS,QAAA,EAAUC,2CAAA,EAAsB,IAAA,EAAMC,0BACtF,QAAA,EAAA,IAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/primitives/chart-time-tick.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/primitives/chart-time-tick'
+export {}

package/dist/primitives/chart-time-tick.es.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { labelWidth } from './chart-axes.es.js';
+import { CHART_AXIS_FONT_SIZE } from './chart-layout.es.js';
+import { C as CHART_LABEL_COLOR } from '../colors-DkKF8vme.js';
+
+function ChartTimeTick({ x = 0, y = 0, payload, picked, count, plotWidth }) {
+  if (!payload || !plotWidth || !picked.has(payload.index)) return null;
+  const text = String(payload.value);
+  const half = payload.offset ?? 0;
+  const left = half > 0 ? x - half * (2 * payload.index + 1) : x - payload.index * plotWidth / Math.max(count - 1, 1);
+  const w = labelWidth(text) / 2;
+  const tx = Math.min(Math.max(x, left + w), left + plotWidth - w);
+  return /* @__PURE__ */ jsx("text", { x: tx, y, dy: "0.71em", textAnchor: "middle", fontSize: CHART_AXIS_FONT_SIZE, fill: CHART_LABEL_COLOR, children: text });
+}
+
+export { ChartTimeTick };
+//# sourceMappingURL=chart-time-tick.es.js.map

package/dist/primitives/chart-time-tick.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-time-tick.es.js","sources":["../../src/ds/primitives/chart-time-tick.tsx"],"sourcesContent":["import { labelWidth } from './chart-axes';\nimport { CHART_AXIS_FONT_SIZE } from './chart-layout';\nimport { CHART_LABEL_COLOR } from '@/ds/tokens';\n\nexport type ChartTimeTickProps = {\n  x?: number;\n  y?: number;\n  index?: number;\n  payload?: { value: string; index: number; offset?: number };\n  /** Buckets that print a label (from `pickTimeTicks`). */\n  picked: Set<number>;\n  count: number;\n  plotWidth: number;\n};\n\n/**\n * An x label on picked buckets only, centred on its bucket and nudged inward only as far as it\n * takes to stay inside the plot, so the chart needs no side margin.\n */\nexport function ChartTimeTick({ x = 0, y = 0, payload, picked, count, plotWidth }: ChartTimeTickProps) {\n  if (!payload || !plotWidth || !picked.has(payload.index)) return null;\n  const text = String(payload.value);\n  const half = payload.offset ?? 0;\n  // Bars sit in bands (label at the band's centre); lines sit on points (first at the edge).\n  const left = half > 0 ? x - half * (2 * payload.index + 1) : x - (payload.index * plotWidth) / Math.max(count - 1, 1);\n  const w = labelWidth(text) / 2;\n  const tx = Math.min(Math.max(x, left + w), left + plotWidth - w);\n  return (\n    <text x={tx} y={y} dy=\"0.71em\" textAnchor=\"middle\" fontSize={CHART_AXIS_FONT_SIZE} fill={CHART_LABEL_COLOR}>\n      {text}\n    </text>\n  );\n}\n"],"names":[],"mappings":";;;;;AAmBO,SAAS,aAAA,CAAc,EAAE,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,GAAG,OAAA,EAAS,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAU,EAAuB;AACrG,EAAA,IAAI,CAAC,OAAA,IAAW,CAAC,SAAA,IAAa,CAAC,OAAO,GAAA,CAAI,OAAA,CAAQ,KAAK,CAAA,EAAG,OAAO,IAAA;AACjE,EAAA,MAAM,IAAA,GAAO,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA;AACjC,EAAA,MAAM,IAAA,GAAO,QAAQ,MAAA,IAAU,CAAA;AAE/B,EAAA,MAAM,OAAO,IAAA,GAAO,CAAA,GAAI,CAAA,GAAI,IAAA,IAAQ,IAAI,OAAA,CAAQ,KAAA,GAAQ,CAAA,CAAA,GAAK,CAAA,GAAK,QAAQ,KAAA,GAAQ,SAAA,GAAa,KAAK,GAAA,CAAI,KAAA,GAAQ,GAAG,CAAC,CAAA;AACpH,EAAA,MAAM,CAAA,GAAI,UAAA,CAAW,IAAI,CAAA,GAAI,CAAA;AAC7B,EAAA,MAAM,EAAA,GAAK,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,GAAO,CAAC,CAAA,EAAG,IAAA,GAAO,SAAA,GAAY,CAAC,CAAA;AAC/D,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAG,EAAA,EAAI,CAAA,EAAM,EAAA,EAAG,QAAA,EAAS,UAAA,EAAW,QAAA,EAAS,QAAA,EAAU,oBAAA,EAAsB,IAAA,EAAM,mBACtF,QAAA,EAAA,IAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/primitives/fluid-menu.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const components_fluidHoverHighlight = require('../components/fluid-hover-highlight.cjs.js');
 const hooks_useFluidHover = require('../hooks/use-fluid-hover.cjs.js');
-const utils_cn = require('../cn-DG0X1KEP.cjs');
+const utils_cn = require('../cn-TqD01zH-.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/dist/primitives/fluid-menu.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { FluidHoverHighlight } from '../components/fluid-hover-highlight.es.js';
 import { useFluidHover } from '../hooks/use-fluid-hover.es.js';
-import { c as cn } from '../cn-65Adrsfj.js';
+import { c as cn } from '../cn-coERSHz5.js';
 
 const POPUP_OPEN_ATTR = "data-popup-open";
 const FluidMenuContext = React.createContext(void 0);

package/dist/primitives/menu-item.cjs.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const Button = require('../Button-CXhSUBxN.cjs');
+const Button = require('../Button-BTuu6_hv.cjs');
 const primitives_raisedSurface = require('./raised-surface.cjs.js');
-const utils_cn = require('../cn-DG0X1KEP.cjs');
+const utils_cn = require('../cn-TqD01zH-.cjs');
 
 const MENU_ITEM_OVERRIDES = utils_cn.cn(
   "flex w-full justify-start rounded-lg text-left select-none",

package/dist/primitives/menu-item.es.js

@@ -1,6 +1,6 @@
-import { b as buttonVariants } from '../Button-D43ghVKt.js';
+import { b as buttonVariants } from '../Button-D76HGlPP.js';
 import { overlaySurfaceStyle } from './raised-surface.es.js';
-import { c as cn } from '../cn-65Adrsfj.js';
+import { c as cn } from '../cn-coERSHz5.js';
 
 const MENU_ITEM_OVERRIDES = cn(
   "flex w-full justify-start rounded-lg text-left select-none",

package/dist/primitives/resize-handle-indicator.cjs.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const index = require('../index-C-fBJhpb.cjs');
-const utils_cn = require('../cn-DG0X1KEP.cjs');
+const index = require('../index-DlPxfJz9.cjs');
+const utils_cn = require('../cn-TqD01zH-.cjs');
 
 const indicatorVariants = index.cva(
   "pointer-events-none block transition-all duration-150 ease-out motion-reduce:transition-none",

package/dist/primitives/resize-handle-indicator.es.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import { c as cva } from '../index-Dubp6Qv4.js';
-import { c as cn } from '../cn-65Adrsfj.js';
+import { c as cva } from '../index-D_f78K7e.js';
+import { c as cn } from '../cn-coERSHz5.js';
 
 const indicatorVariants = cva(
   "pointer-events-none block transition-all duration-150 ease-out motion-reduce:transition-none",