@fluixi/devtools 0.2.0-alpha.2 → 0.2.0-alpha.4

package/dist/tree.d.ts.map

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

package/dist/tree.js

@@ -0,0 +1,645 @@
+import { pluginBadge, pluginElementBadge } from './plugin.js';
+import { kindRules } from './palette.js';
+import { shorten } from './format.js';
+/** Kinds that are tags in the source, and so have a place in a tree of them. */
+export const TREE_KINDS = new Set([
+    'component',
+    'control',
+    'router',
+    'handler',
+    // A component a plugin recognised as providing a context. Still a tag the author wrote,
+    // so leaving it out took it and everything it rendered out of the tree.
+    'provider',
+]);
+/**
+ * Put the tags that rendered back into page order, leaving everything else untouched.
+ *
+ * Sorting by id alone reads as creation order, which is wrong for a keyed list: rebuilding a
+ * row hands the replacement the highest id, so the row you edited jumped to the bottom.
+ *
+ * Only the slots those tags already occupy are reshuffled. Sorting the whole list by `order`
+ * instead sent every value to the end of its band, so editing a todo moved the `left` memo
+ * as well, which had nothing to do with the change.
+ */
+export function inPageOrder(nodes) {
+    const slots = [];
+    const placed = [];
+    nodes.forEach((node, at) => {
+        if (node.order !== undefined) {
+            slots.push(at);
+            placed.push(node);
+        }
+    });
+    if (placed.length < 2)
+        return nodes;
+    placed.sort((a, b) => a.order - b.order);
+    const out = nodes.slice();
+    slots.forEach((slot, i) => (out[slot] = placed[i]));
+    return out;
+}
+/** Cached per call: a plugin's badge is computed from the node and asked for twice. */
+const badges = new WeakMap();
+function badgeOf(node) {
+    if (!badges.has(node))
+        badges.set(node, pluginBadge(node));
+    return badges.get(node);
+}
+export function componentTree(graph, options = {}) {
+    const wanted = (node) => TREE_KINDS.has(node.kind) || (options.values === true && node.authored !== false);
+    const tagged = inPageOrder([...graph.values()].filter(wanted).sort((a, b) => a.id - b.id));
+    const made = new Map();
+    for (const node of tagged) {
+        made.set(node.id, {
+            id: node.id,
+            label: node.label,
+            kind: node.kind,
+            children: [],
+            ...(TREE_KINDS.has(node.kind) ? {} : { value: true }),
+            ...(node.lazy ? { lazy: true } : {}),
+            ...(badgeOf(node) ? { badge: badgeOf(node) } : {}),
+        });
+    }
+    /** The nearest ancestor that is a tag, following what created what. */
+    const owner = (node) => {
+        const seen = new Set([node.id]);
+        let at = node.createdIn;
+        while (at !== undefined && !seen.has(at)) {
+            seen.add(at);
+            const found = made.get(at);
+            if (found)
+                return found;
+            at = graph.get(at)?.createdIn;
+        }
+        return undefined;
+    };
+    const roots = [];
+    for (const node of tagged) {
+        const parent = owner(node);
+        if (parent)
+            parent.children.push(made.get(node.id));
+        else
+            roots.push(made.get(node.id));
+    }
+    const term = options.filter?.trim().toLowerCase();
+    return term ? keep(roots, term) : roots;
+}
+/** The nodes naming `term`, each still under whatever held it. */
+function keep(nodes, term) {
+    const out = [];
+    for (const node of nodes) {
+        const children = keep(node.children, term);
+        const hit = node.label.toLowerCase().includes(term);
+        if (hit || children.length)
+            out.push({ ...node, children: hit ? node.children : children });
+    }
+    return out;
+}
+/** Every id in the tree, for a caller that wants to open or shut all of it. */
+export function idsIn(nodes) {
+    const out = [];
+    const walk = (list) => {
+        for (const node of list) {
+            out.push(node.id);
+            walk(node.children);
+        }
+    };
+    walk(nodes);
+    return out;
+}
+const escape = (text) => text.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+export function createComponentTree(host, options = {}) {
+    const empty = options.empty ?? 'nothing rendered yet';
+    /** Shut by the reader. Everything else is open, so a new subtree arrives visible. */
+    const shut = new Set();
+    let signature = '';
+    /** Prop groups already given their starting fold, so reopening one is not undone. */
+    const defaulted = new Set();
+    let marked = null;
+    /** Element rows have no id, so what is selected is tracked by row key. */
+    let markedKey = null;
+    let values = options.values === true;
+    let filter = '';
+    const doc = host.ownerDocument;
+    // In the pane rather than the toolbar: it belongs to the tree, and three hosts would
+    // otherwise each need a button of their own for it.
+    const bar = doc.createElement('label');
+    bar.className = 'fx-tree-bar';
+    const box = doc.createElement('input');
+    box.type = 'checkbox';
+    box.checked = values;
+    bar.append(box, doc.createTextNode('values'));
+    bar.title = 'List the signals and memos each tag declares';
+    const search = doc.createElement('input');
+    search.type = 'search';
+    search.className = 'fx-tree-search';
+    search.placeholder = 'filter by name';
+    search.addEventListener('input', () => {
+        filter = search.value;
+        signature = '';
+    });
+    const list = doc.createElement('div');
+    list.className = 'fx-tree-list';
+    host.replaceChildren(bar, search, list);
+    /** What was last drawn, so a control can redraw without waiting for the app to move. */
+    let last = null;
+    box.addEventListener('change', () => {
+        values = box.checked;
+        signature = '';
+        // Clearing the signature only marks it stale. On an idle page nothing calls render
+        // again, so ticking the box appeared to do nothing at all until something else changed.
+        if (last)
+            api.render(last.graph, last.selected);
+    });
+    const row = (node, depth) => {
+        const has = node.children.length > 0;
+        const open = has && !shut.has(node.key);
+        const twist = has ? (open ? '▾' : '▸') : node.prop ? '' : '·';
+        const tag = node.props
+            ? `<span class="fx-tree-props-label">props</span><span class="fx-tree-props-count">${node.children.length}</span>`
+            : node.prop
+                ? `<span class="fx-tree-prop-name">${escape(node.prop.name)}</span>${node.prop.value === undefined
+                    ? ''
+                    : `<span class="fx-tree-prop-value">${escape(shorten(node.prop.value, 44))}</span>`}`
+                : node.value
+                    ? escape(node.label)
+                    : has
+                        ? `&lt;${escape(node.label)}&gt;`
+                        : `&lt;${escape(node.label)} /&gt;`;
+        const count = has && !open && !node.props ? `<span class="fx-tree-count">${node.children.length}</span>` : '';
+        // Says the chunk it came from was fetched separately, which is why it appeared late.
+        const chunk = node.lazy ? '<span class="fx-tree-lazy" title="loaded as its own chunk">lazy</span>' : '';
+        const mark = node.badge
+            ? `<span class="fx-tree-plugin" title="${escape(node.badge)}">${escape(node.badge)}</span>`
+            : '';
+        return (`<div class="fx-tree-row n-${node.kind}${node.value ? ' is-value' : ''}${node.prop ? ' is-prop' : ''}${node.props ? ' is-props' : ''}"` +
+            ` data-key="${escape(node.key)}"${node.id !== undefined ? ` data-id="${node.id}"` : ''}` +
+            ` style="--depth:${depth}">` +
+            `<button type="button" class="fx-tree-twist" data-twist="${escape(node.key)}"${has ? '' : ' tabindex="-1"'}>${twist}</button>` +
+            `<span class="fx-tree-tag"${node.prop?.value ? ` title="${escape(node.prop.name)}=${escape(node.prop.value)}"` : ''}>${tag}</span>${mark}${chunk}${count}` +
+            `</div>` +
+            (open ? node.children.map((child) => row(child, depth + 1)).join('') : ''));
+    };
+    /** The element a row stands for, out of what was drawn for it. */
+    const pickOf = (rowEl) => {
+        const found = shown.get(rowEl.dataset.key ?? '');
+        if (!found || found.kind !== 'element')
+            return undefined;
+        return {
+            key: found.key,
+            label: found.label,
+            ...(found.owner !== undefined ? { owner: found.owner } : {}),
+            ...(found.writes?.length ? { writes: found.writes } : {}),
+            ...(found.at ? { at: found.at } : {}),
+            ...(found.extra ? { extra: found.extra } : {}),
+            ...(found.element ? { element: found.element } : {}),
+        };
+    };
+    const onClick = (event) => {
+        const target = event.target;
+        const twist = target?.closest?.('[data-twist]');
+        if (twist) {
+            const key = twist.dataset.twist ?? '';
+            if (shut.has(key))
+                shut.delete(key);
+            else
+                shut.add(key);
+            signature = '';
+            event.stopPropagation();
+            return;
+        }
+        const rowEl = target?.closest?.('.fx-tree-row');
+        if (!rowEl)
+            return;
+        if (rowEl.dataset.id) {
+            markedKey = null;
+            options.onSelect?.(Number(rowEl.dataset.id));
+            return;
+        }
+        // A prop is not a node of its own, so selecting it selects the tag it was written on,
+        // which is where its value came from and what the inspector has something to say about.
+        const held = shown.get(rowEl.dataset.key ?? '');
+        if (held?.props) {
+            if (shut.has(held.key))
+                shut.delete(held.key);
+            else
+                shut.add(held.key);
+            signature = '';
+            if (last)
+                api.render(last.graph, last.selected);
+            return;
+        }
+        if (held?.prop) {
+            if (held.owner === undefined)
+                return;
+            markedKey = held.key;
+            paint();
+            options.onSelect?.(held.owner);
+            return;
+        }
+        const pick = pickOf(rowEl);
+        if (!pick)
+            return;
+        markedKey = pick.key;
+        paint();
+        options.onPick?.(pick);
+    };
+    const onDouble = (event) => {
+        const rowEl = event.target?.closest?.('.fx-tree-row');
+        if (!rowEl)
+            return;
+        if (rowEl.dataset.id) {
+            options.onReveal?.(Number(rowEl.dataset.id));
+            return;
+        }
+        const pick = pickOf(rowEl);
+        if (pick)
+            options.onRevealPick?.(pick);
+    };
+    /** Rows by key, so a pointer over one can be answered without searching the tree again. */
+    let shown = new Map();
+    const onOver = (event) => {
+        const rowEl = event.target?.closest?.('.fx-tree-row');
+        const found = rowEl ? shown.get(rowEl.dataset.key ?? '') : undefined;
+        if (!found) {
+            options.onHover?.(null);
+            return;
+        }
+        // The key doubles as a path to the element, for a host that has to ask the page to
+        // highlight rather than doing it itself.
+        options.onHover?.(found.id ?? null, found.element, found.id === undefined ? found.key : undefined);
+    };
+    const onOut = () => options.onHover?.(null);
+    host.addEventListener('click', onClick);
+    host.addEventListener('dblclick', onDouble);
+    if (options.onHover) {
+        host.addEventListener('pointermove', onOver);
+        host.addEventListener('pointerleave', onOut);
+    }
+    const paint = () => {
+        for (const el of list.querySelectorAll('.fx-tree-row')) {
+            const row = el;
+            const id = row.dataset.id;
+            const on = id !== undefined ? Number(id) === marked : row.dataset.key === markedKey;
+            el.classList.toggle('on', on);
+        }
+    };
+    /**
+     * Build the rows, weaving each tag's DOM into the graph tree.
+     *
+     * A row goes where its element is rather than where the graph made it. A child component
+     * sits inside its parent's DOM, so its row goes there; a value goes inside the element it
+     * writes into. The second matters for a store declared at module scope, which belongs to
+     * no component but still renders somewhere.
+     */
+    function rowsFor(nodes, graph) {
+        const byId = new Map();
+        const build = (node) => {
+            // What the tag was handed, ahead of what it produced. A prop is the other half of the
+            // story a tag tells: `<For each={todos()}>` says as much through `each` as through the
+            // rows it went on to render, and every component takes them.
+            const written = values ? (graph.get(node.id)?.props ?? []) : [];
+            const listed = written.map((p, i) => ({
+                key: `${node.id}=${i}`,
+                label: p.name,
+                kind: node.kind,
+                children: [],
+                prop: { name: p.name, ...(p.value === undefined ? {} : { value: p.value }) },
+                owner: node.id,
+                ...(p.at?.line === undefined
+                    ? {}
+                    : { at: { file: p.at.file ?? '', line: p.at.line, column: p.at.column ?? 0 } }),
+            }));
+            // One folded row rather than a prop per line. A tag with six of them otherwise buries
+            // what it rendered, which is the thing the tree is for.
+            const group = `${node.id}=props`;
+            // Shut the first time it is met, and whatever the reader does with it after that sticks.
+            if (listed.length && !defaulted.has(group)) {
+                defaulted.add(group);
+                shut.add(group);
+            }
+            const props = listed.length
+                ? [{ key: group, label: 'props', kind: node.kind, children: listed, props: true, owner: node.id }]
+                : [];
+            const row = {
+                key: String(node.id),
+                label: node.label,
+                kind: node.kind,
+                id: node.id,
+                children: [...props, ...node.children.map(build)],
+                ...(node.value ? { value: true } : {}),
+                ...(node.lazy ? { lazy: true } : {}),
+                ...(node.badge ? { badge: node.badge } : {}),
+            };
+            byId.set(node.id, row);
+            return row;
+        };
+        const roots = nodes.map(build);
+        const domFor = options.domFor;
+        if (!domFor)
+            return roots;
+        const placed = new Set();
+        /**
+         * Rows already written into the tree. A tag is reachable two ways, down the component
+         * nesting and through the element it rendered, and `expand` rewrites the row it is
+         * given, so without this the second arrival appends its dom all over again.
+         */
+        const done = new Set();
+        /**
+         * How many places in the dom name each tag.
+         *
+         * A graph read from source has one node per component *declaration*, so two `<Badge/>`
+         * both point at it. Drawing only the first would take the second out of the tree, but
+         * a running graph gives each use its own node, where a tag named twice really is one
+         * subtree reached two ways and the second must go. Counting tells them apart.
+         */
+        const uses = new Map();
+        const tally = (nodes) => {
+            for (const node of nodes) {
+                if (node.owner !== undefined)
+                    uses.set(node.owner, (uses.get(node.owner) ?? 0) + 1);
+                tally(node.children);
+            }
+        };
+        for (const row of byId.values())
+            if (row.id !== undefined)
+                tally(domFor(row.id));
+        /**
+         * The innermost tag row that reads `id`, if one is in this tree.
+         *
+         * The node doing the reading is often machinery the tree never draws: `For` does not read
+         * its list, `mapArray` does, and that is hidden. So climb from whatever reads it to the
+         * nearest tag that is drawn, which is the `For`.
+         *
+         * Deepest wins, so a value read by a component inside a `For` belongs to the component.
+         * `skip` keeps the tag that declared it from adopting it back.
+         */
+        const readerOf = (id, skip) => {
+            const drawn = (from) => {
+                const seen = new Set();
+                let at = from;
+                while (at !== undefined && !seen.has(at)) {
+                    seen.add(at);
+                    const row = byId.get(at);
+                    if (row && !row.value && row !== skip)
+                        return row;
+                    at = graph.get(at)?.createdIn;
+                }
+                return undefined;
+            };
+            let best;
+            let deepest = -1;
+            for (const [nodeId, node] of graph) {
+                if (nodeId === id || !node.deps.has(id))
+                    continue;
+                const row = drawn(nodeId);
+                if (!row || row.id === undefined)
+                    continue;
+                const depth = graph.get(row.id)?.depth ?? 0;
+                if (depth >= deepest) {
+                    deepest = depth;
+                    best = row;
+                }
+            }
+            return best;
+        };
+        /** The same row again at another place, re-keyed so the two fold independently. */
+        const again = (row, key) => ({
+            ...row,
+            key,
+            children: row.children.map((child, i) => again(child, `${key}/${i}`)),
+        });
+        const expand = (row) => {
+            if (row.value || row.id === undefined)
+                return row;
+            if (done.has(row))
+                return row;
+            done.add(row);
+            const dom = domFor(row.id);
+            if (!dom.length) {
+                row.children = row.children.map(expand);
+                return row;
+            }
+            const walk = (node, key) => {
+                const owner = node.owner === undefined ? undefined : byId.get(node.owner);
+                if (owner && owner !== row) {
+                    if (done.has(owner)) {
+                        // Named from one place only, so it is already showing where it belongs and
+                        // drawing it here as well would be the same subtree twice.
+                        const count = uses.get(node.owner) ?? 0;
+                        return count > 1 ? again(owner, key) : undefined;
+                    }
+                    placed.add(owner);
+                    return expand(owner);
+                }
+                const kids = [];
+                // Values first. They are the reason this element changes.
+                for (const id of node.writes ?? []) {
+                    const value = byId.get(id);
+                    if (!value?.value || placed.has(value))
+                        continue;
+                    placed.add(value);
+                    kids.push(value);
+                }
+                // Then tags that render in here without an element of their own, so they read as
+                // being inside it rather than next to it.
+                for (const id of node.inside ?? []) {
+                    const tag = byId.get(id);
+                    if (!tag || tag === row || placed.has(tag) || done.has(tag))
+                        continue;
+                    placed.add(tag);
+                    kids.push(expand(tag));
+                }
+                node.children.forEach((child, i) => {
+                    const kid = walk(child, `${key}/${i}`);
+                    if (kid)
+                        kids.push(kid);
+                });
+                return {
+                    key,
+                    label: node.label,
+                    kind: 'element',
+                    children: kids,
+                    owner: row.id,
+                    ...(node.writes?.length ? { writes: node.writes } : {}),
+                    ...(node.at ? { at: node.at } : {}),
+                    ...(node.extra ? { extra: node.extra } : {}),
+                    ...(pluginElementBadge(node.extra) ? { badge: pluginElementBadge(node.extra) } : {}),
+                    ...(node.element ? { element: node.element } : {}),
+                };
+            };
+            // The mount container was on the page before anything rendered, so the tag goes inside
+            // it rather than the other way round.
+            const mount = dom.findIndex((node) => node.container);
+            if (mount !== -1) {
+                const node = dom[mount];
+                row.children = row.children.map(expand);
+                return {
+                    key: `${row.id}:${mount}`,
+                    label: node.label,
+                    kind: 'element',
+                    children: [row],
+                    owner: row.id,
+                    ...(node.at ? { at: node.at } : {}),
+                    ...(node.element ? { element: node.element } : {}),
+                };
+            }
+            const rendered = dom
+                .map((node, i) => walk(node, `${row.id}:${i}`))
+                .filter((node) => node !== undefined);
+            // Anything the dom did not account for: a portal, or a value read across a tag
+            // boundary rather than written into an element here.
+            //
+            // Above the markup, not below it. A signal a nested tag consumes writes nowhere this
+            // description reaches, so it never nests beside an element, and appending it left
+            // `todos` alone at the bottom of `App` well away from the `For` that reads it.
+            const rest = row.children.filter((child) => !placed.has(child)).map(expand);
+            // A value the dom cannot place goes under the tag that reads it.
+            //
+            // `draft` nests under the `<input>` it writes into, because the description names the
+            // values writing to each element. `todos` writes into no element here: `For` reads it
+            // and renders the rows itself, so it had nowhere to go and sat loose under `App`. The
+            // tag that depends on it is the honest place, and it reads the same way as `draft`.
+            const lifted = [];
+            const spare = [];
+            /** Collected per reader so several values keep their order when they go in. */
+            const adopt = new Map();
+            for (const child of rest) {
+                const reader = child.value && child.id !== undefined ? readerOf(child.id, row) : undefined;
+                if (reader) {
+                    const held = adopt.get(reader);
+                    if (held)
+                        held.push(child);
+                    else
+                        adopt.set(reader, [child]);
+                    placed.add(child);
+                    continue;
+                }
+                (child.value || child.prop || child.props ? lifted : spare).push(child);
+            }
+            // Ahead of what the tag rendered. A value reads as what the tag was given, so it
+            // belongs above the rows it produced rather than after them.
+            for (const [reader, values] of adopt)
+                reader.children.unshift(...values);
+            // Whatever is left: what the tag was given first, then a portal, which renders
+            // elsewhere and still reads as part of the markup.
+            row.children = [...lifted, ...rendered, ...spare];
+            return row;
+        };
+        // Mapped, not just visited: expanding a root can return a different row, because the
+        // container it was mounted into ends up above it.
+        const top = roots.map((root) => (placed.has(root) ? root : expand(root)));
+        return top.filter((_, i) => !placed.has(roots[i]));
+    }
+    const api = {
+        render(graph, selected = null) {
+            last = { graph, selected };
+            const roots = rowsFor(componentTree(graph, { values, filter }), graph);
+            // Rebuilt only when the shape changes: this runs every frame, and replacing the markup
+            // each time would drop whatever the reader was about to click.
+            const next = `${values}|${filter}|${[...shut].sort().join(',')}|${roots.map(function label(n) {
+                return `${n.key}:${n.label}:${n.children.map(label).join('+')}`;
+            }).join(',')}`;
+            if (next !== signature) {
+                signature = next;
+                shown = new Map();
+                const index = (list) => {
+                    for (const node of list) {
+                        shown.set(node.key, node);
+                        index(node.children);
+                    }
+                };
+                index(roots);
+                list.innerHTML = roots.length
+                    ? roots.map((node) => row(node, 0)).join('')
+                    : `<span class="fx-tree-empty">${escape(filter ? `nothing named ${filter}` : empty)}</span>`;
+            }
+            if (selected !== marked) {
+                marked = selected;
+                paint();
+            }
+        },
+        clear() {
+            signature = '';
+            marked = null;
+            shut.clear();
+            list.innerHTML = `<span class="fx-tree-empty">${escape(empty)}</span>`;
+        },
+        destroy() {
+            host.removeEventListener('click', onClick);
+            host.removeEventListener('dblclick', onDouble);
+            host.removeEventListener('pointermove', onOver);
+            host.removeEventListener('pointerleave', onOut);
+            host.innerHTML = '';
+        },
+    };
+    return api;
+}
+export const TREE_CSS = `
+.fx-tree-row {
+  display: flex; align-items: center; gap: 4px;
+  padding: 1px 6px 1px calc(6px + var(--depth, 0) * 12px);
+  font-family: ui-monospace, monospace; font-size: 11.5px;
+  color: var(--fx-label, #e7e9ee); cursor: pointer; white-space: nowrap;
+}
+.fx-tree-row:hover { background: var(--fx-hover, #1b1e26); }
+.fx-tree-row.on { background: var(--fx-sel, #232838); }
+.fx-tree-twist {
+  width: 12px; padding: 0; border: 0; background: none; cursor: pointer;
+  color: var(--fx-muted, #8a90a2); font-size: 9px; line-height: 1;
+}
+.fx-tree-plugin {
+  font-size: 9px; color: var(--fx-accent, #5eead4);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px; padding: 0 4px;
+  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.fx-tree-lazy {
+  font-size: 9px; letter-spacing: .04em; color: var(--fx-router, #7dd3fc);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px; padding: 0 4px;
+}
+.fx-tree-count {
+  font-size: 9.5px; color: var(--fx-muted, #8a90a2);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px; padding: 0 4px;
+}
+${kindRules((k) => `.fx-tree-row.n-${k} .fx-tree-tag`, 'color')}
+.fx-tree-bar {
+  display: flex; align-items: center; gap: 5px; padding: 2px 8px 5px;
+  font-size: 10.5px; color: var(--fx-muted, #8a90a2); cursor: pointer; user-select: none;
+}
+.fx-tree-bar:hover { color: var(--fx-label, #e7e9ee); }
+.fx-tree-bar input { width: 11px; height: 11px; margin: 0; accent-color: var(--fx-accent, #5eead4); }
+.fx-tree-row.n-element:hover .fx-tree-tag { color: var(--fx-label, #e7e9ee); }
+/* A declared value is listed inside the tag that made it, so it reads quieter than a tag. */
+.fx-tree-row.is-value .fx-tree-tag { font-style: italic; opacity: .85; }
+.fx-tree-search {
+  width: calc(100% - 16px); margin: 0 8px 4px; padding: 2px 6px;
+  font: inherit; font-size: 10.5px;
+  color: var(--fx-label, #e7e9ee); background: var(--fx-bg, #0f1115);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 4px;
+}
+.fx-tree-search:focus { outline: none; border-color: var(--fx-accent, #5eead4); }
+.fx-tree-empty { display: block; padding: 8px; font-size: 11px; color: var(--fx-muted, #8a90a2); }
+/* A prop reads as what was written on the tag, so it is quieter than the tag itself. */
+/* The row that folds a tag's props away. Dashed, because it stands for something written
+   rather than something rendered. */
+.fx-tree-row.is-props .fx-tree-tag {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 0 5px; border: 1px dashed var(--fx-line, #262a35); border-radius: 3px;
+  color: var(--fx-muted, #8a90a2); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
+}
+.fx-tree-row.is-props:hover .fx-tree-tag { border-color: var(--fx-accent, #5eead4); color: var(--fx-label, #e7e9ee); }
+.fx-tree-props-count { opacity: .7; }
+
+/* A prop is what was written on the tag above it, so it reads as an aside: the name in a
+   quiet chip, the value beside it, and no marker pretending it opens. */
+.fx-tree-row.is-prop .fx-tree-tag { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
+.fx-tree-prop-name {
+  flex: none; padding: 0 4px; border-radius: 3px;
+  background: var(--fx-chip, rgba(138, 144, 162, .14));
+  color: var(--fx-muted, #8a90a2); font-size: 10px; letter-spacing: .02em;
+}
+.fx-tree-row.is-prop:hover .fx-tree-prop-name { color: var(--fx-label, #e7e9ee); }
+.fx-tree-prop-value {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--fx-label, #e7e9ee); opacity: .75;
+}
+`;