@dooboostore/simple-web-component 1.0.5 → 1.0.7

package/README.md

@@ -1,100 +1,193 @@
 # @dooboostore/simple-web-component
 
-`@dooboostore/simple-web-component` is a lightweight, decorator-driven library for building high-performance Web Components. It leverages native browser features like **Shadow DOM**, **Slots**, and **MutationObserver** to provide a declarative development experience without the overhead of a Virtual DOM.
+An ultra-lightweight, high-performance Web Component library that brings **Modern Reactivity** to **Standard Web Technologies**. Build complex, high-performance UIs using native Shadow DOM, Slots, and MutationObservers without the weight of a Virtual DOM.
 
-## Key Features
+## 🚀 Why @dooboostore/simple-web-component?
 
-- **Decorator-driven**: Use `@elementDefine`, `@innerHtml`, `@attributeChanged`, `@query`, and more.
-- **Full Lifecycle Control**: Fine-grained hooks with `onBefore...` and `onAfter...` decorators.
-- **Surgical Updates**: High-performance rendering using Proxy-based reactivity.
-- **Auto-Sync**: Decorators automatically re-bind when the DOM changes.
-- **Native-First**: No Virtual DOM, just pure Custom Elements.
-- **Comprehensive `is` Support**: Logic variants for every standard HTML element (e.g., `swc-for-of-ul`).
-- **Scoped Context**: Support for `as` and `as-index` to avoid naming collisions.
+- **Surgical Updates**: Powered by Proxy-based reactivity. It updates only the specific **Text Nodes or Attributes** bound to data—no full-tree diffing.
+- **Standard-First**: Keep your HTML semantic. Use the native `is` attribute to enhance standard tags (`ul`, `table`, `div`, etc.).
+- **Zero Boilerplate**: Define queries, events, and lifecycles declaratively using decorators.
+- **Scoped Context (`as`)**: Effortlessly isolate and share data between parent and child components using explicit aliases.
+- **Hybrid Rendering**: Seamlessly combine **Shadow DOM** and **Light DOM** in a single component.
 
-## Installation
+---
+
+## 📦 Installation
 
 ```bash
 pnpm add @dooboostore/simple-web-component
 ```
 
-### Safari Support (Essential Polyfill)
-
-Safari does not natively support "Customized Built-in Elements" (`is` attribute). Include this polyfill at the top of your app:
-
+### Safari Support (Required)
+Include this polyfill at the very top of your entry point to support the `is` attribute in Safari:
 ```javascript
 import '@ungap/custom-elements';
+import 'reflect-metadata';
 ```
 
-## API Reference
+---
 
-### Core Decorators
+## 💡 Practical Showcase
 
-| Decorator | Target | Description |
-| :--- | :--- | :--- |
-| `@elementDefine(config)` | Class | Registers the component. Supports `name`, `extends`. |
-| `@innerHtml(options)` | Method | Defines HTML template. Supports `{ useShadow: boolean }`. Can be used multiple times. |
-| `@attributeChanged(names)`| Method | Handles attribute changes. Supports single string, array, or `*`. |
-| `@query(selector, options)`| Prop/Method | Queries a single element. |
-| `@queryAll(selector, options)`| Prop/Method | Queries multiple elements. |
-| `@addEventListener(opts)`| Method | Declaratively binds events. Auto-rebinds on DOM changes. |
+### 1. Basic Reactive Component
+A counter where only the number part is updated in the DOM when you click.
 
-### Lifecycle Decorators
+```typescript
+import { elementDefine, innerHtml, state, addEventListener } from '@dooboostore/simple-web-component';
 
-Supports multiple methods per hook.
+@elementDefine('my-counter')
+class MyCounter extends HTMLElement {
+  @state count = 0;
 
-| Hook | Execution Timing |
-| :--- | :--- |
-| `@onBeforeConnected` | Start of `connectedCallback`. |
-| `@onAfterConnected` | End of `connectedCallback`. (Alias: `@onConnected`) |
-| `@onBeforeDisconnected`| Start of `disconnectedCallback`. |
-| `@onAfterDisconnected` | End of `disconnectedCallback`. (Alias: `@onDisconnected`) |
-| `@onBeforeAdopted` | Start of `adoptedCallback`. |
-| `@onAfterAdopted` | End of `adoptedCallback`. (Alias: `@onAdopted`) |
+  @innerHtml({ useShadow: true })
+  render() {
+    return `
+      <p>Count: <strong>{{count}}</strong></p>
+      <button id="inc"> +1 </button>
+    `;
+  }
+
+  @addEventListener({ type: 'click', query: '#inc' })
+  onInc() {
+    this.count++; // 👈 Surgical Update!
+  }
+}
+```
 
