@studiometa/ui 1.0.0-alpha.7 → 1.0.0-alpha.9

package/atoms/Figure/AbstractFigureDynamic.d.ts

@@ -0,0 +1,29 @@
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { AbstractFigure } from './AbstractFigure.js';
+export interface AbstractFigureDynamicProps extends BaseProps {
+    $options: {
+        disable: boolean;
+        step: number;
+    };
+}
+/**
+ * AbstractFigureDynamic class.
+ */
+export declare class AbstractFigureDynamic<T extends BaseProps = BaseProps> extends AbstractFigure<T & AbstractFigureDynamicProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    /**
+     * Get the formatted source or the original based on the `disable` option.
+     */
+    get original(): string;
+    /**
+     * Format the source with dynamic parameters.
+     */
+    formatSrc(src: string): string;
+    /**
+     * Reassign the source from the original on resize.
+     */
+    resized(): Promise<void>;
+}

package/atoms/Figure/AbstractFigureDynamic.js

@@ -0,0 +1,48 @@
+import { AbstractFigure } from "./AbstractFigure.js";
+import { loadImage } from "./utils.js";
+class AbstractFigureDynamic extends AbstractFigure {
+  /**
+   * Config.
+   */
+  static config = {
+    ...AbstractFigure.config,
+    name: "AbstractFigureDynamic",
+    options: {
+      ...AbstractFigure.config.options,
+      disable: Boolean,
+      step: {
+        type: Number,
+        default: 50
+      },
+      lazy: {
+        type: Boolean,
+        default: true
+      }
+    }
+  };
+  /**
+   * Get the formatted source or the original based on the `disable` option.
+   */
+  get original() {
+    return this.$options.disable ? super.original : this.formatSrc(super.original);
+  }
+  /**
+   * Format the source with dynamic parameters.
+   */
+  /* v8 ignore next 3 */
+  formatSrc(src) {
+    return src;
+  }
+  /**
+   * Reassign the source from the original on resize.
+   */
+  async resized() {
+    const { original } = this;
+    await loadImage(original);
+    this.src = original;
+  }
+}
+export {
+  AbstractFigureDynamic
+};
+//# sourceMappingURL=AbstractFigureDynamic.js.map

package/atoms/Figure/AbstractFigureDynamic.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/Figure/AbstractFigureDynamic.ts"],
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n  withLeadingSlash,\n  withoutLeadingSlash,\n  withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { AbstractFigure } from './AbstractFigure.js';\nimport { loadImage } from './utils.js';\n\nexport interface AbstractFigureDynamicProps extends BaseProps {\n  $options: {\n    disable: boolean;\n    step: number;\n  };\n}\n\n/**\n * AbstractFigureDynamic class.\n */\nexport class AbstractFigureDynamic<T extends BaseProps = BaseProps> extends AbstractFigure<\n  T & AbstractFigureDynamicProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractFigure.config,\n    name: 'AbstractFigureDynamic',\n    options: {\n      ...AbstractFigure.config.options,\n      disable: Boolean,\n      step: {\n        type: Number,\n        default: 50,\n      },\n      lazy: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Get the formatted source or the original based on the `disable` option.\n   */\n  get original() {\n    return this.$options.disable ? super.original : this.formatSrc(super.original);\n  }\n\n  /**\n   * Format the source with dynamic parameters.\n   */\n  /* v8 ignore next 3 */\n  formatSrc(src: string): string {\n    return src;\n  }\n\n  /**\n   * Reassign the source from the original on resize.\n   */\n  async resized() {\n    const { original } = this;\n    await loadImage(original);\n    this.src = original;\n  }\n}\n"],
+  "mappings": "AAMA,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAYnB,MAAM,8BAA+D,eAE1E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,eAAe;AAAA,IAClB,MAAM;AAAA,IACN,SAAS;AAAA,MACP,GAAG,eAAe,OAAO;AAAA,MACzB,SAAS;AAAA,MACT,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,SAAS,UAAU,MAAM,WAAW,KAAK,UAAU,MAAM,QAAQ;AAAA,EAC/E;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU,KAAqB;AAC7B,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,UAAU;AACd,UAAM,EAAE,SAAS,IAAI;AACrB,UAAM,UAAU,QAAQ;AACxB,SAAK,MAAM;AAAA,EACb;AACF;",
+  "names": []
+}

