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

package/dist/helpers/getDirectChildren.d.ts

@@ -1,23 +0,0 @@
-import { Base } from '../Base/Base.js';
-/**
- * Get direct children from a parent when working with nested components.
- *
- * @template {Base} T
- * @param  {Base} parentInstance
- * @param  {string} parentName
- * @param  {string} childrenName
- * @return {T[]}
- * @link https://js-toolkit.studiometa.dev/api/helpers/getDirectChildren.html
- */
-export declare function getDirectChildren<T extends Base = Base>(parentInstance: Base, parentName: string, childrenName: string): T[];
-/**
- * Test if a component instance is a direct child from the given component.
- *
- * @param  {Base}    parentInstance
- * @param  {string}  parentName
- * @param  {string}  childrenName
- * @param  {Base}    childInstance
- * @return {boolean}
- * @link https://js-toolkit.studiometa.dev/api/helpers/isDirectChild.html
- */
-export declare function isDirectChild(parentInstance: any, parentName: any, childrenName: any, childInstance: any): boolean;

package/dist/helpers/getDirectChildren.js

@@ -1,31 +0,0 @@
-import { isArray } from "../utils/is.js";
-function getDirectChildren(parentInstance, parentName, childrenName) {
-  const allChildren = parentInstance.__children.props;
-  const children = allChildren[childrenName];
-  const nestedParents = allChildren[parentName];
-  if (!isArray(children)) {
-    return [];
-  }
-  if (!isArray(nestedParents) || nestedParents.length <= 0) {
-    return children;
-  }
-  const directChildren = [];
-  for (const child of children) {
-    for (const nestedParent of nestedParents) {
-      const nestedChildren = nestedParent.__children.props[childrenName];
-      if (isArray(nestedChildren) && nestedChildren.includes(child)) {
-        continue;
-      }
-      directChildren.push(child);
-    }
-  }
-  return directChildren;
-}
-function isDirectChild(parentInstance, parentName, childrenName, childInstance) {
-  return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);
-}
-export {
-  getDirectChildren,
-  isDirectChild
-};
-//# sourceMappingURL=getDirectChildren.js.map

package/dist/helpers/getDirectChildren.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/helpers/getDirectChildren.ts"],
-  "sourcesContent": ["import { Base, BaseProps } from '../Base/Base.js';\nimport { isArray } from '../utils/is.js';\n\n/**\n * Get direct children from a parent when working with nested components.\n *\n * @template {Base} T\n * @param  {Base} parentInstance\n * @param  {string} parentName\n * @param  {string} childrenName\n * @return {T[]}\n * @link https://js-toolkit.studiometa.dev/api/helpers/getDirectChildren.html\n */\nexport function getDirectChildren<T extends Base = Base>(\n  parentInstance: Base,\n  parentName: string,\n  childrenName: string,\n): T[] {\n  const allChildren = parentInstance.__children.props;\n  const children = allChildren[childrenName] as Base<BaseProps>[];\n  const nestedParents = allChildren[parentName] as Base<BaseProps>[];\n\n  if (!isArray(children)) {\n    return [];\n  }\n\n  if (!isArray(nestedParents) || nestedParents.length <= 0) {\n    return children as T[];\n  }\n\n  const directChildren = [];\n\n  for (const child of children) {\n    for (const nestedParent of nestedParents) {\n      const nestedChildren = nestedParent.__children.props[childrenName] as Base<BaseProps>[];\n\n      if (isArray(nestedChildren) && nestedChildren.includes(child)) {\n        continue;\n      }\n\n      directChildren.push(child);\n    }\n  }\n\n  return directChildren;\n}\n\n/**\n * Test if a component instance is a direct child from the given component.\n *\n * @param  {Base}    parentInstance\n * @param  {string}  parentName\n * @param  {string}  childrenName\n * @param  {Base}    childInstance\n * @return {boolean}\n * @link https://js-toolkit.studiometa.dev/api/helpers/isDirectChild.html\n */\nexport function isDirectChild(parentInstance, parentName, childrenName, childInstance) {\n  return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);\n}\n"],
-  "mappings": "AACA,SAAS,eAAe;AAYjB,SAAS,kBACd,gBACA,YACA,cACK;AACL,QAAM,cAAc,eAAe,WAAW;AAC9C,QAAM,WAAW,YAAY,YAAY;AACzC,QAAM,gBAAgB,YAAY,UAAU;AAE5C,MAAI,CAAC,QAAQ,QAAQ,GAAG;AACtB,WAAO,CAAC;AAAA,EACV;AAEA,MAAI,CAAC,QAAQ,aAAa,KAAK,cAAc,UAAU,GAAG;AACxD,WAAO;AAAA,EACT;AAEA,QAAM,iBAAiB,CAAC;AAExB,aAAW,SAAS,UAAU;AAC5B,eAAW,gBAAgB,eAAe;AACxC,YAAM,iBAAiB,aAAa,WAAW,MAAM,YAAY;AAEjE,UAAI,QAAQ,cAAc,KAAK,eAAe,SAAS,KAAK,GAAG;AAC7D;AAAA,MACF;AAEA,qBAAe,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF;AAEA,SAAO;AACT;AAYO,SAAS,cAAc,gBAAgB,YAAY,cAAc,eAAe;AACrF,SAAO,kBAAkB,gBAAgB,YAAY,YAAY,EAAE,SAAS,aAAa;AAC3F;",
-  "names": []
-}

