@whop/embedded-components-vanilla-js 0.0.12 → 0.0.13-beta.3

package/dist/lib/index.d.ts

@@ -1,6 +1,19 @@
 declare const locales: readonly ["en"];
 type I18nSupportedLocale = (typeof locales)[number];
 
+type CustomEventDetail<F> = F extends (ev: CustomEvent<infer D>) => void ? D : never;
+type TypedEvent<Events, K extends keyof Events> = (Events[K] extends (...args: infer P) => unknown ? P[0] : never) & {
+    type: K;
+};
+type TypedEventUnion<Events, EventKeys extends keyof Events> = {
+    [K in EventKeys]: TypedEvent<Events, K>;
+}[EventKeys];
+interface TypedEventCreatorFn<Events, EventKeys extends keyof Events> {
+    <K extends EventKeys>(type: K, detail: CustomEventDetail<Events[K]>): TypedEvent<Events, K>;
+    _phantom?: [Events, EventKeys];
+}
+type InferEvent<Fn> = Fn extends TypedEventCreatorFn<infer Events, infer EventKeys> ? TypedEventUnion<Events, EventKeys> : never;
+
 /**
  * A CSS property value.
  */
@@ -228,6 +241,400 @@ interface WhopElement<ElementOptions, ElementEvents extends ListenerSignature<El
     getSnapshot: () => ElementSnapshot;
 }
 
