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

package/dist/instrument.d.ts

@@ -1,9 +1,56 @@
-export type NodeKind = 'state' | 'memo' | 'effect' | 'store' | 'resource';
+import { Immutable, StoreSetter } from '@fluixi/reactive/store';
+import { type ReactiveSourceLocation } from './source.js';
+import type { DomNode } from './dom.js';
+export type NodeKind = 'state' | 'memo' | 'effect' | 'store' | 'resource' | 'component'
+/** Control flow the framework supplies: `Show`, `For`, `Switch`, `Suspense`, `Await`. */
+ | 'control'
+/** The router's own tags: `Router`, `Outlet`, `Link`, `Redirect`. */
+ | 'router'
+/** A server route handler: `GET`, `POST` in an api file. */
+ | 'handler'
+/** Not a node: a card a view draws to stand for several of them. */
+ | 'group'
+/** Not a node: a place in the document a signal writes to. */
+ | 'binding'
+/** A directive applied to an element: `use:`, `class:`, `bind:`. */
+ | 'directive'
+/** A context, and the components that provide or read it. */
+ | 'context'
+/** A component whose job is providing a context. */
+ | 'provider'
+/** Not a node: a place in the code that sets a signal. */
+ | 'setter';
 export type NodeState = 'clean' | 'check' | 'dirty';
+/**
+ * The names the compiler supplies without an import, and what each one is. A control-flow
+ * tag stamps its name the same way an author's component does, so without this `Match` and
+ * `Switch` are drawn as components the author wrote.
+ *
+ * Mirrors `resolve/builtins.ts` in @fluixi/compiler. Not imported from there: this package
+ * runs beside the application, and the compiler is not on that side of the wall.
+ */
+export declare const KIND_OF_BUILTIN: Record<string, NodeKind>;
+/** One place in the document that a signal drives. */
+export interface DomTarget {
+    /** `content` for a text or element hole, `attribute` or `property` otherwise. */
+    kind: string;
+    /** The attribute or property name, when there is one. */
+    name?: string;
+    /** The element, as a selector-ish description: `li.done`, `#total`. */
+    element: string;
+    /** The line of the application that wired this binding up. */
+    source?: ReactiveSourceLocation;
+}
 export interface RNode {
     id: number;
     label: string;
     kind: NodeKind;
+    /**
+     * Whether the label is the author's own, from a compiler mark. False for a positional
+     * label and for one the runtime supplied, which between them are the framework's own
+     * machinery, which is what a view offers to keep behind one card.
+     */
+    authored?: boolean;
     /** Source ids read on the last run (read edges: source → this). */
     deps: Set<number>;
     /** Signal ids written while this node ran (write edges: this → signal). */
@@ -12,19 +59,88 @@ export interface RNode {
     read?: () => unknown;
     /** Last serialized value, for change detection / display. */
     value?: string;
+    /** The same value with room to read it, for a tooltip or an inspector. */
+    detail?: string;
     /** Times this node recomputed / re-ran. */
     runs: number;
-    /** performance.now() of the last change — drives the flash. */
+    /** performance.now() of the last change. Drives the flash. */
     lastPulse: number;
-    /** Live core node, when reachable — gives the real version + state. */
+    /** Live core node, when reachable. Gives the real version and state. */
     core?: {
         version?: number;
         state?: number;
     } | null;
+    /** Where the author created this node, when the compiler said so. Always optional. */
+    source?: ReactiveSourceLocation;
+    /**
+     * The node whose run created this one. A component's memo reads nothing of its own, so
+     * what it created is what connects it to the rest of the graph.
+     */
+    createdIn?: number;
+    /**
+     * Components only: where the component itself was declared, which is a different place
+     * from where it was used and the node made.
+     */
+    declaredAt?: ReactiveSourceLocation;
+    /**
+     * The line of the application that led to this node, for one the compiler did not mark:
+     * a signal a package created on the caller's behalf.
+     */
+    usedAt?: ReactiveSourceLocation;
+    /**
+     * How many dom bindings read this node. They are not drawn, since one per attribute and
+     * text hole would bury the graph, but a signal read only by them is still read.
+     */
+    bindings?: number;
+    /**
+     * What those bindings write: the text of an `<li>`, the `class` of a `<div>`. Described,
+     * never referenced: holding dom nodes would keep a removed subtree alive.
+     */
+    targets?: DomTarget[];
+    /**
+     * Set from outside any computation, by a handler or a timer. The graph has no node to draw an
+     * edge from for these, so this is the only record of where they came from.
+     */
+    setAt?: ReactiveSourceLocation[];
+    /**
+     * What this tag rendered, when a producer described it. A panel in the page reads the
+     * elements instead; this is for one that cannot.
+     */
+    dom?: DomNode[];
+    /**
+     * Where this tag's element sits in the document, counted across every tag that owns one.
+     *
+     * Siblings would otherwise sort by id, which is creation order. A keyed list rebuilds a row
+     * rather than mutating it, so the replacement takes the highest id and sorted last: toggling
+     * the first item in a list moved its card to the end of the band and the flash always landed
+     * on the bottom row. Only a producer in the page can work this out.
+     */
+    order?: number;
     /** Resource only. */
     loading?: boolean;
+    /** This tag arrived as its own chunk, so it is not in the bundle the page started with. */
+    lazy?: boolean;
+    /** Components only: what the tag was handed, and where each was written. */
+    props?: PropReport[];
+    /**
+     * What plugins have attached, by plugin name. Serialisable, and carried across the wire
+     * untouched by anything that does not know the plugin that wrote it.
+     */
+    extra?: Record<string, unknown>;
     depth?: number;
 }
+/** One prop of a component tag. The value is read untracked, and only when asked for. */
+export interface PropReport {
+    name: string;
+    /** Formatted at the moment it was read. Absent when reading threw. */
+    value?: string;
+    /** Where it was written on the tag. */
+    at?: {
+        file?: string;
+        line?: number;
+        column?: number;
+    };
+}
 /** The real version (signals/memos) or recompute count fallback. */
 export declare function nodeVersion(n: RNode): number;
 /** The real CLEAN/CHECK/DIRTY state when the core node is reachable (memos), else undefined. */
@@ -34,7 +150,7 @@ export interface ReactorApi {
         name?: string;
         equals?: false | ((a: T, b: T) => boolean);
     }): [() => T, (v: T | ((prev: T) => T)) => T];
