Elements: Confirm before overwriting Element files

[samohovets]

Summary

• return structured Element source conflicts from the Studio server
• prompt before replacing local .element.tsx changes, with existing and incoming source previews
• apply overwrite confirmation across Element installation entry points and restore overwritten source through undo
• cover creation, reuse, conflict cancellation, overwrite, and undo behavior with server tests

Verification

• bun run build
• bun run stylecheck
• bun test packages/studio-server/src/test/insert-element.test.ts
• manually verified install, cancel, overwrite, source inspection, and undo through the live docs and Studio using Playwriter

Closes #9785

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview, Comment	Jul 28, 2026 9:35am
remotion	Ready	Preview, Comment	Jul 28, 2026 9:35am

[pullfrog]

✅ No new issues found.

Reviewed changes — returns a structured file-conflict response from the insert-element API when an existing .element.tsx file has different content, then prompts the user with side-by-side source previews before overwriting.

• insertElementHandler returns file-conflict instead of throwing — when an element file exists with different content and overwriteExisting is false, the handler returns a structured conflict payload with existingSource and incomingSource instead of throwing an Error.
• InsertElementResponse discriminated union — the response type now has three branches: success: true, file-conflict (with InsertElementFileConflict), and error (with reason and stack). InsertElementRequest gains overwriteExisting: boolean.
• insertElement client retries with overwriteExisting: true — the client calls the API once without overwrite; on conflict, it shows the confirmation dialog, and on approval retries with the overwrite flag set.
• useElementOverwriteConfirmation hook — new confirmation dialog showing the conflicting file path, a warning, and expandable <details> blocks with existing and incoming source code previews.
• Wired through Canvas.tsx and use-timeline-asset-drop.ts — both Element drop entry points pass the confirmation callback through handleDrop into insertElement.
• Undo stack captures original source — when overwriting, the undo snapshot stores the existing file content as oldContents so undo restores the prior version (previously null, which would delete on undo — not what you want after overwrite).
• Server tests — four new test cases cover creation, identical-file reuse, structured conflict response (verifying no mutation), and overwrite-with-undo restore of both files.

  ^{｜ View workflow run ｜ Using DeepSeek Pro (free via Pullfrog for OSS) (Claude Opus not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏}