@studiometa/ui 1.6.0 → 1.7.0

package/Accordion/Accordion.d.ts

@@ -3,7 +3,7 @@ import { AccordionCore } from './AccordionCore.js';
 import type { AccordionProps } from './AccordionCore.js';
 /**
  * Accordion class.
- * @link https://ui.studiometa.dev/-/components/Accordion/
+ * @link https://ui.studiometa.dev/components/Accordion/
  */
 export declare class Accordion<T extends BaseProps = BaseProps> extends AccordionCore<T & AccordionProps> {
     static config: BaseConfig;

package/Accordion/Accordion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Accordion/Accordion.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AccordionCore } from './AccordionCore.js';\nimport type { AccordionProps } from './AccordionCore.js';\nimport { AccordionItem } from './AccordionItem.js';\n\n/**\n * Accordion class.\n * @link https://ui.studiometa.dev/-/components/Accordion/\n */\nexport class Accordion<T extends BaseProps = BaseProps> extends AccordionCore<T & AccordionProps> {\n  static config: BaseConfig = {\n    ...AccordionCore.config,\n    components: {\n      AccordionItem,\n    },\n  };\n}\n"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AccordionCore } from './AccordionCore.js';\nimport type { AccordionProps } from './AccordionCore.js';\nimport { AccordionItem } from './AccordionItem.js';\n\n/**\n * Accordion class.\n * @link https://ui.studiometa.dev/components/Accordion/\n */\nexport class Accordion<T extends BaseProps = BaseProps> extends AccordionCore<T & AccordionProps> {\n  static config: BaseConfig = {\n    ...AccordionCore.config,\n    components: {\n      AccordionItem,\n    },\n  };\n}\n"],
   "mappings": "AACA,SAAS,qBAAqB;AAE9B,SAAS,qBAAqB;AAMvB,MAAM,kBAAmD,cAAkC;AAAA,EAChG,OAAO,SAAqB;AAAA,IAC1B,GAAG,cAAc;AAAA,IACjB,YAAY;AAAA,MACV;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/Action/Action.d.ts

