@fluid-app/portal-sdk 0.1.443 → 0.1.445

package/dist/index.mjs

@@ -88,6 +88,7 @@ import { twMerge } from "tailwind-merge";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { createRoot } from "react-dom/client";
+import { MobileBottomSheet } from "@fluid-app/ui-components/components/MobileBottomSheet";
 //#region src/types/page-template.ts
 /**
 * Built-in page category IDs
@@ -951,12 +952,12 @@ function AppShellLayout({ sidebarContent, headerContent, children, sidebarHeader
 				/* @__PURE__ */ jsxs(SidebarInset, {
 					className: "flex flex-1 flex-col overflow-hidden",
 					children: [headerContent, /* @__PURE__ */ jsx("div", {
-						className: `bg-muted min-h-0 flex-1 md:pt-4 md:pr-4 md:pb-4 md:pl-2 ${useBottomNav ? "max-md:pb-[calc(4rem+env(safe-area-inset-bottom))]" : ""}`,
+						className: `bg-muted min-h-0 flex-1 md:pt-4 md:pr-4 md:pb-4 md:pl-2 ${useBottomNav ? "max-md:pb-[calc(3.5rem+env(safe-area-inset-bottom))]" : ""}`,
 						children: /* @__PURE__ */ jsx("div", {
 							ref: screenContentRef,
 							"data-fluid-portal-screen-area": "",
 							tabIndex: -1,
-							className: "ring-foreground/5 scrollbar-none bg-background text-foreground h-full overflow-auto rounded-xl shadow-sm ring-1",
+							className: "ring-foreground/5 scrollbar-none bg-background text-foreground h-full overflow-auto rounded-xl shadow-sm ring-1 max-md:rounded-none max-md:shadow-none max-md:ring-0",
 							children
 						})
 					})]
@@ -1250,7 +1251,7 @@ function SdkBottomNav({ navItems, currentSlug, onNavigate, appDefinitionId = 0,
 		setMoreOpen(false);
 	};
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("nav", {
-		className: "border-border bg-sidebar fixed right-0 bottom-0 left-0 z-40 flex h-16 items-end justify-around border-t pb-[env(safe-area-inset-bottom)]",
+		className: "border-border bg-sidebar fixed right-0 bottom-0 left-0 z-40 flex h-[calc(3.5rem+env(safe-area-inset-bottom))] items-end justify-around border-t pb-[env(safe-area-inset-bottom)]",
 		children: [visibleItems.map((item) => {
 			return /* @__PURE__ */ jsxs("button", {
 				type: "button",
@@ -1270,41 +1271,22 @@ function SdkBottomNav({ navItems, currentSlug, onNavigate, appDefinitionId = 0,
 			className: `flex flex-1 flex-col items-center justify-center gap-0.5 py-2 text-[10px] font-medium transition-colors ${overflowItems.some((item) => isInSection(item, currentSlug)) ? "text-primary" : "text-muted-foreground"}`,
 			children: [/* @__PURE__ */ jsx(Ellipsis, { className: "size-5" }), /* @__PURE__ */ jsx("span", { children: t("nav_more") })]
 		})]
-	}), moreOpen && /* @__PURE__ */ jsxs("div", {
-		className: "fixed inset-0 z-50 flex flex-col",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex-1 bg-black/50",
-			onClick: () => setMoreOpen(false),
-			"aria-hidden": "true"
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "bg-sidebar rounded-t-2xl pb-[env(safe-area-inset-bottom)]",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between px-4 pt-4 pb-2",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-foreground text-sm font-semibold",
-					children: t("nav_more")
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => setMoreOpen(false),
-					className: "text-muted-foreground hover:bg-sidebar-accent flex items-center justify-center rounded-full p-1",
-					"aria-label": t("nav_close"),
-					children: /* @__PURE__ */ jsx(X, { className: "size-5" })
-				})]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "px-2 pb-4",
-				children: overflowItems.map((item) => {
-					return /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onClick: () => handleItemClick(item),
-						className: `flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${isInSection(item, currentSlug) ? "bg-sidebar-primary text-sidebar-primary-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent"}`,
-						children: [/* @__PURE__ */ jsx(RepIcon, {
-							name: item.icon || "file",
-							className: "size-5"
-						}), /* @__PURE__ */ jsx("span", { children: translateNavLabel(shellApi, item.slug, item.label) })]
-					}, item.id ?? item.slug ?? item.label);
-				})
-			})]
-		})]
+	}), /* @__PURE__ */ jsx(MobileBottomSheet, {
+		open: moreOpen,
+		onOpenChange: setMoreOpen,
+		title: t("nav_more"),
+		surface: "sidebar",
+		children: overflowItems.map((item) => {
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => handleItemClick(item),
+				className: `flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${isInSection(item, currentSlug) ? "bg-sidebar-primary text-sidebar-primary-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent"}`,
+				children: [/* @__PURE__ */ jsx(RepIcon, {
+					name: item.icon || "file",
+					className: "size-5"
+				}), /* @__PURE__ */ jsx("span", { children: translateNavLabel(shellApi, item.slug, item.label) })]
+			}, item.id ?? item.slug ?? item.label);
+		})
 	})] });
 }
 //#endregion
@@ -1580,7 +1562,7 @@ function SdkHeader({ mobileTabs, currentSlug, title, onBack, onNavigate, onLogou
 					icon: ChevronLeft,
 					"aria-label": t("nav_back"),
 					onClick: onBack,
-					className: "-ml-1 flex-none"
+					className: "border-border/60 bg-background/70 -ml-1 flex-none rounded-full border shadow-sm backdrop-blur-md transition-transform active:scale-95 [&_svg]:size-5"
 				}) : null,
 				resolvedTitle ? /* @__PURE__ */ jsx("h1", {
 					className: "text-sidebar-foreground min-w-0 flex-1 truncate text-[17px] leading-tight font-semibold tracking-[-0.01em]",