@fluid-app/portal-sdk 0.1.218 → 0.1.220

package/dist/{PortalContentApiProvider-C9FeVwRb.mjs → ShareablesScreen-DV2nikzp.mjs}

@@ -1,13 +1,16 @@
-import { t as useDropzone } from "./es-Cw_Kikmu.mjs";
-import { A as playlists_update, C as playlists_create, D as playlists_items_remove, E as playlists_items_list, M as shares_list, O as playlists_list, T as playlists_items_add, _ as media_products_add, a as content_playlists_metrics_share_visits, b as media_show, c as dam_asset_paths_list, d as dam_assets_discard, f as dam_assets_list, g as media_list, h as media_destroy, i as content_pages_metrics_visits, j as shares_create, k as playlists_show, l as dam_assets_create, m as media_create, n as content_media_metrics_visits, o as content_playlists_metrics_visits, p as dam_query, r as content_pages_metrics_share_visits, s as dam_asset_paths_create, t as content_media_metrics_share_visits, u as dam_assets_destroy, v as media_products_list, w as playlists_destroy, x as media_update, y as media_products_remove } from "./portal_tenant_content-DzIQtSLE.mjs";
+import { r as __exportAll, t as useDropzone } from "./es-Cw_Kikmu.mjs";
+import { A as playlists_show, C as playlists_create, D as playlists_items_remove, E as playlists_items_list, M as shares_create, N as shares_list, O as playlists_items_reorder, T as playlists_items_add, _ as media_products_add, a as content_playlists_metrics_share_visits, b as media_show, c as dam_asset_paths_list, d as dam_assets_discard, f as dam_assets_list, g as media_list, h as media_destroy, i as content_pages_metrics_visits, j as playlists_update, k as playlists_list, l as dam_assets_create, m as media_create, n as content_media_metrics_visits, o as content_playlists_metrics_visits, p as dam_query, r as content_pages_metrics_share_visits, s as dam_asset_paths_create, t as content_media_metrics_share_visits, u as dam_assets_destroy, v as media_products_list, w as playlists_destroy, x as media_update, y as media_products_remove } from "./portal_tenant_content-nHEI2qEY.mjs";
 import { n as usePortalTenantClient } from "./PortalTenantClientProvider-4ZmY6hac.mjs";
-import { $ as DropdownMenuSeparator, A as Select, At as Checkbox, B as Form, C as Skeleton, Cn as AlertDialogFooter, Dn as Content, En as Button, Et as CardContent, G as FormMessage, H as FormField, J as DropdownMenuContent, K as Label, L as Input, M as SelectItem, N as SelectTrigger, Nn as useZodForm, P as SelectValue, Pn as cn, S as Slider, Sn as AlertDialogDescription, Tn as AlertDialogTitle, U as FormItem, V as FormControl, W as FormLabel, Y as DropdownMenuItem, _ as Switch, bn as AlertDialogCancel, c as Tabs, cn as Breadcrumb, dn as BreadcrumbList, dt as DialogPortal, et as DropdownMenuSub, fn as BreadcrumbPage, ft as DialogTitle, ht as PopoverTrigger, i as TooltipTrigger, it as Dialog, j as SelectContent, k as Separator, l as TabsList, ln as BreadcrumbItem, lt as DialogHeader, mn as Badge, mt as PopoverContent, n as TooltipContent, nt as DropdownMenuSubTrigger, ot as DialogContent, pn as BreadcrumbSeparator, pt as Popover, q as DropdownMenu, r as TooltipProvider, rt as DropdownMenuTrigger, s as Textarea, st as DialogDescription, t as Tooltip, tt as DropdownMenuSubContent, u as TabsTrigger, un as BreadcrumbLink, ut as DialogOverlay, vn as AlertDialog, wn as AlertDialogHeader, wt as Card, xn as AlertDialogContent, y as Spinner, yn as AlertDialogAction } from "./src-BEKH1DXO.mjs";
+import { $ as DropdownMenuSeparator, A as Select, At as Checkbox, B as Form, C as Skeleton, Cn as AlertDialogFooter, Dn as Content, En as Button, Et as CardContent, G as FormMessage, H as FormField, J as DropdownMenuContent, K as Label, L as Input, M as SelectItem, N as SelectTrigger, Nn as useZodForm, P as SelectValue, Pn as cn, S as Slider, Sn as AlertDialogDescription, Tn as AlertDialogTitle, U as FormItem, V as FormControl, W as FormLabel, Y as DropdownMenuItem, _ as Switch, b as fluidToast, bn as AlertDialogCancel, c as Tabs, cn as Breadcrumb, dn as BreadcrumbList, dt as DialogPortal, et as DropdownMenuSub, fn as BreadcrumbPage, ft as DialogTitle, ht as PopoverTrigger, i as TooltipTrigger, it as Dialog, j as SelectContent, k as Separator, l as TabsList, ln as BreadcrumbItem, lt as DialogHeader, mn as Badge, mt as PopoverContent, n as TooltipContent, nt as DropdownMenuSubTrigger, ot as DialogContent, pn as BreadcrumbSeparator, pt as Popover, q as DropdownMenu, r as TooltipProvider, rt as DropdownMenuTrigger, s as Textarea, st as DialogDescription, t as Tooltip, tt as DropdownMenuSubContent, u as TabsTrigger, un as BreadcrumbLink, ut as DialogOverlay, vn as AlertDialog, wn as AlertDialogHeader, wt as Card, xn as AlertDialogContent, y as Spinner, yn as AlertDialogAction } from "./src-BEKH1DXO.mjs";
 import { n as useScreenHeaderActions, r as useScreenHeaderBreadcrumbs } from "./ScreenHeaderContext-BDjNSUfr.mjs";
