@prnt/dagr-explorer 0.1.3

package/dist/explorer-details.d.ts

@@ -0,0 +1,44 @@
+/**
+ * `ExplorerDetails`: the drawer that shows the inspected node.
+ *
+ * It renders nothing while closed. Open, it is an overlay at every width,
+ * positioned against the nearest positioned ancestor (the viewport's stage
+ * when it is `ExplorerViewport`'s child, else the root or a host's own
+ * wrapper), so opening it never resizes the graph.
+ *
+ * The body is a keyboard scroll stop and scrolls to the top when the
+ * inspected node changes. Its content is the slot's, or by default the
+ * node's label and its connections as buttons, each inspecting the node at
+ * the other end. Those buttons keep the drawer's original opener, so
+ * `Escape` after following three edges still returns where the reader began.
+ *
+ * Closing restores focus, and the root does it, because every way the drawer
+ * closes (this part's `Escape` and close button, the api, the selected node
+ * leaving the data) ends in the same place. See `ExplorerRoot`.
+ */
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import type { ExplorerEdge, ExplorerNode } from './types.js';
+/** An edge touching the inspected node, and the node at its other end. */
+export interface ExplorerConnection<N extends ExplorerNode = ExplorerNode, E extends ExplorerEdge = ExplorerEdge> {
+    readonly edge: E;
+    /** The other end. For a self loop, the node itself. */
+    readonly node: N;
+}
+/** What the drawer's slot receives. */
+export interface ExplorerDetailsContext<N extends ExplorerNode = ExplorerNode, E extends ExplorerEdge = ExplorerEdge> {
+    readonly node: N;
+    /** Every edge touching `node`, in data order. */
+    readonly connections: readonly ExplorerConnection<N, E>[];
+    /** Inspects another node, keeping the drawer's opener. */
+    readonly inspect: (id: string) => void;
+}
+export interface ExplorerDetailsProps<N extends ExplorerNode = ExplorerNode, E extends ExplorerEdge = ExplorerEdge> {
+    /** The drawer's content. Default: the label and the connection list. */
+    readonly children?: ((context: ExplorerDetailsContext<N, E>) => ReactNode) | undefined;
+    /** One connection's content in the default list. Default: the other node's label. */
+    readonly renderConnection?: ((edge: E, otherNode: N) => ReactNode) | undefined;
+    readonly className?: string | undefined;
+    readonly style?: CSSProperties | undefined;
+}
+export declare function ExplorerDetails<N extends ExplorerNode = ExplorerNode, E extends ExplorerEdge = ExplorerEdge>(props: ExplorerDetailsProps<N, E>): ReactElement | null;
+//# sourceMappingURL=explorer-details.d.ts.map

package/dist/explorer-details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"explorer-details.d.ts","sourceRoot":"","sources":["../src/explorer-details.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE7D,0EAA0E;AAC1E,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAAE,CAAC,SAAS,YAAY,GAAG,YAAY;IAC9G,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;CAClB;AAED,uCAAuC;AACvC,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAAE,CAAC,SAAS,YAAY,GAAG,YAAY;IAClH,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;IACjB,iDAAiD;IACjD,QAAQ,CAAC,WAAW,EAAE,SAAS,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAC1D,0DAA0D;IAC1D,QAAQ,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAAE,CAAC,SAAS,YAAY,GAAG,YAAY;IAChH,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IACvF,qFAAqF;IACrF,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IAC/E,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CAC5C;AAED,wBAAgB,eAAe,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAAE,CAAC,SAAS,YAAY,GAAG,YAAY,EAC1G,KAAK,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,GAChC,YAAY,GAAG,IAAI,CAwGrB"}

