@elementor/editor-audits 4.4.0-1121 → 4.4.0-1123

package/dist/index.mjs

@@ -937,7 +937,7 @@ function SubpageHeader({ title, onBack, backLabel, icon }) {
 import * as React12 from "react";
 import { getElementIcon, getElementTitle } from "@elementor/editor-elements";
 import { useFloatingPanelZIndex as useFloatingPanelZIndex2 } from "@elementor/editor-floating-panels";
-import { CheckIcon, ChevronDownIcon as ChevronDownIcon2, HelpIcon, InfoCircleIcon, WandIcon as WandIcon2 } from "@elementor/icons";
+import { CheckIcon, ChevronDownIcon as ChevronDownIcon2, HelpIcon, InfoCircleIcon } 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 __10 } from "@wordpress/i18n";
 
@@ -1003,9 +1003,9 @@ function onKeyboardClick(callback) {
 import * as React8 from "react";
 import { isAngieAvailable, sendPromptToAngie } from "@elementor/editor-mcp";
 import { AngieIcon } from "@elementor/icons";
-import { IconButton as IconButton4, Tooltip as Tooltip2 } from "@elementor/ui";
+import { Button as Button3, IconButton as IconButton4, Tooltip as Tooltip2 } from "@elementor/ui";
 import { __ as __9 } from "@wordpress/i18n";
-function FixViolationWithAngie({ prompt, panelZIndex }) {
+function FixViolationWithAngie({ prompt, panelZIndex, variant = "icon" }) {
   const label = __9("Fix with Angie", "elementor");
   const href = `#angie-prompt=${encodeURIComponent(prompt)}`;
   const handleClick = (event) => {
@@ -1024,6 +1024,21 @@ function FixViolationWithAngie({ prompt, panelZIndex }) {
       })
     );
   };
+  if (variant === "button") {
+    return /* @__PURE__ */ React8.createElement(
+      Button3,
+      {
+        component: "a",
+        href,
+        size: "small",
+        color: "secondary",
+        variant: "outlined",
+        startIcon: /* @__PURE__ */ React8.createElement(AngieIcon, { fontSize: "tiny", "aria-hidden": true }),
+        onClick: handleClick
+      },
+      label
+    );
+  }
   return /* @__PURE__ */ React8.createElement(Tooltip2, { title: label, placement: "top", PopperProps: { sx: { zIndex: panelZIndex } } }, /* @__PURE__ */ React8.createElement(IconButton4, { component: "a", href, size: "small", "aria-label": label, onClick: handleClick }, /* @__PURE__ */ React8.createElement(AngieIcon, { fontSize: "tiny" })));
 }
 
@@ -1035,15 +1050,17 @@ var SEVERITY_CONFIG = {
   warning: { Icon: AlertCircleIcon, color: "warning" },
   info: { Icon: BulbIcon, color: "info" }
 };
+var INFO_ICON_VERTICAL_NUDGE = "translateY(-2px)";
 function SeverityIcon({ severity }) {
   const { Icon, color } = SEVERITY_CONFIG[severity];
-  return /* @__PURE__ */ React9.createElement(Icon, { fontSize: "small", color });
+  const sx = "info" === severity ? { transform: INFO_ICON_VERTICAL_NUDGE } : void 0;
+  return /* @__PURE__ */ React9.createElement(Icon, { fontSize: "small", color, sx });
 }
 
 // src/components/violation-cta-button.tsx
 import * as React10 from "react";
 import { WandIcon } from "@elementor/icons";
