@fluid-app/portal-sdk 0.1.172 → 0.1.173

package/dist/{MySiteScreen-CaBd2GGy.cjs → MySiteScreen-BM3EuPZ4.cjs}

@@ -1,7 +1,6 @@
 const require_chunk = require("./chunk-9hOWP6kD.cjs");
 const require_src = require("./src-B0AAcRhB.cjs");
 const require_ScreenHeaderContext = require("./ScreenHeaderContext-DA8cEfP-.cjs");
-const require_AppNavigationContext = require("./AppNavigationContext-N5oUbgNL.cjs");
 const require_dist$3 = require("./dist-Mf7Sx86H.cjs");
 const require_use_mysite_portal = require("./use-mysite-portal-BkEi6LG-.cjs");
 let react = require("react");
@@ -11,72 +10,28 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 let zod = require("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
@@ -264,7 +219,7 @@ function MySitePhonePreview({ mysiteUrl, themeName, previewKey, isUpdating, onPr
 				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 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,
@@ -1158,43 +1113,36 @@ function MySiteProfileForm({ onBack, onToast, onUploadPhoto, avatarUrl, userName
 					})]
 				})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, {
-				className: "p-4 sm:p-6",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-					className: "text-foreground mb-4 text-base font-semibold sm:text-lg",
-					children: "Display Name"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
-						htmlFor: "profile-display-name",
-						children: "Name shown on your MySite"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
-						id: "profile-display-name",
-						type: "text",
-						value: formState.display_name,
-						onChange: (e) => handleFieldChange("display_name", e.target.value),
-						placeholder: "Your display name"
-					})]
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, {
-				className: "p-4 sm:p-6",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-					className: "text-foreground mb-4 text-base font-semibold sm:text-lg",
-					children: "Bio"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
-						htmlFor: "profile-bio",
-						children: "About you"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Textarea, {
-						id: "profile-bio",
-						rows: 4,
-						value: formState.bio,
-						onChange: (e) => handleFieldChange("bio", e.target.value),
-						placeholder: "Tell people a little about yourself..."
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Card, {
+				className: "h-auto gap-0 py-0 shadow-none",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardContent, {
+					className: "space-y-4 p-4 sm:p-6",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
+							htmlFor: "profile-display-name",
+							children: "Display Name"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
+							id: "profile-display-name",
+							type: "text",
+							value: formState.display_name,
+							onChange: (e) => handleFieldChange("display_name", e.target.value),
+							placeholder: "Your display name"
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
+							htmlFor: "profile-bio",
+							children: "Bio"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Textarea, {
+							id: "profile-bio",
+							rows: 4,
+							value: formState.bio,
+							onChange: (e) => handleFieldChange("bio", e.target.value),
+							placeholder: "Tell people a little about yourself..."
+						})]
 					})]
-				})]
+				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex justify-end",
@@ -1213,7 +1161,7 @@ function MySiteProfileForm({ onBack, onToast, onUploadPhoto, avatarUrl, userName
 const navigationItems = [
 	{
 		label: "Profile",
-		slug: "my-site/profile",
+		key: "profile",
 		icon: lucide_react.User
 	},
 	{
@@ -1232,34 +1180,11 @@ const navigationItems = [
 		icon: lucide_react.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 } = require_AppNavigationContext.useAppNavigation();
-	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);
-	}, []);
-	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 } = require_use_mysite_portal.usePortalMySiteProfile();
 	const { data: themes = [] } = require_use_mysite_portal.usePortalMySiteThemes();
 	const updateSettingsMutation = require_use_mysite_portal.usePortalUpdateSettings();
@@ -1278,12 +1203,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");
 			}
 		});
 	}, [
@@ -1300,25 +1225,6 @@ function MySiteMainView() {
 			});
 		});
 	}, [updateSettingsMutation]);
-	const handleEditSection = (0, react.useCallback)((section) => {
-		cancelScheduled();
-		setEditingSection(section);
-		setAnimPhase("fade-out");
-		schedule("slide", 300);
-		schedule("fade-in", 800);
-		schedule("editing", 1100);
-	}, [cancelScheduled, schedule]);
-	const 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]);
 	const handlePreview = (0, react.useCallback)(() => {
 		if (mysiteUrl) window.open(`${mysiteUrl}?preview=true`, "_blank");
 	}, [mysiteUrl]);