package/dist/explorer-details.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `ExplorerDetails`: the drawer that shows the inspected node.
+ *
+ * It renders nothing while closed. Open, it is an overlay at every width,
+ * positioned against the nearest positioned ancestor (the viewport's stage
+ * when it is `ExplorerViewport`'s child, else the root or a host's own
+ * wrapper), so opening it never resizes the graph.
+ *
+ * The body is a keyboard scroll stop and scrolls to the top when the
+ * inspected node changes. Its content is the slot's, or by default the
+ * node's label and its connections as buttons, each inspecting the node at
+ * the other end. Those buttons keep the drawer's original opener, so
+ * `Escape` after following three edges still returns where the reader began.
+ *
+ * Closing restores focus, and the root does it, because every way the drawer
+ * closes (this part's `Escape` and close button, the api, the selected node
+ * leaving the data) ends in the same place. See `ExplorerRoot`.
+ */
+import { useEffect, useId, useMemo, useRef } from 'react';
+import { useExplorerContext } from './context.js';
+export function ExplorerDetails(props) {
+    const { children, renderConnection, className, style } = props;
+    const { state } = useExplorerContext('ExplorerDetails');
+    const { labels, activeView, detailsOpen } = state;
+    // The part's type parameters are a claim about the root's data. See context.ts.
+    const node = detailsOpen ? state.selectedNode : null;
+    const nodeId = node?.id ?? null;
+    const titleId = useId();
+    const connectionsId = useId();
+    const bodyRef = useRef(null);
+    useEffect(() => {
+        if (nodeId !== null && bodyRef.current !== null)
+            bodyRef.current.scrollTop = 0;
+    }, [nodeId]);
+    const connections = useMemo(() => {
+        if (nodeId === null || activeView === null)
+            return [];
+        const byId = new Map(activeView.nodes.map((each) => [each.id, each]));
+        const list = [];
+        for (const edge of activeView.edges) {
+            if (edge.source !== nodeId && edge.target !== nodeId)
+                continue;
+            const other = byId.get(edge.source === nodeId ? edge.target : edge.source);
+            if (other !== undefined)
+                list.push({ edge, node: other });
+        }
+        return list;
+    }, [nodeId, activeView]);
+    if (node === null)
+        return null;
+    // No trigger, and the drawer is open: the root keeps the opener it has.
+    const inspect = (id) => state.inspect(id);
+    const onKeyDown = (event) => {
+        if (event.key !== 'Escape')
+            return;
+        event.preventDefault();
+        state.closeDetails();
+    };
+    return (_jsxs("aside", { "data-dagr-explorer": "details", "aria-labelledby": titleId, className: className, onKeyDown: onKeyDown, style: {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: 'min(360px, 100%)',
+            display: 'flex',
+            flexDirection: 'column',
+            zIndex: 1,
+            // The stylesheet's fallback, so the drawer looks the same with or without it.
+            background: 'var(--dagr-explorer-bg, #ffffff)',
+            ...style,
+        }, children: [_jsxs("div", { "data-dagr-explorer": "details-header", style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', flex: 'none' }, children: [_jsx("span", { id: titleId, children: labels.drawerTitle }), _jsx("button", { type: "button", "data-dagr-explorer": "details-close", onClick: () => state.closeDetails(), children: labels.close })] }), _jsx("div", { ref: bodyRef, "data-dagr-explorer": "details-body", tabIndex: 0, 
+                // A keyboard scroll stop is announced, so it needs a name: the drawer's title.
+                role: "region", "aria-labelledby": titleId, style: { overflow: 'auto', flex: '1 1 auto', minHeight: 0 }, children: children !== undefined ? (children({ node, connections, inspect })) : (_jsxs(_Fragment, { children: [_jsx("p", { "data-dagr-explorer": "details-label", children: node.label }), connections.length === 0 ? null : (_jsxs(_Fragment, { children: [_jsx("p", { id: connectionsId, children: labels.connections }), _jsx("ul", { "data-dagr-explorer": "connections", "aria-labelledby": connectionsId, style: { listStyle: 'none', margin: 0, padding: 0 }, children: connections.map(({ edge, node: other }) => (_jsx("li", { children: _jsx("button", { type: "button", "data-node-id": other.id, onClick: () => inspect(other.id), children: renderConnection === undefined ? other.label : renderConnection(edge, other) }) }, edge.id))) })] }))] })) })] }));
+}
+//# sourceMappingURL=explorer-details.js.map

package/dist/explorer-details.js.map

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

