@plattar/plattar-ar-adapter 1.154.2 → 1.155.1

package/build/es2015/plattar-ar-adapter.js

@@ -16,6 +16,14 @@ function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _c
 function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }
 function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
 function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -23,11 +31,6 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 (function (f) {
   if ((typeof exports === "undefined" ? "undefined" : _typeof(exports)) === "object" && typeof module !== "undefined") {
@@ -78,6 +81,261 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
     1: [function (require, module, exports) {
       "use strict";
 
+      var __importDefault = this && this.__importDefault || function (mod) {
+        return mod && mod.__esModule ? mod : {
+          "default": mod
+        };
+      };
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.ConfiguratorAR = void 0;
+      var plattar_analytics_1 = require("@plattar/plattar-analytics");
+      var plattar_api_1 = require("@plattar/plattar-api");
+      var plattar_services_1 = require("@plattar/plattar-services");
+      var util_1 = require("../util/util");
+      var quicklook_viewer_1 = __importDefault(require("../viewers/quicklook-viewer"));
+      var reality_viewer_1 = __importDefault(require("../viewers/reality-viewer"));
+      var scene_viewer_1 = __importDefault(require("../viewers/scene-viewer"));
+      var launcher_ar_1 = require("./launcher-ar");
+      var version_1 = __importDefault(require("../version"));
+      /**
+       * Performs AR functionality related to Plattar Scenes
+       */
+      var ConfiguratorAR = /*#__PURE__*/function (_launcher_ar_1$Launch) {
+        _inherits(ConfiguratorAR, _launcher_ar_1$Launch);
+        var _super = _createSuper(ConfiguratorAR);
+        function ConfiguratorAR(state) {
+          var _this;
+          _classCallCheck(this, ConfiguratorAR);
+          _this = _super.call(this);
+          // analytics instance
+          _this._analytics = null;
+          if (!state) {
+            throw new Error("ConfiguratorAR.constructor(state) - state must be defined");
+          }
+          _this._state = state;
+          _this._ar = null;
+          return _this;
+        }
+        _createClass(ConfiguratorAR, [{
+          key: "_SetupAnalytics",
+          value: function _SetupAnalytics() {
+            var scene = this._state.scene;
+            var analytics = null;
+            // setup scene stuff (if any)
+            if (scene) {
+              analytics = new plattar_analytics_1.Analytics(scene.attributes.application_id);
+              analytics.origin = plattar_api_1.Server.location().type;
+              this._analytics = analytics;
+              analytics.data.push("type", "scene-ar");
+              analytics.data.push("sdkVersion", version_1["default"]);
+              analytics.data.push("sceneId", scene.id);
+              analytics.data.push("sceneTitle", scene.attributes.title);
+              var application = scene.relationships.find(plattar_api_1.Project);
+              // setup application stuff (if any)
+              if (application) {
+                analytics.data.push("applicationId", application.id);
+                analytics.data.push("applicationTitle", application.attributes.title);
+              }
+            }
+          }
+          /**
+           * Composes a Scene into an AR Model (remote operation) that can be used to launch
+           * an AR File
+           */
+        }, {
+          key: "_Compose",
+          value: function () {
+            var _Compose2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(output) {
+              var objects, configurator, totalARObjectCount, results;
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    objects = this._state.state.array();
+                    if (!(objects.length <= 0)) {
+                      _context.next = 3;
+                      break;
+                    }
+                    throw new Error("ConfiguratorAR.Compose() - cannot proceed as scene does not contain AR components");
+                  case 3:
+                    // define our configurator
+                    configurator = new plattar_services_1.Configurator();
+                    configurator.server = plattar_api_1.Server.location().type;
+                    configurator.output = output;
+                    totalARObjectCount = 0;
+                    objects.forEach(function (object) {
+                      if (object.meta_data.augment) {
+                        if (object.meta_data.type === "scenemodel") {
+                          configurator.addModel(object.scene_product_id);
+                        } else {
+                          configurator.addSceneProduct(object.scene_product_id, object.product_variation_id);
+                        }
+                        totalARObjectCount++;
+                      }
+                    });
+                    if (!(totalARObjectCount <= 0)) {
+                      _context.next = 10;
+                      break;
+                    }
+                    throw new Error("ConfiguratorAR.Compose() - cannot proceed as scene does not contain any enabled AR components");
+                  case 10:
+                    _context.next = 12;
+                    return configurator.get();
+                  case 12:
+                    results = _context.sent;
+                    return _context.abrupt("return", results.filename);
+                  case 14:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, this);
+            }));
+            function _Compose(_x) {
+              return _Compose2.apply(this, arguments);
+            }
+            return _Compose;
+          }()
+          /**
+           * Initialise the SceneAR instance. This returns a Promise that resolves
+           * successfully if initialisation is successful, otherwise it will fail.
+           *
+           * filure can occur for a number of reasons but it generally means that AR
+           * cannot be performed.
+           */
+        }, {
+          key: "init",
+          value: function () {
+            var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+              var scene, sceneOpt, modelUrl, _modelUrl, _modelUrl2, arviewer;
+              return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                while (1) switch (_context2.prev = _context2.next) {
+                  case 0:
+                    if (util_1.Util.canAugment()) {
+                      _context2.next = 2;
+                      break;
+                    }
+                    throw new Error("ConfiguratorAR.init() - cannot proceed as AR not available in context");
+                  case 2:
+                    scene = this._state.scene;
+                    this._SetupAnalytics();
+                    sceneOpt = scene.attributes.custom_json || {}; // we need to define our AR module here
+                    // we are in Safari/Quicklook mode here
+                    if (!(util_1.Util.isSafari() || util_1.Util.isChromeOnIOS())) {
+                      _context2.next = 25;
+                      break;
+                    }
+                    if (!(sceneOpt.anchor === "face")) {
+                      _context2.next = 17;
+                      break;
+                    }
+                    if (!util_1.Util.canRealityViewer()) {
+                      _context2.next = 16;
+                      break;
+                    }
+                    _context2.next = 10;
+                    return this._Compose("vto");
+                  case 10:
+                    modelUrl = _context2.sent;
+                    this._ar = new reality_viewer_1["default"]();
+                    this._ar.modelUrl = modelUrl;
+                    return _context2.abrupt("return", this);
+                  case 16:
+                    throw new Error("ConfiguratorAR.init() - cannot proceed as VTO AR requires Reality Viewer support");
+                  case 17:
+                    if (!util_1.Util.canQuicklook()) {
+                      _context2.next = 24;
+                      break;
+                    }
+                    _context2.next = 20;
+                    return this._Compose("usdz");
+                  case 20:
+                    _modelUrl = _context2.sent;
+                    this._ar = new quicklook_viewer_1["default"]();
+                    this._ar.modelUrl = _modelUrl;
+                    return _context2.abrupt("return", this);
+                  case 24:
+                    throw new Error("ConfiguratorAR.init() - cannot proceed as IOS device does not support AR Mode");
+                  case 25:
+                    if (!util_1.Util.canSceneViewer()) {
+                      _context2.next = 35;
+                      break;
+                    }
+                    _context2.next = 28;
+                    return this._Compose("glb");
+                  case 28:
+                    _modelUrl2 = _context2.sent;
+                    arviewer = new scene_viewer_1["default"]();
+                    arviewer.modelUrl = _modelUrl2;
+                    arviewer.isVertical = this.options.anchor === "vertical" ? true : false;
+                    if (sceneOpt.anchor === "vertical") {
+                      arviewer.isVertical = true;
+                    }
+                    this._ar = arviewer;
+                    return _context2.abrupt("return", this);
+                  case 35:
+                    throw new Error("ConfiguratorAR.init() - could not initialise AR correctly, check values");
+                  case 36:
+                  case "end":
+                    return _context2.stop();
+                }
+              }, _callee2, this);
+            }));
+            function init() {
+              return _init.apply(this, arguments);
+            }
+            return init;
+          }()
+        }, {
+          key: "start",
+          value: function start() {
+            if (!this._ar) {
+              throw new Error("SceneAR.start() - cannot proceed as AR instance is null");
+            }
+            var analytics = this._analytics;
+            if (analytics) {
+              analytics.data.push("device", this._ar.device);
+              analytics.data.push("eventCategory", this._ar.nodeType);
+              analytics.data.push("eventAction", "Start Scene Augment");
+              analytics.write();
+              analytics.startRecordEngagement();
+            }
+            // this was initialised via the init() function
+            this._ar.start();
+          }
+        }, {
+          key: "canQuicklook",
+          value: function canQuicklook() {
+            return this._ar && this._ar.nodeType === "Quick Look" ? true : false;
+          }
+        }, {
+          key: "canRealityViewer",
+          value: function canRealityViewer() {
+            return this._ar && this._ar.nodeType === "Reality Viewer" ? true : false;
+          }
+        }, {
+          key: "canSceneViewer",
+          value: function canSceneViewer() {
+            return this._ar && this._ar.nodeType === "Scene Viewer" ? true : false;
+          }
+        }]);
+        return ConfiguratorAR;
+      }(launcher_ar_1.LauncherAR);
+      exports.ConfiguratorAR = ConfiguratorAR;
+    }, {
+      "../util/util": 15,
+      "../version": 16,
+      "../viewers/quicklook-viewer": 18,
+      "../viewers/reality-viewer": 19,
+      "../viewers/scene-viewer": 20,
+      "./launcher-ar": 2,
+      "@plattar/plattar-analytics": 40,
+      "@plattar/plattar-api": 44,
+      "@plattar/plattar-services": 115
+    }],
+    2: [function (require, module, exports) {
+      "use strict";
+
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
@@ -95,15 +353,28 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
          */
         _createClass(LauncherAR, [{
           key: "launch",
-          value: function launch() {
-            var _this = this;
-            return new Promise(function (accept, reject) {
-              _this.init().then(function (value) {
-                value.start();
-                return accept();
-              })["catch"](reject);
-            });
-          }
+          value: function () {
+            var _launch = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+              var value;
+              return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+                while (1) switch (_context3.prev = _context3.next) {
+                  case 0:
+                    _context3.next = 2;
+                    return this.init();
+                  case 2:
+                    value = _context3.sent;
+                    return _context3.abrupt("return", value.start());
+                  case 4:
+                  case "end":
+                    return _context3.stop();
+                }
+              }, _callee3, this);
+            }));
+            function launch() {
+              return _launch.apply(this, arguments);
+            }
+            return launch;
+          }()
           /**
            * AR Options used for launching AR
            */
@@ -117,7 +388,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       }();
       exports.LauncherAR = LauncherAR;
     }, {}],
