Enable the Highlights video style for all users

packages/image-studio/src/components/style-picker/index.test.tsx

@@ -435,7 +435,7 @@ describe( 'StylePicker', () => {
 			} );
 		} );
 
-		it( 'exports Cinematic (active) + Highlights (disabled teaser) video styles', () => {
+		it( 'exports Cinematic + Highlights video styles, both active', () => {
 			expect( VIDEO_STYLE_OPTIONS ).toHaveLength( 2 );
 
 			expect( VIDEO_STYLE_OPTIONS[ 0 ] ).toMatchObject( {
@@ -446,10 +446,10 @@ describe( 'StylePicker', () => {
 			expect( VIDEO_STYLE_OPTIONS[ 0 ].preview ).toBeTruthy();
 
 			expect( VIDEO_STYLE_OPTIONS[ 1 ] ).toMatchObject( {
-				label: 'Highlights (Coming Soon)',
+				label: 'Highlights',
 				value: 'highlights',
-				disabled: true,
 			} );
+			expect( VIDEO_STYLE_OPTIONS[ 1 ].disabled ).toBeFalsy();
 			expect( VIDEO_STYLE_OPTIONS[ 1 ].preview ).toBeTruthy();
 		} );
 
@@ -467,16 +467,6 @@ describe( 'StylePicker', () => {
 			expect( dropdown ).not.toHaveTextContent( 'Pixel Art' );
 		} );
 
-		it( 'renders the disabled video style as an inert (native-disabled) card', async () => {
-			const user = userEvent.setup();
-			render( <StylePicker mode={ ImageStudioMode.Generate } variant="video" /> );
-
-			await user.click( screen.getByTestId( 'toolbar-button' ) );
-			const dropdown = screen.getByTestId( 'dropdown-content' );
-			const highlightsCard = within( dropdown ).getByRole( 'button', { name: /Highlights/ } );
-			expect( highlightsCard ).toBeDisabled();
-		} );
-
 		it( 'maps style values correctly', async () => {
 			const user = userEvent.setup();
 
@@ -514,31 +504,18 @@ describe( 'StylePicker', () => {
 		} );
 	} );
 
-	describe( 'Dev-mode Highlights gating', () => {
-		it( 'keeps Highlights disabled with the Coming Soon teaser when isDevMode is unset', async () => {
-			const user = userEvent.setup();
-			render( <StylePicker mode={ ImageStudioMode.Generate } variant="video" /> );
-
-			await user.click( screen.getByTestId( 'toolbar-button' ) );
-			const dropdown = screen.getByTestId( 'dropdown-content' );
-			const highlightsCard = within( dropdown ).getByRole( 'button', { name: /Highlights/ } );
-
-			expect( highlightsCard ).toBeDisabled();
-			expect( highlightsCard ).toHaveTextContent( 'Highlights (Coming Soon)' );
-		} );
-
-		it( 'unlocks Highlights with the a12s label, enabled card, and a preview when isDevMode is true', async () => {
+	describe( 'Highlights video style', () => {
+		it( 'shows Highlights as an enabled option with a preview for all users', async () => {
 			const user = userEvent.setup();
-			( window as Record< string, unknown > ).imageStudioData = { isDevMode: true };
-
 			render( <StylePicker mode={ ImageStudioMode.Generate } variant="video" /> );
 
 			await user.click( screen.getByTestId( 'toolbar-button' ) );
 			const dropdown = screen.getByTestId( 'dropdown-content' );
 			const highlightsCard = within( dropdown ).getByRole( 'button', { name: /Highlights/ } );
 
 			expect( highlightsCard ).not.toBeDisabled();
-			expect( highlightsCard ).toHaveTextContent( 'Highlights (a12s only)' );
+			expect( highlightsCard ).toHaveTextContent( 'Highlights' );
+			expect( highlightsCard ).not.toHaveTextContent( 'Coming Soon' );
 			expect( highlightsCard.querySelector( 'img' ) ).toBeInTheDocument();
 		} );
 	} );

packages/image-studio/src/components/style-picker/index.tsx

@@ -19,7 +19,6 @@ import photographicPreview from '../../assets/photographic.webp';
 import pixelArtPreview from '../../assets/pixel-art.webp';
 import texturePreview from '../../assets/texture.webp';
 import videoCinematicPreview from '../../assets/video/styles/cinematic.webp';
-import videoHighlightsSoonPreview from '../../assets/video/styles/highlights-soon.webp';
 import videoHighlightsPreview from '../../assets/video/styles/highlights.webp';
 import vividPreview from '../../assets/vivid.webp';
 import { store as imageStudioStore } from '../../store';
@@ -140,11 +139,6 @@ export const STYLE_OPTIONS: StyleOption[] = [
 // (LLM-composed HTML → EditFrame /api/v1/renders → MP4 → media library);
 // the in-browser encoding implementation lives on the older compositor
 // branches and is preserved there.
-//
-// Production default ships Cinematic-only; Highlights is disabled with a
-// "coming soon" preview. The StylePicker component swaps in the live
-// preview and enables the card when window.imageStudioData.isDevMode is
-// true (a12s testing).
 export const VIDEO_STYLE_OPTIONS: StyleOption[] = [
 	{
 		label: __( 'Cinematic', __i18n_text_domain__ ),
@@ -153,14 +147,13 @@ export const VIDEO_STYLE_OPTIONS: StyleOption[] = [
 		description: __( 'Create an 8-second b-roll mood clip from a prompt.', __i18n_text_domain__ ),
 	},
 	{
-		label: __( 'Highlights (Coming Soon)', __i18n_text_domain__ ),
+		label: __( 'Highlights', __i18n_text_domain__ ),
 		value: 'highlights',
-		preview: videoHighlightsSoonPreview,
+		preview: videoHighlightsPreview,
 		description: __(
 			"Build a 20-second recap clip using your post's images and key points.",
 			__i18n_text_domain__
 		),
-		disabled: true,
 	},
 ];
 
@@ -180,23 +173,7 @@ export function StylePicker( { disabled = false, mode, variant = 'image' }: Styl
 		[ targetStore ]
 	);
 
-	// Dev-mode override: unlock Highlights, swap to the live preview, and
-	// flip the label to "(a12s only)". Production default keeps the
-	// "Coming Soon" label + teaser preview + disabled state while we
-	// launch Cinematic-only.
-	const isDevMode = typeof window !== 'undefined' && window.imageStudioData?.isDevMode === true;
-	const options = isVideo
-		? VIDEO_STYLE_OPTIONS.map( ( opt ) =>
-				opt.value === 'highlights' && isDevMode
-					? {
-							...opt,
-							label: __( 'Highlights (a12s only)', __i18n_text_domain__ ),
-							preview: videoHighlightsPreview,
-							disabled: false,
-					  }
-					: opt
-		  )
-		: STYLE_OPTIONS;
+	const options = isVideo ? VIDEO_STYLE_OPTIONS : STYLE_OPTIONS;
 
 	const handleStyleSelect = ( value: string ) => {
 		setSelectedStyle( value );