@teton/smith-ui 0.2.180 → 0.2.181

package/dist/card.d.ts

@@ -23,6 +23,29 @@ export declare function Panel({ icon: Icon, title, theme, count, actions, bodyCl
     className?: string;
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+declare const ALERT_TONES: {
+    red: {
+        accent: string;
+        chip: string;
+    };
+    amber: {
+        accent: string;
+        chip: string;
+    };
+};
+export type AlertTone = keyof typeof ALERT_TONES;
+/**
+ * Attention banner for a problem the page wants to lead with: colored left
+ * accent, headline plus severity chip, one line of detail, optional action on
+ * the right. Callers render it conditionally — it has no "all clear" state.
+ */
+export declare function AlertBanner({ tone, title, severity, action, children, }: {
+    tone?: AlertTone;
+    title: ReactNode;
+    severity?: string;
+    action?: ReactNode;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 /**
  * Card with a colored, titled header bar — for grouped lists.
  * Right side shows a count pill (when `count` is set) and/or `actions`.
@@ -53,3 +76,4 @@ export declare function ViewAllFooter({ to, count, noun, }: {
     count: number;
     noun?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/detail.d.ts

@@ -14,9 +14,11 @@ export interface TabItem {
     state?: unknown;
 }
 /** Underlined tab bar used across the device detail subpages. The active tab
- *  renders as static text; the rest are router links. */
-export declare function TabNav({ items }: {
+ *  renders as static text; the rest are router links. `actions` renders on the
+ *  right of the bar, for controls that belong to the active tab's content. */
+export declare function TabNav({ items, actions, }: {
     items: TabItem[];
+    actions?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export interface SideNavItem {
     label: string;

package/dist/dropdown.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { ButtonSize, ButtonTone, ButtonVariant } from './button';
+export interface DropdownItem {
+    label: ReactNode;
+    /** Secondary line under the label — good for the detail a tooltip carried. */
+    description?: ReactNode;
+    icon?: ReactNode;
+    /** Tints the icon with the tone the action would have as a standalone button. */
+    tone?: ButtonTone;
+    onClick?: () => void;
+    /** Leaves the menu open after selecting — for items that swap to an
+     *  in-place confirmation (e.g. "Copied!") instead of navigating away. */
+    keepOpen?: boolean;
+    /** Renders the item as an external link instead of a button. */
+    href?: string;
+    target?: string;
+    disabled?: boolean;
+}
+/**
+ * A button that opens a menu of actions — for collapsing a row of related
+ * buttons into one control. Closes on outside click, Escape, or item select.
+ */
+export declare function DropdownMenu({ label, items, icon, variant, tone, size, align, className, }: {
+    label: ReactNode;
+    items: DropdownItem[];
+    icon?: ReactNode;
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    /** Which edge of the trigger the menu is anchored to. */
+    align?: "left" | "right";
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,11 +1,12 @@
 export { BADGE_COLORS, Badge, type BadgeVariant, LabelChip } from './badge';
 export { Button, type ButtonSize, type ButtonTone, type ButtonVariant, } from './button';
-export { Card, ListRow, Panel, SectionCard, ViewAllFooter } from './card';
+export { AlertBanner, type AlertTone, Card, ListRow, Panel, SectionCard, ViewAllFooter, } from './card';
 export { CountryFlag } from './country-flag';
 export { BackLink, InfoRow, SideNav, type SideNavItem, type TabItem, TabNav, } from './detail';
+export { type DropdownItem, DropdownMenu } from './dropdown';
 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 { StateTimeline, type TimelineLane, type TimelineSpan, type TimelineTone, UptimeBars, type UptimeBucket, } 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 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 = {
+import { jsx as e, jsxs as s, Fragment as v } from "react/jsx-runtime";
+import { X as w, Loader2 as j, ArrowLeft as D, ChevronDown as O, Search as R, Check as B } from "lucide-react";
+import { Link as f } from "react-router";
+import { useState as M, useRef as _, useEffect as A } from "react";
+const I = {
   gray: "bg-gray-100 text-gray-700",
   blue: "bg-blue-100 text-blue-700",
   green: "bg-green-100 text-green-700",
@@ -11,55 +11,55 @@ const R = {
   purple: "bg-purple-100 text-purple-700",
   orange: "bg-orange-100 text-orange-700"
 };
-function U({
-  variant: t = "gray",
-  pill: r = !1,
+function J({
+  variant: r = "gray",
+  pill: t = !1,
   className: n = "",
-  children: o
+  children: a
 }) {
   return /* @__PURE__ */ e(
     "span",
     {
-      className: `px-1.5 py-0.5 text-xs font-medium ${r ? "rounded-full" : "rounded"} ${R[t]} ${n}`,
-      children: o
+      className: `px-1.5 py-0.5 text-xs font-medium ${t ? "rounded-full" : "rounded"} ${I[r]} ${n}`,
+      children: a
     }
   );
 }
-function V({
-  name: t,
-  value: r,
+function Q({
+  name: r,
+  value: t,
   onClick: n,
-  onRemove: o,
-  active: a = !1,
-  title: g
+  onRemove: a,
+  active: o = !1,
+  title: m
 }) {
-  const s = /* @__PURE__ */ l(y, { children: [
+  const l = /* @__PURE__ */ s(v, { 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
+        className: `px-2 py-1 font-medium ${o ? "text-blue-700 bg-blue-100" : "text-gray-500 bg-gray-50"}`,
+        children: r
       }
     ),
-    r !== void 0 && r !== "" && /* @__PURE__ */ e(
+    t !== void 0 && t !== "" && /* @__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: r
+        className: `px-2 py-1 font-mono border-l ${o ? "text-blue-700 bg-blue-100 border-blue-200" : "text-gray-900 bg-white border-gray-200"}`,
+        children: t
       }
     )
-  ] }), 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,
+  ] }), d = `inline-flex items-center overflow-hidden rounded-md border text-xs ${o ? "border-blue-300" : "border-gray-200"}`;
+  return a ? /* @__PURE__ */ s("span", { className: d, children: [
+    l,
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        onClick: o,
-        title: g,
-        "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__ */ e(v, { className: "w-3 h-3" })
+        onClick: a,
+        title: m,
+        "aria-label": `Remove ${t !== void 0 ? `${r}=${t}` : r}`,
+        className: `flex items-center px-1.5 py-1 border-l cursor-pointer transition-colors ${o ? "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__ */ e(w, { className: "w-3 h-3" })
       }
     )
   ] }) : n ? /* @__PURE__ */ e(
@@ -67,13 +67,13 @@ function V({
     {
       type: "button",
       onClick: n,
-      title: g,
-      className: `${i} cursor-pointer transition-colors ${a ? "" : "hover:border-gray-300"}`,
-      children: s
+      title: m,
+      className: `${d} cursor-pointer transition-colors ${o ? "" : "hover:border-gray-300"}`,
+      children: l
     }
-  ) : /* @__PURE__ */ e("span", { className: i, children: s });
+  ) : /* @__PURE__ */ e("span", { className: d, children: l });
 }
-const _ = {
+const K = {
   solid: {
     blue: "bg-blue-600 text-white hover:bg-blue-700",
     purple: "bg-purple-600 text-white hover:bg-purple-700",
@@ -98,129 +98,158 @@ const _ = {
     orange: "text-orange-600 hover:bg-orange-50",
     gray: "text-gray-600 hover:bg-gray-100"
   }
-}, B = {
+}, P = {
   sm: "px-2.5 py-1.5 text-xs gap-1.5",
   md: "px-3 py-2 text-sm gap-2"
-}, M = {
+}, U = {
   solid: "shadow-sm hover:shadow-md",
   soft: "shadow-sm hover:shadow",
   ghost: ""
 };
 function X({
-  variant: t = "soft",
-  tone: r = "blue",
+  variant: r = "soft",
+  tone: t = "blue",
   size: n = "md",
-  icon: o,
-  loading: a = !1,
-  disabled: g = !1,
-  type: s = "button",
-  title: i,
-  onClick: u,
-  to: c,
-  href: m,
-  target: f,
-  className: d = "",
-  children: b
+  icon: a,
+  loading: o = !1,
+  disabled: m = !1,
+  type: l = "button",
+  title: d,
+  onClick: p,
+  to: g,
+  href: h,
+  target: i,
+  className: b = "",
+  children: c
 }) {
-  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
+  const u = `inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-100 cursor-pointer active:scale-[.98] ${P[n]} ${U[r]} ${K[r][t]} ${b}`, x = /* @__PURE__ */ s(v, { children: [
+    o ? /* @__PURE__ */ e(j, { className: "w-4 h-4 animate-spin" }) : a,
+    c
   ] });
-  return c ? /* @__PURE__ */ e(h, { to: c, className: x, title: i, children: p }) : m ? /* @__PURE__ */ e(
+  return g ? /* @__PURE__ */ e(f, { to: g, className: u, title: d, children: x }) : h ? /* @__PURE__ */ e(
     "a",
     {
-      href: m,
-      target: f,
-      rel: f === "_blank" ? "noopener noreferrer" : void 0,
-      className: x,
-      title: i,
-      children: p
+      href: h,
+      target: i,
+      rel: i === "_blank" ? "noopener noreferrer" : void 0,
+      className: u,
+      title: d,
+      children: x
     }
   ) : /* @__PURE__ */ e(
     "button",
     {
-      type: s,
-      onClick: u,
-      disabled: g || a,
-      title: i,
-      className: `${x} disabled:opacity-50 disabled:cursor-not-allowed`,
-      children: p
+      type: l,
+      onClick: p,
+      disabled: m || o,
+      title: d,
+      className: `${u} disabled:opacity-50 disabled:cursor-not-allowed`,
+      children: x
     }
   );
 }
 function $({
-  className: t = "",
-  children: r
+  className: r = "",
+  children: t
 }) {
   return /* @__PURE__ */ e(
     "div",
     {
-      className: `bg-white rounded-xl border border-gray-200/80 shadow-sm ${t}`,
-      children: r
+      className: `bg-white rounded-xl border border-gray-200/80 shadow-sm ${r}`,
+      children: t
     }
   );
 }
-function Y({
-  icon: t,
-  title: r,
+function W({
+  icon: r,
+  title: t,
   theme: n,
-  count: o,
-  actions: a,
-  bodyClassName: g = "p-5",
-  className: s = "",
-  children: i
+  count: a,
+  actions: o,
+  bodyClassName: m = "p-5",
+  className: l = "",
+  children: d
 }) {
-  return /* @__PURE__ */ l($, { className: `overflow-hidden ${s}`, children: [
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ s($, { className: `overflow-hidden ${l}`, children: [
+    /* @__PURE__ */ s(
       "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__ */ e(t, { className: "w-4 h-4 mr-2" }),
-            r
+          /* @__PURE__ */ s("h4", { className: "text-sm font-semibold flex items-center", children: [
+            r && /* @__PURE__ */ e(r, { className: "w-4 h-4 mr-2" }),
+            t
           ] }),
-          (a || o !== void 0) && /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
-            a,
-            o !== void 0 && /* @__PURE__ */ e(
+          (o || a !== void 0) && /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+            o,
+            a !== void 0 && /* @__PURE__ */ e(
               "span",
               {
                 className: `text-xs font-semibold px-2 py-0.5 rounded-full ${n.badge}`,
-                children: o
+                children: a
               }
             )
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ e("div", { className: g, children: i })
+    /* @__PURE__ */ e("div", { className: m, children: d })
   ] });
 }
-function z({
-  icon: t,
-  title: r,
+const z = {
+  red: { accent: "border-l-red-500", chip: "bg-red-50 text-red-600" },
+  amber: { accent: "border-l-amber-500", chip: "bg-amber-50 text-amber-700" }
+};
+function ee({
+  tone: r = "red",
+  title: t,
+  severity: n,
+  action: a,
+  children: o
+}) {
+  const { accent: m, chip: l } = z[r];
+  return /* @__PURE__ */ e($, { className: `border-l-4 ${m} px-5 py-4`, children: /* @__PURE__ */ s("div", { className: "flex items-start justify-between gap-4", children: [
+    /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ s("div", { className: "flex items-center gap-2.5 flex-wrap", children: [
+        /* @__PURE__ */ e("h4", { className: "text-base font-semibold text-gray-900", children: t }),
+        n && /* @__PURE__ */ e(
+          "span",
+          {
+            className: `text-[11px] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded ${l}`,
+            children: n
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "mt-1 text-sm text-gray-600", children: o })
+    ] }),
+    a && /* @__PURE__ */ e("div", { className: "shrink-0 text-sm", children: a })
+  ] }) });
+}
+function re({
+  icon: r,
+  title: t,
   count: n,
-  theme: o,
-  actions: a,
-  footer: g,
-  children: s
+  theme: a,
+  actions: o,
+  footer: m,
+  children: l
 }) {
-  return /* @__PURE__ */ l($, { className: "overflow-hidden flex flex-col", children: [
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ s($, { className: "overflow-hidden flex flex-col", children: [
+    /* @__PURE__ */ s(
       "div",
       {
-        className: `px-4 py-3 flex items-center justify-between border-b border-black/5 ${o.header}`,
+        className: `px-4 py-3 flex items-center justify-between border-b border-black/5 ${a.header}`,
         children: [
-          /* @__PURE__ */ l("h4", { className: "text-sm font-semibold flex items-center", children: [
-            t && /* @__PURE__ */ e(t, { className: "w-4 h-4 mr-2" }),
-            r
+          /* @__PURE__ */ s("h4", { className: "text-sm font-semibold flex items-center", children: [
+            r && /* @__PURE__ */ e(r, { className: "w-4 h-4 mr-2" }),
+            t
           ] }),
-          /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
-            a,
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+            o,
             n !== void 0 && /* @__PURE__ */ e(
               "span",
               {
-                className: `text-xs font-semibold px-2 py-0.5 rounded-full ${o.badge}`,
+                className: `text-xs font-semibold px-2 py-0.5 rounded-full ${a.badge}`,
                 children: n
               }
             )
@@ -228,41 +257,41 @@ function z({
         ]
       }
     ),
-    /* @__PURE__ */ e("div", { className: "divide-y divide-gray-100", children: s }),
-    g
+    /* @__PURE__ */ e("div", { className: "divide-y divide-gray-100", children: l }),
+    m
   ] });
 }
-function G({
-  to: t,
-  onClick: r,
+function te({
+  to: r,
+  onClick: t,
   hover: n = "hover:bg-gray-50",
-  className: o = "",
-  children: a
+  className: a = "",
+  children: o
 }) {
-  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(
+  const l = `flex items-center justify-between px-4 py-3 transition-colors ${n} ${!!(r || t) ? "cursor-pointer" : ""} ${a}`;
+  return r ? /* @__PURE__ */ e(f, { to: r, className: l, children: o }) : t ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      onClick: r,
-      className: `w-full text-left ${s}`,
-      children: a
+      onClick: t,
+      className: `w-full text-left ${l}`,
+      children: o
     }
-  ) : /* @__PURE__ */ e("div", { className: s, children: a });
+  ) : /* @__PURE__ */ e("div", { className: l, children: o });
 }
-function H({
-  to: t,
-  count: r,
+function ne({
+  to: r,
+  count: t,
   noun: n = "items"
 }) {
-  return /* @__PURE__ */ l(
-    h,
+  return /* @__PURE__ */ s(
+    f,
     {
-      to: t,
+      to: r,
       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 ",
-        r,
+        t,
         " ",
         n,
         " →"
@@ -270,16 +299,16 @@ function H({
     }
   );
 }
-const O = (t) => `https://flagicons.lipis.dev/flags/4x3/${t.toLowerCase()}.svg`;
-function Z({
-  countryCode: t,
-  country: r
+const F = (r) => `https://flagicons.lipis.dev/flags/4x3/${r.toLowerCase()}.svg`;
+function ae({
+  countryCode: r,
+  country: t
 }) {
-  return t ? /* @__PURE__ */ e(
+  return r ? /* @__PURE__ */ e(
     "img",
     {
-      src: O(t),
-      alt: r || "Country flag",
+      src: F(r),
+      alt: t || "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 +316,211 @@ function Z({
     }
   ) : null;
 }
-function q({
-  to: t,
-  onClick: r,
+function oe({
+  to: r,
+  onClick: t,
   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" }),
+  const a = "inline-flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors cursor-pointer", o = /* @__PURE__ */ s(v, { children: [
+    /* @__PURE__ */ e(D, { className: "w-4 h-4" }),
     /* @__PURE__ */ e("span", { children: n })
   ] });
-  return t ? /* @__PURE__ */ e(h, { to: t, className: o, children: a }) : /* @__PURE__ */ e("button", { type: "button", onClick: r, className: o, children: a });
+  return r ? /* @__PURE__ */ e(f, { to: r, className: a, children: o }) : /* @__PURE__ */ e("button", { type: "button", onClick: t, className: a, children: o });
 }
-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: r.to,
-        state: r.state,
-        className: n,
-        children: r.label
-      },
-      r.label
-    ) : /* @__PURE__ */ e("span", { className: n, children: r.label }, r.label);
-  }) }) });
+function se({
+  items: r,
+  actions: t
+}) {
+  return /* @__PURE__ */ s("div", { className: "border-b border-gray-200 flex items-end justify-between gap-4", children: [
+    /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: r.map((n) => {
+      const a = n.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 n.to && !n.active ? /* @__PURE__ */ e(
+        f,
+        {
+          to: n.to,
+          state: n.state,
+          className: a,
+          children: n.label
+        },
+        n.label
+      ) : /* @__PURE__ */ e("span", { className: a, children: n.label }, n.label);
+    }) }),
+    t && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 pb-1.5", children: t })
+  ] });
 }
-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: [
+function le({ items: r }) {
+  return /* @__PURE__ */ e("nav", { className: "space-y-1", children: r.map((t) => {
+    const n = t.icon, a = `group/side relative flex items-center gap-3 h-10 rounded-md px-3 text-sm transition-all duration-200 cursor-pointer ${t.active ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}`, o = /* @__PURE__ */ s(v, { 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 ${r.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 ${t.active ? "opacity-100 scale-y-100" : "opacity-0 scale-y-0"}`
         }
       ),
       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 })
+      /* @__PURE__ */ e("span", { className: "truncate", children: t.label })
     ] });
-    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);
+    return t.active ? /* @__PURE__ */ e("span", { className: a, "aria-current": "page", children: o }, t.to) : /* @__PURE__ */ e(f, { to: t.to, className: a, children: o }, t.to);
   }) });
 }
-function W({
-  label: t,
-  icon: r,
+function ie({
+  label: r,
+  icon: t,
   iconClassName: n = "text-gray-400",
-  children: o
+  children: a
 }) {
-  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: [
-      r && /* @__PURE__ */ e(r, { className: `w-4 h-4 mr-2 ${n}` }),
-      t
+  return /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ s("span", { className: "text-gray-700 flex items-center flex-shrink-0", children: [
+      t && /* @__PURE__ */ e(t, { className: `w-4 h-4 mr-2 ${n}` }),
+      r
     ] }),
-    /* @__PURE__ */ e("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: a })
   ] });
 }
-function ee({
-  className: t = "space-y-6",
-  children: r
+const V = {
+  blue: "text-blue-600",
+  purple: "text-purple-600",
+  red: "text-red-600",
+  green: "text-green-600",
+  orange: "text-orange-600",
+  gray: "text-gray-500"
+}, L = "w-full flex items-start gap-3 px-3 py-2 text-left transition-colors hover:bg-gray-50 cursor-pointer";
+function de({
+  label: r,
+  items: t,
+  icon: n,
+  variant: a = "soft",
+  tone: o = "gray",
+  size: m = "md",
+  align: l = "right",
+  className: d = ""
+}) {
+  const [p, g] = M(!1), h = _(null);
+  return A(() => {
+    if (!p) return;
+    const i = (c) => {
+      var u;
+      (u = h.current) != null && u.contains(c.target) || g(!1);
+    }, b = (c) => {
+      c.key === "Escape" && g(!1);
+    };
+    return document.addEventListener("mousedown", i), document.addEventListener("keydown", b), () => {
+      document.removeEventListener("mousedown", i), document.removeEventListener("keydown", b);
+    };
+  }, [p]), /* @__PURE__ */ s("div", { className: `relative ${d}`, ref: h, children: [
+    /* @__PURE__ */ s(
+      X,
+      {
+        variant: a,
+        tone: o,
+        size: m,
+        icon: n,
+        onClick: () => g((i) => !i),
+        children: [
+          r,
+          /* @__PURE__ */ e(
+            O,
+            {
+              className: `w-4 h-4 transition-transform duration-200 ${p ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    p && /* @__PURE__ */ e(
+      "div",
+      {
+        className: `absolute ${l === "right" ? "right-0" : "left-0"} mt-2 w-64 py-1 bg-white rounded-lg shadow-lg border border-gray-200 z-50 animate-dropdown-in`,
+        children: t.map((i, b) => {
+          const c = V[i.tone ?? "gray"], u = /* @__PURE__ */ s(v, { children: [
+            i.icon && /* @__PURE__ */ e(
+              "span",
+              {
+                className: `flex items-center gap-1 mt-0.5 flex-shrink-0 ${c}`,
+                children: i.icon
+              }
+            ),
+            /* @__PURE__ */ s("span", { className: "min-w-0", children: [
+              /* @__PURE__ */ e("span", { className: "block text-sm font-medium text-gray-900", children: i.label }),
+              i.description && /* @__PURE__ */ e("span", { className: "block text-xs text-gray-500 mt-0.5 break-all", children: i.description })
+            ] })
+          ] });
+          return i.href ? /* @__PURE__ */ e(
+            "a",
+            {
+              href: i.href,
+              target: i.target,
+              rel: i.target === "_blank" ? "noopener noreferrer" : void 0,
+              className: L,
+              onClick: () => g(!1),
+              children: u
+            },
+            b
+          ) : /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              disabled: i.disabled,
+              onClick: () => {
+                var x;
+                i.keepOpen || g(!1), (x = i.onClick) == null || x.call(i);
+              },
+              className: `${L} disabled:opacity-50 disabled:cursor-not-allowed`,
+              children: u
+            },
+            b
+          );
+        })
+      }
+    )
+  ] });
+}
+function ce({
+  className: r = "space-y-6",
+  children: t
 }) {
   return /* @__PURE__ */ e(
     "div",
     {
-      className: `flex-1 overflow-y-auto px-4 sm:px-6 lg:px-8 py-6 ${t}`,
-      children: r
+      className: `flex-1 overflow-y-auto px-4 sm:px-6 lg:px-8 py-6 ${r}`,
+      children: t
     }
   );
 }
-function re({
-  value: t,
-  onChange: r,
+function ge({
+  value: r,
+  onChange: t,
   placeholder: n = "Search...",
-  className: o = "w-full",
-  slashToFocus: a = !1
+  className: a = "w-full",
+  slashToFocus: o = !1
 }) {
-  const g = j(null);
+  const m = _(null);
   return A(() => {
-    if (!a) return;
-    function s(i) {
-      var c;
-      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());
+    if (!o) return;
+    function l(d) {
+      var g;
+      if (d.key !== "/" || d.ctrlKey || d.metaKey || d.altKey) return;
+      const p = d.target;
+      p.tagName === "INPUT" || p.tagName === "TEXTAREA" || p.tagName === "SELECT" || p.isContentEditable || (d.preventDefault(), (g = m.current) == null || g.focus());
     }
-    return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
-  }, [a]), /* @__PURE__ */ l("div", { className: `relative ${o}`, children: [
-    /* @__PURE__ */ e(L, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4 pointer-events-none" }),
+    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
+  }, [o]), /* @__PURE__ */ s("div", { className: `relative ${a}`, children: [
+    /* @__PURE__ */ e(R, { 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,
+        ref: m,
         type: "text",
-        value: t,
-        onChange: (s) => r(s.target.value),
+        value: r,
+        onChange: (l) => t(l.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__ */ 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: "/" })
+    o && !r && /* @__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 D = {
+const H = {
   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,102 +528,163 @@ const D = {
   red: { badge: "bg-red-100", icon: "text-red-600" },
   purple: { badge: "bg-purple-100", icon: "text-purple-600" }
 };
-function te({
-  icon: t,
-  label: r,
+function be({
+  icon: r,
+  label: t,
   value: n,
-  tone: o = "neutral"
+  tone: a = "neutral"
 }) {
-  const a = D[o];
-  return /* @__PURE__ */ l("div", { className: "flex items-center gap-4", children: [
+  const o = H[a];
+  return /* @__PURE__ */ s("div", { className: "flex items-center gap-4", children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: `flex h-12 w-12 items-center justify-center rounded-xl ${a.badge}`,
-        children: /* @__PURE__ */ e(t, { className: `w-6 h-6 ${a.icon}` })
+        className: `flex h-12 w-12 items-center justify-center rounded-xl ${o.badge}`,
+        children: /* @__PURE__ */ e(r, { className: `w-6 h-6 ${o.icon}` })
       }
     ),
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ e("p", { className: "text-sm font-medium text-gray-500", children: r }),
+    /* @__PURE__ */ s("div", { children: [
+      /* @__PURE__ */ e("p", { className: "text-sm font-medium text-gray-500", children: t }),
       /* @__PURE__ */ e("p", { className: "text-3xl font-bold text-gray-900 tabular-nums", children: n })
     ] })
   ] });
 }
-const N = {
+const S = {
   ok: "bg-green-500",
   down: "bg-red-500",
   unknown: "bg-gray-300"
-}, w = (t) => `${(t * 100).toFixed(4)}%`;
-function ne({
-  from: t,
-  to: r,
+}, C = (r) => `${(r * 100).toFixed(4)}%`;
+function ue({
+  from: r,
+  to: t,
+  spans: n,
+  buckets: a = 48,
+  height: o = "1.75rem",
+  renderTooltip: m
+}) {
+  const [l, d] = M(null), p = r.getTime(), g = t.getTime() - p;
+  if (!(g > 0)) return null;
+  const h = g / a, i = Array.from({ length: a }, (c, u) => {
+    const x = p + u * h, N = x + h;
+    let y = 0;
+    for (const T of n) {
+      const k = Math.max(T.start.getTime(), x), E = Math.min(T.end.getTime(), N);
+      E > k && (y += E - k);
+    }
+    return {
+      start: new Date(x),
+      end: new Date(N),
+      downMs: y,
+      ratio: 1 - y / h
+    };
+  });
+  return /* @__PURE__ */ s("div", { className: "relative", children: [
+    l !== null && m && /* @__PURE__ */ e(
+      "div",
+      {
+        className: "pointer-events-none absolute bottom-full z-10 mb-2 whitespace-nowrap rounded-md bg-gray-900 px-2 py-1.5 text-[11px] leading-tight text-white shadow-lg",
+        style: ((c) => {
+          const u = (c + 0.5) / a;
+          return u < 0.15 ? { left: 0 } : u > 0.85 ? { right: 0 } : { left: `${u * 100}%`, transform: "translateX(-50%)" };
+        })(l),
+        children: m(i[l])
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "flex items-stretch gap-[2px]",
+        style: { height: o },
+        onMouseLeave: () => d(null),
+        children: i.map((c, u) => /* @__PURE__ */ e(
+          "div",
+          {
+            onMouseEnter: () => d(u),
+            className: `relative min-w-[2px] flex-1 cursor-pointer overflow-hidden rounded-[2px] bg-emerald-500 transition-opacity ${l === u ? "opacity-60" : ""}`,
+            children: c.downMs > 0 && /* @__PURE__ */ e(
+              "div",
+              {
+                className: "absolute inset-x-0 bottom-0 bg-red-500",
+                style: { height: `max(3px, ${(1 - c.ratio) * 100}%)` }
+              }
+            )
+          },
+          c.start.getTime()
+        ))
+      }
+    )
+  ] });
+}
+function me({
+  from: r,
+  to: t,
   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"
+  baseline: a = "ok",
+  ticks: o = 5,
+  formatTick: m = (g) => g.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+  labelWidth: l = "8rem",
+  rowHeight: d = "1.25rem",
+  emptyLabel: p = "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))
+  const g = r.getTime(), h = t.getTime() - g;
+  if (!(h > 0) || n.length === 0)
+    return /* @__PURE__ */ e("div", { className: "py-8 text-center text-sm text-gray-500", children: p });
+  const i = Array.from(
+    { length: Math.max(2, o) },
+    (b, c) => new Date(g + h * c / (Math.max(2, o) - 1))
   );
-  return /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
-    n.map((d) => /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+  return /* @__PURE__ */ s("div", { className: "space-y-1.5", children: [
+    n.map((b) => /* @__PURE__ */ s("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
+          style: { width: l },
+          title: b.name,
+          children: b.label ?? b.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;
+          className: `relative flex-1 overflow-hidden rounded-sm ${S[a]}`,
+          style: { height: d },
+          children: b.spans.map((c) => {
+            const u = Math.max(c.start.getTime(), g), x = Math.min(c.end.getTime(), g + h);
+            if (x <= u) return null;
+            const N = (u - g) / h, y = (x - u) / h;
             return /* @__PURE__ */ e(
               "div",
               {
-                className: `absolute inset-y-0 ${N[b.tone]}`,
+                className: `absolute inset-y-0 ${S[c.tone]}`,
                 style: {
-                  left: w(T),
-                  width: `max(2px, ${w(k)})`
+                  left: C(N),
+                  width: `max(2px, ${C(y)})`
                 },
-                title: b.label
+                title: c.label
               },
-              `${b.start.getTime()}-${b.end.getTime()}`
+              `${c.start.getTime()}-${c.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)),
+      b.trailing !== void 0 && /* @__PURE__ */ e("div", { className: "w-16 shrink-0 text-right font-mono text-xs tabular-nums text-gray-600", children: b.trailing })
+    ] }, b.name)),
     /* @__PURE__ */ e(
       "div",
       {
         className: "flex justify-between pt-1 text-[11px] tabular-nums text-gray-400",
         style: {
-          marginLeft: s,
+          marginLeft: l,
           paddingLeft: "0.75rem",
-          marginRight: n.some((d) => d.trailing !== void 0) ? "4rem" : void 0
+          marginRight: n.some((b) => b.trailing !== void 0) ? "4rem" : void 0
         },
-        children: f.map((d) => /* @__PURE__ */ e("span", { children: g(d) }, d.getTime()))
+        children: i.map((b) => /* @__PURE__ */ e("span", { children: m(b) }, b.getTime()))
       }
     )
   ] });
 }
-const ae = {
+const pe = {
   blue: {
     header: "bg-blue-50 text-blue-800",
     hover: "hover:bg-blue-50",
@@ -532,24 +726,24 @@ const ae = {
     badge: "bg-gray-200 text-gray-700"
   }
 };
-function oe({
-  toast: t,
-  onClose: r
+function he({
+  toast: r,
+  onClose: t
 }) {
-  return t ? /* @__PURE__ */ e(
+  return r ? /* @__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__ */ 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 }),
+      className: `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg border transition-all duration-300 ease-in-out ${r.type === "success" ? "bg-green-50 text-green-800 border-green-200" : "bg-red-50 text-red-800 border-red-200"}`,
+      children: /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
+        r.type === "success" ? /* @__PURE__ */ e(B, { className: "w-5 h-5 text-green-600" }) : /* @__PURE__ */ e(w, { className: "w-5 h-5 text-red-600" }),
+        /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: r.message }),
         /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: r,
+            onClick: t,
             className: "ml-2 text-gray-400 hover:text-gray-600 cursor-pointer",
-            children: /* @__PURE__ */ e(v, { className: "w-4 h-4" })
+            children: /* @__PURE__ */ e(w, { className: "w-4 h-4" })
           }
         )
       ] })
@@ -557,24 +751,27 @@ function oe({
   ) : null;
 }
 export {
-  R as BADGE_COLORS,
-  q as BackLink,
-  U as Badge,
+  ee as AlertBanner,
+  I as BADGE_COLORS,
+  oe as BackLink,
+  J 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
+  ae as CountryFlag,
+  de as DropdownMenu,
+  ie as InfoRow,
+  Q as LabelChip,
+  te as ListRow,
+  ce as PageContainer,
+  W as Panel,
+  pe as SECTION_THEMES,
+  ge as SearchInput,
+  re as SectionCard,
+  le as SideNav,
+  be as StatCard,
+  me as StateTimeline,
+  se as TabNav,
+  he as Toast,
+  ue as UptimeBars,
+  ne as ViewAllFooter
 };

package/dist/state-timeline.d.ts

@@ -18,6 +18,33 @@ export interface TimelineLane {
     trailing?: ReactNode;
 }
 export type TimelineTone = "ok" | "down" | "unknown";
+export interface UptimeBucket {
+    start: Date;
+    end: Date;
+    /** Downtime inside this bucket, in ms. */
+    downMs: number;
+    /** Fraction of the bucket spent up, 0..1. */
+    ratio: number;
+}
+/**
+ * Status-page style availability bars: the window is split into equal buckets,
+ * each drawn green with a red portion sized to the downtime inside it.
+ *
+ * The proportion is the point — colouring a whole bucket red for a 30-second
+ * blip makes a flapping device look permanently offline. A red sliver reads as
+ * "briefly down", a full red bar as "down the whole time", with no intermediate
+ * colour whose meaning has to be guessed.
+ */
+export declare function UptimeBars({ from, to, spans, buckets, height, renderTooltip, }: {
+    from: Date;
+    to: Date;
+    /** Down intervals in absolute time; clipped to the window. */
+    spans: TimelineSpan[];
+    buckets?: number;
+    height?: string;
+    /** Hover card contents for a bucket. No tooltip is shown when omitted. */
+    renderTooltip?: (bucket: UptimeBucket) => ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
 /**
  * Horizontal state timeline: one lane per series, spans drawn as coloured bands
  * against a baseline.

package/package.json

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