@studiometa/ui 1.0.0-alpha.8 → 1.0.0-beta.0

package/Figure/AbstractFigureDynamic.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Figure/AbstractFigureDynamic.ts"],
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\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": "AACA,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/Figure/Figure.d.ts

@@ -0,0 +1,18 @@
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { AbstractFigure } from './AbstractFigure.js';
+import type { AbstractFigureProps } from './AbstractFigure.js';
+export interface FigureProps extends AbstractFigureProps {
+}
+/**
+ * Figure class.
+ */
+export declare class Figure<T extends BaseProps = BaseProps> extends AbstractFigure<T> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    /**
+     * Terminate the component on load.
+     */
+    onLoad(): void;
+}

package/Figure/Figure.js

@@ -0,0 +1,20 @@
+import { AbstractFigure } from "./AbstractFigure.js";
+class Figure extends AbstractFigure {
+  /**
+   * Config.
+   */
+  static config = {
+    ...AbstractFigure.config,
+    name: "Figure"
+  };
+  /**
+   * Terminate the component on load.
+   */
+  onLoad() {
+    this.$terminate();
+  }
+}
+export {
+  Figure
+};
+//# sourceMappingURL=Figure.js.map

package/Figure/Figure.js.map

@@ -0,0 +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 */\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;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/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/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/Figure/FigureShopify.js.map

@@ -0,0 +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;",
+  "names": []
+}

package/{atoms/Figure → 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 → 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/Figure/FigureTwicpics.js.map

@@ -0,0 +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;",
+  "names": []
+}

package/{atoms/Figure → Figure}/FigureTwicpics.twig

@@ -14,7 +14,7 @@
  */
 #}
 
-{% extends '@ui-pkg/atoms/Figure/Figure.twig' %}
+{% extends '@ui-pkg/Figure/Figure.twig' %}
 
 {% set twic_param = 'v1' %}
 {% if twic_transform is defined %}

package/{atoms/Figure → Figure}/index.d.ts

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

package/{atoms/Figure → Figure}/index.js

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

package/Figure/index.js.map

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

package/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/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/Figure/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/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}/FigureVideo.d.ts

@@ -1,5 +1,5 @@
 import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
-import { Transition } from '../../primitives/index.js';
+import { Transition } from '../Transition/index.js';
 export interface FigureVideoProps extends BaseProps {
     $refs: {
         video: HTMLVideoElement;

package/{atoms/FigureVideo → 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 { Transition } from "../Transition/index.js";
+import { loadImage } from "../Figure/utils.js";
 class FigureVideo extends withMountWhenInView(
   Transition,
   {

package/FigureVideo/FigureVideo.js.map

@@ -0,0 +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;",
+  "names": []
+}

package/{atoms/FigureVideo → 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/FigureVideo/FigureVideoTwicpics.js.map

@@ -0,0 +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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",
+  "names": []
+}

package/{atoms/FigureVideo → FigureVideo}/FigureVideoTwicpics.twig

@@ -12,7 +12,7 @@
  */
 #}
 
-{% extends '@ui-pkg/atoms/FigureVideo/FigureVideo.twig' %}
+{% extends '@ui-pkg/FigureVideo/FigureVideo.twig' %}
 
 {% set twic_param = 'v1' %}
 {% if twic_transform is defined %}

package/{atoms/FigureVideo → FigureVideo}/index.js.map

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

package/{organisms/Frame → Frame}/Frame.js

@@ -122,7 +122,7 @@ class Frame extends Base {
     const doc = this.parseHTML(content);
     const el = doc.querySelector(`#${this.id}`);
     const newFrame = new Frame(el);
-    newFrame.$children.registerAll();
+    newFrame.__children.registerAll();
     this.$emit("after-fetch", url, content);
     this.$emit("before-leave");
     await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));

package/{organisms/Frame → Frame}/Frame.js.map

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

package/{organisms/Frame → Frame}/FrameAnchor.js.map

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

package/{organisms/Frame → Frame}/FrameForm.js.map

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

package/{organisms/Frame → Frame}/FrameTarget.d.ts

@@ -1,5 +1,5 @@
 import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
-import { Transition } from '../../primitives/index.js';
+import { Transition } from '../Transition/index.js';
 export interface FrameTargetProps extends BaseProps {
     $options: {
         mode: 'replace' | 'prepend' | 'append';
@@ -25,7 +25,7 @@ export declare class FrameTarget<T extends BaseProps = BaseProps> extends Transi
     /**
      * Override options.
      */
-    get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit").BaseOptions & (T & FrameTargetProps & import("#private/index.js").TransitionProps)["$options"];
+    get $options(): import("@studiometa/js-toolkit").BaseOptions & (T & FrameTargetProps & import("../index.js").TransitionProps)["$options"];
     /**
      * Get uniq ID.
      */

package/{organisms/Frame → Frame}/FrameTarget.js

@@ -1,5 +1,5 @@
 import { addClass, transition } from "@studiometa/js-toolkit/utils";
-import { Transition } from "../../primitives/index.js";
+import { Transition } from "../Transition/index.js";
 class FrameTarget extends Transition {
   /**
    * Config.

package/Frame/FrameTarget.js.map

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

package/{organisms/Frame → Frame}/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/organisms/Frame/index.ts"],
+  "sources": ["../../packages/ui/Frame/index.ts"],
   "sourcesContent": ["export * from './Frame.js';\nexport * from './FrameAnchor.js';\nexport * from './FrameForm.js';\nexport * from './FrameTarget.js';\n"],
   "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []

package/{organisms/Hero → Hero}/Hero.twig

@@ -108,7 +108,7 @@
   {% endblock %}
   {% block background %}
     {% if image.src %}
-      {% include '@ui/atoms/Figure/Figure.twig' with image only %}
+      {% include '@ui/Figure/Figure.twig' with image only %}
     {% endif %}
   {% endblock %}
   {% block content %}
@@ -138,7 +138,7 @@
         {% if actions %}
           <div {{ html_attributes(actions_attributes) }}>
             {% for action in actions %}
-              {% include '@ui/atoms/Button/StyledButtonRounded.twig' with action only %}
+              {% include '@ui/Button/StyledButtonRounded.twig' with action only %}
             {% endfor %}
           </div>
         {% endif %}

package/{atoms/Icon/IconInline.twig → Icon/Icon.twig}

@@ -23,7 +23,11 @@
 ) %}
 
 {%- set icon -%}
-  {{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
+  {% if ':' in name %}
+    {{ meta_icon(name) }}
+  {% else %}
+    {{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
+  {% endif %}
 {%- endset -%}
 
 {% if icon is not empty or not (ignore_missing ?? true)  %}