@devicechain/widgets 0.19.0 → 0.20.0-rc.4

package/dist/index.js

@@ -3,420 +3,477 @@ import {
   activeBreakpoint,
   defaultHistoryWindow,
   fetchWidgetHistory,
-  resolveWidgetBox
+  resolveWidgetBox,
+  resolveWidgetDatasource,
+  UNKNOWN_WIDGET_TYPE as UNKNOWN_WIDGET_TYPE2
 } from "@devicechain/dashboards";
-import { useEffect as useEffect7, useState as useState7 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo5, useRef as useRef3, useState as useState6 } from "react";
 
-// src/frame.tsx
-import { createContext, useContext } 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";
 
-// src/theme.ts
-function css(name) {
-  return `hsl(var(--${name}))`;
-}
-var FALLBACK = {
-  foreground: "hsl(240 10% 3.9%)",
-  mutedForeground: "hsl(240 3.8% 46.1%)",
-  border: "hsl(240 5.9% 90%)",
-  series: [
-    "hsl(220 70% 50%)",
-    "hsl(160 60% 45%)",
-    "hsl(30 80% 55%)",
-    "hsl(280 65% 60%)",
-    "hsl(340 75% 55%)"
-  ]
-};
-function readVar(style, name, fallback) {
-  const raw = style.getPropertyValue(`--${name}`).trim();
-  return raw ? `hsl(${raw})` : fallback;
+// 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 resolveChartTheme(el) {
-  const style = getComputedStyle(el);
+function alarmSubscription(descriptor, widget) {
+  const p = policy(descriptor);
   return {
-    foreground: readVar(style, "foreground", FALLBACK.foreground),
-    mutedForeground: readVar(style, "muted-foreground", FALLBACK.mutedForeground),
-    border: readVar(style, "border", FALLBACK.border),
-    series: FALLBACK.series.map((fallback, i) => readVar(style, `chart-${i + 1}`, fallback))
+    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
   };
 }
-
-// src/frame.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var WidgetSubjectContext = createContext(void 0);
-function WidgetSubjectProvider({
-  label,
-  children
-}) {
-  return /* @__PURE__ */ jsx(WidgetSubjectContext.Provider, { value: label, children });
-}
-var WidgetSelectContext = createContext(void 0);
-function WidgetSelectProvider({
-  select,
-  children
-}) {
-  return /* @__PURE__ */ jsx(WidgetSelectContext.Provider, { value: select, children });
-}
-function useWidgetSelect() {
-  return useContext(WidgetSelectContext);
-}
-var WidgetCandidatesContext = createContext(void 0);
-function WidgetCandidatesProvider({
-  candidates,
-  children
-}) {
-  return /* @__PURE__ */ jsx(WidgetCandidatesContext.Provider, { value: candidates, children });
-}
-function useWidgetCandidates() {
-  return useContext(WidgetCandidatesContext);
-}
-function WidgetFrame({ title, subtitle, children, bodyStyle }) {
-  const subject = useContext(WidgetSubjectContext);
-  const sub = subtitle ?? subject;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
-        height: "100%",
-        boxSizing: "border-box",
-        background: css("card"),
-        color: css("card-foreground"),
-        border: `1px solid ${css("border")}`,
-        borderRadius: "var(--radius, 8px)",
-        overflow: "hidden"
-      },
-      children: [
-        title || sub ? /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              padding: "8px 12px",
-              borderBottom: `1px solid ${css("border")}`
-            },
-            children: [
-              title ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, color: css("muted-foreground") }, children: title }) : null,
-              sub ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  title: sub,
-                  style: {
-                    fontSize: 11,
-                    fontWeight: 400,
-                    color: css("muted-foreground"),
-                    opacity: 0.75,
-                    marginTop: title ? 2 : 0,
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis"
-                  },
-                  children: sub
-                }
-              ) : null
-            ]
-          }
-        ) : null,
-        /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, ...bodyStyle }, children })
-      ]
-    }
-  );
+function commandSubscription(descriptor, widget) {
+  return {
+    datasource: widget.datasource,
+    pageSize: numberValue(policy(descriptor).pageSize, widget.options) ?? 1
+  };
 }
 
-// src/hooks.ts
+// 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/builtin-descriptors.ts
 import {
-  bindingsWithoutScopedSlots,
-  hasScopedSlots,
-  resolveContextBindings,
-  resolveSlotCandidates
+  createWidgetCatalog,
+  defineWidgetDescriptor
 } from "@devicechain/dashboards";
