cognikit 0.1.0

package/dist/types/Tables.d.ts

@@ -0,0 +1,40 @@
+import { Variant } from "../shared";
+import { GradingState } from "./Grading";
+export type BaseTableData = {
+    rows: string[];
+    cols: string[];
+    answerKey: Map<string, string[]>;
+};
+export type ValueTableData = {
+    rows: string[];
+    cols: string[];
+    answerKey: TableState;
+};
+export type CellValue = string | number | boolean | null;
+export type CellKind = 'text' | 'number' | 'select' | 'radio' | 'checkbox';
+export type TableState = Record<string, Record<string, CellValue>>;
+export type CellGradingState = Record<string, Record<string, GradingState>>;
+export interface TableConfiguration {
+    cols: string[];
+    rows: string[];
+    answerKey: Map<string, string[]> | TableState;
+    cellKind?: CellKind;
+    disabled?: (r: string, c: string) => boolean;
+    allowed?: (r: string, c: string) => CellValue[] | null;
+    preset?: 'lookup' | 'n-ary' | 'classification' | 'adjacency';
+    variant?: Variant;
+    shuffle?: boolean;
+    gradingState?: CellGradingState;
+}
+export type RowValues = {
+    selectedCols: string[];
+    values: Record<string, CellValue>;
+};
+export type TableCompletion = Record<string, RowValues>;
+export type EduTableChangeDetail = {
+    row: string;
+    col: string;
+    value: CellValue;
+    state: TableState;
+    selection: TableCompletion;
+};

package/dist/types/Text.d.ts

@@ -0,0 +1,125 @@
+import { InputElementData } from "./Input";
+import { Variant } from "../shared/types";
+import { GradingState } from "./Grading";
+export type TextEngineRenderMode = 'highlight' | 'dnd' | 'blanks' | 'transformation' | 'classification';
+export type TextEngineModality = 'base' | 'blanks' | 'classification';
+export type TextEngineDataUnion = TextEngineBaseData | TextEngineBlanksData | TextEngineClassificationData;
+export type TextEngineBaseDataTarget = {
+    words: string[];
+    startPos: number;
+    endPos: number;
+};
+export type TextEngineBlanksDataTarget = {
+    id: string;
+    expectedValue: InputElementData;
+};
+export type TextEngineClassificationDataTarget = {
+    category: string;
+    targets: TextEngineBaseDataTarget[];
+};
+interface TextEngineData {
+    type: TextEngineModality;
+    parts: string[];
+    targets: TextEngineBaseDataTarget[] | TextEngineBlanksDataTarget[] | TextEngineClassificationDataTarget[];
+}
+/**
+ * Words for HIGHLIGHT, DND Blanks and Transformation
+ *
+ * Example:
+ *
+ * The family will always [think] there's someone [destroying] their plans.
+ *
+ * { words: ["think"], startPos: 4, endPos: 4 },
+ * { words: ["destroying"], startPost: 7, endPos: 7 }
+ *
+ * if distractors, they are defined like "= [... | ...];"
+ *
+ */
+export interface TextEngineBaseData extends TextEngineData {
+    type: 'base';
+    targets: TextEngineBaseDataTarget[];
+    distractors?: string[];
+}
+/**
+ * Fill Blanks Only - variations with [text, number, data, time, select, ..., mixed] input elements
+ *
+ * Example:
+ *
+ * I @tx(am) someone who doesn't like people who @tx(is) arrogant. I have told you that @nm(3) times already.
+ *
+ * { id: "generatedIdInParser', expectedValue: { value: ["am"] } },
+ * { id: "...". expectedValue: { value: ["is"] } },
+ * ...
+ *
+ * The elements will be a generated string. That is, the parser would take '@tx(...)', and create '<edu-input as="text" id="...'>...'.
+ * Then it would add the id (possibly using the hash helper function) and store the expectedValue object which would be the result of
+ * the parseText(code: string) helper function, passing the content taken from '@tx(...)' as a parameter.
+ *
+ */
+export interface TextEngineBlanksData extends TextEngineData {
+    type: 'blanks';
+    targets: TextEngineBlanksDataTarget[];
+}
+/**
+ * Classification Only -- extension of base highlight variation
+ * Example:
+ *
+ * I am @cat(adjectives, tired) of @cat(verbs, seeing) everybody @cat(verbs, dance) @cat(adverbs, happily) while
+ * we are here all @cat(adjectives, sad)!
+ *
+ * { category: adjectives; targets: [ { words: ["tired"], startPos: 2, endPos: 2 }, { words: ["sad"], startPos: 13, endPos: 13 }] },
+ * ...
+ *
+ */
+export interface TextEngineClassificationData extends TextEngineData {
+    type: 'classification';
+    targets: TextEngineClassificationDataTarget[];
+}
+export type TextEngineSequentialInteractionData = TextEngineDataUnion[];
+/**
+ * Rendering mode for text engine
+ * - highlight: Click words to select/highlight
+ * - dnd: Drag and drop words/chips
+ * - blanks: Fill in input elements
+ * - transformation: Edit text in contenteditable areas
+ * - classification: Assign words to categories
+ */
+/**
+ * Grading state for parts (word indices) or inputs (IDs)
+ */
+export type TextEngineGradingState = Record<number | string, GradingState>;
+/**
+ * Configuration for the EduText custom element
+ */
+export interface TextEngineConfiguration {
+    data: TextEngineDataUnion;
+    mode: TextEngineRenderMode;
+    variant?: Variant;
+    gradingState?: TextEngineGradingState;
+    categories?: string[];
+}
+/**
+ * Change event detail for EduText element
+ */
+export interface EduTextChangeDetail {
+    /** Current user data state */
+    userState: any;
+    /** Type of data (base/blanks/classification) */
+    dataType: TextEngineModality;
+}
+/**
+ * State tracking for EduText element
+ */
+export interface TextEngineState {
+    /** For highlight: selected word indices */
+    selectedIndices?: Set<number>;
+    /** For DND: target index -> placed word */
+    dndPlacements?: Record<number, string>;
+    /** For blanks: input values by ID */
+    inputValues?: Record<string, any>;
+    /** For classification: word index -> category name */
+    wordCategories?: Record<number, string>;
+    /** For transformation: target index -> transformed words */
+    transformations?: Record<number, string[]>;
+}
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Tables";
+export * from "./Data";
+export * from "./Grading";

