@studiometa/ui 1.2.0 → 1.4.0

package/Fetch/Fetch.js

@@ -0,0 +1,275 @@
+import { Base } from "@studiometa/js-toolkit";
+import { domScheduler, historyPush, isFunction } from "@studiometa/js-toolkit/utils";
+import morphdom from "morphdom";
+import { adoptNewScripts, getScripts } from "./utils.js";
+class Fetch extends Base {
+  /**
+   * Fetch events enum.
+   */
+  static FETCH_EVENTS = {
+    BEFORE_FETCH: "fetch-before",
+    FETCH: "fetch-fetch",
+    AFTER_FETCH: "fetch-after",
+    BEFORE_UPDATE: "fetch-update-before",
+    UPDATE: "fetch-update",
+    AFTER_UPDATE: "fetch-update-after",
+    ERROR: "fetch-error"
+  };
+  /**
+   * Fetch modes enum.
+   */
+  static FETCH_MODES = {
+    REPLACE: "replace",
+    PREPEND: "prepend",
+    APPEND: "append",
+    MORPH: "morph"
+  };
+  /**
+   * Config.
+   */
+  static config = {
+    name: "Fetch",
+    emits: Object.values(this.FETCH_EVENTS),
+    refs: ["headers[]"],
+    options: {
+      history: Boolean,
+      mode: {
+        type: String,
+        default: this.FETCH_MODES.REPLACE
+      },
+      requestInit: Object,
+      headers: Object,
+      selector: {
+        type: String,
+        default: "[id]"
+      }
+    }
+  };
+  /**
+   * Header names used by the requestInit property.
+   * @internal
+   */
+  __headerNames = {
+    ACCEPT: "accept",
+    X_REQUESTED_BY: "x-requested-by",
+    X_TRIGGERED_BY: "x-triggered-by",
+    USER_AGENT: "user-agent"
+  };
+  /**
+   * DOM Parser to parse the new content to be injected.
+   * @internal
+   */
+  __domParser = new DOMParser();
+  /**
+   * Abort controller to prevent multiple simultaneous fetches.
+   * @internal
+   */
+  __abortController = new AbortController();
+  /**
+   * The client used for the fetch request.
+   */
+  get client() {
+    return window.fetch.bind(window);
+  }
+  /**
+   * The URL to use for the request.
+   */
+  get url() {
+    const { $el, isForm } = this;
+    if (isForm) {
+      const { action, method } = this.$el;
+      const url = new URL(action);
+      if (method.toLowerCase() === "get") {
+        url.search = new URLSearchParams(new FormData($el)).toString();
+      }
+      return url;
+    }
+    return new URL($el.href);
+  }
+  /**
+   * Option for the fetch request.
+   */
+  get requestInit() {
+    const { __headerNames: headerNames, isForm, $el, $options, $refs } = this;
+    const { requestInit, headers } = $options;
+    const { headers: headerRefs } = $refs;
+    const requestedBy = "@studiometa/ui/Fetch";
+    const normalizedRequestInit = {
+      ...requestInit,
+      headers: {
+        [headerNames.USER_AGENT]: `${navigator.userAgent} ${requestedBy}`,
+        ...requestInit.headers,
+        ...headers
+      }
+    };
+    if (headerRefs) {
+      for (const header of headerRefs) {
+        if (header.dataset.name && header.value) {
+          normalizedRequestInit.headers[header.dataset.name] = header.value;
+        }
+      }
+    }
+    if (isForm) {
+      const form = $el;
+      normalizedRequestInit.method = form.method;
+      normalizedRequestInit.body = new FormData(form);
+    }
+    return normalizedRequestInit;
+  }
+  /**
+   * Is the root element a link?
+   */
+  get isLink() {
+    return this.$el instanceof HTMLAnchorElement;
+  }
+  /**
+   * Is the root element a form?
+   */
+  get isForm() {
+    return this.$el instanceof HTMLFormElement;
+  }
+  /**
+   * Emit bubbling events.
+   * @inheritdoc
+   */
+  $emit(event, ...args) {
+    const e = new CustomEvent(event, { detail: args, bubbles: true });
+    return super.$emit(e, ...args);
+  }
+  /**
+   * If root element is a link, prevent its default behavior and fetch its URL.
+   */
+  onClick({ event }) {
+    if (!this.isLink) return;
+    if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey && event.button === 0 && this.$el.target !== "_blank") {
+      event.preventDefault();
+      this.fetch(this.url, this.requestInit);
+    }
+  }
+  /**
+   * If root element is a form, prevent its default behavior on submit and fetch its action
+   * following the `method` attribute and with the form's data.
+   */
+  onSubmit({ event }) {
+    if (!this.isForm) return;
+    if (this.$el.target !== "_blank") {
+      event.preventDefault();
+      this.fetch(this.url, this.requestInit);
+    }
+  }
+  /**
+   * Update content on history back/forward navigation.
+   */
+  onWindowPopstate() {
+    if (!this.$options.history) return;
+    this.fetch(new URL(window.location.href), {
+      headers: {
+        [this.__headerNames.X_TRIGGERED_BY]: "popstate"
+      }
+    });
+  }
+  /**
+   * Fetch given url.
+   */
+  async fetch(url, requestInit = {}) {
+    const { FETCH_EVENTS } = this.constructor;
+    this.$emit(FETCH_EVENTS.BEFORE_FETCH, this, url, requestInit);
+    this.__abortController.abort();
+    this.__abortController = new AbortController();
+    const init = {
+      ...this.requestInit,
+      ...requestInit,
+      headers: {
+        ...this.requestInit.headers,
+        ...requestInit.headers
+      },
+      signal: this.__abortController.signal
+    };
+    this.$log("fetch", url, init);
+    this.$emit(FETCH_EVENTS.FETCH, this, url, requestInit);
+    try {
+      const content = await this.client(url, init).then((response) => response.text());
+      this.$emit(FETCH_EVENTS.AFTER_FETCH, this, url, requestInit, content);
+      this.update(url, init, content);
+    } catch (error) {
+      this.$emit(FETCH_EVENTS.AFTER_FETCH, this, url, requestInit);
+      this.error(url, init, error);
+    }
+  }
+  /**
+   * Update the DOM with new content from the fetched HTML.
+   * @internal
+   */
+  __updateDOM(fragment) {
+    const { FETCH_MODES } = this.constructor;
+    const { mode, selector } = this.$options;
+    for (const newElement of fragment.querySelectorAll(selector)) {
+      const oldElement = document.querySelector(
+        `[id="${newElement.id}"]`
+      );
+      if (!oldElement) {
+        continue;
+      }
+      const oldScripts = getScripts(oldElement);
+      switch (mode) {
+        case FETCH_MODES.APPEND:
+          oldElement.append(...newElement.childNodes);
+          adoptNewScripts(getScripts(oldElement), oldScripts);
+          break;
+        case FETCH_MODES.PREPEND:
+          oldElement.prepend(...newElement.childNodes);
+          adoptNewScripts(getScripts(oldElement), oldScripts);
+          break;
+        case FETCH_MODES.MORPH:
+          morphdom(oldElement, newElement);
+          adoptNewScripts(getScripts(oldElement), oldScripts);
+          break;
+        case FETCH_MODES.REPLACE:
+        default:
+          oldElement.replaceWith(newElement);
+          adoptNewScripts(getScripts(newElement), oldScripts);
+          break;
+      }
+    }
+  }
+  /**
+   * Dispatch the contents to update to their matching FrameTarget.
+   */
+  async update(url, requestInit, content) {
+    const { FETCH_EVENTS } = this.constructor;
+    const { history } = this.$options;
+    this.$log("content", url, content);
+    this.$emit(FETCH_EVENTS.BEFORE_UPDATE, this, url, requestInit, content);
+    const fragment = this.__domParser.parseFromString(content, "text/html");
+    if (history) {
+      if (requestInit?.headers?.[this.__headerNames.X_TRIGGERED_BY] !== "popstate") {
+        historyPush({ path: url.pathname, search: url.searchParams });
+      }
+      domScheduler.write(() => {
+        if (fragment.title) {
+          document.title = fragment.title;
+        }
+      });
+    }
+    this.$emit(FETCH_EVENTS.UPDATE, this, url, requestInit, fragment);
+    if (isFunction(document.startViewTransition)) {
+      await document.startViewTransition(() => {
+        this.__updateDOM(fragment);
+      }).ready;
+    } else {
+      this.__updateDOM(fragment);
+    }
+    this.$emit(FETCH_EVENTS.AFTER_UPDATE, this, url, requestInit, fragment);
+  }
+  /**
+   * Handle errors.
+   */
+  error(url, requestInit, error) {
+    this.$log("error", url, requestInit, error);
+    this.$emit(this.constructor.FETCH_EVENTS.ERROR, this, url, requestInit, error);
+  }
+}
+export {
+  Fetch
+};
+//# sourceMappingURL=Fetch.js.map

