@cosmicds/vue-toolkit 0.2.3 → 0.2.4

package/dist/index.common.js

@@ -8089,6 +8089,30 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.map-container{height:100%;width:100%;
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 2:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(601);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, `.rating-root{display:flex;flex-direction:column;gap:10px;align-items:center;padding:5px}.rating-icon-row{display:flex;flex-direction:row;gap:10px;padding:20px;justify-content:center}.rating{transition:color .1s}.selected{border-radius:50%;box-shadow:0 0 0 5px silver}.rating-notification{border-radius:5px;font-size:calc(var(--default-font-size)*1.1);padding:1em;color:#fff}.rating-notification.success{background-color:#9a009a}.rating-notification.error{background-color:#b30000}.comments-box{width:75%}.v-card-actions{display:var(--footer-visible)}.close-button{display:inline}.v-card-text{width:100%}.close-button{position:absolute;top:5px;right:5px}.rating-title{padding:5px 10px}`, ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 789:
@@ -22950,6 +22974,22 @@ var update = add("6746b107", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 419:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(2);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(548)/* ["default"] */ .A)
+var update = add("7b4bb4e4", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 300:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -23399,6 +23439,7 @@ __webpack_require__.d(__webpack_exports__, {
   BackgroundImageset: () => (/* reexport */ BackgroundImageset),
   CreditLogos: () => (/* reexport */ CreditLogos),
   D2R: () => (/* reexport */ D2R),
+  DEFAULT_RATING_COLORS: () => (/* reexport */ DEFAULT_RATING_COLORS),
   DefaultMiniCredits: () => (/* reexport */ DefaultMiniCredits),
   FundingAcknowledgment: () => (/* reexport */ FundingAcknowledgment),
   Gallery: () => (/* reexport */ Gallery),
@@ -23407,8 +23448,10 @@ __webpack_require__.d(__webpack_exports__, {
   LocationSelector: () => (/* reexport */ LocationSelector),
   MINIDS_BASE_URL: () => (/* reexport */ MINIDS_BASE_URL),
   MiniDSBase: () => (/* reexport */ MiniDSBase),
-  R2D: () => (/* reexport */ utils_R2D),
+  R2D: () => (/* reexport */ R2D),
+  UserExperience: () => (/* reexport */ UserExperience),
   skyBackgroundImagesets: () => (/* reexport */ skyBackgroundImagesets),
+  submitUserExperienceRating: () => (/* reexport */ submitUserExperienceRating),
   wwtHUD: () => (/* reexport */ wwtHUD)
 });
 
@@ -33241,2140 +33284,158 @@ var CreditLogosvue_type_style_index_0_id_24887e9a_lang_css = __webpack_require__
 const CreditLogos_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(CreditLogosvue_type_script_lang_ts, [['render',CreditLogosvue_type_template_id_24887e9a_ts_true_render]])
 
 /* harmony default export */ const CreditLogos = (CreditLogos_exports_);
-;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/wwtHUD.vue?vue&type=template&id=5867328d&ts=true
-
-var wwtHUDvue_type_template_id_5867328d_ts_true_hoisted_1 = { id: "wwt-hud" };
-var wwtHUDvue_type_template_id_5867328d_ts_true_hoisted_2 = /*#__PURE__*/ (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("h3", null, " Camera settings ", -1);
-var wwtHUDvue_type_template_id_5867328d_ts_true_hoisted_3 = /*#__PURE__*/ (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("h3", null, " Imagesets ", -1);
-var _hoisted_4 = /*#__PURE__*/ (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("h3", null, " Clock ", -1);
-var _hoisted_5 = { key: 0 };
-function wwtHUDvue_type_template_id_5867328d_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
-    return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
-        style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)(_ctx.cssVars)
-    }, [
-        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", wwtHUDvue_type_template_id_5867328d_ts_true_hoisted_1, [
-            wwtHUDvue_type_template_id_5867328d_ts_true_hoisted_2,
-            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " RA: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtRARad) + " (" + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtRADeg) + ") ", 1),
-            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Dec: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtDecRad) + " (" + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtDecDeg) + ") ", 1),
-            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Roll: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtRollRad), 1),
-            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Zoom: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtZoomDeg), 1),
-            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Mode: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.mode), 1),
-            wwtHUDvue_type_template_id_5867328d_ts_true_hoisted_3,
-            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Bkg: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.bkgImage), 1),
-            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Fg: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.fgImg) + " (op: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtForegroundOpacity) + " ) ", 1),
-            _hoisted_4,
-            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Time: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtCurrentTime), 1),
-            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Rate: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtClockRate), 1),
-            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Location: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtLocation), 1),
-            (Object.keys(_ctx.otherVariables).length > 0)
-                ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("h3", _hoisted_5, " User defined vars "))
-                : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true),
-            ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)(_ctx.otherVariables, function (value, key) {
-                return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("p", { key: key }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(key) + ": " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(value), 1));
-            }), 128)),
-            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")
-        ])
-    ], 4));
+;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/UserExperience.vue?vue&type=template&id=7b3028df&ts=true
+
+var UserExperiencevue_type_template_id_7b3028df_ts_true_hoisted_1 = { class: "rating-title" };
+var UserExperiencevue_type_template_id_7b3028df_ts_true_hoisted_2 = { class: "rating-icon-row" };
+function UserExperiencevue_type_template_id_7b3028df_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+    var _component_v_spacer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("v-spacer");
+    var _component_v_btn = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("v-btn");
+    var _component_FontAwesomeIcon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("FontAwesomeIcon");
+    var _component_v_hover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("v-hover");
+    var _component_VTextarea = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("VTextarea");
+    var _component_v_expand_transition = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("v-expand-transition");
+    var _component_v_form = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("v-form");
+    var _component_v_card_text = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("v-card-text");
+    var _component_v_card = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("v-card");
+    return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_v_card, {
+        class: "rating-root",
+        color: _ctx.color,
+        style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)(_ctx.css)
+    }, {
+        title: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () { return [
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", UserExperiencevue_type_template_id_7b3028df_ts_true_hoisted_1, [
+                (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.question), 1),
+                (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_v_spacer),
+                (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_v_btn, {
+                    density: "compact",
+                    class: "close-button",
+                    icon: "mdi-close",
+                    onClick: _cache[0] || (_cache[0] = function ($event) { return (_ctx.$emit('dismiss', _ctx.currentRating, _ctx.comments)); })
+                })
+            ])
+        ]; }),
+        actions: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () { return [
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "footer")
+        ]; }),
+        default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () { return [
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_v_card_text, null, {
+                default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () { return [
+                    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_v_form, {
+                        onSubmit: _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)(function ($event) { return (_ctx.$emit('finish', _ctx.currentRating, _ctx.comments)); }, ["prevent"]))
+                    }, {
+                        default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () { return [
+                            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", UserExperiencevue_type_template_id_7b3028df_ts_true_hoisted_2, [
+                                ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)(_ctx.ratings, function (rating) {
+                                    return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default", { rating: rating }, function () { return [
+                                        ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_v_hover, { key: rating }, {
+                                            default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function (_a) {
+                                                var isHovering = _a.isHovering, props = _a.props;
+                                                return [
+                                                    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_FontAwesomeIcon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)(props, {
+                                                        size: _ctx.iconSize,
+                                                        class: ['rating', rating, { 'hovered': isHovering }, { 'selected': rating === _ctx.currentRating }],
+                                                        icon: _ctx.ratingIcons[rating][0],
+                                                        color: (isHovering || rating === _ctx.currentRating) ? _ctx.ratingIcons[rating][1] : _ctx.baseColor,
+                                                        onClick: function ($event) { return (_ctx.currentRating = rating); }
+                                                    }), null, 16, ["size", "class", "icon", "color", "onClick"])
+                                                ];
+                                            }),
+                                            _: 2
+                                        }, 1024))
+                                    ]; });
+                                }), 256))
+                            ]),
+                            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_v_expand_transition, null, {
+                                default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () { return [
+                                    (_ctx.showComments)
+                                        ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_VTextarea, {
+                                            key: 0,
+                                            modelValue: _ctx.comments,
+                                            "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) { return ((_ctx.comments) = $event); }),
+                                            class: "comments-box text-body-2",
+                                            placeholder: _ctx.commentPlaceholder,
+                                            "auto-grow": "",
+                                            "max-rows": "4",
+                                            density: "compact",
+                                            width: "100%",
+                                            onKeydown: _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)(function () { }, ["stop"]))
+                                        }, null, 8, ["modelValue", "placeholder"]))
+                                        : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)
+                                ]; }),
+                                _: 1
+                            }),
+                            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_v_expand_transition, null, {
+                                default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () { return [
+                                    (_ctx.currentRating || _ctx.showComments)
+                                        ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_v_btn, {
+                                            key: 0,
+                                            type: "submit",
+                                            width: "fit-content",
+                                            color: "success"
+                                        }, {
+                                            default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () { return [
+                                                (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createTextVNode)(" Submit ")
+                                            ]; }),
+                                            _: 1
+                                        }))
+                                        : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)
+                                ]; }),
+                                _: 1
+                            })
+                        ]; }),
+                        _: 3
+                    })
+                ]; }),
+                _: 3
+            })
+        ]; }),
+        _: 3
+    }, 8, ["color", "style"]));
 }
 
-;// CONCATENATED MODULE: ./src/components/wwtHUD.vue?vue&type=template&id=5867328d&ts=true
-
-// EXTERNAL MODULE: external {"amd":"@wwtelescope/engine","commonjs2":"@wwtelescope/engine","commonjs":"@wwtelescope/engine","root":"wwtlib"}
-var engine_root_wwtlib_ = __webpack_require__(866);
-;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/wwtHUD.vue?vue&type=script&lang=ts
-
+;// CONCATENATED MODULE: ./src/components/UserExperience.vue?vue&type=template&id=7b3028df&ts=true
 
+;// CONCATENATED MODULE: ./src/utils.ts
 
+var D2R = Math.PI / 180;
 var R2D = 180 / Math.PI;
-/* harmony default export */ const wwtHUDvue_type_script_lang_ts = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
-    name: 'wwtHUD',
-    extends: index_umd.WWTAwareComponent,
-    props: {
-        // location: center {x, y} in percent
-        location: {
-            type: Object,
-            default: function () { return ({ top: '50%', left: '50%' }); }
-        },
-        offsetCenter: {
-            // example: {x: 0.5, y: 0.5} for transform: translate(-50%, -50%)
-            type: Object,
-            default: function () { return ({ x: .5, y: .5 }); }
-        },
-        otherVariables: {
-            type: Object,
-            default: function () { return ({}); }
-        },
-        // styling props
-        fontSize: {
-            type: String,
-            default: '1em'
-        },
-        backgroundColor: {
-            type: String || null,
-            default: 'rgba(0, 0, 0, 0.5)'
-        },
-        textShadow: {
-            type: String || null,
-            default: '0 0 5px black'
-        },
-    },
-    computed: {
-        wwtSettings: function () {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            return engine_root_wwtlib_.Settings.get_active();
-        },
-        wwtControl: function () {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            return engine_root_wwtlib_.WWTControl.singleton;
-        },
-        wwtScriptInterface: function () {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            return engine_root_wwtlib_.ScriptInterface.singleton;
-        },
-        cssVars: function () {
-            var _a, _b, _c, _d;
-            return {
-                '--hud-top': (_a = this.location.top) !== null && _a !== void 0 ? _a : 'auto',
-                '--hud-left': (_b = this.location.left) !== null && _b !== void 0 ? _b : 'auto',
-                '--hud-bottom': (_c = this.location.bottom) !== null && _c !== void 0 ? _c : 'auto',
-                '--hud-right': (_d = this.location.right) !== null && _d !== void 0 ? _d : 'auto',
-                '--font-size': this.fontSize,
-                '--background-color': this.backgroundColor || 'transparent',
-                '--text-shadow': this.textShadow || 'none',
-                '--offset-center-x': "-".concat(this.offsetCenter.x * 100, "%"),
-                '--offset-center-y': "-".concat(this.offsetCenter.y * 100, "%"),
+var API_BASE_URL = "https://api.cosmicds.cfa.harvard.edu";
+var MINIDS_BASE_URL = "".concat(API_BASE_URL, "/minids");
+var DEFAULT_RATING_COLORS = ["red", "orange", "lightgreen", "green"];
+function submitUserExperienceRating(info, apiKey, url) {
+    return __awaiter(this, void 0, void 0, function () {
+        var body, destination;
+        return __generator(this, function (_a) {
+            body = {
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                story_name: info.story_name,
+                uuid: info.uuid,
             };
-        },
-        wwtRADeg: function () {
-            return this.wwtRARad * R2D;
-        },
-        wwtDecDeg: function () {
-            return this.wwtDecRad * R2D;
-        },
-        bkgImage: function () {
-            var _a;
-            return (_a = this.wwtBackgroundImageset) === null || _a === void 0 ? void 0 : _a.get_name();
-        },
-        fgImg: function () {
-            var _a;
-            return (_a = this.wwtForegroundImageset) === null || _a === void 0 ? void 0 : _a.get_name();
-        },
-        mode: function () {
-            if (this.bkgImage == "3D Solar System View") {
-                return '3D';
-            }
-            if (this.wwtSettings.get_galacticMode()) {
-                return 'Sky (galactic)';
+            if (info.comments) {
+                body.comments = info.comments;
             }
-            if (this.wwtSettings.get_localHorizonMode()) {
-                return 'Sky (local horizon)';
+            if (info.rating) {
+                body.rating == info.rating;
             }
-            return 'Sky (equatorial)';
-        },
-        wwtLocation: function () {
-            return {
-                lat: this.wwtSettings.get_locationLat(),
-                lon: this.wwtSettings.get_locationLng(),
-                alt: this.wwtSettings.get_locationAltitude(),
-            };
-        },
-    },
-}));
-
-;// CONCATENATED MODULE: ./src/components/wwtHUD.vue?vue&type=script&lang=ts
- 
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/wwtHUD.vue?vue&type=style&index=0&id=5867328d&lang=less
-var wwtHUDvue_type_style_index_0_id_5867328d_lang_less = __webpack_require__(300);
-;// CONCATENATED MODULE: ./src/components/wwtHUD.vue?vue&type=style&index=0&id=5867328d&lang=less
-
-;// CONCATENATED MODULE: ./src/components/wwtHUD.vue
-
-
-
-
-;
-
-
-const wwtHUD_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(wwtHUDvue_type_script_lang_ts, [['render',wwtHUDvue_type_template_id_5867328d_ts_true_render]])
-
-/* harmony default export */ const wwtHUD = (wwtHUD_exports_);
-;// CONCATENATED MODULE: ./src/background.ts
-var BackgroundImageset = /** @class */ (function () {
-    function BackgroundImageset(displayName, imagesetName) {
-        this.displayName = displayName;
-        this.imagesetName = imagesetName;
-    }
-    return BackgroundImageset;
-}());
-
-var skyBackgroundImagesets = [
-    new BackgroundImageset("Optical (Terapixel DSS)", "Digitized Sky Survey (Color)"),
-    new BackgroundImageset("Low-frequency radio (VLSS)", "VLSS: VLA Low-frequency Sky Survey (Radio)"),
-    new BackgroundImageset("Infrared (2MASS)", "2Mass: Imagery (Infrared)"),
-    new BackgroundImageset("Infrared (SFD dust map)", "SFD Dust Map (Infrared)"),
-    new BackgroundImageset("Ultraviolet (GALEX)", "GALEX (Ultraviolet)"),
-    new BackgroundImageset("X-Ray (ROSAT RASS)", "RASS: ROSAT All Sky Survey (X-ray)"),
-    new BackgroundImageset("Gamma Rays (FERMI LAT 8-year)", "Fermi LAT 8-year (gamma)"),
-];
-
-;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Gallery.vue?vue&type=template&id=4cc30028&ts=true
-
-
-var Galleryvue_type_template_id_4cc30028_ts_true_hoisted_1 = { class: "default-activator-title noselect" };
-var Galleryvue_type_template_id_4cc30028_ts_true_hoisted_2 = ["src"];
-var Galleryvue_type_template_id_4cc30028_ts_true_hoisted_3 = { class: "gallery-header" };
-var Galleryvue_type_template_id_4cc30028_ts_true_hoisted_4 = { class: "gallery-title" };
-var Galleryvue_type_template_id_4cc30028_ts_true_hoisted_5 = { class: "gallery-content" };
-var _hoisted_6 = ["onClick"];
-var _hoisted_7 = ["src"];
-var _hoisted_8 = { class: "place-name noselect" };
-function Galleryvue_type_template_id_4cc30028_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
-    var _component_font_awesome_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("font-awesome-icon");
-    return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
-        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['gallery-root', { 'open': _ctx.open }])
-    }, [
-        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
-            class: "just-holding-events",
-            onClick: _cache[2] || (_cache[2] = function ($event) { return (_ctx.open = true); }),
-            onKeyup: _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)(function ($event) { return (_ctx.open = true); }, ["enter"])),
-            tabindex: "0"
-        }, [
-            (!_ctx.open)
-                ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "closed", { key: 0 }, function () {
-                    var _a, _b;
-                    return [
-                        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
-                            class: "default-activator blurred",
-                            onClick: _cache[0] || (_cache[0] = function ($event) { return (_ctx.open = true); }),
-                            onKeyup: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)(function ($event) { return (_ctx.open = true); }, ["enter"]))
-                        }, [
-                            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", Galleryvue_type_template_id_4cc30028_ts_true_hoisted_1, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.closedText), 1),
-                            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("img", {
-                                class: "noselect",
-                                src: _ctx.places[_ctx.previewIndex] ? ((_b = (_a = _ctx.getImageset(_ctx.places[_ctx.previewIndex])) === null || _a === void 0 ? void 0 : _a.get_thumbnailUrl()) !== null && _b !== void 0 ? _b : '') : ''
-                            }, null, 8, Galleryvue_type_template_id_4cc30028_ts_true_hoisted_2)
-                        ], 32)
-                    ];
+            destination = url !== null && url !== void 0 ? url : "".concat(API_BASE_URL, "/stories/user-experience");
+            return [2 /*return*/, fetch(destination, {
+                    method: "PUT",
+                    body: JSON.stringify(body),
+                    headers: {
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        "Authorization": apiKey,
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        "Content-Type": "application/json",
+                    },
                 })
-                : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)
-        ], 32),
-        (_ctx.open)
-            ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
-                key: 0,
-                style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)(_ctx.cssVars),
-                class: "gallery blurred"
-            }, [
-                (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", Galleryvue_type_template_id_4cc30028_ts_true_hoisted_3, [
-                    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", Galleryvue_type_template_id_4cc30028_ts_true_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.title), 1),
-                    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_font_awesome_icon, {
-                        class: "gallery-close",
-                        icon: "times",
-                        size: "lg",
-                        onClick: _cache[4] || (_cache[4] = function ($event) { return (_ctx.open = false); }),
-                        onKeyup: _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)(function ($event) { return (_ctx.open = false); }, ["enter"])),
-                        tabindex: "0"
-                    })
-                ]),
-                (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", Galleryvue_type_template_id_4cc30028_ts_true_hoisted_5, [
-                    ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)(_ctx.places.entries(), function (_a) {
-                        var _b, _c;
-                        var _d = __read(_a, 2), index = _d[0], place = _d[1];
-                        return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
-                            key: index,
-                            class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['gallery-item', { 'selected': _ctx.highlightLastOnly ? _ctx.selectedPlace === place : _ctx.selectedPlaces.includes(place) }]),
-                            onClick: function ($event) { return (_ctx.selectPlace(place)); }
-                        }, [
-                            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("img", {
-                                class: "noselect",
-                                src: (_c = (_b = _ctx.getImageset(place)) === null || _b === void 0 ? void 0 : _b.get_thumbnailUrl()) !== null && _c !== void 0 ? _c : ''
-                            }, null, 8, _hoisted_7),
-                            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", _hoisted_8, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(place.get_name()), 1)
-                        ], 10, _hoisted_6));
-                    }), 128))
-                ])
-            ], 4))
-            : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)
-    ], 2));
-}
-
-;// CONCATENATED MODULE: ./src/components/Gallery.vue?vue&type=template&id=4cc30028&ts=true
-
-;// CONCATENATED MODULE: ./node_modules/vue-demi/lib/index.mjs
-
-
-var lib_isVue2 = false
-var isVue3 = true
-var Vue2 = (/* unused pure expression or super */ null && (undefined))
-
-function install() {}
-
-function lib_set(target, key, val) {
-  if (Array.isArray(target)) {
-    target.length = Math.max(target.length, key)
-    target.splice(key, 1, val)
-    return val
-  }
-  target[key] = val
-  return val
-}
-
-function del(target, key) {
-  if (Array.isArray(target)) {
-    target.splice(key, 1)
-    return
-  }
-  delete target[key]
-}
-
-
-
-
-;// CONCATENATED MODULE: ./node_modules/pinia/dist/pinia.mjs
-/*!
- * pinia v2.1.7
- * (c) 2023 Eduardo San Martin Morote
- * @license MIT
- */
-
-
-
-/**
- * setActivePinia must be called to handle SSR at the top of functions like
- * `fetch`, `setup`, `serverPrefetch` and others
- */
-let activePinia;
-/**
- * Sets or unsets the active pinia. Used in SSR and internally when calling
- * actions and getters
- *
- * @param pinia - Pinia instance
- */
-// @ts-expect-error: cannot constrain the type of the return
-const setActivePinia = (pinia) => (activePinia = pinia);
-/**
- * Get the currently active pinia if there is any.
- */
-const getActivePinia = () => (hasInjectionContext() && inject(piniaSymbol)) || activePinia;
-const piniaSymbol = (( false) ? 0 : /* istanbul ignore next */ Symbol());
-
-function isPlainObject(
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-o) {
-    return (o &&
-        typeof o === 'object' &&
-        Object.prototype.toString.call(o) === '[object Object]' &&
-        typeof o.toJSON !== 'function');
+                    .catch(function (error) {
+                    console.error(error);
+                    return null;
+                })];
+        });
+    });
 }
