tessera-learn 0.0.11 → 0.0.13

package/src/components/Image.svelte

@@ -4,17 +4,26 @@
    * Lazy-loaded image with optional caption, rendered as <figure>.
    *
    * @prop {string} src - Image source URL (supports $assets/ paths)
-   * @prop {string} alt - Alt text (required for accessibility)
+   * @prop {string} alt - Alt text. Required unless `decorative` is set; the
+   *   linter (rule 1.3) enforces exactly one of {non-empty alt, decorative}.
+   * @prop {boolean} [decorative] - Mark a purely ornamental image: renders an
+   *   empty alt and aria-hidden so assistive tech skips it.
    * @prop {string} [caption] - Optional caption below image
    */
   import { resolveAsset } from './util.js';
 
-  let { src, alt, caption = '' } = $props();
+  let { src, alt, decorative = false, caption = '' } = $props();
   let resolvedSrc = $derived(resolveAsset(src));
 </script>
 
 <figure class="tessera-image">
-  <img src={resolvedSrc} {alt} loading="lazy" class="tessera-image-img" />
+  <img
+    src={resolvedSrc}
+    alt={decorative ? '' : alt}
+    aria-hidden={decorative ? 'true' : undefined}
+    loading="lazy"
+    class="tessera-image-img"
+  />
   {#if caption}
     <figcaption class="tessera-image-caption">{caption}</figcaption>
   {/if}

package/src/components/LockedBanner.svelte

@@ -1,6 +1,7 @@
 <script>
   import ResultIcon from './ResultIcon.svelte';
-  let { message = 'You already got this one right — click Next to continue.' } = $props();
+  let { message = 'You already got this one right — click Next to continue.' } =
+    $props();
 </script>
 
 <div class="tessera-quiz-locked-banner">

package/src/components/Matching.svelte

@@ -18,19 +18,29 @@
   } = $props();
 
   let shuffledRight = $state([]);
-  let matches = $state(new SvelteMap());
+  const matches = new SvelteMap();
   // Reverse index (right.originalIndex → left index) for O(1) right-column lookups.
-  let rightToLeft = $state(new SvelteMap());
+  const rightToLeft = new SvelteMap();
   let selectedLeft = $state(null);
   let selectedRight = $state(null);
 
   const pairColors = [
-    '#2563eb', '#9333ea', '#0891b2', '#c2410c', '#4f46e5',
-    '#0d9488', '#b91c1c', '#7c3aed', '#0369a1', '#a16207',
+    '#2563eb',
+    '#9333ea',
+    '#0891b2',
+    '#c2410c',
+    '#4f46e5',
+    '#0d9488',
+    '#b91c1c',
+    '#7c3aed',
+    '#0369a1',
+    '#a16207',
   ];
 
   function initShuffle() {
-    shuffledRight = shuffle(pairs.map((p, i) => ({ text: p.right, originalIndex: i })));
+    shuffledRight = shuffle(
+      pairs.map((p, i) => ({ text: p.right, originalIndex: i })),
+    );
   }
 
   function checkAnswer(answer) {
@@ -43,17 +53,23 @@
   }
 
   function resetState() {
-    matches = new SvelteMap();
-    rightToLeft = new SvelteMap();
+    matches.clear();
+    rightToLeft.clear();
     selectedLeft = null;
     selectedRight = null;
     initShuffle();
   }
 
   const q = useQuestion({
-    get id() { return id ?? `matching-${slugFromQuestion(question)}`; },
-    get weight() { return weight; },
-    get maxRetries() { return maxRetries; },
+    get id() {
+      return id ?? `matching-${slugFromQuestion(question)}`;
+    },
+    get weight() {
+      return weight;
+    },
+    get maxRetries() {
+      return maxRetries;
+    },
     response: () => ({
       type: 'matching',
       response: [...matches.entries()].map(([l, r]) => [String(l), String(r)]),
@@ -157,11 +173,12 @@
     <!-- Left column -->
     <div class="tessera-matching-column">
       <div class="tessera-matching-column-header">Match from</div>
-      {#each pairs as pair, i}
+      {#each pairs as pair, i (i)}
         {@const color = getMatchColor(i)}
         {@const isSelected = selectedLeft === i}
         {@const matched = matches.has(i)}
-        {@const correctMatch = q.feedbackVisible && matched && isMatchCorrect(i)}
+        {@const correctMatch =
+          q.feedbackVisible && matched && isMatchCorrect(i)}
         {@const wrongMatch = q.feedbackVisible && matched && !isMatchCorrect(i)}
         <button
           class="tessera-matching-item left"
@@ -170,9 +187,12 @@
           class:correct={correctMatch}
           class:incorrect={wrongMatch}
           style={color ? `border-color: ${color}; --match-color: ${color}` : ''}
-          onclick={() => matched && !q.locked ? removeMatch(i) : handleLeftClick(i)}
+          onclick={() =>
+            matched && !q.locked ? removeMatch(i) : handleLeftClick(i)}
           disabled={q.locked}
-          aria-label="{pair.left}{matched ? ' (matched, activate to unmatch)' : ''}"
+          aria-label="{pair.left}{matched
+            ? ' (matched, activate to unmatch)'
+            : ''}"
         >
           {#if matched}
             <span class="tessera-matching-badge" style="background: {color}">
@@ -190,7 +210,7 @@
     <!-- Right column -->
     <div class="tessera-matching-column">
       <div class="tessera-matching-column-header">Match to</div>
-      {#each shuffledRight as item}
+      {#each shuffledRight as item (item.originalIndex)}
         {@const color = getRightMatchColor(item.originalIndex)}
         {@const isSelected = selectedRight === item.originalIndex}
         {@const matched = isRightMatched(item.originalIndex)}
@@ -233,8 +253,10 @@
         </div>
         <div class="tessera-matching-correct-pairs">
           <p class="tessera-matching-correct-pairs-title">Correct pairs:</p>
-          {#each pairs as pair}
-            <p class="tessera-matching-correct-pair">{pair.left} → {pair.right}</p>
+          {#each pairs as pair, i (i)}
+            <p class="tessera-matching-correct-pair">
+              {pair.left} → {pair.right}
+            </p>
           {/each}
         </div>
         {#if incorrectFeedback}
@@ -306,7 +328,10 @@
     border-radius: 8px;
     background: var(--tessera-bg);
     cursor: pointer;
-    transition: border-color 0.2s, background 0.2s, transform 0.1s;
+    transition:
+      border-color 0.2s,
+      background 0.2s,
+      transform 0.1s;
     font-size: 0.9375rem;
     font-family: var(--tessera-font-family);
     color: var(--tessera-text);
@@ -326,7 +351,11 @@
   }
 
   .tessera-matching-item.matched {
-    background: color-mix(in srgb, var(--match-color, var(--tessera-primary)) 8%, transparent);
+    background: color-mix(
+      in srgb,
+      var(--match-color, var(--tessera-primary)) 8%,
+      transparent
+    );
   }
 
   .tessera-matching-item.correct {

package/src/components/MediaTracks.svelte

@@ -0,0 +1,21 @@
+<script>
+  /**
+   * @component MediaTracks
+   * Renders caption/subtitle <track> elements for a native <audio>/<video>.
+   * Used inline as a child of the media element so the tracks attach to it.
+   *
+   * @prop {Array<{ src: string, kind?: 'captions'|'subtitles', srclang?: string, label?: string }>} [tracks]
+   */
+  import { resolveAsset } from './util.js';
+
+  let { tracks = [] } = $props();
+</script>
+
+{#each tracks as track, i (i)}
+  <track
+    src={resolveAsset(track.src)}
+    kind={track.kind ?? 'captions'}
+    srclang={track.srclang}
+    label={track.label}
+  />
+{/each}

package/src/components/MultipleChoice.svelte

@@ -23,15 +23,23 @@
   const groupId = `mc-${componentId}`;
 
   const q = useQuestion({
-    get id() { return id ?? `mc-${slugFromQuestion(question)}`; },
-    get weight() { return weight; },
-    get maxRetries() { return maxRetries; },
+    get id() {
+      return id ?? `mc-${slugFromQuestion(question)}`;
+    },
+    get weight() {
+      return weight;
+    },
+    get maxRetries() {
+      return maxRetries;
+    },
     response: () => ({
       type: 'choice',
       response: selectedOption !== null ? [String(selectedOption)] : [],
       correct: [String(correct)],
     }),
-    reset: () => { selectedOption = null; },
+    reset: () => {
+      selectedOption = null;
+    },
   });
 
   // `q.mode` is fixed for the lifetime of the widget; capture once.
@@ -59,7 +67,8 @@
   function getOptionClass(optIndex) {
     if (!q.feedbackVisible) return '';
     if (isCorrectOption(optIndex)) return 'correct';
-    if (optIndex === selectedOption && !isCorrectOption(optIndex)) return 'incorrect';
+    if (optIndex === selectedOption && !isCorrectOption(optIndex))
+      return 'incorrect';
     return '';
   }
 </script>
@@ -68,7 +77,7 @@
   <p class="tessera-mc-question" id="{groupId}-label">{question}</p>
 
   <div class="tessera-mc-options">
-    {#each options as option, i}
+    {#each options as option, i (i)}
       {@const optionId = `${groupId}-opt-${i}`}
       {@const isSelected = selectedOption === i}
       {@const stateClass = getOptionClass(i)}
@@ -91,9 +100,13 @@
 
         {#if q.feedbackVisible}
           {#if stateClass === 'correct' && (correctFeedback || optionFeedback[i])}
-            <span class="tessera-mc-feedback correct">{optionFeedback[i] || correctFeedback}</span>
+            <span class="tessera-mc-feedback correct"
+              >{optionFeedback[i] || correctFeedback}</span
+            >
           {:else if stateClass === 'incorrect' && (incorrectFeedback || optionFeedback[i])}
-            <span class="tessera-mc-feedback incorrect">{optionFeedback[i] || incorrectFeedback}</span>
+            <span class="tessera-mc-feedback incorrect"
+              >{optionFeedback[i] || incorrectFeedback}</span
+            >
           {:else if optionFeedback[i]}
             <span class="tessera-mc-feedback">{optionFeedback[i]}</span>
           {/if}
@@ -106,7 +119,9 @@
     {#if selectedOption === correct && correctFeedback && !optionFeedback[selectedOption]}
       <div class="tessera-mc-overall-feedback correct">{correctFeedback}</div>
     {:else if selectedOption !== correct && incorrectFeedback && !optionFeedback[selectedOption]}
-      <div class="tessera-mc-overall-feedback incorrect">{incorrectFeedback}</div>
+      <div class="tessera-mc-overall-feedback incorrect">
+        {incorrectFeedback}
+      </div>
     {/if}
     {#if !inQuiz && q.canRetry}
       <RetryButton onclick={() => q.retry()} />
@@ -155,7 +170,9 @@
     border: 2px solid var(--tessera-border);
     border-radius: 8px;
     cursor: pointer;
-    transition: border-color 0.2s, background 0.2s;
+    transition:
+      border-color 0.2s,
+      background 0.2s;
     flex-wrap: wrap;
     min-height: 44px;
   }
@@ -180,7 +197,7 @@
     background: var(--tessera-error-bg);
   }
 
-  .tessera-mc-option input[type="radio"] {
+  .tessera-mc-option input[type='radio'] {
     position: absolute;
     opacity: 0;
     width: 0;
@@ -194,7 +211,9 @@
     border: 2px solid var(--tessera-border);
     border-radius: 50%;
     margin-top: 2px;
-    transition: border-color 0.2s, background 0.2s;
+    transition:
+      border-color 0.2s,
+      background 0.2s;
     position: relative;
   }
 
@@ -238,7 +257,8 @@
   .tessera-mc-feedback {
     width: 100%;
     font-size: 0.875rem;
-    padding: var(--tessera-spacing-sm) 0 0 calc(20px + var(--tessera-spacing-md));
+    padding: var(--tessera-spacing-sm) 0 0
+      calc(20px + var(--tessera-spacing-md));
     line-height: 1.4;
   }
 

package/src/components/Quiz.svelte

@@ -12,16 +12,17 @@
   let quizConfig = $derived(pageCtx?.quiz ?? {});
   let feedbackDisabled = $derived(quizConfig.feedbackMode === 'never');
   let maxAttempts = $derived(quizConfig.maxAttempts ?? Infinity);
-  let isImmediateMode = $derived(!feedbackDisabled && quizConfig.feedbackMode === 'immediate');
+  let isImmediateMode = $derived(
+    !feedbackDisabled && quizConfig.feedbackMode === 'immediate',
+  );
 
   let currentQuestionIndex = $state(0);
   let reviewIndex = $state(0);
 
   let totalQuestions = $derived(handle.questions.length);
   let currentQuestion = $derived(handle.questions[currentQuestionIndex]);
-  let reviewQuestion = $derived(handle.questions[reviewIndex]);
   let correctCount = $derived(
-    handle.questions.reduce((sum, q) => sum + (q.correct ? 1 : 0), 0)
+    handle.questions.reduce((sum, q) => sum + (q.correct ? 1 : 0), 0),
   );
   let passed = $derived(handle.score >= handle.passingScore);
 
@@ -32,7 +33,12 @@
 
   function needsReveal(q) {
     if (!q) return false;
-    return isImmediateMode && isAnswered(q) && !q.isLockedCorrect && !q.feedbackVisible;
+    return (
+      isImmediateMode &&
+      isAnswered(q) &&
+      !q.isLockedCorrect &&
+      !q.feedbackVisible
+    );
   }
 
   function goNextQuestion() {
@@ -75,25 +81,40 @@
   }
 </script>
 
-<div class="tessera-quiz" bind:this={quizElement} role="region" aria-label="Quiz">
+<div
+  class="tessera-quiz"
+  bind:this={quizElement}
+  role="region"
+  aria-label="Quiz"
+>
   {#if handle.state === 'answering'}
     <!-- Question phase -->
     <div class="tessera-quiz-progress" aria-live="polite">
       <span class="tessera-quiz-progress-text">
-        <span class="tessera-quiz-progress-desktop">Question {currentQuestionIndex + 1} of {totalQuestions}</span>
-        <span class="tessera-quiz-progress-mobile">{currentQuestionIndex + 1}/{totalQuestions}</span>
+        <span class="tessera-quiz-progress-desktop"
+          >Question {currentQuestionIndex + 1} of {totalQuestions}</span
+        >
+        <span class="tessera-quiz-progress-mobile"
+          >{currentQuestionIndex + 1}/{totalQuestions}</span
+        >
       </span>
       <div class="tessera-progress-track">
         <div
           class="tessera-progress-fill"
-          style="width: {totalQuestions > 0 ? ((currentQuestionIndex + 1) / totalQuestions) * 100 : 0}%"
+          style="width: {totalQuestions > 0
+            ? ((currentQuestionIndex + 1) / totalQuestions) * 100
+            : 0}%"
         ></div>
       </div>
     </div>
 
     <div class="tessera-quiz-questions">
       {#each handle.questions as q, i (q.id)}
-        <div class="tessera-quiz-question-wrapper" class:active={i === currentQuestionIndex} aria-hidden={i !== currentQuestionIndex}>
+        <div
+          class="tessera-quiz-question-wrapper"
+          class:active={i === currentQuestionIndex}
+          aria-hidden={i !== currentQuestionIndex}
+        >
           {#if q.render}
             {@render q.render()}
           {/if}
@@ -115,7 +136,9 @@
           disabled={!isAnswered(currentQuestion)}
           onclick={goNextQuestion}
         >
-          {currentQuestion?.feedbackVisible && isImmediateMode ? 'Continue' : 'Next'}
+          {currentQuestion?.feedbackVisible && isImmediateMode
+            ? 'Continue'
+            : 'Next'}
         </button>
       {:else if needsReveal(currentQuestion)}
         <button
@@ -134,19 +157,26 @@
         </button>
       {/if}
     </div>
-
   {:else if handle.state === 'reviewing'}
     <!-- Review phase -->
     <div class="tessera-quiz-progress" aria-live="polite">
       <span class="tessera-quiz-progress-text">
-        <span class="tessera-quiz-progress-desktop">Review: Question {reviewIndex + 1} of {totalQuestions}</span>
-        <span class="tessera-quiz-progress-mobile">Review: {reviewIndex + 1}/{totalQuestions}</span>
+        <span class="tessera-quiz-progress-desktop"
+          >Review: Question {reviewIndex + 1} of {totalQuestions}</span
+        >
+        <span class="tessera-quiz-progress-mobile"
+          >Review: {reviewIndex + 1}/{totalQuestions}</span
+        >
       </span>
     </div>
 
     <div class="tessera-quiz-questions">
       {#each handle.questions as q, i (q.id)}
-        <div class="tessera-quiz-question-wrapper" class:active={i === reviewIndex} aria-hidden={i !== reviewIndex}>
+        <div
+          class="tessera-quiz-question-wrapper"
+          class:active={i === reviewIndex}
+          aria-hidden={i !== reviewIndex}
+        >
           {#if q.render}
             {@render q.render()}
           {/if}
@@ -178,14 +208,17 @@
         </button>
       {/if}
     </div>
-
   {:else}
     <!-- Results phase -->
     <div class="tessera-quiz-results" role="status" aria-live="polite">
       <h2 class="tessera-quiz-results-title">Quiz Results</h2>
       <div class="tessera-quiz-score">
         <span class="tessera-quiz-score-value">{handle.score}%</span>
-        <span class="tessera-quiz-score-label" class:passed class:failed={!passed}>
+        <span
+          class="tessera-quiz-score-label"
+          class:passed
+          class:failed={!passed}
+        >
           {passed ? 'Passed' : 'Not Passed'}
         </span>
       </div>
@@ -211,7 +244,9 @@
           </button>
         {/if}
         {#if maxAttempts !== Infinity && handle.attemptCount >= maxAttempts}
-          <p class="tessera-quiz-attempts-exhausted">All attempts used ({handle.attemptCount}/{maxAttempts})</p>
+          <p class="tessera-quiz-attempts-exhausted">
+            All attempts used ({handle.attemptCount}/{maxAttempts})
+          </p>
         {/if}
       </div>
     </div>
@@ -272,7 +307,9 @@
     font-size: 0.9375rem;
     font-weight: 500;
     cursor: pointer;
-    transition: background 0.2s, opacity 0.2s;
+    transition:
+      background 0.2s,
+      opacity 0.2s;
     min-height: 44px;
     min-width: 44px;
   }
@@ -353,8 +390,12 @@
 
   /* Mobile */
   @media (max-width: 640px) {
-    .tessera-quiz-progress-desktop { display: none; }
-    .tessera-quiz-progress-mobile { display: inline; }
+    .tessera-quiz-progress-desktop {
+      display: none;
+    }
+    .tessera-quiz-progress-mobile {
+      display: inline;
+    }
 
     .tessera-quiz-nav {
       position: sticky;

package/src/components/ResultIcon.svelte

@@ -3,11 +3,27 @@
 </script>
 
 {#if kind === 'correct'}
-  <svg viewBox="0 0 16 16" fill="currentColor" width={size} height={size} 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
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    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>
 {:else}
-  <svg viewBox="0 0 16 16" fill="currentColor" width={size} height={size} 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
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    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>
 {/if}

package/src/components/RevealModal.svelte

@@ -7,8 +7,6 @@
    * @prop {import('svelte').Snippet} trigger - Trigger content snippet
    * @prop {import('svelte').Snippet} content - Modal body snippet
    */
-  import { onMount } from 'svelte';
-
   let { trigger, content, title = '' } = $props();
   let open = $state(false);
   let modalRef = $state(null);
@@ -26,13 +24,6 @@
     }
   }
 
-  function handleTriggerKey(e) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      openModal();
-    }
-  }
-
   function handleOverlayClick(e) {
     if (e.target === e.currentTarget) {
       closeModal();
@@ -48,7 +39,7 @@
     // Focus trap
     if (e.key === 'Tab' && modalRef) {
       const focusable = modalRef.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
       );
       if (focusable.length === 0) return;
 
@@ -76,7 +67,7 @@
       queueMicrotask(() => {
         if (modalRef) {
           const firstFocusable = modalRef.querySelector(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
           );
           if (firstFocusable) firstFocusable.focus();
           else modalRef.focus();
@@ -90,10 +81,7 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class="tessera-reveal-trigger"
-  onclick={openModal}
->
+<div class="tessera-reveal-trigger" onclick={openModal}>
   {@render trigger()}
 </div>
 
@@ -118,7 +106,11 @@
       <div class="tessera-modal-body">
         {@render content()}
       </div>
-      <button class="tessera-modal-close" onclick={closeModal} aria-label="Close modal">
+      <button
+        class="tessera-modal-close"
+        onclick={closeModal}
+        aria-label="Close modal"
+      >
         ✕
       </button>
     </div>
@@ -194,8 +186,9 @@
     color: var(--tessera-text-light);
     cursor: pointer;
     border-radius: 6px;
-    transition: background-color var(--tessera-transition-fast),
-                color var(--tessera-transition-fast);
+    transition:
+      background-color var(--tessera-transition-fast),
+      color var(--tessera-transition-fast);
   }
 
   .tessera-modal-close:hover {
@@ -209,13 +202,23 @@
   }
 
   @keyframes tessera-modal-fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
 
   @keyframes tessera-modal-slide-in {
-    from { transform: translateY(10px); opacity: 0; }
-    to { transform: translateY(0); opacity: 1; }
+    from {
+      transform: translateY(10px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
   }
 
   @media (max-width: 640px) {