@yoamigo.com/core 0.3.14 → 0.3.17

package/dist/index.js

@@ -3552,7 +3552,7 @@ function YaImage({
   fallbackSrc,
   fallbackAlt
 }) {
-  const { getValue, mode } = useContentStore();
+  const { getValue, setValue, mode } = useContentStore();
   const containerRef = useRef8(null);
   const imgRef = useRef8(null);
   const [isSelected, setIsSelected] = useState7(false);
@@ -3560,12 +3560,14 @@ function YaImage({
   const [isSmallImage, setIsSmallImage] = useState7(false);
   const [isDropMode, setIsDropMode] = useState7(false);
   const [isDropHover, setIsDropHover] = useState7(false);
+  const [previewOverride, setPreviewOverride] = useState7(null);
   const rawValue = getValue(fieldId);
   const imageData = parseImageValue(rawValue);
-  const src = imageData.src || fallbackSrc || PLACEHOLDER_SVG;
-  const altText = imageData.alt || alt || fallbackAlt || "";
-  const objectFit = imageData.objectFit || propObjectFit || "cover";
-  const objectPosition = getObjectPosition(imageData) || propObjectPosition || "50% 50%";
+  const displayData = previewOverride || imageData;
+  const src = displayData.src || fallbackSrc || PLACEHOLDER_SVG;
+  const altText = displayData.alt || alt || fallbackAlt || "";
+  const objectFit = displayData.objectFit || propObjectFit || "cover";
+  const objectPosition = getObjectPosition(displayData) || propObjectPosition || "50% 50%";
   const handleClick = useCallback9(() => {
     if (mode !== "inline-edit") return;
     if (document.body.classList.contains("builder-selector-active")) return;
@@ -3598,17 +3600,23 @@ function YaImage({
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_IMAGE_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
+        const value = event.data.value;
+        setValue(fieldId, serializeImageValue(value), "user");
+        setPreviewOverride(null);
         setIsSelected(false);
       }
       if (event.data?.type === "YA_IMAGE_EDIT_CANCEL" && event.data.fieldId === fieldId) {
+        setPreviewOverride(null);
         setIsSelected(false);
       }
       if (event.data?.type === "YA_IMAGE_UPDATE_PREVIEW" && event.data.fieldId === fieldId) {
+        const value = event.data.value;
+        setPreviewOverride(value);
       }
     };
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
-  }, [mode, fieldId]);
+  }, [mode, fieldId, setValue]);
   useEffect8(() => {
     if (mode !== "inline-edit") return;
     const handleDropModeMessage = (event) => {
@@ -5640,31 +5648,6 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
               children: "Background Color"
             }
           ) }),
-          /* @__PURE__ */ jsx16(
-            "button",
-            {
-              ref: aiRefs.setReference,
-              type: "button",
-              onClick: onAIClick,
-              "aria-label": "Ask AI for help",
-              ...getAiRefProps(),
-              children: /* @__PURE__ */ jsxs10("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx16("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
-                /* @__PURE__ */ jsx16("path", { d: "M2 17l10 5 10-5" }),
-                /* @__PURE__ */ jsx16("path", { d: "M2 12l10 5 10-5" })
-              ] })
-            }
-          ),
-          aiOpen && /* @__PURE__ */ jsx16(FloatingPortal2, { children: /* @__PURE__ */ jsx16(
-            "div",
-            {
-              ref: aiRefs.setFloating,
-              className: "ya-container-tooltip",
-              style: aiStyles,
-              ...getAiFloatProps(),
-              children: "AI Assist"
-            }
-          ) }),
           hasBackground && /* @__PURE__ */ jsxs10(Fragment5, { children: [
             /* @__PURE__ */ jsx16(
               "button",
@@ -5711,6 +5694,7 @@ function YaContainer({
   const [isSelected, setIsSelected] = useState13(false);
   const [isDropMode, setIsDropMode] = useState13(false);
   const [isDropHover, setIsDropHover] = useState13(false);
+  const [previewConfig, setPreviewConfig] = useState13(null);
   useEffect14(() => {
     if (mode !== "inline-edit") return;
     const containerEl = containerRef.current;
@@ -5735,13 +5719,14 @@ function YaContainer({
   }, [mode]);
   const rawValue = getValue(fieldId);
   const backgroundConfig = rawValue ? parseBackgroundConfig(rawValue) : defaultBackground || { type: "none" };
-  const hasBackground = backgroundConfig.type !== "none";
+  const displayConfig = previewConfig ?? backgroundConfig;
+  const hasBackground = displayConfig.type !== "none";
   const backgroundStyles = {};
-  if (backgroundConfig.type === "color" && backgroundConfig.backgroundColor) {
-    backgroundStyles.backgroundColor = backgroundConfig.backgroundColor;
+  if (displayConfig.type === "color" && displayConfig.backgroundColor) {
+    backgroundStyles.backgroundColor = displayConfig.backgroundColor;
   }
-  if (backgroundConfig.type === "image" && backgroundConfig.backgroundImage) {
-    const img = backgroundConfig.backgroundImage;
+  if (displayConfig.type === "image" && displayConfig.backgroundImage) {
+    const img = displayConfig.backgroundImage;
     const resolvedSrc = resolveAssetUrl(img.src);
     backgroundStyles.backgroundImage = `url(${resolvedSrc})`;
     backgroundStyles.backgroundSize = img.objectFit || "cover";
@@ -5749,9 +5734,9 @@ function YaContainer({
     backgroundStyles.backgroundRepeat = "no-repeat";
   }
   const overlayCustomProps = {};
-  if (backgroundConfig.overlay) {
-    overlayCustomProps["--ya-overlay-color"] = backgroundConfig.overlay.color;
-    overlayCustomProps["--ya-overlay-opacity"] = backgroundConfig.overlay.opacity;
+  if (displayConfig.overlay) {
+    overlayCustomProps["--ya-overlay-color"] = displayConfig.overlay.color;
+    overlayCustomProps["--ya-overlay-opacity"] = displayConfig.overlay.opacity;
   }
   const handleImageClick = useCallback15(() => {
     if (mode !== "inline-edit") return;
@@ -5816,11 +5801,19 @@ function YaContainer({
   useEffect14(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
+      if (event.data?.type === "YA_CONTAINER_UPDATE_PREVIEW" && event.data.fieldId === fieldId) {
+        if (event.data.value) {
+          const config = typeof event.data.value === "string" ? parseBackgroundConfig(event.data.value) : event.data.value;
+          setPreviewConfig(config);
+        }
+      }
       if (event.data?.type === "YA_CONTAINER_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
         setIsSelected(false);
+        setPreviewConfig(null);
       }
       if (event.data?.type === "YA_CONTAINER_EDIT_CANCEL" && event.data.fieldId === fieldId) {
         setIsSelected(false);
+        setPreviewConfig(null);
       }
     };
     window.addEventListener("message", handleMessage2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoamigo.com/core",
-  "version": "0.3.14",
+  "version": "0.3.17",
   "description": "Core components, router, and utilities for YoAmigo templates",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",