@codeyam-editor/codeyam-editor 0.1.0 → 0.1.1

package/npm/scenario-mocks.js

@@ -0,0 +1,70 @@
+function normalizeMockCandidates(url) {
+  try {
+    const parsed = new URL(url);
+    return [url, `${parsed.pathname}${parsed.search}`, parsed.pathname];
+  } catch {
+    return [url];
+  }
+}
+
+function findHttpMock(httpMocks, request) {
+  const method = request.method().toUpperCase();
+  const candidates = normalizeMockCandidates(request.url());
+  for (const candidate of candidates) {
+    const key = `${method} ${candidate}`;
+    if (httpMocks[key]) {
+      return httpMocks[key];
+    }
+  }
+  return null;
+}
+
+async function attachHttpMocks(page, httpMocks) {
+  if (!httpMocks || Object.keys(httpMocks).length === 0) return;
+
+  await page.route("**/*", async (route) => {
+    const mock = findHttpMock(httpMocks, route.request());
+    if (!mock) {
+      await route.continue();
+      return;
+    }
+
+    const headers = { ...(mock.headers || {}) };
+    let body;
+    if (mock.body !== undefined) {
+      body =
+        typeof mock.body === "string" ? mock.body : JSON.stringify(mock.body);
+      const hasContentType = Object.keys(headers).some(
+        (key) => key.toLowerCase() === "content-type",
+      );
+      if (!hasContentType) {
+        headers["content-type"] = "application/json";
+      }
+    }
+
+    await route.fulfill({
+      status: mock.status || 200,
+      headers,
+      body,
+    });
+  });
+
+  // Disable the in-page fetch mock by returning an empty active-mocks.json.
+  // The HTML injects a script that synchronously loads this file and
+  // monkey-patches window.fetch, which would bypass Playwright's route
+  // interception. This route is registered AFTER **/* so it takes priority
+  // (Playwright uses LIFO ordering for route handlers).
+  await page.route("**/active-mocks.json", async (route) => {
+    await route.fulfill({
+      status: 200,
+      headers: { "content-type": "application/json" },
+      body: "[]",
+    });
+  });
+}
+
+module.exports = {
+  normalizeMockCandidates,
+  findHttpMock,
+  attachHttpMocks,
+};

package/npm/scenario-playwright.js

