@teton/smith-ui 0.2.179 → 0.2.180

package/dist/index.d.ts

@@ -6,5 +6,6 @@ export { BackLink, InfoRow, SideNav, type SideNavItem, type TabItem, TabNav, } f
 export { PageContainer } from './page-container';
 export { SearchInput } from './search-input';
 export { StatCard } from './stat-card';
+export { StateTimeline, type TimelineLane, type TimelineSpan, type TimelineTone, } from './state-timeline';
 export { type IconComponent, SECTION_THEMES, type SectionTheme, type SectionThemeName, } from './theme';
 export { Toast, type ToastState } from './toast';

package/dist/index.js

@@ -1,8 +1,8 @@
-import { jsx as r, jsxs as l, Fragment as u } from "react/jsx-runtime";
-import { X as h, Loader2 as w, ArrowLeft as $, Search as E, Check as S } from "lucide-react";
-import { Link as b } from "react-router";
-import { useRef as k, useEffect as L } from "react";
-const T = {
+import { jsx as e, jsxs as l, Fragment as y } from "react/jsx-runtime";
+import { X as v, Loader2 as E, ArrowLeft as S, Search as L, Check as C } from "lucide-react";
+import { Link as h } from "react-router";
+import { useRef as j, useEffect as A } from "react";
+const R = {
   gray: "bg-gray-100 text-gray-700",
   blue: "bg-blue-100 text-blue-700",
   green: "bg-green-100 text-green-700",
@@ -11,69 +11,69 @@ const T = {
   purple: "bg-purple-100 text-purple-700",
   orange: "bg-orange-100 text-orange-700"
 };
-function D({
+function U({
   variant: t = "gray",
-  pill: e = !1,
+  pill: r = !1,
   className: n = "",
   children: o
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "span",
     {
-      className: `px-1.5 py-0.5 text-xs font-medium ${e ? "rounded-full" : "rounded"} ${T[t]} ${n}`,
+      className: `px-1.5 py-0.5 text-xs font-medium ${r ? "rounded-full" : "rounded"} ${R[t]} ${n}`,
       children: o
     }
   );
 }
-function P({
+function V({
   name: t,
-  value: e,
+  value: r,
   onClick: n,
   onRemove: o,
   active: a = !1,
   title: g
 }) {
-  const s = /* @__PURE__ */ l(u, { children: [
-    /* @__PURE__ */ r(
+  const s = /* @__PURE__ */ l(y, { children: [
+    /* @__PURE__ */ e(
       "span",
       {
         className: `px-2 py-1 font-medium ${a ? "text-blue-700 bg-blue-100" : "text-gray-500 bg-gray-50"}`,
         children: t
       }
     ),
-    e !== void 0 && e !== "" && /* @__PURE__ */ r(
+    r !== void 0 && r !== "" && /* @__PURE__ */ e(
       "span",
       {
         className: `px-2 py-1 font-mono border-l ${a ? "text-blue-700 bg-blue-100 border-blue-200" : "text-gray-900 bg-white border-gray-200"}`,
-        children: e
+        children: r
       }
     )
-  ] }), d = `inline-flex items-center overflow-hidden rounded-md border text-xs ${a ? "border-blue-300" : "border-gray-200"}`;
-  return o ? /* @__PURE__ */ l("span", { className: d, children: [
+  ] }), i = `inline-flex items-center overflow-hidden rounded-md border text-xs ${a ? "border-blue-300" : "border-gray-200"}`;
+  return o ? /* @__PURE__ */ l("span", { className: i, children: [
     s,
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         onClick: o,
         title: g,
-        "aria-label": `Remove ${e !== void 0 ? `${t}=${e}` : t}`,
+        "aria-label": `Remove ${r !== void 0 ? `${t}=${r}` : t}`,
         className: `flex items-center px-1.5 py-1 border-l cursor-pointer transition-colors ${a ? "bg-blue-100 border-blue-200 text-blue-500 hover:bg-blue-200 hover:text-blue-700" : "border-gray-200 text-gray-400 hover:bg-gray-100 hover:text-gray-600"}`,
-        children: /* @__PURE__ */ r(h, { className: "w-3 h-3" })
+        children: /* @__PURE__ */ e(v, { className: "w-3 h-3" })
       }
     )
-  ] }) : n ? /* @__PURE__ */ r(
+  ] }) : n ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       onClick: n,
       title: g,
-      className: `${d} cursor-pointer transition-colors ${a ? "" : "hover:border-gray-300"}`,
+      className: `${i} cursor-pointer transition-colors ${a ? "" : "hover:border-gray-300"}`,
       children: s
     }
-  ) : /* @__PURE__ */ r("span", { className: d, children: s });
+  ) : /* @__PURE__ */ e("span", { className: i, children: s });
 }
-const C = {
+const _ = {
   solid: {
     blue: "bg-blue-600 text-white hover:bg-blue-700",
     purple: "bg-purple-600 text-white hover:bg-purple-700",
@@ -98,91 +98,91 @@ const C = {
     orange: "text-orange-600 hover:bg-orange-50",
     gray: "text-gray-600 hover:bg-gray-100"
   }
-}, j = {
+}, B = {
   sm: "px-2.5 py-1.5 text-xs gap-1.5",
   md: "px-3 py-2 text-sm gap-2"
-}, A = {
+}, M = {
   solid: "shadow-sm hover:shadow-md",
   soft: "shadow-sm hover:shadow",
   ghost: ""
 };
-function U({
+function X({
   variant: t = "soft",
-  tone: e = "blue",
+  tone: r = "blue",
   size: n = "md",
   icon: o,
   loading: a = !1,
   disabled: g = !1,
   type: s = "button",
-  title: d,
-  onClick: i,
+  title: i,
+  onClick: u,
   to: c,
   href: m,
   target: f,
-  className: v = "",
-  children: N
+  className: d = "",
+  children: b
 }) {
-  const p = `inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-100 cursor-pointer active:scale-[.98] ${j[n]} ${A[t]} ${C[t][e]} ${v}`, x = /* @__PURE__ */ l(u, { children: [
-    a ? /* @__PURE__ */ r(w, { className: "w-4 h-4 animate-spin" }) : o,
-    N
+  const x = `inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-100 cursor-pointer active:scale-[.98] ${B[n]} ${M[t]} ${_[t][r]} ${d}`, p = /* @__PURE__ */ l(y, { children: [
+    a ? /* @__PURE__ */ e(E, { className: "w-4 h-4 animate-spin" }) : o,
+    b
   ] });
-  return c ? /* @__PURE__ */ r(b, { to: c, className: p, title: d, children: x }) : m ? /* @__PURE__ */ r(
+  return c ? /* @__PURE__ */ e(h, { to: c, className: x, title: i, children: p }) : m ? /* @__PURE__ */ e(
     "a",
     {
       href: m,
       target: f,
       rel: f === "_blank" ? "noopener noreferrer" : void 0,
-      className: p,
-      title: d,
-      children: x
+      className: x,
+      title: i,
+      children: p
     }
-  ) : /* @__PURE__ */ r(
+  ) : /* @__PURE__ */ e(
     "button",
     {
       type: s,
-      onClick: i,
+      onClick: u,
       disabled: g || a,
-      title: d,
-      className: `${p} disabled:opacity-50 disabled:cursor-not-allowed`,
-      children: x
+      title: i,
+      className: `${x} disabled:opacity-50 disabled:cursor-not-allowed`,
+      children: p
     }
   );
 }
-function y({
+function $({
   className: t = "",
-  children: e
+  children: r
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "div",
     {
       className: `bg-white rounded-xl border border-gray-200/80 shadow-sm ${t}`,
-      children: e
+      children: r
     }
   );
 }
-function V({
+function Y({
   icon: t,
-  title: e,
+  title: r,
   theme: n,
   count: o,
   actions: a,
   bodyClassName: g = "p-5",
   className: s = "",
-  children: d
+  children: i
 }) {
-  return /* @__PURE__ */ l(y, { className: `overflow-hidden ${s}`, children: [
+  return /* @__PURE__ */ l($, { className: `overflow-hidden ${s}`, children: [
     /* @__PURE__ */ l(
       "div",
       {
         className: `px-4 py-3 flex items-center justify-between border-b border-black/5 ${n.header}`,
         children: [
           /* @__PURE__ */ l("h4", { className: "text-sm font-semibold flex items-center", children: [
-            t && /* @__PURE__ */ r(t, { className: "w-4 h-4 mr-2" }),
-            e
+            t && /* @__PURE__ */ e(t, { className: "w-4 h-4 mr-2" }),
+            r
           ] }),
           (a || o !== void 0) && /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
             a,
-            o !== void 0 && /* @__PURE__ */ r(
+            o !== void 0 && /* @__PURE__ */ e(
               "span",
               {
                 className: `text-xs font-semibold px-2 py-0.5 rounded-full ${n.badge}`,
@@ -193,31 +193,31 @@ function V({
         ]
       }
     ),
-    /* @__PURE__ */ r("div", { className: g, children: d })
+    /* @__PURE__ */ e("div", { className: g, children: i })
   ] });
 }
-function X({
+function z({
   icon: t,
-  title: e,
+  title: r,
   count: n,
   theme: o,
   actions: a,
   footer: g,
   children: s
 }) {
-  return /* @__PURE__ */ l(y, { className: "overflow-hidden flex flex-col", children: [
+  return /* @__PURE__ */ l($, { className: "overflow-hidden flex flex-col", children: [
     /* @__PURE__ */ l(
       "div",
       {
         className: `px-4 py-3 flex items-center justify-between border-b border-black/5 ${o.header}`,
         children: [
           /* @__PURE__ */ l("h4", { className: "text-sm font-semibold flex items-center", children: [
-            t && /* @__PURE__ */ r(t, { className: "w-4 h-4 mr-2" }),
-            e
+            t && /* @__PURE__ */ e(t, { className: "w-4 h-4 mr-2" }),
+            r
           ] }),
           /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
             a,
-            n !== void 0 && /* @__PURE__ */ r(
+            n !== void 0 && /* @__PURE__ */ e(
               "span",
               {
                 className: `text-xs font-semibold px-2 py-0.5 rounded-full ${o.badge}`,
@@ -228,41 +228,41 @@ function X({
         ]
       }
     ),
-    /* @__PURE__ */ r("div", { className: "divide-y divide-gray-100", children: s }),
+    /* @__PURE__ */ e("div", { className: "divide-y divide-gray-100", children: s }),
     g
   ] });
 }
-function F({
+function G({
   to: t,
-  onClick: e,
+  onClick: r,
   hover: n = "hover:bg-gray-50",
   className: o = "",
   children: a
 }) {
-  const s = `flex items-center justify-between px-4 py-3 transition-colors ${n} ${!!(t || e) ? "cursor-pointer" : ""} ${o}`;
-  return t ? /* @__PURE__ */ r(b, { to: t, className: s, children: a }) : e ? /* @__PURE__ */ r(
+  const s = `flex items-center justify-between px-4 py-3 transition-colors ${n} ${!!(t || r) ? "cursor-pointer" : ""} ${o}`;
+  return t ? /* @__PURE__ */ e(h, { to: t, className: s, children: a }) : r ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      onClick: e,
+      onClick: r,
       className: `w-full text-left ${s}`,
       children: a
     }
-  ) : /* @__PURE__ */ r("div", { className: s, children: a });
+  ) : /* @__PURE__ */ e("div", { className: s, children: a });
 }
-function Y({
+function H({
   to: t,
-  count: e,
+  count: r,
   noun: n = "items"
 }) {
   return /* @__PURE__ */ l(
-    b,
+    h,
     {
       to: t,
       className: "block px-4 py-2.5 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-gray-50 transition-colors",
       children: [
         "View all ",
-        e,
+        r,
         " ",
         n,
         " →"
@@ -270,16 +270,16 @@ function Y({
     }
   );
 }
-const R = (t) => `https://flagicons.lipis.dev/flags/4x3/${t.toLowerCase()}.svg`;
-function z({
+const O = (t) => `https://flagicons.lipis.dev/flags/4x3/${t.toLowerCase()}.svg`;
+function Z({
   countryCode: t,
-  country: e
+  country: r
 }) {
-  return t ? /* @__PURE__ */ r(
+  return t ? /* @__PURE__ */ e(
     "img",
     {
-      src: R(t),
-      alt: e || "Country flag",
+      src: O(t),
+      alt: r || "Country flag",
       className: "w-4 h-3 flex-shrink-0 rounded-sm ring-1 ring-black/5",
       onError: (n) => {
         n.target.style.display = "none";
@@ -287,107 +287,107 @@ function z({
     }
   ) : null;
 }
-function G({
+function q({
   to: t,
-  onClick: e,
+  onClick: r,
   children: n
 }) {
-  const o = "inline-flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors cursor-pointer", a = /* @__PURE__ */ l(u, { children: [
-    /* @__PURE__ */ r($, { className: "w-4 h-4" }),
-    /* @__PURE__ */ r("span", { children: n })
+  const o = "inline-flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors cursor-pointer", a = /* @__PURE__ */ l(y, { children: [
+    /* @__PURE__ */ e(S, { className: "w-4 h-4" }),
+    /* @__PURE__ */ e("span", { children: n })
   ] });
-  return t ? /* @__PURE__ */ r(b, { to: t, className: o, children: a }) : /* @__PURE__ */ r("button", { type: "button", onClick: e, className: o, children: a });
+  return t ? /* @__PURE__ */ e(h, { to: t, className: o, children: a }) : /* @__PURE__ */ e("button", { type: "button", onClick: r, className: o, children: a });
 }
-function H({ items: t }) {
-  return /* @__PURE__ */ r("div", { className: "border-b border-gray-200", children: /* @__PURE__ */ r("nav", { className: "-mb-px flex space-x-8", children: t.map((e) => {
-    const n = e.active ? "py-2 px-1 border-b-2 border-blue-500 text-blue-600 font-medium text-sm" : "py-2 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium text-sm transition-colors cursor-pointer";
-    return e.to && !e.active ? /* @__PURE__ */ r(
-      b,
+function J({ items: t }) {
+  return /* @__PURE__ */ e("div", { className: "border-b border-gray-200", children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((r) => {
+    const n = r.active ? "py-2 px-1 border-b-2 border-blue-500 text-blue-600 font-medium text-sm" : "py-2 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium text-sm transition-colors cursor-pointer";
+    return r.to && !r.active ? /* @__PURE__ */ e(
+      h,
       {
-        to: e.to,
-        state: e.state,
+        to: r.to,
+        state: r.state,
         className: n,
-        children: e.label
+        children: r.label
       },
-      e.label
-    ) : /* @__PURE__ */ r("span", { className: n, children: e.label }, e.label);
+      r.label
+    ) : /* @__PURE__ */ e("span", { className: n, children: r.label }, r.label);
   }) }) });
 }
-function M({ items: t }) {
-  return /* @__PURE__ */ r("nav", { className: "space-y-1", children: t.map((e) => {
-    const n = e.icon, o = `group/side relative flex items-center gap-3 h-10 rounded-md px-3 text-sm transition-all duration-200 cursor-pointer ${e.active ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}`, a = /* @__PURE__ */ l(u, { children: [
-      /* @__PURE__ */ r(
+function Q({ items: t }) {
+  return /* @__PURE__ */ e("nav", { className: "space-y-1", children: t.map((r) => {
+    const n = r.icon, o = `group/side relative flex items-center gap-3 h-10 rounded-md px-3 text-sm transition-all duration-200 cursor-pointer ${r.active ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}`, a = /* @__PURE__ */ l(y, { children: [
+      /* @__PURE__ */ e(
         "span",
         {
-          className: `absolute left-0 top-1.5 bottom-1.5 w-[3px] rounded-r-full bg-blue-600 transition-all duration-300 ease-out ${e.active ? "opacity-100 scale-y-100" : "opacity-0 scale-y-0"}`
+          className: `absolute left-0 top-1.5 bottom-1.5 w-[3px] rounded-r-full bg-blue-600 transition-all duration-300 ease-out ${r.active ? "opacity-100 scale-y-100" : "opacity-0 scale-y-0"}`
         }
       ),
-      n && /* @__PURE__ */ r(n, { className: "w-[18px] h-[18px] shrink-0 transition-transform duration-200 group-hover/side:scale-110" }),
-      /* @__PURE__ */ r("span", { className: "truncate", children: e.label })
+      n && /* @__PURE__ */ e(n, { className: "w-[18px] h-[18px] shrink-0 transition-transform duration-200 group-hover/side:scale-110" }),
+      /* @__PURE__ */ e("span", { className: "truncate", children: r.label })
     ] });
-    return e.active ? /* @__PURE__ */ r("span", { className: o, "aria-current": "page", children: a }, e.to) : /* @__PURE__ */ r(b, { to: e.to, className: o, children: a }, e.to);
+    return r.active ? /* @__PURE__ */ e("span", { className: o, "aria-current": "page", children: a }, r.to) : /* @__PURE__ */ e(h, { to: r.to, className: o, children: a }, r.to);
   }) });
 }
-function Z({
+function W({
   label: t,
-  icon: e,
+  icon: r,
   iconClassName: n = "text-gray-400",
   children: o
 }) {
   return /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-4", children: [
     /* @__PURE__ */ l("span", { className: "text-gray-700 flex items-center flex-shrink-0", children: [
-      e && /* @__PURE__ */ r(e, { className: `w-4 h-4 mr-2 ${n}` }),
+      r && /* @__PURE__ */ e(r, { className: `w-4 h-4 mr-2 ${n}` }),
       t
     ] }),
-    /* @__PURE__ */ r("span", { className: "text-sm text-gray-900 text-right min-w-0", children: o })
+    /* @__PURE__ */ e("span", { className: "text-sm text-gray-900 text-right min-w-0", children: o })
   ] });
 }
-function q({
+function ee({
   className: t = "space-y-6",
-  children: e
+  children: r
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "div",
     {
       className: `flex-1 overflow-y-auto px-4 sm:px-6 lg:px-8 py-6 ${t}`,
-      children: e
+      children: r
     }
   );
 }
-function J({
+function re({
   value: t,
-  onChange: e,
+  onChange: r,
   placeholder: n = "Search...",
   className: o = "w-full",
   slashToFocus: a = !1
 }) {
-  const g = k(null);
-  return L(() => {
+  const g = j(null);
+  return A(() => {
     if (!a) return;
-    function s(d) {
+    function s(i) {
       var c;
-      if (d.key !== "/" || d.ctrlKey || d.metaKey || d.altKey) return;
-      const i = d.target;
-      i.tagName === "INPUT" || i.tagName === "TEXTAREA" || i.tagName === "SELECT" || i.isContentEditable || (d.preventDefault(), (c = g.current) == null || c.focus());
+      if (i.key !== "/" || i.ctrlKey || i.metaKey || i.altKey) return;
+      const u = i.target;
+      u.tagName === "INPUT" || u.tagName === "TEXTAREA" || u.tagName === "SELECT" || u.isContentEditable || (i.preventDefault(), (c = g.current) == null || c.focus());
     }
     return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
   }, [a]), /* @__PURE__ */ l("div", { className: `relative ${o}`, children: [
-    /* @__PURE__ */ r(E, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4 pointer-events-none" }),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ e(L, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4 pointer-events-none" }),
+    /* @__PURE__ */ e(
       "input",
       {
         ref: g,
         type: "text",
         value: t,
-        onChange: (s) => e(s.target.value),
+        onChange: (s) => r(s.target.value),
         placeholder: n,
         className: "w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 placeholder-gray-400"
       }
     ),
-    a && !t && /* @__PURE__ */ r("kbd", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs border border-gray-300 rounded px-1 py-0.5 font-mono leading-none pointer-events-none", children: "/" })
+    a && !t && /* @__PURE__ */ e("kbd", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs border border-gray-300 rounded px-1 py-0.5 font-mono leading-none pointer-events-none", children: "/" })
   ] });
 }
-const B = {
+const D = {
   neutral: { badge: "bg-gray-100", icon: "text-gray-400" },
   green: { badge: "bg-green-100", icon: "text-green-600" },
   blue: { badge: "bg-blue-100", icon: "text-blue-600" },
@@ -395,28 +395,102 @@ const B = {
   red: { badge: "bg-red-100", icon: "text-red-600" },
   purple: { badge: "bg-purple-100", icon: "text-purple-600" }
 };
-function Q({
+function te({
   icon: t,
-  label: e,
+  label: r,
   value: n,
   tone: o = "neutral"
 }) {
-  const a = B[o];
+  const a = D[o];
   return /* @__PURE__ */ l("div", { className: "flex items-center gap-4", children: [
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ e(
       "div",
       {
         className: `flex h-12 w-12 items-center justify-center rounded-xl ${a.badge}`,
-        children: /* @__PURE__ */ r(t, { className: `w-6 h-6 ${a.icon}` })
+        children: /* @__PURE__ */ e(t, { className: `w-6 h-6 ${a.icon}` })
       }
     ),
     /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ r("p", { className: "text-sm font-medium text-gray-500", children: e }),
-      /* @__PURE__ */ r("p", { className: "text-3xl font-bold text-gray-900 tabular-nums", children: n })
+      /* @__PURE__ */ e("p", { className: "text-sm font-medium text-gray-500", children: r }),
+      /* @__PURE__ */ e("p", { className: "text-3xl font-bold text-gray-900 tabular-nums", children: n })
     ] })
   ] });
 }
-const W = {
+const N = {
+  ok: "bg-green-500",
+  down: "bg-red-500",
+  unknown: "bg-gray-300"
+}, w = (t) => `${(t * 100).toFixed(4)}%`;
+function ne({
+  from: t,
+  to: r,
+  lanes: n,
+  baseline: o = "ok",
+  ticks: a = 5,
+  formatTick: g = (c) => c.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+  labelWidth: s = "8rem",
+  rowHeight: i = "1.25rem",
+  emptyLabel: u = "No data"
+}) {
+  const c = t.getTime(), m = r.getTime() - c;
+  if (!(m > 0) || n.length === 0)
+    return /* @__PURE__ */ e("div", { className: "py-8 text-center text-sm text-gray-500", children: u });
+  const f = Array.from(
+    { length: Math.max(2, a) },
+    (d, b) => new Date(c + m * b / (Math.max(2, a) - 1))
+  );
+  return /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
+    n.map((d) => /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "shrink-0 truncate font-mono text-xs text-gray-600",
+          style: { width: s },
+          title: d.name,
+          children: d.label ?? d.name
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: `relative flex-1 overflow-hidden rounded-sm ${N[o]}`,
+          style: { height: i },
+          children: d.spans.map((b) => {
+            const x = Math.max(b.start.getTime(), c), p = Math.min(b.end.getTime(), c + m);
+            if (p <= x) return null;
+            const T = (x - c) / m, k = (p - x) / m;
+            return /* @__PURE__ */ e(
+              "div",
+              {
+                className: `absolute inset-y-0 ${N[b.tone]}`,
+                style: {
+                  left: w(T),
+                  width: `max(2px, ${w(k)})`
+                },
+                title: b.label
+              },
+              `${b.start.getTime()}-${b.end.getTime()}`
+            );
+          })
+        }
+      ),
+      d.trailing !== void 0 && /* @__PURE__ */ e("div", { className: "w-16 shrink-0 text-right font-mono text-xs tabular-nums text-gray-600", children: d.trailing })
+    ] }, d.name)),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "flex justify-between pt-1 text-[11px] tabular-nums text-gray-400",
+        style: {
+          marginLeft: s,
+          paddingLeft: "0.75rem",
+          marginRight: n.some((d) => d.trailing !== void 0) ? "4rem" : void 0
+        },
+        children: f.map((d) => /* @__PURE__ */ e("span", { children: g(d) }, d.getTime()))
+      }
+    )
+  ] });
+}
+const ae = {
   blue: {
     header: "bg-blue-50 text-blue-800",
     hover: "hover:bg-blue-50",
@@ -458,24 +532,24 @@ const W = {
     badge: "bg-gray-200 text-gray-700"
   }
 };
-function ee({
+function oe({
   toast: t,
-  onClose: e
+  onClose: r
 }) {
-  return t ? /* @__PURE__ */ r(
+  return t ? /* @__PURE__ */ e(
     "div",
     {
       className: `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg border transition-all duration-300 ease-in-out ${t.type === "success" ? "bg-green-50 text-green-800 border-green-200" : "bg-red-50 text-red-800 border-red-200"}`,
       children: /* @__PURE__ */ l("div", { className: "flex items-center space-x-2", children: [
-        t.type === "success" ? /* @__PURE__ */ r(S, { className: "w-5 h-5 text-green-600" }) : /* @__PURE__ */ r(h, { className: "w-5 h-5 text-red-600" }),
-        /* @__PURE__ */ r("span", { className: "text-sm font-medium", children: t.message }),
-        /* @__PURE__ */ r(
+        t.type === "success" ? /* @__PURE__ */ e(C, { className: "w-5 h-5 text-green-600" }) : /* @__PURE__ */ e(v, { className: "w-5 h-5 text-red-600" }),
+        /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: t.message }),
+        /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: e,
+            onClick: r,
             className: "ml-2 text-gray-400 hover:text-gray-600 cursor-pointer",
-            children: /* @__PURE__ */ r(h, { className: "w-4 h-4" })
+            children: /* @__PURE__ */ e(v, { className: "w-4 h-4" })
           }
         )
       ] })
@@ -483,23 +557,24 @@ function ee({
   ) : null;
 }
 export {
-  T as BADGE_COLORS,
-  G as BackLink,
-  D as Badge,
-  U as Button,
-  y as Card,
-  z as CountryFlag,
-  Z as InfoRow,
-  P as LabelChip,
-  F as ListRow,
-  q as PageContainer,
-  V as Panel,
-  W as SECTION_THEMES,
-  J as SearchInput,
-  X as SectionCard,
-  M as SideNav,
-  Q as StatCard,
-  H as TabNav,
-  ee as Toast,
-  Y as ViewAllFooter
+  R as BADGE_COLORS,
+  q as BackLink,
+  U as Badge,
+  X as Button,
+  $ as Card,
+  Z as CountryFlag,
+  W as InfoRow,
+  V as LabelChip,
+  G as ListRow,
+  ee as PageContainer,
+  Y as Panel,
+  ae as SECTION_THEMES,
+  re as SearchInput,
+  z as SectionCard,
+  Q as SideNav,
+  te as StatCard,
+  ne as StateTimeline,
+  J as TabNav,
+  oe as Toast,
+  H as ViewAllFooter
 };

package/dist/state-timeline.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+/** A contiguous stretch of one state within a lane, in absolute time. */
+export interface TimelineSpan {
+    start: Date;
+    /** Exclusive. Use the window end for a span that is still open. */
+    end: Date;
+    tone: TimelineTone;
+    /** Shown in the browser tooltip on hover. */
+    label?: string;
+}
+export interface TimelineLane {
+    /** Stable identity for the lane; also the default row label. */
+    name: string;
+    label?: ReactNode;
+    /** Spans that interrupt the lane's baseline. Order does not matter. */
+    spans: TimelineSpan[];
+    /** Trailing text on the right of the row, e.g. an uptime percentage. */
+    trailing?: ReactNode;
+}
+export type TimelineTone = "ok" | "down" | "unknown";
+/**
+ * Horizontal state timeline: one lane per series, spans drawn as coloured bands
+ * against a baseline.
+ *
+ * Positions are percentages of the window rather than pixels, so the chart is
+ * fluid and needs no measurement pass or charting library. Spans are clipped to
+ * `[from, to]`, which lets callers pass raw intervals that start before or end
+ * after the window.
+ */
+export declare function StateTimeline({ from, to, lanes, baseline, ticks, formatTick, labelWidth, rowHeight, emptyLabel, }: {
+    from: Date;
+    to: Date;
+    lanes: TimelineLane[];
+    baseline?: TimelineTone;
+    ticks?: number;
+    formatTick?: (date: Date) => string;
+    labelWidth?: string;
+    rowHeight?: string;
+    emptyLabel?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@teton/smith-ui",
-	"version": "0.2.179",
+	"version": "0.2.180",
 	"description": "Smith dashboard design-system primitives (React + Tailwind CSS v4).",
 	"license": "Apache-2.0",
 	"repository": {