@contraagent/elements 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,28 @@
+// @contraagent/elements: generic web components and the parts they are built
+// from. Importing this module registers nothing: each class is registered by its
+// `define` entry (`@contraagent/elements/define` registers every `cae-*`), or by
+// the host under a tag name of its own.
+export * from './core/tone.js';
+export * from './core/events.js';
+export * from './core/strings.js';
+export * from './core/define.js';
+export * from './core/format.js';
+export * from './core/clock.js';
+export * from './styles/index.js';
+export * from './themes/index.js';
+export * from './primitives/index.js';
+export * from './json/index.js';
+export * from './code/index.js';
+export * from './markdown/index.js';
+export * from './tree/index.js';
+export * from './count/index.js';
+export * from './table/index.js';
+export * from './tiles/index.js';
+export * from './lanes/index.js';
+export * from './charts/index.js';
+export * from './checks/index.js';
+export * from './matrix/index.js';
+export * from './graph/index.js';
+export * from './core/frame.js';
+export * from './transcript/index.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,iFAAiF;AACjF,iFAAiF;AACjF,wCAAwC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC"}

package/dist/json/index.d.ts

@@ -0,0 +1,2 @@
+export * from './json-tree.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/json/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAC"}

package/dist/json/index.js

@@ -0,0 +1,3 @@
+// `@contraagent/elements/json-tree`: the class; `…/json-tree/define` registers it.
+export * from './json-tree.js';
+//# sourceMappingURL=index.js.map

package/dist/json/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/json/index.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,cAAc,gBAAgB,CAAC"}

package/dist/json/json-tree.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Any JSON value as a foldable tree: the first level open, deeper levels folded.
+ *
+ * @tagname cae-json-tree
+ * @csspart tree - the tree
+ */
+export declare class CaeJsonTree extends LitElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    value: unknown;
+    /** Levels opened from the start. */
+    open: number;
+    render(): TemplateResult<1>;
+    private node;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cae-json-tree': CaeJsonTree;
+    }
+}
+//# sourceMappingURL=json-tree.d.ts.map

package/dist/json/json-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-tree.d.ts","sourceRoot":"","sources":["../../src/json/json-tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAO5D;;;;;GAKG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0DAAiB;IAEP,KAAK,EAAE,OAAO,CAAC;IAC/C,oCAAoC;IACR,IAAI,SAAK;IAE5B,MAAM;IAIf,OAAO,CAAC,IAAI;CAkBb;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/json/json-tree.js

@@ -0,0 +1,51 @@
+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, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { base, prose } from '../styles/index.js';
+const isLeaf = (x) => x === null || typeof x !== 'object' || (Array.isArray(x) ? !x.length : !Object.keys(x).length);
+/**
+ * Any JSON value as a foldable tree: the first level open, deeper levels folded.
+ *
+ * @tagname cae-json-tree
+ * @csspart tree - the tree
+ */
+export class CaeJsonTree extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Levels opened from the start. */
+        this.open = 1;
+    }
+    static { this.styles = [base, prose]; }
+    render() {
+        return html `<div class="jtree" part="tree" data-scroll="x">${this.node(this.value, 0)}</div>`;
+    }
+    node(v, depth) {
+        if (v === null || typeof v !== 'object') {
+            return html `<span class=${typeof v === 'string' ? 'js' : 'jn'}>${JSON.stringify(v) ?? 'undefined'}</span>`;
+        }
+        const entries = Array.isArray(v) ? v.map((x, i) => [i, x]) : Object.entries(v);
+        if (!entries.length)
+            return Array.isArray(v) ? '[]' : '{}';
+        return html `${entries.map(([k, x]) => isLeaf(x)
+            ? html `<div class="jt"><span class="jk">${k}</span>: ${this.node(x, depth + 1)}</div>`
+            : html `<details class="jt" ?open=${depth < this.open}>
+            <summary>
+              <span class="jk">${k}</span>
+              <span class="meta">${Array.isArray(x) ? `[${x.length}]` : `{${Object.keys(x).length}}`}</span>
+            </summary>
+            ${this.node(x, depth + 1)}
+          </details>`)}`;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], CaeJsonTree.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], CaeJsonTree.prototype, "open", void 0);
+//# sourceMappingURL=json-tree.js.map

