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

package/dist/detail-panel.js

@@ -0,0 +1,217 @@
+// One commit, with room to read it.
+//
+// A column beside the graph is the wrong shape for six before-and-after objects, so the full
+// view floats over the page, moved and resized by whoever is reading it.
+//
+// It does not block: the graph keeps updating behind it and stays clickable.
+import { changeRows, handleCopyClick, CHANGE_CSS } from './change-view.js';
+const escape = (text) => text.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+const clock = (t) => {
+    const d = new Date(t);
+    const pad = (n, w = 2) => String(n).padStart(w, '0');
+    return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`;
+};
+const VERBS = {
+    write: 'written',
+    ran: 'ran',
+    created: 'made',
+    disposed: 'gone',
+};
+/** So it cannot be resized into a sliver. */
+const MIN_W = 320;
+const MIN_H = 200;
+/**
+ * Pointer capture, for the reason the splitters need it: without it the events stop arriving
+ * when the pointer crosses the graph or an iframe, the release is never seen, and the panel
+ * keeps following the mouse.
+ */
+function draggable(handle, onMove) {
+    handle.addEventListener('pointerdown', (event) => {
+        if (event.button !== 0)
+            return;
+        // Capturing here retargets the following click onto the bar, so the button never hears
+        // it. That is why the close button did nothing.
+        if (event.target.closest('button'))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        handle.setPointerCapture(event.pointerId);
+        let lastX = event.clientX;
+        let lastY = event.clientY;
+        const move = (e) => {
+            onMove(e.clientX - lastX, e.clientY - lastY);
+            lastX = e.clientX;
+            lastY = e.clientY;
+        };
+        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);
+    });
+}
+export function createDetailPanel(host, options = {}) {
+    const panel = host.ownerDocument.createElement('div');
+    panel.className = 'dp-panel';
+    panel.hidden = true;
+    panel.innerHTML =
+        '<div class="dp-bar"><span class="dp-title"></span>' +
+            '<button type="button" class="dp-close" title="Close" aria-label="Close">✕</button></div>' +
+            '<div class="dp-body"></div>' +
+            '<div class="dp-grip" title="Drag to resize"></div>';
+    host.appendChild(panel);
+    const title = panel.querySelector('.dp-title');
+    const body = panel.querySelector('.dp-body');
+    const bar = panel.querySelector('.dp-bar');
+    const grip = panel.querySelector('.dp-grip');
+    let x = 0;
+    let y = 0;
+    let width = 520;
+    let height = 380;
+    let open = false;
+    const place = () => {
+        panel.style.left = `${Math.round(x)}px`;
+        panel.style.top = `${Math.round(y)}px`;
+        panel.style.width = `${Math.round(width)}px`;
+        panel.style.height = `${Math.round(height)}px`;
+    };
+    draggable(bar, (dx, dy) => {
+        // Clamped, or a panel dragged off the top has no bar left to drag back by.
+        const view = panel.ownerDocument.defaultView;
+        x = Math.max(0, Math.min((view?.innerWidth ?? width) - 60, x + dx));
+        y = Math.max(0, Math.min((view?.innerHeight ?? height) - 30, y + dy));
+        place();
+    });
+    draggable(grip, (dx, dy) => {
+        width = Math.max(MIN_W, width + dx);
+        height = Math.max(MIN_H, height + dy);
+        place();
+    });
+    panel.querySelector('.dp-close')?.addEventListener('click', () => close());
+    body.addEventListener('click', (e) => {
+        // Copy first: the button sits inside a row.
+        if (handleCopyClick(e))
+            return;
+        const row = e.target.closest('.dp-node');
+        if (row?.dataset.id)
+            options.onPick?.(Number(row.dataset.id));
+    });
+    function close() {
+        open = false;
+        panel.hidden = true;
+    }
+    return {
+        open(commit, graph) {
+            const nameOf = (e) => graph.get(e.id)?.label ?? e.label ?? `#${e.id}`;
+            const cause = commit.cause;
+            title.textContent = cause
+                ? `${nameOf(cause)} · ${clock(commit.t)}`
+                : `${commit.commit === 0 ? 'first render' : `commit ${commit.commit}`} · ${clock(commit.t)}`;
+            const headline = cause && cause.from !== undefined && cause.to !== undefined
+                ? `<div class="dp-change"><span class="ch-from">${escape(cause.from)}</span>` +
+                    `<span class="ch-arrow">→</span><span class="ch-to">${escape(cause.to)}</span></div>`
+                : '';
+            // Every event: this view exists because the row could not hold them all.
+            const groups = ['write', 'ran', 'created', 'disposed']
+                .map((kind) => {
+                const rows = commit.events.filter((e) => e.kind === kind && e !== cause);
+                if (!rows.length)
+                    return '';
+                const seen = new Map();
+                for (const event of rows) {
+                    const found = seen.get(event.id);
+                    if (found)
+                        found.count++;
+                    else
+                        seen.set(event.id, { name: nameOf(event), count: 1 });
+                }
+                const items = [...seen]
+                    .map(([id, { name, count }]) => `<button type="button" class="dp-node" data-id="${id}">${escape(name)}${count > 1 ? ` ×${count}` : ''}</button>`)
+                    .join('');
+                return `<div class="dp-group"><div class="dp-verb">${VERBS[kind]}</div><div class="dp-nodes">${items}</div></div>`;
+            })
+                .join('');
+            // Where the value reaches the page — the last step of the chain.
+            const node = cause ? graph.get(cause.id) : undefined;
+            // Both: a template's holes can share one original position, and then only the compiled
+            // line tells them apart.
+            const where = (t) => {
+                if (!t.source)
+                    return '';
+                const file = (t.source.file ?? '').split('/').pop() ?? '';
+                const out = t.source.compiled;
+                const tail = out && out.line !== t.source.line ? ` · out ${out.line}` : '';
+                return ` — ${file}:${t.source.line ?? ''}${tail}`;
+            };
+            const targets = node?.targets?.length
+                ? `<div class="dp-group"><div class="dp-verb">updates</div><div class="dp-targets">${node.targets
+                    .map((t) => `<div>${escape(t.name ? `${t.name} of ${t.element}` : t.element)}` +
+                    `<span class="dp-where">${escape(where(t))}</span></div>`)
+                    .join('')}</div></div>`
+                : '';
+            body.innerHTML = headline + changeRows(cause?.change) + groups + targets;
+            if (!open) {
+                // Once per opening: jumping back to the middle on every entry would be unusable.
+                const view = panel.ownerDocument.defaultView;
+                x = Math.max(12, ((view?.innerWidth ?? 900) - width) / 2);
+                y = Math.max(12, ((view?.innerHeight ?? 600) - height) / 3);
+                place();
+            }
+            open = true;
+            panel.hidden = false;
+        },
+        close,
+        get isOpen() {
+            return open;
+        },
+        destroy() {
+            panel.remove();
+        },
+    };
+}
+export const DETAIL_PANEL_CSS = `
+.dp-panel {
+  position: fixed; z-index: 40; display: flex; flex-direction: column;
+  border: 1px solid var(--fx-line, #ffffff26); border-radius: 8px;
+  background: var(--fx-panel, #14161c); color: var(--fx-label, #e7e9ee);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, .45); overflow: hidden;
+}
+.dp-panel[hidden] { display: none; }
+.dp-bar {
+  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
+  cursor: move; user-select: none;
+  border-bottom: 1px solid var(--fx-line, #ffffff1f);
+}
+.dp-title { font-family: ui-monospace, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dp-close {
+  margin-left: auto; width: 22px; height: 20px; padding: 0; cursor: pointer; font: inherit; font-size: 11px;
+  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 4px;
+  background: transparent; color: var(--fx-muted, #8a90a2);
+}
+.dp-close:hover { color: var(--fx-label, #e7e9ee); }
+.dp-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
+.dp-change { font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }
+.dp-group { margin-top: 10px; }
+.dp-verb { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--fx-muted, #8a90a2); }
+.dp-nodes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+.dp-node {
+  padding: 2px 7px; cursor: pointer; font: inherit; font-family: ui-monospace, monospace; font-size: 11px;
+  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 999px;
+  background: transparent; color: var(--fx-label, #e7e9ee);
+}
+.dp-node:hover { border-color: var(--fx-accent, #5eead4); }
+.dp-targets { margin-top: 4px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--fx-label, #e7e9ee); }
+.dp-where { color: var(--fx-muted, #8a90a2); }
+/* Bottom-right, where every desktop puts it. */
+.dp-grip {
+  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize;
+  background: linear-gradient(135deg, transparent 50%, var(--fx-line, #ffffff40) 50%);
+}
+${CHANGE_CSS}`;

