ghostfill 0.1.0

package/dist/index.js

@@ -0,0 +1,1873 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  fill: () => fill,
+  init: () => init
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/types.ts
+var PROVIDERS = {
+  openai: { label: "OpenAI", model: "gpt-4o-mini", baseURL: "https://api.openai.com/v1", helpText: "Uses gpt-4o-mini \u2014 fast & cheap" },
+  xai: { label: "xAI", model: "grok-4-fast", baseURL: "https://api.x.ai/v1", helpText: "Uses Grok 4 Fast" },
+  moonshot: { label: "Moonshot", model: "kimi-k2", baseURL: "https://api.moonshot.ai/v1", helpText: "Uses Kimi K2 \u2014 fast & cheap" }
+};
+
+// src/detector.ts
+var INPUT_SELECTORS = [
+  "input:not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image])",
+  "textarea",
+  "select",
+  // Custom dropdown triggers (Headless UI Listbox, Radix, etc.)
+  "button[role=combobox]",
+  "[role=combobox]:not(input)",
+  "button[aria-haspopup=listbox]"
+].join(", ");
+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 parentLabel = el.closest("label");
+  if (parentLabel) {
+    const clone = parentLabel.cloneNode(true);
+    clone.querySelectorAll("input, textarea, select").forEach((c) => c.remove());
+    const text = clone.textContent?.trim();
+    if (text) return text;
+  }
+  const ariaLabel = el.getAttribute("aria-label");
+  if (ariaLabel?.trim()) return ariaLabel.trim();
+  const labelledBy = el.getAttribute("aria-labelledby");
+  if (labelledBy) {
+    const parts = labelledBy.split(/\s+/).map((id) => document.getElementById(id)?.textContent?.trim()).filter(Boolean);
+    if (parts.length) return parts.join(" ");
+  }
+  if ("placeholder" in el) {
+    const ph = el.placeholder;
+    if (ph?.trim()) return ph.trim();
+  }
+  const title = el.getAttribute("title");
+  if (title?.trim()) return title.trim();
+  const prev = el.previousElementSibling;
+  if (prev && !["INPUT", "TEXTAREA", "SELECT"].includes(prev.tagName)) {
+    const prevText = prev.textContent?.trim();
+    if (prevText && prevText.length < 60) return prevText;
+  }
+  const parent = el.parentElement;
+  if (parent) {
+    for (const child of Array.from(parent.children)) {
+      if (child === el) break;
+      if (["LABEL", "SPAN", "P", "H1", "H2", "H3", "H4", "H5", "H6", "LEGEND", "DIV"].includes(child.tagName)) {
+        const text = child.textContent?.trim();
+        if (text && text.length < 60 && !child.querySelector("input, textarea, select")) {
+          return text;
+        }
+      }
+    }
+  }
+  if (el.id) return el.id.replace(/[_\-]/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").trim();
+  const name = el.getAttribute("name");
+  if (name) return name.replace(/[_\-[\]]/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").trim();
+  return "unknown";
+}
+function detectFields(container) {
+  const elements = container.querySelectorAll(INPUT_SELECTORS);
+  const fields = [];
+  elements.forEach((el) => {
+    if (el.disabled) return;
+    if (el.readOnly) return;
+    if (el.offsetParent === null && el.type !== "hidden") return;
+    const isCustomDropdown = el.getAttribute("role") === "combobox" && !(el instanceof HTMLInputElement) || el.getAttribute("aria-haspopup") === "listbox";
+    if (isCustomDropdown) {
+      const listboxId = el.getAttribute("aria-controls");
+      let listbox = listboxId ? document.getElementById(listboxId) : null;
+      if (!listbox) {
+        listbox = el.parentElement?.querySelector("[role=listbox]") || null;
+      }
+      const options = [];
+      if (listbox) {
+        listbox.querySelectorAll("[role=option]").forEach((opt) => {
+          const text = opt.textContent?.trim();
+          if (text) options.push(text);
+        });
+      }
+      const buttonText = el.textContent?.trim() || "";
+      const looksLikePlaceholder = buttonText.toLowerCase().startsWith("select") || buttonText === "";
+      const field2 = {
+        element: el,
+        type: "select",
+        name: el.id || el.getAttribute("name") || "",
+        label: findLabel(el),
+        required: el.getAttribute("aria-required") === "true",
+        currentValue: looksLikePlaceholder ? "" : buttonText,
+        options: options.length > 0 ? options : void 0
+      };
+      fields.push(field2);
+      return;
+    }
+    const field = {
+      element: el,
+      type: el instanceof HTMLSelectElement ? "select" : el.type || "text",
+      name: el.name || el.id || "",
+      label: findLabel(el),
+      required: el.required || el.getAttribute("aria-required") === "true",
+      currentValue: el.value
+    };
+    if (el instanceof HTMLSelectElement) {
+      field.options = Array.from(el.options).filter((opt) => opt.value && !opt.disabled).map((opt) => opt.textContent?.trim() || opt.value);
+    }
+    if ("min" in el && el.min) {
+      field.min = el.min;
+    }
+    if ("max" in el && el.max) {
+      field.max = el.max;
+    }
+    if ("pattern" in el && el.pattern) {
+      field.pattern = el.pattern;
+    }
+    fields.push(field);
+  });
+  return fields;
+}
+function describeFields(fields) {
+  return fields.map((f, i) => {
+    let desc = `[${i}] "${f.label}" (type: ${f.type}`;
+    if (f.required) desc += ", required";
+    if (f.options?.length) desc += `, options: [${f.options.join(", ")}]`;
+    if (f.min) desc += `, min: ${f.min}`;
+    if (f.max) desc += `, max: ${f.max}`;
+    if (f.pattern) desc += `, pattern: ${f.pattern}`;
+    if (f.currentValue) desc += `, current: "${f.currentValue}"`;
+    desc += ")";
+    return desc;
+  }).join("\n");
+}
+function extractBlockContext(container) {
+  const parts = [];
+  const pageTitle = document.title;
+  if (pageTitle) parts.push(`Page: ${pageTitle}`);
+  const headings = container.querySelectorAll("h1, h2, h3, h4, h5, h6");
+  headings.forEach((h) => {
+    const text = h.textContent?.trim();
+    if (text) parts.push(`Heading: ${text}`);
+  });
+  if (headings.length === 0) {
+    let prev = container;
+    while (prev) {
+      prev = prev.previousElementSibling;
+      if (prev && /^H[1-6]$/.test(prev.tagName)) {
+        const text = prev.textContent?.trim();
+        if (text) parts.push(`Section: ${text}`);
+        break;
+      }
+    }
+    const parent = container.closest("section, article, form, div[class]");
+    if (parent) {
+      const parentH = parent.querySelector("h1, h2, h3, h4, h5, h6");
+      if (parentH?.textContent?.trim()) {
+        parts.push(`Section: ${parentH.textContent.trim()}`);
+      }
+    }
+  }
+  const labels = container.querySelectorAll("label, legend, .label, p, span");
+  const seen = /* @__PURE__ */ new Set();
+  labels.forEach((el) => {
+    const text = el.textContent?.trim();
+    if (text && text.length > 2 && text.length < 100 && !seen.has(text)) {
+      seen.add(text);
+      parts.push(text);
+    }
+  });
+  return parts.slice(0, 20).join("\n");
+}
+
+// src/ai.ts
+var SYSTEM_PROMPT = `You are a form-filling assistant. Given a list of form fields, page context, and an optional user prompt, generate realistic fake data to fill ALL fields.
+
+Rules:
+- Return ONLY a JSON object with a "fields" array of objects, each with "index" and "value" keys
+- You MUST fill EVERY field \u2014 do not skip any
+- Match the field type (email \u2192 valid email, phone \u2192 valid phone with country code, date \u2192 YYYY-MM-DD, datetime-local \u2192 YYYY-MM-DDTHH:MM, etc.)
+- For select/dropdown fields: you MUST pick one of the listed options EXACTLY as written
+- For checkboxes: add a "checked" boolean (true or false)
+- For radio buttons: only fill one per group, use the option value
+- Respect min/max constraints and patterns
+- Generate contextually coherent data (same person's name, matching city/state/zip, etc.)
+- Use the page context to infer what kind of data makes sense (e.g. a "Create Project" form \u2192 project-related data)
+- If no user prompt is given, infer appropriate data from the field labels and page context
+- Do NOT wrap the JSON in markdown code blocks \u2014 return raw JSON only`;
+async function generateFillData(fields, userPrompt, settings, systemPrompt, blockContext) {
+  const fieldDescription = describeFields(fields);
+  const provider = PROVIDERS[settings.provider] || PROVIDERS.openai;
+  let userContent = `Form fields:
+${fieldDescription}`;
+  if (blockContext) {
+    userContent += `
+
+Page context:
+${blockContext}`;
+  }
+  if (userPrompt) {
+    userContent += `
+
+User instructions: ${userPrompt}`;
+  } else {
+    userContent += `
+
+No specific instructions \u2014 generate realistic, contextually appropriate data for all fields.`;
+  }
+  const messages = [
+    {
+      role: "system",
+      content: systemPrompt ? `${systemPrompt}
+
+${SYSTEM_PROMPT}` : SYSTEM_PROMPT
+    },
+    {
+      role: "user",
+      content: userContent
+    }
+  ];
+  const body = {
+    model: provider.model,
+    messages,
+    temperature: 0.7
+  };
+  if (settings.provider === "openai") {
+    body.response_format = { type: "json_object" };
+  }
+  const response = await fetch(`${provider.baseURL}/chat/completions`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${settings.apiKey}`
+    },
+    body: JSON.stringify(body)
+  });
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(`API error (${response.status}): ${error}`);
+  }
+  const data = await response.json();
+  const content = data.choices?.[0]?.message?.content;
+  if (!content) {
+    throw new Error("No content in API response");
+  }
+  const jsonMatch = content.match(/```(?:json)?\s*([\s\S]*?)```/) || [null, content];
+  const jsonStr = jsonMatch[1].trim();
+  const parsed = JSON.parse(jsonStr);
+  const arr = Array.isArray(parsed) ? parsed : parsed.fields || parsed.data || parsed.items || [];
+  if (!Array.isArray(arr)) {
+    throw new Error("AI response is not an array of field fills");
+  }
+  return arr;
+}
+
+// src/faker.ts
+var FIRST_NAMES = ["James", "Sarah", "Michael", "Emma", "Robert", "Olivia", "David", "Sophia", "Daniel", "Isabella", "Ahmed", "Fatima", "Carlos", "Yuki", "Priya"];
+var LAST_NAMES = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Wilson", "Anderson", "Taylor", "Thomas", "Moore", "Martin", "Lee"];
+var COMPANIES = ["Acme Corp", "TechVault Inc", "Nexus Solutions", "Blue Ridge Systems", "Summit Digital", "CloudPeak Ltd", "DataForge Labs", "Apex Industries"];
+var CITIES = ["New York", "San Francisco", "Chicago", "Austin", "Seattle", "Boston", "Denver", "Portland"];
+var STREETS = ["123 Oak Street", "456 Maple Ave", "789 Pine Road", "321 Elm Blvd", "654 Cedar Lane", "987 Birch Drive"];
+var DOMAINS = ["gmail.com", "outlook.com", "yahoo.com", "company.com", "example.com"];
+var LOREM = ["Project planning and requirements gathering", "Implementation of core features", "Stakeholder review session", "Technical design workshop", "Sprint retrospective and planning", "Customer onboarding process", "Data migration strategy", "Integration testing phase"];
+var TITLES = ["Discovery Workshop", "Requirements Review", "Design Sprint", "Technical Assessment", "Strategy Session", "Kick-off Meeting", "UAT Planning", "Go-Live Preparation"];
+function pick(arr) {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+function randInt(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+function randDate(futureMonths = 6) {
+  const now = /* @__PURE__ */ new Date();
+  const future = new Date(now.getTime() + randInt(1, futureMonths * 30) * 864e5);
+  return future.toISOString().slice(0, 10);
+}
+function randDateTime(futureMonths = 6) {
+  const now = /* @__PURE__ */ new Date();
+  const future = new Date(now.getTime() + randInt(1, futureMonths * 30) * 864e5);
+  future.setHours(randInt(8, 18), randInt(0, 3) * 15, 0);
+  return future.toISOString().slice(0, 16);
+}
+function generateForField(field, context) {
+  const label = field.label.toLowerCase();
+  if (field.type === "select") {
+    if (field.options?.length) return pick(field.options);
+    return "__FIRST__";
+  }
+  if (field.type === "date") return randDate();
+  if (field.type === "datetime-local") return randDateTime();
+  if (field.type === "time") return `${String(randInt(8, 18)).padStart(2, "0")}:${String(randInt(0, 3) * 15).padStart(2, "0")}`;
+  if (field.type === "month") {
+    const d = /* @__PURE__ */ new Date();
+    d.setMonth(d.getMonth() + randInt(0, 6));
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
+  }
+  if (field.type === "email" || label.includes("email")) {
+    return context.email;
+  }
+  if (field.type === "tel" || label.includes("phone") || label.includes("mobile")) {
+    return `+1${randInt(200, 999)}${randInt(100, 999)}${randInt(1e3, 9999)}`;
+  }
+  if (field.type === "url" || label.includes("website") || label.includes("url")) {
+    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;
+    return String(randInt(min, max));
+  }
+  if (label.includes("first name") || label.includes("firstname")) return context.firstName;
+  if (label.includes("last name") || label.includes("lastname") || label.includes("surname")) return context.lastName;
+  if (label.includes("full name") || label === "name") return `${context.firstName} ${context.lastName}`;
+  if (label.includes("company") || label.includes("organization") || label.includes("business")) return context.company;
+  if (label.includes("address") || label.includes("street")) return pick(STREETS);
+  if (label.includes("city")) return pick(CITIES);
+  if (label.includes("state")) return pick(["California", "New York", "Texas", "Florida", "Washington"]);
+  if (label.includes("zip") || label.includes("postal")) return String(randInt(1e4, 99999));
+  if (label.includes("country")) return "United States";
+  if (label.includes("title") || label.includes("subject") || label.includes("name")) {
+    return pick(TITLES);
+  }
+  if (label.includes("job") || label.includes("role") || label.includes("position")) {
+    return pick(["Software Engineer", "Product Manager", "Business Analyst", "Solution Architect", "Project Manager"]);
+  }
+  if (label.includes("location") || label.includes("channel") || label.includes("venue")) {
+    return pick(["Microsoft Teams", "Zoom", "Google Meet", "On-site", "Conference Room A"]);
+  }
+  if (field.type === "textarea" || label.includes("description") || label.includes("note") || label.includes("comment") || label.includes("objective") || label.includes("goal")) {
+    return pick(LOREM);
+  }
+  if (field.type === "password") return "P@ssw0rd123!";
+  return pick([context.firstName, context.company, pick(TITLES)]);
+}
+function generateFakeData(fields) {
+  const firstName = pick(FIRST_NAMES);
+  const lastName = pick(LAST_NAMES);
+  const company = pick(COMPANIES);
+  const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@${pick(DOMAINS)}`;
+  const context = { firstName, lastName, email, company };
+  return fields.map((field, index) => {
+    if (field.type === "checkbox") {
+      return { index, value: "true", checked: Math.random() > 0.5 };
+    }
+    const value = generateForField(field, context);
+    return { index, value };
+  });
+}
+
+// src/filler.ts
+function setNativeValue(el, value) {
+  const proto = el instanceof HTMLSelectElement ? HTMLSelectElement.prototype : el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  const nativeSetter = Object.getOwnPropertyDescriptor(proto, "value")?.set;
+  if (nativeSetter) {
+    nativeSetter.call(el, value);
+  } else {
+    el.value = value;
+  }
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+  el.dispatchEvent(new Event("change", { bubbles: true }));
+}
+function focusBlur(el) {
+  el.focus();
+  el.dispatchEvent(new Event("blur", { bubbles: true }));
+}
+async function fillCustomSelect(button, value) {
+  button.click();
+  await new Promise((r) => setTimeout(r, 200));
+  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]");
+  }
+  if (listbox) {
+    const options = listbox.querySelectorAll("[role=option]");
+    for (const opt of options) {
+      const text = opt.textContent?.trim();
+      if (text === value || text?.toLowerCase() === value.toLowerCase()) {
+        opt.click();
+        await new Promise((r) => setTimeout(r, 50));
+        return;
+      }
+    }
+    for (const opt of options) {
+      const text = opt.textContent?.trim()?.toLowerCase() || "";
+      if (text.includes(value.toLowerCase()) || value.toLowerCase().includes(text)) {
+        opt.click();
+        await new Promise((r) => setTimeout(r, 50));
+        return;
+      }
+    }
+    for (const opt of options) {
+      const text = (opt.textContent?.trim() || "").toLowerCase();
+      const isPlaceholder = text.startsWith("select") || text === "" || text === "---" || text === "choose" || text.startsWith("choose");
+      if (!isPlaceholder) {
+        opt.click();
+        await new Promise((r) => setTimeout(r, 50));
+        return;
+      }
+    }
+    if (options.length > 1) {
+      options[options.length - 1].click();
+      await new Promise((r) => setTimeout(r, 50));
+      return;
+    }
+  }
+  button.click();
+}
+async function fillFields(fields, fillData) {
+  let filled = 0;
+  const errors = [];
+  const filledRadioGroups = /* @__PURE__ */ new Set();
+  for (const item of fillData) {
+    const field = fields[item.index];
+    if (!field) {
+      errors.push(`Field index ${item.index} out of range`);
+      continue;
+    }
+    const el = field.element;
+    try {
+      if (field.type === "checkbox") {
+        const checkbox = el;
+        const shouldCheck = item.checked ?? item.value === "true";
+        if (checkbox.checked !== shouldCheck) {
+          const nativeCheckedSetter = Object.getOwnPropertyDescriptor(
+            HTMLInputElement.prototype,
+            "checked"
+          )?.set;
+          if (nativeCheckedSetter) {
+            nativeCheckedSetter.call(checkbox, shouldCheck);
+          } else {
+            checkbox.checked = shouldCheck;
+          }
+          checkbox.dispatchEvent(new Event("click", { bubbles: true }));
+          checkbox.dispatchEvent(new Event("input", { bubbles: true }));
+          checkbox.dispatchEvent(new Event("change", { bubbles: true }));
+        }
+        filled++;
+      } else if (field.type === "radio") {
+        const radio = el;
+        if (radio.name && filledRadioGroups.has(radio.name)) continue;
+        if (radio.name) {
+          const group = document.querySelectorAll(
+            `input[type="radio"][name="${CSS.escape(radio.name)}"]`
+          );
+          for (const r of group) {
+            if (r.value === item.value || findLabel2(r) === item.value) {
+              const nativeCheckedSetter = Object.getOwnPropertyDescriptor(
+                HTMLInputElement.prototype,
+                "checked"
+              )?.set;
+              if (nativeCheckedSetter) {
+                nativeCheckedSetter.call(r, true);
+              } else {
+                r.checked = true;
+              }
+              r.dispatchEvent(new Event("click", { bubbles: true }));
+              r.dispatchEvent(new Event("input", { bubbles: true }));
+              r.dispatchEvent(new Event("change", { bubbles: true }));
+              break;
+            }
+          }
+          filledRadioGroups.add(radio.name);
+        } else {
+          radio.checked = true;
+          radio.dispatchEvent(new Event("click", { bubbles: true }));
+          radio.dispatchEvent(new Event("change", { bubbles: true }));
+        }
+        filled++;
+      } else if (field.type === "select") {
+        if (el instanceof HTMLSelectElement) {
+          const pickFirst = () => {
+            const real = Array.from(el.options).find((o) => {
+              if (!o.value || o.disabled) return false;
+              const t = (o.textContent?.trim() || "").toLowerCase();
+              return !t.startsWith("select") && t !== "" && !t.startsWith("choose") && t !== "---";
+            });
+            if (real) setNativeValue(el, real.value);
+          };
+          if (item.value === "__FIRST__") {
+            pickFirst();
+          } else {
+            const option = Array.from(el.options).find(
+              (opt) => opt.textContent?.trim() === item.value || opt.value === item.value
+            );
+            if (option) {
+              setNativeValue(el, option.value);
+            } else {
+              pickFirst();
+            }
+          }
+          focusBlur(el);
+        } else {
+          await fillCustomSelect(el, item.value);
+        }
+        filled++;
+      } else {
+        setNativeValue(el, item.value);
+        focusBlur(el);
+        filled++;
+      }
+      const origBg = el.style.backgroundColor;
+      el.style.transition = "background-color 0.3s";
+      el.style.backgroundColor = "rgba(99, 102, 241, 0.12)";
+      setTimeout(() => {
+        el.style.backgroundColor = origBg;
+      }, 800);
+    } catch (err) {
+      errors.push(
+        `Failed to fill "${field.label}": ${err instanceof Error ? err.message : String(err)}`
+      );
+    }
+  }
+  return { filled, errors };
+}
+function findLabel2(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) {
+  const div = document.createElement("div");
+  div.id = "ghostfill-selector-overlay";
+  const r = parseInt(color.slice(1, 3), 16);
+  const g = parseInt(color.slice(3, 5), 16);
+  const b = parseInt(color.slice(5, 7), 16);
+  Object.assign(div.style, {
+    position: "fixed",
+    pointerEvents: "none",
+    border: `2px dashed ${color}`,
+    borderRadius: "4px",
+    backgroundColor: `rgba(${r}, ${g}, ${b}, 0.08)`,
+    zIndex: "2147483645",
+    transition: "all 0.15s ease"
+  });
+  document.body.appendChild(div);
+  return div;
+}
+function positionOverlay(el, color) {
+  if (!overlay) overlay = createOverlay(color);
+  const rect = el.getBoundingClientRect();
+  Object.assign(overlay.style, {
+    top: `${rect.top}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    display: "block"
+  });
+}
+function hideOverlay() {
+  if (overlay) overlay.style.display = "none";
+}
+function removeOverlay() {
+  overlay?.remove();
+  overlay = null;
+}
+function findBestContainer(target) {
+  if (target.tagName === "FORM" || target.tagName === "FIELDSET") return target;
+  let el = target;
+  while (el) {
+    if (el.tagName === "FORM" || el.tagName === "FIELDSET") return el;
+    const inputs = el.querySelectorAll(
+      "input:not([type=hidden]):not([type=submit]):not([type=button]), textarea, select"
+    );
+    if (inputs.length >= 2) return el;
+    el = el.parentElement;
+  }
+  return target;
+}
+function startSelection(onSelect, onCancel, ghostfillRoot, highlightColor = "#6366f1") {
+  document.body.style.cursor = "crosshair";
+  function handleMouseMove(e) {
+    const target = e.target;
+    if (ghostfillRoot?.contains(target)) return;
+    if (target.id === "ghostfill-selector-overlay") return;
+    const container = findBestContainer(target);
+    if (container !== currentHighlight) {
+      currentHighlight = container;
+      positionOverlay(container, highlightColor);
+    }
+  }
+  function handleClick(e) {
+    const target = e.target;
+    if (ghostfillRoot?.contains(target)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    cleanup();
+    const container = findBestContainer(target);
+    onSelect(container);
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Escape") {
+      cleanup();
+      onCancel();
+    }
+  }
+  function cleanup() {
+    document.body.style.cursor = "";
+    document.removeEventListener("mousemove", handleMouseMove, true);
+    document.removeEventListener("click", handleClick, true);
+    document.removeEventListener("keydown", handleKeyDown, true);
+    hideOverlay();
+    removeOverlay();
+    currentHighlight = null;
+  }
+  document.addEventListener("mousemove", handleMouseMove, true);
+  document.addEventListener("click", handleClick, true);
+  document.addEventListener("keydown", handleKeyDown, true);
+  return cleanup;
+}
+
+// src/overlay.ts
+var STORAGE_KEY = "ghostfill_settings";
+var POS_KEY = "ghostfill_pos";
+var FAB_POS_KEY = "ghostfill_fab_pos";
+function loadSettings() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return JSON.parse(raw);
+  } catch {
+  }
+  return { apiKey: "", provider: "openai", highlightColor: "#6366f1", theme: "dark", useAI: false, presets: [], activePresetId: null };
+}
+function saveSettings(s) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+}
+function loadPosition() {
+  try {
+    const raw = localStorage.getItem(POS_KEY);
+    if (raw) return JSON.parse(raw);
+  } catch {
+  }
+  return null;
+}
+function savePosition(x, y) {
+  localStorage.setItem(POS_KEY, JSON.stringify({ x, y }));
+}
+function cleanError(err) {
+  const raw = err instanceof Error ? err.message : String(err);
+  const match = raw.match(/"message"\s*:\s*"([^"]+)"/);
+  if (match) return match[1];
+  const stripped = raw.replace(/^OpenAI API error \(\d+\):\s*/, "");
+  try {
+    const parsed = JSON.parse(stripped);
+    if (parsed?.error?.message) return parsed.error.message;
+  } catch {
+  }
+  return stripped.length > 80 ? stripped.slice(0, 80) + "..." : stripped;
+}
+var ICONS = {
+  select: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>
+    <circle cx="12" cy="12" r="4"/>
+  </svg>`,
+  sparkles: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>
+    <path d="M20 3v4M22 5h-4"/>
+  </svg>`,
+  settings: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="3"/>
+    <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
+  </svg>`,
+  close: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+  </svg>`,
+  ghost: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 2C7.58 2 4 5.58 4 10v10l2-2 2 2 2-2 2 2 2-2 2 2 2-2 2 2V10c0-4.42-3.58-8-8-8z"/>
+    <circle cx="9" cy="10" r="1.5" fill="currentColor"/>
+    <circle cx="15" cy="10" r="1.5" fill="currentColor"/>
+  </svg>`,
+  spinner: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+    <path d="M12 2a10 10 0 0 1 10 10"/>
+  </svg>`,
+  // Field type icons (14x14)
+  ftText: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7V4h16v3M9 20h6M12 4v16"/></svg>`,
+  ftEmail: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>`,
+  ftPhone: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>`,
+  ftNumber: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 9h16M4 15h16M10 3L8 21M16 3l-2 18"/></svg>`,
+  ftDate: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>`,
+  ftSelect: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>`,
+  ftTextarea: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 10H3M21 6H3M21 14H3M17 18H3"/></svg>`,
+  ftCheckbox: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 12l2 2 4-4"/></svg>`,
+  ftRadio: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4" fill="currentColor"/></svg>`,
+  ftUrl: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>`,
+  ftPassword: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>`,
+  ftFile: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>`,
+  sun: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>`,
+  moon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>`
+};
+var CSS2 = `
+  :host {
+    all: initial;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    font-size: 13px;
+    color: #e4e4e7;
+    line-height: 1.4;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  .gf-bar {
+    position: fixed;
+    z-index: 2147483646;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    background: #18181b;
+    border-radius: 14px;
+    padding: 5px 6px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
+    user-select: none;
+    cursor: grab;
+    pointer-events: auto;
+  }
+  .gf-bar.dragging { cursor: grabbing; opacity: 0.9; }
+
+  .gf-bar-btn {
+    position: relative;
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 10px;
+    background: transparent;
+    color: #a1a1aa;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s, color 0.15s;
+  }
+  .gf-bar-btn:hover { background: #27272a; color: #fafafa; }
+  .gf-bar-btn.active { background: #3f3f46; color: #fafafa; }
+  .gf-bar-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+  .gf-bar-btn:disabled:hover { background: transparent; color: #a1a1aa; }
+
+  .gf-divider {
+    width: 1px; height: 20px; background: #3f3f46; margin: 0 4px; flex-shrink: 0;
+  }
+
+
+  .gf-fab {
+    position: fixed; z-index: 2147483646;
+    width: 44px; height: 44px; border-radius: 50%; border: none;
+    background: #18181b; color: #a1a1aa; cursor: grab;
+    display: none; align-items: center; justify-content: center;
+    pointer-events: auto;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
+    transition: transform 0.15s, color 0.15s;
+  }
+  .gf-fab:hover { color: #a78bfa; }
+  .gf-fab:hover > svg { animation: gf-float 1.2s ease-in-out infinite; }
+  .gf-fab.visible { display: flex; }
+  @keyframes gf-float {
+    0%, 100% { transform: translateY(0) rotate(0deg); }
+    25% { transform: translateY(-2px) rotate(-5deg); }
+    75% { transform: translateY(1px) rotate(5deg); }
+  }
+
+  .gf-popover {
+    position: fixed; z-index: 2147483646;
+    background: #1a1a1a; border-radius: 16px; pointer-events: auto;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08);
+    display: none; flex-direction: column; overflow: hidden;
+    min-width: 280px;
+  }
+  .gf-popover.open { display: flex; }
+
+  .gf-pop-header {
+    display: flex; align-items: center; justify-content: space-between;
+    min-height: 24px; padding: 13px 16px 0;
+    margin-bottom: 8px; padding-bottom: 9px;
+    border-bottom: 1px solid rgba(255,255,255,0.07);
+  }
+  .gf-pop-header h3 {
+    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-header-right {
+    display: flex; align-items: center; gap: 6px;
+  }
+  .gf-pop-header .gf-version {
+    font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.4);
+    letter-spacing: -0.0094em;
+  }
+  .gf-theme-btn {
+    width: 20px; height: 20px; border: none; border-radius: 4px;
+    background: transparent; color: rgba(255,255,255,0.4); cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    transition: color 0.15s;
+  }
+  .gf-theme-btn:hover { color: rgba(255,255,255,0.7); }
+  .gf-theme-btn svg { width: 14px; height: 14px; }
+
+  .gf-sep {
+    height: 1px; background: rgba(255,255,255,0.07);
+    margin: 8px 0 10px;
+  }
+
+  /* Highlight color picker */
+  .gf-colors {
+    display: flex; gap: 6px; flex-wrap: wrap;
+  }
+  .gf-color-dot {
+    width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
+    cursor: pointer; transition: border-color 0.15s, transform 0.1s;
+  }
+  .gf-color-dot:hover { transform: scale(1.1); }
+  .gf-color-dot.selected { border-color: #fafafa; }
+
+  .gf-pop-body {
+    padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px;
+    max-height: 400px; overflow-y: auto;
+  }
+
+  .gf-field { display: flex; flex-direction: column; gap: 4px; }
+  .gf-label {
+    font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.5);
+    letter-spacing: -0.0094em; display: flex; align-items: center; gap: 2px;
+  }
+  .gf-input {
+    width: 100%; padding: 6px 8px; background: rgba(255,255,255,0.06);
+    border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #fff;
+    font-family: inherit; font-size: 13px; outline: none; transition: border-color 0.15s;
+  }
+  .gf-input:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
+  .gf-input::placeholder { color: rgba(255,255,255,0.25); }
+  .gf-input-mono { font-family: "SF Mono", "Fira Code", monospace; font-size: 12px; }
+
+  textarea.gf-input { min-height: 56px; resize: vertical; line-height: 1.5; }
+
+  .gf-save-btn, .gf-fill-btn {
+    width: 100%; padding: 7px; border: none; border-radius: 8px;
+    background: #6366f1; color: white; font-family: inherit;
+    font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s;
+    display: flex; align-items: center; justify-content: center; gap: 5px;
+  }
+  .gf-save-btn:hover, .gf-fill-btn:hover { background: #4f46e5; }
+  .gf-fill-btn:disabled { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.25); cursor: not-allowed; }
+
+  .gf-pop-body::-webkit-scrollbar { width: 6px; }
+  .gf-pop-body::-webkit-scrollbar-track { background: transparent; }
+  .gf-pop-body::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }
+
+  .gf-field-count { font-size: 11px; color: #71717a; }
+
+  /* \u2500\u2500 Field cards grid \u2500\u2500 */
+  .gf-fields-grid {
+    display: flex; flex-wrap: wrap; gap: 6px;
+    max-height: 140px; overflow-y: auto; padding: 2px;
+    scrollbar-color: #3f3f46 transparent;
+  }
+  .gf-fields-grid::-webkit-scrollbar { width: 5px; }
+  .gf-fields-grid::-webkit-scrollbar-track { background: transparent; }
+  .gf-fields-grid::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }
+
+  .gf-field-card {
+    display: flex; align-items: center; gap: 5px;
+    padding: 4px 8px; border-radius: 8px;
+    background: #27272a; border: 1px solid #3f3f46;
+    cursor: default; transition: border-color 0.15s, background 0.15s;
+    max-width: 100%;
+  }
+  .gf-field-card:hover {
+    border-color: #6366f1; background: #2e2442;
+  }
+  .gf-field-card .gf-fc-icon {
+    flex-shrink: 0; width: 16px; height: 16px; color: #6366f1;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .gf-field-card .gf-fc-icon svg { width: 14px; height: 14px; }
+  .gf-field-card .gf-fc-label {
+    font-size: 11px; color: #d4d4d8; white-space: nowrap;
+    overflow: hidden; text-overflow: ellipsis;
+  }
+  .gf-field-card .gf-fc-req {
+    color: #f87171; font-size: 11px; flex-shrink: 0;
+  }
+
+  /* Inline status text inside prompt popover */
+  .gf-status {
+    font-size: 11px; padding: 4px 0; text-align: center; min-height: 18px;
+    transition: color 0.15s;
+  }
+  .gf-status.error { color: #f87171; }
+  .gf-status.success { color: #4ade80; }
+  .gf-status.info { color: #71717a; }
+
+  .gf-spin { animation: gf-spin 0.7s linear infinite; }
+  @keyframes gf-spin { to { transform: rotate(360deg); } }
+
+  .gf-badge {
+    position: absolute; top: 2px; right: 2px; width: 14px; height: 14px;
+    border-radius: 7px; background: #6366f1; color: white;
+    font-size: 9px; font-weight: 700; display: flex; align-items: center;
+    justify-content: center; line-height: 1;
+  }
+
+  .gf-dot-warn {
+    position: absolute; top: 4px; right: 4px; width: 6px; height: 6px;
+    border-radius: 3px; background: #f59e0b;
+  }
+
+  /* Toggle switch */
+  .gf-toggle {
+    position: relative; display: inline-block; width: 32px; height: 18px; cursor: pointer;
+  }
+  .gf-toggle input { opacity: 0; width: 0; height: 0; }
+  .gf-toggle-slider {
+    position: absolute; inset: 0; background: #3f3f46; border-radius: 9px;
+    transition: background 0.2s;
+  }
+  .gf-toggle-slider::before {
+    content: ""; position: absolute; left: 2px; top: 2px;
+    width: 14px; height: 14px; border-radius: 50%; background: #fafafa;
+    transition: transform 0.2s;
+  }
+  .gf-toggle input:checked + .gf-toggle-slider { background: #6366f1; }
+  .gf-toggle input:checked + .gf-toggle-slider::before { transform: translateX(14px); }
+
+  /* Custom inline picker (like Agentation's "Standard") */
+  .gf-picker {
+    position: relative; display: flex; align-items: center; gap: 4px;
+    cursor: pointer; user-select: none;
+  }
+  .gf-picker-value {
+    font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.85);
+    letter-spacing: -0.0094em;
+  }
+  .gf-picker-dots {
+    font-size: 14px; color: #52525b; line-height: 1;
+  }
+  .gf-picker-menu {
+    display: none; position: absolute; right: 0; top: calc(100% + 6px);
+    background: #09090b; border: 1px solid #27272a; border-radius: 8px;
+    padding: 4px 0; min-width: 140px; z-index: 10;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+  }
+  .gf-picker-menu.open { display: block; }
+  .gf-picker-option {
+    padding: 6px 12px; font-size: 12px; color: #a1a1aa; cursor: pointer;
+    transition: background 0.1s, color 0.1s;
+  }
+  .gf-picker-option:hover { background: #27272a; color: #fafafa; }
+  .gf-picker-option.selected { color: #6366f1; }
+
+  /* Preset chips */
+  .gf-presets-row {
+    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
+  }
+  .gf-preset-chip {
+    padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 500;
+    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
+    cursor: pointer; border: 1px solid transparent;
+    transition: all 0.15s; white-space: nowrap;
+  }
+  .gf-preset-chip:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.1); }
+  .gf-preset-chip.active { border-color: #6366f1; color: #a5b4fc; background: rgba(99,102,241,0.12); }
+  .gf-preset-chip.add {
+    color: rgba(255,255,255,0.3); border: 1px dashed rgba(255,255,255,0.15);
+    background: transparent;
+  }
+  .gf-preset-chip.add:hover { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.3); }
+
+  /* Preset list in settings */
+  .gf-preset-list { display: flex; flex-direction: column; gap: 4px; }
+  .gf-preset-item {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,0.04);
+  }
+  .gf-preset-item-name { font-size: 12px; color: rgba(255,255,255,0.7); }
+  .gf-preset-del {
+    background: none; border: none; color: rgba(255,255,255,0.25); cursor: pointer;
+    font-size: 14px; padding: 0 2px; line-height: 1; transition: color 0.15s;
+  }
+  .gf-preset-del:hover { color: #f87171; }
+
+  /* Preset add form */
+  .gf-preset-form { display: flex; flex-direction: column; gap: 6px; }
+  .gf-preset-form-row { display: flex; gap: 4px; }
+  .gf-preset-form-row .gf-input { flex: 1; }
+  .gf-preset-form-actions { display: flex; gap: 4px; justify-content: flex-end; }
+  .gf-preset-form-btn {
+    padding: 3px 10px; border: none; border-radius: 6px; font-size: 11px;
+    cursor: pointer; font-family: inherit; transition: background 0.15s;
+  }
+  .gf-preset-form-btn.save { background: #6366f1; color: white; }
+  .gf-preset-form-btn.save:hover { background: #4f46e5; }
+  .gf-preset-form-btn.cancel { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); }
+  .gf-preset-form-btn.cancel:hover { background: rgba(255,255,255,0.1); }
+
+  /* Help badge */
+  .gf-help {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 14px; height: 14px; border-radius: 50%;
+    background: #3f3f46; color: #a1a1aa; font-size: 9px; font-weight: 700;
+    cursor: help; flex-shrink: 0;
+  }
+`;
+function createOverlay2(options) {
+  const saved = loadSettings();
+  if (options.apiKey && !saved.apiKey) {
+    saved.apiKey = options.apiKey;
+    saveSettings(saved);
+  }
+  if (options.model && !saved.model) saved.model = options.model;
+  if (options.baseURL && !saved.baseURL) saved.baseURL = options.baseURL;
+  const host = document.createElement("div");
+  host.id = "ghostfill-root";
+  host.style.cssText = "display:contents;";
+  document.body.appendChild(host);
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = CSS2;
+  shadow.appendChild(style);
+  const state = {
+    active: false,
+    selecting: false,
+    selectedBlock: null,
+    fields: [],
+    overlay: host,
+    shadowRoot: shadow
+  };
+  const bar = document.createElement("div");
+  bar.className = "gf-bar";
+  shadow.appendChild(bar);
+  bar.style.display = "none";
+  const savedPos = loadPosition();
+  if (savedPos) {
+    bar.style.left = `${savedPos.x}px`;
+    bar.style.top = `${savedPos.y}px`;
+  } else {
+    bar.style.bottom = "20px";
+    bar.style.left = "50%";
+    bar.style.transform = "translateX(-50%)";
+  }
+  function makeBtn(icon) {
+    const btn = document.createElement("button");
+    btn.className = "gf-bar-btn";
+    btn.innerHTML = icon;
+    return btn;
+  }
+  const btnSelect = makeBtn(ICONS.select);
+  const btnFill = makeBtn(ICONS.sparkles);
+  const btnSettings = makeBtn(ICONS.settings);
+  const btnMinimize = makeBtn(ICONS.close);
+  btnFill.disabled = true;
+  const badge = document.createElement("span");
+  badge.className = "gf-badge";
+  badge.style.display = "none";
+  btnSelect.style.position = "relative";
+  btnSelect.appendChild(badge);
+  const dotWarn = document.createElement("span");
+  dotWarn.className = "gf-dot-warn";
+  btnSettings.style.position = "relative";
+  btnSettings.appendChild(dotWarn);
+  if (!saved.useAI || saved.apiKey) dotWarn.style.display = "none";
+  const divider1 = document.createElement("span");
+  divider1.className = "gf-divider";
+  const divider2 = document.createElement("span");
+  divider2.className = "gf-divider";
+  bar.append(btnSelect, btnFill, divider1, btnSettings, divider2, btnMinimize);
+  const fab = document.createElement("button");
+  fab.className = "gf-fab visible";
+  fab.innerHTML = ICONS.ghost;
+  fab.title = "GhostFill";
+  const savedFabPos = (() => {
+    try {
+      const raw = localStorage.getItem(FAB_POS_KEY);
+      if (raw) return JSON.parse(raw);
+    } catch {
+    }
+    return null;
+  })();
+  if (savedFabPos) {
+    const x = Math.min(savedFabPos.x, window.innerWidth - 60);
+    const y = Math.min(savedFabPos.y, window.innerHeight - 60);
+    fab.style.left = `${Math.max(8, x)}px`;
+    fab.style.top = `${Math.max(8, y)}px`;
+  } else {
+    fab.style.right = "80px";
+    fab.style.bottom = "80px";
+  }
+  shadow.appendChild(fab);
+  function positionFab() {
+    const savedFab = (() => {
+      try {
+        const raw = localStorage.getItem(FAB_POS_KEY);
+        if (raw) return JSON.parse(raw);
+      } catch {
+      }
+      return null;
+    })();
+    if (savedFab) {
+      fab.style.left = `${savedFab.x}px`;
+      fab.style.top = `${savedFab.y}px`;
+    } else {
+      const barRect = bar.getBoundingClientRect();
+      fab.style.left = `${barRect.left + barRect.width / 2 - 22}px`;
+      fab.style.top = `${barRect.top + barRect.height / 2 - 22}px`;
+    }
+    fab.style.bottom = "";
+    fab.style.right = "";
+  }
+  let isDragging = false;
+  let dragStartX = 0;
+  let dragStartY = 0;
+  let barStartX = 0;
+  let barStartY = 0;
+  let hasDragged = false;
+  function onDragStart(e) {
+    isDragging = true;
+    hasDragged = false;
+    dragStartX = e.clientX;
+    dragStartY = e.clientY;
+    const rect = bar.getBoundingClientRect();
+    barStartX = rect.left;
+    barStartY = rect.top;
+    bar.style.transform = "none";
+    bar.style.bottom = "";
+    document.addEventListener("mousemove", onDragMove);
+    document.addEventListener("mouseup", onDragEnd);
+  }
+  function onDragMove(e) {
+    if (!isDragging) return;
+    const dx = e.clientX - dragStartX;
+    const dy = e.clientY - dragStartY;
+    if (!hasDragged && (Math.abs(dx) > 4 || Math.abs(dy) > 4)) {
+      hasDragged = true;
+      bar.classList.add("dragging");
+    }
+    if (!hasDragged) return;
+    const barW = bar.offsetWidth;
+    const barH = bar.offsetHeight;
+    bar.style.left = `${Math.max(0, Math.min(window.innerWidth - barW, barStartX + dx))}px`;
+    bar.style.top = `${Math.max(0, Math.min(window.innerHeight - barH, barStartY + dy))}px`;
+  }
+  function onDragEnd() {
+    isDragging = false;
+    bar.classList.remove("dragging");
+    document.removeEventListener("mousemove", onDragMove);
+    document.removeEventListener("mouseup", onDragEnd);
+    if (hasDragged) {
+      const rect = bar.getBoundingClientRect();
+      savePosition(rect.left, rect.top);
+      repositionPopover();
+      setTimeout(() => {
+        hasDragged = false;
+      }, 0);
+    }
+  }
+  bar.addEventListener("mousedown", onDragStart);
+  const HIGHLIGHT_COLORS = [
+    { color: "#8b5cf6", name: "Purple" },
+    { color: "#3b82f6", name: "Blue" },
+    { color: "#06b6d4", name: "Cyan" },
+    { color: "#22c55e", name: "Green" },
+    { color: "#eab308", name: "Yellow" },
+    { color: "#f97316", name: "Orange" },
+    { color: "#ef4444", name: "Red" }
+  ];
+  const settingsPop = document.createElement("div");
+  settingsPop.className = "gf-popover";
+  settingsPop.innerHTML = `
+    <div class="gf-pop-header">
+      <h3><span class="gf-slash">/</span>ghostfill</h3>
+      <div class="gf-header-right">
+        <span class="gf-version">v0.1.0</span>
+        <button class="gf-theme-btn" id="gf-s-theme" title="Toggle theme">
+          ${saved.theme === "dark" ? ICONS.sun : ICONS.moon}
+        </button>
+      </div>
+    </div>
+    <div class="gf-pop-body">
+      <div class="gf-field">
+        <label class="gf-label">Highlight Colour</label>
+        <div class="gf-colors" id="gf-s-colors">
+          ${HIGHLIGHT_COLORS.map(
+    (c) => `<div class="gf-color-dot${saved.highlightColor === c.color ? " selected" : ""}" data-color="${c.color}" style="background:${c.color}" title="${c.name}"></div>`
+  ).join("")}
+        </div>
+      </div>
+      <div class="gf-sep"></div>
+      <div class="gf-field" style="flex-direction:row;align-items:center;justify-content:space-between">
+        <label class="gf-label" style="margin:0">Use AI</label>
+        <label class="gf-toggle">
+          <input type="checkbox" id="gf-s-useai" ${saved.useAI ? "checked" : ""} />
+          <span class="gf-toggle-slider"></span>
+        </label>
+      </div>
+      <div id="gf-s-ai-section" style="display:${saved.useAI ? "flex" : "none"};flex-direction:column;gap:12px">
+        <div class="gf-field" style="flex-direction:row;align-items:center;justify-content:space-between">
+          <div style="display:flex;align-items:center;gap:4px">
+            <label class="gf-label" style="margin:0">Provider</label>
+            <span class="gf-help" id="gf-s-help" title="">?</span>
+          </div>
+          <div class="gf-picker" id="gf-s-provider-picker">
+            <span class="gf-picker-value" id="gf-s-provider-label">${PROVIDERS[saved.provider]?.label || "OpenAI"}</span>
+          </div>
+        </div>
+        <div class="gf-field">
+          <label class="gf-label">API Key</label>
+          <input type="password" class="gf-input gf-input-mono" id="gf-s-key" placeholder="sk-..." autocomplete="off" spellcheck="false" />
+        </div>
+      </div>
+      <div class="gf-sep"></div>
+      <div class="gf-field">
+        <div style="display:flex;align-items:center;justify-content:space-between">
+          <label class="gf-label" style="margin:0">Presets</label>
+          <button class="gf-preset-chip add" id="gf-s-preset-add" style="font-size:10px;padding:2px 6px">+ Add</button>
+        </div>
+        <div class="gf-preset-list" id="gf-s-preset-list"></div>
+        <div class="gf-preset-form" id="gf-s-preset-form" style="display:none">
+          <input class="gf-input" id="gf-s-preset-name" placeholder="Name (e.g. D365)" />
+          <textarea class="gf-input" id="gf-s-preset-prompt" placeholder="Prompt context..." rows="2" style="min-height:40px"></textarea>
+          <div class="gf-preset-form-actions">
+            <button class="gf-preset-form-btn cancel" id="gf-s-preset-cancel">Cancel</button>
+            <button class="gf-preset-form-btn save" id="gf-s-preset-save">Save</button>
+          </div>
+        </div>
+      </div>
+      <button class="gf-save-btn" id="gf-s-save">Save</button>
+    </div>
+  `;
+  shadow.appendChild(settingsPop);
+  const sKeyInput = settingsPop.querySelector("#gf-s-key");
+  const sUseAIToggle = settingsPop.querySelector("#gf-s-useai");
+  const sAISection = settingsPop.querySelector("#gf-s-ai-section");
+  const sHelpEl = settingsPop.querySelector("#gf-s-help");
+  const sSaveBtn = settingsPop.querySelector("#gf-s-save");
+  const sThemeBtn = settingsPop.querySelector("#gf-s-theme");
+  const sColorsDiv = settingsPop.querySelector("#gf-s-colors");
+  const sPickerEl = settingsPop.querySelector("#gf-s-provider-picker");
+  const sPickerLabel = settingsPop.querySelector("#gf-s-provider-label");
+  sKeyInput.value = saved.apiKey;
+  const providerOrder = ["openai", "xai", "moonshot"];
+  let selectedProvider = saved.provider || "openai";
+  function updateProviderDisplay() {
+    const p = PROVIDERS[selectedProvider] || PROVIDERS.openai;
+    sPickerLabel.textContent = `${p.label} (${p.model})`;
+    sHelpEl.title = p.helpText;
+  }
+  updateProviderDisplay();
+  sPickerEl.addEventListener("click", () => {
+    const idx = providerOrder.indexOf(selectedProvider);
+    selectedProvider = providerOrder[(idx + 1) % providerOrder.length];
+    updateProviderDisplay();
+  });
+  sUseAIToggle.addEventListener("change", () => {
+    sAISection.style.display = sUseAIToggle.checked ? "flex" : "none";
+  });
+  let currentHighlightColor = saved.highlightColor || "#6366f1";
+  sColorsDiv.addEventListener("click", (e) => {
+    const dot = e.target.closest(".gf-color-dot");
+    if (!dot) return;
+    sColorsDiv.querySelectorAll(".gf-color-dot").forEach((d) => d.classList.remove("selected"));
+    dot.classList.add("selected");
+    currentHighlightColor = dot.dataset.color || "#6366f1";
+  });
+  let currentTheme = saved.theme || "dark";
+  function applyTheme(theme) {
+    currentTheme = theme;
+    const isDark = theme === "dark";
+    sThemeBtn.innerHTML = isDark ? ICONS.sun : ICONS.moon;
+    const bg = isDark ? "#18181b" : "#ffffff";
+    const bgInput = isDark ? "#09090b" : "#f4f4f5";
+    const border = isDark ? "#27272a" : "#e4e4e7";
+    const text = isDark ? "#fafafa" : "#18181b";
+    const textMuted = isDark ? "#a1a1aa" : "#52525b";
+    const textDim = isDark ? "#52525b" : "#a1a1aa";
+    const btnHoverBg = isDark ? "#27272a" : "#f4f4f5";
+    for (const pop of [settingsPop, promptPop]) {
+      pop.style.background = bg;
+      pop.style.boxShadow = isDark ? "0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06)" : "0 12px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.08)";
+      pop.querySelectorAll(".gf-pop-header h3").forEach((el) => el.style.color = text);
+      pop.querySelectorAll(".gf-label").forEach((el) => el.style.color = textMuted);
+      pop.querySelectorAll(".gf-input").forEach((el) => {
+        el.style.background = bgInput;
+        el.style.borderColor = border;
+        el.style.color = text;
+      });
+      pop.querySelectorAll(".gf-sep").forEach((el) => el.style.background = border);
+      pop.querySelectorAll(".gf-version").forEach((el) => el.style.color = textDim);
+      pop.querySelectorAll(".gf-field-count").forEach((el) => el.style.color = textMuted);
+      pop.querySelectorAll(".gf-fc-label").forEach((el) => el.style.color = isDark ? "#d4d4d8" : "#3f3f46");
+      pop.querySelectorAll(".gf-field-card").forEach((el) => {
+        el.style.background = isDark ? "#27272a" : "#f4f4f5";
+        el.style.borderColor = border;
+      });
+    }
+    bar.style.background = bg;
+    bar.style.boxShadow = isDark ? "0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06)" : "0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.08)";
+    bar.querySelectorAll(".gf-bar-btn").forEach((btn) => {
+      btn.style.color = textMuted;
+      btn.onmouseenter = () => {
+        btn.style.background = btnHoverBg;
+        btn.style.color = text;
+      };
+      btn.onmouseleave = () => {
+        if (!btn.classList.contains("active")) {
+          btn.style.background = "transparent";
+          btn.style.color = textMuted;
+        }
+      };
+    });
+    bar.querySelectorAll(".gf-divider").forEach((el) => el.style.background = border);
+    fab.style.background = bg;
+    fab.style.color = textMuted;
+    fab.style.boxShadow = isDark ? "0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06)" : "0 4px 16px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.08)";
+  }
+  if (currentTheme === "light") applyTheme("light");
+  sThemeBtn.addEventListener("click", () => {
+    applyTheme(currentTheme === "dark" ? "light" : "dark");
+  });
+  const promptPop = document.createElement("div");
+  promptPop.className = "gf-popover";
+  promptPop.style.width = "300px";
+  promptPop.innerHTML = `
+    <div class="gf-pop-header">
+      <h3>Fill Fields</h3>
+      <span class="gf-field-count" id="gf-p-count">0 fields</span>
+    </div>
+    <div class="gf-pop-body">
+      <div id="gf-p-fields-wrap" style="display:none">
+        <div class="gf-fields-grid" id="gf-p-grid"></div>
+      </div>
+      <div class="gf-field" id="gf-p-preset-row" style="display:none;flex-direction:row;align-items:center;justify-content:space-between">
+        <label class="gf-label" style="margin:0">Preset</label>
+        <div class="gf-picker" id="gf-p-preset-picker">
+          <span class="gf-picker-value" id="gf-p-preset-label">None</span>
+        </div>
+      </div>
+      <div class="gf-field" id="gf-p-prompt-wrap">
+        <textarea class="gf-input" id="gf-p-prompt" placeholder="Optional: describe the data you want&#10;Leave empty for auto-generated data" rows="2"></textarea>
+      </div>
+      <button class="gf-fill-btn" id="gf-p-fill">
+        ${ICONS.sparkles} Fill
+      </button>
+      <div class="gf-status info" id="gf-p-status"></div>
+    </div>
+  `;
+  shadow.appendChild(promptPop);
+  const pCountEl = promptPop.querySelector("#gf-p-count");
+  const pFieldsWrap = promptPop.querySelector("#gf-p-fields-wrap");
+  const pFieldGrid = promptPop.querySelector("#gf-p-grid");
+  const pPresetRow = promptPop.querySelector("#gf-p-preset-row");
+  const pPresetPicker = promptPop.querySelector("#gf-p-preset-picker");
+  const pPresetLabel = promptPop.querySelector("#gf-p-preset-label");
+  const pPromptWrap = promptPop.querySelector("#gf-p-prompt-wrap");
+  const pPromptEl = promptPop.querySelector("#gf-p-prompt");
+  const pFillBtn = promptPop.querySelector("#gf-p-fill");
+  const pStatusEl = promptPop.querySelector("#gf-p-status");
+  let presets = saved.presets || [];
+  let activePresetId = saved.activePresetId || null;
+  function updateFillPresetUI() {
+    if (presets.length === 0) {
+      pPresetRow.style.display = "none";
+      pPromptWrap.style.display = "flex";
+      activePresetId = null;
+      return;
+    }
+    pPresetRow.style.display = "flex";
+    const active = activePresetId ? presets.find((p) => p.id === activePresetId) : null;
+    pPresetLabel.textContent = active ? active.name : "None";
+    pPromptWrap.style.display = active ? "none" : "flex";
+  }
+  function persistActivePreset() {
+    const s = loadSettings();
+    s.activePresetId = activePresetId;
+    saveSettings(s);
+  }
+  pPresetPicker.addEventListener("click", () => {
+    if (presets.length === 0) return;
+    if (!activePresetId) {
+      activePresetId = presets[0].id;
+    } else {
+      const idx = presets.findIndex((p) => p.id === activePresetId);
+      if (idx < presets.length - 1) {
+        activePresetId = presets[idx + 1].id;
+      } else {
+        activePresetId = null;
+      }
+    }
+    persistActivePreset();
+    updateFillPresetUI();
+  });
+  updateFillPresetUI();
+  function setStatus(text, type) {
+    pStatusEl.textContent = text;
+    pStatusEl.className = `gf-status ${type}`;
+  }
+  function clearStatus() {
+    pStatusEl.textContent = "";
+    pStatusEl.className = "gf-status info";
+  }
+  function repositionPopover() {
+    const barRect = bar.getBoundingClientRect();
+    const popCenterX = barRect.left + barRect.width / 2;
+    const popBottom = barRect.top - 8;
+    for (const pop of [settingsPop, promptPop]) {
+      pop.style.position = "fixed";
+      pop.style.bottom = "";
+      pop.style.left = `${popCenterX}px`;
+      pop.style.top = `${popBottom}px`;
+      pop.style.transform = "translate(-50%, -100%)";
+    }
+  }
+  let currentPopover = null;
+  function openPopover(name) {
+    settingsPop.classList.remove("open");
+    promptPop.classList.remove("open");
+    btnSettings.classList.remove("active");
+    btnFill.classList.remove("active");
+    if (name === currentPopover || name === null) {
+      currentPopover = null;
+      return;
+    }
+    repositionPopover();
+    currentPopover = name;
+    if (name === "settings") {
+      settingsPop.classList.add("open");
+      btnSettings.classList.add("active");
+      sKeyInput.focus();
+    } else if (name === "prompt") {
+      promptPop.classList.add("open");
+      btnFill.classList.add("active");
+      pPromptEl.focus();
+    }
+  }
+  let blockHighlight = null;
+  function highlightBlock(el) {
+    removeBlockHighlight();
+    blockHighlight = document.createElement("div");
+    blockHighlight.id = "ghostfill-block-highlight";
+    const rect = el.getBoundingClientRect();
+    const c = currentHighlightColor;
+    Object.assign(blockHighlight.style, {
+      position: "fixed",
+      top: `${rect.top}px`,
+      left: `${rect.left}px`,
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      border: `2px solid ${c}`,
+      borderRadius: "6px",
+      backgroundColor: `${c}0d`,
+      pointerEvents: "none",
+      zIndex: "2147483644",
+      transition: "all 0.2s"
+    });
+    document.body.appendChild(blockHighlight);
+  }
+  function removeBlockHighlight() {
+    blockHighlight?.remove();
+    blockHighlight = null;
+  }
+  function fieldTypeIcon(type) {
+    switch (type) {
+      case "email":
+        return ICONS.ftEmail;
+      case "tel":
+        return ICONS.ftPhone;
+      case "number":
+      case "range":
+        return ICONS.ftNumber;
+      case "date":
+      case "datetime-local":
+      case "time":
+      case "month":
+      case "week":
+        return ICONS.ftDate;
+      case "select":
+        return ICONS.ftSelect;
+      case "textarea":
+        return ICONS.ftTextarea;
+      case "checkbox":
+        return ICONS.ftCheckbox;
+      case "radio":
+        return ICONS.ftRadio;
+      case "url":
+        return ICONS.ftUrl;
+      case "password":
+        return ICONS.ftPassword;
+      case "file":
+        return ICONS.ftFile;
+      default:
+        return ICONS.ftText;
+    }
+  }
+  let fieldHighlightEl = null;
+  function highlightField(el) {
+    clearFieldHighlight();
+    el.style.outline = `2px solid ${currentHighlightColor}`;
+    el.style.outlineOffset = "2px";
+    el.style.transition = "outline 0.15s, outline-offset 0.15s";
+    fieldHighlightEl = el;
+  }
+  function clearFieldHighlight() {
+    if (fieldHighlightEl) {
+      fieldHighlightEl.style.outline = "";
+      fieldHighlightEl.style.outlineOffset = "";
+      fieldHighlightEl = null;
+    }
+  }
+  function showFieldsInPrompt(fields) {
+    pCountEl.textContent = `${fields.length} field${fields.length === 1 ? "" : "s"}`;
+    pFieldGrid.innerHTML = "";
+    fields.forEach((f) => {
+      const card = document.createElement("div");
+      card.className = "gf-field-card";
+      const icon = document.createElement("span");
+      icon.className = "gf-fc-icon";
+      icon.innerHTML = fieldTypeIcon(f.type);
+      const label = document.createElement("span");
+      label.className = "gf-fc-label";
+      label.textContent = f.label;
+      card.appendChild(icon);
+      card.appendChild(label);
+      if (f.required) {
+        const req = document.createElement("span");
+        req.className = "gf-fc-req";
+        req.textContent = "*";
+        card.appendChild(req);
+      }
+      card.addEventListener("mouseenter", () => highlightField(f.element));
+      card.addEventListener("mouseleave", () => clearFieldHighlight());
+      pFieldGrid.appendChild(card);
+    });
+    pFieldsWrap.style.display = "block";
+  }
+  let cleanupSelector = null;
+  btnSelect.addEventListener("click", () => {
+    if (hasDragged) return;
+    if (state.selecting) {
+      cleanupSelector?.();
+      cleanupSelector = null;
+      state.selecting = false;
+      btnSelect.classList.remove("active");
+      return;
+    }
+    openPopover(null);
+    state.selecting = true;
+    btnSelect.classList.add("active");
+    cleanupSelector = startSelection(
+      (element) => {
+        state.selecting = false;
+        state.selectedBlock = element;
+        btnSelect.classList.remove("active");
+        cleanupSelector = null;
+        const fields = detectFields(element);
+        state.fields = fields;
+        if (fields.length === 0) {
+          badge.style.display = "none";
+          btnFill.disabled = true;
+          return;
+        }
+        highlightBlock(element);
+        showFieldsInPrompt(fields);
+        badge.textContent = String(fields.length);
+        badge.style.display = "flex";
+        btnFill.disabled = false;
+      },
+      () => {
+        state.selecting = false;
+        btnSelect.classList.remove("active");
+        cleanupSelector = null;
+      },
+      host,
+      currentHighlightColor
+    );
+  });
+  btnFill.addEventListener("click", () => {
+    if (hasDragged) return;
+    if (state.fields.length === 0) return;
+    openPopover("prompt");
+  });
+  btnSettings.addEventListener("click", () => {
+    if (hasDragged) return;
+    openPopover("settings");
+  });
+  btnMinimize.addEventListener("click", () => {
+    if (hasDragged) return;
+    openPopover(null);
+    removeBlockHighlight();
+    cleanupSelector?.();
+    state.selecting = false;
+    state.selectedBlock = null;
+    state.fields = [];
+    badge.style.display = "none";
+    btnFill.disabled = true;
+    positionFab();
+    bar.style.display = "none";
+    fab.classList.add("visible");
+    state.active = false;
+  });
+  let fabDragState = { dragging: false, moved: false, startX: 0, startY: 0, fabX: 0, fabY: 0 };
+  function onFabMouseDown(e) {
+    fabDragState = {
+      dragging: true,
+      moved: false,
+      startX: e.clientX,
+      startY: e.clientY,
+      fabX: fab.getBoundingClientRect().left,
+      fabY: fab.getBoundingClientRect().top
+    };
+    const onMove = (ev) => {
+      const dx = ev.clientX - fabDragState.startX;
+      const dy = ev.clientY - fabDragState.startY;
+      if (!fabDragState.moved && (Math.abs(dx) > 4 || Math.abs(dy) > 4)) fabDragState.moved = true;
+      if (!fabDragState.moved) return;
+      fab.style.left = `${Math.max(0, Math.min(window.innerWidth - 44, fabDragState.fabX + dx))}px`;
+      fab.style.top = `${Math.max(0, Math.min(window.innerHeight - 44, fabDragState.fabY + dy))}px`;
+      fab.style.right = "";
+      fab.style.bottom = "";
+    };
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      fabDragState.dragging = false;
+      if (fabDragState.moved) {
+        localStorage.setItem(FAB_POS_KEY, JSON.stringify({ x: fab.getBoundingClientRect().left, y: fab.getBoundingClientRect().top }));
+      }
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }
+  fab.addEventListener("mousedown", onFabMouseDown);
+  fab.addEventListener("click", () => {
+    if (fabDragState.moved) {
+      fabDragState.moved = false;
+      return;
+    }
+    fab.classList.remove("visible");
+    bar.style.left = fab.style.left || `${window.innerWidth - 250}px`;
+    bar.style.top = fab.style.top || `${window.innerHeight - 80}px`;
+    bar.style.transform = "none";
+    bar.style.bottom = "";
+    bar.style.display = "flex";
+    state.active = true;
+    setTimeout(() => btnSelect.click(), 50);
+  });
+  const sPresetList = settingsPop.querySelector("#gf-s-preset-list");
+  const sPresetForm = settingsPop.querySelector("#gf-s-preset-form");
+  const sPresetAddBtn = settingsPop.querySelector("#gf-s-preset-add");
+  const sPresetName = settingsPop.querySelector("#gf-s-preset-name");
+  const sPresetPrompt = settingsPop.querySelector("#gf-s-preset-prompt");
+  const sPresetSaveBtn = settingsPop.querySelector("#gf-s-preset-save");
+  const sPresetCancelBtn = settingsPop.querySelector("#gf-s-preset-cancel");
+  let editingPresetId = null;
+  function renderPresetList() {
+    sPresetList.innerHTML = "";
+    presets.forEach((p) => {
+      const item = document.createElement("div");
+      item.className = "gf-preset-item";
+      const name = document.createElement("span");
+      name.className = "gf-preset-item-name";
+      name.textContent = p.name;
+      name.style.cursor = "pointer";
+      name.addEventListener("click", () => {
+        editingPresetId = p.id;
+        sPresetForm.style.display = "flex";
+        sPresetName.value = p.name;
+        sPresetPrompt.value = p.prompt;
+        sPresetName.focus();
+      });
+      const del = document.createElement("button");
+      del.className = "gf-preset-del";
+      del.innerHTML = "&times;";
+      del.addEventListener("click", () => {
+        presets = presets.filter((x) => x.id !== p.id);
+        if (activePresetId === p.id) activePresetId = null;
+        renderPresetList();
+        updateFillPresetUI();
+      });
+      item.append(name, del);
+      sPresetList.appendChild(item);
+    });
+  }
+  renderPresetList();
+  sPresetAddBtn.addEventListener("click", () => {
+    editingPresetId = null;
+    sPresetForm.style.display = "flex";
+    sPresetName.value = "";
+    sPresetPrompt.value = "";
+    sPresetName.focus();
+  });
+  sPresetCancelBtn.addEventListener("click", () => {
+    sPresetForm.style.display = "none";
+    editingPresetId = null;
+  });
+  sPresetSaveBtn.addEventListener("click", () => {
+    const name = sPresetName.value.trim();
+    const prompt = sPresetPrompt.value.trim();
+    if (!name || !prompt) return;
+    if (editingPresetId) {
+      const idx = presets.findIndex((p) => p.id === editingPresetId);
+      if (idx >= 0) presets[idx] = { ...presets[idx], name, prompt };
+    } else {
+      presets.push({ id: Date.now().toString(36), name, prompt });
+    }
+    editingPresetId = null;
+    sPresetForm.style.display = "none";
+    renderPresetList();
+    updateFillPresetUI();
+  });
+  sSaveBtn.addEventListener("click", () => {
+    const s = {
+      apiKey: sKeyInput.value.trim(),
+      provider: selectedProvider,
+      highlightColor: currentHighlightColor,
+      theme: currentTheme,
+      useAI: sUseAIToggle.checked,
+      presets,
+      activePresetId
+    };
+    saveSettings(s);
+    dotWarn.style.display = s.useAI && !s.apiKey ? "block" : "none";
+    openPopover(null);
+  });
+  async function doFill() {
+    const settings = loadSettings();
+    const activePreset = activePresetId ? (settings.presets || []).find((p) => p.id === activePresetId) : null;
+    const userText = pPromptEl.value.trim();
+    const promptText = [activePreset?.prompt, userText].filter(Boolean).join("\n\n");
+    if (state.fields.length === 0) return;
+    pFillBtn.disabled = true;
+    pFillBtn.innerHTML = `<span class="gf-spin">${ICONS.spinner}</span> Filling...`;
+    clearStatus();
+    try {
+      let fillData;
+      if (settings.useAI) {
+        if (!settings.apiKey) {
+          setStatus("Set your API key in Settings first", "error");
+          pFillBtn.disabled = false;
+          pFillBtn.innerHTML = `${ICONS.sparkles} Fill`;
+          return;
+        }
+        const blockContext = state.selectedBlock ? extractBlockContext(state.selectedBlock) : "";
+        fillData = await generateFillData(
+          state.fields,
+          promptText,
+          settings,
+          options.systemPrompt,
+          blockContext
+        );
+      } else {
+        fillData = generateFakeData(state.fields);
+      }
+      const { filled, errors } = await fillFields(state.fields, fillData);
+      if (errors.length > 0) {
+        setStatus(`Filled ${filled}/${state.fields.length} fields`, filled > 0 ? "success" : "error");
+      } else {
+        setStatus(`Filled ${filled} field${filled === 1 ? "" : "s"}`, "success");
+      }
+      removeBlockHighlight();
+      setTimeout(() => openPopover(null), 600);
+    } catch (err) {
+      setStatus(cleanError(err), "error");
+    } finally {
+      pFillBtn.disabled = false;
+      pFillBtn.innerHTML = `${ICONS.sparkles} Fill`;
+    }
+  }
+  pFillBtn.addEventListener("click", doFill);
+  pPromptEl.addEventListener("keydown", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+      e.preventDefault();
+      doFill();
+    }
+  });
+  const shortcut = options.shortcut || "Alt+G";
+  const keys = shortcut.toLowerCase().split("+");
+  function handleShortcut(e) {
+    const mainKey = keys.filter(
+      (k) => !["alt", "ctrl", "control", "shift", "meta", "cmd"].includes(k)
+    )[0];
+    const match = (keys.includes("alt") ? e.altKey : !e.altKey) && (keys.includes("ctrl") || keys.includes("control") ? e.ctrlKey : !e.ctrlKey) && (keys.includes("shift") ? e.shiftKey : !e.shiftKey) && (keys.includes("meta") || keys.includes("cmd") ? e.metaKey : !e.metaKey) && e.key.toLowerCase() === mainKey;
+    if (match) {
+      e.preventDefault();
+      if (state.active) {
+        openPopover(null);
+        positionFab();
+        bar.style.display = "none";
+        fab.classList.add("visible");
+        state.active = false;
+      } else {
+        fab.classList.remove("visible");
+        bar.style.display = "flex";
+        state.active = true;
+      }
+    }
+  }
+  document.addEventListener("keydown", handleShortcut);
+  function destroy() {
+    cleanupSelector?.();
+    removeBlockHighlight();
+    document.removeEventListener("keydown", handleShortcut);
+    host.remove();
+  }
+  return { state, destroy };
+}
+
+// src/index.ts
+var instance = null;
+function init(options = {}) {
+  const existing = document.getElementById("ghostfill-root");
+  if (existing && instance) {
+    return instance;
+  }
+  if (instance) {
+    instance.destroy();
+    instance = null;
+  }
+  const { state, destroy } = createOverlay2(options);
+  instance = { destroy };
+  return { destroy };
+}
+async function fill(params) {
+  const fields = detectFields(params.container);
+  if (fields.length === 0) {
+    return { filled: 0, errors: ["No fillable fields found in container"] };
+  }
+  const fillData = generateFakeData(fields);
+  return fillFields(fields, fillData);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  fill,
+  init
+});
+//# sourceMappingURL=index.js.map