package/atoms/Figure/Figure.d.ts

@@ -1,49 +1,18 @@
 import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
-import { Transition } from '../../primitives/index.js';
-export interface FigureProps extends BaseProps {
-    $refs: {
-        img: HTMLImageElement;
-    };
-    $options: {
-        lazy: boolean;
-    };
+import { AbstractFigure } from './AbstractFigure.js';
+import type { AbstractFigureProps } from './AbstractFigure.js';
+export interface FigureProps extends AbstractFigureProps {
 }
-/**
- * Load the given image.
- */
-export declare function loadImage(src: string): Promise<HTMLImageElement>;
-declare const Figure_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithMountWhenInViewInterface, Transition<BaseProps>, import("@studiometa/js-toolkit").WithMountWhenInViewProps>;
 /**
  * Figure class.
  */
-export declare class Figure<T extends BaseProps = BaseProps> extends Figure_base<T & FigureProps> {
+export declare class Figure<T extends BaseProps = BaseProps> extends AbstractFigure<T> {
     /**
      * Config.
      */
     static config: BaseConfig;
-    /**
-     * Get the transition target.
-     */
-    get target(): HTMLImageElement;
-    /**
-     * Get the image source.
-     */
-    get src(): string;
-    /**
-     * Set the image source.
-     */
-    set src(value: string);
-    /**
-     * Get the original source.
-     */
-    get original(): string;
-    /**
-     * Load on mount.
-     */
-    mounted(): Promise<void>;
     /**
      * Terminate the component on load.
      */
     onLoad(): void;
 }
-export {};

package/atoms/Figure/Figure.js

@@ -1,74 +1,12 @@
-import { withMountWhenInView } from "@studiometa/js-toolkit";
-import { Transition } from "../../primitives/index.js";
-function loadImage(src) {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.addEventListener("load", () => resolve(img));
-    img.src = src;
-  });
-}
-class Figure extends withMountWhenInView(
-  Transition,
-  {
-    threshold: [0, 1]
-  }
-) {
+import { AbstractFigure } from "./AbstractFigure.js";
+class Figure extends AbstractFigure {
   /**
    * Config.
    */
   static config = {
-    ...Transition.config,
-    name: "Figure",
-    emits: ["load"],
-    refs: ["img"],
-    options: {
-      ...Transition.config.options,
-      lazy: Boolean
-    }
+    ...AbstractFigure.config,
+    name: "Figure"
   };
-  /**
-   * Get the transition target.
-   */
-  get target() {
-    return this.$refs.img;
-  }
-  /**
-   * Get the image source.
-   */
-  get src() {
-    return this.$refs.img.src;
-  }
-  /**
-   * Set the image source.
-   */
-  set src(value) {
-    this.$refs.img.src = value;
-  }
-  /**
-   * Get the original source.
-   */
-  get original() {
-    return this.$refs.img.dataset.src;
-  }
-  /**
-   * Load on mount.
-   */
-  async mounted() {
-    const { img } = this.$refs;
-    if (!img) {
-      throw new Error("[Figure] The `img` ref is required.");
-    }
-    if (!(img instanceof HTMLImageElement)) {
-      throw new Error("[Figure] The `img` ref must be an `<img>` element.");
-    }
-    const src = this.original;
-    if (this.$options.lazy && src && src !== this.src) {
-      await loadImage(src);
-      this.src = src;
-      this.enter();
-      this.$emit("load");
-    }
-  }
   /**
    * Terminate the component on load.
    */
@@ -77,7 +15,6 @@ class Figure extends withMountWhenInView(
   }
 }
 export {
-  Figure,
-  loadImage
+  Figure
 };
 //# sourceMappingURL=Figure.js.map

package/atoms/Figure/Figure.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/Figure/Figure.ts"],
-  "sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\n\nexport interface FigureProps extends BaseProps {\n  $refs: {\n    img: HTMLImageElement;\n  };\n  $options: {\n    lazy: boolean;\n  };\n}\n\n/**\n * Load the given image.\n */\nexport function loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise((resolve) => {\n    const img = new Image();\n    img.addEventListener('load', () => resolve(img));\n    img.src = src;\n  });\n}\n\n/**\n * Figure class.\n */\nexport class Figure<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(\n  Transition,\n  {\n    threshold: [0, 1],\n  },\n)<T & FigureProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'Figure',\n    emits: ['load'],\n    refs: ['img'],\n    options: {\n      ...Transition.config.options,\n      lazy: Boolean,\n    },\n  };\n\n  /**\n   * Get the transition target.\n   */\n  get target() {\n    return this.$refs.img;\n  }\n\n  /**\n   * Get the image source.\n   */\n  get src() {\n    return this.$refs.img.src;\n  }\n\n  /**\n   * Set the image source.\n   */\n  set src(value: string) {\n    this.$refs.img.src = value;\n  }\n\n  /**\n   * Get the original source.\n   */\n  get original() {\n    return this.$refs.img.dataset.src;\n  }\n\n  /**\n   * Load on mount.\n   */\n  async mounted() {\n    const { img } = this.$refs;\n\n    if (!img) {\n      throw new Error('[Figure] The `img` ref is required.');\n    }\n\n    if (!(img instanceof HTMLImageElement)) {\n      throw new Error('[Figure] The `img` ref must be an `<img>` element.');\n    }\n\n    const src = this.original;\n\n    if (this.$options.lazy && src && src !== this.src) {\n      await loadImage(src);\n      this.src = src;\n      this.enter();\n      this.$emit('load');\n    }\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;AAcpB,SAAS,UAAU,KAAwC;AAChE,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,MAAM,IAAI,MAAM;AACtB,QAAI,iBAAiB,QAAQ,MAAM,QAAQ,GAAG,CAAC;AAC/C,QAAI,MAAM;AAAA,EACZ,CAAC;AACH;AAKO,MAAM,eAAgD;AAAA,EAC3D;AAAA,EACA;AAAA,IACE,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AACF,EAAmB;AAAA;AAAA;AAAA;AAAA,EAIjB,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,OAAO,CAAC,MAAM;AAAA,IACd,MAAM,CAAC,KAAK;AAAA,IACZ,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,IACR;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,IAAI,OAAe;AACrB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,MAAM,IAAI,QAAQ;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,UAAU;AACd,UAAM,EAAE,IAAI,IAAI,KAAK;AAErB,QAAI,CAAC,KAAK;AACR,YAAM,IAAI,MAAM,qCAAqC;AAAA,IACvD;AAEA,QAAI,EAAE,eAAe,mBAAmB;AACtC,YAAM,IAAI,MAAM,oDAAoD;AAAA,IACtE;AAEA,UAAM,MAAM,KAAK;AAEjB,QAAI,KAAK,SAAS,QAAQ,OAAO,QAAQ,KAAK,KAAK;AACjD,YAAM,UAAU,GAAG;AACnB,WAAK,MAAM;AACX,WAAK,MAAM;AACX,WAAK,MAAM,MAAM;AAAA,IACnB;AAAA,EACF;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 { AbstractFigure } from './AbstractFigure.js';\nimport type { AbstractFigureProps } from './AbstractFigure.js';\n\nexport interface FigureProps extends AbstractFigureProps {}\n\n/**\n * Figure class.\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": "AAEA,SAAS,sBAAsB;AAQxB,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/atoms/Figure/FigureShopify.d.ts

@@ -0,0 +1,23 @@
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { AbstractFigureDynamic } from './AbstractFigureDynamic.js';
+export interface FigureShopifyProps extends BaseProps {
+    $options: {
+        crop?: 'top' | 'left' | 'right' | 'bottom' | 'center';
+    };
+}
+/**
+ * Figure class.
+ *
+ * Manager lazyloading image sources.
+ */
+export declare class FigureShopify<T extends BaseProps = BaseProps> extends AbstractFigureDynamic<T & FigureShopifyProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    /**
+     * Format the source for Shopify CDN API.
+     * @see https://shopify.dev/docs/api/liquid/filters/image_url
+     */
+    formatSrc(src: string): string;
+}

