@fluid-app/portal-sdk 0.1.218 → 0.1.220

package/dist/{PortalContentApiProvider-RXBp8FNj.cjs → ShareablesScreen-DwnMBftJ.cjs}

@@ -1,14 +1,17 @@
 const require_chunk = require("./chunk-9hOWP6kD.cjs");
-const require_portal_tenant_content = require("./portal_tenant_content-0zpnjBot.cjs");
+const require_portal_tenant_content = require("./portal_tenant_content-BvYxmADB.cjs");
 const require_PortalTenantClientProvider = require("./PortalTenantClientProvider-CVv-4rQ9.cjs");
 const require_src = require("./src-aItPhUAR.cjs");
 const require_ScreenHeaderContext = require("./ScreenHeaderContext-BXgWydjB.cjs");
+const require_use_account = require("./use-account-C5QI6NSe.cjs");
+const require_use_store = require("./use-store-BLcehk1A.cjs");
+const require_AppNavigationContext = require("./AppNavigationContext-CbK8uCjS.cjs");
 const require_dist$3 = require("./dist-CGuUUVNt.cjs");
 const require_es = require("./es-DHLLltoR.cjs");
 const require_SearchSort = require("./SearchSort-DHDDqero.cjs");
 const require_dist$4 = require("./dist-DDZMFlal.cjs");
-const require_dist$5 = require("./dist-DWs3-WOI.cjs");
-const require_PortalProductsApiProvider = require("./PortalProductsApiProvider-Ca1oeTtJ.cjs");
+const require_dist$5 = require("./dist-Bxa9x0H9.cjs");
+const require_PortalProductsApiProvider = require("./PortalProductsApiProvider-CRaocswH.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let _tanstack_react_query = require("@tanstack/react-query");
@@ -288,6 +291,25 @@ const useUpdatePlaylistMutation = (options) => {
 		}
 	});
 };
+const useReorderPlaylistItemsMutation = (options) => {
+	const api = useShareablesApi();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	return (0, _tanstack_react_query.useMutation)({
+		mutationFn: ({ playlistId, data }) => {
+			if (!api.playlists.reorderPlaylistItems) return Promise.resolve();
+			return api.playlists.reorderPlaylistItems(playlistId, data);
+		},
+		onSuccess: (_, { playlistId }) => {
+			if (api.playlists.reorderPlaylistItems) queryClient.invalidateQueries({ queryKey: shareablesKeys.playlists.detail(playlistId) });
+			options?.onSuccess?.(playlistId);
+		},
+		onError: (error, { playlistId }) => {
+			if (isCancellationError(error)) return;
+			console.error("Error reordering playlist items:", error);
+			options?.onError?.(error, playlistId);
+		}
+	});
+};
 //#endregion
 //#region ../../shareables/ui/src/context.tsx
 const MISSING_PROVIDER = Symbol("missing-shareables-provider");
@@ -578,6 +600,83 @@ function ShareableListLayout({ filters, children, isLoading, error, errorMessage
 	});
 }
 //#endregion
