@contraagent/elements 0.1.0 → 0.2.0

package/dist/tree/tree.js

@@ -0,0 +1,251 @@
+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, css, html, nothing, svg } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { emit } from '../core/events.js';
+import { withDefaults } from '../core/strings.js';
+import { statusChip } from '../primitives/pill.js';
+import { base } from '../styles/index.js';
+export const DEFAULT_TREE_STRINGS = { empty: 'No items' };
+const hasChildren = (t) => !!t.children?.length;
+const selectable = (t) => t.selectable ?? !hasChildren(t);
+/** The items shown, top to bottom: every item whose ancestors are all open (`isOpen`). */
+export function visibleRows(items, isOpen) {
+    const out = [];
+    const walk = (list, level, parent) => list.forEach((item, index) => {
+        out.push({ item, level, parent, index, siblings: list.length });
+        if (hasChildren(item) && isOpen(item))
+            walk(item.children, level + 1, item.id);
+    });
+    walk(items, 1, null);
+    return out;
+}
+/** The ids of the ancestors of item `id`, outermost first; null when no item has that id. */
+export function ancestorsOf(items, id) {
+    for (const t of items) {
+        if (t.id === id)
+            return [];
+        const below = t.children ? ancestorsOf(t.children, id) : null;
+        if (below)
+            return [t.id, ...below];
+    }
+    return null;
+}
+/** The first item, depth first, that `match` accepts. */
+export function findItem(items, match) {
+    for (const t of items) {
+        if (match(t))
+            return t;
+        const below = t.children ? findItem(t.children, match) : null;
+        if (below)
+            return below;
+    }
+    return null;
+}
+const FOLDER = svg `<path d="M1.5 3.5h4l1.5 1.5h7.5v8h-13z" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path>`;
+const FILE = svg `<path d="M3.5 1.5h6l3 3v10h-9z M9.5 1.5v3h3" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path>`;
+/**
+ * Items in a tree, the children of each under it, folded and opened by the reader: files
+ * and directories, say. It is one tab stop: Up and Down move between the items shown,
+ * Right opens an item (then moves to its first child), Left closes it (or moves to its
+ * parent), Home and End go to the first and the last, a letter to the next item of
+ * that initial; Enter, Space or a click selects a selectable item (`cae-select`) and
+ * opens or closes any other. The toggle before an item with children opens and closes
+ * it (`cae-toggle`). The ancestors of `selected` are always open.
+ *
+ * @tagname cae-tree
+ * @fires cae-select - `{id}`: an item was chosen with a click, Enter or Space
+ * @fires cae-toggle - `{id, open}`: the reader opened or closed an item
+ * @csspart tree - the list of items
+ * @csspart item - an item's row
+ * @csspart empty - what it shows with no items
+ */
+export class CaeTree extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        /** The selected item's id, or null. */
+        this.selected = null;
+        /** What the tree is named to a screen reader. */
+        this.label = '';
+        /** The visible words; English by default. */
+        this.strings = {};
+        /** The reader's choice of open and closed items, by id, over each item's `open`. */
+        this.opened = new Map();
+        /** The item that holds the tab stop. */
+        this.focusId = null;
+        this.isOpen = (t) => this.opened.get(t.id) ?? t.open ?? true;
+    }
+    static { this.styles = [
+        base,
+        css `
+      :host { display: block; font-size: var(--font-size-md); }
+      .tree { margin: 0; padding: 2px 0; }
+      .row { display: flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px 0 calc((var(--level) - 1) * 14px + 4px);
+        border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; color: var(--text-2); }
+      .row:hover { background: var(--raise); }
+      .row[aria-selected='true'] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
+      .row:focus-visible { outline-offset: -2px; }
+      .twist { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--text-muted); border-radius: var(--radius-sm); }
+      .twist svg { transition: transform 0.12s ease; }
+      [aria-expanded='true'] > .twist svg { transform: rotate(90deg); }
+      .twist:hover { color: var(--text); }
+      .icon { flex: none; width: 16px; height: 16px; color: var(--text-muted); }
+      .name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+      .badge { flex: none; margin-left: 6px; font-size: 11px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--raise); color: var(--text-2); }
+      .badge[data-tone] { background: var(--tone-bg); color: var(--tone); }
+      .badge[data-tone='done'] { background: none; color: var(--text-2); }
+      .empty { color: var(--text-muted); font-size: var(--font-size-sm); padding: 4px 8px; }
+      @media (prefers-reduced-motion: reduce) { .twist svg { transition: none; } }
+    `,
+    ]; }
+    willUpdate(changed) {
+        if (changed.has('selected') && this.selected) {
+            const up = ancestorsOf(this.items, this.selected);
+            if (up?.some((id) => this.opened.get(id) !== true)) {
+                const next = new Map(this.opened);
+                for (const id of up)
+                    next.set(id, true);
+                this.opened = next;
+            }
+        }
+    }
+    updated(changed) {
+        if (changed.has('selected') && this.selected && !this.matches(':focus-within')) {
+            this.rowOf(this.selected)?.scrollIntoView?.({ block: 'nearest' });
+        }
+    }
+    rowOf(id) {
+        return this.renderRoot.querySelector(`[data-id="${CSS.escape(id)}"]`);
+    }
+    setOpen(t, open) {
+        if (!hasChildren(t) || this.isOpen(t) === open)
+            return;
+        this.opened = new Map(this.opened).set(t.id, open);
+        emit(this, 'cae-toggle', { id: t.id, open });
+    }
+    choose(t) {
+        this.focusId = t.id;
+        if (selectable(t))
+            emit(this, 'cae-select', { id: t.id });
+        else
+            this.setOpen(t, !this.isOpen(t));
+    }
+    async moveTo(id) {
+        this.focusId = id;
+        await this.updateComplete;
+        this.rowOf(id)?.focus();
+    }
+    onKey(e, rows, i) {
+        const row = rows[i];
+        const t = row.item;
+        let to;
+        switch (e.key) {
+            case 'ArrowDown':
+                to = rows[i + 1];
+                break;
+            case 'ArrowUp':
+                to = rows[i - 1];
+                break;
+            case 'Home':
+                to = rows[0];
+                break;
+            case 'End':
+                to = rows[rows.length - 1];
+                break;
+            case 'ArrowRight':
+                if (hasChildren(t) && !this.isOpen(t))
+                    this.setOpen(t, true);
+                else if (hasChildren(t))
+                    to = rows[i + 1];
+                break;
+            case 'ArrowLeft':
+                if (hasChildren(t) && this.isOpen(t))
+                    this.setOpen(t, false);
+                else if (row.parent)
+                    to = rows.find((r) => r.item.id === row.parent);
+                break;
+            case 'Enter':
+            case ' ':
+                this.choose(t);
+                break;
+            default: {
+                if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey || !/\S/.test(e.key))
+                    return;
+                const k = e.key.toLowerCase();
+                const order = [...rows.slice(i + 1), ...rows.slice(0, i)];
+                to = order.find((r) => r.item.name.toLowerCase().startsWith(k));
+                if (!to)
+                    return;
+            }
+        }
+        e.preventDefault();
+        if (to)
+            void this.moveTo(to.item.id);
+    }
+    render() {
+        if (!this.items.length)
+            return html `<div class="empty" part="empty">${withDefaults(DEFAULT_TREE_STRINGS, this.strings).empty}</div>`;
+        const rows = visibleRows(this.items, this.isOpen);
+        const stop = rows.find((r) => r.item.id === this.focusId) ?? rows.find((r) => r.item.id === this.selected) ?? rows[0];
+        return html `<div class="tree" role="tree" part="tree" aria-label=${this.label || nothing}>
+      ${rows.map((r, i) => this.row(r, i, rows, r === stop))}
+    </div>`;
+    }
+    row(r, i, rows, stop) {
+        const t = r.item;
+        const parent = hasChildren(t);
+        const open = parent && this.isOpen(t);
+        const directory = (t.icon ?? (parent ? 'directory' : 'file')) === 'directory';
+        return html `<div
+      class="row"
+      part="item"
+      role="treeitem"
+      data-id=${t.id}
+      tabindex=${stop ? 0 : -1}
+      style="--level: ${r.level}"
+      aria-level=${r.level}
+      aria-setsize=${r.siblings}
+      aria-posinset=${r.index + 1}
+      aria-expanded=${parent ? String(open) : nothing}
+      aria-selected=${selectable(t) ? String(t.id === this.selected) : nothing}
+      @click=${() => this.choose(t)}
+      @focus=${() => (this.focusId = t.id)}
+      @keydown=${(e) => this.onKey(e, rows, i)}
+    >
+      <span class="twist" aria-hidden="true" @click=${(e) => {
+            if (!parent)
+                return;
+            e.stopPropagation();
+            this.focusId = t.id;
+            this.setOpen(t, !open);
+        }}>${parent ? html `<svg width="10" height="10" viewBox="0 0 10 10"><path d="M3 1.5 7 5 3 8.5" fill="none" stroke="currentColor" stroke-width="1.5"></path></svg>` : nothing}</span>
+      <svg class="icon" viewBox="0 0 16 16" aria-hidden="true">${directory ? FOLDER : FILE}</svg>
+      <span class="name">${t.name}</span>
+      ${t.badge ? statusChip('badge', { text: t.badge, tone: t.tone ?? 'neutral' }) : nothing}
+    </div>`;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], CaeTree.prototype, "items", void 0);
+__decorate([
+    property({ attribute: false })
+], CaeTree.prototype, "selected", void 0);
+__decorate([
+    property()
+], CaeTree.prototype, "label", void 0);
+__decorate([
+    property({ attribute: false })
+], CaeTree.prototype, "strings", void 0);
+__decorate([
+    state()
+], CaeTree.prototype, "opened", void 0);
+__decorate([
+    state()
+], CaeTree.prototype, "focusId", void 0);
+//# sourceMappingURL=tree.js.map

