@moni-labs/moni-ui 0.2.0

package/dist/components/moni-progress.js

@@ -0,0 +1,333 @@
+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, css, svg, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+/**
+ * Progress indicator that faithfully ports BeerCSS's progress styles.
+ *
+ * BeerCSS uses the native <progress> element with `::after`, `::before` and
+ * `mask-image` pseudo-elements. Those don't work inside Shadow DOM because:
+ *  - `<progress>` native pseudo-elements (::webkit-progress-value, ::after)
+ *    are blocked by the UA shadow root in Chrome/Firefox within a custom shadow.
+ *  - `mask-image` on those pseudo-elements doesn't apply at all in shadows.
+ *
+ * Solution: use a plain <div> wrapper that replicates BeerCSS's visual rules
+ * exactly, and an SVG for the circular variant (matching BeerCSS's conic-gradient
+ * approach but with SVG stroke for better cross-browser support).
+ *
+ * Attributes:
+ *  - value:         0..max (omit for indeterminate)
+ *  - max:           upper bound (default 100)
+ *  - variant:       linear (default) | circular | wavy | circular-wavy
+ *  - size:          small | medium (default) | large
+ *  - indeterminate: present → infinite animation
+ */
+let MoniProgress = class MoniProgress extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.value = 0;
+        this.max = 100;
+        this.variant = 'linear';
+        this.size = 'medium';
+        this.indeterminate = false;
+        /** Computed fill percentage (0-100) used in styles/SVG */
+        this._pct = 0;
+        /** Unique ID per instance for SVG clipPath IDs */
+        this._instanceId = Math.random().toString(36).slice(2, 8);
+    }
+    willUpdate(changed) {
+        if (changed.has('value') || changed.has('max') || changed.has('indeterminate')) {
+            this._pct = this.indeterminate
+                ? 50
+                : Math.max(0, Math.min(100, (this.value / Math.max(1, this.max)) * 100));
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			/* ─── Keyframes — identical to BeerCSS ─── */
+			@keyframes to-linear-progress {
+				0% { inset-inline-start: -50%; inline-size: 50%; }
+				25% { inset-inline-start: 30%; inline-size: 60%; }
+				100% { inset-inline-start: 110%; inline-size: 10%; }
+			}
+
+			@keyframes to-rotate {
+				0%   { transform: rotate(0deg); }
+				100% { transform: rotate(360deg); }
+			}
+
+			:host {
+				--_size: 0.25rem;
+				--_circular-size: 2.5rem;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				inline-size: 100%;
+				color: var(--primary);
+			}
+
+			:host([variant='circular']),
+			:host([variant='circular-wavy']) {
+				inline-size: var(--_circular-size);
+				block-size: var(--_circular-size);
+			}
+
+			:host([size='small']) { --_size: 0.25rem; --_circular-size: 1.5rem; }
+			:host([size='large']) { --_size: 0.45rem; --_circular-size: 3.5rem; }
+
+			/* ─── Linear / Wavy wrapper ─── */
+			.progress-linear {
+				position: relative;
+				inline-size: 100%;
+				block-size: var(--_size);
+				background-color: var(--active);
+				border-radius: 1rem;
+				overflow: hidden;
+			}
+
+			.progress-linear > .value {
+				position: absolute;
+				inset-block: 0;
+				inset-inline-start: 0;
+				inline-size: calc(var(--_p, 0) * 1%);
+				background-color: currentColor;
+				border-radius: inherit;
+				transition: inline-size var(--speed2) ease;
+			}
+
+			/* Indeterminate linear: sliding bar via absolute animation */
+			.progress-linear.indeterminate > .value {
+				inline-size: 50%;
+				animation: to-linear-progress 3.2s ease infinite;
+				transition: none;
+			}
+
+			/* ─── Wavy ─── */
+			.progress-wavy {
+				position: relative;
+				inline-size: 100%;
+				block-size: calc(var(--_size) * 2);
+				background: none;
+				overflow: visible;
+			}
+
+			/* Wavy uses an SVG filter for the wave shape */
+			.progress-wavy > svg {
+				position: absolute;
+				inset: 0;
+				inline-size: 100%;
+				block-size: 100%;
+			}
+
+			/* ─── Circular: SVG ─── */
+			.progress-circular {
+				inline-size: var(--_circular-size);
+				block-size: var(--_circular-size);
+				position: relative;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.progress-circular > svg {
+				inline-size: 100%;
+				block-size: 100%;
+				transform: rotate(-90deg);
+			}
+
+			.progress-circular.indeterminate {
+				animation: to-rotate 1s linear infinite;
+			}
+
+			.progress-circular .track {
+				fill: none;
+				stroke: var(--active);
+				stroke-width: 4;
+			}
+
+			.progress-circular .value {
+				fill: none;
+				stroke: currentColor;
+				stroke-width: 4;
+				stroke-linecap: round;
+				transition: stroke-dashoffset var(--speed2) ease;
+			}
+
+			/* Indeterminate circular: large visible arc that rotates */
+			.progress-circular.indeterminate .value {
+				stroke-dasharray: 80 100;
+				transition: none;
+			}
+
+			/* ─── part exposure ─── */
+			.progress-linear,
+			.progress-wavy,
+			.progress-circular {
+				flex: none;
+			}
+		`
+    ]; }
+    _renderLinear() {
+        const isIndet = this.indeterminate;
+        return html `
+			<div
+				class="progress-linear${isIndet ? ' indeterminate' : ''}"
+				part="progress"
+				role="progressbar"
+				aria-valuenow=${isIndet ? nothing : this.value}
+				aria-valuemin="0"
+				aria-valuemax=${this.max}
+				style="--_p: ${this._pct};"
+			>
+				<div class="value"></div>
+			</div>
+		`;
+    }
+    _renderWavy() {
+        // BeerCSS wavy uses an SVG mask. We replicate with an SVG clipPath wave.
+        const isIndet = this.indeterminate;
+        const w = 200;
+        const h = 8;
+        const fill = this.indeterminate ? 50 : this._pct;
+        const trackW = (w * 1).toFixed(1);
+        const fillW = ((w * fill) / 100).toFixed(1);
+        return html `
+			<div
+				class="progress-wavy"
+				part="progress"
+				role="progressbar"
+				aria-valuenow=${isIndet ? nothing : this.value}
+				aria-valuemin="0"
+				aria-valuemax=${this.max}
+				style="--_p: ${this._pct};"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 ${w} ${h}"
+					preserveAspectRatio="none"
+					aria-hidden="true"
+				>
+					<!-- Track wave (background) -->
+					<path
+						d="M0,4 Q5,0 10,4 Q15,8 20,4 Q25,0 30,4 Q35,8 40,4 Q45,0 50,4 Q55,8 60,4 Q65,0 70,4 Q75,8 80,4 Q85,0 90,4 Q95,8 100,4 Q105,0 110,4 Q115,8 120,4 Q125,0 130,4 Q135,8 140,4 Q145,0 150,4 Q155,8 160,4 Q165,0 170,4 Q175,8 180,4 Q185,0 190,4 Q195,8 200,4"
+						fill="none"
+						stroke="var(--active)"
+						stroke-width="3"
+					/>
+					<!-- Value wave (fill) — clipped to fill width -->
+					<clipPath id="wavy-clip-${this._instanceId}">
+						<rect x="0" y="0" width="${isIndet ? trackW : fillW}" height="${h}">
+							${isIndet
+            ? svg `<animate
+										attributeName="x"
+										from="-${w}"
+										to="${w}"
+										dur="3.2s"
+										repeatCount="indefinite"
+									/>`
+            : nothing}
+						</rect>
+					</clipPath>
+					<path
+						d="M0,4 Q5,0 10,4 Q15,8 20,4 Q25,0 30,4 Q35,8 40,4 Q45,0 50,4 Q55,8 60,4 Q65,0 70,4 Q75,8 80,4 Q85,0 90,4 Q95,8 100,4 Q105,0 110,4 Q115,8 120,4 Q125,0 130,4 Q135,8 140,4 Q145,0 150,4 Q155,8 160,4 Q165,0 170,4 Q175,8 180,4 Q185,0 190,4 Q195,8 200,4"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="3"
+						clip-path="url(#wavy-clip-${this._instanceId})"
+					/>
+				</svg>
+			</div>
+		`;
+    }
+    _renderCircular(withWavy = false) {
+        const isIndet = this.indeterminate;
+        // SVG circle math: r=20, circumference = 2π*20 ≈ 125.66
+        const r = 20;
+        const circ = 2 * Math.PI * r;
+        const dashOffset = isIndet
+            ? circ * 0.5 // show ~50% arc for indeterminate
+            : circ * (1 - this._pct / 100);
+        return html `
+			<div
+				class="progress-circular${isIndet ? ' indeterminate' : ''}"
+				part="progress"
+				role="progressbar"
+				aria-valuenow=${isIndet ? nothing : this.value}
+				aria-valuemin="0"
+				aria-valuemax=${this.max}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 48 48"
+					aria-hidden="true"
+				>
+					${withWavy
+            ? svg `
+							<!-- Circular wavy uses a scalloped clip path to emulate BeerCSS wavy-circle mask -->
+							<defs>
+								<clipPath id="wavy-circle-clip-${this._instanceId}">
+									<path d="M24,4 Q28,2 32,4 Q36,2 40,4 Q44,6 44,10 Q46,14 44,18 Q46,22 44,26 Q46,30 44,34 Q44,38 40,40 Q36,44 32,44 Q28,46 24,44 Q20,46 16,44 Q12,44 8,40 Q4,38 4,34 Q2,30 4,26 Q2,22 4,18 Q2,14 4,10 Q4,6 8,4 Q12,2 16,4 Q20,2 24,4Z"/>
+								</clipPath>
+							</defs>
+							<circle class="track" cx="24" cy="24" r="${r}" clip-path="url(#wavy-circle-clip-${this._instanceId})"/>
+							<circle
+								class="value"
+								cx="24" cy="24" r="${r}"
+								stroke-dasharray="${isIndet ? `${circ * 0.5} ${circ * 0.5}` : `${circ - dashOffset} ${dashOffset}`}"
+								stroke-dashoffset="0"
+								clip-path="url(#wavy-circle-clip-${this._instanceId})"
+							/>`
+            : svg `
+							<circle class="track" cx="24" cy="24" r="${r}"/>
+							<circle
+								class="value"
+								cx="24" cy="24" r="${r}"
+								stroke-dasharray="${isIndet ? `${circ * 0.5} ${circ * 0.5}` : `${circ - dashOffset} ${dashOffset}`}"
+								stroke-dashoffset="0"
+							/>`}
+				</svg>
+			</div>
+		`;
+    }
+    render() {
+        switch (this.variant) {
+            case 'circular':
+                return this._renderCircular(false);
+            case 'circular-wavy':
+                return this._renderCircular(true);
+            case 'wavy':
+                return this._renderWavy();
+            default:
+                return this._renderLinear();
+        }
+    }
+};
+__decorate([
+    property({ type: Number, reflect: true })
+], MoniProgress.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], MoniProgress.prototype, "max", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniProgress.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniProgress.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniProgress.prototype, "indeterminate", void 0);
+__decorate([
+    state()
+], MoniProgress.prototype, "_pct", void 0);
+MoniProgress = __decorate([
+    customElement('moni-progress')
+], MoniProgress);
+export { MoniProgress };
+export default MoniProgress;

package/dist/components/moni-radio.d.ts

@@ -0,0 +1,38 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Radio that faithfully ports BeerCSS's `.radio` styles.
+ *
+ * BeerCSS architecture:
+ *  - `.radio` is inline-flex, aligns items center
+ *  - `input` has width/height = --_size, opacity: 0  (real layout space, not absolute)
+ *  - `span::before` shows "radio_button_unchecked" / "radio_button_checked" via Material Symbols font
+ *  - `span::after` is the ripple hover effect
+ *
+ * Attributes:
+ *  - label:    text label
+ *  - checked:  present
+ *  - disabled: present
+ *  - size:     small | medium (default) | large | extra
+ *  - name:     forwarded to input.name (group radios by name)
+ *  - value:    forwarded to input.value
+ */
+export declare class MoniRadio extends MoniElement {
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+    size: 'small' | 'medium' | 'large' | 'extra';
+    name: string;
+    value: string;
+    private _input;
+    updated(changed: Map<string, unknown>): void;
+    static styles: import("lit").CSSResult[];
+    private _onChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-radio': MoniRadio;
+    }
+}
+export default MoniRadio;
+//# sourceMappingURL=moni-radio.d.ts.map

package/dist/components/moni-radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-radio.d.ts","sourceRoot":"","sources":["../../src/components/moni-radio.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,SAAU,SAAQ,WAAW;IACZ,KAAK,SAAM;IACI,OAAO,UAAS;IAChB,QAAQ,UAAS;IAE7D,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAC3B,IAAI,SAAM;IACV,KAAK,SAAM;IAExB,OAAO,CAAC,MAAM,CAAoB;IAEzC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAgB,MAAM,4BA8GpB;IAEF,OAAO,CAAC,SAAS;IAgBR,MAAM;CAiBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD;AAED,eAAe,SAAS,CAAC"}

package/dist/components/moni-radio.js

@@ -0,0 +1,218 @@
+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;
+};
+var MoniRadio_1;
+import { html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+/**
+ * Radio that faithfully ports BeerCSS's `.radio` styles.
+ *
+ * BeerCSS architecture:
+ *  - `.radio` is inline-flex, aligns items center
+ *  - `input` has width/height = --_size, opacity: 0  (real layout space, not absolute)
+ *  - `span::before` shows "radio_button_unchecked" / "radio_button_checked" via Material Symbols font
+ *  - `span::after` is the ripple hover effect
+ *
+ * Attributes:
+ *  - label:    text label
+ *  - checked:  present
+ *  - disabled: present
+ *  - size:     small | medium (default) | large | extra
+ *  - name:     forwarded to input.name (group radios by name)
+ *  - value:    forwarded to input.value
+ */
+let MoniRadio = class MoniRadio extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.checked = false;
+        this.disabled = false;
+        this.size = 'medium';
+        this.name = '';
+        this.value = '';
+    }
+    static { MoniRadio_1 = this; }
+    updated(changed) {
+        if (this._input) {
+            if (changed.has('checked'))
+                this._input.checked = this.checked;
+            if (changed.has('disabled'))
+                this._input.disabled = this.disabled;
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				--_size: 1.5rem;
+				display: inline-flex;
+				font-family: var(--font);
+			}
+			:host([size='small'])  { --_size: 1rem; }
+			:host([size='large'])  { --_size: 2rem; }
+			:host([size='extra'])  { --_size: 2.5rem; }
+
+			/* BeerCSS .radio */
+			label {
+				inline-size: auto;
+				block-size: auto;
+				line-height: normal;
+				white-space: nowrap;
+				cursor: pointer;
+				display: inline-flex;
+				align-items: center;
+			}
+
+			/* BeerCSS: input has real size, opacity 0 */
+			input {
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				opacity: 0;
+				cursor: pointer;
+				flex: none;
+			}
+
+			/* BeerCSS: span wraps visible indicator + label */
+			span {
+				display: inline-flex;
+				align-items: center;
+				color: var(--on-surface);
+				font-size: 0.875rem;
+				position: relative;
+			}
+
+			/* BeerCSS: span::before = radio icon (overlaid on input via negative inset) */
+			span::before {
+				--_size: inherit;
+				content: 'radio_button_unchecked';
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				box-sizing: border-box;
+				margin: 0 auto;
+				outline: none;
+				color: var(--on-surface-variant);
+				position: absolute;
+				inset: auto auto auto calc(var(--_size) * -1);
+				border-radius: 50%;
+				user-select: none;
+				z-index: 1;
+				font-family: var(--font-icon);
+				font-size: var(--_size);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			/* Checked: filled radio icon */
+			input:checked + span::before {
+				content: 'radio_button_checked';
+				color: var(--primary);
+			}
+
+			/* BeerCSS: span::after = hover ripple */
+			span::after {
+				--_size: inherit;
+				content: '';
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				box-sizing: border-box;
+				margin: 0 auto;
+				position: absolute;
+				inset: auto auto auto calc(var(--_size) * -1);
+				border-radius: 50%;
+				user-select: none;
+				transition: all var(--speed1);
+				background-color: currentColor;
+				box-shadow: 0 0 0 0 currentColor;
+				opacity: 0;
+			}
+
+			label:hover > input:not(:disabled) + span::after,
+			input:not(:disabled):focus + span::after {
+				box-shadow: 0 0 0 0.5rem currentColor;
+				opacity: 0.1;
+			}
+
+			/* Label padding */
+			span.has-label {
+				padding-inline-start: 0.25rem;
+			}
+
+			/* Disabled */
+			input:disabled + span {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+
+			/* Focus ring */
+			input:focus-visible + span::before {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.375rem;
+			}
+		`
+    ]; }
+    _onChange(e) {
+        this.checked = e.target.checked;
+        if (this.checked && this.name) {
+            const root = this.getRootNode();
+            if (root) {
+                const siblings = root.querySelectorAll(`moni-radio[name="${this.name}"]`);
+                siblings.forEach((sibling) => {
+                    if (sibling !== this && sibling instanceof MoniRadio_1) {
+                        sibling.checked = false;
+                    }
+                });
+            }
+        }
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    render() {
+        return html `<label part="radio">
+			<input
+				type="radio"
+				.checked=${live(this.checked)}
+				?disabled=${this.disabled}
+				name=${ifDefined(this.name || undefined)}
+				value=${ifDefined(this.value || undefined)}
+				@change=${this._onChange}
+			/>
+			<span class=${this.label ? 'has-label' : ''}>
+				${this.label
+            ? html `${this.label}`
+            : html `<slot></slot>`}
+			</span>
+		</label>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniRadio.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniRadio.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniRadio.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniRadio.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniRadio.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniRadio.prototype, "value", void 0);
+__decorate([
+    query('input')
+], MoniRadio.prototype, "_input", void 0);
+MoniRadio = MoniRadio_1 = __decorate([
+    customElement('moni-radio')
+], MoniRadio);
+export { MoniRadio };
+export default MoniRadio;

package/dist/components/moni-ripple.d.ts

@@ -0,0 +1,35 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Visual-only ripple decoration.
+ *
+ * To trigger a ripple at a specific point, set the `x` and `y` attributes
+ * and toggle the `active` attribute. The visual scale-in animation will
+ * run for `duration` ms and then the element becomes hidden.
+ *
+ * Attributes:
+ *  - x, y:        origin in px (0..100, %)
+ *  - active:      present → visible
+ *  - speed:       fast | normal (default) | slow
+ *  - color:       primary (default) | secondary | surface
+ */
+export declare class MoniRipple extends MoniElement {
+    x: number;
+    y: number;
+    active: boolean;
+    speed: 'fast' | 'normal' | 'slow';
+    color: 'primary' | 'secondary' | 'surface';
+    private _target;
+    private _timeoutId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onPointerDown;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-ripple': MoniRipple;
+    }
+}
+export default MoniRipple;
+//# sourceMappingURL=moni-ripple.d.ts.map

package/dist/components/moni-ripple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-ripple.d.ts","sourceRoot":"","sources":["../../src/components/moni-ripple.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;GAYG;AACH,qBACa,UAAW,SAAQ,WAAW;IACC,CAAC,SAAM;IACP,CAAC,SAAM;IACN,MAAM,UAAS;IAE3D,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAY;IAE7C,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAa;IAEvD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,UAAU,CAAa;IAEtB,iBAAiB;IAYjB,oBAAoB;IAU7B,OAAO,CAAC,cAAc,CAqBpB;IAEF,OAAgB,MAAM,4BAqDpB;IAEO,MAAM;CAOf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}