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

package/dist/index.js

@@ -37,26 +37,53 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
-var import_editor_floating_panels3 = require("@elementor/editor-floating-panels");
+var import_editor_floating_panels5 = require("@elementor/editor-floating-panels");
 var import_store4 = require("@elementor/store");
 
 // src/editor-app-bar.tsx
 var import_editor_app_bar = require("@elementor/editor-app-bar");
 
 // src/hooks/use-audit-toggle-props.ts
-var import_icons12 = require("@elementor/icons");
+var import_icons13 = require("@elementor/icons");
 var import_i18n24 = require("@wordpress/i18n");
 
 // src/editor-panel.tsx
-var import_editor_floating_panels2 = require("@elementor/editor-floating-panels");
+var import_editor_floating_panels4 = require("@elementor/editor-floating-panels");
 
 // src/components/audit-panel.tsx
 var React25 = __toESM(require("react"));
 var import_editor_elements6 = require("@elementor/editor-elements");
-var import_editor_floating_panels = require("@elementor/editor-floating-panels");
+var import_editor_floating_panels3 = require("@elementor/editor-floating-panels");
 var import_ui24 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
 
+// src/constants.ts
+var import_i18n = require("@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": (0, import_i18n.__)("Best Practices", "elementor"),
+  seo: (0, import_i18n.__)("SEO", "elementor"),
+  accessibility: (0, import_i18n.__)("Accessibility", "elementor"),
+  performance: (0, import_i18n.__)("Performance", "elementor"),
+  compliance: (0, import_i18n.__)("Site compliance", "elementor")
+};
+
 // src/hooks/use-audit-report.ts
 var import_react = require("react");
 var import_editor_elements3 = require("@elementor/editor-elements");
@@ -148,33 +175,6 @@ function getRegisteredAudits() {
   return Array.from(registry.values());
 }
 
-// src/constants.ts
-var import_i18n = require("@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": (0, import_i18n.__)("Best Practices", "elementor"),
-  seo: (0, import_i18n.__)("SEO", "elementor"),
-  accessibility: (0, import_i18n.__)("Accessibility", "elementor"),
-  performance: (0, import_i18n.__)("Performance", "elementor"),
-  compliance: (0, import_i18n.__)("Site compliance", "elementor")
-};
-
 // src/utils/audit-status-summary.ts
 var import_i18n2 = require("@wordpress/i18n");
 
