@fluid-app/portal-sdk 0.1.280 → 0.1.281

package/dist/{ShareablesScreen-DwxcReCu.cjs → ShareablesScreen-C6pCPvmx.cjs}

@@ -3,7 +3,7 @@ const require_portal_tenant = require("./portal_tenant-DG4gKXnu.cjs");
 const require_portal_tenant_content = require("./portal_tenant_content-C1R1xxDP.cjs");
 const require_PortalTenantClientProvider = require("./PortalTenantClientProvider-CVv-4rQ9.cjs");
 const require_src = require("./src-B0ut9PTw.cjs");
-const require_ScreenHeaderContext = require("./ScreenHeaderContext-PbjwAMeB.cjs");
+const require_ScreenHeaderContext = require("./ScreenHeaderContext-CsfhnuJk.cjs");
 const require_use_store = require("./use-store-DvtLtZ3f.cjs");
 const require_use_account = require("./use-account-DlmM-lMR.cjs");
 const require_AppNavigationContext = require("./AppNavigationContext-C1-hd9Rw.cjs");
@@ -770,13 +770,6 @@ const SORT_OPTIONS$1 = [
 function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNavigate }) {
 	const client = useShareablesClient();
 	const { navigate } = useShareablesUI();
-	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 [sortValue, setSortValue] = (0, react.useState)("created_at_desc");
@@ -857,7 +850,13 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 		className: "bg-destructive/10 text-destructive rounded-lg px-3 py-2",
 		children: "Failed to load products. Please try again."
 	})] });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__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"
+		}) })
+	}) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
 		isLoading,
 		isEmpty: !error && products.length === 0 && !isFetchingNextPage && !hasNextPage,
 		emptyMessage: debouncedSearch ? "No products match your search." : "No products available.",
@@ -900,7 +899,7 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 				onClick: () => navigate(`product/${product.id}`)
 			}, product.id))
 		})
-	});
+	})] });
 }
 //#endregion
 //#region ../../shareables/ui/src/components/SharePage/SharePageImageDisplay.tsx
@@ -1530,28 +1529,6 @@ function ProductDetailScreen({ productId, countryCode, fetchProduct: fetchPortal
 	const displayTitle = portalProduct?.name || legacyProduct?.title || "";
 	const productImage = portalProduct?.images?.[0]?.url || legacyProduct?.image_url || "";
 	const displayDescription = portalProduct?.description || legacyProduct?.description || legacyProduct?.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 displayPrice = (() => {
 		if (legacyProduct?.display_price) return legacyProduct.display_price;
 		const price = portalProduct?.price ?? legacyProduct?.price;
@@ -1584,7 +1561,24 @@ function ProductDetailScreen({ productId, countryCode, fetchProduct: fetchPortal
 	const handleMediaItemClick = (0, react.useCallback)((mediaItem) => {
 		onNavigate?.("media", String(mediaItem.id));
 	}, [onNavigate]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ShareableDetailLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__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"
+			}) })
+		]
+	}) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ShareableDetailLayout, {
 		isLoading: isLoadingProduct,
 		notFound: !product,
 		notFoundMessage: "Product not found or failed to load.",
@@ -1652,7 +1646,7 @@ function ProductDetailScreen({ productId, countryCode, fetchProduct: fetchPortal
 				relateable_type: "Product"
 			})
 		})]
-	});
+	})] });
 }
 //#endregion
 //#region ../../shareables/ui/src/components/OwnerFilterTabs.tsx
