juxscript 1.1.4 → 1.1.6

package/lib/components/tabs.d.ts

@@ -0,0 +1,36 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface Tab {
+    id: string;
+    label: string;
+    content: string | HTMLElement;
+    icon?: string;
+}
+export interface TabsOptions {
+    tabs?: Tab[];
+    activeTab?: string;
+    variant?: 'default' | 'pills' | 'underline';
+    style?: string;
+    class?: string;
+}
+type TabsState = {
+    tabs: Tab[];
+    activeTab: string;
+    variant: string;
+    style: string;
+    class: string;
+};
+export declare class Tabs extends BaseComponent<TabsState> {
+    constructor(id: string, options?: TabsOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    tabs(value: Tab[]): this;
+    addTab(tab: Tab): this;
+    activeTab(value: string): this;
+    variant(value: 'default' | 'pills' | 'underline'): this;
+    private _updateActiveTab;
+    render(targetId?: string): this;
+    private _switchTab;
+}
+export declare function tabs(id: string, options?: TabsOptions): Tabs;
+export {};
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAUjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAUhD,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI;IAKxB,MAAM,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IAKtB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM9B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,IAAI;IAKvD,OAAO,CAAC,gBAAgB;IAoBxB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAwI/B,OAAO,CAAC,UAAU;CAcnB;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/tabs.js

@@ -0,0 +1,198 @@
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['tabChange'];
+export class Tabs extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            tabs: options.tabs ?? [],
+            activeTab: options.activeTab ?? (options.tabs?.[0]?.id ?? ''),
+            variant: options.variant ?? 'default',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from BaseComponent
+    tabs(value) {
+        this.state.tabs = value;
+        return this;
+    }
+    addTab(tab) {
+        this.state.tabs = [...this.state.tabs, tab];
+        return this;
+    }
+    activeTab(value) {
+        this.state.activeTab = value;
+        this._updateActiveTab();
+        return this;
+    }
+    variant(value) {
+        this.state.variant = value;
+        return this;
+    }
+    _updateActiveTab() {
+        if (!this.container)
+            return;
+        const wrapper = this.container.querySelector(`#${this._id}`);
+        if (!wrapper)
+            return;
+        wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
+            btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === this.state.activeTab);
+        });
+        wrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
+            const isActive = panel.getAttribute('data-tab') === this.state.activeTab;
+            panel.classList.toggle('jux-tabs-panel-active', isActive);
+            panel.style.display = isActive ? 'block' : 'none';
+        });
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { tabs, activeTab, variant, style, class: className } = this.state;
+        const hasActiveTabSync = this._syncBindings.some(b => b.property === 'activeTab');
+        const wrapper = document.createElement('div');
+        wrapper.className = `jux-tabs jux-tabs-${variant}`;
+        wrapper.id = this._id;
+        if (className)
+            wrapper.className += ` ${className}`;
+        if (style)
+            wrapper.setAttribute('style', style);
+        const tabList = document.createElement('div');
+        tabList.className = 'jux-tabs-list';
+        const tabPanels = document.createElement('div');
+        tabPanels.className = 'jux-tabs-panels';
+        tabs.forEach(tab => {
+            const tabButton = document.createElement('button');
+            tabButton.className = 'jux-tabs-button';
+            tabButton.setAttribute('data-tab', tab.id);
+            if (tab.id === activeTab)
+                tabButton.classList.add('jux-tabs-button-active');
+            tabButton.textContent = tab.label;
+            tabList.appendChild(tabButton);
+            const tabPanel = document.createElement('div');
+            tabPanel.className = 'jux-tabs-panel';
+            tabPanel.setAttribute('data-tab', tab.id);
+            if (tab.id === activeTab) {
+                tabPanel.classList.add('jux-tabs-panel-active');
+            }
+            else {
+                tabPanel.style.display = 'none';
+            }
+            if (typeof tab.content === 'string') {
+                tabPanel.innerHTML = tab.content;
+            }
+            else {
+                tabPanel.appendChild(tab.content);
+            }
+            tabPanels.appendChild(tabPanel);
+        });
+        wrapper.appendChild(tabList);
+        wrapper.appendChild(tabPanels);
+        if (!hasActiveTabSync) {
+            tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
+                button.addEventListener('click', () => {
+                    const tabId = button.getAttribute('data-tab');
+                    this.state.activeTab = tabId;
+                    this._switchTab(tabId, wrapper);
+                });
+            });
+        }
+        this._wireStandardEvents(wrapper);
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'activeTab') {
+                const transformToState = toState || ((v) => String(v));
+                const transformToComponent = toComponent || ((v) => String(v));
+                let isUpdating = false;
+                stateObj.subscribe((val) => {
+                    if (isUpdating)
+                        return;
+                    const transformed = transformToComponent(val);
+                    this.state.activeTab = transformed;
+                    this._switchTab(transformed, wrapper);
+                });
+                tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
+                    button.addEventListener('click', () => {
+                        if (isUpdating)
+                            return;
+                        isUpdating = true;
+                        const tabId = button.getAttribute('data-tab');
+                        this.state.activeTab = tabId;
+                        this._switchTab(tabId, wrapper);
+                        const transformed = transformToState(tabId);
+                        stateObj.set(transformed);
+                        setTimeout(() => { isUpdating = false; }, 0);
+                    });
+                });
+            }
+            else if (property === 'tabs') {
+                const transform = toComponent || ((v) => v);
+                stateObj.subscribe((val) => {
+                    const transformed = transform(val);
+                    this.state.tabs = transformed;
+                    tabList.innerHTML = '';
+                    tabPanels.innerHTML = '';
+                    transformed.forEach((tab) => {
+                        const tabButton = document.createElement('button');
+                        tabButton.className = 'jux-tabs-button';
+                        tabButton.setAttribute('data-tab', tab.id);
+                        if (tab.id === this.state.activeTab)
+                            tabButton.classList.add('jux-tabs-button-active');
+                        tabButton.textContent = tab.label;
+                        tabList.appendChild(tabButton);
+                        const tabPanel = document.createElement('div');
+                        tabPanel.className = 'jux-tabs-panel';
+                        tabPanel.setAttribute('data-tab', tab.id);
+                        if (tab.id === this.state.activeTab) {
+                            tabPanel.classList.add('jux-tabs-panel-active');
+                        }
+                        else {
+                            tabPanel.style.display = 'none';
+                        }
+                        if (typeof tab.content === 'string') {
+                            tabPanel.innerHTML = tab.content;
+                        }
+                        else {
+                            tabPanel.appendChild(tab.content);
+                        }
+                        tabPanels.appendChild(tabPanel);
+                    });
+                    tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
+                        button.addEventListener('click', () => {
+                            const tabId = button.getAttribute('data-tab');
+                            this.state.activeTab = tabId;
+                            this._switchTab(tabId, wrapper);
+                        });
+                    });
+                });
+            }
+        });
+        container.appendChild(wrapper);
+        return this;
+    }
+    _switchTab(tabId, wrapper) {
+        wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
+            btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === tabId);
+        });
+        wrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
+            const isActive = panel.getAttribute('data-tab') === tabId;
+            panel.classList.toggle('jux-tabs-panel-active', isActive);
+            panel.style.display = isActive ? 'block' : 'none';
+        });
+        // 🎯 Fire the tabChange callback event
+        this._triggerCallback('tabChange', tabId);
+    }
+}
+export function tabs(id, options = {}) {
+    return new Tabs(id, options);
+}

