tessera-learn 0.0.1 → 0.0.2

package/src/components/Sorting.svelte

@@ -1,7 +1,11 @@
 <script>
   import { getContext, onMount } from 'svelte';
+  import { SvelteMap } from 'svelte/reactivity';
   import { useQuestion } from '../runtime/hooks.svelte.js';
-  import { slugFromQuestion } from './util.js';
+  import { slugFromQuestion, shuffle } from './util.js';
+  import LockedBanner from './LockedBanner.svelte';
+  import ResultIcon from './ResultIcon.svelte';
+  import RetryButton from './RetryButton.svelte';
 
   let {
     id,
@@ -19,28 +23,14 @@
   const standalone = !quiz;
 
   let queue = $state([]);              // item indices not yet placed; queue[0] is current
-  let placements = $state(new Map()); // itemIdx → targetIdx
+  let placements = $state(new SvelteMap()); // itemIdx → targetIdx
   let dragOver = $state(null);         // target index highlighted during drag
   let isDragging = $state(false);
   let cardSelected = $state(false);    // current card selected via tap/click
 
-  let saRetryCount = $state(0);
-  let saCanRetry = $derived(saRetryCount < maxRetries);
-
-  const defaultId = `sorting-${slugFromQuestion(question)}`;
-
-  function shuffle(arr) {
-    const a = [...arr];
-    for (let i = a.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [a[i], a[j]] = [a[j], a[i]];
-    }
-    return a;
-  }
-
   function initQueue() {
     queue = shuffle(items.map((_, i) => i));
-    placements = new Map();
+    placements = new SvelteMap();
     cardSelected = false;
     dragOver = null;
     isDragging = false;
@@ -72,8 +62,9 @@
   // cleanly to SCORM 2004's `matching` interaction. We emit [itemIdx, targetIdx]
   // pairs as stringified ids.
   const handle = useQuestion({
-    id: id ?? defaultId,
-    weight,
+    get id() { return id ?? `sorting-${slugFromQuestion(question)}`; },
+    get weight() { return weight; },
+    get maxRetries() { return maxRetries; },
     response: () => ({
       type: 'matching',
       response: [...placements.entries()].map(([i, t]) => [String(i), String(t)]),
@@ -170,10 +161,13 @@
     placeCard(targetIdx);
   }
 
-  function handleRetry() {
-    saRetryCount++;
-    handle.reset();
+  function onTargetKeydown(e, targetIdx) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onTargetClick(targetIdx);
+    }
   }
+
 </script>
 
 {#snippet sortingContent()}
@@ -225,12 +219,15 @@
         class="tessera-sorting-target"
         class:drag-over={dragOver === targetIdx}
         class:clickable={cardSelected && !isDisabled}
-        role="group"
-        aria-label="Target: {targetLabel}"
+        role="button"
+        tabindex="0"
+        aria-disabled={!(cardSelected && !isDisabled)}
+        aria-label="Target: {targetLabel}{cardSelected && !isDisabled ? ` (activate to place ${items[currentItemIdx]})` : ''}"
         ondragover={(e) => onDragOver(e, targetIdx)}
         ondragleave={onDragLeave}
         ondrop={(e) => onDrop(e, targetIdx)}
         onclick={() => onTargetClick(targetIdx)}
+        onkeydown={(e) => onTargetKeydown(e, targetIdx)}
       >
         <div class="tessera-sorting-target-label">{targetLabel}</div>
         {#if targetItems.length > 0}
@@ -267,9 +264,7 @@
     <div class="tessera-sorting-review">
       {#if isCorrect}
         <div class="tessera-sorting-result correct">
-          <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" aria-hidden="true">
-            <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
-          </svg>
+          <ResultIcon kind="correct" />
           All items sorted correctly!
         </div>
         {#if correctFeedback}
@@ -277,9 +272,7 @@
         {/if}
       {:else}
         <div class="tessera-sorting-result incorrect">
-          <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" aria-hidden="true">
-            <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"/>
-          </svg>
+          <ResultIcon kind="incorrect" />
           Some items are in the wrong category.
         </div>
         <div class="tessera-sorting-correct-list">
@@ -292,8 +285,8 @@
           <p class="tessera-sorting-feedback incorrect">{incorrectFeedback}</p>
         {/if}
       {/if}
-      {#if standalone && saCanRetry}
-        <button class="tessera-standalone-retry" onclick={handleRetry}>Try again</button>
+      {#if standalone && handle.canRetry}
+        <RetryButton onclick={() => handle.retry()} />
       {/if}
     </div>
   {/if}
@@ -301,7 +294,7 @@
   <!-- Standalone Check button (shown once all cards are placed) -->
   {#if standalone && !handle.submitted && placements.size === items.length}
     <div class="tessera-sorting-actions">
-      <button class="tessera-sorting-check" onclick={() => handle.submit()}>
+      <button class="tessera-btn-primary tessera-sorting-check" onclick={() => handle.submit()}>
         Check Answer
       </button>
     </div>
@@ -317,12 +310,7 @@
 {#snippet renderQuestion()}
   <div class="tessera-sorting" aria-label={question}>
     {#if isLocked}
-      <div class="tessera-quiz-locked-banner">
-        <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" aria-hidden="true">
-          <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
-        </svg>
-        You already got this one right — click Next to continue.
-      </div>
+      <LockedBanner />
     {/if}
     {@render sortingContent()}
   </div>
@@ -385,8 +373,8 @@
   }
 
   .tessera-sorting-card:focus-visible {
-    outline: var(--tessera-focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.4));
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: var(--tessera-focus-ring);
     border-color: var(--tessera-primary);
   }
 
@@ -498,12 +486,12 @@
 
   .tessera-sorting-placed-item.correct {
     border-color: var(--tessera-success);
-    background: color-mix(in srgb, var(--tessera-success) 8%, transparent);
+    background: var(--tessera-success-bg);
   }
 
   .tessera-sorting-placed-item.incorrect {
     border-color: var(--tessera-error);
-    background: color-mix(in srgb, var(--tessera-error) 8%, transparent);
+    background: var(--tessera-error-bg);
   }
 
   .tessera-sorting-item-text {
@@ -592,12 +580,12 @@
 
   .tessera-sorting-feedback.correct {
     color: var(--tessera-success);
-    background: color-mix(in srgb, var(--tessera-success) 8%, transparent);
+    background: var(--tessera-success-bg);
   }
 
   .tessera-sorting-feedback.incorrect {
     color: var(--tessera-error);
-    background: color-mix(in srgb, var(--tessera-error) 8%, transparent);
+    background: var(--tessera-error-bg);
   }
 
   /* --- Standalone actions --- */
@@ -608,39 +596,8 @@
 
   .tessera-sorting-check {
     padding: 0.625rem 1.5rem;
-    background: var(--tessera-primary);
-    color: #fff;
-    border: none;
-    border-radius: 6px;
     font-size: 0.9375rem;
     font-weight: 500;
-    font-family: var(--tessera-font-family);
-    cursor: pointer;
-    min-height: 44px;
-    transition: background 0.2s;
-  }
-
-  .tessera-sorting-check:hover {
-    background: var(--tessera-primary-dark);
-  }
-
-  .tessera-standalone-retry {
-    display: inline-block;
-    margin-top: var(--tessera-spacing-md);
-    padding: 0;
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: var(--tessera-primary);
-    background: none;
-    border: none;
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: 2px;
-    font-family: var(--tessera-font-family);
-  }
-
-  .tessera-standalone-retry:hover {
-    color: var(--tessera-primary-dark);
   }
 
   /* --- Mobile --- */

package/src/components/util.ts

@@ -22,3 +22,13 @@ export function slugFromQuestion(text: unknown): string {
     .replace(/^-|-$/g, '')
     .slice(0, 40);
 }
+
+/** Fisher-Yates shuffle returning a fresh array. */
+export function shuffle<T>(arr: readonly T[]): T[] {
+  const result = arr.slice();
+  for (let i = result.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [result[i], result[j]] = [result[j], result[i]];
+  }
+  return result;
+}

package/src/plugin/export.ts

@@ -70,10 +70,36 @@ function formatSize(bytes: number): string {
 
 // ---------- Manifest Generators ----------
 
-export function generateSCORM12Manifest(
+/** Per-version XML differences in imsmanifest.xml between SCORM 1.2 and 2004. */
+interface ScormManifestDialect {
+  rootNs: string;
+  adlcpNs: string;
+  schemaversion: string;
+  /** Attribute name on <resource>: SCORM 1.2 uses lowercase, 2004 uses camelCase. */
+  scormTypeAttr: 'scormtype' | 'scormType';
+}
+
+const SCORM_DIALECTS: Record<'1.2' | '2004', ScormManifestDialect> = {
+  '1.2': {
+    rootNs: 'http://www.imsproject.org/xsd/imscp_rootv1p1p2',
+    adlcpNs: 'http://www.adlnet.org/xsd/adlcp_rootv1p2',
+    schemaversion: '1.2',
+    scormTypeAttr: 'scormtype',
+  },
+  '2004': {
+    rootNs: 'http://www.imsglobal.org/xsd/imscp_v1p1',
+    adlcpNs: 'http://www.adlnet.org/xsd/adlcp_v1p3',
+    schemaversion: '2004 4th Edition',
+    scormTypeAttr: 'scormType',
+  },
+};
+
+export function generateScormManifest(
+  version: '1.2' | '2004',
   config: ExportConfig,
   distDir: string
 ): string {
+  const dialect = SCORM_DIALECTS[version];
   const title = escapeXml(config.title || 'Tessera Course');
   const files = collectFiles(distDir);
   const fileElements = files
@@ -82,11 +108,11 @@ export function generateSCORM12Manifest(
 
   return `<?xml version="1.0" encoding="UTF-8"?>
 <manifest identifier="tessera-course" version="1.0"
-  xmlns="http://www.imsproject.org/xsd/imscp_rootv1p1p2"
-  xmlns:adlcp="http://www.adlnet.org/xsd/adlcp_rootv1p2">
+  xmlns="${dialect.rootNs}"
+  xmlns:adlcp="${dialect.adlcpNs}">
   <metadata>
     <schema>ADL SCORM</schema>
-    <schemaversion>1.2</schemaversion>
+    <schemaversion>${dialect.schemaversion}</schemaversion>
   </metadata>
   <organizations default="org-1">
     <organization identifier="org-1">
@@ -97,45 +123,25 @@ export function generateSCORM12Manifest(
     </organization>
   </organizations>
   <resources>
-    <resource identifier="res-1" type="webcontent" adlcp:scormtype="sco" href="index.html">
+    <resource identifier="res-1" type="webcontent" adlcp:${dialect.scormTypeAttr}="sco" href="index.html">
 ${fileElements}
     </resource>
   </resources>
 </manifest>`;
 }
 
-export function generateSCORM2004Manifest(
+export function generateSCORM12Manifest(
   config: ExportConfig,
   distDir: string
 ): string {
-  const title = escapeXml(config.title || 'Tessera Course');
-  const files = collectFiles(distDir);
-  const fileElements = files
-    .map((f) => `      <file href="${escapeXml(f)}" />`)
-    .join('\n');
+  return generateScormManifest('1.2', config, distDir);
+}
 
-  return `<?xml version="1.0" encoding="UTF-8"?>
-<manifest identifier="tessera-course" version="1.0"
-  xmlns="http://www.imsglobal.org/xsd/imscp_v1p1"
-  xmlns:adlcp="http://www.adlnet.org/xsd/adlcp_v1p3">
-  <metadata>
-    <schema>ADL SCORM</schema>
-    <schemaversion>2004 4th Edition</schemaversion>
-  </metadata>
-  <organizations default="org-1">
-    <organization identifier="org-1">
-      <title>${title}</title>
-      <item identifier="item-1" identifierref="res-1">
-        <title>${title}</title>
-      </item>
-    </organization>
-  </organizations>
-  <resources>
-    <resource identifier="res-1" type="webcontent" adlcp:scormType="sco" href="index.html">
-${fileElements}
-    </resource>
-  </resources>
-</manifest>`;
+export function generateSCORM2004Manifest(
+  config: ExportConfig,
+  distDir: string
+): string {
+  return generateScormManifest('2004', config, distDir);
 }
 
 export function generateCMI5Xml(config: ExportConfig): string {

package/src/plugin/manifest.ts

@@ -33,6 +33,11 @@ export interface Manifest {
   totalPages: number;
 }
 
+/** Append `.svelte` if not already present. Both bare and suffixed names are accepted in author config. */
+export function ensureSvelteSuffix(name: string): string {
+  return name.endsWith('.svelte') ? name : `${name}.svelte`;
+}
+
 // ---------- File read cache ----------
 
 /**
@@ -117,32 +122,53 @@ export function readMetaFile(metaPath: string): { title?: string; pages?: string
   }
 }
 
-/**
- * Extract pageConfig from a .svelte file's module script block.
- */
-export function extractPageConfig(filePath: string): { title?: string; quiz?: QuizConfig } {
-  const content = readSourceFileCached(filePath);
-
+/** Result of parsing a `.svelte` source for its `pageConfig` module-script export. */
+export type PageConfigParseResult =
+  /** No module script, or no `pageConfig =` export. Treat as "no config". */
+  | { kind: 'none' }
+  /** Found and successfully parsed. */
+  | { kind: 'ok'; value: { title?: string; quiz?: QuizConfig } }
+  /** Found but couldn't parse as a static object literal — non-literal RHS or JSON5 failure. */
+  | { kind: 'invalid' };
+
+/** Source-level pageConfig extraction shared by manifest generation and build-time validation. */
+export function parsePageConfigFromSource(content: string): PageConfigParseResult {
   const moduleScriptMatch = content.match(MODULE_SCRIPT_RE);
-  if (!moduleScriptMatch) return {};
+  if (!moduleScriptMatch) return { kind: 'none' };
 
   const scriptContent = moduleScriptMatch[1];
 
   const configMatch = scriptContent.match(PAGE_CONFIG_EXPORT_RE);
-  if (!configMatch || configMatch.index === undefined) return {};
+  if (!configMatch || configMatch.index === undefined) return { kind: 'none' };
+
+  const afterExport = scriptContent
+    .slice(configMatch.index + configMatch[0].length)
+    .trimStart();
+  // pageConfig assigned to something other than an object literal — flag as invalid.
+  if (!afterExport.startsWith('{')) return { kind: 'invalid' };
 
   const startIndex = scriptContent.indexOf('{', configMatch.index + configMatch[0].length);
-  if (startIndex < 0) return {};
+  if (startIndex < 0) return { kind: 'invalid' };
   const objectStr = extractObjectLiteral(scriptContent, startIndex);
-  if (!objectStr) return {};
+  if (!objectStr) return { kind: 'invalid' };
 
   try {
-    return JSON5.parse(objectStr);
+    return { kind: 'ok', value: JSON5.parse(objectStr) };
   } catch {
+    return { kind: 'invalid' };
+  }
+}
+
+/** Extract pageConfig from a .svelte file. Throws on parse failure. */
+export function extractPageConfig(filePath: string): { title?: string; quiz?: QuizConfig } {
+  const result = parsePageConfigFromSource(readSourceFileCached(filePath));
+  if (result.kind === 'ok') return result.value;
+  if (result.kind === 'invalid') {
     throw new Error(
       `${filePath}: pageConfig must be a static object literal (no variables, function calls, or computed values)`
     );
   }
+  return {};
 }
 
 /**
@@ -319,7 +345,7 @@ export function orderPageFiles(allFiles: string[], pagesArray?: string[]): strin
     return allFiles;
   }
 
-  const listed = pagesArray.map(name => name.endsWith('.svelte') ? name : `${name}.svelte`);
+  const listed = pagesArray.map(ensureSvelteSuffix);
   const listedSet = new Set(listed);
   const unlisted = allFiles.filter(f => !listedSet.has(f)).sort();
 

package/src/plugin/validation.ts

@@ -2,11 +2,10 @@ import { existsSync, readdirSync, statSync } from 'node:fs';
 import { resolve, relative } from 'node:path';
 import JSON5 from 'json5';
 import {
-  extractObjectLiteral,
   extractDefaultExportObjectLiteral,
+  parsePageConfigFromSource,
   readSourceFileCached,
-  MODULE_SCRIPT_RE,
-  PAGE_CONFIG_EXPORT_RE,
+  ensureSvelteSuffix,
 } from './manifest.js';
 import { validateAgent } from '../runtime/xapi/agent-rules.js';
 
@@ -371,7 +370,7 @@ function validateSingleXAPIEntry(
       );
     }
   } else if (typeof actor === 'object' && actor !== null) {
-    const err = validateStaticAgent(actor);
+    const err = validateAgent(actor);
     if (err) {
       const joined = err.startsWith('.')
         ? `${label}.actor${err}`
@@ -451,13 +450,6 @@ function validateSingleXAPIEntry(
   }
 }
 
-/**
- * Build-time alias for the shared `validateAgent` rules. Suffixes are already
- * prefix-friendly (no leading "actor"), so this is a straight pass-through —
- * kept named so the call sites in this file stay readable.
- */
-const validateStaticAgent = validateAgent;
-
 // ---------- Pages Validation ----------
 
 interface PagesValidationResult extends ValidationResult {
@@ -476,6 +468,8 @@ function validatePages(
   let totalPages = 0;
   let totalQuizzes = 0;
   let hasGradedQuiz = false;
+  // One existsSync per unique asset for the whole pass.
+  const assetExistsCache = new Map<string, boolean>();
 
   if (!existsSync(pagesDir)) {
     errors.push(
@@ -535,9 +529,7 @@ function validatePages(
 
     if (sectionMeta?.pages) {
       for (const pageName of sectionMeta.pages) {
-        const fileName = pageName.endsWith('.svelte')
-          ? pageName
-          : `${pageName}.svelte`;
+        const fileName = ensureSvelteSuffix(pageName);
         if (!sectionSvelteFiles.includes(fileName)) {
           const metaRel = relative(projectRoot, resolve(sectionPath, '_meta.js'));
           errors.push(
@@ -563,7 +555,7 @@ function validatePages(
         }
       }
 
-      validateAssetRefs(content, fileRel, assetsDir, warnings);
+      validateAssetRefs(content, fileRel, assetsDir, warnings, assetExistsCache);
     }
 
     // Get lesson directories
@@ -593,9 +585,7 @@ function validatePages(
       // Check pages array references
       if (meta?.pages) {
         for (const pageName of meta.pages) {
-          const fileName = pageName.endsWith('.svelte')
-            ? pageName
-            : `${pageName}.svelte`;
+          const fileName = ensureSvelteSuffix(pageName);
           if (!svelteFiles.includes(fileName)) {
             const metaRel = relative(projectRoot, resolve(lessonPath, '_meta.js'));
             errors.push(
@@ -607,11 +597,7 @@ function validatePages(
 
       // Check for unlisted .svelte files
       if (meta?.pages && meta.pages.length > 0) {
-        const listedSet = new Set(
-          meta.pages.map((p: string) =>
-            p.endsWith('.svelte') ? p : `${p}.svelte`
-          )
-        );
+        const listedSet = new Set(meta.pages.map(ensureSvelteSuffix));
         for (const file of svelteFiles) {
           if (!listedSet.has(file)) {
             const relPath = relative(projectRoot, resolve(lessonPath, file));
@@ -643,7 +629,7 @@ function validatePages(
         }
 
         // Check $assets references
-        validateAssetRefs(content, fileRel, assetsDir, warnings);
+        validateAssetRefs(content, fileRel, assetsDir, warnings, assetExistsCache);
       }
     }
   }
@@ -696,47 +682,14 @@ function validatePageConfig(
   fileRel: string,
   errors: string[]
 ): { title?: string; quiz?: unknown } | null {
-  const moduleScriptMatch = content.match(MODULE_SCRIPT_RE);
-  if (!moduleScriptMatch) return null;
-
-  const scriptContent = moduleScriptMatch[1];
-  const exportMatch = scriptContent.match(PAGE_CONFIG_EXPORT_RE);
-  if (!exportMatch || exportMatch.index === undefined) return null;
-
-  // Now check if the RHS starts with `{` (a static object literal)
-  const afterEquals = scriptContent
-    .slice(exportMatch.index + exportMatch[0].length)
-    .trimStart();
-
-  if (!afterEquals.startsWith('{')) {
-    // pageConfig is exported but assigned to something other than an object literal
-    errors.push(
-      `${fileRel}: pageConfig must be a static object literal (no variables, function calls, or computed values)`
-    );
-    return null;
-  }
-
-  // Find the opening brace in the original scriptContent
-  const braceIndex = scriptContent.indexOf(
-    '{',
-    exportMatch.index + exportMatch[0].length
-  );
-  const objectStr = extractObjectLiteral(scriptContent, braceIndex);
-  if (!objectStr) {
-    errors.push(
-      `${fileRel}: pageConfig must be a static object literal (no variables, function calls, or computed values)`
-    );
-    return null;
-  }
-
-  try {
-    return JSON5.parse(objectStr);
-  } catch {
+  const result = parsePageConfigFromSource(content);
+  if (result.kind === 'ok') return result.value;
+  if (result.kind === 'invalid') {
     errors.push(
       `${fileRel}: pageConfig must be a static object literal (no variables, function calls, or computed values)`
     );
-    return null;
   }
+  return null;
 }
 
 // ---------- Quiz Config Validation ----------
@@ -763,20 +716,34 @@ function validateQuizConfig(quiz: unknown, fileRel: string, errors: string[]): v
 
 // ---------- Asset Reference Validation ----------
 
+const ASSET_REF_RE = /\$assets\/([^\s"'`)]+)/g;
+
+/** Match $assets/... refs in any context (src attrs, import statements, url() etc) and dedupe. */
+function collectAssetRefs(content: string): string[] {
+  const seen = new Set<string>();
+  let match: RegExpExecArray | null;
+  ASSET_REF_RE.lastIndex = 0;
+  while ((match = ASSET_REF_RE.exec(content)) !== null) {
+    seen.add(match[1]);
+  }
+  return [...seen];
+}
+
 function validateAssetRefs(
   content: string,
   fileRel: string,
   assetsDir: string,
-  warnings: string[]
+  warnings: string[],
+  existsCache: Map<string, boolean>
 ): void {
-  // Match $assets/... references in src attributes, import statements, url() etc.
-  const assetRefPattern = /\$assets\/([^\s"'`)]+)/g;
-  let match: RegExpExecArray | null;
-
-  while ((match = assetRefPattern.exec(content)) !== null) {
-    const assetPath = match[1];
+  for (const assetPath of collectAssetRefs(content)) {
     const fullAssetPath = resolve(assetsDir, assetPath);
-    if (!existsSync(fullAssetPath)) {
+    let exists = existsCache.get(fullAssetPath);
+    if (exists === undefined) {
+      exists = existsSync(fullAssetPath);
+      existsCache.set(fullAssetPath, exists);
+    }
+    if (!exists) {
       warnings.push(
         `${fileRel}: "$assets/${assetPath}" not found in assets/ directory`
       );