+/**
+ * Events emitted by the ChatElement.
+ *
+ * Listen to these events using the `on()` method or by passing callback functions in the options.
+ */
+interface ChatElementEvents {
+    /**
+     * Emitted when an error occurs during element initialization or operation.
+     * @param error - The error that occurred
+     */
+    error: (error: unknown) => void;
+    /**
+     * Emitted when the element has finished loading and is ready for user interaction.
+     * @param element - The element instance
+     */
+    ready: (element: ChatElement) => void;
+    /**
+     * Emitted when the element's options are updated via `updateOptions()`.
+     * @param options - The updated options object
+     */
+    optionsUpdated: (options: ChatElementOptions) => void;
+    /**
+     * Emitted when the element's internal state changes.
+     * @param snapshot - The current state snapshot
+     */
+    snapshot: (snapshot: ChatElementSnapshot) => void;
+    /**
+     * Emitted when the user clicks on a profile.
+     * @param ev - The event containing the `username` in `ev.detail`.
+     */
+    profileClick: (ev: CustomEvent<{
+        username: string;
+    }>) => void;
+    /**
+     * Emitted when the user clicks on a link.
+     * @param ev - The event containing the `url` in `ev.detail`.
+     */
+    linkClick: (ev: CustomEvent<{
+        url: string;
+    }>) => void;
+    /**
+     * Emitted when the user sends a message.
+     * @param ev - The event containing the `message` in `ev.detail`.
+     */
+    messageSent: (ev: CustomEvent<{
+        content: string;
+    }>) => void;
+}
+declare const createTypedEvent$1: TypedEventCreatorFn<ChatElementEvents, "profileClick" | "linkClick" | "messageSent">;
+type ChatElementEvent = InferEvent<typeof createTypedEvent$1>;
+/**
+ * Configuration options for the ChatElement.
+ *
+ * @example
+ * ```typescript
+ * const element = session.createElement("chat-element", {
+ *   channelId: "feed_XXXXXXXXXXXXXX",
+ *   onReady: (element) => {
+ *     console.log("Chat element is ready");
+ *   },
+ * });
+ * ```
+ */
+interface ChatElementOptions {
+    /**
+     * The ID of the chat channel to connect to.
+     */
+    channelId: string;
+    /**
+     * The ID of the message to deep link to.
+     */
+    deeplinkToPostId?: string;
+    /**
+     * Callback fired when the element has finished loading and is ready for interaction.
+     * This is equivalent to listening to the `ready` event.
+     * @param element - The element instance
+     */
+    onReady?: (element: ChatElement) => void;
+    /**
+     * Callback fired when a chat element event is emitted.
+     * @param event - The chat element event
+     */
+    onEvent?: (event: ChatElementEvent) => void;
+}
+/**
+ * Represents the current state of the ChatElement.
+ *
+ * Use `element.getSnapshot()` to get the current state, or listen to the `snapshot` event for changes.
+ */
+interface ChatElementSnapshot {
+    /**
+     * The current loading state of the element.
+     * - `"loading"` - The element is initializing
+     * - `"ready"` - The element is fully loaded and interactive
+     */
+    state: "loading" | "ready";
+}
+/**
+ * A UI element that displays a chat interface.
+ *
+ * @example Basic usage
+ * ```typescript
+ * // Create the element
+ * const element = session.createElement("chat-element", {
+ *   channelId: "feed_XXXXXXXXXXXXXX",
+ *   onReady: () => {
+ *     console.log("Chat element is ready");
+ *   },
+ * });
+ *
+ * // Mount it to a container
+ * element.mount("#chat-container");
+ * ```
+ *
+ * @example Listening to events
+ * ```typescript
+ * const element = session.createElement("chat-element", {
+ *   channelId: "feed_XXXXXXXXXXXXXX",
+ * });
+ *
+ * element.on("ready", () => {
+ *   console.log("Chat element is ready");
+ * });
+ *
+ * element.on("profileClick", (ev) => {
+ *   console.log("Profile clicked:", ev.detail.username);
+ * });
+ *
+ * element.on("linkClick", (ev) => {
+ *   console.log("Link clicked:", ev.detail.url);
+ * });
+ *
+ * element.on("messageSent", (ev) => {
+ *   console.log("Message sent:", ev.detail.content);
+ * });
+ *
+ * element.mount("#chat-container");
+ * ```
+ */
+type ChatElement = WhopElement<ChatElementOptions, ChatElementEvents, ChatElementSnapshot>;
+
+/**
+ * Events emitted by the DmListElement.
+ *
+ * Listen to these events using the `on()` method or by passing callback functions in the options.
+ */
+interface DmsListElementEvents {
+    /**
+     * Emitted when an error occurs during element initialization or operation.
+     * @param error - The error that occurred
+     */
+    error: (error: unknown) => void;
+    /**
+     * Emitted when the element has finished loading and is ready for user interaction.
+     * @param element - The element instance
+     */
+    ready: (element: DmsListElement) => void;
+    /**
+     * Emitted when the element's options are updated via `updateOptions()`.
+     * @param options - The updated options object
+     */
+    optionsUpdated: (options: DmsListElementOptions) => void;
+    /**
+     * Emitted when the element's internal state changes.
+     * @param snapshot - The current state snapshot
+     */
+    snapshot: (snapshot: DmsListElementSnapshot) => void;
+    /**
+     * Emitted when the user clicks a channel.
+     * @param ev - The event containing the `id` in `ev.detail`.
+     */
+    channelSelected: (ev: CustomEvent<{
+        id: string;
+    }>) => void;
+}
+declare const createTypedEvent: TypedEventCreatorFn<DmsListElementEvents, "channelSelected">;
+type DmsListElementEvent = InferEvent<typeof createTypedEvent>;
+/**
+ * Configuration options for the DmsListElement.
+ *
+ * @example
+ * ```typescript
+ * const element = session.createElement("dms-list-element", {
+ *   onReady: (element) => {
+ *     console.log("Dms list element is ready");
+ *   },
+ * });
+ * ```
+ */
+interface DmsListElementOptions {
+    /**
+     * The company ID to filter the channels by.
+     */
+    companyId?: string;
+    /**
+     * The ID of the currently selected channel.
+     */
+    selectedChannel?: string;
+    /**
+     * Callback fired when the element has finished loading and is ready for interaction.
+     * This is equivalent to listening to the `ready` event.
+     * @param element - The element instance
+     */
+    onReady?: (element: DmsListElement) => void;
+    /**
+     * Callback fired when a dms list element event is emitted.
+     * @param event - The dms list element event
+     */
+    onEvent?: (event: DmsListElementEvent) => void;
+}
+/**
+ * Represents the current state of the DmsListElement.
+ *
+ * Use `element.getSnapshot()` to get the current state, or listen to the `snapshot` event for changes.
+ */
+interface DmsListElementSnapshot {
+    /**
+     * The current loading state of the element.
+     * - `"loading"` - The element is initializing
+     * - `"ready"` - The element is fully loaded and interactive
+     */
+    state: "loading" | "ready";
+}
+/**
+ * A UI element that displays a dms list.
+ *
+ * @example Basic usage
+ * ```typescript
+ * // Create the element
+ * const element = session.createElement("dms-list-element", {
+ *   onReady: (element) => {
+ *     console.log("Dms list element is ready");
+ *   },
+ * });
+ *
+ * // Mount it to a container
+ * element.mount("#dms-list-container");
+ * ```
+ *
+ * @example Listening to events
+ * ```typescript
+ * const element = session.createElement("dms-list-element", {});
+ *
+ * element.on("ready", () => {
+ *   console.log("Dms list element is ready");
+ * });
+ *
+ * element.on("channelSelected", (ev) => {
+ *   console.log("Channel selected:", ev.detail.id);
+ * });
+ *
+ * element.mount("#dms-list-container");
+ * ```
+ */
+type DmsListElement = WhopElement<DmsListElementOptions, DmsListElementEvents, DmsListElementSnapshot>;
+
+type Token = string | Promise<string | null> | null;
+type GetToken = (opts: {
+    abortSignal: AbortSignal;
+}) => Token;
+
+/** elements types */
+
+interface ChatSessionOptions {
+    /**
+     * The token to use for the session. If a function is provided, it will be called and awaited to get the token.
+     * When a function is provided, the token will be refreshed automatically before it expires.
+     *
+     * if a string is provided, it will be used as the token and not refreshed automatically. However you can update the token at runtime by
+     * calling `updateOptions` with a new token.
+     *
+     * @example
+     * ```ts
+     * // with a static token
+     * async function createChatSession() {
+     * 	const token = await fetch("/api/token")
+     * 		.then(res => res.json())
+     * 		.then(data => data.token)
+     * 	return new ChatSession({ token })
+     * }
+     *
+     * // with a dynamic function
+     * function createChatSession() {
+     * 	return new ChatSession({
+     * 		token: () => {
+     * 			return await fetch("/api/token")
+     * 				.then(res => res.json())
+     * 				.then(data => data.token)
+     * 		}
+     * 	})
+     * }
+     * ```
+     */
+    token: Token | GetToken;
+}
+interface ExpandedChatSessionOptions extends ChatSessionOptions {
+}
+/**
+ * Events emitted by the ChatSession.
+ *
+ * Listen to these events using the `on()` method.
+ */
+interface ChatSessionEvents {
+    /**
+     * Emitted when the session options are updated via `updateOptions()`.
+     * @param options - The updated options object
+     */
+    optionsUpdated: (options: ExpandedChatSessionOptions) => void;
+    /**
+     * Emitted when the authentication token is refreshed.
+     * @param token - The new token
+     */
+    tokenRefreshed: (token: string) => void;
+    /**
+     * Emitted when token refresh fails.
+     * @param error - The error that occurred
+     */
+    tokenRefreshError: (error: unknown) => void;
+    /**
+     * Emitted when an error occurs during session operation.
+     * @param error - The error that occurred
+     */
+    error: (error: unknown) => void;
+    /**
+     * Emitted when the session is ready and authenticated.
+     */
+    ready: () => void;
+}
+type ChatSessionElements = {
+    "chat-element": [ChatElementOptions, ChatElement];
+    "dms-list-element": [DmsListElementOptions, DmsListElement];
+};
+/**
+ * Manages authentication and creates chat elements.
+ *
+ * @example Basic usage
+ * ```typescript
+ * const session = whopElements.createChatSession({
+ *   token: async () => {
+ *     const response = await fetch("/api/token");
+ *     const data = await response.json();
+ *     return data.token;
+ *   },
+ * });
+ *
+ * session.on("ready", () => {
+ *   console.log("Session is ready");
+ * });
+ * ```
+ *
+ * @example Creating elements
+ * ```typescript
+ * const chatElement = session.createElement("chat-element", {
+ *   channelId: "feed_XXXXXXXXXXXXXX",
+ * });
+ * chatElement.mount("#chat-container");
+ * ```
+ */
+interface ChatSession extends TypedEmitter<ChatSessionEvents> {
+    /**
+     * Update the session options after initialization.
+     *
+     * Changes will be propagated to all active elements.
+     *
+     * @param options - Partial options object with the values to update
+     */
+    updateOptions: (options: Partial<ChatSessionOptions>) => void;
+    /**
+     * Destroy the session and clean up all mounted elements.
+     *
+     * Call this when you no longer need the session to free up resources.
+     */
+    destroy: () => void;
+    /**
+     * Create a new element instance.
+     *
+     * @param type - The element type (e.g., "chat-element")
+     * @param options - Element-specific configuration options
+     * @returns The created element instance
+     *
+     * @example
+     * ```typescript
+     * const element = session.createElement("chat-element", {
+     *   channelId: "feed_XXXXXXXXXXXXXX",
+     *   onReady: () => console.log("Element ready"),
+     * });
+     * element.mount("#chat-container");
+     * ```
+     */
+    createElement<T extends keyof ChatSessionElements>(type: T | {
+        type: T;
+    }, options: ChatSessionElements[T][0]): ChatSessionElements[T][1];
+}
+
 /**
  * Events emitted by the AddPayoutMethodElement.
  *
@@ -2501,9 +2908,6 @@ interface ModalContainer {
 
 /** elements types */
 
