@fluid-app/portal-sdk 0.1.243 → 0.1.245

package/dist/{MySiteScreen-B_16cPgD.cjs → MySiteScreen-Bdd7a6Hy.cjs}

@@ -2,7 +2,8 @@ require("./chunk-9hOWP6kD.cjs");
 require("./mysite-api-context-Dz4lI5Xd.cjs");
 require("./src-uhf6Szlw.cjs");
 require("./ScreenHeaderContext-oIu5Bvhs.cjs");
-require("./dist-BQZkLGL6.cjs");
-const require_MySiteScreen = require("./MySiteScreen-CUyJteDm.cjs");
+require("./dist-DJAHGHHi.cjs");
+require("./components-BKADyCYp.cjs");
+const require_MySiteScreen = require("./MySiteScreen-zfajm9da.cjs");
 exports.MySiteScreen = require_MySiteScreen.MySiteScreen;
 exports.mySiteScreenPropertySchema = require_MySiteScreen.mySiteScreenPropertySchema;

package/dist/MySiteScreen-CK84vXa9.mjs

@@ -0,0 +1,301 @@
+import { r as __exportAll } from "./es-BXxGlAp6.mjs";
+import { b as fluidToast, dn as BreadcrumbLink, fn as BreadcrumbList, ln as Breadcrumb, mn as BreadcrumbSeparator, pn as BreadcrumbPage, un as BreadcrumbItem } from "./src-pgBBOcJa.mjs";
+import { r as useScreenHeaderBreadcrumbs } from "./ScreenHeaderContext-Cemdo7bM.mjs";
+import { n as useAppNavigation } from "./AppNavigationContext-DNod9mf6.mjs";
+import { b as usePortalMySiteThemes, w as usePortalUpdateSettings, y as usePortalMySiteProfile } from "./sortable.esm-C8riJ_zv.mjs";
+import { a as MySiteLinkCard, c as getPreviewClassName, i as MySitePhonePreview, n as PortalButtonsEditor, o as MySiteVisitorDetailsCard, r as MySiteThemeEditor, s as getContentClassName, t as PortalFavoritesEditor } from "./components-CjgEvBYG.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, LayoutGrid, Link2, Palette, User } from "lucide-react";
+//#region src/screens/MySiteScreen/MySiteMainView.tsx
+const navigationItems = [
+	{
+		label: "Profile",
+		slug: "profile",
+		icon: User
+	},
+	{
+		label: "Theme",
+		key: "theme",
+		icon: Palette
+	},
+	{
+		label: "MySite Content",
+		key: "content",
+		icon: LayoutGrid
+	},
+	{
+		label: "Buttons",
+		key: "buttons",
+		icon: Link2
+	}
+];
+function defaultToast(message, type) {
+	fluidToast({
+		title: message,
+		type
+	});
+}
+function MySiteMainView({ editingSection, animPhase, showEditContent, onEditSection, onBackClick }) {
+	const { navigate } = useAppNavigation();
+	const { data: profile, isLoading: isProfileLoading } = usePortalMySiteProfile();
+	const { data: themes = [] } = usePortalMySiteThemes();
+	const updateSettingsMutation = usePortalUpdateSettings();
+	const [previewKey, setPreviewKey] = useState(0);
+	const refreshPreview = useCallback(() => setPreviewKey((k) => k + 1), []);
+	const [selectedThemeId, setSelectedThemeId] = 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 = useCallback((theme) => {
+		if (theme.id === resolvedThemeId) return;
+		const previousThemeId = selectedThemeId;
+		setSelectedThemeId(theme.id);
+		updateSettingsMutation.mutate({ theme_id: theme.id }, {
+			onSuccess: () => {
+				defaultToast(`Theme changed to "${theme.name}"`, "success");
+				refreshPreview();
+			},
+			onError: () => {
+				setSelectedThemeId(previousThemeId);
+				defaultToast("Failed to update theme", "error");
+			}
+		});
+	}, [
+		resolvedThemeId,
+		selectedThemeId,
+		updateSettingsMutation,
+		refreshPreview
+	]);
+	const handleUpdateSlug = useCallback(async (slug) => {
+		await new Promise((resolve, reject) => {
+			updateSettingsMutation.mutate({ slug }, {
+				onSuccess: () => resolve(),
+				onError: () => reject(/* @__PURE__ */ new Error("Failed"))
+			});
+		});
+	}, [updateSettingsMutation]);
+	const handlePreview = useCallback(() => {
+		if (mysiteUrl) window.open(`${mysiteUrl}?preview=true`, "_blank");
+	}, [mysiteUrl]);
+	const sectionLabel = useMemo(() => {
+		if (editingSection === "theme") return "Theme";
+		if (editingSection === "buttons") return "Buttons";
+		if (editingSection === "content") return "MySite Content";
+		return "";
+	}, [editingSection]);
+	if (isProfileLoading) return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col overflow-y-auto px-2 py-6 2xl:flex-row 2xl:overflow-hidden",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "w-full px-4 2xl:w-2/3 2xl:shrink-0",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-5",
+				children: [
+					/* @__PURE__ */ jsx("div", { className: "bg-muted h-7 w-32 animate-pulse rounded-md" }),
+					/* @__PURE__ */ jsx("div", { className: "bg-muted h-20 w-full animate-pulse rounded-lg" }),
+					/* @__PURE__ */ jsx("div", { className: "bg-muted h-16 w-full animate-pulse rounded-lg" }),
+					/* @__PURE__ */ jsx("div", { className: "bg-muted h-40 w-full animate-pulse rounded-lg" })
+				]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "w-full shrink-0 overflow-y-hidden px-4 pt-5 2xl:w-1/3 2xl:pt-0",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "bg-muted flex h-full flex-col items-center gap-4 rounded-xl p-5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex w-full items-center justify-between",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ jsx("div", { className: "bg-background/50 h-3 w-24 animate-pulse rounded" }), /* @__PURE__ */ jsx("div", { className: "bg-background/50 h-4 w-28 animate-pulse rounded" })]
+					}), /* @__PURE__ */ jsx("div", { className: "bg-background/50 h-8 w-20 animate-pulse rounded-md" })]
+				}), /* @__PURE__ */ 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__ */ jsxs("div", {
+		className: "flex h-full flex-col overflow-y-auto px-2 py-6 2xl:flex-row 2xl:overflow-hidden",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: `w-full px-4 2xl:w-2/3 2xl:shrink-0 ${contentAnimClassName}`,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-col gap-5 2xl:h-full 2xl:overflow-y-auto",
+				children: showEditContent && editingSection === "theme" ? /* @__PURE__ */ jsx(MySiteThemeEditor, {
+					themes,
+					selectedThemeId: resolvedThemeId,
+					onSelectTheme: handleSelectTheme,
+					isPending: updateSettingsMutation.isPending,
+					onBack: onBackClick
+				}) : showEditContent && editingSection === "buttons" ? /* @__PURE__ */ jsx(PortalButtonsEditor, {
+					onBack: onBackClick,
+					onRefreshPreview: refreshPreview,
+					onToast: defaultToast
+				}) : showEditContent && editingSection === "content" ? /* @__PURE__ */ jsx(PortalFavoritesEditor, {
+					onBack: onBackClick,
+					onRefreshPreview: refreshPreview,
+					onToast: defaultToast
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("h1", {
+							className: "text-foreground text-xl font-bold",
+							children: "MySite"
+						}), animPhase !== "idle" && sectionLabel && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChevronRight, { className: "text-muted-foreground h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+							className: "text-foreground text-xl font-bold",
+							children: sectionLabel
+						})] })]
+					}),
+					/* @__PURE__ */ jsx(MySiteVisitorDetailsCard, {
+						views,
+						leads
+					}),
+					/* @__PURE__ */ jsx(MySiteLinkCard, {
+						mysiteUrl,
+						displayUrl,
+						onUpdateSlug: handleUpdateSlug,
+						onToast: defaultToast
+					}),
+					/* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
+										className: "bg-muted text-foreground flex h-7 w-7 shrink-0 items-center justify-center rounded-full",
+										children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" })
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-foreground flex-1 text-sm font-medium",
+										children: item.label
+									}),
+									/* @__PURE__ */ jsx(ChevronRight, { className: "text-muted-foreground h-3 w-3 shrink-0 transition-transform group-hover:translate-x-0.5" })
+								]
+							}, item.label);
+						})
+					})
+				] })
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: `w-full shrink-0 overflow-y-hidden px-4 pt-5 2xl:w-1/3 2xl:pt-0 ${previewAnimClassName}`,
+			children: /* @__PURE__ */ 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] = 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
+var MySiteScreen_exports = /* @__PURE__ */ __exportAll({
+	MySiteScreen: () => MySiteScreen,
+	mySiteScreenPropertySchema: () => mySiteScreenPropertySchema
+});
+function MySiteScreen({ background, textColor, accentColor, padding, borderRadius, ...divProps }) {
+	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";
+		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: sectionLabel ? /* @__PURE__ */ jsx(BreadcrumbLink, {
+			href: "#",
+			onClick: handleRootCrumbClick,
+			children: "My Site"
+		}) : /* @__PURE__ */ jsx(BreadcrumbPage, {
+			className: "font-semibold",
+			children: "My Site"
+		}) }), sectionLabel && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BreadcrumbSeparator, {}), /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, {
+			className: "font-semibold",
+			children: sectionLabel
+		}) })] })]
+	}) }), [sectionLabel, handleRootCrumbClick]));
+	return /* @__PURE__ */ jsx("div", {
+		...divProps,
+		className: `h-full ${divProps.className ?? ""}`,
+		children: /* @__PURE__ */ jsx(MySiteMainView, {
+			editingSection,
+			animPhase,
+			showEditContent,
+			onEditSection: handleEditSection,
+			onBackClick: handleBackClick
+		})
+	});
+}
+const mySiteScreenPropertySchema = {
+	widgetType: "MySiteScreen",
+	displayName: "My Site Screen",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}],
+	fields: []
+};
+//#endregion
+export { MySiteScreen_exports as n, mySiteScreenPropertySchema as r, MySiteScreen as t };
+
+//# sourceMappingURL=MySiteScreen-CK84vXa9.mjs.map

