@contraagent/elements 0.0.0-stage → 0.1.0

package/dist/table/data-table.d.ts

@@ -0,0 +1,106 @@
+import { LitElement, type CSSResult, type PropertyValues, type TemplateResult } from 'lit';
+import { type Tone } from '../core/tone.js';
+import { type DataColumn, type DataTableStrings, type SortState } from './types.js';
+/**
+ * A table of rows, one per item, in a real `<table>`: a header cell per column
+ * (`scope="col"`), the first `rowHeader` column as the row's header. The rows
+ * are one tab stop: the arrow keys, Home and End move between them, and Enter or
+ * a click is the row's primary action (`cae-activate`), or chooses it as the
+ * selection when the table is not `activatable` (`cae-select`). A sortable
+ * header sends `cae-sort`; the host orders the rows (`sortRows`) and sets them.
+ * Above `windowAt` rows, only the rows on screen are drawn, and a spacer stands
+ * for the others: as high as those rows were when drawn, or, for a row not drawn
+ * yet, as the rows drawn are on average. Rows may differ in height.
+ *
+ * Its look: `--cae-data-table-gap` (between the columns), `--cae-data-table-row-padding`,
+ * the parts, and `cellStyles` (styles for what the cells draw, added to the
+ * table's own).
+ *
+ * @tagname cae-data-table
+ * @fires cae-activate - `{id}`: a row's primary action (a click or Enter, when `activatable`)
+ * @fires cae-select - `{id}`: a row chosen as the selection (a click or Enter, when not `activatable`)
+ * @fires cae-sort - `{id, direction}`: a sortable header was clicked
+ * @csspart table - the `<table>`
+ * @csspart caption - the caption
+ * @csspart head - the header row's group
+ * @csspart header-cell - each header cell
+ * @csspart row - each row
+ * @csspart row-selected - the selected row
+ * @csspart cell - each cell
+ * @csspart empty - the cell that stands for no rows
+ * @slot caption - the caption, instead of `caption`
+ * @slot empty - what the table shows with no rows, instead of `strings.empty`
+ */
+export declare class CaeDataTable<R = unknown> extends LitElement {
+    static styles: (CSSResult | CSSResult[])[];
+    columns: readonly DataColumn<R>[];
+    rows: readonly R[];
+    /** A row's id: unique among the rows (`data-key`, the `id` of the events). By default its `id`. */
+    rowKey: (row: R) => string;
+    /** A row's tone (`data-tone` on the row). */
+    rowTone?: (row: R) => Tone | undefined;
+    /** More attributes on a row (`data-*`), for the host's styles and tests. */
+    rowAttrs?: (row: R) => Readonly<Record<string, string>>;
+    /** A click or Enter on a row is its primary action (`cae-activate`); otherwise it selects the row (`cae-select`). */
+    activatable: boolean;
+    /** The id of the selected row. */
+    selected: string | null;
+    /** The column the rows are ordered by: shown in its header (`aria-sort`). The host orders the rows. */
+    sort: SortState | null;
+    /** Above this many rows, only the rows on screen are drawn. */
+    windowAt: number;
+    /** A row's height in px, until rows are measured. */
+    rowHeight: number;
+    /** The table's caption (its accessible name). */
+    caption: string;
+    strings: Partial<DataTableStrings>;
+    /** Styles for what the cells draw, added after the table's own (the rows are `tr`, the cells `th` and `td`). */
+    cellStyles: readonly CSSResult[];
+    /** The rows drawn, when windowed. */
+    private range;
+    /** Each drawn row's height, by its key: what stands for it while it is not drawn. */
+    private heights;
+    /** Where each row starts (`rowOffsets`), for the rows as they are; null: to work out again. */
+    private offsets;
+    /** The row that holds the tab stop. */
+    private focusKey;
+    private scroller;
+    private resized;
+    private frame;
+    /** The next update keeps `range` as set (Home and End set it before the scroller reports). */
+    private held;
+    private readonly roving;
+    private get windowed();
+    disconnectedCallback(): void;
+    /** Where each row starts: its measured height, else the drawn rows' average. */
+    private rowStarts;
+    /** The rows on screen, from where the table's body is in its scroller. */
+    private visible;
+    /** Scrolls the body's first row (or its last, `last`) into the scroller's view. */
+    private scrollToEnd;
+    private reframe;
+    private readonly onScroll;
+    /** The nearest ancestor that scrolls the table vertically, across shadow roots; the window when none does. */
+    private findScroller;
+    private watch;
+    private unwatch;
+    willUpdate(changed: PropertyValues<this>): void;
+    updated(changed: PropertyValues<this>): void;
+    /** The rows drawn now. */
+    private shown;
+    /** The row of an event, and its id. */
+    private rowOf;
+    private act;
+    private readonly onClick;
+    private readonly onFocusIn;
+    private readonly onKey;
+    private header;
+    private row;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cae-data-table': CaeDataTable;
+    }
+}
+//# sourceMappingURL=data-table.d.ts.map

