@vue-skuilder/common-ui 0.2.34 → 0.2.36

package/dist/utils/SkldrMouseTrap.mjs

@@ -0,0 +1,48 @@
+import "../_virtual/_rolldown/runtime.mjs";
+import { _defineProperty as e } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/defineProperty.mjs";
+import t from "mousetrap";
+//#region src/utils/SkldrMouseTrap.ts
+function inputElementIsFocused() {
+	let e = document.activeElement;
+	return e instanceof HTMLInputElement && (e.type === "checkbox" || e.type === "radio") ? !1 : e instanceof HTMLElement && (e.tagName === "INPUT" || e.tagName === "TEXTAREA" || e.tagName === "SELECT" || e.isContentEditable);
+}
+var n = class SkldrMouseTrap {
+	constructor() {
+		e(this, "mouseTrap", void 0), e(this, "hotkeys", void 0), this.mouseTrap = new t(), this.mouseTrap.stopCallback = () => !1, this.hotkeys = [];
+	}
+	static get commands() {
+		return SkldrMouseTrap.instance().hotkeys.map((e) => ({
+			command: e.command,
+			hotkey: e.hotkey
+		}));
+	}
+	static addBinding(e) {
+		let t = Array.isArray(e) ? e : [e], n = SkldrMouseTrap.instance();
+		n.hotkeys = [...n.hotkeys, ...t], t.forEach((e) => {
+			n.mouseTrap.bind(e.hotkey, (t, n) => {
+				if (inputElementIsFocused()) {
+					console.log(`Ignoring hotkey ${e.hotkey} while input element is focused`);
+					return;
+				}
+				e.callback(t, n);
+			});
+		});
+	}
+	static removeBinding(e) {
+		let t = SkldrMouseTrap.instance(), n = [...t.hotkeys];
+		Array.isArray(e) && !e.every((e) => typeof e == "string" || typeof e == "number") ? e.forEach((e) => {
+			t.hotkeys = t.hotkeys.filter((t) => JSON.stringify(t.hotkey) !== JSON.stringify(e)), t.mouseTrap.unbind(e);
+		}) : (t.hotkeys = n.filter((t) => JSON.stringify(t.hotkey) !== JSON.stringify(e)), t.mouseTrap.unbind(e));
+	}
+	static reset() {
+		console.warn("SkldrMouseTrap.reset() may affect hotkeys registered by other components. Consider using removeBinding() with specific hotkeys for better component isolation."), SkldrMouseTrap.instance().mouseTrap.reset(), SkldrMouseTrap.instance().hotkeys = [];
+	}
+	static instance() {
+		return SkldrMouseTrap._instance || (SkldrMouseTrap._instance = new SkldrMouseTrap()), SkldrMouseTrap._instance;
+	}
+};
+e(n, "_instance", void 0);
+//#endregion
+export { n as SkldrMouseTrap };
+
+//# sourceMappingURL=SkldrMouseTrap.mjs.map

