@fluid-app/portal-sdk 0.1.447 → 0.1.448

package/dist/index.mjs

@@ -6,7 +6,7 @@ import "./use-optional-store-DpB_jK4Q.mjs";
 import { b as useLanguagesApi, h as useThemeContext, m as FluidThemeProvider, n as useFluidContext, p as shellEn, r as SUPPORTED_LANGUAGES, t as FluidProvider } from "./FluidProvider-DTLXqi_x.mjs";
 import "./mysite-api-context-BbxSfNft.mjs";
 import "./ContactsTranslationBridge-DCSWCdyq.mjs";
-import { r as contactsScreenPropertySchema, t as ContactsScreen } from "./ContactsScreen-Ds-J6GFM.mjs";
+import { i as useIsMobile, r as contactsScreenPropertySchema, t as ContactsScreen } from "./ContactsScreen-DjMBu144.mjs";
 import { n as usePortalTenantClient } from "./PortalTenantClientProvider-lBrYQEsw.mjs";
 import "./registry-context-l1jip-6W.mjs";
 import { t as WidgetInteractionProvider } from "./WidgetInteractionContext-D8HZx_Gf.mjs";
@@ -82,7 +82,7 @@ import { Component, StrictMode, Suspense, createContext, forwardRef, lazy, memo,
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { z } from "zod";
-import { Bell, Box, Boxes, Briefcase, Building2, Calendar, Check, ChevronLeft, ChevronRight, CircleUser, Compass, ContactRound, Ellipsis, File, FileText, FileVideo, Folder, FolderOpen, Globe, GraduationCap, Heart, House, Image, LayoutGrid, ListMusic, LogOut, Mail, Menu, MessageCircle, MessageSquare, Moon, PackageOpen, PanelLeft, Repeat, Search, Settings, ShoppingCart, Smartphone, Star, Store, Sun, TriangleAlert, User, UserCog, Users, X } from "lucide-react";
+import { Bell, Box, Boxes, Briefcase, Building2, Calendar, Check, ChevronLeft, ChevronRight, CircleUser, Compass, ContactRound, Ellipsis, File, FileText, FileVideo, Folder, FolderOpen, Globe, GraduationCap, Heart, House, Image, LayoutGrid, ListMusic, LogOut, Mail, Menu, MessageCircle, MessageSquare, Moon, PackageOpen, PanelLeft, Repeat, Search, Settings, ShoppingCart, Smartphone, Star, Store, Sun, TriangleAlert, User, UserCog, Users } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Slot } from "@radix-ui/react-slot";
@@ -495,22 +495,6 @@ function useResolvedPages(navigation) {
 	return useMemo(() => resolvePages(navigation), [resolvePages, navigation]);
 }
 //#endregion
-//#region ../react/src/shell/use-mobile.ts
-const MOBILE_BREAKPOINT = 768;
-function useIsMobile() {
-	const [isMobile, setIsMobile] = useState(false);
-	useEffect(() => {
-		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-		const onChange = () => {
-			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-		};
-		mql.addEventListener("change", onChange);
-		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-		return () => mql.removeEventListener("change", onChange);
-	}, []);
-	return isMobile;
-}
-//#endregion
 //#region ../react/src/shell/sidebar.tsx
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
@@ -1402,6 +1386,32 @@ function SdkNavigation({ navItems, currentSlug, onNavigate }) {
 	}) });
 }
 //#endregion