package/dist/ui/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./misc";
+export * from "./input";

package/dist/ui/input/color/color-picker.d.ts

@@ -0,0 +1,37 @@
+type ColorItem = {
+    name: string;
+    hex: string;
+};
+type PaletteMap = Record<string, ColorItem[]>;
+export declare class ColorPicker extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _palettes;
+    private _activePaletteKey;
+    private _value;
+    private $wrap;
+    private $swatch;
+    private $tooltip;
+    private $name;
+    private $chip;
+    private $grid;
+    private $tabs;
+    constructor();
+    get palettes(): PaletteMap;
+    set palettes(obj: PaletteMap);
+    get activePaletteKey(): string;
+    set activePaletteKey(k: string);
+    get value(): ColorItem;
+    set value(v: ColorItem);
+    attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    connectedCallback(): void;
+    private render;
+    private renderTabs;
+    private renderGrid;
+    private updateHeader;
+    private updateSwatch;
+    private markSelected;
+    private toggle;
+    private close;
+    private dispatch;
+}
+export {};

package/dist/ui/input/index.d.ts

@@ -0,0 +1 @@
+export * from "./input";

package/dist/ui/input/input/index.d.ts

@@ -0,0 +1 @@
+export { EduInput } from "./input";

package/dist/ui/input/input/input.d.ts

@@ -0,0 +1,22 @@
+import { Variant } from "../../../shared/types";
+export declare class EduInput extends HTMLElement {
+    static get observedAttributes(): string[];
+    private $slot;
+    private controlEl;
+    private currentTag;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private handleSlotChange;
+    private getTag;
+    private render;
+    private applyAttr;
+    private applyBoolAttr;
+    private syncAttributes;
+    private syncContent;
+    get variant(): Variant;
+    set variant(v: Variant);
+    get value(): string;
+    set value(v: string);
+}

