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

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { __registerSlice as registerSlice } from "@elementor/store";
 import { utilitiesMenu } from "@elementor/editor-app-bar";
 
 // src/hooks/use-audit-toggle-props.ts
-import { ShieldCheckIcon as ShieldCheckIcon3 } from "@elementor/icons";
+import { ShieldCheckIcon as ShieldCheckIcon2 } from "@elementor/icons";
 import { __ as __24 } from "@wordpress/i18n";
 
 // src/editor-panel.tsx
@@ -14,18 +14,45 @@ import { createFloatingPanel } from "@elementor/editor-floating-panels";
 
 // src/components/audit-panel.tsx
 import * as React25 from "react";
-import { getCurrentDocumentId as getCurrentDocumentId2 } from "@elementor/editor-elements";
+import { getHostDocumentId as getHostDocumentId3 } from "@elementor/editor-elements";
 import { FloatingPanelBody, FloatingPanelFooter, FloatingPanelHeader } from "@elementor/editor-floating-panels";
 import { Box as Box21, Button as Button5, Typography as Typography16 } from "@elementor/ui";
 import { __ as __23 } from "@wordpress/i18n";
 
+// src/constants.ts
+import { __ } from "@wordpress/i18n";
+var AUDIT_PANEL_ID = "audit-panel";
+var REPORT_STORAGE_KEY_PREFIX = "elementor/audits/report";
+var CREATE_WIDGET_EVENT = "elementor/editor/create-widget";
+var ANGIE_FIX_ENTRY_POINT = "audit_violation";
+var FEEDBACK_EXPERIMENT_NAME = "in_editor_feedback";
+var FEEDBACK_ENTRY_POINT = "audit_panel";
+var FEEDBACK_CLICKED_EVENT = "audit_feedback_clicked";
+var FEEDBACK_SENT_EVENT = "audit_feedback_sent";
+var FEEDBACK_CANCELLED_EVENT = "audit_feedback_cancelled";
+var FEEDBACK_CLOSED_EVENT = "audit_feedback_closed";
+var ALL_CATEGORIES = [
+  "best-practices",
+  "seo",
+  "accessibility",
+  "performance",
+  "compliance"
+];
+var CATEGORY_LABELS = {
+  "best-practices": __("Best Practices", "elementor"),
+  seo: __("SEO", "elementor"),
+  accessibility: __("Accessibility", "elementor"),
+  performance: __("Performance", "elementor"),
+  compliance: __("Site compliance", "elementor")
+};
+
 // src/hooks/use-audit-report.ts
 import { useEffect } from "react";
-import { getCurrentDocumentId } from "@elementor/editor-elements";
+import { getHostDocumentId as getHostDocumentId2 } from "@elementor/editor-elements";
 import { __useDispatch as useDispatch, __useSelector as useSelector } from "@elementor/store";
 
 // src/runner.ts
-import { getElements } from "@elementor/editor-elements";
+import { getHostDocumentElements, getHostDocumentId } from "@elementor/editor-elements";
 
 // src/api/page-context-client.ts
 import { httpService } from "@elementor/http-client";
@@ -110,33 +137,6 @@ function getRegisteredAudits() {
   return Array.from(registry.values());
 }
 
-// src/constants.ts
-import { __ } from "@wordpress/i18n";
-var AUDIT_PANEL_ID = "audit-panel";
-var REPORT_STORAGE_KEY_PREFIX = "elementor/audits/report";
-var CREATE_WIDGET_EVENT = "elementor/editor/create-widget";
-var ANGIE_FIX_ENTRY_POINT = "audit_violation";
-var FEEDBACK_EXPERIMENT_NAME = "in_editor_feedback";
-var FEEDBACK_ENTRY_POINT = "audit_panel";
-var FEEDBACK_CLICKED_EVENT = "audit_feedback_clicked";
-var FEEDBACK_SENT_EVENT = "audit_feedback_sent";
-var FEEDBACK_CANCELLED_EVENT = "audit_feedback_cancelled";
-var FEEDBACK_CLOSED_EVENT = "audit_feedback_closed";
-var ALL_CATEGORIES = [
-  "best-practices",
-  "seo",
-  "accessibility",
-  "performance",
-  "compliance"
-];
-var CATEGORY_LABELS = {
-  "best-practices": __("Best Practices", "elementor"),
-  seo: __("SEO", "elementor"),
-  accessibility: __("Accessibility", "elementor"),
-  performance: __("Performance", "elementor"),
-  compliance: __("Site compliance", "elementor")
-};
-
 // src/utils/audit-status-summary.ts
 import { __ as __2 } from "@wordpress/i18n";
 
