@opul/cli 0.1.1 → 0.1.3

package/dist/index.js

@@ -243,6 +243,10 @@ function overlayInitSource() {
     const POS_KEY = "__opul_cursor_pos";
     const INK2 = "#0E0E0E";
     const PAPER = "#F4F4F2";
+    const DEFAULT_COLOR = "#C8F24E";
+    if (typeof config.color !== "string" || !/^#[0-9a-fA-F]{3,8}$|^(?:rgb|rgba|hsl|hsla)\([0-9.,%\s]+\)$|^[a-zA-Z]{1,20}$/.test(config.color.trim())) {
+      config = { color: DEFAULT_COLOR };
+    }
     function ensureFont() {
       if (document.getElementById("__opul_font"))
         return;
@@ -280,7 +284,11 @@ function overlayInitSource() {
       lower.style.cssText = "position:absolute;left:24px;bottom:24px;max-width:60%;background:" + INK2 + ";color:" + PAPER + ";font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-0.025em;padding:8px 12px;border-radius:6px;opacity:0;transition:opacity 150ms ease;white-space:nowrap;";
       root.appendChild(lower);
       root.appendChild(cursor);
-      (document.body || document.documentElement).appendChild(root);
+      document.documentElement.appendChild(root);
+    }
+    function ensure() {
+      if (!root || !document.documentElement.contains(root))
+        build();
     }
     function ready() {
       return new Promise((res) => {
@@ -298,6 +306,7 @@ function overlayInitSource() {
     const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
     function move2(x, y, dur) {
       return new Promise((res) => {
+        ensure();
         const sx = pos.x;
         const sy = pos.y;
         const dx = x - sx;
@@ -321,6 +330,7 @@ function overlayInitSource() {
     }
     function click() {
       return new Promise((res) => {
+        ensure();
         cursor.animate([
           { transform: "translate(" + pos.x + "px," + pos.y + "px) scale(1)" },
           {
@@ -340,6 +350,7 @@ function overlayInitSource() {
     }
     function showLower(text) {
       return new Promise((res) => {
+        ensure();
         lower.textContent = text;
         void lower.offsetWidth;
         lower.style.opacity = "1";
@@ -348,6 +359,7 @@ function overlayInitSource() {
     }
     function hideLower2() {
       return new Promise((res) => {
+        ensure();
         lower.style.opacity = "0";
         setTimeout(res, 150);
       });
@@ -487,6 +499,7 @@ async function runStep(page, cast, step) {
     }
     case "hover": {
       const c2 = await centerOf(page, step.selector, timeout);
+      await ensureReady(page);
       if (step.name)
         await moveOverlay(page, c2.x, c2.y, MOVE_MS, step.name);
       else
@@ -497,6 +510,7 @@ async function runStep(page, cast, step) {
     }
     case "click": {
       const c2 = await centerOf(page, step.selector, timeout);
+      await ensureReady(page);
       await moveOverlay(page, c2.x, c2.y, MOVE_MS, step.name);
       await sleep(PRE_CLICK_MS);
       await overlayClick(page);
@@ -508,6 +522,7 @@ async function runStep(page, cast, step) {
     }
     case "type": {
       const c2 = await centerOf(page, step.selector, timeout);
+      await ensureReady(page);
       await moveOverlay(page, c2.x, c2.y, MOVE_MS, step.name);
       await sleep(PRE_CLICK_MS);
       await overlayClick(page);
@@ -889,29 +904,48 @@ function captureSource() {
     if (w.__opulCap || !w.__opulEmit)
       return;
     w.__opulCap = true;
+    const uniq = (s) => {
+      try {
+        return document.querySelectorAll(s).length === 1;
+      } catch {
+        return false;
+      }
+    };
+    const q = (s) => s.replace(/'/g, "\\'");
     const sel = (el) => {
       if (!el || el.nodeType !== 1)
         return null;
       const dd = el.closest("[data-demo]");
       if (dd)
         return `[data-demo='${dd.getAttribute("data-demo")}']`;
-      if (el.id && document.querySelectorAll(`#${CSS.escape(el.id)}`).length === 1)
+      if (el.id && uniq(`#${CSS.escape(el.id)}`))
         return `#${CSS.escape(el.id)}`;
+      const al = el.getAttribute("aria-label");
+      if (al && uniq(`[aria-label='${q(al)}']`))
+        return `[aria-label='${q(al)}']`;
+      if (el.tagName === "A") {
+        const href = el.getAttribute("href");
+        if (href && href !== "#" && uniq(`a[href='${q(href)}']`))
+          return `a[href='${q(href)}']`;
+      }
       const parts = [];
       let node = el;
-      while (node && node.nodeType === 1 && parts.length < 4) {
+      while (node && node.nodeType === 1 && node.tagName !== "HTML") {
         if (node.id) {
           parts.unshift(`#${CSS.escape(node.id)}`);
-          break;
-        }
-        let part = node.tagName.toLowerCase();
-        const parent = node.parentElement;
-        if (parent) {
-          const same = Array.from(parent.children).filter((c2) => c2.tagName === node.tagName);
-          if (same.length > 1)
-            part += `:nth-of-type(${same.indexOf(node) + 1})`;
+          if (uniq(parts.join(" > ")))
+            return parts.join(" > ");
+        } else {
+          const parent = node.parentElement;
+          let part = node.tagName.toLowerCase();
+          if (parent) {
+            const idx = Array.from(parent.children).indexOf(node) + 1;
+            part += `:nth-child(${idx})`;
+          }
+          parts.unshift(part);
+          if (uniq(parts.join(" > ")))
+            return parts.join(" > ");
         }
-        parts.unshift(part);
         node = node.parentElement;
       }
       return parts.join(" > ");
@@ -947,6 +981,18 @@ var ACTIONS = [
 ];
 var StepsValidationError = class extends Error {
 };
+var SAFE_COLOR = /^#[0-9a-fA-F]{3,8}$|^(?:rgb|rgba|hsl|hsla)\(\s*[0-9.,%\s]+\)$|^[a-zA-Z]{1,20}$/;
+function isSafeColor(c2) {
+  return SAFE_COLOR.test(c2.trim());
+}
+function isSafeUrl(u) {
+  try {
+    const p = new URL(u);
+    return p.protocol === "http:" || p.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
 function parseSteps(raw) {
   if (typeof raw !== "object" || raw === null) {
     throw new StepsValidationError("steps file must be a JSON object");
@@ -959,6 +1005,16 @@ function parseSteps(raw) {
     throw new StepsValidationError('"steps" must be a non-empty array');
   }
   const steps = obj.steps.map((s, i) => validateStep(s, i));
+  for (const key of ["url", "startUrl"]) {
+    const v = obj[key];
+    if (typeof v === "string" && v !== "" && !isSafeUrl(v)) {
+      throw new StepsValidationError(`"${key}" must be an http(s) URL`);
+    }
+  }
+  const cursorColor = obj.cursor?.color;
+  if (typeof cursorColor === "string" && !isSafeColor(cursorColor)) {
+    throw new StepsValidationError(`cursor.color "${cursorColor}" is not a valid CSS color`);
+  }
   const vp = obj.viewport;
   const viewport = vp && typeof vp.width === "number" && typeof vp.height === "number" ? { width: vp.width, height: vp.height } : { width: 1440, height: 900 };
   return {
@@ -986,8 +1042,12 @@ function validateStep(s, i) {
       throw new StepsValidationError(`step ${i} (${a}): "${field}" is required`);
     }
   };
-  if (a === "goto")
+  if (a === "goto") {
     need("url");
+    if (typeof step.url === "string" && !isSafeUrl(step.url)) {
+      throw new StepsValidationError(`step ${i} (goto): "url" must be http(s)`);
+    }
+  }
   if (a === "click" || a === "hover" || a === "wait")
     need("selector");
   if (a === "type") {
@@ -1212,7 +1272,7 @@ import { createInterface as createInterface2 } from "readline/promises";
 import { stdin, stdout } from "process";
 
 // src/config.ts
-import { readFile as readFile2, writeFile as writeFile7, mkdir as mkdir3 } from "fs/promises";
+import { readFile as readFile2, writeFile as writeFile7, mkdir as mkdir3, chmod } from "fs/promises";
 import { homedir } from "os";
 import { join as join6 } from "path";
 var dir = join6(homedir(), ".opul");
@@ -1226,8 +1286,12 @@ async function loadConfig() {
   }
 }
 async function saveConfig(cfg) {
-  await mkdir3(dir, { recursive: true });
+  await mkdir3(dir, { recursive: true, mode: 448 });
+  await chmod(dir, 448).catch(() => {
+  });
   await writeFile7(file, JSON.stringify(cfg, null, 2) + "\n", { mode: 384 });
+  await chmod(file, 384).catch(() => {
+  });
 }
 async function requireToken() {
   const { token } = await loadConfig();
@@ -1291,15 +1355,15 @@ async function publishCommand(file2, opts) {
   }
   const videoPath = resolve3(process.cwd(), file2);
   const posterPath = opts.poster ? resolve3(process.cwd(), opts.poster) : join7(dirname(videoPath), "poster.jpg");
-  let video;
+  let size;
   try {
-    video = await readFile3(videoPath);
+    size = (await stat2(videoPath)).size;
   } catch {
     return fail3(`file not found: ${file2}`);
   }
-  const poster = await readFile3(posterPath).catch(() => null);
-  const size = (await stat2(videoPath)).size;
   if (size > 200 * 1024 * 1024) return fail3("file exceeds 200 MB upload cap.");
+  const video = await readFile3(videoPath);
+  const poster = await readFile3(posterPath).catch(() => null);
   const meta = await readFile3(join7(dirname(videoPath), "demo.json"), "utf8").then((s) => JSON.parse(s)).catch(() => ({}));
   const title = opts.title ?? meta.title ?? basename(videoPath).replace(/\.[^.]+$/, "");
   const auth = { authorization: `Bearer ${token}` };
@@ -1403,7 +1467,7 @@ function fail4(msg) {
 
 // src/index.ts
 var program = new Command();
-program.name("opul").description("Record a product demo from your running web app.").version("0.1.0");
+program.name("opul").description("Record a product demo from your running web app.").version("0.1.3");
 program.command("init").description("Create an opul.steps.json stub").option("--out <file>", "output path", "opul.steps.json").action(initCommand);
 program.command("doctor").description("Check that Chrome and ffmpeg are installed").action(doctorCommand);
 program.command("record").description("Click through your app to generate a steps file").option("--url <url>", "app URL to open").option("--out <file>", "steps file to write", "opul.steps.json").option("--name <name>", "product/demo name").option("--chrome <path>", "path to Chrome executable").action(recordCommand);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opul/cli",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Record a polished product-demo video from your running web app — from the terminal.",
   "type": "module",
   "bin": {