package/Fetch/Fetch.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Fetch/Fetch.ts"],
+  "sourcesContent": ["import { Base, type BaseConfig, type BaseProps } from '@studiometa/js-toolkit';\nimport { domScheduler, historyPush, isFunction } from '@studiometa/js-toolkit/utils';\nimport morphdom from 'morphdom';\nimport { adoptNewScripts, getScripts } from './utils.js';\n\nexport interface FetchProps extends BaseProps {\n  $el: HTMLAnchorElement | HTMLFormElement;\n  $refs: {\n    headers: HTMLInputElement[];\n  };\n  $options: {\n    history: boolean;\n    requestInit: RequestInit;\n    headers: Record<string, string>;\n    mode: 'replace' | 'prepend' | 'append' | 'morph';\n    selector: string;\n  };\n}\n\nexport type FetchConstructor<T extends Fetch = Fetch> = {\n  new (...args: any[]): T;\n  prototype: Fetch;\n} & Pick<typeof Fetch, keyof typeof Fetch>;\n\n/**\n * Fetch class.\n * @link https://ui.studiometa.dev/-/components/Fetch/\n */\nexport class Fetch<T extends BaseProps = BaseProps> extends Base<T & FetchProps> {\n  /**\n   * Declare the `this.constructor` type\n   * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311\n   */\n  declare ['constructor']: FetchConstructor;\n\n  /**\n   * Fetch events enum.\n   */\n  static FETCH_EVENTS = {\n    BEFORE_FETCH: 'fetch-before',\n    FETCH: 'fetch-fetch',\n    AFTER_FETCH: 'fetch-after',\n    BEFORE_UPDATE: 'fetch-update-before',\n    UPDATE: 'fetch-update',\n    AFTER_UPDATE: 'fetch-update-after',\n    ERROR: 'fetch-error',\n  } as const;\n\n  /**\n   * Fetch modes enum.\n   */\n  static FETCH_MODES = {\n    REPLACE: 'replace',\n    PREPEND: 'prepend',\n    APPEND: 'append',\n    MORPH: 'morph',\n  } as const;\n\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Fetch',\n    emits: Object.values(this.FETCH_EVENTS),\n    refs: ['headers[]'],\n    options: {\n      history: Boolean,\n      mode: {\n        type: String,\n        default: this.FETCH_MODES.REPLACE,\n      },\n      requestInit: Object,\n      headers: Object,\n      selector: {\n        type: String,\n        default: '[id]',\n      },\n    },\n  };\n\n  /**\n   * Header names used by the requestInit property.\n   * @internal\n   */\n  __headerNames = {\n    ACCEPT: 'accept',\n    X_REQUESTED_BY: 'x-requested-by',\n    X_TRIGGERED_BY: 'x-triggered-by',\n    USER_AGENT: 'user-agent',\n  } as const;\n\n  /**\n   * DOM Parser to parse the new content to be injected.\n   * @internal\n   */\n  __domParser = new DOMParser();\n\n  /**\n   * Abort controller to prevent multiple simultaneous fetches.\n   * @internal\n   */\n  __abortController = new AbortController();\n\n  /**\n   * The client used for the fetch request.\n   */\n  get client(): typeof fetch {\n    return window.fetch.bind(window);\n  }\n\n  /**\n   * The URL to use for the request.\n   */\n  get url(): URL {\n    const { $el, isForm } = this;\n\n    if (isForm) {\n      const { action, method } = this.$el as HTMLFormElement;\n      const url = new URL(action);\n\n      if (method.toLowerCase() === 'get') {\n        // @ts-expect-error URLSearchParams accepts FormData as parameter in the browser.\n        url.search = new URLSearchParams(new FormData($el)).toString();\n      }\n\n      return url;\n    }\n\n    return new URL($el.href);\n  }\n\n  /**\n   * Option for the fetch request.\n   */\n  get requestInit(): RequestInit {\n    const { __headerNames: headerNames, isForm, $el, $options, $refs } = this;\n    const { requestInit, headers } = $options;\n    const { headers: headerRefs } = $refs;\n    const requestedBy = '@studiometa/ui/Fetch';\n\n    const normalizedRequestInit = {\n      ...requestInit,\n      headers: {\n        [headerNames.USER_AGENT]: `${navigator.userAgent} ${requestedBy}`,\n        ...requestInit.headers,\n        ...headers,\n      },\n    };\n\n    if (headerRefs) {\n      for (const header of headerRefs) {\n        if (header.dataset.name && header.value) {\n          normalizedRequestInit.headers[header.dataset.name] = header.value;\n        }\n      }\n    }\n\n    if (isForm) {\n      const form = $el as HTMLFormElement;\n      normalizedRequestInit.method = form.method;\n      normalizedRequestInit.body = new FormData(form);\n    }\n\n    return normalizedRequestInit;\n  }\n\n  /**\n   * Is the root element a link?\n   */\n  get isLink() {\n    return this.$el instanceof HTMLAnchorElement;\n  }\n\n  /**\n   * Is the root element a form?\n   */\n  get isForm() {\n    return this.$el instanceof HTMLFormElement;\n  }\n\n  /**\n   * Emit bubbling events.\n   * @inheritdoc\n   */\n  $emit(event: string, ...args: unknown[]) {\n    const e = new CustomEvent(event, { detail: args, bubbles: true });\n    return super.$emit(e, ...args);\n  }\n\n  /**\n   * If root element is a link, prevent its default behavior and fetch its URL.\n   */\n  onClick({ event }: { event: MouseEvent }) {\n    if (!this.isLink) return;\n\n    if (\n      !event.ctrlKey &&\n      !event.shiftKey &&\n      !event.altKey &&\n      !event.metaKey &&\n      event.button === 0 &&\n      this.$el.target !== '_blank'\n    ) {\n      event.preventDefault();\n      this.fetch(this.url, this.requestInit);\n    }\n  }\n\n  /**\n   * If root element is a form, prevent its default behavior on submit and fetch its action\n   * following the `method` attribute and with the form's data.\n   */\n  onSubmit({ event }: { event: SubmitEvent }) {\n    if (!this.isForm) return;\n\n    if (this.$el.target !== '_blank') {\n      event.preventDefault();\n      this.fetch(this.url, this.requestInit);\n    }\n  }\n\n  /**\n   * Update content on history back/forward navigation.\n   */\n  onWindowPopstate() {\n    if (!this.$options.history) return;\n\n    this.fetch(new URL(window.location.href), {\n      headers: {\n        [this.__headerNames.X_TRIGGERED_BY]: 'popstate',\n      },\n    });\n  }\n\n  /**\n   * Fetch given url.\n   */\n  async fetch(url: URL, requestInit: RequestInit = {}) {\n    const { FETCH_EVENTS } = this.constructor;\n    this.$emit(FETCH_EVENTS.BEFORE_FETCH, this, url, requestInit);\n\n    this.__abortController.abort();\n    this.__abortController = new AbortController();\n    const init = {\n      ...this.requestInit,\n      ...requestInit,\n      headers: {\n        ...this.requestInit.headers,\n        ...requestInit.headers,\n      },\n      signal: this.__abortController.signal,\n    };\n\n    this.$log('fetch', url, init);\n    this.$emit(FETCH_EVENTS.FETCH, this, url, requestInit);\n\n    try {\n      const content = await this.client(url, init).then((response) => response.text());\n      this.$emit(FETCH_EVENTS.AFTER_FETCH, this, url, requestInit, content);\n      this.update(url, init, content);\n    } catch (error) {\n      this.$emit(FETCH_EVENTS.AFTER_FETCH, this, url, requestInit);\n      this.error(url, init, error);\n    }\n  }\n\n  /**\n   * Update the DOM with new content from the fetched HTML.\n   * @internal\n   */\n  __updateDOM(fragment: Document) {\n    const { FETCH_MODES } = this.constructor;\n    const { mode, selector } = this.$options;\n\n    // @ts-expect-error querySelectorAll is iterable in the browser\n    for (const newElement of fragment.querySelectorAll<HTMLElement>(selector)) {\n      const oldElement: HTMLElement = document.querySelector<HTMLElement>(\n        `[id=\"${newElement.id}\"]`,\n      );\n\n      if (!oldElement) {\n        continue;\n      }\n\n      const oldScripts = getScripts(oldElement);\n\n      switch (mode) {\n        case FETCH_MODES.APPEND:\n          oldElement.append(...newElement.childNodes);\n          adoptNewScripts(getScripts(oldElement), oldScripts);\n          break;\n        case FETCH_MODES.PREPEND:\n          oldElement.prepend(...newElement.childNodes);\n          adoptNewScripts(getScripts(oldElement), oldScripts);\n          break;\n        case FETCH_MODES.MORPH:\n          morphdom(oldElement, newElement);\n          adoptNewScripts(getScripts(oldElement), oldScripts);\n          break;\n        case FETCH_MODES.REPLACE:\n        default:\n          oldElement.replaceWith(newElement);\n          adoptNewScripts(getScripts(newElement), oldScripts);\n          break;\n      }\n    }\n  }\n\n  /**\n   * Dispatch the contents to update to their matching FrameTarget.\n   */\n  async update(url: URL, requestInit: RequestInit, content: string) {\n    const { FETCH_EVENTS } = this.constructor;\n    const { history } = this.$options;\n\n    this.$log('content', url, content);\n    this.$emit(FETCH_EVENTS.BEFORE_UPDATE, this, url, requestInit, content);\n\n    const fragment = this.__domParser.parseFromString(content, 'text/html');\n\n    if (history) {\n      if (requestInit?.headers?.[this.__headerNames.X_TRIGGERED_BY] !== 'popstate') {\n        historyPush({ path: url.pathname, search: url.searchParams });\n      }\n      domScheduler.write(() => {\n        if (fragment.title) {\n          document.title = fragment.title;\n        }\n      });\n    }\n\n    this.$emit(FETCH_EVENTS.UPDATE, this, url, requestInit, fragment);\n\n    if (isFunction(document.startViewTransition)) {\n      await document.startViewTransition(() => {\n        this.__updateDOM(fragment);\n      }).ready;\n    } else {\n      this.__updateDOM(fragment);\n    }\n\n    this.$emit(FETCH_EVENTS.AFTER_UPDATE, this, url, requestInit, fragment);\n  }\n\n  /**\n   * Handle errors.\n   */\n  error(url: URL, requestInit: RequestInit, error: Error) {\n    this.$log('error', url, requestInit, error);\n    this.$emit(this.constructor.FETCH_EVENTS.ERROR, this, url, requestInit, error);\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAA6C;AACtD,SAAS,cAAc,aAAa,kBAAkB;AACtD,OAAO,cAAc;AACrB,SAAS,iBAAiB,kBAAkB;AAyBrC,MAAM,cAA+C,KAAqB;AAAA;AAAA;AAAA;AAAA,EAU/E,OAAO,eAAe;AAAA,IACpB,cAAc;AAAA,IACd,OAAO;AAAA,IACP,aAAa;AAAA,IACb,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,cAAc;AAAA,IACnB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,OAAO,OAAO,KAAK,YAAY;AAAA,IACtC,MAAM,CAAC,WAAW;AAAA,IAClB,SAAS;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS,KAAK,YAAY;AAAA,MAC5B;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT,UAAU;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAAc,IAAI,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAM5B,oBAAoB,IAAI,gBAAgB;AAAA;AAAA;AAAA;AAAA,EAKxC,IAAI,SAAuB;AACzB,WAAO,OAAO,MAAM,KAAK,MAAM;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,MAAW;AACb,UAAM,EAAE,KAAK,OAAO,IAAI;AAExB,QAAI,QAAQ;AACV,YAAM,EAAE,QAAQ,OAAO,IAAI,KAAK;AAChC,YAAM,MAAM,IAAI,IAAI,MAAM;AAE1B,UAAI,OAAO,YAAY,MAAM,OAAO;AAElC,YAAI,SAAS,IAAI,gBAAgB,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS;AAAA,MAC/D;AAEA,aAAO;AAAA,IACT;AAEA,WAAO,IAAI,IAAI,IAAI,IAAI;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,cAA2B;AAC7B,UAAM,EAAE,eAAe,aAAa,QAAQ,KAAK,UAAU,MAAM,IAAI;AACrE,UAAM,EAAE,aAAa,QAAQ,IAAI;AACjC,UAAM,EAAE,SAAS,WAAW,IAAI;AAChC,UAAM,cAAc;AAEpB,UAAM,wBAAwB;AAAA,MAC5B,GAAG;AAAA,MACH,SAAS;AAAA,QACP,CAAC,YAAY,UAAU,GAAG,GAAG,UAAU,SAAS,IAAI,WAAW;AAAA,QAC/D,GAAG,YAAY;AAAA,QACf,GAAG;AAAA,MACL;AAAA,IACF;AAEA,QAAI,YAAY;AACd,iBAAW,UAAU,YAAY;AAC/B,YAAI,OAAO,QAAQ,QAAQ,OAAO,OAAO;AACvC,gCAAsB,QAAQ,OAAO,QAAQ,IAAI,IAAI,OAAO;AAAA,QAC9D;AAAA,MACF;AAAA,IACF;AAEA,QAAI,QAAQ;AACV,YAAM,OAAO;AACb,4BAAsB,SAAS,KAAK;AACpC,4BAAsB,OAAO,IAAI,SAAS,IAAI;AAAA,IAChD;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,eAAe;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,eAAe;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,UAAkB,MAAiB;AACvC,UAAM,IAAI,IAAI,YAAY,OAAO,EAAE,QAAQ,MAAM,SAAS,KAAK,CAAC;AAChE,WAAO,MAAM,MAAM,GAAG,GAAG,IAAI;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,EAAE,MAAM,GAA0B;AACxC,QAAI,CAAC,KAAK,OAAQ;AAElB,QACE,CAAC,MAAM,WACP,CAAC,MAAM,YACP,CAAC,MAAM,UACP,CAAC,MAAM,WACP,MAAM,WAAW,KACjB,KAAK,IAAI,WAAW,UACpB;AACA,YAAM,eAAe;AACrB,WAAK,MAAM,KAAK,KAAK,KAAK,WAAW;AAAA,IACvC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,EAAE,MAAM,GAA2B;AAC1C,QAAI,CAAC,KAAK,OAAQ;AAElB,QAAI,KAAK,IAAI,WAAW,UAAU;AAChC,YAAM,eAAe;AACrB,WAAK,MAAM,KAAK,KAAK,KAAK,WAAW;AAAA,IACvC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAmB;AACjB,QAAI,CAAC,KAAK,SAAS,QAAS;AAE5B,SAAK,MAAM,IAAI,IAAI,OAAO,SAAS,IAAI,GAAG;AAAA,MACxC,SAAS;AAAA,QACP,CAAC,KAAK,cAAc,cAAc,GAAG;AAAA,MACvC;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,MAAM,KAAU,cAA2B,CAAC,GAAG;AACnD,UAAM,EAAE,aAAa,IAAI,KAAK;AAC9B,SAAK,MAAM,aAAa,cAAc,MAAM,KAAK,WAAW;AAE5D,SAAK,kBAAkB,MAAM;AAC7B,SAAK,oBAAoB,IAAI,gBAAgB;AAC7C,UAAM,OAAO;AAAA,MACX,GAAG,KAAK;AAAA,MACR,GAAG;AAAA,MACH,SAAS;AAAA,QACP,GAAG,KAAK,YAAY;AAAA,QACpB,GAAG,YAAY;AAAA,MACjB;AAAA,MACA,QAAQ,KAAK,kBAAkB;AAAA,IACjC;AAEA,SAAK,KAAK,SAAS,KAAK,IAAI;AAC5B,SAAK,MAAM,aAAa,OAAO,MAAM,KAAK,WAAW;AAErD,QAAI;AACF,YAAM,UAAU,MAAM,KAAK,OAAO,KAAK,IAAI,EAAE,KAAK,CAAC,aAAa,SAAS,KAAK,CAAC;AAC/E,WAAK,MAAM,aAAa,aAAa,MAAM,KAAK,aAAa,OAAO;AACpE,WAAK,OAAO,KAAK,MAAM,OAAO;AAAA,IAChC,SAAS,OAAO;AACd,WAAK,MAAM,aAAa,aAAa,MAAM,KAAK,WAAW;AAC3D,WAAK,MAAM,KAAK,MAAM,KAAK;AAAA,IAC7B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY,UAAoB;AAC9B,UAAM,EAAE,YAAY,IAAI,KAAK;AAC7B,UAAM,EAAE,MAAM,SAAS,IAAI,KAAK;AAGhC,eAAW,cAAc,SAAS,iBAA8B,QAAQ,GAAG;AACzE,YAAM,aAA0B,SAAS;AAAA,QACvC,QAAQ,WAAW,EAAE;AAAA,MACvB;AAEA,UAAI,CAAC,YAAY;AACf;AAAA,MACF;AAEA,YAAM,aAAa,WAAW,UAAU;AAExC,cAAQ,MAAM;AAAA,QACZ,KAAK,YAAY;AACf,qBAAW,OAAO,GAAG,WAAW,UAAU;AAC1C,0BAAgB,WAAW,UAAU,GAAG,UAAU;AAClD;AAAA,QACF,KAAK,YAAY;AACf,qBAAW,QAAQ,GAAG,WAAW,UAAU;AAC3C,0BAAgB,WAAW,UAAU,GAAG,UAAU;AAClD;AAAA,QACF,KAAK,YAAY;AACf,mBAAS,YAAY,UAAU;AAC/B,0BAAgB,WAAW,UAAU,GAAG,UAAU;AAClD;AAAA,QACF,KAAK,YAAY;AAAA,QACjB;AACE,qBAAW,YAAY,UAAU;AACjC,0BAAgB,WAAW,UAAU,GAAG,UAAU;AAClD;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,OAAO,KAAU,aAA0B,SAAiB;AAChE,UAAM,EAAE,aAAa,IAAI,KAAK;AAC9B,UAAM,EAAE,QAAQ,IAAI,KAAK;AAEzB,SAAK,KAAK,WAAW,KAAK,OAAO;AACjC,SAAK,MAAM,aAAa,eAAe,MAAM,KAAK,aAAa,OAAO;AAEtE,UAAM,WAAW,KAAK,YAAY,gBAAgB,SAAS,WAAW;AAEtE,QAAI,SAAS;AACX,UAAI,aAAa,UAAU,KAAK,cAAc,cAAc,MAAM,YAAY;AAC5E,oBAAY,EAAE,MAAM,IAAI,UAAU,QAAQ,IAAI,aAAa,CAAC;AAAA,MAC9D;AACA,mBAAa,MAAM,MAAM;AACvB,YAAI,SAAS,OAAO;AAClB,mBAAS,QAAQ,SAAS;AAAA,QAC5B;AAAA,MACF,CAAC;AAAA,IACH;AAEA,SAAK,MAAM,aAAa,QAAQ,MAAM,KAAK,aAAa,QAAQ;AAEhE,QAAI,WAAW,SAAS,mBAAmB,GAAG;AAC5C,YAAM,SAAS,oBAAoB,MAAM;AACvC,aAAK,YAAY,QAAQ;AAAA,MAC3B,CAAC,EAAE;AAAA,IACL,OAAO;AACL,WAAK,YAAY,QAAQ;AAAA,IAC3B;AAEA,SAAK,MAAM,aAAa,cAAc,MAAM,KAAK,aAAa,QAAQ;AAAA,EACxE;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,KAAU,aAA0B,OAAc;AACtD,SAAK,KAAK,SAAS,KAAK,aAAa,KAAK;AAC1C,SAAK,MAAM,KAAK,YAAY,aAAa,OAAO,MAAM,KAAK,aAAa,KAAK;AAAA,EAC/E;AACF;",
+  "names": []
+}

