@zag-js/avatar 1.34.1 → 1.35.1

package/dist/avatar.anatomy.d.mts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
+declare const parts: Record<"root" | "image" | "fallback", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/avatar.anatomy.d.ts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
+declare const parts: Record<"root" | "image" | "fallback", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/avatar.anatomy.js

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/avatar.anatomy.ts
+var avatar_anatomy_exports = {};
+__export(avatar_anatomy_exports, {
+  anatomy: () => anatomy,
+  parts: () => parts
+});
+module.exports = __toCommonJS(avatar_anatomy_exports);
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("avatar").parts("root", "image", "fallback");
+var parts = anatomy.build();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  parts
+});

package/dist/avatar.anatomy.mjs

@@ -0,0 +1,8 @@
+// src/avatar.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("avatar").parts("root", "image", "fallback");
+var parts = anatomy.build();
+export {
+  anatomy,
+  parts
+};

package/dist/avatar.connect.d.mts

@@ -0,0 +1,7 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { Service } from '@zag-js/core';
+import { AvatarSchema, AvatarApi } from './avatar.types.mjs';
+
+declare function connect<T extends PropTypes>(service: Service<AvatarSchema>, normalize: NormalizeProps<T>): AvatarApi<T>;
+
+export { connect };

package/dist/avatar.connect.d.ts

@@ -0,0 +1,7 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { Service } from '@zag-js/core';
+import { AvatarSchema, AvatarApi } from './avatar.types.js';
+
+declare function connect<T extends PropTypes>(service: Service<AvatarSchema>, normalize: NormalizeProps<T>): AvatarApi<T>;
+
+export { connect };

package/dist/avatar.connect.js

@@ -0,0 +1,89 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/avatar.connect.ts
+var avatar_connect_exports = {};
+__export(avatar_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(avatar_connect_exports);
+var import_avatar = require("./avatar.anatomy.cjs");
+var dom = __toESM(require("./avatar.dom.cjs"));
+function connect(service, normalize) {
+  const { state, send, prop, scope } = service;
+  const loaded = state.matches("loaded");
+  return {
+    loaded,
+    setSrc(src) {
+      const img = dom.getImageEl(scope);
+      img?.setAttribute("src", src);
+    },
+    setLoaded() {
+      send({ type: "img.loaded", src: "api" });
+    },
+    setError() {
+      send({ type: "img.error", src: "api" });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...import_avatar.parts.root.attrs,
+        dir: prop("dir"),
+        id: dom.getRootId(scope)
+      });
+    },
+    getImageProps() {
+      return normalize.img({
+        ...import_avatar.parts.image.attrs,
+        hidden: !loaded,
+        dir: prop("dir"),
+        id: dom.getImageId(scope),
+        "data-state": loaded ? "visible" : "hidden",
+        onLoad() {
+          send({ type: "img.loaded", src: "element" });
+        },
+        onError() {
+          send({ type: "img.error", src: "element" });
+        }
+      });
+    },
+    getFallbackProps() {
+      return normalize.element({
+        ...import_avatar.parts.fallback.attrs,
+        dir: prop("dir"),
+        id: dom.getFallbackId(scope),
+        hidden: loaded,
+        "data-state": loaded ? "hidden" : "visible"
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});

package/dist/avatar.connect.mjs

@@ -0,0 +1,54 @@
+// src/avatar.connect.ts
+import { parts } from "./avatar.anatomy.mjs";
+import * as dom from "./avatar.dom.mjs";
+function connect(service, normalize) {
+  const { state, send, prop, scope } = service;
+  const loaded = state.matches("loaded");
+  return {
+    loaded,
+    setSrc(src) {
+      const img = dom.getImageEl(scope);
+      img?.setAttribute("src", src);
+    },
+    setLoaded() {
+      send({ type: "img.loaded", src: "api" });
+    },
+    setError() {
+      send({ type: "img.error", src: "api" });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        dir: prop("dir"),
+        id: dom.getRootId(scope)
+      });
+    },
+    getImageProps() {
+      return normalize.img({
+        ...parts.image.attrs,
+        hidden: !loaded,
+        dir: prop("dir"),
+        id: dom.getImageId(scope),
+        "data-state": loaded ? "visible" : "hidden",
+        onLoad() {
+          send({ type: "img.loaded", src: "element" });
+        },
+        onError() {
+          send({ type: "img.error", src: "element" });
+        }
+      });
+    },
+    getFallbackProps() {
+      return normalize.element({
+        ...parts.fallback.attrs,
+        dir: prop("dir"),
+        id: dom.getFallbackId(scope),
+        hidden: loaded,
+        "data-state": loaded ? "hidden" : "visible"
+      });
+    }
+  };
+}
+export {
+  connect
+};