@@ -11,7 +11,7 @@ export interface ActionProps extends BaseProps {
 }
 /**
  * Action class.
- * @link https://ui.studiometa.dev/-/components/Action/
+ * @link https://ui.studiometa.dev/components/Action/
  */
 export declare class Action<T extends BaseProps = BaseProps> extends Base<ActionProps & T> {
     static config: BaseConfig;

package/Action/Action.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Action/Action.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { ActionEvent } from './ActionEvent.js';\n\nexport interface ActionProps extends BaseProps {\n  $options: {\n    on: string;\n    target: string;\n    selector: string;\n    effect: string;\n  };\n}\n\n/**\n * Action class.\n * @link https://ui.studiometa.dev/-/components/Action/\n */\nexport class Action<T extends BaseProps = BaseProps> extends Base<ActionProps & T> {\n  static config: BaseConfig = {\n    name: 'Action',\n    options: {\n      on: {\n        type: String,\n        default: 'click',\n      },\n      target: String,\n      effect: String,\n    },\n  };\n\n  /**\n   * @private\n   */\n  __actionEvents: Set<ActionEvent<Action>>;\n\n  get actionEvents() {\n    if (this.__actionEvents) {\n      return this.__actionEvents;\n    }\n\n    const { on } = this.$options;\n    this.__actionEvents = new Set();\n\n    // @ts-ignore\n    for (const attribute of this.$el.attributes) {\n      if (attribute.name.includes('on:')) {\n        const name = attribute.name.split('on:').pop();\n        this.__actionEvents.add(new ActionEvent(this, name, attribute.value));\n      }\n    }\n\n    if (on) {\n      const { target, effect } = this.$options;\n      if (effect) {\n        const effectDefinition = target ? `${target}${ActionEvent.effectSeparator}${effect}` : effect;\n        this.__actionEvents.add(new ActionEvent(this, on, effectDefinition));\n      }\n    }\n\n    return this.__actionEvents;\n  }\n\n  /**\n   * Mounted\n   */\n  mounted() {\n    for (const actionEvent of this.actionEvents) {\n      actionEvent.attachEvent();\n    }\n  }\n\n  /**\n   * Destroyed\n   */\n  destroyed() {\n    for (const actionEvent of this.actionEvents) {\n      actionEvent.detachEvent();\n    }\n  }\n}\n"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { ActionEvent } from './ActionEvent.js';\n\nexport interface ActionProps extends BaseProps {\n  $options: {\n    on: string;\n    target: string;\n    selector: string;\n    effect: string;\n  };\n}\n\n/**\n * Action class.\n * @link https://ui.studiometa.dev/components/Action/\n */\nexport class Action<T extends BaseProps = BaseProps> extends Base<ActionProps & T> {\n  static config: BaseConfig = {\n    name: 'Action',\n    options: {\n      on: {\n        type: String,\n        default: 'click',\n      },\n      target: String,\n      effect: String,\n    },\n  };\n\n  /**\n   * @private\n   */\n  __actionEvents: Set<ActionEvent<Action>>;\n\n  get actionEvents() {\n    if (this.__actionEvents) {\n      return this.__actionEvents;\n    }\n\n    const { on } = this.$options;\n    this.__actionEvents = new Set();\n\n    // @ts-ignore\n    for (const attribute of this.$el.attributes) {\n      if (attribute.name.includes('on:')) {\n        const name = attribute.name.split('on:').pop();\n        this.__actionEvents.add(new ActionEvent(this, name, attribute.value));\n      }\n    }\n\n    if (on) {\n      const { target, effect } = this.$options;\n      if (effect) {\n        const effectDefinition = target ? `${target}${ActionEvent.effectSeparator}${effect}` : effect;\n        this.__actionEvents.add(new ActionEvent(this, on, effectDefinition));\n      }\n    }\n\n    return this.__actionEvents;\n  }\n\n  /**\n   * Mounted\n   */\n  mounted() {\n    for (const actionEvent of this.actionEvents) {\n      actionEvent.attachEvent();\n    }\n  }\n\n  /**\n   * Destroyed\n   */\n  destroyed() {\n    for (const actionEvent of this.actionEvents) {\n      actionEvent.detachEvent();\n    }\n  }\n}\n"],
   "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,mBAAmB;AAerB,MAAM,eAAgD,KAAsB;AAAA,EACjF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA;AAAA,EAEA,IAAI,eAAe;AACjB,QAAI,KAAK,gBAAgB;AACvB,aAAO,KAAK;AAAA,IACd;AAEA,UAAM,EAAE,GAAG,IAAI,KAAK;AACpB,SAAK,iBAAiB,oBAAI,IAAI;AAG9B,eAAW,aAAa,KAAK,IAAI,YAAY;AAC3C,UAAI,UAAU,KAAK,SAAS,KAAK,GAAG;AAClC,cAAM,OAAO,UAAU,KAAK,MAAM,KAAK,EAAE,IAAI;AAC7C,aAAK,eAAe,IAAI,IAAI,YAAY,MAAM,MAAM,UAAU,KAAK,CAAC;AAAA,MACtE;AAAA,IACF;AAEA,QAAI,IAAI;AACN,YAAM,EAAE,QAAQ,OAAO,IAAI,KAAK;AAChC,UAAI,QAAQ;AACV,cAAM,mBAAmB,SAAS,GAAG,MAAM,GAAG,YAAY,eAAe,GAAG,MAAM,KAAK;AACvF,aAAK,eAAe,IAAI,IAAI,YAAY,MAAM,IAAI,gBAAgB,CAAC;AAAA,MACrE;AAAA,IACF;AAEA,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,eAAW,eAAe,KAAK,cAAc;AAC3C,kBAAY,YAAY;AAAA,IAC1B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,eAAW,eAAe,KAAK,cAAc;AAC3C,kBAAY,YAAY;AAAA,IAC1B;AAAA,EACF;AACF;",
   "names": []
 }

package/AnchorNav/AnchorNav.d.ts

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

package/AnchorNav/AnchorNav.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/AnchorNav/AnchorNav.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorNavLink } from './AnchorNavLink.js';\nimport { AnchorNavTarget } from './AnchorNavTarget.js';\n\nexport interface AnchorNavProps extends BaseProps {\n  $children: {\n    AnchorNavLink: AnchorNavLink[];\n    AnchorNavTarget: AnchorNavTarget[];\n  };\n}\n\n/**\n * AnchorNav class.\n * @link https://ui.studiometa.dev/-/components/AnchorNav/\n */\nexport class AnchorNav<T extends BaseProps = BaseProps> extends Base<T & AnchorNavProps> {\n  /**\n   * Config\n   */\n  static config: BaseConfig = {\n    name: 'AnchorNav',\n    components: {\n      AnchorNavLink,\n      AnchorNavTarget,\n    },\n  };\n\n  /**\n   * Listen to the AnchorNavTarget that is mounted\n   */\n  onAnchorNavTargetMounted({ target }: { target: AnchorNavTarget }) {\n    const { id } = target.$el;\n    this.$children.AnchorNavLink.forEach((anchorNavLink) => {\n      if (id === anchorNavLink.targetId) {\n        anchorNavLink.enter();\n      }\n    });\n  }\n\n  /**\n   * Listen to the AnchorNavTarget that is destroyed\n   */\n  onAnchorNavTargetDestroyed({ target }: { target: AnchorNavTarget }) {\n    const { id } = target.$el;\n    this.$children.AnchorNavLink.forEach((anchorNavLink) => {\n      if (id === anchorNavLink.targetId) {\n        anchorNavLink.leave();\n      }\n    });\n  }\n}\n"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorNavLink } from './AnchorNavLink.js';\nimport { AnchorNavTarget } from './AnchorNavTarget.js';\n\nexport interface AnchorNavProps extends BaseProps {\n  $children: {\n    AnchorNavLink: AnchorNavLink[];\n    AnchorNavTarget: AnchorNavTarget[];\n  };\n}\n\n/**\n * AnchorNav class.\n * @link https://ui.studiometa.dev/components/AnchorNav/\n */\nexport class AnchorNav<T extends BaseProps = BaseProps> extends Base<T & AnchorNavProps> {\n  /**\n   * Config\n   */\n  static config: BaseConfig = {\n    name: 'AnchorNav',\n    components: {\n      AnchorNavLink,\n      AnchorNavTarget,\n    },\n  };\n\n  /**\n   * Listen to the AnchorNavTarget that is mounted\n   */\n  onAnchorNavTargetMounted({ target }: { target: AnchorNavTarget }) {\n    const { id } = target.$el;\n    this.$children.AnchorNavLink.forEach((anchorNavLink) => {\n      if (id === anchorNavLink.targetId) {\n        anchorNavLink.enter();\n      }\n    });\n  }\n\n  /**\n   * Listen to the AnchorNavTarget that is destroyed\n   */\n  onAnchorNavTargetDestroyed({ target }: { target: AnchorNavTarget }) {\n    const { id } = target.$el;\n    this.$children.AnchorNavLink.forEach((anchorNavLink) => {\n      if (id === anchorNavLink.targetId) {\n        anchorNavLink.leave();\n      }\n    });\n  }\n}\n"],
   "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAazB,MAAM,kBAAmD,KAAyB;AAAA;AAAA;AAAA;AAAA,EAIvF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,yBAAyB,EAAE,OAAO,GAAgC;AAChE,UAAM,EAAE,GAAG,IAAI,OAAO;AACtB,SAAK,UAAU,cAAc,QAAQ,CAAC,kBAAkB;AACtD,UAAI,OAAO,cAAc,UAAU;AACjC,sBAAc,MAAM;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,2BAA2B,EAAE,OAAO,GAAgC;AAClE,UAAM,EAAE,GAAG,IAAI,OAAO;AACtB,SAAK,UAAU,cAAc,QAAQ,CAAC,kBAAkB;AACtD,UAAI,OAAO,cAAc,UAAU;AACjC,sBAAc,MAAM;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
   "names": []
 }

package/AnchorScrollTo/AnchorScrollTo.d.ts

