@anymux/ui-kit 0.1.0

package/dist/list.d.ts

@@ -0,0 +1,2 @@
+import { AccessibilityConfig, BenchmarkReport, BenchmarkResult, CalculatedGridView$1 as CalculatedGridView, DETAILS_VIEW_TYPE$1 as DETAILS_VIEW_TYPE, EmptyState$1 as EmptyState, ErrorDisplay$1 as ErrorDisplay, FocusManager$1 as FocusManager, GRID_PRESETS$1 as GRID_PRESETS, GRID_VIEW_TYPE$1 as GRID_VIEW_TYPE, GridItemLayout, GridLayoutCalculator$1 as GridLayoutCalculator, GridLayoutConfig, GridLayoutResult, InlineLoading$1 as InlineLoading, ItemAccessibilityConfig, KeyboardNavigationConfig, KeyboardNavigationOptions, LIST_VIEW_TYPE$1 as LIST_VIEW_TYPE, ListContextMenu$1 as ListContextMenu, ListContextMenuItem, ListDragDropInfo, ListError, ListErrorBoundary$1 as ListErrorBoundary, ListItem$1 as ListItem, ListItemData, ListItemProps, ListItemRenderer, ListItems$1 as ListItems, ListItemsModel$1 as ListItemsModel, ListItemsProps, ListItemsProvider, ListKeyboardHandler$1 as ListKeyboardHandler, ListLoadOptions, ListLoadResult, ListLoader$1 as ListLoader, ListSelectionInfo, ListViewType, LoadError$1 as LoadError, LoadingIndicator$1 as LoadingIndicator, LoadingProgress$1 as LoadingProgress, MASONRY_HORIZONTAL_VIEW_TYPE$1 as MASONRY_HORIZONTAL_VIEW_TYPE, MASONRY_PRESETS$1 as MASONRY_PRESETS, MASONRY_VERTICAL_VIEW_TYPE$1 as MASONRY_VERTICAL_VIEW_TYPE, MasonryItemData, MasonryItemLayout, MasonryLayoutCalculator$1 as MasonryLayoutCalculator, MasonryLayoutConfig, MasonryLayoutResult, MasonryView$1 as MasonryView, NetworkError$1 as NetworkError, NoItems$1 as NoItems, NoSearchResults$1 as NoSearchResults, NoSelection$1 as NoSelection, SearchFilter$1 as SearchFilter, TREEMAP_VIEW_TYPE$1 as TREEMAP_VIEW_TYPE, TestListProvider$1 as TestListProvider, ThumbnailSize, TreemapModel$1 as TreemapModel, TreemapNodeData, TreemapScanProgress, TreemapView$1 as TreemapView, ViewSizeControls$1 as ViewSizeControls, ViewTypeSelector$1 as ViewTypeSelector, ViewTypeSelectorProps, VirtualizationConfig, VirtualizedGrid$1 as VirtualizedGrid, VirtualizedGridProps, VirtualizedList$1 as VirtualizedList, VirtualizedListProps, announceToScreenReader$1 as announceToScreenReader, benchmark$1 as benchmark, benchmarkLogger$1 as benchmarkLogger, createGridCalculator$1 as createGridCalculator, createLiveRegionAnnouncement$1 as createLiveRegionAnnouncement, createMasonryCalculator$1 as createMasonryCalculator, getItemAccessibilityProps$1 as getItemAccessibilityProps, getListAccessibilityProps$1 as getListAccessibilityProps, getNextFocusIndex$1 as getNextFocusIndex, useListKeyboard$1 as useListKeyboard } from "./index-Bryv_GCG.js";
+export { AccessibilityConfig, BenchmarkReport, BenchmarkResult, CalculatedGridView, DETAILS_VIEW_TYPE, EmptyState, ErrorDisplay, FocusManager, GRID_PRESETS, GRID_VIEW_TYPE, GridItemLayout, GridLayoutCalculator, GridLayoutConfig, GridLayoutResult, InlineLoading, ItemAccessibilityConfig, KeyboardNavigationConfig, KeyboardNavigationOptions, LIST_VIEW_TYPE, ListContextMenu, ListContextMenuItem, ListDragDropInfo, ListError, ListErrorBoundary, ListItem, ListItemData, ListItemProps, ListItemRenderer, ListItems, ListItemsModel, ListItemsProps, ListItemsProvider, ListKeyboardHandler, ListLoadOptions, ListLoadResult, ListLoader, ListSelectionInfo, ListViewType, LoadError, LoadingIndicator, LoadingProgress, MASONRY_HORIZONTAL_VIEW_TYPE, MASONRY_PRESETS, MASONRY_VERTICAL_VIEW_TYPE, MasonryItemData, MasonryItemLayout, MasonryLayoutCalculator, MasonryLayoutConfig, MasonryLayoutResult, MasonryView, NetworkError, NoItems, NoSearchResults, NoSelection, SearchFilter, TREEMAP_VIEW_TYPE, TestListProvider, ThumbnailSize, TreemapModel, TreemapNodeData, TreemapScanProgress, TreemapView, ViewSizeControls, ViewTypeSelector, ViewTypeSelectorProps, VirtualizationConfig, VirtualizedGrid, VirtualizedGridProps, VirtualizedList, VirtualizedListProps, announceToScreenReader, benchmark, benchmarkLogger, createGridCalculator, createLiveRegionAnnouncement, createMasonryCalculator, getItemAccessibilityProps, getListAccessibilityProps, getNextFocusIndex, useListKeyboard };

package/dist/list.js

