@aceshooting/lyra-ui 4.1.0 → 5.0.0

package/dist/components/layout/app-rail/app-rail-item.class.js

@@ -0,0 +1,147 @@
+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 { LyraElement } from '../../../internal/lyra-element.js';
+import { safeLinkHref } from '../../../internal/safe-url.js';
+import { place } from '../../../internal/positioner.js';
+import { rtlAwarePlacement } from '../../../internal/rtl.js';
+import { styles } from './app-rail-item.styles.js';
+/**
+ * `<lr-app-rail-item>` — an explicit icon/label navigation item for
+ * `<lr-app-rail>`. The rail sets its `icon-only` attribute as the viewport
+ * changes, keeping the label available to assistive technology while removing
+ * it from the visual layout.
+ *
+ * @customElement lr-app-rail-item
+ * @slot - The visible navigation label.
+ * @slot icon - The leading icon.
+ * @csspart base - The link or button receiving focus and activation.
+ * @csspart icon - The icon wrapper.
+ * @csspart label - The label wrapper; visually clipped in icon-only mode.
+ * @csspart tooltip - The hover/focus label flyout, only rendered while `tooltip` is set, the item
+ *   is `icon-only`, and it is hovered or focused.
+ */
+export class LyraAppRailItem extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Optional destination. Without `href`, the item renders as a button. */
+        this.href = '';
+        /** Optional link target. */
+        this.target = '';
+        /** Prevents activation while retaining the item in the rail. */
+        this.disabled = false;
+        /** Marks this as the destination for the current page/view. Reflects
+         *  `aria-current="page"` on `[part="base"]` and drives the active visual
+         *  treatment -- the rail has no built-in routing, so the consumer sets
+         *  this per item (e.g. by comparing `href` against the current location). */
+        this.active = false;
+        /** Opt-in hover/focus flyout showing this item's label text while `icon-only` (set externally by
+         *  the parent `<lr-app-rail>` as the viewport narrows) hides it from view -- an explicit,
+         *  documented property instead of an unverified cross-browser `::part()` + `::after` + `attr()`
+         *  composition. No effect outside icon-only mode, since the label is already visible there.
+         *  `false` (the default) reproduces today's exact output. */
+        this.tooltip = false;
+        this.showTooltip = false;
+        this.onFocusShow = () => {
+            if (this.tooltip && this.hasAttribute('icon-only'))
+                this.showTooltip = true;
+        };
+        this.onBlurHide = () => {
+            this.showTooltip = false;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    // Only the default slot's own content counts toward the tooltip text --
+    // text incidentally living inside the (decorative) `icon` slot shouldn't
+    // leak into the flyout label. Mirrors `lr-chip`'s `labelText` getter.
+    get labelText() {
+        return Array.from(this.childNodes)
+            .filter((n) => (n.nodeType === Node.TEXT_NODE || n instanceof Element) &&
+            !(n instanceof Element && n.getAttribute('slot') === 'icon'))
+            .map((n) => n.textContent ?? '')
+            .join('')
+            .trim();
+    }
+    get tooltipText() {
+        return this.getAttribute('aria-label') || this.labelText || '';
+    }
+    updated(changed) {
+        if (changed.has('showTooltip')) {
+            this.stopPositioning?.();
+            this.stopPositioning = undefined;
+            if (this.showTooltip) {
+                const anchor = this.renderRoot.querySelector('[part="base"]');
+                const popup = this.renderRoot.querySelector('[part="tooltip"]');
+                // 'right' is a physical Floating UI placement -- resolve it through the
+                // shared RTL helper (mirrors lr-menu's identical resolution) so the
+                // flyout still anchors to the rail item's trailing edge (away from the
+                // rail) rather than staying pinned to the physical right under RTL.
+                if (anchor && popup)
+                    this.stopPositioning = place(anchor, popup, { placement: rtlAwarePlacement('right', this) });
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stopPositioning?.();
+    }
+    render() {
+        const label = this.getAttribute('aria-label');
+        const href = safeLinkHref(this.href);
+        const content = html `
+      <span part="icon" aria-hidden="true"><slot name="icon"></slot></span>
+      <span part="label"><slot></slot></span>
+      ${this.showTooltip ? html `<span part="tooltip" role="tooltip">${this.tooltipText}</span>` : nothing}
+    `;
+        if (href && !this.disabled) {
+            return html `<a
+        part="base"
+        href=${href}
+        target=${this.target || nothing}
+        rel=${this.target ? 'noopener noreferrer' : nothing}
+        aria-label=${label || nothing}
+        aria-current=${this.active ? 'page' : nothing}
+        @mouseenter=${this.onFocusShow}
+        @mouseleave=${this.onBlurHide}
+        @focus=${this.onFocusShow}
+        @blur=${this.onBlurHide}
+      >${content}</a>`;
+        }
+        return html `<button
+      part="base"
+      type="button"
+      ?disabled=${this.disabled}
+      aria-disabled=${this.disabled ? 'true' : nothing}
+      aria-label=${label || nothing}
+      aria-current=${this.active ? 'page' : nothing}
+      @mouseenter=${this.onFocusShow}
+      @mouseleave=${this.onBlurHide}
+      @focus=${this.onFocusShow}
+      @blur=${this.onBlurHide}
+    >${content}</button>`;
+    }
+}
+__decorate([
+    property()
+], LyraAppRailItem.prototype, "href", void 0);
+__decorate([
+    property()
+], LyraAppRailItem.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraAppRailItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraAppRailItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraAppRailItem.prototype, "tooltip", void 0);
+__decorate([
+    state()
+], LyraAppRailItem.prototype, "showTooltip", void 0);
+//# sourceMappingURL=app-rail-item.class.js.map

package/dist/components/layout/app-rail/app-rail-item.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-rail-item.class.js","sourceRoot":"","sources":["../../../../src/components/layout/app-rail/app-rail-item.class.ts"],"names":[],"mappings":"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"}

package/dist/components/layout/app-rail/app-rail-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-rail-item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/app-rail/app-rail-item.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/dist/components/layout/app-rail/app-rail-item.js

@@ -0,0 +1,5 @@
+export * from './app-rail-item.class.js';
+import { LyraAppRailItem } from './app-rail-item.class.js';
+import { defineElement } from '../../../internal/prefix.js';
+defineElement('app-rail-item', LyraAppRailItem);
+//# sourceMappingURL=app-rail-item.js.map

package/dist/components/layout/app-rail/app-rail-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-rail-item.js","sourceRoot":"","sources":["../../../../src/components/layout/app-rail/app-rail-item.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,aAAa,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC"}

package/dist/components/layout/app-rail/app-rail-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-rail-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/app-rail/app-rail-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+ElB,CAAC"}

package/dist/components/layout/app-rail/app-rail-item.styles.js.map

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

package/dist/components/layout/app-rail/app-rail.class.d.ts

@@ -0,0 +1,253 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../../internal/lyra-element.js';
+import './app-rail-item.class.js';
+/** The rail's effective presentation -- see the class doc for what each renders. */
+export type AppRailMode = 'full' | 'icon-only' | 'mobile';
+/** What can be *assigned* to `mode` -- `'auto'` is a write-only sentinel; see the `mode` accessor doc. */
+export type AppRailModeInput = AppRailMode | 'auto';
+export interface AppRailModeChangeDetail {
+    mode: AppRailMode;
+}
+export interface AppRailToggleDetail {
+    open: boolean;
+}
+export interface AppRailResizeDetail {
+    widthPx: number;
+}
+/**
+ * Pure breakpoint-to-mode resolver, kept separate from the `matchMedia`
+ * wiring below so it's directly unit-testable without resizing a real
+ * browser window. `mobileMatches` wins over everything else when true (the
+ * viewport is narrower than both breakpoints at once); otherwise
+ * `preferredMode` (when set) wins over `iconOnlyMatches` — a manual
+ * preference for the full/icon-only axis specifically, while the mobile
+ * breakpoint continues to be tracked automatically regardless.
+ */
+export declare function computeAppRailMode(iconOnlyMatches: boolean, mobileMatches: boolean, preferredMode?: 'full' | 'icon-only' | null): AppRailMode;
+export interface LyraAppRailEventMap {
+    'lr-mode-change': CustomEvent<AppRailModeChangeDetail>;
+    'lr-toggle': CustomEvent<AppRailToggleDetail>;
+    'lr-rail-resize': CustomEvent<AppRailResizeDetail>;
+}
+/**
+ * `<lr-app-rail>` — a responsive navigation rail that adapts across three
+ * presentations as the *viewport* narrows (not this element's own inline
+ * size — see the `mode` accessor doc for why): `'full'` (nav items show
+ * icon + label, inline), `'icon-only'` (a narrower inline rail, icons only),
+ * and `'mobile'` (hidden behind a toggle button; opening it shows a
+ * focus-trapped floating overlay over the page).
+ *
+ * Breakpoints are viewport-width `matchMedia()` queries against
+ * `icon-only-breakpoint`/`mobile-breakpoint`, not a `ResizeObserver` on this
+ * element — a nav rail's presentation should track the actual device/window
+ * width the way a native OS shell's navigation does, not however much
+ * horizontal space a particular layout happens to give it.
+ *
+ * The `'mobile'` state participates in the library's shared overlay stack,
+ * which supplies focus trapping, Escape/backdrop dismissal, inerting, and
+ * focus restoration without nesting a `<lr-dialog>` in this component's
+ * shadow template. `[part="base"]` (the inline
+ * `'full'`/`'icon-only'` presentation) and `[part="panel"]` (the mobile
+ * overlay) are the *same* element promoted in place across modes (mirrors
+ * `<lr-widget>`'s fullscreen mode) — never both at once, and never two
+ * separate copies of the slotted content, which slot projection can't
+ * produce anyway (a light-DOM node is only ever assigned to one `<slot>`).
+ * It's a plain `<div>` with an explicit `role="navigation"` rather than a
+ * literal `<nav>` tag: a `<nav>`'s implicit role can't be overridden to
+ * `role="dialog"` while the overlay is modal without an `aria-allowed-role`
+ * violation (verified against axe), whereas an explicit `role="navigation"`
+ * on a generic element can be swapped for `role="dialog"` freely.
+ *
+ * @customElement lr-app-rail
+ * @slot - Nav items. Use `<lr-app-rail-item>` for the explicit icon/label
+ *   contract that automatically hides labels in `'icon-only'` mode. Generic
+ *   links and buttons remain supported, but their compact presentation is the
+ *   consumer's responsibility. While the mobile overlay is open, clicking
+ *   anywhere inside this slot closes it.
+ * @slot header - Logo/brand content, shown above the nav items in every mode.
+ * @slot footer - A trailing user/settings trigger, shown below the nav items.
+ * @event lr-mode-change - The effective mode changed, whether from a
+ *   breakpoint crossing or an explicit `mode` assignment. Not fired for a
+ *   redundant reassignment to the mode already in effect.
+ *   `detail: AppRailModeChangeDetail`.
+ * @event lr-toggle - The mobile overlay opened or closed — via the
+ *   built-in toggle button, Escape, a backdrop click, a nav-item click while
+ *   open, or a breakpoint/forced mode change leaving `'mobile'` while open.
+ *   Not fired when a consumer sets `open` directly (mirrors `<lr-dialog>`'s
+ *   `open`/`close()` split). `detail: AppRailToggleDetail`.
+ * @event lr-rail-resize - The `resizable` rail's width changed via drag or keyboard stepping.
+ *   Not fired when a consumer sets `railWidthPx` directly. `detail: AppRailResizeDetail`.
+ * @csspart base - The rail root while inline (`'full'`/`'icon-only'` modes).
+ * @csspart header - The wrapper around the `header` slot.
+ * @csspart nav - The wrapper around the default (nav items) slot.
+ * @csspart footer - The wrapper around the `footer` slot.
+ * @csspart toggle - The mobile hamburger/close toggle button. Hidden via
+ *   CSS outside `'mobile'` mode, or entirely via `hideToggle`.
+ * @csspart backdrop - The mobile overlay's scrim. Only rendered while open.
+ * @csspart panel - The mobile overlay's floating panel — see the class doc
+ *   for why it's the same element as `base`, never both at once.
+ * @csspart resizer - The `resizable` opt-in's drag handle -- its interactive hit target, sized to
+ *   the shared minimum tappable size (`--lr-icon-button-size`), independent of the slimmer
+ *   visible line rendered by its `resizer-track` child. Only rendered while `resizable` and `mode`
+ *   is `'full'`.
+ * @csspart resizer-track - The resizer's slim visible drag line, centered inside `[part="resizer"]`'s
+ *   larger hit target (mirrors `<lr-swatch-picker>`'s `[part="swatch"]`/`[part="swatch-fill"]`
+ *   split). Colors on hover/focus the same way the whole handle previously did.
+ *
+ * @example
+ * Use the item contract so the visible label collapses while its accessible
+ * name remains available:
+ * ```html
+ * <lr-app-rail>
+ *   <lr-app-rail-item href="/inbox" aria-label="Inbox">
+ *     <svg slot="icon" aria-hidden="true">...</svg>Inbox
+ *   </lr-app-rail-item>
+ * </lr-app-rail>
+ * ```
+ */
+export declare class LyraAppRail extends LyraElement<LyraAppRailEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    static properties: {
+        mode: {
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+    };
+    /** Below this viewport width, the rail switches from `'full'` to
+     *  `'icon-only'`. Any valid CSS length, used directly in a `max-width`
+     *  media query. */
+    iconOnlyBreakpoint: string;
+    /** Below this viewport width, the rail switches from `'icon-only'` to
+     *  `'mobile'`. Should be smaller than `iconOnlyBreakpoint` to produce all
+     *  three states as the viewport narrows. */
+    mobileBreakpoint: string;
+    /** Whether the mobile floating overlay is shown. Only meaningful while
+     *  `mode` is `'mobile'` — the value is preserved (not reset) while another
+     *  mode is active, but no overlay chrome renders until `mode` is
+     *  `'mobile'` again. Set this directly, or use the built-in toggle button
+     *  — there is no separate `show()`/`hide()` pair. */
+    open: boolean;
+    /** Accessible name for the rail's navigation landmark, and for its dialog
+     *  role while the mobile overlay is open. A host-level `aria-label`
+     *  attribute takes precedence over this when both are set -- see
+     *  `accessibleLabel`. */
+    label: string;
+    /** Accessible name overriding `label` (and its localized default) for the nav landmark / dialog
+     *  role, mirroring `<lr-date-input>`'s `accessibleLabel` pattern. Reads the host's own
+     *  `aria-label` attribute -- unset (the default, `null`) reproduces today's exact
+     *  `label`/localized-default output. */
+    private accessibleLabel;
+    /** Manually prefers `'full'` or `'icon-only'` for the non-mobile breakpoint axis, while the
+     *  `mobile-breakpoint` continues to be tracked automatically regardless — e.g. a user's manual
+     *  collapse toggle that should still yield to a genuinely too-narrow-for-any-inline-rail
+     *  viewport. Only consulted while `mode` isn't force-pinned via its own accessor (see the class
+     *  doc) — that continues to take full priority, unchanged. Unset (the default, `null`)
+     *  reproduces today's exact breakpoint-only behavior. */
+    preferredMode?: 'full' | 'icon-only' | null;
+    /** Suppresses the built-in mobile `[part='toggle']` hamburger/close button entirely -- for a
+     *  consumer that already owns an external mobile-menu toggle wired to this rail's own `open`
+     *  property. `false` (the default) reproduces today's exact output; note `open` still has no
+     *  built-in external trigger of its own once this is set, since `lr-toggle` only fires from the
+     *  toggle button being removed. */
+    hideToggle: boolean;
+    /** Opts a continuously draggable width in for the `'full'` state — exposes a `[part="resizer"]`
+     *  handle (pointer-drag and `ArrowLeft`/`ArrowRight` keyboard stepping, RTL-aware) clamped to
+     *  `[minRailWidthPx, maxRailWidthPx]`. No built-in persistence — a consumer that wants the
+     *  chosen width to survive a reload should listen for `lr-rail-resize` and persist `widthPx`
+     *  itself. `false` (the default) renders no resizer and leaves the fixed-width
+     *  `--lr-app-rail-width` CSS token exactly as before this property existed. */
+    resizable: boolean;
+    /** The rail's current width in px while `resizable` — settable/gettable. Unset defers to the
+     *  `--lr-app-rail-width` CSS token's own resolved width. */
+    railWidthPx?: number;
+    /** Minimum `railWidthPx` a drag/keyboard resize can reach. */
+    minRailWidthPx: number;
+    /** Maximum `railWidthPx` a drag/keyboard resize can reach. */
+    maxRailWidthPx: number;
+    /** `true` for the duration of an active pointer-driven resize drag (not a keyboard step) --
+     *  reflected so a consumer (or this component's own styles) can suppress `[part='base']`'s
+     *  `transition: inline-size` during the drag, which otherwise visibly "chases" the pointer
+     *  instead of tracking it 1:1. Read-only in practice (this component owns the transitions), but
+     *  a plain reactive property like every other reflected boolean here. */
+    dragging: boolean;
+    private hasHeaderSlot;
+    private hasFooterSlot;
+    private _mode;
+    private forced;
+    private iconOnlyMatches;
+    private mobileMatches;
+    private mqIconOnly?;
+    private mqMobile?;
+    private overlayActive;
+    private justOpened;
+    private releaseScrollLock?;
+    private overlayHandle?;
+    private explicitTrigger?;
+    private readonly navId;
+    private baseEl?;
+    private resizePointerId?;
+    private resizeStartX;
+    private resizeStartWidth;
+    private syncSlottedItems;
+    /**
+     * The rail's current effective presentation. Always one of the three real
+     * modes — never `'auto'` — reflecting either the live breakpoint match or,
+     * once forced, whatever was last assigned.
+     *
+     * Assigning `'full'`/`'icon-only'`/`'mobile'` forces that mode and stops
+     * this element from responding to `icon-only-breakpoint`/
+     * `mobile-breakpoint` matches. Assigning the sentinel `'auto'` releases
+     * the force and immediately re-syncs to the current viewport width,
+     * resuming automatic tracking. `'auto'` is a write-only instruction, not a
+     * value this getter ever returns — there is no way to observe "currently
+     * forced" from the property itself.
+     */
+    get mode(): AppRailMode;
+    set mode(next: AppRailModeInput);
+    /** `minRailWidthPx` normalized to a finite, non-negative px floor -- an invalid attribute value
+     *  would otherwise poison every `Math.min(maxRailWidthPx, Math.max(minRailWidthPx, ...))` clamp
+     *  below (both the drag and keyboard-step handlers) and the resizer's own `aria-valuemin`. */
+    private get safeMinRailWidthPx();
+    /** `maxRailWidthPx` normalized the same way, then cross-referenced against the already-sanitized
+     *  minimum so an inverted/invalid pair (e.g. `maxRailWidthPx` left below a since-raised
+     *  `minRailWidthPx`) can never produce a negative-width clamp range. */
+    private get safeMaxRailWidthPx();
+    /** The rail's current effective width in px, whether or not `railWidthPx` has ever been
+     *  explicitly set — falls back to the live measured width of `[part=base]` so the resizer's
+     *  `aria-valuenow` and the first drag/keyboard step's start-width reflect the real rendered
+     *  width even before a consumer ever sets `railWidthPx`. A set `railWidthPx` is clamped into
+     *  `[safeMinRailWidthPx, safeMaxRailWidthPx]` here -- a NaN/negative/out-of-bounds direct
+     *  assignment would otherwise reach `updated()`'s inline-size write and this resizer's own
+     *  `aria-valuenow` exactly as given. */
+    private get effectiveRailWidthPx();
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private activateMobileOverlay;
+    private deactivateMobileOverlay;
+    private setupMediaQueries;
+    private teardownMediaQueries;
+    private onIconOnlyChange;
+    private onMobileChange;
+    private applyComputedMode;
+    private setEffectiveMode;
+    private setOpen;
+    private onToggleClick;
+    private onBackdropClick;
+    private onNavItemClick;
+    private onHeaderSlotChange;
+    private onFooterSlotChange;
+    private onNavSlotChange;
+    private onResizerPointerDown;
+    private onResizerPointerMove;
+    private onResizerPointerUp;
+    private onResizerKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lr-app-rail': LyraAppRail;
+    }
+}
+//# sourceMappingURL=app-rail.class.d.ts.map

package/dist/components/layout/app-rail/app-rail.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-rail.class.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/app-rail/app-rail.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8C,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3G,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAShE,OAAO,0BAA0B,CAAC;AAElC,oFAAoF;AACpF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE1D,0GAA0G;AAC1G,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;CACjB;AA2BD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,eAAe,EAAE,OAAO,EACxB,aAAa,EAAE,OAAO,EACtB,aAAa,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,GAC1C,WAAW,CAKb;AAED,MAAM,WAAW,mBAAmB;IAClC,gBAAgB,EAAE,WAAW,CAAC,uBAAuB,CAAC,CAAC;IACvD,WAAW,EAAE,WAAW,CAAC,mBAAmB,CAAC,CAAC;IAC9C,gBAAgB,EAAE,WAAW,CAAC,mBAAmB,CAAC,CAAC;CACpD;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,qBAAa,WAAY,SAAQ,WAAW,CAAC,mBAAmB,CAAC;IAC/D,MAAM,CAAC,MAAM,iCAAgC;IAS7C,MAAM,CAAC,UAAU;QACf,IAAI;YAAI,OAAO;YAAQ,UAAU;;MACjC;IAEF;;uBAEmB;IAC8B,kBAAkB,SAAW;IAE9E;;gDAE4C;IACE,gBAAgB,SAAW;IAEzE;;;;yDAIqD;IACT,IAAI,UAAS;IAEzD;;;6BAGyB;IACb,KAAK,SAAgB;IAEjC;;;4CAGwC;IACD,OAAO,CAAC,eAAe,CAAuB;IAErF;;;;;6DAKyD;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IAEvF;;;;uCAImC;IACmC,UAAU,UAAS;IAEzF;;;;;mFAK+E;IACnC,SAAS,UAAS;IAE9D;gEAC4D;IACJ,WAAW,CAAC,EAAE,MAAM,CAAC;IAE7E,8DAA8D;IACF,cAAc,SAAO;IAEjF,8DAA8D;IACF,cAAc,SAAO;IAEjF;;;;6EAIyE;IAC7B,QAAQ,UAAS;IAEpD,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAS;IAEvC,OAAO,CAAC,KAAK,CAAuB;IAGpC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,UAAU,CAAC,CAAiB;IACpC,OAAO,CAAC,QAAQ,CAAC,CAAiB;IAKlC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,aAAa,CAAC,CAAgB;IACtC,OAAO,CAAC,eAAe,CAAC,CAAc;IACtC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA0B;IAExB,OAAO,CAAC,MAAM,CAAC,CAAc;IACrD,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,gBAAgB,CAAK;IAE7B,OAAO,CAAC,gBAAgB;IASxB;;;;;;;;;;;;OAYG;IACH,IAAI,IAAI,IAAI,WAAW,CAEtB;IACD,IAAI,IAAI,CAAC,IAAI,EAAE,gBAAgB,EAU9B;IAED;;kGAE8F;IAC9F,OAAO,KAAK,kBAAkB,GAE7B;IAED;;4EAEwE;IACxE,OAAO,KAAK,kBAAkB,GAE7B;IAED;;;;;;4CAMwC;IACxC,OAAO,KAAK,oBAAoB,GAK/B;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAwBlD;IAMD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAgB/C;IAED,iBAAiB,IAAI,IAAI,CAiBxB;IAED,oBAAoB,IAAI,IAAI,CAY3B;IAED,OAAO,CAAC,qBAAqB;IAY7B,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,gBAAgB,CAGtB;IACF,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,aAAa,CAGnB;IAEF,OAAO,CAAC,eAAe,CAErB;IAKF,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IACF,OAAO,CAAC,kBAAkB,CAExB;IACF,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,oBAAoB,CAU1B;IAEF,OAAO,CAAC,oBAAoB,CAO1B;IAEF,OAAO,CAAC,kBAAkB,CAQxB;IAEF,OAAO,CAAC,gBAAgB,CAgBtB;IAEF,MAAM,IAAI,cAAc,CAkDvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,WAAW,CAAC;KAC5B;CACF"}