godown 2.6.2 → 2.7.1

package/web-components/{group/tab-group.js → tabs/tabs.js}

@@ -1,17 +1,18 @@
 import { __decorate } from "tslib";
-import { css, html, property, state } from "../../deps.js";
+import { css, html, property, state } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
 import { ifValue } from "../../lib/directives.js";
 import { htmlSlot } from "../../lib/templates.js";
 import { deepQuerySelectorAll } from "../../lib/utils.js";
-import { createScope, cssvarValues, define, GodownElement } from "../../root.js";
-const defineName = "tab-group";
+import { createScope, cssvarValues, GodownElement } from "../../supers/root.js";
+const defineName = "tabs";
 const cssvarScope = createScope(defineName);
 /**
- * TabGroup used to support multiple tabs.
+ * {@linkcode GodownTab} used to support multiple tab.
  *
  * Inspired by Next-ui.
  */
-let TabGroup = class TabGroup extends GodownElement {
+let Tabs = class Tabs extends GodownElement {
     constructor() {
         super(...arguments);
         /**
@@ -98,7 +99,7 @@ let TabGroup = class TabGroup extends GodownElement {
         this.contents = this.slottedNames;
     }
 };
-TabGroup.styles = [
+Tabs.styles = [
     GodownElement.styles,
     css `
       :host {
@@ -143,22 +144,22 @@ TabGroup.styles = [
 ];
 __decorate([
     property()
-], TabGroup.prototype, "index", void 0);
+], Tabs.prototype, "index", void 0);
 __decorate([
     property()
-], TabGroup.prototype, "def", void 0);
+], Tabs.prototype, "def", void 0);
 __decorate([
     property()
-], TabGroup.prototype, "align", void 0);
+], Tabs.prototype, "align", void 0);
 __decorate([
     state()
-], TabGroup.prototype, "headers", void 0);
+], Tabs.prototype, "headers", void 0);
 __decorate([
     state()
-], TabGroup.prototype, "contents", void 0);
-TabGroup = __decorate([
+], Tabs.prototype, "contents", void 0);
+Tabs = __decorate([
     define(defineName)
-], TabGroup);
-export { TabGroup };
-export default TabGroup;
-//# sourceMappingURL=tab-group.js.map
+], Tabs);
+export { Tabs };
+export default Tabs;
+//# sourceMappingURL=tabs.js.map

package/web-components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/tabs/tabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAyB,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACxG,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEhF,MAAM,UAAU,GAAG,MAAM,CAAC;AAE1B,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;;;GAIG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,aAAa;IAAhC;;QACL;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QACvB;;WAEG;QACS,QAAG,GAAG,EAAE,CAAC;QACrB;;WAEG;QACS,UAAK,GAAG,OAAO,CAAC;IA+H9B,CAAC;IAzEW,MAAM;QACd,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YAC5D,OAAO,IAAI,CAAA;iBACA,OAAO,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,QAAQ,CAAC;kBACtC,GAAG,EAAE;gBACb,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YAC3B,CAAC;;UAEC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK;iBAC/B,CAAC;QACd,CAAC,CAAC,CAAC;QACH,OAAO,IAAI,CAAA;oCACqB,IAAI,CAAC,KAAK;UACpC,OAAO;;;QAGT,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC;KACnC,CAAC;IACJ,CAAC;IAES,OAAO,CAAC,iBAAyC;QACzD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,eAAe;YACf,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,gBAAgB,CAAC,CAAC;YAC5E,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,SAAS,CAAC,CAAC;YACrE,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;gBACtE,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,MAAM,CAAC,WAAW,IAAI,CAAC;gBAC/C,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE;oBAC5E,QAAQ,EAAE,GAAG;oBACb,IAAI,EAAE,UAAU;iBACjB,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC;YAC3B,CAAC;QACH,CAAC;IACH,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,CAAS,EAAE,QAAQ,GAAG,KAAK;QAChC,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,QAAQ,GAAG,oBAAoB,CAAO,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;YACzE,KAAK,MAAM,CAAC,IAAI,QAAQ,EAAE,CAAC;gBACzB,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;oBAC1C,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;gBACd,CAAC;YACH,CAAC;YACD,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACjB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;YACd,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QACxC,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACxB,CAAC;QACD,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED;;OAEG;IACH,OAAO;QACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC;IACpC,CAAC;;AApHM,WAAM,GAAG;IACd,aAAa,CAAC,MAAM;IACpB,GAAG,CAAA;;UAEG,WAAW,qBAAqB,YAAY,CAAC,IAAI;UACjD,WAAW,gCAAgC,YAAY,CAAC,OAAO;UAC/D,WAAW;UACX,WAAW;0BACK,WAAW;;qBAEhB,YAAY,CAAC,IAAI;;;;;;;;;;;;;;;sBAehB,WAAW;;;;;;;;;;;0BAWP,WAAW;;;;;KAKhC;CACgB,AA1CN,CA0CO;AA5DR;IAAX,QAAQ,EAAE;mCAAY;AAIX;IAAX,QAAQ,EAAE;iCAAU;AAIT;IAAX,QAAQ,EAAE;mCAAiB;AAInB;IAAR,KAAK,EAAE;qCAA0B;AAIzB;IAAR,KAAK,EAAE;sCAAoB;AApBjB,IAAI;IADhB,MAAM,CAAC,UAAU,CAAC;GACN,IAAI,CA2IhB;;AAED,eAAe,IAAI,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property, type PropertyValueMap, state } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { ifValue } from \"../../lib/directives.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { deepQuerySelectorAll } from \"../../lib/utils.js\";\nimport { createScope, cssvarValues, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"tabs\";\n\nconst cssvarScope = createScope(defineName);\n\n/**\n * {@linkcode GodownTab} used to support multiple tab.\n *\n * Inspired by Next-ui.\n */\n@define(defineName)\nexport class Tabs extends GodownElement {\n  /**\n   * Active slot name.\n   */\n  @property() index = \"\";\n  /**\n   * Default slot name.\n   */\n  @property() def = \"\";\n  /**\n   * Align type.\n   */\n  @property() align = \"start\";\n  /**\n   * Header texts or slot names, if headers is a zero value, it is taken from the {@linkcode Tabs.contents}.\n   */\n  @state() headers: string[] | void;\n  /**\n   * Contents slot names.\n   */\n  @state() contents: string[];\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host {\n        ${cssvarScope}--background: var(${cssvarValues.main});\n        ${cssvarScope}--background-active: rgb(var(${cssvarValues.textRGB}) / 18%);\n        ${cssvarScope}--radius: .25em;\n        ${cssvarScope}--cursor: default;\n        background: var(${cssvarScope}--background);\n        display: block;\n        color: var(${cssvarValues.text});\n      }\n\n      nav {\n        display: grid;\n        grid-auto-flow: column;\n        gap: 0.25em;\n        position: relative;\n        border-radius: inherit;\n      }\n\n      section {\n        white-space: nowrap;\n        border-radius: inherit;\n        padding: 0.15em 0.2em;\n        cursor: var(${cssvarScope}--cursor);\n        z-index: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      #slider {\n        height: 100%;\n        position: absolute;\n        padding: 0;\n        background: var(${cssvarScope}--background-active);\n        transform: translateX(-50%);\n        transition: all 180ms ease 0s;\n        z-index: 0;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    const headers = (this.headers || this.contents).map((value) => {\n      return html`<section\n        class=\"${ifValue(this.index === value, \"active\")}\"\n        @click=\"${() => {\n          this.select(value, true);\n        }}\"\n      >\n        ${this.headers ? htmlSlot(value) : value}\n      </section>`;\n    });\n    return html`\n      <nav style=\"justify-content:${this.align}\">\n        ${headers}\n        <section id=\"slider\"></section>\n      </nav>\n      ${htmlSlot(this.index || this.def)}\n    `;\n  }\n\n  protected updated(changedProperties: PropertyValueMap<this>) {\n    if (changedProperties.has(\"index\")) {\n      // Move slider.\n      const active = this.shadowRoot.querySelector<HTMLElement>(\"section.active\");\n      const slider = this.shadowRoot.querySelector<HTMLElement>(\"#slider\");\n      if (active) {\n        this.dispatchEvent(new CustomEvent(\"select\", { detail: this.index }));\n        slider.style.width = `${active.clientWidth}px`;\n        slider.animate([{ left: `${active.offsetLeft + active.clientWidth / 2}px` }], {\n          duration: 180,\n          fill: \"forwards\",\n        });\n      } else {\n        slider.style.width = \"0\";\n      }\n    }\n  }\n\n  /**\n   * Select one tab.\n   * @param s New index.\n   * @param callSync if true, update all same elements (headers contains s).\n   */\n  select(s: string, callSync = false) {\n    if (callSync) {\n      const elements = deepQuerySelectorAll<this>(this.tagName, document.body);\n      for (const e of elements) {\n        if ((e.headers || e.contents).includes(s)) {\n          e.select(s);\n        }\n      }\n      return;\n    }\n    this.index = s;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.def) {\n      this.def = this.slottedNames[0] || \"\";\n    }\n    if (!this.index && this.def) {\n      this.index = this.def;\n    }\n    this.getTabs();\n  }\n\n  /**\n   * Update content controls (this.headers, this.contents).\n   */\n  getTabs() {\n    this.contents = this.slottedNames;\n  }\n}\n\nexport default Tabs;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"tab-group\": Tabs;\n    \"g-tabs\": Tabs;\n  }\n}\n"]}

package/web-components/text/clip.d.ts

@@ -0,0 +1,22 @@
+import { type CSSResultGroup } from "../../.deps.js";
+import { type HTMLTemplate } from "../../lib/templates.js";
+import { GodownElement } from "../../supers/root.js";
+/**
+ * {@linkcode Clip} renders a gradient text.
+ */
+export declare class Clip extends GodownElement {
+    /**
+     * The text to be clipped.
+     */
+    text: string;
+    static styles: CSSResultGroup;
+    protected render(): HTMLTemplate | string;
+}
+export default Clip;
+declare global {
+    interface HTMLElementTagNameMap {
+        "clip-text": Clip;
+        "g-clip": Clip;
+    }
+}
+//# sourceMappingURL=clip.d.ts.map

package/web-components/text/clip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clip.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/clip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAY,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAuB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAK1E;;GAEG;AACH,qBACa,IAAK,SAAQ,aAAa;IACrC;;OAEG;IACS,IAAI,SAAM;IAEtB,MAAM,CAAC,MAAM,iBAaO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY,GAAG,MAAM;CAG1C;AAED,eAAe,IAAI,CAAC;AAEpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,IAAI,CAAC;QAClB,QAAQ,EAAE,IAAI,CAAC;KAChB;CACF"}

package/web-components/text/{clip-text.js → clip.js}

@@ -1,13 +1,14 @@
 import { __decorate } from "tslib";
-import { css, property } from "../../deps.js";
+import { css, property } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
 import { htmlSlot } from "../../lib/templates.js";
-import { createScope, cssvar, define, GodownElement } from "../../root.js";
-const defineName = "clip-text";
+import { createScope, cssvar, GodownElement } from "../../supers/root.js";
+const defineName = "clip";
 const cssvarScope = createScope(defineName);
 /**
- * ClipText renders a gradient text.
+ * {@linkcode Clip} renders a gradient text.
  */
-let ClipText = class ClipText extends GodownElement {
+let Clip = class Clip extends GodownElement {
     constructor() {
         super(...arguments);
         /**
@@ -19,7 +20,7 @@ let ClipText = class ClipText extends GodownElement {
         return this.text || htmlSlot();
     }
 };
-ClipText.styles = [
+Clip.styles = [
     GodownElement.styles,
     css `
       :host {
@@ -35,10 +36,10 @@ ClipText.styles = [
 ];
 __decorate([
     property()
-], ClipText.prototype, "text", void 0);
-ClipText = __decorate([
+], Clip.prototype, "text", void 0);
+Clip = __decorate([
     define(defineName)
-], ClipText);
-export { ClipText };
-export default ClipText;
-//# sourceMappingURL=clip-text.js.map
+], Clip);
+export { Clip };
+export default Clip;
+//# sourceMappingURL=clip.js.map

package/web-components/text/clip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clip.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/clip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1E,MAAM,UAAU,GAAG,MAAM,CAAC;AAC1B,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;GAEG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,aAAa;IAAhC;;QACL;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;IAoBxB,CAAC;IAHW,MAAM;QACd,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;IACjC,CAAC;;AAjBM,WAAM,GAAG;IACd,aAAa,CAAC,MAAM;IACpB,GAAG,CAAA;;UAEG,WAAW,0BAA0B,MAAM;0BAC3B,WAAW;;;;;;;KAOhC;CACgB,AAbN,CAaO;AAfR;IAAX,QAAQ,EAAE;kCAAW;AAJX,IAAI;IADhB,MAAM,CAAC,UAAU,CAAC;GACN,IAAI,CAwBhB;;AAED,eAAe,IAAI,CAAC","sourcesContent":["import { css, type CSSResultGroup, property } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { createScope, cssvar, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"clip\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * {@linkcode Clip} renders a gradient text.\n */\n@define(defineName)\nexport class Clip extends GodownElement {\n  /**\n   * The text to be clipped.\n   */\n  @property() text = \"\";\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host {\n        ${cssvarScope}--clip-background: var(${cssvar}--clip-background);\n        background: var(${cssvarScope}--clip-background);\n        color: transparent;\n        -webkit-text-fill-color: transparent;\n        background-clip: text !important;\n        -webkit-background-clip: text !important;\n        display: inline-flex;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate | string {\n    return this.text || htmlSlot();\n  }\n}\n\nexport default Clip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"clip-text\": Clip;\n    \"g-clip\": Clip;\n  }\n}\n"]}

package/web-components/text/{overbreath-text.d.ts → overbreath.d.ts}

@@ -1,12 +1,12 @@
-import { type CSSResultGroup } from "../../deps.js";
+import { type CSSResultGroup } from "../../.deps.js";
 import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../root.js";
+import { GodownElement } from "../../supers/root.js";
 /**
- * OverbreathText renders three animated pieces of text.
+ * {@linkcode Overbreath} renders three animated pieces of text.
  *
  * Inspired by Vercel homepage (2022? - 2023).
  */
-export declare class OverbreathText extends GodownElement {
+export declare class Overbreath extends GodownElement {
     /**
      * One of the texts.
      */
@@ -17,10 +17,11 @@ export declare class OverbreathText extends GodownElement {
     protected render(): HTMLTemplate[];
     protected renderText(text: string): HTMLTemplate;
 }
-export default OverbreathText;
+export default Overbreath;
 declare global {
     interface HTMLElementTagNameMap {
-        "overbreath-text": OverbreathText;
+        "overbreath-text": Overbreath;
+        "g-overbreath": Overbreath;
     }
 }
-//# sourceMappingURL=overbreath-text.d.ts.map
+//# sourceMappingURL=overbreath.d.ts.map

package/web-components/text/overbreath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overbreath.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/overbreath.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAkB,MAAM,gBAAgB,CAAC;AAE1E,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAuB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAK1E;;;;GAIG;AACH,qBACa,UAAW,SAAQ,aAAa;IAC3C;;OAEG;IACS,EAAE,SAAM;IAER,EAAE,SAAM;IAER,EAAE,SAAM;IAEpB,MAAM,CAAC,MAAM,iBAiLO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY,EAAE;IAIlC,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY;CAMjD;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;QAC9B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/web-components/text/{overbreath-text.js → overbreath.js}

@@ -1,14 +1,15 @@
 import { __decorate } from "tslib";
-import { css, html, property } from "../../deps.js";
-import { createScope, cssvar, define, GodownElement } from "../../root.js";
-const defineName = "overbreath-text";
+import { css, html, property } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
+import { createScope, cssvar, GodownElement } from "../../supers/root.js";
+const defineName = "overbreath";
 const cssvarScope = createScope(defineName);
 /**
- * OverbreathText renders three animated pieces of text.
+ * {@linkcode Overbreath} renders three animated pieces of text.
  *
  * Inspired by Vercel homepage (2022? - 2023).
  */
-let OverbreathText = class OverbreathText extends GodownElement {
+let Overbreath = class Overbreath extends GodownElement {
     constructor() {
         super(...arguments);
         /**
@@ -30,7 +31,7 @@ let OverbreathText = class OverbreathText extends GodownElement {
     </span>`;
     }
 };
-OverbreathText.styles = [
+Overbreath.styles = [
     GodownElement.styles,
     css `
       :host {
@@ -210,16 +211,16 @@ OverbreathText.styles = [
 ];
 __decorate([
     property()
-], OverbreathText.prototype, "t1", void 0);
+], Overbreath.prototype, "t1", void 0);
 __decorate([
     property()
-], OverbreathText.prototype, "t2", void 0);
+], Overbreath.prototype, "t2", void 0);
 __decorate([
     property()
-], OverbreathText.prototype, "t3", void 0);
-OverbreathText = __decorate([
+], Overbreath.prototype, "t3", void 0);
+Overbreath = __decorate([
     define(defineName)
-], OverbreathText);
-export { OverbreathText };
-export default OverbreathText;
-//# sourceMappingURL=overbreath-text.js.map
+], Overbreath);
+export { Overbreath };
+export default Overbreath;
+//# sourceMappingURL=overbreath.js.map

package/web-components/text/overbreath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overbreath.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/overbreath.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1E,MAAM,UAAU,GAAG,YAAY,CAAC;AAChC,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;;;GAIG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,aAAa;IAAtC;;QACL;;WAEG;QACS,OAAE,GAAG,EAAE,CAAC;QACpB,SAAS;QACG,OAAE,GAAG,EAAE,CAAC;QACpB,SAAS;QACG,OAAE,GAAG,EAAE,CAAC;IA+LtB,CAAC;IAVW,MAAM;QACd,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1D,CAAC;IAES,UAAU,CAAC,IAAY;QAC/B,OAAO,IAAI,CAAA;yBACU,IAAI;yBACJ,IAAI;YACjB,CAAC;IACX,CAAC;;AA5LM,iBAAM,GAAG;IACd,aAAa,CAAC,MAAM;IACpB,GAAG,CAAA;;UAEG,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW,4BAA4B,WAAW,eAAe,WAAW,eAAe,WAAW;UACtG,WAAW,4BAA4B,WAAW,eAAe,WAAW,eAAe,WAAW;UACtG,WAAW,4BAA4B,WAAW,eAAe,WAAW,eAAe,WAAW;;KAE3G;IACD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2CyB,WAAW;;;;;gCAKX,WAAW;;;;;gCAKX,WAAW;;;;;;;;;;;;;;KActC;IACD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+EF;IACD,GAAG,CAAA;;UAEG,WAAW,0BAA0B,MAAM;0BAC3B,WAAW;;;;;;;;;KAShC;CACgB,AAjLN,CAiLO;AAvLR;IAAX,QAAQ,EAAE;sCAAS;AAER;IAAX,QAAQ,EAAE;sCAAS;AAER;IAAX,QAAQ,EAAE;sCAAS;AART,UAAU;IADtB,MAAM,CAAC,UAAU,CAAC;GACN,UAAU,CAuMtB;;AAED,eAAe,UAAU,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { type HTMLTemplate } from \"../../lib/templates.js\";\nimport { createScope, cssvar, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"overbreath\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * {@linkcode Overbreath} renders three animated pieces of text.\n *\n * Inspired by Vercel homepage (2022? - 2023).\n */\n@define(defineName)\nexport class Overbreath extends GodownElement {\n  /**\n   * One of the texts.\n   */\n  @property() t1 = \"\";\n  // As t1.\n  @property() t2 = \"\";\n  // As t2.\n  @property() t3 = \"\";\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host {\n        ${cssvarScope}--1-1: #ae0ca5;\n        ${cssvarScope}--1-2: #ffd802;\n        ${cssvarScope}--2-1: #1fe173;\n        ${cssvarScope}--2-2: #582bca;\n        ${cssvarScope}--3-1: #00b4f0;\n        ${cssvarScope}--3-2: #e614e6;\n        ${cssvarScope}--deg: 60deg;\n        ${cssvarScope}--1: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--1-1), var(${cssvarScope}--1-2));\n        ${cssvarScope}--2: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--2-1), var(${cssvarScope}--2-2));\n        ${cssvarScope}--3: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--3-1), var(${cssvarScope}--3-2));\n      }\n    `,\n    css`\n      :host {\n        display: flex;\n        margin: auto;\n        width: fit-content;\n        font-size: clamp(3.5rem, 10vw, 5.5rem);\n        align-items: center;\n      }\n\n      @media (max-width: 1280px) {\n        :host {\n          flex-direction: column;\n        }\n      }\n\n      *::selection {\n        background: none;\n      }\n\n      .fg,\n      .bg {\n        padding: 0 0.05em;\n        box-sizing: border-box;\n      }\n\n      .bg {\n        position: absolute;\n        top: 0;\n      }\n\n      span {\n        display: block;\n      }\n\n      .rel {\n        position: relative;\n        font-weight: 800;\n        font-size: inherit;\n        letter-spacing: -0.05em;\n      }\n\n      .rel:nth-child(1) .fg {\n        animation: lg1 8s infinite;\n        background-image: var(${cssvarScope}--1);\n      }\n\n      .rel:nth-child(2) .fg {\n        animation: 8s infinite lg2;\n        background-image: var(${cssvarScope}--2);\n      }\n\n      .rel:nth-child(3) .fg {\n        animation: 8s infinite lg3;\n        background-image: var(${cssvarScope}--3);\n      }\n\n      .rel:nth-child(1) .bg {\n        animation: text1 8s infinite;\n      }\n\n      .rel:nth-child(2) .bg {\n        animation: text2 8s infinite;\n      }\n\n      .rel:nth-child(3) .bg {\n        animation: text3 8s infinite;\n      }\n    `,\n    css`\n      @keyframes lg1 {\n        0%,\n        16.667%,\n        to {\n          opacity: 1;\n        }\n        33.333%,\n        83.333% {\n          opacity: 0;\n        }\n      }\n\n      @keyframes lg2 {\n        0%,\n        to {\n          opacity: 0;\n        }\n        33.333%,\n        50% {\n          opacity: 1;\n        }\n        16.667%,\n        66.667% {\n          opacity: 0;\n        }\n      }\n\n      @keyframes lg3 {\n        0%,\n        50%,\n        to {\n          opacity: 0;\n        }\n        66.667%,\n        83.333% {\n          opacity: 1;\n        }\n      }\n\n      @keyframes text1 {\n        0%,\n        16.667%,\n        to {\n          opacity: 0;\n        }\n        25%,\n        91.667% {\n          opacity: 1;\n        }\n      }\n\n      @keyframes text2 {\n        0%,\n        to {\n          opacity: 1;\n        }\n        33.333%,\n        50% {\n          opacity: 0;\n        }\n        25%,\n        58.333% {\n          opacity: 1;\n        }\n      }\n\n      @keyframes text3 {\n        0%,\n        58.333%,\n        91.667%,\n        to {\n          opacity: 1;\n        }\n        66.667%,\n        83.333% {\n          opacity: 0;\n        }\n      }\n    `,\n    css`\n      span.bg {\n        ${cssvarScope}--clip-background: var(${cssvar}--clip-background);\n        background: var(${cssvarScope}--clip-background);\n      }\n      span {\n        color: transparent;\n        -webkit-text-fill-color: transparent;\n        background-clip: text !important;\n        -webkit-background-clip: text !important;\n        display: inline-flex;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate[] {\n    return [this.t1, this.t2, this.t3].map(this.renderText);\n  }\n\n  protected renderText(text: string): HTMLTemplate {\n    return html`<span class=\"rel\">\n      <span class=\"bg\">${text}</span>\n      <span class=\"fg\">${text}</span>\n    </span>`;\n  }\n}\n\nexport default Overbreath;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"overbreath-text\": Overbreath;\n    \"g-overbreath\": Overbreath;\n  }\n}\n"]}

package/web-components/text/time.d.ts

@@ -0,0 +1,60 @@
+import { type CSSResultGroup } from "../../.deps.js";
+import { GodownElement } from "../../supers/root.js";
+/**
+ * {@linkcode Time} renders a formatting time.
+ */
+export declare class Time extends GodownElement {
+    /**
+     * Cancels the next character formatting.
+     */
+    escape: string;
+    /**
+     * Format strings.
+     * {@linkcode Time.fmt}
+     */
+    format: string;
+    /**
+     * Display content.
+     */
+    value: string;
+    /**
+     * Time.
+     */
+    time: Date;
+    /**
+     * If there is a value, update every gap or timeout.
+     */
+    timeout: number;
+    /**
+     * The number of milliseconds that change with each update.
+     */
+    gap: number;
+    intervalID: number;
+    static styles: CSSResultGroup;
+    protected render(): string;
+    protected firstUpdated(): void;
+    disconnectedCallback(): void;
+    /**
+     * Y for year\
+     * M for month\
+     * D for day\
+     * h for hour\
+     * m for minute\
+     * s for second\
+     * S for milli Second\
+     * Z for time zone.
+     *
+     * @param fm Format string.
+     * @param tm Time.
+     * @returns Format result
+     */
+    static fmt(fm: string, tm: Date, em: string): string;
+}
+export default Time;
+declare global {
+    interface HTMLElementTagNameMap {
+        "time-bar": Time;
+        "g-time": Time;
+    }
+}
+//# sourceMappingURL=time.d.ts.map

package/web-components/text/time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/time.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAY,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIrD;;GAEG;AACH,qBACa,IAAK,SAAQ,aAAa;IACrC;;OAEG;IACS,MAAM,SAAO;IACzB;;;OAGG;IACS,MAAM,SAA8B;IAChD;;OAEG;IACS,KAAK,SAAM;IACvB;;OAEG;IACyB,IAAI,OAAc;IAC9C;;OAEG;IACyB,OAAO,SAAK;IACxC;;OAEG;IACyB,GAAG,SAAK;IAEpC,UAAU,EAAE,MAAM,CAAC;IAEnB,MAAM,CAAC,MAAM,EAAE,cAAc,CAM3B;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IAI1B,SAAS,CAAC,YAAY;IAQtB,oBAAoB;IAIpB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM;CA6CrD;AAED,eAAe,IAAI,CAAC;AAEpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;QACjB,QAAQ,EAAE,IAAI,CAAC;KAChB;CACF"}

package/web-components/{items/time-bar.js → text/time.js}

@@ -1,17 +1,22 @@
-var TimeBar_1;
+var Time_1;
 import { __decorate } from "tslib";
-import { css, property } from "../../deps.js";
-import { define, GodownElement } from "../../root.js";
-const defineName = "time-bar";
+import { css, property } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
+import { GodownElement } from "../../supers/root.js";
+const defineName = "time";
 /**
- * TimeBar renders a formatting time.
+ * {@linkcode Time} renders a formatting time.
  */
-let TimeBar = TimeBar_1 = class TimeBar extends GodownElement {
+let Time = Time_1 = class Time extends GodownElement {
     constructor() {
         super(...arguments);
+        /**
+         * Cancels the next character formatting.
+         */
+        this.escape = "%";
         /**
          * Format strings.
-         * {@linkcode TimeBar.fmt}
+         * {@linkcode Time.fmt}
          */
         this.format = "YYYY-MM-DD hh:mm:ss UTFZ";
         /**
@@ -32,7 +37,7 @@ let TimeBar = TimeBar_1 = class TimeBar extends GodownElement {
         this.gap = 0;
     }
     render() {
-        return this.value || TimeBar_1.fmt(this.format, this.time);
+        return this.value || Time_1.fmt(this.format, this.time, this.escape);
     }
     firstUpdated() {
         if (this.timeout) {
@@ -45,28 +50,35 @@ let TimeBar = TimeBar_1 = class TimeBar extends GodownElement {
         clearInterval(this.intervalID);
     }
     /**
+     * Y for year\
+     * M for month\
+     * D for day\
+     * h for hour\
+     * m for minute\
+     * s for second\
+     * S for milli Second\
+     * Z for time zone.
+     *
      * @param fm Format string.
      * @param tm Time.
-     * @returns F.ormat result\
-     *
-     * Y for years\
-     * M for months\
-     * D for days\
-     * h for hours\
-     * m for minutes\
-     * s for seconds\
-     * Z for time zones.
+     * @returns Format result
      */
-    static fmt(fm, tm) {
-        if (fm === "") {
+    static fmt(fm, tm, em) {
+        if (!fm) {
             return fm;
         }
+        if (isNaN(tm.getTime())) {
+            return undefined;
+        }
         const rest = [];
-        fm = fm.replace(/%([ZYMDhms%])/g, (_, p1) => {
+        const replaced = `${em}${em}`;
+        fm = fm.replace(new RegExp(`${em}([ZYMDhmsS${em}])`, "g"), (_, p1) => {
             rest.push(p1);
-            return "%%";
+            return replaced;
         });
-        const formatNumber = (date) => date.toString().padStart(2, "0").split("");
+        function formatNumber(n, max = 2) {
+            return n.toString().padStart(max, "0").split("");
+        }
         const z = tm.getTimezoneOffset() / -60;
         const switcher = {
             Z: [z >= 0 ? "+" + z.toString() : z.toString()],
@@ -76,11 +88,13 @@ let TimeBar = TimeBar_1 = class TimeBar extends GodownElement {
             h: formatNumber(tm.getHours()),
             m: formatNumber(tm.getMinutes()),
             s: formatNumber(tm.getSeconds()),
+            S: formatNumber(tm.getMilliseconds(), 3),
         };
         const result = [];
         for (const f of fm.split("").reverse()) {
-            if (switcher[f]) {
-                result.push(switcher[f]?.pop());
+            const s = switcher[f]?.pop();
+            if (s) {
+                result.push(s);
             }
             else {
                 result.push(f);
@@ -89,12 +103,12 @@ let TimeBar = TimeBar_1 = class TimeBar extends GodownElement {
         return result
             .reverse()
             .join("")
-            .replace(/%%/g, () => {
+            .replace(new RegExp(replaced, "g"), () => {
             return rest.shift();
         });
     }
 };
-TimeBar.styles = [
+Time.styles = [
     css `
       :host {
         text-align: center;
@@ -103,22 +117,25 @@ TimeBar.styles = [
 ];
 __decorate([
     property()
-], TimeBar.prototype, "format", void 0);
+], Time.prototype, "escape", void 0);
+__decorate([
+    property()
+], Time.prototype, "format", void 0);
 __decorate([
     property()
-], TimeBar.prototype, "value", void 0);
+], Time.prototype, "value", void 0);
 __decorate([
     property({ type: Object })
-], TimeBar.prototype, "time", void 0);
+], Time.prototype, "time", void 0);
 __decorate([
     property({ type: Number })
-], TimeBar.prototype, "timeout", void 0);
+], Time.prototype, "timeout", void 0);
 __decorate([
     property({ type: Number })
-], TimeBar.prototype, "gap", void 0);
-TimeBar = TimeBar_1 = __decorate([
+], Time.prototype, "gap", void 0);
+Time = Time_1 = __decorate([
     define(defineName)
-], TimeBar);
-export { TimeBar };
-export default TimeBar;
-//# sourceMappingURL=time-bar.js.map
+], Time);
+export { Time };
+export default Time;
+//# sourceMappingURL=time.js.map

package/web-components/text/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/time.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, property } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"time\";\n\n/**\n * {@linkcode Time} renders a formatting time.\n */\n@define(defineName)\nexport class Time extends GodownElement {\n  /**\n   * Cancels the next character formatting.\n   */\n  @property() escape = \"%\";\n  /**\n   * Format strings.\n   * {@linkcode Time.fmt}\n   */\n  @property() format = \"YYYY-MM-DD hh:mm:ss UTFZ\";\n  /**\n   * Display content.\n   */\n  @property() value = \"\";\n  /**\n   * Time.\n   */\n  @property({ type: Object }) time = new Date();\n  /**\n   * If there is a value, update every gap or timeout.\n   */\n  @property({ type: Number }) timeout = 0;\n  /**\n   * The number of milliseconds that change with each update.\n   */\n  @property({ type: Number }) gap = 0;\n\n  intervalID: number;\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        text-align: center;\n      }\n    `,\n  ];\n\n  protected render(): string {\n    return this.value || Time.fmt(this.format, this.time, this.escape);\n  }\n\n  protected firstUpdated() {\n    if (this.timeout) {\n      this.intervalID = setInterval(() => {\n        this.time = new Date(this.time.getTime() + (this.gap || this.timeout));\n      }, Math.abs(this.timeout));\n    }\n  }\n\n  disconnectedCallback() {\n    clearInterval(this.intervalID);\n  }\n\n  /**\n   * Y for year\\\n   * M for month\\\n   * D for day\\\n   * h for hour\\\n   * m for minute\\\n   * s for second\\\n   * S for milli Second\\\n   * Z for time zone.\n   *\n   * @param fm Format string.\n   * @param tm Time.\n   * @returns Format result\n   */\n  static fmt(fm: string, tm: Date, em: string): string {\n    if (!fm) {\n      return fm;\n    }\n    if (isNaN(tm.getTime())) {\n      return undefined;\n    }\n    const rest = [];\n    const replaced = `${em}${em}`;\n    fm = fm.replace(new RegExp(`${em}([ZYMDhmsS${em}])`, \"g\"), (_, p1) => {\n      rest.push(p1);\n      return replaced;\n    });\n\n    function formatNumber(n: number, max = 2) {\n      return n.toString().padStart(max, \"0\").split(\"\");\n    }\n\n    const z = tm.getTimezoneOffset() / -60;\n    const switcher: Record<string, string[]> = {\n      Z: [z >= 0 ? \"+\" + z.toString() : z.toString()],\n      Y: tm.getFullYear().toString().split(\"\"),\n      M: formatNumber(tm.getMonth() + 1),\n      D: formatNumber(tm.getDate()),\n      h: formatNumber(tm.getHours()),\n      m: formatNumber(tm.getMinutes()),\n      s: formatNumber(tm.getSeconds()),\n      S: formatNumber(tm.getMilliseconds(), 3),\n    };\n    const result: string[] = [];\n    for (const f of fm.split(\"\").reverse()) {\n      const s = switcher[f]?.pop();\n      if (s) {\n        result.push(s);\n      } else {\n        result.push(f);\n      }\n    }\n    return result\n      .reverse()\n      .join(\"\")\n      .replace(new RegExp(replaced, \"g\"), () => {\n        return rest.shift();\n      });\n  }\n}\n\nexport default Time;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"time-bar\": Time;\n    \"g-time\": Time;\n  }\n}\n"]}

package/web-components/text/{typewriter-text.d.ts → typewriter.d.ts}

@@ -1,16 +1,16 @@
-import { type PropertyValueMap } from "../../deps.js";
+import { type PropertyValueMap } from "../../.deps.js";
 import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../root.js";
+import { GodownElement } from "../../supers/root.js";
 /**
- * TypewriterText renders a typewriter effect to text.
+ * {@linkcode Typewriter} renders a typewriter effect to text.
  */
-export declare class TypewriterText extends GodownElement {
+export declare class Typewriter extends GodownElement {
     /**
      * Raw text.
      */
     text: string;
     /**
-     * Start immediately after {@linkcode TypewriterText.firstUpdated}.
+     * Start immediately after {@linkcode Typewriter.firstUpdated}.
      */
     stopped: boolean;
     /**
@@ -40,7 +40,7 @@ export declare class TypewriterText extends GodownElement {
     timeoutID: number;
     _i: HTMLElement;
     /**
-     * {@linkcode TypewriterText.text} length.
+     * {@linkcode Typewriter.text} length.
      */
     get len(): number;
     static styles: import("lit").CSSResult[];
@@ -51,10 +51,11 @@ export declare class TypewriterText extends GodownElement {
     stop(): void;
     end(): void;
 }
-export default TypewriterText;
+export default Typewriter;
 declare global {
     interface HTMLElementTagNameMap {
-        "typewriter-text": TypewriterText;
+        "typewriter-text": Typewriter;
+        "g-typewriter": Typewriter;
     }
 }
-//# sourceMappingURL=typewriter-text.d.ts.map
+//# sourceMappingURL=typewriter.d.ts.map

package/web-components/text/typewriter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typewriter.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/typewriter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,gBAAgB,EAAgB,MAAM,gBAAgB,CAAC;AAE1F,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,EAAe,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAKlE;;GAEG;AACH,qBACa,UAAW,SAAQ,aAAa;IAC3C;;OAEG;IACS,IAAI,SAAM;IACtB;;OAEG;IAC0B,OAAO,UAAS;IAC7C;;OAEG;IAC0B,KAAK,UAAS;IAC3C;;OAEG;IACyB,GAAG,SAAO;IACtC;;OAEG;IACyB,GAAG,SAAM;IACrC;;OAEG;IACyB,KAAK,SAAK;IACtC;;OAEG;IACyB,KAAK,SAAK;IACtC;;OAEG;IACM,OAAO,SAAM;IAEtB,SAAS,EAAE,MAAM,CAAC;IACN,EAAE,EAAE,WAAW,CAAC;IAE5B;;OAEG;IACH,IAAI,GAAG,WAEN;IAED,MAAM,CAAC,MAAM,4BA+BX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAIhC,SAAS,CAAC,YAAY;IAStB,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAM3D,KAAK,CAAC,EAAE,SAAa;IAYrB,IAAI;IAIJ,GAAG;CAGJ;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;QAC9B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}