@vue-skuilder/common-ui 0.1.4 → 0.1.6

package/dist/common-ui.es.js

@@ -1,11 +1,12 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { defineComponent, createElementBlock, openBlock, createCommentVNode, Fragment, renderList, normalizeStyle, toDisplayString, resolveComponent, createBlock, withCtx, createVNode, createTextVNode, createElementVNode, mergeProps, ref, computed, watch, onMounted, onBeforeUnmount, normalizeClass, renderSlot, Transition, resolveDynamicComponent, defineAsyncComponent, withKeys, withDirectives, vModelText, getCurrentInstance, h, markRaw, withModifiers } from "vue";
+import { defineComponent, createElementBlock, openBlock, createCommentVNode, Fragment, renderList, normalizeStyle, toDisplayString, resolveComponent, createBlock, withCtx, createVNode, createTextVNode, createElementVNode, mergeProps, ref, computed, watch, onMounted, onBeforeUnmount, normalizeClass, renderSlot, Transition, resolveDynamicComponent, markRaw, defineAsyncComponent, withKeys, withDirectives, vModelText, getCurrentInstance, h, withModifiers, vShow } from "vue";
 import { Status, FieldType, isCourseElo, toCourseElo, displayableDataToViewData, adjustCourseScores, log } from "@vue-skuilder/common";
 import { docIsDeleted, isReview, newInterval, isQuestionRecord, getStudySource, SessionController, getDataLayer, GuestUsername } from "@vue-skuilder/db";
 import { defineStore, setActivePinia } from "pinia";
 import { useRouter, useRoute } from "vue-router";
+import { VueTagsInput } from "@vojtechlanka/vue-tags-input";
 //! moment.js
 //! version : 2.30.1
 //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
@@ -4000,7 +4001,7 @@ hooks.HTML5_FMT = {
   MONTH: "YYYY-MM"
   // <input type="month" />
 };
-const _sfc_main$l = defineComponent({
+const _sfc_main$q = defineComponent({
   name: "HeatMap",
   props: {
     // Accept activity records directly as a prop
@@ -4245,10 +4246,10 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1$b = ["width", "height"];
-const _hoisted_2$4 = ["transform"];
-const _hoisted_3$2 = ["y", "width", "height", "fill", "onMouseover"];
-function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$f = ["width", "height"];
+const _hoisted_2$7 = ["transform"];
+const _hoisted_3$5 = ["y", "width", "height", "fill", "onMouseover"];
+function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", null, [
     (openBlock(), createElementBlock("svg", {
       width: _ctx.width,
@@ -4269,11 +4270,11 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
               fill: _ctx.getColor(day.count),
               onMouseover: ($event) => _ctx.showTooltip(day, $event),
               onMouseout: _cache[0] || (_cache[0] = (...args) => _ctx.hideTooltip && _ctx.hideTooltip(...args))
-            }, null, 40, _hoisted_3$2);
+            }, null, 40, _hoisted_3$5);
           }), 128))
-        ], 8, _hoisted_2$4);
+        ], 8, _hoisted_2$7);
       }), 128))
-    ], 8, _hoisted_1$b)),
+    ], 8, _hoisted_1$f)),
     _ctx.tooltipData ? (openBlock(), createElementBlock("div", {
       key: 0,
       class: "tooltip",
@@ -4281,7 +4282,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     }, toDisplayString(_ctx.tooltipData.count) + " review" + toDisplayString(_ctx.tooltipData.count !== 1 ? "s" : "") + " on " + toDisplayString(_ctx.toDateString(_ctx.tooltipData.date)), 5)) : createCommentVNode("", true)
   ]);
 }
-const HeatMap = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$h], ["__scopeId", "data-v-ca46239a"]]);
+const HeatMap = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$k], ["__scopeId", "data-v-ca46239a"]]);
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -4861,7 +4862,7 @@ const _SkldrMouseTrap = class _SkldrMouseTrap {
 };
 __publicField(_SkldrMouseTrap, "_instance");
 let SkldrMouseTrap = _SkldrMouseTrap;
-const _sfc_main$k = defineComponent({
+const _sfc_main$p = defineComponent({
   name: "SkMouseTrap",
   props: {
     refreshInterval: {
@@ -4891,8 +4892,8 @@ const _sfc_main$k = defineComponent({
     }
   }
 });
-const _hoisted_1$a = { class: "text-caption ml-2" };
-function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$e = { class: "text-caption ml-2" };
+function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_icon = resolveComponent("v-icon");
   const _component_v_btn = resolveComponent("v-btn");
   const _component_v_toolbar_title = resolveComponent("v-toolbar-title");
@@ -4961,7 +4962,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
                       _: 2
                     }, 1024),
                     createVNode(_component_v_spacer),
-                    createElementVNode("span", _hoisted_1$a, toDisplayString(hk.command), 1)
+                    createElementVNode("span", _hoisted_1$e, toDisplayString(hk.command), 1)
                   ]),
                   _: 2
                 }, 1024);
@@ -4976,8 +4977,8 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   })) : createCommentVNode("", true);
 }
-const SkMouseTrap = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$g]]);
-const _sfc_main$j = defineComponent({
+const SkMouseTrap = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$j]]);
+const _sfc_main$o = defineComponent({
   name: "SkMouseTrapToolTip",
   props: {
     hotkey: {
@@ -5126,7 +5127,7 @@ const _sfc_main$j = defineComponent({
     };
   }
 });
-function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["sk-mousetrap-tooltip-wrapper", [
       _ctx.isControlKeyPressed && !_ctx.disabled && _ctx.highlightEffect !== "none" ? `sk-mousetrap-highlight-${_ctx.highlightEffect}` : ""
@@ -5150,7 +5151,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     })
   ], 2);
 }