package/dist/MySiteScreen-CK84vXa9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MySiteScreen-CK84vXa9.mjs","names":[],"sources":["../src/screens/MySiteScreen/MySiteMainView.tsx","../src/screens/MySiteScreen/use-mysite-editing-section.ts","../src/screens/MySiteScreen/index.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport {\n  usePortalMySiteProfile,\n  usePortalMySiteThemes,\n  usePortalUpdateSettings,\n} from \"@fluid-app/mysite-ui/portal/hooks/use-mysite-portal\";\nimport type { MySiteTheme } from \"@fluid-app/mysite-core/mysite-api-types\";\nimport {\n  type AnimPhase,\n  type EditingSection,\n  getContentClassName,\n  getPreviewClassName,\n  MySiteVisitorDetailsCard,\n  MySitePhonePreview,\n  MySiteLinkCard,\n  MySiteThemeEditor,\n  PortalButtonsEditor,\n  PortalFavoritesEditor,\n} from \"@fluid-app/mysite-ui/portal/components\";\nimport { ChevronRight, User, Link2, Palette, LayoutGrid } from \"lucide-react\";\nimport { fluidToast } from \"@fluid-app/ui-primitives\";\nimport { useAppNavigation } from \"../../shell/AppNavigationContext\";\n\ntype NavActionItem = {\n  label: string;\n  key: Exclude<EditingSection, null>;\n  icon: typeof User;\n};\ntype NavLinkItem = {\n  label: string;\n  slug: string;\n  icon: typeof User;\n};\ntype NavItem = NavActionItem | NavLinkItem;\n\nconst navigationItems: NavItem[] = [\n  { label: \"Profile\", slug: \"profile\", icon: User },\n  { label: \"Theme\", key: \"theme\", icon: Palette },\n  { label: \"MySite Content\", key: \"content\", icon: LayoutGrid },\n  { label: \"Buttons\", key: \"buttons\", icon: Link2 },\n];\n\nfunction defaultToast(message: string, type: \"success\" | \"error\") {\n  fluidToast({ title: message, type });\n}\n\nexport interface MySiteMainViewProps {\n  editingSection: EditingSection;\n  animPhase: AnimPhase;\n  showEditContent: boolean;\n  onEditSection: (section: EditingSection) => void;\n  onBackClick: () => void;\n}\n\nexport function MySiteMainView({\n  editingSection,\n  animPhase,\n  showEditContent,\n  onEditSection,\n  onBackClick,\n}: MySiteMainViewProps): React.JSX.Element {\n  const { navigate } = useAppNavigation();\n  const { data: profile, isLoading: isProfileLoading } =\n    usePortalMySiteProfile();\n  const { data: themes = [] } = usePortalMySiteThemes();\n  const updateSettingsMutation = usePortalUpdateSettings();\n\n  const [previewKey, setPreviewKey] = useState(0);\n  const refreshPreview = useCallback(() => setPreviewKey((k) => k + 1), []);\n\n  const [selectedThemeId, setSelectedThemeId] = useState<number | null>(null);\n\n  const resolvedThemeId =\n    selectedThemeId ??\n    profile?.theme_id ??\n    themes.find((t) => t.name === \"Default\")?.id ??\n    themes[0]?.id ??\n    null;\n\n  const currentTheme = themes.find((t) => t.id === resolvedThemeId);\n  const themeName = currentTheme?.name ?? \"Default\";\n\n  const mysiteUrl = profile?.mysite_url ?? \"\";\n  const displayUrl = mysiteUrl ? mysiteUrl.replace(/^https?:\\/\\//, \"\") : \"\";\n  const views = profile?.mysite_views ?? 0;\n  const leads = profile?.mysite_leads ?? 0;\n\n  const handleSelectTheme = useCallback(\n    (theme: MySiteTheme) => {\n      if (theme.id === resolvedThemeId) return;\n      const previousThemeId = selectedThemeId;\n      setSelectedThemeId(theme.id);\n      updateSettingsMutation.mutate(\n        { theme_id: theme.id },\n        {\n          onSuccess: () => {\n            defaultToast(`Theme changed to \"${theme.name}\"`, \"success\");\n            refreshPreview();\n          },\n          onError: () => {\n            setSelectedThemeId(previousThemeId);\n            defaultToast(\"Failed to update theme\", \"error\");\n          },\n        },\n      );\n    },\n    [resolvedThemeId, selectedThemeId, updateSettingsMutation, refreshPreview],\n  );\n\n  const handleUpdateSlug = useCallback(\n    async (slug: string) => {\n      await new Promise<void>((resolve, reject) => {\n        updateSettingsMutation.mutate(\n          { slug },\n          {\n            onSuccess: () => resolve(),\n            onError: () => reject(new Error(\"Failed\")),\n          },\n        );\n      });\n    },\n    [updateSettingsMutation],\n  );\n\n  const handlePreview = useCallback(() => {\n    if (mysiteUrl) window.open(`${mysiteUrl}?preview=true`, \"_blank\");\n  }, [mysiteUrl]);\n\n  const sectionLabel = useMemo(() => {\n    if (editingSection === \"theme\") return \"Theme\";\n    if (editingSection === \"buttons\") return \"Buttons\";\n    if (editingSection === \"content\") return \"MySite Content\";\n    return \"\";\n  }, [editingSection]);\n\n  if (isProfileLoading) {\n    return (\n      <div className=\"flex h-full flex-col overflow-y-auto px-2 py-6 2xl:flex-row 2xl:overflow-hidden\">\n        <div className=\"w-full px-4 2xl:w-2/3 2xl:shrink-0\">\n          <div className=\"flex flex-col gap-5\">\n            <div className=\"bg-muted h-7 w-32 animate-pulse rounded-md\" />\n            <div className=\"bg-muted h-20 w-full animate-pulse rounded-lg\" />\n            <div className=\"bg-muted h-16 w-full animate-pulse rounded-lg\" />\n            <div className=\"bg-muted h-40 w-full animate-pulse rounded-lg\" />\n          </div>\n        </div>\n        <div className=\"w-full shrink-0 overflow-y-hidden px-4 pt-5 2xl:w-1/3 2xl:pt-0\">\n          <div className=\"bg-muted flex h-full flex-col items-center gap-4 rounded-xl p-5\">\n            <div className=\"flex w-full items-center justify-between\">\n              <div className=\"space-y-1\">\n                <div className=\"bg-background/50 h-3 w-24 animate-pulse rounded\" />\n                <div className=\"bg-background/50 h-4 w-28 animate-pulse rounded\" />\n              </div>\n              <div className=\"bg-background/50 h-8 w-20 animate-pulse rounded-md\" />\n            </div>\n            <div className=\"bg-background/50 h-[490px] w-[260px] animate-pulse rounded-[36px] sm:h-[600px] sm:w-[320px]\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  const contentAnimClassName = getContentClassName(animPhase);\n  const previewAnimClassName = getPreviewClassName(animPhase);\n\n  return (\n    <div className=\"flex h-full flex-col overflow-y-auto px-2 py-6 2xl:flex-row 2xl:overflow-hidden\">\n      {/* Content column */}\n      <div\n        className={`w-full px-4 2xl:w-2/3 2xl:shrink-0 ${contentAnimClassName}`}\n      >\n        <div className=\"flex min-w-0 flex-col gap-5 2xl:h-full 2xl:overflow-y-auto\">\n          {showEditContent && editingSection === \"theme\" ? (\n            <MySiteThemeEditor\n              themes={themes}\n              selectedThemeId={resolvedThemeId}\n              onSelectTheme={handleSelectTheme}\n              isPending={updateSettingsMutation.isPending}\n              onBack={onBackClick}\n            />\n          ) : showEditContent && editingSection === \"buttons\" ? (\n            <PortalButtonsEditor\n              onBack={onBackClick}\n              onRefreshPreview={refreshPreview}\n              onToast={defaultToast}\n            />\n          ) : showEditContent && editingSection === \"content\" ? (\n            <PortalFavoritesEditor\n              onBack={onBackClick}\n              onRefreshPreview={refreshPreview}\n              onToast={defaultToast}\n            />\n          ) : (\n            <>\n              {/* Header with optional back-to-section label */}\n              <div className=\"flex items-center gap-2\">\n                <h1 className=\"text-foreground text-xl font-bold\">MySite</h1>\n                {animPhase !== \"idle\" && sectionLabel && (\n                  <>\n                    <ChevronRight className=\"text-muted-foreground h-4 w-4\" />\n                    <span className=\"text-foreground text-xl font-bold\">\n                      {sectionLabel}\n                    </span>\n                  </>\n                )}\n              </div>\n\n              <MySiteVisitorDetailsCard views={views} leads={leads} />\n\n              <MySiteLinkCard\n                mysiteUrl={mysiteUrl}\n                displayUrl={displayUrl}\n                onUpdateSlug={handleUpdateSlug}\n                onToast={defaultToast}\n              />\n\n              <div className=\"border-border bg-card divide-border divide-y overflow-hidden rounded-lg border\">\n                {navigationItems.map((item) => {\n                  const Icon = item.icon;\n                  const rowClassName =\n                    \"group hover:bg-muted flex w-full items-center gap-2.5 px-3 py-2.5 transition-colors text-left cursor-pointer\";\n                  const onClick =\n                    \"slug\" in item\n                      ? () => navigate(item.slug)\n                      : () => onEditSection(item.key);\n\n                  return (\n                    <button\n                      key={item.label}\n                      type=\"button\"\n                      onClick={onClick}\n                      className={rowClassName}\n                    >\n                      <div className=\"bg-muted text-foreground flex h-7 w-7 shrink-0 items-center justify-center rounded-full\">\n                        <Icon className=\"h-3.5 w-3.5\" />\n                      </div>\n                      <span className=\"text-foreground flex-1 text-sm font-medium\">\n                        {item.label}\n                      </span>\n                      <ChevronRight className=\"text-muted-foreground h-3 w-3 shrink-0 transition-transform group-hover:translate-x-0.5\" />\n                    </button>\n                  );\n                })}\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n\n      {/* Preview column */}\n      <div\n        className={`w-full shrink-0 overflow-y-hidden px-4 pt-5 2xl:w-1/3 2xl:pt-0 ${previewAnimClassName}`}\n      >\n        <MySitePhonePreview\n          mysiteUrl={mysiteUrl}\n          themeName={themeName}\n          previewKey={previewKey}\n          isUpdating={updateSettingsMutation.isPending}\n          onPreview={handlePreview}\n        />\n      </div>\n    </div>\n  );\n}\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n  type AnimPhase,\n  type EditingSection,\n  FADE_MS,\n  SLIDE_MS,\n} from \"@fluid-app/mysite-ui/portal/components\";\n\nexport interface MySiteEditingSectionState {\n  editingSection: EditingSection;\n  animPhase: AnimPhase;\n  showEditContent: boolean;\n  handleEditSection: (section: EditingSection) => void;\n  handleBackClick: () => void;\n}\n\nexport function useMySiteEditingSection(): MySiteEditingSectionState {\n  const [animPhase, setAnimPhase] = useState<AnimPhase>(\"idle\");\n  const [editingSection, setEditingSection] = useState<EditingSection>(null);\n  const timeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  useEffect(() => {\n    const ref = timeoutsRef;\n    return () => ref.current.forEach(clearTimeout);\n  }, []);\n\n  const cancelScheduled = useCallback(() => {\n    timeoutsRef.current.forEach(clearTimeout);\n    timeoutsRef.current = [];\n  }, []);\n\n  const schedule = useCallback((phase: AnimPhase, delay: number) => {\n    const id = setTimeout(() => setAnimPhase(phase), delay);\n    timeoutsRef.current.push(id);\n  }, []);\n\n  const showEditContent = [\n    \"slide\",\n    \"fade-in\",\n    \"editing\",\n    \"exit-fade-out\",\n    \"exit-slide\",\n  ].includes(animPhase);\n\n  const handleEditSection = useCallback(\n    (section: EditingSection) => {\n      cancelScheduled();\n      setEditingSection(section);\n      setAnimPhase(\"fade-out\");\n      schedule(\"slide\", FADE_MS);\n      schedule(\"fade-in\", FADE_MS + SLIDE_MS);\n      schedule(\"editing\", FADE_MS + SLIDE_MS + FADE_MS);\n    },\n    [cancelScheduled, schedule],\n  );\n\n  const handleBackClick = useCallback(() => {\n    cancelScheduled();\n    setAnimPhase(\"exit-fade-out\");\n    schedule(\"exit-slide\", FADE_MS);\n    schedule(\"exit-fade-in\", FADE_MS + SLIDE_MS);\n    const id = setTimeout(\n      () => {\n        setAnimPhase(\"idle\");\n        setEditingSection(null);\n      },\n      FADE_MS + SLIDE_MS + FADE_MS,\n    );\n    timeoutsRef.current.push(id);\n  }, [cancelScheduled, schedule]);\n\n  return {\n    editingSection,\n    animPhase,\n    showEditContent,\n    handleEditSection,\n    handleBackClick,\n  };\n}\n","import React, { useCallback, useMemo } from \"react\";\nimport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@fluid-app/ui-primitives\";\nimport { useScreenHeaderBreadcrumbs } from \"@fluid-app/portal-react/shell/ScreenHeaderContext\";\nimport type { WidgetPropertySchema } from \"../../registries/property-schema-types\";\nimport { MySiteMainView } from \"./MySiteMainView\";\nimport { useMySiteEditingSection } from \"./use-mysite-editing-section\";\nimport type { MySiteScreenProps } from \"./types\";\n\nexport type { MySiteScreenProps } from \"./types\";\nexport type { MeProfile } from \"./types\";\n\nexport function MySiteScreen({\n  /* eslint-disable @typescript-eslint/no-unused-vars -- destructured to exclude from divProps spread */\n  background,\n  textColor,\n  accentColor,\n  padding,\n  borderRadius,\n  /* eslint-enable @typescript-eslint/no-unused-vars */\n  ...divProps\n}: MySiteScreenProps): React.JSX.Element {\n  const {\n    editingSection,\n    animPhase,\n    showEditContent,\n    handleEditSection,\n    handleBackClick,\n  } = useMySiteEditingSection();\n\n  const sectionLabel = useMemo(() => {\n    if (editingSection === \"theme\") return \"Theme\";\n    if (editingSection === \"buttons\") return \"Buttons\";\n    if (editingSection === \"content\") return \"MySite Content\";\n    return null;\n  }, [editingSection]);\n\n  const handleRootCrumbClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      if (editingSection !== null) handleBackClick();\n    },\n    [editingSection, handleBackClick],\n  );\n\n  const headerBreadcrumbs = useMemo(\n    () => (\n      <Breadcrumb>\n        <BreadcrumbList className=\"text-lg\">\n          <BreadcrumbItem>\n            {sectionLabel ? (\n              <BreadcrumbLink href=\"#\" onClick={handleRootCrumbClick}>\n                My Site\n              </BreadcrumbLink>\n            ) : (\n              <BreadcrumbPage className=\"font-semibold\">My Site</BreadcrumbPage>\n            )}\n          </BreadcrumbItem>\n          {sectionLabel && (\n            <>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage className=\"font-semibold\">\n                  {sectionLabel}\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </>\n          )}\n        </BreadcrumbList>\n      </Breadcrumb>\n    ),\n    [sectionLabel, handleRootCrumbClick],\n  );\n  useScreenHeaderBreadcrumbs(headerBreadcrumbs);\n\n  return (\n    <div {...divProps} className={`h-full ${divProps.className ?? \"\"}`}>\n      <MySiteMainView\n        editingSection={editingSection}\n        animPhase={animPhase}\n        showEditContent={showEditContent}\n        onEditSection={handleEditSection}\n        onBackClick={handleBackClick}\n      />\n    </div>\n  );\n}\n\nexport const mySiteScreenPropertySchema: WidgetPropertySchema = {\n  widgetType: \"MySiteScreen\",\n  displayName: \"My Site Screen\",\n  tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n  fields: [],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}

