@twobirds/microcomponents 0.1.21 → 0.2.0

package/dist/state/formValues.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @module Form Values
+ *
+ * This module exports a single function {@link formValues} that traverses a DOM element
+ * (usually an HTMLFormElement), collecting all input fields and creating a two-way bound
+ * observable inside the target object:
+ * - When input values change, the observable object updates accordingly.
+ * - When the observable property values change, the input field values update in the DOM.
+ *
+ * **Prerequisites:**
+ * - Input fields must have a `name` attribute.
+ * - Names must be unique within the form.
+ *
+ * @example
+ * ```ts
+ * import { DC } from '@twobirds/microcomponents';
+ * import { formValues } from '@twobirds/microcomponents/formValues';
+ *
+ * class MyMC extends DC {
+ *   constructor(target: HTMLElement) {
+ *     super(target);
+ *     this.target.innerHTML = '<form><input name="textinput" value="" /></form>';
+ *
+ *     // link the form property to the DOM input fields
+ *     formValues(this, 'form', this.target);
+ *
+ *     // changing the form property updates the DOM automatically
+ *     this.form.textinput = 'Hello world!';
+ *   }
+ * }
+ * ```
+ */
+/**
+ * Attaches a form-values observable to a target object property, allowing two-way binding
+ * between the DOM form controls and the object's state.
+ *
+ * @param targetObject - The object to which the form values will be attached as an observable.
+ * @param propertyName - The name of the property on the target object that will hold the form data.
+ * @param dom - The DOM element or shadow root (typically a form) whose inputs should be observed and bound.
+ *
+ * @example
+ * ```html
+ * <form id="myForm">
+ *   <input type="text" name="username" value="">
+ *   <select name="role"><option value="admin">Admin</option><option value="user">User</option></select>
+ *   <textarea name="bio"></textarea>
+ *   <input type="checkbox" name="active">
+ *   <input type="radio" name="gender" value="male"> Male
+ *   <input type="radio" name="gender" value="female"> Female
+ * </form>
+ * ```
+ *
+ * ```ts
+ * import { formValues } from '@twobirds/microcomponents/formValues';
+ *
+ * const state = {};
+ * formValues(state, 'formData', document.getElementById('myForm'));
+ *
+ * // Read values from the form
+ * console.log(state.formData.username);  // string
+ * console.log(state.formData.role);      // "admin" or "user"
+ * console.log(state.formData.active);    // boolean
+ *
+ * // Write values to the form (updates DOM automatically)
+ * state.formData.username = 'john_doe';
+ * state.formData.gender = 'male';
+ * ```
+ */
+export declare function formValues<T extends object>(targetObject: T, propertyName: keyof T & string, dom: HTMLElement | ShadowRoot): void;
+//# sourceMappingURL=formValues.d.ts.map

package/dist/state/formValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../../src/state/formValues.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AA4SH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAC1C,YAAY,EAAE,CAAC,EACf,YAAY,EAAE,MAAM,CAAC,GAAG,MAAM,EAC9B,GAAG,EAAE,WAAW,GAAG,UAAU,QAuB7B"}

package/dist/state/formValues.js