package/lib/components/tabs.ts

@@ -0,0 +1,250 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['tabChange'] as const;
+
+export interface Tab {
+  id: string;
+  label: string;
+  content: string | HTMLElement;
+  icon?: string;
+}
+
+export interface TabsOptions {
+  tabs?: Tab[];
+  activeTab?: string;
+  variant?: 'default' | 'pills' | 'underline';
+  style?: string;
+  class?: string;
+}
+
+type TabsState = {
+  tabs: Tab[];
+  activeTab: string;
+  variant: string;
+  style: string;
+  class: string;
+};
+
+export class Tabs extends BaseComponent<TabsState> {
+  constructor(id: string, options: TabsOptions = {}) {
+    super(id, {
+      tabs: options.tabs ?? [],
+      activeTab: options.activeTab ?? (options.tabs?.[0]?.id ?? ''),
+      variant: options.variant ?? 'default',
+      style: options.style ?? '',
+      class: options.class ?? ''
+    });
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
+
+  tabs(value: Tab[]): this {
+    this.state.tabs = value;
+    return this;
+  }
+
+  addTab(tab: Tab): this {
+    this.state.tabs = [...this.state.tabs, tab];
+    return this;
+  }
+
+  activeTab(value: string): this {
+    this.state.activeTab = value;
+    this._updateActiveTab();
+    return this;
+  }
+
+  variant(value: 'default' | 'pills' | 'underline'): this {
+    this.state.variant = value;
+    return this;
+  }
+
+  private _updateActiveTab(): void {
+    if (!this.container) return;
+    const wrapper = this.container.querySelector(`#${this._id}`);
+    if (!wrapper) return;
+
+    wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
+      btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === this.state.activeTab);
+    });
+
+    wrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
+      const isActive = panel.getAttribute('data-tab') === this.state.activeTab;
+      panel.classList.toggle('jux-tabs-panel-active', isActive);
+      (panel as HTMLElement).style.display = isActive ? 'block' : 'none';
+    });
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
+  render(targetId?: string): this {
+    const container = this._setupContainer(targetId);
+
+    const { tabs, activeTab, variant, style, class: className } = this.state;
+    const hasActiveTabSync = this._syncBindings.some(b => b.property === 'activeTab');
+
+    const wrapper = document.createElement('div');
+    wrapper.className = `jux-tabs jux-tabs-${variant}`;
+    wrapper.id = this._id;
+    if (className) wrapper.className += ` ${className}`;
+    if (style) wrapper.setAttribute('style', style);
+
+    const tabList = document.createElement('div');
+    tabList.className = 'jux-tabs-list';
+
+    const tabPanels = document.createElement('div');
+    tabPanels.className = 'jux-tabs-panels';
+
+    tabs.forEach(tab => {
+      const tabButton = document.createElement('button');
+      tabButton.className = 'jux-tabs-button';
+      tabButton.setAttribute('data-tab', tab.id);
+      if (tab.id === activeTab) tabButton.classList.add('jux-tabs-button-active');
+      tabButton.textContent = tab.label;
+      tabList.appendChild(tabButton);
+
+      const tabPanel = document.createElement('div');
+      tabPanel.className = 'jux-tabs-panel';
+      tabPanel.setAttribute('data-tab', tab.id);
+      if (tab.id === activeTab) {
+        tabPanel.classList.add('jux-tabs-panel-active');
+      } else {
+        tabPanel.style.display = 'none';
+      }
+      if (typeof tab.content === 'string') {
+        tabPanel.innerHTML = tab.content;
+      } else {
+        tabPanel.appendChild(tab.content);
+      }
+      tabPanels.appendChild(tabPanel);
+    });
+
+    wrapper.appendChild(tabList);
+    wrapper.appendChild(tabPanels);
+
+    if (!hasActiveTabSync) {
+      tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
+        button.addEventListener('click', () => {
+          const tabId = button.getAttribute('data-tab')!;
+          this.state.activeTab = tabId;
+          this._switchTab(tabId, wrapper);
+        });
+      });
+    }
+
+    this._wireStandardEvents(wrapper);
+
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'activeTab') {
+        const transformToState = toState || ((v: any) => String(v));
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        let isUpdating = false;
+
+        stateObj.subscribe((val: any) => {
+          if (isUpdating) return;
+          const transformed = transformToComponent(val);
+          this.state.activeTab = transformed;
+          this._switchTab(transformed, wrapper);
+        });
+
+        tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
+          button.addEventListener('click', () => {
+            if (isUpdating) return;
+            isUpdating = true;
+
+            const tabId = button.getAttribute('data-tab')!;
+            this.state.activeTab = tabId;
+            this._switchTab(tabId, wrapper);
+
+            const transformed = transformToState(tabId);
+            stateObj.set(transformed);
+
+            setTimeout(() => { isUpdating = false; }, 0);
+          });
+        });
+      }
+      else if (property === 'tabs') {
+        const transform = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          this.state.tabs = transformed;
+
+          tabList.innerHTML = '';
+          tabPanels.innerHTML = '';
+
+          transformed.forEach((tab: any) => {
+            const tabButton = document.createElement('button');
+            tabButton.className = 'jux-tabs-button';
+            tabButton.setAttribute('data-tab', tab.id);
+            if (tab.id === this.state.activeTab) tabButton.classList.add('jux-tabs-button-active');
+            tabButton.textContent = tab.label;
+            tabList.appendChild(tabButton);
+
+            const tabPanel = document.createElement('div');
+            tabPanel.className = 'jux-tabs-panel';
+            tabPanel.setAttribute('data-tab', tab.id);
+            if (tab.id === this.state.activeTab) {
+              tabPanel.classList.add('jux-tabs-panel-active');
+            } else {
+              tabPanel.style.display = 'none';
+            }
+            if (typeof tab.content === 'string') {
+              tabPanel.innerHTML = tab.content;
+            } else {
+              tabPanel.appendChild(tab.content);
+            }
+            tabPanels.appendChild(tabPanel);
+          });
+
+          tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
+            button.addEventListener('click', () => {
+              const tabId = button.getAttribute('data-tab')!;
+              this.state.activeTab = tabId;
+              this._switchTab(tabId, wrapper);
+            });
+          });
+        });
+      }
+    });
+
+    container.appendChild(wrapper);
+    return this;
+  }
+
+  private _switchTab(tabId: string, wrapper: HTMLElement): void {
+    wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
+      btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === tabId);
+    });
+
+    wrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
+      const isActive = panel.getAttribute('data-tab') === tabId;
+      panel.classList.toggle('jux-tabs-panel-active', isActive);
+      (panel as HTMLElement).style.display = isActive ? 'block' : 'none';
+    });
+
+    // 🎯 Fire the tabChange callback event
+    this._triggerCallback('tabChange', tabId);
+  }
+}
+
+export function tabs(id: string, options: TabsOptions = {}): Tabs {
+  return new Tabs(id, options);
+}

