@feedmepos/mf-report 5.28.5 → 5.29.0

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

@@ -12,56 +12,115 @@
   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.
+  // Rebus v2 owns the look: each control renders the anatomy documented in
+  // canvas-report-builder/guide/11-rebus-ui. The .fm-* rules below are behavior and test hooks,
+  // plus the four things Rebus ships no component for: popover, option row, dialog, report table.
   var CSS = [
-    ".fm-c{position:relative;display:inline-block;font:inherit;vertical-align:top}",
+    ".fm-c{position:relative;display:inline-block;max-width:100%;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)}",
+    // the UA font on <button> beats inheritance, and a Rebus text class only sets the node it is on
+    ".fm-c button,.fm-dlg button{font-family:inherit}",
+    ".fm-c>.fm-chip{max-width:100%}",
+    ".fm-caret{flex:none;color:var(--fm-icon-muted,#6b6c70);font-size:10px;line-height:1}",
+    ".fm-chip__icon svg,.fm-search-bar__leading svg{display:block;width:var(--fm-icon-size);height:var(--fm-icon-size)}",
+    // fixed to the viewport, so a card's overflow clip never cuts it off — popover() places it by its chip;
+    // head / list / foot column: only the list scrolls, so search and Apply never leave the panel
+    ".fm-pop{position:fixed;z-index:20;min-width:248px;",
+    "display:flex;flex-direction:column;max-height:min(420px,70vh);overflow:hidden;",
+    "padding:var(--fm-spacing-8,8px);",
+    "border:var(--fm-border-width-thin,1px) solid var(--fm-border-default,#f0f0f0);",
+    "border-radius:var(--fm-radius-md,12px);background:var(--fm-surface-floating,#fff);",
+    "box-shadow:var(--fm-shadow-xl,0 8px 16px rgb(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-pop-list{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}",
+    ".fm-pop-foot{flex:none;display:flex;align-items:center;justify-content:flex-end;",
+    "gap:var(--fm-spacing-8,8px);margin-top:var(--fm-spacing-8,8px);padding-top:var(--fm-spacing-8,8px);",
+    "border-top:var(--fm-border-width-thin,1px) solid var(--fm-border-default,#f0f0f0)}",
+    // the panel is only as wide as the chip until something refuses to shrink; a wrapped Apply is that
+    ".fm-pop-foot .fm-button{flex:none}",
+    ".fm-pop-foot .fm-button__label{white-space:nowrap}",
+    ".fm-opt{display:flex;align-items:center;gap:var(--fm-spacing-8,8px);",
+    "padding:var(--fm-spacing-6,6px) var(--fm-spacing-10,10px);min-height:40px;",
+    "border-radius:var(--fm-radius-xs,4px);cursor:pointer;white-space:nowrap}",
+    ".fm-opt:hover{background:var(--fm-bg-subtle,#f6f6f8)}",
+    // a row carrying a checkbox already states its selection; only a bare row paints itself
+    ".fm-opt[aria-selected=true]:not(.fm-opt-check){background:var(--fm-action-primary-bg-subtle,#fff3e6);",
+    "color:var(--fm-text-on-brand,#b25300);font-weight:600}",
+    // the frame carries no icon registry, so the Rebus checkbox needs its tick supplied inline
+    ".fm-opt .fm-checkbox{flex:none}",
+    // the named All row is a mode, not an option: it sits above the search behind its own rule,
+    // so it never reads as a tick row with the box missing
+    ".fm-pop-all{flex:none;margin-bottom:var(--fm-spacing-8,8px);",
+    "padding-bottom:var(--fm-spacing-8,8px);",
+    "border-bottom:var(--fm-border-width-thin,1px) solid var(--fm-border-default,#f0f0f0)}",
+    ".fm-opt-all{justify-content:space-between;gap:var(--fm-spacing-12,12px)}",
+    ".fm-opt-mark{display:none;flex:none;color:var(--fm-icon-brand,#ff7823)}",
+    ".fm-opt-mark svg{display:block;width:20px;height:20px}",
+    ".fm-opt-all[aria-selected=true] .fm-opt-mark{display:inline-flex}",
+    ".fm-opt .fm-checkbox__glyph svg{display:block;width:var(--fm-icon-size);height:var(--fm-icon-size)}",
+    ".fm-pop>.fm-search-bar{flex:none;margin-bottom:var(--fm-spacing-8,8px)}",
+    ".fm-empty{padding:var(--fm-spacing-8,8px) var(--fm-spacing-10,10px);color:var(--fm-text-muted,#6b6c70)}",
+    // Rebus has no segmented control. Two bordered chips side by side read as two independent
+    // buttons; one sunken track with a raised selected pill reads as one choice, and matches the
+    // toggle the classic report puts on a chart. 28px + 4px padding = the 36px chip row height.
+    ".fm-seg{display:inline-flex;align-items:center;gap:2px;max-width:100%;flex-wrap:wrap;",
+    "padding:var(--fm-spacing-4,4px);border-radius:var(--fm-radius-sm,8px);",
+    "background:var(--fm-bg-subtle,#f6f6f8)}",
+    ".fm-seg-item{display:inline-flex;align-items:center;justify-content:center;height:28px;",
+    "padding:0 var(--fm-spacing-12,12px);border:0;border-radius:var(--fm-radius-xs,4px);",
+    "background:none;color:var(--fm-text-muted,#6b6c70);font:inherit;cursor:pointer;white-space:nowrap}",
+    ".fm-seg-item:hover:not([aria-pressed=true]):not(:disabled){color:var(--fm-text-primary,#1c1c1e)}",
+    ".fm-seg-item[aria-pressed=true]{background:var(--fm-surface-default,#fff);",
+    "color:var(--fm-text-primary,#1c1c1e);box-shadow:var(--fm-shadow-xs,0 1px 2px rgb(28 28 30/.06))}",
+    ".fm-seg-item:disabled{color:var(--fm-text-disabled,#b2b3b6);cursor:not-allowed}",
+    ".fm-seg-item:focus-visible{outline:var(--fm-border-width-regular,1.5px) solid var(--fm-border-brand,#ff7823);outline-offset:-2px}",
+    // date: presets column beside the month grid, both over one shared Cancel/Apply foot
+    ".fm-dr-body{display:flex;flex:1 1 auto;min-height:0;gap:var(--fm-spacing-8,8px)}",
+    ".fm-dr-presets{flex:none;min-width:132px;overflow:auto;",
+    "border-right:var(--fm-border-width-thin,1px) solid var(--fm-border-default,#f0f0f0);",
+    "padding-right:var(--fm-spacing-4,4px)}",
+    ".fm-cal{display:flex;flex-direction:column;gap:var(--fm-spacing-8,8px);padding:0 var(--fm-spacing-4,4px)}",
+    ".fm-cal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--fm-spacing-8,8px)}",
+    ".fm-cal-title{color:var(--fm-text-primary,#1c1c1e)}",
+    ".fm-cal-nav{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;",
+    "flex:none;padding:0;border:0;border-radius:var(--fm-radius-xs,4px);background:none;",
+    "color:var(--fm-icon-primary,#1c1c1e);cursor:pointer}",
+    ".fm-cal-nav:hover{background:var(--fm-bg-subtle,#f6f6f8)}",
+    ".fm-cal-nav svg{display:block;width:16px;height:16px}",
+    ".fm-cal-grid{display:grid;grid-template-columns:repeat(7,32px)}",
+    ".fm-cal-dow{display:flex;align-items:center;justify-content:center;height:28px;",
+    "color:var(--fm-text-muted,#6b6c70)}",
+    // the band is the cell and the endpoint is the button, so a range reads as one continuous run
+    ".fm-cal-cell{display:flex;align-items:center;justify-content:center;width:32px;height:32px}",
+    ".fm-cal-cell[data-in-range=true]{background:var(--fm-action-primary-bg-subtle,#fff3e6)}",
+    ".fm-cal-cell[data-edge=start]{border-radius:var(--fm-radius-full,999px) 0 0 var(--fm-radius-full,999px)}",
+    ".fm-cal-cell[data-edge=end]{border-radius:0 var(--fm-radius-full,999px) var(--fm-radius-full,999px) 0}",
+    ".fm-cal-cell[data-edge=both]{border-radius:var(--fm-radius-full,999px)}",
+    ".fm-cal-day{display:flex;align-items:center;justify-content:center;width:32px;height:32px;",
+    "padding:0;border:0;border-radius:var(--fm-radius-full,999px);background:none;font:inherit;",
+    "color:var(--fm-text-primary,#1c1c1e);cursor:pointer}",
+    ".fm-cal-day:hover:not([data-selected=true]){background:var(--fm-bg-subtle,#f6f6f8)}",
+    ".fm-cal-day[data-outside=true]{color:var(--fm-text-disabled,#b2b3b6)}",
+    ".fm-cal-day[data-today=true]:not([data-selected=true]){",
+    "box-shadow:inset 0 0 0 var(--fm-border-width-regular,1.5px) var(--fm-border-brand,#ff7823)}",
+    ".fm-cal-day[data-selected=true]{background:var(--fm-action-primary-bg,#ff7823);",
+    "color:var(--fm-text-inverse,#fff);font-weight:600}",
+    // a clickable row is `fmr-row-btn` in the frame's fmr-table rules, the same look a
+    // hand-written table gets; `fm-row-btn` stays as this table's own hook
     ".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)}",
+    "padding:24px;background:var(--fm-overlay-scrim-2,rgb(18 18 18/.48))}",
     ".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}",
+    "width:min(720px,100%);max-height:100%;overflow:hidden;border-radius:var(--fm-radius-md,12px);",
+    "background:var(--fm-surface-floating,#fff);box-shadow:var(--fm-shadow-2xl,0 12px 24px rgb(28 28 30/.14));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)}",
+    "padding:16px 20px;border-bottom:var(--fm-border-width-thin,1px) solid var(--fm-border-default,#f0f0f0)}",
+    ".fm-dlg-title{margin:0;font-size:16px;font-weight:600;color:var(--fm-text-primary,#1c1c1e)}",
+    ".fm-dlg-subtitle{margin:2px 0 0;font-size:12px;color:var(--fm-text-muted,#6b6c70)}",
+    ".fm-dlg-close{border:0;background:none;padding:0 6px;font-size:14px;",
+    "min-width:28px;min-height:28px;display:inline-flex;align-items:center;justify-content:center;",
+    "color:var(--fm-icon-muted,#6b6c70);cursor:pointer;border-radius:var(--fm-radius-xs,4px)}",
+    ".fm-dlg-close:hover{background:var(--fm-bg-subtle,#f6f6f8);color:var(--fm-icon-primary,#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;",
@@ -83,6 +142,86 @@
     return node
   }
 
