@kgalexander/mcreate 0.0.11 → 0.0.12

package/dist/{chunk-TDZCSKBT.mjs → chunk-PL5EKNN6.mjs}

@@ -216,7 +216,7 @@ function formatOpenHouseTime(time24) {
 function propertyCardMockMjml(block, context) {
   const a = block.attributes;
   const trackingClasses = context.mode === "editing" ? getTrackingClasses(context.idx, "property-card") : "";
-  const href = a["href"] || "#";
+  const href = a["href"] || "";
   const price = formatPrice(a["price"] || "$0");
   const address = a["address"] || "123 Main Street";
   const city = a["city"] || "City, ST 00000";
@@ -384,7 +384,7 @@ function propertyCardSingleTwoMockMjml(block, context) {
   const a = block.attributes;
   const trackingClasses = context.mode === "editing" ? getTrackingClasses(context.idx, "property-card-single-two") : "";
   const uniqueId = Math.random().toString(36).slice(2, 8);
-  const href = a["href"] || a["link"] || "#";
+  const href = a["href"] || "";
   const price = formatPrice(a["price"] || "$0");
   const address = a["address"] || "123 Main Street";
   const city = a["city"] || "City, ST 00000";
@@ -577,7 +577,7 @@ function propertyCardSingleTwoMockMjml(block, context) {
 // src/render/Mockup/mock-property-triple-better.ts
 function renderCard(child, childIdx, context, uniqueId, borderRadius, imageHeight, border, fontFamily, textColor, backgroundColor, innerBorderRadius) {
   const attrs = child.attributes;
-  const href = attrs["href"] || "#";
+  const href = attrs["href"] || "";
   const price = formatPrice(attrs["price"] || "$0");
   const beds = formatNumber(attrs["beds"] || "--");
   const baths = formatNumber(attrs["baths"] || "--");
@@ -880,7 +880,7 @@ function propertyCardTripleToMjml(block, context) {
     const cardNum = index + 1;
     const childAttrs = child.attributes || {};
     productionAttrs[`image-src-${cardNum}`] = childAttrs["image-src"] || "";
-    productionAttrs[`href-${cardNum}`] = childAttrs["href"] || "#";
+    productionAttrs[`href-${cardNum}`] = childAttrs["href"] || "";
     productionAttrs[`price-${cardNum}`] = childAttrs["price"] || "$0";
     productionAttrs[`beds-${cardNum}`] = childAttrs["beds"] || "--";
     productionAttrs[`baths-${cardNum}`] = childAttrs["baths"] || "--";
@@ -1008,7 +1008,7 @@ function rootChildrenToMjml(children, parentContext) {
 function json2mjml(template, mode = "production", options = {}) {
   const showCompanyFooter = template.content[0]?.data?.value?.showCompanyFooter ?? true;
   const footerMutation = needsCompanyFooterMutation(template);
-  const needsProductionFilter = mode === "production" && options?.isPaid && !showCompanyFooter;
+  const needsProductionFilter = mode === "production" && (options?.isPaidLevel ?? 0) >= 1 && !showCompanyFooter;
   if (footerMutation || needsProductionFilter) {
     template = typeof structuredClone !== "undefined" ? structuredClone(template) : JSON.parse(JSON.stringify(template));
   }
@@ -1061,7 +1061,6 @@ function json2mjml(template, mode = "production", options = {}) {
           p { margin: 0px 0px 0px 0px !important; }
           a { color: ${linkColor}; text-decoration: none; }
           a span { text-decoration: underline; }
-          p span { text-decoration: underline; }
 
           .property-details-separator {font-family:Arial,sans-serif;color:#C3C3C3;padding:0 4px 0 2px;}
 
@@ -1406,7 +1405,7 @@ function createPropertyCardElement(payload) {
       "beds": "--",
       "baths": "--",
       "sqft": "--",
-      "href": "#",
+      "href": "",
       "status": "Empty",
       "is-status": "show",
       "status-color": "#B8B8B8",
@@ -1435,7 +1434,7 @@ function createPropertyCardSingleTwoElement(payload) {
       "beds": "--",
       "baths": "--",
       "sqft": "--",
-      "href": "#",
+      "href": "",
       "status": "Empty",
       "is-status": "show",
       "status-color": "#B8B8B8",
@@ -1522,7 +1521,7 @@ function createPropertyCardTripleItemElement(payload) {
     data: { value: {} },
     attributes: {
       "image-src": payload?.attributes?.["image-src"] || "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
-      "href": payload?.attributes?.["href"] || "#",
+      "href": payload?.attributes?.["href"] || "",
       "price": payload?.attributes?.["price"] || "$0",
       "beds": payload?.attributes?.["beds"] || "--",
       "baths": payload?.attributes?.["baths"] || "--",
@@ -1542,6 +1541,7 @@ function createPropertyCardTripleElement(payload) {
       "gap": "24px",
       "border-radius": "0px",
       "border": "1px solid #d1d1d5",
+      "background-color": "#ffffff",
       "image-height": "102px",
       ...payload?.attributes
     },
@@ -1870,6 +1870,7 @@ var defaultTemplate = {
     id: page.id || generateId()
   }))
 };
+var MAX_PAID_LEVEL = 3;
 var useEditorStore = create()(
   devtools(
     immer((set) => ({
@@ -1898,12 +1899,15 @@ var useEditorStore = create()(
       // Auto-save tracking
       lastSavedSnapshot: null,
       isSaving: false,
+      // Subscription level (0 = free, 1-3 = paid tiers)
+      isPaidLevel: 0,
       // Initialize store with external template (for npm package usage)
-      initializeWithTemplate: (templateId, template, onSave) => {
+      initializeWithTemplate: (templateId, template, onSave, isPaidLevel) => {
         set((state) => {
           state.templateId = templateId;
           state.template = template;
           state.onSave = onSave ?? null;
+          state.isPaidLevel = isPaidLevel ?? 0;
           state.templateSize = calculateTemplateSize(template);
           state.isAtSizeLimit = false;
           state.history = [cloneDeep(template)];
@@ -3055,7 +3059,7 @@ function setValueAtPath(template, path, value) {
 }
 
 // src/core/editor/components/ShadowDomRenderer.tsx
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, memo } from "react";
 
 // src/core/editor/constant/configuration.ts
 import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Heading1Icon, Heading2Icon, Heading3Icon, LinkIcon, ListIcon, ListOrderedIcon, MailIcon, PhoneIcon, Pilcrow } from "lucide-react";
@@ -3495,7 +3499,7 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
   cssCache.set(cacheKey, css);
   return css;
 }
-function ShadowDomRenderer({
+var ShadowDomRenderer = memo(function ShadowDomRenderer2({
   html,
   focusIdx,
   hoverIdx,
@@ -3523,6 +3527,8 @@ function ShadowDomRenderer({
   const shadowRootRef = useRef(null);
   const rafRef = useRef(null);
   const lastBlockNodeRef = useRef(null);
+  const hoverRafRef = useRef(null);
+  const lastHoverIdxRef = useRef(null);
   const callbackRefs = useRef({
     onElementClick,
     onElementHover,
@@ -3753,14 +3759,19 @@ function ShadowDomRenderer({
     const handleMouseOver = (e) => {
       const target = e.target;
       const blockNode = target.closest(`.${EMAIL_BLOCK_CLASS_NAME}`);
-      if (blockNode && callbackRefs.current.onElementHover) {
-        const idx = getIdxFromElement(blockNode);
-        callbackRefs.current.onElementHover(idx || null);
-      }
+      const newIdx = blockNode ? getIdxFromElement(blockNode) : null;
+      if (newIdx === lastHoverIdxRef.current) return;
+      if (hoverRafRef.current) return;
+      hoverRafRef.current = requestAnimationFrame(() => {
+        hoverRafRef.current = null;
+        lastHoverIdxRef.current = newIdx;
+        callbackRefs.current.onElementHover?.(newIdx);
+      });
     };
     const handleMouseOut = (e) => {
       const relatedTarget = e.relatedTarget;
       if (!relatedTarget || !shadowRoot.contains(relatedTarget)) {
+        lastHoverIdxRef.current = null;
         callbackRefs.current.onElementHover?.(null);
       }
     };
@@ -3991,6 +4002,11 @@ function ShadowDomRenderer({
         rafRef.current = null;
       }
       lastBlockNodeRef.current = null;
+      if (hoverRafRef.current) {
+        cancelAnimationFrame(hoverRafRef.current);
+        hoverRafRef.current = null;
+      }
+      lastHoverIdxRef.current = null;
       shadowRoot.removeEventListener("mousedown", handleMouseDown);
       shadowRoot.removeEventListener("click", handleLinkClick, true);
       shadowRoot.removeEventListener("mouseover", handleMouseOver);
@@ -4067,7 +4083,7 @@ function ShadowDomRenderer({
       }
     )
   ] });
-}
+});
 function getIdxFromElement(element) {
   const classList = element.classList;
   for (let i = 0; i < classList.length; i++) {
@@ -12260,7 +12276,7 @@ var useHref = () => {
       }
     }
   }, [href]);
-  const hasHref = Boolean(href && href !== "#" && href.trim() !== "");
+  const hasHref = Boolean(href && href !== "" && href.trim() !== "");
   return {
     href,
     setHref,
@@ -13976,20 +13992,11 @@ async function compileMjml(mjml) {
   return result;
 }
 
-// src/core/editor/hooks/use-user.ts
-function useUser() {
-  return {
-    isPaid: true
-    // toggle to true for testing paid features
-  };
-}
-
 // src/core/editor/components/preview.tsx
 import { useEffect as useEffect18, useState as useState14, useRef as useRef10 } from "react";
 import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
 function Preview() {
-  const { isPaid } = useUser();
-  const { template, setPreviewMode, previewMode } = useEditorStore();
+  const { template, setPreviewMode, previewMode, isPaidLevel } = useEditorStore();
   const [html, setHtml] = useState14("");
   const [isLoading, setIsLoading] = useState14(false);
   const lastTemplateRef = useRef10("");
@@ -14009,7 +14016,7 @@ function Preview() {
     setIsLoading(true);
     const convertMjml = async () => {
       try {
-        const mjmlString = json2mjml(template, "production", { isPaid });
+        const mjmlString = json2mjml(template, "production", { isPaidLevel });
         console.log("MJML string:", mjmlString);
         const result = await compileMjml(mjmlString);
         if (result.errors?.length > 0) {
@@ -15065,6 +15072,7 @@ export {
   parsePrice,
   json2mjml,
   MAX_TEMPLATE_SIZE,
+  MAX_PAID_LEVEL,
   useEditorStore,
   BUTTON_ALIGNMENTS,
   ALIGNMENT_ICONS,
@@ -15113,7 +15121,6 @@ export {
   SidebarProvider,
   useSidebarContext,
   Textarea,
-  useUser,
   Preview,
   History,
   MAILLOW_EMAIL_EDITOR_VERSION,

package/dist/{core-F5E63TCH.mjs → core-UL57QVFL.mjs}

@@ -5,7 +5,7 @@ import {
   MAILLOW_EMAIL_EDITOR_VERSION,
   Preview,
   useEditorStore
-} from "./chunk-TDZCSKBT.mjs";
+} from "./chunk-PL5EKNN6.mjs";
 export {
   Editor,
   History,

package/dist/index.d.mts

@@ -260,6 +260,7 @@ type TemplateJSON = {
 };
 
 type OnSaveCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
+type PaidLevel = 0 | 1 | 2 | 3;
 
 interface EditorProps {
     setEditorLoading?: (loading: boolean) => void;
@@ -267,10 +268,11 @@ interface EditorProps {
 }
 declare function Editor({ setEditorLoading }: EditorProps): react_jsx_runtime.JSX.Element;
 
-declare function TemplatePage({ templateId, initialTemplate, onSave }: {
+declare function TemplatePage({ templateId, initialTemplate, onSave, isPaidLevel }: {
     templateId: string;
     initialTemplate: TemplateJSON;
     onSave?: OnSaveCallback;
+    isPaidLevel?: PaidLevel;
 }): react_jsx_runtime.JSX.Element;
 
 /**
@@ -280,7 +282,7 @@ declare function TemplatePage({ templateId, initialTemplate, onSave }: {
 
 type RenderMode = 'production' | 'editing';
 interface RenderOptions {
-    isPaid?: boolean;
+    isPaidLevel?: number;
 }
 /**
  * Convert template JSON to MJML string
@@ -291,4 +293,4 @@ interface RenderOptions {
  */
 declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
 
-export { Editor, type OnSaveCallback, type TemplateJSON, TemplatePage, json2mjml };
+export { Editor, type OnSaveCallback, type PaidLevel, type TemplateJSON, TemplatePage, json2mjml };

package/dist/index.d.ts

@@ -260,6 +260,7 @@ type TemplateJSON = {
 };
 
 type OnSaveCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
+type PaidLevel = 0 | 1 | 2 | 3;
 
 interface EditorProps {
     setEditorLoading?: (loading: boolean) => void;
@@ -267,10 +268,11 @@ interface EditorProps {
 }
 declare function Editor({ setEditorLoading }: EditorProps): react_jsx_runtime.JSX.Element;
 
-declare function TemplatePage({ templateId, initialTemplate, onSave }: {
+declare function TemplatePage({ templateId, initialTemplate, onSave, isPaidLevel }: {
     templateId: string;
     initialTemplate: TemplateJSON;
     onSave?: OnSaveCallback;
+    isPaidLevel?: PaidLevel;
 }): react_jsx_runtime.JSX.Element;
 
 /**
@@ -280,7 +282,7 @@ declare function TemplatePage({ templateId, initialTemplate, onSave }: {
 
 type RenderMode = 'production' | 'editing';
 interface RenderOptions {
-    isPaid?: boolean;
+    isPaidLevel?: number;
 }
 /**
  * Convert template JSON to MJML string
@@ -291,4 +293,4 @@ interface RenderOptions {
  */
 declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
 
-export { Editor, type OnSaveCallback, type TemplateJSON, TemplatePage, json2mjml };
+export { Editor, type OnSaveCallback, type PaidLevel, type TemplateJSON, TemplatePage, json2mjml };