-// type DeepReadonly<T> = { readonly [P in keyof T]: DeepReadonly<T[P]> }
-// TODO: can we change these to numbers?
-/**
- * Possible types for SubscriptionCallback
- */
-var MutationType;
-(function (MutationType) {
-    /**
-     * Direct mutation of the state:
-     *
-     * - `store.name = 'new name'`
-     * - `store.$state.name = 'new name'`
-     * - `store.list.push('new item')`
-     */
-    MutationType["direct"] = "direct";
-    /**
-     * Mutated the state with `$patch` and an object
-     *
-     * - `store.$patch({ name: 'newName' })`
-     */
-    MutationType["patchObject"] = "patch object";
-    /**
-     * Mutated the state with `$patch` and a function
-     *
-     * - `store.$patch(state => state.name = 'newName')`
-     */
-    MutationType["patchFunction"] = "patch function";
-    // maybe reset? for $state = {} and $reset
-})(MutationType || (MutationType = {}));
-
-const IS_CLIENT = typeof window !== 'undefined';
-/**
- * Should we add the devtools plugins.
- * - only if dev mode or forced through the prod devtools flag
- * - not in test
- * - only if window exists (could change in the future)
- */
-const USE_DEVTOOLS = (/* unused pure expression or super */ null && ( false && 0));
-
-/*
- * FileSaver.js A saveAs() FileSaver implementation.
- *
- * Originally by Eli Grey, adapted as an ESM module by Eduardo San Martin
- * Morote.
- *
- * License : MIT
- */
-// The one and only way of getting global scope in all environments
-// https://stackoverflow.com/q/3277182/1008999
-const _global = /*#__PURE__*/ (() => typeof window === 'object' && window.window === window
-    ? window
-    : typeof self === 'object' && self.self === self
-        ? self
-        : typeof global === 'object' && global.global === global
-            ? global
-            : typeof globalThis === 'object'
-                ? globalThis
-                : { HTMLElement: null })();
-function bom(blob, { autoBom = false } = {}) {
-    // prepend BOM for UTF-8 XML and text/* types (including HTML)
-    // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
-    if (autoBom &&
-        /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
-        return new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
-    }
-    return blob;
-}
-function download(url, name, opts) {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url);
-    xhr.responseType = 'blob';
-    xhr.onload = function () {
-        saveAs(xhr.response, name, opts);
-    };
-    xhr.onerror = function () {
-        console.error('could not download file');
-    };
-    xhr.send();
-}
-function corsEnabled(url) {
-    const xhr = new XMLHttpRequest();
-    // use sync to avoid popup blocker
-    xhr.open('HEAD', url, false);
-    try {
-        xhr.send();
-    }
-    catch (e) { }
-    return xhr.status >= 200 && xhr.status <= 299;
-}
-// `a.click()` doesn't work for all browsers (#465)
-function click(node) {
-    try {
-        node.dispatchEvent(new MouseEvent('click'));
-    }
-    catch (e) {
-        const evt = document.createEvent('MouseEvents');
-        evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
-        node.dispatchEvent(evt);
-    }
-}
-const _navigator = 
- typeof navigator === 'object' ? navigator : { userAgent: '' };
-// Detect WebView inside a native macOS app by ruling out all browsers
-// We just need to check for 'Safari' because all other browsers (besides Firefox) include that too
-// https://www.whatismybrowser.com/guides/the-latest-user-agent/macos
-const isMacOSWebView = /*#__PURE__*/ (() => /Macintosh/.test(_navigator.userAgent) &&
-    /AppleWebKit/.test(_navigator.userAgent) &&
-    !/Safari/.test(_navigator.userAgent))();
-const saveAs = !IS_CLIENT
-    ? () => { } // noop
-    : // Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView or mini program
-        typeof HTMLAnchorElement !== 'undefined' &&
-            'download' in HTMLAnchorElement.prototype &&
-            !isMacOSWebView
-            ? downloadSaveAs
-            : // Use msSaveOrOpenBlob as a second approach
-                'msSaveOrOpenBlob' in _navigator
-                    ? msSaveAs
-                    : // Fallback to using FileReader and a popup
-                        fileSaverSaveAs;
-function downloadSaveAs(blob, name = 'download', opts) {
-    const a = document.createElement('a');
-    a.download = name;
-    a.rel = 'noopener'; // tabnabbing
-    // TODO: detect chrome extensions & packaged apps
-    // a.target = '_blank'
-    if (typeof blob === 'string') {
-        // Support regular links
-        a.href = blob;
-        if (a.origin !== location.origin) {
-            if (corsEnabled(a.href)) {
-                download(blob, name, opts);
-            }
-            else {
-                a.target = '_blank';
-                click(a);
-            }
-        }
-        else {
-            click(a);
-        }
-    }
-    else {
-        // Support blobs
-        a.href = URL.createObjectURL(blob);
-        setTimeout(function () {
-            URL.revokeObjectURL(a.href);
-        }, 4e4); // 40s
-        setTimeout(function () {
-            click(a);
-        }, 0);
-    }
-}
-function msSaveAs(blob, name = 'download', opts) {
-    if (typeof blob === 'string') {
-        if (corsEnabled(blob)) {
-            download(blob, name, opts);
-        }
-        else {
-            const a = document.createElement('a');
-            a.href = blob;
-            a.target = '_blank';
-            setTimeout(function () {
-                click(a);
-            });
-        }
-    }
-    else {
-        // @ts-ignore: works on windows
-        navigator.msSaveOrOpenBlob(bom(blob, opts), name);
-    }
-}
-function fileSaverSaveAs(blob, name, opts, popup) {
-    // Open a popup immediately do go around popup blocker
-    // Mostly only available on user interaction and the fileReader is async so...
-    popup = popup || open('', '_blank');
-    if (popup) {
-        popup.document.title = popup.document.body.innerText = 'downloading...';
-    }
-    if (typeof blob === 'string')
-        return download(blob, name, opts);
-    const force = blob.type === 'application/octet-stream';
-    const isSafari = /constructor/i.test(String(_global.HTMLElement)) || 'safari' in _global;
-    const isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);
-    if ((isChromeIOS || (force && isSafari) || isMacOSWebView) &&
-        typeof FileReader !== 'undefined') {
-        // Safari doesn't allow downloading of blob URLs
-        const reader = new FileReader();
-        reader.onloadend = function () {
-            let url = reader.result;
-            if (typeof url !== 'string') {
-                popup = null;
-                throw new Error('Wrong reader.result type');
-            }
-            url = isChromeIOS
-                ? url
-                : url.replace(/^data:[^;]*;/, 'data:attachment/file;');
-            if (popup) {
-                popup.location.href = url;
-            }
-            else {
-                location.assign(url);
-            }
-            popup = null; // reverse-tabnabbing #460
-        };
-        reader.readAsDataURL(blob);
-    }
-    else {
-        const url = URL.createObjectURL(blob);
-        if (popup)
-            popup.location.assign(url);
-        else
-            location.href = url;
-        popup = null; // reverse-tabnabbing #460
-        setTimeout(function () {
-            URL.revokeObjectURL(url);
-        }, 4e4); // 40s
-    }
-}
-
-/**
- * Shows a toast or console.log
- *
- * @param message - message to log
- * @param type - different color of the tooltip
- */
-function toastMessage(message, type) {
-    const piniaMessage = '🍍 ' + message;
-    if (typeof __VUE_DEVTOOLS_TOAST__ === 'function') {
-        // No longer available :(
-        __VUE_DEVTOOLS_TOAST__(piniaMessage, type);
-    }
-    else if (type === 'error') {
-        console.error(piniaMessage);
-    }
-    else if (type === 'warn') {
-        console.warn(piniaMessage);
-    }
-    else {
-        console.log(piniaMessage);
-    }
-}
-function isPinia(o) {
-    return '_a' in o && 'install' in o;
-}
-
-/**
- * This file contain devtools actions, they are not Pinia actions.
- */
-// ---
-function checkClipboardAccess() {
-    if (!('clipboard' in navigator)) {
-        toastMessage(`Your browser doesn't support the Clipboard API`, 'error');
-        return true;
-    }
-}
-function checkNotFocusedError(error) {
-    if (error instanceof Error &&
-        error.message.toLowerCase().includes('document is not focused')) {
-        toastMessage('You need to activate the "Emulate a focused page" setting in the "Rendering" panel of devtools.', 'warn');
-        return true;
-    }
-    return false;
-}
-async function actionGlobalCopyState(pinia) {
-    if (checkClipboardAccess())
-        return;
-    try {
-        await navigator.clipboard.writeText(JSON.stringify(pinia.state.value));
-        toastMessage('Global state copied to clipboard.');
-    }
-    catch (error) {
-        if (checkNotFocusedError(error))
-            return;
-        toastMessage(`Failed to serialize the state. Check the console for more details.`, 'error');
-        console.error(error);
-    }
-}
-async function actionGlobalPasteState(pinia) {
-    if (checkClipboardAccess())
-        return;
-    try {
-        loadStoresState(pinia, JSON.parse(await navigator.clipboard.readText()));
-        toastMessage('Global state pasted from clipboard.');
-    }
-    catch (error) {
-        if (checkNotFocusedError(error))
-            return;
-        toastMessage(`Failed to deserialize the state from clipboard. Check the console for more details.`, 'error');
-        console.error(error);
-    }
-}
-async function actionGlobalSaveState(pinia) {
-    try {
-        saveAs(new Blob([JSON.stringify(pinia.state.value)], {
-            type: 'text/plain;charset=utf-8',
-        }), 'pinia-state.json');
-    }
-    catch (error) {
-        toastMessage(`Failed to export the state as JSON. Check the console for more details.`, 'error');
-        console.error(error);
-    }
-}
-let fileInput;
-function getFileOpener() {
-    if (!fileInput) {
-        fileInput = document.createElement('input');
-        fileInput.type = 'file';
-        fileInput.accept = '.json';
-    }
-    function openFile() {
-        return new Promise((resolve, reject) => {
-            fileInput.onchange = async () => {
-                const files = fileInput.files;
-                if (!files)
-                    return resolve(null);
-                const file = files.item(0);
-                if (!file)
-                    return resolve(null);
-                return resolve({ text: await file.text(), file });
-            };
-            // @ts-ignore: TODO: changed from 4.3 to 4.4
-            fileInput.oncancel = () => resolve(null);
-            fileInput.onerror = reject;
-            fileInput.click();
-        });
-    }
-    return openFile;
-}
-async function actionGlobalOpenStateFile(pinia) {
-    try {
-        const open = getFileOpener();
-        const result = await open();
-        if (!result)
-            return;
-        const { text, file } = result;
-        loadStoresState(pinia, JSON.parse(text));
-        toastMessage(`Global state imported from "${file.name}".`);
-    }
-    catch (error) {
-        toastMessage(`Failed to import the state from JSON. Check the console for more details.`, 'error');
-        console.error(error);
-    }
-}
-function loadStoresState(pinia, state) {
-    for (const key in state) {
-        const storeState = pinia.state.value[key];
-        // store is already instantiated, patch it
-        if (storeState) {
-            Object.assign(storeState, state[key]);
-        }
-        else {
-            // store is not instantiated, set the initial state
-            pinia.state.value[key] = state[key];
-        }
-    }
-}
-
-function formatDisplay(display) {
-    return {
-        _custom: {
-            display,
-        },
-    };
-}
-const PINIA_ROOT_LABEL = '🍍 Pinia (root)';
-const PINIA_ROOT_ID = '_root';
-function formatStoreForInspectorTree(store) {
-    return isPinia(store)
-        ? {
-            id: PINIA_ROOT_ID,
-            label: PINIA_ROOT_LABEL,
-        }
-        : {
-            id: store.$id,
-            label: store.$id,
-        };
-}
-function formatStoreForInspectorState(store) {
-    if (isPinia(store)) {
-        const storeNames = Array.from(store._s.keys());
-        const storeMap = store._s;
-        const state = {
-            state: storeNames.map((storeId) => ({
-                editable: true,
-                key: storeId,
-                value: store.state.value[storeId],
-            })),
-            getters: storeNames
-                .filter((id) => storeMap.get(id)._getters)
-                .map((id) => {
-                const store = storeMap.get(id);
-                return {
-                    editable: false,
-                    key: id,
-                    value: store._getters.reduce((getters, key) => {
-                        getters[key] = store[key];
-                        return getters;
-                    }, {}),
-                };
-            }),
-        };
-        return state;
-    }
-    const state = {
-        state: Object.keys(store.$state).map((key) => ({
-            editable: true,
-            key,
-            value: store.$state[key],
-        })),
-    };
-    // avoid adding empty getters
-    if (store._getters && store._getters.length) {
-        state.getters = store._getters.map((getterName) => ({
-            editable: false,
-            key: getterName,
-            value: store[getterName],
-        }));
-    }
-    if (store._customProperties.size) {
-        state.customProperties = Array.from(store._customProperties).map((key) => ({
-            editable: true,
-            key,
-            value: store[key],
-        }));
-    }
-    return state;
-}
-function formatEventData(events) {
-    if (!events)
-        return {};
-    if (Array.isArray(events)) {
-        // TODO: handle add and delete for arrays and objects
-        return events.reduce((data, event) => {
-            data.keys.push(event.key);
-            data.operations.push(event.type);
-            data.oldValue[event.key] = event.oldValue;
-            data.newValue[event.key] = event.newValue;
-            return data;
-        }, {
-            oldValue: {},
-            keys: [],
-            operations: [],
-            newValue: {},
-        });
-    }
-    else {
-        return {
-            operation: formatDisplay(events.type),
-            key: formatDisplay(events.key),
-            oldValue: events.oldValue,
-            newValue: events.newValue,
-        };
-    }
-}
-function formatMutationType(type) {
-    switch (type) {
-        case MutationType.direct:
-            return 'mutation';
-        case MutationType.patchFunction:
-            return '$patch';
-        case MutationType.patchObject:
-            return '$patch';
-        default:
-            return 'unknown';
-    }
-}
-
-// timeline can be paused when directly changing the state
-let isTimelineActive = true;
-const componentStateTypes = (/* unused pure expression or super */ null && ([]));
-const MUTATIONS_LAYER_ID = 'pinia:mutations';
-const INSPECTOR_ID = 'pinia';
-const { assign: assign$1 } = Object;
-/**
- * Gets the displayed name of a store in devtools
- *
- * @param id - id of the store
- * @returns a formatted string
- */
-const getStoreType = (id) => '🍍 ' + id;
-/**
- * Add the pinia plugin without any store. Allows displaying a Pinia plugin tab
- * as soon as it is added to the application.
- *
- * @param app - Vue application
- * @param pinia - pinia instance
- */
-function registerPiniaDevtools(app, pinia) {
-    setupDevtoolsPlugin({
-        id: 'dev.esm.pinia',
-        label: 'Pinia 🍍',
-        logo: 'https://pinia.vuejs.org/logo.svg',
-        packageName: 'pinia',
-        homepage: 'https://pinia.vuejs.org',
-        componentStateTypes,
-        app,
-    }, (api) => {
-        if (typeof api.now !== 'function') {
-            toastMessage('You seem to be using an outdated version of Vue Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://devtools.vuejs.org/guide/installation.html.');
-        }
-        api.addTimelineLayer({
-            id: MUTATIONS_LAYER_ID,
-            label: `Pinia 🍍`,
-            color: 0xe5df88,
-        });
-        api.addInspector({
-            id: INSPECTOR_ID,
-            label: 'Pinia 🍍',
-            icon: 'storage',
-            treeFilterPlaceholder: 'Search stores',
-            actions: [
-                {
-                    icon: 'content_copy',
-                    action: () => {
-                        actionGlobalCopyState(pinia);
-                    },
-                    tooltip: 'Serialize and copy the state',
-                },
-                {
-                    icon: 'content_paste',
-                    action: async () => {
-                        await actionGlobalPasteState(pinia);
-                        api.sendInspectorTree(INSPECTOR_ID);
-                        api.sendInspectorState(INSPECTOR_ID);
-                    },
-                    tooltip: 'Replace the state with the content of your clipboard',
-                },
-                {
-                    icon: 'save',
-                    action: () => {
-                        actionGlobalSaveState(pinia);
-                    },
-                    tooltip: 'Save the state as a JSON file',
-                },
-                {
-                    icon: 'folder_open',
-                    action: async () => {
-                        await actionGlobalOpenStateFile(pinia);
-                        api.sendInspectorTree(INSPECTOR_ID);
-                        api.sendInspectorState(INSPECTOR_ID);
-                    },
-                    tooltip: 'Import the state from a JSON file',
-                },
-            ],
-            nodeActions: [
-                {
-                    icon: 'restore',
-                    tooltip: 'Reset the state (with "$reset")',
-                    action: (nodeId) => {
-                        const store = pinia._s.get(nodeId);
-                        if (!store) {
-                            toastMessage(`Cannot reset "${nodeId}" store because it wasn't found.`, 'warn');
-                        }
-                        else if (typeof store.$reset !== 'function') {
-                            toastMessage(`Cannot reset "${nodeId}" store because it doesn't have a "$reset" method implemented.`, 'warn');
-                        }
-                        else {
-                            store.$reset();
-                            toastMessage(`Store "${nodeId}" reset.`);
-                        }
-                    },
-                },
-            ],
-        });
-        api.on.inspectComponent((payload, ctx) => {
-            const proxy = (payload.componentInstance &&
-                payload.componentInstance.proxy);
-            if (proxy && proxy._pStores) {
-                const piniaStores = payload.componentInstance.proxy._pStores;
-                Object.values(piniaStores).forEach((store) => {
-                    payload.instanceData.state.push({
-                        type: getStoreType(store.$id),
-                        key: 'state',
-                        editable: true,
-                        value: store._isOptionsAPI
-                            ? {
-                                _custom: {
-                                    value: toRaw(store.$state),
-                                    actions: [
-                                        {
-                                            icon: 'restore',
-                                            tooltip: 'Reset the state of this store',
-                                            action: () => store.$reset(),
-                                        },
-                                    ],
-                                },
-                            }
-                            : // NOTE: workaround to unwrap transferred refs
-                                Object.keys(store.$state).reduce((state, key) => {
-                                    state[key] = store.$state[key];
-                                    return state;
-                                }, {}),
-                    });
-                    if (store._getters && store._getters.length) {
-                        payload.instanceData.state.push({
-                            type: getStoreType(store.$id),
-                            key: 'getters',
-                            editable: false,
-                            value: store._getters.reduce((getters, key) => {
-                                try {
-                                    getters[key] = store[key];
-                                }
-                                catch (error) {
-                                    // @ts-expect-error: we just want to show it in devtools
-                                    getters[key] = error;
-                                }
-                                return getters;
-                            }, {}),
-                        });
-                    }
-                });
-            }
-        });
-        api.on.getInspectorTree((payload) => {
-            if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
-                let stores = [pinia];
-                stores = stores.concat(Array.from(pinia._s.values()));
-                payload.rootNodes = (payload.filter
-                    ? stores.filter((store) => '$id' in store
-                        ? store.$id
-                            .toLowerCase()
-                            .includes(payload.filter.toLowerCase())
-                        : PINIA_ROOT_LABEL.toLowerCase().includes(payload.filter.toLowerCase()))
-                    : stores).map(formatStoreForInspectorTree);
-            }
-        });
-        api.on.getInspectorState((payload) => {
-            if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
-                const inspectedStore = payload.nodeId === PINIA_ROOT_ID
-                    ? pinia
-                    : pinia._s.get(payload.nodeId);
-                if (!inspectedStore) {
-                    // this could be the selected store restored for a different project
-                    // so it's better not to say anything here
-                    return;
-                }
-                if (inspectedStore) {
-                    payload.state = formatStoreForInspectorState(inspectedStore);
-                }
-            }
-        });
-        api.on.editInspectorState((payload, ctx) => {
-            if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
-                const inspectedStore = payload.nodeId === PINIA_ROOT_ID
-                    ? pinia
-                    : pinia._s.get(payload.nodeId);
-                if (!inspectedStore) {
-                    return toastMessage(`store "${payload.nodeId}" not found`, 'error');
-                }
-                const { path } = payload;
-                if (!isPinia(inspectedStore)) {
-                    // access only the state
-                    if (path.length !== 1 ||
-                        !inspectedStore._customProperties.has(path[0]) ||
-                        path[0] in inspectedStore.$state) {
-                        path.unshift('$state');
-                    }
-                }
-                else {
-                    // Root access, we can omit the `.value` because the devtools API does it for us
-                    path.unshift('state');
-                }
-                isTimelineActive = false;
-                payload.set(inspectedStore, path, payload.state.value);
-                isTimelineActive = true;
-            }
-        });
-        api.on.editComponentState((payload) => {
-            if (payload.type.startsWith('🍍')) {
-                const storeId = payload.type.replace(/^🍍\s*/, '');
-                const store = pinia._s.get(storeId);
-                if (!store) {
-                    return toastMessage(`store "${storeId}" not found`, 'error');
-                }
-                const { path } = payload;
-                if (path[0] !== 'state') {
-                    return toastMessage(`Invalid path for store "${storeId}":\n${path}\nOnly state can be modified.`);
-                }
-                // rewrite the first entry to be able to directly set the state as
-                // well as any other path
-                path[0] = '$state';
-                isTimelineActive = false;
-                payload.set(store, path, payload.state.value);
-                isTimelineActive = true;
-            }
-        });
-    });
-}
-function addStoreToDevtools(app, store) {
-    if (!componentStateTypes.includes(getStoreType(store.$id))) {
-        componentStateTypes.push(getStoreType(store.$id));
-    }
-    setupDevtoolsPlugin({
-        id: 'dev.esm.pinia',
-        label: 'Pinia 🍍',
-        logo: 'https://pinia.vuejs.org/logo.svg',
-        packageName: 'pinia',
-        homepage: 'https://pinia.vuejs.org',
-        componentStateTypes,
-        app,
-        settings: {
-            logStoreChanges: {
-                label: 'Notify about new/deleted stores',
-                type: 'boolean',
-                defaultValue: true,
-            },
-            // useEmojis: {
-            //   label: 'Use emojis in messages ⚡️',
-            //   type: 'boolean',
-            //   defaultValue: true,
-            // },
-        },
-    }, (api) => {
-        // gracefully handle errors
-        const now = typeof api.now === 'function' ? api.now.bind(api) : Date.now;
-        store.$onAction(({ after, onError, name, args }) => {
-            const groupId = runningActionId++;
-            api.addTimelineEvent({
-                layerId: MUTATIONS_LAYER_ID,
-                event: {
-                    time: now(),
-                    title: '🛫 ' + name,
-                    subtitle: 'start',
-                    data: {
-                        store: formatDisplay(store.$id),
-                        action: formatDisplay(name),
-                        args,
-                    },
-                    groupId,
-                },
-            });
-            after((result) => {
-                activeAction = undefined;
-                api.addTimelineEvent({
-                    layerId: MUTATIONS_LAYER_ID,
-                    event: {
-                        time: now(),
-                        title: '🛬 ' + name,
-                        subtitle: 'end',
-                        data: {
-                            store: formatDisplay(store.$id),
-                            action: formatDisplay(name),
-                            args,
-                            result,
-                        },
-                        groupId,
-                    },
-                });
-            });
-            onError((error) => {
-                activeAction = undefined;
-                api.addTimelineEvent({
-                    layerId: MUTATIONS_LAYER_ID,
-                    event: {
-                        time: now(),
-                        logType: 'error',
-                        title: '💥 ' + name,
-                        subtitle: 'end',
-                        data: {
-                            store: formatDisplay(store.$id),
-                            action: formatDisplay(name),
-                            args,
-                            error,
-                        },
-                        groupId,
-                    },
-                });
-            });
-        }, true);
-        store._customProperties.forEach((name) => {
-            watch(() => unref(store[name]), (newValue, oldValue) => {
-                api.notifyComponentUpdate();
-                api.sendInspectorState(INSPECTOR_ID);
-                if (isTimelineActive) {
-                    api.addTimelineEvent({
-                        layerId: MUTATIONS_LAYER_ID,
-                        event: {
-                            time: now(),
-                            title: 'Change',
-                            subtitle: name,
-                            data: {
-                                newValue,
-                                oldValue,
-                            },
-                            groupId: activeAction,
-                        },
-                    });
-                }
-            }, { deep: true });
-        });
-        store.$subscribe(({ events, type }, state) => {
-            api.notifyComponentUpdate();
-            api.sendInspectorState(INSPECTOR_ID);
-            if (!isTimelineActive)
-                return;
-            // rootStore.state[store.id] = state
-            const eventData = {
-                time: now(),
-                title: formatMutationType(type),
-                data: assign$1({ store: formatDisplay(store.$id) }, formatEventData(events)),
-                groupId: activeAction,
-            };
-            if (type === MutationType.patchFunction) {
-                eventData.subtitle = '⤵️';
-            }
-            else if (type === MutationType.patchObject) {
-                eventData.subtitle = '🧩';
-            }
-            else if (events && !Array.isArray(events)) {
-                eventData.subtitle = events.type;
-            }
-            if (events) {
-                eventData.data['rawEvent(s)'] = {
-                    _custom: {
-                        display: 'DebuggerEvent',
-                        type: 'object',
-                        tooltip: 'raw DebuggerEvent[]',
-                        value: events,
-                    },
-                };
-            }
-            api.addTimelineEvent({
-                layerId: MUTATIONS_LAYER_ID,
-                event: eventData,
-            });
-        }, { detached: true, flush: 'sync' });
-        const hotUpdate = store._hotUpdate;
-        store._hotUpdate = markRaw((newStore) => {
-            hotUpdate(newStore);
-            api.addTimelineEvent({
-                layerId: MUTATIONS_LAYER_ID,
-                event: {
-                    time: now(),
-                    title: '🔥 ' + store.$id,
-                    subtitle: 'HMR update',
-                    data: {
-                        store: formatDisplay(store.$id),
-                        info: formatDisplay(`HMR update`),
-                    },
-                },
-            });
-            // update the devtools too
-            api.notifyComponentUpdate();
-            api.sendInspectorTree(INSPECTOR_ID);
-            api.sendInspectorState(INSPECTOR_ID);
-        });
-        const { $dispose } = store;
-        store.$dispose = () => {
-            $dispose();
-            api.notifyComponentUpdate();
-            api.sendInspectorTree(INSPECTOR_ID);
-            api.sendInspectorState(INSPECTOR_ID);
-            api.getSettings().logStoreChanges &&
-                toastMessage(`Disposed "${store.$id}" store 🗑`);
-        };
-        // trigger an update so it can display new registered stores
-        api.notifyComponentUpdate();
-        api.sendInspectorTree(INSPECTOR_ID);
-        api.sendInspectorState(INSPECTOR_ID);
-        api.getSettings().logStoreChanges &&
-            toastMessage(`"${store.$id}" store installed 🆕`);
-    });
-}
-let runningActionId = 0;
-let activeAction;
-/**
- * Patches a store to enable action grouping in devtools by wrapping the store with a Proxy that is passed as the
- * context of all actions, allowing us to set `runningAction` on each access and effectively associating any state
- * mutation to the action.
- *
- * @param store - store to patch
- * @param actionNames - list of actionst to patch
- */
-function patchActionForGrouping(store, actionNames, wrapWithProxy) {
-    // original actions of the store as they are given by pinia. We are going to override them
-    const actions = actionNames.reduce((storeActions, actionName) => {
-        // use toRaw to avoid tracking #541
-        storeActions[actionName] = toRaw(store)[actionName];
-        return storeActions;
-    }, {});
-    for (const actionName in actions) {
-        store[actionName] = function () {
-            // the running action id is incremented in a before action hook
-            const _actionId = runningActionId;
-            const trackedStore = wrapWithProxy
-                ? new Proxy(store, {
-                    get(...args) {
-                        activeAction = _actionId;
-                        return Reflect.get(...args);
-                    },
-                    set(...args) {
-                        activeAction = _actionId;
-                        return Reflect.set(...args);
-                    },
-                })
-                : store;
-            // For Setup Stores we need https://github.com/tc39/proposal-async-context
-            activeAction = _actionId;
-            const retValue = actions[actionName].apply(trackedStore, arguments);
-            // this is safer as async actions in Setup Stores would associate mutations done outside of the action
-            activeAction = undefined;
-            return retValue;
-        };
-    }
-}
-/**
- * pinia.use(devtoolsPlugin)
- */
-function devtoolsPlugin({ app, store, options }) {
-    // HMR module
-    if (store.$id.startsWith('__hot:')) {
-        return;
-    }
-    // detect option api vs setup api
-    store._isOptionsAPI = !!options.state;
-    patchActionForGrouping(store, Object.keys(options.actions), store._isOptionsAPI);
-    // Upgrade the HMR to also update the new actions
-    const originalHotUpdate = store._hotUpdate;
-    toRaw(store)._hotUpdate = function (newStore) {
-        originalHotUpdate.apply(this, arguments);
-        patchActionForGrouping(store, Object.keys(newStore._hmrPayload.actions), !!store._isOptionsAPI);
-    };
-    addStoreToDevtools(app, 
-    // FIXME: is there a way to allow the assignment from Store<Id, S, G, A> to StoreGeneric?
-    store);
-}
-
-/**
- * Creates a Pinia instance to be used by the application
- */
-function createPinia() {
-    const scope = effectScope(true);
-    // NOTE: here we could check the window object for a state and directly set it
-    // if there is anything like it with Vue 3 SSR
-    const state = scope.run(() => ref({}));
-    let _p = [];
-    // plugins added before calling app.use(pinia)
-    let toBeInstalled = [];
-    const pinia = markRaw({
-        install(app) {
-            // this allows calling useStore() outside of a component setup after
-            // installing pinia's plugin
-            setActivePinia(pinia);
-            if (!isVue2) {
-                pinia._a = app;
-                app.provide(piniaSymbol, pinia);
-                app.config.globalProperties.$pinia = pinia;
-                /* istanbul ignore else */
-                if (USE_DEVTOOLS) {
-                    registerPiniaDevtools(app, pinia);
-                }
-                toBeInstalled.forEach((plugin) => _p.push(plugin));
-                toBeInstalled = [];
-            }
-        },
-        use(plugin) {
-            if (!this._a && !isVue2) {
-                toBeInstalled.push(plugin);
-            }
-            else {
-                _p.push(plugin);
-            }
-            return this;
-        },
-        _p,
-        // it's actually undefined here
-        // @ts-expect-error
-        _a: null,
-        _e: scope,
-        _s: new Map(),
-        state,
-    });
-    // pinia devtools rely on dev only features so they cannot be forced unless
-    // the dev build of Vue is used. Avoid old browsers like IE11.
-    if (USE_DEVTOOLS && typeof Proxy !== 'undefined') {
-        pinia.use(devtoolsPlugin);
-    }
-    return pinia;
-}
-
-/**
- * Checks if a function is a `StoreDefinition`.
- *
- * @param fn - object to test
- * @returns true if `fn` is a StoreDefinition
- */
-const isUseStore = (fn) => {
-    return typeof fn === 'function' && typeof fn.$id === 'string';
-};
-/**
- * Mutates in place `newState` with `oldState` to _hot update_ it. It will
- * remove any key not existing in `newState` and recursively merge plain
- * objects.
- *
- * @param newState - new state object to be patched
- * @param oldState - old state that should be used to patch newState
- * @returns - newState
- */
-function patchObject(newState, oldState) {
-    // no need to go through symbols because they cannot be serialized anyway
-    for (const key in oldState) {
-        const subPatch = oldState[key];
-        // skip the whole sub tree
-        if (!(key in newState)) {
-            continue;
-        }
-        const targetValue = newState[key];
-        if (isPlainObject(targetValue) &&
-            isPlainObject(subPatch) &&
-            !isRef(subPatch) &&
-            !isReactive(subPatch)) {
-            newState[key] = patchObject(targetValue, subPatch);
-        }
-        else {
-            // objects are either a bit more complex (e.g. refs) or primitives, so we
-            // just set the whole thing
-            if (isVue2) {
-                set(newState, key, subPatch);
-            }
-            else {
-                newState[key] = subPatch;
-            }
-        }
-    }
-    return newState;
-}
-/**
- * Creates an _accept_ function to pass to `import.meta.hot` in Vite applications.
- *
- * @example
- * ```js
- * const useUser = defineStore(...)
- * if (import.meta.hot) {
- *   import.meta.hot.accept(acceptHMRUpdate(useUser, import.meta.hot))
- * }
- * ```
- *
- * @param initialUseStore - return of the defineStore to hot update
- * @param hot - `import.meta.hot`
- */
-function acceptHMRUpdate(initialUseStore, hot) {
-    // strip as much as possible from iife.prod
-    if (true) {
-        return () => { };
-    }
-    return (newModule) => {
-        const pinia = hot.data.pinia || initialUseStore._pinia;
-        if (!pinia) {
-            // this store is still not used
-            return;
-        }
-        // preserve the pinia instance across loads
-        hot.data.pinia = pinia;
-        // console.log('got data', newStore)
-        for (const exportName in newModule) {
-            const useStore = newModule[exportName];
-            // console.log('checking for', exportName)
-            if (isUseStore(useStore) && pinia._s.has(useStore.$id)) {
-                // console.log('Accepting update for', useStore.$id)
-                const id = useStore.$id;
-                if (id !== initialUseStore.$id) {
-                    console.warn(`The id of the store changed from "${initialUseStore.$id}" to "${id}". Reloading.`);
-                    // return import.meta.hot.invalidate()
-                    return hot.invalidate();
-                }
-                const existingStore = pinia._s.get(id);
-                if (!existingStore) {
-                    console.log(`[Pinia]: skipping hmr because store doesn't exist yet`);
-                    return;
-                }
-                useStore(pinia, existingStore);
-            }
-        }
-    };
-}
-
-const pinia_noop = () => { };
-function addSubscription(subscriptions, callback, detached, onCleanup = pinia_noop) {
-    subscriptions.push(callback);
-    const removeSubscription = () => {
-        const idx = subscriptions.indexOf(callback);
-        if (idx > -1) {
-            subscriptions.splice(idx, 1);
-            onCleanup();
-        }
-    };
-    if (!detached && getCurrentScope()) {
-        onScopeDispose(removeSubscription);
-    }
-    return removeSubscription;
-}
-function triggerSubscriptions(subscriptions, ...args) {
-    subscriptions.slice().forEach((callback) => {
-        callback(...args);
-    });
-}
-
-const fallbackRunWithContext = (fn) => fn();
-function mergeReactiveObjects(target, patchToApply) {
-    // Handle Map instances
-    if (target instanceof Map && patchToApply instanceof Map) {
-        patchToApply.forEach((value, key) => target.set(key, value));
-    }
-    // Handle Set instances
-    if (target instanceof Set && patchToApply instanceof Set) {
-        patchToApply.forEach(target.add, target);
-    }
-    // no need to go through symbols because they cannot be serialized anyway
-    for (const key in patchToApply) {
-        if (!patchToApply.hasOwnProperty(key))
-            continue;
-        const subPatch = patchToApply[key];
-        const targetValue = target[key];
-        if (isPlainObject(targetValue) &&
-            isPlainObject(subPatch) &&
-            target.hasOwnProperty(key) &&
-            !isRef(subPatch) &&
-            !isReactive(subPatch)) {
-            // NOTE: here I wanted to warn about inconsistent types but it's not possible because in setup stores one might
-            // start the value of a property as a certain type e.g. a Map, and then for some reason, during SSR, change that
-            // to `undefined`. When trying to hydrate, we want to override the Map with `undefined`.
-            target[key] = mergeReactiveObjects(targetValue, subPatch);
-        }
-        else {
-            // @ts-expect-error: subPatch is a valid value
-            target[key] = subPatch;
-        }
-    }
-    return target;
-}
-const skipHydrateSymbol = ( false)
-    ? 0
-    : /* istanbul ignore next */ Symbol();
-const skipHydrateMap = /*#__PURE__*/ new WeakMap();
-/**
- * Tells Pinia to skip the hydration process of a given object. This is useful in setup stores (only) when you return a
- * stateful object in the store but it isn't really state. e.g. returning a router instance in a setup store.
- *
- * @param obj - target object
- * @returns obj
- */
-function skipHydrate(obj) {
-    return isVue2
-        ? // in @vue/composition-api, the refs are sealed so defineProperty doesn't work...
-            /* istanbul ignore next */ skipHydrateMap.set(obj, 1) && obj
-        : Object.defineProperty(obj, skipHydrateSymbol, {});
-}
-/**
- * Returns whether a value should be hydrated
- *
- * @param obj - target variable
- * @returns true if `obj` should be hydrated
- */
-function shouldHydrate(obj) {
-    return isVue2
-        ? /* istanbul ignore next */ !skipHydrateMap.has(obj)
-        : !isPlainObject(obj) || !obj.hasOwnProperty(skipHydrateSymbol);
-}
-const { assign: pinia_assign } = Object;
-function isComputed(o) {
-    return !!(isRef(o) && o.effect);
-}
-function createOptionsStore(id, options, pinia, hot) {
-    const { state, actions, getters } = options;
-    const initialState = pinia.state.value[id];
-    let store;
-    function setup() {
-        if (!initialState && ( true || 0)) {
-            /* istanbul ignore if */
-            if (isVue2) {
-                set(pinia.state.value, id, state ? state() : {});
-            }
-            else {
-                pinia.state.value[id] = state ? state() : {};
-            }
-        }
-        // avoid creating a state in pinia.state.value
-        const localState =  false
-            ? // use ref() to unwrap refs inside state TODO: check if this is still necessary
-                0
-            : toRefs(pinia.state.value[id]);
-        return pinia_assign(localState, actions, Object.keys(getters || {}).reduce((computedGetters, name) => {
-            if (false) {}
-            computedGetters[name] = markRaw(computed(() => {
-                setActivePinia(pinia);
-                // it was created just before
-                const store = pinia._s.get(id);
-                // allow cross using stores
-                /* istanbul ignore next */
-                if (isVue2 && !store._r)
-                    return;
-                // @ts-expect-error
-                // return getters![name].call(context, context)
-                // TODO: avoid reading the getter while assigning with a global variable
-                return getters[name].call(store, store);
-            }));
-            return computedGetters;
-        }, {}));
-    }
-    store = createSetupStore(id, setup, options, pinia, hot, true);
-    return store;
-}
-function createSetupStore($id, setup, options = {}, pinia, hot, isOptionsStore) {
-    let scope;
-    const optionsForPlugin = pinia_assign({ actions: {} }, options);
-    /* istanbul ignore if */
-    if (false) {}
-    // watcher options for $subscribe
-    const $subscribeOptions = {
-        deep: true,
-        // flush: 'post',
-    };
-    /* istanbul ignore else */
-    if (false) {}
-    // internal state
-    let isListening; // set to true at the end
-    let isSyncListening; // set to true at the end
-    let subscriptions = [];
-    let actionSubscriptions = [];
-    let debuggerEvents;
-    const initialState = pinia.state.value[$id];
-    // avoid setting the state for option stores if it is set
-    // by the setup
-    if (!isOptionsStore && !initialState && ( true || 0)) {
-        /* istanbul ignore if */
-        if (isVue2) {
-            set(pinia.state.value, $id, {});
-        }
-        else {
-            pinia.state.value[$id] = {};
-        }
-    }
-    const hotState = ref({});
-    // avoid triggering too many listeners
-    // https://github.com/vuejs/pinia/issues/1129
-    let activeListener;
-    function $patch(partialStateOrMutator) {
-        let subscriptionMutation;
-        isListening = isSyncListening = false;
-        // reset the debugger events since patches are sync
-        /* istanbul ignore else */
-        if ((false)) {}
-        if (typeof partialStateOrMutator === 'function') {
-            partialStateOrMutator(pinia.state.value[$id]);
-            subscriptionMutation = {
-                type: MutationType.patchFunction,
-                storeId: $id,
-                events: debuggerEvents,
-            };
-        }
-        else {
-            mergeReactiveObjects(pinia.state.value[$id], partialStateOrMutator);
-            subscriptionMutation = {
-                type: MutationType.patchObject,
-                payload: partialStateOrMutator,
-                storeId: $id,
-                events: debuggerEvents,
-            };
-        }
-        const myListenerId = (activeListener = Symbol());
-        nextTick().then(() => {
-            if (activeListener === myListenerId) {
-                isListening = true;
-            }
-        });
-        isSyncListening = true;
-        // because we paused the watcher, we need to manually call the subscriptions
-        triggerSubscriptions(subscriptions, subscriptionMutation, pinia.state.value[$id]);
-    }
-    const $reset = isOptionsStore
-        ? function $reset() {
-            const { state } = options;
-            const newState = state ? state() : {};
-            // we use a patch to group all changes into one single subscription
-            this.$patch(($state) => {
-                pinia_assign($state, newState);
-            });
-        }
-        : /* istanbul ignore next */
-            ( false)
-                ? 0
-                : pinia_noop;
-    function $dispose() {
-        scope.stop();
-        subscriptions = [];
-        actionSubscriptions = [];
-        pinia._s.delete($id);
-    }
-    /**
-     * Wraps an action to handle subscriptions.
-     *
-     * @param name - name of the action
-     * @param action - action to wrap
-     * @returns a wrapped action to handle subscriptions
-     */
-    function wrapAction(name, action) {
-        return function () {
-            setActivePinia(pinia);
-            const args = Array.from(arguments);
-            const afterCallbackList = [];
-            const onErrorCallbackList = [];
-            function after(callback) {
-                afterCallbackList.push(callback);
-            }
-            function onError(callback) {
-                onErrorCallbackList.push(callback);
-            }
-            // @ts-expect-error
-            triggerSubscriptions(actionSubscriptions, {
-                args,
-                name,
-                store,
-                after,
-                onError,
-            });
-            let ret;
-            try {
-                ret = action.apply(this && this.$id === $id ? this : store, args);
-                // handle sync errors
-            }
-            catch (error) {
-                triggerSubscriptions(onErrorCallbackList, error);
-                throw error;
-            }
-            if (ret instanceof Promise) {
-                return ret
-                    .then((value) => {
-                    triggerSubscriptions(afterCallbackList, value);
-                    return value;
-                })
-                    .catch((error) => {
-                    triggerSubscriptions(onErrorCallbackList, error);
-                    return Promise.reject(error);
-                });
-            }
-            // trigger after callbacks
-            triggerSubscriptions(afterCallbackList, ret);
-            return ret;
-        };
-    }
-    const _hmrPayload = /*#__PURE__*/ markRaw({
-        actions: {},
-        getters: {},
-        state: [],
-        hotState,
-    });
-    const partialStore = {
-        _p: pinia,
-        // _s: scope,
-        $id,
-        $onAction: addSubscription.bind(null, actionSubscriptions),
-        $patch,
-        $reset,
-        $subscribe(callback, options = {}) {
-            const removeSubscription = addSubscription(subscriptions, callback, options.detached, () => stopWatcher());
-            const stopWatcher = scope.run(() => watch(() => pinia.state.value[$id], (state) => {
-                if (options.flush === 'sync' ? isSyncListening : isListening) {
-                    callback({
-                        storeId: $id,
-                        type: MutationType.direct,
-                        events: debuggerEvents,
-                    }, state);
-                }
-            }, pinia_assign({}, $subscribeOptions, options)));
-            return removeSubscription;
-        },
-        $dispose,
-    };
-    /* istanbul ignore if */
-    if (isVue2) {
-        // start as non ready
-        partialStore._r = false;
-    }
-    const store = reactive(( false) || USE_DEVTOOLS
-        ? pinia_assign({
-            _hmrPayload,
-            _customProperties: markRaw(new Set()), // devtools custom properties
-        }, partialStore
-        // must be added later
-        // setupStore
-        )
-        : partialStore);
-    // store the partial store now so the setup of stores can instantiate each other before they are finished without
-    // creating infinite loops.
-    pinia._s.set($id, store);
-    const runWithContext = (pinia._a && pinia._a.runWithContext) || fallbackRunWithContext;
-    // TODO: idea create skipSerialize that marks properties as non serializable and they are skipped
-    const setupStore = runWithContext(() => pinia._e.run(() => (scope = effectScope()).run(setup)));
-    // overwrite existing actions to support $onAction
-    for (const key in setupStore) {
-        const prop = setupStore[key];
-        if ((isRef(prop) && !isComputed(prop)) || isReactive(prop)) {
-            // mark it as a piece of state to be serialized
-            if (false) {}
-            else if (!isOptionsStore) {
-                // in setup stores we must hydrate the state and sync pinia state tree with the refs the user just created
-                if (initialState && shouldHydrate(prop)) {
-                    if (isRef(prop)) {
-                        prop.value = initialState[key];
-                    }
-                    else {
-                        // probably a reactive object, lets recursively assign
-                        // @ts-expect-error: prop is unknown
-                        mergeReactiveObjects(prop, initialState[key]);
-                    }
-                }
-                // transfer the ref to the pinia state to keep everything in sync
-                /* istanbul ignore if */
-                if (isVue2) {
-                    set(pinia.state.value[$id], key, prop);
-                }
-                else {
-                    pinia.state.value[$id][key] = prop;
-                }
-            }
-            /* istanbul ignore else */
-            if ((false)) {}
-            // action
-        }
-        else if (typeof prop === 'function') {
-            // @ts-expect-error: we are overriding the function we avoid wrapping if
-            const actionValue =  false ? 0 : wrapAction(key, prop);
-            // this a hot module replacement store because the hotUpdate method needs
-            // to do it with the right context
-            /* istanbul ignore if */
-            if (isVue2) {
-                set(setupStore, key, actionValue);
-            }
-            else {
-                // @ts-expect-error
-                setupStore[key] = actionValue;
-            }
-            /* istanbul ignore else */
-            if ((false)) {}
-            // list actions so they can be used in plugins
-            // @ts-expect-error
-            optionsForPlugin.actions[key] = prop;
-        }
-        else if ((false)) {}
-    }
-    // add the state, getters, and action properties
-    /* istanbul ignore if */
-    if (isVue2) {
-        Object.keys(setupStore).forEach((key) => {
-            set(store, key, setupStore[key]);
-        });
-    }
-    else {
-        pinia_assign(store, setupStore);
-        // allows retrieving reactive objects with `storeToRefs()`. Must be called after assigning to the reactive object.
-        // Make `storeToRefs()` work with `reactive()` #799
-        pinia_assign(toRaw(store), setupStore);
-    }
-    // use this instead of a computed with setter to be able to create it anywhere
-    // without linking the computed lifespan to wherever the store is first
-    // created.
-    Object.defineProperty(store, '$state', {
-        get: () => ( false ? 0 : pinia.state.value[$id]),
-        set: (state) => {
-            /* istanbul ignore if */
-            if (false) {}
-            $patch(($state) => {
-                pinia_assign($state, state);
-            });
-        },
-    });
-    // add the hotUpdate before plugins to allow them to override it
-    /* istanbul ignore else */
-    if ((false)) {}
-    if (USE_DEVTOOLS) {
-        const nonEnumerable = {
-            writable: true,
-            configurable: true,
-            // avoid warning on devtools trying to display this property
-            enumerable: false,
-        };
-        ['_p', '_hmrPayload', '_getters', '_customProperties'].forEach((p) => {
-            Object.defineProperty(store, p, pinia_assign({ value: store[p] }, nonEnumerable));
-        });
-    }
-    /* istanbul ignore if */
-    if (isVue2) {
-        // mark the store as ready before plugins
-        store._r = true;
-    }
-    // apply all plugins
-    pinia._p.forEach((extender) => {
-        /* istanbul ignore else */
-        if (USE_DEVTOOLS) {
-            const extensions = scope.run(() => extender({
-                store,
-                app: pinia._a,
-                pinia,
-                options: optionsForPlugin,
-            }));
-            Object.keys(extensions || {}).forEach((key) => store._customProperties.add(key));
-            pinia_assign(store, extensions);
-        }
-        else {
-            pinia_assign(store, scope.run(() => extender({
-                store,
-                app: pinia._a,
-                pinia,
-                options: optionsForPlugin,
-            })));
-        }
-    });
-    if (false) {}
-    // only apply hydrate to option stores with an initial state in pinia
-    if (initialState &&
-        isOptionsStore &&
-        options.hydrate) {
-        options.hydrate(store.$state, initialState);
-    }
-    isListening = true;
-    isSyncListening = true;
-    return store;
-}
-function defineStore(
-// TODO: add proper types from above
-idOrOptions, setup, setupOptions) {
-    let id;
-    let options;
-    const isSetupStore = typeof setup === 'function';
-    if (typeof idOrOptions === 'string') {
-        id = idOrOptions;
-        // the option store setup will contain the actual options in this case
-        options = isSetupStore ? setupOptions : setup;
-    }
-    else {
-        options = idOrOptions;
-        id = idOrOptions.id;
-        if (false) {}
-    }
-    function useStore(pinia, hot) {
-        const hasContext = hasInjectionContext();
-        pinia =
-            // in test mode, ignore the argument provided as we can always retrieve a
-            // pinia instance with getActivePinia()
-            ( false ? 0 : pinia) ||
-                (hasContext ? inject(piniaSymbol, null) : null);
-        if (pinia)
-            setActivePinia(pinia);
-        if (false) {}
-        pinia = activePinia;
-        if (!pinia._s.has(id)) {
-            // creating the store registers it in `pinia._s`
-            if (isSetupStore) {
-                createSetupStore(id, setup, options, pinia);
-            }
-            else {
-                createOptionsStore(id, options, pinia);
-            }
-            /* istanbul ignore else */
-            if ((false)) {}
-        }
-        const store = pinia._s.get(id);
-        if (false) {}
-        if (false) {}
-        // StoreGeneric cannot be casted towards Store
-        return store;
-    }
-    useStore.$id = id;
-    return useStore;
-}
-
-let mapStoreSuffix = 'Store';
-/**
- * Changes the suffix added by `mapStores()`. Can be set to an empty string.
- * Defaults to `"Store"`. Make sure to extend the MapStoresCustomization
- * interface if you are using TypeScript.
- *
- * @param suffix - new suffix
- */
-function setMapStoreSuffix(suffix // could be 'Store' but that would be annoying for JS
-) {
-    mapStoreSuffix = suffix;
-}
-/**
- * Allows using stores without the composition API (`setup()`) by generating an
- * object to be spread in the `computed` field of a component. It accepts a list
- * of store definitions.
- *
- * @example
- * ```js
- * export default {
- *   computed: {
- *     // other computed properties
- *     ...mapStores(useUserStore, useCartStore)
- *   },
- *
- *   created() {
- *     this.userStore // store with id "user"
- *     this.cartStore // store with id "cart"
- *   }
- * }
- * ```
- *
- * @param stores - list of stores to map to an object
- */
-function mapStores(...stores) {
-    if (false) {}
-    return stores.reduce((reduced, useStore) => {
-        // @ts-expect-error: $id is added by defineStore
-        reduced[useStore.$id + mapStoreSuffix] = function () {
-            return useStore(this.$pinia);
-        };
-        return reduced;
-    }, {});
-}
-/**
- * Allows using state and getters from one store without using the composition
- * API (`setup()`) by generating an object to be spread in the `computed` field
- * of a component.
- *
- * @param useStore - store to map from
- * @param keysOrMapper - array or object
- */
-function mapState(useStore, keysOrMapper) {
-    return Array.isArray(keysOrMapper)
-        ? keysOrMapper.reduce((reduced, key) => {
-            reduced[key] = function () {
-                return useStore(this.$pinia)[key];
-            };
-            return reduced;
-        }, {})
-        : Object.keys(keysOrMapper).reduce((reduced, key) => {
-            // @ts-expect-error
-            reduced[key] = function () {
-                const store = useStore(this.$pinia);
-                const storeKey = keysOrMapper[key];
-                // for some reason TS is unable to infer the type of storeKey to be a
-                // function
-                return typeof storeKey === 'function'
-                    ? storeKey.call(this, store)
-                    : store[storeKey];
-            };
-            return reduced;
-        }, {});
-}
-/**
- * Alias for `mapState()`. You should use `mapState()` instead.
- * @deprecated use `mapState()` instead.
- */
-const mapGetters = (/* unused pure expression or super */ null && (mapState));
-/**
- * Allows directly using actions from your store without using the composition
- * API (`setup()`) by generating an object to be spread in the `methods` field
- * of a component.
- *
- * @param useStore - store to map from
- * @param keysOrMapper - array or object
- */
-function mapActions(useStore, keysOrMapper) {
-    return Array.isArray(keysOrMapper)
-        ? keysOrMapper.reduce((reduced, key) => {
-            // @ts-expect-error
-            reduced[key] = function (...args) {
-                return useStore(this.$pinia)[key](...args);
-            };
-            return reduced;
-        }, {})
-        : Object.keys(keysOrMapper).reduce((reduced, key) => {
-            // @ts-expect-error
-            reduced[key] = function (...args) {
-                return useStore(this.$pinia)[keysOrMapper[key]](...args);
-            };
-            return reduced;
-        }, {});
-}
-/**
- * Allows using state and getters from one store without using the composition
- * API (`setup()`) by generating an object to be spread in the `computed` field
- * of a component.
- *
- * @param useStore - store to map from
- * @param keysOrMapper - array or object
- */
-function mapWritableState(useStore, keysOrMapper) {
-    return Array.isArray(keysOrMapper)
-        ? keysOrMapper.reduce((reduced, key) => {
-            // @ts-ignore
-            reduced[key] = {
-                get() {
-                    return useStore(this.$pinia)[key];
-                },
-                set(value) {
-                    // it's easier to type it here as any
-                    return (useStore(this.$pinia)[key] = value);
-                },
-            };
-            return reduced;
-        }, {})
-        : Object.keys(keysOrMapper).reduce((reduced, key) => {
-            // @ts-ignore
-            reduced[key] = {
-                get() {
-                    return useStore(this.$pinia)[keysOrMapper[key]];
-                },
-                set(value) {
-                    // it's easier to type it here as any
-                    return (useStore(this.$pinia)[keysOrMapper[key]] = value);
-                },
-            };
-            return reduced;
-        }, {});
-}
-
-/**
- * Creates an object of references with all the state, getters, and plugin-added
- * state properties of the store. Similar to `toRefs()` but specifically
- * designed for Pinia stores so methods and non reactive properties are
- * completely ignored.
- *
- * @param store - store to extract the refs from
- */
-function storeToRefs(store) {
-    // See https://github.com/vuejs/pinia/issues/852
-    // It's easier to just use toRefs() even if it includes more stuff
-    if (isVue2) {
-        // @ts-expect-error: toRefs include methods and others
-        return toRefs(store);
-    }
-    else {
-        store = toRaw(store);
-        const refs = {};
-        for (const key in store) {
-            const value = store[key];
-            if (isRef(value) || isReactive(value)) {
-                // @ts-expect-error: the key is state or getter
-                refs[key] =
-                    // ---
-                    toRef(store, key);
-            }
-        }
-        return refs;
-    }
-}
-
-/**
- * Vue 2 Plugin that must be installed for pinia to work. Note **you don't need
- * this plugin if you are using Nuxt.js**. Use the `buildModule` instead:
- * https://pinia.vuejs.org/ssr/nuxt.html.
- *
- * @example
- * ```js
- * import Vue from 'vue'
- * import { PiniaVuePlugin, createPinia } from 'pinia'
- *
- * Vue.use(PiniaVuePlugin)
- * const pinia = createPinia()
- *
- * new Vue({
- *   el: '#app',
- *   // ...
- *   pinia,
- * })
- * ```
- *
- * @param _Vue - `Vue` imported from 'vue'.
- */
-const PiniaVuePlugin = function (_Vue) {
-    // Equivalent of
-    // app.config.globalProperties.$pinia = pinia
-    _Vue.mixin({
-        beforeCreate() {
-            const options = this.$options;
-            if (options.pinia) {
-                const pinia = options.pinia;
-                // HACK: taken from provide(): https://github.com/vuejs/composition-api/blob/main/src/apis/inject.ts#L31
-                /* istanbul ignore else */
-                if (!this._provided) {
-                    const provideCache = {};
-                    Object.defineProperty(this, '_provided', {
-                        get: () => provideCache,
-                        set: (v) => Object.assign(provideCache, v),
-                    });
-                }
-                this._provided[piniaSymbol] = pinia;
-                // propagate the pinia instance in an SSR friendly way
-                // avoid adding it to nuxt twice
-                /* istanbul ignore else */
-                if (!this.$pinia) {
-                    this.$pinia = pinia;
-                }
-                pinia._a = this;
-                if (IS_CLIENT) {
-                    // this allows calling useStore() outside of a component setup after
-                    // installing pinia's plugin
-                    setActivePinia(pinia);
-                }
-                if (USE_DEVTOOLS) {
-                    registerPiniaDevtools(pinia._a, pinia);
-                }
-            }
-            else if (!this.$pinia && options.parent && options.parent.$pinia) {
-                this.$pinia = options.parent.$pinia;
-            }
-        },
-        destroyed() {
-            delete this._pStores;
-        },
-    });
-};
-
-
 
 ;// CONCATENATED MODULE: ./node_modules/@fortawesome/free-solid-svg-icons/index.mjs
 var prefix = "fas";
