@usetheo/ui 0.18.0 → 0.19.0

package/dist/components/composites/trend-chart/index.d.ts

@@ -0,0 +1 @@
+export { linScale, niceMax, seriesPath, TrendChart, type TrendChartProps, type TrendPoint, type TrendSeries, } from "./trend-chart.js";

package/dist/components/composites/trend-chart/trend-chart.d.ts

@@ -0,0 +1,44 @@
+import type { HTMLAttributes } from "react";
+/**
+ * TrendChart — multi-series time-trend chart in pure SVG (no chart lib —
+ * keeps the registry copy-pasteable). Promoted from the theo-cloud dashboard
+ * (production since M51, with the M76 sparse-marker and M90 ragged-series
+ * lessons pinned by tests).
+ *
+ * Input contract: `y` values are expected finite and >= 0 (latency, counts);
+ * non-finite points are skipped in the line and read as "—" in the table;
+ * gaps are modeled by OMITTING the point (the a11y table reads each value
+ * under its own period — never positionally). Points are connected in the
+ * order given; sort by `x` upstream. Series `color` is any CSS color — prefer
+ * theme tokens (e.g. `var(--primary)`).
+ *
+ *   <TrendChart title="Latency" valueFormatter={(v) => `${v}ms`}
+ *               series={[{ name: "p50", color: "var(--primary)", points }]} />
+ */
+export interface TrendPoint {
+    /** X in the series' own units (bucket index or epoch-ms); scaled linearly. */
+    x: number;
+    /** Y value for this point. */
+    y: number;
+}
+export interface TrendSeries {
+    name: string;
+    /** CSS color for the line + legend swatch (prefer theme tokens). */
+    color: string;
+    points: TrendPoint[];
+}
+/** Linear scale mapping a value in `domain` to `range`. A zero-width domain maps everything to r0. */
+export declare function linScale(domain: [number, number], range: [number, number]): (v: number) => number;
+/** A clean upper Y bound ≥ max(values). Returns 0 when there is no positive value. */
+export declare function niceMax(values: number[]): number;
+/** SVG path `d` for a polyline over the given scales. Non-finite points are skipped. */
+export declare function seriesPath(points: TrendPoint[], xScale: (x: number) => number, yScale: (y: number) => number): string;
+export interface TrendChartProps extends HTMLAttributes<HTMLElement> {
+    title: string;
+    series: TrendSeries[];
+    height?: number;
+    /** Formats y-axis labels and table cells (tremor vocabulary). */
+    valueFormatter?: (v: number) => string;
+}
+declare const TrendChart: import("react").ForwardRefExoticComponent<TrendChartProps & import("react").RefAttributes<HTMLElement>>;
+export { TrendChart };

package/dist/index.d.ts

@@ -47,6 +47,7 @@ export { ActionBar, type ActionBarProps } from "./components/primitives/action-b
 export { PinInput, type PinInputProps } from "./components/primitives/pin-input/index.js";
 export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, } from "./components/composites/data-table/index.js";
 export { PageShell, type PageShellProps } from "./components/composites/page-shell/index.js";
+export { linScale, niceMax, seriesPath, TrendChart, type TrendChartProps, type TrendPoint, type TrendSeries, } from "./components/composites/trend-chart/index.js";
 export { MetricsPanel, type Metric } from "./components/primitives/metrics-panel/index.js";
 export { SocialAuthRow, type SocialProvider, } from "./components/primitives/social-auth-row/index.js";
 export { LoginSplit } from "./components/primitives/login-split/index.js";

package/dist/index.js

@@ -4378,6 +4378,167 @@ var PageShell = forwardRef(
   }
 );
 PageShell.displayName = "PageShell";
