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

package/dist/dom.js

@@ -0,0 +1,269 @@
+/** Kept in step with LOC_TAG in @fluixi/dom's runtime.ts. */
+const LOC_TAG = '__fx_loc';
+/** The position the runtime stamped on an element, when there is one. */
+function locationOf(element) {
+    return element[LOC_TAG];
+}
+/** Elements described per tag. Caps how large a snapshot can get. */
+export const DOM_BUDGET = 200;
+/**
+ * Static attributes only: a class computed at runtime is not in the source.
+ *
+ * Written out rather than spread-and-join. This runs once per element of the page on every
+ * sample, and building three throwaway arrays to read at most two class names cost more
+ * than everything else the walk does.
+ */
+export function describeElement(element) {
+    let out = element.tagName.toLowerCase();
+    if (element.id)
+        out += `#${element.id}`;
+    const classes = element.classList;
+    if (classes.length > 0) {
+        out += `.${classes[0]}`;
+        if (classes.length > 1)
+            out += `.${classes[1]}`;
+    }
+    return out;
+}
+/**
+ * Describe what every tag rendered, in one pass.
+ *
+ * Per-tag would rebuild the element maps each time, which is enough work to stall a render
+ * loop on a page of any size.
+ */
+export function describeAll(graph, 
+/** What a tag returned. Must not fall back to anything, or two tags claim one element. */
+roots, 
+/** Where a value writes. */
+writtenBy, kinds, 
+/** What plugins attached to an element, when any did. */
+extraFor) {
+    const owners = new Map();
+    const writers = new Map();
+    const rendered = new Map();
+    for (const node of graph.values()) {
+        if (kinds.has(node.kind)) {
+            const found = roots(node.id);
+            rendered.set(node.id, found);
+            for (const element of found)
+                if (!owners.has(element))
+                    owners.set(element, node.id);
+            continue;
+        }
+        for (const element of writtenBy(node.id)) {
+            const held = writers.get(element);
+            if (held)
+                held.push(node.id);
+            else
+                writers.set(element, [node.id]);
+        }
+    }
+    const { claimed, containers } = claimOrphans(graph, rendered, writtenBy, kinds, owners);
+    const claims = new Map();
+    for (const [element, id] of claimed) {
+        const held = claims.get(id);
+        if (held)
+            held.push(element);
+        else
+            claims.set(id, [element]);
+    }
+    const landing = landings(graph, rendered, writtenBy, kinds, claimed, containers);
+    const out = new Map();
+    for (const node of graph.values()) {
+        if (!kinds.has(node.kind))
+            continue;
+        const budget = { left: DOM_BUDGET };
+        const walk = (element) => {
+            const owner = owners.get(element) ?? claimed.get(element);
+            // Another tag starts here, so stop. Its DOM goes under its own row.
+            const where = locationOf(element);
+            if (owner !== undefined && owner !== node.id) {
+                return { label: describeElement(element), children: [], owner, element, ...(where ? { at: where } : {}) };
+            }
+            // The element the application was mounted into. It goes above the tag rather than
+            // inside it, and what it holds is reached through the tags themselves, so the walk
+            // stops rather than describing the whole application a second time.
+            if (containers.has(element)) {
+                return { label: describeElement(element), children: [], container: true, element, ...(where ? { at: where } : {}) };
+            }
+            const children = [];
+            // Read once: `children` is live, so indexing it in the condition re-resolves the
+            // collection on every step and a parent with a thousand of them goes quadratic.
+            const kids = element.children;
+            for (let i = 0, n = kids.length; i < n && budget.left > 0; i++) {
+                budget.left -= 1;
+                children.push(walk(kids[i]));
+            }
+            const writes = writers.get(element);
+            const extra = extraFor?.(element);
+            // Only tags nested inside this one. A tag further out writes through this element on
+            // its way down, and putting it here would nest it under its own child.
+            const inside = landing.get(element)?.filter((id) => within(graph, id, node.id));
+            return {
+                label: describeElement(element),
+                children,
+                element,
+                ...(where ? { at: where } : {}),
+                ...(writes?.length ? { writes } : {}),
+                ...(inside?.length ? { inside } : {}),
+                ...(extra ? { extra } : {}),
+            };
+        };
+        out.set(node.id, [...(rendered.get(node.id) ?? []), ...(claims.get(node.id) ?? [])].map(walk));
+    }
+    return out;
+}
+/** Whether `id` sits under `ancestor` in the component nesting. */
+function within(graph, id, ancestor) {
+    const seen = new Set();
+    for (let at = graph.get(id)?.createdIn; at !== undefined && !seen.has(at); at = graph.get(at)?.createdIn) {
+        if (at === ancestor)
+            return true;
+        seen.add(at);
+    }
+    return false;
+}
+/**
+ * Where a tag that rendered nothing of its own goes: the shallowest element it writes into.
+ * A tag writes to its own insertion point and, through whatever it renders, to everything
+ * below that, so the shallowest is the one it is responsible for.
+ *
+ * Where several land on the same element only the outermost is kept, because the rest come
+ * with it as its children.
+ */
+function landings(graph, rendered, writtenBy, kinds, claimed, containers) {
+    const claimers = new Set(claimed.values());
+    const landing = new Map();
+    for (const node of graph.values()) {
+        if (!kinds.has(node.kind) || (rendered.get(node.id) ?? []).length)
+            continue;
+        if (claimers.has(node.id))
+            continue;
+        let shallowest;
+        let best = Infinity;
+        for (const element of writtenBy(node.id)) {
+            // The mount container holds the whole application; landing a tag in it would put that
+            // tag beside the root instead of under it.
+            if (containers.has(element))
+                continue;
+            const depth = depthInDocument(element);
+            if (depth < best) {
+                best = depth;
+                shallowest = element;
+            }
+        }
+        if (!shallowest)
+            continue;
+        const held = landing.get(shallowest);
+        if (held)
+            held.push(node.id);
+        else
+            landing.set(shallowest, [node.id]);
+    }
+    for (const [element, ids] of landing) {
+        landing.set(element, ids.filter((id) => !ids.some((other) => other !== id && within(graph, id, other))));
+    }
+    return landing;
+}
+/** How deep a tag sits in the component nesting, following what created it. */
+export function tagDepths(graph, kinds) {
+    const depth = new Map();
+    const of = (id, seen) => {
+        const held = depth.get(id);
+        if (held !== undefined)
+            return held;
+        if (seen.has(id))
+            return 0;
+        seen.add(id);
+        const parent = graph.get(id)?.createdIn;
+        const value = parent === undefined ? 0 : of(parent, seen) + 1;
+        depth.set(id, value);
+        return value;
+    };
+    for (const node of graph.values())
+        if (kinds.has(node.kind))
+            of(node.id, new Set());
+    return depth;
+}
+function depthInDocument(element) {
+    let steps = 0;
+    for (let at = element.parentElement; at; at = at.parentElement)
+        steps++;
+    return steps;
+}
+/**
+ * Where to put a tag that returned no element of its own, one whose body is another
+ * component, or a boundary like Suspense. What it writes into is the only evidence of where
+ * its content went.
+ *
+ * Two rules keep this from doing damage. Only elements with no owned ancestor are taken: one
+ * below an owned element is already inside that tag's tree, and claiming it there would cut
+ * the tree in half at an arbitrary point. And where several tags write to the same place, the
+ * innermost wins. Every tag on the path from the root writes through to the leaves, so the
+ * outermost is always a match and never the interesting one.
+ */
+function claimOrphans(graph, rendered, writtenBy, kinds, owners) {
+    const depth = tagDepths(graph, kinds);
+    // An element holding something a tag rendered is a wrapper the application was put into,
+    // not content a tag produced. The outermost tag writing there is the one it belongs to;
+    // for anything else it is the innermost.
+    const wraps = (element) => {
+        for (const owned of owners.keys())
+            if (element !== owned && element.contains(owned))
+                return true;
+        return false;
+    };
+    const writing = new Map();
+    for (const node of graph.values()) {
+        if (!kinds.has(node.kind) || (rendered.get(node.id) ?? []).length)
+            continue;
+        for (const element of writtenBy(node.id)) {
+            if (owners.has(element))
+                continue;
+            const held = writing.get(element);
+            if (held)
+                held.push(node.id);
+            else
+                writing.set(element, [node.id]);
+        }
+    }
+    const claimed = new Map();
+    const containers = new Set();
+    const covered = (element) => {
+        for (let at = element.parentElement; at; at = at.parentElement) {
+            if (owners.has(at) || claimed.has(at))
+                return true;
+        }
+        return false;
+    };
+    // Shallowest first, so each one is only tested against ancestors already decided.
+    const order = [...writing.keys()].sort((a, b) => depthInDocument(a) - depthInDocument(b));
+    for (const element of order) {
+        if (covered(element))
+            continue;
+        const ids = writing.get(element);
+        const container = wraps(element);
+        const pick = ids.reduce((best, id) => {
+            const a = depth.get(id) ?? 0;
+            const b = depth.get(best) ?? 0;
+            return container ? (a < b ? id : best) : a > b ? id : best;
+        });
+        claimed.set(element, pick);
+        if (container)
+            containers.add(element);
+    }
+    return { claimed, containers };
+}
+/**
+ * Drop the Elements so the result can be serialised.
+ *
+ * Everything else is copied as-is rather than field by field. The copy that describes and the
+ * copy that strips are built separately, since an extension bundles its own, so a list of fields
+ * here goes stale against a description made elsewhere, and the field just disappears.
+ */
+export function withoutElements(nodes) {
+    return nodes.map(({ element, children, ...rest }) => ({
+        ...rest,
+        children: withoutElements(children),
+    }));
+}