package/dist/helpers/getInstanceFromElement.d.ts

@@ -1,6 +0,0 @@
-import type { BaseConstructor, BaseEl } from '../Base/Base.js';
-/**
- * Get a component instance from a DOM element.
- * @link https://js-toolkit.studiometa.dev/api/helpers/getInstanceFromElement.html
- */
-export declare function getInstanceFromElement<T extends BaseConstructor>(element: BaseEl, Constructor: T): InstanceType<T> | null;

package/dist/helpers/getInstanceFromElement.js

@@ -1,10 +0,0 @@
-function getInstanceFromElement(element, Constructor) {
-  if (!element || !element.__base__ || !element.__base__.has(Constructor.config.name)) {
-    return null;
-  }
-  return element.__base__.get(Constructor.config.name);
-}
-export {
-  getInstanceFromElement
-};
-//# sourceMappingURL=getInstanceFromElement.js.map

package/dist/helpers/getInstanceFromElement.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/helpers/getInstanceFromElement.ts"],
-  "sourcesContent": ["import type { BaseConstructor, BaseEl } from '../Base/Base.js';\n\n/**\n * Get a component instance from a DOM element.\n * @link https://js-toolkit.studiometa.dev/api/helpers/getInstanceFromElement.html\n */\nexport function getInstanceFromElement<T extends BaseConstructor>(\n  element: BaseEl,\n  Constructor: T,\n): InstanceType<T> | null {\n  if (!element || !element.__base__ || !element.__base__.has(Constructor.config.name)) {\n    return null;\n  }\n\n  return element.__base__.get(Constructor.config.name) as InstanceType<T>;\n}\n"],
-  "mappings": "AAMO,SAAS,uBACd,SACA,aACwB;AACxB,MAAI,CAAC,WAAW,CAAC,QAAQ,YAAY,CAAC,QAAQ,SAAS,IAAI,YAAY,OAAO,IAAI,GAAG;AACnF,WAAO;AAAA,EACT;AAEA,SAAO,QAAQ,SAAS,IAAI,YAAY,OAAO,IAAI;AACrD;",
-  "names": []
-}

package/dist/helpers/importOnInteraction.d.ts

@@ -1,19 +0,0 @@
-import type { Base, BaseConstructor } from '../Base/Base.js';
-/**
- * Import a component on an interaction.
- *
- * @template {BaseConstructor} [T=BaseConstructor]
- * @param {() => Promise<T|{default:T}>} fn
- *   The import function.
- * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement
- *   The name or selector for the component.
- * @param {string|string[]} events
- *   The events to listen to to trigger the import.
- * @param {Base} [parent]
- *   The parent component.
- * @return {Promise<InstanceType<T>>}
- * @link https://js-toolkit.studiometa.dev/api/helpers/importOnInteraction.html
- */
-export declare function importOnInteraction<T extends BaseConstructor = BaseConstructor>(fn: () => Promise<T | {
-    default: T;
-}>, nameOrSelectorOrElement: string | HTMLElement | HTMLElement[], events: string | string[], parent?: Base): Promise<T>;

package/dist/helpers/importOnInteraction.js

@@ -1,27 +0,0 @@
-import { getComponentResolver } from "../utils/getComponentResolver.js";
-import { isString } from "../utils/is.js";
-import { getTargetElements } from "./utils.js";
-function importOnInteraction(fn, nameOrSelectorOrElement, events, parent) {
-  const normalizedEvents = isString(events) ? [events] : events;
-  const resolver = getComponentResolver(fn);
-  return new Promise((resolve) => {
-    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);
-    const eventListenerOptions = {
-      capture: true,
-      passive: true,
-      once: true
-    };
-    const handler = () => {
-      resolver(resolve);
-    };
-    for (const element of elements) {
-      for (const event of normalizedEvents) {
-        element.addEventListener(event, handler, eventListenerOptions);
-      }
-    }
-  });
-}
-export {
-  importOnInteraction
-};
-//# sourceMappingURL=importOnInteraction.js.map

