ghostfill 0.1.1 → 0.1.3

package/README.md

@@ -1,6 +1,6 @@
 # GhostFill
 
-Dev tool that fills form fields with fake data. Select a block, click fill — done.
+Dev tool that fills form fields with sample data. Select a block, click fill — done.
 
 Works with any framework (React, Vue, Angular, vanilla). Detects inputs, textareas, selects, checkboxes, radios, date pickers, and custom dropdowns (Headless UI, Radix).
 
@@ -50,7 +50,7 @@ await fill({ container: document.querySelector("form") });
 1. A ghost icon appears on the page (starts minimized)
 2. Click it to enter selection mode — hover and click a form area
 3. Click the sparkles button to fill all detected fields
-4. By default, generates random fake data locally (no API needed)
+4. By default, generates random sample data locally (no API needed)
 5. Optionally enable AI mode in settings for context-aware data generation
 
 ## Settings
@@ -66,7 +66,7 @@ Click the gear icon to configure:
 
 ## Features
 
-- **Zero config** — works out of the box with random fake data
+- **Zero config** — works out of the box with random sample data
 - **Shadow DOM** — styles don't leak into your app
 - **Framework-aware** — uses native value setters so React/Vue/Angular pick up changes
 - **Smart detection** — labels from `<label>`, `aria-label`, placeholder, preceding siblings

package/dist/index.js

@@ -1012,6 +1012,13 @@ var CSS2 = `
     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-actions { display: flex; align-items: center; gap: 2px; }
+  .gf-preset-edit {
+    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;
+    display: flex; align-items: center;
+  }
+  .gf-preset-edit:hover { color: #6366f1; }
   .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;
@@ -1705,6 +1712,19 @@ function createOverlay2(options) {
         sPresetPrompt.value = p.prompt;
         sPresetName.focus();
       });
+      const actions = document.createElement("div");
+      actions.className = "gf-preset-actions";
+      const edit = document.createElement("button");
+      edit.className = "gf-preset-edit";
+      edit.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.85 0 114 4L7.5 20.5 2 22l1.5-5.5z"/></svg>';
+      edit.title = "Edit preset";
+      edit.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;";
@@ -1714,7 +1734,8 @@ function createOverlay2(options) {
         renderPresetList();
         updateFillPresetUI();
       });
-      item.append(name, del);
+      actions.append(edit, del);
+      item.append(name, actions);
       sPresetList.appendChild(item);
     });
   }