@expressivecss/expressive 0.12.0 → 0.13.1

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

@@ -0,0 +1,292 @@
+import {
+  Utils
+} from "./chunk-6OMRGML6.mjs";
+import {
+  Component
+} from "./chunk-LTWPGFBR.mjs";
+
+// src/ts/components/messageScroller.ts
+var _defaults = {
+  autoScroll: true,
+  defaultScrollPosition: "end",
+  peek: 64
+};
+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 {
+  constructor(el, options) {
+    super(el, options, _MessageScroller);
+    this._opened = false;
+    this._following = false;
+    /** A press is down: it may be a tap or a scrollbar drag. */
+    this._holding = false;
+    this._lastTop = 0;
+    /** Where a programmatic scroll is heading; null when none is running. */
+    this._target = null;
+    /** Distance left to the target at the last scroll event. */
+    this._distance = Infinity;
+    /** The first visible message and its offset from the viewport top. */
+    this._ref = null;
+    this._refOffset = 0;
+    /** The latest anchored turn, which the spacer lets reach the top. */
+    this._anchor = null;
+    this._spacer = 0;
+    this._last = null;
+    this._resizeObserver = null;
+    this._mutationObserver = null;
+    // A programmatic scroll ends when it arrives, or when a scroll moves away
+    // from its target because something else took over.
+    this._handleScroll = () => {
+      if (this._target !== null) {
+        const distance = Math.abs(this.viewport.scrollTop - this._resolve(this._target));
+        if (distance > EDGE && distance < this._distance) {
+          this._distance = distance;
+          return;
+        }
+        this._target = null;
+      }
+      this._settle();
+    };
+    this._handleUserScroll = (e) => {
+      if (e.type === "wheel" && e.deltaY >= 0) return;
+      if (e.type === "keydown" && !UP_KEYS.has(e.key)) return;
+      this._target = null;
+      if (e.type === "pointerdown" || e.type === "touchstart") this._holding = true;
+      else this._following = false;
+    };
+    this._handleRelease = () => {
+      if (!this._holding) return;
+      this._holding = false;
+      if (this._following) this.viewport.scrollTop = this.viewport.scrollHeight;
+      this._sync();
+    };
+    this._handleButtonClick = () => this.scrollToEnd();
+    this._handleMutations = (records) => {
+      for (const record of records) {
+        record.addedNodes.forEach((node) => {
+          if (node instanceof Element) this._resizeObserver?.observe(node);
+        });
+        record.removedNodes.forEach((node) => {
+          if (node instanceof Element) this._resizeObserver?.unobserve(node);
+        });
+      }
+      const previous = this._last;
+      this._last = this.viewport.lastElementChild;
+      if (!this._opened) return;
+      if (!this._following && this._target === null) this._restore();
+      if (!this.options.autoScroll) return;
+      if (previous && previous.parentElement !== this.viewport) return;
+      for (let item = this._last; item && item !== previous; item = item.previousElementSibling) {
+        if (item.hasAttribute("data-scroll-anchor")) {
+          this._anchor = item;
+          this._updateSpacer();
+          this._following = true;
+          this._scrollTo(this._top(item) - this.options.peek);
+          return;
+        }
+      }
+    };
+    this._handleResize = () => {
+      if (!this._opened) {
+        if (this.viewport.clientHeight > 0) this._open();
+        return;
+      }
+      this._updateSpacer();
+      const v = this.viewport;
+      if (this._target === "end") this._scrollTo("end");
+      else if (this._target === null) {
+        if (this._following && !this._holding) v.scrollTop = v.scrollHeight;
+        else this._restore();
+      }
+      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) {
+      console.error("MessageScroller needs a .message-scroller-viewport child.");
+      return;
+    }
+    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._mutationObserver = new MutationObserver(this._handleMutations);
+    this._mutationObserver.observe(this.viewport, { childList: true });
+    this.viewport.addEventListener("scroll", this._handleScroll, { passive: true });
+    for (const type of ["wheel", "touchstart", "pointerdown", "keydown"]) {
+      this.viewport.addEventListener(type, this._handleUserScroll, { passive: true });
+    }
+    for (const type of RELEASE_EVENTS) document.addEventListener(type, this._handleRelease);
+    this.button?.addEventListener("click", this._handleButtonClick);
+  }
+  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;
+    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;
+    }
+  }
+  /** Scrolls to the latest message and resumes following. */
+  scrollToEnd() {
+    this._following = this.options.autoScroll;
+    this._scrollTo("end");
+  }
+  /** Scrolls to the first message. */
+  scrollToStart() {
+    this._following = false;
+    this._scrollTo(0);
+  }
+  /**
+   * Scrolls the element with this id to the top of the viewport, below the
+   * peek, and stops following.
+   * @returns false when no such element is inside the viewport.
+   */
+  scrollToMessage(id) {
+    const target = Utils.getElementById(this.viewport, id);
+    if (!target || !this.viewport.contains(target)) return false;
+    this._following = false;
+    this._scrollTo(this._top(target) - this.options.peek);
+    return true;
+  }
+  _open() {
+    this._opened = true;
+    const v = this.viewport;
+    const position = this.options.defaultScrollPosition;
+    const anchors = v.querySelectorAll(":scope > [data-scroll-anchor]");
+    const anchor = position === "last-anchor" ? anchors[anchors.length - 1] : null;
+    if (position === "start") v.scrollTop = 0;
+    else if (anchor && this._contentEnd() - this._top(anchor) + this.options.peek > v.clientHeight) {
+      v.scrollTop = this._top(anchor) - this.options.peek;
+    } else v.scrollTop = v.scrollHeight;
+    this._settle();
+  }
+  /**
+   * Records where the reader is once no programmatic scroll is running.
+   * Content can grow between a scroll and the resize that re-pins the end,
+   * so only moving toward the start releases following.
+   */
+  _settle() {
+    const top = this.viewport.scrollTop;
+    const kept = this._following && top >= this._lastTop - EDGE;
+    this._following = this.options.autoScroll && (kept || this._atEnd());
+    this._lastTop = top;
+    this._capture();
+    this._sync();
+  }
+  _scrollTo(target) {
+    const v = this.viewport;
+    if (Math.abs(v.scrollTop - this._resolve(target)) <= EDGE) {
+      this._target = null;
+      this._settle();
+      return;
+    }
+    this._target = target;
+    this._distance = Infinity;
+    const reduce = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    v.scrollTo({
+      top: target === "end" ? v.scrollHeight : target,
+      behavior: reduce ? "auto" : "smooth"
+    });
+  }
+  _resolve(target) {
+    const max = this.viewport.scrollHeight - this.viewport.clientHeight;
+    return target === "end" ? max : Math.max(0, Math.min(target, max));
+  }
+  _atEnd() {
+    const v = this.viewport;
+    return v.scrollHeight - v.scrollTop - v.clientHeight <= EDGE;
+  }
+  /** Offset of an element from the top of the scrolled content. */
+  _top(el) {
+    const v = this.viewport;
+    return el.getBoundingClientRect().top - v.getBoundingClientRect().top - v.clientTop + v.scrollTop;
+  }
+  /** Bottom of the content without the spacer, padding included. */
+  _contentEnd() {
+    const last = this.viewport.lastElementChild;
+    if (!last) return 0;
+    const padding = parseFloat(getComputedStyle(this.viewport).paddingBlockEnd) - this._spacer;
+    return this._top(last) + last.getBoundingClientRect().height + padding;
+  }
+  /** Remembers the first visible message so prepends can keep it in place. */
+  _capture() {
+    const items = this.viewport.children;
+    const top = this.viewport.getBoundingClientRect().top + this.viewport.clientTop;
+    let low = 0;
+    let high = items.length - 1;
+    while (low < high) {
+      const mid = low + high >> 1;
+      if (items[mid].getBoundingClientRect().bottom > top) high = mid;
+      else low = mid + 1;
+    }
+    this._ref = items[low] ?? null;
+    this._refOffset = this._ref ? this._ref.getBoundingClientRect().top - top : 0;
+  }
+  /** Moves the remembered message back to where the reader last saw it. */
+  _restore() {
+    if (this._ref?.parentElement !== this.viewport) {
+      this._capture();
+      return;
+    }
+    const top = this.viewport.getBoundingClientRect().top + this.viewport.clientTop;
+    const delta = this._ref.getBoundingClientRect().top - top - this._refOffset;
+    if (Math.abs(delta) >= 1) this.viewport.scrollTop += delta;
+  }
+  /** Sizes the blank space that lets the latest anchored turn reach the top. */
+  _updateSpacer() {
+    let space = 0;
+    if (this._anchor?.parentElement === this.viewport) {
+      const room = this._top(this._anchor) - this.options.peek + this.viewport.clientHeight;
+      space = Math.max(0, Math.ceil(room - this._contentEnd()));
+    } else this._anchor = null;
+    if (space === this._spacer) return;
+    this._spacer = space;
+    if (space) this.viewport.style.setProperty("--md-comp-message-scroller-spacer", `${space}px`);
+    else this.viewport.style.removeProperty("--md-comp-message-scroller-spacer");
+  }
+  /** The button is inert while there is nothing below. */
+  _sync() {
+    if (!this.button) return;
+    const idle = this._atEnd();
+    const root = this.button.getRootNode();
+    if (idle && root.activeElement === this.button) this.viewport.focus({ preventScroll: true });
+    this.button.inert = idle;
+  }
+};
+
+export {
+  MessageScroller
+};
+//# sourceMappingURL=chunk-CCWDV5CR.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/messageScroller.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\nimport { Component, BaseOptions, InitElements, InitElement } 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, MessageScroller);\n    this.el['Expressive_MessageScroller'] = this;\n    this.options = {\n      ...MessageScroller.defaults,\n      ...options\n    };\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    if (typeof ResizeObserver !== 'undefined') {\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    }\n    this._mutationObserver = new MutationObserver(this._handleMutations);\n    this._mutationObserver.observe(this.viewport, { childList: true });\n    this.viewport.addEventListener('scroll', this._handleScroll, { passive: true });\n    for (const type of ['wheel', 'touchstart', 'pointerdown', 'keydown']) {\n      this.viewport.addEventListener(type, this._handleUserScroll, { passive: true });\n    }\n    for (const type of RELEASE_EVENTS) document.addEventListener(type, this._handleRelease);\n    this.button?.addEventListener('click', this._handleButtonClick);\n  }\n\n  static get defaults(): MessageScrollerOptions {\n    return _defaults;\n  }\n\n  /**\n   * Initializes instance of MessageScroller.\n   * @param el HTML element.\n   * @param options Component options.\n   */\n  static init(el: HTMLElement, options?: Partial<MessageScrollerOptions>): MessageScroller;\n  /**\n   * Initializes instances of MessageScroller.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(\n    els: InitElements<InitElement>,\n    options?: Partial<MessageScrollerOptions>\n  ): MessageScroller[];\n  /**\n   * Initializes instances of MessageScroller.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<MessageScrollerOptions> = {}\n  ): MessageScroller | MessageScroller[] {\n    return super.init(els, options, MessageScroller);\n  }\n\n  static getInstance(el: HTMLElement): MessageScroller {\n    return el['Expressive_MessageScroller'];\n  }\n\n  destroy() {\n    this.el['Expressive_MessageScroller'] = undefined;\n    if (!this.viewport) return;\n    this._resizeObserver?.disconnect();\n    this._mutationObserver?.disconnect();\n    this.viewport.removeEventListener('scroll', this._handleScroll);\n    for (const type of ['wheel', 'touchstart', 'pointerdown', 'keydown']) {\n      this.viewport.removeEventListener(type, this._handleUserScroll);\n    }\n    for (const type of RELEASE_EVENTS) document.removeEventListener(type, this._handleRelease);\n    this.viewport.style.removeProperty('--md-comp-message-scroller-spacer');\n    if (this.button) {\n      this.button.removeEventListener('click', this._handleButtonClick);\n      this.button.inert = false;\n    }\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 = typeof matchMedia === 'function' && 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-DTKR54I6.mjs