package/dist/helpers/importOnInteraction.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/helpers/importOnInteraction.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/Base.js';\nimport { getComponentResolver } from '../utils/getComponentResolver.js';\nimport { isString } from '../utils/is.js';\nimport { getTargetElements } from './utils.js';\n\n/**\n * Import a component on an interaction.\n *\n * @template {BaseConstructor} [T=BaseConstructor]\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {string|string[]} events\n *   The events to listen to to trigger the import.\n * @param {Base} [parent]\n *   The parent component.\n * @return {Promise<InstanceType<T>>}\n * @link https://js-toolkit.studiometa.dev/api/helpers/importOnInteraction.html\n */\nexport function importOnInteraction<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],\n  events: string | string[],\n  parent?: Base,\n): Promise<T> {\n  const normalizedEvents = isString(events) ? [events] : events;\n\n  const resolver = getComponentResolver(fn);\n\n  return new Promise((resolve) => {\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    const eventListenerOptions = {\n      capture: true,\n      passive: true,\n      once: true,\n    };\n    const handler = () => {\n      resolver(resolve);\n    };\n\n    for (const element of elements) {\n      for (const event of normalizedEvents) {\n        element.addEventListener(event, handler, eventListenerOptions);\n      }\n    }\n  });\n}\n"],
-  "mappings": "AACA,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,yBAAyB;AAiB3B,SAAS,oBACd,IACA,yBACA,QACA,QACY;AACZ,QAAM,mBAAmB,SAAS,MAAM,IAAI,CAAC,MAAM,IAAI;AAEvD,QAAM,WAAW,qBAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,WAAW,kBAAkB,yBAAyB,QAAQ,GAAG;AACvE,UAAM,uBAAuB;AAAA,MAC3B,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AACA,UAAM,UAAU,MAAM;AACpB,eAAS,OAAO;AAAA,IAClB;AAEA,eAAW,WAAW,UAAU;AAC9B,iBAAW,SAAS,kBAAkB;AACpC,gBAAQ,iBAAiB,OAAO,SAAS,oBAAoB;AAAA,MAC/D;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
-  "names": []
-}

package/dist/helpers/importOnMediaQuery.d.ts

@@ -1,15 +0,0 @@
-import type { BaseConstructor } from '../Base/Base.js';
-/**
- * Import a component when given media query is true.
- *
- * @template {BaseConstructor} T
- * @param {() => Promise<T|{default:T}>} fn
- *   The import function.
- * @param {string} media
- *   The media query name and value (see https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features)
- * @return {Promise<T>}
- * @link https://js-toolkit.studiometa.dev/api/helpers/importOnMediaQuery.html
- */
-export declare function importOnMediaQuery<T extends BaseConstructor = BaseConstructor>(fn: () => Promise<T | {
-    default: T;
-}>, media: string): Promise<T>;

package/dist/helpers/importOnMediaQuery.js

@@ -1,22 +0,0 @@
-import { getComponentResolver } from "../utils/getComponentResolver.js";
-function importOnMediaQuery(fn, media) {
-  const resolver = getComponentResolver(fn);
-  return new Promise((resolve) => {
-    const mediaQueryList = window.matchMedia(media);
-    if (mediaQueryList.matches) {
-      resolver(resolve);
-    }
-    const changeHandler = (event) => {
-      if (event.matches) {
-        setTimeout(() => {
-          resolver(resolve, () => mediaQueryList.removeEventListener("change", changeHandler));
-        }, 0);
-      }
-    };
-    mediaQueryList.addEventListener("change", changeHandler);
-  });
-}
-export {
-  importOnMediaQuery
-};
-//# sourceMappingURL=importOnMediaQuery.js.map

package/dist/helpers/importOnMediaQuery.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/helpers/importOnMediaQuery.ts"],
-  "sourcesContent": ["import type { BaseConstructor } from '../Base/Base.js';\nimport { getComponentResolver } from '../utils/getComponentResolver.js';\n\n/**\n * Import a component when given media query is true.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string} media\n *   The media query name and value (see https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features)\n * @return {Promise<T>}\n * @link https://js-toolkit.studiometa.dev/api/helpers/importOnMediaQuery.html\n */\nexport function importOnMediaQuery<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  media: string,\n): Promise<T> {\n  const resolver = getComponentResolver(fn);\n\n  return new Promise((resolve) => {\n    const mediaQueryList = window.matchMedia(media);\n\n    if (mediaQueryList.matches) {\n      resolver(resolve);\n    }\n\n    const changeHandler = (event: MediaQueryListEvent) => {\n      if (event.matches) {\n        setTimeout(() => {\n          // Remove listener and mount the component\n          resolver(resolve, () => mediaQueryList.removeEventListener('change', changeHandler));\n        }, 0);\n      }\n    };\n\n    // Start listening for changes\n    mediaQueryList.addEventListener('change', changeHandler);\n  });\n}\n"],
-  "mappings": "AACA,SAAS,4BAA4B;AAa9B,SAAS,mBACd,IACA,OACY;AACZ,QAAM,WAAW,qBAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,iBAAiB,OAAO,WAAW,KAAK;AAE9C,QAAI,eAAe,SAAS;AAC1B,eAAS,OAAO;AAAA,IAClB;AAEA,UAAM,gBAAgB,CAAC,UAA+B;AACpD,UAAI,MAAM,SAAS;AACjB,mBAAW,MAAM;AAEf,mBAAS,SAAS,MAAM,eAAe,oBAAoB,UAAU,aAAa,CAAC;AAAA,QACrF,GAAG,CAAC;AAAA,MACN;AAAA,IACF;AAGA,mBAAe,iBAAiB,UAAU,aAAa;AAAA,EACzD,CAAC;AACH;",
-  "names": []
-}

package/dist/helpers/importWhenIdle.d.ts

