@fusion.dev/helix-headless 0.144.0 → 0.145.0

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

@@ -5,22 +5,23 @@ 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, HelixElement, HelixFilterEvent, HelixFilteredEvent, inlineStep, requestChange, StatusController, scrollItemIntoView, searchableById, 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 { 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 { ancestorsOf, entries, flatten, search, seed } 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,12 +29,14 @@ 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.typed = { at: 0, text: '' };
         this.branches = new Set();
@@ -41,6 +44,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             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 +56,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 +70,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);
@@ -84,14 +88,14 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                             this.toggle(row, true);
                         }
                         else if (row.open) {
-                            this.move(this.active + 1);
+                            this.move(this.cursor + 1);
                         }
                     }
                     else if (row.open) {
                         this.toggle(row, false);
                     }
                     else {
-                        const parent = rows.findLastIndex((candidate, at) => at < this.active && candidate.depth === row.depth - 1);
+                        const parent = rows.findLastIndex((candidate, at) => at < this.cursor && candidate.depth === row.depth - 1);
                         if (parent >= 0) {
                             this.move(parent);
                         }
@@ -114,80 +118,123 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             }
             event.preventDefault();
         };
+        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 (applied) {
+                this.dispatchEvent(new HelixFilteredEvent({ value: field.value }));
+            }
+            else {
+                field.value = this.filter;
+            }
+        };
+        this.handleFilterKeydown = (event) => {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.partNamed('tree')?.focus();
+            }
+        };
     }
     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;
     }
-    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 }),
-            });
-            if (open) {
-                const children = entries(value);
-                children.forEach(([name, item], at) => {
-                    visit(item, child(path, name), depth + 1, at + 1, children.length, name);
-                });
-            }
-        };
-        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;
-            }
-            branches.add(path);
-            const known = keep && this.branches.has(path);
-            if (known ? this.opened.has(path) : depth < this.defaultDepth) {
-                opened.add(path);
-            }
-            for (const [name, item] of entries(value)) {
-                visit(item, child(path, name), depth + 1);
-            }
-        };
-        visit(this.root, '', 0);
+        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) {
+        const opened = new Set(this.opened);
+        for (const path of paths) {
+            for (const above of ancestorsOf(path)) {
+                if (this.branches.has(above)) {
+                    opened.add(above);
+                }
+            }
+        }
+        this.opened = opened;
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         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 = this.place(wanted ?? was, changed.has('filter'));
+        }
+        if (changed.has('filter') && this.hasUpdated) {
+            this.tell();
+        }
+    }
+    place(path, filtered) {
+        const rows = this.rows;
+        const at = (one) => rows.findIndex((row) => row.path === one);
+        const own = path === undefined ? -1 : at(path);
+        if (own >= 0 || path === undefined) {
+            return own >= 0 ? own : Math.min(this.cursor, Math.max(0, rows.length - 1));
+        }
+        const match = filtered ? rows.findIndex((row) => row.match) : -1;
+        const around = ancestorsOf(path)
+            .reverse()
+            .map(at)
+            .find((one) => one >= 0);
+        return match >= 0 ? match : (around ?? 0);
+    }
+    tell() {
+        if (this.found) {
+            this.status.say(countLabel(this.found.size, this.resultLabel, this.resultsLabel, this.lang));
         }
     }
     firstUpdated(changed) {
@@ -215,7 +262,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,8 +274,8 @@ 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));
     }
@@ -252,9 +299,27 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.opened = opened;
     }
     move(to) {
-        const last = this.rows.length - 1;
-        this.active = Math.max(0, Math.min(to, last));
+        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.revealing = true;
+        return true;
     }
     openSiblings(row) {
         const parent = row.path.slice(0, row.path.lastIndexOf('/'));
@@ -275,7 +340,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 +351,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,14 +388,15 @@ 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' : ''}"
+      part="row${active ? ' row-active' : ''}${row.match ? ' row-match' : ''}"
       role="treeitem"
       id=${`row-${index}`}
       data-index=${index}
       aria-level=${row.depth + 1}
       aria-posinset=${row.position}
+      aria-selected="false"
       aria-setsize=${row.siblings}
       aria-expanded=${row.branch ? String(row.open) : nothing}
       style=${`--object-inspector-level: ${row.depth}`}
@@ -368,15 +433,28 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             ? 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}
+        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"
+          id="tree"
           role="tree"
           tabindex="0"
           ?data-scroller=${this.windowed}
           aria-label=${this.label || this.treeLabel}
-          aria-activedescendant=${rows.length > 0 ? `row-${this.active}` : nothing}
+          aria-activedescendant=${rows.length > 0 ? `row-${this.cursor}` : nothing}
           @keydown=${this.handleKeydown}
           @scroll=${() => this.virtualize.measure()}
         >
