@devicechain/dashboards 0.21.1-rc.1 → 0.22.0-rc.1

package/dist/index.js

@@ -59,9 +59,545 @@ var WIDGET_TYPES = [
   "alarm-count",
   "command-button",
   "entity-selector",
-  "map"
+  "map",
+  "linear-gauge",
+  "level-gauge",
+  "battery",
+  "status-light",
+  "signal-bars",
+  "compass",
+  "progress-ring",
+  "command-slider",
+  "command-toggle",
+  "stat-card",
+  "bar-chart",
+  "pie-chart",
+  "fleet-table"
 ];
+var PLACEMENT_ANCHORS = [
+  "top-left",
+  "top",
+  "top-right",
+  "left",
+  "center",
+  "right",
+  "bottom-left",
+  "bottom",
+  "bottom-right"
+];
+var PLACEMENT_MODES = ["grid", "relative"];
+var RESERVED_PLACEMENT_MODES = ["pinned", "sticky"];
+var THEME_COLOR_TOKENS = [
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "muted",
+  "muted-foreground",
+  "primary",
+  "primary-foreground",
+  "border",
+  "destructive",
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+  "sev-critical",
+  "sev-major",
+  "sev-minor",
+  "sev-warning"
+];
+var SPACE_TOKEN_PX = {
+  "space-0": 0,
+  "space-1": 4,
+  "space-2": 8,
+  "space-3": 12,
+  "space-4": 16
+};
+var FRAME_VARIANTS = ["card", "flat", "none"];
+var FRAME_RADII = ["none", "sm", "md", "lg"];
+var FRAME_BORDER_WIDTHS = [0, 1, 2, 3];
+var FRAME_HEADERS = ["auto", "show", "hide"];
 var UNKNOWN_WIDGET_TYPE = "unknown-widget";
+var CANVAS_DENSITIES = ["compact", "comfortable", "wall"];
+var DEFAULT_CANVAS_DENSITY = "comfortable";
+var DENSITY_SCALE = {
+  compact: 0.9,
+  comfortable: 1,
+  wall: 1.5
+};
+function isCanvasDensity(value) {
+  return typeof value === "string" && CANVAS_DENSITIES.includes(value);
+}
+var CURRENT_SCHEMA_VERSION = 3;
+
+// src/grid.ts
+var BASE_BREAKPOINT = "base";
+var DEFAULT_GRID = Object.freeze({
+  columns: 12,
+  minCellSize: 56,
+  gutter: 8,
+  padding: 0
+});
+var PHONE_MIN_COLUMNS = 4;
+function isSpaceToken(v) {
+  return typeof v === "string" && Object.prototype.hasOwnProperty.call(SPACE_TOKEN_PX, v);
+}
+function gridLengthPx(len, scale = 1) {
+  const base = typeof len === "number" ? len : SPACE_TOKEN_PX[len];
+  return base * scale;
+}
+function gutterPx(grid, scale = 1) {
+  const g = grid.gutter;
+  if (typeof g === "object") return { x: gridLengthPx(g.x, scale), y: gridLengthPx(g.y, scale) };
+  const v = gridLengthPx(g, scale);
+  return { x: v, y: v };
+}
+function paddingPx(grid, scale = 1) {
+  const p = grid.padding;
+  if (typeof p === "object") {
+    return {
+      top: gridLengthPx(p.top, scale),
+      right: gridLengthPx(p.right, scale),
+      bottom: gridLengthPx(p.bottom, scale),
+      left: gridLengthPx(p.left, scale)
+    };
+  }
+  const v = gridLengthPx(p, scale);
+  return { top: v, right: v, bottom: v, left: v };
+}
+function cellSizeAt(grid, containerWidth, columns = grid.columns, scale = 1) {
+  const pad = paddingPx(grid, scale);
+  const g = gutterPx(grid, scale);
+  return Math.max(0, (containerWidth - pad.left - pad.right - (columns - 1) * g.x) / columns);
+}
+function containerWidthFor(grid, cell, columns = grid.columns, scale = 1) {
+  const pad = paddingPx(grid, scale);
+  return columns * cell + (columns - 1) * gutterPx(grid, scale).x + pad.left + pad.right;
+}
+function breakpointMinWidth(spec) {
+  return typeof spec === "number" ? spec : spec.minWidth;
+}
+function breakpointColumns(canvas, breakpoint) {
+  if (breakpoint === BASE_BREAKPOINT) return canvas.grid.columns;
+  const spec = Object.prototype.hasOwnProperty.call(canvas.breakpoints, breakpoint) ? canvas.breakpoints[breakpoint] : void 0;
+  return spec !== void 0 && typeof spec === "object" ? spec.columns : canvas.grid.columns;
+}
+function activeBreakpoint(breakpoints, width) {
+  let best = BASE_BREAKPOINT;
+  let bestWidth = -1;
+  for (const [name, spec] of Object.entries(breakpoints)) {
+    const minWidth = breakpointMinWidth(spec);
+    if (width >= minWidth && minWidth > bestWidth) {
+      best = name;
+      bestWidth = minWidth;
+    }
+  }
+  return best;
+}
+function resolvePlacement(layout, breakpoint) {
+  return Object.prototype.hasOwnProperty.call(layout, breakpoint) ? layout[breakpoint] : layout[BASE_BREAKPOINT];
+}
+function layoutBreakpoints(breakpoints, widgets) {
+  const names = /* @__PURE__ */ new Set([BASE_BREAKPOINT, ...Object.keys(breakpoints)]);
+  for (const w of widgets) for (const bp of Object.keys(w.layout)) names.add(bp);
+  return [...names];
+}
+function gridFootprintsOverlap(a, b) {
+  return a.col < b.col + b.cols && b.col < a.col + a.cols && a.row < b.row + b.rows && b.row < a.row + a.rows;
+}
+function pushDown(items, first = []) {
+  const order = items.map((item, index) => ({ ...item, index }));
+  const priority = new Map(first.map((id, i) => [id, i]));
+  order.sort((a, b) => {
+    const pa = priority.get(a.id);
+    const pb = priority.get(b.id);
+    if (pa !== void 0 || pb !== void 0) return (pa ?? Infinity) - (pb ?? Infinity);
+    return a.placement.row - b.placement.row || a.placement.col - b.placement.col || a.index - b.index;
+  });
+  const placed = [];
+  const out = /* @__PURE__ */ new Map();
+  for (const item of order) {
+    let p = item.placement;
+    for (; ; ) {
+      const hits = placed.filter((q) => gridFootprintsOverlap(p, q));
+      if (hits.length === 0) break;
+      p = { ...p, row: Math.max(...hits.map((q) => q.row + q.rows)) };
+    }
+    placed.push(p);
+    out.set(item.id, p);
+  }
+  return out;
+}
+function pushAside(items, first = []) {
+  const order = items.map((item, index) => ({ ...item, index }));
+  const priority = new Map(first.map((id, i) => [id, i]));
+  order.sort((a, b) => {
+    const pa = priority.get(a.id);
+    const pb = priority.get(b.id);
+    if (pa !== void 0 || pb !== void 0) return (pa ?? Infinity) - (pb ?? Infinity);
+    return a.placement.row - b.placement.row || a.placement.col - b.placement.col || a.index - b.index;
+  });
+  const pending = new Map(order.map((item) => [item.id, item.placement]));
+  const placed = [];
+  const out = /* @__PURE__ */ new Map();
+  const clear = (p, others) => {
+    for (const q of others) if (gridFootprintsOverlap(p, q)) return false;
+    return true;
+  };
+  for (const item of order) {
+    pending.delete(item.id);
+    let p = item.placement;
+    if (priority.has(item.id)) {
+      for (; ; ) {
+        const hits = placed.filter((q) => gridFootprintsOverlap(p, q));
+        if (hits.length === 0) break;
+        p = { ...p, row: Math.max(...hits.map((q) => q.row + q.rows)) };
+      }
+    } else if (!clear(p, placed)) {
+      const from = p.row;
+      for (let k = 1; ; k++) {
+        const up = { ...p, row: from - k };
+        if (up.row >= 0 && clear(up, placed) && clear(up, pending.values())) {
+          p = up;
+          break;
+        }
+        const down = { ...p, row: from + k };
+        if (clear(down, placed)) {
+          p = down;
+          break;
+        }
+      }
+    }
+    placed.push(p);
+    out.set(item.id, p);
+  }
+  return out;
+}
+function firstFreeSlot(occupied, cols, rows, columns) {
+  const lastCol = Math.max(0, columns - cols);
+  const bottom = occupied.reduce((m, p) => Math.max(m, p.row + p.rows), 0);
+  for (let row = 0; row <= bottom; row++) {
+    for (let col = 0; col <= lastCol; col++) {
+      const probe = { mode: "grid", col, row, cols, rows };
+      if (!occupied.some((q) => gridFootprintsOverlap(probe, q))) return { col, row };
+    }
+  }
+  return { col: 0, row: bottom };
+}
+function spanPx(n, cell, gutter) {
+  return n * cell + (n - 1) * gutter;
+}
+function gridRect(p, cell, gutter) {
+  return {
+    x: p.col * (cell + gutter.x),
+    y: p.row * (cell + gutter.y),
+    w: spanPx(p.cols, cell, gutter.x),
+    h: spanPx(p.rows, cell, gutter.y)
+  };
+}
+function anchorFraction(anchor) {
+  const fx = anchor.endsWith("left") ? 0 : anchor.endsWith("right") ? 1 : 0.5;
+  const fy = anchor.startsWith("top") ? 0 : anchor.startsWith("bottom") ? 1 : 0.5;
+  return { fx, fy };
+}
+function relativeRect(p, host, cell, gutter) {
+  const w = "fill" in p.size ? host.w : spanPx(p.size.cols, cell, gutter.x);
+  const h = "fill" in p.size ? host.h : spanPx(p.size.rows, cell, gutter.y);
+  const a = anchorFraction(p.anchor);
+  const s = anchorFraction(p.self ?? p.anchor);
+  return {
+    x: host.x + a.fx * host.w - s.fx * w + (p.offset?.x ?? 0) * (cell + gutter.x),
+    y: host.y + a.fy * host.h - s.fy * h + (p.offset?.y ?? 0) * (cell + gutter.y),
+    w,
+    h
+  };
+}
+function layoutRects(widgets, breakpoint, cell, gutter) {
+  const rects = /* @__PURE__ */ new Map();
+  const relatives = [];
+  for (const w of widgets) {
+    const p = resolvePlacement(w.layout, breakpoint);
+    if (p.mode === "grid") rects.set(w.id, gridRect(p, cell, gutter));
+    else relatives.push({ id: w.id, p });
+  }
+  for (let pass = 0; pass < 2; pass++) {
+    for (const { id, p } of relatives) {
+      const host = rects.get(p.host);
+      if (host && !rects.has(id)) rects.set(id, relativeRect(p, host, cell, gutter));
+    }
+  }
+  return rects;
+}
+var FRAME_PRESETS = {
+  card: {
+    variant: "card",
+    border: { width: 1, radius: "md", color: "border" },
+    padding: "space-3",
+    background: "card",
+    header: "auto"
+  },
+  flat: {
+    variant: "flat",
+    border: { width: 0, radius: "md", color: "border" },
+    padding: "space-3",
+    background: "card",
+    header: "auto"
+  },
+  none: {
+    variant: "none",
+    border: { width: 0, radius: "none", color: "border" },
+    padding: "space-0",
+    background: "transparent",
+    header: "hide"
+  }
+};
+function resolveFrame(canvasFrame, widgetFrame) {
+  const c = canvasFrame ?? {};
+  const w = widgetFrame ?? {};
+  const variant = w.variant ?? c.variant ?? "card";
+  const preset = FRAME_PRESETS[variant];
+  return {
+    variant,
+    border: { ...preset.border, ...c.border, ...w.border },
+    padding: w.padding ?? c.padding ?? preset.padding,
+    background: w.background ?? c.background ?? preset.background,
+    header: w.header ?? c.header ?? preset.header
+  };
+}
+
+// src/is-record.ts
+function isRecord(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+
+// src/legacy-grid.ts
+var GRID_SCHEMA_VERSION = 2;
+var LEGACY_REFERENCE_WIDTH = 1366;
+var LEGACY_DEFAULTS = { columns: 24, gap: 8, rowHeight: 40 };
+function num(rec, key, fallback) {
+  const v = rec[key];
+  return typeof v === "number" && Number.isFinite(v) ? v : fallback;
+}
+function storedSchemaVersion(raw) {
+  if (typeof raw.schemaVersion === "number" && Number.isFinite(raw.schemaVersion)) return raw.schemaVersion;
+  const grid = isRecord(raw.canvas) && isRecord(raw.canvas.grid) ? raw.canvas.grid : {};
+  if ("rowHeight" in grid || "gap" in grid) return 1;
+  const widgets = Array.isArray(raw.widgets) ? raw.widgets : [];
+  for (const w of widgets) {
+    if (!isRecord(w) || !isRecord(w.layout)) continue;
+    for (const box of Object.values(w.layout)) {
+      if (!isRecord(box)) continue;
+      if ("colSpan" in box || "rowSpan" in box || "z" in box) return 1;
+      if (!("mode" in box) && !("cols" in box)) return 1;
+    }
+  }
+  return CURRENT_SCHEMA_VERSION;
+}
+function legacyGrid(raw) {
+  const rec = isRecord(raw) ? raw : {};
+  const columns = Math.max(1, Math.round(num(rec, "columns", LEGACY_DEFAULTS.columns)));
+  const rowHeight = Math.max(1, num(rec, "rowHeight", LEGACY_DEFAULTS.rowHeight));
+  let gapRow = LEGACY_DEFAULTS.gap;
+  let gapCol = LEGACY_DEFAULTS.gap;
+  if (typeof rec.gap === "number" && Number.isFinite(rec.gap)) {
+    gapRow = gapCol = Math.max(0, rec.gap);
+  } else if (isRecord(rec.gap)) {
+    gapRow = Math.max(0, num(rec.gap, "row", LEGACY_DEFAULTS.gap));
+    gapCol = Math.max(0, num(rec.gap, "col", LEGACY_DEFAULTS.gap));
+  }
+  return {
+    columns,
+    rowPitch: rowHeight + gapRow,
+    gutter: gapRow === gapCol ? gapCol : { x: gapCol, y: gapRow }
+  };
+}
+function restack(items) {
+  const order = [...items].sort((a, b) => a.old.row - b.old.row || a.old.col - b.old.col || a.index - b.index);
+  const placed = [];
+  const moved = /* @__PURE__ */ new Map();
+  for (const item of order) {
+    let p = item.placement;
+    const sharesColumn = (q) => p.col < q.col + q.cols && q.col < p.col + p.cols;
+    const floor = placed.filter((q) => q.old.end <= item.old.row && sharesColumn(q.placement)).reduce((m, q) => Math.max(m, q.placement.row + q.placement.rows), 0);
+    if (floor > p.row) p = { ...p, row: floor };
+    for (; ; ) {
+      const hits = placed.filter((q) => gridFootprintsOverlap(p, q.placement));
+      if (hits.length === 0) break;
+      p = { ...p, row: Math.max(...hits.map((q) => q.placement.row + q.placement.rows)) };
+    }
+    placed.push({ ...item, placement: p });
+    if (p !== item.placement) moved.set(item.index, p);
+  }
+  return moved;
+}
+function convertLegacyDefinition(raw) {
+  const canvasIn = isRecord(raw.canvas) ? raw.canvas : {};
+  const old = legacyGrid(canvasIn.grid);
+  const grid = { ...DEFAULT_GRID, gutter: old.gutter };
+  const columns = grid.columns;
+  const pitch = cellSizeAt(grid, LEGACY_REFERENCE_WIDTH) + gutterPx(grid).y;
+  const toCols = (line) => Math.round(line * columns / old.columns);
+  const toRows = (line) => Math.round(line * old.rowPitch / pitch);
+  const convertBox = (box) => {
+    const col = Math.max(0, Math.round(num(box, "col", 0)));
+    const colSpan = Math.max(1, Math.round(num(box, "colSpan", 1)));
+    const row = Math.max(0, Math.round(num(box, "row", 0)));
+    const rowSpan = Math.max(1, Math.round(num(box, "rowSpan", 1)));
+    const c0 = Math.min(toCols(col), columns - 1);
+    const c1 = Math.min(Math.max(toCols(col + colSpan), c0 + 1), columns);
+    const r0 = toRows(row);
+    const r1 = Math.max(toRows(row + rowSpan), r0 + 1);
+    return { mode: "grid", col: c0, row: r0, cols: c1 - c0, rows: r1 - r0 };
+  };
+  const oldBoxes = /* @__PURE__ */ new Map();
+  const widgetsIn = Array.isArray(raw.widgets) ? raw.widgets : [];
+  const widgets = widgetsIn.map((w, i) => {
+    if (!isRecord(w) || !isRecord(w.layout)) return w;
+    const layout = {};
+    const olds = {};
+    for (const [bp, box] of Object.entries(w.layout)) {
+      if (!isRecord(box) || bp === "__proto__") continue;
+      layout[bp] = convertBox(box);
+      const row = Math.max(0, Math.round(num(box, "row", 0)));
+      olds[bp] = { row, end: row + Math.max(1, Math.round(num(box, "rowSpan", 1))), col: Math.max(0, Math.round(num(box, "col", 0))) };
+    }
+    oldBoxes.set(i, olds);
+    return { ...w, layout };
+  });
+  const byBreakpoint = /* @__PURE__ */ new Set([BASE_BREAKPOINT]);
+  for (const w of widgets) if (isRecord(w) && isRecord(w.layout)) for (const bp of Object.keys(w.layout)) byBreakpoint.add(bp);
+  for (const bp of byBreakpoint) {
+    const items = [];
+    widgets.forEach((w, i) => {
+      if (!isRecord(w) || !isRecord(w.layout)) return;
+      const layout = w.layout;
+      const own2 = Object.prototype.hasOwnProperty.call(layout, bp);
+      const p = own2 ? layout[bp] : layout[BASE_BREAKPOINT];
+      const old2 = oldBoxes.get(i)?.[own2 ? bp : BASE_BREAKPOINT];
+      if (p && isRecord(p) && p.mode === "grid" && old2) items.push({ index: i, placement: p, old: old2 });
+    });
+    for (const [index, moved] of restack(items)) {
+      const w = widgets[index];
+      w.layout[bp] = moved;
+    }
+  }
+  const breakpoints = {};
+  if (isRecord(canvasIn.breakpoints)) {
+    for (const [name, width] of Object.entries(canvasIn.breakpoints)) {
+      if (typeof width === "number" && Number.isFinite(width)) breakpoints[name] = width;
+    }
+  }
+  return {
+    ...raw,
+    schemaVersion: GRID_SCHEMA_VERSION,
+    canvas: { ...canvasIn, grid, breakpoints },
+    widgets
+  };
+}
+
+// src/legacy-window.ts
+var TIME_SERIES = "timeseries-chart";
+function convertSampleWindows(raw) {
+  const widgetsIn = Array.isArray(raw.widgets) ? raw.widgets : [];
+  const flagged = [];
+  const widgets = widgetsIn.map((w, i) => {
+    if (!isRecord(w) || w.type !== TIME_SERIES) return w;
+    let out = w;
+    if (isRecord(w.options) && Object.prototype.hasOwnProperty.call(w.options, "window")) {
+      const { window: _count, ...options } = w.options;
+      out = { ...out, options };
+      flagged.push(i);
+    }
+    if (isRecord(w.widget) && w.widget.optionsVersion === 1) {
+      out = { ...out, widget: { ...w.widget, optionsVersion: 2 } };
+    }
+    return out;
+  });
+  return { doc: { ...raw, schemaVersion: CURRENT_SCHEMA_VERSION, widgets }, flagged };
+}
+
+// src/time-range.ts
+var TIME_RANGE_PRESETS = [
+  { id: "15m", seconds: 15 * 60 },
+  { id: "1h", seconds: 60 * 60 },
+  { id: "6h", seconds: 6 * 60 * 60 },
+  { id: "24h", seconds: 24 * 60 * 60 },
+  { id: "7d", seconds: 7 * 24 * 60 * 60 }
+];
+var DEFAULT_TIME_RANGE_SECONDS = 60 * 60;
+var MIN_TIME_RANGE_SECONDS = 60;
+var MAX_TIME_RANGE_SECONDS = 7 * 24 * 60 * 60;
+function isValidSpanSeconds(v) {
+  return typeof v === "number" && Number.isInteger(v) && v >= MIN_TIME_RANGE_SECONDS && v <= MAX_TIME_RANGE_SECONDS;
+}
+function initialTimeRange(defaultSeconds, link = {}, now = Date.now()) {
+  const spanSeconds = link.spanSeconds ?? (isValidSpanSeconds(defaultSeconds) ? defaultSeconds : DEFAULT_TIME_RANGE_SECONDS);
+  return link.paused ? { spanSeconds, paused: true, pausedAt: now } : { spanSeconds, paused: false };
+}
+function pauseRange(state, now) {
+  return state.paused ? state : { spanSeconds: state.spanSeconds, paused: true, pausedAt: now };
+}
+function resumeRange(state) {
+  return state.paused ? { spanSeconds: state.spanSeconds, paused: false } : state;
+}
+function withSpan(state, spanSeconds) {
+  return isValidSpanSeconds(spanSeconds) ? { ...state, spanSeconds } : state;
+}
+function rangeEnd(state, now) {
+  return state.paused && state.pausedAt !== void 0 ? state.pausedAt : now;
+}
+function rangeWindow(state, now) {
+  const end = rangeEnd(state, now);
+  return {
+    startTime: new Date(end - state.spanSeconds * 1e3).toISOString(),
+    endTime: new Date(end).toISOString()
+  };
+}
+var MAX_SEED_BUCKETS = 240;
+var BASE_BUCKET_SECONDS = 60;
+function bucketSecondsFor(spanSeconds) {
+  const wanted = Math.ceil(spanSeconds / MAX_SEED_BUCKETS);
+  return Math.max(BASE_BUCKET_SECONDS, Math.ceil(wanted / BASE_BUCKET_SECONDS) * BASE_BUCKET_SECONDS);
+}
+function seedBucketCount(spanSeconds) {
+  return Math.ceil(spanSeconds / bucketSecondsFor(spanSeconds));
+}
+function parseRangeParam(value) {
+  if (!value) return void 0;
+  return TIME_RANGE_PRESETS.find((p) => p.id === value)?.seconds;
+}
+function parsePausedParam(value) {
+  return value === "1";
+}
+function timeRangeFromSearch(search) {
+  let params;
+  try {
+    params = new URLSearchParams(search);
+  } catch {
+    return {};
+  }
+  const link = {};
+  const spanSeconds = parseRangeParam(params.get("range"));
+  if (spanSeconds !== void 0) link.spanSeconds = spanSeconds;
+  if (parsePausedParam(params.get("paused"))) link.paused = true;
+  return link;
+}
+function presetIdOf(spanSeconds) {
+  return TIME_RANGE_PRESETS.find((p) => p.seconds === spanSeconds)?.id;
+}
+function spanLabel(spanSeconds) {
+  if (spanSeconds % 86400 === 0) return `${spanSeconds / 86400}d`;
+  if (spanSeconds % 3600 === 0) return `${spanSeconds / 3600}h`;
+  if (spanSeconds % 60 === 0) return `${spanSeconds / 60}m`;
+  return `${spanSeconds}s`;
+}
+function setBoardTimeRange(def, defaultSeconds) {
+  const { timeRange: _previous, ...rest } = def;
+  if (!isValidSpanSeconds(defaultSeconds) || defaultSeconds === DEFAULT_TIME_RANGE_SECONDS) return rest;
+  return { ...rest, timeRange: { defaultSeconds } };
+}
 
 // src/widget-compat.ts
 var BUILTIN_TYPES = new Set(WIDGET_TYPES);
@@ -72,9 +608,6 @@ function isResolvedWidget(widget) {
   return widget.type !== UNKNOWN_WIDGET_TYPE;
 }
 var SEMVER = /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)$/;
