@agent-factory-platform/ui-kit 0.7.1 → 0.9.0

package/dist/components/slider.js

@@ -0,0 +1,162 @@
+import { jsx as a, jsxs as P, Fragment as U } from "react/jsx-runtime";
+import { useRef as I, useState as X, useCallback as A } from "react";
+import { Slider as w } from "radix-ui";
+import { cn as M } from "../lib/cn.js";
+function _({
+  value: t,
+  min: r = 0,
+  max: o = 100,
+  step: i = 1,
+  density: d = "default",
+  onChange: n,
+  onCommit: l,
+  disabled: s = !1,
+  ariaLabel: k,
+  formatValue: c,
+  marks: f = [],
+  variant: u = "plain",
+  className: $,
+  testId: S
+}) {
+  const z = I(null), [y, v] = X(!1), h = A(
+    (e) => {
+      const g = Math.round((e - r) / i) * i + r, x = (i.toString().split(".")[1] ?? "").length;
+      return parseFloat(Math.min(o, Math.max(r, g)).toFixed(x));
+    },
+    [r, o, i]
+  ), p = u === "boxed" ? 8 : u === "allocation" ? 2 : 0, N = A(
+    (e) => {
+      const g = z.current;
+      if (!g) return t;
+      const { left: x, width: D } = g.getBoundingClientRect(), R = Math.max(1, D - p * 2), T = Math.min(1, Math.max(0, (e - x - p) / R));
+      return h(r + (o - r) * T);
+    },
+    [p, r, o, h, t]
+  ), b = Math.min(100, Math.max(0, (t - r) / (o - r) * 100));
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: z,
+      role: "slider",
+      "aria-disabled": s || void 0,
+      "aria-valuemin": r,
+      "aria-valuemax": o,
+      "aria-valuenow": t,
+      "aria-valuetext": c == null ? void 0 : c(t),
+      "aria-label": k,
+      "data-density": d,
+      "data-variant": u,
+      tabIndex: s ? -1 : 0,
+      "data-testid": S,
+      onPointerDown: (e) => {
+        s || (e.currentTarget.setPointerCapture(e.pointerId), v(!0), n(N(e.clientX)));
+      },
+      onPointerMove: (e) => {
+        s || !y || n(N(e.clientX));
+      },
+      onPointerUp: (e) => {
+        e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), !(!y || s) && (v(!1), l == null || l(N(e.clientX)));
+      },
+      onPointerCancel: () => v(!1),
+      onKeyDown: (e) => {
+        s || ((e.key === "ArrowLeft" || e.key === "ArrowDown") && n(h(t - i)), (e.key === "ArrowRight" || e.key === "ArrowUp") && n(h(t + i)), e.key === "Home" && n(r), e.key === "End" && n(o), e.key === "PageDown" && n(h(t - i * 10)), e.key === "PageUp" && n(h(t + i * 10)));
+      },
+      onKeyUp: (e) => {
+        !s && ["ArrowLeft", "ArrowDown", "ArrowRight", "ArrowUp", "Home", "End", "PageDown", "PageUp"].includes(e.key) && (l == null || l(t));
+      },
+      onBlur: () => {
+        s || l == null || l(t);
+      },
+      className: M(
+        "group relative w-full shrink-0 touch-none cursor-pointer select-none outline-none focus-visible:ring-2 focus-visible:ring-rust/35 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-canvas",
+        s && "cursor-not-allowed opacity-50",
+        u === "boxed" || u === "allocation" ? "h-control-default overflow-hidden rounded-control border border-border bg-surface-raised" : d === "compact" ? "h-6" : "h-control-touch",
+        $
+      ),
+      children: /* @__PURE__ */ P("div", { className: "absolute inset-y-0", style: { left: p, right: p }, children: [
+        u === "allocation" ? /* @__PURE__ */ P(U, { children: [
+          /* @__PURE__ */ a("div", { "data-slot": "allocation-track", className: "absolute inset-y-0 w-full bg-surface-raised" }),
+          /* @__PURE__ */ a(
+            "div",
+            {
+              "data-slot": "allocation-fill",
+              "data-risk": b >= 75 ? "high" : b >= 50 ? "medium" : "low",
+              className: "absolute inset-y-0 left-0 bg-rust/30",
+              style: { width: `${b}%` }
+            }
+          )
+        ] }) : /* @__PURE__ */ a("div", { "data-slot": "slider-track", className: "absolute top-1/2 h-slider-track w-full -translate-y-1/2 rounded-full bg-dove/40" }),
+        f.map((e) => {
+          const g = Math.min(100, Math.max(0, (e - r) / (o - r) * 100));
+          return /* @__PURE__ */ a("span", { "data-slider-mark": !0, "aria-hidden": !0, className: M("pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2", u === "allocation" ? "h-3 w-px rounded-full bg-graphite/70 shadow-[0_0_0_1px_var(--color-surface-canvas)]" : "size-1 rounded-full bg-graphite/70 ring-1 ring-surface-canvas"), style: { left: `${g}%` } }, e);
+        }),
+        u !== "allocation" && /* @__PURE__ */ a("div", { "data-slot": "slider-range", className: "absolute top-1/2 h-slider-track -translate-y-1/2 rounded-full bg-rust", style: { width: `${b}%` } }),
+        u === "allocation" ? /* @__PURE__ */ a(
+          "div",
+          {
+            "data-slot": "allocation-thumb",
+            className: M("absolute top-1/2 z-10 h-6 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border border-on-accent/70 bg-rust shadow-subtle transition-transform", y && "scale-y-110"),
+            style: { left: `${b}%` }
+          }
+        ) : /* @__PURE__ */ a("div", { "data-slot": "slider-thumb", className: ["absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-rust ring-2 ring-pure-white shadow-subtle transition-transform", d === "compact" ? "size-slider-thumb-compact" : "size-slider-thumb-default", y ? "scale-110" : "group-hover:scale-110 group-focus:scale-110"].join(" "), style: { left: `${b}%` } })
+      ] })
+    }
+  );
+}
+function H(t) {
+  return /* @__PURE__ */ a(_, { ...t, density: "compact", variant: "allocation" });
+}
+function K({
+  value: t,
+  min: r = 0,
+  max: o = 100,
+  step: i = 1,
+  density: d = "default",
+  onChange: n,
+  onCommit: l,
+  lowerLabel: s,
+  upperLabel: k,
+  formatValue: c
+}) {
+  return /* @__PURE__ */ P(
+    w.Root,
+    {
+      value: t,
+      min: r,
+      max: o,
+      step: i,
+      minStepsBetweenThumbs: 1,
+      "data-density": d,
+      "data-focus-shell": !0,
+      onValueChange: (f) => n([f[0], f[1]]),
+      onValueCommit: (f) => l == null ? void 0 : l([f[0], f[1]]),
+      className: `relative flex w-full touch-none select-none items-center outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-rust/35 ${d === "compact" ? "h-6" : "h-control-touch"}`,
+      children: [
+        /* @__PURE__ */ a(w.Track, { "data-slot": "slider-track", className: "relative h-slider-track w-full grow overflow-hidden rounded-full bg-dove/40", children: /* @__PURE__ */ a(w.Range, { "data-slot": "slider-range", className: "absolute h-full bg-rust" }) }),
+        /* @__PURE__ */ a(
+          w.Thumb,
+          {
+            "data-slot": "slider-thumb-lower",
+            "aria-label": s,
+            "aria-valuetext": c == null ? void 0 : c(t[0]),
+            className: `block rounded-full bg-rust ring-2 ring-pure-white shadow-subtle outline-none focus-visible:ring-rust ${d === "compact" ? "size-slider-thumb-compact" : "size-slider-thumb-default"}`
+          }
+        ),
+        /* @__PURE__ */ a(
+          w.Thumb,
+          {
+            "data-slot": "slider-thumb-upper",
+            "aria-label": k,
+            "aria-valuetext": c == null ? void 0 : c(t[1]),
+            className: `block rounded-full bg-rust ring-2 ring-pure-white shadow-subtle outline-none focus-visible:ring-rust ${d === "compact" ? "size-slider-thumb-compact" : "size-slider-thumb-default"}`
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  H as AllocationSlider,
+  K as RangeSlider,
+  _ as Slider
+};

package/dist/components/sliding-tabs.js

@@ -0,0 +1,118 @@
+import { jsxs as b, jsx as g, Fragment as I } from "react/jsx-runtime";
+import { useState as L, useRef as x, useLayoutEffect as R } from "react";
+import { cn as K } from "../lib/cn.js";
+function S(r) {
+  const s = x(null), c = x(/* @__PURE__ */ new Map()), i = x(null), d = x(!1);
+  return R(() => {
+    const o = () => {
+      const a = c.current.get(r), p = i.current;
+      !a || !p || (p.style.transform = `translateX(${a.offsetLeft}px)`, p.style.width = `${a.offsetWidth}px`);
+    };
+    o(), d.current || requestAnimationFrame(() => {
+      var a;
+      (a = i.current) == null || a.classList.add("is-ready"), d.current = !0;
+    });
+    const n = new ResizeObserver(o);
+    return s.current && n.observe(s.current), () => n.disconnect();
+  }, [r]), { listRef: s, indRef: i, setBtn: (o) => (n) => {
+    n ? c.current.set(o, n) : c.current.delete(o);
+  }, focusTab: (o) => {
+    var n;
+    return (n = c.current.get(o)) == null ? void 0 : n.focus();
+  } };
+}
+function j({
+  tabs: r,
+  value: s,
+  onChange: c,
+  onReorder: i,
+  size: d = "md",
+  variant: l = "underline",
+  className: w,
+  ariaLabel: o
+}) {
+  const { listRef: n, indRef: a, setBtn: p, focusTab: N } = S(s), [m, h] = L(null), [D, k] = L(null), A = d === "sm" ? "text-body-sm" : "text-body", u = !!i;
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      ref: n,
+      role: "tablist",
+      "aria-label": o,
+      "aria-orientation": "horizontal",
+      "data-variant": l,
+      className: K("relative flex items-center overflow-x-auto", l === "toolbar" ? "gap-1" : d === "sm" ? "gap-4" : "gap-5", w),
+      children: [
+        r.map((e) => /* @__PURE__ */ b(
+          "button",
+          {
+            ref: p(e.key),
+            type: "button",
+            role: "tab",
+            "data-testid": e.testId,
+            "aria-selected": s === e.key,
+            tabIndex: s === e.key ? 0 : -1,
+            draggable: u,
+            onClick: () => c(e.key),
+            onKeyDown: (t) => {
+              var T;
+              const f = r.findIndex((E) => E.key === e.key);
+              let y = f;
+              if (t.key === "ArrowRight") y = (f + 1) % r.length;
+              else if (t.key === "ArrowLeft") y = (f - 1 + r.length) % r.length;
+              else if (t.key === "Home") y = 0;
+              else if (t.key === "End") y = r.length - 1;
+              else return;
+              t.preventDefault();
+              const v = (T = r[y]) == null ? void 0 : T.key;
+              v != null && (c(v), requestAnimationFrame(() => N(v)));
+            },
+            onDragStart: u ? (t) => {
+              h(e.key), t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", e.key);
+            } : void 0,
+            onDragEnd: u ? () => {
+              h(null), k(null);
+            } : void 0,
+            onDragOver: u ? (t) => {
+              t.preventDefault(), t.dataTransfer.dropEffect = "move", D !== e.key && k(e.key);
+            } : void 0,
+            onDrop: u ? (t) => {
+              t.preventDefault();
+              const f = t.dataTransfer.getData("text/plain") || m;
+              f && f !== e.key && (i == null || i(f, e.key)), h(null), k(null);
+            } : void 0,
+            className: K(
+              "relative whitespace-nowrap font-sohne outline-none transition focus-visible:ring-2 focus-visible:ring-rust/35",
+              l === "toolbar" ? "inline-flex h-6 min-h-6 items-center rounded-control border px-2 text-micro" : "min-h-control-default px-0.5 pb-2 pt-1",
+              l === "toolbar" ? void 0 : A,
+              s === e.key ? l === "toolbar" ? "border-border bg-surface-muted font-[500] text-ink" : "font-[480] text-ink" : l === "toolbar" ? "border-transparent text-graphite hover:bg-surface-hover hover:text-ink" : "text-graphite hover:text-ink",
+              u && "cursor-grab active:cursor-grabbing",
+              m === e.key && "opacity-40",
+              D === e.key && m && m !== e.key && "text-ink"
+            ),
+            children: [
+              e.label,
+              e.count !== void 0 && /* @__PURE__ */ g("span", { className: "ml-1.5 text-caption text-graphite", children: e.count }),
+              e.live && /* @__PURE__ */ b(I, { children: [
+                /* @__PURE__ */ g("span", { className: "sr-only", children: e.liveLabel ?? "Live" }),
+                /* @__PURE__ */ g(
+                  "span",
+                  {
+                    title: e.liveLabel,
+                    className: "absolute -right-2 top-0 h-1.5 w-1.5 animate-pulse rounded-full bg-up",
+                    "aria-hidden": !0
+                  }
+                )
+              ] })
+            ]
+          },
+          e.key
+        )),
+        l === "underline" && /* @__PURE__ */ g("span", { ref: a, className: "t-tab-underline", "aria-hidden": !0 })
+      ]
+    }
+  );
+}
+export {
+  j as SlidingTabs,
+  S as useSlideIndicator
+};

package/dist/components/spinner.js

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import { LoaderCircle as t } from "lucide-react";
+import { cn as n } from "../lib/cn.js";
+function c({ label: a, size: e = "default", className: i }) {
+  return /* @__PURE__ */ r("span", { role: "status", "aria-label": a, "data-size": e, className: n("inline-grid shrink-0 place-items-center text-graphite", i), children: /* @__PURE__ */ r(t, { size: e === "compact" ? 14 : 18, className: "animate-spin", "aria-hidden": !0 }) });
+}
+export {
+  c as Spinner
+};

package/dist/components/spotlight-tour.js

@@ -0,0 +1,122 @@
+import { jsxs as k, jsx as h } from "react/jsx-runtime";
+import { useRef as R, useState as S, useLayoutEffect as z, useEffect as D } from "react";
+import { createPortal as A } from "react-dom";
+import { motion as G } from "motion/react";
+import { cn as P } from "../lib/cn.js";
+import { transitions as T } from "../lib/motion.js";
+const a = 12, d = 12, v = 6, g = (t, e, o) => Math.max(e, Math.min(o, t));
+function C(t, e, o) {
+  const p = window.innerWidth, c = window.innerHeight;
+  if (!t)
+    return {
+      top: (c - e.height) / 2,
+      left: (p - e.width) / 2,
+      placement: "center",
+      arrow: 0
+    };
+  const b = t.left + t.width / 2, w = t.top + t.height / 2, r = {
+    bottom: t.top + t.height + a + e.height <= c - d,
+    top: t.top - a - e.height >= d,
+    right: t.left + t.width + a + e.width <= p - d,
+    left: t.left - a - e.width >= d
+  }, s = (o && o !== "auto" ? [o, "bottom", "top", "right", "left"] : ["bottom", "top", "right", "left"]).find((u) => r[u]) ?? "bottom";
+  let l, n;
+  s === "bottom" || s === "top" ? (n = g(b - e.width / 2, d, p - d - e.width), l = s === "bottom" ? t.top + t.height + a : t.top - a - e.height) : (l = g(w - e.height / 2, d, c - d - e.height), n = s === "right" ? t.left + t.width + a : t.left - a - e.width);
+  const f = s === "bottom" || s === "top" ? g(b - n, 20, e.width - 20) : g(w - l, 20, e.height - 20);
+  return { top: l, left: n, placement: s, arrow: f };
+}
+function I({ placement: t, offset: e }) {
+  const o = "absolute size-2.5 rotate-45 border border-border bg-surface-raised";
+  return t === "bottom" ? /* @__PURE__ */ h("span", { "aria-hidden": !0, className: o, style: { top: -5, left: e - 5 } }) : t === "top" ? /* @__PURE__ */ h("span", { "aria-hidden": !0, className: o, style: { bottom: -5, left: e - 5 } }) : t === "right" ? /* @__PURE__ */ h("span", { "aria-hidden": !0, className: o, style: { left: -5, top: e - 5 } }) : t === "left" ? /* @__PURE__ */ h("span", { "aria-hidden": !0, className: o, style: { right: -5, top: e - 5 } }) : null;
+}
+function F({
+  open: t,
+  label: e,
+  target: o = null,
+  preferredPlacement: p = "auto",
+  onEscape: c,
+  children: b,
+  className: w
+}) {
+  const r = R(null), [x, s] = S({ width: 320, height: 180 });
+  if (z(() => {
+    if (!t || !r.current) return;
+    const n = r.current, f = () => {
+      const m = n.getBoundingClientRect();
+      s((i) => i.width === m.width && i.height === m.height ? i : { width: m.width, height: m.height });
+    };
+    if (f(), typeof ResizeObserver > "u") return;
+    const u = new ResizeObserver(f);
+    return u.observe(n), () => u.disconnect();
+  }, [b, t, o]), D(() => {
+    if (!t) return;
+    const n = document.activeElement, f = document.body.style.overflow, u = (i) => {
+      if (i.key === "Escape") {
+        c();
+        return;
+      }
+      if (i.key !== "Tab" || !r.current) return;
+      const y = r.current.querySelectorAll(
+        'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex="-1"])'
+      );
+      if (y.length === 0) {
+        i.preventDefault();
+        return;
+      }
+      const N = y[0], E = y[y.length - 1];
+      i.shiftKey && (document.activeElement === N || document.activeElement === r.current) ? (i.preventDefault(), E.focus()) : !i.shiftKey && document.activeElement === E && (i.preventDefault(), N.focus());
+    };
+    document.body.style.overflow = "hidden", document.addEventListener("keydown", u);
+    const m = requestAnimationFrame(() => {
+      var i;
+      return (i = r.current) == null ? void 0 : i.focus();
+    });
+    return () => {
+      var i;
+      cancelAnimationFrame(m), document.removeEventListener("keydown", u), document.body.style.overflow = f, (i = n == null ? void 0 : n.focus) == null || i.call(n);
+    };
+  }, [c, t]), !t || typeof document > "u") return null;
+  const l = C(o, x, p);
+  return A(
+    /* @__PURE__ */ k("div", { className: "fixed inset-0 z-[60]", role: "dialog", "aria-modal": "true", "aria-label": e, "data-overlay": "spotlight-tour", children: [
+      /* @__PURE__ */ h("div", { "data-uikit-interaction-shield": !0, className: "absolute inset-0", onClick: (n) => n.stopPropagation() }),
+      o ? /* @__PURE__ */ h(
+        "div",
+        {
+          "aria-hidden": !0,
+          className: "pointer-events-none absolute rounded-panel transition-[top,left,width,height] duration-300 ease-out motion-reduce:transition-none",
+          style: {
+            top: o.top - v,
+            left: o.left - v,
+            width: o.width + v * 2,
+            height: o.height + v * 2,
+            boxShadow: "0 0 0 3px color-mix(in srgb, var(--color-pure-white) 55%, transparent), 0 0 0 9999px color-mix(in srgb, black 60%, transparent)"
+          }
+        }
+      ) : /* @__PURE__ */ h("div", { "aria-hidden": !0, className: "pointer-events-none absolute inset-0 bg-black/60" }),
+      /* @__PURE__ */ k(
+        G.div,
+        {
+          ref: r,
+          tabIndex: -1,
+          initial: { opacity: 0, scale: 0.98 },
+          animate: { opacity: 1, scale: 1 },
+          transition: T.fade,
+          className: P(
+            "absolute w-80 max-w-[calc(100vw-24px)] rounded-panel border border-border bg-surface-raised p-5 shadow-pop outline-none",
+            w
+          ),
+          style: { top: l.top, left: l.left },
+          children: [
+            /* @__PURE__ */ h(I, { placement: l.placement, offset: l.arrow }),
+            b
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+export {
+  F as SpotlightTour
+};

package/dist/components/stat-card.js

@@ -0,0 +1,23 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { Card as p, CardLabel as c } from "./card.js";
+import { cn as i } from "../lib/cn.js";
+function d({
+  label: a,
+  value: o,
+  delta: e,
+  direction: s = "up"
+}) {
+  const t = s === "up";
+  return /* @__PURE__ */ n(p, { className: "flex flex-col gap-2 p-5", children: [
+    /* @__PURE__ */ r(c, { children: a }),
+    /* @__PURE__ */ r("span", { className: "font-sohne text-heading-sm font-[480] leading-none tracking-[0] text-ink", children: o }),
+    e && /* @__PURE__ */ n("span", { className: i("flex items-center gap-1 text-[12px]", t ? "text-up" : "text-down"), children: [
+      t ? "↑" : "↓",
+      " ",
+      e
+    ] })
+  ] });
+}
+export {
+  d as StatCard
+};

package/dist/components/state-view.js

@@ -0,0 +1,75 @@
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import "react";
+import { LoaderCircle as y, AlertTriangle as w, Inbox as z } from "lucide-react";
+import { cn as a } from "../lib/cn.js";
+import { Button as N } from "./button.js";
+const j = {
+  sm: { pad: "py-8", wrap: "size-9", icon: 18, title: "text-caption", desc: "text-[11px]", gap: "gap-2", button: "compact" },
+  md: { pad: "py-12", wrap: "size-12", icon: 24, title: "text-body", desc: "text-caption", gap: "gap-2.5", button: "default" },
+  lg: { pad: "py-16", wrap: "size-14", icon: 28, title: "text-body-lg", desc: "text-body", gap: "gap-3", button: "default" }
+};
+function B({
+  variant: e = "empty",
+  size: s = "md",
+  tone: u = "default",
+  icon: m,
+  title: o,
+  description: i,
+  /** Shorthand for a single primary action. Prefer `actions` when you need more than one. */
+  action: d,
+  actions: g,
+  children: x,
+  className: f,
+  "data-testid": h
+}) {
+  const r = j[s], l = u === "scrim" ? "text-ash" : "text-graphite", c = g ?? (d ? [d] : []);
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      role: e === "error" ? "alert" : "status",
+      "data-testid": h,
+      "data-variant": e,
+      "data-size": s,
+      className: a("flex flex-col items-center justify-center text-center", r.pad, r.gap, f),
+      children: [
+        e === "loading" ? /* @__PURE__ */ t(k, { size: r.icon }) : /* @__PURE__ */ t(
+          "div",
+          {
+            className: a(
+              "grid shrink-0 place-items-center rounded-full",
+              r.wrap,
+              e === "error" ? "bg-danger/10 text-danger" : a("bg-fog", l)
+            ),
+            children: m ?? (e === "error" ? /* @__PURE__ */ t(S, { size: r.icon }) : /* @__PURE__ */ t(I, { size: r.icon }))
+          }
+        ),
+        o != null && o !== "" && /* @__PURE__ */ t("p", { className: a("font-sohne font-[480]", r.title, e === "error" ? "text-danger" : "text-ink"), children: o }),
+        i != null && i !== "" && /* @__PURE__ */ t("p", { className: a("max-w-sm font-sohne leading-snug", l, r.desc), children: i }),
+        x,
+        c.length > 0 && /* @__PURE__ */ t("div", { className: "mt-1 flex flex-wrap items-center justify-center gap-2", children: c.map((n, p) => /* @__PURE__ */ t(
+          N,
+          {
+            size: r.button,
+            variant: n.variant ?? (p === 0 ? "primary" : "secondary"),
+            disabled: n.disabled,
+            onClick: n.onClick,
+            children: n.label
+          },
+          `${n.label}-${p}`
+        )) })
+      ]
+    }
+  );
+}
+function k({ size: e }) {
+  return /* @__PURE__ */ t(y, { size: e, className: "animate-spin text-graphite", "aria-hidden": !0 });
+}
+function I({ size: e }) {
+  return /* @__PURE__ */ t(z, { size: e, "aria-hidden": !0 });
+}
+function S({ size: e }) {
+  return /* @__PURE__ */ t(w, { size: e, "aria-hidden": !0 });
+}
+export {
+  B as StateView
+};

package/dist/components/stats-table.js

@@ -0,0 +1,17 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Card as s, CardTitle as c } from "./card.js";
+function m({
+  title: t,
+  rows: n
+}) {
+  return /* @__PURE__ */ l(s, { className: "flex flex-col gap-3 p-5", children: [
+    /* @__PURE__ */ e(c, { children: t }),
+    /* @__PURE__ */ e("ul", { className: "flex flex-col gap-3", children: n.map((a) => /* @__PURE__ */ l("li", { className: "flex items-center justify-between font-sohne text-[14px]", children: [
+      /* @__PURE__ */ e("span", { className: "text-graphite", children: a.name }),
+      /* @__PURE__ */ e("span", { className: "font-[480] text-ink", children: a.count })
+    ] }, a.name)) })
+  ] });
+}
+export {
+  m as StatsTable
+};

package/dist/components/table.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { cn as l } from "../lib/cn.js";
+const b = a(function({ className: e, ...t }, r) {
+  return /* @__PURE__ */ o("table", { ref: r, className: l("w-full border-collapse font-product text-caption text-ink", e), ...t });
+}), i = a(function({ className: e, ...t }, r) {
+  return /* @__PURE__ */ o("thead", { ref: r, className: l("bg-surface-muted text-micro text-graphite", e), ...t });
+}), f = a(function({ className: e, ...t }, r) {
+  return /* @__PURE__ */ o("tbody", { ref: r, className: l("[&_tr:last-child]:border-b-0", e), ...t });
+}), u = a(function({ className: e, ...t }, r) {
+  return /* @__PURE__ */ o("tr", { ref: r, className: l("border-b border-divider transition-colors hover:bg-surface-hover", e), ...t });
+}), m = a(function({ className: e, ...t }, r) {
+  return /* @__PURE__ */ o("th", { ref: r, className: l("h-row-compact px-3 text-left align-middle font-[500]", e), ...t });
+}), T = a(function({ className: e, ...t }, r) {
+  return /* @__PURE__ */ o("td", { ref: r, className: l("h-row-default px-3 align-middle", e), ...t });
+});
+export {
+  b as Table,
+  f as TableBody,
+  T as TableCell,
+  m as TableHead,
+  i as TableHeader,
+  u as TableRow
+};

package/dist/components/tag-pill.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from "react";
 /** Visual weight — higher levels read stronger on light cards. */
 export type TagLevel = "emphasis" | "accent" | "default" | "muted";
 export type TagSize = "xs" | "sm";
+export type TagDotTone = "up" | "down" | "accent" | "warning" | "muted";
 /** Compact label pill — use `level` to control contrast; default is readable on white cards. */
 export declare function TagPill({ children, level, size, className, title, }: {
     children: ReactNode;
@@ -11,11 +12,13 @@ export declare function TagPill({ children, level, size, className, title, }: {
     title?: string;
 }): import("react").JSX.Element;
 /** Render a truncated tag row with a muted overflow counter (single line — never wraps). */
-export declare function TagList({ items, limit, size, levelForItem, labelForItem, className, }: {
+export declare function TagList({ items, limit, size, levelForItem, variant, toneForItem, labelForItem, className, }: {
     items: string[];
     limit?: number;
     size?: TagSize;
     levelForItem?: (item: string) => TagLevel;
+    variant?: "pill" | "dot";
+    toneForItem?: (item: string) => TagDotTone;
     labelForItem: (item: string) => string;
     className?: string;
 }): import("react").JSX.Element | null;

package/dist/components/tag-pill.js

@@ -0,0 +1,69 @@
+import { jsxs as i, jsx as g } from "react/jsx-runtime";
+import "react";
+import { cn as p } from "../lib/cn.js";
+const h = {
+  up: "bg-up",
+  down: "bg-down",
+  accent: "bg-data-blue",
+  warning: "bg-warning",
+  muted: "bg-graphite"
+}, f = {
+  emphasis: "bg-apricot-wash text-rust ring-rust/25",
+  accent: "bg-sky-wash text-data-blue ring-data-blue/20",
+  default: "bg-fog text-ink ring-dove/55",
+  muted: "bg-pure-white text-graphite ring-border"
+}, w = {
+  xs: "max-w-[7.5rem] truncate rounded-md px-1.5 py-0.5 text-[10.5px] leading-snug",
+  sm: "rounded-full px-2 py-0.5 text-[11px] leading-tight"
+};
+function c({
+  children: n,
+  level: s = "default",
+  size: t = "xs",
+  className: l,
+  title: r
+}) {
+  return /* @__PURE__ */ g(
+    "span",
+    {
+      title: r,
+      className: p(
+        "inline-flex shrink-0 items-center font-sohne font-[480] ring-1 ring-inset",
+        f[s],
+        w[t],
+        l
+      ),
+      children: n
+    }
+  );
+}
+function k({
+  items: n,
+  limit: s = 3,
+  size: t = "xs",
+  levelForItem: l = () => "default",
+  variant: r = "pill",
+  toneForItem: u = () => "muted",
+  labelForItem: a,
+  className: x
+}) {
+  if (!n.length) return null;
+  const o = n.slice(0, s), d = n.length - o.length;
+  return /* @__PURE__ */ i("div", { className: p("flex min-w-0 flex-nowrap items-center gap-1", x), children: [
+    o.map((e) => r === "dot" ? /* @__PURE__ */ i("span", { title: a(e), className: "inline-flex shrink-0 items-center gap-1 whitespace-nowrap font-sohne text-[11px] leading-4 text-graphite", children: [
+      /* @__PURE__ */ g("span", { "aria-hidden": "true", className: p("size-1.5 shrink-0 rounded-full", h[u(e)]) }),
+      a(e)
+    ] }, e) : /* @__PURE__ */ g(c, { level: l(e), size: t, title: a(e), children: a(e) }, e)),
+    d > 0 && (r === "dot" ? /* @__PURE__ */ i("span", { className: "shrink-0 font-data text-[11px] text-graphite", children: [
+      "+",
+      d
+    ] }) : /* @__PURE__ */ i(c, { level: "muted", size: t, children: [
+      "+",
+      d
+    ] }))
+  ] });
+}
+export {
+  k as TagList,
+  c as TagPill
+};