@fluid-app/portal-sdk 0.1.443 → 0.1.445

package/dist/index.cjs

@@ -90,6 +90,7 @@ let tailwind_merge = require("tailwind-merge");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let class_variance_authority = require("class-variance-authority");
 let react_dom_client = require("react-dom/client");
+let _fluid_app_ui_components_components_MobileBottomSheet = require("@fluid-app/ui-components/components/MobileBottomSheet");
 //#region src/types/page-template.ts
 /**
 * Built-in page category IDs
@@ -953,12 +954,12 @@ function AppShellLayout({ sidebarContent, headerContent, children, sidebarHeader
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SidebarInset, {
 					className: "flex flex-1 flex-col overflow-hidden",
 					children: [headerContent, /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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
 						})
 					})]
@@ -1252,7 +1253,7 @@ function SdkBottomNav({ navItems, currentSlug, onNavigate, appDefinitionId = 0,
 		setMoreOpen(false);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("button", {
 				type: "button",
@@ -1272,41 +1273,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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Ellipsis, { className: "size-5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("nav_more") })]
 		})]
-	}), moreOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "fixed inset-0 z-50 flex flex-col",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex-1 bg-black/50",
-			onClick: () => setMoreOpen(false),
-			"aria-hidden": "true"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "bg-sidebar rounded-t-2xl pb-[env(safe-area-inset-bottom)]",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center justify-between px-4 pt-4 pb-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-foreground text-sm font-semibold",
-					children: t("nav_more")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-5" })
-				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "px-2 pb-4",
-				children: overflowItems.map((item) => {
-					return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(RepIcon, {
-							name: item.icon || "file",
-							className: "size-5"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: translateNavLabel(shellApi, item.slug, item.label) })]
-					}, item.id ?? item.slug ?? item.label);
-				})
-			})]
-		})]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_components_components_MobileBottomSheet.MobileBottomSheet, {
+		open: moreOpen,
+		onOpenChange: setMoreOpen,
+		title: t("nav_more"),
+		surface: "sidebar",
+		children: overflowItems.map((item) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(RepIcon, {
+					name: item.icon || "file",
+					className: "size-5"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: translateNavLabel(shellApi, item.slug, item.label) })]
+			}, item.id ?? item.slug ?? item.label);
+		})
 	})] });
 }
 //#endregion
@@ -1582,7 +1564,7 @@ function SdkHeader({ mobileTabs, currentSlug, title, onBack, onNavigate, onLogou
 					icon: lucide_react.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__ */ (0, react_jsx_runtime.jsx)("h1", {
 					className: "text-sidebar-foreground min-w-0 flex-1 truncate text-[17px] leading-tight font-semibold tracking-[-0.01em]",