@@ -384,10 +462,14 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
           ${shown.map((row, at) => this.renderRow(row, first + 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 +479,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 +512,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 +535,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,57 @@
+/** 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>;
+};

package/dist/object-inspector/rows.js

@@ -0,0 +1,86 @@
+export const branchy = (value) => value !== null && typeof value === 'object';
+export const entries = (value) => Array.isArray(value) ? value.map((item, at) => [String(at), item]) : Object.entries(value);
+export const child = (path, key) => `${path}/${key.replaceAll('~', '~0').replaceAll('/', '~1')}`;
+export const ancestorsOf = (path) => {
+    const cuts = [];
+    for (let at = path.indexOf('/'); at !== -1; at = path.indexOf('/', at + 1)) {
+        cuts.push(path.slice(0, at));
+    }
+    return cuts;
+};
+const words = (value) => (branchy(value) ? '' : String(value));
+export const search = (root, query) => {
+    const found = new Set();
+    const wanted = query.trim().toLocaleLowerCase();
+    if (wanted === '' || root === undefined) {
+        return found;
+    }
+    const visit = (value, path, key) => {
+        if (key?.toLocaleLowerCase().includes(wanted) ||
+            words(value).toLocaleLowerCase().includes(wanted)) {
+            found.add(path);
+        }
+        if (branchy(value)) {
+            for (const [name, item] of entries(value)) {
+                visit(item, child(path, name), name);
+            }
+        }
+    };
+    visit(root, '');
+    return found;
+};
+export const flatten = (root, opened, found) => {
+    const rows = [];
+    if (root === undefined) {
+        return rows;
+    }
+    const trail = new Set([...(found ?? [])].flatMap(ancestorsOf));
+    const visit = (value, path, depth, position, siblings, under, key) => {
+        const branch = branchy(value);
+        const open = branch && opened.has(path);
+        const match = found?.has(path) === true;
+        rows.push({
+            branch,
+            depth,
+            match,
+            open,
+            path,
+            position,
+            siblings,
+            value,
+            ...(key === undefined ? {} : { key }),
+        });
+        if (!open) {
+            return;
+        }
+        const inside = under || match || !found;
+        const children = entries(value)
+            .map(([name, item]) => [name, item, child(path, name)])
+            .filter(([, , at]) => inside || found?.has(at) || trail.has(at));
+        children.forEach(([name, item, at], index) => {
+            visit(item, at, depth + 1, index + 1, children.length, inside && !!found, name);
+        });
+    };
+    if (!found || found.has('') || trail.has('')) {
+        visit(root, '', 0, 1, 1, false);
+    }
+    return rows;
+};
+export const seed = (root, depth, known = new Set(), opened = new Set()) => {
+    const open = new Set();
+    const branches = new Set();
+    const visit = (value, path, level) => {
+        if (!branchy(value)) {
+            return;
+        }
+        branches.add(path);
+        if (known.has(path) ? opened.has(path) : level < depth) {
+            open.add(path);
+        }
+        for (const [name, item] of entries(value)) {
+            visit(item, child(path, name), level + 1);
+        }
+    };
+    visit(root, '', 0);
+    return { branches, opened: open };
+};

package/dist/outline/levels.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The levels of a flat run of links, as the nested lists they describe.
+ *
+ * A contents list written flat, `<a data-level="2">`, says its depth in an
+ * attribute that only a stylesheet reads. The outline turns the run into lists
+ * inside list items in its shadow root, so a screen reader hears the levels a
+ * nested `<ul>` would have given it, with the links left where they are.
+ */
+/** One link in the tree: its place in the run, and the links nested under it. */
+export interface Branch {
+    /** The link's position in the flat run, counted from zero. */
+    index: number;
+    /** The links one level or more deeper that follow it, before the next at its level. */
+    children: Branch[];
+}
+/**
+ * The level a link's `data-level` asks for, a whole number from 1.
+ *
+ * Absent, empty, or not a number is the top level, which is how the outline
+ * has always read a link without one.
+ */
+export declare const levelOf: (value: string | null) => number;
+/**
+ * Nests a run of levels.
+ *
+ * Each link goes under the nearest link before it with a lower level, and to
+ * the top where there is none. A jump of two levels nests one list deeper and
+ * not two, since a list item with no link of its own would be read as an empty
+ * entry. A run that starts deeper than 1 starts at the top all the same.
+ */
+export declare const nest: (levels: readonly number[]) => Branch[];

package/dist/outline/levels.js

@@ -0,0 +1,23 @@
+export const levelOf = (value) => {
+    const level = Number.parseInt(value ?? '', 10);
+    return Number.isFinite(level) && level >= 1 ? level : 1;
+};
+export const nest = (levels) => {
+    const top = [];
+    const open = [];
+    levels.forEach((level, index) => {
+        const branch = { children: [], index };
+        while (open.length > 0 && (open.at(-1)?.level ?? 0) >= level) {
+            open.pop();
+        }
+        const parent = open.at(-1);
+        if (parent) {
+            parent.branch.children.push(branch);
+        }
+        else {
+            top.push(branch);
+        }
+        open.push({ branch, level });
+    });
+    return top;
+};