@studiometa/js-toolkit 3.9.0 → 4.0.0-alpha.1

package/dist/decorators/withFreezedOptions.d.ts

@@ -1,10 +0,0 @@
-import type { Base, BaseOptions } from '../Base/Base.js';
-import type { BaseDecorator, BaseInterface } from '../Base/types.js';
-export interface WithFreezedOptionsInterface extends BaseInterface {
-    readonly $options: Readonly<BaseOptions>;
-}
-/**
- * Freeze the `$options` property to improve performance.
- * @link https://js-toolkit.studiometa.dev/api/decorators/withFreezedOptions.html
- */
-export declare function withFreezedOptions<S extends Base>(BaseClass: typeof Base): BaseDecorator<WithFreezedOptionsInterface, S>;

package/dist/decorators/withFreezedOptions.js

@@ -1,28 +0,0 @@
-function withFreezedOptions(BaseClass) {
-  class WithFreezedOptions extends BaseClass {
-    /**
-     * Hold freezed options
-     *
-     * @private
-     */
-    __freezedOptions;
-    /**
-     * Lazyly freeze the `$options` property.
-     */
-    get $options() {
-      if (!this.__freezedOptions) {
-        Object.defineProperty(this, "__freezedOptions", {
-          value: Object.freeze({ ...super.$options }),
-          enumerable: false,
-          configurable: true
-        });
-      }
-      return this.__freezedOptions;
-    }
-  }
-  return WithFreezedOptions;
-}
-export {
-  withFreezedOptions
-};
-//# sourceMappingURL=withFreezedOptions.js.map

package/dist/decorators/withFreezedOptions.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/decorators/withFreezedOptions.ts"],
-  "sourcesContent": ["import type { Base, BaseOptions, BaseProps } from '../Base/Base.js';\nimport type { BaseDecorator, BaseInterface } from '../Base/types.js';\n\nexport interface WithFreezedOptionsInterface extends BaseInterface {\n  readonly $options: Readonly<BaseOptions>;\n}\n\n/**\n * Freeze the `$options` property to improve performance.\n * @link https://js-toolkit.studiometa.dev/api/decorators/withFreezedOptions.html\n */\nexport function withFreezedOptions<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithFreezedOptionsInterface, S> {\n  /**\n   * Class.\n   */\n  class WithFreezedOptions<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Hold freezed options\n     *\n     * @private\n     */\n    __freezedOptions;\n\n    /**\n     * Lazyly freeze the `$options` property.\n     */\n    get $options() {\n      if (!this.__freezedOptions) {\n        Object.defineProperty(this, '__freezedOptions', {\n          value: Object.freeze({ ...super.$options }),\n          enumerable: false,\n          configurable: true,\n        });\n      }\n\n      return this.__freezedOptions;\n    }\n  }\n\n  // @ts-ignore\n  return WithFreezedOptions;\n}\n"],
-  "mappings": "AAWO,SAAS,mBACd,WAC+C;AAAA,EAI/C,MAAM,2BAA4D,UAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM7E;AAAA;AAAA;AAAA;AAAA,IAKA,IAAI,WAAW;AACb,UAAI,CAAC,KAAK,kBAAkB;AAC1B,eAAO,eAAe,MAAM,oBAAoB;AAAA,UAC9C,OAAO,OAAO,OAAO,EAAE,GAAG,MAAM,SAAS,CAAC;AAAA,UAC1C,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB,CAAC;AAAA,MACH;AAEA,aAAO,KAAK;AAAA,IACd;AAAA,EACF;AAGA,SAAO;AACT;",
-  "names": []
-}

package/dist/decorators/withGroup.d.ts

@@ -1,39 +0,0 @@
-import type { Base, BaseProps } from '../Base/Base.js';
-import type { BaseDecorator, BaseInterface } from '../Base/types.js';
-export interface WithGroupProps extends BaseProps {
-    $options: {
-        group: string;
-    };
-}
-export interface WithGroupInterface extends BaseInterface {
-    get $group(): Set<Base>;
-}
-/**
- * Options for the `withGroup` decorator.
- */
-export interface WithGroupOptions<T extends Base = Base, Scope extends object = object> {
-    /**
-     * Resolve the scope an instance belongs to. Return `undefined` to fall back
-     * to the global (unscoped) registry.
-     */
-    getScope?: (instance: T) => Scope | undefined;
-    /**
-     * Resolve the group name of an instance, optionally using its resolved scope.
-     * Defaults to `instance.$options.group`.
-     */
-    getGroup?: (instance: T, scope: Scope | undefined) => string;
-}
-/**
- * Enumerate the scoped groups registered for a given scope.
- *
- * Returns the live `Map` of `${namespace}${group}` keys to their members set
- * for the given scope, or an empty `Map` for unknown scopes. Unknown scopes are
- * NOT registered as a side effect of reading.
- */
-export declare function getScopedGroups(scope: object): Map<string, Set<Base>>;
-/**
- * Add group features to easily bind multiple components together.
- *
- * @link https://js-toolkit.studiometa.dev/api/decorators/withGroup.html
- */
-export declare function withGroup<S extends Base = Base, Scope extends object = object>(BaseClass: typeof Base, namespace?: string, options?: WithGroupOptions<S, Scope>): BaseDecorator<WithGroupInterface, S, WithGroupProps>;

package/dist/decorators/withGroup.js

@@ -1,81 +0,0 @@
-function groups() {
-  return globalThis.__JS_TOOLKIT_GROUPS__ ??= /* @__PURE__ */ new Map();
-}
-const scopedGroups = /* @__PURE__ */ new WeakMap();
-function getScopedGroups(scope) {
-  return scopedGroups.get(scope) ?? /* @__PURE__ */ new Map();
-}
-function resolveGroupSet(scope, key) {
-  if (scope) {
-    let map = scopedGroups.get(scope);
-    if (!map) {
-      map = /* @__PURE__ */ new Map();
-      scopedGroups.set(scope, map);
-    }
-    let set = map.get(key);
-    if (!set) {
-      set = /* @__PURE__ */ new Set();
-      map.set(key, set);
-    }
-    return set;
-  }
-  const registry = groups();
-  return registry.get(key) ?? registry.set(key, /* @__PURE__ */ new Set()).get(key);
-}
-function withGroup(BaseClass, namespace = "", options = {}) {
-  const getScope = options.getScope;
-  const getGroup = options.getGroup ?? ((instance) => instance.$options.group);
-  return class WithGroup extends BaseClass {
-    static config = {
-      ...BaseClass.config,
-      options: {
-        group: String
-      }
-    };
-    /**
-     * The members set remembered at mount time, if any.
-     *
-     * @private
-     */
-    __groupSnapshot = void 0;
-    /**
-     * Resolve the members set for the current scope and group.
-     *
-     * @private
-     */
-    __resolveGroup() {
-      const scope = getScope?.(this);
-      const group = `${namespace}${getGroup(this, scope)}`;
-      return resolveGroupSet(scope, group);
-    }
-    /**
-     * Get the group set.
-     */
-    get $group() {
-      const instances = this.__groupSnapshot ?? this.__resolveGroup();
-      for (const instance of instances) {
-        if (!instance.$el.isConnected) {
-          instances.delete(instance);
-        }
-      }
-      return instances;
-    }
-    constructor(element) {
-      super(element);
-      this.$on("mounted", () => {
-        const instances = this.$group;
-        instances.add(this);
-        this.__groupSnapshot = instances;
-      });
-      this.$on("destroyed", () => {
-        this.__groupSnapshot?.delete(this);
-        this.__groupSnapshot = void 0;
-      });
-    }
-  };
-}
-export {
-  getScopedGroups,
-  withGroup
-};
-//# sourceMappingURL=withGroup.js.map