@@ -0,0 +1,334 @@
+/**
+ * @module Form Values
+ *
+ * This module exports a single function {@link formValues} that traverses a DOM element
+ * (usually an HTMLFormElement), collecting all input fields and creating a two-way bound
+ * observable inside the target object:
+ * - When input values change, the observable object updates accordingly.
+ * - When the observable property values change, the input field values update in the DOM.
+ *
+ * **Prerequisites:**
+ * - Input fields must have a `name` attribute.
+ * - Names must be unique within the form.
+ *
+ * @example
+ * ```ts
+ * import { DC } from '@twobirds/microcomponents';
+ * import { formValues } from '@twobirds/microcomponents/formValues';
+ *
+ * class MyMC extends DC {
+ *   constructor(target: HTMLElement) {
+ *     super(target);
+ *     this.target.innerHTML = '<form><input name="textinput" value="" /></form>';
+ *
+ *     // link the form property to the DOM input fields
+ *     formValues(this, 'form', this.target);
+ *
+ *     // changing the form property updates the DOM automatically
+ *     this.form.textinput = 'Hello world!';
+ *   }
+ * }
+ * ```
+ */
+import { DC } from '../core/MC.js';
+import { copyGettersSetters, isBrowser } from '../utils/helpers.js';
+import { observe } from './observables.js';
+/**
+Extracts the lowercase tag name of an element (e.g., 'input', 'select', 'textarea').
+@param inputElement - The HTML element to extract the tag name from.
+@returns The lowercase tag name string.
+*/
+const getInputName = (inputElement) => {
+    return inputElement.tagName.toLowerCase();
+};
+/**
+Abstract base class for form input value handlers.
+Defines the interface that all handler classes must implement.
+*/
+class InputBase {
+    /**
+    Creates a new InputBase instance.
+    @param e - The HTML element being handled (input, select, or textarea).
+    */
+    constructor(e) { }
+}
+/**
+Handler class specifically for radio button groups.
+Provides synchronized access to the selected value in a group of related radio buttons.
+*/
+class RadioHandler extends InputBase {
+    #e;
+    /**
+    Creates a new RadioHandler instance.
+    @param e - The first radio button element in the group (used to determine name and form scope).
+    */
+    constructor(e) {
+        super(e);
+        this.#e = e;
+    }
+    /**
+    Gets the currently selected value of the radio button group using FormData API.
+    @returns The string value of the selected radio button, or null if none is selected.
+    */
+    get val() {
+        if (!this.#e.form)
+            return null;
+        const ret = new FormData(this.#e.form).get(this.#e.name);
+        return ret ?? null;
+    }
+    /**
+    Sets the selected radio button by value.
+    Finds and checks the first radio input matching the specified value within the same group.
+    @param value - The value to match against radio inputs in this group.
+    */
+    set val(value) {
+        /* v8 ignore next */
+        const arr = [
+            ...(this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`) ?? []),
+        ];
+        arr.filter((e) => e.getAttribute('value') === value).shift().checked =
+            true;
+    }
+}
+/**
+ * Handler class for checkbhox inputs.
+ * Provides synchronized get/set access to the checked state of a single checkbox.
+ */
+class CheckboxHandler extends InputBase {
+    #e;
+    /**
+    Creates a new CheckboxHandler instance.
+    @param e - The checkbox element to handle.
+    */
+    constructor(e) {
+        super(e);
+        this.#e = e;
+    }
+    /**
+    Gets the checked state of the checkbox.
+    @returns True if the checkbox is checked, false otherwise.
+    */
+    get val() {
+        return this.#e.checked;
+    }
+    /**
+    Sets the checked state of the checkbox.
+    @param value - The boolean value to assign as the new checked state.
+    */
+    set val(value) {
+        this.#e.checked = value;
+    }
+}
+/**
+Handler class for standard single-line input fields (text, password, email, etc.).
+Provides synchronized get/set access to the value of an input field.
+*/
+class InputHandler extends InputBase {
+    #e;
+    /**
+     * Creates a new InputHandler instance.
+     * @param e - The HTML input element to handle.
+     */
+    constructor(e) {
+        super(e);
+        this.#e = e;
+    }
+    /**
+     * Gets the current value of the input field.
+     * @returns The string content of the input element.
+     */
+    get val() {
+        return this.#e.value;
+    }
+    /**
+     * Sets the value of the input field.
+     * @param value - The new string value for the input element.
+     */
+    set val(value) {
+        this.#e.value = value;
+    }
+}
+/**
+Handler class for select dropdown elements, supporting both single and multiple selection modes.
+Provides synchronized get/set access to selected option values.
+*/
+class SelectHandler extends InputBase {
+    #e;
+    #multi = false;
+    /**
+     * Creates a new SelectHandler instance.
+     * @param e - The select element to handle.
+     */
+    constructor(e) {
+        super(e);
+        this.#e = e;
+        this.#multi = e.multiple;
+    }
+    /**
+     * Gets the currently selected option value(s).
+     * For single selection, returns a string. For multiple selection, returns an json.stringify()'ied array of strings.
+     * @returns A string or JSON.stringify array of strings representing selected values.
+     */
+    get val() {
+        const ret = [];
+        // get all options
+        [...this.#e.querySelectorAll('option')]
+            .filter((o) => o.selected)
+            .forEach((o) => {
+            ret.push(o.value);
+        });
+        return this.#multi ? ret.join(',') : ret[0];
+    }
+    /**
+     * Sets the selected option(s) by value.
+     * @param value - A string or array of strings representing values to select.
+     */
+    set val(value) {
+        value = typeof value === 'string' ? [value] : value;
+        // set all options			/* v8 ignore next */
+        [...this.#e.querySelectorAll('option')].forEach((o) => {
+            if (value.indexOf(o.value) > -1) {
+                o.selected = true;
+            }
+            else {
+                o.selected = false;
+            }
+        });
+    }
+}
+/**
+Handler class for textarea elements.
+Provides synchronized get/set access to the multi-line text content of a textarea.
+*/
+class TextAreaHandler extends InputBase {
+    #e;
+    /**
+     * Creates a new TextAreaHandler instance.
+     * @param e - The textarea element to handle.
+     */
+    constructor(e) {
+        super(e);
+        this.#e = e;
+    }
+    /**
+     * Gets the current value of the textarea (defaults to empty string if null/undefined).
+     * @returns The string content of the textarea element.
+     */
+    get val() {
+        return this.#e.value || '';
+    }
+    /**
+     * Sets the value of the textarea.
+     * @param value - The new string value for the textarea element.
+     */
+    set val(value) {
+        this.#e.value = value;
+    }
+}
+/**
+Collects all form controls within a given DOM scope and creates handler objects
+that provide synchronized get/set access to their values.
+
+@param e - Optional root DOM element or shadow root to search within; defaults to document if omitted.
+@returns An object where each key is the name attribute of an input, select, or textarea,
+         and each value is a proxy-like accessor object with `val` getter/setter methods.
+*/
+const getInputHandlers = (e) => {
+    const inputList = [...(e || document).querySelectorAll('input,select,textarea')], handlers = {};
+    inputList.forEach((input) => {
+        const name = input.getAttribute('name');
+        if (name) {
+            let handler = false;
+            switch (getInputName(input)) {
+                case 'input':
+                    switch (input.type) {
+                        case 'radio':
+                            handler = new RadioHandler(input);
+                            break;
+                        case 'checkbox':
+                            handler = new CheckboxHandler(input);
+                            break;
+                        default:
+                            handler = new InputHandler(input);
+                    }
+                    break;
+                case 'select':
+                    handler = new SelectHandler(input);
+                    break;
+                case 'textarea':
+                    handler = new TextAreaHandler(input);
+                    break;
+            }
+            /* v8 ignore next */
+            if (handler) {
+                const h = handler;
+                DC.add(input, name, h);
+                Object.defineProperty(handlers, name, {
+                    enumerable: true,
+                    configurable: true,
+                    get: () => h.val,
+                    set: (value) => {
+                        if (h.val !== value) {
+                            h.val = value;
+                        }
+                    },
+                });
+            }
+        }
+    });
+    return handlers;
+};
+/**
+ * Attaches a form-values observable to a target object property, allowing two-way binding
+ * between the DOM form controls and the object's state.
+ *
+ * @param targetObject - The object to which the form values will be attached as an observable.
+ * @param propertyName - The name of the property on the target object that will hold the form data.
+ * @param dom - The DOM element or shadow root (typically a form) whose inputs should be observed and bound.
+ *
+ * @example
+ * ```html
+ * <form id="myForm">
+ *   <input type="text" name="username" value="">
+ *   <select name="role"><option value="admin">Admin</option><option value="user">User</option></select>
+ *   <textarea name="bio"></textarea>
+ *   <input type="checkbox" name="active">
+ *   <input type="radio" name="gender" value="male"> Male
+ *   <input type="radio" name="gender" value="female"> Female
+ * </form>
+ * ```
+ *
+ * ```ts
+ * import { formValues } from '@twobirds/microcomponents/formValues';
+ *
+ * const state = {};
+ * formValues(state, 'formData', document.getElementById('myForm'));
+ *
+ * // Read values from the form
+ * console.log(state.formData.username);  // string
+ * console.log(state.formData.role);      // "admin" or "user"
+ * console.log(state.formData.active);    // boolean
+ *
+ * // Write values to the form (updates DOM automatically)
+ * state.formData.username = 'john_doe';
+ * state.formData.gender = 'male';
+ * ```
+ */
+export function formValues(targetObject, propertyName, dom) {
+    /* v8 ignore next */
+    if (!isBrowser())
+        return; // DOM does not exist on the server side
+    const handlers = getInputHandlers(dom);
+    const source = targetObject;
+    source[propertyName] = Object.assign({}, handlers);
+    observe(targetObject, propertyName);
+    // After observe(), the property getter returns the live observable wrapper.
+    const observable = source[propertyName];
+    copyGettersSetters(handlers, observable);
+    //Object.seal(source[propertyName]); // object structure may not be changed from now on
+    [...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
+        input.addEventListener('input', () => {
+            observable.notify();
+        });
+    });
+}

package/dist/state/observables.d.ts

@@ -0,0 +1,276 @@
+/**
+@module Observables
+
+
+This module provides reactive data binding capabilities using observables,
+enabling automatic DOM updates when underlying data changes.
+
+## Overview
+
+The observable system allows you to make object properties "observable" so that
+registered callbacks are automatically invoked whenever those properties change.
+It's particularly designed for reactive templating and binding data to HTML elements.
+It can also handle simple object properties like strings, boolean and numbers.
+
+## How `observe()` Works
+
+The main function is {@link observe}, which takes an object and makes its properties
+or a specific property observable.
+
+### Simple properties
+
+javascript
+```js
+let person = { name: "John", count: 0 };
+
+observe( person ); // all properties inside are now observables
+
+person.name.subscribe( (name) => {
+  console.log("Name changed:", name);
+});
+
+person.count.subscribe( (count) => {
+  console.log("Count changed:", count);
+});
+
+person.name = "Jane";  // > Name changed: Jane
+person.count += 10;    // > Count changed: 10
+```
+
+### Deep Change Detection
+
+This means that if you modify any of the properties inside an observed object -> all callbacks are triggered.
+
+javascript
+```js
+let obj = { data: { name: "John", count: 0 } };
+
+observe( obj, 'data' ); // make the data property observable
+
+obj.data.subscribe( (data) => {
+  console.log("Data changed:", data);
+});
+
+obj.data.name = "Jane"; // > { data: { name: "Jane", count: 0 } }
+obj.data.count += 10;   // > { data: { name: "Jane", count: 10 } }
+```
+
+### Debounced Notifications
+
+To prevent excessive updates, notifications are debounced briefly:
+
+javascript
+```js
+let obj = observe({ value: 1 });
+for (let i = 0; i < 100; i++) {
+  obj.value++; // Only triggers one callback after all changes complete
+}
+```
+
+## DOM Binding with Placeholders
+
+The observables integrate tightly with placeholder-based templating:
+
+- Elements with `{placeholder}` syntax are scanned for observable data.
+- When observed data changes, matching placeholders in the DOM are updated automatically.
+
+@example
+
+HTML
+```html
+<div class="model {visibility}">
+  Hello {name}! You have {count} messages.
+</div>
+```
+
+Javascript
+```js
+const div = document.querySelector('.model');
+
+const model = observe({
+  data: { name: "Alice", count: 0 },
+  visibility: ''
+});
+
+if (div) {
+  model.data.bind( div );
+}
+
+model.data.count++; // Automatically updates the DOM with new count value
+model.visibility = 'hidden'; // adds the hidden class to the DOM element
+```
+*/
+/**
+A callback invoked with the current observable value when notified.
+
+@example
+```ts
+const cb: Callback<number> = (v) => console.log('new value:', v);
+observable.subscribe(cb);
+```
+*/
+export type Callback<T = unknown> = (value: T) => void;
+/**
+Interface representing an observable object that supports subscription, notification, and DOM binding.
+
+Observable objects track registered callbacks and invoke them when their internal state changes.
+They can also be bound to a DOM target to automatically update placeholder values in the view layer.
+
+@example
+```ts
+const state = observe({ count: 0 });
+state.count.subscribe((v) => console.log('count is now', v));
+state.count++; // logs: count is now 1
+```
+*/
+export type Observable<T = unknown> = T & {
+    subscribe(callback: Callback<T>): Observable<T>;
+    unsubscribe(callback: Callback<T>): Observable<T>;
+    notify(enable?: boolean): Observable<T>;
+    bind(target: HTMLElement | DocumentFragment | ShadowRoot): Observable<T>;
+    /** @hidden */
+    callbacks: Array<Function>;
+};
+/**
+Every property of `T` mapped to an observable of its value.
+
+KNOWN LIMIT: the runtime property *setter* accepts a plain value
+(`state.count = 5` re-wraps it), but this mapped type cannot say so — mapped
+types cannot declare divergent read/write (get/set) types, so the wrapper type
+governs writes too and plain assignment to a primitive observable is rejected.
+Tracked upstream as https://github.com/microsoft/TypeScript/issues/43826
+(variant accessors for mapped types); when it lands, the write type here
+becomes `T[K] | Observable<T[K]>` and the limit disappears.
+
+Until then, use one of the supported write paths:
+- the `observed` variant, a single container whose `.value` gives
+  typed reads and writes today (`state.value.count = 5`, deep
+  writes included) — the limitation never applies;
+- `state.count++` (compiles today; TS does not re-check the `++` write-back);
+- the schema-first `observe<S>()` overload with a hand-declared get/set
+  interface, where the divergence IS expressible (and plain `=` becomes
+  legal) — see {@link Unobserved}.
+
+@example
+```ts
+type State = Observed<{ count: number; name: string }>;
+// { count: Observable<number>, name: Observable<string> }
+```
+*/
+export type Observed<T> = {
+    [K in keyof T]: Observable<T[K]>;
+};
+/**
+Only `K` of `T` mapped to an observable; other properties keep their type.
+Carries the same write limitation as {@link Observed} for the mapped key.
+
+@example
+```ts
+type State = ObservedKey<{ count: number; label: string }, 'count'>;
+// { count: Observable<number>, label: string }
+```
+*/
+export type ObservedKey<T, K extends keyof T> = {
+    [P in keyof T]: P extends K ? Observable<T[P]> : T[P];
+};
+/**
+The inverse of a hand-declared observable state interface: strips the
+`Observable` wrapper from every property, yielding the plain seed shape.
+`Unobserved<CounterState>` → `{ count: number }`.
+
+Extraction goes through the `subscribe` callback parameter, so it works for
+both accessor-declared members (`get count(): Observable<number>`) and plain
+`Observable<T>` properties; non-observable members pass through unchanged.
+
+Used by the schema-first `observe<S>()` overload to validate the seed object
+against the declared interface — see that overload's example.
+
+@example
+```ts
+interface CounterState {
+    get count(): Observable<number>;
+    set count(v: number);
+}
+type Seed = Unobserved<CounterState>; // { count: number }
+const state = observe<CounterState>({ count: 0 }); // seed validated against schema
+```
+*/
+export type Unobserved<S> = {
+    [K in keyof S]: S[K] extends {
+        subscribe(callback: (value: infer V) => void): unknown;
+    } ? V : S[K];
+};
+/**
+Whether a value is already an observable wrapper — `subscribe` is reachable on its prototype chain.
+Used by {@link observe} to skip re-wrapping and to detect the "not yet observed" state on reassignment.
+
+@example
+```ts
+const state = observe({ count: 0 });
+isAlreadyObserved(state.count); // true
+isAlreadyObserved(42);          // false
+```
+*/
+export declare function isAlreadyObserved(value: unknown): boolean;
+/**
+Makes a target object's properties observable by replacing them with wrapped values.
+
+Wraps each property of `target` that is not already observable (and meets criteria)
+in an observable wrapper. Also sets up deep change detection for objects and
+debounced notifications when the data changes.
+
+There are two sides to using it — pick per call site:
+
+**Declarative (typed class fields).** Declare the field as `Observable<T>` up
+front, then let `observe(this, 'field')` install the live wrapper in the
+constructor. The declaration needs the double cast once (`0 as unknown as
+Observable<number>`): the field starts life as a plain value and only becomes
+the wrapper when `observe()` runs. In exchange, every later use is fully typed —
+arithmetic, `subscribe`, `bind` — with no casts anywhere else.
+
+**Imperative (wrapping existing data).** Hand any object to `observe()` after
+the fact — no declarations, the return type is inferred: every property comes
+back as `Observable<PropertyType>`.
+
+@param target - The object whose properties should be made observable.
+@param propertyName - Optional specific property name to make one property observable instead of all properties.
+@returns The original target object, now with observable properties.
+
+@example Imperative usage — wrap an existing plain object:
+```ts
+const state = observe({ count: 0, label: 'hi' });
+state.count.subscribe((v) => console.log('count is now', v));
+state.count++; // triggers the callback
+```
+
+@example Declarative usage — typed class field with double cast:
+```ts
+class Counter {
+    clicks: Observable<number> = 0 as unknown as Observable<number>;
+
+    constructor() {
+        observe(this, 'clicks');
+    }
+
+    bump() {
+        this.clicks++; // plain arithmetic — the declaration carries the type
+    }
+}
+```
+
+@example Schema-first usage — divergent read/write types via hand-declared interface:
+```ts
+interface CounterState {
+    get count(): Observable<number>;
+    set count(v: number);
+}
+
+const state = observe<CounterState>({ count: 0 }); // seed validated against schema
+state.count.subscribe((v) => console.log(v)); // fully typed
+state.count = 5; // plain assignment — the declared setter type permits it
+```
+*/
+export declare function observe<T extends object, K extends keyof T>(target: T, propertyName: K): ObservedKey<T, K>;
+export declare function observe<T extends object>(target: T): Observed<T>;
+export declare function observe<S extends object>(target: Unobserved<S>): S;
+//# sourceMappingURL=observables.d.ts.map

package/dist/state/observables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"observables.d.ts","sourceRoot":"","sources":["../../src/state/observables.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGE;AAiBF;;;;;;;;EAQE;AACF,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAEvD;;;;;;;;;;;;EAYE;AACF,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG;IACzC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IAChD,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IACxC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,gBAAgB,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IACzE,cAAc;IACd,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC3B,CAAC;AAwNF;;;;;;;;;;;;;;;;;;;;;;;;;EAyBE;AACF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAE/D;;;;;;;;;EASE;AACF,MAAM,MAAM,WAAW,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI;KAC9C,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;EAqBE;AACF,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;QAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,GAAG,OAAO,CAAA;KAAE,GACpF,CAAC,GACD,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AAKF;;;;;;;;;;EAUE;AACF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAMzD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDE;AAEF,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAC1D,MAAM,EAAE,CAAC,EACT,YAAY,EAAE,CAAC,GACb,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACrB,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAClE,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC"}