web-player/src/lib/components/layout/MobileHeader.svelte

@@ -3,11 +3,11 @@
 	import Upload from '@lucide/svelte/icons/upload';
 	import Folder from '@lucide/svelte/icons/folder';
 	import LogIn from '@lucide/svelte/icons/log-in';
-	import MenuItem from '../ui/MenuItem.svelte';
-	import AccountMenu from '../ui/AccountMenu.svelte';
-	import Avatar from '../ui/Avatar.svelte';
-	import IconButton from '../ui/IconButton.svelte';
-	import Logo from '../ui/Logo.svelte';
+	import MenuItem from '../ui/overlay/MenuItem.svelte';
+	import AccountMenu from '../ui/overlay/AccountMenu.svelte';
+	import Avatar from '../ui/media/Avatar.svelte';
+	import IconButton from '../ui/primitives/IconButton.svelte';
+	import Logo from '../ui/primitives/Logo.svelte';
 
 	interface Props {
 		user: SessionUser | null;

web-player/src/lib/components/layout/Sidebar.svelte

@@ -4,9 +4,9 @@
 	import { liked } from '$lib/player/liked.svelte';
 	import { createPlaylistModal } from '$lib/state/playlists.svelte';
 	import type { SessionUser } from '$lib/types';
-	import ListRow from '../ui/ListRow.svelte';
-	import IconButton from '../ui/IconButton.svelte';
-	import Logo from '../ui/Logo.svelte';
+	import ListRow from '../ui/media/ListRow.svelte';
+	import IconButton from '../ui/primitives/IconButton.svelte';
+	import Logo from '../ui/primitives/Logo.svelte';
 	import Plus from '@lucide/svelte/icons/plus';
 
 	interface SidebarPlaylist {

web-player/src/lib/components/layout/TopBar.svelte

@@ -7,10 +7,10 @@
 	import Search from '@lucide/svelte/icons/search';
 	import X from '@lucide/svelte/icons/x';
 	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
-	import AccountMenu from '../ui/AccountMenu.svelte';
-	import Avatar from '../ui/Avatar.svelte';
-	import IconButton from '../ui/IconButton.svelte';
-	import Button from '../ui/Button.svelte';
+	import AccountMenu from '../ui/overlay/AccountMenu.svelte';
+	import Avatar from '../ui/media/Avatar.svelte';
+	import IconButton from '../ui/primitives/IconButton.svelte';
+	import Button from '../ui/primitives/Button.svelte';
 
 	interface Props {
 		user: SessionUser | null;

web-player/src/lib/components/player/PlayerBar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import TrackInfo from './TrackInfo.svelte';
 	import TransportControls from './TransportControls.svelte';
-	import Slider from '$lib/components/ui/Slider.svelte';
-	import IconButton from '$lib/components/ui/IconButton.svelte';
+	import Slider from '$lib/components/ui/primitives/Slider.svelte';
+	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
 	import { fmtTime } from '$lib/utils/format';

web-player/src/lib/components/player/PlayerDock.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import PlayerBar from './PlayerBar.svelte';
 	import TabsBar from '../layout/TabsBar.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import type { SessionUser } from '$lib/types';
 

web-player/src/lib/components/player/Queue.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
-	import MediaIdentity from '$lib/components/ui/MediaIdentity.svelte';
-	import ListRow from '$lib/components/ui/ListRow.svelte';
-	import IconButton from '$lib/components/ui/IconButton.svelte';
+	import MediaIdentity from '$lib/components/ui/media/MediaIdentity.svelte';
+	import ListRow from '$lib/components/ui/media/ListRow.svelte';
+	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import { fmtTime } from '$lib/utils/format';
 	import X from '@lucide/svelte/icons/x';
 	import { fly } from 'svelte/transition';

web-player/src/lib/components/player/TrackInfo.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
 	import { liked } from '$lib/player/liked.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import ExplicitBadge from '$lib/components/ui/ExplicitBadge.svelte';
-	import ArtistLink from '$lib/components/ui/ArtistLink.svelte';
-	import IconButton from '$lib/components/ui/IconButton.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import ExplicitBadge from '$lib/components/ui/media/ExplicitBadge.svelte';
+	import ArtistLink from '$lib/components/ui/media/ArtistLink.svelte';
+	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import Heart from '@lucide/svelte/icons/heart';
 
 	interface Props {

web-player/src/lib/components/player/TransportControls.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
-	import PlayButton from '$lib/components/ui/PlayButton.svelte';
+	import PlayButton from '$lib/components/ui/media/PlayButton.svelte';
 	import Shuffle from '@lucide/svelte/icons/shuffle';
 	import Repeat from '@lucide/svelte/icons/repeat';
 

web-player/src/lib/components/ui/forms/AlbumForm.svelte

@@ -2,9 +2,9 @@
 	import { untrack } from 'svelte';
 	import Disc3 from '@lucide/svelte/icons/disc-3';
 	import CoverForm from './CoverForm.svelte';
-	import Field from './Field.svelte';
-	import Input from './Input.svelte';
-	import Textarea from './Textarea.svelte';
+	import Field from '../primitives/Field.svelte';
+	import Input from '../primitives/Input.svelte';
+	import Textarea from '../primitives/Textarea.svelte';
 	import { ALBUM_EARLIEST_YEAR } from '$lib/config';
 
 	interface Props {

web-player/src/lib/components/ui/forms/CoverForm.svelte

@@ -3,9 +3,9 @@
 	import { enhance } from '$app/forms';
 	import type { LucideIcon } from '@lucide/svelte';
 	import ImageDropzone from './ImageDropzone.svelte';
-	import Button from './Button.svelte';
-	import Field from './Field.svelte';
-	import Alert from './Alert.svelte';
+	import Button from '../primitives/Button.svelte';
+	import Field from '../primitives/Field.svelte';
+	import Alert from '../primitives/Alert.svelte';
 
 	interface Props {
 		action: string;

web-player/src/lib/components/ui/forms/PlaylistForm.svelte

@@ -2,10 +2,10 @@
 	import { untrack } from 'svelte';
 	import Music from '@lucide/svelte/icons/music';
 	import CoverForm from './CoverForm.svelte';
-	import Field from './Field.svelte';
-	import Input from './Input.svelte';
-	import Textarea from './Textarea.svelte';
-	import SegmentedControl from './SegmentedControl.svelte';
+	import Field from '../primitives/Field.svelte';
+	import Input from '../primitives/Input.svelte';
+	import Textarea from '../primitives/Textarea.svelte';
+	import SegmentedControl from '../primitives/SegmentedControl.svelte';
 
 	const NAME_MAX_LENGTH = 60;
 	const DESCRIPTION_MAX_LENGTH = 300;

web-player/src/lib/components/ui/media/TrackList.svelte

@@ -36,7 +36,7 @@
 	import { pressable } from '$lib/actions/pressable';
 	import MediaIdentity from './MediaIdentity.svelte';
 	import EqBars from './EqBars.svelte';
-	import IconButton from './IconButton.svelte';
+	import IconButton from '../primitives/IconButton.svelte';
 
 	interface RowAction {
 		action?: string;

web-player/src/lib/components/ui/overlay/ConfirmDialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Modal from './Modal.svelte';
-	import Button from './Button.svelte';
+	import Button from '../primitives/Button.svelte';
 
 	interface Props {
 		open: boolean;

web-player/src/lib/components/ui/overlay/ContextMenu.svelte

@@ -21,7 +21,7 @@
 	import { enhance } from '$app/forms';
 	import type { LucideIcon } from '@lucide/svelte';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import MediaIdentity from './MediaIdentity.svelte';
+	import MediaIdentity from '../media/MediaIdentity.svelte';
 	import GlassMenu from './GlassMenu.svelte';
 	import MenuItem from './MenuItem.svelte';
 

web-player/src/lib/components/ui/overlay/Modal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import X from '@lucide/svelte/icons/x';
-	import IconButton from './IconButton.svelte';
+	import IconButton from '../primitives/IconButton.svelte';
 
 	interface Props {
 		open: boolean;

web-player/src/lib/state/menus.svelte.ts

@@ -1,4 +1,4 @@
-import { contextMenuPosition, type MenuPosition } from '$lib/components/ui/ContextMenu.svelte';
+import { contextMenuPosition, type MenuPosition } from '$lib/components/ui/overlay/ContextMenu.svelte';
 import { player, toQueueItem, type ApiTrackLike } from '../player/player.svelte';
 
 export type TrackMenuState = { track: ApiTrackLike } & MenuPosition;

web-player/src/routes/(app)/albums/+page.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import Plus from '@lucide/svelte/icons/plus';
 	import Disc from '@lucide/svelte/icons/disc-3';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import MediaCard from '$lib/components/ui/MediaCard.svelte';
-	import AlbumForm from '$lib/components/ui/AlbumForm.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
+	import AlbumForm from '$lib/components/ui/forms/AlbumForm.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
 	import { albumMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();

web-player/src/routes/(app)/albums/[id]/+page.svelte

@@ -6,17 +6,17 @@
 	import Pause from '@lucide/svelte/icons/pause';
 	import SquarePencil from '@lucide/svelte/icons/square-pen';
 	import Trash from '@lucide/svelte/icons/trash';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import AlbumForm from '$lib/components/ui/AlbumForm.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import BackLink from '$lib/components/ui/BackLink.svelte';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import ConfirmDialog from '$lib/components/ui/overlay/ConfirmDialog.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import AlbumForm from '$lib/components/ui/forms/AlbumForm.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import BackLink from '$lib/components/ui/primitives/BackLink.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
 	import { albumMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();

web-player/src/routes/(app)/explore/+page.svelte

@@ -3,22 +3,22 @@
 	import { player, toQueueItem } from '$lib/player/player.svelte';
 	import { fetchAlbumQueueItems } from '$lib/data/albums';
 	import { fmtTime, fmtPlays, plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import InfiniteScroll from '$lib/components/ui/InfiniteScroll.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import Avatar from '$lib/components/ui/Avatar.svelte';
-	import PlayButton from '$lib/components/ui/PlayButton.svelte';
-	import EqBars from '$lib/components/ui/EqBars.svelte';
-	import ListRow from '$lib/components/ui/ListRow.svelte';
-	import Chip from '$lib/components/ui/Chip.svelte';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import InfiniteScroll from '$lib/components/ui/primitives/InfiniteScroll.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import Avatar from '$lib/components/ui/media/Avatar.svelte';
+	import PlayButton from '$lib/components/ui/media/PlayButton.svelte';
+	import EqBars from '$lib/components/ui/media/EqBars.svelte';
+	import ListRow from '$lib/components/ui/media/ListRow.svelte';
+	import Chip from '$lib/components/ui/primitives/Chip.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
 	import { EXPLORE_PAGE_SIZE } from '$lib/config';
 	import { searchHref } from '$lib/state/navigation.svelte';
 	import { createTrackMenu } from '$lib/state/menus.svelte';
-	import ContextMenu, { contextMenuPosition } from '$lib/components/ui/ContextMenu.svelte';
+	import ContextMenu, { contextMenuPosition } from '$lib/components/ui/overlay/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import ListEnd from '@lucide/svelte/icons/list-end';
 	import { appendUnique } from '$lib/data/collections';

web-player/src/routes/(app)/library/+page.svelte

@@ -4,11 +4,11 @@
 	import Music from '@lucide/svelte/icons/music';
 	import { player, toQueueItems } from '$lib/player/player.svelte';
 	import { plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
 
 	let { data } = $props();
 

web-player/src/routes/(app)/liked/+page.svelte

@@ -4,11 +4,11 @@
 	import { player, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
 	import { liked } from '$lib/player/liked.svelte';
 	import { plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
 
 	const tracks = $derived(liked.list);
 	const listTracks = $derived(tracks.map((track) => ({ ...track, addedAt: track.likedAt })));

web-player/src/routes/(app)/mixes/[id]/+page.svelte

@@ -10,14 +10,14 @@
 		toQueueItem
 	} from '$lib/player/player.svelte';
 	import { fmtTime, plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import BackLink from '$lib/components/ui/BackLink.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
-	import ContextMenu from '$lib/components/ui/ContextMenu.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import BackLink from '$lib/components/ui/primitives/BackLink.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
+	import ContextMenu from '$lib/components/ui/overlay/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import { mixItemTrack } from '$lib/data/mixes';

web-player/src/routes/(app)/playlists/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import ListMusic from '@lucide/svelte/icons/list-music';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import MediaCard from '$lib/components/ui/MediaCard.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
 	import { createPlaylistModal } from '$lib/state/playlists.svelte';
 	import { fmtDurationLong, plural, playlistMeta } from '$lib/utils/format';
 

web-player/src/routes/(app)/playlists/[id]/+page.svelte

@@ -6,15 +6,15 @@
 	import SquarePencil from '@lucide/svelte/icons/square-pen';
 	import Trash from '@lucide/svelte/icons/trash';
 	import { player, toQueueItems, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import PlaylistForm from '$lib/components/ui/PlaylistForm.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import ConfirmDialog from '$lib/components/ui/overlay/ConfirmDialog.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import PlaylistForm from '$lib/components/ui/forms/PlaylistForm.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
 	import { playlistMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();

web-player/src/routes/(app)/u/[id]/+page.svelte

@@ -2,13 +2,13 @@
 	import { untrack } from 'svelte';
 	import { enhance } from '$app/forms';
 	import ListMusic from '@lucide/svelte/icons/list-music';
-	import Page from '$lib/components/ui/Page.svelte';
-	import MediaCard from '$lib/components/ui/MediaCard.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import Avatar from '$lib/components/ui/Avatar.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import Avatar from '$lib/components/ui/media/Avatar.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
 	import { plural, playlistMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();

web-player/src/routes/(app)/upload/+page.svelte

@@ -4,15 +4,15 @@
 	import Music from '@lucide/svelte/icons/music';
 	import ImageIcon from '@lucide/svelte/icons/image';
 	import Check from '@lucide/svelte/icons/check';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Surface from '$lib/components/ui/Surface.svelte';
-	import ImageDropzone from '$lib/components/ui/ImageDropzone.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
-	import Field from '$lib/components/ui/Field.svelte';
-	import Input from '$lib/components/ui/Input.svelte';
-	import Checkbox from '$lib/components/ui/Checkbox.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Surface from '$lib/components/ui/primitives/Surface.svelte';
+	import ImageDropzone from '$lib/components/ui/forms/ImageDropzone.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import Field from '$lib/components/ui/primitives/Field.svelte';
+	import Input from '$lib/components/ui/primitives/Input.svelte';
+	import Checkbox from '$lib/components/ui/primitives/Checkbox.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
 
 	type Status = 'idle' | 'uploading' | 'done' | 'error';
 	type StepState = 'idle' | 'active' | 'done';

web-player/src/routes/+error.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
 </script>
 
 <div class="animate-enter mx-auto my-[14vh] max-w-prose-sm text-center">

web-player/src/routes/+layout.svelte

@@ -9,8 +9,8 @@
 	import Sidebar from '$lib/components/layout/Sidebar.svelte';
 	import TopBar from '$lib/components/layout/TopBar.svelte';
 	import MobileHeader from '$lib/components/layout/MobileHeader.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import PlaylistForm from '$lib/components/ui/PlaylistForm.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import PlaylistForm from '$lib/components/ui/forms/PlaylistForm.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
 	import { liked } from '$lib/player/liked.svelte';

web-player/src/routes/+page.svelte

@@ -16,15 +16,15 @@
 	import { mergeRecentlyPlayed } from '$lib/data/recentlyPlayed';
 	import { mixItemTrack } from '$lib/data/mixes';
 	import { fmtTime, fmtDurationLong, fmtPlays, plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import MediaCard from '$lib/components/ui/MediaCard.svelte';
-	import EqBars from '$lib/components/ui/EqBars.svelte';
-	import ListRow from '$lib/components/ui/ListRow.svelte';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import ContextMenu from '$lib/components/ui/ContextMenu.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
+	import EqBars from '$lib/components/ui/media/EqBars.svelte';
+	import ListRow from '$lib/components/ui/media/ListRow.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import ContextMenu from '$lib/components/ui/overlay/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import { HOME_CONTINUE_LIMIT, HOME_POPULAR_MAX } from '$lib/config';

web-player/src/routes/login/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Button from '$lib/components/ui/Button.svelte';
-	import Logo from '$lib/components/ui/Logo.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import Logo from '$lib/components/ui/primitives/Logo.svelte';
 
 	let { data } = $props();