@contraagent/elements 0.0.0-stage → 0.1.0

package/dist/matrix/mark-matrix.js

@@ -0,0 +1,272 @@
+// A mark matrix: a row per series, a column per item, nested groups of columns
+// above them; only the rows in view above `windowAt` rows.
+import { LitElement, adoptStyles, html, nothing } from 'lit';
+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 { icon } from '../primitives/icon.js';
+import { base, markStyles } from '../styles/index.js';
+import { gridStep } from './grid-step.js';
+import { ROW_H, matrixStyles } from './styles.js';
+import { DEFAULT_MARK_MATRIX_STRINGS } from './types.js';
+/** The rows drawn around those in view, when windowed. */
+const OVERSCAN = 30;
+const EMPTY = { caption: '', label: '', head: [], columns: [], rows: [] };
+/**
+ * A table of marks: a row per series (its label, then a value), a column per item,
+ * the columns under nested groups (a border where a group starts). A mark is
+ * drawn in its state's look (`states`). A click selects a mark (`cae-select`);
+ * a double click or Enter is its action (`cae-activate`, or `cae-drill` for a mark
+ * with an inner view). The arrow keys, Home, End, Page Up and Page Down move
+ * between the marks (Ctrl with Home and End: the first and the last row). The
+ * hovered, focused or selected mark's row is highlighted, else `highlight`'s. The
+ * host sorts the rows: the sort control sends `cae-sort`. Above `windowAt` rows,
+ * only the rows in view are drawn.
+ *
+ * @tagname cae-mark-matrix
+ * @fires cae-select - `{id}`: a mark was clicked or focused
+ * @fires cae-activate - `{id}`: a mark's action (a double click or Enter)
+ * @fires cae-drill - `{id}`: a mark's inner view (a double click or Enter on a mark with `drill`)
+ * @fires cae-sort - `{id, direction: 'asc'}`: an order was chosen
+ * @csspart matrix - the `<table>`
+ * @csspart head-cell - each header cell
+ * @csspart row-header - each row's label
+ * @csspart mark - each mark
+ * @csspart sort - the sort control
+ */
+export class CaeMarkMatrix extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.matrix = EMPTY;
+        this.states = {};
+        /** The selected mark's id, or null. */
+        this.selected = null;
+        /** The row highlighted while no mark is hovered, focused or selected. */
+        this.highlight = null;
+        /** The matrix's identity: a new key is a new matrix (the scroll and the focused mark start over). */
+        this.key = '';
+        /** Above this many rows, only the rows in view are drawn. */
+        this.windowAt = 150;
+        this.strings = {};
+        /** Draws an icon of a header cell; default: `icon(name)`. */
+        this.renderIcon = (name) => icon(name);
+        /** Styles for what `renderIcon` draws, added to the element's own. */
+        this.iconStyles = [];
+        /** The row (or a mark without one) under the pointer or focus. */
+        this.hover = null;
+        /** The first row in view, and the focused cell (row, column). */
+        this.scrollRow = 0;
+        this.cell = null;
+        this.onScroll = (e) => {
+            const top = Math.floor(e.currentTarget.scrollTop / ROW_H);
+            if (Math.abs(top - this.scrollRow) >= OVERSCAN / 2)
+                this.scrollRow = top;
+        };
+    }
+    static { this.styles = [base, markStyles, matrixStyles]; }
+    static { this.properties = {
+        matrix: { attribute: false },
+        states: { attribute: false },
+        selected: { attribute: false },
+        highlight: { attribute: false },
+        key: {},
+        windowAt: { type: Number },
+        strings: { attribute: false },
+        renderIcon: { attribute: false },
+        iconStyles: { attribute: false },
+        hover: { state: true },
+        scrollRow: { state: true },
+    }; }
+    willUpdate(changed) {
+        if (changed.has('key') && changed.get('key') !== undefined) {
+            this.scrollRow = 0;
+            this.cell = null;
+        }
+    }
+    updated(changed) {
+        if (changed.has('iconStyles') && this.renderRoot instanceof ShadowRoot)
+            adoptStyles(this.renderRoot, [...this.constructor.elementStyles, ...this.iconStyles]);
+    }
+    /** The highlighted row: the one hovered or focused, else the selected mark's, else `highlight`. */
+    lit() {
+        if (this.hover !== null)
+            return this.hover;
+        const row = this.selected ? this.matrix.rows.find((r) => r.cells.some((m) => m?.id === this.selected)) : undefined;
+        return row ? row.id || this.selected : this.highlight;
+    }
+    select(id) {
+        if (id !== this.selected)
+            emit(this, 'cae-select', { id });
+    }
+    act(m) {
+        if (m.drill)
+            emit(this, 'cae-drill', { id: m.id });
+        else
+            emit(this, 'cae-activate', { id: m.id });
+    }
+    render() {
+        const mx = this.matrix;
+        const w = withDefaults(DEFAULT_MARK_MATRIX_STRINGS, this.strings);
+        const rows = mx.rows;
+        const cols = mx.columns;
+        const hl = this.lit();
+        // Where a group of columns starts: 0 at an outermost group, 1 at a group in it, ...
+        const starts = cols.map((c, i) => {
+            const p = cols[i - 1]?.groups;
+            if (!p)
+                return -1;
+            const k = c.groups.findIndex((x, j) => x !== p[j]);
+            return k < 0 ? (c.groups.length !== p.length ? Math.min(c.groups.length, p.length) : -1) : k;
+        });
+        const groupCls = (ci) => (starts[ci] === 0 ? 'g0' : (starts[ci] ?? -1) > 0 ? 'g1' : '');
+        const headRows = mx.head.length;
+        const value = !!mx.value;
+        const lead = value ? 2 : 1;
+        // The rows in view (all of them up to `windowAt`).
+        const many = rows.length > this.windowAt;
+        const from = many ? Math.max(0, this.scrollRow - OVERSCAN) : 0;
+        const to = many ? Math.min(rows.length, this.scrollRow + 2 * OVERSCAN + 20) : rows.length;
+        const cur = this.cell && this.cell[0] < rows.length ? this.cell : firstCell(rows);
+        // A header cell's class: where a group of columns starts.
+        const headCls = (col) => (col === 0 || starts[col] === 0 ? 'g0' : (starts[col] ?? -1) > 0 ? 'g1' : '');
+        const headCell = (hd, col, level) => {
+            const style = `top:${level * 22}px`;
+            if (hd.type === 'group')
+                return html `<th scope="colgroup" part="head-cell" colspan=${hd.span} class="group ${hd.code ? 'code' : ''} ${headCls(col)}" style=${style}
+          title=${hd.tip ?? nothing} aria-label=${hd.summary ?? nothing}>${hd.label}</th>`;
+            return html `<th scope="col" part="head-cell" rowspan=${hd.rows} class="nh ${headCls(col)}" style=${style}
+        title=${hd.tip ?? nothing} aria-label=${hd.summary ?? nothing}>${(hd.icons ?? []).map((n) => this.renderIcon(n))}${hd.label}</th>`;
+        };
+        // The column each cell of a header row starts at: a cell under one that spans down starts after it.
+        const firstCols = (level) => {
+            const out = [];
+            let c = 0;
+            for (const hd of mx.head[level] ?? []) {
+                while (spannedAt(mx.head, level, c))
+                    c++;
+                out.push(c);
+                c += hd.span;
+            }
+            return out;
+        };
+        const facts = (mx.facts ?? []).filter((f) => (typeof f === 'string' ? f : f.text));
+        return html `<div class="mxblock view">
+      <div class="mxbar">
+        <span class="cap" title=${mx.captionTip ?? nothing}>${mx.caption}</span>
+        ${mx.sorts?.length
+            ? html `<label>${w.sortBy}
+              <select part="sort" @change=${(e) => emit(this, 'cae-sort', { id: e.target.value, direction: 'asc' })}>
+                ${mx.sorts.map((s) => html `<option value=${s.id} ?selected=${mx.sort === s.id}>${s.label}</option>`)}
+              </select>
+            </label>`
+            : nothing}
+        <span class="sum">${facts.map((f, i) => html `${i ? html `<span class="sep"> | </span>` : nothing}${typeof f === 'string'
+            ? html `<span class="f">${f}</span>`
+            : html `<span class="f tone-text" data-tone=${toneAttr(f.tone)}>${f.text}</span>`}`)}</span>
+      </div>
+      <div class="mx ${hl ? 'hl' : ''}" @scroll=${this.onScroll} @mouseleave=${() => (this.hover = null)}>
+        <table class="matrix big" part="matrix" role="grid" aria-rowcount=${rows.length + headRows} aria-colcount=${cols.length + lead} aria-label=${mx.label}>
+          <thead>
+            ${mx.head.map((hr, level) => {
+            const fc = firstCols(level);
+            return html `<tr>
+                ${level === 0
+                ? html `<th scope="col" rowspan=${headRows} class="uh" style="top:0">${w.rowsHeader}</th>
+                      ${value ? html `<th scope="col" rowspan=${headRows} class="pn" style="top:0" title=${mx.value?.tip ?? nothing}>${mx.value?.label}</th>` : nothing}`
+                : nothing}
+                ${hr.map((hd, i) => headCell(hd, fc[i] ?? 0, level))}
+              </tr>`;
+        })}
+          </thead>
+          <tbody @keydown=${(e) => this.onKey(e, rows)}>
+            ${from > 0 ? html `<tr class="gap" aria-hidden="true"><td colspan=${cols.length + lead} style="height:${from * ROW_H}px"></td></tr>` : nothing}
+            ${repeat(rows.slice(from, to), (r) => r.id, (r, k) => {
+            const ri = from + k;
+            return html `<tr class=${r.id && r.id === hl ? 'on' : ''} aria-rowindex=${ri + headRows + 1}>
+                  <th scope="row" part="row-header" class=${r.muted ? 'none' : nothing} title=${r.tip ?? r.label}>${r.label}</th>
+                  ${value ? html `<td class="pn ${r.strong ? 'many' : ''}">${r.value}</td>` : nothing}
+                  ${r.cells.map((m, ci) => {
+                const focusable = !!m && cur !== null && cur[0] === ri && cur[1] === ci;
+                return html `<td class="c ${groupCls(ci)}" role="gridcell">${m ? this.mark(r, m, ri, ci, focusable, hl) : nothing}</td>`;
+            })}
+                </tr>`;
+        })}
+            ${to < rows.length
+            ? html `<tr class="gap" aria-hidden="true"><td colspan=${cols.length + lead} style="height:${(rows.length - to) * ROW_H}px"></td></tr>`
+            : nothing}
+          </tbody>
+        </table>
+      </div>
+    </div>`;
+    }
+    mark(r, m, ri, ci, tabStop, hl) {
+        const look = this.states[m.state];
+        const hlKey = r.id || m.id;
+        const sel = this.selected === m.id;
+        return html `<button type="button" part="mark" class="mark ${r.id && r.id === hl ? 'on' : ''} ${sel ? 'sel' : ''}"
+      data-tone=${toneAttr(look?.tone)} data-shape=${look?.shape ?? nothing} data-r=${ri} data-c=${ci} tabindex=${tabStop ? 0 : -1}
+      title=${m.tip ?? nothing} aria-label=${m.label} aria-pressed=${sel}
+      @mouseenter=${() => (this.hover = hlKey)}
+      @focus=${() => {
+            this.hover = hlKey;
+            this.cell = [ri, ci];
+            this.select(m.id);
+        }}
+      @blur=${() => (this.hover = null)}
+      @click=${() => this.select(m.id)}
+      @dblclick=${() => this.act(m)}></button>`;
+    }
+    onKey(e, rows) {
+        const t = e.target;
+        if (!t.classList.contains('mark'))
+            return;
+        const r = Number(t.dataset['r']);
+        const c = Number(t.dataset['c']);
+        if (e.key === 'Enter') {
+            const m = rows[r]?.cells[c];
+            e.preventDefault();
+            if (m)
+                this.act(m);
+            return;
+        }
+        const has = rows.map((row) => row.cells.map((x) => x !== null));
+        const next = gridStep(has, r, c, e.key, e.ctrlKey || e.metaKey);
+        if (!next)
+            return;
+        e.preventDefault();
+        this.cell = next;
+        const box = this.renderRoot.querySelector('.mx');
+        if (box && rows.length > this.windowAt) {
+            // Bring the row into view first: only the rows in view are drawn.
+            const y = next[0] * ROW_H;
+            if (y < box.scrollTop + ROW_H * 2 || y > box.scrollTop + box.clientHeight - ROW_H * 3)
+                box.scrollTop = Math.max(0, y - box.clientHeight / 2);
+            this.scrollRow = Math.floor(box.scrollTop / ROW_H);
+        }
+        this.requestUpdate();
+        void this.updateComplete.then(() => this.renderRoot.querySelector(`.matrix .mark[data-r="${next[0]}"][data-c="${next[1]}"]`)?.focus());
+    }
+}
+/** The first mark of the rows, as (row, column). */
+function firstCell(rows) {
+    for (let i = 0; i < rows.length; i++) {
+        const j = rows[i]?.cells.findIndex((c) => c !== null) ?? -1;
+        if (j >= 0)
+            return [i, j];
+    }
+    return null;
+}
+/** A header row's column `c` is under a cell of an earlier row that spans down past it. */
+function spannedAt(head, level, c) {
+    for (let l = 0; l < level; l++) {
+        let x = 0;
+        for (const hd of head[l] ?? []) {
+            if (c >= x && c < x + hd.span && l + hd.rows > level)
+                return true;
+            x += hd.span;
+        }
+    }
+    return false;
+}
+//# sourceMappingURL=mark-matrix.js.map

package/dist/matrix/mark-matrix.js.map

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

package/dist/matrix/styles.d.ts

@@ -0,0 +1,4 @@
+/** A row's height, in px: what the windowing counts in. */
+export declare const ROW_H = 24;
+export declare const matrixStyles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/matrix/styles.ts"],"names":[],"mappings":"AAIA,2DAA2D;AAC3D,eAAO,MAAM,KAAK,KAAK,CAAC;AAExB,eAAO,MAAM,YAAY,yBAwCxB,CAAC"}

package/dist/matrix/styles.js

@@ -0,0 +1,47 @@
+// A mark matrix's styles: the line above it, the table, its sticky headers and its marks.
+import { css, unsafeCSS } from 'lit';
+import { FRAME_MIN, FRAME_SHARE } from '../core/frame.js';
+/** A row's height, in px: what the windowing counts in. */
+export const ROW_H = 24;
+export const matrixStyles = css `
+  /* The block is the box: it lays out where the host is placed. */
+  :host { display: contents; }
+  /* At least wide enough for the caption and the sort beside it: a narrower table is stretched to it. */
+  .mxblock { display: flex; flex-direction: column; width: fit-content; max-width: 100%; min-width: min(100%, 27rem);
+    animation: view-in 0.1s var(--ease) both; }
+  @keyframes view-in { from { opacity: 0; } }
+  @media (prefers-reduced-motion: reduce) { .mxblock { animation: none; } }
+  .mxbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 8px; font-size: 12px; color: var(--text-2);
+    width: 0; min-width: 100%; box-sizing: border-box; }
+  .mxbar .cap { color: var(--text); font-weight: 600; }
+  .mxbar .sum { flex: 1 0 100%; min-width: 0; }
+  .mxbar .f { white-space: nowrap; }
+  .sep { color: var(--text-muted); }
+  .mxbar label { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
+  .mxbar select { font: inherit; font-size: 11.5px; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
+  .mxbar select:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 1px; }
+  .mx { overflow: auto; max-width: 100%; max-height: max(${FRAME_MIN}px, ${unsafeCSS(FRAME_SHARE * 100)}vh); border-radius: 6px; border: 1px solid var(--line); }
+  table.matrix { border-collapse: separate; border-spacing: 0; font-size: 11px; width: 100%; min-width: max-content; }
+  .matrix th, .matrix td { padding: 0 6px; height: ${ROW_H}px; border-bottom: 1px solid var(--line); white-space: nowrap; }
+  .matrix thead th { position: sticky; z-index: 2; background: var(--panel2); color: var(--text-muted); font-weight: 500; text-align: center; height: 22px; }
+  .matrix thead th.nh { font-family: var(--mono); color: var(--text-2); font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
+  .matrix thead th.group { color: var(--text-2); }
+  .matrix thead th.group.code { font-family: var(--mono); color: var(--text-muted); }
+  .matrix .uh, .matrix tbody th { position: sticky; left: 0; z-index: 1; background: var(--panel); text-align: left; }
+  .matrix thead .uh { z-index: 3; }
+  .matrix thead .uh, .matrix thead .pn { background: var(--panel2); }
+  .matrix tbody th { font-family: var(--mono); font-weight: 600; color: var(--text); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
+  .matrix tbody th.none { font-family: var(--sans); font-weight: 500; color: var(--text-muted); }
+  .matrix .pn { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
+  .matrix .pn.many { color: var(--text); font-weight: 600; }
+  .matrix td.c { text-align: center; --m: 12px; }
+  .matrix td.c .mark { vertical-align: middle; }
+  .matrix .g0 { border-left: 1px solid var(--line2); }
+  .matrix .g1 { border-left: 1px dashed var(--line); }
+  .matrix tbody tr:hover td, .matrix tbody tr:hover th { background-color: color-mix(in srgb, var(--text-muted) 8%, transparent); }
+  .matrix tbody tr.on td, .matrix tbody tr.on th { background-color: var(--accent-bg); }
+  .matrix .gap td { padding: 0; border: 0; }
+  .mx.hl .mark:not(.on) { opacity: 0.4; }
+  .mx.hl .mark.on { transform: scale(1.2); }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/matrix/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/matrix/styles.ts"],"names":[],"mappings":"AAAA,0FAA0F;AAC1F,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE1D,2DAA2D;AAC3D,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,CAAC;AAExB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;2DAiB4B,SAAS,OAAO,SAAS,CAAC,WAAW,GAAG,GAAG,CAAC;;qDAElD,KAAK;;;;;;;;;;;;;;;;;;;;;CAqBzD,CAAC"}

package/dist/matrix/types.d.ts

@@ -0,0 +1,79 @@
+import type { Fact } from '../primitives/fact-line.js';
+/** One mark of a matrix cell (the same shape as a graph's mark). */
+export interface MatrixMark {
+    /** Unique in the matrix: the selection id. */
+    id: string;
+    /** A key of `StateStyles`. */
+    state: string;
+    /** The accessible name. */
+    label: string;
+    tip?: string;
+    /** The mark opens an inner view: Enter and a double click send `cae-drill`, not `cae-activate`. */
+    drill?: boolean;
+}
+/** A header cell: a group of columns (`group`), or a column's own (`column`, spanning down to the last header row). */
+export interface MatrixHeadCell {
+    id: string;
+    label: string;
+    tip?: string;
+    /** The accessible name; default: `label`. */
+    summary?: string;
+    /** Icon names (`registerIcon`) before its label. */
+    icons?: readonly string[];
+    /** The label is a name in code: drawn in the monospace font. */
+    code?: boolean;
+    span: number;
+    rows: number;
+    type: 'group' | 'column';
+}
+export interface MatrixColumnInput {
+    id: string;
+    /** The ids of the groups it is under, outermost first: a border marks where a group starts. */
+    groups: readonly string[];
+}
+export interface MatrixRowInput {
+    /** Its id: what the matrix highlights (the series of the selected or hovered mark). */
+    id: string;
+    label: string;
+    tip?: string;
+    /** Its label in the plain, muted face (a row that stands for no item of its own). */
+    muted?: boolean;
+    /** The value column's cell, and whether it stands out. */
+    value?: string | number;
+    strong?: boolean;
+    /** One per column: its mark, or null. */
+    cells: readonly (MatrixMark | null)[];
+}
+export interface MarkMatrixInput {
+    /** The line above the table, and its tooltip. */
+    caption: string;
+    captionTip?: string;
+    /** The table's accessible name. */
+    label: string;
+    /** Facts beside the caption. */
+    facts?: readonly (string | Fact)[];
+    /** The header rows, outermost first. */
+    head: readonly (readonly MatrixHeadCell[])[];
+    columns: readonly MatrixColumnInput[];
+    /** Already in the order chosen (`sort`): the host sorts them. */
+    rows: readonly MatrixRowInput[];
+    /** A column of one value per row, after the rows' labels, and its header. */
+    value?: {
+        label: string;
+        tip?: string;
+    };
+    /** The orders the reader may choose, and the one chosen. */
+    sorts?: readonly {
+        id: string;
+        label: string;
+    }[];
+    sort?: string;
+}
+export interface MarkMatrixStrings {
+    /** The label of the sort control. */
+    sortBy: string;
+    /** The header of the rows' labels. */
+    rowsHeader: string;
+}
+export declare const DEFAULT_MARK_MATRIX_STRINGS: Readonly<MarkMatrixStrings>;
+//# sourceMappingURL=types.d.ts.map

package/dist/matrix/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/matrix/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAEvD,oEAAoE;AACpE,MAAM,WAAW,UAAU;IACzB,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mGAAmG;IACnG,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,uHAAuH;AACvH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,+FAA+F;IAC/F,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,uFAAuF;IACvF,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qFAAqF;IACrF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yCAAyC;IACzC,KAAK,EAAE,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC;CACvC;AAED,MAAM,WAAW,eAAe;IAC9B,iDAAiD;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACnC,wCAAwC;IACxC,IAAI,EAAE,SAAS,CAAC,SAAS,cAAc,EAAE,CAAC,EAAE,CAAC;IAC7C,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACtC,iEAAiE;IACjE,IAAI,EAAE,SAAS,cAAc,EAAE,CAAC;IAChC,6EAA6E;IAC7E,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,qCAAqC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,2BAA2B,EAAE,QAAQ,CAAC,iBAAiB,CAGnE,CAAC"}

package/dist/matrix/types.js

@@ -0,0 +1,5 @@
+export const DEFAULT_MARK_MATRIX_STRINGS = {
+    sortBy: 'Sort',
+    rowsHeader: 'Row',
+};
+//# sourceMappingURL=types.js.map

package/dist/matrix/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/matrix/types.ts"],"names":[],"mappings":"AA+EA,MAAM,CAAC,MAAM,2BAA2B,GAAgC;IACtE,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,KAAK;CAClB,CAAC"}

package/dist/primitives/fact-line.d.ts

@@ -0,0 +1,14 @@
+import { nothing, type TemplateResult } from 'lit';
+import { type Tone } from '../core/tone.js';
+/** A fact in a row of facts; a status fact has a tone. */
+export interface Fact {
+    text: string;
+    tone?: Tone;
+}
+/**
+ * `facts`, each in a `.f` span that does not break inside unless it is wider than
+ * the box, separated by `sep`. A fact with a tone is in its status colour
+ * (`.tone-text`); an empty fact is left out.
+ */
+export declare function factLine(facts: readonly (string | Fact)[], sep?: string): TemplateResult | typeof nothing;
+//# sourceMappingURL=fact-line.d.ts.map

package/dist/primitives/fact-line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fact-line.d.ts","sourceRoot":"","sources":["../../src/primitives/fact-line.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEtD,0DAA0D;AAC1D,MAAM,WAAW,IAAI;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,EAAE,GAAG,SAAQ,GAAG,cAAc,GAAG,OAAO,OAAO,CASxG"}

package/dist/primitives/fact-line.js

@@ -0,0 +1,18 @@
+// A row of facts ("6 tasks", "6 attempts") in a narrow box: each fact is kept
+// whole, and the line breaks between facts. Use it inside `.words`.
+import { html, nothing } from 'lit';
+import { toneAttr } from '../core/tone.js';
+/**
+ * `facts`, each in a `.f` span that does not break inside unless it is wider than
+ * the box, separated by `sep`. A fact with a tone is in its status colour
+ * (`.tone-text`); an empty fact is left out.
+ */
+export function factLine(facts, sep = ' | ') {
+    const shown = facts.filter((f) => (typeof f === 'string' ? f : f.text));
+    return shown.length
+        ? html `${shown.map((f, i) => typeof f === 'string'
+            ? html `${i ? sep : ''}<span class="f">${f}</span>`
+            : html `${i ? sep : ''}<span class="f tone-text" data-tone=${toneAttr(f.tone)}>${f.text}</span>`)}`
+        : nothing;
+}
+//# sourceMappingURL=fact-line.js.map

package/dist/primitives/fact-line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fact-line.js","sourceRoot":"","sources":["../../src/primitives/fact-line.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,oEAAoE;AACpE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAa,MAAM,iBAAiB,CAAC;AAQtD;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAiC,EAAE,GAAG,GAAG,KAAK;IACrE,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACxE,OAAO,KAAK,CAAC,MAAM;QACjB,CAAC,CAAC,IAAI,CAAA,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACxB,OAAO,CAAC,KAAK,QAAQ;YACnB,CAAC,CAAC,IAAI,CAAA,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,mBAAmB,CAAC,SAAS;YAClD,CAAC,CAAC,IAAI,CAAA,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,uCAAuC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,SAAS,CAClG,EAAE;QACL,CAAC,CAAC,OAAO,CAAC;AACd,CAAC"}

package/dist/primitives/icon.d.ts

@@ -0,0 +1,14 @@
+import { type TemplateResult } from 'lit';
+/** Registers an icon under `name` (a later registration replaces it). */
+export declare function registerIcon(name: string, template: TemplateResult | string): void;
+export interface IconOptions {
+    /** Classes on the icon's element. */
+    cls?: string;
+}
+/**
+ * The icon `name` (the name itself when nothing is registered under it, so a
+ * glyph works as its own name). Without a label it is hidden from screen
+ * readers; with one, the label is its tooltip and what a screen reader reads.
+ */
+export declare function icon(name: string, label?: string | null, o?: IconOptions): TemplateResult;
+//# sourceMappingURL=icon.d.ts.map

package/dist/primitives/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/primitives/icon.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzD,yEAAyE;AACzE,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,GAAG,MAAM,GAAG,IAAI,CAElF;AAED,MAAM,WAAW,WAAW;IAC1B,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,GAAE,WAAgB,GAAG,cAAc,CAK7F"}

package/dist/primitives/icon.js

@@ -0,0 +1,19 @@
+// Small icons: a glyph or a template, registered by name.
+import { html, nothing } from 'lit';
+const icons = new Map();
+/** Registers an icon under `name` (a later registration replaces it). */
+export function registerIcon(name, template) {
+    icons.set(name, template);
+}
+/**
+ * The icon `name` (the name itself when nothing is registered under it, so a
+ * glyph works as its own name). Without a label it is hidden from screen
+ * readers; with one, the label is its tooltip and what a screen reader reads.
+ */
+export function icon(name, label, o = {}) {
+    const glyph = icons.get(name) ?? name;
+    return label
+        ? html `<span class=${o.cls || nothing} part="icon" title=${label}><span aria-hidden="true">${glyph}</span><span class="sr">${label}</span></span>`
+        : html `<span class=${o.cls || nothing} part="icon" aria-hidden="true">${glyph}</span>`;
+}
+//# sourceMappingURL=icon.js.map

package/dist/primitives/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../src/primitives/icon.ts"],"names":[],"mappings":"AAAA,0DAA0D;AAC1D,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAEzD,MAAM,KAAK,GAAG,IAAI,GAAG,EAAmC,CAAC;AAEzD,yEAAyE;AACzE,MAAM,UAAU,YAAY,CAAC,IAAY,EAAE,QAAiC;IAC1E,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC5B,CAAC;AAOD;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAAC,IAAY,EAAE,KAAqB,EAAE,IAAiB,EAAE;IAC3E,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC;IACtC,OAAO,KAAK;QACV,CAAC,CAAC,IAAI,CAAA,eAAe,CAAC,CAAC,GAAG,IAAI,OAAO,sBAAsB,KAAK,6BAA6B,KAAK,2BAA2B,KAAK,gBAAgB;QAClJ,CAAC,CAAC,IAAI,CAAA,eAAe,CAAC,CAAC,GAAG,IAAI,OAAO,mCAAmC,KAAK,SAAS,CAAC;AAC3F,CAAC"}

package/dist/primitives/index.d.ts

@@ -0,0 +1,10 @@
+export * from './pill.js';
+export * from './legend.js';
+export * from './share-bar.js';
+export * from './states.js';
+export * from './fact-line.js';
+export * from './icon.js';
+export * from './roving-focus.js';
+export * from './window.js';
+export * from './segmented.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/primitives/index.ts"],"names":[],"mappings":"AAGA,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC"}

package/dist/primitives/index.js

@@ -0,0 +1,13 @@
+// The parts every element is built from: `@contraagent/elements/primitives`.
+// Template functions and controllers; `CaeSegmented` is registered by
+// `@contraagent/elements/segmented/define`.
+export * from './pill.js';
+export * from './legend.js';
+export * from './share-bar.js';
+export * from './states.js';
+export * from './fact-line.js';
+export * from './icon.js';
+export * from './roving-focus.js';
+export * from './window.js';
+export * from './segmented.js';
+//# sourceMappingURL=index.js.map

package/dist/primitives/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,sEAAsE;AACtE,4CAA4C;AAC5C,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC"}

package/dist/primitives/legend.d.ts

@@ -0,0 +1,28 @@
+import { type TemplateResult } from 'lit';
+import { type Tone } from '../core/tone.js';
+/** The shape of a status mark: done round, failed square, not started hatched, waiting a ring, partly done a round with its lower half filled. */
+export type MarkShape = 'round' | 'square' | 'hatched' | 'ring' | 'half';
+export interface LegendItem {
+    label: string;
+    /** The swatch's colour: a CSS colour or `var(...)`. */
+    swatch?: string;
+    /** The swatch's status colour (instead of `swatch`). */
+    tone?: Tone;
+    shape?: MarkShape;
+    /** Classes on the swatch (`<i>`), for a swatch the host's styles draw. */
+    cls?: string;
+    /** What to draw instead of the swatch: an icon, a mark, a line. */
+    icon?: unknown;
+    /** Hidden from screen readers: the item names what the reader reaches another way. */
+    decorative?: boolean;
+}
+export interface LegendOptions {
+    /** The legend's accessible name. */
+    label?: string;
+    /** More classes on the legend. */
+    cls?: string;
+}
+/** A row of entries (`.legend`, part `legend`), each its swatch and its word, as a list. */
+export declare function legend(items: readonly LegendItem[], o?: LegendOptions): TemplateResult;
+export declare const legendStyles: import("lit").CSSResult;
+//# sourceMappingURL=legend.d.ts.map

package/dist/primitives/legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../src/primitives/legend.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEtD,kJAAkJ;AAClJ,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzE,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sFAAsF;IACtF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAUD,4FAA4F;AAC5F,wBAAgB,MAAM,CAAC,KAAK,EAAE,SAAS,UAAU,EAAE,EAAE,CAAC,GAAE,aAAkB,GAAG,cAAc,CAI1F;AAED,eAAO,MAAM,YAAY,yBAUxB,CAAC"}