package/Fetch/index.d.ts

@@ -0,0 +1 @@
+export * from './Fetch.js';

package/Fetch/index.js

@@ -0,0 +1,2 @@
+export * from "./Fetch.js";
+//# sourceMappingURL=index.js.map

package/Fetch/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Fetch/index.ts"],
+  "sourcesContent": ["export * from './Fetch.js';\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/Fetch/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function adoptNewScripts(newScripts: Set<HTMLScriptElement>, oldScripts: Set<HTMLScriptElement>): void;
+export declare function adoptNewScript(script: HTMLScriptElement): void;
+export declare function getScripts(el: HTMLElement): Set<HTMLScriptElement>;

package/Fetch/utils.js

@@ -0,0 +1,28 @@
+function adoptNewScripts(newScripts, oldScripts) {
+  for (const script of newScripts) {
+    if (oldScripts.has(script)) continue;
+    adoptNewScript(script);
+  }
+}
+function adoptNewScript(script) {
+  const newScript = document.createElement("script");
+  for (const attribute of script.getAttributeNames()) {
+    newScript.setAttribute(attribute, script.getAttribute(attribute));
+  }
+  if (script.textContent) {
+    newScript.textContent = script.textContent;
+  }
+  script.replaceWith(newScript);
+}
+function getScripts(el) {
+  return el.tagName === "SCRIPT" ? /* @__PURE__ */ new Set([el]) : (
+    // @ts-expect-error querySelectoAll is iterable.
+    new Set(el.querySelectorAll("script"))
+  );
+}
+export {
+  adoptNewScript,
+  adoptNewScripts,
+  getScripts
+};
+//# sourceMappingURL=utils.js.map

package/Fetch/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Fetch/utils.ts"],
+  "sourcesContent": ["export function adoptNewScripts(\n  newScripts: Set<HTMLScriptElement>,\n  oldScripts: Set<HTMLScriptElement>,\n) {\n  for (const script of newScripts) {\n    if (oldScripts.has(script)) continue;\n    adoptNewScript(script);\n  }\n}\n\nexport function adoptNewScript(script: HTMLScriptElement) {\n  const newScript = document.createElement('script');\n\n  for (const attribute of script.getAttributeNames()) {\n    newScript.setAttribute(attribute, script.getAttribute(attribute));\n  }\n\n  if (script.textContent) {\n    newScript.textContent = script.textContent;\n  }\n\n  script.replaceWith(newScript);\n}\n\nexport function getScripts(el: HTMLElement): Set<HTMLScriptElement> {\n  return el.tagName === 'SCRIPT'\n    ? new Set([el as HTMLScriptElement])\n    : // @ts-expect-error querySelectoAll is iterable.\n      new Set(el.querySelectorAll('script'));\n}\n"],
+  "mappings": "AAAO,SAAS,gBACd,YACA,YACA;AACA,aAAW,UAAU,YAAY;AAC/B,QAAI,WAAW,IAAI,MAAM,EAAG;AAC5B,mBAAe,MAAM;AAAA,EACvB;AACF;AAEO,SAAS,eAAe,QAA2B;AACxD,QAAM,YAAY,SAAS,cAAc,QAAQ;AAEjD,aAAW,aAAa,OAAO,kBAAkB,GAAG;AAClD,cAAU,aAAa,WAAW,OAAO,aAAa,SAAS,CAAC;AAAA,EAClE;AAEA,MAAI,OAAO,aAAa;AACtB,cAAU,cAAc,OAAO;AAAA,EACjC;AAEA,SAAO,YAAY,SAAS;AAC9B;AAEO,SAAS,WAAW,IAAyC;AAClE,SAAO,GAAG,YAAY,WAClB,oBAAI,IAAI,CAAC,EAAuB,CAAC;AAAA;AAAA,IAEjC,IAAI,IAAI,GAAG,iBAAiB,QAAQ,CAAC;AAAA;AAC3C;",
+  "names": []
+}

