@elementor/editor-app-bar 4.3.0-beta2 → 4.3.0

package/dist/index.js

@@ -450,23 +450,49 @@ var ANGIE_DESCRIPTION = (0, import_i18n2.__)(
   "elementor"
 );
 var AI_WIDGET_CTA_VIEWED_EVENT = "ai_widget_cta_viewed";
-var ANGIE_TOP_BAR_PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie-top-bar-promotion.svg";
-var ANGIE_TOP_BAR_DESCRIPTION = (0, import_i18n2.__)("Build custom widgets using simple instructions.", "elementor");
+var ANGIE_TOP_BAR_PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie-top-bar-promotion-0926.svg";
+var ANGIE_TOP_BAR_DESCRIPTION = (0, import_i18n2.__)(
+  "Describe what you want to build in plain language and Angie generates it in native Elementor structure, fully editable and customizable.",
+  "elementor"
+);
 
 // src/extensions/angie/components/angie-guide-card.tsx
 var React15 = __toESM(require("react"));
 var import_ui7 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
 function AngieGuideCard({ imageUrl, description, learnMoreUrl, onInstall, onClose }) {
-  return /* @__PURE__ */ React15.createElement(import_ui7.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React15.createElement(import_ui7.Stack, { sx: { width: 296 }, "data-testid": "e-angie-guide-card" }, /* @__PURE__ */ React15.createElement(import_ui7.Stack, { direction: "row", alignItems: "center", gap: 1, py: 1, px: 2 }, /* @__PURE__ */ React15.createElement(import_ui7.Typography, { variant: "subtitle2" }, (0, import_i18n3.__)("Meet Angie", "elementor")), /* @__PURE__ */ React15.createElement(import_ui7.Chip, { label: (0, import_i18n3.__)("New", "elementor"), size: "small", color: "info", variant: "standard" }), /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React15.createElement(import_ui7.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React15.createElement(import_ui7.Stack, { sx: { width: 296 }, "data-testid": "e-angie-guide-card" }, /* @__PURE__ */ React15.createElement(import_ui7.Box, { sx: { position: "relative", p: 1.5 } }, /* @__PURE__ */ React15.createElement(
+    import_ui7.Image,
+    {
+      src: imageUrl,
+      alt: (0, import_i18n3.__)("Angie", "elementor"),
+      sx: {
+        width: "100%",
+        maxHeight: 200,
+        objectFit: "cover",
+        objectPosition: "center top",
+        borderRadius: 1,
+        display: "block"
+      }
+    }
+  ), /* @__PURE__ */ React15.createElement(
     import_ui7.CloseButton,
     {
-      edge: "end",
-      sx: { ml: "auto" },
+      sx: {
+        position: "absolute",
+        top: 15,
+        insetInlineEnd: 15,
+        color: "common.white",
+        filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.6))",
+        "&:hover": {
+          bgcolor: "rgba(255,255,255,0.2)",
+          color: "common.white"
+        }
+      },
       slotProps: { icon: { fontSize: "small" } },
       onClick: onClose
     }
-  )), /* @__PURE__ */ React15.createElement(import_ui7.Image, { src: imageUrl, alt: (0, import_i18n3.__)("Angie", "elementor"), sx: { height: 150, width: "100%" } }), /* @__PURE__ */ React15.createElement(import_ui7.Stack, { px: 2, pt: 1.5, pb: 1 }, /* @__PURE__ */ React15.createElement(import_ui7.Typography, { variant: "body2", color: "secondary" }, description)), /* @__PURE__ */ React15.createElement(import_ui7.Stack, { direction: "row", justifyContent: "flex-end", gap: 1, pt: 1, pb: 1.5, px: 2 }, /* @__PURE__ */ React15.createElement(
+  )), /* @__PURE__ */ React15.createElement(import_ui7.Stack, { px: 2, pt: 0.5, pb: 0.5 }, /* @__PURE__ */ React15.createElement(import_ui7.Typography, { variant: "subtitle2" }, (0, import_i18n3.__)("Generate full pages with AI", "elementor"))), /* @__PURE__ */ React15.createElement(import_ui7.Stack, { px: 2, pt: 0.5, pb: 1.5 }, /* @__PURE__ */ React15.createElement(import_ui7.Typography, { variant: "body2", color: "secondary" }, description)), /* @__PURE__ */ React15.createElement(import_ui7.Stack, { direction: "row", justifyContent: "flex-end", gap: 1, pb: 1.5, px: 2 }, /* @__PURE__ */ React15.createElement(
     import_ui7.Button,
     {
       variant: "text",
@@ -478,7 +504,7 @@ function AngieGuideCard({ imageUrl, description, learnMoreUrl, onInstall, onClos
       }
     },
     (0, import_i18n3.__)("Learn More", "elementor")
-  ), onInstall && /* @__PURE__ */ React15.createElement(import_ui7.Button, { variant: "contained", size: "small", color: "accent", onClick: onInstall }, (0, import_i18n3.__)("Try for free", "elementor")))));
+  ), onInstall && /* @__PURE__ */ React15.createElement(import_ui7.Button, { variant: "contained", size: "small", color: "primary", onClick: onInstall }, (0, import_i18n3.__)("Build with Angie", "elementor")))));
 }
 
 // src/extensions/angie/hooks/use-auto-show.ts
@@ -489,7 +515,11 @@ function useAutoShow() {
       return;
     }
     const id = setTimeout(() => {
-      window.dispatchEvent(new CustomEvent(ANGIE_GUIDE_TOGGLE_EVENT));
+      window.dispatchEvent(
+        new CustomEvent(CREATE_WIDGET_EVENT, {
+          detail: { entry_point: "auto_show" }
+        })
+      );
     }, 0);
     return () => clearTimeout(id);
   }, []);