@ixfx/components 0.2.2 → 0.2.4

package/dist/tabs/tab-list.js

@@ -5,57 +5,115 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, LitElement } from "lit";
-import { customElement, property, queryAssignedElements } from "lit/decorators.js";
-import { TabListItemElement } from "./tab-list-item.js";
-/**
- * Events
- * * 'change' - new tab selected { previous:string, selected:string, for:string }
- */
+import { customElement, property } from "lit/decorators.js";
 let TabListElement = class TabListElement extends LitElement {
     constructor() {
         super(...arguments);
-        this.horizontal = true;
+        this.orientation = `horizontal`;
+        this.flip = false;
+        this.scrollable = false;
+        this.#items = [];
+        this.#onSlotChange = () => {
+            this.updateComplete.then(() => {
+                this.#items = this.shadowRoot?.querySelector(`slot`)
+                    ?.assignedElements({ flatten: true }) ?? [];
+                this.#syncIndicatorColors();
+            });
+        };
         this.#onKeyUp = (event) => {
             const key = event.key;
-            if (key === `ArrowUp` && !this.horizontal) {
-                this.#selectPrevious();
-                return;
-            }
-            else if (key === `ArrowDown` && !this.horizontal) {
-                this.#selectNext();
-                return;
-            }
-            else if (key === `ArrowRight` && this.horizontal) {
-                this.#selectNext();
-                return;
+            if (this.#isVertical) {
+                if (key === `ArrowUp`) {
+                    this.#selectPrevious();
+                }
+                else if (key === `ArrowDown`) {
+                    this.#selectNext();
+                }
             }
-            else if (key === `ArrowLeft` && this.horizontal) {
-                this.#selectPrevious();
-                return;
+            else {
+                if (key === `ArrowRight`) {
+                    this.#selectNext();
+                }
+                else if (key === `ArrowLeft`) {
+                    this.#selectPrevious();
+                }
             }
         };
         this.#onSlotClick = (event) => {
             this.focus();
-            const t = event.target;
+            const t = event.target.closest(`ixfx-tab-list-item`);
+            if (!t)
+                return;
             const previous = this.getSelectedElement();
             this.selectElement(t);
             const forId = t.getAttribute(`for`);
+            const previousId = previous?.id;
             this.dispatchEvent(new CustomEvent(`change`, {
+                bubbles: true,
                 detail: {
-                    previous, selected: t.id, for: forId ?? ``
-                }
+                    previous: previousId,
+                    selected: t.id,
+                    for: forId ?? ``,
+                },
             }));
         };
     }
+    #items;
+    get #isVertical() {
+        return this.orientation === `vertical-stack` || this.orientation === `vertical-side`;
+    }
+    get #containerClass() {
+        return this.scrollable ? `${this.orientation} scrollable` : this.orientation;
+    }
     render() {
         return html `
-    <div tabindex=0 @keyup=${this.#onKeyUp} @click=${this.#onSlotClick} id="container" class=${this.horizontal ? `horizontal` : `vertical`}>
-      <slot></slot>
+    <div 
+      tabindex=0 
+      @keyup=${this.#onKeyUp} 
+      @click=${this.#onSlotClick} 
+      id="container" 
+      class=${this.#containerClass}
+    >
+      <slot @slotchange=${this.#onSlotChange}></slot>
     </div>`;
     }
