@threekit-tools/treble 0.0.60 → 0.0.63

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 || !configurator.current || !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

@@ -1,14 +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 {
-    activeProductIdx: number;
-    cache: Array<Pick<CachedProduct, 'name' | 'label' | 'thumbnail'>>;
+    cache: Array<HydratedCacheProduct>;
+    products: Array<ISelectableProduct>;
 }
 declare type UseProductCache = [
     CacheData,
-    (config?: string | IReloadConfig) => Promise<void>,
-    (idx: number) => Promise<void>,
-    (idx: number) => Promise<void>
+    (config?: string | IReloadConfig) => Promise<void>
 ];
 declare const useProductCache: () => UseProductCache;
 export default useProductCache;

package/dist/hooks/useProductCache/index.js

@@ -5,31 +5,24 @@ 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.getActiveProductIdx);
-    var data = {
-        cache: cache,
-        activeProductIdx: activeProductIdx,
-    };
-    var handleChangeActiveProduct = function (idx) {
-        if (idx === undefined)
-            return Promise.resolve();
-        if (idx === activeProductIdx)
-            return Promise.resolve();
-        if (!cache || idx >= (cache === null || cache === void 0 ? void 0 : cache.length))
-            return Promise.resolve();
-        return dispatch((0, product_1.changeActiveProductIdx)(idx));
-    };
+    var activeProductIdx = (0, store_1.useThreekitSelector)(product_1.getActiveCacheIdx);
     var handleLoadNewProduct = function (config) {
         return dispatch((0, product_1.loadNewProduct)(config));
     };
-    var handleRemoveProduct = function (idx) {
-        return dispatch((0, product_1.removeProductIdx)(idx));
-    };
-    return [
-        data,
-        handleLoadNewProduct,
-        handleChangeActiveProduct,
-        handleRemoveProduct,
-    ];
+    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/useWishlist/index.d.ts

@@ -1,12 +1,14 @@
-import { WishlistArray } from '../../Treble';
+import { IConfigurationResponse } from '../../http/configurations';
 import { ISaveConfiguration } from '../../api/configurations';
+interface HydratedWishlistItem extends IConfigurationResponse {
+    handleSelect: () => void;
+    handleRemove: () => void;
+    handleShare: () => void;
+}
 declare type UseWishlistHook = [
-    WishlistArray,
+    Array<HydratedWishlistItem>,
     (config?: Omit<ISaveConfiguration, 'configurator'>) => void,
-    (idx: number) => void,
-    (idx: number) => void,
-    (idx: number) => void,
     () => void
-] | [undefined, undefined, undefined, undefined, undefined, undefined];
+] | [undefined, undefined, undefined];
 declare const useWishlist: () => UseWishlistHook;
 export default useWishlist;

package/dist/hooks/useWishlist/index.js

@@ -11,32 +11,26 @@ var message_1 = __importDefault(require("../../components/message"));
 var useWishlist = function () {
     var dispatch = (0, store_1.useThreekitDispatch)();
     var isLoaded = (0, store_1.useThreekitSelector)(treble_1.isThreekitInitialized);
-    var wishlist = (0, store_1.useThreekitSelector)(wishlist_1.getWishlist);
+    var wishlistData = (0, store_1.useThreekitSelector)(wishlist_1.getWishlist);
     if (!isLoaded)
-        return [undefined, undefined, undefined, undefined, undefined, undefined];
+        return [undefined, undefined, undefined];
     var handleAddToWishlist = function (config) { return dispatch((0, wishlist_1.addToWishlist)(config)); };
-    var handleRemoveFromWishlist = function (idx) {
-        dispatch((0, wishlist_1.removeFromWishlist)(idx));
-        message_1.default.info('Item removed from wishlist');
-    };
-    var handleResumeItem = function (idx) {
-        dispatch((0, wishlist_1.resumeFromWishlist)(idx));
-    };
-    var handleShareItem = function (idx) {
-        var url = (0, utils_1.getResumableUrl)(wishlist[idx].shortId);
-        (0, utils_1.copyToClipboard)(url);
-        message_1.default.info('Link copied!');
-    };
     var handleClearWishlist = function () {
         dispatch(wishlist_1.clearWishlist);
     };
-    return [
-        wishlist,
-        handleAddToWishlist,
-        handleRemoveFromWishlist,
-        handleResumeItem,
-        handleShareItem,
-        handleClearWishlist,
-    ];
+    var wishlist = wishlistData.map(function (el, i) {
+        return Object.assign({}, el, {
+            handleSelect: function () { return dispatch((0, wishlist_1.resumeFromWishlist)(i)); },
+            handleRemove: function () {
+                dispatch((0, wishlist_1.removeFromWishlist)(i));
+                message_1.default.info('Item removed from wishlist');
+            },
+            handleShare: function () {
+                (0, utils_1.copyToClipboard)((0, utils_1.getResumableUrl)(el.shortId));
+                message_1.default.info('Link copied!');
+            },
+        });
+    });
+    return [wishlist, handleAddToWishlist, handleClearWishlist];
 };
 exports.default = useWishlist;