@@ -570,7 +570,10 @@ function toSnapshot(element) {
 
 // src/runner.ts
 async function runPageAudit(documentId) {
-  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);
   const elements = { documentId, tree };
@@ -659,7 +662,7 @@ function useAuditReport() {
   const report = useSelector((state) => selectReport(state));
   const error = useSelector((state) => selectError(state));
   const dispatch = useDispatch();
-  const documentId = getCurrentDocumentId() ?? 0;
+  const documentId = getHostDocumentId2() ?? 0;
   useEffect(() => {
     if (!documentId || report?.documentId === documentId) {
       return;
@@ -691,6 +694,7 @@ function useAuditReport() {
 // src/components/audit-feedback.tsx
 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";
@@ -732,6 +736,7 @@ function AuditFeedback() {
   const [feedbackText, setFeedbackText] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const { dispatchEvent: trackEvent = (...args) => void args } = useMixpanel();
+  const panelZIndex = useFloatingPanelZIndex(AUDIT_PANEL_ID);
   if (!isExperimentActive(FEEDBACK_EXPERIMENT_NAME)) {
     return null;
   }
@@ -773,7 +778,7 @@ function AuditFeedback() {
       trackEvent(FEEDBACK_SENT_EVENT, { entry_point: FEEDBACK_ENTRY_POINT });
     }).catch(notifyError).finally(() => setIsSubmitting(false));
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: triggerLabel, placement: "top" }, /* @__PURE__ */ React.createElement(IconButton, { size: "small", "aria-label": triggerLabel, onClick: handleOpen }, /* @__PURE__ */ React.createElement(MessageLinesIcon, { fontSize: "small" }))), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: triggerLabel, placement: "top", PopperProps: { sx: { zIndex: panelZIndex } } }, /* @__PURE__ */ React.createElement(IconButton, { size: "small", "aria-label": triggerLabel, onClick: handleOpen }, /* @__PURE__ */ React.createElement(MessageLinesIcon, { fontSize: "small" }))), /* @__PURE__ */ React.createElement(
     Dialog,
     {
       open: isOpen,
@@ -877,14 +882,24 @@ import * as React12 from "react";
 import { Box as Box8 } from "@elementor/ui";
 import { __ as __12 } from "@wordpress/i18n";
 
+// src/hooks/use-single-expanded-card.ts
+import { useState as useState2 } from "react";
+function useSingleExpandedCard(initialId = null) {
+  const [expandedId, setExpandedId] = useState2(initialId);
+  const toggle = (id) => {
+    setExpandedId((current) => current === id ? null : id);
+  };
+  return { expandedId, toggle };
+}
+
 // src/components/status-section.tsx
 import * as React5 from "react";
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { ChevronDownIcon } from "@elementor/icons";
 import { Box as Box4, Chip, Collapse, IconButton as IconButton2 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
 function StatusSection({ label, count, color = "default", defaultExpanded = false, children }) {
-  const [expanded, setExpanded] = useState2(defaultExpanded);
+  const [expanded, setExpanded] = useState3(defaultExpanded);
   if (React5.Children.count(children) === 0) {
     return null;
   }
@@ -927,10 +942,10 @@ function SubpageHeader({ title, onBack, backLabel, icon }) {
 
 // src/components/violation-row.tsx
 import * as React11 from "react";
-import { useState as useState3 } from "react";
 import { getElementIcon, getElementTitle } from "@elementor/editor-elements";
-import { AlertCircleIcon as AlertCircleIcon2, BulbIcon as BulbIcon2, CheckIcon, ChevronDownIcon as ChevronDownIcon2, EyeIcon, HelpIcon } from "@elementor/icons";
-import { Alert, AlertTitle, Box as Box7, Collapse as Collapse2, IconButton as IconButton5, Tooltip as Tooltip3, Typography as Typography6 } from "@elementor/ui";
+import { useFloatingPanelZIndex as useFloatingPanelZIndex2 } from "@elementor/editor-floating-panels";
+import { CheckIcon, ChevronDownIcon as ChevronDownIcon2, HelpIcon, InfoCircleIcon, WandIcon as WandIcon2 } from "@elementor/icons";
+import { Alert, Box as Box7, Collapse as Collapse2, IconButton as IconButton5, Tooltip as Tooltip3, Typography as Typography6 } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
 
 // src/hooks/focus-violation.ts
@@ -997,7 +1012,7 @@ import { isAngieAvailable, sendPromptToAngie } from "@elementor/editor-mcp";
 import { AngieIcon } from "@elementor/icons";
 import { IconButton as IconButton4, Tooltip as Tooltip2 } from "@elementor/ui";
 import { __ as __10 } from "@wordpress/i18n";
-function FixViolationWithAngie({ prompt }) {
+function FixViolationWithAngie({ prompt, panelZIndex }) {
   const label = __10("Fix with Angie", "elementor");
   const href = `#angie-prompt=${encodeURIComponent(prompt)}`;
   const handleClick = (event) => {
@@ -1016,18 +1031,7 @@ function FixViolationWithAngie({ prompt }) {
       })
     );
   };
-  return /* @__PURE__ */ React7.createElement(Tooltip2, { title: label }, /* @__PURE__ */ React7.createElement(
-    IconButton4,
-    {
-      className: "violation-hover-icon",
-      component: "a",
-      href,
-      size: "small",
-      "aria-label": label,
-      onClick: handleClick
-    },
-    /* @__PURE__ */ React7.createElement(AngieIcon, { fontSize: "tiny" })
-  ));
+  return /* @__PURE__ */ React7.createElement(Tooltip2, { title: label, placement: "top", PopperProps: { sx: { zIndex: panelZIndex } } }, /* @__PURE__ */ React7.createElement(IconButton4, { component: "a", href, size: "small", "aria-label": label, onClick: handleClick }, /* @__PURE__ */ React7.createElement(AngieIcon, { fontSize: "tiny" })));
 }
 
 // src/components/severity-icons.tsx
@@ -1045,19 +1049,30 @@ function SeverityIcon({ severity }) {
 
 // src/components/violation-cta-button.tsx
 import * as React9 from "react";
+import { WandIcon } from "@elementor/icons";
 import { Button as Button3 } from "@elementor/ui";
-function ViolationCtaButton({ ctaLabel, externalUrl, variant = "outlined" }) {
+function ViolationCtaButton({ ctaLabel, externalUrl, variant = "outlined", withIcon = false }) {
   const handleClick = (event) => {
     event.stopPropagation();
     event.preventDefault();
     window.open(externalUrl, "_blank", "noopener");
   };
-  return /* @__PURE__ */ React9.createElement(Button3, { variant, color: "secondary", size: "small", onClick: handleClick }, ctaLabel);
+  return /* @__PURE__ */ React9.createElement(
+    Button3,
+    {
+      variant,
+      color: "secondary",
+      size: "small",
+      startIcon: withIcon ? /* @__PURE__ */ React9.createElement(WandIcon, { fontSize: "tiny", "aria-hidden": true }) : void 0,
+      onClick: handleClick
+    },
+    ctaLabel
+  );
 }
 
 // src/components/violation-icons.tsx
 import * as React10 from "react";
-import { FileSettingsIcon, SettingsIcon, ShieldCheckIcon } from "@elementor/icons";
+import { FileSettingsIcon, SettingsIcon } from "@elementor/icons";
 import { Box as Box6 } from "@elementor/ui";
 function ViolationIcon({ violation, widgetIcon }) {
   if (widgetIcon) {
@@ -1077,7 +1092,7 @@ function ViolationIcon({ violation, widgetIcon }) {
   if (violation.targetHint === "site-settings" || violation.targetHint === "site-identity-settings") {
     return /* @__PURE__ */ React10.createElement(SettingsIcon, { fontSize: "inherit", "aria-hidden": true });
   }
-  return /* @__PURE__ */ React10.createElement(ShieldCheckIcon, { fontSize: "inherit", "aria-hidden": true });
+  return /* @__PURE__ */ React10.createElement(SettingsIcon, { fontSize: "inherit", "aria-hidden": true });
 }
 
 // src/components/violation-row.tsx
@@ -1086,13 +1101,40 @@ function SkipReasonTooltip({ reason }) {
 }
 function StatusIndicator({ audit: audit26, violations }) {
   if (violations) {
-    return /* @__PURE__ */ React11.createElement(React11.Fragment, null, isScoredAudit(audit26) && /* @__PURE__ */ React11.createElement(Typography6, { variant: "caption", color: "text.secondary", fontWeight: "bold" }, violations.length), /* @__PURE__ */ React11.createElement(SeverityIcon, { severity: audit26.severity }));
+    return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(SeverityIcon, { severity: audit26.severity }), isScoredAudit(audit26) && /* @__PURE__ */ React11.createElement(Typography6, { variant: "caption", color: "text.secondary", fontWeight: "bold" }, violations.length));
   }
   return /* @__PURE__ */ React11.createElement(CheckIcon, { fontSize: "small", color: "success" });
 }
-function ViolationRow({ audit: audit26, skipReason, violations }) {
-  const [expanded, setExpanded] = useState3(false);
-  const toggleExpanded = () => setExpanded((value) => !value);
+function GuidanceAction({ violation }) {
+  const hasPrimaryCta = !!(violation.ctaLabel && violation.externalUrl);
+  if (!hasPrimaryCta) {
+    return null;
+  }
+  return /* @__PURE__ */ React11.createElement(Box7, { sx: { display: "flex", alignItems: "center", gap: 1 } }, /* @__PURE__ */ React11.createElement(
+    ViolationCtaButton,
+    {
+      ctaLabel: violation.ctaLabel,
+      externalUrl: violation.externalUrl,
+      withIcon: true
+    }
+  ), violation.secondaryCtaLabel && violation.secondaryCtaUrl && /* @__PURE__ */ React11.createElement(
+    ViolationCtaButton,
+    {
+      ctaLabel: violation.secondaryCtaLabel,
+      externalUrl: violation.secondaryCtaUrl,
+      variant: "text"
+    }
+  ));
+}
+function ViolationRow({ audit: audit26, expanded, onToggleExpand, skipReason, violations }) {
+  const primaryViolation = violations?.[0];
+  const isGuidanceFocusable = !!primaryViolation;
+  const panelZIndex = useFloatingPanelZIndex2(AUDIT_PANEL_ID);
+  const handleGuidanceClick = () => {
+    if (isGuidanceFocusable && primaryViolation) {
+      focusViolation(primaryViolation);
+    }
+  };
   return /* @__PURE__ */ React11.createElement(Box7, { sx: { borderBottom: 1, borderColor: "divider", paddingBlock: 0.5 } }, /* @__PURE__ */ React11.createElement(Box7, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React11.createElement(
     Box7,
     {
@@ -1104,16 +1146,16 @@ function ViolationRow({ audit: audit26, skipReason, violations }) {
         gap: 0.5,
         minWidth: 0
       },
-      onClick: toggleExpanded
+      onClick: onToggleExpand
     },
-    /* @__PURE__ */ React11.createElement(Typography6, { variant: "body2", sx: { flex: 1 } }, audit26.title),
+    /* @__PURE__ */ React11.createElement(Typography6, { variant: "subtitle2", color: "text.secondary", sx: { flex: 1 } }, audit26.title),
     !skipReason && /* @__PURE__ */ React11.createElement(StatusIndicator, { audit: audit26, violations })
   ), skipReason && /* @__PURE__ */ React11.createElement(SkipReasonTooltip, { reason: skipReason }), /* @__PURE__ */ React11.createElement(
     IconButton5,
     {
       size: "small",
       "aria-label": expanded ? __11("Collapse", "elementor") : __11("Expand", "elementor"),
-      onClick: toggleExpanded
+      onClick: onToggleExpand
     },
     /* @__PURE__ */ React11.createElement(
       ChevronDownIcon2,
@@ -1125,25 +1167,19 @@ function ViolationRow({ audit: audit26, skipReason, violations }) {
         }
       }
     )
-  )), /* @__PURE__ */ React11.createElement(Collapse2, { in: expanded }, /* @__PURE__ */ React11.createElement(Box7, { sx: { display: "flex", flexDirection: "column", gap: 1, paddingBlock: 1 } }, /* @__PURE__ */ React11.createElement(
+  )), /* @__PURE__ */ React11.createElement(Collapse2, { in: expanded }, /* @__PURE__ */ React11.createElement(Box7, { sx: { display: "flex", flexDirection: "column", gap: 1, paddingBlock: 1 } }, /* @__PURE__ */ React11.createElement(Tooltip3, { title: audit26.fixHint, placement: "top" }, /* @__PURE__ */ React11.createElement(
     Alert,
     {
       severity: "secondary",
-      sx: { p: 1 },
-      icon: /* @__PURE__ */ React11.createElement(AlertCircleIcon2, { fontSize: "small", color: "secondary", "aria-hidden": true })
+      sx: { p: 1, cursor: isGuidanceFocusable ? "pointer" : void 0 },
+      icon: /* @__PURE__ */ React11.createElement(InfoCircleIcon, { fontSize: "small", "aria-hidden": true }),
+      role: isGuidanceFocusable ? "button" : void 0,
+      tabIndex: isGuidanceFocusable ? 0 : void 0,
+      onClick: isGuidanceFocusable ? handleGuidanceClick : void 0,
+      onKeyDown: isGuidanceFocusable ? onKeyboardClick(handleGuidanceClick) : void 0
     },
-    /* @__PURE__ */ React11.createElement(AlertTitle, null, /* @__PURE__ */ React11.createElement(Typography6, { variant: "caption", component: "p", color: "text.primary", fontWeight: "bold" }, __11("What's the issue", "elementor"))),
     /* @__PURE__ */ React11.createElement(Typography6, { variant: "caption", component: "p", color: "text.secondary" }, audit26.description)
-  ), /* @__PURE__ */ React11.createElement(
-    Alert,
-    {
-      severity: "info",
-      sx: { p: 1 },
-      icon: /* @__PURE__ */ React11.createElement(BulbIcon2, { fontSize: "small", color: "info", "aria-hidden": true })
-    },
-    /* @__PURE__ */ React11.createElement(AlertTitle, null, /* @__PURE__ */ React11.createElement(Typography6, { variant: "caption", component: "p", color: "text.primary", fontWeight: "bold" }, __11("How to resolve", "elementor"))),
-    /* @__PURE__ */ React11.createElement(Typography6, { variant: "caption", component: "p", color: "text.secondary" }, audit26.fixHint)
-  )), violations && violations.length > 0 && /* @__PURE__ */ React11.createElement(Box7, { role: "list", sx: { paddingBlockEnd: 1, paddingInlineStart: 2 } }, violations.map((violation, idx) => {
+  )), primaryViolation && /* @__PURE__ */ React11.createElement(GuidanceAction, { violation: primaryViolation })), violations && violations.length > 0 && /* @__PURE__ */ React11.createElement(Box7, { 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;
     const rowLabel = elementTitle ? `${elementTitle} - ${violation.label}` : violation.label;
@@ -1160,45 +1196,21 @@ function ViolationRow({ audit: audit26, skipReason, violations }) {
           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
-          }
+          "&:hover": { bgcolor: "action.hover" }
         }
       },
       /* @__PURE__ */ React11.createElement(ViolationIcon, { violation, widgetIcon }),
       /* @__PURE__ */ React11.createElement(Box7, { sx: { flex: 1 } }, /* @__PURE__ */ React11.createElement(Typography6, { variant: "caption" }, rowLabel), violation.detail && /* @__PURE__ */ React11.createElement(Typography6, { variant: "caption", color: "text.secondary" }, violation.detail)),
-      violation.angieFix && /* @__PURE__ */ React11.createElement(
+      violation.angieFix ? /* @__PURE__ */ React11.createElement(
         FixViolationWithAngie,
         {
-          prompt: violation.angiePrompt ?? buildAngiePrompt(rowLabel)
-        }
-      ),
-      violation.ctaLabel && violation.externalUrl ? /* @__PURE__ */ React11.createElement(Box7, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React11.createElement(
-        ViolationCtaButton,
-        {
-          ctaLabel: violation.ctaLabel,
-          externalUrl: violation.externalUrl
-        }
-      ), violation.secondaryCtaLabel && violation.secondaryCtaUrl && /* @__PURE__ */ React11.createElement(
-        ViolationCtaButton,
-        {
-          ctaLabel: violation.secondaryCtaLabel,
-          externalUrl: violation.secondaryCtaUrl,
-          variant: "text"
-        }
-      )) : /* @__PURE__ */ React11.createElement(
-        EyeIcon,
-        {
-          className: "violation-hover-icon",
-          fontSize: "tiny",
-          "aria-hidden": true
+          prompt: violation.angiePrompt ?? buildAngiePrompt(rowLabel),
+          panelZIndex
         }
-      )
+      ) : /* @__PURE__ */ React11.createElement(WandIcon2, { fontSize: "tiny", "aria-hidden": true })
     );
   }))));
 }
@@ -1209,6 +1221,7 @@ function AllAuditsPage({ initialExpandedStatus, onBack, report }) {
   const expandFail = !initialExpandedStatus || initialExpandedStatus === "fail";
   const expandPass = initialExpandedStatus === "pass";
   const expandSkipped = initialExpandedStatus === "skipped";
+  const { expandedId, toggle } = useSingleExpandedCard();
   return /* @__PURE__ */ React12.createElement(Box8, { key: initialExpandedStatus ?? "default" }, /* @__PURE__ */ React12.createElement(SubpageHeader, { title: __12("All audits", "elementor"), onBack }), /* @__PURE__ */ React12.createElement(Box8, { sx: { p: 1 } }, /* @__PURE__ */ React12.createElement(
     StatusSection,
     {
@@ -1217,7 +1230,16 @@ function AllAuditsPage({ initialExpandedStatus, onBack, report }) {
       color: auditStatusColor("fail"),
       defaultExpanded: expandFail
     },
-    failed.map((r) => /* @__PURE__ */ React12.createElement(ViolationRow, { key: r.audit.id, audit: r.audit, violations: r.result.violations }))
+    failed.map((r) => /* @__PURE__ */ React12.createElement(
+      ViolationRow,
+      {
+        key: r.audit.id,
+        audit: r.audit,
+        violations: r.result.violations,
+        expanded: expandedId === r.audit.id,
+        onToggleExpand: () => toggle(r.audit.id)
+      }
+    ))
   ), /* @__PURE__ */ React12.createElement(
     StatusSection,
     {
@@ -1226,7 +1248,15 @@ function AllAuditsPage({ initialExpandedStatus, onBack, report }) {
       color: auditStatusColor("pass"),
       defaultExpanded: expandPass
     },
-    passed.map((r) => /* @__PURE__ */ React12.createElement(ViolationRow, { key: r.audit.id, audit: r.audit }))
+    passed.map((r) => /* @__PURE__ */ React12.createElement(
+      ViolationRow,
+      {
+        key: r.audit.id,
+        audit: r.audit,
+        expanded: expandedId === r.audit.id,
+        onToggleExpand: () => toggle(r.audit.id)
+      }
+    ))
   ), /* @__PURE__ */ React12.createElement(
     StatusSection,
     {
@@ -1235,7 +1265,16 @@ function AllAuditsPage({ initialExpandedStatus, onBack, report }) {
       color: auditStatusColor("skipped"),
       defaultExpanded: expandSkipped
     },
-    skipped.map((r) => /* @__PURE__ */ React12.createElement(ViolationRow, { key: r.audit.id, audit: r.audit, skipReason: r.result.reason }))
+    skipped.map((r) => /* @__PURE__ */ React12.createElement(
+      ViolationRow,
+      {
+        key: r.audit.id,
+        audit: r.audit,
+        skipReason: r.result.reason,
+        expanded: expandedId === r.audit.id,
+        onToggleExpand: () => toggle(r.audit.id)
+      }
+    ))
   )));
 }
 
@@ -1245,19 +1284,20 @@ import { Box as Box9 } from "@elementor/ui";
 import { __ as __13 } from "@wordpress/i18n";
 
 // src/components/category-icons.ts
-import { BoltIcon, ElementorAccessibilityIcon, FileSearchIcon, Settings2Icon, ShieldCheckIcon as ShieldCheckIcon2 } from "@elementor/icons";
+import { BoltIcon, ElementorAccessibilityIcon, FileSearchIcon, Settings2Icon, ShieldCheckIcon } from "@elementor/icons";
 var CATEGORY_ICONS = {
   "best-practices": Settings2Icon,
   seo: FileSearchIcon,
   accessibility: ElementorAccessibilityIcon,
   performance: BoltIcon,
-  compliance: ShieldCheckIcon2
+  compliance: ShieldCheckIcon
 };
 
 // src/components/pages/category-page.tsx
 function CategoryPage({ category, report, onBack }) {
   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 /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
     SubpageHeader,
     {
@@ -1274,8 +1314,34 @@ function CategoryPage({ category, report, onBack }) {
       color: "error",
       defaultExpanded: true
     },
-    failed.map((r) => /* @__PURE__ */ React13.createElement(ViolationRow, { key: r.audit.id, audit: r.audit, violations: r.result.violations }))
-  ), /* @__PURE__ */ React13.createElement(StatusSection, { label: __13("Passed audits", "elementor"), count: passed.length, color: "success" }, passed.map((r) => /* @__PURE__ */ React13.createElement(ViolationRow, { key: r.audit.id, audit: r.audit })))));
+    failed.map((r) => /* @__PURE__ */ React13.createElement(
+      ViolationRow,
+      {
+        key: r.audit.id,
+        audit: r.audit,
+        violations: r.result.violations,
+        expanded: expandedId === r.audit.id,
+        onToggleExpand: () => toggle(r.audit.id)
+      }
+    ))
+  ), /* @__PURE__ */ React13.createElement(StatusSection, { label: __13("Passed audits", "elementor"), count: passed.length, color: "success" }, passed.map((r) => /* @__PURE__ */ React13.createElement(
+    ViolationRow,
+    {
+      key: r.audit.id,
+      audit: r.audit,
+      expanded: expandedId === r.audit.id,
+      onToggleExpand: () => toggle(r.audit.id)
+    }
+  ))), /* @__PURE__ */ React13.createElement(StatusSection, { label: __13("Skipped audits", "elementor"), count: skipped.length, color: "default" }, skipped.map((r) => /* @__PURE__ */ React13.createElement(
+    ViolationRow,
+    {
+      key: r.audit.id,
+      audit: r.audit,
+      skipReason: r.result.reason,
+      expanded: expandedId === r.audit.id,
+      onToggleExpand: () => toggle(r.audit.id)
+    }
+  )))));
 }
 
 // src/components/pages/issues-page.tsx
@@ -1602,26 +1668,6 @@ var PROMOTIONS = [
       );
     },
     getCtaUrl: firstFailExternalUrl
-  },
-  {
-    auditId: "audits/images-inefficient-format",
-    icon: ShieldHalfFilledIcon,
-    ctaLabel: __19("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 sprintf3(
-        /* translators: %d: number of images served in an inefficient format. */
-        _n("%d image", "%d images", count, "elementor"),
-        count
-      );
-    },
-    getCtaUrl: firstFailExternalUrl
   }
 ];
 
@@ -1903,13 +1949,13 @@ function ReportShell({ report }) {
 // src/components/audit-panel.tsx
 function AuditPanel() {
   const { status, report, error, run } = useAuditReport();
-  const currentDocumentId = getCurrentDocumentId2() ?? 0;
-  const onRun = () => run(currentDocumentId);
+  const hostDocumentId = getHostDocumentId3() ?? 0;
+  const onRun = () => run(hostDocumentId);
   const lastScanLabel = report ? new Date(report.runAt).toLocaleTimeString() : null;
   return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
     FloatingPanelHeader,
     {
-      panelId: "audit-panel",
+      panelId: AUDIT_PANEL_ID,
       title: __23("Page Audit", "elementor"),
       badge: __23("Beta", "elementor"),
       titleVariant: "subtitle2"
@@ -1929,7 +1975,7 @@ function AuditPanel() {
       variant: "contained",
       size: "small",
       onClick: onRun,
-      disabled: status === "loading" || currentDocumentId === 0
+      disabled: status === "loading" || hostDocumentId === 0
     },
     lastScanLabel ? __23("Re-scan", "elementor") : __23("Run page audit", "elementor")
   )));
@@ -1957,7 +2003,7 @@ function useAuditToggleProps() {
   const { toggle } = auditPanel.useFloatingPanelActions();
   return {
     title: __24("Audit Page", "elementor"),
-    icon: ShieldCheckIcon3,
+    icon: ShieldCheckIcon2,
     selected: isOpen,
     onClick: () => toggle()
   };
@@ -2028,9 +2074,9 @@ var audit2 = {
           auditId: audit2.id,
           label: __26("No accessibility statement has been created for this site.", "elementor"),
           externalUrl: isReady ? ctx.pageContext.ally_accessibility_statement_url : ctx.pageContext.ally_plugin_url,
-          ctaLabel: isReady ? __26("Create", "elementor") : void 0,
+          ctaLabel: __26("Create", "elementor"),
           secondaryCtaLabel: __26("Learn more", "elementor"),
-          secondaryCtaUrl: "https://go.elementor.com/acc-plg-learn-more"
+          secondaryCtaUrl: "https://elementor.com/help/start-using-ally/#statement"
         }
       ]
     };
