fix(studio): replacing an image's fill on an img changes its picture

[miguel-heygen]

Replacing an image through Fill → Image previously wrote a CSS background behind the existing opaque picture. The shared image field now uses the existing HTML attribute writer to replace an img's src, shows its current source, and preserves that source when cleared. Other elements retain background-image replacement and clearing. Both classic and flat inspectors use the fix; assets selected in nested compositions keep source-relative paths.

Fixes #5167.

Validation: the new control regressions fail on main because replacement leaves src unchanged. The focused 16-test suite passes three consecutive runs, the existing flat style suite passes 37 tests, and Studio typecheck passes. Real Studio fixture proof reproduces the old red image after replacement on main and shows the replacement blue image after the fix, including reload, a fresh document loaded from persisted HTML, and the producer-rendered frame. Raw-percent filenames and inline SVG sources are covered by regressions that fail before the path-decoding fix.

Before

Studio on main after replacement still shows the old red image.

After

The settled Studio preview and timeline both show the blue replacement, and Fill shows its current source. The producer frame renders the same replacement from saved HTML.

[github-actions]

Edit accuracy: accurate 2059 (base branch 2059), smooth 1609 of those

The gate passes.
Smoothness is reported in the artifact, not gated. A case fails only if it fails 2 of 3 runs.

Quarantined, measured but not gated (0)

[jrusso1020]

Approving. Replacing an <img> through Fill now changes its picture instead of writing a background behind it.

What I checked

• propertyPanelFill.tsx: for an img, every write (upload, project asset, external URL) goes through commitImage, which writes src with the existing attribute writer. Other elements still get background-image, unchanged. Both inspectors pass the writer through, and both now show Image mode for an img.
• The write path is the same one the loop and link controls already use (handleDomHtmlAttributeCommit → html-attribute op). src is on the allow list in htmlAttrSafety.ts, and the commit reloads the preview after it saves.
• In a nested composition, src is written relative to the source file (../assets/new.png). That matches how a timeline asset drop writes src (resolveTimelineAssetSrc), and the runtime rewrites sub-composition paths against the file's URL. So the saved file and the render agree.
• The decodeURIComponent guard fixes a real crash: a literal % in a source (100%.png, an inline SVG with width="100%") used to throw while rendering the panel.
• Locally, propertyPanelImageFill.test.tsx and propertyPanelFlatStyleSections.test.tsx pass, 53/53.

Nits (optional)

1. If an img has a srcset, the browser keeps showing the srcset choice after src changes, so the picture still won't change. That's rare in compositions. A one-line fix is to clear srcset (and sizes) when replacing.
2. In a nested composition, the preview gets the raw relative path before it reloads, so it resolves against the main document and shows a broken image for a moment. The reload fixes it. I'm only mentioning it in case anyone sees the flash.
3. An img that already has a stray background-image from the old behaviour can't have it cleared from Fill any more, because clearing now leaves src alone. It's hidden behind the picture, so it's harmless.

Verdict: APPROVE
Reasoning: The fix uses the existing attribute writer and the existing source-relative path rule, the img and non-img paths are both tested in both inspectors, and nothing here blocks.

— Rames