package/dist/avatar.dom.d.mts

@@ -0,0 +1,9 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getImageId: (ctx: Scope) => any;
+declare const getFallbackId: (ctx: Scope) => any;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getImageEl: (ctx: Scope) => HTMLImageElement | null;
+
+export { getFallbackId, getImageEl, getImageId, getRootEl, getRootId };

package/dist/avatar.dom.d.ts

@@ -0,0 +1,9 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getImageId: (ctx: Scope) => any;
+declare const getFallbackId: (ctx: Scope) => any;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getImageEl: (ctx: Scope) => HTMLImageElement | null;
+
+export { getFallbackId, getImageEl, getImageId, getRootEl, getRootId };

package/dist/avatar.dom.js

@@ -0,0 +1,42 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/avatar.dom.ts
+var avatar_dom_exports = {};
+__export(avatar_dom_exports, {
+  getFallbackId: () => getFallbackId,
+  getImageEl: () => getImageEl,
+  getImageId: () => getImageId,
+  getRootEl: () => getRootEl,
+  getRootId: () => getRootId
+});
+module.exports = __toCommonJS(avatar_dom_exports);
+var getRootId = (ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`;
+var getImageId = (ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`;
+var getFallbackId = (ctx) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getImageEl = (ctx) => ctx.getById(getImageId(ctx));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getFallbackId,
+  getImageEl,
+  getImageId,
+  getRootEl,
+  getRootId
+});

package/dist/avatar.dom.mjs

