@fusion.dev/helix-headless 0.144.0 → 0.146.0

package/dist/object-inspector/root/object-inspector-root.js

@@ -5,22 +5,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessObjectInspector_1;
-import { AriaForwardController, CopyController, customElement, elementById, fillTemplate, formatNumbers, HelixElement, inlineStep, scrollItemIntoView, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CopyController, countLabel, customElement, drawStatus, elementById, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeCloseEvent, HelixBeforeOpenEvent, HelixElement, HelixFilterEvent, HelixFilteredEvent, inlineStep, requestChange, StatusController, scrollItemIntoView, searchableById, treeArrow, VirtualizeController, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html as staticHtml } from 'lit/static-html.js';
 import '../../copy-button/index.js';
-const branchy = (value) => value !== null && typeof value === 'object';
-const entries = (value) => Array.isArray(value) ? value.map((item, at) => [String(at), item]) : Object.entries(value);
-const child = (path, key) => `${path}/${key.replaceAll('~', '~0').replaceAll('/', '~1')}`;
+import { cursorFor, entries, flatten, search, seed, siblingBranches, withAncestors, } from '../rows.js';
 let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends HelixElement {
     constructor() {
         super(...arguments);
         this.copyLabel = 'Copy {name}';
         this.copyValueLabel = 'Copy value';
         this.defaultDepth = 1;
+        this.filter = '';
+        this.filterable = false;
+        this.filterLabel = 'Filter';
         this.for = '';
         this.itemLabel = '{count} item';
         this.itemsLabel = '{count} items';
@@ -28,19 +30,24 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.keysLabel = '{count} keys';
         this.label = '';
         this.noCopy = false;
+        this.resultLabel = '{count} result';
+        this.resultsLabel = '{count} results';
         this.treeLabel = 'Value';
         this.value = undefined;
         this.windowed = false;
         this.read = undefined;
         this.opened = new Set();
-        this.active = 0;
+        this.cursor = 0;
         this.revealing = false;
+        this.focusing = false;
+        this.hadFocus = false;
         this.typed = { at: 0, text: '' };
         this.branches = new Set();
         this.aria = new AriaForwardController(this, {
             label: true,
             target: () => this.partNamed('tree'),
         });
+        this.status = new StatusController(this);
         this.virtualize = new VirtualizeController(this, {
             container: () => (this.windowed ? this.partNamed('tree') : null),
             count: () => this.rows.length,
@@ -52,7 +59,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.copier = new CopyController(this);
         this.handleKeydown = (event) => {
             const rows = this.rows;
-            const row = rows[this.active];
+            const row = rows[this.cursor];
             if (!row) {
                 return;
             }
@@ -66,10 +73,10 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             }
             switch (event.key) {
                 case 'ArrowDown':
-                    this.move(this.active + 1);
+                    this.move(this.cursor + 1);
                     break;
                 case 'ArrowUp':
-                    this.move(this.active - 1);
+                    this.move(this.cursor - 1);
                     break;
                 case 'Home':
                     this.move(0);
@@ -79,22 +86,23 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                     break;
                 case 'ArrowRight':
                 case 'ArrowLeft':
-                    if (inlineStep(this, event.key) === 1) {
-                        if (row.branch && !row.open) {
-                            this.toggle(row, true);
-                        }
-                        else if (row.open) {
-                            this.move(this.active + 1);
-                        }
-                    }
-                    else if (row.open) {
-                        this.toggle(row, false);
-                    }
-                    else {
-                        const parent = rows.findLastIndex((candidate, at) => at < this.active && candidate.depth === row.depth - 1);
-                        if (parent >= 0) {
-                            this.move(parent);
+                    switch (treeArrow(row, inlineStep(this, event.key) === 1 ? 1 : -1)) {
+                        case 'open':
+                        case 'close':
+                            this.toggle(row, !row.open);
+                            break;
+                        case 'child':
+                            this.move(this.cursor + 1);
+                            break;
+                        case 'parent': {
+                            const parent = rows.findLastIndex((candidate, at) => at < this.cursor && candidate.depth === row.depth - 1);
+                            if (parent >= 0) {
+                                this.move(parent);
+                            }
+                            break;
                         }
+                        default:
+                            break;
                     }
                     break;
                 case 'Enter':
@@ -104,7 +112,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                     }
                     break;
                 case '*':
-                    this.openSiblings(row);
+                    this.requestOpen(siblingBranches(rows, row), true);
                     break;
                 default:
                     if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) {
@@ -114,80 +122,115 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             }
             event.preventDefault();
         };
-    }
-    static { HelixHeadlessObjectInspector_1 = this; }
-    static { this.ESTIMATE = 24; }
-    get root() {
-        return this.value === undefined ? this.read : this.value;
-    }
-    flatten() {
-        const rows = [];
-        if (this.root === undefined) {
-            return rows;
-        }
-        const visit = (value, path, depth, position, siblings, key) => {
-            const branch = branchy(value);
-            const open = branch && this.opened.has(path);
-            rows.push({
-                branch,
-                depth,
-                open,
-                path,
-                position,
-                siblings,
-                value,
-                ...(key === undefined ? {} : { key }),
+        this.handleFilterInput = (event) => {
+            const field = event.currentTarget;
+            const applied = requestChange({
+                apply: (value) => {
+                    this.filter = value;
+                },
+                event: (value) => new HelixFilterEvent({ value }),
+                host: this,
+                next: field.value,
             });
-            if (open) {
-                const children = entries(value);
-                children.forEach(([name, item], at) => {
-                    visit(item, child(path, name), depth + 1, at + 1, children.length, name);
-                });
+            if (applied) {
+                this.dispatchEvent(new HelixFilteredEvent({ value: field.value }));
+            }
+            else {
+                field.value = this.filter;
             }
         };
-        visit(this.root, '', 0, 1, 1);
-        return rows;
-    }
-    seed(keep) {
-        const opened = new Set();
-        const branches = new Set();
-        const visit = (value, path, depth) => {
-            if (!branchy(value)) {
-                return;
+        this.handleFilterKeydown = (event) => {
+            if (event.key === 'ArrowDown' && this.rows.length > 0) {
+                event.preventDefault();
+                this.revealing = true;
+                this.focusing = true;
+                this.requestUpdate();
             }
-            branches.add(path);
-            const known = keep && this.branches.has(path);
-            if (known ? this.opened.has(path) : depth < this.defaultDepth) {
-                opened.add(path);
+        };
+        this.handleFocusIn = (event) => {
+            const index = Number(event.target.dataset?.index);
+            if (Number.isInteger(index) && index !== this.cursor) {
+                this.move(index);
             }
-            for (const [name, item] of entries(value)) {
-                visit(item, child(path, name), depth + 1);
+        };
+        this.handleFocusOut = () => {
+            if (this.windowed) {
+                this.requestUpdate();
             }
         };
-        visit(this.root, '', 0);
+    }
+    static { HelixHeadlessObjectInspector_1 = this; }
+    get active() {
+        return this.wanted ?? this.rows[this.cursor]?.path ?? '';
+    }
+    set active(path) {
+        const previous = this.active;
+        this.wanted = path;
+        this.requestUpdate('active', previous);
+    }
+    get expanded() {
+        return [...this.opened];
+    }
+    set expanded(paths) {
+        const previous = this.expanded;
+        this.declared = new Set(paths);
+        this.opened = this.declared;
+        this.requestUpdate('expanded', previous);
+    }
+    static { this.ESTIMATE = 24; }
+    get root() {
+        return this.value === undefined ? this.read : this.value;
+    }
+    seed(keep) {
+        const { branches, opened } = seed(this.root, this.defaultDepth, keep ? this.branches : undefined, this.opened);
         this.branches = branches;
         this.opened = opened;
         if (!keep) {
-            this.active = 0;
+            this.cursor = 0;
         }
     }
+    openAround(paths) {
+        this.opened = withAncestors(this.opened, this.branches, paths);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.hadFocus = this.hasFocusedRow();
         if (this.loadedFor !== this.for && searchableById(this) && !this.hydrating) {
             this.loadedFor = this.for;
             this.load();
         }
-        const was = this.rows[this.active]?.path;
-        if (changed.has('value') || changed.has('read') || changed.has('defaultDepth')) {
+        const was = this.rows[this.cursor]?.path;
+        const written = this.declared;
+        this.declared = undefined;
+        const fresh = changed.has('value') || changed.has('read');
+        if (fresh || changed.has('defaultDepth')) {
             this.seed(!changed.has('defaultDepth'));
         }
-        if (changed.has('value') ||
-            changed.has('read') ||
-            changed.has('opened') ||
-            changed.has('defaultDepth')) {
-            this.rows = this.flatten();
-            const found = was === undefined ? -1 : this.rows.findIndex((row) => row.path === was);
-            this.active = found >= 0 ? found : Math.min(this.active, Math.max(0, this.rows.length - 1));
+        if (written) {
+            this.opened = written;
+        }
+        if (fresh || changed.has('filter')) {
+            this.found = this.filter.trim() === '' ? undefined : search(this.root, this.filter);
+            this.openAround(this.found ?? []);
+        }
+        const wanted = this.root === undefined ? undefined : this.wanted;
+        if (wanted !== undefined) {
+            this.wanted = undefined;
+            this.openAround([wanted]);
+        }
+        if (fresh ||
+            wanted !== undefined ||
+            ['active', 'defaultDepth', 'expanded', 'filter', 'opened'].some((name) => changed.has(name))) {
+            this.rows = flatten(this.root, this.opened, this.found);
+            this.cursor = cursorFor(this.rows, wanted ?? was, this.cursor, changed.has('filter'));
+        }
+        if (changed.has('filter') && this.hasUpdated) {
+            this.tell();
+        }
+    }
+    tell() {
+        if (this.found) {
+            this.status.say(countLabel(this.found.size, this.resultLabel, this.resultsLabel, this.lang));
         }
     }
     firstUpdated(changed) {
@@ -203,6 +246,19 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             this.revealing = false;
             this.reveal();
         }
+        const lost = this.hadFocus &&
+            !this.hasFocusedRow() &&
+            this.ownerDocument.activeElement === this.ownerDocument.body;
+        if (this.focusing || lost) {
+            this.focusing = false;
+            this.focusActive();
+        }
+    }
+    focusActive() {
+        const row = this.partNamed('tree')?.querySelector(`[data-index="${this.cursor}"]`);
+        if (row && this.shadowRoot?.activeElement !== row) {
+            row.focus({ preventScroll: true });
+        }
     }
     load() {
         const text = this.for === '' ? '' : (elementById(this, this.for)?.textContent ?? '');
@@ -215,7 +271,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     }
     reveal(attempts = 8) {
         const tree = this.partNamed('tree');
-        const row = tree?.querySelector(`[data-index="${this.active}"]`);
+        const row = tree?.querySelector(`[data-index="${this.cursor}"]`);
         if (row) {
             scrollItemIntoView(row);
             return;
@@ -227,10 +283,13 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             return;
         }
         const height = first.offsetHeight || HelixHeadlessObjectInspector_1.ESTIMATE;
-        const from = Number(this.active > Number(last.dataset.index) ? last.dataset.index : first.dataset.index);
-        tree.scrollTop += (this.active - from) * height;
+        const from = Number(this.cursor > Number(last.dataset.index) ? last.dataset.index : first.dataset.index);
+        tree.scrollTop += (this.cursor - from) * height;
         this.virtualize.measure();
-        void this.updateComplete.then(() => this.reveal(attempts - 1));
+        void this.updateComplete.then(() => {
+            this.reveal(attempts - 1);
+            this.focusActive();
+        });
     }
     copyable(row) {
         if (!row) {
@@ -241,32 +300,68 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         }
         return JSON.stringify(row.value, null, 2) ?? String(row.value);
     }
-    toggle(row, open = !row.open) {
-        const opened = new Set(this.opened);
-        if (open) {
-            opened.add(row.path);
+    requestOpen(paths, open) {
+        if (paths.length === 0) {
+            return false;
+        }
+        const applied = requestChange({
+            apply: () => {
+                const opened = new Set(this.opened);
+                for (const path of paths) {
+                    if (open) {
+                        opened.add(path);
+                    }
+                    else {
+                        opened.delete(path);
+                    }
+                }
+                this.opened = opened;
+            },
+            event: (next) => (next ? new HelixBeforeOpenEvent() : new HelixBeforeCloseEvent()),
+            host: this,
+            next: open,
+        });
+        if (applied) {
+            this.announceToggle(open);
         }
-        else {
-            opened.delete(row.path);
+        return applied;
+    }
+    announceToggle(open) {
+        const states = { newState: open ? 'open' : 'closed', oldState: open ? 'closed' : 'open' };
+        if (typeof ToggleEvent === 'function') {
+            this.dispatchEvent(new ToggleEvent('toggle', states));
+            return;
         }
-        this.opened = opened;
+        const event = new Event('toggle', { bubbles: false, cancelable: false, composed: false });
+        Object.assign(event, states);
+        this.dispatchEvent(event);
     }
-    move(to) {
-        const last = this.rows.length - 1;
-        this.active = Math.max(0, Math.min(to, last));
-        this.revealing = true;
+    toggle(row, open = !row.open) {
+        this.requestOpen([row.path], open);
     }
-    openSiblings(row) {
-        const parent = row.path.slice(0, row.path.lastIndexOf('/'));
-        const opened = new Set(this.opened);
-        for (const one of this.rows) {
-            if (one.branch &&
-                one.depth === row.depth &&
-                one.path.slice(0, one.path.lastIndexOf('/')) === parent) {
-                opened.add(one.path);
+    move(to) {
+        const at = Math.max(0, Math.min(to, this.rows.length - 1));
+        const path = this.rows[at]?.path;
+        if (path === undefined) {
+            return false;
+        }
+        if (at !== this.cursor) {
+            const moved = requestChange({
+                apply: () => {
+                    this.cursor = at;
+                },
+                event: (value) => new HelixBeforeActivateEvent({ value }),
+                host: this,
+                next: path,
+            });
+            if (!moved) {
+                return false;
             }
+            this.dispatchEvent(new HelixActivateEvent({ value: path }));
         }
-        this.opened = opened;
+        this.revealing = true;
+        this.focusing = true;
+        return true;
     }
     typeahead(letter) {
         const now = Date.now();
@@ -275,7 +370,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         const wanted = text.toLocaleLowerCase();
         const repeated = [...wanted].every((one) => one === wanted[0]);
         const rows = this.rows;
-        const start = wanted.length === 1 || repeated ? this.active + 1 : this.active;
+        const start = wanted.length === 1 || repeated ? this.cursor + 1 : this.cursor;
         for (let step = 0; step < rows.length; step += 1) {
             const at = (start + step) % rows.length;
             const key = rows[at]?.key?.toLocaleLowerCase();
@@ -286,8 +381,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         }
     }
     handleRowClick(index, row) {
-        this.active = index;
-        if (row.branch) {
+        if (this.move(index) && row.branch) {
             this.toggle(row);
         }
     }
@@ -324,20 +418,20 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         return html `<span part="string" dir="ltr">${String(value)}</span>`;
     }
     renderRow(row, index) {
-        const active = index === this.active;
+        const active = index === this.cursor;
         return html `<div
-      part="row${active ? ' row-active' : ''}"
-      role="treeitem"
+      part="row${active ? ' row-active' : ''}${row.match ? ' row-match' : ''}"
+      role="row"
       id=${`row-${index}`}
       data-index=${index}
+      tabindex=${active ? '0' : '-1'}
       aria-level=${row.depth + 1}
       aria-posinset=${row.position}
       aria-setsize=${row.siblings}
       aria-expanded=${row.branch ? String(row.open) : nothing}
       style=${`--object-inspector-level: ${row.depth}`}
       @click=${() => this.handleRowClick(index, row)}
-    >
-      ${row.branch
+    ><div role="gridcell" style="display: contents">${row.branch
             ? html `<svg
               part="toggle"
               ?data-mirror=${!row.open}
@@ -347,9 +441,13 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             >
               ${unsafeSVG((row.open ? caretDown : caretRight).content)}
             </svg>`
-            : nothing}${row.key === undefined ? nothing : html `<span part="key">${row.key}</span>: `}${this.renderValue(row)}
+            : nothing}${row.key === undefined ? nothing : html `<span part="key">${row.key}</span>: `}${this.renderValue(row)}</div>
     </div>`;
     }
+    hasFocusedRow() {
+        const focused = this.shadowRoot?.activeElement;
+        return focused?.getAttribute?.('role') === 'row';
+    }
     renderCopyButton(row) {
         return staticHtml `<${this.tag('copy-button')}
       part="copy"
@@ -364,30 +462,55 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     }
     render() {
         const rows = this.rows;
-        const { after, before, first, last } = this.windowed
-            ? this.virtualize.window
-            : { after: 0, before: 0, first: 0, last: rows.length };
-        const shown = rows.slice(first, last);
-        return html `${this.label ? html `<div part="header"><span part="label">${this.label}</span></div>` : nothing}
+        const { first, last } = this.windowed ? this.virtualize.window : { first: 0, last: rows.length };
+        const kept = this.windowed && (this.cursor < first || this.cursor >= last) && this.hasFocusedRow()
+            ? this.cursor
+            : undefined;
+        const { after, before } = this.windowed
+            ? this.virtualize.spacers(kept)
+            : { after: 0, before: 0 };
+        const shown = rows.slice(first, last).map((row, at) => [row, first + at]);
+        const keptRow = kept === undefined ? undefined : rows[kept];
+        if (kept !== undefined && keptRow) {
+            shown.splice(kept < first ? 0 : shown.length, 0, [keptRow, kept]);
+        }
+        return html `${this.label ? html `<div part="header"><span part="label">${this.label}</span></div>` : nothing}${this.filterable
+            ? html `<input
+            part="search-field"
+            type="search"
+            spellcheck="false"
+            .value=${this.filter}
+            placeholder=${this.filterLabel}
+            aria-label=${this.filterLabel}
+            aria-controls="tree"
+            @input=${this.handleFilterInput}
+            @keydown=${this.handleFilterKeydown}
+          />`
+            : nothing}
       <div part="frame">
         <div
           part="tree"
-          role="tree"
-          tabindex="0"
+          id="tree"
+          role="treegrid"
           ?data-scroller=${this.windowed}
           aria-label=${this.label || this.treeLabel}
-          aria-activedescendant=${rows.length > 0 ? `row-${this.active}` : nothing}
           @keydown=${this.handleKeydown}
+          @focusin=${this.handleFocusIn}
+          @focusout=${this.handleFocusOut}
           @scroll=${() => this.virtualize.measure()}
         >
           ${this.windowed ? html `<div part="before" role="presentation" style="block-size: ${before}px"></div>` : nothing}
-          ${shown.map((row, at) => this.renderRow(row, first + at))}
+          ${repeat(shown, ([row]) => row.path, ([row, at]) => this.renderRow(row, at))}
           ${this.windowed ? html `<div part="after" role="presentation" style="block-size: ${after}px"></div>` : nothing}
         </div>
-        ${this.noCopy ? nothing : this.renderCopyButton(rows[this.active])}
-      </div>`;
+        ${this.noCopy ? nothing : this.renderCopyButton(rows[this.cursor])}
+      </div>
+      ${drawStatus(this.status)}`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessObjectInspector.prototype, "active", null);
 __decorate([
     property({ attribute: 'copy-label' })
 ], HelixHeadlessObjectInspector.prototype, "copyLabel", void 0);
@@ -397,6 +520,18 @@ __decorate([
 __decorate([
     property({ attribute: 'default-depth', type: Number })
 ], HelixHeadlessObjectInspector.prototype, "defaultDepth", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessObjectInspector.prototype, "expanded", null);
+__decorate([
+    property()
+], HelixHeadlessObjectInspector.prototype, "filter", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessObjectInspector.prototype, "filterable", void 0);
+__decorate([
+    property({ attribute: 'filter-label' })
+], HelixHeadlessObjectInspector.prototype, "filterLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessObjectInspector.prototype, "for", void 0);
@@ -418,6 +553,12 @@ __decorate([
 __decorate([
     property({ attribute: 'no-copy', type: Boolean })
 ], HelixHeadlessObjectInspector.prototype, "noCopy", void 0);
+__decorate([
+    property({ attribute: 'result-label' })
+], HelixHeadlessObjectInspector.prototype, "resultLabel", void 0);
+__decorate([
+    property({ attribute: 'results-label' })
+], HelixHeadlessObjectInspector.prototype, "resultsLabel", void 0);
 __decorate([
     property({ attribute: 'tree-label' })
 ], HelixHeadlessObjectInspector.prototype, "treeLabel", void 0);
@@ -435,7 +576,7 @@ __decorate([
 ], HelixHeadlessObjectInspector.prototype, "opened", void 0);
 __decorate([
     state()
-], HelixHeadlessObjectInspector.prototype, "active", void 0);
+], HelixHeadlessObjectInspector.prototype, "cursor", void 0);
 HelixHeadlessObjectInspector = HelixHeadlessObjectInspector_1 = __decorate([
     customElement('helix-headless-object-inspector')
 ], HelixHeadlessObjectInspector);

package/dist/object-inspector/rows.d.ts

@@ -0,0 +1,75 @@
+/** One visible line of the tree: a value, where it sits, and whether it is open. */
+export interface Row {
+    branch: boolean;
+    depth: number;
+    /** The property name or array index this value is under; absent for the root. */
+    key?: string;
+    /** Whether its key or its value holds what the tree is filtered by. */
+    match: boolean;
+    open: boolean;
+    path: string;
+    position: number;
+    siblings: number;
+    value: unknown;
+}
+/** Whether a value has entries of its own, an object or an array. */
+export declare const branchy: (value: unknown) => value is object;
+/** A branch's entries, an array's under its indexes. */
+export declare const entries: (value: object) => [string, unknown][];
+/** A child's path under its parent's, escaped the way a JSON Pointer escapes one. */
+export declare const child: (path: string, key: string) => string;
+/**
+ * Every branch a path sits inside, from the root down, and not the path itself.
+ *
+ * The root's path is the empty string, so every other path has it first. A
+ * key's own `/` is escaped as `~1`, so cutting at each `/` cuts between keys.
+ */
+export declare const ancestorsOf: (path: string) => string[];
+/**
+ * The paths of every entry whose key or value holds `query`, ignoring case,
+ * across the whole value and not only the open branches.
+ *
+ * A branch is matched by its key alone: its brackets and its count are drawn,
+ * and they are not what a reader is looking for.
+ */
+export declare const search: (root: unknown, query: string) => Set<string>;
+/**
+ * Every visible row, in order, for a value with `opened` branches open.
+ *
+ * With `found`, the paths a filter matched, a branch shows only the entries
+ * that matched or lead to one, and a matched entry shows everything under it.
+ * Position and set size count the entries shown, which is the set a reader
+ * hears.
+ */
+export declare const flatten: (root: unknown, opened: Set<string>, found?: Set<string>) => Row[];
+/**
+ * Which branches are open for a value, by path.
+ *
+ * Every branch shallower than `depth` opens. A branch in `known`, the
+ * branches of the last value, keeps whether it was in `opened`, so a new value
+ * keeps the branches a reader opened or closed and only a new one takes the
+ * default. Returns the open branches and every branch, for the next value to
+ * be told apart from this one.
+ */
+export declare const seed: (root: unknown, depth: number, known?: Set<string>, opened?: Set<string>) => {
+    branches: Set<string>;
+    opened: Set<string>;
+};
+/**
+ * Where the active row goes once the rows have moved, as an index into `rows`.
+ *
+ * Onto `path` where it is still shown. Where a filter just hid it
+ * (`filtered`), onto the first match. Otherwise onto the nearest branch around
+ * it that is shown. With no path to keep, `cursor` held inside the rows.
+ */
+export declare const cursorFor: (rows: readonly Row[], path: string | undefined, cursor: number, filtered: boolean) => number;
+/**
+ * The open branches with every branch around each of `paths` opened too,
+ * where the value has that branch (`branches`).
+ */
+export declare const withAncestors: (opened: ReadonlySet<string>, branches: ReadonlySet<string>, paths: Iterable<string>) => Set<string>;
+/**
+ * The branches `*` opens from `row`: every branch at its depth under the same
+ * parent, itself included, that is not open yet.
+ */
+export declare const siblingBranches: (rows: readonly Row[], row: Row) => string[];