package/dist/index.d.ts

@@ -10,6 +10,8 @@ import useSnapshot from './hooks/useSnapshot';
 import useWishlist from './hooks/useWishlist';
 import useShare from './hooks/useShare';
 import usePlayerPortal from './hooks/usePlayerPortal';
+import useProductCache from './hooks/useProductCache';
+import useNestedConfigurator from './hooks/useNestedConfigurator';
 import ThreekitProvider from './components/ThreekitProvider';
 import Player from './components/Player';
 import Button from './components/Button';
@@ -20,6 +22,7 @@ import Swatch from './components/Swatch';
 import Tiles from './components/Tiles';
 import TilesGroup from './components/TilesGroup';
 import Upload from './components/Upload';
+import Switch from './components/Switch';
 import ProductName from './components/ProductName';
 import ProductDescription from './components/ProductDescription';
 import AttributeTitle from './components/AttributeTitle';
@@ -41,4 +44,4 @@ import icons from './icons';
 export * from './icons';
 import TrebleApp from './components/TrebleApp';
 import ProductLayout from './components/ProductLayout';
-export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, ProductLayout, };
+export { useAttribute, useConfigurator, 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, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, ProductLayout, };

package/dist/index.js

@@ -13,7 +13,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.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = 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.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.useConfigurator = exports.useAttribute = void 0;
 //  Hooks
 var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
 exports.useAttribute = useAttribute_1.default;
@@ -40,7 +40,10 @@ exports.useShare = useShare_1.default;
 var usePlayerPortal_1 = __importDefault(require("./hooks/usePlayerPortal"));
 exports.usePlayerPortal = usePlayerPortal_1.default;
 // import useSingleAnimation from './hooks/useSingleAnimation';
-// import useProductCache from './hooks/useProductCache';
+var useProductCache_1 = __importDefault(require("./hooks/useProductCache"));
+exports.useProductCache = useProductCache_1.default;
+var useNestedConfigurator_1 = __importDefault(require("./hooks/useNestedConfigurator"));
+exports.useNestedConfigurator = useNestedConfigurator_1.default;
 //  Components
 var ThreekitProvider_1 = __importDefault(require("./components/ThreekitProvider"));
 exports.ThreekitProvider = ThreekitProvider_1.default;
@@ -63,6 +66,8 @@ var TilesGroup_1 = __importDefault(require("./components/TilesGroup"));
 exports.TilesGroup = TilesGroup_1.default;
 var Upload_1 = __importDefault(require("./components/Upload"));
 exports.Upload = Upload_1.default;
+var Switch_1 = __importDefault(require("./components/Switch"));
+exports.Switch = Switch_1.default;
 //  Display
 var ProductName_1 = __importDefault(require("./components/ProductName"));
 exports.ProductName = ProductName_1.default;

package/dist/store/attributes.d.ts

@@ -1,5 +1,5 @@
 import { RootState, ThreekitDispatch } from './index';
