const require_chunk = require("./chunk-9hOWP6kD.cjs");
const require_static_dict_adapter = require("./static-dict-adapter-BCgoKiVT.cjs");
const require_translation_api_context_factory = require("./translation-api-context-factory-mbsJk2UU.cjs");
const require_src = require("./src-CMer7k-Y.cjs");
const require_translation_adapter = require("./translation-adapter-Bi9lcWv1.cjs");
const require_ScreenHeaderContext = require("./ScreenHeaderContext-NGY43GoF.cjs");
const require_AppNavigationContext = require("./AppNavigationContext-D1Xx1-jH.cjs");
const require_use_mysite_portal = require("./use-mysite-portal-DhSTHOio.cjs");
const require_dist$3 = require("./dist-DabhBHre.cjs");
let react = require("react");
react = require_chunk.__toESM(react);
require("@tanstack/react-query");
let react_jsx_runtime = require("react/jsx-runtime");
let zod = require("zod");
let lucide_react = require("lucide-react");
//#region ../../mysite/core/src/translation-api-context.ts
const { Provider: MysiteProvider, useTranslation } = require_translation_api_context_factory.createTranslationContext("Mysite");
const MysiteTranslationProvider = MysiteProvider;
const useMysiteTranslation = useTranslation;
//#endregion
//#region src/providers/MysiteTranslationBridge.tsx
function MysiteTranslationBridge({ children }) {
	const { locale } = require_static_dict_adapter.useActiveLocale();
	const dict = require_static_dict_adapter.useDomainDict(require_translation_adapter.mysiteDomain, locale);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MysiteTranslationProvider, {
		value: (0, react.useMemo)(() => require_translation_adapter.createMysiteTranslationAdapter(locale, dict), [locale, dict]),
		children
	});
}
//#endregion
//#region ../../mysite/ui/src/portal/components/animation-utils.ts
function getContentClassName(phase) {
	switch (phase) {
		case "idle": return "opacity-100 transition-none";
		case "fade-out": return "opacity-0 transition-opacity duration-300 ease-in-out";
		case "slide": return "opacity-0 2xl:translate-x-[50%] transition-transform duration-500 ease-in-out";
		case "fade-in": return "opacity-100 2xl:translate-x-[50%] transition-opacity duration-300 ease-in-out";
		case "editing": return "opacity-100 2xl:translate-x-[50%] transition-none";
		case "exit-fade-out": return "opacity-0 2xl:translate-x-[50%] transition-opacity duration-300 ease-in-out";
		case "exit-slide": return "opacity-0 transition-transform duration-500 ease-in-out";
		case "exit-fade-in": return "opacity-100 transition-opacity duration-300 ease-in-out";
	}
}
function getPreviewClassName(phase) {
	switch (phase) {
		case "idle":
		case "fade-out":
		case "exit-fade-in": return "transition-none";
		case "slide": return "2xl:-translate-x-[200%] transition-transform duration-500 ease-in-out";
		case "fade-in":
		case "editing":
		case "exit-fade-out": return "2xl:-translate-x-[200%] transition-none";
		case "exit-slide": return "transition-transform duration-500 ease-in-out";
	}
}
//#endregion
//#region ../../mysite/ui/src/portal/components/VisitorDetailsCard.tsx
function MySiteVisitorDetailsCard({ views, leads }) {
	const { t } = useMysiteTranslation();
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, {
		className: "h-auto gap-0 py-0 shadow-none",
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardHeader, {
			className: "p-4 pb-3",
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardTitle, {
				className: "text-sm",
				children: t("visitor_details")
			})
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardContent, {
			className: "flex px-4 pb-4",
			children: [
				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "flex-1",
					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						className: "mb-2 flex items-center gap-1.5",
						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Eye, { className: "text-muted-foreground size-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
							className: "text-muted-foreground text-sm",
							children: t("views")
						})]
					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
						className: "text-foreground text-2xl font-bold",
						children: views.toLocaleString()
					})]
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Separator, {
					orientation: "vertical",
					className: "bg-border mx-4 h-auto"
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "flex-1",
					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						className: "mb-2 flex items-center gap-1.5",
						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Users, { className: "text-muted-foreground size-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
							className: "text-muted-foreground text-sm",
							children: t("leads")
						})]
					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
						className: "text-foreground text-2xl font-bold",
						children: leads.toLocaleString()
					})]
				})
			]
		})]
	});
}
//#endregion
//#region ../../mysite/ui/src/portal/components/MySiteLinkCard.tsx
function MySiteLinkCard({ mysiteUrl, displayUrl, onUpdateSlug, onToast }) {
	const { t } = useMysiteTranslation();
	const lastSlashIndex = displayUrl.lastIndexOf("/");
	const urlPrefix = lastSlashIndex >= 0 ? displayUrl.slice(0, lastSlashIndex + 1) : "";
	const currentSlug = lastSlashIndex >= 0 ? displayUrl.slice(lastSlashIndex + 1) : displayUrl;
	const [isEditingLink, setIsEditingLink] = (0, react.useState)(false);
	const [linkSlugInput, setLinkSlugInput] = (0, react.useState)(currentSlug);
	const [isSaving, setIsSaving] = (0, react.useState)(false);
	const handleEditLink = (0, react.useCallback)(() => {
		setLinkSlugInput(currentSlug);
		setIsEditingLink(true);
	}, [currentSlug]);
	const handleCancelEditLink = (0, react.useCallback)(() => {
		setIsEditingLink(false);
		setLinkSlugInput(currentSlug);
	}, [currentSlug]);
	const handleSaveLink = (0, react.useCallback)(async () => {
		const trimmed = linkSlugInput.trim();
		if (!trimmed) {
			onToast?.(t("slug_empty_error"), "error");
			return;
		}
		if (trimmed === currentSlug) {
			setIsEditingLink(false);
			return;
		}
		if (!onUpdateSlug) return;
		setIsSaving(true);
		try {
			await onUpdateSlug(trimmed);
			onToast?.(t("link_updated"), "success");
			setIsEditingLink(false);
		} catch {
			onToast?.(t("link_update_failed"), "error");
		} finally {
			setIsSaving(false);
		}
	}, [
		linkSlugInput,
		currentSlug,
		onUpdateSlug,
		onToast,
		t
	]);
	const handleCopyLink = (0, react.useCallback)(async () => {
		if (!mysiteUrl) return;
		try {
			await navigator.clipboard.writeText(mysiteUrl);
			onToast?.(t("link_copied"), "success");
		} catch {
			onToast?.(t("link_copy_failed"), "error");
		}
	}, [
		mysiteUrl,
		onToast,
		t
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, {
		className: "h-auto gap-0 py-0 shadow-none",
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardHeader, {
			className: "items-center p-4",
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardTitle, {
				className: "text-sm",
				children: t("your_mysite_link")
			}), !isEditingLink && onUpdateSlug && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardAction, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
				variant: "link",
				size: "sm",
				onClick: handleEditLink,
				children: t("edit_link")
			}) })]
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardContent, {
			className: "px-4 pb-4",
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "text-foreground flex items-center gap-2 rounded-lg border bg-gradient-to-r from-[rgba(72,187,120,0.2)] via-[rgba(236,72,153,0.15)] to-[rgba(251,146,60,0.15)] px-3 py-2.5",
				children: [isEditingLink ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
					className: "shrink-0 text-sm",
					children: urlPrefix
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
					type: "text",
					value: linkSlugInput,
					onChange: (e) => setLinkSlugInput(e.target.value),
					onKeyDown: (e) => {
						if (e.key === "Enter" && !isSaving) handleSaveLink();
						if (e.key === "Escape") handleCancelEditLink();
					},
					className: "border-input text-foreground focus:ring-primary bg-background/60 min-w-0 flex-1 rounded-md border px-2 py-1 text-sm font-medium outline-none focus:ring-1",
					autoFocus: true
				})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
					className: "min-w-0 flex-1 truncate text-sm",
					children: displayUrl || t("not_configured")
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
					variant: "ghost",
					size: "icon",
					onClick: handleCopyLink,
					disabled: !mysiteUrl,
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-4" })
				})]
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "grid transition-all duration-300 ease-in-out",
				style: {
					gridTemplateRows: isEditingLink ? "1fr" : "0fr",
					opacity: isEditingLink ? 1 : 0,
					marginTop: isEditingLink ? 12 : 0
				},
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "overflow-hidden",
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						className: "flex justify-end gap-2",
						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
							variant: "secondary",
							size: "sm",
							onClick: handleCancelEditLink,
							children: t("cancel")
						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
							size: "sm",
							onClick: handleSaveLink,
							disabled: isSaving,
							children: isSaving ? t("saving") : t("save")
						})]
					})
				})
			})]
		})]
	});
}
//#endregion
//#region ../../mysite/ui/src/portal/components/PhonePreview.tsx
function MySitePhonePreview({ mysiteUrl, themeName, previewKey, isUpdating, onPreview }) {
	const { t } = useMysiteTranslation();
	const iframeRef = (0, react.useRef)(null);
	const previewSrc = `${mysiteUrl}?preview=true`;
	const isInitialLoadRef = (0, react.useRef)(true);
	(0, react.useEffect)(() => {
		isInitialLoadRef.current = true;
	}, [previewKey]);
	const handleIframeLoad = () => {
		if (isInitialLoadRef.current) {
			isInitialLoadRef.current = false;
			return;
		}
		const iframe = iframeRef.current;
		if (!iframe) return;
		isInitialLoadRef.current = true;
		iframe.src = previewSrc;
	};
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, {
		className: "items-center gap-4 py-5",
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardHeader, {
			className: "w-full items-center px-5",
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
				className: "text-muted-foreground text-xs",
				children: t("current_theme")
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
				className: "text-foreground text-sm font-semibold",
				children: themeName
			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
				className: "col-start-2 row-span-2 row-start-1 cursor-pointer self-center justify-self-end",
				variant: "secondary",
				size: "sm",
				onClick: onPreview,
				disabled: !mysiteUrl,
				children: t("preview")
			})]
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardContent, {
			className: "relative mx-auto my-auto w-[260px] px-0 sm:w-[320px]",
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "overflow-hidden rounded-[32px] border-[6px] border-[#1e2939] bg-[#1e2939] shadow-xl sm:rounded-[40px] sm:border-[8px]",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "flex items-center justify-between bg-[#101828] px-5 py-1 sm:px-6 sm:py-1.5",
					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
						className: "text-[10px] font-medium text-[#ffffff] sm:text-[11px]",
						children: "9:41"
					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						className: "flex items-center gap-1",
						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-2 w-2 rounded-full bg-[#ffffff60] sm:h-2.5 sm:w-2.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-2 w-3.5 rounded-sm bg-[#ffffff60] sm:h-2.5 sm:w-4" })]
					})]
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "relative h-[490px] overflow-y-auto bg-[#ffffff] sm:h-[600px]",
					style: { scrollbarWidth: "none" },
					"aria-busy": isUpdating,
					children: mysiteUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
						ref: iframeRef,
						className: "h-full w-full origin-top-left bg-[#ffffff]",
						src: previewSrc,
						title: t("mysite_preview"),
						tabIndex: -1,
						sandbox: "allow-scripts allow-same-origin",
						onLoad: handleIframeLoad
					}, previewKey), isUpdating && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
						className: "absolute inset-0 flex items-center justify-center bg-white/60",
						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LoaderCircle, { className: "text-muted-foreground size-6 animate-spin" })
					})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
						className: "flex h-full items-center justify-center",
						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
							className: "text-muted-foreground text-sm",
							children: t("no_site_configured")
						})
					})
				})]
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute bottom-1.5 left-1/2 h-1 w-24 -translate-x-1/2 rounded-full bg-white sm:bottom-2 sm:w-28" })]
		})]
	});
}
//#endregion
//#region ../../mysite/ui/src/portal/components/ThemeEditor.tsx
function MySiteThemeEditor({ themes, selectedThemeId, onSelectTheme, isPending, onBack }) {
	const { t } = useMysiteTranslation();
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		className: "flex items-center gap-3",
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
			variant: "ghost",
			size: "icon",
			onClick: onBack,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeft, { className: "size-4" })
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
			className: "text-foreground text-xl font-bold",
			children: t("choose_a_theme")
		})]
	}), themes.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Card, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardContent, {
		className: "py-8 text-center",
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
			className: "text-muted-foreground",
			children: t("no_themes_available")
		})
	}) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		className: "grid grid-cols-2 gap-4 sm:grid-cols-3",
		children: themes.map((theme) => {
			const isSelected = theme.id === selectedThemeId;
			const imageUrl = theme.preview_url ?? theme.image_url;
			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
				type: "button",
				onClick: () => onSelectTheme(theme),
				className: require_src.cn("group focus:ring-primary relative overflow-hidden rounded-lg border-2 transition-all focus:ring-2 focus:ring-offset-2 focus:outline-none", isSelected ? "border-primary ring-primary ring-2" : "border-border hover:border-muted-foreground/50"),
				"aria-pressed": isSelected,
				disabled: isPending,
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "bg-muted relative aspect-[4/3] w-full",
					children: [
						imageUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
							src: imageUrl,
							alt: theme.name,
							loading: "lazy",
							className: "absolute inset-0 h-full w-full object-cover"
						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: "text-muted-foreground/50 flex h-full w-full items-center justify-center",
							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Palette, { className: "size-8" })
						}),
						isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: "bg-primary/20 absolute inset-0 flex items-center justify-center",
							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
								className: "bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-full",
								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "size-5" })
							})
						}),
						!isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "group-hover:bg-foreground/10 absolute inset-0 transition-colors" })
					]
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "bg-card p-2",
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
						className: require_src.cn("truncate text-sm font-medium", isSelected ? "text-primary" : "text-foreground"),
						children: theme.name
					})
				})]
			}, theme.id);
		})
	})] });
}
//#endregion
//#region ../../mysite/ui/src/shared/schemas/mysite.schema.ts
const linkSchema = zod.z.object({
	id: zod.z.number(),
	url: zod.z.string(),
	text: zod.z.string(),
	order: zod.z.number(),
	clicks: zod.z.number().optional().default(0)
});
zod.z.array(linkSchema);
const favoriteableSchema = zod.z.object({
	id: zod.z.number(),
	title: zod.z.string().nullable().optional(),
	name: zod.z.string().nullable().optional(),
	image_url: zod.z.string().nullable().optional(),
	type: zod.z.string().optional()
}).passthrough();
const favoriteSchema = zod.z.object({
	id: zod.z.number(),
	favoriteable_id: zod.z.number().optional(),
	favoriteable_type: zod.z.string(),
	order: zod.z.number(),
	user_company_id: zod.z.number().optional(),
	created_at: zod.z.string().optional(),
	favoriteable: favoriteableSchema.nullable()
}).passthrough();
zod.z.array(favoriteSchema);
zod.z.object({ id: zod.z.number() }).passthrough();
zod.z.object({
	id: zod.z.number(),
	bio: zod.z.string().nullable(),
	facebook: zod.z.string().nullable(),
	twitter: zod.z.string().nullable(),
	instagram: zod.z.string().nullable(),
	youtube: zod.z.string().nullable(),
	pinterest: zod.z.string().nullable(),
	tiktok: zod.z.string().nullable(),
	linkedin: zod.z.string().nullable(),
	whatsapp: zod.z.string().nullable(),
	wechat: zod.z.string().nullable(),
	image_url: zod.z.string().nullable()
});
//#endregion
//#region ../../mysite/ui/src/shared/schemas/mysite-theme.schema.ts
const themeSchema = zod.z.object({
	id: zod.z.number(),
	name: zod.z.string(),
	description: zod.z.string().nullable(),
	public: zod.z.boolean(),
	company_id: zod.z.number().nullable(),
	created_at: zod.z.string().datetime(),
	updated_at: zod.z.string().datetime(),
	image_url: zod.z.string().nullable(),
	application_theme_template_id: zod.z.number().nullable(),
	default: zod.z.boolean().nullable().optional()
});
zod.z.array(themeSchema);
const legacyThemeTemplateSchema = zod.z.object({
	id: zod.z.number(),
	name: zod.z.string(),
	content: zod.z.string().nullable(),
	stylesheet: zod.z.string().nullable(),
	head: zod.z.string().nullable(),
	status: zod.z.string()
});
zod.z.object({ data: zod.z.object({ legacy_theme: zod.z.object({
	id: zod.z.number(),
	name: zod.z.string(),
	description: zod.z.string().nullable(),
	image_url: zod.z.string().nullable(),
	public: zod.z.boolean(),
	company_id: zod.z.number().nullable(),
	template: legacyThemeTemplateSchema
}) }) });
//#endregion
//#region ../../mysite/ui/src/shared/utils.ts
/**
* Strip the server-injected `public_id` query param from a URL so the rep
* sees their clean original URL when editing or previewing. The BFF appends
* `public_id=<rep uuid>` to outbound MySite link URLs for attribution; that
* value should not be persisted back when the rep saves an edit, and it
* should not clutter list previews.
*/
function stripRepPublicIdFromUrl(url) {
	if (!url) return url;
	try {
		const parsed = new URL(url);
		if (!parsed.searchParams.has("public_id")) return url;
		parsed.searchParams.delete("public_id");
		return parsed.toString();
	} catch {
		return url;
	}
}
function normalizeUrl(value) {
	const trimmed = value.trim();
	if (!trimmed) return "";
	if (/^https?:\/\//i.test(trimmed)) return trimmed;
	return `https://${trimmed}`;
}
//#endregion
//#region ../../mysite/ui/src/portal/components/ButtonsEditor.tsx
var import_dist = require_dist$3.require_dist$1();
var import_dist$1 = require_dist$3.require_dist();
var import_dist$2 = require_dist$3.require_dist$2();
//#endregion
//#region ../../mysite/ui/src/portal/components/PortalButtonsEditor.tsx
function createButtonSchema(t) {
	return zod.z.object({
		title: zod.z.string().min(1, t("validation_button_text_required")),
		url: zod.z.string().transform(normalizeUrl).pipe(zod.z.string().url(t("validation_url_invalid")))
	});
}
function SortableButtonCard({ link, onEdit, onDelete }) {
	const { t } = useMysiteTranslation();
	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, import_dist$1.useSortable)({ id: link.id });
	const style = {
		transform: import_dist$2.CSS.Transform.toString(transform),
		transition
	};
	const displayUrl = stripRepPublicIdFromUrl(link.url);
	const truncatedUrl = displayUrl.length > 40 ? `${displayUrl.substring(0, 40)}...` : displayUrl;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		ref: setNodeRef,
		style,
		className: `border-border bg-card flex items-center gap-3 rounded-lg border p-3 sm:p-4 ${isDragging ? "opacity-50 shadow-lg" : ""}`,
		children: [
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
				type: "button",
				className: "text-muted-foreground hover:text-foreground cursor-grab touch-none",
				"aria-label": t("drag_to_reorder"),
				...attributes,
				...listeners,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.GripVertical, { className: "size-5" })
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "min-w-0 flex-1",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
					className: "text-foreground truncate font-medium",
					children: link.title
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
					className: "text-muted-foreground truncate text-sm",
					children: truncatedUrl
				})]
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "flex shrink-0 items-center gap-1",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
					variant: "ghost",
					size: "sm",
					className: "text-muted-foreground hover:text-foreground",
					onClick: () => onEdit(link),
					"aria-label": t("edit_button_aria"),
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "size-4" })
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
					variant: "ghost",
					size: "sm",
					className: "text-muted-foreground hover:text-destructive",
					onClick: () => onDelete(link),
					"aria-label": t("delete_button_aria"),
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "size-4" })
				})]
			})
		]
	});
}
/**
* Portal-specific buttons editor that uses MySiteApi context.
* No client/userId props needed — data comes from context.
*/
function PortalButtonsEditor({ onBack, onRefreshPreview, onToast }) {
	"use no memo";
	const { t } = useMysiteTranslation();
	const schema = (0, react.useMemo)(() => createButtonSchema(t), [t]);
	const { data: links = [], isLoading } = require_use_mysite_portal.usePortalLinks();
	const createLinkMutation = require_use_mysite_portal.usePortalCreateLink();
	const updateLinkMutation = require_use_mysite_portal.usePortalUpdateLink();
	const deleteLinkMutation = require_use_mysite_portal.usePortalDeleteLink();
	const reorderLinksMutation = require_use_mysite_portal.usePortalReorderLinks();
	const [isAddEditDialogOpen, setIsAddEditDialogOpen] = (0, react.useState)(false);
	const [editingLink, setEditingLink] = (0, react.useState)(null);
	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = (0, react.useState)(false);
	const [deletingLink, setDeletingLink] = (0, react.useState)(null);
	const { register, handleSubmit: handleButtonSubmit, reset: resetButtonForm, formState: { errors: buttonErrors, isSubmitting: isButtonSubmitting } } = require_src.useZodForm(schema, { defaultValues: {
		title: "",
		url: ""
	} });
	const sensors = (0, import_dist.useSensors)((0, import_dist.useSensor)(import_dist.PointerSensor), (0, import_dist.useSensor)(import_dist.KeyboardSensor, { coordinateGetter: import_dist$1.sortableKeyboardCoordinates }));
	const handleOpenAddDialog = (0, react.useCallback)(() => {
		setEditingLink(null);
		resetButtonForm({
			title: "",
			url: ""
		});
		setIsAddEditDialogOpen(true);
	}, [resetButtonForm]);
	const handleOpenEditDialog = (0, react.useCallback)((link) => {
		setEditingLink(link);
		resetButtonForm({
			title: link.title,
			url: stripRepPublicIdFromUrl(link.url)
		});
		setIsAddEditDialogOpen(true);
	}, [resetButtonForm]);
	const handleCloseAddEditDialog = (0, react.useCallback)(() => {
		setIsAddEditDialogOpen(false);
		setEditingLink(null);
		resetButtonForm({
			title: "",
			url: ""
		});
	}, [resetButtonForm]);
	const onButtonSubmit = (0, react.useCallback)((data) => {
		if (editingLink) updateLinkMutation.mutate({
			linkId: editingLink.id,
			body: {
				title: data.title,
				url: data.url
			}
		}, {
			onSuccess: () => {
				onToast?.(t("button_updated"), "success");
				handleCloseAddEditDialog();
				onRefreshPreview?.();
			},
			onError: () => {
				onToast?.(t("button_update_failed"), "error");
			}
		});
		else createLinkMutation.mutate({
			title: data.title,
			url: data.url
		}, {
			onSuccess: () => {
				onToast?.(t("button_created"), "success");
				handleCloseAddEditDialog();
				onRefreshPreview?.();
			},
			onError: () => {
				onToast?.(t("button_create_failed"), "error");
			}
		});
	}, [
		editingLink,
		createLinkMutation,
		updateLinkMutation,
		handleCloseAddEditDialog,
		onRefreshPreview,
		onToast,
		t
	]);
	const handleOpenDeleteDialog = (0, react.useCallback)((link) => {
		setDeletingLink(link);
		setIsDeleteDialogOpen(true);
	}, []);
	const handleCloseDeleteDialog = (0, react.useCallback)(() => {
		setIsDeleteDialogOpen(false);
		setDeletingLink(null);
	}, []);
	const handleConfirmDelete = (0, react.useCallback)(() => {
		if (deletingLink) deleteLinkMutation.mutate(deletingLink.id, {
			onSuccess: () => {
				onToast?.(t("button_deleted"), "success");
				handleCloseDeleteDialog();
				onRefreshPreview?.();
			},
			onError: () => {
				onToast?.(t("button_delete_failed"), "error");
			}
		});
	}, [
		deletingLink,
		deleteLinkMutation,
		handleCloseDeleteDialog,
		onRefreshPreview,
		onToast,
		t
	]);
	const handleDragEnd = (0, react.useCallback)((event) => {
		const { active, over } = event;
		if (over && active.id !== over.id) {
			const reordered = (0, import_dist$1.arrayMove)(links, links.findIndex((l) => l.id === active.id), links.findIndex((l) => l.id === over.id));
			const orderedIds = reordered.map((link) => link.id);
			reorderLinksMutation.mutate({
				orderedIds,
				optimisticItems: reordered
			}, {
				onSuccess: () => {
					onRefreshPreview?.();
				},
				onError: () => {
					onToast?.(t("reorder_buttons_failed"), "error");
				}
			});
		}
	}, [
		links,
		reorderLinksMutation,
		onRefreshPreview,
		onToast,
		t
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
			className: "flex items-center justify-between",
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "flex items-center gap-3",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
					variant: "ghost",
					size: "icon",
					onClick: onBack,
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeft, { className: "size-4" })
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
					className: "text-foreground text-xl font-bold",
					children: t("buttons_heading")
				})]
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
				size: "sm",
				onClick: handleOpenAddDialog,
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "mr-1 size-4" }), t("add_button")]
			})]
		}),
		isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			className: "space-y-2",
			children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "border-border bg-card flex items-center gap-3 rounded-lg border p-3 sm:p-4",
				children: [
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "size-5" }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						className: "min-w-0 flex-1 space-y-2",
						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3 w-48" })]
					}),
					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						className: "flex gap-1",
						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "size-8" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "size-8" })]
					})
				]
			}, i))
		}) : links.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, {
			className: "p-6 text-center sm:p-8",
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
				className: "text-muted-foreground mb-4",
				children: t("no_buttons_empty")
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
				size: "sm",
				onClick: handleOpenAddDialog,
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "mr-1 size-4" }), t("add_button")]
			})]
		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_dist.DndContext, {
			sensors,
			collisionDetection: import_dist.closestCenter,
			onDragEnd: handleDragEnd,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_dist$1.SortableContext, {
				items: links.map((l) => l.id),
				strategy: import_dist$1.verticalListSortingStrategy,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "space-y-2",
					children: links.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableButtonCard, {
						link,
						onEdit: handleOpenEditDialog,
						onDelete: handleOpenDeleteDialog
					}, link.id))
				})
			})
		}),
		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
			open: isAddEditDialogOpen,
			onOpenChange: setIsAddEditDialogOpen,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: editingLink ? t("edit_button_dialog") : t("add_button_dialog") }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
				onSubmit: handleButtonSubmit(onButtonSubmit),
				className: "space-y-4",
				children: [
					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						className: "space-y-2",
						children: [
							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
								htmlFor: "title",
								children: t("button_text_label")
							}),
							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
								id: "title",
								placeholder: t("button_text_placeholder"),
								...register("title"),
								className: buttonErrors.title ? "border-destructive" : ""
							}),
							buttonErrors.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
								className: "text-destructive text-sm",
								children: buttonErrors.title.message
							})
						]
					}),
					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						className: "space-y-2",
						children: [
							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
								htmlFor: "url",
								children: t("url_label")
							}),
							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
								id: "url",
								placeholder: t("url_placeholder"),
								...register("url"),
								className: buttonErrors.url ? "border-destructive" : ""
							}),
							buttonErrors.url && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
								className: "text-destructive text-sm",
								children: buttonErrors.url.message
							})
						]
					}),
					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogFooter, {
						className: "flex justify-between",
						children: [editingLink ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
							type: "button",
							variant: "destructive",
							onClick: () => {
								handleCloseAddEditDialog();
								handleOpenDeleteDialog(editingLink);
							},
							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "mr-1 size-4" }), t("delete")]
						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
							className: "flex gap-2",
							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
								type: "button",
								variant: "outline",
								onClick: handleCloseAddEditDialog,
								children: t("cancel")
							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
								type: "submit",
								disabled: isButtonSubmitting || createLinkMutation.isPending || updateLinkMutation.isPending,
								children: isButtonSubmitting || createLinkMutation.isPending || updateLinkMutation.isPending ? t("saving") : t("save")
							})]
						})]
					})
				]
			})] })
		}),
		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
			open: isDeleteDialogOpen,
			onOpenChange: setIsDeleteDialogOpen,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, { children: [
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: t("delete_button_dialog") }) }),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
					className: "text-muted-foreground",
					children: t("delete_button_confirm", { name: deletingLink?.title ?? "" })
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
					type: "button",
					variant: "outline",
					onClick: handleCloseDeleteDialog,
					children: t("cancel")
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
					type: "button",
					variant: "destructive",
					onClick: handleConfirmDelete,
					disabled: deleteLinkMutation.isPending,
					children: deleteLinkMutation.isPending ? t("deleting") : t("delete")
				})] })
			] })
		})
	] });
}
//#endregion
//#region ../../mysite/ui/src/portal/components/PortalFavoritesEditor.tsx
const TYPE_LABEL_KEYS = {
	Medium: "type_media",
	Library: "type_playlist",
	EnrollmentPack: "type_enrollment_pack",
	Page: "type_page"
};
function SortableFavoriteCard({ favorite, onDelete }) {
	const { t } = useMysiteTranslation();
	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, import_dist$1.useSortable)({ id: favorite.id });
	const style = {
		transform: import_dist$2.CSS.Transform.toString(transform),
		transition
	};
	const title = favorite.name ?? t("untitled");
	const imageUrl = favorite.image_url;
	const typeLabelKey = TYPE_LABEL_KEYS[favorite.favoriteable_type];
	const typeLabel = favorite.favoriteable_type !== "Product" ? typeLabelKey ? t(typeLabelKey) : favorite.favoriteable_type : null;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		ref: setNodeRef,
		style,
		className: `border-border bg-card flex items-center gap-3 rounded-lg border p-3 sm:p-4 ${isDragging ? "opacity-50 shadow-lg" : ""}`,
		children: [
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
				type: "button",
				className: "text-muted-foreground hover:text-foreground cursor-grab touch-none",
				"aria-label": t("drag_to_reorder"),
				...attributes,
				...listeners,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.GripVertical, { className: "size-5" })
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "bg-muted size-10 shrink-0 overflow-hidden rounded-md",
				children: imageUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
					src: imageUrl,
					alt: title,
					loading: "lazy",
					width: 40,
					height: 40,
					className: "h-full w-full object-cover"
				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "text-muted-foreground flex h-full w-full items-center justify-center text-xs",
					children: t("no_image")
				})
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "min-w-0 flex-1",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
					className: "text-foreground truncate font-medium",
					children: title
				}), typeLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
					className: "text-muted-foreground text-xs",
					children: typeLabel
				}) : null]
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "flex shrink-0 items-center gap-1",
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
					variant: "ghost",
					size: "sm",
					className: "text-muted-foreground hover:text-destructive",
					onClick: () => onDelete(favorite),
					"aria-label": t("remove_favorite_aria"),
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "size-4" })
				})
			})
		]
	});
}
/**
* Portal-specific favorites editor that uses MySiteApi context.
* No client/affiliateId props needed — data comes from context.
*/
function PortalFavoritesEditor({ onBack, onRefreshPreview, onToast }) {
	const { t } = useMysiteTranslation();
	const { data: favorites = [], isLoading } = require_use_mysite_portal.usePortalFavorites();
	const deleteFavoriteMutation = require_use_mysite_portal.usePortalDeleteFavorite();
	const reorderFavoritesMutation = require_use_mysite_portal.usePortalReorderFavorites();
	const [isDeleteFavoriteDialogOpen, setIsDeleteFavoriteDialogOpen] = (0, react.useState)(false);
	const [deletingFavorite, setDeletingFavorite] = (0, react.useState)(null);
	const sensors = (0, import_dist.useSensors)((0, import_dist.useSensor)(import_dist.PointerSensor), (0, import_dist.useSensor)(import_dist.KeyboardSensor, { coordinateGetter: import_dist$1.sortableKeyboardCoordinates }));
	const handleOpenDeleteFavoriteDialog = (0, react.useCallback)((favorite) => {
		setDeletingFavorite(favorite);
		setIsDeleteFavoriteDialogOpen(true);
	}, []);
	const handleCloseDeleteFavoriteDialog = (0, react.useCallback)(() => {
		setIsDeleteFavoriteDialogOpen(false);
		setDeletingFavorite(null);
	}, []);
	const handleConfirmDeleteFavorite = (0, react.useCallback)(() => {
		if (deletingFavorite) deleteFavoriteMutation.mutate(deletingFavorite.id, {
			onSuccess: () => {
				onToast?.(t("content_removed"), "success");
				handleCloseDeleteFavoriteDialog();
				onRefreshPreview?.();
			},
			onError: () => {
				onToast?.(t("content_remove_failed"), "error");
			}
		});
	}, [
		deletingFavorite,
		deleteFavoriteMutation,
		handleCloseDeleteFavoriteDialog,
		onRefreshPreview,
		onToast,
		t
	]);
	const handleFavoriteDragEnd = (0, react.useCallback)((event) => {
		const { active, over } = event;
		if (over && active.id !== over.id) {
			const reordered = (0, import_dist$1.arrayMove)(favorites, favorites.findIndex((f) => f.id === active.id), favorites.findIndex((f) => f.id === over.id));
			const orderedIds = reordered.map((fav) => fav.id);
			reorderFavoritesMutation.mutate({
				orderedIds,
				optimisticItems: reordered
			}, {
				onSuccess: () => {
					onRefreshPreview?.();
				},
				onError: () => {
					onToast?.(t("reorder_content_failed"), "error");
				}
			});
		}
	}, [
		favorites,
		reorderFavoritesMutation,
		onRefreshPreview,
		onToast,
		t
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
			className: "flex items-center gap-3",
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
				variant: "ghost",
				size: "icon",
				onClick: onBack,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeft, { className: "size-4" })
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
				className: "text-foreground text-xl font-bold",
				children: t("content_heading")
			})]
		}),
		isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			className: "space-y-2",
			children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "border-border bg-card flex items-center gap-3 rounded-lg border p-3 sm:p-4",
				children: [
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "size-5" }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "size-10 rounded-md" }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						className: "min-w-0 flex-1 space-y-2",
						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3 w-20" })]
					}),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "size-8" })
				]
			}, i))
		}) : favorites.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Card, {
			className: "p-6 text-center sm:p-8",
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
				className: "text-muted-foreground",
				children: t("no_content_empty")
			})
		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_dist.DndContext, {
			sensors,
			collisionDetection: import_dist.closestCenter,
			onDragEnd: handleFavoriteDragEnd,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_dist$1.SortableContext, {
				items: favorites.map((f) => f.id),
				strategy: import_dist$1.verticalListSortingStrategy,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "space-y-2",
					children: favorites.map((fav) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableFavoriteCard, {
						favorite: fav,
						onDelete: handleOpenDeleteFavoriteDialog
					}, fav.id))
				})
			})
		}),
		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
			open: isDeleteFavoriteDialogOpen,
			onOpenChange: setIsDeleteFavoriteDialogOpen,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, { children: [
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: t("remove_content_dialog") }) }),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
					className: "text-muted-foreground",
					children: t("remove_content_confirm", { name: deletingFavorite?.name ?? t("untitled") })
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
					type: "button",
					variant: "outline",
					onClick: handleCloseDeleteFavoriteDialog,
					children: t("cancel")
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
					type: "button",
					variant: "destructive",
					onClick: handleConfirmDeleteFavorite,
					disabled: deleteFavoriteMutation.isPending,
					children: deleteFavoriteMutation.isPending ? t("removing") : t("remove")
				})] })
			] })
		})
	] });
}
//#endregion
//#region src/screens/MySiteScreen/MySiteMainView.tsx
const navigationItems = [
	{
		labelKey: "nav_profile",
		slug: "profile",
		icon: lucide_react.User
	},
	{
		labelKey: "nav_theme",
		key: "theme",
		icon: lucide_react.Palette
	},
	{
		labelKey: "nav_content",
		key: "content",
		icon: lucide_react.LayoutGrid
	},
	{
		labelKey: "nav_buttons",
		key: "buttons",
		icon: lucide_react.Link2
	}
];
function defaultToast(message, type) {
	require_src.fluidToast({
		title: message,
		type
	});
}
function MySiteMainView({ editingSection, animPhase, showEditContent, onEditSection, onBackClick }) {
	const { t } = useMysiteTranslation();
	const { navigate } = require_AppNavigationContext.useAppNavigation();
	const { data: profile, isLoading: isProfileLoading } = require_use_mysite_portal.usePortalMySiteProfile();
	const { data: themes = [] } = require_use_mysite_portal.usePortalMySiteThemes();
	const updateSettingsMutation = require_use_mysite_portal.usePortalUpdateSettings();
	const [previewKey, setPreviewKey] = (0, react.useState)(0);
	const refreshPreview = (0, react.useCallback)(() => setPreviewKey((k) => k + 1), []);
	const [selectedThemeId, setSelectedThemeId] = (0, react.useState)(null);
	const resolvedThemeId = selectedThemeId ?? profile?.theme_id ?? themes.find((t) => t.name === "Default")?.id ?? themes[0]?.id ?? null;
	const themeName = themes.find((t) => t.id === resolvedThemeId)?.name ?? "Default";
	const mysiteUrl = profile?.mysite_url ?? "";
	const displayUrl = mysiteUrl ? mysiteUrl.replace(/^https?:\/\//, "") : "";
	const views = profile?.mysite_views ?? 0;
	const leads = profile?.mysite_leads ?? 0;
	const handleSelectTheme = (0, react.useCallback)((theme) => {
		if (theme.id === resolvedThemeId) return;
		const previousThemeId = selectedThemeId;
		setSelectedThemeId(theme.id);
		updateSettingsMutation.mutate({ theme_id: theme.id }, {
			onSuccess: () => {
				defaultToast(t("theme_changed", { name: theme.name }), "success");
				refreshPreview();
			},
			onError: () => {
				setSelectedThemeId(previousThemeId);
				defaultToast(t("theme_update_failed"), "error");
			}
		});
	}, [
		resolvedThemeId,
		selectedThemeId,
		updateSettingsMutation,
		refreshPreview,
		t
	]);
	const handleUpdateSlug = (0, react.useCallback)(async (slug) => {
		await new Promise((resolve, reject) => {
			updateSettingsMutation.mutate({ slug }, {
				onSuccess: () => resolve(),
				onError: () => reject(/* @__PURE__ */ new Error("Failed"))
			});
		});
	}, [updateSettingsMutation]);
	const handlePreview = (0, react.useCallback)(() => {
		if (mysiteUrl) window.open(`${mysiteUrl}?preview=true`, "_blank");
	}, [mysiteUrl]);
	const sectionLabel = (0, react.useMemo)(() => {
		if (editingSection === "theme") return t("nav_theme");
		if (editingSection === "buttons") return t("nav_buttons");
		if (editingSection === "content") return t("nav_content");
		return "";
	}, [editingSection, t]);
	if (isProfileLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		className: "flex h-full flex-col overflow-y-auto px-2 py-6 2xl:flex-row 2xl:overflow-hidden",
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			className: "w-full px-4 2xl:w-2/3 2xl:shrink-0",
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "flex flex-col gap-5",
				children: [
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-7 w-32 animate-pulse rounded-md" }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-20 w-full animate-pulse rounded-lg" }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-16 w-full animate-pulse rounded-lg" }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-40 w-full animate-pulse rounded-lg" })
				]
			})
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			className: "w-full shrink-0 overflow-y-hidden px-4 pt-5 2xl:h-full 2xl:w-1/3 2xl:overflow-y-auto 2xl:pt-0",
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "bg-muted flex h-full flex-col items-center gap-4 rounded-xl p-5",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "flex w-full items-center justify-between",
					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						className: "space-y-1",
						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-background/50 h-3 w-24 animate-pulse rounded" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-background/50 h-4 w-28 animate-pulse rounded" })]
					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-background/50 h-8 w-20 animate-pulse rounded-md" })]
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-background/50 h-[490px] w-[260px] animate-pulse rounded-[36px] sm:h-[600px] sm:w-[320px]" })]
			})
		})]
	});
	const contentAnimClassName = getContentClassName(animPhase);
	const previewAnimClassName = getPreviewClassName(animPhase);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		className: "flex h-full flex-col overflow-y-auto px-2 py-6 2xl:flex-row 2xl:overflow-hidden",
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			className: `w-full px-4 2xl:w-2/3 2xl:shrink-0 ${contentAnimClassName}`,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "flex min-w-0 flex-col gap-5 2xl:h-full 2xl:overflow-y-auto",
				children: showEditContent && editingSection === "theme" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySiteThemeEditor, {
					themes,
					selectedThemeId: resolvedThemeId,
					onSelectTheme: handleSelectTheme,
					isPending: updateSettingsMutation.isPending,
					onBack: onBackClick
				}) : showEditContent && editingSection === "buttons" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalButtonsEditor, {
					onBack: onBackClick,
					onRefreshPreview: refreshPreview,
					onToast: defaultToast
				}) : showEditContent && editingSection === "content" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalFavoritesEditor, {
					onBack: onBackClick,
					onRefreshPreview: refreshPreview,
					onToast: defaultToast
				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						className: "flex items-center gap-2",
						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
							className: "text-foreground text-xl font-bold",
							children: t("heading")
						}), animPhase !== "idle" && sectionLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "text-muted-foreground size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
							className: "text-foreground text-xl font-bold",
							children: sectionLabel
						})] })]
					}),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySiteVisitorDetailsCard, {
						views,
						leads
					}),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySiteLinkCard, {
						mysiteUrl,
						displayUrl,
						onUpdateSlug: handleUpdateSlug,
						onToast: defaultToast
					}),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
						className: "border-border bg-card divide-border divide-y overflow-hidden rounded-lg border",
						children: navigationItems.map((item) => {
							const Icon = item.icon;
							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
								type: "button",
								onClick: "slug" in item ? () => navigate(item.slug) : () => onEditSection(item.key),
								className: "group hover:bg-muted flex w-full items-center gap-2.5 px-3 py-2.5 transition-colors text-left cursor-pointer",
								children: [
									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
										className: "bg-muted text-foreground flex size-7 shrink-0 items-center justify-center rounded-full",
										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "size-3.5" })
									}),
									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
										className: "text-foreground flex-1 text-sm font-medium",
										children: t(item.labelKey)
									}),
									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "text-muted-foreground size-3 shrink-0 transition-transform group-hover:translate-x-0.5" })
								]
							}, item.labelKey);
						})
					})
				] })
			})
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			className: `w-full shrink-0 overflow-y-hidden px-4 pt-5 2xl:h-full 2xl:w-1/3 2xl:overflow-y-auto 2xl:pt-0 ${previewAnimClassName}`,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySitePhonePreview, {
				mysiteUrl,
				themeName,
				previewKey,
				isUpdating: updateSettingsMutation.isPending,
				onPreview: handlePreview
			})
		})]
	});
}
//#endregion
//#region src/screens/MySiteScreen/use-mysite-editing-section.ts
function useMySiteEditingSection() {
	const [animPhase, setAnimPhase] = (0, react.useState)("idle");
	const [editingSection, setEditingSection] = (0, react.useState)(null);
	const timeoutsRef = (0, react.useRef)([]);
	(0, react.useEffect)(() => {
		const ref = timeoutsRef;
		return () => ref.current.forEach(clearTimeout);
	}, []);
	const cancelScheduled = (0, react.useCallback)(() => {
		timeoutsRef.current.forEach(clearTimeout);
		timeoutsRef.current = [];
	}, []);
	const schedule = (0, react.useCallback)((phase, delay) => {
		const id = setTimeout(() => setAnimPhase(phase), delay);
		timeoutsRef.current.push(id);
	}, []);
	return {
		editingSection,
		animPhase,
		showEditContent: [
			"slide",
			"fade-in",
			"editing",
			"exit-fade-out",
			"exit-slide"
		].includes(animPhase),
		handleEditSection: (0, react.useCallback)((section) => {
			cancelScheduled();
			setEditingSection(section);
			setAnimPhase("fade-out");
			schedule("slide", 300);
			schedule("fade-in", 800);
			schedule("editing", 1100);
		}, [cancelScheduled, schedule]),
		handleBackClick: (0, react.useCallback)(() => {
			cancelScheduled();
			setAnimPhase("exit-fade-out");
			schedule("exit-slide", 300);
			schedule("exit-fade-in", 800);
			const id = setTimeout(() => {
				setAnimPhase("idle");
				setEditingSection(null);
			}, 1100);
			timeoutsRef.current.push(id);
		}, [cancelScheduled, schedule])
	};
}
//#endregion
//#region src/screens/MySiteScreen/index.tsx
function MySiteScreen({ background, textColor, accentColor, padding, borderRadius, ...divProps }) {
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MysiteTranslationBridge, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySiteScreenContent, { ...divProps }) });
}
function MySiteScreenContent(divProps) {
	const { t } = useMysiteTranslation();
	const { editingSection, animPhase, showEditContent, handleEditSection, handleBackClick } = useMySiteEditingSection();
	const sectionLabel = (0, react.useMemo)(() => {
		if (editingSection === "theme") return t("nav_theme");
		if (editingSection === "buttons") return t("nav_buttons");
		if (editingSection === "content") return t("nav_content");
		return null;
	}, [editingSection, t]);
	const handleRootCrumbClick = (0, react.useCallback)((e) => {
		e.preventDefault();
		if (editingSection !== null) handleBackClick();
	}, [editingSection, handleBackClick]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.BreadcrumbList, {
		className: "text-lg",
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: sectionLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbLink, {
			href: "#",
			onClick: handleRootCrumbClick,
			children: "MySite"
		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
			className: "font-semibold",
			children: "MySite"
		}) }), sectionLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
			className: "font-semibold",
			children: sectionLabel
		}) })] })]
	}) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		...divProps,
		className: `h-full ${divProps.className ?? ""}`,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySiteMainView, {
			editingSection,
			animPhase,
			showEditContent,
			onEditSection: handleEditSection,
			onBackClick: handleBackClick
		})
	})] });
}
const mySiteScreenPropertySchema = {
	widgetType: "MySiteScreen",
	displayName: "MySite Screen",
	tabsConfig: [{
		id: "styling",
		label: "Styling"
	}],
	fields: []
};
//#endregion
Object.defineProperty(exports, "MySiteScreen", {
	enumerable: true,
	get: function() {
		return MySiteScreen;
	}
});
Object.defineProperty(exports, "mySiteScreenPropertySchema", {
	enumerable: true,
	get: function() {
		return mySiteScreenPropertySchema;
	}
});

//# sourceMappingURL=MySiteScreen-CBoEOrO5.cjs.map