package/lib/components/theme-toggle.d.ts

@@ -0,0 +1,44 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface Theme {
+    id: string;
+    label: string;
+    icon?: string;
+    iconCollection?: string;
+}
+export interface ThemeToggleOptions {
+    themes?: Theme[];
+    defaultTheme?: string;
+    storageKey?: string;
+    showLabel?: boolean;
+    variant?: 'button' | 'dropdown' | 'cycle';
+    style?: string;
+    class?: string;
+}
+type ThemeToggleState = {
+    themes: Theme[];
+    currentTheme: string;
+    storageKey: string;
+    showLabel: boolean;
+    variant: string;
+    style: string;
+    class: string;
+};
+export declare class ThemeToggle extends BaseComponent<ThemeToggleState> {
+    constructor(id: string, options?: ThemeToggleOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    private static detectTheme;
+    themes(value: Theme[]): this;
+    variant(value: 'button' | 'dropdown' | 'cycle'): this;
+    showLabel(value: boolean): this;
+    setTheme(themeId: string): this;
+    getTheme(): string;
+    addTheme(theme: Theme): this;
+    private applyTheme;
+    private cycleTheme;
+    private _updateDOM;
+    render(targetId?: string): this;
+}
+export declare function themeToggle(id: string, options?: ThemeToggleOptions): ThemeToggle;
+export {};
+//# sourceMappingURL=theme-toggle.d.ts.map

package/lib/components/theme-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["theme-toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,KAAK;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB;IAC/B,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,gBAAgB,GAAG;IACpB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,WAAY,SAAQ,aAAa,CAAC,gBAAgB,CAAC;gBAChD,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,kBAAuB;IAoBxD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,OAAO,CAAC,MAAM,CAAC,WAAW;IAsB1B,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI;IAK5B,OAAO,CAAC,KAAK,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,IAAI;IAKrD,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAe/B,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAW5B,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,UAAU;IA0ClB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAmFlC;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,kBAAuB,GAAG,WAAW,CAErF"}