@fluid-app/portal-sdk 0.1.56 → 0.1.57

package/dist/{src-CEouYGbQ.mjs → src-CzK-t4_m.mjs}

@@ -1,10 +1,11 @@
 import { $ as DropdownMenuSubTrigger, A as SelectContent, B as FormControl, Ct as CardContent, Dt as Checkbox, G as Label, H as FormItem, I as Input, J as DropdownMenuItem, Jt as BreadcrumbLink, K as DropdownMenu, Kt as Breadcrumb, M as SelectTrigger, N as SelectValue, O as Separator, Q as DropdownMenuSubContent, Qt as Badge, U as FormLabel, V as FormField, W as FormMessage, X as DropdownMenuSeparator, Xt as BreadcrumbPage, Yt as BreadcrumbList, Z as DropdownMenuSub, Zt as BreadcrumbSeparator, at as DialogFooter, b as Slider, ct as DialogPortal, dn as Button, dt as PopoverContent, et as DropdownMenuTrigger, fn as Content, ft as PopoverTrigger, g as Switch, i as TooltipTrigger, it as DialogDescription, j as SelectItem, k as Select, lt as DialogTitle, n as TooltipContent, ot as DialogHeader, q as DropdownMenuContent, qt as BreadcrumbItem, r as TooltipProvider, rt as DialogContent, st as DialogOverlay, t as Tooltip, tt as Dialog, ut as Popover, v as Spinner, vn as useZodForm, x as Skeleton, xt as Card, yn as cn, z as Form } from "./src-Bh-9OV8i.mjs";
+import { n as useScreenHeaderActions, r as useScreenHeaderBreadcrumbs } from "./ScreenHeaderContext-CrdfLGKk.mjs";
 import { a as useEditor, o as Placeholder, r as EditorContent, t as StarterKit } from "./dist-CMGXkSgZ.mjs";
 import { t as useDropzone } from "./es-CrIkZTQ3.mjs";