@@ -1,19 +0,0 @@
-import type { BaseConstructor } from '../Base/Base.js';
-type ImportWhenIdleOptions = {
-    timeout?: number;
-};
-/**
- * Import a component when user is idle.
- *
- * @template {BaseConstructor} T
- * @param {() => Promise<T|{default:T}>} fn
- *   The import function.
- * @param {ImportWhenIdleOptions} [options]
- *   The time to wait before triggering the callback if never idle.
- * @return {Promise<T>}
- * @link https://js-toolkit.studiometa.dev/api/helpers/importWhenIdle.html
- */
-export declare function importWhenIdle<T extends BaseConstructor = BaseConstructor>(fn: () => Promise<T | {
-    default: T;
-}>, { timeout }?: ImportWhenIdleOptions): Promise<T>;
-export {};

package/dist/helpers/importWhenIdle.js

@@ -1,24 +0,0 @@
-import { getComponentResolver } from "../utils/getComponentResolver.js";
-function importWhenIdle(fn, { timeout = 1 } = {}) {
-  const resolver = getComponentResolver(fn);
-  return new Promise((resolve) => {
-    if (!("requestIdleCallback" in window)) {
-      setTimeout(() => {
-        resolver(resolve);
-      }, timeout);
-    } else {
-      window.requestIdleCallback(
-        () => {
-          setTimeout(() => {
-            resolver(resolve);
-          }, 0);
-        },
-        { timeout }
-      );
-    }
-  });
-}
-export {
-  importWhenIdle
-};
-//# sourceMappingURL=importWhenIdle.js.map

package/dist/helpers/importWhenIdle.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/helpers/importWhenIdle.ts"],
-  "sourcesContent": ["import type { BaseConstructor } from '../Base/Base.js';\nimport { getComponentResolver } from '../utils/getComponentResolver.js';\n\ntype ImportWhenIdleOptions = {\n  timeout?: number;\n};\n\n/**\n * Import a component when user is idle.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {ImportWhenIdleOptions} [options]\n *   The time to wait before triggering the callback if never idle.\n * @return {Promise<T>}\n * @link https://js-toolkit.studiometa.dev/api/helpers/importWhenIdle.html\n */\nexport function importWhenIdle<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  { timeout = 1 }: ImportWhenIdleOptions = {},\n): Promise<T> {\n  const resolver = getComponentResolver(fn);\n\n  return new Promise((resolve) => {\n    if (!('requestIdleCallback' in window)) {\n      setTimeout(() => {\n        resolver(resolve);\n      }, timeout);\n    } else {\n      window.requestIdleCallback(\n        () => {\n          setTimeout(() => {\n            resolver(resolve);\n          }, 0);\n        },\n        { timeout },\n      );\n    }\n  });\n}\n"],
-  "mappings": "AACA,SAAS,4BAA4B;AAiB9B,SAAS,eACd,IACA,EAAE,UAAU,EAAE,IAA2B,CAAC,GAC9B;AACZ,QAAM,WAAW,qBAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,QAAI,EAAE,yBAAyB,SAAS;AACtC,iBAAW,MAAM;AACf,iBAAS,OAAO;AAAA,MAClB,GAAG,OAAO;AAAA,IACZ,OAAO;AACL,aAAO;AAAA,QACL,MAAM;AACJ,qBAAW,MAAM;AACf,qBAAS,OAAO;AAAA,UAClB,GAAG,CAAC;AAAA,QACN;AAAA,QACA,EAAE,QAAQ;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
-  "names": []
-}

package/dist/helpers/importWhenPrefersMotion.d.ts

@@ -1,12 +0,0 @@
-import type { BaseConstructor } from '../Base/Base.js';
-/**
- * Import a component if user does not reduce motion.
- *
- * @template {BaseConstructor} T
- * @param {() => Promise<T|{default:T}>} fn
- * @return {Promise<T>}
- * @link https://js-toolkit.studiometa.dev/api/helpers/importWhenPrefersMotion.html
- */
-export declare function importWhenPrefersMotion<T extends BaseConstructor = BaseConstructor>(fn: () => Promise<T | {
-    default: T;
-}>): Promise<T>;

package/dist/helpers/importWhenPrefersMotion.js

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

package/dist/helpers/importWhenPrefersMotion.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/helpers/importWhenPrefersMotion.ts"],
-  "sourcesContent": ["import type { BaseConstructor } from '../Base/Base.js';\nimport { importOnMediaQuery } from './importOnMediaQuery.js';\n\n/**\n * Import a component if user does not reduce motion.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n * @return {Promise<T>}\n * @link https://js-toolkit.studiometa.dev/api/helpers/importWhenPrefersMotion.html\n */\nexport function importWhenPrefersMotion<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n): Promise<T> {\n  return importOnMediaQuery(fn, 'not (prefers-reduced-motion)');\n}\n"],
-  "mappings": "AACA,SAAS,0BAA0B;AAU5B,SAAS,wBACd,IACY;AACZ,SAAO,mBAAmB,IAAI,8BAA8B;AAC9D;",
-  "names": []
-}

package/dist/helpers/importWhenVisible.d.ts

