@studiometa/js-toolkit 2.12.0 → 3.0.0-alpha.1

package/decorators/withMountWhenInView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withMountWhenInView.ts"],
-  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithMountWhenInViewProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n}\n\nexport interface WithMountWhenInViewInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __isVisible: boolean;\n  /**\n   * @private\n   */\n  __observer: IntersectionObserver;\n  $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountWhenInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: [0, 1] },\n): BaseDecorator<WithMountWhenInViewInterface, S, WithMountWhenInViewProps> {\n  /**\n   * Class.\n   */\n  class WithMountWhenInView<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithMountWhenInViewProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        intersectionObserver: Object,\n      },\n    };\n\n    /**\n     * Is the component visible?\n     *\n     * @private\n     */\n    __isVisible = false;\n\n    /**\n     * The component's observer.\n     *\n     * @private\n     */\n    __observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.__observer = new IntersectionObserver(\n        (entries) => {\n          const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);\n          if (this.__isVisible !== isVisible) {\n            this.__isVisible = isVisible;\n\n            if (isVisible) {\n              this.$mount();\n            } else {\n              setTimeout(() => this.$destroy());\n            }\n          }\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options as typeof this.$options & WithMountWhenInViewProps['$options'])\n            .intersectionObserver,\n        },\n      );\n\n      this.__observer.observe(this.$el);\n\n      this.$on('terminated', () => {\n        this.__observer.disconnect();\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    $mount() {\n      if (this.__isVisible) {\n        super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountWhenInView;\n}\n"],
-  "mappings": "AAwBO,SAAS,oBACd,WAEA,iBAA2C,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,GACW;AAAA,EAI1E,MAAM,4BAA6D,UAEjE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,sBAAsB;AAAA,MACxB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,aAAa,IAAI;AAAA,QACpB,CAAC,YAAY;AACX,gBAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,UAAU,OAAO,MAAM,gBAAgB,KAAK;AACnF,cAAI,KAAK,gBAAgB,WAAW;AAClC,iBAAK,cAAc;AAEnB,gBAAI,WAAW;AACb,mBAAK,OAAO;AAAA,YACd,OAAO;AACL,yBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SACN;AAAA,QACL;AAAA,MACF;AAEA,WAAK,WAAW,QAAQ,KAAK,GAAG;AAEhC,WAAK,IAAI,cAAc,MAAM;AAC3B,aAAK,WAAW,WAAW;AAAA,MAC7B,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,aAAa;AACpB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithMountWhenInViewProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n}\n\nexport interface WithMountWhenInViewInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __isVisible: boolean;\n  /**\n   * @private\n   */\n  __observer: IntersectionObserver;\n  $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountWhenInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: [0, 1] },\n): BaseDecorator<WithMountWhenInViewInterface, S, WithMountWhenInViewProps> {\n  /**\n   * Class.\n   */\n  class WithMountWhenInView<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithMountWhenInViewProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      options: {\n        ...BaseClass.config?.options,\n        intersectionObserver: Object,\n      },\n    };\n\n    /**\n     * Is the component visible?\n     *\n     * @private\n     */\n    __isVisible = false;\n\n    /**\n     * The component's observer.\n     *\n     * @private\n     */\n    __observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.__observer = new IntersectionObserver(\n        (entries) => {\n          const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);\n          if (this.__isVisible !== isVisible) {\n            this.__isVisible = isVisible;\n\n            if (isVisible) {\n              this.$mount();\n            } else {\n              setTimeout(() => this.$destroy());\n            }\n          }\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options as typeof this.$options & WithMountWhenInViewProps['$options'])\n            .intersectionObserver,\n        },\n      );\n\n      this.__observer.observe(this.$el);\n\n      this.$on('terminated', () => {\n        this.__observer.disconnect();\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    $mount() {\n      if (this.__isVisible) {\n        super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountWhenInView;\n}\n"],
+  "mappings": "AAwBO,SAAS,oBACd,WAEA,iBAA2C,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,GACW;AAAA,EAI1E,MAAM,4BAA6D,UAEjE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,SAAS;AAAA,QACP,GAAG,UAAU,QAAQ;AAAA,QACrB,sBAAsB;AAAA,MACxB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,aAAa,IAAI;AAAA,QACpB,CAAC,YAAY;AACX,gBAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,UAAU,OAAO,MAAM,gBAAgB,KAAK;AACnF,cAAI,KAAK,gBAAgB,WAAW;AAClC,iBAAK,cAAc;AAEnB,gBAAI,WAAW;AACb,mBAAK,OAAO;AAAA,YACd,OAAO;AACL,yBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SACN;AAAA,QACL;AAAA,MACF;AAEA,WAAK,WAAW,QAAQ,KAAK,GAAG;AAEhC,WAAK,IAAI,cAAc,MAAM;AAC3B,aAAK,WAAW,WAAW;AAAA,MAC7B,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,aAAa;AACpB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withScrolledInView/utils.d.ts

@@ -11,7 +11,18 @@ export declare function parseNamedOffset(offset: string | number): string | numb
  * Get an edge value given a start, size and offset value.
  */
 export declare function getEdgeWithOffset(start: number, size: number, offset: string | number): number;
+type HorizontalOnlyRect = {
+    x: number;
+    width: number;
+};
+type VerticalOnlyRect = {
+    y: number;
+    height: number;
+};
+type HorizontalRect = HorizontalOnlyRect & Partial<VerticalOnlyRect>;
+type VerticalRect = Partial<HorizontalOnlyRect> & VerticalOnlyRect;
 /**
  * Get starting and ending edges for a given axis, a target sizings, a container sizings and their offset.
  */
-export declare function getEdges(axis: 'x' | 'y', targetSizes: any, containerSizes: any, offset: any): [number, number];
+export declare function getEdges<T extends 'x' | 'y'>(axis: T, targetSizes: T extends 'x' ? HorizontalRect : VerticalRect, containerSizes: T extends 'x' ? HorizontalRect : VerticalRect, offset: NormalizedOffset): [number, number];
+export {};

package/decorators/withScrolledInView/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/decorators/withScrolledInView/utils.ts"],
-  "sourcesContent": ["import { isNumber, isString, endsWith } from '../../utils/index.js';\nimport type { NormalizedOffset } from './types.js';\n\nconst units = {\n  px: 'px',\n  vh: 'vh',\n  vw: 'vw',\n  vmin: 'vmin',\n  vmax: 'vmax',\n  percent: '%',\n};\n\nconst namedOffsets = {\n  start: 0,\n  center: 0.5,\n  end: 1,\n};\n\n/**\n * Normalize offset input.\n */\nexport function normalizeOffset(offsets: string): NormalizedOffset {\n  return offsets\n    .split('/')\n    .map((offset) => offset.trim().split(' ').slice(0, 2)) as NormalizedOffset;\n}\n\n/**\n * Parse the given offset.\n */\nexport function parseNamedOffset(offset: string | number): string | number {\n  if (isNumber(offset)) {\n    return offset;\n  }\n\n  if (isNumber(namedOffsets[offset])) {\n    return namedOffsets[offset];\n  }\n\n  if (isNumber(Number(offset))) {\n    return Number(offset);\n  }\n\n  if (isString(offset) && endsWith(offset, units.percent)) {\n    return Number.parseFloat(offset) / 100;\n  }\n\n  return offset;\n}\n\n/**\n * Get an edge value given a start, size and offset value.\n */\nexport function getEdgeWithOffset(start: number, size: number, offset: string | number): number {\n  if (isNumber(offset)) {\n    return start + size * offset;\n  }\n\n  const parsedNamedOffset = parseNamedOffset(offset);\n  if (isNumber(parsedNamedOffset)) {\n    return start + size * parsedNamedOffset;\n  }\n\n  if (isString(parsedNamedOffset)) {\n    const parsedOffset = Number.parseFloat(parsedNamedOffset);\n\n    if (endsWith(parsedNamedOffset, units.px)) {\n      return start + parsedOffset;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vh)) {\n      return start + (parsedOffset * window.innerHeight) / 100;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vw)) {\n      return start + (parsedOffset * window.innerWidth) / 100;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vmin)) {\n      return start + (parsedOffset * Math.min(window.innerWidth, window.innerHeight)) / 100;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vmax)) {\n      return start + (parsedOffset * Math.max(window.innerWidth, window.innerHeight)) / 100;\n    }\n  }\n\n  return start;\n}\n\n/**\n * Get starting and ending edges for a given axis, a target sizings, a container sizings and their offset.\n */\nexport function getEdges(axis: 'x' | 'y', targetSizes, containerSizes, offset): [number, number] {\n  const sizeKey = axis === 'x' ? 'width' : 'height';\n  const targetStart = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[0][0]);\n  const containerStart = getEdgeWithOffset(0, containerSizes[sizeKey], offset[0][1]);\n  const targetEnd = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[1][0]);\n  const containerEnd = getEdgeWithOffset(0, containerSizes[sizeKey], offset[1][1]);\n  const start = targetStart - containerStart;\n  const end = targetEnd - containerEnd;\n\n  return [start, end];\n}\n"],
-  "mappings": "AAAA,SAAS,UAAU,UAAU,gBAAgB;AAG7C,MAAM,QAAQ;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,eAAe;AAAA,EACnB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAKO,SAAS,gBAAgB,SAAmC;AACjE,SAAO,QACJ,MAAM,GAAG,EACT,IAAI,CAAC,WAAW,OAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;AACzD;AAKO,SAAS,iBAAiB,QAA0C;AACzE,MAAI,SAAS,MAAM,GAAG;AACpB,WAAO;AAAA,EACT;AAEA,MAAI,SAAS,aAAa,MAAM,CAAC,GAAG;AAClC,WAAO,aAAa,MAAM;AAAA,EAC5B;AAEA,MAAI,SAAS,OAAO,MAAM,CAAC,GAAG;AAC5B,WAAO,OAAO,MAAM;AAAA,EACtB;AAEA,MAAI,SAAS,MAAM,KAAK,SAAS,QAAQ,MAAM,OAAO,GAAG;AACvD,WAAO,OAAO,WAAW,MAAM,IAAI;AAAA,EACrC;AAEA,SAAO;AACT;AAKO,SAAS,kBAAkB,OAAe,MAAc,QAAiC;AAC9F,MAAI,SAAS,MAAM,GAAG;AACpB,WAAO,QAAQ,OAAO;AAAA,EACxB;AAEA,QAAM,oBAAoB,iBAAiB,MAAM;AACjD,MAAI,SAAS,iBAAiB,GAAG;AAC/B,WAAO,QAAQ,OAAO;AAAA,EACxB;AAEA,MAAI,SAAS,iBAAiB,GAAG;AAC/B,UAAM,eAAe,OAAO,WAAW,iBAAiB;AAExD,QAAI,SAAS,mBAAmB,MAAM,EAAE,GAAG;AACzC,aAAO,QAAQ;AAAA,IACjB;AAEA,QAAI,SAAS,mBAAmB,MAAM,EAAE,GAAG;AACzC,aAAO,QAAS,eAAe,OAAO,cAAe;AAAA,IACvD;AAEA,QAAI,SAAS,mBAAmB,MAAM,EAAE,GAAG;AACzC,aAAO,QAAS,eAAe,OAAO,aAAc;AAAA,IACtD;AAEA,QAAI,SAAS,mBAAmB,MAAM,IAAI,GAAG;AAC3C,aAAO,QAAS,eAAe,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAAA,IACpF;AAEA,QAAI,SAAS,mBAAmB,MAAM,IAAI,GAAG;AAC3C,aAAO,QAAS,eAAe,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAAA,IACpF;AAAA,EACF;AAEA,SAAO;AACT;AAKO,SAAS,SAAS,MAAiB,aAAa,gBAAgB,QAA0B;AAC/F,QAAM,UAAU,SAAS,MAAM,UAAU;AACzC,QAAM,cAAc,kBAAkB,YAAY,IAAI,GAAG,YAAY,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AAC3F,QAAM,iBAAiB,kBAAkB,GAAG,eAAe,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AACjF,QAAM,YAAY,kBAAkB,YAAY,IAAI,GAAG,YAAY,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AACzF,QAAM,eAAe,kBAAkB,GAAG,eAAe,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AAC/E,QAAM,QAAQ,cAAc;AAC5B,QAAM,MAAM,YAAY;AAExB,SAAO,CAAC,OAAO,GAAG;AACpB;",
+  "sourcesContent": ["import { isNumber, isString, endsWith } from '../../utils/index.js';\nimport type { NormalizedOffset } from './types.js';\n\nconst units = {\n  px: 'px',\n  vh: 'vh',\n  vw: 'vw',\n  vmin: 'vmin',\n  vmax: 'vmax',\n  percent: '%',\n};\n\nconst namedOffsets = {\n  start: 0,\n  center: 0.5,\n  end: 1,\n};\n\n/**\n * Normalize offset input.\n */\nexport function normalizeOffset(offsets: string): NormalizedOffset {\n  return offsets\n    .split('/')\n    .map((offset) => offset.trim().split(' ').slice(0, 2)) as NormalizedOffset;\n}\n\n/**\n * Parse the given offset.\n */\nexport function parseNamedOffset(offset: string | number): string | number {\n  if (isNumber(offset)) {\n    return offset;\n  }\n\n  if (isNumber(namedOffsets[offset])) {\n    return namedOffsets[offset];\n  }\n\n  if (isNumber(Number(offset))) {\n    return Number(offset);\n  }\n\n  if (isString(offset) && endsWith(offset, units.percent)) {\n    return Number.parseFloat(offset) / 100;\n  }\n\n  return offset;\n}\n\n/**\n * Get an edge value given a start, size and offset value.\n */\nexport function getEdgeWithOffset(start: number, size: number, offset: string | number): number {\n  if (isNumber(offset)) {\n    return start + size * offset;\n  }\n\n  const parsedNamedOffset = parseNamedOffset(offset);\n  if (isNumber(parsedNamedOffset)) {\n    return start + size * parsedNamedOffset;\n  }\n\n  if (isString(parsedNamedOffset)) {\n    const parsedOffset = Number.parseFloat(parsedNamedOffset);\n\n    if (endsWith(parsedNamedOffset, units.px)) {\n      return start + parsedOffset;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vh)) {\n      return start + (parsedOffset * window.innerHeight) / 100;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vw)) {\n      return start + (parsedOffset * window.innerWidth) / 100;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vmin)) {\n      return start + (parsedOffset * Math.min(window.innerWidth, window.innerHeight)) / 100;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vmax)) {\n      return start + (parsedOffset * Math.max(window.innerWidth, window.innerHeight)) / 100;\n    }\n  }\n\n  return start;\n}\n\ntype HorizontalOnlyRect = {\n  x: number;\n  width: number;\n};\n\ntype VerticalOnlyRect = {\n  y: number;\n  height: number;\n};\n\ntype HorizontalRect = HorizontalOnlyRect & Partial<VerticalOnlyRect>;\ntype VerticalRect = Partial<HorizontalOnlyRect> & VerticalOnlyRect;\n\n/**\n * Get starting and ending edges for a given axis, a target sizings, a container sizings and their offset.\n */\nexport function getEdges<T extends 'x' | 'y'>(\n  axis: T,\n  targetSizes: T extends 'x' ? HorizontalRect : VerticalRect,\n  containerSizes: T extends 'x' ? HorizontalRect : VerticalRect,\n  offset: NormalizedOffset,\n): [number, number] {\n  const sizeKey = axis === 'x' ? 'width' : 'height';\n  const targetStart = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[0][0]);\n  const containerStart = getEdgeWithOffset(0, containerSizes[sizeKey], offset[0][1]);\n  const targetEnd = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[1][0]);\n  const containerEnd = getEdgeWithOffset(0, containerSizes[sizeKey], offset[1][1]);\n  const start = targetStart - containerStart;\n  const end = targetEnd - containerEnd;\n\n  return [start, end];\n}\n"],
+  "mappings": "AAAA,SAAS,UAAU,UAAU,gBAAgB;AAG7C,MAAM,QAAQ;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,eAAe;AAAA,EACnB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAKO,SAAS,gBAAgB,SAAmC;AACjE,SAAO,QACJ,MAAM,GAAG,EACT,IAAI,CAAC,WAAW,OAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;AACzD;AAKO,SAAS,iBAAiB,QAA0C;AACzE,MAAI,SAAS,MAAM,GAAG;AACpB,WAAO;AAAA,EACT;AAEA,MAAI,SAAS,aAAa,MAAM,CAAC,GAAG;AAClC,WAAO,aAAa,MAAM;AAAA,EAC5B;AAEA,MAAI,SAAS,OAAO,MAAM,CAAC,GAAG;AAC5B,WAAO,OAAO,MAAM;AAAA,EACtB;AAEA,MAAI,SAAS,MAAM,KAAK,SAAS,QAAQ,MAAM,OAAO,GAAG;AACvD,WAAO,OAAO,WAAW,MAAM,IAAI;AAAA,EACrC;AAEA,SAAO;AACT;AAKO,SAAS,kBAAkB,OAAe,MAAc,QAAiC;AAC9F,MAAI,SAAS,MAAM,GAAG;AACpB,WAAO,QAAQ,OAAO;AAAA,EACxB;AAEA,QAAM,oBAAoB,iBAAiB,MAAM;AACjD,MAAI,SAAS,iBAAiB,GAAG;AAC/B,WAAO,QAAQ,OAAO;AAAA,EACxB;AAEA,MAAI,SAAS,iBAAiB,GAAG;AAC/B,UAAM,eAAe,OAAO,WAAW,iBAAiB;AAExD,QAAI,SAAS,mBAAmB,MAAM,EAAE,GAAG;AACzC,aAAO,QAAQ;AAAA,IACjB;AAEA,QAAI,SAAS,mBAAmB,MAAM,EAAE,GAAG;AACzC,aAAO,QAAS,eAAe,OAAO,cAAe;AAAA,IACvD;AAEA,QAAI,SAAS,mBAAmB,MAAM,EAAE,GAAG;AACzC,aAAO,QAAS,eAAe,OAAO,aAAc;AAAA,IACtD;AAEA,QAAI,SAAS,mBAAmB,MAAM,IAAI,GAAG;AAC3C,aAAO,QAAS,eAAe,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAAA,IACpF;AAEA,QAAI,SAAS,mBAAmB,MAAM,IAAI,GAAG;AAC3C,aAAO,QAAS,eAAe,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAAA,IACpF;AAAA,EACF;AAEA,SAAO;AACT;AAkBO,SAAS,SACd,MACA,aACA,gBACA,QACkB;AAClB,QAAM,UAAU,SAAS,MAAM,UAAU;AACzC,QAAM,cAAc,kBAAkB,YAAY,IAAI,GAAG,YAAY,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AAC3F,QAAM,iBAAiB,kBAAkB,GAAG,eAAe,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AACjF,QAAM,YAAY,kBAAkB,YAAY,IAAI,GAAG,YAAY,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AACzF,QAAM,eAAe,kBAAkB,GAAG,eAAe,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AAC/E,QAAM,QAAQ,cAAc;AAC5B,QAAM,MAAM,YAAY;AAExB,SAAO,CAAC,OAAO,GAAG;AACpB;",
   "names": []
 }

package/decorators/withScrolledInView/withScrolledInView.js

@@ -16,7 +16,7 @@ function updateProgress(props, axis, progressKey, currentKey) {
 }
 function updateProps(props, dampFactor, dampPrecision, axis = "x") {
   props.current[axis] = clamp(
-    axis === "x" ? window.pageXOffset : window.pageYOffset,
+    axis === "x" ? window.scrollX : window.scrollY,
     props.start[axis],
     props.end[axis]
   );
@@ -86,8 +86,8 @@ function withScrolledInView(BaseClass, options = {}) {
       if (this.shouldEvaluateProps) {
         this.shouldEvaluateProps = false;
         const targetSizes = options.useOffsetSizes ? getOffsetSizes(this.$el) : this.$el.getBoundingClientRect();
-        targetSizes.y += window.pageYOffset;
-        targetSizes.x += window.pageXOffset;
+        targetSizes.y += window.scrollY;
+        targetSizes.x += window.scrollX;
         const containerSizes = {
           x: 0,
           y: 0,
@@ -96,10 +96,10 @@ function withScrolledInView(BaseClass, options = {}) {
         };
         const offset = normalizeOffset(this.$options.offset);
         const [yStart, yEnd] = getEdges("y", targetSizes, containerSizes, offset);
-        const yCurrent = clamp(window.pageYOffset, yStart, yEnd);
+        const yCurrent = clamp(window.scrollY, yStart, yEnd);
         const yProgress = yStart === yEnd ? 0 : clamp01((yCurrent - yStart) / (yEnd - yStart));
         const [xStart, xEnd] = getEdges("x", targetSizes, containerSizes, offset);
-        const xCurrent = clamp(window.pageXOffset, xStart, xEnd);
+        const xCurrent = clamp(window.scrollX, xStart, xEnd);
         const xProgress = xStart === xEnd ? 0 : clamp01((xCurrent - xStart) / (xEnd - xStart));
         this.__props.start.x = xStart;
         this.__props.start.y = yStart;
@@ -116,20 +116,6 @@ function withScrolledInView(BaseClass, options = {}) {
       }
       return this.__props;
     }
-    /**
-     * Factor used for the `dampedProgress` props.
-     *
-     * @deprecated
-     * @todo v3 delete in favor of option API
-     */
-    dampFactor = null;
-    /**
-     * Precision for the `dampedProgress` props.
-     *
-     * @deprecated
-     * @todo v3 delete in favor of option API
-     */
-    dampPrecision = null;
     /**
      * Bind listeners.
      */
@@ -154,13 +140,12 @@ function withScrolledInView(BaseClass, options = {}) {
           render();
         },
         scrolled: (props) => {
-          if (!this.$services.has("ticked") && props.changed.y || props.changed.x) {
+          if (props.changed.y || props.changed.x) {
             this.$services.enable("ticked");
           }
         },
         ticked: () => {
-          const dampFactor = this.dampFactor ?? this.$options.dampFactor;
-          const dampPrecision = this.dampPrecision ?? this.$options.dampPrecision;
+          const { dampFactor, dampPrecision } = this.$options;
           updateProps(this.__props, dampFactor, dampPrecision, "x");
           updateProps(this.__props, dampFactor, dampPrecision, "y");
           if (this.__props.dampedCurrent.x === this.__props.current.x && this.__props.dampedCurrent.y === this.__props.current.y) {
@@ -185,46 +170,6 @@ function withScrolledInView(BaseClass, options = {}) {
         render();
       });
     }
-    /**
-     * Mounted hook.
-     */
-    mounted() {
-      if (isFunction(super.mounted)) {
-        super.mounted();
-      }
-    }
-    /**
-     * Resized hook.
-     */
-    resized(props) {
-      if (isFunction(super.resized)) {
-        super.resized(props);
-      }
-    }
-    /**
-     * Scrolled hook.
-     */
-    scrolled(props) {
-      if (isFunction(super.scrolled)) {
-        super.scrolled(props);
-      }
-    }
-    /**
-     * Ticked hook.
-     */
-    ticked(props) {
-      if (isFunction(super.ticked)) {
-        super.ticked(props);
-      }
-    }
-    /**
-     * Destroyed hook.
-     */
-    destroyed() {
-      if (isFunction(super.destroyed)) {
-        super.destroyed();
-      }
-    }
   }
   return WithScrolledInView;
 }

package/decorators/withScrolledInView/withScrolledInView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/decorators/withScrolledInView/withScrolledInView.ts"],
-  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../../Base/index.js';\nimport type {\n  RafServiceProps,\n  ScrollServiceProps,\n  ResizeServiceProps,\n} from '../../services/index.js';\nimport { withMountWhenInView } from '../withMountWhenInView.js';\nimport {\n  damp,\n  clamp,\n  clamp01,\n  getOffsetSizes,\n  isFunction,\n  useScheduler,\n} from '../../utils/index.js';\nimport { normalizeOffset, getEdges } from './utils.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport interface WithScrolledInViewProps extends BaseProps {\n  $options: {\n    dampFactor: number;\n    dampPrecision: number;\n    offset: string;\n  };\n}\n\nexport type ScrollInViewProps = {\n  start: {\n    x: number;\n    y: number;\n  };\n  end: {\n    x: number;\n    y: number;\n  };\n  current: {\n    x: number;\n    y: number;\n  };\n  dampedCurrent: {\n    x: number;\n    y: number;\n  };\n  progress: {\n    x: number;\n    y: number;\n  };\n  dampedProgress: {\n    x: number;\n    y: number;\n  };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n  useOffsetSizes?: boolean;\n};\n\nfunction updateProgress(\n  props: ScrollInViewProps,\n  axis: 'x' | 'y',\n  progressKey: 'progress' | 'dampedProgress',\n  currentKey: 'current' | 'dampedCurrent',\n) {\n  props[progressKey][axis] =\n    props.start[axis] === props.end[axis]\n      ? 0\n      : clamp01(\n          (props[currentKey][axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n        );\n}\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n): void {\n  props.current[axis] = clamp(\n    axis === 'x' ? window.pageXOffset : window.pageYOffset,\n    props.start[axis],\n    props.end[axis],\n  );\n  props.dampedCurrent[axis] = damp(\n    props.current[axis],\n    props.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  updateProgress(props, axis, 'progress', 'current');\n  updateProgress(props, axis, 'dampedProgress', 'dampedCurrent');\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n  /**\n   * @type {ScrollInViewProps}\n   */\n  readonly props: ScrollInViewProps;\n  dampFactor?: number;\n  dampPrecision?: number;\n  mounted(): void;\n  resized(props: ResizeServiceProps): void;\n  scrolled(props: ScrollServiceProps): void;\n  ticked(props: RafServiceProps): void;\n  destroyed(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n  /**\n   * Class.\n   */\n  class WithScrolledInView<T extends BaseProps = BaseProps> extends withMountWhenInView(\n    BaseClass,\n    options,\n  )<T & WithScrolledInViewProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      emits: ['scrolledInView'],\n      options: {\n        dampFactor: {\n          type: Number,\n          default: 0.1,\n        },\n        dampPrecision: {\n          type: Number,\n          default: 0.001,\n        },\n        offset: {\n          type: String,\n          default: 'start end / end start',\n        },\n      },\n    };\n\n    __props: ScrollInViewProps = {\n      start: {\n        x: 0,\n        y: 0,\n      },\n      end: {\n        x: 0,\n        y: 0,\n      },\n      current: {\n        x: 0,\n        y: 0,\n      },\n      dampedCurrent: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      dampedProgress: {\n        x: 0,\n        y: 0,\n      },\n    };\n\n    shouldEvaluateProps = true;\n\n    get props() {\n      if (this.shouldEvaluateProps) {\n        this.shouldEvaluateProps = false;\n        const targetSizes = options.useOffsetSizes\n          ? getOffsetSizes(this.$el)\n          : this.$el.getBoundingClientRect();\n\n        targetSizes.y += window.pageYOffset;\n        targetSizes.x += window.pageXOffset;\n\n        const containerSizes = {\n          x: 0,\n          y: 0,\n          height: window.innerHeight,\n          width: window.innerWidth,\n        };\n\n        const offset = normalizeOffset(this.$options.offset);\n\n        // Y axis\n        const [yStart, yEnd] = getEdges('y', targetSizes, containerSizes, offset);\n        const yCurrent = clamp(window.pageYOffset, yStart, yEnd);\n        const yProgress = yStart === yEnd ? 0 : clamp01((yCurrent - yStart) / (yEnd - yStart));\n        // X axis\n        const [xStart, xEnd] = getEdges('x', targetSizes, containerSizes, offset);\n        const xCurrent = clamp(window.pageXOffset, xStart, xEnd);\n        const xProgress = xStart === xEnd ? 0 : clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n        this.__props.start.x = xStart;\n        this.__props.start.y = yStart;\n        this.__props.end.x = xEnd;\n        this.__props.end.y = yEnd;\n        this.__props.current.x = xCurrent;\n        this.__props.current.y = yCurrent;\n        this.__props.dampedCurrent.x = xCurrent;\n        this.__props.dampedCurrent.y = yCurrent;\n        this.__props.progress.x = xProgress;\n        this.__props.progress.y = yProgress;\n        this.__props.dampedProgress.x = xProgress;\n        this.__props.dampedProgress.y = yProgress;\n      }\n\n      return this.__props;\n    }\n\n    /**\n     * Factor used for the `dampedProgress` props.\n     *\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampFactor?: number = null;\n\n    /**\n     * Precision for the `dampedProgress` props.\n     *\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampPrecision?: number = null;\n\n    /**\n     * Bind listeners.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const render = () => {\n        scheduler.update(() => {\n          // @ts-ignore\n          const renderFn = this.__callMethod('scrolledInView', this.props);\n          if (isFunction(renderFn)) {\n            scheduler.render(() => {\n              renderFn(this.__props);\n            });\n          }\n        });\n      };\n\n      const delegate = {\n        handleEvent(event) {\n          delegate[event.type](event.detail[0]);\n        },\n        resized: () => {\n          this.shouldEvaluateProps = true;\n          render();\n        },\n        scrolled: (props) => {\n          if ((!this.$services.has('ticked') && props.changed.y) || props.changed.x) {\n            this.$services.enable('ticked');\n          }\n        },\n        ticked: () => {\n          const dampFactor = this.dampFactor ?? this.$options.dampFactor;\n          const dampPrecision = this.dampPrecision ?? this.$options.dampPrecision;\n          updateProps(this.__props, dampFactor, dampPrecision, 'x');\n          updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n          if (\n            this.__props.dampedCurrent.x === this.__props.current.x &&\n            this.__props.dampedCurrent.y === this.__props.current.y\n          ) {\n            this.$services.disable('ticked');\n          }\n\n          render();\n        },\n      };\n\n      this.$on('before-mounted', () => {\n        this.$on('resized', delegate);\n        this.$on('scrolled', delegate);\n        this.$on('ticked', delegate);\n      });\n\n      this.$on('destroyed', () => {\n        this.$off('resized', delegate);\n        this.$off('scrolled', delegate);\n        this.$off('ticked', delegate);\n\n        // Clamp damped values to their final value and trigger one last render on destroy\n        this.__props.dampedCurrent.x = this.__props.current.x;\n        this.__props.dampedCurrent.y = this.__props.current.y;\n        this.__props.dampedProgress.x = this.__props.progress.x;\n        this.__props.dampedProgress.y = this.__props.progress.y;\n        render();\n      });\n    }\n\n    /**\n     * Mounted hook.\n     */\n    mounted() {\n      // @ts-ignore\n      if (isFunction(super.mounted)) {\n        // @ts-ignore\n        super.mounted();\n      }\n    }\n\n    /**\n     * Resized hook.\n     */\n    resized(props: ResizeServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.resized)) {\n        // @ts-ignore\n        super.resized(props);\n      }\n    }\n\n    /**\n     * Scrolled hook.\n     */\n    scrolled(props: ScrollServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.scrolled)) {\n        // @ts-ignore\n        super.scrolled(props);\n      }\n    }\n\n    /**\n     * Ticked hook.\n     */\n    ticked(props: RafServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.ticked)) {\n        // @ts-ignore\n        super.ticked(props);\n      }\n    }\n\n    /**\n     * Destroyed hook.\n     */\n    destroyed() {\n      // @ts-ignore\n      if (isFunction(super.destroyed)) {\n        // @ts-ignore\n        super.destroyed();\n      }\n    }\n  }\n\n  // @ts-ignore\n  return WithScrolledInView;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../../Base/index.js';\nimport type {\n  RafServiceProps,\n  ScrollServiceProps,\n  ResizeServiceProps,\n} from '../../services/index.js';\nimport { withMountWhenInView } from '../withMountWhenInView.js';\nimport {\n  damp,\n  clamp,\n  clamp01,\n  getOffsetSizes,\n  isFunction,\n  useScheduler,\n} from '../../utils/index.js';\nimport { normalizeOffset, getEdges } from './utils.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport interface WithScrolledInViewProps extends BaseProps {\n  $options: {\n    dampFactor: number;\n    dampPrecision: number;\n    offset: string;\n  };\n}\n\nexport type ScrollInViewProps = {\n  start: {\n    x: number;\n    y: number;\n  };\n  end: {\n    x: number;\n    y: number;\n  };\n  current: {\n    x: number;\n    y: number;\n  };\n  dampedCurrent: {\n    x: number;\n    y: number;\n  };\n  progress: {\n    x: number;\n    y: number;\n  };\n  dampedProgress: {\n    x: number;\n    y: number;\n  };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n  useOffsetSizes?: boolean;\n};\n\nfunction updateProgress(\n  props: ScrollInViewProps,\n  axis: 'x' | 'y',\n  progressKey: 'progress' | 'dampedProgress',\n  currentKey: 'current' | 'dampedCurrent',\n) {\n  props[progressKey][axis] =\n    props.start[axis] === props.end[axis]\n      ? 0\n      : clamp01(\n          (props[currentKey][axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n        );\n}\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n): void {\n  props.current[axis] = clamp(\n    axis === 'x' ? window.scrollX : window.scrollY,\n    props.start[axis],\n    props.end[axis],\n  );\n  props.dampedCurrent[axis] = damp(\n    props.current[axis],\n    props.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  updateProgress(props, axis, 'progress', 'current');\n  updateProgress(props, axis, 'dampedProgress', 'dampedCurrent');\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n  /**\n   * @type {ScrollInViewProps}\n   */\n  readonly props: ScrollInViewProps;\n  dampFactor?: number;\n  dampPrecision?: number;\n  mounted(): void;\n  resized(props: ResizeServiceProps): void;\n  scrolled(props: ScrollServiceProps): void;\n  ticked(props: RafServiceProps): void;\n  destroyed(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n  /**\n   * Class.\n   */\n  class WithScrolledInView<T extends BaseProps = BaseProps> extends withMountWhenInView(\n    BaseClass,\n    options,\n  )<T & WithScrolledInViewProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      emits: ['scrolledInView'],\n      options: {\n        dampFactor: {\n          type: Number,\n          default: 0.1,\n        },\n        dampPrecision: {\n          type: Number,\n          default: 0.001,\n        },\n        offset: {\n          type: String,\n          default: 'start end / end start',\n        },\n      },\n    };\n\n    __props: ScrollInViewProps = {\n      start: {\n        x: 0,\n        y: 0,\n      },\n      end: {\n        x: 0,\n        y: 0,\n      },\n      current: {\n        x: 0,\n        y: 0,\n      },\n      dampedCurrent: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      dampedProgress: {\n        x: 0,\n        y: 0,\n      },\n    };\n\n    shouldEvaluateProps = true;\n\n    get props() {\n      if (this.shouldEvaluateProps) {\n        this.shouldEvaluateProps = false;\n        const targetSizes = options.useOffsetSizes\n          ? getOffsetSizes(this.$el)\n          : this.$el.getBoundingClientRect();\n\n        targetSizes.y += window.scrollY;\n        targetSizes.x += window.scrollX;\n\n        const containerSizes = {\n          x: 0,\n          y: 0,\n          height: window.innerHeight,\n          width: window.innerWidth,\n        };\n\n        const offset = normalizeOffset(this.$options.offset);\n\n        // Y axis\n        const [yStart, yEnd] = getEdges('y', targetSizes, containerSizes, offset);\n        const yCurrent = clamp(window.scrollY, yStart, yEnd);\n        const yProgress = yStart === yEnd ? 0 : clamp01((yCurrent - yStart) / (yEnd - yStart));\n        // X axis\n        const [xStart, xEnd] = getEdges('x', targetSizes, containerSizes, offset);\n        const xCurrent = clamp(window.scrollX, xStart, xEnd);\n        const xProgress = xStart === xEnd ? 0 : clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n        this.__props.start.x = xStart;\n        this.__props.start.y = yStart;\n        this.__props.end.x = xEnd;\n        this.__props.end.y = yEnd;\n        this.__props.current.x = xCurrent;\n        this.__props.current.y = yCurrent;\n        this.__props.dampedCurrent.x = xCurrent;\n        this.__props.dampedCurrent.y = yCurrent;\n        this.__props.progress.x = xProgress;\n        this.__props.progress.y = yProgress;\n        this.__props.dampedProgress.x = xProgress;\n        this.__props.dampedProgress.y = yProgress;\n      }\n\n      return this.__props;\n    }\n\n    /**\n     * Bind listeners.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const render = () => {\n        scheduler.update(() => {\n          // @ts-ignore\n          const renderFn = this.__callMethod('scrolledInView', this.props);\n          if (isFunction(renderFn)) {\n            scheduler.render(() => {\n              renderFn(this.__props);\n            });\n          }\n        });\n      };\n\n      const delegate = {\n        handleEvent(event) {\n          delegate[event.type](event.detail[0]);\n        },\n        resized: () => {\n          this.shouldEvaluateProps = true;\n          render();\n        },\n        scrolled: (props) => {\n          if (props.changed.y || props.changed.x) {\n            this.$services.enable('ticked');\n          }\n        },\n        ticked: () => {\n          const { dampFactor, dampPrecision } = this.$options;\n          updateProps(this.__props, dampFactor, dampPrecision, 'x');\n          updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n          if (\n            this.__props.dampedCurrent.x === this.__props.current.x &&\n            this.__props.dampedCurrent.y === this.__props.current.y\n          ) {\n            this.$services.disable('ticked');\n          }\n\n          render();\n        },\n      };\n\n      this.$on('before-mounted', () => {\n        this.$on('resized', delegate);\n        this.$on('scrolled', delegate);\n        this.$on('ticked', delegate);\n      });\n\n      this.$on('destroyed', () => {\n        this.$off('resized', delegate);\n        this.$off('scrolled', delegate);\n        this.$off('ticked', delegate);\n\n        // Clamp damped values to their final value and trigger one last render on destroy\n        this.__props.dampedCurrent.x = this.__props.current.x;\n        this.__props.dampedCurrent.y = this.__props.current.y;\n        this.__props.dampedProgress.x = this.__props.progress.x;\n        this.__props.dampedProgress.y = this.__props.progress.y;\n        render();\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithScrolledInView;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/helpers/createApp.d.ts

@@ -2,7 +2,8 @@ import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';
 import type { Features } from '../Base/features.js';
 export type CreateAppOptions = {
     root: HTMLElement;
-    features: Features;
+    features: Partial<Features>;
+    breakpoints?: Record<string, string>;
 };
 /**
  * Instantiate and mount the given component on the given root element when the page has been loaded

package/helpers/createApp.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/createApp.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { isDefined } from '../utils/index.js';\n\nexport type CreateAppOptions = {\n  root: HTMLElement;\n  features: Features;\n};\n\n/**\n * Instantiate and mount the given component on the given root element when the page has been loaded\n * and return a function to use the app instance when it is ready.\n */\nexport default function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(\n  App: S,\n  rootElement: HTMLElement | Partial<CreateAppOptions> = document.body,\n): () => Promise<S & Base<T>> {\n  let app: S & Base<T>;\n  const options =\n    rootElement instanceof HTMLElement\n      ? { root: rootElement, features: undefined }\n      : { root: document.body, ...rootElement };\n\n  if (isDefined(options.features)) {\n    for (const [feature, value] of Object.entries(options.features as Features)) {\n      features.set(feature as keyof Features, value);\n    }\n  }\n\n  function init() {\n    app = (new App(options.root) as S & Base<T>).$mount();\n    return app;\n  }\n\n  let p: Promise<S & Base<T>>;\n\n  if (features.get('asyncChildren')) {\n    p = Promise.resolve(init());\n  } else {\n    p = new Promise<S & Base<T>>((resolve) => {\n      if (document.readyState === 'complete') {\n        resolve(init());\n      } else {\n        document.addEventListener('readystatechange', () => {\n          if (document.readyState === 'complete') {\n            resolve(init());\n          }\n        });\n      }\n    });\n  }\n\n  return () => p;\n}\n"],
-  "mappings": "AAEA,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAWX,SAAR,UACL,KACA,cAAuD,SAAS,MACpC;AAC5B,MAAI;AACJ,QAAM,UACJ,uBAAuB,cACnB,EAAE,MAAM,aAAa,UAAU,OAAU,IACzC,EAAE,MAAM,SAAS,MAAM,GAAG,YAAY;AAE5C,MAAI,UAAU,QAAQ,QAAQ,GAAG;AAC/B,eAAW,CAAC,SAAS,KAAK,KAAK,OAAO,QAAQ,QAAQ,QAAoB,GAAG;AAC3E,eAAS,IAAI,SAA2B,KAAK;AAAA,IAC/C;AAAA,EACF;AAEA,WAAS,OAAO;AACd,UAAO,IAAI,IAAI,QAAQ,IAAI,EAAkB,OAAO;AACpD,WAAO;AAAA,EACT;AAEA,MAAI;AAEJ,MAAI,SAAS,IAAI,eAAe,GAAG;AACjC,QAAI,QAAQ,QAAQ,KAAK,CAAC;AAAA,EAC5B,OAAO;AACL,QAAI,IAAI,QAAqB,CAAC,YAAY;AACxC,UAAI,SAAS,eAAe,YAAY;AACtC,gBAAQ,KAAK,CAAC;AAAA,MAChB,OAAO;AACL,iBAAS,iBAAiB,oBAAoB,MAAM;AAClD,cAAI,SAAS,eAAe,YAAY;AACtC,oBAAQ,KAAK,CAAC;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,MAAM;AACf;",
+  "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { isDefined } from '../utils/index.js';\n\nexport type CreateAppOptions = {\n  root: HTMLElement;\n  features: Partial<Features>;\n  breakpoints?: Record<string, string>;\n};\n\n/**\n * Instantiate and mount the given component on the given root element when the page has been loaded\n * and return a function to use the app instance when it is ready.\n */\nexport default function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(\n  App: S,\n  rootElement: HTMLElement | Partial<CreateAppOptions> = document.body,\n): () => Promise<S & Base<T>> {\n  let app: S & Base<T>;\n  const options =\n    rootElement instanceof HTMLElement\n      ? { root: rootElement, features: undefined }\n      : { root: document.body, ...rootElement };\n\n  if (isDefined(options.features)) {\n    for (const [feature, value] of Object.entries(options.features as Features)) {\n      features.set(feature as keyof Features, value);\n    }\n  }\n\n  function init() {\n    app = (new App(options.root) as S & Base<T>).$mount();\n    return app;\n  }\n\n  let p: Promise<S & Base<T>>;\n\n  if (features.get('asyncChildren')) {\n    p = Promise.resolve(init());\n  } else {\n    p = new Promise<S & Base<T>>((resolve) => {\n      if (document.readyState === 'complete') {\n        resolve(init());\n      } else {\n        document.addEventListener('readystatechange', () => {\n          if (document.readyState === 'complete') {\n            resolve(init());\n          }\n        });\n      }\n    });\n  }\n\n  return () => p;\n}\n"],
+  "mappings": "AAEA,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAYX,SAAR,UACL,KACA,cAAuD,SAAS,MACpC;AAC5B,MAAI;AACJ,QAAM,UACJ,uBAAuB,cACnB,EAAE,MAAM,aAAa,UAAU,OAAU,IACzC,EAAE,MAAM,SAAS,MAAM,GAAG,YAAY;AAE5C,MAAI,UAAU,QAAQ,QAAQ,GAAG;AAC/B,eAAW,CAAC,SAAS,KAAK,KAAK,OAAO,QAAQ,QAAQ,QAAoB,GAAG;AAC3E,eAAS,IAAI,SAA2B,KAAK;AAAA,IAC/C;AAAA,EACF;AAEA,WAAS,OAAO;AACd,UAAO,IAAI,IAAI,QAAQ,IAAI,EAAkB,OAAO;AACpD,WAAO;AAAA,EACT;AAEA,MAAI;AAEJ,MAAI,SAAS,IAAI,eAAe,GAAG;AACjC,QAAI,QAAQ,QAAQ,KAAK,CAAC;AAAA,EAC5B,OAAO;AACL,QAAI,IAAI,QAAqB,CAAC,YAAY;AACxC,UAAI,SAAS,eAAe,YAAY;AACtC,gBAAQ,KAAK,CAAC;AAAA,MAChB,OAAO;AACL,iBAAS,iBAAiB,oBAAoB,MAAM;AAClD,cAAI,SAAS,eAAe,YAAY;AACtC,oBAAQ,KAAK,CAAC;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,MAAM;AACf;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.12.0",
+  "version": "3.0.0-alpha.1",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"
@@ -23,13 +23,11 @@
   "exports": {
     ".": {
       "import": "./index.js",
-      "require": "./index.cjs",
       "types": "./index.d.ts",
       "default": "./index.js"
     },
     "./utils": {
       "import": "./utils/index.js",
-      "require": "./utils/index.cjs",
       "types": "./utils/index.d.ts",
       "default": "./utils/index.js"
     }
@@ -41,13 +39,7 @@
     "toolkit"
   ],
   "dependencies": {
-    "@motionone/easing": "^10.15.1",
+    "@motionone/easing": "^10.17.0",
     "deepmerge": "^4.3.1"
-  },
-  "devDependencies": {
-    "vue": "^2.6.0"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.0 || ^3.0"
   }
 }

package/services/index.d.ts

@@ -28,7 +28,7 @@ export type KeyServiceInterface = ServiceInterface<KeyServiceProps>;
 export type LoadServiceInterface = ServiceInterface<LoadServiceProps>;
 export type PointerServiceInterface = ServiceInterface<PointerServiceProps>;
 export type RafServiceInterface = ServiceInterface<RafServiceProps>;
-export type ResizeServiceInterface = ServiceInterface<ResizeServiceProps>;
+export type ResizeServiceInterface<T extends Record<string, string> = Record<string, string>> = ServiceInterface<ResizeServiceProps<T>>;
 export type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;
 export type { DragServiceProps, KeyServiceProps, LoadServiceProps, PointerServiceProps, RafServiceProps, ResizeServiceProps, ScrollServiceProps, };
 export { default as useDrag } from './drag.js';

package/services/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/services/index.ts"],
-  "sourcesContent": ["import type { DragServiceProps } from './drag.js';\nimport type { KeyServiceProps } from './key.js';\nimport type { LoadServiceProps } from './load.js';\nimport type { PointerServiceProps } from './pointer.js';\nimport type { RafServiceProps } from './raf.js';\nimport type { ResizeServiceProps } from './resize.js';\nimport type { ScrollServiceProps } from './scroll.js';\n\nexport interface ServiceInterface<T> {\n  /**\n   * Remove a function from the resize service by its key.\n   */\n  remove(key: string): void;\n  /**\n   * Add a callback to the service. The callback will receive the current service props as parameter.\n   */\n  add(key: string, callback: (props: T) => void): void;\n  /**\n   * Test if the service has alreaydy a callback for the given key.\n   */\n  has(key: string): boolean;\n  /**\n   * Get the service's props.\n   */\n  props(): T;\n}\n\nexport type DragServiceInterface = ServiceInterface<DragServiceProps>;\nexport type KeyServiceInterface = ServiceInterface<KeyServiceProps>;\nexport type LoadServiceInterface = ServiceInterface<LoadServiceProps>;\nexport type PointerServiceInterface = ServiceInterface<PointerServiceProps>;\nexport type RafServiceInterface = ServiceInterface<RafServiceProps>;\nexport type ResizeServiceInterface = ServiceInterface<ResizeServiceProps>;\nexport type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;\n\nexport type {\n  DragServiceProps,\n  KeyServiceProps,\n  LoadServiceProps,\n  PointerServiceProps,\n  RafServiceProps,\n  ResizeServiceProps,\n  ScrollServiceProps,\n};\n\nexport { default as useDrag } from './drag.js';\nexport { default as useKey } from './key.js';\nexport { default as useLoad } from './load.js';\nexport { default as usePointer } from './pointer.js';\nexport { default as useRaf } from './raf.js';\nexport { default as useResize } from './resize.js';\nexport { default as useScroll } from './scroll.js';\nexport { useService } from './service.js';\n"],
-  "mappings": "AA6CA,SAAoB,WAAXA,gBAA0B;AACnC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAA0B;AACnC,SAAoB,WAAXA,gBAA6B;AACtC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAA4B;AACrC,SAAoB,WAAXA,gBAA4B;AACrC,SAAS,kBAAkB;",
+  "sourcesContent": ["import type { DragServiceProps } from './drag.js';\nimport type { KeyServiceProps } from './key.js';\nimport type { LoadServiceProps } from './load.js';\nimport type { PointerServiceProps } from './pointer.js';\nimport type { RafServiceProps } from './raf.js';\nimport type { ResizeServiceProps } from './resize.js';\nimport type { ScrollServiceProps } from './scroll.js';\n\nexport interface ServiceInterface<T> {\n  /**\n   * Remove a function from the resize service by its key.\n   */\n  remove(key: string): void;\n  /**\n   * Add a callback to the service. The callback will receive the current service props as parameter.\n   */\n  add(key: string, callback: (props: T) => void): void;\n  /**\n   * Test if the service has alreaydy a callback for the given key.\n   */\n  has(key: string): boolean;\n  /**\n   * Get the service's props.\n   */\n  props(): T;\n}\n\nexport type DragServiceInterface = ServiceInterface<DragServiceProps>;\nexport type KeyServiceInterface = ServiceInterface<KeyServiceProps>;\nexport type LoadServiceInterface = ServiceInterface<LoadServiceProps>;\nexport type PointerServiceInterface = ServiceInterface<PointerServiceProps>;\nexport type RafServiceInterface = ServiceInterface<RafServiceProps>;\nexport type ResizeServiceInterface<T extends Record<string, string> = Record<string, string>> =\n  ServiceInterface<ResizeServiceProps<T>>;\nexport type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;\n\nexport type {\n  DragServiceProps,\n  KeyServiceProps,\n  LoadServiceProps,\n  PointerServiceProps,\n  RafServiceProps,\n  ResizeServiceProps,\n  ScrollServiceProps,\n};\n\nexport { default as useDrag } from './drag.js';\nexport { default as useKey } from './key.js';\nexport { default as useLoad } from './load.js';\nexport { default as usePointer } from './pointer.js';\nexport { default as useRaf } from './raf.js';\nexport { default as useResize } from './resize.js';\nexport { default as useScroll } from './scroll.js';\nexport { useService } from './service.js';\n"],
+  "mappings": "AA8CA,SAAoB,WAAXA,gBAA0B;AACnC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAA0B;AACnC,SAAoB,WAAXA,gBAA6B;AACtC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAA4B;AACrC,SAAoB,WAAXA,gBAA4B;AACrC,SAAS,kBAAkB;",
   "names": ["default"]
 }

package/services/pointer.d.ts

@@ -29,4 +29,4 @@ export interface PointerServiceProps {
 /**
  * Use the pointer service.
  */
-export default function usePointer(target: HTMLElement | undefined): PointerService;
+export default function usePointer(target?: HTMLElement): PointerService;

package/services/pointer.js

@@ -112,10 +112,10 @@ function createPointerService(target) {
 }
 const instances = /* @__PURE__ */ new Map();
 function usePointer(target) {
-  if (!instances.has(target)) {
-    instances.set(target, createPointerService(target));
+  if (!instances.has(target ?? window)) {
+    instances.set(target ?? window, createPointerService(target));
   }
-  return instances.get(target);
+  return instances.get(target ?? window);
 }
 export {
   usePointer as default

package/services/pointer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/services/pointer.ts"],
-  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport type { ServiceInterface } from './index.js';\nimport { isDefined } from '../utils/index.js';\n\nexport type PointerService = ServiceInterface<PointerServiceProps>;\n\nexport interface PointerServiceProps {\n  event: MouseEvent | TouchEvent;\n  isDown: boolean;\n  x: number;\n  y: number;\n  changed: { x: boolean; y: boolean };\n  last: { x: number; y: number };\n  delta: { x: number; y: number };\n  progress: { x: number; y: number };\n  max: { x: number; y: number };\n}\n\n/**\n * Test if an event is an instance of TouchEvent.\n */\nfunction isTouchEvent(event: TouchEvent | MouseEvent): boolean {\n  return typeof TouchEvent !== 'undefined' && event instanceof TouchEvent;\n}\n\nconst events = ['mousemove', 'touchmove', 'mousedown', 'touchstart', 'mouseup', 'touchend'];\n\n/**\n * Get pointer service.\n */\nfunction createPointerService(target: HTMLElement | undefined): PointerService {\n  function getTargetSize() {\n    return isDefined(target)\n      ? target.getBoundingClientRect()\n      : {\n          width: window.innerWidth,\n          height: window.innerHeight,\n          x: 0,\n          y: 0,\n        };\n  }\n\n  /**\n   * Update the pointer positions.\n   */\n  function updateProps(event: MouseEvent | TouchEvent): PointerServiceProps {\n    props.event = event;\n    const yLast = props.y;\n    const xLast = props.x;\n\n    const targetSize = getTargetSize();\n\n    // Check pointer Y\n    // We either get data from a touch event `event.touches[0].clientY` or from\n    // a mouse event `event.clientY`.\n    let y = isTouchEvent(event)\n      ? (event as TouchEvent).touches[0]?.clientY\n      : (event as MouseEvent).clientY;\n    y -= targetSize.y;\n    if (y !== props.y) {\n      props.y = y;\n    }\n\n    // Check pointer X\n    // We either get data from a touch event `event.touches[0].clientX` or from\n    // a mouse event `event.clientX`.\n    let x = isTouchEvent(event)\n      ? (event as TouchEvent).touches[0]?.clientX\n      : (event as MouseEvent).clientX;\n    x -= targetSize.x;\n    if (x !== props.x) {\n      props.x = x;\n    }\n\n    props.changed.x = props.x !== xLast;\n    props.changed.y = props.y !== yLast;\n\n    props.last.x = xLast;\n    props.last.y = yLast;\n\n    props.delta.x = props.x - xLast;\n    props.delta.y = props.y - yLast;\n\n    props.max.x = targetSize.width;\n    props.max.y = targetSize.height;\n\n    props.progress.x = props.x / props.max.x;\n    props.progress.y = props.y / props.max.y;\n\n    return props;\n  }\n\n  /**\n   * Handle events.\n   *\n   * @todo handle scroll as well\n   */\n  function handleEvent(event: MouseEvent | TouchEvent) {\n    // eslint-disable-next-line default-case\n    switch (event.type) {\n      case 'mouseenter':\n      case 'mousemove':\n      case 'touchmove':\n        trigger(updateProps(event));\n        break;\n      case 'mousedown':\n      case 'touchstart':\n        props.isDown = true;\n        trigger(props);\n        break;\n      case 'mouseup':\n      case 'touchend':\n        props.isDown = false;\n        trigger(props);\n        break;\n    }\n  }\n\n  const targetSize = getTargetSize();\n  const { add, remove, has, trigger, props } = useService({\n    props: {\n      event: null,\n      isDown: false,\n      x: targetSize.x / 2,\n      y: targetSize.y / 2,\n      changed: {\n        x: false,\n        y: false,\n      },\n      last: {\n        x: targetSize.x / 2,\n        y: targetSize.y / 2,\n      },\n      delta: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0.5,\n        y: 0.5,\n      },\n      max: {\n        x: targetSize.width,\n        y: targetSize.height,\n      },\n    } as PointerServiceProps,\n    init() {\n      document.documentElement.addEventListener('mouseenter', handleEvent, {\n        once: true,\n        capture: true,\n      });\n\n      const options = { passive: true, capture: true };\n      for (const event of events) {\n        document.addEventListener(event, handleEvent, options);\n      }\n    },\n    kill() {\n      for (const event of events) {\n        document.removeEventListener(event, handleEvent);\n      }\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nconst instances = new Map<HTMLElement | Window, PointerService>();\n\n/**\n * Use the pointer service.\n */\nexport default function usePointer(target: HTMLElement | undefined): PointerService {\n  if (!instances.has(target)) {\n    instances.set(target, createPointerService(target));\n  }\n  return instances.get(target);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport type { ServiceInterface } from './index.js';\nimport { isDefined } from '../utils/index.js';\n\nexport type PointerService = ServiceInterface<PointerServiceProps>;\n\nexport interface PointerServiceProps {\n  event: MouseEvent | TouchEvent;\n  isDown: boolean;\n  x: number;\n  y: number;\n  changed: { x: boolean; y: boolean };\n  last: { x: number; y: number };\n  delta: { x: number; y: number };\n  progress: { x: number; y: number };\n  max: { x: number; y: number };\n}\n\n/**\n * Test if an event is an instance of TouchEvent.\n */\nfunction isTouchEvent(event: TouchEvent | MouseEvent): boolean {\n  return typeof TouchEvent !== 'undefined' && event instanceof TouchEvent;\n}\n\nconst events = ['mousemove', 'touchmove', 'mousedown', 'touchstart', 'mouseup', 'touchend'];\n\n/**\n * Get pointer service.\n */\nfunction createPointerService(target: HTMLElement | undefined): PointerService {\n  function getTargetSize() {\n    return isDefined(target)\n      ? target.getBoundingClientRect()\n      : {\n          width: window.innerWidth,\n          height: window.innerHeight,\n          x: 0,\n          y: 0,\n        };\n  }\n\n  /**\n   * Update the pointer positions.\n   */\n  function updateProps(event: MouseEvent | TouchEvent): PointerServiceProps {\n    props.event = event;\n    const yLast = props.y;\n    const xLast = props.x;\n\n    const targetSize = getTargetSize();\n\n    // Check pointer Y\n    // We either get data from a touch event `event.touches[0].clientY` or from\n    // a mouse event `event.clientY`.\n    let y = isTouchEvent(event)\n      ? (event as TouchEvent).touches[0]?.clientY\n      : (event as MouseEvent).clientY;\n    y -= targetSize.y;\n    if (y !== props.y) {\n      props.y = y;\n    }\n\n    // Check pointer X\n    // We either get data from a touch event `event.touches[0].clientX` or from\n    // a mouse event `event.clientX`.\n    let x = isTouchEvent(event)\n      ? (event as TouchEvent).touches[0]?.clientX\n      : (event as MouseEvent).clientX;\n    x -= targetSize.x;\n    if (x !== props.x) {\n      props.x = x;\n    }\n\n    props.changed.x = props.x !== xLast;\n    props.changed.y = props.y !== yLast;\n\n    props.last.x = xLast;\n    props.last.y = yLast;\n\n    props.delta.x = props.x - xLast;\n    props.delta.y = props.y - yLast;\n\n    props.max.x = targetSize.width;\n    props.max.y = targetSize.height;\n\n    props.progress.x = props.x / props.max.x;\n    props.progress.y = props.y / props.max.y;\n\n    return props;\n  }\n\n  /**\n   * Handle events.\n   *\n   * @todo handle scroll as well\n   */\n  function handleEvent(event: MouseEvent | TouchEvent) {\n    // eslint-disable-next-line default-case\n    switch (event.type) {\n      case 'mouseenter':\n      case 'mousemove':\n      case 'touchmove':\n        trigger(updateProps(event));\n        break;\n      case 'mousedown':\n      case 'touchstart':\n        props.isDown = true;\n        trigger(props);\n        break;\n      case 'mouseup':\n      case 'touchend':\n        props.isDown = false;\n        trigger(props);\n        break;\n    }\n  }\n\n  const targetSize = getTargetSize();\n  const { add, remove, has, trigger, props } = useService({\n    props: {\n      event: null,\n      isDown: false,\n      x: targetSize.x / 2,\n      y: targetSize.y / 2,\n      changed: {\n        x: false,\n        y: false,\n      },\n      last: {\n        x: targetSize.x / 2,\n        y: targetSize.y / 2,\n      },\n      delta: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0.5,\n        y: 0.5,\n      },\n      max: {\n        x: targetSize.width,\n        y: targetSize.height,\n      },\n    } as PointerServiceProps,\n    init() {\n      document.documentElement.addEventListener('mouseenter', handleEvent, {\n        once: true,\n        capture: true,\n      });\n\n      const options = { passive: true, capture: true };\n      for (const event of events) {\n        document.addEventListener(event, handleEvent, options);\n      }\n    },\n    kill() {\n      for (const event of events) {\n        document.removeEventListener(event, handleEvent);\n      }\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nconst instances = new Map<HTMLElement | Window, PointerService>();\n\n/**\n * Use the pointer service.\n */\nexport default function usePointer(target?: HTMLElement): PointerService {\n  if (!instances.has(target ?? window)) {\n    instances.set(target ?? window, createPointerService(target));\n  }\n  return instances.get(target ?? window) as PointerService;\n}\n"],
+  "mappings": "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",
   "names": ["targetSize"]
 }

package/services/raf.js

@@ -1,11 +1,9 @@
 import { useService } from "./service.js";
-import { getRaf as getRequestAnimationFrame } from "../utils/nextFrame.js";
 import { useScheduler } from "../utils/scheduler.js";
 import { isFunction } from "../utils/is.js";
 const scheduler = useScheduler(["update", "render"]);
 function createRafService() {
   let isTicking = false;
-  const RAF = getRequestAnimationFrame();
   function trigger(props2) {
     for (const callback of callbacks.values()) {
       scheduler.update(() => {
@@ -24,7 +22,7 @@ function createRafService() {
     if (!isTicking) {
       return;
     }
-    RAF(loop);
+    requestAnimationFrame(loop);
   }
   const { add, remove, has, props, callbacks } = useService({
     props: {
@@ -32,7 +30,7 @@ function createRafService() {
     },
     init() {
       isTicking = true;
-      RAF(loop);
+      requestAnimationFrame(loop);
     },
     kill() {
       isTicking = false;

package/services/raf.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/services/raf.ts"],
-  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport { getRaf as getRequestAnimationFrame } from '../utils/nextFrame.js';\nimport { useScheduler } from '../utils/scheduler.js';\nimport { isFunction } from '../utils/is.js';\nimport type { ServiceInterface } from './index.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport type RafService = ServiceInterface<RafServiceProps>;\n\nexport interface RafServiceProps {\n  time: DOMHighResTimeStamp;\n}\n\n/**\n * Create raf service.\n */\nfunction createRafService(): RafService {\n  let isTicking = false;\n  const RAF = getRequestAnimationFrame();\n\n  /**\n   * Trigger callbacks.\n   */\n  function trigger(props: RafServiceProps) {\n    for (const callback of callbacks.values()) {\n      scheduler.update(() => {\n        const render = callback(props) as (() => unknown) | void;\n        if (isFunction(render)) {\n          scheduler.render(() => {\n            // @ts-ignore\n            render(props);\n          });\n        }\n      });\n    }\n  }\n\n  /**\n   * Loop.\n   */\n  function loop() {\n    // eslint-disable-next-line no-use-before-define\n    props.time = performance.now();\n    trigger(props);\n\n    if (!isTicking) {\n      return;\n    }\n\n    RAF(loop);\n  }\n\n  const { add, remove, has, props, callbacks } = useService({\n    props: {\n      time: performance.now(),\n    } as RafServiceProps,\n    init() {\n      isTicking = true;\n      RAF(loop);\n    },\n    kill() {\n      isTicking = false;\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nlet raf;\n\n/**\n * Use the RequestAnimationFrame (raf) service.\n */\nexport default function useRaf(): RafService {\n  if (!raf) {\n    raf = createRafService();\n  }\n\n  return raf;\n}\n"],
-  "mappings": "AACA,SAAS,kBAAkB;AAC3B,SAAS,UAAU,gCAAgC;AACnD,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAG3B,MAAM,YAAY,aAAa,CAAC,UAAU,QAAQ,CAAC;AAWnD,SAAS,mBAA+B;AACtC,MAAI,YAAY;AAChB,QAAM,MAAM,yBAAyB;AAKrC,WAAS,QAAQA,QAAwB;AACvC,eAAW,YAAY,UAAU,OAAO,GAAG;AACzC,gBAAU,OAAO,MAAM;AACrB,cAAM,SAAS,SAASA,MAAK;AAC7B,YAAI,WAAW,MAAM,GAAG;AACtB,oBAAU,OAAO,MAAM;AAErB,mBAAOA,MAAK;AAAA,UACd,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAKA,WAAS,OAAO;AAEd,UAAM,OAAO,YAAY,IAAI;AAC7B,YAAQ,KAAK;AAEb,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AAEA,QAAI,IAAI;AAAA,EACV;AAEA,QAAM,EAAE,KAAK,QAAQ,KAAK,OAAO,UAAU,IAAI,WAAW;AAAA,IACxD,OAAO;AAAA,MACL,MAAM,YAAY,IAAI;AAAA,IACxB;AAAA,IACA,OAAO;AACL,kBAAY;AACZ,UAAI,IAAI;AAAA,IACV;AAAA,IACA,OAAO;AACL,kBAAY;AAAA,IACd;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,IAAI;AAKW,SAAR,SAAsC;AAC3C,MAAI,CAAC,KAAK;AACR,UAAM,iBAAiB;AAAA,EACzB;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport { useScheduler } from '../utils/scheduler.js';\nimport { isFunction } from '../utils/is.js';\nimport type { ServiceInterface } from './index.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport type RafService = ServiceInterface<RafServiceProps>;\n\nexport interface RafServiceProps {\n  time: DOMHighResTimeStamp;\n}\n\n/**\n * Create raf service.\n */\nfunction createRafService(): RafService {\n  let isTicking = false;\n\n  /**\n   * Trigger callbacks.\n   */\n  function trigger(props: RafServiceProps) {\n    for (const callback of callbacks.values()) {\n      scheduler.update(() => {\n        const render = callback(props) as (() => unknown) | void;\n        if (isFunction(render)) {\n          scheduler.render(() => {\n            // @ts-ignore\n            render(props);\n          });\n        }\n      });\n    }\n  }\n\n  /**\n   * Loop.\n   */\n  function loop() {\n    // eslint-disable-next-line no-use-before-define\n    props.time = performance.now();\n    trigger(props);\n\n    if (!isTicking) {\n      return;\n    }\n\n    requestAnimationFrame(loop);\n  }\n\n  const { add, remove, has, props, callbacks } = useService({\n    props: {\n      time: performance.now(),\n    } as RafServiceProps,\n    init() {\n      isTicking = true;\n      requestAnimationFrame(loop);\n    },\n    kill() {\n      isTicking = false;\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nlet raf;\n\n/**\n * Use the RequestAnimationFrame (raf) service.\n */\nexport default function useRaf(): RafService {\n  if (!raf) {\n    raf = createRafService();\n  }\n\n  return raf;\n}\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAG3B,MAAM,YAAY,aAAa,CAAC,UAAU,QAAQ,CAAC;AAWnD,SAAS,mBAA+B;AACtC,MAAI,YAAY;AAKhB,WAAS,QAAQA,QAAwB;AACvC,eAAW,YAAY,UAAU,OAAO,GAAG;AACzC,gBAAU,OAAO,MAAM;AACrB,cAAM,SAAS,SAASA,MAAK;AAC7B,YAAI,WAAW,MAAM,GAAG;AACtB,oBAAU,OAAO,MAAM;AAErB,mBAAOA,MAAK;AAAA,UACd,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAKA,WAAS,OAAO;AAEd,UAAM,OAAO,YAAY,IAAI;AAC7B,YAAQ,KAAK;AAEb,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AAEA,0BAAsB,IAAI;AAAA,EAC5B;AAEA,QAAM,EAAE,KAAK,QAAQ,KAAK,OAAO,UAAU,IAAI,WAAW;AAAA,IACxD,OAAO;AAAA,MACL,MAAM,YAAY,IAAI;AAAA,IACxB;AAAA,IACA,OAAO;AACL,kBAAY;AACZ,4BAAsB,IAAI;AAAA,IAC5B;AAAA,IACA,OAAO;AACL,kBAAY;AAAA,IACd;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,IAAI;AAKW,SAAR,SAAsC;AAC3C,MAAI,CAAC,KAAK;AACR,UAAM,iBAAiB;AAAA,EACzB;AAEA,SAAO;AACT;",
   "names": ["props"]
 }

package/services/resize.d.ts

@@ -1,14 +1,15 @@
-import type { ServiceInterface } from './index.js';
-export type ResizeService = ServiceInterface<ResizeServiceProps>;
-export interface ResizeServiceProps {
+import type { Features } from '../Base/features.js';
+import type { ResizeServiceInterface } from './index.js';
+export interface ResizeServiceProps<U extends Features['breakpoints'] = Features['breakpoints']> {
     width: number;
     height: number;
     ratio: number;
     orientation: 'square' | 'landscape' | 'portrait';
-    breakpoint?: string;
-    breakpoints?: string[];
+    breakpoint: string;
+    breakpoints: string[];
+    activeBreakpoints: Record<keyof U, boolean>;
 }
 /**
  * Use the resize service.
  */
-export default function useResize(): ResizeService;
+export default function useResize<T extends Features['breakpoints'] = Features['breakpoints']>(breakpoints?: T): ResizeServiceInterface<T>;

package/services/resize.js

@@ -1,24 +1,8 @@
 import { useService } from "./service.js";
+import { features } from "../Base/features.js";
 import debounce from "../utils/debounce.js";
-let breakpointElement;
-let breakpoints = [];
-function getBreakpointElement() {
-  if (!breakpointElement) {
-    breakpointElement = document.querySelector("[data-breakpoint]");
-  }
-  return breakpointElement;
-}
-function getBreakpoint() {
-  return getBreakpointElement() ? window.getComputedStyle(getBreakpointElement(), "::before").getPropertyValue("content").replaceAll('"', "") : void 0;
-}
-function getBreakpoints() {
-  if (!getBreakpointElement() || breakpoints.length) {
-    return breakpoints;
-  }
-  breakpoints = window.getComputedStyle(getBreakpointElement(), "::after").getPropertyValue("content").replaceAll('"', "").split(",");
-  return breakpoints;
-}
-function createResizeService() {
+function createResizeService(breakpoints) {
+  const finalScreens = breakpoints ?? features.get("breakpoints");
   function updateProps() {
     props.width = window.innerWidth;
     props.height = window.innerHeight;
@@ -42,10 +26,18 @@ function createResizeService() {
       ratio: window.innerWidth / window.innerHeight,
       orientation: "square",
       get breakpoint() {
-        return getBreakpoint();
+        return Object.keys(this.activeBreakpoints).find((name) => this.activeBreakpoints[name]);
       },
       get breakpoints() {
-        return getBreakpoints();
+        return Object.keys(this.activeBreakpoints);
+      },
+      get activeBreakpoints() {
+        return Object.fromEntries(
+          Object.entries(finalScreens).map(([name, breakpoint]) => [
+            name,
+            window.matchMedia(`(min-width: ${breakpoint})`).matches
+          ])
+        );
       }
     },
     init() {
@@ -62,12 +54,13 @@ function createResizeService() {
     props: () => props
   };
 }
-let resize;
-function useResize() {
-  if (!resize) {
-    resize = createResizeService();
+const instances = /* @__PURE__ */ new Map();
+function useResize(breakpoints) {
+  const key = JSON.stringify(breakpoints);
+  if (!instances.has(key)) {
+    instances.set(key, createResizeService(breakpoints));
   }
-  return resize;
+  return instances.get(key);
 }
 export {
   useResize as default

package/services/resize.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/services/resize.ts"],
-  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport debounce from '../utils/debounce.js';\nimport type { ServiceInterface } from './index.js';\n\nexport type ResizeService = ServiceInterface<ResizeServiceProps>;\n\nexport interface ResizeServiceProps {\n  width: number;\n  height: number;\n  ratio: number;\n  orientation: 'square' | 'landscape' | 'portrait';\n  breakpoint?: string;\n  breakpoints?: string[];\n}\n\nlet breakpointElement;\nlet breakpoints = [];\n\n/**\n * The element holding the breakpoints data.\n */\nfunction getBreakpointElement(): HTMLElement {\n  if (!breakpointElement) {\n    breakpointElement = document.querySelector('[data-breakpoint]');\n  }\n  return breakpointElement;\n}\n\n/**\n * Get the current breakpoint.\n */\nfunction getBreakpoint(): string | null {\n  return getBreakpointElement()\n    ? window\n        .getComputedStyle(getBreakpointElement(), '::before')\n        .getPropertyValue('content')\n        .replaceAll('\"', '')\n    : undefined;\n}\n\n/**\n * Get all breakpoints.\n */\nfunction getBreakpoints(): string[] {\n  if (!getBreakpointElement() || breakpoints.length) {\n    return breakpoints;\n  }\n  breakpoints = window\n    .getComputedStyle(getBreakpointElement(), '::after')\n    .getPropertyValue('content')\n    .replaceAll('\"', '')\n    .split(',');\n\n  return breakpoints;\n}\n\n/**\n * Get resize service.\n */\nfunction createResizeService(): ResizeService {\n  /**\n   * Update props.\n   */\n  function updateProps(): ResizeServiceProps {\n    props.width = window.innerWidth;\n    props.height = window.innerHeight;\n    props.ratio = window.innerWidth / window.innerHeight;\n    props.orientation = 'square';\n\n    if (props.ratio > 1) {\n      props.orientation = 'landscape';\n    }\n\n    if (props.ratio < 1) {\n      props.orientation = 'portrait';\n    }\n\n    return props;\n  }\n\n  const onResize = debounce(() => {\n    trigger(updateProps());\n  });\n\n  const { add, remove, has, trigger, props } = useService({\n    props: {\n      width: window.innerWidth,\n      height: window.innerHeight,\n      ratio: window.innerWidth / window.innerHeight,\n      orientation: 'square',\n      get breakpoint() {\n        return getBreakpoint();\n      },\n      get breakpoints() {\n        return getBreakpoints();\n      },\n    } as ResizeServiceProps,\n    init() {\n      window.addEventListener('resize', onResize);\n    },\n    kill() {\n      window.removeEventListener('resize', onResize);\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nlet resize;\n\n/**\n * Use the resize service.\n */\nexport default function useResize(): ResizeService {\n  if (!resize) {\n    resize = createResizeService();\n  }\n\n  return resize;\n}\n"],
-  "mappings": "AACA,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AAcrB,IAAI;AACJ,IAAI,cAAc,CAAC;AAKnB,SAAS,uBAAoC;AAC3C,MAAI,CAAC,mBAAmB;AACtB,wBAAoB,SAAS,cAAc,mBAAmB;AAAA,EAChE;AACA,SAAO;AACT;AAKA,SAAS,gBAA+B;AACtC,SAAO,qBAAqB,IACxB,OACG,iBAAiB,qBAAqB,GAAG,UAAU,EACnD,iBAAiB,SAAS,EAC1B,WAAW,KAAK,EAAE,IACrB;AACN;AAKA,SAAS,iBAA2B;AAClC,MAAI,CAAC,qBAAqB,KAAK,YAAY,QAAQ;AACjD,WAAO;AAAA,EACT;AACA,gBAAc,OACX,iBAAiB,qBAAqB,GAAG,SAAS,EAClD,iBAAiB,SAAS,EAC1B,WAAW,KAAK,EAAE,EAClB,MAAM,GAAG;AAEZ,SAAO;AACT;AAKA,SAAS,sBAAqC;AAI5C,WAAS,cAAkC;AACzC,UAAM,QAAQ,OAAO;AACrB,UAAM,SAAS,OAAO;AACtB,UAAM,QAAQ,OAAO,aAAa,OAAO;AACzC,UAAM,cAAc;AAEpB,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,SAAS,MAAM;AAC9B,YAAQ,YAAY,CAAC;AAAA,EACvB,CAAC;AAED,QAAM,EAAE,KAAK,QAAQ,KAAK,SAAS,MAAM,IAAI,WAAW;AAAA,IACtD,OAAO;AAAA,MACL,OAAO,OAAO;AAAA,MACd,QAAQ,OAAO;AAAA,MACf,OAAO,OAAO,aAAa,OAAO;AAAA,MAClC,aAAa;AAAA,MACb,IAAI,aAAa;AACf,eAAO,cAAc;AAAA,MACvB;AAAA,MACA,IAAI,cAAc;AAChB,eAAO,eAAe;AAAA,MACxB;AAAA,IACF;AAAA,IACA,OAAO;AACL,aAAO,iBAAiB,UAAU,QAAQ;AAAA,IAC5C;AAAA,IACA,OAAO;AACL,aAAO,oBAAoB,UAAU,QAAQ;AAAA,IAC/C;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,IAAI;AAKW,SAAR,YAA4C;AACjD,MAAI,CAAC,QAAQ;AACX,aAAS,oBAAoB;AAAA,EAC/B;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport { features } from '../Base/features.js';\nimport type { Features } from '../Base/features.js';\nimport debounce from '../utils/debounce.js';\nimport type { ResizeServiceInterface } from './index.js';\n\nexport interface ResizeServiceProps<U extends Features['breakpoints'] = Features['breakpoints']> {\n  width: number;\n  height: number;\n  ratio: number;\n  orientation: 'square' | 'landscape' | 'portrait';\n  breakpoint: string;\n  breakpoints: string[];\n  activeBreakpoints: Record<keyof U, boolean>;\n}\n\n/**\n * Get resize service.\n */\nfunction createResizeService<T extends Features['breakpoints'] = Features['breakpoints']>(\n  breakpoints?: T,\n): ResizeServiceInterface<T> {\n  const finalScreens = breakpoints ?? features.get('breakpoints');\n  /**\n   * Update props.\n   */\n  function updateProps(): ResizeServiceProps<T> {\n    props.width = window.innerWidth;\n    props.height = window.innerHeight;\n    props.ratio = window.innerWidth / window.innerHeight;\n    props.orientation = 'square';\n\n    if (props.ratio > 1) {\n      props.orientation = 'landscape';\n    }\n\n    if (props.ratio < 1) {\n      props.orientation = 'portrait';\n    }\n\n    return props;\n  }\n\n  const onResize = debounce(() => {\n    trigger(updateProps());\n  });\n\n  const { add, remove, has, trigger, props } = useService({\n    props: {\n      width: window.innerWidth,\n      height: window.innerHeight,\n      ratio: window.innerWidth / window.innerHeight,\n      orientation: 'square',\n      get breakpoint() {\n        return Object.keys(this.activeBreakpoints).find((name) => this.activeBreakpoints[name]);\n      },\n      get breakpoints() {\n        return Object.keys(this.activeBreakpoints);\n      },\n      get activeBreakpoints() {\n        return Object.fromEntries(\n          Object.entries(finalScreens).map(([name, breakpoint]) => [\n            name,\n            window.matchMedia(`(min-width: ${breakpoint})`).matches,\n          ]),\n        ) as Record<keyof T, boolean>;\n      },\n    } as ResizeServiceProps<T>,\n    init() {\n      window.addEventListener('resize', onResize);\n    },\n    kill() {\n      window.removeEventListener('resize', onResize);\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nconst instances: Map<string, ResizeServiceInterface | undefined> = new Map();\n\n/**\n * Use the resize service.\n */\nexport default function useResize<T extends Features['breakpoints'] = Features['breakpoints']>(\n  breakpoints?: T,\n): ResizeServiceInterface<T> {\n  const key = JSON.stringify(breakpoints);\n\n  if (!instances.has(key)) {\n    instances.set(key, createResizeService(breakpoints));\n  }\n\n  return (instances as Map<string, ResizeServiceInterface<T>>).get(key);\n}\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AAEzB,OAAO,cAAc;AAgBrB,SAAS,oBACP,aAC2B;AAC3B,QAAM,eAAe,eAAe,SAAS,IAAI,aAAa;AAI9D,WAAS,cAAqC;AAC5C,UAAM,QAAQ,OAAO;AACrB,UAAM,SAAS,OAAO;AACtB,UAAM,QAAQ,OAAO,aAAa,OAAO;AACzC,UAAM,cAAc;AAEpB,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,SAAS,MAAM;AAC9B,YAAQ,YAAY,CAAC;AAAA,EACvB,CAAC;AAED,QAAM,EAAE,KAAK,QAAQ,KAAK,SAAS,MAAM,IAAI,WAAW;AAAA,IACtD,OAAO;AAAA,MACL,OAAO,OAAO;AAAA,MACd,QAAQ,OAAO;AAAA,MACf,OAAO,OAAO,aAAa,OAAO;AAAA,MAClC,aAAa;AAAA,MACb,IAAI,aAAa;AACf,eAAO,OAAO,KAAK,KAAK,iBAAiB,EAAE,KAAK,CAAC,SAAS,KAAK,kBAAkB,IAAI,CAAC;AAAA,MACxF;AAAA,MACA,IAAI,cAAc;AAChB,eAAO,OAAO,KAAK,KAAK,iBAAiB;AAAA,MAC3C;AAAA,MACA,IAAI,oBAAoB;AACtB,eAAO,OAAO;AAAA,UACZ,OAAO,QAAQ,YAAY,EAAE,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AAAA,YACvD;AAAA,YACA,OAAO,WAAW,eAAe,UAAU,GAAG,EAAE;AAAA,UAClD,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,OAAO;AACL,aAAO,iBAAiB,UAAU,QAAQ;AAAA,IAC5C;AAAA,IACA,OAAO;AACL,aAAO,oBAAoB,UAAU,QAAQ;AAAA,IAC/C;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,MAAM,YAA6D,oBAAI,IAAI;AAK5D,SAAR,UACL,aAC2B;AAC3B,QAAM,MAAM,KAAK,UAAU,WAAW;AAEtC,MAAI,CAAC,UAAU,IAAI,GAAG,GAAG;AACvB,cAAU,IAAI,KAAK,oBAAoB,WAAW,CAAC;AAAA,EACrD;AAEA,SAAQ,UAAqD,IAAI,GAAG;AACtE;",
   "names": []
 }