+    #onSlotChange;
+    firstUpdated() {
+        this.updateComplete.then(() => {
+            if (this.#items.length > 0) {
+                this.#syncIndicatorColors();
+            }
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.classList.toggle('scrollable', this.scrollable);
+    }
+    #syncIndicatorColors() {
+        for (const item of this.#items) {
+            item.style.setProperty(`--indicator-color-bottom`, `transparent`);
+            item.style.setProperty(`--indicator-color-top`, `transparent`);
+            item.style.setProperty(`--indicator-color-left`, `transparent`);
+            item.style.setProperty(`--indicator-color-right`, `transparent`);
+            if (item.hasAttribute(`selected`)) {
+                if (this.orientation === `horizontal` && !this.flip) {
+                    item.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);
+                }
+                else if (this.orientation === `horizontal` && this.flip) {
+                    item.style.setProperty(`--indicator-color-top`, `var(--accent)`);
+                }
+                else if (this.#isVertical && !this.flip) {
+                    item.style.setProperty(`--indicator-color-right`, `var(--accent)`);
+                }
+                else if (this.#isVertical && this.flip) {
+                    item.style.setProperty(`--indicator-color-left`, `var(--accent)`);
+                }
+            }
+        }
+    }
     #onKeyUp;
     getSelectedElement() {
-        for (const el of this._listItems) {
+        for (const el of this.#items) {
             if (this.#isSelected(el))
                 return el;
         }
@@ -70,12 +128,28 @@ let TabListElement = class TabListElement extends LitElement {
         const existing = this.getSelectedElement();
         if (existing) {
             existing.removeAttribute(`selected`);
+            existing.style.setProperty(`--indicator-color-bottom`, `transparent`);
+            existing.style.setProperty(`--indicator-color-top`, `transparent`);
+            existing.style.setProperty(`--indicator-color-left`, `transparent`);
+            existing.style.setProperty(`--indicator-color-right`, `transparent`);
         }
         el.setAttribute(`selected`, ``);
+        if (this.orientation === `horizontal` && !this.flip) {
+            el.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);
+        }
+        else if (this.orientation === `horizontal` && this.flip) {
+            el.style.setProperty(`--indicator-color-top`, `var(--accent)`);
+        }
+        else if (this.#isVertical && !this.flip) {
+            el.style.setProperty(`--indicator-color-right`, `var(--accent)`);
+        }
+        else if (this.#isVertical && this.flip) {
+            el.style.setProperty(`--indicator-color-left`, `var(--accent)`);
+        }
     }
     #selectNext() {
         let found = false;
-        for (const el of this._listItems) {
+        for (const el of this.#items) {
             if (this.#isSelected(el) && !found) {
                 found = true;
             }
@@ -87,7 +161,7 @@ let TabListElement = class TabListElement extends LitElement {
     }
     #selectPrevious() {
         let prev;
-        for (const el of this._listItems) {
+        for (const el of this.#items) {
             if (this.#isSelected(el) && prev) {
                 this.selectElement(prev);
             }
@@ -97,25 +171,16 @@ let TabListElement = class TabListElement extends LitElement {
         }
     }
     #onSlotClick;
-    // #updateSelection() {
-    //   for (const el of this._listItems) {
-    //     if (el.id === this.selectedId) {
-    //       el.classList.add(`activated`);
-    //       el.setAttribute(`activated`, ``);
-    //     } else {
-    //       el.classList.remove(`activated`);
-    //       el.removeAttribute(`activated`);
-    //     }
-    //   }
-    // }
-    // protected updated(_changedProperties: PropertyValues): void {
-    //   this.#updateSelection();
-    // }
     static { this.styles = css `
     :host {
       display: inline-block;
-      --activated-colour: blue;
-      --colur: pink;
+      --activated-colour: var(--accent);
+      --colour: var(--surface-4);
+      --scroll-max-height: 200px;
+      --allow-overflow: hidden;
+    }
+    :host(.scrollable) {
+      max-height: var(--scroll-max-height);
     }
     text {
       user-select:none;
@@ -125,24 +190,68 @@ let TabListElement = class TabListElement extends LitElement {
     }
     #container.horizontal {
       flex-direction: row;
+      overflow: hidden;
+    }
+    #container.horizontal.scrollable {
+      overflow-x: auto;
+      --allow-overflow: visible;
     }
-    #container.vertical {
+    #container.horizontal.scrollable ::slotted(ixfx-tab-list-item) {
+      flex-shrink: 0;
+    }
+    #container.vertical-stack {
       flex-direction: column;
     }
+    #container.vertical-stack.flip {
+      flex-direction: column-reverse;
+    }
+    #container.vertical-stack.scrollable {
+      overflow-y: auto;
+      max-height: var(--scroll-max-height);
+      --allow-overflow: visible;
+    }
+    #container.vertical-side {
+      flex-direction: column;
+    }
+    #container.vertical-side.flip {
+      flex-direction: column-reverse;
+    }
+    #container.vertical-side.scrollable {
+      overflow-y: auto;
+      max-height: var(--scroll-max-height);
+      --allow-overflow: visible;
+    }
+
+    ::slotted(ixfx-tab-list-item) {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    #container.vertical-side ::slotted(ixfx-tab-list-item) {
+      writing-mode: vertical-lr;
+      text-orientation: mixed;
+    }
+    #container.vertical-side.flip ::slotted(ixfx-tab-list-item) {
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
 
     ::slotted(.activated) {
       --colour: var(--activated-colour);
     }
   `; }
 };
+__decorate([
+    property({ type: String })
+], TabListElement.prototype, "orientation", void 0);
 __decorate([
     property({ type: Boolean })
-], TabListElement.prototype, "horizontal", void 0);
+], TabListElement.prototype, "flip", void 0);
 __decorate([
-    queryAssignedElements()
-], TabListElement.prototype, "_listItems", void 0);
+    property({ type: Boolean })
+], TabListElement.prototype, "scrollable", void 0);
 TabListElement = __decorate([
-    customElement('ixfx-tab-list')
+    customElement(`ixfx-tab-list`)
 ], TabListElement);
 export { TabListElement };
 //# sourceMappingURL=tab-list.js.map

