@fluid-app/portal-sdk 0.1.206 → 0.1.207

package/dist/{PortalContentApiProvider-DqAbDYgq.cjs → PortalContentApiProvider-C5WzWC3k.cjs}

@@ -8,7 +8,7 @@ const require_es = require("./es-DHLLltoR.cjs");
 const require_SearchSort = require("./SearchSort-ztRXlRwu.cjs");
 const require_dist$4 = require("./dist-DDZMFlal.cjs");
 const require_dist$5 = require("./dist-DWs3-WOI.cjs");
-const require_PortalProductsApiProvider = require("./PortalProductsApiProvider-DaQUq6vq.cjs");
+const require_PortalProductsApiProvider = require("./PortalProductsApiProvider-Ca1oeTtJ.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let _tanstack_react_query = require("@tanstack/react-query");
@@ -510,9 +510,76 @@ function ShareProductCard({ product, mediaCount }) {
 	});
 }
 //#endregion
+//#region ../../shareables/ui/src/components/shared/ShareableListLayout.tsx
+/**
+* Grid column class shared by all shareable listing screens (products, media,
+* playlists, files). Exposed so the list-content slot can reuse it directly.
+*/
+const SHAREABLE_GRID_CLASS = "grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4";
+/**
+* Standard page chrome for shareable listing screens. Provides:
+*
+* - Page-level padding (matching all existing listing screens).
+* - Loading skeleton (filter bar + grid of 8 card placeholders).
+* - Inline error rendering.
+* - Empty state rendering.
+* - Optional filter/footer/sentinel slots.
+*
+* Domain-specific UI (cards, rows, filter controls) is slotted in via
+* `filters` and `children`. This component does NOT own data fetching or
+* any state — callers pass in the derived flags.
+*/
+function ShareableListLayout({ filters, children, isLoading, error, errorMessage = "Failed to load. Please try again.", isEmpty, emptyMessage, footer, loadingFilterShape = "search", sentinelRef }) {
+	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-3",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-10 flex-1" }),
+				loadingFilterShape === "search-view" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-10 w-10" }),
+				loadingFilterShape === "search-action" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-10 w-24" })
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: SHAREABLE_GRID_CLASS,
+			children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "aspect-square w-full rounded-lg" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-3/4" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3 w-1/2" })
+				]
+			}, i))
+		})]
+	});
+	if (error) 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: errorMessage
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
+		children: [
+			filters,
+			isEmpty ? /* @__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-muted-foreground text-sm",
+					children: emptyMessage
+				})
+			}) : children,
+			footer,
+			sentinelRef && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: sentinelRef,
+				className: "h-1"
+			})
+		]
+	});
+}
+//#endregion
 //#region ../../shareables/ui/src/components/screens/ProductsScreen.tsx
 const PAGE_SIZE$4 = 24;
-const GRID_CLASS$3 = "grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4";
 const SORT_OPTIONS$1 = [
 	{
 		label: "Newest",
@@ -632,73 +699,42 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 			media_count: void 0
 		})) ?? [];
 	}, [data, usePortal]);
-	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex items-center gap-3",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-10 flex-1" })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: GRID_CLASS$3,
-			children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "space-y-2",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "aspect-square w-full rounded-lg" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-3/4" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3 w-1/2" })
-				]
-			}, i))
-		})]
-	});
-	if (error) 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: "Failed to load products. Please try again."
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex justify-end",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "w-full max-w-sm",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
-						searchValue: searchTerm,
-						onSearchChange: setSearchTerm,
-						placeholder: "Search products...",
-						sortOptions: SORT_OPTIONS$1,
-						sortValue,
-						onSortChange: setSortValue
-					})
-				})
-			}),
-			products.length === 0 ? /* @__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-muted-foreground text-sm",
-					children: debouncedSearch ? "No products match your search." : "No products available."
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
+		isLoading,
+		error,
+		errorMessage: "Failed to load products. Please try again.",
+		isEmpty: products.length === 0,
+		emptyMessage: debouncedSearch ? "No products match your search." : "No products available.",
+		filters: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex justify-end",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "w-full max-w-sm",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
+					searchValue: searchTerm,
+					onSearchChange: setSearchTerm,
+					placeholder: "Search products...",
+					sortOptions: SORT_OPTIONS$1,
+					sortValue,
+					onSortChange: setSortValue
 				})
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: GRID_CLASS$3,
-				children: products.map((product) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareProductCard, {
-					product: {
-						id: product.id,
-						title: product.title,
-						image_url: product.image_url
-					},
-					mediaCount: product.media_count
-				}, product.id))
-			}),
-			isFetchingNextPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex justify-center py-4",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				ref: observerTarget,
-				className: "h-1"
 			})
-		]
+		}),
+		footer: isFetchingNextPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex justify-center py-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
+		}),
+		sentinelRef: observerTarget,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: SHAREABLE_GRID_CLASS,
+			children: products.map((product) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareProductCard, {
+				product: {
+					id: product.id,
+					title: product.title,
+					image_url: product.image_url
+				},
+				mediaCount: product.media_count
+			}, product.id))
+		})
 	});
 }
 //#endregion
@@ -1217,13 +1253,85 @@ function MarketingAssetsGrid({ isLoading, error, activeTab, onTabChange, mediaIt
 }
 var MarketingAssetsGrid_default = react.default.memo(MarketingAssetsGrid);
 //#endregion
+//#region ../../shareables/ui/src/components/shared/ShareableDetailLayout.tsx
+/**
+* Standard page chrome for shareable detail screens (product/media/playlist).
+* Provides the two-column hero + details layout, loading/not-found states,
+* title, and the read-more description block.
+*
+* Domain-specific chrome (breadcrumbs, header actions) is still wired up by
+* each screen via the shell header context — this layout purposefully does
+* NOT touch the shell header. Dialogs (delete confirmation, etc.) belong to
+* the caller and should be rendered as siblings to this component.
+*/
+function ShareableDetailLayout({ isLoading, notFound, notFoundMessage = "Not found or failed to load.", title, description, image, actions, meta, children, containerHeightClass = "md:h-[calc(100vh-140px)]" }) {
+	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 (notFound) 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: notFoundMessage
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex flex-col gap-4 px-4 py-4 md:px-10 md:py-6",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `mx-auto flex w-full max-w-[480px] flex-col gap-6 md:max-w-none md:flex-row ${containerHeightClass}`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "aspect-square w-full md:aspect-auto md:h-full",
+				children: image
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex w-full flex-col md:overflow-y-auto",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+							className: "text-foreground text-[26px] leading-[1.2] font-semibold break-words",
+							children: title
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableDescription, { html: description }),
+						meta,
+						actions
+					]
+				}), children]
+			})]
+		})
+	});
+}
+/**
+* Read-more description block. Extracted so detail screens don't have to
+* reimplement the identical toggle + line-clamp logic. Pass the raw HTML
+* (e.g. mediaItem.description.body) — tags are stripped internally.
+*/
+function ShareableDescription({ html, threshold = 150 }) {
+	const [isExpanded, setIsExpanded] = (0, react.useState)(false);
+	const stripped = stripTags(html ?? "");
+	if (!stripped) return null;
+	const shouldShowReadMore = stripped.length > threshold;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "text-foreground/70 text-sm leading-relaxed",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: !isExpanded && shouldShowReadMore ? "line-clamp-3" : "",
+			children: stripped
+		}), shouldShowReadMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+			onClick: () => setIsExpanded((prev) => !prev),
+			variant: "ghost",
+			size: "sm",
+			className: "text-foreground hover:text-foreground/80 mt-1 h-auto p-0 text-xs font-normal underline",
+			children: isExpanded ? "Read less" : "Read more"
+		})]
+	});
+}
+//#endregion
 //#region ../../shareables/ui/src/components/screens/ProductDetailScreen.tsx
 function ProductDetailScreen({ productId, countryCode, fetchProduct: fetchPortalProduct, onNavigate, onBack }) {
 	const api = useShareablesApi();
 	const client = useShareablesClient();
 	const { navigate } = useShareablesUI();
 	const [activeTab, setActiveTab] = (0, react.useState)("All");
-	const [isDescriptionExpanded, setIsDescriptionExpanded] = (0, react.useState)(false);
 	const { data: portalProductResponse, isLoading: isLoadingPortalProduct } = (0, _tanstack_react_query.useQuery)({
 		queryKey: [
 			"portal-products",
@@ -1279,8 +1387,6 @@ function ProductDetailScreen({ productId, countryCode, fetchProduct: fetchPortal
 		onBack,
 		navigate
 	]));
-	const strippedDescription = stripTags(displayDescription);
-	const shouldShowReadMore = strippedDescription.length > 150;
 	const displayPrice = (() => {
 		if (legacyProduct?.display_price) return legacyProduct.display_price;
 		const price = portalProduct?.price ?? legacyProduct?.price;
@@ -1313,114 +1419,74 @@ function ProductDetailScreen({ productId, countryCode, fetchProduct: fetchPortal
 	const handleMediaItemClick = (0, react.useCallback)((mediaItem) => {
 		onNavigate?.("media", String(mediaItem.id));
 	}, [onNavigate]);
-	if (isLoadingProduct) 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 (!product) 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: "Product not found or failed to load."
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "flex flex-col gap-4 px-4 py-4 md:px-10 md:py-6",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mx-auto flex w-full max-w-480 flex-col gap-6 md:h-[calc(100vh-140px)] md:flex-row",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "aspect-square w-full md:aspect-auto md:h-full",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "relative h-full overflow-hidden rounded-2xl",
-					children: !productImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "bg-muted flex h-full w-full flex-col items-center justify-center rounded-2xl",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "mb-2 text-gray-400",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Image, { className: "mx-auto h-12 w-12" })
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "mb-1 text-sm text-gray-500",
-								children: "No Product Image"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "text-xs text-gray-400",
-								children: "This product does not have any associated media"
-							})
-						]
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SharePageImageDisplay, {
-						displayImage: productImage,
-						displayTitle,
-						isVideo: false,
-						badgeLabel: "Product"
-					})
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex w-full flex-col md:overflow-y-auto",
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ShareableDetailLayout, {
+		isLoading: isLoadingProduct,
+		notFound: !product,
+		notFoundMessage: "Product 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: !productImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "bg-muted flex h-full w-full flex-col items-center justify-center rounded-2xl",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "space-y-4",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-								className: "text-foreground text-[26px] leading-[1.2] font-semibold",
-								children: displayTitle
-							}),
-							strippedDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "text-foreground/70 text-sm leading-relaxed",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: !isDescriptionExpanded && shouldShowReadMore ? "line-clamp-3" : "",
-									children: strippedDescription
-								}), shouldShowReadMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-									onClick: () => setIsDescriptionExpanded(!isDescriptionExpanded),
-									variant: "ghost",
-									size: "sm",
-									className: "text-foreground hover:text-foreground/80 mt-1 h-auto p-0 text-xs font-normal underline",
-									children: isDescriptionExpanded ? "Read less" : "Read more"
-								})]
-							}),
-							displayPrice && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "text-foreground flex items-center gap-2 text-sm",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "font-semibold",
-										children: "Price"
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "|" }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "font-semibold",
-										children: displayPrice
-									})
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AssetActions, {
-								downloadUrl: productImage || null,
-								displayTitle,
-								shareLink: shareLinkError ? null : shareLink || null,
-								shareLinkLoading,
-								isVideo: false,
-								relateableId: Number(productId),
-								relateableType: "Product"
-							})
-						]
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mb-2 text-gray-400",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Image, { className: "mx-auto h-12 w-12" })
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Separator, { className: "border-foreground my-4" }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "hide-scrollbar bg-background h-full overflow-y-auto rounded-lg",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarketingAssetsGrid_default, {
-							isLoading: isLoadingMedia,
-							error: mediaError,
-							activeTab,
-							onTabChange: setActiveTab,
-							mediaItems: filteredMediaItems,
-							onMediaItemClick: handleMediaItemClick,
-							showEmptyState: !hasMedia,
-							activeMainTab: "Related Sharables",
-							relateable_type: "Product"
-						})
+						className: "mb-1 text-sm text-gray-500",
+						children: "No Product Image"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-xs text-gray-400",
+						children: "This product does not have any associated media"
 					})
 				]
-			})]
-		})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SharePageImageDisplay, {
+				displayImage: productImage,
+				displayTitle,
+				isVideo: false,
+				badgeLabel: "Product"
+			})
+		}),
+		meta: displayPrice ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "text-foreground flex items-center gap-2 text-sm",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-semibold",
+					children: "Price"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "|" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-semibold",
+					children: displayPrice
+				})
+			]
+		}) : null,
+		actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AssetActions, {
+			downloadUrl: productImage || null,
+			displayTitle,
+			shareLink: shareLinkError ? null : shareLink || null,
+			shareLinkLoading,
+			isVideo: false,
+			relateableId: Number(productId),
+			relateableType: "Product"
+		}),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Separator, { className: "border-foreground my-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "hide-scrollbar bg-background h-full overflow-y-auto rounded-lg",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarketingAssetsGrid_default, {
+				isLoading: isLoadingMedia,
+				error: mediaError,
+				activeTab,
+				onTabChange: setActiveTab,
+				mediaItems: filteredMediaItems,
+				onMediaItemClick: handleMediaItemClick,
+				showEmptyState: !hasMedia,
+				activeMainTab: "Related Sharables",
+				relateable_type: "Product"
+			})
+		})]
 	});
 }
 //#endregion
@@ -1455,7 +1521,6 @@ function OwnerFilterTabs({ value, onValueChange, myLabel = "Mine" }) {
 //#endregion
 //#region ../../shareables/ui/src/components/screens/MediaListingScreen.tsx
 const PAGE_SIZE$3 = 24;
-const GRID_CLASS$2 = "grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4";
 function getMediaKindLabel(kind) {
 	switch (kind) {
 		case "video": return "Video";
@@ -1575,229 +1640,203 @@ function MediaListingScreen({ onNavigate }) {
 	const allItems = data?.media ?? [];
 	const ownerFiltered = ownerFilter === "all" ? allItems : ownerFilter === "my" ? allItems.filter((item) => item.owner_type === "user") : allItems.filter((item) => item.owner_type === "company");
 	const filteredItems = kindFilter === "all" ? ownerFiltered : ownerFiltered.filter((item) => kindBucket(item.kind) === kindFilter);
-	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-10 flex-1" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-10 w-10" })]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: GRID_CLASS$2,
-			children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "space-y-2",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "aspect-square w-full rounded-lg" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-3/4" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3 w-1/2" })
-				]
-			}, i))
-		})]
-	});
-	if (error) 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: "Failed to load media. Please try again."
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OwnerFilterTabs, {
-					value: ownerFilter,
-					onValueChange: setOwnerFilter,
-					myLabel: "My Media"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "ml-auto flex items-center gap-2",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "w-full max-w-sm",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
-								searchValue: searchTerm,
-								onSearchChange: setSearchTerm,
-								placeholder: "Search media...",
-								sortOptions: [{
-									label: "Name (A-Z)",
-									value: "title_asc"
-								}, {
-									label: "Name (Z-A)",
-									value: "title_desc"
-								}],
-								sortValue,
-								onSortChange: setSortValue
-							})
-						}),
-						/* @__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.jsxs)(require_src.Button, {
-								variant: "outline",
-								"aria-label": `Filter: ${kindFilter === "all" ? "All types" : kindFilter}`,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Filter, { className: "size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "hidden sm:inline",
-									children: kindFilter === "all" ? "All types" : kindFilter === "image" ? "Images" : kindFilter === "video" ? "Videos" : "PDFs"
-								})]
-							})
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuContent, {
-							align: "end",
-							children: [
-								{
-									label: "All types",
-									value: "all"
-								},
-								{
-									label: "Images",
-									value: "image"
-								},
-								{
-									label: "Videos",
-									value: "video"
-								},
-								{
-									label: "PDFs",
-									value: "pdf"
-								}
-							].map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
-								onClick: () => setKindFilter(opt.value),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "flex-1",
-									children: opt.label
-								}), kindFilter === opt.value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "text-muted-foreground size-4" })]
-							}, opt.value))
-						})] }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "border-input bg-muted flex items-center rounded-lg border p-0.5",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								onClick: () => setViewMode("list"),
-								className: `flex h-8 w-8 items-center justify-center rounded-md transition-all ${viewMode === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
-								title: "List view",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.List, { className: "h-4 w-4" })
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								onClick: () => setViewMode("grid"),
-								className: `flex h-8 w-8 items-center justify-center rounded-md transition-all ${viewMode === "grid" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
-								title: "Grid view",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LayoutGrid, { className: "h-4 w-4" })
-							})]
-						})
-					]
-				})]
-			}),
-			filteredItems.length === 0 ? /* @__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-muted-foreground text-sm",
-					children: getFilteredEmptyMessage({
-						searchTerm: debouncedSearch,
-						ownerFilter,
-						hasOtherFilters: kindFilter !== "all",
-						entityName: "media",
-						defaultMessage: "No media available."
+	const filterBar = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OwnerFilterTabs, {
+			value: ownerFilter,
+			onValueChange: setOwnerFilter,
+			myLabel: "My Media"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "ml-auto flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "w-full max-w-sm",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
+						searchValue: searchTerm,
+						onSearchChange: setSearchTerm,
+						placeholder: "Search media...",
+						sortOptions: [{
+							label: "Name (A-Z)",
+							value: "title_asc"
+						}, {
+							label: "Name (Z-A)",
+							value: "title_desc"
+						}],
+						sortValue,
+						onSortChange: setSortValue
 					})
-				})
-			}) : viewMode === "grid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: GRID_CLASS$2,
-				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) })
+				}),
+				/* @__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.jsxs)(require_src.Button, {
+						variant: "outline",
+						"aria-label": `Filter: ${kindFilter === "all" ? "All types" : kindFilter}`,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Filter, { className: "size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "hidden sm:inline",
+							children: kindFilter === "all" ? "All types" : kindFilter === "image" ? "Images" : kindFilter === "video" ? "Videos" : "PDFs"
 						})]
-					}, item.id);
-				})
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "divide-border divide-y rounded-lg border",
-				children: filteredItems.map((item) => {
-					const canEdit = !readOnly && item.owner_type === "user";
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "hover:bg-muted flex items-center gap-4 px-4 py-3 transition-colors",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							onClick: () => navigate(`media/${item.id}`),
-							className: "flex min-w-0 flex-1 items-center gap-4 text-left",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "bg-muted h-12 w-12 shrink-0 overflow-hidden rounded-md",
-								children: item.image_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-									src: item.image_url,
-									alt: item.title ?? "",
-									className: "h-full w-full object-cover"
-								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-full w-full" })
-							}), /* @__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-sm font-medium",
-									children: item.title ?? "Untitled"
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-									className: "text-muted-foreground flex items-center gap-1.5 text-xs",
-									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)(MediaRowActionsMenu, { onDelete: () => setPendingDeleteId(item.id) })]
-					}, item.id);
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuContent, {
+					align: "end",
+					children: [
+						{
+							label: "All types",
+							value: "all"
+						},
+						{
+							label: "Images",
+							value: "image"
+						},
+						{
+							label: "Videos",
+							value: "video"
+						},
+						{
+							label: "PDFs",
+							value: "pdf"
+						}
+					].map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+						onClick: () => setKindFilter(opt.value),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "flex-1",
+							children: opt.label
+						}), kindFilter === opt.value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "text-muted-foreground size-4" })]
+					}, opt.value))
+				})] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border-input bg-muted flex items-center rounded-lg border p-0.5",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => setViewMode("list"),
+						className: `flex h-8 w-8 items-center justify-center rounded-md transition-all ${viewMode === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						title: "List view",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.List, { className: "h-4 w-4" })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => setViewMode("grid"),
+						className: `flex h-8 w-8 items-center justify-center rounded-md transition-all ${viewMode === "grid" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						title: "Grid view",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LayoutGrid, { className: "h-4 w-4" })
+					})]
 				})
+			]
+		})]
+	});
+	const paginationFooter = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-center gap-4 pt-4",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+				variant: "outline",
+				size: "sm",
+				onClick: () => setPage((p) => p - 1),
+				disabled: page === 1 || isFetching,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "h-4 w-4" }), "Previous"]
 			}),
-			/* @__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.jsxs)("span", {
+				className: "text-muted-foreground text-sm",
+				children: ["Page ", page]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center justify-center gap-4 pt-4",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-						variant: "outline",
-						size: "sm",
-						onClick: () => setPage((p) => p - 1),
-						disabled: page === 1 || isFetching,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "h-4 w-4" }), "Previous"]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "text-muted-foreground text-sm",
-						children: ["Page ", page]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-						variant: "outline",
-						size: "sm",
-						onClick: () => setPage((p) => p + 1),
-						disabled: !hasNextPage || isFetching,
-						children: ["Next", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "h-4 w-4" })]
-					})
-				]
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+				variant: "outline",
+				size: "sm",
+				onClick: () => setPage((p) => p + 1),
+				disabled: !hasNextPage || isFetching,
+				children: ["Next", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "h-4 w-4" })]
+			})
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
+		isLoading,
+		error,
+		errorMessage: "Failed to load media. Please try again.",
+		isEmpty: filteredItems.length === 0,
+		emptyMessage: getFilteredEmptyMessage({
+			searchTerm: debouncedSearch,
+			ownerFilter,
+			hasOtherFilters: kindFilter !== "all",
+			entityName: "media",
+			defaultMessage: "No media available."
+		}),
+		filters: filterBar,
+		footer: paginationFooter,
+		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: "divide-border divide-y rounded-lg border",
+			children: filteredItems.map((item) => {
+				const canEdit = !readOnly && item.owner_type === "user";
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "hover:bg-muted flex items-center gap-4 px-4 py-3 transition-colors",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick: () => navigate(`media/${item.id}`),
+						className: "flex min-w-0 flex-1 items-center gap-4 text-left",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "bg-muted h-12 w-12 shrink-0 overflow-hidden rounded-md",
+							children: item.image_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+								src: item.image_url,
+								alt: item.title ?? "",
+								className: "h-full w-full object-cover"
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-full w-full" })
+						}), /* @__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-sm font-medium",
+								children: item.title ?? "Untitled"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "text-muted-foreground flex items-center gap-1.5 text-xs",
+								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)(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"
+		})] })] })
+	})] });
 }
 //#endregion
 //#region ../../shareables/ui/src/components/screens/MediaDetailScreen.tsx
@@ -1813,7 +1852,6 @@ function MediaDetailScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 	const api = useShareablesApi();
 	const repContext = useRepContext();
 	const { navigate, readOnly } = useShareablesUI();
-	const [isDescriptionExpanded, setIsDescriptionExpanded] = (0, react.useState)(false);
 	const { data: mediaResponse, isLoading } = (0, _tanstack_react_query.useQuery)({
 		queryKey: shareablesKeys.media.detail(Number(mediaId), repContext),
 		queryFn: () => api.media.getMediaById(Number(mediaId))
@@ -1862,75 +1900,38 @@ function MediaDetailScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 		mediaId
 	]));
 	const badgeLabel = getBadgeLabel(mediaItem?.kind ?? null);
-	const strippedDescription = stripTags(mediaItem?.description?.body || mediaItem?.stripped || "");
-	const shouldShowReadMore = strippedDescription.length > 150;
+	const rawDescription = mediaItem?.description?.body || mediaItem?.stripped || "";
 	const downloadUrl = isVideo ? displayVideo : mediaItem?.pdf_url || displayImage;
-	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.jsx)("div", {
-		className: "flex flex-col gap-4 px-4 py-4 md:px-10 md:py-6",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mx-auto flex w-full max-w-[480px] flex-col gap-6 md:h-[calc(95vh-140px)] md:max-w-none md:flex-row",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "aspect-square w-full md:aspect-auto md:h-full",
-				children: /* @__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
-					})]
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex w-full flex-col md:overflow-y-auto",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "space-y-4",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-							className: "text-foreground text-[26px] leading-[1.2] font-semibold break-words",
-							children: displayTitle
-						}),
-						strippedDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "text-foreground/70 text-sm leading-relaxed",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: !isDescriptionExpanded && shouldShowReadMore ? "line-clamp-3" : "",
-								children: strippedDescription
-							}), shouldShowReadMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-								onClick: () => setIsDescriptionExpanded(!isDescriptionExpanded),
-								variant: "ghost",
-								size: "sm",
-								className: "text-foreground hover:text-foreground/80 mt-1 h-auto p-0 text-xs font-normal underline",
-								children: isDescriptionExpanded ? "Read less" : "Read more"
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AssetActions, {
-							downloadUrl: downloadUrl || null,
-							displayTitle,
-							shareLink: shareLinkError ? null : shareLink || null,
-							shareLinkLoading,
-							isVideo,
-							relateableId: Number(mediaId),
-							relateableType: "Medium"
-						})
-					]
-				})
+	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,
+				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,
+			shareLink: shareLinkError ? null : shareLink || null,
+			shareLinkLoading,
+			isVideo,
+			relateableId: Number(mediaId),
+			relateableType: "Medium"
 		})
 	});
 }
@@ -8917,7 +8918,7 @@ function BulkSelectionBar({ selectedCount, totalCount, onSelectAll, onClearSelec
 //#endregion
 //#region ../../shareables/ui/src/components/screens/PlaylistsListingScreen.tsx
 const PAGE_SIZE$1 = 12;
-const GRID_CLASS$1 = "grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4";
+const GRID_CLASS = "grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4";
 function PlaylistsListingScreen(_props) {
 	const api = useShareablesApi();
 	const { navigate, showToast, user, onToggleFavorite, onDeletePlaylist, readOnly } = useShareablesUI();
@@ -9096,129 +9097,108 @@ function PlaylistsListingScreen(_props) {
 	const confirmDelete = (0, react.useCallback)(() => {
 		if (pendingDeleteId != null) deletePlaylist(pendingDeleteId);
 	}, [pendingDeleteId, deletePlaylist]);
-	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-10 flex-1" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-10 w-24" })]
+	const filterBar = hasSelection ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BulkSelectionBar, {
+		selectedCount: selectedIds.size,
+		totalCount: filteredPlaylists.length,
+		onSelectAll: handleSelectAll,
+		onClearSelection: handleClearSelection,
+		onBulkFavorite: handleBulkFavorite
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OwnerFilterTabs, {
+			value: ownerFilter,
+			onValueChange: setOwnerFilter,
+			myLabel: "My Playlists"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: GRID_CLASS$1,
-			children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "space-y-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "aspect-square w-full rounded-lg" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-3/4" })]
-			}, i))
-		})]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
-		children: [
-			hasSelection ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BulkSelectionBar, {
-				selectedCount: selectedIds.size,
-				totalCount: filteredPlaylists.length,
-				onSelectAll: handleSelectAll,
-				onClearSelection: handleClearSelection,
-				onBulkFavorite: handleBulkFavorite
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OwnerFilterTabs, {
-					value: ownerFilter,
-					onValueChange: setOwnerFilter,
-					myLabel: "My Playlists"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "ml-auto w-full max-w-sm",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
-						searchValue: searchTerm,
-						onSearchChange: setSearchTerm,
-						placeholder: "Search playlists...",
-						sortOptions: [
-							{
-								label: "Name (A-Z)",
-								value: "title"
-							},
-							{
-								label: "Name (Z-A)",
-								value: "-title"
-							},
-							{
-								label: "Date Created (Newest)",
-								value: "-created_at"
-							},
-							{
-								label: "Date Created (Oldest)",
-								value: "created_at"
-							}
-						],
-						sortValue,
-						onSortChange: setSortValue
-					})
-				})]
-			}),
-			filteredPlaylists.length === 0 && !isFetchingNextPage && !hasNextPage ? /* @__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-muted-foreground text-sm",
-					children: getFilteredEmptyMessage({
-						searchTerm,
-						ownerFilter,
-						entityName: "playlists",
-						defaultMessage: "There are no playlists available at the moment."
-					})
-				})
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: GRID_CLASS$1,
-				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);
-				})
-			}),
-			isFetchingNextPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex justify-center py-4",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				ref: observerTarget,
-				className: "h-1"
-			}),
-			error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-				className: "bg-destructive/10 text-destructive rounded-lg px-3 py-2",
-				children: ["Error: ", error.message]
-			}),
-			/* @__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();
+			className: "ml-auto w-full max-w-sm",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
+				searchValue: searchTerm,
+				onSearchChange: setSearchTerm,
+				placeholder: "Search playlists...",
+				sortOptions: [
+					{
+						label: "Name (A-Z)",
+						value: "title"
 					},
-					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"
-				})] })] })
+					{
+						label: "Name (Z-A)",
+						value: "-title"
+					},
+					{
+						label: "Date Created (Newest)",
+						value: "-created_at"
+					},
+					{
+						label: "Date Created (Oldest)",
+						value: "created_at"
+					}
+				],
+				sortValue,
+				onSortChange: setSortValue
 			})
-		]
+		})]
 	});
+	const footer = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isFetchingNextPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex justify-center py-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
+	}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+		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-action",
+		children: /* @__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)(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();
+			},
+			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
@@ -9484,7 +9464,6 @@ const DEFAULT_IMAGE$1 = "https://assets.fluid.app/fluid-admin/images/we-commerce
 function PlaylistDetailScreen({ playlistId, onNavigate }) {
 	const api = useShareablesApi();
 	const { navigate, user, readOnly } = useShareablesUI();
-	const [isDescriptionExpanded, setIsDescriptionExpanded] = (0, react.useState)(false);
 	const [selectedPlaylistItemIndex, setSelectedPlaylistItemIndex] = (0, react.useState)(0);
 	const { data: playlistResponse, isLoading } = (0, _tanstack_react_query.useQuery)({
 		queryKey: shareablesKeys.playlists.detail(Number(playlistId)),
@@ -9530,94 +9509,53 @@ function PlaylistDetailScreen({ playlistId, onNavigate }) {
 	}) }), [displayTitle, navigate]));
 	const selectedPlaylistItem = playlist?.items?.[selectedPlaylistItemIndex];
 	const displayImage = selectedPlaylistItem?.image_url ?? selectedPlaylistItem?.relateable?.image_url ?? selectedPlaylistItem?.relateable?.compressed_image_url ?? DEFAULT_IMAGE$1;
-	const strippedDescription = stripTags(playlist?.description || playlist?.search_engine_optimizer?.description || "");
-	const shouldShowReadMore = strippedDescription.length > 150;
+	const displayDescription = playlist?.description || playlist?.search_engine_optimizer?.description || "";
 	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;
 	const taggedProducts = playlist?.items?.filter((item) => item.relateable_type === "Product").map((item) => item.relateable).filter((p) => !!p) || [];
-	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 (!playlist) 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: "Playlist not found or failed to load."
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "flex flex-col gap-4 px-4 py-4 md:px-10 md:py-6",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mx-auto flex w-full max-w-[480px] flex-col gap-6 md:h-[calc(100vh-140px)] md:max-w-none md:flex-row",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "aspect-square w-full md:aspect-auto md:h-full",
-				children: /* @__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"
-					})
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex w-full flex-col md:overflow-y-auto",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "space-y-4",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-								className: "text-foreground text-[26px] leading-[1.2] font-semibold",
-								children: displayTitle
-							}),
-							strippedDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "text-foreground/70 text-sm leading-relaxed",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: !isDescriptionExpanded && shouldShowReadMore ? "line-clamp-3" : "",
-									children: strippedDescription
-								}), shouldShowReadMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-									onClick: () => setIsDescriptionExpanded(!isDescriptionExpanded),
-									variant: "ghost",
-									size: "sm",
-									className: "text-foreground hover:text-foreground/80 mt-1 h-auto p-0 text-xs font-normal underline",
-									children: isDescriptionExpanded ? "Read less" : "Read more"
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AssetActions, {
-								downloadUrl: null,
-								displayTitle,
-								shareLink: shareLinkError ? null : shareLink || null,
-								shareLinkLoading,
-								isVideo,
-								relateableId: Number(playlistId),
-								relateableType: "Library"
-							})
-						]
-					}),
-					/* @__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: playlist?.items || [],
-							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));
-							}
-						})]
-					})
-				]
+	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,
+				displayTitle,
+				displayVideo,
+				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: playlist?.items || [],
+				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
@@ -10674,7 +10612,6 @@ function PlaylistCreateScreen({ playlistId, onBack, hideHeader, renderHeaderSlot
 //#endregion
 //#region ../../shareables/ui/src/components/screens/FilesListingScreen.tsx
 const PAGE_SIZE = 24;
-const GRID_CLASS = "grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4";
 function formatFileSize(bytes) {
 	if (bytes < 1024) return `${bytes} B`;
 	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -10734,110 +10671,79 @@ function FilesListingScreen({ onNavigate }) {
 		observer.observe(target);
 		return () => observer.disconnect();
 	}, [handleIntersect]);
-	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex items-center gap-3",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-10 flex-1" })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: GRID_CLASS,
-			children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "space-y-2",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "aspect-square w-full rounded-lg" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-3/4" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3 w-1/2" })
-				]
-			}, i))
-		})]
-	});
-	if (error) 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: "Failed to load files. Please try again."
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex justify-end",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "w-full max-w-sm",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
-						searchValue: searchTerm,
-						onSearchChange: setSearchTerm,
-						placeholder: "Search files..."
-					})
-				})
-			}),
-			files.length === 0 ? /* @__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-muted-foreground text-sm",
-					children: debouncedSearch ? `No files match "${debouncedSearch}". Try a different search term.` : "No files available."
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
+		isLoading,
+		error,
+		errorMessage: "Failed to load files. Please try again.",
+		isEmpty: files.length === 0,
+		emptyMessage: debouncedSearch ? `No files match "${debouncedSearch}". Try a different search term.` : "No files available.",
+		filters: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex justify-end",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "w-full max-w-sm",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
+					searchValue: searchTerm,
+					onSearchChange: setSearchTerm,
+					placeholder: "Search files..."
 				})
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: GRID_CLASS,
-				children: files.map((file) => {
-					const isVideo = file.content_type?.startsWith("video/");
-					const fileUrl = file.url || "#";
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, {
-						role: "button",
-						tabIndex: 0,
-						onClick: () => window.open(fileUrl, "_blank"),
-						onKeyDown: (e) => {
-							if (e.key === "Enter" || e.key === " ") {
-								e.preventDefault();
-								window.open(fileUrl, "_blank");
-							}
-						},
-						className: "group hover:bg-muted cursor-pointer gap-0 overflow-hidden rounded-lg border-0 p-0 shadow-none transition-colors",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "bg-muted relative aspect-square overflow-hidden rounded-lg",
-							children: [
-								renderImage({
-									src: file.preview_image_url || DEFAULT_IMAGE,
-									alt: file.filename || "Untitled File",
-									fill: true,
-									className: "object-cover transition-transform group-hover:scale-105"
-								}),
-								isVideo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "absolute inset-0 flex items-center justify-center",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "bg-foreground/50 flex h-16 w-16 items-center justify-center rounded-full backdrop-blur-sm",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CirclePlay, { className: "text-background h-12 w-12" })
-									})
-								}),
-								!isVideo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Badge, {
-									className: "absolute top-2 right-2 shadow-lg",
-									variant: "default",
-									children: formatFileSize(file.content_size)
+			})
+		}),
+		footer: isFetchingNextPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex justify-center py-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
+		}),
+		sentinelRef: observerTarget,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: SHAREABLE_GRID_CLASS,
+			children: files.map((file) => {
+				const isVideo = file.content_type?.startsWith("video/");
+				const fileUrl = file.url || "#";
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, {
+					role: "button",
+					tabIndex: 0,
+					onClick: () => window.open(fileUrl, "_blank"),
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							window.open(fileUrl, "_blank");
+						}
+					},
+					className: "group hover:bg-muted cursor-pointer gap-0 overflow-hidden rounded-lg border-0 p-0 shadow-none transition-colors",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "bg-muted relative aspect-square overflow-hidden rounded-lg",
+						children: [
+							renderImage({
+								src: file.preview_image_url || DEFAULT_IMAGE,
+								alt: file.filename || "Untitled File",
+								fill: true,
+								className: "object-cover transition-transform group-hover:scale-105"
+							}),
+							isVideo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "absolute inset-0 flex items-center justify-center",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "bg-foreground/50 flex h-16 w-16 items-center justify-center rounded-full backdrop-blur-sm",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CirclePlay, { className: "text-background h-12 w-12" })
 								})
-							]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "px-2 pt-2 pb-4",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-								className: "text-foreground line-clamp-2 text-sm leading-tight font-bold",
-								children: file.filename || "Untitled File"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "text-muted-foreground mt-1 text-xs",
-								children: file.content_type || "File"
-							})]
+							}),
+							!isVideo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Badge, {
+								className: "absolute top-2 right-2 shadow-lg",
+								variant: "default",
+								children: formatFileSize(file.content_size)
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "px-2 pt-2 pb-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+							className: "text-foreground line-clamp-2 text-sm leading-tight font-bold",
+							children: file.filename || "Untitled File"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "text-muted-foreground mt-1 text-xs",
+							children: file.content_type || "File"
 						})]
-					}, file.id);
-				})
-			}),
-			isFetchingNextPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex justify-center py-4",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				ref: observerTarget,
-				className: "h-1"
+					})]
+				}, file.id);
 			})
-		]
+		})
 	});
 }
 //#endregion
@@ -12002,4 +11908,4 @@ Object.defineProperty(exports, "usePortalContentContext", {
 	}
 });
 
-//# sourceMappingURL=PortalContentApiProvider-DqAbDYgq.cjs.map
+//# sourceMappingURL=PortalContentApiProvider-C5WzWC3k.cjs.map