@usetheo/ui 0.17.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/components/primitives/description-list/description-list.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from "react";
+/**
+ * DescriptionList — semantic key/value pairs on native `dl/dt/dd`.
+ *
+ * Layouts: `vertical` (default — stacked groups) and `horizontal` (two-column
+ * grid: terms in a fixed max-content column, details beside them; the Item
+ * wrapper uses `display: contents` so dt/dd participate in the root grid).
+ * `dense` tightens the gaps for crowded detail panels.
+ *
+ *   <DescriptionList layout="horizontal">
+ *     <DescriptionList.Item>
+ *       <DescriptionList.Term>Status</DescriptionList.Term>
+ *       <DescriptionList.Detail><Badge>live</Badge></DescriptionList.Detail>
+ *     </DescriptionList.Item>
+ *   </DescriptionList>
+ *
+ * One Term per Item; multiple Details per Term are valid HTML and supported.
+ * Composing dd without a preceding dt is the consumer's responsibility
+ * (invalid HTML — same contract as Breadcrumb.Page placement).
+ */
+interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    /** vertical (default): stacked groups. horizontal: term column + detail column. */
+    layout?: "vertical" | "horizontal";
+    /** Compact spacing for dense detail panels. */
+    dense?: boolean;
+}
+declare const DescriptionList: import("react").ForwardRefExoticComponent<DescriptionListProps & import("react").RefAttributes<HTMLDListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Term: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+    Detail: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+};
+export { DescriptionList };
+export type { DescriptionListProps };

package/dist/components/primitives/description-list/index.d.ts

@@ -0,0 +1 @@
+export { DescriptionList, type DescriptionListProps } from "./description-list.js";

package/dist/components/primitives/json-viewer/index.d.ts

@@ -0,0 +1 @@
+export { JsonViewer, type JsonViewerProps } from "./json-viewer.js";

package/dist/components/primitives/json-viewer/json-viewer.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from "react";
+/**
+ * JsonViewer — read-only collapsible JSON tree, dependency-free.
+ *
+ * Collapse: `collapsed` mirrors the SOTA contract — `true` collapses every
+ * node, a number collapses everything at depth >= N (root is depth 0).
+ * Collapsed subtrees are NOT rendered (lazy): that is the performance guard —
+ * a huge payload fully expanded is the consumer's responsibility (ADR D1);
+ * prefer `collapsed={1}` for large payloads.
+ *
+ * Safety: circular references render a "[Circular]" marker (and serialize as
+ * such on copy) instead of overflowing the stack. Copy limitation: the
+ * serializer conservatively marks REPEATED (shared, non-circular) references
+ * as "[Circular]" too — output is always JSON.parse-able — the studied SOTA reference
+ * does not handle this. BigInt renders with the `n` suffix; NaN/Infinity
+ * follow JSON semantics on copy (null).
+ *
+ *   <JsonViewer value={eventPayload} collapsed={1} enableCopy />
+ */
+interface JsonViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Data to render. Any value — objects, arrays, primitives, BigInt, Date. */
+    value: unknown;
+    /** true = all collapsed; number = collapse at depth >= N. Default: all expanded. */
+    collapsed?: boolean | number;
+    /** Truncate strings longer than this (click to reveal). Default 60. */
+    shortenTextAfterLength?: number;
+    /** Show a copy button on the root and on object/array nodes. */
+    enableCopy?: boolean;
+}
+declare const JsonViewer: import("react").ForwardRefExoticComponent<JsonViewerProps & import("react").RefAttributes<HTMLDivElement>>;
+export { JsonViewer };
+export type { JsonViewerProps };

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export { cn } from "./lib/cn.js";
 export { Button, buttonVariants, type ButtonProps } from "./components/primitives/button/index.js";
 export { Badge, badgeVariants, type BadgeProps } from "./components/primitives/badge/index.js";
 export { Breadcrumb, type BreadcrumbLinkProps, } from "./components/primitives/breadcrumb/index.js";
+export { DescriptionList, type DescriptionListProps, } from "./components/primitives/description-list/index.js";
+export { JsonViewer, type JsonViewerProps } from "./components/primitives/json-viewer/index.js";
 export { Combobox, type ComboboxContentProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxProps, } from "./components/primitives/combobox/index.js";
 export { Slider, type SliderMark, type SliderProps, } from "./components/primitives/slider/index.js";
 export { UpdateBanner, type UpdateBannerProps, } from "./components/primitives/update-banner/index.js";
