@expressivecss/expressive 0.15.0 → 0.16.0

package/dist/js/chunks/chunk-7YQBHTK3.mjs

@@ -0,0 +1,225 @@
+import {
+  LineChart,
+  rowLegend,
+  seriesColor
+} from "./chunk-ZM3XBHWV.mjs";
+import {
+  svgNode
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/components/radialChart.ts
+var RADIUS = 46;
+var FILL = 0.8;
+var RadialChart = class extends LineChart {
+  get _type() {
+    return "radial-chart";
+  }
+  /** The rings fill to data-max, so there is no value axis. */
+  get _axis() {
+    return false;
+  }
+  get _points() {
+    return false;
+  }
+  get _circular() {
+    return true;
+  }
+  get _gauge() {
+    return this.el.classList.contains("gauge");
+  }
+  /** Whether .labels names the rings, which a sparkline never does. */
+  get _labeled() {
+    const list = this.el.classList;
+    return list.contains("labels") && !list.contains("sparkline");
+  }
+  /** How much of a circle a full ring spans. */
+  get _span() {
+    if (this._gauge) return 0.5;
+    return this._labeled ? 0.75 : 1;
+  }
+  /** The number of segments data-segments asks for, or 0 for whole rings. */
+  get _segments() {
+    const segments = Math.round(this._number("segments") ?? 0);
+    return segments > 1 ? segments : 0;
+  }
+  /** A share as drawn: with segments, to the nearest whole segment. */
+  _lit(fraction) {
+    const segments = this._segments;
+    return segments ? Math.round(fraction * segments) / segments : fraction;
+  }
+  /**
+   * A ring's dash pattern for a share of its span. Round caps reach half the
+   * width past each end of a dash, so a capped dash is one width shorter and
+   * its gap one width longer; one shorter than the width is a dot. With
+   * segments, each lit segment is a dash with the ring gap after it, and
+   * the last gap runs out the circle so the pattern does not repeat.
+   */
+  _dash(fraction, length, capped) {
+    const [cap, segments, span] = [capped ? this._width : 0, this._segments, this._span * length];
+    if (!segments) return `${Math.max(1e-3, fraction * span - cap).toFixed(3)} ${length.toFixed(3)}`;
+    const size = span / segments;
+    const dash = Math.max(1e-3, size - this._gap - cap);
+    const lit = Array.from({ length: Math.round(fraction * segments) }, () => `${dash.toFixed(3)} ${(size - dash).toFixed(3)}`);
+    return `${lit.join(" ").replace(/ [\d.]+$/, "") || 0} ${length.toFixed(3)}`;
+  }
+  /** The distance between rings' middles, or one ring's width. */
+  get _step() {
+    return this._radii.length > 1 ? this._radii[0] - this._radii[1] : this._width;
+  }
+  show(index) {
+    if (!this._tooltip || index === this.activeIndex) return;
+    super.show(index);
+    this._rings.forEach((ring, i) => ring.classList.toggle("active", i === index));
+    this._sweeps.forEach((sweep, i) => sweep?.classList.toggle("active", i === index));
+    if (this._tooltip.hidden) return;
+    const color = seriesColor(index);
+    this._tooltip.querySelectorAll("[data-series]").forEach((span) => {
+      span.dataset.series = color;
+    });
+  }
+  /** The tooltip sits where the ring's fill ends. */
+  _place(index) {
+    const turn = this._turn(this._fractions[index]);
+    const r = this._radii[index];
+    const [x, y] = [r * Math.sin(turn * 2 * Math.PI), -r * Math.cos(turn * 2 * Math.PI)];
+    this._tooltip.style.left = `${50 + x}%`;
+    this._tooltip.style.top = `${(50 + y) / (this._gauge ? 50 : 100) * 100}%`;
+    this._tooltip.classList.toggle("end", x > 0);
+  }
+  /** A fraction of the ring as a turn clockwise from the top. */
+  _turn(fraction) {
+    return fraction * this._span - (this._gauge ? 0.25 : 0);
+  }
+  /** For more than one row, a legend of every row with its color and cell. */
+  _guides() {
+    if (this.labels.length < 2) return [];
+    const text = this.series[0].text;
+    const colors = this.labels.map((_, i) => seriesColor(i));
+    return [rowLegend("radial-chart-legend", colors, this.labels.map((label, i) => [label, text[i]]))];
+  }
+  /** The ring under the pointer by its distance from the middle, or -1. */
+  _indexAt(e) {
+    const box = this._plot.getBoundingClientRect();
+    const [x, y] = [e.clientX - box.left - box.width / 2, e.clientY - box.top - box.width / 2];
+    if (this._gauge && y > 0) return this._nameAt(e);
+    const distance = this._distance(x, y, box.width);
+    return this._radii.findIndex((r) => Math.abs(distance - r) <= this._step / 2);
+  }
+  /**
+   * How far a point is from the middle in the SVG's 100-unit box. In the
+   * top left quarter .labels leaves empty, the names run straight across,
+   * so only the height counts and a name picks its own ring.
+   */
+  _distance(x, y, width) {
+    if (this._span === 0.75 && x < 0 && y < 0) return -y / width * 100;
+    return Math.hypot(x, y) / width * 100;
+  }
+  /** Under a gauge's base line, the ring whose name is under the pointer, or -1. */
+  _nameAt(e) {
+    const name = e.target.closest(".radial-chart-names > span");
+    return name ? [...name.parentElement.children].indexOf(name) : -1;
+  }
+  /** The rings' turn, from three o'clock to the top or, for a gauge, to nine, and the SVG's box. */
+  get _frame() {
+    return this._gauge ? ["rotate(180)", "-50 -50 100 50"] : ["rotate(-90)", "-50 -50 100 100"];
+  }
+  /**
+   * With .gradient, a ring's fill drawn again in HTML: a conic gradient from
+   * a tint of its colour at the ring's start to the full colour where the
+   * fill ends, masked to the fill's own dash, so it follows the ring round.
+   * An SVG stroke takes no conic gradient.
+   */
+  _sweep(r, i, length) {
+    const fraction = this._fractions[i];
+    if (!fraction || !this.el.classList.contains("gradient")) return null;
+    const [transform, viewBox] = this._frame;
+    const width = this._width.toFixed(3);
+    const dash = this._dash(fraction, length, true);
+    const image = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='${viewBox}'><circle r='${r.toFixed(3)}' stroke-width='${width}' transform='${transform}' stroke-dasharray='${dash}' stroke-dashoffset='${(-this._width / 2).toFixed(3)}' stroke-linecap='round' fill='none' stroke='black'/></svg>`;
+    const sweep = document.createElement("div");
+    sweep.className = "radial-chart-sweep";
+    sweep.dataset.series = seriesColor(i);
+    sweep.style.setProperty("--radial-chart-shape", `url("data:image/svg+xml,${encodeURIComponent(image)}")`);
+    sweep.style.setProperty("--radial-chart-from", `${this._turn(0)}turn`);
+    sweep.style.setProperty("--radial-chart-to", `${fraction * this._span}turn`);
+    return sweep;
+  }
+  /**
+   * With .labels, each row's name left of its ring's start at the top,
+   * ending at the middle line. CSS shrinks the text to fit crowded rings.
+   * A gauge's names hang under its base line in a row each, innermost
+   * first, starting below their rings' starts.
+   */
+  _names() {
+    if (!this._labeled) return [];
+    const count = this._radii.length;
+    const names = document.createElement("div");
+    names.className = "radial-chart-names";
+    names.style.setProperty("--radial-chart-step", this._step.toFixed(3));
+    this._plot.style.setProperty("--radial-chart-rows", String(count));
+    names.append(...this._radii.map((r, i) => {
+      const name = document.createElement("span");
+      name.style.setProperty("--radial-chart-at", `${(50 - r).toFixed(3)}%`);
+      name.style.setProperty("--radial-chart-row", String(count - 1 - i));
+      name.textContent = this.labels[i];
+      return name;
+    }));
+    return [names];
+  }
+  /**
+   * An SVG of rings in a -50 to 50 box, the top half for a gauge. Each row
+   * is a track circle and a fill circle whose dash is its share; CSS draws
+   * them from --radial-chart-dash. The total is HTML over it.
+   */
+  _draw() {
+    const style = getComputedStyle(this.el);
+    const token = (name, fallback) => {
+      const value = parseFloat(style.getPropertyValue(`--md-comp-radial-chart-${name}`));
+      return Number.isFinite(value) ? value : fallback;
+    };
+    const count = this.labels.length;
+    let [width, gap] = [Math.max(0, token("thickness", 8)), Math.max(0, token("gap", 2))];
+    const scale = Math.min(1, RADIUS * FILL / (count * width + (count - 1) * gap || 1));
+    [width, gap] = [width * scale, gap * scale];
+    [this._width, this._gap] = [width, gap];
+    this._radii = this.labels.map((_, i) => RADIUS - width / 2 - i * (width + gap));
+    const max = [parseFloat(this.el.dataset.max ?? ""), this.options.max ?? NaN, 100].find((value) => value > 0);
+    this._fractions = this.series[0].values.map((value) => this._lit(Math.min(1, Math.max(0, (value ?? 0) / max))));
+    const [transform, viewBox] = this._frame;
+    const svg = svgNode("svg", { viewBox, focusable: "false" });
+    const span = this._span;
+    this._sweeps = [];
+    this._rings = this._radii.map((r, i) => {
+      const length = 2 * Math.PI * r;
+      const circle = (name, fraction, capped) => {
+        const ring2 = svgNode("circle", { class: name, r: r.toFixed(3), transform, "stroke-width": width.toFixed(3) });
+        ring2.style.setProperty("--radial-chart-dash", this._dash(fraction, length, capped));
+        if (capped) {
+          ring2.style.setProperty("--radial-chart-offset", (-width / 2).toFixed(3));
+          ring2.classList.add("capped");
+        }
+        return ring2;
+      };
+      const ring = circle("radial-chart-ring", this._fractions[i], true);
+      ring.dataset.series = seriesColor(i);
+      if (!this._fractions[i]) ring.classList.add("empty");
+      svg.append(circle("radial-chart-track", 1, span < 1 || !!this._segments), ring);
+      this._sweeps.push(this._sweep(r, i, length));
+      return ring;
+    });
+    const rings = document.createElement("div");
+    rings.className = "radial-chart-rings";
+    rings.setAttribute("aria-hidden", "true");
+    rings.style.setProperty("--radial-chart-middle", `${(this._radii[count - 1] - this._width / 2) * 2}%`);
+    rings.append(svg, ...this._sweeps.filter((sweep) => sweep !== null), ...this._names());
+    const total = this._total("radial-chart-total");
+    if (total) rings.append(total);
+    return rings;
+  }
+};
+RadialChart.key = "Expressive_RadialChart";
+
+export {
+  RadialChart
+};
+//# sourceMappingURL=chunk-7YQBHTK3.mjs.map

package/dist/js/chunks/chunk-7YQBHTK3.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/radialChart.ts"],
+  "sourcesContent": ["import { LineChart, LineChartOptions, rowLegend, seriesColor } from './lineChart';\nimport { svgNode as node } from '../core/utils';\n\nexport type RadialChartOptions = LineChartOptions;\n\n/** The outer ring's outer edge in a 100-unit box. */\nconst RADIUS = 46;\n/** The rings never fill more of the radius than this, leaving a middle. */\nconst FILL = 0.8;\n\n/**\n * Radial chart. It reads its <table> like LineChart, but draws each row of\n * the first value column as a ring, outermost first, filled clockwise from\n * the top as a share of `data-max` above zero (100 by default). With `.gauge` the rings\n * are half circles over the middle. With `.labels` they are three quarters\n * of a circle, leaving the top left quarter for each row's name at the\n * ring's start; a gauge's names hang under its base line instead.\n * `data-segments` splits each ring into that many segments, filled whole,\n * and `.gradient` shades each fill along the ring, from a light tint at its\n * start to its full color at its end. A <tfoot>\n * row shows in the middle, and\n * a legend lists the rows when there is more than one. Further columns show\n * in the tooltip.\n *\n * Call `update()` after changing the ring tokens, and after changing the table\n * unless it was started with `watch` or `data-watch`.\n */\nexport class RadialChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Each ring's middle radius, and their shared width. */\n  private _radii: number[];\n  private _width: number;\n  /** The gap between rings, and between segments. */\n  private _gap: number;\n  /** Each row's share of the maximum, from 0 to 1. */\n  private _fractions: number[];\n  private _rings: SVGCircleElement[];\n  /** With .gradient, each ring's fill drawn again as a conic gradient, or null for none. */\n  private _sweeps: (HTMLElement | null)[];\n\n  protected get _type() {\n    return 'radial-chart';\n  }\n\n  /** The rings fill to data-max, so there is no value axis. */\n  protected get _axis() {\n    return false;\n  }\n\n  protected get _points() {\n    return false;\n  }\n\n  protected get _circular() {\n    return true;\n  }\n\n  private get _gauge() {\n    return this.el.classList.contains('gauge');\n  }\n\n  /** Whether .labels names the rings, which a sparkline never does. */\n  private get _labeled() {\n    const list = this.el.classList;\n    return list.contains('labels') && !list.contains('sparkline');\n  }\n\n  /** How much of a circle a full ring spans. */\n  private get _span() {\n    if (this._gauge) return 0.5;\n    return this._labeled ? 0.75 : 1;\n  }\n\n  /** The number of segments data-segments asks for, or 0 for whole rings. */\n  private get _segments() {\n    const segments = Math.round(this._number('segments') ?? 0);\n    return segments > 1 ? segments : 0;\n  }\n\n  /** A share as drawn: with segments, to the nearest whole segment. */\n  private _lit(fraction: number) {\n    const segments = this._segments;\n    return segments ? Math.round(fraction * segments) / segments : fraction;\n  }\n\n  /**\n   * A ring's dash pattern for a share of its span. Round caps reach half the\n   * width past each end of a dash, so a capped dash is one width shorter and\n   * its gap one width longer; one shorter than the width is a dot. With\n   * segments, each lit segment is a dash with the ring gap after it, and\n   * the last gap runs out the circle so the pattern does not repeat.\n   */\n  private _dash(fraction: number, length: number, capped: boolean) {\n    const [cap, segments, span] = [capped ? this._width : 0, this._segments, this._span * length];\n    if (!segments) return `${Math.max(0.001, fraction * span - cap).toFixed(3)} ${length.toFixed(3)}`;\n    // A dash and its gap make one segment, even where a small ring leaves\n    // too little room for the gap and the caps.\n    const size = span / segments;\n    const dash = Math.max(0.001, size - this._gap - cap);\n    const lit = Array.from({ length: Math.round(fraction * segments) }, () => `${dash.toFixed(3)} ${(size - dash).toFixed(3)}`);\n    return `${lit.join(' ').replace(/ [\\d.]+$/, '') || 0} ${length.toFixed(3)}`;\n  }\n\n  /** The distance between rings' middles, or one ring's width. */\n  private get _step() {\n    return this._radii.length > 1 ? this._radii[0] - this._radii[1] : this._width;\n  }\n\n  static key = 'Expressive_RadialChart';\n\n  show(index: number) {\n    if (!this._tooltip || index === this.activeIndex) return;\n    super.show(index);\n    this._rings.forEach((ring, i) => ring.classList.toggle('active', i === index));\n    this._sweeps.forEach((sweep, i) => sweep?.classList.toggle('active', i === index));\n    // LineChart hides the tooltip for -1 and for an index past the last row.\n    if (this._tooltip.hidden) return;\n    const color = seriesColor(index);\n    this._tooltip.querySelectorAll<HTMLElement>('[data-series]').forEach((span) => {\n      span.dataset.series = color;\n    });\n  }\n\n  /** The tooltip sits where the ring's fill ends. */\n  protected _place(index: number) {\n    const turn = this._turn(this._fractions[index]);\n    const r = this._radii[index];\n    const [x, y] = [r * Math.sin(turn * 2 * Math.PI), -r * Math.cos(turn * 2 * Math.PI)];\n    this._tooltip.style.left = `${50 + x}%`;\n    this._tooltip.style.top = `${((50 + y) / (this._gauge ? 50 : 100)) * 100}%`;\n    // On the right half it opens leftwards, over the rings.\n    this._tooltip.classList.toggle('end', x > 0);\n  }\n\n  /** A fraction of the ring as a turn clockwise from the top. */\n  private _turn(fraction: number) {\n    // A gauge starts at nine o'clock.\n    return fraction * this._span - (this._gauge ? 0.25 : 0);\n  }\n\n  /** For more than one row, a legend of every row with its color and cell. */\n  protected _guides(): Element[] {\n    if (this.labels.length < 2) return [];\n    const text = this.series[0].text;\n    const colors = this.labels.map((_, i) => seriesColor(i));\n    return [rowLegend('radial-chart-legend', colors, this.labels.map((label, i) => [label, text[i]]))];\n  }\n\n  /** The ring under the pointer by its distance from the middle, or -1. */\n  protected _indexAt(e: PointerEvent) {\n    const box = this._plot.getBoundingClientRect();\n    // The middle is half the width down in both shapes.\n    const [x, y] = [e.clientX - box.left - box.width / 2, e.clientY - box.top - box.width / 2];\n    if (this._gauge && y > 0) return this._nameAt(e);\n    // A gap belongs to a ring beside it.\n    const distance = this._distance(x, y, box.width);\n    return this._radii.findIndex((r) => Math.abs(distance - r) <= this._step / 2);\n  }\n\n  /**\n   * How far a point is from the middle in the SVG's 100-unit box. In the\n   * top left quarter .labels leaves empty, the names run straight across,\n   * so only the height counts and a name picks its own ring.\n   */\n  private _distance(x: number, y: number, width: number) {\n    // Only three-quarter rings leave that quarter empty.\n    if (this._span === 0.75 && x < 0 && y < 0) return (-y / width) * 100;\n    return (Math.hypot(x, y) / width) * 100;\n  }\n\n  /** Under a gauge's base line, the ring whose name is under the pointer, or -1. */\n  private _nameAt(e: PointerEvent) {\n    const name = (e.target as Element).closest('.radial-chart-names > span');\n    return name ? [...name.parentElement!.children].indexOf(name) : -1;\n  }\n\n  /** The rings' turn, from three o'clock to the top or, for a gauge, to nine, and the SVG's box. */\n  private get _frame(): [transform: string, viewBox: string] {\n    return this._gauge ? ['rotate(180)', '-50 -50 100 50'] : ['rotate(-90)', '-50 -50 100 100'];\n  }\n\n  /**\n   * With .gradient, a ring's fill drawn again in HTML: a conic gradient from\n   * a tint of its colour at the ring's start to the full colour where the\n   * fill ends, masked to the fill's own dash, so it follows the ring round.\n   * An SVG stroke takes no conic gradient.\n   */\n  private _sweep(r: number, i: number, length: number) {\n    const fraction = this._fractions[i];\n    if (!fraction || !this.el.classList.contains('gradient')) return null;\n    const [transform, viewBox] = this._frame;\n    const width = this._width.toFixed(3);\n    const dash = this._dash(fraction, length, true);\n    const image = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='${viewBox}'><circle r='${r.toFixed(3)}' stroke-width='${width}' transform='${transform}' stroke-dasharray='${dash}' stroke-dashoffset='${(-this._width / 2).toFixed(3)}' stroke-linecap='round' fill='none' stroke='black'/></svg>`;\n    const sweep = document.createElement('div');\n    sweep.className = 'radial-chart-sweep';\n    sweep.dataset.series = seriesColor(i);\n    sweep.style.setProperty('--radial-chart-shape', `url(\"data:image/svg+xml,${encodeURIComponent(image)}\")`);\n    sweep.style.setProperty('--radial-chart-from', `${this._turn(0)}turn`);\n    sweep.style.setProperty('--radial-chart-to', `${fraction * this._span}turn`);\n    return sweep;\n  }\n\n  /**\n   * With .labels, each row's name left of its ring's start at the top,\n   * ending at the middle line. CSS shrinks the text to fit crowded rings.\n   * A gauge's names hang under its base line in a row each, innermost\n   * first, starting below their rings' starts.\n   */\n  private _names(): Element[] {\n    if (!this._labeled) return [];\n    const count = this._radii.length;\n    const names = document.createElement('div');\n    names.className = 'radial-chart-names';\n    names.style.setProperty('--radial-chart-step', this._step.toFixed(3));\n    // The plot leaves room under a gauge for the rows.\n    this._plot.style.setProperty('--radial-chart-rows', String(count));\n    names.append(...this._radii.map((r, i) => {\n      const name = document.createElement('span');\n      // The ring's top, or a gauge ring's start along the base line.\n      name.style.setProperty('--radial-chart-at', `${(50 - r).toFixed(3)}%`);\n      name.style.setProperty('--radial-chart-row', String(count - 1 - i));\n      name.textContent = this.labels[i];\n      return name;\n    }));\n    return [names];\n  }\n\n  /**\n   * An SVG of rings in a -50 to 50 box, the top half for a gauge. Each row\n   * is a track circle and a fill circle whose dash is its share; CSS draws\n   * them from --radial-chart-dash. The total is HTML over it.\n   */\n  protected _draw(): Element {\n    const style = getComputedStyle(this.el);\n    const token = (name: string, fallback: number) => {\n      const value = parseFloat(style.getPropertyValue(`--md-comp-radial-chart-${name}`));\n      return Number.isFinite(value) ? value : fallback;\n    };\n    const count = this.labels.length;\n    let [width, gap] = [Math.max(0, token('thickness', 8)), Math.max(0, token('gap', 2))];\n    // Too many rings to leave a middle thin, with their gaps, to fit.\n    // ponytail: past about 18 rings they are hairlines; that many values want a bar chart.\n    const scale = Math.min(1, (RADIUS * FILL) / (count * width + (count - 1) * gap || 1));\n    [width, gap] = [width * scale, gap * scale];\n    [this._width, this._gap] = [width, gap];\n    this._radii = this.labels.map((_, i) => RADIUS - width / 2 - i * (width + gap));\n    // A maximum of zero or less means nothing, so it falls back.\n    const max = [parseFloat(this.el.dataset.max ?? ''), this.options.max ?? NaN, 100].find((value) => value > 0)!;\n    this._fractions = this.series[0].values.map((value) => this._lit(Math.min(1, Math.max(0, (value ?? 0) / max))));\n\n    const [transform, viewBox] = this._frame;\n    const svg = node('svg', { viewBox, focusable: 'false' });\n    const span = this._span;\n    this._sweeps = [];\n    this._rings = this._radii.map((r, i) => {\n      const length = 2 * Math.PI * r;\n      // A capped dash starts half a width in, where its round cap ends.\n      const circle = (name: string, fraction: number, capped: boolean) => {\n        const ring = node('circle', { class: name, r: r.toFixed(3), transform, 'stroke-width': width.toFixed(3) });\n        ring.style.setProperty('--radial-chart-dash', this._dash(fraction, length, capped));\n        if (capped) {\n          ring.style.setProperty('--radial-chart-offset', (-width / 2).toFixed(3));\n          ring.classList.add('capped');\n        }\n        return ring;\n      };\n      const ring = circle('radial-chart-ring', this._fractions[i], true) as SVGCircleElement;\n      ring.dataset.series = seriesColor(i);\n      // An empty ring would still draw its round cap.\n      if (!this._fractions[i]) ring.classList.add('empty');\n      // Only a track short of a whole circle, or in segments, has ends to round.\n      svg.append(circle('radial-chart-track', 1, span < 1 || !!this._segments), ring);\n      this._sweeps.push(this._sweep(r, i, length));\n      return ring;\n    });\n\n    const rings = document.createElement('div');\n    rings.className = 'radial-chart-rings';\n    rings.setAttribute('aria-hidden', 'true');\n    rings.style.setProperty('--radial-chart-middle', `${(this._radii[count - 1] - this._width / 2) * 2}%`);\n    rings.append(svg, ...this._sweeps.filter((sweep) => sweep !== null), ...this._names());\n\n    const total = this._total('radial-chart-total');\n    if (total) rings.append(total);\n    return rings;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["ring"]
+}

package/dist/js/chunks/chunk-7YZ5CN3V.mjs

@@ -0,0 +1,33 @@
+import {
+  Utils
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/behaviors/imageCompare.ts
+var rangeSelector = '.image-compare > input[type="range"]';
+var _ImageCompare = class _ImageCompare {
+  static Init() {
+    if (_ImageCompare._initialized || typeof document === "undefined") return;
+    _ImageCompare._initialized = true;
+    document.addEventListener("input", (e) => {
+      const range = Utils.eventTarget(e);
+      if (range?.matches(rangeSelector)) _ImageCompare.sync(range);
+    });
+    Utils.onDocumentReady(() => {
+      document.querySelectorAll(rangeSelector).forEach((range) => _ImageCompare.sync(range));
+    });
+  }
+  /** Moves the divider of a compare to its range's current value. */
+  static sync(range) {
+    const min = parseFloat(range.min) || 0;
+    const max = Number.isNaN(parseFloat(range.max)) ? 100 : parseFloat(range.max);
+    const fraction = max === min ? 0 : (parseFloat(range.value) - min) / (max - min);
+    range.parentElement.style.setProperty("--md-comp-image-compare-position", `${fraction * 100}%`);
+  }
+};
+_ImageCompare._initialized = false;
+var ImageCompare = _ImageCompare;
+
+export {
+  ImageCompare
+};
+//# sourceMappingURL=chunk-7YZ5CN3V.mjs.map

package/dist/js/chunks/chunk-7YZ5CN3V.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/behaviors/imageCompare.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\n\nconst rangeSelector = '.image-compare > input[type=\"range\"]';\n\n/**\n * Image compare. Keeps `--md-comp-image-compare-position` on each\n * `.image-compare` in step with its range input, so the divider and the\n * revealed image follow the value. Listens on the document, so compares added\n * later follow too once moved; `ImageCompare.sync(el)` sets one at once.\n */\nexport class ImageCompare {\n  private static _initialized = false;\n\n  static Init() {\n    if (ImageCompare._initialized || typeof document === 'undefined') return;\n    ImageCompare._initialized = true;\n    document.addEventListener('input', (e) => {\n      const range = Utils.eventTarget(e);\n      if (range?.matches(rangeSelector)) ImageCompare.sync(<HTMLInputElement>range);\n    });\n    Utils.onDocumentReady(() => {\n      document.querySelectorAll<HTMLInputElement>(rangeSelector).forEach((range) => ImageCompare.sync(range));\n    });\n  }\n\n  /** Moves the divider of a compare to its range's current value. */\n  static sync(range: HTMLInputElement) {\n    const min = parseFloat(range.min) || 0;\n    const max = Number.isNaN(parseFloat(range.max)) ? 100 : parseFloat(range.max);\n    const fraction = max === min ? 0 : (parseFloat(range.value) - min) / (max - min);\n    range.parentElement.style.setProperty('--md-comp-image-compare-position', `${fraction * 100}%`);\n  }\n}\n"],
+  "mappings": ";;;;;AAEA,IAAM,gBAAgB;AAQf,IAAM,gBAAN,MAAM,cAAa;AAAA,EAGxB,OAAO,OAAO;AACZ,QAAI,cAAa,gBAAgB,OAAO,aAAa,YAAa;AAClE,kBAAa,eAAe;AAC5B,aAAS,iBAAiB,SAAS,CAAC,MAAM;AACxC,YAAM,QAAQ,MAAM,YAAY,CAAC;AACjC,UAAI,OAAO,QAAQ,aAAa,EAAG,eAAa,KAAuB,KAAK;AAAA,IAC9E,CAAC;AACD,UAAM,gBAAgB,MAAM;AAC1B,eAAS,iBAAmC,aAAa,EAAE,QAAQ,CAAC,UAAU,cAAa,KAAK,KAAK,CAAC;AAAA,IACxG,CAAC;AAAA,EACH;AAAA;AAAA,EAGA,OAAO,KAAK,OAAyB;AACnC,UAAM,MAAM,WAAW,MAAM,GAAG,KAAK;AACrC,UAAM,MAAM,OAAO,MAAM,WAAW,MAAM,GAAG,CAAC,IAAI,MAAM,WAAW,MAAM,GAAG;AAC5E,UAAM,WAAW,QAAQ,MAAM,KAAK,WAAW,MAAM,KAAK,IAAI,QAAQ,MAAM;AAC5E,UAAM,cAAc,MAAM,YAAY,oCAAoC,GAAG,WAAW,GAAG,GAAG;AAAA,EAChG;AACF;AAtBa,cACI,eAAe;AADzB,IAAM,eAAN;",
+  "names": []
+}

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

@@ -0,0 +1,28 @@
+import {
+  Utils
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/behaviors/lists.ts
+var rowTarget = ":scope > li > :is(a[href], button):only-child";
+var STEPS = { ArrowUp: -1, ArrowDown: 1 };
+var _Lists = class _Lists {
+  // A second Init adds nothing: addEventListener ignores a listener it has.
+  static Init() {
+    if (typeof document === "undefined") return;
+    document.addEventListener("keydown", _Lists._onKeydown);
+  }
+};
+_Lists._onKeydown = (e) => {
+  const list = Utils.eventTarget(e)?.closest(".list");
+  if (!list) return;
+  const target = Utils.focusTarget([...list.querySelectorAll(rowTarget)], e, STEPS);
+  if (!target) return;
+  e.preventDefault();
+  target.focus();
+};
+var Lists = _Lists;
+
+export {
+  Lists
+};
+//# sourceMappingURL=chunk-AI73GJKG.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/behaviors/lists.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\n\n/** A row that is one link or button from edge to edge, as the list docs write it. */\nconst rowTarget = ':scope > li > :is(a[href], button):only-child';\n\nconst STEPS = { ArrowUp: -1, ArrowDown: 1 };\n\n/**\n * Keys for lists of actionable rows. In a `.list` whose rows are each a\n * single link or button, Up and Down move focus to the row before or after,\n * and Home and End to the first and last, skipping disabled rows. Every row\n * stays a Tab stop and keeps its own role, so the keys are a shortcut on\n * top of native navigation rather than a listbox. Radio rows already move\n * with the arrows, and other lists are left alone.\n */\nexport class Lists {\n  // A second Init adds nothing: addEventListener ignores a listener it has.\n  static Init() {\n    if (typeof document === 'undefined') return;\n    document.addEventListener('keydown', Lists._onKeydown);\n  }\n\n  private static _onKeydown = (e: KeyboardEvent) => {\n    const list = Utils.eventTarget(e)?.closest('.list');\n    if (!list) return;\n    const target = Utils.focusTarget([...list.querySelectorAll<HTMLElement>(rowTarget)], e, STEPS);\n    if (!target) return;\n    e.preventDefault();\n    target.focus();\n  };\n}\n"],
+  "mappings": ";;;;;AAGA,IAAM,YAAY;AAElB,IAAM,QAAQ,EAAE,SAAS,IAAI,WAAW,EAAE;AAUnC,IAAM,SAAN,MAAM,OAAM;AAAA;AAAA,EAEjB,OAAO,OAAO;AACZ,QAAI,OAAO,aAAa,YAAa;AACrC,aAAS,iBAAiB,WAAW,OAAM,UAAU;AAAA,EACvD;AAUF;AAfa,OAOI,aAAa,CAAC,MAAqB;AAChD,QAAM,OAAO,MAAM,YAAY,CAAC,GAAG,QAAQ,OAAO;AAClD,MAAI,CAAC,KAAM;AACX,QAAM,SAAS,MAAM,YAAY,CAAC,GAAG,KAAK,iBAA8B,SAAS,CAAC,GAAG,GAAG,KAAK;AAC7F,MAAI,CAAC,OAAQ;AACb,IAAE,eAAe;AACjB,SAAO,MAAM;AACf;AAdK,IAAM,QAAN;",
+  "names": []
+}

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

@@ -1,9 +1,9 @@
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils
+} from "./chunk-ZVLOUDIJ.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-ANKFWNWT.mjs.map

package/dist/js/chunks/chunk-ANKFWNWT.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": []
+}