-import { n as TextAlign, t as Underline } from "./dist-CayuD99K.mjs";
-import { a as createMedia, c as addItemToPlaylist, d as getPlaylists, f as removeItemsFromPlaylist, i as getFileResources, l as createPlaylist, n as createShareLink, o as getMedia, p as updatePlaylist, r as getProductMedia, s as getMediaById, u as getPlaylistById } from "./src-MTAap-Xx.mjs";
-import { n as listProducts, t as getProduct } from "./products-Dkwd_Bh0.mjs";
-import { a as verticalListSortingStrategy, c as PointerSensor, d as useSensors, f as CSS, i as useSortable, l as closestCenter, n as arrayMove, o as DndContext, r as sortableKeyboardCoordinates, s as KeyboardSensor, t as SortableContext, u as useSensor } from "./sortable.esm-DFTEWOHN.mjs";
+import { n as TextAlign, t as Underline } from "./dist-Cl4FsM3V.mjs";
+import { a as createMedia, c as addItemToPlaylist, d as getPlaylists, f as removeItemsFromPlaylist, i as getFileResources, l as createPlaylist, n as createShareLink, o as getMedia, p as updatePlaylist, r as getProductMedia, s as getMediaById, u as getPlaylistById } from "./src-sa7B0kBg.mjs";
+import { n as listProducts, t as getProduct } from "./products-DCO1hF_Q.mjs";
+import { a as verticalListSortingStrategy, c as PointerSensor, d as useSensors, f as CSS, i as useSortable, l as closestCenter, n as arrayMove, o as DndContext, r as sortableKeyboardCoordinates, s as KeyboardSensor, t as SortableContext, u as useSensor } from "./sortable.esm-DreCqRxJ.mjs";
 import React, { PureComponent, createContext, createRef, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -12,86 +13,6 @@ import * as z$1 from "zod";
 import { z } from "zod";
 import { AlertTriangleIcon, AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowDownZA, ArrowRightIcon, ArrowUpAZ, ArrowUpDown, ArrowUpDownIcon, ArrowUpIcon, ArrowUpRight, CheckIcon, ChevronDownIcon, CirclePlay, CloudIcon, Copy, CropIcon, Download, DownloadIcon, EllipsisVerticalIcon, FileIcon, FileImage, FileText, FolderIcon, FolderPlusIcon, GripVertical, Heart, Image, ImageIcon, ImagesIcon, LaptopIcon, LayersIcon, LayoutGrid, LayoutGridIcon, LinkIcon, List, ListIcon, ListMusic, ListOrdered, LoaderIcon, Maximize, Menu, MinusIcon, MoreHorizontal, MoreVertical, MoveHorizontalIcon, Package, Pencil, Play, Plus, PlusIcon, RotateCwIcon, Search, SearchIcon, ShoppingBag, SlidersHorizontalIcon, Trash2, Trash2Icon, TypeIcon, Upload, UserIcon, Video, VideoIcon, X, XIcon } from "lucide-react";
 import { createPortal } from "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 = createContext(null);
-const ScreenHeaderReadContext = createContext(null);
-const ScreenHeaderBreadcrumbsWriteContext = createContext(null);
-const ScreenHeaderBreadcrumbsReadContext = createContext(null);
-function ScreenHeaderProvider({ children }) {
-	const [actions, setActions] = useState(null);
-	const [breadcrumbs, setBreadcrumbs] = useState(null);
-	return /* @__PURE__ */ jsx(ScreenHeaderWriteContext.Provider, {
-		value: setActions,
-		children: /* @__PURE__ */ jsx(ScreenHeaderReadContext.Provider, {
-			value: actions,
-			children: /* @__PURE__ */ jsx(ScreenHeaderBreadcrumbsWriteContext.Provider, {
-				value: setBreadcrumbs,
-				children: /* @__PURE__ */ 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 = useContext(ScreenHeaderWriteContext);
-	const setActionsRef = useRef(setActions);
-	setActionsRef.current = setActions;
-	useEffect(() => {
-		if (!setActions) return;
-		setActions(actions);
-	}, [actions, setActions]);
-	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 = useContext(ScreenHeaderBreadcrumbsWriteContext);
-	const setBreadcrumbsRef = useRef(setBreadcrumbs);
-	setBreadcrumbsRef.current = setBreadcrumbs;
-	useEffect(() => {
-		if (!setBreadcrumbs) return;
-		setBreadcrumbs(breadcrumbs);
-	}, [breadcrumbs, setBreadcrumbs]);
-	useEffect(() => {
-		return () => setBreadcrumbsRef.current?.(null);
-	}, []);
-	return setBreadcrumbs !== null;
-}
-/**
-* Reads the current screen header actions and breadcrumbs. Used internally by ScreenHeader.
-*/
-function useScreenHeaderContext() {
-	const actions = useContext(ScreenHeaderReadContext);
-	const breadcrumbs = useContext(ScreenHeaderBreadcrumbsReadContext);
-	return {
-		actions: actions ?? null,
-		breadcrumbs: breadcrumbs ?? null
-	};
-}
-//#endregion
 //#region ../../shareables/core/src/context.tsx
 const ShareablesCoreContext = createContext(null);
 function ShareablesCoreProvider({ config, children }) {
@@ -584,6 +505,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();
+	useScreenHeaderBreadcrumbs(useMemo(() => /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, {
+		className: "text-lg",
+		children: /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, {
+			className: "font-semibold",
+			children: "Products"
+		}) })
+	}) }), []));
 	const [searchTerm, setSearchTerm] = useState("");
 	const [debouncedSearch, setDebouncedSearch] = useState("");
 	const [sortDesc, setSortDesc] = useState(false);
@@ -663,10 +591,6 @@ function ProductsScreen({ countryCode, onNavigate }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
 		children: [
-			/* @__PURE__ */ jsx("h1", {
-				className: "text-foreground text-lg font-semibold",
-				children: "Products"
-			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-3",
 				children: [/* @__PURE__ */ jsxs("div", {
@@ -1159,7 +1083,7 @@ var MarketingAssetsGrid_default = React.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] = useState("All");
 	const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
 	const { data: productResponse, isLoading: isLoadingProduct } = useQuery({
@@ -1178,7 +1102,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 || "";
+	useScreenHeaderBreadcrumbs(useMemo(() => /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, {
+		className: "text-lg",
+		children: [
+			/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, {
+				href: "#",
+				onClick: (e) => {
+					e.preventDefault();
+					(onBack ?? (() => navigate("products")))();
+				},
+				children: "Products"
+			}) }),
+			/* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+			/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(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) => {
@@ -1225,23 +1172,9 @@ function ProductDetailScreen({ productId, countryCode, onNavigate, onBack }) {
 			children: "Product not found or failed to load."
 		})
 	});
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		className: "flex flex-col gap-4 px-4 py-4 md:px-10 md:py-6",
-		children: [onBack && /* @__PURE__ */ jsxs("nav", {
-			className: "flex items-center gap-1.5 text-sm",
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onBack,
-				className: "text-muted-foreground hover:text-foreground",
-				children: "Products"
-			}), displayTitle && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground",
-				children: "/"
-			}), /* @__PURE__ */ jsx("span", {
-				className: "text-foreground font-medium",
-				children: displayTitle
-			})] })]
-		}), /* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ 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__ */ jsx("div", {
 				className: "aspect-square w-full md:aspect-auto md:h-full",
@@ -1326,7 +1259,7 @@ function ProductDetailScreen({ productId, countryCode, onNavigate, onBack }) {
 					})
 				]
 			})]