package/dist/table/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/table/data-table.ts"],"names":[],"mappings":"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"}

package/dist/table/data-table.js

@@ -0,0 +1,408 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, adoptStyles, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { Directive, directive, PartType } from 'lit/directive.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { emit } from '../core/events.js';
+import { withDefaults } from '../core/strings.js';
+import { toneAttr } from '../core/tone.js';
+import { RovingFocusController } from '../primitives/roving-focus.js';
+import { rowOffsets, windowRowsAt } from '../primitives/window.js';
+import { base } from '../styles/index.js';
+import { dataTableStyles } from './styles.js';
+import { DEFAULT_DATA_TABLE_STRINGS, isSortable } from './types.js';
+/** Sets the attributes of a map on an element, and removes those it set before that the map no longer has. */
+class AttrsDirective extends Directive {
+    constructor(part) {
+        super(part);
+        this.names = [];
+        if (part.type !== PartType.ELEMENT)
+            throw new Error('attrs() goes on an element');
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- the argument update() reads
+    render(_map) {
+        return nothing;
+    }
+    update(part, [map]) {
+        const el = part.element;
+        const next = Object.keys(map ?? {});
+        for (const n of this.names)
+            if (!next.includes(n))
+                el.removeAttribute(n);
+        for (const n of next)
+            if (el.getAttribute(n) !== map[n])
+                el.setAttribute(n, map[n]);
+        this.names = next;
+        return nothing;
+    }
+}
+const attrs = directive(AttrsDirective);
+/** Interactive content inside a cell: a click on it is its own, not the row's. */
+const INTERACTIVE = new Set(['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'SUMMARY', 'LABEL']);
+/** The rows drawn before the first measure of the viewport. */
+const FIRST_ROWS = 60;
+/**
+ * A table of rows, one per item, in a real `<table>`: a header cell per column
+ * (`scope="col"`), the first `rowHeader` column as the row's header. The rows
+ * are one tab stop: the arrow keys, Home and End move between them, and Enter or
+ * a click is the row's primary action (`cae-activate`), or chooses it as the
+ * selection when the table is not `activatable` (`cae-select`). A sortable
+ * header sends `cae-sort`; the host orders the rows (`sortRows`) and sets them.
+ * Above `windowAt` rows, only the rows on screen are drawn, and a spacer stands
+ * for the others: as high as those rows were when drawn, or, for a row not drawn
+ * yet, as the rows drawn are on average. Rows may differ in height.
+ *
+ * Its look: `--cae-data-table-gap` (between the columns), `--cae-data-table-row-padding`,
+ * the parts, and `cellStyles` (styles for what the cells draw, added to the
+ * table's own).
+ *
+ * @tagname cae-data-table
+ * @fires cae-activate - `{id}`: a row's primary action (a click or Enter, when `activatable`)
+ * @fires cae-select - `{id}`: a row chosen as the selection (a click or Enter, when not `activatable`)
+ * @fires cae-sort - `{id, direction}`: a sortable header was clicked
+ * @csspart table - the `<table>`
+ * @csspart caption - the caption
+ * @csspart head - the header row's group
+ * @csspart header-cell - each header cell
+ * @csspart row - each row
+ * @csspart row-selected - the selected row
+ * @csspart cell - each cell
+ * @csspart empty - the cell that stands for no rows
+ * @slot caption - the caption, instead of `caption`
+ * @slot empty - what the table shows with no rows, instead of `strings.empty`
+ */
+export class CaeDataTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.rows = [];
+        /** A row's id: unique among the rows (`data-key`, the `id` of the events). By default its `id`. */
+        this.rowKey = (row) => {
+            const id = row.id;
+            return typeof id === 'string' || typeof id === 'number' ? String(id) : '';
+        };
+        /** A click or Enter on a row is its primary action (`cae-activate`); otherwise it selects the row (`cae-select`). */
+        this.activatable = true;
+        /** The id of the selected row. */
+        this.selected = null;
+        /** The column the rows are ordered by: shown in its header (`aria-sort`). The host orders the rows. */
+        this.sort = null;
+        /** Above this many rows, only the rows on screen are drawn. */
+        this.windowAt = 200;
+        /** A row's height in px, until rows are measured. */
+        this.rowHeight = 32;
+        /** The table's caption (its accessible name). */
+        this.caption = '';
+        this.strings = {};
+        /** Styles for what the cells draw, added after the table's own (the rows are `tr`, the cells `th` and `td`). */
+        this.cellStyles = [];
+        /** The rows drawn, when windowed. */
+        this.range = { from: 0, to: FIRST_ROWS };
+        /** Each drawn row's height, by its key: what stands for it while it is not drawn. */
+        this.heights = new Map();
+        /** Where each row starts (`rowOffsets`), for the rows as they are; null: to work out again. */
+        this.offsets = null;
+        /** The row that holds the tab stop. */
+        this.focusKey = null;
+        this.scroller = null;
+        this.resized = null;
+        this.frame = 0;
+        /** The next update keeps `range` as set (Home and End set it before the scroller reports). */
+        this.held = false;
+        this.roving = new RovingFocusController(this, {
+            items: () => [...this.renderRoot.querySelectorAll('tbody tr[data-key]')],
+            layout: 'vertical',
+            onMove: (el) => (this.focusKey = el.dataset['key'] ?? null),
+        });
+        this.onScroll = () => {
+            if (this.frame)
+                return;
+            this.frame = requestAnimationFrame(() => {
+                this.frame = 0;
+                this.reframe();
+            });
+        };
+        this.onClick = (e) => {
+            const r = this.rowOf(e);
+            if (r)
+                this.act(r.id);
+        };
+        this.onFocusIn = (e) => {
+            const r = this.rowOf(e);
+            if (r)
+                this.focusKey = r.id;
+        };
+        this.onKey = (e) => {
+            const t = e.composedPath()[0];
+            if (!(t instanceof HTMLElement) || t.tagName !== 'TR' || t.dataset['key'] === undefined)
+                return;
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                this.act(t.dataset['key']);
+                return;
+            }
+            // Windowed, the first and last rows may not be drawn: draw them, then move there.
+            if (this.windowed && (e.key === 'Home' || e.key === 'End')) {
+                e.preventDefault();
+                e.stopPropagation();
+                const last = e.key === 'End';
+                const row = this.rows[last ? this.rows.length - 1 : 0];
+                if (row === undefined)
+                    return;
+                this.focusKey = this.rowKey(row);
+                const n = this.rows.length;
+                const span = Math.max(1, this.range.to - this.range.from);
+                this.scrollToEnd(last);
+                // Drawn at once, before the scroll reports where the view is.
+                this.range = last ? { from: Math.max(0, n - span), to: n } : { from: 0, to: span };
+                this.held = true;
+                void this.updateComplete.then(() => this.renderRoot.querySelector(`tbody tr[data-key="${CSS.escape(this.focusKey ?? '')}"]`)?.focus());
+            }
+        };
+    }
+    static { this.styles = [base, dataTableStyles]; }
+    get windowed() {
+        return this.rows.length > this.windowAt;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unwatch();
+    }
+    /** Where each row starts: its measured height, else the drawn rows' average. */
+    rowStarts() {
+        if (this.offsets)
+            return this.offsets;
+        let sum = 0;
+        for (const h of this.heights.values())
+            sum += h;
+        const typical = this.heights.size ? sum / this.heights.size : this.rowHeight;
+        return (this.offsets = rowOffsets(this.rows.length, (i) => this.heights.get(this.rowKey(this.rows[i])) ?? typical));
+    }
+    /** The rows on screen, from where the table's body is in its scroller. */
+    visible() {
+        const starts = this.rowStarts();
+        const body = this.renderRoot.querySelector('tbody');
+        // Before the first measure of the view: the first rows, about FIRST_ROWS of them.
+        if (!body || !this.scroller)
+            return windowRowsAt(starts, 0, (starts.at(-1) / Math.max(1, this.rows.length)) * FIRST_ROWS, 0);
+        const view = this.scroller instanceof HTMLElement
+            ? { top: this.scroller.getBoundingClientRect().top, height: this.scroller.clientHeight }
+            : { top: 0, height: this.scroller.innerHeight };
+        return windowRowsAt(starts, view.top - body.getBoundingClientRect().top, view.height);
+    }
+    /** Scrolls the body's first row (or its last, `last`) into the scroller's view. */
+    scrollToEnd(last) {
+        const body = this.renderRoot.querySelector('tbody');
+        const s = this.scroller;
+        if (!body || !s)
+            return;
+        const r = body.getBoundingClientRect();
+        const view = s instanceof HTMLElement ? s.getBoundingClientRect() : { top: 0, bottom: s.innerHeight };
+        const by = last ? r.bottom - view.bottom : r.top - view.top;
+        if (s instanceof HTMLElement)
+            s.scrollTop += by;
+        else
+            s.scrollBy(0, by);
+    }
+    reframe() {
+        const w = this.visible();
+        if (w.from !== this.range.from || w.to !== this.range.to)
+            this.range = { from: w.from, to: w.to };
+    }
+    /** The nearest ancestor that scrolls the table vertically, across shadow roots; the window when none does. */
+    findScroller() {
+        let n = this.parentNode;
+        while (n) {
+            if (n instanceof HTMLElement) {
+                const o = getComputedStyle(n).overflowY;
+                if ((o === 'auto' || o === 'scroll' || o === 'overlay') && n.scrollHeight > n.clientHeight + 1)
+                    return n;
+            }
+            n = n instanceof ShadowRoot ? n.host : n.parentNode;
+        }
+        return window;
+    }
+    watch() {
+        if (this.scroller)
+            return;
+        this.scroller = this.findScroller();
+        this.scroller.addEventListener('scroll', this.onScroll, { passive: true });
+        // Its height decides how many rows show: the window's when the page scrolls, else the scroller's own.
+        if (!(this.scroller instanceof HTMLElement))
+            window.addEventListener('resize', this.onScroll, { passive: true });
+        else if (typeof ResizeObserver !== 'undefined')
+            (this.resized ??= new ResizeObserver(this.onScroll)).observe(this.scroller);
+    }
+    unwatch() {
+        cancelAnimationFrame(this.frame);
+        this.frame = 0;
+        this.scroller?.removeEventListener('scroll', this.onScroll);
+        window.removeEventListener('resize', this.onScroll);
+        this.resized?.disconnect();
+        this.scroller = null;
+    }
+    willUpdate(changed) {
+        if (changed.has('rows') || changed.has('rowHeight'))
+            this.offsets = null;
+        if (changed.has('rows') || changed.has('windowAt')) {
+            if (this.windowed && this.hasUpdated) {
+                const w = this.visible();
+                this.range = { from: w.from, to: w.to };
+            }
+            else if (!this.windowed)
+                this.unwatch();
+        }
+        // The tab stop stays on its row while the rows drawn change.
+        const keys = this.shown().map(this.rowKey);
+        const i = this.focusKey === null ? -1 : keys.indexOf(this.focusKey);
+        this.roving.current = Math.max(0, i);
+    }
+    updated(changed) {
+        if (changed.has('cellStyles') && this.renderRoot instanceof ShadowRoot)
+            adoptStyles(this.renderRoot, [...this.constructor.elementStyles, ...this.cellStyles]);
+        if (!this.windowed)
+            return;
+        this.watch();
+        // Measure the drawn rows: each stands for itself while it is not drawn. A row keeps its
+        // height, so the spacers settle as the rows are drawn once each.
+        let moved = false;
+        for (const tr of this.renderRoot.querySelectorAll('tbody tr[data-key]')) {
+            const h = tr.getBoundingClientRect().height;
+            const key = tr.dataset['key'];
+            if (h > 0 && Math.abs(h - (this.heights.get(key) ?? -1)) > 0.5) {
+                this.heights.set(key, h);
+                moved = true;
+            }
+        }
+        if (moved)
+            this.offsets = null;
+        if (this.held)
+            this.held = false;
+        // On the next frame, never in this update: a window that changes the measures and so
+        // the window again then gives the page a frame, and the reader's input, each time.
+        else
+            this.onScroll();
+    }
+    /** The rows drawn now. */
+    shown() {
+        if (!this.windowed)
+            return this.rows;
+        return this.rows.slice(this.range.from, Math.min(this.rows.length, this.range.to));
+    }
+    /** The row of an event, and its id. */
+    rowOf(e) {
+        for (const t of e.composedPath()) {
+            if (!(t instanceof HTMLElement))
+                continue;
+            if (INTERACTIVE.has(t.tagName))
+                return null;
+            if (t.tagName === 'TR' && t.dataset['key'] !== undefined)
+                return { tr: t, id: t.dataset['key'] };
+            if (t === this)
+                break;
+        }
+        return null;
+    }
+    act(id) {
+        if (this.activatable) {
+            emit(this, 'cae-activate', { id });
+            return;
+        }
+        this.selected = id;
+        emit(this, 'cae-select', { id });
+    }
+    header(c, s) {
+        const on = this.sort?.id === c.id ? this.sort.direction : null;
+        const sort = on === 'asc' ? 'ascending' : on === 'desc' ? 'descending' : nothing;
+        const label = isSortable(c)
+            ? html `<button type="button" class="sort" title=${on === 'asc' ? s.sortDescending : s.sortAscending}
+          @click=${() => emit(this, 'cae-sort', { id: c.id, direction: on === 'asc' ? 'desc' : 'asc' })}>${c.header}${on
+                ? html `<span class="arrow" aria-hidden="true">${on === 'asc' ? '▲' : '▼'}</span>`
+                : nothing}</button>`
+            : c.header;
+        return html `<th scope="col" role="columnheader" part="header-cell" data-col=${c.id} data-align=${c.align ?? nothing} aria-sort=${sort}
+      title=${c.tip || nothing}>${label}</th>`;
+    }
+    row(r, index, head) {
+        const id = this.rowKey(r);
+        const sel = this.selected !== null && this.selected === id;
+        return html `<tr role="row" part=${sel ? 'row row-selected' : 'row'} data-key=${id} data-tone=${toneAttr(this.rowTone?.(r))}
+      aria-current=${sel ? 'true' : nothing} aria-rowindex=${this.windowed ? index + 2 : nothing} ${attrs(this.rowAttrs?.(r))}>
+      ${this.columns.map((c) => c.id === head
+            ? html `<th scope="row" role="rowheader" part="cell" data-col=${c.id} data-align=${c.align ?? nothing}>${c.cell(r, index)}</th>`
+            : html `<td role="cell" part="cell" data-col=${c.id} data-align=${c.align ?? nothing}>${c.cell(r, index)}</td>`)}
+    </tr>`;
+    }
+    render() {
+        const s = withDefaults(DEFAULT_DATA_TABLE_STRINGS, this.strings);
+        const n = this.rows.length;
+        const tracks = this.columns.map((c) => c.width ?? 'minmax(0, 1fr)').join(' ');
+        const head = this.columns.find((c) => c.rowHeader)?.id;
+        const from = this.windowed ? this.range.from : 0;
+        const shown = this.shown();
+        const starts = this.windowed ? this.rowStarts() : null;
+        const padTop = starts ? starts[from] : 0;
+        const padBottom = starts ? starts[n] - starts[from + shown.length] : 0;
+        return html `<table part="table" data-scroll="x" role="table" class=${this.activatable ? '' : 'passive'} style="--cae-data-table-columns: ${tracks}"
+      aria-rowcount=${this.windowed ? n + 1 : nothing}>
+      <caption part="caption"><slot name="caption">${this.caption}</slot></caption>
+      <thead part="head" role="rowgroup"><tr role="row">${this.columns.map((c) => this.header(c, s))}</tr></thead>
+      <tbody role="rowgroup" @click=${this.onClick} @keydown=${this.onKey} @focusin=${this.onFocusIn}>
+        ${padTop > 0 ? html `<tr class="spacer" aria-hidden="true" style="height: ${padTop}px"></tr>` : nothing}
+        ${repeat(shown, this.rowKey, (r, i) => this.row(r, from + i, head))}
+        ${padBottom > 0 ? html `<tr class="spacer" aria-hidden="true" style="height: ${padBottom}px"></tr>` : nothing}
+        ${n
+            ? nothing
+            : html `<tr class="empty" role="row"><td part="empty" role="cell" colspan=${this.columns.length || 1}><slot name="empty">${s.empty}</slot></td></tr>`}
+      </tbody>
+    </table>`;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], CaeDataTable.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], CaeDataTable.prototype, "rows", void 0);
+__decorate([
+    property({ attribute: false })
+], CaeDataTable.prototype, "rowKey", void 0);
+__decorate([
+    property({ attribute: false })
+], CaeDataTable.prototype, "rowTone", void 0);
+__decorate([
+    property({ attribute: false })
+], CaeDataTable.prototype, "rowAttrs", void 0);
+__decorate([
+    property({ type: Boolean })
+], CaeDataTable.prototype, "activatable", void 0);
+__decorate([
+    property()
+], CaeDataTable.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: false })
+], CaeDataTable.prototype, "sort", void 0);
+__decorate([
+    property({ type: Number })
+], CaeDataTable.prototype, "windowAt", void 0);
+__decorate([
+    property({ type: Number })
+], CaeDataTable.prototype, "rowHeight", void 0);
+__decorate([
+    property()
+], CaeDataTable.prototype, "caption", void 0);
+__decorate([
+    property({ attribute: false })
+], CaeDataTable.prototype, "strings", void 0);
+__decorate([
+    property({ attribute: false })
+], CaeDataTable.prototype, "cellStyles", void 0);
+__decorate([
+    state()
+], CaeDataTable.prototype, "range", void 0);
+//# sourceMappingURL=data-table.js.map

