@mathews_cometchat/bubble-builder 1.0.0-alpha25 → 1.0.0-alpha27

package/dist/bubble-builder.es.js

@@ -8207,6 +8207,7 @@ var P = ee((e, t) => ({
 	fallbackText: "",
 	notificationTitle: "",
 	notificationBody: "",
+	notificationData: [],
 	notificationEnabled: !1,
 	canvasView: "bubble",
 	channels: "inapp",
@@ -8554,6 +8555,18 @@ var P = ee((e, t) => ({
 		notificationBody: t,
 		isDirty: !0
 	}),
+	setNotificationData: (t) => {
+		e({
+			notificationData: t,
+			isDirty: !0
+		});
+		let n = O.notification;
+		if (n?.onNotificationDataChange) {
+			let e = {};
+			for (let { key: n, value: r } of t) n.trim() && (e[n.trim()] = r);
+			n.onNotificationDataChange(e);
+		}
+	},
 	setNotificationEnabled: (t) => e({ notificationEnabled: t }),
 	setCanvasView: (t) => e({ canvasView: t }),
 	setChannels: (t) => e({
@@ -8599,6 +8612,7 @@ var P = ee((e, t) => ({
 		fallbackText: "",
 		notificationTitle: "",
 		notificationBody: "",
+		notificationData: [],
 		selectedPath: null,
 		selectedPaths: [],
 		clipboard: null,
@@ -16552,357 +16566,375 @@ var Kn = 375, qn = 667, Jn = /* @__PURE__ */ new Date(), Yn = Jn.toLocaleTimeStr
 		})
 	]
 }), Qn = (0, S.memo)(function({ platform: e }) {
-	let t = P((e) => e.notificationTitle), n = P((e) => e.notificationBody), r = O.notification, i = r?.appName ?? "App", a = r?.appIcon;
-	return /* @__PURE__ */ (0, F.jsx)("div", {
+	let t = P((e) => e.notificationTitle), n = P((e) => e.notificationBody), r = O.notification, i = r?.appName ?? "App", a = r?.appIcon, o = (0, S.useRef)(null), [s, c] = (0, S.useState)(1);
+	return (0, S.useEffect)(() => {
+		let e = o.current?.parentElement;
+		if (!e) return;
+		let t = () => {
+			let t = e.getBoundingClientRect(), n = t.height - 64, r = t.width - 100, i = Math.min(n / qn, r / Kn);
+			c(Math.round(Math.max(i, .4) * 100) / 100);
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []), /* @__PURE__ */ (0, F.jsx)("div", {
+		ref: o,
 		style: {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
-			padding: "16px 0",
 			height: "100%"
 		},
-		children: /* @__PURE__ */ (0, F.jsxs)("div", {
+		children: /* @__PURE__ */ (0, F.jsx)("div", {
 			style: {
-				width: Kn,
-				height: qn,
-				overflow: "hidden",
-				flexShrink: 0,
-				borderRadius: e === "ios" ? 48 : 24,
-				background: "linear-gradient(162deg, rgb(131,151,230) 0%, rgb(130,84,219) 49%, rgb(135,184,189) 100%)",
-				boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
-				fontFamily: e === "ios" ? "-apple-system, BlinkMacSystemFont, \"SF Pro Display\", sans-serif" : "\"Roboto\", \"Google Sans\", sans-serif",
-				color: "#fff",
-				position: "relative",
-				display: "flex",
-				flexDirection: "column",
-				justifyContent: e === "ios" ? "space-between" : "flex-start",
-				padding: 16
+				width: Kn * s,
+				height: qn * s,
+				flexShrink: 0
 			},
-			children: [/* @__PURE__ */ (0, F.jsxs)("div", { children: [e === "ios" ? /* @__PURE__ */ (0, F.jsx)("div", {
-				style: {
-					display: "flex",
-					justifyContent: "flex-end",
-					padding: "0 8px",
-					height: 32
-				},
-				children: Zn
-			}) : /* @__PURE__ */ (0, F.jsxs)("div", {
+			children: /* @__PURE__ */ (0, F.jsxs)("div", {
 				style: {
+					width: Kn,
+					height: qn,
+					overflow: "hidden",
+					transform: `scale(${s})`,
+					transformOrigin: "top left",
+					borderRadius: e === "ios" ? 48 : 24,
+					background: "linear-gradient(162deg, rgb(131,151,230) 0%, rgb(130,84,219) 49%, rgb(135,184,189) 100%)",
+					boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
+					fontFamily: e === "ios" ? "-apple-system, BlinkMacSystemFont, \"SF Pro Display\", sans-serif" : "\"Roboto\", \"Google Sans\", sans-serif",
+					color: "#fff",
+					position: "relative",
 					display: "flex",
-					justifyContent: "space-between",
-					alignItems: "center",
-					padding: "0 8px",
-					height: 32
+					flexDirection: "column",
+					justifyContent: e === "ios" ? "space-between" : "flex-start",
+					padding: 16
 				},
-				children: [/* @__PURE__ */ (0, F.jsx)("span", {
+				children: [/* @__PURE__ */ (0, F.jsxs)("div", { children: [e === "ios" ? /* @__PURE__ */ (0, F.jsx)("div", {
 					style: {
-						fontSize: 13,
-						fontWeight: 600
+						display: "flex",
+						justifyContent: "flex-end",
+						padding: "0 8px",
+						height: 32
 					},
-					children: Yn
-				}), Zn]
-			}), e === "ios" ? /* @__PURE__ */ (0, F.jsxs)(F.Fragment, { children: [/* @__PURE__ */ (0, F.jsx)("div", {
-				style: {
-					marginTop: 40,
-					textAlign: "center",
-					fontSize: 20,
-					fontWeight: 600,
-					lineHeight: "20px",
-					color: "rgba(255,255,255,0.8)"
-				},
-				children: Xn
-			}), /* @__PURE__ */ (0, F.jsx)("div", {
-				style: {
-					textAlign: "center",
-					fontSize: 86,
-					lineHeight: "96px",
-					letterSpacing: -4,
-					color: "rgba(255,255,255,0.8)"
-				},
-				children: Yn
-			})] }) : /* @__PURE__ */ (0, F.jsxs)(F.Fragment, { children: [/* @__PURE__ */ (0, F.jsx)("div", {
-				style: {
-					textAlign: "center",
-					fontSize: 80,
-					lineHeight: "94px",
-					letterSpacing: -4,
-					color: "#fff",
-					marginTop: 64
-				},
-				children: Yn
-			}), /* @__PURE__ */ (0, F.jsx)("div", {
-				style: {
-					textAlign: "center",
-					fontSize: 16,
-					textTransform: "uppercase",
-					letterSpacing: 1.4,
-					color: "#fff",
-					marginBottom: 34
-				},
-				children: Xn
-			})] })] }), /* @__PURE__ */ (0, F.jsxs)("div", { children: [
-				/* @__PURE__ */ (0, F.jsxs)("div", {
+					children: Zn
+				}) : /* @__PURE__ */ (0, F.jsxs)("div", {
 					style: {
-						borderRadius: 20,
-						background: "rgba(255,255,255,0.56)",
-						padding: e === "ios" ? "16px 14px" : "14px 16px",
-						color: "#000",
-						backdropFilter: "blur(20px)",
 						display: "flex",
-						gap: 10,
-						alignItems: "flex-start"
+						justifyContent: "space-between",
+						alignItems: "center",
+						padding: "0 8px",
+						height: 32
 					},
-					children: [e === "ios" ? a ? /* @__PURE__ */ (0, F.jsx)("img", {
-						src: a,
-						alt: "",
-						style: {
-							width: 38,
-							height: 38,
-							borderRadius: 10,
-							objectFit: "cover",
-							flexShrink: 0,
-							background: "#fff"
-						}
-					}) : /* @__PURE__ */ (0, F.jsx)("div", {
+					children: [/* @__PURE__ */ (0, F.jsx)("span", {
 						style: {
-							width: 38,
-							height: 38,
-							borderRadius: 10,
-							background: "#fff",
-							flexShrink: 0,
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center"
+							fontSize: 13,
+							fontWeight: 600
 						},
-						children: /* @__PURE__ */ (0, F.jsx)("div", { style: {
-							width: 20,
-							height: 20,
-							borderRadius: 4,
-							background: "#6852D6"
-						} })
-					}) : null, /* @__PURE__ */ (0, F.jsx)("div", {
+						children: Yn
+					}), Zn]
+				}), e === "ios" ? /* @__PURE__ */ (0, F.jsxs)(F.Fragment, { children: [/* @__PURE__ */ (0, F.jsx)("div", {
+					style: {
+						marginTop: 40,
+						textAlign: "center",
+						fontSize: 20,
+						fontWeight: 600,
+						lineHeight: "20px",
+						color: "rgba(255,255,255,0.8)"
+					},
+					children: Xn
+				}), /* @__PURE__ */ (0, F.jsx)("div", {
+					style: {
+						textAlign: "center",
+						fontSize: 86,
+						lineHeight: "96px",
+						letterSpacing: -4,
+						color: "rgba(255,255,255,0.8)"
+					},
+					children: Yn
+				})] }) : /* @__PURE__ */ (0, F.jsxs)(F.Fragment, { children: [/* @__PURE__ */ (0, F.jsx)("div", {
+					style: {
+						textAlign: "center",
+						fontSize: 80,
+						lineHeight: "94px",
+						letterSpacing: -4,
+						color: "#fff",
+						marginTop: 64
+					},
+					children: Yn
+				}), /* @__PURE__ */ (0, F.jsx)("div", {
+					style: {
+						textAlign: "center",
+						fontSize: 16,
+						textTransform: "uppercase",
+						letterSpacing: 1.4,
+						color: "#fff",
+						marginBottom: 34
+					},
+					children: Xn
+				})] })] }), /* @__PURE__ */ (0, F.jsxs)("div", { children: [
+					/* @__PURE__ */ (0, F.jsxs)("div", {
 						style: {
-							flex: 1,
-							minWidth: 0
+							borderRadius: 20,
+							background: "rgba(255,255,255,0.56)",
+							padding: e === "ios" ? "16px 14px" : "14px 16px",
+							color: "#000",
+							backdropFilter: "blur(20px)",
+							display: "flex",
+							gap: 10,
+							alignItems: "flex-start"
 						},
-						children: e === "ios" ? /* @__PURE__ */ (0, F.jsxs)(F.Fragment, { children: [
-							/* @__PURE__ */ (0, F.jsxs)("div", {
-								style: {
-									display: "flex",
-									gap: 4,
-									alignItems: "baseline"
-								},
-								children: [/* @__PURE__ */ (0, F.jsx)("span", {
+						children: [e === "ios" ? a ? /* @__PURE__ */ (0, F.jsx)("img", {
+							src: a,
+							alt: "",
+							style: {
+								width: 38,
+								height: 38,
+								borderRadius: 10,
+								objectFit: "cover",
+								flexShrink: 0,
+								background: "#fff"
+							}
+						}) : /* @__PURE__ */ (0, F.jsx)("div", {
+							style: {
+								width: 38,
+								height: 38,
+								borderRadius: 10,
+								background: "#fff",
+								flexShrink: 0,
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center"
+							},
+							children: /* @__PURE__ */ (0, F.jsx)("div", { style: {
+								width: 20,
+								height: 20,
+								borderRadius: 4,
+								background: "#6852D6"
+							} })
+						}) : null, /* @__PURE__ */ (0, F.jsx)("div", {
+							style: {
+								flex: 1,
+								minWidth: 0
+							},
+							children: e === "ios" ? /* @__PURE__ */ (0, F.jsxs)(F.Fragment, { children: [
+								/* @__PURE__ */ (0, F.jsxs)("div", {
+									style: {
+										display: "flex",
+										gap: 4,
+										alignItems: "baseline"
+									},
+									children: [/* @__PURE__ */ (0, F.jsx)("span", {
+										style: {
+											fontWeight: 700,
+											fontSize: 15,
+											lineHeight: "18px",
+											flex: 1,
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap"
+										},
+										children: t || i
+									}), /* @__PURE__ */ (0, F.jsx)("span", {
+										style: {
+											fontSize: 12,
+											color: "#4f4f4f",
+											flexShrink: 0
+										},
+										children: "now"
+									})]
+								}),
+								n && /* @__PURE__ */ (0, F.jsx)("div", {
 									style: {
-										fontWeight: 700,
 										fontSize: 15,
 										lineHeight: "18px",
-										flex: 1,
+										opacity: .88,
 										overflow: "hidden",
 										textOverflow: "ellipsis",
-										whiteSpace: "nowrap"
+										whiteSpace: "nowrap",
+										marginTop: 4
 									},
-									children: t || i
-								}), /* @__PURE__ */ (0, F.jsx)("span", {
+									children: n
+								}),
+								!t && !n && /* @__PURE__ */ (0, F.jsx)("div", {
 									style: {
-										fontSize: 12,
-										color: "#4f4f4f",
-										flexShrink: 0
+										fontSize: 13,
+										color: "#aaa",
+										fontStyle: "italic",
+										marginTop: 2
 									},
-									children: "now"
-								})]
-							}),
-							n && /* @__PURE__ */ (0, F.jsx)("div", {
-								style: {
-									fontSize: 15,
-									lineHeight: "18px",
-									opacity: .88,
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-									whiteSpace: "nowrap",
-									marginTop: 4
-								},
-								children: n
-							}),
-							!t && !n && /* @__PURE__ */ (0, F.jsx)("div", {
-								style: {
-									fontSize: 13,
-									color: "#aaa",
-									fontStyle: "italic",
-									marginTop: 2
-								},
-								children: "Enter title and body in the Notification tab"
-							})
-						] }) : /* @__PURE__ */ (0, F.jsx)(F.Fragment, { children: /* @__PURE__ */ (0, F.jsxs)("div", {
-							style: {
-								display: "flex",
-								gap: 10,
-								alignItems: "flex-start"
-							},
-							children: [a ? /* @__PURE__ */ (0, F.jsx)("img", {
-								src: a,
-								alt: "",
-								style: {
-									width: 38,
-									height: 38,
-									borderRadius: 19,
-									objectFit: "cover",
-									flexShrink: 0,
-									background: "#fff"
-								}
-							}) : /* @__PURE__ */ (0, F.jsx)("div", {
-								style: {
-									width: 38,
-									height: 38,
-									borderRadius: 19,
-									background: "#fff",
-									flexShrink: 0,
-									display: "flex",
-									alignItems: "center",
-									justifyContent: "center"
-								},
-								children: /* @__PURE__ */ (0, F.jsx)("div", { style: {
-									width: 20,
-									height: 20,
-									borderRadius: 4,
-									background: "#6852D6"
-								} })
-							}), /* @__PURE__ */ (0, F.jsxs)("div", {
+									children: "Enter title and body in the Notification tab"
+								})
+							] }) : /* @__PURE__ */ (0, F.jsx)(F.Fragment, { children: /* @__PURE__ */ (0, F.jsxs)("div", {
 								style: {
-									flex: 1,
-									minWidth: 0,
 									display: "flex",
-									flexDirection: "column",
-									gap: 6
+									gap: 10,
+									alignItems: "flex-start"
 								},
-								children: [
-									/* @__PURE__ */ (0, F.jsxs)("div", {
-										style: {
-											display: "flex",
-											gap: 6,
-											alignItems: "center"
-										},
-										children: [
-											/* @__PURE__ */ (0, F.jsx)("span", {
-												style: {
-													fontWeight: 700,
-													fontSize: 14,
-													lineHeight: "16px",
-													overflow: "hidden",
-													textOverflow: "ellipsis",
-													whiteSpace: "nowrap"
-												},
-												children: t || i
-											}),
-											/* @__PURE__ */ (0, F.jsx)("span", {
-												style: {
-													fontSize: 12,
-													color: "#4f4f4f",
-													flexGrow: 1
-												},
-												children: "now"
-											}),
-											/* @__PURE__ */ (0, F.jsx)("svg", {
-												width: "16",
-												height: "16",
-												viewBox: "0 0 16 16",
-												fill: "none",
-												style: { flexShrink: 0 },
-												children: /* @__PURE__ */ (0, F.jsx)("path", {
-													fillRule: "evenodd",
-													clipRule: "evenodd",
-													d: "M3.53 6.47l.94-.94 3.53 3.53 3.53-3.53.94.94L8 10.94 3.53 6.47z",
-													fill: "#5E5E5E"
+								children: [a ? /* @__PURE__ */ (0, F.jsx)("img", {
+									src: a,
+									alt: "",
+									style: {
+										width: 38,
+										height: 38,
+										borderRadius: 19,
+										objectFit: "cover",
+										flexShrink: 0,
+										background: "#fff"
+									}
+								}) : /* @__PURE__ */ (0, F.jsx)("div", {
+									style: {
+										width: 38,
+										height: 38,
+										borderRadius: 19,
+										background: "#fff",
+										flexShrink: 0,
+										display: "flex",
+										alignItems: "center",
+										justifyContent: "center"
+									},
+									children: /* @__PURE__ */ (0, F.jsx)("div", { style: {
+										width: 20,
+										height: 20,
+										borderRadius: 4,
+										background: "#6852D6"
+									} })
+								}), /* @__PURE__ */ (0, F.jsxs)("div", {
+									style: {
+										flex: 1,
+										minWidth: 0,
+										display: "flex",
+										flexDirection: "column",
+										gap: 6
+									},
+									children: [
+										/* @__PURE__ */ (0, F.jsxs)("div", {
+											style: {
+												display: "flex",
+												gap: 6,
+												alignItems: "center"
+											},
+											children: [
+												/* @__PURE__ */ (0, F.jsx)("span", {
+													style: {
+														fontWeight: 700,
+														fontSize: 14,
+														lineHeight: "16px",
+														overflow: "hidden",
+														textOverflow: "ellipsis",
+														whiteSpace: "nowrap"
+													},
+													children: t || i
+												}),
+												/* @__PURE__ */ (0, F.jsx)("span", {
+													style: {
+														fontSize: 12,
+														color: "#4f4f4f",
+														flexGrow: 1
+													},
+													children: "now"
+												}),
+												/* @__PURE__ */ (0, F.jsx)("svg", {
+													width: "16",
+													height: "16",
+													viewBox: "0 0 16 16",
+													fill: "none",
+													style: { flexShrink: 0 },
+													children: /* @__PURE__ */ (0, F.jsx)("path", {
+														fillRule: "evenodd",
+														clipRule: "evenodd",
+														d: "M3.53 6.47l.94-.94 3.53 3.53 3.53-3.53.94.94L8 10.94 3.53 6.47z",
+														fill: "#5E5E5E"
+													})
 												})
-											})
-										]
-									}),
-									n && /* @__PURE__ */ (0, F.jsx)("div", {
-										style: {
-											fontSize: 14,
-											lineHeight: "16px",
-											color: "#4f4f4f",
-											overflow: "hidden",
-											textOverflow: "ellipsis",
-											whiteSpace: "nowrap"
-										},
-										children: n
-									}),
-									!t && !n && /* @__PURE__ */ (0, F.jsx)("div", {
-										style: {
-											fontSize: 13,
-											color: "#aaa",
-											fontStyle: "italic"
-										},
-										children: "Enter title and body in the Notification tab"
-									})
-								]
-							})]
-						}) })
-					})]
-				}),
-				e === "ios" && /* @__PURE__ */ (0, F.jsxs)("div", {
-					style: {
-						display: "flex",
-						justifyContent: "center",
-						gap: 190,
-						marginTop: 16,
-						marginBottom: -10
-					},
-					children: [/* @__PURE__ */ (0, F.jsx)("div", {
-						style: {
-							width: 50,
-							height: 50,
-							borderRadius: 25,
-							background: "rgba(255,255,255,0.15)",
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center"
-						},
-						children: /* @__PURE__ */ (0, F.jsxs)("svg", {
-							width: "18",
-							height: "18",
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "white",
-							strokeWidth: "2",
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							children: [
-								/* @__PURE__ */ (0, F.jsx)("path", { d: "M9 18h6" }),
-								/* @__PURE__ */ (0, F.jsx)("path", { d: "M10 22h4" }),
-								/* @__PURE__ */ (0, F.jsx)("path", { d: "M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0018 8 6 6 0 006 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 018.91 14" })
-							]
-						})
-					}), /* @__PURE__ */ (0, F.jsx)("div", {
+											]
+										}),
+										n && /* @__PURE__ */ (0, F.jsx)("div", {
+											style: {
+												fontSize: 14,
+												lineHeight: "16px",
+												color: "#4f4f4f",
+												overflow: "hidden",
+												textOverflow: "ellipsis",
+												whiteSpace: "nowrap"
+											},
+											children: n
+										}),
+										!t && !n && /* @__PURE__ */ (0, F.jsx)("div", {
+											style: {
+												fontSize: 13,
+												color: "#aaa",
+												fontStyle: "italic"
+											},
+											children: "Enter title and body in the Notification tab"
+										})
+									]
+								})]
+							}) })
+						})]
+					}),
+					e === "ios" && /* @__PURE__ */ (0, F.jsxs)("div", {
 						style: {
-							width: 50,
-							height: 50,
-							borderRadius: 25,
-							background: "rgba(255,255,255,0.15)",
 							display: "flex",
-							alignItems: "center",
-							justifyContent: "center"
+							justifyContent: "center",
+							gap: 190,
+							marginTop: 16,
+							marginBottom: -10
 						},
-						children: /* @__PURE__ */ (0, F.jsxs)("svg", {
-							width: "20",
-							height: "20",
-							viewBox: "0 0 24 24",
-							fill: "white",
-							children: [/* @__PURE__ */ (0, F.jsx)("path", { d: "M12 15.2a3.2 3.2 0 100-6.4 3.2 3.2 0 000 6.4z" }), /* @__PURE__ */ (0, F.jsx)("path", { d: "M9 2L7.17 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2h-3.17L15 2H9zm3 15a5 5 0 110-10 5 5 0 010 10z" })]
-						})
-					})]
-				}),
-				e === "ios" && /* @__PURE__ */ (0, F.jsx)("div", { style: {
-					height: 5,
-					width: 134,
-					borderRadius: 3,
-					background: "#fff",
-					alignSelf: "center",
-					margin: "0 auto",
-					marginTop: 16
-				} })
-			] })]
+						children: [/* @__PURE__ */ (0, F.jsx)("div", {
+							style: {
+								width: 50,
+								height: 50,
+								borderRadius: 25,
+								background: "rgba(255,255,255,0.15)",
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center"
+							},
+							children: /* @__PURE__ */ (0, F.jsxs)("svg", {
+								width: "18",
+								height: "18",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "white",
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								children: [
+									/* @__PURE__ */ (0, F.jsx)("path", { d: "M9 18h6" }),
+									/* @__PURE__ */ (0, F.jsx)("path", { d: "M10 22h4" }),
+									/* @__PURE__ */ (0, F.jsx)("path", { d: "M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0018 8 6 6 0 006 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 018.91 14" })
+								]
+							})
+						}), /* @__PURE__ */ (0, F.jsx)("div", {
+							style: {
+								width: 50,
+								height: 50,
+								borderRadius: 25,
+								background: "rgba(255,255,255,0.15)",
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center"
+							},
+							children: /* @__PURE__ */ (0, F.jsxs)("svg", {
+								width: "20",
+								height: "20",
+								viewBox: "0 0 24 24",
+								fill: "white",
+								children: [/* @__PURE__ */ (0, F.jsx)("path", { d: "M12 15.2a3.2 3.2 0 100-6.4 3.2 3.2 0 000 6.4z" }), /* @__PURE__ */ (0, F.jsx)("path", { d: "M9 2L7.17 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2h-3.17L15 2H9zm3 15a5 5 0 110-10 5 5 0 010 10z" })]
+							})
+						})]
+					}),
+					e === "ios" && /* @__PURE__ */ (0, F.jsx)("div", { style: {
+						height: 5,
+						width: 134,
+						borderRadius: 3,
+						background: "#fff",
+						alignSelf: "center",
+						margin: "0 auto",
+						marginTop: 16
+					} })
+				] })]
+			})
 		})
 	});
 }), $n = {
@@ -16933,7 +16965,7 @@ var Kn = 375, qn = 667, Jn = /* @__PURE__ */ new Date(), Yn = Jn.toLocaleTimeStr
 	transition: "all 0.15s"
 }, tr = (0, S.memo)(function({ platform: e, setPlatform: t }) {
 	let n = P((e) => e.canvasView), r = P((e) => e.setCanvasView), i = P((e) => e.channels);
-	return i === "inapp" ? null : /* @__PURE__ */ (0, F.jsxs)("div", {
+	return i === "inapp" || O.notification?.showPreview === !1 ? null : /* @__PURE__ */ (0, F.jsxs)("div", {
 		style: {
 			display: "flex",
 			flexDirection: "column",
@@ -17096,7 +17128,7 @@ var rr = /* @__PURE__ */ (0, F.jsxs)("div", {
 			/* @__PURE__ */ (0, F.jsxs)("div", {
 				className: "canvas-area",
 				ref: w,
-				children: [b === "notification" ? /* @__PURE__ */ (0, F.jsx)(Qn, { platform: x }) : /* @__PURE__ */ (0, F.jsx)("div", {
+				children: [b === "notification" && O.notification?.showPreview !== !1 ? /* @__PURE__ */ (0, F.jsx)(Qn, { platform: x }) : /* @__PURE__ */ (0, F.jsx)("div", {
 					style: {
 						width: 375 * f,
 						height: 667 * f,
@@ -20006,7 +20038,19 @@ var Wr = (0, S.memo)(function() {
 		})
 	] });
 }), Gr = (0, S.memo)(function() {
-	let e = P((e) => e.notificationTitle), t = P((e) => e.notificationBody), n = P((e) => e.setNotificationTitle), r = P((e) => e.setNotificationBody);
+	let e = P((e) => e.notificationTitle), t = P((e) => e.notificationBody), n = P((e) => e.notificationData), r = P((e) => e.setNotificationTitle), i = P((e) => e.setNotificationBody), a = P((e) => e.setNotificationData), o = O.notification?.enableData, s = (0, S.useCallback)(() => {
+		a([...n, {
+			key: "",
+			value: ""
+		}]);
+	}, [n, a]), c = (0, S.useCallback)((e, t, r) => {
+		a(n.map((n, i) => i === e ? {
+			...n,
+			[t]: r
+		} : n));
+	}, [n, a]), l = (0, S.useCallback)((e) => {
+		a(n.filter((t, n) => n !== e));
+	}, [n, a]);
 	return /* @__PURE__ */ (0, F.jsxs)("div", { children: [
 		/* @__PURE__ */ (0, F.jsx)("div", {
 			className: "prop-badge",
@@ -20026,7 +20070,7 @@ var Wr = (0, S.memo)(function() {
 						children: "Title"
 					}), /* @__PURE__ */ (0, F.jsx)(dr, {
 						value: e,
-						onChange: n,
+						onChange: r,
 						placeholder: "Notification title..."
 					})]
 				}),
@@ -20037,7 +20081,7 @@ var Wr = (0, S.memo)(function() {
 						children: "Body"
 					}), /* @__PURE__ */ (0, F.jsx)(dr, {
 						value: t,
-						onChange: r,
+						onChange: i,
 						placeholder: "Notification body...",
 						multiline: !0,
 						rows: 3
@@ -20045,9 +20089,114 @@ var Wr = (0, S.memo)(function() {
 				})
 			]
 		}),
+		o && /* @__PURE__ */ (0, F.jsxs)("div", {
+			className: "prop-group",
+			children: [/* @__PURE__ */ (0, F.jsxs)("div", {
+				style: {
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					marginBottom: 12
+				},
+				children: [/* @__PURE__ */ (0, F.jsx)("div", {
+					className: "prop-group-title",
+					style: { marginBottom: 0 },
+					children: "Data"
+				}), /* @__PURE__ */ (0, F.jsx)("button", {
+					onClick: s,
+					className: "prop-label",
+					style: {
+						fontWeight: 600,
+						color: "var(--accent-primary)",
+						background: "var(--accent-light)",
+						border: "1px solid var(--border-accent)",
+						borderRadius: 6,
+						padding: "4px 10px",
+						cursor: "pointer"
+					},
+					children: "Add +"
+				})]
+			}), n.length === 0 ? /* @__PURE__ */ (0, F.jsx)("div", {
+				style: {
+					color: "var(--text-muted)",
+					padding: "8px 0"
+				},
+				children: "No data entries. Click \"Add +\" to add key-value pairs."
+			}) : n.map((e, t) => /* @__PURE__ */ (0, F.jsxs)("div", {
+				style: {
+					border: "1px solid var(--border-subtle)",
+					borderRadius: 6,
+					padding: 10,
+					marginBottom: 6
+				},
+				children: [
+					/* @__PURE__ */ (0, F.jsxs)("div", {
+						style: {
+							display: "flex",
+							justifyContent: "space-between",
+							alignItems: "center",
+							marginBottom: 6
+						},
+						children: [/* @__PURE__ */ (0, F.jsxs)("span", {
+							className: "prop-label",
+							style: {
+								fontWeight: 600,
+								marginBottom: 0
+							},
+							children: ["Data ", t + 1]
+						}), /* @__PURE__ */ (0, F.jsx)("button", {
+							onClick: () => l(t),
+							title: "Remove",
+							style: {
+								color: "var(--text-secondary)",
+								cursor: "pointer",
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center"
+							},
+							children: /* @__PURE__ */ (0, F.jsxs)("svg", {
+								width: "13",
+								height: "13",
+								viewBox: "0 0 24 24",
+								fill: "currentColor",
+								children: [/* @__PURE__ */ (0, F.jsx)("path", { d: "M8.5 2A2.5 2.5 0 0 0 6 4.5V6h2V4.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5V6h2V4.5A2.5 2.5 0 0 0 15.5 2h-7ZM13 18v-6h2v6h-2ZM9 12v6h2v-6H9Z" }), /* @__PURE__ */ (0, F.jsx)("path", {
+									fillRule: "evenodd",
+									d: "M4 7.5h16v.016h2v2h-2V19.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 19.5V9.516H2v-2h2V7.5Zm14 2.016H6V19.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V9.516Z",
+									clipRule: "evenodd"
+								})]
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, F.jsxs)("div", {
+						className: "prop-field",
+						children: [/* @__PURE__ */ (0, F.jsx)("label", {
+							className: "prop-label",
+							children: "Key"
+						}), /* @__PURE__ */ (0, F.jsx)("input", {
+							value: e.key,
+							onChange: (e) => c(t, "key", e.target.value),
+							placeholder: "Up to 10 characters",
+							maxLength: 10
+						})]
+					}),
+					/* @__PURE__ */ (0, F.jsxs)("div", {
+						className: "prop-field",
+						style: { marginBottom: 0 },
+						children: [/* @__PURE__ */ (0, F.jsx)("label", {
+							className: "prop-label",
+							children: "Value (optional)"
+						}), /* @__PURE__ */ (0, F.jsx)("input", {
+							value: e.value,
+							onChange: (e) => c(t, "value", e.target.value),
+							placeholder: "Up to 50 characters",
+							maxLength: 50
+						})]
+					})
+				]
+			}, t))]
+		}),
 		/* @__PURE__ */ (0, F.jsx)("div", {
 			style: {
-				fontSize: 11,
 				color: "var(--text-muted)",
 				padding: "8px 12px",
 				lineHeight: 1.5
@@ -22409,7 +22558,9 @@ function os(e, t) {
 }
 var ss = (0, S.memo)(function() {
 	let e = P((e) => e.selectedPath), t = P((e) => e.body), n = P((e) => e.updateElement), r = P((e) => e.setCanvasView), i = P((e) => e.channels), [a, o] = (0, S.useState)(i === "push" ? "notification" : "tree"), s = i === "push" || i === "both", c = e ? os(t, e) : null, l = (0, S.useCallback)((e) => {
-		o(e), r(e === "notification" ? "notification" : "bubble");
+		o(e);
+		let t = O.notification?.showPreview !== !1;
+		r(e === "notification" && t ? "notification" : "bubble");
 	}, [r]), u = (0, S.useCallback)((e) => {
 		let t = P.getState().selectedPath;
 		t && n(t, e);
@@ -22592,7 +22743,7 @@ function fs() {
 //#endregion
 //#region src/lib.tsx
 function ps(e, t) {
-	O.appId = t.appId, O.region = t.region, O.token = t.token, O.onSave = t.onSave, O.onChange = t.onChange, O.hideTopBar = t.hideTopBar, O.hideTemplateLibrary = t.hideTemplateLibrary, O.channels = t.channels ?? "inapp", O.notification = t.notification, P.getState().setChannels(O.channels), t.variables && P.getState().setVariables(t.variables), t.hiddenElements && P.getState().setHiddenElements(t.hiddenElements), t.hiddenComponents && P.getState().setHiddenComponents(t.hiddenComponents), t.hideTemplateLibrary && P.getState().setView("editor"), console.log("[BubbleBuilder] mountBubbleBuilder called with:", {
+	O.appId = t.appId, O.region = t.region, O.token = t.token, O.onSave = t.onSave, O.onChange = t.onChange, O.hideTopBar = t.hideTopBar, O.hideTemplateLibrary = t.hideTemplateLibrary, O.channels = t.channels ?? "both", O.notification = t.notification, P.getState().setChannels(O.channels), t.variables && P.getState().setVariables(t.variables), t.hiddenElements && P.getState().setHiddenElements(t.hiddenElements), t.hiddenComponents && P.getState().setHiddenComponents(t.hiddenComponents), t.hideTemplateLibrary && P.getState().setView("editor"), console.log("[BubbleBuilder] mountBubbleBuilder called with:", {
 		appId: t.appId,
 		region: t.region,
 		token: t.token ? "***" + t.token.slice(-4) : void 0,