+//#region ../../shareables/ui/src/components/shared/ShareableListRow.tsx
+/**
+* Container className for a list-view rendering of shareables. Pairs with
+* `ShareableListRow` and mirrors `SHAREABLE_GRID_CLASS` for symmetry.
+*/
+const SHAREABLE_LIST_CLASS = "divide-border divide-y rounded-lg border";
+/**
+* Single row in a shareables list view. The row body (thumbnail + title) is
+* a `<button>` for keyboard/click navigation; `leading` and `trailing` slots
+* are siblings so their interactive elements don't nest inside the body
+* button. Hover styling applies to the entire row container.
+*/
+function ShareableListRow({ imageUrl, imageAlt, title, subtitle, onClick, leading, trailing }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "hover:bg-muted flex items-center gap-3 px-4 py-3 transition-colors",
+		children: [
+			leading,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				onClick,
+				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: imageUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						src: imageUrl,
+						alt: imageAlt ?? 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: title || "Untitled"
+					}), subtitle != null && subtitle !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-muted-foreground flex items-center gap-1.5 text-xs",
+						children: subtitle
+					})]
+				})]
+			}),
+			trailing
+		]
+	});
+}
+//#endregion
+//#region ../../shareables/ui/src/components/shared/ViewModeToggle.tsx
+/**
+* Segmented list/grid toggle used in the filter bar of every shareable
+* listing screen. Stateless — callers own the `viewMode` state.
+*/
+function ViewModeToggle({ value, onChange }) {
+	return /* @__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)(ToggleButton, {
+			active: value === "list",
+			label: "List view",
+			onClick: () => onChange("list"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.List, { className: "h-4 w-4" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
+			active: value === "grid",
+			label: "Grid view",
+			onClick: () => onChange("grid"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LayoutGrid, { className: "h-4 w-4" })
+		})]
+	});
+}
+function ToggleButton({ active, label, onClick, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick,
+		title: label,
+		"aria-label": label,
+		"aria-pressed": active,
+		className: require_src.cn("flex h-8 w-8 items-center justify-center rounded-md transition-all", active ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+		children
+	});
+}
+//#endregion
 //#region ../../shareables/ui/src/components/screens/ProductsScreen.tsx
 const PAGE_SIZE$4 = 24;
 const SORT_OPTIONS$1 = [
@@ -608,6 +707,7 @@ const SORT_OPTIONS$1 = [
 ];
 function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNavigate }) {
 	const client = useShareablesClient();
+	const { navigate } = useShareablesUI();
 	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbList, {
 		className: "text-lg",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
@@ -618,6 +718,7 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [debouncedSearch, setDebouncedSearch] = (0, react.useState)("");
 	const [sortValue, setSortValue] = (0, react.useState)("created_at_desc");
+	const [viewMode, setViewMode] = (0, react.useState)("grid");
 	const observerTarget = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		const timer = setTimeout(() => {
@@ -705,9 +806,9 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 		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", {
+		filters: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-end 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,
@@ -717,14 +818,18 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 					sortValue,
 					onSortChange: setSortValue
 				})
-			})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewModeToggle, {
+				value: viewMode,
+				onChange: setViewMode
+			})]
 		}),
+		loadingFilterShape: "search-view",
 		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", {
+		children: viewMode === "grid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: SHAREABLE_GRID_CLASS,
 			children: products.map((product) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareProductCard, {
 				product: {
@@ -734,6 +839,14 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 				},
 				mediaCount: product.media_count
 			}, product.id))
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: SHAREABLE_LIST_CLASS,
+			children: products.map((product) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListRow, {
+				imageUrl: product.image_url,
+				title: product.title,
+				subtitle: product.media_count != null ? `${product.media_count} assets` : void 0,
+				onClick: () => navigate(`product/${product.id}`)
+			}, product.id))
 		})
 	});
 }
@@ -1703,21 +1816,9 @@ function MediaListingScreen({ onNavigate }) {
 						}), 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" })
-					})]
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewModeToggle, {
+					value: viewMode,
+					onChange: setViewMode
 				})
 			]
 		})]
@@ -1787,37 +1888,20 @@ function MediaListingScreen({ onNavigate }) {
 				}, item.id);
 			})
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "divide-border divide-y rounded-lg border",
+			className: SHAREABLE_LIST_CLASS,
 			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) })]
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListRow, {
+					imageUrl: item.image_url,
+					imageAlt: item.title ?? "",
+					title: item.title ?? "Untitled",
+					subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [getMediaKindLabel(item.kind), item.owner_type === "user" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Badge, {
+						variant: "secondary",
+						className: "px-1.5 py-0 text-[10px] leading-4",
+						children: "My Media"
+					})] }),
+					onClick: () => navigate(`media/${item.id}`),
+					trailing: canEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MediaRowActionsMenu, { onDelete: () => setPendingDeleteId(item.id) })
 				}, item.id);
 			})
 		})
@@ -8936,6 +9020,7 @@ function PlaylistsListingScreen(_props) {
 	const [debouncedSearch, setDebouncedSearch] = (0, react.useState)("");
 	const [sortValue, setSortValue] = (0, react.useState)("title");
 	const [ownerFilter, setOwnerFilter] = (0, react.useState)("all");
+	const [viewMode, setViewMode] = (0, react.useState)("grid");
 	const [selectedIds, setSelectedIds] = (0, react.useState)(/* @__PURE__ */ new Set());
 	const [pendingDeleteId, setPendingDeleteId] = (0, react.useState)(null);
 	(0, react.useEffect)(() => {
@@ -9106,33 +9191,39 @@ function PlaylistsListingScreen(_props) {
 			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
-			})
+		}), /* @__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 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
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewModeToggle, {
+				value: viewMode,
+				onChange: setViewMode
+			})]
 		})]
 	});
 	const footer = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isFetchingNextPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -9154,8 +9245,8 @@ function PlaylistsListingScreen(_props) {
 		}),
 		footer,
 		sentinelRef: observerTarget,
-		loadingFilterShape: "search-action",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		loadingFilterShape: "search-view",
+		children: viewMode === "grid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: GRID_CLASS,
 			children: filteredPlaylists.map((playlist) => {
 				const firstItem = playlist.items?.[0];
@@ -9177,6 +9268,61 @@ function PlaylistsListingScreen(_props) {
 					onDelete: onDeletePlaylist ? () => setPendingDeleteId(playlist.id) : void 0
 				}, playlist.id);
 			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: SHAREABLE_LIST_CLASS,
+			children: filteredPlaylists.map((playlist) => {
+				const firstItem = playlist.items?.[0];
+				const imageUrl = playlist.image_url ?? firstItem?.image_url ?? firstItem?.relateable?.image_url ?? firstItem?.relateable?.compressed_image_url;
+				const itemCount = playlist.items_count ?? playlist.items?.length ?? 0;
+				const canEdit = !readOnly && playlist.user_id === user?.id;
+				const isSelected = selectedIds.has(playlist.id);
+				const title = playlist.title || "Untitled Playlist";
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListRow, {
+					imageUrl,
+					title,
+					subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Badge, {
+						variant: "secondary",
+						className: "px-1.5 py-0 text-[10px] leading-4",
+						children: [
+							itemCount,
+							" ",
+							itemCount === 1 ? "item" : "items"
+						]
+					}),
+					onClick: () => navigate(`playlists/${playlist.id}`),
+					leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Checkbox, {
+						checked: isSelected,
+						onCheckedChange: (checked) => handleToggleSelection(playlist.id, checked === true),
+						"aria-label": `Select ${title}`
+					}),
+					trailing: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [onToggleFavorite && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => handleFavorite(playlist.id),
+						"aria-label": playlist.is_favorited ? "Unfavorite" : "Favorite",
+						className: "hover:bg-muted-foreground/10 flex h-8 w-8 items-center justify-center rounded-md transition-colors",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Heart, { className: require_src.cn("h-4 w-4 transition-colors", playlist.is_favorited ? "fill-destructive text-destructive" : "text-muted-foreground") })
+					}), canEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "h-8 w-8 p-0",
+							"aria-label": "Playlist actions",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreVertical, { className: "h-4 w-4" })
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuContent, {
+						align: "end",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+							onClick: () => handleEdit(playlist.id),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "mr-2 h-4 w-4" }), "Edit"]
+						}), onDeletePlaylist && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+							variant: "destructive",
+							onClick: () => setPendingDeleteId(playlist.id),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "mr-2 h-4 w-4" }), "Delete"]
+						})] })]
+					})] })] })
+				}, playlist.id);
+			})
 		})
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
 		open: pendingDeleteId !== null,
@@ -10065,6 +10211,7 @@ 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",
@@ -10134,9 +10281,53 @@ function PlaylistItemsSection({ playlistId }) {
 			});
 		}
 	});
+	const reorderItemsMutation = useReorderPlaylistItemsMutation();
+	const reorderTimerRef = (0, react.useRef)(null);
+	const reorderRollbackRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => () => {
+		if (reorderTimerRef.current) clearTimeout(reorderTimerRef.current);
+	}, []);
+	const canPersistReorder = !!api.playlists.reorderPlaylistItems;
 	const mergeAndOrder = (0, react.useCallback)((reorderedContent) => {
-		updateItems(computeOrderedItems([...reorderedContent, ...tailItems]));
-	}, [tailItems, updateItems]);
+		const ordered = computeOrderedItems([...reorderedContent, ...tailItems]);
+		if (playlistId && canPersistReorder && reorderTimerRef.current === null && reorderRollbackRef.current === null) reorderRollbackRef.current = tableItems;
+		updateItems(ordered);
+		if (!playlistId || !canPersistReorder) return;
+		if (reorderTimerRef.current) clearTimeout(reorderTimerRef.current);
+		reorderTimerRef.current = setTimeout(() => {
+			reorderTimerRef.current = null;
+			const rollback = reorderRollbackRef.current;
+			reorderItemsMutation.mutate({
+				playlistId,
+				data: { items: ordered.filter((item) => Number.isInteger(item.id) && typeof item.order === "number").map((item) => ({
+					id: item.id,
+					order: item.order
+				})) }
+			}, {
+				onSuccess: () => {
+					if (reorderTimerRef.current === null) reorderRollbackRef.current = null;
+					else reorderRollbackRef.current = ordered;
+				},
+				onError: (error) => {
+					if (rollback) updateItems(rollback);
+					reorderRollbackRef.current = null;
+					showToast({
+						title: "Failed to save new item order",
+						type: "error",
+						error
+					});
+				}
+			});
+		}, REORDER_DEBOUNCE_MS);
+	}, [
+		tailItems,
+		tableItems,
+		updateItems,
+		playlistId,
+		canPersistReorder,
+		reorderItemsMutation.mutate,
+		showToast
+	]);
 	const handleDeleteItem = (itemId) => {
 		removeItem(itemId);
 		if (playlistId) removeItemMutation.mutate({
@@ -10192,13 +10383,7 @@ function PlaylistItemsSection({ playlistId }) {
 					type: "success"
 				});
 			} catch {}
-			else {
-				addItem(newItem);
-				showToast({
-					title: "Item added. Save the playlist to persist these items.",
-					type: "warning"
-				});
-			}
+			else addItem(newItem);
 		}
 	};
 	const filePickerContextValue = (0, react.useMemo)(() => {
@@ -10800,31 +10985,6 @@ function ShareablesApp({ screen, detailId, action, onNavigate, onBack, countryCo
 	return content;
 }
 //#endregion
-//#region ../../shareables/ui/src/components/ProductsApp.tsx
-function ProductsApp({ countryCode, companyLogoUrl, fetchProducts, fetchProduct, productId: controlledProductId, onSelectProduct: onSelectProductProp, onBack: onBackProp }) {
-	const [internalProductId, setInternalProductId] = (0, react.useState)(null);
-	const activeProductId = controlledProductId !== void 0 ? controlledProductId : internalProductId;
-	const handleSelectProduct = onSelectProductProp ?? setInternalProductId;
-	const handleBack = onBackProp ?? (() => setInternalProductId(null));
-	const handleNavigate = (screen, detailId) => {
-		if (screen === "products" && detailId) handleSelectProduct(detailId);
-	};
-	if (activeProductId) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProductDetailScreen, {
-		productId: activeProductId,
-		countryCode,
-		fetchProduct,
-		onNavigate: handleNavigate,
-		onBack: handleBack
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProductsScreen, {
-		countryCode,
-		fetchProducts,
-		onNavigate: (screen, detailId) => {
-			if (detailId) handleSelectProduct(detailId);
-		}
-	});
-}
-//#endregion
 //#region ../../file-picker/api-client/src/api/url-proxy.ts
 const urlProxyResponseSchema = zod.z.object({
 	data: zod.z.string(),
@@ -11490,6 +11650,9 @@ function createPlaylistsAdapter(client) {
 				items: [],
 				items_count: 0
 			};
+		},
+		reorderPlaylistItems: async (playlistId, data) => {
+			await require_portal_tenant_content.playlists_items_reorder(client, playlistId, { items: data.items });
 		}
 	};
 }
@@ -11856,53 +12019,191 @@ function PortalContentApiProvider({ children }) {
 	});
 }
 //#endregion
-Object.defineProperty(exports, "PortalContentApiProvider", {
-	enumerable: true,
-	get: function() {
-		return PortalContentApiProvider;
-	}
-});
-Object.defineProperty(exports, "ProductsApp", {
-	enumerable: true,
-	get: function() {
-		return ProductsApp;
-	}
-});
-Object.defineProperty(exports, "ShareablesApp", {
-	enumerable: true,
-	get: function() {
-		return ShareablesApp;
-	}
-});
-Object.defineProperty(exports, "ShareablesCoreProvider", {
-	enumerable: true,
-	get: function() {
-		return ShareablesCoreProvider;
-	}
-});
-Object.defineProperty(exports, "ShareablesUIProvider", {
-	enumerable: true,
-	get: function() {
-		return ShareablesUIProvider;
-	}
-});
-Object.defineProperty(exports, "toggleFavorite", {
-	enumerable: true,
-	get: function() {
-		return toggleFavorite;
-	}
-});
-Object.defineProperty(exports, "useFilePickerApi", {
+//#region src/screens/ShareablesScreen.tsx
+/**
+* Parse the current shareables sub-route from the full slug.
+*
+* System nav slugs are "share/products", "share/media", "share/playlists".
+* Detail pages append an ID: "share/products/123", "share/media/456".
+*
+*   "share/products"        → screen="products", detailId=null
+*   "share/products/123"    → screen="products", detailId="123"
+*   "share/media/456"       → screen="media",    detailId="456"
+*   "share/playlists"       → screen="playlists", detailId=null
+*   "share/playlists/789"   → screen="playlists", detailId="789"
+*   "share/files"           → screen="files",    detailId=null
+*   "share"                 → screen=null (default to products)
+*/
+function parseShareablesRoute(currentSlug) {
+	const slugWithoutPrefix = currentSlug.replace(/^share\/?/, "");
+	if (!slugWithoutPrefix) return {
+		screen: null,
+		detailId: null,
+		action: null
+	};
+	const parts = slugWithoutPrefix.split("/");
+	return {
+		screen: parts[0] || null,
+		detailId: parts[1] || null,
+		action: parts[2] || null
+	};
+}
+function ShareablesScreen({ background, textColor, accentColor, padding, borderRadius, ...divProps }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...divProps,
+		className: `h-full ${divProps.className ?? ""}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PortalProductsApiProvider.PortalProductsApiProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalContentApiProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareablesScreenContent, {}) }) })
+	});
+}
+/** Inner component rendered inside providers so hooks can access context. */
+function ShareablesScreenContent() {
+	const shareablesCtx = usePortalContentContext();
+	const { productsApi: portalProductsApi } = shareablesCtx;
+	const filePickerApi = useFilePickerApi();
+	const { data: account } = require_use_account.useAccount();
+	const { data: store } = require_use_store.useStore();
+	const { currentSlug, navigate } = require_AppNavigationContext.useAppNavigation();
+	const isCustomer = account?.member_type === "customer";
+	const client = require_PortalTenantClientProvider.usePortalTenantClient();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const fetchProducts = (0, react.useCallback)(async (search, cursor, limit, sort) => {
+		if (search) return portalProductsApi.searchProducts(search, {
+			cursor,
+			limit
+		});
+		return portalProductsApi.listProducts({
+			cursor,
+			limit,
+			sort
+		});
+	}, [portalProductsApi]);
+	const fetchProduct = (0, react.useCallback)(async (id) => portalProductsApi.getProduct(id), [portalProductsApi]);
+	const { screen, detailId, action } = parseShareablesRoute(currentSlug);
+	const handleNavigate = (0, react.useCallback)((subScreen, id) => {
+		navigate(id ? `share/${subScreen}/${id}` : `share/${subScreen}`);
+	}, [navigate]);
+	const handleBack = (0, react.useCallback)(() => {
+		if (detailId && screen) navigate(`share/${screen}`);
+		else navigate("share/products");
+	}, [
+		navigate,
+		detailId,
+		screen
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareablesCoreProvider, {
+		config: (0, react.useMemo)(() => ({
+			user: account ? { id: account.id } : null,
+			repContext: true
+		}), [account]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareablesUIProvider, {
+			config: (0, react.useMemo)(() => ({
+				user: account ? {
+					id: account.id,
+					company: { logo_url: store?.logo_url ?? null }
+				} : void 0,
+				affiliateId: null,
+				basePath: "",
+				navigate: (path) => {
+					const cleanPath = path.replace(/^\//, "");
+					navigate(cleanPath.startsWith("share/") ? cleanPath : `share/${cleanPath}`);
+				},
+				showToast: (opts) => {
+					require_src.fluidToast({
+						title: opts.title,
+						type: opts.type
+					});
+					if (opts.error) console.error("[Shareables]", opts.error);
+				},
+				filePickerApi,
+				onToggleFavorite: async (params) => {
+					const result = await toggleFavorite(client, params.favoriteableId, params.favoriteableType);
+					queryClient.invalidateQueries({ queryKey: require_dist$5.PORTAL_MYSITE_KEYS.favorites() });
+					return result;
+				},
+				onMySiteShare: async (params) => {
+					await toggleFavorite(client, params.relateable_id, params.relateable_type);
+					queryClient.invalidateQueries({ queryKey: require_dist$5.PORTAL_MYSITE_KEYS.favorites() });
+				},
+				onDeletePlaylist: isCustomer ? void 0 : async (playlistId) => {
+					await shareablesCtx.playlistsAdapter.deletePlaylist(playlistId);
+				},
+				mediaProductsApi: isCustomer ? void 0 : shareablesCtx.mediaProductsAdapter,
+				searchProducts: isCustomer ? void 0 : async (query, options) => {
+					const limit = options?.limit ?? 25;
+					const cursor = options?.cursor ?? void 0;
+					const result = query.trim().length > 0 ? await portalProductsApi.searchProducts(query, {
+						cursor,
+						limit
+					}) : await portalProductsApi.listProducts({
+						cursor,
+						limit
+					});
+					return {
+						products: (result.products ?? []).map((p) => p.id != null ? {
+							id: p.id,
+							name: p.name ?? p.title ?? "Untitled",
+							image_url: p.image_url ?? null,
+							price: p.price ?? null
+						} : null).filter((p) => p !== null),
+						nextCursor: result.meta?.pagination?.next_cursor ?? null
+					};
+				},
+				readOnly: isCustomer,
+				uploadThumbnail: isCustomer ? void 0 : async (blob, filename) => {
+					const formData = new FormData();
+					formData.append("asset[name]", filename);
+					formData.append("asset[file]", blob, filename);
+					const url = (await client.requestWithFormData("/api/content/dam/assets", formData)).asset?.default_variant_url;
+					if (!url) throw new Error("Thumbnail upload succeeded but no URL returned");
+					return url;
+				}
+			}), [
+				account,
+				store,
+				navigate,
+				filePickerApi,
+				isCustomer,
+				shareablesCtx.playlistsAdapter,
+				shareablesCtx.mediaProductsAdapter,
+				portalProductsApi,
+				client,
+				queryClient
+			]),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareablesApp, {
+				screen,
+				detailId,
+				action,
+				companyLogoUrl: void 0,
+				countryCode: void 0,
+				fetchProducts,
+				fetchProduct,
+				onNavigate: handleNavigate,
+				onBack: handleBack
+			})
+		})
+	});
+}
+const shareablesScreenPropertySchema = {
+	widgetType: "ShareablesScreen",
+	displayName: "Shareables Screen",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}],
+	fields: []
+};
+//#endregion
+Object.defineProperty(exports, "ShareablesScreen", {
 	enumerable: true,
 	get: function() {
-		return useFilePickerApi;
+		return ShareablesScreen;
 	}
 });
-Object.defineProperty(exports, "usePortalContentContext", {
+Object.defineProperty(exports, "shareablesScreenPropertySchema", {
 	enumerable: true,
 	get: function() {
-		return usePortalContentContext;
+		return shareablesScreenPropertySchema;
 	}
 });
 
-//# sourceMappingURL=PortalContentApiProvider-RXBp8FNj.cjs.map
+//# sourceMappingURL=ShareablesScreen-DwnMBftJ.cjs.map