@dooboostore/simple-web-component 1.0.7 → 1.0.9

package/README.md

@@ -1,196 +1,124 @@
-# @dooboostore/simple-web-component
+# ✨ @dooboostore/simple-web-component
 
-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.
+> **Modern Reactivity meets Native Web Standards.** 
+> Build high-performance UIs with pinpoint precision, leveraging the power of Web Components without the Virtual DOM overhead.
 
-## 🚀 Why @dooboostore/simple-web-component?
+---
 
-- **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.
+## 🌈 Why SWC?
 
----
+In a world of heavy frameworks, **SWC** (Simple Web Component) stands out by being invisible. It doesn't fight the browser; it enhances it. 
 
-## 📦 Installation
+### 🎯 Surgical Updates (No VDOM!)
+Forget full-tree diffing. SWC uses a **Proxy-based reactivity engine** that maps data changes directly to specific **Text Nodes** or **Attributes**. When a property changes, only that tiny piece of the DOM updates. It's not just fast; it's surgically precise.
 
-```bash
-pnpm add @dooboostore/simple-web-component
-```
+### 🧩 Pure Web Standards
+SWC is built on **Customized Built-in Elements**. Use the native `is` attribute to supercharge standard tags like `<ul>`, `<table>`, or `<template>`. Your HTML remains semantic, accessible, and SEO-friendly.
 
-### 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';
-```
+### ⚡ Zero-JS Logic (Declarative Attributes)
+Write less code. Handle complex events and lifecycles directly in your HTML. SWC parses your attributes and turns them into high-performance execution blocks.
 
 ---
 
-## 💡 Practical Showcase
+## 🚀 The "Sexy" SPA Pattern
 
-### 1. Basic Reactive Component
-A counter where only the number part is updated in the DOM when you click.
+SWC redefines routing. By combining `replaceChildren` with Shadow DOM `<slot>`, you get instant, flicker-free transitions while keeping your layout logic perfectly encapsulated.
 
 ```typescript
