@studiometa/ui 0.2.13 → 0.2.15

package/organisms/Frame/Frame.js

@@ -1 +1,155 @@
-import{Base as f,isDirectChild as c,getDirectChildren as p}from"@studiometa/js-toolkit";import{nextFrame as m,historyPush as w}from"@studiometa/js-toolkit/utils";import g from"./FrameAnchor.js";import F from"./FrameForm.js";import u from"./FrameTarget.js";function $(){return{left:window.pageXOffset,top:window.pageYOffset}}const a=new Map;class s extends f{static config={name:"Frame",emits:["before-fetch","after-fetch","before-leave","after-leave","before-content","after-content","before-enter","after-enter"],components:{FrameAnchor:g,FrameForm:F,FrameTarget:u,Frame:s},options:{history:Boolean}};get id(){return this.$el.id}getDirectChild(e){return this.$children[e]?this.$children.Frame?this.$children[e].filter(r=>this.$children.Frame.every(t=>t.$children[e]?!t.$children[e].includes(r):!0)):this.$children[e]:[]}get directChildrenFrameTarget(){return p(this,"Frame","FrameTarget")}mounted(){this.$options.history&&window.addEventListener("popstate",this)}destroyed(){window.removeEventListener("popstate",this)}handleEvent(e){e.type==="popstate"&&this.onWindowPopstate(e),e.type==="beforeunload"&&this.onWindowUnload()}onWindowUnload(){const{history:e}=window;!e.state||e.replaceState({...e.state,scroll:$()},"")}onWindowPopstate(e){this.goTo(window.location.href,e.state)}onFrameAnchorClick(e,r){if(!c(this,"Frame","FrameAnchor",this.$children.FrameAnchor[e]))return;this.$log("onAFrameClick",e,r),r.preventDefault();const t=this.$children.FrameAnchor[e];t.href!==window.location.href&&this.goTo(t.href)}onFrameFormSubmit(e,r){if(!c(this,"Frame","FrameForm",this.$children.FrameForm[e]))return;this.$log("onFrameFormFrameSubmit",e,r),r.preventDefault();const t=this.$children.FrameForm[e],i=new URL(t.action);i.search=new URLSearchParams(new FormData(t.$el)).toString(),this.goTo(i.toString())}parseHTML(e=""){return new DOMParser().parseFromString(e,"text/html")}async goTo(e,r=null){this.$log("goTo",e);const t=new URL(e);if(t.origin!==window.location.origin)throw new Error("Cross origin request are not allowed.");this.$emit("before-fetch",e);const i=await this.fetch(e),n=this.parseHTML(i),l=n.querySelector(`#${this.id}`),h=new s(l);h.$children.registerAll(),this.$emit("after-fetch",e,i),this.$emit("before-leave"),await Promise.all(this.directChildrenFrameTarget.map(o=>o.leave())),this.$emit("after-leave"),this.$emit("before-content"),this.directChildrenFrameTarget.map((o,d)=>o.updateContent(h.directChildrenFrameTarget[d])),this.$options.history&&(document.title=n.title,w({path:t.pathname,search:t.searchParams})),r&&(document.scrollingElement.scrollTop=r.top,document.scrollingElement.scrollLeft=r.left),await m(),this.$root.$update(),await m(),this.$emit("after-content"),this.$emit("before-enter"),await Promise.all(this.directChildrenFrameTarget.map(o=>o.enter())),this.$emit("after-enter")}async fetch(e){const r=a.get(e);if(r)return r.status==="pending"?r.promise:r.content;const t=fetch(e);try{a.set(e,{promise:t,status:"pending",content:void 0});const i=await t.then(n=>n.text());return a.set(e,{promise:t,status:"resolved",content:i}),i}catch(i){return a.set(e,{promise:t,status:"error",content:i}),i}}}export{s as default};
+import { Base, isDirectChild, getDirectChildren } from "@studiometa/js-toolkit";
+import { nextFrame, historyPush } from "@studiometa/js-toolkit/utils";
+import { FrameAnchor } from "./FrameAnchor.js";
+import { FrameForm } from "./FrameForm.js";
+import { FrameTarget } from "./FrameTarget.js";
+function getScrollPosition() {
+  return {
+    left: window.pageXOffset,
+    top: window.pageYOffset
+  };
+}
+const cache = /* @__PURE__ */ new Map();
+class Frame extends Base {
+  static config = {
+    name: "Frame",
+    emits: [
+      "before-fetch",
+      "after-fetch",
+      "before-leave",
+      "after-leave",
+      "before-content",
+      "after-content",
+      "before-enter",
+      "after-enter"
+    ],
+    components: {
+      FrameAnchor,
+      FrameForm,
+      FrameTarget,
+      Frame
+    },
+    options: {
+      history: Boolean
+    }
+  };
+  get id() {
+    return this.$el.id;
+  }
+  get directChildrenFrameTarget() {
+    return getDirectChildren(this, "Frame", "FrameTarget");
+  }
+  onWindowUnload() {
+    const { history } = window;
+    if (!history.state) {
+      return;
+    }
+    history.replaceState(
+      {
+        ...history.state,
+        scroll: getScrollPosition()
+      },
+      ""
+    );
+  }
+  onWindowPopstate(event) {
+    this.goTo(window.location.href, event.state);
+  }
+  onFrameAnchorClick(index, event) {
+    if (!isDirectChild(this, "Frame", "FrameAnchor", this.$children.FrameAnchor[index])) {
+      return;
+    }
+    this.$log("onAFrameClick", index, event);
+    event.preventDefault();
+    const anchor = this.$children.FrameAnchor[index];
+    if (anchor.href === window.location.href) {
+      return;
+    }
+    this.goTo(anchor.href);
+  }
+  onFrameFormSubmit(index, event) {
+    if (!isDirectChild(this, "Frame", "FrameForm", this.$children.FrameForm[index])) {
+      return;
+    }
+    this.$log("onFrameFormFrameSubmit", index, event);
+    event.preventDefault();
+    const form = this.$children.FrameForm[index];
+    const url = new URL(form.action);
+    url.search = new URLSearchParams(new FormData(form.$el)).toString();
+    this.goTo(url.toString());
+  }
+  parseHTML(string = "") {
+    return new DOMParser().parseFromString(string, "text/html");
+  }
+  async goTo(url, scroll = null) {
+    this.$log("goTo", url);
+    const parsedUrl = new URL(url);
+    if (parsedUrl.origin !== window.location.origin) {
+      throw new Error("Cross origin request are not allowed.");
+    }
+    this.$emit("before-fetch", url);
+    const content = await this.fetch(url);
+    const doc = this.parseHTML(content);
+    const el = doc.querySelector(`#${this.id}`);
+    const newFrame = new Frame(el);
+    newFrame.$children.registerAll();
+    this.$emit("after-fetch", url, content);
+    this.$emit("before-leave");
+    await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));
+    this.$emit("after-leave");
+    this.$emit("before-content");
+    this.directChildrenFrameTarget.map(
+      (target, index) => target.updateContent(newFrame.directChildrenFrameTarget[index])
+    );
+    if (this.$options.history) {
+      document.title = doc.title;
+      historyPush({ path: parsedUrl.pathname, search: parsedUrl.searchParams });
+    }
+    if (scroll) {
+      document.scrollingElement.scrollTop = scroll.top;
+      document.scrollingElement.scrollLeft = scroll.left;
+    }
+    await nextFrame();
+    this.$root.$update();
+    await nextFrame();
+    this.$emit("after-content");
+    this.$emit("before-enter");
+    await Promise.all(this.directChildrenFrameTarget.map((target) => target.enter()));
+    this.$emit("after-enter");
+  }
+  async fetch(url) {
+    const cached = cache.get(url);
+    if (cached) {
+      if (cached.status === "pending") {
+        return cached.promise;
+      }
+      return cached.content;
+    }
+    const promise = fetch(url).then((response) => response.text());
+    try {
+      cache.set(url, {
+        promise,
+        status: "pending",
+        content: void 0
+      });
+      const content = await promise;
+      cache.set(url, {
+        promise,
+        status: "resolved",
+        content
+      });
+      return content;
+    } catch (err) {
+      cache.set(url, {
+        promise,
+        status: "error",
+        content: err
+      });
+      return err;
+    }
+  }
+}
+export {
+  Frame
+};
+//# sourceMappingURL=Frame.js.map