package/dist/explorer-search.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `ExplorerSearch`: a labeled field, a live match count, and the matches as
+ * a list of buttons.
+ *
+ * Search is the complete way to every node. A virtualized node has no
+ * element, so the graph alone cannot reach it by keyboard or screen reader,
+ * and search can: every match is counted, and `Enter` reaches the first.
+ *
+ * **The list is capped,** at `maxResults` (default 50), in data order, with
+ * a plain line from `labels.moreMatches` for the rest, so a short query on a
+ * large graph does not mount thousands of buttons. A longer query narrows
+ * it. The list is memoized on the matches, which the root keeps by identity
+ * while the same nodes match.
+ *
+ * `Enter` inspects the first match and flies the camera to it, and choosing
+ * a result does the same for that result. The list stays mounted while a
+ * node is inspected, so its scroll position survives.
+ *
+ * `Escape` in the field closes the drawer if it is open, and only then
+ * clears the query, so a reader who opened a result from here can close it
+ * without losing the list.
+ */
+import type { CSSProperties, ReactElement } from 'react';
+export interface ExplorerSearchProps {
+    /** The most results listed, in data order. Default 50. The count and `Enter` cover every match. */
+    readonly maxResults?: number | undefined;
+    readonly className?: string | undefined;
+    readonly style?: CSSProperties | undefined;
+}
+export declare function ExplorerSearch(props: ExplorerSearchProps): ReactElement;
+//# sourceMappingURL=explorer-search.d.ts.map

package/dist/explorer-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"explorer-search.d.ts","sourceRoot":"","sources":["../src/explorer-search.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAMxE,MAAM,WAAW,mBAAmB;IAClC,mGAAmG;IACnG,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CAC5C;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CAsGvE"}

package/dist/explorer-search.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `ExplorerSearch`: a labeled field, a live match count, and the matches as
+ * a list of buttons.
+ *
+ * Search is the complete way to every node. A virtualized node has no
+ * element, so the graph alone cannot reach it by keyboard or screen reader,
+ * and search can: every match is counted, and `Enter` reaches the first.
+ *
+ * **The list is capped,** at `maxResults` (default 50), in data order, with
+ * a plain line from `labels.moreMatches` for the rest, so a short query on a
+ * large graph does not mount thousands of buttons. A longer query narrows
+ * it. The list is memoized on the matches, which the root keeps by identity
+ * while the same nodes match.
+ *
+ * `Enter` inspects the first match and flies the camera to it, and choosing
+ * a result does the same for that result. The list stays mounted while a
+ * node is inspected, so its scroll position survives.
+ *
+ * `Escape` in the field closes the drawer if it is open, and only then
+ * clears the query, so a reader who opened a result from here can close it
+ * without losing the list.
+ */
+import { useEffect, useId, useMemo, useRef } from 'react';
+import { useExplorerContext } from './context.js';
+/** How many results the list shows before it says how many more there are. */
+const DEFAULT_MAX_RESULTS = 50;
+export function ExplorerSearch(props) {
+    const { state, internals } = useExplorerContext('ExplorerSearch');
+    const { labels, query, matches, detailsOpen, selectedId, inspect, focusNode } = state;
+    const { maxResults } = props;
+    const cap = maxResults !== undefined && Number.isFinite(maxResults) && maxResults >= 0
+        ? Math.floor(maxResults)
+        : DEFAULT_MAX_RESULTS;
+    const inputId = useId();
+    const countId = useId();
+    const inputRef = useRef(null);
+    // The field is where focus goes when the drawer closes and its opener is gone.
+    useEffect(() => {
+        const field = inputRef.current;
+        internals.searchInputRef.current = field;
+        return () => {
+            if (internals.searchInputRef.current === field)
+                internals.searchInputRef.current = null;
+        };
+    }, [internals]);
+    const blank = query.trim() === '';
+    // `inspect` and `focusNode` are the root's stable methods.
+    const pick = (id, trigger) => {
+        inspect(id, trigger);
+        focusNode(id);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            const first = matches[0];
+            if (first === undefined)
+                return;
+            event.preventDefault();
+            pick(first.id, event.currentTarget);
+        }
+        else if (event.key === 'Escape') {
+            if (detailsOpen)
+                state.closeDetails();
+            else if (query !== '')
+                state.setQuery('');
+            else
+                return;
+            // A search field clears itself on Escape in some browsers, which would
+            // skip the drawer's turn.
+            event.preventDefault();
+        }
+    };
+    const { searchResults, moreMatches } = labels;
+    const list = useMemo(() => {
+        if (matches.length === 0)
+            return null;
+        const shown = cap < matches.length ? matches.slice(0, cap) : matches;
+        const more = matches.length - shown.length;
+        return (_jsxs(_Fragment, { children: [shown.length === 0 ? null : (_jsx("ul", { "data-dagr-explorer": "search-results", "aria-label": searchResults, style: { listStyle: 'none', margin: 0, padding: 0, overflow: 'auto' }, children: shown.map((node) => (_jsx("li", { children: _jsx("button", { type: "button", "data-node-id": node.id, "data-selected": node.id === selectedId ? 'true' : undefined, "aria-current": node.id === selectedId ? 'true' : undefined, onClick: (event) => {
+                                inspect(node.id, event.currentTarget);
+                                focusNode(node.id);
+                            }, children: node.label }) }, node.id))) })), more === 0 ? null : _jsx("p", { "data-dagr-explorer": "search-more", children: moreMatches(more) })] }));
+    }, [matches, cap, selectedId, searchResults, moreMatches, inspect, focusNode]);
+    return (_jsxs("div", { "data-dagr-explorer": "search", role: "search", className: props.className, style: props.style, children: [_jsx("label", { htmlFor: inputId, children: labels.search }), _jsx("input", { ref: inputRef, id: inputId, type: "search", value: query, placeholder: labels.searchPlaceholder, autoComplete: "off", spellCheck: false, "aria-describedby": countId, onChange: (event) => state.setQuery(event.currentTarget.value), onKeyDown: onKeyDown }), _jsx("p", { id: countId, "data-dagr-explorer": "search-count", "aria-live": "polite", children: blank ? '' : labels.matches(matches.length) }), list] }));
+}
+//# sourceMappingURL=explorer-search.js.map

