@sfgrp/distinguish 0.0.5 → 0.0.8

package/dist/distinguish.es.js

@@ -1741,19 +1741,19 @@ function traverse(value, seen) {
   return value;
 }
 function useTransitionState() {
-  const state2 = {
+  const state = {
     isMounted: false,
     isLeaving: false,
     isUnmounting: false,
     leavingVNodes: /* @__PURE__ */ new Map()
   };
   onMounted(() => {
-    state2.isMounted = true;
+    state.isMounted = true;
   });
   onBeforeUnmount(() => {
-    state2.isUnmounting = true;
+    state.isUnmounting = true;
   });
-  return state2;
+  return state;
 }
 const TransitionHookValidator = [Function, Array];
 const BaseTransitionImpl = {
@@ -1777,7 +1777,7 @@ const BaseTransitionImpl = {
   },
   setup(props, { slots }) {
     const instance = getCurrentInstance();
-    const state2 = useTransitionState();
+    const state = useTransitionState();
     let prevTransitionKey;
     return () => {
       const children = slots.default && getTransitionRawChildren(slots.default(), true);
@@ -1795,14 +1795,14 @@ const BaseTransitionImpl = {
       }
       const rawProps = toRaw(props);
       const { mode } = rawProps;
-      if (state2.isLeaving) {
+      if (state.isLeaving) {
         return emptyPlaceholder(child);
       }
       const innerChild = getKeepAliveChild(child);
       if (!innerChild) {
         return emptyPlaceholder(child);
       }
-      const enterHooks = resolveTransitionHooks(innerChild, rawProps, state2, instance);
+      const enterHooks = resolveTransitionHooks(innerChild, rawProps, state, instance);
       setTransitionHooks(innerChild, enterHooks);
       const oldChild = instance.subTree;
       const oldInnerChild = oldChild && getKeepAliveChild(oldChild);
@@ -1818,18 +1818,18 @@ const BaseTransitionImpl = {
         }
       }
       if (oldInnerChild && oldInnerChild.type !== Comment && (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) {
-        const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state2, instance);
+        const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance);
         setTransitionHooks(oldInnerChild, leavingHooks);
         if (mode === "out-in") {
-          state2.isLeaving = true;
+          state.isLeaving = true;
           leavingHooks.afterLeave = () => {
-            state2.isLeaving = false;
+            state.isLeaving = false;
             instance.update();
           };
           return emptyPlaceholder(child);
         } else if (mode === "in-out" && innerChild.type !== Comment) {
           leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {
-            const leavingVNodesCache = getLeavingNodesForType(state2, oldInnerChild);
+            const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild);
             leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;
             el._leaveCb = () => {
               earlyRemove();
@@ -1845,8 +1845,8 @@ const BaseTransitionImpl = {
   }
 };
 const BaseTransition = BaseTransitionImpl;
-function getLeavingNodesForType(state2, vnode) {
-  const { leavingVNodes } = state2;
+function getLeavingNodesForType(state, vnode) {
+  const { leavingVNodes } = state;
   let leavingVNodesCache = leavingVNodes.get(vnode.type);
   if (!leavingVNodesCache) {
     leavingVNodesCache = /* @__PURE__ */ Object.create(null);
@@ -1854,10 +1854,10 @@ function getLeavingNodesForType(state2, vnode) {
   }
   return leavingVNodesCache;
 }
-function resolveTransitionHooks(vnode, props, state2, instance) {
+function resolveTransitionHooks(vnode, props, state, instance) {
   const { appear, mode, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, onBeforeAppear, onAppear, onAfterAppear, onAppearCancelled } = props;
   const key = String(vnode.key);
-  const leavingVNodesCache = getLeavingNodesForType(state2, vnode);
+  const leavingVNodesCache = getLeavingNodesForType(state, vnode);
   const callHook2 = (hook, args) => {
     hook && callWithAsyncErrorHandling(hook, instance, 9, args);
   };
@@ -1876,7 +1876,7 @@ function resolveTransitionHooks(vnode, props, state2, instance) {
     persisted,
     beforeEnter(el) {
       let hook = onBeforeEnter;
-      if (!state2.isMounted) {
+      if (!state.isMounted) {
         if (appear) {
           hook = onBeforeAppear || onBeforeEnter;
         } else {
@@ -1896,7 +1896,7 @@ function resolveTransitionHooks(vnode, props, state2, instance) {
       let hook = onEnter;
       let afterHook = onAfterEnter;
       let cancelHook = onEnterCancelled;
-      if (!state2.isMounted) {
+      if (!state.isMounted) {
         if (appear) {
           hook = onAppear || onEnter;
           afterHook = onAfterAppear || onAfterEnter;
@@ -1931,7 +1931,7 @@ function resolveTransitionHooks(vnode, props, state2, instance) {
       if (el._enterCb) {
         el._enterCb(true);
       }
-      if (state2.isUnmounting) {
+      if (state.isUnmounting) {
         return remove2();
       }
       callHook2(onBeforeLeave, [el]);
@@ -1959,7 +1959,7 @@ function resolveTransitionHooks(vnode, props, state2, instance) {
       }
     },
     clone(vnode2) {
-      return resolveTransitionHooks(vnode2, props, state2, instance);
+      return resolveTransitionHooks(vnode2, props, state, instance);
     }
   };
   return hooks;
@@ -5274,7 +5274,7 @@ var MutationType;
 })(MutationType || (MutationType = {}));
 function createPinia() {
   const scope = effectScope(true);
-  const state2 = scope.run(() => ref({}));
+  const state = scope.run(() => ref({}));
   let _p = [];
   let toBeInstalled = [];
   const pinia = markRaw({
@@ -5300,7 +5300,7 @@ function createPinia() {
     _a: null,
     _e: scope,
     _s: /* @__PURE__ */ new Map(),
-    state: state2
+    state
   });
   return pinia;
 }
@@ -5348,13 +5348,13 @@ function isComputed(o) {
   return !!(isRef(o) && o.effect);
 }
 function createOptionsStore(id, options, pinia, hot) {
-  const { state: state2, actions, getters } = options;
+  const { state, actions, getters } = options;
   const initialState = pinia.state.value[id];
   let store;
   function setup() {
     if (!initialState && true) {
       {
-        pinia.state.value[id] = state2 ? state2() : {};
+        pinia.state.value[id] = state ? state() : {};
       }
     }
     const localState = toRefs(pinia.state.value[id]);
@@ -5369,7 +5369,7 @@ function createOptionsStore(id, options, pinia, hot) {
   }
   store = createSetupStore(id, setup, options, pinia, hot, true);
   store.$reset = function $reset() {
-    const newState = state2 ? state2() : {};
+    const newState = state ? state() : {};
     this.$patch(($state) => {
       assign($state, newState);
     });
@@ -5477,13 +5477,13 @@ function createSetupStore($id, setup, options = {}, pinia, hot, isOptionsStore)
     $reset,
     $subscribe(callback, options2 = {}) {
       const removeSubscription = addSubscription(subscriptions, callback, options2.detached, () => stopWatcher());
-      const stopWatcher = scope.run(() => watch(() => pinia.state.value[$id], (state2) => {
+      const stopWatcher = scope.run(() => watch(() => pinia.state.value[$id], (state) => {
         if (options2.flush === "sync" ? isSyncListening : isListening) {
           callback({
             storeId: $id,
             type: MutationType.direct,
             events: debuggerEvents
-          }, state2);
+          }, state);
         }
       }, assign({}, $subscribeOptions, options2)));
       return removeSubscription;
@@ -5526,9 +5526,9 @@ function createSetupStore($id, setup, options = {}, pinia, hot, isOptionsStore)
   }
   Object.defineProperty(store, "$state", {
     get: () => pinia.state.value[$id],
-    set: (state2) => {
+    set: (state) => {
       $patch(($state) => {
-        assign($state, state2);
+        assign($state, state);
       });
     }
   });
@@ -5579,20 +5579,6 @@ function defineStore(idOrOptions, setup, setupOptions) {
   useStore.$id = id;
   return useStore;
 }
-const state = {
-  baseURL: "",
-  projectId: void 0,
-  projectToken: void 0,
-  userToken: void 0
-};
-const useAPIConfig = () => {
-  const updatePreferences = (preferences) => {
-    Object.assign(state, preferences);
-  };
-  return __spreadProps(__spreadValues({}, state), {
-    updatePreferences
-  });
-};
 var axios$2 = { exports: {} };
 var bind$2 = function bind(fn, thisArg) {
   return function wrap() {
@@ -6813,13 +6799,14 @@ axios$2.exports = axios$1;
 axios$2.exports.default = axios$1;
 var axios = axios$2.exports;
 const useRequest = (instanceConfiguration = {}) => {
+  const store = useSettingsStore();
   const {
     baseURL,
     projectId,
     projectToken,
     userToken,
     csrfToken
-  } = useAPIConfig();
+  } = store.getAPIConfig;
   const axiosConfiguration = __spreadValues({
     baseURL,
     params: {
@@ -6935,17 +6922,17 @@ const useObservationMatrixStore = defineStore("observationMatrix", {
     availableLanguages: []
   }),
   getters: {
-    getCitation: (state2) => state2.citation,
-    getObservationMatrix: (state2) => state2.observationMatrix,
-    getDescriptors: (state2) => state2.descriptors,
-    getDescriptorById: (state2) => (id) => state2.descriptors.find((d) => d.descriptorId === id),
-    getDescriptorsUsed: (state2) => state2.descriptors.filter((d) => d.status === "used"),
-    getDescriptorsUseless: (state2) => state2.descriptors.filter((d) => d.status === "useless"),
-    getDescriptorsUseful: (state2) => state2.descriptors.filter((d) => d.status === "useful"),
-    getEliminated: (state2) => state2.eliminated,
-    getKeywords: (state2) => state2.availableKeywords,
-    getLanguages: (state2) => state2.availableLanguages,
-    getRemaining: (state2) => state2.remaining
+    getCitation: (state) => state.citation,
+    getObservationMatrix: (state) => state.observationMatrix,
+    getDescriptors: (state) => state.descriptors,
+    getDescriptorById: (state) => (id) => state.descriptors.find((d) => d.descriptorId === id),
+    getDescriptorsUsed: (state) => state.descriptors.filter((d) => d.status === "used"),
+    getDescriptorsUseless: (state) => state.descriptors.filter((d) => d.status === "useless"),
+    getDescriptorsUseful: (state) => state.descriptors.filter((d) => d.status === "useful"),
+    getEliminated: (state) => state.eliminated,
+    getKeywords: (state) => state.availableKeywords,
+    getLanguages: (state) => state.availableLanguages,
+    getRemaining: (state) => state.remaining
   },
   actions: {
     setDescriptors(descriptors2) {
@@ -6993,29 +6980,29 @@ const useFilterStore = defineStore("filter", {
     sorting: void 0
   }),
   getters: {
-    getKeywordIds: (state2) => state2.keywordIds,
-    getLanguageId: (state2) => state2.languageId,
-    getRowIds: (state2) => state2.rowIds,
-    getDescriptors: (state2) => state2.descriptors,
-    getIdentifiedToRank: (state2) => state2.identifiedToRank,
-    getEliminateUknown: (state2) => state2.eliminateUnknown,
-    getErrorTolerance: (state2) => state2.errorTolerance,
-    getSorting: (state2) => state2.sorting,
-    getDescriptorValueById: (state2) => (id) => {
-      const value = state2.descriptors[id];
+    getKeywordIds: (state) => state.keywordIds,
+    getLanguageId: (state) => state.languageId,
+    getRowIds: (state) => state.rowIds,
+    getDescriptors: (state) => state.descriptors,
+    getIdentifiedToRank: (state) => state.identifiedToRank,
+    getEliminateUknown: (state) => state.eliminateUnknown,
+    getErrorTolerance: (state) => state.errorTolerance,
+    getSorting: (state) => state.sorting,
+    getDescriptorValueById: (state) => (id) => {
+      const value = state.descriptors[id];
       return typeof value === "boolean" ? value : value || "";
     },
-    getFilterParams: (state2) => {
-      const descriptorsParam = Object.entries(state2.descriptors).map(([key, value]) => Array.isArray(value) ? `${key}:${value.join("|")}` : `${key}:${value}`).join("||");
+    getFilterParams: (state) => {
+      const descriptorsParam = Object.entries(state.descriptors).map(([key, value]) => Array.isArray(value) ? `${key}:${value.join("|")}` : `${key}:${value}`).join("||");
       return {
         selected_descriptors: descriptorsParam,
-        language_id: state2.languageId,
-        keyword_ids: state2.keywordIds,
-        sorting: state2.sorting,
-        identified_to_rank: state2.identifiedToRank,
-        error_tolerance: state2.errorTolerance,
-        eliminate_unknown: state2.eliminateUnknown,
-        row_filter: state2.rowIds.join("|")
+        language_id: state.languageId,
+        keyword_ids: state.keywordIds,
+        sorting: state.sorting,
+        identified_to_rank: state.identifiedToRank,
+        error_tolerance: state.errorTolerance,
+        eliminate_unknown: state.eliminateUnknown,
+        row_filter: state.rowIds.join("|")
       };
     }
   },
@@ -7054,15 +7041,24 @@ const useSettingsStore = defineStore("settings", {
     refreshOnlyTaxa: false,
     rowFilter: true,
     shouldUpdate: true,
-    observationMatrixId: void 0
+    observationMatrixId: void 0,
+    errorMessage: "",
+    apiConfig: {
+      baseURL: "",
+      projectId: void 0,
+      projectToken: void 0,
+      userToken: void 0
+    }
   }),
   getters: {
-    getIsLoading: (state2) => state2.isLoading,
-    getLayout: (state2) => state2.gridLayout,
-    getRefreshOnlyTaxa: (state2) => state2.refreshOnlyTaxa,
-    getRowFilter: (state2) => state2.rowFilter,
-    getShouldUpdate: (state2) => state2.shouldUpdate,
-    getObservationMatrixId: (state2) => state2.observationMatrixId
+    getErrorMessage: (state) => state.errorMessage,
+    getIsLoading: (state) => state.isLoading,
+    getLayout: (state) => state.gridLayout,
+    getRefreshOnlyTaxa: (state) => state.refreshOnlyTaxa,
+    getRowFilter: (state) => state.rowFilter,
+    getShouldUpdate: (state) => state.shouldUpdate,
+    getObservationMatrixId: (state) => state.observationMatrixId,
+    getAPIConfig: (state) => state.apiConfig
   },
   actions: {
     setObservationMatrixId(value) {
@@ -7074,6 +7070,9 @@ const useSettingsStore = defineStore("settings", {
     setRefreshOnlyTaxa(value) {
       this.refreshOnlyTaxa = value;
     },
+    setAPIConfig(config) {
+      this.apiConfig = config;
+    },
     checkUpdate() {
       const filterStore = useFilterStore();
       const observationStore = useObservationMatrixStore();
@@ -7086,15 +7085,13 @@ const useSettingsStore = defineStore("settings", {
           opt: {
             refreshOnlyTaxa: this.refreshOnlyTaxa
           }
-        }).then((_) => {
-          this.isLoading = false;
-        });
+        }).then((_) => this.errorMessage = "").catch((error) => this.errorMessage = error.message).finally(() => this.isLoading = false);
       }
     }
   }
 });
-const _hoisted_1$v = /* @__PURE__ */ createTextVNode(" Eliminate unknowns ");
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$x = /* @__PURE__ */ createTextVNode(" Eliminate unknowns ");
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "FilterEliminateUnknowns",
   setup(__props) {
     const store = useFilterStore();
@@ -7112,18 +7109,18 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         }, null, 512), [
           [vModelCheckbox, unref(eliminateUknown)]
         ]),
-        _hoisted_1$v
+        _hoisted_1$x
       ]);
     };
   }
 });
-const _hoisted_1$u = /* @__PURE__ */ createBaseVNode("label", {
+const _hoisted_1$w = /* @__PURE__ */ createBaseVNode("label", {
   for: "languages",
   class: "d-block"
 }, " Error tolerance ", -1);
 const _hoisted_2$g = /* @__PURE__ */ createBaseVNode("option", { value: "" }, null, -1);
-const _hoisted_3$9 = ["value"];
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_3$8 = ["value"];
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "FilterErrorTolerance",
   setup(__props) {
     const ERROR_TOLERANCE_VALUES = [0, 1, 2];
@@ -7136,7 +7133,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        _hoisted_1$u,
+        _hoisted_1$w,
         withDirectives(createBaseVNode("select", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(errorTolerance) ? errorTolerance.value = $event : null),
           name: "languages",
@@ -7147,7 +7144,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             return createBaseVNode("option", {
               key: value,
               value
-            }, toDisplayString(value), 9, _hoisted_3$9);
+            }, toDisplayString(value), 9, _hoisted_3$8);
           }), 64))
         ], 512), [
           [vModelSelect, unref(errorTolerance)]
@@ -7167,9 +7164,9 @@ const RANK_TYPES = [
   "subfamily",
   "family"
 ];
-const _hoisted_1$t = /* @__PURE__ */ createBaseVNode("label", { class: "d-block" }, "Identified to rank", -1);
+const _hoisted_1$v = /* @__PURE__ */ createBaseVNode("label", { class: "d-block" }, "Identified to rank", -1);
 const _hoisted_2$f = /* @__PURE__ */ createBaseVNode("option", { value: void 0 }, null, -1);
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "FilterRank",
   setup(__props) {
     const store = useFilterStore();
@@ -7183,7 +7180,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        _hoisted_1$t,
+        _hoisted_1$v,
         withDirectives(createBaseVNode("select", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(rankSelected) ? rankSelected.value = $event : null)
         }, [
@@ -7198,9 +7195,9 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$s = /* @__PURE__ */ createBaseVNode("label", { class: "d-block" }, "Descriptor sorting", -1);
+const _hoisted_1$u = /* @__PURE__ */ createBaseVNode("label", { class: "d-block" }, "Descriptor sorting", -1);
 const _hoisted_2$e = /* @__PURE__ */ createBaseVNode("option", { value: void 0 }, null, -1);
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "FilterSort",
   setup(__props) {
     const SORT_TYPES = [
@@ -7219,7 +7216,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        _hoisted_1$s,
+        _hoisted_1$u,
         withDirectives(createBaseVNode("select", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(sortDescriptors) ? sortDescriptors.value = $event : null)
         }, [
@@ -7234,12 +7231,12 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$r = /* @__PURE__ */ createBaseVNode("label", {
+const _hoisted_1$t = /* @__PURE__ */ createBaseVNode("label", {
   for: "languages",
   class: "d-block"
 }, " Languages ", -1);
 const _hoisted_2$d = ["value"];
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "FilterLanguage",
   setup(__props) {
     const filterStore = useFilterStore();
@@ -7252,7 +7249,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        _hoisted_1$r,
+        _hoisted_1$t,
         withDirectives(createBaseVNode("select", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(language) ? language.value = $event : null),
           name: "languages",
@@ -7271,12 +7268,14 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VBtn_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".btn{border-radius:8px;border:none}.btn-primary-color{background-color:var(--primary-color);color:#fff}.btn-medium-size{min-height:var(--btn-medium-size)}\n")();
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+var VBtn_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".btn{border-radius:8px;border:none}.btn-primary-color{background-color:var(--primary-color);color:#fff}.btn-medium-size{min-height:var(--btn-medium-size)}.btn:disabled{background-color:var(--bg-disabled-color);color:var(--disabled-color)}\n")();
+const _hoisted_1$s = ["disabled"];
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "VBtn",
   props: {
     color: { default: "primary" },
-    size: { default: "medium" }
+    size: { default: "medium" },
+    disabled: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -7287,19 +7286,20 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("button", {
         type: "button",
-        class: normalizeClass(["btn", unref(buttonClasses)])
+        class: normalizeClass(["btn", unref(buttonClasses)]),
+        disabled: __props.disabled
       }, [
         renderSlot(_ctx.$slots, "default")
-      ], 2);
+      ], 10, _hoisted_1$s);
     };
   }
 });
 var VModal_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => '.modal-mask{position:fixed;z-index:1099;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:table;transition:opacity .3s ease}.modal-wrapper{display:table-cell;vertical-align:middle}.modal-container{position:relative;width:300px;margin:0 auto;padding:20px 30px;background-color:#fff;border-radius:2px;box-shadow:0 2px 8px #00000054;transition:all .3s ease;font-family:IBM Plex Sans,Helvetica,Arial,sans-serif;max-height:90vh;overflow-y:auto}.modal-close{position:absolute;cursor:pointer;top:26px;right:30px;width:10px;height:10px;background-image:image-url("close.svg");background-size:10px 10px;opacity:.4}.modal-close:hover{opacity:1}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter,.modal-leave-active{opacity:0}.modal-enter .modal-container,.modal-leave-active .modal-container{-webkit-transform:scale(1.1);transform:scale(1.1)}.transparent-modal{background-color:#000c!important}.transparent-modal .modal-header h3{margin:0 0 2em 2em;padding:6px 6px 6px 12px;border-radius:3px;background-color:#0000004d;color:#ffffff80}.transparent-modal .modal-close{right:42px;top:30px;color:#ffffff80;background-image:image-url("w_close.svg")}.transparent-modal .modal-container{width:70%;position:relative;background-color:transparent!important;box-shadow:none}.transparent-modal .modal-container .modal-body{overflow:auto;margin-right:1em;max-height:80vh}.transparent-modal .modal-container .modal-body::-webkit-scrollbar{position:absolute;right:40px;-webkit-appearance:none}.transparent-modal .modal-container .modal-body::-webkit-scrollbar:vertical{width:6px}.transparent-modal .modal-container .modal-body::-webkit-scrollbar:horizontal{height:6px}.transparent-modal .modal-container .modal-body::-webkit-scrollbar-thumb{border-radius:8px;width:11px;height:5px;border:rgba(255,255,255,.5);background-color:#ffffff80}.transparent-modal .modal-container .modal-body::-webkit-scrollbar-track{background-color:#0000004d;border-radius:8px}\n')();
-const _hoisted_1$q = { class: "modal-wrapper" };
+const _hoisted_1$r = { class: "modal-wrapper" };
 const _hoisted_2$c = { class: "modal-header" };
-const _hoisted_3$8 = { class: "modal-body" };
-const _hoisted_4$5 = { class: "modal-footer" };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _hoisted_3$7 = { class: "modal-body" };
+const _hoisted_4$6 = { class: "modal-footer" };
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "VModal",
   props: {
     containerClass: null,
@@ -7323,7 +7323,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             onClick: _cache[2] || (_cache[2] = ($event) => emit("close")),
             onKey: _cache[3] || (_cache[3] = ($event) => emit("close"))
           }, [
-            createBaseVNode("div", _hoisted_1$q, [
+            createBaseVNode("div", _hoisted_1$r, [
               createBaseVNode("div", {
                 class: normalizeClass(["modal-container", __props.containerClass]),
                 style: normalizeStyle(__spreadValues({}, __props.containerStyle)),
@@ -7337,10 +7337,10 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                   }),
                   renderSlot(_ctx.$slots, "header")
                 ]),
-                createBaseVNode("div", _hoisted_3$8, [
+                createBaseVNode("div", _hoisted_3$7, [
                   renderSlot(_ctx.$slots, "body")
                 ]),
-                createBaseVNode("div", _hoisted_4$5, [
+                createBaseVNode("div", _hoisted_4$6, [
                   renderSlot(_ctx.$slots, "footer")
                 ])
               ], 6)
@@ -7352,11 +7352,11 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$p = /* @__PURE__ */ createTextVNode(" Keyword ");
+const _hoisted_1$q = /* @__PURE__ */ createTextVNode(" Keyword ");
 const _hoisted_2$b = /* @__PURE__ */ createBaseVNode("h3", null, "Keywords", -1);
-const _hoisted_3$7 = { class: "list-none p-0" };
-const _hoisted_4$4 = ["value"];
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _hoisted_3$6 = { class: "list-none p-0" };
+const _hoisted_4$5 = ["value"];
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "FilterKeywords",
   setup(__props) {
     const store = useObservationMatrixStore();
@@ -7370,17 +7370,19 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$t, {
+        createVNode(_sfc_main$u, {
           color: "primary",
           size: "medium",
+          disabled: !unref(store).getKeywords.length,
+          title: !unref(store).getKeywords.length ? "No tags defined." : "",
           onClick: _cache[0] || (_cache[0] = ($event) => isModalVisible.value = true)
         }, {
           default: withCtx(() => [
-            _hoisted_1$p
+            _hoisted_1$q
           ]),
           _: 1
-        }),
-        isModalVisible.value ? (openBlock(), createBlock(_sfc_main$s, {
+        }, 8, ["disabled", "title"]),
+        isModalVisible.value ? (openBlock(), createBlock(_sfc_main$t, {
           key: 0,
           onClose: _cache[2] || (_cache[2] = ($event) => isModalVisible.value = false)
         }, {
@@ -7388,7 +7390,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             _hoisted_2$b
           ]),
           body: withCtx(() => [
-            createBaseVNode("ul", _hoisted_3$7, [
+            createBaseVNode("ul", _hoisted_3$6, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(store).getKeywords, ({ keywordId, name }) => {
                 return openBlock(), createElementBlock("li", { key: keywordId }, [
                   createBaseVNode("label", null, [
@@ -7396,7 +7398,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                       "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(keywordIds) ? keywordIds.value = $event : null),
                       value: keywordId,
                       type: "checkbox"
-                    }, null, 8, _hoisted_4$4), [
+                    }, null, 8, _hoisted_4$5), [
                       [vModelCheckbox, unref(keywordIds)]
                     ]),
                     createTextVNode(" " + toDisplayString(name), 1)
@@ -7411,8 +7413,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$o = /* @__PURE__ */ createTextVNode(" Refresh only taxa ");
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$p = /* @__PURE__ */ createTextVNode(" Refresh only taxa ");
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "SettingRefresh",
   setup(__props) {
     const store = useSettingsStore();
@@ -7430,7 +7432,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         }, null, 512), [
           [vModelCheckbox, unref(refreshTaxa)]
         ]),
-        _hoisted_1$o
+        _hoisted_1$p
       ]);
     };
   }
@@ -7443,41 +7445,41 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$p = {};
-const _hoisted_1$n = { class: "menu-list" };
+const _sfc_main$q = {};
+const _hoisted_1$o = { class: "menu-list" };
 function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("ul", _hoisted_1$n, [
+  return openBlock(), createElementBlock("ul", _hoisted_1$o, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var MenuList = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$2]]);
+var MenuList = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$2]]);
 var MenuItem_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".list-item[data-v-3f00bdeb]{justify-content:center;padding-left:1em;padding-right:1em;border-right:1px solid #e5e5e5}\n")();
-const _sfc_main$o = {};
-const _hoisted_1$m = { class: "list-item" };
+const _sfc_main$p = {};
+const _hoisted_1$n = { class: "list-item" };
 function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("li", _hoisted_1$m, [
+  return openBlock(), createElementBlock("li", _hoisted_1$n, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var MenuListItem = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$1], ["__scopeId", "data-v-3f00bdeb"]]);
+var MenuListItem = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$1], ["__scopeId", "data-v-3f00bdeb"]]);
 const LAYOUT_MODES = {
   "layout-mode-1": "layout-mode-2",
   "layout-mode-2": "layout-mode-1"
 };
 var VGrid_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".grid[data-v-203acd5e]{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-column-gap:0px;grid-row-gap:0px;grid-gap:1px;background-color:var(--border-color);box-shadow:0 2px 2px #0003}\n")();
-const _sfc_main$n = {};
-const _hoisted_1$l = { class: "grid" };
+const _sfc_main$o = {};
+const _hoisted_1$m = { class: "grid" };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$l, [
+  return openBlock(), createElementBlock("div", _hoisted_1$m, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var VGrid = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render], ["__scopeId", "data-v-203acd5e"]]);
+var VGrid = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render], ["__scopeId", "data-v-203acd5e"]]);
 var GridToggle_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".grid-icon{width:20px;height:12px;border:2px solid transparent;background-color:transparent;grid-gap:2px}.grid-icon>div{background-color:#fff}\n")();
-const _hoisted_1$k = /* @__PURE__ */ createBaseVNode("div", { class: "panel-descriptors" }, null, -1);
+const _hoisted_1$l = /* @__PURE__ */ createBaseVNode("div", { class: "panel-descriptors" }, null, -1);
 const _hoisted_2$a = /* @__PURE__ */ createBaseVNode("div", { class: "panel-remaining" }, null, -1);
-const _hoisted_3$6 = /* @__PURE__ */ createBaseVNode("div", { class: "panel-eliminated" }, null, -1);
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_3$5 = /* @__PURE__ */ createBaseVNode("div", { class: "panel-eliminated" }, null, -1);
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "GridToggle",
   setup(__props) {
     const store = useSettingsStore();
@@ -7488,16 +7490,16 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$u, {
         class: normalizeClass(unref(LAYOUT_MODES)[unref(gridLayout)]),
         onClick: setLayout
       }, {
         default: withCtx(() => [
           createVNode(VGrid, { class: "grid-icon" }, {
             default: withCtx(() => [
-              _hoisted_1$k,
+              _hoisted_1$l,
               _hoisted_2$a,
-              _hoisted_3$6
+              _hoisted_3$5
             ]),
             _: 1
           })
@@ -7507,92 +7509,100 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$j = /* @__PURE__ */ createTextVNode(" Reset ");
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$k = /* @__PURE__ */ createTextVNode(" Reset ");
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "ResetButton",
   setup(__props) {
     const store = useFilterStore();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$u, {
         color: "primary",
         size: "medium",
         onClick: _cache[0] || (_cache[0] = ($event) => unref(store).$reset())
       }, {
         default: withCtx(() => [
-          _hoisted_1$j
+          _hoisted_1$k
         ]),
         _: 1
       });
     };
   }
 });
-var HeaderBar_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".header-bar[data-v-2f031624]{background-color:var(--bg-panel-color);padding:1em;box-shadow:#24252614 4px 4px 15px;border-radius:.9rem;display:flex;justify-content:space-between;align-items:center}.header-bar__buttons[data-v-2f031624]{display:flex;align-items:center}\n")();
-const _withScopeId$1 = (n) => (pushScopeId("data-v-2f031624"), n = n(), popScopeId(), n);
+const _hoisted_1$j = { class: "error-message" };
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  __name: "ErrorMessage",
+  setup(__props) {
+    const store = useSettingsStore();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", _hoisted_1$j, toDisplayString(unref(store).getErrorMessage), 1);
+    };
+  }
+});
+var HeaderBar_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".header-bar[data-v-1fab3a2c]{background-color:var(--bg-panel-color);padding:1em;box-shadow:#24252614 4px 4px 15px;border-radius:.9rem;display:flex;justify-content:space-between;align-items:center}.header-bar__buttons[data-v-1fab3a2c]{display:flex;align-items:center}\n")();
 const _hoisted_1$i = { class: "header-bar" };
-const _hoisted_2$9 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createBaseVNode("div", null, null, -1));
-const _hoisted_3$5 = { class: "header-bar__buttons" };
+const _hoisted_2$9 = { class: "header-bar__buttons" };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "HeaderBar",
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$i, [
-        _hoisted_2$9,
+        createVNode(_sfc_main$l),
         createVNode(MenuList, null, {
           default: withCtx(() => [
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$q)
+                createVNode(_sfc_main$r)
               ]),
               _: 1
             }),
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$y)
+                createVNode(_sfc_main$z)
               ]),
               _: 1
             }),
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$x)
+                createVNode(_sfc_main$y)
               ]),
               _: 1
             }),
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$w)
+                createVNode(_sfc_main$x)
               ]),
               _: 1
             }),
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$u)
+                createVNode(_sfc_main$v)
               ]),
               _: 1
             }),
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$v)
+                createVNode(_sfc_main$w)
               ]),
               _: 1
             }),
             createVNode(MenuListItem, null, {
               default: withCtx(() => [
-                createVNode(_sfc_main$r)
+                createVNode(_sfc_main$s)
               ]),
               _: 1
             })
           ]),
           _: 1
         }),