+//#region src/shell/use-mobile-languages.ts
+/**
+* Resolve the language options to offer in the mobile switcher: the company's
+* enabled languages, falling back to the full supported set if that request
+* hasn't returned, failed, or came back empty (better to over-offer than to
+* strand the user with no way to switch).
+*/
+function useMobileLanguages() {
+	const { locale, setLocale } = useActiveLocale();
+	const languagesApi = useLanguagesApi();
+	const { data } = useQuery({
+		queryKey: storeKeys.languages(),
+		queryFn: () => languagesApi.listLanguages({ limit: 100 }),
+		staleTime: 300 * 1e3
+	});
+	const enabledCodes = new Set((data?.languages ?? []).map((l) => l.code));
+	const filtered = SUPPORTED_LANGUAGES.filter((l) => enabledCodes.has(l.iso));
+	const languages = filtered.length > 0 ? filtered : SUPPORTED_LANGUAGES;
+	return {
+		languages,
+		locale,
+		setLocale,
+		currentName: languages.find((l) => l.iso === locale)?.name ?? locale
+	};
+}
+//#endregion
 //#region src/shell/SdkMobileProfileMenu.tsx
 function getInitials(name) {
 	if (!name) return "U";
@@ -1412,13 +1422,19 @@ function getInitials(name) {
 function SdkMobileProfileMenu({ onNavigate, onLogout }) {
 	const { isMobile, useBottomNav } = useSidebar();
 	const [isOpen, setIsOpen] = useState(false);
+	const [view, setView] = useState("main");
 	const user = useRepUser();
 	const themeMode = useThemeMode();
+	const languages = useMobileLanguages();
 	const { t } = useShellTranslation();
 	const handleNavigate = useCallback((slug) => {
 		setIsOpen(false);
 		onNavigate(slug);
 	}, [onNavigate]);
+	const handleOpenChange = useCallback((open) => {
+		setIsOpen(open);
+		if (!open) setView("main");
+	}, []);
 	if (!isMobile || !useBottomNav) return null;
 	const initials = getInitials(user?.name);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
@@ -1434,114 +1450,99 @@ function SdkMobileProfileMenu({ onNavigate, onLogout }) {
 			className: "flex size-8 items-center justify-center text-xs font-medium",
 			children: initials
 		})
-	}), isOpen && /* @__PURE__ */ jsxs("div", {
-		className: "animate-in fade-in slide-in-from-bottom-4 bg-background fixed inset-0 z-50 flex flex-col duration-200",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between px-4 py-3",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-foreground text-lg font-semibold",
-				children: t("profile_title")
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => setIsOpen(false),
-				className: "text-muted-foreground rounded-full p-1",
-				"aria-label": t("profile_close_menu"),
-				children: /* @__PURE__ */ jsx(X, { className: "size-5" })
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex-1 overflow-auto px-4 pb-[env(safe-area-inset-bottom)]",
-			children: [
-				user && /* @__PURE__ */ jsxs("div", {
-					className: "border-border flex items-center gap-3 border-b py-4",
-					children: [user.imageUrl ? /* @__PURE__ */ jsx("img", {
-						src: user.imageUrl,
-						alt: user.name ?? t("profile_user_fallback"),
-						className: "size-10 rounded-full object-cover"
-					}) : /* @__PURE__ */ jsx("span", {
-						className: "bg-muted flex size-10 items-center justify-center rounded-full text-sm font-medium",
-						children: initials
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "min-w-0 flex-1",
-						children: [user.name && /* @__PURE__ */ jsx("p", {
-							className: "text-foreground truncate text-sm font-semibold",
-							children: user.name
-						}), user.email && /* @__PURE__ */ jsx("p", {
-							className: "text-muted-foreground truncate text-xs",
-							children: user.email
-						})]
+	}), /* @__PURE__ */ jsx(MobileBottomSheet, {
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		surface: "sidebar",
+		title: view === "language" ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setView("main"),
+			className: "text-foreground -ml-1 flex items-center gap-1",
+			"aria-label": t("nav_back"),
+			children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" }), /* @__PURE__ */ jsx("span", { children: t("language_select") })]
+		}) : t("profile_title"),
+		children: view === "language" ? /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col pb-2",
+			children: languages.languages.map((lang) => {
+				const isActive = lang.iso === languages.locale;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => {
+						languages.setLocale(lang.iso);
+						setView("main");
+					},
+					className: "hover:bg-sidebar-accent flex w-full items-center justify-between gap-3 rounded-lg px-3 py-3.5 text-left",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: isActive ? "text-foreground text-base font-semibold" : "text-foreground text-base",
+						children: lang.name
+					}), isActive && /* @__PURE__ */ jsx(Check, { className: "text-primary size-5 shrink-0" })]
+				}, lang.iso);
+			})
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			user && /* @__PURE__ */ jsxs("div", {
+				className: "border-border flex items-center gap-3 border-b px-3 py-4",
+				children: [user.imageUrl ? /* @__PURE__ */ jsx("img", {
+					src: user.imageUrl,
+					alt: user.name ?? t("profile_user_fallback"),
+					className: "size-10 rounded-full object-cover"
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "bg-muted flex size-10 items-center justify-center rounded-full text-sm font-medium",
+					children: initials
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [user.name && /* @__PURE__ */ jsx("p", {
+						className: "text-foreground truncate text-sm font-semibold",
+						children: user.name
+					}), user.email && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground truncate text-xs",
+						children: user.email
 					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "border-border border-b py-4",
-					children: /* @__PURE__ */ jsxs("button", {
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "border-border border-b py-2",
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => handleNavigate("app-download"),
+					className: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium",
+					children: [/* @__PURE__ */ jsx(Smartphone, { className: "size-5" }), /* @__PURE__ */ jsx("span", { children: t("profile_app_download") })]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1 py-2",
+				children: [
+					/* @__PURE__ */ jsxs("button", {
 						type: "button",
-						onClick: () => handleNavigate("app-download"),
+						onClick: () => setView("language"),
 						className: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium",
-						children: [/* @__PURE__ */ jsx(Smartphone, { className: "size-5" }), /* @__PURE__ */ jsx("span", { children: t("profile_app_download") })]
-					})
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "space-y-4 py-4",
-					children: [/* @__PURE__ */ jsxs("button", {
+						children: [
+							/* @__PURE__ */ jsx(Globe, { className: "size-5 shrink-0" }),
+							/* @__PURE__ */ jsx("span", { children: t("language_select") }),
+							/* @__PURE__ */ jsxs("span", {
+								className: "text-muted-foreground ml-auto flex min-w-0 items-center gap-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: languages.currentName
+								}), /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0" })]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: themeMode.cycleMode,
 						className: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium",
 						children: [themeMode.mode === "dark" ? /* @__PURE__ */ jsx(Moon, { className: "size-5" }) : /* @__PURE__ */ jsx(Sun, { className: "size-5" }), /* @__PURE__ */ jsx("span", { children: themeMode.mode === "light" ? t("theme_light") : t("theme_dark") })]
-					}), onLogout && /* @__PURE__ */ jsxs("button", {
+					}),
+					onLogout && /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: onLogout,
 						className: "text-destructive hover:bg-sidebar-accent flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium",
 						children: [/* @__PURE__ */ jsx(LogOut, { className: "size-5" }), /* @__PURE__ */ jsx("span", { children: t("logout") })]
-					})]
-				})
-			]
-		})]
-	})] });
-}
-//#endregion
-//#region src/shell/LanguageSelector.tsx
-function LanguageSelector() {
-	const [open, setOpen] = useState(false);
-	const { locale, setLocale } = useActiveLocale();
-	const { t } = useShellTranslation();
-	const languagesApi = useLanguagesApi();
-	const { data: languagesData } = useQuery({
-		queryKey: storeKeys.languages(),
-		queryFn: () => languagesApi.listLanguages({ limit: 100 }),
-		staleTime: 300 * 1e3
-	});
-	const enabledCodes = new Set((languagesData?.languages ?? []).map((l) => l.code));
-	const filtered = SUPPORTED_LANGUAGES.filter((l) => enabledCodes.has(l.iso));
-	const languagesToRender = filtered.length > 0 ? filtered : SUPPORTED_LANGUAGES;
-	return /* @__PURE__ */ jsxs(Popover, {
-		open,
-		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsxs(Button, {
-				variant: "ghost",
-				size: "sm",
-				className: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shrink-0 gap-1.5",
-				"aria-label": t("language_select"),
-				children: [/* @__PURE__ */ jsx(Globe, { className: "size-3" }), /* @__PURE__ */ jsx("span", {
-					className: "text-xs uppercase",
-					children: locale.split("_")[0]
-				})]
+					})
+				]
 			})
-		}), /* @__PURE__ */ jsx(PopoverContent, {
-			align: "end",
-			className: "bg-popover z-50 w-56 rounded-lg p-1 shadow-lg",
-			children: languagesToRender.map((lang) => /* @__PURE__ */ jsxs(Button, {
-				variant: "ghost",
-				className: "h-auto w-full justify-between px-3 py-2 text-left text-sm whitespace-normal",
-				onClick: () => {
-					setLocale(lang.iso);
-					setOpen(false);
-				},
-				children: [/* @__PURE__ */ jsx("span", { children: lang.name }), lang.iso === locale && /* @__PURE__ */ jsx(Check, { className: "size-4" })]
-			}, lang.iso))
-		})]
-	});
+		] })
+	})] });
 }
 //#endregion
 //#region src/shell/SdkHeader.tsx
@@ -1568,12 +1569,12 @@ function SdkHeader({ mobileTabs, currentSlug, title, onBack, onNavigate, onLogou
 					className: "text-sidebar-foreground min-w-0 flex-1 truncate text-[17px] leading-tight font-semibold tracking-[-0.01em]",
 					children: resolvedTitle
 				}) : null,
-				/* @__PURE__ */ jsxs("div", {
+				/* @__PURE__ */ jsx("div", {
 					className: "text-muted-foreground ml-auto flex flex-none items-center justify-end gap-2",
-					children: [/* @__PURE__ */ jsx(LanguageSelector, {}), /* @__PURE__ */ jsx(SdkMobileProfileMenu, {
+					children: /* @__PURE__ */ jsx(SdkMobileProfileMenu, {
 						onNavigate,
 						onLogout
-					})]
+					})
 				})
 			]
 		}) : /* @__PURE__ */ jsx("div", {
@@ -1601,6 +1602,51 @@ function SdkHeader({ mobileTabs, currentSlug, title, onBack, onNavigate, onLogou
 	});
 }
 //#endregion
+//#region src/shell/LanguageSelector.tsx
+function LanguageSelector() {
+	const [open, setOpen] = useState(false);
+	const { locale, setLocale } = useActiveLocale();
+	const { t } = useShellTranslation();
+	const languagesApi = useLanguagesApi();
+	const { data: languagesData } = useQuery({
+		queryKey: storeKeys.languages(),
+		queryFn: () => languagesApi.listLanguages({ limit: 100 }),
+		staleTime: 300 * 1e3
+	});
+	const enabledCodes = new Set((languagesData?.languages ?? []).map((l) => l.code));
+	const filtered = SUPPORTED_LANGUAGES.filter((l) => enabledCodes.has(l.iso));
+	const languagesToRender = filtered.length > 0 ? filtered : SUPPORTED_LANGUAGES;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "sm",
+				className: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shrink-0 gap-1.5",
+				"aria-label": t("language_select"),
+				children: [/* @__PURE__ */ jsx(Globe, { className: "size-3" }), /* @__PURE__ */ jsx("span", {
+					className: "text-xs uppercase",
+					children: locale.split("_")[0]
+				})]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "end",
+			className: "bg-popover z-50 w-56 rounded-lg p-1 shadow-lg",
+			children: languagesToRender.map((lang) => /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				className: "h-auto w-full justify-between px-3 py-2 text-left text-sm whitespace-normal",
+				onClick: () => {
+					setLocale(lang.iso);
+					setOpen(false);
+				},
+				children: [/* @__PURE__ */ jsx("span", { children: lang.name }), lang.iso === locale && /* @__PURE__ */ jsx(Check, { className: "size-4" })]
+			}, lang.iso))
+		})]
+	});
+}
+//#endregion
 //#region ../../company-switcher/ui/src/components/CompanyImage.tsx
 function CompanyImage({ src, alt, size }) {
 	const [error, setError] = useState(false);
@@ -1810,7 +1856,7 @@ const ProfileScreen$1 = lazy(() => import("./ProfileScreen-2-dGMH-O.mjs").then((
 const OrdersScreen$1 = lazy(() => import("./OrdersScreen-_JbOhHSb.mjs").then((m) => ({ default: m.OrdersScreen })));
 const SubscriptionsScreen$1 = lazy(() => import("./SubscriptionsScreen-Cz9JzpFs.mjs").then((m) => ({ default: m.SubscriptionsScreen })));
 const MessagingScreen$1 = lazy(() => import("./MessagingScreen-CyG6ng9Q.mjs").then((m) => ({ default: m.MessagingScreen })));
-const ContactsScreen$1 = lazy(() => import("./ContactsScreen-Ds-J6GFM.mjs").then((n) => n.n).then((m) => ({ default: m.ContactsScreen })));
+const ContactsScreen$1 = lazy(() => import("./ContactsScreen-DjMBu144.mjs").then((n) => n.n).then((m) => ({ default: m.ContactsScreen })));
 const ShopScreen$1 = lazy(() => import("./ShopScreen-CBu3-hoU.mjs").then((m) => ({ default: m.ShopScreen })));
 const CustomersScreen$1 = lazy(() => import("./CustomersScreen-95_LKw0d.mjs").then((n) => n.n).then((m) => ({ default: m.CustomersScreen })));
 const ShareablesScreen$1 = lazy(() => import("./ShareablesScreen-CJU8G50V.mjs").then((m) => ({ default: m.ShareablesScreen })));
@@ -3721,7 +3767,7 @@ const CORE_PAGE_IDS = {
 const screenPropertySchemas = {
 	ProfileScreen: () => import("./ProfileScreen-2-dGMH-O.mjs").then((m) => m.profileScreenPropertySchema),
 	MessagingScreen: () => import("./MessagingScreen-CyG6ng9Q.mjs").then((m) => m.messagingScreenPropertySchema),
-	ContactsScreen: () => import("./ContactsScreen-Ds-J6GFM.mjs").then((n) => n.n).then((m) => m.contactsScreenPropertySchema),
+	ContactsScreen: () => import("./ContactsScreen-DjMBu144.mjs").then((n) => n.n).then((m) => m.contactsScreenPropertySchema),
 	OrdersScreen: () => import("./OrdersScreen-_JbOhHSb.mjs").then((m) => m.ordersScreenPropertySchema),
 	SubscriptionsScreen: () => import("./SubscriptionsScreen-Cz9JzpFs.mjs").then((m) => m.subscriptionsScreenPropertySchema),
 	CustomersScreen: () => import("./CustomersScreen-95_LKw0d.mjs").then((n) => n.n).then((m) => m.customersScreenPropertySchema),