@threekit-tools/treble 0.0.57 → 0.0.60-next.1

package/dist/components/TilesGroup/index.js

@@ -14,16 +14,15 @@ var utils_1 = require("../../utils");
 var constants_1 = require("../../constants");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var TilesGroup = function (props) {
-    var _a = Object.assign({ stretch: true }, props), stretch = _a.stretch, title = _a.title, description = _a.description, options = _a.options, value = _a.value, onClick = _a.onClick, customClassName = _a.className;
+    var _a = Object.assign({ stretch: true }, props), stretch = _a.stretch, title = _a.title, description = _a.description, options = _a.options, customClassName = _a.className;
     var cls = (0, utils_1.generateInputClassName)('tiles-group', customClassName, title);
     return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
         react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
         react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
         react_1.default.createElement(tilesGroup_styles_1.TilesGroupWrapper, { stretch: stretch }, options === null || options === void 0 ? void 0 : options.map(function (el, i) {
-            var name = el.name, optionValue = el.value;
-            var selected = value === optionValue;
+            var name = el.name, optionValue = el.value, selected = el.selected, handleSelect = el.handleSelect;
             var clsOpt = "".concat(cls, "-option option-").concat(i, " ").concat(optionValue).concat(selected ? ' selected' : '');
-            return (react_1.default.createElement(tilesGroup_styles_1.TileWrapper, { key: i, onClick: function () { return onClick && onClick(optionValue); }, selected: selected, className: clsOpt },
+            return (react_1.default.createElement(tilesGroup_styles_1.TileWrapper, { key: i, onClick: handleSelect, selected: selected, className: clsOpt },
                 react_1.default.createElement("div", null, name)));
         }))));
 };

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

@@ -3,5 +3,6 @@ import { ThreekitProviderProps } from '../ThreekitProvider';
 interface TrebleAppProps extends Omit<ThreekitProviderProps, 'children'> {
     productId?: string;
 }
+export declare const Products: () => JSX.Element | null;
 export default function TrebleApp(props: TrebleAppProps): JSX.Element | null;
 export {};

package/dist/components/TrebleApp/index.js

@@ -22,13 +22,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Products = void 0;
 var react_1 = __importStar(require("react"));
+var store_1 = require("../../store");
 var ThreekitProvider_1 = __importDefault(require("../ThreekitProvider"));
 var utils_1 = require("../../utils");
 var constants_1 = require("../../constants");
+var product_1 = require("../../store/product");
 var productsMap = {};
 var productComponents = [];
 var productToComponentMap = {};
+var Products = function () {
+    var productId = (0, store_1.useThreekitSelector)(product_1.getProductId);
+    if (!productId)
+        return null;
+    var Product = productComponents[productToComponentMap[productId]];
+    if (!Product)
+        return null;
+    return react_1.default.createElement(Product, null);
+};
+exports.Products = Products;
 function TrebleApp(props) {
     var _a;
     var project = props.project, productId = props.productId, playerConfig = props.playerConfig, threekitEnv = props.threekitEnv, locale = props.locale, theme = props.theme, eventHandlers = props.eventHandlers;
@@ -69,13 +82,10 @@ function TrebleApp(props) {
     }
     if (!id)
         return null;
-    var Product = productComponents[productToComponentMap[id]];
-    if (!Product)
-        return null;
     var preppedProject = Object.assign({}, project, {
-        products: productsMap[id],
+        products: productsMap,
     });
-    return (react_1.default.createElement(ThreekitProvider_1.default, { project: preppedProject, locale: locale, playerConfig: playerConfig, theme: theme, threekitEnv: threekitEnv, eventHandlers: eventHandlers },
-        react_1.default.createElement(Product, null)));
+    return (react_1.default.createElement(ThreekitProvider_1.default, { productId: id, project: preppedProject, locale: locale, playerConfig: playerConfig, theme: theme, threekitEnv: threekitEnv, eventHandlers: eventHandlers },
+        react_1.default.createElement(exports.Products, null)));
 }
 exports.default = TrebleApp;

package/dist/components/Wishlist/index.js