package/dist/decorators/withGroup.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/decorators/withGroup.ts"],
-  "sourcesContent": ["import type { Base, BaseConfig, BaseProps } from '../Base/Base.js';\nimport type { BaseDecorator, BaseInterface } from '../Base/types.js';\n\nexport interface WithGroupProps extends BaseProps {\n  $options: {\n    group: string;\n  };\n}\n\nexport interface WithGroupInterface extends BaseInterface {\n  get $group(): Set<Base>;\n}\n\n/**\n * Options for the `withGroup` decorator.\n */\nexport interface WithGroupOptions<T extends Base = Base, Scope extends object = object> {\n  /**\n   * Resolve the scope an instance belongs to. Return `undefined` to fall back\n   * to the global (unscoped) registry.\n   */\n  getScope?: (instance: T) => Scope | undefined;\n  /**\n   * Resolve the group name of an instance, optionally using its resolved scope.\n   * Defaults to `instance.$options.group`.\n   */\n  getGroup?: (instance: T, scope: Scope | undefined) => string;\n}\n\n/**\n * Get global groups map.\n */\nfunction groups<T extends Base = Base>(): Map<string, Set<T>> {\n  return (globalThis.__JS_TOOLKIT_GROUPS__ ??= new Map<string, Set<T>>());\n}\n\n/**\n * Scoped groups registry, keyed by scope identity. Scopes are stored in a\n * `WeakMap` so they can be garbage-collected once no longer referenced.\n */\nconst scopedGroups = new WeakMap<object, Map<string, Set<Base>>>();\n\n/**\n * Enumerate the scoped groups registered for a given scope.\n *\n * Returns the live `Map` of `${namespace}${group}` keys to their members set\n * for the given scope, or an empty `Map` for unknown scopes. Unknown scopes are\n * NOT registered as a side effect of reading.\n */\nexport function getScopedGroups(scope: object): Map<string, Set<Base>> {\n  return scopedGroups.get(scope) ?? new Map<string, Set<Base>>();\n}\n\n/**\n * Get the members set for a given `(scope, key)` pair, creating it if needed.\n * When `scope` is `undefined`, the global (unscoped) registry is used.\n */\nfunction resolveGroupSet(scope: object | undefined, key: string): Set<Base> {\n  if (scope) {\n    let map = scopedGroups.get(scope);\n    if (!map) {\n      map = new Map<string, Set<Base>>();\n      scopedGroups.set(scope, map);\n    }\n    let set = map.get(key);\n    if (!set) {\n      set = new Set<Base>();\n      map.set(key, set);\n    }\n    return set;\n  }\n\n  const registry = groups();\n  return registry.get(key) ?? registry.set(key, new Set()).get(key)!;\n}\n\n/**\n * Add group features to easily bind multiple components together.\n *\n * @link https://js-toolkit.studiometa.dev/api/decorators/withGroup.html\n */\nexport function withGroup<S extends Base = Base, Scope extends object = object>(\n  BaseClass: typeof Base,\n  namespace = '',\n  options: WithGroupOptions<S, Scope> = {},\n): BaseDecorator<WithGroupInterface, S, WithGroupProps> {\n  const getScope = options.getScope;\n  const getGroup = options.getGroup ?? ((instance: S) => instance.$options.group);\n\n  // @ts-expect-error Decorators can not be typed.\n  return class WithGroup<T extends BaseProps = BaseProps> extends BaseClass<T & WithGroupProps> {\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      options: {\n        group: String,\n      },\n    };\n\n    /**\n     * The members set remembered at mount time, if any.\n     *\n     * @private\n     */\n    __groupSnapshot: Set<Base> | undefined = undefined;\n\n    /**\n     * Resolve the members set for the current scope and group.\n     *\n     * @private\n     */\n    __resolveGroup() {\n      const scope = getScope?.(this as unknown as S);\n      const group = `${namespace}${getGroup(this as unknown as S, scope)}`;\n      return resolveGroupSet(scope, group);\n    }\n\n    /**\n     * Get the group set.\n     */\n    get $group() {\n      const instances = this.__groupSnapshot ?? this.__resolveGroup();\n\n      for (const instance of instances) {\n        if (!instance.$el.isConnected) {\n          instances.delete(instance);\n        }\n      }\n\n      return instances;\n    }\n\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$on('mounted', () => {\n        // Resolve the members set through the public `$group` getter so that\n        // subclasses overriding it keep receiving the membership writes. At this\n        // point `__groupSnapshot` is still `undefined`, so the base getter\n        // resolves fresh (identical behaviour for non-overriding classes).\n        // Remember the exact set the instance was added to so that on destroy a\n        // member is always removed from the set it joined, even if the scope or\n        // group would now resolve differently.\n        const instances = this.$group;\n        instances.add(this);\n        this.__groupSnapshot = instances;\n      });\n      this.$on('destroyed', () => {\n        this.__groupSnapshot?.delete(this);\n        this.__groupSnapshot = undefined;\n      });\n    }\n  };\n}\n"],
-  "mappings": "AAgCA,SAAS,SAAqD;AAC5D,SAAQ,WAAW,0BAA0B,oBAAI,IAAoB;AACvE;AAMA,MAAM,eAAe,oBAAI,QAAwC;AAS1D,SAAS,gBAAgB,OAAuC;AACrE,SAAO,aAAa,IAAI,KAAK,KAAK,oBAAI,IAAuB;AAC/D;AAMA,SAAS,gBAAgB,OAA2B,KAAwB;AAC1E,MAAI,OAAO;AACT,QAAI,MAAM,aAAa,IAAI,KAAK;AAChC,QAAI,CAAC,KAAK;AACR,YAAM,oBAAI,IAAuB;AACjC,mBAAa,IAAI,OAAO,GAAG;AAAA,IAC7B;AACA,QAAI,MAAM,IAAI,IAAI,GAAG;AACrB,QAAI,CAAC,KAAK;AACR,YAAM,oBAAI,IAAU;AACpB,UAAI,IAAI,KAAK,GAAG;AAAA,IAClB;AACA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,OAAO;AACxB,SAAO,SAAS,IAAI,GAAG,KAAK,SAAS,IAAI,KAAK,oBAAI,IAAI,CAAC,EAAE,IAAI,GAAG;AAClE;AAOO,SAAS,UACd,WACA,YAAY,IACZ,UAAsC,CAAC,GACe;AACtD,QAAM,WAAW,QAAQ;AACzB,QAAM,WAAW,QAAQ,aAAa,CAAC,aAAgB,SAAS,SAAS;AAGzE,SAAO,MAAM,kBAAmD,UAA8B;AAAA,IAC5F,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,SAAS;AAAA,QACP,OAAO;AAAA,MACT;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,kBAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOzC,iBAAiB;AACf,YAAM,QAAQ,WAAW,IAAoB;AAC7C,YAAM,QAAQ,GAAG,SAAS,GAAG,SAAS,MAAsB,KAAK,CAAC;AAClE,aAAO,gBAAgB,OAAO,KAAK;AAAA,IACrC;AAAA;AAAA;AAAA;AAAA,IAKA,IAAI,SAAS;AACX,YAAM,YAAY,KAAK,mBAAmB,KAAK,eAAe;AAE9D,iBAAW,YAAY,WAAW;AAChC,YAAI,CAAC,SAAS,IAAI,aAAa;AAC7B,oBAAU,OAAO,QAAQ;AAAA,QAC3B;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IAEA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,IAAI,WAAW,MAAM;AAQxB,cAAM,YAAY,KAAK;AACvB,kBAAU,IAAI,IAAI;AAClB,aAAK,kBAAkB;AAAA,MACzB,CAAC;AACD,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,iBAAiB,OAAO,IAAI;AACjC,aAAK,kBAAkB;AAAA,MACzB,CAAC;AAAA,IACH;AAAA,EACF;AACF;",
-  "names": []
-}