-import { ISetConfiguration, IThreekitDisplayAttribute, IHydratedAttribute } from '../threekit';
+import { ISetConfiguration, IThreekitDisplayAttribute } from '../threekit';
 import { ITranslationMap } from '../api/products';
 /*****************************************************
  * Types and Interfaces
@@ -17,14 +17,14 @@ declare const reducer: import("redux").Reducer<AttributesState, import("redux").
  * Standard Selectors
  ****************************************************/
 export declare const getAttributes: (state: RootState) => AttributesState;
-export declare const getHydratedAttributes: ((state: {
+export declare const getHydrationData: ((state: {
     treble: import("./treble").TrebleState;
     product: import("./product").ProductState;
     attributes: AttributesState;
     translations: import("./translations").TranslationsState;
     wishlist: import("../Treble").WishlistArray;
     price: import("./price").PriceState;
-}) => Record<string, IHydratedAttribute>) & import("reselect").OutputSelectorFields<(args_0: AttributesState, args_1: ITranslationMap | undefined, args_2: string | undefined) => Record<string, IHydratedAttribute> & {
+}) => [Record<string, IThreekitDisplayAttribute>, ITranslationMap | undefined, string | undefined]) & import("reselect").OutputSelectorFields<(args_0: AttributesState, args_1: string | undefined) => [Record<string, IThreekitDisplayAttribute>, ITranslationMap | undefined, string | undefined] & {
     clearCache: () => void;
 }> & {
     clearCache: () => void;

package/dist/store/attributes.js

@@ -36,7 +36,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setConfiguration = exports.getHydratedAttributes = exports.getAttributes = exports.setAttributes = void 0;
+exports.setConfiguration = exports.getHydrationData = exports.getAttributes = exports.setAttributes = void 0;
 var toolkit_1 = require("@reduxjs/toolkit");
 var treble_1 = require("./treble");
 var translations_1 = require("./translations");
@@ -79,55 +79,8 @@ var reducer = (0, toolkit_1.createSlice)({
  ****************************************************/
 var getAttributes = function (state) { return state.attributes; };
 exports.getAttributes = getAttributes;
-exports.getHydratedAttributes = (0, toolkit_1.createSelector)(exports.getAttributes, translations_1.getTranslations, translations_1.getLanguage, function (attributes, translations, language) {
-    var hasTranslation = !!language && !!translations;
-    return Object.values(attributes).reduce(function (output, attribute) {
-        var _a;
-        var _b;
-        return Object.assign(output, (_a = {},
-            _a[attribute.name] = Object.assign({}, attribute, {
-                label: hasTranslation
-                    ? ((_b = translations === null || translations === void 0 ? void 0 : translations[attribute.name]) === null || _b === void 0 ? void 0 : _b[language]) || attribute.name
-                    : attribute.name,
-            }, attribute.type === 'String'
-                ? {
-                    values: attribute.values.map(function (el) {
-                        var _a;
-                        return Object.assign({}, el, {
-                            label: hasTranslation
-                                ? ((_a = translations === null || translations === void 0 ? void 0 : translations[el.label]) === null || _a === void 0 ? void 0 : _a[language]) || el.label
-                                : el.label,
-                            handleSelect: function () {
-                                var _a;
-                                return window.threekit.configurator.setConfiguration((_a = {},
-                                    _a[attribute.name] = el.value,
-                                    _a));
-                            },
-                            selected: attribute.value === el.value,
-                        });
-                    }),
-                }
-                : attribute.type === 'Asset'
-                    ? {
-                        values: attribute.values.map(function (el) {
-                            var _a;
-                            return Object.assign({}, el, {
-                                label: hasTranslation
-                                    ? ((_a = translations === null || translations === void 0 ? void 0 : translations[el.name]) === null || _a === void 0 ? void 0 : _a[language]) || el.name
-                                    : el.name,
-                                handleSelect: function () {
-                                    var _a;
-                                    return window.threekit.configurator.setConfiguration((_a = {},
-                                        _a[attribute.name] = el.assetId,
-                                        _a));
-                                },
-                                selected: attribute.value.assetId === el.assetId,
-                            });
-                        }),
-                    }
-                    : undefined),
-            _a));
-    }, {});
+exports.getHydrationData = (0, toolkit_1.createSelector)(exports.getAttributes, translations_1.getLanguage, function (attributes, language) {
+    return [attributes, translations_1.TRANSLATIONS, language];
 });
 //  Configurator
 var setConfiguration = function (config) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {

package/dist/store/product.d.ts

@@ -1,58 +1,67 @@
 import { RootState, ThreekitDispatch } from './index';
-import { IMetadata, IConfiguration, IProducts } from '../threekit';
+import { IMetadata, IConfiguration, IProduct } from '../threekit';
 import { IConnectionConfig } from '../connection';
 import { IReloadConfig } from './treble';
 /*****************************************************
  * Types and Interfaces
  ****************************************************/
 export interface CachedProduct {
+    id: undefined | string;
     name?: string;
     label?: string;
     thumbnail?: string;
     connection: IConnectionConfig;
     configuration: IConfiguration;
 }
-export interface CachedProductState extends Pick<CachedProduct, 'name' | 'label' | 'thumbnail'> {
+export interface CachedProductState extends Pick<CachedProduct, 'id' | 'name' | 'label' | 'thumbnail'> {
     data: string;
 }
+interface IEnvConfig extends Record<string, Partial<IProduct>> {
+}
+export interface IHydratedProducts extends Record<string, IEnvConfig> {
+}
 export interface ProductState {
+    id: undefined | string;
     name: undefined | string;
     metadata: undefined | IMetadata;
-    cachedProducts: Array<CachedProductState>;
-    activeProductIdx: number;
+    cache: Array<CachedProductState>;
+    activeCacheIdx: number;
 }
 /*****************************************************
  * Constants
  ****************************************************/
-export declare let PRODUCTS: IProducts;
+export declare let PRODUCTS: IHydratedProducts;
 /*****************************************************
  * Actions
  ****************************************************/
+export declare const setProductId: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, string>;
 export declare const setName: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
 export declare const setMetadata: import("@reduxjs/toolkit").ActionCreatorWithPayload<IMetadata, string>;
-export declare const addProductToCache: import("@reduxjs/toolkit").ActionCreatorWithPayload<CachedProductState, string>;
+export declare const appendToCache: import("@reduxjs/toolkit").ActionCreatorWithPayload<CachedProductState, string>;
 export declare const updateActiveProductCache: import("@reduxjs/toolkit").ActionCreatorWithPayload<CachedProductState, string>;
-export declare const removeProductFromCache: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
-export declare const setActiveProductIdx: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
-export declare const incrementActiveProductIdx: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<undefined, string>;
-export declare const decrementActiveProductIdx: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<undefined, string>;
+export declare const removeFromCache: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
+export declare const setActiveCacheIdx: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
+export declare const incrementActiveCacheIdx: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<undefined, string>;
+export declare const decrementActiveCacheIdx: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<undefined, string>;
 declare const reducer: import("redux").Reducer<ProductState, import("redux").AnyAction>;
 /*****************************************************
  * Standard Selectors
  ****************************************************/
+export declare const getProductId: (state: RootState) => undefined | string;
 export declare const getName: (state: RootState) => undefined | string;
 export declare const getMetadata: (state: RootState) => undefined | IMetadata;
-export declare const getActiveProductIdx: (state: RootState) => number;
+export declare const getActiveCacheIdx: (state: RootState) => number;
 export declare const getProductCache: (state: RootState) => Array<Pick<CachedProduct, 'name' | 'label' | 'thumbnail'>>;
 /*****************************************************
  * Complex Actions
  ****************************************************/
-export declare const initProduct: (prods?: IProducts | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => void;
+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) => {
     payload: CachedProductState;
     type: string;
 };
+export declare const loadProduct: (id: string) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
 export declare const loadNewProduct: (config: undefined | string | IReloadConfig) => (dispatch: ThreekitDispatch) => Promise<void>;
-export declare const changeActiveProductIdx: (idx: number) => (dispatch: ThreekitDispatch, getState: () => RootState) => 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 default reducer;