-		})]
+		})
 	});
 }
 //#endregion
@@ -1344,6 +1277,18 @@ function MediaListingScreen({ onNavigate }) {
 	const client = useShareablesClient();
 	const repContext = useRepContext();
 	const { navigate } = useShareablesUI();
+	useScreenHeaderActions(useMemo(() => /* @__PURE__ */ jsxs(Button, {
+		onClick: () => navigate("media/new"),
+		size: "sm",
+		children: [/* @__PURE__ */ jsx(Plus, { className: "mr-1 h-4 w-4" }), "Add Media"]
+	}), [navigate]));
+	useScreenHeaderBreadcrumbs(useMemo(() => /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, {
+		className: "text-lg",
+		children: /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, {
+			className: "font-semibold",
+			children: "Media"
+		}) })
+	}) }), []));
 	const [searchTerm, setSearchTerm] = useState("");
 	const [debouncedSearch, setDebouncedSearch] = useState("");
 	const [sortDesc, setSortDesc] = useState(false);
@@ -1413,10 +1358,6 @@ function MediaListingScreen({ onNavigate }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
 		children: [
-			/* @__PURE__ */ jsx("h1", {
-				className: "text-foreground text-lg font-semibold",
-				children: "Media"
-			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-3",
 				children: [
@@ -1451,11 +1392,6 @@ function MediaListingScreen({ onNavigate }) {
 							title: "Grid view",
 							children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" })
 						})]
-					}),
-					/* @__PURE__ */ jsxs(Button, {
-						onClick: () => navigate("media/new"),
-						size: "sm",
-						children: [/* @__PURE__ */ jsx(Plus, { className: "mr-1 h-4 w-4" }), "Add Media"]
 					})
 				]
 			}),
@@ -1524,7 +1460,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] = useState(false);
 	const { data: mediaResponse, isLoading } = useQuery({
 		queryKey: shareablesKeys.media.detail(Number(mediaId), repContext),
@@ -1536,6 +1472,28 @@ function MediaDetailScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 	const displayImage = mediaItem?.image_url || "";
 	const displayVideo = mediaItem?.video_url || "";
 	const isVideo = mediaItem?.kind === "video" && !!displayVideo;
+	useScreenHeaderBreadcrumbs(useMemo(() => /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, {
+		className: "text-lg",
+		children: [
+			/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, {
+				href: "#",
+				onClick: (e) => {
+					e.preventDefault();
+					(onBack ?? (() => navigate("media")))();
+				},
+				children: "Media"
+			}) }),
+			/* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+			/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(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;
@@ -1567,23 +1525,9 @@ function MediaDetailScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 			children: "Media not found or failed to load."
 		})
 	});
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		className: "flex flex-col gap-4 px-4 py-4 md:px-10 md:py-6",
-		children: [onBack && /* @__PURE__ */ jsxs("nav", {
-			className: "flex items-center gap-1.5 text-sm",
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onBack,
-				className: "text-muted-foreground hover:text-foreground",
-				children: "Media"
-			}), displayTitle && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground",
-				children: "/"
-			}), /* @__PURE__ */ jsx("span", {
-				className: "text-foreground font-medium",
-				children: displayTitle
-			})] })]
-		}), /* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ 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__ */ jsx("div", {
 				className: "aspect-square w-full md:aspect-auto md:h-full",
@@ -1638,7 +1582,7 @@ function MediaDetailScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 					]
 				})
 			})]