package/dist/decorators/withIntersectionObserver.d.ts

@@ -1,17 +0,0 @@
-import type { Base, BaseProps } from '../Base/Base.js';
-import type { BaseDecorator, BaseInterface } from '../Base/types.js';
-export interface WithIntersectionObserverProps extends BaseProps {
-    $options: {
-        intersectionObserver: IntersectionObserverInit;
-    };
-    $observer: IntersectionObserver;
-    intersected(entries: IntersectionObserverEntry[]): void;
-}
-export interface WithIntersectionObserverInterface extends BaseInterface {
-    $observer: IntersectionObserver;
-}
-/**
- * IntersectionObserver decoration.
- * @link https://js-toolkit.studiometa.dev/api/decorators/withIntersectionObserver.html
- */
-export declare function withIntersectionObserver<S extends Base>(BaseClass: typeof Base, defaultOptions?: IntersectionObserverInit): BaseDecorator<WithIntersectionObserverInterface, S, WithIntersectionObserverProps>;

package/dist/decorators/withIntersectionObserver.js

@@ -1,45 +0,0 @@
-import { createRange } from "../utils/math/createRange.js";
-function withIntersectionObserver(BaseClass, defaultOptions = { threshold: createRange(0, 1, 0.01) }) {
-  class WithIntersectionObserver extends BaseClass {
-    /**
-     * Config
-     */
-    static config = {
-      ...BaseClass.config,
-      options: {
-        intersectionObserver: Object
-      },
-      emits: ["intersected"]
-    };
-    /**
-     * Intersection observer instance.
-     */
-    $observer;
-    /**
-     * Create an observer when the class in instantiated.
-     */
-    constructor(element) {
-      super(element);
-      this.$observer = new IntersectionObserver(
-        (entries) => {
-          this.__callMethod("intersected", entries);
-        },
-        {
-          ...defaultOptions,
-          ...this.$options.intersectionObserver
-        }
-      );
-      this.$on("mounted", () => {
-        this.$observer.observe(this.$el);
-      });
-      this.$on("destroyed", () => {
-        this.$observer.unobserve(this.$el);
-      });
-    }
-  }
-  return WithIntersectionObserver;
-}
-export {
-  withIntersectionObserver
-};
-//# sourceMappingURL=withIntersectionObserver.js.map

package/dist/decorators/withIntersectionObserver.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/decorators/withIntersectionObserver.ts"],
-  "sourcesContent": ["import type { Base, BaseConfig, BaseProps } from '../Base/Base.js';\nimport type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport { createRange } from '../utils/math/createRange.js';\n\nexport interface WithIntersectionObserverProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n  $observer: IntersectionObserver;\n  intersected(entries: IntersectionObserverEntry[]): void;\n}\n\nexport interface WithIntersectionObserverInterface extends BaseInterface {\n  $observer: IntersectionObserver;\n}\n\n/**\n * IntersectionObserver decoration.\n * @link https://js-toolkit.studiometa.dev/api/decorators/withIntersectionObserver.html\n */\nexport function withIntersectionObserver<S extends Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: createRange(0, 1, 0.01) },\n): BaseDecorator<WithIntersectionObserverInterface, S, WithIntersectionObserverProps> {\n  /**\n   * Class.\n   */\n  class WithIntersectionObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithIntersectionObserverProps\n  > {\n    /**\n     * Config\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      options: {\n        intersectionObserver: Object,\n      },\n      emits: ['intersected'],\n    };\n\n    /**\n     * Intersection observer instance.\n     */\n    $observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$observer = new IntersectionObserver(\n        (entries) => {\n          this.__callMethod('intersected', entries);\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options.intersectionObserver as IntersectionObserverInit),\n        },\n      );\n\n      this.$on('mounted', () => {\n        this.$observer.observe(this.$el);\n      });\n\n      this.$on('destroyed', () => {\n        this.$observer.unobserve(this.$el);\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithIntersectionObserver;\n}\n"],
-  "mappings": "AAEA,SAAS,mBAAmB;AAkBrB,SAAS,yBACd,WAEA,iBAA2C,EAAE,WAAW,YAAY,GAAG,GAAG,IAAI,EAAE,GACI;AAAA,EAIpF,MAAM,iCAAkE,UAEtE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,SAAS;AAAA,QACP,sBAAsB;AAAA,MACxB;AAAA,MACA,OAAO,CAAC,aAAa;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,YAAY,IAAI;AAAA,QACnB,CAAC,YAAY;AACX,eAAK,aAAa,eAAe,OAAO;AAAA,QAC1C;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SAAS;AAAA,QACpB;AAAA,MACF;AAEA,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU,QAAQ,KAAK,GAAG;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,UAAU,KAAK,GAAG;AAAA,MACnC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
-  "names": []
-}

package/dist/decorators/withMountOnMediaQuery.d.ts

@@ -1,18 +0,0 @@
-import type { Base, BaseProps } from '../Base/Base.js';
-import { BaseDecorator, BaseInterface } from '../Base/types.js';
-export interface withMountOnMediaQueryProps extends BaseProps {
-    $options: {
-        media: string;
-    };
-}
-export interface withMountOnMediaQueryInterface extends BaseInterface {
-    /**
-     * @private
-     */
-    __matches: boolean;
-}
-/**
- * IntersectionObserver decoration.
- * @link https://js-toolkit.studiometa.dev/api/decorators/withMountOnMediaQuery.html
- */
-export declare function withMountOnMediaQuery<S extends Base = Base>(BaseClass: typeof Base, media: any): BaseDecorator<withMountOnMediaQueryInterface, S, withMountOnMediaQueryProps>;

package/dist/decorators/withMountOnMediaQuery.js

@@ -1,62 +0,0 @@
-import { isDev } from "../utils/is.js";
-function withMountOnMediaQuery(BaseClass, media) {
-  class WithMountOnMediaQuery extends BaseClass {
-    /**
-     * Config.
-     */
-    static config = {
-      ...BaseClass.config,
-      options: {
-        media: String
-      }
-    };
-    /**
-     * Is the media query matches?
-     *
-     * @private
-     */
-    __matches = false;
-    /**
-     * Listen for media query changes when the class in instantiated.
-     *
-     * @param {HTMLElement} element The component's root element.
-     */
-    constructor(element) {
-      super(element);
-      if (isDev && !this.$options.media && !media) {
-        this.$warn(
-          'Missing either "$options.media" or "media" argument in withMountOnMediaQuery decorator.'
-        );
-        return;
-      }
-      const mediaQueryList = window.matchMedia(this.$options.media || media);
-      this.__matches = mediaQueryList.matches;
-      const changeHandler = (event) => {
-        this.__matches = event.matches;
-        if (event.matches && !this.$isMounted) {
-          this.$mount();
-        } else if (this.$isMounted) {
-          setTimeout(() => this.$destroy());
-        }
-      };
-      mediaQueryList.addEventListener("change", changeHandler);
-      this.$on("terminated", () => {
-        mediaQueryList.removeEventListener("change", changeHandler);
-      });
-    }
-    /**
-     * Override the mounting of the component.
-     */
-    async $mount() {
-      if (this.__matches) {
-        return super.$mount();
-      }
-      return this;
-    }
-  }
-  return WithMountOnMediaQuery;
-}
-export {
-  withMountOnMediaQuery
-};
-//# sourceMappingURL=withMountOnMediaQuery.js.map

package/dist/decorators/withMountOnMediaQuery.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/decorators/withMountOnMediaQuery.ts"],
-  "sourcesContent": ["import type { Base, BaseConfig, BaseProps } from '../Base/Base.js';\nimport { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport { isDev } from '../utils/is.js';\n\nexport interface withMountOnMediaQueryProps extends BaseProps {\n  $options: {\n    media: string;\n  };\n}\n\nexport interface withMountOnMediaQueryInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __matches: boolean;\n}\n\n/**\n * IntersectionObserver decoration.\n * @link https://js-toolkit.studiometa.dev/api/decorators/withMountOnMediaQuery.html\n */\nexport function withMountOnMediaQuery<S extends Base = Base>(\n  BaseClass: typeof Base,\n  media,\n): BaseDecorator<withMountOnMediaQueryInterface, S, withMountOnMediaQueryProps> {\n  /**\n   * Class.\n   */\n  class WithMountOnMediaQuery<T extends BaseProps = BaseProps> extends BaseClass<\n    T & withMountOnMediaQueryProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      options: {\n        media: String,\n      },\n    };\n\n    /**\n     * Is the media query matches?\n     *\n     * @private\n     */\n    __matches = false;\n\n    /**\n     * Listen for media query changes 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      if (isDev && !this.$options.media && !media) {\n        this.$warn(\n          'Missing either \"$options.media\" or \"media\" argument in withMountOnMediaQuery decorator.',\n        );\n        return;\n      }\n\n      const mediaQueryList = window.matchMedia(this.$options.media || media);\n\n      // Set initial value\n      this.__matches = mediaQueryList.matches;\n\n      const changeHandler = (event: MediaQueryListEvent) => {\n        this.__matches = event.matches;\n\n        if (event.matches && !this.$isMounted) {\n          this.$mount();\n        } else if (this.$isMounted) {\n          setTimeout(() => this.$destroy());\n        }\n      };\n\n      // Start listening for changes\n      mediaQueryList.addEventListener('change', changeHandler);\n\n      this.$on('terminated', () => {\n        mediaQueryList.removeEventListener('change', changeHandler);\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    async $mount() {\n      if (this.__matches) {\n        return super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountOnMediaQuery;\n}\n"],
-  "mappings": "AAEA,SAAS,aAAa;AAmBf,SAAS,sBACd,WACA,OAC8E;AAAA,EAI9E,MAAM,8BAA+D,UAEnE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,SAAS;AAAA,QACP,OAAO;AAAA,MACT;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOZ,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,SAAS,CAAC,KAAK,SAAS,SAAS,CAAC,OAAO;AAC3C,aAAK;AAAA,UACH;AAAA,QACF;AACA;AAAA,MACF;AAEA,YAAM,iBAAiB,OAAO,WAAW,KAAK,SAAS,SAAS,KAAK;AAGrE,WAAK,YAAY,eAAe;AAEhC,YAAM,gBAAgB,CAAC,UAA+B;AACpD,aAAK,YAAY,MAAM;AAEvB,YAAI,MAAM,WAAW,CAAC,KAAK,YAAY;AACrC,eAAK,OAAO;AAAA,QACd,WAAW,KAAK,YAAY;AAC1B,qBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,QAClC;AAAA,MACF;AAGA,qBAAe,iBAAiB,UAAU,aAAa;AAEvD,WAAK,IAAI,cAAc,MAAM;AAC3B,uBAAe,oBAAoB,UAAU,aAAa;AAAA,MAC5D,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,SAAS;AACb,UAAI,KAAK,WAAW;AAClB,eAAO,MAAM,OAAO;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
-  "names": []
-}

package/dist/decorators/withMountWhenInView.d.ts

@@ -1,22 +0,0 @@
-import type { Base, BaseProps } from '../Base/Base.js';
-import { BaseDecorator, BaseInterface } from '../Base/types.js';
-export interface WithMountWhenInViewProps extends BaseProps {
-    $options: {
-        intersectionObserver: IntersectionObserverInit;
-    };
-}
-export interface WithMountWhenInViewInterface extends BaseInterface {
-    /**
-     * @private
-     */
-    __isVisible: boolean;
-    /**
-     * @private
-     */
-    __observer: IntersectionObserver;
-}
-/**
- * IntersectionObserver decoration.
- * @link https://js-toolkit.studiometa.dev/api/decorators/withMountWhenInView.html
- */
-export declare function withMountWhenInView<S extends Base = Base>(BaseClass: typeof Base, defaultOptions?: IntersectionObserverInit): BaseDecorator<WithMountWhenInViewInterface, S, WithMountWhenInViewProps>;

package/dist/decorators/withMountWhenInView.js

@@ -1,68 +0,0 @@
-function withMountWhenInView(BaseClass, defaultOptions = { threshold: [0, 1] }) {
-  class WithMountWhenInView extends BaseClass {
-    /**
-     * Config.
-     */
-    static config = {
-      ...BaseClass.config,
-      options: {
-        intersectionObserver: Object
-      }
-    };
-    /**
-     * Is the component visible?
-     *
-     * @private
-     */
-    __isVisible = false;
-    /**
-     * The component's observer.
-     *
-     * @private
-     */
-    __observer;
-    /**
-     * Create an observer when the class in instantiated.
-     *
-     * @param {HTMLElement} element The component's root element.
-     */
-    constructor(element) {
-      super(element);
-      this.__observer = new IntersectionObserver(
-        (entries) => {
-          const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);
-          if (this.__isVisible !== isVisible) {
-            this.__isVisible = isVisible;
-            if (isVisible) {
-              this.$mount();
-            } else {
-              setTimeout(() => this.$destroy());
-            }
-          }
-        },
-        {
-          ...defaultOptions,
-          ...this.$options.intersectionObserver
-        }
-      );
-      this.__observer.observe(this.$el);
-      this.$on("terminated", () => {
-        this.__observer.disconnect();
-      });
-    }
-    /**
-     * Override the mounting of the component.
-     */
-    async $mount() {
-      if (this.__isVisible) {
-        return super.$mount();
-      }
-      return this;
-    }
-  }
-  return WithMountWhenInView;
-}
-export {
-  withMountWhenInView
-};
-//# sourceMappingURL=withMountWhenInView.js.map

package/dist/decorators/withMountWhenInView.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/decorators/withMountWhenInView.ts"],
-  "sourcesContent": ["import type { Base, BaseConfig, BaseProps } from '../Base/Base.js';\nimport { BaseDecorator, BaseInterface } from '../Base/types.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}\n\n/**\n * IntersectionObserver decoration.\n * @link https://js-toolkit.studiometa.dev/api/decorators/withMountWhenInView.html\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      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    async $mount() {\n      if (this.__isVisible) {\n        return 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,SAAS;AAAA,QACP,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,MAAM,SAAS;AACb,UAAI,KAAK,aAAa;AACpB,eAAO,MAAM,OAAO;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
-  "names": []
-}

package/dist/decorators/withMountWhenPrefersMotion.d.ts

@@ -1,6 +0,0 @@
-import type { Base } from '../Base/Base.js';
-import { BaseDecorator, BaseInterface } from '../Base/types.js';
-/**
- * @link https://js-toolkit.studiometa.dev/api/decorators/withMountWhenPrefersMotion.html
- */
-export declare function withMountWhenPrefersMotion<S extends Base = Base>(BaseClass: typeof Base): BaseDecorator<BaseInterface, S>;

package/dist/decorators/withMountWhenPrefersMotion.js

@@ -1,8 +0,0 @@
-import { withMountOnMediaQuery } from "./withMountOnMediaQuery.js";
-function withMountWhenPrefersMotion(BaseClass) {
-  return withMountOnMediaQuery(BaseClass, "not (prefers-reduced-motion)");
-}
-export {
-  withMountWhenPrefersMotion
-};
-//# sourceMappingURL=withMountWhenPrefersMotion.js.map

package/dist/decorators/withMountWhenPrefersMotion.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/decorators/withMountWhenPrefersMotion.ts"],
-  "sourcesContent": ["import type { Base } from '../Base/Base.js';\nimport { withMountOnMediaQuery } from './withMountOnMediaQuery.js';\nimport { BaseDecorator, BaseInterface } from '../Base/types.js';\n\n/**\n * @link https://js-toolkit.studiometa.dev/api/decorators/withMountWhenPrefersMotion.html\n */\nexport function withMountWhenPrefersMotion<S extends Base = Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<BaseInterface, S> {\n  return withMountOnMediaQuery(BaseClass, 'not (prefers-reduced-motion)');\n}\n"],
-  "mappings": "AACA,SAAS,6BAA6B;AAM/B,SAAS,2BACd,WACiC;AACjC,SAAO,sBAAsB,WAAW,8BAA8B;AACxE;",
-  "names": []
-}

package/dist/decorators/withMutation.d.ts

@@ -1,14 +0,0 @@
-import type { Base } from '../Base/Base.js';
-import type { BaseDecorator, BaseInterface } from '../Base/types.js';
-import { type MutationServiceOptions, type MutationServiceProps } from '../services/MutationService.js';
-export type MutationDecoratorOptions = MutationServiceOptions & {
-    target?: (this: Base, instance: Base) => Node;
-};
-export interface WithMutationInterface extends BaseInterface {
-    mutated?(props: MutationServiceProps): void;
-}
-/**
- * Add a mutation observer to a component.
- * @link https://js-toolkit.studiometa.dev/api/decorators/withMutation.html
- */
-export declare function withMutation<S extends Base>(BaseClass: typeof Base, { target, ...options }?: MutationDecoratorOptions): BaseDecorator<BaseInterface, S>;

package/dist/decorators/withMutation.js

@@ -1,36 +0,0 @@
-import {
-  useMutation
-} from "../services/MutationService.js";
-function withMutation(BaseClass, { target = (instance) => instance.$el, ...options } = {}) {
-  class WithMutation extends BaseClass {
-    /**
-     * Config.
-     */
-    static config = {
-      ...BaseClass.config,
-      emits: ["mutated"]
-    };
-    /**
-     * Class constructor.
-     */
-    constructor(element) {
-      super(element);
-      this.$on("mounted", () => {
-        this.$services.register(
-          "mutated",
-          useMutation.bind(void 0, target.call(this, this), options)
-        );
-        this.$services.enable("mutated");
-      });
-      this.$on("destroyed", () => {
-        this.$services.disable("mutated");
-        this.$services.unregister("mutated");
-      });
-    }
-  }
-  return WithMutation;
-}
-export {
-  withMutation
-};
-//# sourceMappingURL=withMutation.js.map

