Hide hidden files in DMG volume

[sejas]

Related issues

• Fixes STU-1294

Proposed Changes

• Position .background, and .VolumeIcon.icns outside the visible DMG window area so they don't appear when macOS is configured to show hidden files
• Uses appdmg's type: "position" to move hidden files to coordinates (900, 900), well outside the 710x502 window
• If the user scrolls the window the icons might be visible.

Testing Instructions

• Build a DMG with nvm use && npm run make:dmg-arm64 (or x64)
• Mount the DMG with hidden files enabled (Toggle it by pressing cmd+shift+.)
• Verify .background and .VolumeIcon.icns are no longer visible in the DMG window
• Verify the app icon and Applications link still display correctly
• Restore Finder settings (Toggle it by pressing cmd+shift+.)

Before	After

If the user has hidden files disabled, the window won’t scroll. If the user has hidden files enabled, the hidden files will appear in a corner outside the default view, and you’ll need to scroll to see them. You can toggle between these two modes by pressing cmd+shift+..

hidden-files.mp4

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors? (Tests pass, no errors)

[wpmobilebot]

📊 Performance Test Results

Comparing 96d3304 vs trunk

site-editor

Metric	trunk	96d3304	Diff	Change
load	2692.00 ms	2763.00 ms	+71.00 ms	🔴 2.6%

site-startup

Metric	trunk	96d3304	Diff	Change
siteCreation	7097.00 ms	7070.00 ms	-27.00 ms	⚪ 0.0%
siteStartup	3930.00 ms	3928.00 ms	-2.00 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

[wojtekn]

I think it may be confusing for Mac users if hidden files are not visible after they enable the display of hidden files. Let's avoid doing such hacks.

[sejas]

I think it may be confusing for Mac users if hidden files are not visible after they enable the display of hidden files. Let's avoid doing such hacks.

Other successful apps like Figma follow the same pattern. The goal is that the hidden files don't overlap with logos or text, and those icons don't distract users from dragging the correct file into Applications.

figma-dmg.mp4

[wojtekn]

Fair point about Figma - if popular apps are using this pattern successfully, I'm happy to go with it. I still have a slight preference for not hiding files, but it's not something I feel strongly about. Let's move forward with your approach.

[epeicher]

Hi @sejas, I am testing this but I still see the hidden files

I've confirmed:

• I am using this branch
• I have deleted the out folder
• I have run npm make
• The out folder is correctly generated with my arm64 architecture
• I checked that the dmg generated has the expected date

What could I be missing? 🤔

[sejas]

@epeicher , thanks for testing it. Make sure to eject the previous Studio mounted device:

Happy to huddle sync, in case is still not working.

[epeicher]

After a huddle with @sejas we identified that npm run make generates the dmg with the hidden files visible while npm run make:dmg-arm64 generates the dmg with the hidden files outside the visible window.

I've started the Mac build, and we will check the downloadable file that will be generated for the release.

[sejas]

@epeicher , great catch, and thanks for pointing me out in the right direction. I added the same position configuration in both places that produce dmg files. So now this PR works with npm run make:dmg-arm64 and also with npm run make.

[epeicher]

Thanks @sejas for solving this! I have seen that @wojtekn has approved to move forward, so I have tested it, and it works as expected for both npm run make and npm run make:dmg-arm64 scripts. Changes also LGTM!