@@ -2103,7 +2149,8 @@ var audit4 = {
         {
           auditId: audit4.id,
           label: __28("Cookiez plugin is not installed or active.", "elementor"),
-          externalUrl: ctx.pageContext.cookiez_plugin_url
+          externalUrl: ctx.pageContext.cookiez_plugin_url,
+          ctaLabel: __28("Set up cookie consent", "elementor")
         }
       ]
     };
@@ -2615,7 +2662,8 @@ var audit11 = {
           elementId: node.id,
           targetHint: "element-settings",
           label: __35("Image is missing alt text.", "elementor"),
-          externalUrl: ctx.pageContext.ally_plugin_url
+          externalUrl: ctx.pageContext.ally_plugin_url,
+          ctaLabel: __35("Fix with Ally", "elementor")
         });
       }
     });
@@ -2665,7 +2713,8 @@ var audit12 = {
       elementId,
       targetHint: "element-settings",
       label: __36("Image isn't served in a modern format like WebP or AVIF.", "elementor"),
-      externalUrl: ctx.pageContext.image_optimization_plugin_url
+      externalUrl: ctx.pageContext.image_optimization_plugin_url,
+      ctaLabel: __36("Optimize all", "elementor")
     }));
     return violations.length === 0 ? { status: "pass" } : { status: "fail", violations, metadata: { inefficientImageFormatCount } };
   }
@@ -2720,7 +2769,8 @@ var audit13 = {
         __37("Image is %d KB (over 500 KB).", "elementor"),
         kb
       ),
-      externalUrl: ctx.pageContext.image_optimization_plugin_url
+      externalUrl: ctx.pageContext.image_optimization_plugin_url,
+      ctaLabel: __37("Optimize all", "elementor")
     }));
     return violations.length === 0 ? { status: "pass" } : { status: "fail", violations, metadata: { oversizedImageCount } };
   }