package/dist/json/json-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-tree.js","sourceRoot":"","sources":["../../src/json/json-tree.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,MAAM,GAAG,CAAC,CAAU,EAAW,EAAE,CACrC,CAAC,KAAK,IAAI,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjG;;;;;GAKG;AACH,MAAM,OAAO,WAAY,SAAQ,UAAU;IAA3C;;QAIE,oCAAoC;QACR,SAAI,GAAG,CAAC,CAAC;IAwBvC,CAAC;aA5BiB,WAAM,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,AAAhB,CAAiB;IAM9B,MAAM;QACb,OAAO,IAAI,CAAA,kDAAkD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC;IAChG,CAAC;IAEO,IAAI,CAAC,CAAU,EAAE,KAAa;QACpC,IAAI,CAAC,KAAK,IAAI,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE,CAAC;YACxC,OAAO,IAAI,CAAA,eAAe,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,WAAW,SAAS,CAAC;QAC7G,CAAC;QACD,MAAM,OAAO,GAAiC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC7G,IAAI,CAAC,OAAO,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QAC3D,OAAO,IAAI,CAAA,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CACnC,MAAM,CAAC,CAAC,CAAC;YACP,CAAC,CAAC,IAAI,CAAA,oCAAoC,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,QAAQ;YACtF,CAAC,CAAC,IAAI,CAAA,6BAA6B,KAAK,GAAG,IAAI,CAAC,IAAI;;iCAE3B,CAAC;mCACC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAW,CAAC,CAAC,MAAM,GAAG;;cAEhG,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC;qBAChB,CAChB,EAAE,CAAC;IACN,CAAC;;AAzB+B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0CAAgB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAU"}

package/dist/lanes/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types.js';
+export * from './stack.js';
+export * from './styles.js';
+export * from './lanes.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/lanes/index.js

@@ -0,0 +1,7 @@
+// Bars on a time axis: `@contraagent/elements/lanes`. `CaeLanes` is registered
+// by `@contraagent/elements/lanes/define`.
+export * from './types.js';
+export * from './stack.js';
+export * from './styles.js';
+export * from './lanes.js';
+//# sourceMappingURL=index.js.map

package/dist/lanes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lanes/index.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,2CAA2C;AAC3C,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC"}

package/dist/lanes/lanes.d.ts

@@ -0,0 +1,56 @@
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import { type Lane, type LaneStyle, type LanesStrings, type TimeRange } from './types.js';
+/**
+ * Bars on a time axis, a lane per group: each bar as long as it took, the
+ * overlapping bars of a lane stacked, a running bar (`end` null) growing until
+ * now and a line at now. A bar's look is its style in `barStyles`, whose
+ * labels are the legend (a row per `group`). The bars grow in when they are
+ * first drawn.
+ *
+ * Its look: `--cae-lanes-label-width` (the lanes' labels; 112px, 78px on a
+ * narrow screen) and the parts.
+ *
+ * @tagname cae-lanes
+ * @csspart axis - the times above the lanes
+ * @csspart lane - each lane
+ * @csspart lane-label - a lane's label
+ * @csspart track - the area of a lane's bars
+ * @csspart bar - each bar
+ * @csspart now - the line at now, while a bar runs
+ * @csspart legend - each row of the legend
+ * @csspart empty - what the element shows with no bars
+ * @slot empty - what the element shows with no bars, instead of `strings.empty`
+ */
+export declare class CaeLanes extends LitElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    lanes: readonly Lane[];
+    /** A look per style key of the bars, in legend order. */
+    barStyles: Readonly<Record<string, LaneStyle>>;
+    /** The time the axis spans; null fits the bars (`fitRange`). */
+    range: TimeRange | null;
+    /** Draws again every second, so the running bars and the line at now move. */
+    live: boolean;
+    /** Bars the host left out, as a note after the legend. */
+    omitted: number;
+    /** The language of the axis' times; by default the page's (`lang`). */
+    locale: string;
+    strings: Partial<LanesStrings>;
+    private timer;
+    /** The bars have been drawn once: later bars do not grow in. */
+    private drawn;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private tick;
+    private time;
+    render(): TemplateResult<1>;
+    private lane;
+    /** A legend row per group of styles, in key order; the note of omitted bars ends the last. */
+    private legends;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cae-lanes': CaeLanes;
+    }
+}
+//# sourceMappingURL=lanes.d.ts.map