-const SkMouseTrapToolTip = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$f], ["__scopeId", "data-v-5d6fb09c"]]);
+const SkMouseTrapToolTip = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$i], ["__scopeId", "data-v-5d6fb09c"]]);
 const SnackbarServiceModule = /* @__PURE__ */ (() => {
   let _instance = null;
   return {
@@ -5174,7 +5175,7 @@ const SnackbarServiceModule = /* @__PURE__ */ (() => {
   };
 })();
 const { setInstance, alertUser } = SnackbarServiceModule;
-const SnackbarService$1 = defineComponent({
+const _sfc_main$n = defineComponent({
   name: "SnackbarService",
   data() {
     return {
@@ -5212,8 +5213,8 @@ const SnackbarService$1 = defineComponent({
     }
   }
 });
-const _hoisted_1$9 = { class: "d-flex align-center justify-space-between w-100" };
-function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$d = { class: "d-flex align-center justify-space-between w-100" };
+function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_icon = resolveComponent("v-icon");
   const _component_v_btn = resolveComponent("v-btn");
   const _component_v_snackbar = resolveComponent("v-snackbar");
@@ -5228,7 +5229,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
         color: _ctx.getColor(snack)
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$9, [
+          createElementVNode("div", _hoisted_1$d, [
             createElementVNode("span", null, toDisplayString(snack.text), 1),
             createVNode(_component_v_btn, {
               icon: "",
@@ -5252,8 +5253,8 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ]);
 }
-const SnackbarService = /* @__PURE__ */ _export_sfc(SnackbarService$1, [["render", _sfc_render$e]]);
-const _sfc_main$i = defineComponent({
+const SnackbarService = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$h]]);
+const _sfc_main$m = defineComponent({
   name: "PaginatingToolbar",
   props: {
     pages: {
@@ -5277,11 +5278,12 @@ const _sfc_main$i = defineComponent({
   },
   emits: ["first", "prev", "next", "last", "set-page"]
 });
-const _hoisted_1$8 = {
+const _hoisted_1$c = {
   key: 0,
-  class: "ms-2 text-subtitle-2"
+  class: "ms-2 text-subtitle-2",
+  "data-cy": "paginating-toolbar-subtitle"
 };
-function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_toolbar_title = resolveComponent("v-toolbar-title");
   const _component_v_spacer = resolveComponent("v-spacer");
   const _component_v_icon = resolveComponent("v-icon");
@@ -5293,7 +5295,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_v_toolbar_title, null, {
         default: withCtx(() => [
           createElementVNode("span", null, toDisplayString(_ctx.title), 1),
-          _ctx.subtitle ? (openBlock(), createElementBlock("span", _hoisted_1$8, toDisplayString(_ctx.subtitle), 1)) : createCommentVNode("", true)
+          _ctx.subtitle ? (openBlock(), createElementBlock("span", _hoisted_1$c, toDisplayString(_ctx.subtitle), 1)) : createCommentVNode("", true)
         ]),
         _: 1
       }),
@@ -5385,7 +5387,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const PaginatingToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$d], ["__scopeId", "data-v-39413af8"]]);
+const PaginatingToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$g], ["__scopeId", "data-v-a75fea7e"]]);
 function useViewable(props, emit, componentName) {
   const startTime = ref(hooks.utc());
   const hotKeys = ref([]);
@@ -5554,7 +5556,7 @@ class Question extends Displayable {
     with 7 * 4 = 21
     */
 }
-const _sfc_main$h = defineComponent({
+const _sfc_main$l = defineComponent({
   name: "StudySessionTimer",
   props: {
     /**
@@ -5608,7 +5610,7 @@ const _sfc_main$h = defineComponent({
     };
   }
 });
-function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_icon = resolveComponent("v-icon");
   const _component_v_btn = resolveComponent("v-btn");
   const _component_v_progress_circular = resolveComponent("v-progress-circular");
@@ -5662,8 +5664,8 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const StudySessionTimer = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$c], ["__scopeId", "data-v-5960940a"]]);
-const _sfc_main$g = defineComponent({
+const StudySessionTimer = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$f], ["__scopeId", "data-v-5960940a"]]);
+const _sfc_main$k = defineComponent({
   name: "CardViewer",
   ref: {},
   props: {
@@ -5717,7 +5719,7 @@ const _sfc_main$g = defineComponent({
     }
   }
 });
-function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_card = resolveComponent("v-card");
   return openBlock(), createBlock(_component_v_card, { elevation: "12" }, {
     default: withCtx(() => [
@@ -5741,7 +5743,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const CardViewer = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$b], ["__scopeId", "data-v-a180fe1c"]]);
+const CardViewer = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$e], ["__scopeId", "data-v-a180fe1c"]]);
 var module$1 = {};
 (function main(global, module2, isWorker, workerSize) {
   var canUseWorker = !!(global.Worker && global.Blob && global.Promise && global.OffscreenCanvas && global.OffscreenCanvasRenderingContext2D && global.HTMLCanvasElement && global.HTMLCanvasElement.prototype.transferControlToOffscreen && global.URL && global.URL.createObjectURL);
@@ -6438,7 +6440,7 @@ var module$1 = {};
 }(), module$1, false);
 const confetti = module$1.exports;
 module$1.exports.create;
-const _sfc_main$f = defineComponent({
+const _sfc_main$j = defineComponent({
   name: "StudySession",
   ref: {},
   components: {
@@ -6582,23 +6584,25 @@ const _sfc_main$f = defineComponent({
       try {
         console.log(`[StudySession] starting study session w/ sources: ${JSON.stringify(this.contentSources)}`);
         console.log("[StudySession] Beginning preparation process");
-        this.sessionContentSources = (await Promise.all(
-          this.contentSources.map(async (s) => {
-            try {
-              return await getStudySource(s, this.user);
-            } catch (e) {
-              console.error(`Failed to load study source: ${s.type}/${s.id}`, e);
-              return null;
-            }
-          })
-        )).filter((s) => s !== null);
+        this.sessionContentSources = markRaw(
+          (await Promise.all(
+            this.contentSources.map(async (s) => {
+              try {
+                return await getStudySource(s, this.user);
+              } catch (e) {
+                console.error(`Failed to load study source: ${s.type}/${s.id}`, e);
+                return null;
+              }
+            })
+          )).filter((s) => s !== null)
+        );
         this.timeRemaining = this.sessionTimeLimit * 60;
         sessionClassroomDBs = await Promise.all(
           this.contentSources.filter((s) => s.type === "classroom").map(async (c) => await this.dataLayer.getClassroomDB(c.id, "student"))
         );
-        sessionClassroomDBs.forEach((db) => {
+        sessionClassroomDBs.forEach((_db) => {
         });
-        this.sessionController = new SessionController(this.sessionContentSources, 60 * this.sessionTimeLimit);
+        this.sessionController = markRaw(new SessionController(this.sessionContentSources, 60 * this.sessionTimeLimit));
         this.sessionController.sessionRecord = this.sessionRecord;
         await this.sessionController.prepareSession();
         this.intervalHandler = setInterval(this.tick, 1e3);
@@ -6728,12 +6732,15 @@ const _sfc_main$f = defineComponent({
       if (cardElo && userElo) {
         const eloUpdate = adjustCourseScores(userElo, cardElo, userScore);
         this.userCourseRegDoc.courses.find((c) => c.courseID === course_id).elo = eloUpdate.userElo;
-        Promise.all([
+        const results = await Promise.allSettled([
           this.user.updateUserElo(course_id, eloUpdate.userElo),
           courseDB.updateCardElo(card_id, eloUpdate.cardElo)
-        ]).then((results) => {
-          const user = results[0];
-          const card = results[1];
+        ]);
+        const userEloStatus = results[0].status === "fulfilled";
+        const cardEloStatus = results[1].status === "fulfilled";
+        if (userEloStatus && cardEloStatus) {
+          const user = results[0].value;
+          const card = results[1].value;
           if (user.ok && card && card.ok) {
             console.log(
               `[StudySession] Updated ELOS:
@@ -6742,7 +6749,19 @@ const _sfc_main$f = defineComponent({
               `
             );
           }
-        });
+        } else {
+          console.log(
+            `[StudySession] Partial ELO update:
+            	User ELO update: ${userEloStatus ? "SUCCESS" : "FAILED"}
+            	Card ELO update: ${cardEloStatus ? "SUCCESS" : "FAILED"}`
+          );
+          if (!userEloStatus && results[0].status === "rejected") {
+            console.error("[StudySession] User ELO update error:", results[0].reason);
+          }
+          if (!cardEloStatus && results[1].status === "rejected") {
+            console.error("[StudySession] Card ELO update error:", results[1].reason);
+          }
+        }
       }
     },
     clearFeedbackShadow() {
@@ -6844,22 +6863,22 @@ const _sfc_main$f = defineComponent({
     }
   }
 });
-const _hoisted_1$7 = {
+const _hoisted_1$b = {
   key: 0,
   class: "StudySession"
 };
-const _hoisted_2$3 = { class: "text-h3" };
-const _hoisted_3$1 = {
+const _hoisted_2$6 = { class: "text-h3" };
+const _hoisted_3$4 = {
   key: 0,
   class: "text-h4"
 };
-const _hoisted_4$1 = { key: 0 };
-const _hoisted_5$1 = {
+const _hoisted_4$3 = { key: 0 };
+const _hoisted_5$3 = {
   key: 1,
   ref: "shadowWrapper"
 };
 const _hoisted_6$1 = { key: 2 };
-function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_progress_circular = resolveComponent("v-progress-circular");
   const _component_v_spacer = resolveComponent("v-spacer");
   const _component_v_col = resolveComponent("v-col");
@@ -6869,12 +6888,12 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_card_viewer = resolveComponent("card-viewer");
   const _component_StudySessionTimer = resolveComponent("StudySessionTimer");
   const _component_SkMouseTrap = resolveComponent("SkMouseTrap");
-  return _ctx.sessionPrepared ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
+  return _ctx.sessionPrepared ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
     createVNode(_component_v_row, { align: "center" }, {
       default: withCtx(() => [
         createVNode(_component_v_col, null, {
           default: withCtx(() => [
-            createElementVNode("h1", _hoisted_2$3, [
+            createElementVNode("h1", _hoisted_2$6, [
               createTextVNode(toDisplayString(_ctx.courseNames[_ctx.courseID]) + ": ", 1),
               _ctx.loading ? (openBlock(), createBlock(_component_v_progress_circular, {
                 key: 0,
@@ -6892,9 +6911,9 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
       _: 1
     }),
     _cache[7] || (_cache[7] = createElementVNode("br", null, null, -1)),
-    _ctx.sessionFinished ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+    _ctx.sessionFinished ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
       _cache[6] || (_cache[6] = createElementVNode("p", null, "Study session finished! Great job!", -1)),
-      _ctx.sessionController ? (openBlock(), createElementBlock("p", _hoisted_4$1, toDisplayString(_ctx.sessionController.report), 1)) : createCommentVNode("", true),
+      _ctx.sessionController ? (openBlock(), createElementBlock("p", _hoisted_4$3, toDisplayString(_ctx.sessionController.report), 1)) : createCommentVNode("", true),
       createElementVNode("p", null, [
         _cache[3] || (_cache[3] = createTextVNode(" Start ")),
         createElementVNode("a", {
@@ -6914,7 +6933,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_heat_map, {
         "activity-records-getter": () => _ctx.user.getActivityRecords()
       }, null, 8, ["activity-records-getter"])
-    ])) : (openBlock(), createElementBlock("div", _hoisted_5$1, [
+    ])) : (openBlock(), createElementBlock("div", _hoisted_5$3, [
       createVNode(_component_card_viewer, {
         ref: "cardViewer",
         class: normalizeClass(_ctx.loading ? "muted" : ""),
@@ -6970,7 +6989,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     })
   ])) : createCommentVNode("", true);
 }
-const StudySession = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$a], ["__scopeId", "data-v-70e29902"]]);
+const StudySession = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d], ["__scopeId", "data-v-37cad857"]]);
 let _pinia = null;
 const setPinia = (pinia) => {
   _pinia = pinia;
@@ -6979,7 +6998,7 @@ const getPinia = () => {
   return _pinia;
 };
 const piniaPlugin = {
-  install(app, options) {
+  install(_app, options) {
     const pinia = options?.pinia;
     if (pinia) {
       setPinia(pinia);
@@ -7065,7 +7084,7 @@ Exceeded maximum ancestor lookup depth.`;
     }
   }
 });
-const _sfc_main$e = defineComponent({
+const _sfc_main$i = defineComponent({
   name: "MultipleChoiceOption",
   components: {
     MarkdownRenderer: defineAsyncComponent(() => Promise.resolve().then(() => MarkdownRenderer$1))
@@ -7151,7 +7170,7 @@ const _sfc_main$e = defineComponent({
     }
   }
 });
-function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_markdown_renderer = resolveComponent("markdown-renderer");
   const _component_v_card = resolveComponent("v-card");
   return openBlock(), createBlock(_component_v_card, {
@@ -7165,8 +7184,8 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["class", "onMouseover", "onClick"]);
 }
-const MultipleChoiceOption = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$9], ["__scopeId", "data-v-96de7172"]]);
-const _sfc_main$d = defineComponent({
+const MultipleChoiceOption = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$c], ["__scopeId", "data-v-96de7172"]]);
+const _sfc_main$h = defineComponent({
   name: "RadioMultipleChoice",
   components: {
     MultipleChoiceOption
@@ -7305,13 +7324,13 @@ const _sfc_main$d = defineComponent({
     // },
   }
 });
-const _hoisted_1$6 = {
+const _hoisted_1$a = {
   ref: "containerRef",
   class: "multipleChoice"
 };
-function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_MultipleChoiceOption = resolveComponent("MultipleChoiceOption");
-  return openBlock(), createElementBlock("div", _hoisted_1$6, [
+  return openBlock(), createElementBlock("div", _hoisted_1$a, [
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.choiceList, (choice, i) => {
       return openBlock(), createBlock(_component_MultipleChoiceOption, {
         key: i,
@@ -7325,8 +7344,8 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ], 512);
 }
-const RadioMultipleChoice = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$8]]);
-const _sfc_main$c = defineComponent({
+const RadioMultipleChoice = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$b]]);
+const _sfc_main$g = defineComponent({
   name: "TrueFalse",
   components: {
     RadioMultipleChoice
@@ -7342,10 +7361,10 @@ const _sfc_main$c = defineComponent({
     }
   }
 });
-const _hoisted_1$5 = { "data-viewable": "TrueFalse" };
-function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$9 = { "data-viewable": "TrueFalse" };
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_RadioMultipleChoice = resolveComponent("RadioMultipleChoice");
-  return openBlock(), createElementBlock("div", _hoisted_1$5, [
+  return openBlock(), createElementBlock("div", _hoisted_1$9, [
     createVNode(_component_RadioMultipleChoice, {
       "choice-list": ["True", "False"],
       MouseTrap: _ctx.MouseTrap,
@@ -7353,8 +7372,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["MouseTrap", "submit"])
   ]);
 }
-const TrueFalse = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$7]]);
-const _sfc_main$b = defineComponent({
+const TrueFalse = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$a]]);
+const _sfc_main$f = defineComponent({
   name: "UserInputNumber",
   ref: {},
   extends: UserInput,
@@ -7374,7 +7393,7 @@ const _sfc_main$b = defineComponent({
     }
   }
 });
-function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_text_field = resolveComponent("v-text-field");
   const _component_v_container = resolveComponent("v-container");
   return openBlock(), createBlock(_component_v_container, { class: "pa-0" }, {
@@ -7395,8 +7414,8 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const UserInputNumber = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$6], ["__scopeId", "data-v-a56dcd1c"]]);
-const _sfc_main$a = defineComponent({
+const UserInputNumber = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$9], ["__scopeId", "data-v-a56dcd1c"]]);
+const _sfc_main$e = defineComponent({
   name: "UserInputString",
   extends: UserInput,
   props: {
@@ -7433,10 +7452,10 @@ const _sfc_main$a = defineComponent({
     // },
   }
 });
-const _hoisted_1$4 = { class: "user-input-container" };
-const _hoisted_2$2 = ["autofocus"];
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", _hoisted_1$4, [
+const _hoisted_1$8 = { class: "user-input-container" };
+const _hoisted_2$5 = ["autofocus"];
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", _hoisted_1$8, [
     withDirectives(createElementVNode("input", {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.answer = $event),
       autofocus: _ctx.autofocus,
@@ -7444,13 +7463,13 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
       class: "user-input-string",
       ref: "input",
       onKeyup: _cache[1] || (_cache[1] = withKeys(($event) => _ctx.submitAnswer(_ctx.answer), ["enter"]))
-    }, null, 40, _hoisted_2$2), [
+    }, null, 40, _hoisted_2$5), [
       [vModelText, _ctx.answer]
     ])
   ]);
 }
-const UserInputString = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$5], ["__scopeId", "data-v-aa14961f"]]);
-const _sfc_main$9 = defineComponent({
+const UserInputString = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$8], ["__scopeId", "data-v-aa14961f"]]);
+const _sfc_main$d = defineComponent({
   name: "FillInInput",
   components: {
     UserInputString
@@ -7483,13 +7502,13 @@ const _sfc_main$9 = defineComponent({
     };
   }
 });
-const _hoisted_1$3 = {
+const _hoisted_1$7 = {
   key: 0,
   class: "text-h5 underline"
 };
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_user_input_string = resolveComponent("user-input-string");
-  return _ctx.radioType ? (openBlock(), createElementBlock("span", _hoisted_1$3, "             ")) : (openBlock(), createBlock(_component_user_input_string, {
+  return _ctx.radioType ? (openBlock(), createElementBlock("span", _hoisted_1$7, "             ")) : (openBlock(), createBlock(_component_user_input_string, {
     key: 1,
     id: "input",
     icon: false,
@@ -7497,8 +7516,8 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     value: _ctx.processedText
   }, null, 8, ["value"]));
 }
-const FillInInput = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$4], ["__scopeId", "data-v-486ac035"]]);
-const _sfc_main$8 = defineComponent({
+const FillInInput = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$7], ["__scopeId", "data-v-486ac035"]]);
+const _sfc_main$c = defineComponent({
   name: "CardLoader",
   components: {
     CardViewer
@@ -7572,7 +7591,7 @@ const _sfc_main$8 = defineComponent({
     }
   }
 });
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_card_viewer = resolveComponent("card-viewer");
   return !_ctx.loading ? (openBlock(), createBlock(_component_card_viewer, {
     key: 0,
@@ -7585,7 +7604,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     onEmitResponse: _cache[0] || (_cache[0] = ($event) => _ctx.processResponse($event))
   }, null, 8, ["class", "view", "data", "card_id", "course_id", "session-order"])) : createCommentVNode("", true);
 }
-const CardLoader = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$3], ["__scopeId", "data-v-9ca53bc4"]]);
+const CardLoader = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$6], ["__scopeId", "data-v-9ca53bc4"]]);
 function _getDefaults() {
   return {
     async: false,
@@ -9732,7 +9751,7 @@ function splitTextToken(token2) {
     const textChunks = splitByDelimiters(token2.text, "{{", "}}");
     const rawChunks = splitByDelimiters(token2.raw, "{{", "}}");
     if (textChunks.length === rawChunks.length) {
-      return textChunks.map((c, i) => {
+      return textChunks.map((_c, i) => {
         return {
           type: "text",
           text: textChunks[i],
@@ -9796,7 +9815,7 @@ function isComponent(token2) {
   return token2.type === "text" && token2.text.startsWith("{{") && token2.text.endsWith("}}");
 }
 const playbackGap = 500;
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "AudioAutoPlayer",
   props: {
     src: {}
@@ -9907,7 +9926,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AudioAutoPlayer = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-e1a0f62c"]]);
+const AudioAutoPlayer = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-e1a0f62c"]]);
 var core;
 var hasRequiredCore;
 function requireCore() {
@@ -15140,12 +15159,12 @@ function python(hljs) {
     ]
   };
 }
-const _hoisted_1$2 = { class: "code-block-wrapper pa-2" };
-const _hoisted_2$1 = {
+const _hoisted_1$6 = { class: "code-block-wrapper pa-2" };
+const _hoisted_2$4 = {
   key: 0,
   class: "language-indicator"
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "CodeBlockRenderer",
   props: {
     code: {
@@ -15176,8 +15195,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       const _component_highlightjs = resolveComponent("highlightjs");
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        __props.language ? (openBlock(), createElementBlock("div", _hoisted_2$1, toDisplayString(__props.language), 1)) : createCommentVNode("", true),
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+        __props.language ? (openBlock(), createElementBlock("div", _hoisted_2$4, toDisplayString(__props.language), 1)) : createCommentVNode("", true),
         createVNode(_component_highlightjs, {
           language: __props.language,
           code: __props.code
@@ -15186,11 +15205,11 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = { key: 0 };
-const _hoisted_2 = { key: 0 };
-const _hoisted_3 = { key: 0 };
-const _hoisted_4 = { key: 1 };
-const _hoisted_5 = { key: 2 };
+const _hoisted_1$5 = { key: 0 };
+const _hoisted_2$3 = { key: 0 };
+const _hoisted_3$3 = { key: 0 };
+const _hoisted_4$2 = { key: 1 };
+const _hoisted_5$2 = { key: 2 };
 const _hoisted_6 = { key: 1 };
 const _hoisted_7 = { key: 1 };
 const _hoisted_8 = {
@@ -15228,7 +15247,7 @@ const _hoisted_27 = ["innerHTML"];
 const _hoisted_28 = { key: 16 };
 const _hoisted_29 = { key: 17 };
 const _hoisted_30 = { key: 18 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "MdTokenRenderer",
   props: {
     token: {
@@ -15295,21 +15314,21 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_md_token_renderer = resolveComponent("md-token-renderer", true);
-      return isText(__props.token) ? (openBlock(), createElementBlock("span", _hoisted_1$1, [
-        !__props.token.tokens || __props.token.tokens.length === 0 ? (openBlock(), createElementBlock("span", _hoisted_2, [
-          isComponent$1(__props.token) ? (openBlock(), createElementBlock("span", _hoisted_3, [
+      return isText(__props.token) ? (openBlock(), createElementBlock("span", _hoisted_1$5, [
+        !__props.token.tokens || __props.token.tokens.length === 0 ? (openBlock(), createElementBlock("span", _hoisted_2$3, [
+          isComponent$1(__props.token) ? (openBlock(), createElementBlock("span", _hoisted_3$3, [
             !__props.last ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(parsedComponent(__props.token).is)), {
               key: 0,
               text: parsedComponent(__props.token).text
             }, null, 8, ["text"])) : createCommentVNode("", true)
-          ])) : containsComponent$1(__props.token) ? (openBlock(), createElementBlock("span", _hoisted_4, [
+          ])) : containsComponent$1(__props.token) ? (openBlock(), createElementBlock("span", _hoisted_4$2, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(splitTextToken$1(__props.token), (subTok, j) => {
               return openBlock(), createBlock(_component_md_token_renderer, {
                 key: j,
                 token: subTok
               }, null, 8, ["token"]);
             }), 128))
-          ])) : (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(decodeBasicEntities(__props.token.text)), 1))
+          ])) : (openBlock(), createElementBlock("span", _hoisted_5$2, toDisplayString(decodeBasicEntities(__props.token.text)), 1))
         ])) : __props.token.tokens && __props.token.tokens.length !== 0 ? (openBlock(), createElementBlock("span", _hoisted_6, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.token.tokens, (subTok, j) => {
             return openBlock(), createBlock(_component_md_token_renderer, {
@@ -15442,7 +15461,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       ], 8, _hoisted_25)) : __props.token.type === "html" ? (openBlock(), createElementBlock("span", {
         key: 13,
         innerHTML: __props.token.raw
-      }, null, 8, _hoisted_26)) : __props.token.type === "code" ? (openBlock(), createBlock(_sfc_main$6, {
+      }, null, 8, _hoisted_26)) : __props.token.type === "code" ? (openBlock(), createBlock(_sfc_main$a, {
         key: 14,
         code: __props.token.text,
         language: __props.token.lang
@@ -15468,8 +15487,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MdTokenRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-047d0fa4"]]);
-const _sfc_main$4 = defineComponent({
+const MdTokenRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-047d0fa4"]]);
+const _sfc_main$8 = defineComponent({
   name: "MarkdownRenderer",
   components: {
     MdTokenRenderer,
@@ -15487,7 +15506,7 @@ const _sfc_main$4 = defineComponent({
     }
   }
 });
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_md_token_renderer = resolveComponent("md-token-renderer");
   const _component_audio_auto_player = resolveComponent("audio-auto-player");
   return openBlock(), createElementBlock("div", null, [
@@ -15505,7 +15524,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ]);
 }
-const MarkdownRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$2]]);
+const MarkdownRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$5]]);
 const MarkdownRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: MarkdownRenderer
@@ -15557,6 +15576,22 @@ const useAuthStore = () => {
       },
       setRegDialog(open) {
         this.loginAndRegistration.regDialogOpen = open;
+      },
+      async resetUserData() {
+        try {
+          if (!this._user) {
+            throw new Error("No user available for data reset");
+          }
+          const result = await this._user.resetUserData();
+          if (result.status !== "ok") {
+            throw new Error(result.error || "Reset failed");
+          }
+          console.log("User data reset successfully");
+          return result;
+        } catch (error) {
+          console.error("Failed to reset user data:", error);
+          throw error;
+        }
       }
     },
     getters: {
@@ -15621,185 +15656,364 @@ const useConfigStore = () => {
     }
   })();
 };
-const _sfc_main$3 = defineComponent({
-  name: "UserChip",
-  data() {
-    return {
-      username: "",
-      items: [],
-      checked: false,
-      authStore: useAuthStore(),
-      configStore: useConfigStore()
-    };
-  },
-  computed: {
-    hasNewItems() {
-      return this.items.length > 0;
+function useAuthUI() {
+  const isLoading = ref(true);
+  const syncStrategyDetected = ref(false);
+  const isLocalOnlyMode = ref(false);
+  const config = computed(() => {
+    if (isLocalOnlyMode.value) {
+      return {
+        showLoginRegistration: false,
+        showLogout: false,
+        showResetData: true,
+        logoutLabel: "",
+        resetLabel: "Reset User Data"
+      };
+    } else {
+      return {
+        showLoginRegistration: true,
+        showLogout: true,
+        showResetData: false,
+        logoutLabel: "Log out",
+        resetLabel: ""
+      };
     }
-  },
-  created() {
-    getCurrentUser().then((u) => {
-      this.username = u.getUsername();
+  });
+  const detectSyncStrategy = async () => {
+    try {
+      isLoading.value = true;
+      const user = await getCurrentUser();
+      const userInternal = user;
+      const canCreateAccount = userInternal.syncStrategy?.canCreateAccount?.();
+      isLocalOnlyMode.value = !canCreateAccount;
+      syncStrategyDetected.value = true;
+    } catch (error) {
+      console.error("Failed to detect sync strategy:", error);
+      isLocalOnlyMode.value = false;
+      syncStrategyDetected.value = true;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  return {
+    config,
+    isLoading,
+    syncStrategyDetected,
+    isLocalOnlyMode,
+    detectSyncStrategy
+  };
+}
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "UserChip",
+  setup(__props) {
+    const router = useRouter();
+    const authStore = useAuthStore();
+    const configStore = useConfigStore();
+    const authUI = useAuthUI();
+    const username = ref("");
+    const items = ref([]);
+    const showResetDialog = ref(false);
+    const confirmationText = ref("");
+    const isConfirmationValid = computed(() => confirmationText.value === "reset");
+    const resetDialogState = () => {
+      confirmationText.value = "";
+      showResetDialog.value = false;
+    };
+    const hasNewItems = computed(() => items.value.length > 0);
+    const authUIConfig = computed(() => {
+      const configValue = authUI.config.value;
+      const fallback = {
+        showLoginRegistration: true,
+        showLogout: true,
+        showResetData: false,
+        logoutLabel: "Log out",
+        resetLabel: ""
+      };
+      return configValue || fallback;
     });
-  },
-  methods: {
-    async gotoSettings() {
-      this.$router.push(`/u/${(await getCurrentUser()).getUsername()}`);
-    },
-    async gotoStats() {
-      this.$router.push(`/u/${(await getCurrentUser()).getUsername()}/stats`);
-    },
-    dismiss(item) {
-      const index = this.items.indexOf(item);
-      this.items.splice(index, 1);
-    },
-    async logout() {
-      const res = await this.authStore._user.logout();
+    onMounted(async () => {
+      const user = await getCurrentUser();
+      username.value = user.getUsername();
+      await authUI.detectSyncStrategy();
+    });
+    const gotoSettings = async () => {
+      router.push(`/u/${(await getCurrentUser()).getUsername()}`);
+    };
+    const gotoStats = async () => {
+      router.push(`/u/${(await getCurrentUser()).getUsername()}/stats`);
+    };
+    const dismiss = (item) => {
+      const index = items.value.indexOf(item);
+      items.value.splice(index, 1);
+    };
+    const logout = async () => {
+      const res = await authStore._user.logout();
       if (res.ok) {
-        this.authStore.loginAndRegistration = {
+        authStore.loginAndRegistration = {
           init: true,
           loggedIn: false,
           regDialogOpen: false,
           loginDialogOpen: false
         };
-        this.configStore.resetDefaults();
-        this.$router.push("/home");
+        configStore.resetDefaults();
+        router.push("/home");
       }
-    }
-  }
-});
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_v_icon = resolveComponent("v-icon");
-  const _component_v_avatar = resolveComponent("v-avatar");
-  const _component_v_chip = resolveComponent("v-chip");
-  const _component_v_list_item_title = resolveComponent("v-list-item-title");
-  const _component_v_list_item = resolveComponent("v-list-item");
-  const _component_v_divider = resolveComponent("v-divider");
-  const _component_v_list = resolveComponent("v-list");
-  const _component_v_menu = resolveComponent("v-menu");
-  const _component_v_badge = resolveComponent("v-badge");
-  return openBlock(), createBlock(_component_v_badge, {
-    content: _ctx.items.length,
-    "model-value": _ctx.hasNewItems,
-    color: "accent",
-    location: "end top"
-  }, {
-    default: withCtx(() => [
-      createVNode(_component_v_menu, {
-        location: "bottom end",
-        transition: "scale-transition"
-      }, {
-        activator: withCtx(({ props }) => [
-          createVNode(_component_v_chip, mergeProps(props, { class: "ma-2" }), {
-            default: withCtx(() => [
-              createVNode(_component_v_avatar, {
-                start: "",
-                class: "bg-primary"
-              }, {
-                default: withCtx(() => [
-                  createVNode(_component_v_icon, null, {
-                    default: withCtx(() => _cache[0] || (_cache[0] = [
-                      createTextVNode("mdi-school")
-                    ])),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }),
-              createTextVNode(" " + toDisplayString(_ctx.username), 1)
-            ]),
-            _: 2
-          }, 1040)
-        ]),
-        default: withCtx(() => [
-          createVNode(_component_v_list, null, {
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
-                return openBlock(), createBlock(_component_v_list_item, {
-                  key: item,
-                  onClick: ($event) => _ctx.dismiss(item)
-                }, {
+    };
+    const executeReset = async () => {
+      try {
+        await authStore.resetUserData();
+        configStore.resetDefaults();
+        resetDialogState();
+        router.push("/home");
+      } catch (error) {
+        console.error("Failed to reset user data:", error);
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_v_icon = resolveComponent("v-icon");
+      const _component_v_avatar = resolveComponent("v-avatar");
+      const _component_v_chip = resolveComponent("v-chip");
+      const _component_v_list_item_title = resolveComponent("v-list-item-title");
+      const _component_v_list_item = resolveComponent("v-list-item");
+      const _component_v_divider = resolveComponent("v-divider");
+      const _component_v_list = resolveComponent("v-list");
+      const _component_v_menu = resolveComponent("v-menu");
+      const _component_v_badge = resolveComponent("v-badge");
+      const _component_v_card_title = resolveComponent("v-card-title");
+      const _component_v_text_field = resolveComponent("v-text-field");
+      const _component_v_card_text = resolveComponent("v-card-text");
+      const _component_v_spacer = resolveComponent("v-spacer");
+      const _component_v_btn = resolveComponent("v-btn");
+      const _component_v_card_actions = resolveComponent("v-card-actions");
+      const _component_v_card = resolveComponent("v-card");
+      const _component_v_dialog = resolveComponent("v-dialog");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_component_v_badge, {
+          content: items.value.length,
+          "model-value": hasNewItems.value,
+          color: "accent",
+          location: "end top"
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_v_menu, {
+              location: "bottom end",
+              transition: "scale-transition"
+            }, {
+              activator: withCtx(({ props }) => [
+                createVNode(_component_v_chip, mergeProps(props, { class: "ma-2" }), {
                   default: withCtx(() => [
-                    createVNode(_component_v_list_item_title, null, {
+                    createVNode(_component_v_avatar, {
+                      start: "",
+                      class: "bg-primary"
+                    }, {
                       default: withCtx(() => [
-                        createTextVNode(toDisplayString(item), 1)
+                        createVNode(_component_v_icon, null, {
+                          default: withCtx(() => _cache[4] || (_cache[4] = [
+                            createTextVNode("mdi-school")
+                          ])),
+                          _: 1
+                        })
                       ]),
-                      _: 2
-                    }, 1024)
+                      _: 1
+                    }),
+                    createTextVNode(" " + toDisplayString(username.value), 1)
                   ]),
                   _: 2
-                }, 1032, ["onClick"]);
-              }), 128)),
-              _ctx.items.length ? (openBlock(), createBlock(_component_v_divider, { key: 0 })) : createCommentVNode("", true),
-              createVNode(_component_v_list_item, { onClick: _ctx.gotoStats }, {
-                prepend: withCtx(() => [
-                  createVNode(_component_v_icon, null, {
-                    default: withCtx(() => _cache[1] || (_cache[1] = [
-                      createTextVNode("mdi-trending-up")
-                    ])),
-                    _: 1
-                  })
-                ]),
-                default: withCtx(() => [
-                  createVNode(_component_v_list_item_title, null, {
-                    default: withCtx(() => _cache[2] || (_cache[2] = [
-                      createTextVNode("Stats")
-                    ])),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 8, ["onClick"]),
-              createVNode(_component_v_list_item, { onClick: _ctx.gotoSettings }, {
-                prepend: withCtx(() => [
-                  createVNode(_component_v_icon, null, {
-                    default: withCtx(() => _cache[3] || (_cache[3] = [
-                      createTextVNode("mdi-cog")
-                    ])),
-                    _: 1
-                  })
-                ]),
-                default: withCtx(() => [
-                  createVNode(_component_v_list_item_title, null, {
-                    default: withCtx(() => _cache[4] || (_cache[4] = [
-                      createTextVNode("Settings")
-                    ])),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 8, ["onClick"]),
-              createVNode(_component_v_list_item, { onClick: _ctx.logout }, {
-                prepend: withCtx(() => [
-                  createVNode(_component_v_icon, null, {
-                    default: withCtx(() => _cache[5] || (_cache[5] = [
-                      createTextVNode("mdi-logout")
-                    ])),
-                    _: 1
-                  })
-                ]),
-                default: withCtx(() => [
-                  createVNode(_component_v_list_item_title, null, {
-                    default: withCtx(() => _cache[6] || (_cache[6] = [
-                      createTextVNode("Log out")
-                    ])),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 8, ["onClick"])
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _: 1
-  }, 8, ["content", "model-value"]);
-}
-const UserChip = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$1]]);
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+                }, 1040)
+              ]),
+              default: withCtx(() => [
+                createVNode(_component_v_list, null, {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item) => {
+                      return openBlock(), createBlock(_component_v_list_item, {
+                        key: item,
+                        onClick: ($event) => dismiss(item)
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_component_v_list_item_title, null, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(item), 1)
+                            ]),
+                            _: 2
+                          }, 1024)
+                        ]),
+                        _: 2
+                      }, 1032, ["onClick"]);
+                    }), 128)),
+                    items.value.length ? (openBlock(), createBlock(_component_v_divider, { key: 0 })) : createCommentVNode("", true),
+                    createVNode(_component_v_list_item, { onClick: gotoStats }, {
+                      prepend: withCtx(() => [
+                        createVNode(_component_v_icon, null, {
+                          default: withCtx(() => _cache[5] || (_cache[5] = [
+                            createTextVNode("mdi-trending-up")
+                          ])),
+                          _: 1
+                        })
+                      ]),
+                      default: withCtx(() => [
+                        createVNode(_component_v_list_item_title, null, {
+                          default: withCtx(() => _cache[6] || (_cache[6] = [
+                            createTextVNode("Stats")
+                          ])),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(_component_v_list_item, { onClick: gotoSettings }, {
+                      prepend: withCtx(() => [
+                        createVNode(_component_v_icon, null, {
+                          default: withCtx(() => _cache[7] || (_cache[7] = [
+                            createTextVNode("mdi-cog")
+                          ])),
+                          _: 1
+                        })
+                      ]),
+                      default: withCtx(() => [
+                        createVNode(_component_v_list_item_title, null, {
+                          default: withCtx(() => _cache[8] || (_cache[8] = [
+                            createTextVNode("Settings")
+                          ])),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    }),
+                    authUIConfig.value.showLogout ? (openBlock(), createBlock(_component_v_list_item, {
+                      key: 1,
+                      onClick: logout
+                    }, {
+                      prepend: withCtx(() => [
+                        createVNode(_component_v_icon, null, {
+                          default: withCtx(() => _cache[9] || (_cache[9] = [
+                            createTextVNode("mdi-logout")
+                          ])),
+                          _: 1
+                        })
+                      ]),
+                      default: withCtx(() => [
+                        createVNode(_component_v_list_item_title, null, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(authUIConfig.value.logoutLabel), 1)
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })) : createCommentVNode("", true),
+                    authUIConfig.value.showResetData ? (openBlock(), createBlock(_component_v_list_item, {
+                      key: 2,
+                      onClick: _cache[0] || (_cache[0] = ($event) => showResetDialog.value = true)
+                    }, {
+                      prepend: withCtx(() => [
+                        createVNode(_component_v_icon, null, {
+                          default: withCtx(() => _cache[10] || (_cache[10] = [
+                            createTextVNode("mdi-delete-sweep")
+                          ])),
+                          _: 1
+                        })
+                      ]),
+                      default: withCtx(() => [
+                        createVNode(_component_v_list_item_title, null, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(authUIConfig.value.resetLabel), 1)
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["content", "model-value"]),
+        createVNode(_component_v_dialog, {
+          modelValue: showResetDialog.value,
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => showResetDialog.value = $event),
+          "max-width": "500px",
+          persistent: ""
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_v_card, null, {
+              default: withCtx(() => [
+                createVNode(_component_v_card_title, { class: "text-h5 d-flex align-center" }, {
+                  default: withCtx(() => [
+                    createVNode(_component_v_icon, {
+                      color: "warning",
+                      class: "mr-3"
+                    }, {
+                      default: withCtx(() => _cache[11] || (_cache[11] = [
+                        createTextVNode("mdi-alert-circle")
+                      ])),
+                      _: 1
+                    }),
+                    _cache[12] || (_cache[12] = createTextVNode(" Reset All User Data "))
+                  ]),
+                  _: 1
+                }),
+                createVNode(_component_v_card_text, null, {
+                  default: withCtx(() => [
+                    _cache[13] || (_cache[13] = createElementVNode("p", { class: "mb-4" }, "This will permanently delete:", -1)),
+                    _cache[14] || (_cache[14] = createElementVNode("ul", { class: "mb-4" }, [
+                      createElementVNode("li", null, "All course progress and history"),
+                      createElementVNode("li", null, "Scheduled card reviews"),
+                      createElementVNode("li", null, "Course registrations"),
+                      createElementVNode("li", null, "User preferences")
+                    ], -1)),
+                    _cache[15] || (_cache[15] = createElementVNode("p", { class: "mb-4 text-error font-weight-bold" }, "This cannot be undone.", -1)),
+                    createVNode(_component_v_text_field, {
+                      modelValue: confirmationText.value,
+                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => confirmationText.value = $event),
+                      label: 'Type "reset" to confirm',
+                      outlined: "",
+                      dense: "",
+                      onKeyup: _cache[2] || (_cache[2] = withKeys(($event) => isConfirmationValid.value && executeReset(), ["enter"]))
+                    }, null, 8, ["modelValue"])
+                  ]),
+                  _: 1
+                }),
+                createVNode(_component_v_card_actions, null, {
+                  default: withCtx(() => [
+                    createVNode(_component_v_spacer),
+                    createVNode(_component_v_btn, {
+                      text: "",
+                      onClick: resetDialogState
+                    }, {
+                      default: withCtx(() => _cache[16] || (_cache[16] = [
+                        createTextVNode("Cancel")
+                      ])),
+                      _: 1
+                    }),
+                    createVNode(_component_v_btn, {
+                      color: "error",
+                      disabled: !isConfirmationValid.value,
+                      onClick: executeReset
+                    }, {
+                      default: withCtx(() => _cache[17] || (_cache[17] = [
+                        createTextVNode(" Reset All Data ")
+                      ])),
+                      _: 1
+                    }, 8, ["disabled"])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ], 64);
+    };
+  }
+});
+const UserChip = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-53f0aa4d"]]);
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "UserLogin",
   emits: ["toggle"],
   setup(__props, { emit: __emit }) {
@@ -15986,8 +16200,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UserLogin = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-acfaa2d0"]]);
-const _sfc_main$1 = defineComponent({
+const UserLogin = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-acfaa2d0"]]);
+const _sfc_main$5 = defineComponent({
   name: "UserRegistration",
   emits: ["toggle"],
   data() {
@@ -16086,7 +16300,7 @@ Author: ${this.author}
     }
   }
 });
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_card_title = resolveComponent("v-card-title");
   const _component_v_text_field = resolveComponent("v-text-field");
   const _component_v_btn = resolveComponent("v-btn");
@@ -16221,13 +16435,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const UserRegistration = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
-const _hoisted_1 = { key: 0 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const UserRegistration = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$4]]);
+const _hoisted_1$4 = { key: 0 };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "UserLoginAndRegistrationContainer",
   setup(__props) {
     const route = useRoute();
     const authStore = useAuthStore();
+    const authUI = useAuthUI();
+    onMounted(async () => {
+      await authUI.detectSyncStrategy();
+    });
     const display = computed(() => {
       if (!route.name || typeof route.name !== "string") {
         return true;
@@ -16242,6 +16460,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return !authStore.loginAndRegistration.loggedIn;
     });
+    const authUIConfig = computed(() => authUI.config.value || {
+      showLoginRegistration: true,
+      showLogout: true,
+      showResetData: false,
+      logoutLabel: "Log out",
+      resetLabel: ""
+    });
     const regDialog = computed({
       get: () => authStore.loginAndRegistration.regDialogOpen,
       set: (value) => {
@@ -16273,7 +16498,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         mode: "out-in"
       }, {
         default: withCtx(() => [
-          guestMode.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          guestMode.value && authUIConfig.value.showLoginRegistration ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
             createVNode(_component_v_dialog, {
               modelValue: regDialog.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => regDialog.value = $event),
@@ -16324,12 +16549,962 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UserLoginAndRegistrationContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e53f877f"]]);
+const UserLoginAndRegistrationContainer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-6091ae05"]]);
+const _sfc_main$3 = defineComponent({
+  name: "SkTagsInput",
+  components: {
+    VueTagsInput
+  },
+  props: {
+    courseID: {
+      type: String,
+      required: true,
+      default: ""
+    },
+    cardID: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    hideSubmit: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      tag: "",
+      tags: [],
+      initialTags: [],
+      availableCourseTags: [],
+      separators: [";", ",", " "],
+      courseDB: null
+    };
+  },
+  computed: {
+    autoCompleteSuggestions() {
+      return this.availableCourseTags.filter((availableTag) => {
+        return availableTag.name.toLowerCase().indexOf(this.tag.toLowerCase()) !== -1;
+      }).map((availableTag) => {
+        return {
+          text: availableTag.name,
+          data: {
+            snippet: availableTag.snippet
+          }
+        };
+      });
+    }
+  },
+  watch: {
+    async cardID() {
+      await this.getAppliedTags();
+    },
+    async courseID() {
+      this.courseDB = getDataLayer().getCourseDB(this.courseID);
+      await this.updateAvailableCourseTags();
+    }
+  },
+  async created() {
+    this.courseDB = getDataLayer().getCourseDB(this.courseID);
+    await this.updateAvailableCourseTags();
+    await this.getAppliedTags();
+  },
+  methods: {
+    tagsChanged(newTags) {
+      console.log(`[TagsInput] Tags changing: ${JSON.stringify(newTags)}`);
+      this.tags = newTags;
+    },
+    async getAppliedTags() {
+      this.initialTags = [];
+      this.tags = [];
+      try {
+        const appliedDocsFindResult = await this.courseDB.getAppliedTags(this.cardID);
+        appliedDocsFindResult.rows.forEach((row) => {
+          console.log(`[TagsInput] The following tag is applied:
+	${JSON.stringify(row)}`);
+          this.tags.push({
+            text: row.value.name,
+            style: "",
+            classes: ""
+          });
+        });
+        this.initialTags = this.tags.map((tag2) => tag2.text);
+      } catch (e) {
+        console.error(`Error in init-getAppliedTags: ${JSON.stringify(e)}, ${e}`);
+      } finally {
+        this.loading = false;
+      }
+    },
+    async updateAvailableCourseTags() {
+      try {
+        this.availableCourseTags = (await this.courseDB.getCourseTagStubs()).rows.map((row) => {
+          console.log(`[TagsInput] available tag: ${JSON.stringify(row)}`);
+          return row.doc;
+        });
+      } catch (e) {
+        console.error(`Error in init-availableCourseTags: ${JSON.stringify(e)}`);
+      }
+    },
+    async submit() {
+      console.log(`[TagsInput] tagsInput is submitting...`);
+      this.loading = true;
+      try {
+        await Promise.all(
+          this.tags.map(async (currentTag) => {
+            if (!this.initialTags.includes(currentTag.text)) {
+              try {
+                await this.courseDB.addTagToCard(this.cardID, currentTag.text);
+                console.log(`[TagsInput] Successfully added tag: ${currentTag.text}`);
+              } catch (error) {
+                console.error(`Failed to add tag ${currentTag.text}:`, error);
+              }
+            }
+          })
+        );
+      } catch (e) {
+        console.error(`Exception adding tags: ${JSON.stringify(e)}`);
+      }
+      try {
+        await Promise.all(
+          this.initialTags.map(async (initialTag) => {
+            if (this.tags.filter((tag2) => {
+              return tag2.text === initialTag;
+            }).length === 0) {
+              try {
+                await this.courseDB.removeTagFromCard(this.cardID, initialTag);
+                console.log(`[TagsInput] Successfully removed tag: ${initialTag}`);
+              } catch (error) {
+                console.error(`Failed to remove tag ${initialTag}:`, error);
+              }
+            }
+          })
+        );
+      } catch (e) {
+        console.error(`Exception removing tags: ${JSON.stringify(e)}`);
+      }
+      this.loading = false;
+    }
+  }
+});
+const _hoisted_1$3 = { "data-cy": "tags-input" };
+const _hoisted_2$2 = { class: "tag-name" };
+const _hoisted_3$2 = {
+  key: 0,
+  class: "tag-snippet"
+};
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_vue_tags_input = resolveComponent("vue-tags-input");
+  const _component_v_btn = resolveComponent("v-btn");
+  return openBlock(), createElementBlock("div", _hoisted_1$3, [
+    createVNode(_component_vue_tags_input, {
+      modelValue: _ctx.tag,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.tag = $event),
+      tags: _ctx.tags,
+      "autocomplete-items": _ctx.autoCompleteSuggestions,
+      separators: _ctx.separators,
+      "add-on-key": _ctx.separators,
+      onTagsChanged: _ctx.tagsChanged
+    }, {
+      "autocomplete-item": withCtx((props) => [
+        createElementVNode("div", {
+          class: normalizeClass(["autocomplete-item", { "is-active": props.selected }])
+        }, [
+          createElementVNode("span", _hoisted_2$2, toDisplayString(props.item.text), 1),
+          props.item.data && props.item.data.snippet ? (openBlock(), createElementBlock("span", _hoisted_3$2, " - " + toDisplayString(props.item.data.snippet), 1)) : createCommentVNode("", true)
+        ], 2)
+      ]),
+      _: 1
+    }, 8, ["modelValue", "tags", "autocomplete-items", "separators", "add-on-key", "onTagsChanged"]),
+    !_ctx.hideSubmit ? (openBlock(), createBlock(_component_v_btn, {
+      key: 0,
+      color: "success",
+      loading: _ctx.loading,
+      onClick: _ctx.submit
+    }, {
+      default: withCtx(() => _cache[1] || (_cache[1] = [
+        createTextVNode("Save Changes")
+      ])),
+      _: 1
+    }, 8, ["loading", "onClick"])) : createCommentVNode("", true)
+  ]);
+}
+const TagsInput = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-dec3b5c8"]]);
+function isConstructor(obj) {
+  try {
+    new obj();
+    return true;
+  } catch (e) {
+    console.warn(`not a constructor: ${obj}, err: ${e}`);
+    return false;
+  }
+}
+const _sfc_main$2 = defineComponent({
+  name: "CourseCardBrowser",
+  components: {
+    CardLoader,
+    TagsInput,
+    PaginatingToolbar
+  },
+  props: {
+    courseId: {
+      type: String,
+      required: true
+    },
+    tagId: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    viewLookupFunction: {
+      type: Function,
+      required: true,
+      default: (x) => {
+        console.warn("No viewLookupFunction provided to CourseCardBrowser");
+        return null;
+      }
+    },
+    editMode: {
+      type: String,
+      required: false,
+      default: "full"
+    }
+  },
+  data() {
+    return {
+      courseDB: null,
+      page: 1,
+      pages: [],
+      cards: [],
+      cardData: {},
+      cardPreview: {},
+      internalEditMode: "none",
+      delBtn: false,
+      updatePending: true,
+      userIsRegistered: false,
+      questionCount: 0,
+      tags: [],
+      viewLookup: this.viewLookupFunction
+    };
+  },
+  async created() {
+    try {
+      this.courseDB = getDataLayer().getCourseDB(this.courseId);
+      if (this.tagId) {
+        this.questionCount = (await this.courseDB.getTag(this.tagId)).taggedCards.length;
+      } else {
+        this.questionCount = (await this.courseDB.getCourseInfo()).cardCount;
+      }
+      for (let i = 1; (i - 1) * 25 < this.questionCount; i++) {
+        this.pages.push(i);
+      }
+      await this.populateTableData();
+    } catch (error) {
+      console.error("Error initializing CourseCardBrowser:", error);
+    } finally {
+      this.updatePending = false;
+    }
+  },
+  methods: {
+    first() {
+      this.page = 1;
+      this.populateTableData();
+    },
+    prev() {
+      this.page--;
+      this.populateTableData();
+    },
+    next() {
+      this.page++;
+      this.populateTableData();
+    },
+    last() {
+      this.page = this.pages.length;
+      this.populateTableData();
+    },
+    setPage(n) {
+      this.page = n;
+      this.populateTableData();
+    },
+    clearSelections(exception = "") {
+      this.cards.forEach((card) => {
+        if (card.id !== exception) {
+          card.isOpen = false;
+        }
+      });
+      this.internalEditMode = "none";
+      this.delBtn = false;
+    },
+    async deleteCard(c) {
+      console.log(`Deleting card ${c}`);
+      const res = await this.courseDB.removeCard(c.split("-")[1]);
+      if (res.ok) {
+        this.cards = this.cards.filter((card) => card.id != c);
+        this.clearSelections();
+      } else {
+        console.error(`Failed to delete card:
+
+${JSON.stringify(res)}`);
+        alertUser({
+          text: "Failed to delete card",
+          status: Status.error
+        });
+      }
+    },
+    async populateTableData() {
+      this.updatePending = true;
+      if (this.tagId) {
+        const tag2 = await this.courseDB.getTag(this.tagId);
+        this.cards = tag2.taggedCards.map((c) => {
+          return { id: `${this.courseId}-${c}`, isOpen: false, delBtn: false };
+        });
+      } else {
+        this.cards = (await this.courseDB.getCardsByELO(0, 25)).map((c) => {
+          return {
+            id: c,
+            isOpen: false,
+            delBtn: false
+          };
+        });
+      }
+      const toRemove = [];
+      const hydratedCardData = (await this.courseDB.getCourseDocs(
+        this.cards.map((c) => c.id.split("-")[1]),
+        {
+          include_docs: true
+        }
+      )).rows.filter((r2) => {
+        if (r2.doc) {
+          return true;
+        } else {
+          console.error(`Card ${r2.id}.doc not found.
+card: ${JSON.stringify(r2)}`);
+          return false;
+        }
+      }).map((r2) => r2.doc);
+      this.cards = this.cards.filter((c) => !toRemove.includes(c.id.split("-")[1]));
+      hydratedCardData.forEach((c) => {
+        if (c && c.id_displayable_data) {
+          this.cardData[c._id] = c.id_displayable_data;
+        }
+      });
+      try {
+        await Promise.all(
+          this.cards.map(async (c) => {
+            const _cardID = c.id.split("-")[1];
+            const tmpCardData = hydratedCardData.find((c2) => c2._id == _cardID);
+            if (!tmpCardData || !tmpCardData.id_displayable_data) {
+              console.error(`No valid data found for card ${_cardID}`);
+              return;
+            }
+            const tmpView = this.viewLookupFunction(
+              tmpCardData.id_view || "default.question.BlanksCard.FillInView"
+            );
+            const tmpDataDocs = tmpCardData.id_displayable_data.map((id) => {
+              return this.courseDB.getCourseDoc(id, {
+                attachments: false,
+                binary: true
+              });
+            });
+            const allDocs = await Promise.all(tmpDataDocs);
+            await Promise.all(
+              allDocs.map((doc) => {
+                const tmpData = [];
+                tmpData.unshift(displayableDataToViewData(doc));
+                if (isConstructor(tmpView)) {
+                  const view = new tmpView();
+                  view.data = tmpData;
+                  this.cardPreview[c.id] = view.toString();
+                } else {
+                  this.cardPreview[c.id] = tmpView.name ? tmpView.name : "Unknown";
+                }
+              })
+            );
+          })
+        );
+      } catch (error) {
+        console.error("Error populating table data:", error);
+      } finally {
+        this.updatePending = false;
+        this.$forceUpdate();
+      }
+    }
+  }
+});
+const _hoisted_1$2 = {
+  key: 0,
+  class: "d-flex justify-center align-center pa-6"
+};
+const _hoisted_2$1 = { key: 1 };
+const _hoisted_3$1 = {
+  key: 0,
+  class: "px-4 py-2 bg-blue-grey-lighten-5"
+};
+const _hoisted_4$1 = { class: "mt-4" };
+const _hoisted_5$1 = {
+  key: 0,
+  class: "ml-4"
+};
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_v_progress_circular = resolveComponent("v-progress-circular");
+  const _component_paginating_toolbar = resolveComponent("paginating-toolbar");
+  const _component_v_list_item_title = resolveComponent("v-list-item-title");
+  const _component_v_list_item_subtitle = resolveComponent("v-list-item-subtitle");
+  const _component_v_btn = resolveComponent("v-btn");
+  const _component_v_icon = resolveComponent("v-icon");
+  const _component_v_speed_dial = resolveComponent("v-speed-dial");
+  const _component_v_list_item = resolveComponent("v-list-item");
+  const _component_card_loader = resolveComponent("card-loader");
+  const _component_tags_input = resolveComponent("tags-input");
+  const _component_v_list = resolveComponent("v-list");
+  const _component_v_card = resolveComponent("v-card");
+  return openBlock(), createBlock(_component_v_card, null, {
+    default: withCtx(() => [
+      _ctx.updatePending ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+        createVNode(_component_v_progress_circular, {
+          indeterminate: "",
+          color: "primary"
+        })
+      ])) : (openBlock(), createElementBlock("div", _hoisted_2$1, [
+        createVNode(_component_paginating_toolbar, {
+          title: "Exercises",
+          page: _ctx.page,
+          pages: _ctx.pages,
+          subtitle: `(${_ctx.questionCount})`,
+          onFirst: _ctx.first,
+          onPrev: _ctx.prev,
+          onNext: _ctx.next,
+          onLast: _ctx.last,
+          onSetPage: _cache[0] || (_cache[0] = (n) => _ctx.setPage(n))
+        }, null, 8, ["page", "pages", "subtitle", "onFirst", "onPrev", "onNext", "onLast"]),
+        createVNode(_component_v_list, null, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.cards, (c) => {
+              return openBlock(), createElementBlock(Fragment, {
+                key: c.id
+              }, [
+                createVNode(_component_v_list_item, {
+                  class: normalizeClass({
+                    "bg-blue-grey-lighten-5": c.isOpen,
+                    "elevation-4": c.isOpen
+                  }),
+                  density: "compact",
+                  "data-cy": "course-card"
+                }, {
+                  prepend: withCtx(() => [
+                    createElementVNode("div", null, [
+                      createVNode(_component_v_list_item_title, {
+                        class: normalizeClass([{ "text-blue-grey-darken-1": c.isOpen }, "font-weight-medium"])
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(_ctx.cardPreview[c.id]), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["class"]),
+                      createVNode(_component_v_list_item_subtitle, null, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(c.id.split("-").length === 3 ? c.id.split("-")[2] : ""), 1)
+                        ]),
+                        _: 2
+                      }, 1024)
+                    ])
+                  ]),
+                  append: withCtx(() => [
+                    _ctx.editMode === "full" ? (openBlock(), createBlock(_component_v_speed_dial, {
+                      key: 0,
+                      modelValue: c.isOpen,
+                      "onUpdate:modelValue": ($event) => c.isOpen = $event,
+                      location: "left center",
+                      transition: "slide-x-transition",
+                      style: { "display": "flex", "flex-direction": "row-reverse" },
+                      persistent: ""
+                    }, {
+                      activator: withCtx(({ props }) => [
+                        createVNode(_component_v_btn, mergeProps({ ref_for: true }, props, {
+                          icon: c.isOpen ? "mdi-close" : "mdi-plus",
+                          size: "small",
+                          variant: "text",
+                          onClick: ($event) => _ctx.clearSelections(c.id)
+                        }), null, 16, ["icon", "onClick"])
+                      ]),
+                      default: withCtx(() => [
+                        createVNode(_component_v_btn, {
+                          key: "tags",
+                          icon: "",
+                          size: "small",
+                          variant: _ctx.internalEditMode !== "tags" ? "outlined" : "elevated",
+                          color: _ctx.internalEditMode === "tags" ? "teal" : "teal-darken-3",
+                          onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.internalEditMode = "tags", ["stop"]))
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_component_v_icon, null, {
+                              default: withCtx(() => _cache[4] || (_cache[4] = [
+                                createTextVNode("mdi-bookmark")
+                              ])),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }, 8, ["variant", "color"]),
+                        createVNode(_component_v_btn, {
+                          key: "flag",
+                          icon: "",
+                          size: "small",
+                          variant: _ctx.internalEditMode !== "flag" ? "outlined" : "elevated",
+                          color: _ctx.internalEditMode === "flag" ? "error" : "error-darken-3",
+                          onClick: _cache[2] || (_cache[2] = withModifiers(($event) => _ctx.internalEditMode = "flag", ["stop"]))
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_component_v_icon, null, {
+                              default: withCtx(() => _cache[5] || (_cache[5] = [
+                                createTextVNode("mdi-flag")
+                              ])),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }, 8, ["variant", "color"])
+                      ]),
+                      _: 2
+                    }, 1032, ["modelValue", "onUpdate:modelValue"])) : createCommentVNode("", true)
+                  ]),
+                  _: 2
+                }, 1032, ["class"]),
+                c.isOpen ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+                  createVNode(_component_card_loader, {
+                    qualified_id: c.id,
+                    "view-lookup": _ctx.viewLookup,
+                    class: "elevation-1"
+                  }, null, 8, ["qualified_id", "view-lookup"]),
+                  withDirectives(createVNode(_component_tags_input, {
+                    "course-i-d": _ctx.courseId,
+                    "card-i-d": c.id.split("-")[1],
+                    class: "mt-4"
+                  }, null, 8, ["course-i-d", "card-i-d"]), [
+                    [vShow, _ctx.internalEditMode === "tags"]
+                  ]),
+                  withDirectives(createElementVNode("div", _hoisted_4$1, [
+                    createVNode(_component_v_btn, {
+                      color: "error",
+                      variant: "outlined",
+                      onClick: ($event) => c.delBtn = true
+                    }, {
+                      default: withCtx(() => _cache[6] || (_cache[6] = [
+                        createTextVNode(" Delete this card ")
+                      ])),
+                      _: 2
+                    }, 1032, ["onClick"]),
+                    c.delBtn ? (openBlock(), createElementBlock("span", _hoisted_5$1, [
+                      _cache[8] || (_cache[8] = createElementVNode("span", { class: "mr-2" }, "Are you sure?", -1)),
+                      createVNode(_component_v_btn, {
+                        color: "error",
+                        variant: "elevated",
+                        onClick: ($event) => _ctx.deleteCard(c.id)
+                      }, {
+                        default: withCtx(() => _cache[7] || (_cache[7] = [
+                          createTextVNode(" Confirm ")
+                        ])),
+                        _: 2
+                      }, 1032, ["onClick"])
+                    ])) : createCommentVNode("", true)
+                  ], 512), [
+                    [vShow, _ctx.internalEditMode === "flag"]
+                  ])
+                ])) : createCommentVNode("", true)
+              ], 64);
+            }), 128))
+          ]),
+          _: 1
+        }),
+        createVNode(_component_paginating_toolbar, {
+          class: "elevation-0",
+          page: _ctx.page,
+          pages: _ctx.pages,
+          onFirst: _ctx.first,
+          onPrev: _ctx.prev,
+          onNext: _ctx.next,
+          onLast: _ctx.last,
+          onSetPage: _cache[3] || (_cache[3] = (n) => _ctx.setPage(n))
+        }, null, 8, ["page", "pages", "onFirst", "onPrev", "onNext", "onLast"])
+      ]))
+    ]),
+    _: 1
+  });
+}
+const CourseCardBrowser = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-0beef6a4"]]);
+const _sfc_main$1 = defineComponent({
+  name: "CourseInformation",
+  components: {
+    // MidiConfig, // Removed to break circular dependency
+    CourseCardBrowser
+  },
+  props: {
+    courseId: {
+      type: String,
+      required: true
+    },
+    viewLookupFunction: {
+      type: Function,
+      required: false,
+      default: (x) => {
+        console.warn("No viewLookupFunction provided to CourseInformation");
+        return null;
+      }
+    },
+    editMode: {
+      type: String,
+      required: false,
+      default: "full"
+    }
+  },
+  data() {
+    return {
+      courseDB: null,
+      nameRules: [
+        (value) => {
+          const max2 = 30;
+          return value.length > max2 ? `Course name must be ${max2} characters or less` : true;
+        }
+      ],
+      updatePending: true,
+      courseConfig: {},
+      userIsRegistered: false,
+      tags: [],
+      user: null
+    };
+  },
+  computed: {
+    // isPianoCourse removed - piano-specific logic should be in wrapper component
+  },
+  async created() {
+    this.courseDB = getDataLayer().getCourseDB(this.courseId);
+    this.user = await getCurrentUser();
+    const userCourses = await this.user.getCourseRegistrationsDoc();
+    this.userIsRegistered = userCourses.courses.filter((c) => {
+      return c.courseID === this.courseId && (c.status === "active" || c.status === void 0);
+    }).length === 1;
+    this.courseConfig = await this.courseDB.getCourseConfig();
+    this.tags = (await this.courseDB.getCourseTagStubs()).rows.map((r2) => r2.doc);
+    this.updatePending = false;
+  },
+  methods: {
+    async register() {
+      log(`Registering for ${this.courseId}`);
+      const res = await this.user.registerForCourse(this.courseId);
+      if (res.ok) {
+        this.userIsRegistered = true;
+      }
+    },
+    async drop() {
+      log(`Dropping course ${this.courseId}`);
+      const res = await this.user.dropCourse(this.courseId);
+      if (res.ok) {
+        this.userIsRegistered = false;
+      }
+    }
+  }
+});
+const _hoisted_1$1 = { key: 0 };
+const _hoisted_2 = { class: "text-h4 mb-2" };
+const _hoisted_3 = { class: "text-body-2" };
+const _hoisted_4 = { key: 0 };
+const _hoisted_5 = { key: 1 };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_v_btn = resolveComponent("v-btn");
+  const _component_v_icon = resolveComponent("v-icon");
+  const _component_v_toolbar_title = resolveComponent("v-toolbar-title");
+  const _component_v_toolbar_items = resolveComponent("v-toolbar-items");
+  const _component_v_toolbar = resolveComponent("v-toolbar");
+  const _component_v_chip = resolveComponent("v-chip");
+  const _component_v_card_text = resolveComponent("v-card-text");
+  const _component_v_card = resolveComponent("v-card");
+  const _component_course_card_browser = resolveComponent("course-card-browser");
+  return !_ctx.updatePending ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+    renderSlot(_ctx.$slots, "header", {
+      courseConfig: _ctx.courseConfig,
+      courseId: _ctx.courseId
+    }, () => [
+      createElementVNode("h1", _hoisted_2, toDisplayString(_ctx.courseConfig.name), 1)
+    ], true),
+    createElementVNode("p", _hoisted_3, toDisplayString(_ctx.courseConfig.description), 1),
+    renderSlot(_ctx.$slots, "actions", {
+      userIsRegistered: _ctx.userIsRegistered,
+      courseId: _ctx.courseId,
+      editMode: _ctx.editMode,
+      register: _ctx.register,
+      drop: _ctx.drop
+    }, () => [
+      createVNode(Transition, {
+        name: "component-fade",
+        mode: "out-in"
+      }, {
+        default: withCtx(() => [
+          _ctx.userIsRegistered ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            createVNode(_component_v_btn, {
+              color: "success",
+              class: "me-2"
+            }, {
+              default: withCtx(() => _cache[0] || (_cache[0] = [
+                createTextVNode("Start a study session")
+              ])),
+              _: 1
+            }),
+            _ctx.editMode === "full" ? (openBlock(), createBlock(_component_v_btn, {
+              key: 0,
+              "data-cy": "add-content-btn",
+              color: "indigo-lighten-1",
+              class: "me-2"
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_v_icon, { start: "" }, {
+                  default: withCtx(() => _cache[1] || (_cache[1] = [
+                    createTextVNode("mdi-plus")
+                  ])),
+                  _: 1
+                }),
+                _cache[2] || (_cache[2] = createTextVNode(" Add content "))
+              ]),
+              _: 1
+            })) : createCommentVNode("", true),
+            _ctx.editMode === "full" ? (openBlock(), createBlock(_component_v_btn, {
+              key: 1,
+              color: "green-darken-2",
+              title: "Rank course content for difficulty",
+              class: "me-2"
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_v_icon, { start: "" }, {
+                  default: withCtx(() => _cache[3] || (_cache[3] = [
+                    createTextVNode("mdi-format-list-numbered")
+                  ])),
+                  _: 1
+                }),
+                _cache[4] || (_cache[4] = createTextVNode(" Arrange "))
+              ]),
+              _: 1
+            })) : createCommentVNode("", true),
+            _ctx.editMode === "full" ? (openBlock(), createBlock(_component_v_btn, {
+              key: 2,
+              color: "error",
+              size: "small",
+              variant: "outlined",
+              onClick: _ctx.drop
+            }, {
+              default: withCtx(() => _cache[5] || (_cache[5] = [
+                createTextVNode(" Drop this course ")
+              ])),
+              _: 1
+            }, 8, ["onClick"])) : createCommentVNode("", true)
+          ])) : (openBlock(), createElementBlock("div", _hoisted_5, [
+            createVNode(_component_v_btn, {
+              "data-cy": "register-btn",
+              color: "primary",
+              class: "me-2",
+              onClick: _ctx.register
+            }, {
+              default: withCtx(() => _cache[6] || (_cache[6] = [
+                createTextVNode("Register")
+              ])),
+              _: 1
+            }, 8, ["onClick"]),
+            createVNode(_component_v_btn, {
+              variant: "outlined",
+              color: "primary",
+              class: "me-2"
+            }, {
+              default: withCtx(() => _cache[7] || (_cache[7] = [
+                createTextVNode("Start a trial study session")
+              ])),
+              _: 1
+            })
+          ]))
+        ]),
+        _: 1
+      })
+    ], true),
+    renderSlot(_ctx.$slots, "additional-content", {}, void 0, true),
+    createVNode(_component_v_card, { class: "my-2" }, {
+      default: withCtx(() => [
+        createVNode(_component_v_toolbar, { density: "compact" }, {
+          default: withCtx(() => [
+            createVNode(_component_v_toolbar_title, null, {
+              default: withCtx(() => _cache[8] || (_cache[8] = [
+                createTextVNode("Tags")
+              ])),
+              _: 1
+            }),
+            createVNode(_component_v_toolbar_items, null, {
+              default: withCtx(() => [
+                createVNode(_component_v_btn, { variant: "text" }, {
+                  default: withCtx(() => [
+                    createTextVNode("(" + toDisplayString(_ctx.tags.length) + ")", 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }),
+        createVNode(_component_v_card_text, null, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tags, (tag2, i) => {
+              return openBlock(), createElementBlock("span", { key: i }, [
+                renderSlot(_ctx.$slots, "tag-link", {
+                  tag: tag2,
+                  courseId: _ctx.courseId
+                }, () => [
+                  createVNode(_component_v_chip, {
+                    variant: "tonal",
+                    class: "me-2 mb-2"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(tag2.name), 1)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ], true)
+              ]);
+            }), 128))
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }),
+    createVNode(_component_course_card_browser, {
+      class: "my-3",
+      "course-id": _ctx.courseId,
+      "view-lookup-function": _ctx.viewLookupFunction,
+      "edit-mode": _ctx.editMode
+    }, null, 8, ["course-id", "view-lookup-function", "edit-mode"])
+  ])) : createCommentVNode("", true);
+}
+const CourseInformation = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-799f691d"]]);
+const _sfc_main = defineComponent({
+  name: "CardBrowser",
+  components: {
+    CardViewer
+  },
+  props: {
+    views: {
+      type: Array,
+      required: true
+    },
+    data: {
+      type: Array,
+      required: true
+    },
+    suppressSpinner: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      viewIndex: 0,
+      previewMode: useCardPreviewModeStore()
+    };
+  },
+  computed: {
+    spinner() {
+      return this.views.length > 1;
+    }
+  },
+  created() {
+    console.log(`[CardBrowser] Card browser created. Cards now in 'prewviewMode'`);
+    this.previewMode.setPreviewMode(true);
+  },
+  unmounted() {
+    console.log(`[CardBrowser] Card browser unmounted. Cards no longer in 'prewviewMode'`);
+    this.previewMode.setPreviewMode(false);
+  },
+  methods: {
+    incrementView() {
+      this.viewIndex++;
+      this.viewIndex = (this.viewIndex + this.views.length) % this.views.length;
+    },
+    decrementView() {
+      this.viewIndex--;
+      this.viewIndex = (this.viewIndex + this.views.length) % this.views.length;
+    }
+  }
+});
+const _hoisted_1 = {
+  key: 0,
+  class: "text-subtitle-1 pa-2"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CardViewer = resolveComponent("CardViewer");
+  const _component_v_icon = resolveComponent("v-icon");
+  const _component_v_btn = resolveComponent("v-btn");
+  const _component_v_row = resolveComponent("v-row");
+  return openBlock(), createBlock(_component_v_row, {
+    column: "",
+    align: "center",
+    justify: "center"
+  }, {
+    default: withCtx(() => [
+      createVNode(_component_CardViewer, {
+        view: _ctx.views[_ctx.viewIndex],
+        data: _ctx.data,
+        course_id: "[browsing]",
+        card_id: "[browsing]"
+      }, null, 8, ["view", "data"]),
+      _cache[2] || (_cache[2] = createElementVNode("br", null, null, -1)),
+      _cache[3] || (_cache[3] = createElementVNode("br", null, null, -1)),
+      !_ctx.suppressSpinner ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        _ctx.spinner ? (openBlock(), createBlock(_component_v_btn, {
+          key: 0,
+          icon: "",
+          variant: "outlined",
+          color: "primary",
+          onClick: _ctx.decrementView
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_v_icon, null, {
+              default: withCtx(() => _cache[0] || (_cache[0] = [
+                createTextVNode("mdi-chevron-left")
+              ])),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["onClick"])) : createCommentVNode("", true),
+        createTextVNode(" " + toDisplayString(_ctx.views[_ctx.viewIndex].name) + " ", 1),
+        _ctx.spinner ? (openBlock(), createBlock(_component_v_btn, {
+          key: 1,
+          icon: "",
+          variant: "outlined",
+          color: "primary",
+          onClick: _ctx.incrementView
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_v_icon, null, {
+              default: withCtx(() => _cache[1] || (_cache[1] = [
+                createTextVNode("mdi-chevron-right")
+              ])),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["onClick"])) : createCommentVNode("", true)
+      ])) : createCommentVNode("", true)
+    ]),
+    _: 1
+  });
+}
+const CardBrowser = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
   AudioAutoPlayer,
+  CardBrowser,
   CardLoader,
   CardViewer,
-  _sfc_main$6 as CodeBlockRenderer,
+  _sfc_main$a as CodeBlockRenderer,
+  CourseCardBrowser,
+  CourseInformation,
   Displayable,
   FillInInput,
   HeatMap,
@@ -16346,6 +17521,7 @@ export {
   StudySession,
   StudySessionTimer,
   TrueFalse as TFSelect,
+  TagsInput,
   UserChip,
   UserInputNumber,
   UserInputString,