package/organisms/Frame/Frame.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/organisms/Frame/Frame.ts"],
+  "sourcesContent": ["import { Base, isDirectChild, getDirectChildren } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { nextFrame, historyPush } from '@studiometa/js-toolkit/utils';\nimport { FrameAnchor } from './FrameAnchor.js';\nimport { FrameForm } from './FrameForm.js';\nimport { FrameTarget } from './FrameTarget.js';\n\n/**\n * Get the scroll position.\n */\nfunction getScrollPosition() {\n  return {\n    left: window.pageXOffset,\n    top: window.pageYOffset,\n  };\n}\n\n/**\n * The fetch cache.\n */\nconst cache: Map<\n  string,\n  { promise: Promise<string>; status: 'pending' | 'resolved' | 'error'; content: string }\n> = new Map();\n\nexport interface FrameProps extends BaseProps {\n  $children: {\n    FrameAnchor: FrameAnchor[];\n    FrameForm: FrameForm[];\n    FrameTarget: FrameTarget[];\n    // eslint-disable-next-line no-use-before-define\n    Frame: Frame[];\n  };\n  $options: {\n    history: boolean;\n  };\n}\n\n/**\n * Class.\n */\nexport class Frame<T extends BaseProps = BaseProps> extends Base<T & FrameProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Frame',\n    emits: [\n      'before-fetch',\n      'after-fetch',\n      'before-leave',\n      'after-leave',\n      'before-content',\n      'after-content',\n      'before-enter',\n      'after-enter',\n    ],\n    components: {\n      FrameAnchor,\n      FrameForm,\n      FrameTarget,\n      Frame,\n    },\n    options: {\n      history: Boolean,\n    },\n  };\n\n  /**\n   * Get uniq id.\n   */\n  get id() {\n    return this.$el.id;\n  }\n\n  /**\n   * Get direct `FrameTarget` children.\n   */\n  get directChildrenFrameTarget(): FrameTarget[] {\n    return getDirectChildren(this, 'Frame', 'FrameTarget');\n  }\n\n  /**\n   * Prevent scroll top on unload.\n   */\n  onWindowUnload() {\n    const { history } = window;\n\n    if (!history.state) {\n      return;\n    }\n\n    history.replaceState(\n      {\n        ...history.state,\n        scroll: getScrollPosition(),\n      },\n      '',\n    );\n  }\n\n  /**\n   * Go to the previous URL on `popstate` event.\n   */\n  onWindowPopstate(event: PopStateEvent) {\n    this.goTo(window.location.href, event.state);\n  }\n\n  /**\n   * Prevent click on `FrameAnchor`.\n   */\n  onFrameAnchorClick(index: number, event: MouseEvent) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameAnchor', this.$children.FrameAnchor[index])) {\n      return;\n    }\n\n    this.$log('onAFrameClick', index, event);\n    event.preventDefault();\n    const anchor = this.$children.FrameAnchor[index];\n\n    // Do nothing when clicking links on the same page\n    // @todo handle hash change\n    if (anchor.href === window.location.href) {\n      return;\n    }\n\n    this.goTo(anchor.href);\n  }\n\n  /**\n   * Prevent submit on forms.\n   */\n  onFrameFormSubmit(index:number, event:SubmitEvent) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameForm', this.$children.FrameForm[index])) {\n      return;\n    }\n\n    this.$log('onFrameFormFrameSubmit', index, event);\n    event.preventDefault();\n    const form = this.$children.FrameForm[index];\n    const url = new URL(form.action);\n    // @ts-ignore\n    url.search = new URLSearchParams(new FormData(form.$el)).toString();\n    // @todo handle post request\n    this.goTo(url.toString());\n  }\n\n  /**\n   * Parge an HTML string into a DOM object.\n   */\n  parseHTML(string = '') {\n    return new DOMParser().parseFromString(string, 'text/html');\n  }\n\n  /**\n   * Go to the given url.\n   */\n  async goTo(url:string, scroll:{ top: number, left: number } = null) {\n    this.$log('goTo', url);\n    const parsedUrl = new URL(url);\n\n    if (parsedUrl.origin !== window.location.origin) {\n      throw new Error('Cross origin request are not allowed.');\n    }\n\n    this.$emit('before-fetch', url);\n\n    // @todo add option to use content as is or to parse it and extract the new frame\n    const content = await this.fetch(url);\n    const doc = this.parseHTML(content);\n    const el = doc.querySelector(`#${this.id}`);\n    // @todo manage el === null\n    const newFrame = new Frame(el as HTMLElement);\n    newFrame.$children.registerAll();\n\n    this.$emit('after-fetch', url, content);\n\n    this.$emit('before-leave');\n    // Leave all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));\n\n    this.$emit('after-leave');\n    this.$emit('before-content');\n\n    // Update content\n    // @todo insert non existing FrameTarget as well\n    this.directChildrenFrameTarget.map((target, index) =>\n      target.updateContent(newFrame.directChildrenFrameTarget[index]),\n    );\n\n    // Push history\n    if (this.$options.history) {\n      document.title = doc.title;\n      historyPush({ path: parsedUrl.pathname, search: parsedUrl.searchParams });\n    }\n\n    if (scroll) {\n      document.scrollingElement.scrollTop = scroll.top;\n      document.scrollingElement.scrollLeft = scroll.left;\n    }\n\n    // Update components\n    await nextFrame();\n    this.$root.$update();\n    await nextFrame();\n\n    this.$emit('after-content');\n    this.$emit('before-enter');\n\n    // Enter all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.enter()));\n\n    this.$emit('after-enter');\n  }\n\n  /**\n   * Fetch the given url.\n   */\n  async fetch(url:string):Promise<string> {\n    const cached = cache.get(url);\n\n    if (cached) {\n      if (cached.status === 'pending') {\n        return cached.promise;\n      }\n\n      return cached.content;\n    }\n\n    const promise = fetch(url).then((response) => response.text());\n\n    try {\n      cache.set(url, {\n        promise,\n        status: 'pending',\n        content: undefined,\n      });\n\n      const content = await promise;\n\n      cache.set(url, {\n        promise,\n        status: 'resolved',\n        content,\n      });\n\n      return content;\n    } catch (err) {\n      cache.set(url, {\n        promise,\n        status: 'error',\n        content: err,\n      });\n\n      return err;\n    }\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/organisms/Frame/FrameAnchor.cjs

@@ -21,10 +21,10 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/organisms/Frame/FrameAnchor.js
+// packages/ui/organisms/Frame/FrameAnchor.ts
 var FrameAnchor_exports = {};
 __export(FrameAnchor_exports, {
-  default: () => FrameAnchor
+  FrameAnchor: () => FrameAnchor
 });
 module.exports = __toCommonJS(FrameAnchor_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
@@ -37,3 +37,4 @@ __publicField(FrameAnchor, "config", {
   name: "FrameAnchor"
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=FrameAnchor.cjs.map

package/organisms/Frame/FrameAnchor.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/organisms/Frame/FrameAnchor.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\n\nexport interface FrameAnchorProps extends BaseProps {\n  $el: HTMLAnchorElement;\n}\n\n/**\n * FrameAnchor class.\n */\nexport class FrameAnchor<T extends BaseProps = BaseProps> extends Base<T & FrameAnchorProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameAnchor',\n  };\n\n  /**\n   * Get the URL.\n   */\n  get href(): string {\n    return this.$el.href;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAUd,IAAM,cAAN,cAA2D,uBAA2B;AAAA,EAW3F,IAAI,OAAe;AACjB,WAAO,KAAK,IAAI;AAAA,EAClB;AACF;AAVE,cAJW,aAIJ,UAAqB;AAAA,EAC1B,MAAM;AACR;",
+  "names": []
+}

package/organisms/Frame/FrameAnchor.d.ts

@@ -1,27 +1,18 @@
-/**
- * @typedef {FrameAnchor & {
- *   $el: HTMLAnchorElement
- * }} FrameAnchorInterface
- */
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+export interface FrameAnchorProps extends BaseProps {
+    $el: HTMLAnchorElement;
+}
 /**
  * FrameAnchor class.
  */
-export default class FrameAnchor extends Base {
+export declare class FrameAnchor<T extends BaseProps = BaseProps> extends Base<T & FrameAnchorProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-    };
+    static config: BaseConfig;
     /**
      * Get the URL.
-     *
-     * @this    {FrameAnchorInterface}
-     * @returns {string}
      */
     get href(): string;
 }
-export type FrameAnchorInterface = FrameAnchor & {
-    $el: HTMLAnchorElement;
-};
-import { Base } from "@studiometa/js-toolkit";

package/organisms/Frame/FrameAnchor.js

@@ -1 +1,13 @@
-import{Base as e}from"@studiometa/js-toolkit";class r extends e{static config={name:"FrameAnchor"};get href(){return this.$el.href}}export{r as default};
+import { Base } from "@studiometa/js-toolkit";
+class FrameAnchor extends Base {
+  static config = {
+    name: "FrameAnchor"
+  };
+  get href() {
+    return this.$el.href;
+  }
+}
+export {
+  FrameAnchor
+};
+//# sourceMappingURL=FrameAnchor.js.map

package/organisms/Frame/FrameAnchor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/organisms/Frame/FrameAnchor.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\n\nexport interface FrameAnchorProps extends BaseProps {\n  $el: HTMLAnchorElement;\n}\n\n/**\n * FrameAnchor class.\n */\nexport class FrameAnchor<T extends BaseProps = BaseProps> extends Base<T & FrameAnchorProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameAnchor',\n  };\n\n  /**\n   * Get the URL.\n   */\n  get href(): string {\n    return this.$el.href;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAUd,MAAM,oBAAqD,KAA2B;AAAA,EAI3F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA,EAKA,IAAI,OAAe;AACjB,WAAO,KAAK,IAAI;AAAA,EAClB;AACF;",
+  "names": []
+}

package/organisms/Frame/FrameForm.cjs

@@ -21,10 +21,10 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/organisms/Frame/FrameForm.js
+// packages/ui/organisms/Frame/FrameForm.ts
 var FrameForm_exports = {};
 __export(FrameForm_exports, {
-  default: () => FrameForm
+  FrameForm: () => FrameForm
 });
 module.exports = __toCommonJS(FrameForm_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
@@ -37,3 +37,4 @@ __publicField(FrameForm, "config", {
   name: "FrameForm"
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=FrameForm.cjs.map

package/organisms/Frame/FrameForm.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/organisms/Frame/FrameForm.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface FrameFormProps extends BaseProps {\n  $el: HTMLFormElement;\n}\n\n/**\n * FrameForm class.\n */\nexport class FrameForm<T extends BaseProps = BaseProps> extends Base<T & FrameFormProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameForm',\n  };\n\n  /**\n   * Get the form action.\n   */\n  get action(): string {\n    return this.$el.action;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAUd,IAAM,YAAN,cAAyD,uBAAyB;AAAA,EAWvF,IAAI,SAAiB;AACnB,WAAO,KAAK,IAAI;AAAA,EAClB;AACF;AAVE,cAJW,WAIJ,UAAqB;AAAA,EAC1B,MAAM;AACR;",
+  "names": []
+}

package/organisms/Frame/FrameForm.d.ts

@@ -1,24 +1,18 @@
-/**
- * @typedef {FrameForm & {
- *   $el: HTMLFormElement
- * }} FrameFormInterface
- */
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+export interface FrameFormProps extends BaseProps {
+    $el: HTMLFormElement;
+}
 /**
  * FrameForm class.
  */
-export default class FrameForm extends Base {
-    static config: {
-        name: string;
-    };
+export declare class FrameForm<T extends BaseProps = BaseProps> extends Base<T & FrameFormProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
     /**
      * Get the form action.
-     *
-     * @this    {FrameFormInterface}
-     * @returns {string}
      */
     get action(): string;
 }
-export type FrameFormInterface = FrameForm & {
-    $el: HTMLFormElement;
-};
-import { Base } from "@studiometa/js-toolkit";

package/organisms/Frame/FrameForm.js

@@ -1 +1,13 @@
-import{Base as e}from"@studiometa/js-toolkit";class t extends e{static config={name:"FrameForm"};get action(){return this.$el.action}}export{t as default};
+import { Base } from "@studiometa/js-toolkit";
+class FrameForm extends Base {
+  static config = {
+    name: "FrameForm"
+  };
+  get action() {
+    return this.$el.action;
+  }
+}
+export {
+  FrameForm
+};
+//# sourceMappingURL=FrameForm.js.map

package/organisms/Frame/FrameForm.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/organisms/Frame/FrameForm.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface FrameFormProps extends BaseProps {\n  $el: HTMLFormElement;\n}\n\n/**\n * FrameForm class.\n */\nexport class FrameForm<T extends BaseProps = BaseProps> extends Base<T & FrameFormProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameForm',\n  };\n\n  /**\n   * Get the form action.\n   */\n  get action(): string {\n    return this.$el.action;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAUd,MAAM,kBAAmD,KAAyB;AAAA,EAIvF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA,EAKA,IAAI,SAAiB;AACnB,WAAO,KAAK,IAAI;AAAA,EAClB;AACF;",
+  "names": []
+}

package/organisms/Frame/FrameTarget.cjs

@@ -21,10 +21,10 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/organisms/Frame/FrameTarget.js
+// packages/ui/organisms/Frame/FrameTarget.ts
 var FrameTarget_exports = {};
 __export(FrameTarget_exports, {
-  default: () => FrameTarget
+  FrameTarget: () => FrameTarget
 });
 module.exports = __toCommonJS(FrameTarget_exports);
 var import_utils = require("@studiometa/js-toolkit/utils");
@@ -45,9 +45,13 @@ var _FrameTarget = class extends import_primitives.Transition {
     switch (this.$options.mode) {
       case "append":
       case "prepend":
-        await Promise.all(Array.from(this.$el.children).filter((child) => from.split(" ").every((className) => child.classList.contains(className))).map((child) => {
-          return (0, import_utils.transition)(child, transitionStyles, enterKeep && "keep");
-        }));
+        await Promise.all(
+          Array.from(this.$el.children).filter(
+            (child) => from.split(" ").every((className) => child.classList.contains(className))
+          ).map(
+            (child) => (0, import_utils.transition)(child, transitionStyles, enterKeep && "keep")
+          )
+        );
         break;
       case "replace":
       default:
@@ -59,10 +63,11 @@ var _FrameTarget = class extends import_primitives.Transition {
     switch (this.$options.mode) {
       case "prepend":
       case "append":
-        Array.from(newTarget.$el.children).forEach((child) => {
-          child.classList.add(...this.$options.enterFrom.split(" "));
-        });
-        this.$el.insertAdjacentHTML(_FrameTarget.__INSERT_MODES[this.$options.mode], newTarget.$el.innerHTML);
+        (0, import_utils.addClass)(Array.from(newTarget.$el.children), this.$options.enterFrom.split(" "));
+        this.$el.insertAdjacentHTML(
+          _FrameTarget.__INSERT_MODES[this.$options.mode],
+          newTarget.$el.innerHTML
+        );
         break;
       case "replace":
       default:
@@ -90,3 +95,4 @@ __publicField(FrameTarget, "__INSERT_MODES", {
   append: "beforeend"
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=FrameTarget.cjs.map

package/organisms/Frame/FrameTarget.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/organisms/Frame/FrameTarget.ts"],
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { addClass, transition } from '@studiometa/js-toolkit/utils';\nimport { Transition } from '../../primitives/index.js';\n\nexport interface FrameTargetProps extends BaseProps {\n  $options: {\n    mode: 'replace' | 'prepend' | 'append';\n    id: string;\n    leaveKeep: true;\n  };\n}\n\n/**\n * FrameTarget class.\n */\nexport class FrameTarget<T extends BaseProps = BaseProps> extends Transition<T & FrameTargetProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'FrameTarget',\n    log: true,\n    options: {\n      ...Transition.config.options,\n      mode: {\n        type: String,\n        default: 'replace', // or 'prepend' or 'append'\n      },\n      id: String,\n    },\n  };\n\n  /**\n   * Insert modes.\n   */\n  static __INSERT_MODES = {\n    prepend: 'afterbegin',\n    append: 'beforeend',\n  } as const;\n\n  /**\n   * Override options.\n   */\n  // @ts-ignore\n  get $options() {\n    const options = super.$options;\n\n    options.leaveKeep = true;\n\n    return options;\n  }\n\n  /**\n   * Get uniq ID.\n   */\n  get id(): string {\n    return this.$options.id ?? this.$el.id;\n  }\n\n  /**\n   * Enter transition.\n   */\n  async enter() {\n    this.$log('enter');\n\n    const { enterFrom: from, enterActive: active, enterTo: to, leaveTo, enterKeep } = this.$options;\n    const transitionStyles = { from, active, to };\n\n    switch (this.$options.mode) {\n      case 'append':\n      case 'prepend':\n        await Promise.all(\n          Array.from(this.$el.children)\n            .filter((child) =>\n              from.split(' ').every((className) => child.classList.contains(className)),\n            )\n            .map((child) =>\n              transition(child as HTMLElement, transitionStyles, enterKeep && 'keep'),\n            ),\n        );\n        break;\n      case 'replace':\n      default:\n        transitionStyles.from = Array.from(new Set([from, leaveTo].flat())).join(' ');\n        await transition(this.$el, transitionStyles, enterKeep && 'keep');\n    }\n  }\n\n  /**\n   * Update the content from the new target.\n   *\n   * @param   {FrameTarget} newTarget The instance of the new target.\n   * @returns {void}\n   */\n  updateContent(newTarget:FrameTarget) {\n    // @todo manage 'prepend' and 'append' transition\n    // only the new content should have the transition\n    // - add the leaveTo and enterFrom classes to all `newTarget.children`\n    // - or wrap the new content in a custom div ?\n    switch (this.$options.mode) {\n      case 'prepend':\n      case 'append':\n        addClass(Array.from(newTarget.$el.children), this.$options.enterFrom.split(' '));\n        this.$el.insertAdjacentHTML(\n          FrameTarget.__INSERT_MODES[this.$options.mode],\n          newTarget.$el.innerHTML,\n        );\n        break;\n      case 'replace':\n      default:\n        this.$el.innerHTML = newTarget.$el.innerHTML;\n        break;\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAqC;AACrC,wBAA2B;AAapB,IAAM,eAAN,cAA2D,6BAAiC;AAAA,EA8BjG,IAAI,WAAW;AACb,UAAM,UAAU,MAAM;AAEtB,YAAQ,YAAY;AAEpB,WAAO;AAAA,EACT;AAAA,EAKA,IAAI,KAAa;AACf,WAAO,KAAK,SAAS,MAAM,KAAK,IAAI;AAAA,EACtC;AAAA,EAKA,MAAM,QAAQ;AACZ,SAAK,KAAK,OAAO;AAEjB,UAAM,EAAE,WAAW,MAAM,aAAa,QAAQ,SAAS,IAAI,SAAS,UAAU,IAAI,KAAK;AACvF,UAAM,mBAAmB,EAAE,MAAM,QAAQ,GAAG;AAE5C,YAAQ,KAAK,SAAS,MAAM;AAAA,MAC1B,KAAK;AAAA,MACL,KAAK;AACH,cAAM,QAAQ;AAAA,UACZ,MAAM,KAAK,KAAK,IAAI,QAAQ,EACzB;AAAA,YAAO,CAAC,UACP,KAAK,MAAM,GAAG,EAAE,MAAM,CAAC,cAAc,MAAM,UAAU,SAAS,SAAS,CAAC;AAAA,UAC1E,EACC;AAAA,YAAI,CAAC,cACJ,yBAAW,OAAsB,kBAAkB,aAAa,MAAM;AAAA,UACxE;AAAA,QACJ;AACA;AAAA,MACF,KAAK;AAAA,MACL;AACE,yBAAiB,OAAO,MAAM,KAAK,IAAI,IAAI,CAAC,MAAM,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG;AAC5E,kBAAM,yBAAW,KAAK,KAAK,kBAAkB,aAAa,MAAM;AAAA,IACpE;AAAA,EACF;AAAA,EAQA,cAAc,WAAuB;AAKnC,YAAQ,KAAK,SAAS,MAAM;AAAA,MAC1B,KAAK;AAAA,MACL,KAAK;AACH,mCAAS,MAAM,KAAK,UAAU,IAAI,QAAQ,GAAG,KAAK,SAAS,UAAU,MAAM,GAAG,CAAC;AAC/E,aAAK,IAAI;AAAA,UACP,aAAY,eAAe,KAAK,SAAS;AAAA,UACzC,UAAU,IAAI;AAAA,QAChB;AACA;AAAA,MACF,KAAK;AAAA,MACL;AACE,aAAK,IAAI,YAAY,UAAU,IAAI;AACnC;AAAA,IACJ;AAAA,EACF;AACF;AApGO,IAAM,cAAN;AAIL,cAJW,aAIJ,UAAqB;AAAA,EAC1B,GAAG,6BAAW;AAAA,EACd,MAAM;AAAA,EACN,KAAK;AAAA,EACL,SAAS;AAAA,IACP,GAAG,6BAAW,OAAO;AAAA,IACrB,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA,IAAI;AAAA,EACN;AACF;AAKA,cArBW,aAqBJ,kBAAiB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AACV;",
+  "names": []
+}

package/organisms/Frame/FrameTarget.d.ts

@@ -1,45 +1,37 @@
-declare const FrameTarget_base: typeof import("@studiometa/js-toolkit").Base & (new (...a: any[]) => {
-    readonly target: HTMLElement | HTMLElement[];
-    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
-    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
-});
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { Transition } from '../../primitives/index.js';
+export interface FrameTargetProps extends BaseProps {
+    $options: {
+        mode: 'replace' | 'prepend' | 'append';
+        id: string;
+        leaveKeep: true;
+    };
+}
 /**
  * FrameTarget class.
  */
-export default class FrameTarget extends FrameTarget_base {
+export declare class FrameTarget<T extends BaseProps = BaseProps> extends Transition<T & FrameTargetProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        log: boolean;
-        options: {
-            mode: {
-                type: StringConstructor;
-                default: string;
-            };
-            id: StringConstructor;
-        };
-        debug?: boolean;
-        refs?: string[];
-        emits?: string[];
-        components?: import("@studiometa/js-toolkit/Base/index.js").BaseConfigComponents;
-    };
+    static config: BaseConfig;
     /**
      * Insert modes.
      */
     static __INSERT_MODES: {
-        prepend: string;
-        append: string;
+        readonly prepend: "afterbegin";
+        readonly append: "beforeend";
     };
+    /**
+     * Override options.
+     */
+    get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit/Base/index.js").BaseOptions & (T & FrameTargetProps & import("../../index.js").TransitionProps)["$options"];
     /**
      * Get uniq ID.
-     * @returns {string}
      */
     get id(): string;
     /**
      * Enter transition.
-     * @returns {Promise<void>}
      */
     enter(): Promise<void>;
     /**
@@ -50,4 +42,3 @@ export default class FrameTarget extends FrameTarget_base {
      */
     updateContent(newTarget: FrameTarget): void;
 }
-export {};

package/organisms/Frame/FrameTarget.js

@@ -1 +1,70 @@
-import{transition as a}from"@studiometa/js-toolkit/utils";import{Transition as r}from"../../primitives/index.js";class o extends r{static config={...r.config,name:"FrameTarget",log:!0,options:{...r.config.options,mode:{type:String,default:"replace"},id:String}};static __INSERT_MODES={prepend:"afterbegin",append:"beforeend"};get $options(){const e=super.$options;return e.leaveKeep=!0,e}get id(){return this.$options.id??this.$el.id}async enter(){this.$log("enter");const{enterFrom:e,enterActive:t,enterTo:p,leaveTo:l,enterKeep:s}=this.$options,i={from:e,active:t,to:p};switch(this.$options.mode){case"append":case"prepend":await Promise.all(Array.from(this.$el.children).filter(n=>e.split(" ").every(c=>n.classList.contains(c))).map(n=>a(n,i,s&&"keep")));break;case"replace":default:i.from=Array.from(new Set([e,l].flat())).join(" "),await a(this.$el,i,s&&"keep")}}updateContent(e){switch(this.$options.mode){case"prepend":case"append":Array.from(e.$el.children).forEach(t=>{t.classList.add(...this.$options.enterFrom.split(" "))}),this.$el.insertAdjacentHTML(o.__INSERT_MODES[this.$options.mode],e.$el.innerHTML);break;case"replace":default:this.$el.innerHTML=e.$el.innerHTML;break}}}export{o as default};
+import { addClass, transition } from "@studiometa/js-toolkit/utils";
+import { Transition } from "../../primitives/index.js";
+class FrameTarget extends Transition {
+  static config = {
+    ...Transition.config,
+    name: "FrameTarget",
+    log: true,
+    options: {
+      ...Transition.config.options,
+      mode: {
+        type: String,
+        default: "replace"
+      },
+      id: String
+    }
+  };
+  static __INSERT_MODES = {
+    prepend: "afterbegin",
+    append: "beforeend"
+  };
+  get $options() {
+    const options = super.$options;
+    options.leaveKeep = true;
+    return options;
+  }
+  get id() {
+    return this.$options.id ?? this.$el.id;
+  }
+  async enter() {
+    this.$log("enter");
+    const { enterFrom: from, enterActive: active, enterTo: to, leaveTo, enterKeep } = this.$options;
+    const transitionStyles = { from, active, to };
+    switch (this.$options.mode) {
+      case "append":
+      case "prepend":
+        await Promise.all(
+          Array.from(this.$el.children).filter(
+            (child) => from.split(" ").every((className) => child.classList.contains(className))
+          ).map(
+            (child) => transition(child, transitionStyles, enterKeep && "keep")
+          )
+        );
+        break;
+      case "replace":
+      default:
+        transitionStyles.from = Array.from(new Set([from, leaveTo].flat())).join(" ");
+        await transition(this.$el, transitionStyles, enterKeep && "keep");
+    }
+  }
+  updateContent(newTarget) {
+    switch (this.$options.mode) {
+      case "prepend":
+      case "append":
+        addClass(Array.from(newTarget.$el.children), this.$options.enterFrom.split(" "));
+        this.$el.insertAdjacentHTML(
+          FrameTarget.__INSERT_MODES[this.$options.mode],
+          newTarget.$el.innerHTML
+        );
+        break;
+      case "replace":
+      default:
+        this.$el.innerHTML = newTarget.$el.innerHTML;
+        break;
+    }
+  }
+}
+export {
+  FrameTarget
+};
+//# sourceMappingURL=FrameTarget.js.map

package/organisms/Frame/FrameTarget.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/organisms/Frame/FrameTarget.ts"],
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { addClass, transition } from '@studiometa/js-toolkit/utils';\nimport { Transition } from '../../primitives/index.js';\n\nexport interface FrameTargetProps extends BaseProps {\n  $options: {\n    mode: 'replace' | 'prepend' | 'append';\n    id: string;\n    leaveKeep: true;\n  };\n}\n\n/**\n * FrameTarget class.\n */\nexport class FrameTarget<T extends BaseProps = BaseProps> extends Transition<T & FrameTargetProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'FrameTarget',\n    log: true,\n    options: {\n      ...Transition.config.options,\n      mode: {\n        type: String,\n        default: 'replace', // or 'prepend' or 'append'\n      },\n      id: String,\n    },\n  };\n\n  /**\n   * Insert modes.\n   */\n  static __INSERT_MODES = {\n    prepend: 'afterbegin',\n    append: 'beforeend',\n  } as const;\n\n  /**\n   * Override options.\n   */\n  // @ts-ignore\n  get $options() {\n    const options = super.$options;\n\n    options.leaveKeep = true;\n\n    return options;\n  }\n\n  /**\n   * Get uniq ID.\n   */\n  get id(): string {\n    return this.$options.id ?? this.$el.id;\n  }\n\n  /**\n   * Enter transition.\n   */\n  async enter() {\n    this.$log('enter');\n\n    const { enterFrom: from, enterActive: active, enterTo: to, leaveTo, enterKeep } = this.$options;\n    const transitionStyles = { from, active, to };\n\n    switch (this.$options.mode) {\n      case 'append':\n      case 'prepend':\n        await Promise.all(\n          Array.from(this.$el.children)\n            .filter((child) =>\n              from.split(' ').every((className) => child.classList.contains(className)),\n            )\n            .map((child) =>\n              transition(child as HTMLElement, transitionStyles, enterKeep && 'keep'),\n            ),\n        );\n        break;\n      case 'replace':\n      default:\n        transitionStyles.from = Array.from(new Set([from, leaveTo].flat())).join(' ');\n        await transition(this.$el, transitionStyles, enterKeep && 'keep');\n    }\n  }\n\n  /**\n   * Update the content from the new target.\n   *\n   * @param   {FrameTarget} newTarget The instance of the new target.\n   * @returns {void}\n   */\n  updateContent(newTarget:FrameTarget) {\n    // @todo manage 'prepend' and 'append' transition\n    // only the new content should have the transition\n    // - add the leaveTo and enterFrom classes to all `newTarget.children`\n    // - or wrap the new content in a custom div ?\n    switch (this.$options.mode) {\n      case 'prepend':\n      case 'append':\n        addClass(Array.from(newTarget.$el.children), this.$options.enterFrom.split(' '));\n        this.$el.insertAdjacentHTML(\n          FrameTarget.__INSERT_MODES[this.$options.mode],\n          newTarget.$el.innerHTML,\n        );\n        break;\n      case 'replace':\n      default:\n        this.$el.innerHTML = newTarget.$el.innerHTML;\n        break;\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,UAAU,kBAAkB;AACrC,SAAS,kBAAkB;AAapB,MAAM,oBAAqD,WAAiC;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EAKA,OAAO,iBAAiB;AAAA,IACtB,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EAMA,IAAI,WAAW;AACb,UAAM,UAAU,MAAM;AAEtB,YAAQ,YAAY;AAEpB,WAAO;AAAA,EACT;AAAA,EAKA,IAAI,KAAa;AACf,WAAO,KAAK,SAAS,MAAM,KAAK,IAAI;AAAA,EACtC;AAAA,EAKA,MAAM,QAAQ;AACZ,SAAK,KAAK,OAAO;AAEjB,UAAM,EAAE,WAAW,MAAM,aAAa,QAAQ,SAAS,IAAI,SAAS,UAAU,IAAI,KAAK;AACvF,UAAM,mBAAmB,EAAE,MAAM,QAAQ,GAAG;AAE5C,YAAQ,KAAK,SAAS,MAAM;AAAA,MAC1B,KAAK;AAAA,MACL,KAAK;AACH,cAAM,QAAQ;AAAA,UACZ,MAAM,KAAK,KAAK,IAAI,QAAQ,EACzB;AAAA,YAAO,CAAC,UACP,KAAK,MAAM,GAAG,EAAE,MAAM,CAAC,cAAc,MAAM,UAAU,SAAS,SAAS,CAAC;AAAA,UAC1E,EACC;AAAA,YAAI,CAAC,UACJ,WAAW,OAAsB,kBAAkB,aAAa,MAAM;AAAA,UACxE;AAAA,QACJ;AACA;AAAA,MACF,KAAK;AAAA,MACL;AACE,yBAAiB,OAAO,MAAM,KAAK,IAAI,IAAI,CAAC,MAAM,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG;AAC5E,cAAM,WAAW,KAAK,KAAK,kBAAkB,aAAa,MAAM;AAAA,IACpE;AAAA,EACF;AAAA,EAQA,cAAc,WAAuB;AAKnC,YAAQ,KAAK,SAAS,MAAM;AAAA,MAC1B,KAAK;AAAA,MACL,KAAK;AACH,iBAAS,MAAM,KAAK,UAAU,IAAI,QAAQ,GAAG,KAAK,SAAS,UAAU,MAAM,GAAG,CAAC;AAC/E,aAAK,IAAI;AAAA,UACP,YAAY,eAAe,KAAK,SAAS;AAAA,UACzC,UAAU,IAAI;AAAA,QAChB;AACA;AAAA,MACF,KAAK;AAAA,MACL;AACE,aAAK,IAAI,YAAY,UAAU,IAAI;AACnC;AAAA,IACJ;AAAA,EACF;AACF;",
+  "names": []
+}

package/organisms/Frame/index.cjs

@@ -1,13 +1,7 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -16,20 +10,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/ui/organisms/Frame/index.js
+// packages/ui/organisms/Frame/index.ts
 var Frame_exports = {};
-__export(Frame_exports, {
-  Frame: () => import_Frame.default,
-  FrameAnchor: () => import_FrameAnchor.default,
-  FrameForm: () => import_FrameForm.default,
-  FrameTarget: () => import_FrameTarget.default
-});
 module.exports = __toCommonJS(Frame_exports);
-var import_Frame = __toESM(require("./Frame.cjs"), 1);
-var import_FrameAnchor = __toESM(require("./FrameAnchor.cjs"), 1);
-var import_FrameForm = __toESM(require("./FrameForm.cjs"), 1);
-var import_FrameTarget = __toESM(require("./FrameTarget.cjs"), 1);
+__reExport(Frame_exports, require("./Frame.cjs"), module.exports);
+__reExport(Frame_exports, require("./FrameAnchor.cjs"), module.exports);
+__reExport(Frame_exports, require("./FrameForm.cjs"), module.exports);
+__reExport(Frame_exports, require("./FrameTarget.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/organisms/Frame/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/organisms/Frame/index.ts"],
+  "sourcesContent": ["export * from './Frame.js';\nexport * from './FrameAnchor.js';\nexport * from './FrameForm.js';\nexport * from './FrameTarget.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,wBAAd;AACA,0BAAc,8BADd;AAEA,0BAAc,4BAFd;AAGA,0BAAc,8BAHd;",
+  "names": []
+}