@@ -1326,6 +1232,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__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1355,13 +1262,12 @@ function MySiteMainView() {
 			})
 		})]
 	});
-	const contentStyle = getContentStyle(animPhase);
-	const previewStyle = getPreviewStyle(animPhase);
+	const contentAnimClassName = getContentClassName(animPhase);
+	const previewAnimClassName = getPreviewClassName(animPhase);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex h-full overflow-hidden px-2 py-6",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex h-full min-w-0 flex-col gap-5 overflow-y-auto",
 				children: showEditContent && editingSection === "theme" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySiteThemeEditor, {
@@ -1369,15 +1275,18 @@ function MySiteMainView() {
 					selectedThemeId: resolvedThemeId,
 					onSelectTheme: handleSelectTheme,
 					isPending: updateSettingsMutation.isPending,
-					onBack: handleBackClick
+					onBack: onBackClick
 				}) : showEditContent && editingSection === "buttons" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalButtonsEditor, {
-					onBack: handleBackClick,
+					onBack: onBackClick,
 					onRefreshPreview: refreshPreview,
-					onToast: defaultToast$1
+					onToast: defaultToast
 				}) : showEditContent && editingSection === "content" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalFavoritesEditor, {
-					onBack: handleBackClick,
+					onBack: onBackClick,
 					onRefreshPreview: refreshPreview,
-					onToast: defaultToast$1
+					onToast: defaultToast
+				}) : showEditContent && editingSection === "profile" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySiteProfileForm, {
+					onBack: onBackClick,
+					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",
@@ -1397,7 +1306,7 @@ function MySiteMainView() {
 						mysiteUrl,
 						displayUrl,
 						onUpdateSlug: handleUpdateSlug,
-						onToast: defaultToast$1
+						onToast: defaultToast
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "border-border bg-card divide-border divide-y overflow-hidden rounded-lg border",
@@ -1405,10 +1314,7 @@ function MySiteMainView() {
 							const Icon = item.icon;
 							return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1427,8 +1333,7 @@ function MySiteMainView() {
 				] })
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(MySitePhonePreview, {
 				mysiteUrl,
 				themeName,
@@ -1440,44 +1345,93 @@ 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 } = require_AppNavigationContext.useAppNavigation();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySiteProfileForm, {
-		onBack: () => navigate("my-site"),
-		onToast: defaultToast
-	});
+//#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 }) {
-	const { currentSlug, navigate } = require_AppNavigationContext.useAppNavigation();
-	const isProfileView = (currentSlug.split("/")[1] ?? null) === "profile";
+	const { editingSection, animPhase, showEditContent, handleEditSection, handleBackClick } = useMySiteEditingSection();
+	const sectionLabel = (0, react.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 = (0, react.useCallback)((e) => {
+		e.preventDefault();
+		if (editingSection !== null) handleBackClick();
+	}, [editingSection, handleBackClick]);
 	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__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: isProfileView ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbLink, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: sectionLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbLink, {
 			href: "#",
-			onClick: (e) => {
-				e.preventDefault();
-				navigate("my-site");
-			},
+			onClick: handleRootCrumbClick,
 			children: "My Site"
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
 			className: "font-semibold",
 			children: "My Site"
-		}) }), isProfileView && /* @__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, {
+		}) }), 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: "Profile"
+			children: sectionLabel
 		}) })] })]
-	}) }), [isProfileView, navigate]));
+	}) }), [sectionLabel, handleRootCrumbClick]));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...divProps,
 		className: `h-full ${divProps.className ?? ""}`,
-		children: isProfileView ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySiteProfileView, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySiteMainView, {})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MySiteMainView, {
+			editingSection,
+			animPhase,
+			showEditContent,
+			onEditSection: handleEditSection,
+			onBackClick: handleBackClick
+		})
 	});
 }
 const mySiteScreenPropertySchema = {
@@ -1503,4 +1457,4 @@ Object.defineProperty(exports, "mySiteScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=MySiteScreen-CaBd2GGy.cjs.map
+//# sourceMappingURL=MySiteScreen-BM3EuPZ4.cjs.map