tyrell-components 1.0.0-TC7

package/lib/base/ty-component.d.ts

@@ -0,0 +1,133 @@
+/**
+ * TyComponent - Base class for all Ty web components
+ *
+ * Provides unified property/attribute lifecycle management:
+ * - Single code path for all property updates
+ * - Declarative property configuration
+ * - Predictable rendering behavior
+ * - Form association support
+ * - Property change events via 'prop:change' (separate from user 'change' events)
+ */
+import { PropertyManager, PropertyConfig, PropertyChange } from '../utils/property-manager.js';
+/**
+ * Base class for all Ty components with unified property lifecycle
+ */
+export declare abstract class TyComponent<T = any> extends HTMLElement {
+    static formAssociated: boolean;
+    protected static properties: Record<string, PropertyConfig>;
+    protected props: PropertyManager<T>;
+    protected _internals: ElementInternals;
+    protected _connected: boolean;
+    protected _rendered: boolean;
+    constructor();
+    /**
+     * Define which attributes to observe
+     * Auto-generated from property configuration
+     * Returns kebab-case attribute names (e.g., 'minHeight' -> 'min-height')
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Unified property setter
+     * Use this in your property setters instead of direct field assignment
+     */
+    protected setProperty(name: string, value: any): void;
+    /**
+     * Unified property getter
+     * Use this in your property getters
+     */
+    protected getProperty(name: string): any;
+    /**
+     * Sync property value to HTML attribute
+     */
+    private _syncPropertyToAttribute;
+    /**
+     * Convert camelCase to kebab-case
+     */
+    private _toKebabCase;
+    /**
+     * Convert kebab-case to camelCase
+     */
+    private _toCamelCase;
+    /**
+     * Attribute changed callback - unified for all components
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Connected callback - handle pre-set properties
+     */
+    connectedCallback(): void;
+    /**
+     * Disconnected callback
+     */
+    disconnectedCallback(): void;
+    /**
+     * Capture properties that were set before connectedCallback
+     * (React, Vue, Reagent set properties before element is connected)
+     */
+    private _capturePreSetProperties;
+    /**
+     * THE CORE LIFECYCLE METHOD
+     * All property changes flow through here
+     *
+     * Lifecycle order:
+     * 1. Update internal state (onPropertiesChanged hook)
+     * 2. Sync form value (if formValue property changed)
+     * 3. Render (if visual property changed)
+     * 4. Emit events (if emitChange property changed)
+     */
+    private _handlePropertyChanges;
+    /**
+     * Emit property change events for properties that require it
+     * Uses 'prop:change' event to avoid conflicts with user interaction 'change' events
+     */
+    private _emitChangeEvents;
+    /**
+     * Update form value via ElementInternals
+     * Subclasses can override to customize form value
+     */
+    protected updateFormValue(): void;
+    /**
+     * Get the form value for this component
+     * Default: return 'value' property
+     * Override for custom behavior
+     */
+    protected getFormValue(): File | string | FormData | null;
+    /**
+     * Render the component
+     * Subclasses MUST implement this
+     */
+    protected abstract render(): void;
+    /**
+     * Hook: Called when properties change
+     * Subclasses can override to update internal state
+     *
+     * This is called BEFORE rendering, so you can update
+     * internal state here and it will be reflected in the render
+     */
+    protected onPropertiesChanged(changes: PropertyChange[]): void;
+    /**
+     * Hook: Called when component is connected
+     * Use this instead of overriding connectedCallback
+     */
+    protected onConnect(): void;
+    /**
+     * Hook: Called when component is disconnected
+     * Use this for cleanup instead of overriding disconnectedCallback
+     */
+    protected onDisconnect(): void;
+    /**
+     * Get the form element this component is associated with
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * Form reset callback - called when form.reset() is invoked
+     * Resets component to its default value
+     */
+    formResetCallback(): void;
+    /**
+     * Hook: Called when form is reset
+     * Subclasses can override to perform additional reset actions
+     */
+    protected onFormReset(): void;
+}
+//# sourceMappingURL=ty-component.d.ts.map