+import { t as useAccount } from "./use-account-Cvig0exB.mjs";
+import { t as useStore } from "./use-store-efmQhKpB.mjs";
+import { n as useAppNavigation } from "./AppNavigationContext-Cq3BDKSf.mjs";
 import { a as useEditor, o as Placeholder, r as EditorContent, t as StarterKit } from "./dist-D39Yezrv.mjs";
 import { t as SearchSort } from "./SearchSort-DXBt-uj0.mjs";
 import { n as TextAlign, t as Underline } from "./dist-Cis8L6HV.mjs";
-import { a as verticalListSortingStrategy, c as PointerSensor, d as useSensors, f as CSS, i as useSortable, l as closestCenter, n as arrayMove, o as DndContext, r as sortableKeyboardCoordinates, s as KeyboardSensor, t as SortableContext, u as useSensor } from "./sortable.esm-CJLSD-Ce.mjs";
-import { o as usePortalProductsApi } from "./PortalProductsApiProvider-CE71zDj9.mjs";
+import { a as verticalListSortingStrategy, c as PointerSensor, d as useSensors, f as CSS, i as useSortable, l as closestCenter, n as arrayMove, o as DndContext, p as PORTAL_MYSITE_KEYS, r as sortableKeyboardCoordinates, s as KeyboardSensor, t as SortableContext, u as useSensor } from "./sortable.esm-fSGrAZU2.mjs";
+import { o as usePortalProductsApi, t as PortalProductsApiProvider } from "./PortalProductsApiProvider-BwIRudl_.mjs";
 import React, { PureComponent, createContext, createRef, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { keepPreviousData, useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -286,6 +289,25 @@ const useUpdatePlaylistMutation = (options) => {
 		}
 	});
 };
