@devicechain/widgets 0.22.0 → 0.23.0-rc.1

package/dist/index.js

@@ -1,27 +1,44 @@
 import {
+  Table
+} from "./chunks/chunk-USRYKW2J.js";
+import {
+  alarmSubscription,
+  commandSubscription,
+  measurementSpan,
+  measurementWindow,
+  membersMode
+} from "./chunks/chunk-2D7JNKFE.js";
+import {
+  accessStrings
+} from "./chunks/chunk-BRH66T5F.js";
+import {
+  AlarmCount,
+  AlarmTable,
+  highestSeverity,
+  severityColor,
+  severityLabel,
+  severityRank
+} from "./chunks/chunk-6OGI4UFJ.js";
+import {
+  CommandButton,
   buildPayload,
   commandStatusColor,
   commandStatusLabel,
   defaultValues,
   isScalar,
   isTerminalStatus,
-  parseBool,
   parseParameterSchema,
   validateParams
-} from "./chunks/chunk-YPFB6DAL.js";
+} from "./chunks/chunk-XSLFHCNI.js";
+import {
+  EntitySelector
+} from "./chunks/chunk-FM7OI5TQ.js";
 import {
   readRange
 } from "./chunks/chunk-ZR74ORIT.js";
 import {
   LevelReadout
 } from "./chunks/chunk-XQQQNTBX.js";
-import {
-  alarmSubscription,
-  commandSubscription,
-  measurementSpan,
-  measurementWindow,
-  membersMode
-} from "./chunks/chunk-2D7JNKFE.js";
 
 // src/dashboard-renderer.tsx
 import {
@@ -47,7 +64,7 @@ import {
   WidgetTimeRangeProvider,
   WidgetTokenStyles
 } from "@devicechain/widget-sdk";
-import { Fragment as Fragment5, useCallback as useCallback2, useEffect as useEffect5, useLayoutEffect, useMemo as useMemo6, useRef as useRef3, useState as useState8 } from "react";
+import { Fragment, useCallback as useCallback2, useEffect as useEffect4, useLayoutEffect, useMemo as useMemo5, useRef as useRef2, useState as useState6 } from "react";
 
 // src/connected-widget.tsx
 import {
@@ -61,7 +78,8 @@ import {
   WidgetSelectProvider,
   useWidgetTimeRange as useWidgetTimeRange2
 } from "@devicechain/widget-sdk";
-import { useMemo as useMemo5 } from "react";
+import { isForbiddenError } from "@devicechain/client";
+import { useEffect as useEffect3, useMemo as useMemo4, useState as useState5 } from "react";
 
 // src/use-held.ts
 import { useState } from "react";
@@ -1095,7 +1113,7 @@ function lazyChunk(importer) {
       throw err;
     }
   ));