package/dist/tree/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../src/tree/tree.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAA4C,MAAM,KAAK,CAAC;AACpG,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAwB1C,MAAM,CAAC,MAAM,oBAAoB,GAA0B,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;AAWjF,MAAM,WAAW,GAAG,CAAC,CAAW,EAAW,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC;AACnE,MAAM,UAAU,GAAG,CAAC,CAAW,EAAW,EAAE,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;AAE7E,0FAA0F;AAC1F,MAAM,UAAU,WAAW,CAAC,KAA0B,EAAE,MAAgC;IACtF,MAAM,GAAG,GAAc,EAAE,CAAC;IAC1B,MAAM,IAAI,GAAG,CAAC,IAAyB,EAAE,KAAa,EAAE,MAAqB,EAAE,EAAE,CAC/E,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC3B,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAChE,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC;YAAE,IAAI,CAAC,IAAI,CAAC,QAAS,EAAE,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAClF,CAAC,CAAC,CAAC;IACL,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;IACrB,OAAO,GAAG,CAAC;AACb,CAAC;AAED,6FAA6F;AAC7F,MAAM,UAAU,WAAW,CAAC,KAA0B,EAAE,EAAU;IAChE,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;QACtB,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE;YAAE,OAAO,EAAE,CAAC;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC9D,IAAI,KAAK;YAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,KAAK,CAAC,CAAC;IACrC,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,yDAAyD;AACzD,MAAM,UAAU,QAAQ,CAAC,KAA0B,EAAE,KAA+B;IAClF,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;QACtB,IAAI,KAAK,CAAC,CAAC,CAAC;YAAE,OAAO,CAAC,CAAC;QACvB,MAAM,KAAK,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC9D,IAAI,KAAK;YAAE,OAAO,KAAK,CAAC;IAC1B,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,MAAM,GAAG,GAAG,CAAA,8HAA8H,CAAC;AACjJ,MAAM,IAAI,GAAG,GAAG,CAAA,mIAAmI,CAAC;AAEpJ;;;;;;;;;;;;;;;GAeG;AACH,MAAM,OAAO,OAAQ,SAAQ,UAAU;IAAvC;;QAyBkC,UAAK,GAAwB,EAAE,CAAC;QAChE,uCAAuC;QACP,aAAQ,GAAkB,IAAI,CAAC;QAC/D,iDAAiD;QACrC,UAAK,GAAG,EAAE,CAAC;QACvB,6CAA6C;QACb,YAAO,GAAyB,EAAE,CAAC;QAEnE,oFAAoF;QACnE,WAAM,GAAG,IAAI,GAAG,EAAmB,CAAC;QACrD,wCAAwC;QACvB,YAAO,GAAkB,IAAI,CAAC;QAE9B,WAAM,GAAG,CAAC,CAAW,EAAW,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC;IA2H9F,CAAC;aAhKiB,WAAM,GAAG;QACvB,IAAI;QACJ,GAAG,CAAA;;;;;;;;;;;;;;;;;;;KAmBF;KACF,AAtBqB,CAsBpB;IAiBO,UAAU,CAAC,OAA6B;QAC/C,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7C,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YAClD,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC;gBACnD,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAClC,KAAK,MAAM,EAAE,IAAI,EAAE;oBAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;gBACxC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,CAAC;QACH,CAAC;IACH,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC5C,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;YAC/E,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QACpE,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,EAAU;QACtB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,aAAa,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IACrF,CAAC;IAEO,OAAO,CAAC,CAAW,EAAE,IAAa;QACxC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,IAAI;YAAE,OAAO;QACvD,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;QACnD,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/C,CAAC;IAEO,MAAM,CAAC,CAAW;QACxB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,EAAE,CAAC;QACpB,IAAI,UAAU,CAAC,CAAC,CAAC;YAAE,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;;YACrD,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC;IAEO,KAAK,CAAC,MAAM,CAAC,EAAU;QAC7B,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;IAC1B,CAAC;IAEO,KAAK,CAAC,CAAgB,EAAE,IAAwB,EAAE,CAAS;QACjE,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAE,CAAC;QACrB,MAAM,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC;QACnB,IAAI,EAAuB,CAAC;QAC5B,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;YACd,KAAK,WAAW;gBACd,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBACjB,MAAM;YACR,KAAK,SAAS;gBACZ,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBACjB,MAAM;YACR,KAAK,MAAM;gBACT,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;gBACb,MAAM;YACR,KAAK,KAAK;gBACR,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC3B,MAAM;YACR,KAAK,YAAY;gBACf,IAAI,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;oBAAE,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;qBACxD,IAAI,WAAW,CAAC,CAAC,CAAC;oBAAE,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC1C,MAAM;YACR,KAAK,WAAW;gBACd,IAAI,WAAW,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;oBAAE,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;qBACxD,IAAI,GAAG,CAAC,MAAM;oBAAE,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,MAAM,CAAC,CAAC;gBACrE,MAAM;YACR,KAAK,OAAO,CAAC;YACb,KAAK,GAAG;gBACN,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;gBACf,MAAM;YACR,OAAO,CAAC,CAAC,CAAC;gBACR,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;oBAAE,OAAO;gBAC1F,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;gBAC9B,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBAC1D,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;gBAChE,IAAI,CAAC,EAAE;oBAAE,OAAO;YAClB,CAAC;QACH,CAAC;QACD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,EAAE;YAAE,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvC,CAAC;IAEQ,MAAM;QACb,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA,mCAAmC,YAAY,CAAC,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,QAAQ,CAAC;QACrI,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAClD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC;QACtH,OAAO,IAAI,CAAA,wDAAwD,IAAI,CAAC,KAAK,IAAI,OAAO;QACpF,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;WACjD,CAAC;IACV,CAAC;IAEO,GAAG,CAAC,CAAU,EAAE,CAAS,EAAE,IAAwB,EAAE,IAAa;QACxE,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;QACjB,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;QAC9B,MAAM,IAAI,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACtC,MAAM,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,WAAW,CAAC;QAC9E,OAAO,IAAI,CAAA;;;;gBAIC,CAAC,CAAC,EAAE;iBACH,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACN,CAAC,CAAC,KAAK;mBACZ,CAAC,CAAC,KAAK;qBACL,CAAC,CAAC,QAAQ;sBACT,CAAC,CAAC,KAAK,GAAG,CAAC;sBACX,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO;sBAC/B,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;eAC/D,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;eACpB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,EAAE,CAAC;iBACzB,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;;sDAEP,CAAC,CAAQ,EAAE,EAAE;YAC3D,IAAI,CAAC,MAAM;gBAAE,OAAO;YACpB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,EAAE,CAAC;YACpB,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,+IAA+I,CAAC,CAAC,CAAC,OAAO;iEAChH,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;2BAC/D,CAAC,CAAC,IAAI;QACzB,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO;WAClF,CAAC;IACV,CAAC;;AAvI+B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sCAAiC;AAEhC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCAAgC;AAEnD;IAAX,QAAQ,EAAE;sCAAY;AAES;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wCAAoC;AAGlD;IAAhB,KAAK,EAAE;uCAA6C;AAEpC;IAAhB,KAAK,EAAE;wCAAuC"}

package/docs/code.md

@@ -0,0 +1,55 @@
+# Code
+
+`<cae-code>` shows a text as code: highlighted by its language, each line
+numbered, some lines marked, with a switch between long lines wrapped and
+scrolled sideways and a button that copies the whole text. Register it with
+`@contraagent/elements/code/define`; the element, the tokenizer it is drawn with
+and the languages it reads are in `@contraagent/elements/code`.
+
+<!-- not on the site -->
+Live on this topic's page of the documentation site (`pnpm run docs` in `web/`).
+
+::code{file="examples/code.ts"}
+
+## The text
+
+`code` is the text and `language` its language: a name of `LANGUAGES`, another
+name of one (`py`, `ts`, `sh`, `yml`) or a file name (`src/main.rs`); any other
+is shown as plain text. `start` is the number of the first line (1), and
+`highlight` marks lines in those numbers: a number for one line, a pair for the
+lines from the first to the last. A marked line has a bar beside its number and
+a tint. `path` names the file in the header; `label` names the lines to a screen
+reader (default: the path).
+
+A long text costs time to draw, so the element shows at most `maxLines` lines
+(5,000) and `maxCharacters` characters (500,000), cut at the end of a line, and
+says under them how many lines the text has (`strings.cut`). The copy button
+copies the whole text all the same.
+
+## Highlighting
+
+The highlighter is a small tokenizer of the package: each language is a few
+regular expressions and its words, so it needs no library and no request. It
+reads Python, JSON, JavaScript, TypeScript, C, C++, Java, Go, Rust, shell, TOML
+(and INI), YAML, SQL, XML (and HTML and SVG) and diffs. It marks comments,
+strings, numbers, keywords, constants, built-in names, the names a function or a
+type is given where it is defined, and a language's own parts (keys, tags,
+attributes, added and removed lines); it does not parse, so a rare construct may
+take the colour of a simpler one. `tokenize(code, language)` returns the tokens,
+`highlight(code, language)` escaped HTML; markdown's code blocks use the same
+(`@contraagent/elements/markdown`). The colours are the theme's `--ca-code-*`
+tokens ([Theming](theming.md)).
+
+::code{file="../src/code/highlight.ts" from="/** What a token is" to="/** The languages highlighted"}
+
+## Reading it
+
+The lines are one tab stop that scrolls with the arrow keys. The numbers are
+drawn beside the lines and are not part of a selection, so selected lines copy
+without them. `wrap` wraps long lines at first; the reader's switch
+(`strings.wrap`) changes it.
+
+## Look
+
+`--cae-code-max-height` sets the most the lines grow to before they scroll (70vh).
+The parts are `header`, `code` and `cut`.

package/docs/examples/code.ts

@@ -0,0 +1,28 @@
+// Code: a hand-written script, numbered from line 12, two of its lines marked; and
+// the same element on a text too long to show whole.
+import '@contraagent/elements/code/define';
+
+const script = `def build(target: str, jobs: int = 4) -> bool:
+    """Build one target; True when it passed."""
+    result = run(["make", f"-j{jobs}", target])
+    if result.returncode != 0:
+        log.error("build of %s failed", target)  # the log names the target
+        return False
+    return True
+`;
+
+export function mount(host: HTMLElement): void {
+  const code = document.createElement('cae-code');
+  code.code = script;
+  code.language = 'python';
+  code.path = 'ci/build.py';
+  code.start = 12;
+  code.highlight = [15, [16, 17]];
+
+  const long = document.createElement('cae-code');
+  long.code = Array.from({ length: 40 }, (_, i) => `step ${i + 1}: ok`).join('\n');
+  long.path = 'logs/steps.txt';
+  long.maxLines = 6;
+  long.style.marginTop = '12px';
+  host.replaceChildren(code, long);
+}

package/docs/examples/tree.ts

@@ -0,0 +1,44 @@
+// A tree of a CI pipeline's files, paired with a code element: selecting a file shows
+// its text. The host holds the selection and answers `cae-select`.
+import '@contraagent/elements/code/define';
+import '@contraagent/elements/tree/define';
+import type { TreeItem } from '@contraagent/elements/tree';
+
+const files: Record<string, string> = {
+  'ci/build.py': 'def build(target: str) -> bool:\n    return run(["make", target]).returncode == 0\n',
+  'ci/jobs.yaml': 'jobs:\n  unit: { needs: [build] }\n  lint: { needs: [] }\n',
+  'ci/tests/test_build.py': 'def test_build():\n    assert build("all")\n',
+  'README.md': 'The CI pipeline of the project.\n',
+};
+
+const items: TreeItem[] = [
+  {
+    id: 'ci',
+    name: 'ci',
+    children: [
+      { id: 'ci/build.py', name: 'build.py' },
+      { id: 'ci/jobs.yaml', name: 'jobs.yaml', badge: 'changed', tone: 'attention' },
+      { id: 'ci/tests', name: 'tests', open: false, children: [{ id: 'ci/tests/test_build.py', name: 'test_build.py', badge: 'failed', tone: 'failed' }] },
+    ],
+  },
+  { id: 'README.md', name: 'README.md' },
+];
+
+export function mount(host: HTMLElement): void {
+  const tree = document.createElement('cae-tree');
+  tree.items = items;
+  tree.label = 'Files';
+  const code = document.createElement('cae-code');
+  const show = (id: string) => {
+    tree.selected = id;
+    code.code = files[id] ?? '';
+    code.path = id;
+    code.language = id;
+  };
+  tree.addEventListener('cae-select', (e) => e.detail.id && show(e.detail.id));
+  show('ci/build.py');
+  const pair = document.createElement('div');
+  pair.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-items: start';
+  pair.append(tree, code);
+  host.replaceChildren(pair);
+}

package/docs/tree.md

@@ -0,0 +1,44 @@
+# Tree
+
+`<cae-tree>` shows items in a tree, the children of each under it, folded and
+opened by the reader: files and directories, say. Register it with
+`@contraagent/elements/tree/define`; the types are in
+`@contraagent/elements/tree`.
+
+<!-- not on the site -->
+Live on this topic's page of the documentation site (`pnpm run docs` in `web/`).
+
+::code{file="examples/tree.ts"}
+
+## Items
+
+An item is a `TreeItem`: an `id` unique in the tree, a `name` and its
+`children`. Its icon is a directory for an item with children and a file for one
+without, unless `icon` names one. A `badge` is a word beside the name in the
+colour of its `tone`, with the tone's mark (✓ done, ✕ failed, ◌ attention).
+`open: false` folds an item at first.
+
+::code{file="../src/tree/tree.ts" from="/** One item of a tree" to="export interface TreeStrings"}
+
+## Selection
+
+`selected` is the selected item's id; the element shows it and opens its
+ancestors, and the host sets it. A click, Enter or Space on a selectable item
+sends `cae-select` with its id: by default an item with no children is
+selectable, and an item with children opens and closes instead. The toggle
+before an item with children, Right and Left open and close it and send
+`cae-toggle`. A host pairs a tree with `<cae-code>` by showing the selected
+file's text beside it ([Code](code.md)).
+
+## Keyboard
+
+The tree is one tab stop, on the selected item or else the first. Up and Down
+move between the items shown, Right opens an item and then moves to its first
+child, Left closes it or moves to its parent, Home and End go to the first and
+the last item, and a letter moves to the next item whose name starts with it. A
+screen reader hears each item's level, its place among its siblings, and whether
+it is open and selected.
+
+## Look
+
+The parts are `tree`, `item` (with `data-id`) and `empty`.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contraagent/elements",
-  "version": "0.1.0",
-  "description": "Generic web components (Lit) and their parts: design tokens, themes, status pills, legends, a segmented control, a data table, a layered graph, a mark matrix, stat tiles, time lanes, charts (columns, lines, a heatmap, horizontal bars), a check table, a transcript, a JSON tree, markdown and counters. No contraagent data, no localization library",
+  "version": "0.2.0",
+  "description": "Generic web components (Lit) and their parts: design tokens, themes, status pills, legends, a segmented control, a data table, a layered graph, a mark matrix, stat tiles, time lanes, charts (columns, lines, a heatmap, horizontal bars), a check table, a transcript, a JSON tree, markdown, highlighted code, a tree of items and counters. No contraagent data, no localization library",
   "license": "MIT",
   "keywords": [
     "web-components",
@@ -46,6 +46,14 @@
       "types": "./dist/markdown/index.d.ts",
       "default": "./dist/markdown/index.js"
     },
