@fluid-app/portal-sdk 0.1.56 → 0.1.57

package/dist/{src-DdlLVUFj.cjs → src-D1poJLOQ.cjs}

@@ -1,11 +1,12 @@
 const require_chunk = require("./chunk-DAgNkxik.cjs");
 const require_src = require("./src-DqIS-4ns.cjs");
+const require_ScreenHeaderContext = require("./ScreenHeaderContext-eyKPyDoQ.cjs");
 const require_dist$3 = require("./dist-NpiIdjkL.cjs");
 const require_es = require("./es-qN_AsxTa.cjs");
-const require_dist$4 = require("./dist-CSYoMydt.cjs");
-const require_src$1 = require("./src-B7MRMtgx.cjs");
-const require_products = require("./products-B3q5DFx1.cjs");
-const require_dist$5 = require("./dist-DxvUzsnh.cjs");
+const require_dist$4 = require("./dist-Cs6PV1Tf.cjs");
+const require_src$1 = require("./src-BYyxE-aF.cjs");
+const require_products = require("./products-BtHCYNv6.cjs");
+const require_dist$5 = require("./dist-oTn1xy1Z.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let _tanstack_react_query = require("@tanstack/react-query");
@@ -14,86 +15,6 @@ let zod = require("zod");
 zod = require_chunk.__toESM(zod);
 let lucide_react = require("lucide-react");
 let react_dom = require("react-dom");
-//#region ../react/src/shell/ScreenHeaderContext.tsx
-/**
-* Split into separate read/write contexts so that components calling
-* useScreenHeaderActions (writers) don't re-render when the actions
-* state changes — only the ScreenHeader (reader) re-renders.
-*/
-const ScreenHeaderWriteContext = (0, react.createContext)(null);
-const ScreenHeaderReadContext = (0, react.createContext)(null);
-const ScreenHeaderBreadcrumbsWriteContext = (0, react.createContext)(null);
-const ScreenHeaderBreadcrumbsReadContext = (0, react.createContext)(null);
-function ScreenHeaderProvider({ children }) {
-	const [actions, setActions] = (0, react.useState)(null);
-	const [breadcrumbs, setBreadcrumbs] = (0, react.useState)(null);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScreenHeaderWriteContext.Provider, {
-		value: setActions,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScreenHeaderReadContext.Provider, {
-			value: actions,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScreenHeaderBreadcrumbsWriteContext.Provider, {
-				value: setBreadcrumbs,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScreenHeaderBreadcrumbsReadContext.Provider, {
-					value: breadcrumbs,
-					children
-				})
-			})
-		})
-	});
-}
-/**
-* Sets actions to display in the ScreenHeader.
-* Returns `true` if inside a ScreenHeaderProvider (i.e., in the portal shell),
-* `false` otherwise. Pages can use this boolean to conditionally skip
-* rendering their own PageHeader.
-*
-* Cleans up actions on unmount so navigating away doesn't leave stale actions.
-*/
-function useScreenHeaderActions(actions) {
-	const setActions = (0, react.useContext)(ScreenHeaderWriteContext);
-	const setActionsRef = (0, react.useRef)(setActions);
-	setActionsRef.current = setActions;
-	(0, react.useEffect)(() => {
-		if (!setActions) return;
-		setActions(actions);
-	}, [actions, setActions]);
-	(0, react.useEffect)(() => {
-		return () => setActionsRef.current?.(null);
-	}, []);
-	return setActions !== null;
-}
-/**
-* Sets breadcrumbs to display in the ScreenHeader (in place of the plain title).
-* Returns `true` if inside a ScreenHeaderProvider (i.e., in the portal shell),
-* `false` otherwise.
-*
-* Cleans up breadcrumbs on unmount so navigating away doesn't leave stale breadcrumbs.
-*/
-function useScreenHeaderBreadcrumbs(breadcrumbs) {
-	const setBreadcrumbs = (0, react.useContext)(ScreenHeaderBreadcrumbsWriteContext);
-	const setBreadcrumbsRef = (0, react.useRef)(setBreadcrumbs);
-	setBreadcrumbsRef.current = setBreadcrumbs;
-	(0, react.useEffect)(() => {
-		if (!setBreadcrumbs) return;
-		setBreadcrumbs(breadcrumbs);
-	}, [breadcrumbs, setBreadcrumbs]);
-	(0, react.useEffect)(() => {
-		return () => setBreadcrumbsRef.current?.(null);
-	}, []);
-	return setBreadcrumbs !== null;
-}
-/**
-* Reads the current screen header actions and breadcrumbs. Used internally by ScreenHeader.
-*/
-function useScreenHeaderContext() {
-	const actions = (0, react.useContext)(ScreenHeaderReadContext);
-	const breadcrumbs = (0, react.useContext)(ScreenHeaderBreadcrumbsReadContext);
-	return {
-		actions: actions ?? null,
-		breadcrumbs: breadcrumbs ?? null
-	};
-}
-//#endregion
 //#region ../../shareables/core/src/context.tsx
 const ShareablesCoreContext = (0, react.createContext)(null);
 function ShareablesCoreProvider({ config, children }) {
@@ -587,6 +508,13 @@ const PAGE_SIZE$3 = 24;
 const GRID_CLASS$3 = "grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4";
 function ProductsScreen({ countryCode, onNavigate }) {
 	const client = useShareablesClient();
+	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbList, {
+		className: "text-lg",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
+			className: "font-semibold",
+			children: "Products"
+		}) })
+	}) }), []));
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [debouncedSearch, setDebouncedSearch] = (0, react.useState)("");
 	const [sortDesc, setSortDesc] = (0, react.useState)(false);
