@fluid-app/portal-sdk 0.1.230 → 0.1.232

package/dist/{ShareablesScreen-o6frhZUM.cjs → ShareablesScreen-DfrTNnRw.cjs}

@@ -1,17 +1,18 @@
 const require_chunk = require("./chunk-9hOWP6kD.cjs");
-const require_portal_tenant_content = require("./portal_tenant_content-Bnr0IyhM.cjs");
+const require_portal_tenant = require("./portal_tenant-CNmiAf_A.cjs");
+const require_portal_tenant_content = require("./portal_tenant_content-D60b_KWd.cjs");
 const require_PortalTenantClientProvider = require("./PortalTenantClientProvider-BT5Y4YyL.cjs");
 const require_src = require("./src-DpFIi-nj.cjs");
-const require_ScreenHeaderContext = require("./ScreenHeaderContext-PbjwAMeB.cjs");
-const require_use_account = require("./use-account-Bv_VAVxj.cjs");
-const require_use_store = require("./use-store-D2S1FywW.cjs");
-const require_AppNavigationContext = require("./AppNavigationContext-C1-hd9Rw.cjs");
-const require_dist$3 = require("./dist-BQCx-9SK.cjs");
-const require_es = require("./es-nxOxb57F.cjs");
-const require_SearchSort = require("./SearchSort-Hwga1dIi.cjs");
-const require_dist$4 = require("./dist-5XPflEEG.cjs");
-const require_dist$5 = require("./dist-FHf4OHgt.cjs");
-const require_PortalProductsApiProvider = require("./PortalProductsApiProvider-Bb5B1Hv5.cjs");
+const require_ScreenHeaderContext = require("./ScreenHeaderContext-oIu5Bvhs.cjs");
+const require_use_account = require("./use-account-DcBCP06c.cjs");
+const require_use_store = require("./use-store-lOOUcpRT.cjs");
+const require_AppNavigationContext = require("./AppNavigationContext-BDs1cOuG.cjs");
+const require_dist$3 = require("./dist-DbRTQ2QF.cjs");
+const require_es = require("./es-UfEBhcZD.cjs");
+const require_SearchSort = require("./SearchSort-O89uV2dl.cjs");
+const require_dist$4 = require("./dist-myuZC8sf.cjs");
+const require_dist$5 = require("./dist-BQZkLGL6.cjs");
+const require_PortalProductsApiProvider = require("./PortalProductsApiProvider-DL8nl7To.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let _tanstack_react_query = require("@tanstack/react-query");
@@ -724,7 +725,7 @@ function useInfiniteListSentinel({ hasNextPage, isFetchingNextPage, fetchNextPag
 }
 //#endregion
 //#region ../../shareables/ui/src/components/screens/ProductsScreen.tsx
-const PAGE_SIZE$5 = 24;
+const PAGE_SIZE$6 = 24;
 const SORT_OPTIONS$1 = [
 	{
 		label: "Newest",
@@ -776,11 +777,11 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 		queryKey: [
 			"portal-product-catalog",
 			debouncedSearch || "",
-			PAGE_SIZE$5,
+			PAGE_SIZE$6,
 			effectiveSort
 		],
 		queryFn: async ({ pageParam }) => {
-			return fetchPortalProducts(debouncedSearch, pageParam, PAGE_SIZE$5, effectiveSort);
+			return fetchPortalProducts(debouncedSearch, pageParam, PAGE_SIZE$6, effectiveSort);
 		},
 		getNextPageParam: (lastPage) => lastPage.meta?.pagination?.next_cursor ?? void 0,
 		initialPageParam: void 0,
@@ -796,7 +797,7 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 			if (!client) throw new Error("Unreachable: client is null");
 			return (await listProducts(client, {
 				page: pageParam,
-				per_page: PAGE_SIZE$5,
+				per_page: PAGE_SIZE$6,
 				search_query: debouncedSearch || void 0,
 				sorting: {
 					id: "title",
@@ -807,7 +808,7 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 				published_stores: ["rep"]
 			})).products;
 		},
-		getNextPageParam: (lastPage, allPages) => lastPage.length === PAGE_SIZE$5 ? allPages.length + 1 : void 0,
+		getNextPageParam: (lastPage, allPages) => lastPage.length === PAGE_SIZE$6 ? allPages.length + 1 : void 0,
 		initialPageParam: 1,
 		enabled: !fetchPortalProducts && !!client
 	});
@@ -1669,7 +1670,7 @@ function OwnerFilterTabs({ value, onValueChange, myLabel = "Mine" }) {
 }
 //#endregion
 //#region ../../shareables/ui/src/components/screens/MediaListingScreen.tsx
-const PAGE_SIZE$4 = 24;
+const PAGE_SIZE$5 = 24;
 function getMediaKindLabel(kind) {
 	switch (kind) {
 		case "video": return "Video";
@@ -1769,7 +1770,7 @@ function MediaListingScreen(_props) {
 				"filter[ownership]": ownerFilter,
 				"filter[content_format]": bffKind,
 				"page[cursor]": pageParam,
-				"page[limit]": PAGE_SIZE$4,
+				"page[limit]": PAGE_SIZE$5,
 				sort: bffSort
 			});
 		},
@@ -2164,8 +2165,6 @@ zod.z.object({
 		timestamp: zod.z.string()
 	})
 });