+  var SVG_NS = "http://www.w3.org/2000/svg"
+
+  // Rebus draws every glyph with FmIcon, which the frame has no registry for, and the CSP
+  // (`font-src data:`) rules an icon font out — so the handful the controls need are drawn here.
+  var ICONS = {
+    calendar:
+      "M6.5 2.5v3|M13.5 2.5v3|M3.25 8.25h13.5|M4.75 4.5h10.5a1.5 1.5 0 0 1 1.5 1.5v10a1.5 1.5 0 0 1-1.5 1.5H4.75a1.5 1.5 0 0 1-1.5-1.5V6a1.5 1.5 0 0 1 1.5-1.5z",
+    store:
+      "M3.5 8.5V16a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V8.5|M2.75 8.5 4.2 4.1a1 1 0 0 1 .95-.6h9.7a1 1 0 0 1 .95.6L17.25 8.5|M2.75 8.5h14.5",
+    search: "M9 15.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13z|M13.8 13.8 17.5 17.5",
+    chevronLeft: "M12.5 4.5 7 10l5.5 5.5",
+    chevronRight: "M7.5 4.5 13 10l-5.5 5.5",
+    check: "M4.8 10.4 8.3 13.9 15.2 6.6",
+    minus: "M5.2 10h9.6"
+  }
+
+  /** A registry name, or raw path data; `|` separates subpaths. */
+  function icon(name, width) {
+    var svg = document.createElementNS(SVG_NS, "svg")
+    svg.setAttribute("viewBox", "0 0 20 20")
+    svg.setAttribute("fill", "none")
+    svg.setAttribute("aria-hidden", "true")
+    ;(ICONS[name] || name).split("|").forEach(function (segment) {
+      var path = document.createElementNS(SVG_NS, "path")
+      path.setAttribute("d", segment)
+      path.setAttribute("stroke", "currentColor")
+      path.setAttribute("stroke-width", String(width || 1.6))
+      path.setAttribute("stroke-linecap", "round")
+      path.setAttribute("stroke-linejoin", "round")
+      svg.appendChild(path)
+    })
+    return svg
+  }
+
+  /** The Rebus chip is the canvas trigger; only the caret is ours, since Rebus ships none. */
+  function chipTrigger(glyph) {
+    var button = el("button", "fm-chip fm-btn")
+    button.type = "button"
+    if (glyph) {
+      var slot = el("span", "fm-chip__icon")
+      slot.appendChild(icon(glyph))
+      button.appendChild(slot)
+    }
+    var label = el("span", "fm-chip__label fm-text-body-md-500")
+    button.appendChild(label)
+    button.appendChild(el("span", "fm-caret", "\u25be"))
+    return { button: button, label: label }
+  }
+
+  /** Rebus button anatomy; `hook` is the behavior class the tests address it by. */
+  function actionButton(text, variant, hook) {
+    var button = el("button", "fm-button fm-button--" + variant + " fm-button--sm fm-button--layout-default" + (hook ? " " + hook : ""))
+    button.type = "button"
+    var labels = el("span", "fm-button__labels")
+    labels.appendChild(el("span", "fm-button__label fm-text-body-md-500", text))
+    button.appendChild(labels)
+    return button
+  }
+
+  /** Rebus checkbox anatomy: the native input is the state, the box and glyph are the picture. */
+  function checkbox(checked, indeterminate) {
+    var root = el("span", "fm-checkbox fm-checkbox--md")
+    var marked = !!checked || !!indeterminate
+    if (marked) root.classList.add("fm-checkbox--selected")
+    var box = el("span", "fm-checkbox__box")
+    var input = el("input", "fm-checkbox__input")
+    input.type = "checkbox"
+    input.checked = !!checked
+    input.indeterminate = !!indeterminate
+    input.tabIndex = -1
+    box.appendChild(input)
+    if (marked) {
+      var glyph = el("span", "fm-checkbox__glyph")
+      glyph.appendChild(icon(indeterminate ? "minus" : "check", 2.2))
+      box.appendChild(glyph)
+    }
+    root.appendChild(box)
+    return root
+  }
+
   function resolve(target) {
     var node = typeof target === "string" ? document.querySelector(target) : target
     if (!node) throw new Error("FM.ui: no element for " + target)
@@ -119,12 +258,63 @@
     })
   })
 