package/dist/export.d.ts

@@ -0,0 +1,55 @@
+/**
+ * The graph as something to paste somewhere else.
+ *
+ * A panel shows one node at a time; a bug report needs all of them at once. This is the whole
+ * graph as plain json — values, kinds, ownership, sources, what each node reaches in the
+ * document and where it is written from.
+ *
+ * Names rather than ids wherever a reader has to follow a reference: `deps: ["count"]` can be
+ * read, `deps: [3]` has to be looked up. Ids stay on the nodes, and a name shared by two nodes
+ * is disambiguated so the export is never ambiguous.
+ */
+import { type RNode } from './instrument.js';
+import type { GraphEvent } from './history.js';
+export interface ExportOptions {
+    /** How much of each value to include. */
+    limit?: number;
+    /** The history, when the host has one. */
+    events?: readonly GraphEvent[];
+    /** Says the graph was read from source rather than from a running application. */
+    fromSource?: boolean;
+}
+interface ExportedNode {
+    id: number;
+    label: string;
+    kind: string;
+    /** Absent when the framework named it — see RNode.authored. */
+    authored?: boolean;
+    value?: string;
+    runs?: number;
+    version?: number;
+    state?: string;
+    reads?: string[];
+    writes?: string[];
+    madeIn?: string;
+    source?: string;
+    declaredAt?: string;
+    usedAt?: string;
+    /** Where it reaches the document, with the line each binding was written on. */
+    updates?: string[];
+    /** Where it is written from, outside any computation. */
+    setAt?: string[];
+}
+export interface ExportedGraph {
+    t: number;
+    nodes: ExportedNode[];
+    /** Present only when the host passed a history. */
+    events?: GraphEvent[];
+    from: 'source' | 'running application';
+}
+/** The graph as a plain object. */
+export declare function exportGraph(graph: Map<number, RNode>, options?: ExportOptions): ExportedGraph;
+/** The same thing as text, indented so it can be read where it is pasted. */
+export declare function graphToJson(graph: Map<number, RNode>, options?: ExportOptions): string;
+export {};
+//# sourceMappingURL=export.d.ts.map

