@devicechain/widgets 0.24.0-rc.1 → 0.25.0-rc.2

package/dist/index.js

@@ -1,21 +1,20 @@
+import {
+  EntitySelector
+} from "./chunks/chunk-FM7OI5TQ.js";
+import {
+  readRange
+} from "./chunks/chunk-ZR74ORIT.js";
 import {
   Table
-} from "./chunks/chunk-USRYKW2J.js";
+} from "./chunks/chunk-7BUCJQFP.js";
 import {
   ChunkLoadingFrame,
   lazyChunk
 } from "./chunks/chunk-BMFQOTYG.js";
 import {
-  alarmSubscription,
-  commandSubscription,
-  groupsAlarmsByDeviceType,
-  measurementIsMembersOnly,
-  measurementSpan,
-  measurementWindow,
-  membersMode,
-  presenceMode,
-  wantsEventMarkers
-} from "./chunks/chunk-JFH4QMLA.js";
+  useHeld
+} from "./chunks/chunk-XNEBAY4J.js";
+import "./chunks/chunk-JVC6JYUR.js";
 import {
   AlarmCount,
   AlarmSeverity,
@@ -37,25 +36,29 @@ import {
   validateParams
 } from "./chunks/chunk-XSLFHCNI.js";
 import {
-  useHeld
-} from "./chunks/chunk-XNEBAY4J.js";
+  alarmSubscription,
+  commandSubscription,
+  groupsAlarmsByDeviceType,
+  historyMode,
+  measurementIsMembersOnly,
+  measurementSpan,
+  measurementWindow,
+  membersMode,
+  presenceMode,
+  wantsEventMarkers
+} from "./chunks/chunk-NYHNQ5VR.js";
 import {
   accessStrings
 } from "./chunks/chunk-BRH66T5F.js";
-import {
-  EntitySelector
-} from "./chunks/chunk-FM7OI5TQ.js";
-import {
-  readRange
-} from "./chunks/chunk-ZR74ORIT.js";
 import {
   LevelReadout
-} from "./chunks/chunk-XQQQNTBX.js";
+} from "./chunks/chunk-EQOWBDS7.js";
 
 // src/dashboard-renderer.tsx
 import {
   anchorFraction,
   DEFAULT_CANVAS_DENSITY,
+  DEFAULT_TIME_RANGE_SECONDS,
   defaultHistoryWindow,
   effectiveLayout,
   historyWindowFor,
@@ -76,7 +79,7 @@ import {
   WidgetTimeRangeProvider,
   WidgetTokenStyles
 } from "@devicechain/widget-sdk";
-import { Fragment, useCallback as useCallback2, useEffect as useEffect3, useLayoutEffect, useMemo as useMemo5, useRef as useRef2, useState as useState4 } from "react";
+import { Fragment, useCallback as useCallback3, useEffect as useEffect4, useLayoutEffect, useMemo as useMemo5, useRef as useRef2, useState as useState5 } from "react";
 
 // src/connected-widget.tsx
 import {
@@ -86,12 +89,14 @@ import {
   newestSampleTime,
   resolveStaleAfterSeconds,
   WidgetCandidatesProvider,
+  WidgetDeclaredMetricsProvider,
   WidgetFreshnessProvider,
   WidgetSelectProvider,
+  useWidgetScale as useWidgetScale3,
   useWidgetTimeRange as useWidgetTimeRange2
 } from "@devicechain/widget-sdk";
 import { isForbiddenError } from "@devicechain/client";
-import { useEffect as useEffect2, useMemo as useMemo4, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo4, useState as useState4 } from "react";
 
 // src/builtin-registry.ts
 import { createWidgetRegistry } from "@devicechain/widget-sdk";
@@ -1228,12 +1233,45 @@ var builtinWidgetDescriptors = {
     freshness: true,
     interactions: {},
     layout: { defaultSpan: { cols: 4, rows: 4 }, minSpan: { cols: 3, rows: 3 }, maxSpan: { cols: 8, rows: 8 } }
+  }),
+  // One device's stored history as rows: a row per time bucket over the span, a column per
+  // measurement, each cell the bucket's AVERAGE (the table says "avg per 5m"). It reads the store's
+  // buckets (`binding.history`), never the live feed, so it is time-ranged and takes one device.
+  "history-table": defineRuntimeDescriptor({
+    id: "history-table",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "History table", category: "Telemetry", titleId: "widgetTypeHistoryTable", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ONE_DEVICE },
+    binding: { windowSeconds: { option: "windowSeconds" }, history: { const: true } },
+    options: {
+      title: TITLE,
+      columns: FLEET_COLUMNS,
+      precision: PRECISION,
+      oldestFirst: { kind: "boolean", labelId: "widgetLabelOldestFirst" },
+      pageSize: {
+        kind: "number",
+        integer: true,
+        min: 5,
+        max: 100,
+        labelId: "widgetLabelRowsPerPage"
+      },
+      staleAfterSeconds: STALE_AFTER_SECONDS,
+      windowSeconds: WINDOW_SECONDS
+    },
+    defaults: { title: "History table" },
+    // The frame's age is the table's: when its buckets were last read.
+    freshness: true,
+    interactions: {},
+    layout: { defaultSpan: { cols: 6, rows: 5 }, minSpan: { cols: 4, rows: 3 } }
   })
 };
 var builtinWidgetCatalog = createWidgetCatalog(Object.values(builtinWidgetDescriptors));
 
 // src/widgets/aggregate-lazy.tsx