@@ -666,10 +594,6 @@ function ProductsScreen({ countryCode, onNavigate }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-				className: "text-foreground text-lg font-semibold",
-				children: "Products"
-			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-3",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1162,7 +1086,7 @@ var MarketingAssetsGrid_default = react.default.memo(MarketingAssetsGrid);
 //#region ../../shareables/ui/src/components/screens/ProductDetailScreen.tsx
 function ProductDetailScreen({ productId, countryCode, onNavigate, onBack }) {
 	const client = useShareablesClient();
-	const { showToast, onFileDownload } = useShareablesUI();
+	const { navigate, showToast, onFileDownload } = useShareablesUI();
 	const [activeTab, setActiveTab] = (0, react.useState)("All");
 	const [isDescriptionExpanded, setIsDescriptionExpanded] = (0, react.useState)(false);
 	const { data: productResponse, isLoading: isLoadingProduct } = (0, _tanstack_react_query.useQuery)({
@@ -1181,7 +1105,30 @@ function ProductDetailScreen({ productId, countryCode, onNavigate, onBack }) {
 	const product = productResponse?.product;
 	const displayTitle = product?.title || "";
 	const displayImage = product?.image_url || "";
-	const strippedDescription = stripTags(product?.description || product?.stripped || "");
+	const displayDescription = product?.description || product?.stripped || "";
+	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: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbLink, {
+				href: "#",
+				onClick: (e) => {
+					e.preventDefault();
+					(onBack ?? (() => navigate("products")))();
+				},
+				children: "Products"
+			}) }),
+			/* @__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: displayTitle || "Product"
+			}) })
+		]
+	}) }), [
+		displayTitle,
+		onBack,
+		navigate
+	]));
+	const strippedDescription = stripTags(displayDescription);
 	const shouldShowReadMore = strippedDescription.length > 150;
 	const displayPrice = product?.display_price || (product?.price ? `$${product.price}` : void 0);
 	const filteredMediaItems = (productMediaResponse?.media ?? []).filter((item) => {
@@ -1228,23 +1175,9 @@ function ProductDetailScreen({ productId, countryCode, onNavigate, onBack }) {
 			children: "Product not found or failed to load."
 		})
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "flex flex-col gap-4 px-4 py-4 md:px-10 md:py-6",
-		children: [onBack && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
-			className: "flex items-center gap-1.5 text-sm",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				onClick: onBack,
-				className: "text-muted-foreground hover:text-foreground",
-				children: "Products"
-			}), displayTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-muted-foreground",
-				children: "/"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-foreground font-medium",
-				children: displayTitle
-			})] })]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "mx-auto flex w-full max-w-480 flex-col gap-6 md:h-[calc(100vh-140px)] md:flex-row",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "aspect-square w-full md:aspect-auto md:h-full",
@@ -1329,7 +1262,7 @@ function ProductDetailScreen({ productId, countryCode, onNavigate, onBack }) {
 					})
 				]
 			})]
-		})]
+		})
 	});
 }
 //#endregion
@@ -1347,6 +1280,18 @@ function MediaListingScreen({ onNavigate }) {
 	const client = useShareablesClient();
 	const repContext = useRepContext();
 	const { navigate } = useShareablesUI();
+	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+		onClick: () => navigate("media/new"),
+		size: "sm",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "mr-1 h-4 w-4" }), "Add Media"]
+	}), [navigate]));
+	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbList, {
+		className: "text-lg",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
+			className: "font-semibold",
+			children: "Media"
+		}) })
+	}) }), []));
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [debouncedSearch, setDebouncedSearch] = (0, react.useState)("");
 	const [sortDesc, setSortDesc] = (0, react.useState)(false);
@@ -1416,10 +1361,6 @@ function MediaListingScreen({ onNavigate }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-				className: "text-foreground text-lg font-semibold",
-				children: "Media"
-			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-3",
 				children: [
@@ -1454,11 +1395,6 @@ function MediaListingScreen({ onNavigate }) {
 							title: "Grid view",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LayoutGrid, { className: "h-4 w-4" })
 						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-						onClick: () => navigate("media/new"),
-						size: "sm",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "mr-1 h-4 w-4" }), "Add Media"]
 					})
 				]
 			}),
@@ -1527,7 +1463,7 @@ function getBadgeLabel(kind) {
 function MediaDetailScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 	const client = useShareablesClient();
 	const repContext = useRepContext();
-	const { showToast, onFileDownload } = useShareablesUI();
+	const { navigate, showToast, onFileDownload } = useShareablesUI();
 	const [isDescriptionExpanded, setIsDescriptionExpanded] = (0, react.useState)(false);
 	const { data: mediaResponse, isLoading } = (0, _tanstack_react_query.useQuery)({
 		queryKey: shareablesKeys.media.detail(Number(mediaId), repContext),
@@ -1539,6 +1475,28 @@ function MediaDetailScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 	const displayImage = mediaItem?.image_url || "";
 	const displayVideo = mediaItem?.video_url || "";
 	const isVideo = mediaItem?.kind === "video" && !!displayVideo;
+	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: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbLink, {
+				href: "#",
+				onClick: (e) => {
+					e.preventDefault();
+					(onBack ?? (() => navigate("media")))();
+				},
+				children: "Media"
+			}) }),
+			/* @__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: displayTitle || "Media"
+			}) })
+		]
+	}) }), [
+		displayTitle,
+		onBack,
+		navigate
+	]));
 	const badgeLabel = getBadgeLabel(mediaItem?.kind ?? null);
 	const strippedDescription = stripTags(mediaItem?.description?.body || mediaItem?.stripped || "");
 	const shouldShowReadMore = strippedDescription.length > 150;
@@ -1570,23 +1528,9 @@ function MediaDetailScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 			children: "Media not found or failed to load."
 		})
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "flex flex-col gap-4 px-4 py-4 md:px-10 md:py-6",
-		children: [onBack && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
-			className: "flex items-center gap-1.5 text-sm",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				onClick: onBack,
-				className: "text-muted-foreground hover:text-foreground",
-				children: "Media"
-			}), displayTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-muted-foreground",
-				children: "/"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-foreground font-medium",
-				children: displayTitle
-			})] })]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "mx-auto flex w-full max-w-480 flex-col gap-6 md:h-[calc(100vh-140px)] md:flex-row",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "aspect-square w-full md:aspect-auto md:h-full",
@@ -1641,7 +1585,7 @@ function MediaDetailScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 					]
 				})
 			})]
-		})]
+		})
 	});
 }
 //#endregion
@@ -6551,8 +6495,26 @@ function FilePreview({ result, mediaType }) {
 	});
 }
 function MediaCreateScreen({ onNavigate, onBack }) {
-	const { showToast, filePickerClient } = useShareablesUI();
+	const { navigate, showToast, filePickerClient } = useShareablesUI();
 	const user = useShareablesUser();
+	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: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbLink, {
+				href: "#",
+				onClick: (e) => {
+					e.preventDefault();
+					(onBack ?? (() => navigate("media")))();
+				},
+				children: "Media"
+			}) }),
+			/* @__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: "New Media"
+			}) })
+		]
+	}) }), [onBack, navigate]));
 	const [title, setTitle] = (0, react.useState)("");
 	const [description, setDescription] = (0, react.useState)("");
 	const [active, setActive] = (0, react.useState)(true);
@@ -6644,123 +6606,101 @@ function MediaCreateScreen({ onNavigate, onBack }) {
 	}, [filePickerClient, showToast]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col gap-4 px-4 py-4 md:px-10 md:py-6",
-		children: [
-			onBack && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
-				className: "flex items-center gap-1.5 text-sm",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: onBack,
-						className: "text-muted-foreground hover:text-foreground",
-						children: "Media"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-muted-foreground",
-						children: "/"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-foreground font-medium",
-						children: "Add Media"
-					})
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mx-auto flex w-full max-w-lg flex-col gap-6",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-						className: "text-foreground text-[26px] leading-[1.2] font-semibold",
-						children: "Add Media"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mx-auto flex w-full max-w-lg flex-col gap-6",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+					className: "text-foreground text-[26px] leading-[1.2] font-semibold",
+					children: "Add Media"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						className: "text-foreground text-sm font-medium",
+						children: "File"
+					}), selectedResult && mediaType ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex flex-col gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-							className: "text-foreground text-sm font-medium",
-							children: "File"
-						}), selectedResult && mediaType ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex flex-col gap-2",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePreview, {
-								result: selectedResult,
-								mediaType
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-								onClick: () => setIsPickerOpen(true),
-								variant: "outline",
-								size: "sm",
-								className: "w-fit",
-								children: "Change File"
-							})]
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePreview, {
+							result: selectedResult,
+							mediaType
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
 							onClick: () => setIsPickerOpen(true),
 							variant: "outline",
-							className: "flex h-32 w-full flex-col items-center justify-center gap-2 border-dashed",
-							disabled: !filePickerClient,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "text-muted-foreground h-6 w-6" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-muted-foreground text-sm",
-								children: "Select File"
-							})]
+							size: "sm",
+							className: "w-fit",
+							children: "Change File"
 						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex flex-col gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-							className: "text-foreground text-sm font-medium",
-							children: ["Title ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-red-500",
-								children: "*"
-							})]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
-							value: title,
-							onChange: (e) => setTitle(e.target.value),
-							placeholder: "Enter media title",
-							required: true
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+						onClick: () => setIsPickerOpen(true),
+						variant: "outline",
+						className: "flex h-32 w-full flex-col items-center justify-center gap-2 border-dashed",
+						disabled: !filePickerClient,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "text-muted-foreground h-6 w-6" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-muted-foreground text-sm",
+							children: "Select File"
 						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex flex-col gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-							className: "text-foreground text-sm font-medium",
-							children: ["Description ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-red-500",
-								children: "*"
-							})]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-							value: description,
-							onChange: (e) => setDescription(e.target.value),
-							placeholder: "Enter description",
-							required: true,
-							rows: 3,
-							className: "border-input bg-background text-foreground placeholder:text-muted-foreground rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "text-foreground text-sm font-medium",
+						children: ["Title ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-red-500",
+							children: "*"
 						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-							type: "checkbox",
-							checked: active,
-							onChange: (e) => setActive(e.target.checked),
-							className: "h-4 w-4 rounded"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-foreground text-sm font-medium",
-							children: "Active"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
+						value: title,
+						onChange: (e) => setTitle(e.target.value),
+						placeholder: "Enter media title",
+						required: true
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "text-foreground text-sm font-medium",
+						children: ["Description ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-red-500",
+							children: "*"
 						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-						onClick: handleSave,
-						disabled: isCreating,
-						className: "bg-foreground text-background hover:bg-foreground/70 flex h-10 w-full items-center justify-center rounded-lg px-4 transition-all",
-						children: isCreating ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Save Media"
-					})
-				]
-			}),
-			filePickerContextValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerProvider, {
-				value: filePickerContextValue,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePicker, {
-					open: isPickerOpen,
-					onFilesSelected: handleFilesSelected,
-					onClose: () => setIsPickerOpen(false),
-					config: { maxFiles: 1 }
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+						value: description,
+						onChange: (e) => setDescription(e.target.value),
+						placeholder: "Enter description",
+						required: true,
+						rows: 3,
+						className: "border-input bg-background text-foreground placeholder:text-muted-foreground rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "checkbox",
+						checked: active,
+						onChange: (e) => setActive(e.target.checked),
+						className: "h-4 w-4 rounded"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-foreground text-sm font-medium",
+						children: "Active"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+					onClick: handleSave,
+					disabled: isCreating,
+					className: "bg-foreground text-background hover:bg-foreground/70 flex h-10 w-full items-center justify-center rounded-lg px-4 transition-all",
+					children: isCreating ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Save Media"
 				})
+			]
+		}), filePickerContextValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerProvider, {
+			value: filePickerContextValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePicker, {
+				open: isPickerOpen,
+				onFilesSelected: handleFilesSelected,
+				onClose: () => setIsPickerOpen(false),
+				config: { maxFiles: 1 }
 			})
-		]
+		})]
 	});
 }
 //#endregion
@@ -7004,12 +6944,12 @@ function PlaylistsListingScreen(_props) {
 	const client = useShareablesClient();
 	const { navigate, showToast, user, onToggleFavorite, onDeletePlaylist } = useShareablesUI();
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
-	useScreenHeaderActions((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 		onClick: () => navigate("playlists/new"),
 		size: "sm",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "mr-1 h-4 w-4" }), "Create Playlist"]
 	}), [navigate]));
-	useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbList, {
+	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbList, {
 		className: "text-lg",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
 			className: "font-semibold",
@@ -7499,7 +7439,7 @@ function PlaylistDetailScreen({ playlistId, onNavigate }) {
 	const playlist = playlistResponse?.playlist;
 	const canEdit = playlist?.user_id === user?.id;
 	const displayTitle = playlist?.title || "";
-	useScreenHeaderActions((0, react.useMemo)(() => {
+	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => {
 		if (!canEdit) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-center gap-2",
@@ -7521,7 +7461,7 @@ function PlaylistDetailScreen({ playlistId, onNavigate }) {
 		playlistId,
 		onDeletePlaylist
 	]));
-	useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.BreadcrumbList, {
+	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: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbLink, {
@@ -7861,7 +7801,7 @@ function PlaylistFormHeader({ playlistId, isEditMode, onSubmit, isSaving }) {
 			setIsDeleteOpen(false);
 		}
 	};
-	useScreenHeaderActions((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-2",
 		children: [playlistId && onDeletePlaylist && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 			variant: "destructive",
@@ -7886,7 +7826,7 @@ function PlaylistFormHeader({ playlistId, isEditMode, onSubmit, isSaving }) {
 		isSaving,
 		onSubmit
 	]));
-	useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.BreadcrumbList, {
+	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: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbLink, {
@@ -8822,6 +8762,13 @@ const DEFAULT_IMAGE = "https://assets.fluid.app/fluid-admin/images/we-commerce/w
 function FilesListingScreen({ onNavigate }) {
 	const client = useShareablesClient();
 	const renderImage = useRenderImage();
+	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbList, {
+		className: "text-lg",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
+			className: "font-semibold",
+			children: "Files"
+		}) })
+	}) }), []));
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [debouncedSearch, setDebouncedSearch] = (0, react.useState)("");
 	const observerTarget = (0, react.useRef)(null);
@@ -9049,12 +8996,6 @@ Object.defineProperty(exports, "ProductsApp", {
 		return ProductsApp;
 	}
 });
-Object.defineProperty(exports, "ScreenHeaderProvider", {
-	enumerable: true,
-	get: function() {
-		return ScreenHeaderProvider;
-	}
-});
 Object.defineProperty(exports, "ShareablesApp", {
 	enumerable: true,
 	get: function() {
@@ -9073,11 +9014,5 @@ Object.defineProperty(exports, "ShareablesUIProvider", {
 		return ShareablesUIProvider;
 	}
 });
-Object.defineProperty(exports, "useScreenHeaderContext", {
-	enumerable: true,
-	get: function() {
-		return useScreenHeaderContext;
-	}
-});
 
-//# sourceMappingURL=src-DdlLVUFj.cjs.map
+//# sourceMappingURL=src-D1poJLOQ.cjs.map