+    "./code": {
+      "types": "./dist/code/index.d.ts",
+      "default": "./dist/code/index.js"
+    },
+    "./tree": {
+      "types": "./dist/tree/index.d.ts",
+      "default": "./dist/tree/index.js"
+    },
     "./count": {
       "types": "./dist/count/index.d.ts",
       "default": "./dist/count/index.js"
@@ -94,6 +102,14 @@
       "types": "./dist/define/markdown.d.ts",
       "default": "./dist/define/markdown.js"
     },
+    "./code/define": {
+      "types": "./dist/define/code.d.ts",
+      "default": "./dist/define/code.js"
+    },
+    "./tree/define": {
+      "types": "./dist/define/tree.d.ts",
+      "default": "./dist/define/tree.js"
+    },
     "./count/define": {
       "types": "./dist/define/count.d.ts",
       "default": "./dist/define/count.js"
@@ -157,7 +173,7 @@
     "lit": "^3.3.3"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json && cem analyze --litelement --globs 'src/*/{segmented,data-table,layered-graph,mark-matrix,stat-tiles,lanes,column-chart,line-chart,heatmap,bar-chart,check-table,transcript,json-tree,cae-markdown,count,elapsed}.ts'",
+    "build": "tsc -p tsconfig.build.json && cem analyze --litelement --globs 'src/*/{segmented,data-table,layered-graph,mark-matrix,stat-tiles,lanes,column-chart,line-chart,heatmap,bar-chart,check-table,transcript,json-tree,cae-markdown,code,tree,count,elapsed}.ts'",
     "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p docs"
   }
 }