sermon-js 0.0.0-stage → 0.2.0

package/dist/react/heroui/index.js

@@ -0,0 +1,821 @@
+"use client";
+import {
+  FOCUS_EVENT,
+  LABEL_TEXT,
+  LABEL_TONE,
+  RateLimitError,
+  STATUS_TEXT,
+  STATUS_TONE,
+  StatusProvider,
+  buildLayout,
+  currentAnchor,
+  flattenServices,
+  focusAnchor,
+  formatDateTime,
+  formatDuration,
+  formatMs,
+  formatPct,
+  groupAnchor,
+  humanize,
+  isStale,
+  mergeBars,
+  serviceAnchor,
+  servicesOf,
+  statusOf,
+  timeAgo,
+  useHistory,
+  useRunChecks,
+  useStatus,
+  useThemePreference
+} from "../../chunk-EMP7XVKC.js";
+
+// src/react/heroui/StatusPage.tsx
+import { Card as Card3 } from "@heroui/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2 } from "react";
+
+// src/react/heroui/controls.tsx
+import { Button, ToggleButton, ToggleButtonGroup } from "@heroui/react";
+
+// src/react/heroui/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Icon({ size = 16, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      ...props,
+      children
+    }
+  );
+}
+var RefreshIcon = (props) => /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" })
+] });
+var PlayIcon = (props) => /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M7 4v16l13-8z" }) });
+var DesktopIcon = (props) => /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zM7 20h10M9 16v4M15 16v4" }) });
+var SunIcon = (props) => /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0M3 12h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7" }) });
+var MoonIcon = (props) => /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M12 3h.4A7.5 7.5 0 0 0 20 14.4A9 9 0 1 1 12 3" }) });
+var AlertIcon = (props) => /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M12 9v4m0 4h.01M10.4 3.6L2.3 17.2a1.9 1.9 0 0 0 1.6 2.9h16.2a1.9 1.9 0 0 0 1.6-2.9L13.6 3.6a1.9 1.9 0 0 0-3.2 0" }) });
+
+// src/react/heroui/controls.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function RunAllButton({ label = "Run all checks" }) {
+  const run = useRunChecks();
+  const rateLimited = run.error instanceof RateLimitError ? run.error : void 0;
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+    rateLimited && /* @__PURE__ */ jsxs2("span", { className: "text-xs text-muted", children: [
+      "Try again in ",
+      rateLimited.retryAfter,
+      "s"
+    ] }),
+    run.error && !rateLimited && /* @__PURE__ */ jsx2("span", { className: "text-xs text-danger", children: run.error.message }),
+    /* @__PURE__ */ jsxs2(Button, { size: "sm", variant: "tertiary", isDisabled: run.isPending, onPress: () => run.mutate(), children: [
+      /* @__PURE__ */ jsx2(RefreshIcon, { size: 16, className: run.isPending ? "motion-safe:animate-spin" : void 0 }),
+      run.isPending ? "Running checks\u2026" : label
+    ] })
+  ] });
+}
+var THEMES = [
+  { id: "system", label: "System theme", Icon: DesktopIcon },
+  { id: "light", label: "Light theme", Icon: SunIcon },
+  { id: "dark", label: "Dark theme", Icon: MoonIcon }
+];
+function ThemeSwitcher() {
+  const [preference, setPreference] = useThemePreference();
+  return /* @__PURE__ */ jsx2(
+    ToggleButtonGroup,
+    {
+      "aria-label": "Color theme",
+      size: "sm",
+      disallowEmptySelection: true,
+      selectedKeys: [preference],
+      onSelectionChange: (keys) => {
+        const [key] = [...keys];
+        if (key) setPreference(key);
+      },
+      className: "opacity-60 transition-opacity hover:opacity-100 focus-within:opacity-100",
+      children: THEMES.map(({ id, label, Icon: Icon2 }, index) => /* @__PURE__ */ jsxs2(ToggleButton, { id, isIconOnly: true, "aria-label": label, children: [
+        index > 0 && /* @__PURE__ */ jsx2(ToggleButtonGroup.Separator, {}),
+        /* @__PURE__ */ jsx2(Icon2, { size: 14 })
+      ] }, id))
+    }
+  );
+}
+function StaleNotice({ snapshot }) {
+  if (!isStale(snapshot, snapshot.generatedAt) || snapshot.lastRunAt === null) return null;
+  return /* @__PURE__ */ jsxs2("div", { role: "status", className: "flex items-start gap-2 rounded-lg bg-warning/10 px-3 py-2 text-sm text-warning", children: [
+    /* @__PURE__ */ jsx2(AlertIcon, { size: 16, className: "mt-0.5 shrink-0" }),
+    /* @__PURE__ */ jsxs2("span", { children: [
+      "These results are out of date: the last full check ran ",
+      timeAgo(snapshot.lastRunAt),
+      ", and checks should run every ",
+      formatDuration(snapshot.intervalMs),
+      "."
+    ] })
+  ] });
+}
+
+// src/react/heroui/details.tsx
+import { Label, Meter } from "@heroui/react";
+
+// src/react/heroui/tones.ts
+var TONE_BG = {
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  accent: "bg-accent",
+  default: "bg-default"
+};
+var TONE_TEXT = {
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-danger",
+  accent: "text-accent",
+  default: "text-muted"
+};
+
+// src/react/heroui/details.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var WIDTH = 120;
+var HEIGHT = 28;
+function Sparkline({ values, threshold }) {
+  const points = values.slice(-96);
+  const measured = points.filter((value) => value !== null);
+  if (measured.length < 2) {
+    return /* @__PURE__ */ jsx3("div", { style: { width: WIDTH, height: HEIGHT }, className: "text-[10px] text-muted", children: "no latency data" });
+  }
+  const max = Math.max(threshold, ...measured);
+  const step = WIDTH / Math.max(1, points.length - 1);
+  const y = (value) => HEIGHT - 2 - value / max * (HEIGHT - 4);
+  let path = "";
+  points.forEach((value, index) => {
+    if (value === null) return;
+    const previous = points[index - 1];
+    path += `${previous === null || previous === void 0 ? "M" : "L"}${(index * step).toFixed(1)},${y(value).toFixed(1)} `;
+  });
+  return /* @__PURE__ */ jsxs3("svg", { width: WIDTH, height: HEIGHT, viewBox: `0 0 ${WIDTH} ${HEIGHT}`, "aria-hidden": true, className: "shrink-0", children: [
+    /* @__PURE__ */ jsx3(
+      "line",
+      {
+        x1: 0,
+        x2: WIDTH,
+        y1: y(threshold),
+        y2: y(threshold),
+        className: "stroke-warning",
+        strokeDasharray: "2 3",
+        strokeWidth: 1,
+        opacity: 0.6
+      }
+    ),
+    /* @__PURE__ */ jsx3("path", { d: path, fill: "none", stroke: "currentColor", strokeWidth: 1.5, className: "text-accent" })
+  ] });
+}
+var number = new Intl.NumberFormat("en");
+function UsageBar({ usage }) {
+  const pct = usage.limit > 0 ? usage.used / usage.limit * 100 : 0;
+  const unit = usage.unit ? ` ${usage.unit}` : "";
+  return /* @__PURE__ */ jsxs3("div", { className: "flex w-full max-w-md flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs3(
+      Meter,
+      {
+        value: Math.min(usage.used, usage.limit),
+        maxValue: usage.limit,
+        color: pct >= 90 ? "danger" : pct >= 75 ? "warning" : "success",
+        size: "sm",
+        valueLabel: /* @__PURE__ */ jsxs3("span", { className: "tabular-nums", children: [
+          number.format(usage.used),
+          " / ",
+          number.format(usage.limit),
+          unit,
+          " \xB7 ",
+          pct.toFixed(pct < 10 ? 1 : 0),
+          "%"
+        ] }),
+        children: [
+          /* @__PURE__ */ jsx3(Label, { className: "text-xs", children: usage.label }),
+          /* @__PURE__ */ jsx3(Meter.Output, { className: "text-xs" }),
+          /* @__PURE__ */ jsx3(Meter.Track, { children: /* @__PURE__ */ jsx3(Meter.Fill, {}) })
+        ]
+      }
+    ),
+    usage.resetsAt && /* @__PURE__ */ jsxs3("span", { className: "text-[11px] text-muted", children: [
+      number.format(usage.limit - usage.used),
+      unit,
+      " left \xB7 resets ",
+      timeAgo(usage.resetsAt)
+    ] })
+  ] });
+}
+var FLY_REGIONS = {
+  ams: "Amsterdam",
+  arn: "Stockholm",
+  atl: "Atlanta",
+  bog: "Bogot\xE1",
+  bom: "Mumbai",
+  bos: "Boston",
+  cdg: "Paris",
+  den: "Denver",
+  dfw: "Dallas",
+  ewr: "Secaucus",
+  eze: "Buenos Aires",
+  fra: "Frankfurt",
+  gdl: "Guadalajara",
+  gig: "Rio de Janeiro",
+  gru: "S\xE3o Paulo",
+  hkg: "Hong Kong",
+  iad: "Ashburn",
+  jnb: "Johannesburg",
+  lax: "Los Angeles",
+  lhr: "London",
+  mad: "Madrid",
+  mia: "Miami",
+  nrt: "Tokyo",
+  ord: "Chicago",
+  otp: "Bucharest",
+  phx: "Phoenix",
+  qro: "Quer\xE9taro",
+  scl: "Santiago",
+  sea: "Seattle",
+  sin: "Singapore",
+  sjc: "San Jose",
+  syd: "Sydney",
+  waw: "Warsaw",
+  yul: "Montreal",
+  yyz: "Toronto"
+};
+function InstanceTable({
+  instances,
+  stats,
+  regionNames = FLY_REGIONS
+}) {
+  return /* @__PURE__ */ jsx3("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs3("table", { className: "w-full min-w-[34rem] text-xs", children: [
+    /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs3("tr", { className: "text-left text-[10px] uppercase tracking-wide text-muted", children: [
+      /* @__PURE__ */ jsx3("th", { className: "py-1 pr-3 font-normal", children: "Region" }),
+      /* @__PURE__ */ jsx3("th", { className: "py-1 pr-3 font-normal", children: "Machine" }),
+      /* @__PURE__ */ jsx3("th", { className: "py-1 pr-3 font-normal", children: "Status" }),
+      /* @__PURE__ */ jsx3("th", { className: "py-1 pr-3 text-right font-normal", children: "Response" }),
+      /* @__PURE__ */ jsx3("th", { className: "py-1 pr-3 text-right font-normal", children: "p50 24h" }),
+      /* @__PURE__ */ jsx3("th", { className: "py-1 text-right font-normal", children: "Uptime 24h" })
+    ] }) }),
+    /* @__PURE__ */ jsx3("tbody", { className: "divide-y divide-border", children: instances.map((instance) => {
+      const tone = STATUS_TONE[instance.status];
+      const instanceStats = stats?.[instance.key];
+      return /* @__PURE__ */ jsxs3("tr", { className: "align-top", children: [
+        /* @__PURE__ */ jsx3("td", { className: "py-1.5 pr-3", children: /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx3("span", { className: `size-2 shrink-0 rounded-full ${TONE_BG[tone]}`, "aria-hidden": true }),
+          /* @__PURE__ */ jsx3("span", { className: "font-mono", children: instance.key }),
+          /* @__PURE__ */ jsx3("span", { className: "text-muted", children: (instance.region && regionNames[instance.region]) ?? "" })
+        ] }) }),
+        /* @__PURE__ */ jsx3("td", { className: "py-1.5 pr-3 font-mono text-muted", title: instance.id, children: [instance.id?.slice(0, 8), instance.state].filter(Boolean).join(" \xB7 ") }),
+        /* @__PURE__ */ jsxs3("td", { className: "py-1.5 pr-3", children: [
+          /* @__PURE__ */ jsx3("span", { className: TONE_TEXT[tone], children: STATUS_TEXT[instance.status] }),
+          instance.error && instance.status !== "up" && /* @__PURE__ */ jsxs3("span", { className: "block text-muted", children: [
+            instance.httpStatus ? `[${instance.httpStatus}] ` : "",
+            instance.error
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx3("td", { className: "py-1.5 pr-3 text-right tabular-nums", children: instance.latencyMs !== void 0 ? formatMs(instance.latencyMs) : "\u2013" }),
+        /* @__PURE__ */ jsx3("td", { className: "py-1.5 pr-3 text-right tabular-nums", children: formatMs(instanceStats?.p50) }),
+        /* @__PURE__ */ jsx3("td", { className: "py-1.5 text-right tabular-nums", children: formatPct(instanceStats?.uptime24h) })
+      ] }, instance.key);
+    }) })
+  ] }) });
+}
+
+// src/react/heroui/HistoryBars.tsx
+import { Chip, Tabs } from "@heroui/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var MIN_BAR_PX = 3;
+function average(bars) {
+  const scored = bars.filter((bar) => bar.score !== null);
+  if (!scored.length) return null;
+  return Math.round(scored.reduce((sum, bar) => sum + bar.score, 0) / scored.length);
+}
+function HistoryBars({ names = {} }) {
+  const [range, setRange] = useState("24h");
+  const [hovered, setHovered] = useState(null);
+  const history2 = useHistory(range);
+  const chart = useRef(null);
+  const [width, setWidth] = useState(null);
+  useEffect(() => {
+    const element = chart.current;
+    if (!element) return;
+    const measure = () => setWidth(element.clientWidth);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  const { bars, factor } = useMemo(
+    () => mergeBars(history2.data?.bars ?? [], width ? Math.floor(width / MIN_BAR_PX) : Infinity),
+    [history2.data, width]
+  );
+  const active = hovered !== null && bars[hovered] || bars.findLast((bar) => bar.runs > 0);
+  const avg = average(bars);
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsx4("h3", { className: "text-sm font-medium", children: "System score history" }),
+        /* @__PURE__ */ jsxs4("p", { className: "text-xs text-muted", children: [
+          history2.data ? `Worst score per ${formatDuration(history2.data.bucketMs * factor)}` : "Loading\u2026",
+          avg !== null && ` \xB7 average ${avg}`
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx4(Tabs, { selectedKey: range, onSelectionChange: (key) => setRange(key), children: /* @__PURE__ */ jsx4(Tabs.ListContainer, { children: /* @__PURE__ */ jsxs4(Tabs.List, { "aria-label": "History range", children: [
+        /* @__PURE__ */ jsxs4(Tabs.Tab, { id: "24h", children: [
+          "24h",
+          /* @__PURE__ */ jsx4(Tabs.Indicator, {})
+        ] }),
+        /* @__PURE__ */ jsxs4(Tabs.Tab, { id: "7d", children: [
+          "7d",
+          /* @__PURE__ */ jsx4(Tabs.Indicator, {})
+        ] })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref: chart,
+        className: "flex h-24 items-end gap-px",
+        onMouseLeave: () => setHovered(null),
+        role: "img",
+        "aria-label": `System score over the last ${range}`,
+        children: [
+          history2.isPending && Array.from({ length: 48 }, (_, index) => /* @__PURE__ */ jsx4("div", { className: "h-1/3 flex-1 animate-pulse rounded-sm bg-default" }, index)),
+          bars.map((bar, index) => /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: `relative h-full flex-1 cursor-default overflow-hidden rounded-sm bg-default transition-opacity ${hovered !== null && hovered !== index ? "opacity-50" : ""}`,
+              onMouseEnter: () => setHovered(index),
+              children: bar.score !== null && /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  className: `absolute inset-x-0 bottom-0 ${TONE_BG[LABEL_TONE[bar.label]]}`,
+                  style: { height: `${Math.max(3, bar.score)}%` }
+                }
+              )
+            },
+            bar.start
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "flex justify-between text-[11px] text-muted", children: [
+      /* @__PURE__ */ jsx4("span", { children: range === "24h" ? "24 hours ago" : "7 days ago" }),
+      /* @__PURE__ */ jsx4("span", { children: "Now" })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "min-h-10 rounded-lg bg-surface-secondary px-3 py-2 text-xs", children: active ? /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx4("span", { className: "font-medium", children: formatDateTime(active.start) }),
+        /* @__PURE__ */ jsx4("span", { className: TONE_TEXT[LABEL_TONE[active.label]], children: active.score === null ? "No data" : `Score ${active.score} \xB7 ${LABEL_TEXT[active.label]}` }),
+        active.runs > 0 && /* @__PURE__ */ jsxs4("span", { className: "text-muted", children: [
+          active.runs,
+          " run(s)"
+        ] })
+      ] }),
+      Object.keys(active.failing).length > 0 && /* @__PURE__ */ jsx4("div", { className: "mt-1 flex flex-wrap gap-1.5", children: Object.entries(active.failing).map(([key, status]) => /* @__PURE__ */ jsx4(
+        Chip,
+        {
+          size: "sm",
+          variant: "soft",
+          color: status === "down" ? "danger" : "warning",
+          "aria-label": `${names[key] ?? key}: ${status}`,
+          children: names[key] ?? key
+        },
+        key
+      )) })
+    ] }) : /* @__PURE__ */ jsx4("span", { className: "text-muted", children: "Hover a bar to see details" }) })
+  ] });
+}
+
+// src/react/heroui/ScoreHeader.tsx
+import { Chip as Chip2 } from "@heroui/react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var SIZE = 88;
+var STROKE = 8;
+var RADIUS = (SIZE - STROKE) / 2;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+function ScoreRing({ score, tone }) {
+  const progress = score === null ? 0 : score / 100;
+  return /* @__PURE__ */ jsxs5("div", { className: "relative shrink-0", style: { width: SIZE, height: SIZE }, children: [
+    /* @__PURE__ */ jsxs5("svg", { width: SIZE, height: SIZE, viewBox: `0 0 ${SIZE} ${SIZE}`, className: "-rotate-90", children: [
+      /* @__PURE__ */ jsx5("circle", { cx: SIZE / 2, cy: SIZE / 2, r: RADIUS, fill: "none", strokeWidth: STROKE, className: "stroke-default" }),
+      /* @__PURE__ */ jsx5(
+        "circle",
+        {
+          cx: SIZE / 2,
+          cy: SIZE / 2,
+          r: RADIUS,
+          fill: "none",
+          strokeWidth: STROKE,
+          strokeLinecap: "round",
+          strokeDasharray: CIRCUMFERENCE,
+          strokeDashoffset: CIRCUMFERENCE * (1 - progress),
+          className: `${TONE_TEXT[tone]} transition-[stroke-dashoffset] duration-700`,
+          stroke: "currentColor"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
+      /* @__PURE__ */ jsx5("span", { className: "text-2xl font-semibold tabular-nums", children: score ?? "\u2013" }),
+      /* @__PURE__ */ jsx5("span", { className: "text-[10px] uppercase tracking-wide text-muted", children: "score" })
+    ] })
+  ] });
+}
+var COUNT_ORDER = ["up", "degraded", "down", "sleeping", "unconfigured"];
+function ScoreHeader({ snapshot }) {
+  const tone = LABEL_TONE[snapshot.label];
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-5 sm:flex-row sm:items-center", children: [
+    /* @__PURE__ */ jsx5(ScoreRing, { score: snapshot.score, tone }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx5("h2", { className: "text-xl font-semibold", children: LABEL_TEXT[snapshot.label] }),
+        /* @__PURE__ */ jsx5(Chip2, { color: tone, variant: "soft", size: "sm", children: snapshot.label })
+      ] }),
+      /* @__PURE__ */ jsx5("div", { className: "flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted", children: COUNT_ORDER.filter((status) => snapshot.counts[status] > 0).map((status) => /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx5("span", { className: `size-2 rounded-full ${TONE_BG[STATUS_TONE[status]]}` }),
+        snapshot.counts[status],
+        " ",
+        STATUS_TEXT[status].toLowerCase()
+      ] }, status)) }),
+      /* @__PURE__ */ jsx5("p", { className: "text-xs text-muted", children: snapshot.lastCheckedAt ? `Last checked ${timeAgo(snapshot.lastCheckedAt)} \xB7 checks run every ${formatDuration(snapshot.intervalMs)}` : "No checks have run yet" })
+    ] })
+  ] });
+}
+
+// src/react/heroui/ServiceNav.tsx
+import { Card } from "@heroui/react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function NavLink({
+  anchor,
+  className,
+  children,
+  label
+}) {
+  return /* @__PURE__ */ jsx6(
+    "a",
+    {
+      href: `#${encodeURIComponent(anchor)}`,
+      "aria-label": label,
+      className,
+      onClick: (event) => {
+        if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+        event.preventDefault();
+        focusAnchor(anchor);
+      },
+      children
+    }
+  );
+}
+function SectionLinks({ section }) {
+  return /* @__PURE__ */ jsxs6("li", { children: [
+    /* @__PURE__ */ jsx6(
+      NavLink,
+      {
+        anchor: groupAnchor(section.key),
+        className: "block rounded px-1.5 pt-1 text-[11px] leading-4 font-medium text-muted hover:text-foreground",
+        children: section.title
+      }
+    ),
+    /* @__PURE__ */ jsx6("ul", { children: servicesOf(section).map((service) => {
+      const status = statusOf(service);
+      return /* @__PURE__ */ jsx6("li", { children: /* @__PURE__ */ jsxs6(
+        NavLink,
+        {
+          anchor: serviceAnchor(service.key),
+          label: `${service.name}: ${STATUS_TEXT[status]}`,
+          className: "flex items-center gap-1.5 rounded px-1.5 text-xs leading-[18px] hover:bg-default",
+          children: [
+            /* @__PURE__ */ jsx6("span", { className: `size-1.5 shrink-0 rounded-full ${TONE_BG[STATUS_TONE[status]]}`, "aria-hidden": true }),
+            /* @__PURE__ */ jsx6("span", { className: "truncate", children: service.name })
+          ]
+        }
+      ) }, service.key);
+    }) })
+  ] });
+}
+function ServiceNav({ blocks, title = "Services" }) {
+  return /* @__PURE__ */ jsxs6(Card, { className: "max-h-[calc(100vh-2rem)] gap-1 overflow-y-auto p-3", children: [
+    /* @__PURE__ */ jsx6(Card.Header, { children: /* @__PURE__ */ jsx6(Card.Title, { className: "px-1.5 text-xs font-semibold", children: title }) }),
+    /* @__PURE__ */ jsx6(Card.Content, { children: /* @__PURE__ */ jsx6("nav", { "aria-label": "Tracked services", children: /* @__PURE__ */ jsx6("ul", { className: "flex flex-col gap-0.5", children: blocks.map(
+      (block) => block.type === "section" ? /* @__PURE__ */ jsx6(SectionLinks, { section: block.section }, block.section.key) : /* @__PURE__ */ jsxs6("li", { children: [
+        /* @__PURE__ */ jsx6("p", { className: "mt-2 px-1.5 text-[10px] leading-4 font-semibold uppercase tracking-wide text-muted", children: block.title }),
+        /* @__PURE__ */ jsx6("ul", { className: "flex flex-col gap-0.5", children: block.sections.map((section) => /* @__PURE__ */ jsx6(SectionLinks, { section }, section.key)) })
+      ] }, block.key)
+    ) }) }) })
+  ] });
+}
+
+// src/react/heroui/ServiceRow.tsx
+import { Button as Button2, Chip as Chip3 } from "@heroui/react";
+import { createContext, useContext } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var KitOptions = createContext({
+  regionNames: FLY_REGIONS,
+  allowRuns: true
+});
+function Stat({ label, value }) {
+  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx7("span", { className: "text-[10px] uppercase tracking-wide text-muted", children: label }),
+    /* @__PURE__ */ jsx7("span", { className: "text-sm tabular-nums", children: value })
+  ] });
+}
+var DAY_MS = 24 * 60 * 60 * 1e3;
+function ServiceRow({ service }) {
+  const run = useRunChecks();
+  const { regionNames, allowRuns } = useContext(KitOptions);
+  const status = statusOf(service);
+  const tone = STATUS_TONE[status];
+  const { result, stats } = service;
+  const failing = status === "down" || status === "degraded";
+  const rateLimited = run.error instanceof RateLimitError ? run.error : void 0;
+  const lastFailure = !failing && result && stats?.lastFailure && result.checkedAt - stats.lastFailure.at < DAY_MS ? stats.lastFailure : void 0;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      id: serviceAnchor(service.key),
+      className: `flex scroll-mt-6 flex-col gap-3 py-4 ${service.configured ? "" : "opacity-60"}`,
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-start gap-3", children: [
+          /* @__PURE__ */ jsx7("span", { className: `mt-1.5 size-2.5 shrink-0 rounded-full ${TONE_BG[tone]}`, "aria-hidden": true }),
+          /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsx7("span", { className: "font-medium", children: service.name }),
+              service.critical && /* @__PURE__ */ jsx7(Chip3, { size: "sm", variant: "tertiary", children: "critical" }),
+              /* @__PURE__ */ jsx7(Chip3, { size: "sm", variant: "soft", color: tone, children: STATUS_TEXT[status] })
+            ] }),
+            service.description && /* @__PURE__ */ jsx7("p", { className: "text-xs text-muted", children: service.description }),
+            !service.configured && service.missing && service.missing.length > 0 && /* @__PURE__ */ jsxs7("p", { className: "text-xs text-muted", children: [
+              "Missing: ",
+              service.missing.join(", ")
+            ] })
+          ] }),
+          allowRuns && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+            rateLimited && /* @__PURE__ */ jsxs7("span", { className: "text-xs text-muted", children: [
+              "wait ",
+              rateLimited.retryAfter,
+              "s"
+            ] }),
+            /* @__PURE__ */ jsxs7(
+              Button2,
+              {
+                size: "sm",
+                variant: "ghost",
+                isDisabled: !service.configured,
+                isPending: run.isPending,
+                onPress: () => run.mutate(service.key),
+                "aria-label": `Check ${service.name} now`,
+                children: [
+                  /* @__PURE__ */ jsx7(PlayIcon, { size: 14 }),
+                  "Check now"
+                ]
+              }
+            )
+          ] })
+        ] }),
+        service.configured && /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-3 pl-5.5", children: [
+          /* @__PURE__ */ jsx7(Stat, { label: "Response", value: result?.probed === false ? "not probed" : formatMs(result?.latencyMs) }),
+          /* @__PURE__ */ jsx7(Stat, { label: "p50 / p95 24h", value: `${formatMs(stats?.p50)} / ${formatMs(stats?.p95)}` }),
+          /* @__PURE__ */ jsx7(Stat, { label: "Uptime 24h", value: formatPct(stats?.uptime24h) }),
+          /* @__PURE__ */ jsx7(Stat, { label: "Uptime 7d", value: formatPct(stats?.uptime7d) }),
+          stats && /* @__PURE__ */ jsx7(Sparkline, { values: stats.latency, threshold: service.slowMs }),
+          result && /* @__PURE__ */ jsx7(Stat, { label: "Checked", value: timeAgo(result.checkedAt) })
+        ] }),
+        result?.instances && result.instances.length > 0 && /* @__PURE__ */ jsx7("div", { className: "pl-5.5", children: /* @__PURE__ */ jsx7(InstanceTable, { instances: result.instances, stats: stats?.instances, regionNames }) }),
+        result?.usage && result.usage.length > 0 && /* @__PURE__ */ jsx7("div", { className: "flex flex-col gap-3 pl-5.5", children: result.usage.map((usage) => /* @__PURE__ */ jsx7(UsageBar, { usage }, usage.label)) }),
+        result?.metrics && Object.keys(result.metrics).length > 0 && /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-1.5 pl-5.5", children: Object.entries(result.metrics).filter(([, value]) => value !== "").map(([key, value]) => /* @__PURE__ */ jsxs7(Chip3, { size: "sm", variant: "secondary", children: [
+          humanize(key),
+          ": ",
+          value
+        ] }, key)) }),
+        failing && result?.error && /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: `ml-5.5 rounded-lg px-3 py-2 font-mono text-xs break-words ${status === "down" ? "bg-danger/10 text-danger" : "bg-warning/10 text-warning"}`,
+            children: [
+              result.httpStatus ? `[${result.httpStatus}] ` : "",
+              result.error
+            ]
+          }
+        ),
+        lastFailure && /* @__PURE__ */ jsxs7("p", { className: "pl-5.5 text-xs text-muted", children: [
+          "Last incident ",
+          formatDateTime(lastFailure.at),
+          " (",
+          lastFailure.status,
+          ")",
+          lastFailure.error ? `: ${lastFailure.error}` : ""
+        ] }),
+        run.error && !rateLimited && /* @__PURE__ */ jsx7("p", { className: "pl-5.5 text-xs text-danger", children: run.error.message })
+      ]
+    }
+  );
+}
+
+// src/react/heroui/ServiceSection.tsx
+import { Button as Button3, Card as Card2, Disclosure, Tooltip } from "@heroui/react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function useStoredExpanded(key, defaultExpanded) {
+  const storageKey = `sermon:section:${key}`;
+  const [expanded, setExpanded] = useState2(() => {
+    try {
+      const stored = localStorage.getItem(storageKey);
+      return stored === null ? defaultExpanded : stored === "expanded";
+    } catch {
+      return defaultExpanded;
+    }
+  });
+  const update = useCallback(
+    (value) => {
+      setExpanded(value);
+      try {
+        localStorage.setItem(storageKey, value ? "expanded" : "collapsed");
+      } catch {
+      }
+    },
+    [storageKey]
+  );
+  return [expanded, update];
+}
+function ServiceDots({ services }) {
+  return /* @__PURE__ */ jsx8("div", { className: "flex min-w-0 flex-wrap items-center justify-end gap-1", children: services.map((service) => {
+    const status = statusOf(service);
+    return /* @__PURE__ */ jsxs8(Tooltip, { delay: 100, closeDelay: 0, children: [
+      /* @__PURE__ */ jsx8(
+        Tooltip.Trigger,
+        {
+          "aria-label": `${service.name}: ${STATUS_TEXT[status]}`,
+          className: "flex size-4 items-center justify-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-focus",
+          children: /* @__PURE__ */ jsx8("span", { className: `size-2.5 rounded-full ${TONE_BG[STATUS_TONE[status]]}` })
+        }
+      ),
+      /* @__PURE__ */ jsx8(Tooltip.Content, { children: service.name })
+    ] }, service.key);
+  }) });
+}
+function SectionBody({ section, nested = false }) {
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    nested && /* @__PURE__ */ jsxs8("div", { id: groupAnchor(section.key), className: "mt-4 scroll-mt-6", children: [
+      /* @__PURE__ */ jsx8("h4", { className: "text-xs font-medium uppercase tracking-wide text-muted", children: section.title }),
+      section.description && /* @__PURE__ */ jsx8("p", { className: "text-xs text-muted", children: section.description })
+    ] }),
+    section.services.length > 0 && /* @__PURE__ */ jsx8("div", { className: "divide-y divide-border", children: section.services.map((service) => /* @__PURE__ */ jsx8(ServiceRow, { service }, service.key)) }),
+    section.groups.map((group) => /* @__PURE__ */ jsx8(SectionBody, { section: group, nested: true }, group.key))
+  ] });
+}
+function ServiceSection({
+  section,
+  defaultExpanded = false
+}) {
+  const [expanded, setExpanded] = useStoredExpanded(section.key, defaultExpanded);
+  const services = useMemo2(() => servicesOf(section), [section]);
+  useEffect2(() => {
+    const collectGroups = (s) => [groupAnchor(s.key), ...s.groups.flatMap(collectGroups)];
+    const anchors = /* @__PURE__ */ new Set([...collectGroups(section), ...services.map((service) => serviceAnchor(service.key))]);
+    const onFocus = (event) => {
+      if (anchors.has(event.detail.anchor)) setExpanded(true);
+    };
+    window.addEventListener(FOCUS_EVENT, onFocus);
+    return () => window.removeEventListener(FOCUS_EVENT, onFocus);
+  }, [section, services, setExpanded]);
+  if (!services.length) return null;
+  return /* @__PURE__ */ jsx8(Card2, { id: groupAnchor(section.key), className: "scroll-mt-6", children: /* @__PURE__ */ jsxs8(Disclosure, { isExpanded: expanded, onExpandedChange: setExpanded, children: [
+    /* @__PURE__ */ jsxs8(Disclosure.Heading, { className: "flex flex-wrap items-start justify-between gap-x-3 gap-y-2", children: [
+      /* @__PURE__ */ jsxs8(Disclosure.Trigger, { className: "flex min-w-48 flex-1 cursor-pointer flex-col text-left", children: [
+        /* @__PURE__ */ jsx8("span", { className: "font-medium leading-snug", children: section.title }),
+        section.description && /* @__PURE__ */ jsx8("span", { className: "text-sm leading-snug text-muted", children: section.description })
+      ] }),
+      /* @__PURE__ */ jsxs8("div", { className: "-mt-1 ml-auto flex max-w-full items-center gap-3 sm:max-w-[50%]", children: [
+        /* @__PURE__ */ jsx8(ServiceDots, { services }),
+        /* @__PURE__ */ jsx8(
+          Button3,
+          {
+            isIconOnly: true,
+            size: "sm",
+            variant: "ghost",
+            className: "shrink-0",
+            "aria-label": expanded ? `Collapse ${section.title}` : `Expand ${section.title}`,
+            "aria-expanded": expanded,
+            onPress: () => setExpanded(!expanded),
+            children: /* @__PURE__ */ jsx8(Disclosure.Indicator, { className: "text-muted" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx8(Disclosure.Content, { children: /* @__PURE__ */ jsx8(Disclosure.Body, { children: /* @__PURE__ */ jsx8("div", { className: "mt-2", children: /* @__PURE__ */ jsx8(SectionBody, { section }) }) }) })
+  ] }) });
+}
+
+// src/react/heroui/StatusPage.tsx
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var defaultQueryClient = new QueryClient({ defaultOptions: { queries: { retry: 1 } } });
+function Page({
+  brand,
+  footer,
+  ungroupedTitle,
+  defaultExpanded,
+  allowRuns = true,
+  showNav = true,
+  showThemeSwitcher = true,
+  refetchInterval
+}) {
+  const status = useStatus({ refetchInterval });
+  const snapshot = status.data;
+  const blocks = useMemo3(() => snapshot ? buildLayout(snapshot.tree, { ungroupedTitle }) : [], [snapshot, ungroupedTitle]);
+  const names = useMemo3(
+    () => Object.fromEntries(flattenServices(snapshot?.tree ?? []).map((service) => [service.key, service.name])),
+    [snapshot]
+  );
+  const handledHash = useRef2(false);
+  useEffect3(() => {
+    if (handledHash.current || !snapshot) return;
+    handledHash.current = true;
+    const anchor = currentAnchor();
+    if (!anchor) return;
+    history.scrollRestoration = "manual";
+    focusAnchor(anchor, { smooth: false });
+  }, [snapshot]);
+  useEffect3(() => {
+    const onHashChange = () => {
+      const anchor = currentAnchor();
+      if (anchor) focusAnchor(anchor);
+    };
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, []);
+  return (
+    // On wide screens the service index is attached to the right of the main column
+    /* @__PURE__ */ jsxs9("div", { className: "mx-auto flex min-h-screen max-w-5xl gap-6 px-4 py-8 sm:px-6 xl:max-w-[calc(64rem+12rem+1.5rem)]", children: [
+      /* @__PURE__ */ jsxs9("main", { className: "flex min-w-0 flex-1 flex-col gap-6", children: [
+        /* @__PURE__ */ jsxs9("header", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-3", children: [
+          brand ?? /* @__PURE__ */ jsx9("h1", { className: "text-lg font-semibold", children: "Status" }),
+          snapshot && allowRuns && /* @__PURE__ */ jsx9(RunAllButton, {})
+        ] }),
+        status.isPending && /* @__PURE__ */ jsx9("div", { className: "h-40 animate-pulse rounded-3xl bg-surface" }),
+        status.isError && /* @__PURE__ */ jsx9(Card3, { children: /* @__PURE__ */ jsxs9(Card3.Content, { className: "text-danger", children: [
+          "Could not load status: ",
+          status.error.message
+        ] }) }),
+        snapshot && /* @__PURE__ */ jsxs9(Fragment2, { children: [
+          /* @__PURE__ */ jsx9(StaleNotice, { snapshot }),
+          /* @__PURE__ */ jsx9(Card3, { children: /* @__PURE__ */ jsxs9(Card3.Content, { className: "flex flex-col gap-6", children: [
+            /* @__PURE__ */ jsx9(ScoreHeader, { snapshot }),
+            /* @__PURE__ */ jsx9(HistoryBars, { names })
+          ] }) }),
+          blocks.map(
+            (block) => block.type === "section" ? /* @__PURE__ */ jsx9(ServiceSection, { section: block.section, defaultExpanded }, block.section.key) : /* @__PURE__ */ jsxs9("div", { className: "contents", children: [
+              /* @__PURE__ */ jsxs9("div", { className: "mt-2 flex flex-col", children: [
+                /* @__PURE__ */ jsx9("h2", { className: "text-lg font-semibold leading-snug", children: block.title }),
+                block.description && /* @__PURE__ */ jsx9("p", { className: "text-sm leading-snug text-muted", children: block.description })
+              ] }),
+              block.sections.map((section) => /* @__PURE__ */ jsx9(ServiceSection, { section, defaultExpanded }, section.key))
+            ] }, block.key)
+          )
+        ] }),
+        /* @__PURE__ */ jsxs9("footer", { className: "flex flex-wrap items-center justify-between gap-3 pb-4 text-xs text-muted", children: [
+          /* @__PURE__ */ jsx9("span", { children: footer ?? (snapshot ? `Checks run every ${formatDuration(snapshot.intervalMs)} \xB7 history kept for ${formatDuration(snapshot.retentionMs)}` : "") }),
+          showThemeSwitcher && /* @__PURE__ */ jsx9(ThemeSwitcher, {})
+        ] })
+      ] }),
+      snapshot && showNav && /* @__PURE__ */ jsx9("aside", { className: "sticky top-4 hidden w-48 shrink-0 self-start xl:block", children: /* @__PURE__ */ jsx9(ServiceNav, { blocks }) })
+    ] })
+  );
+}
+function StatusPage(props) {
+  const options = useMemo3(
+    () => ({ regionNames: props.regionNames ?? FLY_REGIONS, allowRuns: props.allowRuns ?? true }),
+    [props.regionNames, props.allowRuns]
+  );
+  return /* @__PURE__ */ jsx9(QueryClientProvider, { client: props.queryClient ?? defaultQueryClient, children: /* @__PURE__ */ jsx9(StatusProvider, { baseUrl: props.baseUrl, client: props.client, children: /* @__PURE__ */ jsx9(KitOptions.Provider, { value: options, children: /* @__PURE__ */ jsx9(Page, { ...props }) }) }) });
+}
+export {
+  FLY_REGIONS,
+  HistoryBars,
+  InstanceTable,
+  KitOptions,
+  RunAllButton,
+  ScoreHeader,
+  ScoreRing,
+  ServiceNav,
+  ServiceRow,
+  ServiceSection,
+  Sparkline,
+  StaleNotice,
+  StatusPage,
+  ThemeSwitcher,
+  UsageBar
+};
+//# sourceMappingURL=index.js.map