@fluid-app/portal-sdk 0.1.172 → 0.1.173

package/dist/{MySiteScreen-Y4dsjqFj.mjs → MySiteScreen-ZLvvJhoy.mjs}

@@ -1,7 +1,6 @@
 import { r as __exportAll } from "./es-CtZEZp97.mjs";
 import { Ct as CardContent, E as Separator, Et as CardTitle, Jt as BreadcrumbLink, Kt as Breadcrumb, P as Input, St as CardAction, Tt as CardHeader, U as Label, Xt as BreadcrumbPage, Yt as BreadcrumbList, Zt as BreadcrumbSeparator, _n as useZodForm, at as DialogFooter, b as Skeleton, lt as DialogTitle, ot as DialogHeader, qt as BreadcrumbItem, rt as DialogContent, s as Textarea, tt as Dialog, un as Button, vn as cn, xt as Card } from "./src-BYkS71q3.mjs";
 import { r as useScreenHeaderBreadcrumbs } from "./ScreenHeaderContext-DhC-5Y4x.mjs";
-import { n as useAppNavigation } from "./AppNavigationContext-qFKCN8FO.mjs";
 import { a as verticalListSortingStrategy, c as PointerSensor, d as useSensors, f as CSS, i as useSortable, l as closestCenter, n as arrayMove, o as DndContext, r as sortableKeyboardCoordinates, s as KeyboardSensor, t as SortableContext, u as useSensor } from "./sortable.esm-CzzU6kIR.mjs";
 import { a as usePortalFavorites, c as usePortalMySiteThemes, d as usePortalUpdateLink, f as usePortalUpdateProfile, i as usePortalDeleteLink, l as usePortalReorderFavorites, n as usePortalCreateLink, o as usePortalLinks, p as usePortalUpdateSettings, r as usePortalDeleteFavorite, s as usePortalMySiteProfile, u as usePortalReorderLinks } from "./use-mysite-portal-CtU6iAbx.mjs";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -10,72 +9,28 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeft, Camera, Check, ChevronRight, Copy, Eye, GripVertical, LayoutGrid, Link2, LoaderCircle, Palette, Pencil, Plus, Trash2, User, Users } from "lucide-react";
 import { z } from "zod";
 //#region ../../mysite/ui/src/portal/components/animation-utils.ts
