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

package/dist/float.js

@@ -0,0 +1,256 @@
+/**
+ * Taking a pane out of the layout and putting it back.
+ *
+ * The inspector, the timeline and the tree each live in a fixed corner of the panel. Reading
+ * one of them properly means giving it room, and the room has to come from the others. So
+ * each carries a button that lifts it into a card over everything, and the same button puts
+ * it back exactly where it was.
+ *
+ * The pane element itself is moved rather than re-rendered. Whatever drew into it keeps its
+ * handle on it, its listeners, and its scroll position — a floated timeline is the same
+ * timeline, not a copy of one.
+ */
+/** So a card cannot be dragged or resized into something unreadable. */
+const MIN_W = 240;
+const MIN_H = 160;
+/**
+ * Pointer capture, for the reason the splitters need it: without it the events stop arriving
+ * once the pointer crosses the graph or an iframe, the release is never seen, and the card
+ * keeps following the mouse.
+ */
+function draggable(handle, 
+/** Total travel since the press, not the step since the last event. */
+onMove, onStart) {
+    handle.addEventListener('pointerdown', (event) => {
+        if (event.button !== 0)
+            return;
+        // Capture retargets the click that follows onto the handle, so a button inside it would
+        // never hear its own click.
+        if (event.target.closest('button'))
+            return;
+        event.preventDefault();
+        handle.setPointerCapture(event.pointerId);
+        const fromX = event.clientX;
+        const fromY = event.clientY;
+        onStart?.();
+        // Measured from where the press began. Adding up each step instead loses whatever a
+        // clamp refused, so dragging back out of a minimum grows the card immediately rather
+        // than when the pointer returns to where it stopped shrinking.
+        const move = (e) => onMove(e.clientX - fromX, e.clientY - fromY);
+        const stop = () => {
+            handle.removeEventListener('pointermove', move);
+            handle.removeEventListener('pointerup', stop);
+            handle.removeEventListener('pointercancel', stop);
+            handle.removeEventListener('lostpointercapture', stop);
+            if (handle.hasPointerCapture(event.pointerId))
+                handle.releasePointerCapture(event.pointerId);
+        };
+        handle.addEventListener('pointermove', move);
+        handle.addEventListener('pointerup', stop);
+        handle.addEventListener('pointercancel', stop);
+        handle.addEventListener('lostpointercapture', stop);
+    });
+}
+/** Enough of a cascade that two cards opened together do not sit on top of each other. */
+let opened = 0;
+/**
+ * The moving and resizing, on its own.
+ *
+ * Both a floated pane and the value pane want the same card, and writing the drag twice is
+ * how two of them end up behaving differently.
+ */
+export function floatCard(doc, title, at) {
+    const card = doc.createElement('div');
+    card.className = 'fx-float';
+    const spot = at ?? {
+        x: 60 + (opened % 4) * 28,
+        y: 60 + (opened % 4) * 28,
+        width: 360,
+        height: 280,
+    };
+    opened += 1;
+    const bar = doc.createElement('div');
+    bar.className = 'fx-float-bar';
+    const name = doc.createElement('span');
+    name.textContent = title;
+    bar.append(name);
+    card.append(bar);
+    // Kept here rather than read back from the element each move. offsetWidth is what the
+    // card ended up at, so once a size clamps, every further move measures from the clamp
+    // and the card grows when the pointer is still travelling the other way.
+    let x = spot.x;
+    let y = spot.y;
+    let w = spot.width;
+    let h = spot.height;
+    const apply = () => {
+        const view = doc.defaultView;
+        const vw = view?.innerWidth ?? w;
+        const vh = view?.innerHeight ?? h;
+        w = Math.min(Math.max(MIN_W, w), vw);
+        h = Math.min(Math.max(MIN_H, h), vh);
+        // Fully on screen: a card wider than the window puts its own resize handles past the
+        // edge, and then there is no way to make it smaller again.
+        x = Math.min(Math.max(0, x), Math.max(0, vw - w));
+        y = Math.min(Math.max(0, y), Math.max(0, vh - h));
+        card.style.left = `${x}px`;
+        card.style.top = `${y}px`;
+        card.style.width = `${w}px`;
+        card.style.height = `${h}px`;
+    };
+    // Every edge and corner, so a card against one side of the window can still be resized
+    // from the other.
+    let from = { x, y, w, h };
+    const remember = () => {
+        from = { x, y, w, h };
+    };
+    for (const edge of ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']) {
+        const handle = doc.createElement('div');
+        handle.className = `fx-float-h fx-float-${edge}`;
+        card.append(handle);
+        draggable(handle, (dx, dy) => {
+            if (edge.includes('e'))
+                w = from.w + dx;
+            if (edge.includes('s'))
+                h = from.h + dy;
+            // A top or left edge leaves the opposite one where it is, so the card only moves
+            // by as much as the size actually gave.
+            if (edge.includes('w')) {
+                w = Math.max(MIN_W, from.w - dx);
+                x = from.x + from.w - w;
+            }
+            if (edge.includes('n')) {
+                h = Math.max(MIN_H, from.h - dy);
+                y = from.y + from.h - h;
+            }
+            apply();
+        }, remember);
+    }
+    draggable(bar, (dx, dy) => {
+        x = from.x + dx;
+        y = from.y + dy;
+        apply();
+    }, remember);
+    apply();
+    return { card, bar, remove: () => card.remove() };
+}
+export function makeFloatable(pane, options) {
+    const doc = pane.ownerDocument;
+    let card = null;
+    /** Where the pane came from, so it goes back there rather than at the end. */
+    let home = null;
+    const button = doc.createElement('button');
+    button.type = 'button';
+    button.className = 'fx-float-btn';
+    button.textContent = '⇱';
+    button.title = `Float ${options.title}`;
+    pane.classList.add('fx-floatable');
+    pane.append(button);
+    /**
+     * The panes rewrite their own contents — the inspector replaces its markup whenever the
+     * selection changes — which takes the button with it. Rather than asking each of them to
+     * leave it alone, it is put back when it goes.
+     */
+    const keep = new MutationObserver(() => {
+        if (button.parentNode !== pane)
+            pane.append(button);
+    });
+    keep.observe(pane, { childList: true });
+    function dock() {
+        if (!card || !home)
+            return;
+        home.parent.insertBefore(pane, home.before);
+        card.remove();
+        card = null;
+        home = null;
+        pane.classList.remove('fx-floated');
+        button.textContent = '⇱';
+        button.title = `Float ${options.title}`;
+        options.onChange?.(false);
+    }
+    function float() {
+        if (card || !pane.parentNode)
+            return;
+        home = { parent: pane.parentNode, before: pane.nextSibling };
+        const built = floatCard(doc, options.title, options.at);
+        card = built.card;
+        card.append(pane);
+        doc.body.appendChild(card);
+        pane.classList.add('fx-floated');
+        button.textContent = '⇲';
+        button.title = `Put ${options.title} back`;
+        options.onChange?.(true);
+    }
+    button.addEventListener('click', (event) => {
+        event.stopPropagation();
+        if (card)
+            dock();
+        else
+            float();
+    });
+    return {
+        get floating() {
+            return card !== null;
+        },
+        toggle() {
+            if (card)
+                dock();
+            else
+                float();
+            return card !== null;
+        },
+        dock,
+        destroy() {
+            keep.disconnect();
+            dock();
+            button.remove();
+            pane.classList.remove('fx-floatable');
+        },
+    };
+}
+export const FLOAT_CSS = `
+.fx-floatable { position: relative; }
+.fx-float-btn {
+  position: absolute; top: 2px; right: 2px; z-index: 5;
+  width: 18px; height: 18px; padding: 0; line-height: 1;
+  font-size: 11px; color: var(--fx-muted, #8a90a2);
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 4px;
+  cursor: pointer; opacity: 0; transition: opacity .12s;
+}
+.fx-floatable:hover .fx-float-btn, .fx-float-btn:focus-visible { opacity: 1; }
+.fx-float-btn:hover { color: var(--fx-accent, #5eead4); border-color: var(--fx-accent, #5eead4); }
+
+.fx-float {
+  position: fixed; z-index: 60; display: flex; flex-direction: column;
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 8px;
+  box-shadow: 0 12px 34px rgba(0, 0, 0, .5); overflow: hidden;
+}
+.fx-float-bar {
+  display: flex; align-items: center; padding: 4px 8px; cursor: move;
+  font-size: 11px; color: var(--fx-muted, #8a90a2);
+  background: var(--fx-bg, #0f1115); border-bottom: 1px solid var(--fx-line, #262a35);
+  user-select: none;
+}
+/* The pane fills the card, whatever it was sized to in the layout it came from. */
+.fx-float > .fx-floated {
+  flex: 1; min-height: 0; width: auto; height: auto; overflow: auto;
+}
+/* Edges and corners. Thin, and over everything, so a card can be resized from whichever
+   side is reachable. */
+.fx-float-h { position: absolute; z-index: 1; }
+.fx-float-n, .fx-float-s { left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
+.fx-float-e, .fx-float-w { top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
+.fx-float-n { top: -3px; }
+.fx-float-s { bottom: -3px; }
+.fx-float-e { right: -3px; }
+.fx-float-w { left: -3px; }
+.fx-float-ne, .fx-float-nw, .fx-float-se, .fx-float-sw { width: 14px; height: 14px; }
+.fx-float-nw { top: -3px; left: -3px; cursor: nwse-resize; }
+.fx-float-ne { top: -3px; right: -3px; cursor: nesw-resize; }
+.fx-float-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
+.fx-float-se {
+  bottom: 0; right: 0; cursor: nwse-resize;
+  background: linear-gradient(135deg, transparent 50%, var(--fx-line, #262a35) 50%);
+}
+`;

