ghostfill 0.2.2 → 0.2.4

package/dist/index.mjs

@@ -2,8 +2,9 @@ import {
   PROVIDERS,
   describeFields,
   detectFields,
+  findLabel,
   generateFillData
-} from "./chunk-VMCU3BNJ.mjs";
+} from "./chunk-CKZ6PWBH.mjs";
 
 // src/faker.ts
 var FIRST_NAMES = ["James", "Sarah", "Michael", "Emma", "Robert", "Olivia", "David", "Sophia", "Daniel", "Isabella", "Ahmed", "Fatima", "Carlos", "Yuki", "Priya"];
@@ -55,8 +56,8 @@ function generateForField(field, context) {
     return `https://www.${context.company.toLowerCase().replace(/\s+/g, "")}.com`;
   }
   if (field.type === "number" || field.type === "range") {
-    const min = field.min ? parseInt(field.min) : 1;
-    const max = field.max ? parseInt(field.max) : 100;
+    const min = field.min ? parseInt(field.min, 10) || 1 : 1;
+    const max = field.max ? parseInt(field.max, 10) || 100 : 100;
     return String(randInt(min, max));
   }
   if (label.includes("first name") || label.includes("firstname")) return context.firstName;
@@ -116,14 +117,96 @@ function focusBlur(el) {
 }
 async function fillCustomSelect(button, value) {
   button.click();
-  await new Promise((r) => setTimeout(r, 200));
+  let waited = 0;
+  const step = 50;
+  while (waited < 500) {
+    await new Promise((r) => setTimeout(r, step));
+    waited += step;
+    const lb = button.getAttribute("aria-controls") ? document.getElementById(button.getAttribute("aria-controls")) : button.parentElement?.querySelector("[role=listbox]") || document.querySelector("[role=listbox]");
+    if (lb) break;
+    const cont = button.closest("[class*='relative']") || button.parentElement;
+    if (cont) {
+      const divs = cont.querySelectorAll("div");
+      for (const d of divs) {
+        if (d === button || d.contains(button) || button.contains(d)) continue;
+        if (d.classList.toString().includes("absolute") || d.classList.toString().includes("z-50")) {
+          waited = 999;
+          break;
+        }
+      }
+    }
+  }
   const listboxId = button.getAttribute("aria-controls");
   let listbox = listboxId ? document.getElementById(listboxId) : null;
   if (!listbox) {
-    listbox = button.parentElement?.querySelector("[role=listbox]") || document.querySelector("[role=listbox]");
+    listbox = button.parentElement?.querySelector("[role=listbox]") || null;
   }
-  if (listbox) {
-    const options = listbox.querySelectorAll("[role=option]");
+  if (!listbox) {
+    const all = document.querySelectorAll("[role=listbox]");
+    for (const lb of all) {
+      if (lb.offsetParent !== null || lb.offsetHeight > 0) {
+        listbox = lb;
+        break;
+      }
+    }
+  }
+  let options = listbox ? listbox.querySelectorAll("[role=option]") : [];
+  if (!listbox || options.length === 0) {
+    let panel = null;
+    const container = button.closest("[class*='relative']") || button.parentElement;
+    if (container) {
+      for (const child of Array.from(container.children)) {
+        if (child === button || child.contains(button)) continue;
+        if (child.tagName === "LABEL" || child.tagName === "P" || child.tagName === "SPAN") continue;
+        const el = child;
+        const style = window.getComputedStyle(el);
+        if (el.classList.contains("absolute") || el.classList.contains("z-50") || style.position === "absolute" || style.position === "fixed") {
+          panel = el;
+          break;
+        }
+      }
+    }
+    if (!panel) {
+      let sibling = button.nextElementSibling;
+      while (sibling) {
+        const tag = sibling.tagName;
+        if (tag !== "P" && tag !== "LABEL" && tag !== "SPAN" && tag === "DIV") {
+          panel = sibling;
+          break;
+        }
+        sibling = sibling.nextElementSibling;
+      }
+    }
+    if (panel && panel !== button) {
+      let contentWait = 0;
+      while (contentWait < 1e3) {
+        await new Promise((r) => setTimeout(r, 100));
+        contentWait += 100;
+        const btns = panel.querySelectorAll("button");
+        let realBtns = 0;
+        for (const b of btns) {
+          if (!b.querySelector("input")) realBtns++;
+        }
+        if (realBtns > 0) break;
+      }
+      const clickables = panel.querySelectorAll("button, [role=option], [data-value], li");
+      const filtered = [];
+      for (const c of clickables) {
+        const text = c.textContent?.trim() || "";
+        if (!text || text === "\xD7" || text === "\u2715") continue;
+        if (c.querySelector("input")) continue;
+        if (c === button) continue;
+        const hasInput = c.querySelector("input[type='text'], input[type='search']");
+        if (hasInput) continue;
+        filtered.push(c);
+      }
+      if (filtered.length > 0) {
+        options = filtered;
+        listbox = panel;
+      }
+    }
+  }
+  if (options.length > 0) {
     for (const opt of options) {
       const text = opt.textContent?.trim();
       if (text === value || text?.toLowerCase() === value.toLowerCase()) {
@@ -142,7 +225,7 @@ async function fillCustomSelect(button, value) {
     }
     for (const opt of options) {
       const text = (opt.textContent?.trim() || "").toLowerCase();
-      const isPlaceholder = text.startsWith("select") || text === "" || text === "---" || text === "choose" || text.startsWith("choose");
+      const isPlaceholder = text.startsWith("select") || text === "" || text === "---" || text === "choose" || text.startsWith("choose") || text.startsWith("search");
       if (!isPlaceholder) {
         opt.click();
         await new Promise((r) => setTimeout(r, 50));
@@ -264,26 +347,11 @@ async function fillFields(fields, fillData) {
   }
   return { filled, errors };
 }
-function findLabel(el) {
-  if (el.id) {
-    const label = document.querySelector(
-      `label[for="${CSS.escape(el.id)}"]`
-    );
-    if (label?.textContent?.trim()) return label.textContent.trim();
-  }
-  const parent = el.closest("label");
-  if (parent) {
-    const clone = parent.cloneNode(true);
-    clone.querySelectorAll("input").forEach((c) => c.remove());
-    return clone.textContent?.trim() || "";
-  }
-  return "";
-}
 
 // src/selector.ts
 var currentHighlight = null;
 var overlay = null;
-function createOverlay(color) {
+function createSelectorOverlay(color) {
   const div = document.createElement("div");
   div.id = "ghostfill-selector-overlay";
   const r = parseInt(color.slice(1, 3), 16);
@@ -302,7 +370,7 @@ function createOverlay(color) {
   return div;
 }
 function positionOverlay(el, color) {
-  if (!overlay) overlay = createOverlay(color);
+  if (!overlay) overlay = createSelectorOverlay(color);
   const rect = el.getBoundingClientRect();
   Object.assign(overlay.style, {
     top: `${rect.top}px`,
@@ -374,6 +442,9 @@ function startSelection(onSelect, onCancel, ghostfillRoot, highlightColor = "#63
   return cleanup;
 }
 
+// package.json
+var version = "0.2.4";
+
 // src/overlay.ts
 var STORAGE_KEY = "ghostfill_settings";
 var POS_KEY = "ghostfill_pos";
@@ -598,7 +669,7 @@ var CSS2 = `
     font-size: 13px; font-weight: 600; color: #fff;
     letter-spacing: -0.0094em;
   }
-  .gf-pop-header .gf-slash { color: rgba(255,255,255,0.5); }
+  .gf-pop-header .gf-slash { color: #6366f1; }
   .gf-pop-header .gf-header-right {
     display: flex; align-items: center; gap: 6px;
   }
@@ -863,7 +934,7 @@ var CSS2 = `
     line-height: 1.5;
   }
 `;
-function createOverlay2(options) {
+function createOverlay(options) {
   const aiConfig = options.ai || null;
   const saved = loadSettings(aiConfig?.provider || "openai");
   if (options.apiKey) {
@@ -884,9 +955,7 @@ function createOverlay2(options) {
     active: false,
     selecting: false,
     selectedBlock: null,
-    fields: [],
-    overlay: host,
-    shadowRoot: shadow
+    fields: []
   };
   const bar = document.createElement("div");
   bar.className = "gf-bar";
@@ -1033,7 +1102,7 @@ function createOverlay2(options) {
     <div class="gf-pop-header">
       <h3><span class="gf-slash">/</span>ghostfill</h3>
       <div class="gf-header-right">
-        <span class="gf-version">v0.2.2</span>
+        <span class="gf-version">v${version}</span>
         <button class="gf-theme-btn" id="gf-s-theme" title="Toggle theme">
           ${saved.theme === "dark" ? ICONS.sun : ICONS.moon}
         </button>
@@ -1875,7 +1944,7 @@ function init(options = {}) {
     instance.destroy();
     instance = null;
   }
-  const { state, destroy } = createOverlay2(options);
+  const { state, destroy } = createOverlay(options);
   instance = { destroy };
   return { destroy };
 }