package/lib/base/ty-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ty-component.d.ts","sourceRoot":"","sources":["../../src/base/ty-component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAE9F;;GAEG;AACH,8BAAsB,WAAW,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,WAAW;IAC5D,MAAM,CAAC,cAAc,UAAO;IAG5B,SAAS,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAK;IAGhE,SAAS,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,CAAA;IAGnC,SAAS,CAAC,UAAU,EAAE,gBAAgB,CAAA;IAGtC,SAAS,CAAC,UAAU,UAAQ;IAG5B,SAAS,CAAC,SAAS,UAAQ;;IAkB3B;;;;OAIG;IACH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAYxC;IAED;;;OAGG;IACH,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAYrD;;;OAGG;IACH,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG;IAIxC;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAyBhC;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;OAEG;IACH,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAmB9F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAqBzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IAkBhC;;;;;;;;;OASG;IACH,OAAO,CAAC,sBAAsB;IAsB9B;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAgBzB;;;OAGG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;IAKjC;;;;OAIG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI;IAIzD;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI;IAEjC;;;;;;OAMG;IACH,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,EAAE,GAAG,IAAI;IAK9D;;;OAGG;IACH,SAAS,CAAC,SAAS,IAAI,IAAI;IAI3B;;;OAGG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAI9B;;OAEG;IACH,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED;;;OAGG;IACH,iBAAiB,IAAI,IAAI;IAgBzB;;;OAGG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;CAI9B"}

package/lib/base/ty-component.js

@@ -0,0 +1,297 @@
+/**
+ * TyComponent - Base class for all Ty web components
+ *
+ * Provides unified property/attribute lifecycle management:
+ * - Single code path for all property updates
+ * - Declarative property configuration
+ * - Predictable rendering behavior
+ * - Form association support
+ * - Property change events via 'prop:change' (separate from user 'change' events)
+ */
+import { PropertyManager } from '../utils/property-manager.js';
+/**
+ * Base class for all Ty components with unified property lifecycle
+ */
+export class TyComponent extends HTMLElement {
+    constructor() {
+        super();
+        // Track if component is connected
+        this._connected = false;
+        // Track if initial render happened
+        this._rendered = false;
+        // Initialize property manager
+        const ctor = this.constructor;
+        this.props = new PropertyManager(ctor.properties);
+        // Form association
+        this._internals = this.attachInternals();
+        // Setup shadow DOM (subclasses can override by checking if shadowRoot exists)
+        if (!this.shadowRoot) {
+            this.attachShadow({ mode: 'open' });
+        }
+    }
+    /**
+     * Define which attributes to observe
+     * Auto-generated from property configuration
+     * Returns kebab-case attribute names (e.g., 'minHeight' -> 'min-height')
+     */
+    static get observedAttributes() {
+        const attrs = [];
+        for (const [name, config] of Object.entries(this.properties)) {
+            attrs.push(name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase());
+            // Include alias names so attributeChangedCallback fires for them
+            if (config.aliases) {
+                for (const alias of Object.keys(config.aliases)) {
+                    attrs.push(alias);
+                }
+            }
+        }
+        return attrs;
+    }
+    /**
+     * Unified property setter
+     * Use this in your property setters instead of direct field assignment
+     */
+    setProperty(name, value) {
+        const change = this.props.updateProperty(name, value, 'property');
+        if (change) {
+            // Sync to attribute (kebab-case)
+            this._syncPropertyToAttribute(change);
+            // Handle the change through unified lifecycle
+            this._handlePropertyChanges([change]);
+        }
+    }
+    /**
+     * Unified property getter
+     * Use this in your property getters
+     */
+    getProperty(name) {
+        return this.props.get(name);
+    }
+    /**
+     * Sync property value to HTML attribute
+     */
+    _syncPropertyToAttribute(change) {
+        const { name, newValue } = change;
+        const config = this.props.getConfig(name);
+        if (!config)
+            return;
+        // Convert to kebab-case for attribute
+        const attrName = this._toKebabCase(name);
+        // Handle different types
+        if (config.type === 'boolean') {
+            if (newValue) {
+                this.setAttribute(attrName, '');
+            }
+            else {
+                this.removeAttribute(attrName);
+            }
+        }
+        else if (newValue === null || newValue === undefined) {
+            this.removeAttribute(attrName);
+        }
+        else if (typeof newValue === 'object') {
+            this.setAttribute(attrName, JSON.stringify(newValue));
+        }
+        else {
+            this.setAttribute(attrName, String(newValue));
+        }
+    }
+    /**
+     * Convert camelCase to kebab-case
+     */
+    _toKebabCase(str) {
+        return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    }
+    /**
+     * Convert kebab-case to camelCase
+     */
+    _toCamelCase(str) {
+        return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    }
+    /**
+     * Attribute changed callback - unified for all components
+     */
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        // Check if this is an alias (e.g., not-searchable)
+        let change = this.props.handleAlias(name, newValue);
+        if (!change) {
+            // Properties may be registered with kebab-case (e.g., 'display-month')
+            // or camelCase. Try the attribute name as-is first, then camelCase.
+            const camelName = this._toCamelCase(name);
+            const propName = this.props.hasConfig(name) ? name : camelName;
+            change = this.props.updateProperty(propName, newValue, 'attribute');
+        }
+        if (change) {
+            this._handlePropertyChanges([change]);
+        }
+    }
+    /**
+     * Connected callback - handle pre-set properties
+     */
+    connectedCallback() {
+        this._connected = true;
+        // Capture pre-set properties (React/Vue/Reagent pattern)
+        const preSetProps = this._capturePreSetProperties();
+        // Batch process all pre-set properties
+        if (preSetProps.length > 0) {
+            this._handlePropertyChanges(preSetProps);
+        }
+        // Initialize component (subclass hook)
+        this.onConnect();
+        // Initial render
+        if (!this._rendered) {
+            this.render();
+            this._rendered = true;
+        }
+    }
+    /**
+     * Disconnected callback
+     */
+    disconnectedCallback() {
+        this._connected = false;
+        this.onDisconnect();
+    }
+    /**
+     * Capture properties that were set before connectedCallback
+     * (React, Vue, Reagent set properties before element is connected)
+     */
+    _capturePreSetProperties() {
+        const changes = [];
+        const ctor = this.constructor;
+        for (const propName of Object.keys(ctor.properties)) {
+            // Check if property was set on the element before connection
+            const descriptor = Object.getOwnPropertyDescriptor(this, propName);
+            if (descriptor && descriptor.value !== undefined) {
+                const change = this.props.updateProperty(propName, descriptor.value, 'property');
+                if (change) {
+                    changes.push(change);
+                }
+            }
+        }
+        return changes;
+    }
+    /**
+     * THE CORE LIFECYCLE METHOD
+     * All property changes flow through here
+     *
+     * Lifecycle order:
+     * 1. Update internal state (onPropertiesChanged hook)
+     * 2. Sync form value (if formValue property changed)
+     * 3. Render (if visual property changed)
+     * 4. Emit events (if emitChange property changed)
+     */
+    _handlePropertyChanges(changes) {
+        if (changes.length === 0)
+            return;
+        // 1. Update internal state (subclass-specific)
+        this.onPropertiesChanged(changes);
+        // 2. Sync form value if needed
+        const formValueChanged = changes.some(c => this.props.isFormValue(c.name));
+        if (formValueChanged) {
+            this.updateFormValue();
+        }
+        // 3. Render only if visual properties changed AND component is connected
+        const visualChanged = changes.some(c => this.props.isVisual(c.name));
+        if (visualChanged && this._connected) {
+            this.render();
+        }
+        // 4. Emit change events if configured
+        this._emitChangeEvents(changes);
+    }
+    /**
+     * Emit property change events for properties that require it
+     * Uses 'prop:change' event to avoid conflicts with user interaction 'change' events
+     */
+    _emitChangeEvents(changes) {
+        for (const change of changes) {
+            if (this.props.shouldEmitChange(change.name)) {
+                this.dispatchEvent(new CustomEvent('prop:change', {
+                    detail: {
+                        property: change.name,
+                        oldValue: change.oldValue,
+                        newValue: change.newValue
+                    },
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+        }
+    }
+    /**
+     * Update form value via ElementInternals
+     * Subclasses can override to customize form value
+     */
+    updateFormValue() {
+        const formValue = this.getFormValue();
+        this._internals.setFormValue(formValue);
+    }
+    /**
+     * Get the form value for this component
+     * Default: return 'value' property
+     * Override for custom behavior
+     */
+    getFormValue() {
+        return this.props.get('value') ?? null;
+    }
+    /**
+     * Hook: Called when properties change
+     * Subclasses can override to update internal state
+     *
+     * This is called BEFORE rendering, so you can update
+     * internal state here and it will be reflected in the render
+     */
+    onPropertiesChanged(changes) {
+        // Default: no-op
+        // Subclasses can override to update _state, _config, etc.
+    }
+    /**
+     * Hook: Called when component is connected
+     * Use this instead of overriding connectedCallback
+     */
+    onConnect() {
+        // Default: no-op
+    }
+    /**
+     * Hook: Called when component is disconnected
+     * Use this for cleanup instead of overriding disconnectedCallback
+     */
+    onDisconnect() {
+        // Default: no-op
+    }
+    /**
+     * Get the form element this component is associated with
+     */
+    get form() {
+        return this._internals.form;
+    }
+    /**
+     * Form reset callback - called when form.reset() is invoked
+     * Resets component to its default value
+     */
+    formResetCallback() {
+        // Get the default value from property configuration
+        const ctor = this.constructor;
+        const valueConfig = ctor.properties['value'];
+        if (valueConfig) {
+            const defaultValue = valueConfig.default ?? '';
+            // Reset the value property through setProperty to trigger lifecycle
+            this.setProperty('value', defaultValue);
+        }
+        // Call subclass hook for custom reset behavior
+        this.onFormReset();
+    }
+    /**
+     * Hook: Called when form is reset
+     * Subclasses can override to perform additional reset actions
+     */
+    onFormReset() {
+        // Default: no-op
+        // Subclasses can override to reset additional state
+    }
+}
+TyComponent.formAssociated = true;
+// Subclasses must define their property configuration
+TyComponent.properties = {};
+//# sourceMappingURL=ty-component.js.map

package/lib/base/ty-component.js.map

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

package/lib/components/button.d.ts

@@ -0,0 +1,126 @@
+/**
+ * TyButton Web Component
+ *
+ * Three appearance variants × six flavors × three tones (+/base/-).
+ *   appearance="solid"     saturated brand fill (default)
+ *   appearance="outlined"  transparent bg, text === border
+ *   appearance="ghost"     text only, hover bg
+ *
+ * Append `+` or `-` to a flavor for stronger/softer tone (e.g. "primary+").
+ */
+import type { Flavor, Size, TyButtonElement } from "../types/common.js";
+import { TyComponent } from "../base/ty-component.js";
+import type { PropertyChange } from "../utils/property-manager.js";
+type Appearance = "solid" | "outlined" | "ghost";
+interface ButtonState {
+    flavor: Flavor;
+    size: Size;
+    appearance: Appearance;
+    disabled: boolean;
+    type: "button" | "submit" | "reset";
+    pill: boolean;
+    action: boolean;
+    wide: boolean;
+    name: string;
+    value: string;
+}
+/**
+ * Ty Button Component
+ *
+ * @example
+ * ```html
+ * <ty-button flavor="primary">Default solid</ty-button>
+ * <ty-button appearance="outlined" flavor="danger">Outlined</ty-button>
+ * <ty-button appearance="ghost" flavor="success+">Ghost stronger</ty-button>
+ * ```
+ */
+export declare class TyButton extends TyComponent<ButtonState> implements TyButtonElement {
+    static formAssociated: boolean;
+    protected static properties: {
+        flavor: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        size: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => any;
+        };
+        appearance: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => any;
+        };
+        disabled: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        type: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        pill: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        action: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        wide: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        name: {
+            type: "string";
+            default: string;
+        };
+        value: {
+            type: "string";
+            default: string;
+        };
+    };
+    private _structureInitialized;
+    constructor();
+    protected onConnect(): void;
+    protected onDisconnect(): void;
+    protected onPropertiesChanged(_changes: PropertyChange[]): void;
+    get flavor(): Flavor;
+    set flavor(value: Flavor);
+    get size(): Size;
+    set size(value: Size);
+    get appearance(): Appearance;
+    set appearance(value: Appearance);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get type(): "button" | "submit" | "reset";
+    set type(value: "button" | "submit" | "reset");
+    get pill(): boolean;
+    set pill(value: boolean);
+    get action(): boolean;
+    set action(value: boolean);
+    get wide(): boolean;
+    set wide(value: boolean);
+    get name(): string;
+    set name(value: string);
+    get value(): string;
+    set value(value: string);
+    /** Parse the optional `+`/`-` shade suffix from a flavor string. */
+    private parseFlavor;
+    private buildClasses;
+    private handleFormAction;
+    private initializeButtonStructure;
+    protected render(): void;
+}
+export {};
+//# sourceMappingURL=button.d.ts.map

package/lib/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAInE,KAAK,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;AAEjD,UAAU,WAAW;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,qBAAa,QACX,SAAQ,WAAW,CAAC,WAAW,CAC/B,YAAW,eAAe;IAE1B,MAAM,CAAC,cAAc,UAAQ;IAE7B,SAAS,CAAC,MAAM,CAAC,UAAU;;;;;;;;;;0BAUT,GAAG;wBACL,GAAG;;;;;;0BAYD,GAAG;wBACL,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyCjB;IAEF,OAAO,CAAC,qBAAqB,CAAS;;IAOtC,SAAS,CAAC,SAAS,IAAI,IAAI;IAC3B,SAAS,CAAC,YAAY,IAAI,IAAI;IAC9B,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,IAAI;IAM/D,IAAI,MAAM,IAAI,MAAM,CAEnB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED,IAAI,IAAI,IAAI,IAAI,CAEf;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAEnB;IAED,IAAI,UAAU,IAAI,UAAU,CAE3B;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,UAAU,EAE/B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,IAAI,IAAI,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAExC;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,EAE5C;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAMD,oEAAoE;IACpE,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,yBAAyB;IAuCjC,SAAS,CAAC,MAAM,IAAI,IAAI;CAezB"}