tessera-learn 0.0.10 → 0.0.13

package/src/components/FillInTheBlank.svelte

@@ -25,7 +25,7 @@
   function checkAnswer(userAnswer) {
     if (!userAnswer || typeof userAnswer !== 'string') return false;
     const trimmed = userAnswer.trim();
-    return answers.some(acceptable => {
+    return answers.some((acceptable) => {
       const a = acceptable.trim();
       if (caseSensitive) return trimmed === a;
       return trimmed.toLowerCase() === a.toLowerCase();
@@ -33,16 +33,24 @@
   }
 
   const q = useQuestion({
-    get id() { return id ?? `fitb-${slugFromQuestion(question)}`; },
-    get weight() { return weight; },
-    get maxRetries() { return maxRetries; },
+    get id() {
+      return id ?? `fitb-${slugFromQuestion(question)}`;
+    },
+    get weight() {
+      return weight;
+    },
+    get maxRetries() {
+      return maxRetries;
+    },
     response: () => ({
       type: 'fill-in',
       response: inputValue,
       correct: Array.isArray(answers) ? answers : [answers],
       caseMatters: !!caseSensitive,
     }),
-    reset: () => { inputValue = ''; },
+    reset: () => {
+      inputValue = '';
+    },
   });
 
   // `q.mode` is fixed for the lifetime of the widget; capture once.
@@ -71,63 +79,70 @@
   }
 </script>
 
-{#if !inQuiz}
-  <div class="tessera-fitb">
-    <label class="tessera-fitb-question" for={inputId}>{question}</label>
-
-    <div class="tessera-fitb-input-wrapper">
-      <input
-        type="text"
-        id={inputId}
-        class="tessera-fitb-input"
-        class:correct={q.submitted && checkAnswer(inputValue)}
-        class:incorrect={q.submitted && !checkAnswer(inputValue)}
-        value={inputValue}
-        oninput={handleInput}
-        onkeydown={handleKeydown}
-        disabled={q.submitted}
-        placeholder="Type your answer..."
-        autocomplete="off"
-      />
-      {#if !q.submitted}
-        <button
-          class="tessera-btn-primary tessera-fitb-check-btn"
-          disabled={!inputValue.trim()}
-          onclick={() => { q.submit(); }}
-        >
-          Check
-        </button>
-      {/if}
-    </div>
+{#snippet fitbContent()}
+  <label class="tessera-fitb-question" for={inputId}>{question}</label>
+
+  <div class="tessera-fitb-input-wrapper">
+    <input
+      type="text"
+      id={inputId}
+      class="tessera-fitb-input"
+      class:correct={q.feedbackVisible && checkAnswer(inputValue)}
+      class:incorrect={q.feedbackVisible && !checkAnswer(inputValue)}
+      value={inputValue}
+      oninput={handleInput}
+      onkeydown={handleKeydown}
+      onblur={handleBlur}
+      disabled={q.locked}
+      placeholder="Type your answer..."
+      autocomplete="off"
+    />
+    {#if !inQuiz && !q.submitted}
+      <button
+        class="tessera-btn-primary tessera-fitb-check-btn"
+        disabled={!inputValue.trim()}
+        onclick={() => {
+          q.submit();
+        }}
+      >
+        Check
+      </button>
+    {/if}
+  </div>
 
-    {#if q.submitted}
-      {@const isCorrect = checkAnswer(inputValue)}
-      <div class="tessera-fitb-review">
-        {#if isCorrect}
-          <div class="tessera-fitb-result correct">
-            <ResultIcon kind="correct" />
-            Correct
-          </div>
-          {#if correctFeedback}
-            <p class="tessera-fitb-feedback correct">{correctFeedback}</p>
-          {/if}
-        {:else}
-          <div class="tessera-fitb-result incorrect">
-            <ResultIcon kind="incorrect" />
-            Incorrect
-          </div>
-          <p class="tessera-fitb-correct-answer">
-            Correct answer{answers.length > 1 ? 's' : ''}: {answers.join(', ')}
-          </p>
-          {#if incorrectFeedback}
-            <p class="tessera-fitb-feedback incorrect">{incorrectFeedback}</p>
-          {/if}
+  {#if q.feedbackVisible}
+    {@const isCorrect = checkAnswer(inputValue)}
+    <div class="tessera-fitb-review">
+      {#if isCorrect}
+        <div class="tessera-fitb-result correct">
+          <ResultIcon kind="correct" />
+          Correct
+        </div>
+        {#if correctFeedback}
+          <p class="tessera-fitb-feedback correct">{correctFeedback}</p>
         {/if}
-        {#if q.canRetry}
-          <RetryButton onclick={() => q.retry()} />
+      {:else}
+        <div class="tessera-fitb-result incorrect">
+          <ResultIcon kind="incorrect" />
+          Incorrect
+        </div>
+        <p class="tessera-fitb-correct-answer">
+          Correct answer{answers.length > 1 ? 's' : ''}: {answers.join(', ')}
+        </p>
+        {#if incorrectFeedback}
+          <p class="tessera-fitb-feedback incorrect">{incorrectFeedback}</p>
         {/if}
-      </div>
-    {/if}
+      {/if}
+      {#if !inQuiz && q.canRetry}
+        <RetryButton onclick={() => q.retry()} />
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+{#if !inQuiz}
+  <div class="tessera-fitb">
+    {@render fitbContent()}
   </div>
 {/if}
 
@@ -136,50 +151,7 @@
     {#if q.isLockedCorrect}
       <LockedBanner />
     {/if}
-    <label class="tessera-fitb-question" for={inputId}>{question}</label>
-
-    <div class="tessera-fitb-input-wrapper">
-      <input
-        type="text"
-        id={inputId}
-        class="tessera-fitb-input"
-        class:correct={q.feedbackVisible && checkAnswer(q.answer)}
-        class:incorrect={q.feedbackVisible && !checkAnswer(q.answer)}
-        value={q.locked ? (q.answer ?? '') : inputValue}
-        oninput={handleInput}
-        onblur={handleBlur}
-        disabled={q.locked}
-        placeholder="Type your answer..."
-        autocomplete="off"
-      />
-    </div>
-
-    {#if q.feedbackVisible}
-      {@const userAnswer = q.answer}
-      {@const isCorrect = checkAnswer(userAnswer)}
-      <div class="tessera-fitb-review">
-        {#if isCorrect}
-          <div class="tessera-fitb-result correct">
-            <ResultIcon kind="correct" />
-            Correct
-          </div>
-          {#if correctFeedback}
-            <p class="tessera-fitb-feedback correct">{correctFeedback}</p>
-          {/if}
-        {:else}
-          <div class="tessera-fitb-result incorrect">
-            <ResultIcon kind="incorrect" />
-            Incorrect
-          </div>
-          <p class="tessera-fitb-correct-answer">
-            Correct answer{answers.length > 1 ? 's' : ''}: {answers.join(', ')}
-          </p>
-          {#if incorrectFeedback}
-            <p class="tessera-fitb-feedback incorrect">{incorrectFeedback}</p>
-          {/if}
-        {/if}
-      </div>
-    {/if}
+    {@render fitbContent()}
   </div>
 {/snippet}
 

package/src/components/Image.svelte

@@ -4,22 +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
    */
-  let { src, alt, caption = '' } = $props();
+  import { resolveAsset } from './util.js';
 
-  // Resolve $assets/ prefix to the assets directory.
-  // In dev, Vite serves from project root so /assets/ works.
-  // In build, the Vite alias handles JS imports but not HTML attrs,
-  // so we rewrite to a root-relative path that Vite can serve.
-  let resolvedSrc = $derived(
-    src.startsWith('$assets/') ? src.replace('$assets/', '/assets/') : src
-  );
+  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,11 +1,11 @@
 <script>
-  let { message = 'You already got this one right — click Next to continue.' } = $props();
+  import ResultIcon from './ResultIcon.svelte';
+  let { message = 'You already got this one right — click Next to continue.' } =
+    $props();
 </script>
 
 <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>
+  <ResultIcon kind="correct" />
   {message}
 </div>
 
@@ -24,7 +24,7 @@
     font-weight: 500;
   }
 
-  .tessera-quiz-locked-banner svg {
+  .tessera-quiz-locked-banner :global(svg) {
     flex-shrink: 0;
   }
 </style>

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}