package/dist/MySiteScreen-zfajm9da.cjs

@@ -0,0 +1,309 @@
+const require_chunk = require("./chunk-9hOWP6kD.cjs");
+const require_src = require("./src-uhf6Szlw.cjs");
+const require_ScreenHeaderContext = require("./ScreenHeaderContext-oIu5Bvhs.cjs");
+const require_AppNavigationContext = require("./AppNavigationContext-BDs1cOuG.cjs");
+const require_dist = require("./dist-DJAHGHHi.cjs");
+const require_components = require("./components-BKADyCYp.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region src/screens/MySiteScreen/MySiteMainView.tsx
+const navigationItems = [
+	{
+		label: "Profile",
+		slug: "profile",
+		icon: lucide_react.User
+	},
+	{
+		label: "Theme",
+		key: "theme",
+		icon: lucide_react.Palette
+	},
+	{
+		label: "MySite Content",
+		key: "content",
+		icon: lucide_react.LayoutGrid
+	},
+	{
+		label: "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 { navigate } = require_AppNavigationContext.useAppNavigation();
+	const { data: profile, isLoading: isProfileLoading } = require_dist.usePortalMySiteProfile();
+	const { data: themes = [] } = require_dist.usePortalMySiteThemes();
+	const updateSettingsMutation = require_dist.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(`Theme changed to "${theme.name}"`, "success");
+				refreshPreview();
+			},
+			onError: () => {
+				setSelectedThemeId(previousThemeId);
+				defaultToast("Failed to update theme", "error");
+			}
+		});
+	}, [
+		resolvedThemeId,
+		selectedThemeId,
+		updateSettingsMutation,
+		refreshPreview
+	]);
+	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 "Theme";
+		if (editingSection === "buttons") return "Buttons";
+		if (editingSection === "content") return "MySite Content";
+		return "";
+	}, [editingSection]);
+	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:w-1/3 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 = require_components.getContentClassName(animPhase);
+	const previewAnimClassName = require_components.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)(require_components.MySiteThemeEditor, {
+					themes,
+					selectedThemeId: resolvedThemeId,
+					onSelectTheme: handleSelectTheme,
+					isPending: updateSettingsMutation.isPending,
+					onBack: onBackClick
+				}) : showEditContent && editingSection === "buttons" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.PortalButtonsEditor, {
+					onBack: onBackClick,
+					onRefreshPreview: refreshPreview,
+					onToast: defaultToast
+				}) : showEditContent && editingSection === "content" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.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: "MySite"
+						}), 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 h-4 w-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-foreground text-xl font-bold",
+							children: sectionLabel
+						})] })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.MySiteVisitorDetailsCard, {
+						views,
+						leads
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.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 h-7 w-7 shrink-0 items-center justify-center rounded-full",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3.5 w-3.5" })
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-foreground flex-1 text-sm font-medium",
+										children: item.label
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "text-muted-foreground h-3 w-3 shrink-0 transition-transform group-hover:translate-x-0.5" })
+								]
+							}, item.label);
+						})
+					})
+				] })
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `w-full shrink-0 overflow-y-hidden px-4 pt-5 2xl:w-1/3 2xl:pt-0 ${previewAnimClassName}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.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 }) {
+	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";
+		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: sectionLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbLink, {
+			href: "#",
+			onClick: handleRootCrumbClick,
+			children: "My Site"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
+			className: "font-semibold",
+			children: "My Site"
+		}) }), 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
+		}) })] })]
+	}) }), [sectionLabel, handleRootCrumbClick]));
+	return /* @__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: "My Site 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-zfajm9da.cjs.map