package/dist/diff.d.ts

@@ -0,0 +1,31 @@
+export type ChangeOp = 'added' | 'removed' | 'changed';
+export interface ChangeEntry {
+    /** An array index as a string, or an object key. */
+    readonly key: string;
+    readonly op: ChangeOp;
+    /** Formatted, and short: a diff is a list, not a document. */
+    readonly from?: string;
+    readonly to?: string;
+    /**
+     * The two sides as JSON, for showing an object as an object and for copying it. Per entry,
+     * so the cost is one row rather than the whole value. Absent for a cycle, a function, a dom
+     * node, or anything over the cap.
+     */
+    readonly fromJson?: string;
+    readonly toJson?: string;
+}
+export interface ValueChange {
+    /** How to read `entries`: positions for an array, keys for an object, neither for a value. */
+    readonly shape: 'value' | 'array' | 'object';
+    readonly entries?: ChangeEntry[];
+    /** Set when the diff had to stop early, so a reader knows the list is not the whole of it. */
+    readonly more?: number;
+    /** Array only, and worth saying on its own: a list that grew or shrank. */
+    readonly length?: {
+        readonly from: number;
+        readonly to: number;
+    };
+}
+/** A plain value is its own diff: the entry already carries both sides. */
+export declare function diffValues(before: unknown, after: unknown): ValueChange | undefined;
+//# sourceMappingURL=diff.d.ts.map