-  function popover(root, button, panel) {
+  var POP_GAP = 4
+  var POP_EDGE = 8
+  var POP_MIN_ROOM = 120
+
+  /**
+   * Places a fixed panel by its chip: below when it fits, above when only that fits, and no taller
+   * than the room on that side, so the Apply foot stays reachable and the list scrolls instead.
+   * `natural` is the panel's unconstrained height, measured once per opening.
+   */
+  function placePanel(button, panel, natural) {
+    var chip = button.getBoundingClientRect()
+    var vw = document.documentElement.clientWidth
+    var vh = document.documentElement.clientHeight
+    var below = vh - chip.bottom - POP_GAP - POP_EDGE
+    var above = chip.top - POP_GAP - POP_EDGE
+    var up = natural > below && above > below
+    var room = Math.max(up ? above : below, POP_MIN_ROOM)
+    panel.style.maxHeight = natural > room ? room + "px" : ""
+    panel.style.minWidth = Math.max(chip.width, 248) + "px"
+    var height = panel.offsetHeight
+    var width = panel.offsetWidth
+    var top = up ? Math.max(POP_EDGE, chip.top - POP_GAP - height) : chip.bottom + POP_GAP
+    var left = Math.min(Math.max(POP_EDGE, chip.left), Math.max(POP_EDGE, vw - POP_EDGE - width))
+    panel.style.top = Math.round(top) + "px"
+    panel.style.left = Math.round(left) + "px"
+  }
+
+  function popover(root, button, panel, hooks) {
     var open = false
+    var natural = 0
+    hooks = hooks || {}
+    function place() {
+      placePanel(button, panel, natural)
+    }
+    // the panel follows its chip while the report scrolls, and re-fits when its own content changes
+    var observer = typeof ResizeObserver === "function" ? new ResizeObserver(place) : null
+    /** `onOpen` seeds the draft, `onClose` discards it — an outside click is a Cancel. */
     function set(next) {
+      var was = open
       open = next
+      if (!was && open && hooks.onOpen) hooks.onOpen()
       panel.hidden = !open
       button.setAttribute("aria-expanded", String(open))
+      button.classList.toggle("fm-chip--selected", open)
+      if (open && !was) {
+        panel.style.maxHeight = ""
+        natural = panel.offsetHeight
+        place()
+        window.addEventListener("scroll", place, true)
+        window.addEventListener("resize", place)
+        if (observer) observer.observe(panel)
+      } else if (was && !open) {
+        window.removeEventListener("scroll", place, true)
+        window.removeEventListener("resize", place)
+        if (observer) observer.disconnect()
+      }
+      if (was && !open && hooks.onClose) hooks.onClose()
     }
     button.addEventListener("click", function (event) {
       event.stopPropagation()
@@ -133,18 +323,29 @@
     panel.addEventListener("click", function (event) {
       event.stopPropagation()
     })
-    registerPopover(function (event) {
+    root.addEventListener("keydown", function (event) {
+      if (event.key !== "Escape" || !open) return
+      event.stopPropagation()
+      set(false)
+      button.focus()
+    })
+    var unregister = registerPopover(function (event) {
       if (open && !root.contains(event.target)) set(false)
     })
     set(false)
-    return { close: function () { set(false) }, isOpen: function () { return open } }
+    return {
+      close: function () { set(false) },
+      isOpen: function () { return open },
+      destroy: function () { set(false); unregister() }
+    }
   }
 
   // --- dropdown ------------------------------------------------------------
 
   /**
    * Single or multi select. `value` is one value, or an array when `multiple`.
-   * Multi-select fires onChange on close/Apply, not per click.
+   * Single commits on click; multi collects ticks and commits on Apply, as the classic
+   * outlet picker does — one query per decision, not one per tick.
    */
   function dropdown(target, options) {
     ensureStyle()
@@ -153,52 +354,97 @@
     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 committed = multiple ? asArray(config.value) : config.value
+    var draft = multiple ? committed.slice() : committed
     var filter = ""
+    /** `{ label, active, onSelect }` — a named action, never inferred from a full selection. */
+    var all = config.all || null
 
     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 trigger = chipTrigger(config.icon)
+    var button = trigger.button
+    var label = trigger.label
     var panel = el("div", "fm-pop")
     panel.hidden = true
-    var search = el("input", "fm-search")
+    var searchBar = el("div", "fm-search-bar fm-search-bar--sm")
+    var leading = el("span", "fm-search-bar__leading")
+    leading.appendChild(icon("search"))
+    searchBar.appendChild(leading)
+    var search = el("input", "fm-search fm-search-bar__control fm-text-body-md-400")
     search.type = "search"
     search.placeholder = "Search"
-    var list = el("div")
-    if (searchable) panel.appendChild(search)
+    search.setAttribute("aria-label", "Search options")
+    searchBar.appendChild(search)
+    var list = el("div", "fm-pop-list")
+    var allRow = null
+    if (all) {
+      allRow = el("div", "fm-opt fm-opt-all")
+      allRow.appendChild(el("span", null, all.label || "All"))
+      var mark = el("span", "fm-opt-mark")
+      mark.appendChild(icon("check", 2.2))
+      allRow.appendChild(mark)
+      allRow.addEventListener("click", function () {
+        control.close()
+        if (typeof all.onSelect === "function") all.onSelect()
+      })
+      var allWrap = el("div", "fm-pop-all")
+      allWrap.appendChild(allRow)
+      panel.appendChild(allWrap)
+    }
+    if (searchable) panel.appendChild(searchBar)
     panel.appendChild(list)
+    if (multiple) {
+      var foot = el("div", "fm-pop-foot")
+      var cancel = actionButton("Cancel", "ghost", "fm-dd-cancel")
+      var apply = actionButton("Apply", "primary", "fm-dd-apply")
+      cancel.addEventListener("click", function () { control.close() })
+      apply.addEventListener("click", function () {
+        committed = draft.slice()
+        control.close()
+        emit()
+      })
+      foot.appendChild(cancel)
+      foot.appendChild(apply)
+      panel.appendChild(foot)
+    }
     root.appendChild(button)
     root.appendChild(panel)
     host.innerHTML = ""
     host.appendChild(root)
 
     function isSelected(value) {
-      return multiple ? selected.indexOf(value) >= 0 : selected === value
+      return multiple ? draft.indexOf(value) >= 0 : draft === value
     }
 
     function summary() {
+      if (all && all.active) return all.label || "All"
       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])
+        if (draft.length === 0) return config.placeholder || "None"
+        // with a named All action beside it, a full list is a full list, never a claim of All
+        if (!all && draft.length === items.length && items.length > 0)
+          return config.allLabel || "All"
+        if (draft.length === 1) {
+          var one = items.filter(function (item) { return item.value === draft[0] })[0]
+          return one ? one.label : String(draft[0])
         }
-        return selected.length + " selected"
+        return draft.length + " selected"
       }
-      var match = items.filter(function (item) { return item.value === selected })[0]
+      var match = items.filter(function (item) { return item.value === draft })[0]
       return match ? match.label : config.placeholder || "Select"
     }
 
     function emit() {
       if (typeof config.onChange === "function") {
-        config.onChange(multiple ? selected.slice() : selected)
+        config.onChange(multiple ? committed.slice() : committed)
       }
     }
 
+    function repaint() {
+      label.textContent = summary()
+      if (allRow) allRow.setAttribute("aria-selected", String(!!(all && all.active)))
+      renderList()
+    }
+
     function renderList() {
       list.innerHTML = ""
       var needle = filter.toLowerCase()
@@ -208,46 +454,44 @@
       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()
+        var picked = shown.filter(isSelected).length
+        var allShownSelected = picked === shown.length
+        var toggleAll = el("div", "fm-opt fm-opt-check")
+        toggleAll.setAttribute("aria-selected", String(allShownSelected))
+        toggleAll.appendChild(checkbox(allShownSelected, picked > 0 && !allShownSelected))
+        toggleAll.appendChild(
+          el("span", null, "Select all (" + picked + "/" + shown.length + ")")
+        )
+        toggleAll.addEventListener("click", function () {
+          draft = allShownSelected
+            ? draft.filter(function (value) { return shown.indexOf(value) < 0 })
+            : draft.concat(shown.filter(function (value) { return !isSelected(value) }))
+          repaint()
         })
-        list.appendChild(all)
+        list.appendChild(toggleAll)
       }
       if (visible.length === 0) {
         list.appendChild(el("div", "fm-empty", "No matches"))
         return
       }
       visible.forEach(function (item) {
-        var option = el("div", "fm-opt")
+        var option = el("div", multiple ? "fm-opt fm-opt-check" : "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)
-        }
+        if (multiple) option.appendChild(checkbox(isSelected(item.value)))
         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()
+            draft = isSelected(item.value)
+              ? draft.filter(function (value) { return value !== item.value })
+              : draft.concat([item.value])
+            repaint()
+            return
           }
-          label.textContent = summary()
-          renderList()
+          draft = item.value
+          committed = draft
+          control.close()
+          repaint()
           emit()
         })
         list.appendChild(option)
@@ -259,24 +503,46 @@
       renderList()
     })
 
