@xtyle/core 0.5.0

package/dist/elements/stat.js

@@ -0,0 +1,99 @@
+import { XtyleElement, define } from "./base.js";
+import { statHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/stat/source.generated.js";
+export class XtyleStat extends XtyleElement {
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "stat", {
+        applyIntent: () => { },
+    });
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["label", "delta", "trend", "sentiment", "caption", "size", "align", "inline"];
+    }
+    get label() {
+        return this.getAttribute("label");
+    }
+    set label(value) {
+        this.reflectString("label", value);
+    }
+    get delta() {
+        return this.getAttribute("delta");
+    }
+    set delta(value) {
+        this.reflectString("delta", value);
+    }
+    get trend() {
+        return this.getAttribute("trend") ?? "flat";
+    }
+    set trend(value) {
+        this.setAttribute("trend", value);
+    }
+    /** The color reading of the delta. Omit to derive it from `trend` (up→positive, down→negative, flat→neutral). */
+    get sentiment() {
+        return this.getAttribute("sentiment");
+    }
+    set sentiment(value) {
+        this.reflectString("sentiment", value);
+    }
+    get caption() {
+        return this.getAttribute("caption");
+    }
+    set caption(value) {
+        this.reflectString("caption", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "md";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get align() {
+        return this.getAttribute("align") ?? "start";
+    }
+    set align(value) {
+        this.setAttribute("align", value);
+    }
+    get inline() {
+        return this.hasAttribute("inline");
+    }
+    set inline(value) {
+        this.toggleAttribute("inline", !!value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            label: this.label,
+            delta: this.delta,
+            trend: this.trend,
+            sentiment: this.sentiment ?? undefined,
+            caption: this.caption,
+            size: this.size,
+            align: this.align,
+            inline: this.inline,
+        };
+    }
+    /** A signature of the state ops can't express incrementally: the label, delta, and caption
+     * text (each rendered into a shadow span, not patched on update), the trend (which swaps the
+     * delta's icon and is the default color signal), and the sentiment (which swaps the delta's
+     * color modifier class). Keying on the text values, not just presence, means a content-only
+     * edit forces a rebuild rather than going stale; size/align stay cheap class patches. */
+    shapeSignature() {
+        return `${this.label}|${this.delta}|${this.caption}|${this.trend}|${this.sentiment}`;
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(statHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+    }
+}
+define("xtyle-stat", XtyleStat);
+//# sourceMappingURL=stat.js.map

package/dist/elements/stat.js.map

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

package/dist/elements/statusbar.d.ts

@@ -0,0 +1,61 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+type Overflow = "clip" | "wrap" | "scroll" | "collapse";
+export declare class XtyleStatusbar extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    static get observedAttributes(): string[];
+    get live(): boolean;
+    set live(value: boolean);
+    get manualOverflow(): boolean;
+    set manualOverflow(value: boolean);
+    get label(): string | null;
+    set label(value: string | null | undefined);
+    get overflow(): Overflow;
+    set overflow(value: Overflow);
+    get separated(): boolean;
+    set separated(value: boolean);
+    private observer;
+    private hiddenEls;
+    private elementId;
+    private lastEmittedHidden;
+    private fragment;
+    attributeChangedCallback(): void;
+    disconnectedCallback(): void;
+    private get bindings();
+    /** In `separated` mode, suppress the leading divider on the first *visible* item of each
+     * run (a run being the items between spacers). Static run-starts are handled by CSS
+     * (`:first-child`, `.spacer + .item`); this keeps the rule correct when a run-start collapses. */
+    private markRuleStarts;
+    /** A signature of the state ops can't patch incrementally: the `live` role/aria-live attrs,
+     * whether an `aria-label` is present, and whether the overflow menu renders. The overflow
+     * *class* is patched on update; these structural facts force a rebuild instead. */
+    private shapeSignature;
+    private get menu();
+    private get overflowPopover();
+    private get bar();
+    private get defaultSlot();
+    private slotElements;
+    private cellsFrom;
+    private restoreAll;
+    private setMenuLabel;
+    private fillPopover;
+    private fits;
+    private recompute;
+    private emitOverflowChange;
+    private sameAsLastEmitted;
+    private teardownCollapse;
+    /** The fragment paints `.xtyle-statusbar` synchronously once its fill is warm, but the very
+     * first instance on a page resolves the fill on a microtask. Defer collapse wiring until the
+     * bar exists so the first statusbar isn't left un-observed. */
+    private whenBar;
+    private observeBar;
+    private positionPopover;
+    protected template(): string;
+    /** Arms the collapse machinery once the bar exists. Runs from both `render` (the bar is present
+     * synchronously in light DOM, and once the fill is warm in shadow DOM) and `afterApply` (the
+     * first shadow-DOM instance builds its bar on a later microtask, after `render`'s one-shot
+     * `whenBar` has already given up), so a statically-authored collapsing bar arms in either mode. */
+    private armCollapse;
+    protected render(): void;
+}
+export {};
+//# sourceMappingURL=statusbar.d.ts.map

package/dist/elements/statusbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusbar.d.ts","sourceRoot":"","sources":["../../src/elements/statusbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAKjE,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AASxD,qBAAa,cAAe,SAAQ,YAAY;IAC/C,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAI,cAAc,IAAI,OAAO,CAE5B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,OAAO,EAEhC;IAED,IAAI,KAAK,IAAI,MAAM,GAAG,IAAI,CAEzB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEzC;IAED,IAAI,QAAQ,IAAI,QAAQ,CAEvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,SAAS,CAA+D;IAChF,OAAO,CAAC,iBAAiB,CAA8B;IACvD,OAAO,CAAC,QAAQ,CAGb;IAEH,wBAAwB,IAAI,IAAI;IAIhC,oBAAoB,IAAI,IAAI;IAI5B,OAAO,KAAK,QAAQ,GASnB;IAED;;sGAEkG;IAClG,OAAO,CAAC,cAAc;IAqBtB;;uFAEmF;IACnF,OAAO,CAAC,cAAc;IAKtB,OAAO,KAAK,IAAI,GAEf;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,GAAG,GAEd;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,SAAS,CAkCf;IAEF,OAAO,CAAC,kBAAkB;IAmB1B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,gBAAgB;IAUxB;;mEAE+D;IAC/D,OAAO,CAAC,OAAO;IAiBf,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,eAAe,CAWrB;IAEF,SAAS,CAAC,QAAQ,IAAI,MAAM;IAI5B;;;uGAGmG;IACnG,OAAO,CAAC,WAAW,CASjB;cAEiB,MAAM,IAAI,IAAI;CAQjC"}

package/dist/elements/statusbar.js

@@ -0,0 +1,309 @@
+import { XtyleElement, define } from "./base.js";
+import { statusbarHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/statusbar/source.generated.js";
+export class XtyleStatusbar extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["live", "label", "overflow", "manual-overflow", "separated"];
+    }
+    get live() {
+        return this.hasAttribute("live");
+    }
+    set live(value) {
+        this.reflectBoolean("live", value);
+    }
+    get manualOverflow() {
+        return this.hasAttribute("manual-overflow");
+    }
+    set manualOverflow(value) {
+        this.reflectBoolean("manual-overflow", value);
+    }
+    get label() {
+        return this.getAttribute("label");
+    }
+    set label(value) {
+        this.reflectString("label", value);
+    }
+    get overflow() {
+        return this.getAttribute("overflow") ?? "clip";
+    }
+    set overflow(value) {
+        this.setAttribute("overflow", value);
+    }
+    get separated() {
+        return this.hasAttribute("separated");
+    }
+    set separated(value) {
+        this.reflectBoolean("separated", value);
+    }
+    observer = null;
+    hiddenEls = new Set();
+    elementId = `xtyle-statusbar-${Math.random().toString(36).slice(2, 8)}`;
+    lastEmittedHidden = null;
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "statusbar", {
+        applyIntent: () => { },
+        afterApply: () => this.armCollapse(),
+    });
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    disconnectedCallback() {
+        this.teardownCollapse();
+    }
+    get bindings() {
+        return {
+            live: this.live,
+            label: this.label,
+            overflow: this.overflow,
+            manualOverflow: this.manualOverflow,
+            separated: this.separated,
+            elementId: this.elementId,
+        };
+    }
+    /** In `separated` mode, suppress the leading divider on the first *visible* item of each
+     * run (a run being the items between spacers). Static run-starts are handled by CSS
+     * (`:first-child`, `.spacer + .item`); this keeps the rule correct when a run-start collapses. */
+    markRuleStarts() {
+        if (!this.separated)
+            return;
+        let runStart = true;
+        for (const el of this.slotElements()) {
+            if (el.classList.contains("xtyle-statusbar__spacer")) {
+                runStart = true;
+                continue;
+            }
+            if (el.style.display === "none") {
+                el.removeAttribute("data-rule-start");
+                continue;
+            }
+            if (runStart) {
+                el.setAttribute("data-rule-start", "");
+                runStart = false;
+            }
+            else {
+                el.removeAttribute("data-rule-start");
+            }
+        }
+    }
+    /** A signature of the state ops can't patch incrementally: the `live` role/aria-live attrs,
+     * whether an `aria-label` is present, and whether the overflow menu renders. The overflow
+     * *class* is patched on update; these structural facts force a rebuild instead. */
+    shapeSignature() {
+        const hasMenu = this.overflow === "collapse" && !this.manualOverflow;
+        return `${this.live}|${this.label != null}|${hasMenu}`;
+    }
+    get menu() {
+        return this.root.querySelector(".xtyle-statusbar__overflow");
+    }
+    get overflowPopover() {
+        return this.root.querySelector(".xtyle-statusbar__overflow-popover");
+    }
+    get bar() {
+        return this.root.querySelector(".xtyle-statusbar");
+    }
+    get defaultSlot() {
+        return this.root.querySelector("slot:not([name])");
+    }
+    slotElements() {
+        const slot = this.root.querySelector("slot:not([name])");
+        if (slot) {
+            return slot
+                .assignedElements({ flatten: true })
+                .filter((el) => el instanceof HTMLElement);
+        }
+        // Light DOM has no `<slot>`, so cells are the bar's own children. The scaffold's overflow
+        // menu and any injected script are excluded by matching only the item/spacer classes.
+        const bar = this.bar;
+        if (!bar)
+            return [];
+        return [...bar.children].filter((el) => el instanceof HTMLElement &&
+            (el.classList.contains("xtyle-statusbar__item") ||
+                el.classList.contains("xtyle-statusbar__spacer")));
+    }
+    cellsFrom(elements) {
+        return elements
+            .filter((el) => !el.classList.contains("xtyle-statusbar__spacer"))
+            .map((el, naturalIndex) => {
+            const required = el.hasAttribute("data-required") || el.dataset.required === "true";
+            const rawPriority = el.dataset.priority;
+            const priority = required
+                ? Number.POSITIVE_INFINITY
+                : rawPriority !== undefined && rawPriority !== ""
+                    ? Number(rawPriority)
+                    : 0;
+            return { el, priority: Number.isNaN(priority) ? 0 : priority, required, naturalIndex };
+        });
+    }
+    restoreAll() {
+        for (const el of this.hiddenEls) {
+            el.style.removeProperty("display");
+            el.removeAttribute("data-xtyle-collapsed");
+        }
+        this.hiddenEls.clear();
+    }
+    setMenuLabel(count) {
+        const menu = this.menu;
+        if (!menu)
+            return;
+        const trigger = menu.querySelector(".xtyle-statusbar__overflow-trigger");
+        if (trigger)
+            trigger.textContent = `+${count}`;
+        menu.style.display = count > 0 ? "" : "none";
+        menu.setAttribute("aria-hidden", count > 0 ? "false" : "true");
+    }
+    fillPopover(dropped) {
+        const popover = this.overflowPopover;
+        if (!popover)
+            return;
+        popover.replaceChildren();
+        for (const cell of dropped) {
+            const clone = cell.el.cloneNode(true);
+            clone.style.removeProperty("display");
+            clone.removeAttribute("data-xtyle-collapsed");
+            clone.classList.add("xtyle-statusbar__overflow-item");
+            popover.append(clone);
+        }
+    }
+    fits(bar) {
+        return bar.scrollWidth <= bar.clientWidth + 1;
+    }
+    recompute = () => {
+        const bar = this.bar;
+        if (!bar || this.overflow !== "collapse")
+            return;
+        const manual = this.manualOverflow;
+        this.restoreAll();
+        if (!manual)
+            this.setMenuLabel(0);
+        const cells = this.cellsFrom(this.slotElements());
+        const dropped = [];
+        if (cells.length > 0 && !this.fits(bar)) {
+            const dropOrder = [...cells]
+                .filter((cell) => !cell.required)
+                .sort((a, b) => (a.priority - b.priority) || (b.naturalIndex - a.naturalIndex));
+            for (const cell of dropOrder) {
+                if (this.fits(bar))
+                    break;
+                cell.el.style.display = "none";
+                cell.el.setAttribute("data-xtyle-collapsed", "");
+                this.hiddenEls.add(cell.el);
+                dropped.push(cell);
+                if (!manual)
+                    this.setMenuLabel(dropped.length);
+            }
+        }
+        if (!manual && dropped.length > 0) {
+            const ordered = [...dropped].sort((a, b) => a.naturalIndex - b.naturalIndex);
+            this.fillPopover(ordered);
+        }
+        this.markRuleStarts();
+        this.emitOverflowChange(cells, dropped);
+    };
+    emitOverflowChange(cells, dropped) {
+        const hidden = [...dropped]
+            .sort((a, b) => a.naturalIndex - b.naturalIndex)
+            .map((cell) => cell.el);
+        const droppedSet = new Set(hidden);
+        const visible = cells.filter((cell) => !droppedSet.has(cell.el)).map((cell) => cell.el);
+        if (this.sameAsLastEmitted(hidden))
+            return;
+        this.lastEmittedHidden = hidden;
+        this.dispatchEvent(new CustomEvent("overflow-change", {
+            bubbles: true,
+            composed: true,
+            detail: { hidden, visible },
+        }));
+    }
+    sameAsLastEmitted(hidden) {
+        const prev = this.lastEmittedHidden;
+        if (!prev || prev.length !== hidden.length)
+            return false;
+        return prev.every((el, i) => el === hidden[i]);
+    }
+    teardownCollapse() {
+        this.observer?.disconnect();
+        this.observer = null;
+        this.overflowPopover?.removeEventListener("toggle", this.positionPopover);
+        this.defaultSlot?.removeEventListener("slotchange", this.recompute);
+        this.restoreAll();
+        for (const el of this.slotElements())
+            el.removeAttribute("data-rule-start");
+        this.lastEmittedHidden = null;
+    }
+    /** The fragment paints `.xtyle-statusbar` synchronously once its fill is warm, but the very
+     * first instance on a page resolves the fill on a microtask. Defer collapse wiring until the
+     * bar exists so the first statusbar isn't left un-observed. */
+    whenBar(run) {
+        const bar = this.bar;
+        if (bar) {
+            run(bar);
+            return;
+        }
+        const raf = typeof requestAnimationFrame === "function"
+            ? requestAnimationFrame
+            : (cb) => void queueMicrotask(cb);
+        raf(() => {
+            if (this.overflow !== "collapse" || !this.isConnected)
+                return;
+            const ready = this.bar;
+            if (ready)
+                run(ready);
+        });
+    }
+    observeBar(bar) {
+        if (typeof ResizeObserver === "undefined") {
+            this.recompute();
+            return;
+        }
+        this.observer = new ResizeObserver(() => this.recompute());
+        this.observer.observe(bar);
+        this.defaultSlot?.addEventListener("slotchange", this.recompute);
+        this.recompute();
+    }
+    positionPopover = (event) => {
+        const popover = this.overflowPopover;
+        const trigger = this.menu?.querySelector(".xtyle-statusbar__overflow-trigger");
+        if (!popover || !trigger)
+            return;
+        if (event.newState !== "open")
+            return;
+        const rect = trigger.getBoundingClientRect();
+        const width = popover.offsetWidth || 192;
+        const left = Math.max(8, Math.min(rect.right - width, window.innerWidth - width - 8));
+        const top = Math.max(8, rect.top - popover.offsetHeight - 6);
+        popover.style.left = `${Math.round(left)}px`;
+        popover.style.top = `${Math.round(top)}px`;
+    };
+    template() {
+        return "";
+    }
+    /** Arms the collapse machinery once the bar exists. Runs from both `render` (the bar is present
+     * synchronously in light DOM, and once the fill is warm in shadow DOM) and `afterApply` (the
+     * first shadow-DOM instance builds its bar on a later microtask, after `render`'s one-shot
+     * `whenBar` has already given up), so a statically-authored collapsing bar arms in either mode. */
+    armCollapse = () => {
+        this.teardownCollapse();
+        if (this.overflow !== "collapse" || !this.isConnected)
+            return;
+        this.whenBar((bar) => {
+            if (!this.manualOverflow) {
+                this.overflowPopover?.addEventListener("toggle", this.positionPopover);
+            }
+            this.observeBar(bar);
+        });
+    };
+    render() {
+        this.teardownCollapse();
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(statusbarHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+        this.armCollapse();
+    }
+}
+define("xtyle-statusbar", XtyleStatusbar);
+//# sourceMappingURL=statusbar.js.map