package/dist/explorer-search.js.map

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

package/dist/explorer-toolbar.d.ts

@@ -0,0 +1,17 @@
+/**
+ * `ExplorerToolbar`: zoom out, the zoom readout, zoom in, fit, and zoom to
+ * the selected node.
+ *
+ * **The readout follows the camera without a render.** It subscribes to the
+ * root's camera source and writes its own text when the whole percent
+ * changes, so a zoom that runs for twenty frames re-renders nothing. React
+ * renders the element with no children, so it never overwrites that text.
+ * It is not a live region: announcing every frame of a zoom is noise.
+ */
+import type { CSSProperties, ReactElement } from 'react';
+export interface ExplorerToolbarProps {
+    readonly className?: string | undefined;
+    readonly style?: CSSProperties | undefined;
+}
+export declare function ExplorerToolbar(props: ExplorerToolbarProps): ReactElement;
+//# sourceMappingURL=explorer-toolbar.d.ts.map

package/dist/explorer-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"explorer-toolbar.d.ts","sourceRoot":"","sources":["../src/explorer-toolbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAQzD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CAC5C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAmDzE"}

package/dist/explorer-toolbar.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `ExplorerToolbar`: zoom out, the zoom readout, zoom in, fit, and zoom to
+ * the selected node.
+ *
+ * **The readout follows the camera without a render.** It subscribes to the
+ * root's camera source and writes its own text when the whole percent
+ * changes, so a zoom that runs for twenty frames re-renders nothing. React
+ * renders the element with no children, so it never overwrites that text.
+ * It is not a live region: announcing every frame of a zoom is noise.
+ */
+import { useEffect, useRef } from 'react';
+import { useExplorerContext } from './context.js';
+/** The same steps as the `+` and `-` keys. */
+const ZOOM_IN = 1.25;
+const ZOOM_OUT = 0.8;
+export function ExplorerToolbar(props) {
+    const { state } = useExplorerContext('ExplorerToolbar');
+    const { labels, selectedNode, camera } = state;
+    const readoutRef = useRef(null);
+    const { zoomLevel } = labels;
+    useEffect(() => {
+        const readout = readoutRef.current;
+        if (readout === null)
+            return undefined;
+        let shown = null;
+        const write = (now) => {
+            if (now === null)
+                return;
+            const percent = Math.round(now.scale * 100);
+            if (percent === shown)
+                return;
+            shown = percent;
+            readout.textContent = zoomLevel(percent);
+        };
+        write(camera.get());
+        return camera.subscribe(write);
+    }, [camera, zoomLevel]);
+    return (_jsxs("div", { "data-dagr-explorer": "toolbar", role: "group", "aria-label": labels.zoomControls, className: props.className, style: props.style, children: [_jsx("button", { type: "button", "data-action": "zoom-out", onClick: () => state.zoomBy(ZOOM_OUT), children: labels.zoomOut }), _jsx("span", { ref: readoutRef, "data-dagr-explorer": "zoom-level" }), _jsx("button", { type: "button", "data-action": "zoom-in", onClick: () => state.zoomBy(ZOOM_IN), children: labels.zoomIn }), _jsx("button", { type: "button", "data-action": "fit", onClick: () => state.fit(), children: labels.fit }), _jsx("button", { type: "button", "data-action": "zoom-to-selected", disabled: selectedNode === null, onClick: () => {
+                    if (selectedNode !== null)
+                        state.focusNode(selectedNode.id);
+                }, children: selectedNode === null ? labels.zoomToSelected : labels.zoomTo(selectedNode.label) })] }));
+}
+//# sourceMappingURL=explorer-toolbar.js.map