-    var control = popover(root, button, panel)
-    label.textContent = summary()
-    renderList()
+    var control = popover(root, button, panel, {
+      onOpen: function () {
+        draft = multiple ? committed.slice() : committed
+        // a reopened picker showing the last search reads as a broken list
+        filter = ""
+        search.value = ""
+        repaint()
+      },
+      // an outside click, Cancel or Escape is a discard; Apply commits first, so this is a no-op
+      onClose: function () {
+        draft = multiple ? committed.slice() : committed
+        repaint()
+      }
+    })
+    repaint()
 
     return {
       element: root,
-      getValue: function () { return multiple ? selected.slice() : selected },
+      getValue: function () { return multiple ? committed.slice() : committed },
       setValue: function (next) {
-        selected = multiple ? asArray(next) : next
-        label.textContent = summary()
-        renderList()
+        committed = multiple ? asArray(next) : next
+        // a param push mid-edit must not wipe the merchant's ticks
+        if (!control.isOpen()) draft = multiple ? committed.slice() : committed
+        repaint()
       },
       setOptions: function (next) {
         items = normalizeOptions(next)
-        label.textContent = summary()
-        renderList()
+        repaint()
       },
-      destroy: function () { host.innerHTML = "" }
+      /** Marks the named All action live; the caller owns what that means. */
+      setAll: function (active) {
+        if (!all) return
+        all.active = !!active
+        repaint()
+      },
+      setDisabled: function (flag) {
+        button.disabled = !!flag
+        if (flag) control.close()
+      },
+      destroy: function () { control.destroy(); host.innerHTML = "" }
     }
   }
 
@@ -374,69 +640,124 @@
    * 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.
    */
+  var SINGLE_PRESETS = DEFAULT_PRESETS.filter(function (preset) {
+    return preset.key === "today" || preset.key === "yesterday"
+  })
+
+  function dowOf(ymd) {
+    return new Date(Date.parse(ymd + "T00:00:00.000Z")).getUTCDay()
+  }
+
+  /** Grid labels and titles read in the report's locale; the ymd is a UTC instant by construction. */
+  function partsOf(ymd, options) {
+    try {
+      var spec = { timeZone: "UTC" }
+      Object.keys(options).forEach(function (key) { spec[key] = options[key] })
+      return new Intl.DateTimeFormat(
+        (window.env && window.env.locale) || "en-US",
+        spec
+      ).format(new Date(Date.parse(ymd + "T00:00:00.000Z")))
+    } catch (err) {
+      return ymd
+    }
+  }
+
+  function dayNames() {
+    var out = []
+    // 2026-03-01 is a Sunday: the grid is Sunday-first like the classic calendar, while the
+    // week presets above stay Monday-first like the classic report's week boundaries.
+    for (var i = 0; i < 7; i++) out.push(partsOf(shiftYmd("2026-03-01", i), { weekday: "short" }))
+    return out
+  }
+
+  // Day-first like the classic filter chip beside it, with the month name still localized:
+  // Intl's own en-US order ("Jul 01, 2026") would read differently from the classic report.
+  function dayLabel(ymd) {
+    return ymd.slice(8) + " " + partsOf(ymd, { month: "short" })
+  }
+
+  /** "09 Sep 2026", or "09 Sep \u2013 15 Sep 2026" with one year when the range shares it. */
+  function describeRange(fromYmd, toYmd) {
+    var year = " " + toYmd.slice(0, 4)
+    if (fromYmd === toYmd) return dayLabel(fromYmd) + year
+    if (fromYmd.slice(0, 4) !== toYmd.slice(0, 4)) {
+      return dayLabel(fromYmd) + " " + fromYmd.slice(0, 4) + " \u2013 " + dayLabel(toYmd) + year
+    }
+    return dayLabel(fromYmd) + " \u2013 " + dayLabel(toYmd) + year
+  }
+
+  /** `single: true` picks one day: one grid, and both bounds land on that day. */
   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 single = !!config.single