@@ -0,0 +1,13 @@
+// src/avatar.dom.ts
+var getRootId = (ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`;
+var getImageId = (ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`;
+var getFallbackId = (ctx) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getImageEl = (ctx) => ctx.getById(getImageId(ctx));
+export {
+  getFallbackId,
+  getImageEl,
+  getImageId,
+  getRootEl,
+  getRootId
+};

package/dist/avatar.machine.d.mts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { AvatarSchema } from './avatar.types.mjs';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<AvatarSchema>;
+
+export { machine };

package/dist/avatar.machine.d.ts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { AvatarSchema } from './avatar.types.js';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<AvatarSchema>;
+
+export { machine };

package/dist/avatar.machine.js

@@ -0,0 +1,131 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/avatar.machine.ts
+var avatar_machine_exports = {};
+__export(avatar_machine_exports, {
+  machine: () => machine
+});
+module.exports = __toCommonJS(avatar_machine_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_core = require("@zag-js/core");
+var dom = __toESM(require("./avatar.dom.cjs"));
+var machine = (0, import_core.createMachine)({
+  initialState() {
+    return "loading";
+  },
+  effects: ["trackImageRemoval", "trackSrcChange"],
+  on: {
+    "src.change": {
+      target: "loading"
+    },
+    "img.unmount": {
+      target: "error"
+    }
+  },
+  states: {
+    loading: {
+      entry: ["checkImageStatus"],
+      on: {
+        "img.loaded": {
+          target: "loaded",
+          actions: ["invokeOnLoad"]
+        },
+        "img.error": {
+          target: "error",
+          actions: ["invokeOnError"]
+        }
+      }
+    },
+    error: {
+      on: {
+        "img.loaded": {
+          target: "loaded",
+          actions: ["invokeOnLoad"]
+        }
+      }
+    },
+    loaded: {
+      on: {
+        "img.error": {
+          target: "error",
+          actions: ["invokeOnError"]
+        }
+      }
+    }
+  },
+  implementations: {
+    actions: {
+      invokeOnLoad({ prop }) {
+        prop("onStatusChange")?.({ status: "loaded" });
+      },
+      invokeOnError({ prop }) {
+        prop("onStatusChange")?.({ status: "error" });
+      },
+      checkImageStatus({ send, scope }) {
+        const imageEl = dom.getImageEl(scope);
+        if (!imageEl?.complete) return;
+        const type = hasLoaded(imageEl) ? "img.loaded" : "img.error";
+        send({ type, src: "ssr" });
+      }
+    },
+    effects: {
+      trackImageRemoval({ send, scope }) {
+        const rootEl = dom.getRootEl(scope);
+        return (0, import_dom_query.observeChildren)(rootEl, {
+          callback(records) {
+            const removedNodes = Array.from(records[0].removedNodes);
+            const removed = removedNodes.find(
+              (node) => node.nodeType === Node.ELEMENT_NODE && node.matches("[data-scope=avatar][data-part=image]")
+            );
+            if (removed) {
+              send({ type: "img.unmount" });
+            }
+          }
+        });
+      },
+      trackSrcChange({ send, scope }) {
+        const imageEl = dom.getImageEl(scope);
+        return (0, import_dom_query.observeAttributes)(imageEl, {
+          attributes: ["src", "srcset"],
+          callback() {
+            send({ type: "src.change" });
+          }
+        });
+      }
+    }
+  }
+});
+function hasLoaded(image) {
+  return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  machine
+});

package/dist/avatar.machine.mjs

@@ -0,0 +1,96 @@
+// src/avatar.machine.ts
+import { observeAttributes, observeChildren } from "@zag-js/dom-query";
+import { createMachine } from "@zag-js/core";
+import * as dom from "./avatar.dom.mjs";
+var machine = createMachine({
+  initialState() {
+    return "loading";
+  },
+  effects: ["trackImageRemoval", "trackSrcChange"],
+  on: {
+    "src.change": {
+      target: "loading"
+    },
+    "img.unmount": {
+      target: "error"
+    }
+  },
+  states: {
+    loading: {
+      entry: ["checkImageStatus"],
+      on: {
+        "img.loaded": {
+          target: "loaded",
+          actions: ["invokeOnLoad"]
+        },
+        "img.error": {
+          target: "error",
+          actions: ["invokeOnError"]
+        }
+      }
+    },
+    error: {
+      on: {
+        "img.loaded": {
+          target: "loaded",
+          actions: ["invokeOnLoad"]
+        }
+      }
+    },
+    loaded: {
+      on: {
+        "img.error": {
+          target: "error",
+          actions: ["invokeOnError"]
+        }
+      }
+    }
+  },
+  implementations: {
+    actions: {
+      invokeOnLoad({ prop }) {
+        prop("onStatusChange")?.({ status: "loaded" });
+      },
+      invokeOnError({ prop }) {
+        prop("onStatusChange")?.({ status: "error" });
+      },
+      checkImageStatus({ send, scope }) {
+        const imageEl = dom.getImageEl(scope);
+        if (!imageEl?.complete) return;
+        const type = hasLoaded(imageEl) ? "img.loaded" : "img.error";
+        send({ type, src: "ssr" });
+      }
+    },
+    effects: {
+      trackImageRemoval({ send, scope }) {
+        const rootEl = dom.getRootEl(scope);
+        return observeChildren(rootEl, {
+          callback(records) {
+            const removedNodes = Array.from(records[0].removedNodes);
+            const removed = removedNodes.find(
+              (node) => node.nodeType === Node.ELEMENT_NODE && node.matches("[data-scope=avatar][data-part=image]")
+            );
+            if (removed) {
+              send({ type: "img.unmount" });
+            }
+          }
+        });
+      },
+      trackSrcChange({ send, scope }) {
+        const imageEl = dom.getImageEl(scope);
+        return observeAttributes(imageEl, {
+          attributes: ["src", "srcset"],
+          callback() {
+            send({ type: "src.change" });
+          }
+        });
+      }
+    }
+  }
+});
+function hasLoaded(image) {
+  return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0;
+}
+export {
+  machine
+};

package/dist/avatar.props.d.mts

@@ -0,0 +1,8 @@
+import { AvatarProps } from './avatar.types.mjs';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof AvatarProps)[];
+declare const splitProps: <Props extends Partial<AvatarProps>>(props: Props) => [Partial<AvatarProps>, Omit<Props, keyof AvatarProps>];
+
+export { props, splitProps };