package/dist/utils/SkldrMouseTrap.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkldrMouseTrap.mjs","names":[],"sources":["../../src/utils/SkldrMouseTrap.ts"],"sourcesContent":["import Mousetrap from 'mousetrap';\nimport { ExtendedKeyboardEvent, MousetrapInstance } from 'mousetrap';\n\nexport interface HotKey extends HotKeyMetaData {\n  callback: (e: ExtendedKeyboardEvent, combo: string) => void;\n}\n\nexport interface HotKeyMetaData {\n  command: string;\n  hotkey: string | string[];\n}\n\n/**\n * Checks if focus is currently on an input element where hotkeys should be ignored\n * @returns true if hotkeys should be ignored, false otherwise\n */\nfunction inputElementIsFocused(): boolean {\n  const activeElement = document.activeElement;\n\n  // Special handling for checkbox and radio inputs\n  if (\n    activeElement instanceof HTMLInputElement &&\n    (activeElement.type === 'checkbox' || activeElement.type === 'radio')\n  ) {\n    return false;\n  }\n\n  return (\n    activeElement instanceof HTMLElement &&\n    (activeElement.tagName === 'INPUT' ||\n      activeElement.tagName === 'TEXTAREA' ||\n      activeElement.tagName === 'SELECT' ||\n      activeElement.isContentEditable)\n  );\n}\n\nexport class SkldrMouseTrap {\n  private static _instance: SkldrMouseTrap;\n\n  private mouseTrap: MousetrapInstance;\n  private hotkeys: HotKey[];\n\n  private constructor() {\n    this.mouseTrap = new Mousetrap();\n    // Allow hotkeys to fire even when input elements are focused — the\n    // inputElementIsFocused() guard in addBinding handles selective suppression.\n    this.mouseTrap.stopCallback = () => false;\n    this.hotkeys = [];\n  }\n\n  public static get commands(): HotKeyMetaData[] {\n    return SkldrMouseTrap.instance().hotkeys.map((hk) => {\n      return {\n        command: hk.command,\n        hotkey: hk.hotkey,\n      };\n    });\n  }\n\n  /**\n   * Add keyboard bindings without resetting existing ones\n   * @param hk Single hotkey or array of hotkeys to bind\n   */\n  public static addBinding(hk: HotKey | HotKey[]) {\n    const hotkeys = Array.isArray(hk) ? hk : [hk];\n    const instance = SkldrMouseTrap.instance();\n\n    // Add to internal registry\n    instance.hotkeys = [...instance.hotkeys, ...hotkeys];\n\n    // Bind each hotkey\n    hotkeys.forEach((k) => {\n      instance.mouseTrap.bind(k.hotkey, (a, b) => {\n        // Skip execution if focus is on input elements\n        if (inputElementIsFocused()) {\n          console.log(`Ignoring hotkey ${k.hotkey} while input element is focused`);\n          return;\n        }\n\n        // console.log(`Running ${k.hotkey}`);\n        k.callback(a, b);\n      });\n    });\n  }\n\n  /**\n   * Remove specific keyboard binding(s) without affecting others\n   * @param hotkey Single hotkey or array of hotkeys to remove\n   */\n  public static removeBinding(hotkey: string | string[]) {\n    const instance = SkldrMouseTrap.instance();\n    const currentHotkeys = [...instance.hotkeys];\n\n    if (\n      Array.isArray(hotkey) &&\n      !hotkey.every((k) => typeof k === 'string' || typeof k === 'number')\n    ) {\n      // If it's an array of hotkey specifiers\n      hotkey.forEach((key) => {\n        // Remove from internal registry\n        instance.hotkeys = instance.hotkeys.filter((k) => {\n          return JSON.stringify(k.hotkey) !== JSON.stringify(key);\n        });\n\n        // Unbind from Mousetrap\n        instance.mouseTrap.unbind(key);\n      });\n    } else {\n      // Single hotkey removal (original implementation)\n      // Remove from internal registry\n      instance.hotkeys = currentHotkeys.filter((k) => {\n        // Convert both to JSON for comparison to handle arrays correctly\n        return JSON.stringify(k.hotkey) !== JSON.stringify(hotkey);\n      });\n\n      // Unbind from Mousetrap\n      instance.mouseTrap.unbind(hotkey);\n    }\n  }\n\n  /**\n   * Reset all keyboard bindings\n   * @warning Consider using removeBinding() for targeted cleanup instead to avoid affecting other components\n   */\n  public static reset() {\n    console.warn(\n      'SkldrMouseTrap.reset() may affect hotkeys registered by other components. ' +\n        'Consider using removeBinding() with specific hotkeys for better component isolation.'\n    );\n    SkldrMouseTrap.instance().mouseTrap.reset();\n    SkldrMouseTrap.instance().hotkeys = [];\n  }\n\n  private static instance(): SkldrMouseTrap {\n    if (SkldrMouseTrap._instance) {\n      return SkldrMouseTrap._instance;\n    } else {\n      SkldrMouseTrap._instance = new SkldrMouseTrap();\n      return SkldrMouseTrap._instance;\n    }\n  }\n}\n"],"mappings":";;;;AAgBA,SAAS,wBAAiC;CACxC,IAAM,IAAgB,SAAS;AAU/B,QANE,aAAyB,qBACxB,EAAc,SAAS,cAAc,EAAc,SAAS,WAEtD,KAIP,aAAyB,gBACxB,EAAc,YAAY,WACzB,EAAc,YAAY,cAC1B,EAAc,YAAY,YAC1B,EAAc;;AAIpB,IAAa,IAAb,MAAa,eAAe;CAM1B,cAAsB;AAKpB,UARF,aAAA,KAAA,EAAQ,UACR,WAAA,KAAA,EAAQ,EAGN,KAAK,YAAY,IAAI,GAAW,EAGhC,KAAK,UAAU,qBAAqB,IACpC,KAAK,UAAU,EAAE;;CAGnB,WAAkB,WAA6B;AAC7C,SAAO,eAAe,UAAU,CAAC,QAAQ,KAAK,OACrC;GACL,SAAS,EAAG;GACZ,QAAQ,EAAG;GACZ,EACD;;CAOJ,OAAc,WAAW,GAAuB;EAC9C,IAAM,IAAU,MAAM,QAAQ,EAAG,GAAG,IAAK,CAAC,EAAG,EACvC,IAAW,eAAe,UAAU;AAM1C,EAHA,EAAS,UAAU,CAAC,GAAG,EAAS,SAAS,GAAG,EAAQ,EAGpD,EAAQ,SAAS,MAAM;AACrB,KAAS,UAAU,KAAK,EAAE,SAAS,GAAG,MAAM;AAE1C,QAAI,uBAAuB,EAAE;AAC3B,aAAQ,IAAI,mBAAmB,EAAE,OAAO,iCAAiC;AACzE;;AAIF,MAAE,SAAS,GAAG,EAAE;KAChB;IACF;;CAOJ,OAAc,cAAc,GAA2B;EACrD,IAAM,IAAW,eAAe,UAAU,EACpC,IAAiB,CAAC,GAAG,EAAS,QAAQ;AAE5C,EACE,MAAM,QAAQ,EAAO,IACrB,CAAC,EAAO,OAAO,MAAM,OAAO,KAAM,YAAY,OAAO,KAAM,SAAS,GAGpE,EAAO,SAAS,MAAQ;AAOtB,GALA,EAAS,UAAU,EAAS,QAAQ,QAAQ,MACnC,KAAK,UAAU,EAAE,OAAO,KAAK,KAAK,UAAU,EAAI,CACvD,EAGF,EAAS,UAAU,OAAO,EAAI;IAC9B,IAIF,EAAS,UAAU,EAAe,QAAQ,MAEjC,KAAK,UAAU,EAAE,OAAO,KAAK,KAAK,UAAU,EAAO,CAC1D,EAGF,EAAS,UAAU,OAAO,EAAO;;CAQrC,OAAc,QAAQ;AAMpB,EALA,QAAQ,KACN,iKAED,EACD,eAAe,UAAU,CAAC,UAAU,OAAO,EAC3C,eAAe,UAAU,CAAC,UAAU,EAAE;;CAGxC,OAAe,WAA2B;AAKtC,SAJE,eAAe,cAGjB,eAAe,YAAY,IAAI,gBAAgB,GAFxC,eAAe;;;KAlGX,aAAA,KAAA,EAAA"}

package/dist/utils/passwordValidation.mjs

@@ -0,0 +1,12 @@
+import "../_virtual/_rolldown/runtime.mjs";
+//#region src/utils/passwordValidation.ts
+function validatePassword(e) {
+	return e ? e.length < 6 ? "Password must be at least 6 characters" : new Set(e).size < 2 ? "Password must contain at least 2 different characters" : "" : "";
+}
+function isPasswordValid(e) {
+	return validatePassword(e) === "";
+}
+//#endregion
+export { isPasswordValid, validatePassword };
+
+//# sourceMappingURL=passwordValidation.mjs.map

package/dist/utils/passwordValidation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"passwordValidation.mjs","names":[],"sources":["../../src/utils/passwordValidation.ts"],"sourcesContent":["/**\n * Simple password validation utilities.\n *\n * Requirements:\n * - At least 6 characters\n * - At least 2 distinct characters\n */\n\nexport function validatePassword(password: string): string {\n  if (!password) return '';\n\n  // At least 6 characters\n  if (password.length < 6) {\n    return 'Password must be at least 6 characters';\n  }\n\n  // At least 2 distinct characters\n  const uniqueChars = new Set(password).size;\n  if (uniqueChars < 2) {\n    return 'Password must contain at least 2 different characters';\n  }\n\n  return '';\n}\n\n/**\n * Check if password is valid (no error message)\n */\nexport function isPasswordValid(password: string): boolean {\n  return validatePassword(password) === '';\n}\n"],"mappings":";;AAQA,SAAgB,iBAAiB,GAA0B;AAczD,QAbK,IAGD,EAAS,SAAS,IACb,2CAIW,IAAI,IAAI,EAAS,CAAC,OACpB,IACT,0DAGF,KAbe;;AAmBxB,SAAgB,gBAAgB,GAA2B;AACzD,QAAO,iBAAiB,EAAS,KAAK"}