@@ -0,0 +1,5 @@
+import "./iconMap-V4B8P-Uh.js";
+import "./FileBrowserContext-B6jixa2j.js";
+import { CalculatedGridView, DETAILS_VIEW_TYPE, EmptyState, ErrorDisplay, FocusManager, GRID_PRESETS, GRID_VIEW_TYPE, GridLayoutCalculator, InlineLoading, LIST_VIEW_TYPE, ListContextMenu, ListErrorBoundary, ListItem, ListItems, ListItemsModel, ListKeyboardHandler, ListLoader, LoadError, LoadingIndicator, LoadingProgress, MASONRY_HORIZONTAL_VIEW_TYPE, MASONRY_PRESETS, MASONRY_VERTICAL_VIEW_TYPE, MasonryLayoutCalculator, MasonryView, NetworkError, NoItems, NoSearchResults, NoSelection, SearchFilter, TREEMAP_VIEW_TYPE, TestListProvider, TreemapModel, TreemapView, ViewSizeControls, ViewTypeSelector, VirtualizedGrid, VirtualizedList, announceToScreenReader, benchmark, benchmarkLogger, createGridCalculator, createLiveRegionAnnouncement, createMasonryCalculator, getItemAccessibilityProps, getListAccessibilityProps, getNextFocusIndex, useListKeyboard } from "./list-CxfT6hix.js";
+
+export { CalculatedGridView, DETAILS_VIEW_TYPE, EmptyState, ErrorDisplay, FocusManager, GRID_PRESETS, GRID_VIEW_TYPE, GridLayoutCalculator, InlineLoading, LIST_VIEW_TYPE, ListContextMenu, ListErrorBoundary, ListItem, ListItems, ListItemsModel, ListKeyboardHandler, ListLoader, LoadError, LoadingIndicator, LoadingProgress, MASONRY_HORIZONTAL_VIEW_TYPE, MASONRY_PRESETS, MASONRY_VERTICAL_VIEW_TYPE, MasonryLayoutCalculator, MasonryView, NetworkError, NoItems, NoSearchResults, NoSelection, SearchFilter, TREEMAP_VIEW_TYPE, TestListProvider, TreemapModel, TreemapView, ViewSizeControls, ViewTypeSelector, VirtualizedGrid, VirtualizedList, announceToScreenReader, benchmark, benchmarkLogger, createGridCalculator, createLiveRegionAnnouncement, createMasonryCalculator, getItemAccessibilityProps, getListAccessibilityProps, getNextFocusIndex, useListKeyboard };

package/dist/media-DZ292aKK.js