-var chunk = lazyChunk(() => import("./chunks/aggregate-widgets-2ZQBW3YF.js"));
+var chunk = lazyChunk(() => import("./chunks/aggregate-widgets-72HMPMBU.js"));
 var loadAggregateWidgets = chunk.load;
 var statCardWidget = defineWidget({
   descriptor: builtinWidgetDescriptors["stat-card"],
@@ -1290,32 +1328,41 @@ var commandButtonWidget = defineWidget3({
   implementation: { kind: "trusted-react", component: chunk3.component("CommandButton") }
 });
 
-// src/widgets/presence-lazy.tsx
+// src/widgets/history-lazy.tsx
 import { defineWidget as defineWidget4 } from "@devicechain/widget-sdk";
-var chunk4 = lazyChunk(() => import("./chunks/presence-widgets-2LIUKN4Y.js"));
-var loadPresenceWidgets = chunk4.load;
-var deviceStatusWidget = defineWidget4({
+var chunk4 = lazyChunk(() => import("./chunks/history-widgets-NSNXDKEC.js"));
+var loadHistoryWidgets = chunk4.load;
+var historyTableWidget = defineWidget4({
+  descriptor: builtinWidgetDescriptors["history-table"],
+  implementation: { kind: "trusted-react", component: chunk4.component("HistoryTable") }
+});
+
+// src/widgets/presence-lazy.tsx
+import { defineWidget as defineWidget5 } from "@devicechain/widget-sdk";
+var chunk5 = lazyChunk(() => import("./chunks/presence-widgets-M5VGG3OO.js"));
+var loadPresenceWidgets = chunk5.load;
+var deviceStatusWidget = defineWidget5({
   descriptor: builtinWidgetDescriptors["device-status"],
-  implementation: { kind: "trusted-react", component: chunk4.component("DeviceStatus") }
+  implementation: { kind: "trusted-react", component: chunk5.component("DeviceStatus") }
 });
-var onlineDoughnutWidget = defineWidget4({
+var onlineDoughnutWidget = defineWidget5({
   descriptor: builtinWidgetDescriptors["online-doughnut"],
-  implementation: { kind: "trusted-react", component: chunk4.component("OnlineDoughnut") }
+  implementation: { kind: "trusted-react", component: chunk5.component("OnlineDoughnut") }
 });
 
 // src/widgets/selection-lazy.tsx
-import { defineWidget as defineWidget5 } from "@devicechain/widget-sdk";
-var chunk5 = lazyChunk(() => import("./chunks/entity-selector-3JJFI4DT.js"));
-var loadSelectionWidgets = chunk5.load;
-var entitySelectorWidget = defineWidget5({
+import { defineWidget as defineWidget6 } from "@devicechain/widget-sdk";
+var chunk6 = lazyChunk(() => import("./chunks/entity-selector-3JJFI4DT.js"));
+var loadSelectionWidgets = chunk6.load;
+var entitySelectorWidget = defineWidget6({
   descriptor: builtinWidgetDescriptors["entity-selector"],
-  implementation: { kind: "trusted-react", component: chunk5.component("EntitySelector") }
+  implementation: { kind: "trusted-react", component: chunk6.component("EntitySelector") }
 });
 
 // src/widgets/gauge.tsx
 import { useMemo } from "react";
 import {
-  defineWidget as defineWidget6,
+  defineWidget as defineWidget7,
   flashBackgroundStyle,
   formatValue,
   optBoolean,
@@ -1329,6 +1376,24 @@ import {
   WidgetFrame
 } from "@devicechain/widget-sdk";
 import { buildGaugeOption, EChart, gaugeReadoutBox, loadChartEngine, useChartTheme } from "@devicechain/widget-sdk/echarts";
+
+// src/widgets/no-reading-lazy.tsx
+import { useEffect, useState } from "react";
+var NoReading = lazyChunk(() => import("./chunks/no-reading-B4MPXAS2.js")).component("NoReading");
+function useSettledEmpty(empty, ms = 1500) {
+  const [settled, setSettled] = useState(false);
+  useEffect(() => {
+    if (!empty) {
+      setSettled(false);
+      return;
+    }
+    const timer = setTimeout(() => setSettled(true), ms);
+    return () => clearTimeout(timer);
+  }, [empty, ms]);
+  return empty && settled;
+}
+
+// src/widgets/gauge.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function Gauge({ widget, data }) {
   const name = primaryMeasurementName(widget);
@@ -1364,6 +1429,10 @@ function GaugeBody({ widget, data }) {
     "aria-valuenow": Math.min(range.range.max, Math.max(range.range.min, value)),
     "aria-valuetext": `${formatValue(value, precision)}${unit ? ` ${unit}` : ""}`
   } : {};
+  const explain = useSettledEmpty(value === void 0);
+  if (explain) {
+    return /* @__PURE__ */ jsx(NoReading, { unbound: widget.datasource?.kind === "unbound", measurement: name, waitMs: 0 });
+  }
   return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", height: "100%", ...flashBackgroundStyle(flashDirection) }, ...meter, children: [
     /* @__PURE__ */ jsx(EChart, { option }),
     /* @__PURE__ */ jsx(
@@ -1394,7 +1463,7 @@ function GaugeBody({ widget, data }) {
   ] });
 }
 Gauge.preload = loadChartEngine;
-var gaugeWidget = defineWidget6({
+var gaugeWidget = defineWidget7({
   descriptor: builtinWidgetDescriptors["gauge"],
   implementation: { kind: "trusted-react", component: Gauge }
 });
@@ -1402,7 +1471,7 @@ var gaugeWidget = defineWidget6({
 // src/widgets/image.tsx
 import {
   css,
-  defineWidget as defineWidget7,
+  defineWidget as defineWidget8,
   fontVar,
   optString as optString2,
   WidgetFrame as WidgetFrame2
@@ -1429,7 +1498,7 @@ function Image({ widget }) {
     }
   ) });
 }
-var imageWidget = defineWidget7({
+var imageWidget = defineWidget8({
   descriptor: builtinWidgetDescriptors["image"],
   implementation: { kind: "trusted-react", component: Image }
 });
@@ -1437,7 +1506,7 @@ var imageWidget = defineWidget7({
 // src/widgets/label.tsx
 import {
   css as css2,
-  defineWidget as defineWidget8,
+  defineWidget as defineWidget9,
   fontVar as fontVar2,
   spaceVar,
   optNumber as optNumber2,
@@ -1484,7 +1553,7 @@ function Label({ widget }) {
     }
   ) });
 }
-var labelWidget = defineWidget8({
+var labelWidget = defineWidget9({
   descriptor: builtinWidgetDescriptors["label"],
   implementation: { kind: "trusted-react", component: Label }
 });
@@ -1494,7 +1563,7 @@ import { useMemo as useMemo2 } from "react";
 import {
   bandAt,
   css as css3,
-  defineWidget as defineWidget9,
+  defineWidget as defineWidget10,
   fitValueFont,
   fitValueFontCss,
   FIT_MIN_FONT_PX,
@@ -1537,6 +1606,9 @@ function LatestCard({ widget, data }) {
   );
   const chars = useStickyChars(display.length + (sample?.value != null && unit ? Math.ceil(unit.length / 2) + 1 : 0));
   return /* @__PURE__ */ jsx4(WidgetFrame4, { title, sampleTime: sample?.occurredTime ?? null, children: ({ size, scale }) => {
+    if (sample?.value == null) {
+      return /* @__PURE__ */ jsx4(NoReading, { unbound: widget.datasource?.kind === "unbound", measurement: name });
+    }
     const floor = Math.round(FIT_MIN_FONT_PX * scale);
     const measured = size.width > 0 && size.height > 0;
     const valuePx = measured ? fitValueFont(size, chars, { floor }) : void 0;
@@ -1592,48 +1664,48 @@ function LatestCard({ widget, data }) {
     );
   } });
 }
-var latestCardWidget = defineWidget9({
+var latestCardWidget = defineWidget10({
   descriptor: builtinWidgetDescriptors["latest-card"],
   implementation: { kind: "trusted-react", component: LatestCard }
 });
 
 // src/widgets/level-lazy.tsx
-import { defineWidget as defineWidget10 } from "@devicechain/widget-sdk";
+import { defineWidget as defineWidget11 } from "@devicechain/widget-sdk";
 import { loadChartEngine as loadChartEngine2 } from "@devicechain/widget-sdk/echarts";
-var chunk6 = lazyChunk(() => import("./chunks/level-widgets-MJB7TOLU.js"));
-var loadLevelWidgets = chunk6.load;
-var lazyComponent = chunk6.component;
-var linearGaugeWidget = defineWidget10({
+var chunk7 = lazyChunk(() => import("./chunks/level-widgets-HE6EDSWC.js"));
+var loadLevelWidgets = chunk7.load;
+var lazyComponent = chunk7.component;
+var linearGaugeWidget = defineWidget11({
   descriptor: builtinWidgetDescriptors["linear-gauge"],
   implementation: { kind: "trusted-react", component: lazyComponent("LinearGauge") }
 });
-var levelGaugeWidget = defineWidget10({
+var levelGaugeWidget = defineWidget11({
   descriptor: builtinWidgetDescriptors["level-gauge"],
   implementation: { kind: "trusted-react", component: lazyComponent("LevelGauge") }
 });
-var batteryWidget = defineWidget10({
+var batteryWidget = defineWidget11({
   descriptor: builtinWidgetDescriptors["battery"],
   implementation: { kind: "trusted-react", component: lazyComponent("Battery") }
 });
-var statusLightWidget = defineWidget10({
+var statusLightWidget = defineWidget11({
   descriptor: builtinWidgetDescriptors["status-light"],
   implementation: { kind: "trusted-react", component: lazyComponent("StatusLight") }
 });
-var signalBarsWidget = defineWidget10({
+var signalBarsWidget = defineWidget11({
   descriptor: builtinWidgetDescriptors["signal-bars"],
   implementation: { kind: "trusted-react", component: lazyComponent("SignalBars") }
 });
-var compassWidget = defineWidget10({
+var compassWidget = defineWidget11({
   descriptor: builtinWidgetDescriptors["compass"],
   implementation: { kind: "trusted-react", component: lazyComponent("Compass", loadChartEngine2) }
 });
-var progressRingWidget = defineWidget10({
+var progressRingWidget = defineWidget11({
   descriptor: builtinWidgetDescriptors["progress-ring"],
   implementation: { kind: "trusted-react", component: lazyComponent("ProgressRing") }
 });
 
 // src/widgets/map.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { renderableBasemap, resolveBasemap } from "@devicechain/client";
 
 // src/basemap-context.tsx
@@ -1668,7 +1740,7 @@ function useMapRuntime() {
 import {
   css as css4,
   fontVar as fontVar4,
-  defineWidget as defineWidget11,
+  defineWidget as defineWidget12,
   optString as optString5,
   useWidgetSelect,
   WidgetFrame as WidgetFrame5
@@ -1897,13 +1969,13 @@ function LiveMap({
   const containerRef = useRef(null);
   const mapRef = useRef(null);
   const markersRef = useRef([]);
-  const [status, setStatus] = useState("loading");
+  const [status, setStatus] = useState2("loading");
   const pickRef = useRef(pick);
   pickRef.current = pick;
   const selectable = pick !== void 0;
   const tileUrl = basemap?.tileUrl ?? null;
   const attribution = basemap?.attribution ?? null;
-  useEffect(() => {
+  useEffect2(() => {
     let cancelled = false;
     setStatus("loading");
     Promise.all([
@@ -1931,7 +2003,7 @@ function LiveMap({
       mapRef.current = null;
     };
   }, [tileUrl, attribution, runtime.workerUrl]);
-  useEffect(() => {
+  useEffect2(() => {
     const map = mapRef.current;
     if (status !== "ready" || !map) return;
     let live = true;
@@ -2065,18 +2137,18 @@ function MapNotice({ glyph, heading, detail }) {
     }
   );
 }
-var mapWidget = defineWidget11({
+var mapWidget = defineWidget12({
   descriptor: builtinWidgetDescriptors["map"],
   implementation: { kind: "trusted-react", component: MapWidget }
 });
 
 // src/widgets/table-lazy.tsx
-import { defineWidget as defineWidget12 } from "@devicechain/widget-sdk";
-var chunk7 = lazyChunk(() => import("./chunks/table-6EVV7QZH.js"));
-var loadTableWidget = chunk7.load;
-var tableWidget = defineWidget12({
+import { defineWidget as defineWidget13 } from "@devicechain/widget-sdk";
+var chunk8 = lazyChunk(() => import("./chunks/table-CEVB3JZS.js"));
+var loadTableWidget = chunk8.load;
+var tableWidget = defineWidget13({
   descriptor: builtinWidgetDescriptors["table"],
-  implementation: { kind: "trusted-react", component: chunk7.component("Table") }
+  implementation: { kind: "trusted-react", component: chunk8.component("Table") }
 });
 
 // src/widgets/time-series-chart.tsx
@@ -2084,13 +2156,15 @@ import { useMemo as useMemo3 } from "react";
 import { isValidSpanSeconds, spanLabel } from "@devicechain/dashboards";
 import {
   css as css5,
-  defineWidget as defineWidget13,
+  defineWidget as defineWidget14,
   fontVar as fontVar5,
   formatDateTime,
   formatTimestamp as formatTimestamp2,
   optNumber as optNumber4,
   optString as optString6,
   optThresholds as optThresholds3,
+  pickSample as pickSample3,
+  primaryMeasurementName as primaryMeasurementName3,
   spaceVar as spaceVar3,
   useWidgetScale as useWidgetScale2,
   useWidgetTimeRange,
@@ -2101,7 +2175,23 @@ import {
 import { buildLineOption, EChart as EChart2, loadChartEngine as loadChartEngine3, useChartTheme as useChartTheme2 } from "@devicechain/widget-sdk/echarts";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function TimeSeriesChart({ widget, data, markers }) {
-  return /* @__PURE__ */ jsx8(WidgetFrame6, { title: optString6(widget.options, "title"), flush: true, children: /* @__PURE__ */ jsx8(TimeSeriesBody, { widget, data, markers }) });
+  const range = useWidgetTimeRange();
+  const pinned = optNumber4(widget.options, "windowSeconds");
+  const spanSeconds = isValidSpanSeconds(pinned) ? pinned : range?.spanSeconds;
+  const exportRows = () => {
+    const device = widget.datasource?.kind === "device" ? widget.datasource.deviceToken : void 0;
+    return import("./chunks/export-rows-OEWIBIUY.js").then(
+      (m) => m.samplesExport({
+        subject: optString6(widget.options, "title") ?? device ?? "chart",
+        samples: data.samples,
+        unit: optString6(widget.options, "unit"),
+        precision: optNumber4(widget.options, "precision"),
+        seriesIs: "measurement",
+        spanSeconds
+      })
+    );
+  };
+  return /* @__PURE__ */ jsx8(WidgetFrame6, { title: optString6(widget.options, "title"), flush: true, exportRows, children: /* @__PURE__ */ jsx8(TimeSeriesBody, { widget, data, markers }) });
 }
 function TimeSeriesBody({ widget, data, markers }) {
   const theme = useChartTheme2();
@@ -2116,6 +2206,21 @@ function TimeSeriesBody({ widget, data, markers }) {
     const base = buildLineOption(data.samples, theme, { measurements, unit, precision, thresholds, scale, gaps: data.gaps, min, max }, size);
     return markers ? markers.decorate(base, size) : base;
   }, [data.samples, data.gaps, theme, measurements, unit, precision, thresholds, scale, size, markers, min, max]);
+  const name = measurements && measurements.length > 1 ? void 0 : primaryMeasurementName3(widget);
+  const explain = useSettledEmpty(data.samples.length === 0);
+  if (explain) {
+    return /* @__PURE__ */ jsx8(
+      NoReading,
+      {
+        unbound: widget.datasource?.kind === "unbound",
+        measurement: name,
+        lastSample: pickSample3(data.latest, name),
+        unit,
+        precision,
+        waitMs: 0
+      }
+    );
+  }
   const chart = /* @__PURE__ */ jsxs4("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
     /* @__PURE__ */ jsx8(EChart2, { option }),
     /* @__PURE__ */ jsx8(SpanBadge, { widget, data })
@@ -2176,7 +2281,7 @@ function SpanBadge({ widget, data }) {
   );
 }
 TimeSeriesChart.preload = loadChartEngine3;
-var timeSeriesChartWidget = defineWidget13({
+var timeSeriesChartWidget = defineWidget14({
   descriptor: builtinWidgetDescriptors["timeseries-chart"],
   implementation: { kind: "trusted-react", component: TimeSeriesChart }
 });
@@ -2210,7 +2315,8 @@ var builtinWidgetDefinitions = [
   fleetTableWidget,
   fleetCountWidget,
   deviceStatusWidget,
-  onlineDoughnutWidget
+  onlineDoughnutWidget,
+  historyTableWidget
 ];
 function createBuiltinWidgetRegistry() {
   return createWidgetRegistry(builtinWidgetDefinitions);
@@ -2225,7 +2331,11 @@ function defaultWidgetRegistry() {
 
 // src/connected-widget.tsx
 import {
+  css as css6,
+  fontVar as fontVar6,
   optString as optString7,
+  spaceVar as spaceVar4,
+  viewerLocale as viewerLocale2,
   useAlarmStream,
   useCommandStream,
   useDatasourceAvailability,
@@ -2237,7 +2347,7 @@ import {
 } from "@devicechain/widget-sdk";
 
 // src/widget-containment.tsx
-import { Component, createContext as createContext3, useCallback, useContext as useContext3, useState as useState2 } from "react";
+import { Component, createContext as createContext3, useCallback, useContext as useContext3, useState as useState3 } from "react";
 import { WidgetFrame as WidgetFrame7 } from "@devicechain/widget-sdk";
 
 // src/widget-host.ts
@@ -2349,7 +2459,7 @@ var WidgetErrorBoundary = class extends Component {
   }
 };
 function WidgetContainment({ title, resetKey, children }) {
-  const [messages, setMessages] = useState2([]);
+  const [messages, setMessages] = useState3([]);
   const report = useCallback((message) => {
     setMessages((prev) => prev.includes(message) ? prev : [...prev, message].slice(-3));
   }, []);
@@ -2392,6 +2502,7 @@ function ConnectedWidget(props) {
   return /* @__PURE__ */ jsx10(WidgetContainment, { title: optString7(widget.options, "title"), resetKey, children: /* @__PURE__ */ jsx10(ConnectedWidgetBody, { ...props, registry }) });
 }
 function ConnectedWidgetBody({ widget, hub, registry, actions, initialSamples, initialSamplesAsOf, onReconnect }) {
+  const range = useWidgetTimeRange2();
   const unresolved = widget.type === UNKNOWN_WIDGET_TYPE;
   const descriptor = unresolved ? void 0 : registry.descriptor(widget.type);
   const implementation = unresolved ? void 0 : registry.implementation(widget.type);
@@ -2416,7 +2527,7 @@ function ConnectedWidgetBody({ widget, hub, registry, actions, initialSamples, i
       }
     );
   }
-  return /* @__PURE__ */ jsx10(HostScope, { descriptor, actions, children: (hostActions) => /* @__PURE__ */ jsx10(
+  const body = /* @__PURE__ */ jsx10(DeclaredScope, { hub, datasource: widget.datasource, children: /* @__PURE__ */ jsx10(HostScope, { descriptor, actions, children: (hostActions) => /* @__PURE__ */ jsx10(
     ChannelBody,
     {
       widget,
@@ -2428,12 +2539,50 @@ function ConnectedWidgetBody({ widget, hub, registry, actions, initialSamples, i
       initialSamplesAsOf,
       onReconnect
     }
-  ) });
+  ) }) });
+  return range?.absolute !== void 0 && showsCurrentStateOnly(descriptor) ? /* @__PURE__ */ jsx10(CurrentStateBadge, { children: body }) : body;
+}
+function showsCurrentStateOnly(descriptor) {
+  return descriptor.channel === "alarm" || descriptor.channel === "location" || presenceMode(descriptor);
+}
+var CURRENT_STATE_STRINGS = {
+  en: { label: "Now", title: "Shows the current state: the fixed time window does not apply to this widget." },
+  es: { label: "Ahora", title: "Muestra el estado actual: la ventana de tiempo fija no se aplica a este widget." }
+};
+function CurrentStateBadge({ children }) {
+  const words = viewerLocale2()?.toLowerCase().startsWith("es") ? CURRENT_STATE_STRINGS.es : CURRENT_STATE_STRINGS.en;
+  return /* @__PURE__ */ jsxs6("div", { "data-current-state": "", style: { position: "relative", width: "100%", height: "100%", minWidth: 0, minHeight: 0 }, children: [
+    children,
+    /* @__PURE__ */ jsx10(
+      "span",
+      {
+        "data-current-state-badge": "",
+        role: "note",
+        title: words.title,
+        "aria-label": words.title,
+        style: {
+          position: "absolute",
+          // Bottom LEFT: a map keeps its attribution bottom right, and a chart its span badge top right.
+          bottom: spaceVar4(1),
+          left: spaceVar4(2),
+          padding: `0 ${spaceVar4(1)}`,
+          fontSize: fontVar6("xs"),
+          fontWeight: 600,
+          whiteSpace: "nowrap",
+          color: css6("background"),
+          background: css6("foreground"),
+          borderRadius: 4,
+          zIndex: 1
+        },
+        children: words.label
+      }
+    )
+  ] });
 }
 function useDatasourceSupported(hub, datasource) {
   const key = datasource ? JSON.stringify(datasource) : null;
-  const [refused, setRefused] = useState3(null);
-  useEffect2(() => {
+  const [refused, setRefused] = useState4(null);
+  useEffect3(() => {
     if (!datasource || !hub.isDatasourceSupported) return;
     let cancelled = false;
     hub.isDatasourceSupported(datasource).then(
@@ -2450,6 +2599,26 @@ function useDatasourceSupported(hub, datasource) {
   }, [hub, key]);
   return refused === null || refused !== key;
 }
+function DeclaredScope({ hub, datasource, children }) {
+  const token = datasource?.kind === "device" && datasource.deviceToken ? datasource.deviceToken : void 0;
+  const [asked, setAsked] = useState4(false);
+  const [got, setGot] = useState4();
+  const ask = useCallback2(() => setAsked(true), []);
+  useEffect3(() => {
+    if (!asked || !token || !hub.declaredMetricsForDevice) return;
+    let live = true;
+    hub.declaredMetricsForDevice(token).then(
+      (names) => live && setGot({ token, names }),
+      () => void 0
+    );
+    return () => {
+      live = false;
+    };
+  }, [asked, token, hub]);
+  const declared = got && got.token === token ? got.names : void 0;
+  const value = useMemo4(() => ({ declared, ask }), [declared, ask]);
+  return /* @__PURE__ */ jsx10(WidgetDeclaredMetricsProvider, { value, children });
+}
 function HostScope({
   descriptor,
   actions,
@@ -2486,8 +2655,9 @@ function ChannelBody(props) {
 function StaticConnectedWidget({ widget, Component: Component2, actions }) {
   return /* @__PURE__ */ jsx10(Component2, { widget, data: null, actions });
 }
-var FleetFeed = lazyChunk(() => import("./chunks/fleet-feed-2SKDR6ZQ.js")).component("default", void 0, ChunkLoadingFrame);
-var PresenceFeed = lazyChunk(() => import("./chunks/presence-widgets-2LIUKN4Y.js")).component("PresenceFeed");
+var FleetFeed = lazyChunk(() => import("./chunks/fleet-feed-D4T3LC25.js")).component("default", void 0, ChunkLoadingFrame);
+var PresenceFeed = lazyChunk(() => import("./chunks/presence-widgets-M5VGG3OO.js")).component("PresenceFeed");
+var HistoryFeed = lazyChunk(() => import("./chunks/history-widgets-NSNXDKEC.js")).component("HistoryFeed");
 function MeasurementConnectedWidget(props) {
   if (presenceMode(props.descriptor)) {
     return /* @__PURE__ */ jsx10(PresenceFeed, { hub: props.hub, widget: props.widget, descriptor: props.descriptor, Component: props.Component, actions: props.actions, ErrorFrame: WidgetErrorFrame });
@@ -2497,6 +2667,9 @@ function MeasurementConnectedWidget(props) {
   if (members || widget.datasource?.kind === "anchor") {
     return /* @__PURE__ */ jsx10(FleetFeed, { hub, widget, descriptor, Component: Component2, actions, ErrorFrame: WidgetErrorFrame, refuse: !members });
   }
+  if (historyMode(descriptor)) {
+    return /* @__PURE__ */ jsx10(HistoryFeed, { hub, widget, descriptor, Component: Component2, actions });
+  }
   return /* @__PURE__ */ jsx10(StreamConnectedWidget, { ...props });
 }
 function StreamConnectedWidget({ widget, hub, descriptor, Component: Component2, actions, initialSamples, initialSamplesAsOf, onReconnect }) {
@@ -2523,8 +2696,8 @@ function StreamConnectedWidget({ widget, hub, descriptor, Component: Component2,
   if (data.error) return /* @__PURE__ */ jsx10(WidgetErrorFrame, { widget, error: data.error });
   return /* @__PURE__ */ jsx10(WidgetFreshnessProvider, { freshness, children: wantsEventMarkers(descriptor, widget) ? /* @__PURE__ */ jsx10(EventMarkersFeed, { hub, widget, descriptor, data, Component: Component2, actions }) : /* @__PURE__ */ jsx10(Component2, { widget, data, actions }) });
 }
-var EventMarkersFeed = lazyChunk(() => import("./chunks/event-markers-feed-GEGTIHXT.js")).component("default");
-var AggregateFeed = lazyChunk(() => import("./chunks/aggregate-feed-4FSBQYJL.js")).component("default");
+var EventMarkersFeed = lazyChunk(() => import("./chunks/event-markers-feed-B3MVFYUT.js")).component("default");
+var AggregateFeed = lazyChunk(() => import("./chunks/aggregate-feed-XX36GNY6.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__ */ jsx10(FleetFeed, { ...props, refuse: true }) : /* @__PURE__ */ jsx10(AggregateFeed, { ...props });
@@ -2600,52 +2773,45 @@ function UnresolvedWidgetFrame({
     }
   ) });
 }
+function StatePane({
+  widget,
+  kind,
+  glyph,
+  title,
+  detail
+}) {
+  return /* @__PURE__ */ jsx10(WidgetFrame8, { title: optString7(widget.options, "title"), children: /* @__PURE__ */ jsx10(StateBody, { kind, glyph, title, detail }) });
+}
+function StateBody({ kind, glyph, title, detail }) {
+  const { height } = useWidgetScale3().size;
+  const measured = height > 0;
+  return /* @__PURE__ */ jsxs6("div", { role: "status", "data-empty-state": kind, style: STATE_STYLE, children: [
+    !measured || height >= 84 ? /* @__PURE__ */ jsx10("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: glyph }) : null,
+    /* @__PURE__ */ jsx10("div", { style: { fontSize: 13, fontWeight: 600 }, children: title }),
+    detail && (!measured || height >= 64) ? /* @__PURE__ */ jsx10("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: detail }) : null
+  ] });
+}
 function WidgetForbiddenFrame({ widget }) {
-  return /* @__PURE__ */ jsx10(WidgetFrame8, { title: optString7(widget.options, "title"), children: /* @__PURE__ */ jsxs6("div", { role: "status", style: STATE_STYLE, children: [
-    /* @__PURE__ */ jsx10("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: "\u2298" }),
-    /* @__PURE__ */ jsx10("div", { style: { fontSize: 13, fontWeight: 600 }, children: accessStrings().forbidden })
-  ] }) });
+  return /* @__PURE__ */ jsx10(StatePane, { widget, kind: "forbidden", glyph: "\u2298", title: accessStrings().forbidden });
 }
 function WidgetUnavailableFrame({ widget }) {
-  return /* @__PURE__ */ jsx10(WidgetFrame8, { title: optString7(widget.options, "title"), children: /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      style: STATE_STYLE,
-      children: [
-        /* @__PURE__ */ jsx10("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: "\u2298" }),
-        /* @__PURE__ */ jsx10("div", { style: { fontSize: 13, fontWeight: 600 }, children: "Device unavailable" }),
-        /* @__PURE__ */ jsx10("div", { style: { fontSize: 11, opacity: 0.8 }, children: "The bound device no longer exists." })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsx10(StatePane, { widget, kind: "gone", glyph: "\u2298", title: "Device unavailable", detail: "The bound device no longer exists." });
 }
 function WidgetNotForCustomerUsersFrame({ widget }) {
-  return /* @__PURE__ */ jsx10(WidgetFrame8, { title: optString7(widget.options, "title"), children: /* @__PURE__ */ jsxs6(
-    "div",
+  return /* @__PURE__ */ jsx10(
+    StatePane,
     {
-      role: "status",
-      style: STATE_STYLE,
-      children: [
-        /* @__PURE__ */ jsx10("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: "\u2298" }),
-        /* @__PURE__ */ jsx10("div", { style: { fontSize: 13, fontWeight: 600 }, children: "Not available for customer users" }),
-        /* @__PURE__ */ jsx10("div", { style: { fontSize: 11, opacity: 0.8 }, children: "This widget is bound to an area or an asset, which customer users cannot view." })
-      ]
+      widget,
+      kind: "unsupported",
+      glyph: "\u2298",
+      title: "Not available for customer users",
+      detail: "This widget is bound to an area or an asset, which customer users cannot view."
     }
-  ) });
+  );
 }
 function WidgetErrorFrame({ widget, error }) {
   if (isForbiddenError(error)) return /* @__PURE__ */ jsx10(WidgetForbiddenFrame, { widget });
-  return /* @__PURE__ */ jsx10(WidgetFrame8, { title: optString7(widget.options, "title"), children: /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      style: STATE_STYLE,
-      children: [
-        /* @__PURE__ */ jsx10("div", { style: { fontSize: 20, lineHeight: 1 }, children: "\u26A0" }),
-        /* @__PURE__ */ jsx10("div", { style: { fontSize: 13, fontWeight: 600 }, children: "Data unavailable" }),
-        /* @__PURE__ */ jsx10("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: String(error) })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsx10(StatePane, { widget, kind: "error", glyph: "\u2026", title: "Data unavailable", detail: String(error) });
 }
 
 // src/dashboard-renderer.tsx
@@ -2680,12 +2846,13 @@ function DashboardRenderer({
     [timeRange, defaultSeconds]
   );
   const { histories, reseed } = useWidgetHistories(widgets, seedHistory, registry, range);
+  const windowKey = windowTag(range);
   const { grid, background: bg, frame: canvasFrame } = definition.canvas;
   const effectiveSizing = sizing ?? definition.canvas.sizing;
   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 shapeKey = useCallback3((width) => JSON.stringify(layoutShape(canvas, width, scale)), [canvas, scale]);
   const [boardRef, containerWidth] = useContainerWidth(shapeKey);
   const layout = useMemo5(
     () => effectiveLayout(definition, containerWidth, {
@@ -2737,7 +2904,8 @@ function DashboardRenderer({
                     initialSamples: histories[widget.id]?.samples,
                     initialSamplesAsOf: histories[widget.id]?.asOf,
                     onReconnect: () => reseed(widget.id)
-                  }
+                  },
+                  windowKey
                 ) }) })
               }
             )
@@ -2854,9 +3022,9 @@ function widgetSubjectLabel(widget) {
 }
 function useContainerWidth(keyOf) {
   const ref = useRef2(null);
-  const [width, setWidth] = useState4(0);
+  const [width, setWidth] = useState5(0);
   const keyOfRef = useRef2(keyOf);
-  const measure = useCallback2(() => {
+  const measure = useCallback3(() => {
     const el = ref.current;
     if (!el) return;
     const next = el.clientWidth;
@@ -2875,6 +3043,9 @@ function useContainerWidth(keyOf) {
   }, [measure]);
   return [ref, width];
 }
+function windowTag(range) {
+  return range.absolute ? `${range.absolute.fromMs}-${range.absolute.toMs}` : "";
+}
 var RESEED_RETRY_MS = 3e4;
 function seedKey(widget, registry) {
   if (widget.type === UNKNOWN_WIDGET_TYPE2 || registry.descriptor(widget.type)?.channel !== "measurement") {
@@ -2883,18 +3054,18 @@ function seedKey(widget, registry) {
   return JSON.stringify(widget.datasource ?? null);
 }
 function useWidgetHistories(widgets, enabled, registry, range) {
-  const [seeds, setSeeds] = useState4({});
+  const [seeds, setSeeds] = useState5({});
   const requested = useRef2({});
   const reseeds = useRef2({});
-  const [reseedTick, bumpReseeds] = useState4(0);
+  const [reseedTick, bumpReseeds] = useState5(0);
   const mounted = useRef2(true);
-  useEffect3(() => {
+  useEffect4(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
     };
   }, []);
-  const reseed = useCallback2((id) => {
+  const reseed = useCallback3((id) => {
     reseeds.current[id] = (reseeds.current[id] ?? 0) + 1;
     bumpReseeds((n) => n + 1);
   }, []);
@@ -2905,8 +3076,9 @@ function useWidgetHistories(widgets, enabled, registry, range) {
     const span = descriptor ? measurementSpan(descriptor, w, range.spanSeconds) ?? null : null;
     return [[w.id, key, span]];
   });
-  const wantedKey = JSON.stringify(wanted);
-  useEffect3(() => {
+  const tag = windowTag(range);
+  const wantedKey = JSON.stringify([tag, wanted]);
+  useEffect4(() => {
     if (!enabled) {
       requested.current = {};
       setSeeds({});
@@ -2916,7 +3088,7 @@ function useWidgetHistories(widgets, enabled, registry, range) {
     const byId = new Map(widgets.map((w) => [w.id, w]));
     const next = {};
     for (const [id, key, span] of wanted) {
-      const base = `${key}|${span ?? ""}|`;
+      const base = `${key}|${span ?? ""}|${tag}|`;
       const n = reseeds.current[id] ?? 0;
       const asked = `${base}${range.paused && n ? "p" : n}`;
       const previous = requested.current[id];
@@ -2928,12 +3100,12 @@ function useWidgetHistories(widgets, enabled, registry, range) {
       const widget = byId.get(id);
       if (widget?.datasource?.kind !== "device") continue;
       const end = range.paused && range.pausedAt !== void 0 ? range.pausedAt : now;
-      const historyWindow = span === null ? defaultHistoryWindow() : historyWindowFor(span, end);
+      const historyWindow = span !== null ? historyWindowFor(span, end) : range.absolute ? historyWindowFor(DEFAULT_TIME_RANGE_SECONDS, end) : defaultHistoryWindow();
       const current = () => mounted.current && requested.current[id] === asked;
       void fetchWidgetHistory(widget, historyWindow, { rethrow: n > 0 }).then(
         (samples) => {
           if (!current()) return;
-          setSeeds((prev) => ({ ...prev, [id]: { key, samples, asOf: end } }));
+          setSeeds((prev) => ({ ...prev, [id]: { key, window: tag, samples, asOf: end } }));
         },
         () => {
           setTimeout(() => current() && reseed(id), RESEED_RETRY_MS);
@@ -2947,45 +3119,80 @@ function useWidgetHistories(widgets, enabled, registry, range) {
     if (!enabled) return out;
     for (const w of widgets) {
       const seed = seeds[w.id];
-      out[w.id] = seed && seed.key === seedKey(w, registry) ? seed : void 0;
+      out[w.id] = seed && seed.key === seedKey(w, registry) && seed.window === tag ? seed : void 0;
     }
     return out;
-  }, [widgets, seeds, enabled, registry]);
+  }, [widgets, seeds, enabled, registry, tag]);
   return { histories, reseed };
 }
 
 // src/time-range-bar.tsx
 import {
-  DEFAULT_TIME_RANGE_SECONDS,
+  DEFAULT_TIME_RANGE_SECONDS as DEFAULT_TIME_RANGE_SECONDS2,
   TIME_RANGE_PRESETS,
+  absoluteRange,
+  absoluteToParams,
   initialTimeRange as initialTimeRange2,
   isValidSpanSeconds as isValidSpanSeconds2,
+  leaveAbsolute,
   pauseRange,
   presetIdOf,
   resumeRange,
   spanLabel as spanLabel2,
   withSpan
 } from "@devicechain/dashboards";
-import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo6, useRef as useRef3, useState as useState5 } from "react";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo6, useRef as useRef3, useState as useState6 } from "react";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function useBoardTimeRange(defaultSeconds, link = {}) {
-  const [state, setState] = useState5(() => initialTimeRange2(defaultSeconds, link));
+  const [state, setState] = useState6(() => initialTimeRange2(defaultSeconds, link));
   const lastDefault = useRef3(defaultSeconds);
-  useEffect4(() => {
+  useEffect5(() => {
     if (lastDefault.current === defaultSeconds) return;
     lastDefault.current = defaultSeconds;
-    setState((s) => withSpan(s, isValidSpanSeconds2(defaultSeconds) ? defaultSeconds : DEFAULT_TIME_RANGE_SECONDS));
+    setState((s) => withSpan(s, isValidSpanSeconds2(defaultSeconds) ? defaultSeconds : DEFAULT_TIME_RANGE_SECONDS2));
   }, [defaultSeconds]);
   const controls = useMemo6(
     () => ({
-      setSpan: (spanSeconds) => setState((s) => withSpan(s, spanSeconds)),
+      // A preset click while a fixed window is showing leaves it: back to live at that span.
+      setSpan: (spanSeconds) => setState((s) => withSpan(leaveAbsolute(s), spanSeconds)),
       pause: () => setState((s) => pauseRange(s, Date.now())),
-      resume: () => setState((s) => resumeRange(s))
+      resume: () => setState((s) => resumeRange(s)),
+      setAbsolute: (fromMs, toMs) => {
+        const made = absoluteRange(fromMs, toMs);
+        if ("problem" in made) return made.problem;
+        setState(made.state);
+        return void 0;
+      }
     }),
     []
   );
   return [state, controls];
 }
+var DEFAULT_ABSOLUTE_LABELS = {
+  custom: "Custom range",
+  from: "From",
+  to: "To",
+  apply: "Apply",
+  cancel: "Cancel",
+  zone: (zone, offset) => `Times are in ${zone} (${offset}). Shared links use UTC.`,
+  problem: {
+    unparseable: "Enter both a start and an end.",
+    order: "The start must be before the end.",
+    tooShort: "The window must be at least one minute.",
+    tooLong: "The window can be at most 31 days.",
+    future: "The end cannot be in the future.",
+    tooEarly: "The start is too far in the past."
+  },
+  fixed: "Fixed window",
+  backToLive: "Back to live",
+  copyLink: "Copy link",
+  linkCopied: "Link copied",
+  loadFailed: "The range picker could not be loaded. Try again.",
+  dismiss: "Dismiss",
+  ignored: (reason, raw) => `The link's time window was ignored: ${reason} (${raw}). Showing the live board.`,
+  incomplete: "both from and to are required",
+  unzoned: "times must be ISO 8601 with a zone, such as 2026-10-22T02:00:00Z or +02:00"
+};
 var DEFAULT_TIME_RANGE_LABELS = {
   range: "Time range",
   pause: "Pause",
@@ -2994,6 +3201,13 @@ var DEFAULT_TIME_RANGE_LABELS = {
   pausedAt: (time) => `Paused at ${time}`,
   actionsLive: "commands still send"
 };
+var absoluteLabels = (labels) => ({ ...DEFAULT_ABSOLUTE_LABELS, ...labels.absolute });
+function rejectedLinkNote(rejected, labels = DEFAULT_TIME_RANGE_LABELS) {
+  const l = absoluteLabels(labels);
+  const raw = `from=${rejected.from || "-"} to=${rejected.to || "-"}`;
+  const reason = rejected.reason === "incomplete" ? l.incomplete : rejected.reason === "unparseable" ? l.unzoned : l.problem[rejected.reason];
+  return l.ignored(reason, raw);
+}
 var button = (active) => ({
   padding: "2px 8px",
   fontSize: 12,
@@ -3038,40 +3252,169 @@ function PausedIndicator({
     }
   );
 }
-function TimeRangeBar({
-  state,
-  controls,
+function formatAbsoluteRange(a) {
+  const f = new Intl.DateTimeFormat(void 0, { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", timeZoneName: "short" });
+  return `${f.format(a.fromMs)} \u2013 ${f.format(a.toMs)}`;
+}
+function AbsoluteIndicator({
+  absolute,
   labels = DEFAULT_TIME_RANGE_LABELS
 }) {
-  const preset = presetIdOf(state.spanSeconds);
-  const onPause = useCallback3(() => state.paused ? controls.resume() : controls.pause(), [state.paused, controls]);
+  const l = absoluteLabels(labels);
+  const utc = absoluteToParams(absolute);
   return /* @__PURE__ */ jsxs8(
-    "div",
+    "span",
     {
-      "data-time-range-bar": "",
-      role: "group",
-      "aria-label": labels.range,
-      style: { display: "inline-flex", alignItems: "center", gap: 6, flexWrap: "wrap" },
+      role: "status",
+      "data-time-range-absolute": "",
+      title: `${utc.from} \u2013 ${utc.to} (UTC)`,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: 4,
+        padding: "2px 8px",
+        fontSize: 12,
+        fontWeight: 700,
+        color: "hsl(var(--background))",
+        background: "hsl(var(--foreground))",
+        border: "2px solid hsl(var(--foreground))",
+        borderRadius: 4
+      },
       children: [
-        preset === void 0 ? /* @__PURE__ */ jsx12("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__ */ jsx12(
-          "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__ */ jsx12("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__ */ jsx12(PausedIndicator, { pausedAt: state.pausedAt, labels }) : null
+        /* @__PURE__ */ jsx12("span", { style: { letterSpacing: 0.4, textTransform: "uppercase" }, children: l.fixed }),
+        /* @__PURE__ */ jsx12("span", { "data-time-range-window": "", style: { fontWeight: 400 }, children: formatAbsoluteRange(absolute) }),
+        /* @__PURE__ */ jsx12("span", { "data-time-range-actions-live": "", style: { fontWeight: 400 }, children: `\xB7 ${labels.actionsLive}` })
       ]
     }
   );
 }
+function absoluteLinkFor(href, a) {
+  const url = new URL(href);
+  const { from, to } = absoluteToParams(a);
+  url.searchParams.delete("range");
+  url.searchParams.delete("paused");
+  url.searchParams.set("from", from);
+  url.searchParams.set("to", to);
+  return url.toString();
+}
+function TimeRangeBar({
+  state,
+  controls,
+  labels = DEFAULT_TIME_RANGE_LABELS,
+  notice
+}) {
+  const abs = state.absolute;
+  const preset = abs ? void 0 : presetIdOf(state.spanSeconds);
+  const onPause = useCallback4(() => state.paused ? controls.resume() : controls.pause(), [state.paused, controls]);
+  const l = absoluteLabels(labels);
+  const [Picker, setPicker] = useState6();
+  const [open, setOpen] = useState6(false);
+  const [loadFailed, setLoadFailed] = useState6(false);
+  const [copied, setCopied] = useState6(false);
+  const [noticeShown, setNoticeShown] = useState6(true);
+  useEffect5(() => setNoticeShown(true), [notice]);
+  const openPicker = () => {
+    if (open) {
+      setOpen(false);
+      return;
+    }
+    setLoadFailed(false);
+    if (Picker) {
+      setOpen(true);
+      return;
+    }
+    import("./chunks/absolute-range-picker-E57G2TPX.js").then(
+      (m) => {
+        setPicker(() => m.default);
+        setOpen(true);
+      },
+      () => setLoadFailed(true)
+    );
+  };
+  const copyLink = () => {
+    if (!abs) return;
+    navigator.clipboard?.writeText(absoluteLinkFor(window.location.href, abs)).then(
+      () => {
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 2e3);
+      },
+      () => void 0
+    );
+  };
+  return /* @__PURE__ */ jsxs8("div", { style: { position: "relative", display: "inline-block", maxWidth: "100%" }, children: [
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        "data-time-range-bar": "",
+        role: "group",
+        "aria-label": labels.range,
+        style: { display: "inline-flex", alignItems: "center", gap: 6, flexWrap: "wrap" },
+        children: [
+          !abs && preset === void 0 ? /* @__PURE__ */ jsx12("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__ */ jsx12(
+            "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__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": abs !== void 0,
+              "aria-expanded": open,
+              "data-time-range-custom": "",
+              onClick: openPicker,
+              style: button(abs !== void 0),
+              children: l.custom
+            }
+          ),
+          abs ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+            /* @__PURE__ */ jsx12("button", { type: "button", "data-time-range-live": "", onClick: () => controls.resume(), style: button(false), children: l.backToLive }),
+            /* @__PURE__ */ jsx12("button", { type: "button", "data-time-range-copy": "", onClick: copyLink, style: button(false), children: copied ? l.linkCopied : l.copyLink }),
+            /* @__PURE__ */ jsx12(AbsoluteIndicator, { absolute: abs, labels })
+          ] }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
+            /* @__PURE__ */ jsx12("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__ */ jsx12(PausedIndicator, { pausedAt: state.pausedAt, labels }) : null
+          ] })
+        ]
+      }
+    ),
+    open && Picker ? /* @__PURE__ */ jsx12("div", { style: { position: "absolute", right: 0, top: "100%", marginTop: 6, zIndex: 30 }, children: /* @__PURE__ */ jsx12(
+      Picker,
+      {
+        initial: abs,
+        labels: l,
+        onApply: (from, to) => {
+          const problem = controls.setAbsolute(from, to);
+          if (!problem) setOpen(false);
+          return problem;
+        },
+        onCancel: () => setOpen(false)
+      }
+    ) }) : null,
+    loadFailed ? /* @__PURE__ */ jsx12("div", { role: "alert", "data-time-range-load-failed": "", style: { fontSize: 12, color: "hsl(var(--destructive))" }, children: l.loadFailed }) : null,
+    notice && noticeShown ? /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        role: "status",
+        "data-time-range-notice": "",
+        style: { display: "flex", gap: 8, alignItems: "baseline", marginTop: 4, fontSize: 12, color: "hsl(var(--muted-foreground))" },
+        children: [
+          /* @__PURE__ */ jsx12("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: notice }),
+          /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => setNoticeShown(false), style: { ...button(false), flex: "0 0 auto" }, children: l.dismiss })
+        ]
+      }
+    ) : null
+  ] });
+}
 
 // src/use-bound-devices.ts
 import {
@@ -3082,7 +3425,7 @@ import {
   validateBinds,
   withBindParams
 } from "@devicechain/dashboards";
-import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef4, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef4, useState as useState7 } from "react";
 var NO_PROBLEMS = { issues: [], missing: [], failed: [] };
 function hasBindParams(search, definition) {
   const { binds, issues } = parseBindParams(search, definition);
@@ -3094,16 +3437,16 @@ function useBoundDevices({
   address,
   enabled = true
 }) {
-  const [core, setCore] = useState6(() => ({
+  const [core, setCore] = useState7(() => ({
     selection: {},
     synced: bindParamsOf(address.search)
   }));
   const { selection } = core;
-  const [phase, setPhase] = useState6(
+  const [phase, setPhase] = useState7(
     () => hasBindParams(address.search, definition) ? "checking" : "ready"
   );
-  const [problems, setProblems] = useState6(null);
-  const [okBinds, setOkBinds] = useState6({});
+  const [problems, setProblems] = useState7(null);
+  const [okBinds, setOkBinds] = useState7({});
   const definitionRef = useRef4(definition);
   definitionRef.current = definition;
   const resolverRef = useRef4(resolver);
@@ -3112,9 +3455,9 @@ function useBoundDevices({
   replaceRef.current = address.replaceSearch;
   const seenRef = useRef4(null);
   const generation = useRef4(0);
-  const [attempt, setAttempt] = useState6(0);
+  const [attempt, setAttempt] = useState7(0);
   const search = address.search;
-  useEffect5(() => {
+  useEffect6(() => {
     if (!enabled) return;
     const slice = bindParamsOf(search);
     if (seenRef.current === slice) return;
@@ -3143,7 +3486,7 @@ function useBoundDevices({
       }
     });
   }, [search, enabled, attempt]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!enabled || phase !== "ready") return;
     const current = bindParamsOf(search);
     if (current !== core.synced) return;
@@ -3154,16 +3497,16 @@ function useBoundDevices({
     setCore((c) => ({ ...c, synced: nextSlice }));
     replaceRef.current(next);
   }, [core, definition, phase, enabled, search]);
-  const select = useCallback4((t) => {
+  const select = useCallback5((t) => {
     setCore((c) => ({ ...c, selection: { ...c.selection, [t.slot]: t.binding } }));
   }, []);
-  const reset = useCallback4(() => setCore((c) => ({ ...c, selection: {} })), []);
-  const dismiss = useCallback4(() => {
+  const reset = useCallback5(() => setCore((c) => ({ ...c, selection: {} })), []);
+  const dismiss = useCallback5(() => {
     setCore((c) => ({ ...c, selection: bindsToSelection(okBinds) }));
     setProblems(null);
     setPhase("ready");
   }, [okBinds]);
-  const retry = useCallback4(() => {
+  const retry = useCallback5(() => {
     seenRef.current = null;
     setAttempt((n) => n + 1);
   }, []);
@@ -3171,17 +3514,17 @@ function useBoundDevices({
 }
 
 // src/bound-devices-notice.tsx
-import { css as css6, fontVar as fontVar6 } from "@devicechain/widget-sdk";
+import { css as css7, fontVar as fontVar7 } from "@devicechain/widget-sdk";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function BoundDevicesNotice({ title, lines, dismissLabel, onDismiss, retryLabel, onRetry }) {
   const button2 = {
     minHeight: 44,
     padding: "0 16px",
     borderRadius: 8,
-    border: `1px solid ${css6("border")}`,
-    background: css6("card"),
-    color: css6("foreground"),
-    fontSize: fontVar6("md"),
+    border: `1px solid ${css7("border")}`,
+    background: css7("card"),
+    color: css7("foreground"),
+    fontSize: fontVar7("md"),
     cursor: "pointer"
   };
   return /* @__PURE__ */ jsxs9(
@@ -3199,13 +3542,13 @@ function BoundDevicesNotice({ title, lines, dismissLabel, onDismiss, retryLabel,
         margin: "24px auto",
         padding: 16,
         borderRadius: 8,
-        border: `1px solid ${css6("border")}`,
-        background: css6("card"),
-        color: css6("foreground")
+        border: `1px solid ${css7("border")}`,
+        background: css7("card"),
+        color: css7("foreground")
       },
       children: [
-        /* @__PURE__ */ jsx13("div", { style: { fontSize: fontVar6("lg"), fontWeight: 600 }, children: title }),
-        /* @__PURE__ */ jsx13("ul", { style: { margin: 0, paddingLeft: 20, display: "flex", flexDirection: "column", gap: 4, fontSize: fontVar6("md") }, children: lines.map((line, i) => /* @__PURE__ */ jsx13("li", { style: { overflowWrap: "anywhere" }, children: line }, i)) }),
+        /* @__PURE__ */ jsx13("div", { style: { fontSize: fontVar7("lg"), fontWeight: 600 }, children: title }),
+        /* @__PURE__ */ jsx13("ul", { style: { margin: 0, paddingLeft: 20, display: "flex", flexDirection: "column", gap: 4, fontSize: fontVar7("md") }, children: lines.map((line, i) => /* @__PURE__ */ jsx13("li", { style: { overflowWrap: "anywhere" }, children: line }, i)) }),
         /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: [
           retryLabel && onRetry ? /* @__PURE__ */ jsx13("button", { type: "button", style: button2, onClick: onRetry, "data-testid": "bound-devices-retry", children: retryLabel }) : null,
           /* @__PURE__ */ jsx13("button", { type: "button", style: button2, onClick: onDismiss, "data-testid": "bound-devices-dismiss", children: dismissLabel })
@@ -3297,6 +3640,7 @@ var OPTION_DOCS = {
   ageLagSeconds: "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: "The measurement the table is ordered by. Blank orders by device name.",
   sortDescending: "Largest first.",
+  oldestFirst: "List the oldest bucket first. Unset lists the newest first.",
   pageSize: "Devices per page. Default 20.",
   maxSeries: "Most lines drawn when the chart shows one line per device. Default 5, at most 12. Each line costs one stored-history read, and the chart colours repeat after five; a group larger than this shows the first devices of the group and says how many it left out.",
   show: "What to count: devices in an abnormal band of the measurement (default), or all devices."
@@ -3346,6 +3690,12 @@ var OPTION_DOC_OVERRIDES = {
   "online-doughnut": {
     staleAfterSeconds: "Marks the ring stale once the status of its devices has not been read for longer than this many seconds (it is re-read every 15 seconds, so only reads that keep failing make it stale). Unset, the age is shown and nothing is marked stale."
   },
+  "history-table": {
+    columns: "Which measurements are columns, in order, with a heading, unit and precision each. With none, the columns are the datasource\u2019s measurements (or, when it names none, every measurement the device reported in the range). Every figure is the average of the readings in a time bucket.",
+    precision: "Decimal places to round displayed averages to, for a column that sets none. Unset rounds to at most 3 decimals (4 significant digits under 1). The CSV export is rounded the same way.",
+    pageSize: "Rows per page. Default 10. The CSV export holds every row, not just the page.",
+    staleAfterSeconds: "Marks the table stale once its history has not been read for longer than this many seconds (it is re-read at the end of each time bucket, so only reads that keep failing make it stale). Unset, the age is shown and nothing is marked stale."
+  },
   "fleet-count": {
     measurement: "The measurement whose bands flag a device. Defaults to the first the datasource selects."
   },
@@ -3429,7 +3779,7 @@ var WIDGET_BINDS_DATASOURCE = Object.freeze(
 );
 
 // src/index.ts
-import { pickSample as pickSample3, optBoolean as optBoolean3 } from "@devicechain/widget-sdk";
+import { pickSample as pickSample4, optBoolean as optBoolean3 } from "@devicechain/widget-sdk";
 
 // src/options.ts
 import {
@@ -3529,7 +3879,7 @@ import {
   useResolvedBindings,
   useSlotCandidates,
   useCandidates,
-  css as css7
+  css as css8
 } from "@devicechain/widget-sdk";
 import {
   EChart as EChart3,
@@ -3539,6 +3889,7 @@ import {
   useChartTheme as useChartTheme3
 } from "@devicechain/widget-sdk/echarts";
 export {
+  AbsoluteIndicator,
   AlarmCount,
   AlarmSeverity,
   AlarmTable,
@@ -3546,6 +3897,7 @@ export {
   BoundDevicesNotice,
   CommandButton,
   ConnectedWidget,
+  DEFAULT_ABSOLUTE_LABELS,
   DEFAULT_TIME_RANGE_LABELS,
   DashboardRenderer,
   EChart3 as EChart,
@@ -3572,6 +3924,7 @@ export {
   WidgetSubjectProvider2 as WidgetSubjectProvider,
   WidgetThemeRootProvider2 as WidgetThemeRootProvider,
   WidgetTimeZoneProvider2 as WidgetTimeZoneProvider,
+  absoluteLinkFor,
   buildGaugeOption2 as buildGaugeOption,
   buildLineOption2 as buildLineOption,
   buildPayload,
@@ -3583,7 +3936,7 @@ export {
   commandStatusColor,
   commandStatusLabel,
   createBuiltinWidgetRegistry2 as createBuiltinWidgetRegistry,
-  css7 as css,
+  css8 as css,
   defaultValues,
   describeBoundDevicesProblems,
   describePosition,
@@ -3591,6 +3944,7 @@ export {
   fitValueFont2 as fitValueFont,
   flashBackgroundStyle2 as flashBackgroundStyle,
   flashTextStyle2 as flashTextStyle,
+  formatAbsoluteRange,
   formatDegrees,
   highestSeverity,
   isScalar,
@@ -3600,11 +3954,12 @@ export {
   numberOptionSpec,
   optBoolean3 as optBoolean,
   parseParameterSchema,
-  pickSample3 as pickSample,
+  pickSample4 as pickSample,
   placeable,
   preloadWidgets,
   projectToPanel,
   rasterStyleFor,
+  rejectedLinkNote,
   resolveChartTheme,
   resolveWidgets,
   severityColor,