package/dist/diff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../src/diff.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,MAAM,WAAW,WAAW;IAC1B,oDAAoD;IACpD,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAC;IACtB,8DAA8D;IAC9D,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,WAAW;IAC1B,8FAA8F;IAC9F,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACjC,8FAA8F;IAC9F,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,2EAA2E;IAC3E,QAAQ,CAAC,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;CAClE;AAyHD,2EAA2E;AAC3E,wBAAgB,UAAU,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,GAAG,WAAW,GAAG,SAAS,CAUnF"}

package/dist/diff.js

@@ -0,0 +1,132 @@
+// What changed, rather than what the value is now.
+//
+// `todos [{…}] → [{…}, {…}]` says nothing the graph did not. "One row added at index 2, here
+// it is" does. Computed at the write, while both sides are still in hand — afterwards only
+// the new value exists.
+import { formatValue } from './format.js';
+/** Enough to see what happened, few enough that a write stays cheap. */
+const MAX_ENTRIES = 24;
+/** Per side of one entry. A row of a list, not the whole row's contents. */
+const ENTRY_VALUE = 120;
+/** Past this an entry is a document rather than a row, and not worth carrying per write. */
+const ENTRY_JSON = 4000;
+const show = (value) => formatValue(value, ENTRY_VALUE);
+/** Structure only: `show` already gives the whole of a number, and a second copy of `3` helps nobody. */
+function json(value) {
+    if (value === null || typeof value !== 'object')
+        return undefined;
+    try {
+        const text = JSON.stringify(value);
+        return text && text.length <= ENTRY_JSON ? text : undefined;
+    }
+    catch {
+        // Cyclic, or a getter that threw. The formatted string still says what it is.
+        return undefined;
+    }
+}
+/** One side of an entry: what to read, and what to copy. */
+const side = (value, key) => {
+    const text = json(value);
+    return { [key]: show(value), ...(text ? { [`${key}Json`]: text } : {}) };
+};
+const isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+/**
+ * Reference first: a store hands back the same proxy for an unchanged row, so an append costs
+ * one comparison each. The shallow fallback catches rows rebuilt with the same contents.
+ */
+function same(a, b) {
+    if (Object.is(a, b))
+        return true;
+    if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null)
+        return false;
+    if (Array.isArray(a) !== Array.isArray(b))
+        return false;
+    const ka = Object.keys(a);
+    const kb = Object.keys(b);
+    if (ka.length !== kb.length)
+        return false;
+    return ka.every((k) => Object.is(a[k], b[k]));
+}
+/**
+ * Ends trimmed first. Index-against-index reports every row after an insertion as changed,
+ * which is true of the positions and useless to whoever added one row.
+ */
+function diffArray(before, after) {
+    let head = 0;
+    while (head < before.length && head < after.length && same(before[head], after[head]))
+        head++;
+    let tail = 0;
+    while (tail < before.length - head &&
+        tail < after.length - head &&
+        same(before[before.length - 1 - tail], after[after.length - 1 - tail])) {
+        tail++;
+    }
+    const entries = [];
+    let skipped = 0;
+    const push = (entry) => {
+        if (entries.length < MAX_ENTRIES)
+            entries.push(entry);
+        else
+            skipped++;
+    };
+    const removedCount = before.length - head - tail;
+    const addedCount = after.length - head - tail;
+    const overlap = Math.min(removedCount, addedCount);
+    // The overlap is a replacement in place; the remainder is the insertion or deletion.
+    for (let i = 0; i < overlap; i++) {
+        push({
+            key: String(head + i),
+            op: 'changed',
+            ...side(before[head + i], 'from'),
+            ...side(after[head + i], 'to'),
+        });
+    }
+    for (let i = overlap; i < addedCount; i++) {
+        push({ key: String(head + i), op: 'added', ...side(after[head + i], 'to') });
+    }
+    for (let i = overlap; i < removedCount; i++) {
+        push({ key: String(head + i), op: 'removed', ...side(before[head + i], 'from') });
+    }
+    return {
+        shape: 'array',
+        entries,
+        ...(skipped ? { more: skipped } : {}),
+        ...(before.length !== after.length ? { length: { from: before.length, to: after.length } } : {}),
+    };
+}
+function diffObject(before, after) {
+    const entries = [];
+    let skipped = 0;
+    const push = (entry) => {
+        if (entries.length < MAX_ENTRIES)
+            entries.push(entry);
+        else
+            skipped++;
+    };
+    for (const key of new Set([...Object.keys(before), ...Object.keys(after)])) {
+        const had = key in before;
+        const has = key in after;
+        if (had && has) {
+            if (!same(before[key], after[key])) {
+                push({ key, op: 'changed', ...side(before[key], 'from'), ...side(after[key], 'to') });
+            }
+        }
+        else if (has)
+            push({ key, op: 'added', ...side(after[key], 'to') });
+        else
+            push({ key, op: 'removed', ...side(before[key], 'from') });
+    }
+    return { shape: 'object', entries, ...(skipped ? { more: skipped } : {}) };
+}
+/** A plain value is its own diff: the entry already carries both sides. */
+export function diffValues(before, after) {
+    if (Array.isArray(before) && Array.isArray(after)) {
+        const change = diffArray(before, after);
+        return change.entries?.length || change.length ? change : undefined;
+    }
+    if (isPlainObject(before) && isPlainObject(after)) {
+        const change = diffObject(before, after);
+        return change.entries?.length ? change : undefined;
+    }
+    return undefined;
+}