@@ -45,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

@@ -2,9 +2,9 @@ import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { forwardRef, createContext, useState, useRef, useId, useCallback, useEffect, useMemo, Children, isValidElement, cloneElement, Fragment as Fragment$1, useContext, createElement } from 'react';
+import { forwardRef, useState, useRef, useEffect, useCallback, createContext, useId, useMemo, Children, isValidElement, cloneElement, Fragment as Fragment$1, useContext, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Loader2, Check, ArrowUpCircle, X, AlertCircle, ChevronDown, ChevronUp, Minus, Circle, ChevronRight, ChevronsUpDown, Copy, TrendingDown, TrendingUp, ArrowUpRight, TriangleAlert, CheckCircle2, Info, ChevronsLeft, ChevronLeft, ChevronsRight, Search, Filter, GitCommit, GitBranch, Activity, Plus, Lock, EyeOff, Eye, Trash2, GitPullRequest, Server, ExternalLink, Globe, ShieldCheck, ShieldX, Clock, RotateCcw, ArrowDownLeft, MoreHorizontal } from 'lucide-react';
+import { Check, X, Copy, Loader2, ArrowUpCircle, AlertCircle, ChevronDown, ChevronUp, Minus, Circle, ChevronRight, ChevronsUpDown, TrendingDown, TrendingUp, ArrowUpRight, TriangleAlert, CheckCircle2, Info, ChevronsLeft, ChevronLeft, ChevronsRight, Search, Filter, GitCommit, GitBranch, Activity, Plus, Lock, EyeOff, Eye, Trash2, GitPullRequest, Server, ExternalLink, Globe, ShieldCheck, ShieldX, Clock, RotateCcw, ArrowDownLeft, MoreHorizontal } from 'lucide-react';
 import { Command, useCommandState } from 'cmdk';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -287,6 +287,329 @@ var Breadcrumb = Object.assign(Root, {
   Separator,
   Ellipsis
 });