@@ -598,7 +598,10 @@ function toSnapshot(element) {
 
 // src/runner.ts
 async function runPageAudit(documentId) {
-  const tree = buildSnapshotTree((0, import_editor_elements2.getElements)());
+  if (documentId !== (0, import_editor_elements2.getHostDocumentId)()) {
+    throw new Error("runPageAudit: documentId must match the host document.");
+  }
+  const tree = buildSnapshotTree((0, import_editor_elements2.getHostDocumentElements)());
   const imageSizeRequests = extractImageSizeRequests(tree);
   const pageContext = await fetchPageContext(documentId, imageSizeRequests);
   const elements = { documentId, tree };
@@ -687,7 +690,7 @@ function useAuditReport() {
   const report = (0, import_store2.__useSelector)((state) => selectReport(state));
   const error = (0, import_store2.__useSelector)((state) => selectError(state));
   const dispatch = (0, import_store2.__useDispatch)();
-  const documentId = (0, import_editor_elements3.getCurrentDocumentId)() ?? 0;
+  const documentId = (0, import_editor_elements3.getHostDocumentId)() ?? 0;
   (0, import_react.useEffect)(() => {
     if (!documentId || report?.documentId === documentId) {
       return;
@@ -719,6 +722,7 @@ function useAuditReport() {
 // src/components/audit-feedback.tsx
 var React = __toESM(require("react"));
 var import_react2 = require("react");
+var import_editor_floating_panels = require("@elementor/editor-floating-panels");
 var import_editor_notifications = require("@elementor/editor-notifications");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_events = require("@elementor/events");
@@ -748,6 +752,7 @@ function AuditFeedback() {
   const [feedbackText, setFeedbackText] = (0, import_react2.useState)("");
   const [isSubmitting, setIsSubmitting] = (0, import_react2.useState)(false);
   const { dispatchEvent: trackEvent = (...args) => void args } = (0, import_events.useMixpanel)();
+  const panelZIndex = (0, import_editor_floating_panels.useFloatingPanelZIndex)(AUDIT_PANEL_ID);
   if (!(0, import_editor_v1_adapters.isExperimentActive)(FEEDBACK_EXPERIMENT_NAME)) {
     return null;
   }
@@ -789,7 +794,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(import_ui.Tooltip, { title: triggerLabel, placement: "top" }, /* @__PURE__ */ React.createElement(import_ui.IconButton, { size: "small", "aria-label": triggerLabel, onClick: handleOpen }, /* @__PURE__ */ React.createElement(import_icons.MessageLinesIcon, { fontSize: "small" }))), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_ui.Tooltip, { title: triggerLabel, placement: "top", PopperProps: { sx: { zIndex: panelZIndex } } }, /* @__PURE__ */ React.createElement(import_ui.IconButton, { size: "small", "aria-label": triggerLabel, onClick: handleOpen }, /* @__PURE__ */ React.createElement(import_icons.MessageLinesIcon, { fontSize: "small" }))), /* @__PURE__ */ React.createElement(
     import_ui.Dialog,
     {
       open: isOpen,
@@ -893,14 +898,24 @@ var React12 = __toESM(require("react"));
 var import_ui11 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
 
+// src/hooks/use-single-expanded-card.ts
+var import_react3 = require("react");
+function useSingleExpandedCard(initialId = null) {
+  const [expandedId, setExpandedId] = (0, import_react3.useState)(initialId);
+  const toggle = (id) => {
+    setExpandedId((current) => current === id ? null : id);
+  };
+  return { expandedId, toggle };
+}
+
 // src/components/status-section.tsx
 var React5 = __toESM(require("react"));
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_icons2 = require("@elementor/icons");
 var import_ui5 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 function StatusSection({ label, count, color = "default", defaultExpanded = false, children }) {
-  const [expanded, setExpanded] = (0, import_react3.useState)(defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react4.useState)(defaultExpanded);
   if (React5.Children.count(children) === 0) {
     return null;
   }
@@ -943,9 +958,9 @@ function SubpageHeader({ title, onBack, backLabel, icon }) {
 
 // src/components/violation-row.tsx
 var React11 = __toESM(require("react"));
-var import_react4 = require("react");
 var import_editor_elements5 = require("@elementor/editor-elements");
-var import_icons7 = require("@elementor/icons");
+var import_editor_floating_panels2 = require("@elementor/editor-floating-panels");
+var import_icons8 = require("@elementor/icons");
 var import_ui10 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
 
@@ -1013,7 +1028,7 @@ var import_editor_mcp = require("@elementor/editor-mcp");
 var import_icons4 = require("@elementor/icons");
 var import_ui7 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
-function FixViolationWithAngie({ prompt }) {
+function FixViolationWithAngie({ prompt, panelZIndex }) {
   const label = (0, import_i18n10.__)("Fix with Angie", "elementor");
   const href = `#angie-prompt=${encodeURIComponent(prompt)}`;
   const handleClick = (event) => {
@@ -1032,18 +1047,7 @@ function FixViolationWithAngie({ prompt }) {
       })
     );
   };
-  return /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: label }, /* @__PURE__ */ React7.createElement(
-    import_ui7.IconButton,
-    {
-      className: "violation-hover-icon",
-      component: "a",
-      href,
-      size: "small",
-      "aria-label": label,
-      onClick: handleClick
-    },
-    /* @__PURE__ */ React7.createElement(import_icons4.AngieIcon, { fontSize: "tiny" })
-  ));
+  return /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: label, placement: "top", PopperProps: { sx: { zIndex: panelZIndex } } }, /* @__PURE__ */ React7.createElement(import_ui7.IconButton, { component: "a", href, size: "small", "aria-label": label, onClick: handleClick }, /* @__PURE__ */ React7.createElement(import_icons4.AngieIcon, { fontSize: "tiny" })));
 }
 
 // src/components/severity-icons.tsx
@@ -1061,19 +1065,30 @@ function SeverityIcon({ severity }) {
 
 // src/components/violation-cta-button.tsx
 var React9 = __toESM(require("react"));
+var import_icons6 = require("@elementor/icons");
 var import_ui8 = require("@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(import_ui8.Button, { variant, color: "secondary", size: "small", onClick: handleClick }, ctaLabel);
+  return /* @__PURE__ */ React9.createElement(
+    import_ui8.Button,
+    {
+      variant,
+      color: "secondary",
+      size: "small",
+      startIcon: withIcon ? /* @__PURE__ */ React9.createElement(import_icons6.WandIcon, { fontSize: "tiny", "aria-hidden": true }) : void 0,
+      onClick: handleClick
+    },
+    ctaLabel
+  );
 }
 
 // src/components/violation-icons.tsx
 var React10 = __toESM(require("react"));
-var import_icons6 = require("@elementor/icons");
+var import_icons7 = require("@elementor/icons");
 var import_ui9 = require("@elementor/ui");
 function ViolationIcon({ violation, widgetIcon }) {
   if (widgetIcon) {
@@ -1088,27 +1103,54 @@ function ViolationIcon({ violation, widgetIcon }) {
     );
   }
   if (violation.targetHint === "page-settings") {
-    return /* @__PURE__ */ React10.createElement(import_icons6.FileSettingsIcon, { fontSize: "inherit", "aria-hidden": true });
+    return /* @__PURE__ */ React10.createElement(import_icons7.FileSettingsIcon, { fontSize: "inherit", "aria-hidden": true });
   }
   if (violation.targetHint === "site-settings" || violation.targetHint === "site-identity-settings") {
-    return /* @__PURE__ */ React10.createElement(import_icons6.SettingsIcon, { fontSize: "inherit", "aria-hidden": true });
+    return /* @__PURE__ */ React10.createElement(import_icons7.SettingsIcon, { fontSize: "inherit", "aria-hidden": true });
   }
-  return /* @__PURE__ */ React10.createElement(import_icons6.ShieldCheckIcon, { fontSize: "inherit", "aria-hidden": true });
+  return /* @__PURE__ */ React10.createElement(import_icons7.SettingsIcon, { fontSize: "inherit", "aria-hidden": true });
 }
 
 // src/components/violation-row.tsx
 function SkipReasonTooltip({ reason }) {
-  return /* @__PURE__ */ React11.createElement(import_ui10.Tooltip, { title: reason, placement: "top" }, /* @__PURE__ */ React11.createElement(import_ui10.Box, { "aria-label": reason, component: "span", sx: { display: "inline-flex", alignItems: "center" } }, /* @__PURE__ */ React11.createElement(import_icons7.HelpIcon, { fontSize: "small", color: "action" })));
+  return /* @__PURE__ */ React11.createElement(import_ui10.Tooltip, { title: reason, placement: "top" }, /* @__PURE__ */ React11.createElement(import_ui10.Box, { "aria-label": reason, component: "span", sx: { display: "inline-flex", alignItems: "center" } }, /* @__PURE__ */ React11.createElement(import_icons8.HelpIcon, { fontSize: "small", color: "action" })));
 }
 function StatusIndicator({ audit: audit26, violations }) {
   if (violations) {
-    return /* @__PURE__ */ React11.createElement(React11.Fragment, null, isScoredAudit(audit26) && /* @__PURE__ */ React11.createElement(import_ui10.Typography, { 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(import_ui10.Typography, { variant: "caption", color: "text.secondary", fontWeight: "bold" }, violations.length));
   }
-  return /* @__PURE__ */ React11.createElement(import_icons7.CheckIcon, { fontSize: "small", color: "success" });
+  return /* @__PURE__ */ React11.createElement(import_icons8.CheckIcon, { fontSize: "small", color: "success" });
 }
-function ViolationRow({ audit: audit26, skipReason, violations }) {
-  const [expanded, setExpanded] = (0, import_react4.useState)(false);
-  const toggleExpanded = () => setExpanded((value) => !value);
+function GuidanceAction({ violation }) {
+  const hasPrimaryCta = !!(violation.ctaLabel && violation.externalUrl);
+  if (!hasPrimaryCta) {
+    return null;
+  }
+  return /* @__PURE__ */ React11.createElement(import_ui10.Box, { 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 = (0, import_editor_floating_panels2.useFloatingPanelZIndex)(AUDIT_PANEL_ID);
+  const handleGuidanceClick = () => {
+    if (isGuidanceFocusable && primaryViolation) {
+      focusViolation(primaryViolation);
+    }
+  };
   return /* @__PURE__ */ React11.createElement(import_ui10.Box, { sx: { borderBottom: 1, borderColor: "divider", paddingBlock: 0.5 } }, /* @__PURE__ */ React11.createElement(import_ui10.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React11.createElement(
     import_ui10.Box,
     {
@@ -1120,19 +1162,19 @@ function ViolationRow({ audit: audit26, skipReason, violations }) {
         gap: 0.5,
         minWidth: 0
       },
-      onClick: toggleExpanded
+      onClick: onToggleExpand
     },
-    /* @__PURE__ */ React11.createElement(import_ui10.Typography, { variant: "body2", sx: { flex: 1 } }, audit26.title),
+    /* @__PURE__ */ React11.createElement(import_ui10.Typography, { 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(
     import_ui10.IconButton,
     {
       size: "small",
       "aria-label": expanded ? (0, import_i18n11.__)("Collapse", "elementor") : (0, import_i18n11.__)("Expand", "elementor"),
-      onClick: toggleExpanded
+      onClick: onToggleExpand
     },
     /* @__PURE__ */ React11.createElement(
-      import_icons7.ChevronDownIcon,
+      import_icons8.ChevronDownIcon,
       {
         fontSize: "small",
         sx: {
@@ -1141,25 +1183,19 @@ function ViolationRow({ audit: audit26, skipReason, violations }) {
         }
       }
     )
-  )), /* @__PURE__ */ React11.createElement(import_ui10.Collapse, { in: expanded }, /* @__PURE__ */ React11.createElement(import_ui10.Box, { sx: { display: "flex", flexDirection: "column", gap: 1, paddingBlock: 1 } }, /* @__PURE__ */ React11.createElement(
+  )), /* @__PURE__ */ React11.createElement(import_ui10.Collapse, { in: expanded }, /* @__PURE__ */ React11.createElement(import_ui10.Box, { sx: { display: "flex", flexDirection: "column", gap: 1, paddingBlock: 1 } }, /* @__PURE__ */ React11.createElement(import_ui10.Tooltip, { title: audit26.fixHint, placement: "top" }, /* @__PURE__ */ React11.createElement(
     import_ui10.Alert,
     {
       severity: "secondary",
-      sx: { p: 1 },
-      icon: /* @__PURE__ */ React11.createElement(import_icons7.AlertCircleIcon, { fontSize: "small", color: "secondary", "aria-hidden": true })
+      sx: { p: 1, cursor: isGuidanceFocusable ? "pointer" : void 0 },
+      icon: /* @__PURE__ */ React11.createElement(import_icons8.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(import_ui10.AlertTitle, null, /* @__PURE__ */ React11.createElement(import_ui10.Typography, { variant: "caption", component: "p", color: "text.primary", fontWeight: "bold" }, (0, import_i18n11.__)("What's the issue", "elementor"))),
     /* @__PURE__ */ React11.createElement(import_ui10.Typography, { variant: "caption", component: "p", color: "text.secondary" }, audit26.description)
-  ), /* @__PURE__ */ React11.createElement(
-    import_ui10.Alert,
-    {
-      severity: "info",
-      sx: { p: 1 },
-      icon: /* @__PURE__ */ React11.createElement(import_icons7.BulbIcon, { fontSize: "small", color: "info", "aria-hidden": true })
-    },
-    /* @__PURE__ */ React11.createElement(import_ui10.AlertTitle, null, /* @__PURE__ */ React11.createElement(import_ui10.Typography, { variant: "caption", component: "p", color: "text.primary", fontWeight: "bold" }, (0, import_i18n11.__)("How to resolve", "elementor"))),
-    /* @__PURE__ */ React11.createElement(import_ui10.Typography, { variant: "caption", component: "p", color: "text.secondary" }, audit26.fixHint)
-  )), violations && violations.length > 0 && /* @__PURE__ */ React11.createElement(import_ui10.Box, { 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(import_ui10.Box, { role: "list", sx: { paddingBlockEnd: 1 } }, violations.map((violation, idx) => {
     const widgetIcon = violation.elementId ? (0, import_editor_elements5.getElementIcon)(violation.elementId) : null;
     const elementTitle = violation.elementId ? (0, import_editor_elements5.getElementTitle)(violation.elementId) : null;
     const rowLabel = elementTitle ? `${elementTitle} - ${violation.label}` : violation.label;
@@ -1176,45 +1212,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(import_ui10.Box, { sx: { flex: 1 } }, /* @__PURE__ */ React11.createElement(import_ui10.Typography, { variant: "caption" }, rowLabel), violation.detail && /* @__PURE__ */ React11.createElement(import_ui10.Typography, { 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(import_ui10.Box, { 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(
-        import_icons7.EyeIcon,
-        {
-          className: "violation-hover-icon",
-          fontSize: "tiny",
-          "aria-hidden": true
+          prompt: violation.angiePrompt ?? buildAngiePrompt(rowLabel),
+          panelZIndex
         }
-      )
+      ) : /* @__PURE__ */ React11.createElement(import_icons8.WandIcon, { fontSize: "tiny", "aria-hidden": true })
     );
   }))));
 }
@@ -1225,6 +1237,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(import_ui11.Box, { key: initialExpandedStatus ?? "default" }, /* @__PURE__ */ React12.createElement(SubpageHeader, { title: (0, import_i18n12.__)("All audits", "elementor"), onBack }), /* @__PURE__ */ React12.createElement(import_ui11.Box, { sx: { p: 1 } }, /* @__PURE__ */ React12.createElement(
     StatusSection,
     {
@@ -1233,7 +1246,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,
     {
@@ -1242,7 +1264,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,
     {
@@ -1251,7 +1281,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)
+      }
+    ))
   )));
 }
 
@@ -1261,19 +1300,20 @@ var import_ui12 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
 
 // src/components/category-icons.ts
-var import_icons8 = require("@elementor/icons");
+var import_icons9 = require("@elementor/icons");
 var CATEGORY_ICONS = {
-  "best-practices": import_icons8.Settings2Icon,
-  seo: import_icons8.FileSearchIcon,
-  accessibility: import_icons8.ElementorAccessibilityIcon,
-  performance: import_icons8.BoltIcon,
-  compliance: import_icons8.ShieldCheckIcon
+  "best-practices": import_icons9.Settings2Icon,
+  seo: import_icons9.FileSearchIcon,
+  accessibility: import_icons9.ElementorAccessibilityIcon,
+  performance: import_icons9.BoltIcon,
+  compliance: import_icons9.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,
     {
@@ -1290,8 +1330,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: (0, import_i18n13.__)("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: (0, import_i18n13.__)("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: (0, import_i18n13.__)("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
@@ -1428,7 +1494,7 @@ function AuditStatusesSection({ report, onStatusClick }) {
 
 // src/components/issues-category-row.tsx
 var React16 = __toESM(require("react"));
-var import_icons9 = require("@elementor/icons");
+var import_icons10 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
 function IssuesCategoryRow({ category, label, counts, onClick }) {
   const isRtl = "rtl" === (0, import_ui15.useTheme)().direction;
@@ -1458,7 +1524,7 @@ function IssuesCategoryRow({ category, label, counts, onClick }) {
     /* @__PURE__ */ React16.createElement(Icon, { fontSize: "small", color: "action" }),
     /* @__PURE__ */ React16.createElement(import_ui15.Typography, { variant: "body2", fontWeight: "bold", sx: { flex: 1 } }, label),
     /* @__PURE__ */ React16.createElement(import_ui15.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, ALL_SEVERITIES.filter((s) => counts[s] > 0).map((severity) => /* @__PURE__ */ React16.createElement(import_ui15.Box, { key: severity, sx: { display: "flex", alignItems: "center", gap: 0.25 } }, /* @__PURE__ */ React16.createElement(SeverityIcon, { severity }), /* @__PURE__ */ React16.createElement(import_ui15.Typography, { variant: "caption", color: "text.primary", fontWeight: "bold" }, counts[severity])))),
-    /* @__PURE__ */ React16.createElement(import_ui15.Rotate, { in: isRtl }, /* @__PURE__ */ React16.createElement(import_icons9.ChevronRightIcon, { fontSize: "small", color: "action" }))
+    /* @__PURE__ */ React16.createElement(import_ui15.Rotate, { in: isRtl }, /* @__PURE__ */ React16.createElement(import_icons10.ChevronRightIcon, { fontSize: "small", color: "action" }))
   );
 }
 
@@ -1559,7 +1625,7 @@ var import_ui19 = require("@elementor/ui");
 var import_i18n20 = require("@wordpress/i18n");
 
 // src/register-promotions.ts
-var import_icons10 = require("@elementor/icons");
+var import_icons11 = require("@elementor/icons");
 var import_i18n19 = require("@wordpress/i18n");
 function firstFailExternalUrl(run) {
   return run.result.status === "fail" ? run.result.violations[0]?.externalUrl : void 0;
@@ -1567,7 +1633,7 @@ function firstFailExternalUrl(run) {
 var PROMOTIONS = [
   {
     auditId: "audits/images-alt-text",
-    icon: import_icons10.PhotoIcon,
+    icon: import_icons11.PhotoIcon,
     ctaLabel: (0, import_i18n19.__)("Fix with Ally", "elementor"),
     formatSubtitle: (run) => {
       if (run.result.status !== "fail") {
@@ -1587,21 +1653,21 @@ var PROMOTIONS = [
   },
   {
     auditId: "audits/cookie-policy",
-    icon: import_icons10.ElementorCookieIcon,
+    icon: import_icons11.ElementorCookieIcon,
     ctaLabel: (0, import_i18n19.__)("Fix with Cookiez", "elementor"),
     formatSubtitle: (run) => run.result.status === "fail" ? (0, import_i18n19.__)("Generate cookie policy", "elementor") : null,
     getCtaUrl: firstFailExternalUrl
   },
   {
     auditId: "audits/scan-for-cookies",
-    icon: import_icons10.ElementorCookieIcon,
+    icon: import_icons11.ElementorCookieIcon,
     ctaLabel: (0, import_i18n19.__)("Scan", "elementor"),
     formatSubtitle: (run) => run.result.status === "fail" ? (0, import_i18n19.__)("Scan this page for cookies", "elementor") : null,
     getCtaUrl: firstFailExternalUrl
   },
   {
     auditId: "audits/images-too-large",
-    icon: import_icons10.ShieldHalfFilledIcon,
+    icon: import_icons11.ShieldHalfFilledIcon,
     ctaLabel: (0, import_i18n19.__)("Optimize all", "elementor"),
     formatSubtitle: (run) => {
       if (run.result.status !== "fail") {
@@ -1618,26 +1684,6 @@ var PROMOTIONS = [
       );
     },
     getCtaUrl: firstFailExternalUrl
-  },
-  {
-    auditId: "audits/images-inefficient-format",
-    icon: import_icons10.ShieldHalfFilledIcon,
-    ctaLabel: (0, import_i18n19.__)("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 (0, import_i18n19.sprintf)(
-        /* translators: %d: number of images served in an inefficient format. */
-        (0, import_i18n19._n)("%d image", "%d images", count, "elementor"),
-        count
-      );
-    },
-    getCtaUrl: firstFailExternalUrl
   }
 ];
 
@@ -1715,7 +1761,7 @@ function Promotions({ report }) {
 
 // src/components/score-bar.tsx
 var React21 = __toESM(require("react"));
-var import_icons11 = require("@elementor/icons");
+var import_icons12 = require("@elementor/icons");
 var import_ui20 = require("@elementor/ui");
 function ScoreBar({ label, score, onClick }) {
   const isRtl = "rtl" === (0, import_ui20.useTheme)().direction;
@@ -1755,7 +1801,7 @@ function ScoreBar({ label, score, onClick }) {
       },
       score
     ),
-    onClick && /* @__PURE__ */ React21.createElement(import_ui20.Rotate, { in: isRtl }, /* @__PURE__ */ React21.createElement(import_icons11.ChevronRightIcon, { fontSize: "small", color: "action" }))
+    onClick && /* @__PURE__ */ React21.createElement(import_ui20.Rotate, { in: isRtl }, /* @__PURE__ */ React21.createElement(import_icons12.ChevronRightIcon, { fontSize: "small", color: "action" }))
   );
 }
 
@@ -1919,19 +1965,19 @@ function ReportShell({ report }) {
 // src/components/audit-panel.tsx
 function AuditPanel() {
   const { status, report, error, run } = useAuditReport();
-  const currentDocumentId = (0, import_editor_elements6.getCurrentDocumentId)() ?? 0;
-  const onRun = () => run(currentDocumentId);
+  const hostDocumentId = (0, import_editor_elements6.getHostDocumentId)() ?? 0;
+  const onRun = () => run(hostDocumentId);
   const lastScanLabel = report ? new Date(report.runAt).toLocaleTimeString() : null;
   return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
-    import_editor_floating_panels.FloatingPanelHeader,
+    import_editor_floating_panels3.FloatingPanelHeader,
     {
-      panelId: "audit-panel",
+      panelId: AUDIT_PANEL_ID,
       title: (0, import_i18n23.__)("Page Audit", "elementor"),
       badge: (0, import_i18n23.__)("Beta", "elementor"),
       titleVariant: "subtitle2"
     }
   ), /* @__PURE__ */ React25.createElement(
-    import_editor_floating_panels.FloatingPanelBody,
+    import_editor_floating_panels3.FloatingPanelBody,
     {
       sx: status === "ready" ? { display: "flex", flexDirection: "column", overflow: "hidden", minHeight: 0 } : void 0
     },
@@ -1939,20 +1985,20 @@ function AuditPanel() {
     status === "loading" && /* @__PURE__ */ React25.createElement(LoadingPage, null),
     status === "error" && /* @__PURE__ */ React25.createElement(ErrorPage, { message: error ?? "", onRetry: onRun }),
     status === "ready" && report && /* @__PURE__ */ React25.createElement(ReportShell, { report })
-  ), /* @__PURE__ */ React25.createElement(import_editor_floating_panels.FloatingPanelFooter, null, lastScanLabel ? /* @__PURE__ */ React25.createElement(import_ui24.Typography, { variant: "caption", sx: { flex: 1 } }, (0, import_i18n23.__)("Last scan:", "elementor"), " ", lastScanLabel) : /* @__PURE__ */ React25.createElement(import_ui24.Box, { sx: { flex: 1 } }), lastScanLabel && /* @__PURE__ */ React25.createElement(AuditFeedback, null), /* @__PURE__ */ React25.createElement(
+  ), /* @__PURE__ */ React25.createElement(import_editor_floating_panels3.FloatingPanelFooter, null, lastScanLabel ? /* @__PURE__ */ React25.createElement(import_ui24.Typography, { variant: "caption", sx: { flex: 1 } }, (0, import_i18n23.__)("Last scan:", "elementor"), " ", lastScanLabel) : /* @__PURE__ */ React25.createElement(import_ui24.Box, { sx: { flex: 1 } }), lastScanLabel && /* @__PURE__ */ React25.createElement(AuditFeedback, null), /* @__PURE__ */ React25.createElement(
     import_ui24.Button,
     {
       variant: "contained",
       size: "small",
       onClick: onRun,
-      disabled: status === "loading" || currentDocumentId === 0
+      disabled: status === "loading" || hostDocumentId === 0
     },
     lastScanLabel ? (0, import_i18n23.__)("Re-scan", "elementor") : (0, import_i18n23.__)("Run page audit", "elementor")
   )));
 }
 
 // src/editor-panel.tsx
-var auditPanel = (0, import_editor_floating_panels2.createFloatingPanel)({
+var auditPanel = (0, import_editor_floating_panels4.createFloatingPanel)({
   id: AUDIT_PANEL_ID,
   title: "Audit",
   icon: () => null,
@@ -1973,7 +2019,7 @@ function useAuditToggleProps() {
   const { toggle } = auditPanel.useFloatingPanelActions();
   return {
     title: (0, import_i18n24.__)("Audit Page", "elementor"),
-    icon: import_icons12.ShieldCheckIcon,
+    icon: import_icons13.ShieldCheckIcon,
     selected: isOpen,
     onClick: () => toggle()
   };
@@ -2044,9 +2090,9 @@ var audit2 = {
           auditId: audit2.id,
           label: (0, import_i18n26.__)("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 ? (0, import_i18n26.__)("Create", "elementor") : void 0,
+          ctaLabel: (0, import_i18n26.__)("Create", "elementor"),
           secondaryCtaLabel: (0, import_i18n26.__)("Learn more", "elementor"),
-          secondaryCtaUrl: "https://go.elementor.com/acc-plg-learn-more"
+          secondaryCtaUrl: "https://elementor.com/help/start-using-ally/#statement"
         }
       ]
     };
@@ -2119,7 +2165,8 @@ var audit4 = {
         {
           auditId: audit4.id,
           label: (0, import_i18n28.__)("Cookiez plugin is not installed or active.", "elementor"),
-          externalUrl: ctx.pageContext.cookiez_plugin_url
+          externalUrl: ctx.pageContext.cookiez_plugin_url,
+          ctaLabel: (0, import_i18n28.__)("Set up cookie consent", "elementor")
         }
       ]
     };
@@ -2631,7 +2678,8 @@ var audit11 = {
           elementId: node.id,
           targetHint: "element-settings",
           label: (0, import_i18n35.__)("Image is missing alt text.", "elementor"),
-          externalUrl: ctx.pageContext.ally_plugin_url
+          externalUrl: ctx.pageContext.ally_plugin_url,
+          ctaLabel: (0, import_i18n35.__)("Fix with Ally", "elementor")
         });
       }
     });
@@ -2681,7 +2729,8 @@ var audit12 = {
       elementId,
       targetHint: "element-settings",
       label: (0, import_i18n36.__)("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: (0, import_i18n36.__)("Optimize all", "elementor")
     }));
     return violations.length === 0 ? { status: "pass" } : { status: "fail", violations, metadata: { inefficientImageFormatCount } };
   }
@@ -2736,7 +2785,8 @@ var audit13 = {
         (0, import_i18n37.__)("Image is %d KB (over 500 KB).", "elementor"),
         kb
       ),
-      externalUrl: ctx.pageContext.image_optimization_plugin_url
+      externalUrl: ctx.pageContext.image_optimization_plugin_url,
+      ctaLabel: (0, import_i18n37.__)("Optimize all", "elementor")
     }));
     return violations.length === 0 ? { status: "pass" } : { status: "fail", violations, metadata: { oversizedImageCount } };
   }
@@ -3347,7 +3397,7 @@ function registerAllAudits() {
 function init() {
   (0, import_store4.__registerSlice)(slice);
   registerAllAudits();
-  (0, import_editor_floating_panels3.registerFloatingPanel)(auditPanel.panel);
+  (0, import_editor_floating_panels5.registerFloatingPanel)(auditPanel.panel);
   registerAppBarAuditsToggle();
 }
 // Annotate the CommonJS export names for ESM import in node: