@hyperframes/studio 0.8.142 → 0.8.143

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.142",
+  "version": "0.8.143",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/player": "0.8.142",
-    "@hyperframes/studio-server": "0.8.142",
-    "@hyperframes/core": "0.8.142",
-    "@hyperframes/shader-transitions": "0.8.142",
-    "@hyperframes/sdk": "0.8.142",
-    "@hyperframes/parsers": "0.8.142"
+    "@hyperframes/core": "0.8.143",
+    "@hyperframes/player": "0.8.143",
+    "@hyperframes/sdk": "0.8.143",
+    "@hyperframes/studio-server": "0.8.143",
+    "@hyperframes/parsers": "0.8.143",
+    "@hyperframes/shader-transitions": "0.8.143"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -82,7 +82,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.142"
+    "@hyperframes/producer": "0.8.143"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/MediaPreview.tsx

@@ -1,6 +1,7 @@
 import { buildProjectApiPath } from "../utils/projectRouting";
 import { useState } from "react";
 import { IMAGE_EXT, VIDEO_EXT, AUDIO_EXT } from "../utils/mediaTypes";
+import { encodeUrlPath } from "@hyperframes/parsers";
 
 function MediaErrorPanel({ name, filePath }: { name: string; filePath: string }) {
   return (
@@ -29,7 +30,7 @@ function MediaErrorPanel({ name, filePath }: { name: string; filePath: string })
 }
 
 export function MediaPreview({ projectId, filePath }: { projectId: string; filePath: string }) {
-  const serveUrl = buildProjectApiPath(projectId, `/preview/${filePath}`);
+  const serveUrl = buildProjectApiPath(projectId, `/preview/${encodeUrlPath(filePath)}`);
   const name = filePath.split("/").pop() ?? filePath;
   // Keyed by path so switching to another file clears a previous failure.
   const [failedPath, setFailedPath] = useState<string | null>(null);

package/src/components/editor/mediaAudioEdits.test.ts

@@ -239,6 +239,18 @@ describe("buildKeepSoundCutoutEdit", () => {
     expect(doc.getElementById("clip")?.getAttribute("src")).toBe("assets/cut.webm");
   });
 
+  it("preserves an apostrophe in the authored source of the linked audio", () => {
+    const authored = source.replace('src="assets/talk.mp4"', `src="assets/it's.mp4"`);
+    const edit = buildKeepSoundCutoutEdit({
+      video: liveVideo(),
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    const doc = parse(applyEdit(authored, edit));
+    expect(doc.getElementById("clip-audio")?.getAttribute("src")).toBe("assets/it's.mp4");
+  });
+
   it("takes the first <source> child when the video has no src attribute", () => {
     const withSource = source.replace(
       /<video id="clip"([^>]*?) src="assets\/talk.mp4"([^>]*)><\/video>/,

package/src/components/editor/mediaAudioEdits.ts

@@ -14,7 +14,7 @@ import {
   findTagByTarget,
   applyPatchByTarget,
   readAttributeByTarget,
-  unescapeHtmlAttribute,
+  readTagAttribute,
   type PatchOperation,
   type PatchTarget,
 } from "../../utils/sourcePatcher";
@@ -147,10 +147,10 @@ export function formatAttrs(attrs: Array<[string, string]>): string {
 export function readAuthoredSrc(source: string, target: PatchTarget): string {
   const tag = findTagByTarget(source, target);
   if (!tag) return "";
-  const own = /\bsrc=(["'])([^"']*)\1/.exec(tag.tag);
-  if (own?.[2]) return unescapeHtmlAttribute(own[2]);
-  const firstSource = /^\s*<source\b[^>]*?\bsrc=(["'])([^"']*)\1/i.exec(source.slice(tag.end + 1));
-  return firstSource?.[2] ? unescapeHtmlAttribute(firstSource[2]) : "";
+  const own = readTagAttribute(tag.tag, "src");
+  if (own) return own;
+  const firstSource = /^\s*<source\b[^>]*>/i.exec(source.slice(tag.end + 1));
+  return (firstSource && readTagAttribute(firstSource[0], "src")) || "";
 }
 
 export function insertBeforeTarget(source: string, target: PatchTarget, markup: string): string {

package/src/components/editor/propertyPanelFill.tsx

@@ -20,6 +20,7 @@ import {
 } from "./propertyPanelPrimitives";
 import { ColorField } from "./propertyPanelColor";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
+import { encodeUrlPath } from "@hyperframes/parsers";
 
 /* ------------------------------------------------------------------ */
 /*  Asset path helpers                                                 */
@@ -181,7 +182,7 @@ export function ImageFillField({
             {selectedAsset && (
               <div className="overflow-hidden rounded-xl border border-neutral-800 bg-neutral-900/80">
                 <img
-                  src={buildProjectApiPath(projectId, `/preview/${selectedAsset}`)}
+                  src={buildProjectApiPath(projectId, `/preview/${encodeUrlPath(selectedAsset)}`)}
                   alt={selectedAsset.split("/").pop() ?? selectedAsset}
                   className="h-28 w-full object-contain bg-neutral-950/80"
                 />

package/src/components/editor/propertyPanelFlatMediaSection.tsx

@@ -10,7 +10,6 @@ import {
   formatTimingValue,
   parseNumericValue,
   readClipInPoint,
-  stripQueryAndHash,
 } from "./propertyPanelHelpers";
 import { FlatSelectRow, FlatSlider } from "./propertyPanelFlatPrimitives";
 import { FlatToggle } from "./propertyPanelFlatToggle";
@@ -37,6 +36,7 @@ import {
 import { parseGainInput, parseRateInput, parseSecondsInput } from "./audioInspectorInput";
 import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
 import { commitCutout, commitHasAudioToggle, commitMutedToggle } from "./mediaAudioEdits";
+import { authoredSrcPath } from "../../player/components/thumbnailUtils";
 
 // fallow-ignore-next-line complexity
 export function FlatMediaSection({
@@ -126,12 +126,11 @@ export function FlatMediaSection({
   const [createPlate, setCreatePlate] = useState(false);
   const [quality, setQuality] = useState<"fast" | "balanced" | "best">("balanced");
 
-  const absoluteSrc =
-    projectDir && srcAttr && !srcAttr.startsWith("http") ? `${projectDir}/${srcAttr}` : srcAttr;
   const projectSrc =
     srcAttr && !/^(?:https?:|data:|blob:)/i.test(srcAttr)
-      ? stripQueryAndHash(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr)
+      ? authoredSrcPath(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr)
       : "";
+  const absoluteSrc = projectDir && projectSrc ? `${projectDir}/${projectSrc}` : srcAttr;
   const canRemoveBackground = Boolean(onRemoveBackground && isVisualMedia && projectSrc);
 
   useEffect(() => {

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -11,7 +11,6 @@ import {
   parseNumericValue,
   readClipInPoint,
   RESPONSIVE_GRID,
-  stripQueryAndHash,
 } from "./propertyPanelHelpers";
 import { Section, SegmentedControl, SelectField, SliderControl } from "./propertyPanelPrimitives";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
@@ -26,6 +25,7 @@ import {
 import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
 import { useLinkedSpeedCommit, withLinkedPlaybackRate } from "./linkedSpeedEdits";
 import { commitCutout, commitHasAudioToggle, commitMutedToggle } from "./mediaAudioEdits";
+import { authoredSrcPath } from "../../player/components/thumbnailUtils";
 
 // fallow-ignore-next-line complexity
 export function MediaSection({
@@ -98,12 +98,11 @@ export function MediaSection({
   const [createPlate, setCreatePlate] = useState(false);
   const [quality, setQuality] = useState<"fast" | "balanced" | "best">("balanced");
 
-  const absoluteSrc =
-    projectDir && srcAttr && !srcAttr.startsWith("http") ? `${projectDir}/${srcAttr}` : srcAttr;
   const projectSrc =
     srcAttr && !/^(?:https?:|data:|blob:)/i.test(srcAttr)
-      ? stripQueryAndHash(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr)
+      ? authoredSrcPath(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr)
       : "";
+  const absoluteSrc = projectDir && projectSrc ? `${projectDir}/${projectSrc}` : srcAttr;
   const canRemoveBackground = Boolean(onRemoveBackground && isVisualMedia && projectSrc);
   const panelTitle = isImage ? "Image" : isVideo ? "Video" : "Audio";
 

package/src/components/editor/useColorGradingController.ts

@@ -30,6 +30,7 @@ import {
   type ColorGradingPreviewOptions,
 } from "./useColorGradingPreviews";
 import { studioApiFetch } from "../../utils/studioApiFetch";
+import { authoredSrcPath } from "../../player/components/thumbnailUtils";
 
 export type { ColorGradingPresetPreviews, ColorGradingPreviewOptions };
 
@@ -97,7 +98,7 @@ function resolveProjectAssetPath(
   const sourceDir = sourceFile.includes("/")
     ? sourceFile.slice(0, sourceFile.lastIndexOf("/"))
     : "";
-  const parts = `${sourceDir}/${trimmed}`.split("/");
+  const parts = `${sourceDir}/${authoredSrcPath(trimmed)}`.split("/");
   const normalized: string[] = [];
   for (const part of parts) {
     if (!part || part === ".") continue;

package/src/hooks/useDomEditCommits.ts

@@ -23,6 +23,7 @@ import {
 } from "./useDomEditCommitsHelpers";
 import type { CutoverResult } from "../utils/sdkCutover";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
+import { encodeUrlPath } from "@hyperframes/parsers";
 
 export interface UseDomEditCommitsParams {
   activeCompPath: string | null;
@@ -112,7 +113,7 @@ export function useDomEditCommits({
       return {
         family: fontFamilyFromAssetPath(asset),
         path: asset,
-        url: buildProjectApiPath(projectId, `/preview/${asset}`),
+        url: buildProjectApiPath(projectId, `/preview/${encodeUrlPath(asset)}`),
       };
     },
     [fileTree, projectId, importedFontAssetsRef],

package/src/hooks/useFileManager.ts

@@ -9,6 +9,7 @@ import { useFileTree } from "./useFileTree";
 import { useEditorSave } from "./useEditorSave";
 import { useProjectFileWriter } from "./useProjectFileWriter";
 import { studioApiFetch } from "../utils/studioApiFetch";
+import { encodeUrlPath } from "@hyperframes/parsers";
 
 // ── Types ──
 
@@ -386,7 +387,7 @@ export function useFileManager({
         .map((asset) => ({
           family: fontFamilyFromAssetPath(asset),
           path: asset,
-          url: `/api/projects/${encodeURIComponent(pid)}/preview/${asset}`,
+          url: `/api/projects/${encodeURIComponent(pid)}/preview/${encodeUrlPath(asset)}`,
         }));
       importedFontAssetsRef.current = [
         ...imported,

package/src/hooks/useFileTree.ts

@@ -4,6 +4,7 @@ import { FONT_EXT } from "../utils/mediaTypes";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
 import { captureProjectProvenance } from "../components/feedback/projectProvenance";
 import { studioApiFetch } from "../utils/studioApiFetch";
+import { encodeUrlPath } from "@hyperframes/parsers";
 
 interface UseFileTreeOptions {
   projectId: string | null;
@@ -119,7 +120,7 @@ export function useFileTree({ projectId, projectIdRef }: UseFileTreeOptions) {
         .map((asset) => ({
           family: fontFamilyFromAssetPath(asset),
           path: asset,
-          url: projectId ? buildProjectApiPath(projectId, `/preview/${asset}`) : "",
+          url: projectId ? buildProjectApiPath(projectId, `/preview/${encodeUrlPath(asset)}`) : "",
         })),
     [assets, projectId],
   );

package/src/hooks/useRenderClipContent.ts

@@ -17,7 +17,11 @@ import { AudibleVideoClipContent } from "../player/components/AudibleVideoClipCo
 import { ClipPeakMarks } from "../player/components/ClipPeakMarks";
 import { clipPeaksUrl, clipSourceWindow } from "../player/components/clipPeakMap";
 import { clipHasSound } from "../player/components/clipMenuNormalize";
-import { encodePreviewPath, resolveMediaPreviewUrl } from "../player/components/thumbnailUtils";
+import {
+  authoredSrcPath,
+  encodePreviewPath,
+  resolveMediaPreviewUrl,
+} from "../player/components/thumbnailUtils";
 import { usePlayerStore } from "../player/store/playerStore";
 import { thumbnailRevisionOf } from "../player/store/thumbnailSlice";
 import { effectiveThumbnailMode } from "../player/lib/thumbnailPolicy";
@@ -67,7 +71,11 @@ function renderAudioClip(
   elements: readonly TimelineElement[],
   labelInset?: number,
 ): ReactNode {
-  const audioUrl = resolveMediaPreviewUrl(el.src ?? "", pid, window.location.origin);
+  const audioUrl = resolveMediaPreviewUrl(
+    authoredSrcPath(el.src ?? ""),
+    pid,
+    window.location.origin,
+  );
   const srcRelative = resolvePreviewRelative(audioUrl, pid, window.location.origin);
   // Encode each path segment (spaces, parens, U+202F, unicode) so the URL matches
   // what the assets panel loads — a raw segment 404s. resolvePreviewRelative
@@ -213,7 +221,11 @@ export function useRenderClipContent({
       const htmlPreviewEligible = el.duration > 0 && effectiveTimelineDuration > 0;
 
       if ((el.tag === "video" || el.tag === "img") && el.src) {
-        const mediaSrc = resolveMediaPreviewUrl(el.src, pid, window.location.origin);
+        const mediaSrc = resolveMediaPreviewUrl(
+          authoredSrcPath(el.src),
+          pid,
+          window.location.origin,
+        );
         // Still images can't be decoded by VideoThumbnail's <video> extractor
         // (the error event fires and the shimmer never resolves) — render the
         // image itself as the strip.

package/src/player/components/clipMenuNormalize.ts

@@ -1,6 +1,6 @@
 import { buildProjectApiPath } from "../../utils/projectRouting";
 import { resolvePreviewRelative } from "../../utils/previewRelativePath";
-import { resolveMediaPreviewUrl } from "./thumbnailUtils";
+import { authoredSrcPath, resolveMediaPreviewUrl } from "./thumbnailUtils";
 import type { TimelineElement } from "../store/timelineElement";
 import { parseAutomation, VOLUME_TARGET } from "@hyperframes/core/audio-automation";
 import type { TimelineEditOutcome } from "../../hooks/timelineEditPermission";
@@ -79,7 +79,7 @@ export async function requestNormalizePlan(
 ): Promise<NormalizePlan> {
   const origin = window.location.origin;
   const relative = resolvePreviewRelative(
-    resolveMediaPreviewUrl(el.src ?? "", projectId, origin),
+    resolveMediaPreviewUrl(authoredSrcPath(el.src ?? ""), projectId, origin),
     projectId,
     origin,
   );

package/src/player/components/clipPeakMap.ts

@@ -3,7 +3,7 @@ import { studioApiFetch } from "../../utils/studioApiFetch";
 import { resolvePreviewRelative } from "../../utils/previewRelativePath";
 import type { TimelineElement } from "../store/timelineElement";
 import { clipSourcePeak, isPeakMap, type ClipSourceWindow, type PeakMap } from "./clipPeakRuns";
-import { encodePreviewPath, resolveMediaPreviewUrl } from "./thumbnailUtils";
+import { authoredSrcPath, encodePreviewPath, resolveMediaPreviewUrl } from "./thumbnailUtils";
 
 const peakMapRequests = new Map<string, Promise<PeakMap | null>>();
 
@@ -23,7 +23,7 @@ export function loadPeakMap(url: string): Promise<PeakMap | null> {
 export function clipPeaksUrl(src: string | undefined, projectId: string): string | undefined {
   const origin = window.location.origin;
   const relative = resolvePreviewRelative(
-    resolveMediaPreviewUrl(src ?? "", projectId, origin),
+    resolveMediaPreviewUrl(authoredSrcPath(src ?? ""), projectId, origin),
     projectId,
     origin,
   );

package/src/player/components/thumbnailUtils.test.ts

@@ -1,5 +1,7 @@
 import { describe, expect, it } from "vitest";
+import { buildTimelineAssetInsertHtml } from "../../utils/timelineAssetDrop";
 import {
+  authoredSrcPath,
   computeThumbnailStrip,
   encodePreviewPath,
   resolveMediaPreviewUrl,
@@ -187,3 +189,34 @@ describe("encodePreviewPath", () => {
     expect(encodePreviewPath("assets/music.mp3")).toBe("assets/music.mp3");
   });
 });
+
+describe("authoredSrcPath", () => {
+  const droppedSrc = (assetPath: string) =>
+    /src="([^"]*)"/.exec(
+      buildTimelineAssetInsertHtml({
+        id: "clip",
+        hfId: "hf-clip",
+        assetPath,
+        kind: "video",
+        start: 0,
+        duration: 2,
+        track: 1,
+        zIndex: 1,
+      }),
+    )![1]!;
+
+  it.each([
+    ["assets/My clip.mp4", "/api/projects/p/preview/assets/My%20clip.mp4"],
+    ["assets/café.mp4", "/api/projects/p/preview/assets/caf%C3%A9.mp4"],
+    ["assets/50% off #1?.mp4", "/api/projects/p/preview/assets/50%25%20off%20%231%3F.mp4"],
+  ])("previews a dropped %j at its own file", (assetPath, url) => {
+    expect(resolveMediaPreviewUrl(authoredSrcPath(droppedSrc(assetPath)), "p")).toBe(url);
+  });
+
+  it("drops the query and fragment, and leaves URLs with a scheme alone", () => {
+    expect(authoredSrcPath("assets/a%20b.mp4?v=2#t=1")).toBe("assets/a b.mp4");
+    expect(authoredSrcPath("assets/100%.png")).toBe("assets/100%.png");
+    expect(authoredSrcPath("https://cdn.example/a%20b.mp4")).toBe("https://cdn.example/a%20b.mp4");
+    expect(authoredSrcPath("//cdn.example/a%20b.mp4")).toBe("//cdn.example/a%20b.mp4");
+  });
+});

package/src/player/components/thumbnailUtils.ts

@@ -1,3 +1,4 @@
+import { decodedUrlPath } from "@hyperframes/parsers";
 import { buildProjectApiPath } from "../../utils/projectRouting";
 import { MAX_VISIBLE_THUMBNAIL_FRAMES } from "../lib/timelineViewportBudgets";
 
@@ -94,6 +95,10 @@ export function computeThumbnailStrip(
   return { frameW, frameCount };
 }
 
+export function authoredSrcPath(src: string): string {
+  return /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(src) ? src : decodedUrlPath(src);
+}
+
 /**
  * Percent-encode each segment of a composition-relative media path so filenames
  * containing spaces, parentheses, a U+202F narrow no-break space (the macOS

package/src/player/lib/mediaProbe.test.ts

@@ -89,6 +89,18 @@ describe("media probe registry", () => {
     expect(getDurationFromMetadata).toHaveBeenCalledTimes(2);
   });
 
+  it("probes a dropped clip's URL-spelled src at its own file", async () => {
+    await probeMissingSourceDurations(
+      [{ id: "clip", tag: "video", src: "assets/My%20clip%20%231.mp4" }],
+      "project-a",
+      vi.fn(),
+    );
+
+    expect(requestedSources).toEqual([
+      `${window.location.origin}/api/projects/project-a/preview/assets/My%20clip%20%231.mp4`,
+    ]);
+  });
+
   it("probes same-origin rooted media through the active project preview", async () => {
     const apply = vi.fn();
     await probeMissingSourceDurations(

package/src/player/lib/mediaProbe.ts

@@ -1,4 +1,4 @@
-import { resolveMediaPreviewUrl } from "../components/thumbnailUtils";
+import { authoredSrcPath, resolveMediaPreviewUrl } from "../components/thumbnailUtils";
 import { TIMELINE_VIEWPORT_BUDGETS } from "./timelineViewportBudgets";
 
 export interface MediaProbeResult {
@@ -87,7 +87,9 @@ function getCachedProbe(url: string): MediaProbeResult | undefined {
 }
 
 function resolveProbeSource(src: string, projectId: string | null): string {
-  return projectId ? resolveMediaPreviewUrl(src, projectId, window.location.origin) : src;
+  return projectId
+    ? resolveMediaPreviewUrl(authoredSrcPath(src), projectId, window.location.origin)
+    : src;
 }
 
 function evictMetadataOverflow(): void {

package/src/utils/sourcePatcher.test.ts

@@ -3,11 +3,43 @@ import {
   applyPatch,
   applyPatchByTarget,
   readAttributeByTarget,
+  readTagAttribute,
   readTagSnippetByTarget,
   type PatchOperation,
 } from "./sourcePatcher";
 
 describe("applyPatchByTarget", () => {
+  it("removes all duplicate boolean attributes so unmuting cannot reveal another", () => {
+    expect(
+      applyPatch(`<video id="clip" muted muted></video>`, "clip", {
+        type: "html-attribute",
+        property: "muted",
+        value: null,
+      }),
+    ).toBe(`<video id="clip"></video>`);
+  });
+
+  it("locates Unicode custom tags and respects the first duplicate attribute", () => {
+    const html = `<my-élement id="real" id="other" data-duration="1"></my-élement>`;
+    const op: PatchOperation = { type: "attribute", property: "duration", value: "2" };
+    expect(applyPatch(html, "real", op)).toContain('data-duration="2"');
+    expect(applyPatch(html, "other", op)).toBe(html);
+  });
+
+  it("reads and patches only the real source outside quoted attribute content", () => {
+    const html = `<video id="hero" title="example src='other.mp4'" data-src="lazy.mp4" src="assets/it's.mp4"></video>`;
+    expect(readTagAttribute(html, "src")).toBe("assets/it's.mp4");
+    const op: PatchOperation = { type: "html-attribute", property: "src", value: "new.mp4" };
+    const expected = `<video id="hero" title="example src='other.mp4'" data-src="lazy.mp4" src="new.mp4"></video>`;
+    expect(applyPatch(html, "hero", op)).toBe(expected);
+    expect(applyPatchByTarget(html, { id: "hero" }, op)).toBe(expected);
+  });
+
+  it("does not locate a target through a prefixed or quoted id", () => {
+    const html = `<video data-id="hero" title="id='hero'" src="other.mp4"></video><video id="hero" src="real.mp4"></video>`;
+    expect(readTagSnippetByTarget(html, { id: "hero" })).toContain('src="real.mp4"');
+  });
+
   it.each(['"', "'"])("patches long and multiline styles quoted with %s", (quote) => {
     const otherQuote = quote === '"' ? "'" : '"';
     const op: PatchOperation = { type: "inline-style", property: "opacity", value: "0.5" };
@@ -646,3 +678,106 @@ describe("T3 — hfId targeting (spec for R1)", () => {
     expect(result).toContain('<h2 class="b">B</h2>');
   });
 });
+
+describe("file names with special characters", () => {
+  const src = (value: string): PatchOperation => ({
+    type: "html-attribute",
+    property: "src",
+    value,
+  });
+
+  it("replaces a double-quoted value that holds an apostrophe instead of adding a second one", () => {
+    expect(applyPatch(`<img id="a" src="assets/it's.png">`, "a", src("assets/b.png"))).toBe(
+      `<img id="a" src="assets/b.png">`,
+    );
+    expect(applyPatch(`<img id="a" src='assets/say "hi".png'>`, "a", src("b.png"))).toBe(
+      `<img id="a" src="b.png">`,
+    );
+  });
+
+  it("writes $ sequences in a value literally", () => {
+    expect(applyPatch(`<img id="a" src="old.png">`, "a", src("assets/$100 bill.png"))).toBe(
+      `<img id="a" src="assets/$100 bill.png">`,
+    );
+    expect(applyPatch(`<img id="a">`, "a", src("$&$1.png"))).toBe(
+      `<img id="a" src="$&amp;$1.png">`,
+    );
+    expect(
+      applyPatch(`<div id="a" data-src="old">`, "a", {
+        type: "attribute",
+        property: "src",
+        value: "$' and $`",
+      }),
+    ).toBe(`<div id="a" data-src="$' and $\`">`);
+  });
+
+  it("reads a data attribute whose value holds the other quote kind", () => {
+    expect(readAttributeByTarget(`<div id="a" data-title="it's here">`, { id: "a" }, "title")).toBe(
+      "it's here",
+    );
+  });
+});
+
+describe("readTagAttribute", () => {
+  it("reads both quote kinds and decodes entities without losing the other quote", () => {
+    expect(readTagAttribute(`<video src="assets/it's&amp;ours.mp4">`, "src")).toBe(
+      "assets/it's&ours.mp4",
+    );
+    expect(readTagAttribute(`<video src='assets/say "hi".mp4'>`, "src")).toBe(
+      'assets/say "hi".mp4',
+    );
+  });
+
+  it("distinguishes an empty attribute from a missing attribute", () => {
+    expect(readTagAttribute('<video src="">', "src")).toBe("");
+    expect(readTagAttribute("<video>", "src")).toBeUndefined();
+  });
+});
+
+describe("whole attribute names", () => {
+  it.each(["data-src", "x-src", "xml:src", "srcset"])(
+    "reads and edits src without matching %s",
+    (other) => {
+      const tag = `<img id="a" ${other}="assets/other.png" src="assets/original.png">`;
+      expect(readTagAttribute(tag, "src")).toBe("assets/original.png");
+      for (const patch of [
+        (op: PatchOperation) => applyPatch(tag, "a", op),
+        (op: PatchOperation) => applyPatchByTarget(tag, { id: "a" }, op),
+      ]) {
+        expect(patch({ type: "html-attribute", property: "src", value: "assets/new.png" })).toBe(
+          `<img id="a" ${other}="assets/other.png" src="assets/new.png">`,
+        );
+        expect(patch({ type: "html-attribute", property: "src", value: null })).toBe(
+          `<img id="a" ${other}="assets/other.png">`,
+        );
+      }
+      expect(readTagAttribute(`<img ${other}="assets/other.png">`, "src")).toBeUndefined();
+    },
+  );
+
+  it("does not treat a longer data attribute as a boolean attribute to remove", () => {
+    const tag = '<div id="a" data-title-long="keep">';
+    expect(
+      applyPatchByTarget(tag, { id: "a" }, { type: "attribute", property: "title", value: null }),
+    ).toBe(tag);
+  });
+});
+
+it("removes a boolean attribute without truncating a longer attribute name", () => {
+  const tag = '<video id="a" muted-long="keep" muted>';
+  expect(
+    applyPatchByTarget(
+      tag,
+      { id: "a" },
+      { type: "html-attribute", property: "muted", value: null },
+    ),
+  ).toBe('<video id="a" muted-long="keep">');
+});
+
+it("decodes an authored apostrophe entity once", () => {
+  expect(readTagAttribute("<video src='assets/it&apos;s.mp4'>", "src")).toBe("assets/it's.mp4");
+  expect(readTagAttribute("<video src='assets/it&#39;s.mp4'>", "src")).toBe("assets/it's.mp4");
+  expect(readTagAttribute('<video src="assets/it&amp;apos;s.mp4">', "src")).toBe(
+    "assets/it&apos;s.mp4",
+  );
+});