Baseline: full tree snapshot after git repository loss

The previous .git directory was found gutted (only info/ remained), so
history is unrecoverable locally. This commit restores version control
with the tree exactly as it stands: the working app, the preview-tracks
launcher on the artist hero, the scrollable-track-previews design bundle
(docs + approved mockups), and the Phase 0 validation artifacts.

src/App.svelte

@@ -0,0 +1,107 @@
+<script>
+    import Sidebar from "./components/Sidebar.svelte";
+    import TitleBar from "./components/TitleBar.svelte";
+    import PlayerBar from "./components/PlayerBar.svelte";
+    import NowPlaying from "./components/NowPlaying.svelte";
+    import ArtworkViewer from "./components/ArtworkViewer.svelte";
+    import LoginModal from "./components/LoginModal.svelte";
+    import Home from "./views/Home.svelte";
+    import Search from "./views/Search.svelte";
+    import Library from "./views/Library.svelte";
+    import Downloads from "./views/Downloads.svelte";
+    import Settings from "./views/Settings.svelte";
+    import Playlist from "./views/Playlist.svelte";
+    import CatalogSearch from "./views/CatalogSearch.svelte";
+    import CatalogArtist from "./views/CatalogArtist.svelte";
+    import CatalogAlbum from "./views/CatalogAlbum.svelte";
+    import {
+        ui,
+        initEvents,
+        autoConnect,
+        refreshLibrary,
+        refreshPlaylists,
+    } from "./lib/state.svelte.js";
+    import { floatScroll } from "./lib/scrollbar.js";
+
+    const views = {
+        home: Home,
+        search: Search,
+        library: Library,
+        downloads: Downloads,
+        settings: Settings,
+        playlist: Playlist,
+        catalog: CatalogSearch,
+        catalogArtist: CatalogArtist,
+        catalogAlbum: CatalogAlbum,
+    };
+    const CurrentView = $derived(views[ui.view] ?? Home);
+
+    initEvents();
+    autoConnect();
+    refreshLibrary();
+    refreshPlaylists();
+</script>
+
+<div class="app" class:np-open={ui.nowPlaying} class:sidebar-collapsed={ui.sidebarCollapsed}>
+    <TitleBar />
+    <Sidebar />
+    <main class="content" use:floatScroll>
+        <CurrentView />
+    </main>
+    <NowPlaying />
+    <PlayerBar />
+    <ArtworkViewer />
+    <LoginModal />
+</div>
+
+<style>
+    /* Frameless window: the titlebar row is part of the app background —
+       no separate chrome color, the panels float beneath it. */
+    .app {
+        display: grid;
+        grid-template-columns: var(--sidebar-width) 1fr var(--nowplaying-width);
+        grid-template-rows: 30px 1fr var(--player-height);
+        grid-template-areas:
+            "titlebar titlebar titlebar"
+            "sidebar content nowplaying"
+            "player player player";
+        height: 100%;
+        gap: 8px;
+        padding: 0 8px 8px;
+        background: var(--bg-sidebar);
+        overflow: hidden;
+        transition: grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* Collapsed left nav: narrow the sidebar column to an icon rail. The
+       grid-template-columns transition animates the reflow. */
+    .app.sidebar-collapsed {
+        --sidebar-width: 64px;
+    }
+
+    /* Now Playing panel slides away: the column collapses to zero (the panel
+       itself keeps its width and slides off-screen — see NowPlaying.svelte). */
+    .app:not(.np-open) {
+        --nowplaying-width: 0px;
+    }
+
+    .content {
+        grid-area: content;
+        background: linear-gradient(var(--bg-highlight) 0, var(--bg-base) 240px);
+        /* The highlight wash belongs to the top of the PAGE, not the viewport:
+           anchored to the pane (default `scroll`), the gradient stays put
+           while content scrolls, so the hero's scrim — which dissolves into
+           pure bg-base — ends on a lighter backdrop mid-gradient and paints a
+           hard seam at the hero's bottom edge. `local` scrolls the gradient
+           away with the content, keeping the seam colors identical at every
+           scroll position. */
+        background-attachment: local;
+        border-radius: var(--radius);
+        overflow-y: auto;
+        overflow-anchor: none;
+        /* Main scroll pane: no elastic rubber-band at its edges. Inner regions
+           deliberately do NOT set this, so their wheel chains here. */
+        overscroll-behavior: none;
+        padding: 24px 28px;
+    }
+</style>