-type GetToken = (opts: {
-    abortSignal: AbortSignal;
-}) => Promise<string | null> | string | null;
 interface PayoutsSessionOptions {
     /**
      * The token to use for the session. If a function is provided, it will be called and awaited to get the token.
@@ -2534,7 +2938,7 @@ interface PayoutsSessionOptions {
      * }
      * ```
      */
-    token: string | Promise<string | null> | null | GetToken;
+    token: Token | GetToken;
     /**
      * The currency to use in the Elements
      *
@@ -2907,6 +3311,13 @@ interface WhopElements extends TypedEmitter<WhopElementsEvents> {
      * @returns A PayoutsSession instance for creating payout elements
      */
     createPayoutsSession: (options: PayoutsSessionOptions) => PayoutsSession;
+    /**
+     * Create a new chat session for managing chat elements.
+     *
+     * @param options - Configuration options for the chat session
+     * @returns A ChatSession instance for creating chat elements
+     */
+    createChatSession: (options: ChatSessionOptions) => ChatSession;
     /**
      * Update the WhopElements configuration after initialization.
      *
@@ -2934,4 +3345,4 @@ interface WhopElementsEvents {
     optionsUpdated: (options: WhopElementsOptions) => void;
 }
 
-export type { AddPayoutMethodElement, AddPayoutMethodElementOptions, AddPayoutMethodElementSnapshot, Appearance, AutomaticWithdrawElement, AutomaticWithdrawElementOptions, AutomaticWithdrawElementSnapshot, BalanceElement, BalanceElementOptions, BalanceElementSnapshot, BnplReserveBalanceBreakdownElement, BnplReserveBalanceBreakdownElementOptions, BnplReserveBalanceBreakdownElementSnapshot, ChangeAccountCountryElement, ChangeAccountCountryElementOptions, ChangeAccountCountryElementSnapshot, ExpandedPayoutsSessionOptions, GenerateWithdrawalReceiptElement, GenerateWithdrawalReceiptElementOptions, GenerateWithdrawalReceiptElementSnapshot, GetToken, I18nSupportedLocale, PayoutsSession, PayoutsSessionElements, PayoutsSessionEvents, PayoutsSessionOptions, RegularReserveBalanceBreakdownElement, RegularReserveBalanceBreakdownElementOptions, RegularReserveBalanceBreakdownElementSnapshot, ResetAccountElement, ResetAccountElementOptions, ResetAccountElementSnapshot, StatusBannerElement, StatusBannerElementOptions, StatusBannerElementSnapshot, StatusBannerType, TotalBalanceBreakdownElement, TotalBalanceBreakdownElementOptions, TotalBalanceBreakdownElementSnapshot, VerifyElement, VerifyElementOptions, VerifyElementSnapshot, WhopElement, WhopElements, WhopElementsConstructor, WhopElementsEnvironment, WhopElementsEvents, WhopElementsOptions, WithdrawButtonElement, WithdrawButtonElementOptions, WithdrawElement, WithdrawElementOptions, WithdrawElementSnapshot, WithdrawalBreakdownElement, WithdrawalBreakdownElementOptions, WithdrawalBreakdownElementSnapshot, WithdrawalsElement, WithdrawalsElementOptions, WithdrawalsElementSnapshot };
+export type { AddPayoutMethodElement, AddPayoutMethodElementOptions, AddPayoutMethodElementSnapshot, Appearance, AutomaticWithdrawElement, AutomaticWithdrawElementOptions, AutomaticWithdrawElementSnapshot, BalanceElement, BalanceElementOptions, BalanceElementSnapshot, BnplReserveBalanceBreakdownElement, BnplReserveBalanceBreakdownElementOptions, BnplReserveBalanceBreakdownElementSnapshot, ChangeAccountCountryElement, ChangeAccountCountryElementOptions, ChangeAccountCountryElementSnapshot, ChatElement, ChatElementEvent, ChatElementOptions, ChatElementSnapshot, ChatSession, ChatSessionElements, ChatSessionEvents, ChatSessionOptions, DmsListElement, DmsListElementEvent, DmsListElementOptions, DmsListElementSnapshot, ExpandedChatSessionOptions, ExpandedPayoutsSessionOptions, GenerateWithdrawalReceiptElement, GenerateWithdrawalReceiptElementOptions, GenerateWithdrawalReceiptElementSnapshot, I18nSupportedLocale, PayoutsSession, PayoutsSessionElements, PayoutsSessionEvents, PayoutsSessionOptions, RegularReserveBalanceBreakdownElement, RegularReserveBalanceBreakdownElementOptions, RegularReserveBalanceBreakdownElementSnapshot, ResetAccountElement, ResetAccountElementOptions, ResetAccountElementSnapshot, StatusBannerElement, StatusBannerElementOptions, StatusBannerElementSnapshot, StatusBannerType, TotalBalanceBreakdownElement, TotalBalanceBreakdownElementOptions, TotalBalanceBreakdownElementSnapshot, VerifyElement, VerifyElementOptions, VerifyElementSnapshot, WhopElement, WhopElements, WhopElementsConstructor, WhopElementsEnvironment, WhopElementsEvents, WhopElementsOptions, WithdrawButtonElement, WithdrawButtonElementOptions, WithdrawElement, WithdrawElementOptions, WithdrawElementSnapshot, WithdrawalBreakdownElement, WithdrawalBreakdownElementOptions, WithdrawalBreakdownElementSnapshot, WithdrawalsElement, WithdrawalsElementOptions, WithdrawalsElementSnapshot };

package/dist/url.js

@@ -24,10 +24,10 @@ __export(url_exports, {
   getScriptUrl: () => getScriptUrl
 });
 module.exports = __toCommonJS(url_exports);
-const getOrigin = () => "https://0-0-12.elements.whop.com/";
+const getOrigin = () => "https://0-0-13-beta-3.elements.whop.com/";
 const getScriptUrl = () => {
   return new URL(`/release/elements.js`, getOrigin()).toString();
 };
-const ORIGIN = "https://0-0-12.elements.whop.com/";
-const SCRIPT_URL = new URL(`/release/elements.js`, "https://0-0-12.elements.whop.com/").toString();
+const ORIGIN = "https://0-0-13-beta-3.elements.whop.com/";
+const SCRIPT_URL = new URL(`/release/elements.js`, "https://0-0-13-beta-3.elements.whop.com/").toString();
 //# sourceMappingURL=url.js.map

package/dist/url.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/url.ts"],"sourcesContent":["declare const _ELEMENTS_ORIGIN: string;\n\nexport const getOrigin = (): string => _ELEMENTS_ORIGIN;\n\nexport const getScriptUrl = (): string => {\n\treturn new URL(`/release/elements.js`, getOrigin()).toString();\n};\n\n// Backwards compatibility exports\nexport const ORIGIN = _ELEMENTS_ORIGIN;\nexport const SCRIPT_URL = new URL(`/release/elements.js`, _ELEMENTS_ORIGIN).toString();\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,YAAY,MAAc;AAEhC,MAAM,eAAe,MAAc;AACzC,SAAO,IAAI,IAAI,wBAAwB,UAAU,CAAC,EAAE,SAAS;AAC9D;AAGO,MAAM,SAAS;AACf,MAAM,aAAa,IAAI,IAAI,wBAAwB,mCAAgB,EAAE,SAAS;","names":[]}
+{"version":3,"sources":["../src/url.ts"],"sourcesContent":["declare const _ELEMENTS_ORIGIN: string;\n\nexport const getOrigin = (): string => _ELEMENTS_ORIGIN;\n\nexport const getScriptUrl = (): string => {\n\treturn new URL(`/release/elements.js`, getOrigin()).toString();\n};\n\n// Backwards compatibility exports\nexport const ORIGIN = _ELEMENTS_ORIGIN;\nexport const SCRIPT_URL = new URL(`/release/elements.js`, _ELEMENTS_ORIGIN).toString();\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,YAAY,MAAc;AAEhC,MAAM,eAAe,MAAc;AACzC,SAAO,IAAI,IAAI,wBAAwB,UAAU,CAAC,EAAE,SAAS;AAC9D;AAGO,MAAM,SAAS;AACf,MAAM,aAAa,IAAI,IAAI,wBAAwB,0CAAgB,EAAE,SAAS;","names":[]}

package/dist/url.mjs

@@ -1,7 +1,7 @@
-const getOrigin = ()=>"https://0-0-12.elements.whop.com/";
+const getOrigin = ()=>"https://0-0-13-beta-3.elements.whop.com/";
 const getScriptUrl = ()=>{
     return new URL(`/release/elements.js`, getOrigin()).toString();
 };
-const ORIGIN = "https://0-0-12.elements.whop.com/";
-const SCRIPT_URL = new URL(`/release/elements.js`, "https://0-0-12.elements.whop.com/").toString();
+const ORIGIN = "https://0-0-13-beta-3.elements.whop.com/";
+const SCRIPT_URL = new URL(`/release/elements.js`, "https://0-0-13-beta-3.elements.whop.com/").toString();
 export { ORIGIN, SCRIPT_URL, getOrigin, getScriptUrl };

package/dist/url.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/url.ts"],"sourcesContent":["declare const _ELEMENTS_ORIGIN: string;\n\nexport const getOrigin = (): string => _ELEMENTS_ORIGIN;\n\nexport const getScriptUrl = (): string => {\n\treturn new URL(`/release/elements.js`, getOrigin()).toString();\n};\n\n// Backwards compatibility exports\nexport const ORIGIN = _ELEMENTS_ORIGIN;\nexport const SCRIPT_URL = new URL(`/release/elements.js`, _ELEMENTS_ORIGIN).toString();\n"],"mappings":"AAEO,MAAM,YAAY,MAAc;AAEhC,MAAM,eAAe,MAAc;AACzC,SAAO,IAAI,IAAI,wBAAwB,UAAU,CAAC,EAAE,SAAS;AAC9D;AAGO,MAAM,SAAS;AACf,MAAM,aAAa,IAAI,IAAI,wBAAwB,mCAAgB,EAAE,SAAS;","names":[]}
+{"version":3,"sources":["../src/url.ts"],"sourcesContent":["declare const _ELEMENTS_ORIGIN: string;\n\nexport const getOrigin = (): string => _ELEMENTS_ORIGIN;\n\nexport const getScriptUrl = (): string => {\n\treturn new URL(`/release/elements.js`, getOrigin()).toString();\n};\n\n// Backwards compatibility exports\nexport const ORIGIN = _ELEMENTS_ORIGIN;\nexport const SCRIPT_URL = new URL(`/release/elements.js`, _ELEMENTS_ORIGIN).toString();\n"],"mappings":"AAEO,MAAM,YAAY,MAAc;AAEhC,MAAM,eAAe,MAAc;AACzC,SAAO,IAAI,IAAI,wBAAwB,UAAU,CAAC,EAAE,SAAS;AAC9D;AAGO,MAAM,SAAS;AACf,MAAM,aAAa,IAAI,IAAI,wBAAwB,0CAAgB,EAAE,SAAS;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whop/embedded-components-vanilla-js",
-  "version": "0.0.12",
+  "version": "0.0.13-beta.3",
   "description": "Whop Elements loading utility",
   "main": "dist/index.js",
   "module": "dist/index.mjs",