@expressivecss/expressive 0.15.0 → 0.17.0

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/treeSelect.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\nimport { FormSelect, FormSelectOptions } from './select';\n\n// Tree select. A native <select data-tree> whose options name their parent's\n// value in data-parent. The native select still owns the form value, reset,\n// validity and disabled state; this builds a role=\"tree\" popup over it, where\n// only a leaf can be chosen.\n\n/** An option and the options that name it as their parent. */\nexport interface OptionNode {\n  option: HTMLOptionElement;\n  children: OptionNode[];\n}\n\n/**\n * Turns flat options into a tree. An option sits under the first option whose\n * value its `data-parent` names. It is a root when that is empty, names no\n * option, or starts a chain of parents that comes back to the option itself;\n * its own children stay under it. Siblings keep document order.\n */\nexport function optionTree(options: HTMLOptionElement[]): OptionNode[] {\n  const byValue = new Map<string, HTMLOptionElement>();\n  options.forEach((option) => { if (!byValue.has(option.value)) byValue.set(option.value, option); });\n  const parentOf = (option: HTMLOptionElement) => byValue.get(option.dataset.parent || undefined);\n  // ponytail: walks each option's whole chain, fine for a select's few hundred options.\n  const loops = (option: HTMLOptionElement) => {\n    let parent = parentOf(option);\n    for (let steps = 0; parent && parent !== option && steps < options.length; steps++) parent = parentOf(parent);\n    return parent === option;\n  };\n  const nodes = new Map(options.map((option) => [option, { option, children: [] as OptionNode[] }]));\n  const roots: OptionNode[] = [];\n  options.forEach((option) => {\n    const parent = loops(option) ? undefined : parentOf(option);\n    (parent ? nodes.get(parent).children : roots).push(nodes.get(option));\n  });\n  return roots;\n}\n\ntype TreeKey = (tree: TreeSelect, row: HTMLElement, e: KeyboardEvent) => void;\n\n/** Up and Down move a visible row; Home and End go to the ends. */\nconst STEPS = { ArrowUp: -1, ArrowDown: 1 };\nconst move: TreeKey = (tree, _row, e) => tree._focusRow(Utils.focusTarget(tree._visibleRows(), e, STEPS));\nconst activate: TreeKey = (tree, row) => tree._activate(row);\n\n/** What each key does to the focused row, with the arrows as in a left-to-right tree. */\nconst TREE_KEYS: Record<string, TreeKey> = {\n  ArrowDown: move,\n  ArrowUp: move,\n  Home: move,\n  End: move,\n  ArrowRight: (tree, row) => tree._openOrEnter(row),\n  ArrowLeft: (tree, row) => tree._closeOrLeave(row),\n  '*': (tree, row) => tree._openSiblings(row),\n  Enter: activate,\n  ' ': activate\n};\n\n/** Any other single character searches the rows' text. */\nconst typeahead: TreeKey = (tree, row, e) => tree._typeahead(row, e.key);\n\n/** In a right-to-left tree the arrows that open and close swap. */\nconst MIRRORED: Record<string, string> = { ArrowLeft: 'ArrowRight', ArrowRight: 'ArrowLeft' };\n\nexport class TreeSelect extends FormSelect {\n  /**\n   * The role=\"tree\" list inside the Menu surface. Menu styles the rows of its\n   * <menu> directly, so the tree keeps its rows one list further down.\n   */\n  tree: HTMLUListElement;\n  /** Each branch row and the option it stands for. */\n  private _branches: Map<HTMLElement, HTMLOptionElement>;\n  /** Branch options this disabled, so the form never submits one. */\n  private _disabledBranches: Set<HTMLOptionElement>;\n  /** While refresh() rebuilds the rows, the values of the branches left open. */\n  private _keepOpen: Set<string> | undefined;\n  /** Expansion before the first nonempty query, retained across query edits. */\n  private _searchOpen: Set<string> | undefined;\n  /** What typeahead has read so far, and the timer that clears it. */\n  private _typed = '';\n  private _typedTimer: ReturnType<typeof setTimeout>;\n\n  constructor(el: HTMLSelectElement, options: Partial<FormSelectOptions>) {\n    super(el, options as FormSelectOptions);\n    // A browser-default select stays native.\n    if (!this.menuEl) return;\n    const { signal } = this._events;\n    if (!this._searchInput) {\n      this.menuEl.setAttribute('role', 'presentation');\n      this.input.setAttribute('aria-haspopup', 'tree');\n      this.input.setAttribute('aria-controls', this.tree.id);\n    }\n    this.menuEl.removeAttribute('aria-multiselectable');\n    this._nameTree();\n    this._leaveImplicitBranch();\n    this._handleSelectChange();\n    // Capture, so the tree's keys and clicks are handled before Menu's own\n    // listeners on the same element.\n    if (!this._searchInput) this.menuEl.addEventListener('keydown', this._handleTreeKeydown, { signal, capture: true });\n    this.menuEl.addEventListener('click', this._handleTreeClick, { signal, capture: true });\n  }\n\n  static key = 'Expressive_TreeSelect';\n\n  _setValueToInput() {\n    // Branches are navigation controls, not multiple-select values.\n    if (this.isMultiple) this._branches.forEach(option => { option.selected = false; });\n    super._setValueToInput();\n  }\n\n  protected _canSearch() {\n    return this.options.searchable;\n  }\n\n  protected _searchList() { return this.tree; }\n\n  protected _searchRows() { return this._enabledRows(); }\n\n  protected _filterSearch(query: string) {\n    const matches = this._matchingRows(query);\n    this.tree.querySelectorAll<HTMLElement>('li[role=\"treeitem\"]').forEach(row => { row.hidden = !matches.has(row); });\n    this._searchExpansion(query);\n  }\n\n  private _matchingRows(query: string) {\n    const matches = new Set<HTMLElement>();\n    this._values.filter(({ el }) => el.textContent.trim().toLowerCase().includes(query)).forEach(({ optionEl }) => {\n      for (let row = optionEl; row; row = this._parentRow(row)) matches.add(row);\n    });\n    return matches;\n  }\n\n  private _searchExpansion(query: string) {\n    if (query) {\n      this._searchOpen ??= this._openValues();\n      this._branches.forEach((_option, row) => { if (!row.hidden) this._setExpanded(row, true); });\n      return;\n    }\n    const saved = this._searchOpen;\n    this._searchOpen = undefined;\n    if (saved) this._branches.forEach((option, row) => this._setExpanded(row, saved.has(option.value)));\n  }\n\n  protected _searchNavigate(e: KeyboardEvent) {\n    if (e.target === this._searchInput) super._searchNavigate(e);\n    else this._handleTreeKeydown(e);\n  }\n\n  destroy() {\n    clearTimeout(this._typedTimer);\n    this._restoreBranches();\n    super.destroy();\n  }\n\n  /**\n   * Rebuilds the tree from the native options, keeping open each branch whose\n   * value is still there and, while the popup is open, focus on the same row.\n   */\n  refresh() {\n    const focused = this._focusedOption();\n    this._keepOpen = this._searchOpen ?? this._openValues();\n    super.refresh();\n    this._keepOpen = undefined;\n    this._restoreOpenFocus(focused);\n  }\n\n  private _restoreOpenFocus(option: HTMLOptionElement) {\n    if (option && this.menu?.isOpen) this._restoreFocus(option);\n  }\n\n  /** The option whose row has focus, if one does. */\n  private _focusedOption() {\n    const root = this.menuEl?.getRootNode() as Document | ShadowRoot | undefined;\n    return this._optionOf(root?.activeElement?.closest<HTMLElement>('li[role=\"treeitem\"]'));\n  }\n\n  /** The values of the open branches. */\n  private _openValues() {\n    return new Set(Array.from(this._branches ?? [], ([li, option]) => (li.ariaExpanded === 'true' ? option.value : null)));\n  }\n\n  /** Focuses the row for `option` again, or the first enabled row once it is gone or disabled, or the field. */\n  private _restoreFocus(option: HTMLOptionElement) {\n    const row = this._rowOf(option);\n    this._expandTo(row);\n    const rows = this._enabledRows();\n    const target = rows.includes(row) ? row : rows[0];\n    if (target) this._focusRow(target);\n    else (this._searchInput ?? this.input).focus();\n  }\n\n  /** Names the tree as the field is named: aria-labelledby, then aria-label, then its labels. */\n  private _nameTree() {\n    const { input } = this;\n    if (input.hasAttribute('aria-labelledby')) this.tree.setAttribute('aria-labelledby', input.getAttribute('aria-labelledby'));\n    else if (input.ariaLabel) this.tree.ariaLabel = input.ariaLabel;\n    else this._labelTree();\n  }\n\n  private _labelTree() {\n    const ids = Array.from(this.input.labels ?? [], (label, index) => (label.id ||= `${this.input.id}-label-${index}`));\n    if (ids.length) this.tree.setAttribute('aria-labelledby', ids.join(' '));\n  }\n\n  // The tree takes its keys and clicks on the menu itself.\n  protected _setupOptionHandlers() {}\n\n  protected _buildOptions() {\n    this._restoreBranches();\n    this._branches = new Map();\n    this.selectOptions = this._nativeOptions();\n    this._values = [];\n    const options = this.selectOptions.filter((option): option is HTMLOptionElement => option.tagName === 'OPTION');\n    // One list for the instance's life, so its name survives refresh().\n    if (!this.tree) {\n      this.tree = document.createElement('ul');\n      this.tree.id = 'select-tree-' + Utils.guid();\n      this.tree.setAttribute('role', 'tree');\n    }\n    this.tree.ariaMultiSelectable = String(this.isMultiple);\n    this.tree.replaceChildren(...optionTree(options).map((node) => this._row(node)));\n    this.menuEl.append(this.tree);\n  }\n\n  /**\n   * A select with no selected option picks its first one, which is often a\n   * branch, and disabling the branch does not move the selection. Unless the\n   * markup selected it, move to the option a form reset would pick now that\n   * branches are disabled: the first enabled leaf, or none. Only on start:\n   * after that a selected branch is one a script chose.\n   */\n  private _leaveImplicitBranch() {\n    if (this.isMultiple || !this._browserPickedBranch()) return;\n    const leaf = Array.from(this.el.options).find((option) => !option.disabled);\n    if (leaf) leaf.selected = true;\n    else this.el.selectedIndex = -1;\n  }\n\n  /** Whether the selection is a branch this disabled, which the markup did not select. */\n  private _browserPickedBranch() {\n    const chosen = this.el.selectedOptions[0];\n    return !!chosen && !chosen.defaultSelected && this._disabledBranches.has(chosen);\n  }\n\n  private _row(node: OptionNode): HTMLLIElement {\n    const li = document.createElement('li');\n    li.id = 'select-option-' + Utils.guid();\n    li.setAttribute('role', 'treeitem');\n    li.tabIndex = -1;\n    const label = document.createElement('span');\n    label.textContent = node.option.textContent;\n    li.append(label);\n    if (node.children.length) this._branch(li, node);\n    else this._leaf(li, node.option);\n    return li;\n  }\n\n  private _branch(li: HTMLLIElement, node: OptionNode) {\n    const group = document.createElement('ul');\n    group.setAttribute('role', 'group');\n    group.append(...node.children.map((child) => this._row(child)));\n    li.append(group);\n    this._setExpanded(li, !!this._keepOpen?.has(node.option.value));\n    this._branches.set(li, node.option);\n    if (node.option.disabled) return;\n    node.option.disabled = true;\n    this._disabledBranches.add(node.option);\n  }\n\n  private _leaf(li: HTMLLIElement, option: HTMLOptionElement) {\n    if (this.el.matches(':disabled') || option.disabled) {\n      li.classList.add('disabled');\n      li.ariaDisabled = 'true';\n    }\n    this._values.push({ el: option, optionEl: li });\n  }\n\n  private _restoreBranches() {\n    this._disabledBranches?.forEach((option) => { option.disabled = false; });\n    this._disabledBranches = new Set();\n  }\n\n  private _setExpanded(li: HTMLElement, open: boolean) {\n    li.ariaExpanded = String(open);\n    li.querySelector<HTMLElement>(':scope > ul').hidden = !open;\n  }\n\n  /** The rows not inside a closed branch, in document order. */\n  _visibleRows(): HTMLElement[] {\n    return Array.from(this.tree.querySelectorAll<HTMLElement>('li[role=\"treeitem\"]')).filter((li) => !li.closest('[hidden]'));\n  }\n\n  private _enabledRows() {\n    return this._visibleRows().filter((row) => !row.matches('.disabled'));\n  }\n\n  _focusRow(row: HTMLElement | null | undefined) {\n    row?.focus({ preventScroll: true });\n    row?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n  }\n\n  /** Opens the chosen leaf's branches and focuses it, or the first row a person can choose or open. */\n  protected _focusSelected() {\n    // Opening may finish after the user has already focused a tree row.\n    if (!this.menu.options.autoFocus || Utils.focusIsIn(this.menuEl)) return;\n    const chosen = this._values.find(({ el, optionEl }) => el.selected && !optionEl.matches('.disabled'));\n    this._restoreFocus(chosen?.el);\n  }\n\n  /** Opens every branch around `row`. */\n  private _expandTo(row: HTMLElement | undefined) {\n    for (let branch = this._parentRow(row); branch; branch = this._parentRow(branch)) this._setExpanded(branch, true);\n  }\n\n  /** The branch row holding `row`, never an element outside the tree. */\n  private _parentRow(row: HTMLElement | null | undefined) {\n    const parent = row?.parentElement.closest<HTMLElement>('li[role=\"treeitem\"]');\n    return this._branches.has(parent) ? parent : null;\n  }\n\n  private _optionOf(row: HTMLElement | null | undefined) {\n    return this._branches?.get(row) ?? this._values?.find(({ optionEl }) => optionEl === row)?.el;\n  }\n\n  private _rowOf(option: HTMLOptionElement | undefined) {\n    const branch = Array.from(this._branches).find(([, branchOption]) => branchOption === option)?.[0];\n    return branch ?? this._values.find(({ el }) => el === option)?.optionEl;\n  }\n\n  /** Chooses a leaf, or opens or closes a branch. */\n  _activate(row: HTMLElement) {\n    if (row.closest('[hidden]')) return;\n    if (this._branches.has(row)) this._toggle(row, row.ariaExpanded !== 'true');\n    else this._selectOptionElement(row);\n  }\n\n  /** Opens a closed branch, or moves into an open one. */\n  _openOrEnter(row: HTMLElement) {\n    if (!this._branches.has(row)) return;\n    if (row.ariaExpanded !== 'true') this._toggle(row, true);\n    else this._focusRow(row.querySelector<HTMLElement>(':scope > ul > li:not(.disabled, [hidden])'));\n  }\n\n  /** Closes an open branch, or moves to the parent row. */\n  _closeOrLeave(row: HTMLElement) {\n    if (row.ariaExpanded === 'true') this._toggle(row, false);\n    else this._focusRow(this._parentRow(row));\n  }\n\n  /** Opens every branch beside `row`. */\n  _openSiblings(row: HTMLElement) {\n    Array.from(row.parentElement.children).forEach((sibling) => {\n      if (this._branches.has(sibling as HTMLElement) && !sibling.hasAttribute('hidden')) this._toggle(sibling as HTMLElement, true);\n    });\n  }\n\n  /**\n   * Moves to the next row whose text starts with the characters typed in the\n   * last second, as Menu's typeahead does. A repeated search starts on the\n   * focused row, so typing more of its text keeps it.\n   */\n  _typeahead(row: HTMLElement, key: string) {\n    clearTimeout(this._typedTimer);\n    this._typed += key.toLowerCase();\n    this._typedTimer = setTimeout(() => { this._typed = ''; }, 1000);\n    const rows = this._enabledRows();\n    const from = rows.indexOf(row) + (this._typed.length === 1 ? 1 : 0);\n    const match = [...rows.slice(from), ...rows.slice(0, from)]\n      .find((candidate) => candidate.firstChild.textContent.trim().toLowerCase().startsWith(this._typed));\n    this._focusRow(match);\n  }\n\n  private _toggle(row: HTMLElement, open: boolean) {\n    this._setExpanded(row, open);\n    if (this.menu?.isOpen) this.menu.recalculateDimensions();\n  }\n\n  private _keyFor(e: KeyboardEvent): TreeKey | undefined {\n    if (!Utils.plainKey(e)) return undefined;\n    return TREE_KEYS[this._logicalKey(e.key)] ?? (e.key.length === 1 ? typeahead : undefined);\n  }\n\n  /** The key as in a left-to-right tree. */\n  private _logicalKey(key: string) {\n    const rtl = getComputedStyle(this.tree).direction === 'rtl';\n    return (rtl && MIRRORED[key]) || key;\n  }\n\n  private _handleTreeKeydown = Utils.ignoringComposition((e: KeyboardEvent) => {\n    const row = Utils.eventTarget(e)?.closest<HTMLElement>('li[role=\"treeitem\"]');\n    const action = row && this._keyFor(e);\n    if (!action) return;\n    e.preventDefault();\n    e.stopPropagation();\n    action(this, row, e);\n  });\n\n  // Only a row's label acts. A disabled row passes clicks through to its\n  // group, which must not toggle the branch around it.\n  private _handleTreeClick = (e: MouseEvent) => {\n    const target = Utils.eventTarget(e);\n    if (!this.tree.contains(target)) return;\n    const label = target.closest('li[role=\"treeitem\"] > span');\n    e.preventDefault();\n    e.stopPropagation();\n    if (label) this._activate(label.parentElement);\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-C6CHEWYP.mjs → chunk-TMQDZSDC.mjs}