-//#endregion
-//#region ../../file-picker/core/src/schemas/file-picker-config.ts
 const filePickerConfigSchema = zod.z.object({
 	accept: zod.z.array(zod.z.string()).optional(),
 	maxFiles: zod.z.number().min(1).optional().default(1),
@@ -2178,6 +2177,9 @@ const filePickerConfigSchema = zod.z.object({
 		"computer",
 		"dam",
 		"media",
+		"pages",
+		"products",
+		"enrollment_packs",
 		"url",
 		"unsplash",
 		"google-drive",
@@ -2185,7 +2187,8 @@ const filePickerConfigSchema = zod.z.object({
 		"facebook",
 		"tiktok",
 		"dropbox"
-	])).optional()
+	])).optional(),
+	unifiedSelection: zod.z.boolean().optional().default(false)
 });
 const DAM_TYPE_FILTER_OPTIONS = [
 	{
@@ -2910,7 +2913,7 @@ const FilePickerContext = (0, react.createContext)(null);
 function FilePickerProvider({ children, value }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerContext.Provider, {
 		value,
-		children
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerSelectionProvider, { children })
 	});
 }
 function useFilePickerContext() {
@@ -2918,6 +2921,37 @@ function useFilePickerContext() {
 	if (!ctx) throw new Error("useFilePickerContext must be used within a FilePickerProvider");
 	return ctx;
 }
+const FilePickerSelectionReadContext = (0, react.createContext)(null);
+const FilePickerSelectionWriteContext = (0, react.createContext)(null);
+function FilePickerSelectionProvider({ children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerSelectionReadContext.Provider, {
+		value: null,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerSelectionWriteContext.Provider, {
+			value: null,
+			children
+		})
+	});
+}
+function FilePickerSelectionScope({ state, api, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerSelectionReadContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerSelectionWriteContext.Provider, {
+			value: api,
+			children
+		})
+	});
+}
+/**
+* Returns the unified selection state when the active picker has unified
+* selection enabled, otherwise null. Tabs use this as the signal to switch
+* between unified and per-method behavior.
+*/
+function useFilePickerSelection() {
+	return {
+		state: (0, react.useContext)(FilePickerSelectionReadContext),
+		api: (0, react.useContext)(FilePickerSelectionWriteContext)
+	};
+}
 //#endregion
 //#region ../../file-picker/ui/src/utils/brand-icons.tsx
 function GoogleIcon({ className }) {
@@ -4008,6 +4042,9 @@ const FilePickerSidebar = ({ currentStep, activeMethod, onMethodChange, methods
 				children: methods.filter((method) => [
 					"dam",
 					"media",
+					"pages",
+					"products",
+					"enrollment_packs",
 					"upload",
 					"url",
 					"unsplash"
@@ -4447,9 +4484,19 @@ const MediaTab = ({ config, onSelectionChange, onMediaDataChange, selectedMediaI
 			upload_status: "ready"
 		};
 	}, []);
+	const { state: unifiedState, api: unifiedApi } = useFilePickerSelection();
+	const isUnified = unifiedState !== null && unifiedApi !== null;
 	const handleMediaClick = (0, react.useCallback)((_e, id, _index) => {
 		const mediaId = parseInt(id.replace(/^media_/, ""), 10);
 		if (Number.isNaN(mediaId)) return;
+		if (isUnified) {
+			const media = allMediaItems.find((m) => m.id === mediaId);
+			if (!media) return;
+			const result = convertToFilePickerResult(media);
+			if (unifiedApi.isSelected(result.asset_code)) unifiedApi.remove(result.asset_code);
+			else unifiedApi.add(result);
+			return;
+		}
 		const isSelected = selectedMediaIds.includes(mediaId);
 		let newSelectedIds;
 		if (isSelected) newSelectedIds = selectedMediaIds.filter((id) => id !== mediaId);
@@ -4461,6 +4508,8 @@ const MediaTab = ({ config, onSelectionChange, onMediaDataChange, selectedMediaI
 		const filePickerResults = newSelectedIds.map((id) => idToMedia.get(id)).filter((m) => m != null).map(convertToFilePickerResult);
 		onMediaDataChange?.(filePickerResults);
 	}, [
+		isUnified,
+		unifiedApi,
 		selectedMediaIds,
 		config.maxFiles,
 		allMediaItems,
@@ -4469,8 +4518,12 @@ const MediaTab = ({ config, onSelectionChange, onMediaDataChange, selectedMediaI
 		onMediaDataChange
 	]);
 	react.default.useEffect(() => {
-		onSelectionChange?.(selectedMediaIds.length);
-	}, [selectedMediaIds.length, onSelectionChange]);
+		if (!isUnified) onSelectionChange?.(selectedMediaIds.length);
+	}, [
+		isUnified,
+		selectedMediaIds.length,
+		onSelectionChange
+	]);
 	const sortedMediaItems = (0, react.useMemo)(() => {
 		if (!sortOption || !allMediaItems.length) return allMediaItems;
 		const option = SORT_OPTIONS.find((o) => o.id === sortOption);
@@ -4509,9 +4562,17 @@ const MediaTab = ({ config, onSelectionChange, onMediaDataChange, selectedMediaI
 	const libraryItems = (0, react.useMemo)(() => {
 		return sortedMediaItems.map((media) => {
 			const id = `media_${media.id}`;
-			const indexInSelection = selectedMediaIds.indexOf(media.id);
-			const isSelected = indexInSelection >= 0;
-			const selectionIndex = isSelected ? indexInSelection + 1 : 0;
+			let isSelected;
+			let selectionIndex;
+			if (isUnified) {
+				const idx = unifiedState.items.findIndex((r) => r.asset_code === id);
+				isSelected = idx >= 0;
+				selectionIndex = isSelected ? idx + 1 : 0;
+			} else {
+				const indexInSelection = selectedMediaIds.indexOf(media.id);
+				isSelected = indexInSelection >= 0;
+				selectionIndex = isSelected ? indexInSelection + 1 : 0;
+			}
 			return {
 				id,
 				name: media.title ?? "",
@@ -4521,7 +4582,12 @@ const MediaTab = ({ config, onSelectionChange, onMediaDataChange, selectedMediaI
 				raw: media
 			};
 		});
-	}, [sortedMediaItems, selectedMediaIds]);
+	}, [
+		sortedMediaItems,
+		selectedMediaIds,
+		isUnified,
+		unifiedState
+	]);
 	const handleMediaDoubleClick = (0, react.useCallback)((_e, _id, index) => {
 		const media = sortedMediaItems[index];
 		if (media) onPreviewMediaChange?.(media);
@@ -4644,6 +4710,330 @@ const MediaTab = ({ config, onSelectionChange, onMediaDataChange, selectedMediaI
 	});
 };
 //#endregion
+//#region ../../file-picker/ui/src/components/ContentBrowserTab.tsx
+const PAGE_SIZE$4 = 30;
+function ContentBrowserTab({ contentKind, assetCodePrefix, labelPlural, source, getId, getLabel, getImageUrl, getSubtitle, fallbackIcon: FallbackIcon, config, selectedIds, onSelectedIdsChange, onSelectedDataChange, onSelectionCountChange, thumbnailSize = 100, viewMode = "grid", showNamesOnMedia = true }) {
+	const supportsSearch = source.supportsSearch !== false;
+	const [searchQuery, setSearchQuery] = (0, react.useState)("");
+	const [debouncedQuery, setDebouncedQuery] = (0, react.useState)("");
+	const [items, setItems] = (0, react.useState)([]);
+	const [cursor, setCursor] = (0, react.useState)(null);
+	const [loadingMore, setLoadingMore] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		const t = setTimeout(() => setDebouncedQuery(searchQuery), 250);
+		return () => clearTimeout(t);
+	}, [searchQuery]);
+	const { data: firstPage, isLoading, error } = (0, _tanstack_react_query.useQuery)({
+		queryKey: (0, react.useMemo)(() => [
+			contentKind,
+			"list",
+			debouncedQuery
+		], [contentKind, debouncedQuery]),
+		queryFn: () => source.list({
+			search: debouncedQuery,
+			cursor: null,
+			limit: PAGE_SIZE$4
+		}),
+		staleTime: 300 * 1e3
+	});
+	(0, react.useEffect)(() => {
+		if (!firstPage) return;
+		setItems(firstPage.items);
+		setCursor(firstPage.nextCursor);
+	}, [firstPage]);
+	const debouncedQueryRef = (0, react.useRef)(debouncedQuery);
+	(0, react.useEffect)(() => {
+		debouncedQueryRef.current = debouncedQuery;
+	}, [debouncedQuery]);
+	const { toast } = useFilePickerContext();
+	const loadMore = (0, react.useCallback)(async () => {
+		if (!cursor) return;
+		const requestQuery = debouncedQuery;
+		try {
+			setLoadingMore(true);
+			const next = await source.list({
+				search: requestQuery,
+				cursor,
+				limit: PAGE_SIZE$4
+			});
+			if (requestQuery !== debouncedQueryRef.current) return;
+			setItems((prev) => {
+				const ids = new Set(prev.map(getId));
+				const merged = [...prev];
+				for (const it of next.items) if (!ids.has(getId(it))) merged.push(it);
+				return merged;
+			});
+			setCursor(next.nextCursor);
+		} catch (err) {
+			toast.error(`Failed to load more ${labelPlural}`, err);
+		} finally {
+			setLoadingMore(false);
+		}
+	}, [
+		cursor,
+		debouncedQuery,
+		source,
+		getId,
+		labelPlural,
+		toast
+	]);
+	const { state: unifiedState, api: unifiedApi } = useFilePickerSelection();
+	const isUnified = unifiedState !== null && unifiedApi !== null;
+	const toResult = (0, react.useCallback)((item) => {
+		const id = getId(item);
+		const label = getLabel(item);
+		const image = getImageUrl(item) ?? "";
+		return {
+			asset_id: id,
+			asset_code: `${assetCodePrefix}${id}`,
+			file_path: image,
+			file_url: image,
+			...image ? { thumbnail_url: image } : {},
+			metadata: {
+				file_name: label,
+				mime_type: ""
+			},
+			upload_status: "ready"
+		};
+	}, [
+		assetCodePrefix,
+		getId,
+		getLabel,
+		getImageUrl
+	]);
+	const isSelected = (0, react.useCallback)((id) => {
+		if (isUnified) return unifiedState.items.some((r) => r.asset_code === `${assetCodePrefix}${id}`);
+		return selectedIds.includes(id);
+	}, [
+		isUnified,
+		unifiedState,
+		assetCodePrefix,
+		selectedIds
+	]);
+	const selectionIndex = (0, react.useCallback)((id) => {
+		if (isUnified) {
+			const code = `${assetCodePrefix}${id}`;
+			return unifiedState.items.findIndex((r) => r.asset_code === code) + 1;
+		}
+		return selectedIds.indexOf(id) + 1;
+	}, [
+		isUnified,
+		unifiedState,
+		assetCodePrefix,
+		selectedIds
+	]);
+	const handleClick = (0, react.useCallback)((_e, gridId) => {
+		const numericId = Number.parseInt(gridId.startsWith(assetCodePrefix) ? gridId.slice(assetCodePrefix.length) : gridId, 10);
+		if (Number.isNaN(numericId)) return;
+		const item = items.find((it) => getId(it) === numericId);
+		if (!item) return;
+		const result = toResult(item);
+		if (isUnified) {
+			if (unifiedApi.isSelected(result.asset_code)) unifiedApi.remove(result.asset_code);
+			else unifiedApi.add(result);
+			return;
+		}
+		const already = selectedIds.includes(numericId);
+		let nextIds;
+		if (already) nextIds = selectedIds.filter((x) => x !== numericId);
+		else if (config.maxFiles === 1) nextIds = [numericId];
+		else if (config.maxFiles !== void 0 && selectedIds.length >= config.maxFiles) return;
+		else nextIds = [...selectedIds, numericId];
+		onSelectedIdsChange(nextIds);
+		const idToItem = new Map(items.map((it) => [getId(it), it]));
+		onSelectedDataChange(nextIds.map((id) => idToItem.get(id)).filter((it) => it != null).map(toResult));
+	}, [
+		items,
+		assetCodePrefix,
+		isUnified,
+		unifiedApi,
+		selectedIds,
+		config.maxFiles,
+		onSelectedIdsChange,
+		onSelectedDataChange,
+		toResult,
+		getId
+	]);
+	(0, react.useEffect)(() => {
+		if (!isUnified) onSelectionCountChange?.(selectedIds.length);
+	}, [
+		isUnified,
+		selectedIds.length,
+		onSelectionCountChange
+	]);
+	const renderThumbnail = (0, react.useCallback)((item) => {
+		const url = getImageUrl(item);
+		if (url) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src: url,
+			alt: getLabel(item),
+			width: 200,
+			height: 150,
+			className: "h-full w-full object-cover"
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex h-full w-full items-center justify-center bg-gray-100",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FallbackIcon, { className: "h-8 w-8 text-gray-400" })
+		});
+	}, [
+		FallbackIcon,
+		getImageUrl,
+		getLabel
+	]);
+	const libraryItems = (0, react.useMemo)(() => items.map((item) => {
+		const id = getId(item);
+		const idx = selectionIndex(id);
+		return {
+			id: `${assetCodePrefix}${id}`,
+			name: getLabel(item),
+			subtitle: getSubtitle?.(item) ?? void 0,
+			isSelected: isSelected(id),
+			selectionIndex: idx,
+			raw: item
+		};
+	}), [
+		items,
+		assetCodePrefix,
+		isSelected,
+		selectionIndex,
+		getId,
+		getLabel,
+		getSubtitle
+	]);
+	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-center justify-center py-12",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+			className: "text-sm text-red-600",
+			children: ["Failed to load ", labelPlural]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "mt-1 text-xs text-gray-500",
+			children: "Please try again later"
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-4",
+		children: [supportsSearch && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
+				type: "text",
+				placeholder: `Search ${labelPlural}...`,
+				value: searchQuery,
+				onChange: (e) => setSearchQuery(e.target.value),
+				className: "h-9"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute top-1/2 right-3 -translate-y-1/2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SearchIcon, { className: "h-4 w-4 text-gray-400" })
+			})]
+		}), isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex items-center justify-center py-12",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "text-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LoaderIcon, { className: "mx-auto mb-2 h-8 w-8 animate-spin text-blue-600" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "text-sm text-gray-500",
+					children: [
+						"Loading ",
+						labelPlural,
+						"..."
+					]
+				})]
+			})
+		}) : libraryItems.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col items-center justify-center py-12",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mb-4 rounded-full bg-gray-100 p-3",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FallbackIcon, { className: "h-6 w-6 text-gray-400" })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h3", {
+					className: "mb-1 text-sm font-medium text-gray-900",
+					children: [
+						"No ",
+						labelPlural,
+						" found"
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-xs text-gray-500",
+					children: debouncedQuery ? "Try adjusting your search terms" : `No ${labelPlural} available`
+				})
+			]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LibraryAssetGrid, {
+				items: libraryItems,
+				viewMode,
+				thumbnailSize,
+				showNamesOnMedia,
+				renderThumbnail,
+				onClick: handleClick
+			}), cursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex justify-center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+					variant: "secondary",
+					size: "sm",
+					onClick: loadMore,
+					disabled: loadingMore,
+					children: loadingMore ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LoaderIcon, { className: "mr-2 h-3 w-3 animate-spin" }), "Loading..."] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: "mr-2 h-3 w-3" }), "Load more"] })
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+//#region ../../file-picker/ui/src/components/PagesTab.tsx
+const PagesTab = (props) => {
+	const { shareablesClient } = useFilePickerContext();
+	const source = shareablesClient?.pages;
+	if (!source) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentBrowserTab, {
+		contentKind: "pages",
+		assetCodePrefix: "page_",
+		labelPlural: "pages",
+		source,
+		getId: (p) => p.id,
+		getLabel: (p) => p.title || `Page #${p.id}`,
+		getImageUrl: (p) => p.image_url ?? null,
+		fallbackIcon: lucide_react.FileTextIcon,
+		...props
+	});
+};
+//#endregion
+//#region ../../file-picker/ui/src/components/ProductsTab.tsx
+const ProductsTab = (props) => {
+	const { shareablesClient } = useFilePickerContext();
+	const source = shareablesClient?.products;
+	if (!source) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentBrowserTab, {
+		contentKind: "products",
+		assetCodePrefix: "product_",
+		labelPlural: "products",
+		source,
+		getId: (p) => p.id,
+		getLabel: (p) => p.name || `Product #${p.id}`,
+		getImageUrl: (p) => p.image_url ?? null,
+		getSubtitle: (p) => p.price ? `$${p.price}` : void 0,
+		fallbackIcon: lucide_react.PackageIcon,
+		...props
+	});
+};
+//#endregion
+//#region ../../file-picker/ui/src/components/EnrollmentPacksTab.tsx
+const EnrollmentPacksTab = (props) => {
+	const { shareablesClient } = useFilePickerContext();
+	const source = shareablesClient?.enrollment_packs;
+	if (!source) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentBrowserTab, {
+		contentKind: "enrollment_packs",
+		assetCodePrefix: "enrollment_pack_",
+		labelPlural: "enrollment packs",
+		source,
+		getId: (p) => p.id,
+		getLabel: (p) => p.title || `Enrollment Pack #${p.id}`,
+		getImageUrl: (p) => p.image_url ?? null,
+		fallbackIcon: lucide_react.GraduationCapIcon,
+		...props
+	});
+};
+//#endregion
 //#region ../../file-picker/ui/src/hooks/use-unsplash-picker.ts
 const useUnsplashPicker = (options) => {
 	const { controlledSearchQuery, onControlledSearchQueryChange } = options ?? {};
@@ -6014,7 +6404,7 @@ const ComputerUpload = ({ config, onFilesSelected, enableShareableOption = false
 };
 //#endregion
 //#region ../../file-picker/ui/src/components/FilePickerContent.tsx
-const FilePickerContent = ({ activeMethod, config, damTypeFilter, sortOption, onFilesSelected, onSingleFileSelected, enableShareableOption, shareableEnabled, onShareableChange, damLibraryRef, onDamConfirmAndMaybeCreate, selectedMediaIds, onMediaIdsChange, onMediaSelectionChange, onMediaDataChange, onDamSelectionChange, onDamSearchingChange, skipCropper = false, damSearchQuery = "", onDamSearchChange, mediaSearchQuery, onMediaSearchChange, unsplashSearchQuery, onUnsplashSearchChange, onUnsplashSearchingChange, onUnsplashUploadingChange, thumbnailSize = 100, viewMode = "grid", showNamesOnMedia = true, onDamFoldersChange, previewContainer, previewMedia, onPreviewMediaChange, previewAsset, onPreviewAssetChange, uploadSelectionCount }) => {
+const FilePickerContent = ({ activeMethod, config, damTypeFilter, sortOption, onFilesSelected, onSingleFileSelected, enableShareableOption, shareableEnabled, onShareableChange, damLibraryRef, onDamConfirmAndMaybeCreate, selectedMediaIds, onMediaIdsChange, onMediaSelectionChange, onMediaDataChange, selectedPageIds, onPageIdsChange, onPageSelectionChange, onPageDataChange, selectedProductIds, onProductIdsChange, onProductSelectionChange, onProductDataChange, selectedEnrollmentPackIds, onEnrollmentPackIdsChange, onEnrollmentPackSelectionChange, onEnrollmentPackDataChange, onDamSelectionChange, onDamSearchingChange, skipCropper = false, damSearchQuery = "", onDamSearchChange, mediaSearchQuery, onMediaSearchChange, unsplashSearchQuery, onUnsplashSearchChange, onUnsplashSearchingChange, onUnsplashUploadingChange, thumbnailSize = 100, viewMode = "grid", showNamesOnMedia = true, onDamFoldersChange, previewContainer, previewMedia, onPreviewMediaChange, previewAsset, onPreviewAssetChange, uploadSelectionCount }) => {
 	const damConfig = react.default.useMemo(() => ({
 		...config,
 		fileTypeFilter: damTypeFilter ? [damTypeFilter] : config.fileTypeFilter
@@ -6078,6 +6468,36 @@ const FilePickerContent = ({ activeMethod, config, damTypeFilter, sortOption, on
 				previewMedia,
 				onPreviewMediaChange
 			}),
+			activeMethod === "pages" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PagesTab, {
+				config,
+				selectedIds: selectedPageIds ?? [],
+				onSelectedIdsChange: onPageIdsChange ?? (() => {}),
+				onSelectedDataChange: onPageDataChange ?? (() => {}),
+				onSelectionCountChange: onPageSelectionChange,
+				thumbnailSize,
+				viewMode,
+				showNamesOnMedia
+			}),
+			activeMethod === "products" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProductsTab, {
+				config,
+				selectedIds: selectedProductIds ?? [],
+				onSelectedIdsChange: onProductIdsChange ?? (() => {}),
+				onSelectedDataChange: onProductDataChange ?? (() => {}),
+				onSelectionCountChange: onProductSelectionChange,
+				thumbnailSize,
+				viewMode,
+				showNamesOnMedia
+			}),
+			activeMethod === "enrollment_packs" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EnrollmentPacksTab, {
+				config,
+				selectedIds: selectedEnrollmentPackIds ?? [],
+				onSelectedIdsChange: onEnrollmentPackIdsChange ?? (() => {}),
+				onSelectedDataChange: onEnrollmentPackDataChange ?? (() => {}),
+				onSelectionCountChange: onEnrollmentPackSelectionChange,
+				thumbnailSize,
+				viewMode,
+				showNamesOnMedia
+			}),
 			activeMethod === "unsplash" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnsplashPicker, {
 				config,
 				onFileSelected: onSingleFileSelected,
@@ -6530,6 +6950,16 @@ const FilePicker = ({ config: configInput = {}, onFilesSelected, onClose, open,
 	const [damFolders, setDamFolders] = (0, react.useState)([]);
 	const [selectedMediaIds, setSelectedMediaIds] = (0, react.useState)([]);
 	const [selectedMediaData, setSelectedMediaData] = (0, react.useState)([]);
+	const [selectedPageIds, setSelectedPageIds] = (0, react.useState)([]);
+	const [selectedPageData, setSelectedPageData] = (0, react.useState)([]);
+	const [pageSelectionCount, setPageSelectionCount] = (0, react.useState)(0);
+	const [selectedProductIds, setSelectedProductIds] = (0, react.useState)([]);
+	const [selectedProductData, setSelectedProductData] = (0, react.useState)([]);
+	const [productSelectionCount, setProductSelectionCount] = (0, react.useState)(0);
+	const [selectedEnrollmentPackIds, setSelectedEnrollmentPackIds] = (0, react.useState)([]);
+	const [selectedEnrollmentPackData, setSelectedEnrollmentPackData] = (0, react.useState)([]);
+	const [enrollmentPackSelectionCount, setEnrollmentPackSelectionCount] = (0, react.useState)(0);
+	const [unifiedItems, setUnifiedItems] = (0, react.useState)([]);
 	const damLibraryRef = (0, react.useRef)(null);
 	const [previewContainer, setPreviewContainer] = (0, react.useState)(null);
 	const [previewAsset, setPreviewAsset] = (0, react.useState)(null);
@@ -6550,26 +6980,47 @@ const FilePicker = ({ config: configInput = {}, onFilesSelected, onClose, open,
 		setMediaSelectionCount(0);
 		setSelectedMediaIds([]);
 		setSelectedMediaData([]);
+		setSelectedPageIds([]);
+		setSelectedPageData([]);
+		setPageSelectionCount(0);
+		setSelectedProductIds([]);
+		setSelectedProductData([]);
+		setProductSelectionCount(0);
+		setSelectedEnrollmentPackIds([]);
+		setSelectedEnrollmentPackData([]);
+		setEnrollmentPackSelectionCount(0);
+		setUnifiedItems([]);
 		setDamFilters(defaultFilters);
 		setSortOption(void 0);
 		damLibraryRef.current?.clearSelection?.();
 		setPreviewAsset(null);
 	}, [defaultTab]);
 	const handleMethodChange = (0, react.useCallback)((newMethod) => {
-		setSelectedResults([]);
-		setDamSelectionCount(0);
-		setDamSelectedFiles([]);
-		setDamVariantCounts({});
-		setDamSearchQuery("");
-		setUnsplashSearchQuery("");
-		setUnsplashSearching(false);
-		setIsUnsplashUploading(false);
-		setMediaSelectionCount(0);
-		setSelectedMediaIds([]);
-		setSelectedMediaData([]);
-		damLibraryRef.current?.clearSelection?.();
+		if (!config.unifiedSelection) {
+			setSelectedResults([]);
+			setDamSelectionCount(0);
+			setDamSelectedFiles([]);
+			setDamVariantCounts({});
+			setDamSearchQuery("");
+			setUnsplashSearchQuery("");
+			setUnsplashSearching(false);
+			setIsUnsplashUploading(false);
+			setMediaSelectionCount(0);
+			setSelectedMediaIds([]);
+			setSelectedMediaData([]);
+			setSelectedPageIds([]);
+			setSelectedPageData([]);
+			setPageSelectionCount(0);
+			setSelectedProductIds([]);
+			setSelectedProductData([]);
+			setProductSelectionCount(0);
+			setSelectedEnrollmentPackIds([]);
+			setSelectedEnrollmentPackData([]);
+			setEnrollmentPackSelectionCount(0);
+			damLibraryRef.current?.clearSelection?.();
+		}
 		setActiveMethod(newMethod);
-	}, []);
+	}, [config.unifiedSelection]);
 	const handleFilesSelected = (0, react.useCallback)((results) => {
 		const validResults = results.filter((result) => result.upload_status !== "error");
 		if (config.maxFiles === 1) setSelectedResults(validResults.slice(0, 1));
@@ -6612,8 +7063,9 @@ const FilePicker = ({ config: configInput = {}, onFilesSelected, onClose, open,
 		onFilesSelected(results);
 		onClose?.();
 	}, [onFilesSelected, onClose]);
+	const { shareablesClient, toast } = useFilePickerContext();
 	const methods = (0, react.useMemo)(() => {
-		const allMethods = [
+		const filteredBySource = [
 			{
 				id: "dam",
 				label: "Library",
@@ -6626,6 +7078,24 @@ const FilePicker = ({ config: configInput = {}, onFilesSelected, onClose, open,
 				icon: lucide_react.ImagesIcon,
 				description: "Choose from existing media"
 			}] : [],
+			{
+				id: "pages",
+				label: "Pages",
+				icon: lucide_react.FileTextIcon,
+				description: "Choose from existing pages"
+			},
+			{
+				id: "products",
+				label: "Products",
+				icon: lucide_react.PackageIcon,
+				description: "Choose from existing products"
+			},
+			{
+				id: "enrollment_packs",
+				label: "Enrollment Packs",
+				icon: lucide_react.GraduationCapIcon,
+				description: "Choose from existing enrollment packs"
+			},
 			{
 				id: "upload",
 				label: "Local Files",
@@ -6674,11 +7144,275 @@ const FilePicker = ({ config: configInput = {}, onFilesSelected, onClose, open,
 				icon: DropboxIcon,
 				description: "Import from Dropbox"
 			}
-		];
-		if (config.allowedMethods && config.allowedMethods.length > 0) return allMethods.filter((method) => config.allowedMethods.includes(method.id));
-		return allMethods;
-	}, [showMediaTab, config.allowedMethods]);
+		].filter((m) => {
+			if (m.id === "pages") return shareablesClient?.pages != null;
+			if (m.id === "products") return shareablesClient?.products != null;
+			if (m.id === "enrollment_packs") return shareablesClient?.enrollment_packs != null;
+			return true;
+		});
+		if (config.allowedMethods && config.allowedMethods.length > 0) return filteredBySource.filter((method) => config.allowedMethods.includes(method.id));
+		return filteredBySource;
+	}, [
+		showMediaTab,
+		config.allowedMethods,
+		shareablesClient
+	]);
 	const showPreview = previewAsset !== null;
+	const unifiedSelectionState = (0, react.useMemo)(() => ({ items: unifiedItems }), [unifiedItems]);
+	const unifiedItemsRef = (0, react.useRef)(unifiedItems);
+	(0, react.useEffect)(() => {
+		unifiedItemsRef.current = unifiedItems;
+	}, [unifiedItems]);
+	const unifiedApi = (0, react.useMemo)(() => ({
+		add: (item) => {
+			const current = unifiedItemsRef.current;
+			if (current.some((r) => r.asset_code === item.asset_code)) return;
+			if (config.maxFiles && current.length >= config.maxFiles) {
+				toast.error(`You can select up to ${config.maxFiles} items at a time.`);
+				return;
+			}
+			setUnifiedItems((prev) => {
+				if (prev.some((r) => r.asset_code === item.asset_code)) return prev;
+				if (config.maxFiles && prev.length >= config.maxFiles) return prev;
+				return [...prev, item];
+			});
+		},
+		remove: (assetCode) => {
+			setUnifiedItems((prev) => prev.filter((r) => r.asset_code !== assetCode));
+		},
+		clear: () => setUnifiedItems([]),
+		isSelected: (assetCode) => unifiedItemsRef.current.some((r) => r.asset_code === assetCode),
+		selectionIndex: (assetCode) => unifiedItemsRef.current.findIndex((r) => r.asset_code === assetCode) + 1
+	}), [config.maxFiles, toast]);
+	const body = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-1 overflow-y-auto",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerSidebar, {
+			currentStep: "select",
+			activeMethod,
+			onMethodChange: handleMethodChange,
+			methods
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerHeader, {
+				currentStep: "select",
+				activeMethod,
+				methods,
+				onClose: () => {
+					resetPicker();
+					onClose?.();
+				},
+				damSearchQuery: activeMethod === "dam" ? damSearchQuery : mediaSearchQuery,
+				onDamSearchChange: activeMethod === "dam" ? setDamSearchQuery : setMediaSearchQuery,
+				damSearching,
+				thumbnailSize,
+				onThumbnailSizeChange: handleThumbnailSizeChange,
+				viewMode,
+				onViewModeChange: handleViewModeChange,
+				showNamesOnMedia,
+				onShowNamesOnMediaChange: setShowNamesOnMedia,
+				hasSelectedFiles: damSelectionCount > 0,
+				damFolders,
+				onAddToNewFolder: () => damLibraryRef.current?.openAddFolderModal(),
+				onAddToExistingFolder: (folderPath) => damLibraryRef.current?.addToExistingFolder?.(folderPath),
+				filters: damFilters,
+				onFiltersChange: setDamFilters,
+				onFiltersClear: () => setDamFilters(defaultFilters),
+				sortOption,
+				onSortChange: setSortOption,
+				unsplashSearchQuery,
+				onUnsplashSearchChange: setUnsplashSearchQuery,
+				unsplashSearching,
+				isUnsplashUploading
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-h-0 min-w-0 flex-1 overflow-hidden",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "min-h-0 min-w-0 flex-1 overflow-y-auto",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerContent, {
+							activeMethod,
+							config,
+							damTypeFilter: damFilters.type ? damFilters.type : void 0,
+							sortOption,
+							onFilesSelected: handleFilesSelected,
+							onUploadConfirmAndMaybeCreate: handleUploadConfirm,
+							onSingleFileSelected: handleSingleFileSelected,
+							damLibraryRef,
+							onDamConfirmAndMaybeCreate: handleDamConfirm,
+							selectedMediaIds,
+							onMediaIdsChange: setSelectedMediaIds,
+							onMediaSelectionChange: handleMediaSelectionChange,
+							onMediaDataChange: handleMediaDataChange,
+							selectedPageIds,
+							onPageIdsChange: setSelectedPageIds,
+							onPageSelectionChange: setPageSelectionCount,
+							onPageDataChange: setSelectedPageData,
+							selectedProductIds,
+							onProductIdsChange: setSelectedProductIds,
+							onProductSelectionChange: setProductSelectionCount,
+							onProductDataChange: setSelectedProductData,
+							selectedEnrollmentPackIds,
+							onEnrollmentPackIdsChange: setSelectedEnrollmentPackIds,
+							onEnrollmentPackSelectionChange: setEnrollmentPackSelectionCount,
+							onEnrollmentPackDataChange: setSelectedEnrollmentPackData,
+							onDamSelectionChange: handleDamSelectionChange,
+							onDamSearchingChange: setDamSearching,
+							skipCropper,
+							damSearchQuery,
+							onDamSearchChange: setDamSearchQuery,
+							mediaSearchQuery,
+							onMediaSearchChange: setMediaSearchQuery,
+							unsplashSearchQuery,
+							onUnsplashSearchChange: setUnsplashSearchQuery,
+							onUnsplashSearchingChange: setUnsplashSearching,
+							onUnsplashUploadingChange: setIsUnsplashUploading,
+							thumbnailSize,
+							viewMode,
+							showNamesOnMedia,
+							onDamFoldersChange: setDamFolders,
+							previewContainer,
+							previewAsset,
+							onPreviewAssetChange: setPreviewAsset,
+							uploadSelectionCount: activeMethod === "upload" || activeMethod === "url" || activeMethod === "unsplash" ? selectedResults.length : void 0
+						})
+					}),
+					activeMethod === "dam" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionPanel, {
+						selectedFiles: damSelectedFiles,
+						onRemoveFile: (assetCode) => {
+							damLibraryRef.current?.deselectAssetByCode?.(assetCode);
+						},
+						onClear: () => {
+							damLibraryRef.current?.clearSelection();
+							setDamSelectionCount(0);
+							setDamSelectedFiles([]);
+							setDamVariantCounts({});
+						},
+						onConfirm: () => {
+							damLibraryRef.current?.confirmAndClose();
+						},
+						isVisible: damSelectionCount > 0,
+						hasVariants: (assetCode) => (damVariantCounts[assetCode] ?? 0) > 1,
+						getAssetWithVariants: (assetCode) => damLibraryRef.current?.getAssetWithVariants?.(assetCode) ?? null,
+						onVariantChange: (assetCode, variantId) => {
+							damLibraryRef.current?.setVariantForAsset?.(assetCode, variantId);
+						}
+					}),
+					!config.unifiedSelection && activeMethod === "media" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionPanel, {
+						selectedFiles: selectedMediaData,
+						onRemoveFile: (assetCode) => {
+							const id = parseInt(assetCode.replace(/^media_/, ""), 10);
+							if (!Number.isNaN(id)) {
+								setSelectedMediaIds((prev) => prev.filter((mediaId) => mediaId !== id));
+								setSelectedMediaData((prev) => prev.filter((r) => r.asset_code !== assetCode));
+							}
+						},
+						onClear: () => {
+							setSelectedMediaIds([]);
+							setSelectedMediaData([]);
+							setMediaSelectionCount(0);
+						},
+						onConfirm: () => {
+							onFilesSelected(selectedMediaData);
+							onClose?.();
+						},
+						isVisible: mediaSelectionCount > 0,
+						hasVariants: () => false
+					}),
+					!config.unifiedSelection && activeMethod === "pages" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionPanel, {
+						selectedFiles: selectedPageData,
+						onRemoveFile: (assetCode) => {
+							const id = parseInt(assetCode.replace(/^page_/, ""), 10);
+							if (!Number.isNaN(id)) {
+								setSelectedPageIds((prev) => prev.filter((pageId) => pageId !== id));
+								setSelectedPageData((prev) => prev.filter((r) => r.asset_code !== assetCode));
+							}
+						},
+						onClear: () => {
+							setSelectedPageIds([]);
+							setSelectedPageData([]);
+							setPageSelectionCount(0);
+						},
+						onConfirm: () => {
+							onFilesSelected(selectedPageData);
+							onClose?.();
+						},
+						isVisible: pageSelectionCount > 0,
+						hasVariants: () => false
+					}),
+					!config.unifiedSelection && activeMethod === "products" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionPanel, {
+						selectedFiles: selectedProductData,
+						onRemoveFile: (assetCode) => {
+							const id = parseInt(assetCode.replace(/^product_/, ""), 10);
+							if (!Number.isNaN(id)) {
+								setSelectedProductIds((prev) => prev.filter((productId) => productId !== id));
+								setSelectedProductData((prev) => prev.filter((r) => r.asset_code !== assetCode));
+							}
+						},
+						onClear: () => {
+							setSelectedProductIds([]);
+							setSelectedProductData([]);
+							setProductSelectionCount(0);
+						},
+						onConfirm: () => {
+							onFilesSelected(selectedProductData);
+							onClose?.();
+						},
+						isVisible: productSelectionCount > 0,
+						hasVariants: () => false
+					}),
+					!config.unifiedSelection && activeMethod === "enrollment_packs" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionPanel, {
+						selectedFiles: selectedEnrollmentPackData,
+						onRemoveFile: (assetCode) => {
+							const id = parseInt(assetCode.replace(/^enrollment_pack_/, ""), 10);
+							if (!Number.isNaN(id)) {
+								setSelectedEnrollmentPackIds((prev) => prev.filter((packId) => packId !== id));
+								setSelectedEnrollmentPackData((prev) => prev.filter((r) => r.asset_code !== assetCode));
+							}
+						},
+						onClear: () => {
+							setSelectedEnrollmentPackIds([]);
+							setSelectedEnrollmentPackData([]);
+							setEnrollmentPackSelectionCount(0);
+						},
+						onConfirm: () => {
+							onFilesSelected(selectedEnrollmentPackData);
+							onClose?.();
+						},
+						isVisible: enrollmentPackSelectionCount > 0,
+						hasVariants: () => false
+					}),
+					!config.unifiedSelection && (activeMethod === "upload" || activeMethod === "url" || activeMethod === "unsplash") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionPanel, {
+						selectedFiles: selectedResults,
+						onRemoveFile: (assetCode) => {
+							setSelectedResults((prev) => prev.filter((r) => r.asset_code !== assetCode));
+						},
+						onClear: () => {
+							setSelectedResults([]);
+						},
+						onConfirm: () => {
+							handleUploadConfirm(selectedResults);
+						},
+						isVisible: selectedResults.length > 0,
+						hasVariants: () => false
+					}),
+					config.unifiedSelection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionPanel, {
+						selectedFiles: unifiedItems,
+						onRemoveFile: (assetCode) => {
+							setUnifiedItems((prev) => prev.filter((r) => r.asset_code !== assetCode));
+						},
+						onClear: () => {
+							setUnifiedItems([]);
+						},
+						onConfirm: () => {
+							onFilesSelected(unifiedItems);
+							onClose?.();
+						},
+						isVisible: unifiedItems.length > 0,
+						hasVariants: () => false
+					})
+				]
+			})]
+		})]
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [typeof document !== "undefined" && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: setPreviewContainer,
 		className: "fixed inset-0",
@@ -6700,145 +7434,11 @@ const FilePicker = ({ config: configInput = {}, onFilesSelected, onClose, open,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, {
 				className: "sr-only",
 				children: "File Picker"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-1 overflow-y-auto",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerSidebar, {
-					currentStep: "select",
-					activeMethod,
-					onMethodChange: handleMethodChange,
-					methods
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerHeader, {
-						currentStep: "select",
-						activeMethod,
-						methods,
-						onClose: () => {
-							resetPicker();
-							onClose?.();
-						},
-						damSearchQuery: activeMethod === "dam" ? damSearchQuery : mediaSearchQuery,
-						onDamSearchChange: activeMethod === "dam" ? setDamSearchQuery : setMediaSearchQuery,
-						damSearching,
-						thumbnailSize,
-						onThumbnailSizeChange: handleThumbnailSizeChange,
-						viewMode,
-						onViewModeChange: handleViewModeChange,
-						showNamesOnMedia,
-						onShowNamesOnMediaChange: setShowNamesOnMedia,
-						hasSelectedFiles: damSelectionCount > 0,
-						damFolders,
-						onAddToNewFolder: () => damLibraryRef.current?.openAddFolderModal(),
-						onAddToExistingFolder: (folderPath) => damLibraryRef.current?.addToExistingFolder?.(folderPath),
-						filters: damFilters,
-						onFiltersChange: setDamFilters,
-						onFiltersClear: () => setDamFilters(defaultFilters),
-						sortOption,
-						onSortChange: setSortOption,
-						unsplashSearchQuery,
-						onUnsplashSearchChange: setUnsplashSearchQuery,
-						unsplashSearching,
-						isUnsplashUploading
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex min-h-0 min-w-0 flex-1 overflow-hidden",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "min-h-0 min-w-0 flex-1 overflow-y-auto",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerContent, {
-									activeMethod,
-									config,
-									damTypeFilter: damFilters.type ? damFilters.type : void 0,
-									sortOption,
-									onFilesSelected: handleFilesSelected,
-									onUploadConfirmAndMaybeCreate: handleUploadConfirm,
-									onSingleFileSelected: handleSingleFileSelected,
-									damLibraryRef,
-									onDamConfirmAndMaybeCreate: handleDamConfirm,
-									selectedMediaIds,
-									onMediaIdsChange: setSelectedMediaIds,
-									onMediaSelectionChange: handleMediaSelectionChange,
-									onMediaDataChange: handleMediaDataChange,
-									onDamSelectionChange: handleDamSelectionChange,
-									onDamSearchingChange: setDamSearching,
-									skipCropper,
-									damSearchQuery,
-									onDamSearchChange: setDamSearchQuery,
-									mediaSearchQuery,
-									onMediaSearchChange: setMediaSearchQuery,
-									unsplashSearchQuery,
-									onUnsplashSearchChange: setUnsplashSearchQuery,
-									onUnsplashSearchingChange: setUnsplashSearching,
-									onUnsplashUploadingChange: setIsUnsplashUploading,
-									thumbnailSize,
-									viewMode,
-									showNamesOnMedia,
-									onDamFoldersChange: setDamFolders,
-									previewContainer,
-									previewAsset,
-									onPreviewAssetChange: setPreviewAsset,
-									uploadSelectionCount: activeMethod === "upload" || activeMethod === "url" || activeMethod === "unsplash" ? selectedResults.length : void 0
-								})
-							}),
-							activeMethod === "dam" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionPanel, {
-								selectedFiles: damSelectedFiles,
-								onRemoveFile: (assetCode) => {
-									damLibraryRef.current?.deselectAssetByCode?.(assetCode);
-								},
-								onClear: () => {
-									damLibraryRef.current?.clearSelection();
-									setDamSelectionCount(0);
-									setDamSelectedFiles([]);
-									setDamVariantCounts({});
-								},
-								onConfirm: () => {
-									damLibraryRef.current?.confirmAndClose();
-								},
-								isVisible: damSelectionCount > 0,
-								hasVariants: (assetCode) => (damVariantCounts[assetCode] ?? 0) > 1,
-								getAssetWithVariants: (assetCode) => damLibraryRef.current?.getAssetWithVariants?.(assetCode) ?? null,
-								onVariantChange: (assetCode, variantId) => {
-									damLibraryRef.current?.setVariantForAsset?.(assetCode, variantId);
-								}
-							}),
-							activeMethod === "media" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionPanel, {
-								selectedFiles: selectedMediaData,
-								onRemoveFile: (assetCode) => {
-									const id = parseInt(assetCode.replace(/^media_/, ""), 10);
-									if (!Number.isNaN(id)) {
-										setSelectedMediaIds((prev) => prev.filter((mediaId) => mediaId !== id));
-										setSelectedMediaData((prev) => prev.filter((r) => r.asset_code !== assetCode));
-									}
-								},
-								onClear: () => {
-									setSelectedMediaIds([]);
-									setSelectedMediaData([]);
-									setMediaSelectionCount(0);
-								},
-								onConfirm: () => {
-									onFilesSelected(selectedMediaData);
-									onClose?.();
-								},
-								isVisible: mediaSelectionCount > 0,
-								hasVariants: () => false
-							}),
-							(activeMethod === "upload" || activeMethod === "url" || activeMethod === "unsplash") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionPanel, {
-								selectedFiles: selectedResults,
-								onRemoveFile: (assetCode) => {
-									setSelectedResults((prev) => prev.filter((r) => r.asset_code !== assetCode));
-								},
-								onClear: () => {
-									setSelectedResults([]);
-								},
-								onConfirm: () => {
-									handleUploadConfirm(selectedResults);
-								},
-								isVisible: selectedResults.length > 0,
-								hasVariants: () => false
-							})
-						]
-					})]
-				})]
-			})]
+			}), config.unifiedSelection ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerSelectionScope, {
+				state: unifiedSelectionState,
+				api: unifiedApi,
+				children: body
+			}) : body]
 		})
 	})] });
 };
@@ -9674,13 +10274,14 @@ function PlaylistDetailScreen({ playlistId, onNavigate }) {
 			}) })
 		]
 	}) }), [displayTitle, navigate]));
-	const selectedPlaylistItem = playlist?.items?.[selectedPlaylistItemIndex];
+	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];
 	const displayImage = selectedPlaylistItem?.image_url ?? selectedPlaylistItem?.relateable?.image_url ?? selectedPlaylistItem?.relateable?.compressed_image_url ?? DEFAULT_IMAGE$2;
 	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) || [];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ShareableDetailLayout, {
 		isLoading,
 		notFound: !playlist,
@@ -9712,7 +10313,7 @@ function PlaylistDetailScreen({ playlistId, onNavigate }) {
 				products: taggedProducts,
 				onProductClick: (productId) => onNavigate?.("product", String(productId))
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaylistItemsList, {
-				items: playlist?.items || [],
+				items: playableItems,
 				onSelectItem: setSelectedPlaylistItemIndex,
 				selectedItemIndex: selectedPlaylistItemIndex,
 				onNavigateToItem: (itemId, relateableType) => {
@@ -10236,19 +10837,42 @@ function SortableTable({ items, setItems, onDeleteItem, isDeletePending, enableR
 //#endregion
 //#region ../../shareables/ui/src/components/playlists/form/PlaylistItemsSection.tsx
 const REORDER_DEBOUNCE_MS = 500;
-const PLAYLIST_CONTENT_TYPES = new Set([
-	"Medium",
-	"Page",
-	"Product",
-	"EnrollmentPack"
-]);
+const CONTENT_TYPES = [
+	{
+		prefix: "media_",
+		relateableType: "Medium",
+		section: "primary"
+	},
+	{
+		prefix: "page_",
+		relateableType: "Page",
+		section: "primary"
+	},
+	{
+		prefix: "product_",
+		relateableType: "Product",
+		section: "tagged"
+	},
+	{
+		prefix: "enrollment_pack_",
+		relateableType: "EnrollmentPack",
+		section: "tagged"
+	}
+];
+const PRIMARY_CONTENT_TYPES = new Set(CONTENT_TYPES.filter((c) => c.section === "primary").map((c) => c.relateableType));
+const TAGGED_CONTENT_TYPES = new Set(CONTENT_TYPES.filter((c) => c.section === "tagged").map((c) => c.relateableType));
+new Set(CONTENT_TYPES.map((c) => c.relateableType));
+function deriveRelateableType(assetCode) {
+	for (const entry of CONTENT_TYPES) if (assetCode.startsWith(entry.prefix)) return entry.relateableType;
+	return null;
+}
 function computeOrderedItems(items) {
 	const required = [];
 	const optional = [];
 	items.forEach((item) => {
 		const type = item.relateable_type;
-		if (type === "Medium" || type === "Page") required.push(item);
-		else if (type === "Product" || type === "EnrollmentPack") optional.push(item);
+		if (type && PRIMARY_CONTENT_TYPES.has(type)) required.push(item);
+		else if (type && TAGGED_CONTENT_TYPES.has(type)) optional.push(item);
 	});
 	const result = [];
 	required.forEach((item, index) => {
@@ -10265,22 +10889,36 @@ function computeOrderedItems(items) {
 	});
 	return result;
 }
+const SECTIONS = {
+	primary: {
+		heading: "Playlist Items",
+		description: "Manage the media and pages in your playlist. At least one is required.",
+		allowedMethods: ["media", "pages"],
+		allowedRelateableTypes: PRIMARY_CONTENT_TYPES
+	},
+	tagged: {
+		heading: "Tagged Products",
+		description: "Manage the products and enrollments in your playlist. These items will show as recommended items in the cart.",
+		allowedMethods: ["products", "enrollment_packs"],
+		allowedRelateableTypes: TAGGED_CONTENT_TYPES
+	}
+};
 function PlaylistItemsSection({ playlistId }) {
-	const { showToast, filePickerApi } = useShareablesUI();
+	const { showToast, filePickerApi, pickerSources } = useShareablesUI();
 	const api = useShareablesApi();
-	const [filePickerOpen, setFilePickerOpen] = (0, react.useState)(false);
+	const [openSection, setOpenSection] = (0, react.useState)(null);
 	const { items: contextItems, updateItems, addItem, removeItem } = usePlaylistItems();
 	const tableItems = contextItems;
-	const { contentItems, tailItems } = (0, react.useMemo)(() => {
-		const content = [];
-		const tail = [];
+	const { primaryItems, taggedItems } = (0, react.useMemo)(() => {
+		const primary = [];
+		const tagged = [];
 		tableItems.forEach((item) => {
-			if (item.relateable_type && PLAYLIST_CONTENT_TYPES.has(item.relateable_type)) content.push(item);
-			else tail.push(item);
+			if (item.relateable_type && PRIMARY_CONTENT_TYPES.has(item.relateable_type)) primary.push(item);
+			else if (item.relateable_type && TAGGED_CONTENT_TYPES.has(item.relateable_type)) tagged.push(item);
 		});
 		return {
-			contentItems: content,
-			tailItems: tail
+			primaryItems: primary,
+			taggedItems: tagged
 		};
 	}, [tableItems]);
 	const addItemMutation = useAddItemToPlaylistMutation({ onError: (error) => {
@@ -10312,8 +10950,8 @@ function PlaylistItemsSection({ playlistId }) {
 		if (reorderTimerRef.current) clearTimeout(reorderTimerRef.current);
 	}, []);
 	const canPersistReorder = !!api.playlists.reorderPlaylistItems;
-	const mergeAndOrder = (0, react.useCallback)((reorderedContent) => {
-		const ordered = computeOrderedItems([...reorderedContent, ...tailItems]);
+	const mergeAndOrder = (0, react.useCallback)((reordered, whichSection) => {
+		const ordered = computeOrderedItems(whichSection === "primary" ? [...reordered, ...taggedItems] : [...primaryItems, ...reordered]);
 		if (playlistId && canPersistReorder && reorderTimerRef.current === null && reorderRollbackRef.current === null) reorderRollbackRef.current = tableItems;
 		updateItems(ordered);
 		if (!playlistId || !canPersistReorder) return;
@@ -10344,7 +10982,8 @@ function PlaylistItemsSection({ playlistId }) {
 			});
 		}, REORDER_DEBOUNCE_MS);
 	}, [
-		tailItems,
+		primaryItems,
+		taggedItems,
 		tableItems,
 		updateItems,
 		playlistId,
@@ -10359,22 +10998,23 @@ function PlaylistItemsSection({ playlistId }) {
 			itemIds: [itemId]
 		});
 	};
-	const handleFilePickerResults = async (results) => {
-		setFilePickerOpen(false);
-		const mediaResults = results.filter((r) => r.asset_code.startsWith("media_"));
-		if (mediaResults.length === 0) {
+	const buildResultsHandler = (0, react.useCallback)((section) => async (results) => {
+		setOpenSection(null);
+		if (results.length === 0) {
 			showToast({
-				title: "No media items selected",
+				title: "No items selected",
 				type: "warning"
 			});
 			return;
 		}
 		let nextOrder = tableItems.length + 1;
-		for (const result of mediaResults) {
-			const label = result.metadata?.file_name?.replace(/\.[^/.]+$/, "") || `Medium #${result.asset_id}`;
+		for (const result of results) {
+			const relateableType = deriveRelateableType(result.asset_code);
+			if (!relateableType) continue;
+			if (!section.allowedRelateableTypes.has(relateableType)) continue;
 			const relateableId = result.asset_id;
-			const relateableType = "Medium";
-			if (tableItems.some((existingItem) => existingItem.relateable_type === relateableType && existingItem.relateable?.id === relateableId)) {
+			const label = result.metadata?.file_name || `${relateableType} #${relateableId}`;
+			if (tableItems.some((existing) => existing.relateable_type === relateableType && existing.relateable?.id === relateableId)) {
 				showToast({
 					title: "This item is already in the playlist",
 					type: "error"
@@ -10409,7 +11049,13 @@ function PlaylistItemsSection({ playlistId }) {
 			} catch {}
 			else addItem(newItem);
 		}
-	};
+	}, [
+		tableItems,
+		playlistId,
+		addItemMutation,
+		addItem,
+		showToast
+	]);
 	const filePickerContextValue = (0, react.useMemo)(() => {
 		if (!filePickerApi) return null;
 		return {
@@ -10425,16 +11071,75 @@ function PlaylistItemsSection({ playlistId }) {
 				loading: () => "",
 				dismiss: () => {}
 			},
-			shareablesClient: { media: { list: (filters) => api.media.getMedia(filters ?? {}) } }
+			shareablesClient: {
+				media: { list: (filters) => api.media.getMedia(filters ?? {}) },
+				...pickerSources?.pages ? { pages: pickerSources.pages } : {},
+				...pickerSources?.products ? { products: pickerSources.products } : {},
+				...pickerSources?.enrollment_packs ? { enrollment_packs: pickerSources.enrollment_packs } : {}
+			}
 		};
 	}, [
 		filePickerApi,
 		showToast,
-		api
+		api,
+		pickerSources
 	]);
+	const pickerAvailable = !!filePickerApi && !!filePickerContextValue;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-8",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaylistItemsSubsection, {
+				section: SECTIONS.primary,
+				items: primaryItems,
+				onAdd: () => setOpenSection("primary"),
+				onReorder: (reordered) => mergeAndOrder(reordered, "primary"),
+				onDeleteItem: handleDeleteItem,
+				isPending: addItemMutation.isPending,
+				isDeletePending: removeItemMutation.isPending,
+				disableAdd: !pickerAvailable
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaylistItemsSubsection, {
+				section: SECTIONS.tagged,
+				items: taggedItems,
+				onAdd: () => setOpenSection("tagged"),
+				onReorder: (reordered) => mergeAndOrder(reordered, "tagged"),
+				onDeleteItem: handleDeleteItem,
+				isPending: addItemMutation.isPending,
+				isDeletePending: removeItemMutation.isPending,
+				disableAdd: !pickerAvailable
+			}),
+			pickerAvailable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePickerApiProvider, {
+				api: filePickerApi,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FilePickerProvider, {
+					value: filePickerContextValue,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePicker, {
+						open: openSection === "primary",
+						onClose: () => setOpenSection(null),
+						onFilesSelected: (selected) => void buildResultsHandler(SECTIONS.primary)(selected),
+						config: {
+							maxFiles: 50,
+							allowedMethods: SECTIONS.primary.allowedMethods,
+							unifiedSelection: true
+						}
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePicker, {
+						open: openSection === "tagged",
+						onClose: () => setOpenSection(null),
+						onFilesSelected: (selected) => void buildResultsHandler(SECTIONS.tagged)(selected),
+						config: {
+							maxFiles: 50,
+							allowedMethods: SECTIONS.tagged.allowedMethods,
+							unifiedSelection: true
+						}
+					})]
+				})
+			})
+		]
+	});
+}
+function PlaylistItemsSubsection({ section, items, onAdd, onReorder, onDeleteItem, isPending, isDeletePending, disableAdd = false }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "border-border bg-card rounded-lg border p-4",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "space-y-4",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
@@ -10442,49 +11147,31 @@ function PlaylistItemsSection({ playlistId }) {
 					className: "min-w-0",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 						className: "text-md text-foreground font-semibold",
-						children: "Content"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						children: section.heading
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: "text-muted-foreground text-sm",
-						children: [
-							"Use ",
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Add content" }),
-							" to open the file picker and choose media from your library. Drag rows to reorder."
-						]
+						children: section.description
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "flex shrink-0 flex-wrap items-center justify-end gap-2",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 						type: "button",
-						disabled: addItemMutation.isPending || !filePickerApi,
+						disabled: isPending || disableAdd,
 						variant: "default",
 						size: "sm",
 						className: "flex min-w-25 items-center gap-2",
-						onClick: () => setFilePickerOpen(true),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "h-4 w-4" }), "Add content"]
+						onClick: onAdd,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "h-4 w-4" }), "Add Item"]
 					})
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableTable, {
-				items: contentItems,
-				setItems: (reordered) => mergeAndOrder(reordered),
-				onDeleteItem: handleDeleteItem,
-				isDeletePending: removeItemMutation.isPending,
+				items,
+				setItems: (reordered) => onReorder(reordered),
+				onDeleteItem,
+				isDeletePending,
 				enableReordering: true
 			})]
-		}), 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: filePickerOpen,
-					onFilesSelected: (selected) => void handleFilePickerResults(selected),
-					onClose: () => setFilePickerOpen(false),
-					config: {
-						maxFiles: 50,
-						allowedMethods: ["media"]
-					}
-				})
-			})
-		})]
+		})
 	});
 }
 //#endregion