@@ -0,0 +1,557 @@
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { ChevronLeft, ChevronRight, Clock, Download, FolderOpen, Grid3X3, Image, List, Loader2, Music, Play, Search, X } from "lucide-react";
+import { BrowserError } from "@anymux/ui/components/browser-error";
+import { makeAutoObservable, runInAction } from "mobx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/media/MediaBrowserModel.ts
+var MediaBrowserModel = class {
+	constructor(provider) {
+		this.provider = provider;
+		this.items = [];
+		this.selectedItems = new Set();
+		this.viewMode = "grid";
+		this.currentAlbum = null;
+		this.loading = false;
+		this.error = null;
+		this.searchQuery = "";
+		this.sortBy = "date";
+		this.filterByType = null;
+		this.previewItem = null;
+		makeAutoObservable(this);
+	}
+	get filteredItems() {
+		let result = this.items;
+		if (this.searchQuery) {
+			const q = this.searchQuery.toLowerCase();
+			result = result.filter((i) => i.title.toLowerCase().includes(q));
+		}
+		if (this.filterByType) result = result.filter((i) => i.mediaType === this.filterByType);
+		return this.sortItems(result);
+	}
+	get groupedByDate() {
+		const groups = new Map();
+		for (const item of this.filteredItems) {
+			const key = item.createdAt.toLocaleDateString();
+			const group = groups.get(key) ?? [];
+			group.push(item);
+			groups.set(key, group);
+		}
+		return groups;
+	}
+	get groupedByAlbum() {
+		const groups = new Map();
+		for (const item of this.filteredItems) {
+			const key = item.album ?? "Uncategorized";
+			const group = groups.get(key) ?? [];
+			group.push(item);
+			groups.set(key, group);
+		}
+		return groups;
+	}
+	async loadItems() {
+		this.loading = true;
+		this.error = null;
+		try {
+			const items = this.currentAlbum ? await this.provider.getByAlbum(this.currentAlbum) : await this.provider.listItems();
+			runInAction(() => {
+				this.items = items;
+			});
+		} catch (err) {
+			runInAction(() => {
+				this.error = err?.message || "Failed to load media";
+			});
+		} finally {
+			runInAction(() => {
+				this.loading = false;
+			});
+		}
+	}
+	selectItem(id) {
+		this.selectedItems.clear();
+		this.selectedItems.add(id);
+	}
+	toggleSelect(id) {
+		if (this.selectedItems.has(id)) this.selectedItems.delete(id);
+		else this.selectedItems.add(id);
+	}
+	setViewMode(mode) {
+		this.viewMode = mode;
+	}
+	setAlbum(album) {
+		this.currentAlbum = album;
+		this.loadItems();
+	}
+	async search(query) {
+		this.searchQuery = query;
+		if (query) {
+			this.loading = true;
+			this.error = null;
+			try {
+				const items = await this.provider.search(query);
+				runInAction(() => {
+					this.items = items;
+				});
+			} catch (err) {
+				runInAction(() => {
+					this.error = err?.message || "Search failed";
+				});
+			} finally {
+				runInAction(() => {
+					this.loading = false;
+				});
+			}
+		} else this.loadItems();
+	}
+	setSort(sortBy) {
+		this.sortBy = sortBy;
+	}
+	setFilter(type) {
+		this.filterByType = type;
+	}
+	openPreview(item) {
+		this.previewItem = item;
+	}
+	closePreview() {
+		this.previewItem = null;
+	}
+	sortItems(items) {
+		return [...items].sort((a, b) => {
+			switch (this.sortBy) {
+				case "date": return b.createdAt.getTime() - a.createdAt.getTime();
+				case "name": return a.title.localeCompare(b.title);
+				case "size": return (b.width ?? 0) * (b.height ?? 0) - (a.width ?? 0) * (a.height ?? 0);
+				default: return 0;
+			}
+		});
+	}
+};
+
+//#endregion
+//#region src/media/MediaGrid.tsx
+const MediaThumbnail = ({ item, onClick, selected }) => /* @__PURE__ */ jsxs("button", {
+	onClick,
+	className: `relative aspect-square rounded-lg overflow-hidden cursor-pointer group border-2 transition-all ${selected ? "border-blue-500 ring-2 ring-blue-200" : "border-transparent hover:border-gray-300"}`,
+	children: [
+		item.thumbnail || item.mediaType === "photo" ? /* @__PURE__ */ jsx("img", {
+			src: item.thumbnail ?? item.url,
+			alt: item.title,
+			className: "w-full h-full object-cover"
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "w-full h-full bg-gray-100 flex items-center justify-center",
+			children: item.mediaType === "video" ? /* @__PURE__ */ jsx(Play, {
+				size: 32,
+				className: "text-gray-400"
+			}) : /* @__PURE__ */ jsx(Music, {
+				size: 32,
+				className: "text-gray-400"
+			})
+		}),
+		item.mediaType === "video" && /* @__PURE__ */ jsx("div", {
+			className: "absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1.5 py-0.5 rounded",
+			children: item.duration ? `${Math.floor(item.duration / 60)}:${String(item.duration % 60).padStart(2, "0")}` : "Video"
+		}),
+		/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" })
+	]
+});
+const MediaGrid = observer(({ model, className = "" }) => /* @__PURE__ */ jsx("div", {
+	className: `grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-1 p-2 ${className}`,
+	children: model.filteredItems.map((item) => /* @__PURE__ */ jsx(MediaThumbnail, {
+		item,
+		selected: model.selectedItems.has(item.id),
+		onClick: () => model.openPreview(item)
+	}, item.id))
+}));
+
+//#endregion
+//#region src/media/MediaList.tsx
+const mediaIcon = (item) => {
+	switch (item.mediaType) {
+		case "photo": return /* @__PURE__ */ jsx(Image, {
+			size: 16,
+			className: "text-green-500"
+		});
+		case "video": return /* @__PURE__ */ jsx(Play, {
+			size: 16,
+			className: "text-blue-500"
+		});
+		case "audio": return /* @__PURE__ */ jsx(Music, {
+			size: 16,
+			className: "text-purple-500"
+		});
+	}
+};
+const MediaList = observer(({ model, className = "" }) => /* @__PURE__ */ jsx("div", {
+	className: `divide-y divide-gray-100 ${className}`,
+	children: model.filteredItems.map((item) => /* @__PURE__ */ jsxs("button", {
+		onClick: () => model.openPreview(item),
+		className: `flex items-center gap-3 px-4 py-3 w-full text-left hover:bg-gray-50 transition-colors ${model.selectedItems.has(item.id) ? "bg-blue-50" : ""}`,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "w-12 h-12 rounded-lg overflow-hidden flex-shrink-0 bg-gray-100 flex items-center justify-center",
+				children: item.thumbnail ? /* @__PURE__ */ jsx("img", {
+					src: item.thumbnail,
+					alt: item.title,
+					className: "w-full h-full object-cover"
+				}) : mediaIcon(item)
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm font-medium text-gray-900 truncate",
+					title: item.title,
+					children: item.title
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-gray-500",
+					children: [
+						item.mediaType,
+						" ",
+						item.album && `· ${item.album}`,
+						" · ",
+						item.createdAt.toLocaleDateString()
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2",
+				children: mediaIcon(item)
+			})
+		]
+	}, item.id))
+}));
+
+//#endregion
+//#region src/media/MediaTimeline.tsx
+const TimelineThumbnail = ({ item, onClick }) => /* @__PURE__ */ jsxs("button", {
+	onClick,
+	className: "relative aspect-square rounded-lg overflow-hidden cursor-pointer group",
+	children: [item.thumbnail || item.mediaType === "photo" ? /* @__PURE__ */ jsx("img", {
+		src: item.thumbnail ?? item.url,
+		alt: item.title,
+		className: "w-full h-full object-cover"
+	}) : /* @__PURE__ */ jsx("div", {
+		className: "w-full h-full bg-gray-100 flex items-center justify-center",
+		children: item.mediaType === "video" ? /* @__PURE__ */ jsx(Play, {
+			size: 24,
+			className: "text-gray-400"
+		}) : /* @__PURE__ */ jsx(Music, {
+			size: 24,
+			className: "text-gray-400"
+		})
+	}), /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" })]
+});
+const MediaTimeline = observer(({ model, className = "" }) => /* @__PURE__ */ jsx("div", {
+	className: `space-y-6 p-4 ${className}`,
+	children: Array.from(model.groupedByDate.entries()).map(([date, items]) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+		className: "text-sm font-semibold text-gray-700 mb-2 sticky top-0 bg-white/90 backdrop-blur-sm py-1",
+		children: date
+	}), /* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-1",
+		children: items.map((item) => /* @__PURE__ */ jsx(TimelineThumbnail, {
+			item,
+			onClick: () => model.openPreview(item)
+		}, item.id))
+	})] }, date))
+}));
+
+//#endregion
+//#region src/media/MediaPreview.tsx
+const MediaPreview = observer(({ model, className = "" }) => {
+	const item = model.previewItem;
+	if (!item) return null;
+	const items = model.filteredItems;
+	const idx = items.findIndex((i) => i.id === item.id);
+	const goPrev = () => {
+		if (idx > 0) model.openPreview(items[idx - 1]);
+	};
+	const goNext = () => {
+		if (idx < items.length - 1) model.openPreview(items[idx + 1]);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `fixed inset-0 z-50 bg-black/90 flex items-center justify-center ${className}`,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				onClick: () => model.closePreview(),
+				className: "absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10",
+				children: /* @__PURE__ */ jsx(X, { size: 24 })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: goPrev,
+				disabled: idx <= 0,
+				className: "absolute left-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 disabled:opacity-30",
+				children: /* @__PURE__ */ jsx(ChevronLeft, { size: 32 })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "max-w-[90vw] max-h-[90vh] flex flex-col items-center",
+				children: [
+					item.mediaType === "photo" && /* @__PURE__ */ jsx("img", {
+						src: item.url,
+						alt: item.title,
+						className: "max-w-full max-h-[80vh] object-contain rounded-lg"
+					}),
+					item.mediaType === "video" && /* @__PURE__ */ jsx("video", {
+						src: item.url,
+						controls: true,
+						className: "max-w-full max-h-[80vh] rounded-lg"
+					}),
+					item.mediaType === "audio" && /* @__PURE__ */ jsxs("div", {
+						className: "bg-gray-900 rounded-xl p-8 flex flex-col items-center gap-4",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "w-48 h-48 bg-gray-800 rounded-xl flex items-center justify-center text-6xl",
+							children: "🎵"
+						}), /* @__PURE__ */ jsx("audio", {
+							src: item.url,
+							controls: true,
+							className: "w-80"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "mt-4 text-center",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-white font-medium",
+							children: item.title
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-white/60 text-sm",
+							children: item.createdAt.toLocaleDateString()
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: goNext,
+				disabled: idx >= items.length - 1,
+				className: "absolute right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 disabled:opacity-30",
+				children: /* @__PURE__ */ jsx(ChevronRight, { size: 32 })
+			}),
+			/* @__PURE__ */ jsx("a", {
+				href: item.url,
+				download: true,
+				className: "absolute bottom-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10",
+				children: /* @__PURE__ */ jsx(Download, { size: 20 })
+			})
+		]
+	});
+});
+
+//#endregion
+//#region src/media/AlbumSidebar.tsx
+const AlbumSidebar = observer(({ model, provider, className = "" }) => {
+	const [albums, setAlbums] = useState([]);
+	useEffect(() => {
+		provider.getAlbums().then(setAlbums);
+	}, [provider]);
+	return /* @__PURE__ */ jsx("div", {
+		className: `w-56 border-r border-gray-200 bg-gray-50 overflow-y-auto ${className}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "p-3",
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2",
+					children: "Albums"
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					onClick: () => model.setAlbum(null),
+					className: `flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm transition-colors ${model.currentAlbum === null ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`,
+					children: [/* @__PURE__ */ jsx(Image, { size: 16 }), /* @__PURE__ */ jsx("span", { children: "All Media" })]
+				}),
+				albums.map((album) => /* @__PURE__ */ jsxs("button", {
+					onClick: () => model.setAlbum(album),
+					className: `flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm transition-colors ${model.currentAlbum === album ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`,
+					children: [/* @__PURE__ */ jsx(FolderOpen, { size: 16 }), /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						title: album,
+						children: album
+					})]
+				}, album))
+			]
+		})
+	});
+});
+
+//#endregion
+//#region src/media/MediaBrowser.tsx
+const MediaBrowser = observer(({ model, provider, className = "", showSidebar = true }) => {
+	useEffect(() => {
+		model.loadItems();
+	}, [model]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex h-full bg-white rounded-xl border border-gray-200 overflow-hidden ${className}`,
+		children: [
+			showSidebar && /* @__PURE__ */ jsx(AlbumSidebar, {
+				model,
+				provider
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 flex flex-col min-w-0",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 px-4 py-2 border-b border-gray-200",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "relative flex-1 max-w-xs",
+							children: [/* @__PURE__ */ jsx(Search, {
+								size: 16,
+								className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+							}), /* @__PURE__ */ jsx("input", {
+								type: "text",
+								placeholder: "Search media...",
+								value: model.searchQuery,
+								onChange: (e) => model.search(e.target.value),
+								className: "w-full pl-9 pr-3 py-1.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex items-center border border-gray-200 rounded-lg overflow-hidden",
+							children: [
+								["grid", Grid3X3],
+								["list", List],
+								["timeline", Clock]
+							].map(([mode, Icon]) => /* @__PURE__ */ jsx("button", {
+								onClick: () => model.setViewMode(mode),
+								className: `p-1.5 ${model.viewMode === mode ? "bg-blue-50 text-blue-600" : "text-gray-500 hover:bg-gray-50"}`,
+								children: /* @__PURE__ */ jsx(Icon, { size: 16 })
+							}, mode))
+						}),
+						/* @__PURE__ */ jsxs("select", {
+							value: model.filterByType ?? "",
+							onChange: (e) => model.setFilter(e.target.value || null),
+							className: "text-sm border border-gray-200 rounded-lg px-2 py-1.5",
+							children: [
+								/* @__PURE__ */ jsx("option", {
+									value: "",
+									children: "All types"
+								}),
+								/* @__PURE__ */ jsx("option", {
+									value: "photo",
+									children: "Photos"
+								}),
+								/* @__PURE__ */ jsx("option", {
+									value: "video",
+									children: "Videos"
+								}),
+								/* @__PURE__ */ jsx("option", {
+									value: "audio",
+									children: "Audio"
+								})
+							]
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex-1 overflow-y-auto",
+					children: model.loading ? /* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-center h-64",
+						children: /* @__PURE__ */ jsx(Loader2, {
+							size: 24,
+							className: "animate-spin text-gray-400"
+						})
+					}) : model.error ? /* @__PURE__ */ jsx(BrowserError, {
+						error: model.error,
+						context: "Media",
+						onRetry: () => model.loadItems()
+					}) : model.filteredItems.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-center h-64 text-gray-400 text-sm",
+						children: "No media found"
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						model.viewMode === "grid" && /* @__PURE__ */ jsx(MediaGrid, { model }),
+						model.viewMode === "list" && /* @__PURE__ */ jsx(MediaList, { model }),
+						model.viewMode === "timeline" && /* @__PURE__ */ jsx(MediaTimeline, { model })
+					] })
+				})]
+			}),
+			/* @__PURE__ */ jsx(MediaPreview, { model })
+		]
+	});
+});
+
+//#endregion
+//#region src/media/MockMediaProvider.ts
+const ALBUMS = [
+	"Vacation 2024",
+	"Family",
+	"Nature",
+	"City Lights",
+	"Concerts"
+];
+const MEDIA_TYPES = [
+	"photo",
+	"video",
+	"audio"
+];
+function generateMediaItems(count = 60) {
+	const items = [];
+	const now = Date.now();
+	for (let i = 0; i < count; i++) {
+		const mediaType = MEDIA_TYPES[i % 3];
+		const date = new Date(now - i * 864e5 * Math.random() * 30);
+		items.push({
+			id: `media-${i}`,
+			type: "media",
+			title: `${mediaType === "photo" ? "IMG" : mediaType === "video" ? "VID" : "AUD"}_${String(i).padStart(4, "0")}`,
+			mediaType,
+			url: `https://picsum.photos/seed/${i}/800/600`,
+			thumbnail: `https://picsum.photos/seed/${i}/200/200`,
+			mimeType: mediaType === "photo" ? "image/jpeg" : mediaType === "video" ? "video/mp4" : "audio/mpeg",
+			width: mediaType !== "audio" ? 800 + i % 5 * 100 : void 0,
+			height: mediaType !== "audio" ? 600 + i % 3 * 100 : void 0,
+			duration: mediaType !== "photo" ? 30 + i * 5 : void 0,
+			album: ALBUMS[i % ALBUMS.length],
+			artist: mediaType === "audio" ? `Artist ${i % 10}` : void 0,
+			createdAt: date,
+			updatedAt: date,
+			tags: [`tag${i % 5}`]
+		});
+	}
+	return items;
+}
+var MockMediaProvider = class {
+	constructor() {
+		this.items = generateMediaItems();
+	}
+	async listItems() {
+		return this.items;
+	}
+	async getItem(id) {
+		return this.items.find((i) => i.id === id) ?? null;
+	}
+	async createItem(item) {
+		const now = new Date();
+		const created = {
+			...item,
+			id: `media-${Date.now()}`,
+			createdAt: now,
+			updatedAt: now
+		};
+		this.items.push(created);
+		return created;
+	}
+	async updateItem(id, updates) {
+		const idx = this.items.findIndex((i) => i.id === id);
+		if (idx === -1) throw new Error("Not found");
+		this.items[idx] = {
+			...this.items[idx],
+			...updates,
+			updatedAt: new Date()
+		};
+		return this.items[idx];
+	}
+	async deleteItem(id) {
+		this.items = this.items.filter((i) => i.id !== id);
+	}
+	async search(query) {
+		const q = query.toLowerCase();
+		return this.items.filter((i) => i.title.toLowerCase().includes(q));
+	}
+	async getAlbums() {
+		return ALBUMS;
+	}
+	async getByAlbum(album) {
+		return this.items.filter((i) => i.album === album);
+	}
+	async getByDateRange(start, end) {
+		return this.items.filter((i) => i.createdAt >= start && i.createdAt <= end);
+	}
+};
+
+//#endregion
+export { AlbumSidebar, MediaBrowser, MediaBrowserModel, MediaGrid, MediaList, MediaPreview, MediaTimeline, MockMediaProvider };
+//# sourceMappingURL=media-DZ292aKK.js.map