@@ -1,19 +0,0 @@
-import type { Base, BaseConstructor } from '../Base/Base.js';
-/**
- * Import a component when it is visible.
- *
- * @template {BaseConstructor} T
- * @param {() => Promise<T|{default:T}>} fn
- *   The import function.
- * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement
- *   The name or selector for the component.
- * @param {Base} [parent]
- *   The parent component.
- * @param {IntersectionObserverInit} [observerOptions]
- *   Options for the `IntersectionObserver` instance.
- * @return {Promise<T>}
- * @link https://js-toolkit.studiometa.dev/api/helpers/importWhenVisible.html
- */
-export declare function importWhenVisible<T extends BaseConstructor = BaseConstructor>(fn: () => Promise<T | {
-    default: T;
-}>, nameOrSelectorOrElement: string | HTMLElement | HTMLElement[], parent?: Base, observerOptions?: IntersectionObserverInit): Promise<T>;

package/dist/helpers/importWhenVisible.js

@@ -1,21 +0,0 @@
-import { getComponentResolver } from "../utils/getComponentResolver.js";
-import { getTargetElements } from "./utils.js";
-function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions = {}) {
-  const resolver = getComponentResolver(fn);
-  return new Promise((resolve) => {
-    const observer = new IntersectionObserver((entries) => {
-      const someEntriesAreVisible = entries.some((entry) => entry.isIntersecting);
-      if (someEntriesAreVisible) {
-        setTimeout(() => {
-          resolver(resolve, () => observer.disconnect());
-        }, 0);
-      }
-    }, observerOptions);
-    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);
-    for (const element of elements) observer.observe(element);
-  });
-}
-export {
-  importWhenVisible
-};
-//# sourceMappingURL=importWhenVisible.js.map

package/dist/helpers/importWhenVisible.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/helpers/importWhenVisible.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/Base.js';\nimport { getComponentResolver } from '../utils/getComponentResolver.js';\nimport { getTargetElements } from './utils.js';\n\n/**\n * Import a component when it is visible.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {Base} [parent]\n *   The parent component.\n * @param {IntersectionObserverInit} [observerOptions]\n *   Options for the `IntersectionObserver` instance.\n * @return {Promise<T>}\n * @link https://js-toolkit.studiometa.dev/api/helpers/importWhenVisible.html\n */\nexport function importWhenVisible<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],\n  parent?: Base,\n  observerOptions: IntersectionObserverInit = {},\n): Promise<T> {\n  const resolver = getComponentResolver(fn);\n\n  return new Promise((resolve) => {\n    const observer = new IntersectionObserver((entries) => {\n      const someEntriesAreVisible = entries.some((entry) => entry.isIntersecting);\n      if (someEntriesAreVisible) {\n        setTimeout(() => {\n          resolver(resolve, () => observer.disconnect());\n        }, 0);\n      }\n    }, observerOptions);\n\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    for (const element of elements) observer.observe(element);\n  });\n}\n"],
-  "mappings": "AACA,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAiB3B,SAAS,kBACd,IACA,yBACA,QACA,kBAA4C,CAAC,GACjC;AACZ,QAAM,WAAW,qBAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACrD,YAAM,wBAAwB,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc;AAC1E,UAAI,uBAAuB;AACzB,mBAAW,MAAM;AACf,mBAAS,SAAS,MAAM,SAAS,WAAW,CAAC;AAAA,QAC/C,GAAG,CAAC;AAAA,MACN;AAAA,IACF,GAAG,eAAe;AAElB,UAAM,WAAW,kBAAkB,yBAAyB,QAAQ,GAAG;AACvE,eAAW,WAAW,SAAU,UAAS,QAAQ,OAAO;AAAA,EAC1D,CAAC;AACH;",
-  "names": []
-}

package/dist/helpers/index.d.ts

@@ -1,14 +0,0 @@
-export { createApp, type CreateAppOptions } from './createApp.js';
-export { defineFeatures } from './defineFeatures.js';
-export { getClosestParent } from './getClosestParent.js';
-export { getDirectChildren, isDirectChild } from './getDirectChildren.js';
-export { getInstanceFromElement } from './getInstanceFromElement.js';
-export { importOnInteraction } from './importOnInteraction.js';
-export { importOnMediaQuery } from './importOnMediaQuery.js';
-export { importWhenIdle } from './importWhenIdle.js';
-export { importWhenPrefersMotion } from './importWhenPrefersMotion.js';
-export { importWhenVisible } from './importWhenVisible.js';
-export { logTree } from './logTree.js';
-export { registerComponent } from './registerComponent.js';
-export { registerComponents } from './registerComponents.js';
-export { type QueryOptions, queryComponent, queryComponentAll, closestComponent, } from './queryComponent.js';

package/dist/helpers/index.js

