@devicechain/widgets 0.21.1 → 0.22.0

package/dist/chunks/level-widgets-MJB7TOLU.js

@@ -0,0 +1,833 @@
+import {
+  bandSpans,
+  fillOf,
+  litBars,
+  readRange
+} from "./chunk-ZR74ORIT.js";
+import {
+  LevelEmpty,
+  LevelReadout
+} from "./chunk-XQQQNTBX.js";
+
+// src/widgets/battery.tsx
+import { useMemo } from "react";
+import {
+  css as css2,
+  optNumber,
+  optString,
+  optThresholds,
+  WidgetFrame
+} from "@devicechain/widget-sdk";
+
+// src/level-reading.ts
+import {
+  bandAt,
+  css,
+  formatValue,
+  levelColor,
+  pickSample,
+  primaryMeasurementName,
+  useSeverityColors
+} from "@devicechain/widget-sdk";
+
+// src/level-strings.ts
+import { viewerLocale } from "@devicechain/widget-sdk";
+var LEVEL_STRINGS = {
+  en: {
+    noData: "No data",
+    setRange: "Set min and max",
+    badRange: "Max must be above min",
+    setThresholds: "Set at least two thresholds",
+    aboveScale: "Above scale",
+    belowScale: "Below scale",
+    on: "On",
+    off: "Off",
+    cardinals: ["N", "E", "S", "W"]
+  },
+  es: {
+    noData: "Sin datos",
+    setRange: "Defina m\xEDn. y m\xE1x.",
+    badRange: "El m\xE1x. debe superar el m\xEDn.",
+    setThresholds: "Defina al menos dos umbrales",
+    aboveScale: "Sobre la escala",
+    belowScale: "Bajo la escala",
+    on: "Encendido",
+    off: "Apagado",
+    cardinals: ["N", "E", "S", "O"]
+  }
+};
+function levelStrings(locale = viewerLocale()) {
+  return locale?.toLowerCase().split("-")[0] === "es" ? LEVEL_STRINGS.es : LEVEL_STRINGS.en;
+}
+
+// src/level-reading.ts
+function useLevelReading(widget, data, input) {
+  const severity = useSeverityColors();
+  const name = primaryMeasurementName(widget);
+  const sample = pickSample(data.latest, name);
+  const { thresholds, unit, precision, range, normalize } = input;
+  const raw = sample?.value ?? void 0;
+  const value = normalize ? normalize(raw) : raw;
+  const band = bandAt(thresholds, value);
+  const bandColor = levelColor(severity, band?.level);
+  return {
+    name,
+    sample,
+    value,
+    unit,
+    precision,
+    display: formatValue(value, precision),
+    thresholds,
+    band,
+    levelColor: bandColor,
+    colorOf: (level) => levelColor(severity, level),
+    fillColor: bandColor ?? css("chart-1"),
+    range,
+    fill: range?.ok ? fillOf(value, range.range) : void 0,
+    strings: levelStrings()
+  };
+}
+function emptyReason(r) {
+  if (r.range && !r.range.ok) return r.range.reason === "missing" ? r.strings.setRange : r.strings.badRange;
+  if (r.value === void 0) return r.strings.noData;
+  return void 0;
+}
+
+// src/widgets/battery.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var BATTERY_DEFAULT_RANGE = { min: 0, max: 100 };
+var VIEW = { w: 120, h: 60 };
+var BODY = { x: 3, y: 3, w: 104, h: 54, r: 9 };
+var NUB = { x: 110, y: 20, w: 8, h: 20, r: 3 };
+var INSET = 7;
+var BATTERY_FILL_WIDTH = BODY.w - INSET * 2;
+function Battery({ widget, data }) {
+  const thresholds = useMemo(() => optThresholds(widget.options, "thresholds"), [widget.options]);
+  const reading = useLevelReading(widget, data, {
+    thresholds,
+    unit: optString(widget.options, "unit"),
+    precision: optNumber(widget.options, "precision"),
+    range: readRange(optNumber(widget.options, "min"), optNumber(widget.options, "max"), BATTERY_DEFAULT_RANGE)
+  });
+  const title = optString(widget.options, "title") ?? reading.name;
+  return /* @__PURE__ */ jsx(WidgetFrame, { title, sampleTime: reading.sample?.occurredTime ?? null, children: (scale) => /* @__PURE__ */ jsx(BatteryBody, { reading, scale }) });
+}
+function BatteryBody({ reading: r, scale: ws }) {
+  const reason = emptyReason(r);
+  if (reason !== void 0 || !r.range?.ok || !r.fill) return /* @__PURE__ */ jsx(LevelEmpty, { message: reason ?? r.strings.noData });
+  const range = r.range.range;
+  const fill = r.fill;
+  const readoutHeight = Math.max(ws.px("font-md") * 1.6, ws.size.height * 0.4);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-threshold-level": r.band?.level,
+      "data-out-of-range": fill.position === "within" ? void 0 : fill.position,
+      "data-fill": fill.fraction,
+      style: { height: "100%", boxSizing: "border-box", display: "flex", flexDirection: "column", gap: ws.px("space-1") },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { flex: "1 1 0", minHeight: 0 }, children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            role: "meter",
+            "aria-valuemin": range.min,
+            "aria-valuemax": range.max,
+            "aria-valuenow": range.min + fill.fraction * (range.max - range.min),
+            "aria-valuetext": `${r.display}${r.unit ? ` ${r.unit}` : ""}`,
+            viewBox: `0 0 ${VIEW.w} ${VIEW.h}`,
+            preserveAspectRatio: "xMidYMid meet",
+            style: { width: "100%", height: "100%", display: "block" },
+            children: [
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: BODY.x,
+                  y: BODY.y,
+                  width: BODY.w,
+                  height: BODY.h,
+                  rx: BODY.r,
+                  style: { fill: "none", stroke: css2("muted-foreground"), strokeWidth: 4 }
+                }
+              ),
+              /* @__PURE__ */ jsx("rect", { x: NUB.x, y: NUB.y, width: NUB.w, height: NUB.h, rx: NUB.r, style: { fill: css2("muted-foreground") } }),
+              fill.fraction > 0 ? /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  "data-fill-bar": "",
+                  x: BODY.x + INSET,
+                  y: BODY.y + INSET,
+                  width: BATTERY_FILL_WIDTH * fill.fraction,
+                  height: BODY.h - INSET * 2,
+                  rx: 3,
+                  style: { fill: r.fillColor }
+                }
+              ) : null
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { style: { flex: "0 0 auto", height: readoutHeight, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+          LevelReadout,
+          {
+            text: r.display,
+            unit: r.unit,
+            color: r.levelColor,
+            position: fill.position,
+            size: { width: ws.size.width, height: readoutHeight },
+            scale: ws.scale,
+            strings: r.strings
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/widgets/compass.tsx
+import { useMemo as useMemo2 } from "react";
+import {
+  optNumber as optNumber2,
+  optString as optString2,
+  optThresholds as optThresholds2,
+  WidgetFrame as WidgetFrame2
+} from "@devicechain/widget-sdk";
+import { buildCompassOption, EChart, useChartTheme } from "@devicechain/widget-sdk/echarts";
+
+// src/heading.ts
+import { wrapHeading } from "@devicechain/widget-sdk/echarts";
+function shownHeading(raw, precision) {
+  if (raw === void 0 || !Number.isFinite(raw)) return void 0;
+  const places = Math.min(100, Math.max(0, Math.trunc(precision)));
+  return wrapHeading(Number(raw.toFixed(places)));
+}
+var EIGHT_POINT = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
+var LETTER_INDEX = { N: 0, E: 1, S: 2, W: 3 };
+function cardinalOf(heading, letters) {
+  const point = EIGHT_POINT[Math.round(heading / 45) % 8];
+  return [...point].map((c) => letters[LETTER_INDEX[c]]).join("");
+}
+
+// src/widgets/compass.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_PRECISION = 0;
+var READOUT_SHARE = 0.22;
+function Compass({ widget, data }) {
+  const thresholds = useMemo2(() => optThresholds2(widget.options, "thresholds"), [widget.options]);
+  const precision = optNumber2(widget.options, "precision") ?? DEFAULT_PRECISION;
+  const reading = useLevelReading(widget, data, {
+    thresholds,
+    unit: void 0,
+    precision,
+    normalize: (raw) => shownHeading(raw, precision)
+  });
+  const title = optString2(widget.options, "title") ?? reading.name;
+  return /* @__PURE__ */ jsx2(WidgetFrame2, { title, sampleTime: reading.sample?.occurredTime ?? null, flush: true, children: (scale) => /* @__PURE__ */ jsx2(CompassBody, { reading, title, scale }) });
+}
+function CompassBody({ reading: r, title, scale: ws }) {
+  const theme = useChartTheme();
+  const option = useMemo2(
+    () => buildCompassOption(r.value ?? null, theme, { cardinals: r.strings.cardinals, thresholds: r.thresholds, scale: ws.scale }, ws.size),
+    [r.value, theme, r.strings, r.thresholds, ws.scale, ws.size]
+  );
+  const reason = emptyReason(r);
+  if (reason !== void 0 || r.value === void 0) return /* @__PURE__ */ jsx2(LevelEmpty, { message: reason ?? r.strings.noData });
+  const point = cardinalOf(r.value, r.strings.cardinals);
+  const stripHeight = Math.max(ws.px("font-md") * 1.6, ws.size.height * READOUT_SHARE);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "img",
+      "aria-label": `${title ? `${title}, ` : ""}${r.display}\xB0 ${point}`,
+      "data-threshold-level": r.band?.level,
+      style: { height: "100%", display: "flex", flexDirection: "column" },
+      children: [
+        /* @__PURE__ */ jsx2("div", { style: { flex: "1 1 0", minHeight: 0 }, children: /* @__PURE__ */ jsx2(EChart, { option }) }),
+        /* @__PURE__ */ jsx2("div", { style: { height: stripHeight, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx2(
+          LevelReadout,
+          {
+            text: `${r.display}\xB0`,
+            unit: point,
+            color: r.levelColor,
+            size: { width: ws.size.width, height: stripHeight },
+            scale: ws.scale,
+            strings: r.strings
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/widgets/level-gauge.tsx
+import { useMemo as useMemo3 } from "react";
+import {
+  css as css3,
+  formatValue as formatValue2,
+  optNumber as optNumber3,
+  optString as optString3,
+  optThresholds as optThresholds3,
+  WidgetFrame as WidgetFrame3
+} from "@devicechain/widget-sdk";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var MUTED_BAND_OPACITY = 0.35;
+function LevelGauge({ widget, data }) {
+  const thresholds = useMemo3(() => optThresholds3(widget.options, "thresholds"), [widget.options]);
+  const reading = useLevelReading(widget, data, {
+    thresholds,
+    unit: optString3(widget.options, "unit"),
+    precision: optNumber3(widget.options, "precision"),
+    range: readRange(optNumber3(widget.options, "min"), optNumber3(widget.options, "max"))
+  });
+  const title = optString3(widget.options, "title") ?? reading.name;
+  const percent = optString3(widget.options, "readout") === "percent";
+  return /* @__PURE__ */ jsx3(WidgetFrame3, { title, sampleTime: reading.sample?.occurredTime ?? null, children: (scale) => /* @__PURE__ */ jsx3(TankBody, { reading, percent, scale }) });
+}
+function TankBody({ reading: r, percent, scale: ws }) {
+  const reason = emptyReason(r);
+  if (reason !== void 0 || !r.range?.ok || !r.fill) return /* @__PURE__ */ jsx3(LevelEmpty, { message: reason ?? r.strings.noData });
+  const range = r.range.range;
+  const fill = r.fill;
+  const wall = 2;
+  const stripe = ws.px("space-1");
+  const text = percent ? `${formatValue2(fill.ratio * 100, r.precision ?? 0)}` : r.display;
+  const unit = percent ? "%" : r.unit;
+  const bands = bandSpans(r.thresholds, range).flatMap((b) => {
+    const color = r.colorOf(b.level);
+    const active = fill.fraction >= b.from && (fill.fraction < b.to || b.to >= 1 && fill.fraction >= 1);
+    return color === void 0 ? [] : [{ from: b.from, to: b.to, color, active }];
+  });
+  const inner = { width: Math.max(0, ws.size.width - wall * 2 - stripe), height: Math.max(0, ws.size.height - wall * 2) };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-threshold-level": r.band?.level,
+      "data-out-of-range": fill.position === "within" ? void 0 : fill.position,
+      "data-fill": fill.fraction,
+      style: { height: "100%", boxSizing: "border-box", display: "flex", gap: ws.px("space-1") },
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            role: "meter",
+            "aria-valuemin": range.min,
+            "aria-valuemax": range.max,
+            "aria-valuenow": range.min + fill.fraction * (range.max - range.min),
+            "aria-valuetext": `${r.display}${r.unit ? ` ${r.unit}` : ""}`,
+            style: {
+              position: "relative",
+              flex: "1 1 0",
+              minWidth: 0,
+              overflow: "hidden",
+              boxSizing: "border-box",
+              border: `${wall}px solid ${css3("border")}`,
+              borderRadius: ws.px("space-2"),
+              background: css3("muted")
+            },
+            children: [
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  "data-liquid": "",
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    height: `${fill.fraction * 100}%`,
+                    background: r.fillColor,
+                    opacity: 0.55,
+                    borderTop: fill.fraction > 0 && fill.fraction < 1 ? `2px solid ${r.fillColor}` : void 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx3("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx3(
+                LevelReadout,
+                {
+                  text,
+                  unit,
+                  color: r.levelColor,
+                  position: fill.position,
+                  size: inner,
+                  scale: ws.scale,
+                  strings: r.strings
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { style: { position: "relative", width: stripe, flexShrink: 0, borderRadius: stripe / 2, background: css3("muted"), overflow: "hidden" }, children: bands.map((b, i) => /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "data-band": "",
+            "data-band-active": b.active ? "" : void 0,
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: `${b.from * 100}%`,
+              height: `${(b.to - b.from) * 100}%`,
+              background: b.color,
+              opacity: b.active ? 1 : MUTED_BAND_OPACITY
+            }
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+
+// src/widgets/linear-gauge.tsx
+import { useMemo as useMemo4 } from "react";
+import {
+  css as css4,
+  fontVar,
+  formatValue as formatValue3,
+  optNumber as optNumber4,
+  optString as optString4,
+  optThresholds as optThresholds4,
+  WidgetFrame as WidgetFrame4
+} from "@devicechain/widget-sdk";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function LinearGauge({ widget, data }) {
+  const thresholds = useMemo4(() => optThresholds4(widget.options, "thresholds"), [widget.options]);
+  const reading = useLevelReading(widget, data, {
+    thresholds,
+    unit: optString4(widget.options, "unit"),
+    precision: optNumber4(widget.options, "precision"),
+    range: readRange(optNumber4(widget.options, "min"), optNumber4(widget.options, "max"))
+  });
+  const title = optString4(widget.options, "title") ?? reading.name;
+  const thermometer = optString4(widget.options, "style") === "thermometer";
+  const vertical = thermometer || optString4(widget.options, "orientation") === "vertical";
+  return /* @__PURE__ */ jsx4(WidgetFrame4, { title, sampleTime: reading.sample?.occurredTime ?? null, children: (scale) => /* @__PURE__ */ jsx4(LinearBody, { reading, thermometer, vertical, scale }) });
+}
+function LinearBody({ reading: r, thermometer, vertical, scale: ws }) {
+  const reason = emptyReason(r);
+  if (reason !== void 0 || !r.range?.ok || !r.fill) return /* @__PURE__ */ jsx4(LevelEmpty, { message: reason ?? r.strings.noData });
+  const range = r.range.range;
+  const fill = r.fill;
+  const { size, scale } = ws;
+  const thickness = ws.px("space-3");
+  const gap = ws.px("space-2");
+  const labelPx = ws.px("font-xs");
+  const minText = formatValue3(range.min, r.precision);
+  const maxText = formatValue3(range.max, r.precision);
+  const bulb = thermometer ? thickness * 2 : 0;
+  const bands = bandSpans(r.thresholds, range).flatMap((b) => {
+    const color = r.colorOf(b.level);
+    return color === void 0 ? [] : [{ from: b.from, to: b.to, color }];
+  });
+  const track = /* @__PURE__ */ jsx4(
+    Track,
+    {
+      vertical,
+      thickness,
+      fraction: fill.fraction,
+      color: r.fillColor,
+      bands,
+      bulb,
+      aria: {
+        min: range.min,
+        max: range.max,
+        now: range.min + fill.fraction * (range.max - range.min),
+        text: `${r.display}${r.unit ? ` ${r.unit}` : ""}`
+      }
+    }
+  );
+  const readout = (room) => /* @__PURE__ */ jsx4(
+    LevelReadout,
+    {
+      text: r.display,
+      unit: r.unit,
+      color: r.levelColor,
+      position: fill.position,
+      size: room,
+      scale,
+      strings: r.strings
+    }
+  );
+  const labelStyle = { fontSize: fontVar("xs"), color: css4("muted-foreground"), lineHeight: 1.1 };
+  const root = {
+    height: "100%",
+    boxSizing: "border-box",
+    overflow: "hidden",
+    display: "flex",
+    gap
+  };
+  const marks = {
+    "data-threshold-level": r.band?.level,
+    "data-out-of-range": fill.position === "within" ? void 0 : fill.position,
+    "data-fill": fill.fraction
+  };
+  if (!vertical) {
+    const trackRoom = thickness + labelPx * 1.4 + gap * 2;
+    return /* @__PURE__ */ jsxs4("div", { ...marks, style: { ...root, flexDirection: "column", justifyContent: "safe center" }, children: [
+      /* @__PURE__ */ jsx4("div", { style: { flex: "1 1 0", minHeight: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: readout({ width: size.width, height: Math.max(0, size.height - trackRoom) }) }),
+      track,
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "space-between", gap, ...labelStyle }, children: [
+        /* @__PURE__ */ jsx4("span", { children: minText }),
+        /* @__PURE__ */ jsx4("span", { children: maxText })
+      ] })
+    ] });
+  }
+  const labelRoom = Math.ceil(Math.max(minText.length, maxText.length) * labelPx * 0.62);
+  const sideRoom = Math.max(thickness, bulb) + labelRoom + gap * 2;
+  return /* @__PURE__ */ jsxs4("div", { ...marks, style: { ...root, flexDirection: "row", alignItems: "stretch" }, children: [
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          alignItems: "flex-end",
+          paddingBottom: bulb,
+          ...labelStyle
+        },
+        children: [
+          /* @__PURE__ */ jsx4("span", { children: maxText }),
+          /* @__PURE__ */ jsx4("span", { children: minText })
+        ]
+      }
+    ),
+    track,
+    /* @__PURE__ */ jsx4("div", { style: { flex: "1 1 0", minWidth: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: readout({ width: Math.max(0, size.width - sideRoom), height: size.height }) })
+  ] });
+}
+function Track({ vertical, thickness, fraction, color, bands, bulb, aria }) {
+  const pct = (f) => `${f * 100}%`;
+  const radius = thickness / 2;
+  const tube = /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      role: "meter",
+      "aria-valuemin": aria.min,
+      "aria-valuemax": aria.max,
+      "aria-valuenow": aria.now,
+      "aria-valuetext": aria.text,
+      style: {
+        position: "relative",
+        overflow: "hidden",
+        background: css4("muted"),
+        borderRadius: radius,
+        flexShrink: 0,
+        ...vertical ? { width: thickness, flex: "1 1 0", minHeight: 0 } : { width: "100%", height: thickness }
+      },
+      children: [
+        bands.map((b, i) => /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-band": "",
+            style: {
+              position: "absolute",
+              background: b.color,
+              opacity: 0.35,
+              ...vertical ? { left: 0, right: 0, bottom: pct(b.from), height: pct(b.to - b.from) } : { top: 0, bottom: 0, left: pct(b.from), width: pct(b.to - b.from) }
+            }
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-fill-bar": "",
+            style: {
+              position: "absolute",
+              background: color,
+              ...vertical ? { left: 0, right: 0, bottom: 0, height: pct(fraction) } : { top: 0, bottom: 0, left: 0, width: pct(fraction) }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-marker": "",
+            style: {
+              position: "absolute",
+              background: css4("foreground"),
+              ...vertical ? { left: 0, right: 0, height: 2, bottom: `calc(${pct(fraction)} - 1px)` } : { top: 0, bottom: 0, width: 2, left: `calc(${pct(fraction)} - 1px)` }
+            }
+          }
+        )
+      ]
+    }
+  );
+  if (!vertical) return tube;
+  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", minHeight: 0, flex: "0 0 auto", width: Math.max(thickness, bulb) }, children: [
+    tube,
+    bulb > 0 ? /* @__PURE__ */ jsx4(
+      "div",
+      {
+        "data-bulb": "",
+        style: { width: bulb, height: bulb, borderRadius: "50%", background: color, marginTop: -radius, flexShrink: 0 }
+      }
+    ) : null
+  ] });
+}
+
+// src/widgets/progress-ring.tsx
+import { useMemo as useMemo5 } from "react";
+import {
+  css as css5,
+  formatValue as formatValue4,
+  optNumber as optNumber5,
+  optString as optString5,
+  optThresholds as optThresholds5,
+  WidgetFrame as WidgetFrame5
+} from "@devicechain/widget-sdk";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var RING_RADIUS = 42;
+var RING_STROKE = 10;
+var RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
+var INNER = { width: 0.62, height: 0.34 };
+function ProgressRing({ widget, data }) {
+  const thresholds = useMemo5(() => optThresholds5(widget.options, "thresholds"), [widget.options]);
+  const reading = useLevelReading(widget, data, {
+    thresholds,
+    unit: optString5(widget.options, "unit"),
+    precision: optNumber5(widget.options, "precision"),
+    range: readRange(optNumber5(widget.options, "min"), optNumber5(widget.options, "max"))
+  });
+  const title = optString5(widget.options, "title") ?? reading.name;
+  const percent = optString5(widget.options, "readout") !== "value";
+  return /* @__PURE__ */ jsx5(WidgetFrame5, { title, sampleTime: reading.sample?.occurredTime ?? null, children: (scale) => /* @__PURE__ */ jsx5(RingBody, { reading, percent, scale }) });
+}
+function RingBody({ reading: r, percent, scale: ws }) {
+  const reason = emptyReason(r);
+  if (reason !== void 0 || !r.range?.ok || !r.fill) return /* @__PURE__ */ jsx5(LevelEmpty, { message: reason ?? r.strings.noData });
+  const range = r.range.range;
+  const fill = r.fill;
+  const text = percent ? formatValue4(fill.ratio * 100, r.precision ?? 0) : r.display;
+  const unit = percent ? "%" : r.unit;
+  const side = Math.max(0, Math.min(ws.size.width, ws.size.height));
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      role: "meter",
+      "aria-valuemin": range.min,
+      "aria-valuemax": range.max,
+      "aria-valuenow": range.min + fill.fraction * (range.max - range.min),
+      "aria-valuetext": `${r.display}${r.unit ? ` ${r.unit}` : ""}`,
+      "data-threshold-level": r.band?.level,
+      "data-out-of-range": fill.position === "within" ? void 0 : fill.position,
+      "data-fill": fill.fraction,
+      style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center" },
+      children: /* @__PURE__ */ jsxs5("div", { style: { position: "relative", width: side || "100%", height: side || "100%", aspectRatio: "1" }, children: [
+        /* @__PURE__ */ jsxs5("svg", { viewBox: "0 0 100 100", width: "100%", height: "100%", "aria-hidden": "true", style: { display: "block" }, children: [
+          /* @__PURE__ */ jsx5("circle", { cx: "50", cy: "50", r: RING_RADIUS, fill: "none", strokeWidth: RING_STROKE, style: { stroke: css5("muted") } }),
+          /* @__PURE__ */ jsx5(
+            "circle",
+            {
+              "data-ring-fill": "",
+              cx: "50",
+              cy: "50",
+              r: RING_RADIUS,
+              fill: "none",
+              strokeWidth: RING_STROKE,
+              strokeDasharray: `${fill.fraction * RING_CIRCUMFERENCE} ${RING_CIRCUMFERENCE}`,
+              transform: "rotate(-90 50 50)",
+              style: { stroke: r.fillColor }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx5(
+          LevelReadout,
+          {
+            text,
+            unit,
+            color: r.levelColor,
+            position: fill.position,
+            size: { width: side * INNER.width, height: side * INNER.height },
+            scale: ws.scale,
+            strings: r.strings
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/widgets/signal-bars.tsx
+import { useMemo as useMemo6 } from "react";
+import {
+  css as css6,
+  optNumber as optNumber6,
+  optString as optString6,
+  optThresholds as optThresholds6,
+  WidgetFrame as WidgetFrame6
+} from "@devicechain/widget-sdk";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var SIGNAL_MIN_BARS = 2;
+var VIEW2 = { w: 100, h: 60 };
+function SignalBars({ widget, data }) {
+  const thresholds = useMemo6(() => optThresholds6(widget.options, "thresholds"), [widget.options]);
+  const reading = useLevelReading(widget, data, {
+    thresholds,
+    unit: optString6(widget.options, "unit"),
+    precision: optNumber6(widget.options, "precision")
+  });
+  const title = optString6(widget.options, "title") ?? reading.name;
+  return /* @__PURE__ */ jsx6(WidgetFrame6, { title, sampleTime: reading.sample?.occurredTime ?? null, children: (scale) => /* @__PURE__ */ jsx6(BarsBody, { reading, scale }) });
+}
+function BarsBody({ reading: r, scale: ws }) {
+  if (r.thresholds.length < SIGNAL_MIN_BARS) return /* @__PURE__ */ jsx6(LevelEmpty, { message: r.strings.setThresholds });
+  const bars = litBars(r.thresholds, r.value);
+  if (!bars) return /* @__PURE__ */ jsx6(LevelEmpty, { message: r.strings.noData });
+  const n = bars.total;
+  const barW = VIEW2.w / (n + (n - 1) / 3);
+  const gapW = barW / 3;
+  const readoutHeight = Math.max(ws.px("font-md") * 1.6, ws.size.height * 0.34);
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      "data-threshold-level": r.band?.level,
+      "data-bars-lit": bars.lit,
+      "data-bars-total": bars.total,
+      style: { height: "100%", boxSizing: "border-box", display: "flex", flexDirection: "column", gap: ws.px("space-1") },
+      children: [
+        /* @__PURE__ */ jsx6("div", { style: { flex: "1 1 0", minHeight: 0 }, children: /* @__PURE__ */ jsx6(
+          "svg",
+          {
+            role: "meter",
+            "aria-valuemin": 0,
+            "aria-valuemax": bars.total,
+            "aria-valuenow": bars.lit,
+            "aria-valuetext": `${bars.lit}/${bars.total}`,
+            viewBox: `0 0 ${VIEW2.w} ${VIEW2.h}`,
+            preserveAspectRatio: "xMidYMax meet",
+            style: { width: "100%", height: "100%", display: "block" },
+            children: Array.from({ length: n }, (_, i) => {
+              const h = VIEW2.h * (i + 1) / n;
+              const lit = i < bars.lit;
+              return /* @__PURE__ */ jsx6(
+                "rect",
+                {
+                  "data-bar": lit ? "lit" : "unlit",
+                  x: i * (barW + gapW),
+                  y: VIEW2.h - h,
+                  width: barW,
+                  height: h,
+                  rx: Math.min(3, barW / 3),
+                  style: { fill: lit ? r.fillColor : css6("muted") }
+                },
+                i
+              );
+            })
+          }
+        ) }),
+        /* @__PURE__ */ jsx6("div", { style: { flex: "0 0 auto", height: readoutHeight, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx6(
+          LevelReadout,
+          {
+            text: r.display,
+            unit: r.unit,
+            color: r.levelColor,
+            size: { width: ws.size.width, height: readoutHeight },
+            scale: ws.scale,
+            strings: r.strings
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/widgets/status-light.tsx
+import { useMemo as useMemo7 } from "react";
+import {
+  css as css7,
+  fontVar as fontVar2,
+  optNumber as optNumber7,
+  optString as optString7,
+  optThresholds as optThresholds7,
+  WidgetFrame as WidgetFrame7
+} from "@devicechain/widget-sdk";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function StatusLight({ widget, data }) {
+  const thresholds = useMemo7(() => optThresholds7(widget.options, "thresholds"), [widget.options]);
+  const reading = useLevelReading(widget, data, {
+    thresholds,
+    unit: optString7(widget.options, "unit"),
+    precision: optNumber7(widget.options, "precision")
+  });
+  const title = optString7(widget.options, "title") ?? reading.name;
+  const onAt = optNumber7(widget.options, "onAt");
+  return /* @__PURE__ */ jsx7(WidgetFrame7, { title, sampleTime: reading.sample?.occurredTime ?? null, children: (scale) => /* @__PURE__ */ jsx7(LampBody, { reading, onAt, scale }) });
+}
+function lampState(r, onAt) {
+  if (r.value === void 0) return { lit: void 0, caption: r.strings.noData };
+  const lit = onAt === void 0 ? true : r.value >= onAt;
+  const fallback = onAt === void 0 ? `${r.display}${r.unit ? ` ${r.unit}` : ""}` : lit ? r.strings.on : r.strings.off;
+  return { lit, caption: r.band?.label ?? fallback };
+}
+function LampBody({ reading: r, onAt, scale: ws }) {
+  const { lit, caption } = lampState(r, onAt);
+  const captionRoom = ws.px("font-md") * 2.8;
+  const smallest = ws.px("space-4");
+  const measured = ws.size.width > 0 && ws.size.height > 0;
+  const beside = measured && ws.size.height - captionRoom < smallest * 2;
+  const diameter = !measured ? smallest * 3 : beside ? Math.max(Math.min(smallest, ws.size.height), Math.floor(Math.min(ws.size.height, ws.size.width * 0.4) * 0.8)) : Math.max(smallest, Math.floor(Math.min(ws.size.width, ws.size.height - captionRoom) * 0.8));
+  const color = r.fillColor;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      "data-threshold-level": lit ? r.band?.level : void 0,
+      "data-lit": lit === void 0 ? void 0 : String(lit),
+      "data-lamp-layout": beside ? "beside" : "under",
+      style: {
+        height: "100%",
+        boxSizing: "border-box",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: beside ? "row" : "column",
+        alignItems: "center",
+        justifyContent: "safe center",
+        gap: ws.px("space-2"),
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            "data-lamp": "",
+            style: {
+              width: diameter,
+              height: diameter,
+              flexShrink: 0,
+              borderRadius: "50%",
+              boxSizing: "border-box",
+              background: lit ? color : "transparent",
+              border: `2px solid ${lit ? color : css7("muted-foreground")}`,
+              boxShadow: lit ? `0 0 ${Math.round(diameter / 4)}px ${color}` : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            "data-lamp-caption": "",
+            style: {
+              fontSize: fontVar2("md"),
+              fontWeight: 600,
+              lineHeight: 1.2,
+              color: lit === void 0 ? css7("muted-foreground") : css7("foreground"),
+              overflowWrap: "anywhere",
+              maxWidth: "100%",
+              minWidth: 0
+            },
+            children: caption
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Battery,
+  Compass,
+  LevelGauge,
+  LinearGauge,
+  ProgressRing,
+  SignalBars,
+  StatusLight
+};
+//# sourceMappingURL=level-widgets-MJB7TOLU.js.map