-### Built-in Logic Components
+### 2. Nested Scopes with `as="alias"`
+Access parent data from deeply nested children without naming collisions.
 
-#### `swc-for-of` (Looping)
+```typescript
+@elementDefine({ name: 'parent-comp' })
+class Parent extends HTMLElement {
+  @state user = { name: 'Alice', score: 100 };
+  @innerHtml({ useShadow: true })
+  render() { return `<h3>User: {{p.user.name}}</h3><slot></slot>`; }
+}
+
+@elementDefine({ name: 'child-comp' })
+class Child extends HTMLElement {
+  @state score = 0;
+  @innerHtml({ useShadow: true })
+  render() {
+    return `
+      <div>Child Score: {{c.score}}</div>
+      <div>Parent's Score: {{p.user.score}}</div> <!-- 👈 Scoped Access -->
+    `;
+  }
+}
+```
 ```html
-<swc-for-of swc-value="{{items}}" as="item" as-index="i">
-  <li>{{i}}: {{item.name}}</li>
-</swc-for-of>
+<parent-comp as="p">
+  <child-comp as="c"></child-comp>
+</parent-comp>
 ```
 
-#### `swc-object` (Binding)
+---
+
+## 📑 Decorator Deep Dive
+
+### `@elementDefine(config)`
+Registers the class as a Custom Element.
+- `name`: (Required) Tag name.
+- `extends`: (Optional) Native tag to extend.
+- `autoRemoveEventListeners`: (Optional) Auto-cleanup on disconnect.
+
+### `@innerHtml(options?)`
+Defines markup. Supports **Async (Promises)**.
+- `root`: `'shadow'` (Shadow DOM) or `'light'` (Light DOM). Default depends on `useShadow`.
+- `useShadow`: Shortcut to set `root: 'shadow'`.
+
+### `@state(alias?)`
+Declares a property as reactive. Tracks changes in nested objects/arrays.
+- `alias`: Custom name for templates (e.g. `{{alias.path}}`).
+
+### `@attribute(options?)`
+Syncs property with HTML attribute.
+- `name`: HTML attribute name.
+- `type`: `String`, `Number`, `Boolean`, `Object`.
+- `disableReflect`: If `true`, stops JS -> HTML sync.
+
+### `@query(selector?, options?)`
+Lazy-loads elements.
+- `selector`: CSS selector. If omitted, targets the **Host**.
+- `root`: `'shadow' | 'light' | 'all' | 'auto'` (Default: `'auto'`).
+
+### `@addEventListener(options)`
+Declarative event binding. Method receives `(event, targetElement)`.
+- `type`: Event type.
+- `query`: CSS selector.
+- `root`: Search scope for target.
+- `stopPropagation`, `preventDefault`, `stopImmediatePropagation`: Event modifiers.
+
+---
+
+## ⏳ Lifecycle Hooks
+Multiple methods per hook are supported.
+
+| Hook | Timing |
+| :--- | :--- |
+| `@onBeforeConnected` | Before template injection. |
+| `@onAfterConnected` | After injection (Alias: `@onConnected`). |
+| `@onBeforeDisconnected`| Before element removal. |
+| `@onAfterDisconnected` | After removal and cleanup (Alias: `@onDisconnected`). |
+| `@onAttributeChanged(key)`| When an attribute (or `*`) changes. |
+| `@onAddEventListener` | Callback when any listener is attached. |
+
+---
+
+## 🛠 Built-in Logic Components (`is` Variants)
+
+Every standard tag has logic variants prefixed with `swc-`. Use **`swcValue`** to bind data.
+
+### `swc-for-of-[tag]` (Looping)
 ```html
-<swc-object swc-value="{{user}}" as="u">
-  <div>Name: {{u.name}}</div>
-</swc-object>
+<ul is="swc-for-of-ul" swcValue="{{items}}" as="item" as-index="i">
+  <li>{{i}}. {{item.name}}</li>
+</ul>
 ```
 