package/Figure/Figure.d.ts

@@ -5,7 +5,7 @@ export interface FigureProps extends AbstractFigureProps {
 }
 /**
  * Figure class.
- * @see https://ui.studiometa.dev/-/components/Figure/
+ * @link https://ui.studiometa.dev/-/components/Figure/
  */
 export declare class Figure<T extends BaseProps = BaseProps> extends AbstractFigure<T> {
     /**

package/Figure/Figure.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Figure/Figure.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { AbstractFigure } from './AbstractFigure.js';\nimport type { AbstractFigureProps } from './AbstractFigure.js';\n\nexport interface FigureProps extends AbstractFigureProps {}\n\n/**\n * Figure class.\n * @see https://ui.studiometa.dev/-/components/Figure/\n */\nexport class Figure<T extends BaseProps = BaseProps> extends AbstractFigure<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractFigure.config,\n    name: 'Figure',\n  };\n\n  /**\n   * Terminate the component on load.\n   */\n  onLoad() {\n    this.$terminate();\n  }\n}\n"],
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { AbstractFigure } from './AbstractFigure.js';\nimport type { AbstractFigureProps } from './AbstractFigure.js';\n\nexport interface FigureProps extends AbstractFigureProps {}\n\n/**\n * Figure class.\n * @link https://ui.studiometa.dev/-/components/Figure/\n */\nexport class Figure<T extends BaseProps = BaseProps> extends AbstractFigure<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractFigure.config,\n    name: 'Figure',\n  };\n\n  /**\n   * Terminate the component on load.\n   */\n  onLoad() {\n    this.$terminate();\n  }\n}\n"],
   "mappings": "AACA,SAAS,sBAAsB;AASxB,MAAM,eAAgD,eAAkB;AAAA;AAAA;AAAA;AAAA,EAI7E,OAAO,SAAqB;AAAA,IAC1B,GAAG,eAAe;AAAA,IAClB,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,SAAK,WAAW;AAAA,EAClB;AACF;",
   "names": []
 }

package/Figure/FigureShopify.d.ts

@@ -6,9 +6,10 @@ export interface FigureShopifyProps extends BaseProps {
     };
 }
 /**
- * Figure class.
+ * FigureShopify class.
  *
  * Manager lazyloading image sources.
+ * @link https://ui.studiometa.dev/-/components/FigureShopify/
  */
 export declare class FigureShopify<T extends BaseProps = BaseProps> extends AbstractFigureDynamic<T & FigureShopifyProps> {
     /**
@@ -17,7 +18,7 @@ export declare class FigureShopify<T extends BaseProps = BaseProps> extends Abst
     static config: BaseConfig;
     /**
      * Format the source for Shopify CDN API.
-     * @see https://shopify.dev/docs/api/liquid/filters/image_url
+     * @link https://shopify.dev/docs/api/liquid/filters/image_url
      */
     formatSrc(src: string): string;
 }

package/Figure/FigureShopify.js

