# Phase 3: Widget Edit Overlay

**Status:** ⬜ Not Started
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Add hover overlays to every widget when in edit mode, showing edit/delete/drag controls without obscuring the widget content.

## Tasks

- [ ] Create `src/lib/components/widget/WidgetEditOverlay.svelte`
- [ ] Overlay appears on hover over a widget in edit mode
- [ ] Controls: pencil icon (top-right), trash icon (top-right, secondary), drag handle (top-left)
- [ ] Semi-transparent backdrop on hover (e.g., bg-black/5)
- [ ] Pencil click emits `onEdit(widgetId)` event
- [ ] Trash click shows inline confirmation ("Delete?" with Yes/No), then emits `onDelete(widgetId)`
- [ ] Drag handle integrated with svelte-dnd-action (prepared for Phase 7)
- [ ] Wrap each widget in WidgetEditOverlay in `WidgetGrid.svelte` when edit mode is active
- [ ] Overlay transitions: fade in on hover, fade out on leave
- [ ] Overlay does NOT block widget interaction when not hovered (pointer-events)

## Files to Modify/Create
- `src/lib/components/widget/WidgetEditOverlay.svelte` — new component
- `src/lib/components/widget/WidgetGrid.svelte` — wrap widgets conditionally

## Acceptance Criteria
- Hovering over a widget in edit mode shows the overlay
- Overlay has pencil, trash, and drag handle controls
- Controls are clickable and emit correct events
- Overlay does not appear when NOT in edit mode
- Widget content remains visible through the overlay

## Notes
- Keep overlay minimal — don't overwhelm the widget visually
- Trash confirmation should be inline (not a browser confirm dialog)
- The actual edit panel opening (pencil) is Phase 4
- The actual delete logic is Phase 8

## Review Checklist
- [ ] All tasks completed
- [ ] Code follows project conventions
- [ ] No unintended side effects
- [ ] Build passes
- [ ] Tests pass (new + existing)

## Handoff to Next Phase
<!-- Filled in after completing this phase -->