package/dist/decorators/withMutation.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/decorators/withMutation.ts"],
-  "sourcesContent": ["import type { Base, BaseConfig, BaseProps } from '../Base/Base.js';\nimport type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport {\n  type MutationServiceOptions,\n  type MutationServiceProps,\n  useMutation,\n} from '../services/MutationService.js';\n\nexport type MutationDecoratorOptions = MutationServiceOptions & {\n  target?: (this: Base, instance: Base) => Node;\n};\n\nexport interface WithMutationInterface extends BaseInterface {\n  mutated?(props: MutationServiceProps): void;\n}\n\n/**\n * Add a mutation observer to a component.\n * @link https://js-toolkit.studiometa.dev/api/decorators/withMutation.html\n */\nexport function withMutation<S extends Base>(\n  BaseClass: typeof Base,\n  { target = (instance) => instance.$el, ...options }: MutationDecoratorOptions = {},\n): BaseDecorator<BaseInterface, S> {\n  /**\n   * Class.\n   */\n  class WithMutation<T extends BaseProps = BaseProps> extends BaseClass<T & WithMutationInterface> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      emits: ['mutated'],\n    };\n\n    /**\n     * Class constructor.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n      this.$on('mounted', () => {\n        this.$services.register(\n          'mutated',\n          useMutation.bind(undefined, target.call(this, this), options),\n        );\n        this.$services.enable('mutated');\n      });\n\n      this.$on('destroyed', () => {\n        this.$services.disable('mutated');\n        this.$services.unregister('mutated');\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithMutation;\n}\n"],
-  "mappings": "AAEA;AAAA,EAGE;AAAA,OACK;AAcA,SAAS,aACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,KAAK,GAAG,QAAQ,IAA8B,CAAC,GAChD;AAAA,EAIjC,MAAM,qBAAsD,UAAqC;AAAA;AAAA;AAAA;AAAA,IAI/F,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,OAAO,CAAC,SAAS;AAAA,IACnB;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AACb,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU;AAAA,UACb;AAAA,UACA,YAAY,KAAK,QAAW,OAAO,KAAK,MAAM,IAAI,GAAG,OAAO;AAAA,QAC9D;AACA,aAAK,UAAU,OAAO,SAAS;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,QAAQ,SAAS;AAChC,aAAK,UAAU,WAAW,SAAS;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
-  "names": []
-}

package/dist/decorators/withName.d.ts

@@ -1,6 +0,0 @@
-import type { Base, BaseProps } from '../Base/Base.js';
-import type { BaseDecorator, BaseInterface } from '../Base/types.js';
-/**
- * Override the name of the given component.
- */
-export declare function withName<S extends Base = Base>(BaseClass: typeof Base, name: string): BaseDecorator<BaseInterface, S, BaseProps>;

package/dist/decorators/withName.js

@@ -1,12 +0,0 @@
-function withName(BaseClass, name) {
-  return class extends BaseClass {
-    static config = {
-      ...BaseClass.config,
-      name
-    };
-  };
-}
-export {
-  withName
-};
-//# sourceMappingURL=withName.js.map

package/dist/decorators/withName.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/decorators/withName.ts"],
-  "sourcesContent": ["import type { Base, BaseConfig, BaseProps } from '../Base/Base.js';\nimport type { BaseDecorator, BaseInterface } from '../Base/types.js';\n\n/**\n * Override the name of the given component.\n */\nexport function withName<S extends Base = Base>(\n  BaseClass: typeof Base,\n  name: string,\n): BaseDecorator<BaseInterface, S, BaseProps> {\n  // @ts-ignore\n  return class extends BaseClass {\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name,\n    };\n  };\n}\n"],
-  "mappings": "AAMO,SAAS,SACd,WACA,MAC4C;AAE5C,SAAO,cAAc,UAAU;AAAA,IAC7B,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF;",
-  "names": []
-}

package/dist/decorators/withRelativePointer.d.ts

@@ -1,14 +0,0 @@
-import type { Base } from '../Base/Base.js';
-import type { BaseDecorator, BaseInterface } from '../Base/types.js';
-import { type PointerServiceProps } from '../services/PointerService.js';
-export type RelativePointerDecoratorOptions = {
-    target?: (this: Base, instance: Base) => HTMLElement;
-};
-export interface RelativePointerInterface extends BaseInterface {
-    movedrelative?(props: PointerServiceProps): void;
-}
-/**
- * Add dragging capabilities to a component.
- * @link https://js-toolkit.studiometa.dev/api/decorators/withRelativePointer.html
- */
-export declare function withRelativePointer<S extends Base>(BaseClass: typeof Base, { target }?: RelativePointerDecoratorOptions): BaseDecorator<RelativePointerInterface, S>;

package/dist/decorators/withRelativePointer.js

@@ -1,34 +0,0 @@
-import { usePointer } from "../services/PointerService.js";
-function withRelativePointer(BaseClass, { target = (instance) => instance.$el } = {}) {
-  class WithRelativePointer extends BaseClass {
-    /**
-     * Config.
-     */
-    static config = {
-      ...BaseClass.config,
-      emits: ["movedrelative"]
-    };
-    /**
-     * Class constructor.
-     */
-    constructor(element) {
-      super(element);
-      this.$on("mounted", () => {
-        this.$services.register(
-          "movedrelative",
-          usePointer.bind(void 0, target.call(this, this))
-        );
-        this.$services.enable("movedrelative");
-      });
-      this.$on("destroyed", () => {
-        this.$services.disable("movedrelative");
-        this.$services.unregister("movedrelative");
-      });
-    }
-  }
-  return WithRelativePointer;
-}
-export {
-  withRelativePointer
-};
-//# sourceMappingURL=withRelativePointer.js.map