flexdesk 0.16.0 → 0.17.0

package/dist/tiles.js

@@ -12,8 +12,15 @@ import {
   tile_registry_exports
 } from "./chunk-FOOS3T5L.js";
 import {
-  ActionDropdown
-} from "./chunk-O5OHMWBB.js";
+  ActionDropdown,
+  SlideOutPanel
+} from "./chunk-4A7SJC3T.js";
+import {
+  showContextMenu
+} from "./chunk-UWO43BZU.js";
+import {
+  openModal
+} from "./chunk-D3COLZZ2.js";
 import {
   buildHistogramTrace,
   buildLegendLayout,
@@ -28,10 +35,13 @@ import {
   purge,
   resize,
   strideDownsampleShared
-} from "./chunk-RQM5Z2MU.js";
-import "./chunk-FBGP5KN5.js";
-import "./chunk-6JSOVNID.js";
-import "./chunk-FL5KFNQH.js";
+} from "./chunk-MCIXFNVF.js";
+import "./chunk-Q36EPT2R.js";
+import {
+  isHexColor
+} from "./chunk-CVMCZZX2.js";
+import "./chunk-HNU6MM2B.js";
+import "./chunk-WVFGV5FT.js";
 import {
   __toCommonJS
 } from "./chunk-JYWURG5T.js";
@@ -71,6 +81,11 @@ function validateField(value, field) {
         return { valid: false, error: `${field.label} must be selected` };
       }
       break;