@@ -17,7 +17,7 @@ class FigureShopify extends AbstractFigureDynamic {
   };
   /**
    * Format the source for Shopify CDN API.
-   * @see https://shopify.dev/docs/api/liquid/filters/image_url
+   * @link https://shopify.dev/docs/api/liquid/filters/image_url
    */
   formatSrc(src) {
     const { crop, step } = this.$options;

package/Figure/FigureShopify.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Figure/FigureShopify.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { AbstractFigureDynamic } from './AbstractFigureDynamic.js';\nimport { normalizeSize } from './utils.js';\n\nexport interface FigureShopifyProps extends BaseProps {\n  $options: {\n    crop?: 'top' | 'left' | 'right' | 'bottom' | 'center';\n  };\n}\n\n/**\n * Figure class.\n *\n * Manager lazyloading image sources.\n */\nexport class FigureShopify<T extends BaseProps = BaseProps> extends AbstractFigureDynamic<\n  T & FigureShopifyProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractFigureDynamic.config,\n    name: 'FigureShopify',\n    options: {\n      ...AbstractFigureDynamic.config.options,\n      crop: {\n        type: String,\n        default: null,\n      },\n    },\n  };\n\n  /**\n   * Format the source for Shopify CDN API.\n   * @see https://shopify.dev/docs/api/liquid/filters/image_url\n   */\n  formatSrc(src: string): string {\n    const { crop, step } = this.$options;\n\n    const url = new URL(src, 'https://localhost');\n    const width = normalizeSize(this.$refs.img.offsetWidth, step) * window.devicePixelRatio;\n    const height = normalizeSize(this.$refs.img.offsetHeight, step) * window.devicePixelRatio;\n\n    url.searchParams.set('width', String(width));\n    url.searchParams.set('height', String(height));\n\n    if (crop) {\n      url.searchParams.set('crop', this.$options.crop);\n    }\n\n    return url.toString();\n  }\n}\n"],
-  "mappings": "AACA,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAavB,MAAM,sBAAuD,sBAElE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,sBAAsB;AAAA,IACzB,MAAM;AAAA,IACN,SAAS;AAAA,MACP,GAAG,sBAAsB,OAAO;AAAA,MAChC,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU,KAAqB;AAC7B,UAAM,EAAE,MAAM,KAAK,IAAI,KAAK;AAE5B,UAAM,MAAM,IAAI,IAAI,KAAK,mBAAmB;AAC5C,UAAM,QAAQ,cAAc,KAAK,MAAM,IAAI,aAAa,IAAI,IAAI,OAAO;AACvE,UAAM,SAAS,cAAc,KAAK,MAAM,IAAI,cAAc,IAAI,IAAI,OAAO;AAEzE,QAAI,aAAa,IAAI,SAAS,OAAO,KAAK,CAAC;AAC3C,QAAI,aAAa,IAAI,UAAU,OAAO,MAAM,CAAC;AAE7C,QAAI,MAAM;AACR,UAAI,aAAa,IAAI,QAAQ,KAAK,SAAS,IAAI;AAAA,IACjD;AAEA,WAAO,IAAI,SAAS;AAAA,EACtB;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { AbstractFigureDynamic } from './AbstractFigureDynamic.js';\nimport { normalizeSize } from './utils.js';\n\nexport interface FigureShopifyProps extends BaseProps {\n  $options: {\n    crop?: 'top' | 'left' | 'right' | 'bottom' | 'center';\n  };\n}\n\n/**\n * FigureShopify class.\n *\n * Manager lazyloading image sources.\n * @link https://ui.studiometa.dev/-/components/FigureShopify/\n */\nexport class FigureShopify<T extends BaseProps = BaseProps> extends AbstractFigureDynamic<\n  T & FigureShopifyProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractFigureDynamic.config,\n    name: 'FigureShopify',\n    options: {\n      ...AbstractFigureDynamic.config.options,\n      crop: {\n        type: String,\n        default: null,\n      },\n    },\n  };\n\n  /**\n   * Format the source for Shopify CDN API.\n   * @link https://shopify.dev/docs/api/liquid/filters/image_url\n   */\n  formatSrc(src: string): string {\n    const { crop, step } = this.$options;\n\n    const url = new URL(src, 'https://localhost');\n    const width = normalizeSize(this.$refs.img.offsetWidth, step) * window.devicePixelRatio;\n    const height = normalizeSize(this.$refs.img.offsetHeight, step) * window.devicePixelRatio;\n\n    url.searchParams.set('width', String(width));\n    url.searchParams.set('height', String(height));\n\n    if (crop) {\n      url.searchParams.set('crop', this.$options.crop);\n    }\n\n    return url.toString();\n  }\n}\n"],
+  "mappings": "AACA,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAcvB,MAAM,sBAAuD,sBAElE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,sBAAsB;AAAA,IACzB,MAAM;AAAA,IACN,SAAS;AAAA,MACP,GAAG,sBAAsB,OAAO;AAAA,MAChC,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU,KAAqB;AAC7B,UAAM,EAAE,MAAM,KAAK,IAAI,KAAK;AAE5B,UAAM,MAAM,IAAI,IAAI,KAAK,mBAAmB;AAC5C,UAAM,QAAQ,cAAc,KAAK,MAAM,IAAI,aAAa,IAAI,IAAI,OAAO;AACvE,UAAM,SAAS,cAAc,KAAK,MAAM,IAAI,cAAc,IAAI,IAAI,OAAO;AAEzE,QAAI,aAAa,IAAI,SAAS,OAAO,KAAK,CAAC;AAC3C,QAAI,aAAa,IAAI,UAAU,OAAO,MAAM,CAAC;AAE7C,QAAI,MAAM;AACR,UAAI,aAAa,IAAI,QAAQ,KAAK,SAAS,IAAI;AAAA,IACjD;AAEA,WAAO,IAAI,SAAS;AAAA,EACtB;AACF;",
   "names": []
 }

package/Figure/FigureTwicpics.d.ts