-import { elementDefine, innerHtml, state, addEventListener } from '@dooboostore/simple-web-component';
-
-@elementDefine('my-counter')
-class MyCounter extends HTMLElement {
-  @state count = 0;
-
-  @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!
+@elementDefine('app-router')
+class AppRouter extends HTMLElement {
+  async canActivate(url: RoutingDataSet, data?: any) {
+    // Only swap if the page actually changes
+    if (data instanceof Node && !this.contains(data)) {
+       this.replaceChildren(data); // 👈 Atomic, high-performance swap
+    }
   }
-}
-```
-
-### 2. Nested Scopes with `as="alias"`
-Access parent data from deeply nested children without naming collisions.
-
-```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 -->
+      <header>My Sexy App</header>
+      <main><slot></slot></main> <!-- 👈 Routed pages dock here automatically -->
     `;
   }
 }
 ```
-```html
-<parent-comp as="p">
-  <child-comp as="c"></child-comp>
-</parent-comp>
-```
 
 ---
 
-## 📑 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.
+## ⚡ Hierarchical Power ($host, $hosts)
 
----
+Stop prop-drilling. SWC provides a built-in hierarchical context for all declarative events and lifecycles.
 
-## ⏳ Lifecycle Hooks
-Multiple methods per hook are supported.
+- **`this`**: The element itself.
+- **`$host`**: The nearest parent SWC component (the logic owner).
+- **`$hosts`**: The full lineage `[Root, ..., Parent]`.
+- **`$firstHost`**: The top-most Root component.
 
-| 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. |
+```html
+<!-- Control your parent component directly from a plain button -->
+<button swc-on-click="$host.user.active = true; this.style.color='red';">
+  Activate & Style Me
+</button>
+```
 
 ---
 
-## 🛠 Built-in Logic Components (`is` Variants)
+## 🛠 Reactive Logic Components (`is` Variants)
 
-Every standard tag has logic variants prefixed with `swc-`. Use **`swcValue`** to bind data.
+SWC supercharges standard HTML tags using the native `is` attribute. This keeps your DOM semantic while adding powerful reactive logic.
 
-### `swc-for-of-[tag]` (Looping)
+### 1. Dynamic Lists (`swc-for-of`)
+Supports high-performance `addRow` and `removeRow` for pinpoint list management.
 ```html
-<ul is="swc-for-of-ul" swcValue="{{items}}" as="item" as-index="i">
-  <li>{{i}}. {{item.name}}</li>
+<!-- The <ul> remains, <li>s are surgically added/removed -->
+<ul is="swc-for-of-children-ul" swc-value="{{items}}" as="item">
+  <li>{{index + 1}}. {{item.title}}</li>
 </ul>
 ```
 
-### `swc-if-[tag]` / `swc-choose-[tag]` (Conditionals)
-Elements are physically added/removed from the DOM.
+### 2. Conditional Rendering (`swc-if`)
+Choose between physical removal or content swapping.
+- **`swc-if-[tag]`**: Truly removes the element from the DOM (leaving a comment placeholder).
+- **`swc-if-children-[tag]`**: Keeps the element (wrapper) but swaps its internal children.
+
 ```html
-<div is="swc-choose-div" swcValue="{{status}}">
-  <span is="swc-when-span" test="loading">Loading...</span>
-  <div is="swc-other-div">Success!</div>
+<div is="swc-if-div" swc-value="{{isAdmin}}">
+  <p>Sensitive Admin Panel</p>
 </div>
 ```
 
-### `swc-object-[tag]` (Binding)
+### 3. Powerful Branching (`swc-choose`)
 ```html
-<div is="swc-object-div" swcValue="{{user}}" as="u">
-  <h3>{{u.name}}</h3>
+<div is="swc-choose-div" swc-value="{{status}}">
+  <span is="swc-when-span" test="'loading'">⌛ Loading...</span>
+  <span is="swc-when-span" test="'success'">✅ Success!</span>
+  <span is="swc-other-span">❌ Unknown Error</span>
 </div>
 ```
 
 ---
 
-## 📜 Full Feature Integration Example
+## 📑 API Quick Start
 
-```typescript
-@elementDefine('app-root')
-class AppRoot extends HTMLElement {
-  @state profile = { name: 'John', loggedIn: true };
+| Decorator | Description |
+| :--- | :--- |
+| **`@elementDefine`** | Registers your class as a Custom Element. |
+| **`@innerHtml`** | Defines markup (supports async/shadow DOM). |
+| **`@state`** | Creates reactive properties for surgical updates. |
+| **`@attribute`** | Syncs JS properties with HTML attributes automatically. |
+| **`@query`** | Lazy-loads elements from Shadow or Light DOM. |
+| **`@addEventListener`** | Declarative event binding with auto-cleanup. |
 
-  @onConnected
-  init() { console.log('App Started'); }
+---
 
-  @innerHtml({ useShadow: true })
-  render() {
-    return `
-      <div is="swc-if-div" swcValue="{{profile.loggedIn}}">
-        <h1>Welcome, {{profile.name}}!</h1>
-        <button id="logout">Logout</button>
-      </div>
-    `;
-  }
+## 📦 Installation
 
-  @addEventListener({ type: 'click', query: '#logout' })
-  onLogout() {
-    this.profile.loggedIn = false; // Surgical UI change
-  }
-}
+```bash
+pnpm add @dooboostore/simple-web-component
 ```
 
-## License
+*Note: Requires `reflect-metadata` and `@ungap/custom-elements` for Safari support.*
+
+## 📜 License
 MIT

package/dist/cjs/decorators/attribute.js

@@ -24,10 +24,9 @@ __export(attribute_exports, {
 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) => {
+function attribute(arg1, arg2) {
+  const decorator = (options, 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;
@@ -56,6 +55,9 @@ function attribute(nameOrOptions) {
           }
         }
         this[internalKey] = convertedVal;
+        if (typeof this._updateState === "function") {
+          this._updateState(options.name);
+        }
         if (!options.disableReflect && this.setAttribute) {
           if (convertedVal === null || convertedVal === void 0 || convertedVal === false) {
             this.removeAttribute(options.name);
@@ -71,6 +73,13 @@ function attribute(nameOrOptions) {
       configurable: true
     });
   };
+  if (arg1 && typeof arg2 === "string") {
+    return decorator({}, arg1, arg2);
+  }
+  return (target, propertyKey) => {
+    const options = typeof arg1 === "string" ? { name: arg1 } : arg1 || {};
+    decorator(options, target, propertyKey);
+  };
 }
 const getAttributeMetadataList = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;

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

@@ -1,7 +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;",
+  "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;\nexport function attribute(target: Object, propertyKey: string | symbol): void;\nexport function attribute(arg1?: string | AttributeOptions | Object, arg2?: string | symbol): any {\n  const decorator = (options: AttributeOptions, target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\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        // Surgical Update Trigger\n        if (typeof (this as any)._updateState === 'function') {\n          (this as any)._updateState(options.name);\n        }\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  // Case: @attribute (parameterless decorator)\n  if (arg1 && typeof arg2 === 'string') {\n    return decorator({}, arg1 as Object, arg2 as string | symbol);\n  }\n\n  // Case: @attribute('name') or @attribute({ ... })\n  return (target: Object, propertyKey: string | symbol) => {\n    const options: AttributeOptions = typeof arg1 === 'string' ? { name: arg1 } : (arg1 as AttributeOptions) || {};\n    decorator(options, target, propertyKey);\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;AAItE,SAAS,UAAU,MAA2C,MAA6B;AAChG,QAAM,YAAY,CAAC,SAA2B,QAAgB,gBAAiC;AAC7F,UAAM,cAAc,OAAO;AAC3B,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,OAAQ,KAAa,iBAAiB,YAAY;AACpD,UAAC,KAAa,aAAa,QAAQ,IAAI;AAAA,QACzC;AAGA,YAAI,CAAC,QAAQ,kBAAkB,KAAK,cAAc;AAChD,cAAI,iBAAiB,QAAQ,iBAAiB,UAAa,iBAAiB,OAAO;AACjF,iBAAK,gBAAgB,QAAQ,IAAK;AAAA,UACpC,OAAO;AACL,kBAAM,UAAU,OAAO,iBAAiB,WAAW,KAAK,UAAU,YAAY,IAAI,OAAO,YAAY;AACrG,gBAAI,KAAK,aAAa,QAAQ,IAAK,MAAM,SAAS;AAChD,mBAAK,aAAa,QAAQ,MAAO,OAAO;AAAA,YAC1C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,MACZ,cAAc;AAAA,IAChB,CAAC;AAAA,EACH;AAGA,MAAI,QAAQ,OAAO,SAAS,UAAU;AACpC,WAAO,UAAU,CAAC,GAAG,MAAgB,IAAuB;AAAA,EAC9D;AAGA,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,UAA4B,OAAO,SAAS,WAAW,EAAE,MAAM,KAAK,IAAK,QAA6B,CAAC;AAC7G,cAAU,SAAS,QAAQ,WAAW;AAAA,EACxC;AACF;AAEO,MAAM,2BAA2B,CAAC,WAAiD;AACxF,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,wBAAwB,WAAW;AACrE;",
   "names": []
 }