package/package.json

@@ -3,16 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.34",
+  "version": "0.2.36",
   "sideEffects": false,
-  "main": "./dist/common-ui.umd.js",
-  "module": "./dist/common-ui.es.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/common-ui.es.js",
-      "require": "./dist/common-ui.umd.js"
+      "import": "./dist/index.mjs"
     },
     "./admin": {
       "types": "./dist/admin/index.d.ts",
@@ -47,8 +45,10 @@
     "@highlightjs/vue-plugin": "^2.1.2",
     "@mdi/font": "^7.3.67",
     "@vojtechlanka/vue-tags-input": "^3",
-    "@vue-skuilder/common": "0.2.34",
-    "@vue-skuilder/db": "0.2.34",
+    "@vue-skuilder/common": "0.2.36",
+    "@vue-skuilder/db": "0.2.36",
+    "canvas-confetti": "^1.9.3",
+    "echarts": "6.1.0",
     "highlight.js": "^11.0.1",
     "marked": "^15.0.6",
     "moment": "^2.29.4",
@@ -84,5 +84,5 @@
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^4.1.0"
   },
-  "stableVersion": "0.2.34"
+  "stableVersion": "0.2.36"
 }

package/src/admin/components/EChart.vue

@@ -0,0 +1,59 @@
+<template>
+  <div ref="el" :style="{ height: `${height}px`, width: '100%' }" />
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
+import { init, use, type ECElementEvent, type EChartsCoreOption, type EChartsType } from 'echarts/core';
+import { LineChart, ScatterChart } from 'echarts/charts';
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  MarkLineComponent,
+  TooltipComponent,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+
+/**
+ * An ECharts canvas for the admin views. Registers only what they draw, so
+ * the admin bundle carries a fraction of ECharts. Options are replaced
+ * whole on change (`notMerge`): callers compute the full option.
+ */
+use([
+  LineChart,
+  ScatterChart,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  MarkLineComponent,
+  TooltipComponent,
+  CanvasRenderer,
+]);
+
+const props = defineProps<{ option: EChartsCoreOption; height: number }>();
+const emit = defineEmits<{ click: [event: ECElementEvent] }>();
+
+const el = ref<HTMLElement | null>(null);
+const chart = shallowRef<EChartsType | null>(null);
+let resize: ResizeObserver | null = null;
+
+onMounted(() => {
+  if (!el.value) return;
+  chart.value = init(el.value);
+  chart.value.setOption(props.option, { notMerge: true });
+  chart.value.on('click', (e) => emit('click', e as ECElementEvent));
+  resize = new ResizeObserver(() => chart.value?.resize());
+  resize.observe(el.value);
+});
+
+watch(
+  () => props.option,
+  (option) => chart.value?.setOption(option, { notMerge: true })
+);
+
+onBeforeUnmount(() => {
+  resize?.disconnect();
+  chart.value?.dispose();
+});
+</script>