package/atoms/Figure/FigureShopify.js

@@ -0,0 +1,38 @@
+import { AbstractFigureDynamic } from "./AbstractFigureDynamic.js";
+import { normalizeSize } from "./utils.js";
+class FigureShopify extends AbstractFigureDynamic {
+  /**
+   * Config.
+   */
+  static config = {
+    ...AbstractFigureDynamic.config,
+    name: "FigureShopify",
+    options: {
+      ...AbstractFigureDynamic.config.options,
+      crop: {
+        type: String,
+        default: null
+      }
+    }
+  };
+  /**
+   * Format the source for Shopify CDN API.
+   * @see https://shopify.dev/docs/api/liquid/filters/image_url
+   */
+  formatSrc(src) {
+    const { crop, step } = this.$options;
+    const url = new URL(src, "https://localhost");
+    const width = normalizeSize(this.$refs.img.offsetWidth, step) * window.devicePixelRatio;
+    const height = normalizeSize(this.$refs.img.offsetHeight, step) * window.devicePixelRatio;
+    url.searchParams.set("width", String(width));
+    url.searchParams.set("height", String(height));
+    if (crop) {
+      url.searchParams.set("crop", this.$options.crop);
+    }
+    return url.toString();
+  }
+}
+export {
+  FigureShopify
+};
+//# sourceMappingURL=FigureShopify.js.map

