tessera-learn 0.0.10 → 0.0.13

package/src/runtime/App.svelte

@@ -14,7 +14,12 @@
   import { createAdapter } from 'virtual:tessera-adapter';
   import { buildXAPIClient } from 'virtual:tessera-xapi-setup';
   import { registerXAPIClient } from './xapi/registry.js';
-  import { TESSERA_PAGE, TESSERA_NAV, TESSERA_ADAPTER, TESSERA_USER_STATE } from './contexts.js';
+  import {
+    TESSERA_PAGE,
+    TESSERA_NAV,
+    TESSERA_ADAPTER,
+    TESSERA_USER_STATE,
+  } from './contexts.js';
 
   // ---- Persistence ----
   const adapter = createAdapter(config);
@@ -25,18 +30,28 @@
   let xapiClient = null;
 
   const gradedQuizIndices = new Set(
-    manifest.pages.filter(p => p.quiz?.graded).map(p => p.index)
+    manifest.pages.filter((p) => p.quiz?.graded).map((p) => p.index),
   );
 
   // ---- State classes ----
+  // The Tier-2 auditor appends ?__tessera_audit to unlock navigation so it can
+  // scan every page, including ones gated behind a quiz.
+  const auditMode =
+    typeof window !== 'undefined' &&
+    new URLSearchParams(window.location.search).has('__tessera_audit');
   const progress = new ProgressState(gradedQuizIndices);
-  const nav = new NavigationState(manifest, progress, config);
+  const nav = new NavigationState(manifest, progress, config, auditMode);
   nav.setPageModules(pageModules);
   let duration = $state(new DurationTracker(0));
 
-  const onIdle = typeof window !== 'undefined' && window.requestIdleCallback
-    ? window.requestIdleCallback.bind(window)
-    : (cb) => setTimeout(() => cb({ didTimeout: false, timeRemaining: () => 50 }), 1);
+  const onIdle =
+    typeof window !== 'undefined' && window.requestIdleCallback
+      ? window.requestIdleCallback.bind(window)
+      : (cb) =>
+          setTimeout(
+            () => cb({ didTimeout: false, timeRemaining: () => 50 }),
+            1,
+          );
 
   // Page loading state
   let PageComponent = $state(null);
@@ -45,7 +60,10 @@
   let retryKey = $state(0);
 
   // ---- Page context (reactive, read by Quiz in Step 8) ----
-  let pageContext = $state({ quiz: null, passingScore: config.scoring?.passingScore ?? 70 });
+  let pageContext = $state({
+    quiz: null,
+    passingScore: config.scoring?.passingScore ?? 70,
+  });
   setContext(TESSERA_PAGE, pageContext);
 
   // ---- Navigation context (read by custom chrome components) ----
@@ -54,7 +72,11 @@
   setContext(TESSERA_NAV, { nav, manifest, progress, config });
 
   // ---- Adapter context (read by useQuestion / usePersistence) ----
-  setContext(TESSERA_ADAPTER, { get adapter() { return adapter; } });
+  setContext(TESSERA_ADAPTER, {
+    get adapter() {
+      return adapter;
+    },
+  });
 
   // ---- User-scoped state (read/written by usePersistence) ----
   // Each call site namespaces under its own key. Persisted to SavedState.u.
@@ -74,7 +96,9 @@
   // Otherwise: "default" renders the built-in DefaultLayout; "custom" hides
   // the chrome entirely so a course-owned shell can take over.
   if (UserLayout && config.chrome === 'custom' && import.meta.env?.DEV) {
-    console.warn('[tessera] Both layout.svelte and chrome: "custom" are set. layout.svelte wins.');
+    console.warn(
+      '[tessera] Both layout.svelte and chrome: "custom" are set. layout.svelte wins.',
+    );
   }
   const chromeMode = UserLayout
     ? 'user'
@@ -94,35 +118,39 @@
 
     const loader = pageModules[page.importPath];
     if (!loader) {
-      console.error(`Tessera: No loader for page ${index} at ${page.importPath}`);
+      console.error(
+        `Tessera: No loader for page ${index} at ${page.importPath}`,
+      );
       pageError = new Error(`Page not found: ${page.importPath}`);
       PageComponent = null;
       pageLoading = false;
       return;
     }
 