package/dist/explorer-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"explorer-toolbar.js","sourceRoot":"","sources":["../src/explorer-toolbar.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,8CAA8C;AAC9C,MAAM,OAAO,GAAG,IAAI,CAAC;AACrB,MAAM,QAAQ,GAAG,GAAG,CAAC;AAOrB,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EAAE,KAAK,EAAE,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACxD,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAC/C,MAAM,UAAU,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACjD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,IAAI,OAAO,KAAK,IAAI;YAAE,OAAO,SAAS,CAAC;QACvC,IAAI,KAAK,GAAkB,IAAI,CAAC;QAChC,MAAM,KAAK,GAAG,CAAC,GAA0B,EAAQ,EAAE;YACjD,IAAI,GAAG,KAAK,IAAI;gBAAE,OAAO;YACzB,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC;YAC5C,IAAI,OAAO,KAAK,KAAK;gBAAE,OAAO;YAC9B,KAAK,GAAG,OAAO,CAAC;YAChB,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC,CAAC;QACF,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;QACpB,OAAO,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,qCACqB,SAAS,EAC5B,IAAI,EAAC,OAAO,gBACA,MAAM,CAAC,YAAY,EAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,aAElB,iBAAQ,IAAI,EAAC,QAAQ,iBAAa,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,YAC/E,MAAM,CAAC,OAAO,GACR,EACT,eAAM,GAAG,EAAE,UAAU,wBAAqB,YAAY,GAAG,EACzD,iBAAQ,IAAI,EAAC,QAAQ,iBAAa,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,YAC7E,MAAM,CAAC,MAAM,GACP,EACT,iBAAQ,IAAI,EAAC,QAAQ,iBAAa,KAAK,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,YAC/D,MAAM,CAAC,GAAG,GACJ,EACT,iBACE,IAAI,EAAC,QAAQ,iBACD,kBAAkB,EAC9B,QAAQ,EAAE,YAAY,KAAK,IAAI,EAC/B,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,YAAY,KAAK,IAAI;wBAAE,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;gBAC9D,CAAC,YAEA,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,GAC3E,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/explorer-trace-toggle.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `ExplorerTraceToggle`: trace on and off. With trace on and a node
+ * selected, every node not adjacent to it is dimmed.
+ *
+ * The text names what a press does (`labels.traceOn` while off), so the
+ * button is not also `aria-pressed`: a toggle whose name flips and that
+ * reports a pressed state reads its state twice. `data-active` is the
+ * styling hook.
+ */
+import type { CSSProperties, ReactElement } from 'react';
+export interface ExplorerTraceToggleProps {
+    readonly className?: string | undefined;
+    readonly style?: CSSProperties | undefined;
+}
+export declare function ExplorerTraceToggle(props: ExplorerTraceToggleProps): ReactElement;
+//# sourceMappingURL=explorer-trace-toggle.d.ts.map

package/dist/explorer-trace-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"explorer-trace-toggle.d.ts","sourceRoot":"","sources":["../src/explorer-trace-toggle.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CAC5C;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAejF"}

package/dist/explorer-trace-toggle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useExplorerContext } from './context.js';
+export function ExplorerTraceToggle(props) {
+    const { state } = useExplorerContext('ExplorerTraceToggle');
+    const { trace, labels } = state;
+    return (_jsx("button", { type: "button", "data-dagr-explorer": "trace", "data-active": trace ? 'true' : undefined, className: props.className, style: props.style, onClick: () => state.setTrace(!trace), children: trace ? labels.traceOff : labels.traceOn }));
+}
+//# sourceMappingURL=explorer-trace-toggle.js.map

package/dist/explorer-trace-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"explorer-trace-toggle.js","sourceRoot":"","sources":["../src/explorer-trace-toggle.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAOlD,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,KAAK,EAAE,GAAG,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;IAC5D,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAChC,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,wBACM,OAAO,iBACb,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACvC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,YAEpC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,GAClC,CACV,CAAC;AACJ,CAAC"}

