@go-mailer/easy-email-extensions 5.0.4 → 5.0.5

package/lib/index2.js

@@ -52,7 +52,7 @@ var __async = (__this, __arguments, generator) => {
 };
 import * as React from "react";
 import React__default, { createContext, useContext, isValidElement, Children, cloneElement, Component, useRef, useMemo, memo, forwardRef, createRef, useState, useImperativeHandle, useEffect, useLayoutEffect, useCallback, PureComponent, useReducer, Fragment, Suspense } from "react";
-import { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, useFocusBlockLayout, DATA_CONTENT_EDITABLE_IDX, MergeTagBadge, AvailableTools, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, isTextBlock, getBlockNodeByIdx, useLazyState, useActiveTab, ActiveTabKeys } from "@go-mailer/easy-email-editor";
+import { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, useFocusBlockLayout, DATA_CONTENT_EDITABLE_IDX, MergeTagBadge, AvailableTools, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, isTextBlock, getBlockNodeByIdx, useLazyState, useActiveTab, ActiveTabKeys, useEditorContent } from "@go-mailer/easy-email-editor";
 import { BasicType, ImageManager, EMAIL_BLOCK_CLASS_NAME, BlockManager, createBlockDataByType, AdvancedType, Operator, OperatorSymbol, isAdvancedBlock, getParentByIdx, getParentIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, createCustomBlock, mergeBlock, getPreviewClassName, components, getNodeIdxClassName, getPageIdx, getChildIdx, JsonToMjml, getNodeTypeFromClassName } from "@go-mailer/easy-email-core";
 import ReactDOM, { createPortal, render as render$1 } from "react-dom";
 import { Field, useForm as useForm$1, useField, Form as Form$3, version as version$2, useFormState as useFormState$2 } from "react-final-form";
@@ -43843,7 +43843,8 @@ const list$5 = [
       },
       attributes: {
         align: "center",
-        "base-url": "https://mjml.io"
+        "base-url": "https://mjml.io",
+        "background-color": "#ffffff"
       },
       children: []
     }
