playable-lessons 0.2.1 → 0.6.2

package/out/shared/storyExport.js

@@ -1,22 +1,18 @@
 "use strict";
 /**
- * Shared, dependency-light story logic used by BOTH the renderer (via Vite)
- * and the CLI (via tsc/NodeNext). Keep this file self-contained — it must not
- * import other local modules, so it resolves cleanly under both bundler and
- * NodeNext module resolution.
+ * Shared story logic used by BOTH the renderer (via Vite) and the CLI (via
+ * tsc/NodeNext). Intra-shared imports use explicit `.js` extensions so they
+ * resolve under both bundler and NodeNext module resolution.
  *
- * Only side dependency is a dynamic import of inkjs's Compiler.
+ * Side dependencies: a dynamic import of inkjs's Compiler, and the embedded
+ * inkjs runtime (so HTML exports are fully offline).
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.escapeHtml = escapeHtml;
 exports.ensureStartDivert = ensureStartDivert;
 exports.compileInk = compileInk;
 exports.exportStandaloneHTML = exportStandaloneHTML;
-// inkjs runtime loaded by exported HTML. Pin to the same major/minor the app
-// compiles with (see package.json `inkjs`) so the compiled JSON format matches
-// the runtime that plays it, and lock it down with a Subresource Integrity hash.
-const INKJS_RUNTIME_URL = 'https://cdn.jsdelivr.net/npm/inkjs@2.4.0/dist/ink.js';
-const INKJS_RUNTIME_SRI = 'sha384-wR7zU2DW6Ji/8kGVhTaLk0TSOucJhD4Zhv7lR5G1k/HoXtcWhEw5nIlcyE/+GtMb';
+const inkRuntime_generated_js_1 = require("./inkRuntime.generated.js");
 /**
  * Escape a string for safe interpolation into HTML text or double-quoted
  * attribute values. Escapes &, <, >, ", and ' (the single quote matters for
@@ -30,6 +26,13 @@ function escapeHtml(text) {
         .replace(/"/g, '&quot;')
         .replace(/'/g, '&#39;');
 }
+/**
+ * Neutralize any `</script>` sequence so embedded JS/JSON can't break out of
+ * its <script> element. Safe to apply to runtime code and JSON alike.
+ */
+function escapeScriptClose(text) {
+    return text.replace(/<\/(script)/gi, '<\\/$1');
+}
 /**
  * Ensures the Ink source has a top-level divert to the first knot.
  * Without this, the story starts at the root and immediately ends.
@@ -54,12 +57,29 @@ function ensureStartDivert(source) {
 /**
  * Compiles Ink source to JSON using inkjs's Compiler.
  * Returns the compiled JSON string.
+ *
+ * inkjs's Compile() throws a bare "Compilation failed." on errors — useless
+ * for users and for the AI fix-retry loop (it gets told THAT it failed, never
+ * WHAT failed). We collect the compiler's real error messages via an
+ * errorHandler and rethrow with them included.
  */
 async function compileInk(inkSource) {
-    const { Compiler } = await import('inkjs/compiler/Compiler');
+    const { Compiler, CompilerOptions } = await import('inkjs/compiler/Compiler');
     const source = ensureStartDivert(inkSource);
-    const compiler = new Compiler(source);
-    const story = compiler.Compile();
+    const errors = [];
+    const compiler = new Compiler(source, new CompilerOptions(null, [], false, (message) => {
+        errors.push(message);
+    }));
+    let story;
+    try {
+        story = compiler.Compile();
+    }
+    catch (err) {
+        if (errors.length > 0) {
+            throw new Error(`Compilation failed: ${errors.slice(0, 5).join(' | ')}`);
+        }
+        throw err;
+    }
     if (!story) {
         throw new Error('Ink compilation failed: no story produced');
     }
@@ -73,14 +93,18 @@ async function compileInk(inkSource) {
  * Exports a standalone HTML file that plays the story.
  * The inkjs runtime is loaded from a pinned CDN URL (with SRI) in the export.
  *
- * NOTE: all interpolated values are escaped — `title` is user/AI supplied and
- * the compiled JSON is embedded via JSON.stringify (which is safe inside a
- * <script> body as it cannot contain an unescaped `</script>` sequence for
- * ordinary story text).
+ * The inkjs runtime is embedded inline (no CDN), so the file is fully offline.
+ * `title` is escaped; the compiled JSON and the runtime are guarded against
+ * breaking out of their <script> elements.
+ *
+ * `sceneImages` maps `# IMAGE_PROMPT:` tag text → data URL (see
+ * generateSceneImages); matched scenes render their illustration above the
+ * text. `# IMAGE:` tags render only when they carry a data: or http(s) URL.
  */
-async function exportStandaloneHTML(inkSource, title) {
+async function exportStandaloneHTML(inkSource, title, sceneImages) {
     const compiledJson = await compileInk(inkSource);
-    const escapedJson = JSON.stringify(compiledJson);
+    const escapedJson = escapeScriptClose(JSON.stringify(compiledJson));
+    const escapedImages = escapeScriptClose(JSON.stringify(sceneImages ?? {}));
     const safeTitle = escapeHtml(title);
     return `<!DOCTYPE html>
 <html lang="en">
@@ -101,6 +125,7 @@ async function exportStandaloneHTML(inkSource, title) {
   }
   #story { max-width: 650px; width: 100%; }
   h1 { font-size: 28px; margin-bottom: 32px; color: #a78bfa; text-align: center; }
+  .scene-img { max-width: 100%; border-radius: 8px; margin-bottom: 16px; display: block; }
   .text p { font-size: 18px; line-height: 1.8; margin-bottom: 16px; }
   .choices { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
   .choice {
@@ -139,24 +164,51 @@ async function exportStandaloneHTML(inkSource, title) {
   <div id="content"></div>
 </div>
 
-<script src="${INKJS_RUNTIME_URL}" integrity="${INKJS_RUNTIME_SRI}" crossorigin="anonymous"></script>
+<!-- inkjs ${inkRuntime_generated_js_1.INKJS_VERSION} runtime embedded inline so this file plays fully offline -->
+<script>${escapeScriptClose(inkRuntime_generated_js_1.INKJS_RUNTIME)}</script>
 <script>
 (function() {
   var storyJson = ${escapedJson};
+  var sceneImages = ${escapedImages};
   var story = new inkjs.Story(storyJson);
   var content = document.getElementById('content');
 
   function continueStory() {
     var textDiv = document.createElement('div');
     textDiv.className = 'text';
+    var tags = [];
     while (story.canContinue) {
       var line = story.Continue().trim();
+      if (story.currentTags) tags = tags.concat(story.currentTags);
       if (line) {
         var p = document.createElement('p');
         p.textContent = line;
         textDiv.appendChild(p);
       }
     }
+
+    // Scene illustrations: resolve IMAGE_PROMPT tags via the embedded map;
+    // IMAGE tags render only when they carry a usable URL/data URL.
+    var imgSrcs = [];
+    tags.forEach(function(tag) {
+      if (tag.indexOf('IMAGE_PROMPT:') === 0) {
+        var src = sceneImages[tag.substring('IMAGE_PROMPT:'.length).trim()];
+        if (src) imgSrcs.push(src);
+      } else if (tag.indexOf('IMAGE:') === 0) {
+        var val = tag.substring('IMAGE:'.length).trim();
+        // NB: no '//' inside this regex — in this template literal \/ collapses
+        // to / and would turn into a line comment in the generated page.
+        if (/^(data:|https?:)/.test(val)) imgSrcs.push(val);
+      }
+    });
+    imgSrcs.forEach(function(src) {
+      var img = document.createElement('img');
+      img.className = 'scene-img';
+      img.src = src;
+      img.alt = '';
+      textDiv.insertBefore(img, textDiv.firstChild);
+    });
+
     content.appendChild(textDiv);
 
     if (story.currentChoices.length > 0) {

package/out/shared/summaryExport.js

@@ -0,0 +1,144 @@
+"use strict";
+/**
+ * Study-summary export formats, shared by the renderer and the CLI.
+ *
+ * Standalone (no runtime imports from sibling shared modules) — only the
+ * SummaryResult *type* is imported, which is erased at compile time, so it
+ * resolves under both bundler (renderer) and NodeNext (CLI) module resolution.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toPlainText = toPlainText;
+exports.toStandaloneHTML = toStandaloneHTML;
+/** A printable study summary: overview, numbered key points, glossary. */
+function toPlainText(result, title) {
+    const heading = result.title || title || 'Summary';
+    const lines = [heading, ''];
+    if (result.overview) {
+        lines.push(result.overview, '');
+    }
+    if (result.keyPoints.length) {
+        lines.push('Key Points:');
+        result.keyPoints.forEach((p, i) => lines.push(`${i + 1}. ${p}`));
+        lines.push('');
+    }
+    if (result.glossary.length) {
+        lines.push('Glossary:');
+        result.glossary.forEach((g) => lines.push(`${g.term}: ${g.definition}`));
+        lines.push('');
+    }
+    return lines.join('\n') + '\n';
+}
+/**
+ * A self-contained, offline HTML study sheet: title, overview, key points, and
+ * a glossary. All text is rendered via textContent (no innerHTML), and the
+ * embedded JSON is guarded against breaking out of its <script> by escaping
+ * '<' to '\u003c'.
+ */
+function toStandaloneHTML(result, title) {
+    const pageTitle = result.title || title;
+    const dataJson = JSON.stringify(result).replace(/</g, '\\u003c');
+    const safeTitle = String(pageTitle)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${safeTitle} — Summary</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: Georgia, 'Times New Roman', serif;
+    background: #1a1a2e;
+    color: #e0e0e0;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    padding: 40px 20px;
+    line-height: 1.7;
+  }
+  #sheet { max-width: 720px; width: 100%; }
+  h1 { font-size: 28px; color: #a78bfa; margin-bottom: 16px; }
+  #overview { font-size: 18px; color: #cfcfe6; margin-bottom: 28px; }
+  h2 { font-size: 18px; color: #a78bfa; margin: 28px 0 12px; text-transform: uppercase; letter-spacing: 0.05em; }
+  ol { list-style: none; counter-reset: pt; }
+  ol li {
+    counter-increment: pt;
+    position: relative;
+    padding: 10px 0 10px 44px;
+    border-bottom: 1px solid #2a2a44;
+    font-size: 17px;
+  }
+  ol li::before {
+    content: counter(pt);
+    position: absolute;
+    left: 0;
+    top: 10px;
+    width: 28px;
+    height: 28px;
+    background: #252547;
+    border: 1px solid #3a3a5c;
+    border-radius: 50%;
+    color: #a78bfa;
+    font-size: 14px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; }
+  dt { color: #c4b5fd; font-weight: 700; font-size: 16px; }
+  dd { font-size: 16px; color: #cfcfe6; }
+  .meta { text-align: center; color: #555; font-size: 12px; margin-top: 40px; }
+</style>
+</head>
+<body>
+<div id="sheet">
+  <h1 id="title"></h1>
+  <p id="overview"></p>
+  <h2 id="points-h" style="display:none">Key Points</h2>
+  <ol id="points"></ol>
+  <h2 id="glossary-h" style="display:none">Glossary</h2>
+  <dl id="glossary"></dl>
+</div>
+<script>
+(function () {
+  var s = ${dataJson};
+  document.getElementById('title').textContent = s.title || 'Summary';
+  if (s.overview) document.getElementById('overview').textContent = s.overview;
+  var ol = document.getElementById('points');
+  var points = s.keyPoints || [];
+  if (points.length) {
+    document.getElementById('points-h').style.display = '';
+    points.forEach(function (p) {
+      var li = document.createElement('li');
+      li.textContent = p;
+      ol.appendChild(li);
+    });
+  }
+  var dl = document.getElementById('glossary');
+  var glossary = s.glossary || [];
+  if (glossary.length) {
+    document.getElementById('glossary-h').style.display = '';
+    glossary.forEach(function (g) {
+      var dt = document.createElement('dt');
+      dt.textContent = g.term;
+      var dd = document.createElement('dd');
+      dd.textContent = g.definition;
+      dl.appendChild(dt);
+      dl.appendChild(dd);
+    });
+  }
+  var meta = document.createElement('div');
+  meta.className = 'meta';
+  meta.textContent = 'Created with Playable Lessons';
+  document.getElementById('sheet').appendChild(meta);
+})();
+</script>
+</body>
+</html>`;
+}

package/out/shared/version.generated.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.APP_VERSION = void 0;
+// AUTO-GENERATED by scripts/embed-version.mjs — do not edit by hand.
+// Source: package.json (version). Regenerate: npm run embed:version
+/* eslint-disable */
+exports.APP_VERSION = "0.6.2";

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "playable-lessons",
-  "version": "0.2.1",
-  "description": "Interactive Fiction Authoring Tool for Education — Generate playable branching stories from source material using AI + Ink",
+  "version": "0.6.2",
   "main": "./out/main/index.mjs",
   "scripts": {
     "dev": "electron-vite dev",
@@ -16,11 +15,13 @@
     "typecheck:node": "tsc --noEmit -p tsconfig.node.json",
     "typecheck:web": "tsc --noEmit -p tsconfig.web.json",
     "typecheck": "npm run typecheck:node && npm run typecheck:web",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "eslint .",
     "test": "vitest run",
     "test:watch": "vitest",
-    "build:cli": "tsc -p tsconfig.cli.json",
-    "prepublishOnly": "npm run build:cli",
+    "embed:runtime": "node scripts/embed-ink-runtime.mjs",
+    "embed:version": "node scripts/embed-version.mjs",
+    "build:cli": "node scripts/embed-version.mjs && tsc -p tsconfig.cli.json",
+    "prepublishOnly": "npm run embed:runtime && npm run build:cli",
     "cli": "npx tsx src/cli/index.ts"
   },
   "bin": {
@@ -55,6 +56,7 @@
     "yargs": "^18.0.0"
   },
   "devDependencies": {
+    "@electron/notarize": "^2.5.0",
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -67,6 +69,8 @@
     "electron-builder": "^26.8.1",
     "electron-vite": "^5.0.0",
     "eslint": "^10.1.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "express": "^5.2.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tsx": "^4.21.0",