@@ -11395,22 +12082,25 @@ function createRawMediaAdapter(client) {
 		},
 		createMedia: async (body) => {
 			const response = await require_portal_tenant_content.media_create(client, { media: body });
+			if (!response.media) throw new Error("Media create response missing media");
 			return {
-				media: mapMedia(response.media ?? {}),
+				media: mapMedia(response.media),
 				meta: mapMediaMeta(response.meta)
 			};
 		},
 		getMedia: async (id) => {
 			const response = await require_portal_tenant_content.media_show(client, id);
+			if (!response.media) throw new Error("Media show response missing media");
 			return {
-				media: mapMedia(response.media ?? {}),
+				media: mapMedia(response.media),
 				meta: mapMediaMeta(response.meta)
 			};
 		},
 		updateMedia: async (id, body) => {
 			const response = await require_portal_tenant_content.media_update(client, id, { media: body });
+			if (!response.media) throw new Error("Media update response missing media");
 			return {
-				media: mapMedia(response.media ?? {}),
+				media: mapMedia(response.media),
 				meta: mapMediaMeta(response.meta)
 			};
 		},
@@ -11674,15 +12364,12 @@ function mapPlaylist(raw) {
 }
 function mapPlaylistItem(raw) {
 	return {
-		id: raw.id ?? 0,
-		media_id: raw.media_id ?? 0,
-		position: raw.position ?? null,
-		title: raw.title,
-		image_url: raw.image_url ?? null,
-		media_type: raw.media_type,
-		video_url: raw.video_url ?? null,
-		duration: raw.duration ?? null,
-		created_at: raw.created_at ?? ""
+		id: raw.id,
+		content_type: raw.content_type,
+		content_id: raw.content_id,
+		position: raw.position,
+		created_at: raw.created_at,
+		content: raw.content
 	};
 }
 function mapPlaylistsMeta(raw) {
@@ -11751,8 +12438,10 @@ function createRawPlaylistsAdapter(client) {
 		},
 		addPlaylistItem: async (playlistId, body) => {
 			const response = await require_portal_tenant_content.playlists_items_add(client, playlistId, { item: body });
+			const rawItem = response.playlist_item;
+			if (!rawItem) throw new Error("Playlist item add response missing playlist_item");
 			return {
-				playlist_item: mapPlaylistItem(response.playlist_item ?? {}),
+				playlist_item: mapPlaylistItem(rawItem),
 				meta: mapPlaylistsMeta(response.meta)
 			};
 		},
@@ -11762,9 +12451,157 @@ function createRawPlaylistsAdapter(client) {
 				playlist_item: { id: response.playlist_item?.id ?? 0 },
 				meta: mapPlaylistsMeta(response.meta)
 			};
+		},
+		reorderPlaylistItems: async (playlistId, body) => {
+			const response = await require_portal_tenant_content.playlists_items_reorder(client, playlistId, body);
+			return {
+				playlist_id: response.playlist_id ?? playlistId,
+				meta: mapPlaylistsMeta(response.meta)
+			};
 		}
 	};
 }