package/dist/table/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../../src/table/data-table.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAA4D,MAAM,KAAK,CAAC;AACvH,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAmC,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAa,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAkB,MAAM,yBAAyB,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAA0D,MAAM,YAAY,CAAC;AAE5H,8GAA8G;AAC9G,MAAM,cAAe,SAAQ,SAAS;IAGpC,YAAY,IAAc;QACxB,KAAK,CAAC,IAAI,CAAC,CAAC;QAHN,UAAK,GAAa,EAAE,CAAC;QAI3B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,OAAO;YAAE,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAC;IACpF,CAAC;IAED,4FAA4F;IAC5F,MAAM,CAAC,IAAkD;QACvD,OAAO,OAAO,CAAC;IACjB,CAAC;IAEQ,MAAM,CAAC,IAAiB,EAAE,CAAC,GAAG,CAAiD;QACtF,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;QACxB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC;QACpC,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACzE,KAAK,MAAM,CAAC,IAAI,IAAI;YAAE,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,GAAI,CAAC,CAAC,CAAC;gBAAE,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,GAAI,CAAC,CAAC,CAAE,CAAC,CAAC;QACvF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,OAAO,OAAO,CAAC;IACjB,CAAC;CACF;AACD,MAAM,KAAK,GAAG,SAAS,CAAC,cAAc,CAAC,CAAC;AAExC,kFAAkF;AAClF,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AAEhG,+DAA+D;AAC/D,MAAM,UAAU,GAAG,EAAE,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,OAAO,YAA0B,SAAQ,UAAU;IAAzD;;QAGkC,YAAO,GAA6B,EAAE,CAAC;QACvC,SAAI,GAAiB,EAAE,CAAC;QACxD,mGAAmG;QACnE,WAAM,GAAuB,CAAC,GAAG,EAAE,EAAE;YACnE,MAAM,EAAE,GAAI,GAAwB,CAAC,EAAE,CAAC;YACxC,OAAO,OAAO,EAAE,KAAK,QAAQ,IAAI,OAAO,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5E,CAAC,CAAC;QAKF,qHAAqH;QACxF,gBAAW,GAAG,IAAI,CAAC;QAChD,kCAAkC;QACtB,aAAQ,GAAkB,IAAI,CAAC;QAC3C,uGAAuG;QACvE,SAAI,GAAqB,IAAI,CAAC;QAC9D,+DAA+D;QACnC,aAAQ,GAAG,GAAG,CAAC;QAC3C,qDAAqD;QACzB,cAAS,GAAG,EAAE,CAAC;QAC3C,iDAAiD;QACrC,YAAO,GAAG,EAAE,CAAC;QACO,YAAO,GAA8B,EAAE,CAAC;QACxE,gHAAgH;QAChF,eAAU,GAAyB,EAAE,CAAC;QAEtE,qCAAqC;QACpB,UAAK,GAAiC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC;QACnF,qFAAqF;QAC7E,YAAO,GAAG,IAAI,GAAG,EAAkB,CAAC;QAC5C,+FAA+F;QACvF,YAAO,GAAoB,IAAI,CAAC;QACxC,uCAAuC;QAC/B,aAAQ,GAAkB,IAAI,CAAC;QAC/B,aAAQ,GAAgC,IAAI,CAAC;QAC7C,YAAO,GAA0B,IAAI,CAAC;QACtC,UAAK,GAAG,CAAC,CAAC;QAClB,8FAA8F;QACtF,SAAI,GAAG,KAAK,CAAC;QAEJ,WAAM,GAAG,IAAI,qBAAqB,CAAC,IAAI,EAAE;YACxD,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAc,oBAAoB,CAAC,CAAC;YACrF,MAAM,EAAE,UAAU;YAClB,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;SAC5D,CAAC,CAAC;QAkDc,aAAQ,GAAG,GAAS,EAAE;YACrC,IAAI,IAAI,CAAC,KAAK;gBAAE,OAAO;YACvB,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACtC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;gBACf,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAgGe,YAAO,GAAG,CAAC,CAAa,EAAQ,EAAE;YACjD,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACxB,IAAI,CAAC;gBAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACxB,CAAC,CAAC;QAEe,cAAS,GAAG,CAAC,CAAa,EAAQ,EAAE;YACnD,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACxB,IAAI,CAAC;gBAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAE,CAAC;QAC9B,CAAC,CAAC;QAEe,UAAK,GAAG,CAAC,CAAgB,EAAQ,EAAE;YAClD,MAAM,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;YAC9B,IAAI,CAAC,CAAC,CAAC,YAAY,WAAW,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,IAAI,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,SAAS;gBAAE,OAAO;YAChG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC3B,OAAO;YACT,CAAC;YACD,kFAAkF;YAClF,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,MAAM,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,EAAE,CAAC;gBAC3D,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,MAAM,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC;gBAC7B,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACvD,IAAI,GAAG,KAAK,SAAS;oBAAE,OAAO;gBAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACjC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;gBAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;gBAC1D,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBACvB,8DAA8D;gBAC9D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC;gBACnF,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,KAAK,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,sBAAsB,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YACtJ,CAAC;QACH,CAAC,CAAC;IAoDJ,CAAC;aA7RiB,WAAM,GAAG,CAAC,IAAI,EAAE,eAAe,CAAC,AAA1B,CAA2B;IAiDjD,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC1C,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,gFAAgF;IACxE,SAAS;QACf,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC,OAAO,CAAC;QACtC,IAAI,GAAG,GAAG,CAAC,CAAC;QACZ,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;YAAE,GAAG,IAAI,CAAC,CAAC;QAChD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QAC7E,OAAO,CAAC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAE,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC;IACvH,CAAC;IAED,0EAA0E;IAClE,OAAO;QACb,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAChC,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACpD,kFAAkF;QAClF,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,UAAU,EAAE,CAAC,CAAC,CAAC;QAC9H,MAAM,IAAI,GACR,IAAI,CAAC,QAAQ,YAAY,WAAW;YAClC,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE;YACxF,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;QACpD,OAAO,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACxF,CAAC;IAED,mFAAmF;IAC3E,WAAW,CAAC,IAAa;QAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACpD,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACxB,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;YAAE,OAAO;QACxB,MAAM,CAAC,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACvC,MAAM,IAAI,GAAG,CAAC,YAAY,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;QACtG,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAC5D,IAAI,CAAC,YAAY,WAAW;YAAE,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;;YAC3C,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACzB,CAAC;IAEO,OAAO;QACb,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QACzB,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE;YAAE,IAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;IACpG,CAAC;IAUD,8GAA8G;IACtG,YAAY;QAClB,IAAI,CAAC,GAAgB,IAAI,CAAC,UAAU,CAAC;QACrC,OAAO,CAAC,EAAE,CAAC;YACT,IAAI,CAAC,YAAY,WAAW,EAAE,CAAC;gBAC7B,MAAM,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;gBACxC,IAAI,CAAC,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,SAAS,CAAC,IAAI,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY,GAAG,CAAC;oBAAE,OAAO,CAAC,CAAC;YAC3G,CAAC;YACD,CAAC,GAAG,CAAC,YAAY,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;QACtD,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAEO,KAAK;QACX,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACpC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3E,sGAAsG;QACtG,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,YAAY,WAAW,CAAC;YAAE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;aAC5G,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9H,CAAC;IAEO,OAAO;QACb,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QACf,IAAI,CAAC,QAAQ,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5D,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAEQ,UAAU,CAAC,OAA6B;QAC/C,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC;YAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACzE,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACnD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACrC,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;gBACzB,IAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;YAC1C,CAAC;iBAAM,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,OAAO,EAAE,CAAC;QAC5C,CAAC;QACD,6DAA6D;QAC7D,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC3C,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpE,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACvC,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC5C,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,UAAU,YAAY,UAAU;YACpE,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,GAAI,IAAI,CAAC,WAAiC,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QAC/G,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,wFAAwF;QACxF,iEAAiE;QACjE,IAAI,KAAK,GAAG,KAAK,CAAC;QAClB,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAc,oBAAoB,CAAC,EAAE,CAAC;YACrF,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YAC5C,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAE,CAAC;YAC/B,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC;gBAC/D,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;gBACzB,KAAK,GAAG,IAAI,CAAC;YACf,CAAC;QACH,CAAC;QACD,IAAI,KAAK;YAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACjC,qFAAqF;QACrF,mFAAmF;;YAC9E,IAAI,CAAC,QAAQ,EAAE,CAAC;IACvB,CAAC;IAED,0BAA0B;IAClB,KAAK;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,IAAI,CAAC;QACrC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IACrF,CAAC;IAED,uCAAuC;IAC/B,KAAK,CAAC,CAAQ;QACpB,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC;YACjC,IAAI,CAAC,CAAC,CAAC,YAAY,WAAW,CAAC;gBAAE,SAAS;YAC1C,IAAI,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;gBAAE,OAAO,IAAI,CAAC;YAC5C,IAAI,CAAC,CAAC,OAAO,KAAK,IAAI,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,SAAS;gBAAE,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACjG,IAAI,CAAC,KAAK,IAAI;gBAAE,MAAM;QACxB,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,GAAG,CAAC,EAAU;QACpB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;YACnC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;QACnB,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACnC,CAAC;IAsCO,MAAM,CAAC,CAAgB,EAAE,CAAmB;QAClD,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;QAC/D,MAAM,IAAI,GAAG,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC;QACjF,MAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC;YACzB,CAAC,CAAC,IAAI,CAAA,4CAA4C,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa;mBACtF,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,EAAE;gBAC5G,CAAC,CAAC,IAAI,CAAA,0CAA0C,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS;gBACjF,CAAC,CAAC,OAAO,WAAW;YAC1B,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;QACb,OAAO,IAAI,CAAA,mEAAmE,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,KAAK,IAAI,OAAO,cAAc,IAAI;cAC3H,CAAC,CAAC,GAAG,IAAI,OAAO,IAAI,KAAK,OAAO,CAAC;IAC7C,CAAC;IAEO,GAAG,CAAC,CAAI,EAAE,KAAa,EAAE,IAAwB;QACvD,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC1B,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAC;QAC3D,OAAO,IAAI,CAAA,uBAAuB,GAAG,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,aAAa,EAAE,cAAc,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;qBACzG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,kBAAkB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;QACrH,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACvB,CAAC,CAAC,EAAE,KAAK,IAAI;YACX,CAAC,CAAC,IAAI,CAAA,yDAAyD,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO;YAC/H,CAAC,CAAC,IAAI,CAAA,wCAAwC,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CACjH;UACG,CAAC;IACT,CAAC;IAEQ,MAAM;QACb,MAAM,CAAC,GAAG,YAAY,CAAC,0BAA0B,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACjE,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,gBAAgB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9E,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC;QACvD,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACjD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACvD,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAE,GAAG,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACzE,OAAO,IAAI,CAAA,0DAA0D,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,qCAAqC,MAAM;sBAC/H,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO;qDACA,IAAI,CAAC,OAAO;0DACP,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;sCAC9D,IAAI,CAAC,OAAO,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC,SAAS;UAC1F,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,wDAAwD,MAAM,WAAW,CAAC,CAAC,CAAC,OAAO;UACpG,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC;UACjE,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,wDAAwD,SAAS,WAAW,CAAC,CAAC,CAAC,OAAO;UAC1G,CAAC;YACD,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA,qEAAqE,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,uBAAuB,CAAC,CAAC,KAAK,mBAAmB;;aAEjJ,CAAC;IACZ,CAAC;;AA1R+B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAAwC;AACvC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0CAAyB;AAExB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CAG7B;AAE8B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAAwC;AAEvC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CAAyD;AAE3D;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoB;AAEpC;IAAX,QAAQ,EAAE;8CAAgC;AAEX;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0CAA+B;AAElC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AAEf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAgB;AAE/B;IAAX,QAAQ,EAAE;6CAAc;AACO;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAAyC;AAExC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;gDAAuC;AAGrD;IAAhB,KAAK,EAAE;2CAA2E"}

