scorm-kit 0.2.0

package/src/lint/lint.js

@@ -0,0 +1,323 @@
+#!/usr/bin/env node
+/*
+ * scorm-lint — static analyzer for SCORM 1.2 packages.
+ *
+ *   scorm-lint path/to/package.zip
+ *   scorm-lint path/to/unzipped-dir
+ *
+ * Catches the issues that most often slip past Storyline's own publish step
+ * and cause silent failures in production LMSs:
+ *
+ *   manifest-missing        imsmanifest.xml not at the root of the package
+ *   manifest-malformed      not parseable XML
+ *   manifest-no-schema      schema/schemaversion not 'ADL SCORM' / '1.2'
+ *   manifest-no-resource    no <resource> with scormtype="sco"
+ *   manifest-href-missing   resource href points to a file not in the package
+ *   manifest-namespace      adlcp namespace declared on child, not root
+ *   manifest-no-masteryscore organization item has no <adlcp:masteryscore>
+ *
+ *   api-no-wrapper          launch HTML has no recognisable SCORM API wrapper / discovery
+ *   api-init-missing        no LMSInitialize / scorm.init call found
+ *   api-finish-missing      no LMSFinish / scorm.finish call found
+ *   api-set-status          no LMSSetValue("cmi.core.lesson_status", ...) call
+ *
+ *   interactions-collision  same cmi.interactions.N.id value used twice
+ *
+ *   assets-large            asset over a configurable size threshold (default 50MB)
+ *   assets-broken-ref       <img>, <video>, <audio>, <source>, <link>, <script>
+ *                           references a file not present in the package
+ *   assets-mime-mp4         mp4 served without a script that sets the right mime
+ *                           type (informational only)
+ *
+ * Exit codes: 0 = clean, 1 = warnings only, 2 = errors.
+ */
+"use strict";
+
+var fs = require("fs");
+var path = require("path");
+var { spawnSync } = require("child_process");
+var verifyConfinement = require("../confine");
+
+var RULES = {
+  errors: new Set([
+    "manifest-missing", "manifest-malformed", "manifest-no-schema",
+    "manifest-no-resource", "manifest-href-missing",
+    "interactions-collision", "assets-broken-ref",
+  ]),
+  warnings: new Set([
+    "manifest-namespace", "manifest-no-masteryscore",
+    "api-no-wrapper", "api-init-missing", "api-finish-missing", "api-set-status",
+    "assets-large",
+  ]),
+  info: new Set([
+    "assets-mime-mp4",
+  ]),
+};
+
+var LARGE_ASSET_BYTES = 50 * 1024 * 1024;
+
+function severity(rule) {
+  if (RULES.errors.has(rule)) return "error";
+  if (RULES.warnings.has(rule)) return "warn";
+  return "info";
+}
+
+function color(s, c) {
+  if (!process.stdout.isTTY) return s;
+  var codes = { red: 31, yellow: 33, blue: 34, gray: 90, bold: 1 };
+  return "\x1b[" + codes[c] + "m" + s + "\x1b[0m";
+}
+
+function usage() {
+  console.error("Usage: scorm-lint <package.zip | unzipped-dir> [--no-color] [--json]");
+  process.exit(2);
+}
+
+// ---------- I/O ----------
+
+function isZip(p) { return p.toLowerCase().endsWith(".zip"); }
+
+function unzipToTemp(zipPath) {
+  var tmp = fs.mkdtempSync(path.join(require("os").tmpdir(), "scorm-lint-"));
+  var res = spawnSync("unzip", ["-q", "-o", zipPath, "-d", tmp]);
+  if (res.status !== 0) throw new Error("Failed to unzip: " + (res.stderr && res.stderr.toString()));
+  verifyConfinement(tmp);
+  return tmp;
+}
+
+function walk(dir, baseLen) {
+  baseLen = baseLen != null ? baseLen : dir.length + 1;
+  var out = [];
+  fs.readdirSync(dir).forEach(function (entry) {
+    var full = path.join(dir, entry);
+    var st = fs.statSync(full);
+    if (st.isDirectory()) out = out.concat(walk(full, baseLen));
+    else out.push({ rel: full.slice(baseLen).replace(/\\/g, "/"), full: full, size: st.size });
+  });
+  return out;
+}
+
+// ---------- Tiny XML scan (regex-based — robust enough for manifest checks) ----------
+
+function readText(p) { try { return fs.readFileSync(p, "utf8"); } catch (e) { return null; } }
+
+function checkManifest(rootDir, files, findings) {
+  var manifestPath = path.join(rootDir, "imsmanifest.xml");
+  if (!fs.existsSync(manifestPath)) {
+    findings.push(["manifest-missing", "imsmanifest.xml not found at package root", null]);
+    return null;
+  }
+  var xml = readText(manifestPath);
+  if (!xml || !/<manifest\b/.test(xml)) {
+    findings.push(["manifest-malformed", "imsmanifest.xml does not appear to be a valid SCORM manifest", "imsmanifest.xml"]);
+    return null;
+  }
+
+  // schema
+  var schema = (xml.match(/<schema\s*>([^<]+)<\/schema>/) || ["", ""])[1].trim();
+  var schemaVersion = (xml.match(/<schemaversion\s*>([^<]+)<\/schemaversion>/) || ["", ""])[1].trim();
+  if (schema !== "ADL SCORM" || !/^1\.2/.test(schemaVersion)) {
+    findings.push(["manifest-no-schema",
+      "schema=" + JSON.stringify(schema) + " schemaversion=" + JSON.stringify(schemaVersion) +
+      " — expected ADL SCORM / 1.2",
+      "imsmanifest.xml"]);
+  }
+
+  // adlcp namespace declared on root?
+  var rootTag = xml.match(/<manifest\b[^>]*>/);
+  if (rootTag && !/xmlns:adlcp\s*=/.test(rootTag[0])) {
+    findings.push(["manifest-namespace",
+      "adlcp namespace not declared on <manifest> root element — some strict LMS implementations reject this",
+      "imsmanifest.xml"]);
+  }
+
+  // resources
+  var resourceMatches = Array.from(xml.matchAll(/<resource\b[^>]*?(?:\/>|>[\s\S]*?<\/resource>)/g));
+  if (resourceMatches.length === 0) {
+    findings.push(["manifest-no-resource", "no <resource> elements found", "imsmanifest.xml"]);
+  }
+  var primaryHref = null;
+  resourceMatches.forEach(function (m) {
+    var blob = m[0];
+    var typ = (blob.match(/adlcp:scormtype\s*=\s*"([^"]+)"/) || ["", ""])[1];
+    var href = (blob.match(/href\s*=\s*"([^"]+)"/) || ["", ""])[1];
+    if (typ === "sco" && href && !primaryHref) primaryHref = href;
+    if (href) {
+      if (!files.find(function (f) { return f.rel === href; })) {
+        findings.push(["manifest-href-missing", "manifest references missing file: " + href, "imsmanifest.xml"]);
+      }
+    }
+  });
+
+  // masteryscore
+  if (!/<adlcp:masteryscore\s*>/.test(xml)) {
+    findings.push(["manifest-no-masteryscore",
+      "no <adlcp:masteryscore> found — completion will rely solely on cmi.core.lesson_status setting",
+      "imsmanifest.xml"]);
+  }
+
+  return primaryHref;
+}
+
+// ---------- HTML / JS scans ----------
+
+function scanLaunchHtml(rootDir, launchHref, files, findings) {
+  var p = path.join(rootDir, launchHref);
+  var html = readText(p);
+  if (!html) return;
+
+  // Walk the script srcs from this HTML — read each .js too for API discovery.
+  // Also concatenate inline <script>...</script> bodies — Storyline sometimes
+  // inlines its API plumbing, and our pattern matches need to see that too.
+  var scriptSrcs = Array.from(html.matchAll(/<script\b[^>]*\bsrc\s*=\s*"([^"]+)"/g)).map(function (m) { return m[1]; });
+  var inlineScripts = Array.from(html.matchAll(/<script\b(?![^>]*\bsrc\s*=)[^>]*>([\s\S]*?)<\/script>/g))
+    .map(function (m) { return m[1]; });
+  var jsBlob = html + "\n" +
+    inlineScripts.join("\n") + "\n" +
+    scriptSrcs
+      .map(function (src) {
+        var jsPath = path.join(path.dirname(p), src);
+        return readText(jsPath) || "";
+      })
+      .join("\n");
+
+  // API wrapper / discovery heuristics
+  var hasWrapper =
+    /window\.API\b/.test(jsBlob) ||
+    /findAPI\s*\(/.test(jsBlob) ||
+    /pipwerks\.SCORM/.test(jsBlob) ||
+    /LMSInitialize\s*\(/.test(jsBlob);
+  if (!hasWrapper) {
+    findings.push(["api-no-wrapper",
+      "launch HTML has no recognisable SCORM API wrapper — course will not talk to the LMS",
+      launchHref]);
+  }
+
+  if (!/LMSInitialize\s*\(/.test(jsBlob) && !/scorm\.init\s*\(/.test(jsBlob)) {
+    findings.push(["api-init-missing", "no LMSInitialize / scorm.init call found", launchHref]);
+  }
+  if (!/LMSFinish\s*\(/.test(jsBlob) && !/scorm\.finish\s*\(/.test(jsBlob)) {
+    findings.push(["api-finish-missing", "no LMSFinish / scorm.finish call found", launchHref]);
+  }
+  if (!/cmi\.core\.lesson_status/.test(jsBlob)) {
+    findings.push(["api-set-status", "no cmi.core.lesson_status reference — completion may never be reported", launchHref]);
+  }
+
+  // Interaction-id collision check
+  var ids = {};
+  Array.from(jsBlob.matchAll(/cmi\.interactions\.(\d+)\.id["']?\s*[,)]\s*["']([^"']+)["']/g)).forEach(function (m) {
+    var idx = m[1], val = m[2];
+    if (ids[val]) findings.push(["interactions-collision",
+      "interaction id " + JSON.stringify(val) + " used at indices " + ids[val] + " and " + idx, launchHref]);
+    else ids[val] = idx;
+  });
+
+  // Broken asset refs (img/video/audio src, source src, link href, script src)
+  var assetRefs = [];
+  Array.from(html.matchAll(/<(?:img|video|audio|source|script)\b[^>]*\bsrc\s*=\s*"([^"]+)"/g))
+    .forEach(function (m) { assetRefs.push(m[1]); });
+  Array.from(html.matchAll(/<link\b[^>]*\bhref\s*=\s*"([^"]+)"/g))
+    .forEach(function (m) { assetRefs.push(m[1]); });
+
+  assetRefs.forEach(function (ref) {
+    if (/^(https?:)?\/\//i.test(ref) || /^data:/i.test(ref) || /^javascript:/i.test(ref)) return;
+    var resolved = path.posix.normalize(path.posix.join(path.dirname(launchHref), ref));
+    if (!files.find(function (f) { return f.rel === resolved; })) {
+      findings.push(["assets-broken-ref", "asset referenced but not in package: " + ref, launchHref]);
+    }
+  });
+}
+
+function checkAssets(files, findings) {
+  files.forEach(function (f) {
+    if (f.size > LARGE_ASSET_BYTES) {
+      findings.push(["assets-large", "large asset (" + (f.size / 1024 / 1024).toFixed(1) + "MB): " + f.rel, f.rel]);
+    }
+    if (/\.mp4$/i.test(f.rel)) {
+      findings.push(["assets-mime-mp4", "mp4 present (" + f.rel + ") — ensure LMS serves video/mp4 MIME type", f.rel]);
+    }
+  });
+}
+
+// ---------- output ----------
+
+function report(findings, opts) {
+  var counts = { error: 0, warn: 0, info: 0 };
+  findings.forEach(function (f) { counts[severity(f[0])]++; });
+
+  if (opts.json) {
+    var rows = findings.map(function (f) {
+      return { rule: f[0], severity: severity(f[0]), message: f[1], file: f[2] };
+    });
+    console.log(JSON.stringify({ counts: counts, findings: rows }, null, 2));
+    return;
+  }
+
+  if (findings.length === 0) {
+    console.log(color("✓ scorm-lint: 0 issues — package looks clean.", "blue"));
+    return;
+  }
+
+  findings.forEach(function (f) {
+    var rule = f[0], msg = f[1], file = f[2];
+    var sev = severity(rule);
+    var tag = sev === "error" ? color("ERROR", "red")
+            : sev === "warn"  ? color("WARN ", "yellow")
+            : color("INFO ", "gray");
+    var loc = file ? color(" [" + file + "]", "gray") : "";
+    console.log(tag + " " + color(rule.padEnd(24), "bold") + " " + msg + loc);
+  });
+  console.log();
+  console.log("Summary: " +
+    counts.error + " error" + (counts.error === 1 ? "" : "s") + ", " +
+    counts.warn + " warning" + (counts.warn === 1 ? "" : "s") + ", " +
+    counts.info + " info");
+}
+
+// ---------- main ----------
+
+function main() {
+  var args = process.argv.slice(2);
+  if (!args.length || args.indexOf("--help") >= 0 || args.indexOf("-h") >= 0) usage();
+
+  var inputPath = null;
+  var opts = { color: process.stdout.isTTY, json: false };
+  args.forEach(function (a) {
+    if (a === "--no-color") opts.color = false;
+    else if (a === "--json") opts.json = true;
+    else if (!inputPath) inputPath = a;
+    else usage();
+  });
+  if (!inputPath) usage();
+
+  var rootDir = inputPath;
+  var tempDir = null;
+  if (isZip(inputPath)) {
+    tempDir = unzipToTemp(inputPath);
+    rootDir = tempDir;
+  } else if (!fs.statSync(inputPath).isDirectory()) {
+    console.error("Input must be a .zip or a directory");
+    process.exit(2);
+  }
+
+  var files = walk(rootDir);
+  var findings = [];
+
+  var launchHref = checkManifest(rootDir, files, findings);
+  if (launchHref) scanLaunchHtml(rootDir, launchHref, files, findings);
+  checkAssets(files, findings);
+
+  report(findings, opts);
+
+  if (tempDir) try { fs.rmSync(tempDir, { recursive: true, force: true }); } catch (e) {}
+
+  var counts = { error: 0, warn: 0 };
+  findings.forEach(function (f) {
+    var s = severity(f[0]);
+    if (s === "error") counts.error++;
+    else if (s === "warn") counts.warn++;
+  });
+  process.exit(counts.error > 0 ? 2 : counts.warn > 0 ? 1 : 0);
+}
+
+main();

package/src/mock/mock.js

@@ -0,0 +1,197 @@
+#!/usr/bin/env node
+/*
+ * scorm-mock-lms — local SCORM 1.2 runtime for testing courses without an LMS.
+ *
+ *   scorm-mock-lms <package.zip | dir> [--port 8080] [--persist session.json]
+ *                                      [--cmi key=value]... [--fail set|init|none]
+ *
+ * Starts a tiny HTTP server that:
+ *   - serves the unpacked SCORM package at /pkg/...
+ *   - serves the mock LMS shell at /
+ *
+ * The shell loads the package's launch HTML in an iframe. The shell window
+ * exposes window.API — a full SCORM 1.2 RTE — and records every method call
+ * with timestamp, args, return value, and last-error code. The course (in
+ * the iframe) walks window.parent looking for `API` and finds the mock.
+ *
+ * Use it to:
+ *   - debug a SCORM package without uploading to Moodle
+ *   - inject failures (LMSSetValue returns "false") to test error handling
+ *   - export a full session log as JSON for regression tests
+ *   - preset CMI values (student_id, completion_status) for resume testing
+ */
+"use strict";
+
+var fs = require("fs");
+var path = require("path");
+var os = require("os");
+var http = require("http");
+var url = require("url");
+var { spawnSync } = require("child_process");
+var verifyConfinement = require("../confine");
+
+// ---------- args ----------------------------------------------------------
+
+function parseArgs(argv) {
+  var a = { input: "", port: 8080, persist: "", cmi: {}, fail: "none", open: false };
+  for (var i = 0; i < argv.length; i++) {
+    var k = argv[i];
+    if (k === "--port") a.port = +argv[++i];
+    else if (k === "--persist") a.persist = argv[++i];
+    else if (k === "--cmi") {
+      var kv = argv[++i] || "";
+      var eq = kv.indexOf("=");
+      if (eq < 0) { console.error("--cmi expects key=value"); process.exit(2); }
+      a.cmi[kv.slice(0, eq)] = kv.slice(eq + 1);
+    }
+    else if (k === "--fail") a.fail = argv[++i];
+    else if (k === "--open") a.open = true;
+    else if (k === "-h" || k === "--help") { usage(); process.exit(0); }
+    else if (k[0] === "-") { console.error("Unknown flag: " + k); process.exit(2); }
+    else if (!a.input) a.input = k;
+    else { console.error("Unexpected arg: " + k); process.exit(2); }
+  }
+  if (!a.input) { usage(); process.exit(2); }
+  if (["none", "set", "init", "finish", "commit"].indexOf(a.fail) < 0) {
+    console.error("--fail must be one of: none, set, init, finish, commit");
+    process.exit(2);
+  }
+  return a;
+}
+function usage() {
+  console.error("Usage: scorm-mock-lms <package.zip | dir> [options]");
+  console.error("  --port N                listen port (default 8080)");
+  console.error("  --persist file.json     save session log on Ctrl-C");
+  console.error("  --cmi key=value         preset a CMI value (repeatable)");
+  console.error("  --fail none|set|init|finish|commit   inject API failure");
+  console.error("  --open                  open default browser on start");
+}
+
+// ---------- package prep --------------------------------------------------
+
+function unzipToTemp(zipPath) {
+  var tmp = fs.mkdtempSync(path.join(os.tmpdir(), "scorm-mock-"));
+  var r = spawnSync("unzip", ["-q", "-o", zipPath, "-d", tmp]);
+  if (r.status !== 0) throw new Error("unzip: " + r.stderr.toString());
+  verifyConfinement(tmp);
+  return tmp;
+}
+
+function findLaunchHref(root) {
+  var mPath = path.join(root, "imsmanifest.xml");
+  if (!fs.existsSync(mPath)) return null;
+  var xml = fs.readFileSync(mPath, "utf8");
+  var m = /<resource\b[^>]*\bscormtype\s*=\s*["']sco["'][^>]*\bhref\s*=\s*["']([^"']+)["']/i.exec(xml);
+  if (!m) m = /<resource\b[^>]*\bhref\s*=\s*["']([^"']+)["'][^>]*\bscormtype\s*=\s*["']sco["']/i.exec(xml);
+  if (!m) m = /<resource\b[^>]*\bhref\s*=\s*["']([^"']+)["']/i.exec(xml);
+  return m ? m[1] : null;
+}
+
+// ---------- HTTP server ---------------------------------------------------
+
+var MIME = {
+  ".html": "text/html; charset=utf-8", ".htm": "text/html; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8", ".json": "application/json; charset=utf-8",
+  ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".gif": "image/gif",
+  ".svg": "image/svg+xml", ".webp": "image/webp",
+  ".mp4": "video/mp4", ".webm": "video/webm",
+  ".mp3": "audio/mpeg", ".wav": "audio/wav",
+  ".vtt": "text/vtt", ".xml": "application/xml; charset=utf-8",
+  ".woff": "font/woff", ".woff2": "font/woff2",
+};
+
+function serveFile(filePath, res) {
+  fs.stat(filePath, function (err, st) {
+    if (err || !st.isFile()) { res.writeHead(404); return res.end("not found"); }
+    var mime = MIME[path.extname(filePath).toLowerCase()] || "application/octet-stream";
+    res.writeHead(200, { "content-type": mime, "cache-control": "no-cache" });
+    fs.createReadStream(filePath).pipe(res);
+  });
+}
+
+function safeJoin(base, rel) {
+  var resolved = path.resolve(base, "." + (rel.startsWith("/") ? rel : "/" + rel));
+  if (resolved !== base && resolved.indexOf(base + path.sep) !== 0) return null;
+  return resolved;
+}
+
+function startServer(args, packageRoot, launchHref, webDir) {
+  var server = http.createServer(function (req, res) {
+    var u = url.parse(req.url);
+    var p = decodeURIComponent(u.pathname || "/");
+
+    if (p === "/") return serveFile(path.join(webDir, "mock-lms.html"), res);
+    if (p === "/config.json") {
+      res.writeHead(200, { "content-type": "application/json; charset=utf-8" });
+      return res.end(JSON.stringify({
+        // Encode each path segment so a launch href like "story space.html"
+        // round-trips correctly through fetch + iframe src.
+        launchUrl: "/pkg/" + launchHref.split("/").map(encodeURIComponent).join("/"),
+        cmiPresets: args.cmi,
+        fail: args.fail,
+      }));
+    }
+    if (p.startsWith("/assets/")) {
+      var asset = safeJoin(webDir, p.slice("/assets".length));
+      if (!asset) { res.writeHead(403); return res.end("forbidden"); }
+      return serveFile(asset, res);
+    }
+    if (p.startsWith("/pkg/")) {
+      var rel = p.slice("/pkg".length);
+      var fp = safeJoin(packageRoot, rel);
+      if (!fp) { res.writeHead(403); return res.end("forbidden"); }
+      return serveFile(fp, res);
+    }
+    res.writeHead(404); res.end("not found");
+  });
+  server.listen(args.port, function () {
+    console.log("scorm-mock-lms ready  →  http://localhost:" + args.port);
+    console.log("  package:  " + packageRoot);
+    console.log("  launch:   " + launchHref);
+    if (Object.keys(args.cmi).length) console.log("  presets:  " + JSON.stringify(args.cmi));
+    if (args.fail !== "none") console.log("  fail:     " + args.fail);
+    if (args.open) tryOpen("http://localhost:" + args.port);
+    console.log("\nCtrl-C to stop.");
+  });
+  return server;
+}
+
+function tryOpen(target) {
+  var cmd = process.platform === "darwin" ? "open" :
+            process.platform === "win32" ? "start" : "xdg-open";
+  try { spawnSync(cmd, [target], { stdio: "ignore", detached: true }); } catch (e) {}
+}
+
+// ---------- main ----------------------------------------------------------
+
+function main() {
+  var args = parseArgs(process.argv.slice(2));
+  if (!fs.existsSync(args.input)) { console.error("Not found: " + args.input); process.exit(2); }
+
+  var packageRoot, cleanup = function () {};
+  var st = fs.statSync(args.input);
+  if (st.isFile()) {
+    packageRoot = unzipToTemp(args.input);
+    cleanup = function () { try { fs.rmSync(packageRoot, { recursive: true, force: true }); } catch (e) {} };
+  } else {
+    packageRoot = path.resolve(args.input);
+  }
+
+  var launchHref = findLaunchHref(packageRoot);
+  if (!launchHref) {
+    console.error("No launch resource found in imsmanifest.xml.");
+    cleanup(); process.exit(2);
+  }
+
+  var webDir = path.join(__dirname, "web");
+  var server = startServer(args, packageRoot, launchHref, webDir);
+
+  process.on("SIGINT", function () {
+    console.log("\nstopping...");
+    server.close(function () { cleanup(); process.exit(0); });
+    setTimeout(function () { process.exit(0); }, 1000).unref();
+  });
+}
+
+main();

package/src/mock/web/mock-lms.css

@@ -0,0 +1,57 @@
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif; color: #1a1a1a; }
+body { display: flex; flex-direction: column; background: #f4f5f7; }
+header {
+  display: flex; align-items: center; gap: 0.75rem;
+  padding: 0.5rem 1rem; background: #1f2937; color: #fff;
+  border-bottom: 1px solid #111827;
+}
+header strong { font-size: 14px; }
+header .state {
+  font-size: 11px; padding: 2px 8px; border-radius: 10px;
+  background: #6b7280; color: #fff;
+}
+header .state.connected { background: #10b981; }
+header .state.terminated { background: #ef4444; }
+header .spacer { flex: 1; }
+header label.fail { font-size: 12px; display: flex; gap: 4px; align-items: center; }
+header select, header button {
+  font: inherit; padding: 4px 10px; border: 0; border-radius: 4px;
+  background: #374151; color: #fff; cursor: pointer;
+}
+header button:hover, header select:hover { background: #4b5563; }
+main { display: flex; flex: 1; min-height: 0; }
+.course { flex: 1; min-width: 0; background: #fff; }
+.course iframe { width: 100%; height: 100%; border: 0; display: block; }
+.panel { width: 460px; min-width: 320px; background: #fff; border-left: 1px solid #e5e7eb; display: flex; flex-direction: column; }
+.tabs { display: flex; border-bottom: 1px solid #e5e7eb; }
+.tabs button {
+  flex: 1; padding: 0.5rem; background: #fff; border: 0; cursor: pointer;
+  border-bottom: 2px solid transparent; font: inherit; color: #6b7280;
+}
+.tabs button.active { color: #1f2937; border-bottom-color: #2563eb; font-weight: 600; }
+.tab-body { flex: 1; min-height: 0; }
+.tab-pane { display: none; height: 100%; overflow: auto; }
+.tab-pane.active { display: block; }
+.log-toolbar {
+  padding: 0.5rem; display: flex; gap: 0.5rem; align-items: center;
+  border-bottom: 1px solid #e5e7eb; background: #f9fafb;
+  position: sticky; top: 0; z-index: 1;
+}
+.log-toolbar input { flex: 1; padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px; font: inherit; }
+.count { color: #6b7280; font-size: 11px; }
+.log { list-style: none; margin: 0; padding: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
+.log li {
+  display: grid; grid-template-columns: 60px 110px 1fr 60px;
+  gap: 0.5rem; padding: 4px 0.5rem; border-bottom: 1px solid #f3f4f6;
+  align-items: baseline;
+}
+.log li:hover { background: #f9fafb; }
+.log .t { color: #9ca3af; font-size: 11px; }
+.log .m { color: #1d4ed8; font-weight: 600; }
+.log .a { color: #374151; word-break: break-all; }
+.log .r { color: #059669; text-align: right; font-size: 11px; }
+.log li.err .m { color: #b91c1c; }
+.log li.err .r { color: #b91c1c; }
+.log li.hidden { display: none; }
+#cmi { padding: 0.75rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; margin: 0; white-space: pre-wrap; }

package/src/mock/web/mock-lms.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>scorm-mock-lms</title>
+  <link rel="stylesheet" href="/assets/mock-lms.css">
+  <script src="/assets/mock-lms.js"></script>
+</head>
+<body>
+  <header>
+    <strong>scorm-mock-lms</strong>
+    <span class="state" id="state">disconnected</span>
+    <span class="spacer"></span>
+    <label class="fail">
+      Fault inject:
+      <select id="fail-mode">
+        <option value="none">none</option>
+        <option value="set">LMSSetValue → "false"</option>
+        <option value="init">LMSInitialize → "false"</option>
+        <option value="commit">LMSCommit → "false"</option>
+        <option value="finish">LMSFinish → "false"</option>
+      </select>
+    </label>
+    <button id="restart">Restart</button>
+    <button id="clear">Clear log</button>
+    <button id="export">Export JSON</button>
+  </header>
+
+  <main>
+    <section class="course">
+      <iframe id="course" title="SCORM course"></iframe>
+    </section>
+    <aside class="panel">
+      <nav class="tabs">
+        <button data-tab="log" class="active">Call log</button>
+        <button data-tab="cmi">CMI state</button>
+      </nav>
+      <div class="tab-body">
+        <div id="tab-log" class="tab-pane active">
+          <div class="log-toolbar">
+            <input type="search" id="filter" placeholder="filter by method or key…">
+            <span id="log-count" class="count">0 calls</span>
+          </div>
+          <ol id="log" class="log"></ol>
+        </div>
+        <div id="tab-cmi" class="tab-pane">
+          <pre id="cmi"></pre>
+        </div>
+      </div>
+    </aside>
+  </main>
+</body>
+</html>