@@ -1,38 +0,0 @@
-import { createApp } from "./createApp.js";
-import { defineFeatures } from "./defineFeatures.js";
-import { getClosestParent } from "./getClosestParent.js";
-import { getDirectChildren, isDirectChild } from "./getDirectChildren.js";
-import { getInstanceFromElement } from "./getInstanceFromElement.js";
-import { importOnInteraction } from "./importOnInteraction.js";
-import { importOnMediaQuery } from "./importOnMediaQuery.js";
-import { importWhenIdle } from "./importWhenIdle.js";
-import { importWhenPrefersMotion } from "./importWhenPrefersMotion.js";
-import { importWhenVisible } from "./importWhenVisible.js";
-import { logTree } from "./logTree.js";
-import { registerComponent } from "./registerComponent.js";
-import { registerComponents } from "./registerComponents.js";
-import {
-  queryComponent,
-  queryComponentAll,
-  closestComponent
-} from "./queryComponent.js";
-export {
-  closestComponent,
-  createApp,
-  defineFeatures,
-  getClosestParent,
-  getDirectChildren,
-  getInstanceFromElement,
-  importOnInteraction,
-  importOnMediaQuery,
-  importWhenIdle,
-  importWhenPrefersMotion,
-  importWhenVisible,
-  isDirectChild,
-  logTree,
-  queryComponent,
-  queryComponentAll,
-  registerComponent,
-  registerComponents
-};
-//# sourceMappingURL=index.js.map

package/dist/helpers/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/helpers/index.ts"],
-  "sourcesContent": ["export { createApp, type CreateAppOptions } from './createApp.js';\nexport { defineFeatures } from './defineFeatures.js';\nexport { getClosestParent } from './getClosestParent.js';\nexport { getDirectChildren, isDirectChild } from './getDirectChildren.js';\nexport { getInstanceFromElement } from './getInstanceFromElement.js';\nexport { importOnInteraction } from './importOnInteraction.js';\nexport { importOnMediaQuery } from './importOnMediaQuery.js';\nexport { importWhenIdle } from './importWhenIdle.js';\nexport { importWhenPrefersMotion } from './importWhenPrefersMotion.js';\nexport { importWhenVisible } from './importWhenVisible.js';\nexport { logTree } from './logTree.js';\nexport { registerComponent } from './registerComponent.js';\nexport { registerComponents } from './registerComponents.js';\nexport {\n  type QueryOptions,\n  queryComponent,\n  queryComponentAll,\n  closestComponent,\n} from './queryComponent.js';\n"],
-  "mappings": "AAAA,SAAS,iBAAwC;AACjD,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB,qBAAqB;AACjD,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
-  "names": []
-}

package/dist/helpers/logTree.d.ts

@@ -1,17 +0,0 @@
-import type { Base } from '../Base/Base.js';
-/**
- * Log the component tree starting from the given instance.
- *
- * Uses the global instance registry and DOM containment to build the tree,
- * without relying on the deprecated `$children` API.
- *
- * @param   {Base} instance The root component instance.
- * @example
- * ```js
- * import { createApp, logTree } from '@studiometa/js-toolkit';
- *
- * const useApp = createApp(App);
- * useApp().then((app) => logTree(app));
- * ```
- */
-export declare function logTree(instance: Base): void;

package/dist/helpers/logTree.js

@@ -1,59 +0,0 @@
-import { getInstances } from "../Base/utils.js";
-function buildTree(root) {
-  const allInstances = getInstances();
-  const rootNode = { instance: root, children: [] };
-  const descendants = [];
-  for (const instance of allInstances) {
-    if (instance !== root && root.$el.contains(instance.$el)) {
-      descendants.push(instance);
-    }
-  }
-  descendants.sort((a, b) => {
-    const position = a.$el.compareDocumentPosition(b.$el);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
-    return 0;
-  });
-  const nodeMap = /* @__PURE__ */ new Map();
-  nodeMap.set(root, rootNode);
-  for (const instance of descendants) {
-    const node = { instance, children: [] };
-    nodeMap.set(instance, node);
-    let parentNode = rootNode;
-    for (const [candidate, candidateNode] of nodeMap) {
-      if (candidate !== instance && candidate.$el.contains(instance.$el) && // Pick the most specific (deepest) container
-      parentNode.instance.$el.contains(candidate.$el)) {
-        parentNode = candidateNode;
-      }
-    }
-    parentNode.children.push(node);
-  }
-  return rootNode;
-}
-function logNode(node) {
-  const { instance } = node;
-  const mounted = instance.$isMounted;
-  const status = mounted ? "\u25CF" : "\u25CB";
-  const label = `${status} ${instance.$id}`;
-  if (node.children.length > 0) {
-    console.groupCollapsed(label, instance.$el);
-    for (const child of node.children) {
-      logNode(child);
-    }
-    console.groupEnd();
-  } else {
-    console.log(label, instance.$el);
-  }
-}
-function logTree(instance) {
-  const tree = buildTree(instance);
-  console.group(`\u{1F333} ${instance.$config.name}`);
-  for (const child of tree.children) {
-    logNode(child);
-  }
-  console.groupEnd();
-}
-export {
-  logTree
-};
-//# sourceMappingURL=logTree.js.map

