ghostfill 0.1.2 → 0.2.0

package/dist/index.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  PROVIDERS: () => PROVIDERS,
   fill: () => fill,
   init: () => init
 });
@@ -158,131 +159,10 @@ function describeFields(fields) {
     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"];
@@ -370,7 +250,7 @@ function generateFakeData(fields) {
   const context = { firstName, lastName, email, company };
   return fields.map((field, index) => {
     if (field.type === "checkbox") {
-      return { index, value: "true", checked: Math.random() > 0.5 };
+      return { index, value: "true", checked: true };
     }
     const value = generateForField(field, context);
     return { index, value };
@@ -657,16 +537,53 @@ function startSelection(onSelect, onCancel, ghostfillRoot, highlightColor = "#63
 var STORAGE_KEY = "ghostfill_settings";
 var POS_KEY = "ghostfill_pos";
 var FAB_POS_KEY = "ghostfill_fab_pos";
-function loadSettings() {
+function isProvider(value) {
+  return value === "openai" || value === "xai" || value === "moonshot";
+}
+function defaultSettings(provider) {
+  return {
+    apiKey: "",
+    provider,
+    highlightColor: "#6366f1",
+    theme: "dark",
+    useAI: false,
+    presets: [],
+    activePresetId: null
+  };
+}
+function sanitizePresets(value) {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap((item) => {
+    if (typeof item === "object" && item !== null && typeof item.id === "string" && typeof item.name === "string" && typeof item.prompt === "string") {
+      return [item];
+    }
+    return [];
+  });
+}
+function loadSettings(provider) {
   try {
     const raw = localStorage.getItem(STORAGE_KEY);
-    if (raw) return JSON.parse(raw);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      return {
+        apiKey: typeof parsed.apiKey === "string" ? parsed.apiKey : "",
+        provider: isProvider(parsed.provider) ? parsed.provider : provider,
+        highlightColor: typeof parsed.highlightColor === "string" ? parsed.highlightColor : "#6366f1",
+        theme: parsed.theme === "light" ? "light" : "dark",
+        useAI: parsed.useAI === true,
+        presets: sanitizePresets(parsed.presets),
+        activePresetId: typeof parsed.activePresetId === "string" ? parsed.activePresetId : null
+      };
+    }
   } catch {
   }
-  return { apiKey: "", provider: "openai", highlightColor: "#6366f1", theme: "dark", useAI: false, presets: [], activePresetId: null };
+  return defaultSettings(provider);
 }
 function saveSettings(s) {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+  } catch {
+  }
 }
 function loadPosition() {
   try {
@@ -677,13 +594,16 @@ function loadPosition() {
   return null;
 }
 function savePosition(x, y) {
-  localStorage.setItem(POS_KEY, JSON.stringify({ x, y }));
+  try {
+    localStorage.setItem(POS_KEY, JSON.stringify({ x, y }));
+  } catch {
+  }
 }
 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*/, "");
+  const stripped = raw.replace(/^AI API error \(\d+\):\s*/, "");
   try {
     const parsed = JSON.parse(stripped);
     if (parsed?.error?.message) return parsed.error.message;
@@ -748,7 +668,7 @@ var CSS2 = `
     align-items: center;
     gap: 2px;
     background: #18181b;
-    border-radius: 14px;
+    border-radius: 22px;
     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;
@@ -783,20 +703,39 @@ var CSS2 = `
 
   .gf-fab {
     position: fixed; z-index: 2147483646;
-    width: 44px; height: 44px; border-radius: 50%; border: none;
-    background: #18181b; color: #a1a1aa; cursor: grab;
+    width: 48px; height: 48px; border-radius: 50%; border: none;
+    background: #18181b; color: #e4e4e7; 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;
+    box-shadow: 0 0 20px rgba(99,102,241,0.3), 0 0 40px rgba(99,102,241,0.1), 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(99,102,241,0.15);
+    transition: color 0.2s, box-shadow 0.3s;
+  }
+  .gf-fab > svg {
+    filter: drop-shadow(0 0 4px rgba(99,102,241,0.5));
+    transition: transform 0.2s;
+  }
+  .gf-fab:hover {
+    color: #fff;
+    box-shadow: 0 0 30px rgba(99,102,241,0.5), 0 0 60px rgba(99,102,241,0.2), 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(99,102,241,0.3);
+  }
+  .gf-fab:hover > svg {
+    animation: gf-ghost-wobble 1.5s ease-in-out infinite;
   }
-  .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); }
+
+  @keyframes gf-ghost-wobble {
+    0%, 100% { transform: translate(0, 0) rotate(0deg); }
+    25% { transform: translate(1px, -2px) rotate(4deg); }
+    50% { transform: translate(0, -3px) rotate(-1deg); }
+    75% { transform: translate(-1px, -1px) rotate(-4deg); }
+  }
+
+  /* Success flash on filled block */
+  @keyframes gf-fill-success {
+    0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
+    30% { box-shadow: 0 0 0 6px rgba(99,102,241,0.2); }
+    60% { box-shadow: 0 0 0 12px rgba(52,211,153,0.15); }
+    100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
   }
 
   .gf-popover {
@@ -804,7 +743,7 @@ var CSS2 = `
     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;
+    width: 280px;
   }
   .gf-popover.open { display: flex; }
 
@@ -879,7 +818,7 @@ var CSS2 = `
     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-fill-btn:disabled { background: #6366f1; opacity: 0.5; cursor: not-allowed; }
 
   .gf-pop-body::-webkit-scrollbar { width: 6px; }
   .gf-pop-body::-webkit-scrollbar-track { background: transparent; }
@@ -1005,26 +944,42 @@ var CSS2 = `
   }
   .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);
+  /* Preset pills in settings */
+  .gf-preset-list { display: flex; flex-wrap: wrap; gap: 6px; }
+  .gf-preset-pill {
+    display: inline-flex; align-items: center; gap: 4px;
+    padding: 4px 10px; border-radius: 20px;
+    font-size: 12px; font-weight: 500; cursor: pointer;
+    border: 1px solid; transition: all 0.15s;
+  }
+  .gf-preset-pill .gf-pp-name {
+    cursor: pointer; transition: opacity 0.15s;
+  }
+  .gf-preset-pill .gf-pp-name:hover { opacity: 0.7; }
+  .gf-preset-pill .gf-pp-x {
+    background: none; border: none; cursor: pointer;
+    font-size: 13px; line-height: 1; opacity: 0.4; transition: opacity 0.15s, color 0.15s;
+    padding: 0; margin-left: 2px; font-family: inherit;
+  }
+  .gf-preset-pill .gf-pp-x:hover { opacity: 1; color: #f87171; }
+
+  /* Preset edit overlay \u2014 takes over the entire settings panel */
+  .gf-preset-overlay {
+    position: absolute; inset: 0;
+    background: #1a1a1a; border-radius: 16px;
+    display: none; flex-direction: column;
+    z-index: 5;
+  }
+  .gf-preset-overlay[style*="display: flex"], .gf-preset-overlay[style*="display:flex"] {
+    display: flex;
   }
-  .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-overlay-body {
+    flex: 1; display: flex; flex-direction: column;
+    padding: 0 16px 16px; gap: 10px; overflow-y: auto;
   }
-  .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-actions { display: flex; gap: 6px; justify-content: flex-end; }
   .gf-preset-form-btn {
-    padding: 3px 10px; border: none; border-radius: 6px; font-size: 11px;
+    padding: 6px 14px; border: none; border-radius: 8px; font-size: 12px; font-weight: 500;
     cursor: pointer; font-family: inherit; transition: background 0.15s;
   }
   .gf-preset-form-btn.save { background: #6366f1; color: white; }
@@ -1032,22 +987,50 @@ var CSS2 = `
   .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); }
 
+  /* Cycle dots (vertical indicator like Agentation) */
+  .gf-cycle-dots {
+    display: flex; flex-direction: column; gap: 2px; margin-left: 4px;
+  }
+  .gf-cycle-dot {
+    width: 3px; height: 3px; border-radius: 50%;
+    background: rgba(255,255,255,0.2); transition: background 0.2s, transform 0.2s;
+    transform: scale(0.67);
+  }
+  .gf-cycle-dot.active { background: #fff; transform: scale(1); }
+
   /* Help badge */
   .gf-help {
+    position: relative;
     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;
   }
+  .gf-help-tip {
+    display: none; position: absolute; bottom: calc(100% + 6px); left: 50%;
+    transform: translateX(-50%); padding: 6px 10px;
+    background: #383838; color: rgba(255,255,255,0.7);
+    font-size: 11px; font-weight: 400; line-height: 1.4;
+    border-radius: 8px; white-space: normal; width: 180px; text-align: left;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3); z-index: 100;
+  }
+  .gf-help-tip.show { display: block; }
+
+  .gf-note {
+    font-size: 11px;
+    color: rgba(255,255,255,0.5);
+    line-height: 1.5;
+  }
 `;
 function createOverlay2(options) {
-  const saved = loadSettings();
-  if (options.apiKey && !saved.apiKey) {
-    saved.apiKey = options.apiKey;
-    saveSettings(saved);
+  const aiConfig = options.ai || null;
+  const saved = loadSettings(aiConfig?.provider || "openai");
+  if (options.apiKey) {
+    console.warn(
+      "[ghostfill] Browser API keys are ignored. Configure init({ ai: ... }) and keep provider keys on your backend."
+    );
   }
-  if (options.model && !saved.model) saved.model = options.model;
-  if (options.baseURL && !saved.baseURL) saved.baseURL = options.baseURL;
+  const backendLabel = aiConfig ? aiConfig.requestFillData ? "Custom secure handler" : aiConfig.endpoint || "/api/ghostfill" : "Configure init({ ai: ... }) to enable AI.";
   const host = document.createElement("div");
   host.id = "ghostfill-root";
   host.style.cssText = "display:contents;";
@@ -1097,7 +1080,7 @@ function createOverlay2(options) {
   dotWarn.className = "gf-dot-warn";
   btnSettings.style.position = "relative";
   btnSettings.appendChild(dotWarn);
-  if (!saved.useAI || saved.apiKey) dotWarn.style.display = "none";
+  dotWarn.style.display = "none";
   const divider1 = document.createElement("span");
   divider1.className = "gf-divider";
   const divider2 = document.createElement("span");
@@ -1204,11 +1187,12 @@ function createOverlay2(options) {
   ];
   const settingsPop = document.createElement("div");
   settingsPop.className = "gf-popover";
+  settingsPop.style.position = "fixed";
   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>
+        <span class="gf-version">v0.1.3</span>
         <button class="gf-theme-btn" id="gf-s-theme" title="Toggle theme">
           ${saved.theme === "dark" ? ICONS.sun : ICONS.moon}
         </button>
@@ -1235,10 +1219,15 @@ function createOverlay2(options) {
         <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>
+            <span class="gf-help" id="gf-s-help">?<span class="gf-help-tip" id="gf-s-help-tip"></span></span>
           </div>
-          <div class="gf-picker" id="gf-s-provider-picker">
+          <div class="gf-picker" id="gf-s-provider-picker" tabindex="0">
             <span class="gf-picker-value" id="gf-s-provider-label">${PROVIDERS[saved.provider]?.label || "OpenAI"}</span>
+            <div class="gf-cycle-dots" id="gf-s-provider-dots">
+              <span class="gf-cycle-dot"></span>
+              <span class="gf-cycle-dot"></span>
+              <span class="gf-cycle-dot"></span>
+            </div>
           </div>
         </div>
         <div class="gf-field">
@@ -1249,39 +1238,64 @@ function createOverlay2(options) {
       <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>
+          <div style="display:flex;align-items:center;gap:4px">
+            <label class="gf-label" style="margin:0">Presets</label>
+            <span class="gf-help" id="gf-s-presets-help">?<span class="gf-help-tip">Saved prompt templates that add context when filling. Select a preset in the Fill panel to use it automatically.</span></span>
+          </div>
           <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>
+    <!-- Preset edit overlay \u2014 takes over entire panel -->
+    <div class="gf-preset-overlay" id="gf-s-preset-form" style="display:none">
+      <div class="gf-pop-header">
+        <h3 id="gf-s-preset-form-title">New Preset</h3>
+      </div>
+      <div class="gf-preset-overlay-body">
+        <div class="gf-field">
+          <label class="gf-label">Name</label>
+          <input class="gf-input" id="gf-s-preset-name" placeholder="e.g. D365, Healthcare, E-commerce" />
+        </div>
+        <div class="gf-field" style="flex:1;display:flex;flex-direction:column">
+          <label class="gf-label">Prompt</label>
+          <textarea class="gf-input" id="gf-s-preset-prompt" placeholder="Describe the context for this preset...&#10;&#10;e.g. Generate data for a Microsoft Dynamics 365 Customer Engagement implementation. Use CRM terminology, consulting project names, and Microsoft partner context." style="flex:1;min-height:120px;resize:none"></textarea>
+        </div>
+        <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 Preset</button>
+        </div>
+      </div>
+    </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");
+  sKeyInput.value = saved.apiKey || "";
   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 sProviderDots = settingsPop.querySelector("#gf-s-provider-dots");
+  const sHelpTip = settingsPop.querySelector("#gf-s-help-tip");
+  const sPresetsHelp = settingsPop.querySelector("#gf-s-presets-help");
   const providerOrder = ["openai", "xai", "moonshot"];
-  let selectedProvider = saved.provider || "openai";
+  let selectedProvider = saved.provider || aiConfig?.provider || "openai";
+  function updateProviderDots() {
+    const idx = providerOrder.indexOf(selectedProvider);
+    sProviderDots.querySelectorAll(".gf-cycle-dot").forEach((dot, i) => {
+      dot.classList.toggle("active", i === idx);
+    });
+  }
   function updateProviderDisplay() {
     const p = PROVIDERS[selectedProvider] || PROVIDERS.openai;
     sPickerLabel.textContent = `${p.label} (${p.model})`;
-    sHelpEl.title = p.helpText;
+    sHelpTip.textContent = p.helpText;
+    updateProviderDots();
   }
   updateProviderDisplay();
   sPickerEl.addEventListener("click", () => {
@@ -1289,6 +1303,24 @@ function createOverlay2(options) {
     selectedProvider = providerOrder[(idx + 1) % providerOrder.length];
     updateProviderDisplay();
   });
+  sHelpEl.addEventListener("click", (e) => {
+    e.stopPropagation();
+    sHelpTip.classList.toggle("show");
+  });
+  sPresetsHelp.addEventListener("click", (e) => {
+    e.stopPropagation();
+    sPresetsHelp.querySelector(".gf-help-tip").classList.toggle("show");
+  });
+  shadow.addEventListener("click", () => {
+    sHelpTip.classList.remove("show");
+    sPresetsHelp.querySelector(".gf-help-tip")?.classList.remove("show");
+  });
+  sPickerEl.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      sPickerEl.click();
+    }
+  });
   sUseAIToggle.addEventListener("change", () => {
     sAISection.style.display = sUseAIToggle.checked ? "flex" : "none";
   });
@@ -1305,18 +1337,27 @@ function createOverlay2(options) {
     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";
+    const bg = isDark ? "#1a1a1a" : "#ffffff";
+    const bgInput = isDark ? "rgba(255,255,255,0.06)" : "#f4f4f5";
+    const border = isDark ? "rgba(255,255,255,0.07)" : "#d4d4d8";
+    const text = isDark ? "#fff" : "#18181b";
+    const textMuted = isDark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
+    const textDim = isDark ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.35)";
+    const btnHoverBg = isDark ? "#27272a" : "#e4e4e7";
+    const btnActiveBg = isDark ? "#3f3f46" : "#d4d4d8";
+    const presetItemBg = isDark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.04)";
+    const presetItemText = isDark ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.7)";
+    const presetBtnColor = isDark ? "rgba(255,255,255,0.25)" : "rgba(0,0,0,0.25)";
+    const helpBg = isDark ? "#3f3f46" : "#d4d4d8";
+    const helpColor = isDark ? "#a1a1aa" : "#52525b";
+    const pickerColor = isDark ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.75)";
     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.style.boxShadow = isDark ? "0 4px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08)" : "0 4px 20px 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-pop-header").forEach((el) => el.style.borderBottomColor = border);
       pop.querySelectorAll(".gf-label").forEach((el) => el.style.color = textMuted);
+      pop.querySelectorAll(".gf-note").forEach((el) => el.style.color = textMuted);
       pop.querySelectorAll(".gf-input").forEach((el) => {
         el.style.background = bgInput;
         el.style.borderColor = border;
@@ -1330,31 +1371,34 @@ function createOverlay2(options) {
         el.style.background = isDark ? "#27272a" : "#f4f4f5";
         el.style.borderColor = border;
       });
+      pop.querySelectorAll(".gf-help").forEach((el) => {
+        el.style.background = helpBg;
+        el.style.color = helpColor;
+      });
+      pop.querySelectorAll(".gf-picker-value").forEach((el) => el.style.color = pickerColor);
+      pop.querySelectorAll(".gf-theme-btn").forEach((el) => el.style.color = textDim);
     }
     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.style.boxShadow = isDark ? "0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06)" : "0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.06)";
     bar.querySelectorAll(".gf-bar-btn").forEach((btn) => {
       btn.style.color = textMuted;
+      const isActive = btn.classList.contains("active");
+      btn.style.background = isActive ? btnActiveBg : "transparent";
       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;
-        }
+        const stillActive = btn.classList.contains("active");
+        btn.style.background = stillActive ? btnActiveBg : "transparent";
+        btn.style.color = stillActive ? text : 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)";
+    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 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.06)";
   }
-  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";
@@ -1371,6 +1415,7 @@ function createOverlay2(options) {
         <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 class="gf-cycle-dots" id="gf-p-preset-dots"></div>
         </div>
       </div>
       <div class="gf-field" id="gf-p-prompt-wrap">
@@ -1389,6 +1434,7 @@ function createOverlay2(options) {
   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 pPresetDots = promptPop.querySelector("#gf-p-preset-dots");
   const pPromptWrap = promptPop.querySelector("#gf-p-prompt-wrap");
   const pPromptEl = promptPop.querySelector("#gf-p-prompt");
   const pFillBtn = promptPop.querySelector("#gf-p-fill");
@@ -1405,10 +1451,18 @@ function createOverlay2(options) {
     pPresetRow.style.display = "flex";
     const active = activePresetId ? presets.find((p) => p.id === activePresetId) : null;
     pPresetLabel.textContent = active ? active.name : "None";
+    const totalOptions = presets.length + 1;
+    const activeIdx = activePresetId ? presets.findIndex((p) => p.id === activePresetId) + 1 : 0;
+    pPresetDots.innerHTML = "";
+    for (let i = 0; i < totalOptions; i++) {
+      const dot = document.createElement("span");
+      dot.className = `gf-cycle-dot${i === activeIdx ? " active" : ""}`;
+      pPresetDots.appendChild(dot);
+    }
     pPromptWrap.style.display = active ? "none" : "flex";
   }
   function persistActivePreset() {
-    const s = loadSettings();
+    const s = loadSettings(aiConfig?.provider || "openai");
     s.activePresetId = activePresetId;
     saveSettings(s);
   }
@@ -1428,6 +1482,10 @@ function createOverlay2(options) {
     updateFillPresetUI();
   });
   updateFillPresetUI();
+  if (currentTheme === "light") applyTheme("light");
+  sThemeBtn.addEventListener("click", () => {
+    applyTheme(currentTheme === "dark" ? "light" : "dark");
+  });
   function setStatus(text, type) {
     pStatusEl.textContent = text;
     pStatusEl.className = `gf-status ${type}`;
@@ -1463,7 +1521,7 @@ function createOverlay2(options) {
     if (name === "settings") {
       settingsPop.classList.add("open");
       btnSettings.classList.add("active");
-      sKeyInput.focus();
+      (aiConfig && sUseAIToggle.checked ? sPickerEl : sSaveBtn).focus();
     } else if (name === "prompt") {
       promptPop.classList.add("open");
       btnFill.classList.add("active");
@@ -1601,6 +1659,7 @@ function createOverlay2(options) {
         badge.textContent = String(fields.length);
         badge.style.display = "flex";
         btnFill.disabled = false;
+        openPopover("prompt");
       },
       () => {
         state.selecting = false;
@@ -1660,7 +1719,16 @@ function createOverlay2(options) {
       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 }));
+        try {
+          localStorage.setItem(
+            FAB_POS_KEY,
+            JSON.stringify({
+              x: fab.getBoundingClientRect().left,
+              y: fab.getBoundingClientRect().top
+            })
+          );
+        } catch {
+        }
       }
     };
     document.addEventListener("mousemove", onMove);
@@ -1683,44 +1751,63 @@ function createOverlay2(options) {
   });
   const sPresetList = settingsPop.querySelector("#gf-s-preset-list");
   const sPresetForm = settingsPop.querySelector("#gf-s-preset-form");
+  const sPresetFormTitle = settingsPop.querySelector("#gf-s-preset-form-title");
   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;
+  const PILL_COLORS = [
+    { bg: "rgba(99,102,241,0.15)", border: "rgba(99,102,241,0.3)", text: "#a5b4fc" },
+    { bg: "rgba(52,211,153,0.12)", border: "rgba(52,211,153,0.25)", text: "#6ee7b7" },
+    { bg: "rgba(251,146,60,0.12)", border: "rgba(251,146,60,0.25)", text: "#fdba74" },
+    { bg: "rgba(244,114,182,0.12)", border: "rgba(244,114,182,0.25)", text: "#f9a8d4" },
+    { bg: "rgba(56,189,248,0.12)", border: "rgba(56,189,248,0.25)", text: "#7dd3fc" },
+    { bg: "rgba(163,130,255,0.12)", border: "rgba(163,130,255,0.25)", text: "#c4b5fd" },
+    { bg: "rgba(250,204,21,0.12)", border: "rgba(250,204,21,0.25)", text: "#fde68a" }
+  ];
   function renderPresetList() {
     sPresetList.innerHTML = "";
-    presets.forEach((p) => {
-      const item = document.createElement("div");
-      item.className = "gf-preset-item";
+    presets.forEach((p, i) => {
+      const c = PILL_COLORS[i % PILL_COLORS.length];
+      const pill = document.createElement("span");
+      pill.className = "gf-preset-pill";
+      pill.style.background = c.bg;
+      pill.style.borderColor = c.border;
+      pill.style.color = c.text;
       const name = document.createElement("span");
-      name.className = "gf-preset-item-name";
+      name.className = "gf-pp-name";
       name.textContent = p.name;
-      name.style.cursor = "pointer";
+      name.title = "Click to edit";
       name.addEventListener("click", () => {
         editingPresetId = p.id;
+        sPresetFormTitle.textContent = "Edit Preset";
         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);
+      const x = document.createElement("button");
+      x.className = "gf-pp-x";
+      x.innerHTML = "&times;";
+      x.style.color = c.text;
+      x.title = "Delete";
+      x.addEventListener("click", (e) => {
+        e.stopPropagation();
+        presets = presets.filter((v) => v.id !== p.id);
         if (activePresetId === p.id) activePresetId = null;
         renderPresetList();
         updateFillPresetUI();
       });
-      item.append(name, del);
-      sPresetList.appendChild(item);
+      pill.append(name, x);
+      sPresetList.appendChild(pill);
     });
   }
   renderPresetList();
   sPresetAddBtn.addEventListener("click", () => {
     editingPresetId = null;
+    sPresetFormTitle.textContent = "New Preset";
     sPresetForm.style.display = "flex";
     sPresetName.value = "";
     sPresetPrompt.value = "";
@@ -1756,11 +1843,11 @@ function createOverlay2(options) {
       activePresetId
     };
     saveSettings(s);
-    dotWarn.style.display = s.useAI && !s.apiKey ? "block" : "none";
+    dotWarn.style.display = "none";
     openPopover(null);
   });
   async function doFill() {
-    const settings = loadSettings();
+    const settings = loadSettings(aiConfig?.provider || "openai");
     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");
@@ -1777,14 +1864,47 @@ function createOverlay2(options) {
           pFillBtn.innerHTML = `${ICONS.sparkles} Fill`;
           return;
         }
-        const blockContext = state.selectedBlock ? extractBlockContext(state.selectedBlock) : "";
-        fillData = await generateFillData(
-          state.fields,
-          promptText,
-          settings,
-          options.systemPrompt,
-          blockContext
-        );
+        const provider = PROVIDERS[settings.provider] || PROVIDERS.openai;
+        let blockContext = `Page: ${document.title}`;
+        if (state.selectedBlock) {
+          state.selectedBlock.querySelectorAll("h1,h2,h3,h4,label,legend").forEach((el) => {
+            const t = el.textContent?.trim();
+            if (t && t.length < 80) blockContext += `
+${t}`;
+          });
+        }
+        const fieldDesc = describeFields(state.fields);
+        let userContent = `Form fields:
+${fieldDesc}`;
+        if (blockContext) userContent += `
+
+Page context:
+${blockContext}`;
+        if (promptText) userContent += `
+
+User instructions: ${promptText}`;
+        else userContent += `
+
+No specific instructions \u2014 generate realistic, contextually appropriate data for all fields.`;
+        const resp = await fetch(`${provider.baseURL}/chat/completions`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", Authorization: `Bearer ${settings.apiKey}` },
+          body: JSON.stringify({
+            model: provider.model,
+            messages: [
+              { role: "system", content: `You are a form-filling assistant. Return ONLY a JSON object with a "fields" array of objects, each with "index" and "value" keys. Fill EVERY field. For select fields pick from listed options EXACTLY. For checkboxes add "checked" boolean. Generate coherent data. No markdown code blocks.` },
+              { role: "user", content: userContent }
+            ],
+            temperature: 0.7,
+            ...settings.provider === "openai" ? { response_format: { type: "json_object" } } : {}
+          })
+        });
+        if (!resp.ok) throw new Error(await resp.text());
+        const data = await resp.json();
+        const content = data.choices?.[0]?.message?.content || "";
+        const jsonMatch = content.match(/```(?:json)?\s*([\s\S]*?)```/) || [null, content];
+        const parsed = JSON.parse(jsonMatch[1].trim());
+        fillData = Array.isArray(parsed) ? parsed : parsed.fields || parsed.data || parsed.items || [];
       } else {
         fillData = generateFakeData(state.fields);
       }
@@ -1794,8 +1914,38 @@ function createOverlay2(options) {
       } else {
         setStatus(`Filled ${filled} field${filled === 1 ? "" : "s"}`, "success");
       }
+      if (state.selectedBlock) {
+        const el = state.selectedBlock;
+        el.style.transition = "box-shadow 0.8s ease";
+        el.style.animation = "none";
+        const rect = el.getBoundingClientRect();
+        const ripple = document.createElement("div");
+        Object.assign(ripple.style, {
+          position: "fixed",
+          top: `${rect.top}px`,
+          left: `${rect.left}px`,
+          width: `${rect.width}px`,
+          height: `${rect.height}px`,
+          borderRadius: "6px",
+          pointerEvents: "none",
+          zIndex: "2147483644",
+          border: "2px solid rgba(52,211,153,0.6)",
+          boxShadow: "0 0 0 0 rgba(52,211,153,0.4), inset 0 0 20px rgba(52,211,153,0.08)",
+          animation: "none"
+        });
+        document.body.appendChild(ripple);
+        requestAnimationFrame(() => {
+          ripple.style.transition = "box-shadow 0.8s ease, border-color 0.8s ease, opacity 0.8s ease";
+          ripple.style.boxShadow = "0 0 0 8px rgba(52,211,153,0), inset 0 0 0 rgba(52,211,153,0)";
+          ripple.style.borderColor = "rgba(52,211,153,0)";
+          ripple.style.opacity = "0";
+        });
+        setTimeout(() => {
+          ripple.remove();
+        }, 1e3);
+      }
       removeBlockHighlight();
-      setTimeout(() => openPopover(null), 600);
+      setTimeout(() => openPopover(null), 800);
     } catch (err) {
       setStatus(cleanError(err), "error");
     } finally {
@@ -1833,6 +1983,12 @@ function createOverlay2(options) {
     }
   }
   document.addEventListener("keydown", handleShortcut);
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && currentPopover) {
+      e.preventDefault();
+      openPopover(null);
+    }
+  });
   function destroy() {
     cleanupSelector?.();
     removeBlockHighlight();
@@ -1842,6 +1998,94 @@ function createOverlay2(options) {
   return { state, destroy };
 }
 
+// src/ai.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function toFieldFillData(value) {
+  if (!isRecord(value)) {
+    throw new Error("AI response item is not an object");
+  }
+  const index = value.index;
+  const rawValue = value.value;
+  const checked = value.checked;
+  if (typeof index !== "number" || !Number.isInteger(index)) {
+    throw new Error("AI response item is missing a numeric index");
+  }
+  if (typeof rawValue !== "string") {
+    throw new Error("AI response item is missing a string value");
+  }
+  return {
+    index,
+    value: rawValue,
+    checked: typeof checked === "boolean" ? checked : void 0
+  };
+}
+function toPromptFields(fields) {
+  return fields.map((field, index) => ({
+    index,
+    type: field.type,
+    name: field.name,
+    label: field.label,
+    options: field.options,
+    required: field.required,
+    min: field.min,
+    max: field.max,
+    pattern: field.pattern
+  }));
+}
+function parseFillDataPayload(payload) {
+  if (typeof payload === "string") {
+    const jsonMatch = payload.match(/```(?:json)?\s*([\s\S]*?)```/) || [null, payload];
+    return parseFillDataPayload(JSON.parse(jsonMatch[1].trim()));
+  }
+  if (Array.isArray(payload)) {
+    return payload.map(toFieldFillData);
+  }
+  if (isRecord(payload)) {
+    if (Array.isArray(payload.choices)) {
+      const content = payload.choices[0]?.message;
+      if (typeof content?.content === "string") {
+        return parseFillDataPayload(content.content);
+      }
+    }
+    const candidate = payload.fields ?? payload.data ?? payload.items ?? payload.result;
+    if (Array.isArray(candidate)) {
+      return candidate.map(toFieldFillData);
+    }
+  }
+  throw new Error("AI response is not an array of field fills");
+}
+function createRequest(fields, userPrompt, provider, systemPrompt) {
+  return {
+    provider,
+    prompt: userPrompt,
+    systemPrompt,
+    fields: toPromptFields(fields)
+  };
+}
+async function generateFillData(fields, userPrompt, provider, transport, systemPrompt) {
+  const request = createRequest(fields, userPrompt, provider, systemPrompt);
+  if (transport.requestFillData) {
+    return transport.requestFillData(request);
+  }
+  const endpoint = transport.endpoint ?? "/api/ghostfill";
+  const response = await fetch(endpoint, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(request)
+  });
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(`AI API error (${response.status}): ${error}`);
+  }
+  const contentType = response.headers.get("content-type") || "";
+  const payload = contentType.includes("application/json") ? await response.json() : await response.text();
+  return parseFillDataPayload(payload);
+}
+
 // src/index.ts
 var instance = null;
 function init(options = {}) {
@@ -1862,11 +2106,18 @@ async function fill(params) {
   if (fields.length === 0) {
     return { filled: 0, errors: ["No fillable fields found in container"] };
   }
-  const fillData = generateFakeData(fields);
+  const fillData = params.ai ? await generateFillData(
+    fields,
+    params.prompt || "",
+    params.provider || params.ai.provider || "openai",
+    params.ai,
+    params.systemPrompt
+  ) : generateFakeData(fields);
   return fillFields(fields, fillData);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  PROVIDERS,
   fill,
   init
 });