+    var presets = config.presets || (single ? SINGLE_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 fromYmd = value.from ? ymdIn(new Date(value.from), timezone) : single ? todayYmd : shiftYmd(todayYmd, -29)
+    var toYmd = single ? fromYmd : value.to ? ymdIn(new Date(value.to), timezone) : todayYmd
     var presetKey = config.preset || null
+    // draft: what the open popover is editing, committed only by Apply
+    var dFrom = fromYmd
+    var dTo = toYmd
+    var dPreset = presetKey
+    var anchor = null
+    var viewYmd = monthStart(dFrom, 0)
 
     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 trigger = chipTrigger(config.icon === null ? null : config.icon || "calendar")
+    var button = trigger.button
+    var label = trigger.label
     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)
+    var calendar = el("div", "fm-cal")
+    var head = el("div", "fm-cal-head")
+    var prev = el("button", "fm-cal-nav fm-cal-prev")
+    prev.type = "button"
+    prev.setAttribute("aria-label", "Previous month")
+    prev.appendChild(icon("chevronLeft"))
+    var next = el("button", "fm-cal-nav fm-cal-next")
+    next.type = "button"
+    next.setAttribute("aria-label", "Next month")
+    next.appendChild(icon("chevronRight"))
+    var title = el("div", "fm-cal-title fm-text-body-md-500")
+    var grid = el("div", "fm-cal-grid")
+    head.appendChild(prev)
+    head.appendChild(title)
+    head.appendChild(next)
+    calendar.appendChild(head)
+    calendar.appendChild(grid)
     body.appendChild(presetList)