package/dist/dom.d.ts

@@ -0,0 +1,81 @@
+/**
+ * A serialisable description of the DOM a tag rendered.
+ *
+ * The chrome panel reads the graph through `eval` and the editor panel over http, so neither
+ * can hold Elements. This is the same tree with the elements reduced to labels.
+ *
+ * The walk stops at any element that is another tag's root and records that tag's id in
+ * `owner`. That keeps the result a tree of the application rather than the whole document,
+ * and lets the consumer nest the child tag's own DOM under its own row.
+ */
+import type { RNode } from './instrument.js';
+export interface DomNode {
+    /** The element as a selector: `div#app.card`. */
+    label: string;
+    children: DomNode[];
+    /** The node whose root this element is, when it is one. */
+    owner?: number;
+    /**
+     * Ids of the values that write into this element. A consumer outside the page has no
+     * elements to compare, so it cannot work this out for itself.
+     */
+    writes?: number[];
+    /**
+     * Tags that render inside this element without producing one of their own, such as a boundary
+     * like Suspense, or a component whose body is another component. They sit here rather than
+     * beside the element, which is where the nesting actually puts them.
+     */
+    inside?: number[];
+    /**
+     * The element the application was mounted into. It is nobody's output, having been on the
+     * page first, so it belongs above the root tag rather than under it.
+     */
+    container?: boolean;
+    /**
+     * Where the element was written. Stamped on it by the runtime when the compiler listed
+     * the positions of a template's elements; absent in a build without source locations.
+     */
+    at?: {
+        file: string;
+        line: number;
+        column: number;
+    };
+    /** What plugins attached to this element, by plugin name. */
+    extra?: Record<string, unknown>;
+    /** Set only in-page. A description that crossed a wire has no element. */
+    element?: Element;
+}
+/** Elements described per tag. Caps how large a snapshot can get. */
+export declare 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 declare function describeElement(element: Element): string;
+/**
+ * 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 declare function describeAll(graph: Map<number, RNode>, 
+/** What a tag returned. Must not fall back to anything, or two tags claim one element. */
+roots: (of: number) => readonly Element[], 
+/** Where a value writes. */
+writtenBy: (of: number) => readonly Element[], kinds: ReadonlySet<string>, 
+/** What plugins attached to an element, when any did. */
+extraFor?: (element: Element) => Record<string, unknown> | undefined): Map<number, DomNode[]>;
+/** How deep a tag sits in the component nesting, following what created it. */
+export declare function tagDepths(graph: Map<number, RNode>, kinds: ReadonlySet<string>): Map<number, number>;
+/**
+ * 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 declare function withoutElements(nodes: readonly DomNode[]): DomNode[];
+//# sourceMappingURL=dom.d.ts.map

package/dist/dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,WAAW,OAAO;IACtB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,EAAE,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAUD,qEAAqE;AACrE,eAAO,MAAM,UAAU,MAAM,CAAC;AAE9B;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CASxD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,0FAA0F;AAC1F,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,OAAO,EAAE;AACzC,4BAA4B;AAC5B,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,OAAO,EAAE,EAC7C,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC;AAC1B,yDAAyD;AACzD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GACnE,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC,CAwExB;AAwDD,+EAA+E;AAC/E,wBAAgB,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAcpG;AAuED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,OAAO,EAAE,GAAG,OAAO,EAAE,CAKpE"}