@@ -1725,18 +1719,6 @@ function MediaListingScreen(_props) {
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
 	const { navigate, readOnly, showToast } = useShareablesUI();
 	const [pendingDeleteId, setPendingDeleteId] = (0, react.useState)(null);
-	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => readOnly ? null : /* @__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, readOnly]));
-	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 [sortValue, setSortValue] = (0, react.useState)("newest");
@@ -1884,80 +1866,95 @@ function MediaListingScreen(_props) {
 		className: "bg-destructive/10 text-destructive rounded-lg px-3 py-2",
 		children: ["Error: ", error.message]
 	})] });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
-		isLoading,
-		isEmpty: !error && filteredItems.length === 0 && !isFetchingNextPage && !hasNextPage,
-		emptyMessage: getFilteredEmptyMessage({
-			searchTerm: debouncedSearch,
-			ownerFilter,
-			hasOtherFilters: kindFilter !== "all",
-			entityName: "media",
-			defaultMessage: "No media available."
-		}),
-		filters: filterBar,
-		footer,
-		sentinelRef,
-		loadingFilterShape: "search-view",
-		children: viewMode === "grid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: SHAREABLE_GRID_CLASS,
-			children: filteredItems.map((item) => {
-				const canEdit = !readOnly && item.owner_type === "user";
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "relative",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareItemCard, {
-						title: item.title ?? "",
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderActions, { children: readOnly ? null : /* @__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"]
+		}) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__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"
+			}) })
+		}) }) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
+			isLoading,
+			isEmpty: !error && filteredItems.length === 0 && !isFetchingNextPage && !hasNextPage,
+			emptyMessage: getFilteredEmptyMessage({
+				searchTerm: debouncedSearch,
+				ownerFilter,
+				hasOtherFilters: kindFilter !== "all",
+				entityName: "media",
+				defaultMessage: "No media available."
+			}),
+			filters: filterBar,
+			footer,
+			sentinelRef,
+			loadingFilterShape: "search-view",
+			children: viewMode === "grid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: SHAREABLE_GRID_CLASS,
+				children: filteredItems.map((item) => {
+					const canEdit = !readOnly && item.owner_type === "user";
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareItemCard, {
+							title: item.title ?? "",
+							imageUrl: item.image_url,
+							href: `media/${item.id}`,
+							badge: { text: getMediaKindLabel(item.kind) },
+							isVideo: item.kind === "video",
+							subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "flex items-center gap-1.5",
+								children: [getMediaKindLabel(item.kind), item.owner_type === "user" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Badge, {
+									variant: "secondary",
+									className: "px-1.5 py-0 text-[10px] leading-4",
+									children: "My Media"
+								})]
+							})
+						}), canEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "absolute top-2 right-2",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MediaRowActionsMenu, { onDelete: () => setPendingDeleteId(item.id) })
+						})]
+					}, item.id);
+				})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: SHAREABLE_LIST_CLASS,
+				children: filteredItems.map((item) => {
+					const canEdit = !readOnly && item.owner_type === "user";
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListRow, {
 						imageUrl: item.image_url,
-						href: `media/${item.id}`,
-						badge: { text: getMediaKindLabel(item.kind) },
-						isVideo: item.kind === "video",
-						subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "flex items-center gap-1.5",
-							children: [getMediaKindLabel(item.kind), item.owner_type === "user" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Badge, {
-								variant: "secondary",
-								className: "px-1.5 py-0 text-[10px] leading-4",
-								children: "My Media"
-							})]
-						})
-					}), canEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "absolute top-2 right-2",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MediaRowActionsMenu, { onDelete: () => setPendingDeleteId(item.id) })
-					})]
-				}, item.id);
-			})
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: SHAREABLE_LIST_CLASS,
-			children: filteredItems.map((item) => {
-				const canEdit = !readOnly && item.owner_type === "user";
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListRow, {
-					imageUrl: item.image_url,
-					imageAlt: item.title ?? "",
-					title: item.title ?? "Untitled",
-					subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [getMediaKindLabel(item.kind), item.owner_type === "user" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Badge, {
-						variant: "secondary",
-						className: "px-1.5 py-0 text-[10px] leading-4",
-						children: "My Media"
-					})] }),
-					onClick: () => navigate(`media/${item.id}`),
-					trailing: canEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MediaRowActionsMenu, { onDelete: () => setPendingDeleteId(item.id) })
-				}, item.id);
+						imageAlt: item.title ?? "",
+						title: item.title ?? "Untitled",
+						subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [getMediaKindLabel(item.kind), item.owner_type === "user" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Badge, {
+							variant: "secondary",
+							className: "px-1.5 py-0 text-[10px] leading-4",
+							children: "My Media"
+						})] }),
+						onClick: () => navigate(`media/${item.id}`),
+						trailing: canEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MediaRowActionsMenu, { onDelete: () => setPendingDeleteId(item.id) })
+					}, item.id);
+				})
 			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
+			open: pendingDeleteId !== null,
+			onOpenChange: (open) => !open && setPendingDeleteId(null),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: "Delete this media?" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogDescription, { children: "This removes the item from your media library. Shared links that point to it will stop working." })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
+				disabled: isDeleting,
+				children: "Cancel"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogAction, {
+				onClick: (e) => {
+					e.preventDefault();
+					confirmDelete();
+				},
+				disabled: isDeleting,
+				className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				children: isDeleting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Delete"
+			})] })] })
 		})
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
-		open: pendingDeleteId !== null,
-		onOpenChange: (open) => !open && setPendingDeleteId(null),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: "Delete this media?" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogDescription, { children: "This removes the item from your media library. Shared links that point to it will stop working." })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
-			disabled: isDeleting,
-			children: "Cancel"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogAction, {
-			onClick: (e) => {
-				e.preventDefault();
-				confirmDelete();
-			},
-			disabled: isDeleting,
-			className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-			children: isDeleting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Delete"
-		})] })] })
-	})] });
+	] });
 }
 //#endregion
 //#region ../../shareables/ui/src/components/SharePage/TaggedProductsList.tsx
@@ -2098,85 +2095,75 @@ function MediaDetailScreen({ mediaId, 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: "block max-w-[60vw] truncate align-bottom font-semibold md:max-w-[60ch]",
-				children: displayTitle || "Media"
-			}) })
-		]
-	}) }), [
-		displayTitle,
-		onBack,
-		navigate
-	]));
-	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => {
-		if (readOnly || !mediaItem || mediaItem.owner_type !== "user") return null;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+	const badgeLabel = getBadgeLabel(mediaItem?.kind ?? null);
+	const rawDescription = mediaItem?.description?.body || mediaItem?.stripped || "";
+	const downloadUrl = isVideo ? displayVideo : mediaItem?.pdf_url || displayImage;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__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: "block max-w-[60vw] truncate align-bottom font-semibold md:max-w-[60ch]",
+					children: displayTitle || "Media"
+				}) })
+			]
+		}) }) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderActions, { children: readOnly || !mediaItem || mediaItem.owner_type !== "user" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 			size: "sm",
 			variant: "outline",
 			onClick: () => navigate(`media/${mediaId}/edit`),
 			className: "flex items-center gap-1.5",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "h-3.5 w-3.5" }), "Edit"]
-		});
-	}, [
-		readOnly,
-		mediaItem,
-		navigate,
-		mediaId
-	]));
-	const badgeLabel = getBadgeLabel(mediaItem?.kind ?? null);
-	const rawDescription = mediaItem?.description?.body || mediaItem?.stripped || "";
-	const downloadUrl = isVideo ? displayVideo : mediaItem?.pdf_url || displayImage;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableDetailLayout, {
-		isLoading,
-		notFound: !mediaItem,
-		notFoundMessage: "Media not found or failed to load.",
-		title: displayTitle,
-		description: rawDescription,
-		containerHeightClass: "md:h-[calc(95vh-140px)]",
-		image: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "relative h-full overflow-hidden",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SharePageImageDisplay, {
-				displayImage,
+		}) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableDetailLayout, {
+			isLoading,
+			notFound: !mediaItem,
+			notFoundMessage: "Media not found or failed to load.",
+			title: displayTitle,
+			description: rawDescription,
+			containerHeightClass: "md:h-[calc(95vh-140px)]",
+			image: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative h-full overflow-hidden",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SharePageImageDisplay, {
+					displayImage,
+					displayTitle,
+					displayVideo: isVideo ? displayVideo : void 0,
+					isVideo,
+					badgeLabel,
+					rounded: true,
+					showBadge: false
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "bg-background/80 text-foreground absolute top-3 right-3 z-0 inline-flex h-8 items-center rounded-full px-3 text-xs font-medium shadow-md backdrop-blur-sm",
+					children: badgeLabel
+				})]
+			}),
+			actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AssetActions, {
+				downloadUrl: downloadUrl || null,
 				displayTitle,
-				displayVideo: isVideo ? displayVideo : void 0,
+				shareLink: shareLinkError ? null : shareLink || null,
+				shareLinkLoading,
 				isVideo,
-				badgeLabel,
-				rounded: true,
-				showBadge: false
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "bg-background/80 text-foreground absolute top-3 right-3 z-0 inline-flex h-8 items-center rounded-full px-3 text-xs font-medium shadow-md backdrop-blur-sm",
-				children: badgeLabel
-			})]
-		}),
-		actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AssetActions, {
-			downloadUrl: downloadUrl || null,
-			displayTitle,
-			shareLink: shareLinkError ? null : shareLink || null,
-			shareLinkLoading,
-			isVideo,
-			relateableId: Number(mediaId),
-			relateableType: "Medium"
-		}),
-		children: taggedProducts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Separator, { className: "bg-foreground my-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "bg-background rounded-lg",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TaggedProductsList, {
-				products: taggedProducts,
-				onProductClick: (productId) => onNavigate?.("product", String(productId))
-			})
-		})] })
-	});
+				relateableId: Number(mediaId),
+				relateableType: "Medium"
+			}),
+			children: taggedProducts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Separator, { className: "bg-foreground my-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "bg-background rounded-lg",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TaggedProductsList, {
+					products: taggedProducts,
+					onProductClick: (productId) => onNavigate?.("product", String(productId))
+				})
+			})] })
+		})
+	] });
 }
 //#endregion
 //#region ../../file-picker/core/src/query-keys.ts
@@ -8765,42 +8752,47 @@ function MediaEditScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 		} };
 	}, [filePickerApi, showToast]);
 	const displayTitle = mediaItem?.title ?? "";
-	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.BreadcrumbLink, {
-				href: "#",
-				onClick: (e) => {
-					e.preventDefault();
-					navigate(`media/${mediaId}`);
-				},
-				className: "block max-w-[40vw] truncate align-bottom md:max-w-[60ch]",
-				children: displayTitle || "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: "Edit"
-			}) })
-		]
-	}) }), [
-		displayTitle,
-		onBack,
-		navigate,
-		mediaId
-	]));
-	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => {
-		if (readOnly || !mediaItem) return null;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex items-center justify-center py-16",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-8" })
+	});
+	if (!mediaItem) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex flex-col items-center justify-center py-16",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-destructive text-sm",
+			children: "Media not found or failed to load."
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__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.BreadcrumbLink, {
+					href: "#",
+					onClick: (e) => {
+						e.preventDefault();
+						navigate(`media/${mediaId}`);
+					},
+					className: "block max-w-[40vw] truncate align-bottom md:max-w-[60ch]",
+					children: displayTitle || "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: "Edit"
+				}) })
+			]
+		}) }) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderActions, { children: readOnly || !mediaItem ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
 				asChild: true,
@@ -8823,407 +8815,390 @@ function MediaEditScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 				size: "sm",
 				children: isSaving ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Save"
 			})]
-		});
-	}, [
-		readOnly,
-		mediaItem,
-		isDirty,
-		isSaving,
-		handleSave
-	]));
-	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "flex items-center justify-center py-16",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-8" })
-	});
-	if (!mediaItem) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "flex flex-col items-center justify-center py-16",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-destructive text-sm",
-			children: "Media not found or failed to load."
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col gap-4 px-4 pt-4 pb-24 md:px-10 md:py-6",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mx-auto flex w-full max-w-5xl items-center gap-3",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-					className: "text-foreground text-xl font-semibold break-words",
-					children: editState.title || displayTitle || "Media"
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mx-auto grid w-full max-w-5xl grid-cols-1 gap-6 md:grid-cols-[3fr_1fr]",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "space-y-6",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "border-border bg-card rounded-lg border p-4 md:p-5",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "mb-4 flex flex-wrap items-center justify-between gap-2",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-										className: "text-foreground text-base font-semibold",
-										children: "Media"
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "flex flex-wrap items-center gap-2",
-										children: [!readOnly && filePickerContextValue && filePickerApi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-											onClick: () => setIsPickerOpen(true),
-											variant: "outline",
-											size: "sm",
-											children: "Replace Media"
-										}), !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-											variant: "outline",
-											size: "sm",
-											onClick: () => setIsCtaModalOpen(true),
-											className: editState.ctaEnabled ? "border-primary text-primary" : "",
-											children: ["CTA Button: ", editState.ctaEnabled ? "On" : "Off"]
-										})]
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CurrentMediaPreview, {
-									mediaItem,
-									pendingFileUrl: pendingMediaFile ? pendingMediaFile.file_url : null,
-									pendingKind: pendingMediaFile ? deriveUpdateFieldsFromResult(pendingMediaFile).kind : null
-								}),
-								(() => {
-									const pendingKind = pendingMediaFile ? deriveUpdateFieldsFromResult(pendingMediaFile).kind : null;
-									const rawContentFormat = mediaItem.content_format;
-									const effectiveKind = pendingKind ?? rawContentFormat ?? mediaItem.kind;
-									const effectiveVideoUrl = pendingKind === "video" ? pendingMediaFile?.file_url : mediaItem.video_url;
-									if (readOnly) return null;
-									if (effectiveKind === "video" && effectiveVideoUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "border-border mt-4 border-t pt-4",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoThumbnailSelector, {
-											videoUrl: effectiveVideoUrl,
-											thumbnailUrl: pendingThumbnail ?? mediaItem.image_url,
-											onThumbnailCaptured: async (blob) => {
-												if (!uploadThumbnail) {
-													showToast({
-														title: "Thumbnail capture is not available in this context",
-														type: "error"
-													});
-													return;
-												}
-												try {
-													setPendingThumbnail(await uploadThumbnail(blob, `thumbnail-${mediaId}.jpg`));
-												} catch (error) {
-													showToast({
-														title: "Failed to upload thumbnail",
-														type: "error",
-														error
-													});
-												}
-											},
-											onThumbnailSelected: () => setIsThumbnailPickerOpen(true)
-										}), pendingThumbnail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-											className: "text-muted-foreground mt-1.5 text-xs",
-											children: "Pending — save to apply"
+		}) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-4 px-4 pt-4 pb-24 md:px-10 md:py-6",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mx-auto flex w-full max-w-5xl items-center gap-3",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+						className: "text-foreground text-xl font-semibold break-words",
+						children: editState.title || displayTitle || "Media"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mx-auto grid w-full max-w-5xl grid-cols-1 gap-6 md:grid-cols-[3fr_1fr]",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "space-y-6",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "border-border bg-card rounded-lg border p-4 md:p-5",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "mb-4 flex flex-wrap items-center justify-between gap-2",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+											className: "text-foreground text-base font-semibold",
+											children: "Media"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex flex-wrap items-center gap-2",
+											children: [!readOnly && filePickerContextValue && filePickerApi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+												onClick: () => setIsPickerOpen(true),
+												variant: "outline",
+												size: "sm",
+												children: "Replace Media"
+											}), !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+												variant: "outline",
+												size: "sm",
+												onClick: () => setIsCtaModalOpen(true),
+												className: editState.ctaEnabled ? "border-primary text-primary" : "",
+												children: ["CTA Button: ", editState.ctaEnabled ? "On" : "Off"]
+											})]
 										})]
-									});
-									if (effectiveKind === "pdf") {
-										const currentThumbnail = pendingThumbnail ?? mediaItem.image_url;
-										return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CurrentMediaPreview, {
+										mediaItem,
+										pendingFileUrl: pendingMediaFile ? pendingMediaFile.file_url : null,
+										pendingKind: pendingMediaFile ? deriveUpdateFieldsFromResult(pendingMediaFile).kind : null
+									}),
+									(() => {
+										const pendingKind = pendingMediaFile ? deriveUpdateFieldsFromResult(pendingMediaFile).kind : null;
+										const rawContentFormat = mediaItem.content_format;
+										const effectiveKind = pendingKind ?? rawContentFormat ?? mediaItem.kind;
+										const effectiveVideoUrl = pendingKind === "video" ? pendingMediaFile?.file_url : mediaItem.video_url;
+										if (readOnly) return null;
+										if (effectiveKind === "video" && effectiveVideoUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											className: "border-border mt-4 border-t pt-4",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-												className: "space-y-3",
-												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-													className: "text-foreground mb-1.5 block text-sm font-medium",
-													children: "Thumbnail"
-												}), currentThumbnail ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThumbnailWithMeta, {
-													src: currentThumbnail,
-													onReplace: () => setIsThumbnailPickerOpen(true)
-												}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-													className: "flex items-center gap-4",
-													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-														className: "bg-muted flex h-28 w-48 shrink-0 items-center justify-center rounded-md border",
-														children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ImageIcon, { className: "text-muted-foreground h-8 w-8" })
-													}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-														className: "min-w-0 flex-1",
-														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-															className: "text-muted-foreground mb-2 text-sm",
-															children: "No thumbnail set"
-														}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-															variant: "outline",
-															size: "sm",
-															onClick: () => setIsThumbnailPickerOpen(true),
-															className: "gap-1.5",
-															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ImageIcon, { className: "h-3.5 w-3.5" }), "Select New Image"]
-														})]
-													})]
-												})]
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoThumbnailSelector, {
+												videoUrl: effectiveVideoUrl,
+												thumbnailUrl: pendingThumbnail ?? mediaItem.image_url,
+												onThumbnailCaptured: async (blob) => {
+													if (!uploadThumbnail) {
+														showToast({
+															title: "Thumbnail capture is not available in this context",
+															type: "error"
+														});
+														return;
+													}
+													try {
+														setPendingThumbnail(await uploadThumbnail(blob, `thumbnail-${mediaId}.jpg`));
+													} catch (error) {
+														showToast({
+															title: "Failed to upload thumbnail",
+															type: "error",
+															error
+														});
+													}
+												},
+												onThumbnailSelected: () => setIsThumbnailPickerOpen(true)
 											}), pendingThumbnail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 												className: "text-muted-foreground mt-1.5 text-xs",
 												children: "Pending — save to apply"
 											})]
 										});
-									}
-									return null;
-								})()
-							]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "border-border bg-card rounded-lg border p-4 md:p-5",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-								className: "text-foreground mb-4 text-base font-semibold",
-								children: "Media Details"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex flex-col gap-4",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex flex-col gap-1.5",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Label, {
-										htmlFor: "media-title",
-										children: ["Title ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: "text-destructive",
-											children: "*"
-										})]
-									}), readOnly ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-										className: "text-foreground text-sm",
-										children: displayTitle
-									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
-										id: "media-title",
-										value: editState.title,
-										onChange: (e) => setEditState((s) => ({
-											...s,
-											title: e.target.value
-										})),
-										placeholder: "Enter media title"
-									})]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex flex-col gap-1.5",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, { children: "Description" }), readOnly ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-										className: "text-foreground/70 text-sm leading-relaxed",
-										children: stripTags(editState.description)
-									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RichTextEditor, {
-										value: editState.description,
-										onChange: (val) => setEditState((s) => ({
-											...s,
-											description: val
-										})),
-										placeholder: "Start writing..."
-									})]
-								})]
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MediaProductTagging, {
-							products: taggedProducts,
-							onAddProduct: async (productId) => {
-								if (!mediaProductsApi) return;
-								try {
-									await mediaProductsApi.addMediaProduct(Number(mediaId), { id: productId });
-									await refetchProducts();
-								} catch (error) {
-									showToast({
-										title: `Failed to add product: ${error instanceof Error ? error.message : "Unknown error"}`,
-										type: "error",
-										error
-									});
-								}
-							},
-							onRemoveProduct: async (productId) => {
-								if (!mediaProductsApi) return;
-								try {
-									await mediaProductsApi.removeMediaProduct(Number(mediaId), productId);
-									await refetchProducts();
-								} catch (error) {
-									showToast({
-										title: `Failed to remove product: ${error instanceof Error ? error.message : "Unknown error"}`,
-										type: "error",
-										error
-									});
-								}
-							},
-							onSearchProducts: searchProducts ?? (async () => ({
-								products: [],
-								nextCursor: null
-							})),
-							disabled: readOnly || !mediaProductsApi
-						})
-					]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "space-y-6",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "border-border bg-card rounded-lg border p-4 md:p-5",
-						children: [
+										if (effectiveKind === "pdf") {
+											const currentThumbnail = pendingThumbnail ?? mediaItem.image_url;
+											return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "border-border mt-4 border-t pt-4",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: "space-y-3",
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+														className: "text-foreground mb-1.5 block text-sm font-medium",
+														children: "Thumbnail"
+													}), currentThumbnail ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThumbnailWithMeta, {
+														src: currentThumbnail,
+														onReplace: () => setIsThumbnailPickerOpen(true)
+													}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														className: "flex items-center gap-4",
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+															className: "bg-muted flex h-28 w-48 shrink-0 items-center justify-center rounded-md border",
+															children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ImageIcon, { className: "text-muted-foreground h-8 w-8" })
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+															className: "min-w-0 flex-1",
+															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+																className: "text-muted-foreground mb-2 text-sm",
+																children: "No thumbnail set"
+															}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+																variant: "outline",
+																size: "sm",
+																onClick: () => setIsThumbnailPickerOpen(true),
+																className: "gap-1.5",
+																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ImageIcon, { className: "h-3.5 w-3.5" }), "Select New Image"]
+															})]
+														})]
+													})]
+												}), pendingThumbnail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+													className: "text-muted-foreground mt-1.5 text-xs",
+													children: "Pending — save to apply"
+												})]
+											});
+										}
+										return null;
+									})()
+								]
+							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "mb-4 flex items-center justify-between",
+								className: "border-border bg-card rounded-lg border p-4 md:p-5",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-									className: "text-foreground text-base font-semibold",
-									children: "SEO And Link Sharing"
-								}), !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-									variant: "ghost",
-									size: "sm",
-									onClick: () => setSeoExpanded((prev) => !prev),
-									children: seoExpanded ? "Done" : "Edit"
-								})]
-							}),
-							(() => {
-								const seoThumbnailUrl = (pendingMediaFile ? deriveUpdateFieldsFromResult(pendingMediaFile) : null)?.image_url ?? pendingThumbnail ?? mediaItem?.image_url;
-								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "bg-muted/40 border-border mb-4 rounded-md border p-3",
+									className: "text-foreground mb-4 text-base font-semibold",
+									children: "Media Details"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex flex-col gap-4",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "mb-2 flex items-center gap-2",
-										children: [seoThumbnailUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-											src: seoThumbnailUrl,
-											alt: "SEO preview",
-											className: "h-8 w-8 shrink-0 rounded object-cover"
-										}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											className: "bg-muted flex h-8 w-8 items-center justify-center rounded",
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ImageIcon, { className: "text-muted-foreground h-4 w-4" })
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "min-w-0 flex-1",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-												className: "text-foreground truncate text-xs font-medium",
-												children: editState.seoTitle || displayTitle || "Your page title"
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-												className: "text-muted-foreground truncate text-xs",
-												children: mediaItem?.preview_link ?? mediaItem?.canonical_url ?? "yoursite.com/media/..."
-											})]
-										})]
-									}), editState.seoDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-										className: "text-muted-foreground line-clamp-2 text-xs",
-										children: editState.seoDescription
-									})]
-								});
-							})(),
-							seoExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex flex-col gap-4",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "flex flex-col gap-1.5",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
-											htmlFor: "seo-title",
-											children: "SEO Title"
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
-											id: "seo-title",
-											value: editState.seoTitle,
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Label, {
+											htmlFor: "media-title",
+											children: ["Title ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "text-destructive",
+												children: "*"
+											})]
+										}), readOnly ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+											className: "text-foreground text-sm",
+											children: displayTitle
+										}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
+											id: "media-title",
+											value: editState.title,
 											onChange: (e) => setEditState((s) => ({
 												...s,
-												seoTitle: e.target.value
+												title: e.target.value
 											})),
-											placeholder: "Page title for search engines"
+											placeholder: "Enter media title"
 										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "flex flex-col gap-1.5",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
-											htmlFor: "seo-description",
-											children: "SEO Description"
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Textarea, {
-											id: "seo-description",
-											value: editState.seoDescription,
-											onChange: (e) => setEditState((s) => ({
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, { children: "Description" }), readOnly ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+											className: "text-foreground/70 text-sm leading-relaxed",
+											children: stripTags(editState.description)
+										}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RichTextEditor, {
+											value: editState.description,
+											onChange: (val) => setEditState((s) => ({
 												...s,
-												seoDescription: e.target.value
+												description: val
 											})),
-											placeholder: "Description for search engines",
-											rows: 3
+											placeholder: "Start writing..."
 										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "flex items-center justify-between gap-3",
+									})]
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MediaProductTagging, {
+								products: taggedProducts,
+								onAddProduct: async (productId) => {
+									if (!mediaProductsApi) return;
+									try {
+										await mediaProductsApi.addMediaProduct(Number(mediaId), { id: productId });
+										await refetchProducts();
+									} catch (error) {
+										showToast({
+											title: `Failed to add product: ${error instanceof Error ? error.message : "Unknown error"}`,
+											type: "error",
+											error
+										});
+									}
+								},
+								onRemoveProduct: async (productId) => {
+									if (!mediaProductsApi) return;
+									try {
+										await mediaProductsApi.removeMediaProduct(Number(mediaId), productId);
+										await refetchProducts();
+									} catch (error) {
+										showToast({
+											title: `Failed to remove product: ${error instanceof Error ? error.message : "Unknown error"}`,
+											type: "error",
+											error
+										});
+									}
+								},
+								onSearchProducts: searchProducts ?? (async () => ({
+									products: [],
+									nextCursor: null
+								})),
+								disabled: readOnly || !mediaProductsApi
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "space-y-6",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "border-border bg-card rounded-lg border p-4 md:p-5",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "mb-4 flex items-center justify-between",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+										className: "text-foreground text-base font-semibold",
+										children: "SEO And Link Sharing"
+									}), !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+										variant: "ghost",
+										size: "sm",
+										onClick: () => setSeoExpanded((prev) => !prev),
+										children: seoExpanded ? "Done" : "Edit"
+									})]
+								}),
+								(() => {
+									const seoThumbnailUrl = (pendingMediaFile ? deriveUpdateFieldsFromResult(pendingMediaFile) : null)?.image_url ?? pendingThumbnail ?? mediaItem?.image_url;
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "bg-muted/40 border-border mb-4 rounded-md border p-3",
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "flex flex-col gap-0.5",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "text-foreground text-sm font-medium",
-												children: "Block Crawlers"
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "text-muted-foreground text-xs",
-												children: "Prevent search engines from indexing"
+											className: "mb-2 flex items-center gap-2",
+											children: [seoThumbnailUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+												src: seoThumbnailUrl,
+												alt: "SEO preview",
+												className: "h-8 w-8 shrink-0 rounded object-cover"
+											}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: "bg-muted flex h-8 w-8 items-center justify-center rounded",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ImageIcon, { className: "text-muted-foreground h-4 w-4" })
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "min-w-0 flex-1",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+													className: "text-foreground truncate text-xs font-medium",
+													children: editState.seoTitle || displayTitle || "Your page title"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+													className: "text-muted-foreground truncate text-xs",
+													children: mediaItem?.preview_link ?? mediaItem?.canonical_url ?? "yoursite.com/media/..."
+												})]
 											})]
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Switch, {
-											checked: editState.blockCrawler,
-											onCheckedChange: (checked) => setEditState((s) => ({
-												...s,
-												blockCrawler: checked
-											})),
-											"aria-label": "Block search engine crawlers"
+										}), editState.seoDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+											className: "text-muted-foreground line-clamp-2 text-xs",
+											children: editState.seoDescription
 										})]
-									})
-								]
-							})
-						]
-					})
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
-				open: isDeleteOpen,
-				onOpenChange: setIsDeleteOpen,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: "Delete Media" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogDescription, { children: [
-					"Are you sure you want to delete “",
-					displayTitle,
-					"”? This action cannot be undone."
-				] })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
-					disabled: isDeleting,
-					children: "Cancel"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogAction, {
-					onClick: handleDelete,
-					disabled: isDeleting,
-					className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-					children: isDeleting ? "Deleting..." : "Delete"
-				})] })] })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CtaModal, {
-				open: isCtaModalOpen,
-				onOpenChange: setIsCtaModalOpen,
-				ctaEnabled: editState.ctaEnabled,
-				ctaType: editState.ctaType,
-				ctaButtonText: editState.ctaButtonText,
-				ctaUrl: editState.ctaUrl,
-				onDone: (ctaState) => {
-					setEditState((s) => ({
-						...s,
-						ctaEnabled: ctaState.enabled,
-						ctaType: ctaState.type,
-						ctaButtonText: ctaState.buttonText,
-						ctaUrl: ctaState.url
-					}));
-				}
-			}),
-			filePickerContextValue && filePickerApi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerApiProvider, {
-				api: filePickerApi,
-				children: /* @__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,
-							allowedMethods: [
-								"dam",
-								"upload",
-								"url"
+									});
+								})(),
+								seoExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex flex-col gap-4",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex flex-col gap-1.5",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
+												htmlFor: "seo-title",
+												children: "SEO Title"
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
+												id: "seo-title",
+												value: editState.seoTitle,
+												onChange: (e) => setEditState((s) => ({
+													...s,
+													seoTitle: e.target.value
+												})),
+												placeholder: "Page title for search engines"
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex flex-col gap-1.5",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
+												htmlFor: "seo-description",
+												children: "SEO Description"
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Textarea, {
+												id: "seo-description",
+												value: editState.seoDescription,
+												onChange: (e) => setEditState((s) => ({
+													...s,
+													seoDescription: e.target.value
+												})),
+												placeholder: "Description for search engines",
+												rows: 3
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex items-center justify-between gap-3",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "flex flex-col gap-0.5",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "text-foreground text-sm font-medium",
+													children: "Block Crawlers"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "text-muted-foreground text-xs",
+													children: "Prevent search engines from indexing"
+												})]
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Switch, {
+												checked: editState.blockCrawler,
+												onCheckedChange: (checked) => setEditState((s) => ({
+													...s,
+													blockCrawler: checked
+												})),
+												"aria-label": "Block search engine crawlers"
+											})]
+										})
+									]
+								})
 							]
-						}
+						})
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
+					open: isDeleteOpen,
+					onOpenChange: setIsDeleteOpen,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: "Delete Media" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogDescription, { children: [
+						"Are you sure you want to delete “",
+						displayTitle,
+						"”? This action cannot be undone."
+					] })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
+						disabled: isDeleting,
+						children: "Cancel"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogAction, {
+						onClick: handleDelete,
+						disabled: isDeleting,
+						className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+						children: isDeleting ? "Deleting..." : "Delete"
+					})] })] })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CtaModal, {
+					open: isCtaModalOpen,
+					onOpenChange: setIsCtaModalOpen,
+					ctaEnabled: editState.ctaEnabled,
+					ctaType: editState.ctaType,
+					ctaButtonText: editState.ctaButtonText,
+					ctaUrl: editState.ctaUrl,
+					onDone: (ctaState) => {
+						setEditState((s) => ({
+							...s,
+							ctaEnabled: ctaState.enabled,
+							ctaType: ctaState.type,
+							ctaButtonText: ctaState.buttonText,
+							ctaUrl: ctaState.url
+						}));
+					}
+				}),
+				filePickerContextValue && filePickerApi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerApiProvider, {
+					api: filePickerApi,
+					children: /* @__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,
+								allowedMethods: [
+									"dam",
+									"upload",
+									"url"
+								]
+							}
+						})
 					})
-				})
-			}),
-			filePickerContextValue && filePickerApi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerApiProvider, {
-				api: filePickerApi,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerProvider, {
-					value: filePickerContextValue,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePicker, {
-						open: isThumbnailPickerOpen,
-						onFilesSelected: (results) => {
-							const result = results[0];
-							if (result) setPendingThumbnail(result.file_url);
-							setIsThumbnailPickerOpen(false);
-						},
-						onClose: () => setIsThumbnailPickerOpen(false),
-						config: {
-							maxFiles: 1,
-							allowedMethods: [
-								"dam",
-								"upload",
-								"url"
-							]
-						}
+				}),
+				filePickerContextValue && filePickerApi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerApiProvider, {
+					api: filePickerApi,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerProvider, {
+						value: filePickerContextValue,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePicker, {
+							open: isThumbnailPickerOpen,
+							onFilesSelected: (results) => {
+								const result = results[0];
+								if (result) setPendingThumbnail(result.file_url);
+								setIsThumbnailPickerOpen(false);
+							},
+							onClose: () => setIsThumbnailPickerOpen(false),
+							config: {
+								maxFiles: 1,
+								allowedMethods: [
+									"dam",
+									"upload",
+									"url"
+								]
+							}
+						})
 					})
 				})
-			})
-		]
-	});
+			]
+		})
+	] });
 }
 //#endregion
 //#region ../../shareables/ui/src/components/screens/MediaCreateScreen.tsx
@@ -9268,24 +9243,6 @@ function FilePreview({ result, mediaType }) {
 function MediaCreateScreen({ onNavigate, onBack }) {
 	const { navigate, showToast, filePickerApi } = 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] = (0, react.useState)(true);
@@ -9372,12 +9329,6 @@ function MediaCreateScreen({ onNavigate, onBack }) {
 		seoDescription,
 		seoBlockCrawler
 	]);
-	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-		onClick: handleSave,
-		disabled: isCreating,
-		size: "sm",
-		children: isCreating ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Save"
-	}), [handleSave, isCreating]));
 	const handleFilesSelected = (0, react.useCallback)((results) => {
 		const result = results[0];
 		if (!result) return;
@@ -9400,222 +9351,248 @@ function MediaCreateScreen({ onNavigate, onBack }) {
 			dismiss: () => {}
 		} };
 	}, [filePickerApi, 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: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mx-auto flex w-full max-w-5xl items-center gap-3",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-					className: "text-foreground text-xl font-semibold",
-					children: title.trim() || "New Media"
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mx-auto grid w-full max-w-5xl gap-6 md:grid-cols-[3fr_1fr]",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "space-y-6",
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__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"
+				}) })
+			]
+		}) }) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderActions, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+			onClick: handleSave,
+			disabled: isCreating,
+			size: "sm",
+			children: isCreating ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Save"
+		}) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-4 px-4 py-4 md:px-10 md:py-6",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mx-auto flex w-full max-w-5xl items-center gap-3",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+						className: "text-foreground text-xl font-semibold",
+						children: title.trim() || "New Media"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mx-auto grid w-full max-w-5xl gap-6 md:grid-cols-[3fr_1fr]",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "border-border bg-card rounded-lg border p-5",
+						className: "space-y-6",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "mb-4 flex items-center justify-between",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-								className: "text-foreground text-base font-semibold",
-								children: "Media"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+							className: "border-border bg-card rounded-lg border p-5",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "mb-4 flex items-center justify-between",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+									className: "text-foreground text-base font-semibold",
+									children: "Media"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+										onClick: () => setIsPickerOpen(true),
+										variant: "outline",
+										size: "sm",
+										disabled: !filePickerApi,
+										children: "Select Media"
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+										variant: "outline",
+										size: "sm",
+										onClick: () => setIsCtaModalOpen(true),
+										className: ctaEnabled ? "border-primary text-primary" : "",
+										children: ["CTA Button: ", ctaEnabled ? "On" : "Off"]
+									})]
+								})]
+							}), selectedResult && mediaType ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex flex-col gap-3",
+								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",
-									disabled: !filePickerApi,
-									children: "Select Media"
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-									variant: "outline",
-									size: "sm",
-									onClick: () => setIsCtaModalOpen(true),
-									className: ctaEnabled ? "border-primary text-primary" : "",
-									children: ["CTA Button: ", ctaEnabled ? "On" : "Off"]
+									className: "w-fit",
+									children: "Replace"
 								})]
-							})]
-						}), selectedResult && mediaType ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex flex-col gap-3",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePreview, {
-								result: selectedResult,
-								mediaType
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
 								onClick: () => setIsPickerOpen(true),
-								variant: "outline",
-								size: "sm",
-								className: "w-fit",
-								children: "Replace"
-							})]
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							onClick: () => setIsPickerOpen(true),
-							disabled: !filePickerApi,
-							className: "border-border text-muted-foreground hover:bg-muted/30 flex h-40 w-full flex-col items-center justify-center gap-2 rounded-lg border border-dashed transition-colors disabled:cursor-not-allowed disabled:opacity-50",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "h-6 w-6" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-sm",
-								children: "No media uploaded. Click to upload an image, video, or PDF."
+								disabled: !filePickerApi,
+								className: "border-border text-muted-foreground hover:bg-muted/30 flex h-40 w-full flex-col items-center justify-center gap-2 rounded-lg border border-dashed transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "h-6 w-6" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-sm",
+									children: "No media uploaded. Click to upload an image, video, or PDF."
+								})]
 							})]
-						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "border-border bg-card rounded-lg border p-5",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-							className: "text-foreground mb-4 text-base font-semibold",
-							children: "Media Details"
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex flex-col gap-4",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex flex-col gap-1.5",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Label, {
-									htmlFor: "media-title",
-									children: ["Title ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "text-destructive",
-										children: "*"
-									})]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
-									id: "media-title",
-									value: title,
-									onChange: (e) => setTitle(e.target.value),
-									placeholder: "Enter media title",
-									required: true
-								})]
+							className: "border-border bg-card rounded-lg border p-5",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+								className: "text-foreground mb-4 text-base font-semibold",
+								children: "Media Details"
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex flex-col gap-1.5",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, { children: "Description" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RichTextEditor, {
-									value: description,
-									onChange: setDescription,
-									placeholder: "Start writing..."
-								})]
-							})]
-						})]
-					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "space-y-6",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "border-border bg-card rounded-lg border p-5",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "mb-4 flex items-center justify-between",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-									className: "text-foreground text-base font-semibold",
-									children: "SEO And Link Sharing"
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-									variant: "ghost",
-									size: "sm",
-									onClick: () => setSeoExpanded((prev) => !prev),
-									children: seoExpanded ? "Done" : "Edit"
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "bg-muted/40 border-border mb-4 rounded-md border p-3",
+								className: "flex flex-col gap-4",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "mb-2 flex items-center gap-2",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "bg-muted flex h-8 w-8 items-center justify-center rounded",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ImageIcon, { className: "text-muted-foreground h-4 w-4" })
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "min-w-0 flex-1",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-											className: "text-foreground truncate text-xs font-medium",
-											children: seoTitle || "Your page title"
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-											className: "text-muted-foreground truncate text-xs",
-											children: "yoursite.com/media/..."
+									className: "flex flex-col gap-1.5",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Label, {
+										htmlFor: "media-title",
+										children: ["Title ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "text-destructive",
+											children: "*"
 										})]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
+										id: "media-title",
+										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-1.5",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, { children: "Description" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RichTextEditor, {
+										value: description,
+										onChange: setDescription,
+										placeholder: "Start writing..."
 									})]
-								}), seoDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "text-muted-foreground line-clamp-2 text-xs",
-									children: seoDescription
 								})]
-							}),
-							seoExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex flex-col gap-4",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "flex flex-col gap-1.5",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
-											htmlFor: "seo-title",
-											children: "SEO Title"
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
-											id: "seo-title",
-											value: seoTitle,
-											onChange: (e) => setSeoTitle(e.target.value),
-											placeholder: "Page title for search engines"
-										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "flex flex-col gap-1.5",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
-											htmlFor: "seo-description",
-											children: "SEO Description"
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Textarea, {
-											id: "seo-description",
-											value: seoDescription,
-											onChange: (e) => setSeoDescription(e.target.value),
-											placeholder: "Description for search engines",
-											rows: 3
+							})]
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "space-y-6",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "border-border bg-card rounded-lg border p-5",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "mb-4 flex items-center justify-between",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+										className: "text-foreground text-base font-semibold",
+										children: "SEO And Link Sharing"
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+										variant: "ghost",
+										size: "sm",
+										onClick: () => setSeoExpanded((prev) => !prev),
+										children: seoExpanded ? "Done" : "Edit"
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "bg-muted/40 border-border mb-4 rounded-md border p-3",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "mb-2 flex items-center gap-2",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: "bg-muted flex h-8 w-8 items-center justify-center rounded",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ImageIcon, { className: "text-muted-foreground h-4 w-4" })
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "min-w-0 flex-1",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: "text-foreground truncate text-xs font-medium",
+												children: seoTitle || "Your page title"
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: "text-muted-foreground truncate text-xs",
+												children: "yoursite.com/media/..."
+											})]
 										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "flex items-center justify-between gap-3",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "flex flex-col gap-0.5",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "text-foreground text-sm font-medium",
-												children: "Block Crawlers"
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "text-muted-foreground text-xs",
-												children: "Prevent search engines from indexing"
+									}), seoDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-muted-foreground line-clamp-2 text-xs",
+										children: seoDescription
+									})]
+								}),
+								seoExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex flex-col gap-4",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex flex-col gap-1.5",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
+												htmlFor: "seo-title",
+												children: "SEO Title"
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
+												id: "seo-title",
+												value: seoTitle,
+												onChange: (e) => setSeoTitle(e.target.value),
+												placeholder: "Page title for search engines"
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex flex-col gap-1.5",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
+												htmlFor: "seo-description",
+												children: "SEO Description"
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Textarea, {
+												id: "seo-description",
+												value: seoDescription,
+												onChange: (e) => setSeoDescription(e.target.value),
+												placeholder: "Description for search engines",
+												rows: 3
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex items-center justify-between gap-3",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "flex flex-col gap-0.5",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "text-foreground text-sm font-medium",
+													children: "Block Crawlers"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "text-muted-foreground text-xs",
+													children: "Prevent search engines from indexing"
+												})]
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Switch, {
+												checked: seoBlockCrawler,
+												onCheckedChange: setSeoBlockCrawler,
+												"aria-label": "Block search engine crawlers"
 											})]
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Switch, {
-											checked: seoBlockCrawler,
-											onCheckedChange: setSeoBlockCrawler,
-											"aria-label": "Block search engine crawlers"
-										})]
-									})
-								]
-							})
-						]
-					})
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CtaModal, {
-				open: isCtaModalOpen,
-				onOpenChange: setIsCtaModalOpen,
-				ctaEnabled,
-				ctaType,
-				ctaButtonText,
-				ctaUrl,
-				onDone: (ctaState) => {
-					setCtaEnabled(ctaState.enabled);
-					setCtaType(ctaState.type);
-					setCtaButtonText(ctaState.buttonText);
-					setCtaUrl(ctaState.url);
-				}
-			}),
-			filePickerContextValue && filePickerApi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerApiProvider, {
-				api: filePickerApi,
-				children: /* @__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,
-							allowedMethods: [
-								"dam",
-								"upload",
-								"url"
+										})
+									]
+								})
 							]
-						}
+						})
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CtaModal, {
+					open: isCtaModalOpen,
+					onOpenChange: setIsCtaModalOpen,
+					ctaEnabled,
+					ctaType,
+					ctaButtonText,
+					ctaUrl,
+					onDone: (ctaState) => {
+						setCtaEnabled(ctaState.enabled);
+						setCtaType(ctaState.type);
+						setCtaButtonText(ctaState.buttonText);
+						setCtaUrl(ctaState.url);
+					}
+				}),
+				filePickerContextValue && filePickerApi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerApiProvider, {
+					api: filePickerApi,
+					children: /* @__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,
+								allowedMethods: [
+									"dam",
+									"upload",
+									"url"
+								]
+							}
+						})
 					})
 				})
-			})
-		]
-	});
+			]
+		})
+	] });
 }
 //#endregion
 //#region ../../shareables/ui/src/components/playlists/PlaylistCard.tsx
@@ -9765,18 +9742,6 @@ function PlaylistsListingScreen(_props) {
 	const api = useShareablesApi();
 	const { navigate, showToast, user, onToggleFavorite, onDeletePlaylist, readOnly } = useShareablesUI();
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
-	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => readOnly ? null : /* @__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, readOnly]));
-	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: "Playlists"
-		}) })
-	}) }), []));
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [debouncedSearch, setDebouncedSearch] = (0, react.useState)("");
 	const [sortValue, setSortValue] = (0, react.useState)("title");
@@ -9981,115 +9946,131 @@ function PlaylistsListingScreen(_props) {
 		className: "bg-destructive/10 text-destructive rounded-lg px-3 py-2",
 		children: ["Error: ", error.message]
 	})] });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
-		isLoading,
-		filters: filterBar,
-		isEmpty: filteredPlaylists.length === 0 && !isFetchingNextPage && !hasNextPage,
-		emptyMessage: getFilteredEmptyMessage({
-			searchTerm,
-			ownerFilter,
-			entityName: "playlists",
-			defaultMessage: "There are no playlists available at the moment."
-		}),
-		footer,
-		sentinelRef: observerTarget,
-		loadingFilterShape: "search-view",
-		children: viewMode === "grid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: GRID_CLASS,
-			children: filteredPlaylists.map((playlist) => {
-				const firstItem = playlist.items?.[0];
-				const imageUrl = playlist.image_url ?? firstItem?.image_url ?? firstItem?.relateable?.image_url ?? firstItem?.relateable?.compressed_image_url;
-				const itemCount = playlist.items_count ?? playlist.items?.length ?? 0;
-				const canEdit = !readOnly && playlist.user_id === user?.id;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaylistCard, {
-					title: playlist.title || "Untitled Playlist",
-					imageUrl,
-					href: `playlists/${playlist.id}`,
-					itemCount,
-					isFavorited: playlist.is_favorited,
-					isSelectable: true,
-					isSelected: selectedIds.has(playlist.id),
-					canEdit,
-					onSelectionChange: (selected) => handleToggleSelection(playlist.id, selected),
-					onToggleFavorite: onToggleFavorite ? () => handleFavorite(playlist.id) : void 0,
-					onEdit: () => handleEdit(playlist.id),
-					onDelete: onDeletePlaylist ? () => setPendingDeleteId(playlist.id) : void 0
-				}, playlist.id);
-			})
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: SHAREABLE_LIST_CLASS,
-			children: filteredPlaylists.map((playlist) => {
-				const firstItem = playlist.items?.[0];
-				const imageUrl = playlist.image_url ?? firstItem?.image_url ?? firstItem?.relateable?.image_url ?? firstItem?.relateable?.compressed_image_url;
-				const itemCount = playlist.items_count ?? playlist.items?.length ?? 0;
-				const canEdit = !readOnly && playlist.user_id === user?.id;
-				const isSelected = selectedIds.has(playlist.id);
-				const title = playlist.title || "Untitled Playlist";
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListRow, {
-					imageUrl,
-					title,
-					subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Badge, {
-						variant: "secondary",
-						className: "px-1.5 py-0 text-[10px] leading-4",
-						children: [
-							itemCount,
-							" ",
-							itemCount === 1 ? "item" : "items"
-						]
-					}),
-					onClick: () => navigate(`playlists/${playlist.id}`),
-					leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Checkbox, {
-						checked: isSelected,
-						onCheckedChange: (checked) => handleToggleSelection(playlist.id, checked === true),
-						"aria-label": `Select ${title}`
-					}),
-					trailing: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [onToggleFavorite && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: () => handleFavorite(playlist.id),
-						"aria-label": playlist.is_favorited ? "Unfavorite" : "Favorite",
-						className: "hover:bg-muted-foreground/10 flex h-8 w-8 items-center justify-center rounded-md transition-colors",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Heart, { className: require_src.cn("h-4 w-4 transition-colors", playlist.is_favorited ? "fill-destructive text-destructive" : "text-muted-foreground") })
-					}), canEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
-						asChild: true,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-							variant: "ghost",
-							size: "sm",
-							className: "h-8 w-8 p-0",
-							"aria-label": "Playlist actions",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreVertical, { className: "h-4 w-4" })
-						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuContent, {
-						align: "end",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
-							onClick: () => handleEdit(playlist.id),
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "mr-2 h-4 w-4" }), "Edit"]
-						}), onDeletePlaylist && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
-							variant: "destructive",
-							onClick: () => setPendingDeleteId(playlist.id),
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "mr-2 h-4 w-4" }), "Delete"]
-						})] })]
-					})] })] })
-				}, playlist.id);
+	const isEmpty = filteredPlaylists.length === 0 && !isFetchingNextPage && !hasNextPage;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderActions, { children: readOnly ? null : /* @__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"]
+		}) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__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: "Playlists"
+			}) })
+		}) }) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
+			isLoading,
+			filters: filterBar,
+			isEmpty,
+			emptyMessage: getFilteredEmptyMessage({
+				searchTerm,
+				ownerFilter,
+				entityName: "playlists",
+				defaultMessage: "There are no playlists available at the moment."
+			}),
+			footer,
+			sentinelRef: observerTarget,
+			loadingFilterShape: "search-view",
+			children: viewMode === "grid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: GRID_CLASS,
+				children: filteredPlaylists.map((playlist) => {
+					const firstItem = playlist.items?.[0];
+					const imageUrl = playlist.image_url ?? firstItem?.image_url ?? firstItem?.relateable?.image_url ?? firstItem?.relateable?.compressed_image_url;
+					const itemCount = playlist.items_count ?? playlist.items?.length ?? 0;
+					const canEdit = !readOnly && playlist.user_id === user?.id;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaylistCard, {
+						title: playlist.title || "Untitled Playlist",
+						imageUrl,
+						href: `playlists/${playlist.id}`,
+						itemCount,
+						isFavorited: playlist.is_favorited,
+						isSelectable: true,
+						isSelected: selectedIds.has(playlist.id),
+						canEdit,
+						onSelectionChange: (selected) => handleToggleSelection(playlist.id, selected),
+						onToggleFavorite: onToggleFavorite ? () => handleFavorite(playlist.id) : void 0,
+						onEdit: () => handleEdit(playlist.id),
+						onDelete: onDeletePlaylist ? () => setPendingDeleteId(playlist.id) : void 0
+					}, playlist.id);
+				})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: SHAREABLE_LIST_CLASS,
+				children: filteredPlaylists.map((playlist) => {
+					const firstItem = playlist.items?.[0];
+					const imageUrl = playlist.image_url ?? firstItem?.image_url ?? firstItem?.relateable?.image_url ?? firstItem?.relateable?.compressed_image_url;
+					const itemCount = playlist.items_count ?? playlist.items?.length ?? 0;
+					const canEdit = !readOnly && playlist.user_id === user?.id;
+					const isSelected = selectedIds.has(playlist.id);
+					const title = playlist.title || "Untitled Playlist";
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListRow, {
+						imageUrl,
+						title,
+						subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Badge, {
+							variant: "secondary",
+							className: "px-1.5 py-0 text-[10px] leading-4",
+							children: [
+								itemCount,
+								" ",
+								itemCount === 1 ? "item" : "items"
+							]
+						}),
+						onClick: () => navigate(`playlists/${playlist.id}`),
+						leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Checkbox, {
+							checked: isSelected,
+							onCheckedChange: (checked) => handleToggleSelection(playlist.id, checked === true),
+							"aria-label": `Select ${title}`
+						}),
+						trailing: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [onToggleFavorite && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => handleFavorite(playlist.id),
+							"aria-label": playlist.is_favorited ? "Unfavorite" : "Favorite",
+							className: "hover:bg-muted-foreground/10 flex h-8 w-8 items-center justify-center rounded-md transition-colors",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Heart, { className: require_src.cn("h-4 w-4 transition-colors", playlist.is_favorited ? "fill-destructive text-destructive" : "text-muted-foreground") })
+						}), canEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+								variant: "ghost",
+								size: "sm",
+								className: "h-8 w-8 p-0",
+								"aria-label": "Playlist actions",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreVertical, { className: "h-4 w-4" })
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuContent, {
+							align: "end",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+								onClick: () => handleEdit(playlist.id),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "mr-2 h-4 w-4" }), "Edit"]
+							}), onDeletePlaylist && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+								variant: "destructive",
+								onClick: () => setPendingDeleteId(playlist.id),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "mr-2 h-4 w-4" }), "Delete"]
+							})] })]
+						})] })] })
+					}, playlist.id);
+				})
 			})
-		})
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
-		open: pendingDeleteId !== null,
-		onOpenChange: (open) => {
-			if (!open && !isDeleting) setPendingDeleteId(null);
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: "Delete this playlist?" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogDescription, { children: "This removes the playlist from your library. Shared links that point to it will stop working." })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
-			disabled: isDeleting,
-			children: "Cancel"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogAction, {
-			onClick: (e) => {
-				e.preventDefault();
-				confirmDelete();
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
+			open: pendingDeleteId !== null,
+			onOpenChange: (open) => {
+				if (!open && !isDeleting) setPendingDeleteId(null);
 			},
-			disabled: isDeleting,
-			className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-			children: isDeleting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Delete"
-		})] })] })
-	})] });
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: "Delete this playlist?" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogDescription, { children: "This removes the playlist from your library. Shared links that point to it will stop working." })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
+				disabled: isDeleting,
+				children: "Cancel"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogAction, {
+				onClick: (e) => {
+					e.preventDefault();
+					confirmDelete();
+				},
+				disabled: isDeleting,
+				className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				children: isDeleting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Delete"
+			})] })] })
+		})
+	] });
 }
 //#endregion
 //#region ../../shareables/ui/src/constants.ts
@@ -10262,40 +10243,6 @@ function PlaylistDetailScreen({ playlistId, onNavigate }) {
 	const playlist = playlistResponse?.playlist;
 	const canEdit = !readOnly && playlist?.user_id === user?.id;
 	const displayTitle = playlist?.title || "";
-	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => {
-		if (!canEdit) return null;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex items-center gap-2",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-				variant: "outline",
-				size: "sm",
-				onClick: () => navigate(`playlists/${playlistId}/edit`),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "mr-1 h-3.5 w-3.5" }), "Edit"]
-			})
-		});
-	}, [
-		canEdit,
-		navigate,
-		playlistId
-	]));
-	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();
-					navigate("playlists");
-				},
-				children: "Playlists"
-			}) }),
-			/* @__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: "block max-w-[60vw] truncate align-bottom font-semibold md:max-w-[60ch]",
-				children: displayTitle || "Playlist"
-			}) })
-		]
-	}) }), [displayTitle, navigate]));
 	const taggedProducts = playlist?.items?.filter((item) => item.relateable_type === "Product" || item.relateable_type === "EnrollmentPack").map((item) => item.relateable).filter((p) => !!p) || [];
 	const playableItems = playlist?.items?.filter((item) => item.relateable_type === "Medium" || item.relateable_type === "Page") ?? [];
 	const selectedPlaylistItem = playableItems[selectedPlaylistItemIndex] ?? playableItems[0];
@@ -10304,49 +10251,78 @@ function PlaylistDetailScreen({ playlistId, onNavigate }) {
 	const selectedKind = selectedPlaylistItem?.kind ?? selectedPlaylistItem?.relateable?.kind;
 	const displayVideo = selectedKind === "video" ? selectedPlaylistItem?.video_url ?? selectedPlaylistItem?.relateable?.video_url ?? void 0 : void 0;
 	const isVideo = selectedKind === "video" && !!displayVideo;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ShareableDetailLayout, {
-		isLoading,
-		notFound: !playlist,
-		notFoundMessage: "Playlist not found or failed to load.",
-		title: displayTitle,
-		description: displayDescription,
-		image: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "relative h-full overflow-hidden rounded-2xl",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SharePageImageDisplay, {
-				displayImage,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderActions, { children: canEdit ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex items-center gap-2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+				variant: "outline",
+				size: "sm",
+				onClick: () => navigate(`playlists/${playlistId}/edit`),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "mr-1 h-3.5 w-3.5" }), "Edit"]
+			})
+		}) : null }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__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();
+						navigate("playlists");
+					},
+					children: "Playlists"
+				}) }),
+				/* @__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: "block max-w-[60vw] truncate align-bottom font-semibold md:max-w-[60ch]",
+					children: displayTitle || "Playlist"
+				}) })
+			]
+		}) }) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ShareableDetailLayout, {
+			isLoading,
+			notFound: !playlist,
+			notFoundMessage: "Playlist not found or failed to load.",
+			title: displayTitle,
+			description: displayDescription,
+			image: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "relative h-full overflow-hidden rounded-2xl",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SharePageImageDisplay, {
+					displayImage,
+					displayTitle,
+					displayVideo,
+					isVideo,
+					badgeLabel: "Playlist"
+				})
+			}),
+			actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AssetActions, {
+				downloadUrl: null,
 				displayTitle,
-				displayVideo,
+				shareLink: shareLinkError ? null : shareLink || null,
+				shareLinkLoading,
 				isVideo,
-				badgeLabel: "Playlist"
-			})
-		}),
-		actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AssetActions, {
-			downloadUrl: null,
-			displayTitle,
-			shareLink: shareLinkError ? null : shareLink || null,
-			shareLinkLoading,
-			isVideo,
-			relateableId: Number(playlistId),
-			relateableType: "Library"
-		}),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Separator, { className: "border-foreground my-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "bg-background rounded-lg",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TaggedProductsList, {
-				products: taggedProducts,
-				onProductClick: (productId) => onNavigate?.("product", String(productId))
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaylistItemsList, {
-				items: playableItems,
-				onSelectItem: setSelectedPlaylistItemIndex,
-				selectedItemIndex: selectedPlaylistItemIndex,
-				onNavigateToItem: (itemId, relateableType) => {
-					if (!NAVIGABLE_RELATEABLE_TYPES.has(relateableType ?? "")) return;
-					if (relateableType === "Product") onNavigate?.("product", String(itemId));
-					else if (relateableType === "Page") onNavigate?.("page", String(itemId));
-					else if (relateableType === "Medium") onNavigate?.("media", String(itemId));
-				}
+				relateableId: Number(playlistId),
+				relateableType: "Library"
+			}),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Separator, { className: "border-foreground my-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "bg-background rounded-lg",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TaggedProductsList, {
+					products: taggedProducts,
+					onProductClick: (productId) => onNavigate?.("product", String(productId))
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaylistItemsList, {
+					items: playableItems,
+					onSelectItem: setSelectedPlaylistItemIndex,
+					selectedItemIndex: selectedPlaylistItemIndex,
+					onNavigateToItem: (itemId, relateableType) => {
+						if (!NAVIGABLE_RELATEABLE_TYPES.has(relateableType ?? "")) return;
+						if (relateableType === "Product") onNavigate?.("product", String(itemId));
+						else if (relateableType === "Page") onNavigate?.("page", String(itemId));
+						else if (relateableType === "Medium") onNavigate?.("media", String(itemId));
+					}
+				})]
 			})]
-		})]
-	});
+		})
+	] });
 }
 //#endregion
 //#region ../../shareables/ui/src/components/playlists/form/PlaylistFormProvider.tsx
@@ -10542,78 +10518,72 @@ function PlaylistFormHeader({ playlistId, isEditMode, onSubmit, isSaving }) {
 			setIsDeleteOpen(false);
 		}
 	};
-	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.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-				variant: "outline",
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderActions, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2",
+			children: [playlistId && onDeletePlaylist && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+					variant: "outline",
+					size: "sm",
+					className: "h-8 w-8 p-0",
+					"aria-label": "Playlist actions",
+					disabled: isMutating,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreVertical, { className: "h-4 w-4" })
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuContent, {
+				align: "end",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+					onClick: () => setIsDeleteOpen(true),
+					className: "text-destructive focus:text-destructive",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "mr-2 h-4 w-4" }), "Delete"]
+				})
+			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+				onClick: () => {
+					onSubmit().catch(() => {});
+				},
+				disabled: isMutating || !isDirty || !isFormValid,
 				size: "sm",
-				className: "h-8 w-8 p-0",
-				"aria-label": "Playlist actions",
-				disabled: isMutating,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreVertical, { className: "h-4 w-4" })
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuContent, {
-			align: "end",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
-				onClick: () => setIsDeleteOpen(true),
-				className: "text-destructive focus:text-destructive",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "mr-2 h-4 w-4" }), "Delete"]
-			})
-		})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-			onClick: () => {
-				onSubmit().catch(() => {});
+				children: isSaving ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Save"
+			})]
+		}) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__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();
+						navigate("playlists");
+					},
+					children: "Playlists"
+				}) }),
+				/* @__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: isEditMode ? "Edit Playlist" : "New Playlist"
+				}) })
+			]
+		}) }) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
+			open: isDeleteOpen,
+			onOpenChange: (open) => {
+				if (!open && !isDeleting) setIsDeleteOpen(false);
 			},
-			disabled: isMutating || !isDirty || !isFormValid,
-			size: "sm",
-			children: isSaving ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Save"
-		})]
-	}), [
-		playlistId,
-		onDeletePlaylist,
-		isMutating,
-		isDirty,
-		isFormValid,
-		isSaving,
-		onSubmit
-	]));
-	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: "#",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: "Delete this playlist?" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogDescription, { children: "This removes the playlist from your library. Shared links that point to it will stop working." })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
+				disabled: isDeleting,
+				children: "Cancel"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogAction, {
 				onClick: (e) => {
 					e.preventDefault();
-					navigate("playlists");
+					handleDelete();
 				},
-				children: "Playlists"
-			}) }),
-			/* @__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: isEditMode ? "Edit Playlist" : "New Playlist"
-			}) })
-		]
-	}) }), [isEditMode, navigate]));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
-		open: isDeleteOpen,
-		onOpenChange: (open) => {
-			if (!open && !isDeleting) setIsDeleteOpen(false);
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: "Delete this playlist?" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogDescription, { children: "This removes the playlist from your library. Shared links that point to it will stop working." })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
-			disabled: isDeleting,
-			children: "Cancel"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogAction, {
-			onClick: (e) => {
-				e.preventDefault();
-				handleDelete();
-			},
-			disabled: isDeleting,
-			className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-			children: isDeleting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Delete"
-		})] })] })
-	});
+				disabled: isDeleting,
+				className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				children: isDeleting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Delete"
+			})] })] })
+		})
+	] });
 }
 //#endregion
 //#region ../../shareables/ui/src/components/playlists/form/PlaylistFormDetails.tsx
@@ -11300,42 +11270,6 @@ function PlaylistFormContent({ playlistId, playlist, isEditMode, itemsToUse, onB
 	const { form, updateField, validateForm } = usePlaylistForm();
 	const playlistTitle = form.title || "";
 	const slugValue = form.slug ?? "";
-	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("playlists")))();
-			},
-			children: "Playlists"
-		}) }), isEditMode ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			/* @__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.BreadcrumbLink, {
-				href: "#",
-				onClick: (e) => {
-					e.preventDefault();
-					navigate(`playlists/${playlistId}`);
-				},
-				className: "block max-w-[40vw] truncate align-bottom md:max-w-[60ch]",
-				children: playlistTitle || "Playlist"
-			}) }),
-			/* @__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: "Edit"
-			}) })
-		] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__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 Playlist"
-		}) })] })]
-	}) }), [
-		isEditMode,
-		playlistTitle,
-		onBack,
-		navigate,
-		playlistId
-	]));
 	(0, react.useEffect)(() => {
 		const isCustomSlug = form.custom_slug || playlist?.custom_slug || false;
 		if (playlistTitle && !isCustomSlug) {
@@ -11462,6 +11396,36 @@ function PlaylistFormContent({ playlistId, playlist, isEditMode, itemsToUse, onB
 		await onSaveForm();
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__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("playlists")))();
+				},
+				children: "Playlists"
+			}) }), isEditMode ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__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.BreadcrumbLink, {
+					href: "#",
+					onClick: (e) => {
+						e.preventDefault();
+						navigate(`playlists/${playlistId}`);
+					},
+					className: "block max-w-[40vw] truncate align-bottom md:max-w-[60ch]",
+					children: playlistTitle || "Playlist"
+				}) }),
+				/* @__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: "Edit"
+				}) })
+			] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__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 Playlist"
+			}) })] })]
+		}) }) }),
 		renderHeaderSlot?.({
 			onSubmit: handleSubmit,
 			isSaving,
@@ -11537,13 +11501,6 @@ const DEFAULT_IMAGE$1 = "https://assets.fluid.app/fluid-admin/images/we-commerce
 function FilesListingScreen({ onNavigate }) {
 	const api = useShareablesApi();
 	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)("");
 	(0, react.useEffect)(() => {
@@ -11581,7 +11538,13 @@ function FilesListingScreen({ onNavigate }) {
 		className: "bg-destructive/10 text-destructive rounded-lg px-3 py-2",
 		children: "Failed to load files. Please try again."
 	})] });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__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"
+		}) })
+	}) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
 		isLoading,
 		isEmpty: !error && files.length === 0 && !isFetchingNextPage && !hasNextPage,
 		emptyMessage: debouncedSearch ? `No files match "${debouncedSearch}". Try a different search term.` : "No files available.",
@@ -11649,7 +11612,7 @@ function FilesListingScreen({ onNavigate }) {
 				}, file.id);
 			})
 		})
-	});
+	})] });
 }
 //#endregion
 //#region ../../shareables/ui/src/components/screens/PagesListingScreen.tsx
@@ -11661,13 +11624,6 @@ function toApiSort(value) {
 function PagesListingScreen({ onNavigate }) {
 	const api = useShareablesApi();
 	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: "Pages"
-		}) })
-	}) }), []));
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [debouncedSearch, setDebouncedSearch] = (0, react.useState)("");
 	const [sortValue, setSortValue] = (0, react.useState)("newest");
@@ -11711,7 +11667,13 @@ function PagesListingScreen({ onNavigate }) {
 		hasNextPage,
 		isFetchingNextPage
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__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: "Pages"
+		}) })
+	}) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
 		isLoading,
 		error,
 		errorMessage: "Failed to load pages. Please try again.",
@@ -11790,7 +11752,7 @@ function PagesListingScreen({ onNavigate }) {
 				}, page.id);
 			})
 		})
-	});
+	})] });
 }
 //#endregion
 //#region ../../shareables/ui/src/components/screens/PageDetailScreen.tsx
@@ -11809,7 +11771,7 @@ function PageDetailScreen({ pageId, onBack }) {
 		id: page?.id,
 		share_link: pageResponse?.share_link ?? void 0
 	}, "Page");
-	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, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__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, {
@@ -11826,12 +11788,7 @@ function PageDetailScreen({ pageId, onBack }) {
 				children: displayTitle || "Page"
 			}) })
 		]
-	}) }), [
-		displayTitle,
-		onBack,
-		navigate
-	]));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableDetailLayout, {
+	}) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableDetailLayout, {
 		isLoading,
 		notFound: !page && !isLoading,
 		notFoundMessage: "Page not found or failed to load.",
@@ -11862,7 +11819,7 @@ function PageDetailScreen({ pageId, onBack }) {
 			relateableId: page.id,
 			relateableType: "Page"
 		})
-	});
+	})] });
 }
 //#endregion
 //#region ../../shareables/ui/src/components/ShareablesApp.tsx
@@ -13497,4 +13454,4 @@ Object.defineProperty(exports, "shareablesScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ShareablesScreen-DwxcReCu.cjs.map
+//# sourceMappingURL=ShareablesScreen-C6pCPvmx.cjs.map