package/dist/ui/input/letter/letter-picker.d.ts

@@ -0,0 +1,27 @@
+type Mode = "simple" | "grid";
+export declare class LetterPicker extends HTMLElement {
+    static get observedAttributes(): readonly ["value", "mode", "placeholder", "disabled"];
+    private _open;
+    private _display;
+    private _picker;
+    private _onDocClick;
+    private _onDocKey;
+    constructor();
+    get placeholder(): string | null;
+    set placeholder(v: string | null);
+    get mode(): Mode;
+    set mode(v: Mode);
+    get value(): string;
+    set value(v: string);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    private _syncDisplay;
+    private _upgradeProperty;
+}
+export {};

package/dist/ui/misc/block.d.ts

@@ -0,0 +1,14 @@
+import { Variant } from "../../shared";
+export declare class EduBlock extends HTMLElement {
+    static get observedAttributes(): string[];
+    private $blockEl;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private sync;
+    getBlock(): HTMLDivElement;
+    get variant(): Variant;
+    set variant(v: Variant);
+    setAccentColor(newAccent: string): void;
+    removeSelf(): void;
+}

package/dist/ui/misc/chip/chip.d.ts

@@ -0,0 +1,46 @@
+import { Variant } from "../../../shared";
+import { AssetType } from "../../../types/Assets";
+import { NormalizedAssets } from "../../../types/Assets";
+import { GradingState } from "../../../types/Grading";
+/**
+ * The key is expected to be something like "@:name", where string[2:] is expected to be a reference to
+ * a key in assets.
+ */
+export declare function setUpChipData(key: string, chip: EduChip, assets?: NormalizedAssets["assetsById"]): void;
+export declare class EduChip extends HTMLElement {
+    static get observedAttributes(): string[];
+    private $chip;
+    private $prefix;
+    private $dragHandler;
+    private $dialog;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    getButton(): HTMLButtonElement;
+    getPrefix(): HTMLSpanElement;
+    getDragHandler(): HTMLSpanElement;
+    private sync;
+    private updateContent;
+    get variant(): Variant;
+    set variant(v: Variant);
+    get prefix(): string;
+    set prefix(v: string);
+    get chipState(): GradingState;
+    set chipState(v: GradingState);
+    get draggable(): boolean;
+    set draggable(v: boolean);
+    get color(): string;
+    set color(v: string);
+    get colored(): boolean;
+    set colored(v: boolean);
+    set data(v: string);
+    set modality(v: AssetType);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get selected(): boolean;
+    set selected(v: boolean);
+    get value(): string;
+    set value(v: string);
+    toggle(force?: boolean): boolean;
+    removeSelf(): void;
+}

package/dist/ui/misc/chip/index.d.ts

@@ -0,0 +1 @@
+export * from "./chip";

package/dist/ui/misc/dialog.d.ts

@@ -0,0 +1,24 @@
+/**
+ * EduDialog - Reusable modal dialog component
+ * Used for displaying rich content from chips and other interactive elements
+ */
+export declare class EduDialog extends HTMLElement {
+    private $backdrop;
+    private $dialog;
+    private $title;
+    private $content;
+    private $footer;
+    private $closeBtn;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private handleEscape;
+    open(): void;
+    close(): void;
+    setContent(html: string): void;
+    get isOpen(): boolean;
+    get title(): string;
+    set title(value: string);
+}

package/dist/ui/misc/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./block";
+export * from "./chip";
+export * from "./dialog";
+export * from "./media";

package/dist/ui/misc/media.d.ts

