@vue-skuilder/common-ui 0.1.1

package/dist/components/HeatMap.types.d.ts

@@ -0,0 +1,13 @@
+export interface DayData {
+    date: string;
+    count: number;
+}
+export interface Color {
+    h: number;
+    s: number;
+    l: number;
+}
+export interface ActivityRecord {
+    timeStamp: number | string;
+    [key: string]: any;
+}

package/dist/components/PaginatingToolbar.types.d.ts

@@ -0,0 +1,40 @@
+export interface PaginatingToolbarProps {
+    /**
+     * Array of page numbers
+     */
+    pages: number[];
+    /**
+     * Current active page
+     */
+    page: number;
+    /**
+     * Main title displayed in the toolbar
+     */
+    title?: string;
+    /**
+     * Secondary text displayed next to the title
+     */
+    subtitle?: string;
+}
+export interface PaginatingToolbarEvents {
+    /**
+     * Navigate to the first page
+     */
+    (e: 'first'): void;
+    /**
+     * Navigate to the previous page
+     */
+    (e: 'prev'): void;
+    /**
+     * Navigate to the next page
+     */
+    (e: 'next'): void;
+    /**
+     * Navigate to the last page
+     */
+    (e: 'last'): void;
+    /**
+     * Set the page to a specific number
+     */
+    (e: 'set-page', page: number): void;
+}

package/dist/components/SkMouseTrap.types.d.ts

@@ -0,0 +1,3 @@
+export interface SkMouseTrapProps {
+    refreshInterval?: number;
+}

package/dist/components/SkMouseTrapToolTip.types.d.ts

@@ -0,0 +1,35 @@
+export interface SkMouseTrapToolTipProps {
+    /**
+     * The keyboard shortcut(s) to bind to this tooltip.
+     * Can be a single string like "ctrl+s" or an array of strings.
+     */
+    hotkey: string | string[];
+    /**
+     * Descriptive name for the keyboard shortcut.
+     * Will be displayed in the shortcut dialog.
+     */
+    command: string;
+    /**
+     * Whether the shortcut is currently disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The position of the tooltip relative to the wrapped element.
+     * @default 'top'
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Whether to show the tooltip when the Ctrl key is pressed.
+     * @default true
+     */
+    showTooltip?: boolean;
+    /**
+     * The visual effect to apply to the wrapped element when Ctrl is pressed.
+     * @default 'glow'
+     */
+    highlightEffect?: 'glow' | 'scale' | 'border' | 'none';
+}
+export interface SkMouseTrapToolTipEmits {
+    (event: 'hotkey-triggered', hotkey: string | string[]): void;
+}

package/dist/components/SnackbarService.d.ts

@@ -0,0 +1,11 @@
+import { Status } from '@vue-skuilder/common';
+export interface SnackbarOptions {
+    text: string;
+    status: Status;
+    timeout?: number;
+}
+export declare const setInstance: (instance: {
+    addSnack: (snack: SnackbarOptions) => void;
+}) => void, getInstance: () => {
+    addSnack: (snack: SnackbarOptions) => void;
+} | null, alertUser: (msg: SnackbarOptions) => void;

package/dist/components/StudySession.types.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Misc. config for a study StudySessionConfig
+ */
+export type StudySessionConfig = {
+    likesConfetti: boolean;
+};

package/dist/components/auth/index.d.ts

@@ -0,0 +1,4 @@
+export { default as UserChip } from './UserChip.vue';
+export { default as UserLogin } from './UserLogin.vue';
+export { default as UserRegistration } from './UserRegistration.vue';
+export { default as UserLoginAndRegistrationContainer } from './UserLoginAndRegistrationContainer.vue';

package/dist/components/cardRendering/MarkdownRendererHelpers.d.ts

@@ -0,0 +1,22 @@
+import { MarkedToken, Tokens } from 'marked';
+/**
+ * recursively splits text according to the passed delimiters.
+ *
+ * eg: ("abcde", "b", "d")   => ["a", "bcd", "e"]
+ *     ("a[b][c]", "[", "]") => ["a", "[b]", "[c]"]
+ *
+ * it does not check that the delimiters are well formed in the text
+ * @param text the text to be split
+ * @param l the left delimiter
+ * @param r the right delimiter
+ * @returns the split result
+ */
+export declare function splitByDelimiters(text: string, l: string, r: string): string[];
+export declare function splitTextToken(token: Tokens.Text): Tokens.Text[];
+export type TokenOrComponent = MarkedToken | {
+    type: 'component';
+    raw: string;
+};
+export declare function splitParagraphToken(token: Tokens.Paragraph): TokenOrComponent[];
+export declare function containsComponent(token: MarkedToken): boolean;
+export declare function isComponent(token: MarkedToken): boolean;