@@ -0,0 +1,270 @@
+import {
+  Utils
+} from "./chunk-6OMRGML6.mjs";
+import {
+  Component
+} from "./chunk-LTWPGFBR.mjs";
+
+// src/ts/components/questionnaire.ts
+var _defaults = {
+  progressLabel: "Question {current} of {total}",
+  requiredMessage: "Choose an answer to continue."
+};
+var NAVIGATION = ["previous", "skip", "next"];
+var Questionnaire = class _Questionnaire extends Component {
+  constructor(el, options) {
+    super(el, options, _Questionnaire);
+    this._active = null;
+    this._generated = [];
+    this._generatedIds = [];
+    /** Set while one submission's invalid events arrive, so only the first opens. */
+    this._reporting = false;
+    /** Shows the question at `index` without checking the current one. */
+    this.goTo = (index) => {
+      const item = this.items[index];
+      if (!item) return;
+      this._active = item;
+      this._render();
+      const controls = this._controls(item).filter((control) => !control.disabled);
+      (controls.find((control) => control.checked) ?? controls[0])?.focus();
+    };
+    /** Checks the shown question and moves to the next one if it is answered. */
+    this.next = () => {
+      if (this._validate(this._active)) this.goTo(this.index + 1);
+    };
+    /** Moves to the previous question. */
+    this.previous = () => this.goTo(this.index - 1);
+    /** Clears the answer to the shown question and moves to the next one. */
+    this.skip = () => {
+      if (!this._active) return;
+      for (const control of this._controls(this._active)) {
+        const isChoice = control instanceof HTMLInputElement && (control.type === "radio" || control.type === "checkbox");
+        if (isChoice ? !control.checked : !control.value) continue;
+        if (isChoice) control.checked = false;
+        else control.value = "";
+        control.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+      this.goTo(this.index + 1);
+    };
+    this._handleClick = (e) => {
+      const button = e.target.closest?.("button");
+      if (!button || !this._buttons().includes(button)) return;
+      if (NAVIGATION.includes(button.value)) {
+        e.preventDefault();
+        this[button.value]();
+        return;
+      }
+      this._syncRequired();
+    };
+    // Enter in a field moves on instead of submitting the form early.
+    this._handleKeydown = (e) => {
+      if (e.key !== "Enter" || e.defaultPrevented || e.isComposing) return;
+      if (!(e.target instanceof HTMLInputElement) || this.index >= this.items.length - 1) return;
+      e.preventDefault();
+      this.next();
+    };
+    // A submission found an unanswered question, possibly a hidden one. Open the
+    // first instead of letting the browser report a control it cannot show.
+    // One submission fires its invalid events in a single task.
+    this._handleInvalid = (e) => {
+      const item = this.items.find((item2) => item2.contains(e.target));
+      if (!item) return;
+      e.preventDefault();
+      if (this._reporting) return;
+      this._reporting = true;
+      setTimeout(() => this._reporting = false);
+      this._active = item;
+      this._render();
+      this._validate(item);
+    };
+    // An answer clears the question's error.
+    this._handleInput = (e) => {
+      this._syncRequired();
+      const item = e.target.closest?.("fieldset");
+      if (item instanceof HTMLFieldSetElement && item.classList.contains("invalid")) this._setInvalid(item, false);
+    };
+    this.el["Expressive_Questionnaire"] = this;
+    const progressLabel = el.dataset.progressLabel;
+    this.options = {
+      ..._Questionnaire.defaults,
+      ...progressLabel ? { progressLabel } : {},
+      ...options
+    };
+    this._progress = document.createElement("div");
+    this._progress.className = "questionnaire-progress";
+    this._progressText = document.createElement("span");
+    this._progressText.id = `questionnaire-progress-${Utils.guid()}`;
+    this._progressBar = document.createElement("progress");
+    this._progressBar.className = "progress";
+    this._progressBar.setAttribute("aria-labelledby", this._progressText.id);
+    this._progress.append(this._progressText, this._progressBar);
+    this.el.prepend(this._progress);
+    for (const item of this._fieldsets()) {
+      const ids = Array.from(item.querySelectorAll(":scope > p:not(.questionnaire-error)")).map((p) => this._ensureId(p, "questionnaire-description"));
+      if (ids.length && !item.hasAttribute("aria-describedby")) {
+        item.setAttribute("aria-describedby", ids.join(" "));
+        this._generatedIds.push(item);
+      }
+    }
+    this._active = this.items[0] ?? null;
+    this._syncRequired();
+    this._render();
+    this._observer = new MutationObserver(() => {
+      this._syncRequired();
+      this._render();
+    });
+    this._observer.observe(this.el, { attributes: true, subtree: true, attributeFilter: ["disabled"] });
+    this.el.addEventListener("click", this._handleClick);
+    this.el.addEventListener("keydown", this._handleKeydown);
+    this.el.addEventListener("input", this._handleInput);
+    this.el.addEventListener("invalid", this._handleInvalid, true);
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  /**
+   * Initializes instances of Questionnaire.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els, options = {}) {
+    return super.init(els, options, _Questionnaire);
+  }
+  static getInstance(el) {
+    return el["Expressive_Questionnaire"];
+  }
+  /** The questions that apply: every fieldset child that is not disabled. */
+  get items() {
+    return this._fieldsets().filter((item) => !item.disabled);
+  }
+  /** Position of the shown question in `items`. */
+  get index() {
+    return this.items.indexOf(this._active);
+  }
+  destroy() {
+    this._observer.disconnect();
+    this.el.removeEventListener("click", this._handleClick);
+    this.el.removeEventListener("keydown", this._handleKeydown);
+    this.el.removeEventListener("input", this._handleInput);
+    this.el.removeEventListener("invalid", this._handleInvalid, true);
+    for (const item of this._fieldsets()) {
+      if (item.hasAttribute("data-required")) for (const control of this._controls(item)) control.setCustomValidity("");
+      item.hidden = false;
+      this._setInvalid(item, false);
+    }
+    for (const button of this._buttons()) button.hidden = false;
+    this._progress.remove();
+    for (const el of this._generated) el.remove();
+    for (const el of this._generatedIds) {
+      el.removeAttribute(el instanceof HTMLFieldSetElement ? "aria-describedby" : "id");
+    }
+    this.el["Expressive_Questionnaire"] = void 0;
+  }
+  _fieldsets() {
+    return Array.from(this.el.querySelectorAll(":scope > fieldset"));
+  }
+  /** The footer's navigation and submit buttons. */
+  _buttons() {
+    return Array.from(this.el.querySelectorAll(":scope > footer > button")).filter(
+      (button) => NAVIGATION.includes(button.value) || button.type === "submit"
+    );
+  }
+  _controls(item) {
+    return Array.from(item.elements).filter(
+      (el) => el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement || el instanceof HTMLInputElement && el.type !== "button" && el.type !== "submit"
+    );
+  }
+  _required(item) {
+    return item.hasAttribute("data-required") || this._controls(item).some((control) => control.required);
+  }
+  _ensureId(el, prefix) {
+    if (!el.id) {
+      el.id = `${prefix}-${Utils.guid()}`;
+      this._generatedIds.push(el);
+    }
+    return el.id;
+  }
+  _render() {
+    const items = this.items;
+    if (!items.includes(this._active)) {
+      const all = this._fieldsets();
+      const after = all.slice(all.indexOf(this._active) + 1).find((item) => !item.disabled);
+      this._active = after ?? items[items.length - 1] ?? null;
+    }
+    const index = items.indexOf(this._active);
+    const last = index === items.length - 1;
+    for (const item of this._fieldsets()) item.hidden = item !== this._active;
+    for (const button of this._buttons()) {
+      if (button.value === "previous") button.hidden = index <= 0;
+      else if (button.value === "skip") button.hidden = last || !this._active || this._required(this._active);
+      else if (button.value === "next") button.hidden = last;
+      else button.hidden = !last;
+    }
+    this._progressText.textContent = this.options.progressLabel.replace("{current}", String(index + 1)).replace("{total}", String(items.length));
+    this._progressBar.max = Math.max(items.length, 1);
+    this._progressBar.value = index + 1;
+  }
+  /**
+   * Puts "choose at least one" on the first enabled checkbox of each
+   * data-required group with none checked, so the browser's validation, and
+   * every way of submitting, sees it. A disabled checkbox is not sent, so it
+   * does not count.
+   */
+  _syncRequired() {
+    for (const item of this._fieldsets()) {
+      if (!item.hasAttribute("data-required")) continue;
+      const boxes = this._controls(item).filter(
+        (control) => control instanceof HTMLInputElement && control.type === "checkbox"
+      );
+      const enabled = boxes.filter((box) => !box.disabled);
+      for (const box of boxes) box.setCustomValidity("");
+      if (enabled.length && !enabled.some((box) => box.checked)) {
+        const error = item.querySelector(":scope > .questionnaire-error:not([data-generated])");
+        enabled[0].setCustomValidity(error?.textContent.trim() || this.options.requiredMessage);
+      }
+    }
+  }
+  /** The first control in the question that still needs an answer. */
+  _invalidControl(item) {
+    return this._controls(item).find((control) => control.willValidate && !control.validity.valid);
+  }
+  /** Shows the question's error and returns false when it needs an answer. */
+  _validate(item) {
+    this._syncRequired();
+    const invalid = item && this._invalidControl(item);
+    if (!invalid) return true;
+    let error = item.querySelector(":scope > .questionnaire-error");
+    if (!error) {
+      error = document.createElement("p");
+      error.className = "questionnaire-error";
+      error.dataset.generated = "";
+      error.textContent = invalid.validationMessage || this.options.requiredMessage;
+      item.append(error);
+      this._generated.push(error);
+    }
+    this._setInvalid(item, true);
+    invalid.focus();
+    return false;
+  }
+  _setInvalid(item, invalid) {
+    item.classList.toggle("invalid", invalid);
+    const error = item.querySelector(":scope > .questionnaire-error");
+    const described = (item.getAttribute("aria-describedby") ?? "").split(" ").filter((id) => id && id !== error?.id);
+    if (invalid && error) described.push(this._ensureId(error, "questionnaire-error"));
+    if (described.length) item.setAttribute("aria-describedby", described.join(" "));
+    else item.removeAttribute("aria-describedby");
+    for (const control of this._controls(item)) {
+      if (invalid) control.setAttribute("aria-invalid", "true");
+      else control.removeAttribute("aria-invalid");
+    }
+    if (!invalid && this._generated.includes(error)) {
+      error.remove();
+      this._generated.splice(this._generated.indexOf(error), 1);
+    }
+  }
+};
+
+export {
+  Questionnaire
+};
+//# sourceMappingURL=chunk-DTKR54I6.mjs.map