package/dist/explorer-viewport.d.ts

@@ -0,0 +1,69 @@
+/**
+ * `ExplorerViewport`: the graph surface, wired to the root.
+ *
+ * It is the internal `ViewportSurface` with its props filled from the root:
+ * the active view and its layout, the selection, the dimming, and the
+ * activation callbacks (a click inspects, a double click flies to the node).
+ * The camera controls and the camera source go back up to the root, so
+ * `ExplorerApi`'s camera methods and the toolbar's readout reach them.
+ *
+ * **One per root, counted in an effect.** The viewport registers with its
+ * root in an effect with cleanup, and the second registration throws.
+ * Counting in render would misfire under StrictMode's double render, and
+ * when Suspense keeps an old tree alive beside a new one.
+ *
+ * **A view switch remounts the surface,** keyed by view id. That is the
+ * camera reset the spec asks of a switch: a new surface fits its layout on
+ * its first measure, with no flight from a camera framed on other content.
+ *
+ * **The surface renders only for what it shows.** It is memoized, and given
+ * only the state it draws (the view, the layout, the selection, the dimming)
+ * and the root's stable methods, so a keystroke that changes neither the
+ * dimming nor the selection does not render the graph.
+ *
+ * **A stage for overlays.** The surface sits in a positioned element with
+ * the part's children, such as `ExplorerDetails`, which position against it.
+ * The hint, the graph's description, comes after the stage, so an overlay
+ * never covers it.
+ */
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import type { ExplorerBase } from './base.js';
+import type { ExplorerEdge, ExplorerGroup, ExplorerNode } from './types.js';
+import type { ExplorerTier, ExplorerTiers } from './visible-set.js';
+/** Only the node type: nothing here takes an edge. */
+export interface ExplorerViewportProps<N extends ExplorerNode = ExplorerNode> {
+    /**
+     * A node's content, for nodes large enough on screen to read. It sits
+     * inside the explorer's own node button, so it must not be interactive.
+     * Default: the label.
+     */
+    readonly renderNode?: ((node: N, context: {
+        readonly tier: ExplorerTier;
+        readonly selected: boolean;
+        readonly dimmed: boolean;
+    }) => ReactNode) | undefined;
+    /** A node's accessible name. Default: its label, then `labels.inGroup(group)` for each group. */
+    readonly nodeAriaLabel?: ((node: N, context: {
+        readonly groups: readonly ExplorerGroup[];
+    }) => string) | undefined;
+    /** On-screen widths, in CSS pixels, at which a node becomes a summary and then rich. Default 56 and 200. */
+    readonly tiers?: ExplorerTiers | undefined;
+    /** The most node elements mounted at once, before pins. Default 200. */
+    readonly maxOverlayNodes?: number | undefined;
+    /** What draws the nodes that have no element. Default: the SVG base. Experimental. */
+    readonly base?: ExplorerBase | undefined;
+    readonly className?: string | undefined;
+    /**
+     * Sizing and decoration pass through: `{ height: 600 }` replaces
+     * `--dagr-explorer-height`. `position` and `overflow` stay the viewport's
+     * own, because the graph needs them.
+     */
+    readonly style?: CSSProperties | undefined;
+    /**
+     * Overlays positioned against the graph, such as `ExplorerDetails`. They
+     * share a positioned stage with the graph, and the hint comes after it.
+     */
+    readonly children?: ReactNode;
+}
+export declare function ExplorerViewport<N extends ExplorerNode = ExplorerNode, E extends ExplorerEdge = ExplorerEdge>(props: ExplorerViewportProps<N>): ReactElement;
+//# sourceMappingURL=explorer-viewport.d.ts.map

package/dist/explorer-viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"explorer-viewport.d.ts","sourceRoot":"","sources":["../src/explorer-viewport.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAwB,MAAM,WAAW,CAAC;AAIpE,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAgB,MAAM,YAAY,CAAC;AAE1F,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEpE,sDAAsD;AACtD,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY;IAC1E;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAChB,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE;QAAE,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC;QAAC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAA;KAAE,KAAK,SAAS,CAAC,GACxH,SAAS,CAAC;IACd,iGAAiG;IACjG,QAAQ,CAAC,aAAa,CAAC,EACnB,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE;QAAE,QAAQ,CAAC,MAAM,EAAE,SAAS,aAAa,EAAE,CAAA;KAAE,KAAK,MAAM,CAAC,GAC7E,SAAS,CAAC;IACd,4GAA4G;IAC5G,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAC3C,wEAAwE;IACxE,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9C,sFAAsF;IACtF,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AA6CD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAAE,CAAC,SAAS,YAAY,GAAG,YAAY,EAC3G,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC9B,YAAY,CA8Dd"}