-import { Button as Button3 } from "@elementor/ui";
+import { Button as Button4 } from "@elementor/ui";
 function ViolationCtaButton({ ctaLabel, externalUrl, variant = "outlined", withIcon = false }) {
   const handleClick = (event) => {
     event.stopPropagation();
@@ -1051,7 +1068,7 @@ function ViolationCtaButton({ ctaLabel, externalUrl, variant = "outlined", withI
     window.open(externalUrl, "_blank", "noopener");
   };
   return /* @__PURE__ */ React10.createElement(
-    Button3,
+    Button4,
     {
       variant,
       color: "secondary",
@@ -1098,31 +1115,49 @@ function StatusIndicator({ audit: audit26, violations }) {
   }
   return /* @__PURE__ */ React12.createElement(CheckIcon, { fontSize: "small", color: "success" });
 }
-function GuidanceAction({ violation }) {
+function GuidanceAction({
+  violation,
+  sharedAngiePrompt,
+  panelZIndex
+}) {
   const hasPrimaryCta = !!(violation.ctaLabel && violation.externalUrl);
-  if (!hasPrimaryCta) {
+  if (!hasPrimaryCta && !sharedAngiePrompt) {
     return null;
   }
-  return /* @__PURE__ */ React12.createElement(Box7, { display: "flex", alignItems: "center", gap: 1, mt: 1 }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React12.createElement(Box7, { display: "flex", alignItems: "center", gap: 1, mt: 1 }, hasPrimaryCta && /* @__PURE__ */ React12.createElement(
     ViolationCtaButton,
     {
       ctaLabel: violation.ctaLabel,
       externalUrl: violation.externalUrl,
       withIcon: true
     }
-  ), violation.secondaryCtaLabel && violation.secondaryCtaUrl && /* @__PURE__ */ React12.createElement(
+  ), hasPrimaryCta && violation.secondaryCtaLabel && violation.secondaryCtaUrl && /* @__PURE__ */ React12.createElement(
     ViolationCtaButton,
     {
       ctaLabel: violation.secondaryCtaLabel,
       externalUrl: violation.secondaryCtaUrl,
       variant: "text"
     }
-  ));
+  ), sharedAngiePrompt && /* @__PURE__ */ React12.createElement(FixViolationWithAngie, { prompt: sharedAngiePrompt, panelZIndex, variant: "button" }));
+}
+function getSharedAngiePrompt(violations) {
+  if (!violations || violations.length < 2) {
+    return void 0;
+  }
+  const [first, ...rest] = violations;
+  if (!first.angieFix || !first.angiePrompt) {
+    return void 0;
+  }
+  const allShareTheSameFix = rest.every(
+    (violation) => violation.angieFix && violation.angiePrompt === first.angiePrompt
+  );
+  return allShareTheSameFix ? first.angiePrompt : void 0;
 }
 function ViolationRow({ audit: audit26, expanded, onToggleExpand, skipReason, violations }) {
   const primaryViolation = violations?.[0];
   const isGuidanceFocusable = !!primaryViolation;
   const panelZIndex = useFloatingPanelZIndex2(AUDIT_PANEL_ID);
+  const sharedAngiePrompt = getSharedAngiePrompt(violations);
   const handleGuidanceClick = () => {
     if (isGuidanceFocusable && primaryViolation) {
       focusViolation(primaryViolation);
@@ -1172,11 +1207,20 @@ function ViolationRow({ audit: audit26, expanded, onToggleExpand, skipReason, vi
       onKeyDown: isGuidanceFocusable ? onKeyboardClick(handleGuidanceClick) : void 0
     },
     /* @__PURE__ */ React12.createElement(Typography6, { variant: "caption", component: "p", color: "text.secondary" }, audit26.description),
-    primaryViolation && /* @__PURE__ */ React12.createElement(GuidanceAction, { violation: primaryViolation })
+    primaryViolation && /* @__PURE__ */ React12.createElement(
+      GuidanceAction,
+      {
+        violation: primaryViolation,
+        sharedAngiePrompt,
+        panelZIndex
+      }
+    )
   ))), violations && violations.length > 0 && /* @__PURE__ */ React12.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;
+    const displayLabel = elementTitle ?? violation.label;
+    const angiePromptContext = elementTitle ? `${elementTitle} - ${violation.label}` : violation.label;
+    const showsOwnFixAction = !!violation.angieFix && !sharedAngiePrompt;
     return /* @__PURE__ */ React12.createElement(
       Box7,
       {
@@ -1193,18 +1237,28 @@ function ViolationRow({ audit: audit26, expanded, onToggleExpand, skipReason, vi
           paddingInline: 1,
           borderRadius: 1,
           cursor: "pointer",
-          "&:hover": { bgcolor: "action.hover" }
+          "&:hover": { bgcolor: "action.hover" },
+          "&:hover .violation-row-fix-action, &:focus-visible .violation-row-fix-action": {
+            opacity: 1
+          }
         }
       },
       /* @__PURE__ */ React12.createElement(ViolationIcon, { violation, widgetIcon }),
-      /* @__PURE__ */ React12.createElement(Box7, { sx: { flex: 1 } }, /* @__PURE__ */ React12.createElement(Typography6, { variant: "caption" }, rowLabel), violation.detail && /* @__PURE__ */ React12.createElement(Typography6, { variant: "caption", color: "text.secondary" }, violation.detail)),
-      violation.angieFix ? /* @__PURE__ */ React12.createElement(
-        FixViolationWithAngie,
+      /* @__PURE__ */ React12.createElement(Box7, { sx: { flex: 1 } }, /* @__PURE__ */ React12.createElement(Typography6, { variant: "caption" }, displayLabel), violation.detail && /* @__PURE__ */ React12.createElement(Typography6, { variant: "caption", color: "text.secondary" }, violation.detail)),
+      showsOwnFixAction && /* @__PURE__ */ React12.createElement(
+        Box7,
         {
-          prompt: violation.angiePrompt ?? buildAngiePrompt(rowLabel),
-          panelZIndex
-        }
-      ) : /* @__PURE__ */ React12.createElement(WandIcon2, { fontSize: "tiny", "aria-hidden": true })
+          className: "violation-row-fix-action",
+          sx: { opacity: 0, transition: "opacity .15s" }
+        },
+        /* @__PURE__ */ React12.createElement(
+          FixViolationWithAngie,
+          {
+            prompt: violation.angiePrompt ?? buildAngiePrompt(angiePromptContext),
+            panelZIndex
+          }
+        )
+      )
     );
   }))));
 }