+const useReorderPlaylistItemsMutation = (options) => {
+	const api = useShareablesApi();
+	const queryClient = useQueryClient();
+	return 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");
@@ -576,6 +598,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__ */ jsxs("div", {
+		className: "hover:bg-muted flex items-center gap-3 px-4 py-3 transition-colors",
+		children: [
+			leading,
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick,
+				className: "flex min-w-0 flex-1 items-center gap-4 text-left",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "bg-muted h-12 w-12 shrink-0 overflow-hidden rounded-md",
+					children: imageUrl ? /* @__PURE__ */ jsx("img", {
+						src: imageUrl,
+						alt: imageAlt ?? title,
+						className: "h-full w-full object-cover"
+					}) : /* @__PURE__ */ jsx("div", { className: "bg-muted h-full w-full" })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-foreground truncate text-sm font-medium",
+						children: title || "Untitled"
+					}), subtitle != null && subtitle !== false && /* @__PURE__ */ 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__ */ jsxs("div", {
+		className: "border-input bg-muted flex items-center rounded-lg border p-0.5",
+		children: [/* @__PURE__ */ jsx(ToggleButton, {
+			active: value === "list",
+			label: "List view",
+			onClick: () => onChange("list"),
+			children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" })
+		}), /* @__PURE__ */ jsx(ToggleButton, {
+			active: value === "grid",
+			label: "Grid view",
+			onClick: () => onChange("grid"),
+			children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" })
+		})]
+	});
+}
+function ToggleButton({ active, label, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		title: label,
+		"aria-label": label,
+		"aria-pressed": active,
+		className: 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 = [
@@ -606,6 +705,7 @@ const SORT_OPTIONS$1 = [
 ];
 function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNavigate }) {
 	const client = useShareablesClient();
+	const { navigate } = useShareablesUI();
 	useScreenHeaderBreadcrumbs(useMemo(() => /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, {
 		className: "text-lg",
 		children: /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, {
@@ -616,6 +716,7 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 	const [searchTerm, setSearchTerm] = useState("");
 	const [debouncedSearch, setDebouncedSearch] = useState("");
 	const [sortValue, setSortValue] = useState("created_at_desc");
+	const [viewMode, setViewMode] = useState("grid");
 	const observerTarget = useRef(null);
 	useEffect(() => {
 		const timer = setTimeout(() => {
@@ -703,9 +804,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__ */ jsx("div", {
-			className: "flex justify-end",
-			children: /* @__PURE__ */ jsx("div", {
+		filters: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-end gap-2",
+			children: [/* @__PURE__ */ jsx("div", {
 				className: "w-full max-w-sm",
 				children: /* @__PURE__ */ jsx(SearchSort, {
 					searchValue: searchTerm,
@@ -715,14 +816,18 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 					sortValue,
 					onSortChange: setSortValue
 				})
-			})
+			}), /* @__PURE__ */ jsx(ViewModeToggle, {
+				value: viewMode,
+				onChange: setViewMode
+			})]
 		}),
+		loadingFilterShape: "search-view",
 		footer: isFetchingNextPage && /* @__PURE__ */ jsx("div", {
 			className: "flex justify-center py-4",
 			children: /* @__PURE__ */ jsx("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
 		}),
 		sentinelRef: observerTarget,
-		children: /* @__PURE__ */ jsx("div", {
+		children: viewMode === "grid" ? /* @__PURE__ */ jsx("div", {
 			className: SHAREABLE_GRID_CLASS,
 			children: products.map((product) => /* @__PURE__ */ jsx(ShareProductCard, {
 				product: {
@@ -732,6 +837,14 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 				},
 				mediaCount: product.media_count
 			}, product.id))
+		}) : /* @__PURE__ */ jsx("div", {
+			className: SHAREABLE_LIST_CLASS,
+			children: products.map((product) => /* @__PURE__ */ 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))
 		})
 	});
 }
@@ -1701,21 +1814,9 @@ function MediaListingScreen({ onNavigate }) {
 						}), kindFilter === opt.value && /* @__PURE__ */ jsx(Check, { className: "text-muted-foreground size-4" })]
 					}, opt.value))
 				})] }),
-				/* @__PURE__ */ jsxs("div", {
-					className: "border-input bg-muted flex items-center rounded-lg border p-0.5",
-					children: [/* @__PURE__ */ 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__ */ jsx(List, { className: "h-4 w-4" })
-					}), /* @__PURE__ */ 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__ */ jsx(LayoutGrid, { className: "h-4 w-4" })
-					})]
+				/* @__PURE__ */ jsx(ViewModeToggle, {
+					value: viewMode,
+					onChange: setViewMode
 				})
 			]
 		})]
@@ -1785,37 +1886,20 @@ function MediaListingScreen({ onNavigate }) {
 				}, item.id);
 			})
 		}) : /* @__PURE__ */ 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__ */ jsxs("div", {
-					className: "hover:bg-muted flex items-center gap-4 px-4 py-3 transition-colors",
-					children: [/* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onClick: () => navigate(`media/${item.id}`),
-						className: "flex min-w-0 flex-1 items-center gap-4 text-left",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "bg-muted h-12 w-12 shrink-0 overflow-hidden rounded-md",
-							children: item.image_url ? /* @__PURE__ */ jsx("img", {
-								src: item.image_url,
-								alt: item.title ?? "",
-								className: "h-full w-full object-cover"
-							}) : /* @__PURE__ */ jsx("div", { className: "bg-muted h-full w-full" })
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "min-w-0 flex-1",
-							children: [/* @__PURE__ */ jsx("p", {
-								className: "text-foreground truncate text-sm font-medium",
-								children: item.title ?? "Untitled"
-							}), /* @__PURE__ */ jsxs("p", {
-								className: "text-muted-foreground flex items-center gap-1.5 text-xs",
-								children: [getMediaKindLabel(item.kind), item.owner_type === "user" && /* @__PURE__ */ jsx(Badge, {
-									variant: "secondary",
-									className: "px-1.5 py-0 text-[10px] leading-4",
-									children: "My Media"
-								})]
-							})]
-						})]
-					}), canEdit && /* @__PURE__ */ jsx(MediaRowActionsMenu, { onDelete: () => setPendingDeleteId(item.id) })]
+				return /* @__PURE__ */ jsx(ShareableListRow, {
+					imageUrl: item.image_url,
+					imageAlt: item.title ?? "",
+					title: item.title ?? "Untitled",
+					subtitle: /* @__PURE__ */ jsxs(Fragment$1, { children: [getMediaKindLabel(item.kind), item.owner_type === "user" && /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "px-1.5 py-0 text-[10px] leading-4",
+						children: "My Media"
+					})] }),
+					onClick: () => navigate(`media/${item.id}`),
+					trailing: canEdit && /* @__PURE__ */ jsx(MediaRowActionsMenu, { onDelete: () => setPendingDeleteId(item.id) })
 				}, item.id);
 			})
 		})
