@elementor/editor-audits 4.4.0-1112 → 4.4.0-1113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-audits",
-  "version": "4.4.0-1112",
+  "version": "4.4.0-1113",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,21 +39,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.4.0-1112",
-    "@elementor/editor-mcp": "4.4.0-1112",
-    "@elementor/editor-app-bar": "4.4.0-1112",
-    "@elementor/editor-elements": "4.4.0-1112",
-    "@elementor/editor-floating-panels": "4.4.0-1112",
-    "@elementor/editor-notifications": "4.4.0-1112",
-    "@elementor/editor-props": "4.4.0-1112",
-    "@elementor/editor-styles": "4.4.0-1112",
-    "@elementor/editor-v1-adapters": "4.4.0-1112",
-    "@elementor/events": "4.4.0-1112",
-    "@elementor/http-client": "4.4.0-1112",
+    "@elementor/editor": "4.4.0-1113",
+    "@elementor/editor-mcp": "4.4.0-1113",
+    "@elementor/editor-app-bar": "4.4.0-1113",
+    "@elementor/editor-elements": "4.4.0-1113",
+    "@elementor/editor-floating-panels": "4.4.0-1113",
+    "@elementor/editor-notifications": "4.4.0-1113",
+    "@elementor/editor-props": "4.4.0-1113",
+    "@elementor/editor-styles": "4.4.0-1113",
+    "@elementor/editor-v1-adapters": "4.4.0-1113",
+    "@elementor/events": "4.4.0-1113",
+    "@elementor/http-client": "4.4.0-1113",
     "@elementor/icons": "~1.77.0",
-    "@elementor/locations": "4.4.0-1112",
-    "@elementor/session": "4.4.0-1112",
-    "@elementor/store": "4.4.0-1112",
+    "@elementor/locations": "4.4.0-1113",
+    "@elementor/session": "4.4.0-1113",
+    "@elementor/store": "4.4.0-1113",
     "@elementor/ui": "1.37.5"
   },
   "peerDependencies": {

package/src/audits/accessibility-statement.ts

@@ -29,9 +29,9 @@ export const audit: Audit = {
 					externalUrl: isReady
 						? ctx.pageContext.ally_accessibility_statement_url
 						: ctx.pageContext.ally_plugin_url,
-					ctaLabel: isReady ? __( 'Create', 'elementor' ) : undefined,
+					ctaLabel: __( 'Create', 'elementor' ),
 					secondaryCtaLabel: __( 'Learn more', 'elementor' ),
-					secondaryCtaUrl: 'https://go.elementor.com/acc-plg-learn-more',
+					secondaryCtaUrl: 'https://elementor.com/help/start-using-ally/#statement',
 				},
 			],
 		};

package/src/audits/cookie-policy.ts

@@ -25,6 +25,7 @@ export const audit: Audit = {
 					auditId: audit.id,
 					label: __( 'Cookiez plugin is not installed or active.', 'elementor' ),
 					externalUrl: ctx.pageContext.cookiez_plugin_url,
+					ctaLabel: __( 'Set up cookie consent', 'elementor' ),
 				},
 			],
 		};

package/src/audits/images-alt-text.ts

@@ -36,6 +36,7 @@ export const audit: Audit = {
 					targetHint: 'element-settings',
 					label: __( 'Image is missing alt text.', 'elementor' ),
 					externalUrl: ctx.pageContext.ally_plugin_url,
+					ctaLabel: __( 'Fix with Ally', 'elementor' ),
 				} );
 			}
 		} );

package/src/audits/images-inefficient-format.ts

@@ -58,6 +58,7 @@ export const audit: Audit = {
 			targetHint: 'element-settings' as const,
 			label: __( "Image isn't served in a modern format like WebP or AVIF.", 'elementor' ),
 			externalUrl: ctx.pageContext.image_optimization_plugin_url,
+			ctaLabel: __( 'Optimize all', 'elementor' ),
 		} ) );
 
 		return violations.length === 0