+function linScale(domain, range) {
+  const [d0, d1] = domain;
+  const [r0, r1] = range;
+  const span = d1 - d0;
+  return (v) => span === 0 ? r0 : r0 + (v - d0) / span * (r1 - r0);
+}
+function niceMax(values) {
+  const m = Math.max(0, ...values.filter((v) => Number.isFinite(v)));
+  if (m <= 0) return 0;
+  const pow = 10 ** Math.floor(Math.log10(m));
+  return Math.ceil(m / pow) * pow;
+}
+function seriesPath(points, xScale, yScale) {
+  const finite = points.filter((p) => Number.isFinite(p.y));
+  if (finite.length === 0) return "";
+  return finite.map((p, i) => `${i === 0 ? "M" : "L"}${xScale(p.x).toFixed(2)},${yScale(p.y).toFixed(2)}`).join(" ");
+}
+var VIEW_W = 600;
+var PAD = { top: 8, right: 8, bottom: 4, left: 40 };
+var SPARSE_MARKER_MAX = 5;
+var TrendChart = forwardRef(
+  ({ title, series, height = 180, valueFormatter = (v) => String(v), className, ...props }, ref) => {
+    const allPoints = series.flatMap((s) => s.points);
+    const hasData = allPoints.some((p) => Number.isFinite(p.y));
+    if (!hasData) {
+      return /* @__PURE__ */ jsxs(
+        "figure",
+        {
+          "data-slot": "trend-chart",
+          ref,
+          className: cn("space-y-1", className),
+          "aria-label": `${title} \u2014 no data`,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("figcaption", { className: "font-semibold text-label-caps text-muted-foreground uppercase", children: title }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "trend-chart-empty",
+                className: "flex items-center justify-center rounded-md border border-dashed text-body-sm text-muted-foreground",
+                style: { height },
+                children: "No data in this time range."
+              }
+            )
+          ]
+        }
+      );
+    }
+    const xs = allPoints.map((p) => p.x);
+    const xMin = Math.min(...xs);
+    const xMax = Math.max(...xs);
+    const yMax = niceMax(allPoints.map((p) => p.y)) || 1;
+    const axisXs = Array.from(new Set(allPoints.map((p) => p.x))).sort((a, b) => a - b);
+    const yByX = series.map((s) => new Map(s.points.map((p) => [p.x, p.y])));
+    const xScale = linScale([xMin, xMax], [PAD.left, VIEW_W - PAD.right]);
+    const yScale = linScale([0, yMax], [height - PAD.bottom, PAD.top]);
+    return /* @__PURE__ */ jsxs("figure", { "data-slot": "trend-chart", ref, className: cn("space-y-1", className), ...props, children: [
+      /* @__PURE__ */ jsx("figcaption", { className: "font-semibold text-label-caps text-muted-foreground uppercase", children: title }),
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: `0 0 ${VIEW_W} ${height}`,
+          preserveAspectRatio: "none",
+          role: "img",
+          "aria-label": `${title} trend`,
+          className: "w-full",
+          style: { height },
+          children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: PAD.left,
+                y1: height - PAD.bottom,
+                x2: VIEW_W - PAD.right,
+                y2: height - PAD.bottom,
+                className: "stroke-border",
+                strokeWidth: 1
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: PAD.left,
+                y1: PAD.top,
+                x2: VIEW_W - PAD.right,
+                y2: PAD.top,
+                className: "stroke-border/50",
+                strokeWidth: 1,
+                strokeDasharray: "2 3"
+              }
+            ),
+            /* @__PURE__ */ jsx("text", { x: 4, y: PAD.top + 8, className: "fill-muted-foreground text-[10px]", children: valueFormatter(yMax) }),
+            /* @__PURE__ */ jsx("text", { x: 4, y: height - PAD.bottom, className: "fill-muted-foreground text-[10px]", children: "0" }),
+            series.map((s) => /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  "data-slot": "trend-chart-line",
+                  "data-series": s.name,
+                  d: seriesPath(s.points, xScale, yScale),
+                  fill: "none",
+                  stroke: s.color,
+                  strokeWidth: 1.5,
+                  children: /* @__PURE__ */ jsx("title", { children: s.name })
+                }
+              ),
+              s.points.length < SPARSE_MARKER_MAX ? s.points.filter((p) => Number.isFinite(p.y)).map((p, i) => /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  "data-slot": "trend-chart-dot",
+                  cx: xScale(p.x),
+                  cy: yScale(p.y),
+                  r: 2.5,
+                  fill: s.color,
+                  children: /* @__PURE__ */ jsx("title", { children: s.name })
+                },
+                `${s.name}-${p.x}-${i}`
+              )) : null
+            ] }, s.name))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          "data-slot": "trend-chart-legend",
+          className: "flex flex-wrap gap-3 text-body-sm text-muted-foreground",
+          children: series.map((s) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "inline-block h-2 w-2 rounded-sm",
+                style: { backgroundColor: s.color }
+              }
+            ),
+            s.name
+          ] }, s.name))
+        }
+      ),
+      /* @__PURE__ */ jsxs("table", { "data-slot": "trend-chart-table", className: "sr-only", children: [
+        /* @__PURE__ */ jsxs("caption", { children: [
+          title,
+          " \u2014 data table"
+        ] }),
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { children: "Point" }),
+          series.map((s) => /* @__PURE__ */ jsx("th", { children: s.name }, s.name))
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: axisXs.map((x, i) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: i + 1 }),
+          series.map((s, si) => {
+            const y = yByX[si]?.get(x);
+            return /* @__PURE__ */ jsx("td", { children: y !== void 0 && Number.isFinite(y) ? valueFormatter(y) : "\u2014" }, s.name);
+          })
+        ] }, x)) })
+      ] })
+    ] });
+  }
+);
+TrendChart.displayName = "TrendChart";
 var MetricsPanel = forwardRef(
   ({ className, title, description, metrics, columns, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
@@ -5308,4 +5469,4 @@ function CommandPalette({
   ] }) });
 }
 