@@ -0,0 +1,192 @@
+const {
+  hasLoadingMarkers,
+  shouldStopWaitingForImages,
+} = require("./scenario-metrics");
+
+function escapeHtmlAttribute(value) {
+  return String(value).replaceAll("&", "&").replaceAll('"', """);
+}
+
+// The harness background defaults to transparent so the iframe's own
+// <body> background paints through — matching what users see in the Live
+// Preview. Callers (via scenario-check.js) pass a concrete color when the
+// UI has detected a background it wants the capture to paint behind the
+// iframe, e.g. `var(--bg-deep)` from the editor shell.
+function buildIframeHarness(url, { background = "transparent" } = {}) {
+  const escapedUrl = escapeHtmlAttribute(url);
+  const bg = String(background);
+  return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+      html, body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: ${bg};
+      }
+
+      iframe {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        background: ${bg};
+      }
+    </style>
+  </head>
+  <body>
+    <iframe id="scenario-frame" title="Scenario Preview" src="${escapedUrl}"></iframe>
+  </body>
+</html>`;
+}
+
+async function collectContentState(target) {
+  return target.evaluate(() => {
+    const root = document.getElementById("root");
+    const imgs = Array.from(document.images || []);
+    const loadedImageCount = imgs.filter(
+      (img) => img.complete && img.naturalWidth > 0,
+    ).length;
+    const mediaSelectors = ["svg", "canvas", "video"];
+    let mediaBboxCount = 0;
+    for (const selector of mediaSelectors) {
+      const nodes = document.querySelectorAll(selector);
+      for (const node of nodes) {
+        const rect = node.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+          mediaBboxCount += 1;
+        }
+      }
+    }
+    return {
+      bodyTextLength: document.body.innerText.trim().length,
+      rootChildCount: root ? root.childElementCount : 0,
+      rootTextLength: root ? (root.textContent || "").trim().length : 0,
+      imageCount: imgs.length,
+      loadedImageCount,
+      mediaBboxCount,
+    };
+  });
+}
+
+async function collectImageStates(target) {
+  return target.evaluate(() =>
+    Array.from(document.images || []).map((img) => ({
+      complete: img.complete,
+      naturalWidth: img.naturalWidth,
+      src: img.currentSrc || img.src || "",
+    })),
+  );
+}
+
+async function waitForImagesSettled(
+  target,
+  { overallTimeoutMs = 5000, pollIntervalMs = 100 } = {},
+) {
+  const started = Date.now();
+  let images = await collectImageStates(target);
+  while (
+    !shouldStopWaitingForImages(images, {
+      elapsedMs: Date.now() - started,
+      overallTimeoutMs,
+    })
+  ) {
+    await new Promise((r) => setTimeout(r, pollIntervalMs));
+    images = await collectImageStates(target);
+  }
+  const elapsedMs = Date.now() - started;
+  const allComplete = images.every((img) => img && img.complete === true);
+  return { settled: allComplete, images, elapsedMs };
+}
+
+async function waitForAnimationsSettled(
+  target,
+  { timeoutMs = 2000, pollIntervalMs = 100 } = {},
+) {
+  const started = Date.now();
+  while (Date.now() - started < timeoutMs) {
+    const runningCount = await target.evaluate(() =>
+      document
+        .getAnimations()
+        .filter((a) => a.playState === "running").length,
+    );
+    if (runningCount === 0) {
+      return { settled: true, elapsedMs: Date.now() - started };
+    }
+    await new Promise((r) => setTimeout(r, pollIntervalMs));
+  }
+  return { settled: false, elapsedMs: Date.now() - started };
+}
+
+async function waitForStablePage(page, target, timeoutMs = 10000) {
+  const started = Date.now();
+  let lastHtml = "";
+  let stableCount = 0;
+
+  while (Date.now() - started < timeoutMs) {
+    await page.waitForTimeout(500);
+
+    const pageState = await target.evaluate(() => ({
+      bodyText: document.body.innerText,
+      html: document.body.innerHTML,
+    }));
+
+    if (!hasLoadingMarkers(pageState.bodyText) && pageState.html === lastHtml) {
+      stableCount += 1;
+      if (stableCount >= 2) {
+        const remaining = () => Math.max(0, timeoutMs - (Date.now() - started));
+        await waitForAnimationsSettled(target, {
+          timeoutMs: Math.min(2000, remaining()),
+        });
+        await waitForImagesSettled(target, { overallTimeoutMs: remaining() });
+        return;
+      }
+    } else {
+      stableCount = 0;
+    }
+
+    lastHtml = pageState.html;
+  }
+}
+
+async function loadScenarioInIframe(page, url, { background } = {}) {
+  const responsePromise = page
+    .waitForResponse(
+      (response) =>
+        response.request().resourceType() === "document" &&
+        response.url() === url,
+      { timeout: 30000 },
+    )
+    .catch(() => null);
+
+  await page.setContent(buildIframeHarness(url, { background }), {
+    waitUntil: "domcontentloaded",
+  });
+
+  const frameHandle = await page.waitForSelector("#scenario-frame", {
+    state: "attached",
+    timeout: 30000,
+  });
+  const frame = await frameHandle.contentFrame();
+  if (!frame) {
+    throw new Error("Scenario iframe did not attach");
+  }
+
+  await frame.waitForLoadState("load", { timeout: 30000 });
+  const response = await responsePromise;
+  return { frame, response };
+}
+
+module.exports = {
+  escapeHtmlAttribute,
+  buildIframeHarness,
+  collectContentState,
+  collectImageStates,
+  waitForImagesSettled,
+  waitForAnimationsSettled,
+  waitForStablePage,
+  loadScenarioInIframe,
+};

package/npm/utils.js

@@ -6,12 +6,22 @@ const fs = require("fs");
 const rootDir = path.resolve(__dirname, "..");
 const serverStatePath = path.join(rootDir, ".codeyam", "server-state.json");
 
+/**
+ * Platform-correct executable filename for the codeyam-editor binary.
+ * Windows requires the `.exe` extension; on Unix the binary has no extension.
+ * Accepts an explicit platform so the helper is testable across platforms.
+ */
+function binaryName(platform = process.platform) {
+  return platform === "win32" ? "codeyam-editor.exe" : "codeyam-editor";
+}
+
 /** Find the compiled binary — check npm-installed location first, then dev builds. */
 function findBinary() {
+  const name = binaryName();
   const candidates = [
-    path.join(rootDir, "bin", "codeyam-editor"),       // npm install (postinstall)
-    path.join(rootDir, "target", "debug", "codeyam-editor"),   // local dev (debug)
-    path.join(rootDir, "target", "release", "codeyam-editor"), // local dev (release)
+    path.join(rootDir, "bin", name),                   // npm install (postinstall)
+    path.join(rootDir, "target", "debug", name),       // local dev (debug)
+    path.join(rootDir, "target", "release", name),     // local dev (release)
   ];
 
   for (const candidate of candidates) {
@@ -136,14 +146,38 @@ async function requestServerShutdown(port = 14199, timeoutMs = 1500) {
 
 function tryKillPid(pid) {
   try {
-    process.kill(pid, "SIGINT");
+    // On Windows, `process.kill(pid, "SIGINT")` either errors or no-ops
+    // depending on Node version. Drop the signal so Node maps to a
+    // platform TerminateProcess. Less graceful, but the child does exit.
+    if (process.platform === "win32") {
+      process.kill(pid);
+    } else {
+      process.kill(pid, "SIGINT");
+    }
     return true;
   } catch {
     return false;
   }
 }
 
+/**
+ * Send the platform-correct termination signal to a spawned child process.
+ * Used by editor.js / editor-dev.js / container.js when the user hits Ctrl+C —
+ * `child.kill("SIGINT")` is unreliable on Windows.
+ */
+function killChildProcess(child) {
+  if (!child) return;
+  if (process.platform === "win32") {
+    child.kill();
+  } else {
+    child.kill("SIGINT");
+  }
+}
+
 function findListeningPids(port) {
+  // Process discovery on Windows is best-effort — `lsof` is not installed and
+  // a `netstat -ano` parser is a follow-up. The API-shutdown path and the
+  // PID-file path together stop the server cleanly in normal operation.
   if (process.platform === "win32") return [];
 
   const result = spawnSync("lsof", [`-tiTCP:${port}`, "-sTCP:LISTEN"], {
@@ -229,6 +263,7 @@ async function ensureServer(port = 14199) {
 module.exports = {
   rootDir,
   serverStatePath,
+  binaryName,
   findBinary,
   ensureBinary,
   uiDistDir,
@@ -237,7 +272,12 @@ module.exports = {
   waitForPort,
   waitForPortToClose,
   readServerState,
+  clearServerState,
+  requestServerShutdown,
+  tryKillPid,
+  findListeningPids,
   stopServer,
   restartServer,
   ensureServer,
+  killChildProcess,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeyam-editor/codeyam-editor",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Language-agnostic managed execution sandbox for scenario-driven development",
   "bin": {
     "codeyam-editor": "./npm/cli.js"
@@ -9,9 +9,15 @@
     "postinstall": "node ./npm/postinstall.js"
   },
   "dependencies": {
-    "playwright": "^1.58.2"
+    "playwright": "^1.58.2",
+    "tar": "^7.5.13"
   },
-  "keywords": ["codeyam", "editor", "development", "scenarios"],
+  "keywords": [
+    "codeyam",
+    "editor",
+    "development",
+    "scenarios"
+  ],
   "homepage": "https://codeyam.com/",
   "license": "MIT",
   "engines": {