package/dist/export.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../src/export.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAA0B,KAAK,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAsBD,MAAM,WAAW,aAAa;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,mDAAmD;IACnD,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,IAAI,EAAE,QAAQ,GAAG,qBAAqB,CAAC;CACxC;AAED,mCAAmC;AACnC,wBAAgB,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAE,aAAkB,GAAG,aAAa,CAoDjG;AAED,6EAA6E;AAC7E,wBAAgB,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAE1F"}

package/dist/export.js

@@ -0,0 +1,90 @@
+/**
+ * The graph as something to paste somewhere else.
+ *
+ * A panel shows one node at a time; a bug report needs all of them at once. This is the whole
+ * graph as plain json — values, kinds, ownership, sources, what each node reaches in the
+ * document and where it is written from.
+ *
+ * Names rather than ids wherever a reader has to follow a reference: `deps: ["count"]` can be
+ * read, `deps: [3]` has to be looked up. Ids stay on the nodes, and a name shared by two nodes
+ * is disambiguated so the export is never ambiguous.
+ */
+import { nodeState, nodeVersion } from './instrument.js';
+import { formatValue } from './format.js';
+const at = (source) => {
+    if (!source)
+        return undefined;
+    const where = `${source.file ?? ''}:${source.line ?? ''}:${source.column ?? ''}`;
+    // Both when they differ: a template's holes share one original position.
+    const out = source.compiled;
+    const same = out?.line === source.line && out?.column === source.column;
+    return out && !same ? `${where} (out ${out.line ?? ''}:${out.column ?? ''})` : where;
+};
+/** A name, made unique when two nodes share it. */
+function naming(graph) {
+    const seen = new Map();
+    for (const node of graph.values())
+        seen.set(node.label, (seen.get(node.label) ?? 0) + 1);
+    return (id) => {
+        const node = graph.get(id);
+        if (!node)
+            return `#${id}`;
+        return (seen.get(node.label) ?? 0) > 1 ? `${node.label}#${node.id}` : node.label;
+    };
+}
+/** The graph as a plain object. */
+export function exportGraph(graph, options = {}) {
+    const limit = options.limit ?? 400;
+    const name = naming(graph);
+    const nodes = [...graph.values()].map((node) => {
+        let value = node.detail ?? node.value;
+        if (node.read) {
+            try {
+                value = formatValue(node.read(), limit);
+            }
+            catch {
+                // A reader that throws is still a node worth exporting.
+            }
+        }
+        const feeds = [...node.deps].map(name);
+        const wrote = [...node.writes].map(name);
+        const state = nodeState(node);
+        return {
+            id: node.id,
+            label: node.label,
+            kind: node.kind,
+            ...(node.authored === false ? { authored: false } : {}),
+            ...(value ? { value } : {}),
+            ...(node.runs ? { runs: node.runs } : {}),
+            // Only a node with a core has one; a static node would report a version of 0.
+            ...(node.core?.version !== undefined ? { version: nodeVersion(node) } : {}),
+            ...(state ? { state } : {}),
+            ...(feeds.length ? { reads: feeds } : {}),
+            ...(wrote.length ? { writes: wrote } : {}),
+            ...(node.createdIn !== undefined ? { madeIn: name(node.createdIn) } : {}),
+            ...(at(node.source) ? { source: at(node.source) } : {}),
+            ...(at(node.declaredAt) ? { declaredAt: at(node.declaredAt) } : {}),
+            ...(at(node.usedAt) ? { usedAt: at(node.usedAt) } : {}),
+            ...(node.targets?.length
+                ? {
+                    updates: node.targets.map((target) => {
+                        const what = target.name ? `${target.name} of ${target.element}` : target.element;
+                        const where = at(target.source);
+                        return where ? `${what} — ${where}` : what;
+                    }),
+                }
+                : {}),
+            ...(node.setAt?.length ? { setAt: node.setAt.map((s) => at(s)).filter(Boolean) } : {}),
+        };
+    });
+    return {
+        t: Date.now(),
+        from: options.fromSource ? 'source' : 'running application',
+        nodes,
+        ...(options.events?.length ? { events: [...options.events] } : {}),
+    };
+}
+/** The same thing as text, indented so it can be read where it is pasted. */
+export function graphToJson(graph, options = {}) {
+    return JSON.stringify(exportGraph(graph, options), null, 2);
+}

