@devicechain/widgets 0.23.0-rc.1 → 0.24.0-rc.1

package/dist/chunks/chunk-546TK2QG.js

@@ -0,0 +1,722 @@
+// src/widgets/severity.ts
+import { css } from "@devicechain/widget-sdk";
+var LEVEL_OF = {
+  CRITICAL: "critical",
+  MAJOR: "major",
+  MINOR: "minor",
+  WARNING: "warning"
+};
+var SEVERITY_ORDER = {
+  CRITICAL: 0,
+  MAJOR: 1,
+  MINOR: 2,
+  WARNING: 3,
+  INDETERMINATE: 4
+};
+function severityColor(colors, severity) {
+  const level = LEVEL_OF[severity];
+  return level ? colors[level] : css("muted-foreground");
+}
+function severityRank(severity) {
+  return SEVERITY_ORDER[severity] ?? 99;
+}
+function severityLabel(severity) {
+  if (!severity) return "";
+  return severity.charAt(0).toUpperCase() + severity.slice(1).toLowerCase();
+}
+function highestSeverity(severities) {
+  let best;
+  for (const s of severities) {
+    if (best === void 0 || severityRank(s) < severityRank(best)) best = s;
+  }
+  return best;
+}
+
+// src/widgets/alarm-table.tsx
+import { Fragment, useEffect, useId, useState } from "react";
+import {
+  css as css3,
+  fontVar as fontVar2,
+  FlashValue,
+  formatDateTime,
+  optBoolean,
+  optNumber,
+  optString,
+  useElementSize,
+  useSeverityColors as useSeverityColors2,
+  useWidgetSelect,
+  useWidgetTimeZone,
+  WidgetFrame
+} from "@devicechain/widget-sdk";
+
+// src/alarm-strings.ts
+import { viewerLocale } from "@devicechain/widget-sdk";
+var ALARM_STRINGS = {
+  en: {
+    tabsLabel: "Alarms by device type",
+    all: "All",
+    deviceType: "Device type",
+    activeBadge: (n, worst) => `${n} active ${n === 1 ? "alarm" : "alarms"}, worst ${worst}`,
+    severity: { CRITICAL: "Critical", MAJOR: "Major", MINOR: "Minor", WARNING: "Warning", INDETERMINATE: "Indeterminate" },
+    breakdown: {
+      label: "Alarms by severity",
+      total: (n) => `${n} ${n === 1 ? "alarm" : "alarms"}`,
+      ofType: (n, type) => `${n} ${n === 1 ? "alarm" : "alarms"} on ${type} devices`,
+      item: (severity, n) => `${severity}: ${n}`,
+      loading: "Loading alarms\u2026",
+      unsupported: "This data source cannot count alarms by severity.",
+      failed: "The alarm counts could not be read."
+    }
+  },
+  es: {
+    tabsLabel: "Alarmas por tipo de dispositivo",
+    all: "Todas",
+    deviceType: "Tipo de dispositivo",
+    activeBadge: (n, worst) => `${n} ${n === 1 ? "alarma activa" : "alarmas activas"}, la peor: ${worst}`,
+    severity: { CRITICAL: "Cr\xEDtica", MAJOR: "Mayor", MINOR: "Menor", WARNING: "Advertencia", INDETERMINATE: "Indeterminada" },
+    breakdown: {
+      label: "Alarmas por severidad",
+      total: (n) => `${n} ${n === 1 ? "alarma" : "alarmas"}`,
+      ofType: (n, type) => `${n} ${n === 1 ? "alarma" : "alarmas"} en dispositivos de tipo ${type}`,
+      item: (severity, n) => `${severity}: ${n}`,
+      loading: "Cargando alarmas\u2026",
+      unsupported: "Esta fuente de datos no puede contar alarmas por severidad.",
+      failed: "No se pudieron leer los recuentos de alarmas."
+    }
+  }
+};
+function alarmStrings(locale = viewerLocale()) {
+  return locale?.toLowerCase().split("-")[0] === "es" ? ALARM_STRINGS.es : ALARM_STRINGS.en;
+}
+
+// src/widgets/alarm-type-tabs.tsx
+import { css as css2, fontVar, useSeverityColors } from "@devicechain/widget-sdk";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var tabStyle = (active) => ({
+  flex: "0 0 auto",
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 6,
+  padding: "6px 10px",
+  border: "none",
+  borderBottom: `2px solid ${active ? css2("primary") : "transparent"}`,
+  background: "none",
+  font: "inherit",
+  fontSize: fontVar("md"),
+  fontWeight: active ? 600 : 400,
+  color: active ? css2("foreground") : css2("muted-foreground"),
+  cursor: "pointer",
+  whiteSpace: "nowrap"
+});
+var tabDomId = (idBase, token) => `${idBase}-tab-${token ?? ""}`;
+var panelDomId = (idBase) => `${idBase}-panel`;
+function AlarmTypeTabsStrip({ tabs, selected, onSelect, idBase }) {
+  const strings = alarmStrings();
+  const severity = useSeverityColors();
+  const refs = useRef(/* @__PURE__ */ new Map());
+  const order = [null, ...tabs.map((t) => t.token)];
+  const current = order.includes(selected) ? selected : null;
+  const move = (event, from) => {
+    const to = event.key === "ArrowRight" ? (from + 1) % order.length : event.key === "ArrowLeft" ? (from - 1 + order.length) % order.length : event.key === "Home" ? 0 : event.key === "End" ? order.length - 1 : -1;
+    if (to < 0) return;
+    event.preventDefault();
+    refs.current.get(order[to])?.focus();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": strings.tabsLabel,
+      style: {
+        display: "flex",
+        flexShrink: 0,
+        overflowX: "auto",
+        overflowY: "hidden",
+        borderBottom: `1px solid ${css2("border")}`
+      },
+      children: order.map((token, i) => {
+        const tab = token === null ? void 0 : tabs[i - 1];
+        const active = token === current;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (el) => {
+              if (el) refs.current.set(token, el);
+              else refs.current.delete(token);
+            },
+            type: "button",
+            role: "tab",
+            id: tabDomId(idBase, token),
+            "aria-selected": active,
+            "aria-controls": panelDomId(idBase),
+            tabIndex: active ? 0 : -1,
+            onClick: () => onSelect(token),
+            onKeyDown: (e) => move(e, i),
+            style: tabStyle(active),
+            children: [
+              token === null ? strings.all : tab?.name ?? token,
+              tab && tab.active > 0 ? /* @__PURE__ */ jsx(Badge, { tab, colors: severity, strings }) : null
+            ]
+          },
+          token ?? "\0all"
+        );
+      })
+    }
+  );
+}
+function Badge({
+  tab,
+  colors,
+  strings
+}) {
+  const worst = tab.worstSeverity ?? "INDETERMINATE";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-testid": "alarm-tab-badge",
+      role: "img",
+      "aria-label": strings.activeBadge(tab.active, strings.severity[worst] ?? worst),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        fontSize: fontVar("xs"),
+        fontWeight: 600,
+        fontVariantNumeric: "tabular-nums",
+        color: css2("foreground")
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-testid": "alarm-tab-badge-dot",
+            "aria-hidden": "true",
+            style: { width: 8, height: 8, borderRadius: "50%", background: severityColor(colors, worst), flexShrink: 0 }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: tab.active })
+      ]
+    }
+  );
+}
+
+// src/widgets/alarm-table.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var cell = { padding: "6px 10px", textAlign: "left", whiteSpace: "nowrap" };
+var headCell = {
+  ...cell,
+  position: "sticky",
+  top: 0,
+  background: css3("card"),
+  fontSize: fontVar2("xs"),
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.04em",
+  color: css3("muted-foreground"),
+  borderBottom: `1px solid ${css3("border")}`
+};
+var ALARM_TABLE_NARROW_PX = 480;
+var narrowCell = {
+  ...cell,
+  padding: "6px 6px",
+  whiteSpace: "normal",
+  overflowWrap: "break-word",
+  wordBreak: "normal"
+};
+function hyphenBreaks(text) {
+  const parts = text.split("-").map((p, i, all) => i < all.length - 1 ? `${p}-` : p);
+  return parts.map((part, i) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    i > 0 ? /* @__PURE__ */ jsx2("wbr", {}) : null,
+    part
+  ] }, i));
+}
+function shownTabs(discovered, pinned) {
+  if (pinned.length === 0) return [...discovered];
+  const byToken = new Map(discovered.map((t) => [t.token, t]));
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const token of pinned) {
+    if (seen.has(token)) continue;
+    seen.add(token);
+    out.push(byToken.get(token) ?? { token, name: null, active: 0, worstSeverity: null });
+  }
+  return out;
+}
+function pinnedTypes(widget) {
+  const list = widget.options?.deviceTypes;
+  if (!Array.isArray(list)) return [];
+  return list.flatMap((item) => {
+    const token = item?.token;
+    return typeof token === "string" && token !== "" ? [token] : [];
+  });
+}
+function statusLabel(alarm) {
+  if (alarm.state === "CLEARED") return "Cleared";
+  return alarm.acknowledged ? "Acknowledged" : "Active";
+}
+function AlarmTable({ widget, data, actions }) {
+  const { alarms, total, loading } = data;
+  const canAct = actions?.can("alarm:write") ?? false;
+  const [sizeRef, size] = useElementSize();
+  const severity = useSeverityColors2();
+  const narrow = size.width > 0 && size.width < ALARM_TABLE_NARROW_PX;
+  const typeTabs = data.typeTabs;
+  const tabs = typeTabs ? shownTabs(typeTabs.tabs, pinnedTypes(widget)) : [];
+  const stripShown = typeTabs !== void 0 && tabs.length > 0;
+  const selectTab = typeTabs?.select;
+  const selectedType = typeTabs?.selected ?? null;
+  const dropped = stripShown && selectedType !== null && !tabs.some((t) => t.token === selectedType);
+  useEffect(() => {
+    if (dropped) selectTab?.(null);
+  }, [dropped, selectTab]);
+  const idBase = useId();
+  const typeColumn = stripShown && selectedType === null && !narrow;
+  const columns = 5 + (narrow ? 0 : 2) + (typeColumn ? 1 : 0) + (canAct ? 1 : 0);
+  const text = narrow ? narrowCell : cell;
+  const precision = optNumber(widget.options, "precision");
+  const flash = optBoolean(widget.options, "flashOnChange");
+  const select = useWidgetSelect();
+  const timeZone = useWidgetTimeZone();
+  const selectionTarget = optString(widget.options, "selectionTarget");
+  const drillTo = select && selectionTarget ? { select, slot: selectionTarget } : void 0;
+  return /* @__PURE__ */ jsx2(WidgetFrame, { title: optString(widget.options, "title"), flush: true, children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    stripShown && typeTabs ? /* @__PURE__ */ jsx2(
+      AlarmTypeTabsStrip,
+      {
+        tabs,
+        selected: dropped ? null : selectedType,
+        onSelect: typeTabs.select,
+        idBase
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref: sizeRef,
+        style: { flex: 1, minHeight: 0, overflow: "auto" },
+        ...stripShown ? { role: "tabpanel", id: panelDomId(idBase), "aria-labelledby": tabDomId(idBase, dropped ? null : selectedType) } : {},
+        children: /* @__PURE__ */ jsxs2(
+          "table",
+          {
+            style: {
+              width: "100%",
+              borderCollapse: "collapse",
+              fontSize: fontVar2("md"),
+              color: css3("foreground"),
+              fontVariantNumeric: "tabular-nums"
+            },
+            children: [
+              /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+                /* @__PURE__ */ jsx2("th", { style: { ...headCell, width: 4, padding: 0 }, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx2("th", { scope: "col", style: headCell, children: "Severity" }),
+                narrow ? null : /* @__PURE__ */ jsx2("th", { scope: "col", style: headCell, children: "Status" }),
+                /* @__PURE__ */ jsx2("th", { scope: "col", style: headCell, children: "Originator" }),
+                typeColumn ? /* @__PURE__ */ jsx2("th", { scope: "col", style: headCell, children: alarmStrings().deviceType }) : null,
+                /* @__PURE__ */ jsx2("th", { scope: "col", style: headCell, children: "Alarm" }),
+                /* @__PURE__ */ jsx2("th", { scope: "col", style: { ...headCell, textAlign: "right" }, children: "Value" }),
+                narrow ? null : /* @__PURE__ */ jsx2("th", { scope: "col", style: headCell, children: "Raised" }),
+                canAct ? /* @__PURE__ */ jsx2("th", { scope: "col", style: { ...headCell, textAlign: "right" }, children: "Actions" }) : null
+              ] }) }),
+              /* @__PURE__ */ jsx2("tbody", { children: alarms.length === 0 ? /* @__PURE__ */ jsx2("tr", { children: /* @__PURE__ */ jsx2("td", { colSpan: columns, style: { ...cell, textAlign: "center", color: css3("muted-foreground") }, children: loading ? "Loading\u2026" : "No alarms" }) }) : alarms.map((alarm) => {
+                const color = severityColor(severity, alarm.severity);
+                return /* @__PURE__ */ jsxs2("tr", { style: { borderBottom: `1px solid ${css3("border")}` }, children: [
+                  /* @__PURE__ */ jsx2("td", { "aria-hidden": "true", style: { padding: 0, width: 4, background: color } }),
+                  /* @__PURE__ */ jsx2("td", { style: cell, children: /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+                    /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        style: { width: 8, height: 8, borderRadius: "50%", background: color, flexShrink: 0 }
+                      }
+                    ),
+                    severityLabel(alarm.severity)
+                  ] }) }),
+                  narrow ? null : /* @__PURE__ */ jsx2("td", { style: { ...cell, color: css3("muted-foreground") }, children: statusLabel(alarm) }),
+                  /* @__PURE__ */ jsx2("td", { style: text, children: /* @__PURE__ */ jsx2(OriginatorCell, { alarm, drillTo }) }),
+                  typeColumn ? /* @__PURE__ */ jsx2("td", { style: { ...cell, color: css3("muted-foreground") }, children: alarm.deviceType ? alarm.deviceType.name ?? alarm.deviceType.token : "\u2014" }) : null,
+                  /* @__PURE__ */ jsx2("td", { style: text, children: hyphenBreaks(alarm.alarmKey) }),
+                  /* @__PURE__ */ jsx2("td", { style: { ...cell, textAlign: "right" }, children: /* @__PURE__ */ jsx2(
+                    FlashValue,
+                    {
+                      value: alarm.lastValue,
+                      precision,
+                      enabled: flash,
+                      identity: alarm.token
+                    }
+                  ) }),
+                  narrow ? null : /* @__PURE__ */ jsx2("td", { style: { ...cell, color: css3("muted-foreground") }, children: formatDateTime(alarm.raisedTime, timeZone) }),
+                  canAct ? /* @__PURE__ */ jsx2("td", { style: { ...cell, textAlign: "right" }, children: /* @__PURE__ */ jsx2(AlarmRowActions, { alarm, actions }) }) : null
+                ] }, alarm.token);
+              }) })
+            ]
+          }
+        )
+      }
+    ),
+    total > alarms.length ? /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: {
+          padding: "4px 10px",
+          fontSize: fontVar2("xs"),
+          color: css3("muted-foreground"),
+          borderTop: `1px solid ${css3("border")}`
+        },
+        children: [
+          "Showing ",
+          alarms.length,
+          " of ",
+          total
+        ]
+      }
+    ) : null
+  ] }) });
+}
+function OriginatorCell({
+  alarm,
+  drillTo
+}) {
+  if (drillTo && alarm.originatorType === "device" && alarm.originatorToken) {
+    const token = alarm.originatorToken;
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: () => drillTo.select({ slot: drillTo.slot, binding: { kind: "device", deviceToken: token } }),
+        title: `Show ${token} in the linked widgets`,
+        style: {
+          padding: 0,
+          border: "none",
+          background: "none",
+          font: "inherit",
+          color: css3("primary"),
+          cursor: "pointer",
+          textDecoration: "underline",
+          textUnderlineOffset: 2
+        },
+        children: hyphenBreaks(token)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(Fragment2, { children: hyphenBreaks(alarm.originatorToken ?? alarm.originatorType) });
+}
+var actionButton = {
+  padding: "2px 8px",
+  fontSize: fontVar2("sm"),
+  lineHeight: 1.4,
+  borderRadius: 4,
+  border: `1px solid ${css3("border")}`,
+  background: css3("card"),
+  color: css3("foreground"),
+  cursor: "pointer"
+};
+function AlarmRowActions({ alarm, actions }) {
+  const severity = useSeverityColors2();
+  const [pending, setPending] = useState(null);
+  const [failed, setFailed] = useState(false);
+  if (alarm.state !== "ACTIVE") {
+    return /* @__PURE__ */ jsx2("span", { style: { color: css3("muted-foreground") }, children: "\u2014" });
+  }
+  const run = (kind, op) => {
+    setPending(kind);
+    setFailed(false);
+    let promise;
+    try {
+      promise = op();
+    } catch {
+      setFailed(true);
+      setPending(null);
+      return;
+    }
+    promise.catch(() => setFailed(true)).finally(() => setPending(null));
+  };
+  return /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", gap: 6, justifyContent: "flex-end", alignItems: "center" }, children: [
+    failed ? /* @__PURE__ */ jsx2(
+      "span",
+      {
+        role: "img",
+        "aria-label": "Action failed \u2014 retry",
+        title: "Action failed \u2014 retry",
+        style: { color: severityColor(severity, "CRITICAL"), fontSize: fontVar2("sm") },
+        children: "\u26A0"
+      }
+    ) : null,
+    !alarm.acknowledged ? /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        style: { ...actionButton, opacity: pending ? 0.6 : 1 },
+        disabled: pending !== null,
+        "aria-busy": pending === "ack",
+        "aria-label": `Acknowledge alarm ${alarm.alarmKey}`,
+        onClick: () => run("ack", () => actions.acknowledgeAlarm(alarm.token)),
+        children: pending === "ack" ? "\u2026" : "Ack"
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        style: { ...actionButton, opacity: pending ? 0.6 : 1 },
+        disabled: pending !== null,
+        "aria-busy": pending === "clear",
+        "aria-label": `Clear alarm ${alarm.alarmKey}`,
+        onClick: () => run("clear", () => actions.clearAlarm(alarm.token)),
+        children: pending === "clear" ? "\u2026" : "Clear"
+      }
+    )
+  ] });
+}
+
+// src/widgets/alarm-count.tsx
+import {
+  css as css4,
+  fitValueFont,
+  fitValueFontCss,
+  FIT_MIN_FONT_PX,
+  fontVar as fontVar3,
+  optString as optString2,
+  spaceVar,
+  useSeverityColors as useSeverityColors3,
+  useStickyChars,
+  useWidgetScale,
+  WidgetFrame as WidgetFrame2
+} from "@devicechain/widget-sdk";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ALARM_COUNT_CAPTION_ROOM_PX = 20;
+function AlarmCountBody({ data }) {
+  const { size, scale } = useWidgetScale();
+  const severity = useSeverityColors3();
+  const { total, alarms, loading } = data;
+  const worst = highestSeverity(alarms.map((a) => a.severity));
+  const alerting = total > 0 && worst != null;
+  const color = alerting ? severityColor(severity, worst) : css4("muted-foreground");
+  const display = loading && total === 0 ? "\u2014" : String(total);
+  const chars = useStickyChars(display.length);
+  const floor = Math.round(FIT_MIN_FONT_PX * scale);
+  const measured = size.width > 0 && size.height > 0;
+  const valueFont = measured ? fitValueFont(
+    { width: size.width, height: Math.max(1, size.height - ALARM_COUNT_CAPTION_ROOM_PX * scale) },
+    chars,
+    { floor }
+  ) : (
+    // First frame: the same curve in cq units, resolved by the browser against the frame's
+    // column (it does not take the caption's room off; the first measure does).
+    fitValueFontCss(chars, { floor })
+  );
+  const unit = total === 1 ? "alarm" : "alarms";
+  const ariaLabel = alerting ? `${total} ${unit}, worst severity ${severityLabel(worst)}` : `${total} ${unit}`;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "safe center",
+        alignItems: "center",
+        height: "100%",
+        boxSizing: "border-box",
+        overflow: "hidden",
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "aria-label": ariaLabel,
+            style: {
+              fontSize: valueFont,
+              fontWeight: 700,
+              lineHeight: 1,
+              whiteSpace: "nowrap",
+              fontVariantNumeric: "tabular-nums",
+              color
+            },
+            children: display
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              fontSize: fontVar3("xs"),
+              color: css4("muted-foreground"),
+              marginTop: spaceVar(1),
+              textTransform: "uppercase",
+              letterSpacing: "0.05em"
+            },
+            children: [
+              /* @__PURE__ */ jsx3("span", { children: unit }),
+              alerting ? /* @__PURE__ */ jsx3("span", { children: ` \xB7 worst ${severityLabel(worst)}` }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function AlarmCount({ widget, data }) {
+  return /* @__PURE__ */ jsx3(WidgetFrame2, { title: optString2(widget.options, "title"), children: /* @__PURE__ */ jsx3(AlarmCountBody, { data }) });
+}
+
+// src/widgets/alarm-severity.tsx
+import {
+  css as css5,
+  fontVar as fontVar4,
+  optString as optString3,
+  spaceVar as spaceVar2,
+  useSeverityColors as useSeverityColors4,
+  WidgetFrame as WidgetFrame3
+} from "@devicechain/widget-sdk";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var SEVERITY_SCALE = ["CRITICAL", "MAJOR", "MINOR", "WARNING", "INDETERMINATE"];
+function severityCounts(source) {
+  const counts = { CRITICAL: 0, MAJOR: 0, MINOR: 0, WARNING: 0, INDETERMINATE: 0 };
+  for (const c of source) {
+    if (!(c.count > 0)) continue;
+    const key = SEVERITY_SCALE.includes(c.severity) ? c.severity : "INDETERMINATE";
+    counts[key] += c.count;
+  }
+  return counts;
+}
+function Message({ title, text }) {
+  return /* @__PURE__ */ jsx4(WidgetFrame3, { title, children: /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-alarm-severity": "message",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        textAlign: "center",
+        fontSize: fontVar4("sm"),
+        color: css5("muted-foreground")
+      },
+      children: text
+    }
+  ) });
+}
+function AlarmSeverity({ widget, data }) {
+  const strings = alarmStrings();
+  const colors = useSeverityColors4();
+  const title = optString3(widget.options, "title");
+  const deviceType = optString3(widget.options, "deviceType") || void 0;
+  if (!data.severityCounts) {
+    const text = data.loading ? strings.breakdown.loading : data.error ? strings.breakdown.failed : strings.breakdown.unsupported;
+    return /* @__PURE__ */ jsx4(Message, { title, text });
+  }
+  const counts = severityCounts(data.severityCounts);
+  const total = SEVERITY_SCALE.reduce((n, s) => n + counts[s], 0);
+  const words = (s) => strings.severity[s] ?? s;
+  const caption = deviceType ? strings.breakdown.ofType(total, deviceType) : strings.breakdown.total(total);
+  const listLabel = `${strings.breakdown.label}, ${caption}`;
+  return /* @__PURE__ */ jsx4(WidgetFrame3, { title, children: /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-alarm-severity": "breakdown",
+      "data-total": total,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "safe center",
+        gap: spaceVar2(2),
+        height: "100%",
+        boxSizing: "border-box",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-alarm-severity-bar": "",
+            style: {
+              display: "flex",
+              flex: "0 0 auto",
+              height: spaceVar2(3),
+              borderRadius: spaceVar2(1),
+              overflow: "hidden",
+              background: css5("muted")
+            },
+            children: SEVERITY_SCALE.filter((s) => counts[s] > 0).map((s) => /* @__PURE__ */ jsx4("div", { "data-segment": s, style: { flex: `${counts[s]} 1 0`, minWidth: 2, background: severityColor(colors, s) } }, s))
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-alarm-severity-total": "",
+            style: { flex: "0 0 auto", fontSize: fontVar4("sm"), color: css5("muted-foreground"), fontVariantNumeric: "tabular-nums" },
+            children: caption
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "ul",
+          {
+            "aria-label": listLabel,
+            style: {
+              listStyle: "none",
+              margin: 0,
+              padding: 0,
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr))",
+              gap: `${spaceVar2(1)} ${spaceVar2(3)}`,
+              minHeight: 0,
+              overflow: "hidden"
+            },
+            children: SEVERITY_SCALE.map((s) => {
+              const zero = counts[s] === 0;
+              return /* @__PURE__ */ jsxs4(
+                "li",
+                {
+                  "data-severity": s,
+                  "data-zero": zero ? "true" : void 0,
+                  "aria-label": strings.breakdown.item(words(s), counts[s]),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: spaceVar2(2),
+                    minWidth: 0,
+                    fontSize: fontVar4("md"),
+                    color: css5(zero ? "muted-foreground" : "foreground")
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        style: {
+                          flex: "0 0 auto",
+                          width: spaceVar2(3),
+                          height: spaceVar2(3),
+                          borderRadius: "50%",
+                          background: severityColor(colors, s),
+                          opacity: zero ? 0.35 : 1
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4("span", { style: { flex: "1 1 auto", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: words(s) }),
+                    /* @__PURE__ */ jsx4("span", { style: { flex: "0 0 auto", fontWeight: zero ? 400 : 700, fontVariantNumeric: "tabular-nums" }, children: counts[s] })
+                  ]
+                },
+                s
+              );
+            })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+export {
+  severityColor,
+  severityRank,
+  severityLabel,
+  highestSeverity,
+  AlarmTable,
+  AlarmCount,
+  AlarmSeverity
+};
+//# sourceMappingURL=chunk-546TK2QG.js.map