+ {album.coverUrl ? 
: <>{album.title.slice(0, 2)}}
+
+ );
+}
+
+function IconButton({ label, children, onClick, active = false, className = "" }: { label: string; children: React.ReactNode; onClick?: () => void; active?: boolean; className?: string }) {
+ return ;
+}
+
+const navItems: Array<{ view: View; label: string; icon: React.ReactNode }> = [
+ { view: "home", label: "Listen now", icon:
+ Skip to library
+
+
+ {mobileNav &&
+ );
+}
diff --git a/src/data/demo.ts b/src/data/demo.ts
new file mode 100644
index 0000000..20b3aba
--- /dev/null
+++ b/src/data/demo.ts
@@ -0,0 +1,27 @@
+import type { Album, Track } from "../types";
+
+export const albums: Album[] = [
+ { id: "a1", title: "Afterimage", artist: "Hollow Cities", year: 2026, coverTone: "ember" },
+ { id: "a2", title: "Soft Geometry", artist: "Night Archive", year: 2025, coverTone: "moss" },
+ { id: "a3", title: "A Quiet Current", artist: "Mara Venn", year: 2024, coverTone: "dusk" },
+ { id: "a4", title: "Signal Fires", artist: "Orchard Bloom", year: 2026, coverTone: "clay" },
+ { id: "a5", title: "Low Season", artist: "North Window", year: 2023, coverTone: "indigo" },
+ { id: "a6", title: "Rooms of Air", artist: "Serein", year: 2025, coverTone: "sand" },
+];
+
+export const tracks: Track[] = [
+ { id: "t1", title: "Still Life in Motion", artist: "Hollow Cities", album: "Afterimage", albumId: "a1", duration: 238, coverTone: "ember", favorite: true },
+ { id: "t2", title: "Violet Hours", artist: "Night Archive", album: "Soft Geometry", albumId: "a2", duration: 284, coverTone: "moss" },
+ { id: "t3", title: "Understory", artist: "Mara Venn", album: "A Quiet Current", albumId: "a3", duration: 217, coverTone: "dusk", favorite: true },
+ { id: "t4", title: "Antenna Weather", artist: "Orchard Bloom", album: "Signal Fires", albumId: "a4", duration: 195, coverTone: "clay" },
+ { id: "t5", title: "The Long Interior", artist: "North Window", album: "Low Season", albumId: "a5", duration: 309, coverTone: "indigo" },
+ { id: "t6", title: "Nearer Than Before", artist: "Serein", album: "Rooms of Air", albumId: "a6", duration: 246, coverTone: "sand" },
+ { id: "t7", title: "Everything Returns", artist: "Hollow Cities", album: "Afterimage", albumId: "a1", duration: 261, coverTone: "ember" },
+ { id: "t8", title: "Unfolding", artist: "Night Archive", album: "Soft Geometry", albumId: "a2", duration: 228, coverTone: "moss" },
+];
+
+export const formatTime = (seconds: number) => {
+ if (!Number.isFinite(seconds)) return "0:00";
+ const minutes = Math.floor(seconds / 60);
+ return `${minutes}:${Math.floor(seconds % 60).toString().padStart(2, "0")}`;
+};
diff --git a/src/hooks/usePlayer.ts b/src/hooks/usePlayer.ts
new file mode 100644
index 0000000..c708844
--- /dev/null
+++ b/src/hooks/usePlayer.ts
@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Track } from "../types";
+
+export function usePlayer(initialTracks: Track[]) {
+ const audioRef = useRef