@fluid-app/portal-sdk 0.1.214 → 0.1.216

package/dist/MySiteWidget-CDQjyrRA.cjs

@@ -0,0 +1,584 @@
+const require_chunk = require("./chunk-9hOWP6kD.cjs");
+const require_registry_context = require("./registry-context-RWj2xJlC.cjs");
+const require_error_state = require("./error-state-C-AalLnz.cjs");
+const require_registries = require("./registries-CpUM406S.cjs");
+let react = require("react");
+let _tanstack_react_query = require("@tanstack/react-query");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let qrcode_react = require("qrcode.react");
+//#region ../widgets/src/hooks/use-mysite.preview.ts
+const PREVIEW_DATA = {
+	url: "https://mysite.example.com",
+	views: 1248,
+	leads: 43,
+	userName: "Jane"
+};
+//#endregion
+//#region ../widgets/src/hooks/use-mysite.ts
+function useMySite() {
+	const widgetsApi = require_error_state.useWidgetsApi();
+	const { isPreview } = require_error_state.useWidgetPreviewContext();
+	const { baseUrl } = require_registry_context.useDataSourceRegistryConfig();
+	return (0, _tanstack_react_query.useQuery)({
+		queryKey: [
+			"portal-widget-use",
+			"mysite",
+			isPreview ? "preview" : baseUrl
+		],
+		queryFn: ({ signal }) => widgetsApi.fetchMySite(signal),
+		enabled: !isPreview,
+		...isPreview && { placeholderData: PREVIEW_DATA }
+	});
+}
+//#endregion
+//#region ../widgets/src/widgets/MySiteWidget.tsx
+var MySiteWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	MySiteWidget: () => MySiteWidget,
+	mySiteWidgetPropertySchema: () => mySiteWidgetPropertySchema
+});
+const formatCompactNumber = (n) => {
+	const value = n ?? 0;
+	if (value < 1e3) return value.toLocaleString();
+	if (value < 1e4) return `${(value / 1e3).toFixed(1)}k`;
+	if (value < 1e6) return `${Math.round(value / 1e3)}k`;
+	return `${(value / 1e6).toFixed(1)}m`;
+};
+const splitUrl = (url) => {
+	try {
+		const parsed = new URL(url);
+		return {
+			prefix: `${parsed.protocol}//${parsed.host}`,
+			path: `${parsed.pathname}${parsed.search}${parsed.hash}`.replace(/^\/$/, "") || ""
+		};
+	} catch {
+		return {
+			prefix: "",
+			path: url
+		};
+	}
+};
+function MySiteWidget({ background = {
+	type: "solid",
+	color: "background"
+}, textColor = "foreground", accentColor = "primary", borderRadius = "xl", showPreview = true, showAnalytics = true, showLiveBadge = true, showQR = true, className, ...props }) {
+	const { copyState, markCopied } = useTimedCopyState(1600);
+	const { rootRef: widgetRootRef, isWide } = useIsContainerWide(720);
+	const { frameRef: previewFrameRef, scale, iframeHeight } = useScaledIframePreview({
+		viewportWidth: 1280,
+		minIframeHeight: 500,
+		resetKey: isWide
+	});
+	const backgroundColor = background.color || "background";
+	const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
+	const { data: mySite, isLoading, isError } = useMySite();
+	const { isPreview } = require_error_state.useWidgetPreviewContext();
+	const { hasRealSite, url, views, leads } = useRealMySiteData(mySite, isPreview);
+	const { previewUrl, hostLabel, urlPrefix, urlPath } = useMySiteDisplayUrls(url);
+	const showDashboardLayout = isWide && hasRealSite;
+	const showStats = showAnalytics && hasRealSite;
+	const showFooter = hasRealSite;
+	const handleCopy = async () => {
+		if (!url) return;
+		try {
+			await navigator.clipboard.writeText(url);
+			markCopied();
+		} catch (error) {
+			console.error("Failed to copy MySite URL:", error);
+		}
+	};
+	if (!isLoading && !isError && !isPreview && !hasRealSite) return null;
+	const divider = { borderTop: `1px solid color-mix(in oklch, var(--color-${textColor}) 8%, transparent)` };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: widgetRootRef,
+		className: `@container relative overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} ${className ?? ""}`,
+		style: {
+			backgroundImage,
+			boxShadow: `0 1px 2px rgba(15,23,42,0.04), 0 20px 40px -24px rgba(15,23,42,0.16), inset 0 0 0 1px color-mix(in oklch, var(--color-${textColor}) 7%, transparent)`
+		},
+		...props,
+		children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySiteSkeleton, {
+			textColor,
+			accentColor,
+			borderRadius
+		}) : isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "p-6",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_error_state.ErrorState, {})
+		}) : showDashboardLayout ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-stretch",
+			children: [showPreview && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative isolate shrink-0 bg-white",
+				style: {
+					width: "45%",
+					borderRight: `1px solid color-mix(in oklch, var(--color-${textColor}) 10%, transparent)`
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: previewFrameRef,
+					className: "relative h-full w-full overflow-hidden bg-white",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+						className: "pointer-events-none absolute top-0 left-0 origin-top-left bg-white",
+						src: previewUrl,
+						title: `${hostLabel} preview`,
+						loading: "lazy",
+						style: {
+							width: "1280px",
+							height: `${iframeHeight}px`,
+							transform: `scale(${scale})`
+						}
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"aria-hidden": "true",
+						className: "pointer-events-none absolute inset-x-0 top-0 h-px",
+						style: { background: "linear-gradient(to right, transparent, rgba(255,255,255,0.7), transparent)" }
+					})]
+				}), showLiveBadge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "absolute top-4 left-4",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: `inline-flex items-center gap-1.5 rounded-${borderRadius} bg-white px-2.5 py-1 text-[10px] font-bold tracking-[0.18em] text-slate-700 uppercase`,
+						style: { boxShadow: "0 2px 8px rgba(15,23,42,0.08), inset 0 0 0 1px rgba(15,23,42,0.06)" },
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": "true",
+							className: `bg-${accentColor} size-1.5 rounded-full`
+						}), "Live"]
+					})
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-3.5 p-5 sm:p-6",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `text-[10px] font-bold tracking-[0.2em] uppercase text-${textColor}/55`,
+						children: "Your Storefront"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: `mt-1 text-[22px] leading-[1.1] font-bold tracking-[-0.02em] text-${textColor}`,
+						children: "You’re live"
+					})] }),
+					hasRealSite && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick: handleCopy,
+						"aria-label": copyState === "copied" ? "Copied to clipboard" : "Copy site link",
+						className: `group/copy flex items-center gap-2.5 rounded-${borderRadius} px-3 py-2 text-[13px] transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-${accentColor}/40 ${copyState === "copied" ? `bg-${accentColor}/10` : `bg-${textColor}/5 hover:bg-${textColor}/10`}`,
+						style: { boxShadow: `inset 0 0 0 1px color-mix(in oklch, var(--color-${textColor}) 10%, transparent)` },
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Globe, { className: `size-3.5 shrink-0 text-${textColor}/55` }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: `min-w-0 flex-1 truncate text-left font-semibold tabular-nums text-${textColor}`,
+								children: [hostLabel, urlPath]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `flex size-7 shrink-0 items-center justify-center rounded-full transition-all duration-300 ${copyState === "copied" ? `bg-${accentColor} text-${accentColor}-foreground` : `bg-${textColor} text-${backgroundColor}`}`,
+								children: copyState === "copied" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "size-3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-3" })
+							})
+						]
+					}),
+					showStats && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: { borderTop: `1px solid color-mix(in oklch, var(--color-${textColor}) 10%, transparent)` } }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "grid grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: `text-[10px] font-bold tracking-[0.18em] uppercase text-${textColor}/55`,
+							children: "Visitors"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: `mt-1 text-[32px] leading-none font-bold tracking-[-0.02em] tabular-nums text-${textColor}`,
+							children: formatCompactNumber(views)
+						})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: `text-[10px] font-bold tracking-[0.18em] uppercase text-${textColor}/55`,
+							children: "Leads"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: `mt-1 text-[32px] leading-none font-bold tracking-[-0.02em] tabular-nums text-${textColor}`,
+							children: formatCompactNumber(leads)
+						})] })]
+					})] }),
+					hasRealSite && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+						href: url,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						className: `group/visit mt-auto inline-flex items-center justify-between gap-2 rounded-${borderRadius} bg-${accentColor} px-4 py-3 text-[13px] font-bold text-${accentColor}-foreground transition-all duration-300 hover:shadow-[0_12px_28px_-8px_color-mix(in_oklch,var(--color-${accentColor})_60%,transparent)]`,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Open the live site" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpRight, { className: "size-3.5 transition-transform duration-300 group-hover/visit:translate-x-0.5 group-hover/visit:-translate-y-0.5" })]
+					})
+				]
+			})]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col",
+			children: [showPreview && (hasRealSite || isPreview) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative isolate bg-white",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: previewFrameRef,
+					className: "relative aspect-[16/10] w-full overflow-hidden bg-white",
+					children: [isPreview || !hasRealSite ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySitePreviewPlaceholder, { hostLabel }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+						className: "pointer-events-none absolute top-0 left-0 origin-top-left bg-white",
+						src: previewUrl,
+						title: `${hostLabel} preview`,
+						loading: "lazy",
+						style: {
+							width: "1280px",
+							height: `${iframeHeight}px`,
+							transform: `scale(${scale})`
+						}
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"aria-hidden": "true",
+						className: "pointer-events-none absolute inset-x-0 top-0 h-px",
+						style: { background: "linear-gradient(to right, transparent, rgba(255,255,255,0.7), transparent)" }
+					})]
+				}), showLiveBadge && hasRealSite && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "absolute top-3 right-3",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: `inline-flex items-center gap-1.5 rounded-${borderRadius} bg-white px-2 py-1 text-[9px] font-bold tracking-[0.18em] text-slate-700 uppercase`,
+						style: { boxShadow: "0 2px 8px rgba(15,23,42,0.08), inset 0 0 0 1px rgba(15,23,42,0.06)" },
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": "true",
+							className: `bg-${accentColor} size-1.5 rounded-full`
+						}), "Live"]
+					})
+				})]
+			}), showFooter && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-stretch",
+				style: {
+					borderTop: `1px solid color-mix(in oklch, var(--color-${textColor}) 10%, transparent)`,
+					background: `color-mix(in oklch, var(--color-${textColor}) 3%, transparent)`
+				},
+				children: [showQR && hasRealSite && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex shrink-0 items-center justify-center p-4",
+					style: { borderRight: `1px solid color-mix(in oklch, var(--color-${textColor}) 8%, transparent)` },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `flex flex-col items-center gap-1.5 rounded-${borderRadius} bg-white p-2.5`,
+						style: { boxShadow: "0 2px 8px rgba(15,23,42,0.05), inset 0 0 0 1px rgba(15,23,42,0.06)" },
+						role: "img",
+						"aria-label": "QR code for your site",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(qrcode_react.QRCodeSVG, {
+							value: url,
+							size: 64,
+							level: "H",
+							bgColor: "#ffffff",
+							fgColor: "#0f172a"
+						})
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [showStats && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "grid grid-cols-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCell, {
+							label: "Visitors",
+							value: formatCompactNumber(views),
+							textColor
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatCell, {
+							label: "Leads",
+							value: formatCompactNumber(leads),
+							textColor,
+							leftDivider: true
+						})]
+					}), hasRealSite && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2 px-4 py-3",
+						style: showStats ? divider : void 0,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							onClick: handleCopy,
+							"aria-label": copyState === "copied" ? "Copied to clipboard" : "Copy site link",
+							className: `group/copy flex min-w-0 flex-1 items-center justify-between gap-2 rounded-${borderRadius} px-3 py-2 text-left text-[12px] transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-${accentColor}/40 ${copyState === "copied" ? `bg-${accentColor}/10` : `bg-${textColor}/5 hover:bg-${textColor}/10`}`,
+							style: { boxShadow: `inset 0 0 0 1px color-mix(in oklch, var(--color-${textColor}) 8%, transparent)` },
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: `min-w-0 flex-1 truncate font-medium text-${textColor}`,
+								children: [urlPrefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: `text-${textColor}/45`,
+									children: urlPrefix
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-semibold",
+									children: urlPath || "/"
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `flex size-6 shrink-0 items-center justify-center rounded-full transition-all duration-300 ${copyState === "copied" ? `scale-105 bg-${accentColor} text-${accentColor}-foreground` : `bg-${textColor}/10 text-${textColor} group-hover/copy:bg-${textColor}/20`}`,
+								children: copyState === "copied" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "size-3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-3" })
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+							href: url,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							"aria-label": "Visit site",
+							className: `group/visit inline-flex size-9 shrink-0 items-center justify-center rounded-${borderRadius} bg-${accentColor} text-${accentColor}-foreground transition-all duration-300 hover:shadow-[0_10px_24px_-8px_color-mix(in_oklch,var(--color-${accentColor})_60%,transparent)]`,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpRight, { className: "size-3.5 transition-transform duration-300 group-hover/visit:translate-x-0.5 group-hover/visit:-translate-y-0.5" })
+						})]
+					})]
+				})]
+			})]
+		})
+	});
+}
+function MySitePreviewPlaceholder({ hostLabel }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "bg-muted/30 absolute inset-0 flex flex-col items-center justify-center gap-3 p-4 text-center",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "bg-muted flex h-10 w-10 items-center justify-center rounded-full",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Globe, { className: "text-muted-foreground h-5 w-5" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-foreground text-sm font-medium",
+			children: "My Site"
+		}), hostLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-muted-foreground mt-0.5 text-xs",
+			children: hostLabel
+		})] })]
+	});
+}
+function StatCell({ label, value, textColor, leftDivider }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-1.5 px-5 py-4",
+		style: leftDivider ? { borderLeft: `1px solid color-mix(in oklch, var(--color-${textColor}) 8%, transparent)` } : void 0,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: `text-[10px] font-bold tracking-[0.16em] uppercase text-${textColor}/55`,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: `text-[22px] leading-none font-bold tracking-[-0.02em] tabular-nums text-${textColor}`,
+			children: value
+		})]
+	});
+}
+function MySiteSkeleton({ textColor, accentColor, borderRadius }) {
+	const divider = { borderTop: `1px solid color-mix(in oklch, var(--color-${textColor}) 8%, transparent)` };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex animate-pulse flex-col",
+		"aria-busy": "true",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `relative aspect-[16/10] w-full overflow-hidden bg-${textColor}/5` }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-stretch",
+			style: {
+				borderTop: `1px solid color-mix(in oklch, var(--color-${textColor}) 10%, transparent)`,
+				background: `color-mix(in oklch, var(--color-${textColor}) 3%, transparent)`
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex shrink-0 items-center justify-center p-4",
+				style: { borderRight: `1px solid color-mix(in oklch, var(--color-${textColor}) 8%, transparent)` },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `size-[84px] rounded-${borderRadius} bg-${textColor}/10` })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "grid grid-cols-2",
+					children: [0, 1].map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col gap-2 px-5 py-4",
+						style: i > 0 ? { borderLeft: `1px solid color-mix(in oklch, var(--color-${textColor}) 8%, transparent)` } : void 0,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `h-2 w-14 rounded-full bg-${textColor}/10` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `h-5 w-16 rounded-full bg-${textColor}/15` })]
+					}, i))
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2 px-4 py-3",
+					style: divider,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `h-8 flex-1 rounded-${borderRadius} bg-${textColor}/10` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `size-9 shrink-0 rounded-${borderRadius} bg-${accentColor}/30` })]
+				})]
+			})]
+		})]
+	});
+}
+function useRealMySiteData(mySite, isPreview) {
+	return (0, react.useMemo)(() => {
+		if (isPreview || !mySite?.url) return {
+			hasRealSite: false,
+			url: "",
+			views: 0,
+			leads: 0,
+			userName: ""
+		};
+		return {
+			hasRealSite: true,
+			url: mySite.url,
+			views: mySite.views,
+			leads: mySite.leads,
+			userName: mySite.userName
+		};
+	}, [isPreview, mySite]);
+}
+function useMySiteDisplayUrls(url) {
+	const previewUrl = (0, react.useMemo)(() => {
+		if (!url) return "";
+		try {
+			const urlObj = new URL(url);
+			urlObj.searchParams.set("preview", "true");
+			return urlObj.toString();
+		} catch {
+			return url;
+		}
+	}, [url]);
+	const hostLabel = (0, react.useMemo)(() => {
+		if (!url) return "";
+		try {
+			return new URL(url).host;
+		} catch {
+			return url.replace(/^https?:\/\//, "");
+		}
+	}, [url]);
+	const { prefix: urlPrefix, path: urlPath } = (0, react.useMemo)(() => url ? splitUrl(url) : {
+		prefix: "",
+		path: ""
+	}, [url]);
+	return {
+		previewUrl,
+		hostLabel,
+		urlPrefix,
+		urlPath
+	};
+}
+function useTimedCopyState(timeoutMs) {
+	const [copyState, setCopyState] = (0, react.useState)("idle");
+	(0, react.useEffect)(() => {
+		if (copyState !== "copied") return;
+		const id = window.setTimeout(() => setCopyState("idle"), timeoutMs);
+		return () => window.clearTimeout(id);
+	}, [copyState, timeoutMs]);
+	return {
+		copyState,
+		markCopied: (0, react.useCallback)(() => {
+			setCopyState("copied");
+		}, [])
+	};
+}
+const useIsoLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+function useIsContainerWide(threshold) {
+	const rootRef = (0, react.useRef)(null);
+	const [isWide, setIsWide] = (0, react.useState)(false);
+	useIsoLayoutEffect(() => {
+		const el = rootRef.current;
+		if (!el) return;
+		const update = () => setIsWide(el.clientWidth >= threshold);
+		update();
+		const ro = new ResizeObserver(update);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [threshold]);
+	return {
+		rootRef,
+		isWide
+	};
+}
+function useScaledIframePreview({ viewportWidth, minIframeHeight, resetKey }) {
+	const frameRef = (0, react.useRef)(null);
+	const [metrics, setMetrics] = (0, react.useState)({
+		scale: .5,
+		iframeHeight: minIframeHeight
+	});
+	(0, react.useEffect)(() => {
+		const el = frameRef.current;
+		if (!el) return;
+		const update = () => {
+			const w = el.clientWidth;
+			const h = el.clientHeight;
+			if (w > 0 && h > 0) {
+				const scale = w / viewportWidth;
+				setMetrics({
+					scale,
+					iframeHeight: Math.max(minIframeHeight, h / scale)
+				});
+			}
+		};
+		update();
+		const ro = new ResizeObserver(update);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [
+		viewportWidth,
+		minIframeHeight,
+		resetKey
+	]);
+	return {
+		frameRef,
+		scale: metrics.scale,
+		iframeHeight: metrics.iframeHeight
+	};
+}
+const mySiteWidgetPropertySchema = {
+	widgetType: "MySiteWidget",
+	displayName: "MySite Widget",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}],
+	fields: [
+		{
+			key: "showPreview",
+			label: "Show Site Preview",
+			type: "boolean",
+			description: "Show the live iframe preview of the storefront",
+			defaultValue: true,
+			tab: "styling",
+			group: "Display"
+		},
+		{
+			key: "showAnalytics",
+			label: "Show Stats",
+			type: "boolean",
+			description: "Visitors and Leads grid in the footer",
+			defaultValue: true,
+			tab: "styling",
+			group: "Display"
+		},
+		{
+			key: "showLiveBadge",
+			label: "Show LIVE Badge",
+			type: "boolean",
+			description: "Small 'Live' chip in the preview corner",
+			defaultValue: true,
+			tab: "styling",
+			group: "Display"
+		},
+		{
+			key: "showQR",
+			label: "Show QR Code",
+			type: "boolean",
+			description: "Show a scannable QR code in the card footer",
+			defaultValue: true,
+			tab: "styling",
+			group: "Display"
+		},
+		{
+			type: "background",
+			key: "background",
+			label: "Background",
+			description: "Background for the widget container",
+			defaultValue: "background",
+			tab: "styling",
+			group: "Design"
+		},
+		require_registries.getColorField({
+			key: "textColor",
+			label: "Text Color",
+			description: "Primary text, hairline, and neutral chip color",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Design"
+		}),
+		require_registries.getColorField({
+			key: "accentColor",
+			label: "Accent Color",
+			description: "Drives the Live dot, conversion ring, and Visit CTA",
+			defaultValue: "primary",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "separator",
+			type: "separator",
+			label: "Separator",
+			tab: "styling",
+			group: "Design"
+		},
+		require_registries.getBorderRadiusField({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Corner radius for the widget and inner chips",
+			defaultValue: "xl",
+			tab: "styling",
+			group: "Design"
+		})
+	]
+};
+//#endregion
+Object.defineProperty(exports, "MySiteWidget", {
+	enumerable: true,
+	get: function() {
+		return MySiteWidget;
+	}
+});
+Object.defineProperty(exports, "MySiteWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return MySiteWidget_exports;
+	}
+});
+Object.defineProperty(exports, "mySiteWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return mySiteWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=MySiteWidget-CDQjyrRA.cjs.map