+function sub2(tag, slot, displayName, baseClass) {
+  const Component = forwardRef(
+    ({ className, children, ...props }, ref) => createElement(
+      tag,
+      { "data-slot": slot, ref, className: cn(baseClass, className), ...props },
+      children
+    )
+  );
+  Component.displayName = displayName;
+  return Component;
+}
+var Root2 = forwardRef(
+  ({ className, layout = "vertical", dense, ...props }, ref) => /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "data-slot": "description-list",
+      "data-layout": layout,
+      "data-dense": dense ? "true" : void 0,
+      ref,
+      className: cn(
+        "text-body-sm",
+        layout === "vertical" && (dense ? "grid gap-2" : "grid gap-4"),
+        layout === "horizontal" && "grid grid-cols-[max-content_1fr] items-baseline [&>div]:contents [&_dd]:col-start-2",
+        layout === "horizontal" && (dense ? "gap-x-4 gap-y-1.5" : "gap-x-6 gap-y-3"),
+        className
+      ),
+      ...props
+    }
+  )
+);
+Root2.displayName = "DescriptionList";
+var Item2 = sub2(
+  "div",
+  "description-list-item",
+  "DescriptionList.Item",
+  "grid gap-1"
+);
+var Term = sub2(
+  "dt",
+  "description-list-term",
+  "DescriptionList.Term",
+  "font-medium text-muted-foreground"
+);
+var Detail = sub2(
+  "dd",
+  "description-list-detail",
+  "DescriptionList.Detail",
+  "m-0 text-foreground"
+);
+var DescriptionList = Object.assign(Root2, { Item: Item2, Term, Detail });
+var VARIANT = {
+  ghost: "hover:bg-muted",
+  outline: "border border-border/60 rounded-md"
+};
+var SIZE = {
+  sm: "px-2 py-1 text-label",
+  md: "px-2.5 py-1.5 text-body-sm"
+};
+var CopyButton = forwardRef(
+  ({
+    className,
+    value,
+    label,
+    variant = "ghost",
+    size = "sm",
+    onCopied,
+    feedbackDuration = 1500,
+    ...props
+  }, ref) => {
+    const [state, setState] = useState("idle");
+    const timerRef = useRef(null);
+    useEffect(() => {
+      return () => {
+        if (timerRef.current !== null) {
+          clearTimeout(timerRef.current);
+        }
+      };
+    }, []);
+    const scheduleRevert = useCallback(() => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => {
+        setState("idle");
+        timerRef.current = null;
+      }, feedbackDuration);
+    }, [feedbackDuration]);
+    const handleClick = useCallback(() => {
+      if (state !== "idle") return;
+      if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+        setState("failed");
+        scheduleRevert();
+        return;
+      }
+      navigator.clipboard.writeText(value).then(
+        () => {
+          setState("copied");
+          onCopied?.(value);
+          scheduleRevert();
+        },
+        () => {
+          setState("failed");
+          scheduleRevert();
+        }
+      );
+    }, [state, value, onCopied, scheduleRevert]);
+    const Icon2 = state === "copied" ? Check : state === "failed" ? X : Copy;
+    const liveMessage = state === "copied" ? "Copied to clipboard" : state === "failed" ? "Copy failed" : "";
+    const labelText = label !== void 0 ? state === "copied" ? "Copied!" : state === "failed" ? "Failed" : label : null;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "data-slot": "copy-button",
+        ref,
+        type: "button",
+        onClick: handleClick,
+        "data-state": state,
+        className: cn(
+          "inline-flex items-center gap-1.5",
+          "font-sans transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card",
+          VARIANT[variant],
+          SIZE[size],
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon2,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "size-3.5 shrink-0 transition-opacity duration-200",
+                state === "copied" && "text-success",
+                state === "failed" && "text-destructive"
+              )
+            }
+          ),
+          labelText !== null ? /* @__PURE__ */ jsx("span", { children: labelText }) : null,
+          /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: liveMessage })
+        ]
+      }
+    );
+  }
+);
+CopyButton.displayName = "CopyButton";
+var PATH_SEP = "";
+var EMPTY_CHAIN = { has: () => false };
+function isPlainContainer(value) {
+  return typeof value === "object" && value !== null && !(value instanceof Date);
+}
+function safeStringify(value) {
+  const seen = /* @__PURE__ */ new WeakSet();
+  return JSON.stringify(
+    value,
+    (_key, entry) => {
+      if (typeof entry === "bigint") return `${entry}n`;
+      if (typeof entry === "object" && entry !== null) {
+        if (seen.has(entry)) return "[Circular]";
+        seen.add(entry);
+      }
+      return entry;
+    },
+    2
+  );
+}
+function defaultExpanded(depth, collapsed) {
+  if (collapsed === true) return false;
+  if (typeof collapsed === "number") return depth < collapsed;
+  return true;
+}
+function PrimitiveValue({
+  value,
+  shortenAfter
+}) {
+  const [revealed, setRevealed] = useState(false);
+  if (typeof value === "string") {
+    const shorten = !revealed && value.length > shortenAfter;
+    const text2 = shorten ? `${value.slice(0, shortenAfter)}\u2026` : `"${value}"`;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "json-viewer-value",
+        "data-type": "string",
+        className: cn("text-success", shorten && "cursor-pointer underline decoration-dotted"),
+        onClick: shorten ? () => setRevealed(true) : void 0,
+        onKeyDown: shorten ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setRevealed(true);
+          }
+        } : void 0,
+        role: shorten ? "button" : void 0,
+        tabIndex: shorten ? 0 : void 0,
+        children: text2
+      }
+    );
+  }
+  let text;
+  let type = typeof value;
+  if (typeof value === "bigint") text = `${value}n`;
+  else if (value === null) {
+    text = "null";
+    type = "null";
+  } else if (value === void 0) text = "undefined";
+  else if (typeof value === "function") text = "\u0192";
+  else if (value instanceof Date) {
+    text = value.toISOString();
+    type = "date";
+  } else text = String(value);
+  return /* @__PURE__ */ jsx("span", { "data-slot": "json-viewer-value", "data-type": type, className: "text-info", children: text });
+}
+function JsonNode(props) {
+  const { nodeKey, value, path, depth, ancestors, viewer, expandedOverrides, onToggle } = props;
+  const copyValue = useMemo(
+    () => viewer.enableCopy && isPlainContainer(value) ? safeStringify(value) : "",
+    [value, viewer.enableCopy]
+  );
+  const keyLabel = nodeKey !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { "data-slot": "json-viewer-key", children: nodeKey === "" ? '""' : nodeKey }),
+    ":"
+  ] }) : null;
+  if (isPlainContainer(value) && ancestors.has(value)) {
+    return /* @__PURE__ */ jsxs("li", { "data-slot": "json-viewer-node", className: "flex items-baseline gap-1.5", children: [
+      keyLabel,
+      /* @__PURE__ */ jsx("span", { "data-slot": "json-viewer-value", "data-type": "circular", className: "text-warning", children: "[Circular]" })
+    ] });
+  }
+  if (!isPlainContainer(value)) {
+    return /* @__PURE__ */ jsxs("li", { "data-slot": "json-viewer-node", className: "flex items-baseline gap-1.5", children: [
+      keyLabel,
+      /* @__PURE__ */ jsx(PrimitiveValue, { value, shortenAfter: viewer.shortenTextAfterLength })
+    ] });
+  }
+  const isArray = Array.isArray(value);
+  const entries = isArray ? value.map((entry, index) => [String(index), entry]) : Object.entries(value);
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsxs("li", { "data-slot": "json-viewer-node", className: "flex items-baseline gap-1.5", children: [
+      keyLabel,
+      /* @__PURE__ */ jsx("span", { "data-slot": "json-viewer-value", "data-type": isArray ? "array" : "object", children: isArray ? "[]" : "{}" })
+    ] });
+  }
+  const expanded = expandedOverrides.get(path) ?? defaultExpanded(depth, viewer.collapsed);
+  const badge = isArray ? `[${entries.length}]` : `{${entries.length}}`;
+  return /* @__PURE__ */ jsxs("li", { "data-slot": "json-viewer-node", children: [
+    /* @__PURE__ */ jsxs("span", { className: "group/node flex items-baseline gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "data-slot": "json-viewer-toggle",
+          "aria-expanded": expanded,
+          "aria-label": `Toggle ${nodeKey ?? "root"}`,
+          onClick: () => onToggle(path, !expanded),
+          className: "inline-flex size-4 shrink-0 translate-y-0.5 items-center justify-center rounded text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              "aria-hidden": true,
+              className: cn("size-3.5 transition-transform", expanded && "rotate-90")
+            }
+          )
+        }
+      ),
+      keyLabel,
+      !expanded && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: badge }),
+      viewer.enableCopy && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "json-viewer-copy",
+          className: "opacity-0 transition-opacity group-focus-within/node:opacity-100 group-hover/node:opacity-100",
+          children: /* @__PURE__ */ jsx(CopyButton, { value: copyValue, "aria-label": `Copy ${nodeKey ?? "JSON"}` })
+        }
+      )
+    ] }),
+    expanded && /* @__PURE__ */ jsx("ul", { className: "m-0 grid list-none gap-0.5 border-border/40 border-l pl-4", children: entries.map(([entryKey, entryValue]) => /* @__PURE__ */ jsx(
+      JsonNode,
+      {
+        nodeKey: entryKey,
+        value: entryValue,
+        path: path + PATH_SEP + entryKey,
+        depth: depth + 1,
+        ancestors: {
+          has: (candidate) => candidate === value || ancestors.has(candidate)
+        },
+        viewer,
+        expandedOverrides,
+        onToggle
+      },
+      entryKey
+    )) })
+  ] });
+}
+var JsonViewer = forwardRef(
+  ({ value, collapsed, shortenTextAfterLength = 60, enableCopy = false, className, ...props }, ref) => {
+    const [expandedOverrides, setExpandedOverrides] = useState(/* @__PURE__ */ new Map());
+    const onToggle = (path, next) => {
+      setExpandedOverrides((prev) => new Map(prev).set(path, next));
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "json-viewer",
+        ref,
+        className: cn("font-mono text-code-sm", className),
+        ...props,
+        children: /* @__PURE__ */ jsx("ul", { className: "m-0 grid list-none gap-0.5 p-0", children: /* @__PURE__ */ jsx(
+          JsonNode,
+          {
+            value,
+            path: "$",
+            depth: 0,
+            ancestors: EMPTY_CHAIN,
+            viewer: { collapsed, shortenTextAfterLength, enableCopy },
+            expandedOverrides,
+            onToggle
+          }
+        ) })
+      }
+    );
+  }
+);
+JsonViewer.displayName = "JsonViewer";
 var inputVariants = cva(
   [
     "flex w-full rounded-md border border-input bg-card",
@@ -331,12 +654,12 @@ function composeRefs(local, forwarded) {
     else if (forwarded) forwarded.current = node;
   };
 }
-function useComboboxContext(sub2) {
+function useComboboxContext(sub3) {
   const ctx = useContext(ComboboxContext);
-  if (!ctx) throw new Error(`<Combobox.${sub2}> must be used inside <Combobox>`);
+  if (!ctx) throw new Error(`<Combobox.${sub3}> must be used inside <Combobox>`);
   return ctx;
 }
-var Root2 = forwardRef(
+var Root3 = forwardRef(
   ({
     className,
     children,
@@ -389,7 +712,7 @@ var Root2 = forwardRef(
     ) });
   }
 );
-Root2.displayName = "Combobox";
+Root3.displayName = "Combobox";
 var Input2 = forwardRef(
   ({ className, onFocus, onKeyDown, onValueChange, ...props }, ref) => {
     const { open, setOpen, listId } = useComboboxContext("Input");
@@ -471,7 +794,7 @@ var Content = forwardRef(
   }
 );
 Content.displayName = "Combobox.Content";
-var Item2 = forwardRef(
+var Item3 = forwardRef(
   ({ className, children, value, onSelect, ...props }, ref) => {
     const ctx = useComboboxContext("Item");
     const selected = value !== void 0 && ctx.value === value;
@@ -506,7 +829,7 @@ var Item2 = forwardRef(
     );
   }
 );
-Item2.displayName = "Combobox.Item";
+Item3.displayName = "Combobox.Item";
 var Empty = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command.Empty,
   {
@@ -517,7 +840,7 @@ var Empty = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   }
 ));
 Empty.displayName = "Combobox.Empty";
-var Combobox = Object.assign(Root2, { Input: Input2, Content, Item: Item2, Empty });
+var Combobox = Object.assign(Root3, { Input: Input2, Content, Item: Item3, Empty });
 var Slider = forwardRef(
   ({
     className,
@@ -690,7 +1013,7 @@ var UpdateBanner = forwardRef(
 UpdateBanner.displayName = "UpdateBanner";
 var CardContext = createContext({ size: "md" });
 var useCardSize = () => useContext(CardContext).size;
-var Root4 = forwardRef(
+var Root5 = forwardRef(
   ({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx(CardContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -705,7 +1028,7 @@ var Root4 = forwardRef(
     }
   ) })
 );
-Root4.displayName = "Card";
+Root5.displayName = "Card";
 var headerPadBySize = {
   sm: "gap-1 p-3 pb-1.5",
   md: "gap-1.5 p-5 pb-2.5",
@@ -807,7 +1130,7 @@ var Footer = forwardRef(
   }
 );
 Footer.displayName = "Card.Footer";
-var Card = /* @__PURE__ */ Object.assign(Root4, {
+var Card = /* @__PURE__ */ Object.assign(Root5, {
   Header,
   Title,
   Description,
@@ -967,7 +1290,7 @@ var Tabs = /* @__PURE__ */ Object.assign(TabsPrimitive.Root, {
   Content: Content5
 });
 var Provider2 = TooltipPrimitive.Provider;
-var Root8 = TooltipPrimitive.Root;
+var Root9 = TooltipPrimitive.Root;
 var Trigger5 = TooltipPrimitive.Trigger;
 var Content7 = forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
@@ -995,13 +1318,13 @@ var Tooltip = ({
   delayDuration = 200,
   children,
   ...rootProps
-}) => /* @__PURE__ */ jsx(Provider2, { delayDuration, children: /* @__PURE__ */ jsxs(Root8, { ...rootProps, children: [
+}) => /* @__PURE__ */ jsx(Provider2, { delayDuration, children: /* @__PURE__ */ jsxs(Root9, { ...rootProps, children: [
   /* @__PURE__ */ jsx(Trigger5, { asChild: true, children }),
   /* @__PURE__ */ jsx(Content7, { side, align, children: label })
 ] }) });
 var TooltipWithStatics = Tooltip;
 TooltipWithStatics.Provider = Provider2;
-TooltipWithStatics.Root = Root8;
+TooltipWithStatics.Root = Root9;
 TooltipWithStatics.Trigger = Trigger5;
 TooltipWithStatics.Content = Content7;
 var ScrollAreaRoot = forwardRef(
@@ -1853,7 +2176,7 @@ var Textarea = forwardRef(
   )
 );
 Textarea.displayName = "Textarea";
-var Root18 = forwardRef(
+var Root19 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "aside",
     {
@@ -1867,7 +2190,7 @@ var Root18 = forwardRef(
     }
   )
 );
-Root18.displayName = "Sidebar";
+Root19.displayName = "Sidebar";
 var Header3 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -1896,7 +2219,7 @@ var Section = forwardRef(
   )
 );
 Section.displayName = "Sidebar.Section";
-var Item5 = forwardRef(
+var Item6 = forwardRef(
   ({ className, icon: Icon2, active, count, as = "button", href, children, ...props }, ref) => {
     const classes = cn(
       "group flex w-full items-center gap-3 rounded-lg px-2 py-2",
@@ -1956,7 +2279,7 @@ var Item5 = forwardRef(
     );
   }
 );
-Item5.displayName = "Sidebar.Item";
+Item6.displayName = "Sidebar.Item";
 var Footer3 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -1969,13 +2292,13 @@ var Footer3 = forwardRef(
   )
 );
 Footer3.displayName = "Sidebar.Footer";
-var Sidebar = /* @__PURE__ */ Object.assign(Root18, {
+var Sidebar = /* @__PURE__ */ Object.assign(Root19, {
   Header: Header3,
   Section,
-  Item: Item5,
+  Item: Item6,
   Footer: Footer3
 });
-var Root19 = forwardRef(
+var Root20 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "header",
     {
@@ -1989,7 +2312,7 @@ var Root19 = forwardRef(
     }
   )
 );
-Root19.displayName = "TopNav";
+Root20.displayName = "TopNav";
 var Left = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -2124,7 +2447,7 @@ var ModeSwitcher = forwardRef(
   }
 );
 ModeSwitcher.displayName = "TopNav.ModeSwitcher";
-var TopNav = /* @__PURE__ */ Object.assign(Root19, {
+var TopNav = /* @__PURE__ */ Object.assign(Root20, {
   Left,
   Center,
   Right,
@@ -2420,7 +2743,7 @@ var alignClass = {
   center: "text-center",
   right: "text-right"
 };
-var Root21 = forwardRef(
+var Root22 = forwardRef(
   ({ className, density = "default", children, ...props }, ref) => /* @__PURE__ */ jsx(TableDensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx(
     "table",
     {
@@ -2432,7 +2755,7 @@ var Root21 = forwardRef(
     }
   ) })
 );
-Root21.displayName = "Table";
+Root22.displayName = "Table";
 var Header5 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "thead",
@@ -2552,7 +2875,7 @@ var HeaderCell = forwardRef(
   }
 );
 HeaderCell.displayName = "Table.HeaderCell";
-var Table = Object.assign(Root21, { Header: Header5, Body: Body4, Row, Cell, HeaderCell });
+var Table = Object.assign(Root22, { Header: Header5, Body: Body4, Row, Cell, HeaderCell });
 
 // src/lib/env.ts
 function readNodeEnv() {
@@ -2575,7 +2898,7 @@ var LABEL_COLOR = {
   idle: "text-muted-foreground",
   warning: "text-warning"
 };
-var SIZE = {
+var SIZE2 = {
   xs: "size-1.5",
   sm: "size-2",
   md: "size-2.5"
@@ -2598,7 +2921,7 @@ var StatusDot = forwardRef(
         "aria-hidden": hasVisibleLabel ? "true" : void 0,
         className: cn(
           "inline-block shrink-0 rounded-full",
-          SIZE[size],
+          SIZE2[size],
           DOT_COLOR[status],
           shouldPulse && "animate-pulse"
         )
@@ -2639,102 +2962,6 @@ var StatusDot = forwardRef(
   }
 );
 StatusDot.displayName = "StatusDot";
-var VARIANT = {
-  ghost: "hover:bg-muted",
-  outline: "border border-border/60 rounded-md"
-};
-var SIZE2 = {
-  sm: "px-2 py-1 text-label",
-  md: "px-2.5 py-1.5 text-body-sm"
-};
-var CopyButton = forwardRef(
-  ({
-    className,
-    value,
-    label,
-    variant = "ghost",
-    size = "sm",
-    onCopied,
-    feedbackDuration = 1500,
-    ...props
-  }, ref) => {
-    const [state, setState] = useState("idle");
-    const timerRef = useRef(null);
-    useEffect(() => {
-      return () => {
-        if (timerRef.current !== null) {
-          clearTimeout(timerRef.current);
-        }
-      };
-    }, []);
-    const scheduleRevert = useCallback(() => {
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current);
-      }
-      timerRef.current = setTimeout(() => {
-        setState("idle");
-        timerRef.current = null;
-      }, feedbackDuration);
-    }, [feedbackDuration]);
-    const handleClick = useCallback(() => {
-      if (state !== "idle") return;
-      if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
-        setState("failed");
-        scheduleRevert();
-        return;
-      }
-      navigator.clipboard.writeText(value).then(
-        () => {
-          setState("copied");
-          onCopied?.(value);
-          scheduleRevert();
-        },
-        () => {
-          setState("failed");
-          scheduleRevert();
-        }
-      );
-    }, [state, value, onCopied, scheduleRevert]);
-    const Icon2 = state === "copied" ? Check : state === "failed" ? X : Copy;
-    const liveMessage = state === "copied" ? "Copied to clipboard" : state === "failed" ? "Copy failed" : "";
-    const labelText = label !== void 0 ? state === "copied" ? "Copied!" : state === "failed" ? "Failed" : label : null;
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        "data-slot": "copy-button",
-        ref,
-        type: "button",
-        onClick: handleClick,
-        "data-state": state,
-        className: cn(
-          "inline-flex items-center gap-1.5",
-          "font-sans transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card",
-          VARIANT[variant],
-          SIZE2[size],
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            Icon2,
-            {
-              "aria-hidden": "true",
-              className: cn(
-                "size-3.5 shrink-0 transition-opacity duration-200",
-                state === "copied" && "text-success",
-                state === "failed" && "text-destructive"
-              )
-            }
-          ),
-          labelText !== null ? /* @__PURE__ */ jsx("span", { children: labelText }) : null,
-          /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: liveMessage })
-        ]
-      }
-    );
-  }
-);
-CopyButton.displayName = "CopyButton";
 function toDate(value) {
   const d = value instanceof Date ? value : new Date(value);
   return Number.isNaN(d.getTime()) ? null : d;
@@ -2929,7 +3156,7 @@ var StatTile = forwardRef(
   }
 );
 StatTile.displayName = "StatTile";
-var Root22 = forwardRef(
+var Root23 = forwardRef(
   ({ className, title = "Danger Zone", children, ...props }, ref) => /* @__PURE__ */ jsxs(
     "section",
     {
@@ -2945,7 +3172,7 @@ var Root22 = forwardRef(
     }
   )
 );
-Root22.displayName = "DangerZone";
+Root23.displayName = "DangerZone";
 var Action2 = forwardRef(
   ({ className, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
@@ -2968,7 +3195,7 @@ var Action2 = forwardRef(
   )
 );
 Action2.displayName = "DangerZone.Action";
-var DangerZone = Object.assign(Root22, { Action: Action2 });
+var DangerZone = Object.assign(Root23, { Action: Action2 });
 var ConfirmDialog = forwardRef(
   ({
     open,
@@ -3497,7 +3724,7 @@ var Content12 = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /*
   }
 ) }));
 Content12.displayName = "DropdownMenu.Content";
-var Item7 = forwardRef(
+var Item8 = forwardRef(
   ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Item,
     {
@@ -3516,7 +3743,7 @@ var Item7 = forwardRef(
     }
   )
 );
-Item7.displayName = "DropdownMenu.Item";
+Item8.displayName = "DropdownMenu.Item";
 var CheckboxItem2 = forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
@@ -3632,7 +3859,7 @@ var DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {
   Trigger: Trigger9,
   Portal: Portal6,
   Content: Content12,
-  Item: Item7,
+  Item: Item8,
   CheckboxItem: CheckboxItem2,
   RadioItem: RadioItem2,
   Label: Label4,
@@ -4151,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",
@@ -5081,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, Dialog, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, FormField, Input, 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.17.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).",