package/dist/float.d.ts

@@ -0,0 +1,54 @@
+/**
+ * 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.
+ */
+export interface FloatOptions {
+    /** Shown on the card's bar, and on the button that lifts it. */
+    title: string;
+    /** Where a card opens the first time. Defaults to a cascade from the top left. */
+    at?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /** Told each way round, for a host that wants to remember or relayout. */
+    onChange?: (floating: boolean) => void;
+}
+export interface Floatable {
+    readonly floating: boolean;
+    /** Lift it out, or put it back. Returns what it now is. */
+    toggle(): boolean;
+    dock(): void;
+    destroy(): void;
+}
+/** A card the reader can move and resize, with the pane's own content inside it. */
+export interface FloatCard {
+    readonly card: HTMLElement;
+    /** The bar along the top, for a title or a close button. */
+    readonly bar: HTMLElement;
+    remove(): void;
+}
+/**
+ * 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 declare function floatCard(doc: Document, title: string, at?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): FloatCard;
+export declare function makeFloatable(pane: HTMLElement, options: FloatOptions): Floatable;
+export declare const FLOAT_CSS = "\n.fx-floatable { position: relative; }\n.fx-float-btn {\n  position: absolute; top: 2px; right: 2px; z-index: 5;\n  width: 18px; height: 18px; padding: 0; line-height: 1;\n  font-size: 11px; color: var(--fx-muted, #8a90a2);\n  background: var(--fx-panel, #14161c);\n  border: 1px solid var(--fx-line, #262a35); border-radius: 4px;\n  cursor: pointer; opacity: 0; transition: opacity .12s;\n}\n.fx-floatable:hover .fx-float-btn, .fx-float-btn:focus-visible { opacity: 1; }\n.fx-float-btn:hover { color: var(--fx-accent, #5eead4); border-color: var(--fx-accent, #5eead4); }\n\n.fx-float {\n  position: fixed; z-index: 60; display: flex; flex-direction: column;\n  background: var(--fx-panel, #14161c);\n  border: 1px solid var(--fx-line, #262a35); border-radius: 8px;\n  box-shadow: 0 12px 34px rgba(0, 0, 0, .5); overflow: hidden;\n}\n.fx-float-bar {\n  display: flex; align-items: center; padding: 4px 8px; cursor: move;\n  font-size: 11px; color: var(--fx-muted, #8a90a2);\n  background: var(--fx-bg, #0f1115); border-bottom: 1px solid var(--fx-line, #262a35);\n  user-select: none;\n}\n/* The pane fills the card, whatever it was sized to in the layout it came from. */\n.fx-float > .fx-floated {\n  flex: 1; min-height: 0; width: auto; height: auto; overflow: auto;\n}\n/* Edges and corners. Thin, and over everything, so a card can be resized from whichever\n   side is reachable. */\n.fx-float-h { position: absolute; z-index: 1; }\n.fx-float-n, .fx-float-s { left: 8px; right: 8px; height: 6px; cursor: ns-resize; }\n.fx-float-e, .fx-float-w { top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }\n.fx-float-n { top: -3px; }\n.fx-float-s { bottom: -3px; }\n.fx-float-e { right: -3px; }\n.fx-float-w { left: -3px; }\n.fx-float-ne, .fx-float-nw, .fx-float-se, .fx-float-sw { width: 14px; height: 14px; }\n.fx-float-nw { top: -3px; left: -3px; cursor: nwse-resize; }\n.fx-float-ne { top: -3px; right: -3px; cursor: nesw-resize; }\n.fx-float-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }\n.fx-float-se {\n  bottom: 0; right: 0; cursor: nwse-resize;\n  background: linear-gradient(135deg, transparent 50%, var(--fx-line, #262a35) 50%);\n}\n";
+//# sourceMappingURL=float.d.ts.map

package/dist/float.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"float.d.ts","sourceRoot":"","sources":["../src/float.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AA+CH,MAAM,WAAW,YAAY;IAC3B,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,EAAE,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,2DAA2D;IAC3D,MAAM,IAAI,OAAO,CAAC;IAClB,IAAI,IAAI,IAAI,CAAC;IACb,OAAO,IAAI,IAAI,CAAC;CACjB;AAMD,oFAAoF;AACpF,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,4DAA4D;IAC5D,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC;IAC1B,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,MAAM,EACb,EAAE,CAAC,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC3D,SAAS,CAsFX;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,GAAG,SAAS,CA2EjF;AAED,eAAO,MAAM,SAAS,8mEA8CrB,CAAC"}