@vue-skuilder/common-ui 0.2.35 → 0.2.37

package/dist/components/PaginatingToolbar.mjs

@@ -0,0 +1,94 @@
+import "../_virtual/_rolldown/runtime.mjs";
+import e from "../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./PaginatingToolbar.vue_vue_type_script_lang.mjs";
+/* empty css                                                                   */
+import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, openBlock as c, resolveComponent as l, toDisplayString as u, withCtx as d } from "vue";
+//#region src/components/PaginatingToolbar.vue
+var f = {
+	key: 0,
+	class: "ms-2 text-subtitle-2",
+	"data-cy": "paginating-toolbar-subtitle"
+};
+function _sfc_render(e, t, p, m, h, g) {
+	let _ = l("v-toolbar-title"), v = l("v-spacer"), y = l("v-icon"), b = l("v-btn"), x = l("v-select"), S = l("v-toolbar");
+	return c(), n(S, { density: "compact" }, {
+		default: d(() => [
+			s(_, null, {
+				default: d(() => [a("span", null, u(e.title), 1), e.subtitle ? (c(), i("span", f, u(e.subtitle), 1)) : r("", !0)]),
+				_: 1
+			}),
+			s(v),
+			s(b, {
+				variant: "text",
+				icon: "",
+				color: "secondary",
+				disabled: e.page == 1,
+				onClick: t[0] || (t[0] = (t) => e.$emit("first"))
+			}, {
+				default: d(() => [s(y, null, {
+					default: d(() => t[5] || (t[5] = [o("mdi-page-first")])),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["disabled"]),
+			s(b, {
+				variant: "text",
+				icon: "",
+				color: "secondary",
+				disabled: e.page == 1,
+				onClick: t[1] || (t[1] = (t) => e.$emit("prev"))
+			}, {
+				default: d(() => [s(y, null, {
+					default: d(() => t[6] || (t[6] = [o("mdi-chevron-left")])),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["disabled"]),
+			s(x, {
+				"model-value": e.page,
+				items: e.pages,
+				class: "pageSelect",
+				density: "compact",
+				"hide-details": "",
+				"return-object": !1,
+				variant: "outlined",
+				"onUpdate:modelValue": t[2] || (t[2] = (t) => e.$emit("set-page", t))
+			}, {
+				selection: d(({ item: e }) => [o(u(e.value), 1)]),
+				_: 1
+			}, 8, ["model-value", "items"]),
+			s(b, {
+				variant: "text",
+				icon: "",
+				color: "secondary",
+				disabled: e.page == e.pages.length,
+				onClick: t[3] || (t[3] = (t) => e.$emit("next"))
+			}, {
+				default: d(() => [s(y, null, {
+					default: d(() => t[7] || (t[7] = [o("mdi-chevron-right")])),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["disabled"]),
+			s(b, {
+				variant: "text",
+				icon: "",
+				color: "secondary",
+				disabled: e.page == e.pages.length,
+				onClick: t[4] || (t[4] = (t) => e.$emit("last"))
+			}, {
+				default: d(() => [s(y, null, {
+					default: d(() => t[8] || (t[8] = [o("mdi-page-last")])),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["disabled"])
+		]),
+		_: 1
+	});
+}
+var p = /* @__PURE__ */ e(t, [["render", _sfc_render], ["__scopeId", "data-v-a75fea7e"]]);
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=PaginatingToolbar.mjs.map

package/dist/components/PaginatingToolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginatingToolbar.mjs","names":[],"sources":["../../src/components/PaginatingToolbar.vue"],"sourcesContent":["<template>\n  <v-toolbar density=\"compact\">\n    <v-toolbar-title>\n      <span>{{ title }}</span>\n      <span v-if=\"subtitle\" class=\"ms-2 text-subtitle-2\" data-cy=\"paginating-toolbar-subtitle\">{{ subtitle }}</span>\n    </v-toolbar-title>\n    <v-spacer></v-spacer>\n    <v-btn variant=\"text\" icon color=\"secondary\" :disabled=\"page == 1\" @click=\"$emit('first')\">\n      <v-icon>mdi-page-first</v-icon>\n    </v-btn>\n    <v-btn variant=\"text\" icon color=\"secondary\" :disabled=\"page == 1\" @click=\"$emit('prev')\">\n      <v-icon>mdi-chevron-left</v-icon>\n    </v-btn>\n\n    <v-select\n      :model-value=\"page\"\n      :items=\"pages\"\n      class=\"pageSelect\"\n      density=\"compact\"\n      hide-details\n      :return-object=\"false\"\n      variant=\"outlined\"\n      @update:model-value=\"(val: unknown) => $emit('set-page', val)\"\n    >\n      <template #selection=\"{ item }\">\n        {{ item.value }}\n      </template>\n    </v-select>\n\n    <v-btn variant=\"text\" icon color=\"secondary\" :disabled=\"page == pages.length\" @click=\"$emit('next')\">\n      <v-icon>mdi-chevron-right</v-icon>\n    </v-btn>\n    <v-btn variant=\"text\" icon color=\"secondary\" :disabled=\"page == pages.length\" @click=\"$emit('last')\">\n      <v-icon>mdi-page-last</v-icon>\n    </v-btn>\n  </v-toolbar>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport type { PaginatingToolbarProps, PaginatingToolbarEvents } from './PaginatingToolbar.types';\n\nexport default defineComponent({\n  name: 'PaginatingToolbar',\n\n  props: {\n    pages: {\n      type: Array as PropType<number[]>,\n      required: true,\n    },\n    page: {\n      type: Number,\n      required: true,\n    },\n    title: {\n      type: String,\n      required: false,\n      default: '',\n    },\n    subtitle: {\n      type: String,\n      required: false,\n      default: '',\n    },\n  } as const,\n\n  emits: ['first', 'prev', 'next', 'last', 'set-page'],\n});\n</script>\n\n<style scoped>\n.pageSelect {\n  max-width: 60px;\n}\n</style>\n"],"mappings":";;;;;;;CAAA,KAAA;CAI4B,OAAM;CAAuB,WAAQ;;;;aAH/D,EAkCY,GAAA,EAlCD,SAAQ,WAAS,EAAA;EAD9B,SAAA,QAKsB;GAHlB,EAGkB,GAAA,MAAA;IALtB,SAAA,QAG8B,CAAxB,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA,EACF,EAAA,YAAA,GAAA,EAAZ,EAA8G,QAA9G,GAA8G,EAAlB,EAAA,SAAQ,EAAA,EAAA,IAJ1G,EAAA,IAAA,GAAA,CAAA,CAAA;IAAA,GAAA;;GAMI,EAAqB,EAAA;GACrB,EAEQ,GAAA;IAFD,SAAQ;IAAO,MAAA;IAAK,OAAM;IAAa,UAAU,EAAA,QAAI;IAAQ,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,QAAA;;IAPpF,SAAA,QAQqC,CAA/B,EAA+B,GAAA,MAAA;KARrC,SAAA,QAQ4B,EAAA,OAAA,EAAA,KAAA,CAR5B,EAQc,iBAAc,CAAA,EAAA;KAR5B,GAAA;;IAAA,GAAA;;GAUI,EAEQ,GAAA;IAFD,SAAQ;IAAO,MAAA;IAAK,OAAM;IAAa,UAAU,EAAA,QAAI;IAAQ,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,OAAA;;IAVpF,SAAA,QAWuC,CAAjC,EAAiC,GAAA,MAAA;KAXvC,SAAA,QAW8B,EAAA,OAAA,EAAA,KAAA,CAX9B,EAWc,mBAAgB,CAAA,EAAA;KAX9B,GAAA;;IAAA,GAAA;;GAcI,EAaW,GAAA;IAZR,eAAa,EAAA;IACb,OAAO,EAAA;IACR,OAAM;IACN,SAAQ;IACR,gBAAA;IACC,iBAAe;IAChB,SAAQ;IACP,uBAAkB,EAAA,OAAA,EAAA,MAAG,MAAiB,EAAA,MAAK,YAAa,EAAG;;IAEjD,WAAS,GACF,EADM,cAAI,CAxBlC,EAAA,EAyBW,EAAK,MAAK,EAAA,EAAA,CAAA,CAAA;IAzBrB,GAAA;;GA6BI,EAEQ,GAAA;IAFD,SAAQ;IAAO,MAAA;IAAK,OAAM;IAAa,UAAU,EAAA,QAAQ,EAAA,MAAM;IAAS,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,OAAA;;IA7B/F,SAAA,QA8BwC,CAAlC,EAAkC,GAAA,MAAA;KA9BxC,SAAA,QA8B+B,EAAA,OAAA,EAAA,KAAA,CA9B/B,EA8Bc,oBAAiB,CAAA,EAAA;KA9B/B,GAAA;;IAAA,GAAA;;GAgCI,EAEQ,GAAA;IAFD,SAAQ;IAAO,MAAA;IAAK,OAAM;IAAa,UAAU,EAAA,QAAQ,EAAA,MAAM;IAAS,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,OAAA;;IAhC/F,SAAA,QAiCoC,CAA9B,EAA8B,GAAA,MAAA;KAjCpC,SAAA,QAiC2B,EAAA,OAAA,EAAA,KAAA,CAjC3B,EAiCc,gBAAa,CAAA,EAAA;KAjC3B,GAAA;;IAAA,GAAA;;;EAAA,GAAA"}

package/dist/components/PaginatingToolbar.vue_vue_type_script_lang.mjs

@@ -0,0 +1,36 @@
+import { defineComponent as e } from "vue";
+//#region src/components/PaginatingToolbar.vue?vue&type=script&lang.ts
+var t = e({
+	name: "PaginatingToolbar",
+	props: {
+		pages: {
+			type: Array,
+			required: !0
+		},
+		page: {
+			type: Number,
+			required: !0
+		},
+		title: {
+			type: String,
+			required: !1,
+			default: ""
+		},
+		subtitle: {
+			type: String,
+			required: !1,
+			default: ""
+		}
+	},
+	emits: [
+		"first",
+		"prev",
+		"next",
+		"last",
+		"set-page"
+	]
+});
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=PaginatingToolbar.vue_vue_type_script_lang.mjs.map

package/dist/components/PaginatingToolbar.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginatingToolbar.vue_vue_type_script_lang.mjs","names":[],"sources":["../../src/components/PaginatingToolbar.vue"],"sourcesContent":["<template>\n  <v-toolbar density=\"compact\">\n    <v-toolbar-title>\n      <span>{{ title }}</span>\n      <span v-if=\"subtitle\" class=\"ms-2 text-subtitle-2\" data-cy=\"paginating-toolbar-subtitle\">{{ subtitle }}</span>\n    </v-toolbar-title>\n    <v-spacer></v-spacer>\n    <v-btn variant=\"text\" icon color=\"secondary\" :disabled=\"page == 1\" @click=\"$emit('first')\">\n      <v-icon>mdi-page-first</v-icon>\n    </v-btn>\n    <v-btn variant=\"text\" icon color=\"secondary\" :disabled=\"page == 1\" @click=\"$emit('prev')\">\n      <v-icon>mdi-chevron-left</v-icon>\n    </v-btn>\n\n    <v-select\n      :model-value=\"page\"\n      :items=\"pages\"\n      class=\"pageSelect\"\n      density=\"compact\"\n      hide-details\n      :return-object=\"false\"\n      variant=\"outlined\"\n      @update:model-value=\"(val: unknown) => $emit('set-page', val)\"\n    >\n      <template #selection=\"{ item }\">\n        {{ item.value }}\n      </template>\n    </v-select>\n\n    <v-btn variant=\"text\" icon color=\"secondary\" :disabled=\"page == pages.length\" @click=\"$emit('next')\">\n      <v-icon>mdi-chevron-right</v-icon>\n    </v-btn>\n    <v-btn variant=\"text\" icon color=\"secondary\" :disabled=\"page == pages.length\" @click=\"$emit('last')\">\n      <v-icon>mdi-page-last</v-icon>\n    </v-btn>\n  </v-toolbar>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport type { PaginatingToolbarProps, PaginatingToolbarEvents } from './PaginatingToolbar.types';\n\nexport default defineComponent({\n  name: 'PaginatingToolbar',\n\n  props: {\n    pages: {\n      type: Array as PropType<number[]>,\n      required: true,\n    },\n    page: {\n      type: Number,\n      required: true,\n    },\n    title: {\n      type: String,\n      required: false,\n      default: '',\n    },\n    subtitle: {\n      type: String,\n      required: false,\n      default: '',\n    },\n  } as const,\n\n  emits: ['first', 'prev', 'next', 'last', 'set-page'],\n});\n</script>\n\n<style scoped>\n.pageSelect {\n  max-width: 60px;\n}\n</style>\n"],"mappings":";;AA0CA,IAAA,IAAe,EAAgB;CAC7B,MAAM;CAEN,OAAO;EACL,OAAO;GACL,MAAM;GACN,UAAU;GACX;EACD,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EACD,OAAO;GACL,MAAM;GACN,UAAU;GACV,SAAS;GACV;EACD,UAAU;GACR,MAAM;GACN,UAAU;GACV,SAAS;GACV;EACH;CAEA,OAAO;EAAC;EAAS;EAAQ;EAAQ;EAAQ;EAAW;CACrD,CAAC"}

package/dist/components/SessionControllerDebug.mjs

@@ -0,0 +1,130 @@
+import "../_virtual/_rolldown/runtime.mjs";
+import e from "../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./SessionControllerDebug.vue_vue_type_script_lang.mjs";
+/* empty css                                                                        */
+import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, openBlock as l, renderList as u, resolveComponent as d, toDisplayString as f, withCtx as p } from "vue";
+//#region src/components/SessionControllerDebug.vue
+var m = { class: "debug-section" }, h = { class: "debug-header" }, g = { class: "debug-stats" }, _ = { class: "text-caption" }, v = { class: "text-caption ml-2" }, y = {
+	key: 0,
+	class: "debug-items"
+}, b = { class: "text-caption" }, x = { class: "text-caption text-grey ml-1" }, S = {
+	class: "text-caption ml-1",
+	style: { color: "#90caf9" }
+}, C = {
+	key: 0,
+	class: "text-caption text-grey"
+}, w = {
+	key: 1,
+	class: "text-caption text-grey"
+}, T = { class: "debug-section" }, E = { class: "debug-header" }, D = { class: "debug-stats" }, O = { class: "text-caption" }, k = { class: "text-caption ml-2" }, A = {
+	key: 0,
+	class: "debug-items"
+}, j = { class: "text-caption" }, M = { class: "text-caption text-grey ml-1" }, N = {
+	key: 0,
+	class: "text-caption text-grey"
+}, P = {
+	key: 1,
+	class: "text-caption text-grey"
+}, F = { class: "debug-section" }, I = { class: "debug-header" }, L = { class: "debug-stats" }, R = { class: "text-caption" }, z = { class: "text-caption ml-2" }, B = {
+	key: 0,
+	class: "debug-items"
+}, V = { class: "text-caption" }, H = {
+	key: 0,
+	class: "text-caption text-grey"
+}, U = {
+	key: 1,
+	class: "text-caption text-grey"
+};
+function _sfc_render(e, t, W, ee, te, G) {
+	let K = d("v-spacer"), q = d("v-icon"), J = d("v-card-title"), Y = d("v-col"), X = d("v-row"), Z = d("v-divider"), Q = d("v-card-text"), $ = d("v-card");
+	return e.sessionController ? (l(), r($, {
+		key: 0,
+		class: "session-debug ma-2",
+		elevation: "2"
+	}, {
+		default: p(() => [c(J, { class: "text-caption bg-grey-darken-3" }, {
+			default: p(() => [
+				t[1] || (t[1] = s(" Session Controller Debug ")),
+				c(K),
+				c(q, { size: "small" }, {
+					default: p(() => t[0] || (t[0] = [s("mdi-bug")])),
+					_: 1
+				})
+			]),
+			_: 1
+		}), c(Q, { class: "pa-2" }, {
+			default: p(() => [c(X, { dense: "" }, {
+				default: p(() => [c(Y, {
+					cols: "12",
+					md: "8"
+				}, {
+					default: p(() => [o("div", m, [
+						o("div", h, [c(q, {
+							size: "x-small",
+							class: "mr-1"
+						}, {
+							default: p(() => t[2] || (t[2] = [s("mdi-sort")])),
+							_: 1
+						}), t[3] || (t[3] = o("strong", null, "Supply Queue", -1))]),
+						o("div", g, [o("span", _, "Length: " + f(e.debugInfo.supplyQueue.length), 1), o("span", v, "Dequeued: " + f(e.debugInfo.supplyQueue.dequeueCount), 1)]),
+						e.debugInfo.supplyQueue.items.length > 0 ? (l(), a("div", y, [(l(!0), a(n, null, u(e.debugInfo.supplyQueue.items.slice(0, 8), (t, n) => (l(), a("div", {
+							key: n,
+							class: "debug-item"
+						}, [
+							o("span", b, f(n) + ": " + f(t.courseID) + "::" + f(t.cardID), 1),
+							o("span", x, "(" + f(t.status) + ")", 1),
+							o("span", S, f(e.fmtScore(t.score)), 1)
+						]))), 128)), e.debugInfo.supplyQueue.items.length > 8 ? (l(), a("div", C, " ... +" + f(e.debugInfo.supplyQueue.items.length - 8) + " more ", 1)) : i("", !0)])) : (l(), a("div", w, " (empty) "))
+					])]),
+					_: 1
+				}), c(Y, {
+					cols: "12",
+					md: "4"
+				}, {
+					default: p(() => [o("div", T, [
+						o("div", E, [c(q, {
+							size: "x-small",
+							class: "mr-1"
+						}, {
+							default: p(() => t[4] || (t[4] = [s("mdi-alert-circle")])),
+							_: 1
+						}), t[5] || (t[5] = o("strong", null, "Failed Cards Queue", -1))]),
+						o("div", D, [o("span", O, "Length: " + f(e.debugInfo.failedQueue.length), 1), o("span", k, "Dequeued: " + f(e.debugInfo.failedQueue.dequeueCount), 1)]),
+						e.debugInfo.failedQueue.items.length > 0 ? (l(), a("div", A, [(l(!0), a(n, null, u(e.debugInfo.failedQueue.items.slice(0, 5), (e, t) => (l(), a("div", {
+							key: t,
+							class: "debug-item"
+						}, [o("span", j, f(t) + ": " + f(e.courseID) + "::" + f(e.cardID), 1), o("span", M, "(" + f(e.status) + ")", 1)]))), 128)), e.debugInfo.failedQueue.items.length > 5 ? (l(), a("div", N, " ... +" + f(e.debugInfo.failedQueue.items.length - 5) + " more ", 1)) : i("", !0)])) : (l(), a("div", P, " (empty) "))
+					])]),
+					_: 1
+				})]),
+				_: 1
+			}), c(X, { dense: "" }, {
+				default: p(() => [c(Y, { cols: "12" }, {
+					default: p(() => [c(Z, { class: "my-2" }), o("div", F, [
+						o("div", I, [c(q, {
+							size: "x-small",
+							class: "mr-1"
+						}, {
+							default: p(() => t[6] || (t[6] = [s("mdi-database")])),
+							_: 1
+						}), t[7] || (t[7] = o("strong", null, "Hydrated Cards Cache", -1))]),
+						o("div", L, [o("span", R, "Cached: " + f(e.debugInfo.hydratedCache.count), 1), o("span", z, "Failed Cache: " + f(e.debugInfo.hydratedCache.failedCacheSize), 1)]),
+						e.debugInfo.hydratedCache.items.length > 0 ? (l(), a("div", B, [(l(!0), a(n, null, u(e.debugInfo.hydratedCache.items.slice(0, 8), (e, t) => (l(), a("div", {
+							key: t,
+							class: "debug-item d-inline-block mr-3"
+						}, [o("span", V, f(e.courseID) + "::" + f(e.cardID), 1)]))), 128)), e.debugInfo.hydratedCache.items.length > 8 ? (l(), a("div", H, " ... +" + f(e.debugInfo.hydratedCache.items.length - 8) + " more ", 1)) : i("", !0)])) : (l(), a("div", U, " (empty) "))
+					])]),
+					_: 1
+				})]),
+				_: 1
+			})]),
+			_: 1
+		})]),
+		_: 1
+	})) : i("", !0);
+}
+var W = /* @__PURE__ */ e(t, [["render", _sfc_render], ["__scopeId", "data-v-641ac170"]]);
+//#endregion
+export { W as default };
+
+//# sourceMappingURL=SessionControllerDebug.mjs.map

package/dist/components/SessionControllerDebug.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionControllerDebug.mjs","names":[],"sources":["../../src/components/SessionControllerDebug.vue"],"sourcesContent":["<template>\n  <v-card v-if=\"sessionController\" class=\"session-debug ma-2\" elevation=\"2\">\n    <v-card-title class=\"text-caption bg-grey-darken-3\">\n      Session Controller Debug\n      <v-spacer></v-spacer>\n      <v-icon size=\"small\">mdi-bug</v-icon>\n    </v-card-title>\n\n    <v-card-text class=\"pa-2\">\n      <v-row dense>\n        <!-- Supply Queue (new + review, rank-ordered) -->\n        <v-col cols=\"12\" md=\"8\">\n          <div class=\"debug-section\">\n            <div class=\"debug-header\">\n              <v-icon size=\"x-small\" class=\"mr-1\">mdi-sort</v-icon>\n              <strong>Supply Queue</strong>\n            </div>\n            <div class=\"debug-stats\">\n              <span class=\"text-caption\">Length: {{ debugInfo.supplyQueue.length }}</span>\n              <span class=\"text-caption ml-2\">Dequeued: {{ debugInfo.supplyQueue.dequeueCount }}</span>\n            </div>\n            <div v-if=\"debugInfo.supplyQueue.items.length > 0\" class=\"debug-items\">\n              <div\n                v-for=\"(item, idx) in debugInfo.supplyQueue.items.slice(0, 8)\"\n                :key=\"idx\"\n                class=\"debug-item\"\n              >\n                <span class=\"text-caption\">{{ idx }}: {{ item.courseID }}::{{ item.cardID }}</span>\n                <span class=\"text-caption text-grey ml-1\">({{ item.status }})</span>\n                <span class=\"text-caption ml-1\" style=\"color:#90caf9\">{{ fmtScore(item.score) }}</span>\n              </div>\n              <div v-if=\"debugInfo.supplyQueue.items.length > 8\" class=\"text-caption text-grey\">\n                ... +{{ debugInfo.supplyQueue.items.length - 8 }} more\n              </div>\n            </div>\n            <div v-else class=\"text-caption text-grey\">\n              (empty)\n            </div>\n          </div>\n        </v-col>\n\n        <!-- Failed Cards Queue -->\n        <v-col cols=\"12\" md=\"4\">\n          <div class=\"debug-section\">\n            <div class=\"debug-header\">\n              <v-icon size=\"x-small\" class=\"mr-1\">mdi-alert-circle</v-icon>\n              <strong>Failed Cards Queue</strong>\n            </div>\n            <div class=\"debug-stats\">\n              <span class=\"text-caption\">Length: {{ debugInfo.failedQueue.length }}</span>\n              <span class=\"text-caption ml-2\">Dequeued: {{ debugInfo.failedQueue.dequeueCount }}</span>\n            </div>\n            <div v-if=\"debugInfo.failedQueue.items.length > 0\" class=\"debug-items\">\n              <div\n                v-for=\"(item, idx) in debugInfo.failedQueue.items.slice(0, 5)\"\n                :key=\"idx\"\n                class=\"debug-item\"\n              >\n                <span class=\"text-caption\">{{ idx }}: {{ item.courseID }}::{{ item.cardID }}</span>\n                <span class=\"text-caption text-grey ml-1\">({{ item.status }})</span>\n              </div>\n              <div v-if=\"debugInfo.failedQueue.items.length > 5\" class=\"text-caption text-grey\">\n                ... +{{ debugInfo.failedQueue.items.length - 5 }} more\n              </div>\n            </div>\n            <div v-else class=\"text-caption text-grey\">\n              (empty)\n            </div>\n          </div>\n        </v-col>\n      </v-row>\n\n      <!-- Hydrated Cards Cache -->\n      <v-row dense>\n        <v-col cols=\"12\">\n          <v-divider class=\"my-2\"></v-divider>\n          <div class=\"debug-section\">\n            <div class=\"debug-header\">\n              <v-icon size=\"x-small\" class=\"mr-1\">mdi-database</v-icon>\n              <strong>Hydrated Cards Cache</strong>\n            </div>\n            <div class=\"debug-stats\">\n              <span class=\"text-caption\">Cached: {{ debugInfo.hydratedCache.count }}</span>\n              <span class=\"text-caption ml-2\">Failed Cache: {{ debugInfo.hydratedCache.failedCacheSize }}</span>\n            </div>\n            <div v-if=\"debugInfo.hydratedCache.items.length > 0\" class=\"debug-items\">\n              <div\n                v-for=\"(item, idx) in debugInfo.hydratedCache.items.slice(0, 8)\"\n                :key=\"idx\"\n                class=\"debug-item d-inline-block mr-3\"\n              >\n                <span class=\"text-caption\">{{ item.courseID }}::{{ item.cardID }}</span>\n              </div>\n              <div v-if=\"debugInfo.hydratedCache.items.length > 8\" class=\"text-caption text-grey\">\n                ... +{{ debugInfo.hydratedCache.items.length - 8 }} more\n              </div>\n            </div>\n            <div v-else class=\"text-caption text-grey\">\n              (empty)\n            </div>\n          </div>\n        </v-col>\n      </v-row>\n    </v-card-text>\n  </v-card>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, computed, ref, onMounted, onUnmounted } from 'vue';\nimport { SessionController } from '@vue-skuilder/db';\n\ninterface QueueDebugInfo {\n  length: number;\n  dequeueCount: number;\n  items: Array<{ courseID: string; cardID: string; status: string; score?: number }>;\n}\n\ninterface HydratedCacheInfo {\n  count: number;\n  failedCacheSize: number;\n  items: Array<{ courseID: string; cardID: string }>;\n}\n\nexport interface SessionDebugInfo {\n  supplyQueue: QueueDebugInfo;\n  failedQueue: QueueDebugInfo;\n  hydratedCache: HydratedCacheInfo;\n}\n\nexport default defineComponent({\n  name: 'SessionControllerDebug',\n\n  props: {\n    sessionController: {\n      type: Object as PropType<SessionController<any> | null>,\n      required: true,\n    },\n  },\n\n  setup(props) {\n    const refreshTrigger = ref(0);\n    let pollInterval: NodeJS.Timeout | null = null;\n\n    onMounted(() => {\n      // Poll every 500ms to update debug display\n      pollInterval = setInterval(() => {\n        refreshTrigger.value++;\n      }, 500);\n    });\n\n    onUnmounted(() => {\n      if (pollInterval) {\n        clearInterval(pollInterval);\n      }\n    });\n\n    const debugInfo = computed((): SessionDebugInfo => {\n      // Create dependency on refreshTrigger to force updates\n      refreshTrigger.value;\n\n      if (!props.sessionController) {\n        return {\n          supplyQueue: { length: 0, dequeueCount: 0, items: [] },\n          failedQueue: { length: 0, dequeueCount: 0, items: [] },\n          hydratedCache: { count: 0, failedCacheSize: 0, items: [] },\n        };\n      }\n\n      return props.sessionController.getDebugInfo();\n    });\n\n    /** Format a rank score: finite → 2dp, `+INF` → REQ (required), missing → ''. */\n    const fmtScore = (score?: number): string => {\n      if (score === undefined) return '';\n      if (!Number.isFinite(score)) return 'REQ';\n      return score.toFixed(2);\n    };\n\n    return {\n      debugInfo,\n      fmtScore,\n    };\n  },\n});\n</script>\n\n<style scoped>\n.session-debug {\n  font-family: 'Courier New', monospace;\n  font-size: 0.75rem;\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n.debug-section {\n  padding: 8px;\n  background-color: rgba(255, 255, 255, 0.05);\n  border-radius: 4px;\n  min-height: 120px;\n}\n\n.debug-header {\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  padding-bottom: 4px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.debug-stats {\n  margin-bottom: 8px;\n  display: flex;\n  gap: 8px;\n}\n\n.debug-items {\n  margin-top: 4px;\n  padding-left: 8px;\n}\n\n.debug-item {\n  padding: 2px 0;\n  border-left: 2px solid rgba(255, 255, 255, 0.2);\n  padding-left: 6px;\n  margin-bottom: 2px;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/SessionControllerDebug.vue_vue_type_script_lang.mjs

@@ -0,0 +1,45 @@
+import "../_virtual/_rolldown/runtime.mjs";
+import { computed as e, defineComponent as t, onMounted as n, onUnmounted as r, ref as i } from "vue";
+//#region src/components/SessionControllerDebug.vue?vue&type=script&lang.ts
+var a = t({
+	name: "SessionControllerDebug",
+	props: { sessionController: {
+		type: Object,
+		required: !0
+	} },
+	setup(t) {
+		let a = i(0), o = null;
+		n(() => {
+			o = setInterval(() => {
+				a.value++;
+			}, 500);
+		}), r(() => {
+			o && clearInterval(o);
+		});
+		let s = e(() => (a.value, t.sessionController ? t.sessionController.getDebugInfo() : {
+			supplyQueue: {
+				length: 0,
+				dequeueCount: 0,
+				items: []
+			},
+			failedQueue: {
+				length: 0,
+				dequeueCount: 0,
+				items: []
+			},
+			hydratedCache: {
+				count: 0,
+				failedCacheSize: 0,
+				items: []
+			}
+		})), fmtScore = (e) => e === void 0 ? "" : Number.isFinite(e) ? e.toFixed(2) : "REQ";
+		return {
+			debugInfo: s,
+			fmtScore
+		};
+	}
+});
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=SessionControllerDebug.vue_vue_type_script_lang.mjs.map

package/dist/components/SessionControllerDebug.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionControllerDebug.vue_vue_type_script_lang.mjs","names":[],"sources":["../../src/components/SessionControllerDebug.vue"],"sourcesContent":["<template>\n  <v-card v-if=\"sessionController\" class=\"session-debug ma-2\" elevation=\"2\">\n    <v-card-title class=\"text-caption bg-grey-darken-3\">\n      Session Controller Debug\n      <v-spacer></v-spacer>\n      <v-icon size=\"small\">mdi-bug</v-icon>\n    </v-card-title>\n\n    <v-card-text class=\"pa-2\">\n      <v-row dense>\n        <!-- Supply Queue (new + review, rank-ordered) -->\n        <v-col cols=\"12\" md=\"8\">\n          <div class=\"debug-section\">\n            <div class=\"debug-header\">\n              <v-icon size=\"x-small\" class=\"mr-1\">mdi-sort</v-icon>\n              <strong>Supply Queue</strong>\n            </div>\n            <div class=\"debug-stats\">\n              <span class=\"text-caption\">Length: {{ debugInfo.supplyQueue.length }}</span>\n              <span class=\"text-caption ml-2\">Dequeued: {{ debugInfo.supplyQueue.dequeueCount }}</span>\n            </div>\n            <div v-if=\"debugInfo.supplyQueue.items.length > 0\" class=\"debug-items\">\n              <div\n                v-for=\"(item, idx) in debugInfo.supplyQueue.items.slice(0, 8)\"\n                :key=\"idx\"\n                class=\"debug-item\"\n              >\n                <span class=\"text-caption\">{{ idx }}: {{ item.courseID }}::{{ item.cardID }}</span>\n                <span class=\"text-caption text-grey ml-1\">({{ item.status }})</span>\n                <span class=\"text-caption ml-1\" style=\"color:#90caf9\">{{ fmtScore(item.score) }}</span>\n              </div>\n              <div v-if=\"debugInfo.supplyQueue.items.length > 8\" class=\"text-caption text-grey\">\n                ... +{{ debugInfo.supplyQueue.items.length - 8 }} more\n              </div>\n            </div>\n            <div v-else class=\"text-caption text-grey\">\n              (empty)\n            </div>\n          </div>\n        </v-col>\n\n        <!-- Failed Cards Queue -->\n        <v-col cols=\"12\" md=\"4\">\n          <div class=\"debug-section\">\n            <div class=\"debug-header\">\n              <v-icon size=\"x-small\" class=\"mr-1\">mdi-alert-circle</v-icon>\n              <strong>Failed Cards Queue</strong>\n            </div>\n            <div class=\"debug-stats\">\n              <span class=\"text-caption\">Length: {{ debugInfo.failedQueue.length }}</span>\n              <span class=\"text-caption ml-2\">Dequeued: {{ debugInfo.failedQueue.dequeueCount }}</span>\n            </div>\n            <div v-if=\"debugInfo.failedQueue.items.length > 0\" class=\"debug-items\">\n              <div\n                v-for=\"(item, idx) in debugInfo.failedQueue.items.slice(0, 5)\"\n                :key=\"idx\"\n                class=\"debug-item\"\n              >\n                <span class=\"text-caption\">{{ idx }}: {{ item.courseID }}::{{ item.cardID }}</span>\n                <span class=\"text-caption text-grey ml-1\">({{ item.status }})</span>\n              </div>\n              <div v-if=\"debugInfo.failedQueue.items.length > 5\" class=\"text-caption text-grey\">\n                ... +{{ debugInfo.failedQueue.items.length - 5 }} more\n              </div>\n            </div>\n            <div v-else class=\"text-caption text-grey\">\n              (empty)\n            </div>\n          </div>\n        </v-col>\n      </v-row>\n\n      <!-- Hydrated Cards Cache -->\n      <v-row dense>\n        <v-col cols=\"12\">\n          <v-divider class=\"my-2\"></v-divider>\n          <div class=\"debug-section\">\n            <div class=\"debug-header\">\n              <v-icon size=\"x-small\" class=\"mr-1\">mdi-database</v-icon>\n              <strong>Hydrated Cards Cache</strong>\n            </div>\n            <div class=\"debug-stats\">\n              <span class=\"text-caption\">Cached: {{ debugInfo.hydratedCache.count }}</span>\n              <span class=\"text-caption ml-2\">Failed Cache: {{ debugInfo.hydratedCache.failedCacheSize }}</span>\n            </div>\n            <div v-if=\"debugInfo.hydratedCache.items.length > 0\" class=\"debug-items\">\n              <div\n                v-for=\"(item, idx) in debugInfo.hydratedCache.items.slice(0, 8)\"\n                :key=\"idx\"\n                class=\"debug-item d-inline-block mr-3\"\n              >\n                <span class=\"text-caption\">{{ item.courseID }}::{{ item.cardID }}</span>\n              </div>\n              <div v-if=\"debugInfo.hydratedCache.items.length > 8\" class=\"text-caption text-grey\">\n                ... +{{ debugInfo.hydratedCache.items.length - 8 }} more\n              </div>\n            </div>\n            <div v-else class=\"text-caption text-grey\">\n              (empty)\n            </div>\n          </div>\n        </v-col>\n      </v-row>\n    </v-card-text>\n  </v-card>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, computed, ref, onMounted, onUnmounted } from 'vue';\nimport { SessionController } from '@vue-skuilder/db';\n\ninterface QueueDebugInfo {\n  length: number;\n  dequeueCount: number;\n  items: Array<{ courseID: string; cardID: string; status: string; score?: number }>;\n}\n\ninterface HydratedCacheInfo {\n  count: number;\n  failedCacheSize: number;\n  items: Array<{ courseID: string; cardID: string }>;\n}\n\nexport interface SessionDebugInfo {\n  supplyQueue: QueueDebugInfo;\n  failedQueue: QueueDebugInfo;\n  hydratedCache: HydratedCacheInfo;\n}\n\nexport default defineComponent({\n  name: 'SessionControllerDebug',\n\n  props: {\n    sessionController: {\n      type: Object as PropType<SessionController<any> | null>,\n      required: true,\n    },\n  },\n\n  setup(props) {\n    const refreshTrigger = ref(0);\n    let pollInterval: NodeJS.Timeout | null = null;\n\n    onMounted(() => {\n      // Poll every 500ms to update debug display\n      pollInterval = setInterval(() => {\n        refreshTrigger.value++;\n      }, 500);\n    });\n\n    onUnmounted(() => {\n      if (pollInterval) {\n        clearInterval(pollInterval);\n      }\n    });\n\n    const debugInfo = computed((): SessionDebugInfo => {\n      // Create dependency on refreshTrigger to force updates\n      refreshTrigger.value;\n\n      if (!props.sessionController) {\n        return {\n          supplyQueue: { length: 0, dequeueCount: 0, items: [] },\n          failedQueue: { length: 0, dequeueCount: 0, items: [] },\n          hydratedCache: { count: 0, failedCacheSize: 0, items: [] },\n        };\n      }\n\n      return props.sessionController.getDebugInfo();\n    });\n\n    /** Format a rank score: finite → 2dp, `+INF` → REQ (required), missing → ''. */\n    const fmtScore = (score?: number): string => {\n      if (score === undefined) return '';\n      if (!Number.isFinite(score)) return 'REQ';\n      return score.toFixed(2);\n    };\n\n    return {\n      debugInfo,\n      fmtScore,\n    };\n  },\n});\n</script>\n\n<style scoped>\n.session-debug {\n  font-family: 'Courier New', monospace;\n  font-size: 0.75rem;\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n.debug-section {\n  padding: 8px;\n  background-color: rgba(255, 255, 255, 0.05);\n  border-radius: 4px;\n  min-height: 120px;\n}\n\n.debug-header {\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  padding-bottom: 4px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.debug-stats {\n  margin-bottom: 8px;\n  display: flex;\n  gap: 8px;\n}\n\n.debug-items {\n  margin-top: 4px;\n  padding-left: 8px;\n}\n\n.debug-item {\n  padding: 2px 0;\n  border-left: 2px solid rgba(255, 255, 255, 0.2);\n  padding-left: 6px;\n  margin-bottom: 2px;\n}\n</style>\n"],"mappings":";;;AAiIA,IAAA,IAAe,EAAgB;CAC7B,MAAM;CAEN,OAAO,EACL,mBAAmB;EACjB,MAAM;EACN,UAAU;EACX,EACF;CAED,MAAM,GAAO;EACX,IAAM,IAAiB,EAAI,EAAE,EACzB,IAAsC;AAS1C,EAPA,QAAgB;AAEd,OAAe,kBAAkB;AAC/B,MAAe;MACd,IAAI;IACP,EAEF,QAAkB;AAChB,GAAI,KACF,cAAc,EAAa;IAE7B;EAEF,IAAM,IAAY,SAEhB,EAAe,OAEV,EAAM,oBAQJ,EAAM,kBAAkB,cAAc,GAPpC;GACL,aAAa;IAAE,QAAQ;IAAG,cAAc;IAAG,OAAO,EAAC;IAAG;GACtD,aAAa;IAAE,QAAQ;IAAG,cAAc;IAAG,OAAO,EAAC;IAAG;GACtD,eAAe;IAAE,OAAO;IAAG,iBAAiB;IAAG,OAAO,EAAC;IAAG;GAC3D,EAIH,EAGI,YAAY,MACZ,MAAU,KAAA,IAAkB,KAC3B,OAAO,SAAS,EAAM,GACpB,EAAM,QAAQ,EAAE,GADa;AAItC,SAAO;GACL;GACA;GACD;;CAEJ,CAAC"}

package/dist/components/SkMouseTrap.mjs

@@ -0,0 +1,66 @@
+import "../_virtual/_rolldown/runtime.mjs";
+import e from "../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./SkMouseTrap.vue_vue_type_script_lang.mjs";
+import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, mergeProps as l, openBlock as u, renderList as d, resolveComponent as f, toDisplayString as p, withCtx as m } from "vue";
+//#region src/components/SkMouseTrap.vue
+var h = { class: "text-caption ml-2" };
+function _sfc_render(e, t, g, _, v, y) {
+	let b = f("v-icon"), x = f("v-btn"), S = f("v-toolbar-title"), C = f("v-toolbar"), w = f("v-spacer"), T = f("v-list-item"), E = f("v-list"), D = f("v-card"), O = f("v-dialog");
+	return e.display ? (u(), r(O, {
+		key: 0,
+		"max-width": "500px",
+		transition: "dialog-transition"
+	}, {
+		activator: m(({ props: e }) => [c(x, l({
+			icon: "",
+			color: "primary"
+		}, e), {
+			default: m(() => [c(b, null, {
+				default: m(() => t[0] || (t[0] = [s("mdi-keyboard")])),
+				_: 1
+			})]),
+			_: 2
+		}, 1040)]),
+		default: m(() => [c(D, null, {
+			default: m(() => [c(C, {
+				color: "secondary",
+				dark: "",
+				dense: ""
+			}, {
+				default: m(() => [c(S, { class: "text-subtitle-1" }, {
+					default: m(() => t[1] || (t[1] = [s("Shortcut keys:")])),
+					_: 1
+				})]),
+				_: 1
+			}), c(E, { dense: "" }, {
+				default: m(() => [(u(!0), a(n, null, d(e.commands, (e) => (u(), r(T, {
+					key: Array.isArray(e.hotkey) ? e.hotkey.join(",") : e.hotkey,
+					class: "py-1"
+				}, {
+					default: m(() => [
+						c(x, {
+							variant: "outlined",
+							color: "primary",
+							class: "text-white",
+							size: "small"
+						}, {
+							default: m(() => [s(p(Array.isArray(e.hotkey) ? e.hotkey[0] : e.hotkey), 1)]),
+							_: 2
+						}, 1024),
+						c(w),
+						o("span", h, p(e.command), 1)
+					]),
+					_: 2
+				}, 1024))), 128))]),
+				_: 1
+			})]),
+			_: 1
+		})]),
+		_: 1
+	})) : i("", !0);
+}
+var g = /* @__PURE__ */ e(t, [["render", _sfc_render]]);
+//#endregion
+export { g as default };
+
+//# sourceMappingURL=SkMouseTrap.mjs.map

package/dist/components/SkMouseTrap.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkMouseTrap.mjs","names":[],"sources":["../../src/components/SkMouseTrap.vue"],"sourcesContent":["<template>\n  <v-dialog v-if=\"display\" max-width=\"500px\" transition=\"dialog-transition\">\n    <template #activator=\"{ props }\">\n      <v-btn icon color=\"primary\" v-bind=\"props\">\n        <v-icon>mdi-keyboard</v-icon>\n      </v-btn>\n    </template>\n\n    <v-card>\n      <v-toolbar color=\"secondary\" dark dense>\n        <v-toolbar-title class=\"text-subtitle-1\">Shortcut keys:</v-toolbar-title>\n      </v-toolbar>\n      <v-list dense>\n        <v-list-item\n          v-for=\"hk in commands\"\n          :key=\"Array.isArray(hk.hotkey) ? hk.hotkey.join(',') : hk.hotkey\"\n          class=\"py-1\"\n        >\n          <v-btn variant=\"outlined\" color=\"primary\" class=\"text-white\" size=\"small\">\n            {{ Array.isArray(hk.hotkey) ? hk.hotkey[0] : hk.hotkey }}\n          </v-btn>\n          <v-spacer></v-spacer>\n          <span class=\"text-caption ml-2\">{{ hk.command }}</span>\n        </v-list-item>\n      </v-list>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport { SkldrMouseTrap, HotKeyMetaData } from '../utils/SkldrMouseTrap';\nimport { SkMouseTrapProps } from './SkMouseTrap.types';\n\nexport default defineComponent({\n  name: 'SkMouseTrap',\n\n  props: {\n    refreshInterval: {\n      type: Number as PropType<SkMouseTrapProps['refreshInterval']>,\n      default: 500,\n    },\n  },\n\n  data() {\n    return {\n      commands: [] as HotKeyMetaData[],\n      display: false,\n      intervalId: null as number | null,\n    };\n  },\n\n  created() {\n    this.intervalId = window.setInterval(this.refreshState, this.refreshInterval);\n  },\n\n  beforeUnmount() {\n    if (this.intervalId !== null) {\n      clearInterval(this.intervalId);\n    }\n  },\n\n  methods: {\n    refreshState() {\n      this.commands = SkldrMouseTrap.commands;\n      this.display = this.commands.length > 0;\n    },\n  },\n});\n</script>\n"],"mappings":";;;;;UAsBgB,OAAM,qBAAmB;;;QArBvB,EAAA,WAAA,GAAA,EAAhB,EAyBW,GAAA;EA1Bb,KAAA;EAC2B,aAAU;EAAQ,YAAW;;EACzC,WAAS,GAGV,EAHc,eAAK,CAC3B,EAEQ,GAFR,EAEQ;GAFD,MAAA;GAAK,OAAM;KAAkB,EAAK,EAAA;GAH/C,SAAA,QAIqC,CAA7B,EAA6B,GAAA,MAAA;IAJrC,SAAA,QAI4B,EAAA,OAAA,EAAA,KAAA,CAJ5B,EAIgB,eAAY,CAAA,EAAA;IAJ5B,GAAA;;GAAA,GAAA;;EAAA,SAAA,QAyBa,CAjBT,EAiBS,GAAA,MAAA;GAzBb,SAAA,QAWkB,CAFZ,EAEY,GAAA;IAFD,OAAM;IAAY,MAAA;IAAK,OAAA;;IATxC,SAAA,QAUiF,CAAzE,EAAyE,GAAA,EAAxD,OAAM,mBAAiB,EAAA;KAVhD,SAAA,QAU+D,EAAA,OAAA,EAAA,KAAA,CAV/D,EAUiD,iBAAc,CAAA,EAAA;KAV/D,GAAA;;IAAA,GAAA;OAYM,EAYS,GAAA,EAZD,OAAA,IAAK,EAAA;IAZnB,SAAA,QAcgC,EAAA,EAAA,GAAA,EADxB,EAUc,GAAA,MAvBtB,EAcuB,EAAA,WAAN,YADT,EAUc,GAAA;KARX,KAAK,MAAM,QAAQ,EAAG,OAAM,GAAI,EAAG,OAAO,KAAI,IAAA,GAAQ,EAAG;KAC1D,OAAM;;KAhBhB,SAAA,QAoBkB;MAFR,EAEQ,GAAA;OAFD,SAAQ;OAAW,OAAM;OAAU,OAAM;OAAa,MAAK;;OAlB5E,SAAA,QAmBqE,CAnBrE,EAAA,EAmBe,MAAM,QAAQ,EAAG,OAAM,GAAI,EAAG,OAAM,KAAM,EAAG,OAAM,EAAA,EAAA,CAAA,CAAA;OAnBlE,GAAA;;MAqBU,EAAqB,EAAA;MACrB,EAAuD,QAAvD,GAAuD,EAApB,EAAG,QAAO,EAAA,EAAA;;KAtBvD,GAAA;;IAAA,GAAA;;GAAA,GAAA;;EAAA,GAAA;OAAA,EAAA,IAAA,GAAA"}

package/dist/components/SkMouseTrap.vue_vue_type_script_lang.mjs

@@ -0,0 +1,31 @@
+import "../_virtual/_rolldown/runtime.mjs";
+import { SkldrMouseTrap as e } from "../utils/SkldrMouseTrap.mjs";
+import { defineComponent as t } from "vue";
+//#region src/components/SkMouseTrap.vue?vue&type=script&lang.ts
+var n = t({
+	name: "SkMouseTrap",
+	props: { refreshInterval: {
+		type: Number,
+		default: 500
+	} },
+	data() {
+		return {
+			commands: [],
+			display: !1,
+			intervalId: null
+		};
+	},
+	created() {
+		this.intervalId = window.setInterval(this.refreshState, this.refreshInterval);
+	},
+	beforeUnmount() {
+		this.intervalId !== null && clearInterval(this.intervalId);
+	},
+	methods: { refreshState() {
+		this.commands = e.commands, this.display = this.commands.length > 0;
+	} }
+});
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=SkMouseTrap.vue_vue_type_script_lang.mjs.map

package/dist/components/SkMouseTrap.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkMouseTrap.vue_vue_type_script_lang.mjs","names":[],"sources":["../../src/components/SkMouseTrap.vue"],"sourcesContent":["<template>\n  <v-dialog v-if=\"display\" max-width=\"500px\" transition=\"dialog-transition\">\n    <template #activator=\"{ props }\">\n      <v-btn icon color=\"primary\" v-bind=\"props\">\n        <v-icon>mdi-keyboard</v-icon>\n      </v-btn>\n    </template>\n\n    <v-card>\n      <v-toolbar color=\"secondary\" dark dense>\n        <v-toolbar-title class=\"text-subtitle-1\">Shortcut keys:</v-toolbar-title>\n      </v-toolbar>\n      <v-list dense>\n        <v-list-item\n          v-for=\"hk in commands\"\n          :key=\"Array.isArray(hk.hotkey) ? hk.hotkey.join(',') : hk.hotkey\"\n          class=\"py-1\"\n        >\n          <v-btn variant=\"outlined\" color=\"primary\" class=\"text-white\" size=\"small\">\n            {{ Array.isArray(hk.hotkey) ? hk.hotkey[0] : hk.hotkey }}\n          </v-btn>\n          <v-spacer></v-spacer>\n          <span class=\"text-caption ml-2\">{{ hk.command }}</span>\n        </v-list-item>\n      </v-list>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport { SkldrMouseTrap, HotKeyMetaData } from '../utils/SkldrMouseTrap';\nimport { SkMouseTrapProps } from './SkMouseTrap.types';\n\nexport default defineComponent({\n  name: 'SkMouseTrap',\n\n  props: {\n    refreshInterval: {\n      type: Number as PropType<SkMouseTrapProps['refreshInterval']>,\n      default: 500,\n    },\n  },\n\n  data() {\n    return {\n      commands: [] as HotKeyMetaData[],\n      display: false,\n      intervalId: null as number | null,\n    };\n  },\n\n  created() {\n    this.intervalId = window.setInterval(this.refreshState, this.refreshInterval);\n  },\n\n  beforeUnmount() {\n    if (this.intervalId !== null) {\n      clearInterval(this.intervalId);\n    }\n  },\n\n  methods: {\n    refreshState() {\n      this.commands = SkldrMouseTrap.commands;\n      this.display = this.commands.length > 0;\n    },\n  },\n});\n</script>\n"],"mappings":";;;;AAkCA,IAAA,IAAe,EAAgB;CAC7B,MAAM;CAEN,OAAO,EACL,iBAAiB;EACf,MAAM;EACN,SAAS;EACV,EACF;CAED,OAAO;AACL,SAAO;GACL,UAAU,EAAC;GACX,SAAS;GACT,YAAY;GACb;;CAGH,UAAU;AACR,OAAK,aAAa,OAAO,YAAY,KAAK,cAAc,KAAK,gBAAgB;;CAG/E,gBAAgB;AACd,EAAI,KAAK,eAAe,QACtB,cAAc,KAAK,WAAW;;CAIlC,SAAS,EACP,eAAe;AAEb,EADA,KAAK,WAAW,EAAe,UAC/B,KAAK,UAAU,KAAK,SAAS,SAAS;IAEzC;CACF,CAAC"}

package/dist/components/SkMouseTrapToolTip.mjs

@@ -0,0 +1,28 @@
+import "../_virtual/_rolldown/runtime.mjs";
+import e from "../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./SkMouseTrapToolTip.vue_vue_type_script_lang.mjs";
+/* empty css                                                                    */
+import { Transition as n, createCommentVNode as r, createElementBlock as i, createVNode as a, normalizeClass as o, openBlock as s, renderSlot as c, toDisplayString as l, withCtx as u } from "vue";
+//#region src/components/SkMouseTrapToolTip.vue
+function _sfc_render(e, t, d, f, p, m) {
+	return s(), i("div", {
+		class: o(["sk-mousetrap-tooltip-wrapper", [e.isControlKeyPressed && !e.disabled && e.highlightEffect !== "none" ? `sk-mousetrap-highlight-${e.highlightEffect}` : ""]]),
+		ref: "wrapperElement"
+	}, [c(e.$slots, "default", {}, void 0, !0), a(n, { name: "fade" }, {
+		default: u(() => [e.showTooltip && e.isControlKeyPressed && !e.disabled ? (s(), i("div", {
+			key: 0,
+			class: o(["sk-mousetrap-tooltip", {
+				"sk-mt-tooltip-top": e.position === "top",
+				"sk-mt-tooltip-bottom": e.position === "bottom",
+				"sk-mt-tooltip-left": e.position === "left",
+				"sk-mt-tooltip-right": e.position === "right"
+			}])
+		}, l(e.formattedHotkey), 3)) : r("", !0)]),
+		_: 1
+	})], 2);
+}
+var d = /* @__PURE__ */ e(t, [["render", _sfc_render], ["__scopeId", "data-v-5d6fb09c"]]);
+//#endregion
+export { d as default };
+
+//# sourceMappingURL=SkMouseTrapToolTip.mjs.map

package/dist/components/SkMouseTrapToolTip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkMouseTrapToolTip.mjs","names":[],"sources":["../../src/components/SkMouseTrapToolTip.vue"],"sourcesContent":["<template>\n  <div\n    class=\"sk-mousetrap-tooltip-wrapper\"\n    ref=\"wrapperElement\"\n    :class=\"[\n      isControlKeyPressed && !disabled && highlightEffect !== 'none' ? `sk-mousetrap-highlight-${highlightEffect}` : '',\n    ]\"\n  >\n    <slot></slot>\n    <transition name=\"fade\">\n      <div\n        v-if=\"showTooltip && isControlKeyPressed && !disabled\"\n        class=\"sk-mousetrap-tooltip\"\n        :class=\"{\n          'sk-mt-tooltip-top': position === 'top',\n          'sk-mt-tooltip-bottom': position === 'bottom',\n          'sk-mt-tooltip-left': position === 'left',\n          'sk-mt-tooltip-right': position === 'right',\n        }\"\n      >\n        {{ formattedHotkey }}\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';\nimport { SkldrMouseTrap, HotKeyMetaData } from '../utils/SkldrMouseTrap';\n\nexport default defineComponent({\n  name: 'SkMouseTrapToolTip',\n\n  props: {\n    hotkey: {\n      type: [String, Array] as PropType<string | string[]>,\n      required: true,\n    },\n    command: {\n      type: String,\n      required: true,\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    position: {\n      type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,\n      default: 'top',\n    },\n    showTooltip: {\n      type: Boolean,\n      default: true,\n    },\n    highlightEffect: {\n      type: String as PropType<'glow' | 'scale' | 'border' | 'none'>,\n      default: 'glow',\n    },\n  },\n\n  emits: ['hotkey-triggered'],\n\n  setup(props, { emit }) {\n    const wrapperElement = ref<HTMLElement | null>(null);\n    const isControlKeyPressed = ref(false);\n    const hotkeyId = ref(`hotkey-${Math.random().toString(36).substring(2, 15)}`);\n\n    // Format hotkey for display\n    const formattedHotkey = computed(() => {\n      const hotkey = Array.isArray(props.hotkey) ? props.hotkey[0] : props.hotkey;\n      // Check if this is a sequence (has spaces) or a combination (has +)\n      if (hotkey.includes(' ')) {\n        // For sequences like \"g h\", display as \"g, h\"\n        return hotkey\n          .toLowerCase()\n          .split(' ')\n          .map((part) => part.charAt(0) + part.slice(1))\n          .join(', ');\n      } else {\n        // For combinations like \"ctrl+s\", display as \"Ctrl + S\"\n        return hotkey\n          .toLowerCase()\n          .split('+')\n          .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n          .join(' + ');\n      }\n    });\n\n    // Apply highlight effect to the actual button/control when Ctrl is pressed\n    watch(\n      () => isControlKeyPressed.value,\n      (pressed) => {\n        if (!wrapperElement.value || props.disabled) return;\n\n        const clickableElement = wrapperElement.value.querySelector(\n          'button, a, input[type=\"button\"], [role=\"button\"]'\n        ) as HTMLElement;\n\n        if (clickableElement) {\n          clickableElement.style.transition = 'all 250ms ease';\n\n          if (pressed && props.highlightEffect !== 'none') {\n            // Add slight brightness increase to the inner element\n            clickableElement.style.filter = 'brightness(1.1)';\n          } else {\n            clickableElement.style.filter = '';\n          }\n        }\n      }\n    );\n\n    // Handle Ctrl key detection\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Control') {\n        isControlKeyPressed.value = true;\n      }\n    };\n\n    const handleKeyUp = (e: KeyboardEvent) => {\n      if (e.key === 'Control') {\n        isControlKeyPressed.value = false;\n      }\n    };\n\n    // Handle clicking the element when hotkey is pressed\n    const handleHotkeyPress = () => {\n      if (props.disabled || !wrapperElement.value) return;\n\n      // Try finding a clickable element within our wrapper\n      let clickableElement = wrapperElement.value.querySelector(\n        'button, a, input[type=\"button\"], [role=\"button\"]'\n      ) as HTMLElement;\n\n      // If no standard clickable element found, try to find navigation or list items\n      if (!clickableElement) {\n        clickableElement = wrapperElement.value.querySelector(\n          'v-list-item, .v-list-item, router-link, .router-link, a, [to]'\n        ) as HTMLElement;\n      }\n\n      // If still no element found, try the wrapper itself - it might be clickable\n      if (\n        !clickableElement &&\n        (wrapperElement.value.hasAttribute('to') ||\n          wrapperElement.value.tagName === 'A' ||\n          wrapperElement.value.classList.contains('v-list-item'))\n      ) {\n        clickableElement = wrapperElement.value;\n      }\n\n      // Get closest parent list item or router link if we found a title/content element\n      if (!clickableElement) {\n        const closestClickableParent = wrapperElement.value.closest('v-list-item, .v-list-item, a, [to]');\n        if (closestClickableParent) {\n          clickableElement = closestClickableParent as HTMLElement;\n        }\n      }\n\n      if (clickableElement) {\n        if (clickableElement.hasAttribute('to')) {\n          // Handle router-link style navigation\n          const routePath = clickableElement.getAttribute('to');\n          if (routePath && window.location.pathname !== routePath) {\n            // Use parent router if available (Vue component)\n            const router = (window as any).$nuxt?.$router || (window as any).$router;\n            if (router && typeof router.push === 'function') {\n              router.push(routePath);\n            } else {\n              // Fallback to regular navigation\n              window.location.pathname = routePath;\n            }\n          }\n          emit('hotkey-triggered', props.hotkey);\n        } else {\n          // Regular click for standard elements\n          clickableElement.click();\n          emit('hotkey-triggered', props.hotkey);\n        }\n      } else {\n        // If no clickable element found, emit the event for parent handling\n        console.log('No clickable element found for hotkey', props.hotkey);\n        emit('hotkey-triggered', props.hotkey);\n      }\n    };\n\n    // Register/unregister the hotkey binding\n    const registerHotkey = () => {\n      if (!props.disabled) {\n        SkldrMouseTrap.addBinding({\n          hotkey: props.hotkey,\n          command: props.command,\n          callback: handleHotkeyPress,\n        });\n      }\n    };\n\n    const unregisterHotkey = () => {\n      if (!props.disabled) {\n        SkldrMouseTrap.removeBinding(props.hotkey);\n      }\n    };\n\n    // Watch for changes to the disabled prop\n    watch(\n      () => props.disabled,\n      (newValue) => {\n        if (newValue) {\n          unregisterHotkey();\n        } else {\n          registerHotkey();\n        }\n      }\n    );\n\n    onMounted(() => {\n      // Register global keyboard listeners for the Ctrl key\n      document.addEventListener('keydown', handleKeyDown);\n      document.addEventListener('keyup', handleKeyUp);\n\n      // Register the hotkey\n      registerHotkey();\n    });\n\n    onBeforeUnmount(() => {\n      // Clean up event listeners\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('keyup', handleKeyUp);\n\n      // Unregister the hotkey\n      unregisterHotkey();\n    });\n\n    return {\n      wrapperElement,\n      isControlKeyPressed,\n      formattedHotkey,\n    };\n  },\n});\n</script>\n\n<style scoped>\n.sk-mousetrap-tooltip-wrapper {\n  display: inline-block;\n  position: relative;\n}\n\n.sk-mousetrap-tooltip {\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.8);\n  color: white;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 12px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 9999;\n}\n\n.sk-mt-tooltip-top {\n  bottom: 100%;\n  margin-bottom: 5px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.sk-mt-tooltip-bottom {\n  top: 100%;\n  margin-top: 5px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.sk-mt-tooltip-left {\n  right: 100%;\n  margin-right: 5px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.sk-mt-tooltip-right {\n  left: 100%;\n  margin-left: 5px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n/* Highlight effects when Ctrl is pressed */\n.sk-mousetrap-highlight-glow {\n  box-shadow: 0 0 8px 2px rgba(25, 118, 210, 0.6);\n  transition: box-shadow 250ms ease;\n}\n\n.sk-mousetrap-highlight-scale {\n  transform: scale(1.03);\n  transition: transform 250ms ease;\n}\n\n.sk-mousetrap-highlight-border {\n  outline: 2px solid rgba(25, 118, 210, 0.8);\n  outline-offset: 2px;\n  border-radius: 4px;\n  transition: outline 250ms ease, outline-offset 250ms ease;\n}\n\n/* Fade transition */\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 250ms ease;\n}\n\n.fade-enter-from,\n.fade-leave-to {\n  opacity: 0;\n}\n</style>\n"],"mappings":";;;;;;;aACE,EAsBM,OAAA;EArBJ,OAFJ,EAAA,CAEU,gCAA8B,CAEpB,EAAA,uBAAmB,CAAK,EAAA,YAAY,EAAA,oBAAe,SAAA,0BAAwC,EAAA,oBAAe,GAAA,CAAA,CAAA;EAD1H,KAAI;KAKJ,EAAa,EAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,GAAA,EACb,EAaa,GAAA,EAbD,MAAK,QAAM,EAAA;EAT3B,SAAA,QAqBY,CAVE,EAAA,eAAe,EAAA,uBAAmB,CAAK,EAAA,YAAA,GAAA,EAD/C,EAWM,OAAA;GArBZ,KAAA;GAYQ,OAZR,EAAA,CAYc,wBAAsB;yBACa,EAAA,aAAQ;4BAA8C,EAAA,aAAQ;0BAA+C,EAAA,aAAQ;2BAA8C,EAAA,aAAQ;;OAOjN,EAAA,gBAAe,EAAA,EAAA,IApB1B,EAAA,IAAA,GAAA,CAAA,CAAA;EAAA,GAAA"}

package/dist/components/SkMouseTrapToolTip.vue_vue_type_script_lang.mjs

@@ -0,0 +1,91 @@
+import "../_virtual/_rolldown/runtime.mjs";
+import { SkldrMouseTrap as e } from "../utils/SkldrMouseTrap.mjs";
+import { computed as t, defineComponent as n, onBeforeUnmount as r, onMounted as i, ref as a, watch as o } from "vue";
+//#region src/components/SkMouseTrapToolTip.vue?vue&type=script&lang.ts
+var s = n({
+	name: "SkMouseTrapToolTip",
+	props: {
+		hotkey: {
+			type: [String, Array],
+			required: !0
+		},
+		command: {
+			type: String,
+			required: !0
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		position: {
+			type: String,
+			default: "top"
+		},
+		showTooltip: {
+			type: Boolean,
+			default: !0
+		},
+		highlightEffect: {
+			type: String,
+			default: "glow"
+		}
+	},
+	emits: ["hotkey-triggered"],
+	setup(n, { emit: s }) {
+		let c = a(null), l = a(!1);
+		a(`hotkey-${Math.random().toString(36).substring(2, 15)}`);
+		let u = t(() => {
+			let e = Array.isArray(n.hotkey) ? n.hotkey[0] : n.hotkey;
+			return e.includes(" ") ? e.toLowerCase().split(" ").map((e) => e.charAt(0) + e.slice(1)).join(", ") : e.toLowerCase().split("+").map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join(" + ");
+		});
+		o(() => l.value, (e) => {
+			if (!c.value || n.disabled) return;
+			let t = c.value.querySelector("button, a, input[type=\"button\"], [role=\"button\"]");
+			t && (t.style.transition = "all 250ms ease", e && n.highlightEffect !== "none" ? t.style.filter = "brightness(1.1)" : t.style.filter = "");
+		});
+		let handleKeyDown = (e) => {
+			e.key === "Control" && (l.value = !0);
+		}, handleKeyUp = (e) => {
+			e.key === "Control" && (l.value = !1);
+		}, handleHotkeyPress = () => {
+			if (n.disabled || !c.value) return;
+			let e = c.value.querySelector("button, a, input[type=\"button\"], [role=\"button\"]");
+			if (e || (e = c.value.querySelector("v-list-item, .v-list-item, router-link, .router-link, a, [to]")), !e && (c.value.hasAttribute("to") || c.value.tagName === "A" || c.value.classList.contains("v-list-item")) && (e = c.value), !e) {
+				let t = c.value.closest("v-list-item, .v-list-item, a, [to]");
+				t && (e = t);
+			}
+			if (e) if (e.hasAttribute("to")) {
+				let t = e.getAttribute("to");
+				if (t && window.location.pathname !== t) {
+					let e = window.$nuxt?.$router || window.$router;
+					e && typeof e.push == "function" ? e.push(t) : window.location.pathname = t;
+				}
+				s("hotkey-triggered", n.hotkey);
+			} else e.click(), s("hotkey-triggered", n.hotkey);
+			else console.log("No clickable element found for hotkey", n.hotkey), s("hotkey-triggered", n.hotkey);
+		}, registerHotkey = () => {
+			n.disabled || e.addBinding({
+				hotkey: n.hotkey,
+				command: n.command,
+				callback: handleHotkeyPress
+			});
+		}, unregisterHotkey = () => {
+			n.disabled || e.removeBinding(n.hotkey);
+		};
+		return o(() => n.disabled, (e) => {
+			e ? unregisterHotkey() : registerHotkey();
+		}), i(() => {
+			document.addEventListener("keydown", handleKeyDown), document.addEventListener("keyup", handleKeyUp), registerHotkey();
+		}), r(() => {
+			document.removeEventListener("keydown", handleKeyDown), document.removeEventListener("keyup", handleKeyUp), unregisterHotkey();
+		}), {
+			wrapperElement: c,
+			isControlKeyPressed: l,
+			formattedHotkey: u
+		};
+	}
+});
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=SkMouseTrapToolTip.vue_vue_type_script_lang.mjs.map