coursecast 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coursecast",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "One prompt → a full interactive course — live widgets, quizzes, a mastery dashboard — rendered to self-contained HTML and deployed live.",
   "type": "module",
   "bin": {

package/src/engines/shared-prompts.mjs

@@ -141,10 +141,41 @@ export function validateLesson(obj) {
   if (obj.simulation) {
     if (!obj.simulation.html) e.push('"simulation" is missing "html"')
     if (!obj.simulation.js) e.push('"simulation" is missing "js"')
+    e.push(...validateSimulationWiring(obj.simulation))
   }
   return e
 }
 
+// The simulation's markup and its script are written as two separate strings, so a typo in
+// one doesn't show up until a learner clicks and the console throws. These checks catch the
+// two ways that actually happens, and because they run inside validate+repair the model gets
+// a chance to fix its own mistake before the lesson is ever rendered.
+function validateSimulationWiring({ html = '', js = '' }) {
+  const e = []
+  if (!html || !js) return e
+
+  // 1. inline handlers (onclick="doThing()") that name a function the script never defines
+  const handlers = new Set()
+  for (const m of String(html).matchAll(/\son[a-z]+\s*=\s*(["'])(.*?)\1/gi)) {
+    const fn = m[2].match(/^\s*([A-Za-z_$][\w$]*)\s*\(/)
+    if (fn) handlers.add(fn[1])
+  }
+  for (const fn of handlers) {
+    const defined = new RegExp(
+      `(function\\s+${fn}\\b|\\b(?:var|let|const)\\s+${fn}\\s*=|\\b${fn}\\s*=\\s*(?:function|\\()|window\\.${fn}\\s*=)`,
+    ).test(js)
+    if (!defined) e.push(`simulation.html calls "${fn}()" from an inline handler, but simulation.js never defines it`)
+  }
+
+  // 2. getElementById('x') where the markup has no element with that id
+  const ids = new Set([...String(html).matchAll(/\sid\s*=\s*(["'])(.*?)\1/gi)].map((m) => m[2].trim()))
+  for (const m of String(js).matchAll(/getElementById\(\s*(["'])(.*?)\1\s*\)/gi)) {
+    const want = m[2].trim()
+    if (want && !ids.has(want)) e.push(`simulation.js looks up id "${want}", which does not exist in simulation.html`)
+  }
+  return e.slice(0, 6)
+}
+
 export function validateSyllabus(obj) {
   const e = []
   if (!obj || typeof obj !== 'object') return ['the output was not a JSON object']

package/src/render.mjs

@@ -22,8 +22,49 @@ const INPUT_TYPES = new Set(['button', 'checkbox', 'color', 'date', 'datetime-lo
   'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit',
   'tel', 'text', 'time', 'url', 'week']);
 
+// The elements a lesson fragment is allowed to use. Anything else in angle brackets is prose
+// the model forgot to escape ("the <namespace> holds…", "Array<T>", "if x < y"), which the
+// parser would otherwise turn into a phantom element that swallows the rest of the section.
+const HTML_TAGS = new Set(['a', 'abbr', 'article', 'aside', 'b', 'bdi', 'bdo', 'blockquote', 'br',
+  'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd',
+  'del', 'details', 'dfn', 'div', 'dl', 'dt', 'em', 'fieldset', 'figcaption', 'figure', 'footer',
+  'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'i', 'iframe', 'img',
+  'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'mark', 'menu', 'meter', 'nav', 'ol',
+  'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's',
+  'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub',
+  'summary', 'sup', 'svg', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead',
+  'time', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr',
+  // SVG children, since simulations draw with inline SVG
+  'circle', 'clippath', 'defs', 'ellipse', 'g', 'line', 'lineargradient', 'marker', 'mask', 'path',
+  'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'text', 'tspan', 'use']);
+
+const VOID_TAGS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link',
+  'meta', 'param', 'source', 'track', 'wbr']);
+
+// Close what the model left open, and drop end tags that close nothing.
+//
+// This is the highest-leverage repair of the lot: one unclosed <div> in a fragment doesn't
+// just fail validation, it swallows every element after it — the rest of the lesson ends up
+// nested inside the runaway element and the page layout collapses.
+function balanceTags(html) {
+  const stack = [];
+  const out = html.replace(/<\/?([a-z][a-z0-9-]*)\b[^>]*>/gi, (tag, name) => {
+    const t = name.toLowerCase();
+    if (VOID_TAGS.has(t) || /\/>$/.test(tag)) return tag;
+    if (tag[1] === '/') {
+      const at = stack.lastIndexOf(t);
+      if (at === -1) return ''; // closes nothing — dropping it is safer than leaving it
+      stack.length = at;
+      return tag;
+    }
+    stack.push(t);
+    return tag;
+  });
+  return out + stack.reverse().map((t) => `</${t}>`).join('');
+}
+
 function tidyFragment(html = '', sink) {
-  return String(html)
+  return balanceTags(String(html))
     // Entity-encoded attribute quotes: a model that emits id=&quot;x&quot; produces an
     // attribute whose value is literally &quot;x&quot;, so the simulation's own
     // getElementById('x') finds nothing and throws. Only rewritten inside a tag, so prose
@@ -62,8 +103,23 @@ function tidyFragment(html = '', sink) {
         ? `<strong${attrs.replace(/\bstyle\s*=\s*(["'])/i, 'style=$1display:block;font-size:1.05em;')}>`
         : `<strong${attrs} style="display:block;font-size:1.05em">`)
     .replace(/<\/h[1-6]>/gi, '</strong>')
+    // Void elements have no end tag; "</br>" is a parse error that some browsers turn into
+    // a second line break.
+    .replace(/<\/(br|hr|img|input|source|track|wbr|col|area|base|embed|link|meta|param)\s*>/gi, '')
+    // Boolean attributes are present-or-absent, not true/false. disabled="true" merely
+    // validates badly, but disabled="false" reads as DISABLED — the opposite of what the
+    // model meant — so that one is dropped entirely rather than normalised.
+    .replace(/\s(disabled|checked|readonly|required|selected|multiple|autofocus|hidden|novalidate|open)\s*=\s*(["'])(.*?)\2/gi,
+      (_m, attr, _q, val) => (/^(false|0|no|off)$/i.test(val.trim()) ? '' : ` ${attr}`))
     // Bare "&" that isn't already an entity is invalid markup.
-    .replace(/&(?!#?[a-z0-9]{1,8};)/gi, '&amp;');
+    .replace(/&(?!#?[a-z0-9]{1,8};)/gi, '&amp;')
+    // A "<" that doesn't open a real HTML element is prose the model forgot to escape.
+    // Left alone it becomes a phantom element that swallows everything after it.
+    .replace(/<\/?([a-z][a-z0-9-]*)?([^>]*)>?/gi, (m, tag) => {
+      if (tag && HTML_TAGS.has(tag.toLowerCase())) return m;
+      return m.replace(/</g, '&lt;');
+    })
+    .replace(/<(?![a-z/!])/gi, '&lt;');
 }
 
 // Model-authored simulation JS, repaired the same way its HTML is.
@@ -127,6 +183,7 @@ const CSS = `
   .quiz-score{text-align:center;padding:26px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin:20px 0;display:none}.quiz-score .big{font-size:42px;font-weight:700}
   .nextcard{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;margin-top:48px;text-decoration:none;color:inherit;cursor:pointer}
   .nextcard:hover{border-color:var(--accent)}.nextcard .nk{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}.nextcard .nt{font-size:18px;font-weight:700}
+  .crumb-home{color:inherit;text-decoration:none}.crumb-home:hover{text-decoration:underline}
   .foot{font-size:12.5px;color:var(--muted);margin-top:40px}
   /* Keyboard users must be able to see where they are — every interactive element. */
   :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}