package/dist/avatar.props.d.ts

@@ -0,0 +1,8 @@
+import { AvatarProps } from './avatar.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof AvatarProps)[];
+declare const splitProps: <Props extends Partial<AvatarProps>>(props: Props) => [Partial<AvatarProps>, Omit<Props, keyof AvatarProps>];
+
+export { props, splitProps };

package/dist/avatar.props.js

@@ -0,0 +1,35 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/avatar.props.ts
+var avatar_props_exports = {};
+__export(avatar_props_exports, {
+  props: () => props,
+  splitProps: () => splitProps
+});
+module.exports = __toCommonJS(avatar_props_exports);
+var import_types = require("@zag-js/types");
+var import_utils = require("@zag-js/utils");
+var props = (0, import_types.createProps)()(["dir", "id", "ids", "onStatusChange", "getRootNode"]);
+var splitProps = (0, import_utils.createSplitProps)(props);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  props,
+  splitProps
+});

package/dist/avatar.props.mjs

@@ -0,0 +1,9 @@
+// src/avatar.props.ts
+import { createProps } from "@zag-js/types";
+import { createSplitProps } from "@zag-js/utils";
+var props = createProps()(["dir", "id", "ids", "onStatusChange", "getRootNode"]);
+var splitProps = createSplitProps(props);
+export {
+  props,
+  splitProps
+};

package/dist/avatar.types.d.mts

@@ -0,0 +1,66 @@
+import { Machine, Service } from '@zag-js/core';
+import { CommonProperties, DirectionProperty, PropTypes } from '@zag-js/types';
+
+type LoadStatus = "error" | "loaded";
+interface StatusChangeDetails {
+    status: LoadStatus;
+}
+type ElementIds = Partial<{
+    root: string;
+    image: string;
+    fallback: string;
+}>;
+interface AvatarProps extends CommonProperties, DirectionProperty {
+    /**
+     * Functional called when the image loading status changes.
+     */
+    onStatusChange?: ((details: StatusChangeDetails) => void) | undefined;
+    /**
+     * The ids of the elements in the avatar. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+}
+interface AvatarSchema {
+    props: AvatarProps;
+    context: any;
+    initial: "loading";
+    effect: "trackImageRemoval" | "trackSrcChange";
+    action: "invokeOnLoad" | "invokeOnError" | "checkImageStatus";
+    event: {
+        type: "img.loaded";
+        src?: string | undefined;
+    } | {
+        type: "img.error";
+        src?: string | undefined;
+    } | {
+        type: "img.unmount";
+    } | {
+        type: "src.change";
+    };
+    state: "loading" | "error" | "loaded";
+}
+type AvatarService = Service<AvatarSchema>;
+type AvatarMachine = Machine<AvatarSchema>;
+interface AvatarApi<T extends PropTypes = PropTypes> {
+    /**
+     * Whether the image is loaded.
+     */
+    loaded: boolean;
+    /**
+     * Function to set new src.
+     */
+    setSrc: (src: string) => void;
+    /**
+     * Function to set loaded state.
+     */
+    setLoaded: VoidFunction;
+    /**
+     * Function to set error state.
+     */
+    setError: VoidFunction;
+    getRootProps: () => T["element"];
+    getImageProps: () => T["img"];
+    getFallbackProps: () => T["element"];
+}
+
+export type { AvatarApi, AvatarMachine, AvatarProps, AvatarSchema, AvatarService, ElementIds, LoadStatus, StatusChangeDetails };