@opul/cli 0.1.1 → 0.1.2

package/dist/index.js

@@ -280,7 +280,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 +302,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 +326,7 @@ function overlayInitSource() {
     }
     function click() {
       return new Promise((res) => {
+        ensure();
         cursor.animate([
           { transform: "translate(" + pos.x + "px," + pos.y + "px) scale(1)" },
           {
@@ -340,6 +346,7 @@ function overlayInitSource() {
     }
     function showLower(text) {
       return new Promise((res) => {
+        ensure();
         lower.textContent = text;
         void lower.offsetWidth;
         lower.style.opacity = "1";
@@ -348,6 +355,7 @@ function overlayInitSource() {
     }
     function hideLower2() {
       return new Promise((res) => {
+        ensure();
         lower.style.opacity = "0";
         setTimeout(res, 150);
       });
@@ -487,6 +495,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 +506,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 +518,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 +900,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(" > ");
@@ -1403,7 +1433,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.2");
 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.2",
   "description": "Record a polished product-demo video from your running web app — from the terminal.",
   "type": "module",
   "bin": {