package/dist/explorer-viewport.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `ExplorerViewport`: the graph surface, wired to the root.
+ *
+ * It is the internal `ViewportSurface` with its props filled from the root:
+ * the active view and its layout, the selection, the dimming, and the
+ * activation callbacks (a click inspects, a double click flies to the node).
+ * The camera controls and the camera source go back up to the root, so
+ * `ExplorerApi`'s camera methods and the toolbar's readout reach them.
+ *
+ * **One per root, counted in an effect.** The viewport registers with its
+ * root in an effect with cleanup, and the second registration throws.
+ * Counting in render would misfire under StrictMode's double render, and
+ * when Suspense keeps an old tree alive beside a new one.
+ *
+ * **A view switch remounts the surface,** keyed by view id. That is the
+ * camera reset the spec asks of a switch: a new surface fits its layout on
+ * its first measure, with no flight from a camera framed on other content.
+ *
+ * **The surface renders only for what it shows.** It is memoized, and given
+ * only the state it draws (the view, the layout, the selection, the dimming)
+ * and the root's stable methods, so a keystroke that changes neither the
+ * dimming nor the selection does not render the graph.
+ *
+ * **A stage for overlays.** The surface sits in a positioned element with
+ * the part's children, such as `ExplorerDetails`, which position against it.
+ * The hint, the graph's description, comes after the stage, so an overlay
+ * never covers it.
+ */
+import { memo, useEffect, useId, useRef } from 'react';
+import { useExplorerApiContext, useExplorerContext } from './context.js';
+import { ViewportSurface } from './viewport-surface.js';
+/**
+ * One surface for one view, attached to the root's camera hub while it lives.
+ * Memoized: every prop is stable unless what it draws changes.
+ */
+const ViewportPane = memo(function ViewportPane(props) {
+    const { api, internals, describedBy, ...rest } = props;
+    const sourceRef = useRef(null);
+    // The surface's own effects have run by now, so its source is in the ref.
+    useEffect(() => {
+        const source = sourceRef.current;
+        return source === null ? undefined : internals.camera.attach(source);
+    }, [internals]);
+    return (_jsx(ViewportSurface, { ...rest, onNodeActivate: (id, trigger) => api.inspect(id, trigger), onNodeZoom: (id) => api.focusNode(id), controlsRef: internals.controlsRef, cameraSourceRef: sourceRef, describedBy: describedBy }));
+});
+const STAGE = { position: 'relative' };
+export function ExplorerViewport(props) {
+    const { children, ...rest } = props;
+    const { state, internals } = useExplorerContext('ExplorerViewport');
+    const api = useExplorerApiContext('ExplorerViewport');
+    const describedBy = useId();
+    useEffect(() => internals.registerViewport(), [internals]);
+    // The part's type parameters are a claim about the root's data. See context.ts.
+    const view = state.activeView;
+    const { layout, labels } = state;
+    const empty = view === null || layout === null || view.nodes.length === 0;
+    // One shape for both states, so the stage and its children survive a view
+    // that empties and fills again.
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-dagr-explorer": "stage", style: STAGE, children: [empty ? (_jsx("div", { "data-dagr-explorer": "viewport", "data-empty": "true", role: "region", "aria-label": state.label, className: rest.className, style: {
+                            position: 'relative',
+                            height: 'var(--dagr-explorer-height, 480px)',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            ...rest.style,
+                        }, children: view === null ? labels.noViews : labels.emptyView })) : (_jsx(ViewportPane, { ...rest, label: state.label, inGroup: labels.inGroup, view: view, layout: layout, selectedId: state.selectedId, dimmed: state.dimmed, api: api, internals: internals, describedBy: describedBy }, view.id)), children] }), empty ? null : (_jsxs("p", { id: describedBy, "data-dagr-explorer": "hint", children: [_jsx("span", { children: labels.stats({ nodes: view.nodes.length, edges: view.edges.length }) }), ' ', _jsx("span", { children: labels.hint })] }))] }));
+}
+//# sourceMappingURL=explorer-viewport.js.map