@@ -1,6 +1,6 @@
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-EB2V4OKL.mjs";
 
 // src/ts/components/particles.ts
 var _defaults = {
@@ -12,64 +12,80 @@ var _defaults = {
   vx: 0,
   vy: 0
 };
-var Particles = class _Particles extends Component {
+var Particles = class extends Component {
   constructor(el, options) {
-    super(el, options, _Particles);
+    super(el, options);
     this._particles = [];
     this._width = 0;
     this._height = 0;
+    /** The device pixel ratio the buffer was sized for, which painting scales by. */
+    this._dpr = 1;
     this._frame = 0;
     this._last = 0;
     // Pointer offset from the canvas center, kept from its last move inside.
     this._mouse = { x: 0, y: 0 };
     this._still = false;
+    this._visible = true;
+    this._motion = null;
+    this._theme = null;
     this._resizeObserver = null;
     this._visibility = null;
+    this._onMotion = () => {
+      this._still = this._motion.matches;
+      if (this._still) {
+        for (const p of this._particles) p.alpha = p.targetAlpha;
+        this._paint();
+      }
+      this._animate();
+    };
+    this._repaint = () => {
+      if (this._still) this._paint();
+    };
     this._onPointerMove = (e) => {
       const r = this.el.getBoundingClientRect();
       const x = e.clientX - r.left - r.width / 2;
       const y = e.clientY - r.top - r.height / 2;
       if (Math.abs(x) < r.width / 2 && Math.abs(y) < r.height / 2) this._mouse = { x, y };
     };
-    this.el["Expressive_Particles"] = this;
-    this.options = { ..._Particles.defaults, ...options };
     this._ctx = this.el.getContext("2d");
     if (!this._ctx) return;
     this._style = getComputedStyle(this.el);
-    this._still = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
-    this._reset();
-    if (typeof ResizeObserver !== "undefined") {
-      this._resizeObserver = new ResizeObserver(() => {
-        if (this.el.clientWidth !== this._width || this.el.clientHeight !== this._height) this._reset();
-      });
-      this._resizeObserver.observe(this.el);
-    }
-    if (this._still) return;
-    if (typeof IntersectionObserver === "undefined") {
-      this._start();
-      return;
-    }
-    this._visibility = new IntersectionObserver(([entry]) => entry.isIntersecting ? this._start() : this._stop());
+    this._motion = matchMedia("(prefers-reduced-motion: reduce)");
+    const { signal } = this._events;
+    this._motion.addEventListener("change", this._onMotion, { signal });
+    matchMedia("(prefers-color-scheme: dark)").addEventListener("change", this._repaint, { signal });
+    this._theme = new MutationObserver(this._repaint);
+    this._theme.observe(document.documentElement, { attributes: true, attributeFilter: ["theme"], subtree: true });
+    this._still = this._motion.matches;
+    this._fit();
+    this._scatter();
+    this._resizeObserver = new ResizeObserver(() => {
+      if (this.el.clientWidth !== this._width || this.el.clientHeight !== this._height) this._resize();
+    });
+    this._resizeObserver.observe(this.el);
+    this._visibility = new IntersectionObserver((entries) => {
+      this._visible = entries[entries.length - 1].isIntersecting;
+      this._animate();
+    });
     this._visibility.observe(this.el);
   }
   static get defaults() {
     return _defaults;
   }
-  static init(els, options = {}) {
-    return super.init(els, options, _Particles);
-  }
-  static getInstance(el) {
-    return el["Expressive_Particles"];
-  }
   destroy() {
     this._stop();
+    this._theme?.disconnect();
     this._resizeObserver?.disconnect();
     this._visibility?.disconnect();
     if (this._ctx) {
       this._ctx.setTransform(1, 0, 0, 1, 0, 0);
       this._ctx.clearRect(0, 0, this.el.width, this.el.height);
     }
-    this.el["Expressive_Particles"] = void 0;
+    super.destroy();
+  }
+  _animate() {
+    if (this._visible && !this._still) this._start();
+    else this._stop();
   }
   _start() {
     if (this._frame) return;
@@ -84,17 +100,36 @@ var Particles = class _Particles extends Component {
     this._frame = 0;
     window.removeEventListener("pointermove", this._onPointerMove);
   }
-  // Matches the pixel buffer to the canvas box and scatters a new set.
-  _reset() {
+  /** Matches the pixel buffer to the canvas box, which clears it. */
+  _fit() {
     this._width = this.el.clientWidth;
     this._height = this.el.clientHeight;
-    this.el.width = Math.round(this._width * devicePixelRatio);
-    this.el.height = Math.round(this._height * devicePixelRatio);
+    this._dpr = devicePixelRatio;
+    this.el.width = Math.round(this._width * this._dpr);
+    this.el.height = Math.round(this._height * this._dpr);
+  }
+  /** Scatters a new set of particles. */
+  _scatter() {
     this._particles = Array.from({ length: this.options.quantity }, () => this._particle());
-    if (this._still) {
-      for (const p of this._particles) p.alpha = p.targetAlpha;
-      this._paint();
+    if (this._still) for (const p of this._particles) p.alpha = p.targetAlpha;
+    this._repaint();
+  }
+  /**
+   * Refits the buffer and moves each particle with the box, so a drag that
+   * resizes the canvas every frame keeps the same dots. It used to scatter a
+   * new set each time. A box that had no size has no positions to keep.
+   * Refitting clears the buffer, and the observer runs after this frame's
+   * draw, so a moving canvas is painted here too or it shows blank.
+   */
+  _resize() {
+    const [width, height] = [this._width, this._height];
+    this._fit();
+    if (!width || !height) return this._scatter();
+    for (const p of this._particles) {
+      p.x *= this._width / width;
+      p.y *= this._height / height;
     }
+    this._paint();
   }
   _particle() {
     return {
@@ -132,7 +167,7 @@ var Particles = class _Particles extends Component {
   }
   _paint() {
     const ctx = this._ctx;
-    const dpr = devicePixelRatio;
+    const dpr = this._dpr;
     ctx.setTransform(1, 0, 0, 1, 0, 0);
     ctx.clearRect(0, 0, this.el.width, this.el.height);
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
@@ -147,8 +182,9 @@ var Particles = class _Particles extends Component {
     ctx.globalAlpha = 1;
   }
 };
+Particles.key = "Expressive_Particles";
 
 export {
   Particles
 };
-//# sourceMappingURL=chunk-C6CHEWYP.mjs.map
+//# sourceMappingURL=chunk-TMQDZSDC.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/particles.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\n\nexport interface ParticlesOptions extends BaseOptions {\n  /**\n   * Number of particles.\n   * @default 100\n   */\n  quantity: number;\n  /**\n   * How firmly particles hold their place against the pointer. Lower\n   * follows the pointer further.\n   * @default 50\n   */\n  staticity: number;\n  /**\n   * Frames a particle takes to catch up with the pointer. Higher is slower.\n   * @default 50\n   */\n  ease: number;\n  /**\n   * Base radius in pixels. Each particle adds 0 or 1 to it.\n   * @default 0.4\n   */\n  size: number;\n  /**\n   * A CSS color. Empty uses the canvas's CSS `color`, which defaults to the\n   * theme's on-surface color.\n   * @default ''\n   */\n  color: string;\n  /**\n   * Horizontal drift in pixels per frame. Negative drifts left.\n   * @default 0\n   */\n  vx: number;\n  /**\n   * Vertical drift in pixels per frame. Negative drifts up.\n   * @default 0\n   */\n  vy: number;\n}\n\nconst _defaults: ParticlesOptions = {\n  quantity: 100,\n  staticity: 50,\n  ease: 50,\n  size: 0.4,\n  color: '',\n  vx: 0,\n  vy: 0\n};\n\ninterface Particle {\n  x: number;\n  y: number;\n  translateX: number;\n  translateY: number;\n  size: number;\n  alpha: number;\n  targetAlpha: number;\n  dx: number;\n  dy: number;\n  magnetism: number;\n}\n\n/**\n * Particles. A `<canvas class=\"particles\">` covers its nearest positioned\n * ancestor with slowly drifting dots that lean toward the pointer. Under\n * reduced motion the dots are drawn once and stay still.\n */\nexport class Particles extends Component<ParticlesOptions> {\n  declare el: HTMLCanvasElement;\n  private _ctx: CanvasRenderingContext2D | null;\n  private _style: CSSStyleDeclaration;\n  private _particles: Particle[] = [];\n  private _width = 0;\n  private _height = 0;\n  /** The device pixel ratio the buffer was sized for, which painting scales by. */\n  private _dpr = 1;\n  private _frame = 0;\n  private _last = 0;\n  // Pointer offset from the canvas center, kept from its last move inside.\n  private _mouse = { x: 0, y: 0 };\n  private _still = false;\n  private _visible = true;\n  private _motion: MediaQueryList | null = null;\n  private _theme: MutationObserver | null = null;\n  private _resizeObserver: ResizeObserver | null = null;\n  private _visibility: IntersectionObserver | null = null;\n\n  constructor(el: HTMLElement, options: Partial<ParticlesOptions>) {\n    super(el, options);\n    this._ctx = this.el.getContext('2d');\n    if (!this._ctx) return;\n    this._style = getComputedStyle(this.el);\n    this._motion = matchMedia('(prefers-reduced-motion: reduce)');\n    const { signal } = this._events;\n    this._motion.addEventListener('change', this._onMotion, { signal });\n    // Still dots are painted once, so a theme or color-scheme change\n    // repaints them. Moving ones read the color every frame anyway.\n    matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this._repaint, { signal });\n    this._theme = new MutationObserver(this._repaint);\n    this._theme.observe(document.documentElement, { attributes: true, attributeFilter: ['theme'], subtree: true });\n    this._still = this._motion.matches;\n    this._fit();\n    this._scatter();\n    this._resizeObserver = new ResizeObserver(() => {\n      if (this.el.clientWidth !== this._width || this.el.clientHeight !== this._height) this._resize();\n    });\n    this._resizeObserver.observe(this.el);\n    // Animates only while on screen. A canvas scrolled away, hidden or\n    // removed without destroy() stops drawing and following the pointer.\n    // Entries arrive oldest first, so the last one is the current state.\n    this._visibility = new IntersectionObserver((entries) => {\n      this._visible = entries[entries.length - 1].isIntersecting;\n      this._animate();\n    });\n    this._visibility.observe(this.el);\n  }\n\n  static get defaults(): ParticlesOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_Particles';\n\n  destroy() {\n    this._stop();\n    this._theme?.disconnect();\n    this._resizeObserver?.disconnect();\n    this._visibility?.disconnect();\n    if (this._ctx) {\n      this._ctx.setTransform(1, 0, 0, 1, 0, 0);\n      this._ctx.clearRect(0, 0, this.el.width, this.el.height);\n    }\n    super.destroy();\n  }\n\n  private _animate() {\n    if (this._visible && !this._still) this._start();\n    else this._stop();\n  }\n\n  private _onMotion = () => {\n    this._still = this._motion.matches;\n    if (this._still) {\n      for (const p of this._particles) p.alpha = p.targetAlpha;\n      this._paint();\n    }\n    this._animate();\n  };\n\n  private _repaint = () => {\n    if (this._still) this._paint();\n  };\n\n  private _start() {\n    if (this._frame) return;\n    window.addEventListener('pointermove', this._onPointerMove, { passive: true });\n    this._frame = requestAnimationFrame((now) => { this._last = now; this._draw(now); });\n  }\n\n  private _stop() {\n    cancelAnimationFrame(this._frame);\n    this._frame = 0;\n    window.removeEventListener('pointermove', this._onPointerMove);\n  }\n\n  private _onPointerMove = (e: PointerEvent) => {\n    const r = this.el.getBoundingClientRect();\n    const x = e.clientX - r.left - r.width / 2;\n    const y = e.clientY - r.top - r.height / 2;\n    if (Math.abs(x) < r.width / 2 && Math.abs(y) < r.height / 2) this._mouse = { x, y };\n  };\n\n  /** Matches the pixel buffer to the canvas box, which clears it. */\n  private _fit() {\n    this._width = this.el.clientWidth;\n    this._height = this.el.clientHeight;\n    this._dpr = devicePixelRatio;\n    this.el.width = Math.round(this._width * this._dpr);\n    this.el.height = Math.round(this._height * this._dpr);\n  }\n\n  /** Scatters a new set of particles. */\n  private _scatter() {\n    this._particles = Array.from({ length: this.options.quantity }, () => this._particle());\n    if (this._still) for (const p of this._particles) p.alpha = p.targetAlpha;\n    this._repaint();\n  }\n\n  /**\n   * Refits the buffer and moves each particle with the box, so a drag that\n   * resizes the canvas every frame keeps the same dots. It used to scatter a\n   * new set each time. A box that had no size has no positions to keep.\n   * Refitting clears the buffer, and the observer runs after this frame's\n   * draw, so a moving canvas is painted here too or it shows blank.\n   */\n  private _resize() {\n    const [width, height] = [this._width, this._height];\n    this._fit();\n    if (!width || !height) return this._scatter();\n    for (const p of this._particles) {\n      p.x *= this._width / width;\n      p.y *= this._height / height;\n    }\n    this._paint();\n  }\n\n  private _particle(): Particle {\n    return {\n      x: Math.floor(Math.random() * this._width),\n      y: Math.floor(Math.random() * this._height),\n      translateX: 0,\n      translateY: 0,\n      size: Math.floor(Math.random() * 2) + this.options.size,\n      alpha: 0,\n      targetAlpha: Math.round((Math.random() * 0.6 + 0.1) * 10) / 10,\n      dx: (Math.random() - 0.5) * 0.1,\n      dy: (Math.random() - 0.5) * 0.1,\n      magnetism: 0.1 + Math.random() * 4\n    };\n  }\n\n  private _draw(now: number) {\n    // Frames are counted at 60 per second whatever the display rate.\n    const step = Math.min((now - this._last) / (1000 / 60), 4);\n    this._last = now;\n    const { staticity, ease, vx, vy } = this.options;\n    const follow = Math.min(step / ease, 1);\n    this._particles = this._particles.map((p) => {\n      p.x += (p.dx + vx) * step;\n      p.y += (p.dy + vy) * step;\n      p.translateX += (this._mouse.x / (staticity / p.magnetism) - p.translateX) * follow;\n      p.translateY += (this._mouse.y / (staticity / p.magnetism) - p.translateY) * follow;\n      // Fades in, and fades out within 20px of an edge.\n      const x = p.x + p.translateX;\n      const y = p.y + p.translateY;\n      const edge = Math.min(x - p.size, this._width - x - p.size, y - p.size, this._height - y - p.size) / 20;\n      p.alpha = edge > 1 ? Math.min(p.alpha + 0.02 * step, p.targetAlpha) : p.targetAlpha * edge;\n      const gone = p.x < -p.size || p.x > this._width + p.size || p.y < -p.size || p.y > this._height + p.size;\n      return gone ? this._particle() : p;\n    });\n    this._paint();\n    this._frame = requestAnimationFrame((t) => this._draw(t));\n  }\n\n  private _paint() {\n    const ctx = this._ctx!;\n    // The ratio the buffer has, not the current one: after the page moves to\n    // a screen with another ratio, painting at the new one drew every dot\n    // scaled and offset in the old buffer.\n    // ponytail: the buffer keeps the old ratio until the next resize; a\n    // resolution media query listener if a sharp redraw matters.\n    const dpr = this._dpr;\n    ctx.setTransform(1, 0, 0, 1, 0, 0);\n    ctx.clearRect(0, 0, this.el.width, this.el.height);\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    // Read every frame, so a theme or color-scheme change applies at once.\n    ctx.fillStyle = this.options.color || this._style.color;\n    for (const p of this._particles) {\n      if (p.alpha <= 0) continue;\n      ctx.globalAlpha = p.alpha;\n      ctx.beginPath();\n      ctx.arc(p.x + p.translateX, p.y + p.translateY, p.size, 0, 2 * Math.PI);\n      ctx.fill();\n    }\n    ctx.globalAlpha = 1;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,48 @@
+import {
+  Snackbar
+} from "./chunk-HEH7E3KO.mjs";
+import {
+  Utils
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/behaviors/copy.ts
+var _Copy = class _Copy {
+  // A second Init adds nothing: addEventListener ignores a listener it has.
+  static Init() {
+    if (typeof document === "undefined") return;
+    document.addEventListener("click", _Copy._onClick);
+  }
+  /** The text a copy button would write, or null when it names nothing. */
+  static textFor(button) {
+    if (button.hasAttribute("data-copy")) return button.getAttribute("data-copy");
+    const source = Utils.getElementById(button, button.getAttribute("data-copy-for") ?? "");
+    if (!source) return null;
+    return source instanceof HTMLInputElement || source instanceof HTMLTextAreaElement || source instanceof HTMLSelectElement ? source.value : (source.textContent ?? "").trim();
+  }
+  static async _onClick(e) {
+    const button = Utils.closestInPath(e, "[data-copy], [data-copy-for]");
+    if (!button || button.matches(':disabled, [aria-disabled="true"]')) return;
+    const text = _Copy.textFor(button);
+    if (text === null) return;
+    let copied = true;
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      copied = false;
+    }
+    new Snackbar({
+      text: copied ? button.getAttribute("data-copy-message") || _Copy.i18n.copied : button.getAttribute("data-copy-error") || _Copy.i18n.failed,
+      root: button,
+      // A second copy answers at once rather than waiting behind the first.
+      replace: true
+    });
+    Utils.emit(button, "copy", { text, copied });
+  }
+};
+_Copy.i18n = { copied: "Copied", failed: "Couldn't copy" };
+var Copy = _Copy;
+
+export {
+  Copy
+};
+//# sourceMappingURL=chunk-TVSX5YA2.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/behaviors/copy.ts"],
+  "sourcesContent": ["import { Snackbar } from '../components/snackbar';\nimport { Utils } from '../core/utils';\n\n/**\n * Copy buttons. A click on `[data-copy]` writes that attribute's text to the\n * clipboard; a click on `[data-copy-for=\"id\"]` writes the named element's\n * value (fields) or text content (anything else). A snackbar confirms the\n * result, which is also what screen readers announce: it is a polite status.\n * `Copy.i18n` holds its two texts; `data-copy-message` and `data-copy-error`\n * replace them for one button.\n */\nexport class Copy {\n  static i18n = { copied: 'Copied', failed: \"Couldn't copy\" };\n  // A second Init adds nothing: addEventListener ignores a listener it has.\n  static Init() {\n    if (typeof document === 'undefined') return;\n    document.addEventListener('click', Copy._onClick);\n  }\n\n  /** The text a copy button would write, or null when it names nothing. */\n  static textFor(button: Element): string | null {\n    if (button.hasAttribute('data-copy')) return button.getAttribute('data-copy');\n    const source = Utils.getElementById(button, button.getAttribute('data-copy-for') ?? '');\n    if (!source) return null;\n    return source instanceof HTMLInputElement ||\n      source instanceof HTMLTextAreaElement ||\n      source instanceof HTMLSelectElement\n      ? source.value\n      : (source.textContent ?? '').trim();\n  }\n\n  private static async _onClick(e: MouseEvent) {\n    const button = Utils.closestInPath(e, '[data-copy], [data-copy-for]');\n    if (!button || button.matches(':disabled, [aria-disabled=\"true\"]')) return;\n    const text = Copy.textFor(button);\n    if (text === null) return;\n    let copied = true;\n    try {\n      await navigator.clipboard.writeText(text);\n    } catch {\n      // No clipboard API outside a secure context, or permission refused.\n      copied = false;\n    }\n    new Snackbar({\n      text: copied\n        ? button.getAttribute('data-copy-message') || Copy.i18n.copied\n        : button.getAttribute('data-copy-error') || Copy.i18n.failed,\n      root: button as HTMLElement,\n      // A second copy answers at once rather than waiting behind the first.\n      replace: true\n    });\n    Utils.emit(button, 'copy', { text, copied });\n  }\n}\n"],
+  "mappings": ";;;;;;;;AAWO,IAAM,QAAN,MAAM,MAAK;AAAA;AAAA,EAGhB,OAAO,OAAO;AACZ,QAAI,OAAO,aAAa,YAAa;AACrC,aAAS,iBAAiB,SAAS,MAAK,QAAQ;AAAA,EAClD;AAAA;AAAA,EAGA,OAAO,QAAQ,QAAgC;AAC7C,QAAI,OAAO,aAAa,WAAW,EAAG,QAAO,OAAO,aAAa,WAAW;AAC5E,UAAM,SAAS,MAAM,eAAe,QAAQ,OAAO,aAAa,eAAe,KAAK,EAAE;AACtF,QAAI,CAAC,OAAQ,QAAO;AACpB,WAAO,kBAAkB,oBACvB,kBAAkB,uBAClB,kBAAkB,oBAChB,OAAO,SACN,OAAO,eAAe,IAAI,KAAK;AAAA,EACtC;AAAA,EAEA,aAAqB,SAAS,GAAe;AAC3C,UAAM,SAAS,MAAM,cAAc,GAAG,8BAA8B;AACpE,QAAI,CAAC,UAAU,OAAO,QAAQ,mCAAmC,EAAG;AACpE,UAAM,OAAO,MAAK,QAAQ,MAAM;AAChC,QAAI,SAAS,KAAM;AACnB,QAAI,SAAS;AACb,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,IAAI;AAAA,IAC1C,QAAQ;AAEN,eAAS;AAAA,IACX;AACA,QAAI,SAAS;AAAA,MACX,MAAM,SACF,OAAO,aAAa,mBAAmB,KAAK,MAAK,KAAK,SACtD,OAAO,aAAa,iBAAiB,KAAK,MAAK,KAAK;AAAA,MACxD,MAAM;AAAA;AAAA,MAEN,SAAS;AAAA,IACX,CAAC;AACD,UAAM,KAAK,QAAQ,QAAQ,EAAE,MAAM,OAAO,CAAC;AAAA,EAC7C;AACF;AA1Ca,MACJ,OAAO,EAAE,QAAQ,UAAU,QAAQ,gBAAgB;AADrD,IAAM,OAAN;",
+  "names": []
+}

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

@@ -0,0 +1,80 @@
+import {
+  restoreAttribute
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/core/formControl.ts
+var formAssociated = () => typeof ElementInternals !== "undefined" && "setFormValue" in ElementInternals.prototype;
+var mirrors = /* @__PURE__ */ new WeakMap();
+function define(tag) {
+  var _a;
+  if (customElements.get(tag)) return;
+  customElements.define(tag, (_a = class extends HTMLElement {
+    constructor() {
+      super(...arguments);
+      this.internals = this.attachInternals();
+      this.onFormReset = null;
+    }
+    formResetCallback() {
+      this.onFormReset?.();
+    }
+    get form() {
+      return this.internals.form;
+    }
+    get name() {
+      return this.getAttribute("name") ?? "";
+    }
+    get labels() {
+      return this._input?.labels;
+    }
+    get validity() {
+      return this.internals.validity;
+    }
+    get validationMessage() {
+      return this.internals.validationMessage;
+    }
+    get willValidate() {
+      return this.internals.willValidate;
+    }
+    checkValidity() {
+      return this.internals.checkValidity();
+    }
+    reportValidity() {
+      return this.internals.reportValidity();
+    }
+    focus(options) {
+      this._input?.focus(options);
+    }
+    get _input() {
+      return this.querySelector(":scope > input");
+    }
+  }, _a.formAssociated = true, _a));
+}
+function copyState(control, input) {
+  ["disabled", "form"].forEach((name) => restoreAttribute(control, name, input.getAttribute(name)));
+}
+function wrapInControl(tag, input, onChange) {
+  define(tag);
+  const control = document.createElement(tag);
+  control.style.display = "contents";
+  control.setAttribute("name", input.getAttribute("name") ?? "");
+  input.removeAttribute("name");
+  input.replaceWith(control);
+  control.append(input);
+  copyState(control, input);
+  const mirror = new MutationObserver(() => (copyState(control, input), onChange()));
+  mirror.observe(input, { attributeFilter: ["disabled", "readonly", "form"] });
+  mirrors.set(control, mirror);
+  return control;
+}
+function unwrapControl(control, input) {
+  mirrors.get(control)?.disconnect();
+  control.replaceWith(...control.childNodes);
+  input.setAttribute("name", control.getAttribute("name") ?? "");
+}
+
+export {
+  formAssociated,
+  wrapInControl,
+  unwrapControl
+};
+//# sourceMappingURL=chunk-UHO5CV6K.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/core/formControl.ts"],
+  "sourcesContent": ["import { restoreAttribute } from './utils';\n\n/**\n * A form-associated element that wraps a text input and submits for it, so\n * the browser handles the field's values, reset, validity and disabled state.\n * Chips and Cascader each define one under their own tag.\n */\nexport interface FormControl extends HTMLElement {\n  readonly internals: ElementInternals;\n  /** Called for a form reset no listener canceled, in the same task. */\n  onFormReset: (() => void) | null;\n}\n\n/** Whether the browser has form-associated custom elements. jsdom does not. */\nexport const formAssociated = () => typeof ElementInternals !== 'undefined' && 'setFormValue' in ElementInternals.prototype;\n\n/** Each control's observer of its input's attributes. */\nconst mirrors = new WeakMap<FormControl, MutationObserver>();\n\n/**\n * Defines `tag` on first use, so importing the bundle needs no DOM, and only\n * once, so a second copy of the bundle on the page uses the first one's. The\n * form sees the control, so it answers what a field does; its anchor and\n * focus are the input it wraps.\n */\nfunction define(tag: string) {\n  if (customElements.get(tag)) return;\n  customElements.define(tag, class extends HTMLElement {\n    static formAssociated = true;\n    readonly internals = this.attachInternals();\n    onFormReset: (() => void) | null = null;\n    formResetCallback() { this.onFormReset?.(); }\n    get form() { return this.internals.form; }\n    get name() { return this.getAttribute('name') ?? ''; }\n    get labels() { return this._input?.labels; }\n    get validity() { return this.internals.validity; }\n    get validationMessage() { return this.internals.validationMessage; }\n    get willValidate() { return this.internals.willValidate; }\n    checkValidity() { return this.internals.checkValidity(); }\n    reportValidity() { return this.internals.reportValidity(); }\n    override focus(options?: FocusOptions) { this._input?.focus(options); }\n    private get _input() { return this.querySelector<HTMLInputElement>(':scope > input'); }\n  });\n}\n\n/** The control is disabled with the input, or with a fieldset by itself, and submits to the input's form. */\nfunction copyState(control: FormControl, input: HTMLInputElement) {\n  ['disabled', 'form'].forEach((name) => restoreAttribute(control, name, input.getAttribute(name)));\n}\n\n/**\n * Wraps `input` in a `tag` control that takes its name. `display: contents`\n * lays the input out as a child of the field still. The control follows the\n * input's disabled and form attributes, and `onChange` runs after the input's\n * disabled, readonly or form attribute changes.\n */\nexport function wrapInControl(tag: string, input: HTMLInputElement, onChange: () => void): FormControl {\n  define(tag);\n  const control = document.createElement(tag) as FormControl;\n  control.style.display = 'contents';\n  control.setAttribute('name', input.getAttribute('name') ?? '');\n  input.removeAttribute('name');\n  input.replaceWith(control);\n  control.append(input);\n  copyState(control, input);\n  const mirror = new MutationObserver(() => (copyState(control, input), onChange()));\n  mirror.observe(input, { attributeFilter: ['disabled', 'readonly', 'form'] });\n  mirrors.set(control, mirror);\n  return control;\n}\n\n/** Unwraps the control, with whatever else went in it, and gives `input` its name back. */\nexport function unwrapControl(control: FormControl, input: HTMLInputElement) {\n  mirrors.get(control)?.disconnect();\n  control.replaceWith(...control.childNodes);\n  input.setAttribute('name', control.getAttribute('name') ?? '');\n}\n"],
+  "mappings": ";;;;;AAcO,IAAM,iBAAiB,MAAM,OAAO,qBAAqB,eAAe,kBAAkB,iBAAiB;AAGlH,IAAM,UAAU,oBAAI,QAAuC;AAQ3D,SAAS,OAAO,KAAa;AAzB7B;AA0BE,MAAI,eAAe,IAAI,GAAG,EAAG;AAC7B,iBAAe,OAAO,MAAK,mBAAc,YAAY;AAAA,IAA1B;AAAA;AAEzB,WAAS,YAAY,KAAK,gBAAgB;AAC1C,yBAAmC;AAAA;AAAA,IACnC,oBAAoB;AAAE,WAAK,cAAc;AAAA,IAAG;AAAA,IAC5C,IAAI,OAAO;AAAE,aAAO,KAAK,UAAU;AAAA,IAAM;AAAA,IACzC,IAAI,OAAO;AAAE,aAAO,KAAK,aAAa,MAAM,KAAK;AAAA,IAAI;AAAA,IACrD,IAAI,SAAS;AAAE,aAAO,KAAK,QAAQ;AAAA,IAAQ;AAAA,IAC3C,IAAI,WAAW;AAAE,aAAO,KAAK,UAAU;AAAA,IAAU;AAAA,IACjD,IAAI,oBAAoB;AAAE,aAAO,KAAK,UAAU;AAAA,IAAmB;AAAA,IACnE,IAAI,eAAe;AAAE,aAAO,KAAK,UAAU;AAAA,IAAc;AAAA,IACzD,gBAAgB;AAAE,aAAO,KAAK,UAAU,cAAc;AAAA,IAAG;AAAA,IACzD,iBAAiB;AAAE,aAAO,KAAK,UAAU,eAAe;AAAA,IAAG;AAAA,IAClD,MAAM,SAAwB;AAAE,WAAK,QAAQ,MAAM,OAAO;AAAA,IAAG;AAAA,IACtE,IAAY,SAAS;AAAE,aAAO,KAAK,cAAgC,gBAAgB;AAAA,IAAG;AAAA,EACxF,GAf2B,GAClB,iBAAiB,MADC,GAe1B;AACH;AAGA,SAAS,UAAU,SAAsB,OAAyB;AAChE,GAAC,YAAY,MAAM,EAAE,QAAQ,CAAC,SAAS,iBAAiB,SAAS,MAAM,MAAM,aAAa,IAAI,CAAC,CAAC;AAClG;AAQO,SAAS,cAAc,KAAa,OAAyB,UAAmC;AACrG,SAAO,GAAG;AACV,QAAM,UAAU,SAAS,cAAc,GAAG;AAC1C,UAAQ,MAAM,UAAU;AACxB,UAAQ,aAAa,QAAQ,MAAM,aAAa,MAAM,KAAK,EAAE;AAC7D,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,OAAO;AACzB,UAAQ,OAAO,KAAK;AACpB,YAAU,SAAS,KAAK;AACxB,QAAM,SAAS,IAAI,iBAAiB,OAAO,UAAU,SAAS,KAAK,GAAG,SAAS,EAAE;AACjF,SAAO,QAAQ,OAAO,EAAE,iBAAiB,CAAC,YAAY,YAAY,MAAM,EAAE,CAAC;AAC3E,UAAQ,IAAI,SAAS,MAAM;AAC3B,SAAO;AACT;AAGO,SAAS,cAAc,SAAsB,OAAyB;AAC3E,UAAQ,IAAI,OAAO,GAAG,WAAW;AACjC,UAAQ,YAAY,GAAG,QAAQ,UAAU;AACzC,QAAM,aAAa,QAAQ,QAAQ,aAAa,MAAM,KAAK,EAAE;AAC/D;",
+  "names": []
+}