package/dist/tabs/tab-list.js.map

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

package/dist/tabs/tab-panel.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 export declare class TabPanelElement extends LitElement {
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResult;
 }
 declare global {

package/dist/tabs/tab-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,eAAgB,SAAQ,UAAU;IAE7C,MAAM;IAGN,MAAM,CAAC,MAAM,0BAWZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,eAAe,CAAC;KACnC;CACF"}
+{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,eAAgB,SAAQ,UAAU;IAC7C,MAAM;IAIN,MAAM,CAAC,MAAM,0BAWX;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,eAAe,CAAC;KACnC;CACF"}

package/dist/tabs/tab-panel.js

@@ -18,13 +18,13 @@ let TabPanelElement = class TabPanelElement extends LitElement {
   }
 
   :host([selected]) {
-    background: whitesmoke;
+    background: var(--surface-3);
     display:block;
   }
   `; }
 };
 TabPanelElement = __decorate([
-    customElement('ixfx-tab-panel')
+    customElement(`ixfx-tab-panel`)
 ], TabPanelElement);
 export { TabPanelElement };
 //# sourceMappingURL=tab-panel.js.map

package/dist/tabs/tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../src/tabs/tab-panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAE7C,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAA;IAC5B,CAAC;aACM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;GAWlB,AAXY,CAWZ;;AAhBU,eAAe;IAD3B,aAAa,CAAC,gBAAgB,CAAC;GACnB,eAAe,CAiB3B"}
+{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../src/tabs/tab-panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAC7C,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;GAWlB,AAXY,CAWX;;AAhBS,eAAe;IAD3B,aAAa,CAAC,gBAAgB,CAAC;GACnB,eAAe,CAiB3B"}

package/dist/tabs/tab-panels.d.ts

@@ -1,6 +1,6 @@
+import type { TabListElement } from "./tab-list.js";
+import type { TabPanelElement } from "./tab-panel.js";
 import { LitElement } from "lit";
-import { TabPanelElement } from "./tab-panel.js";
-import { TabListElement } from "./tab-list.js";
 export declare class TabPanelsElement extends LitElement {
     #private;
     _listItems: TabPanelElement[];
@@ -16,7 +16,7 @@ export declare class TabPanelsElement extends LitElement {
      * Triggered after panel is selected
      */
     onSelectedPanel?: (id: string, el: TabPanelElement) => void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     getSelectedElement(): TabPanelElement | undefined;
     syncWithList(el: TabListElement): void;
     selectPanel(id: string): boolean | undefined;

package/dist/tabs/tab-panels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panels.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-panels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,qBACa,gBAAiB,SAAQ,UAAU;;IAG9C,UAAU,EAAG,eAAe,EAAE,CAAC;IAE/B;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,eAAe,KAAK,IAAI,CAAA;IAC7D;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,eAAe,KAAK,IAAI,CAAA;IAC5D;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,eAAe,KAAK,IAAI,CAAA;IAC3D,MAAM;IAIN,kBAAkB;IA6BlB,YAAY,CAAC,EAAE,EAAE,cAAc;IAQ/B,WAAW,CAAC,EAAE,EAAE,MAAM;IAiBtB,MAAM,CAAC,MAAM,0BAKZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,gBAAgB,CAAC;KACrC;CACF"}
+{"version":3,"file":"tab-panels.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-panels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,gBAAiB,SAAQ,UAAU;;IAE9C,UAAU,EAAG,eAAe,EAAE,CAAC;IAE/B;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7D;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,MAAM;IAIN,kBAAkB;IA8BlB,YAAY,CAAC,EAAE,EAAE,cAAc;IAY/B,WAAW,CAAC,EAAE,EAAE,MAAM;IAkBtB,MAAM,CAAC,MAAM,0BAKX;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,gBAAgB,CAAC;KACrC;CACF"}

package/dist/tabs/tab-panels.js

@@ -6,8 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html, LitElement } from "lit";
 import { customElement, queryAssignedElements } from "lit/decorators.js";
-import { TabPanelElement } from "./tab-panel.js";
-import { TabListElement } from "./tab-list.js";
 let TabPanelsElement = class TabPanelsElement extends LitElement {
     render() {
         return html `<slot></slot>`;
@@ -19,8 +17,8 @@ let TabPanelsElement = class TabPanelsElement extends LitElement {
         }
     }
     #isSelected(el) {
-        //const v = el.getAttribute(`selected`);
-        //console.log(`id: ${ el.id } v: ${ v }`);
+        // const v = el.getAttribute(`selected`);
+        // console.log(`id: ${ el.id } v: ${ v }`);
         return el.hasAttribute(`selected`);
     }
     #unselect(el) {
@@ -40,8 +38,10 @@ let TabPanelsElement = class TabPanelsElement extends LitElement {
     }
     syncWithList(el) {
         const t = el.getSelectedElement();
-        if (!t)
+        if (!t) {
+            el.updateComplete.then(() => this.syncWithList(el));
             return;
+        }
         const forEl = t.getAttribute(`for`);
         if (!forEl)
             return;
@@ -74,7 +74,7 @@ __decorate([
     queryAssignedElements()
 ], TabPanelsElement.prototype, "_listItems", void 0);
 TabPanelsElement = __decorate([
-    customElement('ixfx-tab-panels')
+    customElement(`ixfx-tab-panels`)
 ], TabPanelsElement);
 export { TabPanelsElement };
 //# sourceMappingURL=tab-panels.js.map

package/dist/tabs/tab-panels.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panels.js","sourceRoot":"","sources":["../../src/tabs/tab-panels.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAG,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGxC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAiB9C,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAA;IAC5B,CAAC;IAED,kBAAkB;QAChB,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACjC,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;gBAAE,OAAO,EAAE,CAAC;QACtC,CAAC;IACH,CAAC;IAED,WAAW,CAAC,EAAmB;QAC7B,wCAAwC;QACxC,0CAA0C;QAC1C,OAAO,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACrC,CAAC;IAED,SAAS,CAAC,EAAmB;QAC3B,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QAC/B,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,OAAO,CAAC,EAAmB;QACzB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;QACD,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAED,YAAY,CAAC,EAAkB;QAC7B,MAAM,CAAC,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC;QAClC,IAAI,CAAC,CAAC;YAAE,OAAO;QACf,MAAM,KAAK,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,WAAW,CAAC,EAAU;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1C,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE;gBAAE,OAAO;YAC9B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC;QAED,IAAI,KAAK,GAAG,KAAK,CAAC;QAClB,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACjC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;gBACjB,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;gBACjB,KAAK,GAAG,IAAI,CAAC;YACf,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;GAKlB,AALY,CAKZ;;AA7ED;IADC,qBAAqB,EAAE;oDACO;AAHpB,gBAAgB;IAD5B,aAAa,CAAC,iBAAiB,CAAC;GACpB,gBAAgB,CAiF5B"}
+{"version":3,"file":"tab-panels.js","sourceRoot":"","sources":["../../src/tabs/tab-panels.ts"],"names":[],"mappings":";;;;;;AAEA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAGlE,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAgB9C,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;IAED,kBAAkB;QAChB,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACjC,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;gBACtB,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAED,WAAW,CAAC,EAAmB;QAC7B,yCAAyC;QACzC,2CAA2C;QAC3C,OAAO,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACrC,CAAC;IAED,SAAS,CAAC,EAAmB;QAC3B,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QAC/B,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,OAAO,CAAC,EAAmB;QACzB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;QACD,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAED,YAAY,CAAC,EAAkB;QAC7B,MAAM,CAAC,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC;QAClC,IAAI,CAAC,CAAC,EAAE,CAAC;YACP,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;YACpD,OAAO;QACT,CAAC;QACD,MAAM,KAAK,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,KAAK;YACR,OAAO;QACT,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,WAAW,CAAC,EAAU;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1C,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE;gBACnB,OAAO;YACT,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC;QAED,IAAI,KAAK,GAAG,KAAK,CAAC;QAClB,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACjC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;gBACjB,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;gBACjB,KAAK,GAAG,IAAI,CAAC;YACf,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;GAKlB,AALY,CAKX;;AAnFF;IADC,qBAAqB,EAAE;oDACO;AAFpB,gBAAgB;IAD5B,aAAa,CAAC,iBAAiB,CAAC;GACpB,gBAAgB,CAsF5B"}

package/dist/timeline/index.d.ts

@@ -0,0 +1,9 @@
+export * from './types.js';
+export * from './timeline-element.js';
+export * from './timeline-styles.js';
+export * from './timeline-track-tabs.js';
+export * from './timeline-controller.js';
+export { resolveGrid, resolveCssVars } from './timeline-draw.js';
+export type { CssVars, Rect } from './timeline-draw.js';
+export { attachTimelineInteractions } from './timeline-interactions.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/timeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/timeline/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/timeline/index.js

@@ -0,0 +1,8 @@
+export * from './types.js';
+export * from './timeline-element.js';
+export * from './timeline-styles.js';
+export * from './timeline-track-tabs.js';
+export * from './timeline-controller.js';
+export { resolveGrid, resolveCssVars } from './timeline-draw.js';
+export { attachTimelineInteractions } from './timeline-interactions.js';
+//# sourceMappingURL=index.js.map

package/dist/timeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/timeline/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/timeline/timeline-controller.d.ts

@@ -0,0 +1,48 @@
+import type { ViewRange, UserScale, GridResolution, TimelineEvent } from './types.js';
+/**
+ * Configuration for the TimelineController external adapter.
+ */
+export type TimelineControllerConfig = {
+    readonly logicalMin: number;
+    readonly logicalMax: number;
+    readonly labelFormatter?: (value: number) => string;
+    readonly gridResolver?: (viewRange: ViewRange, userScale: UserScale) => GridResolution;
+};
+/**
+ * Minimal interface the controller expects from the timeline element.
+ * Avoids coupling to the concrete element class.
+ */
+type TimelineHost = {
+    formatLabel: (v: number) => string;
+    setViewRange(r: ViewRange): void;
+    min: number;
+    max: number;
+    userScale: string;
+    getTrackEvents(trackKey: string): TimelineEvent[];
+    get selectedIds(): readonly string[];
+    set selectedIds(ids: readonly string[]);
+    addEventListener(type: string, listener: EventListener): void;
+    removeEventListener(type: string, listener: EventListener): void;
+};
+/**
+ * External adapter class that can configure a timeline element
+ * with musical time, custom label formatting, etc.
+ *
+ * The controller has no import of any timeline element type.
+ * Users create a controller, pass it the component instance,
+ * and the controller calls the component's public API.
+ */
+export declare class TimelineController {
+    #private;
+    constructor(timeline: TimelineHost, config: TimelineControllerConfig);
+    /** Update the tempo (BPM) for musical time calculations. */
+    setTempo(bpm: number): void;
+    /** Update the time signature for musical time calculations. */
+    setTimeSignature(numerator: number, denominator: number): void;
+    /** Set the visible view range on the timeline. */
+    setViewRange(range: ViewRange): void;
+    /** Clean up any resources held by the controller. */
+    dispose(): void;
+}
+export {};
+//# sourceMappingURL=timeline-controller.d.ts.map

package/dist/timeline/timeline-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-controller.d.ts","sourceRoot":"","sources":["../../src/timeline/timeline-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,aAAa,EAA6B,MAAM,YAAY,CAAC;AAEjH;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpD,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,KAAK,cAAc,CAAC;CACxF,CAAC;AAEF;;;GAGG;AACH,KAAK,YAAY,GAAG;IAClB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,YAAY,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,aAAa,EAAE,CAAC;IAClD,IAAI,WAAW,IAAI,SAAS,MAAM,EAAE,CAAC;IACrC,IAAI,WAAW,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,EAAE;IACxC,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9D,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAC;CAClE,CAAC;AAEF;;;;;;;GAOG;AACH,qBAAa,kBAAkB;;gBAOjB,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,wBAAwB;IAepE,4DAA4D;IAC5D,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,+DAA+D;IAC/D,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI;IAM9D,kDAAkD;IAClD,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAIpC,qDAAqD;IACrD,OAAO,IAAI,IAAI;CAyChB"}

package/dist/timeline/timeline-controller.js

@@ -0,0 +1,81 @@
+/**
+ * External adapter class that can configure a timeline element
+ * with musical time, custom label formatting, etc.
+ *
+ * The controller has no import of any timeline element type.
+ * Users create a controller, pass it the component instance,
+ * and the controller calls the component's public API.
+ */
+export class TimelineController {
+    #host;
+    #config;
+    #bpm = 120;
+    #timeSignatureNumerator = 4;
+    #timeSignatureDenominator = 4;
+    constructor(timeline, config) {
+        this.#host = timeline;
+        this.#config = config;
+        // Apply initial configuration
+        timeline.min = config.logicalMin;
+        timeline.max = config.logicalMax;
+        if (config.labelFormatter) {
+            timeline.formatLabel = config.labelFormatter;
+        }
+        timeline.addEventListener(`track-select`, this.#onTrackSelect);
+    }
+    /** Update the tempo (BPM) for musical time calculations. */
+    setTempo(bpm) {
+        this.#bpm = bpm;
+        this.#updateFormatLabel();
+    }
+    /** Update the time signature for musical time calculations. */
+    setTimeSignature(numerator, denominator) {
+        this.#timeSignatureNumerator = numerator;
+        this.#timeSignatureDenominator = denominator;
+        this.#updateFormatLabel();
+    }
+    /** Set the visible view range on the timeline. */
+    setViewRange(range) {
+        this.#host.setViewRange(range);
+    }
+    /** Clean up any resources held by the controller. */
+    dispose() {
+        this.#host.removeEventListener(`track-select`, this.#onTrackSelect);
+    }
+    #onTrackSelect = (e) => {
+        const detail = e.detail;
+        const trackEventIds = this.#host.getTrackEvents(detail.trackKey).map(e => e.id);
+        if (detail.shiftKey) {
+            const current = new Set(this.#host.selectedIds);
+            for (const id of trackEventIds) {
+                if (current.has(id)) {
+                    current.delete(id);
+                }
+                else {
+                    current.add(id);
+                }
+            }
+            this.#host.selectedIds = [...current];
+        }
+        else {
+            this.#host.selectedIds = trackEventIds;
+        }
+    };
+    #updateFormatLabel() {
+        if (this.#config.labelFormatter) {
+            // User provided a custom formatter — don't override
+            return;
+        }
+        const bpm = this.#bpm;
+        const num = this.#timeSignatureNumerator;
+        // Musical time formatter: convert logical units to bars:beats
+        this.#host.formatLabel = (v) => {
+            const beatsPerBar = num;
+            const totalBeats = v; // Assume 1 logical unit = 1 beat
+            const bar = Math.floor(totalBeats / beatsPerBar) + 1;
+            const beat = Math.floor(totalBeats % beatsPerBar) + 1;
+            return `${bar}.${beat}`;
+        };
+    }
+}
+//# sourceMappingURL=timeline-controller.js.map

package/dist/timeline/timeline-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-controller.js","sourceRoot":"","sources":["../../src/timeline/timeline-controller.ts"],"names":[],"mappings":"AA6BA;;;;;;;GAOG;AACH,MAAM,OAAO,kBAAkB;IAC7B,KAAK,CAAe;IACpB,OAAO,CAA2B;IAClC,IAAI,GAAG,GAAG,CAAC;IACX,uBAAuB,GAAG,CAAC,CAAC;IAC5B,yBAAyB,GAAG,CAAC,CAAC;IAE9B,YAAY,QAAsB,EAAE,MAAgC;QAClE,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QAEtB,8BAA8B;QAC9B,QAAQ,CAAC,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC;QACjC,QAAQ,CAAC,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC;QAEjC,IAAI,MAAM,CAAC,cAAc,EAAE,CAAC;YAC1B,QAAQ,CAAC,WAAW,GAAG,MAAM,CAAC,cAAc,CAAC;QAC/C,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,cAA+B,CAAC,CAAC;IAClF,CAAC;IAED,4DAA4D;IAC5D,QAAQ,CAAC,GAAW;QAClB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;QAChB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,+DAA+D;IAC/D,gBAAgB,CAAC,SAAiB,EAAE,WAAmB;QACrD,IAAI,CAAC,uBAAuB,GAAG,SAAS,CAAC;QACzC,IAAI,CAAC,yBAAyB,GAAG,WAAW,CAAC;QAC7C,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,kDAAkD;IAClD,YAAY,CAAC,KAAgB;QAC3B,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAED,qDAAqD;IACrD,OAAO;QACL,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,cAA+B,CAAC,CAAC;IACvF,CAAC;IAED,cAAc,GAAG,CAAC,CAAQ,EAAQ,EAAE;QAClC,MAAM,MAAM,GAAI,CAA4C,CAAC,MAAM,CAAC;QACpE,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAEhF,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;YACpB,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YAChD,KAAK,MAAM,EAAE,IAAI,aAAa,EAAE,CAAC;gBAC/B,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;oBACpB,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;gBACrB,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBAClB,CAAC;YACH,CAAC;YACD,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,aAAa,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IAEF,kBAAkB;QAChB,IAAI,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC;YAChC,oDAAoD;YACpD,OAAO;QACT,CAAC;QAED,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC;QACtB,MAAM,GAAG,GAAG,IAAI,CAAC,uBAAuB,CAAC;QAEzC,8DAA8D;QAC9D,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,CAAS,EAAE,EAAE;YACrC,MAAM,WAAW,GAAG,GAAG,CAAC;YACxB,MAAM,UAAU,GAAG,CAAC,CAAC,CAAC,iCAAiC;YACvD,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;YACrD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;YACtD,OAAO,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC;CACF"}

package/dist/timeline/timeline-draw.d.ts

@@ -0,0 +1,28 @@
+import type { GridMode, GridResolution, TimelineEvent, TrackLayout, DragTarget, ViewRange, UserScale } from './types.js';
+export type CssVars = Record<string, string>;
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * Dispatch to adaptive or fixed grid mode.
+ */
+export declare const resolveGrid: (viewRange: ViewRange, userScale: UserScale, viewportWidth: number, mode?: GridMode, fixedMinorStep?: number, ppu?: number) => GridResolution;
+export declare const drawMajorMinorGrid: (ctx: CanvasRenderingContext2D, region: Rect, resolution: GridResolution, altMajorBg: boolean, vars: CssVars, ppu: number) => void;
+/**
+ * Draw the axis header band. With 2D virtualization the axis is "sticky" —
+ * it is always drawn at the current vertical scroll position (`scrollTop`)
+ * so it appears fixed at the viewport top.
+ */
+export declare const drawAxis: (ctx: CanvasRenderingContext2D, region: Rect, resolution: GridResolution, axisHeight: number, formatLabel: (v: number) => string, vars: CssVars, ppu: number, scrollTop?: number) => void;
+export type TrackInfo = {
+    readonly key: string;
+    readonly color?: string;
+};
+export declare const drawTrackBackgrounds: (ctx: CanvasRenderingContext2D, region: Rect, trackLayout: readonly TrackLayout[], tracks: readonly TrackInfo[], vars: CssVars, ppu: number) => void;
+export declare const drawEventRects: (ctx: CanvasRenderingContext2D, region: Rect, events: readonly TimelineEvent[], trackLayout: readonly TrackLayout[], selectedIds: ReadonlySet<string>, tickledId: string | undefined, drag: DragTarget, vars: CssVars, ppu: number) => void;
+export declare const drawMarquee: (ctx: CanvasRenderingContext2D, drag: DragTarget, ppu: number) => void;
+export declare const resolveCssVars: (host: HTMLElement) => CssVars;
+//# sourceMappingURL=timeline-draw.d.ts.map

package/dist/timeline/timeline-draw.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-draw.d.ts","sourceRoot":"","sources":["../../src/timeline/timeline-draw.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAIzH,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE7C,MAAM,MAAM,IAAI,GAAG;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,WAAW,GACtB,WAAW,SAAS,EACpB,WAAW,SAAS,EACpB,eAAe,MAAM,EACrB,OAAM,QAAqB,EAC3B,iBAAiB,MAAM,EACvB,MAAM,MAAM,KACX,cAKF,CAAC;AA6EF,eAAO,MAAM,kBAAkB,GAC7B,KAAK,wBAAwB,EAC7B,QAAQ,IAAI,EACZ,YAAY,cAAc,EAC1B,YAAY,OAAO,EACnB,MAAM,OAAO,EACb,KAAK,MAAM,KACV,IA8CF,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GACnB,KAAK,wBAAwB,EAC7B,QAAQ,IAAI,EACZ,YAAY,cAAc,EAC1B,YAAY,MAAM,EAClB,aAAa,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,EAClC,MAAM,OAAO,EACb,KAAK,MAAM,EACX,kBAAa,KACZ,IA0DF,CAAC;AAIF,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,KAAK,wBAAwB,EAC7B,QAAQ,IAAI,EACZ,aAAa,SAAS,WAAW,EAAE,EACnC,QAAQ,SAAS,SAAS,EAAE,EAC5B,MAAM,OAAO,EACb,KAAK,MAAM,KACV,IAwBF,CAAC;AAIF,eAAO,MAAM,cAAc,GACzB,KAAK,wBAAwB,EAC7B,QAAQ,IAAI,EACZ,QAAQ,SAAS,aAAa,EAAE,EAChC,aAAa,SAAS,WAAW,EAAE,EACnC,aAAa,WAAW,CAAC,MAAM,CAAC,EAChC,WAAW,MAAM,GAAG,SAAS,EAC7B,MAAM,UAAU,EAChB,MAAM,OAAO,EACb,KAAK,MAAM,KACV,IAwFF,CAAC;AAIF,eAAO,MAAM,WAAW,GACtB,KAAK,wBAAwB,EAC7B,MAAM,UAAU,EAChB,KAAK,MAAM,KACV,IAcF,CAAC;AAwCF,eAAO,MAAM,cAAc,GAAI,MAAM,WAAW,KAAG,OAOlD,CAAC"}