package/dist/components/studentInputs/BaseUserInput.d.ts

@@ -0,0 +1,16 @@
+import { Answer } from '@vue-skuilder/common';
+import { useCardPreviewModeStore } from '../../stores/useCardPreviewModeStore';
+import { ViewComponent } from '../../composables/Displayable';
+import { QuestionRecord } from '@vue-skuilder/db';
+declare const _default: import("vue").DefineComponent<{}, {}, {
+    answer: Answer;
+    previewModeStore: ReturnType<typeof useCardPreviewModeStore> | null;
+}, {
+    autofocus(): boolean;
+    autoFocus(): boolean;
+}, {
+    submitAnswer(answer: Answer): QuestionRecord;
+    submit(answer: Answer): any;
+    getQuestionViewAncestor(): ViewComponent;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/studentInputs/RadioMultipleChoice.types.d.ts

@@ -0,0 +1,5 @@
+import { Answer } from '@vue-skuilder/common';
+export interface RadioMultipleChoiceAnswer extends Answer {
+    choiceList: string[];
+    selection: number;
+}

package/dist/composables/CompositionViewable.d.ts

@@ -0,0 +1,33 @@
+import moment from 'moment';
+import { ComputedRef, Ref } from 'vue';
+import { CardRecord, QuestionRecord } from '@vue-skuilder/db';
+import { HotKey } from '../utils/SkldrMouseTrap';
+import { Question } from './Displayable';
+import { ViewData, Answer } from '@vue-skuilder/common';
+export interface ViewableUtils {
+    startTime: Ref<moment.Moment>;
+    hotKeys: Ref<HotKey[]>;
+    timeSpent: ComputedRef<number>;
+    logger: ViewableLogger;
+    getURL: (item: string, dataShapeIndex?: number) => string;
+    emitResponse: (record: CardRecord) => void;
+}
+export interface ViewableLogger {
+    log: (message?: unknown, ...params: unknown[]) => void;
+    error: (message?: unknown, ...params: unknown[]) => void;
+    warn: (message?: unknown, ...params: unknown[]) => void;
+}
+export interface QuestionViewUtils<Q extends Question> {
+    priorSessionViews: Ref<number>;
+    priorAttempts: Ref<number>;
+    priorAnswers: Ref<[Answer, string][]>;
+    maxAttemptsPerView: Ref<number>;
+    maxSessionViews: Ref<number>;
+    question: Ref<Q | undefined>;
+    submitAnswer: (answer: Answer, submittingClass?: string) => QuestionRecord;
+}
+export declare function useViewable(props: {
+    data: ViewData[];
+}, emit: (event: string, ...args: unknown[]) => void, componentName: string): ViewableUtils;
+export declare function useQuestionView<Q extends Question>(viewableUtils: ViewableUtils): QuestionViewUtils<Q>;
+export declare function isQuestionView(component: any): component is QuestionViewUtils<Question>;

package/dist/composables/Displayable.d.ts

@@ -0,0 +1,47 @@
+import { type DefineComponent, defineComponent } from 'vue';
+import { DataShape, ViewData, Answer, Evaluation } from '@vue-skuilder/common';
+export type ViewComponent = DefineComponent<unknown, unknown, unknown> | ReturnType<typeof defineComponent>;
+export declare function isDefineComponent(v: ViewComponent): v is DefineComponent<unknown, unknown, unknown>;
+export declare abstract class Displayable {
+    static dataShapes: DataShape[];
+    static views: Array<ViewComponent>;
+    static seedData?: Array<any>;
+    /**
+     * True if this displayable content type is meant to have
+     * user-submitted questions. False if supplied seedData array
+     * is comprehensive for the content type. EG, a SingleDigitAddition
+     * type may comprehensively supply 0+0,0+1,...,9+9 as its seed
+     * data, and not want any user input.
+     */
+    static acceptsUserData: boolean;
+    /**
+     *
+     */
+    constructor(viewData: ViewData[]);
+    abstract dataShapes(): DataShape[];
+    abstract views(): Array<ViewComponent>;
+}
+export declare abstract class Question extends Displayable {
+    /**
+     * returns a yes/no evaluation of a user's answer. Informs the SRS
+     * algorithm's decision to expand or reset a card's spacing
+     * @param answer
+     */
+    protected abstract isCorrect(answer: Answer): boolean;
+    /**
+     * returns a number from [0,1] representing the user's performance on the question,
+     * which informs elo adjustments and SRS multipliers
+     *
+     * @param answer the user's answer
+     * @param timeSpent the time the user spent on the card in milliseconds
+     * @returns a rating of the user's displayed skill, from 0-1
+     */
+    protected displayedSkill(answer: Answer, timeSpent: number): number;
+    /**
+     *
+     * @param answer the student's answer
+     * @param timeSpent the amount of time spent in ms
+     * @returns
+     */
+    evaluate(answer: Answer, timeSpent: number): Evaluation;
+}

package/dist/composables/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CompositionViewable';
+export * from './Displayable';

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+export { default as HeatMap } from './components/HeatMap.vue';
+export type { DayData, Color, ActivityRecord } from './components/HeatMap.types';
+export { default as SkMouseTrap } from './components/SkMouseTrap.vue';
+export { default as SkMouseTrapToolTip } from './components/SkMouseTrapToolTip.vue';
+export * from './components/SkMouseTrap.types';
+export * from './components/SkMouseTrapToolTip.types';
+export { SkldrMouseTrap } from './utils/SkldrMouseTrap';
+export type { HotKey, HotKeyMetaData } from './utils/SkldrMouseTrap';
+export { default as SnackbarService } from './components/SnackbarService.vue';
+export { alertUser, type SnackbarOptions } from './components/SnackbarService';
+export { default as PaginatingToolbar } from './components/PaginatingToolbar.vue';
+export * from './components/PaginatingToolbar.types';
+export * from './composables/CompositionViewable';
+export * from './composables/Displayable';
+export { default as StudySession } from './components/StudySession.vue';
+export { default as StudySessionTimer } from './components/StudySessionTimer.vue';
+export type { StudySessionConfig } from './components/StudySession.types';
+export * from './components/studentInputs/BaseUserInput';
+export { default as RadioMultipleChoice } from './components/studentInputs/RadioMultipleChoice.vue';
+export { default as MultipleChoiceOption } from './components/studentInputs/MultipleChoiceOption.vue';
+export { default as TFSelect } from './components/studentInputs/TrueFalse.vue';
+export { default as UserInputNumber } from './components/studentInputs/UserInputNumber.vue';
+export { default as UserInputString } from './components/studentInputs/UserInputString.vue';
+export { default as FillInInput } from './components/studentInputs/fillInInput.vue';
+export { default as CardViewer } from './components/cardRendering/CardViewer.vue';
+export { default as CardLoader } from './components/cardRendering/CardLoader.vue';
+export * from './components/cardRendering/MarkdownRendererHelpers';
+export { default as AudioAutoPlayer } from './components/cardRendering/AudioAutoPlayer.vue';
+export { default as CodeBlockRenderer } from './components/cardRendering/CodeBlockRenderer.vue';
+export { default as MdTokenRenderer } from './components/cardRendering/MdTokenRenderer.vue';
+export { default as MarkdownRenderer } from './components/cardRendering/MarkdownRenderer.vue';
+export * from './components/auth';
+export * from './stores/useCardPreviewModeStore';
+export * from './stores/useAuthStore';
+export * from './stores/useConfigStore';
+export { piniaPlugin } from './plugins/pinia';

package/dist/plugins/pinia.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from 'vue';
+import { Pinia } from 'pinia';
+export declare const setPinia: (pinia: Pinia) => void;
+export declare const getPinia: () => Pinia | null;
+export declare const piniaPlugin: Plugin;

package/dist/stores/useAuthStore.d.ts

@@ -0,0 +1,225 @@
+import { UserDBInterface } from '@vue-skuilder/db';
+export interface AuthState {
+    _user: UserDBInterface | undefined;
+    loginAndRegistration: {
+        init: boolean;
+        loggedIn: boolean;
+        regDialogOpen: boolean;
+        loginDialogOpen: boolean;
+    };
+    onLoadComplete: boolean;
+}
+export declare function getCurrentUser(): Promise<UserDBInterface>;
+export declare const useAuthStore: () => import("pinia").Store<"auth", AuthState, {
+    currentUser: () => Promise<UserDBInterface>;
+    isLoggedIn: (state: {
+        _user: {
+            createAccount: (username: string, password: string) => Promise<{
+                status: import("@vue-skuilder/common").Status;
+                error: string;
+            }>;
+            login: (username: string, password: string) => Promise<{
+                ok: boolean;
+                name?: string;
+                roles?: string[];
+            }>;
+            logout: () => Promise<{
+                ok: boolean;
+            }>;
+            getUsername: () => string;
+            isLoggedIn: () => boolean;
+            getConfig: () => Promise<import("@vue-skuilder/db").UserConfig>;
+            setConfig: (config: Partial<import("@vue-skuilder/db").UserConfig>) => Promise<void>;
+            putCardRecord: <T extends import("@vue-skuilder/db").CardRecord>(record: T) => Promise<import("@vue-skuilder/db").CardHistory<import("@vue-skuilder/db").CardRecord>>;
+            getSeenCards: (courseId?: string) => Promise<string[]>;
+            getActiveCards: () => Promise<string[]>;
+            registerForCourse: (courseId: string, previewMode?: boolean) => Promise<PouchDB.Core.Response>;
+            dropCourse: (courseId: string, dropStatus?: string) => Promise<PouchDB.Core.Response>;
+            getCourseRegistrationsDoc: () => Promise<import("@vue-skuilder/db").CourseRegistrationDoc>;
+            getCourseRegDoc: (courseId: string) => Promise<import("@vue-skuilder/db").CourseRegistration>;
+            getActiveCourses: () => Promise<import("@vue-skuilder/db").CourseRegistration[]>;
+            getPendingReviews: (courseId?: string) => Promise<import("@vue-skuilder/db").ScheduledCard[]>;
+            getActivityRecords: () => Promise<import("@vue-skuilder/db").ActivityRecord[]>;
+            scheduleCardReview: (review: {
+                user: string;
+                course_id: string;
+                card_id: string;
+                time: import("moment").Moment;
+                scheduledFor: "course" | "classroom";
+                schedulingAgentId: string;
+            }) => Promise<void>;
+            removeScheduledCardReview: (reviewId: string) => Promise<void>;
+            registerForClassroom: (classId: string, registerAs: "student" | "teacher" | "aide" | "admin") => Promise<PouchDB.Core.Response>;
+            dropFromClassroom: (classId: string) => Promise<PouchDB.Core.Response>;
+            getUserClassrooms: () => Promise<import("@vue-skuilder/db").ClassroomRegistrationDoc>;
+            getActiveClasses: () => Promise<string[]>;
+            updateUserElo: (courseId: string, elo: import("@vue-skuilder/common").CourseElo) => Promise<PouchDB.Core.Response>;
+            getCourseInterface: (courseId: string) => Promise<import("@vue-skuilder/db").UsrCrsDataInterface>;
+            update: <T extends PouchDB.Core.Document<object>>(id: string, update: Partial<T> | ((x: T) => T)) => Promise<T>;
+        } | undefined;
+        loginAndRegistration: {
+            init: boolean;
+            loggedIn: boolean;
+            regDialogOpen: boolean;
+            loginDialogOpen: boolean;
+        };
+        onLoadComplete: boolean;
+    } & import("pinia").PiniaCustomStateProperties<AuthState>) => boolean;
+    isInitialized: (state: {
+        _user: {
+            createAccount: (username: string, password: string) => Promise<{
+                status: import("@vue-skuilder/common").Status;
+                error: string;
+            }>;
+            login: (username: string, password: string) => Promise<{
+                ok: boolean;
+                name?: string;
+                roles?: string[];
+            }>;
+            logout: () => Promise<{
+                ok: boolean;
+            }>;
+            getUsername: () => string;
+            isLoggedIn: () => boolean;
+            getConfig: () => Promise<import("@vue-skuilder/db").UserConfig>;
+            setConfig: (config: Partial<import("@vue-skuilder/db").UserConfig>) => Promise<void>;
+            putCardRecord: <T extends import("@vue-skuilder/db").CardRecord>(record: T) => Promise<import("@vue-skuilder/db").CardHistory<import("@vue-skuilder/db").CardRecord>>;
+            getSeenCards: (courseId?: string) => Promise<string[]>;
+            getActiveCards: () => Promise<string[]>;
+            registerForCourse: (courseId: string, previewMode?: boolean) => Promise<PouchDB.Core.Response>;
+            dropCourse: (courseId: string, dropStatus?: string) => Promise<PouchDB.Core.Response>;
+            getCourseRegistrationsDoc: () => Promise<import("@vue-skuilder/db").CourseRegistrationDoc>;
+            getCourseRegDoc: (courseId: string) => Promise<import("@vue-skuilder/db").CourseRegistration>;
+            getActiveCourses: () => Promise<import("@vue-skuilder/db").CourseRegistration[]>;
+            getPendingReviews: (courseId?: string) => Promise<import("@vue-skuilder/db").ScheduledCard[]>;
+            getActivityRecords: () => Promise<import("@vue-skuilder/db").ActivityRecord[]>;
+            scheduleCardReview: (review: {
+                user: string;
+                course_id: string;
+                card_id: string;
+                time: import("moment").Moment;
+                scheduledFor: "course" | "classroom";
+                schedulingAgentId: string;
+            }) => Promise<void>;
+            removeScheduledCardReview: (reviewId: string) => Promise<void>;
+            registerForClassroom: (classId: string, registerAs: "student" | "teacher" | "aide" | "admin") => Promise<PouchDB.Core.Response>;
+            dropFromClassroom: (classId: string) => Promise<PouchDB.Core.Response>;
+            getUserClassrooms: () => Promise<import("@vue-skuilder/db").ClassroomRegistrationDoc>;
+            getActiveClasses: () => Promise<string[]>;
+            updateUserElo: (courseId: string, elo: import("@vue-skuilder/common").CourseElo) => Promise<PouchDB.Core.Response>;
+            getCourseInterface: (courseId: string) => Promise<import("@vue-skuilder/db").UsrCrsDataInterface>;
+            update: <T extends PouchDB.Core.Document<object>>(id: string, update: Partial<T> | ((x: T) => T)) => Promise<T>;
+        } | undefined;
+        loginAndRegistration: {
+            init: boolean;
+            loggedIn: boolean;
+            regDialogOpen: boolean;
+            loginDialogOpen: boolean;
+        };
+        onLoadComplete: boolean;
+    } & import("pinia").PiniaCustomStateProperties<AuthState>) => boolean;
+    status: (state: {
+        _user: {
+            createAccount: (username: string, password: string) => Promise<{
+                status: import("@vue-skuilder/common").Status;
+                error: string;
+            }>;
+            login: (username: string, password: string) => Promise<{
+                ok: boolean;
+                name?: string;
+                roles?: string[];
+            }>;
+            logout: () => Promise<{
+                ok: boolean;
+            }>;
+            getUsername: () => string;
+            isLoggedIn: () => boolean;
+            getConfig: () => Promise<import("@vue-skuilder/db").UserConfig>;
+            setConfig: (config: Partial<import("@vue-skuilder/db").UserConfig>) => Promise<void>;
+            putCardRecord: <T extends import("@vue-skuilder/db").CardRecord>(record: T) => Promise<import("@vue-skuilder/db").CardHistory<import("@vue-skuilder/db").CardRecord>>;
+            getSeenCards: (courseId?: string) => Promise<string[]>;
+            getActiveCards: () => Promise<string[]>;
+            registerForCourse: (courseId: string, previewMode?: boolean) => Promise<PouchDB.Core.Response>;
+            dropCourse: (courseId: string, dropStatus?: string) => Promise<PouchDB.Core.Response>;
+            getCourseRegistrationsDoc: () => Promise<import("@vue-skuilder/db").CourseRegistrationDoc>;
+            getCourseRegDoc: (courseId: string) => Promise<import("@vue-skuilder/db").CourseRegistration>;
+            getActiveCourses: () => Promise<import("@vue-skuilder/db").CourseRegistration[]>;
+            getPendingReviews: (courseId?: string) => Promise<import("@vue-skuilder/db").ScheduledCard[]>;
+            getActivityRecords: () => Promise<import("@vue-skuilder/db").ActivityRecord[]>;
+            scheduleCardReview: (review: {
+                user: string;
+                course_id: string;
+                card_id: string;
+                time: import("moment").Moment;
+                scheduledFor: "course" | "classroom";
+                schedulingAgentId: string;
+            }) => Promise<void>;
+            removeScheduledCardReview: (reviewId: string) => Promise<void>;
+            registerForClassroom: (classId: string, registerAs: "student" | "teacher" | "aide" | "admin") => Promise<PouchDB.Core.Response>;
+            dropFromClassroom: (classId: string) => Promise<PouchDB.Core.Response>;
+            getUserClassrooms: () => Promise<import("@vue-skuilder/db").ClassroomRegistrationDoc>;
+            getActiveClasses: () => Promise<string[]>;
+            updateUserElo: (courseId: string, elo: import("@vue-skuilder/common").CourseElo) => Promise<PouchDB.Core.Response>;
+            getCourseInterface: (courseId: string) => Promise<import("@vue-skuilder/db").UsrCrsDataInterface>;
+            update: <T extends PouchDB.Core.Document<object>>(id: string, update: Partial<T> | ((x: T) => T)) => Promise<T>;
+        } | undefined;
+        loginAndRegistration: {
+            init: boolean;
+            loggedIn: boolean;
+            regDialogOpen: boolean;
+            loginDialogOpen: boolean;
+        };
+        onLoadComplete: boolean;
+    } & import("pinia").PiniaCustomStateProperties<AuthState>) => {
+        loggedIn: boolean;
+        init: boolean;
+        user: {
+            createAccount: (username: string, password: string) => Promise<{
+                status: import("@vue-skuilder/common").Status;
+                error: string;
+            }>;
+            login: (username: string, password: string) => Promise<{
+                ok: boolean;
+                name?: string;
+                roles?: string[];
+            }>;
+            logout: () => Promise<{
+                ok: boolean;
+            }>;
+            getUsername: () => string;
+            isLoggedIn: () => boolean;
+            getConfig: () => Promise<import("@vue-skuilder/db").UserConfig>;
+            setConfig: (config: Partial<import("@vue-skuilder/db").UserConfig>) => Promise<void>;
+            putCardRecord: <T extends import("@vue-skuilder/db").CardRecord>(record: T) => Promise<import("@vue-skuilder/db").CardHistory<import("@vue-skuilder/db").CardRecord>>;
+            getSeenCards: (courseId?: string) => Promise<string[]>;
+            getActiveCards: () => Promise<string[]>;
+            registerForCourse: (courseId: string, previewMode?: boolean) => Promise<PouchDB.Core.Response>;
+            dropCourse: (courseId: string, dropStatus?: string) => Promise<PouchDB.Core.Response>;
+            getCourseRegistrationsDoc: () => Promise<import("@vue-skuilder/db").CourseRegistrationDoc>;
+            getCourseRegDoc: (courseId: string) => Promise<import("@vue-skuilder/db").CourseRegistration>;
+            getActiveCourses: () => Promise<import("@vue-skuilder/db").CourseRegistration[]>;
+            getPendingReviews: (courseId?: string) => Promise<import("@vue-skuilder/db").ScheduledCard[]>;
+            getActivityRecords: () => Promise<import("@vue-skuilder/db").ActivityRecord[]>;
+            scheduleCardReview: (review: {
+                user: string;
+                course_id: string;
+                card_id: string;
+                time: import("moment").Moment;
+                scheduledFor: "course" | "classroom";
+                schedulingAgentId: string;
+            }) => Promise<void>;
+            removeScheduledCardReview: (reviewId: string) => Promise<void>;
+            registerForClassroom: (classId: string, registerAs: "student" | "teacher" | "aide" | "admin") => Promise<PouchDB.Core.Response>;
+            dropFromClassroom: (classId: string) => Promise<PouchDB.Core.Response>;
+            getUserClassrooms: () => Promise<import("@vue-skuilder/db").ClassroomRegistrationDoc>;
+            getActiveClasses: () => Promise<string[]>;
+            updateUserElo: (courseId: string, elo: import("@vue-skuilder/common").CourseElo) => Promise<PouchDB.Core.Response>;
+            getCourseInterface: (courseId: string) => Promise<import("@vue-skuilder/db").UsrCrsDataInterface>;
+            update: <T extends PouchDB.Core.Document<object>>(id: string, update: Partial<T> | ((x: T) => T)) => Promise<T>;
+        } | undefined;
+    };
+}, {
+    init(): Promise<void>;
+    setLoginDialog(open: boolean): void;
+    setRegDialog(open: boolean): void;
+}>;

package/dist/stores/useCardPreviewModeStore.d.ts

@@ -0,0 +1,8 @@
+export interface PreviewModeState {
+    previewMode: boolean;
+}
+export declare const useCardPreviewModeStore: () => import("pinia").Store<"previewMode", PreviewModeState, {
+    isPreviewMode(): boolean;
+}, {
+    setPreviewMode(mode: boolean): void;
+}>;

package/dist/stores/useConfigStore.d.ts

@@ -0,0 +1,11 @@
+import { UserConfig } from '@vue-skuilder/db';
+export declare const useConfigStore: () => import("pinia").Store<"config", {
+    config: UserConfig;
+}, {}, {
+    updateConfig(newConfig: UserConfig): void;
+    updateDarkMode(darkMode: boolean): Promise<void>;
+    updateLikesConfetti(likesConfetti: boolean): Promise<void>;
+    hydrate(): Promise<void>;
+    init(): Promise<void>;
+    resetDefaults(): void;
+}>;

package/dist/utils/SkldrMouseTrap.d.ts

@@ -0,0 +1,32 @@
+import 'mousetrap/plugins/global-bind/mousetrap-global-bind.js';
+import { ExtendedKeyboardEvent } from 'mousetrap';
+export interface HotKey extends HotKeyMetaData {
+    callback: (e: ExtendedKeyboardEvent, combo: string) => any;
+}
+export interface HotKeyMetaData {
+    command: string;
+    hotkey: string | string[];
+}
+export declare class SkldrMouseTrap {
+    private static _instance;
+    private mouseTrap;
+    private hotkeys;
+    private constructor();
+    static get commands(): HotKeyMetaData[];
+    /**
+     * Add keyboard bindings without resetting existing ones
+     * @param hk Single hotkey or array of hotkeys to bind
+     */
+    static addBinding(hk: HotKey | HotKey[]): void;
+    /**
+     * Remove specific keyboard binding(s) without affecting others
+     * @param hotkey Single hotkey or array of hotkeys to remove
+     */
+    static removeBinding(hotkey: string | string[]): void;
+    /**
+     * Reset all keyboard bindings
+     * @warning Consider using removeBinding() for targeted cleanup instead to avoid affecting other components
+     */
+    static reset(): void;
+    private static instance;
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@vue-skuilder/common-ui",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.1",
+  "main": "./dist/common-ui.umd.js",
+  "module": "./dist/common-ui.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/common-ui.es.js",
+      "require": "./dist/common-ui.umd.js"
+    },
+    "./style": "./dist/assets/index.css",
+    "./styles": "./dist/assets/index.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && yarn build-types",
+    "build-types": "tsc --project tsconfig.types.json",
+    "lint": "eslint . --fix",
+    "lint:check": "eslint .",
+    "test:unit": "vitest run",
+    "cypress:open": "cypress open --component",
+    "cypress:run": "cypress run --component"
+  },
+  "dependencies": {
+    "@highlightjs/vue-plugin": "^2.1.2",
+    "@mdi/font": "^7.3.67",
+    "@vue-skuilder/common": "workspace:*",
+    "@vue-skuilder/db": "workspace:*",
+    "highlight.js": "^11.0.1",
+    "marked": "^15.0.6",
+    "moment": "^2.29.4",
+    "mousetrap": "^1.6.5",
+    "pinia": "^2.3.0",
+    "vue": "^3.5.13",
+    "vuetify": "^3.7.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0",
+    "vuetify": "^3.0.0"
+  },
+  "devDependencies": {
+    "@cypress/vite-dev-server": "^6.0.3",
+    "@types/pouchdb": "^6.4.2",
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
+    "@typescript-eslint/parser": "^8.25.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-typescript": "^14.4.0",
+    "cypress": "^14.2.1",
+    "cypress-vite": "^1.6.0",
+    "eslint": "^9.21.0",
+    "eslint-config-prettier": "^10.0.2",
+    "eslint-plugin-vue": "^9.32.0",
+    "sass": "^1.83.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.9",
+    "vitest": "^3.0.5"
+  }
+}