-export { AccountMenu, ActionBar, Alert, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, Checkbox, CodeBlock, Combobox, CommandPalette, ConfirmDialog, CopyButton, DangerZone, DataTable, DeploymentRow, DescriptionList, Dialog, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, FormField, Input, JsonViewer, Label, LoginSplit, MetricCard, MetricsPanel, PageShell, Pagination, PinInput, PlanBadge, PreviewEnvCard, Progress, ProjectCard, RadioGroup, RollbackUI, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, SocialAuthRow, StatTile, StatusDot, StatusIndicator, Switch, Table, Tabs, TaskHeader, Textarea, Timestamp, Toast, Toaster, TooltipWithStatics as Tooltip, TopNav, UpdateBanner, avatarVariants, badgeVariants, buttonVariants, cn, computePageRange, isNearBottom, sheetVariants, useStickToBottom, useToast };
+export { AccountMenu, ActionBar, Alert, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, Checkbox, CodeBlock, Combobox, CommandPalette, ConfirmDialog, CopyButton, DangerZone, DataTable, DeploymentRow, DescriptionList, Dialog, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, FormField, Input, JsonViewer, Label, LoginSplit, MetricCard, MetricsPanel, PageShell, Pagination, PinInput, PlanBadge, PreviewEnvCard, Progress, ProjectCard, RadioGroup, RollbackUI, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, SocialAuthRow, StatTile, StatusDot, StatusIndicator, Switch, Table, Tabs, TaskHeader, Textarea, Timestamp, Toast, Toaster, TooltipWithStatics as Tooltip, TopNav, TrendChart, UpdateBanner, avatarVariants, badgeVariants, buttonVariants, cn, computePageRange, isNearBottom, linScale, niceMax, seriesPath, sheetVariants, useStickToBottom, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "type": "module",
   "license": "Apache-2.0",
   "description": "Violet Forge design system — generic React components + primitives (the non-AI foundation of @theokit/ui).",