Preview: Allows changing the preview environment inside the preview app, and other UX changes that enhance the experience

[leekelleher]

Description

Adds a "Preview environments" menu to the Preview mode application.
(This feature follows on from #20391, using the previewOption extension kind).

This PR contains much refactoring of the Preview element and context, by creating a separate "preview" package, where the previewApps have now been relocated. The reason for this is that previously creating a 3rd-party previewApp didn't actually work, as none of the 3rd-party extensions ever got registered in the main Preview element. This has been resolved in this PR.

Additionally, the UIs of the existing previewApps have been aligned, so that they'll be marked as hidden if they don't have a menu or aren't functional, e.g. cultures and segments are hidden if they don't have any, (previously the element was slightly visible, e.g. with a 1px border, you'd have to look very closely to see it, but it was there!) Also, added the uui-symbol-expand component to indicate an expandable menu.

Bug fixes and performance improvements

Memory leak fix: Fixed event listener cleanup in preview context by implementing AbortController for automatic listener management. Window resize and iframe transition listeners were being added on every device/culture/segment change without cleanup, causing memory accumulation in long-running preview sessions. Event listeners are now set up once per iframe load and properly cleaned up when the iframe reloads or the context is destroyed.

Loading spinner optimization: The loading spinner now only appears when the iframe content is actually reloading (culture or segment changes), not when just changing device dimensions. This provides better UX and prevents unnecessary state updates on every window resize event.

Segment "Default" selection bug: Fixed an issue where selecting the "Default" segment option wouldn't clear the segment URL parameter. The iframe would continue showing the previous segment instead of returning to the default variant. The fix properly distinguishes between "parameter not provided" vs "parameter explicitly set to undefined" using the in operator to check property existence.

Popover auto-close behavior: Added blur event handlers to culture, segment, and device selector popovers so they automatically close when clicking outside the component (e.g., clicking on the preview iframe). Event listeners are added in the constructor following Lit best practices, with the component host element listening in capture phase to detect when focus leaves the entire component.

How to test?

Follow the same test steps from PR #20391 to create a custom previewOption extension kind, notice it appear in the Preview mode app.

Testing segment fix:

1. Create a document with segments enabled
2. Preview the document
3. Select a specific segment from the segments menu
4. Verify the URL includes &segment=xxx
5. Click "Default" in the segments menu
6. Verify the segment parameter is removed from the URL and the default content is shown

Testing popover auto-close:

1. Open preview mode
2. Click to open the culture/segment/device selector menu
3. Click on the preview iframe (or anywhere outside the popover)
4. Verify the menu automatically closes
5. Verify you can still select menu items normally (clicking items should work and close the menu)

[Copilot]

Pull Request Overview

This PR adds a "Preview environments" menu to the Preview mode application and reorganizes preview-related code into a dedicated package. The changes refactor the preview system to support third-party preview extensions by properly registering extension points and extracting preview apps from the main app into a standalone package.

Key Changes

• Created a new @umbraco-cms/backoffice/preview package containing preview context, repository, and preview apps
• Added new "Preview environments" menu that displays extension-registered preview options
• Refactored preview apps to support proper third-party extension registration
• Updated preview context to use observables for culture, segment, and unique ID

Reviewed Changes

Copilot reviewed 23 out of 24 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
tsconfig.json	Added path mapping for new preview package
preview/vite.config.ts	Configuration for building the new preview package
preview/umbraco-package.ts	Package manifest defining the preview bundle
preview/repository/preview.repository.ts	New repository for preview-related API calls
preview/preview-apps/preview-segment.element.ts	Updated to use new context location and added expand symbol
preview/preview-apps/preview-open-website.element.ts	Updated context import path
preview/preview-apps/preview-exit.element.ts	Updated context import path
preview/preview-apps/preview-environments.element.ts	New element for displaying preview environment options
preview/preview-apps/preview-device.element.ts	Refactored device handling and added expand symbol
preview/preview-apps/preview-culture.element.ts	Updated to use new context and added expand symbol
preview/preview-apps/manifests.ts	Updated manifest types and weights
preview/context/preview.context.ts	Refactored to use observables and extracted repository
preview/context/preview.context-token.ts	Extracted context token to separate file
documents/repository/preview/document-preview.repository.ts	Deprecated in favor of UmbPreviewRepository
assets/lang/en.ts	Changed "End" to "Exit" for preview mode
apps/preview/preview.element.ts	Updated to load preview package and register extensions
package.json	Added export for preview package

Files not reviewed (1)

• src/Umbraco.Web.UI.Client/package-lock.json: Language not supported

[Copilot]

Pull Request Overview

Copilot reviewed 25 out of 26 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

• src/Umbraco.Web.UI.Client/package-lock.json: Language not supported

[iOvergaard]

Added/edited a few things based on feedback from Copilot and Claude AI, fixed a potential memory leak, and improved the UX slightly when selecting cultures/segments or clicking on the iframe to close the popover. I added a description of all of this to the pull request.