@@ -11,6 +11,7 @@ export interface FigureTwicpicsProps extends BaseProps {
 }
 /**
  * FigureTwicpics class.
+ * @link https://ui.studiometa.dev/-/components/FigureTwicpics/
  */
 export declare class FigureTwicpics<T extends BaseProps = BaseProps> extends AbstractFigureDynamic<T & FigureTwicpicsProps> {
     /**

package/Figure/FigureTwicpics.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Figure/FigureTwicpics.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n  withLeadingSlash,\n  withoutLeadingSlash,\n  withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { AbstractFigureDynamic } from './AbstractFigureDynamic.js';\nimport { normalizeSize } from './utils.js';\n\nexport interface FigureTwicpicsProps extends BaseProps {\n  $options: {\n    transform: string;\n    domain: string;\n    path: string;\n    mode: string;\n    dpr: boolean;\n  };\n}\n\n/**\n * Determine if the user agent is a bot or not.\n */\nconst isBot = /bot|crawl|slurp|spider/i.test(navigator.userAgent);\n\n/**\n * FigureTwicpics class.\n */\nexport class FigureTwicpics<T extends BaseProps = BaseProps> extends AbstractFigureDynamic<\n  T & FigureTwicpicsProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractFigureDynamic.config,\n    name: 'FigureTwicpics',\n    options: {\n      ...AbstractFigureDynamic.config.options,\n      transform: String,\n      domain: String,\n      path: String,\n      disable: Boolean,\n      step: {\n        type: Number,\n        default: 50,\n      },\n      mode: {\n        type: String,\n        default: 'cover',\n      },\n      dpr: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Get the Twicpics path.\n   */\n  get path(): string {\n    return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));\n  }\n\n  /**\n   * Get the Twicpics domain.\n   */\n  get domain(): string {\n    return this.$options.domain || new URL(this.$refs.img.dataset.src).host;\n  }\n\n  /**\n   * Get the current device pixel ratio\n   * Returns 1 if user agent is considered as a bot.\n   * Returns 1 if disabled by the `data-option-no-dpr` attribute.\n   */\n  get devicePixelRatio() {\n    if (!this.$options.dpr || isBot) {\n      return 1;\n    }\n\n    return window.devicePixelRatio;\n  }\n\n  /**\n   * Format the source for Twicpics.\n   */\n  formatSrc(src: string): string {\n    const { transform, mode, step } = this.$options;\n\n    const url = new URL(src, 'https://localhost');\n    url.host = this.domain;\n    url.port = '';\n\n    if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {\n      url.pathname = `/${this.path}${url.pathname}`;\n    }\n\n    const width = normalizeSize(this.$refs.img.offsetWidth, step) * this.devicePixelRatio;\n    const height = normalizeSize(this.$refs.img.offsetHeight, step) * this.devicePixelRatio;\n\n    url.searchParams.set(\n      'twic',\n      ['v1', transform, `${mode}=${width}x${height}`].filter(Boolean).join('/'),\n    );\n\n    url.search = decodeURIComponent(url.search);\n\n    return url.toString();\n  }\n}\n"],
-  "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAe9B,MAAM,QAAQ,0BAA0B,KAAK,UAAU,SAAS;AAKzD,MAAM,uBAAwD,sBAEnE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,sBAAsB;AAAA,IACzB,MAAM;AAAA,IACN,SAAS;AAAA,MACP,GAAG,sBAAsB,OAAO;AAAA,MAChC,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,OAAe;AACjB,WAAO,qBAAqB,oBAAoB,KAAK,SAAS,IAAI,CAAC;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAiB;AACnB,WAAO,KAAK,SAAS,UAAU,IAAI,IAAI,KAAK,MAAM,IAAI,QAAQ,GAAG,EAAE;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,mBAAmB;AACrB,QAAI,CAAC,KAAK,SAAS,OAAO,OAAO;AAC/B,aAAO;AAAA,IACT;AAEA,WAAO,OAAO;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,KAAqB;AAC7B,UAAM,EAAE,WAAW,MAAM,KAAK,IAAI,KAAK;AAEvC,UAAM,MAAM,IAAI,IAAI,KAAK,mBAAmB;AAC5C,QAAI,OAAO,KAAK;AAChB,QAAI,OAAO;AAEX,QAAI,KAAK,QAAQ,CAAC,IAAI,SAAS,WAAW,iBAAiB,KAAK,IAAI,CAAC,GAAG;AACtE,UAAI,WAAW,IAAI,KAAK,IAAI,GAAG,IAAI,QAAQ;AAAA,IAC7C;AAEA,UAAM,QAAQ,cAAc,KAAK,MAAM,IAAI,aAAa,IAAI,IAAI,KAAK;AACrE,UAAM,SAAS,cAAc,KAAK,MAAM,IAAI,cAAc,IAAI,IAAI,KAAK;AAEvE,QAAI,aAAa;AAAA,MACf;AAAA,MACA,CAAC,MAAM,WAAW,GAAG,IAAI,IAAI,KAAK,IAAI,MAAM,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IAC1E;AAEA,QAAI,SAAS,mBAAmB,IAAI,MAAM;AAE1C,WAAO,IAAI,SAAS;AAAA,EACtB;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n  withLeadingSlash,\n  withoutLeadingSlash,\n  withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { AbstractFigureDynamic } from './AbstractFigureDynamic.js';\nimport { normalizeSize } from './utils.js';\n\nexport interface FigureTwicpicsProps extends BaseProps {\n  $options: {\n    transform: string;\n    domain: string;\n    path: string;\n    mode: string;\n    dpr: boolean;\n  };\n}\n\n/**\n * Determine if the user agent is a bot or not.\n */\nconst isBot = /bot|crawl|slurp|spider/i.test(navigator.userAgent);\n\n/**\n * FigureTwicpics class.\n * @link https://ui.studiometa.dev/-/components/FigureTwicpics/\n */\nexport class FigureTwicpics<T extends BaseProps = BaseProps> extends AbstractFigureDynamic<\n  T & FigureTwicpicsProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractFigureDynamic.config,\n    name: 'FigureTwicpics',\n    options: {\n      ...AbstractFigureDynamic.config.options,\n      transform: String,\n      domain: String,\n      path: String,\n      disable: Boolean,\n      step: {\n        type: Number,\n        default: 50,\n      },\n      mode: {\n        type: String,\n        default: 'cover',\n      },\n      dpr: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Get the Twicpics path.\n   */\n  get path(): string {\n    return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));\n  }\n\n  /**\n   * Get the Twicpics domain.\n   */\n  get domain(): string {\n    return this.$options.domain || new URL(this.$refs.img.dataset.src).host;\n  }\n\n  /**\n   * Get the current device pixel ratio\n   * Returns 1 if user agent is considered as a bot.\n   * Returns 1 if disabled by the `data-option-no-dpr` attribute.\n   */\n  get devicePixelRatio() {\n    if (!this.$options.dpr || isBot) {\n      return 1;\n    }\n\n    return window.devicePixelRatio;\n  }\n\n  /**\n   * Format the source for Twicpics.\n   */\n  formatSrc(src: string): string {\n    const { transform, mode, step } = this.$options;\n\n    const url = new URL(src, 'https://localhost');\n    url.host = this.domain;\n    url.port = '';\n\n    if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {\n      url.pathname = `/${this.path}${url.pathname}`;\n    }\n\n    const width = normalizeSize(this.$refs.img.offsetWidth, step) * this.devicePixelRatio;\n    const height = normalizeSize(this.$refs.img.offsetHeight, step) * this.devicePixelRatio;\n\n    url.searchParams.set(\n      'twic',\n      ['v1', transform, `${mode}=${width}x${height}`].filter(Boolean).join('/'),\n    );\n\n    url.search = decodeURIComponent(url.search);\n\n    return url.toString();\n  }\n}\n"],
+  "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAe9B,MAAM,QAAQ,0BAA0B,KAAK,UAAU,SAAS;AAMzD,MAAM,uBAAwD,sBAEnE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,sBAAsB;AAAA,IACzB,MAAM;AAAA,IACN,SAAS;AAAA,MACP,GAAG,sBAAsB,OAAO;AAAA,MAChC,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,OAAe;AACjB,WAAO,qBAAqB,oBAAoB,KAAK,SAAS,IAAI,CAAC;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAiB;AACnB,WAAO,KAAK,SAAS,UAAU,IAAI,IAAI,KAAK,MAAM,IAAI,QAAQ,GAAG,EAAE;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,mBAAmB;AACrB,QAAI,CAAC,KAAK,SAAS,OAAO,OAAO;AAC/B,aAAO;AAAA,IACT;AAEA,WAAO,OAAO;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,KAAqB;AAC7B,UAAM,EAAE,WAAW,MAAM,KAAK,IAAI,KAAK;AAEvC,UAAM,MAAM,IAAI,IAAI,KAAK,mBAAmB;AAC5C,QAAI,OAAO,KAAK;AAChB,QAAI,OAAO;AAEX,QAAI,KAAK,QAAQ,CAAC,IAAI,SAAS,WAAW,iBAAiB,KAAK,IAAI,CAAC,GAAG;AACtE,UAAI,WAAW,IAAI,KAAK,IAAI,GAAG,IAAI,QAAQ;AAAA,IAC7C;AAEA,UAAM,QAAQ,cAAc,KAAK,MAAM,IAAI,aAAa,IAAI,IAAI,KAAK;AACrE,UAAM,SAAS,cAAc,KAAK,MAAM,IAAI,cAAc,IAAI,IAAI,KAAK;AAEvE,QAAI,aAAa;AAAA,MACf;AAAA,MACA,CAAC,MAAM,WAAW,GAAG,IAAI,IAAI,KAAK,IAAI,MAAM,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IAC1E;AAEA,QAAI,SAAS,mBAAmB,IAAI,MAAM;AAE1C,WAAO,IAAI,SAAS;AAAA,EACtB;AACF;",
   "names": []
 }

package/FigureVideo/FigureVideo.d.ts