-    2: [function (require, module, exports) {
+    3: [function (require, module, exports) {
       "use strict";
 
       var __importDefault = this && this.__importDefault || function (mod) {
@@ -136,17 +407,18 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       var reality_viewer_1 = __importDefault(require("../viewers/reality-viewer"));
       var scene_viewer_1 = __importDefault(require("../viewers/scene-viewer"));
       var launcher_ar_1 = require("./launcher-ar");
+      var version_1 = __importDefault(require("../version"));
       /**
        * Performs AT Functionality using Plattar FileModel types
        */
-      var ModelAR = /*#__PURE__*/function (_launcher_ar_1$Launch) {
-        _inherits(ModelAR, _launcher_ar_1$Launch);
-        var _super = _createSuper(ModelAR);
+      var ModelAR = /*#__PURE__*/function (_launcher_ar_1$Launch2) {
+        _inherits(ModelAR, _launcher_ar_1$Launch2);
+        var _super2 = _createSuper(ModelAR);
         function ModelAR() {
           var _this2;
           var modelID = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
           _classCallCheck(this, ModelAR);
-          _this2 = _super.call(this);
+          _this2 = _super2.call(this);
           // analytics instance
           _this2._analytics = null;
           if (!modelID) {
@@ -171,6 +443,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               analytics = new plattar_analytics_1.Analytics(project.id);
               analytics.origin = plattar_api_1.Server.location().type;
               analytics.data.push("type", "model-ar");
+              analytics.data.push("sdkVersion", version_1["default"]);
               analytics.data.push("applicationId", project.id);
               analytics.data.push("applicationTitle", project.attributes.title);
               analytics.data.push("modelId", model.id);
@@ -271,14 +544,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       exports.ModelAR = ModelAR;
     }, {
       "../util/util": 15,
+      "../version": 16,
       "../viewers/quicklook-viewer": 18,
       "../viewers/reality-viewer": 19,
       "../viewers/scene-viewer": 20,
-      "./launcher-ar": 1,
+      "./launcher-ar": 2,
       "@plattar/plattar-analytics": 40,
       "@plattar/plattar-api": 44
     }],
-    3: [function (require, module, exports) {
+    4: [function (require, module, exports) {
       "use strict";
 
       var __importDefault = this && this.__importDefault || function (mod) {
@@ -297,19 +571,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       var reality_viewer_1 = __importDefault(require("../viewers/reality-viewer"));
       var scene_viewer_1 = __importDefault(require("../viewers/scene-viewer"));
       var launcher_ar_1 = require("./launcher-ar");
+      var version_1 = __importDefault(require("../version"));
       /**
        * Performs AR functionality related to Plattar Products and Variation types
        */
-      var ProductAR = /*#__PURE__*/function (_launcher_ar_1$Launch2) {
-        _inherits(ProductAR, _launcher_ar_1$Launch2);
-        var _super2 = _createSuper(ProductAR);
+      var ProductAR = /*#__PURE__*/function (_launcher_ar_1$Launch3) {
+        _inherits(ProductAR, _launcher_ar_1$Launch3);
+        var _super3 = _createSuper(ProductAR);
         function ProductAR() {
           var _this4;
           var productID = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
           var variationID = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
           var variationSKU = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
           _classCallCheck(this, ProductAR);
-          _this4 = _super2.call(this);
+          _this4 = _super3.call(this);
           // analytics instance
           _this4._analytics = null;
           if (!productID) {
@@ -347,6 +622,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               analytics.origin = plattar_api_1.Server.location().type;
               this._analytics = analytics;
               analytics.data.push("type", "product-ar");
+              analytics.data.push("sdkVersion", version_1["default"]);
               analytics.data.push("sceneId", scene.id);
               analytics.data.push("sceneTitle", scene.attributes.title);
               var application = scene.relationships.find(plattar_api_1.Project);
@@ -504,14 +780,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       exports.ProductAR = ProductAR;
     }, {
       "../util/util": 15,
+      "../version": 16,
       "../viewers/quicklook-viewer": 18,
       "../viewers/reality-viewer": 19,
       "../viewers/scene-viewer": 20,
-      "./launcher-ar": 1,
+      "./launcher-ar": 2,
       "@plattar/plattar-analytics": 40,
       "@plattar/plattar-api": 44
     }],
-    4: [function (require, module, exports) {
+    5: [function (require, module, exports) {
       "use strict";
 
       var __importDefault = this && this.__importDefault || function (mod) {
@@ -530,18 +807,19 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       var reality_viewer_1 = __importDefault(require("../viewers/reality-viewer"));
       var scene_viewer_1 = __importDefault(require("../viewers/scene-viewer"));
       var launcher_ar_1 = require("./launcher-ar");
+      var version_1 = __importDefault(require("../version"));
       /**
        * Allows launching AR Experiences provided a single remote 3D Model file
        */
-      var RawAR = /*#__PURE__*/function (_launcher_ar_1$Launch3) {
-        _inherits(RawAR, _launcher_ar_1$Launch3);
-        var _super3 = _createSuper(RawAR);
+      var RawAR = /*#__PURE__*/function (_launcher_ar_1$Launch4) {
+        _inherits(RawAR, _launcher_ar_1$Launch4);
+        var _super4 = _createSuper(RawAR);
         function RawAR() {
           var _this6;
           var modelLocation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
           var sceneID = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
           _classCallCheck(this, RawAR);
-          _this6 = _super3.call(this);
+          _this6 = _super4.call(this);
           // analytics instance
           _this6._analytics = null;
           if (!modelLocation) {
@@ -578,6 +856,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                 analytics.origin = plattar_api_1.Server.location().type;
                 _this7._analytics = analytics;
                 analytics.data.push("type", "scene-ar");
+                analytics.data.push("sdkVersion", version_1["default"]);
                 analytics.data.push("sceneId", scene.id);
                 analytics.data.push("sceneTitle", scene.attributes.title);
                 var application = scene.relationships.find(plattar_api_1.Project);
@@ -686,14 +965,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       exports.RawAR = RawAR;
     }, {
       "../util/util": 15,
+      "../version": 16,
       "../viewers/quicklook-viewer": 18,
       "../viewers/reality-viewer": 19,
       "../viewers/scene-viewer": 20,
-      "./launcher-ar": 1,
+      "./launcher-ar": 2,
       "@plattar/plattar-analytics": 40,
       "@plattar/plattar-api": 44
     }],
-    5: [function (require, module, exports) {
+    6: [function (require, module, exports) {
       "use strict";
 
       var __importDefault = this && this.__importDefault || function (mod) {
@@ -713,18 +993,19 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       var reality_viewer_1 = __importDefault(require("../viewers/reality-viewer"));
       var scene_viewer_1 = __importDefault(require("../viewers/scene-viewer"));
       var launcher_ar_1 = require("./launcher-ar");
+      var version_1 = __importDefault(require("../version"));
       /**
        * Performs AR functionality related to Plattar Scenes
        */
-      var SceneAR = /*#__PURE__*/function (_launcher_ar_1$Launch4) {
-        _inherits(SceneAR, _launcher_ar_1$Launch4);
-        var _super4 = _createSuper(SceneAR);
+      var SceneAR = /*#__PURE__*/function (_launcher_ar_1$Launch5) {
+        _inherits(SceneAR, _launcher_ar_1$Launch5);
+        var _super5 = _createSuper(SceneAR);
         function SceneAR() {
           var _this9;
           var sceneID = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
           var variationSelection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
           _classCallCheck(this, SceneAR);
-          _this9 = _super4.call(this);
+          _this9 = _super5.call(this);
           // analytics instance
           _this9._analytics = null;
           if (!sceneID) {
@@ -750,6 +1031,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               analytics.origin = plattar_api_1.Server.location().type;
               this._analytics = analytics;
               analytics.data.push("type", "scene-ar");
+              analytics.data.push("sdkVersion", version_1["default"]);
               analytics.data.push("sceneId", scene.id);
               analytics.data.push("sceneTitle", scene.attributes.title);
               var application = scene.relationships.find(plattar_api_1.Project);
@@ -924,15 +1206,16 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       exports.SceneAR = SceneAR;
     }, {
       "../util/util": 15,
+      "../version": 16,
       "../viewers/quicklook-viewer": 18,
       "../viewers/reality-viewer": 19,
       "../viewers/scene-viewer": 20,
-      "./launcher-ar": 1,
+      "./launcher-ar": 2,
       "@plattar/plattar-analytics": 40,
       "@plattar/plattar-api": 44,
       "@plattar/plattar-services": 115
     }],
-    6: [function (require, module, exports) {
+    7: [function (require, module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -948,14 +1231,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
        */
       var SceneProductAR = /*#__PURE__*/function (_product_ar_1$Product) {
         _inherits(SceneProductAR, _product_ar_1$Product);
-        var _super5 = _createSuper(SceneProductAR);
+        var _super6 = _createSuper(SceneProductAR);
         function SceneProductAR() {
           var _this12;
           var sceneProductID = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
           var variationID = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
           var variationSKU = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
           _classCallCheck(this, SceneProductAR);
-          _this12 = _super5.call(this, sceneProductID, variationID, variationSKU);
+          _this12 = _super6.call(this, sceneProductID, variationID, variationSKU);
           // this is evaluated in the init() function
           _this12._attachedProductID = null;
           if (!sceneProductID) {
@@ -1003,10 +1286,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       exports.SceneProductAR = SceneProductAR;
     }, {
       "../util/util": 15,
-      "./product-ar": 3,
+      "./product-ar": 4,
       "@plattar/plattar-api": 44
     }],
-    7: [function (require, module, exports) {
+    8: [function (require, module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1014,238 +1297,406 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       });
       exports.ConfiguratorController = void 0;
       var plattar_api_1 = require("@plattar/plattar-api");
-      var plattar_services_1 = require("@plattar/plattar-services");
-      var raw_ar_1 = require("../../ar/raw-ar");
-      var scene_ar_1 = require("../../ar/scene-ar");
       var scene_product_ar_1 = require("../../ar/scene-product-ar");
-      var configurator_state_1 = require("../../util/configurator-state");
       var util_1 = require("../../util/util");
       var plattar_controller_1 = require("./plattar-controller");
+      var configurator_ar_1 = require("../../ar/configurator-ar");
       /**
        * Manages an instance of the <plattar-configurator> HTML Element
        */
       var ConfiguratorController = /*#__PURE__*/function (_plattar_controller_) {
         _inherits(ConfiguratorController, _plattar_controller_);
-        var _super6 = _createSuper(ConfiguratorController);
-        function ConfiguratorController(parent) {
+        var _super7 = _createSuper(ConfiguratorController);
+        function ConfiguratorController() {
+          var _this14;
           _classCallCheck(this, ConfiguratorController);
-          return _super6.call(this, parent);
+          _this14 = _super7.apply(this, arguments);
+          _this14._cachedConfigState = null;
+          return _this14;
         }
         _createClass(ConfiguratorController, [{
+          key: "getConfiguratorState",
+          value: function () {
+            var _getConfiguratorState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+              return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+                while (1) switch (_context4.prev = _context4.next) {
+                  case 0:
+                    if (!this._cachedConfigState) {
+                      _context4.next = 2;
+                      break;
+                    }
+                    return _context4.abrupt("return", this._cachedConfigState);
+                  case 2:
+                    this._cachedConfigState = this.createConfiguratorState();
+                    return _context4.abrupt("return", this._cachedConfigState);
+                  case 4:
+                  case "end":
+                    return _context4.stop();
+                }
+              }, _callee4, this);
+            }));
+            function getConfiguratorState() {
+              return _getConfiguratorState.apply(this, arguments);
+            }
+            return getConfiguratorState;
+          }()
+        }, {
           key: "onAttributesUpdated",
-          value: function onAttributesUpdated() {
-            var state = this._state;
-            // re-render the QR Code when attributes have changed
-            if (state === plattar_controller_1.ControllerState.QRCode) {
-              this.startQRCode(this._prevQROpt);
-              return;
+          value: function () {
+            var _onAttributesUpdated = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(attributeName) {
+              var state, viewer, variationIDs, variationIDsList, variationSKUs, variationSKUList, configState, _variationIDs, _variationIDsList, _configState, _variationSKUs, _variationSKUList;
+              return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+                while (1) switch (_context5.prev = _context5.next) {
+                  case 0:
+                    state = this._state;
+                    if (!(state === plattar_controller_1.ControllerState.Renderer)) {
+                      _context5.next = 17;
+                      break;
+                    }
+                    viewer = this.element;
+                    if (!viewer) {
+                      _context5.next = 16;
+                      break;
+                    }
+                    if (!(attributeName === "variation-id")) {
+                      _context5.next = 10;
+                      break;
+                    }
+                    variationIDs = this.getAttribute("variation-id");
+                    variationIDsList = variationIDs ? variationIDs.split(",") : [];
+                    if (!(variationIDsList.length > 0)) {
+                      _context5.next = 10;
+                      break;
+                    }
+                    _context5.next = 10;
+                    return viewer.messenger.selectVariationID(variationIDsList);
+                  case 10:
+                    if (!(attributeName === "variation-sku")) {
+                      _context5.next = 16;
+                      break;
+                    }
+                    variationSKUs = this.getAttribute("variation-sku");
+                    variationSKUList = variationSKUs ? variationSKUs.split(",") : [];
+                    if (!(variationSKUList.length > 0)) {
+                      _context5.next = 16;
+                      break;
+                    }
+                    _context5.next = 16;
+                    return viewer.messenger.selectVariationSKU(variationSKUList);
+                  case 16:
+                    return _context5.abrupt("return");
+                  case 17:
+                    if (!(state === plattar_controller_1.ControllerState.QRCode)) {
+                      _context5.next = 34;
+                      break;
+                    }
+                    if (!(attributeName === "variation-id")) {
+                      _context5.next = 25;
+                      break;
+                    }
+                    _context5.next = 21;
+                    return this.getConfiguratorState();
+                  case 21:
+                    configState = _context5.sent;
+                    _variationIDs = this.getAttribute("variation-id");
+                    _variationIDsList = _variationIDs ? _variationIDs.split(",") : [];
+                    _variationIDsList.forEach(function (variationID) {
+                      configState.state.setVariationID(variationID);
+                    });
+                  case 25:
+                    if (!(attributeName === "variation-sku")) {
+                      _context5.next = 32;
+                      break;
+                    }
+                    _context5.next = 28;
+                    return this.getConfiguratorState();
+                  case 28:
+                    _configState = _context5.sent;
+                    _variationSKUs = this.getAttribute("variation-sku");
+                    _variationSKUList = _variationSKUs ? _variationSKUs.split(",") : [];
+                    _variationSKUList.forEach(function (variationSKU) {
+                      _configState.state.setVariationSKU(variationSKU);
+                    });
+                  case 32:
+                    this.startQRCode(this._prevQROpt);
+                    return _context5.abrupt("return");
+                  case 34:
+                  case "end":
+                    return _context5.stop();
+                }
+              }, _callee5, this);
+            }));
+            function onAttributesUpdated(_x2) {
+              return _onAttributesUpdated.apply(this, arguments);
             }
-          }
+            return onAttributesUpdated;
+          }()
         }, {
           key: "startViewerQRCode",
-          value: function startViewerQRCode(options) {
-            var _this14 = this;
-            return new Promise(function (accept, reject) {
-              // remove the old renderer instance if any
-              _this14.removeRenderer();
-              var sceneID = _this14.getAttribute("scene-id");
-              if (sceneID) {
-                var opt = options || _this14._GetDefaultQROptions();
-                var viewer = document.createElement("plattar-qrcode");
-                // required attributes with defaults for plattar-viewer node
-                var width = _this14.getAttribute("width") || "500px";
-                var height = _this14.getAttribute("height") || "500px";
-                viewer.setAttribute("width", width);
-                viewer.setAttribute("height", height);
-                if (opt.color) {
-                  viewer.setAttribute("color", opt.color);
-                }
-                if (opt.margin) {
-                  viewer.setAttribute("margin", "" + opt.margin);
-                }
-                if (opt.qrType) {
-                  viewer.setAttribute("qr-type", opt.qrType);
-                }
-                viewer.setAttribute("shorten", opt.shorten && (opt.shorten === true || opt.shorten === "true") ? "true" : "false");
-                var dst = plattar_api_1.Server.location().base + "renderer/configurator.html?scene_id=" + sceneID;
-                // optional attributes
-                var configState = _this14.getAttribute("config-state");
-                var showAR = _this14.getAttribute("show-ar");
-                var showUI = _this14.getAttribute("show-ui");
-                if (showUI && showUI === "true") {
-                  dst = plattar_api_1.Server.location().base + "configurator/dist/index.html?scene_id=" + sceneID;
-                }
-                if (configState) {
-                  dst += "&config_state=" + configState;
-                }
-                if (showAR) {
-                  dst += "&show_ar=" + showAR;
+          value: function () {
+            var _startViewerQRCode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(options) {
+              var _this15 = this;
+              var sceneID, opt, viewer, width, height, dst, configState, showAR, showUI;
+              return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+                while (1) switch (_context6.prev = _context6.next) {
+                  case 0:
+                    // remove the old renderer instance if any
+                    this.removeRenderer();
+                    sceneID = this.getAttribute("scene-id");
+                    if (sceneID) {
+                      _context6.next = 4;
+                      break;
+                    }
+                    throw new Error("ConfiguratorController.startQRCode() - minimum required attributes not set, use scene-id as a minimum");
+                  case 4:
+                    opt = options || this._GetDefaultQROptions();
+                    viewer = document.createElement("plattar-qrcode");
+                    this._element = viewer;
+                    // required attributes with defaults for plattar-viewer node
+                    width = this.getAttribute("width") || "500px";
+                    height = this.getAttribute("height") || "500px";
+                    viewer.setAttribute("width", width);
+                    viewer.setAttribute("height", height);
+                    if (opt.color) {
+                      viewer.setAttribute("color", opt.color);
+                    }
+                    if (opt.margin) {
+                      viewer.setAttribute("margin", "" + opt.margin);
+                    }
+                    if (opt.qrType) {
+                      viewer.setAttribute("qr-type", opt.qrType);
+                    }
+                    viewer.setAttribute("shorten", opt.shorten && (opt.shorten === true || opt.shorten === "true") ? "true" : "false");
+                    dst = plattar_api_1.Server.location().base + "renderer/configurator.html?scene_id=" + sceneID; // optional attributes
+                    configState = null;
+                    showAR = this.getAttribute("show-ar");
+                    showUI = this.getAttribute("show-ui");
+                    _context6.prev = 19;
+                    _context6.next = 22;
+                    return this.getConfiguratorState();
+                  case 22:
+                    configState = _context6.sent.state.encode();
+                    _context6.next = 28;
+                    break;
+                  case 25:
+                    _context6.prev = 25;
+                    _context6.t0 = _context6["catch"](19);
+                    // config state is not available
+                    configState = null;
+                  case 28:
+                    if (showUI && showUI === "true") {
+                      dst = plattar_api_1.Server.location().base + "configurator/dist/index.html?scene_id=" + sceneID;
+                    }
+                    if (configState) {
+                      dst += "&config_state=" + configState;
+                    }
+                    if (showAR) {
+                      dst += "&show_ar=" + showAR;
+                    }
+                    viewer.setAttribute("url", opt.url || dst);
+                    this._state = plattar_controller_1.ControllerState.QRCode;
+                    this._prevQROpt = opt;
+                    return _context6.abrupt("return", new Promise(function (accept, reject) {
+                      viewer.onload = function () {
+                        return accept(viewer);
+                      };
+                      _this15.append(viewer);
+                    }));
+                  case 35:
+                  case "end":
+                    return _context6.stop();
                 }
-                viewer.setAttribute("url", opt.url || dst);
-                viewer.onload = function () {
-                  return accept(viewer);
-                };
-                _this14.append(viewer);
-                _this14._element = viewer;
-                _this14._state = plattar_controller_1.ControllerState.QRCode;
-                _this14._prevQROpt = opt;
-                return;
-              }
-              return reject(new Error("ConfiguratorController.startQRCode() - minimum required attributes not set, use scene-id as a minimum"));
-            });
-          }
+              }, _callee6, this, [[19, 25]]);
+            }));
+            function startViewerQRCode(_x3) {
+              return _startViewerQRCode.apply(this, arguments);
+            }
+            return startViewerQRCode;
+          }()
         }, {
           key: "startRenderer",
-          value: function startRenderer() {
-            var _this15 = this;
-            return new Promise(function (accept, reject) {
-              // remove the old renderer instance if any
-              _this15.removeRenderer();
-              var sceneID = _this15.getAttribute("scene-id");
-              if (sceneID) {
-                // required attributes with defaults for plattar-configurator node
-                var width = _this15.getAttribute("width") || "500px";
-                var height = _this15.getAttribute("height") || "500px";
-                var server = _this15.getAttribute("server") || "production";
-                var viewer = document.createElement("plattar-configurator");
-                viewer.setAttribute("width", width);
-                viewer.setAttribute("height", height);
-                viewer.setAttribute("server", server);
-                viewer.setAttribute("scene-id", sceneID);
-                // optional attributes
-                var configState = _this15.getAttribute("config-state");
-                var showAR = _this15.getAttribute("show-ar");
-                var showUI = _this15.getAttribute("show-ui");
-                if (configState) {
-                  viewer.setAttribute("config-state", configState);
-                }
-                if (showAR) {
-                  viewer.setAttribute("show-ar", showAR);
-                }
-                if (showUI) {
-                  viewer.setAttribute("show-ui", showUI);
+          value: function () {
+            var _startRenderer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+              var _this16 = this;
+              var sceneID, width, height, server, viewer, configState, showAR, showUI;
+              return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+                while (1) switch (_context7.prev = _context7.next) {
+                  case 0:
+                    // remove the old renderer instance if any
+                    this.removeRenderer();
+                    sceneID = this.getAttribute("scene-id");
+                    if (sceneID) {
+                      _context7.next = 4;
+                      break;
+                    }
+                    throw new Error("ConfiguratorController.startRenderer() - minimum required attributes not set, use scene-id as a minimum");
+                  case 4:
+                    // required attributes with defaults for plattar-configurator node
+                    width = this.getAttribute("width") || "500px";
+                    height = this.getAttribute("height") || "500px";
+                    server = this.getAttribute("server") || "production";
+                    viewer = document.createElement("plattar-configurator");
+                    this._element = viewer;
+                    viewer.setAttribute("width", width);
+                    viewer.setAttribute("height", height);
+                    viewer.setAttribute("server", server);
+                    viewer.setAttribute("scene-id", sceneID);
+                    // optional attributes
+                    configState = null;
+                    _context7.prev = 14;
+                    _context7.next = 17;
+                    return this.getConfiguratorState();
+                  case 17:
+                    configState = _context7.sent;
+                    _context7.next = 23;
+                    break;
+                  case 20:
+                    _context7.prev = 20;
+                    _context7.t0 = _context7["catch"](14);
+                    // config state is not available
+                    configState = null;
+                  case 23:
+                    showAR = this.getAttribute("show-ar");
+                    showUI = this.getAttribute("show-ui");
+                    if (configState) {
+                      viewer.setAttribute("config-state", configState.state.encode());
+                    }
+                    if (showAR) {
+                      viewer.setAttribute("show-ar", showAR);
+                    }
+                    if (showUI) {
+                      viewer.setAttribute("show-ui", showUI);
+                    }
+                    this._state = plattar_controller_1.ControllerState.Renderer;
+                    return _context7.abrupt("return", new Promise(function (accept, reject) {
+                      _this16.append(viewer);
+                      if (configState) {
+                        _this16.setupMessengerObservers(viewer, configState);
+                      }
+                      return accept(viewer);
+                    }));
+                  case 30:
+                  case "end":
+                    return _context7.stop();
                 }
-                viewer.onload = function () {
-                  return accept(viewer);
-                };
-                _this15.append(viewer);
-                _this15._element = viewer;
-                _this15._state = plattar_controller_1.ControllerState.Renderer;
-                return;
-              }
-              return reject(new Error("ConfiguratorController.startRenderer() - minimum required attributes not set, use scene-id as a minimum"));
-            });
-          }
+              }, _callee7, this, [[14, 20]]);
+            }));
+            function startRenderer() {
+              return _startRenderer.apply(this, arguments);
+            }
+            return startRenderer;
+          }()
         }, {
           key: "initAR",
-          value: function initAR() {
-            var _this16 = this;
-            return new Promise(function (accept, reject) {
-              if (!util_1.Util.canAugment()) {
-                return reject(new Error("ConfiguratorController.initAR() - cannot proceed as AR not available in context"));
-              }
-              var arMode = _this16.getAttribute("ar-mode") || "generated";
-              switch (arMode.toLowerCase()) {
-                case "inherited":
-                  _this16._InitARInherited(accept, reject);
-                  return;
-                case "generated":
-                default:
-                  _this16._InitARGenerated(accept, reject);
-              }
-            });
-          }
+          value: function () {
+            var _initAR = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+              var arMode;
+              return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+                while (1) switch (_context8.prev = _context8.next) {
+                  case 0:
+                    if (util_1.Util.canAugment()) {
+                      _context8.next = 2;
+                      break;
+                    }
+                    throw new Error("ConfiguratorController.initAR() - cannot proceed as AR not available in context");
+                  case 2:
+                    arMode = this.getAttribute("ar-mode") || "generated";
+                    _context8.t0 = arMode.toLowerCase();
+                    _context8.next = _context8.t0 === "inherited" ? 6 : _context8.t0 === "generated" ? 7 : 7;
+                    break;
+                  case 6:
+                    return _context8.abrupt("return", this._InitARInherited());
+                  case 7:
+                    return _context8.abrupt("return", this._InitARGenerated());
+                  case 8:
+                  case "end":
+                    return _context8.stop();
+                }
+              }, _callee8, this);
+            }));
+            function initAR() {
+              return _initAR.apply(this, arguments);
+            }
+            return initAR;
+          }()
           /**
            * Private Function - This launches the Static/Inherited AR Mode
            */
         }, {
           key: "_InitARInherited",
-          value: function _InitARInherited(accept, reject) {
-            var sceneID = this.getAttribute("scene-id");
-            var configState = this.getAttribute("config-state");
-            // use config-state if its available
-            if (sceneID && configState) {
-              var state = configurator_state_1.ConfiguratorState.decode(configState);
-              var first = state.first();
-              if (first) {
-                var sceneProductAR = new scene_product_ar_1.SceneProductAR(first.scene_product_id, first.product_variation_id);
-                sceneProductAR.init().then(accept)["catch"](reject);
-                return;
-              }
-              return reject(new Error("ConfiguratorController.initAR() - invalid config-state does not have any product states"));
-            }
-            // otherwise fallback to using scene
-            if (sceneID) {
-              configurator_state_1.ConfiguratorState.decodeScene(sceneID).then(function (state) {
-                var first = state.first();
-                if (first) {
-                  var _sceneProductAR = new scene_product_ar_1.SceneProductAR(first.scene_product_id, first.product_variation_id);
-                  return _sceneProductAR.init().then(accept)["catch"](reject);
+          value: function () {
+            var _InitARInherited2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+              var sceneID, state, first, sceneProductAR;
+              return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+                while (1) switch (_context9.prev = _context9.next) {
+                  case 0:
+                    sceneID = this.getAttribute("scene-id");
+                    if (sceneID) {
+                      _context9.next = 3;
+                      break;
+                    }
+                    throw new Error("ConfiguratorController.initAR() - inherited AR minimum required attributes not set, use scene-id as a minimum");
+                  case 3:
+                    _context9.next = 5;
+                    return this.getConfiguratorState();
+                  case 5:
+                    state = _context9.sent.state;
+                    first = state.first();
+                    if (!first) {
+                      _context9.next = 10;
+                      break;
+                    }
+                    sceneProductAR = new scene_product_ar_1.SceneProductAR(first.scene_product_id, first.product_variation_id);
+                    return _context9.abrupt("return", sceneProductAR.init());
+                  case 10:
+                    throw new Error("ConfiguratorController.initAR() - invalid decoded config-state does not have any product states");
+                  case 11:
+                  case "end":
+                    return _context9.stop();
                 }
-                return reject(new Error("ConfiguratorController.initAR() - invalid Scene does not have any product states"));
-              })["catch"](reject);
-              return;
+              }, _callee9, this);
+            }));
+            function _InitARInherited() {
+              return _InitARInherited2.apply(this, arguments);
             }
-            return reject(new Error("ConfiguratorController.initAR() - minimum required attributes not set, use scene-id as a minimum"));
-          }
+            return _InitARInherited;
+          }()
           /**
            * Private Function - This launches the Dynamic/Generated AR Mode
            */
         }, {
           key: "_InitARGenerated",
-          value: function _InitARGenerated(accept, reject) {
-            // if scene ID is available and the state is a configurator viewer
-            // we can use the real-time configurator state to launch the AR view
-            var viewer = this.element;
-            var sceneID = this.getAttribute("scene-id");
-            if (viewer && sceneID && viewer.messenger) {
-              var output = "glb";
-              if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
-                output = "usdz";
-              }
-              viewer.messenger.getARFile(output).then(function (result) {
-                var rawAR = new raw_ar_1.RawAR(result.filename, sceneID);
-                return rawAR.init().then(accept)["catch"](reject);
-              })["catch"](reject);
-              return;
-            }
-            var configState = this.getAttribute("config-state");
-            // otherwise scene ID is available to the viewer is not launched
-            // we can use the static configuration state to launch the AR view
-            if (sceneID && configState) {
-              var state = configurator_state_1.ConfiguratorState.decode(configState);
-              if (state.length > 0) {
-                var server = this.getAttribute("server") || "production";
-                var configurator = new plattar_services_1.Configurator();
-                configurator.server = server;
-                if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
-                  configurator.output = "usdz";
-                }
-                if (util_1.Util.canSceneViewer()) {
-                  configurator.output = "glb";
+          value: function () {
+            var _InitARGenerated2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
+              var sceneID, configAR;
+              return _regeneratorRuntime().wrap(function _callee10$(_context10) {
+                while (1) switch (_context10.prev = _context10.next) {
+                  case 0:
+                    sceneID = this.getAttribute("scene-id");
+                    if (sceneID) {
+                      _context10.next = 3;
+                      break;
+                    }
+                    throw new Error("VTOController.initAR() - generated AR minimum required attributes not set, use scene-id as a minimum");
+                  case 3:
+                    _context10.t0 = configurator_ar_1.ConfiguratorAR;
+                    _context10.next = 6;
+                    return this.getConfiguratorState();
+                  case 6:
+                    _context10.t1 = _context10.sent;
+                    configAR = new _context10.t0(_context10.t1);
+                    return _context10.abrupt("return", configAR.init());
+                  case 9:
+                  case "end":
+                    return _context10.stop();
                 }
-                state.forEach(function (productState) {
-                  if (productState.meta_data.augment === true) {
-                    configurator.addSceneProduct(productState.scene_product_id, productState.product_variation_id);
-                  }
-                });
-                configurator.get().then(function (result) {
-                  var rawAR = new raw_ar_1.RawAR(result.filename, sceneID);
-                  rawAR.init().then(accept)["catch"](reject);
-                })["catch"](reject);
-                return;
-              }
-              return reject(new Error("ConfiguratorController.initAR() - invalid config-state does not have any product states"));
-            }
-            // otherwise no config-state or viewer is active
-            // fallback to using default SceneAR implementation
-            if (sceneID) {
-              var sceneAR = new scene_ar_1.SceneAR(sceneID);
-              sceneAR.init().then(accept)["catch"](reject);
-              return;
+              }, _callee10, this);
+            }));
+            function _InitARGenerated() {
+              return _InitARGenerated2.apply(this, arguments);
             }
-            return reject(new Error("ConfiguratorController.initAR() - minimum required attributes not set, use scene-id as a minimum"));
-          }
+            return _InitARGenerated;
+          }()
         }, {
           key: "removeRenderer",
           value: function removeRenderer() {
@@ -1254,6 +1705,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               this._element = null;
               return true;
             }
+            this.removeMessengerObservers();
             return false;
           }
         }, {
@@ -1266,16 +1718,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       }(plattar_controller_1.PlattarController);
       exports.ConfiguratorController = ConfiguratorController;
     }, {
-      "../../ar/raw-ar": 4,
-      "../../ar/scene-ar": 5,
-      "../../ar/scene-product-ar": 6,
-      "../../util/configurator-state": 14,
+      "../../ar/configurator-ar": 1,
+      "../../ar/scene-product-ar": 7,
       "../../util/util": 15,
-      "./plattar-controller": 8,
-      "@plattar/plattar-api": 44,
-      "@plattar/plattar-services": 115
+      "./plattar-controller": 9,
+      "@plattar/plattar-api": 44
     }],
-    8: [function (require, module, exports) {
+    9: [function (require, module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1283,6 +1732,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       });
       exports.PlattarController = exports.ControllerState = void 0;
       var plattar_api_1 = require("@plattar/plattar-api");
+      var configurator_state_1 = require("../../util/configurator-state");
       var ControllerState;
       (function (ControllerState) {
         ControllerState[ControllerState["None"] = 0] = "None";
@@ -1298,10 +1748,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
           this._state = ControllerState.None;
           this._element = null;
           this._prevQROpt = null;
+          this._selectVariationObserver = null;
+          this._selectVariationSKUObserver = null;
           this._parent = parent;
         }
         /**
-         * Initialise and start AR mode if available
+         * Generates a brand new Configurator State from the provided SceneID or inputted Configurator State
          */
         _createClass(PlattarController, [{
           key: "_GetDefaultQROptions",
@@ -1318,16 +1770,131 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             };
           }
         }, {
-          key: "startAR",
-          value: function startAR() {
-            var _this17 = this;
-            return new Promise(function (accept, reject) {
-              _this17.initAR().then(function (launcher) {
-                launcher.start();
-                accept();
-              })["catch"](reject);
+          key: "createConfiguratorState",
+          value: function () {
+            var _createConfiguratorState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
+              var sceneID, configState, variationIDs, variationSKUs, decodedState, variationIDList, variationSKUList;
+              return _regeneratorRuntime().wrap(function _callee11$(_context11) {
+                while (1) switch (_context11.prev = _context11.next) {
+                  case 0:
+                    // get our Scene ID
+                    sceneID = this.getAttribute("scene-id");
+                    if (sceneID) {
+                      _context11.next = 3;
+                      break;
+                    }
+                    throw new Error("PlattarController.createConfiguratorState() - cannot create as required attribute scene-id is not defined");
+                  case 3:
+                    configState = this.getAttribute("config-state"); // get a list of variation ID's to use for initialising
+                    variationIDs = this.getAttribute("variation-id"); // get a list of variation SKU's to use for initialising
+                    variationSKUs = this.getAttribute("variation-sku"); // generate the decoded configurator state
+                    if (!configState) {
+                      _context11.next = 12;
+                      break;
+                    }
+                    _context11.next = 9;
+                    return configurator_state_1.ConfiguratorState.decodeState(sceneID, configState);
+                  case 9:
+                    _context11.t0 = _context11.sent;
+                    _context11.next = 15;
+                    break;
+                  case 12:
+                    _context11.next = 14;
+                    return configurator_state_1.ConfiguratorState.decodeScene(sceneID);
+                  case 14:
+                    _context11.t0 = _context11.sent;
+                  case 15:
+                    decodedState = _context11.t0;
+                    // change the ID's and SKU's (if any) of the default configuration state
+                    variationIDList = variationIDs ? variationIDs.split(",") : [];
+                    variationSKUList = variationSKUs ? variationSKUs.split(",") : [];
+                    variationIDList.forEach(function (variationID) {
+                      decodedState.state.setVariationID(variationID);
+                    });
+                    variationSKUList.forEach(function (variationSKU) {
+                      decodedState.state.setVariationSKU(variationSKU);
+                    });
+                    // return fully modified configuration state
+                    return _context11.abrupt("return", decodedState);
+                  case 21:
+                  case "end":
+                    return _context11.stop();
+                }
+              }, _callee11, this);
+            }));
+            function createConfiguratorState() {
+              return _createConfiguratorState.apply(this, arguments);
+            }
+            return createConfiguratorState;
+          }()
+          /**
+           * Setup messenger observers to detect variation changes and apply to the internal
+           * configuration state
+           */
+        }, {
+          key: "setupMessengerObservers",
+          value: function setupMessengerObservers(viewer, configState) {
+            this._selectVariationObserver = viewer.messengerInstance.observer.subscribe("selectVariation", function (cd) {
+              if (cd.type === "call") {
+                var args = cd.data[0];
+                var variations = args ? Array.isArray(args) ? args : [args] : [];
+                variations.forEach(function (variationID) {
+                  configState.state.setVariationID(variationID);
+                });
+              }
             });
+            this._selectVariationSKUObserver = viewer.messengerInstance.observer.subscribe("selectVariationSKU", function (cd) {
+              if (cd.type === "call") {
+                var args = cd.data[0];
+                var variations = args ? Array.isArray(args) ? args : [args] : [];
+                variations.forEach(function (variationSKU) {
+                  configState.state.setVariationSKU(variationSKU);
+                });
+              }
+            });
+          }
+          /**
+           * Remove all pre-existing observers
+           */
+        }, {
+          key: "removeMessengerObservers",
+          value: function removeMessengerObservers() {
+            if (this._selectVariationObserver) {
+              this._selectVariationObserver();
+              this._selectVariationObserver = null;
+            }
+            if (this._selectVariationSKUObserver) {
+              this._selectVariationSKUObserver();
+              this._selectVariationSKUObserver = null;
+            }
           }
+          /**
+           * Initialise and start AR mode if available
+           */
+        }, {
+          key: "startAR",
+          value: function () {
+            var _startAR = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
+              var launcher;
+              return _regeneratorRuntime().wrap(function _callee12$(_context12) {
+                while (1) switch (_context12.prev = _context12.next) {
+                  case 0:
+                    _context12.next = 2;
+                    return this.initAR();
+                  case 2:
+                    launcher = _context12.sent;
+                    return _context12.abrupt("return", launcher.start());
+                  case 4:
+                  case "end":
+                    return _context12.stop();
+                }
+              }, _callee12, this);
+            }));
+            function startAR() {
+              return _startAR.apply(this, arguments);
+            }
+            return startAR;
+          }()
           /**
            * Decide which QR Code to render according to the qr-type attribute
            * @param options
@@ -1335,16 +1902,31 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
            */
         }, {
           key: "startQRCode",
-          value: function startQRCode(options) {
-            var qrType = this.getAttribute("qr-type") || "viewer";
-            switch (qrType.toLowerCase()) {
-              case "ar":
-                return this.startARQRCode(options);
-              case "viewer":
-              default:
-                return this.startViewerQRCode(options);
+          value: function () {
+            var _startQRCode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13(options) {
+              var qrType;
+              return _regeneratorRuntime().wrap(function _callee13$(_context13) {
+                while (1) switch (_context13.prev = _context13.next) {
+                  case 0:
+                    qrType = this.getAttribute("qr-type") || "viewer";
+                    _context13.t0 = qrType.toLowerCase();
+                    _context13.next = _context13.t0 === "ar" ? 4 : _context13.t0 === "viewer" ? 5 : 5;
+                    break;
+                  case 4:
+                    return _context13.abrupt("return", this.startARQRCode(options));
+                  case 5:
+                    return _context13.abrupt("return", this.startViewerQRCode(options));
+                  case 6:
+                  case "end":
+                    return _context13.stop();
+                }
+              }, _callee13, this);
+            }));
+            function startQRCode(_x4) {
+              return _startQRCode.apply(this, arguments);
             }
-          }
+            return startQRCode;
+          }()
           /**
            * Displays a QR Code that sends the user direct to AR
            * @param options
@@ -1352,72 +1934,100 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
            */
         }, {
           key: "startARQRCode",
-          value: function startARQRCode(options) {
-            var _this18 = this;
-            return new Promise(function (accept, reject) {
-              // remove the old renderer instance if any
-              _this18.removeRenderer();
-              var opt = options || _this18._GetDefaultQROptions();
-              var viewer = document.createElement("plattar-qrcode");
-              // required attributes with defaults for plattar-viewer node
-              var width = _this18.getAttribute("width") || "500px";
-              var height = _this18.getAttribute("height") || "500px";
-              viewer.setAttribute("width", width);
-              viewer.setAttribute("height", height);
-              if (opt.color) {
-                viewer.setAttribute("color", opt.color);
-              }
-              if (opt.margin) {
-                viewer.setAttribute("margin", "" + opt.margin);
-              }
-              if (opt.qrType) {
-                viewer.setAttribute("qr-type", opt.qrType);
-              }
-              viewer.setAttribute("shorten", opt.shorten && (opt.shorten === true || opt.shorten === "true") ? "true" : "false");
-              var qrOptions = btoa(JSON.stringify(opt));
-              var dst = plattar_api_1.Server.location().base + "renderer/launcher.html?qr_options=" + qrOptions;
-              var sceneID = _this18.getAttribute("scene-id");
-              var configState = _this18.getAttribute("config-state");
-              var embedType = _this18.getAttribute("embed-type");
-              var productID = _this18.getAttribute("product-id");
-              var sceneProductID = _this18.getAttribute("scene-product-id");
-              var variationID = _this18.getAttribute("variation-id");
-              var variationSKU = _this18.getAttribute("variation-sku");
-              var arMode = _this18.getAttribute("ar-mode");
-              if (configState) {
-                dst += "&config_state=" + configState;
-              }
-              if (embedType) {
-                dst += "&embed_type=" + embedType;
-              }
-              if (productID) {
-                dst += "&product_id=" + productID;
-              }
-              if (sceneProductID) {
-                dst += "&scene_product_id=" + sceneProductID;
-              }
-              if (variationID) {
-                dst += "&variation_id=" + variationID;
-              }
-              if (variationSKU) {
-                dst += "&variation_sku=" + variationSKU;
-              }
-              if (arMode) {
-                dst += "&ar_mode=" + arMode;
-              }
-              if (sceneID) {
-                dst += "&scene_id=" + sceneID;
-              }
-              viewer.setAttribute("url", opt.url || dst);
-              viewer.onload = function () {
-                return accept(viewer);
-              };
-              _this18._element = viewer;
-              _this18._state = ControllerState.QRCode;
-              _this18._prevQROpt = opt;
-              _this18.append(viewer);
-            });
-          }
+          value: function () {
+            var _startARQRCode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14(options) {
+              var _this17 = this;
+              var opt, viewer, width, height, qrOptions, dst, configState, sceneID, embedType, productID, sceneProductID, variationID, variationSKU, arMode;
+              return _regeneratorRuntime().wrap(function _callee14$(_context14) {
+                while (1) switch (_context14.prev = _context14.next) {
+                  case 0:
+                    // remove the old renderer instance if any
+                    this.removeRenderer();
+                    opt = options || this._GetDefaultQROptions();
+                    viewer = document.createElement("plattar-qrcode");
+                    this._element = viewer;
+                    // required attributes with defaults for plattar-viewer node
+                    width = this.getAttribute("width") || "500px";
+                    height = this.getAttribute("height") || "500px";
+                    viewer.setAttribute("width", width);
+                    viewer.setAttribute("height", height);
+                    if (opt.color) {
+                      viewer.setAttribute("color", opt.color);
+                    }
+                    if (opt.margin) {
+                      viewer.setAttribute("margin", "" + opt.margin);
+                    }
+                    if (opt.qrType) {
+                      viewer.setAttribute("qr-type", opt.qrType);
+                    }
+                    viewer.setAttribute("shorten", opt.shorten && (opt.shorten === true || opt.shorten === "true") ? "true" : "false");
+                    qrOptions = btoa(JSON.stringify(opt));
+                    dst = plattar_api_1.Server.location().base + "renderer/launcher.html?qr_options=" + qrOptions;
+                    configState = null;
+                    sceneID = this.getAttribute("scene-id");
+                    embedType = this.getAttribute("embed-type");
+                    productID = this.getAttribute("product-id");
+                    sceneProductID = this.getAttribute("scene-product-id");
+                    variationID = this.getAttribute("variation-id");
+                    variationSKU = this.getAttribute("variation-sku");
+                    arMode = this.getAttribute("ar-mode");
+                    _context14.prev = 22;
+                    _context14.next = 25;
+                    return this.getConfiguratorState();
+                  case 25:
+                    configState = _context14.sent.state.encode();
+                    _context14.next = 31;
+                    break;
+                  case 28:
+                    _context14.prev = 28;
+                    _context14.t0 = _context14["catch"](22);
+                    // config state not available for some reason
+                    configState = null;
+                  case 31:
+                    if (configState) {
+                      dst += "&config_state=" + configState;
+                    }
+                    if (embedType) {
+                      dst += "&embed_type=" + embedType;
+                    }
+                    if (productID) {
+                      dst += "&product_id=" + productID;
+                    }
+                    if (sceneProductID) {
+                      dst += "&scene_product_id=" + sceneProductID;
+                    }
+                    if (variationID) {
+                      dst += "&variation_id=" + variationID;
+                    }
+                    if (variationSKU) {
+                      dst += "&variation_sku=" + variationSKU;
+                    }
+                    if (arMode) {
+                      dst += "&ar_mode=" + arMode;
+                    }
+                    if (sceneID) {
+                      dst += "&scene_id=" + sceneID;
+                    }
+                    viewer.setAttribute("url", opt.url || dst);
+                    this._state = ControllerState.QRCode;
+                    this._prevQROpt = opt;
+                    return _context14.abrupt("return", new Promise(function (accept, reject) {
+                      _this17.append(viewer);
+                      viewer.onload = function () {
+                        return accept(viewer);
+                      };
+                    }));
+                  case 43:
+                  case "end":
+                    return _context14.stop();
+                }
+              }, _callee14, this, [[22, 28]]);
+            }));
+            function startARQRCode(_x5) {
+              return _startARQRCode.apply(this, arguments);
+            }
+            return startARQRCode;
+          }()
           /**
            * Returns the Parent Instance
            */
@@ -1453,9 +2063,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       }();
       exports.PlattarController = PlattarController;
     }, {
+      "../../util/configurator-state": 14,
       "@plattar/plattar-api": 44
     }],
-    9: [function (require, module, exports) {
+    10: [function (require, module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1468,49 +2079,89 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       var plattar_controller_1 = require("./plattar-controller");
       /**
        * Manages an instance of the <plattar-product> HTML Element
+       *
+       * NOTE: As of 14th June 2023, this is now a legacy Controller and only used in legacy embeds
+       * and should be deprecated from both documentation and previous integrations
        */
       var ProductController = /*#__PURE__*/function (_plattar_controller_2) {
         _inherits(ProductController, _plattar_controller_2);
-        var _super7 = _createSuper(ProductController);
+        var _super8 = _createSuper(ProductController);
         function ProductController(parent) {
           _classCallCheck(this, ProductController);
-          return _super7.call(this, parent);
+          // this is a hack against DecodedConfiguratorState that's now stored in PlattarController
+          // this is not used in legacy mode
+          return _super8.call(this, parent);
         }
         _createClass(ProductController, [{
-          key: "onAttributesUpdated",
-          value: function onAttributesUpdated() {
-            var state = this._state;
-            // re-render the QR Code when attributes have changed
-            if (state === plattar_controller_1.ControllerState.QRCode) {
-              this.startQRCode(this._prevQROpt);
-              return;
+          key: "getConfiguratorState",
+          value: function () {
+            var _getConfiguratorState2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
+              return _regeneratorRuntime().wrap(function _callee15$(_context15) {
+                while (1) switch (_context15.prev = _context15.next) {
+                  case 0:
+                    throw new Error("ProductController.getConfiguratorState() - legacy embeds do not support configurator states");
+                  case 1:
+                  case "end":
+                    return _context15.stop();
+                }
+              }, _callee15);
+            }));
+            function getConfiguratorState() {
+              return _getConfiguratorState2.apply(this, arguments);
             }
-            // use the messenger function to change variation when attributes have changed
-            if (state === plattar_controller_1.ControllerState.Renderer) {
-              var viewer = this._element;
-              if (viewer) {
-                var variationID = this.getAttribute("variation-id");
-                if (variationID && viewer.messenger) {
-                  viewer.messenger.selectVariation(variationID);
+            return getConfiguratorState;
+          }()
+        }, {
+          key: "onAttributesUpdated",
+          value: function () {
+            var _onAttributesUpdated2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16(attributeName) {
+              var state, viewer, variationID;
+              return _regeneratorRuntime().wrap(function _callee16$(_context16) {
+                while (1) switch (_context16.prev = _context16.next) {
+                  case 0:
+                    state = this._state; // re-render the QR Code when attributes have changed
+                    if (!(state === plattar_controller_1.ControllerState.QRCode)) {
+                      _context16.next = 4;
+                      break;
+                    }
+                    this.startQRCode(this._prevQROpt);
+                    return _context16.abrupt("return");
+                  case 4:
+                    // use the messenger function to change variation when attributes have changed
+                    if (state === plattar_controller_1.ControllerState.Renderer) {
+                      viewer = this._element;
+                      if (viewer) {
+                        variationID = this.getAttribute("variation-id");
+                        if (variationID && viewer.messenger) {
+                          viewer.messenger.selectVariation(variationID);
+                        }
+                      }
+                    }
+                  case 5:
+                  case "end":
+                    return _context16.stop();
                 }
-              }
-              return;
+              }, _callee16, this);
+            }));
+            function onAttributesUpdated(_x6) {
+              return _onAttributesUpdated2.apply(this, arguments);
             }
-          }
+            return onAttributesUpdated;
+          }()
         }, {
           key: "startViewerQRCode",
           value: function startViewerQRCode(options) {
-            var _this19 = this;
+            var _this18 = this;
             return new Promise(function (accept, reject) {
               // remove the old renderer instance if any
-              _this19.removeRenderer();
-              var productID = _this19.getAttribute("product-id");
+              _this18.removeRenderer();
+              var productID = _this18.getAttribute("product-id");
               if (productID) {
-                var opt = options || _this19._GetDefaultQROptions();
+                var opt = options || _this18._GetDefaultQROptions();
                 var viewer = document.createElement("plattar-qrcode");
                 // required attributes with defaults for plattar-viewer node
-                var width = _this19.getAttribute("width") || "500px";
-                var height = _this19.getAttribute("height") || "500px";
+                var width = _this18.getAttribute("width") || "500px";
+                var height = _this18.getAttribute("height") || "500px";
                 viewer.setAttribute("width", width);
                 viewer.setAttribute("height", height);
                 if (opt.color) {
@@ -1524,9 +2175,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                 }
                 viewer.setAttribute("shorten", opt.shorten && (opt.shorten === true || opt.shorten === "true") ? "true" : "false");
                 // optional attributes
-                var variationID = _this19.getAttribute("variation-id");
-                var variationSKU = _this19.getAttribute("variation-sku");
-                var showAR = _this19.getAttribute("show-ar");
+                var variationID = _this18.getAttribute("variation-id");
+                var variationSKU = _this18.getAttribute("variation-sku");
+                var showAR = _this18.getAttribute("show-ar");
                 var dst = plattar_api_1.Server.location().base + "renderer/product.html?product_id=" + productID;
                 if (variationID) {
                   dst += "&variationId=" + variationID;
@@ -1541,10 +2192,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                 viewer.onload = function () {
                   return accept(viewer);
                 };
-                _this19.append(viewer);
-                _this19._element = viewer;
-                _this19._state = plattar_controller_1.ControllerState.QRCode;
-                _this19._prevQROpt = opt;
+                _this18.append(viewer);
+                _this18._element = viewer;
+                _this18._state = plattar_controller_1.ControllerState.QRCode;
+                _this18._prevQROpt = opt;
                 return;
               }
               return reject(new Error("ProductController.startQRCode() - minimum required attributes not set, use product-id as a minimum"));
@@ -1553,25 +2204,25 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "startRenderer",
           value: function startRenderer() {
-            var _this20 = this;
+            var _this19 = this;
             return new Promise(function (accept, reject) {
               // remove the old renderer instance if any
-              _this20.removeRenderer();
-              var productID = _this20.getAttribute("product-id");
+              _this19.removeRenderer();
+              var productID = _this19.getAttribute("product-id");
               if (productID) {
                 // required attributes with defaults for plattar-product node
-                var width = _this20.getAttribute("width") || "500px";
-                var height = _this20.getAttribute("height") || "500px";
-                var server = _this20.getAttribute("server") || "production";
+                var width = _this19.getAttribute("width") || "500px";
+                var height = _this19.getAttribute("height") || "500px";
+                var server = _this19.getAttribute("server") || "production";
                 var viewer = document.createElement("plattar-product");
                 viewer.setAttribute("width", width);
                 viewer.setAttribute("height", height);
                 viewer.setAttribute("server", server);
                 viewer.setAttribute("product-id", productID);
                 // optional attributes
-                var variationID = _this20.getAttribute("variation-id");
-                var variationSKU = _this20.getAttribute("variation-sku");
-                var showAR = _this20.getAttribute("show-ar");
+                var variationID = _this19.getAttribute("variation-id");
+                var variationSKU = _this19.getAttribute("variation-sku");
+                var showAR = _this19.getAttribute("show-ar");
                 if (variationID) {
                   viewer.setAttribute("variation-id", variationID);
                 }
@@ -1584,9 +2235,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                 viewer.onload = function () {
                   return accept(viewer);
                 };
-                _this20.append(viewer);
-                _this20._element = viewer;
-                _this20._state = plattar_controller_1.ControllerState.Renderer;
+                _this19.append(viewer);
+                _this19._element = viewer;
+                _this19._state = plattar_controller_1.ControllerState.Renderer;
                 return;
               }
               return reject(new Error("ProductController.startRenderer() - minimum required attributes not set, use scene-id as a minimum"));
@@ -1595,15 +2246,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "initAR",
           value: function initAR() {
-            var _this21 = this;
+            var _this20 = this;
             return new Promise(function (accept, reject) {
               if (!util_1.Util.canAugment()) {
                 return reject(new Error("ProductController.initAR() - cannot proceed as AR not available in context"));
               }
-              var productID = _this21.getAttribute("product-id");
+              var productID = _this20.getAttribute("product-id");
               if (productID) {
-                var variationID = _this21.getAttribute("variation-id");
-                var variationSKU = _this21.getAttribute("variation-sku");
+                var variationID = _this20.getAttribute("variation-id");
+                var variationSKU = _this20.getAttribute("variation-sku");
                 var product = new product_ar_1.ProductAR(productID, variationID, variationSKU);
                 return product.init().then(accept)["catch"](reject);
               }
@@ -1630,235 +2281,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       }(plattar_controller_1.PlattarController);
       exports.ProductController = ProductController;
     }, {
-      "../../ar/product-ar": 3,
+      "../../ar/product-ar": 4,
       "../../util/util": 15,
-      "./plattar-controller": 8,
-      "@plattar/plattar-api": 44
-    }],
-    10: [function (require, module, exports) {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true
-      });
-      exports.ViewerController = void 0;
-      var plattar_api_1 = require("@plattar/plattar-api");
-      var product_ar_1 = require("../../ar/product-ar");
-      var scene_ar_1 = require("../../ar/scene-ar");
-      var scene_product_ar_1 = require("../../ar/scene-product-ar");
-      var configurator_state_1 = require("../../util/configurator-state");
-      var util_1 = require("../../util/util");
-      var plattar_controller_1 = require("./plattar-controller");
-      /**
-       * Manages an instance of the <plattar-viewer> HTML Element
-       */
-      var ViewerController = /*#__PURE__*/function (_plattar_controller_3) {
-        _inherits(ViewerController, _plattar_controller_3);
-        var _super8 = _createSuper(ViewerController);
-        function ViewerController(parent) {
-          _classCallCheck(this, ViewerController);
-          return _super8.call(this, parent);
-        }
-        _createClass(ViewerController, [{
-          key: "onAttributesUpdated",
-          value: function onAttributesUpdated() {
-            var state = this._state;
-            // re-render the QR Code when attributes have changed
-            if (state === plattar_controller_1.ControllerState.QRCode) {
-              this.startQRCode(this._prevQROpt);
-              return;
-            }
-            // use the messenger function to change variation when attributes have changed
-            if (state === plattar_controller_1.ControllerState.Renderer) {
-              var viewer = this._element;
-              if (viewer) {
-                var productID = this.getAttribute("product-id") || this.getAttribute("scene-product-id");
-                var variationID = this.getAttribute("variation-id");
-                if (productID && variationID && viewer.messenger) {
-                  viewer.messenger.selectVariation(productID, variationID);
-                }
-              }
-              return;
-            }
-          }
-        }, {
-          key: "startViewerQRCode",
-          value: function startViewerQRCode(options) {
-            var _this22 = this;
-            return new Promise(function (accept, reject) {
-              // remove the old renderer instance if any
-              _this22.removeRenderer();
-              var sceneID = _this22.getAttribute("scene-id");
-              if (sceneID) {
-                var opt = options || _this22._GetDefaultQROptions();
-                var viewer = document.createElement("plattar-qrcode");
-                // required attributes with defaults for plattar-viewer node
-                var width = _this22.getAttribute("width") || "500px";
-                var height = _this22.getAttribute("height") || "500px";
-                viewer.setAttribute("width", width);
-                viewer.setAttribute("height", height);
-                if (opt.color) {
-                  viewer.setAttribute("color", opt.color);
-                }
-                if (opt.margin) {
-                  viewer.setAttribute("margin", "" + opt.margin);
-                }
-                if (opt.qrType) {
-                  viewer.setAttribute("qr-type", opt.qrType);
-                }
-                viewer.setAttribute("shorten", opt.shorten && (opt.shorten === true || opt.shorten === "true") ? "true" : "false");
-                var dst = plattar_api_1.Server.location().base + "renderer/viewer.html?scene_id=" + sceneID;
-                // optional attributes
-                var productID = _this22.getAttribute("product-id") || _this22.getAttribute("scene-product-id");
-                var variationID = _this22.getAttribute("variation-id");
-                var variationSKU = _this22.getAttribute("variation-sku");
-                var showAR = _this22.getAttribute("show-ar");
-                if (productID) {
-                  dst += "&productId=" + productID;
-                }
-                if (variationID) {
-                  dst += "&variationId=" + variationID;
-                }
-                if (variationSKU) {
-                  dst += "&variationSku=" + variationSKU;
-                }
-                if (showAR) {
-                  dst += "&show_ar=" + showAR;
-                }
-                viewer.setAttribute("url", opt.url || dst);
-                viewer.onload = function () {
-                  return accept(viewer);
-                };
-                _this22.append(viewer);
-                _this22._element = viewer;
-                _this22._state = plattar_controller_1.ControllerState.QRCode;
-                _this22._prevQROpt = opt;
-                return;
-              }
-              return reject(new Error("ViewerController.startQRCode() - minimum required attributes not set, use scene-id as a minimum"));
-            });
-          }
-        }, {
-          key: "startRenderer",
-          value: function startRenderer() {
-            var _this23 = this;
-            return new Promise(function (accept, reject) {
-              // remove the old renderer instance if any
-              _this23.removeRenderer();
-              var sceneID = _this23.getAttribute("scene-id");
-              if (sceneID) {
-                // required attributes with defaults for plattar-viewer node
-                var width = _this23.getAttribute("width") || "500px";
-                var height = _this23.getAttribute("height") || "500px";
-                var server = _this23.getAttribute("server") || "production";
-                var viewer = document.createElement("plattar-viewer");
-                viewer.setAttribute("width", width);
-                viewer.setAttribute("height", height);
-                viewer.setAttribute("server", server);
-                viewer.setAttribute("scene-id", sceneID);
-                // optional attributes
-                var productID = _this23.getAttribute("product-id") || _this23.getAttribute("scene-product-id");
-                var variationID = _this23.getAttribute("variation-id");
-                var variationSKU = _this23.getAttribute("variation-sku");
-                var showAR = _this23.getAttribute("show-ar");
-                if (productID) {
-                  viewer.setAttribute("product-id", productID);
-                }
-                if (variationID) {
-                  viewer.setAttribute("variation-id", variationID);
-                }
-                if (variationSKU) {
-                  viewer.setAttribute("variation-sku", variationSKU);
-                }
-                if (showAR) {
-                  viewer.setAttribute("show-ar", showAR);
-                }
-                viewer.onload = function () {
-                  return accept(viewer);
-                };
-                _this23.append(viewer);
-                _this23._element = viewer;
-                _this23._state = plattar_controller_1.ControllerState.Renderer;
-                return;
-              }
-              return reject(new Error("ViewerController.startRenderer() - minimum required attributes not set, use scene-id as a minimum"));
-            });
-          }
-        }, {
-          key: "initAR",
-          value: function initAR() {
-            var _this24 = this;
-            return new Promise(function (accept, reject) {
-              if (!util_1.Util.canAugment()) {
-                return reject(new Error("ViewerController.initAR() - cannot proceed as AR not available in context"));
-              }
-              var productID = _this24.getAttribute("product-id");
-              // use product-id if available
-              if (productID) {
-                var variationID = _this24.getAttribute("variation-id");
-                var variationSKU = _this24.getAttribute("variation-sku");
-                var product = new product_ar_1.ProductAR(productID, variationID, variationSKU);
-                return product.init().then(accept)["catch"](reject);
-              }
-              var sceneProductID = _this24.getAttribute("scene-product-id");
-              // use scene-product-id if available
-              if (sceneProductID) {
-                var _variationID = _this24.getAttribute("variation-id");
-                var _variationSKU = _this24.getAttribute("variation-sku");
-                var _product = new scene_product_ar_1.SceneProductAR(sceneProductID, _variationID, _variationSKU);
-                return _product.init().then(accept)["catch"](reject);
-              }
-              var sceneID = _this24.getAttribute("scene-id");
-              // fallback to using default SceneAR implementation
-              if (sceneID) {
-                // special case - check if scene only has a single product, if so
-                // we need to use provided variation-id or variation-sku to override
-                var _variationID2 = _this24.getAttribute("variation-id");
-                var _variationSKU2 = _this24.getAttribute("variation-sku");
-                // just do scene-ar if variation ID and variation SKU is not set
-                if (!_variationID2 && !_variationSKU2) {
-                  var sceneAR = new scene_ar_1.SceneAR(sceneID);
-                  return sceneAR.init().then(accept)["catch"](reject);
-                }
-                // otherwise decode scene
-                return configurator_state_1.ConfiguratorState.decodeScene(sceneID).then(function (state) {
-                  var firstProduct = state.first();
-                  if (state.length > 1 || !firstProduct) {
-                    return reject(new Error("ViewerController.initAR() - single product required to override variation-id or variation-sku"));
-                  }
-                  var product = new scene_product_ar_1.SceneProductAR(firstProduct.scene_product_id, _variationID2, _variationSKU2);
-                  return product.init().then(accept)["catch"](reject);
-                })["catch"](reject);
-              }
-              return reject(new Error("ViewerController.initAR() - minimum required attributes not set, use scene-id as a minimum"));
-            });
-          }
-        }, {
-          key: "removeRenderer",
-          value: function removeRenderer() {
-            if (this._element) {
-              this._element.remove();
-              this._element = null;
-              return true;
-            }
-            return false;
-          }
-        }, {
-          key: "element",
-          get: function get() {
-            return this._element;
-          }
-        }]);
-        return ViewerController;
-      }(plattar_controller_1.PlattarController);
-      exports.ViewerController = ViewerController;
-    }, {
-      "../../ar/product-ar": 3,
-      "../../ar/scene-ar": 5,
-      "../../ar/scene-product-ar": 6,
-      "../../util/configurator-state": 14,
-      "../../util/util": 15,
-      "./plattar-controller": 8,
+      "./plattar-controller": 9,
       "@plattar/plattar-api": 44
     }],
     11: [function (require, module, exports) {
@@ -1869,253 +2294,428 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       });
       exports.VTOController = void 0;
       var plattar_api_1 = require("@plattar/plattar-api");
-      var plattar_services_1 = require("@plattar/plattar-services");
       var __1 = require("../..");
-      var raw_ar_1 = require("../../ar/raw-ar");
       var util_1 = require("../../util/util");
       var plattar_controller_1 = require("./plattar-controller");
+      var configurator_ar_1 = require("../../ar/configurator-ar");
       /**
        * Manages an instance of the <plattar-configurator> HTML Element
        */
-      var VTOController = /*#__PURE__*/function (_plattar_controller_4) {
-        _inherits(VTOController, _plattar_controller_4);
+      var VTOController = /*#__PURE__*/function (_plattar_controller_3) {
+        _inherits(VTOController, _plattar_controller_3);
         var _super9 = _createSuper(VTOController);
-        function VTOController(parent) {
+        function VTOController() {
+          var _this21;
           _classCallCheck(this, VTOController);
-          return _super9.call(this, parent);
+          _this21 = _super9.apply(this, arguments);
+          _this21._cachedConfigState = null;
+          return _this21;
         }
         _createClass(VTOController, [{
+          key: "getConfiguratorState",
+          value: function () {
+            var _getConfiguratorState3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
+              return _regeneratorRuntime().wrap(function _callee17$(_context17) {
+                while (1) switch (_context17.prev = _context17.next) {
+                  case 0:
+                    if (!this._cachedConfigState) {
+                      _context17.next = 2;
+                      break;
+                    }
+                    return _context17.abrupt("return", this._cachedConfigState);
+                  case 2:
+                    this._cachedConfigState = this.createConfiguratorState();
+                    return _context17.abrupt("return", this._cachedConfigState);
+                  case 4:
+                  case "end":
+                    return _context17.stop();
+                }
+              }, _callee17, this);
+            }));
+            function getConfiguratorState() {
+              return _getConfiguratorState3.apply(this, arguments);
+            }
+            return getConfiguratorState;
+          }()
+        }, {
           key: "onAttributesUpdated",
-          value: function onAttributesUpdated() {
-            var state = this._state;
-            // re-render the QR Code when attributes have changed
-            if (state === plattar_controller_1.ControllerState.QRCode) {
-              this.startQRCode(this._prevQROpt);
-              return;
+          value: function () {
+            var _onAttributesUpdated3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee18(attributeName) {
+              var state, viewer, variationIDs, variationIDsList, variationSKUs, variationSKUList, configState, _variationIDs2, _variationIDsList2, _configState2, _variationSKUs2, _variationSKUList2;
+              return _regeneratorRuntime().wrap(function _callee18$(_context18) {
+                while (1) switch (_context18.prev = _context18.next) {
+                  case 0:
+                    state = this._state;
+                    if (!(state === plattar_controller_1.ControllerState.Renderer)) {
+                      _context18.next = 17;
+                      break;
+                    }
+                    viewer = this.element;
+                    if (!viewer) {
+                      _context18.next = 16;
+                      break;
+                    }
+                    if (!(attributeName === "variation-id")) {
+                      _context18.next = 10;
+                      break;
+                    }
+                    variationIDs = this.getAttribute("variation-id");
+                    variationIDsList = variationIDs ? variationIDs.split(",") : [];
+                    if (!(variationIDsList.length > 0)) {
+                      _context18.next = 10;
+                      break;
+                    }
+                    _context18.next = 10;
+                    return viewer.messenger.selectVariationID(variationIDsList);
+                  case 10:
+                    if (!(attributeName === "variation-sku")) {
+                      _context18.next = 16;
+                      break;
+                    }
+                    variationSKUs = this.getAttribute("variation-sku");
+                    variationSKUList = variationSKUs ? variationSKUs.split(",") : [];
+                    if (!(variationSKUList.length > 0)) {
+                      _context18.next = 16;
+                      break;
+                    }
+                    _context18.next = 16;
+                    return viewer.messenger.selectVariationSKU(variationSKUList);
+                  case 16:
+                    return _context18.abrupt("return");
+                  case 17:
+                    if (!(state === plattar_controller_1.ControllerState.QRCode)) {
+                      _context18.next = 34;
+                      break;
+                    }
+                    if (!(attributeName === "variation-id")) {
+                      _context18.next = 25;
+                      break;
+                    }
+                    _context18.next = 21;
+                    return this.getConfiguratorState();
+                  case 21:
+                    configState = _context18.sent;
+                    _variationIDs2 = this.getAttribute("variation-id");
+                    _variationIDsList2 = _variationIDs2 ? _variationIDs2.split(",") : [];
+                    _variationIDsList2.forEach(function (variationID) {
+                      configState.state.setVariationID(variationID);
+                    });
+                  case 25:
+                    if (!(attributeName === "variation-sku")) {
+                      _context18.next = 32;
+                      break;
+                    }
+                    _context18.next = 28;
+                    return this.getConfiguratorState();
+                  case 28:
+                    _configState2 = _context18.sent;
+                    _variationSKUs2 = this.getAttribute("variation-sku");
+                    _variationSKUList2 = _variationSKUs2 ? _variationSKUs2.split(",") : [];
+                    _variationSKUList2.forEach(function (variationSKU) {
+                      _configState2.state.setVariationSKU(variationSKU);
+                    });
+                  case 32:
+                    this.startQRCode(this._prevQROpt);
+                    return _context18.abrupt("return");
+                  case 34:
+                  case "end":
+                    return _context18.stop();
+                }
+              }, _callee18, this);
+            }));
+            function onAttributesUpdated(_x7) {
+              return _onAttributesUpdated3.apply(this, arguments);
             }
-          }
+            return onAttributesUpdated;
+          }()
         }, {
           key: "startViewerQRCode",
-          value: function startViewerQRCode(options) {
-            var _this25 = this;
-            return new Promise(function (accept, reject) {
-              // remove the old renderer instance if any
-              _this25.removeRenderer();
-              var sceneID = _this25.getAttribute("scene-id");
-              if (sceneID) {
-                var opt = options || _this25._GetDefaultQROptions();
-                var viewer = document.createElement("plattar-qrcode");
-                // required attributes with defaults for plattar-viewer node
-                var width = _this25.getAttribute("width") || "500px";
-                var height = _this25.getAttribute("height") || "500px";
-                viewer.setAttribute("width", width);
-                viewer.setAttribute("height", height);
-                if (opt.color) {
-                  viewer.setAttribute("color", opt.color);
-                }
-                if (opt.margin) {
-                  viewer.setAttribute("margin", "" + opt.margin);
-                }
-                if (opt.qrType) {
-                  viewer.setAttribute("qr-type", opt.qrType);
-                }
-                viewer.setAttribute("shorten", opt.shorten && (opt.shorten === true || opt.shorten === "true") ? "true" : "false");
-                var dst = plattar_api_1.Server.location().base + "renderer/facear.html?scene_id=" + sceneID;
-                // optional attributes
-                var configState = _this25.getAttribute("config-state");
-                var showAR = _this25.getAttribute("show-ar");
-                var productID = _this25.getAttribute("product-id");
-                var sceneProductID = _this25.getAttribute("scene-product-id");
-                var variationID = _this25.getAttribute("variation-id");
-                if (configState) {
-                  dst += "&config_state=" + configState;
-                }
-                if (showAR) {
-                  dst += "&show_ar=" + showAR;
-                }
-                if (productID) {
-                  dst += "&product_id=" + productID;
-                }
-                if (sceneProductID) {
-                  dst += "&scene_product_id=" + sceneProductID;
-                }
-                if (variationID) {
-                  dst += "&variation_id=" + variationID;
+          value: function () {
+            var _startViewerQRCode2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee19(options) {
+              var _this22 = this;
+              var sceneID, opt, viewer, width, height, dst, configState, showAR, productID, sceneProductID, variationID;
+              return _regeneratorRuntime().wrap(function _callee19$(_context19) {
+                while (1) switch (_context19.prev = _context19.next) {
+                  case 0:
+                    // remove the old renderer instance if any
+                    this.removeRenderer();
+                    sceneID = this.getAttribute("scene-id");
+                    if (sceneID) {
+                      _context19.next = 4;
+                      break;
+                    }
+                    throw new Error("VTOController.startQRCode() - minimum required attributes not set, use scene-id as a minimum");
+                  case 4:
+                    opt = options || this._GetDefaultQROptions();
+                    viewer = document.createElement("plattar-qrcode");
+                    this._element = viewer;
+                    // required attributes with defaults for plattar-viewer node
+                    width = this.getAttribute("width") || "500px";
+                    height = this.getAttribute("height") || "500px";
+                    viewer.setAttribute("width", width);
+                    viewer.setAttribute("height", height);
+                    if (opt.color) {
+                      viewer.setAttribute("color", opt.color);
+                    }
+                    if (opt.margin) {
+                      viewer.setAttribute("margin", "" + opt.margin);
+                    }
+                    if (opt.qrType) {
+                      viewer.setAttribute("qr-type", opt.qrType);
+                    }
+                    viewer.setAttribute("shorten", opt.shorten && (opt.shorten === true || opt.shorten === "true") ? "true" : "false");
+                    dst = plattar_api_1.Server.location().base + "renderer/facear.html?scene_id=" + sceneID; // optional attributes
+                    configState = null;
+                    _context19.prev = 17;
+                    _context19.next = 20;
+                    return this.getConfiguratorState();
+                  case 20:
+                    configState = _context19.sent;
+                    _context19.next = 26;
+                    break;
+                  case 23:
+                    _context19.prev = 23;
+                    _context19.t0 = _context19["catch"](17);
+                    // config state is not available
+                    configState = null;
+                  case 26:
+                    showAR = this.getAttribute("show-ar");
+                    productID = this.getAttribute("product-id");
+                    sceneProductID = this.getAttribute("scene-product-id");
+                    variationID = this.getAttribute("variation-id");
+                    if (configState) {
+                      dst += "&config_state=" + configState.state.encode();
+                    }
+                    if (showAR) {
+                      dst += "&show_ar=" + showAR;
+                    }
+                    if (productID) {
+                      dst += "&product_id=" + productID;
+                    }
+                    if (sceneProductID) {
+                      dst += "&scene_product_id=" + sceneProductID;
+                    }
+                    if (variationID) {
+                      dst += "&variation_id=" + variationID;
+                    }
+                    viewer.setAttribute("url", opt.url || dst);
+                    this._state = plattar_controller_1.ControllerState.QRCode;
+                    this._prevQROpt = opt;
+                    return _context19.abrupt("return", new Promise(function (accept, reject) {
+                      viewer.onload = function () {
+                        return accept(viewer);
+                      };
+                      _this22.append(viewer);
+                    }));
+                  case 39:
+                  case "end":
+                    return _context19.stop();
                 }
-                viewer.setAttribute("url", opt.url || dst);
-                viewer.onload = function () {
-                  return accept(viewer);
-                };
-                _this25.append(viewer);
-                _this25._element = viewer;
-                _this25._state = plattar_controller_1.ControllerState.QRCode;
-                _this25._prevQROpt = opt;
-                return;
-              }
-              return reject(new Error("VTOController.startQRCode() - minimum required attributes not set, use scene-id as a minimum"));
-            });
-          }
+              }, _callee19, this, [[17, 23]]);
+            }));
+            function startViewerQRCode(_x8) {
+              return _startViewerQRCode2.apply(this, arguments);
+            }
+            return startViewerQRCode;
+          }()
         }, {
           key: "startRenderer",
-          value: function startRenderer() {
-            var _this26 = this;
-            return new Promise(function (accept, reject) {
-              // remove the old renderer instance if any
-              _this26.removeRenderer();
-              var sceneID = _this26.getAttribute("scene-id");
-              if (sceneID) {
-                // required attributes with defaults for plattar-facear node
-                var width = _this26.getAttribute("width") || "500px";
-                var height = _this26.getAttribute("height") || "500px";
-                var server = _this26.getAttribute("server") || "production";
-                var viewer = document.createElement("plattar-facear");
-                viewer.setAttribute("width", width);
-                viewer.setAttribute("height", height);
-                viewer.setAttribute("server", server);
-                viewer.setAttribute("scene-id", sceneID);
-                // optional attributes
-                var configState = _this26.getAttribute("config-state");
-                var showAR = _this26.getAttribute("show-ar");
-                var productID = _this26.getAttribute("product-id");
-                var sceneProductID = _this26.getAttribute("scene-product-id");
-                var variationID = _this26.getAttribute("variation-id");
-                if (configState) {
-                  viewer.setAttribute("config-state", configState);
-                }
-                if (showAR) {
-                  viewer.setAttribute("show-ar", showAR);
-                }
-                if (productID) {
-                  viewer.setAttribute("product-id", productID);
-                }
-                if (sceneProductID) {
-                  viewer.setAttribute("scene-product-id", sceneProductID);
-                }
-                if (variationID) {
-                  viewer.setAttribute("variation-id", variationID);
-                }
-                viewer.onload = function () {
-                  return accept(viewer);
-                };
-                _this26.append(viewer);
-                _this26._element = viewer;
-                _this26._state = plattar_controller_1.ControllerState.Renderer;
-                return;
-              }
-              return reject(new Error("VTOController.startRenderer() - minimum required attributes not set, use scene-id as a minimum"));
-            });
-          }
+          value: function () {
+            var _startRenderer2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
+              var _this23 = this;
+              var sceneID, width, height, server, viewer, configState, showAR, productID, sceneProductID, variationID;
+              return _regeneratorRuntime().wrap(function _callee20$(_context20) {
+                while (1) switch (_context20.prev = _context20.next) {
+                  case 0:
+                    // remove the old renderer instance if any
+                    this.removeRenderer();
+                    sceneID = this.getAttribute("scene-id");
+                    if (sceneID) {
+                      _context20.next = 4;
+                      break;
+                    }
+                    throw new Error("VTOController.startRenderer() - minimum required attributes not set, use scene-id as a minimum");
+                  case 4:
+                    // required attributes with defaults for plattar-facear node
+                    width = this.getAttribute("width") || "500px";
+                    height = this.getAttribute("height") || "500px";
+                    server = this.getAttribute("server") || "production";
+                    viewer = document.createElement("plattar-facear");
+                    this._element = viewer;
+                    viewer.setAttribute("width", width);
+                    viewer.setAttribute("height", height);
+                    viewer.setAttribute("server", server);
+                    viewer.setAttribute("scene-id", sceneID);
+                    // optional attributes
+                    configState = null;
+                    _context20.prev = 14;
+                    _context20.next = 17;
+                    return this.getConfiguratorState();
+                  case 17:
+                    configState = _context20.sent;
+                    _context20.next = 23;
+                    break;
+                  case 20:
+                    _context20.prev = 20;
+                    _context20.t0 = _context20["catch"](14);
+                    // config state not available
+                    configState = null;
+                  case 23:
+                    showAR = this.getAttribute("show-ar");
+                    productID = this.getAttribute("product-id");
+                    sceneProductID = this.getAttribute("scene-product-id");
+                    variationID = this.getAttribute("variation-id");
+                    if (configState) {
+                      viewer.setAttribute("config-state", configState.state.encode());
+                    }
+                    if (showAR) {
+                      viewer.setAttribute("show-ar", showAR);
+                    }
+                    if (productID) {
+                      viewer.setAttribute("product-id", productID);
+                    }
+                    if (sceneProductID) {
+                      viewer.setAttribute("scene-product-id", sceneProductID);
+                    }
+                    if (variationID) {
+                      viewer.setAttribute("variation-id", variationID);
+                    }
+                    this._state = plattar_controller_1.ControllerState.Renderer;
+                    return _context20.abrupt("return", new Promise(function (accept, reject) {
+                      _this23.append(viewer);
+                      if (configState) {
+                        _this23.setupMessengerObservers(viewer, configState);
+                      }
+                      return accept(viewer);
+                    }));
+                  case 34:
+                  case "end":
+                    return _context20.stop();
+                }
+              }, _callee20, this, [[14, 20]]);
+            }));
+            function startRenderer() {
+              return _startRenderer2.apply(this, arguments);
+            }
+            return startRenderer;
+          }()
         }, {
           key: "initAR",
-          value: function initAR() {
-            var _this27 = this;
-            return new Promise(function (accept, reject) {
-              if (!util_1.Util.canAugment()) {
-                return reject(new Error("VTOController.initAR() - cannot proceed as VTO AR not available in context"));
-              }
-              if (!(util_1.Util.isSafari() || util_1.Util.isChromeOnIOS())) {
-                return reject(new Error("VTOController.initAR() - cannot proceed as VTO AR only available on IOS Mobile devices"));
-              }
-              var arMode = _this27.getAttribute("ar-mode") || "generated";
-              switch (arMode.toLowerCase()) {
-                case "inherited":
-                  _this27._InitARInherited(accept, reject);
-                  return;
-                case "generated":
-                default:
-                  _this27._InitARGenerated(accept, reject);
-              }
-            });
-          }
+          value: function () {
+            var _initAR2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
+              var arMode;
+              return _regeneratorRuntime().wrap(function _callee21$(_context21) {
+                while (1) switch (_context21.prev = _context21.next) {
+                  case 0:
+                    if (util_1.Util.canAugment()) {
+                      _context21.next = 2;
+                      break;
+                    }
+                    throw new Error("VTOController.initAR() - cannot proceed as VTO AR not available in context");
+                  case 2:
+                    if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
+                      _context21.next = 4;
+                      break;
+                    }
+                    throw new Error("VTOController.initAR() - cannot proceed as VTO AR only available on IOS Mobile devices");
+                  case 4:
+                    arMode = this.getAttribute("ar-mode") || "generated";
+                    _context21.t0 = arMode.toLowerCase();
+                    _context21.next = _context21.t0 === "inherited" ? 8 : _context21.t0 === "generated" ? 9 : 9;
+                    break;
+                  case 8:
+                    return _context21.abrupt("return", this._InitARInherited());
+                  case 9:
+                    return _context21.abrupt("return", this._InitARGenerated());
+                  case 10:
+                  case "end":
+                    return _context21.stop();
+                }
+              }, _callee21, this);
+            }));
+            function initAR() {
+              return _initAR2.apply(this, arguments);
+            }
+            return initAR;
+          }()
           /**
            * Private Function - This launches the Static/Inherited AR Mode
            */
         }, {
           key: "_InitARInherited",
-          value: function _InitARInherited(accept, reject) {
-            var sceneID = this.getAttribute("scene-id");
-            var configState = this.getAttribute("config-state");
-            // use config-state if its available
-            if (sceneID && configState) {
-              var state = __1.ConfiguratorState.decode(configState);
-              var first = state.first();
-              if (first) {
-                var sceneProductAR = new __1.SceneProductAR(first.scene_product_id, first.product_variation_id);
-                sceneProductAR.init().then(accept)["catch"](reject);
-                return;
-              }
-              return reject(new Error("VTOController.initAR() - invalid config-state does not have any product states"));
-            }
-            // otherwise fallback to using scene
-            if (sceneID) {
-              __1.ConfiguratorState.decodeScene(sceneID).then(function (state) {
-                var first = state.first();
-                if (first) {
-                  var _sceneProductAR2 = new __1.SceneProductAR(first.scene_product_id, first.product_variation_id);
-                  return _sceneProductAR2.init().then(accept)["catch"](reject);
+          value: function () {
+            var _InitARInherited3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
+              var sceneID, state, first, sceneProductAR;
+              return _regeneratorRuntime().wrap(function _callee22$(_context22) {
+                while (1) switch (_context22.prev = _context22.next) {
+                  case 0:
+                    sceneID = this.getAttribute("scene-id");
+                    if (sceneID) {
+                      _context22.next = 3;
+                      break;
+                    }
+                    throw new Error("VTOController.initAR() - inherited AR minimum required attributes not set, use scene-id as a minimum");
+                  case 3:
+                    _context22.next = 5;
+                    return this.getConfiguratorState();
+                  case 5:
+                    state = _context22.sent.state;
+                    first = state.first();
+                    if (!first) {
+                      _context22.next = 10;
+                      break;
+                    }
+                    sceneProductAR = new __1.SceneProductAR(first.scene_product_id, first.product_variation_id);
+                    return _context22.abrupt("return", sceneProductAR.init());
+                  case 10:
+                    throw new Error("VTOController.initAR() - invalid decoded config-state does not have any product states");
+                  case 11:
+                  case "end":
+                    return _context22.stop();
                 }
-                return reject(new Error("VTOController.initAR() - invalid Scene does not have any product states"));
-              })["catch"](reject);
-              return;
+              }, _callee22, this);
+            }));
+            function _InitARInherited() {
+              return _InitARInherited3.apply(this, arguments);
             }
-            return reject(new Error("VTOController.initAR() - minimum required attributes not set, use scene-id as a minimum"));
-          }
+            return _InitARInherited;
+          }()
           /**
            * Private Function - This launches the Dynamic/Generated AR Mode
            */
         }, {
           key: "_InitARGenerated",
-          value: function _InitARGenerated(accept, reject) {
-            // if scene ID is available and the state is a configurator viewer
-            // we can use the real-time configurator state to launch the AR view
-            var viewer = this.element;
-            var sceneID = this.getAttribute("scene-id");
-            if (viewer && sceneID && viewer.messenger) {
-              viewer.messenger.getARFile("vto").then(function (result) {
-                var rawAR = new raw_ar_1.RawAR(result.filename);
-                return rawAR.init().then(accept)["catch"](reject);
-              })["catch"](reject);
-              return;
-            }
-            var configState = this.getAttribute("config-state");
-            // otherwise scene ID is available to the viewer is not launched
-            // we can use the static configuration state to launch the AR view
-            if (sceneID && configState) {
-              var state = __1.ConfiguratorState.decode(configState);
-              if (state.length > 0) {
-                var server = this.getAttribute("server") || "production";
-                var configurator = new plattar_services_1.Configurator();
-                configurator.server = server;
-                configurator.output = "vto";
-                state.forEach(function (productState) {
-                  if (productState.meta_data.augment === true) {
-                    configurator.addSceneProduct(productState.scene_product_id, productState.product_variation_id);
-                  }
-                });
-                configurator.get().then(function (result) {
-                  var rawAR = new raw_ar_1.RawAR(result.filename);
-                  rawAR.init().then(accept)["catch"](reject);
-                })["catch"](reject);
-                return;
-              }
-              return reject(new Error("VTOController.initAR() - invalid config-state does not have any product states"));
-            }
-            // otherwise no config-state or viewer is active
-            // fallback to using default SceneAR implementation
-            if (sceneID) {
-              var productID = this.getAttribute("product-id");
-              var sceneProductID = this.getAttribute("scene-product-id");
-              var variationID = this.getAttribute("variation-id");
-              var sceneAR = new __1.SceneAR(sceneID, {
-                productID: productID ? productID : undefined,
-                sceneProductID: sceneProductID ? sceneProductID : undefined,
-                variationID: variationID ? variationID : undefined
-              });
-              sceneAR.init().then(accept)["catch"](reject);
-              return;
+          value: function () {
+            var _InitARGenerated3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
+              var sceneID, configAR;
+              return _regeneratorRuntime().wrap(function _callee23$(_context23) {
+                while (1) switch (_context23.prev = _context23.next) {
+                  case 0:
+                    sceneID = this.getAttribute("scene-id");
+                    if (sceneID) {
+                      _context23.next = 3;
+                      break;
+                    }
+                    throw new Error("VTOController.initAR() - generated AR minimum required attributes not set, use scene-id as a minimum");
+                  case 3:
+                    _context23.t0 = configurator_ar_1.ConfiguratorAR;
+                    _context23.next = 6;
+                    return this.getConfiguratorState();
+                  case 6:
+                    _context23.t1 = _context23.sent;
+                    configAR = new _context23.t0(_context23.t1);
+                    return _context23.abrupt("return", configAR.init());
+                  case 9:
+                  case "end":
+                    return _context23.stop();
+                }
+              }, _callee23, this);
+            }));
+            function _InitARGenerated() {
+              return _InitARGenerated3.apply(this, arguments);
             }
-            return reject(new Error("VTOController.initAR() - minimum required attributes not set, use scene-id as a minimum"));
-          }
+            return _InitARGenerated;
+          }()
         }, {
           key: "removeRenderer",
           value: function removeRenderer() {
@@ -2124,6 +2724,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               this._element = null;
               return true;
             }
+            this.removeMessengerObservers();
             return false;
           }
         }, {
@@ -2137,11 +2738,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       exports.VTOController = VTOController;
     }, {
       "../..": 13,
-      "../../ar/raw-ar": 4,
+      "../../ar/configurator-ar": 1,
       "../../util/util": 15,
-      "./plattar-controller": 8,
-      "@plattar/plattar-api": 44,
-      "@plattar/plattar-services": 115
+      "./plattar-controller": 9,
+      "@plattar/plattar-api": 44
     }],
     12: [function (require, module, exports) {
       "use strict";
@@ -2150,18 +2750,18 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         value: true
       });
       var plattar_api_1 = require("@plattar/plattar-api");
-      var product_controller_1 = require("./controllers/product-controller");
-      var viewer_controller_1 = require("./controllers/viewer-controller");
       var configurator_controller_1 = require("./controllers/configurator-controller");
       var vto_controller_1 = require("./controllers/vto-controller");
+      var product_controller_1 = require("./controllers/product-controller");
       /**
        * This tracks the current embed type
        */
       var EmbedType;
       (function (EmbedType) {
-        EmbedType[EmbedType["Viewer"] = 0] = "Viewer";
-        EmbedType[EmbedType["Configurator"] = 1] = "Configurator";
+        EmbedType[EmbedType["Configurator"] = 0] = "Configurator";
+        EmbedType[EmbedType["Legacy"] = 1] = "Legacy";
         EmbedType[EmbedType["VTO"] = 2] = "VTO";
+        EmbedType[EmbedType["None"] = 3] = "None";
       })(EmbedType || (EmbedType = {}));
       /**
        * This is the primary <plattar-embed /> node that allows easy embedding
@@ -2171,132 +2771,250 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         _inherits(PlattarEmbed, _HTMLElement);
         var _super10 = _createSuper(PlattarEmbed);
         function PlattarEmbed() {
-          var _this28;
+          var _this24;
           _classCallCheck(this, PlattarEmbed);
-          _this28 = _super10.call(this);
+          _this24 = _super10.call(this);
           // this is the current embed type, viewer by default
-          _this28._currentType = EmbedType.Viewer;
-          _this28._controller = null;
-          return _this28;
+          _this24._currentType = EmbedType.None;
+          _this24._controller = null;
+          _this24._currentSceneID = null;
+          _this24._observer = null;
+          return _this24;
         }
         _createClass(PlattarEmbed, [{
           key: "viewer",
           get: function get() {
             return this._controller ? this._controller.element : null;
           }
+          /**
+           * Begin observing all changes to this DOM element
+           */
         }, {
           key: "connectedCallback",
           value: function connectedCallback() {
-            var _this29 = this;
-            var embedType = this.hasAttribute("embed-type") ? this.getAttribute("embed-type") : "viewer";
+            this.create();
+          }
+          /**
+           * creates a brand new instance of this embed
+           */
+        }, {
+          key: "create",
+          value: function create() {
+            var _this25 = this;
+            // server cannot be changed once its set - defaults to production
+            var server = this.hasAttribute("server") ? this.getAttribute("server") : "production";
+            plattar_api_1.Server.create(plattar_api_1.Server.match(server || "production"));
+            if (!this._observer) {
+              this._observer = new MutationObserver(function (mutations) {
+                mutations.forEach(function (mutation) {
+                  if (mutation.type === "attributes") {
+                    var attributeName = mutation.attributeName ? mutation.attributeName : "none";
+                    if (_this25._currentType !== EmbedType.Legacy) {
+                      _this25._CreateEmbed(attributeName);
+                    } else {
+                      _this25._OnAttributesUpdated(attributeName);
+                    }
+                  }
+                });
+              });
+              this._observer.observe(this, {
+                attributes: true
+              });
+            }
+            var sceneID = this.hasAttribute("scene-id") ? this.getAttribute("scene-id") : null;
+            var productID = this.hasAttribute("product-id") ? this.getAttribute("product-id") : null;
+            if (!sceneID && productID) {
+              this._currentType = EmbedType.Legacy;
+              this._CreateLegacyEmbed();
+              return;
+            }
+            this._CreateEmbed("none");
+          }
+          /**
+           * Destroys the active instance of this embed and resets internal state to default
+           */
+        }, {
+          key: "destroy",
+          value: function destroy() {
+            if (this._controller) {
+              this._controller.removeRenderer();
+              this._controller = null;
+            }
+            this._currentType = EmbedType.None;
+          }
+          /**
+           * this is only used for backwards-compatible legacy embed types typically
+           * embedding products with variations (without a scene-id)
+           */
+        }, {
+          key: "_CreateLegacyEmbed",
+          value: function _CreateLegacyEmbed() {
+            this._controller = new product_controller_1.ProductController(this);
+          }
+          /**
+           * creates the embed
+           * this can also be called when attributes/state changes so embeds can be re-loaded
+           */
+        }, {
+          key: "_CreateEmbed",
+          value: function _CreateEmbed(attributeName) {
+            var embedType = this.hasAttribute("embed-type") ? this.getAttribute("embed-type") : "configurator";
+            var currentEmbed = this._currentType;
             if (embedType) {
               switch (embedType.toLowerCase()) {
-                case "viewer":
-                  this._currentType = EmbedType.Viewer;
-                  break;
                 case "vto":
                   this._currentType = EmbedType.VTO;
                   break;
+                case "viewer":
                 case "configurator":
-                  this._currentType = EmbedType.Configurator;
-                  break;
                 default:
-                  this._currentType = EmbedType.Viewer;
+                  this._currentType = EmbedType.Configurator;
               }
             }
-            var observer = new MutationObserver(function (mutations) {
-              mutations.forEach(function (mutation) {
-                if (mutation.type === "attributes") {
-                  _this29._OnAttributesUpdated();
-                }
-              });
-            });
-            observer.observe(this, {
-              attributes: true
-            });
-            var server = this.hasAttribute("server") ? this.getAttribute("server") : "production";
-            plattar_api_1.Server.create(plattar_api_1.Server.match(server || "production"));
+            // check if the controller needs to be re-created
+            if (currentEmbed !== this._currentType && this._controller) {
+              this._controller.removeRenderer();
+              this._controller = null;
+            }
             var sceneID = this.hasAttribute("scene-id") ? this.getAttribute("scene-id") : null;
-            var productID = this.hasAttribute("product-id") ? this.getAttribute("product-id") : null;
-            // decide which controller to initialise
-            if (this._currentType === EmbedType.Viewer) {
-              // initialise product if scene-id is missing but product-id is defined
-              if (!sceneID && productID) {
-                this._controller = new product_controller_1.ProductController(this);
-              } else if (sceneID) {
-                this._controller = new viewer_controller_1.ViewerController(this);
+            // if the provided SceneID doesn't match, we need to remove the controller
+            if (sceneID !== this._currentSceneID && this._controller) {
+              this._controller.removeRenderer();
+              this._controller = null;
+            }
+            this._currentSceneID = sceneID;
+            // scene-id is the absolute minimum in order to initialise the embeds
+            if (!this._currentSceneID) {
+              return;
+            }
+            // if the controller was removed due to state-change, we need to re-initialise it
+            if (!this._controller) {
+              switch (this._currentType) {
+                case EmbedType.Configurator:
+                  this._controller = new configurator_controller_1.ConfiguratorController(this);
+                  break;
+                case EmbedType.VTO:
+                  this._controller = new vto_controller_1.VTOController(this);
+                  break;
               }
-            } else if (this._currentType === EmbedType.Configurator) {
-              this._controller = new configurator_controller_1.ConfiguratorController(this);
-            } else if (this._currentType === EmbedType.VTO) {
-              this._controller = new vto_controller_1.VTOController(this);
-            }
-            var init = this.hasAttribute("init") ? this.getAttribute("init") : null;
-            if (init === "ar") {
-              this.startAR();
-            } else if (init === "viewer") {
-              this.startViewer();
-            } else if (init === "qrcode") {
-              this.startQRCode();
-            } else if (init === "ar-fallback-qrcode") {
-              this.startAR().then(function () {
-                // nothing to do, launched successfully
-              })["catch"](function (_err) {
-                _this29.startQRCode();
-              });
-            } else if (init === "ar-fallback-viewer") {
-              this.startAR().then(function () {
-                // nothing to do, launched successfully
-              })["catch"](function (_err) {
-                _this29.startViewer();
-              });
+              if (this._controller) {
+                var init = this.hasAttribute("init") ? this.getAttribute("init") : null;
+                switch (init) {
+                  case "viewer":
+                    this.startViewer();
+                    break;
+                  case "qrcode":
+                    this.startQRCode();
+                    break;
+                }
+              }
+            } else {
+              this._OnAttributesUpdated(attributeName);
             }
           }
         }, {
           key: "initAR",
-          value: function initAR() {
-            var _this30 = this;
-            return new Promise(function (accept, reject) {
-              if (!_this30._controller) {
-                return reject(new Error("PlattarEmbed.initAR() - cannot execute as controller has not loaded yet"));
-              }
-              return _this30._controller.initAR().then(accept)["catch"](reject);
-            });
-          }
+          value: function () {
+            var _initAR3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
+              return _regeneratorRuntime().wrap(function _callee24$(_context24) {
+                while (1) switch (_context24.prev = _context24.next) {
+                  case 0:
+                    if (this._controller) {
+                      _context24.next = 2;
+                      break;
+                    }
+                    throw new Error("PlattarEmbed.initAR() - cannot execute as controller has not loaded yet");
+                  case 2:
+                    return _context24.abrupt("return", this._controller.initAR());
+                  case 3:
+                  case "end":
+                    return _context24.stop();
+                }
+              }, _callee24, this);
+            }));
+            function initAR() {
+              return _initAR3.apply(this, arguments);
+            }
+            return initAR;
+          }()
         }, {
           key: "startAR",
-          value: function startAR() {
-            var _this31 = this;
-            return new Promise(function (accept, reject) {
-              if (!_this31._controller) {
-                return reject(new Error("PlattarEmbed.startAR() - cannot execute as controller has not loaded yet"));
-              }
-              return _this31._controller.startAR().then(accept)["catch"](reject);
-            });
-          }
+          value: function () {
+            var _startAR2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee25() {
+              return _regeneratorRuntime().wrap(function _callee25$(_context25) {
+                while (1) switch (_context25.prev = _context25.next) {
+                  case 0:
+                    if (this._controller) {
+                      _context25.next = 2;
+                      break;
+                    }
+                    throw new Error("PlattarEmbed.startAR() - cannot execute as controller has not loaded yet");
+                  case 2:
+                    return _context25.abrupt("return", this._controller.startAR());
+                  case 3:
+                  case "end":
+                    return _context25.stop();
+                }
+              }, _callee25, this);
+            }));
+            function startAR() {
+              return _startAR2.apply(this, arguments);
+            }
+            return startAR;
+          }()
         }, {
           key: "startViewer",
-          value: function startViewer() {
-            var _this32 = this;
-            return new Promise(function (accept, reject) {
-              if (!_this32._controller) {
-                return reject(new Error("PlattarEmbed.startViewer() - cannot execute as controller has not loaded yet"));
-              }
-              return _this32._controller.startRenderer().then(accept)["catch"](reject);
-            });
-          }
+          value: function () {
+            var _startViewer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
+              return _regeneratorRuntime().wrap(function _callee26$(_context26) {
+                while (1) switch (_context26.prev = _context26.next) {
+                  case 0:
+                    if (this._controller) {
+                      _context26.next = 2;
+                      break;
+                    }
+                    throw new Error("PlattarEmbed.startViewer() - cannot execute as controller has not loaded yet");
+                  case 2:
+                    return _context26.abrupt("return", this._controller.startRenderer());
+                  case 3:
+                  case "end":
+                    return _context26.stop();
+                }
+              }, _callee26, this);
+            }));
+            function startViewer() {
+              return _startViewer.apply(this, arguments);
+            }
+            return startViewer;
+          }()
         }, {
           key: "startQRCode",
-          value: function startQRCode() {
-            var _this33 = this;
-            var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-            return new Promise(function (accept, reject) {
-              if (!_this33._controller) {
-                return reject(new Error("PlattarEmbed.startQRCode() - cannot execute as controller has not loaded yet"));
-              }
-              return _this33._controller.startQRCode(options).then(accept)["catch"](reject);
-            });
-          }
+          value: function () {
+            var _startQRCode2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
+              var options,
+                _args27 = arguments;
+              return _regeneratorRuntime().wrap(function _callee27$(_context27) {
+                while (1) switch (_context27.prev = _context27.next) {
+                  case 0:
+                    options = _args27.length > 0 && _args27[0] !== undefined ? _args27[0] : null;
+                    if (this._controller) {
+                      _context27.next = 3;
+                      break;
+                    }
+                    throw new Error("PlattarEmbed.startQRCode() - cannot execute as controller has not loaded yet");
+                  case 3:
+                    return _context27.abrupt("return", this._controller.startQRCode(options));
+                  case 4:
+                  case "end":
+                    return _context27.stop();
+                }
+              }, _callee27, this);
+            }));
+            function startQRCode() {
+              return _startQRCode2.apply(this, arguments);
+            }
+            return startQRCode;
+          }()
           /**
            * This will remove the currently active Renderer
            *
@@ -2316,9 +3034,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
            */
         }, {
           key: "_OnAttributesUpdated",
-          value: function _OnAttributesUpdated() {
+          value: function _OnAttributesUpdated(attributeName) {
             if (this._controller) {
-              this._controller.onAttributesUpdated();
+              this._controller.onAttributesUpdated(attributeName);
             }
           }
         }]);
@@ -2326,9 +3044,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
       exports["default"] = PlattarEmbed;
     }, {
-      "./controllers/configurator-controller": 7,
-      "./controllers/product-controller": 9,
-      "./controllers/viewer-controller": 10,
+      "./controllers/configurator-controller": 8,
+      "./controllers/product-controller": 10,
       "./controllers/vto-controller": 11,
       "@plattar/plattar-api": 44
     }],
@@ -2443,12 +3160,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       }
       console.log("using @plattar/plattar-ar-adapter v" + version_1["default"]);
     }, {
-      "./ar/launcher-ar": 1,
-      "./ar/model-ar": 2,
-      "./ar/product-ar": 3,
-      "./ar/raw-ar": 4,
-      "./ar/scene-ar": 5,
-      "./ar/scene-product-ar": 6,
+      "./ar/launcher-ar": 2,
+      "./ar/model-ar": 3,
+      "./ar/product-ar": 4,
+      "./ar/raw-ar": 5,
+      "./ar/scene-ar": 6,
+      "./ar/scene-product-ar": 7,
       "./embed/plattar-embed": 12,
       "./util/configurator-state": 14,
       "./util/util": 15,
@@ -2464,13 +3181,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       });
       exports.ConfiguratorState = void 0;
       var plattar_api_1 = require("@plattar/plattar-api");