-    createMemo<T>(fn: () => T, options?: {
+    createMemo<T>(fn: () => T, value?: T, options?: {
         name?: string;
     }): () => T;
     createEffect(fn: () => void, options?: {
@@ -44,7 +160,31 @@ export interface ReactorApi {
         name?: string;
         immutable?: boolean;
     }): [T, (...args: unknown[]) => void];
-    createResource(...args: unknown[]): [((() => unknown) & Record<string, unknown>), unknown];
+    createResource(...args: unknown[]): [(() => unknown) & Record<string, unknown>, unknown];
+    signal<T>(value: T, options?: {
+        name?: string;
+        equals?: false | ((a: T, b: T) => boolean);
+    }): (() => T) & ((v: T | ((prev: T) => T)) => T);
+    memo<T>(fn: () => T, value?: T, options?: {
+        name?: string;
+    }): () => T;
+    effect(fn: () => void, options?: {
+        name?: string;
+    }): void;
+    store<T extends object>(initial: T, options?: {
+        name?: string;
+        immutable?: boolean;
+    }): Immutable<T> & {
+        set: StoreSetter<T>;
+    };
+    resource<T extends object, S>(fetcher: (source: S) => T | Promise<T>, source?: () => S, options?: {
+        name?: string;
+        initialValue?: T | (() => T);
+    }): () => T | (undefined & {
+        loading: boolean;
+        error: unknown;
+        refetch: () => void;
+    });
 }
 export interface Reactor {
     readonly graph: Map<number, RNode>;
@@ -52,5 +192,7 @@ export interface Reactor {
     sample(): number[];
     dispose(): void;
 }
+export declare const fmt: (v: unknown) => string;
+export declare const short: (s: string, n?: number) => string;
 export declare function createReactor(): Reactor;
 //# sourceMappingURL=instrument.d.ts.map

package/dist/instrument.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"instrument.d.ts","sourceRoot":"","sources":["../src/instrument.ts"],"names":[],"mappings":"AAmBA,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAC1E,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,mEAAmE;IACnE,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClB,2EAA2E;IAC3E,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACpB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,OAAO,CAAC;IACrB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,SAAS,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnD,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAGD,oEAAoE;AACpE,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,CAE5C;AACD,gGAAgG;AAChG,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAEzD;AAED,MAAM,WAAW,UAAU;IACzB,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC,CAAA;KAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9I,UAAU,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC,CAAC;IACjE,YAAY,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAChE,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC,CAAC;IAC/H,cAAc,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC5F;AAED,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,GAAG,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,GAAG,IAAI,CAAC;IAC5C,MAAM,IAAI,MAAM,EAAE,CAAC;IACnB,OAAO,IAAI,IAAI,CAAC;CACjB;AAeD,wBAAgB,aAAa,IAAI,OAAO,CAqLvC"}
+{"version":3,"file":"instrument.d.ts","sourceRoot":"","sources":["../src/instrument.ts"],"names":[],"mappings":"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"}

package/dist/instrument.js

@@ -3,9 +3,25 @@
 // into a graph. A read is a subscription, so edges come from real reads; writes (setX) made inside
 // a consumer become write edges. Nodes carry the live core node so the inspector reads the real
 // version + CLEAN/CHECK/DIRTY state, and onCleanup removes a node when its owner disposes.
-import { createSignal, createMemo, createEffect, createResource, createRoot, untrack, onCleanup, Signal, } from '@fluixi/reactive/signal';
+import { createSignal, createMemo, createEffect, createResource, createRoot, untrack, onCleanup, getOwner, runWithOwner, Signal, } from '@fluixi/reactive/signal';
 import { createStore } from '@fluixi/reactive/store';
+import { componentSource, installSourceMarker, takeReactiveSource } from './source.js';
+import { formatValue, shorten } from './format.js';
 const $NODE = Symbol.for('signal-node');
+/**
+ * The names the compiler supplies without an import, and what each one is. A control-flow
+ * tag stamps its name the same way an author's component does, so without this `Match` and
+ * `Switch` are drawn as components the author wrote.
+ *
+ * Mirrors `resolve/builtins.ts` in @fluixi/compiler. Not imported from there: this package
+ * runs beside the application, and the compiler is not on that side of the wall.
+ */
+export const KIND_OF_BUILTIN = {
+    Show: 'control', For: 'control', Index: 'control', Switch: 'control', Match: 'control',
+    Portal: 'control', Dynamic: 'control', ErrorBoundary: 'control',
+    Suspense: 'control', SuspenseList: 'control', Await: 'control',
+    Router: 'router', Outlet: 'router', Redirect: 'router', Link: 'router',
+};
 const CORE_STATE = { 0: 'clean', 1: 'check', 2: 'dirty' };
 /** The real version (signals/memos) or recompute count fallback. */
 export function nodeVersion(n) {
@@ -15,28 +31,51 @@ export function nodeVersion(n) {
 export function nodeState(n) {
     return n.core && typeof n.core.state === 'number' ? CORE_STATE[n.core.state] : undefined;
 }
-const fmt = (v) => {
-    try {
-        if (typeof v === 'string')
-            return JSON.stringify(v);
-        if (typeof v === 'function')
-            return 'ƒ';
-        if (typeof v === 'bigint')
-            return `${v}n`;
-        if (typeof v === 'object' && v)
-            return JSON.stringify(v);
-        return String(v);
-    }
-    catch {
-        return '?';
-    }
-};
-const short = (s, n = 18) => (s.length > n ? s.slice(0, n - 1) + '…' : s);
+// Kept as the names the rest of this package already uses.
+export const fmt = (v) => formatValue(v);
+export const short = (s, n = 18) => shorten(s, n);
 export function createReactor() {
+    installSourceMarker();
     const graph = new Map();
+    /** Run counts as of the last sample, so a node with no readable value can still pulse. */
+    const runsAtLastSample = new Map();
+    /** Nodes still carrying a positional label, so a better one can replace it later. */
+    const unnamed = new Set();
     const consumerStack = [];
     let seq = 0;
     let dispose = () => { };
+    // The root's owner, kept so a node created after `run` returned still has somewhere to
+    // hang its cleanup. A project's modules load asynchronously, so most registration lands
+    // well after the synchronous setup. With no owner, `onCleanup` runs immediately and the
+    // node disappears the moment it is made, which is why the graph came up empty.
+    let rootOwner = null;
+    /**
+     * Whether this node is the wrapper that made the stamped value, rather than one further
+     * down that only passes it along.
+     *
+     * `$name` is set on what a component returns, so it travels with the value: every memo
+     * holding it looks like the component. The one that made it is the one none of its
+     * dependencies already has. Otherwise a component under `Suspense` draws twice.
+     */
+    const claims = (node, value) => {
+        for (const dep of node.deps) {
+            const other = graph.get(dep);
+            if (other?.read && other.read() === value)
+                return false;
+        }
+        return true;
+    };
+    /** Remove a node when whatever created it goes away, or when the reactor is torn down. */
+    const forget = (id) => {
+        const owner = getOwner() ?? rootOwner;
+        if (owner) {
+            runWithOwner(owner, () => onCleanup(() => {
+                graph.delete(id);
+                runsAtLastSample.delete(id);
+                unnamed.delete(id);
+            }));
+        }
+    };
     const recordRead = (sourceId) => {
         const c = consumerStack[consumerStack.length - 1];
         if (c != null)
@@ -47,24 +86,34 @@ export function createReactor() {
         if (c != null && c !== targetId)
             graph.get(c)?.writes.add(targetId);
     };
-    const base = (id, label, kind) => ({
-        id,
-        label,
-        kind,
-        deps: new Set(),
-        writes: new Set(),
-        runs: 0,
-        lastPulse: 0,
-    });
+    // Every tracked primitive comes through here, so it is the one place a mark is taken. An
+    // explicit `{ name }` wins; otherwise the node borrows the variable name the compiler
+    // read, which is why `const count = signal(0)` shows as `count` rather than `s0`.
+    const base = (id, named, kind, fallback) => {
+        const mark = takeReactiveSource();
+        if (!named && !mark?.name)
+            unnamed.add(id);
+        return {
+            id,
+            label: named ?? mark?.name ?? fallback,
+            kind,
+            deps: new Set(),
+            writes: new Set(),
+            runs: 0,
+            lastPulse: 0,
+            ...(mark?.location ? { source: mark.location } : {}),
+        };
+    };
     const trackedCreateSignal = (value, options) => {
         const id = seq++;
         const [get, set] = createSignal(value, options);
-        const node = base(id, options?.name ?? `s${id}`, 'state');
+        const node = base(id, options?.name, 'state', `s${id}`);
         node.read = () => untrack(get);
-        node.value = short(fmt(value));
+        node.detail = formatValue(value);
+        node.value = shorten(node.detail);
         node.core = get[$NODE] ?? null;
         graph.set(id, node);
-        onCleanup(() => graph.delete(id));
+        forget(id);
         const read = () => {
             recordRead(id);
             return get();
@@ -75,11 +124,11 @@ export function createReactor() {
         };
         return [read, write];
     };
-    const trackedCreateMemo = (fn, options) => {
+    const trackedCreateMemo = (fn, value, options) => {
         const id = seq++;
-        const node = base(id, options?.name ?? `m${id}`, 'memo');
+        const node = base(id, options?.name, 'memo', `m${id}`);
         graph.set(id, node);
-        onCleanup(() => graph.delete(id));
+        forget(id);
         const m = createMemo(() => {
             node.core ??= Signal.subtle.currentComputed(); // capture the live Computed
             node.deps.clear();
@@ -92,7 +141,7 @@ export function createReactor() {
             finally {
                 consumerStack.pop();
             }
-        });
+        }, value, options);
         node.read = () => untrack(m);
         return () => {
             recordRead(id);
@@ -101,9 +150,9 @@ export function createReactor() {
     };
     const trackedCreateEffect = (fn, options) => {
         const id = seq++;
-        const node = base(id, options?.name ?? `e${id}`, 'effect');
+        const node = base(id, options?.name, 'effect', `e${id}`);
         graph.set(id, node);
-        onCleanup(() => graph.delete(id));
+        forget(id);
         createEffect(() => {
             node.core ??= Signal.subtle.currentComputed();
             node.deps.clear();
@@ -122,7 +171,7 @@ export function createReactor() {
     const trackedCreateStore = (initial, options) => {
         const id = seq++;
         const [proxy, setter] = createStore(initial, { immutable: true, ...options });
-        const node = base(id, options?.name ?? `store${id}`, 'store');
+        const node = base(id, options?.name, 'store', `store${id}`);
         node.read = () => {
             try {
                 return untrack(() => JSON.stringify(proxy));
@@ -133,7 +182,7 @@ export function createReactor() {
         };
         node.value = '{…}';
         graph.set(id, node);
-        onCleanup(() => graph.delete(id));
+        forget(id);
         const recording = new Proxy(proxy, {
             get(t, p, r) {
                 recordRead(id);
@@ -150,7 +199,7 @@ export function createReactor() {
         const id = seq++;
         const last = args[args.length - 1];
         const name = last && typeof last === 'object' && !Array.isArray(last) && typeof last !== 'function' ? last.name : undefined;
-        const node = base(id, name ?? `res${id}`, 'resource');
+        const node = base(id, name, 'resource', `res${id}`);
         const [data, actions] = createResource(...args);
         node.read = () => {
             try {
@@ -162,7 +211,7 @@ export function createReactor() {
         };
         node.value = '⏳ loading';
         graph.set(id, node);
-        onCleanup(() => graph.delete(id));
+        forget(id);
         const accessor = (() => {
             recordRead(id);
             return data();
@@ -172,38 +221,109 @@ export function createReactor() {
         }
         return [accessor, actions];
     };
+    // The short API is the long one with a handle around it. `signal` is
+    // `Object.assign(createSignal(...), { set })`, `memo` and `effect` are the same function
+    // under another name. Deriving them keeps one definition of what tracking means, instead
+    // of a second copy of the node bookkeeping that drifts from the first.
+    const trackedSignal = (value, options) => {
+        const [read, write] = trackedCreateSignal(value, options);
+        Object.defineProperty(read, 'set', { value: write });
+        return read;
+    };
+    const trackedMemo = trackedCreateMemo;
+    const trackedEffect = trackedCreateEffect;
+    const trackedStore = (initial, options) => {
+        const [state, set] = trackedCreateStore(initial, options);
+        // A wrapper rather than assigning onto the state: the proxy is the tracking boundary,
+        // and writing a key through it would read as a state change.
+        return new Proxy(state, {
+            get: (target, key) => (key === 'set' ? set : target[key]),
+            has: (target, key) => key === 'set' || Reflect.has(target, key),
+        });
+    };
+    const trackedResource = (...args) => {
+        const [accessor, controls] = trackedCreateResource(...args);
+        return Object.assign(accessor, controls);
+    };
     const api = {
         createSignal: trackedCreateSignal,
         createMemo: trackedCreateMemo,
         createEffect: trackedCreateEffect,
         createStore: trackedCreateStore,
         createResource: trackedCreateResource,
+        signal: trackedSignal,
+        memo: trackedMemo,
+        store: trackedStore,
+        effect: trackedEffect,
+        resource: trackedResource
     };
     return {
         graph,
         run(setup) {
             dispose();
             graph.clear();
+            runsAtLastSample.clear();
+            unnamed.clear();
             seq = 0;
             consumerStack.length = 0;
             createRoot((d) => {
                 dispose = d;
+                rootOwner = getOwner();
                 setup(api);
             });
         },
         sample() {
             const changed = [];
-            const now = performance.now();
+            // Date.now rather than performance.now: the reactor may run in one realm and the view
+            // in another, which an iframe preview does, and each realm's performance
+            // clock has its own origin, so the age the view computed was nonsense and nothing
+            // ever pulsed.
+            const now = Date.now();
             for (const node of graph.values()) {
-                if (!node.read)
+                // An effect has no value to read, so what marks it as having done something is the
+                // run count the wrapper keeps. Without this an effect never pulsed.
+                if (!node.read) {
+                    const seen = runsAtLastSample.get(node.id);
+                    if (seen !== undefined && node.runs > seen) {
+                        node.lastPulse = now;
+                        changed.push(node.id);
+                    }
+                    runsAtLastSample.set(node.id, node.runs);
                     continue;
-                const next = short(fmt(node.read()));
-                if (next !== node.value) {
+                }
+                const raw = node.read();
+                // The compiler wraps each component in a memo, and `createComponent` stamps the
+                // component's name on what it returns. A memo that has no name of its own is that
+                // wrapper, so it can say `Counter` rather than `m5`.
+                // The runtime stamps a component's name on what it returned, so a memo holding
+                // that is the wrapper the compiler put round a component. Not gated on the node
+                // being unnamed: the compiler marks the tag with the component's name too, which
+                // would leave the node named and never recognised.
+                const stamped = raw?.$name;
+                if (node.kind === 'memo' && typeof stamped === 'string' && stamped && claims(node, raw)) {
+                    // Still a memo underneath. This only says so, so a renderer can draw it as what
+                    // the author wrote rather than as the wrapper around it.
+                    node.kind = KIND_OF_BUILTIN[stamped] ?? 'component';
+                    // `source` stays what it is for every other node: where this one was created,
+                    // which for a wrapper is where the tag was written. Where the component itself
+                    // lives is a second fact, and it stands in for the first when nothing marked it.
+                    node.declaredAt = componentSource(stamped);
+                    node.source ??= node.declaredAt;
+                    if (unnamed.has(node.id)) {
+                        node.label = stamped;
+                        unnamed.delete(node.id);
+                    }
+                }
+                const detail = formatValue(raw);
+                const next = shorten(detail);
+                if (next !== node.value || detail !== node.detail) {
+                    node.detail = detail;
                     node.value = next;
                     node.runs++;
                     node.lastPulse = now;
                     changed.push(node.id);
                 }
+                runsAtLastSample.set(node.id, node.runs);
             }
             return changed;
         },

package/dist/kind-filter.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Picks which kinds of node the graph draws.
+ *
+ * Nine checkboxes took up too much of the toolbar, so they sit in a dropdown. The button
+ * shows the count while a filter is active.
+ *
+ * Not a `<select multiple>`: it renders as a list box, takes the full height, and needs
+ * ctrl-click to select more than one.
+ */
+import type { NodeKind } from './instrument.js';
+/** Every kind a graph can hold, in the order they are offered. */
+export declare const FILTERABLE_KINDS: readonly NodeKind[];
+export interface KindFilterOptions {
+    /** Offered, in this order. Defaults to every kind a graph can hold. */
+    kinds?: readonly NodeKind[];
+    /**
+     * Called when the selection changes. Null means every kind is on — passing a set of all
+     * nine instead would hide any kind that has no checkbox here.
+     */
+    onChange: (kinds: NodeKind[] | null) => void;
+    /** What the button says. @default 'Kinds' */
+    label?: string;
+    panelClass?: string;
+}
+export interface KindFilter {
+    /** The kinds currently on. */
+    readonly selected: readonly NodeKind[];
+    /** Set from outside, e.g. a host restoring the last used selection. */
+    select(kinds: Iterable<NodeKind> | null): void;
+    destroy(): void;
+}
+/**
+ * Builds the control inside `host`. Call `destroy` to remove it — it holds a document
+ * listener for closing the panel on an outside click.
+ */
+export declare function createKindFilter(host: HTMLElement, options: KindFilterOptions): KindFilter;
+export declare const KIND_FILTER_CSS = "\n.fx-kinds { position: relative; display: inline-flex; }\n.fx-kinds-button { white-space: nowrap; }\n/* The hidden attribute is display:none from the user agent, which a class setting display outranks. */\n.fx-kinds-panel[hidden] { display: none; }\n.fx-kinds-panel {\n  position: absolute; top: calc(100% + 4px); z-index: 40;\n  display: grid; gap: 2px; padding: 6px 8px; min-width: 132px;\n  background: var(--fx-panel, #14161c);\n  border: 1px solid var(--fx-line, #262a35); border-radius: 6px;\n  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);\n  }\n.fx-kinds-panel:not(.fx-panel-left){ right: 0; }\n.fx-kinds-panel.fx-panel-left { left: 0; }\n.fx-kinds-panel label {\n  display: flex; align-items: center; gap: 6px;\n  font-size: 11px; color: var(--fx-muted, #8a90a2); cursor: pointer; user-select: none;\n}\n.fx-kinds-panel label:hover { color: var(--fx-label, #e7e9ee); }\n.fx-kinds-panel input { width: 11px; height: 11px; margin: 0; accent-color: var(--fx-accent, #5eead4); }\n.fx-kinds-all {\n  padding-bottom: 4px; margin-bottom: 2px;\n  border-bottom: 1px solid var(--fx-line, #262a35);\n  color: var(--fx-label, #e7e9ee) !important;\n}\n";
+export declare const DROPDOWN_FILTER_CSS = "\n.fx-dropdown-btn { background-color: transparent; appearance: none; border: 1px solid var(--line-strong); outline: none; border-radius: .25rem; padding-block: .25rem; padding-inline: .875rem; font-size: .75rem; cursor: pointer }\n.fx-dropdown-btn:hover { border-color: color-mix(in oklab, var(--accent) 50%, transparent); background-color: var(--bg); }\n.fx-dropdown-caret { width: 0;height: 0;border-left: .15rem solid transparent; border-right: .15rem solid transparent; border-top: .15rem solid currentColor; transition: transform 0.2s ease; right: .4rem; top: 50%; color: color-mix(in oklab, var(--muted) 50%, transparent); position: absolute; }\n";
+//# sourceMappingURL=kind-filter.d.ts.map

package/dist/kind-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kind-filter.d.ts","sourceRoot":"","sources":["../src/kind-filter.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,kEAAkE;AAClE,eAAO,MAAM,gBAAgB,EAAE,SAAS,QAAQ,EAG/C,CAAC;AAKF,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC5B;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,8BAA8B;IAC9B,QAAQ,CAAC,QAAQ,EAAE,SAAS,QAAQ,EAAE,CAAC;IACvC,uEAAuE;IACvE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IAC/C,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,GAAG,UAAU,CAqH1F;AAED,eAAO,MAAM,eAAe,goCAyB3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,kpBAI/B,CAAC"}