-    body.appendChild(custom)
+    body.appendChild(calendar)
     panel.appendChild(body)
+    var foot = el("div", "fm-pop-foot")
+    var cancel = actionButton("Cancel", "ghost", "fm-dr-cancel")
+    var apply = actionButton("Apply", "primary", "fm-dr-apply")
+    foot.appendChild(cancel)
+    foot.appendChild(apply)
+    panel.appendChild(foot)
     root.appendChild(button)
     root.appendChild(panel)
     host.innerHTML = ""
     host.appendChild(root)
 
+    var DOW = dayNames()
+
     function summary() {
-      var active = presets.filter(function (preset) { return preset.key === presetKey })[0]
-      if (active) return active.label
-      return fromYmd === toYmd ? fromYmd : fromYmd + " – " + toYmd
+      return describeRange(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 pick() {
+      return {
+        from: boundaryIso(fromYmd, timezone, false),
+        to: boundaryIso(toYmd, timezone, true),
+        fromDate: fromYmd,
+        toDate: toYmd,
+        preset: presetKey
       }
     }
 
@@ -444,61 +765,119 @@
       presetList.innerHTML = ""
       presets.forEach(function (preset) {
         var option = el("div", "fm-opt", preset.label)
-        option.setAttribute("aria-selected", String(preset.key === presetKey))
+        option.setAttribute("aria-selected", String(preset.key === dPreset))
         option.addEventListener("click", function () {
           var range = preset.range(ymdIn(new Date(), timezone))
-          fromYmd = range[0]
-          toYmd = range[1]
-          presetKey = preset.key
-          control.close()
-          emit()
+          dFrom = range[0]
+          dTo = single ? range[0] : range[1]
+          dPreset = preset.key
+          anchor = null
+          viewYmd = monthStart(dFrom, 0)
+          renderDraft()
         })
         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
+    function renderCalendar() {
+      title.textContent = partsOf(viewYmd, { month: "long", year: "numeric" })
+      grid.innerHTML = ""
+      DOW.forEach(function (name) {
+        grid.appendChild(el("div", "fm-cal-dow fm-text-body-sm-400", name))
+      })
+      var start = shiftYmd(viewYmd, -dowOf(viewYmd))
+      var month = viewYmd.slice(0, 7)
+      // six rows always: the popover keeps one height as the merchant pages through months
+      for (var index = 0; index < 42; index++) {
+        var ymd = shiftYmd(start, index)
+        var inRange = ymd >= dFrom && ymd <= dTo
+        var edge = ymd === dFrom ? (ymd === dTo ? "both" : "start") : ymd === dTo ? "end" : ""
+        var cell = el("div", "fm-cal-cell")
+        if (inRange) cell.setAttribute("data-in-range", "true")
+        if (edge) cell.setAttribute("data-edge", edge)
+        var day = el("button", "fm-cal-day fm-text-body-md-400", String(Number(ymd.slice(8))))
+        day.type = "button"
+        day.setAttribute("data-ymd", ymd)
+        if (ymd.slice(0, 7) !== month) day.setAttribute("data-outside", "true")
+        if (ymd === todayYmd) day.setAttribute("data-today", "true")
+        if (edge) day.setAttribute("data-selected", "true")
+        day.addEventListener("click", pickDay.bind(null, ymd))
+        cell.appendChild(day)
+        grid.appendChild(cell)
+      }
+    }
+
+    /** First click sets one end, the second the other; a third starts over. */
+    function pickDay(ymd) {
+      dPreset = null
+      if (single || anchor === null) {
+        anchor = single ? null : ymd
+        dFrom = ymd
+        dTo = ymd
+      } else {
+        dFrom = anchor < ymd ? anchor : ymd
+        dTo = anchor < ymd ? ymd : anchor
+        anchor = null
       }
-      presetKey = null
+      renderDraft()
+    }
+
+    function renderDraft() {
+      renderPresets()
+      renderCalendar()
+    }
+
+    function seedDraft() {
+      dFrom = fromYmd
+      dTo = toYmd
+      dPreset = presetKey
+      anchor = null
+      viewYmd = monthStart(dFrom, 0)
+      renderDraft()
+    }
+
+    prev.addEventListener("click", function () {
+      viewYmd = monthStart(viewYmd, 1)
+      renderCalendar()
+    })
+    next.addEventListener("click", function () {
+      viewYmd = monthStart(shiftYmd(monthEnd(viewYmd), 1), 0)
+      renderCalendar()
+    })
+    cancel.addEventListener("click", function () {
       control.close()
-      emit()
+    })
+    apply.addEventListener("click", function () {
+      fromYmd = dFrom
+      toYmd = dTo
+      presetKey = dPreset
+      control.close()
+      label.textContent = summary()
+      if (typeof config.onChange === "function") config.onChange(pick())
     })
 
-    var control = popover(root, button, panel)
+    var control = popover(root, button, panel, { onOpen: seedDraft, onClose: seedDraft })
     label.textContent = summary()
-    fromInput.value = fromYmd
-    toInput.value = toYmd
-    renderPresets()
+    renderDraft()
 
     return {
       element: root,
-      getValue: function () {
-        return {
-          from: boundaryIso(fromYmd, timezone, false),
-          to: boundaryIso(toYmd, timezone, true),
-          fromDate: fromYmd,
-          toDate: toYmd,
-          preset: presetKey
-        }
-      },
+      getValue: pick,
       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)
+        if (next.to && !single) toYmd = ymdIn(new Date(next.to), timezone)
+        if (single) toYmd = fromYmd
         presetKey = next.preset || null
         label.textContent = summary()
-        fromInput.value = fromYmd
-        toInput.value = toYmd
-        renderPresets()
+        // a param push mid-edit must not move the calendar under the merchant's hand
+        if (!control.isOpen()) seedDraft()
       },
-      destroy: function () { host.innerHTML = "" }
+      setDisabled: function (flag) {
+        button.disabled = !!flag
+        if (flag) control.close()
+      },
+      destroy: function () { control.destroy(); host.innerHTML = "" }
     }
   }
 
@@ -516,11 +895,14 @@
     host.innerHTML = ""
     host.appendChild(root)
 
+    var disabled = false
+
     function render() {
       root.innerHTML = ""
       items.forEach(function (item) {
-        var button = el("button", null, item.label)
+        var button = el("button", "fm-seg-item fm-text-body-md-500", item.label)
         button.type = "button"
+        button.disabled = disabled
         button.setAttribute("aria-pressed", String(item.value === value))
         button.addEventListener("click", function () {
           if (item.value === value) return
@@ -541,6 +923,14 @@
         value = next
         render()
       },
+      setOptions: function (next) {
+        items = normalizeOptions(next)
+        render()
+      },
+      setDisabled: function (flag) {
+        disabled = !!flag
+        render()
+      },
       destroy: function () { host.innerHTML = "" }
     }
   }
@@ -561,6 +951,9 @@
         key: column.key,
         label: column.label === undefined ? column.key : column.label,
         className: classes.join(" "),
+        part: column.part,
+        imageOnly: column.format === "image",
+        image: column.image || null,
         format: typeof column.format === "function" ? column.format : null
       }
     })
