@threekit-tools/treble 0.0.79 → 0.0.82

package/dist/components/Wishlist/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -61,7 +65,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wishlist = exports.WishlistButton = exports.AddWishlistButton = void 0;
 var react_1 = __importStar(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
-var icons_1 = require("../../icons");
+var Heart_1 = __importDefault(require("../../icons/Heart"));
+var Wishlist_1 = __importDefault(require("../../icons/Wishlist"));
 var Button_1 = require("../Button");
 var Drawer_1 = __importDefault(require("../Drawer"));
 var shared_styles_1 = require("../shared.styles");
@@ -71,12 +76,12 @@ var wishlist_styles_1 = require("./wishlist.styles");
 var useWishlist_1 = __importDefault(require("../../hooks/useWishlist"));
 var AddWishlistButton = function (props) {
     var title = props.title, type = props.type, shape = props.shape, className = props.className, onClick = props.onClick;
-    return (react_1.default.createElement(Button_1.Button, { title: title, icon: icons_1.HeartIcon.iconName, className: className, onClick: onClick, type: type, shape: shape }));
+    return (react_1.default.createElement(Button_1.Button, { title: title, icon: Heart_1.default.iconName, className: className, onClick: onClick, type: type, shape: shape }));
 };
 exports.AddWishlistButton = AddWishlistButton;
 var WishlistButton = function (props) {
     var title = props.title, type = props.type, shape = props.shape, className = props.className, onClick = props.onClick;
-    return (react_1.default.createElement(Button_1.Button, { title: title, icon: icons_1.WishlistIcon.iconName, className: className, onClick: onClick, type: type, shape: shape }));
+    return (react_1.default.createElement(Button_1.Button, { title: title, icon: Wishlist_1.default.iconName, className: className, onClick: onClick, type: type, shape: shape }));
 };
 exports.WishlistButton = WishlistButton;
 var Wishlist = function (props) {
@@ -122,5 +127,5 @@ exports.Wishlist.defaultProps = {
     type: 'threekit',
 };
 exports.Wishlist.componentName = 'wishlist';
-exports.Wishlist.Icon = icons_1.WishlistIcon;
+exports.Wishlist.Icon = Wishlist_1.default;
 exports.default = exports.Wishlist;

package/dist/components/Zoom/index.d.ts

@@ -46,7 +46,7 @@ export declare const Zoom: {
         type: string;
     };
     componentName: string;
-    Icon: import("../../icons").IIcon;
+    Icon: import("../..").IIcon;
     ZoomOut: (props: ZoomComponentProps) => JSX.Element | null;
     ZoomIn: (props: ZoomComponentProps) => JSX.Element | null;
 };

package/dist/components/Zoom/index.js

@@ -19,7 +19,8 @@ var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var shared_styles_1 = require("../shared.styles");
 var Button_1 = __importDefault(require("../Button"));
-var icons_1 = require("../../icons");
+var ZoomIn_1 = __importDefault(require("../../icons/ZoomIn"));
+var ZoomOut_1 = __importDefault(require("../../icons/ZoomOut"));
 var useThreekitInitStatus_1 = __importDefault(require("../../hooks/useThreekitInitStatus"));
 var useZoom_1 = __importDefault(require("../../hooks/useZoom"));
 var utils_1 = require("../../utils");
@@ -40,7 +41,7 @@ var ZoomOutComponent = function (props) {
         return null;
     var handleZoomOut = function () { return zoomOut(Math.abs(step)); };
     var cls = (0, utils_1.generateWidgetClassName)('zoom', className);
-    return (react_1.default.createElement(Button_1.default, { className: "".concat(cls, " zoom-out"), shape: shape, type: type, icon: icons_1.ZoomOutIcon.iconName, onClick: handleZoomOut }));
+    return (react_1.default.createElement(Button_1.default, { className: "".concat(cls, " zoom-out"), shape: shape, type: type, icon: ZoomOut_1.default.iconName, onClick: handleZoomOut }));
 };
 exports.ZoomOutComponent = ZoomOutComponent;
 var ZoomInComponent = function (props) {
@@ -55,7 +56,7 @@ var ZoomInComponent = function (props) {
         return null;
     var handleZoomOut = function () { return zoomIn(Math.abs(step)); };
     var cls = (0, utils_1.generateWidgetClassName)('zoom', className);
-    return (react_1.default.createElement(Button_1.default, { className: "".concat(cls, " zoom-in"), shape: shape, type: type, icon: icons_1.ZoomInIcon.iconName, onClick: handleZoomOut }));
+    return (react_1.default.createElement(Button_1.default, { className: "".concat(cls, " zoom-in"), shape: shape, type: type, icon: ZoomIn_1.default.iconName, onClick: handleZoomOut }));
 };
 exports.ZoomInComponent = ZoomInComponent;
 var Zoom = function (props) {
@@ -113,7 +114,7 @@ exports.Zoom.defaultProps = {
     type: 'threekit',
 };
 exports.Zoom.componentName = 'zoom';
-exports.Zoom.Icon = icons_1.ZoomInIcon;
+exports.Zoom.Icon = ZoomIn_1.default;
 exports.Zoom.ZoomOut = exports.ZoomOutComponent;
 exports.Zoom.ZoomIn = exports.ZoomInComponent;
 exports.default = exports.Zoom;

package/dist/components/formComponents.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/components/message/index.js

@@ -1,23 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -27,7 +8,8 @@ var react_1 = __importDefault(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var message_styles_1 = require("./message.styles");
-var icons_1 = __importStar(require("../../icons"));
+var icons_1 = __importDefault(require("../../icons"));
+var Info_1 = __importDefault(require("../../icons/Info"));
 var styled_components_1 = require("styled-components");
 var theme_1 = __importDefault(require("../../theme"));
 var messagesEl;
@@ -57,7 +39,7 @@ var MessageComponent = function (props) {
     var content = props.content, icon = props.icon;
     if (!content)
         return null;
-    var Icon = icon ? icons_1.default[icon] : icons_1.InfoIcon;
+    var Icon = icon ? icons_1.default[icon] : Info_1.default;
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
         react_1.default.createElement(message_styles_1.Wrapper, null,
             react_1.default.createElement(message_styles_1.IconWrapper, null,
@@ -105,7 +87,7 @@ exports.MessageComponent.propTypes = {
 };
 exports.MessageComponent.defaultProps = {
     content: undefined,
-    icon: icons_1.InfoIcon.iconName,
+    icon: Info_1.default.iconName,
     className: undefined,
 };
 exports.default = { config: config, info: info };

package/dist/hooks/useAttribute/index.d.ts

@@ -6,5 +6,5 @@ declare type UseAttributeSuccess = [
     (val: RawAttributeValue) => Promise<void>
 ];
 declare type UseAttributeHook = UseAttributeError | UseAttributeSuccess;
-declare const useAttribute: (attributeName?: string | undefined) => UseAttributeHook;
+declare const useAttribute: (attributeName?: string) => UseAttributeHook;
 export default useAttribute;

package/dist/hooks/useLoadingProgress/index.d.ts

@@ -0,0 +1,2 @@
+declare const useLoadingProgress: () => number;
+export default useLoadingProgress;

package/dist/hooks/useLoadingProgress/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var store_1 = require("../../store");
+var treble_1 = require("../../store/treble");
+var useLoadingProgress = function () {
+    var progress = (0, store_1.useThreekitSelector)(treble_1.getLoadingProgress);
+    return progress;
+};
+exports.default = useLoadingProgress;

package/dist/hooks/usePlayer/index.d.ts

@@ -0,0 +1,3 @@
+declare type UsePlayer = [undefined] | [(node: null | HTMLDivElement) => void];
+declare const usePlayer: () => UsePlayer;
+export default usePlayer;

package/dist/hooks/usePlayer/index.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var react_redux_1 = require("react-redux");
+var treble_1 = require("../../store/treble");
+var constants_1 = require("../../constants");
+var usePlayer = function () {
+    var playerElRef = (0, react_1.useRef)(null);
+    var playerLoaderRef = (0, react_1.useRef)(null);
+    var playerWrapperRef = (0, react_1.useRef)(null);
+    var playerElementId = (0, react_redux_1.useSelector)(treble_1.getPlayerElementId);
+    var playerRef = (0, react_1.useCallback)(function (node) {
+        var _a;
+        if (node !== null) {
+            playerWrapperRef.current = node;
+            if (!playerElementId)
+                return;
+            playerElRef.current = document.getElementById(playerElementId);
+            (_a = playerWrapperRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(playerElRef.current);
+            return;
+        }
+    }, [playerElementId]);
+    (0, react_1.useEffect)(function () { return function () {
+        if (!playerElRef.current)
+            return;
+        if (!playerLoaderRef.current)
+            playerLoaderRef.current = document.getElementById(constants_1.TK_PLAYER_LOADER_DIV);
+        if (!playerElRef.current)
+            throw new Error('Move from element not found');
+        if (!playerLoaderRef.current)
+            throw new Error('Player Loader element not found');
+        playerLoaderRef.current.appendChild(playerElRef.current);
+    }; }, []);
+    if (!playerElementId)
+        return [undefined];
+    return [playerRef];
+};
+exports.default = usePlayer;

package/dist/hooks/useSnapshot/index.d.ts

@@ -1,3 +1,3 @@
 import { ISnapshotsCameras, ITakeSnapshotsConfig } from '../../Treble';
-declare const useSnapshot: (cameras: ISnapshotsCameras, config: ITakeSnapshotsConfig) => (() => Promise<void | string[] | Blob[] | null>) | undefined;
+declare const useSnapshot: (cameras: ISnapshotsCameras, config: ITakeSnapshotsConfig) => (() => Promise<void | string[] | File[] | Blob[] | null>) | undefined;
 export default useSnapshot;

package/dist/hooks/useWishlist/index.d.ts

@@ -7,7 +7,7 @@ interface HydratedWishlistItem extends IConfigurationResponse {
 }
 declare type UseWishlistHook = [
     Array<HydratedWishlistItem>,
-    (config?: Omit<ISaveConfiguration, 'configurator'>) => void,
+    (config?: Omit<ISaveConfiguration, 'configuration'>) => void,
     () => void
 ] | [undefined, undefined, undefined];
 declare const useWishlist: () => UseWishlistHook;

package/dist/http/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/icons/Spinner.js

@@ -5,7 +5,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/index.d.ts

@@ -13,6 +13,8 @@ import useShare from './hooks/useShare';
 import usePlayerPortal from './hooks/usePlayerPortal';
 import useProductCache from './hooks/useProductCache';
 import useNestedConfigurator from './hooks/useNestedConfigurator';
+import useLoadingProgress from './hooks/useLoadingProgress';
+import usePlayer from './hooks/usePlayer';
 import ThreekitProvider from './components/ThreekitProvider';
 import Player from './components/Player';
 import Button from './components/Button';
@@ -46,4 +48,4 @@ import icons from './icons';
 export * from './icons';
 import TrebleApp from './components/TrebleApp';
 import ProductLayout from './components/ProductLayout';
-export { useAttribute, useConfigurator, useConfigurationLoader, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, useProductCache, useNestedConfigurator, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, Switch, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, ProductLayout, };
+export { useAttribute, useConfigurator, useConfigurationLoader, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, useProductCache, useNestedConfigurator, useLoadingProgress, usePlayer, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, Switch, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, ProductLayout, };

package/dist/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -13,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductLayout = exports.TrebleApp = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.PortalToArOverlay = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Switch = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.useNestedConfigurator = exports.useProductCache = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurationLoader = exports.useConfigurator = exports.useAttribute = void 0;
+exports.ProductLayout = exports.TrebleApp = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.PortalToArOverlay = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Switch = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.usePlayer = exports.useLoadingProgress = exports.useNestedConfigurator = exports.useProductCache = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurationLoader = exports.useConfigurator = exports.useAttribute = void 0;
 //  Hooks
 var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
 exports.useAttribute = useAttribute_1.default;
@@ -46,6 +50,10 @@ var useProductCache_1 = __importDefault(require("./hooks/useProductCache"));
 exports.useProductCache = useProductCache_1.default;
 var useNestedConfigurator_1 = __importDefault(require("./hooks/useNestedConfigurator"));
 exports.useNestedConfigurator = useNestedConfigurator_1.default;
+var useLoadingProgress_1 = __importDefault(require("./hooks/useLoadingProgress"));
+exports.useLoadingProgress = useLoadingProgress_1.default;
+var usePlayer_1 = __importDefault(require("./hooks/usePlayer"));
+exports.usePlayer = usePlayer_1.default;
 //  Components
 var ThreekitProvider_1 = __importDefault(require("./components/ThreekitProvider"));
 exports.ThreekitProvider = ThreekitProvider_1.default;

package/dist/store/index.d.ts

@@ -29,7 +29,7 @@ declare const store: import("@reduxjs/toolkit").EnhancedStore<{
     wishlist: import("../Treble").WishlistArray;
     price: import("./price").PriceState;
 }, import("redux").Dispatch<import("redux").AnyAction>>>>;
-export declare const createStore: (reducer?: Record<string, Reducer<any, import("redux").AnyAction>> | undefined) => import("@reduxjs/toolkit").EnhancedStore<{
+export declare const createStore: (reducer?: Record<string, Reducer>) => import("@reduxjs/toolkit").EnhancedStore<{
     treble: import("./treble").TrebleState;
     product: import("./product").ProductState;
     attributes: import("./attributes").AttributesState;

package/dist/store/product.d.ts

@@ -58,13 +58,13 @@ export declare const getProductCache: (state: RootState) => Array<Pick<CachedPro
 /*****************************************************
  * Complex Actions
  ****************************************************/
-export declare const initProduct: (prods?: IHydratedProducts | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => void;
-export declare const cacheActiveProduct: (config?: Pick<IReloadConfig, "label" | "thumbnail"> | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => {
+export declare const initProduct: (prods?: IHydratedProducts) => (dispatch: ThreekitDispatch, getState: () => RootState) => void;
+export declare const cacheActiveProduct: (config?: Pick<IReloadConfig, 'label' | 'thumbnail'>) => (dispatch: ThreekitDispatch, getState: () => RootState) => {
     payload: CachedProductState;
     type: string;
 };
-export declare const loadProduct: (id: string, config?: LoadProductConfig | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
+export declare const loadProduct: (id: string, config?: LoadProductConfig) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
 export declare const loadNewProduct: (config: undefined | string | IReloadConfig) => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const changeActiveCacheIdx: (idx: number) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
-export declare const removeProductIdx: (idx?: number | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
+export declare const removeProductIdx: (idx?: number) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
 export default reducer;

package/dist/store/translations.d.ts

@@ -14,7 +14,7 @@ export declare let TRANSLATIONS: undefined | ITranslationMap;
  * Actions
  ****************************************************/
 export declare const setLanguage: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
-export declare const initTranslations: (language?: string | undefined) => (dispatch: ThreekitDispatch) => Promise<void>;
+export declare const initTranslations: (language?: string) => (dispatch: ThreekitDispatch) => Promise<void>;
 declare const reducer: import("redux").Reducer<TranslationsState, import("redux").AnyAction>;
 /*****************************************************
  * Standard Selectors

package/dist/store/treble.d.ts

@@ -13,6 +13,7 @@ export interface IPlayerInit {
     initialConfiguration?: IConfiguration;
 }
 export interface ILaunchConfig {
+    assetId?: string;
     productId: string;
     threekitEnv: string;
     serverUrl: string;
@@ -36,6 +37,7 @@ export interface TrebleState {
     isThreekitInitialized: boolean;
     playerElId: undefined | string;
     notifications: boolean;
+    loadingProgress: number;
 }
 export interface NotificationEvent extends Event {
     detail: {
@@ -54,6 +56,7 @@ export declare const setThreekitInitialized: import("@reduxjs/toolkit").ActionCr
 export declare const setPlayerLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
 export declare const setPlayerElement: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
 export declare const reloadTreble: import("@reduxjs/toolkit").ActionCreatorWithPayload<Partial<TrebleState>, string>;
+export declare const updateLoadingProgress: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
 /*****************************************************
  * Slice
  ****************************************************/
@@ -65,11 +68,12 @@ export declare const getThreekitEnv: (state: RootState) => string;
 export declare const isThreekitInitialized: (state: RootState) => boolean;
 export declare const isPlayerLoading: (state: RootState) => boolean;
 export declare const getPlayerElementId: (state: RootState) => undefined | string;
+export declare const getLoadingProgress: (state: RootState) => number;
 /*****************************************************
  * Complex Actions
  ****************************************************/
 export declare const initPlayer: (config: IPlayerInit) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
-export declare const launch: (launchConfig?: Partial<ILaunchConfig> | undefined) => (dispatch: ThreekitDispatch) => Promise<void>;
+export declare const launch: (launchConfig?: Partial<ILaunchConfig>) => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const unloadPlayer: () => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const reloadPlayer: (config: undefined | string | Pick<IReloadConfig, 'assetId' | 'stageId' | 'configurationId' | 'configuration'>) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
 export default reducer;

package/dist/store/treble.js

@@ -50,7 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reloadPlayer = exports.unloadPlayer = exports.launch = exports.initPlayer = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.getThreekitEnv = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setThreekitInitialized = exports.setThreekitEnv = void 0;
+exports.reloadPlayer = exports.unloadPlayer = exports.launch = exports.initPlayer = exports.getLoadingProgress = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.getThreekitEnv = exports.updateLoadingProgress = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setThreekitInitialized = exports.setThreekitEnv = void 0;
 var connection_1 = __importDefault(require("../connection"));
 var toolkit_1 = require("@reduxjs/toolkit");
 var api_1 = __importDefault(require("../api"));
@@ -103,6 +103,7 @@ var initialState = {
     isPlayerLoading: false,
     playerElId: undefined,
     notifications: true,
+    loadingProgress: 0,
 };
 /*****************************************************
  * Actions
@@ -112,6 +113,7 @@ exports.setThreekitInitialized = (0, toolkit_1.createAction)('treble/set-threeki
 exports.setPlayerLoading = (0, toolkit_1.createAction)('treble/set-player-loading');
 exports.setPlayerElement = (0, toolkit_1.createAction)('treble/set-player-element');
 exports.reloadTreble = (0, toolkit_1.createAction)('treble/reload');
+exports.updateLoadingProgress = (0, toolkit_1.createAction)('treble/update-loading-progress');
 /*****************************************************
  * Slice
  ****************************************************/
@@ -139,6 +141,10 @@ var reducer = (0, toolkit_1.createSlice)({
         builder.addCase(exports.reloadTreble, function (state, action) {
             return __assign(__assign({}, state), action.payload);
         });
+        builder.addCase(exports.updateLoadingProgress, function (state, action) {
+            state.loadingProgress = Math.round(action.payload * 100);
+            return state;
+        });
     },
 }).reducer;
 /*****************************************************
@@ -163,6 +169,11 @@ var getPlayerElementId = function (state) {
     return state.treble.playerElId;
 };
 exports.getPlayerElementId = getPlayerElementId;
+//  Player's HTML element
+var getLoadingProgress = function (state) {
+    return state.treble.loadingProgress;
+};
+exports.getLoadingProgress = getLoadingProgress;
 /*****************************************************
  * Complex Actions
  ****************************************************/
@@ -175,7 +186,11 @@ var initPlayer = function (config) {
                     el = config.el, authToken = config.authToken, assetId = config.assetId, stageId = config.stageId, orgId = config.orgId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
                     return [4 /*yield*/, window.threekitPlayer(__assign(__assign({ el: el, 
                             // Variables to sort out
-                            authToken: authToken, stageId: stageId, assetId: assetId }, playerConfig), { initialConfiguration: initialConfiguration }))];
+                            authToken: authToken, stageId: stageId, assetId: assetId }, playerConfig), { initialConfiguration: initialConfiguration, onLoadingProgress: function (progress) {
+                                var _a;
+                                dispatch((0, exports.updateLoadingProgress)(progress));
+                                (_a = playerConfig === null || playerConfig === void 0 ? void 0 : playerConfig.onLoadingProgress) === null || _a === void 0 ? void 0 : _a.call(playerConfig, progress);
+                            } }))];
                 case 1:
                     player = _a.sent();
                     return [4 /*yield*/, player.getConfigurator()];
@@ -200,6 +215,7 @@ var initPlayer = function (config) {
                         };
                     dispatch((0, exports.setThreekitInitialized)(true));
                     dispatch((0, exports.setPlayerLoading)(false));
+                    dispatch((0, exports.updateLoadingProgress)(1));
                     if (window.threekit.treble._debugMode)
                         (0, utils_1.runDebugger)();
                     window.threekit.player.on('setConfiguration', function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -227,7 +243,7 @@ var initPlayer = function (config) {
 exports.initPlayer = initPlayer;
 var launch = function (launchConfig) {
     return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
-        var config, productId, credentials, productsRaw, products, threekitEnv, serverUrl, playerConfig, envCredentials, _a, assetId, stageId, configurationId, initialConfigurationRaw, threekitDomainRaw, orgId, authToken, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration;
+        var config, productId, credentials, productsRaw, products, threekitEnv, serverUrl, playerConfig, envCredentials, _a, assetIdRaw, stageId, configurationId, initialConfigurationRaw, assetId, threekitDomainRaw, orgId, authToken, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration;
         var _b, _c, _d, _e, _f, _g, _h;
         return __generator(this, function (_j) {
             switch (_j.label) {
@@ -285,7 +301,8 @@ var launch = function (launchConfig) {
                     serverUrl = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.serverUrl) || ((_g = config === null || config === void 0 ? void 0 : config.project) === null || _g === void 0 ? void 0 : _g.serverUrl);
                     playerConfig = Object.assign({}, constants_1.DEFAULT_PLAYER_CONFIG, config.player, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.playerConfig);
                     envCredentials = credentials[threekitEnv];
-                    _a = products[productId][threekitEnv], assetId = _a.assetId, stageId = _a.stageId, configurationId = _a.configurationId, initialConfigurationRaw = _a.initialConfiguration;
+                    _a = products[productId][threekitEnv], assetIdRaw = _a.assetId, stageId = _a.stageId, configurationId = _a.configurationId, initialConfigurationRaw = _a.initialConfiguration;
+                    assetId = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.assetId) || assetIdRaw;
                     threekitDomainRaw = envCredentials.threekitDomain || "".concat(threekitEnv, ".threekit.com");
                     orgId = envCredentials.orgId, authToken = envCredentials.publicToken;
                     if (playerConfig.elementId) {

package/dist/store/wishlist.d.ts

@@ -9,7 +9,7 @@ export declare type WishlistState = WishlistArray;
  * Standard Selectors
  ****************************************************/
 export declare const refreshWishlist: import("@reduxjs/toolkit").AsyncThunk<import("../http/configurations").IConfigurationResponse[], void, {}>;
-export declare const addToWishlist: import("@reduxjs/toolkit").AsyncThunk<import("../http/configurations").IConfigurationResponse[], Omit<ISaveConfiguration, "configurator">, {}>;
+export declare const addToWishlist: import("@reduxjs/toolkit").AsyncThunk<import("../http/configurations").IConfigurationResponse[], Omit<ISaveConfiguration, "configuration">, {}>;
 export declare const clearWishlist: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[], import("../http/configurations").IConfigurationResponse[], "treble/wishlist/clear", never, never>;
 export declare const removeFromWishlist: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[idx: number], import("../http/configurations").IConfigurationResponse[], "treble/wishlist/remove-item", never, never>;
 /*****************************************************

package/dist/types.d.ts

@@ -161,6 +161,56 @@ export interface ISnapshotConfig {
     };
 }
 export declare type SNAPSHOT_FORMAT_TYPES = 'jpg' | 'png';
+/***************************************************
+ * Tools
+ **************************************************/
+export interface Node {
+    name: string;
+    nodeId: string;
+    type: string;
+}
+export interface HitNode {
+    distance: number;
+    intersection: ICoordinates;
+    nodeId: string;
+    hierarchy: Array<Node>;
+}
+export interface PlayerToolEvent {
+    altKey: boolean;
+    clientX: number;
+    clientY: number;
+    deltaX: number;
+    deltaY: number;
+    ctrlKey: boolean;
+    isTouch: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    which: number;
+    originalEvent: MouseEvent;
+    rect: DOMRect;
+    hitNodes: Array<HitNode>;
+}
+export interface CustomPlayerTool {
+    key: string;
+    label: string;
+    active: boolean;
+    enabled: boolean;
+    handlers: {
+        click?: (event: PlayerToolEvent) => void | Promise<void>;
+        mousedown?: (event: PlayerToolEvent) => void | Promise<void>;
+        mouseup?: (event: PlayerToolEvent) => void | Promise<void>;
+    };
+}
+export interface IThreekitTools {
+    addTool: (tool: string | CustomPlayerTool) => void;
+    addTools: (tools: Array<string | CustomPlayerTool>) => void;
+    removeTool: (tool: string) => void;
+    removeTools: (tools: Array<string>) => void;
+    setPrimary: (tool: string) => void;
+    getPrimaryTool: () => string;
+    setTool: () => void;
+    setTools: () => void;
+}
 /***************************************************
  *  Threekit Api
  **************************************************/
@@ -189,16 +239,6 @@ export interface IThreekitScene {
     find: (query: ISceneQuery | string) => ISceneResult;
     set: (query: ISceneQuery | string, transform: ICoordinates) => void;
 }
-export interface IThreekitTools {
-    addTool: (tool: string) => void;
-    addTools: (tools: string[]) => void;
-    removeTool: (tool: string) => void;
-    removeTools: (tools: string[]) => void;
-    setPrimary: (tool: string) => void;
-    getPrimaryTool: () => string;
-    setTool: () => void;
-    setTools: () => void;
-}
 export interface IThreekitCamera {
     frameBoundingSphere: () => void;
     getPosition: () => ICoordinates;

package/dist/utils.d.ts

@@ -15,13 +15,13 @@ interface IAttributeComponentProps {
 interface IAttributesComponentProps {
     [attributeName: string]: undefined | false | IAttributeComponentProps;
 }
-export declare const generateClassName: (baseClass: string) => (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const generateInputClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const generateWidgetClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const generateLayoutClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const generateToolClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const generateDisplayClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const generateFormClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
+export declare const generateClassName: (baseClass: string) => (component: string, customClassName?: string, title?: string) => string;
+export declare const generateInputClassName: (component: string, customClassName?: string, title?: string) => string;
+export declare const generateWidgetClassName: (component: string, customClassName?: string, title?: string) => string;
+export declare const generateLayoutClassName: (component: string, customClassName?: string, title?: string) => string;
+export declare const generateToolClassName: (component: string, customClassName?: string, title?: string) => string;
+export declare const generateDisplayClassName: (component: string, customClassName?: string, title?: string) => string;
+export declare const generateFormClassName: (component: string, customClassName?: string, title?: string) => string;
 export declare const isIOS: () => RegExpMatchArray | null;
 export declare const isJsonString: (str: string) => boolean;
 export declare const objectToQueryStr: (obj: Record<string, any>) => string;
@@ -57,7 +57,7 @@ export declare const selectionToConfiguration: (value: RawAttributeValue, attrib
     assetId: RawAttributeValue;
 } | undefined;
 export declare const filterFormAttributes: (attributes: Record<string, IThreekitDisplayAttribute>, attributeComponentProps: IAttributesComponentProps, includeReservedAttributes: boolean) => IThreekitDisplayAttribute[];
-export declare const isUuid: (str?: string | undefined) => boolean;
+export declare const isUuid: (str?: string) => boolean;
 export declare const runDebugger: () => Promise<void>;
 export declare const loadTrebleConfig: () => Partial<ITrebleConfig>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.79",
+  "version": "0.0.82",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [