@sketch-hq/sketch-web-renderer 12.0.0 → 12.0.1

package/out/web-renderer/index-eb861739.js

@@ -0,0 +1,4742 @@
+import React, { useRef, useLayoutEffect, useCallback, createContext, useContext, useReducer, useMemo, useEffect, useState } from 'react';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _construct(t, e, r) {
+  if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
+  var o = [null];
+  o.push.apply(o, e);
+  var p = new (t.bind.apply(t, o))();
+  return r && _setPrototypeOf(p, r.prototype), p;
+}
+function _defineProperties(e, r) {
+  for (var t = 0; t < r.length; t++) {
+    var o = r[t];
+    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
+  }
+}
+function _createClass(e, r, t) {
+  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
+    writable: !1
+  }), e;
+}
+function _createForOfIteratorHelper(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (!t) {
+    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+      t && (r = t);
+      var n = 0,
+        F = function () {};
+      return {
+        s: F,
+        n: function () {
+          return n >= r.length ? {
+            done: !0
+          } : {
+            done: !1,
+            value: r[n++]
+          };
+        },
+        e: function (r) {
+          throw r;
+        },
+        f: F
+      };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var o,
+    a = !0,
+    u = !1;
+  return {
+    s: function () {
+      t = t.call(r);
+    },
+    n: function () {
+      var r = t.next();
+      return a = r.done, r;
+    },
+    e: function (r) {
+      u = !0, o = r;
+    },
+    f: function () {
+      try {
+        a || null == t.return || t.return();
+      } finally {
+        if (u) throw o;
+      }
+    }
+  };
+}
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+    return t.__proto__ || Object.getPrototypeOf(t);
+  }, _getPrototypeOf(t);
+}
+function _inherits(t, e) {
+  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
+  t.prototype = Object.create(e && e.prototype, {
+    constructor: {
+      value: t,
+      writable: !0,
+      configurable: !0
+    }
+  }), Object.defineProperty(t, "prototype", {
+    writable: !1
+  }), e && _setPrototypeOf(t, e);
+}
+function _isNativeFunction(t) {
+  try {
+    return -1 !== Function.toString.call(t).indexOf("[native code]");
+  } catch (n) {
+    return "function" == typeof t;
+  }
+}
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function () {
+    return !!t;
+  })();
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _possibleConstructorReturn(t, e) {
+  if (e && ("object" == typeof e || "function" == typeof e)) return e;
+  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
+  return _assertThisInitialized(t);
+}
+function _regeneratorRuntime() {
+  _regeneratorRuntime = function () {
+    return e;
+  };
+  var t,
+    e = {},
+    r = Object.prototype,
+    n = r.hasOwnProperty,
+    o = Object.defineProperty || function (t, e, r) {
+      t[e] = r.value;
+    },
+    i = "function" == typeof Symbol ? Symbol : {},
+    a = i.iterator || "@@iterator",
+    c = i.asyncIterator || "@@asyncIterator",
+    u = i.toStringTag || "@@toStringTag";
+  function define(t, e, r) {
+    return Object.defineProperty(t, e, {
+      value: r,
+      enumerable: !0,
+      configurable: !0,
+      writable: !0
+    }), t[e];
+  }
+  try {
+    define({}, "");
+  } catch (t) {
+    define = function (t, e, r) {
+      return t[e] = r;
+    };
+  }
+  function wrap(t, e, r, n) {
+    var i = e && e.prototype instanceof Generator ? e : Generator,
+      a = Object.create(i.prototype),
+      c = new Context(n || []);
+    return o(a, "_invoke", {
+      value: makeInvokeMethod(t, r, c)
+    }), a;
+  }
+  function tryCatch(t, e, r) {
+    try {
+      return {
+        type: "normal",
+        arg: t.call(e, r)
+      };
+    } catch (t) {
+      return {
+        type: "throw",
+        arg: t
+      };
+    }
+  }
+  e.wrap = wrap;
+  var h = "suspendedStart",
+    l = "suspendedYield",
+    f = "executing",
+    s = "completed",
+    y = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  var p = {};
+  define(p, a, function () {
+    return this;
+  });
+  var d = Object.getPrototypeOf,
+    v = d && d(d(values([])));
+  v && v !== r && n.call(v, a) && (p = v);
+  var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
+  function defineIteratorMethods(t) {
+    ["next", "throw", "return"].forEach(function (e) {
+      define(t, e, function (t) {
+        return this._invoke(e, t);
+      });
+    });
+  }
+  function AsyncIterator(t, e) {
+    function invoke(r, o, i, a) {
+      var c = tryCatch(t[r], t, o);
+      if ("throw" !== c.type) {
+        var u = c.arg,
+          h = u.value;
+        return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
+          invoke("next", t, i, a);
+        }, function (t) {
+          invoke("throw", t, i, a);
+        }) : e.resolve(h).then(function (t) {
+          u.value = t, i(u);
+        }, function (t) {
+          return invoke("throw", t, i, a);
+        });
+      }
+      a(c.arg);
+    }
+    var r;
+    o(this, "_invoke", {
+      value: function (t, n) {
+        function callInvokeWithMethodAndArg() {
+          return new e(function (e, r) {
+            invoke(t, n, e, r);
+          });
+        }
+        return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+      }
+    });
+  }
+  function makeInvokeMethod(e, r, n) {
+    var o = h;
+    return function (i, a) {
+      if (o === f) throw Error("Generator is already running");
+      if (o === s) {
+        if ("throw" === i) throw a;
+        return {
+          value: t,
+          done: !0
+        };
+      }
+      for (n.method = i, n.arg = a;;) {
+        var c = n.delegate;
+        if (c) {
+          var u = maybeInvokeDelegate(c, n);
+          if (u) {
+            if (u === y) continue;
+            return u;
+          }
+        }
+        if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
+          if (o === h) throw o = s, n.arg;
+          n.dispatchException(n.arg);
+        } else "return" === n.method && n.abrupt("return", n.arg);
+        o = f;
+        var p = tryCatch(e, r, n);
+        if ("normal" === p.type) {
+          if (o = n.done ? s : l, p.arg === y) continue;
+          return {
+            value: p.arg,
+            done: n.done
+          };
+        }
+        "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
+      }
+    };
+  }
+  function maybeInvokeDelegate(e, r) {
+    var n = r.method,
+      o = e.iterator[n];
+    if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
+    var i = tryCatch(o, e.iterator, r.arg);
+    if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
+    var a = i.arg;
+    return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
+  }
+  function pushTryEntry(t) {
+    var e = {
+      tryLoc: t[0]
+    };
+    1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
+  }
+  function resetTryEntry(t) {
+    var e = t.completion || {};
+    e.type = "normal", delete e.arg, t.completion = e;
+  }
+  function Context(t) {
+    this.tryEntries = [{
+      tryLoc: "root"
+    }], t.forEach(pushTryEntry, this), this.reset(!0);
+  }
+  function values(e) {
+    if (e || "" === e) {
+      var r = e[a];
+      if (r) return r.call(e);
+      if ("function" == typeof e.next) return e;
+      if (!isNaN(e.length)) {
+        var o = -1,
+          i = function next() {
+            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
+            return next.value = t, next.done = !0, next;
+          };
+        return i.next = i;
+      }
+    }
+    throw new TypeError(typeof e + " is not iterable");
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
+    value: GeneratorFunctionPrototype,
+    configurable: !0
+  }), o(GeneratorFunctionPrototype, "constructor", {
+    value: GeneratorFunction,
+    configurable: !0
+  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
+    var e = "function" == typeof t && t.constructor;
+    return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
+  }, e.mark = function (t) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
+  }, e.awrap = function (t) {
+    return {
+      __await: t
+    };
+  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
+    return this;
+  }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
+    void 0 === i && (i = Promise);
+    var a = new AsyncIterator(wrap(t, r, n, o), i);
+    return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
+      return t.done ? t.value : a.next();
+    });
+  }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
+    return this;
+  }), define(g, "toString", function () {
+    return "[object Generator]";
+  }), e.keys = function (t) {
+    var e = Object(t),
+      r = [];
+    for (var n in e) r.push(n);
+    return r.reverse(), function next() {
+      for (; r.length;) {
+        var t = r.pop();
+        if (t in e) return next.value = t, next.done = !1, next;
+      }
+      return next.done = !0, next;
+    };
+  }, e.values = values, Context.prototype = {
+    constructor: Context,
+    reset: function (e) {
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
+    },
+    stop: function () {
+      this.done = !0;
+      var t = this.tryEntries[0].completion;
+      if ("throw" === t.type) throw t.arg;
+      return this.rval;
+    },
+    dispatchException: function (e) {
+      if (this.done) throw e;
+      var r = this;
+      function handle(n, o) {
+        return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
+      }
+      for (var o = this.tryEntries.length - 1; o >= 0; --o) {
+        var i = this.tryEntries[o],
+          a = i.completion;
+        if ("root" === i.tryLoc) return handle("end");
+        if (i.tryLoc <= this.prev) {
+          var c = n.call(i, "catchLoc"),
+            u = n.call(i, "finallyLoc");
+          if (c && u) {
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
+          } else if (c) {
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+          } else {
+            if (!u) throw Error("try statement without catch or finally");
+            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
+          }
+        }
+      }
+    },
+    abrupt: function (t, e) {
+      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
+        var o = this.tryEntries[r];
+        if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
+          var i = o;
+          break;
+        }
+      }
+      i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
+      var a = i ? i.completion : {};
+      return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
+    },
+    complete: function (t, e) {
+      if ("throw" === t.type) throw t.arg;
+      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
+    },
+    finish: function (t) {
+      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+        var r = this.tryEntries[e];
+        if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
+      }
+    },
+    catch: function (t) {
+      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+        var r = this.tryEntries[e];
+        if (r.tryLoc === t) {
+          var n = r.completion;
+          if ("throw" === n.type) {
+            var o = n.arg;
+            resetTryEntry(r);
+          }
+          return o;
+        }
+      }
+      throw Error("illegal catch attempt");
+    },
+    delegateYield: function (e, r, n) {
+      return this.delegate = {
+        iterator: values(e),
+        resultName: r,
+        nextLoc: n
+      }, "next" === this.method && (this.arg = t), y;
+    }
+  }, e;
+}
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+function _wrapNativeSuper(t) {
+  var r = "function" == typeof Map ? new Map() : void 0;
+  return _wrapNativeSuper = function (t) {
+    if (null === t || !_isNativeFunction(t)) return t;
+    if ("function" != typeof t) throw new TypeError("Super expression must either be null or a function");
+    if (void 0 !== r) {
+      if (r.has(t)) return r.get(t);
+      r.set(t, Wrapper);
+    }
+    function Wrapper() {
+      return _construct(t, arguments, _getPrototypeOf(this).constructor);
+    }
+    return Wrapper.prototype = Object.create(t.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: !1,
+        writable: !0,
+        configurable: !0
+      }
+    }), _setPrototypeOf(Wrapper, t);
+  }, _wrapNativeSuper(t);
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var _extendStatics = function extendStatics(d, b) {
+  _extendStatics = Object.setPrototypeOf || {
+    __proto__: []
+  } instanceof Array && function (d, b) {
+    d.__proto__ = b;
+  } || function (d, b) {
+    for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+  };
+  return _extendStatics(d, b);
+};
+function __extends(d, b) {
+  if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+  _extendStatics(d, b);
+  function __() {
+    this.constructor = d;
+  }
+  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+var _assign = function __assign() {
+  _assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return _assign.apply(this, arguments);
+};
+function __awaiter(thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+}
+function __generator(thisArg, body) {
+  var _ = {
+      label: 0,
+      sent: function sent() {
+        if (t[0] & 1) throw t[1];
+        return t[1];
+      },
+      trys: [],
+      ops: []
+    },
+    f,
+    y,
+    t,
+    g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+    while (g && (g = 0, op[0] && (_ = 0)), _) try {
+      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+      if (y = 0, t) op = [op[0] & 2, t.value];
+      switch (op[0]) {
+        case 0:
+        case 1:
+          t = op;
+          break;
+        case 4:
+          _.label++;
+          return {
+            value: op[1],
+            done: false
+          };
+        case 5:
+          _.label++;
+          y = op[1];
+          op = [0];
+          continue;
+        case 7:
+          op = _.ops.pop();
+          _.trys.pop();
+          continue;
+        default:
+          if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+            _ = 0;
+            continue;
+          }
+          if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+            _.label = op[1];
+            break;
+          }
+          if (op[0] === 6 && _.label < t[1]) {
+            _.label = t[1];
+            t = op;
+            break;
+          }
+          if (t && _.label < t[2]) {
+            _.label = t[2];
+            _.ops.push(op);
+            break;
+          }
+          if (t[2]) _.ops.pop();
+          _.trys.pop();
+          continue;
+      }
+      op = body.call(thisArg, _);
+    } catch (e) {
+      op = [6, e];
+      y = 0;
+    } finally {
+      f = t = 0;
+    }
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+}
+function __spreadArray(to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+function e(e, t, n, r) {
+  return new (n || (n = Promise))(function (o, a) {
+    function i(e) {
+      try {
+        d(r.next(e));
+      } catch (e) {
+        a(e);
+      }
+    }
+    function c(e) {
+      try {
+        d(r["throw"](e));
+      } catch (e) {
+        a(e);
+      }
+    }
+    function d(e) {
+      var t;
+      e.done ? o(e.value) : (t = e.value, t instanceof n ? t : new n(function (e) {
+        e(t);
+      })).then(i, c);
+    }
+    d((r = r.apply(e, t || [])).next());
+  });
+}
+var t = ["geforce 320m", "geforce 8600", "geforce 8600m gt", "geforce 8800 gs", "geforce 8800 gt", "geforce 9400", "geforce 9400m g", "geforce 9400m", "geforce 9600m gt", "geforce 9600m", "geforce fx go5200", "geforce gt 120", "geforce gt 130", "geforce gt 330m", "geforce gtx 285", "google swiftshader", "intel g41", "intel g45", "intel gma 4500mhd", "intel gma x3100", "intel hd 3000", "intel q45", "legacy", "mali-2", "mali-3", "mali-4", "quadro fx 1500", "quadro fx 4", "quadro fx 5", "radeon hd 2400", "radeon hd 2600", "radeon hd 4670", "radeon hd 4850", "radeon hd 4870", "radeon hd 5670", "radeon hd 5750", "radeon hd 6290", "radeon hd 6300", "radeon hd 6310", "radeon hd 6320", "radeon hd 6490m", "radeon hd 6630m", "radeon hd 6750m", "radeon hd 6770m", "radeon hd 6970m", "sgx 543", "sgx543"];
+function n(e) {
+  return e = e.toLowerCase().replace(/.*angle ?\((.+)\)(?: on vulkan [0-9.]+)?$/i, "$1").replace(/\s(\d{1,2}gb|direct3d.+$)|\(r\)| \([^)]+\)$/g, "").replace(/(?:vulkan|opengl) \d+\.\d+(?:\.\d+)?(?: \((.*)\))?/, "$1");
+}
+var r = "undefined" == typeof window,
+  o = function () {
+    if (r) return;
+    var _window$navigator = window.navigator,
+      e = _window$navigator.userAgent,
+      t = _window$navigator.platform,
+      n = _window$navigator.maxTouchPoints,
+      o = /(iphone|ipod|ipad)/i.test(e),
+      a = "iPad" === t || "MacIntel" === t && n > 0 && !window.MSStream;
+    return {
+      isIpad: a,
+      isMobile: /android/i.test(e) || o || a,
+      isSafari12: /Version\/12.+Safari/.test(e)
+    };
+  }();
+function a(e, t, n) {
+  if (!n) return [t];
+  var r = function (e) {
+      var t = "\n    precision highp float;\n    attribute vec3 aPosition;\n    varying float vvv;\n    void main() {\n      vvv = 0.31622776601683794;\n      gl_Position = vec4(aPosition, 1.0);\n    }\n  ",
+        n = "\n    precision highp float;\n    varying float vvv;\n    void main() {\n      vec4 enc = vec4(1.0, 255.0, 65025.0, 16581375.0) * vvv;\n      enc = fract(enc);\n      enc -= enc.yzww * vec4(1.0 / 255.0, 1.0 / 255.0, 1.0 / 255.0, 0.0);\n      gl_FragColor = enc;\n    }\n  ",
+        r = e.createShader(35633),
+        o = e.createShader(35632),
+        a = e.createProgram();
+      if (!(o && r && a)) return;
+      e.shaderSource(r, t), e.shaderSource(o, n), e.compileShader(r), e.compileShader(o), e.attachShader(a, r), e.attachShader(a, o), e.linkProgram(a), e.detachShader(a, r), e.detachShader(a, o), e.deleteShader(r), e.deleteShader(o), e.useProgram(a);
+      var i = e.createBuffer();
+      e.bindBuffer(34962, i), e.bufferData(34962, new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]), 35044);
+      var c = e.getAttribLocation(a, "aPosition");
+      e.vertexAttribPointer(c, 3, 5126, !1, 0, 0), e.enableVertexAttribArray(c), e.clearColor(1, 1, 1, 1), e.clear(16384), e.viewport(0, 0, 1, 1), e.drawArrays(4, 0, 3);
+      var d = new Uint8Array(4);
+      return e.readPixels(0, 0, 1, 1, 6408, 5121, d), e.deleteProgram(a), e.deleteBuffer(i), d.join("");
+    }(e),
+    a = "801621810",
+    i = "8016218135",
+    c = "80162181161",
+    d = (null == o ? void 0 : o.isIpad) ? [["a7", c, 12], ["a8", i, 15], ["a8x", i, 15], ["a9", i, 15], ["a9x", i, 15], ["a10", i, 15], ["a10x", i, 15], ["a12", a, 15], ["a12x", a, 15], ["a12z", a, 15], ["a14", a, 15], ["m1", a, 15]] : [["a7", c, 12], ["a8", i, 12], ["a9", i, 15], ["a10", i, 15], ["a11", a, 15], ["a12", a, 15], ["a13", a, 15], ["a14", a, 15]];
+  var l;
+  "80162181255" === r ? l = d.filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 3),
+      e = _ref2[2];
+    return e >= 14;
+  }) : (l = d.filter(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      e = _ref4[1];
+    return e === r;
+  }), l.length || (l = d));
+  return l.map(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 1),
+      e = _ref6[0];
+    return "apple ".concat(e, " gpu");
+  });
+}
+var i = /*#__PURE__*/function (_Error) {
+  function i(e) {
+    var _this;
+    _classCallCheck(this, i);
+    _this = _callSuper(this, i, [e]), Object.setPrototypeOf(_assertThisInitialized(_this), (this instanceof i ? this.constructor : void 0).prototype);
+    return _this;
+  }
+  _inherits(i, _Error);
+  return _createClass(i);
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+var c = [],
+  d = [];
+function l(e, t) {
+  if (e === t) return 0;
+  var n = e;
+  e.length > t.length && (e = t, t = n);
+  var r = e.length,
+    o = t.length;
+  for (; r > 0 && e.charCodeAt(~-r) === t.charCodeAt(~-o);) r--, o--;
+  var a,
+    i = 0;
+  for (; i < r && e.charCodeAt(i) === t.charCodeAt(i);) i++;
+  if (r -= i, o -= i, 0 === r) return o;
+  var l,
+    s,
+    f = 0,
+    u = 0,
+    h = 0;
+  for (; u < r;) d[u] = e.charCodeAt(i + u), c[u] = ++u;
+  for (; h < o;) for (a = t.charCodeAt(i + h), l = h++, f = h, u = 0; u < r; u++) s = a === d[u] ? l : l + 1, l = c[u], f = c[u] = l > f ? s > f ? f + 1 : s : s > l ? l + 1 : s;
+  return f;
+}
+function s(e) {
+  return null != e;
+}
+var f = function f() {
+  var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref7$mobileTiers = _ref7.mobileTiers,
+    c = _ref7$mobileTiers === void 0 ? [0, 15, 30, 60] : _ref7$mobileTiers,
+    _ref7$desktopTiers = _ref7.desktopTiers,
+    d = _ref7$desktopTiers === void 0 ? [0, 15, 30, 60] : _ref7$desktopTiers,
+    _ref7$override = _ref7.override,
+    f = _ref7$override === void 0 ? {} : _ref7$override,
+    u = _ref7.glContext,
+    _ref7$failIfMajorPerf = _ref7.failIfMajorPerformanceCaveat,
+    h = _ref7$failIfMajorPerf === void 0 ? !1 : _ref7$failIfMajorPerf,
+    _ref7$benchmarksURL = _ref7.benchmarksURL,
+    g = _ref7$benchmarksURL === void 0 ? "https://unpkg.com/detect-gpu@5.0.25/dist/benchmarks" : _ref7$benchmarksURL;
+  return e(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    var p, _f$isIpad, m, _f$isMobile, v, _f$screenSize, w, _f$loadBenchmarks, x, A, P, b, S, _e, _t, y, _e4, _y$, C, E, L, M, $, _e5;
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          p = {};
+          if (!r) {
+            _context3.next = 3;
+            break;
+          }
+          return _context3.abrupt("return", {
+            tier: 0,
+            type: "SSR"
+          });
+        case 3:
+          _f$isIpad = f.isIpad, m = _f$isIpad === void 0 ? !!(null == o ? void 0 : o.isIpad) : _f$isIpad, _f$isMobile = f.isMobile, v = _f$isMobile === void 0 ? !!(null == o ? void 0 : o.isMobile) : _f$isMobile, _f$screenSize = f.screenSize, w = _f$screenSize === void 0 ? window.screen : _f$screenSize, _f$loadBenchmarks = f.loadBenchmarks, x = _f$loadBenchmarks === void 0 ? function (t) {
+            return e(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+              var e;
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.next = 2;
+                    return fetch("".concat(g, "/").concat(t)).then(function (e) {
+                      return e.json();
+                    });
+                  case 2:
+                    e = _context.sent;
+                    if (!(parseInt(e.shift().split(".")[0], 10) < 4)) {
+                      _context.next = 5;
+                      break;
+                    }
+                    throw new i("Detect GPU benchmark data is out of date. Please update to version 4x");
+                  case 5:
+                    return _context.abrupt("return", e);
+                  case 6:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+          } : _f$loadBenchmarks;
+          A = f.renderer;
+          P = function P(e, t, n, r, o) {
+            return {
+              device: o,
+              fps: r,
+              gpu: n,
+              isMobile: v,
+              tier: e,
+              type: t
+            };
+          };
+          S = "";
+          if (!A) {
+            _context3.next = 11;
+            break;
+          }
+          A = n(A), b = [A];
+          _context3.next = 18;
+          break;
+        case 11:
+          _e = u || function (e) {
+            var t = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+            var n = {
+              alpha: !1,
+              antialias: !1,
+              depth: !1,
+              failIfMajorPerformanceCaveat: t,
+              powerPreference: "high-performance",
+              stencil: !1
+            };
+            e && delete n.powerPreference;
+            var r = window.document.createElement("canvas"),
+              o = r.getContext("webgl", n) || r.getContext("experimental-webgl", n);
+            return null != o ? o : void 0;
+          }(null == o ? void 0 : o.isSafari12, h);
+          if (_e) {
+            _context3.next = 14;
+            break;
+          }
+          return _context3.abrupt("return", P(0, "WEBGL_UNSUPPORTED"));
+        case 14:
+          _t = _e.getExtension("WEBGL_debug_renderer_info");
+          if (!(_t && (A = _e.getParameter(_t.UNMASKED_RENDERER_WEBGL)), !A)) {
+            _context3.next = 17;
+            break;
+          }
+          return _context3.abrupt("return", P(1, "FALLBACK"));
+        case 17:
+          S = A, A = n(A), b = function (e, t, n) {
+            return "apple gpu" === t ? a(e, t, n) : [t];
+          }(_e, A, v);
+        case 18:
+          _context3.next = 20;
+          return Promise.all(b.map(function (t) {
+            var n;
+            return e(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+              var e, r, o, a, c, d, s, f, u, _ref12, _ref13, h, g, A, _window, P, b, _iterator, _step, _e2, _e3, _t3, _n2, _r, _o, _u, _u2, S, y;
+              return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                while (1) switch (_context2.prev = _context2.next) {
+                  case 0:
+                    e = function (e) {
+                      var t = v ? ["adreno", "apple", "mali-t", "mali", "nvidia", "powervr", "samsung"] : ["intel", "apple", "amd", "radeon", "nvidia", "geforce"];
+                      for (var _i = 0, _t2 = t; _i < _t2.length; _i++) {
+                        var _n = _t2[_i];
+                        if (e.includes(_n)) return _n;
+                      }
+                    }(t);
+                    if (e) {
+                      _context2.next = 3;
+                      break;
+                    }
+                    return _context2.abrupt("return");
+                  case 3:
+                    r = "".concat(v ? "m" : "d", "-").concat(e).concat(m ? "-ipad" : "", ".json"), o = p[r] = null !== (n = p[r]) && void 0 !== n ? n : x(r);
+                    _context2.prev = 4;
+                    _context2.next = 7;
+                    return o;
+                  case 7:
+                    a = _context2.sent;
+                    _context2.next = 15;
+                    break;
+                  case 10:
+                    _context2.prev = 10;
+                    _context2.t0 = _context2["catch"](4);
+                    if (!(_context2.t0 instanceof i)) {
+                      _context2.next = 14;
+                      break;
+                    }
+                    throw _context2.t0;
+                  case 14:
+                    return _context2.abrupt("return");
+                  case 15:
+                    c = function (e) {
+                      var t;
+                      var n = (e = e.replace(/\([^)]+\)/, "")).match(/\d+/) || e.match(/(\W|^)([A-Za-z]{1,3})(\W|$)/g);
+                      return null !== (t = null == n ? void 0 : n.join("").replace(/\W|amd/g, "")) && void 0 !== t ? t : "";
+                    }(t);
+                    d = a.filter(function (_ref8) {
+                      var _ref9 = _slicedToArray(_ref8, 2),
+                        e = _ref9[1];
+                      return e === c;
+                    });
+                    d.length || (d = a.filter(function (_ref10) {
+                      var _ref11 = _slicedToArray(_ref10, 1),
+                        e = _ref11[0];
+                      return e.includes(t);
+                    }));
+                    s = d.length;
+                    if (!(0 === s)) {
+                      _context2.next = 21;
+                      break;
+                    }
+                    return _context2.abrupt("return");
+                  case 21:
+                    f = t.split(/[.,()\[\]/\s]/g).sort().filter(function (e, t, n) {
+                      return 0 === t || e !== n[t - 1];
+                    }).join(" ");
+                    _ref12 = s > 1 ? d.map(function (e) {
+                      return [e, l(f, e[2])];
+                    }).sort(function (_ref14, _ref15) {
+                      var _ref16 = _slicedToArray(_ref14, 2),
+                        e = _ref16[1];
+                      var _ref17 = _slicedToArray(_ref15, 2),
+                        t = _ref17[1];
+                      return e - t;
+                    })[0][0] : d[0], _ref13 = _slicedToArray(_ref12, 5), h = _ref13[0], g = _ref13[4], A = Number.MAX_VALUE;
+                    _window = window, P = _window.devicePixelRatio, b = w.width * P * w.height * P;
+                    _iterator = _createForOfIteratorHelper(g);
+                    try {
+                      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                        _e2 = _step.value;
+                        _e3 = _slicedToArray(_e2, 2), _t3 = _e3[0], _n2 = _e3[1], _r = _t3 * _n2, _o = Math.abs(b - _r);
+                        _o < A && (A = _o, u = _e2);
+                      }
+                    } catch (err) {
+                      _iterator.e(err);
+                    } finally {
+                      _iterator.f();
+                    }
+                    if (u) {
+                      _context2.next = 28;
+                      break;
+                    }
+                    return _context2.abrupt("return");
+                  case 28:
+                    _u = u, _u2 = _slicedToArray(_u, 4), S = _u2[2], y = _u2[3];
+                    return _context2.abrupt("return", [A, S, h, y]);
+                  case 30:
+                  case "end":
+                    return _context2.stop();
+                }
+              }, _callee2, null, [[4, 10]]);
+            }));
+          }));
+        case 20:
+          y = _context3.sent.filter(s).sort(function (_ref18, _ref19) {
+            var _ref20 = _slicedToArray(_ref18, 2),
+              _ref20$ = _ref20[0],
+              e = _ref20$ === void 0 ? Number.MAX_VALUE : _ref20$,
+              t = _ref20[1];
+            var _ref21 = _slicedToArray(_ref19, 2),
+              _ref21$ = _ref21[0],
+              n = _ref21$ === void 0 ? Number.MAX_VALUE : _ref21$,
+              r = _ref21[1];
+            return e === n ? t - r : e - n;
+          });
+          if (y.length) {
+            _context3.next = 24;
+            break;
+          }
+          _e4 = t.find(function (e) {
+            return A.includes(e);
+          });
+          return _context3.abrupt("return", _e4 ? P(0, "BLOCKLISTED", _e4) : P(1, "FALLBACK", "".concat(A, " (").concat(S, ")")));
+        case 24:
+          _y$ = _slicedToArray(y[0], 4), C = _y$[1], E = _y$[2], L = _y$[3];
+          if (!(-1 === C)) {
+            _context3.next = 27;
+            break;
+          }
+          return _context3.abrupt("return", P(0, "BLOCKLISTED", E, C, L));
+        case 27:
+          M = v ? c : d;
+          $ = 0;
+          for (_e5 = 0; _e5 < M.length; _e5++) C >= M[_e5] && ($ = _e5);
+          return _context3.abrupt("return", P($, "BENCHMARK", E, C, L));
+        case 31:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+};
+
+var WebRendererError = /** @class */ (function (_super) {
+    __extends(WebRendererError, _super);
+    function WebRendererError(code, message, cause) {
+        var _newTarget = this.constructor;
+        var _this = _super.call(this, "(".concat(code, ") ").concat(message)) || this;
+        _this.code = code;
+        _this.cause = cause;
+        _this.name = WebRendererError.name;
+        Object.setPrototypeOf(_this, _newTarget.prototype);
+        return _this;
+    }
+    return WebRendererError;
+}(Error));
+
+var WebRendererMode;
+(function (WebRendererMode) {
+    WebRendererMode["debug"] = "debug";
+    WebRendererMode["release"] = "release";
+})(WebRendererMode || (WebRendererMode = {}));
+
+function isDefinedPresentationManifestArtboard(value) {
+    return typeof value !== 'undefined';
+}
+
+var PrototypeResizeMode;
+(function (PrototypeResizeMode) {
+    PrototypeResizeMode["Fit"] = "Fit";
+    PrototypeResizeMode["FillWidth"] = "FillWidth";
+    PrototypeResizeMode["ActualSize"] = "ActualSize";
+})(PrototypeResizeMode || (PrototypeResizeMode = {}));
+
+/**
+ * Very simple event emitter that can be extended from any class
+ */
+var EventEmitter = /** @class */ (function () {
+    function EventEmitter() {
+        this.listeners = {};
+    }
+    EventEmitter.prototype.on = function (event, callback) {
+        var _a, _b;
+        this.listeners[event] = (_a = this.listeners[event]) !== null && _a !== void 0 ? _a : new Set();
+        (_b = this.listeners[event]) === null || _b === void 0 ? void 0 : _b.add(callback);
+    };
+    EventEmitter.prototype.off = function (event, callback) {
+        var _a;
+        (_a = this.listeners[event]) === null || _a === void 0 ? void 0 : _a.delete(callback);
+    };
+    /**
+     * Forward a specific event to the given target
+     */
+    EventEmitter.prototype.forwardEvent = function (target, event) {
+        var callback = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            target.emit.apply(target, __spreadArray([event], args, false));
+        };
+        this.on(event, callback);
+    };
+    EventEmitter.prototype.emit = function (event) {
+        var args = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args[_i - 1] = arguments[_i];
+        }
+        var listeners = this.listeners[event];
+        if (listeners === null || listeners === void 0 ? void 0 : listeners.size) {
+            listeners.forEach(function (listener) {
+                // Invoke listeners on next tick. This helps avoid tricky situations
+                // where handlers potentially syncronously dispose the renderer or
+                // trigger other large internal state changes in the same call stack as
+                // emit(...) is invoked.
+                Promise.resolve().then(function () {
+                    listener.apply(void 0, args);
+                });
+            });
+        }
+    };
+    EventEmitter.prototype.detachAllListeners = function () {
+        this.listeners = {};
+    };
+    return EventEmitter;
+}());
+
+/**
+ * ListenersCollector
+ * It's a wrapper around addEventListener, which collects
+ * all the callbacks, and provides a way to remove all of them
+ */
+var ListenersCollector = /** @class */ (function () {
+    function ListenersCollector(disabled) {
+        if (disabled === void 0) { disabled = false; }
+        this.removeListenerCallbacks = [];
+        this.disabled = disabled;
+    }
+    ListenersCollector.prototype.add = function (scope, event, callback, options) {
+        var _this = this;
+        var safeguardedCallback = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            if (_this.disabled) {
+                return;
+            }
+            callback.apply(void 0, args);
+        };
+        scope.addEventListener(event, safeguardedCallback, options);
+        var remove = function () {
+            scope.removeEventListener(event, safeguardedCallback, options);
+        };
+        this.removeListenerCallbacks.push(remove);
+        // Returns the function to remove the event
+        return remove;
+    };
+    ListenersCollector.prototype.dispose = function () {
+        this.removeListenerCallbacks.forEach(function (remove) { return remove(); });
+    };
+    ListenersCollector.prototype.setDisabled = function (disabled) {
+        this.disabled = disabled;
+    };
+    return ListenersCollector;
+}());
+
+/**
+ * Initial dummy structure for feature flags
+ */
+var DefaultFeatureFlags = {
+    delayedDraw: true,
+    offscreenCanvas: false,
+    useDirtyRectsRendering: true,
+    safariWebGL2: false,
+    // When this is true, the canvas won't allow to pan/zoom outside the page boundaries
+    pageBoundariesLimit: false,
+    // When this is true, the canvas will send user events through the rendering scene.
+    // This is useful to check which layer was clicked/hovered, etc.
+    canvasLayersEvents: false,
+};
+
+// Taken from https://gist.github.com/Craga89/2829457
+var getiOSVersion = function (userAgent) {
+    return parseFloat(('' +
+        (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(userAgent) || [0, ''])[1])
+        .replace('undefined', '3_2')
+        .replace('_', '.')
+        .replace('_', '')) || false;
+};
+var SAFARI_USER_AGENT_REGEX = /(iPhone|Macintosh|iPad)(.*)(Version)\/(0|[1-9]\d*)\.(0|[1-9]\d*)\.?(0|[1-9]\d*)?/;
+/**
+ * Parses a Safari user agent string into structured data. If the user agent string
+ * isn't for a Safari browser, null is returned.
+ *
+ * User Agent parsing is generally discouraged and can never be 100% reliable. So favour
+ * feature detection when possible, and do not use this method for critical functionality.
+ */
+var parseSafariUserAgent = function (userAgent) {
+    if (userAgent === void 0) { userAgent = window.navigator.userAgent; }
+    if (userAgent.includes('Chrome/') ||
+        userAgent.includes('Chromium/') ||
+        userAgent.includes('Opera/') ||
+        userAgent.includes('Firefox/'))
+        return null;
+    var match = userAgent.match(SAFARI_USER_AGENT_REGEX);
+    if (!match)
+        return null;
+    var hardware = match[1];
+    if (hardware !== 'Macintosh' && hardware !== 'iPad' && hardware !== 'iPhone')
+        return null;
+    return {
+        hardware: hardware,
+        version: {
+            major: parseInt(match[4]) || 0,
+            minor: parseInt(match[5]) || 0,
+            patch: parseInt(match[6]) || 0,
+        },
+    };
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function debounce(callback, delayMs) {
+    var timeoutId;
+    function debouncedCallback() {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(function () {
+            callback.apply(void 0, args);
+        }, delayMs);
+    }
+    /**
+     * Cancel the potentially scheduled execution.
+     * Call this function to clean things up properly.
+     */
+    debouncedCallback.cancel = function () {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+    };
+    return debouncedCallback;
+}
+/**
+ * Extract the correct mouse position
+ * @param e: The type can be MouseEvent or TouchEvent or GestureEvent, but we are using any because for some reason the pageX/Y is not included inside the TouchEvent type definition.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function extractPointer(e) {
+    var _a, _b, _c, _d, _e;
+    // If the touches array is empty, but the changedTouches is not, it means that all the fingers were lifted from the screen,
+    // and the changed touches contains the position of the last finger that was lifted.
+    // The changed touches might contain more fingers, in case multiple fingers were lifted at the same time,
+    // in that case we would need to find the mid point, but we don't really need to handle that, because no user interaction depends on that
+    var touch = (_b = (_a = e.touches) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : (_c = e.changedTouches) === null || _c === void 0 ? void 0 : _c[0];
+    return {
+        x: (_d = touch === null || touch === void 0 ? void 0 : touch.clientX) !== null && _d !== void 0 ? _d : e.clientX,
+        y: (_e = touch === null || touch === void 0 ? void 0 : touch.clientY) !== null && _e !== void 0 ? _e : e.clientY,
+    };
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+function getSupportedWebGLVersion(deviceInfo) {
+    // We are forcing WebGL 1 on AMD Radeon Pro 5xxx series
+    // On macs with this GPU, Chrome scrambles the vertices of the triangles sent to the gpu
+    // causing incorrect renderings. See https://bugs.chromium.org/p/chromium/issues/detail?id=1301748&q=webgl&can=2
+    // GH ticket: https://github.com/sketch-hq/Cloud/issues/17439
+    var amdRadeonRegex = /amd\sradeon\s(pro|rx)\s5\d\d\d/gi;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var isChrome = Boolean(window.chrome);
+    if (isChrome && deviceInfo.gpu && amdRadeonRegex.test(deviceInfo.gpu)) {
+        return 1;
+    }
+    // Safari 15 has support for WebGL 2, but their implementation
+    // is still slow and filled with bugs, so we are forcing WebGL 1
+    // until we see that WebGL 2 starts working correctly on Safari
+    if (parseSafariUserAgent() && !DefaultFeatureFlags.safariWebGL2)
+        return 1;
+    if (typeof WebGL2RenderingContext !== 'undefined')
+        return 2;
+    return 1;
+}
+function convertEmbindVectorToArray(vector) {
+    if (!vector)
+        return [];
+    var result = [];
+    for (var i = 0; i < vector.size(); i++) {
+        result.push(vector.get(i));
+    }
+    return result;
+}
+/**
+ * Keep in mind that this check is not entirely accurate on Windows machines.
+ * On Safari for MacOS, it's fairly accurate. That's where we use it.
+ * @see: https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript
+ */
+function isTouchDevice() {
+    return ('ontouchstart' in window ||
+        navigator.maxTouchPoints > 0 ||
+        navigator.msMaxTouchPoints > 0);
+}
+/**
+ * Remove all the keys that have an undefined value.
+ * The function doesn't edit the given object directly, but it creates and returns a copy
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function removeUndefinedKeys(targetObject) {
+    var copiedObject = _assign({}, targetObject);
+    Object.keys(copiedObject).forEach(function (key) {
+        if (typeof copiedObject[key] !== 'undefined')
+            return;
+        delete copiedObject[key];
+    });
+    return copiedObject;
+}
+/**
+ * Prevent to bind both onClick and touchEnd events by only binding the required event based on the device.
+ * The function is designed to be used with React.
+ *
+ * How to use:
+ *
+ * <div {...touchableClick(myCallback) />
+ */
+function touchableClick(callback) {
+    return isTouchDevice() ? { onTouchEnd: callback } : { onClick: callback };
+}
+var safePtrAccess = function (embindPtr) {
+    /**
+     * We are preventing JS to throw an error when accessing
+     * the internal methods of a pointer when it is deleted.
+     *
+     * Given "$$.count.value" are internal properties of emscripten
+     * we re-type prFile as any
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if ((embindPtr === null || embindPtr === void 0 ? void 0 : embindPtr.$$.count.value) === 0) {
+        return null;
+    }
+    return embindPtr;
+};
+
+var GestureManager = /** @class */ (function (_super) {
+    __extends(GestureManager, _super);
+    function GestureManager(target, disabled) {
+        if (disabled === void 0) { disabled = false; }
+        var _this = _super.call(this) || this;
+        _this.state = {
+            // The distance between the 2 fingers used to pinch to zoom
+            pinchToZoomLastDistance: 0,
+            lastGestureScale: 1,
+            isCtrlPressed: false,
+        };
+        _this.handleGestureStart = function (e) {
+            e.preventDefault();
+            _this.state.lastGestureScale = e.scale;
+        };
+        _this.handleGestureChange = function (e) {
+            e.preventDefault();
+            var delta = e.scale / _this.state.lastGestureScale;
+            _this.state.lastGestureScale = e.scale;
+            var center = _this.getCorrectPointerPosition(e);
+            _this.emitZoomEvent(delta, center);
+        };
+        _this.handleGestureEnd = function (e) {
+            e.preventDefault();
+        };
+        /**
+         * Update the mouse position and emit the mousemove event
+         */
+        _this.updateMousePosition = function (e) {
+            _this.emit('pointermove', {
+                type: 'mouse',
+                position: _this.getCorrectPointerPosition(e),
+                button: e.button,
+                touchesCount: 0,
+            });
+        };
+        _this.updateGlobalMousePosition = function (e) {
+            _this.emit('globalpointermove', {
+                type: 'mouse',
+                position: _this.getCorrectPointerPosition(e),
+                button: e.button,
+                touchesCount: 0,
+            });
+        };
+        _this.handleTouchStart = function (e) {
+            e.preventDefault();
+            _this.handleTouchPinchToZoomStart(e);
+            _this.emit('pointerdown', {
+                type: 'touch',
+                position: _this.getCorrectPointerPosition(e),
+                button: 0,
+                touchesCount: e.touches.length,
+            });
+        };
+        _this.handleMouseDown = function (e) {
+            // Preventing dragging while keeping the CTRL key pressed.
+            // When holding the CTRL key the user is expected to zoom, so it might cause conflicts with the pan.
+            // But also, on macOS left-clicking while holding the CTRL key opens the context menu,
+            // and when the context menu is open, no mouseup event is triggered after releasing the left click.
+            // We would also need to track the context menu event and treat it as a mouseup, bringing more complexity,
+            // for our own sanity, let's just prevent dragging when this key is pressed
+            if (e.ctrlKey)
+                return;
+            e.preventDefault();
+            _this.emit('pointerdown', {
+                type: 'mouse',
+                position: _this.getCorrectPointerPosition(e),
+                button: e.button,
+                touchesCount: 0,
+            });
+        };
+        _this.handleTouchMove = function (e) {
+            _this.handleTouchPinchToZoomChange(e);
+            _this.emit('pointermove', {
+                type: 'touch',
+                position: _this.getCorrectPointerPosition(e),
+                button: 0,
+                touchesCount: e.touches.length,
+            });
+        };
+        _this.handleMouseMove = function (e) {
+            _this.updateMousePosition(e);
+        };
+        _this.handleGlobalTouchMove = function (e) {
+            _this.emit('globalpointermove', {
+                type: 'touch',
+                position: _this.getCorrectPointerPosition(e),
+                button: 0,
+                touchesCount: e.touches.length,
+            });
+        };
+        _this.handleGlobalMouseMove = function (e) {
+            _this.updateGlobalMousePosition(e);
+        };
+        _this.handleTouchPinchToZoomStart = function (e) {
+            var _a;
+            if (!e.touches || ((_a = e.touches) === null || _a === void 0 ? void 0 : _a.length) < 2)
+                return;
+            _this.state.pinchToZoomLastDistance = _this.calculateDistanceBetweenTouches(e.touches[0], e.touches[1]);
+        };
+        /**
+         * Handle the pinch to zoom scale calculation on touch devices, using the distance
+         * between the first 2 fingers on screen and the middle point between them as zoom center
+         */
+        _this.handleTouchPinchToZoomChange = function (e) {
+            var _a;
+            if (!e.touches || ((_a = e.touches) === null || _a === void 0 ? void 0 : _a.length) < 2)
+                return;
+            var distance = _this.calculateDistanceBetweenTouches(e.touches[0], e.touches[1]);
+            var middlePoint = _this.getCorrectPointerPosition(e);
+            var distanceDelta = distance - _this.state.pinchToZoomLastDistance;
+            var normalisedDelta = 1 + distanceDelta * 0.004;
+            _this.state.pinchToZoomLastDistance = distance;
+            // The pinch to zoom is triggered by the touchstart/touchmove/touched events, and the start/end events are emitted by the touchstart/end.
+            _this.emitZoomEvent(normalisedDelta, middlePoint);
+        };
+        _this.handleTouchEnd = function (e) {
+            var position = _this.getCorrectPointerPosition(e);
+            _this.emit('pointerup', {
+                position: position,
+                type: 'touch',
+                button: 0,
+                touchesCount: e.touches.length,
+            });
+        };
+        _this.handleMouseUp = function (e) {
+            _this.emit('pointerup', {
+                type: 'mouse',
+                position: _this.getCorrectPointerPosition(e),
+                button: e.button,
+                touchesCount: 0,
+            });
+        };
+        _this.debouncedUpdateMousePosition = debounce(_this.updateMousePosition, 40);
+        _this.debouncedUpdateGlobalMousePosition = debounce(_this.updateGlobalMousePosition, 40);
+        _this.handleMouseWheel = function (e) {
+            // Preventing the mousewheel by default when in the canvas,
+            // so we don't get unwanted scrolls, bounces, etc
+            e.preventDefault();
+            // crtlKey is true when the user is using pinch to zoom
+            // not very intuitive, but that's how chrome and firefox work.
+            // BUT, the keydown event for the ctrlKey won't be triggered when
+            // pinching to zoom, so we can track the key pressed and understand
+            // if the user is really pressing the key or pinching to zoom
+            var isPinchToZoom = e.ctrlKey && !_this.state.isCtrlPressed;
+            var isZooming = e.metaKey || isPinchToZoom || _this.state.isCtrlPressed;
+            // The mouse wheel event can be triggered only by a mouse like device,
+            // so we update only the mouse position, we ignore the touch.
+            // The emitted event is debounced, so we don't keep emitting mouse events at a high rate while scrolling.
+            // But also, it's common UX in apps/browsers that while the user scrolls, events are not triggered
+            _this.debouncedUpdateMousePosition(e);
+            _this.debouncedUpdateGlobalMousePosition(e);
+            if (isZooming) {
+                // When the user is pinching to zoom, the deltaY is inverted
+                var invert = isPinchToZoom ? -1 : 1;
+                var center = _this.getCorrectPointerPosition(e);
+                var zoomDelta = 1 + e.deltaY * 0.005 * invert;
+                _this.emitZoomEvent(zoomDelta, center);
+            }
+            else {
+                _this.emit('wheel', 
+                /* delta */ {
+                    x: -e.deltaX,
+                    y: -e.deltaY,
+                }, 
+                /* pointerInfo */ {
+                    type: 'mouse',
+                    position: _this.getCorrectPointerPosition(e),
+                    button: e.button,
+                    touchesCount: 0,
+                });
+            }
+        };
+        _this.target = target;
+        _this.targetBounds = target.getBoundingClientRect();
+        _this.listenersCollector = new ListenersCollector(disabled);
+        _this.addListeners();
+        _this.targetResizeObserver = new ResizeObserver(_this.updateTargetBounds.bind(_this));
+        _this.targetResizeObserver.observe(_this.target);
+        return _this;
+    }
+    GestureManager.prototype.updateTargetBounds = function () {
+        this.targetBounds = this.target.getBoundingClientRect();
+    };
+    GestureManager.prototype.addListeners = function () {
+        this.addTouchEventListeners();
+        this.addMouseEventListeners();
+        this.addKeyboardEventListeners();
+        this.addSafariGesturesEventListeners();
+    };
+    GestureManager.prototype.addKeyboardEventListeners = function () {
+        var _this = this;
+        this.listenersCollector.add(document, 'keydown', function (e) {
+            // Tracking the CTRL key, so we can understand when it's really pressed or not.
+            // Chrome and firefox sets the Event.ctrlKey boolean to true when pinching to zoom, even if that's not true.
+            if (e.key === 'Control')
+                _this.state.isCtrlPressed = true;
+        });
+        this.listenersCollector.add(document, 'keyup', function (e) {
+            if (e.key === 'Control')
+                _this.state.isCtrlPressed = false;
+        });
+        this.listenersCollector.add(document, 'contextmenu', function (e) {
+            // On macOS, if the context menu was opened by using: CTRL + left click, the keyup event wouldn't be triggered
+            if (e.ctrlKey) {
+                _this.state.isCtrlPressed = false;
+            }
+        });
+    };
+    GestureManager.prototype.addMouseEventListeners = function () {
+        this.listenersCollector.add(this.target, 'mousedown', this.handleMouseDown);
+        this.listenersCollector.add(this.target, 'mousemove', this.handleMouseMove);
+        this.listenersCollector.add(document, 'mousemove', this.handleGlobalMouseMove);
+        // Attaching the mouseup listener to the document itself, so we never miss a mouseup event to invalidate a dragging session
+        this.listenersCollector.add(document, 'mouseup', this.handleMouseUp);
+        this.listenersCollector.add(this.target, 'wheel', this.handleMouseWheel);
+    };
+    GestureManager.prototype.addTouchEventListeners = function () {
+        this.listenersCollector.add(this.target, 'touchstart', this.handleTouchStart);
+        this.listenersCollector.add(document, 'touchmove', this.handleGlobalTouchMove, {
+            passive: true,
+            capture: true,
+        });
+        this.listenersCollector.add(this.target, 'touchmove', this.handleTouchMove, { passive: true, capture: true });
+        // Attaching to the document to never miss a touchcancel or touchend event
+        this.listenersCollector.add(document, 'touchcancel', this.handleTouchEnd);
+        this.listenersCollector.add(document, 'touchend', this.handleTouchEnd);
+    };
+    GestureManager.prototype.addSafariGesturesEventListeners = function () {
+        // Add the gesture listeners only for Safari Desktop
+        // These listeners are used for the pinch to zoom gesture
+        // and on touch devices, we use the touch events instead
+        if (isTouchDevice())
+            return;
+        this.listenersCollector.add(this.target, 'gesturestart', this.handleGestureStart, { capture: true });
+        this.listenersCollector.add(this.target, 'gesturechange', this.handleGestureChange, { capture: true });
+        this.listenersCollector.add(this.target, 'gestureend', this.handleGestureEnd, { capture: true });
+    };
+    GestureManager.prototype.clampPointerToTargetBounds = function (pointer) {
+        return {
+            x: pointer.x - this.targetBounds.x,
+            y: pointer.y - this.targetBounds.y,
+        };
+    };
+    /**
+     * Extract the pointer position from the event
+     * and makes sure that the pointer position is correct even if the target has margins
+     */
+    GestureManager.prototype.getCorrectPointerPosition = function (e) {
+        var _a;
+        var pointer = { x: 0, y: 0 };
+        // If there are multiple touches on the screen, we use the middle
+        // point between the first two touches as the pointer position,
+        // so panning while pinching to zoom works correctly, by using the point between the 2 fingers
+        if (((_a = e.touches) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+            var touchEv = e;
+            var firstTouch = touchEv.touches[0];
+            var secTouch = touchEv.touches[1];
+            // Finding the middle point
+            pointer = {
+                x: (firstTouch.clientX + secTouch.clientX) / 2,
+                y: (firstTouch.clientY + secTouch.clientY) / 2,
+            };
+        }
+        else {
+            pointer = extractPointer(e);
+        }
+        return this.clampPointerToTargetBounds(pointer);
+    };
+    GestureManager.prototype.calculateDistanceBetweenTouches = function (firstTouch, secTouch) {
+        return Math.hypot(firstTouch.clientX - secTouch.clientX, firstTouch.clientY - secTouch.clientY);
+    };
+    GestureManager.prototype.emitZoomEvent = function (zoomDelta, zoomCenter) {
+        this.emit('pinchToZoom', zoomDelta, zoomCenter);
+    };
+    GestureManager.prototype.dispose = function () {
+        this.listenersCollector.dispose();
+        this.targetResizeObserver.disconnect();
+    };
+    GestureManager.prototype.setDisable = function (disable) {
+        this.listenersCollector.setDisabled(disable);
+    };
+    return GestureManager;
+}(EventEmitter));
+
+/**
+ * A class to manage all kinds of keyboard events
+ * The class exposes a .dispose function that can be invoked when all the listeners should be detached
+ */
+var KeyboardManager = /** @class */ (function (_super) {
+    __extends(KeyboardManager, _super);
+    function KeyboardManager(target) {
+        var _this = _super.call(this) || this;
+        _this.listenersCollector = new ListenersCollector();
+        _this.handleKeyUp = function (e) {
+            _this.emit('keyUp', e.code);
+        };
+        _this.target = target;
+        _this.addListeners();
+        return _this;
+    }
+    KeyboardManager.prototype.addListeners = function () {
+        this.listenersCollector.add(this.target, 'keyup', this.handleKeyUp);
+    };
+    KeyboardManager.prototype.dispose = function () {
+        this.listenersCollector.dispose();
+    };
+    return KeyboardManager;
+}(EventEmitter));
+
+var Performance = /** @class */ (function () {
+    function Performance(label) {
+        this.label = label;
+        this.startTime = performance.now();
+        this.startTimestamp = Date.now();
+    }
+    Performance.prototype.measure = function () {
+        var duration = performance.now() - this.startTime;
+        return {
+            duration: duration,
+            end: Date.now(),
+            start: this.startTimestamp,
+            id: this.label,
+        };
+    };
+    Performance.prototype.printMeasurement = function () {
+        var duration = this.measure().duration;
+        if (duration < 1000) {
+            var formatted = duration.toFixed(2);
+            return "[Performance] ".concat(this.label, " -> ").concat(formatted, " ms");
+        }
+        else {
+            var seconds = (duration / 1000).toFixed(2);
+            return "[Performance] ".concat(this.label, " -> ").concat(seconds, " s");
+        }
+    };
+    return Performance;
+}());
+
+/**
+ * Invoke the callback in the next event loop
+ *
+ * Note:
+ * This nextTick works differently from the nodejs process.nextTick
+ * - process.nextTick invokes the callback at the beginning of the next event loop
+ * - setTimeout invokes the callback at the end of the next event loop
+ */
+function nextTick(callback) {
+    setTimeout(function () {
+        callback();
+    }, 0);
+}
+
+var Logger = /** @class */ (function (_super) {
+    __extends(Logger, _super);
+    function Logger() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Logger.prototype.logDebug = function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        this.emit.apply(this, __spreadArray(['log', 'debug'], args, false));
+    };
+    Logger.prototype.logWarning = function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        this.emit.apply(this, __spreadArray(['log', 'warn'], args, false));
+    };
+    Logger.prototype.logError = function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        this.emit.apply(this, __spreadArray(['log', 'error'], args, false));
+    };
+    return Logger;
+}(EventEmitter));
+var logger = new Logger();
+
+var useDebounceFunction = function (func, timeout) {
+    /**
+     * Cache the debounced function so we
+     * always have the updated value when calling
+     */
+    var cacheFunction = useRef(func);
+    cacheFunction.current = func;
+    /**
+     * Temporary set of the debouncedFunction as a empty function
+     * to later be set by the layoutEffect
+     */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    var debouncedFunction = useRef(function () { });
+    useLayoutEffect(function () {
+        var newDebouncedFunction = debounce(function () {
+            cacheFunction.current();
+        }, timeout);
+        debouncedFunction.current = newDebouncedFunction;
+        return function () {
+            newDebouncedFunction.cancel();
+        };
+    }, [timeout]);
+    /**
+     * Make sure the debounced function is always stable
+     */
+    return useCallback(function () { return debouncedFunction.current(); }, []);
+};
+
+/**
+ * Utility class that accepts a container and a canvas,
+ * and resizes the canvas based on the container, using a resize observer
+ */
+var CanvasManager = /** @class */ (function (_super) {
+    __extends(CanvasManager, _super);
+    function CanvasManager(settings) {
+        var _this = this;
+        var _a;
+        _this = _super.call(this) || this;
+        _this.listenersCollector = new ListenersCollector();
+        _this.size = { width: 0, height: 0 };
+        _this.pixelRatio = 1;
+        _this.maxPixelRatio = 2;
+        _this.handleCanvasResizeObserver = function (entries) {
+            _this.resizeCanvas(entries[0].contentRect);
+        };
+        _this.resizeCanvas = function (_a) {
+            var width = _a.width, height = _a.height;
+            window.requestAnimationFrame(function () {
+                _this.setSize(width, height);
+                _this.emit('resize', width, height, _this.getDevicePixelRatio());
+            });
+        };
+        _this.getCanvasCenterPoint = function () {
+            var bounds = _this.getBoundingClientRect();
+            return {
+                // Calculating the canvas relative to the target position
+                // we don't want the window center, but the center of the target element
+                x: bounds.width / 2 + bounds.x,
+                y: bounds.height / 2 + bounds.y,
+            };
+        };
+        _this.container = settings.container;
+        _this.canvas = settings.canvas;
+        _this.maxPixelRatio = (_a = settings.maxPixelRatio) !== null && _a !== void 0 ? _a : _this.maxPixelRatio;
+        _this.canvasResizeObserver = new ResizeObserver(_this.handleCanvasResizeObserver);
+        // Why listening for events on the container and not on the canvas itself?
+        // That's because we don't want the browser to set the canvas size automatically,
+        // but we want to update the size manually to make sure that the canvas size is
+        // always the one expected by the web renderer. So, we listen for resize events
+        // on the container wrapping the canvas, and then we update the canvas size
+        // in sync with the web renderer size. The canvas element will always have 100%
+        // of the size of the container
+        _this.canvasResizeObserver.observe(_this.container);
+        _this.listenersCollector.add(window, 'orientationchange', _this.handleDeviceOrientationChange);
+        _this.setSize(_this.container.clientWidth, _this.container.clientHeight);
+        return _this;
+    }
+    // Just update the CSS and the pixel size of the canvas
+    CanvasManager.prototype.setSize = function (width, height) {
+        this.pixelRatio = this.getDevicePixelRatio();
+        this.canvas.style.width = "".concat(width, "px");
+        this.canvas.style.height = "".concat(height, "px");
+        this.size.width = width * this.pixelRatio;
+        this.size.height = height * this.pixelRatio;
+        this.canvas.width = this.size.width;
+        this.canvas.height = this.size.height;
+    };
+    CanvasManager.prototype.handleDeviceOrientationChange = function () {
+        this.resizeCanvas({
+            width: this.container.clientWidth,
+            height: this.container.clientHeight,
+        });
+    };
+    CanvasManager.prototype.getDevicePixelRatio = function () {
+        return clamp(window.devicePixelRatio, 1, this.maxPixelRatio);
+    };
+    CanvasManager.prototype.getBoundingClientRect = function () {
+        return this.canvas.getBoundingClientRect();
+    };
+    CanvasManager.prototype.dispose = function () {
+        this.detachAllListeners();
+        this.canvasResizeObserver.disconnect();
+        this.listenersCollector.dispose();
+    };
+    return CanvasManager;
+}(EventEmitter));
+
+/**
+ * This class responsibility is to initialise the WASM module created by emscripten,
+ * and provide utility functions to access the objects exposed through Embind, which are attached to the main wasm module
+ */
+var WasmModule = /** @class */ (function () {
+    function WasmModule(settings) {
+        this.settings = settings;
+    }
+    WasmModule.prototype.isReleaseMode = function () {
+        return this.settings.mode === WebRendererMode.release;
+    };
+    WasmModule.prototype.init = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var emscriptenJsModule, factory, _a, error_1;
+            var _b;
+            var _this = this;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0: return [4 /*yield*/, this.importModule()];
+                    case 1:
+                        emscriptenJsModule = _c.sent();
+                        factory = emscriptenJsModule.default;
+                        _c.label = 2;
+                    case 2:
+                        _c.trys.push([2, 4, , 5]);
+                        _a = this;
+                        return [4 /*yield*/, factory({
+                                FeatureFlags: this.settings.featureFlags,
+                                currentWebGLVersion: this.settings.webglVersion,
+                                bridge: this.settings.jsBridge,
+                                locateFile: function (file) {
+                                    return _this.settings.locateFile.replace('{file}', file);
+                                },
+                            })];
+                    case 3:
+                        _a.instance = _c.sent();
+                        return [3 /*break*/, 5];
+                    case 4:
+                        error_1 = _c.sent();
+                        throw new WebRendererError('WASM_ERROR', 'An error occurred while trying to create the wasm module.', error_1);
+                    case 5:
+                        // Updating the pointer info map. We use it to convert Js pointer types to WASM
+                        this.pointerTypeToWASMMap = {
+                            unset: this.instance.PRUserPointerTypeEnum.Unset,
+                            mouse: this.instance.PRUserPointerTypeEnum.Mouse,
+                            touch: this.instance.PRUserPointerTypeEnum.Touch,
+                        };
+                        // Mapping the PRCursorType to the TS Enum
+                        this.prCursorTypeToCSSCursorMap = (_b = {},
+                            _b[this.instance.PRCursorTypeEnum.Auto.value] = "auto" /* CSSCursor.Auto */,
+                            _b[this.instance.PRCursorTypeEnum.Default.value] = "default" /* CSSCursor.Default */,
+                            _b[this.instance.PRCursorTypeEnum.Pointer.value] = "pointer" /* CSSCursor.Pointer */,
+                            _b[this.instance.PRCursorTypeEnum.Grab.value] = "grab" /* CSSCursor.Grab */,
+                            _b[this.instance.PRCursorTypeEnum.Grabbing.value] = "grabbing" /* CSSCursor.Grabbing */,
+                            _b);
+                        this.prototypeResizeModeToWASMMap = {
+                            Fit: this.instance.PrototypeResizeModeWasmEnum.Fit,
+                            FillWidth: this.instance.PrototypeResizeModeWasmEnum.FillWidth,
+                            ActualSize: this.instance.PrototypeResizeModeWasmEnum.ActualSize,
+                        };
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    WasmModule.prototype.makeWebGLContext = function (canvas, webGLContextAttributes) {
+        var _a;
+        if (webGLContextAttributes === void 0) { webGLContextAttributes = {}; }
+        var ctxSettings = _assign({ antialias: false, alpha: false, stencil: false, depth: false, powerPreference: 'high-performance', preserveDrawingBuffer: false, desynchronized: true }, webGLContextAttributes);
+        var ctxHandle = this.instance.GL.createContext(canvas, ctxSettings);
+        if (!ctxHandle) {
+            throw new WebRendererError('WEBGL_ERROR', 'Unable to create WebGL context. WebGL might be unsupported, disabled, or this device is not able to run WebGL correctly.');
+        }
+        var gl = (_a = this.instance.GL.getContext(ctxHandle)) === null || _a === void 0 ? void 0 : _a.GLctx;
+        if (gl) {
+            // Enabling the WEBGL_debug_renderer_info extension if available
+            // so that we can retrieve debug info about the GPU
+            // We do that using the detect-gpu npm package
+            gl.getExtension('WEBGL_debug_renderer_info');
+        }
+        return ctxHandle;
+    };
+    WasmModule.prototype.createWebGLTextureFromImage = function (image, webGLCtxHandle) {
+        var GL = this.instance.GL;
+        var ctxHandle = GL.getContext(webGLCtxHandle);
+        if (!ctxHandle) {
+            throw new Error('Unable to retrieve emscripten WebGL context from handle');
+        }
+        var ctx = ctxHandle.GLctx;
+        if (!ctx) {
+            throw new Error('WebGL context is null');
+        }
+        // First, create a WebGL texture
+        var texture = ctx.createTexture();
+        ctx.bindTexture(ctx.TEXTURE_2D, texture);
+        ctx.pixelStorei(ctx.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+        // Now we generate a texture id using emscripten
+        var textureHandle = GL.getNewId(GL.textures);
+        // Adding the texture into the correct slot
+        GL.textures[textureHandle] = texture;
+        // And finally, we upload the image to the texture
+        ctx.texImage2D(ctx.TEXTURE_2D, 0, ctx.RGBA, ctx.RGBA, ctx.UNSIGNED_BYTE, image);
+        // Unbinding the current texture, so that we don't accidentally modify it
+        ctx.bindTexture(ctx.TEXTURE_2D, null);
+        return textureHandle;
+    };
+    /**
+     * Forcefully releasing the WebGL context
+     */
+    WasmModule.prototype.destroyWebGLContext = function (webGLCtxHandle) {
+        var _a;
+        logger.logDebug('Destroying WebGL context');
+        var ctx = (_a = this.instance) === null || _a === void 0 ? void 0 : _a.GL.getContext(webGLCtxHandle);
+        if (!ctx) {
+            logger.logError('WebGL context not found while trying to destroy it');
+            return;
+        }
+        this.instance.GL.deleteContext(webGLCtxHandle);
+        var loseContextExt = ctx.GLctx.getExtension('WEBGL_lose_context');
+        if (!loseContextExt) {
+            logger.logError('WEBGL_lose_context not available. Not possible to destroy WebGL context manually.');
+            return;
+        }
+        loseContextExt.loseContext();
+        logger.logDebug('WebGL destroyed');
+        return true;
+    };
+    /**
+     * Imports the emscripten generated JavaScript using a dynamic import. By using
+     * a dynamic import the user only has to download the JS needed for their use
+     * case (debug or release), and not both. How the dynamic import is handled
+     * during the build is the responsibility of our bundler Rollup - the result is
+     * a bundle employing code splitting and dynamic chunk loading. As such there
+     * are implications for downstream build tools too, for example Webpack in
+     * cloud-frontend.
+     */
+    WasmModule.prototype.importModule = function () {
+        var emscriptenJsModule;
+        // For the "production" package release to npm we want to use the UMD emscripten
+        // output to maximise downstream compatibility (output files ending in .js).
+        // For local development workflows in the Vite Viewer the ESM output works
+        // much better (output files ending in .mjs).
+        //
+        // Rollup dead code elimation will take care of deleting the appropriate
+        // section below depending on the NODE_ENV.
+        //
+        // Note that isReleaseMode() refers to the debug vs. release flavours of the
+        // cpp build, and we want to be able to use those interchangably depending
+        // on runtime settings, whether we're working locally or via the released
+        // npm package.
+        {
+            emscriptenJsModule = this.isReleaseMode()
+                ? import('./web-renderer-release-60255953.js')
+                : import('./web-renderer-debug-bbc5d18c.js');
+        }
+        return emscriptenJsModule;
+    };
+    WasmModule.prototype.mapToCSSCursor = function (prCursorType) {
+        return this.prCursorTypeToCSSCursorMap[prCursorType.value];
+    };
+    WasmModule.prototype.mapToPRPointerType = function (pointerType) {
+        var _a;
+        return ((_a = this.pointerTypeToWASMMap[pointerType]) !== null && _a !== void 0 ? _a : this.instance.PRUserPointerTypeEnum.Unset);
+    };
+    WasmModule.prototype.mapPointerInfo = function (pointerInfo) {
+        return _assign(_assign({}, pointerInfo), { type: this.mapToPRPointerType(pointerInfo.type) });
+    };
+    WasmModule.prototype.mapResizeMode = function (resizeMode) {
+        return this.prototypeResizeModeToWASMMap[resizeMode];
+    };
+    return WasmModule;
+}());
+
+function loadImage(src) {
+    return new Promise(function (resolve, reject) {
+        var image = new Image();
+        image.onload = function () {
+            resolve(image);
+        };
+        image.onerror = function (e) {
+            reject(e);
+        };
+        image.src = src;
+    });
+}
+
+/**
+ * Container for Canvas settings. All properties are marked as required to
+ * force either initizalization or assignment in the constructor.
+ */
+var CanvasSettingsContainer = /** @class */ (function () {
+    function CanvasSettingsContainer(canvas, container, filePath) {
+        this.canvas = canvas;
+        this.container = container;
+        this.filePath = filePath;
+        this.locateFile = '/{file}';
+        this.imagesURLFormat = '';
+        this.imagesURLMap = {};
+        this.fragmentsURLFormat = '';
+        this.fragmentsURLMap = {};
+        this.backgroundColor = { r: 1, g: 1, b: 1, a: 1 };
+        this.mode = WebRendererMode.release;
+        this.showTilesBorders = false;
+        this.minimumZoomLevel = 5;
+        this.maximumZoomLevel = 0.01;
+        this.preserveDrawingBuffer = false;
+        this.featureFlags = DefaultFeatureFlags;
+        this.manualInitialization = false;
+        this.panBoundariesPadding = 0;
+        this.selectedArtboard = null;
+        this.initialZoom = null;
+        this.initialPan = null;
+    }
+    CanvasSettingsContainer.FromSettings = function (settings) {
+        return Object.assign(new CanvasSettingsContainer(settings.canvas, settings.container, settings.filePath), Object.fromEntries(Object.entries(settings).filter(function (_a) {
+            var value = _a[1];
+            return value !== undefined;
+        })));
+    };
+    return CanvasSettingsContainer;
+}());
+
+var MIME_TYPE = {
+    png: 'image/png',
+    jpg: 'image/jpeg',
+    webp: 'image/webp',
+    svg: 'image/svg+xml',
+    pdf: 'application/pdf',
+};
+
+/* Auto-generated by web-renderer.mts build script */
+var PRMarinaVisibleScaleType;
+(function (PRMarinaVisibleScaleType) {
+    PRMarinaVisibleScaleType[PRMarinaVisibleScaleType["None"] = 0] = "None";
+    PRMarinaVisibleScaleType[PRMarinaVisibleScaleType["Scale"] = 1] = "Scale";
+    PRMarinaVisibleScaleType[PRMarinaVisibleScaleType["Width"] = 2] = "Width";
+    PRMarinaVisibleScaleType[PRMarinaVisibleScaleType["Height"] = 3] = "Height";
+})(PRMarinaVisibleScaleType || (PRMarinaVisibleScaleType = {}));
+var PRMarinaExportFormatType;
+(function (PRMarinaExportFormatType) {
+    PRMarinaExportFormatType[PRMarinaExportFormatType["None"] = 0] = "None";
+    PRMarinaExportFormatType[PRMarinaExportFormatType["PNG"] = 1] = "PNG";
+    PRMarinaExportFormatType[PRMarinaExportFormatType["JPG"] = 2] = "JPG";
+    PRMarinaExportFormatType[PRMarinaExportFormatType["TIFF"] = 3] = "TIFF";
+    PRMarinaExportFormatType[PRMarinaExportFormatType["WEBP"] = 4] = "WEBP";
+    PRMarinaExportFormatType[PRMarinaExportFormatType["PDF"] = 5] = "PDF";
+    PRMarinaExportFormatType[PRMarinaExportFormatType["EPS"] = 6] = "EPS";
+    PRMarinaExportFormatType[PRMarinaExportFormatType["SVG"] = 7] = "SVG";
+    PRMarinaExportFormatType[PRMarinaExportFormatType["HEIC"] = 8] = "HEIC";
+})(PRMarinaExportFormatType || (PRMarinaExportFormatType = {}));
+var PRMarinaLayerFillType;
+(function (PRMarinaLayerFillType) {
+    PRMarinaLayerFillType[PRMarinaLayerFillType["Color"] = 0] = "Color";
+    PRMarinaLayerFillType[PRMarinaLayerFillType["Gradient"] = 1] = "Gradient";
+    PRMarinaLayerFillType[PRMarinaLayerFillType["Pattern"] = 2] = "Pattern";
+})(PRMarinaLayerFillType || (PRMarinaLayerFillType = {}));
+var PRMarinaLayerImageFillType;
+(function (PRMarinaLayerImageFillType) {
+    PRMarinaLayerImageFillType[PRMarinaLayerImageFillType["Fit"] = 0] = "Fit";
+    PRMarinaLayerImageFillType[PRMarinaLayerImageFillType["Fill"] = 1] = "Fill";
+    PRMarinaLayerImageFillType[PRMarinaLayerImageFillType["Stretch"] = 2] = "Stretch";
+    PRMarinaLayerImageFillType[PRMarinaLayerImageFillType["Tile"] = 3] = "Tile";
+})(PRMarinaLayerImageFillType || (PRMarinaLayerImageFillType = {}));
+var PRMarinaLayerGradientType;
+(function (PRMarinaLayerGradientType) {
+    PRMarinaLayerGradientType[PRMarinaLayerGradientType["Linear"] = 0] = "Linear";
+    PRMarinaLayerGradientType[PRMarinaLayerGradientType["Radial"] = 1] = "Radial";
+    PRMarinaLayerGradientType[PRMarinaLayerGradientType["Angular"] = 2] = "Angular";
+})(PRMarinaLayerGradientType || (PRMarinaLayerGradientType = {}));
+var PRMarinaLayerBorderPosition;
+(function (PRMarinaLayerBorderPosition) {
+    PRMarinaLayerBorderPosition[PRMarinaLayerBorderPosition["Center"] = 0] = "Center";
+    PRMarinaLayerBorderPosition[PRMarinaLayerBorderPosition["Inside"] = 1] = "Inside";
+    PRMarinaLayerBorderPosition[PRMarinaLayerBorderPosition["Outside"] = 2] = "Outside";
+})(PRMarinaLayerBorderPosition || (PRMarinaLayerBorderPosition = {}));
+var PRMarinaLayerLineCap;
+(function (PRMarinaLayerLineCap) {
+    PRMarinaLayerLineCap[PRMarinaLayerLineCap["Butt"] = 0] = "Butt";
+    PRMarinaLayerLineCap[PRMarinaLayerLineCap["Round"] = 1] = "Round";
+    PRMarinaLayerLineCap[PRMarinaLayerLineCap["Square"] = 2] = "Square";
+})(PRMarinaLayerLineCap || (PRMarinaLayerLineCap = {}));
+var PRMarinaLayerLineJoin;
+(function (PRMarinaLayerLineJoin) {
+    PRMarinaLayerLineJoin[PRMarinaLayerLineJoin["Miter"] = 0] = "Miter";
+    PRMarinaLayerLineJoin[PRMarinaLayerLineJoin["Round"] = 1] = "Round";
+    PRMarinaLayerLineJoin[PRMarinaLayerLineJoin["Bevel"] = 2] = "Bevel";
+})(PRMarinaLayerLineJoin || (PRMarinaLayerLineJoin = {}));
+var PRMarinaLayerBlurType;
+(function (PRMarinaLayerBlurType) {
+    PRMarinaLayerBlurType[PRMarinaLayerBlurType["Motion"] = 0] = "Motion";
+    PRMarinaLayerBlurType[PRMarinaLayerBlurType["Zoom"] = 1] = "Zoom";
+    PRMarinaLayerBlurType[PRMarinaLayerBlurType["Background"] = 2] = "Background";
+    PRMarinaLayerBlurType[PRMarinaLayerBlurType["Gaussian"] = 3] = "Gaussian";
+})(PRMarinaLayerBlurType || (PRMarinaLayerBlurType = {}));
+var PRMarinaBlendMode;
+(function (PRMarinaBlendMode) {
+    PRMarinaBlendMode[PRMarinaBlendMode["Normal"] = 0] = "Normal";
+    PRMarinaBlendMode[PRMarinaBlendMode["DestAtop"] = 1] = "DestAtop";
+    PRMarinaBlendMode[PRMarinaBlendMode["Clear"] = 2] = "Clear";
+    PRMarinaBlendMode[PRMarinaBlendMode["Source"] = 3] = "Source";
+    PRMarinaBlendMode[PRMarinaBlendMode["Darken"] = 4] = "Darken";
+    PRMarinaBlendMode[PRMarinaBlendMode["Multiply"] = 5] = "Multiply";
+    PRMarinaBlendMode[PRMarinaBlendMode["ColorBurn"] = 6] = "ColorBurn";
+    PRMarinaBlendMode[PRMarinaBlendMode["Lighten"] = 7] = "Lighten";
+    PRMarinaBlendMode[PRMarinaBlendMode["Screen"] = 8] = "Screen";
+    PRMarinaBlendMode[PRMarinaBlendMode["ColorDodge"] = 9] = "ColorDodge";
+    PRMarinaBlendMode[PRMarinaBlendMode["Overlay"] = 10] = "Overlay";
+    PRMarinaBlendMode[PRMarinaBlendMode["SoftLight"] = 11] = "SoftLight";
+    PRMarinaBlendMode[PRMarinaBlendMode["HardLight"] = 12] = "HardLight";
+    PRMarinaBlendMode[PRMarinaBlendMode["Difference"] = 13] = "Difference";
+    PRMarinaBlendMode[PRMarinaBlendMode["Exclusion"] = 14] = "Exclusion";
+    PRMarinaBlendMode[PRMarinaBlendMode["Hue"] = 15] = "Hue";
+    PRMarinaBlendMode[PRMarinaBlendMode["Saturation"] = 16] = "Saturation";
+    PRMarinaBlendMode[PRMarinaBlendMode["Color"] = 17] = "Color";
+    PRMarinaBlendMode[PRMarinaBlendMode["Luminosity"] = 18] = "Luminosity";
+    PRMarinaBlendMode[PRMarinaBlendMode["PlusLighter"] = 19] = "PlusLighter";
+    PRMarinaBlendMode[PRMarinaBlendMode["PlusDarker"] = 20] = "PlusDarker";
+})(PRMarinaBlendMode || (PRMarinaBlendMode = {}));
+var PRMarinaLayerType;
+(function (PRMarinaLayerType) {
+    PRMarinaLayerType[PRMarinaLayerType["Artboard"] = 0] = "Artboard";
+    PRMarinaLayerType[PRMarinaLayerType["SymbolMaster"] = 1] = "SymbolMaster";
+    PRMarinaLayerType[PRMarinaLayerType["SymbolInstance"] = 2] = "SymbolInstance";
+    PRMarinaLayerType[PRMarinaLayerType["Hotspot"] = 3] = "Hotspot";
+    PRMarinaLayerType[PRMarinaLayerType["Bitmap"] = 4] = "Bitmap";
+    PRMarinaLayerType[PRMarinaLayerType["Group"] = 5] = "Group";
+    PRMarinaLayerType[PRMarinaLayerType["Oval"] = 6] = "Oval";
+    PRMarinaLayerType[PRMarinaLayerType["Polygon"] = 7] = "Polygon";
+    PRMarinaLayerType[PRMarinaLayerType["Rectangle"] = 8] = "Rectangle";
+    PRMarinaLayerType[PRMarinaLayerType["ShapeGroup"] = 9] = "ShapeGroup";
+    PRMarinaLayerType[PRMarinaLayerType["ShapePath"] = 10] = "ShapePath";
+    PRMarinaLayerType[PRMarinaLayerType["Star"] = 11] = "Star";
+    PRMarinaLayerType[PRMarinaLayerType["Text"] = 12] = "Text";
+    PRMarinaLayerType[PRMarinaLayerType["Triangle"] = 13] = "Triangle";
+    PRMarinaLayerType[PRMarinaLayerType["Slice"] = 14] = "Slice";
+})(PRMarinaLayerType || (PRMarinaLayerType = {}));
+var PRMarinaLayerCornerStyle;
+(function (PRMarinaLayerCornerStyle) {
+    PRMarinaLayerCornerStyle[PRMarinaLayerCornerStyle["Angled"] = 2] = "Angled";
+    PRMarinaLayerCornerStyle[PRMarinaLayerCornerStyle["InsideArc"] = 4] = "InsideArc";
+    PRMarinaLayerCornerStyle[PRMarinaLayerCornerStyle["InsideSquare"] = 3] = "InsideSquare";
+    PRMarinaLayerCornerStyle[PRMarinaLayerCornerStyle["Rounded"] = 0] = "Rounded";
+    PRMarinaLayerCornerStyle[PRMarinaLayerCornerStyle["Smooth"] = 1] = "Smooth";
+})(PRMarinaLayerCornerStyle || (PRMarinaLayerCornerStyle = {}));
+var PRMarinaLayerTextTransform;
+(function (PRMarinaLayerTextTransform) {
+    PRMarinaLayerTextTransform[PRMarinaLayerTextTransform["Lowercase"] = 2] = "Lowercase";
+    PRMarinaLayerTextTransform[PRMarinaLayerTextTransform["None"] = 0] = "None";
+    PRMarinaLayerTextTransform[PRMarinaLayerTextTransform["Uppercase"] = 1] = "Uppercase";
+})(PRMarinaLayerTextTransform || (PRMarinaLayerTextTransform = {}));
+var PRMarinaLayerHorizontalTextAlignment;
+(function (PRMarinaLayerHorizontalTextAlignment) {
+    PRMarinaLayerHorizontalTextAlignment[PRMarinaLayerHorizontalTextAlignment["Center"] = 1] = "Center";
+    PRMarinaLayerHorizontalTextAlignment[PRMarinaLayerHorizontalTextAlignment["Justified"] = 3] = "Justified";
+    PRMarinaLayerHorizontalTextAlignment[PRMarinaLayerHorizontalTextAlignment["Left"] = 0] = "Left";
+    PRMarinaLayerHorizontalTextAlignment[PRMarinaLayerHorizontalTextAlignment["Right"] = 2] = "Right";
+})(PRMarinaLayerHorizontalTextAlignment || (PRMarinaLayerHorizontalTextAlignment = {}));
+var PRMarinaLayerVerticalTextAlignment;
+(function (PRMarinaLayerVerticalTextAlignment) {
+    PRMarinaLayerVerticalTextAlignment[PRMarinaLayerVerticalTextAlignment["Top"] = 0] = "Top";
+    PRMarinaLayerVerticalTextAlignment[PRMarinaLayerVerticalTextAlignment["Middle"] = 1] = "Middle";
+    PRMarinaLayerVerticalTextAlignment[PRMarinaLayerVerticalTextAlignment["Bottom"] = 2] = "Bottom";
+})(PRMarinaLayerVerticalTextAlignment || (PRMarinaLayerVerticalTextAlignment = {}));
+var PRMarinaLayerTextDecoration;
+(function (PRMarinaLayerTextDecoration) {
+    PRMarinaLayerTextDecoration[PRMarinaLayerTextDecoration["LineThrough"] = 2] = "LineThrough";
+    PRMarinaLayerTextDecoration[PRMarinaLayerTextDecoration["Underline"] = 1] = "Underline";
+    PRMarinaLayerTextDecoration[PRMarinaLayerTextDecoration["None"] = 0] = "None";
+})(PRMarinaLayerTextDecoration || (PRMarinaLayerTextDecoration = {}));
+var PRUserPointerType;
+(function (PRUserPointerType) {
+    PRUserPointerType[PRUserPointerType["Unset"] = 0] = "Unset";
+    PRUserPointerType[PRUserPointerType["Mouse"] = 1] = "Mouse";
+    PRUserPointerType[PRUserPointerType["Touch"] = 2] = "Touch";
+})(PRUserPointerType || (PRUserPointerType = {}));
+var PRCursorType;
+(function (PRCursorType) {
+    PRCursorType[PRCursorType["Auto"] = 0] = "Auto";
+    PRCursorType[PRCursorType["Default"] = 1] = "Default";
+    PRCursorType[PRCursorType["Pointer"] = 2] = "Pointer";
+    PRCursorType[PRCursorType["Grab"] = 3] = "Grab";
+    PRCursorType[PRCursorType["Grabbing"] = 4] = "Grabbing";
+})(PRCursorType || (PRCursorType = {}));
+var PRNodeExportFormat;
+(function (PRNodeExportFormat) {
+    PRNodeExportFormat[PRNodeExportFormat["PNG"] = 0] = "PNG";
+    PRNodeExportFormat[PRNodeExportFormat["JPG"] = 1] = "JPG";
+    PRNodeExportFormat[PRNodeExportFormat["WEBP"] = 2] = "WEBP";
+    PRNodeExportFormat[PRNodeExportFormat["PDF"] = 4] = "PDF";
+    PRNodeExportFormat[PRNodeExportFormat["SVG"] = 3] = "SVG";
+})(PRNodeExportFormat || (PRNodeExportFormat = {}));
+var PrototypeStructureFlowType;
+(function (PrototypeStructureFlowType) {
+    PrototypeStructureFlowType[PrototypeStructureFlowType["Screen"] = 0] = "Screen";
+    PrototypeStructureFlowType[PrototypeStructureFlowType["Overlay"] = 1] = "Overlay";
+})(PrototypeStructureFlowType || (PrototypeStructureFlowType = {}));
+var PrototypeResizeModeWasm;
+(function (PrototypeResizeModeWasm) {
+    PrototypeResizeModeWasm[PrototypeResizeModeWasm["Fit"] = 0] = "Fit";
+    PrototypeResizeModeWasm[PrototypeResizeModeWasm["FillWidth"] = 1] = "FillWidth";
+    PrototypeResizeModeWasm[PrototypeResizeModeWasm["ActualSize"] = 2] = "ActualSize";
+})(PrototypeResizeModeWasm || (PrototypeResizeModeWasm = {}));
+
+var CanvasRenderer = /** @class */ (function (_super) {
+    __extends(CanvasRenderer, _super);
+    function CanvasRenderer(settings) {
+        var _this = _super.call(this) || this;
+        _this.status = { type: 'IDLE' };
+        // Track if the renderer has been disposed
+        _this.disposed = false;
+        _this.handleCanvasResize = function (width, height, pixelRatio) {
+            var _a;
+            (_a = _this.pageCanvasWasm) === null || _a === void 0 ? void 0 : _a.resize(width, height, pixelRatio);
+        };
+        _this.handleWebGLContextLost = function () {
+            _this.setStatus({ type: 'WEBGL_CONTEXT_LOST' });
+        };
+        _this.handlePinchToZoomEvent = function (scaleDelta, center) {
+            var _a;
+            (_a = _this.userEventsCollectorWasm) === null || _a === void 0 ? void 0 : _a.dispatchPinchToZoomEvent(scaleDelta, center.x, center.y);
+        };
+        _this.handleWheelEvent = function (delta, pointerInfo) {
+            var _a;
+            if (!_this.wasmModule)
+                return;
+            (_a = _this.userEventsCollectorWasm) === null || _a === void 0 ? void 0 : _a.dispatchWheelEvent(delta.x, delta.y, _this.wasmModule.mapPointerInfo(pointerInfo));
+        };
+        _this.handlePointerDownEvent = function (pointerInfo) {
+            var _a;
+            if (!_this.wasmModule)
+                return;
+            (_a = _this.userEventsCollectorWasm) === null || _a === void 0 ? void 0 : _a.dispatchPointerDownEvent(_this.wasmModule.mapPointerInfo(pointerInfo));
+        };
+        _this.handlePointerMoveEvent = function (pointerInfo) {
+            var _a;
+            if (!_this.wasmModule)
+                return;
+            (_a = _this.userEventsCollectorWasm) === null || _a === void 0 ? void 0 : _a.dispatchPointerMoveEvent(_this.wasmModule.mapPointerInfo(pointerInfo));
+        };
+        _this.handleGlobalPointerMoveEvent = function (pointerInfo) {
+            var _a;
+            if (!_this.wasmModule)
+                return;
+            (_a = _this.userEventsCollectorWasm) === null || _a === void 0 ? void 0 : _a.dispatchGlobalPointerMoveEvent(_this.wasmModule.mapPointerInfo(pointerInfo));
+        };
+        _this.handlePointerUpEvent = function (pointerInfo) {
+            var _a;
+            if (!_this.wasmModule)
+                return;
+            (_a = _this.userEventsCollectorWasm) === null || _a === void 0 ? void 0 : _a.dispatchPointerUpEvent(_this.wasmModule.mapPointerInfo(pointerInfo));
+        };
+        _this.settings = CanvasSettingsContainer.FromSettings(settings);
+        logger.logDebug('CanvasRenderer JS constructed with settings:', _this.settings);
+        _this.gestureManager = new GestureManager(_this.settings.container);
+        _this.canvasManager = new CanvasManager({
+            container: _this.settings.container,
+            canvas: _this.settings.canvas,
+        });
+        _this.fetchWorker = new Worker(
+        // It's important to use the locateFile path here.
+        // The consumer might use a custom path for the web renderer file
+        _this.settings.locateFile.replace('{file}', 'fetch-worker.js'));
+        _this.exporterFetchWorker = new Worker(
+        // It's important to use the locateFile path here.
+        // The consumer might use a custom path for the web renderer file
+        _this.settings.locateFile.replace('{file}', 'fetch-worker.js'));
+        if (!_this.settings.manualInitialization) {
+            _this.init();
+        }
+        return _this;
+    }
+    CanvasRenderer.prototype.addListeners = function () {
+        this.canvasManager.on('resize', this.handleCanvasResize);
+        this.gestureManager.on('wheel', this.handleWheelEvent);
+        this.gestureManager.on('pointerup', this.handlePointerUpEvent);
+        this.gestureManager.on('pointermove', this.handlePointerMoveEvent);
+        this.gestureManager.on('globalpointermove', this.handleGlobalPointerMoveEvent);
+        this.gestureManager.on('pointerdown', this.handlePointerDownEvent);
+        this.gestureManager.on('pinchToZoom', this.handlePinchToZoomEvent);
+        this.settings.canvas.addEventListener('webglcontextlost', this.handleWebGLContextLost);
+    };
+    CanvasRenderer.prototype.collectAndEmitDeviceInfo = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var gpuTier;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, f()];
+                    case 1:
+                        gpuTier = _a.sent();
+                        this.deviceInfo = _assign(_assign({}, gpuTier), { hardwareConcurrency: navigator.hardwareConcurrency });
+                        this.emit('deviceInfo', this.deviceInfo);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    CanvasRenderer.prototype.detectWebGLVersion = function () {
+        this.webglVersion = getSupportedWebGLVersion(this.deviceInfo);
+        logger.logDebug("Using WebGL ".concat(this.webglVersion));
+    };
+    // Keeping the real init into a separate function
+    // so the outer app can wait for the init to finish
+    // because we can't use async/await with constructors
+    CanvasRenderer.prototype.init = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.traceFirstPaint = new Performance('FirstPaint');
+                        this.setStatus({ type: 'INITIALIZING' });
+                        return [4 /*yield*/, this.collectAndEmitDeviceInfo()];
+                    case 1:
+                        _a.sent();
+                        this.detectWebGLVersion();
+                        _a.label = 2;
+                    case 2:
+                        _a.trys.push([2, 6, , 7]);
+                        return [4 /*yield*/, this.initWasmModule()];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, this.initCanvasRendererWasm()];
+                    case 4:
+                        _a.sent();
+                        return [4 /*yield*/, this.setFile(this.settings.filePath)];
+                    case 5:
+                        _a.sent();
+                        if (this.settings.selectedArtboard) {
+                            this.selectArtboard(this.settings.selectedArtboard);
+                        }
+                        return [3 /*break*/, 7];
+                    case 6:
+                        error_1 = _a.sent();
+                        return [2 /*return*/, this.fail(error_1 instanceof WebRendererError
+                                ? error_1
+                                : new WebRendererError('ERROR', 'Unexpected exception initializing the web renderer', error_1))];
+                    case 7:
+                        this.setInitialCameraState();
+                        this.startRendering();
+                        this.addListeners();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    CanvasRenderer.prototype.setInitialCameraState = function () {
+        var _a, _b, _c;
+        var hasZoom = this.settings.initialZoom !== null;
+        var hasPan = this.settings.initialPan !== null;
+        if (hasZoom || hasPan) {
+            // Setting the zoom before the pan is important.
+            // That's because the pan values are multiplied by the zoom value
+            if (hasZoom) {
+                // For some reason TS can't narrow the types propery here via the
+                // helper booleans
+                this.setZoom(this.settings.initialZoom || 1);
+            }
+            if (hasPan) {
+                this.setPan(((_a = this.settings.initialPan) === null || _a === void 0 ? void 0 : _a.x) || 0, ((_b = this.settings.initialPan) === null || _b === void 0 ? void 0 : _b.y) || 0, (_c = this.settings.initialPan) === null || _c === void 0 ? void 0 : _c.centerPointInViewport);
+            }
+        }
+        else {
+            this.zoomToFit();
+        }
+    };
+    CanvasRenderer.prototype.startRendering = function () {
+        var _a;
+        this.traceInitialRender = new Performance('InitialRender');
+        this.setStatus({ type: 'DRAWING_FILE' });
+        (_a = this.pageCanvasWasm) === null || _a === void 0 ? void 0 : _a.startRenderLoop();
+    };
+    CanvasRenderer.prototype.createJSBridge = function () {
+        var _this = this;
+        return {
+            logDebug: function (msg) {
+                logger.logDebug("[C++] ".concat(msg));
+            },
+            logWarning: function (msg) {
+                logger.logWarning("[C++] ".concat(msg));
+            },
+            logError: function (msg) {
+                logger.logError("[C++] ".concat(msg));
+            },
+            emitMetric: function (id, start, end, duration) {
+                _this.emit('metric', { id: id, start: start, end: end, duration: duration });
+            },
+            // Having the image url resolver in JS gives
+            // us more flexibility, especially when the images
+            // have blob url coming from a zip file, and it's not
+            // possible to create the url using a specific format
+            resolveImageUrl: function (imageId, format) {
+                if (_this.settings.imagesURLMap && _this.settings.imagesURLMap[imageId]) {
+                    return _this.settings.imagesURLMap[imageId].replace(':format', format);
+                }
+                if (_this.settings.imagesURLFormat) {
+                    return _this.settings.imagesURLFormat
+                        .replace(':imageId', imageId)
+                        .replace(':format', format);
+                }
+                logger.logWarning("Not able to resolve the url for the image with UUID: ".concat(imageId));
+                // returning a string, because web assembly expect
+                // a string return type, otherwise it will throw an error
+                return '';
+            },
+            resolveFragmentUrl: function (fragmentId) {
+                if (_this.settings.fragmentsURLMap &&
+                    _this.settings.fragmentsURLMap[fragmentId]) {
+                    return _this.settings.fragmentsURLMap[fragmentId];
+                }
+                if (_this.settings.fragmentsURLFormat) {
+                    return _this.settings.fragmentsURLFormat.replace(':fragmentId', fragmentId);
+                }
+                logger.logWarning("Not able to resolve the url for the fragment with UUID: ".concat(fragmentId));
+                // returning a string, because web assembly expect
+                // a string return type, otherwise it will throw an error
+                return '';
+            },
+            onDrawComplete: this.handleDrawComplete.bind(this),
+            onAllImagesReady: function () {
+                _this.emit('allImagesReady');
+            },
+            onCameraMoveStart: function () {
+                _this.emit('cameraMoveStart');
+            },
+            onCameraMoveEnd: function () {
+                _this.emit('cameraMoveEnd');
+            },
+            onCameraZoomStart: function () {
+                _this.emit('cameraZoomStart');
+            },
+            onCameraZoomEnd: function () {
+                _this.emit('cameraZoomEnd');
+            },
+            onCameraZoomChange: function (zoom) {
+                _this.emit('cameraZoomChange', zoom);
+            },
+            onCameraPanChange: function () {
+                var panRelativeToPageOrigin = _this.getPan();
+                _this.emit('cameraPanChange', (panRelativeToPageOrigin === null || panRelativeToPageOrigin === void 0 ? void 0 : panRelativeToPageOrigin.x) || 0, (panRelativeToPageOrigin === null || panRelativeToPageOrigin === void 0 ? void 0 : panRelativeToPageOrigin.y) || 0);
+            },
+            onCursorChange: function (cursor) {
+                var _a;
+                var mappedCSSCursor = (_a = _this.wasmModule) === null || _a === void 0 ? void 0 : _a.mapToCSSCursor(cursor);
+                if (mappedCSSCursor) {
+                    _this.emit('cursorChange', mappedCSSCursor);
+                }
+            },
+            fetch: this.handleJSBridgeFetch.bind(this),
+            exporterFetch: this.handleJSBridgeExporterFetch.bind(this),
+            abortFetch: this.handleJSBridgeAbortFetch.bind(this),
+            onLayerClick: function (id) {
+                _this.emit('layerClick', id);
+            },
+            onLayerMouseHoverChange: function (id) {
+                _this.emit('layerMouseHoverChange', id);
+            },
+            onSceneChange: function () {
+                _this.emit('sceneChange');
+            },
+            onFragmentLoad: function (id) {
+                _this.emit('fragmentLoad', id);
+            },
+        };
+    };
+    /**
+     * Temporary bridge function to fetch images for the exporter,
+     * in which case we don't want to create WebGL textures for images.
+     * Once the exporter is running in a web worker, we will be able to
+     * remove this function.
+     */
+    CanvasRenderer.prototype.handleJSBridgeExporterFetch = function (url, callback) {
+        var _this = this;
+        // Cloning the callback for later reuse, because the C++ one will be deallocated when the function goes out of scope
+        var onComplete = callback.clone();
+        var onExporterFetchComplete = function (e) { return __awaiter(_this, void 0, void 0, function () {
+            var response;
+            var _a, _b, _c, _d, _e;
+            return __generator(this, function (_f) {
+                if (!this.wasmModule)
+                    return [2 /*return*/];
+                if (this.disposed)
+                    return [2 /*return*/];
+                if (e.data.url !== url) {
+                    return [2 /*return*/];
+                }
+                switch (e.data.type) {
+                    case 'success': {
+                        response = {
+                            statusCode: 200,
+                            statusText: 'OK',
+                            contentType: e.data.contentType,
+                            isWebGLTexture: false,
+                            emscriptenWebGLTextureHandle: -1,
+                            width: 0,
+                            height: 0,
+                            buffer: new Uint8Array(e.data.buffer),
+                        };
+                        onComplete.exec(response);
+                        break;
+                    }
+                    case 'error': {
+                        logger.logError("Error while fetching ".concat(url), e.data.error);
+                        onComplete.exec({
+                            buffer: new Uint8Array(0),
+                            statusCode: (_b = (_a = e.data.error) === null || _a === void 0 ? void 0 : _a.statusCode) !== null && _b !== void 0 ? _b : 500,
+                            statusText: (_d = (_c = e.data.error) === null || _c === void 0 ? void 0 : _c.statusText) !== null && _d !== void 0 ? _d : 'Unknown error',
+                            contentType: (_e = e.data.contentType) !== null && _e !== void 0 ? _e : '',
+                            isWebGLTexture: false,
+                            emscriptenWebGLTextureHandle: 0,
+                            width: 0,
+                            height: 0,
+                        });
+                        break;
+                    }
+                }
+                this.exporterFetchWorker.removeEventListener('message', onExporterFetchComplete);
+                return [2 /*return*/];
+            });
+        }); };
+        this.exporterFetchWorker.addEventListener('message', onExporterFetchComplete);
+        // Fetch using a separate fetch worker to avoid mixing the two requests.
+        this.exporterFetchWorker.postMessage({
+            type: 'fetch',
+            url: url,
+        });
+    };
+    CanvasRenderer.prototype.handleJSBridgeFetch = function (url, callback) {
+        var _this = this;
+        // Cloning the callback for later reuse, because the C++ one will be deallocated when the function goes out of scope
+        var onComplete = callback.clone();
+        var onFetchComplete = function (e) { return __awaiter(_this, void 0, void 0, function () {
+            var _a, response, blob, image, textureHandle;
+            var _b, _c, _d, _e, _f;
+            return __generator(this, function (_g) {
+                switch (_g.label) {
+                    case 0:
+                        if (!this.wasmModule)
+                            return [2 /*return*/];
+                        if (this.disposed)
+                            return [2 /*return*/];
+                        if (e.data.url !== url) {
+                            return [2 /*return*/];
+                        }
+                        _a = e.data.type;
+                        switch (_a) {
+                            case 'success': return [3 /*break*/, 1];
+                            case 'error': return [3 /*break*/, 5];
+                        }
+                        return [3 /*break*/, 6];
+                    case 1:
+                        response = {
+                            statusCode: 200,
+                            statusText: 'OK',
+                            contentType: e.data.contentType,
+                            isWebGLTexture: false,
+                            emscriptenWebGLTextureHandle: -1,
+                            width: 0,
+                            height: 0,
+                        };
+                        if (!/image/.test(e.data.contentType)) return [3 /*break*/, 3];
+                        blob = new Blob([e.data.buffer]);
+                        return [4 /*yield*/, loadImage(URL.createObjectURL(blob))
+                            // The image is loaded asynchronously, so we need to check again if the wasmModule wasn't disposed in the meantime
+                        ];
+                    case 2:
+                        image = _g.sent();
+                        // The image is loaded asynchronously, so we need to check again if the wasmModule wasn't disposed in the meantime
+                        if (!this.wasmModule)
+                            return [2 /*return*/];
+                        textureHandle = this.wasmModule.createWebGLTextureFromImage(image, this.webglCtxHandle);
+                        response.buffer = new Uint8Array(0);
+                        response.isWebGLTexture = true;
+                        response.emscriptenWebGLTextureHandle = textureHandle;
+                        response.width = image.width;
+                        response.height = image.height;
+                        return [3 /*break*/, 4];
+                    case 3:
+                        response.buffer = new Uint8Array(e.data.buffer);
+                        _g.label = 4;
+                    case 4:
+                        onComplete.exec(response);
+                        return [3 /*break*/, 7];
+                    case 5:
+                        {
+                            logger.logError("Error while fetching ".concat(url), e.data.error);
+                            onComplete.exec({
+                                buffer: new Uint8Array(0),
+                                statusCode: (_c = (_b = e.data.error) === null || _b === void 0 ? void 0 : _b.statusCode) !== null && _c !== void 0 ? _c : 500,
+                                statusText: (_e = (_d = e.data.error) === null || _d === void 0 ? void 0 : _d.statusText) !== null && _e !== void 0 ? _e : 'Unknown error',
+                                contentType: (_f = e.data.contentType) !== null && _f !== void 0 ? _f : '',
+                                isWebGLTexture: false,
+                                emscriptenWebGLTextureHandle: 0,
+                                width: 0,
+                                height: 0,
+                            });
+                            return [3 /*break*/, 7];
+                        }
+                    case 6: return [3 /*break*/, 7];
+                    case 7:
+                        this.fetchWorker.removeEventListener('message', onFetchComplete);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        this.fetchWorker.addEventListener('message', onFetchComplete);
+        this.fetchWorker.postMessage({
+            type: 'fetch',
+            url: url,
+        });
+    };
+    CanvasRenderer.prototype.handleJSBridgeAbortFetch = function (url) {
+        this.fetchWorker.postMessage({
+            type: 'abort',
+            url: url,
+        });
+    };
+    CanvasRenderer.prototype.initWasmModule = function () {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var traceWasmModule;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (this.disposed)
+                            return [2 /*return*/];
+                        traceWasmModule = new Performance('WasmModuleDownload');
+                        this.wasmModule = new WasmModule({
+                            mode: this.settings.mode,
+                            locateFile: this.settings.locateFile,
+                            jsBridge: this.createJSBridge(),
+                            featureFlags: this.settings.featureFlags,
+                            webglVersion: this.webglVersion,
+                        });
+                        return [4 /*yield*/, ((_a = this.wasmModule) === null || _a === void 0 ? void 0 : _a.init())];
+                    case 1:
+                        _b.sent();
+                        logger.logDebug(traceWasmModule.printMeasurement());
+                        this.emit('metric', traceWasmModule.measure());
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    CanvasRenderer.prototype.initCanvasRendererWasm = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var userEventsCollectorWasm;
+            return __generator(this, function (_a) {
+                if (this.disposed)
+                    return [2 /*return*/];
+                try {
+                    if (!this.wasmModule)
+                        throw Error('WASM module not initialized');
+                    this.webglCtxHandle = this.wasmModule.makeWebGLContext(this.settings.canvas, {
+                        preserveDrawingBuffer: this.settings.preserveDrawingBuffer,
+                        majorVersion: this.webglVersion,
+                    });
+                    this.renderTarget = this.wasmModule.instance.RenderTarget.MakeWebGL(this.webglCtxHandle, this.canvasManager.size.width, this.canvasManager.size.height, this.canvasManager.pixelRatio);
+                    this.pageCanvasWasm = new this.wasmModule.instance.CanvasRendererWasm(this.renderTarget, {
+                        showTilesBorders: this.settings.showTilesBorders,
+                    });
+                }
+                catch (error) {
+                    throw new WebRendererError('WASM_ERROR', 'An error occurred while trying to create the wasm object.', error);
+                }
+                // This should never happen, but otherwise Typescript complains, because
+                // it doesn't take into account that the thrown error will stop the execution
+                if (!this.pageCanvasWasm)
+                    return [2 /*return*/];
+                userEventsCollectorWasm = this.pageCanvasWasm.getUserEventsCollector();
+                if (!userEventsCollectorWasm) {
+                    throw new WebRendererError('WASM_ERROR', 'An error occurred while trying to create the user events collector');
+                }
+                this.userEventsCollectorWasm = userEventsCollectorWasm;
+                this.pageCanvasWasm.setBackgroundColor(this.settings.backgroundColor.r, this.settings.backgroundColor.g, this.settings.backgroundColor.b, this.settings.backgroundColor.a);
+                this.pageCanvasWasm.setZoomLevels(this.settings.minimumZoomLevel, this.settings.maximumZoomLevel);
+                this.pageCanvasWasm.setPanBoundariesPadding(this.settings.panBoundariesPadding);
+                return [2 /*return*/];
+            });
+        });
+    };
+    CanvasRenderer.prototype.setIsCameraLocked = function (isLocked) {
+        var _a;
+        (_a = this.pageCanvasWasm) === null || _a === void 0 ? void 0 : _a.setIsCameraLocked(isLocked);
+    };
+    CanvasRenderer.prototype.setBackgroundColor = function (color) {
+        var _a;
+        if (color.r === this.settings.backgroundColor.r &&
+            color.g === this.settings.backgroundColor.g &&
+            color.b === this.settings.backgroundColor.b &&
+            color.a === this.settings.backgroundColor.a)
+            return;
+        (_a = this.pageCanvasWasm) === null || _a === void 0 ? void 0 : _a.setBackgroundColor(color.r, color.g, color.b, color.a);
+        this.settings.backgroundColor = color;
+    };
+    CanvasRenderer.prototype.handleDrawComplete = function () {
+        if (this.status.type === 'DRAWING_FILE') {
+            // Draw complete is called repeatedly, but here we just want to perform
+            // some actions after the initial draw is complete (when the status is DRAWING_FILE)
+            // @TODO Look into ways of formalizing these status transitions
+            logger.logDebug(this.traceInitialRender.printMeasurement());
+            this.emit('metric', this.traceInitialRender.measure());
+            logger.logDebug(this.traceFirstPaint.printMeasurement());
+            this.emit('metric', this.traceFirstPaint.measure());
+            this.setStatus({ type: 'READY' });
+        }
+    };
+    /**
+     * Forcefully releasing the WebGL context
+     */
+    CanvasRenderer.prototype.looseWebGLContext = function () {
+        var _a;
+        var result = (_a = this.wasmModule) === null || _a === void 0 ? void 0 : _a.destroyWebGLContext(this.webglCtxHandle);
+        if (!result) {
+            logger.logWarning('Failed to loose WebGL context');
+        }
+        this.webglCtxHandle = -1;
+    };
+    /**
+     * Scale the document to fit the surface size
+     * @returns {number} the appropriate zoom level to fit the document
+     */
+    CanvasRenderer.prototype.zoomToFit = function () {
+        var _a;
+        (_a = this.pageCanvasWasm) === null || _a === void 0 ? void 0 : _a.scaleDocumentToFit();
+    };
+    /** Load the presentation file at the given URL into the renderer */
+    CanvasRenderer.prototype.setFile = function (fileURL) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                if (this.disposed)
+                    return [2 /*return*/];
+                this.setStatus({ type: 'LOADING_FILE' });
+                return [2 /*return*/, new Promise(function (resolve, reject) {
+                        var _a;
+                        var onFailure = function () {
+                            return reject(new WebRendererError('FILE_ERROR', 'Error encountered while fetching and parsing the file'));
+                        };
+                        var onSuccess = function (fileIdentifier, prFileWeightInBytes, imagesCount) {
+                            _this.setStatus({ type: 'FILE_READY' });
+                            var fileIdentifierAndVersion = "".concat(fileIdentifier, "-v").concat("12.0.1");
+                            _this.emit('fileReady', fileIdentifierAndVersion, prFileWeightInBytes, imagesCount);
+                            resolve();
+                        };
+                        (_a = _this.pageCanvasWasm) === null || _a === void 0 ? void 0 : _a.setFile(fileURL, onSuccess, onFailure);
+                    })];
+            });
+        });
+    };
+    CanvasRenderer.prototype.fail = function (error) {
+        this.setStatus({
+            type: 'FAILURE',
+            code: error.code,
+            message: "".concat(error.toString()).concat(error.cause ? "\nWrapped Error: ".concat(error.cause.toString()) : ''),
+        });
+        logger.logError(error);
+        error.cause && logger.logError(error.cause);
+    };
+    CanvasRenderer.prototype.setStatus = function (status) {
+        // When the status is failure, prevent other status changes
+        // otherwise the failure will be overwritten
+        if (this.status.type === 'FAILURE')
+            return;
+        logger.logDebug("Status transition ".concat(this.status.type, " => ").concat(status.type));
+        this.status = status;
+        this.emit('status', status);
+    };
+    CanvasRenderer.prototype.getPRFileCachedData = function () {
+        var _a;
+        if (!this.pageCanvasWasm)
+            return null;
+        // Caching the PRFileHandle for later use
+        if (((_a = this.prFileHandle) === null || _a === void 0 ? void 0 : _a.filePath) !== this.settings.filePath) {
+            var prFile = this.pageCanvasWasm.getPRFile();
+            this.prFileHandle = {
+                handle: prFile,
+                filePath: this.settings.filePath,
+                artboards: convertEmbindVectorToArray(prFile.getArtboards()),
+            };
+        }
+        return this.prFileHandle;
+    };
+    CanvasRenderer.prototype.getPRFile = function () {
+        var _a;
+        return (_a = this.getPRFileCachedData()) === null || _a === void 0 ? void 0 : _a.handle;
+    };
+    CanvasRenderer.prototype.releasePRFileHandle = function () {
+        var _a, _b;
+        (_b = (_a = this.prFileHandle) === null || _a === void 0 ? void 0 : _a.handle) === null || _b === void 0 ? void 0 : _b.delete();
+        this.prFileHandle = undefined;
+    };
+    CanvasRenderer.prototype.getRootNodeExtent = function () {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.getPRFile()) === null || _a === void 0 ? void 0 : _a.getRootNode()) === null || _b === void 0 ? void 0 : _b.getAbsoluteExtent()) !== null && _c !== void 0 ? _c : null;
+    };
+    CanvasRenderer.prototype.getPRFileArtboards = function () {
+        var _a, _b;
+        return (_b = (_a = this.getPRFileCachedData()) === null || _a === void 0 ? void 0 : _a.artboards) !== null && _b !== void 0 ? _b : [];
+    };
+    /**
+     * Returns the PRMarinaNode of the Artboard at position x,y relative to the canvas
+     * element origin in the browser, or null if there is no Artboard at that
+     * position.
+     */
+    CanvasRenderer.prototype.getArtboardAtPosition = function (x, y) {
+        if (!this.pageCanvasWasm)
+            return null;
+        var artboards = this.getPRFileArtboards();
+        var pan = this.pageCanvasWasm.getPan();
+        var zoom = this.pageCanvasWasm.getZoom();
+        var mouse = {
+            x: (x - pan.x) / zoom,
+            y: (y - pan.y) / zoom,
+        };
+        for (var _i = 0, artboards_1 = artboards; _i < artboards_1.length; _i++) {
+            var artboard = artboards_1[_i];
+            var maxX = artboard.bounds.x + artboard.bounds.width;
+            var maxY = artboard.bounds.y + artboard.bounds.height;
+            if (mouse.x >= artboard.bounds.x &&
+                mouse.y >= artboard.bounds.y &&
+                mouse.x <= maxX &&
+                mouse.y <= maxY) {
+                return artboard.getNode();
+            }
+        }
+        return null;
+    };
+    CanvasRenderer.prototype.mapRelativePositionToCameraPosition = function (x, y) {
+        var _a;
+        var cameraPosition = (_a = this.pageCanvasWasm) === null || _a === void 0 ? void 0 : _a.mapRelativePositionToCameraPosition(x, y);
+        return cameraPosition;
+    };
+    /**
+     * Get the current pan value for a given point relative to the viewport
+     * Use case: when the user clicks on the canvas, we want to know what's
+     * the corresponding pan value at a given mouse position, so that we can restore the pan value later
+     */
+    CanvasRenderer.prototype.getPanAtPosition = function (x, y) {
+        var pan = this.getPan();
+        var zoom = Math.max(this.getZoom(), Number.EPSILON);
+        // The x and y are relative to the viewport, and not affected by the zoom
+        // so, firstly we need to multiply them by the current zoom
+        // then, we only need to add them to the current pan value
+        var offsetX = x / zoom;
+        var offsetY = y / zoom;
+        return { x: pan.x - offsetX, y: pan.y - offsetY };
+    };
+    CanvasRenderer.prototype.getStatus = function () {
+        return this.status;
+    };
+    CanvasRenderer.prototype.setZoom = function (delta, center) {
+        var _a;
+        var correctedCenter = center !== null && center !== void 0 ? center : this.canvasManager.getCanvasCenterPoint();
+        (_a = this.pageCanvasWasm) === null || _a === void 0 ? void 0 : _a.setZoom(delta, correctedCenter.x, correctedCenter.y);
+    };
+    CanvasRenderer.prototype.getPan = function () {
+        var _a, _b;
+        var extent = this.getRootNodeExtent();
+        if (!extent)
+            return { x: 0, y: 0 };
+        var pan = (_a = this.pageCanvasWasm) === null || _a === void 0 ? void 0 : _a.getPan();
+        // Making sure that the pan values are relative to the document
+        // and take into consideration the zoom level
+        var zoom = (_b = this.pageCanvasWasm) === null || _b === void 0 ? void 0 : _b.getZoom();
+        if (!pan || !zoom) {
+            return { x: 0, y: 0 };
+        }
+        return { x: pan.x / zoom + extent.x, y: pan.y / zoom + extent.y };
+    };
+    CanvasRenderer.prototype.getZoom = function () {
+        var _a;
+        var zoom = (_a = this.pageCanvasWasm) === null || _a === void 0 ? void 0 : _a.getZoom();
+        return zoom || 0;
+    };
+    CanvasRenderer.prototype.setPan = function (x, y, centerPointInViewport) {
+        var _a;
+        if (centerPointInViewport === void 0) { centerPointInViewport = false; }
+        var extent = this.getRootNodeExtent();
+        if (!extent)
+            return;
+        //  The consumer is expected to set the pan values relative to 0,0, because it doesn't know the
+        //  document origin. Also, the values are independent from the zoom level, that's an
+        //  implementation detail that we take care of.
+        var newPanX = x;
+        var newPanY = y;
+        var zoom = this.getZoom();
+        if (centerPointInViewport) {
+            // Use half of the viewport and make sure to take into consideration the zoom and pixelRatio
+            var factor = Math.max(2 * zoom * this.canvasManager.pixelRatio, Number.EPSILON); // preventing divisions by zero
+            newPanX += this.canvasManager.size.width / factor;
+            newPanY += this.canvasManager.size.height / factor;
+        }
+        var cleanX = (newPanX - extent.x) * zoom;
+        var cleanY = (newPanY - extent.y) * zoom;
+        (_a = this.pageCanvasWasm) === null || _a === void 0 ? void 0 : _a.setPan(cleanX, cleanY);
+    };
+    CanvasRenderer.prototype.selectArtboard = function (artboardId) {
+        var _a;
+        if (!this.pageCanvasWasm)
+            return;
+        this.settings.selectedArtboard = artboardId;
+        // An empty string will deselect the current artboard
+        (_a = this.pageCanvasWasm) === null || _a === void 0 ? void 0 : _a.selectArtboard(artboardId !== null && artboardId !== void 0 ? artboardId : '');
+    };
+    CanvasRenderer.prototype.disposeFetchWorker = function () {
+        this.fetchWorker.postMessage({ type: 'abort-all' });
+        this.fetchWorker.terminate();
+    };
+    CanvasRenderer.prototype.exportNode = function (nodeId, exportSettings) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                return [2 /*return*/, new Promise(function (resolve, reject) {
+                        if (!_this.wasmModule || !_this.pageCanvasWasm) {
+                            reject('Wasm module is not ready or was disposed.');
+                            return;
+                        }
+                        var exportKey = exportSettings.format.toUpperCase();
+                        var format = PRNodeExportFormat[exportKey];
+                        if (!format) {
+                            reject("Unsupported export format: ".concat(exportSettings.format));
+                            return;
+                        }
+                        var wasmSettings = {
+                            format: { value: format },
+                            backingScale: exportSettings.backingScale,
+                        };
+                        var handleExportDone = function (data) {
+                            if (data === null) {
+                                reject('Export failed');
+                                return;
+                            }
+                            var mimeType = MIME_TYPE[exportSettings.format];
+                            var blob = new Blob([data.buffer], {
+                                type: mimeType,
+                            });
+                            resolve(blob);
+                        };
+                        _this.pageCanvasWasm.exportNode(nodeId, wasmSettings, handleExportDone);
+                    })];
+            });
+        });
+    };
+    CanvasRenderer.prototype.dispose = function () {
+        var _a, _b, _c, _d;
+        try {
+            this.disposeFetchWorker();
+            this.disposed = true;
+            this.detachAllListeners();
+            this.releasePRFileHandle();
+            (_a = this.wasmModule) === null || _a === void 0 ? void 0 : _a.destroyWebGLContext(this.webglCtxHandle);
+            this.canvasManager.dispose();
+            this.gestureManager.dispose();
+            (_b = this.pageCanvasWasm) === null || _b === void 0 ? void 0 : _b.stopRenderLoop();
+            (_c = this.pageCanvasWasm) === null || _c === void 0 ? void 0 : _c.delete(); // This will call the destructor in C++
+            (_d = this.renderTarget) === null || _d === void 0 ? void 0 : _d.delete();
+            this.pageCanvasWasm = undefined;
+            this.wasmModule = undefined;
+        }
+        catch (error) {
+            this.fail(new WebRendererError('ERROR', 'Unexpected exception while disposing the wasm object', error));
+        }
+    };
+    return CanvasRenderer;
+}(EventEmitter));
+
+/**
+ * Context for the renderer `status` value.
+ */
+var StatusContext$1 = createContext(undefined);
+/**
+ * Context for the renderer `zoom` value.
+ */
+var ZoomContext$1 = createContext(undefined);
+/**
+ * Context for track if the camera is being zoomed
+ */
+var CameraZoomingContext = createContext(undefined);
+/**
+ * Context for track if the camera is moving (both panning and zooming)
+ */
+var CameraMoveContext = createContext(undefined);
+/**
+ * Context for the renderer `pan` value.
+ */
+var PanContext$1 = createContext(undefined);
+/**
+ * Context for the renderer `cursor` value.
+ */
+var CursorContext$1 = createContext("auto" /* CSSCursor.Auto */);
+
+/**
+ * The internal context contains private methods and is used exclusively within
+ * the package. The members of this module are not exported from the package
+ * entrypoint.
+ */
+var InternalContext$1 = createContext(undefined);
+/**
+ * Access the internal context values.
+ */
+var useInternalContext$1 = function () {
+    var internal = useContext(InternalContext$1);
+    if (internal === undefined) {
+        throw Error('useInternalContext must be used within a provider');
+    }
+    return internal;
+};
+
+/**
+ * The reducer acts as the source of truth for the renderer state, at least
+ * from the point of view of the React app consuming the package. We mirror
+ * renderer state here, and keep it up to date via events emitted from
+ * the renderer.
+ *
+ * Some state values are "derived", in that they don't have a direct counterpart
+ * in the renderer, but we update them over time as events are emitted - for
+ * example the "cursor" value which models the canvas pointer typoe.
+ *
+ * This state is accessed via the hooks in the hooks/state folder, which will
+ * typically expose small slices of the state or single values from dedicated
+ * contexts to avoid render thrashing.
+ */
+var reducer$1 = function (state, action) {
+    switch (action.type) {
+        case 'on-status': {
+            return _assign(_assign({}, state), { status: action.status });
+        }
+        case 'on-zoom': {
+            return _assign(_assign({}, state), { zoom: action.zoom });
+        }
+        case 'on-pan': {
+            return _assign(_assign({}, state), { pan: action.pan });
+        }
+        case 'dispose': {
+            return _assign(_assign({}, state), { status: { type: 'DISPOSED' }, zoom: null, pan: null, cursor: "auto" /* CSSCursor.Auto */ });
+        }
+        case 'on-camera-zoom-start': {
+            return _assign(_assign({}, state), { isCameraZooming: true });
+        }
+        case 'on-camera-zoom-end': {
+            return _assign(_assign({}, state), { isCameraZooming: false });
+        }
+        case 'on-camera-move-start': {
+            return _assign(_assign({}, state), { isCameraMoving: true });
+        }
+        case 'on-camera-move-end': {
+            return _assign(_assign({}, state), { isCameraMoving: false });
+        }
+        case 'on-cursor-change': {
+            return _assign(_assign({}, state), { cursor: action.cursor });
+        }
+        default: {
+            return state;
+        }
+    }
+};
+
+/**
+ * Manages the renderer class instance, and handles the Providers that must
+ * be rendered as parents to CanvasRendererReact.
+ *
+ * By managing the class instance lifecycle logic in one place, and maintaining
+ * a single source of truth for its state via a reducer we can provide a consistent
+ * and globally accessible view on the instance state, manage state transitions
+ * and handle dervied state easily.
+ *
+ * Note that currently we are exposing this API via multiple different nested
+ * contexts. The idea here is that we insulate components in the outer app from
+ * re-rendering everytime any piece of state changes. They can instead just
+ * subscribe to small slices of state and values from the individual contexts
+ * and only re-render when necessary. This approach is under review and subject
+ * to change if it starts to feel unscalable.
+ */
+var CanvasRendererProvider = function (props) {
+    var instanceRef = useRef(null);
+    var settingsRef = useRef(null);
+    var _a = useReducer(reducer$1, {
+        pan: null,
+        zoom: null,
+        status: { type: 'IDLE' },
+        isCameraZooming: false,
+        isCameraMoving: false,
+        cursor: "auto" /* CSSCursor.Auto */,
+    }), _b = _a[0], status = _b.status, zoom = _b.zoom, pan = _b.pan, isCameraZooming = _b.isCameraZooming, isCameraMoving = _b.isCameraMoving, cursor = _b.cursor, dispatch = _a[1];
+    var onZoom = useCallback(function (zoom) { return dispatch({ type: 'on-zoom', zoom: zoom }); }, []);
+    var onPan = useCallback(function (x, y) { return dispatch({ type: 'on-pan', pan: { x: x, y: y } }); }, []);
+    var onStatus = useCallback(function (status) {
+        dispatch({ type: 'on-status', status: status });
+    }, []);
+    var onCameraZoomStart = useCallback(function () { return dispatch({ type: 'on-camera-zoom-start' }); }, []);
+    var onCameraZoomEnd = useCallback(function () { return dispatch({ type: 'on-camera-zoom-end' }); }, []);
+    var onCameraMoveStart = useCallback(function () { return dispatch({ type: 'on-camera-move-start' }); }, []);
+    var onCameraMoveEnd = useCallback(function () { return dispatch({ type: 'on-camera-move-end' }); }, []);
+    var onCursorChange = useCallback(function (cursor) {
+        return dispatch({
+            type: 'on-cursor-change',
+            cursor: cursor,
+        });
+    }, []);
+    var onSceneChange = useCallback(function () {
+        if (!instanceRef.current)
+            return;
+        // Scene changes can implicitly change the pan, in case the root
+        // extent has changed, so update it here
+        var pan = instanceRef.current.getPan();
+        dispatch({ type: 'on-pan', pan: pan });
+    }, []);
+    var dispose = useCallback(function () {
+        var currentManager = instanceRef.current;
+        if (!currentManager)
+            return;
+        logger.logDebug('Provider dispose');
+        currentManager.off('status', onStatus);
+        currentManager.off('cameraZoomChange', onZoom);
+        currentManager.off('cameraPanChange', onPan);
+        currentManager.off('cameraZoomStart', onCameraZoomStart);
+        currentManager.off('cameraZoomEnd', onCameraZoomEnd);
+        currentManager.off('cameraMoveStart', onCameraMoveStart);
+        currentManager.off('cameraMoveEnd', onCameraMoveEnd);
+        currentManager.off('cursorChange', onCursorChange);
+        currentManager.off('sceneChange', onSceneChange);
+        currentManager.dispose();
+        instanceRef.current = null;
+        dispatch({ type: 'dispose' });
+    }, [
+        onStatus,
+        onPan,
+        onZoom,
+        onCameraZoomStart,
+        onCameraZoomEnd,
+        onCameraMoveStart,
+        onCameraMoveEnd,
+        onCursorChange,
+        onSceneChange,
+    ]);
+    var init = useCallback(function (filePath, canvas, container) {
+        if (filePath === '')
+            return;
+        if (!canvas || !container)
+            return;
+        if (!settingsRef.current)
+            return;
+        logger.logDebug('Provider init');
+        var nextInstance = new CanvasRenderer(_assign(_assign({}, settingsRef.current), { filePath: filePath, container: container, canvas: canvas, manualInitialization: true }));
+        nextInstance.on('status', onStatus);
+        nextInstance.on('cameraZoomChange', onZoom);
+        nextInstance.on('cameraPanChange', onPan);
+        nextInstance.on('cameraZoomStart', onCameraZoomStart);
+        nextInstance.on('cameraZoomEnd', onCameraZoomEnd);
+        nextInstance.on('cameraMoveStart', onCameraMoveStart);
+        nextInstance.on('cameraMoveEnd', onCameraMoveEnd);
+        nextInstance.on('cursorChange', onCursorChange);
+        nextInstance.on('sceneChange', onSceneChange);
+        instanceRef.current = nextInstance;
+        nextInstance.init();
+    }, [
+        onStatus,
+        onZoom,
+        onPan,
+        onCameraZoomStart,
+        onCameraZoomEnd,
+        onCameraMoveStart,
+        onCameraMoveEnd,
+        onCursorChange,
+        onSceneChange,
+    ]);
+    var setSettings = useCallback(function (settings) {
+        var _a, _b;
+        logger.logDebug('Provider setSettings');
+        // @TODO We are kind of piggy backing on setSettings to propagate incoming
+        // props changes on the component into the renderer instance. Maybe would
+        // be nice to handle this more explicitly
+        if (settings.backgroundColor) {
+            (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.setBackgroundColor(settings.backgroundColor);
+        }
+        (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.selectArtboard(settings.selectedArtboard || null);
+        settingsRef.current = settings;
+    }, []);
+    var getInstance = useCallback(function () {
+        return instanceRef.current;
+    }, []);
+    var internal = useMemo(function () {
+        return {
+            dispose: dispose,
+            init: init,
+            setSettings: setSettings,
+            getInstance: getInstance,
+            dispatch: dispatch,
+        };
+    }, [dispose, init, setSettings, getInstance]);
+    return (React.createElement(InternalContext$1.Provider, { value: internal },
+        React.createElement(StatusContext$1.Provider, { value: status },
+            React.createElement(ZoomContext$1.Provider, { value: zoom },
+                React.createElement(PanContext$1.Provider, { value: pan },
+                    React.createElement(CameraZoomingContext.Provider, { value: isCameraZooming },
+                        React.createElement(CameraMoveContext.Provider, { value: isCameraMoving },
+                            React.createElement(CursorContext$1.Provider, { value: cursor }, props.children))))))));
+};
+
+/**
+ * Subscribe to any renderer event type. Prefer passing memoized function
+ * references from useCallback to this hook to avoid calling `on`/`off` every
+ * render.
+ */
+var useEvent = function (event, callback) {
+    var getInstance = useInternalContext$1().getInstance;
+    var instance = getInstance();
+    useEffect(function () {
+        instance === null || instance === void 0 ? void 0 : instance.on(event, callback);
+        return function () {
+            instance === null || instance === void 0 ? void 0 : instance.off(event, callback);
+        };
+    }, [event, instance, callback]);
+};
+
+/**
+ * Access the renderer `status` value.
+ */
+var useStatus = function () {
+    var status = useContext(StatusContext$1);
+    if (status === undefined) {
+        throw Error('useStatus must be used within a provider');
+    }
+    return status;
+};
+/**
+ * Access the renderer `zoom` value.
+ */
+var useZoom = function () {
+    var zoom = useContext(ZoomContext$1);
+    if (zoom === undefined) {
+        throw Error('useZoom must be used within a provider');
+    }
+    return zoom;
+};
+/**
+ * Access the renderer `pan` value.
+ */
+var usePan = function () {
+    var pan = useContext(PanContext$1);
+    if (pan === undefined) {
+        throw Error('usePan must be used within a provider');
+    }
+    return pan;
+};
+/**
+ * Access the renderer `cursor` value.
+ */
+var useCursor = function () {
+    var cursor = useContext(CursorContext$1);
+    if (cursor === undefined) {
+        throw Error('useCursor must be used within a provider');
+    }
+    return cursor;
+};
+/**
+ * Access the renderer `isCameraMoving` value.
+ */
+var useIsCameraZooming = function () {
+    var isZooming = useContext(CameraZoomingContext);
+    if (status === undefined) {
+        throw Error('useIsCameraZooming must be used within a provider');
+    }
+    return isZooming;
+};
+/**
+ * Access the renderer `isCameraMoving` value.
+ */
+var useIsCameraMoving = function () {
+    var isMoving = useContext(CameraMoveContext);
+    if (status === undefined) {
+        throw Error('useIsCameraMoving must be used within a provider');
+    }
+    return isMoving;
+};
+/**
+ * Returns the PRFile data structure
+ */
+var usePRFile = function () {
+    var getInstance = useInternalContext$1().getInstance;
+    var instance = getInstance();
+    var status = useStatus();
+    return useMemo(function () {
+        if (!instance || status.type !== 'READY')
+            return null;
+        return instance.getPRFile();
+    }, [instance, status]);
+};
+/**
+ * Returns the PRFile data structure
+ */
+var usePRFileArtboards = function () {
+    var getInstance = useInternalContext$1().getInstance;
+    var instance = getInstance();
+    var status = useStatus();
+    return useMemo(function () {
+        if (!instance || status.type !== 'READY')
+            return null;
+        return instance.getPRFileArtboards();
+    }, [instance, status]);
+};
+/**
+ * Returns the root node absolute extent. Importantly the root node extent
+ * is updated if the canvas renderer scene changes. This can be useful for code
+ * that uses the root node extent for layout calculations.
+ */
+var useRootNodeAbsoluteExtent = function () {
+    var _a, _b, _c, _d;
+    var prFile = usePRFile();
+    var _e = useState(null), extent = _e[0], setExtent = _e[1];
+    var extentUpdate = useDebounceFunction(function () {
+        setExtent(function (prev) {
+            var _a, _b, _c;
+            var newExtend = (_c = (_b = (_a = safePtrAccess(prFile)) === null || _a === void 0 ? void 0 : _a.getRootNode()) === null || _b === void 0 ? void 0 : _b.getAbsoluteExtent()) !== null && _c !== void 0 ? _c : null;
+            if ((prev === null || prev === void 0 ? void 0 : prev.width) === (newExtend === null || newExtend === void 0 ? void 0 : newExtend.width) &&
+                (prev === null || prev === void 0 ? void 0 : prev.height) === (newExtend === null || newExtend === void 0 ? void 0 : newExtend.height) &&
+                (prev === null || prev === void 0 ? void 0 : prev.x) === (newExtend === null || newExtend === void 0 ? void 0 : newExtend.x) &&
+                (prev === null || prev === void 0 ? void 0 : prev.y) === (newExtend === null || newExtend === void 0 ? void 0 : newExtend.y)) {
+                return prev;
+            }
+            return newExtend;
+        });
+    }, 16);
+    useEvent('sceneChange', extentUpdate);
+    useEffect(function () {
+        extentUpdate();
+    }, [extentUpdate]);
+    var x = (_a = extent === null || extent === void 0 ? void 0 : extent.x) !== null && _a !== void 0 ? _a : 0;
+    var y = (_b = extent === null || extent === void 0 ? void 0 : extent.y) !== null && _b !== void 0 ? _b : 0;
+    var width = (_c = extent === null || extent === void 0 ? void 0 : extent.width) !== null && _c !== void 0 ? _c : 0;
+    var height = (_d = extent === null || extent === void 0 ? void 0 : extent.height) !== null && _d !== void 0 ? _d : 0;
+    return useMemo(function () { return ({ x: x, y: y, width: width, height: height }); }, [x, y, width, height]);
+};
+
+/**
+ * Returns a function that imperatively sets the renderer's `zoom` value.
+ */
+var useSetZoom = function () {
+    var getInstance = useInternalContext$1().getInstance;
+    var instance = getInstance();
+    return useCallback(function (zoom) {
+        instance === null || instance === void 0 ? void 0 : instance.setZoom(zoom);
+    }, [instance]);
+};
+/**
+ * Returns a function that imperatively increments the `zoom` value one step.
+ * This behaviour matches the Mac app.
+ */
+var useIncrementZoom = function () {
+    var setZoom = useSetZoom();
+    var zoom = useZoom();
+    return useCallback(function () {
+        if (typeof zoom !== 'number')
+            return;
+        var nextZoom;
+        if (zoom >= 1.0) {
+            nextZoom = Math.round(zoom * 2);
+        }
+        else if (zoom > 0.5) {
+            nextZoom = 1;
+        }
+        else {
+            nextZoom = zoom * 2;
+        }
+        setZoom(nextZoom);
+    }, [setZoom, zoom]);
+};
+/**
+ * Returns a function that imperatively decrements the `zoom` value one step.
+ * This behaviour matches the Mac app.
+ */
+var useDecrementZoom = function () {
+    var setZoom = useSetZoom();
+    var zoom = useZoom();
+    return useCallback(function () {
+        if (typeof zoom !== 'number')
+            return;
+        setZoom(zoom / 2);
+    }, [setZoom, zoom]);
+};
+/**
+ * Returns a function that imperatively sets the renderer's `pan` value.
+ */
+var useSetPan = function () {
+    var getInstance = useInternalContext$1().getInstance;
+    var instance = getInstance();
+    return useCallback(function (_a) {
+        var x = _a.x, y = _a.y, centerPointInViewport = _a.centerPointInViewport;
+        instance === null || instance === void 0 ? void 0 : instance.setPan(x, y, centerPointInViewport);
+    }, [instance]);
+};
+/**
+ * Returns a function that imperatively causes the renderer to zoom/pan to
+ * fit the current page content in the canvas.
+ */
+var useZoomToFit = function () {
+    var getInstance = useInternalContext$1().getInstance;
+    var instance = getInstance();
+    return useCallback(function () {
+        instance === null || instance === void 0 ? void 0 : instance.zoomToFit();
+    }, [instance]);
+};
+/**
+ * Returns a function that imperatively causes the renderer to loose its
+ * WebGL context. Useful for debugging this behaviour.
+ */
+var useLooseWebGLContext = function () {
+    var getInstance = useInternalContext$1().getInstance;
+    var instance = getInstance();
+    return useCallback(function () {
+        instance === null || instance === void 0 ? void 0 : instance.looseWebGLContext();
+    }, [instance]);
+};
+/**
+ * Returns a function that can be used to find out if an Artboard exists below
+ * specific mouse coordinates relative to the canvas origin.
+ */
+var useGetArtboardAtPosition = function () {
+    var getInstance = useInternalContext$1().getInstance;
+    var instance = getInstance();
+    return useCallback(function (x, y) { return __awaiter(void 0, void 0, void 0, function () {
+        var uuid;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (instance === null || instance === void 0 ? void 0 : instance.getArtboardAtPosition(x, y))];
+                case 1:
+                    uuid = _a.sent();
+                    return [2 /*return*/, uuid || null];
+            }
+        });
+    }); }, [instance]);
+};
+/**
+ * Returns a function that can be used to find out the equivalent pan position
+ * at specific mouse coordinates relative to the canvas origin.
+ */
+var useGetPanAtPosition = function () {
+    var getInstance = useInternalContext$1().getInstance;
+    var instance = getInstance();
+    return useCallback(function (x, y) { return __awaiter(void 0, void 0, void 0, function () {
+        var pan;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (instance === null || instance === void 0 ? void 0 : instance.getPanAtPosition(x, y))];
+                case 1:
+                    pan = _a.sent();
+                    return [2 /*return*/, pan || null];
+            }
+        });
+    }); }, [instance]);
+};
+/**
+ * Disable user interaction like panning and zooming. This is useful when
+ * showing the context menu and we don't want users to mess with its position
+ * related to the canvas.
+ */
+var useLockCamera = function () {
+    var getInstance = useInternalContext$1().getInstance;
+    var instance = getInstance();
+    return useCallback(function (locked) {
+        instance === null || instance === void 0 ? void 0 : instance.setIsCameraLocked(locked);
+    }, [instance]);
+};
+var useMapRelativePositionToCameraPosition = function () {
+    var getInstance = useInternalContext$1().getInstance;
+    var instance = getInstance();
+    return useCallback(function (x, y) {
+        if (!instance)
+            return null;
+        var cameraPos = instance.mapRelativePositionToCameraPosition(x, y);
+        return cameraPos !== null && cameraPos !== void 0 ? cameraPos : null;
+    }, [instance]);
+};
+var useExportNode = function () {
+    var getInstance = useInternalContext$1().getInstance;
+    var instance = getInstance();
+    var prFile = usePRFile();
+    return useCallback(function (nodeId, settings) {
+        if (!instance || !prFile)
+            return Promise.reject('WebRenderer instance not ready');
+        return instance.exportNode(nodeId, settings);
+    }, [instance, prFile]);
+};
+
+function useLogEvent(cb) {
+    var cbRef = useRef(cb);
+    cbRef.current = cb;
+    var onLog = useCallback(function (level) {
+        var args = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args[_i - 1] = arguments[_i];
+        }
+        cbRef.current.apply(cbRef, __spreadArray([level], args, false));
+    }, []);
+    useEffect(function () {
+        logger.on('log', onLog);
+        return function () {
+            logger.off('log', onLog);
+        };
+    }, [onLog]);
+}
+
+var CONTAINER_STYLES$1 = {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    // Removes the 300ms tap delay, prevents double-tap zoom and allows smoother panning on Safari iOS
+    // The property is automatically applied to all its children. We need it on the container
+    // because some events are not listened directly on the canvas
+    touchAction: 'manipulation',
+};
+var CANVAS_STYLES$1 = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+};
+/**
+ * The CanvasRendererReact component renders a canvas element, and connects it to the
+ * Manager instance wrapped by CanvasRendererProvider. The props passed to this
+ * component mostly match the static settings passed to the Manager.
+ *
+ * Rendering the CanvasRendererReact component has no side effects initially aside
+ * from establishing the canvas element in the DOM. However, when the `filePath`
+ * prop is defined the renderer will begin to init and eventually draw to the
+ * canvas. If `filePath` is changed then the renderer will dispose and re-init
+ * to begin rendering the new file.
+ *
+ * Currently `filePath` is the only "reactive" prop, all the other settings
+ * props can be changed, but they will only take effect the next time `filePath`
+ * changes and the renderer (re)inits.
+ *
+ * To interact with the renderer use the various hooks exposed by the package,
+ * these can be used to access state values, listen to events and perform
+ * actions.
+ */
+var CanvasRendererReact = function (props) {
+    var filePath = props.filePath, locateFile = props.locateFile, imagesURLFormat = props.imagesURLFormat, imagesURLMap = props.imagesURLMap, fragmentsURLFormat = props.fragmentsURLFormat, fragmentsURLMap = props.fragmentsURLMap, backgroundColor = props.backgroundColor, mode = props.mode, showTilesBorders = props.showTilesBorders, minimumZoomLevel = props.minimumZoomLevel, maximumZoomLevel = props.maximumZoomLevel, preserveDrawingBuffer = props.preserveDrawingBuffer, panBoundariesPadding = props.panBoundariesPadding, initialPan = props.initialPan, initialZoom = props.initialZoom, children = props.children, containerProps = props.containerProps, canvasProps = props.canvasProps, featureFlags = props.featureFlags, selectedArtboard = props.selectedArtboard;
+    var canvas = useRef(null);
+    var container = useRef(null);
+    var _a = useState(false), allImagesReady = _a[0], setAllImagesReady = _a[1];
+    var onAllImagesReady = useCallback(function () { return setAllImagesReady(true); }, []);
+    var _b = useInternalContext$1(), dispose = _b.dispose, init = _b.init, setSettings = _b.setSettings;
+    var contextCursor = useCursor();
+    var status = useStatus();
+    useEvent('allImagesReady', onAllImagesReady);
+    useEffect(function () {
+        logger.logDebug('CanvasRenderer mounted');
+        return function () { return logger.logDebug('CanvasRenderer unmounted'); };
+    }, []);
+    useEffect(function () {
+        setSettings({
+            locateFile: locateFile,
+            imagesURLFormat: imagesURLFormat,
+            imagesURLMap: imagesURLMap,
+            fragmentsURLFormat: fragmentsURLFormat,
+            fragmentsURLMap: fragmentsURLMap,
+            backgroundColor: backgroundColor,
+            mode: mode,
+            showTilesBorders: showTilesBorders,
+            minimumZoomLevel: minimumZoomLevel,
+            maximumZoomLevel: maximumZoomLevel,
+            preserveDrawingBuffer: preserveDrawingBuffer,
+            panBoundariesPadding: panBoundariesPadding,
+            initialPan: initialPan,
+            initialZoom: initialZoom,
+            featureFlags: featureFlags,
+            selectedArtboard: selectedArtboard,
+        });
+    }, [
+        setSettings,
+        locateFile,
+        imagesURLFormat,
+        imagesURLMap,
+        fragmentsURLFormat,
+        fragmentsURLMap,
+        backgroundColor,
+        mode,
+        showTilesBorders,
+        minimumZoomLevel,
+        maximumZoomLevel,
+        preserveDrawingBuffer,
+        panBoundariesPadding,
+        initialPan,
+        initialZoom,
+        featureFlags,
+        selectedArtboard,
+    ]);
+    useEffect(function () {
+        if (!filePath)
+            return;
+        init(filePath, canvas.current, container.current);
+        return function () {
+            dispose();
+        };
+    }, [dispose, init, filePath]);
+    var currentCursor = useMemo(function () {
+        var _a;
+        return (_a = props.cursor) !== null && _a !== void 0 ? _a : contextCursor;
+    }, [props.cursor, contextCursor]);
+    var containerStyles = useMemo(function () {
+        return _assign(_assign({}, CONTAINER_STYLES$1), { cursor: currentCursor });
+    }, [currentCursor]);
+    return (React.createElement("div", _assign({}, containerProps, { ref: container, style: containerStyles }),
+        filePath && (React.createElement("canvas", _assign({}, canvasProps, { 
+            // The key in the canvas is necessary, to be sure that we don't reuse the canvas element.
+            // Reusing the canvas element is not entirely safe, because the browser might decide to keep
+            // in memory resources that we don't actually need anymore and could cause a memory leak
+            key: filePath, ref: canvas, "data-sketchweb-all-images-ready": allImagesReady, "data-testid": "sketchweb-canvas", "data-sketchweb-status": "sketchweb-status-".concat((status === null || status === void 0 ? void 0 : status.type.toLowerCase()) || 'null'), style: CANVAS_STYLES$1 }))),
+        (status === null || status === void 0 ? void 0 : status.type) === 'READY' && children));
+};
+
+/**
+ * Container for Prototype settings. All properties are marked as required to
+ * force either initizalization or assignment in the constructor.
+ */
+var PrototypeSettingsContainer = /** @class */ (function () {
+    function PrototypeSettingsContainer(prototypeStructure, startArtboardUUID, canvas, container) {
+        this.prototypeStructure = prototypeStructure;
+        this.startArtboardUUID = startArtboardUUID;
+        this.canvas = canvas;
+        this.container = container;
+        this.locateFile = '/{file}';
+        this.imagesURLFormat = '';
+        this.imagesURLMap = {};
+        this.fragmentsURLFormat = '';
+        this.fragmentsURLMap = {};
+        this.backgroundColor = { r: 0, g: 0, b: 0, a: 1 };
+        this.mode = WebRendererMode.release;
+        this.showTilesBorders = false;
+        this.minimumZoomLevel = 5;
+        this.maximumZoomLevel = 0.01;
+        this.preserveDrawingBuffer = false;
+        this.featureFlags = DefaultFeatureFlags;
+        this.manualInitialization = false;
+        this.highlightHotspots = true;
+        this.resizeMode = PrototypeResizeMode.Fit;
+        this.assetsManagerLimits = {
+            maxDepthForBackgroundRequests: 1,
+            maxArtboardsForBackgroundRequests: 5,
+            maxInitialLoadingDepth: 2,
+            maxInitialArtboardToLoad: 10,
+        };
+        this.disableInteraction = false;
+    }
+    PrototypeSettingsContainer.FromSettings = function (settings) {
+        return Object.assign(new PrototypeSettingsContainer(settings.prototypeStructure, settings.startArtboardUUID, settings.canvas, settings.container), Object.fromEntries(Object.entries(settings).filter(function (_a) {
+            var value = _a[1];
+            return value !== undefined;
+        })));
+    };
+    return PrototypeSettingsContainer;
+}());
+
+var PrototypeRenderer = /** @class */ (function (_super) {
+    __extends(PrototypeRenderer, _super);
+    function PrototypeRenderer(settings) {
+        var _this = _super.call(this) || this;
+        _this.status = { type: 'IDLE' };
+        _this.disposed = false;
+        _this.handleCanvasResize = function (width, height, pixelRatio) {
+            var _a;
+            (_a = _this.playerWasm) === null || _a === void 0 ? void 0 : _a.resize(width, height, pixelRatio);
+        };
+        _this.handleWebGLContextLost = function () {
+            _this.setStatus({ type: 'WEBGL_CONTEXT_LOST' });
+        };
+        _this.handlePinchToZoomEvent = function (scaleDelta, center) {
+            var _a;
+            (_a = _this.userEventsCollectorWasm) === null || _a === void 0 ? void 0 : _a.dispatchPinchToZoomEvent(scaleDelta, center.x, center.y);
+        };
+        _this.handleWheelEvent = function (delta, pointerInfo) {
+            var _a;
+            if (!_this.wasmModule)
+                return;
+            _this.userEventsCollectorWasm.dispatchWheelEvent(delta.x, delta.y, (_a = _this.wasmModule) === null || _a === void 0 ? void 0 : _a.mapPointerInfo(pointerInfo));
+        };
+        _this.handlePointerDownEvent = function (pointerInfo) {
+            var _a;
+            if (!_this.wasmModule)
+                return;
+            _this.userEventsCollectorWasm.dispatchPointerDownEvent((_a = _this.wasmModule) === null || _a === void 0 ? void 0 : _a.mapPointerInfo(pointerInfo));
+        };
+        _this.handlePointerMoveEvent = function (pointerInfo) {
+            var _a;
+            if (!_this.wasmModule)
+                return;
+            _this.userEventsCollectorWasm.dispatchPointerMoveEvent((_a = _this.wasmModule) === null || _a === void 0 ? void 0 : _a.mapPointerInfo(pointerInfo));
+        };
+        _this.handleGlobalPointerMoveEvent = function (pointerInfo) {
+            var _a;
+            if (!_this.wasmModule)
+                return;
+            _this.userEventsCollectorWasm.dispatchGlobalPointerMoveEvent((_a = _this.wasmModule) === null || _a === void 0 ? void 0 : _a.mapPointerInfo(pointerInfo));
+        };
+        _this.handlePointerUpEvent = function (pointerInfo) {
+            var _a;
+            if (!_this.wasmModule)
+                return;
+            _this.userEventsCollectorWasm.dispatchPointerUpEvent((_a = _this.wasmModule) === null || _a === void 0 ? void 0 : _a.mapPointerInfo(pointerInfo));
+        };
+        _this.restartPrototype = function (artboardUUID) {
+            var _a;
+            (_a = _this.playerWasm) === null || _a === void 0 ? void 0 : _a.restartPrototype(artboardUUID);
+        };
+        _this.navigateToFirstFlow = function () {
+            var _a;
+            (_a = _this.playerWasm) === null || _a === void 0 ? void 0 : _a.navigateToFirstFlow();
+        };
+        _this.goBack = function () {
+            var _a;
+            (_a = _this.playerWasm) === null || _a === void 0 ? void 0 : _a.goBack();
+        };
+        _this.goForwards = function () {
+            var _a;
+            (_a = _this.playerWasm) === null || _a === void 0 ? void 0 : _a.goForwards();
+        };
+        _this.setResizeMode = function (resizeMode) {
+            var _a;
+            if (!_this.wasmModule)
+                return;
+            var wasmResizeMode = _this.wasmModule.mapResizeMode(resizeMode);
+            (_a = _this.playerWasm) === null || _a === void 0 ? void 0 : _a.setResizeMode(wasmResizeMode);
+        };
+        _this.getScreen = function (includeHotspots) {
+            var _a;
+            if (includeHotspots === void 0) { includeHotspots = true; }
+            var jsScreen = (_a = _this.playerWasm) === null || _a === void 0 ? void 0 : _a.getJSScreen(includeHotspots);
+            if (!jsScreen) {
+                return { layers: [] };
+            }
+            return {
+                layers: convertEmbindVectorToArray(jsScreen.layers),
+            };
+        };
+        _this.settings = PrototypeSettingsContainer.FromSettings(settings);
+        logger.logDebug('PrototypeRenderer JS constructed with settings:', _this.settings);
+        _this.gestureManager = new GestureManager(_this.settings.container, _this.settings.disableInteraction);
+        _this.canvasManager = new CanvasManager({
+            container: _this.settings.container,
+            canvas: _this.settings.canvas,
+            maxPixelRatio: 3, // Recent iPhones have a pixel ratio of 3
+        });
+        _this.fetchWorker = new Worker(
+        // It's important to use the locateFile path here.
+        // The consumer might use a custom path for the web renderer file
+        _this.settings.locateFile.replace('{file}', 'fetch-worker.js'));
+        if (!_this.settings.manualInitialization) {
+            _this.init();
+        }
+        return _this;
+    }
+    PrototypeRenderer.prototype.addListeners = function () {
+        this.canvasManager.on('resize', this.handleCanvasResize);
+        this.gestureManager.on('wheel', this.handleWheelEvent);
+        this.gestureManager.on('pointerup', this.handlePointerUpEvent);
+        this.gestureManager.on('pointermove', this.handlePointerMoveEvent);
+        this.gestureManager.on('globalpointermove', this.handleGlobalPointerMoveEvent);
+        this.gestureManager.on('pointerdown', this.handlePointerDownEvent);
+        this.gestureManager.on('pinchToZoom', this.handlePinchToZoomEvent);
+        this.settings.canvas.addEventListener('webglcontextlost', this.handleWebGLContextLost);
+    };
+    PrototypeRenderer.prototype.collectAndEmitDeviceInfo = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var gpuTier;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, f()];
+                    case 1:
+                        gpuTier = _a.sent();
+                        this.deviceInfo = _assign(_assign({}, gpuTier), { hardwareConcurrency: navigator.hardwareConcurrency });
+                        this.emit('deviceInfo', this.deviceInfo);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PrototypeRenderer.prototype.detectWebGLVersion = function () {
+        this.webglVersion = getSupportedWebGLVersion(this.deviceInfo);
+        logger.logDebug("Using WebGL ".concat(this.webglVersion));
+    };
+    // Keeping the real init into a separate function
+    // so the outer app can wait for the init to finish
+    // because we can't use async/await with constructors
+    PrototypeRenderer.prototype.init = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.traceFirstPaint = new Performance('FirstPaint');
+                        this.setStatus({ type: 'INITIALIZING' });
+                        return [4 /*yield*/, this.collectAndEmitDeviceInfo()];
+                    case 1:
+                        _a.sent();
+                        this.detectWebGLVersion();
+                        _a.label = 2;
+                    case 2:
+                        _a.trys.push([2, 6, , 7]);
+                        return [4 /*yield*/, this.initWasmModule()];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, this.initPlayerWasm()];
+                    case 4:
+                        _a.sent();
+                        return [4 /*yield*/, this.startDownload()];
+                    case 5:
+                        _a.sent();
+                        return [3 /*break*/, 7];
+                    case 6:
+                        error_1 = _a.sent();
+                        return [2 /*return*/, this.fail(error_1 instanceof WebRendererError
+                                ? error_1
+                                : new WebRendererError('ERROR', 'Unexpected exception initializing the web renderer', error_1))];
+                    case 7:
+                        this.startRendering();
+                        this.addListeners();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PrototypeRenderer.prototype.initWasmModule = function () {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var traceWasmModule;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (this.disposed)
+                            return [2 /*return*/];
+                        traceWasmModule = new Performance('WasmModuleDownload');
+                        this.wasmModule = new WasmModule({
+                            mode: this.settings.mode,
+                            locateFile: this.settings.locateFile,
+                            jsBridge: this.createJSBridge(),
+                            featureFlags: this.settings.featureFlags,
+                            webglVersion: this.webglVersion,
+                        });
+                        return [4 /*yield*/, ((_a = this.wasmModule) === null || _a === void 0 ? void 0 : _a.init())];
+                    case 1:
+                        _b.sent();
+                        traceWasmModule.printMeasurement();
+                        this.emit('metric', traceWasmModule.measure());
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PrototypeRenderer.prototype.startDownload = function () {
+        var _this = this;
+        this.setStatus({ type: 'LOADING_FILE' });
+        return new Promise(function (resolve) {
+            var _a;
+            var onSuccess = function () {
+                resolve();
+            };
+            (_a = _this.playerWasm) === null || _a === void 0 ? void 0 : _a.startDownload(onSuccess);
+        });
+    };
+    PrototypeRenderer.prototype.startRendering = function () {
+        var _a;
+        this.traceInitialRender = new Performance('InitialRender');
+        this.setStatus({ type: 'DRAWING_FILE' });
+        (_a = this.playerWasm) === null || _a === void 0 ? void 0 : _a.startRenderLoop();
+    };
+    PrototypeRenderer.prototype.createJSBridge = function () {
+        var _this = this;
+        return {
+            logDebug: function (msg) {
+                logger.logDebug("[C++] ".concat(msg));
+            },
+            logWarning: function (msg) {
+                logger.logWarning("[C++] ".concat(msg));
+            },
+            logError: function (msg) {
+                logger.logError("[C++] ".concat(msg));
+            },
+            emitMetric: function (id, start, end, duration) {
+                _this.emit('metric', { id: id, start: start, end: end, duration: duration });
+            },
+            // Having the image url resolver in JS gives
+            // us more flexibility, especially when the images
+            // have blob url coming from a zip file, and it's not
+            // possible to create the url using a specific format
+            resolveImageUrl: function (imageId, format) {
+                if (_this.settings.imagesURLMap && _this.settings.imagesURLMap[imageId]) {
+                    return _this.settings.imagesURLMap[imageId].replace(':format', format);
+                }
+                if (_this.settings.imagesURLFormat) {
+                    return _this.settings.imagesURLFormat
+                        .replace(':imageId', imageId)
+                        .replace(':format', format);
+                }
+                logger.logWarning("Not able to resolve the url for the image with UUID: ".concat(imageId));
+                // returning a string, because web assembly expect
+                // a string return type, otherwise it will throw an error
+                return '';
+            },
+            resolveFragmentUrl: function (fragmentId) {
+                if (_this.settings.fragmentsURLMap &&
+                    _this.settings.fragmentsURLMap[fragmentId]) {
+                    return _this.settings.fragmentsURLMap[fragmentId];
+                }
+                if (_this.settings.fragmentsURLFormat) {
+                    return _this.settings.fragmentsURLFormat.replace(':fragmentId', fragmentId);
+                }
+                logger.logWarning("Not able to resolve the url for the fragment with UUID: ".concat(fragmentId));
+                // returning a string, because web assembly expect
+                // a string return type, otherwise it will throw an error
+                return '';
+            },
+            onDrawComplete: this.handleDrawComplete.bind(this),
+            onAllImagesReady: function () {
+                _this.emit('allImagesReady');
+            },
+            onCameraMoveStart: function () {
+                _this.emit('cameraMoveStart');
+            },
+            onCameraMoveEnd: function () {
+                _this.emit('cameraMoveEnd');
+            },
+            onCameraZoomStart: function () {
+                _this.emit('cameraZoomStart');
+            },
+            onCameraZoomEnd: function () {
+                _this.emit('cameraZoomEnd');
+            },
+            onCameraZoomChange: function (zoom) {
+                _this.emit('cameraZoomChange', zoom);
+            },
+            onCameraPanChange: function (x, y) {
+                _this.emit('cameraPanChange', x, y);
+            },
+            onCursorChange: function (cursor) {
+                var _a;
+                var mappedCSSCursor = (_a = _this.wasmModule) === null || _a === void 0 ? void 0 : _a.mapToCSSCursor(cursor);
+                if (mappedCSSCursor)
+                    _this.emit('cursorChange', mappedCSSCursor);
+            },
+            onPrototypeStateWillChange: function (currentArtboardId, canGoBack, canGoForwards) {
+                _this.emit('prototypeStateWillChange', {
+                    currentArtboardId: currentArtboardId,
+                    canGoBack: canGoBack,
+                    canGoForwards: canGoForwards,
+                });
+            },
+            onPrototypeStateChange: function (currentArtboardId, canGoBack, canGoForwards) {
+                _this.emit('prototypeStateChange', {
+                    currentArtboardId: currentArtboardId,
+                    canGoBack: canGoBack,
+                    canGoForwards: canGoForwards,
+                });
+            },
+            fetch: this.handleJSBridgeFetch.bind(this),
+            abortFetch: this.handleJSBridgeAbortFetch.bind(this),
+            onPrototypeUnhandledPointerUp: function () {
+                _this.emit('prototypeUnhandledPointerUp');
+            },
+            onSceneChange: function () {
+                _this.emit('sceneChange');
+            },
+        };
+    };
+    PrototypeRenderer.prototype.handleJSBridgeFetch = function (url, callback) {
+        var _this = this;
+        // Cloning the callback for later reuse, because the C++ one will be deallocated when the function goes out of scope
+        var onComplete = callback.clone();
+        var onFetchComplete = function (e) { return __awaiter(_this, void 0, void 0, function () {
+            var _a, response, blob, image, textureHandle;
+            var _b, _c, _d, _e, _f;
+            return __generator(this, function (_g) {
+                switch (_g.label) {
+                    case 0:
+                        if (this.disposed || !this.wasmModule)
+                            return [2 /*return*/];
+                        if (e.data.url !== url) {
+                            return [2 /*return*/];
+                        }
+                        _a = e.data.type;
+                        switch (_a) {
+                            case 'success': return [3 /*break*/, 1];
+                            case 'error': return [3 /*break*/, 5];
+                        }
+                        return [3 /*break*/, 6];
+                    case 1:
+                        response = {
+                            statusCode: 200,
+                            statusText: 'OK',
+                            contentType: e.data.contentType,
+                            isWebGLTexture: false,
+                            emscriptenWebGLTextureHandle: -1,
+                            width: 0,
+                            height: 0,
+                        };
+                        if (!/image/.test(e.data.contentType)) return [3 /*break*/, 3];
+                        blob = new Blob([e.data.buffer]);
+                        return [4 /*yield*/, loadImage(URL.createObjectURL(blob))
+                            // The image is loaded asynchronously, so we need to check again if the wasmModule wasn't disposed in the meantime
+                        ];
+                    case 2:
+                        image = _g.sent();
+                        // The image is loaded asynchronously, so we need to check again if the wasmModule wasn't disposed in the meantime
+                        if (!this.wasmModule)
+                            return [2 /*return*/];
+                        textureHandle = this.wasmModule.createWebGLTextureFromImage(image, this.webglCtxHandle);
+                        response.buffer = new Uint8Array(0);
+                        response.isWebGLTexture = true;
+                        response.emscriptenWebGLTextureHandle = textureHandle;
+                        response.width = image.width;
+                        response.height = image.height;
+                        return [3 /*break*/, 4];
+                    case 3:
+                        response.buffer = new Uint8Array(e.data.buffer);
+                        _g.label = 4;
+                    case 4:
+                        onComplete.exec(response);
+                        return [3 /*break*/, 7];
+                    case 5:
+                        {
+                            logger.logError("Error while fetching ".concat(url), e.data.error);
+                            onComplete.exec({
+                                buffer: new Uint8Array(0),
+                                statusCode: (_c = (_b = e.data.error) === null || _b === void 0 ? void 0 : _b.statusCode) !== null && _c !== void 0 ? _c : 500,
+                                statusText: (_e = (_d = e.data.error) === null || _d === void 0 ? void 0 : _d.statusText) !== null && _e !== void 0 ? _e : 'Unknown error',
+                                contentType: (_f = e.data.contentType) !== null && _f !== void 0 ? _f : '',
+                                isWebGLTexture: false,
+                                emscriptenWebGLTextureHandle: -1,
+                                width: 0,
+                                height: 0,
+                            });
+                            return [3 /*break*/, 7];
+                        }
+                    case 6: return [3 /*break*/, 7];
+                    case 7:
+                        this.fetchWorker.removeEventListener('message', onFetchComplete);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        this.fetchWorker.addEventListener('message', onFetchComplete);
+        this.fetchWorker.postMessage({
+            type: 'fetch',
+            url: url,
+        });
+    };
+    PrototypeRenderer.prototype.handleJSBridgeAbortFetch = function (url) {
+        this.fetchWorker.postMessage({
+            type: 'abort',
+            url: url,
+        });
+    };
+    PrototypeRenderer.prototype.initPlayerWasm = function () {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var _c, RenderTarget, PrototypeRendererWasm, PrototypeStructureArtboardVector, PrototypeStructureFlowVector, PrototypeStructureAssetVector, PrototypeStructureFlowTypeEnum, prototypeStructure, flowTypesMap, _i, _d, artboard, flows, _e, _f, flow, assets, _g, _h, asset, userEventsCollectorWasm;
+            return __generator(this, function (_j) {
+                try {
+                    if (!this.wasmModule)
+                        throw Error('WASM module not initialized');
+                    this.webglCtxHandle = this.wasmModule.makeWebGLContext(this.settings.canvas, {
+                        preserveDrawingBuffer: this.settings.preserveDrawingBuffer,
+                        majorVersion: this.webglVersion,
+                    });
+                    _c = this.wasmModule.instance, RenderTarget = _c.RenderTarget, PrototypeRendererWasm = _c.PrototypeRendererWasm, PrototypeStructureArtboardVector = _c.PrototypeStructureArtboardVector, PrototypeStructureFlowVector = _c.PrototypeStructureFlowVector, PrototypeStructureAssetVector = _c.PrototypeStructureAssetVector, PrototypeStructureFlowTypeEnum = _c.PrototypeStructureFlowTypeEnum;
+                    this.renderTarget = RenderTarget.MakeWebGL(this.webglCtxHandle, this.canvasManager.size.width, this.canvasManager.size.height, this.canvasManager.pixelRatio);
+                    prototypeStructure = {
+                        artboards: new PrototypeStructureArtboardVector(),
+                    };
+                    flowTypesMap = {
+                        Overlay: PrototypeStructureFlowTypeEnum.Overlay,
+                        Screen: PrototypeStructureFlowTypeEnum.Screen,
+                    };
+                    for (_i = 0, _d = this.settings.prototypeStructure.artboards; _i < _d.length; _i++) {
+                        artboard = _d[_i];
+                        flows = new PrototypeStructureFlowVector();
+                        for (_e = 0, _f = (_a = artboard.flows) !== null && _a !== void 0 ? _a : []; _e < _f.length; _e++) {
+                            flow = _f[_e];
+                            flows.push_back(_assign(_assign({}, flow), { type: flowTypesMap[flow.type] }));
+                        }
+                        assets = new PrototypeStructureAssetVector();
+                        for (_g = 0, _h = (_b = artboard.assets) !== null && _b !== void 0 ? _b : []; _g < _h.length; _g++) {
+                            asset = _h[_g];
+                            assets.push_back(asset);
+                        }
+                        prototypeStructure.artboards.push_back(_assign(_assign({}, artboard), { flows: flows, assets: assets }));
+                    }
+                    this.playerWasm = new PrototypeRendererWasm(this.renderTarget, {
+                        showTilesBorders: this.settings.showTilesBorders,
+                    }, this.settings.startArtboardUUID, prototypeStructure, this.settings.highlightHotspots, this.settings.assetsManagerLimits);
+                }
+                catch (error) {
+                    throw new WebRendererError('WASM_ERROR', 'An error occurred while trying to create the PrototypeRenderer WASM object.', error);
+                }
+                userEventsCollectorWasm = this.playerWasm.getUserEventsCollector();
+                if (!userEventsCollectorWasm) {
+                    throw new WebRendererError('WASM_ERROR', 'An error occurred while trying to create the user events collector');
+                }
+                this.userEventsCollectorWasm = userEventsCollectorWasm;
+                this.playerWasm.setBackgroundColor(this.settings.backgroundColor.r, this.settings.backgroundColor.g, this.settings.backgroundColor.b, this.settings.backgroundColor.a);
+                this.playerWasm.setZoomLevels(this.settings.minimumZoomLevel, this.settings.maximumZoomLevel);
+                this.setResizeMode(this.settings.resizeMode);
+                return [2 /*return*/];
+            });
+        });
+    };
+    PrototypeRenderer.prototype.setIsCameraLocked = function (isLocked) {
+        var _a;
+        (_a = this.playerWasm) === null || _a === void 0 ? void 0 : _a.setIsCameraLocked(isLocked);
+    };
+    PrototypeRenderer.prototype.setBackgroundColor = function (color) {
+        var _a;
+        if (color.r === this.settings.backgroundColor.r &&
+            color.g === this.settings.backgroundColor.g &&
+            color.b === this.settings.backgroundColor.b &&
+            color.a === this.settings.backgroundColor.a)
+            return;
+        (_a = this.playerWasm) === null || _a === void 0 ? void 0 : _a.setBackgroundColor(color.r, color.g, color.b, color.a);
+        this.settings.backgroundColor = color;
+    };
+    PrototypeRenderer.prototype.handleDrawComplete = function () {
+        if (this.status.type === 'DRAWING_FILE') {
+            // Draw complete is called repeatedly, but here we just want to perform
+            // some actions after the initial draw is complete (when the status is DRAWING_FILE)
+            // @TODO Look into ways of formalizing these status transitions
+            this.traceInitialRender.printMeasurement();
+            this.emit('metric', this.traceInitialRender.measure());
+            this.traceFirstPaint.printMeasurement();
+            this.emit('metric', this.traceFirstPaint.measure());
+            this.setStatus({ type: 'READY' });
+        }
+    };
+    /**
+     * Forcefully releasing the WebGL context
+     */
+    PrototypeRenderer.prototype.looseWebGLContext = function () {
+        var _a;
+        (_a = this.wasmModule) === null || _a === void 0 ? void 0 : _a.destroyWebGLContext(this.webglCtxHandle);
+        this.webglCtxHandle = -1;
+    };
+    PrototypeRenderer.prototype.fail = function (error) {
+        this.setStatus({
+            type: 'FAILURE',
+            code: error.code,
+            message: "".concat(error.toString()).concat(error.cause ? "\nWrapped Error: ".concat(error.cause.toString()) : ''),
+        });
+        logger.logError(error);
+        error.cause && logger.logError(error.cause);
+    };
+    PrototypeRenderer.prototype.setStatus = function (status) {
+        // When the status is failure, prevent other status changes
+        // otherwise the failure will be overwritten
+        if (this.status.type === 'FAILURE')
+            return;
+        logger.logDebug("Status transition ".concat(this.status.type, " => ").concat(status.type));
+        this.status = status;
+        this.emit('status', status);
+    };
+    PrototypeRenderer.prototype.getStatus = function () {
+        return this.status;
+    };
+    PrototypeRenderer.prototype.getArtboardAtPosition = function (x, y) {
+        var playerWasm = this.playerWasm;
+        if (!playerWasm)
+            return null;
+        var jsScreen = playerWasm.getJSScreen(false);
+        var pan = playerWasm.getPan();
+        var zoom = playerWasm.getZoom();
+        var mouse = {
+            x: (x - pan.x) / zoom,
+            y: (y - pan.y) / zoom,
+        };
+        for (var i = jsScreen.layers.size() - 1; i >= 0; i -= 1) {
+            var artboard = jsScreen.layers.get(i);
+            if (!artboard)
+                continue;
+            if (artboard.type !== 'artboard')
+                continue;
+            var maxX = artboard.bounds.x + artboard.bounds.width;
+            var maxY = artboard.bounds.y + artboard.bounds.height;
+            if (mouse.x >= artboard.bounds.x &&
+                mouse.y >= artboard.bounds.y &&
+                mouse.x <= maxX &&
+                mouse.y <= maxY) {
+                return artboard.getNode();
+            }
+        }
+        return null;
+    };
+    PrototypeRenderer.prototype.disposeFetchWorker = function () {
+        this.fetchWorker.postMessage({ type: 'abort-all' });
+        this.fetchWorker.terminate();
+    };
+    PrototypeRenderer.prototype.dispose = function () {
+        var _a, _b, _c;
+        try {
+            this.disposeFetchWorker();
+            this.detachAllListeners();
+            (_a = this.wasmModule) === null || _a === void 0 ? void 0 : _a.destroyWebGLContext(this.webglCtxHandle);
+            this.canvasManager.dispose();
+            this.gestureManager.dispose();
+            (_b = this.playerWasm) === null || _b === void 0 ? void 0 : _b.stopRenderLoop();
+            (_c = this.playerWasm) === null || _c === void 0 ? void 0 : _c.delete(); // This will call the destructor in C++
+            this.renderTarget.delete();
+            this.playerWasm = undefined;
+            this.wasmModule = undefined;
+            this.disposed = true;
+        }
+        catch (error) {
+            this.fail(new WebRendererError('ERROR', 'Unexpected exception while disposing the WebRendererWasm object', error));
+        }
+    };
+    PrototypeRenderer.prototype.mapRelativePositionToCameraPosition = function (x, y) {
+        var playerWasm = this.playerWasm;
+        if (!playerWasm)
+            return null;
+        var cameraPosition = playerWasm.mapRelativePositionToCameraPosition(x, y);
+        return cameraPosition;
+    };
+    PrototypeRenderer.prototype.updateHighlightHotspotsSetting = function (highlightHotspots) {
+        var playerWasm = this.playerWasm;
+        if (!playerWasm)
+            return null;
+        playerWasm.updateHighlightHotspotsSetting(highlightHotspots);
+    };
+    return PrototypeRenderer;
+}(EventEmitter));
+
+/**
+ * Context for the renderer `status` value.
+ */
+var StatusContext = createContext(undefined);
+/**
+ * Context for the renderer `cursor` value.
+ */
+var CursorContext = createContext("auto" /* CSSCursor.Auto */);
+/**
+ * Context that describes the current prototype state.
+ */
+var PrototypeStateContext = createContext(undefined);
+/**
+ * Context that describes the current prototype zoom/scale value.
+ */
+var ZoomContext = createContext(undefined);
+/**
+ * Context that describes the current prototype pan value.
+ */
+var PanContext = createContext(undefined);
+
+/**
+ * The internal context contains private methods and is used exclusively within
+ * the package. The members of this module are not exported from the package
+ * entrypoint.
+ */
+var InternalContext = createContext(undefined);
+/**
+ * Access the internal context values.
+ */
+var useInternalContext = function () {
+    var internal = useContext(InternalContext);
+    if (internal === undefined) {
+        throw Error('useInternalContext must be used within a provider');
+    }
+    return internal;
+};
+
+/**
+ * The reducer acts as the source of truth for the renderer state, at least
+ * from the point of view of the React app consuming the package. We mirror
+ * renderer state here, and keep it up to date via events emitted from
+ * the renderer.
+ *
+ * Some state values are "derived", in that they don't have a direct counterpart
+ * in the renderer, but we update them over time as events are emitted - for
+ * example the "cursor" value which models the canvas pointer typoe.
+ *
+ * This state is accessed via the hooks in the hooks/state folder, which will
+ * typically expose small slices of the state or single values from dedicated
+ * contexts to avoid render thrashing.
+ */
+var reducer = function (state, action) {
+    switch (action.type) {
+        case 'on-status': {
+            return _assign(_assign({}, state), { status: action.status });
+        }
+        case 'dispose': {
+            return _assign(_assign({}, state), { status: { type: 'DISPOSED' }, cursor: "auto" /* CSSCursor.Auto */ });
+        }
+        case 'on-cursor-change': {
+            return _assign(_assign({}, state), { cursor: action.cursor });
+        }
+        case 'on-prototype-state-will-change': {
+            return _assign(_assign({}, state), { prototypeState: _assign(_assign({}, state.prototypeState), { isChanging: true }) });
+        }
+        case 'on-prototype-state-change': {
+            return _assign(_assign({}, state), { prototypeState: _assign(_assign(_assign({}, state.prototypeState), action.prototypeState), { isChanging: false }) });
+        }
+        case 'on-zoom': {
+            return _assign(_assign({}, state), { zoom: action.zoom });
+        }
+        case 'on-pan': {
+            return _assign(_assign({}, state), { pan: {
+                    x: action.pan.x,
+                    y: action.pan.y,
+                } });
+        }
+        default: {
+            return state;
+        }
+    }
+};
+
+/**
+ * Manages the renderer class instance, and handles the Providers that must
+ * be rendered as parents to PrototypeRendererReact.
+ *
+ * By managing the class instance lifecycle logic in one place, and maintaining
+ * a single source of truth for its state via a reducer we can provide a consistent
+ * and globally accessible view on the instance state, manage state transitions
+ * and handle dervied state easily.
+ *
+ * Note that currently we are exposing this API via multiple different nested
+ * contexts. The idea here is that we insulate components in the outer app from
+ * re-rendering everytime any piece of state changes. They can instead just
+ * subscribe to small slices of state and values from the individual contexts
+ * and only re-render when necessary. This approach is under review and subject
+ * to change if it starts to feel unscalable.
+ */
+var PrototypeRendererProvider = function (props) {
+    var instanceRef = useRef(null);
+    var settingsRef = useRef(null);
+    var _a = useReducer(reducer, {
+        status: { type: 'IDLE' },
+        cursor: "auto" /* CSSCursor.Auto */,
+        prototypeState: {
+            currentArtboardId: '',
+            canGoBack: false,
+            canGoForwards: false,
+            isChanging: false,
+        },
+        zoom: 1,
+        pan: { x: 0, y: 0 },
+    }), _b = _a[0], status = _b.status, cursor = _b.cursor, prototypeState = _b.prototypeState, zoom = _b.zoom, pan = _b.pan, dispatch = _a[1];
+    var onStatus = useCallback(function (status) {
+        dispatch({ type: 'on-status', status: status });
+    }, []);
+    var onZoom = useCallback(function (zoom) { return dispatch({ type: 'on-zoom', zoom: zoom }); }, []);
+    var onPan = useCallback(function (x, y) { return dispatch({ type: 'on-pan', pan: { x: x, y: y } }); }, []);
+    var onCursorChange = useCallback(function (cursor) {
+        return dispatch({
+            type: 'on-cursor-change',
+            cursor: cursor,
+        });
+    }, []);
+    var onPrototypeStateWillChange = useCallback(function () { return dispatch({ type: 'on-prototype-state-will-change' }); }, []);
+    var onPrototypeStateChange = useCallback(function (prototypeState) {
+        return dispatch({ type: 'on-prototype-state-change', prototypeState: prototypeState });
+    }, []);
+    var dispose = useCallback(function () {
+        var currentManager = instanceRef.current;
+        if (!currentManager)
+            return;
+        logger.logDebug('Provider dispose');
+        currentManager.off('status', onStatus);
+        currentManager.off('cursorChange', onCursorChange);
+        currentManager.off('prototypeStateWillChange', onPrototypeStateWillChange);
+        currentManager.off('prototypeStateChange', onPrototypeStateChange);
+        currentManager.off('cameraZoomChange', onZoom);
+        currentManager.off('cameraPanChange', onPan);
+        currentManager.dispose();
+        instanceRef.current = null;
+        dispatch({ type: 'dispose' });
+    }, [
+        onStatus,
+        onCursorChange,
+        onPrototypeStateWillChange,
+        onPrototypeStateChange,
+        onPan,
+        onZoom,
+    ]);
+    var init = useCallback(function (canvas, container) {
+        if (!canvas || !container)
+            return;
+        if (!settingsRef.current)
+            return;
+        logger.logDebug('Provider init');
+        var nextInstance = new PrototypeRenderer(_assign(_assign({}, settingsRef.current), { container: container, canvas: canvas, manualInitialization: true }));
+        nextInstance.on('status', onStatus);
+        nextInstance.on('cursorChange', onCursorChange);
+        nextInstance.on('prototypeStateWillChange', onPrototypeStateWillChange);
+        nextInstance.on('prototypeStateChange', onPrototypeStateChange);
+        nextInstance.on('cameraZoomChange', onZoom);
+        nextInstance.on('cameraPanChange', onPan);
+        instanceRef.current = nextInstance;
+        nextInstance.init();
+    }, [
+        onStatus,
+        onCursorChange,
+        onPrototypeStateWillChange,
+        onPrototypeStateChange,
+        onPan,
+        onZoom,
+    ]);
+    var setSettings = useCallback(function (settings) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        logger.logDebug('Provider setSettings');
+        if (settings.backgroundColor &&
+            settings.backgroundColor != ((_a = settingsRef.current) === null || _a === void 0 ? void 0 : _a.backgroundColor)) {
+            (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.setBackgroundColor(settings.backgroundColor);
+        }
+        if (((_c = settingsRef.current) === null || _c === void 0 ? void 0 : _c.resizeMode) != settings.resizeMode) {
+            (_d = instanceRef.current) === null || _d === void 0 ? void 0 : _d.setResizeMode(settings.resizeMode || PrototypeResizeMode.Fit);
+        }
+        if (settings.highlightHotspots !== undefined &&
+            ((_e = settingsRef.current) === null || _e === void 0 ? void 0 : _e.highlightHotspots) !== settings.highlightHotspots) {
+            (_f = instanceRef.current) === null || _f === void 0 ? void 0 : _f.updateHighlightHotspotsSetting(settings.highlightHotspots);
+        }
+        if (settings.disableInteraction !== ((_g = settingsRef.current) === null || _g === void 0 ? void 0 : _g.disableInteraction)) {
+            (_h = instanceRef.current) === null || _h === void 0 ? void 0 : _h.gestureManager.setDisable(settings.disableInteraction || false);
+        }
+        settingsRef.current = settings;
+    }, []);
+    var getInstance = useCallback(function () {
+        return instanceRef.current;
+    }, []);
+    var internal = useMemo(function () {
+        return {
+            dispose: dispose,
+            init: init,
+            setSettings: setSettings,
+            getInstance: getInstance,
+            dispatch: dispatch,
+        };
+    }, [dispose, init, setSettings, getInstance]);
+    return (React.createElement(InternalContext.Provider, { value: internal },
+        React.createElement(StatusContext.Provider, { value: status },
+            React.createElement(CursorContext.Provider, { value: cursor },
+                React.createElement(PrototypeStateContext.Provider, { value: prototypeState },
+                    React.createElement(ZoomContext.Provider, { value: zoom },
+                        React.createElement(PanContext.Provider, { value: pan }, props.children)))))));
+};
+
+/**
+ * Returns a function that resets/restarts the prototype to the supplied
+ * Artboard id.
+ */
+var useRestartPrototype = function () {
+    var getInstance = useInternalContext().getInstance;
+    var instance = getInstance();
+    return useCallback(function (artboardUUID) {
+        instance === null || instance === void 0 ? void 0 : instance.restartPrototype(artboardUUID);
+    }, [instance]);
+};
+/**
+ * Returns a function that naviagtes to the first flow found on the current
+ * Screen, or noops if there isn't one.
+ */
+var useNavigateToFirstFlow = function () {
+    var getInstance = useInternalContext().getInstance;
+    var instance = getInstance();
+    return useCallback(function () {
+        instance === null || instance === void 0 ? void 0 : instance.navigateToFirstFlow();
+    }, [instance]);
+};
+/**
+ * Navigate the prototype stack backwards.
+ */
+var useGoBack = function () {
+    var getInstance = useInternalContext().getInstance;
+    var instance = getInstance();
+    return useCallback(function () {
+        instance === null || instance === void 0 ? void 0 : instance.goBack();
+    }, [instance]);
+};
+/**
+ * Navigate the prototype stack forwards.
+ */
+var useGoForwards = function () {
+    var getInstance = useInternalContext().getInstance;
+    var instance = getInstance();
+    return useCallback(function () {
+        instance === null || instance === void 0 ? void 0 : instance.goForwards();
+    }, [instance]);
+};
+/**
+ * Returns a function that can be used to find out if an Artboard exists below
+ * specific mouse coordinates relative to the canvas origin.
+ */
+var usePrototypeGetArtboardAtPosition = function () {
+    var getInstance = useInternalContext().getInstance;
+    var instance = getInstance();
+    return useCallback(function (x, y) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, instance === null || instance === void 0 ? void 0 : instance.getArtboardAtPosition(x, y)];
+        });
+    }); }, [instance]);
+};
+var usePrototypeMapRelativePositionToCameraPosition = function () {
+    var getInstance = useInternalContext().getInstance;
+    var instance = getInstance();
+    return useCallback(function (x, y) {
+        if (!instance)
+            return null;
+        var cameraPos = instance.mapRelativePositionToCameraPosition(x, y);
+        return cameraPos !== null && cameraPos !== void 0 ? cameraPos : null;
+    }, [instance]);
+};
+
+/**
+ * Access the renderer `status` value.
+ */
+var usePrototypeStatus = function () {
+    var status = useContext(StatusContext);
+    if (status === undefined) {
+        throw Error('usePrototypeStatus must be used within a provider');
+    }
+    return status;
+};
+/**
+ * Access the renderer `cursor` value.
+ */
+var usePrototypeCursor = function () {
+    var cursor = useContext(CursorContext);
+    if (cursor === undefined) {
+        throw Error('usePrototypeCursor must be used within a provider');
+    }
+    return cursor;
+};
+var usePrototypeState = function () {
+    var nav = useContext(PrototypeStateContext);
+    if (nav === undefined) {
+        throw Error('usePrototypeState must be used within a provider');
+    }
+    return nav;
+};
+var usePrototypeZoom = function () {
+    var zoom = useContext(ZoomContext);
+    if (zoom === undefined) {
+        throw Error('usePrototypeZoom must be used within a provider');
+    }
+    return zoom;
+};
+var usePrototypePan = function () {
+    var pan = useContext(PanContext);
+    if (pan === undefined) {
+        throw Error('usePrototypePan must be used within a provider');
+    }
+    return pan;
+};
+
+/**
+ * Subscribe to any renderer event type. Prefer passing memoized function
+ * references from useCallback to this hook to avoid calling `on`/`off` every
+ * render.
+ */
+var usePrototypeEvent = function (event, callback) {
+    var getInstance = useInternalContext().getInstance;
+    var instance = getInstance();
+    useEffect(function () {
+        instance === null || instance === void 0 ? void 0 : instance.on(event, callback);
+        return function () {
+            instance === null || instance === void 0 ? void 0 : instance.off(event, callback);
+        };
+    }, [event, instance, callback]);
+};
+
+function useGetScreen() {
+    var getInstance = useInternalContext().getInstance;
+    var instance = getInstance();
+    return useCallback(function (includeHotspots) {
+        if (includeHotspots === void 0) { includeHotspots = true; }
+        return instance === null || instance === void 0 ? void 0 : instance.getScreen(includeHotspots);
+    }, [instance]);
+}
+
+var CONTAINER_STYLES = {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    // Removes the 300ms tap delay, prevents double-tap zoom and allows smoother panning on Safari iOS
+    // The property is automatically applied to all its children. We need it on the container
+    // because some events are not listened directly on the canvas
+    touchAction: 'manipulation',
+};
+var CANVAS_STYLES = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+};
+var PrototypeRendererReact = function (props) {
+    var locateFile = props.locateFile, imagesURLFormat = props.imagesURLFormat, imagesURLMap = props.imagesURLMap, backgroundColor = props.backgroundColor, mode = props.mode, showTilesBorders = props.showTilesBorders, minimumZoomLevel = props.minimumZoomLevel, maximumZoomLevel = props.maximumZoomLevel, preserveDrawingBuffer = props.preserveDrawingBuffer, children = props.children, containerProps = props.containerProps, canvasProps = props.canvasProps, featureFlags = props.featureFlags, startArtboardUUID = props.startArtboardUUID, prototypeStructure = props.prototypeStructure, fragmentsURLFormat = props.fragmentsURLFormat, fragmentsURLMap = props.fragmentsURLMap, highlightHotspots = props.highlightHotspots, resizeMode = props.resizeMode, assetsManagerLimits = props.assetsManagerLimits, externalCursor = props.cursor, disableInteraction = props.disableInteraction;
+    var canvas = useRef(null);
+    var container = useRef(null);
+    var _a = useInternalContext(), dispose = _a.dispose, init = _a.init, setSettings = _a.setSettings;
+    var status = usePrototypeStatus();
+    var prototypeCursor = usePrototypeCursor();
+    var externalCursorComputed = typeof externalCursor === 'function'
+        ? externalCursor(prototypeCursor)
+        : externalCursor;
+    var cursor = externalCursorComputed || prototypeCursor;
+    useEffect(function () {
+        logger.logDebug('PrototypeRenderer mounted');
+        return function () { return logger.logDebug('PrototypeRenderer unmounted'); };
+    }, []);
+    useEffect(function () {
+        setSettings({
+            locateFile: locateFile,
+            imagesURLFormat: imagesURLFormat,
+            imagesURLMap: imagesURLMap,
+            backgroundColor: backgroundColor,
+            mode: mode,
+            showTilesBorders: showTilesBorders,
+            minimumZoomLevel: minimumZoomLevel,
+            maximumZoomLevel: maximumZoomLevel,
+            preserveDrawingBuffer: preserveDrawingBuffer,
+            featureFlags: featureFlags,
+            startArtboardUUID: startArtboardUUID,
+            prototypeStructure: prototypeStructure,
+            fragmentsURLFormat: fragmentsURLFormat,
+            fragmentsURLMap: fragmentsURLMap,
+            highlightHotspots: highlightHotspots,
+            resizeMode: resizeMode,
+            assetsManagerLimits: assetsManagerLimits,
+            disableInteraction: disableInteraction,
+        });
+    }, [
+        setSettings,
+        locateFile,
+        imagesURLFormat,
+        imagesURLMap,
+        backgroundColor,
+        mode,
+        showTilesBorders,
+        minimumZoomLevel,
+        maximumZoomLevel,
+        preserveDrawingBuffer,
+        featureFlags,
+        startArtboardUUID,
+        highlightHotspots,
+        resizeMode,
+        fragmentsURLFormat,
+        fragmentsURLMap,
+        prototypeStructure,
+        assetsManagerLimits,
+        disableInteraction,
+    ]);
+    useEffect(function () {
+        init(canvas.current, container.current);
+        return function () {
+            dispose();
+        };
+    }, [dispose, init]);
+    var containerStyles = useMemo(function () {
+        return _assign(_assign({}, CONTAINER_STYLES), { cursor: cursor });
+    }, [cursor]);
+    return (React.createElement("div", _assign({}, containerProps, { ref: container, style: containerStyles }),
+        React.createElement("canvas", _assign({}, canvasProps, { ref: canvas, "data-testid": "prototype-canvas", "data-prototype-status": "prototype-status-".concat((status === null || status === void 0 ? void 0 : status.type.toLowerCase()) || 'null'), style: CANVAS_STYLES })),
+        (status === null || status === void 0 ? void 0 : status.type) === 'READY' && children));
+};
+
+var WRAPPER_STYLE = {
+    position: 'absolute',
+    inset: 0,
+    pointerEvents: 'none',
+};
+/**
+ * Renders an HTML overlay that can be placed over the Prototype canvas
+ * to make hotspots clickable and selectable in tools like Cypress and Playwright.
+ */
+function PrototypeTestOverlay(props) {
+    var _a = props.visualize, visualize = _a === void 0 ? false : _a;
+    var getScreen = useGetScreen();
+    var _b = useState(function () {
+        return getScreen() || null;
+    }), screen = _b[0], setScreen = _b[1];
+    var onSceneChange = useCallback(function () {
+        setScreen(getScreen() || null);
+    }, [getScreen]);
+    usePrototypeEvent('sceneChange', onSceneChange);
+    var wrapperStyle = useMemo(function () {
+        return _assign(_assign({}, WRAPPER_STYLE), { opacity: visualize ? 1 : 0 });
+    }, [visualize]);
+    if (!screen)
+        return null;
+    return (React.createElement("div", { style: wrapperStyle }, screen.layers.map(function (layer, i) { return (React.createElement(Element, { key: "".concat(i, "/").concat(layer.id), bounds: layer.bounds, id: layer.id, name: layer.name, type: layer.type })); })));
+}
+function Element(props) {
+    var bounds = props.bounds, name = props.name, id = props.id, type = props.type;
+    var zoom = usePrototypeZoom();
+    var _a = usePrototypePan() || { x: 0, y: 0 }, panX = _a.x, panY = _a.y;
+    var style = useMemo(function () {
+        return _assign({ position: 'absolute', left: panX / window.devicePixelRatio + bounds.x * zoom, top: panY / window.devicePixelRatio + bounds.y * zoom, width: bounds.width * zoom, height: bounds.height * zoom, backgroundColor: 'rgba(0, 255, 255, 0.2)', border: '2px dotted white' }, (type === 'hotspot'
+            ? { cursor: 'pointer', pointerEvents: 'auto' }
+            : {}));
+    }, [bounds.x, bounds.y, bounds.width, bounds.height, panX, panY, zoom, type]);
+    return (React.createElement("div", { style: style, "data-testid": "".concat(type, "-").concat(kebabCase(name), "-").concat(id), "data-entity-name": name, "data-entity-id": id, "data-entity-bounds-x": bounds.x, "data-entity-bounds-y": bounds.x, "data-entity-bounds-width": bounds.width, "data-entity-bounds-height": bounds.height }));
+}
+function kebabCase(s) {
+    var _a, _b;
+    return ((_b = (_a = s
+        .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)) === null || _a === void 0 ? void 0 : _a.join('-').toLowerCase()) !== null && _b !== void 0 ? _b : '');
+}
+
+export { usePrototypePan as $, useCursor as A, useIsCameraZooming as B, CanvasRenderer as C, useIsCameraMoving as D, usePRFile as E, usePRFileArtboards as F, useRootNodeAbsoluteExtent as G, useEvent as H, useLogEvent as I, reducer$1 as J, PrototypeRenderer as K, PrototypeRendererProvider as L, PrototypeRendererReact as M, useRestartPrototype as N, useNavigateToFirstFlow as O, PanContext$1 as P, useGoBack as Q, useGoForwards as R, StatusContext$1 as S, usePrototypeGetArtboardAtPosition as T, usePrototypeMapRelativePositionToCameraPosition as U, usePrototypeStatus as V, usePrototypeCursor as W, usePrototypeState as X, usePrototypeZoom as Y, ZoomContext$1 as Z, _inherits as _, _createClass as a, usePrototypeEvent as a0, useGetScreen as a1, PrototypeTestOverlay as a2, WebRendererError as a3, WebRendererMode as a4, isDefinedPresentationManifestArtboard as a5, PrototypeResizeMode as a6, EventEmitter as a7, GestureManager as a8, KeyboardManager as a9, PRMarinaBlendMode as aA, PRMarinaLayerType as aB, PRMarinaLayerCornerStyle as aC, PRMarinaLayerTextTransform as aD, PRMarinaLayerHorizontalTextAlignment as aE, PRMarinaLayerVerticalTextAlignment as aF, PRMarinaLayerTextDecoration as aG, PRUserPointerType as aH, PRCursorType as aI, PRNodeExportFormat as aJ, PrototypeStructureFlowType as aK, PrototypeResizeModeWasm as aL, ListenersCollector as aa, Performance as ab, DefaultFeatureFlags as ac, debounce as ad, extractPointer as ae, clamp as af, getSupportedWebGLVersion as ag, convertEmbindVectorToArray as ah, isTouchDevice as ai, removeUndefinedKeys as aj, touchableClick as ak, safePtrAccess as al, nextTick as am, getiOSVersion as an, parseSafariUserAgent as ao, logger as ap, useDebounceFunction as aq, PRMarinaVisibleScaleType as ar, PRMarinaExportFormatType as as, PRMarinaLayerFillType as at, PRMarinaLayerImageFillType as au, PRMarinaLayerGradientType as av, PRMarinaLayerBorderPosition as aw, PRMarinaLayerLineCap as ax, PRMarinaLayerLineJoin as ay, PRMarinaLayerBlurType as az, _typeof as b, _wrapNativeSuper as c, _classCallCheck as d, _callSuper as e, _createForOfIteratorHelper as f, _slicedToArray as g, CanvasRendererProvider as h, CanvasRendererReact as i, CameraZoomingContext as j, CameraMoveContext as k, CursorContext$1 as l, useIncrementZoom as m, useDecrementZoom as n, useSetPan as o, useZoomToFit as p, useLooseWebGLContext as q, useGetArtboardAtPosition as r, useGetPanAtPosition as s, useLockCamera as t, useSetZoom as u, useMapRelativePositionToCameraPosition as v, useExportNode as w, useStatus as x, useZoom as y, usePan as z };