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

package/dist/index.mjs

@@ -192,7 +192,7 @@ import { injectIntoTop as injectIntoTop2 } from "@elementor/editor";
 import * as React23 from "react";
 import { useRef } from "react";
 import { __useActiveDocument as useActiveDocument } from "@elementor/editor-documents";
-import { AppBar as BaseAppBar, Box as Box3, Divider as Divider2, Grid, ThemeProvider as ThemeProvider3, Toolbar } from "@elementor/ui";
+import { AppBar as BaseAppBar, Box as Box4, Divider as Divider2, Grid, ThemeProvider as ThemeProvider3, Toolbar } from "@elementor/ui";
 
 // src/constants.ts
 var MIN_APP_BAR_WIDTH = 800;
@@ -406,23 +406,49 @@ var ANGIE_DESCRIPTION = __2(
   "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 = __2("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 = __2(
+  "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
 import * as React15 from "react";
-import { Button, Chip, ClickAwayListener, CloseButton, Image, Stack as Stack2, Typography } from "@elementor/ui";
+import { Box as Box3, Button, ClickAwayListener, CloseButton, Image, Stack as Stack2, Typography } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
 function AngieGuideCard({ imageUrl, description, learnMoreUrl, onInstall, onClose }) {
-  return /* @__PURE__ */ React15.createElement(ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React15.createElement(Stack2, { sx: { width: 296 }, "data-testid": "e-angie-guide-card" }, /* @__PURE__ */ React15.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1, py: 1, px: 2 }, /* @__PURE__ */ React15.createElement(Typography, { variant: "subtitle2" }, __3("Meet Angie", "elementor")), /* @__PURE__ */ React15.createElement(Chip, { label: __3("New", "elementor"), size: "small", color: "info", variant: "standard" }), /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React15.createElement(ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React15.createElement(Stack2, { sx: { width: 296 }, "data-testid": "e-angie-guide-card" }, /* @__PURE__ */ React15.createElement(Box3, { sx: { position: "relative", p: 1.5 } }, /* @__PURE__ */ React15.createElement(
+    Image,
+    {
+      src: imageUrl,
+      alt: __3("Angie", "elementor"),
+      sx: {
+        width: "100%",
+        maxHeight: 200,
+        objectFit: "cover",
+        objectPosition: "center top",
+        borderRadius: 1,
+        display: "block"
+      }
+    }
+  ), /* @__PURE__ */ React15.createElement(
     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(Image, { src: imageUrl, alt: __3("Angie", "elementor"), sx: { height: 150, width: "100%" } }), /* @__PURE__ */ React15.createElement(Stack2, { px: 2, pt: 1.5, pb: 1 }, /* @__PURE__ */ React15.createElement(Typography, { variant: "body2", color: "secondary" }, description)), /* @__PURE__ */ React15.createElement(Stack2, { direction: "row", justifyContent: "flex-end", gap: 1, pt: 1, pb: 1.5, px: 2 }, /* @__PURE__ */ React15.createElement(
+  )), /* @__PURE__ */ React15.createElement(Stack2, { px: 2, pt: 0.5, pb: 0.5 }, /* @__PURE__ */ React15.createElement(Typography, { variant: "subtitle2" }, __3("Generate full pages with AI", "elementor"))), /* @__PURE__ */ React15.createElement(Stack2, { px: 2, pt: 0.5, pb: 1.5 }, /* @__PURE__ */ React15.createElement(Typography, { variant: "body2", color: "secondary" }, description)), /* @__PURE__ */ React15.createElement(Stack2, { direction: "row", justifyContent: "flex-end", gap: 1, pb: 1.5, px: 2 }, /* @__PURE__ */ React15.createElement(
     Button,
     {
       variant: "text",
@@ -434,7 +460,7 @@ function AngieGuideCard({ imageUrl, description, learnMoreUrl, onInstall, onClos
       }
     },
     __3("Learn More", "elementor")
-  ), onInstall && /* @__PURE__ */ React15.createElement(Button, { variant: "contained", size: "small", color: "accent", onClick: onInstall }, __3("Try for free", "elementor")))));
+  ), onInstall && /* @__PURE__ */ React15.createElement(Button, { variant: "contained", size: "small", color: "primary", onClick: onInstall }, __3("Build with Angie", "elementor")))));
 }
 
 // src/extensions/angie/hooks/use-auto-show.ts
@@ -445,7 +471,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);
   }, []);
@@ -743,7 +773,7 @@ function AppBar() {
   const containerWidth = useContainerWidth(containerRef);
   const maxToolbarActions = getMaxToolbarActions(containerWidth);
   return /* @__PURE__ */ React23.createElement(ThemeProvider3, { colorScheme: "dark" }, /* @__PURE__ */ React23.createElement(BaseAppBar, { position: "sticky" }, /* @__PURE__ */ React23.createElement(Toolbar, { disableGutters: true, variant: "dense", sx: { overflowX: "auto" } }, /* @__PURE__ */ React23.createElement(
-    Box3,
+    Box4,
     {
       ref: containerRef,
       display: "grid",
@@ -963,7 +993,7 @@ import { ChevronDownIcon } from "@elementor/icons";
 import {
   bindMenu as bindMenu4,
   bindTrigger as bindTrigger4,
-  Box as Box4,
+  Box as Box5,
   Button as Button3,
   ButtonGroup,
   CircularProgress,
@@ -1079,7 +1109,7 @@ function PrimaryAction() {
         }
       }
     },
-    /* @__PURE__ */ React25.createElement(Box4, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React25.createElement(Box5, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React25.createElement(
       Button3,
       {
         size: "small",