-    loader().then(mod => {
-      if (gen !== loadGeneration) return; // stale
-      pageError = null;
-      pageContext.quiz = page.quiz;
-      PageComponent = mod.default;
-      pageLoading = false;
-      progress.markVisited(index);
-      if (
-        manifest.pages[index].completesOn === 'view' &&
-        config.completion.mode === 'manual'
-      ) {
-        progress.markCompleteManually();
-      }
-      progress.recalculateCompletion(manifest.totalPages, config);
-      progress.recalculateSuccess(config);
-      onIdle(() => nav.prefetch(index + 1));
-    }).catch(err => {
-      if (gen !== loadGeneration) return; // stale
-      console.error(`Tessera: Failed to load page ${index}`, err);
-      pageError = err;
-      pageLoading = false;
-    });
+    loader()
+      .then((mod) => {
+        if (gen !== loadGeneration) return; // stale
+        pageError = null;
+        pageContext.quiz = page.quiz;
+        PageComponent = mod.default;
+        pageLoading = false;
+        progress.markVisited(index);
+        if (
+          manifest.pages[index].completesOn === 'view' &&
+          config.completion.mode === 'manual'
+        ) {
+          progress.markCompleteManually();
+        }
+        progress.recalculateCompletion(manifest.totalPages, config);
+        progress.recalculateSuccess(config);
+        onIdle(() => nav.prefetch(index + 1));
+      })
+      .catch((err) => {
+        if (gen !== loadGeneration) return; // stale
+        console.error(`Tessera: Failed to load page ${index}`, err);
+        pageError = err;
+        pageLoading = false;
+      });
   }
 
   // React to page index changes
@@ -141,7 +169,11 @@
   // Two sentinels so the validity check doesn't false-positive when the
   // input happens to normalize to the initial fillStyle ("#000000").
   function parseColor(color) {
-    if (typeof CSS !== 'undefined' && CSS.supports && !CSS.supports('color', color)) {
+    if (
+      typeof CSS !== 'undefined' &&
+      CSS.supports &&
+      !CSS.supports('color', color)
+    ) {
       return null;
     }
     const ctx = document.createElement('canvas').getContext('2d');
@@ -153,16 +185,30 @@
     ctx.fillStyle = color;
     const onWhite = ctx.fillStyle;
     if (onBlack !== onWhite) return null;
-    const hex = String(onBlack).match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
-    if (hex) return { r: parseInt(hex[1], 16), g: parseInt(hex[2], 16), b: parseInt(hex[3], 16) };
-    const rgba = String(onBlack).match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    const hex = String(onBlack).match(
+      /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i,
+    );
+    if (hex)
+      return {
+        r: parseInt(hex[1], 16),
+        g: parseInt(hex[2], 16),
+        b: parseInt(hex[3], 16),
+      };
+    const rgba = String(onBlack).match(
+      /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/,
+    );
     return rgba ? { r: +rgba[1], g: +rgba[2], b: +rgba[3] } : null;
   }
 
   function rgbToHsl(r, g, b) {
-    r /= 255; g /= 255; b /= 255;
-    const max = Math.max(r, g, b), min = Math.min(r, g, b);
-    let h = 0, s = 0, l = (max + min) / 2;
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b),
+      min = Math.min(r, g, b);
+    let h = 0,
+      s = 0,
+      l = (max + min) / 2;
     if (max !== min) {
       const d = max - min;
       s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
@@ -170,7 +216,11 @@
       else if (max === g) h = ((b - r) / d + 2) / 6;
       else h = ((r - g) / d + 4) / 6;
     }
-    return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+    return {
+      h: Math.round(h * 360),
+      s: Math.round(s * 100),
+      l: Math.round(l * 100),
+    };
   }
 
   function applyBranding(cfg) {
@@ -180,9 +230,18 @@
       const rgb = parseColor(cfg.branding.primaryColor);
       if (rgb) {
         const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
-        el.style.setProperty('--tessera-primary-light', `hsl(${hsl.h}, ${Math.min(hsl.s + 10, 100)}%, 90%)`);
-        el.style.setProperty('--tessera-primary-dark', `hsl(${hsl.h}, ${Math.min(hsl.s + 10, 100)}%, ${Math.max(hsl.l - 15, 10)}%)`);
-        el.style.setProperty('--tessera-focus-ring', `0 0 0 3px rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.4)`);
+        el.style.setProperty(
+          '--tessera-primary-light',
+          `hsl(${hsl.h}, ${Math.min(hsl.s + 10, 100)}%, 90%)`,
+        );
+        el.style.setProperty(
+          '--tessera-primary-dark',
+          `hsl(${hsl.h}, ${Math.min(hsl.s + 10, 100)}%, ${Math.max(hsl.l - 15, 10)}%)`,
+        );
+        el.style.setProperty(
+          '--tessera-focus-ring',
+          `0 0 0 3px rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.4)`,
+        );
       }
     }
     if (cfg.branding?.fontFamily) {
@@ -249,7 +308,12 @@
       for (const [pageKey, questions] of Object.entries(saved.s)) {
         const pageIndex = Number(pageKey);
         for (const [qid, score] of Object.entries(questions)) {
-          progress.markStandaloneQuestion(pageIndex, qid, Number(score), gradedSet.has(pageIndex));
+          progress.markStandaloneQuestion(
+            pageIndex,
+            qid,
+            Number(score),
+            gradedSet.has(pageIndex),
+          );
         }
       }
     }
@@ -306,30 +370,25 @@
 
   // ---- Persistence: report score/completion/success to adapter ----
   // These are no-ops for WebAdapter but used by LMS adapters (Step 10)
+  let prevReportedScore = $state(null);
   $effect(() => {
-    const scores = progress.quizScores;
-    if (!persistenceReady || scores.size === 0) return;
-    if (gradedQuizIndices.size === 0) return;
-
-    let sum = 0;
-    let attempted = false;
-    for (const i of gradedQuizIndices) {
-      if (scores.has(i)) {
-        sum += scores.get(i) ?? 0;
-        attempted = true;
-      }
-    }
+    void progress.version;
+    if (!persistenceReady) return;
+
+    const { average, attempted } = progress.gradedScore();
     if (!attempted) return;
 
-    // Divide by total graded count — incomplete quizzes count as 0, matching
-    // the recalculateSuccess logic in progress.svelte.ts.
-    const average = sum / gradedQuizIndices.size;
+    const rounded = Math.round(average);
+    if (rounded === prevReportedScore) return;
+    prevReportedScore = rounded;
 
     untrack(() => {
-      adapter.setScore(Math.round(average));
+      adapter.setScore(rounded);
       // Under manual mode, success is owned by requireSuccessStatus.
       if (config.completion.mode !== 'manual') {
-        adapter.setSuccessStatus(average >= config.scoring.passingScore ? 'passed' : 'failed');
+        adapter.setSuccessStatus(
+          average >= config.scoring.passingScore ? 'passed' : 'failed',
+        );
       }
       adapter.setDuration(duration.sessionSeconds);
       adapter.commit();
@@ -373,7 +432,9 @@
     // Tell SCORM whether this is a suspend-to-resume close or a normal
     // exit. cmi5/web adapters no-op. Must come before terminate() so the
     // value is committed in the same flush.
-    adapter.setExit(progress.completionStatus === 'complete' ? 'normal' : 'suspend');
+    adapter.setExit(
+      progress.completionStatus === 'complete' ? 'normal' : 'suspend',
+    );
     adapter.commit();
     // Stop accepting author-issued statements on independent destinations
     // before terminate() so a late `useXAPI().sendStatement(...)` from a
@@ -417,7 +478,10 @@
       restoreState(saved);
       prevCompletionStatus = progress.completionStatus;
       prevSuccessStatus = progress.successStatus;
-      adapter.seedLifecycle?.(progress.completionStatus, progress.successStatus);
+      adapter.seedLifecycle?.(
+        progress.completionStatus,
+        progress.successStatus,
+      );
     }
     persistenceReady = true;
 
@@ -460,7 +524,7 @@
             '[tessera] completion.mode is "manual" but the course has not completed after 60s. ' +
               'No page declared `pageConfig.completesOn: "view"` was reached, and no component called ' +
               '`useCompletion().markComplete()`. This is a misconfiguration; set `completion.trigger: "page"` ' +
-              'in course.config.js to fail the build instead of waiting at runtime.'
+              'in course.config.js to fail the build instead of waiting at runtime.',
           );
         }
       }, 60_000);

package/src/runtime/LoadingBar.svelte

@@ -14,9 +14,13 @@
       // next frame so the CSS transition from width:0 → 90% actually fires.
       const appearTimer = setTimeout(() => {
         visible = true;
-        requestAnimationFrame(() => { appeared = true; });
+        requestAnimationFrame(() => {
+          appeared = true;
+        });
       }, 100);