package/dist/elements/statusbar.js.map

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

package/dist/elements/swatch.d.ts

@@ -0,0 +1,40 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import { type SwatchSize } from "../markup/index.js";
+export declare class XtyleSwatch extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    static get observedAttributes(): string[];
+    private detailsId;
+    private detailsWired;
+    private fragment;
+    get color(): string | null;
+    set color(value: string | null | undefined);
+    get label(): string | null;
+    set label(value: string | null | undefined);
+    get value(): string | null;
+    set value(value: string | null | undefined);
+    get size(): SwatchSize;
+    set size(value: SwatchSize);
+    get interactive(): boolean;
+    set interactive(value: boolean);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get details(): boolean;
+    set details(value: boolean);
+    attributeChangedCallback(): void;
+    private showsDetails;
+    /** Flip the details popover below the chip when there's no room above (it defaults above),
+     * and clamp it horizontally so a chip near the right edge doesn't push the panel off-screen.
+     * No arrow to keep aligned, so the cross-axis is a plain inline-`left` offset from `placeOverlay`. */
+    private repositionDetails;
+    private detailRows;
+    private get bindings();
+    /** Structural state ops can't patch incrementally: the tag (`interactive` → `<button>` vs `<span>`),
+     * whether the label / value / details spans exist, and the parsed detail rows (built only on mount).
+     * A change here rebuilds; a `selected` toggle or a `color` repaint is a cheap patch. */
+    private shapeSignature;
+    private selectContext;
+    private applyIntent;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=swatch.d.ts.map

package/dist/elements/swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swatch.d.ts","sourceRoot":"","sources":["../../src/elements/swatch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAGjE,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMpE,qBAAa,WAAY,SAAQ,YAAY;IAC5C,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,SAAS,CAAoE;IACrF,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,QAAQ,CAGb;IAEH,IAAI,KAAK,IAAI,MAAM,GAAG,IAAI,CAEzB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEzC;IAED,IAAI,KAAK,IAAI,MAAM,GAAG,IAAI,CAEzB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEzC;IAED,IAAI,KAAK,IAAI,MAAM,GAAG,IAAI,CAEzB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEzC;IAED,IAAI,IAAI,IAAI,UAAU,CAErB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,UAAU,EAEzB;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,OAAO,EAE7B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,CAAC,YAAY;IAIpB;;0GAEsG;IACtG,OAAO,CAAC,iBAAiB,CAgBvB;IAEF,OAAO,CAAC,UAAU;IAOlB,OAAO,KAAK,QAAQ,GAYnB;IAED;;4FAEwF;IACxF,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,WAAW;IAOnB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAWjC"}