Drag: Add overlay, mod keys, fixes (phase 3)

- Canvas-rendered native drag image with file names, emoji icons, middle-truncation, fading edges, and count badge
- In-app DOM overlay with cached macOS icons, action line("Copy to Documents"), and "can't drop here" feedback
- Alt/Option modifier tracking: hold Alt to switch copy → move
- Self-drag fingerprint for re-entry detection (fixes same-pane drop bug when cursor leaves window and re-enters)
- Overlay file info uses icon cache for self-drags, extension-based lookup for external drags

Author: vdavid

apps/desktop/coverage-allowlist.json

@@ -8,6 +8,14 @@
         "app-status-store.ts": { "reason": "Depends on Tauri APIs" },
         "benchmark.ts": { "reason": "Dev tooling, not critical path" },
         "file-explorer/drag-drop.ts": { "reason": "Needs integration testing with Tauri" },
+        "file-explorer/drag-image-renderer.ts": { "reason": "Canvas API dependent, pure logic tested separately" },
+        "file-explorer/DragOverlay.svelte": { "reason": "UI overlay component, state tested in drag-overlay tests" },
+        "file-explorer/drag-overlay.svelte.ts": {
+            "reason": "Reactive Svelte state, pure logic tested in drag-overlay tests"
+        },
+        "file-explorer/modifier-key-tracker.svelte.ts": {
+            "reason": "Document event listeners, reactive Svelte state"
+        },
         "file-explorer/views/BriefList.svelte": {
             "reason": "Logic tested in brief-list-utils.ts, component mounting heavy"
         },

apps/desktop/src/lib/file-explorer/DragOverlay.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+    import {
+        getOverlayVisible,
+        getOverlayX,
+        getOverlayY,
+        getOverlayFileInfos,
+        getOverlayTotalCount,
+        getOverlayTargetName,
+        getOverlayOperation,
+        getOverlayCanDrop,
+        buildOverlayNameLines,
+        formatActionLine,
+    } from './drag-overlay.svelte'
+
+    const cursorOffset = 16
+
+    const visible = $derived(getOverlayVisible())
+    const x = $derived(getOverlayX())
+    const y = $derived(getOverlayY())
+    const fileInfos = $derived(getOverlayFileInfos())
+    const totalCount = $derived(getOverlayTotalCount())
+    const targetName = $derived(getOverlayTargetName())
+    const operation = $derived(getOverlayOperation())
+    const canDrop = $derived(getOverlayCanDrop())
+
+    const nameLines = $derived(buildOverlayNameLines(fileInfos, totalCount))
+    const actionLine = $derived(formatActionLine(operation, targetName, canDrop))
+</script>
+
+{#if visible}
+    <div
+        class="drag-overlay"
+        class:cannot-drop={!canDrop}
+        style="left: {String(x + cursorOffset)}px; top: {String(y + cursorOffset)}px;"
+        aria-hidden="true"
+    >
+        <div class="name-list">
+            {#each nameLines as line, i (i)}
+                <div class="name-line" class:is-summary={line.isSummary}>
+                    {#if !line.isSummary}
+                        {#if line.iconUrl}
+                            <img class="name-icon" src={line.iconUrl} alt="" width="12" height="12" />
+                        {:else}
+                            <span class="name-icon-emoji">{line.isDirectory ? '\uD83D\uDCC1' : '\uD83D\uDCC4'}</span>
+                        {/if}
+                    {/if}
+                    <span class="name-text">{line.text}</span>
+                </div>
+            {/each}
+        </div>
+        <div class="action-line" class:is-warning={!canDrop}>
+            {actionLine}
+        </div>
+    </div>
+{/if}
+
+<style>
+    .drag-overlay {
+        position: fixed;
+        z-index: 10000;
+        pointer-events: none;
+        max-width: 320px;
+        padding: 10px 14px;
+        border-radius: 8px;
+        background: rgba(30, 30, 30, 0.9);
+        color: rgba(255, 255, 255, 0.92);
+        font-family: var(--font-system), sans-serif;
+        font-size: var(--font-size-xs);
+        line-height: 1.5;
+        backdrop-filter: blur(8px);
+        /* Fade edges via CSS mask-image */
+        mask-image: linear-gradient(to bottom, transparent 0%, black 8px, black calc(100% - 8px), transparent 100%);
+        /* Fade transition */
+        opacity: 1;
+        transition: opacity 0.15s ease-out;
+    }
+
+    .drag-overlay.cannot-drop {
+        opacity: 0.5;
+    }
+
+    .name-list {
+        max-height: 340px;
+        overflow: hidden;
+    }
+
+    .name-line {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: 1px 0;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    .name-icon {
+        width: 12px;
+        height: 12px;
+        object-fit: contain;
+        flex-shrink: 0;
+    }
+
+    .name-icon-emoji {
+        font-size: 10px;
+        width: 12px;
+        text-align: center;
+        flex-shrink: 0;
+    }
+
+    .name-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .is-summary {
+        color: rgba(255, 255, 255, 0.55);
+        font-style: italic;
+    }
+
+    .action-line {
+        margin-top: 6px;
+        padding-top: 6px;
+        border-top: 1px solid rgba(255, 255, 255, 0.15);
+        font-weight: 500;
+        color: var(--color-accent);
+    }
+
+    .action-line.is-warning {
+        color: rgba(255, 255, 255, 0.4);
+    }
+</style>