package/src/audits/images-too-large.ts

@@ -66,6 +66,7 @@ export const audit: Audit = {
 				kb
 			),
 			externalUrl: ctx.pageContext.image_optimization_plugin_url,
+			ctaLabel: __( 'Optimize all', 'elementor' ),
 		} ) );
 
 		return violations.length === 0

package/src/components/audit-feedback.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
+import { useFloatingPanelZIndex } from '@elementor/editor-floating-panels';
 import { notify } from '@elementor/editor-notifications';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { useMixpanel } from '@elementor/events';
@@ -21,6 +22,7 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import {
+	AUDIT_PANEL_ID,
 	FEEDBACK_CANCELLED_EVENT,
 	FEEDBACK_CLICKED_EVENT,
 	FEEDBACK_CLOSED_EVENT,
@@ -58,6 +60,7 @@ export default function AuditFeedback() {
 	const [ feedbackText, setFeedbackText ] = useState( '' );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 	const { dispatchEvent: trackEvent = ( ...args: unknown[] ) => void args } = useMixpanel();
+	const panelZIndex = useFloatingPanelZIndex( AUDIT_PANEL_ID );
 
 	if ( ! isExperimentActive( FEEDBACK_EXPERIMENT_NAME ) ) {
 		return null;
@@ -117,7 +120,7 @@ export default function AuditFeedback() {
 
 	return (
 		<>
-			<Tooltip title={ triggerLabel } placement="top">
+			<Tooltip title={ triggerLabel } placement="top" PopperProps={ { sx: { zIndex: panelZIndex } } }>
 				<IconButton size="small" aria-label={ triggerLabel } onClick={ handleOpen }>
 					<MessageLinesIcon fontSize="small" />
 				</IconButton>

package/src/components/audit-panel.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { getCurrentDocumentId } from '@elementor/editor-elements';
+import { getHostDocumentId } from '@elementor/editor-elements';
 import { FloatingPanelBody, FloatingPanelFooter, FloatingPanelHeader } from '@elementor/editor-floating-panels';
 import { Box, Button, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { AUDIT_PANEL_ID } from '../constants';
 import { useAuditReport } from '../hooks/use-audit-report';
 import AuditFeedback from './audit-feedback';
 import ErrorPage from './pages/error-page';
@@ -14,14 +15,14 @@ import ReportShell from './report-shell';
 export default function AuditPanel() {
 	const { status, report, error, run } = useAuditReport();
 
-	const currentDocumentId = getCurrentDocumentId() ?? 0;
-	const onRun = () => run( currentDocumentId );
+	const hostDocumentId = getHostDocumentId() ?? 0;
+	const onRun = () => run( hostDocumentId );
 	const lastScanLabel = report ? new Date( report.runAt ).toLocaleTimeString() : null;
 
 	return (
 		<>
 			<FloatingPanelHeader
-				panelId="audit-panel"
+				panelId={ AUDIT_PANEL_ID }
 				title={ __( 'Page Audit', 'elementor' ) }
 				badge={ __( 'Beta', 'elementor' ) }
 				titleVariant="subtitle2"
@@ -51,7 +52,7 @@ export default function AuditPanel() {
 					variant="contained"
 					size="small"
 					onClick={ onRun }
-					disabled={ status === 'loading' || currentDocumentId === 0 }
+					disabled={ status === 'loading' || hostDocumentId === 0 }
 				>
 					{ lastScanLabel ? __( 'Re-scan', 'elementor' ) : __( 'Run page audit', 'elementor' ) }
 				</Button>

package/src/components/fix-violation-with-angie.tsx

@@ -8,9 +8,10 @@ import { ANGIE_FIX_ENTRY_POINT, CREATE_WIDGET_EVENT } from '../constants';
 
 type Props = {
 	prompt: string;
+	panelZIndex: number;
 };
 
-export default function FixViolationWithAngie( { prompt }: Props ) {
+export default function FixViolationWithAngie( { prompt, panelZIndex }: Props ) {
 	const label = __( 'Fix with Angie', 'elementor' );
 	const href = `#angie-prompt=${ encodeURIComponent( prompt ) }`;
 
@@ -34,15 +35,8 @@ export default function FixViolationWithAngie( { prompt }: Props ) {
 	};
 
 	return (
-		<Tooltip title={ label }>
-			<IconButton
-				className="violation-hover-icon"
-				component="a"
-				href={ href }
-				size="small"
-				aria-label={ label }
-				onClick={ handleClick }
-			>
+		<Tooltip title={ label } placement="top" PopperProps={ { sx: { zIndex: panelZIndex } } }>
+			<IconButton component="a" href={ href } size="small" aria-label={ label } onClick={ handleClick }>
 				<AngieIcon fontSize="tiny" />
 			</IconButton>
 		</Tooltip>

package/src/components/pages/all-audits-page.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Box } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useSingleExpandedCard } from '../../hooks/use-single-expanded-card';
 import { type PageAuditReport } from '../../types';
 import {
 	auditStatusColor,
@@ -24,6 +25,7 @@ export default function AllAuditsPage( { initialExpandedStatus, onBack, report }
 	const expandFail = ! initialExpandedStatus || initialExpandedStatus === 'fail';
 	const expandPass = initialExpandedStatus === 'pass';
 	const expandSkipped = initialExpandedStatus === 'skipped';
+	const { expandedId, toggle } = useSingleExpandedCard();
 
 	return (
 		<Box key={ initialExpandedStatus ?? 'default' }>
@@ -36,7 +38,13 @@ export default function AllAuditsPage( { initialExpandedStatus, onBack, report }
 					defaultExpanded={ expandFail }
 				>
 					{ failed.map( ( r ) => (
-						<ViolationRow key={ r.audit.id } audit={ r.audit } violations={ r.result.violations } />
+						<ViolationRow
+							key={ r.audit.id }
+							audit={ r.audit }
+							violations={ r.result.violations }
+							expanded={ expandedId === r.audit.id }
+							onToggleExpand={ () => toggle( r.audit.id ) }
+						/>
 					) ) }
 				</StatusSection>
 				<StatusSection
@@ -46,7 +54,12 @@ export default function AllAuditsPage( { initialExpandedStatus, onBack, report }
 					defaultExpanded={ expandPass }
 				>
 					{ passed.map( ( r ) => (
-						<ViolationRow key={ r.audit.id } audit={ r.audit } />
+						<ViolationRow
+							key={ r.audit.id }
+							audit={ r.audit }
+							expanded={ expandedId === r.audit.id }
+							onToggleExpand={ () => toggle( r.audit.id ) }
+						/>
 					) ) }
 				</StatusSection>
 				<StatusSection
@@ -56,7 +69,13 @@ export default function AllAuditsPage( { initialExpandedStatus, onBack, report }
 					defaultExpanded={ expandSkipped }
 				>
 					{ skipped.map( ( r ) => (
-						<ViolationRow key={ r.audit.id } audit={ r.audit } skipReason={ r.result.reason } />
+						<ViolationRow
+							key={ r.audit.id }
+							audit={ r.audit }
+							skipReason={ r.result.reason }
+							expanded={ expandedId === r.audit.id }
+							onToggleExpand={ () => toggle( r.audit.id ) }
+						/>
 					) ) }
 				</StatusSection>
 			</Box>

package/src/components/pages/category-page.tsx

@@ -3,6 +3,7 @@ import { Box } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { CATEGORY_LABELS } from '../../constants';
+import { useSingleExpandedCard } from '../../hooks/use-single-expanded-card';
 import { type AuditCategory, type PageAuditReport } from '../../types';
 import { partitionAuditResults } from '../../utils/audit-status-summary';
 import { CATEGORY_ICONS } from '../category-icons';
@@ -18,7 +19,8 @@ type Props = {
 
 export default function CategoryPage( { category, report, onBack }: Props ) {
 	const Icon = CATEGORY_ICONS[ category ];
-	const { failed, passed, totalViolations } = partitionAuditResults( report, { category } );
+	const { failed, passed, skipped, totalViolations } = partitionAuditResults( report, { category } );
+	const { expandedId, toggle } = useSingleExpandedCard();
 
 	return (
 		<>
@@ -36,12 +38,34 @@ export default function CategoryPage( { category, report, onBack }: Props ) {
 					defaultExpanded
 				>
 					{ failed.map( ( r ) => (
-						<ViolationRow key={ r.audit.id } audit={ r.audit } violations={ r.result.violations } />
+						<ViolationRow
+							key={ r.audit.id }
+							audit={ r.audit }
+							violations={ r.result.violations }
+							expanded={ expandedId === r.audit.id }
+							onToggleExpand={ () => toggle( r.audit.id ) }
+						/>
 					) ) }
 				</StatusSection>
 				<StatusSection label={ __( 'Passed audits', 'elementor' ) } count={ passed.length } color="success">
 					{ passed.map( ( r ) => (
-						<ViolationRow key={ r.audit.id } audit={ r.audit } />
+						<ViolationRow
+							key={ r.audit.id }
+							audit={ r.audit }
+							expanded={ expandedId === r.audit.id }
+							onToggleExpand={ () => toggle( r.audit.id ) }
+						/>
+					) ) }
+				</StatusSection>
+				<StatusSection label={ __( 'Skipped audits', 'elementor' ) } count={ skipped.length } color="default">
+					{ skipped.map( ( r ) => (
+						<ViolationRow
+							key={ r.audit.id }
+							audit={ r.audit }
+							skipReason={ r.result.reason }
+							expanded={ expandedId === r.audit.id }
+							onToggleExpand={ () => toggle( r.audit.id ) }
+						/>
 					) ) }
 				</StatusSection>
 			</Box>

package/src/components/violation-cta-button.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
+import { WandIcon } from '@elementor/icons';
 import { Button } from '@elementor/ui';
 
 type Props = {
 	ctaLabel: string;
 	externalUrl: string;
 	variant?: 'outlined' | 'text';
+	withIcon?: boolean;
 };
 
-export default function ViolationCtaButton( { ctaLabel, externalUrl, variant = 'outlined' }: Props ) {
+export default function ViolationCtaButton( { ctaLabel, externalUrl, variant = 'outlined', withIcon = false }: Props ) {
 	const handleClick = ( event: React.MouseEvent< HTMLButtonElement > ) => {
 		event.stopPropagation();
 		event.preventDefault();
@@ -16,7 +18,13 @@ export default function ViolationCtaButton( { ctaLabel, externalUrl, variant = '
 	};
 
 	return (
-		<Button variant={ variant } color="secondary" size="small" onClick={ handleClick }>
+		<Button
+			variant={ variant }
+			color="secondary"
+			size="small"
+			startIcon={ withIcon ? <WandIcon fontSize="tiny" aria-hidden={ true } /> : undefined }
+			onClick={ handleClick }
+		>
 			{ ctaLabel }
 		</Button>
 	);

package/src/components/violation-icons.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FileSettingsIcon, SettingsIcon, ShieldCheckIcon } from '@elementor/icons';
+import { FileSettingsIcon, SettingsIcon } from '@elementor/icons';
 import { Box } from '@elementor/ui';
 
 import { type AuditViolation } from '../types';
@@ -29,5 +29,5 @@ export default function ViolationIcon( { violation, widgetIcon }: Props ) {
 		return <SettingsIcon fontSize="inherit" aria-hidden={ true } />;
 	}
 
-	return <ShieldCheckIcon fontSize="inherit" aria-hidden={ true } />;
+	return <SettingsIcon fontSize="inherit" aria-hidden={ true } />;
 }

package/src/components/violation-row.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { useState } from 'react';
 import { getElementIcon, getElementTitle } from '@elementor/editor-elements';
-import { AlertCircleIcon, BulbIcon, CheckIcon, ChevronDownIcon, EyeIcon, HelpIcon } from '@elementor/icons';
-import { Alert, AlertTitle, Box, Collapse, IconButton, Tooltip, Typography } from '@elementor/ui';
+import { useFloatingPanelZIndex } from '@elementor/editor-floating-panels';
+import { CheckIcon, ChevronDownIcon, HelpIcon, InfoCircleIcon, WandIcon } from '@elementor/icons';
+import { Alert, Box, Collapse, IconButton, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { AUDIT_PANEL_ID } from '../constants';
 import { focusViolation } from '../hooks/focus-violation';
 import { type AuditMeta, type AuditViolation } from '../types';
 import { buildAngiePrompt } from '../utils/build-angie-prompt';
@@ -17,6 +18,8 @@ import ViolationIcon from './violation-icons';
 
 type Props = {
 	audit: AuditMeta;
+	expanded: boolean;
+	onToggleExpand: () => void;
 	skipReason?: string;
 	violations?: AuditViolation[];
 };
@@ -35,12 +38,12 @@ function StatusIndicator( { audit, violations }: Pick< Props, 'audit' | 'violati
 	if ( violations ) {
 		return (
 			<>
+				<SeverityIcon severity={ audit.severity } />
 				{ isScoredAudit( audit ) && (
 					<Typography variant="caption" color="text.secondary" fontWeight="bold">
 						{ violations.length }
 					</Typography>
 				) }
-				<SeverityIcon severity={ audit.severity } />
 			</>
 		);
 	}
@@ -48,10 +51,41 @@ function StatusIndicator( { audit, violations }: Pick< Props, 'audit' | 'violati
 	return <CheckIcon fontSize="small" color="success" />;
 }
 
-export default function ViolationRow( { audit, skipReason, violations }: Props ) {
-	const [ expanded, setExpanded ] = useState( false );
+function GuidanceAction( { violation }: { violation: AuditViolation } ) {
+	const hasPrimaryCta = !! ( violation.ctaLabel && violation.externalUrl );
 
-	const toggleExpanded = () => setExpanded( ( value ) => ! value );
+	if ( ! hasPrimaryCta ) {
+		return null;
+	}
+
+	return (
+		<Box sx={ { display: 'flex', alignItems: 'center', gap: 1 } }>
+			<ViolationCtaButton
+				ctaLabel={ violation.ctaLabel as string }
+				externalUrl={ violation.externalUrl as string }
+				withIcon
+			/>
+			{ violation.secondaryCtaLabel && violation.secondaryCtaUrl && (
+				<ViolationCtaButton
+					ctaLabel={ violation.secondaryCtaLabel }
+					externalUrl={ violation.secondaryCtaUrl }
+					variant="text"
+				/>
+			) }
+		</Box>
+	);
+}
+
+export default function ViolationRow( { audit, expanded, onToggleExpand, skipReason, violations }: Props ) {
+	const primaryViolation = violations?.[ 0 ];
+	const isGuidanceFocusable = !! primaryViolation;
+	const panelZIndex = useFloatingPanelZIndex( AUDIT_PANEL_ID );
+
+	const handleGuidanceClick = () => {
+		if ( isGuidanceFocusable && primaryViolation ) {
+			focusViolation( primaryViolation );
+		}
+	};
 
 	return (
 		<Box sx={ { borderBottom: 1, borderColor: 'divider', paddingBlock: 0.5 } }>
@@ -65,9 +99,9 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 						gap: 0.5,
 						minWidth: 0,
 					} }
-					onClick={ toggleExpanded }
+					onClick={ onToggleExpand }
 				>
-					<Typography variant="body2" sx={ { flex: 1 } }>
+					<Typography variant="subtitle2" color="text.secondary" sx={ { flex: 1 } }>
 						{ audit.title }
 					</Typography>
 					{ ! skipReason && <StatusIndicator audit={ audit } violations={ violations } /> }
@@ -76,7 +110,7 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 				<IconButton
 					size="small"
 					aria-label={ expanded ? __( 'Collapse', 'elementor' ) : __( 'Expand', 'elementor' ) }
-					onClick={ toggleExpanded }
+					onClick={ onToggleExpand }
 				>
 					<ChevronDownIcon
 						fontSize="small"
@@ -89,37 +123,25 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 			</Box>
 			<Collapse in={ expanded }>
 				<Box sx={ { display: 'flex', flexDirection: 'column', gap: 1, paddingBlock: 1 } }>
-					<Alert
-						severity="secondary"
-						sx={ { p: 1 } }
-						icon={ <AlertCircleIcon fontSize="small" color="secondary" aria-hidden={ true } /> }
-					>
-						<AlertTitle>
-							<Typography variant="caption" component="p" color="text.primary" fontWeight="bold">
-								{ __( "What's the issue", 'elementor' ) }
+					<Tooltip title={ audit.fixHint } placement="top">
+						<Alert
+							severity="secondary"
+							sx={ { p: 1, cursor: isGuidanceFocusable ? 'pointer' : undefined } }
+							icon={ <InfoCircleIcon fontSize="small" aria-hidden={ true } /> }
+							role={ isGuidanceFocusable ? 'button' : undefined }
+							tabIndex={ isGuidanceFocusable ? 0 : undefined }
+							onClick={ isGuidanceFocusable ? handleGuidanceClick : undefined }
+							onKeyDown={ isGuidanceFocusable ? onKeyboardClick( handleGuidanceClick ) : undefined }
+						>
+							<Typography variant="caption" component="p" color="text.secondary">
+								{ audit.description }
 							</Typography>
-						</AlertTitle>
-						<Typography variant="caption" component="p" color="text.secondary">
-							{ audit.description }
-						</Typography>
-					</Alert>
-					<Alert
-						severity="info"
-						sx={ { p: 1 } }
-						icon={ <BulbIcon fontSize="small" color="info" aria-hidden={ true } /> }
-					>
-						<AlertTitle>
-							<Typography variant="caption" component="p" color="text.primary" fontWeight="bold">
-								{ __( 'How to resolve', 'elementor' ) }
-							</Typography>
-						</AlertTitle>
-						<Typography variant="caption" component="p" color="text.secondary">
-							{ audit.fixHint }
-						</Typography>
-					</Alert>
+						</Alert>
+					</Tooltip>
+					{ primaryViolation && <GuidanceAction violation={ primaryViolation } /> }
 				</Box>
 				{ violations && violations.length > 0 && (
-					<Box role="list" sx={ { paddingBlockEnd: 1, paddingInlineStart: 2 } }>
+					<Box role="list" sx={ { paddingBlockEnd: 1 } }>
 						{ violations.map( ( violation, idx ) => {
 							const widgetIcon = violation.elementId ? getElementIcon( violation.elementId ) : null;
 							const elementTitle = violation.elementId ? getElementTitle( violation.elementId ) : null;
@@ -139,14 +161,10 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 										alignItems: 'center',
 										gap: 1,
 										paddingBlock: 0.5,
-										paddingInline: 2,
+										paddingInline: 1,
 										borderRadius: 1,
 										cursor: 'pointer',
-										'& .violation-hover-icon': { opacity: 0, transition: 'opacity .15s' },
 										'&:hover': { bgcolor: 'action.hover' },
-										'&:hover .violation-hover-icon, &:focus-visible .violation-hover-icon': {
-											opacity: 1,
-										},
 									} }
 								>
 									<ViolationIcon violation={ violation } widgetIcon={ widgetIcon } />
@@ -158,31 +176,13 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 											</Typography>
 										) }
 									</Box>
-									{ violation.angieFix && (
+									{ violation.angieFix ? (
 										<FixViolationWithAngie
 											prompt={ violation.angiePrompt ?? buildAngiePrompt( rowLabel ) }
+											panelZIndex={ panelZIndex }
 										/>
-									) }
-									{ violation.ctaLabel && violation.externalUrl ? (
-										<Box sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
-											<ViolationCtaButton
-												ctaLabel={ violation.ctaLabel }
-												externalUrl={ violation.externalUrl }
-											/>
-											{ violation.secondaryCtaLabel && violation.secondaryCtaUrl && (
-												<ViolationCtaButton
-													ctaLabel={ violation.secondaryCtaLabel }
-													externalUrl={ violation.secondaryCtaUrl }
-													variant="text"
-												/>
-											) }
-										</Box>
 									) : (
-										<EyeIcon
-											className="violation-hover-icon"
-											fontSize="tiny"
-											aria-hidden={ true }
-										/>
+										<WandIcon fontSize="tiny" aria-hidden={ true } />
 									) }
 								</Box>
 							);

package/src/hooks/use-audit-report.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { getCurrentDocumentId } from '@elementor/editor-elements';
+import { getHostDocumentId } from '@elementor/editor-elements';
 import { __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';
 
 import { runPageAudit } from '../runner';
@@ -12,7 +12,7 @@ export function useAuditReport() {
 	const report = useSelector( ( state: GlobalState ) => selectReport( state ) );
 	const error = useSelector( ( state: GlobalState ) => selectError( state ) );
 	const dispatch = useDispatch();
-	const documentId = getCurrentDocumentId() ?? 0;
+	const documentId = getHostDocumentId() ?? 0;
 
 	useEffect( () => {
 		if ( ! documentId || report?.documentId === documentId ) {

package/src/hooks/use-single-expanded-card.ts

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+export function useSingleExpandedCard( initialId: string | null = null ) {
+	const [ expandedId, setExpandedId ] = useState< string | null >( initialId );
+
+	const toggle = ( id: string ) => {
+		setExpandedId( ( current ) => ( current === id ? null : id ) );
+	};
+
+	return { expandedId, toggle };
+}

package/src/register-promotions.ts

@@ -80,27 +80,4 @@ export const PROMOTIONS: PromotionConfig[] = [
 		},
 		getCtaUrl: firstFailExternalUrl,
 	},
-	{
-		auditId: 'audits/images-inefficient-format',
-		icon: ShieldHalfFilledIcon,
-		ctaLabel: __( 'Optimize all', 'elementor' ),
-		formatSubtitle: ( run ) => {
-			if ( run.result.status !== 'fail' ) {
-				return null;
-			}
-
-			const count = run.result.metadata?.inefficientImageFormatCount ?? 0;
-
-			if ( count === 0 ) {
-				return null;
-			}
-
-			return sprintf(
-				/* translators: %d: number of images served in an inefficient format. */
-				_n( '%d image', '%d images', count, 'elementor' ),
-				count
-			);
-		},
-		getCtaUrl: firstFailExternalUrl,
-	},
 ];

package/src/runner.ts

@@ -1,4 +1,4 @@
-import { getElements } from '@elementor/editor-elements';
+import { getHostDocumentElements, getHostDocumentId } from '@elementor/editor-elements';
 
 import { fetchPageContext } from './api/page-context-client';
 import { getRegisteredAudits } from './registry';
@@ -18,7 +18,11 @@ import { readKitSnapshot } from './utils/read-kit-snapshot';
 import { buildSnapshotTree } from './utils/v1-snapshot';
 
 export async function runPageAudit( documentId: number ): Promise< PageAuditReport > {
-	const tree = buildSnapshotTree( getElements() );
+	if ( documentId !== getHostDocumentId() ) {
+		throw new Error( 'runPageAudit: documentId must match the host document.' );
+	}
+
+	const tree = buildSnapshotTree( getHostDocumentElements() );
 	const imageSizeRequests = extractImageSizeRequests( tree );
 	const pageContext = await fetchPageContext( documentId, imageSizeRequests );