@@ -0,0 +1,54 @@
+import { NormalizedAssets } from "../../types/Assets";
+/**
+ * setUpQuestionData - Configure content rendering with asset support
+ *
+ * Handles asset references (@:assetId) and renders content accordingly:
+ * - If dialog=true: Render button that opens content in dialog
+ * - If dialog=false/undefined: Render content inline with expand button
+ *
+ * @param questionString - Question text or asset reference (@:assetId)
+ * @param container - Container element to render into
+ * @param assets - Assets registry from interaction
+ */
+export declare function setUpQuestionData(questionString: string, container: HTMLElement, assets?: NormalizedAssets["assetsById"]): void;
+/**
+ * EduMedia - Universal media renderer component
+ *
+ * Renders different media types based on the 'type' attribute.
+ * Works with Asset interfaces from src/shared/assets.ts
+ *
+ * Attributes:
+ * - type: "image" | "video" | "audio" | "html" | "tts"
+ * - data: URL string for image/video/audio, or HTML content string
+ * - spec: Optional specifications (JSON string)
+ *   - For image: { size?: "small" | "medium" | "large" }
+ *   - For video: { span?: { from: string, to: string } }
+ *   - For audio: { volume?: number, loop?: boolean }
+ *
+ * Usage:
+ * <edu-media type="image" data="https://example.com/photo.jpg" spec='{"size":"large"}'></edu-media>
+ * <edu-media type="video" data="/assets/video.mp4"></edu-media>
+ * <edu-media type="audio" data="/assets/sound.mp3" spec='{"volume":0.8,"loop":true}'></edu-media>
+ * <edu-media type="html" data="<p>Rich <strong>HTML</strong> content</p>"></edu-media>
+ */
+export declare class EduMedia extends HTMLElement {
+    private mediaType;
+    private mediaData;
+    private mediaSpec;
+    private audioPlaying;
+    private currentAudioUrl;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    private render;
+    private renderImage;
+    private renderVideo;
+    private renderAudio;
+    private renderHtml;
+    /**
+     * Parse time string (mm:ss or hh:mm:ss) to seconds
+     */
+    private parseTime;
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+	"name": "cognikit",
+	"version": "0.1.0",
+	"author": "Yahir Adolfo de los Santos Beras",
+	"license": "MIT",
+	"repository": "https://github.com/YerCodeWorld/cognikit.git",
+	"keywords": [
+		"psychometrics",
+		"quizzes",
+		"education",
+		"practice",
+		"tests",
+		"learning",
+		"psycology",
+		"cognitive"
+	],
+	"homepage": "https://github.com/YerCodeWorld/cognikit.git#readme",
+	"bugs": "https://github.com/YerCodeWorld/cognikit.git/issues",
+	"type": "module",
+	"private": false,
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		}
+	},
+	"files": [
+		"dist",
+		"README.md",
+		"LICENSE"
+	],
+	"scripts": {
+		"clean": "rimraf dist public-dist",
+		"types": "tsc -p tsconfig.json",
+		"build:lib": "esbuild src/index.ts --bundle --format=esm --platform=browser --outdir=dist --sourcemap --minify --external:react --external:react-dom --loader:.html=text --loader:.css=text",
+		"build:demo": "esbuild src/index.ts --bundle --format=esm --platform=browser --outfile=public/app.js --sourcemap --loader:.html=text --loader:.css=text",
+		"build": "pnpm clean && pnpm build:lib && pnpm types && pnpm build:demo",
+		"prepublishOnly": "pnpm build",
+		"dev:build": "esbuild src/index.ts --bundle --format=esm --platform=browser --outfile=public/app.js --sourcemap --watch=forever --loader:.html=text --loader:.css=text",
+		"dev:serve": "browser-sync start --server public --port 3008 --files 'public/**/*' --no-open --no-notify",
+		"dev": "npm-run-all --parallel dev:build dev:serve",
+		"dev:watch": "esbuild src/index.ts --bundle --format=esm --platform=browser --outfile=public/app.js --sourcemap --watch=forever --loader:.html=text --loader:.css=text & while inotifywait -r -e modify,create,delete,move src; do pnpm build:lib; done",
+		"serve": "serve public -l 3008"
+	},
+	"devDependencies": {
+		"browser-sync": "^3.0.4",
+		"esbuild": "^0.23.0",
+		"npm-run-all": "^4.1.5",
+		"rimraf": "^6.0.0",
+		"serve": "^14.2.3",
+		"typescript": "^5.6.3"
+	},
+	"dependencies": {
+		"js-yaml": "^4.1.1"
+	}
+}