package/dist/helpers/logTree.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/helpers/logTree.ts"],
-  "sourcesContent": ["import type { Base } from '../Base/Base.js';\nimport { getInstances } from '../Base/utils.js';\n\n/**\n * Build a tree structure from a flat set of instances using DOM containment.\n */\nfunction buildTree(root: Base): TreeNode {\n  const allInstances = getInstances();\n  const rootNode: TreeNode = { instance: root, children: [] };\n\n  // Collect all instances that are descendants of root (excluding root itself)\n  const descendants: Base[] = [];\n  for (const instance of allInstances) {\n    if (instance !== root && root.$el.contains(instance.$el)) {\n      descendants.push(instance);\n    }\n  }\n\n  // Sort by DOM order (depth-first)\n  descendants.sort((a, b) => {\n    const position = a.$el.compareDocumentPosition(b.$el);\n    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n    return 0;\n  });\n\n  // Build tree: assign each instance to its closest ancestor in the tree\n  const nodeMap = new Map<Base, TreeNode>();\n  nodeMap.set(root, rootNode);\n\n  for (const instance of descendants) {\n    const node: TreeNode = { instance, children: [] };\n    nodeMap.set(instance, node);\n\n    // Find the closest ancestor that is already in the tree\n    let parentNode = rootNode;\n    for (const [candidate, candidateNode] of nodeMap) {\n      if (\n        candidate !== instance &&\n        candidate.$el.contains(instance.$el) &&\n        // Pick the most specific (deepest) container\n        parentNode.instance.$el.contains(candidate.$el)\n      ) {\n        parentNode = candidateNode;\n      }\n    }\n\n    parentNode.children.push(node);\n  }\n\n  return rootNode;\n}\n\ninterface TreeNode {\n  instance: Base;\n  children: TreeNode[];\n}\n\n/**\n * Log a tree node and its children using console groups.\n */\nfunction logNode(node: TreeNode): void {\n  const { instance } = node;\n  const mounted = instance.$isMounted;\n  const status = mounted ? '\u25CF' : '\u25CB';\n  const label = `${status} ${instance.$id}`;\n\n  if (node.children.length > 0) {\n    console.groupCollapsed(label, instance.$el);\n    for (const child of node.children) {\n      logNode(child);\n    }\n    console.groupEnd();\n  } else {\n    console.log(label, instance.$el);\n  }\n}\n\n/**\n * Log the component tree starting from the given instance.\n *\n * Uses the global instance registry and DOM containment to build the tree,\n * without relying on the deprecated `$children` API.\n *\n * @param   {Base} instance The root component instance.\n * @example\n * ```js\n * import { createApp, logTree } from '@studiometa/js-toolkit';\n *\n * const useApp = createApp(App);\n * useApp().then((app) => logTree(app));\n * ```\n */\nexport function logTree(instance: Base): void {\n  const tree = buildTree(instance);\n  console.group(`\uD83C\uDF33 ${instance.$config.name}`);\n  for (const child of tree.children) {\n    logNode(child);\n  }\n  console.groupEnd();\n}\n"],
-  "mappings": "AACA,SAAS,oBAAoB;AAK7B,SAAS,UAAU,MAAsB;AACvC,QAAM,eAAe,aAAa;AAClC,QAAM,WAAqB,EAAE,UAAU,MAAM,UAAU,CAAC,EAAE;AAG1D,QAAM,cAAsB,CAAC;AAC7B,aAAW,YAAY,cAAc;AACnC,QAAI,aAAa,QAAQ,KAAK,IAAI,SAAS,SAAS,GAAG,GAAG;AACxD,kBAAY,KAAK,QAAQ;AAAA,IAC3B;AAAA,EACF;AAGA,cAAY,KAAK,CAAC,GAAG,MAAM;AACzB,UAAM,WAAW,EAAE,IAAI,wBAAwB,EAAE,GAAG;AACpD,QAAI,WAAW,KAAK,4BAA6B,QAAO;AACxD,QAAI,WAAW,KAAK,4BAA6B,QAAO;AACxD,WAAO;AAAA,EACT,CAAC;AAGD,QAAM,UAAU,oBAAI,IAAoB;AACxC,UAAQ,IAAI,MAAM,QAAQ;AAE1B,aAAW,YAAY,aAAa;AAClC,UAAM,OAAiB,EAAE,UAAU,UAAU,CAAC,EAAE;AAChD,YAAQ,IAAI,UAAU,IAAI;AAG1B,QAAI,aAAa;AACjB,eAAW,CAAC,WAAW,aAAa,KAAK,SAAS;AAChD,UACE,cAAc,YACd,UAAU,IAAI,SAAS,SAAS,GAAG;AAAA,MAEnC,WAAW,SAAS,IAAI,SAAS,UAAU,GAAG,GAC9C;AACA,qBAAa;AAAA,MACf;AAAA,IACF;AAEA,eAAW,SAAS,KAAK,IAAI;AAAA,EAC/B;AAEA,SAAO;AACT;AAUA,SAAS,QAAQ,MAAsB;AACrC,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,UAAU,SAAS;AACzB,QAAM,SAAS,UAAU,WAAM;AAC/B,QAAM,QAAQ,GAAG,MAAM,IAAI,SAAS,GAAG;AAEvC,MAAI,KAAK,SAAS,SAAS,GAAG;AAC5B,YAAQ,eAAe,OAAO,SAAS,GAAG;AAC1C,eAAW,SAAS,KAAK,UAAU;AACjC,cAAQ,KAAK;AAAA,IACf;AACA,YAAQ,SAAS;AAAA,EACnB,OAAO;AACL,YAAQ,IAAI,OAAO,SAAS,GAAG;AAAA,EACjC;AACF;AAiBO,SAAS,QAAQ,UAAsB;AAC5C,QAAM,OAAO,UAAU,QAAQ;AAC/B,UAAQ,MAAM,aAAM,SAAS,QAAQ,IAAI,EAAE;AAC3C,aAAW,SAAS,KAAK,UAAU;AACjC,YAAQ,KAAK;AAAA,EACf;AACA,UAAQ,SAAS;AACnB;",
-  "names": []
-}