-function isRecord(v) {
-  return typeof v === "object" && v !== null && !Array.isArray(v);
-}
 function parseWidgetRef(raw) {
   if (raw === void 0) return void 0;
   if (!isRecord(raw)) return null;
@@ -142,43 +675,95 @@ function unresolvedWidgets(definition) {
 }
 
 // src/definition.ts
-var BASE_BREAKPOINT = "base";
 var WIDGET_TYPE_SET = new Set(WIDGET_TYPES);
-var DEFAULT_GRID = { columns: 24, gap: 8, rowHeight: 40 };
 var DEFAULT_SIZING = "fill";
 var DashboardDefinitionError = class extends Error {
-  constructor(message) {
+  constructor(message, code, found) {
     super(`invalid dashboard definition: ${message}`);
+    this.code = code;
+    this.found = found;
     this.name = "DashboardDefinitionError";
   }
 };
-function isRecord2(v) {
-  return typeof v === "object" && v !== null && !Array.isArray(v);
-}
 function numberAt(rec, key, fallback) {
   const v = rec[key];
   return typeof v === "number" && Number.isFinite(v) ? v : fallback;
 }
-function parseDashboardDefinition(raw, options = {}) {
-  if (!isRecord2(raw)) throw new DashboardDefinitionError("not a JSON object");
+function parseDashboardDefinition(input, options = {}) {
+  if (!isRecord(input)) throw new DashboardDefinitionError("not a JSON object");
+  const stored = storedSchemaVersion(input);
+  if (stored > CURRENT_SCHEMA_VERSION) {
+    throw new DashboardDefinitionError(`schemaVersion ${stored} is too new`, "schemaTooNew", stored);
+  }
+  if (!Array.isArray(input.widgets)) throw new DashboardDefinitionError("widgets must be an array");
+  const legacy = stored < CURRENT_SCHEMA_VERSION;
+  const gridConverted = stored < GRID_SCHEMA_VERSION;
+  let raw = input;
+  if (gridConverted) raw = convertLegacyDefinition(raw);
+  let flaggedWindows = [];
+  if (legacy) {
+    const converted = convertSampleWindows(raw);
+    raw = converted.doc;
+    flaggedWindows = converted.flagged;
+  }
   const widgetsRaw = raw.widgets;
-  if (!Array.isArray(widgetsRaw)) throw new DashboardDefinitionError("widgets must be an array");
   const def = {
-    schemaVersion: numberAt(raw, "schemaVersion", 1),
+    // The format this release writes (a newer one was refused above): a save writes that format.
+    schemaVersion: CURRENT_SCHEMA_VERSION,
     title: typeof raw.title === "string" ? raw.title : "",
     canvas: parseCanvas(raw.canvas),
     widgets: widgetsRaw.map((w, i) => parseWidget(w, i, options.catalog))
   };
   const slots = parseSlots(raw.slots);
   if (slots) def.slots = slots;
+  const timeRange = parseBoardTimeRange(raw.timeRange);
+  if (timeRange) def.timeRange = timeRange;
+  validatePlacements(def);
+  const flaggedIds = flaggedWindows.map((i) => def.widgets[i]?.id).filter((id) => id !== void 0);
+  if (gridConverted && def.widgets.length > 0 || flaggedIds.length > 0) def.convertedFrom = stored;
+  else if (typeof raw.convertedFrom === "number") def.convertedFrom = raw.convertedFrom;
+  if (flaggedIds.length > 0) def.convertedWindows = flaggedIds;
+  else if (Array.isArray(raw.convertedWindows) && raw.convertedWindows.every((id) => typeof id === "string")) {
+    def.convertedWindows = raw.convertedWindows;
+  }
   return def;
 }
+function validatePlacements(def) {
+  for (const bp of layoutBreakpoints(def.canvas.breakpoints, def.widgets)) {
+    const at = bp === BASE_BREAKPOINT ? "" : ` at breakpoint '${bp}'`;
+    const placements = /* @__PURE__ */ new Map();
+    for (const w of def.widgets) placements.set(w.id, resolvePlacement(w.layout, bp));
+    const grid = [...placements].filter((e) => e[1].mode === "grid");
+    for (let i = 0; i < grid.length; i++) {
+      for (let j = i + 1; j < grid.length; j++) {
+        if (gridFootprintsOverlap(grid[i][1], grid[j][1])) {
+          throw new DashboardDefinitionError(
+            `widgets '${grid[i][0]}' and '${grid[j][0]}' overlap on the grid${at}; a widget that is meant to sit over another is placed relative to it`
+          );
+        }
+      }
+    }
+    for (const [id, p] of placements) {
+      if (p.mode !== "relative") continue;
+      if (p.host === id) throw new DashboardDefinitionError(`widget '${id}' is placed relative to itself${at}`);
+      const host = placements.get(p.host);
+      if (!host) {
+        throw new DashboardDefinitionError(`widget '${id}' is placed relative to '${p.host}', which does not exist${at}`);
+      }
+      if (host.mode === "relative" && placements.get(host.host)?.mode !== "grid") {
+        throw new DashboardDefinitionError(
+          `widget '${id}' is placed relative to '${p.host}', which is relative to another relative widget${at}; a relative widget's host may be relative only when that host sits on a grid widget`
+        );
+      }
+    }
+  }
+}
 function parseSlots(raw) {
-  if (!isRecord2(raw)) return void 0;
+  if (!isRecord(raw)) return void 0;
   const slots = {};
   for (const [name, spec] of Object.entries(raw)) {
     if (name === "__proto__") continue;
-    if (!isRecord2(spec)) continue;
+    if (!isRecord(spec)) continue;
     const type = spec.type === "anchor" ? "anchor" : "device";
     const slot = { type };
     if (typeof spec.label === "string") slot.label = spec.label;
@@ -193,7 +778,7 @@ function parseSlots(raw) {
   return slots;
 }
 function parseScope(raw) {
-  if (!isRecord2(raw)) return void 0;
+  if (!isRecord(raw)) return void 0;
   const parent = typeof raw.parent === "string" ? raw.parent : "";
   if (!parent) return void 0;
   return { parent, strategy: raw.strategy === "manual" ? "manual" : "first" };
@@ -237,13 +822,13 @@ function canScopeSlot(slots, child, parentName) {
   return true;
 }
 function parseSlotBinding(raw) {
-  if (!isRecord2(raw)) return void 0;
+  if (!isRecord(raw)) return void 0;
   if (raw.kind === "device") {
     const token = stringAt(raw, "deviceToken");
     return token ? { kind: "device", deviceToken: token } : void 0;
   }
   if (raw.kind === "anchor") {
-    const anchorRec = isRecord2(raw.anchor) ? raw.anchor : {};
+    const anchorRec = isRecord(raw.anchor) ? raw.anchor : {};
     const targetToken = stringAt(anchorRec, "targetToken");
     if (!targetToken) return void 0;
     return {
@@ -257,23 +842,86 @@ function parseSlotBinding(raw) {
   }
   return void 0;
 }
+function parseGridLength(raw, fallback, where) {
+  if (raw === void 0) return fallback;
+  if (typeof raw === "number" && Number.isFinite(raw)) return Math.max(0, raw);
+  if (isSpaceToken(raw)) return raw;
+  throw new DashboardDefinitionError(`${where} is ${JSON.stringify(raw)}; a length is a number of px or a space-0..space-4 token`);
+}
 function parseGrid(raw) {
-  const rec = isRecord2(raw) ? raw : {};
+  const rec = isRecord(raw) ? raw : {};
   const columns = Math.max(1, Math.round(numberAt(rec, "columns", DEFAULT_GRID.columns)));
-  const rowHeight = Math.max(1, numberAt(rec, "rowHeight", DEFAULT_GRID.rowHeight));
-  let gap = DEFAULT_GRID.gap;
-  if (typeof rec.gap === "number" && Number.isFinite(rec.gap)) {
-    gap = Math.max(0, rec.gap);
-  } else if (isRecord2(rec.gap)) {
-    gap = {
-      row: Math.max(0, numberAt(rec.gap, "row", DEFAULT_GRID.gap)),
-      col: Math.max(0, numberAt(rec.gap, "col", DEFAULT_GRID.gap))
-    };
+  const minCellSize = Math.max(1, numberAt(rec, "minCellSize", DEFAULT_GRID.minCellSize));
+  const dg = DEFAULT_GRID.gutter;
+  const gutter = isRecord(rec.gutter) ? {
+    x: parseGridLength(rec.gutter.x, dg, "canvas.grid.gutter.x"),
+    y: parseGridLength(rec.gutter.y, dg, "canvas.grid.gutter.y")
+  } : parseGridLength(rec.gutter, dg, "canvas.grid.gutter");
+  const dp = DEFAULT_GRID.padding;
+  const padding = isRecord(rec.padding) ? {
+    top: parseGridLength(rec.padding.top, dp, "canvas.grid.padding.top"),
+    right: parseGridLength(rec.padding.right, dp, "canvas.grid.padding.right"),
+    bottom: parseGridLength(rec.padding.bottom, dp, "canvas.grid.padding.bottom"),
+    left: parseGridLength(rec.padding.left, dp, "canvas.grid.padding.left")
+  } : parseGridLength(rec.padding, dp, "canvas.grid.padding");
+  return { columns, minCellSize, gutter, padding };
+}
+function parseBreakpoints(raw, grid) {
+  const rec = isRecord(raw) ? raw : {};
+  const breakpoints = {};
+  for (const [name, spec] of Object.entries(rec)) {
+    if (name === "__proto__") continue;
+    if (typeof spec === "number" && Number.isFinite(spec)) {
+      breakpoints[name] = spec;
+    } else if (isRecord(spec) && typeof spec.minWidth === "number" && Number.isFinite(spec.minWidth) && typeof spec.columns === "number" && Number.isInteger(spec.columns) && spec.columns >= 1) {
+      breakpoints[name] = { minWidth: spec.minWidth, columns: spec.columns };
+    }
+  }
+  const base = breakpoints[BASE_BREAKPOINT];
+  if (base === void 0) breakpoints[BASE_BREAKPOINT] = 0;
+  else if (typeof base === "object" && base.columns !== grid.columns) {
+    throw new DashboardDefinitionError(
+      `breakpoint '${BASE_BREAKPOINT}' declares ${base.columns} columns; the base layout is in canvas.grid.columns (${grid.columns})`
+    );
   }
-  return { columns, gap, rowHeight };
+  return breakpoints;
+}
+function oneOf(values, raw, where) {
+  if (raw === void 0) return void 0;
+  if (values.includes(raw)) return raw;
+  throw new DashboardDefinitionError(`${where} is ${JSON.stringify(raw)}; expected one of ${values.map((v) => JSON.stringify(v)).join(", ")}`);
+}
+function parseFrame(raw, where) {
+  if (raw === void 0) return void 0;
+  if (!isRecord(raw)) throw new DashboardDefinitionError(`${where} is not an object`);
+  const frame = {};
+  const variant = oneOf(FRAME_VARIANTS, raw.variant, `${where}.variant`);
+  if (variant) frame.variant = variant;
+  if (raw.border !== void 0) {
+    if (!isRecord(raw.border)) throw new DashboardDefinitionError(`${where}.border is not an object`);
+    const border = {};
+    const width = oneOf(FRAME_BORDER_WIDTHS, raw.border.width, `${where}.border.width`);
+    if (width !== void 0) border.width = width;
+    const radius = oneOf(FRAME_RADII, raw.border.radius, `${where}.border.radius`);
+    if (radius) border.radius = radius;
+    const color = oneOf(THEME_COLOR_TOKENS, raw.border.color, `${where}.border.color`);
+    if (color) border.color = color;
+    frame.border = border;
+  }
+  if (raw.padding !== void 0) {
+    if (!isSpaceToken(raw.padding)) {
+      throw new DashboardDefinitionError(`${where}.padding is ${JSON.stringify(raw.padding)}; expected a space-0..space-4 token`);
+    }
+    frame.padding = raw.padding;
+  }
+  const background = oneOf([...THEME_COLOR_TOKENS, "transparent"], raw.background, `${where}.background`);
+  if (background) frame.background = background;
+  const header = oneOf(FRAME_HEADERS, raw.header, `${where}.header`);
+  if (header) frame.header = header;
+  return frame;
 }
 function parseSizing(raw) {
-  if (isRecord2(raw)) {
+  if (isRecord(raw)) {
     if (typeof raw.width === "number" && Number.isFinite(raw.width)) {
       return { width: Math.max(1, raw.width) };
     }
@@ -283,18 +931,20 @@ function parseSizing(raw) {
   }
   return DEFAULT_SIZING;
 }
+function parseBoardTimeRange(raw) {
+  if (!isRecord(raw) || !isValidSpanSeconds(raw.defaultSeconds)) return void 0;
+  return { defaultSeconds: raw.defaultSeconds };
+}
 function parseCanvas(raw) {
-  const rec = isRecord2(raw) ? raw : {};
+  const rec = isRecord(raw) ? raw : {};
   const grid = parseGrid(rec.grid);
   const sizing = parseSizing(rec.sizing);
-  const bpRec = isRecord2(rec.breakpoints) ? rec.breakpoints : {};
-  const breakpoints = {};
-  for (const [name, width] of Object.entries(bpRec)) {
-    if (typeof width === "number" && Number.isFinite(width)) breakpoints[name] = width;
-  }
-  if (!(BASE_BREAKPOINT in breakpoints)) breakpoints[BASE_BREAKPOINT] = 0;
+  const breakpoints = parseBreakpoints(rec.breakpoints, grid);
   const canvas = { grid, sizing, breakpoints };
-  if (isRecord2(rec.background)) {
+  const frame = parseFrame(rec.frame, "canvas.frame");
+  if (frame) canvas.frame = frame;
+  if (isCanvasDensity(rec.density)) canvas.density = rec.density;
+  if (isRecord(rec.background)) {
     const { color, imageUrl } = rec.background;
     canvas.background = {
       color: typeof color === "string" ? color : null,
@@ -304,12 +954,12 @@ function parseCanvas(raw) {
   return canvas;
 }
 function parseWidget(raw, index, catalog) {
-  if (!isRecord2(raw)) throw new DashboardDefinitionError(`widgets[${index}] is not an object`);
+  if (!isRecord(raw)) throw new DashboardDefinitionError(`widgets[${index}] is not an object`);
   const type = raw.type;
   if (typeof type !== "string" || type.length === 0) {
     throw new DashboardDefinitionError(`widgets[${index}] has unknown type ${JSON.stringify(type)}`);
   }
-  if (type === UNKNOWN_WIDGET_TYPE && isRecord2(raw.raw)) return reparseUnknownWidget(raw, index, catalog);
+  if (type === UNKNOWN_WIDGET_TYPE && isRecord(raw.raw)) return reparseUnknownWidget(raw, index, catalog);
   const builtin = WIDGET_TYPE_SET.has(type);
   const reason = unresolvedReason(type, raw.widget, catalog, builtin) ?? (builtin ? void 0 : reservedFieldReason(type, raw));
   if (reason) return parseUnknownWidget(raw, index, reason);
@@ -328,11 +978,13 @@ function parseWidget(raw, index, catalog) {
   };
   const ds = parseDatasource(raw.datasource, index);
   if (ds) widget.datasource = ds;
-  if (isRecord2(raw.options)) widget.options = raw.options;
+  if (isRecord(raw.options)) widget.options = raw.options;
+  const frame = parseFrame(raw.frame, `widgets[${index}].frame`);
+  if (frame) widget.frame = frame;
   if (!builtin) return withStoredFields(raw, widget);
   return widget;
 }
-var OWNED_WIDGET_KEYS = /* @__PURE__ */ new Set(["id", "type", "widget", "layout", "datasource", "options"]);
+var OWNED_WIDGET_KEYS = /* @__PURE__ */ new Set(["id", "type", "widget", "layout", "datasource", "options", "frame"]);
 function withStoredFields(raw, parsed) {
   const owned = parsed;
   const out = {};
@@ -387,7 +1039,7 @@ function stringArrayAt(rec, key) {
   return Array.isArray(v) ? v.filter((m) => typeof m === "string") : [];
 }
 function parseLocationSelection(raw) {
-  if (!isRecord2(raw)) return void 0;
+  if (!isRecord(raw)) return void 0;
   return raw.series === "latest" ? { series: "latest" } : void 0;
 }
 function withLocation(selector, raw) {
@@ -395,7 +1047,7 @@ function withLocation(selector, raw) {
   return location ? { ...selector, location } : selector;
 }
 function parseDatasource(raw, index) {
-  if (!isRecord2(raw)) return void 0;
+  if (!isRecord(raw)) return void 0;
   const kind = raw.kind;
   if (typeof kind !== "string" || kind.length === 0) return void 0;
   if (kind === "unbound") {
@@ -410,7 +1062,7 @@ function parseDatasource(raw, index) {
     );
   }
   if (kind === "anchor") {
-    const anchorRec = isRecord2(raw.anchor) ? raw.anchor : {};
+    const anchorRec = isRecord(raw.anchor) ? raw.anchor : {};
     const selector = withLocation(
       {
         kind: "anchor",
@@ -425,7 +1077,7 @@ function parseDatasource(raw, index) {
       },
       raw
     );
-    if (isRecord2(raw.aggregation)) {
+    if (isRecord(raw.aggregation)) {
       selector.aggregation = raw.aggregation;
     }
     return selector;
@@ -439,36 +1091,88 @@ function parseDatasource(raw, index) {
   return raw;
 }
 function parseLayout(raw, index) {
-  if (!isRecord2(raw)) throw new DashboardDefinitionError(`widgets[${index}].layout is missing`);
+  if (!isRecord(raw)) throw new DashboardDefinitionError(`widgets[${index}].layout is missing`);
   const layout = {};
-  for (const [bp, box] of Object.entries(raw)) {
-    if (isRecord2(box)) layout[bp] = parseBox(box);
+  for (const [bp, placement] of Object.entries(raw)) {
+    if (bp === "__proto__") continue;
+    if (isRecord(placement)) layout[bp] = parsePlacement(placement, `widgets[${index}].layout.${bp}`);
   }
-  if (!(BASE_BREAKPOINT in layout)) {
-    throw new DashboardDefinitionError(`widgets[${index}].layout has no '${BASE_BREAKPOINT}' box`);
+  if (!Object.prototype.hasOwnProperty.call(layout, BASE_BREAKPOINT)) {
+    throw new DashboardDefinitionError(`widgets[${index}].layout has no '${BASE_BREAKPOINT}' placement`);
   }
   return layout;
 }
-function parseBox(rec) {
-  const box = {
-    col: Math.max(0, Math.round(numberAt(rec, "col", 0))),
-    colSpan: Math.max(1, Math.round(numberAt(rec, "colSpan", 1))),
-    row: Math.max(0, Math.round(numberAt(rec, "row", 0))),
-    rowSpan: Math.max(1, Math.round(numberAt(rec, "rowSpan", 1))),
-    // z rounds too: a fractional zIndex is invalid CSS and silently drops to auto,
-    // so keep it an integer like every other box field.
-    z: Math.round(numberAt(rec, "z", 0))
+function cellCount(rec, key, min, where) {
+  const v = rec[key];
+  if (typeof v !== "number" || !Number.isFinite(v)) {
+    throw new DashboardDefinitionError(`${where}.${key} is ${JSON.stringify(v)}; expected a number of cells`);
+  }
+  return Math.max(min, Math.round(v));
+}
+function parsePlacement(rec, where) {
+  const mode = rec.mode ?? "grid";
+  if (mode === "grid") {
+    return {
+      mode: "grid",
+      col: cellCount(rec, "col", 0, where),
+      row: cellCount(rec, "row", 0, where),
+      cols: cellCount(rec, "cols", 1, where),
+      rows: cellCount(rec, "rows", 1, where)
+    };
+  }
+  if (mode === "relative") return parseRelative(rec, where);
+  if (RESERVED_PLACEMENT_MODES.includes(mode)) {
+    throw new DashboardDefinitionError(`${where}.mode '${String(mode)}' is reserved and not supported by this release`);
+  }
+  throw new DashboardDefinitionError(`${where}.mode is ${JSON.stringify(mode)}; expected 'grid' or 'relative'`);
+}
+function parseAnchor(raw, where) {
+  if (PLACEMENT_ANCHORS.includes(raw)) return raw;
+  throw new DashboardDefinitionError(`${where} is ${JSON.stringify(raw)}; expected one of ${PLACEMENT_ANCHORS.join(", ")}`);
+}
+function parseRelative(rec, where) {
+  if (typeof rec.host !== "string" || rec.host.length === 0) {
+    throw new DashboardDefinitionError(`${where}.host is ${JSON.stringify(rec.host)}; a relative widget names the widget it is placed against`);
+  }
+  const placement = {
+    mode: "relative",
+    host: rec.host,
+    anchor: parseAnchor(rec.anchor, `${where}.anchor`),
+    size: { fill: "host" }
   };
-  if (isRecord2(rec.offset)) {
-    box.offset = { x: numberAt(rec.offset, "x", 0), y: numberAt(rec.offset, "y", 0) };
+  if (rec.self !== void 0) placement.self = parseAnchor(rec.self, `${where}.self`);
+  if (rec.offset !== void 0) {
+    const o = rec.offset;
+    if (!isRecord(o) || !isFiniteNumber(o.x) || !isFiniteNumber(o.y)) {
+      throw new DashboardDefinitionError(`${where}.offset is ${JSON.stringify(o)}; expected {x, y} in cells`);
+    }
+    placement.offset = { x: o.x, y: o.y };
   }
-  return box;
+  const size = rec.size;
+  if (isRecord(size) && size.fill === "host") {
+    placement.size = { fill: "host" };
+  } else if (isRecord(size)) {
+    placement.size = { cols: cellCount(size, "cols", 1, `${where}.size`), rows: cellCount(size, "rows", 1, `${where}.size`) };
+  } else {
+    throw new DashboardDefinitionError(`${where}.size is ${JSON.stringify(size)}; expected {cols, rows} or {fill: 'host'}`);
+  }
+  if (rec.layer !== void 0) {
+    if (!isFiniteNumber(rec.layer) || !Number.isInteger(rec.layer)) {
+      throw new DashboardDefinitionError(`${where}.layer is ${JSON.stringify(rec.layer)}; expected a whole number`);
+    }
+    placement.layer = rec.layer;
+  }
+  return placement;
+}
+function isFiniteNumber(v) {
+  return typeof v === "number" && Number.isFinite(v);
 }
 function storedDefinition(def) {
-  if (!def.widgets.some((w) => w.type === UNKNOWN_WIDGET_TYPE)) return def;
+  const unmarked = withoutConversionMark(def);
+  if (!unmarked.widgets.some((w) => w.type === UNKNOWN_WIDGET_TYPE)) return unmarked;
   return {
-    ...def,
-    widgets: def.widgets.map((w) => w.type === UNKNOWN_WIDGET_TYPE ? storedUnknownWidget(w) : w)
+    ...unmarked,
+    widgets: unmarked.widgets.map((w) => w.type === UNKNOWN_WIDGET_TYPE ? storedUnknownWidget(w) : w)
   };
 }
 function storedUnknownWidget(w) {
@@ -480,11 +1184,11 @@ function storedUnknownWidget(w) {
   return out;
 }
 function storedUnknownLayout(layout, rawLayout) {
-  const stored = isRecord2(rawLayout) ? rawLayout : {};
+  const stored = isRecord(rawLayout) ? rawLayout : {};
   const out = {};
-  let changed = !isRecord2(rawLayout);
+  let changed = !isRecord(rawLayout);
   for (const [bp, box] of Object.entries(stored)) {
-    if (!isRecord2(box)) {
+    if (!isRecord(box)) {
       out[bp] = box;
       continue;
     }
@@ -493,48 +1197,52 @@ function storedUnknownLayout(layout, rawLayout) {
       changed = true;
       continue;
     }
-    if (sameBox(parseBox(box), current)) {
+    if (samePlacement(parsePlacement(box, bp), current)) {
       out[bp] = box;
     } else {
-      out[bp] = movedBox(box, current);
+      out[bp] = movedPlacement(box, current);
       changed = true;
     }
   }
   for (const [bp, box] of Object.entries(layout)) {
-    if (Object.prototype.hasOwnProperty.call(stored, bp) && isRecord2(stored[bp])) continue;
+    if (Object.prototype.hasOwnProperty.call(stored, bp) && isRecord(stored[bp])) continue;
     out[bp] = box;
     changed = true;
   }
   return changed ? out : rawLayout;
 }
-function movedBox(stored, current) {
-  const out = { ...stored, ...current };
-  if (current.offset === void 0) delete out.offset;
+var PLACEMENT_KEYS = /* @__PURE__ */ new Set([
+  "mode",
+  "col",
+  "row",
+  "cols",
+  "rows",
+  "host",
+  "anchor",
+  "self",
+  "offset",
+  "size",
+  "layer"
+]);
+function movedPlacement(stored, current) {
+  const out = { ...current };
+  for (const [k, v] of Object.entries(stored)) if (!PLACEMENT_KEYS.has(k)) out[k] = v;
   return out;
 }
-function sameBox(a, b) {
-  return a.col === b.col && a.colSpan === b.colSpan && a.row === b.row && a.rowSpan === b.rowSpan && a.z === b.z && a.offset?.x === b.offset?.x && a.offset?.y === b.offset?.y;
+function samePlacement(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
 }
 function serializeDefinition(def) {
   return JSON.stringify(storedDefinition(def));
 }
+function withoutConversionMark(def) {
+  if (def.convertedFrom === void 0 && def.convertedWindows === void 0) return def;
+  const { convertedFrom: _mark, convertedWindows: _windows, ...rest } = def;
+  return rest;
+}
 function isDirty(a, b) {
   return serializeDefinition(a) !== serializeDefinition(b);
 }
-function resolveWidgetBox(layout, breakpoint) {
-  return layout[breakpoint] ?? layout[BASE_BREAKPOINT];
-}
-function activeBreakpoint(breakpoints, viewportWidth) {
-  let best = BASE_BREAKPOINT;
-  let bestWidth = -1;
-  for (const [name, minWidth] of Object.entries(breakpoints)) {
-    if (viewportWidth >= minWidth && minWidth > bestWidth) {
-      best = name;
-      bestWidth = minWidth;
-    }
-  }
-  return best;
-}
 var idCounter = 0;
 function generateWidgetId() {
   const c = globalThis.crypto;
@@ -901,6 +1609,9 @@ var DEVICES_FOR_ANCHOR = `
           token
         }
       }
+      pagination {
+        totalRecords
+      }
     }
   }
 `;
@@ -911,6 +1622,14 @@ var DEVICES_BY_TOKEN = `
     }
   }
 `;
+var DEVICE_NAMES = `
+  query DashboardDeviceNames($tokens: [String!]!) {
+    devicesByToken(tokens: $tokens) {
+      token
+      name
+    }
+  }
+`;
 var LIST_DEVICES = `
   query DashboardListDevices($criteria: DeviceSearchCriteria!) {
     devices(criteria: $criteria) {
@@ -957,6 +1676,10 @@ var BUCKETED_MEASUREMENTS = `
       bucketStart
       name
       avg
+      min
+      max
+      sum
+      count
     }
   }
 `;
@@ -993,6 +1716,104 @@ function fetchKind(kind, criteria) {
   }
 }
 
+// src/same-label.ts
+function sameLabel(a, b) {
+  if (!a || !b) return false;
+  const x = a.trim().toLowerCase();
+  return x !== "" && x === b.trim().toLowerCase();
+}
+
+// src/connection.ts
+var OFFLINE_AFTER_MS = 2e4;
+var STABLE_AFTER_MS = 1e4;
+var ConnectionTracker = class {
+  constructor(offlineAfterMs = OFFLINE_AFTER_MS, stableAfterMs = STABLE_AFTER_MS) {
+    this.offlineAfterMs = offlineAfterMs;
+    this.stableAfterMs = stableAfterMs;
+    this.down = /* @__PURE__ */ new Set();
+    this.listeners = /* @__PURE__ */ new Set();
+    this.escalated = false;
+    this.browserOffline = false;
+    this.current = "live";
+  }
+  get state() {
+    return this.current;
+  }
+  register() {
+    const handle = {
+      connected: () => {
+        this.down.delete(handle);
+        this.settle();
+      },
+      closed: () => {
+        this.down.add(handle);
+        this.settle();
+      },
+      release: () => {
+        this.down.delete(handle);
+        this.settle();
+      }
+    };
+    return handle;
+  }
+  // Listeners are what keep the browser online/offline hooks attached, so a hub nobody is
+  // watching holds no window listeners. Returns the unsubscribe.
+  subscribe(listener) {
+    this.listeners.add(listener);
+    if (this.listeners.size === 1) this.attach();
+    return () => {
+      this.listeners.delete(listener);
+      if (this.listeners.size === 0) this.release();
+    };
+  }
+  attach() {
+    if (typeof window === "undefined") return;
+    const sync = () => {
+      this.browserOffline = typeof navigator !== "undefined" && navigator.onLine === false;
+      this.settle();
+    };
+    window.addEventListener("offline", sync);
+    window.addEventListener("online", sync);
+    this.detach = () => {
+      window.removeEventListener("offline", sync);
+      window.removeEventListener("online", sync);
+    };
+    sync();
+  }
+  release() {
+    this.detach?.();
+    this.detach = void 0;
+    this.browserOffline = false;
+    this.settle();
+  }
+  settle() {
+    if (this.down.size === 0) {
+      if ((this.escalate || this.escalated) && !this.recover) {
+        this.recover = setTimeout(() => {
+          this.recover = void 0;
+          if (this.escalate) clearTimeout(this.escalate);
+          this.escalate = void 0;
+          this.escalated = false;
+        }, this.stableAfterMs);
+      }
+    } else {
+      if (this.recover) clearTimeout(this.recover);
+      this.recover = void 0;
+    }
+    if (this.down.size > 0 && !this.escalate && !this.escalated) {
+      this.escalate = setTimeout(() => {
+        this.escalate = void 0;
+        this.escalated = true;
+        this.settle();
+      }, this.offlineAfterMs);
+    }
+    const next = this.browserOffline ? "offline" : this.down.size === 0 ? "live" : this.escalated ? "offline" : "reconnecting";
+    if (next === this.current) return;
+    this.current = next;
+    for (const listener of [...this.listeners]) listener();
+  }
+};
+
 // src/hub.ts
 import { gql as gql2, isForbiddenError, subscribe } from "@devicechain/client";
 
@@ -1109,6 +1930,34 @@ var LATEST_LOCATIONS_QUERY = `
   }
 `;
 
+// src/members.ts
+var MEMBER_SEED_CONCURRENCY = 6;
+var SEED_CANCELLED = /* @__PURE__ */ Symbol("member seed cancelled");
+function createLimiter(max) {
+  let active = 0;
+  const queue = [];
+  const next = () => {
+    while (active < max && queue.length > 0) queue.shift()();
+  };
+  return function run(task, cancelled = () => false) {
+    return new Promise((resolve, reject) => {
+      const start = () => {
+        if (cancelled()) {
+          reject(SEED_CANCELLED);
+          return;
+        }
+        active += 1;
+        task().then(resolve, reject).finally(() => {
+          active -= 1;
+          next();
+        });
+      };
+      queue.push(start);
+      next();
+    });
+  };
+}
+
 // src/internal/measurement-doc.ts
 var MEASUREMENT_STREAM = `
   subscription MeasurementStream($deviceToken: String, $name: String) {
@@ -1161,9 +2010,32 @@ var DashboardHub = class {
     // commandDisposers — the location channel holds a poll per subscription, not a shared
     // device stream), so disposeAll() can tear down every map widget's poll.
     this.locationDisposers = /* @__PURE__ */ new Set();
+    // Which of this hub's sockets are down, folded into one state a header can show.
+    this.connection = new ConnectionTracker();
+    // Streams evicted by an upstream error that still have subscribers: out of `streams`, but
+    // still holding their connection handle (see ensureStream), so disposeAll() can reach them.
+    this.deadStreams = /* @__PURE__ */ new Set();
+    // The hub-wide cap on in-flight member seed reads, and the reads currently in flight (so a second
+    // widget asking the same question of the same device shares one request).
+    this.seedLimiter = createLimiter(MEMBER_SEED_CONCURRENCY);
+    this.seedReads = /* @__PURE__ */ new Map();
+    // bucketMeasurements reads the buckets of every (device, measurement) pair over a window. Widgets
+    // that ask the same question while a read is in flight share it: stat cards on one measurement
+    // and span read on the same minute boundaries, so a board of them costs one read per question.
+    this.bucketReads = /* @__PURE__ */ new Map();
     this.resolver = config.resolver;
     this.authorities = new Set(config.authorities ?? []);
   }
+  // The hub's live-connection state: `live`, `reconnecting` (a socket dropped and is being
+  // retried) or `offline` (down past the point a retry is a blip, or the browser is offline).
+  // A hub with nothing subscribed has nothing to lose and reads `live`. Pair with
+  // onConnectionState (a subscribe/getSnapshot pair, so it drops into useSyncExternalStore).
+  get connectionState() {
+    return this.connection.state;
+  }
+  onConnectionState(listener) {
+    return this.connection.subscribe(listener);
+  }
   // subscribeWidget binds a widget's datasource to a sink and returns a disposer.
   // Selector resolution is async (anchor→devices); the disposer is returned
   // synchronously and cancels a still-pending resolution, so tearing a widget down
@@ -1185,6 +2057,99 @@ var DashboardHub = class {
     });
     return dispose;
   }
+  // subscribeMembers: the roster, then the live samples of every member. Resolution is async, so
+  // the disposer is returned at once and cancels a still-pending resolution (a widget torn down
+  // before its roster arrives never attaches a leaked subscriber). Each member rides the same
+  // ref-counted device stream every other widget on it uses.
+  subscribeMembers(datasource, sink) {
+    let disposed = false;
+    const detachers = [];
+    this.resolveRoster(datasource).then(({ roster, names }) => {
+      if (disposed) return;
+      sink.roster(roster);
+      for (const member of roster.members) {
+        detachers.push(
+          this.attach(member.token, names, { next: (sample) => sink.next(sample), error: (err) => sink.error?.(err) })
+        );
+      }
+    }).catch((err) => {
+      if (disposed) return;
+      if (isForbiddenError(err)) sink.forbidden?.();
+      else sink.error?.(err);
+    });
+    return () => {
+      disposed = true;
+      for (const detach of detachers.splice(0)) detach();
+    };
+  }
+  // One resolution of a selector into a roster. An anchor goes through the resolver's member read
+  // when it has one (names and the true size); everything else is the tokens resolveDevices yields.
+  async resolveRoster(datasource) {
+    const names = new Set(datasource.measurements);
+    if (datasource.kind === "anchor" && this.resolver.anchorMembers) {
+      const { members: members2, total } = await this.resolver.anchorMembers(datasource.anchor);
+      return { roster: { members: members2, total, unbound: false }, names };
+    }
+    const groups = await this.resolveDevices(datasource);
+    const members = groups.map((g) => ({ token: g.deviceToken, name: null }));
+    return { roster: { members, total: members.length, unbound: datasource.kind === "unbound" }, names };
+  }
+  async readMemberSeeds(deviceTokens, plan, onSeed, cancelled = () => false) {
+    await Promise.all(
+      deviceTokens.map(async (token) => {
+        let seed;
+        try {
+          seed = await plan.seed(token, (criteria) => this.memberBuckets(token, criteria, cancelled));
+        } catch (err) {
+          if (cancelled() || err === SEED_CANCELLED) return;
+          onSeed(token, null, isForbiddenError(err) ? "forbidden" : "failed");
+          return;
+        }
+        if (!cancelled()) onSeed(token, seed);
+      })
+    );
+  }
+  async memberBuckets(token, criteria, cancelled) {
+    const key = JSON.stringify([token, criteria]);
+    for (; ; ) {
+      let read = this.seedReads.get(key);
+      if (!read) {
+        read = this.seedLimiter(
+          () => gql2(EVENT_AREA, BUCKETED_MEASUREMENTS, { criteria: { deviceToken: token, ...criteria } }).then((r) => r.bucketedMeasurements),
+          cancelled
+        );
+        this.seedReads.set(key, read);
+        const forget = () => this.seedReads.delete(key);
+        read.then(forget, forget);
+      }
+      try {
+        return await read;
+      } catch (err) {
+        if (err === SEED_CANCELLED && !cancelled()) continue;
+        throw err;
+      }
+    }
+  }
+  bucketMeasurements(datasource, window2) {
+    const key = JSON.stringify([datasource, window2]);
+    let read = this.bucketReads.get(key);
+    if (!read) {
+      read = this.readBuckets(datasource, window2);
+      this.bucketReads.set(key, read);
+      const forget = () => this.bucketReads.delete(key);
+      read.then(forget, forget);
+    }
+    return read;
+  }
+  async readBuckets(datasource, window2) {
+    const groups = await this.resolveDevices(datasource);
+    const reads = groups.flatMap(
+      (g) => (g.names.size ? [...g.names] : [void 0]).map(
+        (name) => gql2(EVENT_AREA, BUCKETED_MEASUREMENTS, { criteria: { deviceToken: g.deviceToken, name, ...window2 } })
+      )
+    );
+    return (await Promise.all(reads)).flatMap((r) => r.bucketedMeasurements);
+  }
   // subscribeAlarms binds an alarm widget's scope+filters to a sink and returns a
   // disposer. Unlike the measurement channel it is NOT multiplexed — alarm widgets are
   // few, and each carries its own filter — so every subscription opens its own trigger
@@ -1227,13 +2192,20 @@ var DashboardHub = class {
         if (debounce) clearTimeout(debounce);
         debounce = setTimeout(() => reconcile(scope.tokens, scope.tenantWide), ALARM_RECONCILE_DEBOUNCE_MS);
       };
+      const handle = this.connection.register();
       const adapter = {
         next: () => trigger(),
         connected: (wasRetry) => {
+          handle.connected();
           if (wasRetry) reconcile(scope.tokens, scope.tenantWide);
-        }
+        },
+        closed: () => handle.closed()
+      };
+      const closeSocket = subscribe(DEVICE_AREA, ALARM_STREAM, {}, adapter);
+      unsubscribe = () => {
+        handle.release();
+        closeSocket();
       };
-      unsubscribe = subscribe(DEVICE_AREA, ALARM_STREAM, {}, adapter);
       poll = setInterval(() => reconcile(scope.tokens, scope.tenantWide), ALARM_POLL_MS);
       reconciler = () => reconcile(scope.tokens, scope.tenantWide);
       this.alarmReconcilers.add(reconciler);
@@ -1483,6 +2455,8 @@ var DashboardHub = class {
   disposeAll() {
     for (const stream of this.streams.values()) stream.unsubscribe();
     this.streams.clear();
+    for (const stream of this.deadStreams) stream.unsubscribe();
+    this.deadStreams.clear();
     for (const dispose of [...this.alarmDisposers]) dispose();
     this.alarmDisposers.clear();
     for (const dispose of [...this.commandDisposers]) dispose();
@@ -1566,9 +2540,10 @@ var DashboardHub = class {
     stream.subscribers.add(subscriber);
     return () => {
       if (!stream.subscribers.delete(subscriber)) return;
-      if (stream.subscribers.size === 0 && this.streams.get(deviceToken) === stream) {
+      if (stream.subscribers.size === 0) {
         stream.unsubscribe();
-        this.streams.delete(deviceToken);
+        this.deadStreams.delete(stream);
+        if (this.streams.get(deviceToken) === stream) this.streams.delete(deviceToken);
       }
     };
   }
@@ -1578,16 +2553,63 @@ var DashboardHub = class {
     const stream = { subscribers: /* @__PURE__ */ new Set(), unsubscribe: () => {
     } };
     this.streams.set(deviceToken, stream);
+    const handle = this.connection.register();
+    let closeSocket;
+    let operationOpen = true;
+    let ended = 0;
+    let up = true;
+    let reopen;
+    const closeOperation = () => {
+      if (!operationOpen) return;
+      operationOpen = false;
+      clearTimeout(reopen);
+      closeSocket?.();
+    };
+    const open = () => {
+      closeSocket = subscribe(EVENT_AREA, MEASUREMENT_STREAM, variables, adapter);
+    };
     const adapter = {
-      next: (data) => this.fanout(deviceToken, data.measurementStream),
+      next: (data) => {
+        ended = 0;
+        this.fanout(deviceToken, data.measurementStream);
+      },
+      connected: () => {
+        up = true;
+        handle.connected();
+      },
+      closed: () => {
+        up = false;
+        handle.closed();
+      },
+      // 🔴 The server ended this operation on a socket that is still up: its live source
+      // closed, or could not be opened (a resolver error reaches the client as an error-only
+      // `next`, which carries no data, and then this). Left alone, the stream would sit here
+      // receiving nothing while the board read `live` -- a widget frozen until someone reloads,
+      // one stream at a time. Open it again, after a doubling wait capped at 30 s, for as long
+      // as anything shows it. Two other completes are not the server's and are never re-opened:
+      // a widget's own unsubscribe (closeOperation has marked it), and the client being disposed
+      // on sign-out, which closes the socket first (re-opening would bring back the socket the
+      // sign-out exists to drop).
+      complete: () => {
+        if (!operationOpen || !up) return;
+        closeSocket?.();
+        reopen = setTimeout(open, Math.min(1e3 * 2 ** ended++, 3e4));
+      },
       error: (err) => {
         if (this.streams.get(deviceToken) === stream) this.streams.delete(deviceToken);
-        stream.unsubscribe();
+        closeOperation();
+        if (stream.subscribers.size > 0) this.deadStreams.add(stream);
+        else handle.release();
         for (const subscriber of stream.subscribers) subscriber.sink.error?.(err);
       }
     };
     const variables = { deviceToken, name: null };
-    stream.unsubscribe = subscribe(EVENT_AREA, MEASUREMENT_STREAM, variables, adapter);
+    open();
+    if (!operationOpen) closeSocket?.();
+    stream.unsubscribe = () => {
+      handle.release();
+      closeOperation();
+    };
     return stream;
   }
   fanout(deviceToken, sample) {
@@ -1602,11 +2624,7 @@ var DashboardHub = class {
 };
 
 // src/synthetic.ts
-var SYNTHETIC_GENERATORS = [
-  { value: "sine", label: "Sine wave" },
-  { value: "ramp", label: "Ramp" },
-  { value: "random-walk", label: "Random walk" }
-];
+var SYNTHETIC_GENERATORS = ["sine", "ramp", "random-walk"];
 var DEFAULT_NAME = "value";
 var SYNTHETIC_ALARMS = [
   { severity: "CRITICAL", state: "ACTIVE", acknowledged: false, alarmKey: "over-temperature", metricKey: "temperature", lastValue: 87.4, originatorToken: "thermostat-01" },
@@ -1825,8 +2843,71 @@ var SyntheticDataSource = class {
   }
   async clearAlarm() {
   }
-  async sendCommand() {
-    return { status: "sent", token: "syn-dispatch" };
+  async sendCommand() {
+    return { status: "sent", token: "syn-dispatch" };
+  }
+  // bucketMeasurements answers with ONE bucket per measurement spanning the window, folded from a
+  // synthetic reading per interval, so a preview stat reads something the waveform actually did
+  // (a minimum and maximum inside [min, max]).
+  async bucketMeasurements(datasource, window2) {
+    const names = datasource.measurements.length > 0 ? datasource.measurements : [DEFAULT_NAME];
+    const from = Date.parse(window2.startTime);
+    const to = Date.parse(window2.endTime);
+    return names.map((name) => {
+      const walk = /* @__PURE__ */ new Map();
+      const values = Array.from({ length: 120 }, (_, i) => this.valueFor(name, from + (to - from) * i / 119, walk));
+      const sum = values.reduce((a, v) => a + v, 0);
+      return {
+        bucketStart: window2.startTime,
+        name,
+        avg: sum / values.length,
+        min: Math.min(...values),
+        max: Math.max(...values),
+        sum,
+        count: values.length
+      };
+    });
+  }
+  // A preview fleet: a handful of fabricated devices, each out of phase with the others (the
+  // series is keyed by device and name together), and one that never reports its second
+  // measurement, so a table previews its "does not report this" cell. An unbound slot has no
+  // members, as in the live hub.
+  previewMembers(datasource) {
+    if (datasource.kind === "unbound") return [];
+    return Array.from({ length: 5 }, (_, i) => ({ token: `synthetic-${i + 1}`, name: `Unit ${i + 1}` }));
+  }
+  subscribeMembers(datasource, sink) {
+    const members = this.previewMembers(datasource);
+    const names = datasource.measurements.length > 0 ? datasource.measurements : [DEFAULT_NAME];
+    const walk = /* @__PURE__ */ new Map();
+    let seq = 0;
+    const emit = (token, tMs) => {
+      for (const name of token === "synthetic-4" ? names.slice(0, 1) : names) {
+        sink.next({
+          id: `syn-m-${seq++}`,
+          deviceToken: token,
+          eventType: 0,
+          occurredTime: new Date(tMs).toISOString(),
+          name,
+          value: this.valueFor(`${token}/${name}`, tMs, walk),
+          classifier: null
+        });
+      }
+    };
+    sink.roster({ members, total: members.length, unbound: datasource.kind === "unbound" });
+    for (const m of members) emit(m.token, Date.now());
+    const timer = setInterval(() => {
+      for (const m of members) emit(m.token, Date.now());
+    }, this.intervalMs);
+    this.timers.add(timer);
+    return () => {
+      if (this.timers.delete(timer)) clearInterval(timer);
+    };
+  }
+  // A preview has no history to read: its members report the moment they are subscribed, so the
+  // seed settles empty and the live feed alone fills the cells.
+  async readMemberSeeds(deviceTokens, _plan, onSeed) {
+    for (const token of deviceTokens) onSeed(token, { latest: {}, observed: [] });
   }
   // disposeAll stops every live stream (e.g. when preview is turned off). Individual
   // widget disposers already clear their own timer; this is the belt-and-braces
@@ -1907,7 +2988,7 @@ function bool(v, path) {
   if (typeof v !== "boolean") throw new RecordingFormatError(path, "expected a boolean");
   return v;
 }
-function num(v, path) {
+function num2(v, path) {
   if (typeof v !== "number" || !Number.isFinite(v)) throw new RecordingFormatError(path, "expected a finite number");
   return v;
 }
@@ -1915,7 +2996,7 @@ function arr(v, path) {
   if (!Array.isArray(v)) throw new RecordingFormatError(path, "expected an array");
   return v;
 }
-function oneOf(v, path, allowed) {
+function oneOf2(v, path, allowed) {
   if (typeof v !== "string" || !allowed.includes(v)) {
     throw new RecordingFormatError(path, `expected one of ${allowed.join(", ")}`);
   }
@@ -1961,7 +3042,7 @@ function column(v, path, item, length) {
   return a.map((x, i) => item(x, `${path}[${i}]`));
 }
 function nonNegative(v, path) {
-  const n = num(v, path);
+  const n = num2(v, path);
   if (n < 0) throw new RecordingFormatError(path, "must not be negative");
   return n;
 }
@@ -2001,7 +3082,7 @@ function parseBoardRecording(input) {
       `unsupported version ${JSON.stringify(root.formatVersion)}; this reader understands ${RECORDING_FORMAT_VERSION}`
     );
   }
-  const durationMs = num(root.durationMs, "$.durationMs");
+  const durationMs = num2(root.durationMs, "$.durationMs");
   if (durationMs <= 0) throw new RecordingFormatError("$.durationMs", "must be positive");
   const b = strict(root.build, "$.build", ["gitSha", "sdkCommit"]);
   const build = {
@@ -2010,7 +3091,7 @@ function parseBoardRecording(input) {
   };
   const clock = column(root.clock, "$.clock", (x, p) => {
     const o = strict(x, p, ["fromMs", "mode", "scale"]);
-    const scale = num(o.scale, `${p}.scale`);
+    const scale = num2(o.scale, `${p}.scale`);
     if (scale <= 0) throw new RecordingFormatError(`${p}.scale`, "must be positive");
     return { fromMs: nonNegative(o.fromMs, `${p}.fromMs`), mode: str(o.mode, `${p}.mode`), scale };
   });
@@ -2055,7 +3136,7 @@ function parseBoardRecording(input) {
     sourceHashes[key] = matching(sh[key], `$.sourceHashes.${key}`, HEX64, "a lowercase hex SHA-256");
   }
   const cv = strict(root.converter, "$.converter", ["version"]);
-  const converter = { version: num(cv.version, "$.converter.version") };
+  const converter = { version: num2(cv.version, "$.converter.version") };
   let excerpt;
   if (root.excerpt !== void 0) {
     const e = strict(root.excerpt, "$.excerpt", ["fromMs", "toMs"]);
@@ -2068,7 +3149,7 @@ function parseBoardRecording(input) {
   const hi = excerpt ? excerpt.toMs : durationMs;
   const chapters = column(root.chapters, "$.chapters", (x, p) => {
     const o = strict(x, p, ["tMs", "name", "note"]);
-    const tMs = num(o.tMs, `${p}.tMs`);
+    const tMs = num2(o.tMs, `${p}.tMs`);
     if (tMs < 0 || tMs > durationMs) throw new RecordingFormatError(`${p}.tMs`, "is outside the run");
     if (excerpt && (tMs < lo || tMs > hi)) throw new RecordingFormatError(`${p}.tMs`, "is outside the excerpt window");
     return { tMs, name: str(o.name, `${p}.name`), note: str(o.note, `${p}.note`) };
@@ -2077,7 +3158,7 @@ function parseBoardRecording(input) {
     if (i > 0 && c.tMs < chapters[i - 1].tMs) throw new RecordingFormatError(`$.chapters[${i}].tMs`, "chapters must not decrease in time");
   });
   const m = strict(root.measurements, "$.measurements", ["d", "n", "t", "v", "s"]);
-  const t = column(m.t, "$.measurements.t", num);
+  const t = column(m.t, "$.measurements.t", num2);
   let prev = lo;
   t.forEach((x, i) => {
     if (x < lo || x > hi) throw new RecordingFormatError(`$.measurements.t[${i}]`, `${x} is outside [${lo}, ${hi}]`);
@@ -2085,7 +3166,7 @@ function parseBoardRecording(input) {
     prev = x;
   });
   const index = (name, limit) => (x, p) => {
-    const n = num(x, p);
+    const n = num2(x, p);
     if (!Number.isInteger(n) || n < 0 || n >= limit) throw new RecordingFormatError(p, `${name} index out of range`);
     return n;
   };
@@ -2093,7 +3174,7 @@ function parseBoardRecording(input) {
     d: column(m.d, "$.measurements.d", index("device", devices.length), t.length),
     n: column(m.n, "$.measurements.n", index("measurement", channels.measurements.length), t.length),
     t,
-    v: column(m.v, "$.measurements.v", num, t.length),
+    v: column(m.v, "$.measurements.v", num2, t.length),
     s: column(
       m.s,
       "$.measurements.s",
@@ -2115,8 +3196,8 @@ function parseBoardRecording(input) {
       dev,
       key: str(o.key, `${p}.key`),
       metric: str(o.metric, `${p}.metric`),
-      state: oneOf(o.state, `${p}.state`, ALARM_STATES),
-      sev: oneOf(o.sev, `${p}.sev`, ALARM_SEVERITIES),
+      state: oneOf2(o.state, `${p}.state`, ALARM_STATES),
+      sev: oneOf2(o.sev, `${p}.sev`, ALARM_SEVERITIES),
       occ: instant(o.occ, `${p}.occ`)
     };
     if (o.ack === true) out.ack = true;
@@ -2139,7 +3220,7 @@ function parseBoardRecording(input) {
     if (total !== alarms.length) {
       throw new RecordingFormatError(`${p}.total`, `is ${total} but ${alarms.length} alarms are listed (truncated snapshot)`);
     }
-    const tMs = checkTime(num(o.tMs, `${p}.tMs`), `${p}.tMs`);
+    const tMs = checkTime(num2(o.tMs, `${p}.tMs`), `${p}.tMs`);
     const requestedAtMs = nonNegative(o.requestedAtMs, `${p}.requestedAtMs`);
     if (!Number.isInteger(requestedAtMs)) throw new RecordingFormatError(`${p}.requestedAtMs`, "expected an integer");
     if (requestedAtMs > tMs) throw new RecordingFormatError(`${p}.requestedAtMs`, "a query cannot be sent after its answer");
@@ -2147,7 +3228,7 @@ function parseBoardRecording(input) {
   });
   const events = column(al.events, "$.alarms.events", (x, p) => {
     const o = strict(x, p, [...ALARM_KEYS, "tMs"], ["ack"]);
-    return { ...alarm(o, p), tMs: checkTime(num(o.tMs, `${p}.tMs`), `${p}.tMs`) };
+    return { ...alarm(o, p), tMs: checkTime(num2(o.tMs, `${p}.tMs`), `${p}.tMs`) };
   });
   for (const [name, list] of [["snapshots", snapshots], ["events", events]]) {
     list.forEach((e, i) => {
@@ -2442,6 +3523,11 @@ var RecordedDataSource = class {
   get isStale() {
     return this.stale;
   }
+  // The recorded instant the view is at: samples are dated by the run, so a time span is measured
+  // from here, not from the wall clock.
+  now() {
+    return this.startMs + this.cursor;
+  }
   onClock(ev) {
     if (this.stale) return;
     if (ev.reason === "seek") {
@@ -2571,6 +3657,62 @@ var RecordedDataSource = class {
       advance: flush
     });
   }
+  // ── fleets ────────────────────────────────────────────────────────────────
+  // A fleet widget's roster (the run's devices) and then the same back-filled, ticking rows
+  // subscribeWidget delivers, each carrying its device.
+  //
+  // 🔴 A member has NO NAME here, so the widget labels it by its token, exactly as the live board
+  // does. A recorded device's `id` is its external id (the scene's binding key, "SP-HL-0003"),
+  // not a device name: the live roster reads device NAMES, which the sim never sets, and every
+  // other surface of the board (a gauge's subject line, the machine selector, an alarm's
+  // originator) names a device by its token. Labelling the table's rows by external id made one
+  // machine "SP-HL-0003" in the table and "sp-hauler-03" in the alarm beside it.
+  subscribeMembers(datasource, sink) {
+    let members;
+    try {
+      members = this.resolve(datasource).map((g) => ({ token: g.deviceToken, name: null }));
+    } catch (err) {
+      return this.failLater(err, sink);
+    }
+    let stop;
+    const off = this.open({
+      start: () => {
+        sink.roster({ members, total: members.length, unbound: datasource.kind === "unbound" });
+        stop = this.subscribeWidget(datasource, sink);
+      },
+      advance: () => {
+      }
+    });
+    return () => {
+      off();
+      stop?.();
+    };
+  }
+  // Each device's seed comes from the recording itself, with no read to make: its newest reading per
+  // measurement inside the history window, and every measurement it reported in that window, which
+  // is how "does not report this" (a dozer's tyres) is told from "sent nothing".
+  async readMemberSeeds(deviceTokens, _plan, onSeed) {
+    const { t, v } = this.rec.measurements;
+    for (const token of deviceTokens) {
+      const seed = { latest: {}, observed: [] };
+      for (const s of this.index.byDevice.get(token) ?? []) {
+        const at = upperBound(s.times, this.cursor) - 1;
+        if (at < 0 || s.times[at] < this.cursor - RECORDED_HISTORY_WINDOW_MS) continue;
+        const row = s.rows[at];
+        seed.observed.push(s.name);
+        seed.latest[s.name] = {
+          id: `${token}|${s.name}|${row}`,
+          deviceToken: token,
+          eventType: 0,
+          occurredTime: this.iso(t[row]),
+          name: s.name,
+          value: v[row],
+          classifier: null
+        };
+      }
+      onSeed(token, seed);
+    }
+  }
   // ── alarms ────────────────────────────────────────────────────────────────
   subscribeAlarms(subscription, sink) {
     let scope = null;
@@ -2705,28 +3847,269 @@ function toAlarmRow(a) {
   };
 }
 
+// src/widget-descriptor.ts
+var BUILTIN_IDS = new Set(WIDGET_TYPES);
+function isBuiltinWidgetId(id) {
+  return typeof id === "string" && BUILTIN_IDS.has(id);
+}
+var NAMESPACED_ID = /^[a-z0-9][a-z0-9-]*\/[a-z0-9][a-z0-9-]*$/;
+function isNamespacedWidgetId(id) {
+  return typeof id === "string" && NAMESPACED_ID.test(id);
+}
+function pinnedAxes(mode) {
+  switch (mode) {
+    case "horizontal":
+      return ["rows"];
+    case "vertical":
+      return ["cols"];
+    case "none":
+      return ["cols", "rows"];
+    default:
+      return [];
+  }
+}
+var FALLBACK_DEFAULT_SPAN = Object.freeze({ cols: 4, rows: 2 });
+var SDK_API_VERSION = 1;
+function defineWidgetDescriptor(descriptor) {
+  return descriptor;
+}
+
+// src/layout-lint.ts
+var PUBLISH_BLOCKING_LAYOUT_CODES = [
+  "span-out-of-limits",
+  "overrun-columns",
+  "relative-off-canvas"
+];
+function blockingLayoutFindings(findings) {
+  return findings.filter((f) => PUBLISH_BLOCKING_LAYOUT_CODES.includes(f.code));
+}
+function spanLimitsOfLayout(layout) {
+  if (!layout) return void 0;
+  const min = { ...layout.minSpan };
+  const max = { ...layout.maxSpan };
+  for (const axis of pinnedAxes(layout.resize)) {
+    min[axis] = layout.defaultSpan[axis];
+    max[axis] = layout.defaultSpan[axis];
+  }
+  const limits = {};
+  if (Object.keys(min).length > 0) limits.minSpan = min;
+  if (Object.keys(max).length > 0) limits.maxSpan = max;
+  return limits;
+}
+var RELATIVE_PROBE_CELLS = (minCellSize) => [minCellSize, minCellSize * 16];
+var EDGE_EPSILON = 0.01;
+function lintLayout(def, options) {
+  const findings = [];
+  const columnsAt = (bp) => bp === BASE_BREAKPOINT || breakpointColumns(def.canvas, bp) === def.canvas.grid.columns ? options.columns : breakpointColumns(def.canvas, bp);
+  const breakpoints = layoutBreakpoints(def.canvas.breakpoints, def.widgets);
+  for (const widget of def.widgets) {
+    const limits = options.spanLimitsOf(widget);
+    if (!limits) {
+      findings.push({
+        code: "no-layout-declared",
+        severity: "info",
+        widgetId: widget.id,
+        message: `${widget.type} declares no span limits, so its size cannot be checked`
+      });
+    }
+    for (const [bp, placement] of Object.entries(widget.layout)) {
+      const where = bp === BASE_BREAKPOINT ? "" : ` at breakpoint ${bp}`;
+      const at = bp === BASE_BREAKPOINT ? {} : { breakpoint: bp };
+      const columns = columnsAt(bp);
+      if (placement.mode === "grid" && placement.col + placement.cols > columns) {
+        findings.push({
+          code: "overrun-columns",
+          severity: "error",
+          widgetId: widget.id,
+          ...at,
+          message: `spans columns ${placement.col}..${placement.col + placement.cols} of ${columns}${where}`
+        });
+      }
+      const span = spanOf(def, widget, bp, placement);
+      if (limits && span) {
+        const problem = spanProblem(span.cols, span.rows, limits);
+        if (problem) {
+          findings.push({
+            code: "span-out-of-limits",
+            severity: "error",
+            widgetId: widget.id,
+            ...at,
+            message: `${span.cols}x${span.rows} ${problem}${where}`
+          });
+        }
+      }
+    }
+    const duplicate = titleDuplicatesSubtitle(def, widget);
+    if (duplicate) {
+      findings.push({
+        code: "title-duplicates-subtitle",
+        severity: "warning",
+        widgetId: widget.id,
+        message: duplicate
+      });
+    }
+  }
+  const byId = new Map(def.widgets.map((w) => [w.id, w]));
+  const differsFromBase = (w, bp) => {
+    if (columnsAt(bp) !== options.columns) return true;
+    for (let cur = w, hops = 0; cur && hops < 3; hops++) {
+      if (Object.prototype.hasOwnProperty.call(cur.layout, bp)) return true;
+      const p = resolvePlacement(cur.layout, bp);
+      cur = p.mode === "relative" ? byId.get(p.host) : void 0;
+    }
+    return false;
+  };
+  for (const bp of breakpoints) {
+    const columns = columnsAt(bp);
+    const gutter = gutterPx(def.canvas.grid);
+    const off = /* @__PURE__ */ new Set();
+    for (const cell of RELATIVE_PROBE_CELLS(def.canvas.grid.minCellSize)) {
+      const width = spanPx(columns, cell, gutter.x);
+      for (const [id, r] of layoutRects(def.widgets, bp, cell, gutter)) {
+        const w = byId.get(id);
+        if (resolvePlacement(w.layout, bp).mode !== "relative" || off.has(id)) continue;
+        if (bp !== BASE_BREAKPOINT && !differsFromBase(w, bp)) continue;
+        if (r.x < -EDGE_EPSILON || r.y < -EDGE_EPSILON || r.x + r.w > width + EDGE_EPSILON) {
+          off.add(id);
+          const where = bp === BASE_BREAKPOINT ? "" : ` at breakpoint ${bp}`;
+          findings.push({
+            code: "relative-off-canvas",
+            severity: "error",
+            widgetId: id,
+            ...bp === BASE_BREAKPOINT ? {} : { breakpoint: bp },
+            message: `falls outside the ${columns}-column canvas${where} (left ${round(r.x)}, top ${round(r.y)}, right ${round(r.x + r.w)} of ${round(width)} px at ${round(cell)} px cells)`
+          });
+        }
+      }
+    }
+  }
+  return findings;
+}
+function round(n) {
+  return Math.round(n * 10) / 10;
+}
+function spanOf(def, widget, bp, p) {
+  if (p.mode === "grid") return { cols: p.cols, rows: p.rows };
+  if (!("fill" in p.size)) return p.size;
+  const host = def.widgets.find((w) => w.id === p.host);
+  if (!host || host === widget) return void 0;
+  return spanOf(def, host, bp, resolvePlacement(host.layout, bp));
+}
+function spanProblem(cols, rows, limits) {
+  const { minSpan = {}, maxSpan = {} } = limits;
+  const bound = (b) => b.cols === void 0 ? `${b.rows}-row` : b.rows === void 0 ? `${b.cols}-column` : `${b.cols}x${b.rows}`;
+  if (cols < (minSpan.cols ?? 1) || rows < (minSpan.rows ?? 1)) {
+    return `is below the ${bound(minSpan)} minimum`;
+  }
+  if (cols > (maxSpan.cols ?? Infinity) || rows > (maxSpan.rows ?? Infinity)) {
+    return `is above the ${bound(maxSpan)} maximum`;
+  }
+  return void 0;
+}
+function titleDuplicatesSubtitle(def, widget) {
+  const title = widget.options?.title;
+  if (typeof title !== "string" || title.trim() === "") return void 0;
+  const binding = widgetBinding(def, widget);
+  const subject = binding?.kind === "device" ? binding.deviceToken : binding?.anchor.targetToken;
+  if (!subject) return void 0;
+  const ds = widget.datasource;
+  const slotLabel = ds?.kind === "slot" ? def.slots?.[ds.slot]?.label : void 0;
+  const same = (a) => sameLabel(a, title);
+  if (same(subject)) return `the title and the subject line both read "${title.trim()}"`;
+  if (same(slotLabel)) {
+    return `the title "${title.trim()}" is the slot's name for "${subject}", which the subject line already shows`;
+  }
+  return void 0;
+}
+
 // src/editor-model.ts
-function baseBox(widget) {
+function basePlacement(widget) {
   return widget.layout[BASE_BREAKPOINT];
 }
-function setWidgetBox(def, id, box) {
-  return {
+function resolveCollisions(def, breakpoint, first, aside = false) {
+  const placed = [];
+  for (const w of def.widgets) {
+    const p = resolvePlacement(w.layout, breakpoint);
+    if (p.mode === "grid") placed.push({ id: w.id, placement: p });
+  }
+  const resolved = aside ? pushAside(placed, first) : pushDown(placed, first);
+  let changed = false;
+  const widgets = def.widgets.map((w) => {
+    const before = resolvePlacement(w.layout, breakpoint);
+    const after = resolved.get(w.id);
+    if (!after || after === before) return w;
+    changed = true;
+    return { ...w, layout: { ...w.layout, [breakpoint]: after } };
+  });
+  return changed ? { ...def, widgets } : def;
+}
+function resolveEverywhere(def, first, aside = false) {
+  let next = def;
+  for (const bp of layoutBreakpoints(def.canvas.breakpoints, def.widgets))
+    next = resolveCollisions(next, bp, first, aside && bp === BASE_BREAKPOINT);
+  return next;
+}
+function setWidgetPlacement(def, id, placement, options = {}) {
+  const next = {
     ...def,
-    widgets: def.widgets.map(
-      (w) => w.id === id ? { ...w, layout: { ...w.layout, [BASE_BREAKPOINT]: box } } : w
-    )
+    widgets: def.widgets.map((w) => w.id === id ? { ...w, layout: { ...w.layout, [BASE_BREAKPOINT]: placement } } : w)
   };
+  return placement.mode === "grid" ? resolveEverywhere(next, [id], options.nearest) : next;
+}
+function clampSpan(span, limits, room) {
+  const cols = Math.min(room, Math.max(limits?.minSpan?.cols ?? 1, Math.min(limits?.maxSpan?.cols ?? Infinity, span.cols)));
+  const rows = Math.max(limits?.minSpan?.rows ?? 1, Math.min(limits?.maxSpan?.rows ?? Infinity, span.rows));
+  return { cols: Math.max(1, Math.round(cols)), rows: Math.max(1, Math.round(rows)) };
+}
+function moveWidget(def, id, to, columns = def.canvas.grid.columns, options = {}) {
+  const w = def.widgets.find((x) => x.id === id);
+  if (!w) return def;
+  const p = basePlacement(w);
+  if (p.mode !== "grid") return def;
+  const col = Math.min(Math.max(0, Math.round(to.col)), Math.max(0, columns - p.cols));
+  const row = Math.max(0, Math.round(to.row));
+  if (col === p.col && row === p.row) return def;
+  return setWidgetPlacement(def, id, { ...p, col, row }, options);
+}
+function resizeWidget(def, id, target, limits, edges = {}, columns = def.canvas.grid.columns, options = {}) {
+  const w = def.widgets.find((x) => x.id === id);
+  if (!w) return def;
+  const p = basePlacement(w);
+  if (p.mode !== "grid") return def;
+  const right = target.col + target.cols;
+  const bottom = target.row + target.rows;
+  const room = edges.fromLeft ? Math.max(1, right) : Math.max(1, columns - Math.max(0, target.col));
+  const { cols, rows } = clampSpan(target, limits, Math.min(columns, room));
+  const col = edges.fromLeft ? Math.max(0, right - cols) : Math.max(0, target.col);
+  const row = edges.fromTop ? Math.max(0, bottom - rows) : Math.max(0, target.row);
+  if (col === p.col && row === p.row && cols === p.cols && rows === p.rows) return def;
+  return setWidgetPlacement(def, id, { mode: "grid", col, row, cols, rows }, options);
 }
 function deleteWidget(def, id) {
-  return { ...def, widgets: def.widgets.filter((w) => w.id !== id) };
+  const gone = def.widgets.find((w) => w.id === id);
+  let next = { ...def, widgets: def.widgets.filter((w) => w.id !== id) };
+  if (!gone) return next;
+  for (const bp of layoutBreakpoints(def.canvas.breakpoints, def.widgets)) {
+    const hostPlacement = resolvePlacement(gone.layout, bp);
+    const columns = breakpointColumns(def.canvas, bp);
+    for (const w of next.widgets) {
+      const p = resolvePlacement(w.layout, bp);
+      if (p.mode !== "relative" || p.host !== id) continue;
+      const size = "fill" in p.size ? hostSpan(hostPlacement, next, bp) : p.size;
+      const occupied = next.widgets.map((o) => resolvePlacement(o.layout, bp)).filter((o) => o.mode === "grid");
+      const cols = Math.min(size.cols, columns);
+      const slot = firstFreeSlot(occupied, cols, size.rows, columns);
+      const grid = { mode: "grid", col: slot.col, row: slot.row, cols, rows: size.rows };
+      next = { ...next, widgets: next.widgets.map((o) => o.id === w.id ? { ...o, layout: { ...o.layout, [bp]: grid } } : o) };
+    }
+  }
+  return resolveEverywhere(next, []);
 }
-function bringToFront(def, id) {
-  const widget = def.widgets.find((w) => w.id === id);
-  if (!widget) return def;
-  const box = baseBox(widget);
-  const maxOther = Math.max(-Infinity, ...def.widgets.filter((w) => w.id !== id).map((w) => baseBox(w).z));
-  if (box.z > maxOther) return def;
-  return setWidgetBox(def, id, { ...box, z: maxOther + 1 });
+function hostSpan(p, def, bp) {
+  if (p.mode === "grid") return { cols: p.cols, rows: p.rows };
+  if (!("fill" in p.size)) return p.size;
+  const host = def.widgets.find((w) => w.id === p.host);
+  return host ? hostSpan(resolvePlacement(host.layout, bp), def, bp) : { cols: 1, rows: 1 };
 }
 function setTitle(def, title) {
   return { ...def, title };
@@ -2734,28 +4117,44 @@ function setTitle(def, title) {
 function setCanvasGrid(def, patch) {
   const grid = { ...def.canvas.grid, ...patch };
   if (patch.columns !== void 0) grid.columns = Math.max(1, Math.round(patch.columns));
-  if (patch.rowHeight !== void 0) grid.rowHeight = Math.max(1, Math.round(patch.rowHeight));
-  const widgets = grid.columns < def.canvas.grid.columns ? def.widgets.map((w) => clampWidgetColumns(w, grid.columns)) : def.widgets;
-  return { ...def, widgets, canvas: { ...def.canvas, grid } };
-}
-function clampWidgetColumns(widget, columns) {
-  const layout = {};
-  for (const [bp, box] of Object.entries(widget.layout)) {
-    const col = Math.min(box.col, columns - 1);
-    layout[bp] = { ...box, col, colSpan: Math.min(box.colSpan, columns - col) };
+  if (patch.minCellSize !== void 0) grid.minCellSize = Math.max(1, patch.minCellSize);
+  let next = { ...def, canvas: { ...def.canvas, grid } };
+  if (grid.columns >= def.canvas.grid.columns) return next;
+  const affected = layoutBreakpoints(def.canvas.breakpoints, def.widgets).filter(
+    (bp) => breakpointColumns(next.canvas, bp) === grid.columns
+  );
+  for (const bp of affected) {
+    next = {
+      ...next,
+      widgets: next.widgets.map((w) => {
+        const p = resolvePlacement(w.layout, bp);
+        if (p.mode !== "grid" || p.col + p.cols <= grid.columns) return w;
+        const col = Math.min(p.col, grid.columns - 1);
+        return { ...w, layout: { ...w.layout, [bp]: { ...p, col, cols: Math.min(p.cols, grid.columns - col) } } };
+      })
+    };
+    next = resolveCollisions(next, bp, []);
   }
-  return { ...widget, layout };
+  return next;
 }
 function setCanvasSizing(def, sizing) {
   return { ...def, canvas: { ...def.canvas, sizing } };
 }
+function setCanvasDensity(def, density) {
+  const { density: _prev, ...rest } = def.canvas;
+  return { ...def, canvas: density === DEFAULT_CANVAS_DENSITY ? rest : { ...rest, density } };
+}
 function updateWidget(def, id, next) {
   return { ...def, widgets: def.widgets.map((w) => w.id === id ? next : w) };
 }
 function addWidget(def, descriptor) {
-  const maxZ = def.widgets.reduce((m, w) => Math.max(m, baseBox(w).z), 0);
   const id = generateWidgetId();
-  const box = { col: 0, colSpan: 8, row: 0, rowSpan: 4, z: maxZ + 1 };
+  const span = descriptor.layout?.defaultSpan ?? FALLBACK_DEFAULT_SPAN;
+  const columns = def.canvas.grid.columns;
+  const cols = Math.min(span.cols, columns);
+  const occupied = def.widgets.map(basePlacement).filter((p) => p.mode === "grid");
+  const slot = firstFreeSlot(occupied, cols, span.rows, columns);
+  const placement = { mode: "grid", col: slot.col, row: slot.row, cols, rows: span.rows };
   const common = {
     id,
     widget: {
@@ -2763,44 +4162,414 @@ function addWidget(def, descriptor) {
       optionsVersion: descriptor.optionsVersion,
       sdkApiVersion: descriptor.sdkApiVersion
     },
-    layout: { [BASE_BREAKPOINT]: box },
+    layout: { [BASE_BREAKPOINT]: placement },
     options: { ...descriptor.defaults }
   };
   const widget = { ...common, type: descriptor.id };
-  return { definition: { ...def, widgets: [...def.widgets, widget] }, id };
+  return { definition: resolveEverywhere({ ...def, widgets: [...def.widgets, widget] }, [id]), id };
 }
-function gridBoxToPx(box, geom) {
-  const colStride = geom.colWidth + geom.colGap;
-  const rowStride = geom.rowHeight + geom.rowGap;
-  const dx = box.offset?.x ?? 0;
-  const dy = box.offset?.y ?? 0;
+function gridPlacementToPx(p, geom) {
   return {
-    x: box.col * colStride + dx,
-    y: box.row * rowStride + dy,
-    w: box.colSpan * geom.colWidth + (box.colSpan - 1) * geom.colGap,
-    h: box.rowSpan * geom.rowHeight + (box.rowSpan - 1) * geom.rowGap
+    x: p.col * (geom.cell + geom.gutter.x),
+    y: p.row * (geom.cell + geom.gutter.y),
+    w: spanPx(p.cols, geom.cell, geom.gutter.x),
+    h: spanPx(p.rows, geom.cell, geom.gutter.y)
   };
 }
-function pxToGridBox(px, geom, z, offset, columns) {
-  const colStride = Math.max(1, geom.colWidth + geom.colGap);
-  const rowStride = Math.max(1, geom.rowHeight + geom.rowGap);
-  const x = px.x - (offset?.x ?? 0);
-  const y = px.y - (offset?.y ?? 0);
-  let col = Math.max(0, Math.round(x / colStride));
-  let colSpan = Math.max(1, Math.round((px.w + geom.colGap) / colStride));
+function pxToGridPlacement(px, geom, columns) {
+  const colStride = Math.max(1, geom.cell + geom.gutter.x);
+  const rowStride = Math.max(1, geom.cell + geom.gutter.y);
+  let col = Math.max(0, Math.round(px.x / colStride));
+  let cols = Math.max(1, Math.round((px.w + geom.gutter.x) / colStride));
   if (columns !== void 0) {
     col = Math.min(col, columns - 1);
-    colSpan = Math.min(colSpan, columns - col);
+    cols = Math.min(cols, columns - col);
   }
-  const box = {
+  return {
+    mode: "grid",
     col,
-    colSpan,
-    row: Math.max(0, Math.round(y / rowStride)),
-    rowSpan: Math.max(1, Math.round((px.h + geom.rowGap) / rowStride)),
-    z
+    row: Math.max(0, Math.round(px.y / rowStride)),
+    cols,
+    rows: Math.max(1, Math.round((px.h + geom.gutter.y) / rowStride))
+  };
+}
+function formatSpan(span) {
+  return `${span.cols}\xD7${span.rows}`;
+}
+var OFFSET_STEP = 1;
+var OFFSET_STEP_FINE = 0.25;
+function snapOffset(value, fine = false) {
+  const step = fine ? OFFSET_STEP_FINE : OFFSET_STEP;
+  const snapped = Math.round(value / step) * step;
+  return snapped === 0 ? 0 : snapped;
+}
+function replaceBase(def, id, placement) {
+  return {
+    ...def,
+    widgets: def.widgets.map((w) => w.id === id ? { ...w, layout: { ...w.layout, [BASE_BREAKPOINT]: placement } } : w)
+  };
+}
+function setRelativeOffset(def, id, offset, options = {}) {
+  const w = def.widgets.find((x2) => x2.id === id);
+  if (!w) return def;
+  const p = basePlacement(w);
+  if (p.mode !== "relative") return def;
+  const step = options.fine ? OFFSET_STEP_FINE : OFFSET_STEP;
+  let x = snapOffset(offset.x, options.fine);
+  let y = snapOffset(offset.y, options.fine);
+  const { bounds } = options;
+  if (bounds) {
+    const host = layoutRects(def.widgets, BASE_BREAKPOINT, bounds.cell, bounds.gutter).get(p.host);
+    if (host) {
+      const r = relativeRect({ ...p, offset: { x, y } }, host, bounds.cell, bounds.gutter);
+      const px = (bounds.cell + bounds.gutter.x) * step;
+      const py = (bounds.cell + bounds.gutter.y) * step;
+      const width = spanPx(bounds.columns, bounds.cell, bounds.gutter.x);
+      if (r.x < 0) x += Math.ceil(-r.x / px) * step;
+      else if (r.x + r.w > width) x -= Math.ceil((r.x + r.w - width) / px) * step;
+      if (r.y < 0) y += Math.ceil(-r.y / py) * step;
+    }
+  }
+  const next = { ...p };
+  if (x === 0 && y === 0) delete next.offset;
+  else next.offset = { x, y };
+  if ((next.offset?.x ?? 0) === (p.offset?.x ?? 0) && (next.offset?.y ?? 0) === (p.offset?.y ?? 0)) return def;
+  return replaceBase(def, id, next);
+}
+function canHost(def, host, id) {
+  if (!host || host.id === id) return false;
+  return layoutBreakpoints(def.canvas.breakpoints, def.widgets).every(
+    (bp) => resolvePlacement(host.layout, bp).mode === "grid"
+  );
+}
+function canHostRelative(def, id, hostId) {
+  return canHost(def, def.widgets.find((x) => x.id === hostId), id);
+}
+function placeRelative(def, id, hostId, anchor) {
+  const w = def.widgets.find((x) => x.id === id);
+  if (!w) return def;
+  if (!canHost(def, def.widgets.find((x) => x.id === hostId), id)) return def;
+  const p = basePlacement(w);
+  const size = p.mode === "grid" ? { cols: p.cols, rows: p.rows } : p.size;
+  return replaceBase(def, id, { mode: "relative", host: hostId, anchor, size });
+}
+function setRelativeAnchor(def, id, anchor) {
+  const w = def.widgets.find((x) => x.id === id);
+  const p = w && basePlacement(w);
+  if (!p || p.mode !== "relative" || p.anchor === anchor) return def;
+  return replaceBase(def, id, { ...p, anchor });
+}
+function placeOnGrid(def, id) {
+  const w = def.widgets.find((x) => x.id === id);
+  if (!w) return def;
+  const p = basePlacement(w);
+  if (p.mode !== "relative") return def;
+  const columns = def.canvas.grid.columns;
+  const size = "fill" in p.size ? hostSpan(p, def, BASE_BREAKPOINT) : p.size;
+  const cols = Math.min(size.cols, columns);
+  const occupied = def.widgets.filter((o) => o.id !== id).map(basePlacement).filter((o) => o.mode === "grid");
+  const slot = firstFreeSlot(occupied, cols, size.rows, columns);
+  const grid = { mode: "grid", col: slot.col, row: slot.row, cols, rows: size.rows };
+  return resolveEverywhere(replaceBase(def, id, grid), [id]);
+}
+function fitToLimits(def, spanLimitsOf) {
+  let changed = false;
+  const columnsAt = (bp) => breakpointColumns(def.canvas, bp);
+  const clamped = {
+    ...def,
+    widgets: def.widgets.map((w) => {
+      const limits = spanLimitsOf(w);
+      const layout = {};
+      let touched = false;
+      for (const [bp, p] of Object.entries(w.layout)) {
+        const columns = columnsAt(bp);
+        let q = p;
+        if (p.mode === "grid") {
+          const span = clampSpan(p, limits, columns);
+          const col = Math.max(0, Math.min(p.col, columns - span.cols));
+          if (span.cols !== p.cols || span.rows !== p.rows || col !== p.col) q = { ...p, ...span, col };
+        } else if (!("fill" in p.size)) {
+          const size = clampSpan(p.size, limits, columns);
+          if (size.cols !== p.size.cols || size.rows !== p.size.rows) q = { ...p, size };
+        }
+        if (q !== p) touched = true;
+        layout[bp] = q;
+      }
+      if (!touched) return w;
+      changed = true;
+      return { ...w, layout };
+    })
+  };
+  let next = {
+    ...clamped,
+    widgets: clamped.widgets.map((w) => {
+      const limits = spanLimitsOf(w);
+      if (!limits) return w;
+      let layout;
+      for (const [bp, p] of Object.entries(w.layout)) {
+        if (p.mode !== "relative" || !("fill" in p.size)) continue;
+        const span = hostSpan(p, clamped, bp);
+        const size = clampSpan(span, limits, columnsAt(bp));
+        if (size.cols === span.cols && size.rows === span.rows) continue;
+        layout = { ...layout ?? w.layout, [bp]: { ...p, size } };
+      }
+      if (!layout) return w;
+      changed = true;
+      return { ...w, layout };
+    })
+  };
+  for (let pass = 0; pass < 3; pass++) {
+    const off = lintLayout(next, { columns: def.canvas.grid.columns, spanLimitsOf }).filter(
+      (f) => f.code === "relative-off-canvas"
+    );
+    if (off.length === 0) break;
+    for (const f of off) {
+      const fixed = fitRelativeOnCanvas(next, f.widgetId, f.breakpoint ?? BASE_BREAKPOINT);
+      if (fixed !== next) changed = true;
+      next = fixed;
+    }
+  }
+  if (!changed) return def;
+  return resolveEverywhere(next, []);
+}
+function fitRelativeOnCanvas(def, id, bp) {
+  const w = def.widgets.find((x) => x.id === id);
+  if (!w) return def;
+  const p = resolvePlacement(w.layout, bp);
+  if (p.mode !== "relative") return def;
+  const columns = breakpointColumns(def.canvas, bp);
+  const gutter = gutterPx(def.canvas.grid);
+  const { offset, ...bare } = p;
+  let loX = -Infinity;
+  let hiX = Infinity;
+  let loY = -Infinity;
+  for (const cell of RELATIVE_PROBE_CELLS(def.canvas.grid.minCellSize)) {
+    const host = layoutRects(def.widgets, bp, cell, gutter).get(p.host);
+    if (!host) return def;
+    const r = relativeRect(bare, host, cell, gutter);
+    const width = spanPx(columns, cell, gutter.x);
+    loX = Math.max(loX, -r.x / (cell + gutter.x));
+    hiX = Math.min(hiX, (width - r.x - r.w) / (cell + gutter.x));
+    loY = Math.max(loY, -r.y / (cell + gutter.y));
+  }
+  const step = OFFSET_STEP_FINE;
+  const up = (v) => Math.ceil(v / step - 1e-9) * step;
+  const down = (v) => Math.floor(v / step + 1e-9) * step;
+  let placement;
+  if (up(loX) <= down(hiX)) {
+    const x = Math.min(Math.max(offset?.x ?? 0, up(loX)), down(hiX)) || 0;
+    const y = Math.max(offset?.y ?? 0, up(loY)) || 0;
+    placement = x === 0 && y === 0 ? bare : { ...bare, offset: { x, y } };
+  } else {
+    const size = "fill" in p.size ? hostSpan(p, def, bp) : p.size;
+    const cols = Math.min(size.cols, columns);
+    const occupied = def.widgets.filter((o) => o.id !== id).map((o) => resolvePlacement(o.layout, bp)).filter((o) => o.mode === "grid");
+    const slot = firstFreeSlot(occupied, cols, size.rows, columns);
+    placement = { mode: "grid", col: slot.col, row: slot.row, cols, rows: size.rows };
+  }
+  return {
+    ...def,
+    widgets: def.widgets.map((x) => x.id === id ? { ...x, layout: { ...x.layout, [bp]: placement } } : x)
+  };
+}
+
+// src/editor-history.ts
+var DEFAULT_HISTORY_LIMIT = 100;
+function createEditHistory(present, options = {}) {
+  return { past: [], present, future: [], limit: Math.max(1, Math.floor(options.limit ?? DEFAULT_HISTORY_LIMIT)) };
+}
+function commitEdit(h, next, label, options = {}) {
+  const equals = options.equals ?? Object.is;
+  if (next === h.present || equals(next, h.present)) return h;
+  const last = h.past[h.past.length - 1];
+  if (options.key !== void 0 && options.key === h.open && last) {
+    if (equals(next, last.state)) return { past: h.past.slice(0, -1), present: next, future: [], limit: h.limit };
+    return { ...h, present: next, future: [] };
+  }
+  const past = [...h.past, { state: h.present, label }];
+  if (past.length > h.limit) past.splice(0, past.length - h.limit);
+  return { past, present: next, future: [], open: options.key, limit: h.limit };
+}
+function sealHistory(h) {
+  if (h.open === void 0) return h;
+  const { open: _closed, ...rest } = h;
+  return rest;
+}
+function undoEdit(h) {
+  const last = h.past[h.past.length - 1];
+  if (!last) return { history: h };
+  return {
+    history: {
+      past: h.past.slice(0, -1),
+      present: last.state,
+      future: [...h.future, { state: h.present, label: last.label }],
+      limit: h.limit
+    },
+    label: last.label
+  };
+}
+function redoEdit(h) {
+  const next = h.future[h.future.length - 1];
+  if (!next) return { history: h };
+  return {
+    history: {
+      past: [...h.past, { state: h.present, label: next.label }],
+      present: next.state,
+      future: h.future.slice(0, -1),
+      limit: h.limit
+    },
+    label: next.label
+  };
+}
+var canUndo = (h) => h.past.length > 0;
+var canRedo = (h) => h.future.length > 0;
+function rebaseHistory(h, fn) {
+  const map = (e) => ({ ...e, state: fn(e.state) });
+  return { ...h, past: h.past.map(map), present: fn(h.present), future: h.future.map(map) };
+}
+
+// src/editor-clipboard.ts
+var WIDGET_CLIPBOARD_FORMAT = "devicechain/dashboard-widgets";
+var WIDGET_CLIPBOARD_VERSION = 1;
+function slotReferences(w) {
+  const out = [];
+  if (w.datasource?.kind === "slot" && w.datasource.slot) out.push(w.datasource.slot);
+  const target = w.options?.selectionTarget;
+  if (typeof target === "string" && target !== "" && !out.includes(target)) out.push(target);
+  return out;
+}
+var own = (map, key) => map && Object.prototype.hasOwnProperty.call(map, key) ? map[key] : void 0;
+function copyWidget(def, id, origin) {
+  const w = def.widgets.find((x) => x.id === id);
+  if (!w || w.type === UNKNOWN_WIDGET_TYPE) return void 0;
+  const p = basePlacement(w);
+  const size = p.mode === "grid" ? { cols: p.cols, rows: p.rows } : "fill" in p.size ? hostSpan(p, def, BASE_BREAKPOINT) : p.size;
+  const placement = { mode: "grid", col: 0, row: 0, ...size };
+  const widget = structuredClone({ ...w, layout: { [BASE_BREAKPOINT]: placement } });
+  const slots = {};
+  for (const name of slotReferences(w)) {
+    const slot = own(def.slots, name);
+    if (slot) slots[name] = structuredClone(slot);
+  }
+  return { tenant: origin.tenant, board: origin.board, canvas: structuredClone(def.canvas), widgets: [widget], slots };
+}
+function serializeWidgetClipboard(clip) {
+  const definition = storedDefinition({
+    schemaVersion: CURRENT_SCHEMA_VERSION,
+    title: "",
+    canvas: clip.canvas,
+    widgets: clip.widgets,
+    ...Object.keys(clip.slots).length > 0 ? { slots: clip.slots } : {}
+  });
+  return JSON.stringify({
+    format: WIDGET_CLIPBOARD_FORMAT,
+    version: WIDGET_CLIPBOARD_VERSION,
+    tenant: clip.tenant,
+    board: clip.board,
+    definition
+  });
+}
+function parseWidgetClipboard(text, options = {}) {
+  let env;
+  try {
+    env = JSON.parse(text);
+  } catch {
+    return void 0;
+  }
+  if (typeof env !== "object" || env === null) return void 0;
+  const { format, version, tenant, board, definition } = env;
+  if (format !== WIDGET_CLIPBOARD_FORMAT || version !== WIDGET_CLIPBOARD_VERSION) return void 0;
+  if (typeof tenant !== "string" || tenant === "" || typeof board !== "string") return void 0;
+  let parsed;
+  try {
+    parsed = parseDashboardDefinition(definition, options);
+  } catch (err) {
+    if (err?.code === "schemaTooNew") throw err;
+    return void 0;
+  }
+  const widgets = [];
+  const refused = [];
+  for (const w of parsed.widgets) {
+    if (w.type !== UNKNOWN_WIDGET_TYPE) {
+      widgets.push(w);
+      continue;
+    }
+    const type = typeof w.raw.type === "string" ? w.raw.type : "";
+    refused.push({ type, reason: w.reason?.message ?? "" });
+  }
+  return { clipboard: { tenant, board, canvas: parsed.canvas, widgets, slots: parsed.slots ?? {} }, refused };
+}
+var CONCRETE_KINDS = /* @__PURE__ */ new Set(["device", "anchor", "devices", "relatedTraversal"]);
+function pasteWidgets(def, clip, at) {
+  const sameTenant = clip.tenant !== "" && clip.tenant === at.tenant;
+  const sameBoard = sameTenant && clip.board === at.board;
+  const columns = def.canvas.grid.columns;
+  const slots = { ...def.slots ?? {} };
+  const mapped = /* @__PURE__ */ new Map();
+  const mapSlot = (from) => {
+    const known = mapped.get(from);
+    if (known) return known;
+    const source = own(clip.slots, from);
+    const target = own(slots, from);
+    const keep = sameTenant && target !== void 0 && source !== void 0 && target.type === source.type && (sameBoard || sameBinding(target.defaultBinding, source.defaultBinding));
+    let result;
+    if (keep) result = { slot: from };
+    else {
+      const slot = nextSlotName(slots);
+      const label = sameTenant ? source?.label : void 0;
+      slots[slot] = { type: source?.type ?? "device", ...label !== void 0 ? { label } : {} };
+      result = { slot, reason: !sameTenant ? "tenant" : target ? "different" : "missing" };
+    }
+    mapped.set(from, result);
+    return result;
   };
-  if (offset) box.offset = offset;
-  return box;
+  const occupied = def.widgets.map(basePlacement).filter((p) => p.mode === "grid");
+  const added = [];
+  const ids = [];
+  const unbound = [];
+  for (const source of clip.widgets) {
+    const id = generateWidgetId();
+    const p = basePlacement(source);
+    const span = p.mode === "grid" ? { cols: p.cols, rows: p.rows } : "fill" in p.size ? { cols: 1, rows: 1 } : p.size;
+    const cols = Math.min(span.cols, columns);
+    const slot = firstFreeSlot(occupied, cols, span.rows, columns);
+    const placement = { mode: "grid", col: slot.col, row: slot.row, cols, rows: span.rows };
+    occupied.push(placement);
+    const w = structuredClone(source);
+    w.id = id;
+    w.layout = { [BASE_BREAKPOINT]: placement };
+    for (const from of slotReferences(source)) {
+      const m = mapSlot(from);
+      if (m.reason) unbound.push({ widgetId: id, slot: m.slot, from, reason: m.reason });
+      if (m.slot === from) continue;
+      if (w.datasource?.kind === "slot" && w.datasource.slot === from) w.datasource = { ...w.datasource, slot: m.slot };
+      if (w.options?.selectionTarget === from) w.options = { ...w.options, selectionTarget: m.slot };
+    }
+    const ds = w.datasource;
+    if (!sameTenant && ds && CONCRETE_KINDS.has(ds.kind) && ds.kind !== "slot" && ds.kind !== "unbound") {
+      const slot2 = nextSlotName(slots);
+      slots[slot2] = { type: ds.kind === "anchor" ? "anchor" : "device" };
+      w.datasource = {
+        kind: "slot",
+        slot: slot2,
+        measurements: [...ds.measurements],
+        ...ds.location ? { location: { ...ds.location } } : {}
+      };
+      unbound.push({ widgetId: id, slot: slot2, from: "", reason: "tenant" });
+    }
+    added.push(w);
+    ids.push(id);
+  }
+  const next = { ...def, widgets: [...def.widgets, ...added] };
+  if (Object.keys(slots).length > 0) next.slots = slots;
+  return { definition: resolveEverywhere(next, ids), ids, unbound };
+}
+function duplicateWidget(def, id) {
+  const here = { tenant: "here", board: "here" };
+  const clip = copyWidget(def, id, here);
+  if (!clip) return void 0;
+  const r = pasteWidgets(def, clip, here);
+  return { definition: r.definition, id: r.ids[0], unbound: r.unbound };
 }
 
 // src/resolver.ts
@@ -2808,28 +4577,63 @@ import { gql as gql3 } from "@devicechain/client";
 var ANCHOR_PAGE_SIZE = 500;
 function createDeviceResolver() {
   const anchorCache = /* @__PURE__ */ new Map();
+  const memberCache = /* @__PURE__ */ new Map();
   const existsCache = /* @__PURE__ */ new Map();
+  function anchorKey(anchor) {
+    return `${anchor.relationship}|${anchor.targetType}|${anchor.targetToken}`;
+  }
+  function anchorPage(anchor) {
+    const key = anchorKey(anchor);
+    let pending = anchorCache.get(key);
+    if (!pending) {
+      pending = gql3("device-management", DEVICES_FOR_ANCHOR, {
+        criteria: {
+          pageNumber: 1,
+          pageSize: ANCHOR_PAGE_SIZE,
+          sourceType: "device",
+          targetType: anchor.targetType,
+          target: anchor.targetToken,
+          relationshipType: anchor.relationship
+        }
+      }).then((r) => {
+        const tokens = r.entityRelationships.results.map((rel) => rel.source.token);
+        const total = r.entityRelationships.pagination?.totalRecords ?? tokens.length;
+        return { tokens, total: Math.max(total, tokens.length) };
+      }).catch((err) => {
+        anchorCache.delete(key);
+        throw err;
+      });
+      anchorCache.set(key, pending);
+    }
+    return pending;
+  }
   return {
     devicesForAnchor(anchor) {
-      const key = `${anchor.relationship}|${anchor.targetType}|${anchor.targetToken}`;
-      let pending = anchorCache.get(key);
+      return anchorPage(anchor).then((page) => page.tokens);
+    },
+    // The members of an anchor with their names and the anchor's true size. One relationship page
+    // (shared with devicesForAnchor) plus ONE batched name read, whatever the size of the fleet. A
+    // failed name read is not a failed roster: the tokens still stream, and the widget labels
+    // them by token.
+    anchorMembers(anchor) {
+      const key = anchorKey(anchor);
+      let pending = memberCache.get(key);
       if (!pending) {
-        pending = gql3("device-management", DEVICES_FOR_ANCHOR, {
-          criteria: {
-            pageNumber: 1,
-            pageSize: ANCHOR_PAGE_SIZE,
-            sourceType: "device",
-            targetType: anchor.targetType,
-            target: anchor.targetToken,
-            relationshipType: anchor.relationship
+        pending = anchorPage(anchor).then(async ({ tokens, total }) => {
+          const names = /* @__PURE__ */ new Map();
+          if (tokens.length > 0) {
+            try {
+              const r = await gql3("device-management", DEVICE_NAMES, { tokens });
+              for (const d of r.devicesByToken) names.set(d.token, d.name);
+            } catch {
+            }
           }
-        }).then(
-          (r) => r.entityRelationships.results.map((rel) => rel.source.token)
-        ).catch((err) => {
-          anchorCache.delete(key);
+          return { members: tokens.map((token) => ({ token, name: names.get(token) ?? null })), total };
+        }).catch((err) => {
+          memberCache.delete(key);
           throw err;
         });
-        anchorCache.set(key, pending);
+        memberCache.set(key, pending);
       }
       return pending;
     },
@@ -2861,15 +4665,14 @@ function createDeviceResolver() {
 
 // src/history.ts
 import { gql as gql4 } from "@devicechain/client";
+function historyWindowFor(spanSeconds, end) {
+  const { startTime, endTime } = rangeWindow({ spanSeconds, paused: false }, end);
+  return { startTime, endTime, intervalSeconds: bucketSecondsFor(spanSeconds) };
+}
 function defaultHistoryWindow() {
-  const now = Date.now();
-  return {
-    startTime: new Date(now - 60 * 60 * 1e3).toISOString(),
-    endTime: new Date(now).toISOString(),
-    intervalSeconds: 60
-  };
+  return historyWindowFor(DEFAULT_TIME_RANGE_SECONDS, Date.now());
 }
-async function fetchWidgetHistory(widget, window) {
+async function fetchWidgetHistory(widget, window2) {
   const ds = widget.datasource;
   if (!ds || ds.kind !== "device") return [];
   try {
@@ -2881,9 +4684,9 @@ async function fetchWidgetHistory(widget, window) {
           criteria: {
             deviceToken,
             name,
-            startTime: window.startTime,
-            endTime: window.endTime,
-            intervalSeconds: window.intervalSeconds
+            startTime: window2.startTime,
+            endTime: window2.endTime,
+            intervalSeconds: window2.intervalSeconds
           }
         }).then((r) => r.bucketedMeasurements)
       )
@@ -2990,6 +4793,36 @@ function checkValue(widgetId, key, spec, value) {
         return issue("enum", `${key} must be one of ${spec.values.join(", ")}, got ${JSON.stringify(value)}`);
       }
       return [];
+    case "list": {
+      if (!Array.isArray(value)) return issue("type", `${key} must be a list, got ${describe(value)}`);
+      if (spec.maxItems !== void 0 && value.length > spec.maxItems) {
+        return issue("range", `${key} holds at most ${spec.maxItems} entries, got ${value.length}`);
+      }
+      const out = [];
+      value.forEach((entry, i) => {
+        const at = `${key}[${i}]`;
+        const at_ = (path, code, message) => ({ widgetId, key: path, code, message });
+        if (typeof entry !== "object" || entry === null || Array.isArray(entry)) {
+          out.push(at_(at, "type", `${at} must be an object, got ${describe(entry)}`));
+          return;
+        }
+        const record = entry;
+        for (const [field, fieldSpec] of Object.entries(spec.item)) {
+          const fieldValue = record[field];
+          if (fieldValue === void 0 || fieldSpec.required && fieldValue === "") {
+            if (fieldSpec.required) out.push(at_(`${at}.${field}`, "missing", `${at}.${field} is required but not set`));
+            continue;
+          }
+          out.push(...checkValue(widgetId, `${at}.${field}`, fieldSpec, fieldValue));
+        }
+        for (const field of Object.keys(record)) {
+          if (!hasOwn(spec.item, field)) {
+            out.push(at_(`${at}.${field}`, "unknown", `${at}.${field} is not a field of ${key} entries`));
+          }
+        }
+      });
+      return out;
+    }
   }
 }
 function parsesAsJson(value) {
@@ -3029,7 +4862,7 @@ function applyOptionPatch(specs, options, patch, label = "widget") {
   for (const [key, value] of Object.entries(patch)) {
     if (!hasOwn(specs, key)) throw new Error(`${label}: "${key}" is not a declared option`);
     const spec = specs[key];
-    if (value === void 0 || value === "" || spec.kind === "boolean" && value === false) {
+    if (value === void 0 || value === "" || spec.kind === "boolean" && value === false || spec.kind === "list" && Array.isArray(value) && value.length === 0) {
       delete next[key];
       continue;
     }
@@ -3059,25 +4892,17 @@ function applyOptionPatch(specs, options, patch, label = "widget") {
         }
         next[key] = value;
         break;
+      case "list": {
+        const bad = checkValue(label, key, spec, value);
+        if (bad.length > 0) refuse(`a list of ${key} entries (${bad[0].message})`);
+        next[key] = value;
+        break;
+      }
     }
   }
   return next;
 }
 
-// src/widget-descriptor.ts
-var BUILTIN_IDS = new Set(WIDGET_TYPES);
-function isBuiltinWidgetId(id) {
-  return typeof id === "string" && BUILTIN_IDS.has(id);
-}
-var NAMESPACED_ID = /^[a-z0-9][a-z0-9-]*\/[a-z0-9][a-z0-9-]*$/;
-function isNamespacedWidgetId(id) {
-  return typeof id === "string" && NAMESPACED_ID.test(id);
-}
-var SDK_API_VERSION = 1;
-function defineWidgetDescriptor(descriptor) {
-  return descriptor;
-}
-
 // src/widget-catalog.ts
 var WidgetCatalogError = class extends Error {
   constructor(issues, subject = "widget catalog") {
@@ -3091,28 +4916,26 @@ function describeIssues(subject, issues) {
   return `invalid ${subject} (${issues.length} problem${issues.length === 1 ? "" : "s"}):
 ${lines.join("\n")}`;
 }
-var CHANNELS = ["measurement", "alarm", "control", "selection", "location", "none"];
+var CHANNELS = ["measurement", "alarm", "control", "selection", "location", "aggregate", "none"];
 var SEMVER2 = /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)$/;
 var SELECTOR_KINDS = ["device", "anchor", "slot"];
 var BINDING_KEYS = {
-  measurement: ["window"],
+  measurement: ["window", "windowSeconds", "members"],
   alarm: ["pageSize", "state", "severity", "acknowledged"],
   control: ["pageSize"],
   location: [],
+  aggregate: ["windowSeconds"],
   selection: [],
   none: []
 };
-function isRecord3(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
 function isPlainObject(value) {
-  if (!isRecord3(value)) return false;
+  if (!isRecord(value)) return false;
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
 }
 var join = (base, key) => base ? `${base}.${key}` : key;
 function validateWidgetDescriptor(descriptor) {
-  const rawId = isRecord3(descriptor) && typeof descriptor.id === "string" ? descriptor.id : "";
+  const rawId = isRecord(descriptor) && typeof descriptor.id === "string" ? descriptor.id : "";
   return collectDescriptorIssues(descriptor, rawId || "#?");
 }
 function collectDescriptorIssues(d, id) {
@@ -3139,7 +4962,7 @@ function collectDescriptorIssues(d, id) {
   if (typeof d.optionsVersion !== "number" || !Number.isInteger(d.optionsVersion) || d.optionsVersion < 1) {
     add("optionsVersion", `optionsVersion must be a positive integer, got ${JSON.stringify(d.optionsVersion)}`);
   }
-  if (!isRecord3(d.display)) {
+  if (!isRecord(d.display)) {
     add("display", "display must be an object");
   } else {
     if (typeof d.display.title !== "string" || d.display.title === "") {
@@ -3155,10 +4978,15 @@ function collectDescriptorIssues(d, id) {
   const specs = checkOptions(d.options, add);
   const constraints = checkConstraints(d.constraints, specs, add);
   if (specs) checkDefaults(d.defaults, specs, constraints, typeof d.id === "string" ? d.id : id, add);
-  else if (!isRecord3(d.defaults)) add("defaults", "defaults must be an object");
+  else if (!isRecord(d.defaults)) add("defaults", "defaults must be an object");
   checkDatasource(d.datasource, channel, add);
   if (channel) checkBinding(d.binding, channel, specs, add);
   checkInteractions(d.interactions, channel, add);
+  checkLayout(d.layout, add);
+  if (d.freshness !== void 0) {
+    if (d.freshness !== true) add("freshness", "freshness must be true when present");
+    else if (channel && channel !== "measurement") add("freshness", "freshness applies only to the measurement channel");
+  }
   return issues;
 }
 function jsonOnly(value, path, add, ancestors) {
@@ -3197,14 +5025,17 @@ function jsonOnly(value, path, add, ancestors) {
   ancestors.delete(obj);
 }
 function checkOptions(options, add) {
-  if (!isRecord3(options)) {
+  if (!isRecord(options)) {
     add("options", "options must be an object mapping option keys to specs");
     return void 0;
   }
+  return checkOptionsAt(options, "options.", add) ? options : void 0;
+}
+function checkOptionsAt(options, prefix, add) {
   let sound = true;
   for (const [key, spec] of Object.entries(options)) {
-    const at = `options.${key}`;
-    if (!isRecord3(spec)) {
+    const at = `${prefix}${key}`;
+    if (!isRecord(spec)) {
       add(at, "an option spec must be an object");
       sound = false;
       continue;
@@ -3235,7 +5066,7 @@ function checkOptions(options, add) {
         for (const table of ["valueLabels", "valueLabelIds"]) {
           const labels = spec[table];
           if (labels === void 0) continue;
-          if (!isRecord3(labels)) {
+          if (!isRecord(labels)) {
             add(`${at}.${table}`, `${table} must be an object mapping enum values to strings`);
             continue;
           }
@@ -3247,12 +5078,33 @@ function checkOptions(options, add) {
           }
         }
         break;
+      case "list": {
+        if (spec.maxItems !== void 0 && (typeof spec.maxItems !== "number" || !Number.isInteger(spec.maxItems) || spec.maxItems < 1)) {
+          add(`${at}.maxItems`, "maxItems must be a whole number of at least 1");
+        }
+        if (!isRecord(spec.item) || Object.keys(spec.item).length === 0) {
+          add(`${at}.item`, "a list option needs an item object declaring at least one field");
+          sound = false;
+          break;
+        }
+        const fields = spec.item;
+        const flat = Object.fromEntries(Object.entries(fields).filter(([, f]) => !isRecord(f) || f.kind !== "list"));
+        for (const key2 of Object.keys(fields)) {
+          if (!(key2 in flat)) add(`${at}.item.${key2}`, "a list item field cannot itself be a list");
+        }
+        if (Object.keys(flat).length !== Object.keys(fields).length) {
+          sound = false;
+          break;
+        }
+        if (!checkOptionsAt(flat, `${at}.item.`, add)) sound = false;
+        break;
+      }
       default:
-        add(`${at}.kind`, `kind must be string, number, boolean or enum, got ${JSON.stringify(spec.kind)}`);
+        add(`${at}.kind`, `kind must be string, number, boolean, enum or list, got ${JSON.stringify(spec.kind)}`);
         sound = false;
     }
   }
-  return sound ? options : void 0;
+  return sound;
 }
 function checkConstraints(constraints, specs, add) {
   if (constraints === void 0) return [];
@@ -3263,8 +5115,8 @@ function checkConstraints(constraints, specs, add) {
   const valid = [];
   constraints.forEach((c, i) => {
     const at = `constraints[${i}]`;
-    if (!isRecord3(c) || c.kind !== "greater-than") {
-      add(`${at}.kind`, `constraint kind must be "greater-than", got ${JSON.stringify(isRecord3(c) ? c.kind : c)}`);
+    if (!isRecord(c) || c.kind !== "greater-than") {
+      add(`${at}.kind`, `constraint kind must be "greater-than", got ${JSON.stringify(isRecord(c) ? c.kind : c)}`);
       return;
     }
     let ok = true;
@@ -3283,7 +5135,7 @@ function checkConstraints(constraints, specs, add) {
   return valid;
 }
 function checkDefaults(defaults, specs, constraints, id, add) {
-  if (!isRecord3(defaults)) {
+  if (!isRecord(defaults)) {
     add("defaults", "defaults must be an object");
     return;
   }
@@ -3293,7 +5145,7 @@ function checkDefaults(defaults, specs, constraints, id, add) {
   for (const issue of found) add(`defaults.${issue.key}`, issue.message);
 }
 function checkDatasource(datasource, channel, add) {
-  if (!isRecord3(datasource)) {
+  if (!isRecord(datasource)) {
     add("datasource", "datasource must be an object");
     return;
   }
@@ -3323,7 +5175,7 @@ function checkDatasource(datasource, channel, add) {
   });
 }
 function checkBinding(binding, channel, specs, add) {
-  if (!isRecord3(binding)) {
+  if (!isRecord(binding)) {
     add("binding", "binding must be an object");
     return;
   }
@@ -3338,7 +5190,7 @@ function checkBinding(binding, channel, specs, add) {
     const policy = binding[key];
     if (policy === void 0) return;
     const at = `binding.${key}`;
-    if (!isRecord3(policy)) {
+    if (!isRecord(policy)) {
       add(at, `${key} must be an object`);
       return;
     }
@@ -3365,7 +5217,7 @@ function checkBinding(binding, channel, specs, add) {
     }
     if (policy.min !== void 0 && typeof policy.min !== "number") add(`${at}.min`, "min must be a number");
     if (policy.default !== void 0) {
-      const wantsNumber = key === "window" || key === "pageSize";
+      const wantsNumber = key === "window" || key === "windowSeconds" || key === "pageSize";
       if (typeof policy.default !== (wantsNumber ? "number" : "string")) {
         add(`${at}.default`, `default must be a ${wantsNumber ? "number" : "string"}`);
       }
@@ -3375,13 +5227,83 @@ function checkBinding(binding, channel, specs, add) {
   const isText = (s) => s.kind === "string" || s.kind === "enum";
   const isBoolEnum = (s) => s.kind === "enum" && s.values.every((v) => v === "true" || v === "false");
   ref("window", isNumber, "a number option", false);
+  ref("windowSeconds", isNumber, "a number option", false);
   ref("pageSize", isNumber, "a number option", true);
   ref("state", isText, "a string or enum option", false);
   ref("severity", isText, "a string or enum option", false);
   ref("acknowledged", isBoolEnum, 'an enum option whose values are only "true" and "false"', false);
+  const members = binding.members;
+  if (members !== void 0) {
+    const m = isRecord(members) ? members : {};
+    const isConst = m.const !== void 0;
+    if (isConst ? m.option !== void 0 || m.equals !== void 0 : typeof m.option !== "string" || typeof m.equals !== "string") {
+      add("binding.members", "members must be { const: true } or { option, equals } naming a declared option and a value of it");
+    } else if (isConst) {
+      if (m.const !== true) add("binding.members.const", `const must be true, got ${JSON.stringify(m.const)}`);
+    } else if (specs) {
+      const spec = hasOwn(specs, m.option) ? specs[m.option] : void 0;
+      if (!spec) add("binding.members.option", `option ${JSON.stringify(m.option)} is not a declared option key`);
+      else if (!isText(spec)) add("binding.members.option", `option ${JSON.stringify(m.option)} must be a string or enum option`);
+      else if (spec.kind === "enum" && !spec.values.includes(m.equals)) {
+        add("binding.members.equals", `${JSON.stringify(m.equals)} is not one of the option's values`);
+      }
+    }
+  }
+}
+function readSpan(value, path, add) {
+  if (!isRecord(value)) {
+    add(path, `${path} must be an object with cols and rows`);
+    return void 0;
+  }
+  let ok = true;
+  for (const axis of ["cols", "rows"]) {
+    const n = value[axis];
+    if (typeof n !== "number" || !Number.isInteger(n) || n < 1) {
+      add(`${path}.${axis}`, `${axis} must be a positive integer, got ${JSON.stringify(n)}`);
+      ok = false;
+    }
+  }
+  for (const key of Object.keys(value)) {
+    if (key !== "cols" && key !== "rows") add(`${path}.${key}`, `unknown span field "${key}"`);
+  }
+  return ok ? { cols: value.cols, rows: value.rows } : void 0;
+}
+function checkLayout(layout, add) {
+  if (layout === void 0) return;
+  if (!isRecord(layout)) {
+    add("layout", "layout must be an object");
+    return;
+  }
+  for (const key of Object.keys(layout)) {
+    if (!["defaultSpan", "minSpan", "maxSpan", "resize"].includes(key)) add(`layout.${key}`, `unknown layout field "${key}"`);
+  }
+  let def;
+  if (layout.defaultSpan === void 0) add("layout.defaultSpan", "layout needs a defaultSpan");
+  else def = readSpan(layout.defaultSpan, "layout.defaultSpan", add);
+  const min = layout.minSpan === void 0 ? void 0 : readSpan(layout.minSpan, "layout.minSpan", add);
+  const max = layout.maxSpan === void 0 ? void 0 : readSpan(layout.maxSpan, "layout.maxSpan", add);
+  const mode = layout.resize ?? "both";
+  if (mode !== "both" && mode !== "horizontal" && mode !== "vertical" && mode !== "none") {
+    add("layout.resize", `resize must be both, horizontal, vertical or none, got ${JSON.stringify(layout.resize)}`);
+    return;
+  }
+  const floor = min ?? { cols: 1, rows: 1 };
+  for (const axis of ["cols", "rows"]) {
+    if (def && floor[axis] > def[axis]) add("layout.minSpan", `minSpan.${axis} (${floor[axis]}) is above defaultSpan.${axis} (${def[axis]})`);
+    if (def && max && def[axis] > max[axis]) add("layout.maxSpan", `maxSpan.${axis} (${max[axis]}) is below defaultSpan.${axis} (${def[axis]})`);
+    if (!def && min && max && min[axis] > max[axis]) add("layout.maxSpan", `maxSpan.${axis} is below minSpan.${axis}`);
+  }
+  if (!def) return;
+  for (const axis of pinnedAxes(mode)) {
+    for (const [name, bound] of [["minSpan", min], ["maxSpan", max]]) {
+      if (bound && bound[axis] !== def[axis]) {
+        add("layout.resize", `resize "${mode}" pins ${axis} at ${def[axis]}, but ${name}.${axis} is ${bound[axis]}`);
+      }
+    }
+  }
 }
 function checkInteractions(interactions, channel, add) {
-  if (!isRecord3(interactions)) {
+  if (!isRecord(interactions)) {
     add("interactions", "interactions must be an object");
     return;
   }
@@ -3416,7 +5338,7 @@ function collectCatalogIssues(descriptors) {
   const issues = [];
   const seen = /* @__PURE__ */ new Map();
   descriptors.forEach((d, index) => {
-    const id = isRecord3(d) && typeof d.id === "string" && d.id !== "" ? d.id : `#${index}`;
+    const id = isRecord(d) && typeof d.id === "string" && d.id !== "" ? d.id : `#${index}`;
     issues.push(...collectDescriptorIssues(d, id));
     if (id.startsWith("#")) return;
     const first = seen.get(id);
@@ -3435,41 +5357,151 @@ function sealCatalog(descriptors) {
     list: () => ordered
   });
 }
+
+// src/reflow.ts
+function liveColumns(grid, containerWidth, authored, scale = 1) {
+  const minCell = grid.minCellSize * scale;
+  if (cellSizeAt(grid, containerWidth, authored, scale) >= minCell) return authored;
+  const gx = gutterPx(grid, scale).x;
+  const room = cellSizeAt(grid, containerWidth, 1, scale);
+  const fit = Math.floor((room + gx) / (minCell + gx));
+  return Math.min(authored, Math.max(PHONE_MIN_COLUMNS, fit));
+}
+var clampInto = (n, min, max) => Math.min(max ?? Infinity, Math.max(min ?? 1, n));
+var STACK_BELOW_WIDTH = 600;
+function reflowGrid(items, columns, options = {}) {
+  const order = items.map((item, index) => ({ item, index })).sort(
+    (a, b) => a.item.placement.row - b.item.placement.row || a.item.placement.col - b.item.placement.col || a.index - b.index
+  );
+  const placed = [];
+  const out = /* @__PURE__ */ new Map();
+  let floor = 0;
+  let bottom = 0;
+  for (const { item } of order) {
+    const { placement: p, limits } = item;
+    const want = options.stack ? columns : p.cols;
+    const cols = Math.min(columns, clampInto(want, limits?.minSpan?.cols, limits?.maxSpan?.cols));
+    const rows = clampInto(p.rows, limits?.minSpan?.rows, limits?.maxSpan?.rows);
+    if (options.stack) {
+      const spot2 = { mode: "grid", col: 0, row: bottom, cols, rows };
+      out.set(item.id, spot2);
+      bottom += rows;
+      continue;
+    }
+    let spot;
+    for (let row = floor; !spot; row++) {
+      for (let col = 0; col + cols <= columns; col++) {
+        const probe = { mode: "grid", col, row, cols, rows };
+        if (!placed.some((q) => gridFootprintsOverlap(probe, q))) {
+          spot = probe;
+          break;
+        }
+      }
+    }
+    placed.push(spot);
+    out.set(item.id, spot);
+    floor = spot.row;
+  }
+  return out;
+}
+function layoutShape(canvas, containerWidth, scale = 1) {
+  const measured = containerWidth > 0;
+  const breakpoint = measured ? activeBreakpoint(canvas.breakpoints, containerWidth) : BASE_BREAKPOINT;
+  const authored = breakpointColumns(canvas, breakpoint);
+  const columns = measured ? liveColumns(canvas.grid, containerWidth, authored, scale) : authored;
+  const reflowed = columns < authored;
+  return { breakpoint, columns, reflowed, stacked: reflowed && containerWidth < STACK_BELOW_WIDTH };
+}
+function effectiveLayout(def, containerWidth, options = {}) {
+  const shape = layoutShape(def.canvas, containerWidth, options.scale ?? 1);
+  const items = [];
+  for (const w of def.widgets) {
+    const p = resolvePlacement(w.layout, shape.breakpoint);
+    if (p.mode === "grid") items.push({ id: w.id, placement: p, limits: options.limitsOf?.(w) });
+  }
+  const grid = shape.reflowed ? reflowGrid(items, shape.columns, { stack: shape.stacked }) : new Map(items.map((i) => [i.id, i.placement]));
+  return { ...shape, grid };
+}
 export {
+  ANCHOR_PAGE_SIZE,
   BASE_BREAKPOINT,
+  CANVAS_DENSITIES,
   COMMAND_STATUSES,
+  CURRENT_SCHEMA_VERSION,
+  ConnectionTracker,
+  DEFAULT_CANVAS_DENSITY,
+  DEFAULT_GRID,
+  DEFAULT_HISTORY_LIMIT,
+  DEFAULT_TIME_RANGE_SECONDS,
+  DENSITY_SCALE,
   DashboardDefinitionError,
   DashboardHub,
+  FALLBACK_DEFAULT_SPAN,
+  FRAME_BORDER_WIDTHS,
+  FRAME_HEADERS,
+  FRAME_RADII,
+  FRAME_VARIANTS,
   HOST_OPTION_CONTROLS,
+  LEGACY_REFERENCE_WIDTH,
+  MAX_SEED_BUCKETS,
+  MAX_TIME_RANGE_SECONDS,
+  MIN_TIME_RANGE_SECONDS,
   NotInRecordingError,
+  OFFLINE_AFTER_MS,
+  OFFSET_STEP,
+  OFFSET_STEP_FINE,
+  PHONE_MIN_COLUMNS,
+  PLACEMENT_ANCHORS,
+  PLACEMENT_MODES,
   PLAYBACK_RATES,
+  PUBLISH_BLOCKING_LAYOUT_CODES,
   RECORDED_HISTORY_WINDOW_MS,
   RECORDING_FORMAT_VERSION,
   RECORDING_KIND,
+  RESERVED_PLACEMENT_MODES,
   RecordedClock,
   RecordedDataSource,
   RecordingFormatError,
   SDK_API_VERSION,
+  SPACE_TOKEN_PX,
+  STACK_BELOW_WIDTH,
   SYNTHETIC_GENERATORS,
   SyntheticDataSource,
+  THEME_COLOR_TOKENS,
+  TIME_RANGE_PRESETS,
   UNKNOWN_WIDGET_TYPE,
+  WIDGET_CLIPBOARD_FORMAT,
+  WIDGET_CLIPBOARD_VERSION,
   WIDGET_TYPES,
   WidgetCatalogError,
   activeBreakpoint,
   addWidget,
+  anchorFraction,
   anchorSlotNames,
   applyOptionPatch,
   applySelection,
-  baseBox,
+  basePlacement,
   bindWidgetSlot,
   bindingsWithoutScopedSlots,
-  bringToFront,
+  blockingLayoutFindings,
+  breakpointColumns,
+  breakpointMinWidth,
+  bucketSecondsFor,
+  canHostRelative,
+  canRedo,
   canScopeSlot,
+  canUndo,
+  cellSizeAt,
   checkWidgetCompatibility,
   clampNumberOption,
+  clampSpan,
   clearWidgetDatasource,
   collectCatalogIssues,
+  commitEdit,
+  containerWidthFor,
+  copyWidget,
   createDeviceResolver,
+  createEditHistory,
   createEntityLister,
   createRecordedClock,
   createRecordedLister,
@@ -3479,51 +5511,108 @@ export {
   defineWidgetDescriptor,
   deleteWidget,
   describeIssues,
+  duplicateWidget,
   effectiveBindings,
+  effectiveLayout,
   enumValues,
   fetchWidgetHistory,
+  firstFreeSlot,
+  fitToLimits,
+  formatSpan,
   generateWidgetId,
-  gridBoxToPx,
+  gridFootprintsOverlap,
+  gridLengthPx,
+  gridPlacementToPx,
+  gridRect,
+  gutterPx,
   hasScopedSlots,
+  historyWindowFor,
+  initialTimeRange,
   isBuiltinWidget,
   isBuiltinWidgetId,
   isCancellableCommandStatus,
+  isCanvasDensity,
   isDirty,
   isNamespacedWidgetId,
   isResolvedWidget,
+  isSpaceToken,
   isTerminalCommandStatus,
+  isValidSpanSeconds,
+  layoutBreakpoints,
+  layoutRects,
+  layoutShape,
+  lintLayout,
+  liveColumns,
   migrateToSlots,
+  moveWidget,
   numberSpec,
+  paddingPx,
   parseBindingManifest,
   parseBoardRecording,
   parseDashboardDefinition,
+  parsePausedParam,
+  parseRangeParam,
   parseSlotBinding,
+  parseWidgetClipboard,
   parseWidgetRef,
+  pasteWidgets,
+  pauseRange,
+  pinnedAxes,
+  placeOnGrid,
+  placeRelative,
+  presetIdOf,
   pruneSlots,
-  pxToGridBox,
+  pushAside,
+  pushDown,
+  pxToGridPlacement,
+  rangeEnd,
+  rangeWindow,
+  rebaseHistory,
   recordedWallTimeMs,
   recordingBounds,
+  redoEdit,
+  reflowGrid,
+  relativeRect,
+  resizeWidget,
   resolveConcrete,
   resolveContextBindings,
+  resolveFrame,
+  resolvePlacement,
   resolveSlotCandidates,
-  resolveWidgetBox,
   resolveWidgetDatasource,
+  resumeRange,
   sameBinding,
+  sameLabel,
+  sealHistory,
+  seedBucketCount,
   serializeDefinition,
+  serializeWidgetClipboard,
+  setBoardTimeRange,
+  setCanvasDensity,
   setCanvasGrid,
   setCanvasSizing,
+  setRelativeAnchor,
+  setRelativeOffset,
   setSlotScope,
   setTitle,
-  setWidgetBox,
+  setWidgetPlacement,
   simulationScaleAt,
+  snapOffset,
+  spanLabel,
+  spanLimitsOfLayout,
+  spanPx,
   storedDefinition,
   stripDefaultBindings,
+  timeRangeFromSearch,
+  undoEdit,
   unresolvedWidgets,
   updateWidget,
   validateOptions,
   validateWidgetDescriptor,
   widgetBinding,
   widgetSlotName,
-  widgetVersionNotice
+  widgetVersionNotice,
+  withSpan,
+  withoutConversionMark
 };
 //# sourceMappingURL=index.js.map