@devicechain/widgets 0.21.1 → 0.22.0

package/dist/index.js

@@ -1,76 +1,91 @@
+import {
+  buildPayload,
+  commandStatusColor,
+  commandStatusLabel,
+  defaultValues,
+  isScalar,
+  isTerminalStatus,
+  parseBool,
+  parseParameterSchema,
+  validateParams
+} from "./chunks/chunk-YPFB6DAL.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 {
-  activeBreakpoint,
+  anchorFraction,
+  DEFAULT_CANVAS_DENSITY,
   defaultHistoryWindow,
+  effectiveLayout,
+  historyWindowFor,
+  initialTimeRange,
   fetchWidgetHistory,
-  resolveWidgetBox,
+  layoutShape,
+  resolveFrame,
+  resolvePlacement,
   resolveWidgetDatasource,
+  spanLimitsOfLayout,
   UNKNOWN_WIDGET_TYPE as UNKNOWN_WIDGET_TYPE2
 } from "@devicechain/dashboards";
-import { useEffect as useEffect4, useMemo as useMemo5, useRef as useRef3, useState as useState6 } from "react";
+import {
+  densityScale,
+  tokenStyle,
+  WidgetDensityProvider,
+  WidgetFrameStyleProvider,
+  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";
 
 // src/connected-widget.tsx
 import {
   UNKNOWN_WIDGET_TYPE
 } from "@devicechain/dashboards";
-import { WidgetCandidatesProvider, WidgetSelectProvider } from "@devicechain/widget-sdk";
-import { useMemo as useMemo4 } from "react";
+import {
+  newestSampleTime,
+  resolveStaleAfterSeconds,
+  WidgetCandidatesProvider,
+  WidgetFreshnessProvider,
+  WidgetSelectProvider,
+  useWidgetTimeRange as useWidgetTimeRange2
+} from "@devicechain/widget-sdk";
+import { useMemo as useMemo5 } from "react";
 
-// src/binding-policy.ts
-import { optNumber, optString } from "@devicechain/widget-sdk";
-function numberValue(binding, options) {
-  if (!binding) return void 0;
-  let value;
-  if (typeof binding.const === "number") value = binding.const;
-  else if (binding.option !== void 0) value = optNumber(options, binding.option) ?? binding.default;
-  if (value === void 0) return void 0;
-  return binding.min !== void 0 ? Math.max(binding.min, value) : value;
-}
-function stringValue(binding, options) {
-  if (!binding || binding.option === void 0) return void 0;
-  return optString(options, binding.option) ?? binding.default;
-}
-function policy(descriptor) {
-  return descriptor.binding;
-}
-function measurementWindow(descriptor, widget) {
-  return numberValue(policy(descriptor).window, widget.options);
-}
-function parseAcknowledged(value) {
-  if (value === "true") return true;
-  if (value === "false") return false;
-  return void 0;
-}
-function alarmSubscription(descriptor, widget) {
-  const p = policy(descriptor);
-  return {
-    datasource: widget.datasource,
-    state: stringValue(p.state, widget.options),
-    severity: stringValue(p.severity, widget.options),
-    acknowledged: parseAcknowledged(stringValue(p.acknowledged, widget.options)),
-    pageSize: numberValue(p.pageSize, widget.options) ?? 1
-  };
-}
-function commandSubscription(descriptor, widget) {
-  return {
-    datasource: widget.datasource,
-    pageSize: numberValue(policy(descriptor).pageSize, widget.options) ?? 1
-  };
+// src/use-held.ts
+import { useState } from "react";
+function useHeld(value, hold, ready) {
+  const [held, setHeld] = useState(void 0);
+  if (!hold) {
+    if (held !== void 0) setHeld(void 0);
+    return value;
+  }
+  if (held === void 0 || ready(held.value) !== ready(value)) {
+    setHeld({ value });
+    return value;
+  }
+  return held.value;
 }
 
 // src/builtin-registry.ts
 import { createWidgetRegistry } from "@devicechain/widget-sdk";
 
-// src/widgets/alarm-count.tsx
-import {
-  css,
-  defineWidget,
-  optString as optString2,
-  useElementSize,
-  WidgetFrame
-} from "@devicechain/widget-sdk";
+// src/widgets/aggregate-lazy.tsx
+import { defineWidget } from "@devicechain/widget-sdk";
 
 // src/builtin-descriptors.ts
+import { SEVERITY_LEVELS } from "@devicechain/widget-sdk";
 import {
   createWidgetCatalog,
   defineWidgetDescriptor
@@ -92,7 +107,42 @@ var PRECISION = {
   max: 100,
   labelId: "widgetLabelPrecision",
   helpId: "widgetHintPrecision",
-  doc: "Decimal places to round displayed values to. Unset shows the raw value."
+  doc: "Decimal places to round displayed values to. Unset rounds to at most 3 decimals (4 significant digits under 1)."
+};
+var THRESHOLDS = {
+  kind: "list",
+  maxItems: 12,
+  labelId: "widgetLabelThresholds",
+  helpId: "widgetHintThresholds",
+  doc: "Severity bands over the value. Each entry starts a band at its value that runs to the next entry; below the first, and in a normal band, the widget keeps its own colour.",
+  item: {
+    value: {
+      kind: "number",
+      required: true,
+      labelId: "widgetLabelThresholdValue",
+      doc: "The value at which this band starts."
+    },
+    level: {
+      kind: "enum",
+      required: true,
+      values: SEVERITY_LEVELS,
+      labelId: "widgetLabelThresholdLevel",
+      valueLabelIds: {
+        normal: "widgetSeverityNormal",
+        warning: "widgetSeverityWarning",
+        minor: "widgetSeverityMinor",
+        major: "widgetSeverityMajor",
+        critical: "widgetSeverityCritical"
+      },
+      placeholderId: "widgetPlaceholderThresholdLevel",
+      doc: "The severity of this band. The theme decides the colour; normal has none."
+    },
+    label: {
+      kind: "string",
+      labelId: "widgetLabelThresholdLabel",
+      doc: "Text shown on the chart line for this threshold. Defaults to its value."
+    }
+  }
 };
 var FLASH_ON_CHANGE = {
   kind: "boolean",
@@ -108,11 +158,68 @@ var WINDOW = {
   helpId: "widgetHintWindow",
   doc: "Samples retained across ALL of the widget's measurements before the oldest are dropped. Bounds memory; only the chart draws them. Default 300."
 };
+var STALE_AFTER_SECONDS = {
+  kind: "number",
+  integer: true,
+  min: 1,
+  labelId: "widgetLabelStaleAfter",
+  helpId: "widgetHintStaleAfter",
+  doc: "Seconds after which the newest sample is called stale: the value is greyed out and badged. Unset shows the sample age only and never marks the widget stale."
+};
 var UNIT = {
   kind: "string",
   labelId: "widgetLabelUnit",
   doc: "Unit suffix shown beside the value."
 };
+var SCALE_MIN = {
+  kind: "number",
+  required: true,
+  labelId: "widgetLabelMin",
+  helpId: "widgetHintScaleMin",
+  doc: "Value at the empty end of the scale. Required: the widget does not guess a range."
+};
+var SCALE_MAX = {
+  kind: "number",
+  required: true,
+  labelId: "widgetLabelMax",
+  helpId: "widgetHintScaleMax",
+  doc: "Value at the full end of the scale. Required, and above min."
+};
+var CONTROL_COMMAND_NAME = {
+  kind: "string",
+  required: true,
+  labelId: "widgetCommandHeading",
+  helpId: "widgetCommandFieldHint",
+  control: "command-vocabulary",
+  doc: "Command key issued to the target device. Without it the control cannot send."
+};
+var CONTROL_COMMAND_LABEL = {
+  kind: "string",
+  labelId: "widgetCommandHeading",
+  helpId: "widgetCommandFieldHint",
+  control: "command-vocabulary",
+  doc: "Name of the control for assistive technology. Defaults to the command key."
+};
+var CONTROL_PARAMETER_SCHEMA = {
+  kind: "string",
+  format: "json",
+  labelId: "widgetCommandHeading",
+  helpId: "widgetCommandFieldHint",
+  control: "command-vocabulary",
+  doc: "The command's parameter descriptors, baked in as JSON at author time. Gives the control its range and its refusals."
+};
+var CONTROL_PARAMETER = {
+  kind: "string",
+  labelId: "widgetLabelParameter",
+  helpId: "widgetHintControlParameter",
+  doc: "Which parameter of the command this control sets. May be left blank when the command has exactly one parameter of the right type."
+};
+var MEASUREMENT = {
+  kind: "string",
+  labelId: "widgetLabelMeasurement",
+  helpId: "widgetHintMeasurement",
+  doc: "Which measurement to display. Defaults to the first the datasource selects."
+};
 var ALARM_STATE = {
   kind: "enum",
   values: ["ACTIVE", "CLEARED"],
@@ -149,28 +256,78 @@ var SELECTION_TARGET = {
 };
 var VERSION = "1.0.0";
 var ALL_SELECTORS = ["device", "anchor", "slot"];
+var ONE_DEVICE = ["device", "slot"];
 var NO_DATASOURCE = { mode: "none" };
 var ALARM_FILTERS = {
   state: { option: "state" },
   severity: { option: "severity" },
   acknowledged: { option: "acknowledged" }
 };
+var WINDOW_SECONDS = {
+  kind: "number",
+  integer: true,
+  min: 60,
+  max: 604800,
+  labelId: "widgetLabelWindowSeconds",
+  helpId: "widgetHintWindowSeconds",
+  doc: "Seconds of history the widget covers, back from now. Leave unset to follow the board\u2019s time range; set it to pin this widget to a fixed span that the viewer\u2019s range picker does not change. 60 to 604800."
+};
+var CATEGORY_SORT = {
+  kind: "enum",
+  values: ["none", "ascending", "descending"],
+  labelId: "widgetLabelSort",
+  valueLabelIds: { none: "widgetSortNone", ascending: "widgetSortAscending", descending: "widgetSortDescending" },
+  placeholderId: "widgetPlaceholderDefault",
+  doc: "Order of the categories. Default: as the data source lists them."
+};
+var FLEET_MEASUREMENT = {
+  kind: "string",
+  required: true,
+  labelId: "widgetLabelMeasurement",
+  doc: "The measurement column this entry applies to."
+};
+var FLEET_COLUMNS = {
+  kind: "list",
+  maxItems: 24,
+  labelId: "widgetLabelColumns",
+  helpId: "widgetHintColumns",
+  doc: "Heading, unit and precision per measurement column; a column with none shows its name.",
+  item: {
+    measurement: FLEET_MEASUREMENT,
+    label: { kind: "string", labelId: "widgetLabelColumnHeading", doc: "Column heading. Defaults to the measurement name." },
+    unit: { ...UNIT },
+    precision: { ...PRECISION }
+  }
+};
+var FLEET_THRESHOLDS = {
+  ...THRESHOLDS,
+  item: {
+    measurement: FLEET_MEASUREMENT,
+    ...THRESHOLDS.item
+  }
+};
 var builtinWidgetDescriptors = {
   "timeseries-chart": defineWidgetDescriptor({
     id: "timeseries-chart",
     version: VERSION,
     sdkApiVersion: 1,
-    optionsVersion: 1,
+    optionsVersion: 2,
     display: { title: "Timeseries chart", category: "Telemetry", titleId: "widgetTypeTimeseriesChart", categoryId: "widgetCategoryTelemetry" },
     channel: "measurement",
-    datasource: { mode: "required", selectors: ALL_SELECTORS },
-    binding: { window: { option: "window", min: 1 } },
+    datasource: { mode: "required", selectors: ONE_DEVICE },
+    binding: { windowSeconds: { option: "windowSeconds" } },
     options: {
       title: TITLE,
-      window: WINDOW
+      unit: UNIT,
+      precision: PRECISION,
+      thresholds: THRESHOLDS,
+      staleAfterSeconds: STALE_AFTER_SECONDS,
+      windowSeconds: WINDOW_SECONDS
     },
     defaults: { title: "Timeseries chart" },
-    interactions: {}
+    interactions: {},
+    freshness: true,
+    layout: { defaultSpan: { cols: 6, rows: 4 }, minSpan: { cols: 4, rows: 3 } }
   }),
   "latest-card": defineWidgetDescriptor({
     id: "latest-card",
@@ -179,7 +336,7 @@ var builtinWidgetDescriptors = {
     optionsVersion: 1,
     display: { title: "Latest card", category: "Telemetry", titleId: "widgetTypeLatestCard", categoryId: "widgetCategoryTelemetry" },
     channel: "measurement",
-    datasource: { mode: "required", selectors: ALL_SELECTORS },
+    datasource: { mode: "required", selectors: ONE_DEVICE },
     binding: { window: { option: "window", min: 1 } },
     options: {
       title: TITLE_OR_MEASUREMENT,
@@ -191,11 +348,15 @@ var builtinWidgetDescriptors = {
       },
       unit: UNIT,
       precision: PRECISION,
+      thresholds: THRESHOLDS,
       flashOnChange: FLASH_ON_CHANGE,
+      staleAfterSeconds: STALE_AFTER_SECONDS,
       window: WINDOW
     },
     defaults: { title: "Latest card" },
-    interactions: {}
+    interactions: {},
+    freshness: true,
+    layout: { defaultSpan: { cols: 3, rows: 2 }, minSpan: { cols: 3, rows: 2 }, maxSpan: { cols: 6, rows: 4 } }
   }),
   gauge: defineWidgetDescriptor({
     id: "gauge",
@@ -204,7 +365,7 @@ var builtinWidgetDescriptors = {
     optionsVersion: 1,
     display: { title: "Gauge", category: "Telemetry", titleId: "widgetTypeGauge", categoryId: "widgetCategoryTelemetry" },
     channel: "measurement",
-    datasource: { mode: "required", selectors: ALL_SELECTORS },
+    datasource: { mode: "required", selectors: ONE_DEVICE },
     binding: { window: { option: "window", min: 1 } },
     options: {
       title: TITLE_OR_MEASUREMENT,
@@ -225,12 +386,17 @@ var builtinWidgetDescriptors = {
         doc: "High end of the gauge scale. Default 100."
       },
       unit: UNIT,
+      precision: PRECISION,
+      thresholds: THRESHOLDS,
       flashOnChange: FLASH_ON_CHANGE,
+      staleAfterSeconds: STALE_AFTER_SECONDS,
       window: WINDOW
     },
     constraints: [{ kind: "greater-than", key: "max", than: "min" }],
     defaults: { title: "Gauge" },
-    interactions: {}
+    interactions: {},
+    freshness: true,
+    layout: { defaultSpan: { cols: 3, rows: 3 }, minSpan: { cols: 3, rows: 3 }, maxSpan: { cols: 6, rows: 6 } }
   }),
   table: defineWidgetDescriptor({
     id: "table",
@@ -239,16 +405,19 @@ var builtinWidgetDescriptors = {
     optionsVersion: 1,
     display: { title: "Table", category: "Telemetry", titleId: "widgetTypeTable", categoryId: "widgetCategoryTelemetry" },
     channel: "measurement",
-    datasource: { mode: "required", selectors: ALL_SELECTORS },
+    datasource: { mode: "required", selectors: ONE_DEVICE },
     binding: { window: { option: "window", min: 1 } },
     options: {
       title: TITLE,
       precision: PRECISION,
       flashOnChange: FLASH_ON_CHANGE,
+      staleAfterSeconds: STALE_AFTER_SECONDS,
       window: WINDOW
     },
     defaults: { title: "Table" },
-    interactions: {}
+    interactions: {},
+    freshness: true,
+    layout: { defaultSpan: { cols: 6, rows: 3 }, minSpan: { cols: 4, rows: 2 } }
   }),
   // label and image are static: the `none` channel, no datasource, no subscription and no
   // history seed.
@@ -282,11 +451,12 @@ var builtinWidgetDescriptors = {
         min: 1,
         labelId: "widgetLabelFontSize",
         helpId: "widgetHintFontSize",
-        doc: "Text size in pixels. Default 16."
+        doc: "Text size in pixels at the comfortable density; it scales with the board density. Default 16."
       }
     },
     defaults: { text: "New label" },
-    interactions: {}
+    interactions: {},
+    layout: { defaultSpan: { cols: 3, rows: 1 }, minSpan: { cols: 1, rows: 1 }, maxSpan: { cols: 24, rows: 3 } }
   }),
   image: defineWidgetDescriptor({
     id: "image",
@@ -320,7 +490,8 @@ var builtinWidgetDescriptors = {
       }
     },
     defaults: { title: "Image" },
-    interactions: {}
+    interactions: {},
+    layout: { defaultSpan: { cols: 3, rows: 2 }, minSpan: { cols: 1, rows: 1 } }
   }),
   "alarm-table": defineWidgetDescriptor({
     id: "alarm-table",
@@ -349,7 +520,8 @@ var builtinWidgetDescriptors = {
       selectionTarget: SELECTION_TARGET
     },
     defaults: { title: "Alarm table", state: "ACTIVE" },
-    interactions: { alarmActions: true, selection: true }
+    interactions: { alarmActions: true, selection: true },
+    layout: { defaultSpan: { cols: 6, rows: 4 }, minSpan: { cols: 4, rows: 2 } }
   }),
   // The count shows the SERVER total and reads a page only to sample the worst loaded
   // severity, so its page size is a constant rather than an authorable option.
@@ -372,7 +544,8 @@ var builtinWidgetDescriptors = {
       acknowledged: ALARM_ACKNOWLEDGED
     },
     defaults: { title: "Alarm count", state: "ACTIVE" },
-    interactions: {}
+    interactions: {},
+    layout: { defaultSpan: { cols: 3, rows: 2 }, minSpan: { cols: 2, rows: 2 }, maxSpan: { cols: 6, rows: 4 } }
   }),
   "command-button": defineWidgetDescriptor({
     id: "command-button",
@@ -381,7 +554,7 @@ var builtinWidgetDescriptors = {
     optionsVersion: 1,
     display: { title: "Command button", category: "Control", titleId: "widgetTypeCommandButton", categoryId: "widgetCategoryControl" },
     channel: "control",
-    datasource: { mode: "required", selectors: ["device", "slot"] },
+    datasource: { mode: "required", selectors: ONE_DEVICE },
     binding: { pageSize: { option: "maxRows", default: 20, min: 1 } },
     options: {
       title: TITLE,
@@ -418,7 +591,8 @@ var builtinWidgetDescriptors = {
       }
     },
     defaults: { title: "Command button" },
-    interactions: { commandSend: true }
+    interactions: { commandSend: true },
+    layout: { defaultSpan: { cols: 3, rows: 3 }, minSpan: { cols: 3, rows: 2 }, maxSpan: { cols: 6, rows: 6 } }
   }),
   "entity-selector": defineWidgetDescriptor({
     id: "entity-selector",
@@ -434,7 +608,9 @@ var builtinWidgetDescriptors = {
       selectionTarget: { ...SELECTION_TARGET, required: true }
     },
     defaults: { title: "Entity selector" },
-    interactions: { selection: true, candidates: true }
+    interactions: { selection: true, candidates: true },
+    // A select control is one line high, so its rows are pinned; it widens to fit long names.
+    layout: { defaultSpan: { cols: 3, rows: 1 }, minSpan: { cols: 3, rows: 1 }, maxSpan: { cols: 12, rows: 1 }, resize: "horizontal" }
   }),
   map: defineWidgetDescriptor({
     id: "map",
@@ -470,23 +646,516 @@ var builtinWidgetDescriptors = {
       }
     },
     defaults: { title: "Map" },
-    interactions: {}
+    interactions: {},
+    layout: { defaultSpan: { cols: 6, rows: 4 }, minSpan: { cols: 4, rows: 3 } }
+  }),
+  // ---- Levels and indicators ------------------------------------------------
+  // DOM/SVG single-value widgets on the measurement channel. A threshold band colours the fill
+  // or lamp; `normal` keeps the widget's neutral accent.
+  "linear-gauge": defineWidgetDescriptor({
+    id: "linear-gauge",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Linear gauge", category: "Telemetry", titleId: "widgetTypeLinearGauge", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ONE_DEVICE },
+    binding: { window: { option: "window", min: 1 } },
+    options: {
+      title: TITLE_OR_MEASUREMENT,
+      measurement: MEASUREMENT,
+      min: SCALE_MIN,
+      max: SCALE_MAX,
+      style: {
+        kind: "enum",
+        values: ["bar", "thermometer"],
+        labelId: "widgetLabelLinearStyle",
+        valueLabelIds: { bar: "widgetLinearStyleBar", thermometer: "widgetLinearStyleThermometer" },
+        placeholderId: "widgetPlaceholderDefault",
+        doc: "A plain bar (default) or a thermometer: a vertical tube with a bulb. A thermometer is always vertical."
+      },
+      orientation: {
+        kind: "enum",
+        values: ["horizontal", "vertical"],
+        labelId: "widgetLabelOrientation",
+        valueLabelIds: { horizontal: "widgetOrientationHorizontal", vertical: "widgetOrientationVertical" },
+        placeholderId: "widgetPlaceholderDefault",
+        doc: "Direction of a bar: horizontal (default) or vertical. Ignored by a thermometer."
+      },
+      unit: UNIT,
+      precision: PRECISION,
+      thresholds: THRESHOLDS,
+      staleAfterSeconds: STALE_AFTER_SECONDS,
+      window: WINDOW
+    },
+    constraints: [{ kind: "greater-than", key: "max", than: "min" }],
+    defaults: { title: "Linear gauge" },
+    interactions: {},
+    freshness: true,
+    layout: { defaultSpan: { cols: 4, rows: 3 }, minSpan: { cols: 3, rows: 3 }, maxSpan: { cols: 8, rows: 8 } }
+  }),
+  "level-gauge": defineWidgetDescriptor({
+    id: "level-gauge",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Level gauge", category: "Telemetry", titleId: "widgetTypeLevelGauge", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ONE_DEVICE },
+    binding: { window: { option: "window", min: 1 } },
+    options: {
+      title: TITLE_OR_MEASUREMENT,
+      measurement: MEASUREMENT,
+      min: SCALE_MIN,
+      max: SCALE_MAX,
+      readout: {
+        kind: "enum",
+        values: ["value", "percent"],
+        labelId: "widgetLabelReadout",
+        valueLabelIds: { value: "widgetReadoutValue", percent: "widgetReadoutPercent" },
+        placeholderId: "widgetPlaceholderDefault",
+        doc: "What the readout shows: the value with its unit (default) or the percent of the scale."
+      },
+      unit: UNIT,
+      precision: PRECISION,
+      thresholds: THRESHOLDS,
+      staleAfterSeconds: STALE_AFTER_SECONDS,
+      window: WINDOW
+    },
+    constraints: [{ kind: "greater-than", key: "max", than: "min" }],
+    defaults: { title: "Level gauge" },
+    interactions: {},
+    freshness: true,
+    layout: { defaultSpan: { cols: 3, rows: 4 }, minSpan: { cols: 2, rows: 3 }, maxSpan: { cols: 6, rows: 8 } }
+  }),
+  battery: defineWidgetDescriptor({
+    id: "battery",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Battery", category: "Telemetry", titleId: "widgetTypeBattery", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ONE_DEVICE },
+    binding: { window: { option: "window", min: 1 } },
+    options: {
+      title: TITLE_OR_MEASUREMENT,
+      measurement: MEASUREMENT,
+      min: {
+        kind: "number",
+        labelId: "widgetLabelMin",
+        helpId: "widgetHintBatteryRange",
+        doc: "Value of an empty battery. Default 0 (the scale is percent unless you set min and max)."
+      },
+      max: {
+        kind: "number",
+        labelId: "widgetLabelMax",
+        helpId: "widgetHintBatteryRange",
+        doc: "Value of a full battery. Default 100 (the scale is percent unless you set min and max)."
+      },
+      unit: UNIT,
+      precision: PRECISION,
+      thresholds: THRESHOLDS,
+      staleAfterSeconds: STALE_AFTER_SECONDS,
+      window: WINDOW
+    },
+    constraints: [{ kind: "greater-than", key: "max", than: "min" }],
+    defaults: { title: "Battery" },
+    interactions: {},
+    freshness: true,
+    layout: { defaultSpan: { cols: 3, rows: 2 }, minSpan: { cols: 2, rows: 2 }, maxSpan: { cols: 6, rows: 4 } }
+  }),
+  "status-light": defineWidgetDescriptor({
+    id: "status-light",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Status light", category: "Telemetry", titleId: "widgetTypeStatusLight", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ONE_DEVICE },
+    binding: { window: { option: "window", min: 1 } },
+    options: {
+      title: TITLE_OR_MEASUREMENT,
+      measurement: MEASUREMENT,
+      onAt: {
+        kind: "number",
+        labelId: "widgetLabelOnAt",
+        helpId: "widgetHintOnAt",
+        doc: "For an on/off signal: the lamp is lit at or above this value and dark below it. Unset keeps the lamp lit while a value is present, coloured by its threshold band."
+      },
+      unit: UNIT,
+      precision: PRECISION,
+      thresholds: THRESHOLDS,
+      staleAfterSeconds: STALE_AFTER_SECONDS,
+      window: WINDOW
+    },
+    defaults: { title: "Status light" },
+    interactions: {},
+    freshness: true,
+    layout: { defaultSpan: { cols: 2, rows: 2 }, minSpan: { cols: 2, rows: 2 }, maxSpan: { cols: 4, rows: 4 } }
+  }),
+  "signal-bars": defineWidgetDescriptor({
+    id: "signal-bars",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Signal bars", category: "Telemetry", titleId: "widgetTypeSignalBars", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ONE_DEVICE },
+    binding: { window: { option: "window", min: 1 } },
+    options: {
+      title: TITLE_OR_MEASUREMENT,
+      measurement: MEASUREMENT,
+      unit: UNIT,
+      precision: PRECISION,
+      // One bar per threshold: the entries ARE the steps, so they are required.
+      thresholds: {
+        ...THRESHOLDS,
+        maxItems: 8,
+        required: true,
+        helpId: "widgetHintSignalThresholds",
+        doc: "The steps of the signal, lowest first: one bar per entry, lit once the value reaches it and coloured by its level. At least two, at most eight."
+      },
+      staleAfterSeconds: STALE_AFTER_SECONDS,
+      window: WINDOW
+    },
+    defaults: { title: "Signal bars" },
+    interactions: {},
+    freshness: true,
+    layout: { defaultSpan: { cols: 2, rows: 2 }, minSpan: { cols: 2, rows: 2 }, maxSpan: { cols: 4, rows: 4 } }
+  }),
+  // ---- Radial family ----------------------------------------------------------
+  // A heading on a full turn, and a ring filled between a configured min and max. The compass
+  // draws on the registered gauge series; the ring is SVG. Both put their number in DOM text.
+  compass: defineWidgetDescriptor({
+    id: "compass",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Compass", category: "Telemetry", titleId: "widgetTypeCompass", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ONE_DEVICE },
+    binding: { window: { option: "window", min: 1 } },
+    options: {
+      title: TITLE_OR_MEASUREMENT,
+      measurement: MEASUREMENT,
+      precision: {
+        ...PRECISION,
+        doc: "Decimal places of the heading. Default 0 (whole degrees). The heading is rounded first, then folded onto 0 to 360, so it never reads 360."
+      },
+      thresholds: {
+        ...THRESHOLDS,
+        doc: "Severity bands over the heading in degrees (0 to 360, after folding). Each entry starts a band at its value that runs to the next entry; below the first, and in a normal band, the needle keeps its own colour."
+      },
+      staleAfterSeconds: STALE_AFTER_SECONDS,
+      window: WINDOW
+    },
+    defaults: { title: "Compass" },
+    interactions: {},
+    freshness: true,
+    layout: { defaultSpan: { cols: 4, rows: 4 }, minSpan: { cols: 3, rows: 3 }, maxSpan: { cols: 8, rows: 8 } }
+  }),
+  "progress-ring": defineWidgetDescriptor({
+    id: "progress-ring",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Progress ring", category: "Telemetry", titleId: "widgetTypeProgressRing", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ONE_DEVICE },
+    binding: { window: { option: "window", min: 1 } },
+    options: {
+      title: TITLE_OR_MEASUREMENT,
+      measurement: MEASUREMENT,
+      min: SCALE_MIN,
+      max: SCALE_MAX,
+      readout: {
+        kind: "enum",
+        values: ["percent", "value"],
+        labelId: "widgetLabelReadout",
+        valueLabelIds: { percent: "widgetReadoutPercent", value: "widgetReadoutValue" },
+        placeholderId: "widgetPlaceholderDefault",
+        doc: "What the middle of the ring shows: the percent of the scale (default) or the value with its unit."
+      },
+      unit: UNIT,
+      precision: PRECISION,
+      thresholds: THRESHOLDS,
+      staleAfterSeconds: STALE_AFTER_SECONDS,
+      window: WINDOW
+    },
+    constraints: [{ kind: "greater-than", key: "max", than: "min" }],
+    defaults: { title: "Progress ring" },
+    interactions: {},
+    freshness: true,
+    layout: { defaultSpan: { cols: 3, rows: 3 }, minSpan: { cols: 2, rows: 2 }, maxSpan: { cols: 6, rows: 6 } }
+  }),
+  "command-slider": defineWidgetDescriptor({
+    id: "command-slider",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Command slider", category: "Control", titleId: "widgetTypeCommandSlider", categoryId: "widgetCategoryControl" },
+    channel: "control",
+    datasource: { mode: "required", selectors: ONE_DEVICE },
+    // The control reads its last-sent value off this history, so it asks for a long one.
+    binding: { pageSize: { const: 50 } },
+    options: {
+      title: TITLE,
+      commandName: CONTROL_COMMAND_NAME,
+      commandLabel: CONTROL_COMMAND_LABEL,
+      parameterSchema: CONTROL_PARAMETER_SCHEMA,
+      parameter: CONTROL_PARAMETER,
+      min: {
+        kind: "number",
+        labelId: "widgetLabelMin",
+        helpId: "widgetHintSliderRange",
+        doc: "Lowest value, used only when the command's parameter declares no minimum."
+      },
+      max: {
+        kind: "number",
+        labelId: "widgetLabelMax",
+        helpId: "widgetHintSliderRange",
+        doc: "Highest value, used only when the command's parameter declares no maximum."
+      },
+      step: {
+        kind: "number",
+        min: 0,
+        labelId: "widgetLabelStep",
+        helpId: "widgetHintSliderStep",
+        doc: "Distance between values. Defaults to 1 for a whole-number parameter, else a hundredth of the range."
+      }
+    },
+    constraints: [{ kind: "greater-than", key: "max", than: "min" }],
+    defaults: { title: "Command slider" },
+    interactions: { commandSend: true },
+    layout: { defaultSpan: { cols: 4, rows: 2 }, minSpan: { cols: 3, rows: 2 }, maxSpan: { cols: 8, rows: 3 } }
+  }),
+  "command-toggle": defineWidgetDescriptor({
+    id: "command-toggle",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Command toggle", category: "Control", titleId: "widgetTypeCommandToggle", categoryId: "widgetCategoryControl" },
+    channel: "control",
+    datasource: { mode: "required", selectors: ONE_DEVICE },
+    binding: { pageSize: { const: 50 } },
+    options: {
+      title: TITLE,
+      commandName: CONTROL_COMMAND_NAME,
+      commandLabel: CONTROL_COMMAND_LABEL,
+      parameterSchema: CONTROL_PARAMETER_SCHEMA,
+      parameter: CONTROL_PARAMETER
+    },
+    defaults: { title: "Command toggle" },
+    interactions: { commandSend: true },
+    layout: { defaultSpan: { cols: 3, rows: 2 }, minSpan: { cols: 2, rows: 2 }, maxSpan: { cols: 6, rows: 3 } }
+  }),
+  "stat-card": defineWidgetDescriptor({
+    id: "stat-card",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Stat card", category: "Telemetry", titleId: "widgetTypeStatCard", categoryId: "widgetCategoryTelemetry" },
+    channel: "aggregate",
+    datasource: { mode: "required", selectors: ONE_DEVICE },
+    binding: { windowSeconds: { option: "windowSeconds" } },
+    options: {
+      title: TITLE_OR_MEASUREMENT,
+      measurement: MEASUREMENT,
+      stat: {
+        kind: "enum",
+        values: ["avg", "min", "max", "sum", "count", "last"],
+        labelId: "widgetLabelStat",
+        helpId: "widgetHintStat",
+        valueLabelIds: {
+          avg: "widgetStatAvg",
+          min: "widgetStatMin",
+          max: "widgetStatMax",
+          sum: "widgetStatSum",
+          count: "widgetStatCount",
+          last: "widgetStatLast"
+        },
+        placeholderId: "widgetPlaceholderDefault",
+        doc: "Which figure to show. Default average."
+      },
+      unit: UNIT,
+      precision: PRECISION,
+      thresholds: THRESHOLDS,
+      windowSeconds: WINDOW_SECONDS
+    },
+    defaults: { title: "Stat card" },
+    interactions: {},
+    layout: { defaultSpan: { cols: 3, rows: 3 }, minSpan: { cols: 3, rows: 2 }, maxSpan: { cols: 6, rows: 4 } }
+  }),
+  "bar-chart": defineWidgetDescriptor({
+    id: "bar-chart",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Bar chart", category: "Telemetry", titleId: "widgetTypeBarChart", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ALL_SELECTORS },
+    // One bar per measurement of a device, or (groupBy device) one bar per member of an anchor.
+    binding: { members: { option: "groupBy", equals: "device" } },
+    options: {
+      title: TITLE,
+      groupBy: {
+        kind: "enum",
+        values: ["measurement", "device"],
+        labelId: "widgetLabelGroupBy",
+        helpId: "widgetHintGroupBy",
+        valueLabelIds: { measurement: "widgetGroupByMeasurement", device: "widgetGroupByDevice" },
+        placeholderId: "widgetPlaceholderDefault",
+        doc: "One bar per measurement (the default), or per device of the group for the measurement set below."
+      },
+      measurement: MEASUREMENT,
+      unit: UNIT,
+      precision: PRECISION,
+      sort: CATEGORY_SORT
+    },
+    defaults: { title: "Bar chart" },
+    interactions: {},
+    layout: { defaultSpan: { cols: 6, rows: 4 }, minSpan: { cols: 4, rows: 3 } }
+  }),
+  "pie-chart": defineWidgetDescriptor({
+    id: "pie-chart",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Pie chart", category: "Telemetry", titleId: "widgetTypePieChart", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ONE_DEVICE },
+    binding: {},
+    options: { title: TITLE, unit: UNIT, precision: PRECISION, sort: CATEGORY_SORT },
+    defaults: { title: "Pie chart" },
+    interactions: {},
+    layout: { defaultSpan: { cols: 4, rows: 4 }, minSpan: { cols: 3, rows: 3 }, maxSpan: { cols: 8, rows: 8 } }
+  }),
+  // A new widget rather than a mode of `table`: that one is one device's measurements as rows, on a
+  // channel that keys its values by name; this one is a fleet, a row per member and a column per
+  // measurement, and reads its data by device.
+  "fleet-table": defineWidgetDescriptor({
+    id: "fleet-table",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Fleet table", category: "Telemetry", titleId: "widgetTypeFleetTable", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ALL_SELECTORS },
+    binding: { windowSeconds: { option: "windowSeconds" }, members: { const: true } },
+    options: {
+      title: TITLE,
+      columns: FLEET_COLUMNS,
+      thresholds: FLEET_THRESHOLDS,
+      staleAfterSeconds: STALE_AFTER_SECONDS,
+      ageLagSeconds: {
+        kind: "number",
+        integer: true,
+        min: 1,
+        labelId: "widgetLabelAgeLag",
+        helpId: "widgetHintAgeLag",
+        doc: "Show a reading's age under it only when the reading is at least this many seconds older than the newest reading in the table (or stale). Unset shows every reading's age."
+      },
+      sortBy: {
+        kind: "string",
+        labelId: "widgetLabelSortBy",
+        helpId: "widgetHintSortBy",
+        doc: "The measurement the table is ordered by. Blank orders by device name."
+      },
+      sortDescending: { kind: "boolean", labelId: "widgetLabelSortDescending", doc: "Largest first." },
+      pageSize: {
+        kind: "number",
+        integer: true,
+        min: 5,
+        max: 100,
+        labelId: "widgetLabelPageSize",
+        doc: "Devices per page. Default 20."
+      },
+      selectionTarget: SELECTION_TARGET,
+      windowSeconds: WINDOW_SECONDS
+    },
+    defaults: { title: "Fleet table" },
+    // The frame shows the age of the newest reading in the fleet; each cell shows its own.
+    freshness: true,
+    interactions: { selection: true },
+    layout: { defaultSpan: { cols: 12, rows: 6 }, minSpan: { cols: 6, rows: 3 } }
   })
 };
 var builtinWidgetCatalog = createWidgetCatalog(Object.values(builtinWidgetDescriptors));
 
+// src/widgets/lazy-chunk.tsx
+import { useEffect, useState as useState2 } from "react";
+import { jsx } from "react/jsx-runtime";
+function lazyChunk(importer) {
+  let loaded;
+  let loading;
+  const load = () => loading ?? (loading = importer().then(
+    (m) => loaded = m,
+    (err) => {
+      loading = void 0;
+      throw err;
+    }
+  ));
+  function component(name) {
+    function LazyChunkWidget(props) {
+      const [mod, setMod] = useState2(loaded);
+      const [error, setError] = useState2();
+      useEffect(() => {
+        if (!mod) load().then(setMod, setError);
+      }, [mod]);
+      if (error !== void 0) throw error;
+      if (!mod) return null;
+      const Component2 = mod[name];
+      return /* @__PURE__ */ jsx(Component2, { ...props });
+    }
+    LazyChunkWidget.displayName = `Lazy(${name})`;
+    return LazyChunkWidget;
+  }
+  return { load, component };
+}
+
+// src/widgets/aggregate-lazy.tsx
+var chunk = lazyChunk(() => import("./chunks/aggregate-widgets-WVXAW3UL.js"));
+var loadAggregateWidgets = chunk.load;
+var statCardWidget = defineWidget({
+  descriptor: builtinWidgetDescriptors["stat-card"],
+  implementation: { kind: "trusted-react", component: chunk.component("StatCard") }
+});
+var barChartWidget = defineWidget({
+  descriptor: builtinWidgetDescriptors["bar-chart"],
+  implementation: { kind: "trusted-react", component: chunk.component("BarChart") }
+});
+var pieChartWidget = defineWidget({
+  descriptor: builtinWidgetDescriptors["pie-chart"],
+  implementation: { kind: "trusted-react", component: chunk.component("PieChart") }
+});
+var fleetTableWidget = defineWidget({
+  descriptor: builtinWidgetDescriptors["fleet-table"],
+  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
-var SEVERITY_COLORS = {
-  CRITICAL: "#dc2626",
-  // red-600
-  MAJOR: "#f97316",
-  // orange-500
-  MINOR: "#d97706",
-  // amber-600 (readable as foreground; console uses amber-400 as a fill)
-  WARNING: "#0ea5e9",
-  // sky-500 — cool end of the ramp, matching the console
-  INDETERMINATE: "#64748b"
-  // slate-500
+import { css } from "@devicechain/widget-sdk";
+var LEVEL_OF = {
+  CRITICAL: "critical",
+  MAJOR: "major",
+  MINOR: "minor",
+  WARNING: "warning"
 };
 var SEVERITY_ORDER = {
   CRITICAL: 0,
@@ -495,9 +1164,9 @@ var SEVERITY_ORDER = {
   WARNING: 3,
   INDETERMINATE: 4
 };
-var UNKNOWN_COLOR = "#64748b";
-function severityColor(severity) {
-  return SEVERITY_COLORS[severity] ?? UNKNOWN_COLOR;
+function severityColor(colors, severity) {
+  const level = LEVEL_OF[severity];
+  return level ? colors[level] : css("muted-foreground");
 }
 function severityRank(severity) {
   return SEVERITY_ORDER[severity] ?? 99;
@@ -515,86 +1184,133 @@ function highestSeverity(severities) {
 }
 
 // src/widgets/alarm-count.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
-function AlarmCount({ widget, data }) {
-  const [sizeRef, size] = useElementSize();
+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(worst) : css("muted-foreground");
-  const valueFont = size.height > 0 ? clamp(Math.round(size.height / 2.8), 20, 56) : 40;
+  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__ */ jsx(WidgetFrame, { title: optString2(widget.options, "title"), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: sizeRef,
       style: {
         display: "flex",
         flexDirection: "column",
-        justifyContent: "center",
+        justifyContent: "safe center",
         alignItems: "center",
         height: "100%",
-        padding: "12px 16px",
+        boxSizing: "border-box",
+        overflow: "hidden",
         textAlign: "center"
       },
       children: [
-        /* @__PURE__ */ jsx("div", { "aria-label": ariaLabel, style: { fontSize: valueFont, fontWeight: 700, lineHeight: 1, color }, children: display }),
+        /* @__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: 11,
-              color: css("muted-foreground"),
-              marginTop: 6,
+              fontSize: fontVar("xs"),
+              color: css2("muted-foreground"),
+              marginTop: spaceVar(1),
               textTransform: "uppercase",
               letterSpacing: "0.05em"
             },
             children: [
-              /* @__PURE__ */ jsx("span", { children: unit }),
-              alerting ? /* @__PURE__ */ jsx("span", { children: ` \xB7 worst ${severityLabel(worst)}` }) : null
+              /* @__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 = defineWidget({
+var alarmCountWidget = defineWidget2({
   descriptor: builtinWidgetDescriptors["alarm-count"],
   implementation: { kind: "trusted-react", component: AlarmCount }
 });
 
 // src/widgets/alarm-table.tsx
-import { useState } from "react";
+import { Fragment, useState as useState3 } from "react";
 import {
-  css as css2,
-  defineWidget as defineWidget2,
+  css as css3,
+  fontVar as fontVar2,
+  defineWidget as defineWidget3,
   FlashValue,
   formatDateTime,
   optBoolean,
-  optNumber as optNumber2,
-  optString as optString3,
+  optNumber,
+  optString as optString2,
+  useElementSize,
+  useSeverityColors as useSeverityColors2,
   useWidgetSelect,
   useWidgetTimeZone,
   WidgetFrame as WidgetFrame2
 } from "@devicechain/widget-sdk";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+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: css2("card"),
-  fontSize: 11,
+  background: css3("card"),
+  fontSize: fontVar2("xs"),
   fontWeight: 600,
   textTransform: "uppercase",
   letterSpacing: "0.04em",
-  color: css2("muted-foreground"),
-  borderBottom: `1px solid ${css2("border")}`
+  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";
@@ -602,41 +1318,45 @@ function statusLabel(alarm) {
 function AlarmTable({ widget, data, actions }) {
   const { alarms, total, loading } = data;
   const canAct = actions?.can("alarm:write") ?? false;
-  const columns = canAct ? 8 : 7;
-  const precision = optNumber2(widget.options, "precision");
+  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 = optString3(widget.options, "selectionTarget");
+  const selectionTarget = optString2(widget.options, "selectionTarget");
   const drillTo = select && selectionTarget ? { select, slot: selectionTarget } : void 0;
-  return /* @__PURE__ */ jsx2(WidgetFrame2, { title: optString3(widget.options, "title"), children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsx2("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ jsxs2(
+  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: 13,
-          color: css2("foreground"),
+          fontSize: fontVar2("md"),
+          color: css3("foreground"),
           fontVariantNumeric: "tabular-nums"
         },
         children: [
-          /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
-            /* @__PURE__ */ jsx2("th", { style: { ...headCell, width: 4, padding: 0 }, "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx2("th", { scope: "col", style: headCell, children: "Severity" }),
-            /* @__PURE__ */ jsx2("th", { scope: "col", style: headCell, children: "Status" }),
-            /* @__PURE__ */ jsx2("th", { scope: "col", style: headCell, children: "Originator" }),
-            /* @__PURE__ */ jsx2("th", { scope: "col", style: headCell, children: "Alarm" }),
-            /* @__PURE__ */ jsx2("th", { scope: "col", style: { ...headCell, textAlign: "right" }, children: "Value" }),
-            /* @__PURE__ */ jsx2("th", { scope: "col", style: headCell, children: "Raised" }),
-            canAct ? /* @__PURE__ */ jsx2("th", { scope: "col", style: { ...headCell, textAlign: "right" }, children: "Actions" }) : null
+          /* @__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__ */ jsx2("tbody", { children: alarms.length === 0 ? /* @__PURE__ */ jsx2("tr", { children: /* @__PURE__ */ jsx2("td", { colSpan: columns, style: { ...cell, textAlign: "center", color: css2("muted-foreground") }, children: loading ? "Loading\u2026" : "No alarms" }) }) : alarms.map((alarm) => {
-            const color = severityColor(alarm.severity);
-            return /* @__PURE__ */ jsxs2("tr", { style: { borderBottom: `1px solid ${css2("border")}` }, children: [
-              /* @__PURE__ */ jsx2("td", { "aria-hidden": "true", style: { padding: 0, width: 4, background: color } }),
-              /* @__PURE__ */ jsx2("td", { style: cell, children: /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
-                /* @__PURE__ */ jsx2(
+          /* @__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",
@@ -645,10 +1365,10 @@ function AlarmTable({ widget, data, actions }) {
                 ),
                 severityLabel(alarm.severity)
               ] }) }),
-              /* @__PURE__ */ jsx2("td", { style: { ...cell, color: css2("muted-foreground") }, children: statusLabel(alarm) }),
-              /* @__PURE__ */ jsx2("td", { style: cell, children: /* @__PURE__ */ jsx2(OriginatorCell, { alarm, drillTo }) }),
-              /* @__PURE__ */ jsx2("td", { style: cell, children: alarm.alarmKey }),
-              /* @__PURE__ */ jsx2("td", { style: { ...cell, textAlign: "right" }, children: /* @__PURE__ */ jsx2(
+              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,
@@ -657,8 +1377,8 @@ function AlarmTable({ widget, data, actions }) {
                   identity: alarm.token
                 }
               ) }),
-              /* @__PURE__ */ jsx2("td", { style: { ...cell, color: css2("muted-foreground") }, children: formatDateTime(alarm.raisedTime, timeZone) }),
-              canAct ? /* @__PURE__ */ jsx2("td", { style: { ...cell, textAlign: "right" }, children: /* @__PURE__ */ jsx2(AlarmRowActions, { alarm, actions }) }) : null
+              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);
           }) })
         ]
@@ -669,9 +1389,9 @@ function AlarmTable({ widget, data, actions }) {
       {
         style: {
           padding: "4px 10px",
-          fontSize: 11,
-          color: css2("muted-foreground"),
-          borderTop: `1px solid ${css2("border")}`
+          fontSize: fontVar2("xs"),
+          color: css3("muted-foreground"),
+          borderTop: `1px solid ${css3("border")}`
         },
         children: [
           "Showing ",
@@ -689,7 +1409,7 @@ function OriginatorCell({
 }) {
   if (drillTo && alarm.originatorType === "device" && alarm.originatorToken) {
     const token = alarm.originatorToken;
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
@@ -700,32 +1420,33 @@ function OriginatorCell({
           border: "none",
           background: "none",
           font: "inherit",
-          color: css2("primary"),
+          color: css3("primary"),
           cursor: "pointer",
           textDecoration: "underline",
           textUnderlineOffset: 2
         },
-        children: token
+        children: hyphenBreaks(token)
       }
     );
   }
-  return /* @__PURE__ */ jsx2(Fragment, { children: alarm.originatorToken ?? alarm.originatorType });
+  return /* @__PURE__ */ jsx3(Fragment2, { children: hyphenBreaks(alarm.originatorToken ?? alarm.originatorType) });
 }
 var actionButton = {
   padding: "2px 8px",
-  fontSize: 12,
+  fontSize: fontVar2("sm"),
   lineHeight: 1.4,
   borderRadius: 4,
-  border: `1px solid ${css2("border")}`,
-  background: css2("card"),
-  color: css2("foreground"),
+  border: `1px solid ${css3("border")}`,
+  background: css3("card"),
+  color: css3("foreground"),
   cursor: "pointer"
 };
 function AlarmRowActions({ alarm, actions }) {
-  const [pending, setPending] = useState(null);
-  const [failed, setFailed] = useState(false);
+  const severity = useSeverityColors2();
+  const [pending, setPending] = useState3(null);
+  const [failed, setFailed] = useState3(false);
   if (alarm.state !== "ACTIVE") {
-    return /* @__PURE__ */ jsx2("span", { style: { color: css2("muted-foreground") }, children: "\u2014" });
+    return /* @__PURE__ */ jsx3("span", { style: { color: css3("muted-foreground") }, children: "\u2014" });
   }
   const run = (kind, op) => {
     setPending(kind);
@@ -741,17 +1462,17 @@ function AlarmRowActions({ alarm, actions }) {
     promise.catch(() => setFailed(true)).finally(() => setPending(null));
   };
   return /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", gap: 6, justifyContent: "flex-end", alignItems: "center" }, children: [
-    failed ? /* @__PURE__ */ jsx2(
+    failed ? /* @__PURE__ */ jsx3(
       "span",
       {
         role: "img",
         "aria-label": "Action failed \u2014 retry",
         title: "Action failed \u2014 retry",
-        style: { color: severityColor("CRITICAL"), fontSize: 12 },
+        style: { color: severityColor(severity, "CRITICAL"), fontSize: fontVar2("sm") },
         children: "\u26A0"
       }
     ) : null,
-    !alarm.acknowledged ? /* @__PURE__ */ jsx2(
+    !alarm.acknowledged ? /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
@@ -763,196 +1484,50 @@ function AlarmRowActions({ alarm, actions }) {
         children: pending === "ack" ? "\u2026" : "Ack"
       }
     ) : null,
-    /* @__PURE__ */ jsx2(
+    /* @__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 = defineWidget2({
-  descriptor: builtinWidgetDescriptors["alarm-table"],
-  implementation: { kind: "trusted-react", component: AlarmTable }
-});
-
-// src/widgets/command-button.tsx
-import { useEffect, useMemo, useRef, useState as useState2 } from "react";
-import {
-  css as css3,
-  defineWidget as defineWidget3,
-  formatDateTime as formatDateTime2,
-  optString as optString4,
-  useWidgetTimeZone as useWidgetTimeZone2,
-  WidgetFrame as WidgetFrame3
-} from "@devicechain/widget-sdk";
-
-// src/widgets/command-status.ts
-import { isTerminalCommandStatus } from "@devicechain/dashboards";
-var STATUS_COLORS = {
-  SUCCESSFUL: "#16a34a",
-  // green-600 — acknowledged by the device
-  FAILED: "#dc2626",
-  // red-600
-  TIMEOUT: "#dc2626",
-  // red-600 — never acknowledged in time
-  EXPIRED: "#64748b",
-  // slate-500 — lapsed before it was ever sent
-  CANCELLED: "#7c3aed",
-  // violet-600 — deliberately called off; a decision, not a failure
-  QUEUED: "#0284c7",
-  // sky-600 — in flight
-  SENT: "#0284c7",
-  HELD: "#d97706",
-  // amber-600 — withheld: the device is absent, the command still stands
-  PARKED: "#f59e0b"
-  // amber-500 — published, nobody home; held for the device's return
-};
-var UNKNOWN_COLOR2 = "#64748b";
-function commandStatusColor(status) {
-  return STATUS_COLORS[status] ?? UNKNOWN_COLOR2;
-}
-function isTerminalStatus(status) {
-  return isTerminalCommandStatus(status);
-}
-function commandStatusLabel(status) {
-  if (!status) return "";
-  return status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
-}
-
-// src/widgets/command-params.ts
-var DATA_TYPES = /* @__PURE__ */ new Set(["DOUBLE", "INT", "BOOLEAN", "STRING"]);
-function parseParameterSchema(schema) {
-  if (!schema) return [];
-  let parsed;
-  try {
-    parsed = JSON.parse(schema);
-  } catch {
-    return [];
-  }
-  if (!Array.isArray(parsed)) return [];
-  const out = [];
-  for (const raw of parsed) {
-    const norm = normalizeParam(raw);
-    if (norm) out.push(norm);
-  }
-  return out;
-}
-function normalizeParam(raw) {
-  if (typeof raw !== "object" || raw === null) return null;
-  const r = raw;
-  if (typeof r.name !== "string") return null;
-  const param = { name: r.name };
-  if (typeof r.description === "string") param.description = r.description;
-  if (r.kind === "OBJECT") param.kind = "OBJECT";
-  else if (r.kind === "SCALAR") param.kind = "SCALAR";
-  if (typeof r.dataType === "string" && DATA_TYPES.has(r.dataType)) {
-    param.dataType = r.dataType;
-  }
-  if (typeof r.unit === "string") param.unit = r.unit;
-  if (r.required === true) param.required = true;
-  if (typeof r.default === "string") param.default = r.default;
-  if (typeof r.minValue === "number" && Number.isFinite(r.minValue)) param.minValue = r.minValue;
-  if (typeof r.maxValue === "number" && Number.isFinite(r.maxValue)) param.maxValue = r.maxValue;
-  if (Array.isArray(r.enum)) {
-    const values = r.enum.filter((v) => typeof v === "string");
-    if (values.length > 0) param.enum = values;
-  }
-  return param;
-}
-function isScalar(param) {
-  return param.kind !== "OBJECT";
-}
-function parseBool(raw) {
-  const s = raw.trim().toLowerCase();
-  return s === "true" || s === "1" || s === "t" || s === "yes" || s === "on";
-}
-function defaultValues(params) {
-  const values = {};
-  for (const p of params) {
-    if (!isScalar(p)) continue;
-    if (p.dataType === "BOOLEAN") values[p.name] = parseBool(p.default ?? "") ? "true" : "false";
-    else if (p.default != null) values[p.name] = p.default;
-  }
-  return values;
-}
-function validateParams(params, values) {
-  const errors = {};
-  for (const p of params) {
-    if (!isScalar(p)) {
-      if (p.required) errors[p.name] = "Structured parameter \u2014 not supported here";
-      continue;
-    }
-    if (p.dataType === "BOOLEAN") continue;
-    const raw = (values[p.name] ?? "").trim();
-    if (raw === "") {
-      if (p.required) errors[p.name] = "Required";
-      continue;
-    }
-    if (p.dataType === "INT" || p.dataType === "DOUBLE") {
-      const n = Number(raw);
-      if (!Number.isFinite(n)) {
-        errors[p.name] = "Must be a number";
-      } else if (p.dataType === "INT" && !Number.isInteger(n)) {
-        errors[p.name] = "Must be a whole number";
-      } else if (p.minValue != null && n < p.minValue) {
-        errors[p.name] = `Must be \u2265 ${p.minValue}`;
-      } else if (p.maxValue != null && n > p.maxValue) {
-        errors[p.name] = `Must be \u2264 ${p.maxValue}`;
-      }
-    }
-  }
-  return errors;
-}
-function buildPayload(params, values) {
-  const payload = {};
-  for (const p of params) {
-    if (!isScalar(p)) continue;
-    const raw = (values[p.name] ?? "").trim();
-    if (p.dataType === "BOOLEAN") {
-      payload[p.name] = parseBool(raw);
-      continue;
-    }
-    if (raw === "") continue;
-    payload[p.name] = coerce(p, raw);
-  }
-  return Object.keys(payload).length === 0 ? void 0 : JSON.stringify(payload);
-}
-function coerce(param, raw) {
-  switch (param.dataType) {
-    case "INT":
-    case "DOUBLE": {
-      const n = Number(raw);
-      return Number.isFinite(n) ? n : raw;
-    }
-    case "BOOLEAN":
-      return parseBool(raw);
-    default:
-      return raw;
-  }
+        "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({
+  descriptor: builtinWidgetDescriptors["alarm-table"],
+  implementation: { kind: "trusted-react", component: AlarmTable }
+});
 
 // src/widgets/command-button.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+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 = optString4(widget.options, "commandName");
-  const commandLabel = optString4(widget.options, "commandLabel") ?? commandName;
-  const parameterSchema = optString4(widget.options, "parameterSchema") ?? null;
+  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] = useState2(() => defaultValues(params));
-  const [errors, setErrors] = useState2({});
-  const [pending, setPending] = useState2(false);
-  const [sendError, setSendError] = useState2(null);
-  const [sentToken, setSentToken] = useState2(null);
+  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);
-  useEffect(() => {
+  useEffect2(() => {
     sendGen.current += 1;
     setValues(defaultValues(params));
     setErrors({});
@@ -1002,10 +1577,10 @@ function CommandButton({ widget, data, actions }) {
       if (gen === sendGen.current) setPending(false);
     });
   };
-  return /* @__PURE__ */ jsx3(WidgetFrame3, { title: optString4(widget.options, "title"), children: /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexDirection: "column", height: "100%", gap: 10 }, children: !commandName ? /* @__PURE__ */ jsx3("div", { style: { ...hint, margin: "auto" }, children: "No command configured." }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+  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__ */ jsx3(
+        (param) => isScalar(param) ? /* @__PURE__ */ jsx4(
           ParamField,
           {
             widgetId: widget.id,
@@ -1019,7 +1594,7 @@ function CommandButton({ widget, data, actions }) {
         ) : (
           // 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") : css3("muted-foreground") }, children: [
+          /* @__PURE__ */ jsxs3("div", { style: { ...hint, color: param.required ? commandStatusColor("FAILED") : css4("muted-foreground") }, children: [
             param.name,
             ": ",
             param.required ? "required " : "",
@@ -1027,7 +1602,7 @@ function CommandButton({ widget, data, actions }) {
           ] }, param.name)
         )
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -1038,10 +1613,10 @@ function CommandButton({ widget, data, actions }) {
           children: pending ? "Sending\u2026" : `Send ${commandLabel}`
         }
       ),
-      !canWrite ? /* @__PURE__ */ jsx3("div", { style: hint, children: "You don\u2019t have permission to issue commands." }) : !hasSeam ? /* @__PURE__ */ jsx3("div", { style: hint, children: "Commands aren\u2019t available in this view." }) : !deviceToken ? /* @__PURE__ */ jsx3("div", { style: hint, children: "No device is selected for this command." }) : null,
-      sendError ? /* @__PURE__ */ jsx3("div", { role: "alert", style: { ...hint, color: commandStatusColor("FAILED") }, children: sendError }) : null
+      !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__ */ jsx3(CommandHistory, { commands: data.commands, sentToken, loading: data.loading, error: data.error })
+    /* @__PURE__ */ jsx4(CommandHistory, { commands: data.commands, sentToken, loading: data.loading, error: data.error })
   ] }) }) });
 }
 function ParamField({
@@ -1055,13 +1630,13 @@ function ParamField({
   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: 12, color: css3("muted-foreground") }, children: [
+    /* @__PURE__ */ jsxs3("span", { style: { fontSize: fontVar3("sm"), color: css4("muted-foreground") }, children: [
       param.name,
       unit,
-      param.required ? /* @__PURE__ */ jsx3("span", { style: { color: commandStatusColor("FAILED") }, children: " *" }) : null
+      param.required ? /* @__PURE__ */ jsx4("span", { style: { color: commandStatusColor("FAILED") }, children: " *" }) : null
     ] }),
-    /* @__PURE__ */ jsx3(ParamInput, { id: labelId, param, value, disabled, onChange }),
-    error ? /* @__PURE__ */ jsx3("span", { style: { fontSize: 11, color: commandStatusColor("FAILED") }, children: error }) : 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({
@@ -1073,12 +1648,12 @@ function ParamInput({
 }) {
   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__ */ jsx3("option", { value: "", children: "\u2014" }) : null,
-      param.enum.map((opt) => /* @__PURE__ */ jsx3("option", { value: opt, children: opt }, opt))
+      !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__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       "input",
       {
         id,
@@ -1091,7 +1666,7 @@ function ParamInput({
     );
   }
   const numeric = param.dataType === "INT" || param.dataType === "DOUBLE";
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "input",
     {
       id,
@@ -1115,31 +1690,31 @@ function CommandHistory({
 }) {
   const empty = commands.length === 0;
   const timeZone = useWidgetTimeZone2();
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       style: {
         flex: 1,
         minHeight: 0,
         overflow: "auto",
-        borderTop: `1px solid ${css3("border")}`,
+        borderTop: `1px solid ${css4("border")}`,
         paddingTop: 6
       },
-      children: empty ? /* @__PURE__ */ jsx3("div", { style: { ...hint, textAlign: "center", color: error ? commandStatusColor("FAILED") : css3("muted-foreground") }, children: error ? "Couldn\u2019t load command history." : loading ? "Loading\u2026" : "No commands issued yet." }) : /* @__PURE__ */ jsx3("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 4 }, children: commands.map((command) => /* @__PURE__ */ jsxs3(
+      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: 12,
+            fontSize: fontVar3("sm"),
             // Highlight the command just issued from this widget.
             fontWeight: command.token === sentToken ? 600 : 400
           },
           children: [
-            /* @__PURE__ */ jsx3(StatusBadge, { status: command.status }),
-            /* @__PURE__ */ jsx3("span", { style: { color: css3("foreground"), whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: command.name }),
-            /* @__PURE__ */ jsx3("span", { style: { marginLeft: "auto", color: css3("muted-foreground"), whiteSpace: "nowrap" }, children: formatDateTime2(command.queuedTime, timeZone) })
+            /* @__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
@@ -1157,80 +1732,94 @@ function StatusBadge({ status }) {
         alignItems: "center",
         gap: 4,
         flexShrink: 0,
-        fontSize: 11,
+        fontSize: fontVar3("xs"),
         fontWeight: 600,
         color
       },
       children: [
-        /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", style: { width: 7, height: 7, borderRadius: "50%", background: color } }),
+        /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { width: 7, height: 7, borderRadius: "50%", background: color } }),
         commandStatusLabel(status)
       ]
     }
   );
 }
-var hint = { fontSize: 11, color: css3("muted-foreground") };
+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: 13,
+  fontSize: fontVar3("md"),
   borderRadius: 4,
-  border: `1px solid ${css3("border")}`,
-  background: css3("background"),
-  color: css3("foreground")
+  border: `1px solid ${css4("border")}`,
+  background: css4("background"),
+  color: css4("foreground")
 };
 var sendButton = {
   padding: "6px 12px",
-  fontSize: 13,
+  fontSize: fontVar3("md"),
   fontWeight: 600,
   borderRadius: 4,
   border: "none",
-  background: css3("primary"),
-  color: css3("background"),
+  background: css4("primary"),
+  color: css4("background"),
   marginTop: 2
 };
-var commandButtonWidget = defineWidget3({
+var commandButtonWidget = defineWidget4({
   descriptor: builtinWidgetDescriptors["command-button"],
   implementation: { kind: "trusted-react", component: CommandButton }
 });
 
+// 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({
+  descriptor: builtinWidgetDescriptors["command-slider"],
+  implementation: { kind: "trusted-react", component: chunk2.component("CommandSlider") }
+});
+var commandToggleWidget = defineWidget5({
+  descriptor: builtinWidgetDescriptors["command-toggle"],
+  implementation: { kind: "trusted-react", component: chunk2.component("CommandToggle") }
+});
+
 // src/widgets/entity-selector.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState5 } from "react";
 import {
-  css as css4,
-  defineWidget as defineWidget4,
-  optString as optString5,
+  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 Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+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: 14,
+  fontSize: fontVar4("md"),
   padding: "8px 10px",
   borderRadius: 6,
-  border: `1px solid ${css4("border")}`,
-  background: css4("background"),
-  color: css4("foreground")
+  border: `1px solid ${css5("border")}`,
+  background: css5("background"),
+  color: css5("foreground")
 };
 var hint2 = {
-  fontSize: 12,
-  color: css4("muted-foreground")
+  fontSize: fontVar4("sm"),
+  color: css5("muted-foreground")
 };
 function EntitySelector({ widget }) {
   const select = useWidgetSelect2();
-  const target = optString5(widget.options, "selectionTarget");
+  const target = optString4(widget.options, "selectionTarget");
   const { candidates, loading, error, wired } = useCandidates(target);
-  const title = optString5(widget.options, "title");
-  const [pending, setPending] = useState3(null);
+  const title = optString4(widget.options, "title");
+  const [pending, setPending] = useState5(null);
   const selected = candidates.find((c) => c.selected);
   const selectedToken = selected ? tokenOf(selected.binding) : "";
-  useEffect2(() => {
+  useEffect3(() => {
     if (pending !== null && (selectedToken === pending || !candidates.some((c) => tokenOf(c.binding) === pending))) {
       setPending(null);
     }
@@ -1246,25 +1835,38 @@ function EntitySelector({ widget }) {
       select({ slot: target, binding: candidate.binding });
     }
   };
-  return /* @__PURE__ */ jsx4(WidgetFrame4, { title, children: /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "12px 16px", height: "100%" }, children: inert ? /* @__PURE__ */ jsx4("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(Fragment3, { children: [
-    /* @__PURE__ */ jsxs4(
-      "select",
-      {
-        style: { ...control, opacity: loading ? 0.6 : 1 },
-        value,
-        disabled: candidates.length === 0,
-        onChange,
-        "aria-label": title || `Select ${target}`,
-        children: [
-          /* @__PURE__ */ jsx4("option", { value: "", disabled: true, children: loading ? "Loading\u2026" : candidates.length === 0 ? "No options" : "Select\u2026" }),
-          candidates.map((c) => /* @__PURE__ */ jsx4("option", { value: tokenOf(c.binding), children: c.label }, tokenOf(c.binding)))
-        ]
-      }
-    ),
-    error ? /* @__PURE__ */ jsx4("span", { style: hint2, children: "Couldn\u2019t load options." }) : null
-  ] }) }) });
+  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 = defineWidget4({
+var entitySelectorWidget = defineWidget6({
   descriptor: builtinWidgetDescriptors["entity-selector"],
   implementation: { kind: "trusted-react", component: EntitySelector }
 });
@@ -1272,58 +1874,105 @@ var entitySelectorWidget = defineWidget4({
 // src/widgets/gauge.tsx
 import { useMemo as useMemo2 } from "react";
 import {
-  defineWidget as defineWidget5,
+  defineWidget as defineWidget7,
   flashBackgroundStyle,
+  formatValue,
   optBoolean as optBoolean2,
-  optNumber as optNumber3,
-  optString as optString6,
+  optNumber as optNumber2,
+  optString as optString5,
+  optThresholds,
   pickSample,
   primaryMeasurementName,
-  useElementSize as useElementSize2,
   useFlashOnChange,
+  useWidgetScale as useWidgetScale2,
   WidgetFrame as WidgetFrame5
 } from "@devicechain/widget-sdk";
-import { buildGaugeOption, EChart, useChartTheme } from "@devicechain/widget-sdk/echarts";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { buildGaugeOption, EChart, gaugeReadoutBox, useChartTheme } from "@devicechain/widget-sdk/echarts";
+import { jsx as jsx6, jsxs as jsxs5 } 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 }) });
+}
+function GaugeBody({ widget, data }) {
   const theme = useChartTheme();
-  const [sizeRef, size] = useElementSize2();
+  const { size, scale } = useWidgetScale2();
   const name = primaryMeasurementName(widget);
   const sample = pickSample(data.latest, name);
-  const min = optNumber3(widget.options, "min");
-  const max = optNumber3(widget.options, "max");
-  const unit = optString6(widget.options, "unit");
+  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(
-    () => buildGaugeOption(sample?.value ?? null, theme, { min, max, unit }, size),
-    [sample?.value, theme, min, max, unit, size.width, size.height]
+    () => 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"),
     sample && `${sample.deviceToken}:${sample.name}`
   );
-  return /* @__PURE__ */ jsx5(WidgetFrame5, { title: optString6(widget.options, "title") ?? name, children: /* @__PURE__ */ jsx5("div", { ref: sizeRef, style: { width: "100%", height: "100%", ...flashBackgroundStyle(flashDirection) }, children: /* @__PURE__ */ jsx5(EChart, { option }) }) });
+  const box = gaugeReadoutBox(size);
+  const range = readRange(min, max, { min: 0, max: 100 });
+  const value = sample?.value ?? void 0;
+  const meter = range.ok && value !== void 0 && Number.isFinite(value) ? {
+    role: "meter",
+    "aria-valuemin": range.range.min,
+    "aria-valuemax": range.range.max,
+    "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(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: box.centerX - box.width / 2,
+          top: box.centerY - box.height / 2,
+          width: box.width,
+          height: box.height,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          pointerEvents: "none"
+        },
+        children: /* @__PURE__ */ jsx6(
+          LevelReadout,
+          {
+            text: formatValue(value, precision),
+            unit: value === void 0 ? void 0 : unit,
+            size: { width: box.width, height: box.height },
+            scale
+          }
+        )
+      }
+    )
+  ] });
 }
-var gaugeWidget = defineWidget5({
+var gaugeWidget = defineWidget7({
   descriptor: builtinWidgetDescriptors["gauge"],
   implementation: { kind: "trusted-react", component: Gauge }
 });
 
 // src/widgets/image.tsx
 import {
-  css as css5,
-  defineWidget as defineWidget6,
-  optString as optString7,
+  css as css6,
+  defineWidget as defineWidget8,
+  fontVar as fontVar5,
+  optString as optString6,
   WidgetFrame as WidgetFrame6
 } from "@devicechain/widget-sdk";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var FITS = /* @__PURE__ */ new Set(["contain", "cover", "fill"]);
 function Image({ widget }) {
-  const url = optString7(widget.options, "url");
-  const alt = optString7(widget.options, "alt") ?? "";
-  const fitOption = optString7(widget.options, "fit");
+  const url = optString6(widget.options, "url");
+  const alt = optString6(widget.options, "alt") ?? "";
+  const fitOption = optString6(widget.options, "fit");
   const objectFit = fitOption && FITS.has(fitOption) ? fitOption : "contain";
-  return /* @__PURE__ */ jsx6(WidgetFrame6, { title: optString7(widget.options, "title"), children: url ? /* @__PURE__ */ jsx6("img", { src: url, alt, style: { width: "100%", height: "100%", objectFit, display: "block" } }) : /* @__PURE__ */ jsx6(
+  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(
     "div",
     {
       style: {
@@ -1331,52 +1980,59 @@ function Image({ widget }) {
         alignItems: "center",
         justifyContent: "center",
         height: "100%",
-        color: css5("muted-foreground"),
-        fontSize: 13
+        color: css6("muted-foreground"),
+        fontSize: fontVar5("md")
       },
       children: "No image URL"
     }
   ) });
 }
-var imageWidget = defineWidget6({
+var imageWidget = defineWidget8({
   descriptor: builtinWidgetDescriptors["image"],
   implementation: { kind: "trusted-react", component: Image }
 });
 
 // src/widgets/label.tsx
 import {
-  css as css6,
-  defineWidget as defineWidget7,
-  optNumber as optNumber4,
-  optString as optString8,
+  css as css7,
+  defineWidget as defineWidget9,
+  fontVar as fontVar6,
+  spaceVar as spaceVar2,
+  optNumber as optNumber3,
+  optString as optString7,
   WidgetFrame as WidgetFrame7
 } from "@devicechain/widget-sdk";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var justify = {
   left: "flex-start",
   center: "center",
   right: "flex-end"
 };
 function Label({ widget }) {
-  const text = optString8(widget.options, "text") ?? "";
-  const align = optString8(widget.options, "align") ?? "center";
-  const fontSize = optNumber4(widget.options, "fontSize") ?? 16;
-  return /* @__PURE__ */ jsx7(WidgetFrame7, { title: optString8(widget.options, "title"), children: /* @__PURE__ */ jsx7(
+  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(
     "div",
     {
       style: {
         display: "flex",
-        alignItems: "center",
+        alignItems: "safe center",
         justifyContent: justify[align] ?? "center",
         height: "100%",
-        padding: 12
+        boxSizing: "border-box",
+        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)}`
       },
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         "span",
         {
           style: {
             fontSize,
-            color: css6("foreground"),
+            color: css7("foreground"),
             textAlign: align,
             whiteSpace: "pre-wrap"
           },
@@ -1386,96 +2042,166 @@ function Label({ widget }) {
     }
   ) });
 }
-var labelWidget = defineWidget7({
+var labelWidget = defineWidget9({
   descriptor: builtinWidgetDescriptors["label"],
   implementation: { kind: "trusted-react", component: Label }
 });
 
 // src/widgets/latest-card.tsx
+import { useMemo as useMemo3 } from "react";
 import {
-  css as css7,
-  defineWidget as defineWidget8,
+  bandAt,
+  css as css8,
+  defineWidget as defineWidget10,
+  fitValueFont as fitValueFont2,
+  fitValueFontCss as fitValueFontCss2,
+  FIT_MIN_FONT_PX as FIT_MIN_FONT_PX2,
   flashTextStyle,
+  fontVar as fontVar7,
   formatTimestamp,
-  formatValue,
+  formatValue as formatValue2,
+  levelColor,
   optBoolean as optBoolean3,
-  optNumber as optNumber5,
-  optString as optString9,
+  optNumber as optNumber4,
+  optString as optString8,
+  optThresholds as optThresholds2,
   pickSample as pickSample2,
   primaryMeasurementName as primaryMeasurementName2,
-  useElementSize as useElementSize3,
+  spaceVar as spaceVar3,
+  useSeverityColors as useSeverityColors3,
+  useStickyChars as useStickyChars2,
   useFlashOnChange as useFlashOnChange2,
   useWidgetTimeZone as useWidgetTimeZone3,
   WidgetFrame as WidgetFrame8
 } from "@devicechain/widget-sdk";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var clamp2 = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var TIMESTAMP_ROOM_PX = 18;
 function LatestCard({ widget, data }) {
-  const [sizeRef, size] = useElementSize3();
+  const severity = useSeverityColors3();
   const timeZone = useWidgetTimeZone3();
   const name = primaryMeasurementName2(widget);
   const sample = pickSample2(data.latest, name);
-  const title = optString9(widget.options, "title") ?? name;
-  const unit = optString9(widget.options, "unit");
-  const precision = optNumber5(widget.options, "precision");
-  const display = formatValue(sample?.value, precision);
+  const title = optString8(widget.options, "title") ?? name;
+  const unit = optString8(widget.options, "unit");
+  const precision = optNumber4(widget.options, "precision");
+  const display = formatValue2(sample?.value, precision);
+  const thresholds = useMemo3(() => optThresholds2(widget.options, "thresholds"), [widget.options]);
+  const band = bandAt(thresholds, sample?.value);
+  const valueColor = levelColor(severity, band?.level) ?? css8("foreground");
   const flashDirection = useFlashOnChange2(
     sample?.value,
     optBoolean3(widget.options, "flashOnChange"),
     sample && `${sample.deviceToken}:${sample.name}`
   );
-  const valueFont = size.height > 0 ? clamp2(Math.round(size.height / 3.5), 16, 44) : 32;
-  return /* @__PURE__ */ jsx8(WidgetFrame8, { title, children: /* @__PURE__ */ jsxs5(
-    "div",
-    {
-      ref: sizeRef,
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        height: "100%",
-        padding: "12px 16px"
-      },
-      children: [
-        /* @__PURE__ */ jsxs5(
-          "div",
-          {
-            style: {
-              fontSize: valueFont,
-              fontWeight: 600,
-              lineHeight: 1.1,
-              color: css7("foreground"),
-              ...flashTextStyle(flashDirection)
-            },
-            children: [
-              display,
-              sample?.value != null && unit ? /* @__PURE__ */ jsx8("span", { style: { fontSize: Math.round(valueFont / 2), color: css7("muted-foreground"), marginLeft: 6 }, children: unit }) : null
-            ]
-          }
-        ),
-        sample?.occurredTime ? /* @__PURE__ */ jsx8("div", { style: { fontSize: 11, color: css7("muted-foreground"), marginTop: 4 }, children: formatTimestamp(sample.occurredTime, timeZone) }) : null
-      ]
-    }
-  ) });
+  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 measured = size.width > 0 && size.height > 0;
+    const valuePx = measured ? fitValueFont2(size, chars, { floor }) : void 0;
+    const valueFont = valuePx ?? fitValueFontCss2(chars, { floor });
+    const showTimestamp = valuePx === void 0 || size.height - Math.ceil(valuePx * 1.1) >= TIMESTAMP_ROOM_PX * scale;
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "safe center",
+          height: "100%",
+          boxSizing: "border-box",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              "data-threshold-level": band?.level,
+              title: band?.label,
+              style: {
+                fontSize: valueFont,
+                fontWeight: 600,
+                lineHeight: 1.1,
+                // One line, and digits of one width: the fit counts characters, so a live value
+                // must not wrap or shift sideways as its digits change.
+                whiteSpace: "nowrap",
+                fontVariantNumeric: "tabular-nums",
+                color: valueColor,
+                ...flashTextStyle(flashDirection)
+              },
+              children: [
+                display,
+                sample?.value != null && unit ? /* @__PURE__ */ jsx9(
+                  "span",
+                  {
+                    style: {
+                      fontSize: valuePx !== void 0 ? Math.round(valuePx / 2) : `calc(${valueFont} / 2)`,
+                      color: css8("muted-foreground"),
+                      marginLeft: spaceVar3(1)
+                    },
+                    children: unit
+                  }
+                ) : null
+              ]
+            }
+          ),
+          sample?.occurredTime && showTimestamp ? /* @__PURE__ */ jsx9("div", { style: { fontSize: fontVar7("xs"), color: css8("muted-foreground"), marginTop: spaceVar3(1) }, children: formatTimestamp(sample.occurredTime, timeZone) }) : null
+        ]
+      }
+    );
+  } });
 }
-var latestCardWidget = defineWidget8({
+var latestCardWidget = defineWidget10({
   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({
+  descriptor: builtinWidgetDescriptors["linear-gauge"],
+  implementation: { kind: "trusted-react", component: lazyComponent("LinearGauge") }
+});
+var levelGaugeWidget = defineWidget11({
+  descriptor: builtinWidgetDescriptors["level-gauge"],
+  implementation: { kind: "trusted-react", component: lazyComponent("LevelGauge") }
+});
+var batteryWidget = defineWidget11({
+  descriptor: builtinWidgetDescriptors["battery"],
+  implementation: { kind: "trusted-react", component: lazyComponent("Battery") }
+});
+var statusLightWidget = defineWidget11({
+  descriptor: builtinWidgetDescriptors["status-light"],
+  implementation: { kind: "trusted-react", component: lazyComponent("StatusLight") }
+});
+var signalBarsWidget = defineWidget11({
+  descriptor: builtinWidgetDescriptors["signal-bars"],
+  implementation: { kind: "trusted-react", component: lazyComponent("SignalBars") }
+});
+var compassWidget = defineWidget11({
+  descriptor: builtinWidgetDescriptors["compass"],
+  implementation: { kind: "trusted-react", component: lazyComponent("Compass") }
+});
+var progressRingWidget = defineWidget11({
+  descriptor: builtinWidgetDescriptors["progress-ring"],
+  implementation: { kind: "trusted-react", component: lazyComponent("ProgressRing") }
+});
+
 // src/widgets/map.tsx
-import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect4, useRef as useRef2, useState as useState6 } from "react";
 import { renderableBasemap, resolveBasemap } from "@devicechain/client";
 
 // src/basemap-context.tsx
 import { createContext, useContext } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var TenantBasemapContext = createContext(null);
 function TenantBasemapProvider({
   basemap,
   children
 }) {
-  return /* @__PURE__ */ jsx9(TenantBasemapContext.Provider, { value: basemap, children });
+  return /* @__PURE__ */ jsx10(TenantBasemapContext.Provider, { value: basemap, children });
 }
 function useTenantBasemap() {
   return useContext(TenantBasemapContext);
@@ -1483,13 +2209,13 @@ function useTenantBasemap() {
 
 // src/map-runtime-context.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var MapRuntimeContext = createContext2(null);
 function MapRuntimeProvider({
   runtime,
   children
 }) {
-  return /* @__PURE__ */ jsx10(MapRuntimeContext.Provider, { value: runtime, children });
+  return /* @__PURE__ */ jsx11(MapRuntimeContext.Provider, { value: runtime, children });
 }
 function useMapRuntime() {
   return useContext2(MapRuntimeContext);
@@ -1497,9 +2223,10 @@ function useMapRuntime() {
 
 // src/widgets/map.tsx
 import {
-  css as css8,
-  defineWidget as defineWidget9,
-  optString as optString10,
+  css as css9,
+  fontVar as fontVar8,
+  defineWidget as defineWidget12,
+  optString as optString9,
   WidgetFrame as WidgetFrame9
 } from "@devicechain/widget-sdk";
 
@@ -1596,7 +2323,7 @@ function loadLandStyle() {
 }
 
 // src/widgets/map.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var mapLibrePromise;
 function loadMapLibre(runtime) {
   if (!mapLibrePromise) {
@@ -1612,20 +2339,20 @@ function loadMapLibre(runtime) {
 }
 var SINGLE_DEVICE_ZOOM = 14;
 function MapWidget({ widget, data }) {
-  const title = optString10(widget.options, "title");
+  const title = optString9(widget.options, "title");
   const positions = placeable(data.locations);
   const runtime = useMapRuntime();
   const basemap = renderableBasemap(
     resolveBasemap(
       {
-        tileUrl: optString10(widget.options, "tileUrl"),
-        attribution: optString10(widget.options, "attribution")
+        tileUrl: optString9(widget.options, "tileUrl"),
+        attribution: optString9(widget.options, "attribution")
       },
       useTenantBasemap()
     )
   );
   if (data.forbidden) {
-    return /* @__PURE__ */ jsx11(WidgetFrame9, { title, children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(WidgetFrame9, { title, children: /* @__PURE__ */ jsx12(
       MapNotice,
       {
         glyph: "\u{1F512}",
@@ -1635,7 +2362,7 @@ function MapWidget({ widget, data }) {
     ) });
   }
   if (!runtime) {
-    return /* @__PURE__ */ jsx11(WidgetFrame9, { title, children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(WidgetFrame9, { title, children: /* @__PURE__ */ jsx12(
       MapNotice,
       {
         glyph: "\u{1F9E9}",
@@ -1645,10 +2372,10 @@ function MapWidget({ widget, data }) {
     ) });
   }
   if (data.loading && positions.length === 0) {
-    return /* @__PURE__ */ jsx11(WidgetFrame9, { title, children: /* @__PURE__ */ jsx11(MapNotice, { heading: "Loading\u2026" }) });
+    return /* @__PURE__ */ jsx12(WidgetFrame9, { title, children: /* @__PURE__ */ jsx12(MapNotice, { heading: "Loading\u2026" }) });
   }
   if (positions.length === 0) {
-    return /* @__PURE__ */ jsx11(WidgetFrame9, { title, children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(WidgetFrame9, { title, children: /* @__PURE__ */ jsx12(
       MapNotice,
       {
         heading: data.deviceTokens.length === 0 ? "No devices selected" : "No positions reported",
@@ -1656,11 +2383,11 @@ function MapWidget({ widget, data }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx11(WidgetFrame9, { title, bodyStyle: { padding: 0 }, children: /* @__PURE__ */ jsx11(LiveMap, { basemap, positions, runtime }) });
+  return /* @__PURE__ */ jsx12(WidgetFrame9, { title, flush: true, children: /* @__PURE__ */ jsx12(LiveMap, { basemap, positions, runtime }) });
 }
 function PlainPanel({ positions, note }) {
   const points = projectToPanel(positions);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       "data-testid": "map-plain-panel",
@@ -1669,10 +2396,10 @@ function PlainPanel({ positions, note }) {
         width: "100%",
         height: "100%",
         overflow: "hidden",
-        background: css8("muted")
+        background: css9("muted")
       },
       children: [
-        positions.map((position, i) => /* @__PURE__ */ jsx11(
+        positions.map((position, i) => /* @__PURE__ */ jsx12(
           Marker,
           {
             position,
@@ -1685,7 +2412,7 @@ function PlainPanel({ positions, note }) {
           },
           position.deviceToken
         )),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "div",
           {
             "data-testid": "map-no-tiles-note",
@@ -1695,11 +2422,11 @@ function PlainPanel({ positions, note }) {
               right: 0,
               bottom: 0,
               padding: "4px 8px",
-              fontSize: 10,
+              fontSize: fontVar8("sm"),
               lineHeight: 1.3,
               textAlign: "center",
-              color: css8("muted-foreground"),
-              background: css8("card"),
+              color: css9("muted-foreground"),
+              background: css9("card"),
               opacity: 0.9
             },
             children: note
@@ -1717,10 +2444,10 @@ function LiveMap({
   const containerRef = useRef2(null);
   const mapRef = useRef2(null);
   const markersRef = useRef2([]);
-  const [status, setStatus] = useState4("loading");
+  const [status, setStatus] = useState6("loading");
   const tileUrl = basemap?.tileUrl ?? null;
   const attribution = basemap?.attribution ?? null;
-  useEffect3(() => {
+  useEffect4(() => {
     let cancelled = false;
     setStatus("loading");
     Promise.all([
@@ -1748,7 +2475,7 @@ function LiveMap({
       mapRef.current = null;
     };
   }, [tileUrl, attribution, runtime.workerUrl]);
-  useEffect3(() => {
+  useEffect4(() => {
     const map = mapRef.current;
     if (status !== "ready" || !map) return;
     let live = true;
@@ -1777,7 +2504,7 @@ function LiveMap({
     };
   }, [status, positionsKey(positions)]);
   if (status === "unavailable") {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       PlainPanel,
       {
         positions,
@@ -1785,7 +2512,7 @@ function LiveMap({
       }
     );
   }
-  return /* @__PURE__ */ jsx11("div", { ref: containerRef, "data-testid": "map-canvas", style: { width: "100%", height: "100%" } });
+  return /* @__PURE__ */ jsx12("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("|");
@@ -1794,8 +2521,8 @@ var MARKER_DOT_STYLE = {
   width: "12px",
   height: "12px",
   borderRadius: "50%",
-  background: css8("primary"),
-  border: `2px solid ${css8("card")}`,
+  background: css9("primary"),
+  border: `2px solid ${css9("card")}`,
   boxShadow: "0 0 0 1px rgba(0,0,0,0.25)",
   cursor: "default"
 };
@@ -1804,7 +2531,7 @@ function Marker({
   style
 }) {
   const label = describePosition(position);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       "data-testid": "map-marker",
@@ -1816,72 +2543,74 @@ function Marker({
   );
 }
 function MapNotice({ glyph, heading, detail }) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       style: {
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        justifyContent: "center",
+        justifyContent: "safe center",
+        overflow: "hidden",
         gap: 4,
         width: "100%",
         height: "100%",
-        padding: 12,
         boxSizing: "border-box",
         textAlign: "center",
-        color: css8("muted-foreground")
+        color: css9("muted-foreground")
       },
       children: [
-        glyph ? /* @__PURE__ */ jsx11("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: glyph }) : null,
-        /* @__PURE__ */ jsx11("div", { style: { fontSize: 13, fontWeight: 600 }, children: heading }),
-        detail ? /* @__PURE__ */ jsx11("div", { style: { fontSize: 11, opacity: 0.8 }, children: detail }) : null
+        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
       ]
     }
   );
 }
-var mapWidget = defineWidget9({
+var mapWidget = defineWidget12({
   descriptor: builtinWidgetDescriptors["map"],
   implementation: { kind: "trusted-react", component: MapWidget }
 });
 
 // src/widgets/table.tsx
 import {
-  css as css9,
-  defineWidget as defineWidget10,
+  css as css10,
+  defineWidget as defineWidget13,
+  fontVar as fontVar9,
+  spaceVar as spaceVar4,
   FlashValue as FlashValue2,
   formatTimestamp as formatTimestamp2,
   optBoolean as optBoolean4,
-  optNumber as optNumber6,
-  optString as optString11,
+  optNumber as optNumber5,
+  optString as optString10,
   useWidgetTimeZone as useWidgetTimeZone4,
   WidgetFrame as WidgetFrame10
 } from "@devicechain/widget-sdk";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var cell2 = { padding: "6px 12px", textAlign: "left" };
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var cell2 = { padding: `${spaceVar4(1)} ${spaceVar4(3)}`, textAlign: "left" };
 var headCell2 = {
   ...cell2,
-  fontSize: 11,
+  fontSize: fontVar9("xs"),
   fontWeight: 600,
   textTransform: "uppercase",
   letterSpacing: "0.04em",
-  color: css9("muted-foreground"),
-  borderBottom: `1px solid ${css9("border")}`
+  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 = optNumber6(widget.options, "precision");
+  const precision = optNumber5(widget.options, "precision");
   const flash = optBoolean4(widget.options, "flashOnChange");
-  return /* @__PURE__ */ jsx12(WidgetFrame10, { title: optString11(widget.options, "title"), children: /* @__PURE__ */ jsx12("div", { style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxs7("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 13, color: css9("foreground") }, children: [
-    /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs7("tr", { children: [
-      /* @__PURE__ */ jsx12("th", { style: headCell2, children: "Measurement" }),
-      /* @__PURE__ */ jsx12("th", { style: headCell2, children: "Value" }),
-      /* @__PURE__ */ jsx12("th", { style: headCell2, children: "Time" })
+  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__ */ jsx12("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx12("tr", { children: /* @__PURE__ */ jsx12("td", { colSpan: 3, style: { ...cell2, textAlign: "center", color: css9("muted-foreground") }, children: "No data yet" }) }) : rows.map((row) => /* @__PURE__ */ jsxs7("tr", { children: [
-      /* @__PURE__ */ jsx12("td", { style: cell2, children: row.name }),
-      /* @__PURE__ */ jsx12("td", { style: { ...cell2, fontVariantNumeric: "tabular-nums" }, children: /* @__PURE__ */ jsx12(
+    /* @__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,
@@ -1890,36 +2619,105 @@ function Table({ widget, data }) {
           identity: `${row.deviceToken}:${row.name}`
         }
       ) }),
-      /* @__PURE__ */ jsx12("td", { style: { ...cell2, color: css9("muted-foreground") }, children: formatTimestamp2(row.occurredTime, timeZone) })
+      /* @__PURE__ */ jsx13("td", { style: { ...cell2, color: css10("muted-foreground") }, children: formatTimestamp2(row.occurredTime, timeZone) })
     ] }, row.name)) })
   ] }) }) });
 }
-var tableWidget = defineWidget10({
+var tableWidget = defineWidget13({
   descriptor: builtinWidgetDescriptors["table"],
   implementation: { kind: "trusted-react", component: Table }
 });
 
 // src/widgets/time-series-chart.tsx
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
+import { isValidSpanSeconds, spanLabel } from "@devicechain/dashboards";
 import {
-  defineWidget as defineWidget11,
-  optString as optString12,
-  useElementSize as useElementSize4,
+  css as css11,
+  defineWidget as defineWidget14,
+  fontVar as fontVar10,
+  formatDateTime as formatDateTime3,
+  formatTimestamp as formatTimestamp3,
+  optNumber as optNumber6,
+  optString as optString11,
+  optThresholds as optThresholds3,
+  spaceVar as spaceVar5,
+  useWidgetScale as useWidgetScale3,
+  useWidgetTimeRange,
+  useWidgetTimeZone as useWidgetTimeZone5,
+  viewerLocale,
   WidgetFrame as WidgetFrame11
 } from "@devicechain/widget-sdk";
 import { buildLineOption, EChart as EChart2, useChartTheme as useChartTheme2 } from "@devicechain/widget-sdk/echarts";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } 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 }) });
+}
+function TimeSeriesBody({ widget, data }) {
   const theme = useChartTheme2();
-  const [sizeRef, size] = useElementSize4();
+  const { size, scale } = useWidgetScale3();
   const measurements = widget.datasource?.measurements;
-  const option = useMemo3(
-    () => buildLineOption(data.samples, theme, { measurements }, size),
-    [data.samples, theme, measurements, size.width, size.height]
+  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]
+  );
+  return /* @__PURE__ */ jsxs9("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ jsx14(EChart2, { option }),
+    /* @__PURE__ */ jsx14(SpanBadge, { widget, data })
+  ] });
+}
+var SPAN_STRINGS = {
+  en: {
+    from: (time) => `from ${time}`,
+    pinned: (span) => `Pinned to ${span}: the board's time range does not apply to this chart.`,
+    cut: (time, span) => `Showing from ${time}, not the whole ${span}: older samples were dropped to bound memory.`
+  },
+  es: {
+    from: (time) => `desde ${time}`,
+    pinned: (span) => `Fijado a ${span}: el intervalo de tiempo del panel no se aplica a este gr\xE1fico.`,
+    cut: (time, span) => `Se muestra desde ${time}, no todo el intervalo de ${span}: se descartaron las muestras m\xE1s antiguas para acotar la memoria.`
+  }
+};
+var DAY_MS = 864e5;
+function SpanBadge({ widget, data }) {
+  const range = useWidgetTimeRange();
+  const timeZone = useWidgetTimeZone5();
+  const pinned = optNumber6(widget.options, "windowSeconds");
+  const span = isValidSpanSeconds(pinned) ? pinned : range?.spanSeconds;
+  const showSpan = range !== void 0 && span !== range.spanSeconds;
+  const cutAt = data.truncatedBefore;
+  if (!showSpan && !cutAt) return null;
+  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 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(
+    "span",
+    {
+      "data-chart-span": showSpan ? label : "",
+      "data-chart-truncated": cutAt ? "" : void 0,
+      title,
+      style: {
+        position: "absolute",
+        top: spaceVar5(1),
+        right: spaceVar5(2),
+        padding: `0 ${spaceVar5(1)}`,
+        fontSize: fontVar10("xs"),
+        whiteSpace: "nowrap",
+        color: css11("muted-foreground"),
+        background: css11("muted"),
+        borderRadius: 4,
+        pointerEvents: "auto"
+      },
+      children: text
+    }
   );
-  return /* @__PURE__ */ jsx13(WidgetFrame11, { title: optString12(widget.options, "title"), children: /* @__PURE__ */ jsx13("div", { ref: sizeRef, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx13(EChart2, { option }) }) });
 }
-var timeSeriesChartWidget = defineWidget11({
+var timeSeriesChartWidget = defineWidget14({
   descriptor: builtinWidgetDescriptors["timeseries-chart"],
   implementation: { kind: "trusted-react", component: TimeSeriesChart }
 });
@@ -1936,7 +2734,20 @@ var builtinWidgetDefinitions = [
   alarmCountWidget,
   commandButtonWidget,
   entitySelectorWidget,
-  mapWidget
+  mapWidget,
+  linearGaugeWidget,
+  levelGaugeWidget,
+  batteryWidget,
+  statusLightWidget,
+  signalBarsWidget,
+  compassWidget,
+  progressRingWidget,
+  commandSliderWidget,
+  commandToggleWidget,
+  statCardWidget,
+  barChartWidget,
+  pieChartWidget,
+  fleetTableWidget
 ];
 function createBuiltinWidgetRegistry() {
   return createWidgetRegistry(builtinWidgetDefinitions);
@@ -1951,7 +2762,7 @@ function defaultWidgetRegistry() {
 
 // src/connected-widget.tsx
 import {
-  optString as optString13,
+  optString as optString12,
   useAlarmStream,
   useCommandStream,
   useDatasourceAvailability,
@@ -1963,7 +2774,7 @@ import {
 } from "@devicechain/widget-sdk";
 
 // src/widget-containment.tsx
-import { Component, createContext as createContext3, useCallback, useContext as useContext3, useState as useState5 } from "react";
+import { Component, createContext as createContext3, useCallback, useContext as useContext3, useState as useState7 } from "react";
 import { WidgetFrame as WidgetFrame12 } from "@devicechain/widget-sdk";
 
 // src/widget-host.ts
@@ -2022,7 +2833,7 @@ function narrowCandidates(candidates, descriptor, report) {
 }
 
 // src/widget-containment.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var MESSAGE_STYLE = {
   display: "flex",
   flexDirection: "column",
@@ -2066,23 +2877,23 @@ var WidgetErrorBoundary = class extends Component {
   render() {
     const { error } = this.state;
     if (!error) return this.props.children;
-    return /* @__PURE__ */ jsx14(WidgetFrame12, { title: this.props.title, children: /* @__PURE__ */ jsxs8("div", { style: MESSAGE_STYLE, role: "alert", children: [
-      /* @__PURE__ */ jsx14("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: "\u26A0" }),
-      /* @__PURE__ */ jsx14("div", { style: { fontSize: 13, fontWeight: 600 }, children: "This widget failed to render" }),
-      /* @__PURE__ */ jsx14("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: error.message }),
-      /* @__PURE__ */ jsx14("button", { type: "button", style: BUTTON_STYLE, onClick: this.reset, children: "Reset widget" })
+    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" })
     ] }) });
   }
 };
 function WidgetContainment({ title, resetKey, children }) {
-  const [messages, setMessages] = useState5([]);
+  const [messages, setMessages] = useState7([]);
   const report = useCallback((message) => {
     setMessages((prev) => prev.includes(message) ? prev : [...prev, message].slice(-3));
   }, []);
   const clear = useCallback(() => setMessages([]), []);
-  return /* @__PURE__ */ jsxs8("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsx14(ReportContext.Provider, { value: report, children: /* @__PURE__ */ jsx14(WidgetErrorBoundary, { title, resetKey, onReset: clear, children }) }),
-    messages.length > 0 && /* @__PURE__ */ jsxs8(
+  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(
       "div",
       {
         role: "status",
@@ -2101,8 +2912,8 @@ function WidgetContainment({ title, resetKey, children }) {
           alignItems: "center"
         },
         children: [
-          /* @__PURE__ */ jsx14("span", { style: { flex: 1, wordBreak: "break-word" }, children: messages.join(" \xB7 ") }),
-          /* @__PURE__ */ jsx14("button", { type: "button", "aria-label": "Dismiss", onClick: clear, style: { cursor: "pointer" }, children: "\xD7" })
+          /* @__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" })
         ]
       }
     )
@@ -2110,12 +2921,12 @@ function WidgetContainment({ title, resetKey, children }) {
 }
 
 // src/connected-widget.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } 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__ */ jsx15(WidgetContainment, { title: optString13(widget.options, "title"), resetKey, children: /* @__PURE__ */ jsx15(ConnectedWidgetBody, { ...props, registry }) });
+  return /* @__PURE__ */ jsx16(WidgetContainment, { title: optString12(widget.options, "title"), resetKey, children: /* @__PURE__ */ jsx16(ConnectedWidgetBody, { ...props, registry }) });
 }
 function ConnectedWidgetBody({ widget, hub, registry, actions, initialSamples }) {
   const unresolved = widget.type === UNKNOWN_WIDGET_TYPE;
@@ -2124,13 +2935,13 @@ function ConnectedWidgetBody({ widget, hub, registry, actions, initialSamples })
   const readsDatasource = descriptor !== void 0 && descriptor.datasource.mode !== "none";
   const availability = useDatasourceAvailability(hub, readsDatasource ? widget.datasource : void 0);
   if (availability === "unavailable") {
-    return /* @__PURE__ */ jsx15(WidgetUnavailableFrame, { widget });
+    return /* @__PURE__ */ jsx16(WidgetUnavailableFrame, { widget });
   }
   if (widget.type === UNKNOWN_WIDGET_TYPE) {
-    return /* @__PURE__ */ jsx15(UnresolvedWidgetFrame, { storedType: widget.raw.type, reason: widget.reason });
+    return /* @__PURE__ */ jsx16(UnresolvedWidgetFrame, { storedType: widget.raw.type, reason: widget.reason });
   }
   if (!descriptor || !implementation) {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       UnresolvedWidgetFrame,
       {
         storedType: widget.type,
@@ -2138,7 +2949,7 @@ function ConnectedWidgetBody({ widget, hub, registry, actions, initialSamples })
       }
     );
   }
-  return /* @__PURE__ */ jsx15(HostScope, { descriptor, actions, children: (hostActions) => /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(HostScope, { descriptor, actions, children: (hostActions) => /* @__PURE__ */ jsx16(
     ChannelBody,
     {
       widget,
@@ -2158,57 +2969,91 @@ function HostScope({
   const report = useReportRejection();
   const select = useWidgetSelect3();
   const candidates = useWidgetCandidates();
-  const narrowed = useMemo4(() => narrowActions(actions, descriptor, report), [actions, descriptor, report]);
-  const narrowedSelect = useMemo4(() => narrowSelect(select, descriptor), [select, descriptor]);
-  const narrowedCandidates = useMemo4(
+  const narrowed = useMemo5(() => narrowActions(actions, descriptor, report), [actions, descriptor, report]);
+  const narrowedSelect = useMemo5(() => narrowSelect(select, descriptor), [select, descriptor]);
+  const narrowedCandidates = useMemo5(
     () => narrowCandidates(candidates, descriptor, report),
     [candidates, descriptor, report]
   );
-  return /* @__PURE__ */ jsx15(WidgetSelectProvider, { select: narrowedSelect, children: /* @__PURE__ */ jsx15(WidgetCandidatesProvider, { candidates: narrowedCandidates, children: children(narrowed) }) });
+  return /* @__PURE__ */ jsx16(WidgetSelectProvider, { select: narrowedSelect, children: /* @__PURE__ */ jsx16(WidgetCandidatesProvider, { candidates: narrowedCandidates, children: children(narrowed) }) });
 }
 function ChannelBody(props) {
   switch (props.descriptor.channel) {
     case "alarm":
-      return /* @__PURE__ */ jsx15(AlarmConnectedWidget, { ...props });
+      return /* @__PURE__ */ jsx16(AlarmConnectedWidget, { ...props });
     case "control":
-      return /* @__PURE__ */ jsx15(ControlConnectedWidget, { ...props });
+      return /* @__PURE__ */ jsx16(ControlConnectedWidget, { ...props });
     case "location":
-      return /* @__PURE__ */ jsx15(LocationConnectedWidget, { ...props });
+      return /* @__PURE__ */ jsx16(LocationConnectedWidget, { ...props });
+    case "aggregate":
+      return /* @__PURE__ */ jsx16(AggregateConnectedWidget, { ...props });
     case "selection":
     case "none":
-      return /* @__PURE__ */ jsx15(StaticConnectedWidget, { ...props });
+      return /* @__PURE__ */ jsx16(StaticConnectedWidget, { ...props });
     case "measurement":
-      return /* @__PURE__ */ jsx15(MeasurementConnectedWidget, { ...props });
+      return /* @__PURE__ */ jsx16(MeasurementConnectedWidget, { ...props });
   }
 }
 function StaticConnectedWidget({ widget, Component: Component2, actions }) {
-  return /* @__PURE__ */ jsx15(Component2, { widget, data: null, actions });
+  return /* @__PURE__ */ jsx16(Component2, { widget, data: null, actions });
+}
+var FleetFeed = lazyChunk(() => import("./chunks/fleet-feed-FK4ZMKIK.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__ */ jsx16(StreamConnectedWidget, { ...props });
 }
-function MeasurementConnectedWidget({ widget, hub, descriptor, Component: Component2, actions, initialSamples }) {
+function StreamConnectedWidget({ widget, hub, descriptor, Component: Component2, actions, initialSamples }) {
+  const range = useWidgetTimeRange2();
+  const now = useMemo5(() => 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
   });
-  if (data.error) return /* @__PURE__ */ jsx15(WidgetErrorFrame, { widget, error: data.error });
-  return /* @__PURE__ */ jsx15(Component2, { widget, data, actions });
+  const freshness = useMemo5(() => {
+    if (descriptor.freshness !== true) return void 0;
+    const pinned = optString12(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 }) });
+}
+var AggregateFeed = lazyChunk(() => import("./chunks/aggregate-feed-6ZYKOQOB.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 });
 }
 function AlarmConnectedWidget({ widget, hub, descriptor, Component: Component2, actions }) {
-  const data = useAlarmStream(hub, alarmSubscription(descriptor, widget));
+  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__ */ jsx15(WidgetErrorFrame, { widget, error: data.error });
+    return /* @__PURE__ */ jsx16(WidgetErrorFrame, { widget, error: data.error });
   }
-  return /* @__PURE__ */ jsx15(Component2, { widget, data, actions });
+  return /* @__PURE__ */ jsx16(Component2, { widget, data, actions });
 }
 function ControlConnectedWidget({ widget, hub, descriptor, Component: Component2, actions }) {
   const data = useCommandStream(hub, commandSubscription(descriptor, widget));
-  return /* @__PURE__ */ jsx15(Component2, { widget, data, actions });
+  return /* @__PURE__ */ jsx16(Component2, { widget, data, actions });
 }
 function LocationConnectedWidget({ widget, hub, Component: Component2, actions }) {
-  const data = useLocationStream(hub, { datasource: widget.datasource });
+  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__ */ jsx15(WidgetErrorFrame, { widget, error: data.error });
+    return /* @__PURE__ */ jsx16(WidgetErrorFrame, { widget, error: data.error });
   }
-  return /* @__PURE__ */ jsx15(Component2, { widget, data, actions });
+  return /* @__PURE__ */ jsx16(Component2, { widget, data, actions });
 }
 function UnresolvedWidgetFrame({
   storedType: stored,
@@ -2216,7 +3061,7 @@ function UnresolvedWidgetFrame({
 }) {
   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__ */ jsx15(WidgetFrame13, { children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx16(WidgetFrame13, { children: /* @__PURE__ */ jsxs11(
     "div",
     {
       style: {
@@ -2233,18 +3078,18 @@ function UnresolvedWidgetFrame({
         color: "hsl(var(--muted-foreground))"
       },
       children: [
-        /* @__PURE__ */ jsx15("div", { style: { fontSize: 13, fontWeight: 600 }, children: heading }),
-        storedType && !reason?.message.includes(storedType) && /* @__PURE__ */ jsxs9("div", { style: { fontSize: 11, opacity: 0.8 }, 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: [
           "Widget type: ",
           storedType
         ] }),
-        reason && /* @__PURE__ */ jsx15("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: reason.message })
+        reason && /* @__PURE__ */ jsx16("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: reason.message })
       ]
     }
   ) });
 }
 function WidgetUnavailableFrame({ widget }) {
-  return /* @__PURE__ */ jsx15(WidgetFrame13, { title: optString13(widget.options, "title"), children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx16(WidgetFrame13, { title: optString12(widget.options, "title"), children: /* @__PURE__ */ jsxs11(
     "div",
     {
       style: {
@@ -2261,15 +3106,15 @@ function WidgetUnavailableFrame({ widget }) {
         color: "hsl(var(--muted-foreground))"
       },
       children: [
-        /* @__PURE__ */ jsx15("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: "\u2298" }),
-        /* @__PURE__ */ jsx15("div", { style: { fontSize: 13, fontWeight: 600 }, children: "Device unavailable" }),
-        /* @__PURE__ */ jsx15("div", { style: { fontSize: 11, opacity: 0.8 }, children: "The bound device no longer exists." })
+        /* @__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." })
       ]
     }
   ) });
 }
 function WidgetErrorFrame({ widget, error }) {
-  return /* @__PURE__ */ jsx15(WidgetFrame13, { title: optString13(widget.options, "title"), children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx16(WidgetFrame13, { title: optString12(widget.options, "title"), children: /* @__PURE__ */ jsxs11(
     "div",
     {
       style: {
@@ -2286,9 +3131,9 @@ function WidgetErrorFrame({ widget, error }) {
         color: "hsl(var(--muted-foreground))"
       },
       children: [
-        /* @__PURE__ */ jsx15("div", { style: { fontSize: 20, lineHeight: 1 }, children: "\u26A0" }),
-        /* @__PURE__ */ jsx15("div", { style: { fontSize: 13, fontWeight: 600 }, children: "Data unavailable" }),
-        /* @__PURE__ */ jsx15("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: String(error) })
+        /* @__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) })
       ]
     }
   ) });
@@ -2302,7 +3147,7 @@ import {
   WidgetThemeRootProvider,
   WidgetTimeZoneProvider
 } from "@devicechain/widget-sdk";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 function DashboardRenderer({
   definition,
   hub,
@@ -2314,57 +3159,164 @@ function DashboardRenderer({
   select,
   candidates,
   timeZone,
-  themeRoot
+  themeRoot,
+  density,
+  timeRange
 }) {
-  const breakpoint = useActiveBreakpoint(definition.canvas.breakpoints);
-  const widgets = useMemo5(() => resolveWidgets(definition.widgets, bindings), [definition.widgets, bindings]);
+  const widgets = useMemo6(() => resolveWidgets(definition.widgets, bindings), [definition.widgets, bindings]);
   const registry = registryProp ?? defaultWidgetRegistry();
-  const histories = useWidgetHistories(widgets, seedHistory, registry);
-  const { grid, background: bg } = definition.canvas;
-  const rowGap = typeof grid.gap === "number" ? grid.gap : grid.gap.row;
-  const colGap = typeof grid.gap === "number" ? grid.gap : grid.gap.col;
+  const defaultSeconds = definition.timeRange?.defaultSeconds;
+  const range = useMemo6(
+    () => timeRange ?? initialTimeRange(defaultSeconds),
+    [timeRange, defaultSeconds]
+  );
+  const histories = useWidgetHistories(widgets, seedHistory, registry, range);
+  const { grid, background: bg, frame: canvasFrame } = definition.canvas;
   const effectiveSizing = sizing ?? definition.canvas.sizing;
-  return /* @__PURE__ */ jsx16("div", { style: sizingStyle(effectiveSizing, bg), children: /* @__PURE__ */ jsx16(WidgetThemeRootProvider, { root: themeRoot, children: /* @__PURE__ */ jsx16(WidgetTimeZoneProvider, { timeZone, children: /* @__PURE__ */ jsx16(WidgetSelectProvider2, { select, children: /* @__PURE__ */ jsx16(WidgetCandidatesProvider2, { candidates, children: /* @__PURE__ */ jsx16(
+  const effectiveDensity = density ?? definition.canvas.density ?? DEFAULT_CANVAS_DENSITY;
+  const scale = densityScale(effectiveDensity);
+  const { canvas } = definition;
+  const shapeKey = useCallback2((width) => JSON.stringify(layoutShape(canvas, width, scale)), [canvas, scale]);
+  const [boardRef, containerWidth] = useContainerWidth(shapeKey);
+  const layout = useMemo6(
+    () => effectiveLayout(definition, containerWidth, {
+      scale,
+      limitsOf: (w) => w.type === UNKNOWN_WIDGET_TYPE2 ? void 0 : spanLimitsOfLayout(registry.descriptor(w.type)?.layout)
+    }),
+    [definition, containerWidth, scale, registry]
+  );
+  const { breakpoint, columns } = layout;
+  const lengths = gridCss(grid, columns);
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`,
-        gridAutoRows: `${grid.rowHeight}px`,
-        columnGap: colGap,
-        rowGap,
-        width: "100%"
-      },
-      children: widgets.map((widget) => {
-        const box = resolveWidgetBox(widget.layout, breakpoint);
-        return /* @__PURE__ */ jsx16("div", { style: gridItemStyle(box, grid.columns), children: /* @__PURE__ */ jsx16(WidgetSubjectProvider, { label: widgetSubjectLabel(widget), children: /* @__PURE__ */ jsx16(
-          ConnectedWidget,
+      ref: boardRef,
+      "data-density": effectiveDensity,
+      "data-columns": columns,
+      "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(
+          "div",
           {
-            widget,
-            hub,
-            registry,
-            actions,
-            initialSamples: histories[widget.id]
+            "data-grid": "",
+            style: {
+              display: "grid",
+              gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+              gridAutoRows: CELL,
+              columnGap: lengths.gutterX,
+              rowGap: lengths.gutterY,
+              width: "100%",
+              ...{ "--dc-cell": lengths.cell }
+            },
+            children: /* @__PURE__ */ jsx17(
+              PlacedWidgets,
+              {
+                widgets,
+                breakpoint,
+                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(
+                  ConnectedWidget,
+                  {
+                    widget,
+                    hub,
+                    registry,
+                    actions,
+                    initialSamples: histories[widget.id]
+                  }
+                ) }) })
+              }
+            )
           }
-        ) }) }, widget.id);
-      })
+        ) }) }) }) }) }) }) }) })
+      ]
     }
-  ) }) }) }) }) });
+  );
 }
-function gridItemStyle(box, columns) {
-  const col = Math.min(Math.max(0, box.col), columns - 1);
-  const colSpan = Math.min(Math.max(1, box.colSpan), columns - col);
+var CELL = "var(--dc-cell)";
+function gridLengthCss(len) {
+  if (typeof len === "number") return `calc(${len}px * var(--dc-scale, 1))`;
+  return len === "space-0" ? "0px" : `var(--dc-${len})`;
+}
+function gridCss(grid, columns) {
+  const g = grid.gutter;
+  const gutterX = gridLengthCss(typeof g === "object" ? g.x : g);
+  const gutterY = gridLengthCss(typeof g === "object" ? g.y : g);
+  const p = grid.padding;
+  const padding = typeof p === "object" ? [p.top, p.right, p.bottom, p.left].map(gridLengthCss).join(" ") : gridLengthCss(p);
+  return { gutterX, gutterY, padding, cell: `calc((100cqw - ${columns - 1} * ${gutterX}) / ${columns})` };
+}
+function widgetFrame(widget) {
+  return widget.type === UNKNOWN_WIDGET_TYPE2 ? void 0 : widget.frame;
+}
+function gridItemStyle(p, columns) {
+  const col = Math.min(Math.max(0, p.col), columns - 1);
+  const cols = Math.min(Math.max(1, p.cols), columns - col);
   return {
-    gridColumn: `${col + 1} / span ${colSpan}`,
-    gridRow: `${box.row + 1} / span ${box.rowSpan}`,
-    zIndex: box.z,
-    transform: box.offset ? `translate(${box.offset.x}px, ${box.offset.y}px)` : void 0,
+    gridColumn: `${col + 1} / span ${cols}`,
+    gridRow: `${p.row + 1} / span ${p.rows}`,
     // Let a grid item shrink below its content's intrinsic size so a wide chart/table
     // fits its track instead of overflowing it.
     minWidth: 0,
     minHeight: 0
   };
 }
+var RELATIVE_Z = 100;
+function relativeBoxStyle(p, lengths) {
+  const a = anchorFraction(p.anchor);
+  const s = anchorFraction(p.self ?? p.anchor);
+  const span = (n, gutter) => `calc(${n} * ${CELL} + ${n - 1} * ${gutter})`;
+  const pitches = (n, gutter) => `${n} * (${CELL} + ${gutter})`;
+  const fill = "fill" in p.size;
+  return {
+    position: "absolute",
+    left: `calc(${a.fx * 100}% + ${pitches(p.offset?.x ?? 0, lengths.gutterX)})`,
+    top: `calc(${a.fy * 100}% + ${pitches(p.offset?.y ?? 0, lengths.gutterY)})`,
+    width: fill ? "100%" : span(p.size.cols, lengths.gutterX),
+    height: fill ? "100%" : span(p.size.rows, lengths.gutterY),
+    transform: `translate(${-s.fx * 100}%, ${-s.fy * 100}%)`,
+    zIndex: RELATIVE_Z + (p.layer ?? 0),
+    pointerEvents: "auto"
+  };
+}
+function PlacedWidgets({
+  widgets,
+  breakpoint,
+  columns,
+  grid,
+  lengths,
+  render
+}) {
+  const placed = widgets.map((w) => ({ widget: w, placement: resolvePlacement(w.layout, breakpoint) }));
+  const dependents = /* @__PURE__ */ new Map();
+  for (const { widget, placement } of placed) {
+    if (placement.mode !== "relative") continue;
+    dependents.set(placement.host, [...dependents.get(placement.host) ?? [], { widget, placement }]);
+  }
+  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: [
+      render(widget),
+      relative(widget.id)
+    ] }, widget.id)
+  ));
+  return /* @__PURE__ */ jsx17(Fragment6, { 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) }),
+      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) })
+      ) : null
+    ] }, widget.id);
+  }) });
+}
 function sizingStyle(sizing, bg) {
   const base = {
     overflow: "auto",
@@ -2389,16 +3341,28 @@ function widgetSubjectLabel(widget) {
   if (ds.kind === "anchor") return ds.anchor.targetToken;
   return void 0;
 }
-function useActiveBreakpoint(breakpoints) {
-  const [width, setWidth] = useState6(
-    () => typeof window === "undefined" ? 0 : window.innerWidth
-  );
-  useEffect4(() => {
-    const onResize = () => setWidth(window.innerWidth);
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
+function useContainerWidth(keyOf) {
+  const ref = useRef3(null);
+  const [width, setWidth] = useState8(0);
+  const keyOfRef = useRef3(keyOf);
+  const measure = useCallback2(() => {
+    const el = ref.current;
+    if (!el) return;
+    const next = el.clientWidth;
+    setWidth((prev) => keyOfRef.current(prev) === keyOfRef.current(next) ? prev : next);
   }, []);
-  return activeBreakpoint(breakpoints, width);
+  useLayoutEffect(() => {
+    keyOfRef.current = keyOf;
+    measure();
+  }, [keyOf, measure]);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [measure]);
+  return [ref, width];
 }
 function seedKey(widget, registry) {
   if (widget.type === UNKNOWN_WIDGET_TYPE2 || registry.descriptor(widget.type)?.channel !== "measurement") {
@@ -2406,11 +3370,11 @@ function seedKey(widget, registry) {
   }
   return JSON.stringify(widget.datasource ?? null);
 }
-function useWidgetHistories(widgets, enabled, registry) {
-  const [seeds, setSeeds] = useState6({});
+function useWidgetHistories(widgets, enabled, registry, range) {
+  const [seeds, setSeeds] = useState8({});
   const requested = useRef3({});
   const mounted = useRef3(true);
-  useEffect4(() => {
+  useEffect5(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -2418,31 +3382,36 @@ function useWidgetHistories(widgets, enabled, registry) {
   }, []);
   const wanted = widgets.flatMap((w) => {
     const key = seedKey(w, registry);
-    return key === void 0 ? [] : [[w.id, key]];
+    if (key === void 0) return [];
+    const descriptor = w.type === UNKNOWN_WIDGET_TYPE2 ? void 0 : registry.descriptor(w.type);
+    const span = descriptor ? measurementSpan(descriptor, w, range.spanSeconds) ?? null : null;
+    return [[w.id, key, span]];
   });
   const wantedKey = JSON.stringify(wanted);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!enabled) {
       requested.current = {};
       setSeeds({});
       return;
     }
-    const historyWindow = defaultHistoryWindow();
+    const now = Date.now();
     const byId = new Map(widgets.map((w) => [w.id, w]));
     const next = {};
-    for (const [id, key] of wanted) {
-      next[id] = key;
-      if (requested.current[id] === key) continue;
+    for (const [id, key, span] of wanted) {
+      const asked = `${key}|${span ?? ""}`;
+      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] !== key) return;
+        if (!mounted.current || requested.current[id] !== asked) return;
         setSeeds((prev) => ({ ...prev, [id]: { key, samples } }));
       });
     }
     requested.current = next;
   }, [wantedKey, enabled]);
-  return useMemo5(() => {
+  return useMemo6(() => {
     const out = {};
     if (!enabled) return out;
     for (const w of widgets) {
@@ -2453,6 +3422,125 @@ function useWidgetHistories(widgets, enabled, registry) {
   }, [widgets, seeds, enabled, registry]);
 }
 
+// src/time-range-bar.tsx
+import {
+  DEFAULT_TIME_RANGE_SECONDS,
+  TIME_RANGE_PRESETS,
+  initialTimeRange as initialTimeRange2,
+  isValidSpanSeconds as isValidSpanSeconds2,
+  pauseRange,
+  presetIdOf,
+  resumeRange,
+  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";
+function useBoardTimeRange(defaultSeconds, link = {}) {
+  const [state, setState] = useState9(() => initialTimeRange2(defaultSeconds, link));
+  const lastDefault = useRef4(defaultSeconds);
+  useEffect6(() => {
+    if (lastDefault.current === defaultSeconds) return;
+    lastDefault.current = defaultSeconds;
+    setState((s) => withSpan(s, isValidSpanSeconds2(defaultSeconds) ? defaultSeconds : DEFAULT_TIME_RANGE_SECONDS));
+  }, [defaultSeconds]);
+  const controls = useMemo7(
+    () => ({
+      setSpan: (spanSeconds) => setState((s) => withSpan(s, spanSeconds)),
+      pause: () => setState((s) => pauseRange(s, Date.now())),
+      resume: () => setState((s) => resumeRange(s))
+    }),
+    []
+  );
+  return [state, controls];
+}
+var DEFAULT_TIME_RANGE_LABELS = {
+  range: "Time range",
+  pause: "Pause",
+  resume: "Resume",
+  paused: "Paused",
+  pausedAt: (time) => `Paused at ${time}`,
+  actionsLive: "commands still send"
+};
+var button = (active) => ({
+  padding: "2px 8px",
+  fontSize: 12,
+  lineHeight: "18px",
+  cursor: "pointer",
+  color: active ? "hsl(var(--background))" : "hsl(var(--foreground))",
+  background: active ? "hsl(var(--foreground))" : "transparent",
+  border: "1px solid hsl(var(--border))",
+  borderRadius: 4
+});
+function PausedIndicator({
+  pausedAt,
+  labels = DEFAULT_TIME_RANGE_LABELS
+}) {
+  const time = pausedAt === void 0 ? void 0 : new Date(pausedAt).toLocaleTimeString();
+  return /* @__PURE__ */ jsxs13(
+    "span",
+    {
+      role: "status",
+      "data-time-range-paused": "",
+      title: time ? labels.pausedAt(time) : labels.paused,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        padding: "2px 8px",
+        fontSize: 12,
+        fontWeight: 700,
+        letterSpacing: 0.4,
+        textTransform: "uppercase",
+        color: "hsl(var(--background))",
+        background: "hsl(var(--foreground))",
+        border: "2px solid hsl(var(--foreground))",
+        borderRadius: 4
+      },
+      children: [
+        /* @__PURE__ */ jsx18("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}` })
+      ]
+    }
+  );
+}
+function TimeRangeBar({
+  state,
+  controls,
+  labels = DEFAULT_TIME_RANGE_LABELS
+}) {
+  const preset = presetIdOf(state.spanSeconds);
+  const onPause = useCallback3(() => state.paused ? controls.resume() : controls.pause(), [state.paused, controls]);
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      "data-time-range-bar": "",
+      role: "group",
+      "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(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": p.id === preset,
+            "data-range": p.id,
+            onClick: () => controls.setSpan(p.seconds),
+            style: button(p.id === preset),
+            children: p.id
+          },
+          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
+      ]
+    }
+  );
+}
+
 // src/registry.ts
 var entries = Object.entries(builtinWidgetDescriptors);
 var WIDGET_CHANNEL = Object.freeze(
@@ -2542,7 +3630,7 @@ import {
   WidgetSelectProvider as WidgetSelectProvider3,
   useWidgetSelect as useWidgetSelect4,
   WidgetTimeZoneProvider as WidgetTimeZoneProvider2,
-  useWidgetTimeZone as useWidgetTimeZone5,
+  useWidgetTimeZone as useWidgetTimeZone6,
   WidgetThemeRootProvider as WidgetThemeRootProvider2,
   useWidgetThemeRoot,
   WidgetCandidatesProvider as WidgetCandidatesProvider3,
@@ -2551,16 +3639,19 @@ import {
   flashTextStyle as flashTextStyle2,
   flashBackgroundStyle as flashBackgroundStyle2,
   FlashValue as FlashValue3,
+  fitValueFont as fitValueFont3,
   useMeasurementStream as useMeasurementStream2,
   useAlarmStream as useAlarmStream2,
   useCommandStream as useCommandStream2,
   useLocationStream as useLocationStream2,
   useDatasourceAvailability as useDatasourceAvailability2,
   useDashboardHub,
+  useHubConnectionState,
+  HubConnectionBadge,
   useResolvedBindings,
   useSlotCandidates,
   useCandidates as useCandidates2,
-  css as css10
+  css as css12
 } from "@devicechain/widget-sdk";
 import {
   EChart as EChart3,
@@ -2575,18 +3666,22 @@ export {
   BUNDLED_BASEMAP_ATTRIBUTION,
   CommandButton,
   ConnectedWidget,
+  DEFAULT_TIME_RANGE_LABELS,
   DashboardRenderer,
   EChart3 as EChart,
   EntitySelector,
   FlashValue3 as FlashValue,
   Gauge,
+  HubConnectionBadge,
   Image,
   Label,
   LatestCard,
   MapRuntimeProvider,
   MapWidget,
+  PausedIndicator,
   Table,
   TenantBasemapProvider,
+  TimeRangeBar,
   TimeSeriesChart,
   WIDGET_BINDS_DATASOURCE,
   WIDGET_CHANNEL,
@@ -2607,10 +3702,11 @@ export {
   commandStatusColor,
   commandStatusLabel,
   createBuiltinWidgetRegistry,
-  css10 as css,
+  css12 as css,
   defaultValues,
   describePosition,
   enumOptionValues,
+  fitValueFont3 as fitValueFont,
   flashBackgroundStyle2 as flashBackgroundStyle,
   flashTextStyle2 as flashTextStyle,
   formatDegrees,
@@ -2633,12 +3729,14 @@ export {
   severityRank,
   stripUnknownOptions,
   useAlarmStream2 as useAlarmStream,
+  useBoardTimeRange,
   useCandidates2 as useCandidates,
   useChartTheme3 as useChartTheme,
   useCommandStream2 as useCommandStream,
   useDashboardHub,
   useDatasourceAvailability2 as useDatasourceAvailability,
   useFlashOnChange3 as useFlashOnChange,
+  useHubConnectionState,
   useLocationStream2 as useLocationStream,
   useMapRuntime,
   useMeasurementStream2 as useMeasurementStream,
@@ -2648,7 +3746,7 @@ export {
   useWidgetCandidates2 as useWidgetCandidates,
   useWidgetSelect4 as useWidgetSelect,
   useWidgetThemeRoot,
-  useWidgetTimeZone5 as useWidgetTimeZone,
+  useWidgetTimeZone6 as useWidgetTimeZone,
   validateDefinitionOptions,
   validateParams,
   validateWidgetOptions,