-		})]
+		})
 	});
 }
 //#endregion
@@ -6548,8 +6492,26 @@ function FilePreview({ result, mediaType }) {
 	});
 }
 function MediaCreateScreen({ onNavigate, onBack }) {
-	const { showToast, filePickerClient } = useShareablesUI();
+	const { navigate, showToast, filePickerClient } = useShareablesUI();
 	const user = useShareablesUser();
+	useScreenHeaderBreadcrumbs(useMemo(() => /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, {
+		className: "text-lg",
+		children: [
+			/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, {
+				href: "#",
+				onClick: (e) => {
+					e.preventDefault();
+					(onBack ?? (() => navigate("media")))();
+				},
+				children: "Media"
+			}) }),
+			/* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+			/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, {
+				className: "font-semibold",
+				children: "New Media"
+			}) })
+		]
+	}) }), [onBack, navigate]));
 	const [title, setTitle] = useState("");
 	const [description, setDescription] = useState("");
 	const [active, setActive] = useState(true);
@@ -6641,123 +6603,101 @@ function MediaCreateScreen({ onNavigate, onBack }) {
 	}, [filePickerClient, showToast]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-4 px-4 py-4 md:px-10 md:py-6",
-		children: [
-			onBack && /* @__PURE__ */ jsxs("nav", {
-				className: "flex items-center gap-1.5 text-sm",
-				children: [
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: onBack,
-						className: "text-muted-foreground hover:text-foreground",
-						children: "Media"
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-muted-foreground",
-						children: "/"
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-foreground font-medium",
-						children: "Add Media"
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "mx-auto flex w-full max-w-lg flex-col gap-6",
-				children: [
-					/* @__PURE__ */ jsx("h1", {
-						className: "text-foreground text-[26px] leading-[1.2] font-semibold",
-						children: "Add Media"
-					}),
-					/* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mx-auto flex w-full max-w-lg flex-col gap-6",
+			children: [
+				/* @__PURE__ */ jsx("h1", {
+					className: "text-foreground text-[26px] leading-[1.2] font-semibold",
+					children: "Add Media"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-foreground text-sm font-medium",
+						children: "File"
+					}), selectedResult && mediaType ? /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col gap-2",
-						children: [/* @__PURE__ */ jsx("label", {
-							className: "text-foreground text-sm font-medium",
-							children: "File"
-						}), selectedResult && mediaType ? /* @__PURE__ */ jsxs("div", {
-							className: "flex flex-col gap-2",
-							children: [/* @__PURE__ */ jsx(FilePreview, {
-								result: selectedResult,
-								mediaType
-							}), /* @__PURE__ */ jsx(Button, {
-								onClick: () => setIsPickerOpen(true),
-								variant: "outline",
-								size: "sm",
-								className: "w-fit",
-								children: "Change File"
-							})]
-						}) : /* @__PURE__ */ jsxs(Button, {
+						children: [/* @__PURE__ */ jsx(FilePreview, {
+							result: selectedResult,
+							mediaType
+						}), /* @__PURE__ */ jsx(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__ */ jsx(Upload, { className: "text-muted-foreground h-6 w-6" }), /* @__PURE__ */ jsx("span", {
-								className: "text-muted-foreground text-sm",
-								children: "Select File"
-							})]
+							size: "sm",
+							className: "w-fit",
+							children: "Change File"
 						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col gap-2",
-						children: [/* @__PURE__ */ jsxs("label", {
-							className: "text-foreground text-sm font-medium",
-							children: ["Title ", /* @__PURE__ */ jsx("span", {
-								className: "text-red-500",
-								children: "*"
-							})]
-						}), /* @__PURE__ */ jsx(Input, {
-							value: title,
-							onChange: (e) => setTitle(e.target.value),
-							placeholder: "Enter media title",
-							required: true
+					}) : /* @__PURE__ */ jsxs(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__ */ jsx(Upload, { className: "text-muted-foreground h-6 w-6" }), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground text-sm",
+							children: "Select File"
 						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col gap-2",
-						children: [/* @__PURE__ */ jsxs("label", {
-							className: "text-foreground text-sm font-medium",
-							children: ["Description ", /* @__PURE__ */ jsx("span", {
-								className: "text-red-500",
-								children: "*"
-							})]
-						}), /* @__PURE__ */ 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__ */ jsxs("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ jsxs("label", {
+						className: "text-foreground text-sm font-medium",
+						children: ["Title ", /* @__PURE__ */ jsx("span", {
+							className: "text-red-500",
+							children: "*"
 						})]
-					}),
-					/* @__PURE__ */ jsxs("label", {
-						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ jsx("input", {
-							type: "checkbox",
-							checked: active,
-							onChange: (e) => setActive(e.target.checked),
-							className: "h-4 w-4 rounded"
-						}), /* @__PURE__ */ jsx("span", {
-							className: "text-foreground text-sm font-medium",
-							children: "Active"
+					}), /* @__PURE__ */ jsx(Input, {
+						value: title,
+						onChange: (e) => setTitle(e.target.value),
+						placeholder: "Enter media title",
+						required: true
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ jsxs("label", {
+						className: "text-foreground text-sm font-medium",
+						children: ["Description ", /* @__PURE__ */ jsx("span", {
+							className: "text-red-500",
+							children: "*"
 						})]
-					}),
-					/* @__PURE__ */ jsx(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__ */ jsx(Spinner, { className: "size-4" }) : "Save Media"
-					})
-				]
-			}),
-			filePickerContextValue && /* @__PURE__ */ jsx(FilePickerProvider, {
-				value: filePickerContextValue,
-				children: /* @__PURE__ */ jsx(FilePicker, {
-					open: isPickerOpen,
-					onFilesSelected: handleFilesSelected,
-					onClose: () => setIsPickerOpen(false),
-					config: { maxFiles: 1 }
+					}), /* @__PURE__ */ 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__ */ jsxs("label", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: active,
+						onChange: (e) => setActive(e.target.checked),
+						className: "h-4 w-4 rounded"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-foreground text-sm font-medium",
+						children: "Active"
+					})]
+				}),
+				/* @__PURE__ */ jsx(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__ */ jsx(Spinner, { className: "size-4" }) : "Save Media"
 				})
+			]
+		}), filePickerContextValue && /* @__PURE__ */ jsx(FilePickerProvider, {
+			value: filePickerContextValue,
+			children: /* @__PURE__ */ jsx(FilePicker, {
+				open: isPickerOpen,
+				onFilesSelected: handleFilesSelected,
+				onClose: () => setIsPickerOpen(false),
+				config: { maxFiles: 1 }
 			})
-		]
+		})]
 	});
 }
 //#endregion
@@ -8815,6 +8755,13 @@ const DEFAULT_IMAGE = "https://assets.fluid.app/fluid-admin/images/we-commerce/w
 function FilesListingScreen({ onNavigate }) {
 	const client = useShareablesClient();
 	const renderImage = useRenderImage();
+	useScreenHeaderBreadcrumbs(useMemo(() => /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, {
+		className: "text-lg",
+		children: /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, {
+			className: "font-semibold",
+			children: "Files"
+		}) })
+	}) }), []));
 	const [searchTerm, setSearchTerm] = useState("");
 	const [debouncedSearch, setDebouncedSearch] = useState("");
 	const observerTarget = useRef(null);
@@ -9036,6 +8983,6 @@ function ProductsApp({ countryCode, companyLogoUrl, productId: controlledProduct
 	});
 }
 //#endregion
-export { ScreenHeaderProvider as a, ShareablesCoreProvider as i, ShareablesApp as n, useScreenHeaderContext as o, ShareablesUIProvider as r, ProductsApp as t };
+export { ShareablesCoreProvider as i, ShareablesApp as n, ShareablesUIProvider as r, ProductsApp as t };
 
-//# sourceMappingURL=src-CEouYGbQ.mjs.map
+//# sourceMappingURL=src-CzK-t4_m.mjs.map