@@ -11,6 +11,7 @@ export interface FigureVideoProps extends BaseProps {
 declare const FigureVideo_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithMountWhenInViewInterface, Transition<BaseProps>, import("@studiometa/js-toolkit").WithMountWhenInViewProps>;
 /**
  * FigureVideo class.
+ * @link https://ui.studiometa.dev/-/components/FigureVideo/
  */
 export declare class FigureVideo<T extends BaseProps = BaseProps> extends FigureVideo_base<T & FigureVideoProps> {
     /**

package/FigureVideo/FigureVideo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/FigureVideo/FigureVideo.ts"],
-  "sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../Transition/index.js';\nimport { loadImage } from '../Figure/utils.js';\n\nexport interface FigureVideoProps extends BaseProps {\n  $refs: {\n    video: HTMLVideoElement;\n  };\n  $options: {\n    lazy: boolean;\n  };\n}\n\n/**\n * FigureVideo class.\n */\nexport class FigureVideo<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(\n  Transition,\n  {\n    threshold: [0, 1],\n  },\n)<T & FigureVideoProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'FigureVideo',\n    emits: ['load'],\n    refs: ['video'],\n    options: {\n      ...Transition.config.options,\n      lazy: Boolean,\n    },\n  };\n\n  /**\n   * Get the transition target.\n   */\n  get target(): HTMLVideoElement {\n    return this.$refs.video;\n  }\n\n  /**\n   * Get the video sources.\n   */\n  get sources(): Array<HTMLSourceElement> {\n    return Array.from(this.$refs.video.querySelectorAll('source'));\n  }\n\n  /**\n   * Load poster\n   */\n  loadPoster(): Promise<void|HTMLImageElement> {\n    const { video } = this.$refs;\n\n    if (!video.dataset.poster) {\n      return Promise.resolve();\n    }\n\n    return loadImage(video.dataset.poster).then(() => {\n      video.poster = video.dataset.poster;\n      this.$log('fresh poster loaded');\n    })\n  }\n\n  /**\n   * Load sources\n   * @returns {Promise}\n   */\n  loadSources(): Promise<void> {\n    const { video } = this.$refs;\n\n    this.sources.forEach((source) => {\n      if (!source.dataset.src) {\n        return;\n      }\n      source.src = source.dataset.src;\n    });\n\n    return new Promise<void>((resolve) => {\n      const loadHandler = () => {\n        video.removeEventListener('loadeddata', loadHandler);\n        this.$log('fresh sources loaded');\n        resolve();\n      };\n      video.addEventListener('loadeddata', loadHandler);\n      video.load();\n    });\n  }\n\n  /**\n   * Load\n   * @returns {Promise}\n   */\n  load(): Promise<any[]> {\n    return Promise.all([this.loadPoster(), this.loadSources()]);\n  }\n\n  /**\n   * Load on mount.\n   */\n  async mounted() {\n    this.$log('mounted');\n    const { video } = this.$refs;\n\n    if (!video) {\n      throw new Error('[VideoFigure] The `video` ref is required.');\n    }\n\n    if (!(video instanceof HTMLVideoElement)) {\n      throw new Error('[VideoFigure] The `video` ref must be an `<video>` element.');\n    }\n\n    if (!this.$options.lazy) {\n      this.$log('Lazy loading disabled');\n      return;\n    }\n\n    this.$log('start loading');\n    await this.load();\n    this.$log('all is loaded');\n    await this.enter();\n    this.$log('transition done');\n    this.$emit('load');\n  }\n\n  /**\n   * Terminate the component on load.\n   */\n  onLoad() {\n    this.$terminate();\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,2BAA2B;AAEpC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAcnB,MAAM,oBAAqD;AAAA,EAChE;AAAA,EACA;AAAA,IACE,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AACF,EAAwB;AAAA;AAAA;AAAA;AAAA,EAItB,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,OAAO,CAAC,MAAM;AAAA,IACd,MAAM,CAAC,OAAO;AAAA,IACd,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,IACR;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAA2B;AAC7B,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,UAAoC;AACtC,WAAO,MAAM,KAAK,KAAK,MAAM,MAAM,iBAAiB,QAAQ,CAAC;AAAA,EAC/D;AAAA;AAAA;AAAA;AAAA,EAKA,aAA6C;AAC3C,UAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,QAAI,CAAC,MAAM,QAAQ,QAAQ;AACzB,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,WAAO,UAAU,MAAM,QAAQ,MAAM,EAAE,KAAK,MAAM;AAChD,YAAM,SAAS,MAAM,QAAQ;AAC7B,WAAK,KAAK,qBAAqB;AAAA,IACjC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAA6B;AAC3B,UAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,SAAK,QAAQ,QAAQ,CAAC,WAAW;AAC/B,UAAI,CAAC,OAAO,QAAQ,KAAK;AACvB;AAAA,MACF;AACA,aAAO,MAAM,OAAO,QAAQ;AAAA,IAC9B,CAAC;AAED,WAAO,IAAI,QAAc,CAAC,YAAY;AACpC,YAAM,cAAc,MAAM;AACxB,cAAM,oBAAoB,cAAc,WAAW;AACnD,aAAK,KAAK,sBAAsB;AAChC,gBAAQ;AAAA,MACV;AACA,YAAM,iBAAiB,cAAc,WAAW;AAChD,YAAM,KAAK;AAAA,IACb,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAuB;AACrB,WAAO,QAAQ,IAAI,CAAC,KAAK,WAAW,GAAG,KAAK,YAAY,CAAC,CAAC;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,UAAU;AACd,SAAK,KAAK,SAAS;AACnB,UAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,QAAI,CAAC,OAAO;AACV,YAAM,IAAI,MAAM,4CAA4C;AAAA,IAC9D;AAEA,QAAI,EAAE,iBAAiB,mBAAmB;AACxC,YAAM,IAAI,MAAM,6DAA6D;AAAA,IAC/E;AAEA,QAAI,CAAC,KAAK,SAAS,MAAM;AACvB,WAAK,KAAK,uBAAuB;AACjC;AAAA,IACF;AAEA,SAAK,KAAK,eAAe;AACzB,UAAM,KAAK,KAAK;AAChB,SAAK,KAAK,eAAe;AACzB,UAAM,KAAK,MAAM;AACjB,SAAK,KAAK,iBAAiB;AAC3B,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,SAAK,WAAW;AAAA,EAClB;AACF;",
+  "sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../Transition/index.js';\nimport { loadImage } from '../Figure/utils.js';\n\nexport interface FigureVideoProps extends BaseProps {\n  $refs: {\n    video: HTMLVideoElement;\n  };\n  $options: {\n    lazy: boolean;\n  };\n}\n\n/**\n * FigureVideo class.\n * @link https://ui.studiometa.dev/-/components/FigureVideo/\n */\nexport class FigureVideo<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(\n  Transition,\n  {\n    threshold: [0, 1],\n  },\n)<T & FigureVideoProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'FigureVideo',\n    emits: ['load'],\n    refs: ['video'],\n    options: {\n      ...Transition.config.options,\n      lazy: Boolean,\n    },\n  };\n\n  /**\n   * Get the transition target.\n   */\n  get target(): HTMLVideoElement {\n    return this.$refs.video;\n  }\n\n  /**\n   * Get the video sources.\n   */\n  get sources(): Array<HTMLSourceElement> {\n    return Array.from(this.$refs.video.querySelectorAll('source'));\n  }\n\n  /**\n   * Load poster\n   */\n  loadPoster(): Promise<void|HTMLImageElement> {\n    const { video } = this.$refs;\n\n    if (!video.dataset.poster) {\n      return Promise.resolve();\n    }\n\n    return loadImage(video.dataset.poster).then(() => {\n      video.poster = video.dataset.poster;\n      this.$log('fresh poster loaded');\n    })\n  }\n\n  /**\n   * Load sources\n   * @returns {Promise}\n   */\n  loadSources(): Promise<void> {\n    const { video } = this.$refs;\n\n    this.sources.forEach((source) => {\n      if (!source.dataset.src) {\n        return;\n      }\n      source.src = source.dataset.src;\n    });\n\n    return new Promise<void>((resolve) => {\n      const loadHandler = () => {\n        video.removeEventListener('loadeddata', loadHandler);\n        this.$log('fresh sources loaded');\n        resolve();\n      };\n      video.addEventListener('loadeddata', loadHandler);\n      video.load();\n    });\n  }\n\n  /**\n   * Load\n   * @returns {Promise}\n   */\n  load(): Promise<any[]> {\n    return Promise.all([this.loadPoster(), this.loadSources()]);\n  }\n\n  /**\n   * Load on mount.\n   */\n  async mounted() {\n    this.$log('mounted');\n    const { video } = this.$refs;\n\n    if (!video) {\n      throw new Error('[VideoFigure] The `video` ref is required.');\n    }\n\n    if (!(video instanceof HTMLVideoElement)) {\n      throw new Error('[VideoFigure] The `video` ref must be an `<video>` element.');\n    }\n\n    if (!this.$options.lazy) {\n      this.$log('Lazy loading disabled');\n      return;\n    }\n\n    this.$log('start loading');\n    await this.load();\n    this.$log('all is loaded');\n    await this.enter();\n    this.$log('transition done');\n    this.$emit('load');\n  }\n\n  /**\n   * Terminate the component on load.\n   */\n  onLoad() {\n    this.$terminate();\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,2BAA2B;AAEpC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAenB,MAAM,oBAAqD;AAAA,EAChE;AAAA,EACA;AAAA,IACE,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AACF,EAAwB;AAAA;AAAA;AAAA;AAAA,EAItB,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,OAAO,CAAC,MAAM;AAAA,IACd,MAAM,CAAC,OAAO;AAAA,IACd,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,IACR;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAA2B;AAC7B,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,UAAoC;AACtC,WAAO,MAAM,KAAK,KAAK,MAAM,MAAM,iBAAiB,QAAQ,CAAC;AAAA,EAC/D;AAAA;AAAA;AAAA;AAAA,EAKA,aAA6C;AAC3C,UAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,QAAI,CAAC,MAAM,QAAQ,QAAQ;AACzB,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,WAAO,UAAU,MAAM,QAAQ,MAAM,EAAE,KAAK,MAAM;AAChD,YAAM,SAAS,MAAM,QAAQ;AAC7B,WAAK,KAAK,qBAAqB;AAAA,IACjC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAA6B;AAC3B,UAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,SAAK,QAAQ,QAAQ,CAAC,WAAW;AAC/B,UAAI,CAAC,OAAO,QAAQ,KAAK;AACvB;AAAA,MACF;AACA,aAAO,MAAM,OAAO,QAAQ;AAAA,IAC9B,CAAC;AAED,WAAO,IAAI,QAAc,CAAC,YAAY;AACpC,YAAM,cAAc,MAAM;AACxB,cAAM,oBAAoB,cAAc,WAAW;AACnD,aAAK,KAAK,sBAAsB;AAChC,gBAAQ;AAAA,MACV;AACA,YAAM,iBAAiB,cAAc,WAAW;AAChD,YAAM,KAAK;AAAA,IACb,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAuB;AACrB,WAAO,QAAQ,IAAI,CAAC,KAAK,WAAW,GAAG,KAAK,YAAY,CAAC,CAAC;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,UAAU;AACd,SAAK,KAAK,SAAS;AACnB,UAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,QAAI,CAAC,OAAO;AACV,YAAM,IAAI,MAAM,4CAA4C;AAAA,IAC9D;AAEA,QAAI,EAAE,iBAAiB,mBAAmB;AACxC,YAAM,IAAI,MAAM,6DAA6D;AAAA,IAC/E;AAEA,QAAI,CAAC,KAAK,SAAS,MAAM;AACvB,WAAK,KAAK,uBAAuB;AACjC;AAAA,IACF;AAEA,SAAK,KAAK,eAAe;AACzB,UAAM,KAAK,KAAK;AAChB,SAAK,KAAK,eAAe;AACzB,UAAM,KAAK,MAAM;AACjB,SAAK,KAAK,iBAAiB;AAC3B,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,SAAK,WAAW;AAAA,EAClB;AACF;",
   "names": []
 }

package/FigureVideo/FigureVideoTwicpics.d.ts

@@ -14,9 +14,10 @@ export interface FigureVideoTwicpicsProps extends BaseProps {
     };
 }
 /**
- * FigureVideo class.
+ * FigureVideoTwicpics class.
  *
  * Manager lazyloading image sources.
+ * @link https://ui.studiometa.dev/-/components/FigureVideoTwicpics/
  */
 export declare class FigureVideoTwicpics<T extends BaseProps = BaseProps> extends FigureVideo<T & FigureVideoTwicpicsProps> {
     /**

package/FigureVideo/FigureVideoTwicpics.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/FigureVideo/FigureVideoTwicpics.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n  withLeadingSlash,\n  withoutLeadingSlash,\n  withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { loadImage } from '../Figure/utils.js';\nimport { FigureVideo } from './FigureVideo.js';\n\nexport interface FigureVideoTwicpicsProps extends BaseProps {\n  $refs: {\n    video: HTMLVideoElement;\n  };\n  $options: {\n    lazy: boolean;\n    transform: string;\n    domain: string;\n    path: string;\n    step: number;\n    mode: string;\n  };\n}\n\n/**\n * Normalize the given size to the step option.\n */\n// eslint-disable-next-line no-use-before-define\nfunction normalizeSize(that: FigureVideoTwicpics, prop: string): number {\n  const { step } = that.$options;\n  return Math.ceil(that.$refs.video[prop] / step) * step;\n}\n\n/**\n * FigureVideo class.\n *\n * Manager lazyloading image sources.\n */\nexport class FigureVideoTwicpics<T extends BaseProps = BaseProps> extends FigureVideo<\n  T & FigureVideoTwicpicsProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...FigureVideo.config,\n    name: 'FigureVideoTwicpics',\n    options: {\n      ...FigureVideo.config.options,\n      transform: String,\n      domain: String,\n      path: String,\n      step: {\n        type: Number,\n        default: 50,\n      },\n      mode: {\n        type: String,\n        default: 'cover',\n      },\n    },\n  };\n\n  /**\n   * Get the Twicpics path.\n   */\n  get path(): string {\n    return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));\n  }\n\n  /**\n   * Get the Twicpics domain.\n   */\n  get domain(): string {\n    if (this.$options.domain) {\n      return this.$options.domain;\n    }\n    const url = new URL(this.sources[0].dataset.src);\n    return url.host;\n  }\n\n  /**\n   * Format the source for Twicpics.\n   * @param {string} src\n   * @param {Array} options\n   * @returns {string}\n   */\n  formatSrc(src: string, options: Array<string> = []): string {\n    const url = new URL(src, 'https://localhost');\n    url.host = this.domain;\n    url.port = '';\n\n    if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {\n      url.pathname = `/${this.path}${url.pathname}`;\n    }\n\n    const width = normalizeSize(this, 'offsetWidth');\n    const height = normalizeSize(this, 'offsetHeight');\n\n    this.$log(this.$options.mode, width, height);\n\n    url.searchParams.set(\n      'twic',\n      ['v1', this.$options.transform, `${this.$options.mode}=${width}x${height}`, ...options]\n        .filter(Boolean)\n        .join('/'),\n    );\n\n    url.search = decodeURIComponent(url.search);\n\n    return url.toString();\n  }\n\n  /**\n   * Load poster\n   */\n  loadPoster(): Promise<void|HTMLImageElement> {\n    const { video } = this.$refs;\n\n    if (!video.dataset.poster) {\n      return Promise.resolve();\n    }\n\n    const twicPoster = this.formatSrc(video.dataset.poster);\n\n    return loadImage(twicPoster).then(() => {\n      video.poster = twicPoster;\n      this.$log('fresh poster loaded');\n    });\n  }\n\n  /**\n   * Load sources\n   */\n  loadSources(): Promise<void> {\n    const { video } = this.$refs;\n\n    this.sources.forEach((source) => {\n      if (!source.dataset.src) {\n        return;\n      }\n      source.src = this.formatSrc(\n        source.dataset.src,\n        source.dataset.output ? [`output=${source.dataset.output}`] : [],\n      );\n    });\n\n    return new Promise((resolve) => {\n      const loadHandler = () => {\n        resolve();\n        video.removeEventListener('canplaythrough', loadHandler);\n        this.$log('fresh sources loaded');\n      };\n\n      video.addEventListener('canplaythrough', loadHandler);\n\n      this.$refs.video.width = normalizeSize(this, 'offsetWidth');\n      this.$refs.video.height = normalizeSize(this, 'offsetHeight');\n\n      video.load();\n    });\n  }\n\n  /**\n   * Reassign the source from the original on resize.\n   */\n  async resized() {\n    const width = normalizeSize(this, 'offsetWidth');\n    const height = normalizeSize(this, 'offsetHeight');\n\n    if (width === this.$refs.video.width && height === this.$refs.video.height) {\n      return;\n    }\n\n    this.$refs.video.width = width;\n    this.$refs.video.height = height;\n\n    await this.load();\n  }\n\n  /**\n   * Do not terminate on image load as we need to set the src on resize.\n   */\n  onLoad() {\n    // Do not terminate on image load as we need.\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n  withLeadingSlash,\n  withoutLeadingSlash,\n  withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { loadImage } from '../Figure/utils.js';\nimport { FigureVideo } from './FigureVideo.js';\n\nexport interface FigureVideoTwicpicsProps extends BaseProps {\n  $refs: {\n    video: HTMLVideoElement;\n  };\n  $options: {\n    lazy: boolean;\n    transform: string;\n    domain: string;\n    path: string;\n    step: number;\n    mode: string;\n  };\n}\n\n/**\n * Normalize the given size to the step option.\n */\n// eslint-disable-next-line no-use-before-define\nfunction normalizeSize(that: FigureVideoTwicpics, prop: string): number {\n  const { step } = that.$options;\n  return Math.ceil(that.$refs.video[prop] / step) * step;\n}\n\n/**\n * FigureVideoTwicpics class.\n *\n * Manager lazyloading image sources.\n * @link https://ui.studiometa.dev/-/components/FigureVideoTwicpics/\n */\nexport class FigureVideoTwicpics<T extends BaseProps = BaseProps> extends FigureVideo<\n  T & FigureVideoTwicpicsProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...FigureVideo.config,\n    name: 'FigureVideoTwicpics',\n    options: {\n      ...FigureVideo.config.options,\n      transform: String,\n      domain: String,\n      path: String,\n      step: {\n        type: Number,\n        default: 50,\n      },\n      mode: {\n        type: String,\n        default: 'cover',\n      },\n    },\n  };\n\n  /**\n   * Get the Twicpics path.\n   */\n  get path(): string {\n    return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));\n  }\n\n  /**\n   * Get the Twicpics domain.\n   */\n  get domain(): string {\n    if (this.$options.domain) {\n      return this.$options.domain;\n    }\n    const url = new URL(this.sources[0].dataset.src);\n    return url.host;\n  }\n\n  /**\n   * Format the source for Twicpics.\n   * @param {string} src\n   * @param {Array} options\n   * @returns {string}\n   */\n  formatSrc(src: string, options: Array<string> = []): string {\n    const url = new URL(src, 'https://localhost');\n    url.host = this.domain;\n    url.port = '';\n\n    if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {\n      url.pathname = `/${this.path}${url.pathname}`;\n    }\n\n    const width = normalizeSize(this, 'offsetWidth');\n    const height = normalizeSize(this, 'offsetHeight');\n\n    this.$log(this.$options.mode, width, height);\n\n    url.searchParams.set(\n      'twic',\n      ['v1', this.$options.transform, `${this.$options.mode}=${width}x${height}`, ...options]\n        .filter(Boolean)\n        .join('/'),\n    );\n\n    url.search = decodeURIComponent(url.search);\n\n    return url.toString();\n  }\n\n  /**\n   * Load poster\n   */\n  loadPoster(): Promise<void|HTMLImageElement> {\n    const { video } = this.$refs;\n\n    if (!video.dataset.poster) {\n      return Promise.resolve();\n    }\n\n    const twicPoster = this.formatSrc(video.dataset.poster);\n\n    return loadImage(twicPoster).then(() => {\n      video.poster = twicPoster;\n      this.$log('fresh poster loaded');\n    });\n  }\n\n  /**\n   * Load sources\n   */\n  loadSources(): Promise<void> {\n    const { video } = this.$refs;\n\n    this.sources.forEach((source) => {\n      if (!source.dataset.src) {\n        return;\n      }\n      source.src = this.formatSrc(\n        source.dataset.src,\n        source.dataset.output ? [`output=${source.dataset.output}`] : [],\n      );\n    });\n\n    return new Promise((resolve) => {\n      const loadHandler = () => {\n        resolve();\n        video.removeEventListener('canplaythrough', loadHandler);\n        this.$log('fresh sources loaded');\n      };\n\n      video.addEventListener('canplaythrough', loadHandler);\n\n      this.$refs.video.width = normalizeSize(this, 'offsetWidth');\n      this.$refs.video.height = normalizeSize(this, 'offsetHeight');\n\n      video.load();\n    });\n  }\n\n  /**\n   * Reassign the source from the original on resize.\n   */\n  async resized() {\n    const width = normalizeSize(this, 'offsetWidth');\n    const height = normalizeSize(this, 'offsetHeight');\n\n    if (width === this.$refs.video.width && height === this.$refs.video.height) {\n      return;\n    }\n\n    this.$refs.video.width = width;\n    this.$refs.video.height = height;\n\n    await this.load();\n  }\n\n  /**\n   * Do not terminate on image load as we need to set the src on resize.\n   */\n  onLoad() {\n    // Do not terminate on image load as we need.\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/Frame/Frame.d.ts

@@ -20,7 +20,7 @@ export interface FrameProps extends BaseProps {
 }
 /**
  * Frame class.
- * @see https://ui.studiometa.dev/-/components/Frame/
+ * @link https://ui.studiometa.dev/-/components/Frame/
  */
 export declare class Frame<T extends BaseProps = BaseProps> extends Base<T & FrameProps> {
     /**