-  function component(name) {
+  function component(name, alsoPreload) {
     function LazyChunkWidget(props) {
       const [mod, setMod] = useState2(loaded);
       const [error, setError] = useState2();
@@ -1108,13 +1126,14 @@ function lazyChunk(importer) {
       return /* @__PURE__ */ jsx(Component2, { ...props });
     }
     LazyChunkWidget.displayName = `Lazy(${name})`;
+    LazyChunkWidget.preload = alsoPreload ? () => Promise.all([load(), alsoPreload()]).then(([m]) => m) : load;
     return LazyChunkWidget;
   }
   return { load, component };
 }
 
 // src/widgets/aggregate-lazy.tsx
-var chunk = lazyChunk(() => import("./chunks/aggregate-widgets-WVXAW3UL.js"));
+var chunk = lazyChunk(() => import("./chunks/aggregate-widgets-HZQI5HTX.js"));
 var loadAggregateWidgets = chunk.load;
 var statCardWidget = defineWidget({
   descriptor: builtinWidgetDescriptors["stat-card"],
@@ -1133,784 +1152,85 @@ var fleetTableWidget = defineWidget({
   implementation: { kind: "trusted-react", component: chunk.component("FleetTable") }
 });
 
-// src/widgets/alarm-count.tsx
-import {
-  css as css2,
-  defineWidget as defineWidget2,
-  fitValueFont,
-  fitValueFontCss,
-  FIT_MIN_FONT_PX,
-  fontVar,
-  optString,
-  spaceVar,
-  useSeverityColors,
-  useStickyChars,
-  useWidgetScale,
-  WidgetFrame
-} from "@devicechain/widget-sdk";
-
-// 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-count.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var ALARM_COUNT_CAPTION_ROOM_PX = 20;
-function AlarmCountBody({ data }) {
-  const { size, scale } = useWidgetScale();
-  const severity = useSeverityColors();
-  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) : css2("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__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "safe center",
-        alignItems: "center",
-        height: "100%",
-        boxSizing: "border-box",
-        overflow: "hidden",
-        textAlign: "center"
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          "div",
-          {
-            "aria-label": ariaLabel,
-            style: {
-              fontSize: valueFont,
-              fontWeight: 700,
-              lineHeight: 1,
-              whiteSpace: "nowrap",
-              fontVariantNumeric: "tabular-nums",
-              color
-            },
-            children: display
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              fontSize: fontVar("xs"),
-              color: css2("muted-foreground"),
-              marginTop: spaceVar(1),
-              textTransform: "uppercase",
-              letterSpacing: "0.05em"
-            },
-            children: [
-              /* @__PURE__ */ jsx2("span", { children: unit }),
-              alerting ? /* @__PURE__ */ jsx2("span", { children: ` \xB7 worst ${severityLabel(worst)}` }) : null
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function AlarmCount({ widget, data }) {
-  return /* @__PURE__ */ jsx2(WidgetFrame, { title: optString(widget.options, "title"), children: /* @__PURE__ */ jsx2(AlarmCountBody, { data }) });
-}
-var alarmCountWidget = defineWidget2({
-  descriptor: builtinWidgetDescriptors["alarm-count"],
-  implementation: { kind: "trusted-react", component: AlarmCount }
-});
-
-// src/widgets/alarm-table.tsx
-import { Fragment, useState as useState3 } from "react";
-import {
-  css as css3,
-  fontVar as fontVar2,
-  defineWidget as defineWidget3,
-  FlashValue,
-  formatDateTime,
-  optBoolean,
-  optNumber,
-  optString as optString2,
-  useElementSize,
-  useSeverityColors as useSeverityColors2,
-  useWidgetSelect,
-  useWidgetTimeZone,
-  WidgetFrame as WidgetFrame2
-} from "@devicechain/widget-sdk";
-import { Fragment as Fragment2, jsx as jsx3, 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__ */ jsx3("wbr", {}) : null,
-    part
-  ] }, i));
-}
-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 columns = 5 + (narrow ? 0 : 2) + (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 = optString2(widget.options, "selectionTarget");
-  const drillTo = select && selectionTarget ? { select, slot: selectionTarget } : void 0;
-  return /* @__PURE__ */ jsx3(WidgetFrame2, { title: optString2(widget.options, "title"), flush: true, children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsx3("div", { ref: sizeRef, style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ jsxs2(
-      "table",
-      {
-        style: {
-          width: "100%",
-          borderCollapse: "collapse",
-          fontSize: fontVar2("md"),
-          color: css3("foreground"),
-          fontVariantNumeric: "tabular-nums"
-        },
-        children: [
-          /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
-            /* @__PURE__ */ jsx3("th", { style: { ...headCell, width: 4, padding: 0 }, "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx3("th", { scope: "col", style: headCell, children: "Severity" }),
-            narrow ? null : /* @__PURE__ */ jsx3("th", { scope: "col", style: headCell, children: "Status" }),
-            /* @__PURE__ */ jsx3("th", { scope: "col", style: headCell, children: "Originator" }),
-            /* @__PURE__ */ jsx3("th", { scope: "col", style: headCell, children: "Alarm" }),
-            /* @__PURE__ */ jsx3("th", { scope: "col", style: { ...headCell, textAlign: "right" }, children: "Value" }),
-            narrow ? null : /* @__PURE__ */ jsx3("th", { scope: "col", style: headCell, children: "Raised" }),
-            canAct ? /* @__PURE__ */ jsx3("th", { scope: "col", style: { ...headCell, textAlign: "right" }, children: "Actions" }) : null
-          ] }) }),
-          /* @__PURE__ */ jsx3("tbody", { children: alarms.length === 0 ? /* @__PURE__ */ jsx3("tr", { children: /* @__PURE__ */ jsx3("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__ */ jsx3("td", { "aria-hidden": "true", style: { padding: 0, width: 4, background: color } }),
-              /* @__PURE__ */ jsx3("td", { style: cell, children: /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
-                /* @__PURE__ */ jsx3(
-                  "span",
-                  {
-                    "aria-hidden": "true",
-                    style: { width: 8, height: 8, borderRadius: "50%", background: color, flexShrink: 0 }
-                  }
-                ),
-                severityLabel(alarm.severity)
-              ] }) }),
-              narrow ? null : /* @__PURE__ */ jsx3("td", { style: { ...cell, color: css3("muted-foreground") }, children: statusLabel(alarm) }),
-              /* @__PURE__ */ jsx3("td", { style: text, children: /* @__PURE__ */ jsx3(OriginatorCell, { alarm, drillTo }) }),
-              /* @__PURE__ */ jsx3("td", { style: text, children: hyphenBreaks(alarm.alarmKey) }),
-              /* @__PURE__ */ jsx3("td", { style: { ...cell, textAlign: "right" }, children: /* @__PURE__ */ jsx3(
-                FlashValue,
-                {
-                  value: alarm.lastValue,
-                  precision,
-                  enabled: flash,
-                  identity: alarm.token
-                }
-              ) }),
-              narrow ? null : /* @__PURE__ */ jsx3("td", { style: { ...cell, color: css3("muted-foreground") }, children: formatDateTime(alarm.raisedTime, timeZone) }),
-              canAct ? /* @__PURE__ */ jsx3("td", { style: { ...cell, textAlign: "right" }, children: /* @__PURE__ */ jsx3(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__ */ jsx3(
-      "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__ */ jsx3(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] = useState3(null);
-  const [failed, setFailed] = useState3(false);
-  if (alarm.state !== "ACTIVE") {
-    return /* @__PURE__ */ jsx3("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__ */ jsx3(
-      "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__ */ jsx3(
-      "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__ */ jsx3(
-      "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"
-      }
-    )
-  ] });
-}
-var alarmTableWidget = defineWidget3({
+// src/widgets/alarm-lazy.tsx
+import { defineWidget as defineWidget2 } from "@devicechain/widget-sdk";
+var chunk2 = lazyChunk(() => import("./chunks/alarm-widgets-7UY6MIYZ.js"));
+var loadAlarmWidgets = chunk2.load;
+var alarmTableWidget = defineWidget2({
   descriptor: builtinWidgetDescriptors["alarm-table"],
-  implementation: { kind: "trusted-react", component: AlarmTable }
+  implementation: { kind: "trusted-react", component: chunk2.component("AlarmTable") }
 });
-
-// src/widgets/command-button.tsx
-import { useEffect as useEffect2, useMemo, useRef, useState as useState4 } from "react";
-import {
-  css as css4,
-  fontVar as fontVar3,
-  defineWidget as defineWidget4,
-  formatDateTime as formatDateTime2,
-  optString as optString3,
-  useWidgetTimeZone as useWidgetTimeZone2,
-  WidgetFrame as WidgetFrame3
-} from "@devicechain/widget-sdk";
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function CommandButton({ widget, data, actions }) {
-  const commandName = optString3(widget.options, "commandName");
-  const commandLabel = optString3(widget.options, "commandLabel") ?? commandName;
-  const parameterSchema = optString3(widget.options, "parameterSchema") ?? null;
-  const params = useMemo(() => parseParameterSchema(parameterSchema), [parameterSchema]);
-  const schemaKey = `${commandName ?? ""}::${parameterSchema ?? ""}`;
-  const [values, setValues] = useState4(() => defaultValues(params));
-  const [errors, setErrors] = useState4({});
-  const [pending, setPending] = useState4(false);
-  const [sendError, setSendError] = useState4(null);
-  const [sentToken, setSentToken] = useState4(null);
-  const sendGen = useRef(0);
-  useEffect2(() => {
-    sendGen.current += 1;
-    setValues(defaultValues(params));
-    setErrors({});
-    setSendError(null);
-    setSentToken(null);
-  }, [schemaKey]);
-  const canWrite = actions?.can("command:write") ?? false;
-  const hasSeam = typeof actions?.sendCommand === "function";
-  const deviceToken = data.deviceToken;
-  const formDisabled = !canWrite || !hasSeam || pending;
-  const canSend = !formDisabled && !!deviceToken && !!commandName;
-  const setField = (name, value) => {
-    setValues((prev) => ({ ...prev, [name]: value }));
-    setErrors((prev) => prev[name] ? { ...prev, [name]: "" } : prev);
-    setSendError(null);
-  };
-  const send = () => {
-    if (!deviceToken || !commandName || !actions?.sendCommand) return;
-    const found = validateParams(params, values);
-    const active = Object.fromEntries(Object.entries(found).filter(([, v]) => v));
-    if (Object.keys(active).length > 0) {
-      setErrors(active);
-      return;
-    }
-    const payload = buildPayload(params, values);
-    const gen = sendGen.current;
-    setPending(true);
-    setSendError(null);
-    let promise;
-    try {
-      promise = actions.sendCommand(deviceToken, commandName, payload);
-    } catch {
-      setSendError(SEND_FAILED);
-      setPending(false);
-      return;
-    }
-    promise.then((dispatch) => {
-      if (gen !== sendGen.current) return;
-      if (dispatch.status === "rejected") {
-        setSendError(dispatch.reason);
-        return;
-      }
-      setSentToken(dispatch.token);
-    }).catch(() => {
-      if (gen === sendGen.current) setSendError(SEND_FAILED);
-    }).finally(() => {
-      if (gen === sendGen.current) setPending(false);
-    });
-  };
-  return /* @__PURE__ */ jsx4(WidgetFrame3, { title: optString3(widget.options, "title"), children: /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexDirection: "column", height: "100%", gap: 10, overflowY: "auto" }, children: !commandName ? /* @__PURE__ */ jsx4("div", { style: { ...hint, margin: "auto" }, children: "No command configured." }) : /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 8, flexShrink: 0 }, children: [
-      params.map(
-        (param) => isScalar(param) ? /* @__PURE__ */ jsx4(
-          ParamField,
-          {
-            widgetId: widget.id,
-            param,
-            value: values[param.name] ?? "",
-            error: errors[param.name],
-            disabled: formDisabled,
-            onChange: (v) => setField(param.name, v)
-          },
-          param.name
-        ) : (
-          // A structured (OBJECT) parameter isn't form-editable. A REQUIRED one
-          // blocks sending (validateParams flags it); flag that in the note.
-          /* @__PURE__ */ jsxs3("div", { style: { ...hint, color: param.required ? commandStatusColor("FAILED") : css4("muted-foreground") }, children: [
-            param.name,
-            ": ",
-            param.required ? "required " : "",
-            "structured parameter \u2014 not supported here."
-          ] }, param.name)
-        )
-      ),
-      /* @__PURE__ */ jsx4(
-        "button",
-        {
-          type: "button",
-          style: { ...sendButton, opacity: canSend ? 1 : 0.55, cursor: canSend ? "pointer" : "not-allowed" },
-          disabled: !canSend,
-          "aria-busy": pending,
-          onClick: send,
-          children: pending ? "Sending\u2026" : `Send ${commandLabel}`
-        }
-      ),
-      !canWrite ? /* @__PURE__ */ jsx4("div", { style: hint, children: "You don\u2019t have permission to issue commands." }) : !hasSeam ? /* @__PURE__ */ jsx4("div", { style: hint, children: "Commands aren\u2019t available in this view." }) : !deviceToken ? /* @__PURE__ */ jsx4("div", { style: hint, children: "No device is selected for this command." }) : null,
-      sendError ? /* @__PURE__ */ jsx4("div", { role: "alert", style: { ...hint, color: commandStatusColor("FAILED") }, children: sendError }) : null
-    ] }),
-    /* @__PURE__ */ jsx4(CommandHistory, { commands: data.commands, sentToken, loading: data.loading, error: data.error })
-  ] }) }) });
-}
-function ParamField({
-  widgetId,
-  param,
-  value,
-  error,
-  disabled,
-  onChange
-}) {
-  const labelId = `cmd-${widgetId}-${param.name}`;
-  const unit = param.unit ? ` (${param.unit})` : "";
-  return /* @__PURE__ */ jsxs3("label", { htmlFor: labelId, style: { display: "flex", flexDirection: "column", gap: 3 }, children: [
-    /* @__PURE__ */ jsxs3("span", { style: { fontSize: fontVar3("sm"), color: css4("muted-foreground") }, children: [
-      param.name,
-      unit,
-      param.required ? /* @__PURE__ */ jsx4("span", { style: { color: commandStatusColor("FAILED") }, children: " *" }) : null
-    ] }),
-    /* @__PURE__ */ jsx4(ParamInput, { id: labelId, param, value, disabled, onChange }),
-    error ? /* @__PURE__ */ jsx4("span", { style: { fontSize: fontVar3("xs"), color: commandStatusColor("FAILED") }, children: error }) : null
-  ] });
-}
-function ParamInput({
-  id,
-  param,
-  value,
-  disabled,
-  onChange
-}) {
-  if (param.enum && param.enum.length > 0) {
-    return /* @__PURE__ */ jsxs3("select", { id, style: inputStyle, value, disabled, onChange: (e) => onChange(e.target.value), children: [
-      !param.required ? /* @__PURE__ */ jsx4("option", { value: "", children: "\u2014" }) : null,
-      param.enum.map((opt) => /* @__PURE__ */ jsx4("option", { value: opt, children: opt }, opt))
-    ] });
-  }
-  if (param.dataType === "BOOLEAN") {
-    return /* @__PURE__ */ jsx4(
-      "input",
-      {
-        id,
-        type: "checkbox",
-        style: { width: 16, height: 16 },
-        checked: parseBool(value),
-        disabled,
-        onChange: (e) => onChange(e.target.checked ? "true" : "false")
-      }
-    );
-  }
-  const numeric = param.dataType === "INT" || param.dataType === "DOUBLE";
-  return /* @__PURE__ */ jsx4(
-    "input",
-    {
-      id,
-      type: numeric ? "number" : "text",
-      style: inputStyle,
-      value,
-      disabled,
-      min: param.minValue ?? void 0,
-      max: param.maxValue ?? void 0,
-      step: param.dataType === "INT" ? 1 : "any",
-      placeholder: param.default ?? void 0,
-      onChange: (e) => onChange(e.target.value)
-    }
-  );
-}
-function CommandHistory({
-  commands,
-  sentToken,
-  loading,
-  error
-}) {
-  const empty = commands.length === 0;
-  const timeZone = useWidgetTimeZone2();
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      style: {
-        flex: 1,
-        minHeight: 0,
-        overflow: "auto",
-        borderTop: `1px solid ${css4("border")}`,
-        paddingTop: 6
-      },
-      children: empty ? /* @__PURE__ */ jsx4("div", { style: { ...hint, textAlign: "center", color: error ? commandStatusColor("FAILED") : css4("muted-foreground") }, children: error ? "Couldn\u2019t load command history." : loading ? "Loading\u2026" : "No commands issued yet." }) : /* @__PURE__ */ jsx4("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 4 }, children: commands.map((command) => /* @__PURE__ */ jsxs3(
-        "li",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            fontSize: fontVar3("sm"),
-            // Highlight the command just issued from this widget.
-            fontWeight: command.token === sentToken ? 600 : 400
-          },
-          children: [
-            /* @__PURE__ */ jsx4(StatusBadge, { status: command.status }),
-            /* @__PURE__ */ jsx4("span", { style: { color: css4("foreground"), whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: command.name }),
-            /* @__PURE__ */ jsx4("span", { style: { marginLeft: "auto", color: css4("muted-foreground"), whiteSpace: "nowrap" }, children: formatDateTime2(command.queuedTime, timeZone) })
-          ]
-        },
-        command.token
-      )) })
-    }
-  );
-}
-function StatusBadge({ status }) {
-  const color = commandStatusColor(status);
-  return /* @__PURE__ */ jsxs3(
-    "span",
-    {
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 4,
-        flexShrink: 0,
-        fontSize: fontVar3("xs"),
-        fontWeight: 600,
-        color
-      },
-      children: [
-        /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { width: 7, height: 7, borderRadius: "50%", background: color } }),
-        commandStatusLabel(status)
-      ]
-    }
-  );
-}
-var hint = { fontSize: fontVar3("xs"), color: css4("muted-foreground") };
-var SEND_FAILED = "Couldn\u2019t issue the command. Try again.";
-var inputStyle = {
-  width: "100%",
-  boxSizing: "border-box",
-  padding: "4px 8px",
-  fontSize: fontVar3("md"),
-  borderRadius: 4,
-  border: `1px solid ${css4("border")}`,
-  background: css4("background"),
-  color: css4("foreground")
-};
-var sendButton = {
-  padding: "6px 12px",
-  fontSize: fontVar3("md"),
-  fontWeight: 600,
-  borderRadius: 4,
-  border: "none",
-  background: css4("primary"),
-  color: css4("background"),
-  marginTop: 2
-};
-var commandButtonWidget = defineWidget4({
-  descriptor: builtinWidgetDescriptors["command-button"],
-  implementation: { kind: "trusted-react", component: CommandButton }
+var alarmCountWidget = defineWidget2({
+  descriptor: builtinWidgetDescriptors["alarm-count"],
+  implementation: { kind: "trusted-react", component: chunk2.component("AlarmCount") }
 });
 
 // src/widgets/control-lazy.tsx
-import { defineWidget as defineWidget5 } from "@devicechain/widget-sdk";
-var chunk2 = lazyChunk(() => import("./chunks/control-widgets-UDS4ET3T.js"));
-var loadControlWidgets = chunk2.load;
-var commandSliderWidget = defineWidget5({
+import { defineWidget as defineWidget3 } from "@devicechain/widget-sdk";
+var chunk3 = lazyChunk(() => import("./chunks/control-widgets-3V2LSSRF.js"));
+var loadControlWidgets = chunk3.load;
+var commandSliderWidget = defineWidget3({
   descriptor: builtinWidgetDescriptors["command-slider"],
-  implementation: { kind: "trusted-react", component: chunk2.component("CommandSlider") }
+  implementation: { kind: "trusted-react", component: chunk3.component("CommandSlider") }
 });
-var commandToggleWidget = defineWidget5({
+var commandToggleWidget = defineWidget3({
   descriptor: builtinWidgetDescriptors["command-toggle"],
-  implementation: { kind: "trusted-react", component: chunk2.component("CommandToggle") }
+  implementation: { kind: "trusted-react", component: chunk3.component("CommandToggle") }
+});
+var commandButtonWidget = defineWidget3({
+  descriptor: builtinWidgetDescriptors["command-button"],
+  implementation: { kind: "trusted-react", component: chunk3.component("CommandButton") }
 });
 
-// src/widgets/entity-selector.tsx
-import { useEffect as useEffect3, useState as useState5 } from "react";
-import {
-  css as css5,
-  fontVar as fontVar4,
-  defineWidget as defineWidget6,
-  optString as optString4,
-  useCandidates,
-  useWidgetSelect as useWidgetSelect2,
-  WidgetFrame as WidgetFrame4
-} from "@devicechain/widget-sdk";
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-function tokenOf(b) {
-  return b.kind === "device" ? b.deviceToken : b.anchor.targetToken;
-}
-var control = {
-  width: "100%",
-  fontSize: fontVar4("md"),
-  padding: "8px 10px",
-  borderRadius: 6,
-  border: `1px solid ${css5("border")}`,
-  background: css5("background"),
-  color: css5("foreground")
-};
-var hint2 = {
-  fontSize: fontVar4("sm"),
-  color: css5("muted-foreground")
-};
-function EntitySelector({ widget }) {
-  const select = useWidgetSelect2();
-  const target = optString4(widget.options, "selectionTarget");
-  const { candidates, loading, error, wired } = useCandidates(target);
-  const title = optString4(widget.options, "title");
-  const [pending, setPending] = useState5(null);
-  const selected = candidates.find((c) => c.selected);
-  const selectedToken = selected ? tokenOf(selected.binding) : "";
-  useEffect3(() => {
-    if (pending !== null && (selectedToken === pending || !candidates.some((c) => tokenOf(c.binding) === pending))) {
-      setPending(null);
-    }
-  }, [candidates, selectedToken, pending]);
-  const inert = !select || !target || !wired;
-  const value = pending ?? selectedToken;
-  const onChange = (e) => {
-    const token = e.target.value;
-    if (!token) return;
-    const candidate = candidates.find((c) => tokenOf(c.binding) === token);
-    if (select && target && candidate) {
-      setPending(token);
-      select({ slot: target, binding: candidate.binding });
-    }
-  };
-  return /* @__PURE__ */ jsx5(WidgetFrame4, { title, children: /* @__PURE__ */ jsx5(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 8,
-        height: "100%",
-        boxSizing: "border-box",
-        overflow: "auto"
-      },
-      children: inert ? /* @__PURE__ */ jsx5("span", { style: hint2, children: select && target ? "Selection isn\u2019t available here." : select ? "No target slot configured." : "Selection is available on the live dashboard." }) : /* @__PURE__ */ jsxs4(Fragment4, { children: [
-        /* @__PURE__ */ jsxs4(
-          "select",
-          {
-            style: { ...control, opacity: loading ? 0.6 : 1 },
-            value,
-            disabled: candidates.length === 0,
-            onChange,
-            "aria-label": title || `Select ${target}`,
-            children: [
-              /* @__PURE__ */ jsx5("option", { value: "", disabled: true, children: loading ? "Loading\u2026" : candidates.length === 0 ? "No options" : "Select\u2026" }),
-              candidates.map((c) => /* @__PURE__ */ jsx5("option", { value: tokenOf(c.binding), children: c.label }, tokenOf(c.binding)))
-            ]
-          }
-        ),
-        error ? /* @__PURE__ */ jsx5("span", { style: hint2, children: "Couldn\u2019t load options." }) : null
-      ] })
-    }
-  ) });
-}
-var entitySelectorWidget = defineWidget6({
+// src/widgets/selection-lazy.tsx
+import { defineWidget as defineWidget4 } from "@devicechain/widget-sdk";
+var chunk4 = lazyChunk(() => import("./chunks/entity-selector-3JJFI4DT.js"));
+var loadSelectionWidgets = chunk4.load;
+var entitySelectorWidget = defineWidget4({
   descriptor: builtinWidgetDescriptors["entity-selector"],
-  implementation: { kind: "trusted-react", component: EntitySelector }
+  implementation: { kind: "trusted-react", component: chunk4.component("EntitySelector") }
 });
 
 // src/widgets/gauge.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo } from "react";
 import {
-  defineWidget as defineWidget7,
+  defineWidget as defineWidget5,
   flashBackgroundStyle,
   formatValue,
-  optBoolean as optBoolean2,
-  optNumber as optNumber2,
-  optString as optString5,
+  optBoolean,
+  optNumber,
+  optString,
   optThresholds,
   pickSample,
   primaryMeasurementName,
   useFlashOnChange,
-  useWidgetScale as useWidgetScale2,
-  WidgetFrame as WidgetFrame5
+  useWidgetScale,
+  WidgetFrame
 } from "@devicechain/widget-sdk";
-import { buildGaugeOption, EChart, gaugeReadoutBox, useChartTheme } from "@devicechain/widget-sdk/echarts";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { buildGaugeOption, EChart, gaugeReadoutBox, loadChartEngine, useChartTheme } from "@devicechain/widget-sdk/echarts";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Gauge({ widget, data }) {
   const name = primaryMeasurementName(widget);
   const sample = pickSample(data.latest, name);
-  return /* @__PURE__ */ jsx6(WidgetFrame5, { title: optString5(widget.options, "title") ?? name, sampleTime: sample?.occurredTime ?? null, flush: true, children: /* @__PURE__ */ jsx6(GaugeBody, { widget, data }) });
+  return /* @__PURE__ */ jsx2(WidgetFrame, { title: optString(widget.options, "title") ?? name, sampleTime: sample?.occurredTime ?? null, flush: true, children: /* @__PURE__ */ jsx2(GaugeBody, { widget, data }) });
 }
 function GaugeBody({ widget, data }) {
   const theme = useChartTheme();
-  const { size, scale } = useWidgetScale2();
+  const { size, scale } = useWidgetScale();
   const name = primaryMeasurementName(widget);
   const sample = pickSample(data.latest, name);
-  const min = optNumber2(widget.options, "min");
-  const max = optNumber2(widget.options, "max");
-  const unit = optString5(widget.options, "unit");
-  const precision = optNumber2(widget.options, "precision");
-  const thresholds = useMemo2(() => optThresholds(widget.options, "thresholds"), [widget.options]);
-  const option = useMemo2(
+  const min = optNumber(widget.options, "min");
+  const max = optNumber(widget.options, "max");
+  const unit = optString(widget.options, "unit");
+  const precision = optNumber(widget.options, "precision");
+  const thresholds = useMemo(() => optThresholds(widget.options, "thresholds"), [widget.options]);
+  const option = useMemo(
     () => buildGaugeOption(sample?.value ?? null, theme, { min, max, thresholds, scale, readout: "none", emptyNeedle: "none" }, size),
     [sample?.value, theme, min, max, thresholds, scale, size]
   );
   const flashDirection = useFlashOnChange(
     sample?.value,
-    optBoolean2(widget.options, "flashOnChange"),
+    optBoolean(widget.options, "flashOnChange"),
     sample && `${sample.deviceToken}:${sample.name}`
   );
   const box = gaugeReadoutBox(size);
@@ -1923,9 +1243,9 @@ function GaugeBody({ widget, data }) {
     "aria-valuenow": Math.min(range.range.max, Math.max(range.range.min, value)),
     "aria-valuetext": `${formatValue(value, precision)}${unit ? ` ${unit}` : ""}`
   } : {};
-  return /* @__PURE__ */ jsxs5("div", { style: { position: "relative", width: "100%", height: "100%", ...flashBackgroundStyle(flashDirection) }, ...meter, children: [
-    /* @__PURE__ */ jsx6(EChart, { option }),
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", height: "100%", ...flashBackgroundStyle(flashDirection) }, ...meter, children: [
+    /* @__PURE__ */ jsx2(EChart, { option }),
+    /* @__PURE__ */ jsx2(
       "div",
       {
         style: {
@@ -1939,7 +1259,7 @@ function GaugeBody({ widget, data }) {
           justifyContent: "center",
           pointerEvents: "none"
         },
-        children: /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx2(
           LevelReadout,
           {
             text: formatValue(value, precision),
@@ -1952,27 +1272,28 @@ function GaugeBody({ widget, data }) {
     )
   ] });
 }
-var gaugeWidget = defineWidget7({
+Gauge.preload = loadChartEngine;
+var gaugeWidget = defineWidget5({
   descriptor: builtinWidgetDescriptors["gauge"],
   implementation: { kind: "trusted-react", component: Gauge }
 });
 
 // src/widgets/image.tsx
 import {
-  css as css6,
-  defineWidget as defineWidget8,
-  fontVar as fontVar5,
-  optString as optString6,
-  WidgetFrame as WidgetFrame6
+  css,
+  defineWidget as defineWidget6,
+  fontVar,
+  optString as optString2,
+  WidgetFrame as WidgetFrame2
 } from "@devicechain/widget-sdk";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var FITS = /* @__PURE__ */ new Set(["contain", "cover", "fill"]);
 function Image({ widget }) {
-  const url = optString6(widget.options, "url");
-  const alt = optString6(widget.options, "alt") ?? "";
-  const fitOption = optString6(widget.options, "fit");
+  const url = optString2(widget.options, "url");
+  const alt = optString2(widget.options, "alt") ?? "";
+  const fitOption = optString2(widget.options, "fit");
   const objectFit = fitOption && FITS.has(fitOption) ? fitOption : "contain";
-  return /* @__PURE__ */ jsx7(WidgetFrame6, { title: optString6(widget.options, "title"), flush: true, children: url ? /* @__PURE__ */ jsx7("img", { src: url, alt, style: { width: "100%", height: "100%", objectFit, display: "block" } }) : /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx3(WidgetFrame2, { title: optString2(widget.options, "title"), flush: true, children: url ? /* @__PURE__ */ jsx3("img", { src: url, alt, style: { width: "100%", height: "100%", objectFit, display: "block" } }) : /* @__PURE__ */ jsx3(
     "div",
     {
       style: {
@@ -1980,40 +1301,40 @@ function Image({ widget }) {
         alignItems: "center",
         justifyContent: "center",
         height: "100%",
-        color: css6("muted-foreground"),
-        fontSize: fontVar5("md")
+        color: css("muted-foreground"),
+        fontSize: fontVar("md")
       },
       children: "No image URL"
     }
   ) });
 }
-var imageWidget = defineWidget8({
+var imageWidget = defineWidget6({
   descriptor: builtinWidgetDescriptors["image"],
   implementation: { kind: "trusted-react", component: Image }
 });
 
 // src/widgets/label.tsx
 import {
-  css as css7,
-  defineWidget as defineWidget9,
-  fontVar as fontVar6,
-  spaceVar as spaceVar2,
-  optNumber as optNumber3,
-  optString as optString7,
-  WidgetFrame as WidgetFrame7
+  css as css2,
+  defineWidget as defineWidget7,
+  fontVar as fontVar2,
+  spaceVar,
+  optNumber as optNumber2,
+  optString as optString3,
+  WidgetFrame as WidgetFrame3
 } from "@devicechain/widget-sdk";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var justify = {
   left: "flex-start",
   center: "center",
   right: "flex-end"
 };
 function Label({ widget }) {
-  const text = optString7(widget.options, "text") ?? "";
-  const align = optString7(widget.options, "align") ?? "center";
-  const authored = optNumber3(widget.options, "fontSize");
-  const fontSize = authored !== void 0 ? `calc(${authored}px * var(--dc-scale, 1))` : fontVar6("lg");
-  return /* @__PURE__ */ jsx8(WidgetFrame7, { title: optString7(widget.options, "title"), flush: true, children: /* @__PURE__ */ jsx8(
+  const text = optString3(widget.options, "text") ?? "";
+  const align = optString3(widget.options, "align") ?? "center";
+  const authored = optNumber2(widget.options, "fontSize");
+  const fontSize = authored !== void 0 ? `calc(${authored}px * var(--dc-scale, 1))` : fontVar2("lg");
+  return /* @__PURE__ */ jsx4(WidgetFrame3, { title: optString3(widget.options, "title"), flush: true, children: /* @__PURE__ */ jsx4(
     "div",
     {
       style: {
@@ -2025,14 +1346,14 @@ function Label({ widget }) {
         overflow: "hidden",
         // A label is often one row tall: the frame's uniform inset would leave it a line's
         // height or less, so it keeps a slim vertical inset and the usual side inset.
-        padding: `${spaceVar2(1)} ${spaceVar2(3)}`
+        padding: `${spaceVar(1)} ${spaceVar(3)}`
       },
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx4(
         "span",
         {
           style: {
             fontSize,
-            color: css7("foreground"),
+            color: css2("foreground"),
             textAlign: align,
             whiteSpace: "pre-wrap"
           },
@@ -2042,65 +1363,65 @@ function Label({ widget }) {
     }
   ) });
 }
-var labelWidget = defineWidget9({
+var labelWidget = defineWidget7({
   descriptor: builtinWidgetDescriptors["label"],
   implementation: { kind: "trusted-react", component: Label }
 });
 
 // src/widgets/latest-card.tsx
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo2 } from "react";
 import {
   bandAt,
-  css as css8,
-  defineWidget as defineWidget10,
-  fitValueFont as fitValueFont2,
-  fitValueFontCss as fitValueFontCss2,
-  FIT_MIN_FONT_PX as FIT_MIN_FONT_PX2,
+  css as css3,
+  defineWidget as defineWidget8,
+  fitValueFont,
+  fitValueFontCss,
+  FIT_MIN_FONT_PX,
   flashTextStyle,
-  fontVar as fontVar7,
+  fontVar as fontVar3,
   formatTimestamp,
   formatValue as formatValue2,
   levelColor,
-  optBoolean as optBoolean3,
-  optNumber as optNumber4,
-  optString as optString8,
+  optBoolean as optBoolean2,
+  optNumber as optNumber3,
+  optString as optString4,
   optThresholds as optThresholds2,
   pickSample as pickSample2,
   primaryMeasurementName as primaryMeasurementName2,
-  spaceVar as spaceVar3,
-  useSeverityColors as useSeverityColors3,
-  useStickyChars as useStickyChars2,
+  spaceVar as spaceVar2,
+  useSeverityColors,
+  useStickyChars,
   useFlashOnChange as useFlashOnChange2,
-  useWidgetTimeZone as useWidgetTimeZone3,
-  WidgetFrame as WidgetFrame8
+  useWidgetTimeZone,
+  WidgetFrame as WidgetFrame4
 } from "@devicechain/widget-sdk";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var TIMESTAMP_ROOM_PX = 18;
 function LatestCard({ widget, data }) {
-  const severity = useSeverityColors3();
-  const timeZone = useWidgetTimeZone3();
+  const severity = useSeverityColors();
+  const timeZone = useWidgetTimeZone();
   const name = primaryMeasurementName2(widget);
   const sample = pickSample2(data.latest, name);
-  const title = optString8(widget.options, "title") ?? name;
-  const unit = optString8(widget.options, "unit");
-  const precision = optNumber4(widget.options, "precision");
+  const title = optString4(widget.options, "title") ?? name;
+  const unit = optString4(widget.options, "unit");
+  const precision = optNumber3(widget.options, "precision");
   const display = formatValue2(sample?.value, precision);
-  const thresholds = useMemo3(() => optThresholds2(widget.options, "thresholds"), [widget.options]);
+  const thresholds = useMemo2(() => optThresholds2(widget.options, "thresholds"), [widget.options]);
   const band = bandAt(thresholds, sample?.value);
-  const valueColor = levelColor(severity, band?.level) ?? css8("foreground");
+  const valueColor = levelColor(severity, band?.level) ?? css3("foreground");
   const flashDirection = useFlashOnChange2(
     sample?.value,
-    optBoolean3(widget.options, "flashOnChange"),
+    optBoolean2(widget.options, "flashOnChange"),
     sample && `${sample.deviceToken}:${sample.name}`
   );
-  const chars = useStickyChars2(display.length + (sample?.value != null && unit ? Math.ceil(unit.length / 2) + 1 : 0));
-  return /* @__PURE__ */ jsx9(WidgetFrame8, { title, sampleTime: sample?.occurredTime ?? null, children: ({ size, scale }) => {
-    const floor = Math.round(FIT_MIN_FONT_PX2 * scale);
+  const chars = useStickyChars(display.length + (sample?.value != null && unit ? Math.ceil(unit.length / 2) + 1 : 0));
+  return /* @__PURE__ */ jsx5(WidgetFrame4, { title, sampleTime: sample?.occurredTime ?? null, children: ({ size, scale }) => {
+    const floor = Math.round(FIT_MIN_FONT_PX * scale);
     const measured = size.width > 0 && size.height > 0;
-    const valuePx = measured ? fitValueFont2(size, chars, { floor }) : void 0;
-    const valueFont = valuePx ?? fitValueFontCss2(chars, { floor });
+    const valuePx = measured ? fitValueFont(size, chars, { floor }) : void 0;
+    const valueFont = valuePx ?? fitValueFontCss(chars, { floor });
     const showTimestamp = valuePx === void 0 || size.height - Math.ceil(valuePx * 1.1) >= TIMESTAMP_ROOM_PX * scale;
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs2(
       "div",
       {
         style: {
@@ -2112,7 +1433,7 @@ function LatestCard({ widget, data }) {
           overflow: "hidden"
         },
         children: [
-          /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsxs2(
             "div",
             {
               "data-threshold-level": band?.level,
@@ -2130,13 +1451,13 @@ function LatestCard({ widget, data }) {
               },
               children: [
                 display,
-                sample?.value != null && unit ? /* @__PURE__ */ jsx9(
+                sample?.value != null && unit ? /* @__PURE__ */ jsx5(
                   "span",
                   {
                     style: {
                       fontSize: valuePx !== void 0 ? Math.round(valuePx / 2) : `calc(${valueFont} / 2)`,
-                      color: css8("muted-foreground"),
-                      marginLeft: spaceVar3(1)
+                      color: css3("muted-foreground"),
+                      marginLeft: spaceVar2(1)
                     },
                     children: unit
                   }
@@ -2144,64 +1465,65 @@ function LatestCard({ widget, data }) {
               ]
             }
           ),
-          sample?.occurredTime && showTimestamp ? /* @__PURE__ */ jsx9("div", { style: { fontSize: fontVar7("xs"), color: css8("muted-foreground"), marginTop: spaceVar3(1) }, children: formatTimestamp(sample.occurredTime, timeZone) }) : null
+          sample?.occurredTime && showTimestamp ? /* @__PURE__ */ jsx5("div", { style: { fontSize: fontVar3("xs"), color: css3("muted-foreground"), marginTop: spaceVar2(1) }, children: formatTimestamp(sample.occurredTime, timeZone) }) : null
         ]
       }
     );
   } });
 }
-var latestCardWidget = defineWidget10({
+var latestCardWidget = defineWidget8({
   descriptor: builtinWidgetDescriptors["latest-card"],
   implementation: { kind: "trusted-react", component: LatestCard }
 });
 
 // src/widgets/level-lazy.tsx
-import { defineWidget as defineWidget11 } from "@devicechain/widget-sdk";
-var chunk3 = lazyChunk(() => import("./chunks/level-widgets-MJB7TOLU.js"));
-var loadLevelWidgets = chunk3.load;
-var lazyComponent = chunk3.component;
-var linearGaugeWidget = defineWidget11({
+import { defineWidget as defineWidget9 } from "@devicechain/widget-sdk";
+import { loadChartEngine as loadChartEngine2 } from "@devicechain/widget-sdk/echarts";
+var chunk5 = lazyChunk(() => import("./chunks/level-widgets-MJB7TOLU.js"));
+var loadLevelWidgets = chunk5.load;
+var lazyComponent = chunk5.component;
+var linearGaugeWidget = defineWidget9({
   descriptor: builtinWidgetDescriptors["linear-gauge"],
   implementation: { kind: "trusted-react", component: lazyComponent("LinearGauge") }
 });
-var levelGaugeWidget = defineWidget11({
+var levelGaugeWidget = defineWidget9({
   descriptor: builtinWidgetDescriptors["level-gauge"],
   implementation: { kind: "trusted-react", component: lazyComponent("LevelGauge") }
 });
-var batteryWidget = defineWidget11({
+var batteryWidget = defineWidget9({
   descriptor: builtinWidgetDescriptors["battery"],
   implementation: { kind: "trusted-react", component: lazyComponent("Battery") }
 });
-var statusLightWidget = defineWidget11({
+var statusLightWidget = defineWidget9({
   descriptor: builtinWidgetDescriptors["status-light"],
   implementation: { kind: "trusted-react", component: lazyComponent("StatusLight") }
 });
-var signalBarsWidget = defineWidget11({
+var signalBarsWidget = defineWidget9({
   descriptor: builtinWidgetDescriptors["signal-bars"],
   implementation: { kind: "trusted-react", component: lazyComponent("SignalBars") }
 });
-var compassWidget = defineWidget11({
+var compassWidget = defineWidget9({
   descriptor: builtinWidgetDescriptors["compass"],
-  implementation: { kind: "trusted-react", component: lazyComponent("Compass") }
+  implementation: { kind: "trusted-react", component: lazyComponent("Compass", loadChartEngine2) }
 });
-var progressRingWidget = defineWidget11({
+var progressRingWidget = defineWidget9({
   descriptor: builtinWidgetDescriptors["progress-ring"],
   implementation: { kind: "trusted-react", component: lazyComponent("ProgressRing") }
 });
 
 // src/widgets/map.tsx
-import { useEffect as useEffect4, useRef as useRef2, useState as useState6 } from "react";
+import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
 import { renderableBasemap, resolveBasemap } from "@devicechain/client";
 
 // src/basemap-context.tsx
 import { createContext, useContext } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var TenantBasemapContext = createContext(null);
 function TenantBasemapProvider({
   basemap,
   children
 }) {
-  return /* @__PURE__ */ jsx10(TenantBasemapContext.Provider, { value: basemap, children });
+  return /* @__PURE__ */ jsx6(TenantBasemapContext.Provider, { value: basemap, children });
 }
 function useTenantBasemap() {
   return useContext(TenantBasemapContext);
@@ -2209,13 +1531,13 @@ function useTenantBasemap() {
 
 // src/map-runtime-context.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var MapRuntimeContext = createContext2(null);
 function MapRuntimeProvider({
   runtime,
   children
 }) {
-  return /* @__PURE__ */ jsx11(MapRuntimeContext.Provider, { value: runtime, children });
+  return /* @__PURE__ */ jsx7(MapRuntimeContext.Provider, { value: runtime, children });
 }
 function useMapRuntime() {
   return useContext2(MapRuntimeContext);
@@ -2223,11 +1545,11 @@ function useMapRuntime() {
 
 // src/widgets/map.tsx
 import {
-  css as css9,
-  fontVar as fontVar8,
-  defineWidget as defineWidget12,
-  optString as optString9,
-  WidgetFrame as WidgetFrame9
+  css as css4,
+  fontVar as fontVar4,
+  defineWidget as defineWidget10,
+  optString as optString5,
+  WidgetFrame as WidgetFrame5
 } from "@devicechain/widget-sdk";
 
 // src/widgets/map-geometry.ts
@@ -2323,7 +1645,7 @@ function loadLandStyle() {
 }
 
 // src/widgets/map.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var mapLibrePromise;
 function loadMapLibre(runtime) {
   if (!mapLibrePromise) {
@@ -2339,20 +1661,20 @@ function loadMapLibre(runtime) {
 }
 var SINGLE_DEVICE_ZOOM = 14;
 function MapWidget({ widget, data }) {
-  const title = optString9(widget.options, "title");
+  const title = optString5(widget.options, "title");
   const positions = placeable(data.locations);
   const runtime = useMapRuntime();
   const basemap = renderableBasemap(
     resolveBasemap(
       {
-        tileUrl: optString9(widget.options, "tileUrl"),
-        attribution: optString9(widget.options, "attribution")
+        tileUrl: optString5(widget.options, "tileUrl"),
+        attribution: optString5(widget.options, "attribution")
       },
       useTenantBasemap()
     )
   );
   if (data.forbidden) {
-    return /* @__PURE__ */ jsx12(WidgetFrame9, { title, children: /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx8(WidgetFrame5, { title, children: /* @__PURE__ */ jsx8(
       MapNotice,
       {
         glyph: "\u{1F512}",
@@ -2362,7 +1684,7 @@ function MapWidget({ widget, data }) {
     ) });
   }
   if (!runtime) {
-    return /* @__PURE__ */ jsx12(WidgetFrame9, { title, children: /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx8(WidgetFrame5, { title, children: /* @__PURE__ */ jsx8(
       MapNotice,
       {
         glyph: "\u{1F9E9}",
@@ -2372,10 +1694,10 @@ function MapWidget({ widget, data }) {
     ) });
   }
   if (data.loading && positions.length === 0) {
-    return /* @__PURE__ */ jsx12(WidgetFrame9, { title, children: /* @__PURE__ */ jsx12(MapNotice, { heading: "Loading\u2026" }) });
+    return /* @__PURE__ */ jsx8(WidgetFrame5, { title, children: /* @__PURE__ */ jsx8(MapNotice, { heading: "Loading\u2026" }) });
   }
   if (positions.length === 0) {
-    return /* @__PURE__ */ jsx12(WidgetFrame9, { title, children: /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx8(WidgetFrame5, { title, children: /* @__PURE__ */ jsx8(
       MapNotice,
       {
         heading: data.deviceTokens.length === 0 ? "No devices selected" : "No positions reported",
@@ -2383,11 +1705,11 @@ function MapWidget({ widget, data }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx12(WidgetFrame9, { title, flush: true, children: /* @__PURE__ */ jsx12(LiveMap, { basemap, positions, runtime }) });
+  return /* @__PURE__ */ jsx8(WidgetFrame5, { title, flush: true, children: /* @__PURE__ */ jsx8(LiveMap, { basemap, positions, runtime }) });
 }
 function PlainPanel({ positions, note }) {
   const points = projectToPanel(positions);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       "data-testid": "map-plain-panel",
@@ -2396,10 +1718,10 @@ function PlainPanel({ positions, note }) {
         width: "100%",
         height: "100%",
         overflow: "hidden",
-        background: css9("muted")
+        background: css4("muted")
       },
       children: [
-        positions.map((position, i) => /* @__PURE__ */ jsx12(
+        positions.map((position, i) => /* @__PURE__ */ jsx8(
           Marker,
           {
             position,
@@ -2412,7 +1734,7 @@ function PlainPanel({ positions, note }) {
           },
           position.deviceToken
         )),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             "data-testid": "map-no-tiles-note",
@@ -2422,11 +1744,11 @@ function PlainPanel({ positions, note }) {
               right: 0,
               bottom: 0,
               padding: "4px 8px",
-              fontSize: fontVar8("sm"),
+              fontSize: fontVar4("sm"),
               lineHeight: 1.3,
               textAlign: "center",
-              color: css9("muted-foreground"),
-              background: css9("card"),
+              color: css4("muted-foreground"),
+              background: css4("card"),
               opacity: 0.9
             },
             children: note
@@ -2441,13 +1763,13 @@ function LiveMap({
   positions,
   runtime
 }) {
-  const containerRef = useRef2(null);
-  const mapRef = useRef2(null);
-  const markersRef = useRef2([]);
-  const [status, setStatus] = useState6("loading");
+  const containerRef = useRef(null);
+  const mapRef = useRef(null);
+  const markersRef = useRef([]);
+  const [status, setStatus] = useState3("loading");
   const tileUrl = basemap?.tileUrl ?? null;
   const attribution = basemap?.attribution ?? null;
-  useEffect4(() => {
+  useEffect2(() => {
     let cancelled = false;
     setStatus("loading");
     Promise.all([
@@ -2475,7 +1797,7 @@ function LiveMap({
       mapRef.current = null;
     };
   }, [tileUrl, attribution, runtime.workerUrl]);
-  useEffect4(() => {
+  useEffect2(() => {
     const map = mapRef.current;
     if (status !== "ready" || !map) return;
     let live = true;
@@ -2504,7 +1826,7 @@ function LiveMap({
     };
   }, [status, positionsKey(positions)]);
   if (status === "unavailable") {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx8(
       PlainPanel,
       {
         positions,
@@ -2512,7 +1834,7 @@ function LiveMap({
       }
     );
   }
-  return /* @__PURE__ */ jsx12("div", { ref: containerRef, "data-testid": "map-canvas", style: { width: "100%", height: "100%" } });
+  return /* @__PURE__ */ jsx8("div", { ref: containerRef, "data-testid": "map-canvas", style: { width: "100%", height: "100%" } });
 }
 function positionsKey(positions) {
   return positions.map((p) => `${p.deviceToken}:${p.latitude}:${p.longitude}:${p.heading ?? ""}`).join("|");
@@ -2521,8 +1843,8 @@ var MARKER_DOT_STYLE = {
   width: "12px",
   height: "12px",
   borderRadius: "50%",
-  background: css9("primary"),
-  border: `2px solid ${css9("card")}`,
+  background: css4("primary"),
+  border: `2px solid ${css4("card")}`,
   boxShadow: "0 0 0 1px rgba(0,0,0,0.25)",
   cursor: "default"
 };
@@ -2531,7 +1853,7 @@ function Marker({
   style
 }) {
   const label = describePosition(position);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "data-testid": "map-marker",
@@ -2543,7 +1865,7 @@ function Marker({
   );
 }
 function MapNotice({ glyph, heading, detail }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       style: {
@@ -2557,115 +1879,68 @@ function MapNotice({ glyph, heading, detail }) {
         height: "100%",
         boxSizing: "border-box",
         textAlign: "center",
-        color: css9("muted-foreground")
+        color: css4("muted-foreground")
       },
       children: [
-        glyph ? /* @__PURE__ */ jsx12("div", { style: { fontSize: fontVar8("xl"), lineHeight: 1 }, "aria-hidden": "true", children: glyph }) : null,
-        /* @__PURE__ */ jsx12("div", { style: { fontSize: fontVar8("md"), fontWeight: 600 }, children: heading }),
-        detail ? /* @__PURE__ */ jsx12("div", { style: { fontSize: fontVar8("sm"), opacity: 0.8 }, children: detail }) : null
+        glyph ? /* @__PURE__ */ jsx8("div", { style: { fontSize: fontVar4("xl"), lineHeight: 1 }, "aria-hidden": "true", children: glyph }) : null,
+        /* @__PURE__ */ jsx8("div", { style: { fontSize: fontVar4("md"), fontWeight: 600 }, children: heading }),
+        detail ? /* @__PURE__ */ jsx8("div", { style: { fontSize: fontVar4("sm"), opacity: 0.8 }, children: detail }) : null
       ]
     }
   );
 }
-var mapWidget = defineWidget12({
+var mapWidget = defineWidget10({
   descriptor: builtinWidgetDescriptors["map"],
   implementation: { kind: "trusted-react", component: MapWidget }
 });
 
-// src/widgets/table.tsx
-import {
-  css as css10,
-  defineWidget as defineWidget13,
-  fontVar as fontVar9,
-  spaceVar as spaceVar4,
-  FlashValue as FlashValue2,
-  formatTimestamp as formatTimestamp2,
-  optBoolean as optBoolean4,
-  optNumber as optNumber5,
-  optString as optString10,
-  useWidgetTimeZone as useWidgetTimeZone4,
-  WidgetFrame as WidgetFrame10
-} from "@devicechain/widget-sdk";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var cell2 = { padding: `${spaceVar4(1)} ${spaceVar4(3)}`, textAlign: "left" };
-var headCell2 = {
-  ...cell2,
-  fontSize: fontVar9("xs"),
-  fontWeight: 600,
-  textTransform: "uppercase",
-  letterSpacing: "0.04em",
-  color: css10("muted-foreground"),
-  borderBottom: `1px solid ${css10("border")}`
-};
-function Table({ widget, data }) {
-  const timeZone = useWidgetTimeZone4();
-  const rows = Object.values(data.latest).sort((a, b) => a.name.localeCompare(b.name));
-  const precision = optNumber5(widget.options, "precision");
-  const flash = optBoolean4(widget.options, "flashOnChange");
-  return /* @__PURE__ */ jsx13(WidgetFrame10, { title: optString10(widget.options, "title"), flush: true, children: /* @__PURE__ */ jsx13("div", { style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxs8("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: fontVar9("md"), color: css10("foreground") }, children: [
-    /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs8("tr", { children: [
-      /* @__PURE__ */ jsx13("th", { style: headCell2, children: "Measurement" }),
-      /* @__PURE__ */ jsx13("th", { style: headCell2, children: "Value" }),
-      /* @__PURE__ */ jsx13("th", { style: headCell2, children: "Time" })
-    ] }) }),
-    /* @__PURE__ */ jsx13("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx13("tr", { children: /* @__PURE__ */ jsx13("td", { colSpan: 3, style: { ...cell2, textAlign: "center", color: css10("muted-foreground") }, children: "No data yet" }) }) : rows.map((row) => /* @__PURE__ */ jsxs8("tr", { children: [
-      /* @__PURE__ */ jsx13("td", { style: cell2, children: row.name }),
-      /* @__PURE__ */ jsx13("td", { style: { ...cell2, fontVariantNumeric: "tabular-nums" }, children: /* @__PURE__ */ jsx13(
-        FlashValue2,
-        {
-          value: row.value,
-          precision,
-          enabled: flash,
-          identity: `${row.deviceToken}:${row.name}`
-        }
-      ) }),
-      /* @__PURE__ */ jsx13("td", { style: { ...cell2, color: css10("muted-foreground") }, children: formatTimestamp2(row.occurredTime, timeZone) })
-    ] }, row.name)) })
-  ] }) }) });
-}
-var tableWidget = defineWidget13({
+// src/widgets/table-lazy.tsx
+import { defineWidget as defineWidget11 } from "@devicechain/widget-sdk";
+var chunk6 = lazyChunk(() => import("./chunks/table-6EVV7QZH.js"));
+var loadTableWidget = chunk6.load;
+var tableWidget = defineWidget11({
   descriptor: builtinWidgetDescriptors["table"],
-  implementation: { kind: "trusted-react", component: Table }
+  implementation: { kind: "trusted-react", component: chunk6.component("Table") }
 });
 
 // src/widgets/time-series-chart.tsx
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { isValidSpanSeconds, spanLabel } from "@devicechain/dashboards";
 import {
-  css as css11,
-  defineWidget as defineWidget14,
-  fontVar as fontVar10,
-  formatDateTime as formatDateTime3,
-  formatTimestamp as formatTimestamp3,
-  optNumber as optNumber6,
-  optString as optString11,
+  css as css5,
+  defineWidget as defineWidget12,
+  fontVar as fontVar5,
+  formatDateTime,
+  formatTimestamp as formatTimestamp2,
+  optNumber as optNumber4,
+  optString as optString6,
   optThresholds as optThresholds3,
-  spaceVar as spaceVar5,
-  useWidgetScale as useWidgetScale3,
+  spaceVar as spaceVar3,
+  useWidgetScale as useWidgetScale2,
   useWidgetTimeRange,
-  useWidgetTimeZone as useWidgetTimeZone5,
+  useWidgetTimeZone as useWidgetTimeZone2,
   viewerLocale,
-  WidgetFrame as WidgetFrame11
+  WidgetFrame as WidgetFrame6
 } from "@devicechain/widget-sdk";
-import { buildLineOption, EChart as EChart2, useChartTheme as useChartTheme2 } from "@devicechain/widget-sdk/echarts";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { buildLineOption, EChart as EChart2, loadChartEngine as loadChartEngine3, useChartTheme as useChartTheme2 } from "@devicechain/widget-sdk/echarts";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 function TimeSeriesChart({ widget, data }) {
-  return /* @__PURE__ */ jsx14(WidgetFrame11, { title: optString11(widget.options, "title"), flush: true, children: /* @__PURE__ */ jsx14(TimeSeriesBody, { widget, data }) });
+  return /* @__PURE__ */ jsx9(WidgetFrame6, { title: optString6(widget.options, "title"), flush: true, children: /* @__PURE__ */ jsx9(TimeSeriesBody, { widget, data }) });
 }
 function TimeSeriesBody({ widget, data }) {
   const theme = useChartTheme2();
-  const { size, scale } = useWidgetScale3();
+  const { size, scale } = useWidgetScale2();
   const measurements = widget.datasource?.measurements;
-  const unit = optString11(widget.options, "unit");
-  const precision = optNumber6(widget.options, "precision");
-  const thresholds = useMemo4(() => optThresholds3(widget.options, "thresholds"), [widget.options]);
-  const option = useMemo4(
-    () => buildLineOption(data.samples, theme, { measurements, unit, precision, thresholds, scale }, size),
-    [data.samples, theme, measurements, unit, precision, thresholds, scale, size]
+  const unit = optString6(widget.options, "unit");
+  const precision = optNumber4(widget.options, "precision");
+  const thresholds = useMemo3(() => optThresholds3(widget.options, "thresholds"), [widget.options]);
+  const option = useMemo3(
+    () => buildLineOption(data.samples, theme, { measurements, unit, precision, thresholds, scale, gaps: data.gaps }, size),
+    [data.samples, data.gaps, theme, measurements, unit, precision, thresholds, scale, size]
   );
-  return /* @__PURE__ */ jsxs9("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsx14(EChart2, { option }),
-    /* @__PURE__ */ jsx14(SpanBadge, { widget, data })
+  return /* @__PURE__ */ jsxs4("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ jsx9(EChart2, { option }),
+    /* @__PURE__ */ jsx9(SpanBadge, { widget, data })
   ] });
 }
 var SPAN_STRINGS = {
@@ -2683,8 +1958,8 @@ var SPAN_STRINGS = {
 var DAY_MS = 864e5;
 function SpanBadge({ widget, data }) {
   const range = useWidgetTimeRange();
-  const timeZone = useWidgetTimeZone5();
-  const pinned = optNumber6(widget.options, "windowSeconds");
+  const timeZone = useWidgetTimeZone2();
+  const pinned = optNumber4(widget.options, "windowSeconds");
   const span = isValidSpanSeconds(pinned) ? pinned : range?.spanSeconds;
   const showSpan = range !== void 0 && span !== range.spanSeconds;
   const cutAt = data.truncatedBefore;
@@ -2692,10 +1967,10 @@ function SpanBadge({ widget, data }) {
   const words = viewerLocale()?.toLowerCase().startsWith("es") ? SPAN_STRINGS.es : SPAN_STRINGS.en;
   const label = span === void 0 ? "" : spanLabel(span);
   const end = range?.paused && range.pausedAt !== void 0 ? range.pausedAt : Date.now();
-  const time = cutAt ? end - Date.parse(cutAt) > DAY_MS ? formatDateTime3(cutAt, timeZone) : formatTimestamp3(cutAt, timeZone) : "";
+  const time = cutAt ? end - Date.parse(cutAt) > DAY_MS ? formatDateTime(cutAt, timeZone) : formatTimestamp2(cutAt, timeZone) : "";
   const text = [showSpan ? label : "", cutAt ? words.from(time) : ""].filter(Boolean).join(" \xB7 ");
   const title = [showSpan ? words.pinned(label) : "", cutAt ? words.cut(time, label) : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx9(
     "span",
     {
       "data-chart-span": showSpan ? label : "",
@@ -2703,13 +1978,13 @@ function SpanBadge({ widget, data }) {
       title,
       style: {
         position: "absolute",
-        top: spaceVar5(1),
-        right: spaceVar5(2),
-        padding: `0 ${spaceVar5(1)}`,
-        fontSize: fontVar10("xs"),
+        top: spaceVar3(1),
+        right: spaceVar3(2),
+        padding: `0 ${spaceVar3(1)}`,
+        fontSize: fontVar5("xs"),
         whiteSpace: "nowrap",
-        color: css11("muted-foreground"),
-        background: css11("muted"),
+        color: css5("muted-foreground"),
+        background: css5("muted"),
         borderRadius: 4,
         pointerEvents: "auto"
       },
@@ -2717,7 +1992,8 @@ function SpanBadge({ widget, data }) {
     }
   );
 }
-var timeSeriesChartWidget = defineWidget14({
+TimeSeriesChart.preload = loadChartEngine3;
+var timeSeriesChartWidget = defineWidget12({
   descriptor: builtinWidgetDescriptors["timeseries-chart"],
   implementation: { kind: "trusted-react", component: TimeSeriesChart }
 });
@@ -2762,20 +2038,20 @@ function defaultWidgetRegistry() {
 
 // src/connected-widget.tsx
 import {
-  optString as optString12,
+  optString as optString7,
   useAlarmStream,
   useCommandStream,
   useDatasourceAvailability,
   useLocationStream,
   useMeasurementStream,
   useWidgetCandidates,
-  useWidgetSelect as useWidgetSelect3,
-  WidgetFrame as WidgetFrame13
+  useWidgetSelect,
+  WidgetFrame as WidgetFrame8
 } from "@devicechain/widget-sdk";
 
 // src/widget-containment.tsx
-import { Component, createContext as createContext3, useCallback, useContext as useContext3, useState as useState7 } from "react";
-import { WidgetFrame as WidgetFrame12 } from "@devicechain/widget-sdk";
+import { Component, createContext as createContext3, useCallback, useContext as useContext3, useState as useState4 } from "react";
+import { WidgetFrame as WidgetFrame7 } from "@devicechain/widget-sdk";
 
 // src/widget-host.ts
 function describeError(error) {
@@ -2833,7 +2109,7 @@ function narrowCandidates(candidates, descriptor, report) {
 }
 
 // src/widget-containment.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var MESSAGE_STYLE = {
   display: "flex",
   flexDirection: "column",
@@ -2877,23 +2153,23 @@ var WidgetErrorBoundary = class extends Component {
   render() {
     const { error } = this.state;
     if (!error) return this.props.children;
-    return /* @__PURE__ */ jsx15(WidgetFrame12, { title: this.props.title, children: /* @__PURE__ */ jsxs10("div", { style: MESSAGE_STYLE, role: "alert", children: [
-      /* @__PURE__ */ jsx15("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: "\u26A0" }),
-      /* @__PURE__ */ jsx15("div", { style: { fontSize: 13, fontWeight: 600 }, children: "This widget failed to render" }),
-      /* @__PURE__ */ jsx15("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: error.message }),
-      /* @__PURE__ */ jsx15("button", { type: "button", style: BUTTON_STYLE, onClick: this.reset, children: "Reset widget" })
+    return /* @__PURE__ */ jsx10(WidgetFrame7, { title: this.props.title, children: /* @__PURE__ */ jsxs5("div", { style: MESSAGE_STYLE, role: "alert", children: [
+      /* @__PURE__ */ jsx10("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: "\u26A0" }),
+      /* @__PURE__ */ jsx10("div", { style: { fontSize: 13, fontWeight: 600 }, children: "This widget failed to render" }),
+      /* @__PURE__ */ jsx10("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: error.message }),
+      /* @__PURE__ */ jsx10("button", { type: "button", style: BUTTON_STYLE, onClick: this.reset, children: "Reset widget" })
     ] }) });
   }
 };
 function WidgetContainment({ title, resetKey, children }) {
-  const [messages, setMessages] = useState7([]);
+  const [messages, setMessages] = useState4([]);
   const report = useCallback((message) => {
     setMessages((prev) => prev.includes(message) ? prev : [...prev, message].slice(-3));
   }, []);
   const clear = useCallback(() => setMessages([]), []);
-  return /* @__PURE__ */ jsxs10("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsx15(ReportContext.Provider, { value: report, children: /* @__PURE__ */ jsx15(WidgetErrorBoundary, { title, resetKey, onReset: clear, children }) }),
-    messages.length > 0 && /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs5("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ jsx10(ReportContext.Provider, { value: report, children: /* @__PURE__ */ jsx10(WidgetErrorBoundary, { title, resetKey, onReset: clear, children }) }),
+    messages.length > 0 && /* @__PURE__ */ jsxs5(
       "div",
       {
         role: "status",
@@ -2912,8 +2188,8 @@ function WidgetContainment({ title, resetKey, children }) {
           alignItems: "center"
         },
         children: [
-          /* @__PURE__ */ jsx15("span", { style: { flex: 1, wordBreak: "break-word" }, children: messages.join(" \xB7 ") }),
-          /* @__PURE__ */ jsx15("button", { type: "button", "aria-label": "Dismiss", onClick: clear, style: { cursor: "pointer" }, children: "\xD7" })
+          /* @__PURE__ */ jsx10("span", { style: { flex: 1, wordBreak: "break-word" }, children: messages.join(" \xB7 ") }),
+          /* @__PURE__ */ jsx10("button", { type: "button", "aria-label": "Dismiss", onClick: clear, style: { cursor: "pointer" }, children: "\xD7" })
         ]
       }
     )
@@ -2921,27 +2197,31 @@ function WidgetContainment({ title, resetKey, children }) {
 }
 
 // src/connected-widget.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function ConnectedWidget(props) {
   const { widget } = props;
   const registry = props.registry ?? defaultWidgetRegistry();
   const resetKey = JSON.stringify([widget.type, widget.options ?? null, widget.datasource ?? null]);
-  return /* @__PURE__ */ jsx16(WidgetContainment, { title: optString12(widget.options, "title"), resetKey, children: /* @__PURE__ */ jsx16(ConnectedWidgetBody, { ...props, registry }) });
+  return /* @__PURE__ */ jsx11(WidgetContainment, { title: optString7(widget.options, "title"), resetKey, children: /* @__PURE__ */ jsx11(ConnectedWidgetBody, { ...props, registry }) });
 }
-function ConnectedWidgetBody({ widget, hub, registry, actions, initialSamples }) {
+function ConnectedWidgetBody({ widget, hub, registry, actions, initialSamples, initialSamplesAsOf, onReconnect }) {
   const unresolved = widget.type === UNKNOWN_WIDGET_TYPE;
   const descriptor = unresolved ? void 0 : registry.descriptor(widget.type);
   const implementation = unresolved ? void 0 : registry.implementation(widget.type);
   const readsDatasource = descriptor !== void 0 && descriptor.datasource.mode !== "none";
   const availability = useDatasourceAvailability(hub, readsDatasource ? widget.datasource : void 0);
+  const supported = useDatasourceSupported(hub, readsDatasource ? widget.datasource : void 0);
+  if (!supported) {
+    return /* @__PURE__ */ jsx11(WidgetNotForCustomerUsersFrame, { widget });
+  }
   if (availability === "unavailable") {
-    return /* @__PURE__ */ jsx16(WidgetUnavailableFrame, { widget });
+    return /* @__PURE__ */ jsx11(WidgetUnavailableFrame, { widget });
   }
   if (widget.type === UNKNOWN_WIDGET_TYPE) {
-    return /* @__PURE__ */ jsx16(UnresolvedWidgetFrame, { storedType: widget.raw.type, reason: widget.reason });
+    return /* @__PURE__ */ jsx11(UnresolvedWidgetFrame, { storedType: widget.raw.type, reason: widget.reason });
   }
   if (!descriptor || !implementation) {
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx11(
       UnresolvedWidgetFrame,
       {
         storedType: widget.type,
@@ -2949,7 +2229,7 @@ function ConnectedWidgetBody({ widget, hub, registry, actions, initialSamples })
       }
     );
   }
-  return /* @__PURE__ */ jsx16(HostScope, { descriptor, actions, children: (hostActions) => /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx11(HostScope, { descriptor, actions, children: (hostActions) => /* @__PURE__ */ jsx11(
     ChannelBody,
     {
       widget,
@@ -2957,183 +2237,205 @@ function ConnectedWidgetBody({ widget, hub, registry, actions, initialSamples })
       descriptor,
       Component: implementation.component,
       actions: hostActions,
-      initialSamples
+      initialSamples,
+      initialSamplesAsOf,
+      onReconnect
     }
   ) });
 }
+function useDatasourceSupported(hub, datasource) {
+  const key = datasource ? JSON.stringify(datasource) : null;
+  const [refused, setRefused] = useState5(null);
+  useEffect3(() => {
+    if (!datasource || !hub.isDatasourceSupported) return;
+    let cancelled = false;
+    hub.isDatasourceSupported(datasource).then(
+      (ok) => {
+        if (!cancelled) setRefused(ok ? null : key);
+      },
+      () => {
+        if (!cancelled) setRefused(null);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [hub, key]);
+  return refused === null || refused !== key;
+}
 function HostScope({
   descriptor,
   actions,
   children
 }) {
   const report = useReportRejection();
-  const select = useWidgetSelect3();
+  const select = useWidgetSelect();
   const candidates = useWidgetCandidates();
-  const narrowed = useMemo5(() => narrowActions(actions, descriptor, report), [actions, descriptor, report]);
-  const narrowedSelect = useMemo5(() => narrowSelect(select, descriptor), [select, descriptor]);
-  const narrowedCandidates = useMemo5(
+  const narrowed = useMemo4(() => narrowActions(actions, descriptor, report), [actions, descriptor, report]);
+  const narrowedSelect = useMemo4(() => narrowSelect(select, descriptor), [select, descriptor]);
+  const narrowedCandidates = useMemo4(
     () => narrowCandidates(candidates, descriptor, report),
     [candidates, descriptor, report]
   );
-  return /* @__PURE__ */ jsx16(WidgetSelectProvider, { select: narrowedSelect, children: /* @__PURE__ */ jsx16(WidgetCandidatesProvider, { candidates: narrowedCandidates, children: children(narrowed) }) });
+  return /* @__PURE__ */ jsx11(WidgetSelectProvider, { select: narrowedSelect, children: /* @__PURE__ */ jsx11(WidgetCandidatesProvider, { candidates: narrowedCandidates, children: children(narrowed) }) });
 }
 function ChannelBody(props) {
   switch (props.descriptor.channel) {
     case "alarm":
-      return /* @__PURE__ */ jsx16(AlarmConnectedWidget, { ...props });
+      return /* @__PURE__ */ jsx11(AlarmConnectedWidget, { ...props });
     case "control":
-      return /* @__PURE__ */ jsx16(ControlConnectedWidget, { ...props });
+      return /* @__PURE__ */ jsx11(ControlConnectedWidget, { ...props });
     case "location":
-      return /* @__PURE__ */ jsx16(LocationConnectedWidget, { ...props });
+      return /* @__PURE__ */ jsx11(LocationConnectedWidget, { ...props });
     case "aggregate":
-      return /* @__PURE__ */ jsx16(AggregateConnectedWidget, { ...props });
+      return /* @__PURE__ */ jsx11(AggregateConnectedWidget, { ...props });
     case "selection":
     case "none":
-      return /* @__PURE__ */ jsx16(StaticConnectedWidget, { ...props });
+      return /* @__PURE__ */ jsx11(StaticConnectedWidget, { ...props });
     case "measurement":
-      return /* @__PURE__ */ jsx16(MeasurementConnectedWidget, { ...props });
+      return /* @__PURE__ */ jsx11(MeasurementConnectedWidget, { ...props });
   }
 }
 function StaticConnectedWidget({ widget, Component: Component2, actions }) {
-  return /* @__PURE__ */ jsx16(Component2, { widget, data: null, actions });
+  return /* @__PURE__ */ jsx11(Component2, { widget, data: null, actions });
 }
-var FleetFeed = lazyChunk(() => import("./chunks/fleet-feed-FK4ZMKIK.js")).component("default");
+var FleetFeed = lazyChunk(() => import("./chunks/fleet-feed-5QGDLOV5.js")).component("default");
 function MeasurementConnectedWidget(props) {
   const { widget, hub, descriptor, Component: Component2, actions } = props;
   const members = membersMode(descriptor, widget);
   if (members || widget.datasource?.kind === "anchor") {
-    return /* @__PURE__ */ jsx16(FleetFeed, { hub, widget, descriptor, Component: Component2, actions, ErrorFrame: WidgetErrorFrame, refuse: !members });
+    return /* @__PURE__ */ jsx11(FleetFeed, { hub, widget, descriptor, Component: Component2, actions, ErrorFrame: WidgetErrorFrame, refuse: !members });
   }
-  return /* @__PURE__ */ jsx16(StreamConnectedWidget, { ...props });
+  return /* @__PURE__ */ jsx11(StreamConnectedWidget, { ...props });
 }
-function StreamConnectedWidget({ widget, hub, descriptor, Component: Component2, actions, initialSamples }) {
+function StreamConnectedWidget({ widget, hub, descriptor, Component: Component2, actions, initialSamples, initialSamplesAsOf, onReconnect }) {
   const range = useWidgetTimeRange2();
-  const now = useMemo5(() => hub.now ? () => hub.now() : Date.now, [hub]);
+  const now = useMemo4(() => hub.now ? () => hub.now() : Date.now, [hub]);
   const data = useMeasurementStream(hub, widget.datasource, {
     window: measurementWindow(descriptor, widget),
     windowSeconds: measurementSpan(descriptor, widget, range?.spanSeconds),
     pausedAt: range?.paused ? range.pausedAt : void 0,
     now,
-    initialSamples
+    initialSamples,
+    initialSamplesAsOf,
+    onReconnect
   });
-  const freshness = useMemo5(() => {
+  const freshness = useMemo4(() => {
     if (descriptor.freshness !== true) return void 0;
-    const pinned = optString12(widget.options, "measurement");
+    const pinned = optString7(widget.options, "measurement");
     const names = pinned ? [pinned] : widget.datasource?.measurements;
     return {
       at: newestSampleTime(data.latest, names),
       staleAfterSeconds: resolveStaleAfterSeconds(widget.options)
     };
   }, [descriptor, widget.options, widget.datasource, data.latest]);
-  if (data.error) return /* @__PURE__ */ jsx16(WidgetErrorFrame, { widget, error: data.error });
-  return /* @__PURE__ */ jsx16(WidgetFreshnessProvider, { freshness, children: /* @__PURE__ */ jsx16(Component2, { widget, data, actions }) });
+  if (data.error) return /* @__PURE__ */ jsx11(WidgetErrorFrame, { widget, error: data.error });
+  return /* @__PURE__ */ jsx11(WidgetFreshnessProvider, { freshness, children: /* @__PURE__ */ jsx11(Component2, { widget, data, actions }) });
 }
-var AggregateFeed = lazyChunk(() => import("./chunks/aggregate-feed-6ZYKOQOB.js")).component("default");
+var AggregateFeed = lazyChunk(() => import("./chunks/aggregate-feed-BD3CHNFU.js")).component("default");
 function AggregateConnectedWidget({ widget, hub, descriptor, Component: Component2, actions }) {
   const props = { hub, widget, descriptor, Component: Component2, actions, ErrorFrame: WidgetErrorFrame };
-  return widget.datasource?.kind === "anchor" ? /* @__PURE__ */ jsx16(FleetFeed, { ...props, refuse: true }) : /* @__PURE__ */ jsx16(AggregateFeed, { ...props });
+  return widget.datasource?.kind === "anchor" ? /* @__PURE__ */ jsx11(FleetFeed, { ...props, refuse: true }) : /* @__PURE__ */ jsx11(AggregateFeed, { ...props });
 }
 function AlarmConnectedWidget({ widget, hub, descriptor, Component: Component2, actions }) {
   const range = useWidgetTimeRange2();
   const live = useAlarmStream(hub, alarmSubscription(descriptor, widget));
   const data = useHeld(live, range?.paused === true, (s) => !s.loading);
   if (data.error && data.alarms.length === 0 && data.total === 0) {
-    return /* @__PURE__ */ jsx16(WidgetErrorFrame, { widget, error: data.error });
+    return /* @__PURE__ */ jsx11(WidgetErrorFrame, { widget, error: data.error });
   }
-  return /* @__PURE__ */ jsx16(Component2, { widget, data, actions });
+  return /* @__PURE__ */ jsx11(Component2, { widget, data, actions });
 }
 function ControlConnectedWidget({ widget, hub, descriptor, Component: Component2, actions }) {
   const data = useCommandStream(hub, commandSubscription(descriptor, widget));
-  return /* @__PURE__ */ jsx16(Component2, { widget, data, actions });
+  return /* @__PURE__ */ jsx11(Component2, { widget, data, actions });
 }
 function LocationConnectedWidget({ widget, hub, Component: Component2, actions }) {
   const range = useWidgetTimeRange2();
   const live = useLocationStream(hub, { datasource: widget.datasource });
   const data = useHeld(live, range?.paused === true, (s) => !s.loading);
   if (data.error && data.locations.length === 0) {
-    return /* @__PURE__ */ jsx16(WidgetErrorFrame, { widget, error: data.error });
+    return /* @__PURE__ */ jsx11(WidgetErrorFrame, { widget, error: data.error });
   }
-  return /* @__PURE__ */ jsx16(Component2, { widget, data, actions });
+  return /* @__PURE__ */ jsx11(Component2, { widget, data, actions });
 }
+var STATE_STYLE = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 4,
+  width: "100%",
+  height: "100%",
+  padding: 12,
+  boxSizing: "border-box",
+  textAlign: "center",
+  color: "hsl(var(--muted-foreground))"
+};
 function UnresolvedWidgetFrame({
   storedType: stored,
   reason
 }) {
   const storedType = typeof stored === "string" ? stored : "";
   const heading = (reason?.code ?? "unregistered") === "unregistered" ? "This widget needs a newer viewer" : "This widget cannot be shown here";
-  return /* @__PURE__ */ jsx16(WidgetFrame13, { children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx11(WidgetFrame8, { children: /* @__PURE__ */ jsxs6(
     "div",
     {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 4,
-        width: "100%",
-        height: "100%",
-        padding: 12,
-        boxSizing: "border-box",
-        textAlign: "center",
-        color: "hsl(var(--muted-foreground))"
-      },
+      style: STATE_STYLE,
       children: [
-        /* @__PURE__ */ jsx16("div", { style: { fontSize: 13, fontWeight: 600 }, children: heading }),
-        storedType && !reason?.message.includes(storedType) && /* @__PURE__ */ jsxs11("div", { style: { fontSize: 11, opacity: 0.8 }, children: [
+        /* @__PURE__ */ jsx11("div", { style: { fontSize: 13, fontWeight: 600 }, children: heading }),
+        storedType && !reason?.message.includes(storedType) && /* @__PURE__ */ jsxs6("div", { style: { fontSize: 11, opacity: 0.8 }, children: [
           "Widget type: ",
           storedType
         ] }),
-        reason && /* @__PURE__ */ jsx16("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: reason.message })
+        reason && /* @__PURE__ */ jsx11("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: reason.message })
       ]
     }
   ) });
 }
+function WidgetForbiddenFrame({ widget }) {
+  return /* @__PURE__ */ jsx11(WidgetFrame8, { title: optString7(widget.options, "title"), children: /* @__PURE__ */ jsxs6("div", { role: "status", style: STATE_STYLE, children: [
+    /* @__PURE__ */ jsx11("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: "\u2298" }),
+    /* @__PURE__ */ jsx11("div", { style: { fontSize: 13, fontWeight: 600 }, children: accessStrings().forbidden })
+  ] }) });
+}
 function WidgetUnavailableFrame({ widget }) {
-  return /* @__PURE__ */ jsx16(WidgetFrame13, { title: optString12(widget.options, "title"), children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx11(WidgetFrame8, { title: optString7(widget.options, "title"), children: /* @__PURE__ */ jsxs6(
     "div",
     {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 4,
-        width: "100%",
-        height: "100%",
-        padding: 12,
-        boxSizing: "border-box",
-        textAlign: "center",
-        color: "hsl(var(--muted-foreground))"
-      },
+      style: STATE_STYLE,
       children: [
-        /* @__PURE__ */ jsx16("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: "\u2298" }),
-        /* @__PURE__ */ jsx16("div", { style: { fontSize: 13, fontWeight: 600 }, children: "Device unavailable" }),
-        /* @__PURE__ */ jsx16("div", { style: { fontSize: 11, opacity: 0.8 }, children: "The bound device no longer exists." })
+        /* @__PURE__ */ jsx11("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: "\u2298" }),
+        /* @__PURE__ */ jsx11("div", { style: { fontSize: 13, fontWeight: 600 }, children: "Device unavailable" }),
+        /* @__PURE__ */ jsx11("div", { style: { fontSize: 11, opacity: 0.8 }, children: "The bound device no longer exists." })
+      ]
+    }
+  ) });
+}
+function WidgetNotForCustomerUsersFrame({ widget }) {
+  return /* @__PURE__ */ jsx11(WidgetFrame8, { title: optString7(widget.options, "title"), children: /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      role: "status",
+      style: STATE_STYLE,
+      children: [
+        /* @__PURE__ */ jsx11("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: "\u2298" }),
+        /* @__PURE__ */ jsx11("div", { style: { fontSize: 13, fontWeight: 600 }, children: "Not available for customer users" }),
+        /* @__PURE__ */ jsx11("div", { style: { fontSize: 11, opacity: 0.8 }, children: "This widget is bound to an area or an asset, which customer users cannot view." })
       ]
     }
   ) });
 }
 function WidgetErrorFrame({ widget, error }) {
-  return /* @__PURE__ */ jsx16(WidgetFrame13, { title: optString12(widget.options, "title"), children: /* @__PURE__ */ jsxs11(
+  if (isForbiddenError(error)) return /* @__PURE__ */ jsx11(WidgetForbiddenFrame, { widget });
+  return /* @__PURE__ */ jsx11(WidgetFrame8, { title: optString7(widget.options, "title"), children: /* @__PURE__ */ jsxs6(
     "div",
     {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 4,
-        width: "100%",
-        height: "100%",
-        padding: 12,
-        boxSizing: "border-box",
-        textAlign: "center",
-        color: "hsl(var(--muted-foreground))"
-      },
+      style: STATE_STYLE,
       children: [
-        /* @__PURE__ */ jsx16("div", { style: { fontSize: 20, lineHeight: 1 }, children: "\u26A0" }),
-        /* @__PURE__ */ jsx16("div", { style: { fontSize: 13, fontWeight: 600 }, children: "Data unavailable" }),
-        /* @__PURE__ */ jsx16("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: String(error) })
+        /* @__PURE__ */ jsx11("div", { style: { fontSize: 20, lineHeight: 1 }, children: "\u26A0" }),
+        /* @__PURE__ */ jsx11("div", { style: { fontSize: 13, fontWeight: 600 }, children: "Data unavailable" }),
+        /* @__PURE__ */ jsx11("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: String(error) })
       ]
     }
   ) });
@@ -3147,7 +2449,7 @@ import {
   WidgetThemeRootProvider,
   WidgetTimeZoneProvider
 } from "@devicechain/widget-sdk";
-import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function DashboardRenderer({
   definition,
   hub,
@@ -3163,14 +2465,14 @@ function DashboardRenderer({
   density,
   timeRange
 }) {
-  const widgets = useMemo6(() => resolveWidgets(definition.widgets, bindings), [definition.widgets, bindings]);
+  const widgets = useMemo5(() => resolveWidgets(definition.widgets, bindings), [definition.widgets, bindings]);
   const registry = registryProp ?? defaultWidgetRegistry();
   const defaultSeconds = definition.timeRange?.defaultSeconds;
-  const range = useMemo6(
+  const range = useMemo5(
     () => timeRange ?? initialTimeRange(defaultSeconds),
     [timeRange, defaultSeconds]
   );
-  const histories = useWidgetHistories(widgets, seedHistory, registry, range);
+  const { histories, reseed } = useWidgetHistories(widgets, seedHistory, registry, range);
   const { grid, background: bg, frame: canvasFrame } = definition.canvas;
   const effectiveSizing = sizing ?? definition.canvas.sizing;
   const effectiveDensity = density ?? definition.canvas.density ?? DEFAULT_CANVAS_DENSITY;
@@ -3178,7 +2480,7 @@ function DashboardRenderer({
   const { canvas } = definition;
   const shapeKey = useCallback2((width) => JSON.stringify(layoutShape(canvas, width, scale)), [canvas, scale]);
   const [boardRef, containerWidth] = useContainerWidth(shapeKey);
-  const layout = useMemo6(
+  const layout = useMemo5(
     () => effectiveLayout(definition, containerWidth, {
       scale,
       limitsOf: (w) => w.type === UNKNOWN_WIDGET_TYPE2 ? void 0 : spanLimitsOfLayout(registry.descriptor(w.type)?.layout)
@@ -3187,7 +2489,7 @@ function DashboardRenderer({
   );
   const { breakpoint, columns } = layout;
   const lengths = gridCss(grid, columns);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       ref: boardRef,
@@ -3196,8 +2498,8 @@ function DashboardRenderer({
       "data-time-paused": range.paused ? "" : void 0,
       style: { ...sizingStyle(effectiveSizing, bg), ...tokenStyle(scale) },
       children: [
-        /* @__PURE__ */ jsx17(WidgetTokenStyles, {}),
-        /* @__PURE__ */ jsx17(WidgetDensityProvider, { scale, children: /* @__PURE__ */ jsx17(WidgetThemeRootProvider, { root: themeRoot, children: /* @__PURE__ */ jsx17(WidgetTimeZoneProvider, { timeZone, children: /* @__PURE__ */ jsx17(WidgetTimeRangeProvider, { range, children: /* @__PURE__ */ jsx17(WidgetSelectProvider2, { select, children: /* @__PURE__ */ jsx17(WidgetCandidatesProvider2, { candidates, children: /* @__PURE__ */ jsx17("div", { style: { padding: lengths.padding }, children: /* @__PURE__ */ jsx17("div", { style: { containerType: "inline-size" }, children: /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx12(WidgetTokenStyles, {}),
+        /* @__PURE__ */ jsx12(WidgetDensityProvider, { scale, children: /* @__PURE__ */ jsx12(WidgetThemeRootProvider, { root: themeRoot, children: /* @__PURE__ */ jsx12(WidgetTimeZoneProvider, { timeZone, children: /* @__PURE__ */ jsx12(WidgetTimeRangeProvider, { range, children: /* @__PURE__ */ jsx12(WidgetSelectProvider2, { select, children: /* @__PURE__ */ jsx12(WidgetCandidatesProvider2, { candidates, children: /* @__PURE__ */ jsx12("div", { style: { padding: lengths.padding }, children: /* @__PURE__ */ jsx12("div", { style: { containerType: "inline-size" }, children: /* @__PURE__ */ jsx12(
           "div",
           {
             "data-grid": "",
@@ -3210,7 +2512,7 @@ function DashboardRenderer({
               width: "100%",
               ...{ "--dc-cell": lengths.cell }
             },
-            children: /* @__PURE__ */ jsx17(
+            children: /* @__PURE__ */ jsx12(
               PlacedWidgets,
               {
                 widgets,
@@ -3218,14 +2520,16 @@ function DashboardRenderer({
                 columns,
                 grid: layout.grid,
                 lengths,
-                render: (widget) => /* @__PURE__ */ jsx17(WidgetFrameStyleProvider, { frame: resolveFrame(canvasFrame, widgetFrame(widget)), children: /* @__PURE__ */ jsx17(WidgetSubjectProvider, { label: widgetSubjectLabel(widget), children: /* @__PURE__ */ jsx17(
+                render: (widget) => /* @__PURE__ */ jsx12(WidgetFrameStyleProvider, { frame: resolveFrame(canvasFrame, widgetFrame(widget)), children: /* @__PURE__ */ jsx12(WidgetSubjectProvider, { label: widgetSubjectLabel(widget), children: /* @__PURE__ */ jsx12(
                   ConnectedWidget,
                   {
                     widget,
                     hub,
                     registry,
                     actions,
-                    initialSamples: histories[widget.id]
+                    initialSamples: histories[widget.id]?.samples,
+                    initialSamplesAsOf: histories[widget.id]?.asOf,
+                    onReconnect: () => reseed(widget.id)
                   }
                 ) }) })
               }
@@ -3299,20 +2603,20 @@ function PlacedWidgets({
   const relative = (host) => (dependents.get(host) ?? []).map(({ widget, placement }) => (
     // data-widget names the box a widget occupies, so a check over the rendered board (the
     // readability gate in apps/board-replay) can find it.
-    /* @__PURE__ */ jsxs12("div", { "data-widget": widget.id, "data-host": host, style: relativeBoxStyle(placement, lengths), children: [
+    /* @__PURE__ */ jsxs7("div", { "data-widget": widget.id, "data-host": host, style: relativeBoxStyle(placement, lengths), children: [
       render(widget),
       relative(widget.id)
     ] }, widget.id)
   ));
-  return /* @__PURE__ */ jsx17(Fragment6, { children: placed.map(({ widget, placement }) => {
+  return /* @__PURE__ */ jsx12(Fragment2, { children: placed.map(({ widget, placement }) => {
     if (placement.mode !== "grid") return null;
     const style = gridItemStyle(grid.get(widget.id) ?? placement, columns);
-    return /* @__PURE__ */ jsxs12(Fragment5, { children: [
-      /* @__PURE__ */ jsx17("div", { "data-widget": widget.id, style, children: render(widget) }),
+    return /* @__PURE__ */ jsxs7(Fragment, { children: [
+      /* @__PURE__ */ jsx12("div", { "data-widget": widget.id, style, children: render(widget) }),
       dependents.has(widget.id) ? (
         // The host's area again, as a layer for its relative widgets to be positioned in.
         // It takes no pointer events itself, so the host underneath stays usable.
-        /* @__PURE__ */ jsx17("div", { style: { ...style, position: "relative", pointerEvents: "none", zIndex: RELATIVE_Z }, children: relative(widget.id) })
+        /* @__PURE__ */ jsx12("div", { style: { ...style, position: "relative", pointerEvents: "none", zIndex: RELATIVE_Z }, children: relative(widget.id) })
       ) : null
     ] }, widget.id);
   }) });
@@ -3342,9 +2646,9 @@ function widgetSubjectLabel(widget) {
   return void 0;
 }
 function useContainerWidth(keyOf) {
-  const ref = useRef3(null);
-  const [width, setWidth] = useState8(0);
-  const keyOfRef = useRef3(keyOf);
+  const ref = useRef2(null);
+  const [width, setWidth] = useState6(0);
+  const keyOfRef = useRef2(keyOf);
   const measure = useCallback2(() => {
     const el = ref.current;
     if (!el) return;
@@ -3364,6 +2668,7 @@ function useContainerWidth(keyOf) {
   }, [measure]);
   return [ref, width];
 }
+var RESEED_RETRY_MS = 3e4;
 function seedKey(widget, registry) {
   if (widget.type === UNKNOWN_WIDGET_TYPE2 || registry.descriptor(widget.type)?.channel !== "measurement") {
     return void 0;
@@ -3371,15 +2676,21 @@ function seedKey(widget, registry) {
   return JSON.stringify(widget.datasource ?? null);
 }
 function useWidgetHistories(widgets, enabled, registry, range) {
-  const [seeds, setSeeds] = useState8({});
-  const requested = useRef3({});
-  const mounted = useRef3(true);
-  useEffect5(() => {
+  const [seeds, setSeeds] = useState6({});
+  const requested = useRef2({});
+  const reseeds = useRef2({});
+  const [reseedTick, bumpReseeds] = useState6(0);
+  const mounted = useRef2(true);
+  useEffect4(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
     };
   }, []);
+  const reseed = useCallback2((id) => {
+    reseeds.current[id] = (reseeds.current[id] ?? 0) + 1;
+    bumpReseeds((n) => n + 1);
+  }, []);
   const wanted = widgets.flatMap((w) => {
     const key = seedKey(w, registry);
     if (key === void 0) return [];
@@ -3388,7 +2699,7 @@ function useWidgetHistories(widgets, enabled, registry, range) {
     return [[w.id, key, span]];
   });
   const wantedKey = JSON.stringify(wanted);
-  useEffect5(() => {
+  useEffect4(() => {
     if (!enabled) {
       requested.current = {};
       setSeeds({});
@@ -3398,28 +2709,42 @@ function useWidgetHistories(widgets, enabled, registry, range) {
     const byId = new Map(widgets.map((w) => [w.id, w]));
     const next = {};
     for (const [id, key, span] of wanted) {
-      const asked = `${key}|${span ?? ""}`;
+      const base = `${key}|${span ?? ""}|`;
+      const n = reseeds.current[id] ?? 0;
+      const asked = `${base}${range.paused && n ? "p" : n}`;
+      const previous = requested.current[id];
+      if (previous === asked || range.paused && previous?.startsWith(base)) {
+        next[id] = previous;
+        continue;
+      }
       next[id] = asked;
-      if (requested.current[id] === asked) continue;
       const widget = byId.get(id);
-      if (!widget) continue;
-      const historyWindow = span === null ? defaultHistoryWindow() : historyWindowFor(span, range.paused && range.pausedAt !== void 0 ? range.pausedAt : now);
-      void fetchWidgetHistory(widget, historyWindow).then((samples) => {
-        if (!mounted.current || requested.current[id] !== asked) return;
-        setSeeds((prev) => ({ ...prev, [id]: { key, samples } }));
-      });
+      if (widget?.datasource?.kind !== "device") continue;
+      const end = range.paused && range.pausedAt !== void 0 ? range.pausedAt : now;
+      const historyWindow = span === null ? defaultHistoryWindow() : historyWindowFor(span, end);
+      const current = () => mounted.current && requested.current[id] === asked;
+      void fetchWidgetHistory(widget, historyWindow, { rethrow: n > 0 }).then(
+        (samples) => {
+          if (!current()) return;
+          setSeeds((prev) => ({ ...prev, [id]: { key, samples, asOf: end } }));
+        },
+        () => {
+          setTimeout(() => current() && reseed(id), RESEED_RETRY_MS);
+        }
+      );
     }
     requested.current = next;
-  }, [wantedKey, enabled]);
-  return useMemo6(() => {
+  }, [wantedKey, enabled, reseedTick, range.paused]);
+  const histories = useMemo5(() => {
     const out = {};
     if (!enabled) return out;
     for (const w of widgets) {
       const seed = seeds[w.id];
-      out[w.id] = seed && seed.key === seedKey(w, registry) ? seed.samples : void 0;
+      out[w.id] = seed && seed.key === seedKey(w, registry) ? seed : void 0;
     }
     return out;
   }, [widgets, seeds, enabled, registry]);
+  return { histories, reseed };
 }
 
 // src/time-range-bar.tsx
@@ -3434,17 +2759,17 @@ import {
   spanLabel as spanLabel2,
   withSpan
 } from "@devicechain/dashboards";
-import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo7, useRef as useRef4, useState as useState9 } from "react";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo6, useRef as useRef3, useState as useState7 } from "react";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function useBoardTimeRange(defaultSeconds, link = {}) {
-  const [state, setState] = useState9(() => initialTimeRange2(defaultSeconds, link));
-  const lastDefault = useRef4(defaultSeconds);
-  useEffect6(() => {
+  const [state, setState] = useState7(() => initialTimeRange2(defaultSeconds, link));
+  const lastDefault = useRef3(defaultSeconds);
+  useEffect5(() => {
     if (lastDefault.current === defaultSeconds) return;
     lastDefault.current = defaultSeconds;
     setState((s) => withSpan(s, isValidSpanSeconds2(defaultSeconds) ? defaultSeconds : DEFAULT_TIME_RANGE_SECONDS));
   }, [defaultSeconds]);
-  const controls = useMemo7(
+  const controls = useMemo6(
     () => ({
       setSpan: (spanSeconds) => setState((s) => withSpan(s, spanSeconds)),
       pause: () => setState((s) => pauseRange(s, Date.now())),
@@ -3477,7 +2802,7 @@ function PausedIndicator({
   labels = DEFAULT_TIME_RANGE_LABELS
 }) {
   const time = pausedAt === void 0 ? void 0 : new Date(pausedAt).toLocaleTimeString();
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs8(
     "span",
     {
       role: "status",
@@ -3498,10 +2823,10 @@ function PausedIndicator({
         borderRadius: 4
       },
       children: [
-        /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", children: "\u23F8" }),
+        /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", children: "\u23F8" }),
         labels.paused,
-        time ? /* @__PURE__ */ jsx18("span", { style: { fontWeight: 400, textTransform: "none" }, children: ` ${time}` }) : null,
-        /* @__PURE__ */ jsx18("span", { "data-time-range-actions-live": "", style: { fontWeight: 400, textTransform: "none" }, children: `\xB7 ${labels.actionsLive}` })
+        time ? /* @__PURE__ */ jsx13("span", { style: { fontWeight: 400, textTransform: "none" }, children: ` ${time}` }) : null,
+        /* @__PURE__ */ jsx13("span", { "data-time-range-actions-live": "", style: { fontWeight: 400, textTransform: "none" }, children: `\xB7 ${labels.actionsLive}` })
       ]
     }
   );
@@ -3513,7 +2838,7 @@ function TimeRangeBar({
 }) {
   const preset = presetIdOf(state.spanSeconds);
   const onPause = useCallback3(() => state.paused ? controls.resume() : controls.pause(), [state.paused, controls]);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       "data-time-range-bar": "",
@@ -3521,8 +2846,8 @@ function TimeRangeBar({
       "aria-label": labels.range,
       style: { display: "inline-flex", alignItems: "center", gap: 6, flexWrap: "wrap" },
       children: [
-        preset === void 0 ? /* @__PURE__ */ jsx18("button", { type: "button", "aria-pressed": "true", "data-range": spanLabel2(state.spanSeconds), style: button(true), children: spanLabel2(state.spanSeconds) }) : null,
-        TIME_RANGE_PRESETS.map((p) => /* @__PURE__ */ jsx18(
+        preset === void 0 ? /* @__PURE__ */ jsx13("button", { type: "button", "aria-pressed": "true", "data-range": spanLabel2(state.spanSeconds), style: button(true), children: spanLabel2(state.spanSeconds) }) : null,
+        TIME_RANGE_PRESETS.map((p) => /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
@@ -3534,13 +2859,23 @@ function TimeRangeBar({
           },
           p.id
         )),
-        /* @__PURE__ */ jsx18("button", { type: "button", "aria-pressed": state.paused, "data-time-range-pause": "", onClick: onPause, style: button(state.paused), children: state.paused ? labels.resume : labels.pause }),
-        state.paused ? /* @__PURE__ */ jsx18(PausedIndicator, { pausedAt: state.pausedAt, labels }) : null
+        /* @__PURE__ */ jsx13("button", { type: "button", "aria-pressed": state.paused, "data-time-range-pause": "", onClick: onPause, style: button(state.paused), children: state.paused ? labels.resume : labels.pause }),
+        state.paused ? /* @__PURE__ */ jsx13(PausedIndicator, { pausedAt: state.pausedAt, labels }) : null
       ]
     }
   );
 }
 
+// src/preload.ts
+async function preloadWidgets(registry, types) {
+  const loads = [];
+  for (const type of new Set(types)) {
+    const preload = registry.implementation(type)?.component?.preload;
+    if (typeof preload === "function") loads.push(preload().catch(() => void 0));
+  }
+  await Promise.all(loads);
+}
+
 // src/registry.ts
 var entries = Object.entries(builtinWidgetDescriptors);
 var WIDGET_CHANNEL = Object.freeze(
@@ -3551,7 +2886,7 @@ var WIDGET_BINDS_DATASOURCE = Object.freeze(
 );
 
 // src/index.ts
-import { pickSample as pickSample3, optBoolean as optBoolean5 } from "@devicechain/widget-sdk";
+import { pickSample as pickSample3, optBoolean as optBoolean3 } from "@devicechain/widget-sdk";
 
 // src/options.ts
 import {
@@ -3625,12 +2960,12 @@ function stripUnknownWidgetOptions(widget, catalog) {
 
 // src/index.ts
 import {
-  WidgetFrame as WidgetFrame14,
+  WidgetFrame as WidgetFrame9,
   WidgetSubjectProvider as WidgetSubjectProvider2,
   WidgetSelectProvider as WidgetSelectProvider3,
-  useWidgetSelect as useWidgetSelect4,
+  useWidgetSelect as useWidgetSelect2,
   WidgetTimeZoneProvider as WidgetTimeZoneProvider2,
-  useWidgetTimeZone as useWidgetTimeZone6,
+  useWidgetTimeZone as useWidgetTimeZone3,
   WidgetThemeRootProvider as WidgetThemeRootProvider2,
   useWidgetThemeRoot,
   WidgetCandidatesProvider as WidgetCandidatesProvider3,
@@ -3638,8 +2973,8 @@ import {
   useFlashOnChange as useFlashOnChange3,
   flashTextStyle as flashTextStyle2,
   flashBackgroundStyle as flashBackgroundStyle2,
-  FlashValue as FlashValue3,
-  fitValueFont as fitValueFont3,
+  FlashValue,
+  fitValueFont as fitValueFont2,
   useMeasurementStream as useMeasurementStream2,
   useAlarmStream as useAlarmStream2,
   useCommandStream as useCommandStream2,
@@ -3650,8 +2985,8 @@ import {
   HubConnectionBadge,
   useResolvedBindings,
   useSlotCandidates,
-  useCandidates as useCandidates2,
-  css as css12
+  useCandidates,
+  css as css6
 } from "@devicechain/widget-sdk";
 import {
   EChart as EChart3,
@@ -3670,7 +3005,7 @@ export {
   DashboardRenderer,
   EChart3 as EChart,
   EntitySelector,
-  FlashValue3 as FlashValue,
+  FlashValue,
   Gauge,
   HubConnectionBadge,
   Image,
@@ -3687,7 +3022,7 @@ export {
   WIDGET_CHANNEL,
   WIDGET_OPTIONS,
   WidgetCandidatesProvider3 as WidgetCandidatesProvider,
-  WidgetFrame14 as WidgetFrame,
+  WidgetFrame9 as WidgetFrame,
   WidgetSelectProvider3 as WidgetSelectProvider,
   WidgetSubjectProvider2 as WidgetSubjectProvider,
   WidgetThemeRootProvider2 as WidgetThemeRootProvider,
@@ -3702,11 +3037,11 @@ export {
   commandStatusColor,
   commandStatusLabel,
   createBuiltinWidgetRegistry,
-  css12 as css,
+  css6 as css,
   defaultValues,
   describePosition,
   enumOptionValues,
-  fitValueFont3 as fitValueFont,
+  fitValueFont2 as fitValueFont,
   flashBackgroundStyle2 as flashBackgroundStyle,
   flashTextStyle2 as flashTextStyle,
   formatDegrees,
@@ -3716,10 +3051,11 @@ export {
   landStyleFrom,
   loadLandStyle,
   numberOptionSpec,
-  optBoolean5 as optBoolean,
+  optBoolean3 as optBoolean,
   parseParameterSchema,
   pickSample3 as pickSample,
   placeable,
+  preloadWidgets,
   projectToPanel,
   rasterStyleFor,
   resolveChartTheme,
@@ -3730,7 +3066,7 @@ export {
   stripUnknownOptions,
   useAlarmStream2 as useAlarmStream,
   useBoardTimeRange,
-  useCandidates2 as useCandidates,
+  useCandidates,
   useChartTheme3 as useChartTheme,
   useCommandStream2 as useCommandStream,
   useDashboardHub,
@@ -3744,9 +3080,9 @@ export {
   useSlotCandidates,
   useTenantBasemap,
   useWidgetCandidates2 as useWidgetCandidates,
-  useWidgetSelect4 as useWidgetSelect,
+  useWidgetSelect2 as useWidgetSelect,
   useWidgetThemeRoot,
-  useWidgetTimeZone6 as useWidgetTimeZone,
+  useWidgetTimeZone3 as useWidgetTimeZone,
   validateDefinitionOptions,
   validateParams,
   validateWidgetOptions,