+      /**
+       * Manages a Configuration State of multiple Products with multiple Variations
+       * Allows easily changing
+       */
       var ConfiguratorState = /*#__PURE__*/function () {
         function ConfiguratorState() {
           var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
           _classCallCheck(this, ConfiguratorState);
+          this._mappedVariationIDValues = new Map();
+          this._mappedVariationSKUValues = new Map();
           var defaultState = {
             meta: {
               scene_product_index: 0,
+              scene_model_index: 0,
               product_variation_index: 1,
               meta_index: 2
             },
@@ -2483,6 +3207,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               // set the meta data
               if (parsedState.meta) {
                 defaultState.meta.scene_product_index = parsedState.meta.scene_product_index || 0;
+                defaultState.meta.scene_model_index = parsedState.meta.scene_model_index || 0;
                 defaultState.meta.product_variation_index = parsedState.meta.product_variation_index || 1;
                 defaultState.meta.meta_index = parsedState.meta.meta_index || 2;
               }
@@ -2495,18 +3220,79 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
           this._state = defaultState;
         }
         /**
-         * Adds a new Scene Product/Variation combo with meta-data into the Configurator State
-         *
-         * @param sceneProductID - The Scene Product ID to be used (as defined in Plattar CMS)
-         * @param productVariationID - The Product Variation ID to be used (as defined in Plattar CMS)
-         * @param metaData - Arbitrary meta-data that can be used against certain operaions
+         * Modifyes the SceneProduct that this Variation SKU belongs to and changes for
+         * purposes of Configuration
          */
         _createClass(ConfiguratorState, [{
+          key: "setVariationSKU",
+          value: function setVariationSKU(productVariationSKU) {
+            var variationID = this._mappedVariationSKUValues.get(productVariationSKU);
+            if (!variationID) {
+              console.warn("ConfiguratorState.setVariationSKU() - Variation SKU of " + productVariationSKU + " is not defined in any variations");
+              return;
+            }
+            this.setVariationID(variationID);
+          }
+          /**
+           * Modifyes the SceneProduct that this Variation belongs to and changes for
+           * purposes of Configuration
+           */
+        }, {
+          key: "setVariationID",
+          value: function setVariationID(productVariationID) {
+            var sceneProductID = this._mappedVariationIDValues.get(productVariationID);
+            if (!sceneProductID) {
+              console.warn("ConfiguratorState.setVariationID() - Variation ID of " + productVariationID + " is not defined in any products");
+              return;
+            }
+            this.setSceneProduct(sceneProductID, productVariationID);
+          }
+          /**
+           * Adds a new Scene Product/Variation combo with meta-data into the Configurator State
+           *
+           * @param sceneProductID - The Scene Product ID to be used (as defined in Plattar CMS)
+           * @param productVariationID - The Product Variation ID to be used (as defined in Plattar CMS)
+           * @param metaData - Arbitrary meta-data that can be used against certain operaions
+           */
+        }, {
           key: "setSceneProduct",
           value: function setSceneProduct(sceneProductID, productVariationID) {
             var metaData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
             this.addSceneProduct(sceneProductID, productVariationID, metaData);
           }
+          /**
+           * Adds a new SceneModel with meta-data into the Configurator State. Note that the SceneProductDataMeta will
+           * override the isSceneModel variable and assign to "true" automatically
+           *
+           * @param SceneModelID - The SceneModel ID to add
+           * @param metaData - Arbitrary meta-data that can be used against certain operaions
+           */
+        }, {
+          key: "setSceneModel",
+          value: function setSceneModel(SceneModelID) {
+            var metaData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+            if (SceneModelID) {
+              metaData = metaData || {
+                augment: true,
+                type: "scenemodel"
+              };
+              metaData.type = "scenemodel";
+              var states = this._state.states;
+              var meta = this._state.meta;
+              var newData = null;
+              var existingData = this.findSceneProductIndex(SceneModelID);
+              if (existingData) {
+                newData = existingData;
+              } else {
+                newData = [];
+                // push the new data into the stack
+                states.push(newData);
+              }
+              newData[meta.scene_product_index] = SceneModelID;
+              newData[meta.product_variation_index] = null;
+              newData[meta.meta_index] = metaData;
+            }
+          }
           /**
            * Adds a new Scene Product/Variation combo with meta-data into the Configurator State
            *
@@ -2519,6 +3305,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
           value: function addSceneProduct(sceneProductID, productVariationID) {
             var metaData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
             if (sceneProductID && productVariationID) {
+              metaData = metaData || {
+                augment: true,
+                type: "sceneproduct"
+              };
+              metaData.type = "sceneproduct";
               var states = this._state.states;
               var meta = this._state.meta;
               var newData = null;
@@ -2532,9 +3323,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               }
               newData[meta.scene_product_index] = sceneProductID;
               newData[meta.product_variation_index] = productVariationID;
-              if (metaData) {
-                newData[meta.meta_index] = metaData;
-              }
+              newData[meta.meta_index] = metaData;
             }
           }
           /**
@@ -2570,12 +3359,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                 scene_product_id: found[meta.scene_product_index],
                 product_variation_id: found[meta.product_variation_index],
                 meta_data: {
-                  augment: true
+                  augment: true,
+                  type: "sceneproduct"
                 }
               };
               // include the meta-data
               if (found.length === 3) {
                 data.meta_data.augment = found[meta.meta_index].augment || true;
+                data.meta_data.type = found[meta.meta_index].type || "sceneproduct";
               }
               return data;
             }
@@ -2596,7 +3387,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     scene_product_id: productState[meta.scene_product_index],
                     product_variation_id: productState[meta.product_variation_index],
                     meta_data: {
-                      augment: true
+                      augment: true,
+                      type: "sceneproduct"
                     }
                   });
                 } else if (productState.length === 3) {
@@ -2604,13 +3396,26 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     scene_product_id: productState[meta.scene_product_index],
                     product_variation_id: productState[meta.product_variation_index],
                     meta_data: {
-                      augment: productState[meta.meta_index].augment || true
+                      augment: productState[meta.meta_index].augment || true,
+                      type: productState[meta.meta_index].type || "sceneproduct"
                     }
                   });
                 }
               });
             }
           }
+          /**
+           * Compose and return an array of all internal objects
+           */
+        }, {
+          key: "array",
+          value: function array() {
+            var array = new Array();
+            this.forEach(function (object) {
+              array.push(object);
+            });
+            return array;
+          }
           /**
            * @returns Returns the first reference of data in the stack, otherwise returns null
            */
@@ -2632,12 +3437,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                 scene_product_id: found[meta.scene_product_index],
                 product_variation_id: found[meta.product_variation_index],
                 meta_data: {
-                  augment: true
+                  augment: true,
+                  type: "sceneproduct"
                 }
               };
               // include the meta-data
               if (found.length === 3) {
                 data.meta_data.augment = found[meta.meta_index].augment || true;
+                data.meta_data.type = found[meta.meta_index].type || "sceneproduct";
               }
               return data;
             }
@@ -2669,6 +3476,58 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
           value: function decode(state) {
             return new ConfiguratorState(state);
           }
+          /**
+           * Decodes a previously generated state
+           * @param sceneID
+           * @param state
+           * @returns
+           */
+        }, {
+          key: "decodeState",
+          value: function () {
+            var _decodeState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
+              var sceneID,
+                state,
+                configState,
+                fscene,
+                scene,
+                _args28 = arguments;
+              return _regeneratorRuntime().wrap(function _callee28$(_context28) {
+                while (1) switch (_context28.prev = _context28.next) {
+                  case 0:
+                    sceneID = _args28.length > 0 && _args28[0] !== undefined ? _args28[0] : null;
+                    state = _args28.length > 1 && _args28[1] !== undefined ? _args28[1] : null;
+                    if (!(!sceneID || !state)) {
+                      _context28.next = 4;
+                      break;
+                    }
+                    throw new Error("ConfiguratorState.decodeState(sceneID, state) - sceneID and state must be defined");
+                  case 4:
+                    configState = new ConfiguratorState(state);
+                    fscene = new plattar_api_1.Scene(sceneID);
+                    fscene.include(plattar_api_1.Project);
+                    fscene.include(plattar_api_1.SceneProduct);
+                    fscene.include(plattar_api_1.SceneModel);
+                    fscene.include(plattar_api_1.SceneProduct.include(plattar_api_1.Product.include(plattar_api_1.ProductVariation)));
+                    _context28.next = 12;
+                    return fscene.get();
+                  case 12:
+                    scene = _context28.sent;
+                    return _context28.abrupt("return", {
+                      scene: scene,
+                      state: configState
+                    });
+                  case 14:
+                  case "end":
+                    return _context28.stop();
+                }
+              }, _callee28);
+            }));
+            function decodeState() {
+              return _decodeState.apply(this, arguments);
+            }
+            return decodeState;
+          }()
           /**
            * Generates a new ConfiguratorState instance from all SceneProducts and default
            * variations from the provided Scene ID
@@ -2677,33 +3536,78 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
            */
         }, {
           key: "decodeScene",
-          value: function decodeScene() {
-            var sceneID = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-            return new Promise(function (accept, reject) {
-              var configState = new ConfiguratorState();
-              if (!sceneID) {
-                return reject(new Error("ConfiguratorState.decodeScene(sceneID) - sceneID must be defined"));
-              }
-              var scene = new plattar_api_1.Scene(sceneID);
-              scene.include(plattar_api_1.SceneProduct);
-              scene.include(plattar_api_1.SceneProduct.include(plattar_api_1.Product));
-              scene.get().then(function (scene) {
-                var sceneProducts = scene.relationships.filter(plattar_api_1.SceneProduct);
-                // nothing to do if no AR components can be found
-                if (sceneProducts.length <= 0) {
-                  return accept(configState);
+          value: function () {
+            var _decodeScene = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
+              var sceneID,
+                configState,
+                fscene,
+                scene,
+                sceneProducts,
+                sceneModels,
+                _args29 = arguments;
+              return _regeneratorRuntime().wrap(function _callee29$(_context29) {
+                while (1) switch (_context29.prev = _context29.next) {
+                  case 0:
+                    sceneID = _args29.length > 0 && _args29[0] !== undefined ? _args29[0] : null;
+                    if (sceneID) {
+                      _context29.next = 3;
+                      break;
+                    }
+                    throw new Error("ConfiguratorState.decodeScene(sceneID) - sceneID must be defined");
+                  case 3:
+                    configState = new ConfiguratorState();
+                    fscene = new plattar_api_1.Scene(sceneID);
+                    fscene.include(plattar_api_1.Project);
+                    fscene.include(plattar_api_1.SceneProduct);
+                    fscene.include(plattar_api_1.SceneModel);
+                    fscene.include(plattar_api_1.SceneProduct.include(plattar_api_1.Product.include(plattar_api_1.ProductVariation)));
+                    _context29.next = 11;
+                    return fscene.get();
+                  case 11:
+                    scene = _context29.sent;
+                    sceneProducts = scene.relationships.filter(plattar_api_1.SceneProduct);
+                    sceneModels = scene.relationships.filter(plattar_api_1.SceneModel); // add out scene models
+                    sceneModels.forEach(function (sceneModel) {
+                      configState.setSceneModel(sceneModel.id, {
+                        augment: sceneModel.attributes.include_in_augment,
+                        type: "scenemodel"
+                      });
+                    });
+                    // add out scene products
+                    sceneProducts.forEach(function (sceneProduct) {
+                      var product = sceneProduct.relationships.find(plattar_api_1.Product);
+                      if (product) {
+                        if (product.attributes.product_variation_id) {
+                          configState.setSceneProduct(sceneProduct.id, product.attributes.product_variation_id, {
+                            augment: sceneProduct.attributes.include_in_augment,
+                            type: "sceneproduct"
+                          });
+                        }
+                        // add the variation to an acceptible range of values
+                        var variations = product.relationships.filter(plattar_api_1.ProductVariation);
+                        variations.forEach(function (variation) {
+                          configState._mappedVariationIDValues.set(variation.id, sceneProduct.id);
+                          if (variation.attributes.sku) {
+                            configState._mappedVariationSKUValues.set(variation.attributes.sku, variation.id);
+                          }
+                        });
+                      }
+                    });
+                    return _context29.abrupt("return", {
+                      scene: scene,
+                      state: configState
+                    });
+                  case 17:
+                  case "end":
+                    return _context29.stop();
                 }
-                // add out scene models
-                sceneProducts.forEach(function (sceneProduct) {
-                  var product = sceneProduct.relationships.find(plattar_api_1.Product);
-                  if (product && product.attributes.product_variation_id) {
-                    configState.setSceneProduct(sceneProduct.id, product.attributes.product_variation_id);
-                  }
-                });
-                accept(configState);
-              })["catch"](reject);
-            });
-          }
+              }, _callee29);
+            }));
+            function decodeScene() {
+              return _decodeScene.apply(this, arguments);
+            }
+            return decodeScene;
+          }()
         }]);
         return ConfiguratorState;
       }();
@@ -2825,7 +3729,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      exports["default"] = "1.154.2";
+      exports["default"] = "1.155.1";
     }, {}],
     17: [function (require, module, exports) {
       "use strict";
@@ -2856,13 +3760,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         _inherits(QuicklookViewer, _ar_viewer_1$default);
         var _super11 = _createSuper(QuicklookViewer);
         function QuicklookViewer() {
-          var _this34;
+          var _this26;
           _classCallCheck(this, QuicklookViewer);
-          _this34 = _super11.call(this);
-          _this34.araction = null;
-          _this34.titleHTML = "&checkoutTitle=" + document.title + "&checkoutSubtitle=" + document.title;
-          _this34.arcallback = function () {};
-          return _this34;
+          _this26 = _super11.call(this);
+          _this26.araction = null;
+          _this26.titleHTML = "&checkoutTitle=" + document.title + "&checkoutSubtitle=" + document.title;
+          _this26.arcallback = function () {};
+          return _this26;
         }
         _createClass(QuicklookViewer, [{
           key: "nodeType",
@@ -2877,7 +3781,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "start",
           value: function start() {
-            var _this35 = this;
+            var _this27 = this;
             if (!this.modelUrl) {
               throw new Error("QuicklookViewer.start() - model url not set, use QuicklookViewer.modelUrl");
             }
@@ -2889,7 +3793,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             if (araction) {
               var handleQuicklook = function handleQuicklook(event) {
                 if (event.data === "_apple_ar_quicklook_button_tapped") {
-                  _this35.arcallback();
+                  _this27.arcallback();
                 }
                 document.body.removeChild(anchor);
                 anchor.removeEventListener("message", handleQuicklook, false);
@@ -2975,14 +3879,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         _inherits(SceneViewer, _ar_viewer_1$default3);
         var _super13 = _createSuper(SceneViewer);
         function SceneViewer() {
-          var _this36;
+          var _this28;
           _classCallCheck(this, SceneViewer);
-          _this36 = _super13.call(this);
-          _this36.araction = null;
-          _this36.isVertical = false;
-          _this36.titleHTML = "<b>" + document.title;
-          _this36.isVertical = false;
-          return _this36;
+          _this28 = _super13.call(this);
+          _this28.araction = null;
+          _this28.isVertical = false;
+          _this28.titleHTML = "<b>" + document.title;
+          _this28.isVertical = false;
+          return _this28;
         }
         _createClass(SceneViewer, [{
           key: "nodeType",
@@ -3079,16 +3983,16 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
        */
       var Memory = /*#__PURE__*/function () {
         function Memory(messengerInstance) {
-          var _this37 = this;
+          var _this29 = this;
           _classCallCheck(this, Memory);
           this._messenger = messengerInstance;
           this._tempMemory = new TemporaryMemory(messengerInstance);
           this._permMemory = new PermanentMemory(messengerInstance);
           this._messenger.self.__memory__set_temp_var = function (name, data) {
-            _this37._tempMemory[name] = data;
+            _this29._tempMemory[name] = data;
           };
           this._messenger.self.__memory__set_perm_var = function (name, data) {
-            _this37._permMemory[name] = data;
+            _this29._permMemory[name] = data;
           };
         }
         _createClass(Memory, [{
@@ -3535,17 +4439,17 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "exec",
           value: function exec() {
-            var _this38 = this;
+            var _this30 = this;
             for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
               args[_key3] = arguments[_key3];
             }
             return new Promise(function (accept, reject) {
-              if (!_this38._value) {
-                return reject(new Error("WrappedLocalFunction.exec() function with name " + _this38._funcName + "() is not defined"));
+              if (!_this30._value) {
+                return reject(new Error("WrappedLocalFunction.exec() function with name " + _this30._funcName + "() is not defined"));
               }
               try {
                 // otherwise execute the function
-                var rObject = _this38._execute.apply(_this38, args);
+                var rObject = _this30._execute.apply(_this30, args);
 
                 // we need to check if the returned object is a Promise, if so, handle it
                 // differently. This can happen if the function wants to execute asyn
@@ -3611,7 +4515,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         _createClass(FunctionObserver, [{
           key: "subscribe",
           value: function subscribe(functionName, callback) {
-            var _this39 = this;
+            var _this31 = this;
             if (!functionName || !Util.isFunction(callback)) {
               return function () {};
             }
@@ -3625,7 +4529,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             }
             list.push(callback);
             return function () {
-              return _this39.unsubscribe(functionName, callback);
+              return _this31.unsubscribe(functionName, callback);
             };
           }
 
@@ -3692,7 +4596,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
        */
       var GlobalEventHandler = /*#__PURE__*/function () {
         function GlobalEventHandler() {
-          var _this40 = this;
+          var _this32 = this;
           _classCallCheck(this, GlobalEventHandler);
           this._eventListeners = {};
 
@@ -3712,11 +4616,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             // make sure the event is properly formatted
             if (jsonData && jsonData.event && jsonData.data) {
               // see if there are any listeners for this
-              if (_this40._eventListeners[jsonData.event]) {
+              if (_this32._eventListeners[jsonData.event]) {
                 var remoteInterface = new RemoteInterface(evt.source, evt.origin);
 
                 // loop through and call all the event handlers
-                _this40._eventListeners[jsonData.event].forEach(function (callback) {
+                _this32._eventListeners[jsonData.event].forEach(function (callback) {
                   try {
                     callback(remoteInterface, jsonData.data);
                   } catch (e) {
@@ -3908,33 +4812,33 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "_registerListeners",
           value: function _registerListeners() {
-            var _this41 = this;
+            var _this33 = this;
             GlobalEventHandler.instance().listen("__messenger__child_init", function (src, data) {
               var iframeID = src.id;
 
               // check reserved key list
               switch (iframeID) {
                 case undefined:
-                  throw new Error("Messenger[" + _this41._id + "].setup() Component ID cannot be undefined");
+                  throw new Error("Messenger[" + _this33._id + "].setup() Component ID cannot be undefined");
                 case "self":
-                  throw new Error("Messenger[" + _this41._id + "].setup() Component ID of \"self\" cannot be used as the keyword is reserved");
+                  throw new Error("Messenger[" + _this33._id + "].setup() Component ID of \"self\" cannot be used as the keyword is reserved");
                 case "parent":
-                  throw new Error("Messenger[" + _this41._id + "].setup() Component ID of \"parent\" cannot be used as the keyword is reserved");
+                  throw new Error("Messenger[" + _this33._id + "].setup() Component ID of \"parent\" cannot be used as the keyword is reserved");
                 case "id":
-                  throw new Error("Messenger[" + _this41._id + "].setup() Component ID of \"id\" cannot be used as the keyword is reserved");
+                  throw new Error("Messenger[" + _this33._id + "].setup() Component ID of \"id\" cannot be used as the keyword is reserved");
                 case "onload":
-                  throw new Error("Messenger[" + _this41._id + "].setup() Component ID of \"onload\" cannot be used as the keyword is reserved");
+                  throw new Error("Messenger[" + _this33._id + "].setup() Component ID of \"onload\" cannot be used as the keyword is reserved");
                 default:
                   break;
               }
 
               // initialise the child iframe as a messenger pipe
-              _this41[iframeID] = new RemoteFunctionList(iframeID, _this41._functionObserver);
-              _this41[iframeID].setup(new RemoteInterface(src.source, src.origin));
+              _this33[iframeID] = new RemoteFunctionList(iframeID, _this33._functionObserver);
+              _this33[iframeID].setup(new RemoteInterface(src.source, src.origin));
 
               // add the interface to the broadcaster
-              _this41._broadcaster._push(iframeID);
-              var callbacks = _this41._callbacks;
+              _this33._broadcaster._push(iframeID);
+              var callbacks = _this33._callbacks;
 
               // we have registered callbacks, begin execution
               if (callbacks.has(iframeID)) {
@@ -3958,26 +4862,26 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               // check reserved key list
               switch (iframeID) {
                 case undefined:
-                  throw new Error("Messenger[" + _this41._id + "].setup() Component ID cannot be undefined");
+                  throw new Error("Messenger[" + _this33._id + "].setup() Component ID cannot be undefined");
                 case "self":
-                  throw new Error("Messenger[" + _this41._id + "].setup() Component ID of \"self\" cannot be used as the keyword is reserved");
+                  throw new Error("Messenger[" + _this33._id + "].setup() Component ID of \"self\" cannot be used as the keyword is reserved");
                 case "parent":
-                  throw new Error("Messenger[" + _this41._id + "].setup() Component ID of \"parent\" cannot be used as the keyword is reserved");
+                  throw new Error("Messenger[" + _this33._id + "].setup() Component ID of \"parent\" cannot be used as the keyword is reserved");
                 case "id":
-                  throw new Error("Messenger[" + _this41._id + "].setup() Component ID of \"id\" cannot be used as the keyword is reserved");
+                  throw new Error("Messenger[" + _this33._id + "].setup() Component ID of \"id\" cannot be used as the keyword is reserved");
                 case "onload":
-                  throw new Error("Messenger[" + _this41._id + "].setup() Component ID of \"onload\" cannot be used as the keyword is reserved");
+                  throw new Error("Messenger[" + _this33._id + "].setup() Component ID of \"onload\" cannot be used as the keyword is reserved");
                 default:
                   break;
               }
 
               // initialise the child iframe as a messenger pipe
-              _this41[iframeID] = new RemoteFunctionList(iframeID, _this41._functionObserver);
-              _this41[iframeID].setup(new RemoteInterface(src.source, src.origin));
+              _this33[iframeID] = new RemoteFunctionList(iframeID, _this33._functionObserver);
+              _this33[iframeID].setup(new RemoteInterface(src.source, src.origin));
 
               // add the interface to the broadcaster
-              _this41._broadcaster._push(iframeID);
-              var callbacks = _this41._callbacks;
+              _this33._broadcaster._push(iframeID);
+              var callbacks = _this33._callbacks;
 
               // we have registered callbacks, begin execution
               if (callbacks.has(iframeID)) {
@@ -3996,9 +4900,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             });
             GlobalEventHandler.instance().listen("__messenger__parent_init", function (src, data) {
               var iframeID = "parent";
-              _this41[iframeID] = new RemoteFunctionList(iframeID, _this41._functionObserver);
-              _this41[iframeID].setup(new RemoteInterface(src.source, src.origin));
-              var callbacks = _this41._callbacks;
+              _this33[iframeID] = new RemoteFunctionList(iframeID, _this33._functionObserver);
+              _this33[iframeID].setup(new RemoteInterface(src.source, src.origin));
+              var callbacks = _this33._callbacks;
 
               // we have registered callbacks, begin execution
               if (callbacks.has(iframeID)) {
@@ -4022,9 +4926,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
              */
             GlobalEventHandler.instance().listen("__messenger__parent_init_inv", function (src, data) {
               var iframeID = "parent";
-              _this41[iframeID] = new RemoteFunctionList(iframeID, _this41._functionObserver);
-              _this41[iframeID].setup(new RemoteInterface(src.source, src.origin));
-              var callbacks = _this41._callbacks;
+              _this33[iframeID] = new RemoteFunctionList(iframeID, _this33._functionObserver);
+              _this33[iframeID].setup(new RemoteInterface(src.source, src.origin));
+              var callbacks = _this33._callbacks;
 
               // we have registered callbacks, begin execution
               if (callbacks.has(iframeID)) {
@@ -4246,7 +5150,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
        */
       var WrappedRemoteFunction = /*#__PURE__*/function () {
         function WrappedRemoteFunction(funcName, remoteInterface, functionObserver) {
-          var _this42 = this;
+          var _this34 = this;
           _classCallCheck(this, WrappedRemoteFunction);
           this._funcName = funcName;
           this._remoteInterface = remoteInterface;
@@ -4258,24 +5162,24 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             var instanceID = data.instance_id;
 
             // the function name must match
-            if (data.function_name !== _this42._funcName) {
+            if (data.function_name !== _this34._funcName) {
               return;
             }
 
             // the instance ID must be found, otherwise this is a rogue execution
             // that can be ignored (should not happen)
-            if (!_this42._callInstances[instanceID]) {
+            if (!_this34._callInstances[instanceID]) {
               return;
             }
-            var promise = _this42._callInstances[instanceID];
+            var promise = _this34._callInstances[instanceID];
 
             // remove the old instance
-            delete _this42._callInstances[instanceID];
+            delete _this34._callInstances[instanceID];
 
             // perform the promise callbacks
             if (data.function_status === "success") {
               // execute the observers
-              _this42._functionObserver.call(_this42._funcName, {
+              _this34._functionObserver.call(_this34._funcName, {
                 type: "return",
                 state: "success",
                 data: data.function_args
@@ -4283,7 +5187,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               promise.accept(data.function_args);
             } else {
               // execute the observers
-              _this42._functionObserver.call(_this42._funcName, {
+              _this34._functionObserver.call(_this34._funcName, {
                 type: "return",
                 state: "exception",
                 data: new Error(data.function_args)
@@ -4299,7 +5203,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         _createClass(WrappedRemoteFunction, [{
           key: "exec",
           value: function exec() {
-            var _this43 = this;
+            var _this35 = this;
             for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
               args[_key4] = arguments[_key4];
             }
@@ -4318,20 +5222,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             // to be executed later
             return new Promise(function (accept, reject) {
               // save this promise to be executed later
-              _this43._callInstances[instanceID] = {
+              _this35._callInstances[instanceID] = {
                 accept: accept,
                 reject: reject
               };
 
               // execute this event in another context
-              _this43._remoteInterface.send("__messenger__exec_fnc", {
+              _this35._remoteInterface.send("__messenger__exec_fnc", {
                 instance_id: instanceID,
-                function_name: _this43._funcName,
+                function_name: _this35._funcName,
                 function_args: args
               });
 
               // execute the observers
-              _this43._functionObserver.call(_this43._funcName, {
+              _this35._functionObserver.call(_this35._funcName, {
                 type: "call",
                 state: "success",
                 data: args
@@ -4480,7 +5384,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       var google_analytics_1 = require("./google/google-analytics");
       var Analytics = /*#__PURE__*/function () {
         function Analytics(applicationID) {
-          var _this44 = this;
+          var _this36 = this;
           _classCallCheck(this, Analytics);
           this._pageTime = null;
           this.origin = "production";
@@ -4494,17 +5398,17 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
           this._ga = new google_analytics_1.GoogleAnalytics();
           this._handlePageHide = function () {
             if (document.visibilityState === "hidden") {
-              _this44._pageTime = new Date();
-            } else if (_this44._pageTime) {
+              _this36._pageTime = new Date();
+            } else if (_this36._pageTime) {
               var time2 = new Date();
-              var diff = time2.getTime() - _this44._pageTime.getTime();
-              var data = _this44.data;
+              var diff = time2.getTime() - _this36._pageTime.getTime();
+              var data = _this36.data;
               data.push("eventAction", "View Time");
               data.push("viewTime", diff);
               data.push("eventLabel", diff);
-              _this44.write();
-              _this44._pageTime = null;
-              document.removeEventListener("visibilitychange", _this44._handlePageHide, false);
+              _this36.write();
+              _this36._pageTime = null;
+              document.removeEventListener("visibilitychange", _this36._handlePageHide, false);
             }
           };
         }
@@ -4516,18 +5420,18 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "query",
           value: function query() {
-            var _this45 = this;
+            var _this37 = this;
             var _query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
             return new Promise(function (accept, reject) {
               if (!_query) {
                 return reject(new Error("Analytics.query() - provided query was null"));
               }
-              var url = _this45.origin === "dev" ? "https://localhost:3008/v3/read" : "https://analytics.plattar.com/v3/read";
+              var url = _this37.origin === "dev" ? "https://localhost:3008/v3/read" : "https://analytics.plattar.com/v3/read";
               var data = {
                 data: {
                   attributes: {
-                    application_id: _this45._applicationID,
-                    event: _this45.event,
+                    application_id: _this37._applicationID,
+                    event: _this37.event,
                     query: _query
                   }
                 }
@@ -4540,22 +5444,22 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "write",
           value: function write() {
-            var _this46 = this;
+            var _this38 = this;
             return new Promise(function (accept, reject) {
-              var data = _this46._data;
-              var url = _this46.origin === "dev" ? "https://localhost:3008/v3/write" : "https://analytics.plattar.com/v3/write";
-              data.push("applicationId", _this46._applicationID);
+              var data = _this38._data;
+              var url = _this38.origin === "dev" ? "https://localhost:3008/v3/write" : "https://analytics.plattar.com/v3/write";
+              data.push("applicationId", _this38._applicationID);
               var sendData = {
                 data: {
                   attributes: {
-                    application_id: _this46._applicationID,
-                    event: _this46.event,
-                    origin: _this46.origin,
+                    application_id: _this38._applicationID,
+                    event: _this38.event,
+                    origin: _this38.origin,
                     fields: data.data
                   }
                 }
               };
-              if (_this46.isBeacon === false) {
+              if (_this38.isBeacon === false) {
                 basic_http_1["default"].exec("POST", url, sendData).then(function (result) {
                   accept(result ? result : {});
                 })["catch"](reject);
@@ -4564,7 +5468,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                   accept(result ? result : {});
                 })["catch"](reject);
               }
-              _this46.googleAnalytics.write(_this46.event, _this46.data);
+              _this38.googleAnalytics.write(_this38.event, _this38.data);
             });
           }
         }, {
@@ -5116,10 +6020,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "_get",
           value: function _get(opt) {
-            var _this47 = this;
+            var _this39 = this;
             return new Promise(function (resolve, reject) {
-              var target = _this47.target;
-              var server = _this47.server;
+              var target = _this39.target;
+              var server = _this39.server;
 
               // we cannot perform a GET request without an ID
               if (!target.id) {
@@ -5144,15 +6048,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               var origin = server.originLocation.api_read;
               var auth = server.authToken;
               var headers = {
-                'cookie': 'laravel_session=' + _this47.getCookie('laravel_session')
+                'cookie': 'laravel_session=' + _this39.getCookie('laravel_session')
               };
               Object.assign(headers, auth);
               var reqopts = {
                 method: "GET",
                 headers: headers
               };
-              var includeQuery = _this47._IncludeQuery;
-              var params = _this47._ParamFor("get");
+              var includeQuery = _this39._IncludeQuery;
+              var params = _this39._ParamFor("get");
               var endpoint = origin + target.type() + "/" + target.id;
               if (includeQuery) {
                 endpoint = endpoint + "?include=" + includeQuery;
@@ -5187,10 +6091,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "_update",
           value: function _update() {
-            var _this48 = this;
+            var _this40 = this;
             return new Promise(function (resolve, reject) {
-              var target = _this48.target;
-              var server = _this48.server;
+              var target = _this40.target;
+              var server = _this40.server;
 
               // we cannot perform a GET request without an ID
               if (!target.id) {
@@ -5204,7 +6108,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               var headers = {
                 'Accept': 'application/json',
                 'Content-Type': 'application/json',
-                'cookie': 'laravel_session=' + _this48.getCookie('laravel_session')
+                'cookie': 'laravel_session=' + _this40.getCookie('laravel_session')
               };
               Object.assign(headers, auth);
               var reqopts = {
@@ -5218,7 +6122,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                   meta: target.meta || {}
                 })
               };
-              var params = _this48._ParamFor("update");
+              var params = _this40._ParamFor("update");
               var endpoint = origin + target.type() + "/" + target.id;
               if (params) {
                 var appender = "?";
@@ -5254,10 +6158,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "_create",
           value: function _create() {
-            var _this49 = this;
+            var _this41 = this;
             return new Promise(function (resolve, reject) {
-              var target = _this49.target;
-              var server = _this49.server;
+              var target = _this41.target;
+              var server = _this41.server;
 
               // otherwise, proceed with the fetching op
               var origin = server.originLocation.api_write;
@@ -5265,7 +6169,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               var headers = {
                 'Accept': 'application/json',
                 'Content-Type': 'application/json',
-                'cookie': 'laravel_session=' + _this49.getCookie('laravel_session')
+                'cookie': 'laravel_session=' + _this41.getCookie('laravel_session')
               };
               Object.assign(headers, auth);
               var reqopts = {
@@ -5278,7 +6182,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                   meta: target.meta || {}
                 })
               };
-              var params = _this49._ParamFor("create");
+              var params = _this41._ParamFor("create");
               var endpoint = origin + target.type();
               if (params) {
                 var appender = "?";
@@ -5315,10 +6219,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "_delete",
           value: function _delete() {
-            var _this50 = this;
+            var _this42 = this;
             return new Promise(function (resolve, reject) {
-              var target = _this50.target;
-              var server = _this50.server;
+              var target = _this42.target;
+              var server = _this42.server;
 
               // we cannot perform a GET request without an ID
               if (!target.id) {
@@ -5332,7 +6236,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               var headers = {
                 'Accept': 'application/json',
                 'Content-Type': 'application/json',
-                'cookie': 'laravel_session=' + _this50.getCookie('laravel_session')
+                'cookie': 'laravel_session=' + _this42.getCookie('laravel_session')
               };
               Object.assign(headers, auth);
               var reqopts = {
@@ -5346,7 +6250,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                   meta: target.meta || {}
                 })
               };
-              var params = _this50._ParamFor("delete");
+              var params = _this42._ParamFor("delete");
               var endpoint = origin + target.type() + "/" + target.id;
               if (params) {
                 var appender = "?";
@@ -5401,7 +6305,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "_include",
           value: function _include(args) {
-            var _this51 = this;
+            var _this43 = this;
             if (!args || args.length <= 0) {
               return this;
             }
@@ -5411,20 +6315,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               if (Array.isArray(obj)) {
                 obj.forEach(function (strObject) {
                   if (typeof strObject === "string" || strObject instanceof String) {
-                    _this51._getIncludeQuery.push(strObject);
+                    _this43._getIncludeQuery.push(strObject);
                   } else {
-                    throw new Error("PlattarQuery." + _this51.target.type() + ".include(...args) - argument of Array must only include Strings");
+                    throw new Error("PlattarQuery." + _this43.target.type() + ".include(...args) - argument of Array must only include Strings");
                   }
                 });
               } else if (PlattarUtil.isPlattarObject(obj)) {
                 var type = obj.type();
                 if (Array.isArray(type)) {
-                  _this51._include(type);
+                  _this43._include(type);
                 } else {
-                  _this51._getIncludeQuery.push(type);
+                  _this43._getIncludeQuery.push(type);
                 }
               } else {
-                throw new Error("PlattarQuery." + _this51.target.type() + ".include(...args) - argument must be of type PlattarObject or Array but was type=" + _typeof(obj) + " value=" + obj);
+                throw new Error("PlattarQuery." + _this43.target.type() + ".include(...args) - argument must be of type PlattarObject or Array but was type=" + _typeof(obj) + " value=" + obj);
               }
             });
             return this;
@@ -5559,12 +6463,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             }, {
               key: "auth",
               value: function auth(token, opt) {
-                var _this52 = this;
+                var _this44 = this;
                 var copt = opt || {
                   validate: false
                 };
                 return new Promise(function (resolve, reject) {
-                  var server = _this52.originLocation.api_write;
+                  var server = _this44.originLocation.api_write;
                   if (!server) {
                     reject(new Error("Plattar.auth(token) - cannot authenticate as server not set via Plattar.origin(server)"));
                     return;
@@ -5574,10 +6478,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     return;
                   }
                   if (!copt.validate) {
-                    _this52._authToken = {
+                    _this44._authToken = {
                       "plattar-auth-token": token
                     };
-                    resolve(_this52);
+                    resolve(_this44);
                     return;
                   }
                   var endpoint = server + "plattaruser/xauth/validate";
@@ -5589,10 +6493,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                   };
                   fetch(endpoint, options).then(function (res) {
                     if (res.ok) {
-                      _this52._authToken = {
+                      _this44._authToken = {
                         "plattar-auth-token": token
                       };
-                      resolve(_this52);
+                      resolve(_this44);
                     } else {
                       reject(new Error("Plattar.auth(token) - failed to validate authentication token at " + endpoint));
                     }
@@ -5602,7 +6506,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             }, {
               key: "origin",
               value: function origin(server, opt) {
-                var _this53 = this;
+                var _this45 = this;
                 var copt = opt || {
                   validate: false
                 };
@@ -5612,8 +6516,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                     return;
                   }
                   if (!copt.validate) {
-                    _this53._serverLocation = server;
-                    resolve(_this53);
+                    _this45._serverLocation = server;
+                    resolve(_this45);
                     return;
                   }
                   var endpoint = server.api_read + "ping";
@@ -5622,8 +6526,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                   };
                   fetch(endpoint, options).then(function (res) {
                     if (res.ok) {
-                      _this53._serverLocation = server;
-                      resolve(_this53);
+                      _this45._serverLocation = server;
+                      resolve(_this45);
                     } else {
                       reject(new Error("Plattar.origin(server) - failed to ping server at " + endpoint));
                     }
@@ -5957,13 +6861,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         _inherits(FileBase, _PlattarBase11);
         var _super25 = _createSuper(FileBase);
         function FileBase(id, server) {
-          var _this54;
+          var _this46;
           _classCallCheck(this, FileBase);
-          _this54 = _super25.call(this, id, server || Server["default"]());
-          if (_this54.constructor === FileBase) {
+          _this46 = _super25.call(this, id, server || Server["default"]());
+          if (_this46.constructor === FileBase) {
             throw new Error("FileBase is abstract and cannot be created");
           }
-          return _this54;
+          return _this46;
         }
         _createClass(FileBase, [{
           key: "sourcePath",
@@ -6116,13 +7020,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         _inherits(PlattarBase, _PlattarObject);
         var _super30 = _createSuper(PlattarBase);
         function PlattarBase(id, server) {
-          var _this55;
+          var _this47;
           _classCallCheck(this, PlattarBase);
-          _this55 = _super30.call(this, id, server || Server["default"]());
-          if (_this55.constructor === PlattarBase) {
+          _this47 = _super30.call(this, id, server || Server["default"]());
+          if (_this47.constructor === PlattarBase) {
             throw new Error("PlattarBase is abstract and cannot be created");
           }
-          return _this55;
+          return _this47;
         }
         return _createClass(PlattarBase);
       }(PlattarObject);
@@ -6189,7 +7093,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "filter",
           value: function filter(obj, id) {
-            var _this56 = this;
+            var _this48 = this;
             if (!obj) {
               return [];
             }
@@ -6205,7 +7109,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             if (Array.isArray(type)) {
               var compiledList = [];
               type.forEach(function (inObject) {
-                var retArray = _this56.filter(inObject, id);
+                var retArray = _this48.filter(inObject, id);
                 if (retArray.length > 0) {
                   compiledList = compiledList.concat(retArray);
                 }
@@ -6393,7 +7297,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "include",
           value: function include() {
-            var _this57 = this;
+            var _this49 = this;
             for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
               args[_key6] = arguments[_key6];
             }
@@ -6406,15 +7310,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               if (Array.isArray(obj)) {
                 obj.forEach(function (strObject) {
                   if (typeof strObject === "string" || strObject instanceof String) {
-                    includes.push("".concat(_this57.type(), ".").concat(strObject));
+                    includes.push("".concat(_this49.type(), ".").concat(strObject));
                   } else {
-                    throw new Error("PlattarObject." + _this57.type() + ".include(...args) - argument of Array must only include Strings");
+                    throw new Error("PlattarObject." + _this49.type() + ".include(...args) - argument of Array must only include Strings");
                   }
                 });
               } else if (obj.prototype instanceof PlattarObject) {
-                includes.push("".concat(_this57.type(), ".").concat(obj.type()));
+                includes.push("".concat(_this49.type(), ".").concat(obj.type()));
               } else {
-                throw new Error("PlattarObject." + _this57.type() + ".include(...args) - argument must be of type PlattarObject or Array but was type=" + _typeof(obj) + " value=" + obj);
+                throw new Error("PlattarObject." + _this49.type() + ".include(...args) - argument must be of type PlattarObject or Array but was type=" + _typeof(obj) + " value=" + obj);
               }
             });
             return includes;
@@ -6544,13 +7448,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         _inherits(CardBase, _PlattarBase17);
         var _super36 = _createSuper(CardBase);
         function CardBase(id, server) {
-          var _this58;
+          var _this50;
           _classCallCheck(this, CardBase);
-          _this58 = _super36.call(this, id, server || Server["default"]());
-          if (_this58.constructor === CardBase) {
+          _this50 = _super36.call(this, id, server || Server["default"]());
+          if (_this50.constructor === CardBase) {
             throw new Error("CardBase is abstract and cannot be created");
           }
-          return _this58;
+          return _this50;
         }
         _createClass(CardBase, null, [{
           key: "type",
@@ -6867,13 +7771,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         _inherits(ProductBase, _PlattarBase19);
         var _super50 = _createSuper(ProductBase);
         function ProductBase(id, server) {
-          var _this59;
+          var _this51;
           _classCallCheck(this, ProductBase);
-          _this59 = _super50.call(this, id, server || Server["default"]());
-          if (_this59.constructor === ProductBase) {
+          _this51 = _super50.call(this, id, server || Server["default"]());
+          if (_this51.constructor === ProductBase) {
             throw new Error("ProductBase is abstract and cannot be created");
           }
-          return _this59;
+          return _this51;
         }
         _createClass(ProductBase, null, [{
           key: "type",
@@ -6983,13 +7887,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         _inherits(SceneBase, _PlattarBase21);
         var _super55 = _createSuper(SceneBase);
         function SceneBase(id, server) {
-          var _this60;
+          var _this52;
           _classCallCheck(this, SceneBase);
-          _this60 = _super55.call(this, id, server || Server["default"]());
-          if (_this60.constructor === SceneBase) {
+          _this52 = _super55.call(this, id, server || Server["default"]());
+          if (_this52.constructor === SceneBase) {
             throw new Error("SceneBase is abstract and cannot be created");
           }
-          return _this60;
+          return _this52;
         }
         _createClass(SceneBase, null, [{
           key: "type",
@@ -7692,15 +8596,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         _createClass(BaseElement, [{
           key: "connectedCallback",
           value: function connectedCallback() {
-            var _this61 = this;
+            var _this53 = this;
             if (this.hasAttribute("url")) {
               this.renderQRCode();
             }
             var observer = new MutationObserver(function (mutations) {
               mutations.forEach(function (mutation) {
                 if (mutation.type === "attributes") {
-                  if (_this61.hasAttribute("url")) {
-                    _this61.renderQRCode();
+                  if (_this53.hasAttribute("url")) {
+                    _this53.renderQRCode();
                   }
                 }
               });
@@ -7723,7 +8627,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "renderQRCode",
           value: function renderQRCode() {
-            var _this62 = this;
+            var _this54 = this;
             var url = this.hasAttribute("url") ? this.getAttribute("url") : undefined;
             if (!url) {
               console.warn("PlattarQR.renderQRCode() - required attribute \"url\" is missing or invalid, QR Code will not render");
@@ -7831,11 +8735,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             var shortenURL = this.hasAttribute("shorten") ? this.getAttribute("shorten") : "false";
             if (shortenURL && shortenURL.toLowerCase() === "true") {
               this._ShortenURL(url).then(function (newURL) {
-                _this62._GenerateQRCode(newURL, width, height);
+                _this54._GenerateQRCode(newURL, width, height);
               })["catch"](function (_err) {
                 console.warn(_err);
                 // ignore error and just generate normal QR Code
-                _this62._GenerateQRCode(url, width, height);
+                _this54._GenerateQRCode(url, width, height);
               });
             } else {
               this._GenerateQRCode(url, width, height);
@@ -7904,9 +8808,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "_ShortenURL",
           value: function _ShortenURL(url) {
-            var _this63 = this;
+            var _this55 = this;
             return new Promise(function (accept, reject) {
-              if (!_this63._IsFetchAPISupported()) {
+              if (!_this55._IsFetchAPISupported()) {
                 return reject(new Error("PlattarQR._ShortenURL() - fetch api not supported, cannot proceed"));
               }
               try {
@@ -8099,10 +9003,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "get",
           value: function get() {
-            var _this64 = this;
+            var _this56 = this;
             return new Promise(function (accept, reject) {
-              _this64._CalculateHash().then(function () {
-                remote_request_1.RemoteRequest.request(_this64._GetPayload(), _this64.retry < 0 ? 0 : _this64.retry).then(accept)["catch"](reject);
+              _this56._CalculateHash().then(function () {
+                remote_request_1.RemoteRequest.request(_this56._GetPayload(), _this56.retry < 0 ? 0 : _this56.retry).then(accept)["catch"](reject);
               })["catch"](function (_err) {
                 reject(new Error("Configurator.get() - one of the objects does not exist in Plattar API"));
               });
@@ -8111,12 +9015,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "_CalculateHash",
           value: function _CalculateHash() {
-            var _this65 = this;
+            var _this57 = this;
             return new Promise(function (accept, reject) {
               var promises = [];
               var oldOrigin = plattar_api_1.Server["default"]().originLocation.type;
-              plattar_api_1.Server.create(plattar_api_1.Server.match(_this65.server));
-              _this65._maps.forEach(function (map) {
+              plattar_api_1.Server.create(plattar_api_1.Server.match(_this57.server));
+              _this57._maps.forEach(function (map) {
                 if (map.productvariation) {
                   promises.push(new plattar_api_1.ProductVariation(map.productvariation).get());
                 }
@@ -8132,7 +9036,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               });
               Promise.all(promises).then(function (values) {
                 values.forEach(function (value) {
-                  _this65._attrHash.push(value.attributes);
+                  _this57._attrHash.push(value.attributes);
                 });
                 // reset server back
                 plattar_api_1.Server.create(plattar_api_1.Server.match(oldOrigin));
@@ -8219,12 +9123,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "get",
           value: function get() {
-            var _this66 = this;
+            var _this58 = this;
             return new Promise(function (accept, reject) {
-              if (!_this66._model) {
+              if (!_this58._model) {
                 return reject(new Error("ModelConverter.get() - required .model attribute was not set"));
               }
-              remote_request_1.RemoteRequest.request(_this66._Payload, _this66.retry < 0 ? 0 : _this66.retry).then(accept)["catch"](reject);
+              remote_request_1.RemoteRequest.request(_this58._Payload, _this58.retry < 0 ? 0 : _this58.retry).then(accept)["catch"](reject);
             });
           }
         }, {
@@ -9589,18 +10493,18 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, {
           key: "allMappedAttributes",
           get: function get() {
-            var _this67 = this;
+            var _this59 = this;
             var map = new Map();
             var coreAttr = this.coreAttributes;
             var optAttr = this.optionalAttributes;
             coreAttr.forEach(function (ele) {
-              if (_this67.hasAttribute(ele.key)) {
-                map.set(ele.map, _this67.getAttribute(ele.key));
+              if (_this59.hasAttribute(ele.key)) {
+                map.set(ele.map, _this59.getAttribute(ele.key));
               }
             });
             optAttr.forEach(function (ele) {
-              if (_this67.hasAttribute(ele.key)) {
-                map.set(ele.map, _this67.getAttribute(ele.key));
+              if (_this59.hasAttribute(ele.key)) {
+                map.set(ele.map, _this59.getAttribute(ele.key));
               }
             });
             return map;
@@ -9700,7 +10604,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       var IFrameController = require("./iframe-controller.js");
       var ElementController = /*#__PURE__*/function () {
         function ElementController(element) {
-          var _this68 = this;
+          var _this60 = this;
           _classCallCheck(this, ElementController);
           this._element = element;
 
@@ -9713,7 +10617,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                 var mutation = _step8.value;
                 if (mutation.type === 'attributes' && element.usesAttribute(mutation.attributeName)) {
                   if (element.hasAllCoreAttributes) {
-                    _this68._load();
+                    _this60._load();
                   }
                 }
               }
@@ -9808,7 +10712,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       var Util = require("../../util/util.js");
       var IFrameController = /*#__PURE__*/function () {
         function IFrameController(element, src, id) {
-          var _this69 = this;
+          var _this61 = this;
           var onelemload = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
           _classCallCheck(this, IFrameController);
           this._iframe = document.createElement("iframe");
@@ -9818,7 +10722,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
           if (!element.hasAttribute("sameorigin")) {
             this._iframe.onload = function () {
               if (onelemload) {
-                onelemload(_this69._iframe);
+                onelemload(_this61._iframe);
               }
             };
           }
@@ -9935,13 +10839,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         _inherits(EWallElement, _BaseElement4);
         var _super76 = _createSuper(EWallElement);
         function EWallElement() {
-          var _this70;
+          var _this62;
           _classCallCheck(this, EWallElement);
-          _this70 = _super76.call(this);
+          _this62 = _super76.call(this);
           var tag = document.createElement("script");
           tag.src = "https://cdn.8thwall.com/web/iframe/iframe.js";
           tag.defer = true;
-          return _this70;
+          return _this62;
         }
         _createClass(EWallElement, [{
           key: "connectedCallback",