-#### `swc-if` / `swc-choose` (Conditional)
-Now supports **Physical DOM Swapping** (elements are actually added/removed from the DOM).
-
+### `swc-if-[tag]` / `swc-choose-[tag]` (Conditionals)
+Elements are physically added/removed from the DOM.
 ```html
-<div is="swc-choose-div" swc-value="{{status}}">
+<div is="swc-choose-div" swcValue="{{status}}">
   <span is="swc-when-span" test="loading">Loading...</span>
-  <div is="swc-other-div">Done!</div>
+  <div is="swc-other-div">Success!</div>
 </div>
 ```
 
-## Usage Example
+### `swc-object-[tag]` (Binding)
+```html
+<div is="swc-object-div" swcValue="{{user}}" as="u">
+  <h3>{{u.name}}</h3>
+</div>
+```
 
-```typescript
-import { elementDefine, innerHtml, query, onConnected } from '@dooboostore/simple-web-component';
+---
 
-@elementDefine({ name: 'my-component' })
-class MyComponent extends HTMLElement {
-  @query('.title') titleEl: HTMLElement;
+## 📜 Full Feature Integration Example
+
+```typescript
+@elementDefine('app-root')
+class AppRoot extends HTMLElement {
+  @state profile = { name: 'John', loggedIn: true };
 
   @onConnected
-  init() {
-    console.log('Component is ready!');
-  }
+  init() { console.log('App Started'); }
 
   @innerHtml({ useShadow: true })
   render() {
-    return `<h1 class="title">Hello World</h1>`;
+    return `
+      <div is="swc-if-div" swcValue="{{profile.loggedIn}}">
+        <h1>Welcome, {{profile.name}}!</h1>
+        <button id="logout">Logout</button>
+      </div>
+    `;
+  }
+
+  @addEventListener({ type: 'click', query: '#logout' })
+  onLogout() {
+    this.profile.loggedIn = false; // Surgical UI change
   }
 }
 ```

package/dist/cjs/decorators/addEventListener.js

@@ -24,9 +24,10 @@ __export(addEventListener_exports, {
 module.exports = __toCommonJS(addEventListener_exports);
 var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
 const ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
-const addEventListener = (options) => {
+function addEventListener(arg1, arg2) {
   return (target, propertyKey, descriptor) => {
     const constructor = target.constructor;
+    const options = typeof arg1 === "string" ? { type: arg1, query: arg2 } : arg1;
     let listeners = import_ReflectUtils.ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
     if (!listeners) {
       listeners = [];
@@ -34,7 +35,7 @@ const addEventListener = (options) => {
     }
     listeners.push({ options, propertyKey });
   };
-};
+}
 const getAddEventListenerMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return import_ReflectUtils.ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);

package/dist/cjs/decorators/addEventListener.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/addEventListener.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AddEventListenerOptions extends EventListenerOptions {\n  selector?: string;\n  eventName: string;\n  useShadow?: boolean;\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n}\n\nexport interface AddEventListenerMetadata {\n  options: AddEventListenerOptions;\n  propertyKey: string | symbol;\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');\n\nexport const addEventListener = (options: AddEventListenerOptions): MethodDecorator => {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n    listeners.push({ options, propertyKey });\n  };\n};\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAgBtB,MAAM,kCAAkC,OAAO,yCAAyC;AAExF,MAAM,mBAAmB,CAAC,YAAsD;AACrF,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,UAAM,cAAc,OAAO;AAE3B,QAAI,YAAY,iCAAa,YAAwC,iCAAiC,WAAW;AACjH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,uCAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AACA,cAAU,KAAK,EAAE,SAAS,YAAY,CAAC;AAAA,EACzC;AACF;AAEO,MAAM,8BAA8B,CAAC,WAAwD;AAClG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,iCAAiC,WAAW;AAC9E;",
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AddEventListenerOptions extends EventListenerOptions {\n  query?: string;\n  type: string;\n  root?: 'light' | 'shadow' | 'all' | 'auto';\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n  stopPropagation?: boolean;\n  stopImmediatePropagation?: boolean;\n  preventDefault?: boolean;\n}\n\nexport interface AddEventListenerMetadata {\n  options: AddEventListenerOptions;\n  propertyKey: string | symbol;\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');\n\nexport function addEventListener(type: string, query?: string): MethodDecorator;\nexport function addEventListener(options: AddEventListenerOptions): MethodDecorator;\nexport function addEventListener(arg1: string | AddEventListenerOptions, arg2?: string): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n    const options: AddEventListenerOptions = typeof arg1 === 'string' ? { type: arg1, query: arg2 } : arg1;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n    listeners.push({ options, propertyKey });\n  };\n}\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAmBtB,MAAM,kCAAkC,OAAO,yCAAyC;AAIxF,SAAS,iBAAiB,MAAwC,MAAgC;AACvG,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,UAAM,cAAc,OAAO;AAC3B,UAAM,UAAmC,OAAO,SAAS,WAAW,EAAE,MAAM,MAAM,OAAO,KAAK,IAAI;AAElG,QAAI,YAAY,iCAAa,YAAwC,iCAAiC,WAAW;AACjH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,uCAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AACA,cAAU,KAAK,EAAE,SAAS,YAAY,CAAC;AAAA,EACzC;AACF;AAEO,MAAM,8BAA8B,CAAC,WAAwD;AAClG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,iCAAiC,WAAW;AAC9E;",
   "names": []
 }

package/dist/cjs/decorators/attribute.js

@@ -0,0 +1,79 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var attribute_exports = {};
+__export(attribute_exports, {
+  ATTRIBUTE_METADATA_KEY: () => ATTRIBUTE_METADATA_KEY,
+  attribute: () => attribute,
+  getAttributeMetadataList: () => getAttributeMetadataList
+});
+module.exports = __toCommonJS(attribute_exports);
+var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
+const ATTRIBUTE_METADATA_KEY = Symbol("simple-web-component:attribute");
+function attribute(nameOrOptions) {
+  return (target, propertyKey) => {
+    const constructor = target.constructor;
+    const options = typeof nameOrOptions === "string" ? { name: nameOrOptions } : nameOrOptions || {};
+    if (!options.name) options.name = String(propertyKey);
+    if (!options.type) options.type = String;
+    if (options.disableReflect === void 0) options.disableReflect = false;
+    let list = import_ReflectUtils.ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      import_ReflectUtils.ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+    const internalKey = Symbol(String(propertyKey));
+    Object.defineProperty(target, propertyKey, {
+      get() {
+        return this[internalKey];
+      },
+      set(val) {
+        const oldVal = this[internalKey];
+        if (oldVal === val) return;
+        let convertedVal = val;
+        if (options.type === Number) convertedVal = Number(val);
+        else if (options.type === Boolean) convertedVal = Boolean(val);
+        else if (options.type === Object && typeof val === "string") {
+          try {
+            convertedVal = JSON.parse(val);
+          } catch (e) {
+            convertedVal = val;
+          }
+        }
+        this[internalKey] = convertedVal;
+        if (!options.disableReflect && this.setAttribute) {
+          if (convertedVal === null || convertedVal === void 0 || convertedVal === false) {
+            this.removeAttribute(options.name);
+          } else {
+            const attrVal = typeof convertedVal === "object" ? JSON.stringify(convertedVal) : String(convertedVal);
+            if (this.getAttribute(options.name) !== attrVal) {
+              this.setAttribute(options.name, attrVal);
+            }
+          }
+        }
+      },
+      enumerable: true,
+      configurable: true
+    });
+  };
+}
+const getAttributeMetadataList = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return import_ReflectUtils.ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);
+};
+//# sourceMappingURL=attribute.js.map

package/dist/cjs/decorators/attribute.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/decorators/attribute.ts"],
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AttributeOptions {\n  name?: string;\n  type?: any; // String, Number, Boolean, Object\n  disableReflect?: boolean; // Default is false (reflect is enabled by default)\n}\n\nexport interface AttributeMetadata {\n  propertyKey: string | symbol;\n  options: AttributeOptions;\n}\n\nexport const ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:attribute');\n\nexport function attribute(nameOrOptions?: string | AttributeOptions): PropertyDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    const options: AttributeOptions = typeof nameOrOptions === 'string' ? { name: nameOrOptions } : nameOrOptions || {};\n\n    if (!options.name) options.name = String(propertyKey);\n    if (!options.type) options.type = String;\n    if (options.disableReflect === undefined) options.disableReflect = false;\n\n    let list = ReflectUtils.getMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, constructor);\n    if (!list) {\n      list = [];\n      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, list, constructor);\n    }\n    list.push({ propertyKey, options });\n\n    // Define getter and setter for the property\n    const internalKey = Symbol(String(propertyKey));\n    Object.defineProperty(target, propertyKey, {\n      get(this: any) {\n        return this[internalKey];\n      },\n      set(this: any, val: any) {\n        const oldVal = this[internalKey];\n        if (oldVal === val) return;\n\n        // Type conversion\n        let convertedVal = val;\n        if (options.type === Number) convertedVal = Number(val);\n        else if (options.type === Boolean) convertedVal = Boolean(val);\n        else if (options.type === Object && typeof val === 'string') {\n          try {\n            convertedVal = JSON.parse(val);\n          } catch (e) {\n            convertedVal = val;\n          }\n        }\n\n        this[internalKey] = convertedVal;\n\n        // Reflection\n        if (!options.disableReflect && this.setAttribute) {\n          if (convertedVal === null || convertedVal === undefined || convertedVal === false) {\n            this.removeAttribute(options.name);\n          } else {\n            const attrVal = typeof convertedVal === 'object' ? JSON.stringify(convertedVal) : String(convertedVal);\n            if (this.getAttribute(options.name) !== attrVal) {\n              this.setAttribute(options.name, attrVal);\n            }\n          }\n        }\n      },\n      enumerable: true,\n      configurable: true\n    });\n  };\n}\n\nexport const getAttributeMetadataList = (target: any): AttributeMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAatB,MAAM,yBAAyB,OAAO,gCAAgC;AAEtE,SAAS,UAAU,eAA8D;AACtF,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,cAAc,OAAO;AAC3B,UAAM,UAA4B,OAAO,kBAAkB,WAAW,EAAE,MAAM,cAAc,IAAI,iBAAiB,CAAC;AAElH,QAAI,CAAC,QAAQ,KAAM,SAAQ,OAAO,OAAO,WAAW;AACpD,QAAI,CAAC,QAAQ,KAAM,SAAQ,OAAO;AAClC,QAAI,QAAQ,mBAAmB,OAAW,SAAQ,iBAAiB;AAEnE,QAAI,OAAO,iCAAa,YAAiC,wBAAwB,WAAW;AAC5F,QAAI,CAAC,MAAM;AACT,aAAO,CAAC;AACR,uCAAa,eAAe,wBAAwB,MAAM,WAAW;AAAA,IACvE;AACA,SAAK,KAAK,EAAE,aAAa,QAAQ,CAAC;AAGlC,UAAM,cAAc,OAAO,OAAO,WAAW,CAAC;AAC9C,WAAO,eAAe,QAAQ,aAAa;AAAA,MACzC,MAAe;AACb,eAAO,KAAK,WAAW;AAAA,MACzB;AAAA,MACA,IAAe,KAAU;AACvB,cAAM,SAAS,KAAK,WAAW;AAC/B,YAAI,WAAW,IAAK;AAGpB,YAAI,eAAe;AACnB,YAAI,QAAQ,SAAS,OAAQ,gBAAe,OAAO,GAAG;AAAA,iBAC7C,QAAQ,SAAS,QAAS,gBAAe,QAAQ,GAAG;AAAA,iBACpD,QAAQ,SAAS,UAAU,OAAO,QAAQ,UAAU;AAC3D,cAAI;AACF,2BAAe,KAAK,MAAM,GAAG;AAAA,UAC/B,SAAS,GAAG;AACV,2BAAe;AAAA,UACjB;AAAA,QACF;AAEA,aAAK,WAAW,IAAI;AAGpB,YAAI,CAAC,QAAQ,kBAAkB,KAAK,cAAc;AAChD,cAAI,iBAAiB,QAAQ,iBAAiB,UAAa,iBAAiB,OAAO;AACjF,iBAAK,gBAAgB,QAAQ,IAAI;AAAA,UACnC,OAAO;AACL,kBAAM,UAAU,OAAO,iBAAiB,WAAW,KAAK,UAAU,YAAY,IAAI,OAAO,YAAY;AACrG,gBAAI,KAAK,aAAa,QAAQ,IAAI,MAAM,SAAS;AAC/C,mBAAK,aAAa,QAAQ,MAAM,OAAO;AAAA,YACzC;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,MACZ,cAAc;AAAA,IAChB,CAAC;AAAA,EACH;AACF;AAEO,MAAM,2BAA2B,CAAC,WAAiD;AACxF,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,wBAAwB,WAAW;AACrE;",
+  "names": []
+}