package/src/admin/components/LearnerDiagnostics.vue

@@ -4,6 +4,7 @@
       <v-tab value="sessions">Sessions ({{ dataset.sessions.length }})</v-tab>
       <v-tab value="cards">Cards ({{ dataset.cardHistories.length }})</v-tab>
       <v-tab v-if="dataset.strategies" value="pipeline">Pipeline</v-tab>
+      <v-tab value="elo">ELO</v-tab>
     </v-tabs>
 
     <template v-if="tab === 'sessions'">
@@ -40,6 +41,8 @@
       :stats="pipelineStats"
       :stats-label="dataset.username"
     />
+
+    <learner-tag-elo v-else-if="tab === 'elo'" :dataset="dataset" :interpreters="interpreters" />
   </div>
 </template>
 
@@ -49,20 +52,21 @@ import { pipelineRunStats, type DiagnosticsInterpreters, type LearnerDataset } f
 import LearnerCardHistory from './LearnerCardHistory.vue';
 import LearnerSessionDetail from './LearnerSessionDetail.vue';
 import LearnerSessionList from './LearnerSessionList.vue';
+import LearnerTagElo from './LearnerTagElo.vue';
 import PipelineOverview from './PipelineOverview.vue';
 
 /**
- * One learner: sessions (list, then a session's detail), card history, and,
+ * One learner: sessions (list, then a session's detail), card history,
  * when the dataset carries the course's strategy docs, the pipeline with this
- * learner's run stats. Session timelines link into card history. Navigation is internal;
- * hosts that want URLs can compose the three views themselves.
+ * learner's run stats, and per-tag ELO. Session timelines link into card history. Navigation is internal;
+ * hosts that want URLs can compose the views themselves.
  */
 const props = defineProps<{
   dataset: LearnerDataset;
   interpreters?: DiagnosticsInterpreters;
 }>();
 
-const tab = ref<'sessions' | 'cards' | 'pipeline'>('sessions');
+const tab = ref<'sessions' | 'cards' | 'pipeline' | 'elo'>('sessions');
 const sessionId = ref<string | null>(null);
 const focusCard = ref<string | undefined>(undefined);
 const pipelineStats = computed(() => pipelineRunStats(props.dataset));