package/dist/table/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types.js';
+export * from './styles.js';
+export * from './data-table.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/table/index.ts"],"names":[],"mappings":"AAEA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}

package/dist/table/index.js

@@ -0,0 +1,6 @@
+// A table of rows: `@contraagent/elements/data-table`. `CaeDataTable` is
+// registered by `@contraagent/elements/data-table/define`.
+export * from './types.js';
+export * from './styles.js';
+export * from './data-table.js';
+//# sourceMappingURL=index.js.map

package/dist/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/table/index.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,2DAA2D;AAC3D,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}

package/dist/table/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const dataTableStyles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/table/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/table/styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,yBAwB3B,CAAC"}

package/dist/table/styles.js

@@ -0,0 +1,32 @@
+// The look of `<cae-data-table>`. A row is a grid of the columns' tracks
+// (`--cae-data-table-columns`, set from the columns' widths), so every row
+// lines up with the header without a table layout pass. Rows wider than the
+// host scroll sideways inside the table; the host is a container, so the
+// host's `cellStyles` can drop or narrow columns by its width (`@container`).
+import { css } from 'lit';
+export const dataTableStyles = css `
+  :host { display: block; container-type: inline-size; }
+  table { display: block; width: 100%; border-collapse: collapse; overflow-x: auto; }
+  caption { display: block; text-align: start; }
+  thead, tbody { display: block; }
+  tr { display: grid; grid-template-columns: var(--cae-data-table-columns); column-gap: var(--cae-data-table-gap, 12px);
+    align-items: center; padding: var(--cae-data-table-row-padding, 6px 12px); }
+  th, td { display: block; min-width: 0; padding: 0; text-align: start; font-weight: inherit; }
+  [data-align='end'] { text-align: end; font-variant-numeric: tabular-nums; }
+  thead tr { color: var(--text-muted); font-size: var(--font-size-sm); border-bottom: 1px solid var(--line); }
+  tbody tr { border-bottom: 1px solid var(--line); }
+  tbody tr[data-key] { cursor: pointer; }
+  table.passive tbody tr[data-key] { cursor: default; }
+  tbody tr[data-key]:hover { background: var(--raise); }
+  tbody tr[data-key]:focus-visible { outline-offset: -2px; }
+  tbody tr[aria-current='true'] { background: var(--accent-bg); }
+  tbody tr[data-tone='running'] { background: var(--status-running-bg); }
+  tbody tr[data-tone='failed'] { background: color-mix(in srgb, var(--status-failed) 6%, transparent); box-shadow: inset 3px 0 0 var(--status-failed); }
+  tr.spacer { display: block; padding: 0; border: 0; }
+  tr.empty { display: block; border: 0; padding: 0; }
+  tr.empty td { color: var(--text-muted); padding: 8px; }
+  .sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
+  .sort:hover { color: var(--text); }
+  .arrow { font-size: 0.85em; }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/table/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/table/styles.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,2EAA2E;AAC3E,4EAA4E;AAC5E,yEAAyE;AACzE,8EAA8E;AAC9E,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,CAAC"}