@@ -45496,76 +45497,117 @@ function Toolbar() {
     return null;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
     id: "easy-email-extensions-InteractivePrompt-Toolbar",
+    style: { height: 0, zIndex: 100 }
+  }, !isPage && /* @__PURE__ */ React__default.createElement("div", {
+    onClick: (e2) => e2.stopPropagation(),
+    onMouseDown: (ev) => ev.preventDefault(),
     style: {
-      height: 0,
-      zIndex: 100
-    }
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    style: {
-      fontSize: 14,
-      lineHeight: "22px",
+      position: "absolute",
+      bottom: "100%",
+      right: 0,
+      marginBottom: "5px",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "1px",
       pointerEvents: "auto",
-      color: "#ffffff",
-      transform: "translateY(-100%)",
-      display: "inline-flex"
+      background: "rgba(22, 20, 17, 0.82)",
+      backdropFilter: "blur(6px)",
+      borderRadius: "6px",
+      padding: "2px",
+      boxShadow: "0 2px 10px rgba(0,0,0,0.22)"
     }
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: {
-      color: "#ffffff",
-      backgroundColor: "var(--selected-color)",
-      height: "22px",
-      display: "inline-flex",
-      padding: "1px 5px",
-      boxSizing: "border-box",
+      color: "rgba(255,255,255,0.55)",
+      fontSize: "10px",
+      fontFamily: "Inter, sans-serif",
+      fontWeight: 600,
+      letterSpacing: "0.06em",
+      textTransform: "uppercase",
       whiteSpace: "nowrap",
-      maxWidth: 300,
-      overflow: "hidden"
+      padding: "0 6px",
+      pointerEvents: "none"
     }
   }, focusBlock2 && getBlockTitle(focusBlock2, false)), /* @__PURE__ */ React__default.createElement("div", {
-    onClick: (e2) => {
-      e2.stopPropagation();
-    },
-    onMouseDown: (ev) => {
-      ev.preventDefault();
-    },
     style: {
-      display: isPage ? "none" : "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      pointerEvents: "auto"
+      width: "1px",
+      height: "14px",
+      background: "rgba(255,255,255,0.12)",
+      flexShrink: 0
     }
-  }, /* @__PURE__ */ React__default.createElement(ToolItem, {
-    width: 12,
-    iconName: "icon-back-parent",
+  }), /* @__PURE__ */ React__default.createElement(ToolItem, {
+    iconName: "icon-layer",
+    title: "Select parent",
     onClick: handleSelectParent
   }), /* @__PURE__ */ React__default.createElement(ToolItem, {
     iconName: "icon-copy",
+    title: "Duplicate",
     onClick: handleCopy
   }), props.onAddCollection && /* @__PURE__ */ React__default.createElement(ToolItem, {
     iconName: "icon-collection",
+    title: "Save to collection",
     onClick: handleAddToCollection
   }), /* @__PURE__ */ React__default.createElement(ToolItem, {
     iconName: "icon-delete",
-    onClick: handleDelete
-  })))), modal);
+    title: "Delete",
+    onClick: handleDelete,
+    isDanger: true
+  }))), modal);
 }
 function ToolItem(props) {
   return /* @__PURE__ */ React__default.createElement("div", {
+    style: { position: "relative", display: "inline-flex" },
+    className: `easy-email-tool-item-wrap${props.isDanger ? " easy-email-tool-danger" : ""}`
+  }, /* @__PURE__ */ React__default.createElement("style", null, `
+        .easy-email-tool-item-wrap .easy-email-tool-btn {
+          color: rgba(255,255,255,0.65);
+          background: transparent;
+          height: 24px;
+          width: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          pointer-events: auto;
+          font-size: 13px;
+          border-radius: 4px;
+          transition: color 0.15s, background 0.15s;
+        }
+        .easy-email-tool-item-wrap .easy-email-tool-btn:hover {
+          color: #fff;
+          background: rgba(255,255,255,0.12);
+        }
+        .easy-email-tool-item-wrap.easy-email-tool-danger .easy-email-tool-btn:hover {
+          color: #ff6b6b;
+          background: rgba(255,80,80,0.15);
+        }
+        .easy-email-tool-item-wrap .easy-email-tooltip {
+          display: none;
+          position: absolute;
+          top: calc(100% + 5px);
+          left: 50%;
+          transform: translateX(-50%);
+          background: rgba(22,20,17,0.92);
+          color: #fff;
+          font-size: 10px;
+          line-height: 1.4;
+          padding: 2px 7px;
+          border-radius: 4px;
+          white-space: nowrap;
+          pointer-events: none;
+          z-index: 9999;
+          font-family: Inter, sans-serif;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+        }
+        .easy-email-tool-item-wrap:hover .easy-email-tooltip {
+          display: block;
+        }
+      `), /* @__PURE__ */ React__default.createElement("div", {
     onClick: props.onClick,
-    style: {
-      color: "#ffffff",
-      backgroundColor: "var(--selected-color)",
-      height: 22,
-      fontSize: props.width || 14,
-      lineHeight: "22px",
-      width: 22,
-      display: "flex",
-      pointerEvents: "auto",
-      cursor: "pointer",
-      justifyContent: "center"
-    },
-    className: classnames("iconfont", props.iconName)
-  });
+    className: classnames("iconfont", props.iconName, "easy-email-tool-btn")
+  }), props.title && /* @__PURE__ */ React__default.createElement("span", {
+    className: "easy-email-tooltip"
+  }, props.title));
 }
 function FocusTooltip() {
   const { focusBlock: focusBlock2 } = useBlock();
@@ -45606,8 +45648,7 @@ function FocusTooltip() {
     }, /* @__PURE__ */ React__default.createElement("div", {
       style: {
         position: "absolute",
-        backgroundColor: "var(--selected-color)",
-        color: "#ffffff",
+        color: "var(--selected-color)",
         height: "28px",
         width: "28px",
         display: "flex",
@@ -45617,12 +45658,41 @@ function FocusTooltip() {
         borderRadius: "50%",
         cursor: "grab",
         pointerEvents: "auto",
+        opacity: 0.7,
         WebkitUserDrag: "element"
-      }
-    }, /* @__PURE__ */ React__default.createElement(IconFont, {
+      },
+      className: "easy-email-tool-item-wrap"
+    }, /* @__PURE__ */ React__default.createElement("style", null, `
+                  .easy-email-tool-item-wrap:hover {
+                    opacity: 1 !important;
+                  }
+                  .easy-email-tool-item-wrap .easy-email-tooltip {
+                    display: none;
+                    position: absolute;
+                    top: calc(100% + 6px);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    background: rgba(22,20,17,0.92);
+                    color: #fff;
+                    font-size: 10px;
+                    line-height: 1.4;
+                    padding: 2px 7px;
+                    border-radius: 4px;
+                    white-space: nowrap;
+                    pointer-events: none;
+                    z-index: 9999;
+                    font-family: Inter, sans-serif;
+                    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+                  }
+                  .easy-email-tool-item-wrap:hover .easy-email-tooltip {
+                    display: block;
+                  }
+                `), /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-move",
       style: { color: "#fff", cursor: "grab" }
-    })))), /* @__PURE__ */ React__default.createElement("div", {
+    }), /* @__PURE__ */ React__default.createElement("span", {
+      className: "easy-email-tooltip"
+    }, "Drag to move")))), /* @__PURE__ */ React__default.createElement("div", {
       style: {
         position: "absolute",
         fontSize: 14,
@@ -45631,8 +45701,8 @@ function FocusTooltip() {
         top: 0,
         width: "100%",
         height: "100%",
-        outlineOffset: "-2px",
-        outline: isPage ? "none" : "2px dashed var(--selected-color)"
+        outlineOffset: "-3px",
+        outline: isPage ? "none" : "3px dashed var(--selected-color)"
       }
     }), /* @__PURE__ */ React__default.createElement("div", {
       style: {
@@ -45641,8 +45711,9 @@ function FocusTooltip() {
         zIndex: 3,
         left: 0,
         top: 0,
-        width: "0%",
-        height: "100%"
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none"
       }
     }, /* @__PURE__ */ React__default.createElement(Toolbar, null))),
     focusBlockNode
@@ -45713,6 +45784,8 @@ function HoverTooltip() {
     return null;
   if (!block2 || !blockNode)
     return null;
+  if (block2.type === BasicType.PAGE)
+    return null;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(
     /* @__PURE__ */ React__default.createElement("div", {
       id: "easy-email-extensions-InteractivePrompt-HoverTooltip",
@@ -45727,7 +45800,7 @@ function HoverTooltip() {
       }
     }, /* @__PURE__ */ React__default.createElement(TipNode, {
       type: isDragging ? "drag" : "hover",
-      lineWidth: 1,
+      lineWidth: 3,
       title: block2.name,
       direction: isTop && direction === "top" ? "noEnoughTop" : direction,
       isDragging
@@ -45736,7 +45809,7 @@ function HoverTooltip() {
   ));
 }
 function TipNode(props) {
-  const { direction, title: title2, lineWidth, type } = props;
+  const { direction, title: title2, lineWidth = 3, type } = props;
   const dragTitle = useMemo(() => {
     if (direction === "top" || direction === "noEnoughTop") {
       return `${t("Insert before")} ${title2}`;
@@ -45780,26 +45853,33 @@ function TipNode(props) {
       width: "100%",
       height: "100%",
       outlineOffset: `-${lineWidth}px`,
-      outline: `${lineWidth}px solid ${color2}`
+      outline: `${lineWidth}px dashed ${color2}`
     }
   }, type === "hover" && /* @__PURE__ */ React__default.createElement("div", {
     style: {
       position: "absolute",
-      left: 0,
-      top: 0
+      right: 0,
+      top: 0,
+      transform: "translateY(-100%)",
+      paddingBottom: "5px"
     }
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: {
-      backgroundColor: color2,
-      color: "#ffffff",
-      height: "22px",
-      lineHeight: "22px",
       display: "inline-flex",
-      padding: "1px 5px",
-      boxSizing: "border-box",
-      whiteSpace: "nowrap",
-      fontFamily: "sans-serif",
-      transform: "translateY(-100%)"
+      alignItems: "center",
+      background: "rgba(22, 20, 17, 0.82)",
+      backdropFilter: "blur(6px)",
+      borderRadius: "6px",
+      padding: "0 8px",
+      height: "22px",
+      boxShadow: "0 2px 10px rgba(0,0,0,0.22)",
+      color: "rgba(255,255,255,0.6)",
+      fontSize: "10px",
+      fontFamily: "Inter, sans-serif",
+      fontWeight: 600,
+      letterSpacing: "0.06em",
+      textTransform: "uppercase",
+      whiteSpace: "nowrap"
     }
   }, title2))), props.isDragging && /* @__PURE__ */ React__default.createElement("div", {
     style: __spreadValues({
@@ -45812,14 +45892,23 @@ function TipNode(props) {
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: __spreadValues({
       position: "absolute",
-      color: "#ffffff",
-      backgroundColor: color2,
-      lineHeight: "22px",
       display: "inline-flex",
-      maxWidth: "100%",
-      textAlign: "center",
+      alignItems: "center",
+      background: "rgba(22, 20, 17, 0.82)",
+      backdropFilter: "blur(6px)",
+      WebkitBackdropFilter: "blur(6px)",
+      borderRadius: "6px",
+      padding: "0 8px",
+      height: "22px",
+      boxShadow: "0 2px 10px rgba(0,0,0,0.22)",
+      color: "rgba(255,255,255,0.6)",
+      fontSize: "10px",
+      fontFamily: "Inter, sans-serif",
+      fontWeight: 600,
+      letterSpacing: "0.06em",
+      textTransform: "uppercase",
       whiteSpace: "nowrap",
-      padding: "1px 5px"
+      maxWidth: "100%"
     }, positionStyleMap[props.direction || "none"])
   }, dragTitle)));
 }
@@ -45862,32 +45951,33 @@ const positionStyleMap = {
     transform: "translate(-50%, -50%)"
   }
 };
+const DRAG_LINE_COLOR = "rgba(22, 20, 17, 0.55)";
 const directionImage = {
   top: {
     backgroundImage: `linear-gradient(
       to bottom,
-      var(--hover-color) 3px ,
+      ${DRAG_LINE_COLOR} 3px ,
       transparent 3px
     )`
   },
   bottom: {
     backgroundImage: `linear-gradient(
       to top,
-      var(--hover-color) 3px ,
+      ${DRAG_LINE_COLOR} 3px ,
       transparent 3px
     )`
   },
   left: {
     backgroundImage: `linear-gradient(
       to right,
-      var(--hover-color) 3px ,
+      ${DRAG_LINE_COLOR} 3px ,
       transparent 3px
     )`
   },
   right: {
     backgroundImage: `linear-gradient(
       to left,
-      var(--hover-color) 3px ,
+      ${DRAG_LINE_COLOR} 3px ,
       transparent 3px
     )`
   },
@@ -46322,13 +46412,21 @@ const StandardLayout$1 = "_StandardLayout_457hp_1";
 var styles$5 = {
   StandardLayout: StandardLayout$1
 };
-const layoutItem = "_layoutItem_jm1bq_2";
-const blockGrid = "_blockGrid_jm1bq_8";
-const blockItem = "_blockItem_jm1bq_15";
-const blockItemContainer = "_blockItemContainer_jm1bq_28";
-const blockItemLabel = "_blockItemLabel_jm1bq_40";
+const layoutGroup = "_layoutGroup_mf2ie_3";
+const layoutGroupTitle = "_layoutGroupTitle_mf2ie_7";
+const layoutItem = "_layoutItem_mf2ie_26";
+const layoutColumns = "_layoutColumns_mf2ie_44";
+const layoutColumn = "_layoutColumn_mf2ie_44";
+const blockGrid = "_blockGrid_mf2ie_61";
+const blockItem = "_blockItem_mf2ie_68";
+const blockItemContainer = "_blockItemContainer_mf2ie_81";
+const blockItemLabel = "_blockItemLabel_mf2ie_93";
 var styles$4 = {
+  layoutGroup,
+  layoutGroupTitle,
   layoutItem,
+  layoutColumns,
+  layoutColumn,
   blockGrid,
   blockItem,
   blockItemContainer,
@@ -46730,13 +46828,11 @@ function BlockItem({
 }
 function LayoutItem({ columns, title: title2 }) {
   const [visible, setVisible] = useState(false);
-  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("p", {
-    onClick: () => setVisible((v2) => !v2),
-    style: {
-      display: "flex",
-      justifyContent: "space-between",
-      cursor: "pointer"
-    }
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: styles$4.layoutGroup
+  }, /* @__PURE__ */ React__default.createElement("p", {
+    className: styles$4.layoutGroupTitle,
+    onClick: () => setVisible((v2) => !v2)
   }, /* @__PURE__ */ React__default.createElement("span", null, title2), columns.length > 1 && /* @__PURE__ */ React__default.createElement("span", null, !visible ? /* @__PURE__ */ React__default.createElement(IconCaretRight$1, null) : /* @__PURE__ */ React__default.createElement(IconCaretUp$1, null))), columns.map((item2, index2) => {
     const hide = !visible && index2 !== 0;
     const payload = {
@@ -46758,34 +46854,20 @@ function LayoutItem({ columns, title: title2 }) {
       style: {
         height: hide ? 0 : void 0,
         overflow: "hidden",
-        marginBottom: hide ? 0 : 20
+        marginBottom: hide ? 0 : void 0
       }
     }, /* @__PURE__ */ React__default.createElement(BlockAvatarWrapper, {
       type: AdvancedType.SECTION,
       payload
     }, /* @__PURE__ */ React__default.createElement("div", {
-      style: {
-        border: "1px solid rgb(229, 229, 229)",
-        width: "100%",
-        padding: 10
-      }
+      className: styles$4.layoutItem
     }, /* @__PURE__ */ React__default.createElement("div", {
-      style: {
-        height: 16,
-        border: "1px solid rgb(85, 85, 85)",
-        borderRadius: 3,
-        display: "flex"
-      }
-    }, item2.map((column, index22) => {
-      return /* @__PURE__ */ React__default.createElement("div", {
-        key: index22,
-        style: {
-          borderRight: index22 === item2.length - 1 ? void 0 : "1px solid rgb(85, 85, 85)",
-          height: "100%",
-          width: column
-        }
-      });
-    })))));
+      className: styles$4.layoutColumns
+    }, item2.map((column, index22) => /* @__PURE__ */ React__default.createElement("div", {
+      key: index22,
+      className: styles$4.layoutColumn,
+      style: { width: column }
+    }))))));
   }));
 }
 var OverlayScrollbars$2 = "";
@@ -52219,25 +52301,25 @@ const TwoColumnLayout = (props) => {
     style: { height: containerHeight, flex: 1, overflow: "hidden" }
   }, props.children))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));
 };
