@expressivecss/expressive 0.15.0 → 0.17.0

package/dist/js/chunks/{chunk-VGNYF6FB.mjs → chunk-KOTGMCMI.mjs}

@@ -1,30 +1,67 @@
 import {
   LineChart
-} from "./chunk-TCCA2HDG.mjs";
+} from "./chunk-IQOTGGHX.mjs";
 
 // src/ts/components/heatmapChart.ts
+function band(level, steps) {
+  return Math.sign(level) * Math.min(steps - 1, Math.floor(Math.abs(level) * steps)) / (steps - 1);
+}
 var HeatmapChart = class extends LineChart {
   get _type() {
     return "heatmap-chart";
   }
-  get _key() {
-    return "Expressive_HeatmapChart";
+  /** Color carries the value, so there is no value axis. */
+  get _axis() {
+    return false;
   }
-  static init(els, options = {}) {
-    return super.init(els, options);
+  get _count() {
+    return this.labels.length * this.series.length;
   }
-  static getInstance(el) {
-    return el["Expressive_HeatmapChart"];
+  destroy() {
+    this._resizes?.disconnect();
+    super.destroy();
+  }
+  /** Redraws the grid, scrolled where it was. */
+  update() {
+    const left = this._scroll?.scrollLeft;
+    super.update();
+    if (this._scroll && left) this._scroll.scrollLeft = left;
   }
   /** Highlights one cell, numbered row by row. Pass -1 to hide the tooltip. */
   show(index) {
     if (!this._tooltip || index === this.activeIndex) return;
-    const cell = this._cells[index];
-    const [left, top, width, plotWidth] = cell ? [cell.offsetLeft, cell.offsetTop, cell.offsetWidth, this._plot.clientWidth] : [];
+    this._activate(this._cells[index], index);
+  }
+  _activate(cell, index) {
+    const box = cell ? this._box(cell) : null;
     this._cells[this.activeIndex]?.classList.remove("active");
     this.activeIndex = index;
-    this._tooltip.hidden = !cell;
+    this._tooltip.hidden = !box;
+    if (box) this._fill(cell, index, box);
+  }
+  /**
+   * A cell's left, top and width in the plot, past any scrolling of the
+   * grid, and the plot's width. A key can move to a cell scrolled out of a
+   * wide grid, so it scrolls into view first.
+   */
+  _box(cell) {
+    if (this._plot.matches(":focus-visible")) cell.scrollIntoView({ block: "nearest", inline: "nearest" });
+    return this._measure(cell);
+  }
+  _measure(cell) {
+    const [box, plot] = [cell.getBoundingClientRect(), this._plot.getBoundingClientRect()];
+    return [box.left - plot.left, box.top - plot.top, box.width, this._plot.clientWidth];
+  }
+  /** Keeps the tooltip on its cell as the grid scrolls, and hides it once the cell scrolls out. */
+  _follow(scroll) {
+    const cell = this._cells[this.activeIndex];
     if (!cell) return;
+    const [view, box] = [scroll.getBoundingClientRect(), cell.getBoundingClientRect()];
+    if (box.right <= view.left || box.left >= view.right) this.show(-1);
+    else this._position(this._measure(cell));
+  }
+  /** Marks the cell and fills the tooltip beside it, on the side with more room. */
+  _fill(cell, index, [left, top, width, plotWidth]) {
     cell.classList.add("active");
     const columns = this.series.length;
     const [row, series] = [Math.floor(index / columns), this.series[index % columns]];
@@ -36,6 +73,9 @@ var HeatmapChart = class extends LineChart {
     else name.style.setProperty("--level", String(this._levels[index]));
     text.textContent = series.text[row];
     this._tooltip.replaceChildren(title, name, text);
+    this._position([left, top, width, plotWidth]);
+  }
+  _position([left, top, width, plotWidth]) {
     const end = left + width / 2 > plotWidth / 2;
     this._tooltip.classList.toggle("end", end);
     this._tooltip.style.left = `${left + (end ? 0 : width)}px`;
@@ -73,10 +113,15 @@ var HeatmapChart = class extends LineChart {
     const last = this._cells[this._cells.length - 1].getBoundingClientRect();
     const [left, right] = [Math.min(first.left, last.left), Math.max(first.right, last.right)];
     const [x, y] = [e.clientX, e.clientY];
-    if (x < left || x > right || y < first.top || y > last.bottom) return -1;
-    const band = (offset, size, count) => Math.min(count - 1, Math.floor(offset / (size || 1) * count));
-    const column = band(x - left, right - left, columns);
-    return band(y - first.top, last.bottom - first.top, rows) * columns + (this._reversed ? columns - 1 - column : column);
+    if (this._off(x, y, [left, right, first.top, last.bottom])) return -1;
+    const band2 = (offset, size, count) => Math.min(count - 1, Math.floor(offset / (size || 1) * count));
+    const column = band2(x - left, right - left, columns);
+    return band2(y - first.top, last.bottom - first.top, rows) * columns + (this._reversed ? columns - 1 - column : column);
+  }
+  /** Whether a point is off the cells, or on cells scrolled out of view under the row labels. */
+  _off(x, y, [left, right, top, bottom]) {
+    const view = this._scroll.getBoundingClientRect();
+    return x < Math.max(left, view.left) || x > Math.min(right, view.right) || y < top || y > bottom;
   }
   /**
    * The legend: a gradient from the lowest cell's shade to the highest's,
@@ -91,11 +136,43 @@ var HeatmapChart = class extends LineChart {
     [low.textContent, high.textContent] = this._ends;
     scale.className = "heatmap-chart-scale";
     if (this._reversed) scale.style.setProperty("--heatmap-chart-to", "left");
-    scale.style.setProperty("--low", String(this._endLevels[0]));
-    scale.style.setProperty("--high", String(this._endLevels[1]));
+    const [from, to] = this._endLevels;
+    scale.style.setProperty("--low", String(from));
+    scale.style.setProperty("--high", String(to));
+    scale.classList.toggle("diverging", from < 0 && to > 0);
+    scale.style.setProperty("--mid", `${-from / (to - from || 1) * 100}%`);
+    scale.append(...this._bands().filter((level) => level >= from && level <= to).map((level) => {
+      const swatch = document.createElement("span");
+      swatch.style.setProperty("--level", String(level));
+      return swatch;
+    }));
     legend.append(low, scale, high);
     return [legend];
   }
+  /** With data-steps, every band's shade from the lowest to the highest; otherwise none. */
+  _bands() {
+    const steps = this._steps;
+    if (!steps) return [];
+    return Array.from({ length: 2 * steps - 1 }, (_, k) => (k - steps + 1) / (steps - 1));
+  }
+  /** The number of bands data-steps asks for, or 0 for a smooth scale. */
+  get _steps() {
+    const steps = Math.round(this._number("steps") ?? 0);
+    return steps > 1 ? steps : 0;
+  }
+  /**
+   * How a value shades its cell: from 0 at the scale's low end to 1 at its
+   * high end, or with data-mid from -1 to 1 either side of that midpoint,
+   * as far as the further end. With data-steps the shades fall into bands.
+   */
+  _shade(low, high) {
+    const option = (name, fallback) => this._number(name) ?? this.options[name] ?? fallback;
+    const [min, max, mid] = [option("min", low), option("max", high), this._number("mid")];
+    const clamp = (value, floor) => Math.min(1, Math.max(floor, value));
+    const level = mid === null ? (value) => clamp((value - min) / (max - min || 1), 0) : (value) => clamp((Math.min(max, Math.max(min, value)) - mid) / (Math.max(max - mid, mid - min) || 1), -1);
+    const steps = this._steps;
+    return steps ? (value) => band(level(value), steps) : level;
+  }
   /**
    * A grid of the row headers and cells, row by row, with the column headers
    * below. Each cell's --level shades it in CSS.
@@ -109,9 +186,7 @@ var HeatmapChart = class extends LineChart {
       if (value < low) [low, this._ends[0]] = [value, series.text[row]];
       if (value > high) [high, this._ends[1]] = [value, series.text[row]];
     }));
-    const option = (name) => this._number(name) ?? this.options[name];
-    const [min, max] = [option("min") ?? low, option("max") ?? high];
-    const shade = (value) => Math.min(1, Math.max(0, (value - min) / (max - min || 1)));
+    const shade = this._shade(low, high);
     this._endLevels = [shade(low), shade(high)];
     const grid = document.createElement("div");
     grid.className = "heatmap-chart-grid";
@@ -128,8 +203,11 @@ var HeatmapChart = class extends LineChart {
     const values = this.el.classList.contains("values");
     this._cells = [];
     this._levels = [];
+    const [rows, cells] = [document.createElement("div"), document.createElement("div")];
+    rows.className = "heatmap-chart-rows";
+    cells.className = "heatmap-chart-cells";
     this.labels.forEach((_, row) => {
-      grid.append(span("heatmap-chart-row", label(this._rows[row].cells[0])));
+      rows.append(span("heatmap-chart-row", label(this._rows[row].cells[0])));
       this.series.forEach((series) => {
         const value = series.values[row];
         const level = value === null ? null : shade(value);
@@ -138,24 +216,38 @@ var HeatmapChart = class extends LineChart {
         else cell.style.setProperty("--level", String(level));
         this._cells.push(cell);
         this._levels.push(level);
-        grid.append(cell);
+        cells.append(cell);
       });
     });
     const labels = this._header.slice(1, columns + 1).map(label);
+    const columnLabels = [];
     labels.forEach((text, column) => {
       if (!text) return;
       let end = column + 1;
       while (end < columns && !labels[end]) end++;
       const element = span("heatmap-chart-column", text);
       element.classList.toggle("run", end > column + 1);
-      element.style.gridArea = `${this.labels.length + 1} / ${column + 2} / auto / ${end + 2}`;
-      grid.append(element);
+      element.style.gridArea = `${this.labels.length + 1} / ${column + 1} / auto / ${end + 1}`;
+      cells.append(element);
+      columnLabels.push(element);
     });
+    this._observeLabels(cells, columnLabels.some((element) => element.classList.contains("run")) ? [] : columnLabels);
+    const scroll = this._scroll = document.createElement("div");
+    scroll.className = "heatmap-chart-scroll";
+    scroll.tabIndex = -1;
+    scroll.addEventListener("focus", () => this._plot.focus());
+    scroll.addEventListener("scroll", () => this._follow(scroll), { passive: true });
+    this._resizes?.disconnect();
+    this._resizes = new ResizeObserver(() => this._follow(scroll));
+    this._resizes.observe(scroll);
+    scroll.append(cells);
+    grid.append(rows, scroll);
     return grid;
   }
 };
+HeatmapChart.key = "Expressive_HeatmapChart";
 
 export {
   HeatmapChart
 };
-//# sourceMappingURL=chunk-VGNYF6FB.mjs.map
+//# sourceMappingURL=chunk-KOTGMCMI.mjs.map

package/dist/js/chunks/chunk-KOTGMCMI.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/heatmapChart.ts"],
+  "sourcesContent": ["import { LineChart, LineChartOptions } from './lineChart';\n\nexport type HeatmapChartOptions = LineChartOptions;\n\n/**\n * A shade in one of `steps` bands, each side of zero on a diverging scale:\n * the lowest band is the empty color, and the highest is the full color.\n */\nfunction band(level: number, steps: number) {\n  return (Math.sign(level) * Math.min(steps - 1, Math.floor(Math.abs(level) * steps))) / (steps - 1);\n}\n\n/**\n * Heatmap chart. It reads its <table> like LineChart, but draws every cell\n * as a square of the grid, shaded from the lowest value to the highest, with\n * the row headers beside it and the column headers below. A `data-label` on\n * a header cell replaces its text on the grid; an empty one hides it. The\n * tooltip shows one cell, and the arrow keys move round the grid. With\n * `data-mid` the scale diverges either side of that value, and with\n * `data-steps` the shades fall into that many bands.\n *\n * Call `update()` after changing the table, or start it with `watch` or\n * `data-watch`.\n */\nexport class HeatmapChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Every cell, row by row. */\n  private _cells: HTMLElement[];\n  /** Each cell's shade from 0 to 1, or -1 to 1 on a diverging scale, or null for a gap. */\n  private _levels: (number | null)[];\n  /** The text of the lowest and highest cells, for the legend. */\n  private _ends: [string, string];\n  /** The shades of the lowest and highest cells, where the legend's gradient runs. */\n  private _endLevels: [number, number];\n  /** The box the cells scroll in, beside the row labels. */\n  private _scroll: HTMLElement;\n  /** Keeps the tooltip on its cell when the chart changes size. */\n  private _resizes: ResizeObserver;\n\n  protected get _type() {\n    return 'heatmap-chart';\n  }\n\n  /** Color carries the value, so there is no value axis. */\n  protected get _axis() {\n    return false;\n  }\n\n  static key = 'Expressive_HeatmapChart';\n\n  protected get _count() {\n    return this.labels.length * this.series.length;\n  }\n\n  destroy() {\n    this._resizes?.disconnect();\n    super.destroy();\n  }\n\n  /** Redraws the grid, scrolled where it was. */\n  update() {\n    const left = this._scroll?.scrollLeft;\n    super.update();\n    if (this._scroll && left) this._scroll.scrollLeft = left;\n  }\n\n  /** Highlights one cell, numbered row by row. Pass -1 to hide the tooltip. */\n  show(index: number) {\n    if (!this._tooltip || index === this.activeIndex) return;\n    this._activate(this._cells[index], index);\n  }\n\n  private _activate(cell: HTMLElement | undefined, index: number) {\n    // Measure before the writes below, which would otherwise force a layout.\n    const box = cell ? this._box(cell) : null;\n    this._cells[this.activeIndex]?.classList.remove('active');\n    this.activeIndex = index;\n    this._tooltip.hidden = !box;\n    if (box) this._fill(cell!, index, box);\n  }\n\n  /**\n   * A cell's left, top and width in the plot, past any scrolling of the\n   * grid, and the plot's width. A key can move to a cell scrolled out of a\n   * wide grid, so it scrolls into view first.\n   */\n  private _box(cell: HTMLElement) {\n    if (this._plot.matches(':focus-visible')) cell.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n    return this._measure(cell);\n  }\n\n  private _measure(cell: HTMLElement) {\n    const [box, plot] = [cell.getBoundingClientRect(), this._plot.getBoundingClientRect()];\n    return [box.left - plot.left, box.top - plot.top, box.width, this._plot.clientWidth];\n  }\n\n  /** Keeps the tooltip on its cell as the grid scrolls, and hides it once the cell scrolls out. */\n  private _follow(scroll: HTMLElement) {\n    const cell = this._cells[this.activeIndex];\n    if (!cell) return;\n    const [view, box] = [scroll.getBoundingClientRect(), cell.getBoundingClientRect()];\n    if (box.right <= view.left || box.left >= view.right) this.show(-1);\n    else this._position(this._measure(cell));\n  }\n\n  /** Marks the cell and fills the tooltip beside it, on the side with more room. */\n  private _fill(cell: HTMLElement, index: number, [left, top, width, plotWidth]: number[]) {\n    cell.classList.add('active');\n    const columns = this.series.length;\n    const [row, series] = [Math.floor(index / columns), this.series[index % columns]];\n    const title = document.createElement('strong');\n    title.textContent = this.labels[row];\n    const [name, text] = [document.createElement('span'), document.createElement('span')];\n    name.textContent = series.name;\n    // A gap's swatch is outlined like its cell.\n    if (this._levels[index] === null) name.className = 'gap';\n    else name.style.setProperty('--level', String(this._levels[index]));\n    text.textContent = series.text[row];\n    this._tooltip.replaceChildren(title, name, text);\n    this._position([left, top, width, plotWidth]);\n  }\n\n  private _position([left, top, width, plotWidth]: number[]) {\n    const end = left + width / 2 > plotWidth / 2;\n    this._tooltip.classList.toggle('end', end);\n    this._tooltip.style.left = `${left + (end ? 0 : width)}px`;\n    this._tooltip.style.top = `${top}px`;\n  }\n\n  /** Arrows move the way they point, so left and right swap in RTL. */\n  protected _keyTarget(key: string): number | undefined {\n    // With nothing shown, Escape is left to a dialog or sheet around the chart.\n    if (key === 'Escape') return this.activeIndex < 0 ? undefined : -1;\n    const [columns, last] = [this.series.length, this.labels.length - 1];\n    const index = Math.max(0, this.activeIndex);\n    const [row, column] = [Math.floor(index / columns), index % columns];\n    const [next, back] = this._reversed ? ['ArrowLeft', 'ArrowRight'] : ['ArrowRight', 'ArrowLeft'];\n    const to = {\n      [next]: [row, column + 1],\n      [back]: [row, column - 1],\n      ArrowDown: [row + 1, column],\n      ArrowUp: [row - 1, column],\n      Home: [row, 0],\n      End: [row, columns - 1]\n    }[key];\n    if (!to) return undefined;\n    // The first key after focus or Escape shows the first cell.\n    if (this.activeIndex < 0) return 0;\n    const clamp = (value: number, max: number) => Math.min(max, Math.max(0, value));\n    return clamp(to[0], last) * columns + clamp(to[1], columns - 1);\n  }\n\n  /**\n   * The cell under the pointer by its position, or -1 off the grid. A touch\n   * keeps its first target while it drags, so the target cannot be used. The\n   * cells and gaps are even, so each band's edge falls in a gap and a gap\n   * counts as the nearer cell.\n   */\n  protected _indexAt(e: PointerEvent) {\n    const [columns, rows] = [this.series.length, this.labels.length];\n    const first = this._cells[0].getBoundingClientRect();\n    const last = this._cells[this._cells.length - 1].getBoundingClientRect();\n    const [left, right] = [Math.min(first.left, last.left), Math.max(first.right, last.right)];\n    const [x, y] = [e.clientX, e.clientY];\n    if (this._off(x, y, [left, right, first.top, last.bottom])) return -1;\n    const band = (offset: number, size: number, count: number) =>\n      Math.min(count - 1, Math.floor((offset / (size || 1)) * count));\n    const column = band(x - left, right - left, columns);\n    return band(y - first.top, last.bottom - first.top, rows) * columns + (this._reversed ? columns - 1 - column : column);\n  }\n\n  /** Whether a point is off the cells, or on cells scrolled out of view under the row labels. */\n  private _off(x: number, y: number, [left, right, top, bottom]: number[]) {\n    const view = this._scroll.getBoundingClientRect();\n    return x < Math.max(left, view.left) || x > Math.min(right, view.right) || y < top || y > bottom;\n  }\n\n  /**\n   * The legend: a gradient from the lowest cell's shade to the highest's,\n   * labelled with their text. A fixed scale wider than the data shows only\n   * the part the data uses.\n   */\n  protected _guides(): Element[] {\n    const legend = document.createElement('div');\n    legend.className = 'heatmap-chart-legend';\n    legend.setAttribute('aria-hidden', 'true');\n    const [low, scale, high] = ['span', 'span', 'span'].map((tag) => document.createElement(tag));\n    [low.textContent, high.textContent] = this._ends;\n    scale.className = 'heatmap-chart-scale';\n    if (this._reversed) scale.style.setProperty('--heatmap-chart-to', 'left');\n    const [from, to] = this._endLevels;\n    scale.style.setProperty('--low', String(from));\n    scale.style.setProperty('--high', String(to));\n    // A diverging scale whose data crosses the midpoint passes its empty color.\n    scale.classList.toggle('diverging', from < 0 && to > 0);\n    scale.style.setProperty('--mid', `${(-from / (to - from || 1)) * 100}%`);\n    scale.append(...this._bands().filter((level) => level >= from && level <= to).map((level) => {\n      const swatch = document.createElement('span');\n      swatch.style.setProperty('--level', String(level));\n      return swatch;\n    }));\n    legend.append(low, scale, high);\n    return [legend];\n  }\n\n  /** With data-steps, every band's shade from the lowest to the highest; otherwise none. */\n  private _bands() {\n    const steps = this._steps;\n    if (!steps) return [];\n    return Array.from({ length: 2 * steps - 1 }, (_, k) => (k - steps + 1) / (steps - 1));\n  }\n\n  /** The number of bands data-steps asks for, or 0 for a smooth scale. */\n  private get _steps() {\n    const steps = Math.round(this._number('steps') ?? 0);\n    return steps > 1 ? steps : 0;\n  }\n\n  /**\n   * How a value shades its cell: from 0 at the scale's low end to 1 at its\n   * high end, or with data-mid from -1 to 1 either side of that midpoint,\n   * as far as the further end. With data-steps the shades fall into bands.\n   */\n  private _shade(low: number, high: number) {\n    const option = (name: 'min' | 'max', fallback: number) => this._number(name) ?? this.options[name] ?? fallback;\n    const [min, max, mid] = [option('min', low), option('max', high), this._number('mid')];\n    const clamp = (value: number, floor: number) => Math.min(1, Math.max(floor, value));\n    const level = mid === null\n      ? (value: number) => clamp((value - min) / (max - min || 1), 0)\n      : (value: number) => clamp((Math.min(max, Math.max(min, value)) - mid) / (Math.max(max - mid, mid - min) || 1), -1);\n    const steps = this._steps;\n    return steps ? (value: number) => band(level(value), steps) : level;\n  }\n\n  /**\n   * A grid of the row headers and cells, row by row, with the column headers\n   * below. Each cell's --level shades it in CSS.\n   */\n  protected _draw(): Element {\n    const columns = this.series.length;\n    let [low, high] = [Infinity, -Infinity];\n    this._ends = ['', ''];\n    this.series.forEach((series) => series.values.forEach((value, row) => {\n      if (value === null) return;\n      if (value < low) [low, this._ends[0]] = [value, series.text[row]];\n      if (value > high) [high, this._ends[1]] = [value, series.text[row]];\n    }));\n    const shade = this._shade(low, high);\n    this._endLevels = [shade(low), shade(high)];\n\n    const grid = document.createElement('div');\n    grid.className = 'heatmap-chart-grid';\n    grid.setAttribute('aria-hidden', 'true');\n    grid.style.setProperty('--columns', String(columns));\n    grid.style.setProperty('--rows', String(this.labels.length));\n    const span = (className: string, text = '') => {\n      const element = document.createElement('span');\n      element.className = className;\n      element.textContent = text;\n      return element;\n    };\n    const label = (cell: HTMLTableCellElement | undefined) =>\n      cell?.dataset.label ?? cell?.textContent.trim() ?? '';\n    const values = this.el.classList.contains('values');\n\n    this._cells = [];\n    this._levels = [];\n    // The row labels stay put beside the cells, which scroll when they are too narrow.\n    const [rows, cells] = [document.createElement('div'), document.createElement('div')];\n    rows.className = 'heatmap-chart-rows';\n    cells.className = 'heatmap-chart-cells';\n    this.labels.forEach((_, row) => {\n      rows.append(span('heatmap-chart-row', label(this._rows[row].cells[0])));\n      this.series.forEach((series) => {\n        const value = series.values[row];\n        const level = value === null ? null : shade(value);\n        const cell = span('heatmap-chart-cell', values ? series.text[row] : '');\n        if (level === null) cell.classList.add('gap');\n        else cell.style.setProperty('--level', String(level));\n        this._cells.push(cell);\n        this._levels.push(level);\n        cells.append(cell);\n      });\n    });\n\n    // A column label runs on over the empty labels after it.\n    const labels = this._header.slice(1, columns + 1).map(label);\n    const columnLabels: HTMLElement[] = [];\n    labels.forEach((text, column) => {\n      if (!text) return;\n      let end = column + 1;\n      while (end < columns && !labels[end]) end++;\n      const element = span('heatmap-chart-column', text);\n      element.classList.toggle('run', end > column + 1);\n      element.style.gridArea = `${this.labels.length + 1} / ${column + 1} / auto / ${end + 1}`;\n      cells.append(element);\n      columnLabels.push(element);\n    });\n    // Labels the author already spaced out with empty ones are left as written.\n    this._observeLabels(cells, columnLabels.some((element) => element.classList.contains('run')) ? [] : columnLabels);\n\n    // The plot is the one Tab stop, so the scroll box is not another, and a\n    // press that focuses it hands focus on to the plot.\n    const scroll = (this._scroll = document.createElement('div'));\n    scroll.className = 'heatmap-chart-scroll';\n    scroll.tabIndex = -1;\n    scroll.addEventListener('focus', () => this._plot.focus());\n    scroll.addEventListener('scroll', () => this._follow(scroll), { passive: true });\n    this._resizes?.disconnect();\n    this._resizes = new ResizeObserver(() => this._follow(scroll));\n    this._resizes.observe(scroll);\n    scroll.append(cells);\n    grid.append(rows, scroll);\n    return grid;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["band"]
+}

package/dist/js/chunks/{chunk-LQWUDNHZ.mjs → chunk-LC4O5LFS.mjs}

@@ -1,9 +1,9 @@
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/messageScroller.ts
 var _defaults = {
@@ -14,9 +14,9 @@ var _defaults = {
 var EDGE = 2;
 var UP_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "PageUp", "Home"]);
 var RELEASE_EVENTS = ["pointerup", "pointercancel", "touchend", "touchcancel"];
-var MessageScroller = class _MessageScroller extends Component {
+var MessageScroller = class extends Component {
   constructor(el, options) {
-    super(el, options, _MessageScroller);
+    super(el, options);
     this._opened = false;
     this._following = false;
     /** A press is down: it may be a tap or a scrollbar drag. */
@@ -65,10 +65,10 @@ var MessageScroller = class _MessageScroller extends Component {
     this._handleMutations = (records) => {
       for (const record of records) {
         record.addedNodes.forEach((node) => {
-          if (node instanceof Element) this._resizeObserver?.observe(node);
+          if (node instanceof Element) this._resizeObserver.observe(node);
         });
         record.removedNodes.forEach((node) => {
-          if (node instanceof Element) this._resizeObserver?.unobserve(node);
+          if (node instanceof Element) this._resizeObserver.unobserve(node);
         });
       }
       const previous = this._last;
@@ -101,11 +101,6 @@ var MessageScroller = class _MessageScroller extends Component {
       }
       this._sync();
     };
-    this.el["Expressive_MessageScroller"] = this;
-    this.options = {
-      ..._MessageScroller.defaults,
-      ...options
-    };
     this.viewport = el.querySelector(":scope > .message-scroller-viewport");
     this.button = el.querySelector(":scope > .message-scroller-button");
     if (!this.viewport) {
@@ -114,49 +109,29 @@ var MessageScroller = class _MessageScroller extends Component {
     }
     this._last = this.viewport.lastElementChild;
     if (this.viewport.clientHeight > 0) this._open();
-    if (typeof ResizeObserver !== "undefined") {
-      this._resizeObserver = new ResizeObserver(this._handleResize);
-      this._resizeObserver.observe(this.viewport, { box: "border-box" });
-      for (const item of Array.from(this.viewport.children)) this._resizeObserver.observe(item);
-    }
+    this._resizeObserver = new ResizeObserver(this._handleResize);
+    this._resizeObserver.observe(this.viewport, { box: "border-box" });
+    for (const item of Array.from(this.viewport.children)) this._resizeObserver.observe(item);
     this._mutationObserver = new MutationObserver(this._handleMutations);
     this._mutationObserver.observe(this.viewport, { childList: true });
-    this.viewport.addEventListener("scroll", this._handleScroll, { passive: true });
+    const { signal } = this._events;
+    this.viewport.addEventListener("scroll", this._handleScroll, { passive: true, signal });
     for (const type of ["wheel", "touchstart", "pointerdown", "keydown"]) {
-      this.viewport.addEventListener(type, this._handleUserScroll, { passive: true });
+      this.viewport.addEventListener(type, this._handleUserScroll, { passive: true, signal });
     }
-    for (const type of RELEASE_EVENTS) document.addEventListener(type, this._handleRelease);
-    this.button?.addEventListener("click", this._handleButtonClick);
+    for (const type of RELEASE_EVENTS) document.addEventListener(type, this._handleRelease, { signal });
+    this.button?.addEventListener("click", this._handleButtonClick, { signal });
   }
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of MessageScroller.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _MessageScroller);
-  }
-  static getInstance(el) {
-    return el["Expressive_MessageScroller"];
-  }
   destroy() {
-    this.el["Expressive_MessageScroller"] = void 0;
+    super.destroy();
     if (!this.viewport) return;
     this._resizeObserver?.disconnect();
     this._mutationObserver?.disconnect();
-    this.viewport.removeEventListener("scroll", this._handleScroll);
-    for (const type of ["wheel", "touchstart", "pointerdown", "keydown"]) {
-      this.viewport.removeEventListener(type, this._handleUserScroll);
-    }
-    for (const type of RELEASE_EVENTS) document.removeEventListener(type, this._handleRelease);
     this.viewport.style.removeProperty("--md-comp-message-scroller-spacer");
-    if (this.button) {
-      this.button.removeEventListener("click", this._handleButtonClick);
-      this.button.inert = false;
-    }
+    if (this.button) this.button.inert = false;
   }
   /** Scrolls to the latest message and resumes following. */
   scrollToEnd() {
@@ -214,7 +189,7 @@ var MessageScroller = class _MessageScroller extends Component {
     }
     this._target = target;
     this._distance = Infinity;
-    const reduce = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
     v.scrollTo({
       top: target === "end" ? v.scrollHeight : target,
       behavior: reduce ? "auto" : "smooth"
@@ -285,8 +260,9 @@ var MessageScroller = class _MessageScroller extends Component {
     this.button.inert = idle;
   }
 };
+MessageScroller.key = "Expressive_MessageScroller";
 
 export {
   MessageScroller
 };
-//# sourceMappingURL=chunk-LQWUDNHZ.mjs.map
+//# sourceMappingURL=chunk-LC4O5LFS.mjs.map

package/dist/js/chunks/chunk-LC4O5LFS.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/messageScroller.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\nimport { Component, BaseOptions } from '../core/component';\n\nexport interface MessageScrollerOptions extends BaseOptions {\n  /**\n   * If true, the viewport follows new content while the reader is at the\n   * end, and a newly appended scroll anchor is brought to the top.\n   * @default true\n   */\n  autoScroll: boolean;\n  /**\n   * Where the transcript opens: `'end'`, `'start'`, or `'last-anchor'`, the\n   * start of the last anchored turn. `'last-anchor'` opens at the end when\n   * that turn already fits in the viewport.\n   * @default 'end'\n   */\n  defaultScrollPosition: 'start' | 'end' | 'last-anchor';\n  /**\n   * Pixels of the previous message left visible above an anchored turn or a\n   * message reached with `scrollToMessage()`.\n   * @default 64\n   */\n  peek: number;\n}\n\nconst _defaults: MessageScrollerOptions = {\n  autoScroll: true,\n  defaultScrollPosition: 'end',\n  peek: 64\n};\n\n// Distance from a scroll target, in px, that still counts as reaching it.\n// Fractional layouts rarely land on the exact pixel.\nconst EDGE = 2;\n\n// Keys that scroll toward the start. They release following at once, before\n// the next streamed chunk can pull the viewport back to the end.\nconst UP_KEYS = new Set(['ArrowUp', 'PageUp', 'Home']);\n\n// Listened on the document: a scrollbar drag can end outside the viewport.\nconst RELEASE_EVENTS = ['pointerup', 'pointercancel', 'touchend', 'touchcancel'];\n\ntype Target = number | 'end';\n\n/**\n * A chat scroll container: a `.message-scroller` frame holding a scrolling\n * `.message-scroller-viewport` of messages and an optional\n * `.message-scroller-button`. Every child of the viewport is one message.\n *\n * While the reader is at the end, the viewport follows streamed output.\n * Scrolling toward the start releases it; reaching the end again, or the\n * button, resumes it. An appended message marked `data-scroll-anchor` starts a\n * turn and is scrolled to the top, with blank space below it until the reply\n * fills the viewport. Messages added above keep the reader's place.\n */\nexport class MessageScroller extends Component<MessageScrollerOptions> {\n  /** The scrolling element. */\n  viewport: HTMLElement;\n  /** The scroll-to-latest button, if present. */\n  button: HTMLButtonElement | null;\n  private _opened = false;\n  private _following = false;\n  /** A press is down: it may be a tap or a scrollbar drag. */\n  private _holding = false;\n  private _lastTop = 0;\n  /** Where a programmatic scroll is heading; null when none is running. */\n  private _target: Target | null = null;\n  /** Distance left to the target at the last scroll event. */\n  private _distance = Infinity;\n  /** The first visible message and its offset from the viewport top. */\n  private _ref: Element | null = null;\n  private _refOffset = 0;\n  /** The latest anchored turn, which the spacer lets reach the top. */\n  private _anchor: Element | null = null;\n  private _spacer = 0;\n  private _last: Element | null = null;\n  private _resizeObserver: ResizeObserver | null = null;\n  private _mutationObserver: MutationObserver | null = null;\n\n  constructor(el: HTMLElement, options: Partial<MessageScrollerOptions>) {\n    super(el, options);\n    this.viewport = el.querySelector(':scope > .message-scroller-viewport');\n    this.button = el.querySelector(':scope > .message-scroller-button');\n    if (!this.viewport) {\n      console.error('MessageScroller needs a .message-scroller-viewport child.');\n      return;\n    }\n    this._last = this.viewport.lastElementChild;\n    // A viewport that is not rendered yet (a closed dialog, a hidden tab)\n    // has no size to position against; it opens on its first resize.\n    if (this.viewport.clientHeight > 0) this._open();\n    this._resizeObserver = new ResizeObserver(this._handleResize);\n    // Border box: the spacer changes the padding, which must not count.\n    this._resizeObserver.observe(this.viewport, { box: 'border-box' });\n    for (const item of Array.from(this.viewport.children)) this._resizeObserver.observe(item);\n    this._mutationObserver = new MutationObserver(this._handleMutations);\n    this._mutationObserver.observe(this.viewport, { childList: true });\n    const { signal } = this._events;\n    this.viewport.addEventListener('scroll', this._handleScroll, { passive: true, signal });\n    for (const type of ['wheel', 'touchstart', 'pointerdown', 'keydown']) {\n      this.viewport.addEventListener(type, this._handleUserScroll, { passive: true, signal });\n    }\n    for (const type of RELEASE_EVENTS) document.addEventListener(type, this._handleRelease, { signal });\n    this.button?.addEventListener('click', this._handleButtonClick, { signal });\n  }\n\n  static get defaults(): MessageScrollerOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_MessageScroller';\n\n  destroy() {\n    super.destroy();\n    if (!this.viewport) return;\n    this._resizeObserver?.disconnect();\n    this._mutationObserver?.disconnect();\n    this.viewport.style.removeProperty('--md-comp-message-scroller-spacer');\n    if (this.button) this.button.inert = false;\n  }\n\n  /** Scrolls to the latest message and resumes following. */\n  scrollToEnd() {\n    // Set now: output streaming faster than the scroll can end it early.\n    this._following = this.options.autoScroll;\n    this._scrollTo('end');\n  }\n\n  /** Scrolls to the first message. */\n  scrollToStart() {\n    this._following = false;\n    this._scrollTo(0);\n  }\n\n  /**\n   * Scrolls the element with this id to the top of the viewport, below the\n   * peek, and stops following.\n   * @returns false when no such element is inside the viewport.\n   */\n  scrollToMessage(id: string): boolean {\n    const target = Utils.getElementById(this.viewport, id);\n    if (!target || !this.viewport.contains(target)) return false;\n    this._following = false;\n    this._scrollTo(this._top(target) - this.options.peek);\n    return true;\n  }\n\n  private _open() {\n    this._opened = true;\n    const v = this.viewport;\n    const position = this.options.defaultScrollPosition;\n    const anchors = v.querySelectorAll(':scope > [data-scroll-anchor]');\n    const anchor = position === 'last-anchor' ? anchors[anchors.length - 1] : null;\n    if (position === 'start') v.scrollTop = 0;\n    else if (anchor && this._contentEnd() - this._top(anchor) + this.options.peek > v.clientHeight) {\n      v.scrollTop = this._top(anchor) - this.options.peek;\n    } else v.scrollTop = v.scrollHeight;\n    this._settle();\n  }\n\n  /**\n   * Records where the reader is once no programmatic scroll is running.\n   * Content can grow between a scroll and the resize that re-pins the end,\n   * so only moving toward the start releases following.\n   */\n  private _settle() {\n    const top = this.viewport.scrollTop;\n    const kept = this._following && top >= this._lastTop - EDGE;\n    this._following = this.options.autoScroll && (kept || this._atEnd());\n    this._lastTop = top;\n    this._capture();\n    this._sync();\n  }\n\n  // A programmatic scroll ends when it arrives, or when a scroll moves away\n  // from its target because something else took over.\n  private _handleScroll = () => {\n    if (this._target !== null) {\n      const distance = Math.abs(this.viewport.scrollTop - this._resolve(this._target));\n      if (distance > EDGE && distance < this._distance) {\n        this._distance = distance;\n        return;\n      }\n      this._target = null;\n    }\n    this._settle();\n  };\n\n  private _handleUserScroll = (e: Event) => {\n    if (e.type === 'wheel' && (e as WheelEvent).deltaY >= 0) return;\n    if (e.type === 'keydown' && !UP_KEYS.has((e as KeyboardEvent).key)) return;\n    this._target = null;\n    // A press may be a tap on a message or the start of a drag. Hold the end\n    // until it is released; a scroll toward the start releases following.\n    if (e.type === 'pointerdown' || e.type === 'touchstart') this._holding = true;\n    else this._following = false;\n  };\n\n  private _handleRelease = () => {\n    if (!this._holding) return;\n    this._holding = false;\n    if (this._following) this.viewport.scrollTop = this.viewport.scrollHeight;\n    this._sync();\n  };\n\n  private _handleButtonClick = () => this.scrollToEnd();\n\n  private _handleMutations = (records: MutationRecord[]) => {\n    for (const record of records) {\n      record.addedNodes.forEach((node) => {\n        if (node instanceof Element) this._resizeObserver.observe(node);\n      });\n      record.removedNodes.forEach((node) => {\n        if (node instanceof Element) this._resizeObserver.unobserve(node);\n      });\n    }\n    const previous = this._last;\n    this._last = this.viewport.lastElementChild;\n    if (!this._opened) return;\n    // Restore here, not only on resize: this runs before any scroll event\n    // that could record the shifted position as the reader's place.\n    if (!this._following && this._target === null) this._restore();\n    if (!this.options.autoScroll) return;\n    // Only messages appended after the previous last one start a new turn;\n    // anchors in prepended history do not. If the last one was removed, the\n    // list was replaced and nothing counts as appended.\n    if (previous && previous.parentElement !== this.viewport) return;\n    for (let item = this._last; item && item !== previous; item = item.previousElementSibling) {\n      if (item.hasAttribute('data-scroll-anchor')) {\n        this._anchor = item;\n        this._updateSpacer();\n        // Follow the reply once the turn reaches the top, unless the reader\n        // scrolls away first. _settle keeps it because the scroll went down.\n        this._following = true;\n        this._scrollTo(this._top(item) - this.options.peek);\n        return;\n      }\n    }\n  };\n\n  private _handleResize = () => {\n    if (!this._opened) {\n      if (this.viewport.clientHeight > 0) this._open();\n      return;\n    }\n    this._updateSpacer();\n    const v = this.viewport;\n    if (this._target === 'end') this._scrollTo('end');\n    else if (this._target === null) {\n      if (this._following && !this._holding) v.scrollTop = v.scrollHeight;\n      else this._restore();\n    }\n    this._sync();\n  };\n\n  private _scrollTo(target: Target) {\n    const v = this.viewport;\n    if (Math.abs(v.scrollTop - this._resolve(target)) <= EDGE) {\n      this._target = null;\n      this._settle();\n      return;\n    }\n    this._target = target;\n    this._distance = Infinity;\n    const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;\n    v.scrollTo({\n      top: target === 'end' ? v.scrollHeight : target,\n      behavior: reduce ? 'auto' : 'smooth'\n    });\n  }\n\n  private _resolve(target: Target) {\n    const max = this.viewport.scrollHeight - this.viewport.clientHeight;\n    return target === 'end' ? max : Math.max(0, Math.min(target, max));\n  }\n\n  private _atEnd() {\n    const v = this.viewport;\n    return v.scrollHeight - v.scrollTop - v.clientHeight <= EDGE;\n  }\n\n  /** Offset of an element from the top of the scrolled content. */\n  private _top(el: Element) {\n    const v = this.viewport;\n    return el.getBoundingClientRect().top - v.getBoundingClientRect().top - v.clientTop + v.scrollTop;\n  }\n\n  /** Bottom of the content without the spacer, padding included. */\n  private _contentEnd() {\n    const last = this.viewport.lastElementChild;\n    if (!last) return 0;\n    const padding = parseFloat(getComputedStyle(this.viewport).paddingBlockEnd) - this._spacer;\n    return this._top(last) + last.getBoundingClientRect().height + padding;\n  }\n\n  /** Remembers the first visible message so prepends can keep it in place. */\n  private _capture() {\n    const items = this.viewport.children;\n    const top = this.viewport.getBoundingClientRect().top + this.viewport.clientTop;\n    let low = 0;\n    let high = items.length - 1;\n    while (low < high) {\n      const mid = (low + high) >> 1;\n      if (items[mid].getBoundingClientRect().bottom > top) high = mid;\n      else low = mid + 1;\n    }\n    this._ref = items[low] ?? null;\n    this._refOffset = this._ref ? this._ref.getBoundingClientRect().top - top : 0;\n  }\n\n  /** Moves the remembered message back to where the reader last saw it. */\n  private _restore() {\n    if (this._ref?.parentElement !== this.viewport) {\n      this._capture();\n      return;\n    }\n    const top = this.viewport.getBoundingClientRect().top + this.viewport.clientTop;\n    const delta = this._ref.getBoundingClientRect().top - top - this._refOffset;\n    if (Math.abs(delta) >= 1) this.viewport.scrollTop += delta;\n  }\n\n  /** Sizes the blank space that lets the latest anchored turn reach the top. */\n  private _updateSpacer() {\n    let space = 0;\n    if (this._anchor?.parentElement === this.viewport) {\n      const room = this._top(this._anchor) - this.options.peek + this.viewport.clientHeight;\n      space = Math.max(0, Math.ceil(room - this._contentEnd()));\n    } else this._anchor = null;\n    if (space === this._spacer) return;\n    this._spacer = space;\n    if (space) this.viewport.style.setProperty('--md-comp-message-scroller-spacer', `${space}px`);\n    else this.viewport.style.removeProperty('--md-comp-message-scroller-spacer');\n  }\n\n  /** The button is inert while there is nothing below. */\n  private _sync() {\n    if (!this.button) return;\n    const idle = this._atEnd();\n    // The button's own root: inside a shadow root, document.activeElement is the host.\n    const root = this.button.getRootNode() as Document | ShadowRoot;\n    if (idle && root.activeElement === this.button) this.viewport.focus({ preventScroll: true });\n    this.button.inert = idle;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/chunk-LEF33SCP.mjs

@@ -0,0 +1,127 @@
+import {
+  Utils
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/behaviors/dialogs.ts
+function textElement(tag, text) {
+  const el = document.createElement(tag);
+  el.textContent = text;
+  return el;
+}
+function actionButton(label, value) {
+  const button = textElement("button", label);
+  button.type = "submit";
+  button.value = value;
+  return button;
+}
+var _Dialogs = class _Dialogs {
+  /**
+   * Asks a yes-or-no question in a modal alert dialog. Resolves true on the
+   * confirm button and false on Cancel, Escape or a scrim tap, then removes
+   * the dialog. The browser returns focus to the element that had it.
+   */
+  static confirm(options) {
+    const dialog = _Dialogs._confirmDialog(options);
+    document.body.append(dialog);
+    dialog.showModal();
+    return new Promise((resolve) => {
+      const removed = new MutationObserver(() => {
+        if (!dialog.isConnected) settle(false);
+      });
+      const settle = (answer) => {
+        removed.disconnect();
+        dialog.remove();
+        resolve(answer);
+      };
+      removed.observe(document, { childList: true, subtree: true });
+      dialog.addEventListener("close", () => settle(dialog.returnValue === "confirm"), { once: true });
+    });
+  }
+  static _confirmDialog({ text, headline, confirm, cancel }) {
+    const dialog = document.createElement("dialog");
+    dialog.setAttribute("role", "alertdialog");
+    const id = `expressive-confirm-${++_Dialogs._confirms}`;
+    const body = textElement("p", text);
+    body.id = `${id}-text`;
+    const cancelButton = actionButton(cancel ?? _Dialogs.i18n.cancel, "");
+    cancelButton.className = "text";
+    cancelButton.autofocus = true;
+    const form = document.createElement("form");
+    form.method = "dialog";
+    form.append(cancelButton, actionButton(confirm ?? _Dialogs.i18n.confirm, "confirm"));
+    dialog.append(body, form);
+    _Dialogs._name(dialog, body, id, headline);
+    return dialog;
+  }
+  /** Names the dialog by its headline and describes it by the text, or names it by the text alone. */
+  static _name(dialog, body, id, headline) {
+    if (!headline) {
+      dialog.setAttribute("aria-labelledby", body.id);
+      return;
+    }
+    const heading = textElement("h2", headline);
+    heading.id = `${id}-headline`;
+    dialog.prepend(heading);
+    dialog.setAttribute("aria-labelledby", heading.id);
+    dialog.setAttribute("aria-describedby", body.id);
+  }
+  static Init() {
+    Utils.onDocumentReady(() => {
+      document.addEventListener("pointerdown", _Dialogs._onPointerDown, { passive: true });
+      document.addEventListener("pointerup", _Dialogs._onPointerUp, { passive: true });
+      document.addEventListener("pointercancel", _Dialogs._onPointerCancel, { passive: true });
+    });
+  }
+  static _onPointerDown(event) {
+    const dialog = _Dialogs._isPrimaryPress(event) ? _Dialogs._backdropDialog(event) : null;
+    _Dialogs._down = dialog && _Dialogs._lightDismissible(dialog) && _Dialogs._outside(event, dialog) ? { dialog, pointerId: event.pointerId } : null;
+  }
+  static _onPointerUp(event) {
+    const started = _Dialogs._down;
+    _Dialogs._down = null;
+    if (!started || started.pointerId !== event.pointerId) return;
+    if (!started.dialog.isConnected || !started.dialog.open) return;
+    if (!_Dialogs._lightDismissible(started.dialog)) return;
+    if (_Dialogs._backdropDialog(event) !== started.dialog) return;
+    if (_Dialogs._outside(event, started.dialog)) {
+      started.dialog.close();
+    }
+  }
+  static _onPointerCancel() {
+    _Dialogs._down = null;
+  }
+  /** Backdrop hits retarget to the dialog itself, never a child. */
+  static _backdropDialog(event) {
+    const target = Utils.eventTarget(event);
+    if (!(target instanceof HTMLDialogElement) || !target.open) return null;
+    return target;
+  }
+  static _outside(event, dialog) {
+    const rect = dialog.getBoundingClientRect();
+    return event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
+  }
+  static _isPrimaryPress(event) {
+    if (!event.isPrimary) return false;
+    return event.pointerType !== "mouse" || event.button === 0;
+  }
+  // Read the attribute only. The IDL default for an unset closedby is
+  // "closerequest" (Escape, no light dismiss) — treating that as an
+  // author opt-out made every dialog undismissable from the scrim.
+  // Native closedby="any" already light-dismisses with the same "both ends
+  // outside" rule, so leave it to the browser where it has one.
+  static _lightDismissible(dialog) {
+    const value = dialog.getAttribute("closedby");
+    if (value === "any") return !("closedBy" in HTMLDialogElement.prototype);
+    return value !== "none" && value !== "closerequest";
+  }
+};
+/** The confirm dialog's default button labels. */
+_Dialogs.i18n = { confirm: "OK", cancel: "Cancel" };
+_Dialogs._down = null;
+_Dialogs._confirms = 0;
+var Dialogs = _Dialogs;
+
+export {
+  Dialogs
+};
+//# sourceMappingURL=chunk-LEF33SCP.mjs.map

package/dist/js/chunks/chunk-LEF33SCP.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/behaviors/dialogs.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\n\nexport interface ConfirmOptions {\n  /** The question, shown as the supporting text. */\n  text: string;\n  /** An optional headline above the text. */\n  headline?: string;\n  /** The confirm button's label. Defaults to `Dialogs.i18n.confirm`. */\n  confirm?: string;\n  /** The cancel button's label. Defaults to `Dialogs.i18n.cancel`. */\n  cancel?: string;\n}\n\n/** An element holding `text`, set as text so markup in it is never parsed. */\nfunction textElement<K extends keyof HTMLElementTagNameMap>(tag: K, text: string): HTMLElementTagNameMap[K] {\n  const el = document.createElement(tag);\n  el.textContent = text;\n  return el;\n}\n\n/** A submit button that closes its dialog with `value` as the return value. */\nfunction actionButton(label: string, value: string): HTMLButtonElement {\n  const button = textElement('button', label);\n  button.type = 'submit';\n  button.value = value;\n  return button;\n}\n\n/**\n * Light-dismiss for native `<dialog>` elements.\n *\n * `showModal()` does not close on a backdrop tap. A naive `click` listener\n * on the dialog (where `::backdrop` events retarget) also fires when the\n * user starts a gesture on the dialog and releases on the scrim \u2014 selecting\n * text, missing a button, dragging a thumb. Both ends of the pointer\n * gesture must land outside the dialog's border box.\n *\n * Default is on. Opt out with `closedby=\"none\"` or `closedby=\"closerequest\"`.\n * If the browser already honours `closedby=\"any\"`, we leave that alone.\n *\n * `Dialogs.confirm()` asks a yes-or-no question from script and needs no Init.\n */\nexport class Dialogs {\n  /** The confirm dialog's default button labels. */\n  static i18n = { confirm: 'OK', cancel: 'Cancel' };\n  private static _down: { dialog: HTMLDialogElement; pointerId: number } | null = null;\n  private static _confirms = 0;\n\n  /**\n   * Asks a yes-or-no question in a modal alert dialog. Resolves true on the\n   * confirm button and false on Cancel, Escape or a scrim tap, then removes\n   * the dialog. The browser returns focus to the element that had it.\n   */\n  static confirm(options: ConfirmOptions): Promise<boolean> {\n    const dialog = Dialogs._confirmDialog(options);\n    document.body.append(dialog);\n    // A new dialog's returnValue is '', and Escape and close() leave it alone,\n    // so only the confirm button sets it.\n    dialog.showModal();\n    return new Promise((resolve) => {\n      // Removing an open dialog fires no close event, so watch for page code\n      // that removes it, such as a route change, and answer false.\n      const removed = new MutationObserver(() => {\n        if (!dialog.isConnected) settle(false);\n      });\n      const settle = (answer: boolean) => {\n        removed.disconnect();\n        dialog.remove();\n        resolve(answer);\n      };\n      removed.observe(document, { childList: true, subtree: true });\n      dialog.addEventListener('close', () => settle(dialog.returnValue === 'confirm'), { once: true });\n    });\n  }\n\n  private static _confirmDialog({ text, headline, confirm, cancel }: ConfirmOptions): HTMLDialogElement {\n    const dialog = document.createElement('dialog');\n    dialog.setAttribute('role', 'alertdialog');\n    const id = `expressive-confirm-${++Dialogs._confirms}`;\n    const body = textElement('p', text);\n    body.id = `${id}-text`;\n    const cancelButton = actionButton(cancel ?? Dialogs.i18n.cancel, '');\n    cancelButton.className = 'text';\n    // The less destructive action takes focus when the dialog opens.\n    cancelButton.autofocus = true;\n    const form = document.createElement('form');\n    form.method = 'dialog';\n    form.append(cancelButton, actionButton(confirm ?? Dialogs.i18n.confirm, 'confirm'));\n    dialog.append(body, form);\n    Dialogs._name(dialog, body, id, headline);\n    return dialog;\n  }\n\n  /** Names the dialog by its headline and describes it by the text, or names it by the text alone. */\n  private static _name(dialog: HTMLDialogElement, body: HTMLElement, id: string, headline?: string) {\n    if (!headline) {\n      dialog.setAttribute('aria-labelledby', body.id);\n      return;\n    }\n    const heading = textElement('h2', headline);\n    heading.id = `${id}-headline`;\n    dialog.prepend(heading);\n    dialog.setAttribute('aria-labelledby', heading.id);\n    dialog.setAttribute('aria-describedby', body.id);\n  }\n\n  static Init() {\n    Utils.onDocumentReady(() => {\n      document.addEventListener('pointerdown', Dialogs._onPointerDown, { passive: true });\n      document.addEventListener('pointerup', Dialogs._onPointerUp, { passive: true });\n      document.addEventListener('pointercancel', Dialogs._onPointerCancel, { passive: true });\n    });\n  }\n\n  static _onPointerDown(event: PointerEvent) {\n    const dialog = Dialogs._isPrimaryPress(event) ? Dialogs._backdropDialog(event) : null;\n    Dialogs._down =\n      dialog && Dialogs._lightDismissible(dialog) && Dialogs._outside(event, dialog)\n        ? { dialog, pointerId: event.pointerId }\n        : null;\n  }\n\n  static _onPointerUp(event: PointerEvent) {\n    const started = Dialogs._down;\n    Dialogs._down = null;\n    if (!started || started.pointerId !== event.pointerId) return;\n    if (!started.dialog.isConnected || !started.dialog.open) return;\n    if (!Dialogs._lightDismissible(started.dialog)) return;\n    if (Dialogs._backdropDialog(event) !== started.dialog) return;\n    if (Dialogs._outside(event, started.dialog)) {\n      started.dialog.close();\n    }\n  }\n\n  static _onPointerCancel() {\n    Dialogs._down = null;\n  }\n\n  /** Backdrop hits retarget to the dialog itself, never a child. */\n  private static _backdropDialog(event: Event): HTMLDialogElement | null {\n    const target = Utils.eventTarget(event);\n    if (!(target instanceof HTMLDialogElement) || !target.open) return null;\n    return target;\n  }\n\n  private static _outside(event: PointerEvent, dialog: HTMLDialogElement): boolean {\n    const rect = dialog.getBoundingClientRect();\n    return (\n      event.clientX < rect.left ||\n      event.clientX > rect.right ||\n      event.clientY < rect.top ||\n      event.clientY > rect.bottom\n    );\n  }\n\n  private static _isPrimaryPress(event: PointerEvent): boolean {\n    if (!event.isPrimary) return false;\n    return event.pointerType !== 'mouse' || event.button === 0;\n  }\n\n  // Read the attribute only. The IDL default for an unset closedby is\n  // \"closerequest\" (Escape, no light dismiss) \u2014 treating that as an\n  // author opt-out made every dialog undismissable from the scrim.\n  // Native closedby=\"any\" already light-dismisses with the same \"both ends\n  // outside\" rule, so leave it to the browser where it has one.\n  private static _lightDismissible(dialog: HTMLDialogElement): boolean {\n    const value = dialog.getAttribute('closedby');\n    if (value === 'any') return !('closedBy' in HTMLDialogElement.prototype);\n    return value !== 'none' && value !== 'closerequest';\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}