@@ -1406,7 +1460,7 @@ function findAuditRun(report, auditId) {
 
 // src/components/promotion-card.tsx
 import * as React15 from "react";
-import { Box as Box10, Button as Button4, Typography as Typography8 } from "@elementor/ui";
+import { Box as Box10, Button as Button5, Typography as Typography8 } from "@elementor/ui";
 function PromotionCard({ ctaDisabled, ctaLabel, icon: Icon, onCtaClick, subtitle, title }) {
   return /* @__PURE__ */ React15.createElement(
     Box10,
@@ -1424,7 +1478,7 @@ function PromotionCard({ ctaDisabled, ctaLabel, icon: Icon, onCtaClick, subtitle
     },
     /* @__PURE__ */ React15.createElement(Icon, { fontSize: "small", color: "action" }),
     /* @__PURE__ */ React15.createElement(Box10, { sx: { display: "flex", flex: 1, flexDirection: "column", gap: 0.25, minWidth: 0 } }, /* @__PURE__ */ React15.createElement(Typography8, { variant: "body2", fontWeight: "bold" }, title), /* @__PURE__ */ React15.createElement(Typography8, { variant: "caption", color: "text.secondary" }, subtitle)),
-    /* @__PURE__ */ React15.createElement(Button4, { variant: "outlined", color: "secondary", size: "small", disabled: ctaDisabled, onClick: onCtaClick }, ctaLabel)
+    /* @__PURE__ */ React15.createElement(Button5, { variant: "outlined", color: "secondary", size: "small", disabled: ctaDisabled, onClick: onCtaClick }, ctaLabel)
   );
 }
 
@@ -1527,7 +1581,7 @@ function ReportShell({ report }) {
 import * as React20 from "react";
 import { useFloatingPanelZIndex as useFloatingPanelZIndex3 } from "@elementor/editor-floating-panels";
 import { ReloadIcon } from "@elementor/icons";
-import { Badge as Badge2, Button as Button5, Tooltip as Tooltip4 } from "@elementor/ui";
+import { Badge as Badge2, Button as Button6, Tooltip as Tooltip4 } from "@elementor/ui";
 import { __ as __16 } from "@wordpress/i18n";
 function RescanButton({ hasScanned, isStale, disabled, onClick }) {
   const panelZIndex = useFloatingPanelZIndex3(AUDIT_PANEL_ID);
@@ -1539,7 +1593,7 @@ function RescanButton({ hasScanned, isStale, disabled, onClick }) {
       PopperProps: { sx: { zIndex: panelZIndex } }
     },
     /* @__PURE__ */ React20.createElement(Badge2, { variant: "dot", color: "warning", invisible: !isStale, overlap: "rectangular" }, /* @__PURE__ */ React20.createElement(
-      Button5,
+      Button6,
       {
         variant: "contained",
         size: "small",
@@ -2252,6 +2306,7 @@ var audit11 = {
     if (!hasPageImages(ctx.elements.tree)) {
       return { status: "skipped", reason: __29("No images", "elementor") };
     }
+    const isReady = ctx.pageContext.ally_plugin_active;
     const violations = [];
     const failedWidgetIds = /* @__PURE__ */ new Set();
     let missingAltImageCount = 0;
@@ -2267,7 +2322,7 @@ var audit11 = {
           elementId: node.id,
           targetHint: "element-settings",
           label: __29("Image is missing alt text.", "elementor"),
-          externalUrl: ctx.pageContext.ally_plugin_url,
+          externalUrl: isReady ? ctx.pageContext.ally_scan_url : ctx.pageContext.ally_plugin_url,
           ctaLabel: __29("Fix with Ally", "elementor")
         });
       }
@@ -2288,6 +2343,7 @@ var audit12 = {
   severity: "info",
   weight: 1,
   evaluate: (ctx) => {
+    const isReady = ctx.pageContext.image_optimization_plugin_active;
     const offendingElementIds = /* @__PURE__ */ new Set();
     let hasAnyImage = false;
     let inefficientImageFormatCount = 0;
@@ -2318,7 +2374,7 @@ var audit12 = {
       elementId,
       targetHint: "element-settings",
       label: __30("Image isn't served in a modern format like WebP or AVIF.", "elementor"),
-      externalUrl: ctx.pageContext.image_optimization_plugin_url,
+      externalUrl: isReady ? ctx.pageContext.image_optimization_settings_url : ctx.pageContext.image_optimization_plugin_url,
       ctaLabel: __30("Optimize all", "elementor")
     }));
     return violations.length === 0 ? { status: "pass" } : { status: "fail", violations, metadata: { inefficientImageFormatCount } };
@@ -2338,6 +2394,7 @@ var audit13 = {
   severity: "warning",
   weight: 7,
   evaluate: (ctx) => {
+    const isReady = ctx.pageContext.image_optimization_plugin_active;
     const widgetMaxKb = /* @__PURE__ */ new Map();
     let oversizedImageCount = 0;
     let hasAnyImage = false;
@@ -2374,7 +2431,7 @@ var audit13 = {
         __31("Image is %d KB (over 500 KB).", "elementor"),
         kb
       ),
-      externalUrl: ctx.pageContext.image_optimization_plugin_url,
+      externalUrl: isReady ? ctx.pageContext.image_optimization_settings_url : ctx.pageContext.image_optimization_plugin_url,
       ctaLabel: __31("Optimize all", "elementor")
     }));
     return violations.length === 0 ? { status: "pass" } : { status: "fail", violations, metadata: { oversizedImageCount } };
@@ -2409,7 +2466,12 @@ var audit14 = {
           auditId: audit14.id,
           elementId: node.id,
           targetHint: "element-settings",
-          label: __32("Nested boxed container.", "elementor")
+          label: __32("Nested boxed container.", "elementor"),
+          angieFix: true,
+          angiePrompt: __32(
+            "Find containers that have nested containers. Containers can be deep-nested. Update the nested container styling so that when a parent container already uses a boxed setting, any inner container inside it is set to Full Width. Keep the first parent container boxed, remove all boxed styling from the nested inner containers, and preserve the inner container\u2019s content, spacing, alignment, and hierarchy.",
+            "elementor"
+          )
         });
       }
     });