@@ -44849,6 +42910,2242 @@ var icons = {
 
 
 
+;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/UserExperience.vue?vue&type=script&lang=ts
+
+
+
+
+
+
+library$1.add(faFaceGrinStars);
+library$1.add(faFaceSmile);
+library$1.add(faFaceMeh);
+library$1.add(faFaceFrownOpen);
+library$1.add(faFaceFrown);
+/* harmony default export */ const UserExperiencevue_type_script_lang_ts = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
+    extends: MiniDSBase,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    components: { FontAwesomeIcon: FontAwesomeIcon },
+    props: {
+        ratingColors: {
+            type: Array,
+            default: function () { return DEFAULT_RATING_COLORS; },
+        },
+        question: {
+            type: String,
+            default: "How would you rate your experience?",
+        },
+        commentPlaceholder: {
+            type: String,
+            default: "Please tell us more if you like",
+        },
+        askForComments: {
+            type: Boolean,
+            default: true,
+        },
+        iconSize: {
+            type: String,
+            default: "5x",
+        },
+        color: {
+            type: String,
+            default: "surface",
+        },
+        baseColor: {
+            type: String,
+            required: true,
+        }
+    },
+    data: function () {
+        var ratingIcons = {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            "very_bad": ["fa-face-frown", "red"],
+            "poor": ["fa-face-frown-open", "orange"],
+            "good": ["fa-face-smile", "lightgreen"],
+            "excellent": ["fa-face-grin-stars", "green"],
+        };
+        return {
+            currentRating: null,
+            comments: null,
+            showComments: false,
+            ratings: Object.keys(ratingIcons),
+            ratingIcons: ratingIcons,
+        };
+    },
+    computed: {
+        showFooter: function () {
+            return !!this.$slots.footer;
+        },
+        css: function () {
+            return {
+                "--footer-visible": this.showFooter ? "visible" : "none",
+            };
+        }
+    },
+    watch: {
+        currentRating: function (rating) {
+            if (rating) {
+                if (this.askForComments) {
+                    this.showComments = true;
+                }
+                this.$emit("rating", rating);
+            }
+        }
+    }
+}));
+
+;// CONCATENATED MODULE: ./src/components/UserExperience.vue?vue&type=script&lang=ts
+ 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/UserExperience.vue?vue&type=style&index=0&id=7b3028df&lang=less
+var UserExperiencevue_type_style_index_0_id_7b3028df_lang_less = __webpack_require__(419);
+;// CONCATENATED MODULE: ./src/components/UserExperience.vue?vue&type=style&index=0&id=7b3028df&lang=less
+
+;// CONCATENATED MODULE: ./src/components/UserExperience.vue
+
+
+
+
+;
+
+
+const UserExperience_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(UserExperiencevue_type_script_lang_ts, [['render',UserExperiencevue_type_template_id_7b3028df_ts_true_render]])
+
+/* harmony default export */ const UserExperience = (UserExperience_exports_);
+;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/wwtHUD.vue?vue&type=template&id=5867328d&ts=true
+
+var wwtHUDvue_type_template_id_5867328d_ts_true_hoisted_1 = { id: "wwt-hud" };
+var wwtHUDvue_type_template_id_5867328d_ts_true_hoisted_2 = /*#__PURE__*/ (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("h3", null, " Camera settings ", -1);
+var wwtHUDvue_type_template_id_5867328d_ts_true_hoisted_3 = /*#__PURE__*/ (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("h3", null, " Imagesets ", -1);
+var _hoisted_4 = /*#__PURE__*/ (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("h3", null, " Clock ", -1);
+var _hoisted_5 = { key: 0 };
+function wwtHUDvue_type_template_id_5867328d_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+    return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
+        style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)(_ctx.cssVars)
+    }, [
+        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", wwtHUDvue_type_template_id_5867328d_ts_true_hoisted_1, [
+            wwtHUDvue_type_template_id_5867328d_ts_true_hoisted_2,
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " RA: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtRARad) + " (" + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtRADeg) + ") ", 1),
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Dec: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtDecRad) + " (" + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtDecDeg) + ") ", 1),
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Roll: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtRollRad), 1),
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Zoom: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtZoomDeg), 1),
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Mode: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.mode), 1),
+            wwtHUDvue_type_template_id_5867328d_ts_true_hoisted_3,
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Bkg: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.bkgImage), 1),
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Fg: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.fgImg) + " (op: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtForegroundOpacity) + " ) ", 1),
+            _hoisted_4,
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Time: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtCurrentTime), 1),
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Rate: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtClockRate), 1),
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", null, " Location: " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.wwtLocation), 1),
+            (Object.keys(_ctx.otherVariables).length > 0)
+                ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("h3", _hoisted_5, " User defined vars "))
+                : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true),
+            ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)(_ctx.otherVariables, function (value, key) {
+                return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("p", { key: key }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(key) + ": " + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(value), 1));
+            }), 128)),
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")
+        ])
+    ], 4));
+}
+
+;// CONCATENATED MODULE: ./src/components/wwtHUD.vue?vue&type=template&id=5867328d&ts=true
+
+// EXTERNAL MODULE: external {"amd":"@wwtelescope/engine","commonjs2":"@wwtelescope/engine","commonjs":"@wwtelescope/engine","root":"wwtlib"}
+var engine_root_wwtlib_ = __webpack_require__(866);
+;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/wwtHUD.vue?vue&type=script&lang=ts
+
+
+
+var wwtHUDvue_type_script_lang_ts_R2D = 180 / Math.PI;
+/* harmony default export */ const wwtHUDvue_type_script_lang_ts = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
+    name: 'wwtHUD',
+    extends: index_umd.WWTAwareComponent,
+    props: {
+        // location: center {x, y} in percent
+        location: {
+            type: Object,
+            default: function () { return ({ top: '50%', left: '50%' }); }
+        },
+        offsetCenter: {
+            // example: {x: 0.5, y: 0.5} for transform: translate(-50%, -50%)
+            type: Object,
+            default: function () { return ({ x: .5, y: .5 }); }
+        },
+        otherVariables: {
+            type: Object,
+            default: function () { return ({}); }
+        },
+        // styling props
+        fontSize: {
+            type: String,
+            default: '1em'
+        },
+        backgroundColor: {
+            type: String || null,
+            default: 'rgba(0, 0, 0, 0.5)'
+        },
+        textShadow: {
+            type: String || null,
+            default: '0 0 5px black'
+        },
+    },
+    computed: {
+        wwtSettings: function () {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            return engine_root_wwtlib_.Settings.get_active();
+        },
+        wwtControl: function () {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            return engine_root_wwtlib_.WWTControl.singleton;
+        },
+        wwtScriptInterface: function () {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            return engine_root_wwtlib_.ScriptInterface.singleton;
+        },
+        cssVars: function () {
+            var _a, _b, _c, _d;
+            return {
+                '--hud-top': (_a = this.location.top) !== null && _a !== void 0 ? _a : 'auto',
+                '--hud-left': (_b = this.location.left) !== null && _b !== void 0 ? _b : 'auto',
+                '--hud-bottom': (_c = this.location.bottom) !== null && _c !== void 0 ? _c : 'auto',
+                '--hud-right': (_d = this.location.right) !== null && _d !== void 0 ? _d : 'auto',
+                '--font-size': this.fontSize,
+                '--background-color': this.backgroundColor || 'transparent',
+                '--text-shadow': this.textShadow || 'none',
+                '--offset-center-x': "-".concat(this.offsetCenter.x * 100, "%"),
+                '--offset-center-y': "-".concat(this.offsetCenter.y * 100, "%"),
+            };
+        },
+        wwtRADeg: function () {
+            return this.wwtRARad * wwtHUDvue_type_script_lang_ts_R2D;
+        },
+        wwtDecDeg: function () {
+            return this.wwtDecRad * wwtHUDvue_type_script_lang_ts_R2D;
+        },
+        bkgImage: function () {
+            var _a;
+            return (_a = this.wwtBackgroundImageset) === null || _a === void 0 ? void 0 : _a.get_name();
+        },
+        fgImg: function () {
+            var _a;
+            return (_a = this.wwtForegroundImageset) === null || _a === void 0 ? void 0 : _a.get_name();
+        },
+        mode: function () {
+            if (this.bkgImage == "3D Solar System View") {
+                return '3D';
+            }
+            if (this.wwtSettings.get_galacticMode()) {
+                return 'Sky (galactic)';
+            }
+            if (this.wwtSettings.get_localHorizonMode()) {
+                return 'Sky (local horizon)';
+            }
+            return 'Sky (equatorial)';
+        },
+        wwtLocation: function () {
+            return {
+                lat: this.wwtSettings.get_locationLat(),
+                lon: this.wwtSettings.get_locationLng(),
+                alt: this.wwtSettings.get_locationAltitude(),
+            };
+        },
+    },
+}));
+
+;// CONCATENATED MODULE: ./src/components/wwtHUD.vue?vue&type=script&lang=ts
+ 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/wwtHUD.vue?vue&type=style&index=0&id=5867328d&lang=less
+var wwtHUDvue_type_style_index_0_id_5867328d_lang_less = __webpack_require__(300);
+;// CONCATENATED MODULE: ./src/components/wwtHUD.vue?vue&type=style&index=0&id=5867328d&lang=less
+
+;// CONCATENATED MODULE: ./src/components/wwtHUD.vue
+
+
+
+
+;
+
+
+const wwtHUD_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(wwtHUDvue_type_script_lang_ts, [['render',wwtHUDvue_type_template_id_5867328d_ts_true_render]])
+
+/* harmony default export */ const wwtHUD = (wwtHUD_exports_);
+;// CONCATENATED MODULE: ./src/background.ts
+var BackgroundImageset = /** @class */ (function () {
+    function BackgroundImageset(displayName, imagesetName) {
+        this.displayName = displayName;
+        this.imagesetName = imagesetName;
+    }
+    return BackgroundImageset;
+}());
+
+var skyBackgroundImagesets = [
+    new BackgroundImageset("Optical (Terapixel DSS)", "Digitized Sky Survey (Color)"),
+    new BackgroundImageset("Low-frequency radio (VLSS)", "VLSS: VLA Low-frequency Sky Survey (Radio)"),
+    new BackgroundImageset("Infrared (2MASS)", "2Mass: Imagery (Infrared)"),
+    new BackgroundImageset("Infrared (SFD dust map)", "SFD Dust Map (Infrared)"),
+    new BackgroundImageset("Ultraviolet (GALEX)", "GALEX (Ultraviolet)"),
+    new BackgroundImageset("X-Ray (ROSAT RASS)", "RASS: ROSAT All Sky Survey (X-ray)"),
+    new BackgroundImageset("Gamma Rays (FERMI LAT 8-year)", "Fermi LAT 8-year (gamma)"),
+];
+
+;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Gallery.vue?vue&type=template&id=4cc30028&ts=true
+
+
+var Galleryvue_type_template_id_4cc30028_ts_true_hoisted_1 = { class: "default-activator-title noselect" };
+var Galleryvue_type_template_id_4cc30028_ts_true_hoisted_2 = ["src"];
+var Galleryvue_type_template_id_4cc30028_ts_true_hoisted_3 = { class: "gallery-header" };
+var Galleryvue_type_template_id_4cc30028_ts_true_hoisted_4 = { class: "gallery-title" };
+var Galleryvue_type_template_id_4cc30028_ts_true_hoisted_5 = { class: "gallery-content" };
+var _hoisted_6 = ["onClick"];
+var _hoisted_7 = ["src"];
+var _hoisted_8 = { class: "place-name noselect" };
+function Galleryvue_type_template_id_4cc30028_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+    var _component_font_awesome_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("font-awesome-icon");
+    return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
+        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['gallery-root', { 'open': _ctx.open }])
+    }, [
+        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+            class: "just-holding-events",
+            onClick: _cache[2] || (_cache[2] = function ($event) { return (_ctx.open = true); }),
+            onKeyup: _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)(function ($event) { return (_ctx.open = true); }, ["enter"])),
+            tabindex: "0"
+        }, [
+            (!_ctx.open)
+                ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "closed", { key: 0 }, function () {
+                    var _a, _b;
+                    return [
+                        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+                            class: "default-activator blurred",
+                            onClick: _cache[0] || (_cache[0] = function ($event) { return (_ctx.open = true); }),
+                            onKeyup: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)(function ($event) { return (_ctx.open = true); }, ["enter"]))
+                        }, [
+                            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", Galleryvue_type_template_id_4cc30028_ts_true_hoisted_1, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.closedText), 1),
+                            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("img", {
+                                class: "noselect",
+                                src: _ctx.places[_ctx.previewIndex] ? ((_b = (_a = _ctx.getImageset(_ctx.places[_ctx.previewIndex])) === null || _a === void 0 ? void 0 : _a.get_thumbnailUrl()) !== null && _b !== void 0 ? _b : '') : ''
+                            }, null, 8, Galleryvue_type_template_id_4cc30028_ts_true_hoisted_2)
+                        ], 32)
+                    ];
+                })
+                : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)
+        ], 32),
+        (_ctx.open)
+            ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
+                key: 0,
+                style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)(_ctx.cssVars),
+                class: "gallery blurred"
+            }, [
+                (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", Galleryvue_type_template_id_4cc30028_ts_true_hoisted_3, [
+                    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", Galleryvue_type_template_id_4cc30028_ts_true_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(_ctx.title), 1),
+                    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_font_awesome_icon, {
+                        class: "gallery-close",
+                        icon: "times",
+                        size: "lg",
+                        onClick: _cache[4] || (_cache[4] = function ($event) { return (_ctx.open = false); }),
+                        onKeyup: _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)(function ($event) { return (_ctx.open = false); }, ["enter"])),
+                        tabindex: "0"
+                    })
+                ]),
+                (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", Galleryvue_type_template_id_4cc30028_ts_true_hoisted_5, [
+                    ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)(_ctx.places.entries(), function (_a) {
+                        var _b, _c;
+                        var _d = __read(_a, 2), index = _d[0], place = _d[1];
+                        return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
+                            key: index,
+                            class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['gallery-item', { 'selected': _ctx.highlightLastOnly ? _ctx.selectedPlace === place : _ctx.selectedPlaces.includes(place) }]),
+                            onClick: function ($event) { return (_ctx.selectPlace(place)); }
+                        }, [
+                            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("img", {
+                                class: "noselect",
+                                src: (_c = (_b = _ctx.getImageset(place)) === null || _b === void 0 ? void 0 : _b.get_thumbnailUrl()) !== null && _c !== void 0 ? _c : ''
+                            }, null, 8, _hoisted_7),
+                            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", _hoisted_8, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(place.get_name()), 1)
+                        ], 10, _hoisted_6));
+                    }), 128))
+                ])
+            ], 4))
+            : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)
+    ], 2));
+}
+
+;// CONCATENATED MODULE: ./src/components/Gallery.vue?vue&type=template&id=4cc30028&ts=true
+
+;// CONCATENATED MODULE: ./node_modules/vue-demi/lib/index.mjs
+
+
+var lib_isVue2 = false
+var isVue3 = true
+var Vue2 = (/* unused pure expression or super */ null && (undefined))
+
+function install() {}
+
+function lib_set(target, key, val) {
+  if (Array.isArray(target)) {
+    target.length = Math.max(target.length, key)
+    target.splice(key, 1, val)
+    return val
+  }
+  target[key] = val
+  return val
+}
+
+function del(target, key) {
+  if (Array.isArray(target)) {
+    target.splice(key, 1)
+    return
+  }
+  delete target[key]
+}
+
+
+
+
+;// CONCATENATED MODULE: ./node_modules/pinia/dist/pinia.mjs
+/*!
+ * pinia v2.1.7
+ * (c) 2023 Eduardo San Martin Morote
+ * @license MIT
+ */
+
+
+
+/**
+ * setActivePinia must be called to handle SSR at the top of functions like
+ * `fetch`, `setup`, `serverPrefetch` and others
+ */
+let activePinia;
+/**
+ * Sets or unsets the active pinia. Used in SSR and internally when calling
+ * actions and getters
+ *
+ * @param pinia - Pinia instance
+ */
+// @ts-expect-error: cannot constrain the type of the return
+const setActivePinia = (pinia) => (activePinia = pinia);
+/**
+ * Get the currently active pinia if there is any.
+ */
+const getActivePinia = () => (hasInjectionContext() && inject(piniaSymbol)) || activePinia;
+const piniaSymbol = (( false) ? 0 : /* istanbul ignore next */ Symbol());
+
+function isPlainObject(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+o) {
+    return (o &&
+        typeof o === 'object' &&
+        Object.prototype.toString.call(o) === '[object Object]' &&
+        typeof o.toJSON !== 'function');
+}
+// type DeepReadonly<T> = { readonly [P in keyof T]: DeepReadonly<T[P]> }
+// TODO: can we change these to numbers?
+/**
+ * Possible types for SubscriptionCallback
+ */
+var MutationType;
+(function (MutationType) {
+    /**
+     * Direct mutation of the state:
+     *
+     * - `store.name = 'new name'`
+     * - `store.$state.name = 'new name'`
+     * - `store.list.push('new item')`
+     */
+    MutationType["direct"] = "direct";
+    /**
+     * Mutated the state with `$patch` and an object
+     *
+     * - `store.$patch({ name: 'newName' })`
+     */
+    MutationType["patchObject"] = "patch object";
+    /**
+     * Mutated the state with `$patch` and a function
+     *
+     * - `store.$patch(state => state.name = 'newName')`
+     */
+    MutationType["patchFunction"] = "patch function";
+    // maybe reset? for $state = {} and $reset
+})(MutationType || (MutationType = {}));
+
+const IS_CLIENT = typeof window !== 'undefined';
+/**
+ * Should we add the devtools plugins.
+ * - only if dev mode or forced through the prod devtools flag
+ * - not in test
+ * - only if window exists (could change in the future)
+ */
+const USE_DEVTOOLS = (/* unused pure expression or super */ null && ( false && 0));
+
+/*
+ * FileSaver.js A saveAs() FileSaver implementation.
+ *
+ * Originally by Eli Grey, adapted as an ESM module by Eduardo San Martin
+ * Morote.
+ *
+ * License : MIT
+ */
+// The one and only way of getting global scope in all environments
+// https://stackoverflow.com/q/3277182/1008999
+const _global = /*#__PURE__*/ (() => typeof window === 'object' && window.window === window
+    ? window
+    : typeof self === 'object' && self.self === self
+        ? self
+        : typeof global === 'object' && global.global === global
+            ? global
+            : typeof globalThis === 'object'
+                ? globalThis
+                : { HTMLElement: null })();
+function bom(blob, { autoBom = false } = {}) {
+    // prepend BOM for UTF-8 XML and text/* types (including HTML)
+    // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
+    if (autoBom &&
+        /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
+        return new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
+    }
+    return blob;
+}
+function download(url, name, opts) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url);
+    xhr.responseType = 'blob';
+    xhr.onload = function () {
+        saveAs(xhr.response, name, opts);
+    };
+    xhr.onerror = function () {
+        console.error('could not download file');
+    };
+    xhr.send();
+}
+function corsEnabled(url) {
+    const xhr = new XMLHttpRequest();
+    // use sync to avoid popup blocker
+    xhr.open('HEAD', url, false);
+    try {
+        xhr.send();
+    }
+    catch (e) { }
+    return xhr.status >= 200 && xhr.status <= 299;
+}
+// `a.click()` doesn't work for all browsers (#465)
+function click(node) {
+    try {
+        node.dispatchEvent(new MouseEvent('click'));
+    }
+    catch (e) {
+        const evt = document.createEvent('MouseEvents');
+        evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
+        node.dispatchEvent(evt);
+    }
+}
+const _navigator = 
+ typeof navigator === 'object' ? navigator : { userAgent: '' };
+// Detect WebView inside a native macOS app by ruling out all browsers
+// We just need to check for 'Safari' because all other browsers (besides Firefox) include that too
+// https://www.whatismybrowser.com/guides/the-latest-user-agent/macos
+const isMacOSWebView = /*#__PURE__*/ (() => /Macintosh/.test(_navigator.userAgent) &&
+    /AppleWebKit/.test(_navigator.userAgent) &&
+    !/Safari/.test(_navigator.userAgent))();
+const saveAs = !IS_CLIENT
+    ? () => { } // noop
+    : // Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView or mini program
+        typeof HTMLAnchorElement !== 'undefined' &&
+            'download' in HTMLAnchorElement.prototype &&
+            !isMacOSWebView
+            ? downloadSaveAs
+            : // Use msSaveOrOpenBlob as a second approach
+                'msSaveOrOpenBlob' in _navigator
+                    ? msSaveAs
+                    : // Fallback to using FileReader and a popup
+                        fileSaverSaveAs;
+function downloadSaveAs(blob, name = 'download', opts) {
+    const a = document.createElement('a');
+    a.download = name;
+    a.rel = 'noopener'; // tabnabbing
+    // TODO: detect chrome extensions & packaged apps
+    // a.target = '_blank'
+    if (typeof blob === 'string') {
+        // Support regular links
+        a.href = blob;
+        if (a.origin !== location.origin) {
+            if (corsEnabled(a.href)) {
+                download(blob, name, opts);
+            }
+            else {
+                a.target = '_blank';
+                click(a);
+            }
+        }
+        else {
+            click(a);
+        }
+    }
+    else {
+        // Support blobs
+        a.href = URL.createObjectURL(blob);
+        setTimeout(function () {
+            URL.revokeObjectURL(a.href);
+        }, 4e4); // 40s
+        setTimeout(function () {
+            click(a);
+        }, 0);
+    }
+}
+function msSaveAs(blob, name = 'download', opts) {
+    if (typeof blob === 'string') {
+        if (corsEnabled(blob)) {
+            download(blob, name, opts);
+        }
+        else {
+            const a = document.createElement('a');
+            a.href = blob;
+            a.target = '_blank';
+            setTimeout(function () {
+                click(a);
+            });
+        }
+    }
+    else {
+        // @ts-ignore: works on windows
+        navigator.msSaveOrOpenBlob(bom(blob, opts), name);
+    }
+}
+function fileSaverSaveAs(blob, name, opts, popup) {
+    // Open a popup immediately do go around popup blocker
+    // Mostly only available on user interaction and the fileReader is async so...
+    popup = popup || open('', '_blank');
+    if (popup) {
+        popup.document.title = popup.document.body.innerText = 'downloading...';
+    }
+    if (typeof blob === 'string')
+        return download(blob, name, opts);
+    const force = blob.type === 'application/octet-stream';
+    const isSafari = /constructor/i.test(String(_global.HTMLElement)) || 'safari' in _global;
+    const isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);
+    if ((isChromeIOS || (force && isSafari) || isMacOSWebView) &&
+        typeof FileReader !== 'undefined') {
+        // Safari doesn't allow downloading of blob URLs
+        const reader = new FileReader();
+        reader.onloadend = function () {
+            let url = reader.result;
+            if (typeof url !== 'string') {
+                popup = null;
+                throw new Error('Wrong reader.result type');
+            }
+            url = isChromeIOS
+                ? url
+                : url.replace(/^data:[^;]*;/, 'data:attachment/file;');
+            if (popup) {
+                popup.location.href = url;
+            }
+            else {
+                location.assign(url);
+            }
+            popup = null; // reverse-tabnabbing #460
+        };
+        reader.readAsDataURL(blob);
+    }
+    else {
+        const url = URL.createObjectURL(blob);
+        if (popup)
+            popup.location.assign(url);
+        else
+            location.href = url;
+        popup = null; // reverse-tabnabbing #460
+        setTimeout(function () {
+            URL.revokeObjectURL(url);
+        }, 4e4); // 40s
+    }
+}
+
+/**
+ * Shows a toast or console.log
+ *
+ * @param message - message to log
+ * @param type - different color of the tooltip
+ */
+function toastMessage(message, type) {
+    const piniaMessage = '🍍 ' + message;
+    if (typeof __VUE_DEVTOOLS_TOAST__ === 'function') {
+        // No longer available :(
+        __VUE_DEVTOOLS_TOAST__(piniaMessage, type);
+    }
+    else if (type === 'error') {
+        console.error(piniaMessage);
+    }
+    else if (type === 'warn') {
+        console.warn(piniaMessage);
+    }
+    else {
+        console.log(piniaMessage);
+    }
+}
+function isPinia(o) {
+    return '_a' in o && 'install' in o;
+}
+
+/**
+ * This file contain devtools actions, they are not Pinia actions.
+ */
+// ---
+function checkClipboardAccess() {
+    if (!('clipboard' in navigator)) {
+        toastMessage(`Your browser doesn't support the Clipboard API`, 'error');
+        return true;
+    }
+}
+function checkNotFocusedError(error) {
+    if (error instanceof Error &&
+        error.message.toLowerCase().includes('document is not focused')) {
+        toastMessage('You need to activate the "Emulate a focused page" setting in the "Rendering" panel of devtools.', 'warn');
+        return true;
+    }
+    return false;
+}
+async function actionGlobalCopyState(pinia) {
+    if (checkClipboardAccess())
+        return;
+    try {
+        await navigator.clipboard.writeText(JSON.stringify(pinia.state.value));
+        toastMessage('Global state copied to clipboard.');
+    }
+    catch (error) {
+        if (checkNotFocusedError(error))
+            return;
+        toastMessage(`Failed to serialize the state. Check the console for more details.`, 'error');
+        console.error(error);
+    }
+}
+async function actionGlobalPasteState(pinia) {
+    if (checkClipboardAccess())
+        return;
+    try {
+        loadStoresState(pinia, JSON.parse(await navigator.clipboard.readText()));
+        toastMessage('Global state pasted from clipboard.');
+    }
+    catch (error) {
+        if (checkNotFocusedError(error))
+            return;
+        toastMessage(`Failed to deserialize the state from clipboard. Check the console for more details.`, 'error');
+        console.error(error);
+    }
+}
+async function actionGlobalSaveState(pinia) {
+    try {
+        saveAs(new Blob([JSON.stringify(pinia.state.value)], {
+            type: 'text/plain;charset=utf-8',
+        }), 'pinia-state.json');
+    }
+    catch (error) {
+        toastMessage(`Failed to export the state as JSON. Check the console for more details.`, 'error');
+        console.error(error);
+    }
+}
+let fileInput;
+function getFileOpener() {
+    if (!fileInput) {
+        fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.accept = '.json';
+    }
+    function openFile() {
+        return new Promise((resolve, reject) => {
+            fileInput.onchange = async () => {
+                const files = fileInput.files;
+                if (!files)
+                    return resolve(null);
+                const file = files.item(0);
+                if (!file)
+                    return resolve(null);
+                return resolve({ text: await file.text(), file });
+            };
+            // @ts-ignore: TODO: changed from 4.3 to 4.4
+            fileInput.oncancel = () => resolve(null);
+            fileInput.onerror = reject;
+            fileInput.click();
+        });
+    }
+    return openFile;
+}
+async function actionGlobalOpenStateFile(pinia) {
+    try {
+        const open = getFileOpener();
+        const result = await open();
+        if (!result)
+            return;
+        const { text, file } = result;
+        loadStoresState(pinia, JSON.parse(text));
+        toastMessage(`Global state imported from "${file.name}".`);
+    }
+    catch (error) {
+        toastMessage(`Failed to import the state from JSON. Check the console for more details.`, 'error');
+        console.error(error);
+    }
+}
+function loadStoresState(pinia, state) {
+    for (const key in state) {
+        const storeState = pinia.state.value[key];
+        // store is already instantiated, patch it
+        if (storeState) {
+            Object.assign(storeState, state[key]);
+        }
+        else {
+            // store is not instantiated, set the initial state
+            pinia.state.value[key] = state[key];
+        }
+    }
+}
+
+function formatDisplay(display) {
+    return {
+        _custom: {
+            display,
+        },
+    };
+}
+const PINIA_ROOT_LABEL = '🍍 Pinia (root)';
+const PINIA_ROOT_ID = '_root';
+function formatStoreForInspectorTree(store) {
+    return isPinia(store)
+        ? {
+            id: PINIA_ROOT_ID,
+            label: PINIA_ROOT_LABEL,
+        }
+        : {
+            id: store.$id,
+            label: store.$id,
+        };
+}
+function formatStoreForInspectorState(store) {
+    if (isPinia(store)) {
+        const storeNames = Array.from(store._s.keys());
+        const storeMap = store._s;
+        const state = {
+            state: storeNames.map((storeId) => ({
+                editable: true,
+                key: storeId,
+                value: store.state.value[storeId],
+            })),
+            getters: storeNames
+                .filter((id) => storeMap.get(id)._getters)
+                .map((id) => {
+                const store = storeMap.get(id);
+                return {
+                    editable: false,
+                    key: id,
+                    value: store._getters.reduce((getters, key) => {
+                        getters[key] = store[key];
+                        return getters;
+                    }, {}),
+                };
+            }),
+        };
+        return state;
+    }
+    const state = {
+        state: Object.keys(store.$state).map((key) => ({
+            editable: true,
+            key,
+            value: store.$state[key],
+        })),
+    };
+    // avoid adding empty getters
+    if (store._getters && store._getters.length) {
+        state.getters = store._getters.map((getterName) => ({
+            editable: false,
+            key: getterName,
+            value: store[getterName],
+        }));
+    }
+    if (store._customProperties.size) {
+        state.customProperties = Array.from(store._customProperties).map((key) => ({
+            editable: true,
+            key,
+            value: store[key],
+        }));
+    }
+    return state;
+}
+function formatEventData(events) {
+    if (!events)
+        return {};
+    if (Array.isArray(events)) {
+        // TODO: handle add and delete for arrays and objects
+        return events.reduce((data, event) => {
+            data.keys.push(event.key);
+            data.operations.push(event.type);
+            data.oldValue[event.key] = event.oldValue;
+            data.newValue[event.key] = event.newValue;
+            return data;
+        }, {
+            oldValue: {},
+            keys: [],
+            operations: [],
+            newValue: {},
+        });
+    }
+    else {
+        return {
+            operation: formatDisplay(events.type),
+            key: formatDisplay(events.key),
+            oldValue: events.oldValue,
+            newValue: events.newValue,
+        };
+    }
+}
+function formatMutationType(type) {
+    switch (type) {
+        case MutationType.direct:
+            return 'mutation';
+        case MutationType.patchFunction:
+            return '$patch';
+        case MutationType.patchObject:
+            return '$patch';
+        default:
+            return 'unknown';
+    }
+}
+
+// timeline can be paused when directly changing the state
+let isTimelineActive = true;
+const componentStateTypes = (/* unused pure expression or super */ null && ([]));
+const MUTATIONS_LAYER_ID = 'pinia:mutations';
+const INSPECTOR_ID = 'pinia';
+const { assign: assign$1 } = Object;
+/**
+ * Gets the displayed name of a store in devtools
+ *
+ * @param id - id of the store
+ * @returns a formatted string
+ */
+const getStoreType = (id) => '🍍 ' + id;
+/**
+ * Add the pinia plugin without any store. Allows displaying a Pinia plugin tab
+ * as soon as it is added to the application.
+ *
+ * @param app - Vue application
+ * @param pinia - pinia instance
+ */
+function registerPiniaDevtools(app, pinia) {
+    setupDevtoolsPlugin({
+        id: 'dev.esm.pinia',
+        label: 'Pinia 🍍',
+        logo: 'https://pinia.vuejs.org/logo.svg',
+        packageName: 'pinia',
+        homepage: 'https://pinia.vuejs.org',
+        componentStateTypes,
+        app,
+    }, (api) => {
+        if (typeof api.now !== 'function') {
+            toastMessage('You seem to be using an outdated version of Vue Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://devtools.vuejs.org/guide/installation.html.');
+        }
+        api.addTimelineLayer({
+            id: MUTATIONS_LAYER_ID,
+            label: `Pinia 🍍`,
+            color: 0xe5df88,
+        });
+        api.addInspector({
+            id: INSPECTOR_ID,
+            label: 'Pinia 🍍',
+            icon: 'storage',
+            treeFilterPlaceholder: 'Search stores',
+            actions: [
+                {
+                    icon: 'content_copy',
+                    action: () => {
+                        actionGlobalCopyState(pinia);
+                    },
+                    tooltip: 'Serialize and copy the state',
+                },
+                {
+                    icon: 'content_paste',
+                    action: async () => {
+                        await actionGlobalPasteState(pinia);
+                        api.sendInspectorTree(INSPECTOR_ID);
+                        api.sendInspectorState(INSPECTOR_ID);
+                    },
+                    tooltip: 'Replace the state with the content of your clipboard',
+                },
+                {
+                    icon: 'save',
+                    action: () => {
+                        actionGlobalSaveState(pinia);
+                    },
+                    tooltip: 'Save the state as a JSON file',
+                },
+                {
+                    icon: 'folder_open',
+                    action: async () => {
+                        await actionGlobalOpenStateFile(pinia);
+                        api.sendInspectorTree(INSPECTOR_ID);
+                        api.sendInspectorState(INSPECTOR_ID);
+                    },
+                    tooltip: 'Import the state from a JSON file',
+                },
+            ],
+            nodeActions: [
+                {
+                    icon: 'restore',
+                    tooltip: 'Reset the state (with "$reset")',
+                    action: (nodeId) => {
+                        const store = pinia._s.get(nodeId);
+                        if (!store) {
+                            toastMessage(`Cannot reset "${nodeId}" store because it wasn't found.`, 'warn');
+                        }
+                        else if (typeof store.$reset !== 'function') {
+                            toastMessage(`Cannot reset "${nodeId}" store because it doesn't have a "$reset" method implemented.`, 'warn');
+                        }
+                        else {
+                            store.$reset();
+                            toastMessage(`Store "${nodeId}" reset.`);
+                        }
+                    },
+                },
+            ],
+        });
+        api.on.inspectComponent((payload, ctx) => {
+            const proxy = (payload.componentInstance &&
+                payload.componentInstance.proxy);
+            if (proxy && proxy._pStores) {
+                const piniaStores = payload.componentInstance.proxy._pStores;
+                Object.values(piniaStores).forEach((store) => {
+                    payload.instanceData.state.push({
+                        type: getStoreType(store.$id),
+                        key: 'state',
+                        editable: true,
+                        value: store._isOptionsAPI
+                            ? {
+                                _custom: {
+                                    value: toRaw(store.$state),
+                                    actions: [
+                                        {
+                                            icon: 'restore',
+                                            tooltip: 'Reset the state of this store',
+                                            action: () => store.$reset(),
+                                        },
+                                    ],
+                                },
+                            }
+                            : // NOTE: workaround to unwrap transferred refs
+                                Object.keys(store.$state).reduce((state, key) => {
+                                    state[key] = store.$state[key];
+                                    return state;
+                                }, {}),
+                    });
+                    if (store._getters && store._getters.length) {
+                        payload.instanceData.state.push({
+                            type: getStoreType(store.$id),
+                            key: 'getters',
+                            editable: false,
+                            value: store._getters.reduce((getters, key) => {
+                                try {
+                                    getters[key] = store[key];
+                                }
+                                catch (error) {
+                                    // @ts-expect-error: we just want to show it in devtools
+                                    getters[key] = error;
+                                }
+                                return getters;
+                            }, {}),
+                        });
+                    }
+                });
+            }
+        });
+        api.on.getInspectorTree((payload) => {
+            if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+                let stores = [pinia];
+                stores = stores.concat(Array.from(pinia._s.values()));
+                payload.rootNodes = (payload.filter
+                    ? stores.filter((store) => '$id' in store
+                        ? store.$id
+                            .toLowerCase()
+                            .includes(payload.filter.toLowerCase())
+                        : PINIA_ROOT_LABEL.toLowerCase().includes(payload.filter.toLowerCase()))
+                    : stores).map(formatStoreForInspectorTree);
+            }
+        });
+        api.on.getInspectorState((payload) => {
+            if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+                const inspectedStore = payload.nodeId === PINIA_ROOT_ID
+                    ? pinia
+                    : pinia._s.get(payload.nodeId);
+                if (!inspectedStore) {
+                    // this could be the selected store restored for a different project
+                    // so it's better not to say anything here
+                    return;
+                }
+                if (inspectedStore) {
+                    payload.state = formatStoreForInspectorState(inspectedStore);
+                }
+            }
+        });
+        api.on.editInspectorState((payload, ctx) => {
+            if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+                const inspectedStore = payload.nodeId === PINIA_ROOT_ID
+                    ? pinia
+                    : pinia._s.get(payload.nodeId);
+                if (!inspectedStore) {
+                    return toastMessage(`store "${payload.nodeId}" not found`, 'error');
+                }
+                const { path } = payload;
+                if (!isPinia(inspectedStore)) {
+                    // access only the state
+                    if (path.length !== 1 ||
+                        !inspectedStore._customProperties.has(path[0]) ||
+                        path[0] in inspectedStore.$state) {
+                        path.unshift('$state');
+                    }
+                }
+                else {
+                    // Root access, we can omit the `.value` because the devtools API does it for us
+                    path.unshift('state');
+                }
+                isTimelineActive = false;
+                payload.set(inspectedStore, path, payload.state.value);
+                isTimelineActive = true;
+            }
+        });
+        api.on.editComponentState((payload) => {
+            if (payload.type.startsWith('🍍')) {
+                const storeId = payload.type.replace(/^🍍\s*/, '');
+                const store = pinia._s.get(storeId);
+                if (!store) {
+                    return toastMessage(`store "${storeId}" not found`, 'error');
+                }
+                const { path } = payload;
+                if (path[0] !== 'state') {
+                    return toastMessage(`Invalid path for store "${storeId}":\n${path}\nOnly state can be modified.`);
+                }
+                // rewrite the first entry to be able to directly set the state as
+                // well as any other path
+                path[0] = '$state';
+                isTimelineActive = false;
+                payload.set(store, path, payload.state.value);
+                isTimelineActive = true;
+            }
+        });
+    });
+}
+function addStoreToDevtools(app, store) {
+    if (!componentStateTypes.includes(getStoreType(store.$id))) {
+        componentStateTypes.push(getStoreType(store.$id));
+    }
+    setupDevtoolsPlugin({
+        id: 'dev.esm.pinia',
+        label: 'Pinia 🍍',
+        logo: 'https://pinia.vuejs.org/logo.svg',
+        packageName: 'pinia',
+        homepage: 'https://pinia.vuejs.org',
+        componentStateTypes,
+        app,
+        settings: {
+            logStoreChanges: {
+                label: 'Notify about new/deleted stores',
+                type: 'boolean',
+                defaultValue: true,
+            },
+            // useEmojis: {
+            //   label: 'Use emojis in messages ⚡️',
+            //   type: 'boolean',
+            //   defaultValue: true,
+            // },
+        },
+    }, (api) => {
+        // gracefully handle errors
+        const now = typeof api.now === 'function' ? api.now.bind(api) : Date.now;
+        store.$onAction(({ after, onError, name, args }) => {
+            const groupId = runningActionId++;
+            api.addTimelineEvent({
+                layerId: MUTATIONS_LAYER_ID,
+                event: {
+                    time: now(),
+                    title: '🛫 ' + name,
+                    subtitle: 'start',
+                    data: {
+                        store: formatDisplay(store.$id),
+                        action: formatDisplay(name),
+                        args,
+                    },
+                    groupId,
+                },
+            });
+            after((result) => {
+                activeAction = undefined;
+                api.addTimelineEvent({
+                    layerId: MUTATIONS_LAYER_ID,
+                    event: {
+                        time: now(),
+                        title: '🛬 ' + name,
+                        subtitle: 'end',
+                        data: {
+                            store: formatDisplay(store.$id),
+                            action: formatDisplay(name),
+                            args,
+                            result,
+                        },
+                        groupId,
+                    },
+                });
+            });
+            onError((error) => {
+                activeAction = undefined;
+                api.addTimelineEvent({
+                    layerId: MUTATIONS_LAYER_ID,
+                    event: {
+                        time: now(),
+                        logType: 'error',
+                        title: '💥 ' + name,
+                        subtitle: 'end',
+                        data: {
+                            store: formatDisplay(store.$id),
+                            action: formatDisplay(name),
+                            args,
+                            error,
+                        },
+                        groupId,
+                    },
+                });
+            });
+        }, true);
+        store._customProperties.forEach((name) => {
+            watch(() => unref(store[name]), (newValue, oldValue) => {
+                api.notifyComponentUpdate();
+                api.sendInspectorState(INSPECTOR_ID);
+                if (isTimelineActive) {
+                    api.addTimelineEvent({
+                        layerId: MUTATIONS_LAYER_ID,
+                        event: {
+                            time: now(),
+                            title: 'Change',
+                            subtitle: name,
+                            data: {
+                                newValue,
+                                oldValue,
+                            },
+                            groupId: activeAction,
+                        },
+                    });
+                }
+            }, { deep: true });
+        });
+        store.$subscribe(({ events, type }, state) => {
+            api.notifyComponentUpdate();
+            api.sendInspectorState(INSPECTOR_ID);
+            if (!isTimelineActive)
+                return;
+            // rootStore.state[store.id] = state
+            const eventData = {
+                time: now(),
+                title: formatMutationType(type),
+                data: assign$1({ store: formatDisplay(store.$id) }, formatEventData(events)),
+                groupId: activeAction,
+            };
+            if (type === MutationType.patchFunction) {
+                eventData.subtitle = '⤵️';
+            }
+            else if (type === MutationType.patchObject) {
+                eventData.subtitle = '🧩';
+            }
+            else if (events && !Array.isArray(events)) {
+                eventData.subtitle = events.type;
+            }
+            if (events) {
+                eventData.data['rawEvent(s)'] = {
+                    _custom: {
+                        display: 'DebuggerEvent',
+                        type: 'object',
+                        tooltip: 'raw DebuggerEvent[]',
+                        value: events,
+                    },
+                };
+            }
+            api.addTimelineEvent({
+                layerId: MUTATIONS_LAYER_ID,
+                event: eventData,
+            });
+        }, { detached: true, flush: 'sync' });
+        const hotUpdate = store._hotUpdate;
+        store._hotUpdate = markRaw((newStore) => {
+            hotUpdate(newStore);
+            api.addTimelineEvent({
+                layerId: MUTATIONS_LAYER_ID,
+                event: {
+                    time: now(),
+                    title: '🔥 ' + store.$id,
+                    subtitle: 'HMR update',
+                    data: {
+                        store: formatDisplay(store.$id),
+                        info: formatDisplay(`HMR update`),
+                    },
+                },
+            });
+            // update the devtools too
+            api.notifyComponentUpdate();
+            api.sendInspectorTree(INSPECTOR_ID);
+            api.sendInspectorState(INSPECTOR_ID);
+        });
+        const { $dispose } = store;
+        store.$dispose = () => {
+            $dispose();
+            api.notifyComponentUpdate();
+            api.sendInspectorTree(INSPECTOR_ID);
+            api.sendInspectorState(INSPECTOR_ID);
+            api.getSettings().logStoreChanges &&
+                toastMessage(`Disposed "${store.$id}" store 🗑`);
+        };
+        // trigger an update so it can display new registered stores
+        api.notifyComponentUpdate();
+        api.sendInspectorTree(INSPECTOR_ID);
+        api.sendInspectorState(INSPECTOR_ID);
+        api.getSettings().logStoreChanges &&
+            toastMessage(`"${store.$id}" store installed 🆕`);
+    });
+}
+let runningActionId = 0;
+let activeAction;
+/**
+ * Patches a store to enable action grouping in devtools by wrapping the store with a Proxy that is passed as the
+ * context of all actions, allowing us to set `runningAction` on each access and effectively associating any state
+ * mutation to the action.
+ *
+ * @param store - store to patch
+ * @param actionNames - list of actionst to patch
+ */
+function patchActionForGrouping(store, actionNames, wrapWithProxy) {
+    // original actions of the store as they are given by pinia. We are going to override them
+    const actions = actionNames.reduce((storeActions, actionName) => {
+        // use toRaw to avoid tracking #541
+        storeActions[actionName] = toRaw(store)[actionName];
+        return storeActions;
+    }, {});
+    for (const actionName in actions) {
+        store[actionName] = function () {
+            // the running action id is incremented in a before action hook
+            const _actionId = runningActionId;
+            const trackedStore = wrapWithProxy
+                ? new Proxy(store, {
+                    get(...args) {
+                        activeAction = _actionId;
+                        return Reflect.get(...args);
+                    },
+                    set(...args) {
+                        activeAction = _actionId;
+                        return Reflect.set(...args);
+                    },
+                })
+                : store;
+            // For Setup Stores we need https://github.com/tc39/proposal-async-context
+            activeAction = _actionId;
+            const retValue = actions[actionName].apply(trackedStore, arguments);
+            // this is safer as async actions in Setup Stores would associate mutations done outside of the action
+            activeAction = undefined;
+            return retValue;
+        };
+    }
+}
+/**
+ * pinia.use(devtoolsPlugin)
+ */
+function devtoolsPlugin({ app, store, options }) {
+    // HMR module
+    if (store.$id.startsWith('__hot:')) {
+        return;
+    }
+    // detect option api vs setup api
+    store._isOptionsAPI = !!options.state;
+    patchActionForGrouping(store, Object.keys(options.actions), store._isOptionsAPI);
+    // Upgrade the HMR to also update the new actions
+    const originalHotUpdate = store._hotUpdate;
+    toRaw(store)._hotUpdate = function (newStore) {
+        originalHotUpdate.apply(this, arguments);
+        patchActionForGrouping(store, Object.keys(newStore._hmrPayload.actions), !!store._isOptionsAPI);
+    };
+    addStoreToDevtools(app, 
+    // FIXME: is there a way to allow the assignment from Store<Id, S, G, A> to StoreGeneric?
+    store);
+}
+
+/**
+ * Creates a Pinia instance to be used by the application
+ */
+function createPinia() {
+    const scope = effectScope(true);
+    // NOTE: here we could check the window object for a state and directly set it
+    // if there is anything like it with Vue 3 SSR
+    const state = scope.run(() => ref({}));
+    let _p = [];
+    // plugins added before calling app.use(pinia)
+    let toBeInstalled = [];
+    const pinia = markRaw({
+        install(app) {
+            // this allows calling useStore() outside of a component setup after
+            // installing pinia's plugin
+            setActivePinia(pinia);
+            if (!isVue2) {
+                pinia._a = app;
+                app.provide(piniaSymbol, pinia);
+                app.config.globalProperties.$pinia = pinia;
+                /* istanbul ignore else */
+                if (USE_DEVTOOLS) {
+                    registerPiniaDevtools(app, pinia);
+                }
+                toBeInstalled.forEach((plugin) => _p.push(plugin));
+                toBeInstalled = [];
+            }
+        },
+        use(plugin) {
+            if (!this._a && !isVue2) {
+                toBeInstalled.push(plugin);
+            }
+            else {
+                _p.push(plugin);
+            }
+            return this;
+        },
+        _p,
+        // it's actually undefined here
+        // @ts-expect-error
+        _a: null,
+        _e: scope,
+        _s: new Map(),
+        state,
+    });
+    // pinia devtools rely on dev only features so they cannot be forced unless
+    // the dev build of Vue is used. Avoid old browsers like IE11.
+    if (USE_DEVTOOLS && typeof Proxy !== 'undefined') {
+        pinia.use(devtoolsPlugin);
+    }
+    return pinia;
+}
+
+/**
+ * Checks if a function is a `StoreDefinition`.
+ *
+ * @param fn - object to test
+ * @returns true if `fn` is a StoreDefinition
+ */
+const isUseStore = (fn) => {
+    return typeof fn === 'function' && typeof fn.$id === 'string';
+};
+/**
+ * Mutates in place `newState` with `oldState` to _hot update_ it. It will
+ * remove any key not existing in `newState` and recursively merge plain
+ * objects.
+ *
+ * @param newState - new state object to be patched
+ * @param oldState - old state that should be used to patch newState
+ * @returns - newState
+ */
+function patchObject(newState, oldState) {
+    // no need to go through symbols because they cannot be serialized anyway
+    for (const key in oldState) {
+        const subPatch = oldState[key];
+        // skip the whole sub tree
+        if (!(key in newState)) {
+            continue;
+        }
+        const targetValue = newState[key];
+        if (isPlainObject(targetValue) &&
+            isPlainObject(subPatch) &&
+            !isRef(subPatch) &&
+            !isReactive(subPatch)) {
+            newState[key] = patchObject(targetValue, subPatch);
+        }
+        else {
+            // objects are either a bit more complex (e.g. refs) or primitives, so we
+            // just set the whole thing
+            if (isVue2) {
+                set(newState, key, subPatch);
+            }
+            else {
+                newState[key] = subPatch;
+            }
+        }
+    }
+    return newState;
+}
+/**
+ * Creates an _accept_ function to pass to `import.meta.hot` in Vite applications.
+ *
+ * @example
+ * ```js
+ * const useUser = defineStore(...)
+ * if (import.meta.hot) {
+ *   import.meta.hot.accept(acceptHMRUpdate(useUser, import.meta.hot))
+ * }
+ * ```
+ *
+ * @param initialUseStore - return of the defineStore to hot update
+ * @param hot - `import.meta.hot`
+ */
+function acceptHMRUpdate(initialUseStore, hot) {
+    // strip as much as possible from iife.prod
+    if (true) {
+        return () => { };
+    }
+    return (newModule) => {
+        const pinia = hot.data.pinia || initialUseStore._pinia;
+        if (!pinia) {
+            // this store is still not used
+            return;
+        }
+        // preserve the pinia instance across loads
+        hot.data.pinia = pinia;
+        // console.log('got data', newStore)
+        for (const exportName in newModule) {
+            const useStore = newModule[exportName];
+            // console.log('checking for', exportName)
+            if (isUseStore(useStore) && pinia._s.has(useStore.$id)) {
+                // console.log('Accepting update for', useStore.$id)
+                const id = useStore.$id;
+                if (id !== initialUseStore.$id) {
+                    console.warn(`The id of the store changed from "${initialUseStore.$id}" to "${id}". Reloading.`);
+                    // return import.meta.hot.invalidate()
+                    return hot.invalidate();
+                }
+                const existingStore = pinia._s.get(id);
+                if (!existingStore) {
+                    console.log(`[Pinia]: skipping hmr because store doesn't exist yet`);
+                    return;
+                }
+                useStore(pinia, existingStore);
+            }
+        }
+    };
+}
+
+const pinia_noop = () => { };
+function addSubscription(subscriptions, callback, detached, onCleanup = pinia_noop) {
+    subscriptions.push(callback);
+    const removeSubscription = () => {
+        const idx = subscriptions.indexOf(callback);
+        if (idx > -1) {
+            subscriptions.splice(idx, 1);
+            onCleanup();
+        }
+    };
+    if (!detached && getCurrentScope()) {
+        onScopeDispose(removeSubscription);
+    }
+    return removeSubscription;
+}
+function triggerSubscriptions(subscriptions, ...args) {
+    subscriptions.slice().forEach((callback) => {
+        callback(...args);
+    });
+}
+
+const fallbackRunWithContext = (fn) => fn();
+function mergeReactiveObjects(target, patchToApply) {
+    // Handle Map instances
+    if (target instanceof Map && patchToApply instanceof Map) {
+        patchToApply.forEach((value, key) => target.set(key, value));
+    }
+    // Handle Set instances
+    if (target instanceof Set && patchToApply instanceof Set) {
+        patchToApply.forEach(target.add, target);
+    }
+    // no need to go through symbols because they cannot be serialized anyway
+    for (const key in patchToApply) {
+        if (!patchToApply.hasOwnProperty(key))
+            continue;
+        const subPatch = patchToApply[key];
+        const targetValue = target[key];
+        if (isPlainObject(targetValue) &&
+            isPlainObject(subPatch) &&
+            target.hasOwnProperty(key) &&
+            !isRef(subPatch) &&
+            !isReactive(subPatch)) {
+            // NOTE: here I wanted to warn about inconsistent types but it's not possible because in setup stores one might
+            // start the value of a property as a certain type e.g. a Map, and then for some reason, during SSR, change that
+            // to `undefined`. When trying to hydrate, we want to override the Map with `undefined`.
+            target[key] = mergeReactiveObjects(targetValue, subPatch);
+        }
+        else {
+            // @ts-expect-error: subPatch is a valid value
+            target[key] = subPatch;
+        }
+    }
+    return target;
+}
+const skipHydrateSymbol = ( false)
+    ? 0
+    : /* istanbul ignore next */ Symbol();
+const skipHydrateMap = /*#__PURE__*/ new WeakMap();
+/**
+ * Tells Pinia to skip the hydration process of a given object. This is useful in setup stores (only) when you return a
+ * stateful object in the store but it isn't really state. e.g. returning a router instance in a setup store.
+ *
+ * @param obj - target object
+ * @returns obj
+ */
+function skipHydrate(obj) {
+    return isVue2
+        ? // in @vue/composition-api, the refs are sealed so defineProperty doesn't work...
+            /* istanbul ignore next */ skipHydrateMap.set(obj, 1) && obj
+        : Object.defineProperty(obj, skipHydrateSymbol, {});
+}
+/**
+ * Returns whether a value should be hydrated
+ *
+ * @param obj - target variable
+ * @returns true if `obj` should be hydrated
+ */
+function shouldHydrate(obj) {
+    return isVue2
+        ? /* istanbul ignore next */ !skipHydrateMap.has(obj)
+        : !isPlainObject(obj) || !obj.hasOwnProperty(skipHydrateSymbol);
+}
+const { assign: pinia_assign } = Object;
+function isComputed(o) {
+    return !!(isRef(o) && o.effect);
+}
+function createOptionsStore(id, options, pinia, hot) {
+    const { state, actions, getters } = options;
+    const initialState = pinia.state.value[id];
+    let store;
+    function setup() {
+        if (!initialState && ( true || 0)) {
+            /* istanbul ignore if */
+            if (isVue2) {
+                set(pinia.state.value, id, state ? state() : {});
+            }
+            else {
+                pinia.state.value[id] = state ? state() : {};
+            }
+        }
+        // avoid creating a state in pinia.state.value
+        const localState =  false
+            ? // use ref() to unwrap refs inside state TODO: check if this is still necessary
+                0
+            : toRefs(pinia.state.value[id]);
+        return pinia_assign(localState, actions, Object.keys(getters || {}).reduce((computedGetters, name) => {
+            if (false) {}
+            computedGetters[name] = markRaw(computed(() => {
+                setActivePinia(pinia);
+                // it was created just before
+                const store = pinia._s.get(id);
+                // allow cross using stores
+                /* istanbul ignore next */
+                if (isVue2 && !store._r)
+                    return;
+                // @ts-expect-error
+                // return getters![name].call(context, context)
+                // TODO: avoid reading the getter while assigning with a global variable
+                return getters[name].call(store, store);
+            }));
+            return computedGetters;
+        }, {}));
+    }
+    store = createSetupStore(id, setup, options, pinia, hot, true);
+    return store;
+}
+function createSetupStore($id, setup, options = {}, pinia, hot, isOptionsStore) {
+    let scope;
+    const optionsForPlugin = pinia_assign({ actions: {} }, options);
+    /* istanbul ignore if */
+    if (false) {}
+    // watcher options for $subscribe
+    const $subscribeOptions = {
+        deep: true,
+        // flush: 'post',
+    };
+    /* istanbul ignore else */
+    if (false) {}
+    // internal state
+    let isListening; // set to true at the end
+    let isSyncListening; // set to true at the end
+    let subscriptions = [];
+    let actionSubscriptions = [];
+    let debuggerEvents;
+    const initialState = pinia.state.value[$id];
+    // avoid setting the state for option stores if it is set
+    // by the setup
+    if (!isOptionsStore && !initialState && ( true || 0)) {
+        /* istanbul ignore if */
+        if (isVue2) {
+            set(pinia.state.value, $id, {});
+        }
+        else {
+            pinia.state.value[$id] = {};
+        }
+    }
+    const hotState = ref({});
+    // avoid triggering too many listeners
+    // https://github.com/vuejs/pinia/issues/1129
+    let activeListener;
+    function $patch(partialStateOrMutator) {
+        let subscriptionMutation;
+        isListening = isSyncListening = false;
+        // reset the debugger events since patches are sync
+        /* istanbul ignore else */
+        if ((false)) {}
+        if (typeof partialStateOrMutator === 'function') {
+            partialStateOrMutator(pinia.state.value[$id]);
+            subscriptionMutation = {
+                type: MutationType.patchFunction,
+                storeId: $id,
+                events: debuggerEvents,
+            };
+        }
+        else {
+            mergeReactiveObjects(pinia.state.value[$id], partialStateOrMutator);
+            subscriptionMutation = {
+                type: MutationType.patchObject,
+                payload: partialStateOrMutator,
+                storeId: $id,
+                events: debuggerEvents,
+            };
+        }
+        const myListenerId = (activeListener = Symbol());
+        nextTick().then(() => {
+            if (activeListener === myListenerId) {
+                isListening = true;
+            }
+        });
+        isSyncListening = true;
+        // because we paused the watcher, we need to manually call the subscriptions
+        triggerSubscriptions(subscriptions, subscriptionMutation, pinia.state.value[$id]);
+    }
+    const $reset = isOptionsStore
+        ? function $reset() {
+            const { state } = options;
+            const newState = state ? state() : {};
+            // we use a patch to group all changes into one single subscription
+            this.$patch(($state) => {
+                pinia_assign($state, newState);
+            });
+        }
+        : /* istanbul ignore next */
+            ( false)
+                ? 0
+                : pinia_noop;
+    function $dispose() {
+        scope.stop();
+        subscriptions = [];
+        actionSubscriptions = [];
+        pinia._s.delete($id);
+    }
+    /**
+     * Wraps an action to handle subscriptions.
+     *
+     * @param name - name of the action
+     * @param action - action to wrap
+     * @returns a wrapped action to handle subscriptions
+     */
+    function wrapAction(name, action) {
+        return function () {
+            setActivePinia(pinia);
+            const args = Array.from(arguments);
+            const afterCallbackList = [];
+            const onErrorCallbackList = [];
+            function after(callback) {
+                afterCallbackList.push(callback);
+            }
+            function onError(callback) {
+                onErrorCallbackList.push(callback);
+            }
+            // @ts-expect-error
+            triggerSubscriptions(actionSubscriptions, {
+                args,
+                name,
+                store,
+                after,
+                onError,
+            });
+            let ret;
+            try {
+                ret = action.apply(this && this.$id === $id ? this : store, args);
+                // handle sync errors
+            }
+            catch (error) {
+                triggerSubscriptions(onErrorCallbackList, error);
+                throw error;
+            }
+            if (ret instanceof Promise) {
+                return ret
+                    .then((value) => {
+                    triggerSubscriptions(afterCallbackList, value);
+                    return value;
+                })
+                    .catch((error) => {
+                    triggerSubscriptions(onErrorCallbackList, error);
+                    return Promise.reject(error);
+                });
+            }
+            // trigger after callbacks
+            triggerSubscriptions(afterCallbackList, ret);
+            return ret;
+        };
+    }
+    const _hmrPayload = /*#__PURE__*/ markRaw({
+        actions: {},
+        getters: {},
+        state: [],
+        hotState,
+    });
+    const partialStore = {
+        _p: pinia,
+        // _s: scope,
+        $id,
+        $onAction: addSubscription.bind(null, actionSubscriptions),
+        $patch,
+        $reset,
+        $subscribe(callback, options = {}) {
+            const removeSubscription = addSubscription(subscriptions, callback, options.detached, () => stopWatcher());
+            const stopWatcher = scope.run(() => watch(() => pinia.state.value[$id], (state) => {
+                if (options.flush === 'sync' ? isSyncListening : isListening) {
+                    callback({
+                        storeId: $id,
+                        type: MutationType.direct,
+                        events: debuggerEvents,
+                    }, state);
+                }
+            }, pinia_assign({}, $subscribeOptions, options)));
+            return removeSubscription;
+        },
+        $dispose,
+    };
+    /* istanbul ignore if */
+    if (isVue2) {
+        // start as non ready
+        partialStore._r = false;
+    }
+    const store = reactive(( false) || USE_DEVTOOLS
+        ? pinia_assign({
+            _hmrPayload,
+            _customProperties: markRaw(new Set()), // devtools custom properties
+        }, partialStore
+        // must be added later
+        // setupStore
+        )
+        : partialStore);
+    // store the partial store now so the setup of stores can instantiate each other before they are finished without
+    // creating infinite loops.
+    pinia._s.set($id, store);
+    const runWithContext = (pinia._a && pinia._a.runWithContext) || fallbackRunWithContext;
+    // TODO: idea create skipSerialize that marks properties as non serializable and they are skipped
+    const setupStore = runWithContext(() => pinia._e.run(() => (scope = effectScope()).run(setup)));
+    // overwrite existing actions to support $onAction
+    for (const key in setupStore) {
+        const prop = setupStore[key];
+        if ((isRef(prop) && !isComputed(prop)) || isReactive(prop)) {
+            // mark it as a piece of state to be serialized
+            if (false) {}
+            else if (!isOptionsStore) {
+                // in setup stores we must hydrate the state and sync pinia state tree with the refs the user just created
+                if (initialState && shouldHydrate(prop)) {
+                    if (isRef(prop)) {
+                        prop.value = initialState[key];
+                    }
+                    else {
+                        // probably a reactive object, lets recursively assign
+                        // @ts-expect-error: prop is unknown
+                        mergeReactiveObjects(prop, initialState[key]);
+                    }
+                }
+                // transfer the ref to the pinia state to keep everything in sync
+                /* istanbul ignore if */
+                if (isVue2) {
+                    set(pinia.state.value[$id], key, prop);
+                }
+                else {
+                    pinia.state.value[$id][key] = prop;
+                }
+            }
+            /* istanbul ignore else */
+            if ((false)) {}
+            // action
+        }
+        else if (typeof prop === 'function') {
+            // @ts-expect-error: we are overriding the function we avoid wrapping if
+            const actionValue =  false ? 0 : wrapAction(key, prop);
+            // this a hot module replacement store because the hotUpdate method needs
+            // to do it with the right context
+            /* istanbul ignore if */
+            if (isVue2) {
+                set(setupStore, key, actionValue);
+            }
+            else {
+                // @ts-expect-error
+                setupStore[key] = actionValue;
+            }
+            /* istanbul ignore else */
+            if ((false)) {}
+            // list actions so they can be used in plugins
+            // @ts-expect-error
+            optionsForPlugin.actions[key] = prop;
+        }
+        else if ((false)) {}
+    }
+    // add the state, getters, and action properties
+    /* istanbul ignore if */
+    if (isVue2) {
+        Object.keys(setupStore).forEach((key) => {
+            set(store, key, setupStore[key]);
+        });
+    }
+    else {
+        pinia_assign(store, setupStore);
+        // allows retrieving reactive objects with `storeToRefs()`. Must be called after assigning to the reactive object.
+        // Make `storeToRefs()` work with `reactive()` #799
+        pinia_assign(toRaw(store), setupStore);
+    }
+    // use this instead of a computed with setter to be able to create it anywhere
+    // without linking the computed lifespan to wherever the store is first
+    // created.
+    Object.defineProperty(store, '$state', {
+        get: () => ( false ? 0 : pinia.state.value[$id]),
+        set: (state) => {
+            /* istanbul ignore if */
+            if (false) {}
+            $patch(($state) => {
+                pinia_assign($state, state);
+            });
+        },
+    });
+    // add the hotUpdate before plugins to allow them to override it
+    /* istanbul ignore else */
+    if ((false)) {}
+    if (USE_DEVTOOLS) {
+        const nonEnumerable = {
+            writable: true,
+            configurable: true,
+            // avoid warning on devtools trying to display this property
+            enumerable: false,
+        };
+        ['_p', '_hmrPayload', '_getters', '_customProperties'].forEach((p) => {
+            Object.defineProperty(store, p, pinia_assign({ value: store[p] }, nonEnumerable));
+        });
+    }
+    /* istanbul ignore if */
+    if (isVue2) {
+        // mark the store as ready before plugins
+        store._r = true;
+    }
+    // apply all plugins
+    pinia._p.forEach((extender) => {
+        /* istanbul ignore else */
+        if (USE_DEVTOOLS) {
+            const extensions = scope.run(() => extender({
+                store,
+                app: pinia._a,
+                pinia,
+                options: optionsForPlugin,
+            }));
+            Object.keys(extensions || {}).forEach((key) => store._customProperties.add(key));
+            pinia_assign(store, extensions);
+        }
+        else {
+            pinia_assign(store, scope.run(() => extender({
+                store,
+                app: pinia._a,
+                pinia,
+                options: optionsForPlugin,
+            })));
+        }
+    });
+    if (false) {}
+    // only apply hydrate to option stores with an initial state in pinia
+    if (initialState &&
+        isOptionsStore &&
+        options.hydrate) {
+        options.hydrate(store.$state, initialState);
+    }
+    isListening = true;
+    isSyncListening = true;
+    return store;
+}
+function defineStore(
+// TODO: add proper types from above
+idOrOptions, setup, setupOptions) {
+    let id;
+    let options;
+    const isSetupStore = typeof setup === 'function';
+    if (typeof idOrOptions === 'string') {
+        id = idOrOptions;
+        // the option store setup will contain the actual options in this case
+        options = isSetupStore ? setupOptions : setup;
+    }
+    else {
+        options = idOrOptions;
+        id = idOrOptions.id;
+        if (false) {}
+    }
+    function useStore(pinia, hot) {
+        const hasContext = hasInjectionContext();
+        pinia =
+            // in test mode, ignore the argument provided as we can always retrieve a
+            // pinia instance with getActivePinia()
+            ( false ? 0 : pinia) ||
+                (hasContext ? inject(piniaSymbol, null) : null);
+        if (pinia)
+            setActivePinia(pinia);
+        if (false) {}
+        pinia = activePinia;
+        if (!pinia._s.has(id)) {
+            // creating the store registers it in `pinia._s`
+            if (isSetupStore) {
+                createSetupStore(id, setup, options, pinia);
+            }
+            else {
+                createOptionsStore(id, options, pinia);
+            }
+            /* istanbul ignore else */
+            if ((false)) {}
+        }
+        const store = pinia._s.get(id);
+        if (false) {}
+        if (false) {}
+        // StoreGeneric cannot be casted towards Store
+        return store;
+    }
+    useStore.$id = id;
+    return useStore;
+}
+
+let mapStoreSuffix = 'Store';
+/**
+ * Changes the suffix added by `mapStores()`. Can be set to an empty string.
+ * Defaults to `"Store"`. Make sure to extend the MapStoresCustomization
+ * interface if you are using TypeScript.
+ *
+ * @param suffix - new suffix
+ */
+function setMapStoreSuffix(suffix // could be 'Store' but that would be annoying for JS
+) {
+    mapStoreSuffix = suffix;
+}
+/**
+ * Allows using stores without the composition API (`setup()`) by generating an
+ * object to be spread in the `computed` field of a component. It accepts a list
+ * of store definitions.
+ *
+ * @example
+ * ```js
+ * export default {
+ *   computed: {
+ *     // other computed properties
+ *     ...mapStores(useUserStore, useCartStore)
+ *   },
+ *
+ *   created() {
+ *     this.userStore // store with id "user"
+ *     this.cartStore // store with id "cart"
+ *   }
+ * }
+ * ```
+ *
+ * @param stores - list of stores to map to an object
+ */
+function mapStores(...stores) {
+    if (false) {}
+    return stores.reduce((reduced, useStore) => {
+        // @ts-expect-error: $id is added by defineStore
+        reduced[useStore.$id + mapStoreSuffix] = function () {
+            return useStore(this.$pinia);
+        };
+        return reduced;
+    }, {});
+}
+/**
+ * Allows using state and getters from one store without using the composition
+ * API (`setup()`) by generating an object to be spread in the `computed` field
+ * of a component.
+ *
+ * @param useStore - store to map from
+ * @param keysOrMapper - array or object
+ */
+function mapState(useStore, keysOrMapper) {
+    return Array.isArray(keysOrMapper)
+        ? keysOrMapper.reduce((reduced, key) => {
+            reduced[key] = function () {
+                return useStore(this.$pinia)[key];
+            };
+            return reduced;
+        }, {})
+        : Object.keys(keysOrMapper).reduce((reduced, key) => {
+            // @ts-expect-error
+            reduced[key] = function () {
+                const store = useStore(this.$pinia);
+                const storeKey = keysOrMapper[key];
+                // for some reason TS is unable to infer the type of storeKey to be a
+                // function
+                return typeof storeKey === 'function'
+                    ? storeKey.call(this, store)
+                    : store[storeKey];
+            };
+            return reduced;
+        }, {});
+}
+/**
+ * Alias for `mapState()`. You should use `mapState()` instead.
+ * @deprecated use `mapState()` instead.
+ */
+const mapGetters = (/* unused pure expression or super */ null && (mapState));
+/**
+ * Allows directly using actions from your store without using the composition
+ * API (`setup()`) by generating an object to be spread in the `methods` field
+ * of a component.
+ *
+ * @param useStore - store to map from
+ * @param keysOrMapper - array or object
+ */
+function mapActions(useStore, keysOrMapper) {
+    return Array.isArray(keysOrMapper)
+        ? keysOrMapper.reduce((reduced, key) => {
+            // @ts-expect-error
+            reduced[key] = function (...args) {
+                return useStore(this.$pinia)[key](...args);
+            };
+            return reduced;
+        }, {})
+        : Object.keys(keysOrMapper).reduce((reduced, key) => {
+            // @ts-expect-error
+            reduced[key] = function (...args) {
+                return useStore(this.$pinia)[keysOrMapper[key]](...args);
+            };
+            return reduced;
+        }, {});
+}
+/**
+ * Allows using state and getters from one store without using the composition
+ * API (`setup()`) by generating an object to be spread in the `computed` field
+ * of a component.
+ *
+ * @param useStore - store to map from
+ * @param keysOrMapper - array or object
+ */
+function mapWritableState(useStore, keysOrMapper) {
+    return Array.isArray(keysOrMapper)
+        ? keysOrMapper.reduce((reduced, key) => {
+            // @ts-ignore
+            reduced[key] = {
+                get() {
+                    return useStore(this.$pinia)[key];
+                },
+                set(value) {
+                    // it's easier to type it here as any
+                    return (useStore(this.$pinia)[key] = value);
+                },
+            };
+            return reduced;
+        }, {})
+        : Object.keys(keysOrMapper).reduce((reduced, key) => {
+            // @ts-ignore
+            reduced[key] = {
+                get() {
+                    return useStore(this.$pinia)[keysOrMapper[key]];
+                },
+                set(value) {
+                    // it's easier to type it here as any
+                    return (useStore(this.$pinia)[keysOrMapper[key]] = value);
+                },
+            };
+            return reduced;
+        }, {});
+}
+
+/**
+ * Creates an object of references with all the state, getters, and plugin-added
+ * state properties of the store. Similar to `toRefs()` but specifically
+ * designed for Pinia stores so methods and non reactive properties are
+ * completely ignored.
+ *
+ * @param store - store to extract the refs from
+ */
+function storeToRefs(store) {
+    // See https://github.com/vuejs/pinia/issues/852
+    // It's easier to just use toRefs() even if it includes more stuff
+    if (isVue2) {
+        // @ts-expect-error: toRefs include methods and others
+        return toRefs(store);
+    }
+    else {
+        store = toRaw(store);
+        const refs = {};
+        for (const key in store) {
+            const value = store[key];
+            if (isRef(value) || isReactive(value)) {
+                // @ts-expect-error: the key is state or getter
+                refs[key] =
+                    // ---
+                    toRef(store, key);
+            }
+        }
+        return refs;
+    }
+}
+
+/**
+ * Vue 2 Plugin that must be installed for pinia to work. Note **you don't need
+ * this plugin if you are using Nuxt.js**. Use the `buildModule` instead:
+ * https://pinia.vuejs.org/ssr/nuxt.html.
+ *
+ * @example
+ * ```js
+ * import Vue from 'vue'
+ * import { PiniaVuePlugin, createPinia } from 'pinia'
+ *
+ * Vue.use(PiniaVuePlugin)
+ * const pinia = createPinia()
+ *
+ * new Vue({
+ *   el: '#app',
+ *   // ...
+ *   pinia,
+ * })
+ * ```
+ *
+ * @param _Vue - `Vue` imported from 'vue'.
+ */
+const PiniaVuePlugin = function (_Vue) {
+    // Equivalent of
+    // app.config.globalProperties.$pinia = pinia
+    _Vue.mixin({
+        beforeCreate() {
+            const options = this.$options;
+            if (options.pinia) {
+                const pinia = options.pinia;
+                // HACK: taken from provide(): https://github.com/vuejs/composition-api/blob/main/src/apis/inject.ts#L31
+                /* istanbul ignore else */
+                if (!this._provided) {
+                    const provideCache = {};
+                    Object.defineProperty(this, '_provided', {
+                        get: () => provideCache,
+                        set: (v) => Object.assign(provideCache, v),
+                    });
+                }
+                this._provided[piniaSymbol] = pinia;
+                // propagate the pinia instance in an SSR friendly way
+                // avoid adding it to nuxt twice
+                /* istanbul ignore else */
+                if (!this.$pinia) {
+                    this.$pinia = pinia;
+                }
+                pinia._a = this;
+                if (IS_CLIENT) {
+                    // this allows calling useStore() outside of a component setup after
+                    // installing pinia's plugin
+                    setActivePinia(pinia);
+                }
+                if (USE_DEVTOOLS) {
+                    registerPiniaDevtools(pinia._a, pinia);
+                }
+            }
+            else if (!this.$pinia && options.parent && options.parent.$pinia) {
+                this.$pinia = options.parent.$pinia;
+            }
+        },
+        destroyed() {
+            delete this._pStores;
+        },
+    });
+};
+
+
+
 ;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Gallery.vue?vue&type=script&lang=ts
 
 
@@ -45013,12 +45310,6 @@ var Galleryvue_type_style_index_0_id_4cc30028_lang_less = __webpack_require__(31
 const Gallery_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(Galleryvue_type_script_lang_ts, [['render',Galleryvue_type_template_id_4cc30028_ts_true_render]])
 
 /* harmony default export */ const Gallery = (Gallery_exports_);
-;// CONCATENATED MODULE: ./src/utils.ts
-var D2R = Math.PI / 180;
-var utils_R2D = 180 / Math.PI;
-var API_BASE_URL = "https://api.cosmicds.cfa.harvard.edu";
-var MINIDS_BASE_URL = "".concat(API_BASE_URL, "/minids");
-
 ;// CONCATENATED MODULE: ./src/index.ts
 
 
@@ -45033,6 +45324,7 @@ var MINIDS_BASE_URL = "".concat(API_BASE_URL, "/minids");
 
 
 
+
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js