package/dist/helpers/queryComponent.d.ts

@@ -1,28 +0,0 @@
-import type { Base } from '../Base/Base.js';
-export interface QueryOptions {
-    from?: HTMLElement | Document;
-}
-export type ParsedQuery = {
-    name: string;
-    cssSelector?: string;
-    state?: string;
-};
-/**
- * Parse a query string like 'Foo(.css-selector):mounted' into its parts.
- */
-export declare const parseQuery: (query: string) => ParsedQuery;
-export declare function instanceIsMatching(instance: Base, parsedQuery: ParsedQuery): boolean;
-/**
- * Get the first instance of component with the given query.
- */
-export declare function queryComponent<T extends Base = Base>(query: string, options?: QueryOptions): T | undefined;
-/**
- * Get all instances of component with the given query.
- */
-export declare function queryComponentAll<T extends Base = Base>(query: string, options?: QueryOptions): T[];
-/**
- * Get the closest component instance by traversing up the DOM tree.
- */
-export declare function closestComponent<T extends Base = Base>(query: string, options?: {
-    from: HTMLElement;
-}): T | undefined;

package/dist/helpers/queryComponent.js

@@ -1,88 +0,0 @@
-import { getInstances, hasInstance } from "../Base/utils.js";
-import { memo } from "../utils/memo.js";
-import { getAncestorWhere } from "../utils/dom/ancestors.js";
-const REGEX_QUERY = /([a-zA-Z0-9]+)(\((.*)\))?(:([a-z]+))?/;
-const parseQuery = memo((query) => {
-  const [, name, , cssSelector, , state] = query.match(REGEX_QUERY);
-  return {
-    name,
-    cssSelector,
-    state
-  };
-});
-function instanceIsMatching(instance, parsedQuery) {
-  if (instance.$config.name !== parsedQuery.name) return false;
-  if (parsedQuery.cssSelector && !instance.$el.matches(parsedQuery.cssSelector)) return false;
-  if (parsedQuery.state === "mounted" && !instance.$isMounted) return false;
-  if (parsedQuery.state === "destroyed" && instance.$isMounted) return false;
-  return true;
-}
-function resolveMatch(element, parsedQuery) {
-  const baseMap = element.__base__;
-  if (!baseMap) return void 0;
-  const instance = baseMap.get(parsedQuery.name);
-  if (!instance || instance === "terminated") return void 0;
-  if (!hasInstance(instance) || !instanceIsMatching(instance, parsedQuery)) return void 0;
-  return instance;
-}
-function* queryMatches(parsedQuery, from) {
-  if (from === document) {
-    for (const instance of getInstances()) {
-      if (hasInstance(instance) && instanceIsMatching(instance, parsedQuery)) {
-        yield instance;
-      }
-    }
-    return;
-  }
-  const seen = /* @__PURE__ */ new Set();
-  const selfMatch = resolveMatch(from, parsedQuery);
-  if (selfMatch) {
-    seen.add(selfMatch);
-    yield selfMatch;
-  }
-  for (const element of from.querySelectorAll("*")) {
-    const match = resolveMatch(element, parsedQuery);
-    if (match && !seen.has(match)) {
-      seen.add(match);
-      yield match;
-    }
-  }
-}
-function queryComponent(query, options = {}) {
-  const parsedQuery = parseQuery(query);
-  const { from = document } = options;
-  for (const instance of queryMatches(parsedQuery, from)) {
-    return instance;
-  }
-  return void 0;
-}
-function queryComponentAll(query, options = {}) {
-  const parsedQuery = parseQuery(query);
-  const { from = document } = options;
-  return Array.from(queryMatches(parsedQuery, from));
-}
-function closestComponent(query, options = { from: null }) {
-  const { from } = options;
-  const parsedQuery = parseQuery(query);
-  let closestInstance;
-  getAncestorWhere(from, (element) => {
-    if (!element) return false;
-    const baseMap = element.__base__;
-    if (!baseMap) return false;
-    const instance = baseMap.get(parsedQuery.name);
-    if (instance && instance !== "terminated" && instanceIsMatching(instance, parsedQuery)) {
-      closestInstance = instance;
-      return true;
-    }
-    return false;
-  });
-  return closestInstance;
-}
-export {
-  closestComponent,
-  instanceIsMatching,
-  parseQuery,
-  queryComponent,
-  queryComponentAll
-};
-//# sourceMappingURL=queryComponent.js.map