+const CONTENT_TYPE_TO_RELATEABLE = {
+	media: "Medium",
+	page: "Page",
+	product: "Product",
+	enrollment_pack: "EnrollmentPack"
+};
+const RELATEABLE_TO_CONTENT_TYPE = {
+	Medium: "media",
+	Media: "media",
+	media: "media",
+	Page: "page",
+	page: "page",
+	Product: "product",
+	product: "product",
+	EnrollmentPack: "enrollment_pack",
+	enrollment_pack: "enrollment_pack"
+};
+function firstImageUrl(images) {
+	return images?.[0]?.url ?? null;
+}
+function toShareablePlaylistItem(item) {
+	const relateableType = CONTENT_TYPE_TO_RELATEABLE[item.content_type];
+	const base = {
+		id: item.id,
+		order: item.position ?? void 0,
+		relateable_type: relateableType,
+		relateable: { id: item.content_id }
+	};
+	switch (item.content_type) {
+		case "media": {
+			const c = item.content;
+			const isVideo = c.content_format === "video";
+			const isPdf = c.content_format === "pdf";
+			base.title = c.title ?? "Untitled";
+			base.image_url = isVideo || isPdf ? c.thumbnail_url ?? null : c.url ?? c.thumbnail_url ?? null;
+			base.kind = mediaKindFromType(c.content_format ?? "");
+			base.video_url = isVideo ? c.url ?? null : null;
+			base.duration = null;
+			base.media_format = c.content_format ?? null;
+			base.relateable = {
+				id: c.id,
+				title: c.title,
+				image_url: base.image_url,
+				media_format: c.content_format ?? null,
+				video_url: base.video_url,
+				kind: base.kind,
+				description: {
+					id: null,
+					name: null,
+					body: c.description ?? null,
+					record_type: null,
+					record_id: null,
+					created_at: c.created_at ?? null,
+					updated_at: c.updated_at ?? null,
+					locale: null
+				}
+			};
+			break;
+		}
+		case "page": {
+			const c = item.content;
+			base.title = c.title ?? "Untitled";
+			base.image_url = c.image_url ?? null;
+			base.relateable = {
+				id: c.id,
+				title: c.title,
+				slug: c.slug ?? null,
+				image_url: c.image_url ?? null,
+				status: c.status,
+				description: {
+					id: null,
+					name: null,
+					body: c.description ?? null,
+					record_type: null,
+					record_id: null,
+					created_at: null,
+					updated_at: null,
+					locale: null
+				}
+			};
+			break;
+		}
+		case "product": {
+			const c = item.content;
+			const image = firstImageUrl(c.images);
+			base.title = c.name;
+			base.image_url = image;
+			base.relateable = {
+				id: c.id,
+				title: c.name,
+				slug: c.slug ?? null,
+				price: c.price ?? null,
+				display_price: c.price ?? null,
+				image_url: image,
+				status: c.status ?? null,
+				description: {
+					id: null,
+					name: null,
+					body: c.description ?? null,
+					record_type: null,
+					record_id: null,
+					created_at: c.created_at ?? null,
+					updated_at: null,
+					locale: null
+				},
+				images: (c.images ?? []).map((img) => ({ image_url: img.url ?? null }))
+			};
+			break;
+		}
+		case "enrollment_pack": {
+			const c = item.content;
+			const image = firstImageUrl(c.images);
+			base.title = c.title;
+			base.image_url = image;
+			base.relateable = {
+				id: c.id,
+				title: c.title,
+				slug: c.slug ?? null,
+				canonical_url: c.url ?? null,
+				image_url: image,
+				description: {
+					id: null,
+					name: null,
+					body: c.description ?? null,
+					record_type: null,
+					record_id: null,
+					created_at: null,
+					updated_at: null,
+					locale: null
+				},
+				images: (c.images ?? []).map((img) => ({ image_url: img.url ?? null }))
+			};
+			break;
+		}
+		default: {
+			const _exhaustive = item.content_type;
+			throw new Error(`Unhandled playlist item content_type: ${String(_exhaustive)}`);
+		}
+	}
+	return base;
+}
 function toBffPlaylist(bff, items) {
 	return {
 		id: bff.id,
@@ -11825,18 +12662,7 @@ function createPlaylistsAdapter(client) {
 				cursor = page.meta.pagination?.next_cursor ?? void 0;
 				if (!cursor) break;
 			}
-			const items = allItems.map((item) => ({
-				id: item.id,
-				order: item.position ?? void 0,
-				relateable_type: "Medium",
-				relateable: { id: item.media_id },
-				title: item.title ?? "Untitled",
-				image_url: item.image_url ?? null,
-				kind: mediaKindFromType(item.media_type ?? ""),
-				video_url: item.video_url ?? null,
-				duration: item.duration ?? null,
-				media_format: item.media_type ?? null
-			}));
+			const items = allItems.map(toShareablePlaylistItem);
 			return {
 				playlist: toBffPlaylist(response.playlist, items),
 				meta: {
@@ -11872,10 +12698,15 @@ function createPlaylistsAdapter(client) {
 			};
 		},
 		addItemToPlaylist: async (id, data) => {
-			await Promise.all(data.items.map((item) => portAdapter.addPlaylistItem(id, {
-				media_id: item.relateable_id,
-				position: typeof item.order === "number" ? item.order : Number(item.order)
-			})));
+			for (const item of data.items) {
+				const contentType = RELATEABLE_TO_CONTENT_TYPE[item.relateable_type];
+				if (!contentType) throw new Error(`Unsupported relateable_type for playlist item: "${item.relateable_type}"`);
+				await portAdapter.addPlaylistItem(id, {
+					content_type: contentType,
+					content_id: item.relateable_id,
+					position: typeof item.order === "number" ? item.order : Number(item.order)
+				});
+			}
 			return {
 				id,
 				title: "",
@@ -11905,7 +12736,7 @@ function createPlaylistsAdapter(client) {
 			};
 		},
 		reorderPlaylistItems: async (playlistId, data) => {
-			await require_portal_tenant_content.playlists_items_reorder(client, playlistId, { items: data.items });
+			await portAdapter.reorderPlaylistItems(playlistId, { items: data.items });
 		}
 	};
 }
@@ -12033,6 +12864,53 @@ function createRawPagesAdapter(client) {
 		}
 	};
 }
