@threekit-tools/treble 0.0.83 → 0.0.85-next-2

package/dist/http/orders.d.ts

@@ -1,19 +1,17 @@
 import { IMultiPageResponse } from './request';
 export declare type STATUSES = 'List';
-interface ICartItem {
+export interface ICartItem {
     count: number;
-    metadata: null | Record<string, string>;
+    metadata?: null | Record<string, string>;
     configurationId: string;
 }
-export interface ICart {
-    cart: Array<ICartItem>;
-}
-interface IOrderShared extends ICart {
-    name: string;
+interface IOrderShared {
+    name?: string;
     orgId: string;
     platform: Record<string, any>;
     metadata: Record<string, string>;
     status: STATUSES;
+    cart: Array<ICartItem>;
 }
 interface IOrderRequest extends IOrderShared {
 }
@@ -30,7 +28,7 @@ interface IOrdersResponse extends IMultiPageResponse {
     orders: Array<IOrderResponse>;
 }
 export declare const createOrder: (data: IOrderRequest) => Promise<import("axios").AxiosResponse<IOrderResponse>>;
-export declare const editOrderCart: (orderId: string, data: ICart) => Promise<import("axios").AxiosResponse<IOrderResponse>>;
+export declare const editOrderCart: (orderId: string, data: Array<ICartItem>) => Promise<import("axios").AxiosResponse<IOrderResponse>>;
 export declare const getOrder: (orderId: string) => Promise<import("axios").AxiosResponse<IOrderResponse>>;
 export declare const fetchOrders: () => Promise<import("axios").AxiosResponse<IOrdersResponse>>;
 export {};

package/dist/icons/Draggable.d.ts

@@ -0,0 +1,3 @@
+import { IIcon } from './index';
+export declare const Draggable: IIcon;
+export default Draggable;

package/dist/icons/Draggable.js

@@ -0,0 +1,23 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Draggable = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var SVG = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .tk-icon {\n    fill: ", ";\n  }\n"], ["\n  .tk-icon {\n    fill: ", ";\n  }\n"])), function (props) { return props.theme.textColor; });
+var Draggable = function () {
+    return (react_1.default.createElement(SVG, { width: "38", height: "40", viewBox: "0 0 38 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M27.9815 5.45671L30.0862 8.65278L33.828 7.40553L36.9461 8.65278L36.7122 29.9339L33.1264 35.5466L27.5138 38.5867L14.1838 38.9765L7.47985 36.7938L3.66015 34.3773L2.33495 31.8048L1.63337 29.5442L1.0877 16.2922L3.66015 12.0827L7.47985 9.82208L8.57119 1.87087L12.6247 0.701577L15.587 4.13151L18.1594 3.35198H20.8098L22.7586 6.70396L25.0972 5.45671H27.9815Z", fill: "#8C8C8C" }),
+        react_1.default.createElement("path", { d: "M33.96 24.7661C33.7703 28.3711 32.751 31.153 30.8585 33.1273C28.966 35.1017 25.8767 35.8779 21.8818 36.2584C21.5389 36.291 21.2874 36.5954 21.3201 36.9383C21.3527 37.2812 21.6571 37.5327 22 37.5C26.1901 37.1009 29.5979 36.2449 31.759 33.9904C33.9201 31.7357 35.0055 28.6321 35.2055 24.8316C35.2236 24.4877 34.9595 24.1942 34.6156 24.1761C34.2716 24.158 33.9781 24.4221 33.96 24.7661Z", className: "tk-icon" }),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.22391 9.36853C5.44399 9.98874 4.1305 10.6237 3.10979 11.513C2.03569 12.4487 1.33529 13.622 0.715487 15.2188L0.69783 15.2643L0.687463 15.312L1.29685 15.4445C0.687463 15.312 0.68725 15.313 0.68725 15.313L0.687032 15.314L0.686578 15.3162L0.685604 15.3208C0.684925 15.3242 0.684185 15.3279 0.683386 15.332C0.681792 15.3403 0.679952 15.3503 0.67789 15.3624C0.673775 15.3864 0.668707 15.4188 0.662907 15.4616C0.651334 15.5469 0.636567 15.6753 0.620646 15.8632C0.588839 16.2385 0.551819 16.8582 0.527256 17.8554C0.478135 19.8497 0.478465 23.3704 0.673545 29.4959C0.781702 32.892 3.31916 35.5153 6.78326 37.2629C10.2666 39.0203 14.836 39.9799 19.3695 39.9997C23.8999 40.0195 28.4686 39.1009 31.9279 37.0266C35.4133 34.9366 37.7789 31.6612 37.7789 27.0595V10.8453C37.7593 9.50257 37.2334 8.45356 36.4198 7.74523C35.6029 7.0341 34.5338 6.69847 33.4881 6.70404C32.4425 6.7096 31.3762 7.05644 30.5622 7.76798C30.498 7.82408 30.4356 7.88228 30.375 7.94255C30.2006 6.9769 29.7369 6.20175 29.0922 5.6405C28.2753 4.92937 27.2062 4.59374 26.1605 4.59931C25.1149 4.60487 24.0486 4.95171 23.2346 5.66325C23.1816 5.70954 23.1299 5.75726 23.0794 5.80639C22.936 4.7462 22.4538 3.90185 21.7646 3.30191C20.9478 2.59078 19.8787 2.25515 18.833 2.26072C17.7873 2.26628 16.721 2.61312 15.907 3.32466C15.8506 3.37394 15.7956 3.42484 15.7421 3.47733C15.5875 2.44918 15.1113 1.62824 14.437 1.04126C13.6202 0.330136 12.5511 -0.00549506 11.5054 6.80095e-05C10.4597 0.00563089 9.39343 0.352475 8.57942 1.06401C7.81729 1.7302 7.30554 2.69185 7.23077 3.90742L7.22487 3.90742L7.22485 4.02731C7.22248 4.09063 7.22129 4.15461 7.22129 4.21926H7.22481L7.22391 9.36853ZM9.40027 2.00307C8.88313 2.45511 8.51195 3.1253 8.47209 4.05205L8.4686 24.0195C8.46854 24.364 8.18928 24.6431 7.84487 24.643C7.50045 24.643 7.22129 24.3637 7.22135 24.0193L7.22368 10.693C5.72634 11.2416 4.70404 11.7782 3.92908 12.4534C3.07383 13.1985 2.47294 14.1538 1.90141 15.6107C1.90061 15.6163 1.89975 15.6225 1.89883 15.6293C1.89061 15.6899 1.87797 15.7971 1.86344 15.9685C1.83434 16.3118 1.79828 16.9054 1.77413 17.8861C1.7258 19.848 1.72547 23.343 1.92016 29.4562C2.00689 32.1794 4.04917 34.4866 7.34505 36.1494C10.6217 37.8025 14.9925 38.7333 19.3749 38.7524C23.7604 38.7716 28.0831 37.8778 31.2865 35.957C34.4635 34.0519 36.5316 31.1496 36.5316 27.0595L36.5316 10.9232C36.5316 9.88678 36.1454 9.16004 35.6008 8.68594C35.0437 8.20097 34.2809 7.94708 33.4948 7.95127C32.7085 7.95545 31.9429 8.21761 31.383 8.70704C30.862 9.16245 30.4892 9.83928 30.454 10.7768L30.4515 16.6922C30.4514 17.0366 30.172 17.3157 29.8276 17.3155C29.4832 17.3154 29.2041 17.0361 29.2043 16.6916L29.2067 10.9232H29.204C29.204 10.8667 29.2049 10.8106 29.2068 10.755L29.2076 8.8185H29.204C29.204 7.78205 28.8178 7.05531 28.2732 6.58121C27.7162 6.09624 26.9534 5.84235 26.1672 5.84654C25.3809 5.85072 24.6153 6.11288 24.0554 6.60231C23.5343 7.05787 23.1613 7.73502 23.1264 8.67305L23.1237 15.4449C23.1236 15.7893 22.8443 16.0684 22.4999 16.0683C22.1554 16.0681 21.8763 15.7888 21.8765 15.4444L21.8791 8.8185H21.8764C21.8764 8.76232 21.8773 8.70664 21.8791 8.65146L21.88 6.47991H21.8764C21.8764 5.44346 21.4903 4.71672 20.9457 4.24262C20.3886 3.75765 19.6258 3.50376 18.8396 3.50795C18.0534 3.51213 17.2878 3.77429 16.7278 4.26372C16.2071 4.71888 15.8344 5.39523 15.7989 6.33197L15.7963 13.8858C15.7961 14.2302 15.5168 14.5093 15.1724 14.5092C14.828 14.5091 14.5489 14.2298 14.549 13.8854L14.5516 6.47991H14.5489C14.5489 6.42277 14.5498 6.36614 14.5517 6.31003L14.5524 4.21926H14.5489C14.5489 3.18282 14.1627 2.45608 13.6181 1.98197C13.061 1.497 12.2982 1.24312 11.512 1.2473C10.7258 1.25148 9.96018 1.51365 9.40027 2.00307Z", className: "tk-icon" })));
+};
+exports.Draggable = Draggable;
+exports.Draggable.iconName = 'draggable';
+exports.default = exports.Draggable;
+var templateObject_1;

package/dist/icons/index.js

@@ -22,6 +22,7 @@ var DoubleCaretLeft_1 = __importDefault(require("./DoubleCaretLeft"));
 var DoubleCaretRight_1 = __importDefault(require("./DoubleCaretRight"));
 var Download_1 = __importDefault(require("./Download"));
 var Drag_1 = __importDefault(require("./Drag"));
+var Draggable_1 = __importDefault(require("./Draggable"));
 var Edit_1 = __importDefault(require("./Edit"));
 var Heart_1 = __importDefault(require("./Heart"));
 var Image_1 = __importDefault(require("./Image"));
@@ -64,6 +65,7 @@ exports.default = (_a = {},
     _a[DoubleCaretRight_1.default.iconName] = DoubleCaretRight_1.default,
     _a[Download_1.default.iconName] = Download_1.default,
     _a[Drag_1.default.iconName] = Drag_1.default,
+    _a[Draggable_1.default.iconName] = Draggable_1.default,
     _a[Edit_1.default.iconName] = Edit_1.default,
     _a[Heart_1.default.iconName] = Heart_1.default,
     _a[Image_1.default.iconName] = Image_1.default,

package/dist/index.d.ts

@@ -31,6 +31,7 @@ import ProductDescription from './components/ProductDescription';
 import AttributeTitle from './components/AttributeTitle';
 import AttributeValue from './components/AttributeValue';
 import TotalPrice from './components/TotalPrice';
+import Skeleton from './components/Skeleton';
 import message from './components/message';
 import Modal from './components/Modal';
 import Drawer from './components/Drawer';
@@ -46,6 +47,9 @@ import Wishlist from './components/Wishlist';
 import Share from './components/Share';
 import TrebleApp from './components/TrebleApp';
 import ProductLayout from './components/ProductLayout';
+import PlayerLoadingCircular from './components/PlayerLoadingCircular';
+import PlayerLoadingSpinner from './components/PlayerLoadingSpinner';
+import DraggableHint from './components/DraggableHint';
 import AddIcon from './icons/Add';
 import ArrowLeftIcon from './icons/ArrowLeft';
 import ArrowRightIcon from './icons/ArrowRight';
@@ -63,6 +67,7 @@ import DeleteIcon from './icons/Delete';
 import DoubleCaretLeftIcon from './icons/DoubleCaretLeft';
 import DoubleCaretRightIcon from './icons/DoubleCaretRight';
 import DownloadIcon from './icons/Download';
+import DraggableIcon from './icons/Draggable';
 import DragIcon from './icons/Drag';
 import EditIcon from './icons/Edit';
 import HeartIcon from './icons/Heart';
@@ -87,4 +92,4 @@ import WishlistIcon from './icons/Wishlist';
 import ZoomInIcon from './icons/ZoomIn';
 import ZoomOutIcon from './icons/ZoomOut';
 import SpinnerIcon from './icons/Spinner';
-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, TrebleApp, ProductLayout, AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, SpinnerIcon, };
+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, Skeleton, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, TrebleApp, ProductLayout, PlayerLoadingCircular, PlayerLoadingSpinner, DraggableHint, AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DraggableIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, SpinnerIcon, };

package/dist/index.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArrowLeftIcon = exports.AddIcon = exports.ProductLayout = exports.TrebleApp = 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;
-exports.SpinnerIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = void 0;
+exports.PlayerLoadingCircular = exports.ProductLayout = exports.TrebleApp = 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.Skeleton = 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;
+exports.SpinnerIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DraggableIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = exports.AddIcon = exports.DraggableHint = exports.PlayerLoadingSpinner = void 0;
 var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
 exports.useAttribute = useAttribute_1.default;
 var useConfigurator_1 = __importDefault(require("./hooks/useConfigurator"));
@@ -71,6 +71,8 @@ var AttributeValue_1 = __importDefault(require("./components/AttributeValue"));
 exports.AttributeValue = AttributeValue_1.default;
 var TotalPrice_1 = __importDefault(require("./components/TotalPrice"));
 exports.TotalPrice = TotalPrice_1.default;
+var Skeleton_1 = __importDefault(require("./components/Skeleton"));
+exports.Skeleton = Skeleton_1.default;
 var message_1 = __importDefault(require("./components/message"));
 exports.message = message_1.default;
 var Modal_1 = __importDefault(require("./components/Modal"));
@@ -101,6 +103,12 @@ var TrebleApp_1 = __importDefault(require("./components/TrebleApp"));
 exports.TrebleApp = TrebleApp_1.default;
 var ProductLayout_1 = __importDefault(require("./components/ProductLayout"));
 exports.ProductLayout = ProductLayout_1.default;
+var PlayerLoadingCircular_1 = __importDefault(require("./components/PlayerLoadingCircular"));
+exports.PlayerLoadingCircular = PlayerLoadingCircular_1.default;
+var PlayerLoadingSpinner_1 = __importDefault(require("./components/PlayerLoadingSpinner"));
+exports.PlayerLoadingSpinner = PlayerLoadingSpinner_1.default;
+var DraggableHint_1 = __importDefault(require("./components/DraggableHint"));
+exports.DraggableHint = DraggableHint_1.default;
 var Add_1 = __importDefault(require("./icons/Add"));
 exports.AddIcon = Add_1.default;
 var ArrowLeft_1 = __importDefault(require("./icons/ArrowLeft"));
@@ -135,6 +143,8 @@ var DoubleCaretRight_1 = __importDefault(require("./icons/DoubleCaretRight"));
 exports.DoubleCaretRightIcon = DoubleCaretRight_1.default;
 var Download_1 = __importDefault(require("./icons/Download"));
 exports.DownloadIcon = Download_1.default;
+var Draggable_1 = __importDefault(require("./icons/Draggable"));
+exports.DraggableIcon = Draggable_1.default;
 var Drag_1 = __importDefault(require("./icons/Drag"));
 exports.DragIcon = Drag_1.default;
 var Edit_1 = __importDefault(require("./icons/Edit"));

package/dist/store/product.js

@@ -52,6 +52,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.removeProductIdx = exports.changeActiveCacheIdx = exports.loadNewProduct = exports.loadProduct = exports.cacheActiveProduct = exports.initProduct = exports.getProductCache = exports.getActiveCacheIdx = exports.getMetadata = exports.getName = exports.getProductId = exports.decrementActiveCacheIdx = exports.incrementActiveCacheIdx = exports.setActiveCacheIdx = exports.removeFromCache = exports.updateActiveProductCache = exports.appendToCache = exports.setMetadata = exports.setName = exports.setProductId = exports.PRODUCTS = void 0;
 var toolkit_1 = require("@reduxjs/toolkit");
+var types_1 = require("../types");
 var connection_1 = __importDefault(require("../connection"));
 var treble_1 = require("./treble");
 exports.setProductId = (0, toolkit_1.createAction)('treble/set-product-id');
@@ -168,7 +169,8 @@ var cacheActiveProduct = function (config) {
         var thumbnail = config === null || config === void 0 ? void 0 : config.thumbnail;
         var connectionObj = connection_1.default.getConnection();
         delete connectionObj.threekitDomain;
-        var configuration = window.threekit.configurator.getConfiguration();
+        var player = window.threekit.player.enableApi(types_1.PRIVATE_APIS.PLAYER);
+        var configuration = player.configurator.getFullConfiguration();
         var data = { connection: connectionObj, configuration: configuration };
         var product = Object.assign({
             id: state.product.id,

package/dist/store/treble.d.ts

@@ -34,7 +34,8 @@ export interface TrebleState {
     isThreekitInitialized: boolean;
     playerElId: undefined | string;
     notifications: boolean;
-    loadingProgress: number;
+    loadingProgress: undefined | number;
+    awaitingFirstInteraction: undefined | boolean;
 }
 export interface NotificationEvent extends Event {
     detail: {
@@ -51,12 +52,14 @@ export declare const setPlayerLoading: import("@reduxjs/toolkit").ActionCreatorW
 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>;
+export declare const setPlayerInteraction: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
 declare const reducer: import("redux").Reducer<TrebleState, import("redux").AnyAction>;
 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;
+export declare const getLoadingProgress: (state: RootState) => undefined | number;
+export declare const getPlayerInteraction: (state: RootState) => undefined | boolean;
 export declare const initPlayer: (config: IPlayerInit) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
 export declare const launch: (launchConfig?: Partial<ILaunchConfig>) => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const unloadPlayer: () => (dispatch: ThreekitDispatch) => Promise<void>;

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.getLoadingProgress = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.getThreekitEnv = exports.updateLoadingProgress = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setThreekitInitialized = exports.setThreekitEnv = void 0;
+exports.reloadPlayer = exports.unloadPlayer = exports.launch = exports.initPlayer = exports.getPlayerInteraction = exports.getLoadingProgress = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.getThreekitEnv = exports.setPlayerInteraction = 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"));
@@ -87,7 +87,8 @@ var initialState = {
     isPlayerLoading: false,
     playerElId: undefined,
     notifications: true,
-    loadingProgress: 0,
+    loadingProgress: undefined,
+    awaitingFirstInteraction: undefined,
 };
 exports.setThreekitEnv = (0, toolkit_1.createAction)('treble/set-threekit-env');
 exports.setThreekitInitialized = (0, toolkit_1.createAction)('treble/set-threekit-initialized');
@@ -95,6 +96,7 @@ exports.setPlayerLoading = (0, toolkit_1.createAction)('treble/set-player-loadin
 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');
+exports.setPlayerInteraction = (0, toolkit_1.createAction)('treble/set-player-interaction');
 var reducer = (0, toolkit_1.createSlice)({
     name: 'treble',
     initialState: initialState,
@@ -123,6 +125,9 @@ var reducer = (0, toolkit_1.createSlice)({
             state.loadingProgress = Math.round(action.payload * 100);
             return state;
         });
+        builder.addCase(exports.setPlayerInteraction, function (state, action) {
+            return __assign(__assign({}, state), { awaitingFirstInteraction: action.payload });
+        });
     },
 }).reducer;
 var getThreekitEnv = function (state) {
@@ -145,13 +150,18 @@ var getLoadingProgress = function (state) {
     return state.treble.loadingProgress;
 };
 exports.getLoadingProgress = getLoadingProgress;
+var getPlayerInteraction = function (state) {
+    return state.treble.awaitingFirstInteraction;
+};
+exports.getPlayerInteraction = getPlayerInteraction;
 var initPlayer = function (config) {
     return function (dispatch, getState) { return __awaiter(void 0, void 0, void 0, function () {
-        var el, authToken, assetId, stageId, orgId, playerConfig, initialConfiguration, player, configurator;
+        var el, authToken, assetId, stageId, orgId, playerConfig, initialConfiguration, player, configurator, ruleName;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     el = config.el, authToken = config.authToken, assetId = config.assetId, stageId = config.stageId, orgId = config.orgId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
+                    dispatch((0, exports.updateLoadingProgress)(0));
                     return [4, window.threekitPlayer(__assign(__assign({ el: el, authToken: authToken, stageId: stageId, assetId: assetId }, playerConfig), { initialConfiguration: initialConfiguration, onLoadingProgress: function (progress) {
                                 var _a;
                                 dispatch((0, exports.updateLoadingProgress)(progress));
@@ -182,6 +192,23 @@ var initPlayer = function (config) {
                     dispatch((0, exports.setThreekitInitialized)(true));
                     dispatch((0, exports.setPlayerLoading)(false));
                     dispatch((0, exports.updateLoadingProgress)(1));
+                    dispatch((0, exports.setPlayerInteraction)(true));
+                    ruleName = 'use-first-player-interaction';
+                    window.threekit.player.tools.addTool({
+                        key: ruleName,
+                        label: 'use-first-player-interaction',
+                        active: true,
+                        enabled: true,
+                        handlers: {
+                            mousedown: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    dispatch((0, exports.setPlayerInteraction)(false));
+                                    window.threekit.player.tools.removeTool(ruleName);
+                                    return [2];
+                                });
+                            }); },
+                        },
+                    });
                     if (window.threekit.treble._debugMode)
                         (0, utils_1.runDebugger)();
                     window.threekit.player.on('setConfiguration', function () { return __awaiter(void 0, void 0, void 0, function () {

package/dist/types.d.ts

@@ -1,30 +1,67 @@
 /// <reference types="webpack-env" />
 import threekitAPI from './api';
 import Treble from './Treble';
-declare type SCENE_PHASES = 'LOADED' | 'PRELOADED' | 'RENDERED';
-declare type PRIVATE_APIS = 'scene' | 'player';
-export declare type DISPLAY_OPTIONS = 'webgl' | 'image';
-export declare type IAttributeTypes = 'String' | 'Asset' | 'Color' | 'Number' | 'Boolean';
-export declare type AssetType = 'upload' | 'item';
+declare enum SCENE_PHASES {
+    LOADED = 0,
+    PRELOADED = 1,
+    RENDERED = 2
+}
+export declare enum PRIVATE_APIS {
+    SCENE = "scene",
+    PLAYER = "player"
+}
+export declare enum DISPLAY_OPTIONS {
+    WEBGL = "webgl",
+    IMAGE = "image"
+}
+export declare enum ATTRIBUTE_TYPES {
+    STRING = "String",
+    ASSET = "Asset",
+    COLOR = "Color",
+    NUMBER = "Number",
+    BOOLEAN = "Boolean"
+}
+export declare enum ASSET_TYPES {
+    UPLOAD = "upload",
+    ITEM = "item"
+}
+export declare enum PLUG_TYPES {
+    PROXY = "Proxy",
+    TRANSFORM = "Transform"
+}
+export declare enum TRANSFORM_PROPERTY_TYPES {
+    ROTATION = "rotation",
+    TRANSLATION = "translation",
+    SCALE = "scale"
+}
+export declare enum SNAPSHOT_FORMATS {
+    JPG = "jpg",
+    PNG = "png"
+}
+export declare enum SNAPSHOT_OUTPUTS {
+    URL = "url",
+    DOWNLOAD = "download",
+    DATA_URL = "dataUrl",
+    BLOB = "blob",
+    FILE = "file"
+}
 export declare type IMetadata = Record<string, string | number | null>;
-export interface ISceneQuery {
+export interface ISceneQueryShared {
     all?: boolean;
     id?: string;
     name?: string | RegExp;
     type?: string | Array<string>;
     names?: Array<RegExp>;
     properties?: any;
-    property?: string;
     child?: string;
     parent?: boolean;
     includeParent?: boolean;
-    from?: string | ISceneQuery;
+    from?: string | ISceneQueryShared | ISceneQueryNode;
     hasPlug?: string;
     operator?: any;
     operatorIndex?: number;
     evalNode?: boolean;
     evalPlug?: string;
-    plug?: string;
     shallow?: boolean;
     skipModels?: boolean;
     configurator?: boolean;
@@ -33,6 +70,15 @@ export interface ISceneQuery {
     tags?: Array<RegExp>;
     hierarchial?: boolean;
 }
+export interface ISceneQueryNode extends ISceneQueryShared {
+    plug?: PLUG_TYPES.PROXY;
+    property?: 'asset';
+}
+export interface ISceneQueryTransform extends ISceneQueryShared {
+    plug: PLUG_TYPES.TRANSFORM;
+    property: TRANSFORM_PROPERTY_TYPES;
+}
+export declare type ISceneQuery = ISceneQueryNode | ISceneQueryTransform | string;
 export interface ISceneResult {
     id: string;
     name: string;
@@ -54,7 +100,7 @@ export declare type ISetConfiguration = Record<string, IConfigurationAttribute>;
 interface IDisplayAttributeConfig {
     includeHidden?: boolean;
 }
-interface IAttributeBase<T extends IAttributeTypes, V extends IConfigurationAttribute> {
+interface IAttributeBase<T extends ATTRIBUTE_TYPES, V extends IConfigurationAttribute> {
     type: T;
     id: string;
     name: string;
@@ -78,8 +124,8 @@ export interface IHydratedAttributeAssetValue extends IDisplayAttributeAssetValu
     handleSelect: () => Promise<void>;
     selected: boolean;
 }
-export interface IAttributeAssetBase<V> extends IAttributeBase<'Asset', IConfigurationAsset> {
-    assetType: AssetType;
+export interface IAttributeAssetBase<V> extends IAttributeBase<ATTRIBUTE_TYPES.ASSET, IConfigurationAsset> {
+    assetType: ASSET_TYPES;
     blacklist: [];
     defaultValue: IConfigurationAsset;
     hiddenValues?: Array<string>;
@@ -97,7 +143,7 @@ export interface IHydratedAttributeStringValue extends IDisplayAttributeStringVa
     handleSelect: () => Promise<void>;
     selected: boolean;
 }
-export interface IAttributeStringBase<V> extends IAttributeBase<'String', string> {
+export interface IAttributeStringBase<V> extends IAttributeBase<ATTRIBUTE_TYPES.STRING, string> {
     blacklist: [];
     defaultValue: string;
     hiddenValues?: Array<string>;
@@ -107,17 +153,17 @@ export interface IAttributeStringBase<V> extends IAttributeBase<'String', string
 export declare type IDisplayAttributeString = IAttributeStringBase<IDisplayAttributeStringValue>;
 export declare type IHydratedAttributeString = IAttributeStringBase<IHydratedAttributeStringValue>;
 export declare type IAttributeString = IAttributeStringBase<string>;
-export interface IAttributeColor extends IAttributeBase<'Color', IConfigurationColor> {
+export interface IAttributeColor extends IAttributeBase<ATTRIBUTE_TYPES.COLOR, IConfigurationColor> {
     defaultValue: IConfigurationColor;
 }
-export interface IAttributeNumber extends IAttributeBase<'Number', number> {
+export interface IAttributeNumber extends IAttributeBase<ATTRIBUTE_TYPES.NUMBER, number> {
     defaultValue: number;
     lockToStep: boolean;
     max?: number;
     min?: number;
     step: number;
 }
-export interface IAttributeBoolean extends IAttributeBase<'Boolean', boolean> {
+export interface IAttributeBoolean extends IAttributeBase<ATTRIBUTE_TYPES.BOOLEAN, boolean> {
     defaultValue: boolean;
 }
 export declare type IThreekitAttribute = IAttributeAsset | IAttributeColor | IAttributeString | IAttributeNumber | IAttributeBoolean;
@@ -138,7 +184,6 @@ export interface ISnapshotConfig {
         height: number;
     };
 }
-export declare type SNAPSHOT_FORMAT_TYPES = 'jpg' | 'png';
 export interface Node {
     name: string;
     nodeId: string;
@@ -203,13 +248,13 @@ export interface IThreekitConfigurator {
 }
 export interface IThreekitScene {
     PHASES: {
-        LOADED: 'loaded';
-        PRELOADED: 'preloaded';
-        RENDERED: 'rendered';
+        LOADED: SCENE_PHASES.LOADED;
+        PRELOADED: SCENE_PHASES.PRELOADED;
+        RENDERED: SCENE_PHASES.RENDERED;
     };
-    get: (query: ISceneQuery | string) => ISceneResult;
-    find: (query: ISceneQuery | string) => ISceneResult;
-    set: (query: ISceneQuery | string, transform: ICoordinates) => void;
+    get: <T extends ISceneQuery>(query: T) => T extends ISceneQueryTransform ? ICoordinates : ISceneResult;
+    find: (query: ISceneQuery) => string;
+    set: (query: ISceneQueryTransform, transform: ICoordinates) => void;
 }
 export interface IThreekitCamera {
     frameBoundingSphere: () => void;
@@ -231,12 +276,13 @@ export interface IThreekitPlayer {
     on: (phase: SCENE_PHASES | string, callback: (args: any) => void) => void;
     getConfigurator: () => Promise<IThreekitConfigurator>;
     getStageConfigurator: () => Promise<IThreekitConfigurator>;
-    enableApi: (api: PRIVATE_APIS) => any;
+    enableApi: <T extends PRIVATE_APIS>(api: T) => T extends PRIVATE_APIS.PLAYER ? IThreekitPrivatePlayer : any;
     snapshotAsync: (snapshotConfig: ISnapshotConfig) => Promise<string>;
     unload: () => Promise<string>;
 }
 export interface IThreekitPrivateConfigurator extends IThreekitConfigurator {
     getAppliedConfiguration: (attributeName: string) => string;
+    getFullConfiguration: () => IConfiguration;
 }
 export interface IThreekitPrivatePlayer {
     getConfigurator: () => IThreekitPrivateConfigurator;
@@ -244,6 +290,7 @@ export interface IThreekitPrivatePlayer {
         getFullConfiguration: () => IConfiguration;
     };
     calculateLogs: () => Promise<Record<string, any>>;
+    getAssetInstance: (query: ISceneQueryNode | string) => Promise<string>;
 }
 export interface ThreekitInitConfig {
     authToken: string;

package/dist/types.js

@@ -1,2 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.TRANSFORM_PROPERTY_TYPES = exports.PLUG_TYPES = exports.ASSET_TYPES = exports.ATTRIBUTE_TYPES = exports.DISPLAY_OPTIONS = exports.PRIVATE_APIS = void 0;
+var SCENE_PHASES;
+(function (SCENE_PHASES) {
+    SCENE_PHASES[SCENE_PHASES["LOADED"] = 0] = "LOADED";
+    SCENE_PHASES[SCENE_PHASES["PRELOADED"] = 1] = "PRELOADED";
+    SCENE_PHASES[SCENE_PHASES["RENDERED"] = 2] = "RENDERED";
+})(SCENE_PHASES || (SCENE_PHASES = {}));
+var PRIVATE_APIS;
+(function (PRIVATE_APIS) {
+    PRIVATE_APIS["SCENE"] = "scene";
+    PRIVATE_APIS["PLAYER"] = "player";
+})(PRIVATE_APIS = exports.PRIVATE_APIS || (exports.PRIVATE_APIS = {}));
+var DISPLAY_OPTIONS;
+(function (DISPLAY_OPTIONS) {
+    DISPLAY_OPTIONS["WEBGL"] = "webgl";
+    DISPLAY_OPTIONS["IMAGE"] = "image";
+})(DISPLAY_OPTIONS = exports.DISPLAY_OPTIONS || (exports.DISPLAY_OPTIONS = {}));
+var ATTRIBUTE_TYPES;
+(function (ATTRIBUTE_TYPES) {
+    ATTRIBUTE_TYPES["STRING"] = "String";
+    ATTRIBUTE_TYPES["ASSET"] = "Asset";
+    ATTRIBUTE_TYPES["COLOR"] = "Color";
+    ATTRIBUTE_TYPES["NUMBER"] = "Number";
+    ATTRIBUTE_TYPES["BOOLEAN"] = "Boolean";
+})(ATTRIBUTE_TYPES = exports.ATTRIBUTE_TYPES || (exports.ATTRIBUTE_TYPES = {}));
+var ASSET_TYPES;
+(function (ASSET_TYPES) {
+    ASSET_TYPES["UPLOAD"] = "upload";
+    ASSET_TYPES["ITEM"] = "item";
+})(ASSET_TYPES = exports.ASSET_TYPES || (exports.ASSET_TYPES = {}));
+var PLUG_TYPES;
+(function (PLUG_TYPES) {
+    PLUG_TYPES["PROXY"] = "Proxy";
+    PLUG_TYPES["TRANSFORM"] = "Transform";
+})(PLUG_TYPES = exports.PLUG_TYPES || (exports.PLUG_TYPES = {}));
+var TRANSFORM_PROPERTY_TYPES;
+(function (TRANSFORM_PROPERTY_TYPES) {
+    TRANSFORM_PROPERTY_TYPES["ROTATION"] = "rotation";
+    TRANSFORM_PROPERTY_TYPES["TRANSLATION"] = "translation";
+    TRANSFORM_PROPERTY_TYPES["SCALE"] = "scale";
+})(TRANSFORM_PROPERTY_TYPES = exports.TRANSFORM_PROPERTY_TYPES || (exports.TRANSFORM_PROPERTY_TYPES = {}));
+var SNAPSHOT_FORMATS;
+(function (SNAPSHOT_FORMATS) {
+    SNAPSHOT_FORMATS["JPG"] = "jpg";
+    SNAPSHOT_FORMATS["PNG"] = "png";
+})(SNAPSHOT_FORMATS = exports.SNAPSHOT_FORMATS || (exports.SNAPSHOT_FORMATS = {}));
+var SNAPSHOT_OUTPUTS;
+(function (SNAPSHOT_OUTPUTS) {
+    SNAPSHOT_OUTPUTS["URL"] = "url";
+    SNAPSHOT_OUTPUTS["DOWNLOAD"] = "download";
+    SNAPSHOT_OUTPUTS["DATA_URL"] = "dataUrl";
+    SNAPSHOT_OUTPUTS["BLOB"] = "blob";
+    SNAPSHOT_OUTPUTS["FILE"] = "file";
+})(SNAPSHOT_OUTPUTS = exports.SNAPSHOT_OUTPUTS || (exports.SNAPSHOT_OUTPUTS = {}));

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
 import { IThreekitCamera, IConfigurationColor, ICoordinates, IQuaternion, IThreekitDisplayAttribute, ISetConfiguration, IHydratedAttribute } from './types';
-import { ITrebleConfig, IAttributeTypes } from './types';
+import { ITrebleConfig, ATTRIBUTE_TYPES } from './types';
 import { RawAttributeValue } from './hooks/useAttribute';
 import { ITranslationMap } from './api/products';
 interface ICameraPosition {
@@ -53,7 +53,7 @@ export declare const hydrateAttribute: (data: [
     undefined | ITranslationMap,
     undefined | string
 ], optionSelectionHandler: (config: ISetConfiguration) => Promise<void>) => Record<string, IHydratedAttribute>;
-export declare const selectionToConfiguration: (value: RawAttributeValue, attributeType: IAttributeTypes) => string | number | boolean | File | IConfigurationColor | {
+export declare const selectionToConfiguration: (value: RawAttributeValue, attributeType: ATTRIBUTE_TYPES) => string | number | boolean | File | IConfigurationColor | {
     assetId: RawAttributeValue;
 } | undefined;
 export declare const filterFormAttributes: (attributes: Record<string, IThreekitDisplayAttribute>, attributeComponentProps: IAttributesComponentProps, includeReservedAttributes: boolean) => IThreekitDisplayAttribute[];

package/dist/utils.js

@@ -47,6 +47,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadTrebleConfig = exports.runDebugger = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.hydrateAttribute = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.downloadSnapshot = exports.dataURItoFile = exports.dataURItoBlob = exports.setCameraPosition = exports.getCameraPosition = exports.findHitNode = exports.deflateRgb = exports.inflateRgb = exports.rgbToHex = exports.hexToRgb = exports.regularToKebabCase = exports.deepCompare = exports.shallowCompare = exports.getResumableUrl = exports.getParams = exports.objectToQueryStr = exports.isJsonString = exports.isIOS = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
 var constants_1 = require("./constants");
+var types_1 = require("./types");
 var generateClassName = function (baseClass) {
     return function (component, customClassName, title) {
         var result = "".concat(baseClass, "-").concat(component);
@@ -356,12 +357,12 @@ var hydrateAttribute = function (data, optionSelectionHandler) {
 exports.hydrateAttribute = hydrateAttribute;
 var selectionToConfiguration = function (value, attributeType) {
     switch (attributeType) {
-        case constants_1.ATTRIBUTE_TYPES.number:
-        case constants_1.ATTRIBUTE_TYPES.string:
+        case types_1.ATTRIBUTE_TYPES.NUMBER:
+        case types_1.ATTRIBUTE_TYPES.STRING:
             return value;
-        case constants_1.ATTRIBUTE_TYPES.asset:
+        case types_1.ATTRIBUTE_TYPES.ASSET:
             return { assetId: value };
-        case constants_1.ATTRIBUTE_TYPES.color:
+        case types_1.ATTRIBUTE_TYPES.COLOR:
             return (0, exports.deflateRgb)(value);
         default:
             return value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.83",
+  "version": "0.0.85-next-2",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [
@@ -43,6 +43,8 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.6.2",
     "axios": "^0.22.0",
+    "chokidar": "^3.5.3",
+    "live-server": "^1.2.2",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
     "redux-logger": "^3.0.6",