@@ -8934,6 +9018,7 @@ function PlaylistsListingScreen(_props) {
 	const [debouncedSearch, setDebouncedSearch] = useState("");
 	const [sortValue, setSortValue] = useState("title");
 	const [ownerFilter, setOwnerFilter] = useState("all");
+	const [viewMode, setViewMode] = useState("grid");
 	const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
 	const [pendingDeleteId, setPendingDeleteId] = useState(null);
 	useEffect(() => {
@@ -9104,33 +9189,39 @@ function PlaylistsListingScreen(_props) {
 			value: ownerFilter,
 			onValueChange: setOwnerFilter,
 			myLabel: "My Playlists"
-		}), /* @__PURE__ */ jsx("div", {
-			className: "ml-auto w-full max-w-sm",
-			children: /* @__PURE__ */ jsx(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__ */ jsxs("div", {
+			className: "ml-auto flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "w-full max-w-sm",
+				children: /* @__PURE__ */ jsx(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__ */ jsx(ViewModeToggle, {
+				value: viewMode,
+				onChange: setViewMode
+			})]
 		})]
 	});
 	const footer = /* @__PURE__ */ jsxs(Fragment$1, { children: [isFetchingNextPage && /* @__PURE__ */ jsx("div", {
@@ -9152,8 +9243,8 @@ function PlaylistsListingScreen(_props) {
 		}),
 		footer,
 		sentinelRef: observerTarget,
-		loadingFilterShape: "search-action",
-		children: /* @__PURE__ */ jsx("div", {
+		loadingFilterShape: "search-view",
+		children: viewMode === "grid" ? /* @__PURE__ */ jsx("div", {
 			className: GRID_CLASS,
 			children: filteredPlaylists.map((playlist) => {
 				const firstItem = playlist.items?.[0];
@@ -9175,6 +9266,61 @@ function PlaylistsListingScreen(_props) {
 					onDelete: onDeletePlaylist ? () => setPendingDeleteId(playlist.id) : void 0
 				}, playlist.id);
 			})
+		}) : /* @__PURE__ */ 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__ */ jsx(ShareableListRow, {
+					imageUrl,
+					title,
+					subtitle: /* @__PURE__ */ jsxs(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__ */ jsx(Checkbox, {
+						checked: isSelected,
+						onCheckedChange: (checked) => handleToggleSelection(playlist.id, checked === true),
+						"aria-label": `Select ${title}`
+					}),
+					trailing: /* @__PURE__ */ jsxs(Fragment$1, { children: [onToggleFavorite && /* @__PURE__ */ 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__ */ jsx(Heart, { className: cn("h-4 w-4 transition-colors", playlist.is_favorited ? "fill-destructive text-destructive" : "text-muted-foreground") })
+					}), canEdit && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "h-8 w-8 p-0",
+							"aria-label": "Playlist actions",
+							children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
+						})
+					}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+						align: "end",
+						children: [/* @__PURE__ */ jsxs(DropdownMenuItem, {
+							onClick: () => handleEdit(playlist.id),
+							children: [/* @__PURE__ */ jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Edit"]
+						}), onDeletePlaylist && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+							variant: "destructive",
+							onClick: () => setPendingDeleteId(playlist.id),
+							children: [/* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-4 w-4" }), "Delete"]
+						})] })]
+					})] })] })
+				}, playlist.id);
+			})
 		})
 	}), /* @__PURE__ */ jsx(AlertDialog, {
 		open: pendingDeleteId !== null,
@@ -10060,6 +10206,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",
@@ -10129,9 +10276,53 @@ function PlaylistItemsSection({ playlistId }) {
 			});
 		}
 	});
+	const reorderItemsMutation = useReorderPlaylistItemsMutation();
+	const reorderTimerRef = useRef(null);
+	const reorderRollbackRef = useRef(null);
+	useEffect(() => () => {
+		if (reorderTimerRef.current) clearTimeout(reorderTimerRef.current);
+	}, []);
+	const canPersistReorder = !!api.playlists.reorderPlaylistItems;
 	const mergeAndOrder = 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({
@@ -10187,13 +10378,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 = useMemo(() => {
@@ -10795,31 +10980,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] = 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__ */ jsx(ProductDetailScreen, {
-		productId: activeProductId,
-		countryCode,
-		fetchProduct,
-		onNavigate: handleNavigate,
-		onBack: handleBack
-	});
-	return /* @__PURE__ */ jsx(ProductsScreen, {
-		countryCode,
-		fetchProducts,
-		onNavigate: (screen, detailId) => {
-			if (detailId) handleSelectProduct(detailId);
-		}
-	});
-}
-//#endregion
 //#region ../../file-picker/api-client/src/api/url-proxy.ts
 const urlProxyResponseSchema = z.object({
 	data: z.string(),
@@ -11485,6 +11645,9 @@ function createPlaylistsAdapter(client) {
 				items: [],
 				items_count: 0
 			};
+		},
+		reorderPlaylistItems: async (playlistId, data) => {
+			await playlists_items_reorder(client, playlistId, { items: data.items });
 		}
 	};
 }
@@ -11851,6 +12014,184 @@ function PortalContentApiProvider({ children }) {
 	});
 }
 //#endregion
-export { ShareablesApp as a, ShareablesCoreProvider as c, ProductsApp as i, usePortalContentContext as n, useFilePickerApi as o, toggleFavorite as r, ShareablesUIProvider as s, PortalContentApiProvider as t };
+//#region src/screens/ShareablesScreen.tsx
+var ShareablesScreen_exports = /* @__PURE__ */ __exportAll({
+	ShareablesScreen: () => ShareablesScreen,
+	shareablesScreenPropertySchema: () => shareablesScreenPropertySchema
+});
+/**
+* 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__ */ jsx("div", {
+		...divProps,
+		className: `h-full ${divProps.className ?? ""}`,
+		children: /* @__PURE__ */ jsx(PortalProductsApiProvider, { children: /* @__PURE__ */ jsx(PortalContentApiProvider, { children: /* @__PURE__ */ 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 } = useAccount();
+	const { data: store } = useStore();
+	const { currentSlug, navigate } = useAppNavigation();
+	const isCustomer = account?.member_type === "customer";
+	const client = usePortalTenantClient();
+	const queryClient = useQueryClient();
+	const fetchProducts = useCallback(async (search, cursor, limit, sort) => {
+		if (search) return portalProductsApi.searchProducts(search, {
+			cursor,
+			limit
+		});
+		return portalProductsApi.listProducts({
+			cursor,
+			limit,
+			sort
+		});
+	}, [portalProductsApi]);
+	const fetchProduct = useCallback(async (id) => portalProductsApi.getProduct(id), [portalProductsApi]);
+	const { screen, detailId, action } = parseShareablesRoute(currentSlug);
+	const handleNavigate = useCallback((subScreen, id) => {
+		navigate(id ? `share/${subScreen}/${id}` : `share/${subScreen}`);
+	}, [navigate]);
+	const handleBack = useCallback(() => {
+		if (detailId && screen) navigate(`share/${screen}`);
+		else navigate("share/products");
+	}, [
+		navigate,
+		detailId,
+		screen
+	]);
+	return /* @__PURE__ */ jsx(ShareablesCoreProvider, {
+		config: useMemo(() => ({
+			user: account ? { id: account.id } : null,
+			repContext: true
+		}), [account]),
+		children: /* @__PURE__ */ jsx(ShareablesUIProvider, {
+			config: 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) => {
+					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: PORTAL_MYSITE_KEYS.favorites() });
+					return result;
+				},
+				onMySiteShare: async (params) => {
+					await toggleFavorite(client, params.relateable_id, params.relateable_type);
+					queryClient.invalidateQueries({ queryKey: 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__ */ 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
+export { ShareablesScreen_exports as n, shareablesScreenPropertySchema as r, ShareablesScreen as t };
 
-//# sourceMappingURL=PortalContentApiProvider-C9FeVwRb.mjs.map
+//# sourceMappingURL=ShareablesScreen-DV2nikzp.mjs.map