-const stage = "_stage_hq368_3";
-const blocksPanel = "_blocksPanel_hq368_16";
-const blocksPanelHead = "_blocksPanelHead_hq368_31";
-const blocksPanelBody = "_blocksPanelBody_hq368_42";
-const canvasWrap = "_canvasWrap_hq368_101";
-const canvasToolbar = "_canvasToolbar_hq368_135";
-const canvasToolbarSegment = "_canvasToolbarSegment_hq368_144";
-const canvasToolbarSep = "_canvasToolbarSep_hq368_157";
-const configPanel = "_configPanel_hq368_166";
-const open = "_open_hq368_178";
-const configPanelInner = "_configPanelInner_hq368_185";
-const cpHeader = "_cpHeader_hq368_199";
-const cpTitle = "_cpTitle_hq368_209";
-const cpClose = "_cpClose_hq368_218";
-const cpBody = "_cpBody_hq368_240";
-const presetItem = "_presetItem_hq368_384";
-const presetCard = "_presetCard_hq368_390";
-const presetThumb = "_presetThumb_hq368_411";
-const presetLabel = "_presetLabel_hq368_418";
+const stage = "_stage_13s26_3";
+const blocksPanel = "_blocksPanel_13s26_16";
+const blocksPanelHead = "_blocksPanelHead_13s26_31";
+const blocksPanelBody = "_blocksPanelBody_13s26_42";
+const canvasWrap = "_canvasWrap_13s26_101";
+const canvasToolbar = "_canvasToolbar_13s26_134";
+const canvasToolbarSegment = "_canvasToolbarSegment_13s26_143";
+const canvasToolbarSep = "_canvasToolbarSep_13s26_156";
+const configPanel = "_configPanel_13s26_165";
+const open = "_open_13s26_177";
+const configPanelInner = "_configPanelInner_13s26_184";
+const cpHeader = "_cpHeader_13s26_198";
+const cpTitle = "_cpTitle_13s26_208";
+const cpClose = "_cpClose_13s26_217";
+const cpBody = "_cpBody_13s26_239";
+const presetItem = "_presetItem_13s26_383";
+const presetCard = "_presetCard_13s26_389";
+const presetThumb = "_presetThumb_13s26_410";
+const presetLabel = "_presetLabel_13s26_417";
 var styles = {
   stage,
   blocksPanel,
@@ -52371,15 +52453,37 @@ const headerHeroPayload = section(
   ],
   { "background-color": "#1a1814", padding: "48px 0px 40px" }
 );
+const singleProductCardPayload = section(
+  [
+    col(
+      [
+        imgBlock({ width: "100%", padding: "0px" }),
+        textBlock(
+          '<p style="text-align:center;font-weight:600;margin:0;">Product Name</p>',
+          { padding: "12px 16px 4px", "font-size": "14px" }
+        ),
+        textBlock('<p style="text-align:center;color:#6b6660;margin:0;">$29.99</p>', {
+          padding: "0px 16px 12px",
+          "font-size": "13px"
+        }),
+        btnBlock("Buy Now")
+      ],
+      {
+        padding: "0px",
+        border: "1px solid rgba(26,24,20,0.08)",
+        "background-color": "#ffffff",
+        "border-radius": "8px"
+      }
+    )
+  ],
+  { padding: "16px 24px", "background-color": "#f7f5f2" }
+);
 const makeProductCol = () => col(
   [
     imgBlock({ width: "160px", padding: "0px" }),
     textBlock(
       '<p style="text-align:center;font-weight:600;margin:0;">Product Name</p>',
-      {
-        padding: "5px 4px 1px",
-        "font-size": "13px"
-      }
+      { padding: "5px 4px 1px", "font-size": "13px" }
     ),
     textBlock('<p style="text-align:center;color:#6b6660;margin:0;">$29.99</p>', {
       padding: "0px 4px 4px",
@@ -52387,11 +52491,15 @@ const makeProductCol = () => col(
     }),
     btnBlock("Buy Now")
   ],
-  { padding: "0px 4px" }
+  {
+    padding: "8px",
+    border: "1px solid rgba(26,24,20,0.08)",
+    "background-color": "#ffffff"
+  }
 );
 const productCardPayload = section(
   [makeProductCol(), makeProductCol(), makeProductCol()],
-  { padding: "20px 0px" }
+  { padding: "20px 8px", "background-color": "#f7f5f2" }
 );
 const quotePayload = section(
   [
@@ -52609,6 +52717,52 @@ const ThumbHeaderHero = () => /* @__PURE__ */ React__default.createElement("svg"
   rx: "3",
   fill: "#6366f1"
 }));
+const ThumbSingleProduct = () => /* @__PURE__ */ React__default.createElement("svg", {
+  width: "56",
+  height: "44",
+  viewBox: "0 0 56 44",
+  fill: "none"
+}, /* @__PURE__ */ React__default.createElement("rect", {
+  x: "4",
+  y: "2",
+  width: "48",
+  height: "40",
+  rx: "3",
+  fill: "#f4f2ef"
+}), /* @__PURE__ */ React__default.createElement("rect", {
+  x: "4",
+  y: "2",
+  width: "48",
+  height: "20",
+  rx: "3",
+  fill: "#e8e4e0"
+}), /* @__PURE__ */ React__default.createElement("path", {
+  d: "M22 18 l6-8 l4 5 l2-3 l6 6 Z",
+  fill: "#c8c4c0",
+  opacity: "0.7"
+}), /* @__PURE__ */ React__default.createElement("rect", {
+  x: "10",
+  y: "26",
+  width: "28",
+  height: "2.5",
+  rx: "1",
+  fill: "#c8c4c0"
+}), /* @__PURE__ */ React__default.createElement("rect", {
+  x: "18",
+  y: "30.5",
+  width: "14",
+  height: "2",
+  rx: "1",
+  fill: "#d0ccc8"
+}), /* @__PURE__ */ React__default.createElement("rect", {
+  x: "12",
+  y: "35",
+  width: "28",
+  height: "5",
+  rx: "2.5",
+  fill: "#1a1814",
+  opacity: "0.75"
+}));
 const ThumbProductCard = () => /* @__PURE__ */ React__default.createElement("svg", {
   width: "56",
   height: "44",
@@ -52750,9 +52904,16 @@ const presetBlocks = [
     payload: headerHeroPayload,
     thumbnail: /* @__PURE__ */ React__default.createElement(ThumbHeaderHero, null)
   }),
+  /* @__PURE__ */ React__default.createElement(PresetCard, {
+    key: "product-card-single",
+    label: "Single Product",
+    type: AdvancedType.SECTION,
+    payload: singleProductCardPayload,
+    thumbnail: /* @__PURE__ */ React__default.createElement(ThumbSingleProduct, null)
+  }),
   /* @__PURE__ */ React__default.createElement(PresetCard, {
     key: "product-card",
-    label: "Product Card",
+    label: "Products (3-up)",
     type: AdvancedType.SECTION,
     payload: productCardPayload,
     thumbnail: /* @__PURE__ */ React__default.createElement(ThumbProductCard, null)
@@ -53116,5 +53277,60 @@ const GoMailerLayout = (props) => {
     className: styles.cpBody
   }, panelInited && /* @__PURE__ */ React__default.createElement(AttributePanel, null))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));
 };
-export { MergeTagBadgePrompt as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, FontWeight as E, FontFamily as F, Padding as G, Height as H, ClassName as I, PresetColorsProvider as J, ShortcutToolbar as K, LetterSpacing as L, MjmlToJson as M, NavbarLinkPadding as N, BlockMarketManager as O, Page as P, BlockMaskWrapper as Q, SourceCodePanel as R, SelectionRangeProvider as S, TextAlign as T, InteractivePrompt as U, VerticalAlign as V, Width as W, SimpleLayout as X, StandardLayout as Y, TwoColumnLayout as Z, GoMailerLayout as _, getIconNameByBlockType as a, ExtensionContext as a0, ExtensionProvider as a1, useExtensionProps as a2, RICH_TEXT_TOOL_BAR as a3, TextField as a4, InputWithUnitField as a5, SearchField as a6, TextAreaField as a7, NumberField as a8, SliderField as a9, UploadField as aa, ImageUploaderField as ab, SelectField as ac, TreeSelectField as ad, AutoCompleteField as ae, RadioGroupField as af, SwitchField as ag, CheckboxField as ah, EditTabField as ai, EditGridTabField as aj, InlineTextField as ak, ColorPickerField as al, enhancer as am, RichTextField as an, ShadowDom as ao, getBlockTitle as b, commonjsGlobal as c, BlockAttributeConfigurationManager as d, Align as e, AttributesPanelWrapper as f, getContextMergeTags as g, CollapseWrapper as h, Condition as i, ContainerBackgroundColor as j, TextDecoration as k, Background as l, LineHeight as m, TextTransform as n, BackgroundColor as o, Direction as p, Link as q, Border as r, setIconsMap as s, Margin as t, BorderColor as u, FontSize$1 as v, MergeTags$1 as w, BorderStyle as x, FontStyle as y, BorderWidth as z };
+function htmlToPlainText(html) {
+  if (!html)
+    return "";
+  return html.replace(/<br\s*\/?>/gi, "\n").replace(/<\/p>/gi, "\n").replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/\n{3,}/g, "\n\n").trim();
+}
+function summariseBlock(block2, idx) {
+  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const v2 = (_b2 = (_a2 = block2.data) == null ? void 0 : _a2.value) != null ? _b2 : {};
+  const attr = (_c = block2.attributes) != null ? _c : {};
+  const rawHtml = (_f = (_e = (_d = v2.content) != null ? _d : v2.text) != null ? _e : v2.innerText) != null ? _f : "";
+  const plainText = htmlToPlainText(rawHtml);
+  const alt = (_h = (_g = attr.alt) != null ? _g : v2.alt) != null ? _h : "";
+  const href = (_k = (_j = (_i = attr.href) != null ? _i : v2.href) != null ? _j : v2.url) != null ? _k : "";
+  return {
+    idx,
+    type: block2.type,
+    title: block2.title,
+    plainText,
+    alt,
+    href
+  };
+}
+function collectBlocks(block2, idx, out) {
+  var _a2;
+  out.push(summariseBlock(block2, idx));
+  ((_a2 = block2.children) != null ? _a2 : []).forEach((child, i2) => {
+    collectBlocks(child, `${idx}.children.[${i2}]`, out);
+  });
+}
+function useAIContext() {
+  const editorContent = useEditorContent();
+  const { emailTemplate, focusBlock: focusBlock2, focusIdx: focusIdx2, selection } = editorContent;
+  const blockSummaries = useMemo(() => {
+    const out = [];
+    if (emailTemplate == null ? void 0 : emailTemplate.content) {
+      collectBlocks(emailTemplate.content, "content", out);
+    }
+    return out;
+  }, [emailTemplate]);
+  const emailPlainText = useMemo(
+    () => blockSummaries.filter((b2) => b2.plainText).map((b2) => b2.plainText).join("\n\n"),
+    [blockSummaries]
+  );
+  const focusBlockPlainText = useMemo(() => {
+    if (!focusBlock2)
+      return "";
+    return summariseBlock(focusBlock2, focusIdx2).plainText;
+  }, [focusBlock2, focusIdx2]);
+  return __spreadProps(__spreadValues({}, editorContent), {
+    blockSummaries,
+    emailPlainText,
+    focusBlockPlainText,
+    selectedText: selection.text
+  });
+}
+export { GoMailerLayout as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, BorderWidth as E, FontFamily as F, FontWeight as G, Height as H, Padding as I, ClassName as J, PresetColorsProvider as K, LetterSpacing as L, MjmlToJson as M, NavbarLinkPadding as N, ShortcutToolbar as O, Page as P, BlockMarketManager as Q, BlockMaskWrapper as R, SelectionRangeProvider as S, TextAlign as T, SourceCodePanel as U, VerticalAlign as V, Width as W, InteractivePrompt as X, SimpleLayout as Y, StandardLayout as Z, TwoColumnLayout as _, getIconNameByBlockType as a, MergeTagBadgePrompt as a0, ExtensionContext as a1, ExtensionProvider as a2, useExtensionProps as a3, RICH_TEXT_TOOL_BAR as a4, TextField as a5, InputWithUnitField as a6, SearchField as a7, TextAreaField as a8, NumberField as a9, SliderField as aa, UploadField as ab, ImageUploaderField as ac, SelectField as ad, TreeSelectField as ae, AutoCompleteField as af, RadioGroupField as ag, SwitchField as ah, CheckboxField as ai, EditTabField as aj, EditGridTabField as ak, InlineTextField as al, ColorPickerField as am, enhancer as an, RichTextField as ao, ShadowDom as ap, getBlockTitle as b, commonjsGlobal as c, BlockAttributeConfigurationManager as d, Align as e, AttributesPanelWrapper as f, getContextMergeTags as g, CollapseWrapper as h, Condition as i, ContainerBackgroundColor as j, TextDecoration as k, Background as l, LineHeight as m, TextTransform as n, BackgroundColor as o, Direction as p, Link as q, Border as r, setIconsMap as s, Margin as t, useAIContext as u, BorderColor as v, FontSize$1 as w, MergeTags$1 as x, BorderStyle as y, FontStyle as z };
 //# sourceMappingURL=index2.js.map