-function getContentStyle(phase) {
+function getContentClassName(phase) {
 	switch (phase) {
-		case "idle": return {
-			transform: "translateX(0)",
-			opacity: 1,
-			transition: "none"
-		};
-		case "fade-out": return {
-			transform: "translateX(0)",
-			opacity: 0,
-			transition: `opacity 300ms ease-in-out`
-		};
-		case "slide": return {
-			transform: "translateX(50%)",
-			opacity: 0,
-			transition: `transform 500ms ease-in-out`
-		};
-		case "fade-in": return {
-			transform: "translateX(50%)",
-			opacity: 1,
-			transition: `opacity 300ms ease-in-out`
-		};
-		case "editing": return {
-			transform: "translateX(50%)",
-			opacity: 1,
-			transition: "none"
-		};
-		case "exit-fade-out": return {
-			transform: "translateX(50%)",
-			opacity: 0,
-			transition: `opacity 300ms ease-in-out`
-		};
-		case "exit-slide": return {
-			transform: "translateX(0)",
-			opacity: 0,
-			transition: `transform 500ms ease-in-out`
-		};
-		case "exit-fade-in": return {
-			transform: "translateX(0)",
-			opacity: 1,
-			transition: `opacity 300ms ease-in-out`
-		};
+		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 getPreviewStyle(phase) {
+function getPreviewClassName(phase) {
 	switch (phase) {
 		case "idle":
 		case "fade-out":
-		case "exit-fade-in": return {
-			transform: "translateX(0)",
-			transition: "none"
-		};
-		case "slide": return {
-			transform: "translateX(-200%)",
-			transition: `transform 500ms ease-in-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 {
-			transform: "translateX(-200%)",
-			transition: "none"
-		};
-		case "exit-slide": return {
-			transform: "translateX(0)",
-			transition: `transform 500ms ease-in-out`
-		};
+		case "exit-fade-out": return "2xl:-translate-x-[200%] transition-none";
+		case "exit-slide": return "transition-transform duration-500 ease-in-out";
 	}
 }
 //#endregion
@@ -263,7 +218,7 @@ function MySitePhonePreview({ mysiteUrl, themeName, previewKey, isUpdating, onPr
 				className: "text-foreground text-sm font-semibold",
 				children: themeName
 			})] }), /* @__PURE__ */ jsx(Button, {
-				className: "col-start-2 row-span-2 row-start-1 self-center justify-self-end",
+				className: "col-start-2 row-span-2 row-start-1 cursor-pointer self-center justify-self-end",
 				variant: "secondary",
 				size: "sm",
 				onClick: onPreview,
@@ -1152,43 +1107,36 @@ function MySiteProfileForm({ onBack, onToast, onUploadPhoto, avatarUrl, userName
 					})]
 				})]
 			}),
-			/* @__PURE__ */ jsxs(Card, {
-				className: "p-4 sm:p-6",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-foreground mb-4 text-base font-semibold sm:text-lg",
-					children: "Display Name"
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: "profile-display-name",
-						children: "Name shown on your MySite"
-					}), /* @__PURE__ */ jsx(Input, {
-						id: "profile-display-name",
-						type: "text",
-						value: formState.display_name,
-						onChange: (e) => handleFieldChange("display_name", e.target.value),
-						placeholder: "Your display name"
-					})]
-				})]
-			}),
-			/* @__PURE__ */ jsxs(Card, {
-				className: "p-4 sm:p-6",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-foreground mb-4 text-base font-semibold sm:text-lg",
-					children: "Bio"
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: "profile-bio",
-						children: "About you"
-					}), /* @__PURE__ */ jsx(Textarea, {
-						id: "profile-bio",
-						rows: 4,
-						value: formState.bio,
-						onChange: (e) => handleFieldChange("bio", e.target.value),
-						placeholder: "Tell people a little about yourself..."
+			/* @__PURE__ */ jsx(Card, {
+				className: "h-auto gap-0 py-0 shadow-none",
+				children: /* @__PURE__ */ jsxs(CardContent, {
+					className: "space-y-4 p-4 sm:p-6",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: "profile-display-name",
+							children: "Display Name"
+						}), /* @__PURE__ */ jsx(Input, {
+							id: "profile-display-name",
+							type: "text",
+							value: formState.display_name,
+							onChange: (e) => handleFieldChange("display_name", e.target.value),
+							placeholder: "Your display name"
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: "profile-bio",
+							children: "Bio"
+						}), /* @__PURE__ */ jsx(Textarea, {
+							id: "profile-bio",
+							rows: 4,
+							value: formState.bio,
+							onChange: (e) => handleFieldChange("bio", e.target.value),
+							placeholder: "Tell people a little about yourself..."
+						})]
 					})]
-				})]
+				})
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex justify-end",
@@ -1207,7 +1155,7 @@ function MySiteProfileForm({ onBack, onToast, onUploadPhoto, avatarUrl, userName
 const navigationItems = [
 	{
 		label: "Profile",
-		slug: "my-site/profile",
+		key: "profile",
 		icon: User
 	},
 	{
@@ -1226,34 +1174,11 @@ const navigationItems = [
 		icon: Link2
 	}
 ];
-function defaultToast$1(message, type) {
+function defaultToast(message, type) {
 	if (type === "error") console.warn("[MySite]", message);
 	else console.info("[MySite]", message);
 }
-function MySiteMainView() {
-	const { navigate } = useAppNavigation();
-	const [animPhase, setAnimPhase] = useState("idle");
-	const [editingSection, setEditingSection] = useState(null);
-	const timeoutsRef = useRef([]);
-	useEffect(() => {
-		const ref = timeoutsRef;
-		return () => ref.current.forEach(clearTimeout);
-	}, []);
-	const cancelScheduled = useCallback(() => {
-		timeoutsRef.current.forEach(clearTimeout);
-		timeoutsRef.current = [];
-	}, []);
-	const schedule = useCallback((phase, delay) => {
-		const id = setTimeout(() => setAnimPhase(phase), delay);
-		timeoutsRef.current.push(id);
-	}, []);
-	const showEditContent = [
-		"slide",
-		"fade-in",
-		"editing",
-		"exit-fade-out",
-		"exit-slide"
-	].includes(animPhase);
+function MySiteMainView({ editingSection, animPhase, showEditContent, onEditSection, onBackClick }) {
 	const { data: profile, isLoading: isProfileLoading } = usePortalMySiteProfile();
 	const { data: themes = [] } = usePortalMySiteThemes();
 	const updateSettingsMutation = usePortalUpdateSettings();
@@ -1272,12 +1197,12 @@ function MySiteMainView() {
 		setSelectedThemeId(theme.id);
 		updateSettingsMutation.mutate({ theme_id: theme.id }, {
 			onSuccess: () => {
-				defaultToast$1(`Theme changed to "${theme.name}"`, "success");
+				defaultToast(`Theme changed to "${theme.name}"`, "success");
 				refreshPreview();
 			},
 			onError: () => {
 				setSelectedThemeId(previousThemeId);
-				defaultToast$1("Failed to update theme", "error");
+				defaultToast("Failed to update theme", "error");
 			}
 		});
 	}, [
@@ -1294,25 +1219,6 @@ function MySiteMainView() {
 			});
 		});
 	}, [updateSettingsMutation]);
-	const handleEditSection = useCallback((section) => {
-		cancelScheduled();
-		setEditingSection(section);
-		setAnimPhase("fade-out");
-		schedule("slide", 300);
-		schedule("fade-in", 800);
-		schedule("editing", 1100);
-	}, [cancelScheduled, schedule]);
-	const handleBackClick = 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]);
 	const handlePreview = useCallback(() => {
 		if (mysiteUrl) window.open(`${mysiteUrl}?preview=true`, "_blank");
 	}, [mysiteUrl]);
@@ -1320,6 +1226,7 @@ function MySiteMainView() {
 		if (editingSection === "theme") return "Theme";
 		if (editingSection === "buttons") return "Buttons";
 		if (editingSection === "content") return "MySite Content";
+		if (editingSection === "profile") return "Profile";
 		return "";
 	}, [editingSection]);
 	if (isProfileLoading) return /* @__PURE__ */ jsxs("div", {
@@ -1349,13 +1256,12 @@ function MySiteMainView() {
 			})
 		})]
 	});
-	const contentStyle = getContentStyle(animPhase);
-	const previewStyle = getPreviewStyle(animPhase);
+	const contentAnimClassName = getContentClassName(animPhase);
+	const previewAnimClassName = getPreviewClassName(animPhase);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full overflow-hidden px-2 py-6",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "w-full px-4 2xl:w-2/3 2xl:shrink-0",
-			style: contentStyle,
+			className: `w-full px-4 2xl:w-2/3 2xl:shrink-0 ${contentAnimClassName}`,
 			children: /* @__PURE__ */ jsx("div", {
 				className: "flex h-full min-w-0 flex-col gap-5 overflow-y-auto",
 				children: showEditContent && editingSection === "theme" ? /* @__PURE__ */ jsx(MySiteThemeEditor, {
@@ -1363,15 +1269,18 @@ function MySiteMainView() {
 					selectedThemeId: resolvedThemeId,
 					onSelectTheme: handleSelectTheme,
 					isPending: updateSettingsMutation.isPending,
-					onBack: handleBackClick
+					onBack: onBackClick
 				}) : showEditContent && editingSection === "buttons" ? /* @__PURE__ */ jsx(PortalButtonsEditor, {
-					onBack: handleBackClick,
+					onBack: onBackClick,
 					onRefreshPreview: refreshPreview,
-					onToast: defaultToast$1
+					onToast: defaultToast
 				}) : showEditContent && editingSection === "content" ? /* @__PURE__ */ jsx(PortalFavoritesEditor, {
-					onBack: handleBackClick,
+					onBack: onBackClick,
 					onRefreshPreview: refreshPreview,
-					onToast: defaultToast$1
+					onToast: defaultToast
+				}) : showEditContent && editingSection === "profile" ? /* @__PURE__ */ jsx(MySiteProfileForm, {
+					onBack: onBackClick,
+					onToast: defaultToast
 				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-2",
@@ -1391,7 +1300,7 @@ function MySiteMainView() {
 						mysiteUrl,
 						displayUrl,
 						onUpdateSlug: handleUpdateSlug,
-						onToast: defaultToast$1
+						onToast: defaultToast
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "border-border bg-card divide-border divide-y overflow-hidden rounded-lg border",
@@ -1399,10 +1308,7 @@ function MySiteMainView() {
 							const Icon = item.icon;
 							return /* @__PURE__ */ jsxs("button", {
 								type: "button",
-								onClick: () => {
-									if ("key" in item) handleEditSection(item.key);
-									else navigate(item.slug);
-								},
+								onClick: () => 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__ */ jsx("div", {
@@ -1421,8 +1327,7 @@ function MySiteMainView() {
 				] })
 			})
 		}), /* @__PURE__ */ jsx("div", {
-			className: "hidden w-1/3 shrink-0 overflow-y-hidden px-4 2xl:block",
-			style: previewStyle,
+			className: `hidden w-1/3 shrink-0 overflow-y-hidden px-4 2xl:block ${previewAnimClassName}`,
 			children: /* @__PURE__ */ jsx(MySitePhonePreview, {
 				mysiteUrl,
 				themeName,
@@ -1434,17 +1339,53 @@ function MySiteMainView() {
 	});
 }
 //#endregion
-//#region src/screens/MySiteScreen/MySiteProfileView.tsx
-function defaultToast(message, type) {
-	if (type === "error") console.warn("[MySite]", message);
-	else console.info("[MySite]", message);
-}
-function MySiteProfileView() {
-	const { navigate } = useAppNavigation();
-	return /* @__PURE__ */ jsx(MySiteProfileForm, {
-		onBack: () => navigate("my-site"),
-		onToast: defaultToast
-	});
+//#region src/screens/MySiteScreen/use-mysite-editing-section.ts
+function useMySiteEditingSection() {
+	const [animPhase, setAnimPhase] = useState("idle");
+	const [editingSection, setEditingSection] = useState(null);
+	const timeoutsRef = useRef([]);
+	useEffect(() => {
+		const ref = timeoutsRef;
+		return () => ref.current.forEach(clearTimeout);
+	}, []);
+	const cancelScheduled = useCallback(() => {
+		timeoutsRef.current.forEach(clearTimeout);
+		timeoutsRef.current = [];
+	}, []);
+	const schedule = 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: useCallback((section) => {
+			cancelScheduled();
+			setEditingSection(section);
+			setAnimPhase("fade-out");
+			schedule("slide", 300);
+			schedule("fade-in", 800);
+			schedule("editing", 1100);
+		}, [cancelScheduled, schedule]),
+		handleBackClick: 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
@@ -1453,29 +1394,42 @@ var MySiteScreen_exports = /* @__PURE__ */ __exportAll({
 	mySiteScreenPropertySchema: () => mySiteScreenPropertySchema
 });
 function MySiteScreen({ background, textColor, accentColor, padding, borderRadius, ...divProps }) {
-	const { currentSlug, navigate } = useAppNavigation();
-	const isProfileView = (currentSlug.split("/")[1] ?? null) === "profile";
+	const { editingSection, animPhase, showEditContent, handleEditSection, handleBackClick } = useMySiteEditingSection();
+	const sectionLabel = useMemo(() => {
+		if (editingSection === "theme") return "Theme";
+		if (editingSection === "buttons") return "Buttons";
+		if (editingSection === "content") return "MySite Content";
+		if (editingSection === "profile") return "Profile";
+		return null;
+	}, [editingSection]);
+	const handleRootCrumbClick = useCallback((e) => {
+		e.preventDefault();
+		if (editingSection !== null) handleBackClick();
+	}, [editingSection, handleBackClick]);
 	useScreenHeaderBreadcrumbs(useMemo(() => /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, {
 		className: "text-lg",
-		children: [/* @__PURE__ */ jsx(BreadcrumbItem, { children: isProfileView ? /* @__PURE__ */ jsx(BreadcrumbLink, {
+		children: [/* @__PURE__ */ jsx(BreadcrumbItem, { children: sectionLabel ? /* @__PURE__ */ jsx(BreadcrumbLink, {
 			href: "#",
-			onClick: (e) => {
-				e.preventDefault();
-				navigate("my-site");
-			},
+			onClick: handleRootCrumbClick,
 			children: "My Site"
 		}) : /* @__PURE__ */ jsx(BreadcrumbPage, {
 			className: "font-semibold",
 			children: "My Site"
-		}) }), isProfileView && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BreadcrumbSeparator, {}), /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, {
+		}) }), sectionLabel && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BreadcrumbSeparator, {}), /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, {
 			className: "font-semibold",
-			children: "Profile"
+			children: sectionLabel
 		}) })] })]
-	}) }), [isProfileView, navigate]));
+	}) }), [sectionLabel, handleRootCrumbClick]));
 	return /* @__PURE__ */ jsx("div", {
 		...divProps,
 		className: `h-full ${divProps.className ?? ""}`,
-		children: isProfileView ? /* @__PURE__ */ jsx(MySiteProfileView, {}) : /* @__PURE__ */ jsx(MySiteMainView, {})
+		children: /* @__PURE__ */ jsx(MySiteMainView, {
+			editingSection,
+			animPhase,
+			showEditContent,
+			onEditSection: handleEditSection,
+			onBackClick: handleBackClick
+		})
 	});
 }
 const mySiteScreenPropertySchema = {
@@ -1490,4 +1444,4 @@ const mySiteScreenPropertySchema = {
 //#endregion
 export { MySiteScreen_exports as n, mySiteScreenPropertySchema as r, MySiteScreen as t };
 
-//# sourceMappingURL=MySiteScreen-Y4dsjqFj.mjs.map
+//# sourceMappingURL=MySiteScreen-ZLvvJhoy.mjs.map