package/dist/lanes/lanes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lanes.d.ts","sourceRoot":"","sources":["../../src/lanes/lanes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ1F,OAAO,EAAyB,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAKjH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0DAAqC;IAE3B,KAAK,EAAE,SAAS,IAAI,EAAE,CAAM;IAC5D,yDAAyD;IACzB,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAM;IACpF,gEAAgE;IAChC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAQ;IAC/D,8EAA8E;IACjD,IAAI,UAAS;IAC1C,0DAA0D;IAC9B,OAAO,SAAK;IACxC,uEAAuE;IAC3D,MAAM,SAAM;IACQ,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAM;IAEpE,OAAO,CAAC,KAAK,CAA+C;IAC5D,gEAAgE;IAChE,OAAO,CAAC,KAAK,CAAS;IAEb,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;cAKlB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAI/D,OAAO,CAAC,IAAI;IAQZ,OAAO,CAAC,IAAI;IAKH,MAAM;IAqBf,OAAO,CAAC,IAAI;IAiBZ,8FAA8F;IAC9F,OAAO,CAAC,OAAO;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/lanes/lanes.js

@@ -0,0 +1,160 @@
+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, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { withDefaults } from '../core/strings.js';
+import { legend, legendStyles } from '../primitives/legend.js';
+import { base } from '../styles/index.js';
+import { barBox, fitRange, stack } from './stack.js';
+import { lanesStyles } from './styles.js';
+import { DEFAULT_LANES_STRINGS } from './types.js';
+/** A span shorter than this shows seconds on its axis (else every tick reads the same minute). */
+const SECONDS_BELOW_MS = 10 * 60e3;
+/**
+ * Bars on a time axis, a lane per group: each bar as long as it took, the
+ * overlapping bars of a lane stacked, a running bar (`end` null) growing until
+ * now and a line at now. A bar's look is its style in `barStyles`, whose
+ * labels are the legend (a row per `group`). The bars grow in when they are
+ * first drawn.
+ *
+ * Its look: `--cae-lanes-label-width` (the lanes' labels; 112px, 78px on a
+ * narrow screen) and the parts.
+ *
+ * @tagname cae-lanes
+ * @csspart axis - the times above the lanes
+ * @csspart lane - each lane
+ * @csspart lane-label - a lane's label
+ * @csspart track - the area of a lane's bars
+ * @csspart bar - each bar
+ * @csspart now - the line at now, while a bar runs
+ * @csspart legend - each row of the legend
+ * @csspart empty - what the element shows with no bars
+ * @slot empty - what the element shows with no bars, instead of `strings.empty`
+ */
+export class CaeLanes extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.lanes = [];
+        /** A look per style key of the bars, in legend order. */
+        this.barStyles = {};
+        /** The time the axis spans; null fits the bars (`fitRange`). */
+        this.range = null;
+        /** Draws again every second, so the running bars and the line at now move. */
+        this.live = false;
+        /** Bars the host left out, as a note after the legend. */
+        this.omitted = 0;
+        /** The language of the axis' times; by default the page's (`lang`). */
+        this.locale = '';
+        this.strings = {};
+        this.timer = null;
+        /** The bars have been drawn once: later bars do not grow in. */
+        this.drawn = false;
+    }
+    static { this.styles = [base, legendStyles, lanesStyles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.tick(this.live);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.tick(false);
+    }
+    updated(changed) {
+        if (changed.has('live'))
+            this.tick(this.live);
+    }
+    tick(on) {
+        if (on && !this.timer)
+            this.timer = setInterval(() => this.requestUpdate(), 1000);
+        if (!on && this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+    time(t, seconds) {
+        const locale = this.locale || document.documentElement.lang || undefined;
+        return new Date(t).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', ...(seconds ? { second: '2-digit' } : {}), hourCycle: 'h23' });
+    }
+    render() {
+        const s = withDefaults(DEFAULT_LANES_STRINGS, this.strings);
+        const now = Date.now();
+        const range = this.range ?? fitRange(this.lanes, now);
+        if (!range)
+            return html `<div part="empty"><slot name="empty">${s.empty}</slot></div>`;
+        const animate = !this.drawn;
+        this.drawn = true;
+        const span = Math.max(1, range.end - range.start);
+        const running = this.lanes.some((l) => l.bars.some((b) => b.end === null));
+        const seconds = span < SECONDS_BELOW_MS;
+        const nowAt = Math.min(1, (now - range.start) / span);
+        return html `<div class="lanes ${animate ? 'anim' : ''}">
+        <div class="axis" part="axis">${[0, 0.25, 0.5, 0.75, 1].map((k) => html `<span>${this.time(range.start + span * k, seconds)}</span>`)}</div>
+        ${repeat(this.lanes, (l) => l.id, (l) => this.lane(l, range, now))}
+        ${running
+            ? html `<span class="now" part="now" style="left:calc(var(--label) + 8px + (100% - var(--label) - 8px) * ${nowAt.toFixed(4)})"></span>`
+            : nothing}
+      </div>
+      ${this.legends(s)}`;
+    }
+    lane(l, range, now) {
+        const placed = stack(l.bars);
+        const rows = Math.max(1, ...placed.map((p) => p.row + 1));
+        return html `<div class="lane" part="lane">
+      <span class="name" part="lane-label" title=${l.label}>${l.label}</span>
+      <div class="track" part="track" style="--rows:${rows}">
+        ${placed.map(({ bar, row }) => {
+            const box = barBox(bar, range, now);
+            const look = this.barStyles[bar.style];
+            return html `<span class="bar ${bar.end === null ? 'running' : ''}" part="bar" data-style=${bar.style}
+            data-pattern=${look?.pattern ?? 'solid'} title=${bar.label}
+            style="--bar:${look?.color ?? 'var(--line2)'};--row:${row};left:min(${box.left.toFixed(3)}%, 100% - max(3px, ${box.width.toFixed(3)}%));width:${box.width.toFixed(3)}%"></span>`;
+        })}
+      </div>
+    </div>`;
+    }
+    /** A legend row per group of styles, in key order; the note of omitted bars ends the last. */
+    legends(s) {
+        const groups = [];
+        for (const look of Object.values(this.barStyles)) {
+            const g = look.group ?? 0;
+            (groups[g] ??= []).push({
+                label: look.label,
+                icon: html `<i data-pattern=${look.pattern ?? 'solid'} style="--bar:${look.color}"></i>`,
+            });
+        }
+        const rows = groups.filter(Boolean);
+        if (this.omitted) {
+            if (!rows.length)
+                rows.push([]);
+            rows[rows.length - 1].push({ label: s.omitted(this.omitted) });
+        }
+        return rows.map((items) => legend(items));
+    }
+}
+__decorate([
+    property({ attribute: false })
+], CaeLanes.prototype, "lanes", void 0);
+__decorate([
+    property({ attribute: false })
+], CaeLanes.prototype, "barStyles", void 0);
+__decorate([
+    property({ attribute: false })
+], CaeLanes.prototype, "range", void 0);
+__decorate([
+    property({ type: Boolean })
+], CaeLanes.prototype, "live", void 0);
+__decorate([
+    property({ type: Number })
+], CaeLanes.prototype, "omitted", void 0);
+__decorate([
+    property()
+], CaeLanes.prototype, "locale", void 0);
+__decorate([
+    property({ attribute: false })
+], CaeLanes.prototype, "strings", void 0);
+//# sourceMappingURL=lanes.js.map

package/dist/lanes/lanes.js.map

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

package/dist/lanes/stack.d.ts

@@ -0,0 +1,26 @@
+import type { Lane, TimeRange } from './types.js';
+interface Span {
+    start: number;
+    end: number | null;
+}
+/**
+ * The bars of a lane in order of start, each on the first row whose last bar
+ * has ended, so overlapping bars do not hide each other. A running bar (`end`
+ * null) keeps its row.
+ */
+export declare function stack<B extends Span>(bars: readonly B[]): {
+    bar: B;
+    row: number;
+}[];
+/**
+ * The axis that fits the bars: from the first start to the last end; with a
+ * running bar, to `now` plus 20 seconds, rounded up to the minute. Null with no bars.
+ */
+export declare function fitRange(lanes: readonly Lane[], now: number): TimeRange | null;
+/** A bar's left edge and width, in percent of the range; a running bar grows to `now`, within the range. */
+export declare function barBox(b: Span, range: TimeRange, now: number): {
+    left: number;
+    width: number;
+};
+export {};
+//# sourceMappingURL=stack.d.ts.map

package/dist/lanes/stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../src/lanes/stack.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAElD,UAAU,IAAI;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,EAAE,GAAG;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EAAE,CAWnF;AAMD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,IAAI,EAAE,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAO9E;AAED,4GAA4G;AAC5G,wBAAgB,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAK9F"}

package/dist/lanes/stack.js

@@ -0,0 +1,43 @@
+/**
+ * The bars of a lane in order of start, each on the first row whose last bar
+ * has ended, so overlapping bars do not hide each other. A running bar (`end`
+ * null) keeps its row.
+ */
+export function stack(bars) {
+    const ends = [];
+    return [...bars]
+        .sort((a, b) => a.start - b.start)
+        .map((bar) => {
+        const end = bar.end ?? Infinity;
+        let row = ends.findIndex((e) => e <= bar.start);
+        if (row < 0)
+            row = ends.push(end) - 1;
+        else
+            ends[row] = end;
+        return { bar, row };
+    });
+}
+/** A running bar extends the axis to now plus this margin, rounded up to `STEP_MS`. */
+const MARGIN_MS = 20e3;
+const STEP_MS = 60e3;
+/**
+ * The axis that fits the bars: from the first start to the last end; with a
+ * running bar, to `now` plus 20 seconds, rounded up to the minute. Null with no bars.
+ */
+export function fitRange(lanes, now) {
+    const bars = lanes.flatMap((l) => l.bars);
+    if (!bars.length)
+        return null;
+    const start = Math.min(...bars.map((b) => b.start));
+    const running = bars.some((b) => b.end === null);
+    const end = running ? start + Math.ceil((now - start + MARGIN_MS) / STEP_MS) * STEP_MS : Math.max(...bars.map((b) => b.end ?? now));
+    return { start, end };
+}
+/** A bar's left edge and width, in percent of the range; a running bar grows to `now`, within the range. */
+export function barBox(b, range, now) {
+    const span = Math.max(1, range.end - range.start);
+    const left = ((b.start - range.start) / span) * 100;
+    const w = (((b.end ?? now) - b.start) / span) * 100;
+    return { left, width: Math.max(0.4, b.end === null ? Math.min(100 - left, w) : w) };
+}
+//# sourceMappingURL=stack.js.map

package/dist/lanes/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sourceRoot":"","sources":["../../src/lanes/stack.ts"],"names":[],"mappings":"AASA;;;;GAIG;AACH,MAAM,UAAU,KAAK,CAAiB,IAAkB;IACtD,MAAM,IAAI,GAAa,EAAE,CAAC;IAC1B,OAAO,CAAC,GAAG,IAAI,CAAC;SACb,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;SACjC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;QACX,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,QAAQ,CAAC;QAChC,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,GAAG,GAAG,CAAC;YAAE,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;;YACjC,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QACrB,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtB,CAAC,CAAC,CAAC;AACP,CAAC;AAED,uFAAuF;AACvF,MAAM,SAAS,GAAG,IAAI,CAAC;AACvB,MAAM,OAAO,GAAG,IAAI,CAAC;AAErB;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAsB,EAAE,GAAW;IAC1D,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC1C,IAAI,CAAC,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC;IACjD,MAAM,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,KAAK,GAAG,SAAS,CAAC,GAAG,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC;IACpI,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AACxB,CAAC;AAED,4GAA4G;AAC5G,MAAM,UAAU,MAAM,CAAC,CAAO,EAAE,KAAgB,EAAE,GAAW;IAC3D,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC;IACpD,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC;IACpD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AACtF,CAAC"}

package/dist/lanes/styles.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/lanes/styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,yBAwBvB,CAAC"}

package/dist/lanes/styles.js

@@ -0,0 +1,30 @@
+// The look of `<cae-lanes>`: a label column, then a track per lane with its
+// bars; a bar's look is its colour (`--bar`) and its pattern (`data-pattern`),
+// the same on the bar and on its swatch in the legend.
+import { css } from 'lit';
+export const lanesStyles = css `
+  :host { display: block; container-type: inline-size; --label: var(--cae-lanes-label-width, 112px); }
+  /* narrow (the host is a container): a narrower label column, and the axis' first, middle and last times only */
+  @container (max-width: 760px) { .lanes { --label: var(--cae-lanes-label-width, 78px); } }
+  @container (max-width: 480px) { .axis span:nth-child(even) { display: none; } }
+  .lanes { position: relative; }
+  .axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--text-muted); margin: 0 0 6px calc(var(--label) + 8px); }
+  .lane { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); gap: 8px; align-items: center; min-height: 24px; padding: 4px 0; }
+  .name { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .track { position: relative; height: calc(var(--rows, 1) * 14px + 2px); border-radius: 4px;
+    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 10%); }
+  .bar { position: absolute; top: calc(var(--row, 0) * 14px + 2px); height: 12px; border-radius: 4px; min-width: 3px; cursor: default;
+    transform-origin: left center; transition: width 1s linear; }
+  .anim .bar:not(.running) { animation: growx 0.6s var(--ease) both; }
+  :is(.bar, .legend i)[data-pattern] { background: var(--bar); }
+  :is(.bar, .legend i)[data-pattern='hatched'] { background: repeating-linear-gradient(135deg, var(--bar) 0 3px, color-mix(in srgb, var(--bar) 55%, var(--bg)) 3px 5px); }
+  :is(.bar, .legend i)[data-pattern='outline'] { background: none; box-shadow: inset 0 0 0 1.5px var(--bar); }
+  :is(.bar, .legend i)[data-pattern='striped'] { background: repeating-linear-gradient(45deg, var(--bar) 0 6px, color-mix(in srgb, var(--bar) 60%, var(--bg)) 6px 12px);
+    background-size: 17px 17px; }
+  .bar[data-pattern='striped'] { animation: stripes 0.8s linear infinite; box-shadow: 0 0 12px color-mix(in srgb, var(--bar) 45%, transparent); }
+  .bar:hover { filter: brightness(1.2); }
+  .now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--status-running); border-radius: 2px; box-shadow: 0 0 10px var(--status-running); }
+  .legend { margin-top: 10px; }
+  .legend + .legend { margin-top: 4px; }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/lanes/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/lanes/styles.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,+EAA+E;AAC/E,uDAAuD;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwB7B,CAAC"}

package/dist/lanes/types.d.ts

@@ -0,0 +1,41 @@
+/** Something that took time: from `start` to `end` (epoch ms); `end` null while it runs. */
+export interface LaneBar {
+    id: string;
+    start: number;
+    /** Null: running, the bar grows to now. */
+    end: number | null;
+    /** The key of its look in the element's `barStyles`. */
+    style: string;
+    /** The bar's tooltip: one item per line. */
+    label: string;
+}
+/** A row of bars; overlapping bars of a lane are stacked (`stack`). */
+export interface Lane {
+    id: string;
+    label: string;
+    bars: readonly LaneBar[];
+}
+/** How a bar is filled: its colour, hatched, moving stripes, or only an outline. */
+export type LanePattern = 'solid' | 'hatched' | 'striped' | 'outline';
+/** A look of bars, and its entry in the legend. */
+export interface LaneStyle {
+    label: string;
+    /** A CSS colour or `var(...)`. */
+    color: string;
+    pattern?: LanePattern;
+    /** The legend row of its entry (0, the first, by default). */
+    group?: number;
+}
+export interface LanesStrings {
+    /** The note after the legend: bars the host left out. */
+    omitted: (n: number) => string;
+    /** No bars. */
+    empty: string;
+}
+export declare const DEFAULT_LANES_STRINGS: LanesStrings;
+/** The time the axis spans, epoch ms. */
+export interface TimeRange {
+    start: number;
+    end: number;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lanes/types.ts"],"names":[],"mappings":"AAEA,4FAA4F;AAC5F,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,uEAAuE;AACvE,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,OAAO,EAAE,CAAC;CAC1B;AAED,oFAAoF;AACpF,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtE,mDAAmD;AACnD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,yDAAyD;IACzD,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B,eAAe;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,qBAAqB,EAAE,YAGnC,CAAC;AAEF,yCAAyC;AACzC,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb"}

package/dist/lanes/types.js

@@ -0,0 +1,6 @@
+// What `<cae-lanes>` shows: bars on a time axis, a lane per group.
+export const DEFAULT_LANES_STRINGS = {
+    omitted: (n) => (n === 1 ? '1 bar not shown' : `${n} bars not shown`),
+    empty: 'No bars',
+};
+//# sourceMappingURL=types.js.map

package/dist/lanes/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/lanes/types.ts"],"names":[],"mappings":"AAAA,mEAAmE;AAyCnE,MAAM,CAAC,MAAM,qBAAqB,GAAiB;IACjD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,CAAC;IACrE,KAAK,EAAE,SAAS;CACjB,CAAC"}

package/dist/markdown/cae-markdown.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+export interface MarkdownStrings {
+    /** The button that shows the text rendered. */
+    showRendered: string;
+    /** The button that shows the text as it is. */
+    showSource: string;
+}
+export declare const DEFAULT_MARKDOWN_STRINGS: Readonly<MarkdownStrings>;
+/**
+ * A markdown text with a rendered/source switch. `split` may take a leading line
+ * off the text, shown apart above the rendered body; the source is the text as
+ * it is.
+ *
+ * @tagname cae-markdown
+ * @csspart toggle - the rendered/source button
+ */
+export declare class CaeMarkdown extends LitElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    text: string;
+    /** Takes a leading line off the text (`head`), shown apart above the rendered `body`. */
+    split?: (text: string) => {
+        head: string;
+        body: string;
+    };
+    /** Marks up the rendered (escaped) HTML further, as `mdFile`'s `mark`. */
+    transform?: (html: string) => string;
+    /** The visible words; English by default. */
+    strings: Partial<MarkdownStrings>;
+    private source;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cae-markdown': CaeMarkdown;
+    }
+}
+//# sourceMappingURL=cae-markdown.d.ts.map

package/dist/markdown/cae-markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cae-markdown.d.ts","sourceRoot":"","sources":["../../src/markdown/cae-markdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAOrD,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB,EAAE,QAAQ,CAAC,eAAe,CAAgE,CAAC;AAEhI;;;;;;;GAOG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0DASpB;IAEU,IAAI,SAAM;IACtB,yFAAyF;IACzD,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACzF,0EAA0E;IAC1C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACrE,6CAA6C;IACb,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,CAAM;IAC9D,OAAO,CAAC,MAAM,CAAS;IAEvB,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}