@@ -81,16 +81,12 @@ var WishlistButton = function (props) {
 exports.WishlistButton = WishlistButton;
 var Wishlist = function (props) {
     var _a = (0, react_1.useState)(false), showWishlist = _a[0], setShowWishlist = _a[1];
-    var _b = (0, useWishlist_1.default)(), wishlist = _b[0], addToWishlist = _b[1], removeFromWishlist = _b[2], resumeWishlistItem = _b[3], shareWishlistItem = _b[4];
+    var _b = (0, useWishlist_1.default)(), wishlist = _b[0], addToWishlist = _b[1];
     var className = props.className, showLabel = props.showLabel;
     var shape = props.shape || 'round';
     var type = props.type || 'threekit';
     var cls = (0, utils_1.generateWidgetClassName)('wishlist', className);
-    if (!wishlist ||
-        !addToWishlist ||
-        !resumeWishlistItem ||
-        !removeFromWishlist ||
-        !shareWishlistItem)
+    if (!wishlist || !addToWishlist)
         return null;
     var handleAddToWishlist = function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -103,16 +99,15 @@ var Wishlist = function (props) {
             }
         });
     }); };
-    var handleClickResume = function (idx) {
-        resumeWishlistItem(idx);
-        setShowWishlist(false);
-    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(shared_styles_1.TwinButtonWrapper, null,
             react_1.default.createElement(exports.AddWishlistButton, { title: showLabel ? 'Add to Wishlist' : undefined, className: cls, onClick: handleAddToWishlist, type: type, shape: shape }),
             react_1.default.createElement(exports.WishlistButton, { title: showLabel ? 'Open Wishlist' : undefined, className: cls, onClick: function () { return setShowWishlist(true); }, type: type, shape: shape })),
         react_1.default.createElement(Drawer_1.default, { title: "Wishlist", show: showWishlist, handleClose: function () { return setShowWishlist(false); } },
-            react_1.default.createElement(wishlist_styles_1.WishlistWrapper, null, wishlist.map(function (el, i) { return (react_1.default.createElement(WishlistItem_1.default, { key: i, thumbnail: el.thumbnail || undefined, metadata: el.metadata || undefined, onDelete: function () { return removeFromWishlist(i); }, onResume: function () { return handleClickResume(i); }, onShare: function () { return shareWishlistItem(i); } })); })))));
+            react_1.default.createElement(wishlist_styles_1.WishlistWrapper, null, wishlist.map(function (el, i) { return (react_1.default.createElement(WishlistItem_1.default, { key: i, thumbnail: el.thumbnail || undefined, metadata: el.metadata || undefined, onDelete: el.handleRemove, onResume: function () {
+                    el.handleSelect();
+                    setShowWishlist(false);
+                }, onShare: el.handleShare })); })))));
 };
 exports.Wishlist = Wishlist;
 exports.Wishlist.propTypes = {

package/dist/components/containers/formInputContainer.d.ts

@@ -1,9 +1,11 @@
 import { FunctionComponent } from 'react';
 import { RawAttributeValue } from '../../hooks/useAttribute';
-import { IDisplayAttributeAssetValue, IThreekitDisplayAttribute } from '../../threekit';
+import { IHydratedAttribute, IHydratedAttributeAssetValue } from '../../threekit';
 export interface IOptionShared {
     name: string;
     value: string;
+    handleSelect: () => Promise<void>;
+    selected: boolean;
 }
 export interface IOption extends IOptionShared {
     description?: string;
@@ -34,17 +36,19 @@ export interface IFormComponentProps<T extends IOptionShared | undefined> extend
 export interface IFormComponent<P> extends FunctionComponent<P> {
     compatibleAttributes: Set<string>;
 }
-interface IPrepAttributeConfig {
+interface IhydrateAttributeConfig {
     metadataKeys: MetadataKeys;
     sort?: string;
 }
-export declare const prepAttributeForComponent: (attribute: IThreekitDisplayAttribute, config: IPrepAttributeConfig) => {
+export declare const hydrateAttributeForComponent: (attribute: IHydratedAttribute, config: IhydrateAttributeConfig) => {
     selected: string | number | import("../../threekit").IConfigurationAsset | import("../../threekit").IConfigurationColor;
-    options: IDisplayAttributeAssetValue[] | {
+    options: {
         name: string;
+        handleSelect: () => Promise<void>;
+        selected: boolean;
         label: string;
         value: string;
-    }[] | undefined;
+    }[] | IHydratedAttributeAssetValue[] | undefined;
 };
 declare function formComponentContainer<P extends IFormContainerProps>(FormComponent: IFormComponent<Omit<P, 'options'>>): (props: P) => JSX.Element | null;
 export default formComponentContainer;

package/dist/components/containers/formInputContainer.js

@@ -14,13 +14,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepAttributeForComponent = void 0;
+exports.hydrateAttributeForComponent = void 0;
 var react_1 = __importDefault(require("react"));
 var useAttribute_1 = __importDefault(require("../../hooks/useAttribute"));
 var usePlayerLoadingStatus_1 = __importDefault(require("../../hooks/usePlayerLoadingStatus"));
 var utils_1 = require("../../utils");
 var constants_1 = require("../../constants");
-var prepAttributeForComponent = function (attribute, config) {
+var hydrateAttributeForComponent = function (attribute, config) {
     var _a;
     var _b = config.metadataKeys, metadataKeyThumbnail = _b.metadataKeyThumbnail, metadataKeyPrice = _b.metadataKeyPrice, metadataKeyDescription = _b.metadataKeyDescription;
     var sort = config.sort;
@@ -29,15 +29,13 @@ var prepAttributeForComponent = function (attribute, config) {
     var descriptionKey = metadataKeyDescription || constants_1.METADATA_RESERVED.description;
     var options;
     var selected = attribute.value;
-    if (attribute.type === constants_1.ATTRIBUTE_TYPES.string) {
-        var stringAttribute = attribute;
-        options = stringAttribute.values.map(function (el) { return (__assign(__assign({}, el), { name: el.label })); });
+    if (attribute.type === 'String') {
+        options = attribute.values.map(function (el) { return (__assign(__assign({}, el), { name: el.label })); });
     }
-    else if (attribute.type === constants_1.ATTRIBUTE_TYPES.asset) {
-        var assetAttribute = attribute;
-        selected = (_a = assetAttribute.value) === null || _a === void 0 ? void 0 : _a.assetId;
-        options = assetAttribute.values
-            ? assetAttribute.values
+    else if (attribute.type === 'Asset') {
+        selected = (_a = attribute.value) === null || _a === void 0 ? void 0 : _a.assetId;
+        options = attribute.values
+            ? attribute.values
                 .map(function (el) { return prepCatalogItem(el); })
                 .sort(function (a, b) {
                 if (!sort || !Object.keys(constants_1.SORT_OPTIONS).includes(sort))
@@ -50,9 +48,8 @@ var prepAttributeForComponent = function (attribute, config) {
             })
             : [];
     }
-    else if (attribute.type === constants_1.ATTRIBUTE_TYPES.color) {
-        var colorAttribute = attribute;
-        selected = (0, utils_1.inflateRgb)(colorAttribute.value);
+    else if (attribute.type === 'Color') {
+        selected = (0, utils_1.inflateRgb)(attribute.value);
     }
     function prepCatalogItem(item) {
         var _a, _b;
@@ -79,10 +76,8 @@ var prepAttributeForComponent = function (attribute, config) {
     }
     return { selected: selected, options: options };
 };
-exports.prepAttributeForComponent = prepAttributeForComponent;
-function formComponentContainer(FormComponent
-// FormComponent: IFormComponent<P>
-) {
+exports.hydrateAttributeForComponent = hydrateAttributeForComponent;
+function formComponentContainer(FormComponent) {
     return function (props) {
         var attribute = props.attribute, metadataKeyThumbnail = props.metadataKeyThumbnail, metadataKeyDescription = props.metadataKeyDescription, metadataKeyPrice = props.metadataKeyPrice, hideAttributeTitle = props.hideAttributeTitle, sort = props.sort;
         var isLoading = (0, usePlayerLoadingStatus_1.default)();
@@ -95,7 +90,7 @@ function formComponentContainer(FormComponent
             console.log('Incompatible attribute type for this component');
             return null;
         }
-        var _b = (0, exports.prepAttributeForComponent)(attributeData, {
+        var _b = (0, exports.hydrateAttributeForComponent)(attributeData, {
             metadataKeys: {
                 metadataKeyThumbnail: metadataKeyThumbnail,
                 metadataKeyDescription: metadataKeyDescription,
@@ -104,7 +99,7 @@ function formComponentContainer(FormComponent
             sort: sort,
         }), selected = _b.selected, options = _b.options;
         var handleSetAttribute = function (value) {
-            return setAttribute && setAttribute(value);
+            return setAttribute === null || setAttribute === void 0 ? void 0 : setAttribute(value);
         };
         var preppedProps = __assign({}, props);
         if (!hideAttributeTitle && !preppedProps.title)

package/dist/connection.d.ts

@@ -1,14 +1,16 @@
-interface IConnectionConfig {
+export interface IConnectionConfig {
     authToken?: string;
     orgId?: string;
     assetId?: string;
     threekitDomain?: string;
+    serverUrl?: string;
 }
 export declare class ThreekitConnection {
     _authToken: string;
     _orgId: string;
     _assetId: string;
     _threekitDomain: string;
+    _serverUrl: string;
     constructor();
     connect(config: IConnectionConfig): Promise<void>;
     getConnection(): {
@@ -16,6 +18,7 @@ export declare class ThreekitConnection {
         orgId: string;
         assetId: string;
         threekitDomain: string;
+        serverUrl: string;
     };
 }
 declare const _default: ThreekitConnection;

package/dist/connection.js

@@ -42,6 +42,7 @@ var ThreekitConnection = /** @class */ (function () {
         this._authToken = '';
         this._orgId = '';
         this._assetId = '';
+        this._serverUrl = '';
         this._threekitDomain = 'https://admin-fts.threekit.com';
     }
     ThreekitConnection.prototype.connect = function (config) {
@@ -53,6 +54,8 @@ var ThreekitConnection = /** @class */ (function () {
                     this._orgId = config.orgId;
                 if (config.assetId)
                     this._assetId = config.assetId;
+                if (config.serverUrl)
+                    this._serverUrl = config.serverUrl;
                 if (config.threekitDomain)
                     this._threekitDomain = "https://".concat(config.threekitDomain);
                 return [2 /*return*/];
@@ -68,6 +71,7 @@ var ThreekitConnection = /** @class */ (function () {
             orgId: this._orgId,
             assetId: this._assetId,
             threekitDomain: this._threekitDomain,
+            serverUrl: this._serverUrl,
         };
     };
     return ThreekitConnection;

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

@@ -1,8 +1,8 @@
-import { IThreekitDisplayAttribute, IConfigurationColor } from '../../threekit';
+import { IHydratedAttribute, IConfigurationColor } from '../../threekit';
 export declare type RawAttributeValue = string | number | boolean | IConfigurationColor | File | undefined;
 declare type UseAttributeError = [undefined, undefined];
 declare type UseAttributeSuccess = [
-    IThreekitDisplayAttribute,
+    IHydratedAttribute,
     (val: RawAttributeValue) => Promise<void>
 ];
 declare type UseAttributeHook = UseAttributeError | UseAttributeSuccess;

package/dist/hooks/useAttribute/index.js

@@ -42,26 +42,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var store_1 = require("../../store");
 var attributes_1 = require("../../store/attributes");
 var utils_1 = require("../../utils");
-var constants_1 = require("../../constants");
 var api_1 = __importDefault(require("../../api"));
+var utils_2 = require("../../utils");
 var useAttribute = function (attributeName) {
+    var _a;
     if (!attributeName)
         return [undefined, undefined];
     var dispatch = (0, store_1.useThreekitDispatch)();
-    var attributes = (0, store_1.useThreekitSelector)(attributes_1.getAttributes);
+    var _b = (0, store_1.useThreekitSelector)(attributes_1.getHydrationData), attributes = _b[0], translations = _b[1], language = _b[2];
     if (!attributeName || !attributes)
         return [undefined, undefined];
     var attribute = attributes[attributeName];
     if (!attribute)
         return [undefined, undefined];
+    var preppedAttributes = (0, utils_2.hydrateAttribute)([(_a = {}, _a[attributeName] = attribute, _a), translations, language], function (config) { return dispatch((0, attributes_1.setConfiguration)(config)); });
     var handleChange = function (value) { return __awaiter(void 0, void 0, void 0, function () {
         var preppedValue, assetId;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    if (!(attribute.type === 'Asset' &&
-                        attribute.assetType === constants_1.ASSET_TYPES.upload)) return [3 /*break*/, 4];
+                    if (!(attribute.type === 'Asset' && attribute.assetType === 'upload')) return [3 /*break*/, 4];
                     if (!!value) return [3 /*break*/, 1];
                     preppedValue = (0, utils_1.selectionToConfiguration)('', attribute.type);
                     return [3 /*break*/, 3];
@@ -83,6 +84,6 @@ var useAttribute = function (attributeName) {
             }
         });
     }); };
-    return [attribute, handleChange];
+    return [preppedAttributes[attributeName], handleChange];
 };
 exports.default = useAttribute;

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

@@ -1,7 +1,7 @@
-import { ISetConfiguration, IThreekitDisplayAttribute } from '../../threekit';
+import { ISetConfiguration, IHydratedAttribute } from '../../threekit';
 declare type UseConfiguratorError = [undefined, undefined];
 declare type UseConfiguratorSuccess = [
-    Record<string, IThreekitDisplayAttribute>,
+    Record<string, IHydratedAttribute>,
     (configuration: ISetConfiguration) => void
 ];
 declare type UseConfiguratorHook = UseConfiguratorError | UseConfiguratorSuccess;

package/dist/hooks/useConfigurator/index.js

@@ -2,14 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var attributes_1 = require("../../store/attributes");
 var store_1 = require("../../store");
+var utils_1 = require("../../utils");
 var useConfigurator = function () {
     var dispatch = (0, store_1.useThreekitDispatch)();
-    var attributes = (0, store_1.useThreekitSelector)(attributes_1.getAttributes);
-    if (!attributes)
+    var hydrationData = (0, store_1.useThreekitSelector)(attributes_1.getHydrationData);
+    if (!hydrationData)
         return [undefined, undefined];
+    var preppedAttributes = (0, utils_1.hydrateAttribute)(hydrationData, function (config) {
+        return dispatch((0, attributes_1.setConfiguration)(config));
+    });
     var handleChange = function (configuration) {
         return dispatch((0, attributes_1.setConfiguration)(configuration));
     };
-    return [attributes, handleChange];
+    return [preppedAttributes, handleChange];
 };
 exports.default = useConfigurator;

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

@@ -0,0 +1,8 @@
+import { IHydratedAttribute, ISetConfiguration } from '../../threekit';
+declare type UseNestedConfiguratorError = [undefined, undefined];
+declare type UseNestedConfiguratorSuccess = [
+    Record<string, IHydratedAttribute>,
+    (val: ISetConfiguration) => Promise<void>
+];
+declare const useNestedConfigurator: (address: string | Array<string>) => UseNestedConfiguratorError | UseNestedConfiguratorSuccess;
+export default useNestedConfigurator;

package/dist/hooks/useNestedConfigurator/index.js

@@ -0,0 +1,93 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var store_1 = require("../../store");
+var treble_1 = require("../../store/treble");
+var utils_1 = require("../../utils");
+var attributes_1 = require("../../store/attributes");
+var useNestedConfigurator = function (address) {
+    var dispatch = (0, store_1.useThreekitDispatch)();
+    var hasInitialized = (0, store_1.useThreekitSelector)(treble_1.isThreekitInitialized);
+    var playerLoading = (0, store_1.useThreekitSelector)(treble_1.isPlayerLoading);
+    var _a = (0, store_1.useThreekitSelector)(attributes_1.getHydrationData), _ = _a[0], translations = _a[1], language = _a[2];
+    var _b = (0, react_1.useState)(), attributes = _b[0], setAttributes = _b[1];
+    var configurator = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        (function () {
+            var _a;
+            if (!hasInitialized)
+                return;
+            if (playerLoading)
+                return;
+            configurator.current =
+                window.threekit.treble.getNestedConfigurator(address);
+            if (!configurator.current)
+                return;
+            var updatedAttrs = (_a = configurator.current) === null || _a === void 0 ? void 0 : _a.getDisplayAttributes();
+            setAttributes(updatedAttrs);
+        })();
+    }, [hasInitialized, address, playerLoading]);
+    if (!hasInitialized || !attributes)
+        return [undefined, undefined];
+    var handleSelect = function (config) { return __awaiter(void 0, void 0, void 0, function () {
+        var updatedAttrs;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    dispatch((0, treble_1.setPlayerLoading)(true));
+                    return [4 /*yield*/, ((_a = configurator.current) === null || _a === void 0 ? void 0 : _a.setConfiguration(config))];
+                case 1:
+                    _c.sent();
+                    dispatch((0, treble_1.setPlayerLoading)(false));
+                    updatedAttrs = (_b = configurator.current) === null || _b === void 0 ? void 0 : _b.getDisplayAttributes();
+                    if (updatedAttrs)
+                        setAttributes(updatedAttrs);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var attributeObj = attributes.reduce(function (output, attr) {
+        var _a;
+        return Object.assign(output, (_a = {}, _a[attr.name] = attr, _a));
+    }, {});
+    var preppedAttributes = (0, utils_1.hydrateAttribute)([attributeObj, translations, language], handleSelect);
+    return [preppedAttributes, handleSelect];
+};
+exports.default = useNestedConfigurator;

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

@@ -0,0 +1,22 @@
+import { CachedProduct } from '../../store/product';
+import { IReloadConfig } from '../../store/treble';
+interface HydratedCacheProduct extends Pick<CachedProduct, 'name' | 'label' | 'thumbnail'> {
+    selected: boolean;
+    handleSelect: () => Promise<void>;
+    handleRemove: () => Promise<void>;
+}
+interface ISelectableProduct {
+    id: string;
+    label: string;
+    handleSelect: () => void;
+}
+interface CacheData {
+    cache: Array<HydratedCacheProduct>;
+    products: Array<ISelectableProduct>;
+}
+declare type UseProductCache = [
+    CacheData,
+    (config?: string | IReloadConfig) => Promise<void>
+];
+declare const useProductCache: () => UseProductCache;
+export default useProductCache;

package/dist/hooks/useProductCache/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var product_1 = require("../../store/product");
+var store_1 = require("../../store");
+var useProductCache = function () {
+    var dispatch = (0, store_1.useThreekitDispatch)();
+    var cache = (0, store_1.useThreekitSelector)(product_1.getProductCache);
+    var activeProductIdx = (0, store_1.useThreekitSelector)(product_1.getActiveCacheIdx);
+    var handleLoadNewProduct = function (config) {
+        return dispatch((0, product_1.loadNewProduct)(config));
+    };
+    var hydratedCache = cache.map(function (el, i) {
+        return Object.assign({}, el, {
+            selected: activeProductIdx === i,
+            handleRemove: function () { return dispatch((0, product_1.removeProductIdx)(i)); },
+            handleSelect: activeProductIdx === i
+                ? function () { return Promise.resolve(); }
+                : function () { return dispatch((0, product_1.changeActiveCacheIdx)(i)); },
+        });
+    });
+    var products = Object.keys(product_1.PRODUCTS).map(function (prod) { return ({
+        id: prod,
+        label: prod,
+        handleSelect: function () { return dispatch((0, product_1.loadProduct)(prod)); },
+    }); });
+    return [{ cache: hydratedCache, products: products }, handleLoadNewProduct];
+};
+exports.default = useProductCache;

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

@@ -0,0 +1,17 @@
+import { ICoordinates } from '../../threekit';
+interface NodeConfig {
+    nodeId: string;
+    paddingStart: number;
+    paddingEnd: number;
+    delay: number;
+    duration: number;
+    translation: ICoordinates;
+    rotation: ICoordinates;
+    scale: ICoordinates;
+}
+interface AnimationConfig {
+    duration: number;
+    nodes: Array<NodeConfig>;
+}
+declare const useAnimation: (animationConfig: AnimationConfig) => undefined[] | (boolean | (() => Promise<void>))[];
+export default useAnimation;