package/dist/media-DZ292aKK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-DZ292aKK.js","names":["provider: IMediaProvider","err: any","id: string","mode: MediaViewMode","album: string | null","query: string","sortBy: MediaSortBy","type: MediaType | null","item: MediaItem","items: MediaItem[]","item: MediaItem","MEDIA_TYPES: MediaType[]","items: MediaItem[]","id: string","item: Omit<MediaItem, 'id' | 'createdAt' | 'updatedAt'>","created: MediaItem","updates: Partial<MediaItem>","query: string","album: string","start: Date","end: Date"],"sources":["../src/media/MediaBrowserModel.ts","../src/media/MediaGrid.tsx","../src/media/MediaList.tsx","../src/media/MediaTimeline.tsx","../src/media/MediaPreview.tsx","../src/media/AlbumSidebar.tsx","../src/media/MediaBrowser.tsx","../src/media/MockMediaProvider.ts"],"sourcesContent":["import { makeAutoObservable, runInAction } from 'mobx';\nimport type { IMediaProvider, MediaItem, MediaType } from './types';\n\nexport type MediaViewMode = 'grid' | 'list' | 'timeline';\nexport type MediaSortBy = 'date' | 'name' | 'size';\n\nexport class MediaBrowserModel {\n  items: MediaItem[] = [];\n  selectedItems = new Set<string>();\n  viewMode: MediaViewMode = 'grid';\n  currentAlbum: string | null = null;\n  loading = false;\n  error: string | null = null;\n  searchQuery = '';\n  sortBy: MediaSortBy = 'date';\n  filterByType: MediaType | null = null;\n  previewItem: MediaItem | null = null;\n\n  constructor(private provider: IMediaProvider) {\n    makeAutoObservable(this);\n  }\n\n  get filteredItems(): MediaItem[] {\n    let result = this.items;\n    if (this.searchQuery) {\n      const q = this.searchQuery.toLowerCase();\n      result = result.filter(i => i.title.toLowerCase().includes(q));\n    }\n    if (this.filterByType) {\n      result = result.filter(i => i.mediaType === this.filterByType);\n    }\n    return this.sortItems(result);\n  }\n\n  get groupedByDate(): Map<string, MediaItem[]> {\n    const groups = new Map<string, MediaItem[]>();\n    for (const item of this.filteredItems) {\n      const key = item.createdAt.toLocaleDateString();\n      const group = groups.get(key) ?? [];\n      group.push(item);\n      groups.set(key, group);\n    }\n    return groups;\n  }\n\n  get groupedByAlbum(): Map<string, MediaItem[]> {\n    const groups = new Map<string, MediaItem[]>();\n    for (const item of this.filteredItems) {\n      const key = item.album ?? 'Uncategorized';\n      const group = groups.get(key) ?? [];\n      group.push(item);\n      groups.set(key, group);\n    }\n    return groups;\n  }\n\n  async loadItems() {\n    this.loading = true;\n    this.error = null;\n    try {\n      const items = this.currentAlbum\n        ? await this.provider.getByAlbum(this.currentAlbum)\n        : await this.provider.listItems();\n      runInAction(() => { this.items = items; });\n    } catch (err: any) {\n      runInAction(() => { this.error = err?.message || 'Failed to load media'; });\n    } finally {\n      runInAction(() => { this.loading = false; });\n    }\n  }\n\n  selectItem(id: string) {\n    this.selectedItems.clear();\n    this.selectedItems.add(id);\n  }\n\n  toggleSelect(id: string) {\n    if (this.selectedItems.has(id)) {\n      this.selectedItems.delete(id);\n    } else {\n      this.selectedItems.add(id);\n    }\n  }\n\n  setViewMode(mode: MediaViewMode) {\n    this.viewMode = mode;\n  }\n\n  setAlbum(album: string | null) {\n    this.currentAlbum = album;\n    this.loadItems();\n  }\n\n  async search(query: string) {\n    this.searchQuery = query;\n    if (query) {\n      this.loading = true;\n      this.error = null;\n      try {\n        const items = await this.provider.search(query);\n        runInAction(() => { this.items = items; });\n      } catch (err: any) {\n        runInAction(() => { this.error = err?.message || 'Search failed'; });\n      } finally {\n        runInAction(() => { this.loading = false; });\n      }\n    } else {\n      this.loadItems();\n    }\n  }\n\n  setSort(sortBy: MediaSortBy) {\n    this.sortBy = sortBy;\n  }\n\n  setFilter(type: MediaType | null) {\n    this.filterByType = type;\n  }\n\n  openPreview(item: MediaItem) {\n    this.previewItem = item;\n  }\n\n  closePreview() {\n    this.previewItem = null;\n  }\n\n  private sortItems(items: MediaItem[]): MediaItem[] {\n    return [...items].sort((a, b) => {\n      switch (this.sortBy) {\n        case 'date': return b.createdAt.getTime() - a.createdAt.getTime();\n        case 'name': return a.title.localeCompare(b.title);\n        case 'size': return (b.width ?? 0) * (b.height ?? 0) - (a.width ?? 0) * (a.height ?? 0);\n        default: return 0;\n      }\n    });\n  }\n}\n","import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Play, Music } from 'lucide-react';\nimport type { MediaBrowserModel } from './MediaBrowserModel';\nimport type { MediaItem } from './types';\n\nexport interface MediaGridProps {\n  model: MediaBrowserModel;\n  className?: string;\n}\n\nconst MediaThumbnail = ({ item, onClick, selected }: { item: MediaItem; onClick: () => void; selected: boolean }) => (\n  <button\n    onClick={onClick}\n    className={`relative aspect-square rounded-lg overflow-hidden cursor-pointer group border-2 transition-all ${\n      selected ? 'border-blue-500 ring-2 ring-blue-200' : 'border-transparent hover:border-gray-300'\n    }`}\n  >\n    {item.thumbnail || item.mediaType === 'photo' ? (\n      <img\n        src={item.thumbnail ?? item.url}\n        alt={item.title}\n        className=\"w-full h-full object-cover\"\n      />\n    ) : (\n      <div className=\"w-full h-full bg-gray-100 flex items-center justify-center\">\n        {item.mediaType === 'video' ? <Play size={32} className=\"text-gray-400\" /> : <Music size={32} className=\"text-gray-400\" />}\n      </div>\n    )}\n    {item.mediaType === 'video' && (\n      <div className=\"absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1.5 py-0.5 rounded\">\n        {item.duration ? `${Math.floor(item.duration / 60)}:${String(item.duration % 60).padStart(2, '0')}` : 'Video'}\n      </div>\n    )}\n    <div className=\"absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors\" />\n  </button>\n);\n\nexport const MediaGrid = observer<MediaGridProps>(({ model, className = '' }) => (\n  <div className={`grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-1 p-2 ${className}`}>\n    {model.filteredItems.map(item => (\n      <MediaThumbnail\n        key={item.id}\n        item={item}\n        selected={model.selectedItems.has(item.id)}\n        onClick={() => model.openPreview(item)}\n      />\n    ))}\n  </div>\n));\n","import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Image, Play, Music } from 'lucide-react';\nimport type { MediaBrowserModel } from './MediaBrowserModel';\nimport type { MediaItem } from './types';\n\nexport interface MediaListProps {\n  model: MediaBrowserModel;\n  className?: string;\n}\n\nconst mediaIcon = (item: MediaItem) => {\n  switch (item.mediaType) {\n    case 'photo': return <Image size={16} className=\"text-green-500\" />;\n    case 'video': return <Play size={16} className=\"text-blue-500\" />;\n    case 'audio': return <Music size={16} className=\"text-purple-500\" />;\n  }\n};\n\nexport const MediaList = observer<MediaListProps>(({ model, className = '' }) => (\n  <div className={`divide-y divide-gray-100 ${className}`}>\n    {model.filteredItems.map(item => (\n      <button\n        key={item.id}\n        onClick={() => model.openPreview(item)}\n        className={`flex items-center gap-3 px-4 py-3 w-full text-left hover:bg-gray-50 transition-colors ${\n          model.selectedItems.has(item.id) ? 'bg-blue-50' : ''\n        }`}\n      >\n        <div className=\"w-12 h-12 rounded-lg overflow-hidden flex-shrink-0 bg-gray-100 flex items-center justify-center\">\n          {item.thumbnail ? (\n            <img src={item.thumbnail} alt={item.title} className=\"w-full h-full object-cover\" />\n          ) : (\n            mediaIcon(item)\n          )}\n        </div>\n        <div className=\"flex-1 min-w-0\">\n          <p className=\"text-sm font-medium text-gray-900 truncate\" title={item.title}>{item.title}</p>\n          <p className=\"text-xs text-gray-500\">\n            {item.mediaType} {item.album && `· ${item.album}`} · {item.createdAt.toLocaleDateString()}\n          </p>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {mediaIcon(item)}\n        </div>\n      </button>\n    ))}\n  </div>\n));\n","import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Play, Music } from 'lucide-react';\nimport type { MediaBrowserModel } from './MediaBrowserModel';\nimport type { MediaItem } from './types';\n\nexport interface MediaTimelineProps {\n  model: MediaBrowserModel;\n  className?: string;\n}\n\nconst TimelineThumbnail = ({ item, onClick }: { item: MediaItem; onClick: () => void }) => (\n  <button onClick={onClick} className=\"relative aspect-square rounded-lg overflow-hidden cursor-pointer group\">\n    {item.thumbnail || item.mediaType === 'photo' ? (\n      <img src={item.thumbnail ?? item.url} alt={item.title} className=\"w-full h-full object-cover\" />\n    ) : (\n      <div className=\"w-full h-full bg-gray-100 flex items-center justify-center\">\n        {item.mediaType === 'video' ? <Play size={24} className=\"text-gray-400\" /> : <Music size={24} className=\"text-gray-400\" />}\n      </div>\n    )}\n    <div className=\"absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors\" />\n  </button>\n);\n\nexport const MediaTimeline = observer<MediaTimelineProps>(({ model, className = '' }) => (\n  <div className={`space-y-6 p-4 ${className}`}>\n    {Array.from(model.groupedByDate.entries()).map(([date, items]) => (\n      <div key={date}>\n        <h3 className=\"text-sm font-semibold text-gray-700 mb-2 sticky top-0 bg-white/90 backdrop-blur-sm py-1\">{date}</h3>\n        <div className=\"grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-1\">\n          {items.map(item => (\n            <TimelineThumbnail key={item.id} item={item} onClick={() => model.openPreview(item)} />\n          ))}\n        </div>\n      </div>\n    ))}\n  </div>\n));\n","import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { X, ChevronLeft, ChevronRight, Download } from 'lucide-react';\nimport type { MediaBrowserModel } from './MediaBrowserModel';\n\nexport interface MediaPreviewProps {\n  model: MediaBrowserModel;\n  className?: string;\n}\n\nexport const MediaPreview = observer<MediaPreviewProps>(({ model, className = '' }) => {\n  const item = model.previewItem;\n  if (!item) return null;\n\n  const items = model.filteredItems;\n  const idx = items.findIndex(i => i.id === item.id);\n\n  const goPrev = () => {\n    if (idx > 0) model.openPreview(items[idx - 1]);\n  };\n  const goNext = () => {\n    if (idx < items.length - 1) model.openPreview(items[idx + 1]);\n  };\n\n  return (\n    <div className={`fixed inset-0 z-50 bg-black/90 flex items-center justify-center ${className}`}>\n      <button onClick={() => model.closePreview()} className=\"absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10\">\n        <X size={24} />\n      </button>\n\n      <button onClick={goPrev} disabled={idx <= 0} className=\"absolute left-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 disabled:opacity-30\">\n        <ChevronLeft size={32} />\n      </button>\n\n      <div className=\"max-w-[90vw] max-h-[90vh] flex flex-col items-center\">\n        {item.mediaType === 'photo' && (\n          <img src={item.url} alt={item.title} className=\"max-w-full max-h-[80vh] object-contain rounded-lg\" />\n        )}\n        {item.mediaType === 'video' && (\n          <video src={item.url} controls className=\"max-w-full max-h-[80vh] rounded-lg\" />\n        )}\n        {item.mediaType === 'audio' && (\n          <div className=\"bg-gray-900 rounded-xl p-8 flex flex-col items-center gap-4\">\n            <div className=\"w-48 h-48 bg-gray-800 rounded-xl flex items-center justify-center text-6xl\">🎵</div>\n            <audio src={item.url} controls className=\"w-80\" />\n          </div>\n        )}\n        <div className=\"mt-4 text-center\">\n          <p className=\"text-white font-medium\">{item.title}</p>\n          <p className=\"text-white/60 text-sm\">{item.createdAt.toLocaleDateString()}</p>\n        </div>\n      </div>\n\n      <button onClick={goNext} disabled={idx >= items.length - 1} className=\"absolute right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 disabled:opacity-30\">\n        <ChevronRight size={32} />\n      </button>\n\n      <a href={item.url} download className=\"absolute bottom-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10\">\n        <Download size={20} />\n      </a>\n    </div>\n  );\n});\n","import React, { useEffect, useState } from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { FolderOpen, Image } from 'lucide-react';\nimport type { MediaBrowserModel } from './MediaBrowserModel';\nimport type { IMediaProvider } from './types';\n\nexport interface AlbumSidebarProps {\n  model: MediaBrowserModel;\n  provider: IMediaProvider;\n  className?: string;\n}\n\nexport const AlbumSidebar = observer<AlbumSidebarProps>(({ model, provider, className = '' }) => {\n  const [albums, setAlbums] = useState<string[]>([]);\n\n  useEffect(() => {\n    provider.getAlbums().then(setAlbums);\n  }, [provider]);\n\n  return (\n    <div className={`w-56 border-r border-gray-200 bg-gray-50 overflow-y-auto ${className}`}>\n      <div className=\"p-3\">\n        <h3 className=\"text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2\">Albums</h3>\n        <button\n          onClick={() => model.setAlbum(null)}\n          className={`flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm transition-colors ${\n            model.currentAlbum === null ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100'\n          }`}\n        >\n          <Image size={16} />\n          <span>All Media</span>\n        </button>\n        {albums.map(album => (\n          <button\n            key={album}\n            onClick={() => model.setAlbum(album)}\n            className={`flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm transition-colors ${\n              model.currentAlbum === album ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100'\n            }`}\n          >\n            <FolderOpen size={16} />\n            <span className=\"truncate\" title={album}>{album}</span>\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n});\n","import React, { useEffect } from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Grid3X3, List, Clock, Search, Loader2 } from 'lucide-react';\nimport { BrowserError } from '@anymux/ui/components/browser-error';\nimport type { MediaBrowserModel } from './MediaBrowserModel';\nimport type { IMediaProvider } from './types';\nimport { MediaGrid } from './MediaGrid';\nimport { MediaList } from './MediaList';\nimport { MediaTimeline } from './MediaTimeline';\nimport { MediaPreview } from './MediaPreview';\nimport { AlbumSidebar } from './AlbumSidebar';\n\nexport interface MediaBrowserProps {\n  model: MediaBrowserModel;\n  provider: IMediaProvider;\n  className?: string;\n  showSidebar?: boolean;\n}\n\nexport const MediaBrowser = observer<MediaBrowserProps>(({ model, provider, className = '', showSidebar = true }) => {\n  useEffect(() => { model.loadItems(); }, [model]);\n\n  return (\n    <div className={`flex h-full bg-white rounded-xl border border-gray-200 overflow-hidden ${className}`}>\n      {showSidebar && <AlbumSidebar model={model} provider={provider} />}\n\n      <div className=\"flex-1 flex flex-col min-w-0\">\n        {/* Toolbar */}\n        <div className=\"flex items-center gap-2 px-4 py-2 border-b border-gray-200\">\n          <div className=\"relative flex-1 max-w-xs\">\n            <Search size={16} className=\"absolute left-3 top-1/2 -translate-y-1/2 text-gray-400\" />\n            <input\n              type=\"text\"\n              placeholder=\"Search media...\"\n              value={model.searchQuery}\n              onChange={e => model.search(e.target.value)}\n              className=\"w-full pl-9 pr-3 py-1.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n            />\n          </div>\n\n          <div className=\"flex items-center border border-gray-200 rounded-lg overflow-hidden\">\n            {([['grid', Grid3X3], ['list', List], ['timeline', Clock]] as const).map(([mode, Icon]) => (\n              <button\n                key={mode}\n                onClick={() => model.setViewMode(mode)}\n                className={`p-1.5 ${model.viewMode === mode ? 'bg-blue-50 text-blue-600' : 'text-gray-500 hover:bg-gray-50'}`}\n              >\n                <Icon size={16} />\n              </button>\n            ))}\n          </div>\n\n          <select\n            value={model.filterByType ?? ''}\n            onChange={e => model.setFilter(e.target.value as 'photo' | 'video' | 'audio' || null)}\n            className=\"text-sm border border-gray-200 rounded-lg px-2 py-1.5\"\n          >\n            <option value=\"\">All types</option>\n            <option value=\"photo\">Photos</option>\n            <option value=\"video\">Videos</option>\n            <option value=\"audio\">Audio</option>\n          </select>\n        </div>\n\n        {/* Content */}\n        <div className=\"flex-1 overflow-y-auto\">\n          {model.loading ? (\n            <div className=\"flex items-center justify-center h-64\">\n              <Loader2 size={24} className=\"animate-spin text-gray-400\" />\n            </div>\n          ) : model.error ? (\n            <BrowserError\n              error={model.error}\n              context=\"Media\"\n              onRetry={() => model.loadItems()}\n            />\n          ) : model.filteredItems.length === 0 ? (\n            <div className=\"flex items-center justify-center h-64 text-gray-400 text-sm\">No media found</div>\n          ) : (\n            <>\n              {model.viewMode === 'grid' && <MediaGrid model={model} />}\n              {model.viewMode === 'list' && <MediaList model={model} />}\n              {model.viewMode === 'timeline' && <MediaTimeline model={model} />}\n            </>\n          )}\n        </div>\n      </div>\n\n      <MediaPreview model={model} />\n    </div>\n  );\n});\n","import type { IMediaProvider, MediaItem, MediaType } from './types';\n\nconst ALBUMS = ['Vacation 2024', 'Family', 'Nature', 'City Lights', 'Concerts'];\nconst MEDIA_TYPES: MediaType[] = ['photo', 'video', 'audio'];\n\nfunction generateMediaItems(count = 60): MediaItem[] {\n  const items: MediaItem[] = [];\n  const now = Date.now();\n  for (let i = 0; i < count; i++) {\n    const mediaType = MEDIA_TYPES[i % 3];\n    const date = new Date(now - i * 86400000 * Math.random() * 30);\n    items.push({\n      id: `media-${i}`,\n      type: 'media',\n      title: `${mediaType === 'photo' ? 'IMG' : mediaType === 'video' ? 'VID' : 'AUD'}_${String(i).padStart(4, '0')}`,\n      mediaType,\n      url: `https://picsum.photos/seed/${i}/800/600`,\n      thumbnail: `https://picsum.photos/seed/${i}/200/200`,\n      mimeType: mediaType === 'photo' ? 'image/jpeg' : mediaType === 'video' ? 'video/mp4' : 'audio/mpeg',\n      width: mediaType !== 'audio' ? 800 + (i % 5) * 100 : undefined,\n      height: mediaType !== 'audio' ? 600 + (i % 3) * 100 : undefined,\n      duration: mediaType !== 'photo' ? 30 + i * 5 : undefined,\n      album: ALBUMS[i % ALBUMS.length],\n      artist: mediaType === 'audio' ? `Artist ${i % 10}` : undefined,\n      createdAt: date,\n      updatedAt: date,\n      tags: [`tag${i % 5}`],\n    });\n  }\n  return items;\n}\n\nexport class MockMediaProvider implements IMediaProvider {\n  private items = generateMediaItems();\n\n  async listItems() { return this.items; }\n\n  async getItem(id: string) { return this.items.find(i => i.id === id) ?? null; }\n\n  async createItem(item: Omit<MediaItem, 'id' | 'createdAt' | 'updatedAt'>) {\n    const now = new Date();\n    const created: MediaItem = { ...item, id: `media-${Date.now()}`, createdAt: now, updatedAt: now } as MediaItem;\n    this.items.push(created);\n    return created;\n  }\n\n  async updateItem(id: string, updates: Partial<MediaItem>) {\n    const idx = this.items.findIndex(i => i.id === id);\n    if (idx === -1) throw new Error('Not found');\n    this.items[idx] = { ...this.items[idx], ...updates, updatedAt: new Date() };\n    return this.items[idx];\n  }\n\n  async deleteItem(id: string) {\n    this.items = this.items.filter(i => i.id !== id);\n  }\n\n  async search(query: string) {\n    const q = query.toLowerCase();\n    return this.items.filter(i => i.title.toLowerCase().includes(q));\n  }\n\n  async getAlbums() { return ALBUMS; }\n\n  async getByAlbum(album: string) { return this.items.filter(i => i.album === album); }\n\n  async getByDateRange(start: Date, end: Date) {\n    return this.items.filter(i => i.createdAt >= start && i.createdAt <= end);\n  }\n}\n"],"mappings":"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"}

package/dist/media.d.ts

@@ -0,0 +1,3 @@
+import { IObjectProvider, ObjectMetadata, ObjectType } from "./types-common-CB3kRek8.js";
+import { AlbumSidebar$1 as AlbumSidebar, AlbumSidebarProps, IMediaProvider, MediaBrowser$1 as MediaBrowser, MediaBrowserModel$1 as MediaBrowserModel, MediaBrowserProps, MediaGrid$1 as MediaGrid, MediaGridProps, MediaItem, MediaList$1 as MediaList, MediaListProps, MediaPreview$1 as MediaPreview, MediaPreviewProps, MediaSortBy, MediaTimeline$1 as MediaTimeline, MediaTimelineProps, MediaType, MediaViewMode, MockMediaProvider$1 as MockMediaProvider } from "./index-CuQIjSXs.js";
+export { AlbumSidebar, AlbumSidebarProps, IMediaProvider, IObjectProvider, MediaBrowser, MediaBrowserModel, MediaBrowserProps, MediaGrid, MediaGridProps, MediaItem, MediaList, MediaListProps, MediaPreview, MediaPreviewProps, MediaSortBy, MediaTimeline, MediaTimelineProps, MediaType, MediaViewMode, MockMediaProvider, ObjectMetadata, ObjectType };

package/dist/media.js

@@ -0,0 +1,3 @@
+import { AlbumSidebar, MediaBrowser, MediaBrowserModel, MediaGrid, MediaList, MediaPreview, MediaTimeline, MockMediaProvider } from "./media-DZ292aKK.js";
+
+export { AlbumSidebar, MediaBrowser, MediaBrowserModel, MediaGrid, MediaList, MediaPreview, MediaTimeline, MockMediaProvider };