@@ -572,6 +965,28 @@
     return value === null || value === undefined || value === "" ? "—" : String(value)
   }
 
+  /**
+   * Image values use their own key and occupy an ordinary cell at any column position.
+   * The legacy `image` binding composes a thumbnail with this column's text.
+   * Missing or failed images retain their box so rows stay aligned.
+   */
+  function cellNode(column, row) {
+    if (!column.imageOnly && !column.image) return el("td", column.className, cellText(column, row))
+    var cell = el("td", (column.className ? column.className + " " : "") +
+      (column.imageOnly ? "fmr-image-cell" : "fmr-thumb-cell"))
+    var img = document.createElement("img")
+    img.className = "fmr-thumb"
+    img.alt = ""
+    img.loading = "lazy"
+    var src = row ? row[column.imageOnly ? column.key : column.image] : null
+    if (src === null || src === undefined || src === "") img.style.visibility = "hidden"
+    else img.src = String(src)
+    img.addEventListener("error", function () { img.style.visibility = "hidden" })
+    cell.appendChild(img)
+    if (!column.imageOnly) cell.appendChild(el("span", "fmr-thumb-text", cellText(column, row)))
+    return cell
+  }
+
   /**
    * 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.
@@ -626,7 +1041,9 @@
     next.type = "button"
 
     columns.forEach(function (column) {
-      headRow.appendChild(el("th", column.className, column.label))
+      var head = el("th", column.className, column.label)
+      if (column.part) head.setAttribute("data-fm-part", column.part)
+      headRow.appendChild(head)
     })
     thead.appendChild(headRow)
     tableEl.appendChild(thead)
@@ -665,11 +1082,11 @@
       slice.forEach(function (row, i) {
         var tr = el("tr")
         columns.forEach(function (column) {
-          tr.appendChild(el("td", column.className, cellText(column, row)))
+          tr.appendChild(cellNode(column, row))
         })
         if (onRowClick) {
           var absIndex = from + i
-          tr.className = "fm-row-btn"
+          tr.className = "fm-row-btn fmr-row-btn"
           tr.tabIndex = 0
           tr.setAttribute("aria-selected", String(isSelected(absIndex, row)))
           tr.addEventListener("click", function () { select(absIndex, row) })
@@ -754,7 +1171,9 @@
         columns = normalizeColumns(nextColumns)
         headRow.textContent = ""
         columns.forEach(function (column) {
-          headRow.appendChild(el("th", column.className, column.label))
+          var head = el("th", column.className, column.label)
+          if (column.part) head.setAttribute("data-fm-part", column.part)
+          headRow.appendChild(head)
         })
         render()
       },