WIP: Add edit mode — inline copy editing with auto-save [DO NOT MERGE]

[welfvh]

Summary

Adds an edit mode to the Spikes widget — click any text element to edit it inline. Edits auto-save to localStorage and are accessible via window.Spikes.getEdits() as structured JSON.

This makes Spikes useful not just for annotating feedback, but for directly editing copy — the most natural way to suggest text changes on a page.

• New file: widget/edit.js (~370 lines, vanilla JS, zero deps)
• Minimal changes to widget/spikes.js (config, init, mode coordination)
• Test page: widget/test-edit-mode.html

How it works

Add data-edit="true" to the script tag:

<script src="spikes.js" data-edit="true"></script>

A ✎ button appears next to the / button. Click it (or call Spikes.toggleEditMode()) to make all text elements contenteditable. Edits auto-save to localStorage on every keystroke.

Visual feedback:

• Gold left-border on hover/focus (matches Spikes accent color)
• Green left-border on edited elements
• "N edits" pill shows change count

API:

• Spikes.getEdits() — structured JSON array of {selector, original, updated, tag}
• Spikes.clearEdits() — reset all changes + clear localStorage
• Spikes.isEditMode() / Spikes.toggleEditMode()

Mode coordination:

• Edit mode and spike mode are mutually exclusive — entering one exits the other
• The / button still works normally for feedback while in edit mode (switches to spike mode)

Use case

We built this for editing landing page copy with Claude Code. The workflow:

1. spikes serve with data-edit="true"
2. Edit copy inline in the browser
3. Spikes.getEdits() → paste JSON into AI agent → changes applied to source

Test plan

• Open widget/test-edit-mode.html in browser
• Verify ✎ button appears next to /
• Click ✎ → text elements become editable (gold border on hover)
• Edit text → green border appears, "N edits" pill updates
• Reload page → edits restored from localStorage
• Spikes.getEdits() returns correct change array
• Spikes.clearEdits() reverts all changes
• Click / while in edit mode → exits edit, enters spike mode
• Click ✎ while in spike mode → exits spike, enters edit mode

🤖 Generated with Claude Code