+    case FieldTypes.COLOR:
+      if (value != null && value !== "" && !isHexColor(value)) {
+        return { valid: false, error: `${field.label} must be a hex colour (#rgb or #rrggbb)` };
+      }
+      break;
     case FieldTypes.MULTISELECT:
       if (field.required && (!Array.isArray(value) || value.length === 0)) {
         return { valid: false, error: `${field.label} must have at least one selection` };
@@ -234,6 +249,16 @@ var TileBase = class {
     this._lastLoadedAt = null;
     this._loadSeq = 0;
     this.comparisonData = null;
+    this.scope = null;
+  }
+  /**
+   * Called when the board's scope changes (`TileGrid.setScope`), after
+   * `this.scope` is set. A no-op here: a tile whose rows the grid's data
+   * source loads is reloaded by the grid, and one fed through `setData` is
+   * fed again by whoever owns its data.
+   * @param {*} _scope
+   */
+  onScopeChange(_scope) {
   }
   /**
    * Set comparison data for overlay rendering.
@@ -696,7 +721,7 @@ var TileBase = class {
    * @private
    */
   _onConfigClick() {
-    this.element?.closest(".tile-grid")?.querySelectorAll(".tile.tile--selected").forEach((el) => el.classList.remove("tile--selected"));
+    this.element?.closest(".tile-grid")?.querySelectorAll(".tile.tile--selected").forEach((el3) => el3.classList.remove("tile--selected"));
     this.element?.classList.add("tile--selected");
     this.eventBus?.emit?.("tile:config-request", {
       tileId: this.id,
@@ -908,64 +933,19 @@ var TileBase = class {
   }
 };
 
-// src/tiles/chart_tiles.js
-init_tile_registry();
-var CATEGORICAL_ONLY = /* @__PURE__ */ new Set(["pie", "donut", "funnel"]);
-var CHART_TILE_TYPES = Object.freeze([
-  { value: "line", label: "Line" },
-  { value: "bar", label: "Bar" },
-  { value: "bar-stacked", label: "Bar (stacked)" },
-  { value: "bar-horizontal", label: "Bar (horizontal)" },
-  { value: "area", label: "Area" },
-  { value: "area-stacked", label: "Area (stacked %)" },
-  { value: "scatter", label: "Scatter" },
-  { value: "pie", label: "Pie" },
-  { value: "donut", label: "Donut" },
-  { value: "funnel", label: "Funnel" },
-  { value: "histogram", label: "Histogram" }
-]);
-var AXIS_CHARTS = ["bar", "bar-stacked", "bar-horizontal", "line", "area", "area-stacked", "scatter"];
-var READS = Object.freeze({
-  legend: /* @__PURE__ */ new Set([...AXIS_CHARTS, "pie", "donut", "histogram"]),
-  axis_titles: /* @__PURE__ */ new Set([...AXIS_CHARTS, "histogram"]),
-  y_scale: /* @__PURE__ */ new Set(["bar", "bar-horizontal", "line", "area", "scatter"]),
-  y_range: /* @__PURE__ */ new Set(["bar", "bar-stacked", "bar-horizontal", "line", "area", "scatter"]),
-  show_markers: /* @__PURE__ */ new Set(["line", "area", "area-stacked"])
+// src/tiles/figure_tile.js
+var FIGURE_CONFIG = Object.freeze({
+  scrollZoom: false,
+  displayModeBar: false,
+  responsive: true
 });
-var TILE_MARGIN = { l: 48, r: 16, t: 8, b: 36 };
-var MAX_POINTS = 2e3;
-function normalizeChartData(data) {
-  if (data == null) return null;
-  let d = data;
-  if (Array.isArray(d)) d = { series: d };
-  else if (typeof d !== "object") return null;
-  else if (!Array.isArray(d.series)) {
-    const single = ["x", "y", "labels", "values"].some((k) => Array.isArray(d[k]));
-    d = { ...d, series: single ? [d] : [] };
-  }
-  const series = d.series.filter((s) => s && pointCount(s) > 0);
-  if (!series.length) return null;
-  return {
-    series,
-    markers: Array.isArray(d.markers) ? d.markers : [],
-    referenceLines: Array.isArray(d.referenceLines) ? d.referenceLines : [],
-    xKind: d.xKind || null,
-    note: typeof d.note === "string" ? d.note : ""
-  };
-}
-function pointCount(s) {
-  for (const k of ["y", "values", "x", "labels"]) {
-    if (Array.isArray(s[k])) return s[k].length;
-  }
-  return 0;
-}
-var ChartTile = class extends TileBase {
-  static TYPE = "flexdesk.chart";
-  static TITLE = "Chart";
-  static ICON = "insert_chart";
-  static DESCRIPTION = "Line, bar, area, pie, donut, funnel or histogram over series you supply.";
-  static DEFAULT_SIZE = { w: 6, h: 4 };
-  static SIZE_CONSTRAINTS = { minW: 3, minH: 3, maxW: 12, maxH: 10 };
+var DOWNLOAD_PNG = Object.freeze({ action: "download-png", label: "Download PNG", icon: "image" });
+var FigureTile = class extends TileBase {
+  static TYPE = "flexdesk.figure";
+  static TITLE = "Figure";
+  static EXPANDABLE = true;
+  /** The empty state's text when `figure()` answers `null`. */
+  static EMPTY_MESSAGE = "No data to show.";
   /**
    * @param {Object} options - TileBase's, plus:
    * @param {Function} [options.onPointClick] - `({customdata, point, tile})`
@@ -977,109 +957,18 @@ var ChartTile = class extends TileBase {
     this._plotEl = null;
     this._drawn = false;
     this._drawSeq = 0;
-  }
-  /** Pure and static-only — it runs inside `TileBase`'s constructor. */
-  getDefaultConfig() {
-    return {
-      title: "",
-      chart_type: "line",
-      unit: "",
-      legend: "bottom",
-      x_title: "",
-      y_title: "",
-      y_scale: "linear",
-      y_min: null,
-      y_max: null,
-      show_markers: false,
-      max_points: MAX_POINTS
-    };
-  }
-  getConfigSchema() {
-    return {
-      fields: [
-        { name: "title", type: "text", label: "Tile title" },
-        {
-          name: "chart_type",
-          type: "select",
-          label: "Chart type",
-          options: CHART_TILE_TYPES.map((o) => ({ ...o }))
-        },
-        {
-          name: "unit",
-          type: "text",
-          label: "Unit",
-          help: 'Shown with the value axis title, e.g. "pts" or "h".'
-        },
-        {
-          name: "legend",
-          type: "select",
-          label: "Legend",
-          visibleWhen: { field: "chart_type", in: [...READS.legend] },
-          options: [
-            { value: "bottom", label: "Below" },
-            { value: "top", label: "Above" },
-            { value: "right", label: "Right" },
-            { value: "left", label: "Left" },
-            { value: "hidden", label: "None" }
-          ]
-        },
-        {
-          name: "x_title",
-          type: "text",
-          label: "X axis title",
-          visibleWhen: { field: "chart_type", in: [...READS.axis_titles] }
-        },
-        {
-          name: "y_title",
-          type: "text",
-          label: "Y axis title",
-          visibleWhen: { field: "chart_type", in: [...READS.axis_titles] }
-        },
-        {
-          name: "y_scale",
-          type: "select",
-          label: "Y scale",
-          visibleWhen: { field: "chart_type", in: [...READS.y_scale] },
-          options: [{ value: "linear", label: "Linear" }, { value: "log", label: "Logarithmic" }]
-        },
-        {
-          name: "y_min",
-          type: "number",
-          label: "Y minimum",
-          visibleWhen: { field: "chart_type", in: [...READS.y_range] }
-        },
-        {
-          name: "y_max",
-          type: "number",
-          label: "Y maximum",
-          visibleWhen: { field: "chart_type", in: [...READS.y_range] }
-        },
-        {
-          name: "show_markers",
-          type: "checkbox",
-          label: "Show point markers",
-          visibleWhen: { field: "chart_type", in: [...READS.show_markers] }
-        }
-      ]
-    };
-  }
-  mount(container) {
-    super.mount(container);
-    applyTitle(this);
+    this._figure = null;
   }
   /**
-   * `null` here is "the grid has no data", not "clear this tile": TileGrid's
-   * config save calls `update(grid.data, newConfig)`, and a grid whose tiles
-   * are fed one by one through `setData` has `grid.data === null` — passed on,
-   * it would drop the tile's series and skip the redraw in the new chart type.
-   * `setData(null)` is how a tile is cleared.
+   * The one override: what to draw for `data`.
+   * @param {*} _data
+   * @returns {{traces: Array, layout?: Object, config?: Object, frames?: Array}|null}
    */
-  update(data, config) {
-    super.update(data === null ? void 0 : data, config);
-    if (config) applyTitle(this);
+  figure(_data) {
+    throw new Error(`${this.constructor.name}.figure() must be implemented by the subclass`);
   }
   /**
-   * Hand this tile its series. Unlike `update()`, an empty or null value is
+   * Hand this tile its data. Unlike `update()`, an empty or null value is
    * drawn — as the empty state — rather than ignored.
    */
   setData(data) {
@@ -1101,10 +990,28 @@ var ChartTile = class extends TileBase {
     });
   }
   menuItems() {
-    return [{ action: "download-png", label: "Download PNG", icon: "image" }];
+    return [...super.menuItems(), ...this._figureMenuItems()];
+  }
+  /** The entries this class adds to the menu: Download PNG. For a subclass
+   *  that wants them WITHOUT `TileBase`'s own. @protected */
+  _figureMenuItems() {
+    return [{ ...DOWNLOAD_PNG }];
   }
   _onMenuAction(action) {
-    if (action === "download-png") this._downloadPng();
+    if (action === DOWNLOAD_PNG.action) this._downloadPng();
+    else super._onMenuAction(action);
+  }
+  /** The last figure drawn, for the expand window; `null` while there is none. */
+  getExpandData() {
+    const fig = this._figure;
+    if (!fig) return null;
+    return {
+      title: this.config.title || this.constructor.TITLE,
+      // Copies: Plotly writes onto the trace and layout objects it draws.
+      traces: fig.traces.map((t) => ({ ...t })),
+      layout: { ...fig.layout || {} },
+      frames: Array.isArray(fig.frames) ? fig.frames : void 0
+    };
   }
   // ── the three states: each one invalidates the figure ───────────────
   showLoading() {
@@ -1133,63 +1040,70 @@ var ChartTile = class extends TileBase {
    *  not awaited: a rejected purge (Plotly absent, already purged) must not
    *  surface as an unhandled rejection. */
   _releasePlot() {
-    const el = this._plotEl;
+    const el3 = this._plotEl;
     this._plotEl = null;
     this._drawn = false;
-    if (el) purge(el).catch(() => {
+    this._figure = null;
+    if (el3) purge(el3).catch(() => {
     });
   }
+  /**
+   * The nodes the content holds while `plotEl` draws `fig`: the plot alone
+   * here. A subclass adds what sits around the figure (a note, a caption).
+   * @param {HTMLElement} plotEl
+   * @param {Object} _fig - what `figure()` answered
+   * @returns {HTMLElement[]}
+   * @protected
+   */
+  _figureContent(plotEl, _fig) {
+    return [plotEl];
+  }
   // ── the draw ────────────────────────────────────────────────────────
   async _draw(data) {
     this._drawSeq += 1;
     const seq = this._drawSeq;
     const content = this.contentElement;
     if (!content) return;
+    const stale = () => this._disposed || seq !== this._drawSeq;
     this._releasePlot();
-    const norm = normalizeChartData(data);
-    if (!norm) {
-      this.showEmpty("No data to show.");
-      return;
-    }
-    let plan;
+    let fig;
     try {
-      plan = this._plan(norm);
+      fig = this.figure(data);
+      if (fig != null && (typeof fig !== "object" || !Array.isArray(fig.traces))) {
+        throw new Error("figure() must answer {traces, layout} or null");
+      }
     } catch (err) {
       this._failed(err);
       return;
     }
-    if (!plan) return;
-    const host = document.createElement("div");
-    host.className = "fd-chart-tile";
-    const parts = [host];
-    if (norm.note) {
-      const note = document.createElement("div");
-      note.className = "fd-chart-tile__note";
-      note.setAttribute("role", "note");
-      note.textContent = norm.note;
-      note.title = norm.note;
-      parts.push(note);
+    if (!fig) {
+      if (!stale()) this.showEmpty(this.constructor.EMPTY_MESSAGE);
+      return;
     }
-    content.replaceChildren(...parts);
+    const host = document.createElement("div");
+    host.className = "fd-figure-tile";
+    content.replaceChildren(...this._figureContent(host, fig));
     this._plotEl = host;
     this._drawn = false;
     try {
-      await createChart(host, plan.traces, plan.layout, {
-        scrollZoom: false,
-        displayModeBar: false,
-        responsive: true
-      });
+      const P = await ensurePlotly();
+      if (stale()) return;
+      await createChart(host, fig.traces, fig.layout || {}, { ...FIGURE_CONFIG, ...fig.config || {} });
+      if (Array.isArray(fig.frames) && fig.frames.length && !stale()) {
+        await P.addFrames(host, fig.frames);
+      }
     } catch (err) {
-      if (this._disposed || seq !== this._drawSeq) return;
+      if (stale()) return;
       this._failed(err);
       return;
     }
-    if (this._disposed || seq !== this._drawSeq) {
+    if (stale()) {
       purge(host).catch(() => {
       });
       return;
     }
     this._drawn = true;
+    this._figure = fig;
     this._wireClick(host);
   }
   /** Plotly's click, reduced to the point's own `customdata`. A pie's point
@@ -1209,14 +1123,224 @@ var ChartTile = class extends TileBase {
       try {
         this.onPointClick({ customdata, point, tile: this });
       } catch (err) {
-        console.error("[ChartTile] onPointClick threw:", err);
+        console.error(`[${this.constructor.name}] onPointClick threw:`, err);
+      }
+    });
+  }
+  async _downloadPng() {
+    if (!this._plotEl || !this._drawn) return;
+    try {
+      const P = await ensurePlotly();
+      const uri = await P.toImage(this._plotEl, { format: "png", scale: 2 });
+      const filename = `${slug(this.config.title || this.constructor.TITLE)}.png`;
+      const dialogs = this.host?.dialogs;
+      const result = dialogs ? await dialogs.saveFile({ data: uri.split(",")[1], filename, kind: "png" }) : null;
+      if (result) {
+        if (result.ok) this._notify("Download", `Chart saved to ${result.path}`, "success");
+        else if (!result.cancelled) this._notify("Download failed", result.error || "The image could not be saved", "error");
+        return;
       }
+      const a = document.createElement("a");
+      a.href = uri;
+      a.download = filename;
+      a.click();
+    } catch (err) {
+      this._notify("Download failed", `The image could not be made: ${err?.message || err}`, "error");
+    }
+  }
+  _failed(err) {
+    if (this._disposed) return;
+    this.showError(`This chart could not be drawn: ${err?.message || err}`);
+    this.eventBus?.emit?.("tile:render-failed", {
+      tileId: this.id,
+      message: err?.message || String(err)
     });
   }
+};
+function slug(text) {
+  return String(text).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "chart";
+}
+
+// src/tiles/chart_tiles.js
+init_tile_registry();
+var CATEGORICAL_ONLY = /* @__PURE__ */ new Set(["pie", "donut", "funnel"]);
+var CHART_TILE_TYPES = Object.freeze([
+  { value: "line", label: "Line" },
+  { value: "bar", label: "Bar" },
+  { value: "bar-stacked", label: "Bar (stacked)" },
+  { value: "bar-horizontal", label: "Bar (horizontal)" },
+  { value: "area", label: "Area" },
+  { value: "area-stacked", label: "Area (stacked %)" },
+  { value: "scatter", label: "Scatter" },
+  { value: "pie", label: "Pie" },
+  { value: "donut", label: "Donut" },
+  { value: "funnel", label: "Funnel" },
+  { value: "histogram", label: "Histogram" }
+]);
+var AXIS_CHARTS = ["bar", "bar-stacked", "bar-horizontal", "line", "area", "area-stacked", "scatter"];
+var READS = Object.freeze({
+  legend: /* @__PURE__ */ new Set([...AXIS_CHARTS, "pie", "donut", "histogram"]),
+  axis_titles: /* @__PURE__ */ new Set([...AXIS_CHARTS, "histogram"]),
+  y_scale: /* @__PURE__ */ new Set(["bar", "bar-horizontal", "line", "area", "scatter"]),
+  y_range: /* @__PURE__ */ new Set(["bar", "bar-stacked", "bar-horizontal", "line", "area", "scatter"]),
+  show_markers: /* @__PURE__ */ new Set(["line", "area", "area-stacked"])
+});
+var TILE_MARGIN = { l: 48, r: 16, t: 8, b: 36 };
+var MAX_POINTS = 2e3;
+function normalizeChartData(data) {
+  if (data == null) return null;
+  let d = data;
+  if (Array.isArray(d)) d = { series: d };
+  else if (typeof d !== "object") return null;
+  else if (!Array.isArray(d.series)) {
+    const single = ["x", "y", "labels", "values"].some((k) => Array.isArray(d[k]));
+    d = { ...d, series: single ? [d] : [] };
+  }
+  const series = d.series.filter((s) => s && pointCount(s) > 0);
+  if (!series.length) return null;
+  return {
+    series,
+    markers: Array.isArray(d.markers) ? d.markers : [],
+    referenceLines: Array.isArray(d.referenceLines) ? d.referenceLines : [],
+    xKind: d.xKind || null,
+    note: typeof d.note === "string" ? d.note : ""
+  };
+}
+function pointCount(s) {
+  for (const k of ["y", "values", "x", "labels"]) {
+    if (Array.isArray(s[k])) return s[k].length;
+  }
+  return 0;
+}
+var ChartTile = class extends FigureTile {
+  static TYPE = "flexdesk.chart";
+  static TITLE = "Chart";
+  static ICON = "insert_chart";
+  static DESCRIPTION = "Line, bar, area, pie, donut, funnel or histogram over series you supply.";
+  static DEFAULT_SIZE = { w: 6, h: 4 };
+  static SIZE_CONSTRAINTS = { minW: 3, minH: 3, maxW: 12, maxH: 10 };
+  /** Pure and static-only — it runs inside `TileBase`'s constructor. */
+  getDefaultConfig() {
+    return {
+      title: "",
+      chart_type: "line",
+      unit: "",
+      legend: "bottom",
+      x_title: "",
+      y_title: "",
+      y_scale: "linear",
+      y_min: null,
+      y_max: null,
+      show_markers: false,
+      max_points: MAX_POINTS
+    };
+  }
+  getConfigSchema() {
+    return {
+      fields: [
+        { key: "title", type: "text", label: "Tile title" },
+        {
+          key: "chart_type",
+          type: "select",
+          label: "Chart type",
+          options: CHART_TILE_TYPES.map((o) => ({ ...o }))
+        },
+        {
+          key: "unit",
+          type: "text",
+          label: "Unit",
+          description: 'Shown with the value axis title, e.g. "pts" or "h".'
+        },
+        {
+          key: "legend",
+          type: "select",
+          label: "Legend",
+          visibleWhen: { field: "chart_type", in: [...READS.legend] },
+          options: [
+            { value: "bottom", label: "Below" },
+            { value: "top", label: "Above" },
+            { value: "right", label: "Right" },
+            { value: "left", label: "Left" },
+            { value: "hidden", label: "None" }
+          ]
+        },
+        {
+          key: "x_title",
+          type: "text",
+          label: "X axis title",
+          visibleWhen: { field: "chart_type", in: [...READS.axis_titles] }
+        },
+        {
+          key: "y_title",
+          type: "text",
+          label: "Y axis title",
+          visibleWhen: { field: "chart_type", in: [...READS.axis_titles] }
+        },
+        {
+          key: "y_scale",
+          type: "select",
+          label: "Y scale",
+          visibleWhen: { field: "chart_type", in: [...READS.y_scale] },
+          options: [{ value: "linear", label: "Linear" }, { value: "log", label: "Logarithmic" }]
+        },
+        {
+          key: "y_min",
+          type: "number",
+          label: "Y minimum",
+          visibleWhen: { field: "chart_type", in: [...READS.y_range] }
+        },
+        {
+          key: "y_max",
+          type: "number",
+          label: "Y maximum",
+          visibleWhen: { field: "chart_type", in: [...READS.y_range] }
+        },
+        {
+          key: "show_markers",
+          type: "checkbox",
+          label: "Show point markers",
+          visibleWhen: { field: "chart_type", in: [...READS.show_markers] }
+        }
+      ]
+    };
+  }
+  mount(container) {
+    super.mount(container);
+    applyTitle(this);
+  }
   /**
-   * Turn normalised data into `{traces, layout}`, or put the tile in the
-   * empty state and answer `null`.
+   * `null` here is "the grid has no data", not "clear this tile": TileGrid's
+   * config save calls `update(grid.data, newConfig)`, and a grid whose tiles
+   * are fed one by one through `setData` has `grid.data === null` — passed on,
+   * it would drop the tile's series and skip the redraw in the new chart type.
+   * `setData(null)` is how a tile is cleared.
    */
+  update(data, config) {
+    super.update(data === null ? void 0 : data, config);
+    if (config) applyTitle(this);
+  }
+  /** `null` (the empty state) when there is nothing to draw. */
+  figure(data) {
+    const norm = normalizeChartData(data);
+    if (!norm) return null;
+    return { ...this._plan(norm), note: norm.note };
+  }
+  /** Download PNG alone — see the header. */
+  menuItems() {
+    return this._figureMenuItems();
+  }
+  /** The figure, and the note on its own line under it. */
+  _figureContent(plotEl, fig) {
+    plotEl.classList.add("fd-chart-tile");
+    if (!fig.note) return [plotEl];
+    const note = document.createElement("div");
+    note.className = "fd-chart-tile__note";
+    note.setAttribute("role", "note");
+    note.textContent = fig.note;
+    note.title = fig.note;
+    return [plotEl, note];
+  }
+  /** Turn normalised data into `{traces, layout}`. */
   _plan(norm) {
     const type = this.config.chart_type || "line";
     const { series } = norm;
@@ -1350,35 +1474,6 @@ var ChartTile = class extends TileBase {
     }
     return out;
   }
-  async _downloadPng() {
-    if (!this._plotEl || !this._drawn) return;
-    try {
-      const P = await ensurePlotly();
-      const uri = await P.toImage(this._plotEl, { format: "png", scale: 2 });
-      const filename = `${slug(this.config.title || this.constructor.TITLE)}.png`;
-      const dialogs = this.host?.dialogs;
-      const result = dialogs ? await dialogs.saveFile({ data: uri.split(",")[1], filename, kind: "png" }) : null;
-      if (result) {
-        if (result.ok) this._notify("Download", `Chart saved to ${result.path}`, "success");
-        else if (!result.cancelled) this._notify("Download failed", result.error || "The image could not be saved", "error");
-        return;
-      }
-      const a = document.createElement("a");
-      a.href = uri;
-      a.download = filename;
-      a.click();
-    } catch (err) {
-      this._notify("Download failed", `The image could not be made: ${err?.message || err}`, "error");
-    }
-  }
-  _failed(err) {
-    if (this._disposed) return;
-    this.showError(`This chart could not be drawn: ${err?.message || err}`);
-    this.eventBus?.emit?.("tile:render-failed", {
-      tileId: this.id,
-      message: err?.message || String(err)
-    });
-  }
 };
 var KpiTile = class extends TileBase {
   static TYPE = "flexdesk.kpi";
@@ -1405,11 +1500,11 @@ var KpiTile = class extends TileBase {
   getConfigSchema() {
     return {
       fields: [
-        { name: "title", type: "text", label: "Tile title" },
-        { name: "label", type: "text", label: "Label" },
-        { name: "unit", type: "text", label: "Unit", help: 'Shown after the number, e.g. "pts".' },
+        { key: "title", type: "text", label: "Tile title" },
+        { key: "label", type: "text", label: "Label" },
+        { key: "unit", type: "text", label: "Unit", description: 'Shown after the number, e.g. "pts".' },
         {
-          name: "format",
+          key: "format",
           type: "select",
           label: "Format",
           options: [
@@ -1420,23 +1515,23 @@ var KpiTile = class extends TileBase {
             { value: "text", label: "Text" }
           ]
         },
-        { name: "decimals", type: "number", label: "Decimals", min: 0, max: 6 },
+        { key: "decimals", type: "number", label: "Decimals", min: 0, max: 6 },
         {
-          name: "currency",
+          key: "currency",
           type: "text",
           label: "Currency code",
-          help: "ISO 4217, e.g. EUR. Left empty, the number is shown without a symbol."
+          description: "ISO 4217, e.g. EUR. Left empty, the number is shown without a symbol."
         },
-        { name: "prefix", type: "text", label: "Prefix" },
-        { name: "suffix", type: "text", label: "Suffix" },
-        { name: "delta_relative", type: "checkbox", label: "Show the change as a percentage" },
+        { key: "prefix", type: "text", label: "Prefix" },
+        { key: "suffix", type: "text", label: "Suffix" },
+        { key: "delta_relative", type: "checkbox", label: "Show the change as a percentage" },
         {
-          name: "invert_delta",
+          key: "invert_delta",
           type: "checkbox",
           label: "A fall is good",
-          help: "For a cost, a queue length or a latency: a smaller number is the better one."
+          description: "For a cost, a queue length or a latency: a smaller number is the better one."
         },
-        { name: "foot", type: "text", label: "Caption" }
+        { key: "foot", type: "text", label: "Caption" }
       ]
     };
   }
@@ -1487,11 +1582,11 @@ var KpiTile = class extends TileBase {
     if (delta) box.append(delta);
     const foot = [this.config.foot, d.note].filter(Boolean).join(" \xB7 ");
     if (foot) {
-      const el = document.createElement("div");
-      el.className = "fd-kpi__foot";
-      el.textContent = foot;
-      el.title = foot;
-      box.append(el);
+      const el3 = document.createElement("div");
+      el3.className = "fd-kpi__foot";
+      el3.textContent = foot;
+      el3.title = foot;
+      box.append(el3);
     }
     content.append(box);
   }
@@ -1503,19 +1598,19 @@ var KpiTile = class extends TileBase {
     const reference = Number(rawReference);
     if (!Number.isFinite(value) || !Number.isFinite(reference)) return null;
     const change = value - reference;
-    const el = document.createElement("div");
-    el.className = "fd-kpi__delta";
-    if (change > 0) el.classList.add(this.config.invert_delta ? "fd-kpi__delta--down" : "fd-kpi__delta--up");
-    else if (change < 0) el.classList.add(this.config.invert_delta ? "fd-kpi__delta--up" : "fd-kpi__delta--down");
+    const el3 = document.createElement("div");
+    el3.className = "fd-kpi__delta";
+    if (change > 0) el3.classList.add(this.config.invert_delta ? "fd-kpi__delta--down" : "fd-kpi__delta--up");
+    else if (change < 0) el3.classList.add(this.config.invert_delta ? "fd-kpi__delta--up" : "fd-kpi__delta--down");
     const arrow = change > 0 ? "\u25B2" : change < 0 ? "\u25BC" : "\u2013";
     const magnitude = this.config.delta_relative ? reference === 0 ? null : formatValue(Math.abs(change / reference), {
       format: "percent",
       decimals: this.config.decimals ?? 1
     }) : this._format(Math.abs(change), false);
     const sign = change > 0 ? "+" : change < 0 ? "-" : "";
-    el.textContent = magnitude === null ? `${arrow} \u2014` : `${arrow} ${sign}${magnitude}`;
-    el.title = `Compared with ${this._format(reference, false)}`;
-    return el;
+    el3.textContent = magnitude === null ? `${arrow} \u2014` : `${arrow} ${sign}${magnitude}`;
+    el3.title = `Compared with ${this._format(reference, false)}`;
+    return el3;
   }
   _format(value, withAffixes) {
     const format = this.config.format || "number";
@@ -1616,9 +1711,6 @@ function formatValue(value, {
   })();
   return `${prefix || ""}${body}${suffix || ""}`;
 }
-function slug(text) {
-  return String(text).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "chart";
-}
 
 // src/tiles/layout_persistence.js
 var LAYOUT_VERSION = 3;
@@ -2139,6 +2231,739 @@ function getLayoutPersistence() {
   return instance;
 }
 
+// src/tiles/list_tiles.js
+init_tile_registry();
+var TONES = /* @__PURE__ */ new Set(["danger", "warning", "ok", "muted"]);
+function normalize(data, key) {
+  if (data == null) return null;
+  const d = Array.isArray(data) ? { [key]: data } : data;
+  if (typeof d !== "object" || !Array.isArray(d[key])) return null;
+  const items = d[key].filter((r) => r && typeof r === "object" && r.key != null);
+  const total = Number.isFinite(Number(d.total)) && d.total !== null && d.total !== "" ? Number(d.total) : items.length;
+  return {
+    items,
+    total: Math.max(total, items.length),
+    note: typeof d.note === "string" ? d.note : "",
+    empty: typeof d.empty === "string" ? d.empty : "",
+    action: d.action && typeof d.action === "object" && d.action.label ? d.action : null
+  };
+}
+var normalizeListData = (data) => normalize(data, "rows");
+var normalizePeopleData = (data) => normalize(data, "people");
+function el(tag, cls, text) {
+  const e = document.createElement(tag);
+  if (cls) e.className = cls;
+  if (text != null) e.textContent = String(text);
+  return e;
+}
+function glyph(name, cls = "") {
+  const g = el("span", `material-symbols-outlined${cls ? ` ${cls}` : ""}`, name);
+  g.setAttribute("aria-hidden", "true");
+  return g;
+}
+var toneClass = (base, tone) => TONES.has(tone) ? ` ${base}--${tone}` : "";
+var RowsTile = class extends TileBase {
+  static _KEY = "rows";
+  constructor(options = {}) {
+    super(options);
+    this.onRowActivate = typeof options.onRowActivate === "function" ? options.onRowActivate : null;
+    this.rowMenu = typeof options.rowMenu === "function" ? options.rowMenu : null;
+    this.onRowMenuAction = typeof options.onRowMenuAction === "function" ? options.onRowMenuAction : null;
+    this.onAction = typeof options.onAction === "function" ? options.onAction : null;
+    this.rowsDraggable = options.rowsDraggable === true;
+    this._items = /* @__PURE__ */ new Map();
+    this._onClick = (e) => this._click(e);
+    this._onKey = (e) => this._key(e);
+    this._onMenu = (e) => this._menu(e);
+  }
+  /** Pure and static-only — it runs inside `TileBase`'s constructor. */
+  getDefaultConfig() {
+    return { title: "", empty_text: "", max_rows: 0 };
+  }
+  getConfigSchema() {
+    return {
+      fields: [
+        { key: "title", type: "text", label: "Tile title" },
+        {
+          key: "empty_text",
+          type: "text",
+          label: "When there is nothing",
+          description: 'What the tile says when the list is empty, e.g. "Nothing is late."'
+        },
+        {
+          key: "max_rows",
+          type: "number",
+          label: "Rows at most",
+          min: 0,
+          description: "0 shows them all; the tile scrolls."
+        }
+      ]
+    };
+  }
+  mount(container) {
+    super.mount(container);
+    applyTitle2(this);
+    const c = this.contentElement;
+    if (!c) return;
+    c.addEventListener("click", this._onClick);
+    c.addEventListener("keydown", this._onKey);
+    c.addEventListener("contextmenu", this._onMenu);
+  }
+  /** `null` is "the grid has no data" — see `ChartTile.update`. */
+  update(data, config) {
+    if (this._disposed) return;
+    super.update(data === null ? void 0 : data, config);
+    if (config) applyTitle2(this);
+  }
+  /** Hand this tile its rows; null is the empty state. */
+  setData(data) {
+    if (this._disposed) return;
+    this.data = data ?? null;
+    if (this.contentElement) this.render(this.data);
+  }
+  /** The item drawn under `key`, or null. */
+  itemFor(key) {
+    return this._items.get(String(key)) ?? null;
+  }
+  /** The element of the item drawn under `key`, or null. */
+  rowElement(key) {
+    const want = String(key);
+    return [...this.contentElement?.querySelectorAll("[data-row-key]") || []].find((r) => r.dataset.rowKey === want) || null;
+  }
+  render(data) {
+    const content = this.contentElement;
+    if (!content) return;
+    const norm = normalize(data, this.constructor._KEY);
+    this._items.clear();
+    if (!norm) {
+      this.showEmpty("Nothing to show.");
+      return;
+    }
+    const max = Math.max(0, Math.floor(Number(this.config.max_rows) || 0));
+    const shown = max ? norm.items.slice(0, max) : norm.items;
+    const box = el("div", `fd-list-tile fd-list-tile--${this.constructor._KEY}`);
+    const bar = el("div", "fd-list-tile__bar");
+    const count = el(
+      "span",
+      "fd-list-tile__count",
+      shown.length < norm.total ? `${shown.length} of ${norm.total}` : String(norm.total)
+    );
+    count.title = `${norm.total} in all`;
+    bar.append(count, el("span", "fd-list-tile__spacer"));
+    if (norm.action) {
+      const b = el("button", "fd-list-tile__action");
+      b.type = "button";
+      b.dataset.listAction = "action";
+      if (norm.action.icon) b.append(glyph(norm.action.icon));
+      b.append(el("span", null, norm.action.label));
+      bar.append(b);
+    }
+    box.append(bar);
+    const list = el("div", "fd-list-tile__rows");
+    list.setAttribute("role", "list");
+    if (!shown.length) {
+      list.append(el("div", "fd-list-tile__empty", norm.empty || this.config.empty_text || "Nothing here."));
+    }
+    for (const item of shown) {
+      const key = String(item.key);
+      if (this._items.has(key)) continue;
+      this._items.set(key, item);
+      const row = this._renderItem(item);
+      row.classList.add("fd-list-tile__row");
+      row.dataset.rowKey = key;
+      row.setAttribute("role", "button");
+      row.tabIndex = 0;
+      if (this.rowsDraggable) row.draggable = true;
+      const wrap = el("div", "fd-list-tile__item");
+      wrap.setAttribute("role", "listitem");
+      wrap.append(row);
+      list.append(wrap);
+    }
+    box.append(list);
+    if (norm.note) {
+      const note = el("div", "fd-list-tile__note", norm.note);
+      note.setAttribute("role", "note");
+      note.title = norm.note;
+      box.append(note);
+    }
+    content.replaceChildren(box);
+  }
+  /** One item's row element. @abstract */
+  _renderItem(_item) {
+    return el("div");
+  }
+  // ── input ───────────────────────────────────────────────────────────
+  _rowOf(target) {
+    const row = target?.closest?.("[data-row-key]");
+    return row && this.contentElement?.contains(row) ? row : null;
+  }
+  _click(e) {
+    if (e.target?.closest?.("[data-list-action]")) {
+      this._call(this.onAction, { tile: this, event: e });
+      return;
+    }
+    const row = this._rowOf(e.target);
+    if (row) this._activate(row, e);
+  }
+  _activate(rowEl, event) {
+    const row = this.itemFor(rowEl.dataset.rowKey);
+    if (row) this._call(this.onRowActivate, { row, event, tile: this });
+  }
+  _key(e) {
+    const rowEl = this._rowOf(e.target);
+    if (!rowEl) return;
+    if (e.key === "ContextMenu" || e.key === "F10" && e.shiftKey) {
+      const r = rowEl.getBoundingClientRect();
+      if (this._openMenu(rowEl, e, r.left + 16, r.bottom)) e.preventDefault();
+      return;
+    }
+    if ((e.key === "Enter" || e.key === " ") && !e.altKey) {
+      e.preventDefault();
+      this._activate(rowEl, e);
+      return;
+    }
+    const rows = [...this.contentElement.querySelectorAll("[data-row-key]")];
+    const i = rows.indexOf(rowEl);
+    const to = { ArrowDown: i + 1, ArrowUp: i - 1, Home: 0, End: rows.length - 1 }[e.key];
+    if (to === void 0 || !rows[to]) return;
+    e.preventDefault();
+    rows[to].focus();
+  }
+  _menu(e) {
+    const rowEl = this._rowOf(e.target);
+    if (rowEl && this._openMenu(rowEl, e, e.clientX, e.clientY)) e.preventDefault();
+  }
+  /** Show the row's menu, if it has one. → whether it did. */
+  _openMenu(rowEl, event, x, y) {
+    const row = this.itemFor(rowEl.dataset.rowKey);
+    if (!row || typeof this.rowMenu !== "function") return false;
+    let items = null;
+    try {
+      items = this.rowMenu({ row, event, tile: this });
+    } catch (err) {
+      console.error(`[${this.constructor.name}] rowMenu threw:`, err);
+      return false;
+    }
+    if (!Array.isArray(items) || !items.length) return false;
+    showContextMenu(x, y, items, (action) => this._call(this.onRowMenuAction, { action, row, tile: this }));
+    return true;
+  }
+  /** A hook, called so that one that throws is reported and the tile goes on. */
+  _call(fn, arg) {
+    if (typeof fn !== "function") return;
+    try {
+      fn(arg);
+    } catch (err) {
+      console.error(`[${this.constructor.name}] a callback threw:`, err);
+    }
+  }
+  dispose() {
+    const c = this.contentElement;
+    if (c) {
+      c.removeEventListener("click", this._onClick);
+      c.removeEventListener("keydown", this._onKey);
+      c.removeEventListener("contextmenu", this._onMenu);
+    }
+    this._items.clear();
+    super.dispose();
+  }
+};
+var ListTile = class extends RowsTile {
+  static TYPE = "flexdesk.list";
+  static TITLE = "List";
+  static ICON = "list";
+  static DESCRIPTION = "Rows you supply, with a count, a click and a right-click menu per row.";
+  static DEFAULT_SIZE = { w: 6, h: 4 };
+  static SIZE_CONSTRAINTS = { minW: 3, minH: 2, maxW: 12, maxH: 12 };
+  static _KEY = "rows";
+  _renderItem(r) {
+    const row = el("div", r.className ? String(r.className) : null);
+    if (r.icon) {
+      const g = glyph(r.icon, "fd-list-tile__icon");
+      if (r.iconTitle) {
+        g.title = r.iconTitle;
+        g.removeAttribute("aria-hidden");
+      }
+      row.append(g);
+    }
+    if (r.lead != null && r.lead !== "") row.append(el("span", "fd-list-tile__lead", r.lead));
+    const title = el("span", "fd-list-tile__title", r.title ?? "");
+    title.title = r.tip || String(r.title ?? "");
+    row.append(title);
+    for (const c of Array.isArray(r.cells) ? r.cells : []) {
+      if (!c) continue;
+      const cell = el("span", `fd-list-tile__cell${toneClass("fd-list-tile__cell", c.tone)}${c.className ? ` ${c.className}` : ""}`);
+      if (c.icon) cell.append(glyph(c.icon));
+      if (c.text != null && c.text !== "") cell.append(document.createTextNode(String(c.text)));
+      if (c.title) cell.title = c.title;
+      row.append(cell);
+    }
+    return row;
+  }
+};
+var PeopleTile = class extends RowsTile {
+  static TYPE = "flexdesk.people";
+  static TITLE = "People";
+  static ICON = "groups";
+  static DESCRIPTION = "One row per person, with how much is on them.";
+  static DEFAULT_SIZE = { w: 6, h: 4 };
+  static SIZE_CONSTRAINTS = { minW: 3, minH: 2, maxW: 12, maxH: 12 };
+  static _KEY = "people";
+  getDefaultConfig() {
+    return { ...super.getDefaultConfig(), count_label: "open" };
+  }
+  getConfigSchema() {
+    const { fields } = super.getConfigSchema();
+    return { fields: [...fields, {
+      key: "count_label",
+      type: "text",
+      label: "Count reads",
+      description: `After each person's number, e.g. "open" for "3 open".`
+    }] };
+  }
+  _renderItem(p) {
+    const row = el("div", "fd-people-tile__row");
+    row.append(glyph(p.icon || (p.muted ? "person_off" : "person"), "fd-list-tile__icon"));
+    row.append(el("span", `fd-people-tile__name${p.muted ? " fd-people-tile__name--muted" : ""}`, p.name ?? p.key));
+    const pills = el("span", "fd-people-tile__pills");
+    for (const pill of Array.isArray(p.pills) ? p.pills : []) {
+      if (!pill?.text) continue;
+      const s = el("span", `fd-people-tile__pill${toneClass("fd-people-tile__pill", pill.tone)}`, pill.text);
+      if (pill.title) s.title = pill.title;
+      pills.append(s);
+    }
+    row.append(pills);
+    const label = p.countLabel ?? this.config.count_label ?? "";
+    row.append(el("span", "fd-people-tile__count", `${Number(p.count) || 0}${label ? ` ${label}` : ""}`));
+    if (p.title) row.title = p.title;
+    return row;
+  }
+};
+function groupByPerson(items, personOf) {
+  const by = /* @__PURE__ */ new Map();
+  for (const item of Array.isArray(items) ? items : []) {
+    const who = String(personOf(item) || "");
+    if (!by.has(who)) by.set(who, { key: who, items: [] });
+    by.get(who).items.push(item);
+  }
+  return [...by.values()].sort((a, b) => b.items.length - a.items.length || (a.key === "") - (b.key === "") || a.key.localeCompare(b.key));
+}
+function registerListTiles() {
+  for (const Tile of [ListTile, PeopleTile]) {
+    if (getWidget(Tile.TYPE) !== Tile) registerWidget(Tile);
+  }
+}
+function applyTitle2(tile) {
+  tile.setTitle(tile.config.title || tile.constructor.TITLE);
+}
+
+// src/tiles/scope_picker.js
+function createScopePicker({ options = [], value, label = "Scope", onChange } = {}) {
+  const opts = options.filter((o) => o && o.value != null).map((o) => ({ ...o, value: String(o.value) }));
+  const known = (v) => opts.some((o) => o.value === String(v));
+  let current = known(value) ? String(value) : opts[0]?.value ?? "";
+  const element = document.createElement("span");
+  element.className = "fd-scope-picker";
+  element.setAttribute("role", "group");
+  element.setAttribute("aria-label", label);
+  const buttons = opts.map((o) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "fd-scope-picker__btn";
+    b.dataset.scope = o.value;
+    b.textContent = o.label ?? o.value;
+    if (o.hint) b.title = o.hint;
+    element.append(b);
+    return b;
+  });
+  const paint = () => {
+    for (const b of buttons) {
+      const on = b.dataset.scope === current;
+      b.classList.toggle("fd-scope-picker__btn--on", on);
+      b.setAttribute("aria-pressed", String(on));
+    }
+  };
+  paint();
+  const onClick = (e) => {
+    const b = e.target?.closest?.("[data-scope]");
+    if (!b || !element.contains(b) || b.dataset.scope === current) return;
+    current = b.dataset.scope;
+    paint();
+    try {
+      onChange?.(current);
+    } catch (err) {
+      console.error("[ScopePicker] onChange threw:", err);
+    }
+  };
+  const onKey = (e) => {
+    const i = buttons.indexOf(e.target);
+    if (i < 0) return;
+    const to = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: buttons.length - 1 }[e.key];
+    if (to === void 0 || !buttons[to]) return;
+    e.preventDefault();
+    buttons[to].focus();
+  };
+  element.addEventListener("click", onClick);
+  element.addEventListener("keydown", onKey);
+  return {
+    element,
+    get value() {
+      return current;
+    },
+    /** Press `v` without calling `onChange` (a value restored from elsewhere). */
+    setValue(v) {
+      if (!known(v)) return;
+      current = String(v);
+      paint();
+    },
+    dispose() {
+      element.removeEventListener("click", onClick);
+      element.removeEventListener("keydown", onKey);
+      element.remove();
+    }
+  };
+}
+
+// src/tiles/tile_config_form.js
+var _seq = 0;
+var FOCUSABLE = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+function el2(tag, className, text) {
+  const n = document.createElement(tag);
+  if (className) n.className = className;
+  if (text != null) n.textContent = String(text);
+  return n;
+}
+function isVisible(field, values) {
+  const rule = field.visibleWhen;
+  if (!rule) return true;
+  const v = values[rule.field];
+  if (Array.isArray(rule.in)) return rule.in.includes(v);
+  if ("equals" in rule) return v === rule.equals;
+  return true;
+}
+var BUILT_IN = {
+  [FieldTypes.TEXT]: (field, id) => {
+    const input = el2("input", "fd-tile-config__input");
+    input.type = "text";
+    input.id = id;
+    return {
+      element: input,
+      events: ["input"],
+      read: () => input.value,
+      write: (v) => {
+        input.value = v == null ? "" : String(v);
+      }
+    };
+  },
+  [FieldTypes.NUMBER]: (field, id) => numeric(field, id, "number"),
+  [FieldTypes.RANGE]: (field, id) => numeric(field, id, "range"),
+  [FieldTypes.CHECKBOX]: (field, id) => {
+    const input = el2("input", "fd-tile-config__checkbox");
+    input.type = "checkbox";
+    input.id = id;
+    return {
+      element: input,
+      events: ["change"],
+      read: () => input.checked,
+      write: (v) => {
+        input.checked = !!v;
+      }
+    };
+  },
+  [FieldTypes.COLOR]: (field, id) => {
+    const input = el2("input", "fd-tile-config__color");
+    input.type = "color";
+    input.id = id;
+    return {
+      element: input,
+      events: ["input"],
+      read: () => input.value,
+      write: (v) => {
+        if (v) input.value = String(v);
+      }
+    };
+  },
+  [FieldTypes.SELECT]: (field, id, data) => choice(field, id, data, false),
+  [FieldTypes.MULTISELECT]: (field, id, data) => choice(field, id, data, true)
+};
+function numeric(field, id, kind) {
+  const input = el2("input", `fd-tile-config__${kind === "range" ? "range" : "input"}`);
+  input.type = kind;
+  input.id = id;
+  if (field.min != null) input.min = String(field.min);
+  if (field.max != null) input.max = String(field.max);
+  if (field.step != null) input.step = String(field.step);
+  const out = kind === "range" ? el2("output", "fd-tile-config__range-value") : null;
+  const element = out ? el2("span", "fd-tile-config__range-wrap") : input;
+  if (out) element.append(input, out);
+  return {
+    element,
+    events: ["input"],
+    // The raw text goes to `validateField`; the form turns it into a number.
+    read: () => input.value,
+    write: (v) => {
+      input.value = v == null ? "" : String(v);
+      if (out) out.textContent = input.value;
+    },
+    shown: (v) => {
+      if (out) out.textContent = v == null ? "" : String(v);
+    }
+  };
+}
+function choice(field, id, data, multiple) {
+  const select = el2("select", "fd-tile-config__select");
+  select.id = id;
+  select.multiple = multiple;
+  const options = getFieldOptions(field, data);
+  options.forEach((o) => select.append(el2("option", null, o.label ?? o.value)));
+  return {
+    element: select,
+    events: ["change"],
+    read: () => multiple ? options.filter((_, i) => select.options[i].selected).map((o) => o.value) : options[select.selectedIndex]?.value ?? null,
+    write: (v) => {
+      if (multiple) {
+        const want = Array.isArray(v) ? v : [];
+        options.forEach((o, i) => {
+          select.options[i].selected = want.includes(o.value);
+        });
+      } else {
+        select.selectedIndex = options.findIndex((o) => o.value === v);
+      }
+    }
+  };
+}
+function coerce(field, raw) {
+  if (field.type === FieldTypes.NUMBER || field.type === FieldTypes.RANGE) {
+    return raw === "" || raw == null ? null : Number(raw);
+  }
+  return raw;
+}
+function mountTileConfigForm(host, {
+  schema,
+  config = {},
+  data = null,
+  onChange = null,
+  renderers = {},
+  commitOn = "input"
+} = {}) {
+  if (!host) throw new TypeError("mountTileConfigForm: a host element is required");
+  if (commitOn !== "input" && commitOn !== "change") {
+    throw new TypeError(`mountTileConfigForm: unknown commitOn "${commitOn}"`);
+  }
+  const fields = Array.isArray(schema?.fields) ? schema.fields : [];
+  fields.forEach((f, i) => {
+    if (typeof f?.key !== "string" || !f.key) {
+      const called = typeof f?.label === "string" && f.label ? ` "${f.label}"` : "";
+      throw new TypeError(`mountTileConfigForm: field #${i + 1}${called} has no key`);
+    }
+  });
+  let values = mergeWithDefaults(config || {}, schema);
+  const unlisten = [];
+  const root = el2("div", "fd-tile-config");
+  const rows = [];
+  const showError = (r, message) => {
+    r.invalid = !!message;
+    r.error.textContent = message || "";
+    r.error.hidden = !message;
+    r.row.classList.toggle("fd-tile-config__row--invalid", !!message);
+  };
+  const applyVisibility = () => {
+    for (const r of rows) r.row.hidden = !isVisible(r.field, values);
+  };
+  const commit = (r, raw) => {
+    if (r.field.readonly) return { valid: false, error: `${r.named.label} is read-only` };
+    const result = validateField(raw, r.named);
+    if (!result.valid) {
+      showError(r, result.error);
+      return { valid: false, error: result.error };
+    }
+    showError(r, null);
+    const value = coerce(r.field, raw);
+    values = { ...values, [r.field.key]: value };
+    applyVisibility();
+    onChange?.(r.field.key, value, { ...values });
+    return { valid: true };
+  };
+  for (const field of fields) {
+    const id = `fd-tile-config-${++_seq}`;
+    const row = el2("div", `fd-tile-config__row fd-tile-config__row--${field.type}`);
+    row.setAttribute("data-field", field.key);
+    const named = { ...field, label: field.label ?? field.key };
+    const label = el2("label", "fd-tile-config__label", named.label);
+    const error = el2("div", "fd-tile-config__error");
+    error.hidden = true;
+    const r = { field, named, row, error, control: null, invalid: false, pending: null };
+    const custom = renderers?.[field.type];
+    if (typeof custom === "function") {
+      const made = custom({
+        field,
+        key: field.key,
+        value: values[field.key],
+        data,
+        readonly: !!field.readonly,
+        commit: (v) => commit(r, v)
+      });
+      const element = made instanceof HTMLElement ? made : made?.element;
+      if (!(element instanceof HTMLElement)) {
+        throw new TypeError(`mountTileConfigForm: the renderer for "${field.type}" returned no element`);
+      }
+      element.id ||= id;
+      label.htmlFor = element.id;
+      r.control = {
+        element,
+        write: made instanceof HTMLElement ? () => {
+        } : (v) => made.setValue?.(v),
+        dispose: made instanceof HTMLElement ? null : () => made.dispose?.()
+      };
+    } else {
+      const build = BUILT_IN[field.type];
+      if (!build) {
+        throw new TypeError(`mountTileConfigForm: no control for type "${field.type}" (field "${field.key}"); pass a renderer`);
+      }
+      const c = build(field, id, data);
+      label.htmlFor = id;
+      c.write(values[field.key]);
+      const input = c.element.matches("input, select") ? c.element : c.element.querySelector("input, select");
+      if (field.readonly) {
+        input.disabled = true;
+      } else {
+        const listen = (type, fn) => {
+          input.addEventListener(type, fn);
+          unlisten.push(() => input.removeEventListener(type, fn));
+        };
+        const onEdit = () => {
+          r.pending = null;
+          const raw = c.read();
+          c.shown?.(raw);
+          commit(r, raw);
+        };
+        if (commitOn === "change") {
+          listen("change", onEdit);
+          if (c.events.includes("input")) {
+            listen("input", () => {
+              r.pending = onEdit;
+              c.shown?.(c.read());
+            });
+          }
+        } else {
+          for (const type of c.events) listen(type, onEdit);
+        }
+      }
+      r.control = c;
+    }
+    if (field.type === FieldTypes.CHECKBOX) row.append(r.control.element, label);
+    else row.append(label, r.control.element);
+    if (field.description) row.append(el2("div", "fd-tile-config__help", field.description));
+    row.append(error);
+    rows.push(r);
+    root.append(row);
+  }
+  applyVisibility();
+  host.append(root);
+  return {
+    getValues: () => ({ ...values }),
+    setValues(next) {
+      values = mergeWithDefaults(next || {}, schema);
+      for (const r of rows) {
+        r.pending = null;
+        r.control.write(values[r.field.key]);
+        showError(r, null);
+      }
+      applyVisibility();
+    },
+    isValid: () => rows.every((r) => r.row.hidden || !r.invalid),
+    focusFirstInvalid() {
+      const r = rows.find((x) => !x.row.hidden && x.invalid);
+      if (!r) return false;
+      const { element } = r.control;
+      const target = element.matches(FOCUSABLE) ? element : element.querySelector(FOCUSABLE);
+      (target || element).focus();
+      return true;
+    },
+    flush() {
+      for (const r of rows) r.pending?.();
+    },
+    dispose() {
+      unlisten.splice(0).forEach((off) => off());
+      for (const r of rows) {
+        try {
+          r.control.dispose?.();
+        } catch (err) {
+          console.warn("[tile-config] a renderer dispose threw", err);
+        }
+      }
+      rows.length = 0;
+      root.remove();
+    }
+  };
+}
+function openTileConfig(eventBus, { mode = "modal", host = null, width, renderers = {}, title = "Tile settings" } = {}) {
+  if (typeof eventBus?.on !== "function") throw new TypeError("openTileConfig: an event bus with on() is required");
+  if (mode !== "modal" && mode !== "slide-out") throw new TypeError(`openTileConfig: unknown mode "${mode}"`);
+  if (mode === "slide-out" && !(host instanceof HTMLElement)) {
+    throw new TypeError("openTileConfig: a slide-out needs a host element");
+  }
+  let form = null;
+  let panel = null;
+  let modalOpen = false;
+  const drop = () => {
+    form?.flush();
+    form?.dispose();
+    form = null;
+  };
+  const show = (detail = {}) => {
+    if (modalOpen) return;
+    const heading = typeof title === "function" ? title(detail) : title;
+    const base = { schema: detail.schema, config: detail.config, data: detail.data ?? null, renderers };
+    if (mode === "slide-out") {
+      drop();
+      if (!panel) {
+        panel = new SlideOutPanel({ ...width ? { width } : {}, onClose: drop });
+        panel.mount(host);
+      }
+      const body = panel.open(heading, "tune");
+      form = mountTileConfigForm(body, {
+        ...base,
+        commitOn: "change",
+        onChange: (_k, _v, cfg) => detail.onSave?.(cfg)
+      });
+      return;
+    }
+    const content = el2("div", "fd-tile-config-host");
+    const mine = mountTileConfigForm(content, base);
+    modalOpen = true;
+    openModal({
+      title: heading,
+      icon: "tune",
+      content,
+      ...width ? { width } : {},
+      actions: [
+        { label: "Cancel", value: null },
+        // Refused while a field shows an error: its last valid value is
+        // not what the user is looking at, so saving it would be a lie.
+        { label: "Save", value: "save", primary: true, keepOpen: true, onClick: (close) => {
+          if (mine.isValid()) {
+            close("save");
+            return;
+          }
+          mine.focusFirstInvalid();
+        } }
+      ]
+    }).then((v) => {
+      modalOpen = false;
+      if (v === "save") detail.onSave?.(mine.getValues());
+      mine.dispose();
+    });
+  };
+  const sub = eventBus.on("grid:config-modal-show", show);
+  return () => {
+    sub.dispose();
+    drop();
+    panel?.dispose();
+    panel = null;
+  };
+}
+
 // src/tiles/tile_grid.js
 init_tile_registry();
 var TileGrid = class {
@@ -2157,6 +2982,9 @@ var TileGrid = class {
    * @param {{resolve: Function}} [options.dataSource] - Per-tile data provider,
    *        handed to every tile. With none, the grid is the broadcast-only grid
    *        it has always been and no tile is ever asked to load anything.
+   * @param {*} [options.scope=null] - The board's scope, a filter every tile
+   *        follows (0.16.1); see `setScope`.
+   * @param {Function} [options.onScopeChange] - `(scope)` after `setScope` changed it.
    */
   constructor({
     container,
@@ -2179,9 +3007,13 @@ var TileGrid = class {
     stateGuard = null,
     // Injected, never constructed here: the grid does not know what
     // a binding is, only that a tile may have somewhere to ask.
-    dataSource = null
+    dataSource = null,
+    scope = null,
+    onScopeChange = null
   }) {
     this.host = host;
+    this.scope = scope;
+    this._onScopeChangeCallback = onScopeChange;
     this.stateGuard = stateGuard;
     this.dataSource = dataSource;
     this.container = container;
@@ -2304,6 +3136,7 @@ var TileGrid = class {
       dataSource: this.dataSource
     });
     if (!tile) return null;
+    tile.scope = this.scope;
     const layoutEntry = {
       id: tileId,
       type,
@@ -2374,6 +3207,39 @@ var TileGrid = class {
       tile.loadData?.({ force: true });
     });
   }
+  /**
+   * THE BOARD'S SCOPE: one filter every tile follows ("Everyone", "Assigned
+   * by me", …), set from a `createScopePicker` or from anything else.
+   *
+   * The grid only carries the value; what it means is the embedder's. Every
+   * tile gets it as `tile.scope` and through `tile.onScopeChange(scope)`, the
+   * grid's `onScopeChange(scope)` is called, and a grid with a data source
+   * reloads its tiles, since their rows depend on it. The scope is not part
+   * of the layout: it is how the board is being looked at, not what is on it.
+   *
+   * @param {*} scope - Compared by JSON: setting the same scope again does nothing.
+   * @returns {boolean} whether it changed
+   */
+  setScope(scope) {
+    if (JSON.stringify(scope ?? null) === JSON.stringify(this.scope ?? null)) return false;
+    this.scope = scope ?? null;
+    this.tiles.forEach((tile) => {
+      tile.scope = this.scope;
+      try {
+        tile.onScopeChange?.(this.scope);
+      } catch (err) {
+        console.error("[TileGrid] a tile's onScopeChange threw:", err);
+      }
+    });
+    try {
+      this._onScopeChangeCallback?.(this.scope);
+    } catch (err) {
+      console.error("[TileGrid] onScopeChange threw:", err);
+    }
+    this.eventBus?.emit?.("grid:scope-changed", { scope: this.scope });
+    if (this.dataSource) this.reloadAll();
+    return true;
+  }
   /**
    * Get current layout.
    * @returns {Array} Layout array
@@ -2770,6 +3636,8 @@ var TileGrid = class {
       tileType,
       config,
       schema,
+      // What `getFieldOptions` reads for a field with dynamic options.
+      data: this.data,
       variables: this.data ? this._getVariableList() : [],
       onSave: (newConfig) => {
         const tile = this.tiles.get(tileId);
@@ -2896,12 +3764,16 @@ export {
   CHART_TILE_TYPES,
   ChartTile,
   FieldTypes,
+  FigureTile,
   KpiTile,
   LayoutPersistence,
+  ListTile,
+  PeopleTile,
   TileBase,
   TileGrid,
   TileRegistry,
   configureLayoutPersistence,
+  createScopePicker,
   createWidget,
   formatVariableLabel,
   getAllWidgetTypes,
@@ -2912,10 +3784,16 @@ export {
   getWidget,
   getWidgetCatalog,
   getWidgetMetadata,
+  groupByPerson,
   hasWidget,
   mergeWithDefaults,
+  mountTileConfigForm,
   normalizeChartData,
+  normalizeListData,
+  normalizePeopleData,
+  openTileConfig,
   registerChartTiles,
+  registerListTiles,
   registerWidget,
   setTileLogger,
   validateConfig,