-import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-function useResolvedBindings(definition, base, selection, resolver) {
-  const scoped = useMemo(() => hasScopedSlots(definition), [definition]);
-  const overlaid = useMemo(() => ({ ...base, ...selection }), [base, selection]);
-  const [resolved, setResolved] = useState(() => bindingsWithoutScopedSlots(definition, overlaid));
-  const genRef = useRef(0);
-  useEffect(() => {
-    if (!scoped) {
-      setResolved((prev) => sameBindings(prev, overlaid) ? prev : overlaid);
-      return;
-    }
-    const gen = ++genRef.current;
-    let live = true;
-    resolveContextBindings(definition, base, selection, resolver).then((next) => {
-      if (!live || gen !== genRef.current) return;
-      setResolved((prev) => sameBindings(prev, next) ? prev : next);
-    }).catch(() => {
-    });
-    return () => {
-      live = false;
-    };
-  }, [scoped, definition, base, selection, resolver, overlaid]);
-  return scoped ? resolved : overlaid;
-}
-function sameBindings(a, b) {
-  const ak = Object.keys(a).sort();
-  const bk = Object.keys(b).sort();
-  if (ak.length !== bk.length) return false;
-  for (let i = 0; i < ak.length; i += 1) {
-    if (ak[i] !== bk[i]) return false;
-    if (JSON.stringify(a[ak[i]]) !== JSON.stringify(b[bk[i]])) return false;
-  }
-  return true;
-}
-function useSlotCandidates(definition, bindings, resolver, lister) {
-  const bindingsKey = JSON.stringify(bindings);
-  return useMemo(
-    () => {
-      if (!lister) return void 0;
-      return (slot) => resolveSlotCandidates(definition, slot, bindings, resolver, lister);
-    },
-    // bindings read via bindingsKey (value identity), not reference.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [definition, bindingsKey, resolver, lister]
-  );
-}
-function useCandidates(slot) {
-  const provider = useWidgetCandidates();
-  const wired = !!provider;
-  const [state, setState] = useState(() => ({
-    candidates: [],
-    loading: Boolean(provider && slot),
-    error: null
-  }));
-  const genRef = useRef(0);
-  useEffect(() => {
-    if (!provider || !slot) {
-      setState({ candidates: [], loading: false, error: null });
-      return;
-    }
-    const gen = ++genRef.current;
-    let live = true;
-    setState((prev) => ({ ...prev, loading: true, error: null }));
-    provider(slot).then((candidates) => {
-      if (live && gen === genRef.current) setState({ candidates, loading: false, error: null });
-    }).catch((error) => {
-      if (live && gen === genRef.current) setState({ candidates: [], loading: false, error });
-    });
-    return () => {
-      live = false;
-    };
-  }, [provider, slot]);
-  return { ...state, wired };
-}
-var EMPTY = { latest: {}, samples: [], error: null };
-function latestOf(samples) {
-  const latest = {};
-  for (const s of samples) latest[s.name] = s;
-  return latest;
-}
-function useMeasurementStream(hub, datasource, options = {}) {
-  const windowSize = options.window ?? 300;
-  const initialSamples = options.initialSamples;
-  const [live, setLive] = useState(EMPTY);
-  const key = datasource ? JSON.stringify(datasource) : null;
-  useEffect(() => {
-    setLive(EMPTY);
-    if (!datasource) return;
-    return hub.subscribeWidget(datasource, {
-      next: (sample) => setLive((prev) => {
-        const samples = prev.samples.concat(sample);
-        if (samples.length > windowSize) samples.splice(0, samples.length - windowSize);
-        return { latest: { ...prev.latest, [sample.name]: sample }, samples, error: null };
-      }),
-      error: (err) => setLive((prev) => ({ ...prev, error: err }))
-    });
-  }, [hub, key, windowSize]);
-  return useMemo(() => {
-    if (!initialSamples || initialSamples.length === 0) return live;
-    const merged = initialSamples.concat(live.samples);
-    const samples = merged.length > windowSize ? merged.slice(merged.length - windowSize) : merged;
-    return {
-      latest: { ...latestOf(initialSamples), ...live.latest },
-      samples,
-      error: live.error
-    };
-  }, [initialSamples, live, windowSize]);
-}
-var EMPTY_ALARMS = { alarms: [], total: 0, loading: true, error: null };
-function useAlarmStream(hub, subscription) {
-  const [state, setState] = useState(EMPTY_ALARMS);
-  const key = JSON.stringify(subscription);
-  useEffect(() => {
-    setState(EMPTY_ALARMS);
-    return hub.subscribeAlarms(subscription, {
-      next: (snapshot) => setState({ alarms: snapshot.alarms, total: snapshot.total, loading: false, error: null }),
-      error: (err) => setState((prev) => ({ ...prev, loading: false, error: err }))
-    });
-  }, [hub, key]);
-  return state;
-}
-var EMPTY_COMMANDS = {
-  deviceToken: null,
-  commands: [],
-  total: 0,
-  loading: true,
-  error: null
+var TITLE = {
+  kind: "string",
+  labelId: "widgetLabelTitle",
+  doc: "Heading shown in the widget frame. Blank hides the frame heading."
 };
-function useCommandStream(hub, subscription) {
-  const [state, setState] = useState(EMPTY_COMMANDS);
-  const key = JSON.stringify(subscription);
-  useEffect(() => {
-    setState(EMPTY_COMMANDS);
-    return hub.subscribeCommands(subscription, {
-      next: (snapshot) => setState({
-        deviceToken: snapshot.deviceToken,
-        commands: snapshot.commands,
-        total: snapshot.total,
-        loading: false,
-        error: null
-      }),
-      error: (err) => setState((prev) => ({ ...prev, loading: false, error: err }))
-    });
-  }, [hub, key]);
-  return state;
-}
-var EMPTY_LOCATIONS = {
-  locations: [],
-  deviceTokens: [],
-  forbidden: false,
-  loading: true,
-  error: null
+var TITLE_OR_MEASUREMENT = {
+  kind: "string",
+  labelId: "widgetLabelTitle",
+  doc: "Heading shown in the widget frame. Defaults to the displayed measurement name."
 };
-function useLocationStream(hub, subscription) {
-  const [state, setState] = useState(EMPTY_LOCATIONS);
-  const key = JSON.stringify(subscription);
-  useEffect(() => {
-    setState(EMPTY_LOCATIONS);
-    return hub.subscribeLocations(subscription, {
-      next: (snapshot) => setState(
-        snapshot.kind === "forbidden" ? { locations: [], deviceTokens: [], forbidden: true, loading: false, error: null } : {
-          locations: snapshot.locations,
-          deviceTokens: snapshot.deviceTokens,
-          forbidden: false,
-          loading: false,
-          error: null
-        }
-      ),
-      error: (err) => setState((prev) => ({ ...prev, loading: false, error: err }))
-    });
-  }, [hub, key]);
-  return state;
-}
-var AVAILABILITY_REVALIDATE_MS = 6e4;
-function useDatasourceAvailability(hub, datasource) {
-  const [state, setState] = useState("unknown");
-  const key = datasource ? JSON.stringify(datasource) : null;
-  useEffect(() => {
-    if (!datasource) {
-      setState("available");
-      return;
-    }
-    setState("unknown");
-    let cancelled = false;
-    let timer;
-    const stopTimer = () => {
-      if (timer) {
-        clearInterval(timer);
-        timer = void 0;
+var PRECISION = {
+  kind: "number",
+  integer: true,
+  min: 0,
+  max: 100,
+  labelId: "widgetLabelPrecision",
+  helpId: "widgetHintPrecision",
+  doc: "Decimal places to round displayed values to. Unset shows the raw value."
+};
+var FLASH_ON_CHANGE = {
+  kind: "boolean",
+  labelId: "widgetFlashOnChange",
+  helpId: "widgetFlashOnChangeHint",
+  doc: "Briefly tint a value green on a rise and red on a fall when it changes."
+};
+var WINDOW = {
+  kind: "number",
+  integer: true,
+  min: 1,
+  labelId: "widgetLabelWindow",
+  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 UNIT = {
+  kind: "string",
+  labelId: "widgetLabelUnit",
+  doc: "Unit suffix shown beside the value."
+};
+var ALARM_STATE = {
+  kind: "enum",
+  values: ["ACTIVE", "CLEARED"],
+  labelId: "widgetLabelState",
+  helpId: "widgetStateHint",
+  valueLabelIds: { ACTIVE: "widgetAlarmStateActive", CLEARED: "widgetAlarmStateCleared" },
+  placeholderId: "widgetPlaceholderAny",
+  doc: "Show only alarms in this state. Unset shows every state."
+};
+var ALARM_SEVERITY = {
+  kind: "enum",
+  values: ["CRITICAL", "MAJOR", "MINOR", "WARNING", "INDETERMINATE"],
+  labelId: "widgetLabelSeverity",
+  helpId: "widgetSeverityHint",
+  valueLabelIds: { CRITICAL: "widgetAlarmSeverityCritical", MAJOR: "widgetAlarmSeverityMajor", MINOR: "widgetAlarmSeverityMinor", WARNING: "widgetAlarmSeverityWarning", INDETERMINATE: "widgetAlarmSeverityIndeterminate" },
+  placeholderId: "widgetPlaceholderAny",
+  doc: "Show only alarms at this severity. Unset shows every severity."
+};
+var ALARM_ACKNOWLEDGED = {
+  kind: "enum",
+  values: ["true", "false"],
+  labelId: "widgetLabelAcknowledged",
+  helpId: "widgetAcknowledgedHint",
+  valueLabelIds: { true: "widgetAlarmAckAcknowledged", false: "widgetAlarmAckUnacknowledged" },
+  placeholderId: "widgetPlaceholderAny",
+  doc: "Show only acknowledged ('true') or unacknowledged ('false') alarms. Unset shows both."
+};
+var SELECTION_TARGET = {
+  kind: "string",
+  labelId: "widgetLabelTargetSlot",
+  helpId: "widgetTargetSlotHint",
+  control: "slot-target",
+  doc: "Name of the slot this widget re-points when the viewer picks an entity."
+};
+var VERSION = "1.0.0";
+var ALL_SELECTORS = ["device", "anchor", "slot"];
+var NO_DATASOURCE = { mode: "none" };
+var ALARM_FILTERS = {
+  state: { option: "state" },
+  severity: { option: "severity" },
+  acknowledged: { option: "acknowledged" }
+};
+var builtinWidgetDescriptors = {
+  "timeseries-chart": defineWidgetDescriptor({
+    id: "timeseries-chart",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Timeseries chart", category: "Telemetry", titleId: "widgetTypeTimeseriesChart", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ALL_SELECTORS },
+    binding: { window: { option: "window", min: 1 } },
+    options: {
+      title: TITLE,
+      window: WINDOW
+    },
+    defaults: { title: "Timeseries chart" },
+    interactions: {}
+  }),
+  "latest-card": defineWidgetDescriptor({
+    id: "latest-card",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Latest card", category: "Telemetry", titleId: "widgetTypeLatestCard", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ALL_SELECTORS },
+    binding: { window: { option: "window", min: 1 } },
+    options: {
+      title: TITLE_OR_MEASUREMENT,
+      measurement: {
+        kind: "string",
+        labelId: "widgetLabelMeasurement",
+        helpId: "widgetHintMeasurement",
+        doc: "Which measurement to display. Defaults to the first the datasource selects."
+      },
+      unit: UNIT,
+      precision: PRECISION,
+      flashOnChange: FLASH_ON_CHANGE,
+      window: WINDOW
+    },
+    defaults: { title: "Latest card" },
+    interactions: {}
+  }),
+  gauge: defineWidgetDescriptor({
+    id: "gauge",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Gauge", category: "Telemetry", titleId: "widgetTypeGauge", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ALL_SELECTORS },
+    binding: { window: { option: "window", min: 1 } },
+    options: {
+      title: TITLE_OR_MEASUREMENT,
+      measurement: {
+        kind: "string",
+        labelId: "widgetLabelMeasurement",
+        helpId: "widgetHintMeasurement",
+        doc: "Which measurement to display. Defaults to the first the datasource selects."
+      },
+      min: {
+        kind: "number",
+        labelId: "widgetLabelMin",
+        doc: "Low end of the gauge scale. Default 0."
+      },
+      max: {
+        kind: "number",
+        labelId: "widgetLabelMax",
+        doc: "High end of the gauge scale. Default 100."
+      },
+      unit: UNIT,
+      flashOnChange: FLASH_ON_CHANGE,
+      window: WINDOW
+    },
+    constraints: [{ kind: "greater-than", key: "max", than: "min" }],
+    defaults: { title: "Gauge" },
+    interactions: {}
+  }),
+  table: defineWidgetDescriptor({
+    id: "table",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Table", category: "Telemetry", titleId: "widgetTypeTable", categoryId: "widgetCategoryTelemetry" },
+    channel: "measurement",
+    datasource: { mode: "required", selectors: ALL_SELECTORS },
+    binding: { window: { option: "window", min: 1 } },
+    options: {
+      title: TITLE,
+      precision: PRECISION,
+      flashOnChange: FLASH_ON_CHANGE,
+      window: WINDOW
+    },
+    defaults: { title: "Table" },
+    interactions: {}
+  }),
+  // label and image are static: the `none` channel, no datasource, no subscription and no
+  // history seed.
+  label: defineWidgetDescriptor({
+    id: "label",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Label", category: "Static", titleId: "widgetTypeLabel", categoryId: "widgetCategoryStatic" },
+    channel: "none",
+    datasource: NO_DATASOURCE,
+    binding: {},
+    options: {
+      title: TITLE,
+      text: {
+        kind: "string",
+        required: true,
+        labelId: "widgetLabelText",
+        doc: "The text to show. Rendered as plain text \u2014 markup is never interpreted."
+      },
+      align: {
+        kind: "enum",
+        values: ["left", "center", "right"],
+        labelId: "widgetLabelAlign",
+        valueLabelIds: { left: "widgetAlignLeft", center: "widgetAlignCenter", right: "widgetAlignRight" },
+        placeholderId: "widgetPlaceholderDefault",
+        doc: "Horizontal alignment of the text. Default center."
+      },
+      fontSize: {
+        kind: "number",
+        min: 1,
+        labelId: "widgetLabelFontSize",
+        helpId: "widgetHintFontSize",
+        doc: "Text size in pixels. Default 16."
       }
-    };
-    const check = () => {
-      hub.isDatasourceAvailable(datasource).then((ok) => {
-        if (cancelled) return;
-        setState(ok ? "available" : "unavailable");
-        if (ok) stopTimer();
-      }).catch(() => {
-        if (cancelled) return;
-        setState("available");
-        stopTimer();
-      });
-    };
-    check();
-    timer = setInterval(check, AVAILABILITY_REVALIDATE_MS);
-    return () => {
-      cancelled = true;
-      stopTimer();
-    };
-  }, [hub, key]);
-  return state;
-}
-function useElementSize() {
-  const ref = useRef(null);
-  const [size, setSize] = useState({ width: 0, height: 0 });
-  useEffect(() => {
-    const el = ref.current;
-    if (!el || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver((entries) => {
-      const rect = entries[0]?.contentRect;
-      if (!rect) return;
-      setSize(
-        (prev) => prev.width === rect.width && prev.height === rect.height ? prev : { width: rect.width, height: rect.height }
-      );
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-  return [ref, size];
-}
-var sharedTheme = null;
-var themeListeners = /* @__PURE__ */ new Set();
-var themeObserver = null;
-function recomputeTheme() {
-  sharedTheme = resolveChartTheme(document.documentElement);
-}
-function subscribeTheme(listener) {
-  if (!themeObserver) {
-    recomputeTheme();
-    themeObserver = new MutationObserver(() => {
-      recomputeTheme();
-      for (const l of themeListeners) l();
-    });
-    themeObserver.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class", "style"]
-    });
-  }
-  themeListeners.add(listener);
-  return () => {
-    themeListeners.delete(listener);
-    if (themeListeners.size === 0 && themeObserver) {
-      themeObserver.disconnect();
-      themeObserver = null;
-      sharedTheme = null;
-    }
-  };
-}
-function getThemeSnapshot() {
-  if (!sharedTheme) recomputeTheme();
-  return sharedTheme;
-}
-function useChartTheme() {
-  return useSyncExternalStore(subscribeTheme, getThemeSnapshot, getThemeSnapshot);
-}
-
-// src/widget.ts
-function pickSample(latest, name) {
-  return name ? latest[name] : Object.values(latest)[0];
-}
-function optString(options, key) {
-  const value = options?.[key];
-  return typeof value === "string" ? value : void 0;
-}
-function optNumber(options, key) {
-  const value = options?.[key];
-  return typeof value === "number" && Number.isFinite(value) ? value : void 0;
-}
-function optBoolean(options, key) {
-  return options?.[key] === true;
-}
-function primaryMeasurementName(widget) {
-  const explicit = optString(widget.options, "measurement");
-  if (explicit) return explicit;
-  const ds = widget.datasource;
-  if (ds && ds.measurements.length > 0) return ds.measurements[0];
-  return void 0;
-}
+    },
+    defaults: { text: "New label" },
+    interactions: {}
+  }),
+  image: defineWidgetDescriptor({
+    id: "image",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Image", category: "Static", titleId: "widgetTypeImage", categoryId: "widgetCategoryStatic" },
+    channel: "none",
+    datasource: NO_DATASOURCE,
+    binding: {},
+    options: {
+      title: TITLE,
+      url: {
+        kind: "string",
+        required: true,
+        labelId: "widgetLabelImageUrl",
+        doc: "Source URL of the image."
+      },
+      alt: {
+        kind: "string",
+        labelId: "widgetLabelAltText",
+        doc: "Alternative text describing the image for assistive technology."
+      },
+      fit: {
+        kind: "enum",
+        values: ["contain", "cover", "fill"],
+        labelId: "widgetLabelFit",
+        valueLabelIds: { contain: "widgetFitContain", cover: "widgetFitCover", fill: "widgetFitFill" },
+        placeholderId: "widgetPlaceholderDefault",
+        doc: "How the image fills its box. Default contain."
+      }
+    },
+    defaults: { title: "Image" },
+    interactions: {}
+  }),
+  "alarm-table": defineWidgetDescriptor({
+    id: "alarm-table",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Alarm table", category: "Alarms", titleId: "widgetTypeAlarmTable", categoryId: "widgetCategoryAlarms" },
+    channel: "alarm",
+    datasource: { mode: "optional", selectors: ALL_SELECTORS },
+    binding: { pageSize: { option: "maxRows", default: 50, min: 1 }, ...ALARM_FILTERS },
+    options: {
+      title: TITLE,
+      state: ALARM_STATE,
+      severity: ALARM_SEVERITY,
+      acknowledged: ALARM_ACKNOWLEDGED,
+      maxRows: {
+        kind: "number",
+        integer: true,
+        min: 1,
+        labelId: "widgetLabelMaxRows",
+        helpId: "widgetMaxRowsAlarmHint",
+        doc: "Alarms loaded into the table. Default 50."
+      },
+      precision: PRECISION,
+      flashOnChange: FLASH_ON_CHANGE,
+      selectionTarget: SELECTION_TARGET
+    },
+    defaults: { title: "Alarm table", state: "ACTIVE" },
+    interactions: { alarmActions: true, selection: true }
+  }),
+  // 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.
+  "alarm-count": defineWidgetDescriptor({
+    id: "alarm-count",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Alarm count", category: "Alarms", titleId: "widgetTypeAlarmCount", categoryId: "widgetCategoryAlarms" },
+    channel: "alarm",
+    datasource: { mode: "optional", selectors: ALL_SELECTORS },
+    binding: { pageSize: { const: 50 }, ...ALARM_FILTERS },
+    // No maxRows: alarmSubscription() forces the default page size for a count, because the
+    // number it shows is the SERVER total and the page is read only to sample the worst
+    // loaded severity. An authored maxRows here would be read by nothing.
+    options: {
+      title: TITLE,
+      state: ALARM_STATE,
+      severity: ALARM_SEVERITY,
+      acknowledged: ALARM_ACKNOWLEDGED
+    },
+    defaults: { title: "Alarm count", state: "ACTIVE" },
+    interactions: {}
+  }),
+  "command-button": defineWidgetDescriptor({
+    id: "command-button",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Command button", category: "Control", titleId: "widgetTypeCommandButton", categoryId: "widgetCategoryControl" },
+    channel: "control",
+    datasource: { mode: "required", selectors: ["device", "slot"] },
+    binding: { pageSize: { option: "maxRows", default: 20, min: 1 } },
+    options: {
+      title: TITLE,
+      commandName: {
+        kind: "string",
+        required: true,
+        labelId: "widgetCommandHeading",
+        helpId: "widgetCommandFieldHint",
+        control: "command-vocabulary",
+        doc: "Command key issued to the target device. Without it the widget cannot send."
+      },
+      commandLabel: {
+        kind: "string",
+        labelId: "widgetCommandHeading",
+        helpId: "widgetCommandFieldHint",
+        control: "command-vocabulary",
+        doc: "Text on the send button. Defaults to the command key."
+      },
+      parameterSchema: {
+        kind: "string",
+        format: "json",
+        labelId: "widgetCommandHeading",
+        helpId: "widgetCommandFieldHint",
+        control: "command-vocabulary",
+        doc: "The command's parameter descriptors, baked in as JSON at author time. Drives the typed form."
+      },
+      maxRows: {
+        kind: "number",
+        integer: true,
+        min: 1,
+        labelId: "widgetLabelMaxRows",
+        helpId: "widgetMaxRowsCommandHint",
+        doc: "Recent commands shown in the history. Default 20."
+      }
+    },
+    defaults: { title: "Command button" },
+    interactions: { commandSend: true }
+  }),
+  "entity-selector": defineWidgetDescriptor({
+    id: "entity-selector",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Entity selector", category: "Navigation", titleId: "widgetTypeEntitySelector", categoryId: "widgetCategoryNavigation" },
+    channel: "selection",
+    datasource: NO_DATASOURCE,
+    binding: {},
+    options: {
+      title: TITLE,
+      selectionTarget: { ...SELECTION_TARGET, required: true }
+    },
+    defaults: { title: "Entity selector" },
+    interactions: { selection: true, candidates: true }
+  }),
+  map: defineWidgetDescriptor({
+    id: "map",
+    version: VERSION,
+    sdkApiVersion: 1,
+    optionsVersion: 1,
+    display: { title: "Map", category: "Location", titleId: "widgetTypeMap", categoryId: "widgetCategoryLocation" },
+    channel: "location",
+    datasource: { mode: "required", selectors: ALL_SELECTORS },
+    binding: {},
+    // 🔴 tileUrl is NOT `required`, and that is the decision rather than an oversight.
+    // `required` means "absent leaves the widget with nothing to show", and a map without
+    // a basemap still shows every position it was asked to — on a plain panel, saying why
+    // there is no map behind them. Marking it required would report a correctly-rendering
+    // widget as broken on every board that names no provider of its own — which is most
+    // of them, because the usual and recommended answer is to inherit the tenant's
+    // basemap rather than to configure tiles per board.
+    options: {
+      title: TITLE,
+      tileUrl: {
+        kind: "string",
+        labelId: "widgetLabelTileUrl",
+        helpId: "widgetTileUrlHint",
+        control: "basemap",
+        doc: "Raster tile URL template, e.g. https://tiles.example.com/{z}/{x}/{y}.png. Leave empty to inherit the tenant's basemap; setting one overrides it for this board only."
+      },
+      attribution: {
+        kind: "string",
+        labelId: "widgetLabelAttribution",
+        helpId: "widgetAttributionHint",
+        control: "basemap",
+        doc: "Credit line the tile source requires, shown on the map. Set whatever the provider you chose asks for."
+      }
+    },
+    defaults: { title: "Map" },
+    interactions: {}
+  })
+};
+var builtinWidgetCatalog = createWidgetCatalog(Object.values(builtinWidgetDescriptors));
 
 // src/widgets/severity.ts
 var SEVERITY_COLORS = {
@@ -458,7 +515,7 @@ function highestSeverity(severities) {
 }
 
 // src/widgets/alarm-count.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+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();
@@ -470,7 +527,7 @@ function AlarmCount({ widget, data }) {
   const display = loading && total === 0 ? "\u2014" : String(total);
   const unit = total === 1 ? "alarm" : "alarms";
   const ariaLabel = alerting ? `${total} ${unit}, worst severity ${severityLabel(worst)}` : `${total} ${unit}`;
-  return /* @__PURE__ */ jsx2(WidgetFrame, { title: optString(widget.options, "title"), children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx(WidgetFrame, { title: optString2(widget.options, "title"), children: /* @__PURE__ */ jsxs(
     "div",
     {
       ref: sizeRef,
@@ -484,8 +541,8 @@ function AlarmCount({ widget, data }) {
         textAlign: "center"
       },
       children: [
-        /* @__PURE__ */ jsx2("div", { "aria-label": ariaLabel, style: { fontSize: valueFont, fontWeight: 700, lineHeight: 1, color }, children: display }),
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsx("div", { "aria-label": ariaLabel, style: { fontSize: valueFont, fontWeight: 700, lineHeight: 1, color }, children: display }),
+        /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -496,8 +553,8 @@ function AlarmCount({ widget, data }) {
               letterSpacing: "0.05em"
             },
             children: [
-              /* @__PURE__ */ jsx2("span", { children: unit }),
-              alerting ? /* @__PURE__ */ jsx2("span", { children: ` \xB7 worst ${severityLabel(worst)}` }) : null
+              /* @__PURE__ */ jsx("span", { children: unit }),
+              alerting ? /* @__PURE__ */ jsx("span", { children: ` \xB7 worst ${severityLabel(worst)}` }) : null
             ]
           }
         )
@@ -505,98 +562,38 @@ function AlarmCount({ widget, data }) {
     }
   ) });
 }
+var alarmCountWidget = defineWidget({
+  descriptor: builtinWidgetDescriptors["alarm-count"],
+  implementation: { kind: "trusted-react", component: AlarmCount }
+});
 
 // src/widgets/alarm-table.tsx
-import { useState as useState3 } from "react";
-
-// src/flash.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
-
-// src/format.ts
-function formatTimestamp(iso) {
-  if (!iso) return "";
-  const date = new Date(iso);
-  return Number.isNaN(date.getTime()) ? iso : date.toLocaleTimeString();
-}
-function formatDateTime(iso) {
-  if (!iso) return "";
-  const date = new Date(iso);
-  return Number.isNaN(date.getTime()) ? iso : date.toLocaleString();
-}
-function formatValue(value, precision) {
-  if (value == null) return "\u2014";
-  if (precision == null) return String(value);
-  const places = Math.min(100, Math.max(0, Math.trunc(precision)));
-  return value.toFixed(places);
-}
-
-// src/flash.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var UP = {
-  fg: "var(--flash-up, hsl(142 72% 40%))",
-  bg: "var(--flash-up-bg, hsl(142 72% 45% / 0.16))"
-};
-var DOWN = {
-  fg: "var(--flash-down, hsl(0 72% 51%))",
-  bg: "var(--flash-down-bg, hsl(0 72% 55% / 0.16))"
-};
-var HOLD_MS = 400;
-var FADE_MS = 600;
-function useFlashOnChange(value, enabled, identity) {
-  const prev = useRef2(value);
-  const prevIdentity = useRef2(identity);
-  const [direction, setDirection] = useState2(null);
-  useEffect2(() => {
-    const before = prev.current;
-    const sameEntity = prevIdentity.current === identity;
-    prev.current = value;
-    prevIdentity.current = identity;
-    if (!enabled || !sameEntity || typeof value !== "number" || typeof before !== "number" || !Number.isFinite(value) || !Number.isFinite(before) || value === before) {
-      setDirection(null);
-      return;
-    }
-    setDirection(value > before ? "up" : "down");
-    const timer = setTimeout(() => setDirection(null), HOLD_MS);
-    return () => clearTimeout(timer);
-  }, [value, enabled, identity]);
-  return enabled ? direction : null;
-}
-function flashTextStyle(direction, fadeMs = FADE_MS) {
-  if (direction) return { color: direction === "up" ? UP.fg : DOWN.fg, transition: "none" };
-  return { transition: `color ${fadeMs}ms ease-out` };
-}
-function flashBackgroundStyle(direction, fadeMs = FADE_MS) {
-  if (direction) {
-    return { backgroundColor: direction === "up" ? UP.bg : DOWN.bg, transition: "none" };
-  }
-  return { transition: `background-color ${fadeMs}ms ease-out` };
-}
-function FlashValue({
-  value,
-  precision,
-  enabled,
-  identity,
-  baseColor = "inherit",
-  style
-}) {
-  const direction = useFlashOnChange(value, enabled, identity);
-  return /* @__PURE__ */ jsx3("span", { style: { color: baseColor, ...style, ...flashTextStyle(direction) }, children: formatValue(value, precision) });
-}
-
-// src/widgets/alarm-table.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  css as css2,
+  defineWidget as defineWidget2,
+  FlashValue,
+  formatDateTime,
+  optBoolean,
+  optNumber as optNumber2,
+  optString as optString3,
+  useWidgetSelect,
+  useWidgetTimeZone,
+  WidgetFrame as WidgetFrame2
+} from "@devicechain/widget-sdk";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var cell = { padding: "6px 10px", textAlign: "left", whiteSpace: "nowrap" };
 var headCell = {
   ...cell,
   position: "sticky",
   top: 0,
-  background: css("card"),
+  background: css2("card"),
   fontSize: 11,
   fontWeight: 600,
   textTransform: "uppercase",
   letterSpacing: "0.04em",
-  color: css("muted-foreground"),
-  borderBottom: `1px solid ${css("border")}`
+  color: css2("muted-foreground"),
+  borderBottom: `1px solid ${css2("border")}`
 };
 function statusLabel(alarm) {
   if (alarm.state === "CLEARED") return "Cleared";
@@ -606,39 +603,40 @@ function AlarmTable({ widget, data, actions }) {
   const { alarms, total, loading } = data;
   const canAct = actions?.can("alarm:write") ?? false;
   const columns = canAct ? 8 : 7;
-  const precision = optNumber(widget.options, "precision");
+  const precision = optNumber2(widget.options, "precision");
   const flash = optBoolean(widget.options, "flashOnChange");
   const select = useWidgetSelect();
-  const selectionTarget = optString(widget.options, "selectionTarget");
+  const timeZone = useWidgetTimeZone();
+  const selectionTarget = optString3(widget.options, "selectionTarget");
   const drillTo = select && selectionTarget ? { select, slot: selectionTarget } : void 0;
-  return /* @__PURE__ */ jsx4(WidgetFrame, { title: optString(widget.options, "title"), children: /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsx4("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ jsxs3(
+  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(
       "table",
       {
         style: {
           width: "100%",
           borderCollapse: "collapse",
           fontSize: 13,
-          color: css("foreground"),
+          color: css2("foreground"),
           fontVariantNumeric: "tabular-nums"
         },
         children: [
-          /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs3("tr", { children: [
-            /* @__PURE__ */ jsx4("th", { style: { ...headCell, width: 4, padding: 0 }, "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx4("th", { scope: "col", style: headCell, children: "Severity" }),
-            /* @__PURE__ */ jsx4("th", { scope: "col", style: headCell, children: "Status" }),
-            /* @__PURE__ */ jsx4("th", { scope: "col", style: headCell, children: "Originator" }),
-            /* @__PURE__ */ jsx4("th", { scope: "col", style: headCell, children: "Alarm" }),
-            /* @__PURE__ */ jsx4("th", { scope: "col", style: { ...headCell, textAlign: "right" }, children: "Value" }),
-            /* @__PURE__ */ jsx4("th", { scope: "col", style: headCell, children: "Raised" }),
-            canAct ? /* @__PURE__ */ jsx4("th", { scope: "col", style: { ...headCell, textAlign: "right" }, children: "Actions" }) : null
+          /* @__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__ */ jsx4("tbody", { children: alarms.length === 0 ? /* @__PURE__ */ jsx4("tr", { children: /* @__PURE__ */ jsx4("td", { colSpan: columns, style: { ...cell, textAlign: "center", color: css("muted-foreground") }, children: loading ? "Loading\u2026" : "No alarms" }) }) : alarms.map((alarm) => {
+          /* @__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__ */ jsxs3("tr", { style: { borderBottom: `1px solid ${css("border")}` }, children: [
-              /* @__PURE__ */ jsx4("td", { "aria-hidden": "true", style: { padding: 0, width: 4, background: color } }),
-              /* @__PURE__ */ jsx4("td", { style: cell, children: /* @__PURE__ */ jsxs3("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
-                /* @__PURE__ */ jsx4(
+            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(
                   "span",
                   {
                     "aria-hidden": "true",
@@ -647,10 +645,10 @@ function AlarmTable({ widget, data, actions }) {
                 ),
                 severityLabel(alarm.severity)
               ] }) }),
-              /* @__PURE__ */ jsx4("td", { style: { ...cell, color: css("muted-foreground") }, children: statusLabel(alarm) }),
-              /* @__PURE__ */ jsx4("td", { style: cell, children: /* @__PURE__ */ jsx4(OriginatorCell, { alarm, drillTo }) }),
-              /* @__PURE__ */ jsx4("td", { style: cell, children: alarm.alarmKey }),
-              /* @__PURE__ */ jsx4("td", { style: { ...cell, textAlign: "right" }, children: /* @__PURE__ */ jsx4(
+              /* @__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(
                 FlashValue,
                 {
                   value: alarm.lastValue,
@@ -659,21 +657,21 @@ function AlarmTable({ widget, data, actions }) {
                   identity: alarm.token
                 }
               ) }),
-              /* @__PURE__ */ jsx4("td", { style: { ...cell, color: css("muted-foreground") }, children: formatDateTime(alarm.raisedTime) }),
-              canAct ? /* @__PURE__ */ jsx4("td", { style: { ...cell, textAlign: "right" }, children: /* @__PURE__ */ jsx4(AlarmRowActions, { alarm, actions }) }) : null
+              /* @__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
             ] }, alarm.token);
           }) })
         ]
       }
     ) }),
-    total > alarms.length ? /* @__PURE__ */ jsxs3(
+    total > alarms.length ? /* @__PURE__ */ jsxs2(
       "div",
       {
         style: {
           padding: "4px 10px",
           fontSize: 11,
-          color: css("muted-foreground"),
-          borderTop: `1px solid ${css("border")}`
+          color: css2("muted-foreground"),
+          borderTop: `1px solid ${css2("border")}`
         },
         children: [
           "Showing ",
@@ -691,7 +689,7 @@ function OriginatorCell({
 }) {
   if (drillTo && alarm.originatorType === "device" && alarm.originatorToken) {
     const token = alarm.originatorToken;
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
@@ -702,7 +700,7 @@ function OriginatorCell({
           border: "none",
           background: "none",
           font: "inherit",
-          color: css("primary"),
+          color: css2("primary"),
           cursor: "pointer",
           textDecoration: "underline",
           textUnderlineOffset: 2
@@ -711,23 +709,23 @@ function OriginatorCell({
       }
     );
   }
-  return /* @__PURE__ */ jsx4(Fragment, { children: alarm.originatorToken ?? alarm.originatorType });
+  return /* @__PURE__ */ jsx2(Fragment, { children: alarm.originatorToken ?? alarm.originatorType });
 }
 var actionButton = {
   padding: "2px 8px",
   fontSize: 12,
   lineHeight: 1.4,
   borderRadius: 4,
-  border: `1px solid ${css("border")}`,
-  background: css("card"),
-  color: css("foreground"),
+  border: `1px solid ${css2("border")}`,
+  background: css2("card"),
+  color: css2("foreground"),
   cursor: "pointer"
 };
 function AlarmRowActions({ alarm, actions }) {
-  const [pending, setPending] = useState3(null);
-  const [failed, setFailed] = useState3(false);
+  const [pending, setPending] = useState(null);
+  const [failed, setFailed] = useState(false);
   if (alarm.state !== "ACTIVE") {
-    return /* @__PURE__ */ jsx4("span", { style: { color: css("muted-foreground") }, children: "\u2014" });
+    return /* @__PURE__ */ jsx2("span", { style: { color: css2("muted-foreground") }, children: "\u2014" });
   }
   const run = (kind, op) => {
     setPending(kind);
@@ -742,8 +740,8 @@ function AlarmRowActions({ alarm, actions }) {
     }
     promise.catch(() => setFailed(true)).finally(() => setPending(null));
   };
-  return /* @__PURE__ */ jsxs3("span", { style: { display: "inline-flex", gap: 6, justifyContent: "flex-end", alignItems: "center" }, children: [
-    failed ? /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", gap: 6, justifyContent: "flex-end", alignItems: "center" }, children: [
+    failed ? /* @__PURE__ */ jsx2(
       "span",
       {
         role: "img",
@@ -753,7 +751,7 @@ function AlarmRowActions({ alarm, actions }) {
         children: "\u26A0"
       }
     ) : null,
-    !alarm.acknowledged ? /* @__PURE__ */ jsx4(
+    !alarm.acknowledged ? /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
@@ -765,7 +763,7 @@ function AlarmRowActions({ alarm, actions }) {
         children: pending === "ack" ? "\u2026" : "Ack"
       }
     ) : null,
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
@@ -779,9 +777,21 @@ function AlarmRowActions({ alarm, actions }) {
     )
   ] });
 }
+var alarmTableWidget = defineWidget2({
+  descriptor: builtinWidgetDescriptors["alarm-table"],
+  implementation: { kind: "trusted-react", component: AlarmTable }
+});
 
 // src/widgets/command-button.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
+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";
@@ -929,20 +939,20 @@ function coerce(param, raw) {
 }
 
 // src/widgets/command-button.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function CommandButton({ widget, data, actions }) {
-  const commandName = optString(widget.options, "commandName");
-  const commandLabel = optString(widget.options, "commandLabel") ?? commandName;
-  const parameterSchema = optString(widget.options, "parameterSchema") ?? null;
-  const params = useMemo2(() => parseParameterSchema(parameterSchema), [parameterSchema]);
+  const commandName = optString4(widget.options, "commandName");
+  const commandLabel = optString4(widget.options, "commandLabel") ?? commandName;
+  const parameterSchema = optString4(widget.options, "parameterSchema") ?? null;
+  const params = useMemo(() => parseParameterSchema(parameterSchema), [parameterSchema]);
   const schemaKey = `${commandName ?? ""}::${parameterSchema ?? ""}`;
-  const [values, setValues] = useState4(() => defaultValues(params));
-  const [errors, setErrors] = useState4({});
-  const [pending, setPending] = useState4(false);
-  const [sendError, setSendError] = useState4(null);
-  const [sentToken, setSentToken] = useState4(null);
-  const sendGen = useRef3(0);
-  useEffect3(() => {
+  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 sendGen = useRef(0);
+  useEffect(() => {
     sendGen.current += 1;
     setValues(defaultValues(params));
     setErrors({});
@@ -992,10 +1002,10 @@ function CommandButton({ widget, data, actions }) {
       if (gen === sendGen.current) setPending(false);
     });
   };
-  return /* @__PURE__ */ jsx5(WidgetFrame, { title: optString(widget.options, "title"), children: /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexDirection: "column", height: "100%", gap: 10 }, children: !commandName ? /* @__PURE__ */ jsx5("div", { style: { ...hint, margin: "auto" }, children: "No command configured." }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+  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: [
       params.map(
-        (param) => isScalar(param) ? /* @__PURE__ */ jsx5(
+        (param) => isScalar(param) ? /* @__PURE__ */ jsx3(
           ParamField,
           {
             widgetId: widget.id,
@@ -1009,7 +1019,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__ */ jsxs4("div", { style: { ...hint, color: param.required ? commandStatusColor("FAILED") : css("muted-foreground") }, children: [
+          /* @__PURE__ */ jsxs3("div", { style: { ...hint, color: param.required ? commandStatusColor("FAILED") : css3("muted-foreground") }, children: [
             param.name,
             ": ",
             param.required ? "required " : "",
@@ -1017,7 +1027,7 @@ function CommandButton({ widget, data, actions }) {
           ] }, param.name)
         )
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -1028,10 +1038,10 @@ function CommandButton({ widget, data, actions }) {
           children: pending ? "Sending\u2026" : `Send ${commandLabel}`
         }
       ),
-      !canWrite ? /* @__PURE__ */ jsx5("div", { style: hint, children: "You don\u2019t have permission to issue commands." }) : !hasSeam ? /* @__PURE__ */ jsx5("div", { style: hint, children: "Commands aren\u2019t available in this view." }) : !deviceToken ? /* @__PURE__ */ jsx5("div", { style: hint, children: "No device is selected for this command." }) : null,
-      sendError ? /* @__PURE__ */ jsx5("div", { role: "alert", style: { ...hint, color: commandStatusColor("FAILED") }, children: sendError }) : null
+      !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
     ] }),
-    /* @__PURE__ */ jsx5(CommandHistory, { commands: data.commands, sentToken, loading: data.loading, error: data.error })
+    /* @__PURE__ */ jsx3(CommandHistory, { commands: data.commands, sentToken, loading: data.loading, error: data.error })
   ] }) }) });
 }
 function ParamField({
@@ -1044,14 +1054,14 @@ function ParamField({
 }) {
   const labelId = `cmd-${widgetId}-${param.name}`;
   const unit = param.unit ? ` (${param.unit})` : "";
-  return /* @__PURE__ */ jsxs4("label", { htmlFor: labelId, style: { display: "flex", flexDirection: "column", gap: 3 }, children: [
-    /* @__PURE__ */ jsxs4("span", { style: { fontSize: 12, color: css("muted-foreground") }, children: [
+  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: [
       param.name,
       unit,
-      param.required ? /* @__PURE__ */ jsx5("span", { style: { color: commandStatusColor("FAILED") }, children: " *" }) : null
+      param.required ? /* @__PURE__ */ jsx3("span", { style: { color: commandStatusColor("FAILED") }, children: " *" }) : null
     ] }),
-    /* @__PURE__ */ jsx5(ParamInput, { id: labelId, param, value, disabled, onChange }),
-    error ? /* @__PURE__ */ jsx5("span", { style: { fontSize: 11, color: commandStatusColor("FAILED") }, children: error }) : null
+    /* @__PURE__ */ jsx3(ParamInput, { id: labelId, param, value, disabled, onChange }),
+    error ? /* @__PURE__ */ jsx3("span", { style: { fontSize: 11, color: commandStatusColor("FAILED") }, children: error }) : null
   ] });
 }
 function ParamInput({
@@ -1062,13 +1072,13 @@ function ParamInput({
   onChange
 }) {
   if (param.enum && param.enum.length > 0) {
-    return /* @__PURE__ */ jsxs4("select", { id, style: inputStyle, value, disabled, onChange: (e) => onChange(e.target.value), children: [
-      !param.required ? /* @__PURE__ */ jsx5("option", { value: "", children: "\u2014" }) : null,
-      param.enum.map((opt) => /* @__PURE__ */ jsx5("option", { value: opt, children: opt }, opt))
+    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))
     ] });
   }
   if (param.dataType === "BOOLEAN") {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx3(
       "input",
       {
         id,
@@ -1081,7 +1091,7 @@ function ParamInput({
     );
   }
   const numeric = param.dataType === "INT" || param.dataType === "DOUBLE";
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx3(
     "input",
     {
       id,
@@ -1104,17 +1114,18 @@ function CommandHistory({
   error
 }) {
   const empty = commands.length === 0;
-  return /* @__PURE__ */ jsx5(
+  const timeZone = useWidgetTimeZone2();
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       style: {
         flex: 1,
         minHeight: 0,
         overflow: "auto",
-        borderTop: `1px solid ${css("border")}`,
+        borderTop: `1px solid ${css3("border")}`,
         paddingTop: 6
       },
-      children: empty ? /* @__PURE__ */ jsx5("div", { style: { ...hint, textAlign: "center", color: error ? commandStatusColor("FAILED") : css("muted-foreground") }, children: error ? "Couldn\u2019t load command history." : loading ? "Loading\u2026" : "No commands issued yet." }) : /* @__PURE__ */ jsx5("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 4 }, children: commands.map((command) => /* @__PURE__ */ jsxs4(
+      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(
         "li",
         {
           style: {
@@ -1126,9 +1137,9 @@ function CommandHistory({
             fontWeight: command.token === sentToken ? 600 : 400
           },
           children: [
-            /* @__PURE__ */ jsx5(StatusBadge, { status: command.status }),
-            /* @__PURE__ */ jsx5("span", { style: { color: css("foreground"), whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: command.name }),
-            /* @__PURE__ */ jsx5("span", { style: { marginLeft: "auto", color: css("muted-foreground"), whiteSpace: "nowrap" }, children: formatDateTime(command.queuedTime) })
+            /* @__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) })
           ]
         },
         command.token
@@ -1138,7 +1149,7 @@ function CommandHistory({
 }
 function StatusBadge({ status }) {
   const color = commandStatusColor(status);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3(
     "span",
     {
       style: {
@@ -1151,13 +1162,13 @@ function StatusBadge({ status }) {
         color
       },
       children: [
-        /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", style: { width: 7, height: 7, borderRadius: "50%", background: color } }),
+        /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", style: { width: 7, height: 7, borderRadius: "50%", background: color } }),
         commandStatusLabel(status)
       ]
     }
   );
 }
-var hint = { fontSize: 11, color: css("muted-foreground") };
+var hint = { fontSize: 11, color: css3("muted-foreground") };
 var SEND_FAILED = "Couldn\u2019t issue the command. Try again.";
 var inputStyle = {
   width: "100%",
@@ -1165,9 +1176,9 @@ var inputStyle = {
   padding: "4px 8px",
   fontSize: 13,
   borderRadius: 4,
-  border: `1px solid ${css("border")}`,
-  background: css("background"),
-  color: css("foreground")
+  border: `1px solid ${css3("border")}`,
+  background: css3("background"),
+  color: css3("foreground")
 };
 var sendButton = {
   padding: "6px 12px",
@@ -1175,14 +1186,26 @@ var sendButton = {
   fontWeight: 600,
   borderRadius: 4,
   border: "none",
-  background: css("primary"),
-  color: css("background"),
+  background: css3("primary"),
+  color: css3("background"),
   marginTop: 2
 };
+var commandButtonWidget = defineWidget3({
+  descriptor: builtinWidgetDescriptors["command-button"],
+  implementation: { kind: "trusted-react", component: CommandButton }
+});
 
 // src/widgets/entity-selector.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import {
+  css as css4,
+  defineWidget as defineWidget4,
+  optString as optString5,
+  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";
 function tokenOf(b) {
   return b.kind === "device" ? b.deviceToken : b.anchor.targetToken;
 }
@@ -1191,23 +1214,23 @@ var control = {
   fontSize: 14,
   padding: "8px 10px",
   borderRadius: 6,
-  border: `1px solid ${css("border")}`,
-  background: css("background"),
-  color: css("foreground")
+  border: `1px solid ${css4("border")}`,
+  background: css4("background"),
+  color: css4("foreground")
 };
 var hint2 = {
   fontSize: 12,
-  color: css("muted-foreground")
+  color: css4("muted-foreground")
 };
 function EntitySelector({ widget }) {
-  const select = useWidgetSelect();
-  const target = optString(widget.options, "selectionTarget");
+  const select = useWidgetSelect2();
+  const target = optString5(widget.options, "selectionTarget");
   const { candidates, loading, error, wired } = useCandidates(target);
-  const title = optString(widget.options, "title");
-  const [pending, setPending] = useState5(null);
+  const title = optString5(widget.options, "title");
+  const [pending, setPending] = useState3(null);
   const selected = candidates.find((c) => c.selected);
   const selectedToken = selected ? tokenOf(selected.binding) : "";
-  useEffect4(() => {
+  useEffect2(() => {
     if (pending !== null && (selectedToken === pending || !candidates.some((c) => tokenOf(c.binding) === pending))) {
       setPending(null);
     }
@@ -1223,8 +1246,8 @@ function EntitySelector({ widget }) {
       select({ slot: target, binding: candidate.binding });
     }
   };
-  return /* @__PURE__ */ jsx6(WidgetFrame, { title, children: /* @__PURE__ */ jsx6("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "12px 16px", height: "100%" }, children: inert ? /* @__PURE__ */ jsx6("span", { style: hint2, children: select && target ? "Selection isn\u2019t available here." : select ? "No target slot configured." : "Selection is available on the live dashboard." }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsxs5(
+  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 },
@@ -1233,165 +1256,74 @@ function EntitySelector({ widget }) {
         onChange,
         "aria-label": title || `Select ${target}`,
         children: [
-          /* @__PURE__ */ jsx6("option", { value: "", disabled: true, children: loading ? "Loading\u2026" : candidates.length === 0 ? "No options" : "Select\u2026" }),
-          candidates.map((c) => /* @__PURE__ */ jsx6("option", { value: tokenOf(c.binding), children: c.label }, tokenOf(c.binding)))
+          /* @__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__ */ jsx6("span", { style: hint2, children: "Couldn\u2019t load options." }) : null
+    error ? /* @__PURE__ */ jsx4("span", { style: hint2, children: "Couldn\u2019t load options." }) : null
   ] }) }) });
 }
+var entitySelectorWidget = defineWidget4({
+  descriptor: builtinWidgetDescriptors["entity-selector"],
+  implementation: { kind: "trusted-react", component: EntitySelector }
+});
 
 // src/widgets/gauge.tsx
-import { useMemo as useMemo3 } from "react";
-
-// src/chart-options.ts
-function distinctNames(samples) {
-  const seen = [];
-  for (const s of samples) {
-    if (!seen.includes(s.name)) seen.push(s.name);
-  }
-  return seen;
-}
-var clamp2 = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
-function shortSide(size) {
-  const s = Math.min(size?.width ?? 0, size?.height ?? 0);
-  return s > 0 ? s : 200;
-}
-function buildLineOption(samples, theme, options = {}, size) {
-  const names = options.measurements?.length ? options.measurements : distinctNames(samples);
-  const axisFont = clamp2(Math.round(shortSide(size) / 22), 8, 12);
-  const series = names.map((name, i) => {
-    const color = theme.series[i % theme.series.length];
-    return {
-      name,
-      type: "line",
-      showSymbol: false,
-      lineStyle: { color },
-      itemStyle: { color },
-      data: samples.filter((s) => s.name === name && s.value != null && s.occurredTime != null).map((s) => [s.occurredTime, s.value])
-    };
-  });
-  return {
-    animation: false,
-    textStyle: { color: theme.foreground, fontSize: axisFont },
-    grid: { left: 8, right: 12, top: names.length > 1 ? 28 : 12, bottom: 8, containLabel: true },
-    tooltip: { trigger: "axis" },
-    legend: names.length > 1 ? { textStyle: { color: theme.mutedForeground, fontSize: axisFont }, top: 0 } : void 0,
-    xAxis: {
-      type: "time",
-      axisLine: { lineStyle: { color: theme.border } },
-      axisLabel: { color: theme.mutedForeground, fontSize: axisFont, hideOverlap: true }
-    },
-    yAxis: {
-      type: "value",
-      splitLine: { lineStyle: { color: theme.border } },
-      axisLabel: { color: theme.mutedForeground, fontSize: axisFont }
-    },
-    series
-  };
-}
-function buildGaugeOption(value, theme, options = {}, size) {
-  const min = options.min ?? 0;
-  const max = options.max ?? 100;
-  const accent = theme.series[0];
-  const unitSuffix = options.unit ? ` ${options.unit}` : "";
-  const s = shortSide(size);
-  const arcWidth = clamp2(Math.round(s / 26), 4, 12);
-  const labelFont = clamp2(Math.round(s / 20), 8, 13);
-  const valueFont = clamp2(Math.round(s / 7), 14, 40);
-  return {
-    animation: false,
-    series: [
-      {
-        type: "gauge",
-        min,
-        max,
-        splitNumber: s < 160 ? 4 : 5,
-        // fewer ticks than the default 10 → no cram
-        radius: "95%",
-        center: ["50%", "58%"],
-        progress: { show: true, width: arcWidth, itemStyle: { color: accent } },
-        pointer: { itemStyle: { color: accent }, length: "55%", width: clamp2(Math.round(s / 50), 2, 6) },
-        anchor: { show: false },
-        axisLine: { lineStyle: { width: arcWidth, color: [[1, theme.border]] } },
-        axisTick: { show: false },
-        splitLine: { length: arcWidth, lineStyle: { color: theme.border, width: 1 } },
-        axisLabel: { color: theme.mutedForeground, fontSize: labelFont, distance: arcWidth + 2 },
-        detail: {
-          valueAnimation: false,
-          color: theme.foreground,
-          fontSize: valueFont,
-          offsetCenter: [0, "30%"],
-          formatter: (v) => value == null ? "\u2014" : `${v}${unitSuffix}`
-        },
-        data: [{ value: value ?? min }]
-      }
-    ]
-  };
-}
-
-// src/echart.tsx
-import { GaugeChart, LineChart } from "echarts/charts";
-import { GridComponent, TooltipComponent } from "echarts/components";
-import * as echarts from "echarts/core";
-import { CanvasRenderer } from "echarts/renderers";
-import { useEffect as useEffect5, useRef as useRef4 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-echarts.use([LineChart, GaugeChart, GridComponent, TooltipComponent, CanvasRenderer]);
-function EChart({ option, className, style }) {
-  const containerRef = useRef4(null);
-  const chartRef = useRef4(null);
-  useEffect5(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const chart = echarts.init(el);
-    chartRef.current = chart;
-    const observer = new ResizeObserver(() => chart.resize());
-    observer.observe(el);
-    return () => {
-      observer.disconnect();
-      chart.dispose();
-      chartRef.current = null;
-    };
-  }, []);
-  useEffect5(() => {
-    chartRef.current?.setOption(option, { notMerge: true });
-  }, [option]);
-  return /* @__PURE__ */ jsx7("div", { ref: containerRef, className, style: { width: "100%", height: "100%", ...style } });
-}
-
-// src/widgets/gauge.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-function Gauge({ widget, data }) {
-  const theme = useChartTheme();
-  const [sizeRef, size] = useElementSize();
-  const name = primaryMeasurementName(widget);
-  const sample = pickSample(data.latest, name);
-  const min = optNumber(widget.options, "min");
-  const max = optNumber(widget.options, "max");
-  const unit = optString(widget.options, "unit");
-  const option = useMemo3(
-    () => buildGaugeOption(sample?.value ?? null, theme, { min, max, unit }, size),
-    [sample?.value, theme, min, max, unit, size.width, size.height]
-  );
-  const flashDirection = useFlashOnChange(
-    sample?.value,
-    optBoolean(widget.options, "flashOnChange"),
-    sample && `${sample.deviceToken}:${sample.name}`
-  );
-  return /* @__PURE__ */ jsx8(WidgetFrame, { title: optString(widget.options, "title") ?? name, children: /* @__PURE__ */ jsx8("div", { ref: sizeRef, style: { width: "100%", height: "100%", ...flashBackgroundStyle(flashDirection) }, children: /* @__PURE__ */ jsx8(EChart, { option }) }) });
+import { useMemo as useMemo2 } from "react";
+import {
+  defineWidget as defineWidget5,
+  flashBackgroundStyle,
+  optBoolean as optBoolean2,
+  optNumber as optNumber3,
+  optString as optString6,
+  pickSample,
+  primaryMeasurementName,
+  useElementSize as useElementSize2,
+  useFlashOnChange,
+  WidgetFrame as WidgetFrame5
+} from "@devicechain/widget-sdk";
+import { buildGaugeOption, EChart, useChartTheme } from "@devicechain/widget-sdk/echarts";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Gauge({ widget, data }) {
+  const theme = useChartTheme();
+  const [sizeRef, size] = useElementSize2();
+  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 option = useMemo2(
+    () => buildGaugeOption(sample?.value ?? null, theme, { min, max, unit }, size),
+    [sample?.value, theme, min, max, unit, size.width, size.height]
+  );
+  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 }) }) });
 }
+var gaugeWidget = defineWidget5({
+  descriptor: builtinWidgetDescriptors["gauge"],
+  implementation: { kind: "trusted-react", component: Gauge }
+});
 
 // src/widgets/image.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import {
+  css as css5,
+  defineWidget as defineWidget6,
+  optString as optString7,
+  WidgetFrame as WidgetFrame6
+} from "@devicechain/widget-sdk";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var FITS = /* @__PURE__ */ new Set(["contain", "cover", "fill"]);
 function Image({ widget }) {
-  const url = optString(widget.options, "url");
-  const alt = optString(widget.options, "alt") ?? "";
-  const fitOption = optString(widget.options, "fit");
+  const url = optString7(widget.options, "url");
+  const alt = optString7(widget.options, "alt") ?? "";
+  const fitOption = optString7(widget.options, "fit");
   const objectFit = fitOption && FITS.has(fitOption) ? fitOption : "contain";
-  return /* @__PURE__ */ jsx9(WidgetFrame, { title: optString(widget.options, "title"), children: url ? /* @__PURE__ */ jsx9("img", { src: url, alt, style: { width: "100%", height: "100%", objectFit, display: "block" } }) : /* @__PURE__ */ jsx9(
+  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(
     "div",
     {
       style: {
@@ -1399,26 +1331,37 @@ function Image({ widget }) {
         alignItems: "center",
         justifyContent: "center",
         height: "100%",
-        color: css("muted-foreground"),
+        color: css5("muted-foreground"),
         fontSize: 13
       },
       children: "No image URL"
     }
   ) });
 }
+var imageWidget = defineWidget6({
+  descriptor: builtinWidgetDescriptors["image"],
+  implementation: { kind: "trusted-react", component: Image }
+});
 
 // src/widgets/label.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import {
+  css as css6,
+  defineWidget as defineWidget7,
+  optNumber as optNumber4,
+  optString as optString8,
+  WidgetFrame as WidgetFrame7
+} from "@devicechain/widget-sdk";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var justify = {
   left: "flex-start",
   center: "center",
   right: "flex-end"
 };
 function Label({ widget }) {
-  const text = optString(widget.options, "text") ?? "";
-  const align = optString(widget.options, "align") ?? "center";
-  const fontSize = optNumber(widget.options, "fontSize") ?? 16;
-  return /* @__PURE__ */ jsx10(WidgetFrame, { title: optString(widget.options, "title"), children: /* @__PURE__ */ jsx10(
+  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(
     "div",
     {
       style: {
@@ -1428,12 +1371,12 @@ function Label({ widget }) {
         height: "100%",
         padding: 12
       },
-      children: /* @__PURE__ */ jsx10(
+      children: /* @__PURE__ */ jsx7(
         "span",
         {
           style: {
             fontSize,
-            color: css("foreground"),
+            color: css6("foreground"),
             textAlign: align,
             whiteSpace: "pre-wrap"
           },
@@ -1443,25 +1386,46 @@ function Label({ widget }) {
     }
   ) });
 }
+var labelWidget = defineWidget7({
+  descriptor: builtinWidgetDescriptors["label"],
+  implementation: { kind: "trusted-react", component: Label }
+});
 
 // src/widgets/latest-card.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-var clamp3 = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+import {
+  css as css7,
+  defineWidget as defineWidget8,
+  flashTextStyle,
+  formatTimestamp,
+  formatValue,
+  optBoolean as optBoolean3,
+  optNumber as optNumber5,
+  optString as optString9,
+  pickSample as pickSample2,
+  primaryMeasurementName as primaryMeasurementName2,
+  useElementSize as useElementSize3,
+  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));
 function LatestCard({ widget, data }) {
-  const [sizeRef, size] = useElementSize();
-  const name = primaryMeasurementName(widget);
-  const sample = pickSample(data.latest, name);
-  const title = optString(widget.options, "title") ?? name;
-  const unit = optString(widget.options, "unit");
-  const precision = optNumber(widget.options, "precision");
+  const [sizeRef, size] = useElementSize3();
+  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 flashDirection = useFlashOnChange(
+  const flashDirection = useFlashOnChange2(
     sample?.value,
-    optBoolean(widget.options, "flashOnChange"),
+    optBoolean3(widget.options, "flashOnChange"),
     sample && `${sample.deviceToken}:${sample.name}`
   );
-  const valueFont = size.height > 0 ? clamp3(Math.round(size.height / 3.5), 16, 44) : 32;
-  return /* @__PURE__ */ jsx11(WidgetFrame, { title, children: /* @__PURE__ */ jsxs6(
+  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,
@@ -1473,60 +1437,72 @@ function LatestCard({ widget, data }) {
         padding: "12px 16px"
       },
       children: [
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs5(
           "div",
           {
             style: {
               fontSize: valueFont,
               fontWeight: 600,
               lineHeight: 1.1,
-              color: css("foreground"),
+              color: css7("foreground"),
               ...flashTextStyle(flashDirection)
             },
             children: [
               display,
-              sample?.value != null && unit ? /* @__PURE__ */ jsx11("span", { style: { fontSize: Math.round(valueFont / 2), color: css("muted-foreground"), marginLeft: 6 }, children: unit }) : null
+              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__ */ jsx11("div", { style: { fontSize: 11, color: css("muted-foreground"), marginTop: 4 }, children: formatTimestamp(sample.occurredTime) }) : null
+        sample?.occurredTime ? /* @__PURE__ */ jsx8("div", { style: { fontSize: 11, color: css7("muted-foreground"), marginTop: 4 }, children: formatTimestamp(sample.occurredTime, timeZone) }) : null
       ]
     }
   ) });
 }
+var latestCardWidget = defineWidget8({
+  descriptor: builtinWidgetDescriptors["latest-card"],
+  implementation: { kind: "trusted-react", component: LatestCard }
+});
 
 // src/widgets/map.tsx
-import { useEffect as useEffect6, useRef as useRef5, useState as useState6 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
 import { renderableBasemap, resolveBasemap } from "@devicechain/client";
 
 // src/basemap-context.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var TenantBasemapContext = createContext2(null);
+import { createContext, useContext } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var TenantBasemapContext = createContext(null);
 function TenantBasemapProvider({
   basemap,
   children
 }) {
-  return /* @__PURE__ */ jsx12(TenantBasemapContext.Provider, { value: basemap, children });
+  return /* @__PURE__ */ jsx9(TenantBasemapContext.Provider, { value: basemap, children });
 }
 function useTenantBasemap() {
-  return useContext2(TenantBasemapContext);
+  return useContext(TenantBasemapContext);
 }
 
 // src/map-runtime-context.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var MapRuntimeContext = createContext3(null);
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var MapRuntimeContext = createContext2(null);
 function MapRuntimeProvider({
   runtime,
   children
 }) {
-  return /* @__PURE__ */ jsx13(MapRuntimeContext.Provider, { value: runtime, children });
+  return /* @__PURE__ */ jsx10(MapRuntimeContext.Provider, { value: runtime, children });
 }
 function useMapRuntime() {
-  return useContext3(MapRuntimeContext);
+  return useContext2(MapRuntimeContext);
 }
 
+// src/widgets/map.tsx
+import {
+  css as css8,
+  defineWidget as defineWidget9,
+  optString as optString10,
+  WidgetFrame as WidgetFrame9
+} from "@devicechain/widget-sdk";
+
 // src/widgets/map-geometry.ts
 function placeable(samples) {
   return samples.filter(
@@ -1620,7 +1596,7 @@ function loadLandStyle() {
 }
 
 // src/widgets/map.tsx
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var mapLibrePromise;
 function loadMapLibre(runtime) {
   if (!mapLibrePromise) {
@@ -1636,20 +1612,20 @@ function loadMapLibre(runtime) {
 }
 var SINGLE_DEVICE_ZOOM = 14;
 function MapWidget({ widget, data }) {
-  const title = optString(widget.options, "title");
+  const title = optString10(widget.options, "title");
   const positions = placeable(data.locations);
   const runtime = useMapRuntime();
   const basemap = renderableBasemap(
     resolveBasemap(
       {
-        tileUrl: optString(widget.options, "tileUrl"),
-        attribution: optString(widget.options, "attribution")
+        tileUrl: optString10(widget.options, "tileUrl"),
+        attribution: optString10(widget.options, "attribution")
       },
       useTenantBasemap()
     )
   );
   if (data.forbidden) {
-    return /* @__PURE__ */ jsx14(WidgetFrame, { title, children: /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx11(WidgetFrame9, { title, children: /* @__PURE__ */ jsx11(
       MapNotice,
       {
         glyph: "\u{1F512}",
@@ -1659,7 +1635,7 @@ function MapWidget({ widget, data }) {
     ) });
   }
   if (!runtime) {
-    return /* @__PURE__ */ jsx14(WidgetFrame, { title, children: /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx11(WidgetFrame9, { title, children: /* @__PURE__ */ jsx11(
       MapNotice,
       {
         glyph: "\u{1F9E9}",
@@ -1669,10 +1645,10 @@ function MapWidget({ widget, data }) {
     ) });
   }
   if (data.loading && positions.length === 0) {
-    return /* @__PURE__ */ jsx14(WidgetFrame, { title, children: /* @__PURE__ */ jsx14(MapNotice, { heading: "Loading\u2026" }) });
+    return /* @__PURE__ */ jsx11(WidgetFrame9, { title, children: /* @__PURE__ */ jsx11(MapNotice, { heading: "Loading\u2026" }) });
   }
   if (positions.length === 0) {
-    return /* @__PURE__ */ jsx14(WidgetFrame, { title, children: /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx11(WidgetFrame9, { title, children: /* @__PURE__ */ jsx11(
       MapNotice,
       {
         heading: data.deviceTokens.length === 0 ? "No devices selected" : "No positions reported",
@@ -1680,11 +1656,11 @@ function MapWidget({ widget, data }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx14(WidgetFrame, { title, bodyStyle: { padding: 0 }, children: /* @__PURE__ */ jsx14(LiveMap, { basemap, positions, runtime }) });
+  return /* @__PURE__ */ jsx11(WidgetFrame9, { title, bodyStyle: { padding: 0 }, children: /* @__PURE__ */ jsx11(LiveMap, { basemap, positions, runtime }) });
 }
 function PlainPanel({ positions, note }) {
   const points = projectToPanel(positions);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       "data-testid": "map-plain-panel",
@@ -1693,10 +1669,10 @@ function PlainPanel({ positions, note }) {
         width: "100%",
         height: "100%",
         overflow: "hidden",
-        background: css("muted")
+        background: css8("muted")
       },
       children: [
-        positions.map((position, i) => /* @__PURE__ */ jsx14(
+        positions.map((position, i) => /* @__PURE__ */ jsx11(
           Marker,
           {
             position,
@@ -1709,7 +1685,7 @@ function PlainPanel({ positions, note }) {
           },
           position.deviceToken
         )),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx11(
           "div",
           {
             "data-testid": "map-no-tiles-note",
@@ -1722,8 +1698,8 @@ function PlainPanel({ positions, note }) {
               fontSize: 10,
               lineHeight: 1.3,
               textAlign: "center",
-              color: css("muted-foreground"),
-              background: css("card"),
+              color: css8("muted-foreground"),
+              background: css8("card"),
               opacity: 0.9
             },
             children: note
@@ -1738,13 +1714,13 @@ function LiveMap({
   positions,
   runtime
 }) {
-  const containerRef = useRef5(null);
-  const mapRef = useRef5(null);
-  const markersRef = useRef5([]);
-  const [status, setStatus] = useState6("loading");
+  const containerRef = useRef2(null);
+  const mapRef = useRef2(null);
+  const markersRef = useRef2([]);
+  const [status, setStatus] = useState4("loading");
   const tileUrl = basemap?.tileUrl ?? null;
   const attribution = basemap?.attribution ?? null;
-  useEffect6(() => {
+  useEffect3(() => {
     let cancelled = false;
     setStatus("loading");
     Promise.all([
@@ -1772,7 +1748,7 @@ function LiveMap({
       mapRef.current = null;
     };
   }, [tileUrl, attribution, runtime.workerUrl]);
-  useEffect6(() => {
+  useEffect3(() => {
     const map = mapRef.current;
     if (status !== "ready" || !map) return;
     let live = true;
@@ -1801,7 +1777,7 @@ function LiveMap({
     };
   }, [status, positionsKey(positions)]);
   if (status === "unavailable") {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx11(
       PlainPanel,
       {
         positions,
@@ -1809,7 +1785,7 @@ function LiveMap({
       }
     );
   }
-  return /* @__PURE__ */ jsx14("div", { ref: containerRef, "data-testid": "map-canvas", style: { width: "100%", height: "100%" } });
+  return /* @__PURE__ */ jsx11("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("|");
@@ -1818,8 +1794,8 @@ var MARKER_DOT_STYLE = {
   width: "12px",
   height: "12px",
   borderRadius: "50%",
-  background: css("primary"),
-  border: `2px solid ${css("card")}`,
+  background: css8("primary"),
+  border: `2px solid ${css8("card")}`,
   boxShadow: "0 0 0 1px rgba(0,0,0,0.25)",
   cursor: "default"
 };
@@ -1828,7 +1804,7 @@ function Marker({
   style
 }) {
   const label = describePosition(position);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       "data-testid": "map-marker",
@@ -1840,7 +1816,7 @@ function Marker({
   );
 }
 function MapNotice({ glyph, heading, detail }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       style: {
@@ -1854,19 +1830,34 @@ function MapNotice({ glyph, heading, detail }) {
         padding: 12,
         boxSizing: "border-box",
         textAlign: "center",
-        color: css("muted-foreground")
+        color: css8("muted-foreground")
       },
       children: [
-        glyph ? /* @__PURE__ */ jsx14("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: glyph }) : null,
-        /* @__PURE__ */ jsx14("div", { style: { fontSize: 13, fontWeight: 600 }, children: heading }),
-        detail ? /* @__PURE__ */ jsx14("div", { style: { fontSize: 11, opacity: 0.8 }, children: detail }) : null
+        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
       ]
     }
   );
 }
+var mapWidget = defineWidget9({
+  descriptor: builtinWidgetDescriptors["map"],
+  implementation: { kind: "trusted-react", component: MapWidget }
+});
 
 // src/widgets/table.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import {
+  css as css9,
+  defineWidget as defineWidget10,
+  FlashValue as FlashValue2,
+  formatTimestamp as formatTimestamp2,
+  optBoolean as optBoolean4,
+  optNumber as optNumber6,
+  optString as optString11,
+  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" };
 var headCell2 = {
   ...cell2,
@@ -1874,23 +1865,24 @@ var headCell2 = {
   fontWeight: 600,
   textTransform: "uppercase",
   letterSpacing: "0.04em",
-  color: css("muted-foreground"),
-  borderBottom: `1px solid ${css("border")}`
+  color: css9("muted-foreground"),
+  borderBottom: `1px solid ${css9("border")}`
 };
 function Table({ widget, data }) {
+  const timeZone = useWidgetTimeZone4();
   const rows = Object.values(data.latest).sort((a, b) => a.name.localeCompare(b.name));
-  const precision = optNumber(widget.options, "precision");
-  const flash = optBoolean(widget.options, "flashOnChange");
-  return /* @__PURE__ */ jsx15(WidgetFrame, { title: optString(widget.options, "title"), children: /* @__PURE__ */ jsx15("div", { style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxs8("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 13, color: css("foreground") }, children: [
-    /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsxs8("tr", { children: [
-      /* @__PURE__ */ jsx15("th", { style: headCell2, children: "Measurement" }),
-      /* @__PURE__ */ jsx15("th", { style: headCell2, children: "Value" }),
-      /* @__PURE__ */ jsx15("th", { style: headCell2, children: "Time" })
+  const precision = optNumber6(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" })
     ] }) }),
-    /* @__PURE__ */ jsx15("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx15("tr", { children: /* @__PURE__ */ jsx15("td", { colSpan: 3, style: { ...cell2, textAlign: "center", color: css("muted-foreground") }, children: "No data yet" }) }) : rows.map((row) => /* @__PURE__ */ jsxs8("tr", { children: [
-      /* @__PURE__ */ jsx15("td", { style: cell2, children: row.name }),
-      /* @__PURE__ */ jsx15("td", { style: { ...cell2, fontVariantNumeric: "tabular-nums" }, children: /* @__PURE__ */ jsx15(
-        FlashValue,
+    /* @__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(
+        FlashValue2,
         {
           value: row.value,
           precision,
@@ -1898,176 +1890,361 @@ function Table({ widget, data }) {
           identity: `${row.deviceToken}:${row.name}`
         }
       ) }),
-      /* @__PURE__ */ jsx15("td", { style: { ...cell2, color: css("muted-foreground") }, children: formatTimestamp(row.occurredTime) })
+      /* @__PURE__ */ jsx12("td", { style: { ...cell2, color: css9("muted-foreground") }, children: formatTimestamp2(row.occurredTime, timeZone) })
     ] }, row.name)) })
   ] }) }) });
 }
+var tableWidget = defineWidget10({
+  descriptor: builtinWidgetDescriptors["table"],
+  implementation: { kind: "trusted-react", component: Table }
+});
 
 // src/widgets/time-series-chart.tsx
-import { useMemo as useMemo4 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { useMemo as useMemo3 } from "react";
+import {
+  defineWidget as defineWidget11,
+  optString as optString12,
+  useElementSize as useElementSize4,
+  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";
 function TimeSeriesChart({ widget, data }) {
-  const theme = useChartTheme();
-  const [sizeRef, size] = useElementSize();
+  const theme = useChartTheme2();
+  const [sizeRef, size] = useElementSize4();
   const measurements = widget.datasource?.measurements;
-  const option = useMemo4(
+  const option = useMemo3(
     () => buildLineOption(data.samples, theme, { measurements }, size),
     [data.samples, theme, measurements, size.width, size.height]
   );
-  return /* @__PURE__ */ jsx16(WidgetFrame, { title: optString(widget.options, "title"), children: /* @__PURE__ */ jsx16("div", { ref: sizeRef, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx16(EChart, { option }) }) });
+  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({
+  descriptor: builtinWidgetDescriptors["timeseries-chart"],
+  implementation: { kind: "trusted-react", component: TimeSeriesChart }
+});
 
-// src/registry.ts
-var WIDGET_CHANNEL = {
-  "timeseries-chart": "measurement",
-  "latest-card": "measurement",
-  gauge: "measurement",
-  table: "measurement",
-  label: "measurement",
-  image: "measurement",
-  "alarm-table": "alarm",
-  "alarm-count": "alarm",
-  "command-button": "control",
-  "entity-selector": "selection",
-  map: "location"
-};
-var WIDGET_REGISTRY = {
-  "timeseries-chart": TimeSeriesChart,
-  "latest-card": LatestCard,
-  gauge: Gauge,
-  table: Table,
-  label: Label,
-  image: Image
-};
-var ALARM_WIDGET_REGISTRY = {
-  "alarm-table": AlarmTable,
-  "alarm-count": AlarmCount
-};
-var CONTROL_WIDGET_REGISTRY = {
-  "command-button": CommandButton
-};
-var SELECTION_WIDGET_REGISTRY = {
-  "entity-selector": EntitySelector
+// src/builtin-registry.ts
+var builtinWidgetDefinitions = [
+  timeSeriesChartWidget,
+  latestCardWidget,
+  gaugeWidget,
+  tableWidget,
+  labelWidget,
+  imageWidget,
+  alarmTableWidget,
+  alarmCountWidget,
+  commandButtonWidget,
+  entitySelectorWidget,
+  mapWidget
+];
+function createBuiltinWidgetRegistry() {
+  return createWidgetRegistry(builtinWidgetDefinitions);
+}
+
+// src/default-registry.ts
+var builtin;
+function defaultWidgetRegistry() {
+  builtin ?? (builtin = createBuiltinWidgetRegistry());
+  return builtin;
+}
+
+// src/connected-widget.tsx
+import {
+  optString as optString13,
+  useAlarmStream,
+  useCommandStream,
+  useDatasourceAvailability,
+  useLocationStream,
+  useMeasurementStream,
+  useWidgetCandidates,
+  useWidgetSelect as useWidgetSelect3,
+  WidgetFrame as WidgetFrame13
+} from "@devicechain/widget-sdk";
+
+// src/widget-containment.tsx
+import { Component, createContext as createContext3, useCallback, useContext as useContext3, useState as useState5 } from "react";
+import { WidgetFrame as WidgetFrame12 } from "@devicechain/widget-sdk";
+
+// src/widget-host.ts
+function describeError(error) {
+  if (error instanceof Error) return error.message || error.name;
+  return String(error);
+}
+function guardAsync(fn, report) {
+  return (...args) => {
+    let pending;
+    try {
+      pending = Promise.resolve(fn(...args));
+    } catch (e) {
+      report(describeError(e));
+      return Promise.reject(e);
+    }
+    return pending.catch((e) => {
+      report(describeError(e));
+      throw e;
+    });
+  };
+}
+var ALARM_AUTHORITY = "alarm:write";
+var COMMAND_AUTHORITY = "command:write";
+function undeclared(capability, report) {
+  return guardAsync(
+    () => Promise.reject(new Error(`this widget did not declare the ${capability} interaction`)),
+    report
+  );
+}
+function narrowActions(actions, descriptor, report) {
+  if (!actions) return void 0;
+  const alarm = descriptor.interactions.alarmActions === true;
+  const command = descriptor.interactions.commandSend === true;
+  if (!alarm && !command) return void 0;
+  const narrowed = {
+    acknowledgeAlarm: alarm ? guardAsync((t) => actions.acknowledgeAlarm(t), report) : undeclared("alarmActions", report),
+    clearAlarm: alarm ? guardAsync((t) => actions.clearAlarm(t), report) : undeclared("alarmActions", report),
+    can: (authority) => {
+      if (authority === ALARM_AUTHORITY && !alarm) return false;
+      if (authority === COMMAND_AUTHORITY && !command) return false;
+      return actions.can(authority);
+    }
+  };
+  if (command && typeof actions.sendCommand === "function") {
+    narrowed.sendCommand = guardAsync((d, n, p) => actions.sendCommand(d, n, p), report);
+  }
+  return narrowed;
+}
+function narrowSelect(select, descriptor) {
+  return descriptor.interactions.selection === true ? select : void 0;
+}
+function narrowCandidates(candidates, descriptor, report) {
+  if (!candidates || descriptor.interactions.candidates !== true) return void 0;
+  return guardAsync((slot) => candidates(slot), report);
+}
+
+// src/widget-containment.tsx
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var MESSAGE_STYLE = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 4,
+  width: "100%",
+  height: "100%",
+  padding: 12,
+  boxSizing: "border-box",
+  textAlign: "center",
+  color: "hsl(var(--muted-foreground))"
 };
-var LOCATION_WIDGET_REGISTRY = {
-  map: MapWidget
+var BUTTON_STYLE = {
+  marginTop: 4,
+  fontSize: 11,
+  padding: "2px 8px",
+  cursor: "pointer"
 };
-var WIDGET_BINDS_DATASOURCE = {
-  "timeseries-chart": true,
-  "latest-card": true,
-  gauge: true,
-  table: true,
-  label: false,
-  image: false,
-  "alarm-table": true,
-  "alarm-count": true,
-  "command-button": true,
-  "entity-selector": false,
-  // A map binds a datasource, and needs it: the selector names both the devices whose
-  // positions to plot and (in its own field) the location series to read.
-  map: true
+var ReportContext = createContext3(() => {
+});
+function useReportRejection() {
+  return useContext3(ReportContext);
+}
+var WidgetErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null, resetKey: this.props.resetKey };
+    this.reset = () => {
+      this.props.onReset();
+      this.setState({ error: null });
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { error: { message: describeError(error) } };
+  }
+  static getDerivedStateFromProps(props, state) {
+    if (props.resetKey === state.resetKey) return null;
+    return { error: null, resetKey: props.resetKey };
+  }
+  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" })
+    ] }) });
+  }
 };
+function WidgetContainment({ title, resetKey, children }) {
+  const [messages, setMessages] = useState5([]);
+  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(
+      "div",
+      {
+        role: "status",
+        style: {
+          position: "absolute",
+          left: 4,
+          right: 4,
+          bottom: 4,
+          fontSize: 11,
+          padding: "2px 6px",
+          borderRadius: 4,
+          background: "hsl(var(--destructive, 0 70% 45%))",
+          color: "hsl(var(--destructive-foreground, 0 0% 100%))",
+          display: "flex",
+          gap: 6,
+          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" })
+        ]
+      }
+    )
+  ] });
+}
 
 // src/connected-widget.tsx
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
-var DEFAULT_ALARM_ROWS = 50;
-var DEFAULT_COMMAND_ROWS = 20;
-function ConnectedWidget({ widget, hub, actions, initialSamples }) {
-  const availability = useDatasourceAvailability(hub, widget.datasource);
+import { jsx as jsx15, jsxs as jsxs9 } 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 }) });
+}
+function ConnectedWidgetBody({ widget, hub, registry, actions, initialSamples }) {
+  const unresolved = widget.type === UNKNOWN_WIDGET_TYPE;
+  const descriptor = unresolved ? void 0 : registry.descriptor(widget.type);
+  const implementation = unresolved ? void 0 : registry.implementation(widget.type);
+  const readsDatasource = descriptor !== void 0 && descriptor.datasource.mode !== "none";
+  const availability = useDatasourceAvailability(hub, readsDatasource ? widget.datasource : void 0);
   if (availability === "unavailable") {
-    return /* @__PURE__ */ jsx17(WidgetUnavailableFrame, { widget });
+    return /* @__PURE__ */ jsx15(WidgetUnavailableFrame, { widget });
   }
-  const channel = WIDGET_CHANNEL[widget.type];
-  if (channel === "alarm") {
-    return /* @__PURE__ */ jsx17(AlarmConnectedWidget, { widget, hub, actions });
+  if (widget.type === UNKNOWN_WIDGET_TYPE) {
+    return /* @__PURE__ */ jsx15(UnresolvedWidgetFrame, { storedType: widget.raw.type, reason: widget.reason });
   }
-  if (channel === "control") {
-    return /* @__PURE__ */ jsx17(ControlConnectedWidget, { widget, hub, actions });
-  }
-  if (channel === "selection") {
-    return /* @__PURE__ */ jsx17(SelectionConnectedWidget, { widget });
+  if (!descriptor || !implementation) {
+    return /* @__PURE__ */ jsx15(
+      UnresolvedWidgetFrame,
+      {
+        storedType: widget.type,
+        reason: { code: "unregistered", message: `"${widget.type}" is not registered in this host's widget registry` }
+      }
+    );
   }
-  if (channel === "location") {
-    return /* @__PURE__ */ jsx17(LocationConnectedWidget, { widget, hub });
+  return /* @__PURE__ */ jsx15(HostScope, { descriptor, actions, children: (hostActions) => /* @__PURE__ */ jsx15(
+    ChannelBody,
+    {
+      widget,
+      hub,
+      descriptor,
+      Component: implementation.component,
+      actions: hostActions,
+      initialSamples
+    }
+  ) });
+}
+function HostScope({
+  descriptor,
+  actions,
+  children
+}) {
+  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(
+    () => narrowCandidates(candidates, descriptor, report),
+    [candidates, descriptor, report]
+  );
+  return /* @__PURE__ */ jsx15(WidgetSelectProvider, { select: narrowedSelect, children: /* @__PURE__ */ jsx15(WidgetCandidatesProvider, { candidates: narrowedCandidates, children: children(narrowed) }) });
+}
+function ChannelBody(props) {
+  switch (props.descriptor.channel) {
+    case "alarm":
+      return /* @__PURE__ */ jsx15(AlarmConnectedWidget, { ...props });
+    case "control":
+      return /* @__PURE__ */ jsx15(ControlConnectedWidget, { ...props });
+    case "location":
+      return /* @__PURE__ */ jsx15(LocationConnectedWidget, { ...props });
+    case "selection":
+    case "none":
+      return /* @__PURE__ */ jsx15(StaticConnectedWidget, { ...props });
+    case "measurement":
+      return /* @__PURE__ */ jsx15(MeasurementConnectedWidget, { ...props });
   }
-  return /* @__PURE__ */ jsx17(MeasurementConnectedWidget, { widget, hub, initialSamples });
 }
-function SelectionConnectedWidget({ widget }) {
-  const Component = SELECTION_WIDGET_REGISTRY[widget.type];
-  if (!Component) return null;
-  return /* @__PURE__ */ jsx17(Component, { widget, data: null });
+function StaticConnectedWidget({ widget, Component: Component2, actions }) {
+  return /* @__PURE__ */ jsx15(Component2, { widget, data: null, actions });
 }
-function MeasurementConnectedWidget({ widget, hub, initialSamples }) {
+function MeasurementConnectedWidget({ widget, hub, descriptor, Component: Component2, actions, initialSamples }) {
   const data = useMeasurementStream(hub, widget.datasource, {
-    window: optNumber(widget.options, "window"),
+    window: measurementWindow(descriptor, widget),
     initialSamples
   });
-  if (data.error) return /* @__PURE__ */ jsx17(WidgetErrorFrame, { widget, error: data.error });
-  const Component = WIDGET_REGISTRY[widget.type];
-  if (!Component) return null;
-  return /* @__PURE__ */ jsx17(Component, { widget, data });
+  if (data.error) return /* @__PURE__ */ jsx15(WidgetErrorFrame, { widget, error: data.error });
+  return /* @__PURE__ */ jsx15(Component2, { widget, data, actions });
 }
-function AlarmConnectedWidget({
-  widget,
-  hub,
-  actions
-}) {
-  const data = useAlarmStream(hub, alarmSubscription(widget));
+function AlarmConnectedWidget({ widget, hub, descriptor, Component: Component2, actions }) {
+  const data = useAlarmStream(hub, alarmSubscription(descriptor, widget));
   if (data.error && data.alarms.length === 0 && data.total === 0) {
-    return /* @__PURE__ */ jsx17(WidgetErrorFrame, { widget, error: data.error });
+    return /* @__PURE__ */ jsx15(WidgetErrorFrame, { widget, error: data.error });
   }
-  const Component = ALARM_WIDGET_REGISTRY[widget.type];
-  if (!Component) return null;
-  return /* @__PURE__ */ jsx17(Component, { widget, data, actions });
+  return /* @__PURE__ */ jsx15(Component2, { widget, data, actions });
 }
-function ControlConnectedWidget({
-  widget,
-  hub,
-  actions
-}) {
-  const data = useCommandStream(hub, commandSubscription(widget));
-  const Component = CONTROL_WIDGET_REGISTRY[widget.type];
-  if (!Component) return null;
-  return /* @__PURE__ */ jsx17(Component, { widget, data, actions });
-}
-function LocationConnectedWidget({
-  widget,
-  hub
-}) {
-  const data = useLocationStream(hub, locationSubscription(widget));
+function ControlConnectedWidget({ widget, hub, descriptor, Component: Component2, actions }) {
+  const data = useCommandStream(hub, commandSubscription(descriptor, widget));
+  return /* @__PURE__ */ jsx15(Component2, { widget, data, actions });
+}
+function LocationConnectedWidget({ widget, hub, Component: Component2, actions }) {
+  const data = useLocationStream(hub, { datasource: widget.datasource });
   if (data.error && data.locations.length === 0) {
-    return /* @__PURE__ */ jsx17(WidgetErrorFrame, { widget, error: data.error });
+    return /* @__PURE__ */ jsx15(WidgetErrorFrame, { widget, error: data.error });
   }
-  const Component = LOCATION_WIDGET_REGISTRY[widget.type];
-  if (!Component) return null;
-  return /* @__PURE__ */ jsx17(Component, { widget, data });
-}
-function locationSubscription(widget) {
-  return { datasource: widget.datasource };
-}
-function commandSubscription(widget) {
-  return {
-    datasource: widget.datasource,
-    pageSize: Math.max(1, optNumber(widget.options, "maxRows") ?? DEFAULT_COMMAND_ROWS)
-  };
-}
-function alarmSubscription(widget) {
-  const pageSize = widget.type === "alarm-count" ? DEFAULT_ALARM_ROWS : Math.max(1, optNumber(widget.options, "maxRows") ?? DEFAULT_ALARM_ROWS);
-  return {
-    datasource: widget.datasource,
-    state: optString(widget.options, "state"),
-    severity: optString(widget.options, "severity"),
-    acknowledged: parseAcknowledged(optString(widget.options, "acknowledged")),
-    pageSize
-  };
+  return /* @__PURE__ */ jsx15(Component2, { widget, data, actions });
 }
-function parseAcknowledged(value) {
-  if (value === "true") return true;
-  if (value === "false") return false;
-  return void 0;
+function UnresolvedWidgetFrame({
+  storedType: stored,
+  reason
+}) {
+  const storedType = typeof stored === "string" ? stored : "";
+  const heading = (reason?.code ?? "unregistered") === "unregistered" ? "This widget needs a newer viewer" : "This widget cannot be shown here";
+  return /* @__PURE__ */ jsx15(WidgetFrame13, { children: /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 4,
+        width: "100%",
+        height: "100%",
+        padding: 12,
+        boxSizing: "border-box",
+        textAlign: "center",
+        color: "hsl(var(--muted-foreground))"
+      },
+      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: [
+          "Widget type: ",
+          storedType
+        ] }),
+        reason && /* @__PURE__ */ jsx15("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: reason.message })
+      ]
+    }
+  ) });
 }
 function WidgetUnavailableFrame({ widget }) {
-  return /* @__PURE__ */ jsx17(WidgetFrame, { title: optString(widget.options, "title"), children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx15(WidgetFrame13, { title: optString13(widget.options, "title"), children: /* @__PURE__ */ jsxs9(
     "div",
     {
       style: {
@@ -2084,15 +2261,15 @@ function WidgetUnavailableFrame({ widget }) {
         color: "hsl(var(--muted-foreground))"
       },
       children: [
-        /* @__PURE__ */ jsx17("div", { style: { fontSize: 20, lineHeight: 1 }, "aria-hidden": "true", children: "\u2298" }),
-        /* @__PURE__ */ jsx17("div", { style: { fontSize: 13, fontWeight: 600 }, children: "Device unavailable" }),
-        /* @__PURE__ */ jsx17("div", { style: { fontSize: 11, opacity: 0.8 }, children: "The bound device no longer exists." })
+        /* @__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." })
       ]
     }
   ) });
 }
 function WidgetErrorFrame({ widget, error }) {
-  return /* @__PURE__ */ jsx17(WidgetFrame, { title: optString(widget.options, "title"), children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx15(WidgetFrame13, { title: optString13(widget.options, "title"), children: /* @__PURE__ */ jsxs9(
     "div",
     {
       style: {
@@ -2109,33 +2286,45 @@ function WidgetErrorFrame({ widget, error }) {
         color: "hsl(var(--muted-foreground))"
       },
       children: [
-        /* @__PURE__ */ jsx17("div", { style: { fontSize: 20, lineHeight: 1 }, children: "\u26A0" }),
-        /* @__PURE__ */ jsx17("div", { style: { fontSize: 13, fontWeight: 600 }, children: "Data unavailable" }),
-        /* @__PURE__ */ jsx17("div", { style: { fontSize: 11, opacity: 0.8, wordBreak: "break-word" }, children: String(error) })
+        /* @__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) })
       ]
     }
   ) });
 }
 
 // src/dashboard-renderer.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import {
+  WidgetCandidatesProvider as WidgetCandidatesProvider2,
+  WidgetSelectProvider as WidgetSelectProvider2,
+  WidgetSubjectProvider,
+  WidgetThemeRootProvider,
+  WidgetTimeZoneProvider
+} from "@devicechain/widget-sdk";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function DashboardRenderer({
   definition,
   hub,
+  registry: registryProp,
   actions,
   seedHistory = true,
   bindings,
   sizing,
   select,
-  candidates
+  candidates,
+  timeZone,
+  themeRoot
 }) {
   const breakpoint = useActiveBreakpoint(definition.canvas.breakpoints);
-  const histories = useWidgetHistories(definition.widgets, seedHistory, bindings);
+  const widgets = useMemo5(() => 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 effectiveSizing = sizing ?? definition.canvas.sizing;
-  return /* @__PURE__ */ jsx18("div", { style: sizingStyle(effectiveSizing, bg), children: /* @__PURE__ */ jsx18(WidgetSelectProvider, { select, children: /* @__PURE__ */ jsx18(WidgetCandidatesProvider, { candidates, children: /* @__PURE__ */ jsx18(
+  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(
     "div",
     {
       style: {
@@ -2146,20 +2335,21 @@ function DashboardRenderer({
         rowGap,
         width: "100%"
       },
-      children: definition.widgets.map((widget) => {
+      children: widgets.map((widget) => {
         const box = resolveWidgetBox(widget.layout, breakpoint);
-        return /* @__PURE__ */ jsx18("div", { style: gridItemStyle(box, grid.columns), children: /* @__PURE__ */ jsx18(WidgetSubjectProvider, { label: widgetSubjectLabel(widget, definition.slots, bindings), children: /* @__PURE__ */ jsx18(
+        return /* @__PURE__ */ jsx16("div", { style: gridItemStyle(box, grid.columns), children: /* @__PURE__ */ jsx16(WidgetSubjectProvider, { label: widgetSubjectLabel(widget), children: /* @__PURE__ */ jsx16(
           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);
@@ -2186,401 +2376,157 @@ function sizingStyle(sizing, bg) {
   if ("width" in sizing) return { ...base, width: sizing.width, maxWidth: "100%", height: "100%" };
   return { ...base, width: "100%", height: sizing.height };
 }
-function ownGet(map, key) {
-  return map && Object.prototype.hasOwnProperty.call(map, key) ? map[key] : void 0;
+function resolveWidgets(widgets, bindings) {
+  return widgets.map((widget) => {
+    if (widget.type === UNKNOWN_WIDGET_TYPE2 || widget.datasource?.kind !== "slot") return widget;
+    return { ...widget, datasource: resolveWidgetDatasource(widget.datasource, bindings) };
+  });
 }
-function widgetSubjectLabel(widget, slots, bindings) {
+function widgetSubjectLabel(widget) {
   const ds = widget.datasource;
   if (!ds) return void 0;
-  let binding;
-  if (ds.kind === "device") {
-    binding = ds.deviceToken ? { kind: "device", deviceToken: ds.deviceToken } : void 0;
-  } else if (ds.kind === "anchor") {
-    binding = { kind: "anchor", anchor: ds.anchor };
-  } else if (ds.kind === "slot") {
-    const slot = ownGet(slots, ds.slot);
-    binding = slot?.scope ? ownGet(bindings, ds.slot) : ownGet(bindings, ds.slot) ?? slot?.defaultBinding;
-  }
-  if (binding?.kind === "device") return binding.deviceToken;
-  if (binding?.kind === "anchor") return binding.anchor.targetToken;
+  if (ds.kind === "device") return ds.deviceToken || void 0;
+  if (ds.kind === "anchor") return ds.anchor.targetToken;
   return void 0;
 }
 function useActiveBreakpoint(breakpoints) {
-  const [width, setWidth] = useState7(
+  const [width, setWidth] = useState6(
     () => typeof window === "undefined" ? 0 : window.innerWidth
   );
-  useEffect7(() => {
+  useEffect4(() => {
     const onResize = () => setWidth(window.innerWidth);
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, []);
   return activeBreakpoint(breakpoints, width);
 }
-function useWidgetHistories(widgets, enabled, bindings) {
-  const [histories, setHistories] = useState7({});
-  const bindingsKey = bindings ? JSON.stringify(bindings) : null;
-  useEffect7(() => {
+function seedKey(widget, registry) {
+  if (widget.type === UNKNOWN_WIDGET_TYPE2 || registry.descriptor(widget.type)?.channel !== "measurement") {
+    return void 0;
+  }
+  return JSON.stringify(widget.datasource ?? null);
+}
+function useWidgetHistories(widgets, enabled, registry) {
+  const [seeds, setSeeds] = useState6({});
+  const requested = useRef3({});
+  const mounted = useRef3(true);
+  useEffect4(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const wanted = widgets.flatMap((w) => {
+    const key = seedKey(w, registry);
+    return key === void 0 ? [] : [[w.id, key]];
+  });
+  const wantedKey = JSON.stringify(wanted);
+  useEffect4(() => {
     if (!enabled) {
-      setHistories({});
+      requested.current = {};
+      setSeeds({});
       return;
     }
-    let cancelled = false;
     const historyWindow = defaultHistoryWindow();
-    Promise.all(
-      widgets.map(
-        // Only measurement widgets consume a history seed; a non-measurement widget
-        // (alarm, command) reconciles from its own channel, so backfilling it would fire
-        // a wasted (and all-measurements) bucketedMeasurements query it ignores.
-        async (w) => [
-          w.id,
-          WIDGET_CHANNEL[w.type] === "measurement" ? await fetchWidgetHistory(w, historyWindow, bindings) : []
-        ]
-      )
-    ).then((entries) => {
-      if (!cancelled) setHistories(Object.fromEntries(entries));
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [widgets, enabled, bindingsKey]);
-  return histories;
+    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;
+      const widget = byId.get(id);
+      if (!widget) continue;
+      void fetchWidgetHistory(widget, historyWindow).then((samples) => {
+        if (!mounted.current || requested.current[id] !== key) return;
+        setSeeds((prev) => ({ ...prev, [id]: { key, samples } }));
+      });
+    }
+    requested.current = next;
+  }, [wantedKey, enabled]);
+  return useMemo5(() => {
+    const out = {};
+    if (!enabled) return out;
+    for (const w of widgets) {
+      const seed = seeds[w.id];
+      out[w.id] = seed && seed.key === seedKey(w, registry) ? seed.samples : void 0;
+    }
+    return out;
+  }, [widgets, seeds, enabled, registry]);
 }
 
+// src/registry.ts
+var entries = Object.entries(builtinWidgetDescriptors);
+var WIDGET_CHANNEL = Object.freeze(
+  Object.fromEntries(entries.map(([id, d]) => [id, d.channel]))
+);
+var WIDGET_BINDS_DATASOURCE = Object.freeze(
+  Object.fromEntries(entries.map(([id, d]) => [id, d.datasource.mode !== "none"]))
+);
+
+// src/index.ts
+import { pickSample as pickSample3, optBoolean as optBoolean5 } from "@devicechain/widget-sdk";
+
 // src/options.ts
-var TITLE = {
-  kind: "string",
-  doc: "Heading shown in the widget frame. Blank hides the frame heading."
-};
-var TITLE_OR_MEASUREMENT = {
-  kind: "string",
-  doc: "Heading shown in the widget frame. Defaults to the displayed measurement name."
-};
-var PRECISION = {
-  kind: "number",
-  integer: true,
-  min: 0,
-  max: 100,
-  doc: "Decimal places to round displayed values to. Unset shows the raw value."
-};
-var FLASH_ON_CHANGE = {
-  kind: "boolean",
-  doc: "Briefly tint a value green on a rise and red on a fall when it changes."
-};
-var WINDOW = {
-  kind: "number",
-  integer: true,
-  min: 1,
-  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 UNIT = {
-  kind: "string",
-  doc: "Unit suffix shown beside the value."
-};
-var ALARM_STATE = {
-  kind: "enum",
-  values: ["ACTIVE", "CLEARED"],
-  doc: "Show only alarms in this state. Unset shows every state."
-};
-var ALARM_SEVERITY = {
-  kind: "enum",
-  values: ["CRITICAL", "MAJOR", "MINOR", "WARNING", "INDETERMINATE"],
-  doc: "Show only alarms at this severity. Unset shows every severity."
-};
-var ALARM_ACKNOWLEDGED = {
-  kind: "enum",
-  values: ["true", "false"],
-  doc: "Show only acknowledged ('true') or unacknowledged ('false') alarms. Unset shows both."
-};
-var SELECTION_TARGET = {
-  kind: "string",
-  doc: "Name of the slot this widget re-points when the viewer picks an entity."
-};
-var WIDGET_OPTIONS = {
-  "timeseries-chart": {
-    title: TITLE,
-    window: WINDOW
-  },
-  "latest-card": {
-    title: TITLE_OR_MEASUREMENT,
-    measurement: {
-      kind: "string",
-      doc: "Which measurement to display. Defaults to the first the datasource selects."
-    },
-    unit: UNIT,
-    precision: PRECISION,
-    flashOnChange: FLASH_ON_CHANGE,
-    window: WINDOW
-  },
-  gauge: {
-    title: TITLE_OR_MEASUREMENT,
-    measurement: {
-      kind: "string",
-      doc: "Which measurement to display. Defaults to the first the datasource selects."
-    },
-    min: {
-      kind: "number",
-      doc: "Low end of the gauge scale. Default 0."
-    },
-    max: {
-      kind: "number",
-      doc: "High end of the gauge scale. Default 100."
-    },
-    unit: UNIT,
-    flashOnChange: FLASH_ON_CHANGE,
-    window: WINDOW
-  },
-  table: {
-    title: TITLE,
-    precision: PRECISION,
-    flashOnChange: FLASH_ON_CHANGE,
-    window: WINDOW
-  },
-  // label and image carry no datasource: they sit on the measurement channel only
-  // because that is ConnectedWidget's default branch, and read no stream data at all.
-  label: {
-    title: TITLE,
-    text: {
-      kind: "string",
-      required: true,
-      doc: "The text to show. Rendered as plain text \u2014 markup is never interpreted."
-    },
-    align: {
-      kind: "enum",
-      values: ["left", "center", "right"],
-      doc: "Horizontal alignment of the text. Default center."
-    },
-    fontSize: {
-      kind: "number",
-      min: 1,
-      doc: "Text size in pixels. Default 16."
-    }
-  },
-  image: {
-    title: TITLE,
-    url: {
-      kind: "string",
-      required: true,
-      doc: "Source URL of the image."
-    },
-    alt: {
-      kind: "string",
-      doc: "Alternative text describing the image for assistive technology."
-    },
-    fit: {
-      kind: "enum",
-      values: ["contain", "cover", "fill"],
-      doc: "How the image fills its box. Default contain."
-    }
-  },
-  "alarm-table": {
-    title: TITLE,
-    state: ALARM_STATE,
-    severity: ALARM_SEVERITY,
-    acknowledged: ALARM_ACKNOWLEDGED,
-    maxRows: {
-      kind: "number",
-      integer: true,
-      min: 1,
-      doc: "Alarms loaded into the table. Default 50."
-    },
-    precision: PRECISION,
-    flashOnChange: FLASH_ON_CHANGE,
-    selectionTarget: SELECTION_TARGET
-  },
-  // No maxRows: alarmSubscription() forces the default page size for a count, because the
-  // number it shows is the SERVER total and the page is read only to sample the worst
-  // loaded severity. An authored maxRows here would be read by nothing.
-  "alarm-count": {
-    title: TITLE,
-    state: ALARM_STATE,
-    severity: ALARM_SEVERITY,
-    acknowledged: ALARM_ACKNOWLEDGED
-  },
-  "command-button": {
-    title: TITLE,
-    commandName: {
-      kind: "string",
-      required: true,
-      doc: "Command key issued to the target device. Without it the widget cannot send."
-    },
-    commandLabel: {
-      kind: "string",
-      doc: "Text on the send button. Defaults to the command key."
-    },
-    parameterSchema: {
-      kind: "string",
-      format: "json",
-      doc: "The command's parameter descriptors, baked in as JSON at author time. Drives the typed form."
-    },
-    maxRows: {
-      kind: "number",
-      integer: true,
-      min: 1,
-      doc: "Recent commands shown in the history. Default 20."
-    }
-  },
-  "entity-selector": {
-    title: TITLE,
-    selectionTarget: { ...SELECTION_TARGET, required: true }
-  },
-  // 🔴 tileUrl is NOT `required`, and that is the decision rather than an oversight.
-  // `required` means "absent leaves the widget with nothing to show", and a map without
-  // a basemap still shows every position it was asked to — on a plain panel, saying why
-  // there is no map behind them. Marking it required would report a correctly-rendering
-  // widget as broken on every board that names no provider of its own — which is most
-  // of them, because the usual and recommended answer is to inherit the tenant's
-  // basemap rather than to configure tiles per board.
-  map: {
-    title: TITLE,
-    tileUrl: {
-      kind: "string",
-      doc: "Raster tile URL template, e.g. https://tiles.example.com/{z}/{x}/{y}.png. Leave empty to inherit the tenant's basemap; setting one overrides it for this board only."
-    },
-    attribution: {
-      kind: "string",
-      doc: "Credit line the tile source requires, shown on the map. Set whatever the provider you chose asks for."
-    }
-  }
-};
-var CROSS_FIELD_RULES = {
-  gauge: [
-    (options) => {
-      const min = options.min;
-      const max = options.max;
-      if (typeof min !== "number" || typeof max !== "number") return void 0;
-      if (!Number.isFinite(min) || !Number.isFinite(max)) return void 0;
-      if (max > min) return void 0;
-      return {
-        key: "max",
-        code: "invariant",
-        message: `max (${max}) must be greater than min (${min})`
-      };
-    }
-  ]
-};
+import {
+  clampNumberOption,
+  enumValues,
+  numberSpec,
+  validateOptions
+} from "@devicechain/dashboards";
+var WIDGET_OPTIONS = Object.freeze(
+  Object.fromEntries(Object.entries(builtinWidgetDescriptors).map(([id, d]) => [id, d.options]))
+);
+function constraintsFor(widgetType) {
+  return builtinWidgetCatalog.get(widgetType)?.constraints ?? [];
+}
 function validateWidgetOptions(widgetType, options) {
   const specs = WIDGET_OPTIONS[widgetType];
-  const issues = [];
-  const bag = options ?? {};
-  for (const [key, spec] of Object.entries(specs)) {
-    const value = bag[key];
-    if (value === void 0 || spec.required && value === "") {
-      if (spec.required) {
-        issues.push({ widgetType, key, code: "missing", message: `${key} is required but not set` });
-      }
-      continue;
-    }
-    issues.push(...checkValue(widgetType, key, spec, value));
-  }
-  for (const key of Object.keys(bag)) {
-    if (Object.prototype.hasOwnProperty.call(specs, key)) continue;
-    issues.push({
-      widgetType,
-      key,
-      code: "unknown",
-      message: `${key} is not read by a ${widgetType} widget`
-    });
-  }
-  for (const rule of CROSS_FIELD_RULES[widgetType] ?? []) {
-    const issue = rule(bag);
-    if (issue) issues.push({ widgetType, ...issue });
-  }
-  return issues;
-}
-function checkValue(widgetType, key, spec, value) {
-  const issue = (code, message) => [{ widgetType, key, code, message }];
-  switch (spec.kind) {
-    case "string":
-      if (typeof value !== "string") {
-        return issue("type", `${key} must be a string, got ${describe(value)}`);
-      }
-      if (spec.format === "json" && !parsesAsJson(value)) {
-        return issue("json", `${key} must be valid JSON`);
-      }
-      return [];
-    case "number":
-      if (typeof value !== "number" || !Number.isFinite(value)) {
-        return issue("type", `${key} must be a finite number, got ${describe(value)}`);
-      }
-      if (spec.integer && !Number.isInteger(value)) {
-        return issue("range", `${key} must be a whole number, got ${value}`);
-      }
-      if (spec.min !== void 0 && value < spec.min) {
-        return issue("range", `${key} must be at least ${spec.min}, got ${value}`);
-      }
-      if (spec.max !== void 0 && value > spec.max) {
-        return issue("range", `${key} must be at most ${spec.max}, got ${value}`);
-      }
-      return [];
-    case "boolean":
-      if (typeof value !== "boolean") {
-        return issue("type", `${key} must be a boolean, got ${describe(value)}`);
-      }
-      return [];
-    case "enum":
-      if (typeof value !== "string") {
-        return issue("type", `${key} must be a string, got ${describe(value)}`);
-      }
-      if (!spec.values.includes(value)) {
-        return issue("enum", `${key} must be one of ${spec.values.join(", ")}, got ${JSON.stringify(value)}`);
-      }
-      return [];
-  }
-}
-function parsesAsJson(value) {
-  try {
-    JSON.parse(value);
-    return true;
-  } catch {
-    return false;
-  }
-}
-function describe(value) {
-  if (value === null) return "null";
-  if (typeof value === "string") return `string ${JSON.stringify(value)}`;
-  if (Array.isArray(value)) return "an array";
-  return `${typeof value} ${JSON.stringify(value)}`;
+  return validateOptions(specs, options, { constraints: constraintsFor(widgetType), label: widgetType }).map(
+    ({ key, code, message }) => ({ widgetType, key, code, message })
+  );
 }
 function numberOptionSpec(type, key) {
-  const specs = WIDGET_OPTIONS[type];
-  if (!Object.prototype.hasOwnProperty.call(specs, key)) return void 0;
-  const spec = specs[key];
-  return spec.kind === "number" ? spec : void 0;
-}
-function clampNumberOption(spec, value) {
-  if (!Number.isFinite(value)) return void 0;
-  if (!spec) return value;
-  let next = spec.integer ? Math.trunc(value) : value;
-  if (spec.min !== void 0) next = Math.max(spec.min, next);
-  if (spec.max !== void 0) next = Math.min(spec.max, next);
-  return next;
+  return numberSpec(WIDGET_OPTIONS[type], key);
 }
 function enumOptionValues(type, key) {
-  const specs = WIDGET_OPTIONS[type];
-  if (!Object.prototype.hasOwnProperty.call(specs, key)) return void 0;
-  const spec = specs[key];
-  return spec.kind === "enum" ? spec.values : void 0;
+  return enumValues(WIDGET_OPTIONS[type], key);
 }
 
 // src/definition-options.ts
-function validateDefinitionOptions(definition) {
-  return definition.widgets.flatMap(
-    (widget) => validateWidgetOptions(widget.type, widget.options).map((issue) => ({ ...issue, widgetId: widget.id }))
-  );
+import {
+  UNKNOWN_WIDGET_TYPE as UNKNOWN_WIDGET_TYPE3,
+  validateOptions as validateOptions2
+} from "@devicechain/dashboards";
+function validateDefinitionOptions(definition, options = {}) {
+  return definition.widgets.flatMap((widget) => {
+    if (widget.type === UNKNOWN_WIDGET_TYPE3) return [];
+    const type = widget.type;
+    const descriptor = descriptorFor(type, options.catalog);
+    return validateOptions2(descriptor.options, widget.options, {
+      constraints: descriptor.constraints,
+      label: type
+    }).map(({ key, code, message }) => ({ widgetType: type, key, code, message, widgetId: widget.id }));
+  });
+}
+function descriptorFor(type, catalog) {
+  const descriptor = catalog?.get(type) ?? builtinWidgetCatalog.get(type);
+  if (!descriptor) {
+    throw new Error(`no widget descriptor for "${type}"; validate with the catalog the definition was parsed with`);
+  }
+  return descriptor;
 }
-function stripUnknownOptions(definition) {
+function stripUnknownOptions(definition, options = {}) {
   let changed = false;
   const widgets = definition.widgets.map((widget) => {
-    const stripped = stripUnknownWidgetOptions(widget);
+    const stripped = stripUnknownWidgetOptions(widget, options.catalog);
     if (stripped !== widget) changed = true;
     return stripped;
   });
   return changed ? { ...definition, widgets } : definition;
 }
-function stripUnknownWidgetOptions(widget) {
+function stripUnknownWidgetOptions(widget, catalog) {
   const bag = widget.options;
   if (!bag) return widget;
-  const specs = WIDGET_OPTIONS[widget.type];
+  const specs = descriptorFor(widget.type, catalog).options;
   const keys = Object.keys(bag);
   const kept = keys.filter((key) => Object.prototype.hasOwnProperty.call(specs, key));
   if (kept.length === keys.length) return widget;
@@ -2588,49 +2534,85 @@ function stripUnknownWidgetOptions(widget) {
   for (const key of kept) options[key] = bag[key];
   return { ...widget, options };
 }
+
+// src/index.ts
+import {
+  WidgetFrame as WidgetFrame14,
+  WidgetSubjectProvider as WidgetSubjectProvider2,
+  WidgetSelectProvider as WidgetSelectProvider3,
+  useWidgetSelect as useWidgetSelect4,
+  WidgetTimeZoneProvider as WidgetTimeZoneProvider2,
+  useWidgetTimeZone as useWidgetTimeZone5,
+  WidgetThemeRootProvider as WidgetThemeRootProvider2,
+  useWidgetThemeRoot,
+  WidgetCandidatesProvider as WidgetCandidatesProvider3,
+  useWidgetCandidates as useWidgetCandidates2,
+  useFlashOnChange as useFlashOnChange3,
+  flashTextStyle as flashTextStyle2,
+  flashBackgroundStyle as flashBackgroundStyle2,
+  FlashValue as FlashValue3,
+  useMeasurementStream as useMeasurementStream2,
+  useAlarmStream as useAlarmStream2,
+  useCommandStream as useCommandStream2,
+  useLocationStream as useLocationStream2,
+  useDatasourceAvailability as useDatasourceAvailability2,
+  useDashboardHub,
+  useResolvedBindings,
+  useSlotCandidates,
+  useCandidates as useCandidates2,
+  css as css10
+} from "@devicechain/widget-sdk";
+import {
+  EChart as EChart3,
+  buildLineOption as buildLineOption2,
+  buildGaugeOption as buildGaugeOption2,
+  resolveChartTheme,
+  useChartTheme as useChartTheme3
+} from "@devicechain/widget-sdk/echarts";
 export {
-  ALARM_WIDGET_REGISTRY,
   AlarmCount,
   AlarmTable,
   BUNDLED_BASEMAP_ATTRIBUTION,
-  CONTROL_WIDGET_REGISTRY,
   CommandButton,
   ConnectedWidget,
   DashboardRenderer,
-  EChart,
+  EChart3 as EChart,
   EntitySelector,
-  FlashValue,
+  FlashValue3 as FlashValue,
   Gauge,
   Image,
-  LOCATION_WIDGET_REGISTRY,
   Label,
   LatestCard,
   MapRuntimeProvider,
   MapWidget,
-  SELECTION_WIDGET_REGISTRY,
   Table,
   TenantBasemapProvider,
   TimeSeriesChart,
   WIDGET_BINDS_DATASOURCE,
   WIDGET_CHANNEL,
   WIDGET_OPTIONS,
-  WIDGET_REGISTRY,
-  WidgetCandidatesProvider,
-  WidgetFrame,
-  WidgetSelectProvider,
-  WidgetSubjectProvider,
-  buildGaugeOption,
-  buildLineOption,
+  WidgetCandidatesProvider3 as WidgetCandidatesProvider,
+  WidgetFrame14 as WidgetFrame,
+  WidgetSelectProvider3 as WidgetSelectProvider,
+  WidgetSubjectProvider2 as WidgetSubjectProvider,
+  WidgetThemeRootProvider2 as WidgetThemeRootProvider,
+  WidgetTimeZoneProvider2 as WidgetTimeZoneProvider,
+  buildGaugeOption2 as buildGaugeOption,
+  buildLineOption2 as buildLineOption,
   buildPayload,
+  builtinWidgetCatalog,
+  builtinWidgetDefinitions,
+  builtinWidgetDescriptors,
   clampNumberOption,
   commandStatusColor,
   commandStatusLabel,
-  css,
+  createBuiltinWidgetRegistry,
+  css10 as css,
   defaultValues,
   describePosition,
   enumOptionValues,
-  flashBackgroundStyle,
-  flashTextStyle,
+  flashBackgroundStyle2 as flashBackgroundStyle,
+  flashTextStyle2 as flashTextStyle,
   formatDegrees,
   highestSeverity,
   isScalar,
@@ -2638,31 +2620,35 @@ export {
   landStyleFrom,
   loadLandStyle,
   numberOptionSpec,
-  optBoolean,
+  optBoolean5 as optBoolean,
   parseParameterSchema,
-  pickSample,
+  pickSample3 as pickSample,
   placeable,
   projectToPanel,
   rasterStyleFor,
   resolveChartTheme,
+  resolveWidgets,
   severityColor,
   severityLabel,
   severityRank,
   stripUnknownOptions,
-  useAlarmStream,
-  useCandidates,
-  useChartTheme,
-  useCommandStream,
-  useDatasourceAvailability,
-  useFlashOnChange,
-  useLocationStream,
+  useAlarmStream2 as useAlarmStream,
+  useCandidates2 as useCandidates,
+  useChartTheme3 as useChartTheme,
+  useCommandStream2 as useCommandStream,
+  useDashboardHub,
+  useDatasourceAvailability2 as useDatasourceAvailability,
+  useFlashOnChange3 as useFlashOnChange,
+  useLocationStream2 as useLocationStream,
   useMapRuntime,
-  useMeasurementStream,
+  useMeasurementStream2 as useMeasurementStream,
   useResolvedBindings,
   useSlotCandidates,
   useTenantBasemap,
-  useWidgetCandidates,
-  useWidgetSelect,
+  useWidgetCandidates2 as useWidgetCandidates,
+  useWidgetSelect4 as useWidgetSelect,
+  useWidgetThemeRoot,
+  useWidgetTimeZone5 as useWidgetTimeZone,
   validateDefinitionOptions,
   validateParams,
   validateWidgetOptions,