package/dist/format.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A printable rendering of any value. Never throws, never leaves `[object Object]`.
+ *
+ * `limit` caps the result; what is cut ends in an ellipsis.
+ */
+export declare function formatValue(value: unknown, limit?: number): string;
+/** The short form a node card has room for. */
+export declare function shorten(text: string, limit?: number): string;
+/**
+ * The same text across lines, so a value too wide to read is readable.
+ *
+ * Works on what `formatValue` produced rather than on the value itself: a panel elsewhere
+ * has only the string. Quotes are tracked so a brace inside one is left alone.
+ */
+export declare function indentValue(text: string, pad?: string): string;
+//# sourceMappingURL=format.d.ts.map

package/dist/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../src/format.ts"],"names":[],"mappings":"AAoHA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,SAAM,GAAG,MAAM,CAQ/D;AAED,+CAA+C;AAC/C,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,SAAK,GAAG,MAAM,CAExD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,SAAO,GAAG,MAAM,CA4C5D"}

package/dist/format.js

@@ -0,0 +1,188 @@
+// Turning a live value into something a graph can print.
+//
+// Not JSON.stringify: a signal holds whatever the author put in it — a Map, a Date, a class
+// instance, a dom node, something that refers to itself, a getter that throws — and
+// stringify answers `{}`, `[object Object]` or an exception for most of that. This walks the
+// value instead, so every case has an answer and none of them is a crash.
+//
+// It is a label, not a serializer. Depth and length are capped, and what is cut says so.
+const MAX_DEPTH = 3;
+const MAX_ENTRIES = 8;
+/** A dom node, without assuming this realm's Node — an iframe's is a different class. */
+function domName(v) {
+    if (typeof v?.nodeType !== 'number' || typeof v.nodeName !== 'string')
+        return null;
+    return v.tagName ? `<${v.tagName.toLowerCase()}>` : `#${v.nodeName.toLowerCase()}`;
+}
+function fnName(v) {
+    return v.name ? `ƒ ${v.name}()` : 'ƒ';
+}
+/** The constructor's name, when it says more than "Object" would. */
+function className(v) {
+    const name = v.constructor?.name;
+    return name && name !== 'Object' ? `${name} ` : '';
+}
+function primitive(v) {
+    if (v === null)
+        return 'null';
+    switch (typeof v) {
+        case 'undefined':
+            return 'undefined';
+        case 'string':
+            return JSON.stringify(v);
+        case 'number':
+        case 'boolean':
+            return String(v);
+        case 'bigint':
+            return `${v}n`;
+        case 'symbol':
+            return v.toString();
+        case 'function':
+            return fnName(v);
+        default:
+            return null;
+    }
+}
+function walk(value, depth, seen) {
+    const simple = primitive(value);
+    if (simple !== null)
+        return simple;
+    const object = value;
+    if (seen.has(object))
+        return '[circular]';
+    const dom = domName(object);
+    if (dom)
+        return dom;
+    if (object instanceof Date)
+        return Number.isNaN(object.getTime()) ? 'Invalid Date' : object.toISOString();
+    if (object instanceof RegExp)
+        return String(object);
+    if (object instanceof Error)
+        return `${object.name}: ${object.message}`;
+    if (object instanceof Promise)
+        return 'Promise';
+    if (ArrayBuffer.isView(object)) {
+        return `${className(object).trim()}(${object.length ?? ''})`;
+    }
+    if (depth >= MAX_DEPTH)
+        return Array.isArray(object) ? '[…]' : '{…}';
+    seen.add(object);
+    try {
+        if (Array.isArray(object)) {
+            const shown = object.slice(0, MAX_ENTRIES).map((item) => walk(item, depth + 1, seen));
+            if (object.length > MAX_ENTRIES)
+                shown.push('…');
+            return `[${shown.join(', ')}]`;
+        }
+        if (object instanceof Map) {
+            const shown = [];
+            for (const [k, v] of object) {
+                if (shown.length === MAX_ENTRIES) {
+                    shown.push('…');
+                    break;
+                }
+                shown.push(`${walk(k, depth + 1, seen)} => ${walk(v, depth + 1, seen)}`);
+            }
+            return `Map(${object.size}) {${shown.join(', ')}}`;
+        }
+        if (object instanceof Set) {
+            const shown = [];
+            for (const item of object) {
+                if (shown.length === MAX_ENTRIES) {
+                    shown.push('…');
+                    break;
+                }
+                shown.push(walk(item, depth + 1, seen));
+            }
+            return `Set(${object.size}) {${shown.join(', ')}}`;
+        }
+        const keys = Object.keys(object);
+        const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
+            // A getter can throw, and a proxy can refuse. Neither is worth losing the whole value.
+            let read;
+            try {
+                read = walk(object[key], depth + 1, seen);
+            }
+            catch {
+                read = '[unreadable]';
+            }
+            return `${key}: ${read}`;
+        });
+        if (keys.length > MAX_ENTRIES)
+            shown.push('…');
+        return `${className(object)}{${shown.join(', ')}}`;
+    }
+    finally {
+        seen.delete(object);
+    }
+}
+/**
+ * A printable rendering of any value. Never throws, never leaves `[object Object]`.
+ *
+ * `limit` caps the result; what is cut ends in an ellipsis.
+ */
+export function formatValue(value, limit = 240) {
+    let text;
+    try {
+        text = walk(value, 0, new Set());
+    }
+    catch {
+        text = '[unreadable]';
+    }
+    return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+/** The short form a node card has room for. */
+export function shorten(text, limit = 18) {
+    return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+/**
+ * The same text across lines, so a value too wide to read is readable.
+ *
+ * Works on what `formatValue` produced rather than on the value itself: a panel elsewhere
+ * has only the string. Quotes are tracked so a brace inside one is left alone.
+ */
+export function indentValue(text, pad = '  ') {
+    const out = [];
+    let depth = 0;
+    let quote = null;
+    let line = '';
+    const flush = () => {
+        if (line.trim())
+            out.push(pad.repeat(depth) + line.trim());
+        line = '';
+    };
+    for (let i = 0; i < text.length; i++) {
+        const c = text[i];
+        if (quote) {
+            line += c;
+            if (c === quote && text[i - 1] !== '\\')
+                quote = null;
+            continue;
+        }
+        if (c === '"' || c === "'") {
+            quote = c;
+            line += c;
+            continue;
+        }
+        if (c === '{' || c === '[') {
+            line += c;
+            flush();
+            depth++;
+            continue;
+        }
+        if (c === '}' || c === ']') {
+            flush();
+            depth = Math.max(0, depth - 1);
+            line = c;
+            continue;
+        }
+        if (c === ',') {
+            line += c;
+            flush();
+            continue;
+        }
+        line += c;
+    }
+    flush();
+    return out.join('\n');
+}

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"}