-      const slowTimer = setTimeout(() => { showSlowMessage = true; }, 5000);
+      const slowTimer = setTimeout(() => {
+        showSlowMessage = true;
+      }, 5000);
       return () => {
         clearTimeout(appearTimer);
         clearTimeout(slowTimer);
@@ -38,7 +42,12 @@
 </script>
 
 {#if visible}
-  <div class="tessera-loading-bar" class:appear={appeared} class:complete aria-hidden="true">
+  <div
+    class="tessera-loading-bar"
+    class:appear={appeared}
+    class:complete
+    aria-hidden="true"
+  >
     <div class="tessera-loading-bar-fill"></div>
   </div>
   {#if showSlowMessage}

package/src/runtime/Sidebar.svelte

@@ -1,5 +1,6 @@
 <script>
-  let { manifest, config, currentPageIndex, nav, onnavigate, onclose } = $props();
+  let { manifest, config, currentPageIndex, nav, onnavigate, onclose } =
+    $props();
 
   // Track which sections are collapsed. All expanded by default.
   let collapsedSections = $state(new Set());
@@ -22,13 +23,17 @@
 
 <div class="tessera-sidebar-header">
   {#if config.branding?.logo}
-    <img src={config.branding.logo} alt={config.title} class="tessera-sidebar-logo" />
+    <img
+      src={config.branding.logo}
+      alt={config.title}
+      class="tessera-sidebar-logo"
+    />
   {/if}
   <h1 class="tessera-sidebar-title">{config.title || '(no title)'}</h1>
 </div>
 
 <nav class="tessera-sidebar-nav" aria-label="Course navigation">
-  {#each manifest.sections as section}
+  {#each manifest.sections as section (section.slug)}
     <div class="tessera-nav-section">
       <button
         class="tessera-nav-section-title"
@@ -50,22 +55,33 @@
       </button>
 
       {#if !collapsedSections.has(section.slug)}
-        {#each section.lessons as lesson}
+        {#each section.lessons as lesson (lesson.slug)}
           <div class="tessera-nav-lesson-title">{lesson.title}</div>
-          {#each lesson.pages as page}
+          {#each lesson.pages as page (page.index)}
             {@const locked = nav.isPageLocked(page.index)}
             <button
               class="tessera-nav-page"
               class:locked
-              aria-current={page.index === currentPageIndex ? 'page' : undefined}
+              aria-current={page.index === currentPageIndex
+                ? 'page'
+                : undefined}
               aria-disabled={locked ? 'true' : undefined}
               onclick={() => handlePageClick(page.index)}
               onpointerenter={() => !locked && nav.prefetch(page.index)}
               onfocusin={() => !locked && nav.prefetch(page.index)}
             >
               {#if locked}
-                <svg class="tessera-nav-lock-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" width="12" height="12">
-                  <path d="M8 1a4 4 0 0 0-4 4v2H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V5a4 4 0 0 0-4-4zm-2 4a2 2 0 1 1 4 0v2H6V5z"/>
+                <svg
+                  class="tessera-nav-lock-icon"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  width="12"
+                  height="12"
+                >
+                  <path
+                    d="M8 1a4 4 0 0 0-4 4v2H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V5a4 4 0 0 0-4-4zm-2 4a2 2 0 1 1 4 0v2H6V5z"
+                  />
                 </svg>
               {/if}
               {page.title}

package/src/runtime/access.ts

@@ -24,7 +24,12 @@ export type AccessFn = (ctx: AccessContext) => boolean;
  * Free-navigation preset. A page is accessible unless a preceding page declares
  * `pageConfig.quiz.gatesProgress` and the learner has not met the passing score.
  */
-export const freeAccess: AccessFn = ({ pageIndex, manifest, progress, config }) => {
+export const freeAccess: AccessFn = ({
+  pageIndex,
+  manifest,
+  progress,
+  config,
+}) => {
   for (let i = pageIndex - 1; i >= 0; i--) {
     const page = manifest.pages[i];
     if (page.quiz?.gatesProgress) {
@@ -38,7 +43,12 @@ export const freeAccess: AccessFn = ({ pageIndex, manifest, progress, config })
  * Sequential-navigation preset. A page is accessible only when every preceding
  * page is complete (visited or quiz-passed, per `isPageComplete`).
  */
-export const sequentialAccess: AccessFn = ({ pageIndex, manifest, progress, config }) => {
+export const sequentialAccess: AccessFn = ({
+  pageIndex,
+  manifest,
+  progress,
+  config,
+}) => {
   for (let i = 0; i < pageIndex; i++) {
     if (!isPageComplete(i, manifest, progress, config)) return false;
   }
@@ -51,5 +61,7 @@ export const sequentialAccess: AccessFn = ({ pageIndex, manifest, progress, conf
  */
 export function resolveAccess(config: CourseConfig): AccessFn {
   if (config.navigation.canAccess) return config.navigation.canAccess;
-  return config.navigation.mode === 'sequential' ? sequentialAccess : freeAccess;
+  return config.navigation.mode === 'sequential'
+    ? sequentialAccess
+    : freeAccess;
 }