@@ -6,7 +6,7 @@ export interface AnchorScrollToProps extends BaseProps {
 }
 /**
  * AnchorScrollTo class.
- * @link https://ui.studiometa.dev/-/components/AnchorScrollto/
+ * @link https://ui.studiometa.dev/components/AnchorScrollto/
  */
 export declare class AnchorScrollTo<T extends BaseProps = BaseProps> extends Base<AnchorScrollToProps & T> {
     static config: BaseConfig;

package/AnchorScrollTo/AnchorScrollTo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/AnchorScrollTo/AnchorScrollTo.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { scrollTo } from '@studiometa/js-toolkit/utils';\n\nexport interface AnchorScrollToProps extends BaseProps {\n  $el: HTMLAnchorElement;\n}\n\n/**\n * AnchorScrollTo class.\n * @link https://ui.studiometa.dev/-/components/AnchorScrollto/\n */\nexport class AnchorScrollTo<T extends BaseProps = BaseProps> extends Base<AnchorScrollToProps & T> {\n  static config: BaseConfig = {\n    name: 'AnchorScrollTo',\n  };\n\n  /**\n   * Get the target selector.\n   */\n  get targetSelector(): Parameters<typeof scrollTo>[0] {\n    return this.$el.hash;\n  }\n\n  /**\n   * Scroll to the target selector on click.\n   */\n  onClick({ event }: { event: MouseEvent }) {\n    try {\n      scrollTo(this.targetSelector);\n      event.preventDefault();\n    } catch {\n      // Silence is golden.\n    }\n  }\n}\n"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { scrollTo } from '@studiometa/js-toolkit/utils';\n\nexport interface AnchorScrollToProps extends BaseProps {\n  $el: HTMLAnchorElement;\n}\n\n/**\n * AnchorScrollTo class.\n * @link https://ui.studiometa.dev/components/AnchorScrollto/\n */\nexport class AnchorScrollTo<T extends BaseProps = BaseProps> extends Base<AnchorScrollToProps & T> {\n  static config: BaseConfig = {\n    name: 'AnchorScrollTo',\n  };\n\n  /**\n   * Get the target selector.\n   */\n  get targetSelector(): Parameters<typeof scrollTo>[0] {\n    return this.$el.hash;\n  }\n\n  /**\n   * Scroll to the target selector on click.\n   */\n  onClick({ event }: { event: MouseEvent }) {\n    try {\n      scrollTo(this.targetSelector);\n      event.preventDefault();\n    } catch {\n      // Silence is golden.\n    }\n  }\n}\n"],
   "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,gBAAgB;AAUlB,MAAM,uBAAwD,KAA8B;AAAA,EACjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,iBAAiD;AACnD,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,EAAE,MAAM,GAA0B;AACxC,QAAI;AACF,eAAS,KAAK,cAAc;AAC5B,YAAM,eAAe;AAAA,IACvB,QAAQ;AAAA,IAER;AAAA,EACF;AACF;",
   "names": []
 }

package/CircularMarquee/CircularMarquee.d.ts

@@ -6,7 +6,7 @@ export interface CircularMarqueeProps extends BaseProps {
 }
 /**
  * CircularMarquee class.
- * @link https://ui.studiometa.dev/-/components/CircularMarquee/
+ * @link https://ui.studiometa.dev/components/CircularMarquee/
  */
 export declare class CircularMarquee extends Base<CircularMarqueeProps> {
     /**

package/CircularMarquee/CircularMarquee.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/CircularMarquee/CircularMarquee.ts"],
-  "sourcesContent": ["import { Base, BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { damp, transform } from '@studiometa/js-toolkit/utils';\n\nexport interface CircularMarqueeProps extends BaseProps {\n  $options: {\n    sensitivity: number;\n  };\n}\n\n/**\n * CircularMarquee class.\n * @link https://ui.studiometa.dev/-/components/CircularMarquee/\n */\nexport class CircularMarquee extends Base<CircularMarqueeProps> {\n  /**\n   * CircularMarquee Configuration\n   */\n  static config: BaseConfig = {\n    name: 'CircularMarquee',\n    options: {\n      sensitivity: {\n        type: Number,\n        default: 0.1,\n      },\n    },\n  };\n\n  /**\n   * Rotate value.\n   * @type {number}\n   */\n  rotate = 0;\n\n  /**\n   * Scroll delta Y.\n   * @type {number}\n   */\n  deltaY = 0;\n\n  /**\n   * Transform values.\n   * @type {object}\n   */\n  transform = {\n    rotate: 0,\n  };\n\n  scrolled(props) {\n    this.deltaY = props.delta.y;\n  }\n\n  ticked() {\n    this.rotate -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;\n\n    this.transform.rotate = damp(this.rotate, this.transform.rotate, 0.25);\n\n    return () => {\n      transform(this.$el, this.transform);\n    };\n  }\n}\n"],
+  "sourcesContent": ["import { Base, BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { damp, transform } from '@studiometa/js-toolkit/utils';\n\nexport interface CircularMarqueeProps extends BaseProps {\n  $options: {\n    sensitivity: number;\n  };\n}\n\n/**\n * CircularMarquee class.\n * @link https://ui.studiometa.dev/components/CircularMarquee/\n */\nexport class CircularMarquee extends Base<CircularMarqueeProps> {\n  /**\n   * CircularMarquee Configuration\n   */\n  static config: BaseConfig = {\n    name: 'CircularMarquee',\n    options: {\n      sensitivity: {\n        type: Number,\n        default: 0.1,\n      },\n    },\n  };\n\n  /**\n   * Rotate value.\n   * @type {number}\n   */\n  rotate = 0;\n\n  /**\n   * Scroll delta Y.\n   * @type {number}\n   */\n  deltaY = 0;\n\n  /**\n   * Transform values.\n   * @type {object}\n   */\n  transform = {\n    rotate: 0,\n  };\n\n  scrolled(props) {\n    this.deltaY = props.delta.y;\n  }\n\n  ticked() {\n    this.rotate -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;\n\n    this.transform.rotate = damp(this.rotate, this.transform.rotate, 0.25);\n\n    return () => {\n      transform(this.$el, this.transform);\n    };\n  }\n}\n"],
   "mappings": "AAAA,SAAS,YAAmC;AAC5C,SAAS,MAAM,iBAAiB;AAYzB,MAAM,wBAAwB,KAA2B;AAAA;AAAA;AAAA;AAAA,EAI9D,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,YAAY;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EAEA,SAAS,OAAO;AACd,SAAK,SAAS,MAAM,MAAM;AAAA,EAC5B;AAAA,EAEA,SAAS;AACP,SAAK,WAAW,KAAK,IAAI,KAAK,MAAM,IAAI,KAAK,KAAK,SAAS;AAE3D,SAAK,UAAU,SAAS,KAAK,KAAK,QAAQ,KAAK,UAAU,QAAQ,IAAI;AAErE,WAAO,MAAM;AACX,gBAAU,KAAK,KAAK,KAAK,SAAS;AAAA,IACpC;AAAA,EACF;AACF;",
   "names": []
 }

package/Cursor/Cursor.d.ts

@@ -14,7 +14,7 @@ export interface CursorProps extends BaseProps {
 }
 /**
  * Cursor class.
- * @link https://ui.studiometa.dev/-/components/Cursor/
+ * @link https://ui.studiometa.dev/components/Cursor/
  */
 export declare class Cursor<T extends BaseProps = BaseProps> extends Base<CursorProps & T> {
     static config: BaseConfig;

package/Cursor/Cursor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Cursor/Cursor.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, PointerServiceProps, BaseProps } from '@studiometa/js-toolkit';\nimport { damp, matrix } from '@studiometa/js-toolkit/utils';\n\nexport interface CursorProps extends BaseProps {\n  $options: {\n    growSelectors: string;\n    shrinkSelectors: string;\n    scale: number;\n    growTo: number;\n    shrinkTo: number;\n    translateDampFactor: number;\n    growDampFactor: number;\n    shrinkDampFactor: number;\n  };\n}\n\n/**\n * Cursor class.\n * @link https://ui.studiometa.dev/-/components/Cursor/\n */\nexport class Cursor<T extends BaseProps = BaseProps> extends Base<CursorProps & T> {\n  static config: BaseConfig = {\n    name: 'Cursor',\n    options: {\n      growSelectors: {\n        type: String,\n        default: 'a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *',\n      },\n      shrinkSelectors: {\n        type: String,\n        default: '[data-cursor-shrink], [data-cursor-shrink] *',\n      },\n      scale: {\n        type: Number,\n        default: 1,\n      },\n      growTo: {\n        type: Number,\n        default: 2,\n      },\n      shrinkTo: {\n        type: Number,\n        default: 0.5,\n      },\n      translateDampFactor: {\n        type: Number,\n        default: 0.25,\n      },\n      growDampFactor: {\n        type: Number,\n        default: 0.25,\n      },\n      shrinkDampFactor: {\n        type: Number,\n        default: 0.25,\n      },\n    },\n  };\n\n  x = 0;\n\n  y = 0;\n\n  scale = 0;\n\n  pointerX = 0;\n\n  pointerY = 0;\n\n  pointerScale = 0;\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    this.x = 0;\n    this.y = 0;\n    this.scale = 0;\n    this.pointerX = 0;\n    this.pointerY = 0;\n    this.pointerScale = 0;\n    this.render({ x: this.x, y: this.y, scale: this.scale });\n  }\n\n  /**\n   * Moved hook.\n   */\n  moved({ event, x, y, isDown }: PointerServiceProps) {\n    if (!this.$services.has('ticked')) {\n      this.$services.enable('ticked');\n    }\n\n    this.pointerX = x;\n    this.pointerY = y;\n\n    let { scale } = this.$options;\n\n    if (!event) {\n      this.pointerScale = scale;\n      return;\n    }\n\n    const shouldGrow =\n      (event.target instanceof Element && event.target.matches(this.$options.growSelectors)) ||\n      false;\n    const shouldReduce =\n      isDown ||\n      (event.target instanceof Element && event.target.matches(this.$options.shrinkSelectors)) ||\n      false;\n\n    if (shouldGrow) {\n      scale = this.$options.growTo;\n    }\n\n    if (shouldReduce) {\n      scale = this.$options.shrinkTo;\n    }\n\n    this.pointerScale = scale;\n  }\n\n  /**\n   * RequestAnimationFrame hook.\n   */\n  ticked() {\n    this.x = damp(this.pointerX, this.x, this.$options.translateDampFactor);\n    this.y = damp(this.pointerY, this.y, this.$options.translateDampFactor);\n    this.scale = damp(\n      this.pointerScale,\n      this.scale,\n      this.pointerScale < this.scale\n        ? this.$options.shrinkDampFactor\n        : this.$options.growDampFactor,\n    );\n\n    this.render({ x: this.x, y: this.y, scale: this.scale });\n\n    if (this.x === this.pointerX && this.y === this.pointerY && this.scale === this.pointerScale) {\n      this.$services.disable('ticked');\n    }\n  }\n\n  /**\n   * Render the cursor.\n   */\n  render({ x, y, scale }: { x: number; y: number; scale: number }) {\n    const transform = matrix({\n      translateX: x,\n      translateY: y,\n      scaleX: scale,\n      scaleY: scale,\n    });\n    this.$el.style.transform = `translateZ(0) ${transform}`;\n  }\n}\n"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, PointerServiceProps, BaseProps } from '@studiometa/js-toolkit';\nimport { damp, matrix } from '@studiometa/js-toolkit/utils';\n\nexport interface CursorProps extends BaseProps {\n  $options: {\n    growSelectors: string;\n    shrinkSelectors: string;\n    scale: number;\n    growTo: number;\n    shrinkTo: number;\n    translateDampFactor: number;\n    growDampFactor: number;\n    shrinkDampFactor: number;\n  };\n}\n\n/**\n * Cursor class.\n * @link https://ui.studiometa.dev/components/Cursor/\n */\nexport class Cursor<T extends BaseProps = BaseProps> extends Base<CursorProps & T> {\n  static config: BaseConfig = {\n    name: 'Cursor',\n    options: {\n      growSelectors: {\n        type: String,\n        default: 'a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *',\n      },\n      shrinkSelectors: {\n        type: String,\n        default: '[data-cursor-shrink], [data-cursor-shrink] *',\n      },\n      scale: {\n        type: Number,\n        default: 1,\n      },\n      growTo: {\n        type: Number,\n        default: 2,\n      },\n      shrinkTo: {\n        type: Number,\n        default: 0.5,\n      },\n      translateDampFactor: {\n        type: Number,\n        default: 0.25,\n      },\n      growDampFactor: {\n        type: Number,\n        default: 0.25,\n      },\n      shrinkDampFactor: {\n        type: Number,\n        default: 0.25,\n      },\n    },\n  };\n\n  x = 0;\n\n  y = 0;\n\n  scale = 0;\n\n  pointerX = 0;\n\n  pointerY = 0;\n\n  pointerScale = 0;\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    this.x = 0;\n    this.y = 0;\n    this.scale = 0;\n    this.pointerX = 0;\n    this.pointerY = 0;\n    this.pointerScale = 0;\n    this.render({ x: this.x, y: this.y, scale: this.scale });\n  }\n\n  /**\n   * Moved hook.\n   */\n  moved({ event, x, y, isDown }: PointerServiceProps) {\n    if (!this.$services.has('ticked')) {\n      this.$services.enable('ticked');\n    }\n\n    this.pointerX = x;\n    this.pointerY = y;\n\n    let { scale } = this.$options;\n\n    if (!event) {\n      this.pointerScale = scale;\n      return;\n    }\n\n    const shouldGrow =\n      (event.target instanceof Element && event.target.matches(this.$options.growSelectors)) ||\n      false;\n    const shouldReduce =\n      isDown ||\n      (event.target instanceof Element && event.target.matches(this.$options.shrinkSelectors)) ||\n      false;\n\n    if (shouldGrow) {\n      scale = this.$options.growTo;\n    }\n\n    if (shouldReduce) {\n      scale = this.$options.shrinkTo;\n    }\n\n    this.pointerScale = scale;\n  }\n\n  /**\n   * RequestAnimationFrame hook.\n   */\n  ticked() {\n    this.x = damp(this.pointerX, this.x, this.$options.translateDampFactor);\n    this.y = damp(this.pointerY, this.y, this.$options.translateDampFactor);\n    this.scale = damp(\n      this.pointerScale,\n      this.scale,\n      this.pointerScale < this.scale\n        ? this.$options.shrinkDampFactor\n        : this.$options.growDampFactor,\n    );\n\n    this.render({ x: this.x, y: this.y, scale: this.scale });\n\n    if (this.x === this.pointerX && this.y === this.pointerY && this.scale === this.pointerScale) {\n      this.$services.disable('ticked');\n    }\n  }\n\n  /**\n   * Render the cursor.\n   */\n  render({ x, y, scale }: { x: number; y: number; scale: number }) {\n    const transform = matrix({\n      translateX: x,\n      translateY: y,\n      scaleX: scale,\n      scaleY: scale,\n    });\n    this.$el.style.transform = `translateZ(0) ${transform}`;\n  }\n}\n"],
   "mappings": "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",
   "names": []
 }