package/dist/explorer-viewport.js.map

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

package/dist/explorer-views.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `ExplorerViews`: the view switcher. It renders nothing for a single view,
+ * slot or not, because there is nothing to switch to.
+ *
+ * The default is a group of buttons, the active one `aria-pressed`. Buttons
+ * rather than tabs: tabs promise arrow-key movement and a tab panel, and the
+ * panel here is the whole explorer.
+ */
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import type { ExplorerEdge, ExplorerNode, ExplorerView } from './types.js';
+/** What the switcher's slot receives. */
+export interface ExplorerViewsContext<N extends ExplorerNode = ExplorerNode, E extends ExplorerEdge = ExplorerEdge> {
+    readonly views: readonly ExplorerView<N, E>[];
+    readonly activeView: ExplorerView<N, E>;
+    readonly selectView: (id: string) => void;
+}
+export interface ExplorerViewsProps<N extends ExplorerNode = ExplorerNode, E extends ExplorerEdge = ExplorerEdge> {
+    /** The switcher's content. Default: a button per view. */
+    readonly children?: ((context: ExplorerViewsContext<N, E>) => ReactNode) | undefined;
+    readonly className?: string | undefined;
+    readonly style?: CSSProperties | undefined;
+}
+export declare function ExplorerViews<N extends ExplorerNode = ExplorerNode, E extends ExplorerEdge = ExplorerEdge>(props: ExplorerViewsProps<N, E>): ReactElement | null;
+//# sourceMappingURL=explorer-views.d.ts.map

package/dist/explorer-views.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"explorer-views.d.ts","sourceRoot":"","sources":["../src/explorer-views.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE3E,yCAAyC;AACzC,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAAE,CAAC,SAAS,YAAY,GAAG,YAAY;IAChH,QAAQ,CAAC,KAAK,EAAE,SAAS,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAC9C,QAAQ,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACxC,QAAQ,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAAE,CAAC,SAAS,YAAY,GAAG,YAAY;IAC9G,0DAA0D;IAC1D,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IACrF,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CAC5C;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAAE,CAAC,SAAS,YAAY,GAAG,YAAY,EACxG,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC9B,YAAY,GAAG,IAAI,CA+BrB"}

package/dist/explorer-views.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useExplorerContext } from './context.js';
+export function ExplorerViews(props) {
+    const { children, className, style } = props;
+    const { state } = useExplorerContext('ExplorerViews');
+    // The part's type parameters are a claim about the root's data. See context.ts.
+    const views = state.views;
+    const activeView = state.activeView;
+    if (views.length < 2 || activeView === null)
+        return null;
+    if (children !== undefined) {
+        return (_jsx("div", { "data-dagr-explorer": "views", className: className, style: style, children: children({ views, activeView, selectView: state.selectView }) }));
+    }
+    return (_jsx("div", { "data-dagr-explorer": "views", role: "group", "aria-label": state.labels.views, className: className, style: style, children: views.map((view) => (_jsx("button", { type: "button", "data-view-id": view.id, "aria-pressed": view.id === activeView.id, onClick: () => state.selectView(view.id), children: view.label }, view.id))) }));
+}
+//# sourceMappingURL=explorer-views.js.map

package/dist/explorer-views.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"explorer-views.js","sourceRoot":"","sources":["../src/explorer-views.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAiBlD,MAAM,UAAU,aAAa,CAC3B,KAA+B;IAE/B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC7C,MAAM,EAAE,KAAK,EAAE,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACtD,gFAAgF;IAChF,MAAM,KAAK,GAAG,KAAK,CAAC,KAAiD,CAAC;IACtE,MAAM,UAAU,GAAG,KAAK,CAAC,UAAuC,CAAC;IACjE,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,UAAU,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAEzD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,OAAO,CACL,oCAAwB,OAAO,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,YAC/D,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,GAC1D,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,oCAAwB,OAAO,EAAC,IAAI,EAAC,OAAO,gBAAa,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,YAC5G,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,iBAEE,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,EAAE,kBACP,IAAI,CAAC,EAAE,KAAK,UAAU,CAAC,EAAE,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,YAEvC,IAAI,CAAC,KAAK,IANN,IAAI,CAAC,EAAE,CAOL,CACV,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}