-        createBaseVNode("div", _hoisted_3$5, [
-          createVNode(_sfc_main$l, { class: "margin-small-right" }),
-          createVNode(_sfc_main$m)
+        createBaseVNode("div", _hoisted_2$9, [
+          createVNode(_sfc_main$m, { class: "margin-small-right" }),
+          createVNode(_sfc_main$n)
         ])
       ]);
     };
   }
 });
-var HeaderBar = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-2f031624"]]);
+var HeaderBar = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-1fab3a2c"]]);
 const _hoisted_1$h = ["innerHTML"];
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "PanelRowItem",
@@ -7631,7 +7641,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
 const _hoisted_1$g = /* @__PURE__ */ createTextVNode(" Select ");
 const _hoisted_2$8 = /* @__PURE__ */ createBaseVNode("h3", null, "Filter row", -1);
 const _hoisted_3$4 = { class: "list-none p-0" };
-const _hoisted_4$3 = ["value"];
+const _hoisted_4$4 = ["value"];
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "FilterRow",
   setup(__props) {
@@ -7660,7 +7670,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$t, {
+        createVNode(_sfc_main$u, {
           color: "primary",
           size: "medium",
           onClick: _cache[0] || (_cache[0] = ($event) => isModalVisible.value = true)
@@ -7670,7 +7680,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }),
-        isModalVisible.value ? (openBlock(), createBlock(_sfc_main$s, {
+        isModalVisible.value ? (openBlock(), createBlock(_sfc_main$t, {
           key: 0,
           onClose: _cache[2] || (_cache[2] = ($event) => isModalVisible.value = false)
         }, {
@@ -7688,7 +7698,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                       "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(rowIds) ? rowIds.value = $event : null),
                       value: row.rowId,
                       type: "checkbox"
-                    }, null, 8, _hoisted_4$3), [
+                    }, null, 8, _hoisted_4$4), [
                       [vModelCheckbox, unref(rowIds)]
                     ]),
                     createTextVNode(" " + toDisplayString(row.objectLabel), 1)
@@ -7848,8 +7858,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
 });
 var DescriptorModal_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".descriptor-modal{width:1000px;max-height:90vh;overflow-y:scroll}.descriptor-modal__depiction{display:flex;justify-content:center}\n")();
 const _hoisted_1$b = { key: 0 };
-const _hoisted_2$5 = { class: "descriptor-modal__depiction" };
-const _hoisted_3$3 = /* @__PURE__ */ createBaseVNode("hr", null, null, -1);
+const _hoisted_2$5 = { key: 1 };
+const _hoisted_3$3 = { class: "descriptor-modal__depiction" };
+const _hoisted_4$3 = /* @__PURE__ */ createBaseVNode("hr", null, null, -1);
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "DescriptorModal",
   props: {
@@ -7857,13 +7868,13 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$s, { "container-class": "descriptor-modal" }, {
+      return openBlock(), createBlock(_sfc_main$t, { "container-class": "descriptor-modal" }, {
         header: withCtx(() => [
           createBaseVNode("h3", null, toDisplayString(__props.descriptor.name), 1),
-          __props.descriptor.description ? (openBlock(), createElementBlock("span", _hoisted_1$b, toDisplayString(__props.descriptor.description), 1)) : createCommentVNode("", true)
+          __props.descriptor.description ? (openBlock(), createElementBlock("span", _hoisted_1$b, toDisplayString(__props.descriptor.description), 1)) : (openBlock(), createElementBlock("i", _hoisted_2$5, " No further description available. "))
         ]),
         body: withCtx(() => [
-          createBaseVNode("div", _hoisted_2$5, [
+          createBaseVNode("div", _hoisted_3$3, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.descriptor.depictionIds, (depictionId) => {
               return openBlock(), createBlock(_sfc_main$f, {
                 key: depictionId,
@@ -7871,7 +7882,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               }, null, 8, ["depiction-id"]);
             }), 128))
           ]),
-          _hoisted_3$3,
+          _hoisted_4$3,
           __props.descriptor.type === unref(descriptorTypes).Qualitative ? (openBlock(), createBlock(_sfc_main$d, {
             key: 0,
             descriptor: __props.descriptor
@@ -7928,10 +7939,16 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const useStore = useFilterStore();
     const fieldValue = ref(String(useStore.getDescriptorValueById(props.descriptor.descriptorId)));
     const setDescriptorValue = () => {
-      useStore.setDescriptor({
-        descriptorId: props.descriptor.descriptorId,
-        value: fieldValue.value
-      });
+      const { descriptorId } = props.descriptor;
+      const value = fieldValue.value.trim();
+      if (value) {
+        useStore.setDescriptor({
+          descriptorId,
+          value
+        });
+      } else {
+        useStore.removeDescriptor(descriptorId);
+      }
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$b, { descriptor: __props.descriptor }, {
@@ -8064,10 +8081,16 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const useStore = useFilterStore();
     const fieldValue = ref(String(useStore.getDescriptorValueById(props.descriptor.descriptorId)));
     const setDescriptorValue = () => {
-      useStore.setDescriptor({
-        descriptorId: props.descriptor.descriptorId,
-        value: fieldValue.value
-      });
+      const { descriptorId } = props.descriptor;
+      const value = fieldValue.value.trim();
+      if (value) {
+        useStore.setDescriptor({
+          descriptorId,
+          value
+        });
+      } else {
+        useStore.removeDescriptor(descriptorId);
+      }
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$b, { descriptor: __props.descriptor }, {
@@ -8351,19 +8374,17 @@ const __default__ = {
 };
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
   props: {
-    observationMatrixId: { default: 1 },
+    observationMatrixId: null,
     apiConfig: null
   },
   setup(__props) {
     const props = __props;
     const settingStore = useSettingsStore();
     const filterStore = useFilterStore();
-    useObservationMatrixStore();
     const isLoading = computed(() => settingStore.getIsLoading);
     const gridLayout = computed(() => settingStore.getLayout);
     const initialize = () => {
-      const api = useAPIConfig();
-      api.updatePreferences(props.apiConfig);
+      settingStore.setAPIConfig(props.apiConfig);
       settingStore.setObservationMatrixId(props.observationMatrixId);
       settingStore.checkUpdate();
     };
@@ -8396,7 +8417,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     };
   }
 }));
-var main = /* @__PURE__ */ (() => ":root{--bg-color: #f7f8fc;--bg-panel-color: #FFFFFF;--primary-color: #5D9ECE;--border-color: #CCCCCC;--link-color: #5D9ECE;--btn-medium-size: 28px}.d-block{display:block}.d-flex{display:flex}.justify-between{justify-content:space-between}.align-center{align-items:center}.w-100{height:100%}.margin-medium-bottom{margin-bottom:1em}.margin-small-right{margin-right:.5em}.p-0{padding:0}.link{color:var(--link-color);cursor:pointer}.list-none{list-style:none}body{background-color:var(--bg-color)}.vue-interactive-keys{height:calc(100vh - 160px);max-height:calc(100vh - 160px);font-family:Arial,Helvetica,sans-serif;font-size:13px}.vue-interactive-keys .grid-panel{background-color:#fff;padding:1rem;overflow-y:scroll}.vue-interactive-keys .layout-mode-1 .panel-descriptors{grid-area:1/1/2/3}.vue-interactive-keys .layout-mode-1 .panel-remaining{grid-area:2/1/3/2}.vue-interactive-keys .layout-mode-1 .panel-eliminated{grid-area:2/2/3/3}.vue-interactive-keys .layout-mode-2 .panel-descriptors{grid-area:1/1/3/2}.vue-interactive-keys .layout-mode-2 .panel-remaining{grid-area:1/2/2/3}.vue-interactive-keys .layout-mode-2 .panel-eliminated{grid-area:2/2/3/3}.vue-interactive-keys input,.vue-interactive-keys select{padding:.5em 1em;border:1px solid;border-radius:2px;border-color:var(--border-color);background-color:#fff}\n")();
+var main = /* @__PURE__ */ (() => ":root{--bg-color: #f7f8fc;--bg-panel-color: #FFFFFF;--bg-disabled-color: #e5e5e5;--disabled-color: #999;--error-color: #FF0000;--primary-color: #5D9ECE;--border-color: #CCCCCC;--link-color: #5D9ECE;--btn-medium-size: 28px}.d-block{display:block}.d-flex{display:flex}.justify-between{justify-content:space-between}.align-center{align-items:center}.w-100{height:100%}.margin-medium-bottom{margin-bottom:1em}.margin-small-right{margin-right:.5em}.p-0{padding:0}.link{color:var(--link-color);cursor:pointer}.list-none{list-style:none}body{background-color:var(--bg-color)}.vue-interactive-keys{height:calc(100vh - 160px);max-height:calc(100vh - 160px);font-family:Arial,Helvetica,sans-serif;font-size:13px}.vue-interactive-keys .grid-panel{background-color:#fff;padding:1rem;overflow-y:scroll}.vue-interactive-keys .layout-mode-1 .panel-descriptors{grid-area:1/1/2/3}.vue-interactive-keys .layout-mode-1 .panel-remaining{grid-area:2/1/3/2}.vue-interactive-keys .layout-mode-1 .panel-eliminated{grid-area:2/2/3/3}.vue-interactive-keys .layout-mode-2 .panel-descriptors{grid-area:1/1/3/2}.vue-interactive-keys .layout-mode-2 .panel-remaining{grid-area:1/2/2/3}.vue-interactive-keys .layout-mode-2 .panel-eliminated{grid-area:2/2/3/3}.vue-interactive-keys input,.vue-interactive-keys select{padding:.5em 1em;border:1px solid;border-radius:2px;border-color:var(--border-color);background-color:#fff}.vue-interactive-keys .error-message{color:var(--error-color)}\n")();
 function discoverInteractiveKey(selector) {
   const tag = selector || '[data-interactive-key="true"]';
   const elements = document.querySelectorAll(tag);