npm - cognikit - Versions diffs - 1.0.2 → 1.1.0 - Mend

cognikit 1.0.2 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (124) hide show

package/public/examples/chip.html DELETED Viewed

@@ -1,495 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-	<meta name="apple-mobile-web-app-capable" content="yes">
-	<meta name="mobile-web-app-capable" content="yes">
-	<title>Live Chip Editor - CogniKit</title>
-	<link rel="stylesheet" href="./styles/global.css">
-	<style>
-		* {
-			margin: 0;
-			padding: 0;
-			box-sizing: border-box;
-		}
-        :root {
-            --edu-bg:            247 249 252;
-            --edu-card:          255 255 255;
-            --edu-ink:           31 41 55;
-            --edu-second-ink:    71 85 105;
-            --edu-third-ink:     100 116 139;
-            --edu-inverted-ink:  248 250 252;
-            --edu-success:       22 163 74;
-            --edu-error:         220 38 38;
-            --edu-warning:       255 222 33;
-            --edu-neutral:       14 165 233;
-            --edu-first-accent:  173 198 255;
-            --edu-second-accent: 245 158 11;
-            --edu-third-accent:  236 72 153;
-            --edu-border:        229 231 235;
-            --edu-muted:         243 244 246;
-            --edu-radius:        0.375rem;
-            --edu-shadow-color:  0 0 0;
-            --edu-pad:           1rem;
-            --edu-mar:           0;
-        }
-		body {
-			font-family: system-ui, -apple-system, sans-serif;
-			background: rgb(var(--edu-background));
-			color: rgb(var(--edu-ink));
-			min-height: 100dvh;
-			padding: 2rem;
-			padding-bottom: max(2rem, env(safe-area-inset-bottom));
-		}
-		.container {
-			max-width: 1200px;
-			margin: 0 auto;
-		}
-		h1 {
-			font-size: 2rem;
-			margin-bottom: 0.5rem;
-			color: rgb(var(--edu-first-accent));
-		}
-		.subtitle {
-			color: rgb(var(--edu-second-ink));
-			margin-bottom: 3rem;
-			font-size: 1rem;
-		}
-		.editor-layout {
-			display: grid;
-			grid-template-columns: 1fr 1fr;
-			gap: 2rem;
-			align-items: start;
-		}
-		.preview-section {
-			background: rgb(var(--edu-card));
-			border: 1px solid rgb(var(--edu-border));
-			border-radius: var(--edu-radius);
-			padding: 3rem;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			min-height: 400px;
-			position: sticky;
-			top: 2rem;
-		}
-		.preview-label {
-			font-size: 0.85rem;
-			color: rgb(var(--edu-second-ink));
-			margin-bottom: 2rem;
-			text-transform: uppercase;
-			letter-spacing: 1px;
-			font-weight: 600;
-		}
-		.controls-section {
-			background: rgb(var(--edu-card));
-			border: 1px solid rgb(var(--edu-border));
-			border-radius: var(--edu-radius);
-			padding: 2rem;
-		}
-		.control-group {
-			margin-bottom: 1.5rem;
-		}
-		.control-group label {
-			display: block;
-			font-size: 0.9rem;
-			font-weight: 600;
-			margin-bottom: 0.5rem;
-			color: rgb(var(--edu-ink));
-		}
-		.control-group input[type="text"],
-		.control-group input[type="color"],
-		.control-group select,
-		.control-group textarea {
-			width: 100%;
-			padding: 0.75rem;
-			border: 1px solid rgb(var(--edu-border));
-			border-radius: 6px;
-			background: rgb(var(--edu-background));
-			color: rgb(var(--edu-ink));
-			font-size: 0.95rem;
-			font-family: inherit;
-			min-height: 44px;
-		}
-		.control-group textarea {
-			resize: vertical;
-			min-height: 80px;
-			font-family: 'Courier New', monospace;
-		}
-		.control-group input[type="color"] {
-			height: 50px;
-			cursor: pointer;
-		}
-		.checkbox-group {
-			display: flex;
-			align-items: center;
-			gap: 0.75rem;
-			padding: 0.5rem 0;
-		}
-		.checkbox-group input[type="checkbox"] {
-			width: 24px;
-			height: 24px;
-			cursor: pointer;
-		}
-		.checkbox-group label {
-			margin: 0;
-			cursor: pointer;
-		}
-		.code-preview {
-			margin-top: 2rem;
-			padding-top: 2rem;
-			border-top: 1px solid rgb(var(--edu-border));
-		}
-		.code-preview h3 {
-			font-size: 1rem;
-			margin-bottom: 1rem;
-			color: rgb(var(--edu-first-accent));
-		}
-		.code-block {
-			background: rgb(var(--edu-background));
-			border: 1px solid rgb(var(--edu-border));
-			border-radius: 6px;
-			padding: 1rem;
-			font-family: 'Courier New', monospace;
-			font-size: 0.85rem;
-			overflow-x: auto;
-			white-space: pre-wrap;
-			word-break: break-all;
-			color: rgb(var(--edu-second-ink));
-		}
-		.copy-button {
-			margin-top: 0.5rem;
-			padding: 0.5rem 1rem;
-			background: rgb(var(--edu-first-accent));
-			color: white;
-			border: none;
-			border-radius: 6px;
-			cursor: pointer;
-			font-size: 0.9rem;
-			min-height: 44px;
-			transition: all 0.2s;
-		}
-		.copy-button:hover {
-			opacity: 0.9;
-			transform: translateY(-1px);
-		}
-		.copy-button:active {
-			transform: translateY(0);
-		}
-		/* Mobile responsive */
-		@media (max-width: 768px) {
-			body {
-				padding: 1rem;
-			}
-			.editor-layout {
-				grid-template-columns: 1fr;
-			}
-			.preview-section {
-				position: static;
-				padding: 2rem 1rem;
-				min-height: 300px;
-			}
-			h1 {
-				font-size: 1.5rem;
-			}
-		}
-	</style>
-</head>
-<body>
-	<div class="container">
-		<h1>Live Chip Editor</h1>
-		<p class="subtitle">Customize and preview your chip component in real-time</p>
-		<div class="editor-layout">
-			<!-- Preview Section -->
-			<div class="preview-section">
-				<div class="preview-label">Live Preview</div>
-				<edu-chip id="liveChip" variant="outline" prefix="A">Option Text</edu-chip>
-			</div>
-			<!-- Controls Section -->
-			<div class="controls-section">
-				<h2 style="margin-bottom: 1.5rem; font-size: 1.25rem;">Controls</h2>
-				<div class="control-group">
-					<label for="variantSelect">Variant</label>
-					<select id="variantSelect">
-						<option value="outline" selected>Outline</option>
-						<option value="elegant">Elegant</option>
-						<option value="playful">Playful</option>
-						<option value="empty">Empty</option>
-						<option value="letter">Letter</option>
-						<option value="minimal">Minimal</option>
-						<option value="glass">Glass</option>
-						<option value="card">Card</option>
-						<option value="sign">Sign</option>
-					</select>
-				</div>
-				<div class="control-group">
-					<label for="prefixInput">Prefix (optional)</label>
-					<input type="text" id="prefixInput" placeholder="e.g., A, 1, i" value="A">
-				</div>
-				<div class="control-group">
-					<label for="contentInput">Content (slot content)</label>
-					<textarea id="contentInput" placeholder="Enter chip content">Option Text</textarea>
-				</div>
-				<div class="control-group">
-					<label for="modalitySelect">Modality</label>
-					<select id="modalitySelect">
-						<option value="text" selected>Text</option>
-						<option value="image">Image</option>
-						<option value="audio">Audio</option>
-						<option value="video">Video</option>
-						<option value="tts">Text-to-Speech</option>
-						<option value="anchor">Anchor (File Upload)</option>
-						<!-- All the others require to set the inner HTML of the chip -->
-						<option value="complex">Complex</option>
-					</select>
-				</div>
-				<div class="control-group">
-					<label for="dataInput">Data (for modality)</label>
-					<textarea id="dataInput" placeholder="e.g., URL, text, etc."></textarea>
-				</div>
-				<div class="control-group">
-					<label for="displaySelect">Display Mode</label>
-					<select id="displaySelect">
-						<option value="in-line" selected>In-line</option>
-						<option value="dialog">Dialog</option>
-					</select>
-				</div>
-				<div class="control-group">
-					<label for="stateSelect">State (feedback)</label>
-					<select id="stateSelect">
-						<option value="" selected>None</option>
-						<option value="correct">Correct</option>
-						<option value="wrong">Wrong</option>
-						<option value="missed">Missed</option>
-					</select>
-				</div>
-				<div class="control-group">
-					<label for="colorInput">Custom Color</label>
-					<input type="color" id="colorInput" value="#6366f1">
-					<div class="control-group checkbox-group">
-						<input type="checkbox" id="coloredCheck">
-						<label for="coloredCheck">colored</label>
-					</div>
-				</div>
-				<div class="control-group">
-					<label for="valueInput">Value (data attribute)</label>
-					<input type="text" id="valueInput" placeholder="e.g., option-1">
-				</div>
-				<div class="control-group checkbox-group">
-					<input type="checkbox" id="selectedCheck">
-					<label for="selectedCheck">Selected</label>
-				</div>
-				<div class="control-group checkbox-group">
-					<input type="checkbox" id="disabledCheck">
-					<label for="disabledCheck">Disabled</label>
-				</div>
-				<div class="control-group checkbox-group">
-					<input type="checkbox" id="draggableCheck">
-					<label for="draggableCheck">Draggable</label>
-				</div>
-				<!-- Code Preview -->
-				<div class="code-preview">
-					<h3>Generated HTML</h3>
-					<div class="code-block" id="codePreview"></div>
-					<button class="copy-button" id="copyButton">Copy Code</button>
-				</div>
-			</div>
-		</div>
-	</div>
-	<script type="module">
-		import { EduChip } from '../app.js';
-		const chip = document.getElementById('liveChip');
-		const codePreview = document.getElementById('codePreview');
-		const copyButton = document.getElementById('copyButton');
-		// Control elements
-		const variantSelect = document.getElementById('variantSelect');
-		const prefixInput = document.getElementById('prefixInput');
-		const contentInput = document.getElementById('contentInput');
-		const modalitySelect = document.getElementById('modalitySelect');
-		const dataInput = document.getElementById('dataInput');
-		const displaySelect = document.getElementById('displaySelect');
-		const stateSelect = document.getElementById('stateSelect');
-		const colorInput = document.getElementById('colorInput');
-		const valueInput = document.getElementById('valueInput');
-		const selectedCheck = document.getElementById('selectedCheck');
-		const disabledCheck = document.getElementById('disabledCheck');
-		const draggableCheck = document.getElementById('draggableCheck');
-		const coloredCheck = document.getElementById('coloredCheck');
-		function updateChip() {
-			// Update variant
-			chip.variant = variantSelect.value;
-			// Update prefix
-			if (prefixInput.value.trim()) {
-				chip.prefix = prefixInput.value.trim();
-			} else {
-				chip.prefix = null;
-			}
-			// Update content
-			chip.innerHTML = contentInput.value;
-			// Update modality
-			chip.modality = modalitySelect.value;
-			// Update data
-			if (dataInput.value.trim()) {
-				chip.data = dataInput.value.trim();
-			} else {
-				chip.removeAttribute('data');
-			}
-			// Update display mode
-			chip.displayMode = displaySelect.value;
-			// Update state
-			if (stateSelect.value) {
-				chip.chipState = stateSelect.value;
-			} else {
-				chip.chipState = null;
-			}
-			// Update color
-			chip.color = colorInput.value;
-			chip.colored = coloredCheck.checked;
-			// Update value
-			if (valueInput.value.trim()) {
-				chip.value = valueInput.value.trim();
-			} else {
-				chip.removeAttribute('value');
-			}
-			// Update boolean attributes
-			chip.selected = selectedCheck.checked;
-			chip.disabled = disabledCheck.checked;
-			chip.draggable = draggableCheck.checked;
-			updateCodePreview();
-		}
-		function updateCodePreview() {
-			const attrs = [];
-			attrs.push(`variant="${chip.variant}"`);
-			if (chip.hasAttribute('prefix')) {
-				attrs.push(`prefix="${chip.prefix}"`);
-			}
-			if (chip.modality !== 'text') {
-				attrs.push(`modality="${chip.modality}"`);
-			}
-			if (chip.hasAttribute('data')) {
-				attrs.push(`data="${chip.data}"`);
-			}
-			if (chip.displayMode !== 'in-line') {
-				attrs.push(`display="${chip.displayMode}"`);
-			}
-			if (chip.chipState) {
-				attrs.push(`state="${chip.chipState}"`);
-			}
-			attrs.push(`color="${chip.color}"`);
-			if (chip.hasAttribute('value')) {
-				attrs.push(`value="${chip.value}"`);
-			}
-			if (chip.selected) attrs.push('selected');
-			if (chip.disabled) attrs.push('disabled');
-			if (chip.draggable) attrs.push('draggable');
-			if (chip.colored) attrs.push('colored');
-			const content = chip.textContent || 'Option Text';
-			const code = `<edu-chip ${attrs.join(' ')}>\n  ${content}\n</edu-chip>`;
-			codePreview.textContent = code;
-		}
-		// Event listeners
-		variantSelect.addEventListener('change', updateChip);
-		prefixInput.addEventListener('input', updateChip);
-		contentInput.addEventListener('input', updateChip);
-		modalitySelect.addEventListener('change', updateChip);
-		dataInput.addEventListener('input', updateChip);
-		displaySelect.addEventListener('change', updateChip);
-		stateSelect.addEventListener('change', updateChip);
-		colorInput.addEventListener('input', updateChip);
-		valueInput.addEventListener('input', updateChip);
-		selectedCheck.addEventListener('change', updateChip);
-		disabledCheck.addEventListener('change', updateChip);
-		draggableCheck.addEventListener('change', updateChip);
-		coloredCheck.addEventListener('change', updateChip);
-		// Copy button
-		copyButton.addEventListener('click', async () => {
-			try {
-				await navigator.clipboard.writeText(codePreview.textContent);
-				copyButton.textContent = 'Copied!';
-				setTimeout(() => {
-					copyButton.textContent = 'Copy Code';
-				}, 2000);
-			} catch (err) {
-				console.error('Failed to copy:', err);
-			}
-		});
-		// Initial update
-		updateChip();
-	</script>
-</body>
-</html>