package/Data/DataBind.d.ts

@@ -9,7 +9,7 @@ export interface DataBindProps extends BaseProps {
 declare const DataBind_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithGroupInterface, Base<BaseProps>, import("@studiometa/js-toolkit").WithGroupProps>;
 /**
  * DataBind class.
- * @link https://ui.studiometa.dev/-/components/DataBind/
+ * @link https://ui.studiometa.dev/components/DataBind/
  */
 export declare class DataBind<T extends BaseProps = BaseProps> extends DataBind_base<DataBindProps & T> {
     static config: BaseConfig;

package/Data/DataBind.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Data/DataBind.ts"],
-  "sourcesContent": ["import { Base, withGroup } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isArray, nextTick } from '@studiometa/js-toolkit/utils';\nimport { isInput, isCheckbox, isSelect } from './utils.js';\n\nexport interface DataBindProps extends BaseProps {\n  $options: {\n    prop: string;\n    immediate: boolean;\n  };\n}\n\n/**\n * DataBind class.\n * @link https://ui.studiometa.dev/-/components/DataBind/\n */\nexport class DataBind<T extends BaseProps = BaseProps> extends withGroup(Base, 'data:')<DataBindProps & T> {\n  static config: BaseConfig = {\n    name: 'DataBind',\n    options: {\n      prop: String,\n      immediate: Boolean,\n    },\n  };\n\n  /**\n   * @deprecated Use the `$group` getter instead.\n   */\n  get relatedInstances() {\n    return this.$group as Set<this>;\n  }\n\n  get multiple() {\n    return this.$options.group.endsWith('[]');\n  }\n\n  get target() {\n    return this.$el;\n  }\n\n  get prop() {\n    if (this.$options.prop) {\n      return this.$options.prop;\n    }\n\n    const { target } = this;\n    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {\n      switch (target.type) {\n        case 'number':\n          return 'valueAsNumber';\n        case 'date':\n          return 'valueAsDate';\n        default:\n          return 'value';\n      }\n    }\n\n    return 'textContent';\n  }\n\n  get value() {\n    return this.get();\n  }\n\n  set value(value) {\n    this.set(value);\n  }\n\n  get() {\n    const { target, multiple } = this;\n\n    if (isSelect(target)) {\n      if (multiple) {\n        const values = [] as string[];\n        // @ts-ignore\n        for (const option of target.options) {\n          if (option.selected) {\n            values.push(option.value);\n          }\n        }\n\n        return values;\n      }\n\n      const option = target.options.item(target.selectedIndex);\n      return option?.value;\n    }\n\n    if (isCheckbox(target)) {\n      if (multiple) {\n        const values = new Set();\n        for (const instance of this.relatedInstances) {\n          if (isCheckbox(instance.target) && instance.target.checked) {\n            values.add(instance.target.value);\n          }\n        }\n        return Array.from(values);\n      } else {\n        return target.checked;\n      }\n    }\n\n    return target[this.prop];\n  }\n\n  set(value: boolean | string | string[], dispatch = true) {\n    const { target, multiple, relatedInstances } = this;\n\n    if (dispatch) {\n      for (const instance of relatedInstances) {\n        if (instance !== this && instance.value !== value) {\n          instance.set(value, false);\n        }\n      }\n    }\n\n    if (isSelect(target)) {\n      // @ts-ignore\n      for (const option of target.options) {\n        option.selected =\n          multiple && isArray(value) ? value.includes(option.value) : option.value === value;\n      }\n      return;\n    }\n\n    if (isInput(target)) {\n      switch (target.type) {\n        case 'radio':\n          target.checked = target.value === value;\n          return;\n        case 'checkbox':\n          target.checked =\n            multiple && isArray(value) ? value.includes(target.value) : Boolean(value);\n          return;\n      }\n    }\n\n    target[this.prop] = value;\n  }\n\n  mounted() {\n    if (this.$options.immediate) {\n      nextTick().then(() => {\n        this.set(this.get());\n      });\n    }\n  }\n}\n"],
+  "sourcesContent": ["import { Base, withGroup } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isArray, nextTick } from '@studiometa/js-toolkit/utils';\nimport { isInput, isCheckbox, isSelect } from './utils.js';\n\nexport interface DataBindProps extends BaseProps {\n  $options: {\n    prop: string;\n    immediate: boolean;\n  };\n}\n\n/**\n * DataBind class.\n * @link https://ui.studiometa.dev/components/DataBind/\n */\nexport class DataBind<T extends BaseProps = BaseProps> extends withGroup(Base, 'data:')<DataBindProps & T> {\n  static config: BaseConfig = {\n    name: 'DataBind',\n    options: {\n      prop: String,\n      immediate: Boolean,\n    },\n  };\n\n  /**\n   * @deprecated Use the `$group` getter instead.\n   */\n  get relatedInstances() {\n    return this.$group as Set<this>;\n  }\n\n  get multiple() {\n    return this.$options.group.endsWith('[]');\n  }\n\n  get target() {\n    return this.$el;\n  }\n\n  get prop() {\n    if (this.$options.prop) {\n      return this.$options.prop;\n    }\n\n    const { target } = this;\n    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {\n      switch (target.type) {\n        case 'number':\n          return 'valueAsNumber';\n        case 'date':\n          return 'valueAsDate';\n        default:\n          return 'value';\n      }\n    }\n\n    return 'textContent';\n  }\n\n  get value() {\n    return this.get();\n  }\n\n  set value(value) {\n    this.set(value);\n  }\n\n  get() {\n    const { target, multiple } = this;\n\n    if (isSelect(target)) {\n      if (multiple) {\n        const values = [] as string[];\n        // @ts-ignore\n        for (const option of target.options) {\n          if (option.selected) {\n            values.push(option.value);\n          }\n        }\n\n        return values;\n      }\n\n      const option = target.options.item(target.selectedIndex);\n      return option?.value;\n    }\n\n    if (isCheckbox(target)) {\n      if (multiple) {\n        const values = new Set();\n        for (const instance of this.relatedInstances) {\n          if (isCheckbox(instance.target) && instance.target.checked) {\n            values.add(instance.target.value);\n          }\n        }\n        return Array.from(values);\n      } else {\n        return target.checked;\n      }\n    }\n\n    return target[this.prop];\n  }\n\n  set(value: boolean | string | string[], dispatch = true) {\n    const { target, multiple, relatedInstances } = this;\n\n    if (dispatch) {\n      for (const instance of relatedInstances) {\n        if (instance !== this && instance.value !== value) {\n          instance.set(value, false);\n        }\n      }\n    }\n\n    if (isSelect(target)) {\n      // @ts-ignore\n      for (const option of target.options) {\n        option.selected =\n          multiple && isArray(value) ? value.includes(option.value) : option.value === value;\n      }\n      return;\n    }\n\n    if (isInput(target)) {\n      switch (target.type) {\n        case 'radio':\n          target.checked = target.value === value;\n          return;\n        case 'checkbox':\n          target.checked =\n            multiple && isArray(value) ? value.includes(target.value) : Boolean(value);\n          return;\n      }\n    }\n\n    target[this.prop] = value;\n  }\n\n  mounted() {\n    if (this.$options.immediate) {\n      nextTick().then(() => {\n        this.set(this.get());\n      });\n    }\n  }\n}\n"],
   "mappings": "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",
   "names": ["option"]
 }

package/Draggable/Draggable.d.ts

@@ -17,7 +17,7 @@ export interface DraggableProps extends BaseProps {
 declare const Draggable_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").BaseInterface, Base<BaseProps>>;
 /**
  * Draggable class.
- * @link https://ui.studiometa.dev/-/components/Draggable/
+ * @link https://ui.studiometa.dev/components/Draggable/
  */
 export declare class Draggable<T extends BaseProps = BaseProps> extends Draggable_base<T & DraggableProps> {
     /**

package/Draggable/Draggable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Draggable/Draggable.ts"],
-  "sourcesContent": ["import { Base, withDrag } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport {\n  clamp,\n  damp,\n  domScheduler,\n  getOffsetSizes,\n  map,\n  transform,\n} from '@studiometa/js-toolkit/utils';\n\nexport interface DraggableProps extends BaseProps {\n  $refs: {\n    target: HTMLElement;\n  };\n  $options: {\n    x: boolean;\n    y: boolean;\n    fitBounds: boolean;\n    strictFitBounds: boolean;\n    sensitivity: number;\n    dropSensitivity: number;\n    margin: string;\n  };\n}\n\n/**\n * Draggable class.\n * @link https://ui.studiometa.dev/-/components/Draggable/\n */\nexport class Draggable<T extends BaseProps = BaseProps> extends withDrag(Base, {\n  // @ts-expect-error draggable is instance of Draggable.\n  target: (draggable) => draggable.target,\n})<T & DraggableProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Draggable',\n    refs: ['target'],\n    emits: [\n      'drag-start',\n      'drag-drag',\n      'drag-drop',\n      'drag-inertia',\n      'drag-stop',\n      'drag-fit',\n      'drag-render',\n    ],\n    options: {\n      x: {\n        type: Boolean,\n        default: true,\n      },\n      y: {\n        type: Boolean,\n        default: true,\n      },\n      fitBounds: Boolean,\n      strictFitBounds: Boolean,\n      sensitivity: { type: Number, default: 0.5 },\n      dropSensitivity: { type: Number, default: 0.1 },\n      margin: { type: String, default: '0' },\n    },\n  };\n\n  /**\n   * Props for the target position.\n   */\n  props = {\n    x: 0,\n    y: 0,\n    progressX: 0,\n    progressY: 0,\n    originX: 0,\n    originY: 0,\n    dampedX: 0,\n    dampedY: 0,\n  };\n\n  /**\n   * Smooth factor.\n   */\n  dampFactor = 0.5;\n\n  /**\n   * The draggable element, defaults to `this.$refs.target`.\n   */\n  get target(): HTMLElement {\n    return this.$refs.target;\n  }\n\n  /**\n   * The bouding element, defaults to `this.$el`.\n   */\n  get parent(): HTMLElement {\n    return this.$el;\n  }\n\n  /**\n   * Draggable area bounds.\n   * @private Use the `bounds` getter instead.\n   */\n  __bounds: {\n    yMin: number;\n    yMax: number;\n    xMin: number;\n    xMax: number;\n  };\n\n  /**\n   * Cached margin values.\n   * @private\n   */\n  __margin: { top: number; right: number; bottom: number; left: number };\n\n  /**\n   * Cached margin option for invalidation.\n   * @private\n   */\n  __marginOption: string;\n\n  /**\n   * Offset from the bounds.\n   */\n  get margin() {\n    const marginOption = this.$options.margin;\n\n    if (this.__margin && this.__marginOption === marginOption) {\n      return this.__margin;\n    }\n\n    const values = marginOption.split(' ').map(Number);\n    let [top = 0] = values;\n    let right = top;\n    let bottom = top;\n    let left = top;\n\n    switch (values.length) {\n      case 4:\n        [top, right, bottom, left] = values;\n        break;\n      case 3:\n        [top, right, bottom] = values;\n        left = right;\n        break;\n      case 2:\n        [top, right] = values;\n        left = right;\n        bottom = top;\n        break;\n    }\n\n    this.__margin = { top, right, bottom, left };\n    this.__marginOption = marginOption;\n\n    return this.__margin;\n  }\n\n  /**\n   * Draggable area bounds.\n   */\n  get bounds() {\n    if (!this.__bounds) {\n      const { target, parent, margin } = this;\n      const targetSizes = getOffsetSizes(target);\n      const parentSizes = getOffsetSizes(parent);\n      const xMin = targetSizes.x - parentSizes.x;\n      const yMin = targetSizes.y - parentSizes.y;\n      const xMax = xMin + targetSizes.width - parentSizes.width;\n      const yMax = yMin + targetSizes.height - parentSizes.height;\n\n      this.__bounds = {\n        yMin: (yMin - margin.top) * -1,\n        yMax: (yMax + margin.bottom) * -1,\n        xMin: (xMin - margin.left) * -1,\n        xMax: (xMax + margin.right) * -1,\n      };\n    }\n\n    return this.__bounds;\n  }\n\n  /**\n   * Resized hook.\n   * Reset bounds on resize.\n   */\n  resized() {\n    this.__bounds = null;\n  }\n\n  /**\n   * Drag service hook.\n   */\n  dragged(props: DragServiceProps) {\n    this.$emit(`drag-${props.mode}`, this.props);\n    const { fitBounds, strictFitBounds, sensitivity, dropSensitivity } = this.$options;\n    const { bounds } = this;\n\n    if (props.mode === props.MODES.START) {\n      this.props.originX = this.props.x;\n      this.props.originY = this.props.y;\n      this.dampFactor = sensitivity;\n      this.render();\n    } else if (\n      props.mode === props.MODES.DRAG ||\n      (props.mode === props.MODES.INERTIA && !fitBounds)\n    ) {\n      this.props.x = this.props.originX + props.x - props.origin.x;\n      this.props.y = this.props.originY + props.y - props.origin.y;\n\n      if (strictFitBounds) {\n        this.props.x = clamp(this.props.x, bounds.xMin, bounds.xMax);\n        this.props.y = clamp(this.props.y, bounds.yMin, bounds.yMax);\n      }\n\n      this.render();\n    } else if (props.mode === props.MODES.DROP && fitBounds) {\n      this.props.x = clamp(\n        this.props.originX + props.final.x - props.origin.x,\n        bounds.xMin,\n        bounds.xMax,\n      );\n      this.props.y = clamp(\n        this.props.originY + props.final.y - props.origin.y,\n        bounds.yMin,\n        bounds.yMax,\n      );\n      this.dampFactor = dropSensitivity;\n      this.$services.enable('ticked');\n    }\n  }\n\n  ticked() {\n    this.$emit(`drag-inertia`, this.props);\n    this.render();\n    if (this.props.dampedX === this.props.x && this.props.dampedY === this.props.y) {\n      this.$services.disable('ticked');\n      this.$emit('drag-fit', this.props);\n    }\n  }\n\n  render() {\n    const { props } = this;\n    props.dampedX = damp(props.x, props.dampedX, this.dampFactor);\n    props.dampedY = damp(props.y, props.dampedY, this.dampFactor);\n\n    domScheduler.read(() => {\n      const { bounds } = this;\n      const { x, y } = this.$options;\n\n      domScheduler.write(() => {\n        props.progressX = map(props.x, bounds.xMin, bounds.xMax, 0, 1);\n        props.progressY = map(props.y, bounds.yMin, bounds.yMax, 0, 1);\n\n        transform(this.target, {\n          x: x ? props.dampedX : 0,\n          y: y ? props.dampedY : 0,\n        });\n\n        this.$emit('drag-render', this.props);\n      });\n    });\n  }\n}\n"],
+  "sourcesContent": ["import { Base, withDrag } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport {\n  clamp,\n  damp,\n  domScheduler,\n  getOffsetSizes,\n  map,\n  transform,\n} from '@studiometa/js-toolkit/utils';\n\nexport interface DraggableProps extends BaseProps {\n  $refs: {\n    target: HTMLElement;\n  };\n  $options: {\n    x: boolean;\n    y: boolean;\n    fitBounds: boolean;\n    strictFitBounds: boolean;\n    sensitivity: number;\n    dropSensitivity: number;\n    margin: string;\n  };\n}\n\n/**\n * Draggable class.\n * @link https://ui.studiometa.dev/components/Draggable/\n */\nexport class Draggable<T extends BaseProps = BaseProps> extends withDrag(Base, {\n  // @ts-expect-error draggable is instance of Draggable.\n  target: (draggable) => draggable.target,\n})<T & DraggableProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Draggable',\n    refs: ['target'],\n    emits: [\n      'drag-start',\n      'drag-drag',\n      'drag-drop',\n      'drag-inertia',\n      'drag-stop',\n      'drag-fit',\n      'drag-render',\n    ],\n    options: {\n      x: {\n        type: Boolean,\n        default: true,\n      },\n      y: {\n        type: Boolean,\n        default: true,\n      },\n      fitBounds: Boolean,\n      strictFitBounds: Boolean,\n      sensitivity: { type: Number, default: 0.5 },\n      dropSensitivity: { type: Number, default: 0.1 },\n      margin: { type: String, default: '0' },\n    },\n  };\n\n  /**\n   * Props for the target position.\n   */\n  props = {\n    x: 0,\n    y: 0,\n    progressX: 0,\n    progressY: 0,\n    originX: 0,\n    originY: 0,\n    dampedX: 0,\n    dampedY: 0,\n  };\n\n  /**\n   * Smooth factor.\n   */\n  dampFactor = 0.5;\n\n  /**\n   * The draggable element, defaults to `this.$refs.target`.\n   */\n  get target(): HTMLElement {\n    return this.$refs.target;\n  }\n\n  /**\n   * The bouding element, defaults to `this.$el`.\n   */\n  get parent(): HTMLElement {\n    return this.$el;\n  }\n\n  /**\n   * Draggable area bounds.\n   * @private Use the `bounds` getter instead.\n   */\n  __bounds: {\n    yMin: number;\n    yMax: number;\n    xMin: number;\n    xMax: number;\n  };\n\n  /**\n   * Cached margin values.\n   * @private\n   */\n  __margin: { top: number; right: number; bottom: number; left: number };\n\n  /**\n   * Cached margin option for invalidation.\n   * @private\n   */\n  __marginOption: string;\n\n  /**\n   * Offset from the bounds.\n   */\n  get margin() {\n    const marginOption = this.$options.margin;\n\n    if (this.__margin && this.__marginOption === marginOption) {\n      return this.__margin;\n    }\n\n    const values = marginOption.split(' ').map(Number);\n    let [top = 0] = values;\n    let right = top;\n    let bottom = top;\n    let left = top;\n\n    switch (values.length) {\n      case 4:\n        [top, right, bottom, left] = values;\n        break;\n      case 3:\n        [top, right, bottom] = values;\n        left = right;\n        break;\n      case 2:\n        [top, right] = values;\n        left = right;\n        bottom = top;\n        break;\n    }\n\n    this.__margin = { top, right, bottom, left };\n    this.__marginOption = marginOption;\n\n    return this.__margin;\n  }\n\n  /**\n   * Draggable area bounds.\n   */\n  get bounds() {\n    if (!this.__bounds) {\n      const { target, parent, margin } = this;\n      const targetSizes = getOffsetSizes(target);\n      const parentSizes = getOffsetSizes(parent);\n      const xMin = targetSizes.x - parentSizes.x;\n      const yMin = targetSizes.y - parentSizes.y;\n      const xMax = xMin + targetSizes.width - parentSizes.width;\n      const yMax = yMin + targetSizes.height - parentSizes.height;\n\n      this.__bounds = {\n        yMin: (yMin - margin.top) * -1,\n        yMax: (yMax + margin.bottom) * -1,\n        xMin: (xMin - margin.left) * -1,\n        xMax: (xMax + margin.right) * -1,\n      };\n    }\n\n    return this.__bounds;\n  }\n\n  /**\n   * Resized hook.\n   * Reset bounds on resize.\n   */\n  resized() {\n    this.__bounds = null;\n  }\n\n  /**\n   * Drag service hook.\n   */\n  dragged(props: DragServiceProps) {\n    this.$emit(`drag-${props.mode}`, this.props);\n    const { fitBounds, strictFitBounds, sensitivity, dropSensitivity } = this.$options;\n    const { bounds } = this;\n\n    if (props.mode === props.MODES.START) {\n      this.props.originX = this.props.x;\n      this.props.originY = this.props.y;\n      this.dampFactor = sensitivity;\n      this.render();\n    } else if (\n      props.mode === props.MODES.DRAG ||\n      (props.mode === props.MODES.INERTIA && !fitBounds)\n    ) {\n      this.props.x = this.props.originX + props.x - props.origin.x;\n      this.props.y = this.props.originY + props.y - props.origin.y;\n\n      if (strictFitBounds) {\n        this.props.x = clamp(this.props.x, bounds.xMin, bounds.xMax);\n        this.props.y = clamp(this.props.y, bounds.yMin, bounds.yMax);\n      }\n\n      this.render();\n    } else if (props.mode === props.MODES.DROP && fitBounds) {\n      this.props.x = clamp(\n        this.props.originX + props.final.x - props.origin.x,\n        bounds.xMin,\n        bounds.xMax,\n      );\n      this.props.y = clamp(\n        this.props.originY + props.final.y - props.origin.y,\n        bounds.yMin,\n        bounds.yMax,\n      );\n      this.dampFactor = dropSensitivity;\n      this.$services.enable('ticked');\n    }\n  }\n\n  ticked() {\n    this.$emit(`drag-inertia`, this.props);\n    this.render();\n    if (this.props.dampedX === this.props.x && this.props.dampedY === this.props.y) {\n      this.$services.disable('ticked');\n      this.$emit('drag-fit', this.props);\n    }\n  }\n\n  render() {\n    const { props } = this;\n    props.dampedX = damp(props.x, props.dampedX, this.dampFactor);\n    props.dampedY = damp(props.y, props.dampedY, this.dampFactor);\n\n    domScheduler.read(() => {\n      const { bounds } = this;\n      const { x, y } = this.$options;\n\n      domScheduler.write(() => {\n        props.progressX = map(props.x, bounds.xMin, bounds.xMax, 0, 1);\n        props.progressY = map(props.y, bounds.yMin, bounds.yMax, 0, 1);\n\n        transform(this.target, {\n          x: x ? props.dampedX : 0,\n          y: y ? props.dampedY : 0,\n        });\n\n        this.$emit('drag-render', this.props);\n      });\n    });\n  }\n}\n"],
   "mappings": "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",
   "names": []
 }

package/Fetch/Fetch.d.ts

@@ -20,7 +20,7 @@ export type FetchConstructor<T extends Fetch = Fetch> = {
 } & Pick<typeof Fetch, keyof typeof Fetch>;
 /**
  * Fetch class.
- * @link https://ui.studiometa.dev/-/components/Fetch/
+ * @link https://ui.studiometa.dev/components/Fetch/
  */
 export declare class Fetch<T extends BaseProps = BaseProps> extends Base<T & FetchProps> implements BaseInterface {
     /**

package/Fetch/Fetch.js.map

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

package/Figure/Figure.d.ts

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

package/Figure/Figure.js.map

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

package/Figure/FigureShopify.d.ts

@@ -9,7 +9,7 @@ export interface FigureShopifyProps extends BaseProps {
  * FigureShopify class.
  *
  * Manager lazyloading image sources.
- * @link https://ui.studiometa.dev/-/components/FigureShopify/
+ * @link https://ui.studiometa.dev/components/FigureShopify/
  */
 export declare class FigureShopify<T extends BaseProps = BaseProps> extends AbstractFigureDynamic<T & FigureShopifyProps> {
     /**

package/Figure/FigureShopify.js.map

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

package/Figure/FigureTwicpics.d.ts

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

package/Figure/FigureTwicpics.js.map

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

package/FigureVideo/FigureVideo.d.ts

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

package/FigureVideo/FigureVideo.js.map

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

package/FigureVideo/FigureVideoTwicpics.d.ts

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

package/FigureVideo/FigureVideoTwicpics.js.map

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

package/Frame/Frame.d.ts

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