+function mapEnrollmentPack(raw) {
+	return {
+		id: raw.id ?? 0,
+		title: raw.title ?? "",
+		slug: raw.slug ?? null,
+		description: raw.description ?? null,
+		url: raw.url ?? null,
+		images: (raw.images ?? []).map((img) => ({
+			url: img.url ?? null,
+			alt: img.alt ?? null
+		}))
+	};
+}
+function mapEnrollmentPacksMeta(raw) {
+	return {
+		request_id: raw?.request_id ?? null,
+		timestamp: raw?.timestamp ?? "",
+		pagination: raw?.pagination ? {
+			cursor: raw.pagination.cursor ?? null,
+			limit: raw.pagination.limit,
+			next_cursor: raw.pagination.next_cursor ?? null,
+			prev_cursor: raw.pagination.prev_cursor ?? null
+		} : void 0
+	};
+}
+function createRawEnrollmentPacksAdapter(client) {
+	return {
+		listEnrollmentPacks: async (params) => {
+			const response = await require_portal_tenant.enrollment_packs_list(client, {
+				"page[cursor]": params?.cursor,
+				"page[limit]": params?.limit
+			});
+			return {
+				enrollment_packs: (response.enrollment_packs ?? []).filter((p) => typeof p.id === "number").map(mapEnrollmentPack),
+				meta: mapEnrollmentPacksMeta(response.meta)
+			};
+		},
+		getEnrollmentPack: async (id) => {
+			const response = await require_portal_tenant.enrollment_packs_show(client, id);
+			if (!response.enrollment_pack) throw new Error(`EnrollmentPack ${id} not found`);
+			return {
+				enrollment_pack: mapEnrollmentPack(response.enrollment_pack),
+				meta: mapEnrollmentPacksMeta(response.meta)
+			};
+		}
+	};
+}
 function mapDamAsset(raw) {
 	return {
 		id: raw.id ?? 0,
@@ -12275,6 +13153,23 @@ function createPortalContentPlaylistsAdapter(client) {
 	return createRawPlaylistsAdapter(client);
 }
 /**
+* Creates a ContentPagesApi (the port-level pages adapter) for screens that
+* need to list/show pages outside of ShareablesApiProvider — e.g. the
+* playlist editor's content picker. Mirrors createPortalContentPlaylistsAdapter.
+*/
+function createPortalContentPagesAdapter(client) {
+	return createRawPagesAdapter(client);
+}
+/**
+* Creates a ContentEnrollmentPacksApi adapter for screens that need to
+* list/show enrollment packs outside of ShareablesApiProvider — e.g. the
+* playlist editor's content picker. Backed by the portal-tenant
+* `/api/enrollment_packs` endpoint.
+*/
+function createPortalContentEnrollmentPacksAdapter(client) {
+	return createRawEnrollmentPacksAdapter(client);
+}
+/**
 * Toggles a favorite entry on a given shareable (Medium / Playlist /
 * Product / etc.) via the portal-tenant BFF's /favorites/toggle endpoint.
 * Returns the new is_favorited state reported by the backend.
@@ -12307,15 +13202,21 @@ function PortalContentApiProvider({ children }) {
 	const productsApi = require_PortalProductsApiProvider.usePortalProductsApi();
 	const contentApi = (0, react.useMemo)(() => createPortalContentDomainApiAdapter(client, productsApi), [client, productsApi]);
 	const playlistsAdapter = (0, react.useMemo)(() => createPortalContentPlaylistsAdapter(client), [client]);
+	const pagesAdapter = (0, react.useMemo)(() => createPortalContentPagesAdapter(client), [client]);
+	const enrollmentPacksAdapter = (0, react.useMemo)(() => createPortalContentEnrollmentPacksAdapter(client), [client]);
 	const mediaProductsAdapter = (0, react.useMemo)(() => createPortalTenantMediaProductsAdapter(client), [client]);
 	const filePickerApi = (0, react.useMemo)(() => createFilePickerApiAdapter(client), [client]);
 	const ctx = (0, react.useMemo)(() => ({
 		productsApi,
 		playlistsAdapter,
+		pagesAdapter,
+		enrollmentPacksAdapter,
 		mediaProductsAdapter
 	}), [
 		productsApi,
 		playlistsAdapter,
+		pagesAdapter,
+		enrollmentPacksAdapter,
 		mediaProductsAdapter
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentContext.Provider, {
@@ -12460,6 +13361,59 @@ function ShareablesScreenContent() {
 					};
 				},
 				readOnly: isCustomer,
+				pickerSources: isCustomer ? void 0 : {
+					pages: { list: async ({ search, cursor, limit }) => {
+						const response = await shareablesCtx.pagesAdapter.listPages({
+							cursor: cursor ?? void 0,
+							limit,
+							"filter[title]": search && search.trim().length > 0 ? search : void 0
+						});
+						return {
+							items: response.pages.map((p) => ({
+								id: p.id,
+								title: p.title ?? `Page #${p.id}`,
+								image_url: p.image_url ?? null
+							})),
+							nextCursor: response.meta.pagination?.next_cursor ?? null
+						};
+					} },
+					products: { list: async ({ search, cursor, limit }) => {
+						const trimmedSearch = search?.trim() ?? "";
+						const result = trimmedSearch.length > 0 ? await portalProductsApi.searchProducts(trimmedSearch, {
+							cursor: cursor ?? void 0,
+							limit
+						}) : await portalProductsApi.listProducts({
+							cursor: cursor ?? void 0,
+							limit
+						});
+						return {
+							items: (result.products ?? []).map((p) => p.id != null ? {
+								id: p.id,
+								name: p.name ?? "Untitled",
+								image_url: p.images?.[0]?.url ?? null,
+								price: p.price ?? null
+							} : null).filter((p) => p !== null),
+							nextCursor: result.meta?.pagination?.next_cursor ?? null
+						};
+					} },
+					enrollment_packs: {
+						supportsSearch: false,
+						list: async ({ cursor, limit }) => {
+							const response = await shareablesCtx.enrollmentPacksAdapter.listEnrollmentPacks({
+								cursor: cursor ?? void 0,
+								limit
+							});
+							return {
+								items: response.enrollment_packs.map((pack) => ({
+									id: pack.id,
+									title: pack.title || `Enrollment Pack #${pack.id}`,
+									image_url: pack.images[0]?.url ?? null
+								})),
+								nextCursor: response.meta.pagination?.next_cursor ?? null
+							};
+						}
+					}
+				},
 				uploadThumbnail: isCustomer ? void 0 : async (blob, filename) => {
 					const formData = new FormData();
 					formData.append("asset[name]", filename);
@@ -12475,6 +13429,8 @@ function ShareablesScreenContent() {
 				filePickerApi,
 				isCustomer,
 				shareablesCtx.playlistsAdapter,
+				shareablesCtx.pagesAdapter,
+				shareablesCtx.enrollmentPacksAdapter,
 				shareablesCtx.mediaProductsAdapter,
 				portalProductsApi,
 				client,
@@ -12517,4 +13473,4 @@ Object.defineProperty(exports, "shareablesScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ShareablesScreen-o6frhZUM.cjs.map
+//# sourceMappingURL=ShareablesScreen-DfrTNnRw.cjs.map