@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/tabs/tabs.js

@@ -1,254 +1,5 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './tabs.class.js';
+import { LyraTabs } from './tabs.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { isRtl } from '../../internal/rtl.js';
-import { nextId } from '../../internal/a11y.js';
-import { styles } from './tabs.styles.js';
-/**
- * `<lyra-tabs>` — a tab strip whose panels are direct light-DOM children,
- * each carrying `slot="<id>"` (the panel's stable id) and `label="<text>"`
- * (the tab button's text). One named `<slot>` is rendered per distinct
- * `slot` name found among the current children — a child with no `label`,
- * or a name with no matching child, simply never produces a tab.
- *
- * A tab button's *visible* content can carry a leading icon without ever
- * changing its *accessible name* (which always stays exactly `label`'s
- * text, nothing else): give a tab an extra direct-child sibling of
- * `<lyra-tabs>` carrying `slot="<id>-icon"` (that sibling's own content --
- * an inline SVG, an emoji span, a custom icon element, anything -- is
- * entirely up to the consumer). It's rendered ahead of the label inside
- * that tab's button, wrapped in an `aria-hidden="true"` part so it's
- * excluded from accessible-name computation no matter what it contains. A
- * tab with no matching `<id>-icon` sibling renders no icon wrapper at all,
- * so existing text-only tabs are completely unaffected. (A named slot,
- * rather than a second attribute holding an icon-name lookup, was chosen
- * because this library's `internal/icons.ts` is a small closed set of
- * chrome glyphs for this library's *own* components, not a public
- * name-keyed registry -- a slot lets a consumer supply an arbitrary,
- * domain-specific icon instead of being limited to that internal set.)
- *
- * Implements the WAI-ARIA APG tabs pattern with automatic activation:
- * Left/Right (swapped under RTL) move focus *and* selection together,
- * Home/End jump to the first/last enabled tab, and a roving `tabindex`
- * follows whichever tab is currently selected.
- *
- * @customElement lyra-tabs
- * @slot - Direct children with `slot="<id>" label="<text>"` (and optionally `disabled`); one becomes each tab's panel.
- * @slot <id>-icon - Optional sibling direct child supplying a tab's leading icon content; excluded from the tab button's accessible name.
- * @event lyra-tabs-change - `detail: { tabId }`, fired when the active tab changes via click or keyboard.
- * @csspart base - The root wrapper around the tablist and panels.
- * @csspart tablist - The `role="tablist"` row of tab buttons.
- * @csspart tab - A single tab button.
- * @csspart tab-icon - The optional leading-icon wrapper inside a tab button; only rendered when that tab has a matching `<id>-icon` sibling.
- * @csspart panel - A single `role="tabpanel"` wrapper (one per tab, hidden unless active).
- */
-export class LyraTabs extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** The active tab's `slot`/id. Falls back to the first enabled tab whenever the current value doesn't resolve to one. */
-        this.active = '';
-        this.tabs = [];
-        this.baseId = nextId('tabs');
-        this.nextOpaqueId = 0;
-        this.idsBySlot = new Map();
-        /** Rebuilds `tabs` from the current direct children. First child wins when two share a `slot` name (matches native slot assignment: both would render into the one panel, but only one label can back the button). */
-        this.syncTabs = () => {
-            const seen = new Set();
-            const next = [];
-            const children = Array.from(this.children);
-            for (const child of children) {
-                const slotName = child.getAttribute('slot');
-                const label = child.getAttribute('label');
-                if (!slotName || !label || seen.has(slotName))
-                    continue;
-                seen.add(slotName);
-                const iconSlot = this.iconSlotName(slotName);
-                const hasIcon = children.some((c) => c.getAttribute('slot') === iconSlot);
-                next.push({ slotName, label, disabled: child.hasAttribute('disabled'), hasIcon });
-            }
-            const liveSlots = new Set(next.map((tab) => tab.slotName));
-            for (const slotName of this.idsBySlot.keys()) {
-                if (!liveSlots.has(slotName))
-                    this.idsBySlot.delete(slotName);
-            }
-            this.tabs = next;
-        };
-        this.onTabListKeyDown = (e) => {
-            const navigable = this.tabs.filter((t) => !t.disabled);
-            if (navigable.length === 0)
-                return;
-            const currentIndex = navigable.findIndex((t) => t.slotName === this.active);
-            // Horizontal strip -- Up/Down aren't used. Left/Right swap under RTL,
-            // matching lyra-split/lyra-tree's physical-direction handling.
-            const rtl = isRtl(this);
-            const forwardKey = rtl ? 'ArrowLeft' : 'ArrowRight';
-            const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';
-            let targetIndex;
-            switch (e.key) {
-                case forwardKey:
-                    targetIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % navigable.length;
-                    break;
-                case backwardKey:
-                    targetIndex = currentIndex < 0 ? navigable.length - 1 : (currentIndex - 1 + navigable.length) % navigable.length;
-                    break;
-                case 'Home':
-                    targetIndex = 0;
-                    break;
-                case 'End':
-                    targetIndex = navigable.length - 1;
-                    break;
-                default:
-                    return;
-            }
-            e.preventDefault();
-            const target = navigable[targetIndex];
-            this.selectTab(target);
-            this.focusTab(target.slotName);
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    connectedCallback() {
-        super.connectedCallback();
-        this.syncTabs();
-        // Each child carries its own individual `slot` attribute (one named slot
-        // per tab, unlike lyra-split's single default-slot-of-many-panels) -- a
-        // brand-new tab's name has no matching `<slot>` to fire `slotchange` on
-        // until *this* component has already rendered one for it, and neither
-        // `slotchange` nor any Lit lifecycle hook observes a plain attribute
-        // edit (label/disabled) on a light-DOM child at all. A mutation observer
-        // on the host is the only thing that sees either case. `attributes: true`
-        // alone only reports mutations on the observed node itself (`this`), never
-        // on its children, so `subtree: true` is required too -- but that widens
-        // `childList`/`attributeFilter` to the *entire* descendant tree, including
-        // each panel's own projected content. A panel can legitimately churn its
-        // own children/attributes fast (a streaming log, a live JSON preview), so
-        // every record is filtered down to direct-child mutations only before
-        // triggering a resync, keeping panel-internal churn from forcing a tabs
-        // recompute and re-render on every unrelated mutation.
-        this.mutationObserver = new MutationObserver((records) => {
-            const isDirectChild = (node) => node.parentNode === this;
-            const relevant = records.some((r) => (r.type === 'childList' ? r.target === this : isDirectChild(r.target)));
-            if (relevant)
-                this.syncTabs();
-        });
-        this.mutationObserver.observe(this, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeFilter: ['slot', 'label', 'disabled'],
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.mutationObserver?.disconnect();
-        this.mutationObserver = undefined;
-    }
-    /** Keeps `active` resolved to a real, enabled tab -- covers the initial default, a tab disappearing/becoming disabled underneath the current selection, and a consumer assigning `.active` directly. Silent (no `lyra-tabs-change`): this corrects *invalid* state rather than responding to a user picking a different tab. */
-    willUpdate(changed) {
-        if (!changed.has('tabs') && !changed.has('active'))
-            return;
-        const current = this.tabs.find((t) => t.slotName === this.active);
-        if (current && !current.disabled)
-            return;
-        this.active = this.tabs.find((t) => !t.disabled)?.slotName ?? '';
-    }
-    /** Activates `tab` (no-op for a disabled tab or one that's already active) and emits `lyra-tabs-change`. */
-    selectTab(tab) {
-        if (tab.disabled || tab.slotName === this.active)
-            return;
-        this.active = tab.slotName;
-        this.emit('lyra-tabs-change', { tabId: tab.slotName });
-    }
-    /** Moves real DOM focus to tab `slotName`'s button. Safe to call immediately (no `updateComplete` wait): every tab button already exists in the DOM regardless of its current `tabindex`, and `tabindex="-1"` elements are still focusable via script. */
-    focusTab(slotName) {
-        const buttons = this.renderRoot.querySelectorAll('[part="tab"]');
-        for (const button of Array.from(buttons)) {
-            if (button.dataset.slot === slotName) {
-                button.focus();
-                return;
-            }
-        }
-    }
-    tabId(slotName) {
-        return this.idsFor(slotName).tab;
-    }
-    panelId(slotName) {
-        return this.idsFor(slotName).panel;
-    }
-    idsFor(slotName) {
-        const existing = this.idsBySlot.get(slotName);
-        if (existing)
-            return existing;
-        const token = `${this.baseId}-${this.nextOpaqueId++}`;
-        const ids = { tab: `${token}-tab`, panel: `${token}-panel` };
-        this.idsBySlot.set(slotName, ids);
-        return ids;
-    }
-    /** Derives a tab's optional icon-sibling `slot` name from its own `slotName` -- see the class doc. */
-    iconSlotName(slotName) {
-        return `${slotName}-icon`;
-    }
-    renderTab(tab) {
-        const selected = tab.slotName === this.active;
-        return html `<button
-      type="button"
-      part="tab"
-      id=${this.tabId(tab.slotName)}
-      data-slot=${tab.slotName}
-      role="tab"
-      aria-selected=${selected ? 'true' : 'false'}
-      aria-disabled=${tab.disabled ? 'true' : 'false'}
-      aria-controls=${this.panelId(tab.slotName)}
-      tabindex=${selected ? '0' : '-1'}
-      @click=${() => this.selectTab(tab)}
-    >${tab.hasIcon
-            ? html `<span part="tab-icon" aria-hidden="true"><slot name=${this.iconSlotName(tab.slotName)}></slot></span>`
-            : nothing}${tab.label}</button>`;
-    }
-    renderPanel(tab) {
-        const selected = tab.slotName === this.active;
-        return html `<div
-      part="panel"
-      id=${this.panelId(tab.slotName)}
-      role="tabpanel"
-      aria-labelledby=${this.tabId(tab.slotName)}
-      tabindex="0"
-      ?hidden=${!selected}
-    >
-      <slot name=${tab.slotName}></slot>
-    </div>`;
-    }
-    render() {
-        // Keyed by `slotName`, not a plain `.map()`: a plain array binding reuses
-        // each rendered DOM node by *position*, so removing e.g. the first tab
-        // would silently relabel the still-focused second button's DOM node into
-        // the (unfocused) third tab's button, leaving real keyboard focus stuck
-        // on a tabindex="-1"/aria-selected="false" button instead of following
-        // the tab it used to represent. Keying by identity keeps each tab's own
-        // DOM node (and any focus on it) attached to that same tab across
-        // additions/removals anywhere in the list.
-        return html `
-      <div part="base">
-        <div part="tablist" role="tablist" aria-orientation="horizontal" @keydown=${this.onTabListKeyDown}>
-          ${repeat(this.tabs, (tab) => tab.slotName, (tab) => this.renderTab(tab))}
-        </div>
-        ${repeat(this.tabs, (tab) => tab.slotName, (tab) => this.renderPanel(tab))}
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ reflect: true })
-], LyraTabs.prototype, "active", void 0);
-__decorate([
-    state()
-], LyraTabs.prototype, "tabs", void 0);
 defineElement('tabs', LyraTabs);
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC"}

package/dist/components/tabs/tabs.styles.d.ts

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=tabs.styles.d.ts.map

package/dist/components/tabs/tabs.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8ElB,CAAC"}

package/dist/components/tabs/tabs.styles.js

@@ -12,8 +12,9 @@ export const styles = css `
     display: flex;
     align-items: stretch;
     gap: var(--lyra-space-m);
-    border-block-end: 1px solid var(--lyra-color-border);
+    border-block-end: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     overflow-x: auto;
+    overflow-y: hidden;
   }
   [part='tab'] {
     appearance: none;
@@ -21,11 +22,11 @@ export const styles = css `
     border: none;
     /* Sits directly over the tablist's own border-block-end so the accent
        underline below replaces it, pixel for pixel, when selected. */
-    border-block-end: 2px solid transparent;
-    margin-block-end: -1px;
+    border-block-end: var(--lyra-border-width-medium) solid transparent;
+    margin-block-end: var(--lyra-size-neg-1px);
     padding: var(--lyra-space-s) var(--lyra-space-xs);
     font: inherit;
-    font-weight: 500;
+    font-weight: var(--lyra-font-weight-medium);
     color: var(--lyra-color-text-quiet);
     cursor: pointer;
     white-space: nowrap;
@@ -71,4 +72,10 @@ export const styles = css `
     outline-offset: var(--lyra-focus-ring-offset);
     border-radius: var(--lyra-radius);
   }
+  @media (prefers-reduced-motion: reduce) {
+    [part='tab'] {
+      transition: none !important;
+    }
+  }
 `;
+//# sourceMappingURL=tabs.styles.js.map

package/dist/components/tabs/tabs.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.styles.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ExB,CAAC"}

package/dist/components/thinking-panel/thinking-panel.class.d.ts

@@ -0,0 +1,124 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type ThinkingPanelMode = 'live' | 'post-hoc';
+export interface ThinkingPanelToggleDetail {
+    expanded: boolean;
+}
+/**
+ * `<lyra-thinking-panel>` — a collapsible panel for an AI agent's
+ * intermediate reasoning/"thinking" transcript, kept visually and
+ * semantically distinct from its final response. Same collapsible
+ * header-button-plus-region shape as `<lyra-source-list>`; the default slot
+ * is entirely free-form (a consumer-composed `<lyra-streaming-text>`,
+ * `<lyra-markdown>`, or plain text) — this component has no dependency on
+ * either and imposes no structure on what's slotted.
+ *
+ * `mode` (`'live'` while reasoning is actively streaming in, `'post-hoc'`
+ * once it's complete and being reviewed after the fact) drives two concrete
+ * behavior differences, not just a styling hook:
+ * - **Header hint.** While `duration-ms` is unset, `'live'` shows a pulsing
+ *   "Thinking…" placeholder in `[part="duration"]`; `'post-hoc'` shows
+ *   nothing there instead (a finished review with no known duration has
+ *   nothing useful to say in that slot). Once `duration-ms` is set, both
+ *   modes show the same static `"Thought for …"` text — a `'post-hoc'`
+ *   consumer that captured a duration is free to supply it too.
+ * - **Auto-scroll.** Only `'live'` mode auto-follows new content appended to
+ *   the default slot while `expanded` (see below); `'post-hoc'` never
+ *   scrolls on its own, since reviewing finished reasoning is expected to
+ *   start from the top like reading any other completed document. This
+ *   library otherwise defaults to *not* editorializing about a host's data
+ *   (see `<lyra-empty>`'s plain-`description` stance), but scroll position
+ *   is presentation, not data, so this one behavior difference earns its
+ *   keep rather than being left as a bare visual/semantic hint the host
+ *   would have to reimplement identically itself.
+ *
+ * Live-mode auto-scroll ("stick to bottom") is the classic chat-transcript
+ * convention: while `mode="live"` and `expanded`, new content keeps the
+ * panel scrolled to its latest line — *unless* the user has manually
+ * scrolled up to (re-)read earlier content, in which case their position is
+ * never yanked away from them. This is tracked continuously via a `scroll`
+ * listener on `[part="body"]` (not recomputed from the mutation itself,
+ * which necessarily observes the DOM only *after* it has already changed):
+ * every user-driven scroll records whether the body was left within
+ * `NEAR_BOTTOM_PX` of its own max scroll position, and only a mutation that
+ * arrives while that's still true triggers a follow-up scroll-to-bottom.
+ * Opening an already-`'live'` panel (or one that later becomes `'live'`)
+ * always resets this to "anchored" and jumps to the latest content, the same
+ * way a chat app's own transcript does when you re-open it.
+ *
+ * New content is detected via a `MutationObserver` on this element's own
+ * light DOM (`childList`+`subtree`+`characterData`) rather than the default
+ * slot's `slotchange` event, because `slotchange` only fires when the set of
+ * top-level assigned nodes changes — never for a text node mutating *inside*
+ * an already-slotted element, which is the more likely shape for streamed
+ * reasoning (a consumer appending chunks to an existing node's `textContent`
+ * rather than re-slotting a whole new element per token). The one thing this
+ * can't see is a mutation entirely inside a slotted custom element's own
+ * shadow root (e.g. a `<lyra-markdown>` re-rendering its shadow tree after a
+ * `content` property change) — Shadow DOM encapsulation blocks that by
+ * design, and there is no way for this component to reach across that
+ * boundary. A slotted element whose *own* internal updates should drive this
+ * panel's auto-scroll needs to append/mutate visible light-DOM text itself
+ * (as `<lyra-streaming-text>` is expected to), or the host can call this
+ * panel's own `scrollToBottom()` directly.
+ *
+ * `aria-controls` linking the header to the body region uses `nextId()`
+ * (`../../internal/a11y.js`) for a collision-safe id, the same convention
+ * `<lyra-source-list>` and `<lyra-widget>` already establish for every
+ * toggle-controls-region pairing in this library.
+ *
+ * @customElement lyra-thinking-panel
+ * @slot - The reasoning/thinking content.
+ * @event lyra-toggle - The header was activated, expanding or collapsing the
+ * panel. `detail: { expanded }` — same event name and shape as
+ * `<lyra-source-list>`'s own `lyra-toggle`.
+ * @csspart base - The outer container.
+ * @csspart header - The clickable header (`<button>`) toggling `expanded`.
+ * @csspart label - The `label` text.
+ * @csspart duration - The formatted duration / "Thinking…" placeholder, when shown.
+ * @csspart toggle - The chevron indicator inside the header.
+ * @csspart body - The wrapper around the default slot, `hidden` while
+ * collapsed. Independently keyboard-focusable (`tabindex="0"`, `role="group"`
+ * named from `label`) since it's its own capped-height scrollable region.
+ */
+export declare class LyraThinkingPanel extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Header text. */
+    label: string;
+    /** Whether the reasoning transcript is currently shown. Starts collapsed,
+     *  matching `<lyra-source-list>`'s default -- a consumer running `'live'`
+     *  reasoning sets this `true` itself to stream it in view as it arrives. */
+    expanded: boolean;
+    /** `'live'` while reasoning is actively streaming in right now; `'post-hoc'`
+     *  once it's complete and being reviewed after the fact. See the class doc
+     *  for the concrete behavior differences this drives. */
+    mode: ThinkingPanelMode;
+    /** How long the reasoning took, in milliseconds, once known. Omitted
+     *  entirely (nothing rendered in `'post-hoc'`, a pulsing placeholder in
+     *  `'live'`) while unset. */
+    durationMs?: number;
+    private readonly bodyId;
+    private contentObserver?;
+    private scrollRafId?;
+    private stickToBottom;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    /** Scrolls the body to its current bottom immediately (no smooth-scroll
+     *  animation, deliberately -- see onContentMutated()'s rAF-coalescing
+     *  comment for why an instant jump reads better than a stack of competing
+     *  smooth scrolls under a fast token stream). Safe to call directly, e.g.
+     *  from a host that wants to force a jump-to-latest action of its own. */
+    scrollToBottom(): void;
+    private onScroll;
+    private onContentMutated;
+    private toggle;
+    private get durationDisplay();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-thinking-panel': LyraThinkingPanel;
+    }
+}
+//# sourceMappingURL=thinking-panel.class.d.ts.map

package/dist/components/thinking-panel/thinking-panel.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thinking-panel.class.d.ts","sourceRoot":"","sources":["../../../src/components/thinking-panel/thinking-panel.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAK7D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpD,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAsBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,MAAM,CAAC,MAAM,iCAAgC;IAE7C,mBAAmB;IACP,KAAK,SAAc;IAE/B;;gFAE4E;IAChC,QAAQ,UAAS;IAE7D;;6DAEyD;IAC5B,IAAI,EAAE,iBAAiB,CAAU;IAE9D;;iCAE6B;IACyB,UAAU,CAAC,EAAE,MAAM,CAAC;IAE1E,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAiC;IAExD,OAAO,CAAC,eAAe,CAAC,CAAmB;IAC3C,OAAO,CAAC,WAAW,CAAC,CAAS;IAO7B,OAAO,CAAC,aAAa,CAAQ;IAE7B,iBAAiB,IAAI,IAAI,CAQxB;IAED,oBAAoB,IAAI,IAAI,CAQ3B;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAU/C;IAED;;;;8EAI0E;IAC1E,cAAc,IAAI,IAAI,CAIrB;IAED,OAAO,CAAC,QAAQ,CAGd;IAEF,OAAO,CAAC,gBAAgB,CAgBtB;IAEF,OAAO,CAAC,MAAM,CAGZ;IAEF,OAAO,KAAK,eAAe,GAK1B;IAWD,MAAM,IAAI,cAAc,CAiCvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}