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

package/dist/graph-view.d.ts

@@ -1,12 +1,89 @@
-import type { RNode } from './instrument.js';
+import type { RNode, NodeKind } from './instrument.js';
+/** Which way a dependency runs on screen: left to right, or top to bottom. */
+export type GraphDirection = 'horizontal' | 'vertical';
 export interface GraphViewOptions {
     onSelect?: (node: RNode | null) => void;
+    /**
+     * Double-clicking a card. Given the node so the host can pick which of its locations to
+     * open: a component has one for where it was declared and another for where it was used.
+     */
+    onReveal?: (node: RNode) => void;
+    /**
+     * A wide panel reads left to right; a tall narrow one, which is what a side panel usually
+     * is, reads top to bottom.
+     * @default 'horizontal'
+     */
+    direction?: GraphDirection;
+    /**
+     * Fold a store's key signals into the store card until it is opened. A cart with four
+     * items is a dozen signals nobody asked to see, and the store already shows their value.
+     * @default true
+     */
+    collapseStores?: boolean;
+    /**
+     * Put what a dependency made, and the application never asked for, behind one card. A
+     * router's revalidation counter is real state, and it is not what anyone opened the graph
+     * to look at.
+     * @default true
+     */
+    groupExternal?: boolean;
+    /**
+     * Draw a card for each place a signal reaches the document, and each place it is set from.
+     *
+     * Off by default: one card per attribute and text hole is more cards than nodes on most
+     * pages, and the graph is about the nodes. On, it is the whole chain: handler, signal,
+     * memo, element.
+     * @default false
+     */
+    showBindings?: boolean;
+    /**
+     * Draw only these kinds. Omitted, or null, draws every kind, which is what an empty
+     * filter means to a reader: no filter, rather than nothing to see.
+     */
+    kinds?: Iterable<NodeKind> | null;
+    /** The project a path is shown relative to. See the inspector's option of the same name. */
+    root?: string;
 }
 export interface GraphView {
     update(graph: Map<number, RNode>, now?: number): void;
     clear(): void;
     select(id: number | null): void;
+    /** Multiply the zoom, about the middle of the view. */
+    zoomBy(factor: number): void;
+    /** Back to 1:1, everything in frame. */
+    resetView(): void;
+    /** Open or fold a node that has children, such as a store. Returns what it now is. */
+    toggle(id: number): boolean;
+    /** Lay the graph out along the other axis. */
+    setDirection(direction: GraphDirection): void;
+    readonly direction: GraphDirection;
+    /** Show what dependencies made as one card, or as themselves. */
+    setGroupExternal(group: boolean): void;
+    readonly groupExternal: boolean;
+    /** Show the document and the handlers as cards around the signals. */
+    setShowBindings(show: boolean): void;
+    readonly showBindings: boolean;
+    /** Draw only these kinds; null for all of them. */
+    setKinds(kinds: Iterable<NodeKind> | null): void;
+    readonly kinds: ReadonlySet<NodeKind> | null;
+    /**
+     * The graph as drawn, cards included.
+     *
+     * What a host should resolve a selected id against: the view invents nodes the host's own
+     * map has never heard of.
+     */
+    readonly shown: Map<number, RNode>;
+    /** Hold a set lit until called again. Hovering works over it and returns here. */
+    focus(ids: readonly number[] | null): void;
 }
 export declare function createGraphView(svg: SVGSVGElement, options?: GraphViewOptions): GraphView;
-export declare const DEVTOOLS_CSS = "\n.fx-edge { fill: none; stroke: #38415a; stroke-width: 1.6; opacity: .75; }\n.fx-wedge { fill: none; stroke: #fb7185; stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .65; }\n.fx-node { color: #5eead4; filter: drop-shadow(0 0 calc(var(--pulse,0) * 13px) var(--glow, #5eead4)); }\n.fx-node.n-state { --glow: #34d399; }\n.fx-node.n-memo { --glow: #a78bfa; }\n.fx-node.n-effect { --glow: #fbbf24; }\n.fx-node.n-store { --glow: #38bdf8; }\n.fx-node.n-resource { --glow: #fb7185; }\n.fx-box { fill: #131722; stroke: var(--glow, #5eead4); stroke-width: 1.4; stroke-opacity: calc(.5 + var(--pulse,0) * .5); }\n.fx-node.selected .fx-box { fill: #1a2230; stroke-width: 2.4; }\n.fx-kind { fill: var(--glow, #5eead4); font-family: ui-monospace, monospace; font-size: 9.5px; opacity: .85; }\n.fx-label { fill: #e7e9ee; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13px; font-weight: 600; }\n.fx-value { fill: #8a90a2; font-family: ui-monospace, monospace; font-size: 12px; }\n.fx-node.n-effect .fx-value { fill: #fbbf24; }\n.fx-node.n-resource .fx-value { fill: #fb7185; }\n";
+/**
+ * Default theme.
+ *
+ * Every colour reads a custom property first, so a host that defines them, a page with a
+ * light mode say, restyles the graph without replacing this. The fallbacks are the dark
+ * values it always had. The four node hues stay as they are: here colour is the distinction
+ * being drawn, not decoration.
+ */
+export declare const DEVTOOLS_CSS: string;
 //# sourceMappingURL=graph-view.d.ts.map

package/dist/graph-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph-view.d.ts","sourceRoot":"","sources":["../src/graph-view.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAY,MAAM,iBAAiB,CAAC;AAmCvD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,SAAS;IACxB,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtD,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CACjC;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,aAAa,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CA+G7F;AAGD,eAAO,MAAM,YAAY,+jCAgBxB,CAAC"}
+{"version":3,"file":"graph-view.d.ts","sourceRoot":"","sources":["../src/graph-view.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAgHvD,8EAA8E;AAC9E,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,UAAU,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IAClC,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,SAAS;IACxB,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtD,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC,uDAAuD;IACvD,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,wCAAwC;IACxC,SAAS,IAAI,IAAI,CAAC;IAClB,sFAAsF;IACtF,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9C,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC;IACnC,iEAAiE;IACjE,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;IAChC,sEAAsE;IACtE,eAAe,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACrC,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,mDAAmD;IACnD,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IACjD,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IAC7C;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,kFAAkF;IAClF,KAAK,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC;CAC5C;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,aAAa,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAuzB7F;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,QAgDxB,CAAC"}