@feedmepos/mf-report 5.27.54 → 5.28.0

package/dist/report-canvas-libs/fm-ui-1.js

@@ -0,0 +1,904 @@
+/**
+ * FM.ui — general controls the AI may use instead of hand-writing one, delivered to the
+ * sandbox as the `fm-ui@1` lib bundle (plain JS: the frame has no framework and no network).
+ *
+ * Deliberately domain-free and param-free. Every control takes a `value` and emits
+ * `onChange`; which param it writes is the section's decision, via FM.setParams.
+ */
+;(function () {
+  "use strict"
+
+  var FM = (window.FM = window.FM || {})
+  if (FM.ui) return
+
+  var STYLE_ID = "fm-ui-style"
+  // Chrome follows the classic report filter row: a filled chip trigger, orange for the active state.
+  var CSS = [
+    ".fm-c{position:relative;display:inline-block;font:inherit;vertical-align:top}",
+    ".fm-c *{box-sizing:border-box}",
+    ".fm-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 12px;",
+    "border:1px solid transparent;border-radius:999px;background:#f2f2f7;color:#6b6b6b;",
+    "font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}",
+    ".fm-btn:hover{background:#eaeaef}",
+    ".fm-btn[aria-expanded=true]{border-color:var(--fm-signature,#ff7823);color:var(--fm-fg,#1c1c1e)}",
+    ".fm-btn .fm-caret{color:#6b6b6b;font-size:10px}",
+    ".fm-pop{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:100%;",
+    "max-height:280px;overflow:auto;padding:4px;border:1px solid var(--fm-line,#f0f0f0);",
+    "border-radius:8px;background:#fff;box-shadow:0 6px 24px rgba(28,28,30,.12)}",
+    ".fm-pop[hidden]{display:none}",
+    ".fm-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;cursor:pointer;white-space:nowrap}",
+    ".fm-opt:hover{background:#fafafa}",
+    ".fm-opt[aria-selected=true]{background:var(--fm-signature-tint,#fff3e6);color:#6b3100;font-weight:600}",
+    ".fm-opt input[type=checkbox]{accent-color:var(--fm-signature,#ff7823)}",
+    ".fm-search{width:100%;margin:2px 0 4px;padding:6px 8px;border:1px solid var(--fm-line,#f0f0f0);",
+    "border-radius:4px;font:inherit}",
+    ".fm-empty{padding:8px;color:var(--fm-muted,#6b6c70)}",
+    ".fm-seg{display:inline-flex;border:1px solid var(--fm-line,#f0f0f0);border-radius:999px;overflow:hidden}",
+    ".fm-seg button{min-height:32px;padding:6px 14px;border:0;border-right:1px solid var(--fm-line,#f0f0f0);",
+    "background:#fff;color:var(--fm-muted,#6b6c70);font:inherit;font-weight:600;cursor:pointer}",
+    ".fm-seg button:last-child{border-right:0}",
+    ".fm-seg button[aria-pressed=true]{background:var(--fm-signature,#ff7823);color:#fff}",
+    ".fm-dr-body{display:flex;gap:8px;padding:4px}",
+    ".fm-dr-presets{min-width:132px;border-right:1px solid var(--fm-line,#f0f0f0);padding-right:4px}",
+    ".fm-dr-custom{display:flex;flex-direction:column;gap:6px;padding:4px 4px 4px 0}",
+    ".fm-dr-custom label{display:flex;flex-direction:column;gap:2px;color:var(--fm-muted,#6b6c70);font-size:12px}",
+    ".fm-dr-custom input{padding:6px 8px;border:1px solid var(--fm-line,#f0f0f0);border-radius:4px;font:inherit}",
+    ".fm-dr-apply{align-self:flex-end;padding:6px 14px;border:0;border-radius:999px;",
+    "background:var(--fm-signature,#ff7823);color:#fff;font:inherit;font-weight:600;cursor:pointer}",
+    ".fm-ui-table tr.fm-row-btn{cursor:pointer}",
+    ".fm-ui-table tr.fm-row-btn:hover td{background:#fafafa}",
+    ".fm-ui-table tr.fm-row-btn[aria-selected=true] td{background:var(--fm-signature-tint,#fff3e6)}",
+    ".fm-ui-table tr.fm-row-btn:focus-visible{outline:2px solid var(--fm-signature,#ff7823);outline-offset:-2px}",
+    ".fm-dlg{position:fixed;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;",
+    "padding:24px;background:rgba(28,28,30,.4)}",
+    ".fm-dlg[hidden]{display:none}",
+    ".fm-dlg-card{position:relative;display:flex;flex-direction:column;min-width:320px;",
+    "max-width:min(720px,100%);max-height:100%;overflow:hidden;border-radius:12px;background:#fff;",
+    "box-shadow:0 12px 48px rgba(28,28,30,.24);outline:none}",
+    ".fm-dlg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;",
+    "padding:16px 20px;border-bottom:1px solid var(--fm-line,#f0f0f0)}",
+    ".fm-dlg-title{margin:0;font-size:16px;font-weight:600;color:var(--fm-fg,#1c1c1e)}",
+    ".fm-dlg-subtitle{margin:2px 0 0;font-size:12px;color:var(--fm-muted,#6b6c70)}",
+    ".fm-dlg-close{border:0;background:none;padding:4px 8px;font-size:14px;",
+    "color:var(--fm-muted,#6b6c70);cursor:pointer;border-radius:4px}",
+    ".fm-dlg-close:hover{background:#f2f2f7;color:var(--fm-fg,#1c1c1e)}",
+    ".fm-dlg-body{overflow:auto;overscroll-behavior:contain;padding:0 20px 16px}",
+    // the shell scrims busy sections; a dialog hosted inside one inherits the same treatment
+    "section[data-fm-busy] .fm-dlg-card::after{content:'';position:absolute;inset:0;",
+    "background:rgba(255,255,255,.62);pointer-events:none}"
+  ].join("")
+
+  function ensureStyle() {
+    if (document.getElementById(STYLE_ID)) return
+    var style = document.createElement("style")
+    style.id = STYLE_ID
+    style.textContent = CSS
+    document.head.appendChild(style)
+  }
+
+  function el(tag, className, text) {
+    var node = document.createElement(tag)
+    if (className) node.className = className
+    if (text !== undefined && text !== null) node.textContent = String(text)
+    return node
+  }
+
+  function resolve(target) {
+    var node = typeof target === "string" ? document.querySelector(target) : target
+    if (!node) throw new Error("FM.ui: no element for " + target)
+    return node
+  }
+
+  function normalizeOptions(options) {
+    return (options || []).map(function (option) {
+      if (option === null || typeof option !== "object") {
+        return { value: option, label: String(option) }
+      }
+      return { value: option.value, label: String(option.label != null ? option.label : option.value) }
+    })
+  }
+
+  function asArray(value) {
+    if (value === null || value === undefined) return []
+    return Array.isArray(value) ? value.slice() : [value]
+  }
+
+  /** One open popover at a time, and an outside click closes it. */
+  var openPopovers = []
+  function registerPopover(close) {
+    openPopovers.push(close)
+    return function () {
+      openPopovers = openPopovers.filter(function (entry) {
+        return entry !== close
+      })
+    }
+  }
+  document.addEventListener("click", function (event) {
+    openPopovers.slice().forEach(function (close) {
+      close(event)
+    })
+  })
+
+  function popover(root, button, panel) {
+    var open = false
+    function set(next) {
+      open = next
+      panel.hidden = !open
+      button.setAttribute("aria-expanded", String(open))
+    }
+    button.addEventListener("click", function (event) {
+      event.stopPropagation()
+      set(!open)
+    })
+    panel.addEventListener("click", function (event) {
+      event.stopPropagation()
+    })
+    registerPopover(function (event) {
+      if (open && !root.contains(event.target)) set(false)
+    })
+    set(false)
+    return { close: function () { set(false) }, isOpen: function () { return open } }
+  }
+
+  // --- dropdown ------------------------------------------------------------
+
+  /**
+   * Single or multi select. `value` is one value, or an array when `multiple`.
+   * Multi-select fires onChange on close/Apply, not per click.
+   */
+  function dropdown(target, options) {
+    ensureStyle()
+    var host = resolve(target)
+    var config = options || {}
+    var items = normalizeOptions(config.options)
+    var multiple = !!config.multiple
+    var searchable = config.searchable === undefined ? items.length > 8 : !!config.searchable
+    var selected = multiple ? asArray(config.value) : config.value
+    var filter = ""
+
+    var root = el("div", "fm-c")
+    var button = el("button", "fm-btn")
+    var label = el("span")
+    var caret = el("span", "fm-caret", "▾")
+    button.appendChild(label)
+    button.appendChild(caret)
+    var panel = el("div", "fm-pop")
+    panel.hidden = true
+    var search = el("input", "fm-search")
+    search.type = "search"
+    search.placeholder = "Search"
+    var list = el("div")
+    if (searchable) panel.appendChild(search)
+    panel.appendChild(list)
+    root.appendChild(button)
+    root.appendChild(panel)
+    host.innerHTML = ""
+    host.appendChild(root)
+
+    function isSelected(value) {
+      return multiple ? selected.indexOf(value) >= 0 : selected === value
+    }
+
+    function summary() {
+      if (multiple) {
+        if (selected.length === 0) return config.placeholder || "None"
+        if (selected.length === items.length && items.length > 0) return config.allLabel || "All"
+        if (selected.length === 1) {
+          var one = items.filter(function (item) { return item.value === selected[0] })[0]
+          return one ? one.label : String(selected[0])
+        }
+        return selected.length + " selected"
+      }
+      var match = items.filter(function (item) { return item.value === selected })[0]
+      return match ? match.label : config.placeholder || "Select"
+    }
+
+    function emit() {
+      if (typeof config.onChange === "function") {
+        config.onChange(multiple ? selected.slice() : selected)
+      }
+    }
+
+    function renderList() {
+      list.innerHTML = ""
+      var needle = filter.toLowerCase()
+      var visible = items.filter(function (item) {
+        return !needle || item.label.toLowerCase().indexOf(needle) >= 0
+      })
+      if (multiple && items.length > 1 && visible.length > 0) {
+        // Select all acts on what the search leaves visible, as the classic outlet picker does.
+        var shown = visible.map(function (item) { return item.value })
+        var allShownSelected = shown.length > 0 && shown.every(isSelected)
+        var all = el("div", "fm-opt", allShownSelected ? "Clear all" : "Select all")
+        all.setAttribute("aria-selected", String(allShownSelected))
+        all.addEventListener("click", function () {
+          selected = allShownSelected
+            ? selected.filter(function (value) { return shown.indexOf(value) < 0 })
+            : selected.concat(shown.filter(function (value) { return !isSelected(value) }))
+          label.textContent = summary()
+          renderList()
+          emit()
+        })
+        list.appendChild(all)
+      }
+      if (visible.length === 0) {
+        list.appendChild(el("div", "fm-empty", "No matches"))
+        return
+      }
+      visible.forEach(function (item) {
+        var option = el("div", "fm-opt")
+        option.setAttribute("role", "option")
+        option.setAttribute("aria-selected", String(isSelected(item.value)))
+        if (multiple) {
+          var box = el("input")
+          box.type = "checkbox"
+          box.checked = isSelected(item.value)
+          box.tabIndex = -1
+          option.appendChild(box)
+        }
+        option.appendChild(el("span", null, item.label))
+        option.addEventListener("click", function () {
+          if (multiple) {
+            selected = isSelected(item.value)
+              ? selected.filter(function (value) { return value !== item.value })
+              : selected.concat([item.value])
+          } else {
+            selected = item.value
+            control.close()
+          }
+          label.textContent = summary()
+          renderList()
+          emit()
+        })
+        list.appendChild(option)
+      })
+    }
+
+    search.addEventListener("input", function () {
+      filter = search.value
+      renderList()
+    })
+
+    var control = popover(root, button, panel)
+    label.textContent = summary()
+    renderList()
+
+    return {
+      element: root,
+      getValue: function () { return multiple ? selected.slice() : selected },
+      setValue: function (next) {
+        selected = multiple ? asArray(next) : next
+        label.textContent = summary()
+        renderList()
+      },
+      setOptions: function (next) {
+        items = normalizeOptions(next)
+        label.textContent = summary()
+        renderList()
+      },
+      destroy: function () { host.innerHTML = "" }
+    }
+  }
+
+  // --- dateRange -----------------------------------------------------------
+
+  /** "YYYY-MM-DD" for an instant, read in the given IANA zone. */
+  function ymdIn(date, timezone) {
+    try {
+      return new Intl.DateTimeFormat("en-CA", {
+        timeZone: timezone,
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit"
+      }).format(date)
+    } catch (err) {
+      return date.toISOString().slice(0, 10)
+    }
+  }
+
+  /** Zone offset at an instant, in ms — the standard two-format diff. */
+  function offsetMs(date, timezone) {
+    try {
+      var local = new Date(date.toLocaleString("en-US", { timeZone: timezone }))
+      var utc = new Date(date.toLocaleString("en-US", { timeZone: "UTC" }))
+      return local.getTime() - utc.getTime()
+    } catch (err) {
+      return 0
+    }
+  }
+
+  /** Day boundary in the report's zone, as the ISO instant the host and SQL expect. */
+  function boundaryIso(ymd, timezone, endOfDay) {
+    var base = Date.parse(ymd + (endOfDay ? "T23:59:59.999Z" : "T00:00:00.000Z"))
+    var guess = new Date(base - offsetMs(new Date(base), timezone))
+    // re-read the offset at the guessed instant so DST days land on the right side
+    return new Date(base - offsetMs(guess, timezone)).toISOString()
+  }
+
+  function shiftYmd(ymd, days) {
+    var date = new Date(Date.parse(ymd + "T00:00:00.000Z"))
+    date.setUTCDate(date.getUTCDate() + days)
+    return date.toISOString().slice(0, 10)
+  }
+
+  function monthStart(ymd, monthsBack) {
+    var date = new Date(Date.parse(ymd + "T00:00:00.000Z"))
+    date.setUTCDate(1)
+    date.setUTCMonth(date.getUTCMonth() - (monthsBack || 0))
+    return date.toISOString().slice(0, 10)
+  }
+
+  function monthEnd(ymd) {
+    var date = new Date(Date.parse(ymd + "T00:00:00.000Z"))
+    date.setUTCMonth(date.getUTCMonth() + 1)
+    date.setUTCDate(0)
+    return date.toISOString().slice(0, 10)
+  }
+
+  /** Monday of the week `weeksBack` before the one holding `ymd`. */
+  function weekStart(ymd, weeksBack) {
+    var date = new Date(Date.parse(ymd + "T00:00:00.000Z"))
+    var monday = (date.getUTCDay() + 6) % 7
+    date.setUTCDate(date.getUTCDate() - monday - 7 * (weeksBack || 0))
+    return date.toISOString().slice(0, 10)
+  }
+
+  // The classic report's presets, boundaries included — a merchant comparing the two must not
+  // read the same label against a different range. "Last 7 days" excludes today, weeks start Monday.
+  var DEFAULT_PRESETS = [
+    { key: "today", label: "Today", range: function (t) { return [t, t] } },
+    { key: "yesterday", label: "Yesterday", range: function (t) { var d = shiftYmd(t, -1); return [d, d] } },
+    {
+      key: "thisWeek",
+      label: "This week",
+      range: function (t) { var s = weekStart(t, 0); return [s, shiftYmd(s, 6)] }
+    },
+    {
+      key: "lastWeek",
+      label: "Last week",
+      range: function (t) { var s = weekStart(t, 1); return [s, shiftYmd(s, 6)] }
+    },
+    { key: "last7", label: "Last 7 days", range: function (t) { return [shiftYmd(t, -7), shiftYmd(t, -1)] } },
+    { key: "thisMonth", label: "This month", range: function (t) { var s = monthStart(t, 0); return [s, monthEnd(s)] } },
+    {
+      key: "lastMonth",
+      label: "Last month",
+      range: function (t) {
+        var start = monthStart(t, 1)
+        return [start, monthEnd(start)]
+      }
+    }
+  ]
+
+  /**
+   * Preset list plus a custom range. Emits `{ from, to, preset }` with ISO instants at the
+   * report timezone's day boundaries — the section decides which params they land on.
+   */
+  function dateRange(target, options) {
+    ensureStyle()
+    var host = resolve(target)
+    var config = options || {}
+    var timezone = config.timezone || (window.env && window.env.timezone) || "UTC"
+    var presets = config.presets || DEFAULT_PRESETS
+    var todayYmd = ymdIn(new Date(), timezone)
+    var value = config.value || {}
+    var fromYmd = value.from ? ymdIn(new Date(value.from), timezone) : shiftYmd(todayYmd, -29)
+    var toYmd = value.to ? ymdIn(new Date(value.to), timezone) : todayYmd
+    var presetKey = config.preset || null
+
+    var root = el("div", "fm-c")
+    var button = el("button", "fm-btn")
+    var label = el("span")
+    button.appendChild(label)
+    button.appendChild(el("span", "fm-caret", "▾"))
+    var panel = el("div", "fm-pop")
+    panel.hidden = true
+    var body = el("div", "fm-dr-body")
+    var presetList = el("div", "fm-dr-presets")
+    var custom = el("div", "fm-dr-custom")
+    var fromLabel = el("label")
+    var toLabel = el("label")
+    fromLabel.appendChild(el("span", null, "From"))
+    toLabel.appendChild(el("span", null, "To"))
+    var fromInput = el("input")
+    var toInput = el("input")
+    fromInput.type = "date"
+    toInput.type = "date"
+    fromLabel.appendChild(fromInput)
+    toLabel.appendChild(toInput)
+    var apply = el("button", "fm-dr-apply", "Apply")
+    custom.appendChild(fromLabel)
+    custom.appendChild(toLabel)
+    custom.appendChild(apply)
+    body.appendChild(presetList)
+    body.appendChild(custom)
+    panel.appendChild(body)
+    root.appendChild(button)
+    root.appendChild(panel)
+    host.innerHTML = ""
+    host.appendChild(root)
+
+    function summary() {
+      var active = presets.filter(function (preset) { return preset.key === presetKey })[0]
+      if (active) return active.label
+      return fromYmd === toYmd ? fromYmd : fromYmd + " – " + toYmd
+    }
+
+    function emit() {
+      label.textContent = summary()
+      fromInput.value = fromYmd
+      toInput.value = toYmd
+      renderPresets()
+      if (typeof config.onChange === "function") {
+        config.onChange({
+          from: boundaryIso(fromYmd, timezone, false),
+          to: boundaryIso(toYmd, timezone, true),
+          fromDate: fromYmd,
+          toDate: toYmd,
+          preset: presetKey
+        })
+      }
+    }
+
+    function renderPresets() {
+      presetList.innerHTML = ""
+      presets.forEach(function (preset) {
+        var option = el("div", "fm-opt", preset.label)
+        option.setAttribute("aria-selected", String(preset.key === presetKey))
+        option.addEventListener("click", function () {
+          var range = preset.range(ymdIn(new Date(), timezone))
+          fromYmd = range[0]
+          toYmd = range[1]
+          presetKey = preset.key
+          control.close()
+          emit()
+        })
+        presetList.appendChild(option)
+      })
+    }
+
+    apply.addEventListener("click", function () {
+      if (!fromInput.value || !toInput.value) return
+      fromYmd = fromInput.value
+      toYmd = toInput.value
+      if (fromYmd > toYmd) {
+        var swap = fromYmd
+        fromYmd = toYmd
+        toYmd = swap
+      }
+      presetKey = null
+      control.close()
+      emit()
+    })
+
+    var control = popover(root, button, panel)
+    label.textContent = summary()
+    fromInput.value = fromYmd
+    toInput.value = toYmd
+    renderPresets()
+
+    return {
+      element: root,
+      getValue: function () {
+        return {
+          from: boundaryIso(fromYmd, timezone, false),
+          to: boundaryIso(toYmd, timezone, true),
+          fromDate: fromYmd,
+          toDate: toYmd,
+          preset: presetKey
+        }
+      },
+      setValue: function (next) {
+        if (!next) return
+        if (next.from) fromYmd = ymdIn(new Date(next.from), timezone)
+        if (next.to) toYmd = ymdIn(new Date(next.to), timezone)
+        presetKey = next.preset || null
+        label.textContent = summary()
+        fromInput.value = fromYmd
+        toInput.value = toYmd
+        renderPresets()
+      },
+      destroy: function () { host.innerHTML = "" }
+    }
+  }
+
+  // --- segmented -----------------------------------------------------------
+
+  /** Inline toggle group; for small option sets where a popover is overkill. */
+  function segmented(target, options) {
+    ensureStyle()
+    var host = resolve(target)
+    var config = options || {}
+    var items = normalizeOptions(config.items || config.options)
+    var value = config.value
+
+    var root = el("div", "fm-seg")
+    host.innerHTML = ""
+    host.appendChild(root)
+
+    function render() {
+      root.innerHTML = ""
+      items.forEach(function (item) {
+        var button = el("button", null, item.label)
+        button.type = "button"
+        button.setAttribute("aria-pressed", String(item.value === value))
+        button.addEventListener("click", function () {
+          if (item.value === value) return
+          value = item.value
+          render()
+          if (typeof config.onChange === "function") config.onChange(value)
+        })
+        root.appendChild(button)
+      })
+    }
+
+    render()
+
+    return {
+      element: root,
+      getValue: function () { return value },
+      setValue: function (next) {
+        value = next
+        render()
+      },
+      destroy: function () { host.innerHTML = "" }
+    }
+  }
+
+  // --- table ---------------------------------------------------------------
+
+  var ROW_PX = 52 // the frame's fmr-table row height
+  var HEAD_PX = 34
+  var RESERVE_ROWS = 8 // a paged table holds this much height, so a short last page keeps the panel put
+
+  function normalizeColumns(columns) {
+    return (columns || []).map(function (column) {
+      var classes = []
+      if (column.align === "right") classes.push("fmr-num")
+      if (column.dim) classes.push("fmr-dim")
+      if (column.className) classes.push(column.className)
+      return {
+        key: column.key,
+        label: column.label === undefined ? column.key : column.label,
+        className: classes.join(" "),
+        format: typeof column.format === "function" ? column.format : null
+      }
+    })
+  }
+
+  function cellText(column, row) {
+    var value = column.key ? row[column.key] : undefined
+    if (column.format) return String(column.format(value, row))
+    return value === null || value === undefined || value === "" ? "—" : String(value)
+  }
+
+  /**
+   * Paged data table. How long a page is, is a reading decision: a report that IS one table pages
+   * large (50-100), a table under a summary takes the default 20, a tile beside a chart takes 5-10.
+   * `pageSize: 0` renders every row. Paging is a slice of the rows already held — no re-query.
+   * `onRowClick(row, index)` makes every whole row the click target — pointer, hover, keyboard,
+   * and the clicked row stays highlighted until `clearSelection()`. Pass `rowKey` (a column key
+   * or `row => key`) so the highlight is the entity, not the position — it then survives the
+   * setRows every param change triggers.
+   */
+  function table(target, options) {
+    ensureStyle()
+    var host = resolve(target)
+    var config = options || {}
+    var columns = normalizeColumns(config.columns)
+    var rows = config.rows || []
+    var pageSize = config.pageSize === undefined ? 20 : Math.max(0, Number(config.pageSize) || 0)
+    var reserveRows =
+      config.reserveRows === undefined
+        ? Math.min(pageSize || RESERVE_ROWS, RESERVE_ROWS)
+        : Math.max(0, Number(config.reserveRows) || 0)
+    var emptyText = config.empty === undefined ? "No rows." : config.empty
+    var lastHeight = 0
+    var onRowClick = typeof config.onRowClick === "function" ? config.onRowClick : null
+    var keyOf =
+      typeof config.rowKey === "function"
+        ? config.rowKey
+        : config.rowKey
+          ? function (row) { return row[config.rowKey] }
+          : null
+    var page = 0
+    var selectedIndex = -1
+    var selectedKey
+
+    /** Keyed selection is the entity, so it survives setRows; positional dies with the old rows. */
+    function isSelected(absIndex, row) {
+      if (keyOf) return selectedKey !== undefined && row && keyOf(row) === selectedKey
+      return absIndex === selectedIndex
+    }
+
+    var root = el("div", "fm-ui-table")
+    var wrap = el("div", "fmr-scroll-x")
+    var tableEl = el("table", "fmr-table")
+    var thead = el("thead")
+    var headRow = el("tr")
+    var tbody = el("tbody")
+    var foot = el("div", "fmr-tile-foot fmr-pager")
+    var note = el("span", "fmr-pager-note")
+    var buttons = el("div", "fmr-pager-btns")
+    var prev = el("button", "fmr-link", "Previous")
+    var next = el("button", "fmr-link", "Next")
+    prev.type = "button"
+    next.type = "button"
+
+    columns.forEach(function (column) {
+      headRow.appendChild(el("th", column.className, column.label))
+    })
+    thead.appendChild(headRow)
+    tableEl.appendChild(thead)
+    tableEl.appendChild(tbody)
+    wrap.appendChild(tableEl)
+    buttons.appendChild(prev)
+    buttons.appendChild(next)
+    foot.appendChild(note)
+    foot.appendChild(buttons)
+    root.appendChild(wrap)
+    root.appendChild(foot)
+    host.innerHTML = ""
+    host.appendChild(root)
+
+    function pages() {
+      if (!pageSize) return 1
+      return Math.max(1, Math.ceil(rows.length / pageSize))
+    }
+
+    function render() {
+      var total = pages()
+      if (page > total - 1) page = total - 1
+      if (page < 0) page = 0
+      var from = pageSize ? page * pageSize : 0
+      var slice = pageSize ? rows.slice(from, from + pageSize) : rows
+
+      tbody.textContent = ""
+      // empty copy of "" means the table has nothing to say yet — header only, not a blank row
+      if (!rows.length && emptyText) {
+        var blank = el("tr")
+        var cell = el("td", "fmr-empty", emptyText)
+        cell.colSpan = columns.length || 1
+        blank.appendChild(cell)
+        tbody.appendChild(blank)
+      }
+      slice.forEach(function (row, i) {
+        var tr = el("tr")
+        columns.forEach(function (column) {
+          tr.appendChild(el("td", column.className, cellText(column, row)))
+        })
+        if (onRowClick) {
+          var absIndex = from + i
+          tr.className = "fm-row-btn"
+          tr.tabIndex = 0
+          tr.setAttribute("aria-selected", String(isSelected(absIndex, row)))
+          tr.addEventListener("click", function () { select(absIndex, row) })
+          tr.addEventListener("keydown", function (event) {
+            if (event.key !== "Enter" && event.key !== " ") return
+            event.preventDefault()
+            select(absIndex, row)
+          })
+        }
+        tbody.appendChild(tr)
+      })
+
+      // reserved only while the table actually pages; a single short page keeps its ragged bottom
+      var paging = pageSize > 0 && rows.length > pageSize
+      // …and while a table is waiting on rows it holds the height it last had, so the panel
+      // around it does not collapse and grow again between two drills
+      wrap.style.minHeight =
+        !rows.length && !emptyText && lastHeight
+          ? lastHeight + "px"
+          : paging && reserveRows
+            ? HEAD_PX + reserveRows * ROW_PX + "px"
+            : ""
+      if (rows.length) lastHeight = Math.round(wrap.getBoundingClientRect().height) || lastHeight
+
+      foot.hidden = !paging
+      note.textContent = paging
+        ? from + 1 + "–" + Math.min(from + pageSize, rows.length) + " of " + rows.length
+        : ""
+      prev.disabled = page === 0
+      next.disabled = page >= total - 1
+    }
+
+    /** Highlight without a re-render, so a keyboard row keeps its focus. */
+    function paintSelection() {
+      var from = pageSize ? page * pageSize : 0
+      Array.prototype.forEach.call(tbody.children, function (tr, i) {
+        if (tr.className.indexOf("fm-row-btn") < 0) return
+        tr.setAttribute("aria-selected", String(isSelected(from + i, rows[from + i])))
+      })
+    }
+
+    function select(absIndex, row) {
+      if (keyOf) selectedKey = keyOf(row)
+      else selectedIndex = absIndex
+      paintSelection()
+      onRowClick(row, absIndex)
+    }
+
+    function go(next_) {
+      var total = pages()
+      var wanted = Math.min(Math.max(0, next_), total - 1)
+      if (wanted === page) return
+      page = wanted
+      render()
+      if (typeof config.onPage === "function") config.onPage(page)
+    }
+
+    prev.addEventListener("click", function () { go(page - 1) })
+    next.addEventListener("click", function () { go(page + 1) })
+    render()
+
+    return {
+      element: root,
+      /** new rows are new data: back to the first page; only a keyed selection survives */
+      setRows: function (nextRows) {
+        rows = nextRows || []
+        page = 0
+        selectedIndex = -1
+        render()
+      },
+      /** The empty copy is a claim about the data; a table awaiting rows has none to make. */
+      setEmpty: function (next) {
+        emptyText = next == null ? "" : String(next)
+        render()
+      },
+      clearSelection: function () {
+        selectedIndex = -1
+        selectedKey = undefined
+        paintSelection()
+      },
+      setColumns: function (nextColumns) {
+        columns = normalizeColumns(nextColumns)
+        headRow.textContent = ""
+        columns.forEach(function (column) {
+          headRow.appendChild(el("th", column.className, column.label))
+        })
+        render()
+      },
+      setPage: go,
+      getPage: function () {
+        var total = pages()
+        var from = pageSize ? page * pageSize : 0
+        return {
+          page: page,
+          pages: total,
+          pageSize: pageSize,
+          from: rows.length ? from + 1 : 0,
+          to: pageSize ? Math.min(from + pageSize, rows.length) : rows.length,
+          total: rows.length
+        }
+      },
+      destroy: function () { host.innerHTML = "" }
+    }
+  }
+
+  // --- dialog ----------------------------------------------------------------
+
+  var openDialog = null
+  var lockedAt = 0
+
+  /**
+   * The frame's scroller is the viewport (body's `overflow-y: auto` propagates to it, because the
+   * root's overflow is visible), so `overflow: hidden` on the root makes it unscrollable and the
+   * browser clamps the offset to 0 — the page jumps to the top the moment a dialog opens. Hold the
+   * offset on the body while locked, and give it back on unlock.
+   *
+   * `height: auto` is not cosmetic. Once the body is out of flow that propagation stops, so the
+   * body becomes its own scroll container — and the frame sizes it `height: 100%`, which would
+   * clip the report at one viewport and leave everything below the fold blank grey.
+   */
+  function lockScroll() {
+    lockedAt = window.scrollY || document.documentElement.scrollTop || 0
+    var body = document.body
+    body.style.height = "auto"
+    body.style.position = "fixed"
+    body.style.top = -lockedAt + "px"
+    body.style.left = "0"
+    body.style.right = "0"
+    document.documentElement.style.overflow = "hidden"
+  }
+
+  function unlockScroll() {
+    var body = document.body
+    body.style.height = ""
+    body.style.position = ""
+    body.style.top = ""
+    body.style.left = ""
+    body.style.right = ""
+    document.documentElement.style.overflow = ""
+    window.scrollTo(0, lockedAt)
+  }
+
+  /**
+   * Modal over the report — where a drill-down's detail belongs, so a click's response
+   * appears where the viewer is looking. Host the target node inside your own section:
+   * the shell's busy scrim then covers the card while the drill query runs.
+   * Render into `body`; ×, Esc and a backdrop click close it.
+   */
+  function dialog(target, options) {
+    ensureStyle()
+    var host = resolve(target)
+    var config = options || {}
+
+    var root = el("div", "fm-dlg")
+    root.hidden = true
+    root.setAttribute("role", "dialog")
+    root.setAttribute("aria-modal", "true")
+    var card = el("div", "fm-dlg-card")
+    card.tabIndex = -1
+    var head = el("div", "fm-dlg-head")
+    var titles = el("div")
+    var title = el("h2", "fm-dlg-title", config.title || "")
+    var subtitle = el("p", "fm-dlg-subtitle", config.subtitle || "")
+    subtitle.hidden = !config.subtitle
+    var closeBtn = el("button", "fm-dlg-close", "✕")
+    closeBtn.type = "button"
+    closeBtn.setAttribute("aria-label", "Close")
+    var body = el("div", "fm-dlg-body")
+    titles.appendChild(title)
+    titles.appendChild(subtitle)
+    head.appendChild(titles)
+    head.appendChild(closeBtn)
+    card.appendChild(head)
+    card.appendChild(body)
+    root.appendChild(card)
+    host.innerHTML = ""
+    host.appendChild(root)
+
+    var lastFocus = null
+    function onKey(event) {
+      if (event.key === "Escape") close()
+    }
+
+    function open() {
+      if (openDialog && openDialog !== control) openDialog.close()
+      openDialog = control
+      if (root.hidden) {
+        lastFocus = document.activeElement
+        root.hidden = false
+        lockScroll()
+        document.addEventListener("keydown", onKey)
+      }
+      card.focus()
+    }
+
+    function close() {
+      if (root.hidden) return
+      root.hidden = true
+      unlockScroll()
+      document.removeEventListener("keydown", onKey)
+      if (openDialog === control) openDialog = null
+      if (lastFocus && typeof lastFocus.focus === "function") lastFocus.focus()
+      lastFocus = null
+      if (typeof config.onClose === "function") config.onClose()
+    }
+
+    root.addEventListener("click", function (event) {
+      if (event.target === root) close()
+    })
+    closeBtn.addEventListener("click", close)
+
+    var control = {
+      element: root,
+      body: body,
+      setTitle: function (next) { title.textContent = next == null ? "" : String(next) },
+      setSubtitle: function (next) {
+        subtitle.textContent = next == null ? "" : String(next)
+        subtitle.hidden = !next
+      },
+      open: open,
+      close: close,
+      isOpen: function () { return !root.hidden },
+      destroy: function () {
+        close()
+        host.innerHTML = ""
+      }
+    }
+    return control
+  }
+
+  FM.ui = { dropdown: dropdown, dateRange: dateRange, segmented: segmented, table: table, dialog: dialog }
+})()