package/atoms/Figure/FigureShopify.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/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;",
+  "names": []
+}

package/atoms/Figure/FigureTwicpics.d.ts

@@ -1,21 +1,18 @@
 import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
-import { Figure } from './Figure.js';
+import { AbstractFigureDynamic } from './AbstractFigureDynamic.js';
 export interface FigureTwicpicsProps extends BaseProps {
     $options: {
         transform: string;
         domain: string;
         path: string;
-        step: number;
         mode: string;
         dpr: boolean;
     };
 }
 /**
- * Figure class.
- *
- * Manager lazyloading image sources.
+ * FigureTwicpics class.
  */
-export declare class FigureTwicpics<T extends BaseProps = BaseProps> extends Figure<T & FigureTwicpicsProps> {
+export declare class FigureTwicpics<T extends BaseProps = BaseProps> extends AbstractFigureDynamic<T & FigureTwicpicsProps> {
     /**
      * Config.
      */
@@ -28,11 +25,6 @@ export declare class FigureTwicpics<T extends BaseProps = BaseProps> extends Fig
      * Get the Twicpics domain.
      */
     get domain(): string;
-    /**
-     * Get formatted original source.
-     * If `disable` option is `true` returns the original src.
-     */
-    get original(): string;
     /**
      * Get the current device pixel ratio
      * Returns 1 if user agent is considered as a bot.
@@ -43,12 +35,4 @@ export declare class FigureTwicpics<T extends BaseProps = BaseProps> extends Fig
      * Format the source for Twicpics.
      */
     formatSrc(src: string): string;
-    /**
-     * Reassign the source from the original on resize.
-     */
-    resized(): Promise<void>;
-    /**
-     * Do not terminate on image load as we need to set the src on resize.
-     */
-    onLoad(): void;
 }

package/atoms/Figure/FigureTwicpics.js

@@ -3,21 +3,18 @@ import {
   withoutLeadingSlash,
   withoutTrailingSlash
 } from "@studiometa/js-toolkit/utils";
-import { Figure, loadImage } from "./Figure.js";
-function normalizeSize(that, prop) {
-  const { step } = that.$options;
-  return Math.ceil(that.$refs.img[prop] / step) * step;
-}
+import { AbstractFigureDynamic } from "./AbstractFigureDynamic.js";
+import { normalizeSize } from "./utils.js";
 const isBot = /bot|crawl|slurp|spider/i.test(navigator.userAgent);
-class FigureTwicpics extends Figure {
+class FigureTwicpics extends AbstractFigureDynamic {
   /**
    * Config.
    */
   static config = {
-    ...Figure.config,
+    ...AbstractFigureDynamic.config,
     name: "FigureTwicpics",
     options: {
-      ...Figure.config.options,
+      ...AbstractFigureDynamic.config.options,
       transform: String,
       domain: String,
       path: String,
@@ -46,15 +43,7 @@ class FigureTwicpics extends Figure {
    * Get the Twicpics domain.
    */
   get domain() {
-    const url = new URL(this.$refs.img.dataset.src);
-    return url.host;
-  }
-  /**
-   * Get formatted original source.
-   * If `disable` option is `true` returns the original src.
-   */
-  get original() {
-    return this.$options.disable ? super.original : this.formatSrc(super.original);
+    return this.$options.domain || new URL(this.$refs.img.dataset.src).host;
   }
   /**
    * Get the current device pixel ratio
@@ -71,33 +60,22 @@ class FigureTwicpics extends Figure {
    * Format the source for Twicpics.
    */
   formatSrc(src) {
+    const { transform, mode, step } = this.$options;
     const url = new URL(src, "https://localhost");
     url.host = this.domain;
     url.port = "";
     if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {
       url.pathname = `/${this.path}${url.pathname}`;
     }
-    const width = normalizeSize(this, "offsetWidth") * this.devicePixelRatio;
-    const height = normalizeSize(this, "offsetHeight") * this.devicePixelRatio;
+    const width = normalizeSize(this.$refs.img.offsetWidth, step) * this.devicePixelRatio;
+    const height = normalizeSize(this.$refs.img.offsetHeight, step) * this.devicePixelRatio;
     url.searchParams.set(
       "twic",
-      ["v1", this.$options.transform, `${this.$options.mode}=${width}x${height}`].filter(Boolean).join("/")
+      ["v1", transform, `${mode}=${width}x${height}`].filter(Boolean).join("/")
     );
     url.search = decodeURIComponent(url.search);
     return url.toString();
   }
-  /**
-   * Reassign the source from the original on resize.
-   */
-  async resized() {
-    const { src } = await loadImage(this.original);
-    this.src = src;
-  }
-  /**
-   * Do not terminate on image load as we need to set the src on resize.
-   */
-  onLoad() {
-  }
 }
 export {
   FigureTwicpics

package/atoms/Figure/FigureTwicpics.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/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 { Figure, loadImage } from './Figure.js';\n\nexport interface FigureTwicpicsProps extends BaseProps {\n  $options: {\n    transform: string;\n    domain: string;\n    path: string;\n    step: number;\n    mode: string;\n    dpr: boolean;\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: FigureTwicpics, prop: string): number {\n  const { step } = that.$options;\n  return Math.ceil(that.$refs.img[prop] / step) * step;\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 * Figure class.\n *\n * Manager lazyloading image sources.\n */\nexport class FigureTwicpics<T extends BaseProps = BaseProps> extends Figure<\n  T & FigureTwicpicsProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Figure.config,\n    name: 'FigureTwicpics',\n    options: {\n      ...Figure.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    const url = new URL(this.$refs.img.dataset.src);\n    return url.host;\n  }\n\n  /**\n   * Get formatted original source.\n   * If `disable` option is `true` returns the original src.\n   */\n  get original() {\n    return this.$options.disable ? super.original : this.formatSrc(super.original);\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 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') * this.devicePixelRatio;\n    const height = normalizeSize(this, 'offsetHeight') * this.devicePixelRatio;\n\n    url.searchParams.set(\n      'twic',\n      ['v1', this.$options.transform, `${this.$options.mode}=${width}x${height}`]\n        .filter(Boolean)\n        .join('/'),\n    );\n\n    url.search = decodeURIComponent(url.search);\n\n    return url.toString();\n  }\n\n  /**\n   * Reassign the source from the original on resize.\n   */\n  async resized() {\n    const { src } = await loadImage(this.original);\n    this.src = src;\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": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,QAAQ,iBAAiB;AAiBlC,SAAS,cAAc,MAAsB,MAAsB;AACjE,QAAM,EAAE,KAAK,IAAI,KAAK;AACtB,SAAO,KAAK,KAAK,KAAK,MAAM,IAAI,IAAI,IAAI,IAAI,IAAI;AAClD;AAKA,MAAM,QAAQ,0BAA0B,KAAK,UAAU,SAAS;AAOzD,MAAM,uBAAwD,OAEnE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,OAAO;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,MACP,GAAG,OAAO,OAAO;AAAA,MACjB,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,UAAM,MAAM,IAAI,IAAI,KAAK,MAAM,IAAI,QAAQ,GAAG;AAC9C,WAAO,IAAI;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACb,WAAO,KAAK,SAAS,UAAU,MAAM,WAAW,KAAK,UAAU,MAAM,QAAQ;AAAA,EAC/E;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,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,MAAM,aAAa,IAAI,KAAK;AACxD,UAAM,SAAS,cAAc,MAAM,cAAc,IAAI,KAAK;AAE1D,QAAI,aAAa;AAAA,MACf;AAAA,MACA,CAAC,MAAM,KAAK,SAAS,WAAW,GAAG,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,MAAM,EAAE,EACvE,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,IACb;AAEA,QAAI,SAAS,mBAAmB,IAAI,MAAM;AAE1C,WAAO,IAAI,SAAS;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,UAAU;AACd,UAAM,EAAE,IAAI,IAAI,MAAM,UAAU,KAAK,QAAQ;AAC7C,SAAK,MAAM;AAAA,EACb;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AAAA,EAET;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 */\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;",
   "names": []
 }

package/atoms/Figure/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Figure.js';
 export * from './FigureTwicpics.js';
+export * from './FigureShopify.js';

package/atoms/Figure/index.js

@@ -1,3 +1,4 @@
 export * from "./Figure.js";
 export * from "./FigureTwicpics.js";
+export * from "./FigureShopify.js";
 //# sourceMappingURL=index.js.map

package/atoms/Figure/index.js.map

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

package/atoms/Figure/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Load the given image.
+ */
+export declare function loadImage(src: string): Promise<HTMLImageElement>;
+/**
+ * Normalize a size to the given step.
+ */
+export declare function normalizeSize(size: number, step: number): number;

package/atoms/Figure/utils.js

@@ -0,0 +1,15 @@
+function loadImage(src) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.addEventListener("load", () => resolve(img));
+    img.src = src;
+  });
+}
+function normalizeSize(size, step) {
+  return Math.ceil(size / step) * step;
+}
+export {
+  loadImage,
+  normalizeSize
+};
+//# sourceMappingURL=utils.js.map

package/atoms/Figure/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/Figure/utils.ts"],
+  "sourcesContent": ["/**\n * Load the given image.\n */\nexport function loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise((resolve) => {\n    const img = new Image();\n    img.addEventListener('load', () => resolve(img));\n    img.src = src;\n  });\n}\n\n/**\n * Normalize a size to the given step.\n */\nexport function normalizeSize(size:number, step:number): number {\n  return Math.ceil(size / step) * step;\n}\n"],
+  "mappings": "AAGO,SAAS,UAAU,KAAwC;AAChE,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,MAAM,IAAI,MAAM;AACtB,QAAI,iBAAiB,QAAQ,MAAM,QAAQ,GAAG,CAAC;AAC/C,QAAI,MAAM;AAAA,EACZ,CAAC;AACH;AAKO,SAAS,cAAc,MAAa,MAAqB;AAC9D,SAAO,KAAK,KAAK,OAAO,IAAI,IAAI;AAClC;",
+  "names": []
+}

package/atoms/FigureVideo/FigureVideo.js

@@ -1,6 +1,6 @@
 import { withMountWhenInView } from "@studiometa/js-toolkit";
 import { Transition } from "../../primitives/index.js";
-import { loadImage } from "../index.js";
+import { loadImage } from "../Figure/utils.js";
 class FigureVideo extends withMountWhenInView(
   Transition,
   {

package/atoms/FigureVideo/FigureVideo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/FigureVideo/FigureVideo.ts"],
-  "sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\nimport { loadImage } from '../index.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"],
+  "sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/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;",
   "names": []
 }

package/atoms/FigureVideo/FigureVideoTwicpics.js

@@ -3,7 +3,7 @@ import {
   withoutLeadingSlash,
   withoutTrailingSlash
 } from "@studiometa/js-toolkit/utils";
-import { loadImage } from "../index.js";
+import { loadImage } from "../Figure/utils.js";
 import { FigureVideo } from "./FigureVideo.js";
 function normalizeSize(that, prop) {
   const { step } = that.$options;

package/atoms/FigureVideo/FigureVideoTwicpics.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/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 '../index.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"],
+  "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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",
   "names": []
 }

package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.d.ts

@@ -1,5 +1,5 @@
 import type { BaseConfig } from '@studiometa/js-toolkit';
-declare const ScrollAnimationChildWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("#private").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("./animationScrollWithEase.js").AnimationScrollWithEaseProps>;
+declare const ScrollAnimationChildWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("#private/index.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("./animationScrollWithEase.js").AnimationScrollWithEaseProps>;
 /**
  * ScrollAnimationChild class.
  */