@behindthemusictree/app-kit-ui 29.1.0 → 30.0.0

package/dist/index.cjs

@@ -580,13 +580,13 @@ function AuthCallbackHandler({ renderStatus, ...options }) {
 }
 
 // src/genre-tree/GenreTreeView.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_react_query3 = require("@tanstack/react-query");
-var import_lucide_react15 = require("lucide-react");
-var import_ui16 = require("@behindthemusictree/ui");
+var import_lucide_react16 = require("lucide-react");
+var import_ui18 = require("@behindthemusictree/ui");
 var import_genre_tree_view4 = require("@behindthemusictree/genre-tree-view");
-var import_genre_tree16 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree17 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree19 = require("@behindthemusictree/app-kit/genre-tree");
 var import_popup6 = require("@behindthemusictree/app-kit/popup");
 
 // src/genre-tree/playlist-tree/TreePerRoot.tsx
@@ -1058,6 +1058,7 @@ function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
 }
 
 // src/genre-tree/GenreSearch.tsx
+var import_react8 = require("react");
 var import_lucide_react7 = require("lucide-react");
 var import_ui6 = require("@behindthemusictree/ui");
 var import_genre_tree2 = require("@behindthemusictree/app-kit/genre-tree");
@@ -1070,7 +1071,7 @@ function GenreSearch({
   onPrevious,
   placeholder,
   onQueryChange,
-  extraResults
+  extraGroups = []
 }) {
   const { query, setQuery, results, canClear, clear, select } = (0, import_genre_tree2.useGenreSearch)({
     genrePlaylists,
@@ -1078,11 +1079,45 @@ function GenreSearch({
     selectedName,
     onClear
   });
-  const extraItems = query !== "" && query !== selectedName ? extraResults?.items ?? [] : [];
-  const label = extraResults ? "Search" : "Search a genre";
-  const loading = query !== "" && query !== selectedName && (extraResults?.loading ?? false);
-  const showList = results.length > 0 || extraItems.length > 0;
-  const heading = "px-3 pt-2 pb-1 text-xs font-medium uppercase text-[var(--color-text-muted)]";
+  const [open, setOpen] = (0, import_react8.useState)(false);
+  const active = query !== "" && query !== selectedName;
+  const hasExtras = extraGroups.length > 0;
+  const label = hasExtras ? "Search" : "Search a genre";
+  const loading = active && extraGroups.some((group) => group.loading);
+  const status = active ? extraGroups.map((group) => group.status).filter(Boolean).join(". ") : "";
+  const groups = [
+    {
+      key: "genres",
+      label: hasExtras ? "Genres" : void 0,
+      options: results.map((genrePlaylist) => ({
+        key: genrePlaylist.uuid,
+        content: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          genrePlaylist.name,
+          genrePlaylist.isUmbrella && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ml-2 text-xs italic text-[var(--color-text-muted)]", children: "umbrella" })
+        ] })
+      }))
+    },
+    ...extraGroups.map((group) => ({
+      key: group.key,
+      label: group.label,
+      options: active ? group.items.map((item) => ({ key: item.key, content: item.content })) : []
+    }))
+  ];
+  const handlePick = (groupKey, optionKey) => {
+    setOpen(false);
+    if (groupKey === "genres") {
+      const genrePlaylist = results.find((result) => result.uuid === optionKey);
+      if (!genrePlaylist) return;
+      select(genrePlaylist);
+      onQueryChange?.("");
+      return;
+    }
+    const item = extraGroups.find((group) => group.key === groupKey)?.items.find((entry) => entry.key === optionKey);
+    if (!item) return;
+    setQuery("");
+    onQueryChange?.("");
+    item.onSelect();
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "genre-search relative w-[calc(var(--layout-detail-panel-w,25.5rem)-2*var(--layout-panel-inset,1rem))] shrink-0 max-md:w-full", children: [
     onPrevious && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "button",
@@ -1096,47 +1131,45 @@ function GenreSearch({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_ui6.Input,
+      import_ui6.Combobox,
       {
-        type: "text",
+        ariaLabel: label,
+        listLabel: `${label} results`,
         value: query,
-        onChange: (event) => {
-          setQuery(event.target.value);
-          onQueryChange?.(event.target.value);
-        },
         placeholder: placeholder ?? `${label}\u2026`,
-        "aria-label": label,
-        "aria-busy": loading,
-        inputMode: "search",
-        enterKeyHint: "search",
-        autoComplete: "off",
-        className: "h-[var(--layout-search-h,3rem)] pl-6 pr-20 text-base transition-[padding] duration-200 ease-out motion-reduce:transition-none bg-[var(--color-surface)] border-[var(--color-border)] rounded-full shadow-md"
+        groups,
+        open,
+        onOpenChange: setOpen,
+        onValueChange: (value) => {
+          setQuery(value);
+          onQueryChange?.(value);
+        },
+        onPick: handlePick,
+        status,
+        loading: loading ? "Searching\u2026" : void 0,
+        inputClassName: "h-[var(--layout-search-h,3rem)] pl-6 pr-20 text-base transition-[padding] duration-200 ease-out motion-reduce:transition-none bg-[var(--color-surface)] border-[var(--color-border)] rounded-full shadow-md",
+        className: "genre-search-results z-40 rounded-xl shadow-md",
+        listClassName: "max-h-[min(20rem,50dvh)]",
+        optionClassName: "[@media(pointer:coarse)]:min-h-[var(--layout-touch-target)]"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "absolute right-3 top-1/2 flex items-center -translate-y-1/2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-        "span",
-        {
-          "data-loading": loading,
-          className: "relative p-2 text-[var(--color-text-muted)] pointer-events-none",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_lucide_react7.Search,
-              {
-                "aria-hidden": "true",
-                className: `w-6 h-6 transition-opacity duration-200 motion-reduce:transition-none ${loading ? "opacity-0" : ""}`
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_lucide_react7.LoaderCircle,
-              {
-                "aria-hidden": "true",
-                className: `absolute inset-2 w-6 h-6 transition-opacity duration-200 motion-reduce:transition-none ${loading ? "opacity-100 delay-300 animate-spin motion-reduce:animate-none" : "opacity-0"}`
-              }
-            )
-          ]
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { "data-loading": loading, className: "relative p-2 text-[var(--color-text-muted)] pointer-events-none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_lucide_react7.Search,
+          {
+            "aria-hidden": "true",
+            className: `w-6 h-6 transition-opacity duration-200 motion-reduce:transition-none ${loading ? "opacity-0" : ""}`
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_lucide_react7.LoaderCircle,
+          {
+            "aria-hidden": "true",
+            className: `absolute inset-2 w-6 h-6 transition-opacity duration-200 motion-reduce:transition-none ${loading ? "opacity-100 delay-300 animate-spin motion-reduce:animate-none" : "opacity-0"}`
+          }
+        )
+      ] }),
       canClear && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
         {
@@ -1150,39 +1183,6 @@ function GenreSearch({
           children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.X, { "aria-hidden": "true", className: "w-6 h-6" })
         }
       )
-    ] }),
-    extraResults?.status && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { role: "status", "aria-live": "polite", className: "sr-only", children: extraResults.status }),
-    showList && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("ul", { className: "genre-search-results absolute z-40 w-full max-h-[min(16rem,50dvh)] mt-1 overflow-y-auto bg-[var(--color-surface)] border border-[var(--color-border)] rounded-xl shadow-md", children: [
-      extraResults && results.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { className: heading, children: "Genres" }),
-      results.map((genrePlaylist) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-        "button",
-        {
-          type: "button",
-          className: "w-full px-3 py-1.5 [@media(pointer:coarse)]:min-h-[var(--layout-touch-target)] text-left hover:bg-[var(--color-surface-muted)]",
-          onClick: () => {
-            select(genrePlaylist);
-            onQueryChange?.("");
-          },
-          children: [
-            genrePlaylist.name,
-            genrePlaylist.isUmbrella && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ml-2 text-xs italic text-[var(--color-text-muted)]", children: "umbrella" })
-          ]
-        }
-      ) }, genrePlaylist.uuid)),
-      extraResults && extraItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { className: heading, children: extraResults.label }),
-      extraItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        "button",
-        {
-          type: "button",
-          className: "w-full px-3 py-1.5 [@media(pointer:coarse)]:min-h-[var(--layout-touch-target)] text-left hover:bg-[var(--color-surface-muted)]",
-          onClick: () => {
-            setQuery("");
-            onQueryChange?.("");
-            item.onSelect();
-          },
-          children: item.content
-        }
-      ) }, item.key))
     ] })
   ] });
 }
@@ -1198,7 +1198,7 @@ var import_lucide_react10 = require("lucide-react");
 var import_popup4 = require("@behindthemusictree/app-kit/popup");
 
 // src/genre-tree/SharePopup.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_lucide_react9 = require("lucide-react");
 var import_fa3 = require("react-icons/fa");
 var import_si = require("react-icons/si");
@@ -1230,8 +1230,8 @@ function ShareDestinationButton({
 var import_lucide_react8 = require("lucide-react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function SharePreviewCard({ target, url }) {
-  const Icon = target.kind === "genre" ? import_lucide_react8.Music2 : import_lucide_react8.UserRound;
-  const typeLabel = target.kind === "genre" ? "Genre" : "Artist";
+  const Icon = { genre: import_lucide_react8.Music2, artist: import_lucide_react8.UserRound, song: import_lucide_react8.Music }[target.kind];
+  const typeLabel = { genre: "Genre", artist: "Artist", song: "Song" }[target.kind];
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex w-28 shrink-0 items-center justify-center bg-[var(--color-primary)]/15 text-[var(--color-primary)]", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1 p-4", children: [
@@ -1276,20 +1276,20 @@ async function copyText(text) {
   }
 }
 function SharePopup({ target, url, onClose }) {
-  const [absoluteUrl, setAbsoluteUrl] = (0, import_react8.useState)(url);
-  const [copyStatus, setCopyStatus] = (0, import_react8.useState)("idle");
-  const [canUseNativeShare, setCanUseNativeShare] = (0, import_react8.useState)(false);
-  const [shareError, setShareError] = (0, import_react8.useState)(null);
-  const [toastId, setToastId] = (0, import_react8.useState)(0);
-  (0, import_react8.useEffect)(() => {
+  const [absoluteUrl, setAbsoluteUrl] = (0, import_react9.useState)(url);
+  const [copyStatus, setCopyStatus] = (0, import_react9.useState)("idle");
+  const [canUseNativeShare, setCanUseNativeShare] = (0, import_react9.useState)(false);
+  const [shareError, setShareError] = (0, import_react9.useState)(null);
+  const [toastId, setToastId] = (0, import_react9.useState)(0);
+  (0, import_react9.useEffect)(() => {
     setAbsoluteUrl(resolveAbsoluteUrl(url) ?? "");
     setCopyStatus("idle");
     setShareError(null);
   }, [url]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     setCanUseNativeShare(typeof navigator !== "undefined" && typeof navigator.share === "function");
   }, []);
-  const destinationUrls = (0, import_react8.useMemo)(() => {
+  const destinationUrls = (0, import_react9.useMemo)(() => {
     if (!absoluteUrl) return null;
     const message = `${target.name} \u2014 ${absoluteUrl}`;
     return {
@@ -1307,7 +1307,7 @@ function SharePopup({ target, url, onClose }) {
     setCopyStatus(copied ? "idle" : "failed");
     if (copied) setToastId((id) => id + 1);
   };
-  const dismissToast = (0, import_react8.useCallback)(() => setToastId(0), []);
+  const dismissToast = (0, import_react9.useCallback)(() => setToastId(0), []);
   const handleNativeShare = async () => {
     if (!absoluteUrl || !navigator.share) return;
     setShareError(null);
@@ -1513,13 +1513,13 @@ var import_ui8 = require("@behindthemusictree/ui");
 var import_genre_tree9 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/ClampedText.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function ClampedText({ children, className: className2 = "" }) {
-  const ref = (0, import_react9.useRef)(null);
-  const [expanded, setExpanded] = (0, import_react9.useState)(false);
-  const [overflows, setOverflows] = (0, import_react9.useState)(false);
-  (0, import_react9.useLayoutEffect)(() => {
+  const ref = (0, import_react10.useRef)(null);
+  const [expanded, setExpanded] = (0, import_react10.useState)(false);
+  const [overflows, setOverflows] = (0, import_react10.useState)(false);
+  (0, import_react10.useLayoutEffect)(() => {
     const element = ref.current;
     if (!element || expanded) return;
     setOverflows(element.scrollHeight > element.clientHeight);
@@ -1540,7 +1540,7 @@ function ClampedText({ children, className: className2 = "" }) {
 }
 
 // src/genre-tree/GenrePlaylistTracks.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_query = require("@tanstack/react-query");
 var import_zod = require("zod");
 var import_fa4 = require("react-icons/fa");
@@ -1608,6 +1608,7 @@ function GenrePlaylistTracks({
   scope,
   getBackendBaseUrl,
   renderArtistLink,
+  renderSongLink,
   renderSongLeading,
   renderSongActions,
   renderTracksToolbar,
@@ -1638,8 +1639,8 @@ function GenrePlaylistTracks({
     getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
     enabled: scope !== "me" || sessionRestored && !!session?.accessToken
   });
-  const sentinelRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
+  const sentinelRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     const sentinel = sentinelRef.current;
     if (!hasNextPage || isFetchingNextPage || !sentinel) return;
     const observer = new IntersectionObserver((entries) => {
@@ -1678,7 +1679,7 @@ function GenrePlaylistTracks({
         const isCurrent = playerTrackObject?.track.id === track.uuid;
         const isPlaying = isCurrent && playState === import_player5.PlayStates.PLAYING;
         const text = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: TEXT_CELL, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: TITLE_CELL, children: (0, import_genre_tree6.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: TITLE_CELL, children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree6.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
           track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: SEPARATOR, children: " \u2014 " }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_genre_tree8.ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
           track.album && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: ALBUM_CELL, children: track.album.name })
@@ -1745,6 +1746,7 @@ function GenreDetailExtras({
   criteriaOverviewSchema,
   renderGenreDetailExtras,
   renderArtistLink,
+  renderSongLink,
   renderSummary,
   renderEssentialTracks,
   family,
@@ -1822,6 +1824,7 @@ function GenreDetailExtras({
         scope,
         getBackendBaseUrl,
         renderArtistLink,
+        renderSongLink,
         ...trackSlots
       }
     )
@@ -1830,7 +1833,7 @@ function GenreDetailExtras({
 
 // src/genre-tree/GenreInfoPanelBody.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var import_react11 = require("react");
+var import_react12 = require("react");
 function GenreNodeActionBand({ genrePlaylist, playback, ...bandProps }) {
   const { isPlaying, setIsPlaying } = (0, import_player6.usePlayer)();
   const isCurrentTrackList = playback.playingNodeId === genrePlaylist.uuid;
@@ -1867,7 +1870,7 @@ function GenreInfoPanelBody({
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
     toolbar,
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GenreNodeActionBand, { ...band, genrePlaylist, playback }),
-    /* @__PURE__ */ (0, import_react11.createElement)(
+    /* @__PURE__ */ (0, import_react12.createElement)(
       GenreDetailExtras,
       {
         ...extras,
@@ -1927,9 +1930,9 @@ function PanelEdgeTab({ side, edge, center, controls, className: className2 }) {
 }
 
 // src/genre-tree/useLeftDetailPanelLayout.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useLeftDetailPanelLayout(isPanelShown, enabled = true) {
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!enabled || isPanelShown) return void 0;
     const root = document.documentElement;
     root.style.setProperty("--layout-left-w", "0px");
@@ -1940,7 +1943,7 @@ function useLeftDetailPanelLayout(isPanelShown, enabled = true) {
 }
 
 // src/genre-tree/ChangeParentPopup.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_genre_tree10 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function ChangeParentPopup({
@@ -1952,7 +1955,7 @@ function ChangeParentPopup({
   onParentChanged
 }) {
   const { mutate, isPending, formErrors } = (0, import_genre_tree10.useUpdateGenre)(scope, getBackendBaseUrl);
-  const candidates = (0, import_react13.useMemo)(
+  const candidates = (0, import_react14.useMemo)(
     () => (0, import_genre_tree10.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
     [genrePlaylists, genrePlaylist.uuid]
   );
@@ -1970,7 +1973,7 @@ function ChangeParentPopup({
       }
     );
   };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") onClose();
     };
@@ -2158,7 +2161,7 @@ function ArtistDiscography({ albums }) {
 }
 
 // src/genre-tree/artist/ArtistSongs.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
 var import_lucide_react14 = require("lucide-react");
 var import_ui13 = require("@behindthemusictree/ui");
@@ -2231,7 +2234,8 @@ function TrackItem({
   position,
   renderDuration,
   renderActions,
-  renderArtistLink
+  renderArtistLink,
+  renderSongLink
 }) {
   const { handlePlayPauseAction, playerTrackObject, loadTrackForPlayer } = (0, import_player9.usePlayer)();
   const { trackList, selectedTrack, toTrackAtPosition, runtimeUnplayableTrackIds } = (0, import_genre_tree11.useTrackList)();
@@ -2271,7 +2275,7 @@ function TrackItem({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: (0, import_genre_tree12.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree12.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }) }),
           track.artists && track.artists.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_genre_tree13.ArtistNames, { artists: track.artists, renderArtistLink }) }) : ""
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "genre-name-container flex items-center justify-start w-[21.6%] min-w-0 shrink-0", children: track.genre ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-xs font-bold", children: track.genre.name }) : "" }),
@@ -2296,9 +2300,9 @@ var SORTS = [
   { ordering: "title", label: "Title" },
   { ordering: "-albumYear", label: "Year" }
 ];
-function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink }) {
-  const [page, setPage] = (0, import_react14.useState)(1);
-  const [ordering, setOrdering] = (0, import_react14.useState)("title");
+function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLink }) {
+  const [page, setPage] = (0, import_react15.useState)(1);
+  const [ordering, setOrdering] = (0, import_react15.useState)("title");
   const { fetch } = (0, import_transport8.useFetchWrapper)(getBackendBaseUrl);
   const { playNewTrackListFromArtist } = (0, import_genre_tree14.useTrackList)();
   const { playerTrackObject } = (0, import_player10.usePlayer)();
@@ -2357,7 +2361,8 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink }) {
       {
         track: song,
         position: (page - 1) * data.pageSize + index + 1,
-        renderArtistLink
+        renderArtistLink,
+        renderSongLink
       }
     ) }, song.uuid)) }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
@@ -2372,6 +2377,7 @@ function useArtistPanel({
   getBackendBaseUrl,
   getShareUrl,
   renderArtistLink,
+  renderSongLink,
   expanded,
   onExpandedChange,
   onClose
@@ -2424,7 +2430,8 @@ function useArtistPanel({
             {
               artist: { uuid: artist.uuid, name: artist.name },
               getBackendBaseUrl,
-              renderArtistLink
+              renderArtistLink,
+              renderSongLink
             }
           )
         ] }),
@@ -2434,31 +2441,225 @@ function useArtistPanel({
   }
 }
 
-// src/genre-tree/SizeMetricToggle.tsx
-var import_md2 = require("react-icons/md");
+// src/genre-tree/song/useSongPanel.tsx
+var import_ui16 = require("@behindthemusictree/ui");
+var import_genre_tree17 = require("@behindthemusictree/app-kit/genre-tree");
+
+// src/genre-tree/song/SongPanelContent.tsx
+var import_react16 = require("react");
+var import_lucide_react15 = require("lucide-react");
 var import_ui15 = require("@behindthemusictree/ui");
+var import_player11 = require("@behindthemusictree/app-kit/player");
+var import_genre_tree16 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime38 = require("react/jsx-runtime");
+var numberFormat = new Intl.NumberFormat("en");
+var dateFormat = new Intl.DateTimeFormat("en", { dateStyle: "medium" });
+var externalLink = "text-[var(--color-primary)] hover:underline focus-visible:underline";
+function SongHistory({ uuid, getBackendBaseUrl }) {
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  const history = (0, import_genre_tree16.useSongHistory)(uuid, getBackendBaseUrl, open);
+  let body = null;
+  if (history.status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui15.Skeleton, { className: "h-10", "aria-busy": "true" });
+  else if (history.status === "error") body = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-red-600", children: "Could not load the history." });
+  else if (history.status === "success")
+    body = history.entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { className: "py-1.5 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "font-medium", children: entry.action }),
+      entry.oldValue !== null || entry.newValue !== null ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
+        " ",
+        "\u2014 ",
+        entry.oldValue ?? "none",
+        " \u2192 ",
+        entry.newValue ?? "none"
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "block text-xs text-[var(--color-text-muted)]", children: [
+        entry.actorPseudo ?? "Anonymous",
+        " \xB7 ",
+        dateFormat.format(new Date(entry.createdOn))
+      ] })
+    ] }, entry.uuid)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    "details",
+    {
+      onToggle: (event) => setOpen(event.currentTarget.open),
+      className: "px-6 pb-2.5 mt-2.5 border-t border-[var(--color-border)]",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("summary", { className: "mt-2.5 cursor-pointer text-[0.6875rem] font-semibold uppercase text-[var(--color-text-muted)]", children: "History" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "mt-1.5", children: body })
+      ]
+    }
+  );
+}
+function SongPanelContent({
+  song,
+  scope,
+  getBackendBaseUrl,
+  shareUrl,
+  renderArtistLink,
+  genrePath,
+  onSelectGenre
+}) {
+  const { playNewTrackListFromTrackUuid } = (0, import_genre_tree16.useTrackList)();
+  const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player11.usePlayer)();
+  const unplayableReason = (0, import_genre_tree16.songUnplayableReason)(song);
+  const isCurrent = playerTrackObject?.track.id === song.uuid;
+  const isPlaying = isCurrent && playState === import_player11.PlayStates.PLAYING;
+  const shareTarget = { kind: "song", uuid: song.uuid, name: song.title, scope };
+  const musicBrainzUrl = (0, import_genre_tree16.musicBrainzRecordingUrl)(song);
+  const fields = [];
+  if (song.genre) {
+    const path = genrePath.length > 0 ? genrePath : null;
+    fields.push({
+      label: "Genre",
+      value: path ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { children: [
+        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": "true", children: "\u203A " }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { type: "button", onClick: () => onSelectGenre(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
+      ] }, genrePlaylist.uuid)) }) : song.genre.name
+    });
+  } else {
+    fields.push({ label: "Genre", value: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-[var(--color-text-muted)]", children: "No genre" }) });
+  }
+  if (song.firstReleaseYear) fields.push({ label: "First released", value: song.firstReleaseYear });
+  const viewCount = song.youtubeVideo?.viewCount;
+  if (viewCount !== null && viewCount !== void 0)
+    fields.push({ label: "YouTube views", value: numberFormat.format(viewCount) });
+  fields.push({ label: "Plays", value: numberFormat.format(song.playCount) });
+  const links = [];
+  if (musicBrainzUrl)
+    links.push(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("a", { href: musicBrainzUrl, target: "_blank", rel: "noopener noreferrer", className: externalLink, children: "MusicBrainz" }, "mb")
+    );
+  if (song.youtubeVideo)
+    links.push(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        "a",
+        {
+          href: `https://www.youtube.com/watch?v=${encodeURIComponent(song.youtubeVideo.id)}`,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: externalLink,
+          children: "YouTube"
+        },
+        "yt"
+      )
+    );
+  if (links.length > 0)
+    fields.push({
+      label: "Links",
+      value: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex gap-3", children: links })
+    });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "genre-action-band border-b border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-wrap gap-1 px-3.5 py-3", children: [
+      unplayableReason ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "flex items-center px-2.5 text-sm text-[var(--color-text-muted)]", children: unplayableReason }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => isCurrent ? handlePlayPauseAction() : playNewTrackListFromTrackUuid(song, scope),
+          className: "group flex flex-col items-center gap-1 w-16 text-xs text-center text-[var(--color-text)] focus-visible:outline-none",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex items-center justify-center w-10 h-10 rounded-full group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-focus-ring)] bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react15.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react15.Play, { "aria-hidden": "true", className: "w-5 h-5" }) }),
+            isPlaying ? "Pause" : "Play"
+          ]
+        }
+      ),
+      shareUrl && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
+    ] }) }),
+    song.artists && song.artists.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "px-6 pt-2.5 text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_genre_tree16.ArtistNames, { artists: song.artists, renderArtistLink }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui15.FieldList, { items: fields }),
+    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui15.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
+  ] });
+}
+
+// src/genre-tree/song/useSongPanel.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function useSongPanel({
+  uuid,
+  scope,
+  getBackendBaseUrl,
+  getShareUrl,
+  renderArtistLink,
+  getGenrePath,
+  onSelectGenre,
+  expanded,
+  onExpandedChange,
+  onClose
+}) {
+  const result = (0, import_genre_tree17.useSong)(uuid, getBackendBaseUrl);
+  const panel = { expanded, onExpandedChange, onClose };
+  switch (result.status) {
+    case "idle":
+      return void 0;
+    case "loading":
+      return {
+        ...panel,
+        title: "Song",
+        content: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5 px-6 py-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui16.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui16.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui16.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui16.Skeleton, { className: "h-4 w-24" })
+        ] })
+      };
+    case "not-found":
+      return {
+        ...panel,
+        title: "Song not found",
+        content: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "px-6 py-2.5 text-[var(--color-text-muted)]", children: "This song does not exist." })
+      };
+    case "error":
+      return {
+        ...panel,
+        title: "Song",
+        content: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "px-6 py-2.5 text-red-600", children: "Could not load this song." })
+      };
+    case "success": {
+      const { song } = result;
+      const shareUrl = getShareUrl?.({ kind: "song", uuid: song.uuid, name: song.title, scope });
+      return {
+        ...panel,
+        title: song.title,
+        content: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          SongPanelContent,
+          {
+            song,
+            scope,
+            getBackendBaseUrl,
+            shareUrl: shareUrl ?? void 0,
+            renderArtistLink,
+            genrePath: song.genre ? getGenrePath(song.genre) : [],
+            onSelectGenre
+          }
+        )
+      };
+    }
+  }
+}
+
+// src/genre-tree/SizeMetricToggle.tsx
+var import_md2 = require("react-icons/md");
+var import_ui17 = require("@behindthemusictree/ui");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function SizeMetricToggle({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_ui15.SegmentedControl,
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    import_ui17.SegmentedControl,
     {
       variant: "floating",
       "aria-label": "Size nodes by",
       value,
       onChange,
       options: [
-        { value: "songs", label: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_md2.MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
-        { value: "views", label: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_md2.MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
+        { value: "songs", label: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_md2.MdMusicNote, { size: 18, "aria-hidden": true }), "aria-label": "Size by songs", title: "Node size by song count" },
+        { value: "views", label: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_md2.MdVisibility, { size: 18, "aria-hidden": true }), "aria-label": "Size by views", title: "Node size by song views" }
       ]
     }
   );
 }
 
 // src/genre-tree/GenreTreeView.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var PREVIOUS_BUTTON_CSS = `
 .genre-tree-view .search-overlay .gtv-info-panel-previous { display: none; }
 .genre-tree-view:has(.search-overlay .gtv-info-panel-previous) .genre-search input { padding-left: 2.75rem; }
@@ -2502,6 +2703,13 @@ function GenreTreeView({
   artistSearch = true,
   onArtistSelect,
   artistSearchBaseUrl,
+  songUuid: controlledSongUuid,
+  onSongUuidChange,
+  songExpanded: controlledSongExpanded,
+  onSongExpandedChange,
+  songSearch = true,
+  onSongSelect,
+  renderSongLink,
   renderSummary,
   renderEssentialTracks,
   renderSongLeading,
@@ -2516,14 +2724,21 @@ function GenreTreeView({
   placement = "default",
   ...focus
 }) {
-  const getShareUrlRef = (0, import_react15.useRef)(getShareUrl);
+  const getShareUrlRef = (0, import_react17.useRef)(getShareUrl);
   getShareUrlRef.current = getShareUrl;
-  const [internalArtistUuid, setInternalArtistUuid] = (0, import_react15.useState)(null);
+  const [internalArtistUuid, setInternalArtistUuid] = (0, import_react17.useState)(null);
   const isArtistControlled = controlledArtistUuid !== void 0;
   const artistUuid = isArtistControlled ? controlledArtistUuid : internalArtistUuid;
-  const [internalSizeMetric, setInternalSizeMetric] = (0, import_react15.useState)("songs");
+  const [internalSongUuid, setInternalSongUuid] = (0, import_react17.useState)(null);
+  const isSongControlled = controlledSongUuid !== void 0;
+  const songUuid = isSongControlled ? controlledSongUuid : internalSongUuid;
+  const changeSong = (uuid) => {
+    if (!isSongControlled) setInternalSongUuid(uuid);
+    onSongUuidChange?.(uuid);
+  };
+  const [internalSizeMetric, setInternalSizeMetric] = (0, import_react17.useState)("songs");
   const sizeMetric = controlledSizeMetric ?? internalSizeMetric;
-  const deferredSizeMetric = (0, import_react15.useDeferredValue)(sizeMetric);
+  const deferredSizeMetric = (0, import_react17.useDeferredValue)(sizeMetric);
   const changeSizeMetric = (metric) => {
     if (controlledSizeMetric === void 0) setInternalSizeMetric(metric);
     onSizeMetricChange?.(metric);
@@ -2550,7 +2765,7 @@ function GenreTreeView({
     allowWheelRotation: internalAllowWheelRotation,
     toggleWheelRotation,
     onNodeHover: handleNodeHover
-  } = (0, import_genre_tree17.useGenreTreeViewState)({
+  } = (0, import_genre_tree19.useGenreTreeViewState)({
     scope,
     getBackendBaseUrl,
     viewMode: controlledViewMode,
@@ -2560,7 +2775,7 @@ function GenreTreeView({
     artistUuid
   });
   const restoreRevision = viewportRestore?.revision;
-  const [stackedRestoreOwner, setStackedRestoreOwner] = (0, import_react15.useState)({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
+  const [stackedRestoreOwner, setStackedRestoreOwner] = (0, import_react17.useState)({ revision: restoreRevision, rootUuid: selectedGenrePlaylist?.root.uuid });
   let restoreRootUuid = stackedRestoreOwner.rootUuid;
   if (stackedRestoreOwner.revision !== restoreRevision) {
     restoreRootUuid = selectedGenrePlaylist?.root.uuid;
@@ -2569,14 +2784,14 @@ function GenreTreeView({
     restoreRootUuid = selectedGenrePlaylist.root.uuid;
     setStackedRestoreOwner({ revision: restoreRevision, rootUuid: restoreRootUuid });
   }
-  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree17.genreUpdateMutationKey }) > 0;
-  const { mutate: updateGenre } = (0, import_genre_tree17.useUpdateGenre)(scope, getBackendBaseUrl);
+  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree19.genreUpdateMutationKey }) > 0;
+  const { mutate: updateGenre } = (0, import_genre_tree19.useUpdateGenre)(scope, getBackendBaseUrl);
   const busy = deferredSizeMetric !== sizeMetric || isTreeFetching || isGenreUpdating;
   const isArtistFiltered = artistUuid !== null;
   const canSizeByViews = !isArtistFiltered && hasViewsCount(visibleGenrePlaylists);
-  const artistResult = (0, import_genre_tree17.useArtist)(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
+  const artistResult = (0, import_genre_tree19.useArtist)(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
   const filterArtistName = artistResult.status === "success" ? artistResult.artist.name : null;
-  const filterArtist = (0, import_react15.useMemo)(
+  const filterArtist = (0, import_react17.useMemo)(
     () => artistUuid !== null && filterArtistName !== null ? { uuid: artistUuid, name: filterArtistName } : null,
     [artistUuid, filterArtistName]
   );
@@ -2584,27 +2799,72 @@ function GenreTreeView({
   const playback = useGenrePlaylistPlayback({ scope, genrePlaylists: visibleGenrePlaylists, artist: filterArtist });
   const openArtist = (uuid) => {
     if (selectedNodeId !== null) clearSelection();
+    if (songUuid !== null) changeSong(null);
     changeArtist(uuid);
   };
-  const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react15.useState)(null);
+  const openSong = (uuid) => {
+    if (selectedNodeId !== null) clearSelection();
+    changeSong(uuid);
+  };
+  const openSongRef = (0, import_react17.useRef)(openSong);
+  openSongRef.current = openSong;
+  const resolvedRenderSongLink = (0, import_react17.useCallback)(
+    (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
+    [renderSongLink]
+  );
+  const [expandedSongUuid, setExpandedSongUuid] = (0, import_react17.useState)(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react17.useState)(null);
   const artistBaseUrl = artistSearchBaseUrl ?? getBackendBaseUrl;
+  const songBaseUrl = getBackendBaseUrl;
   const artistPanel = useArtistPanel({
     uuid: artistUuid,
     scope,
     getBackendBaseUrl: artistBaseUrl,
     getShareUrl: getShareUrlRef.current,
-    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
     expanded: controlledArtistExpanded ?? (artistUuid !== null && expandedArtistUuid === artistUuid),
     onExpandedChange: (on) => {
       if (controlledArtistExpanded === void 0) setExpandedArtistUuid(on ? artistUuid : null);
       onArtistExpandedChange?.(on);
     },
+    renderSongLink: resolvedRenderSongLink,
     onClose: () => changeArtist(null)
   });
-  const builtInArtistPanel = overlayPanel || hasSelectedGenreNode ? void 0 : artistPanel;
-  const activeOverlayPanel = overlayPanel ?? (builtInArtistPanel && { ...builtInArtistPanel, hideTitle: true, hideClose: true });
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react15.useState)(false);
-  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react15.useState)(false);
+  const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
+  const getGenrePath = (genre) => {
+    const path = [];
+    let current = visibleGenrePlaylists.find((playlist) => playlist.criteria?.uuid === genre.uuid);
+    while (current) {
+      path.unshift(current);
+      const parentUuid = current.parent?.uuid;
+      current = parentUuid ? visibleGenrePlaylists.find((playlist) => playlist.uuid === parentUuid) : void 0;
+    }
+    return path;
+  };
+  const songPanel = useSongPanel({
+    uuid: songUuid,
+    scope,
+    getBackendBaseUrl: songBaseUrl,
+    getShareUrl: getShareUrlRef.current,
+    renderArtistLink: resolvedRenderArtistLink,
+    getGenrePath,
+    onSelectGenre: (genrePlaylist) => {
+      changeSong(null);
+      selectGenrePlaylist(genrePlaylist);
+    },
+    expanded: controlledSongExpanded ?? (songUuid !== null && expandedSongUuid === songUuid),
+    onExpandedChange: (on) => {
+      if (controlledSongExpanded === void 0) setExpandedSongUuid(on ? songUuid : null);
+      onSongExpandedChange?.(on);
+    },
+    onClose: () => changeSong(null)
+  });
+  const builtInSongPanel = overlayPanel || hasSelectedGenreNode ? void 0 : songPanel;
+  const builtInArtistPanel = overlayPanel || hasSelectedGenreNode || builtInSongPanel ? void 0 : artistPanel;
+  const builtInPanel = builtInSongPanel ?? builtInArtistPanel;
+  const activeOverlayPanel = overlayPanel ?? (builtInPanel && { ...builtInPanel, hideTitle: true, hideClose: true });
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react17.useState)(false);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react17.useState)(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
   const isExpanded = expanded ?? uncontrolledExpanded;
   const changeCollapsed = (next) => {
@@ -2615,9 +2875,9 @@ function GenreTreeView({
     setUncontrolledExpanded(next);
     onExpandedChange?.(next);
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     setUncontrolledCollapsed(false);
-  }, [selectedNodeId, artistUuid]);
+  }, [selectedNodeId, artistUuid, songUuid]);
   const isDetailHidden = isCollapsed || !hasSelectedGenreNode && !activeOverlayPanel;
   useLeftDetailPanelLayout(!isDetailHidden, placement === "regions");
   const detailOverlay = placement === "regions" && activeOverlayPanel?.onExpandedChange ? activeOverlayPanel : void 0;
@@ -2631,14 +2891,14 @@ function GenreTreeView({
     hideExpandButton: placement === "regions" ? true : void 0,
     overlayPanel: detailOverlay ? { ...detailOverlay, collapsed: isCollapsed, hideExpandButton: true } : activeOverlayPanel
   };
-  const [isWheelRevealed, setIsWheelRevealed] = (0, import_react15.useState)(false);
+  const [isWheelRevealed, setIsWheelRevealed] = (0, import_react17.useState)(false);
   const usesHandoff = viewMode === "wheel" || viewMode === "pop-core";
   const isTreeReady = !isLoading && (!usesHandoff || isWheelRevealed);
-  const rootRef = (0, import_react15.useRef)(null);
+  const rootRef = (0, import_react17.useRef)(null);
   const handlePrevious = () => {
     rootRef.current?.querySelector(".search-overlay .gtv-info-panel-previous")?.click();
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isTreeReady || viewMode !== "pop-core" || !hasSelectedGenreNode || !selectedGenrePlaylist) return;
     const root = rootRef.current;
     const centerChip = root?.querySelector(".gtv-wheel-center-node .gtv-wheel-chip");
@@ -2648,21 +2908,22 @@ function GenreTreeView({
     centerChip.click();
   }, [hasSelectedGenreNode, isTreeReady, selectedGenrePlaylist, viewMode]);
   const { showPopup, hidePopup } = (0, import_popup6.usePopup)();
-  const [searchText, setSearchText] = (0, import_react15.useState)("");
-  const artistSearchResult = (0, import_genre_tree16.useArtistSearch)(artistBaseUrl, artistSearch ? searchText : "");
-  const artistExtraResults = artistSearch ? {
+  const [searchText, setSearchText] = (0, import_react17.useState)("");
+  const artistSearchResult = (0, import_genre_tree18.useArtistSearch)(artistBaseUrl, artistSearch ? searchText : "");
+  const artistGroup = artistSearch ? {
+    key: "artists",
     label: "Artists",
     items: artistSearchResult.artists.map((artist) => ({
       key: artist.uuid,
-      content: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "block truncate font-medium", children: [
+      content: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "block truncate font-medium", children: [
           artist.name,
-          artist.disambiguation && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
+          artist.disambiguation && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
             " \xB7 ",
             artist.disambiguation
           ] })
         ] }),
-        artist.matchedAlias && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
+        artist.matchedAlias && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [
           "also known as ",
           artist.matchedAlias
         ] })
@@ -2675,11 +2936,32 @@ function GenreTreeView({
     status: artistSearchResult.isError ? "Search failed" : artistSearchResult.settled && artistSearchResult.artists.length === 0 ? "No artists found" : "",
     loading: artistSearchResult.pending
   } : void 0;
+  const songSearchResult = (0, import_genre_tree18.useSongSearch)(songBaseUrl, songSearch ? searchText : "");
+  const songGroup = songSearch ? {
+    key: "songs",
+    label: "Songs",
+    items: songSearchResult.songs.map((song) => ({
+      key: song.uuid,
+      content: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: (0, import_genre_tree18.isSongSearchResultPlayable)(song) ? void 0 : "opacity-60", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "block truncate font-medium", children: song.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "block truncate text-xs text-[var(--color-neutral-500)]", children: [song.artists.map((artist) => artist.name).join(", "), song.genre?.name ?? "No genre"].filter(Boolean).join(" \xB7 ") })
+      ] }),
+      onSelect: () => {
+        openSong(song.uuid);
+        onSongSelect?.(song);
+      }
+    })),
+    status: songSearchResult.isError ? "Search failed" : songSearchResult.settled && songSearchResult.songs.length === 0 ? "No songs found" : "",
+    loading: songSearchResult.pending
+  } : void 0;
+  const extraGroups = [artistGroup, songGroup].filter((group) => group !== void 0);
   const handleSelectedNodeChange = (node) => {
+    if (node !== null && songUuid !== null) changeSong(null);
     selectNode(node);
   };
   const handleGenreSearchClear = clearSelection;
   const handleGenreSearchSelect = (genrePlaylist) => {
+    if (songUuid !== null) changeSong(null);
     selectGenrePlaylist(genrePlaylist);
   };
   const selectedUuid = selectedGenrePlaylist?.uuid;
@@ -2688,13 +2970,13 @@ function GenreTreeView({
   const handleGenreSearchZoomIn = () => {
     if (selectedUuid) focus.onFocusGenreChange?.(selectedUuid, "zoom-in");
   };
-  const zoomInRef = (0, import_react15.useRef)(void 0);
+  const zoomInRef = (0, import_react17.useRef)(void 0);
   zoomInRef.current = canZoomIn ? handleGenreSearchZoomIn : void 0;
-  const renderInfoPanelBody = (0, import_react15.useCallback)(
+  const renderInfoPanelBody = (0, import_react17.useCallback)(
     (node, { toolbar, ancestors, family }) => {
       const genrePlaylist = genrePlaylistByNodeId.get(node.id);
       const criteria = genrePlaylist?.criteria;
-      if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+      if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
         toolbar,
         family
       ] }), aside: ancestors };
@@ -2714,7 +2996,7 @@ function GenreTreeView({
         (sibling) => sibling.parent?.uuid === parentPlaylist.uuid && sibling.uuid !== genrePlaylist.uuid && sibling.criteria?.side === "pop"
       ) : void 0;
       return {
-        primary: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        primary: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           GenreInfoPanelBody,
           {
             toolbar,
@@ -2733,7 +3015,7 @@ function GenreTreeView({
               onAddChild: readOnly ? void 0 : () => handleGenreCreationAction(criteria),
               onRename: readOnly ? void 0 : () => handleGenreRenameAction(criteria),
               onChangeParent: readOnly ? void 0 : () => showPopup(
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   ChangeParentPopup,
                   {
                     genrePlaylist: { ...genrePlaylist, criteria },
@@ -2754,6 +3036,7 @@ function GenreTreeView({
               criteriaOverviewSchema,
               renderGenreDetailExtras,
               renderArtistLink,
+              renderSongLink: resolvedRenderSongLink,
               artist: filterArtist,
               renderSummary,
               renderEssentialTracks,
@@ -2784,6 +3067,7 @@ function GenreTreeView({
       criteriaOverviewSchema,
       renderGenreDetailExtras,
       renderArtistLink,
+      resolvedRenderSongLink,
       renderSummary,
       renderEssentialTracks,
       renderSongLeading,
@@ -2793,7 +3077,7 @@ function GenreTreeView({
   );
   const isRotationControlled = controlledAllowWheelRotation !== void 0;
   const allowWheelRotation = controlledAllowWheelRotation ?? internalAllowWheelRotation;
-  const detailTab = placement === "regions" && (hasSelectedGenreNode || detailOverlay) ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  const detailTab = placement === "regions" && (hasSelectedGenreNode || detailOverlay) ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     PanelEdgeTab,
     {
       side: "left",
@@ -2803,8 +3087,8 @@ function GenreTreeView({
   ) : null;
   const renderArtistFilter = () => {
     if (isLoading || !filterArtist) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "button",
         {
           type: "button",
@@ -2816,7 +3100,7 @@ function GenreTreeView({
           children: filterArtist.name
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "button",
         {
           type: "button",
@@ -2828,23 +3112,23 @@ function GenreTreeView({
       )
     ] });
   };
-  const actions = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  const actions = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       GenreSearch,
       {
         genrePlaylists: visibleGenrePlaylists,
         onSelect: handleGenreSearchSelect,
-        selectedName: selectedGenrePlaylist?.name ?? builtInArtistPanel?.title ?? null,
-        onClear: builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
+        selectedName: selectedGenrePlaylist?.name ?? builtInPanel?.title ?? null,
+        onClear: builtInSongPanel ? () => changeSong(null) : builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
         onPrevious: handlePrevious,
-        onQueryChange: artistSearch ? setSearchText : void 0,
-        extraResults: artistExtraResults
+        onQueryChange: artistSearch || songSearch ? setSearchText : void 0,
+        extraGroups
       }
     ),
-    !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "contents max-md:flex max-md:w-full max-md:items-center max-md:gap-2 max-md:overflow-x-auto max-md:[scrollbar-width:none] max-md:[&>*]:shrink-0", children: [
-      !isLoading && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-        import_ui16.SegmentedControl,
+    !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "contents max-md:flex max-md:w-full max-md:items-center max-md:gap-2 max-md:overflow-x-auto max-md:[scrollbar-width:none] max-md:[&>*]:shrink-0", children: [
+      !isLoading && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        import_ui18.SegmentedControl,
         {
           "aria-label": "Tree view mode",
           value: viewMode,
@@ -2857,14 +3141,14 @@ function GenreTreeView({
           ]
         }
       ),
-      !isLoading && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      !isLoading && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "div",
         {
           className: "flex items-center gap-1",
           role: "group",
           "aria-label": "Tree display options",
-          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            import_ui16.Button,
+          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            import_ui18.Button,
             {
               variant: allowWheelRotation ? "default" : "outline",
               size: "sm",
@@ -2874,52 +3158,52 @@ function GenreTreeView({
           )
         }
       ),
-      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-        import_ui16.IconTextButton,
+      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        import_ui18.IconTextButton,
         {
-          icon: import_lucide_react15.Plus,
+          icon: import_lucide_react16.Plus,
           text: "Add root",
           onClick: () => handleGenreCreationAction(null)
         }
       )
     ] })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "div",
     {
       ref: rootRef,
       className: ["genre-tree-view relative flex flex-col h-full", placement === "regions" && REGIONS_CLASS, className2].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("style", { children: PREVIOUS_BUTTON_CSS }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("style", { children: PREVIOUS_BUTTON_CSS }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "div",
           {
             className: `actions-container absolute z-30 flex items-center gap-2 ${placement === "regions" ? "left-[calc(var(--layout-gutter)+var(--layout-panel-inset))] top-[calc(var(--layout-gutter)+var(--layout-panel-inset))] max-md:right-[calc(var(--layout-gutter)+var(--layout-panel-inset))] max-md:top-[var(--layout-band-top)] max-md:flex-col max-md:items-stretch" : "left-5 top-5"}`,
             children: actions
           }
         ),
-        !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "div",
           {
             className: `absolute left-1/2 z-30 hidden -translate-x-1/2 md:block ${placement === "regions" ? "top-[calc(var(--layout-gutter)+var(--layout-panel-inset))]" : "top-5"}`,
             children: renderArtistFilter()
           }
         ),
-        detailTab && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        detailTab && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "div",
           {
             className: `absolute top-1/2 z-30 -translate-y-1/2 max-md:hidden transition-[opacity,visibility] duration-150 ease-out ${isTreeReady ? "opacity-100" : "pointer-events-none invisible opacity-0"} ${detailExpanded ? "right-[calc(var(--layout-center-right)-var(--layout-edge-tab-w))]" : isCollapsed ? "left-0" : "left-[calc(var(--layout-gutter)+var(--layout-left-w))]"}`,
             children: detailTab
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
-          !isLoading && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
-          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_genre_tree_view4.GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
+          !isLoading && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
+          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_genre_tree_view4.GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
             // The info panel's top edge aligns with the tree's; the search bar floats `--layout-panel-inset` below it,
             // and the header inset (the bar's height plus that inset) extends the header's fill behind the bar,
             // Google Maps style; the 8px bottom padding mirrors the inset above the bar, and the hidden title's height is zeroed.
             // The panel's own Zoom in button is hidden: the search bar carries it.
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               GenrePlaylistTreeWheel,
               {
                 scope,
@@ -2938,9 +3222,9 @@ function GenreTreeView({
                 allowWheelRotation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
                 viewportRestore,
@@ -2950,7 +3234,7 @@ function GenreTreeView({
             ) }) })
           ) : viewMode === "pop-core" ? (
             // Same as the wheel: the header inset extends its fill behind the floating search bar, Google Maps style.
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden [&_.gtv-info-panel-zoom-in]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem))] [&_.gtv-info-panel-header]:pb-2 [&_.gtv-info-panel-title--hidden]:h-0 [&_.gtv-toolbar]:hidden [&_.gtv-info-panel-zoom-in]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_genre_tree_view4.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               GenrePlaylistTreeWheelRadialPopCore,
               {
                 scope,
@@ -2969,9 +3253,9 @@ function GenreTreeView({
                 allowWheelRotation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
                 viewportRestore,
@@ -2980,7 +3264,7 @@ function GenreTreeView({
                 ...focus
               }
             ) }) })
-          ) : viewMode === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem)+0.75rem)] [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          ) : viewMode === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative [--gtv-info-panel-header-inset:calc(var(--layout-search-h,2.5rem)+var(--layout-panel-inset,0.5rem)+0.75rem)] [&_.gtv-toolbar]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             GenrePlaylistTreeWheelRadialPopCore,
             {
               outline: true,
@@ -2999,13 +3283,13 @@ function GenreTreeView({
               readOnly,
               ...infoPanelCuration
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tree-container relative flex flex-col gap-4 w-full pt-14 overflow-x-auto overflow-y-auto text-[var(--color-text)] [&_.gtv-toolbar]:hidden", children: Object.entries(groupedGenrePlaylistsByRoot).map(
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "tree-container relative flex flex-col gap-4 w-full pt-14 overflow-x-auto overflow-y-auto text-[var(--color-text)] [&_.gtv-toolbar]:hidden", children: Object.entries(groupedGenrePlaylistsByRoot).map(
             ([uuid, genrePlaylistTreePerRoot], rootIndex) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 "div",
                 {
                   className: "tree-per-root-container relative shrink-0 h-[28rem] mt-2 mr-16 p-2 bg-[var(--color-neutral-100)] rounded-lg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                     GenrePlaylistTreePerRoot,
                     {
                       scope,
@@ -3042,11 +3326,11 @@ function GenreTreeView({
 }
 
 // src/genre-tree/GenreDetailPanel.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_genre_tree_view5 = require("@behindthemusictree/genre-tree-view");
-var import_ui17 = require("@behindthemusictree/ui");
-var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_ui19 = require("@behindthemusictree/ui");
+var import_genre_tree20 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var ITEM_COUNT_LABEL = "Songs";
 var RELATIVE_ITEM_COUNT = 1;
 function toNode(genre, parentId) {
@@ -3073,9 +3357,9 @@ function GenreDetailPanel({
   onExpandedChange,
   extras
 }) {
-  const { data: detail, isPending, isError } = (0, import_genre_tree18.useFetchGenreDetail)(genreUuid, scope, getBackendBaseUrl);
+  const { data: detail, isPending, isError } = (0, import_genre_tree20.useFetchGenreDetail)(genreUuid, scope, getBackendBaseUrl);
   const playback = useGenrePlaylistPlayback({ scope, genrePlaylists: [] });
-  const view = (0, import_react16.useMemo)(() => {
+  const view = (0, import_react18.useMemo)(() => {
     if (!detail) return null;
     const rootColor = (0, import_genre_tree_view5.getGenreTreeColor)(detail.root.wikidataId);
     const relative = (genre, parentId) => ({
@@ -3101,17 +3385,17 @@ function GenreDetailPanel({
     };
   }, [detail]);
   if (isError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." });
   }
   if (isPending || !detail || !view) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui17.Skeleton, { className: "h-6 w-2/3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui17.Skeleton, { className: "h-4 w-full" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui17.Skeleton, { className: "h-4 w-3/4" })
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui19.Skeleton, { className: "h-6 w-2/3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui19.Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui19.Skeleton, { className: "h-4 w-3/4" })
     ] });
   }
   const renderBody = (node, sections) => ({
-    primary: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    primary: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       GenreInfoPanelBody,
       {
         toolbar: sections.toolbar,
@@ -3128,7 +3412,7 @@ function GenreDetailPanel({
     ),
     aside: null
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     import_genre_tree_view5.InfoPanel,
     {
       node: view.node,
@@ -3154,13 +3438,13 @@ function GenreDetailPanel({
 var import_genre_tree_view6 = require("@behindthemusictree/genre-tree-view");
 
 // src/genre-tree/track-list-sidebar/TrackListSidebar.tsx
-var import_react17 = require("react");
-var import_lucide_react16 = require("lucide-react");
-var import_genre_tree19 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree20 = require("@behindthemusictree/app-kit/genre-tree");
+var import_react19 = require("react");
+var import_lucide_react17 = require("lucide-react");
+var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
 var import_track_noun7 = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var useBrowserLayoutEffect = typeof window === "undefined" ? import_react17.useEffect : import_react17.useLayoutEffect;
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var useBrowserLayoutEffect = typeof window === "undefined" ? import_react19.useEffect : import_react19.useLayoutEffect;
 function TrackListSidebar({
   className: className2 = "",
   renderDuration,
@@ -3169,20 +3453,21 @@ function TrackListSidebar({
   isCollapsed = false,
   onExpand,
   onMinimize,
-  renderArtistLink
+  renderArtistLink,
+  renderSongLink
 }) {
-  const { trackList, loadMore, autoAdvanceScrollRequest } = (0, import_genre_tree19.useTrackList)();
+  const { trackList, loadMore, autoAdvanceScrollRequest } = (0, import_genre_tree21.useTrackList)();
   const trackNoun = (0, import_track_noun7.useTrackNoun)();
-  const trackListRef = (0, import_react17.useRef)(null);
-  const previousOriginRef = (0, import_react17.useRef)(trackList?.origin ?? null);
-  const handledAutoAdvanceRequestIdRef = (0, import_react17.useRef)(null);
-  const shouldFollowPlaybackRef = (0, import_react17.useRef)(true);
-  const programmaticScrollTopRef = (0, import_react17.useRef)(null);
-  const userScrollIntentRef = (0, import_react17.useRef)(false);
-  const userScrollIntentTimerRef = (0, import_react17.useRef)(null);
-  const loadMoreSentinelRef = (0, import_react17.useRef)(null);
+  const trackListRef = (0, import_react19.useRef)(null);
+  const previousOriginRef = (0, import_react19.useRef)(trackList?.origin ?? null);
+  const handledAutoAdvanceRequestIdRef = (0, import_react19.useRef)(null);
+  const shouldFollowPlaybackRef = (0, import_react19.useRef)(true);
+  const programmaticScrollTopRef = (0, import_react19.useRef)(null);
+  const userScrollIntentRef = (0, import_react19.useRef)(false);
+  const userScrollIntentTimerRef = (0, import_react19.useRef)(null);
+  const loadMoreSentinelRef = (0, import_react19.useRef)(null);
   const hasMore = !!trackList && trackList.nextPage !== null;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const sentinel = loadMoreSentinelRef.current;
     if (!hasMore || !sentinel) return;
     const observer = new IntersectionObserver((entries) => {
@@ -3202,11 +3487,11 @@ function TrackListSidebar({
     programmaticScrollTopRef.current = null;
     if (trackListRef.current) trackListRef.current.scrollTop = 0;
   }, [trackList?.origin]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const list = trackListRef.current;
     if (!isCollapsed && list?.scrollTop === 0) shouldFollowPlaybackRef.current = true;
   }, [isCollapsed]);
-  (0, import_react17.useEffect)(
+  (0, import_react19.useEffect)(
     () => () => {
       if (userScrollIntentTimerRef.current !== null) clearTimeout(userScrollIntentTimerRef.current);
     },
@@ -3260,25 +3545,25 @@ function TrackListSidebar({
     }
   };
   const positionClasses = layout === "inline" ? "relative w-full flex h-full flex-col" : "fixed right-0 w-[50rem] flex flex-col";
-  return trackList ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return trackList ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
       "data-theme": "dark",
       className: `track-list-sidebar ${positionClasses} rounded-2xl bg-[var(--color-surface)] pb-1 ${className2}`,
       style: layout === "fixed" ? { top: "63.5px", maxHeight: "calc(100vh - 63.5px - 79px)" } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "origin flex text-xl", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "name-container flex flex-col justify-center items-center text-[var(--color-text)] font-bold pr-2 max-w-[27.5rem]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "origin flex text-xl", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "name-container flex flex-col justify-center items-center text-[var(--color-text)] font-bold pr-2 max-w-[27.5rem]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "info flex items-center text-sm text-[var(--color-text-muted)]", children: [
-              trackList.origin.type === import_genre_tree20.TrackListOriginType.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === import_genre_tree20.TrackListOriginType.ARTIST ? "Artist \u2022 " : `${trackNoun.singular} playlist \u2022 `,
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "info flex items-center text-sm text-[var(--color-text-muted)]", children: [
+              trackList.origin.type === import_genre_tree22.TrackListOriginType.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === import_genre_tree22.TrackListOriginType.ARTIST ? "Artist \u2022 " : `${trackNoun.singular} playlist \u2022 `,
               `${trackList.total} ${trackList.total > 1 ? trackNoun.plural : trackNoun.singular}`
             ] })
           ] }),
-          (isCollapsed && onExpand || !isCollapsed && onMinimize) && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          (isCollapsed && onExpand || !isCollapsed && onMinimize) && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             "button",
             {
               type: "button",
@@ -3287,11 +3572,11 @@ function TrackListSidebar({
               "aria-expanded": !isCollapsed,
               className: `ml-2 flex h-8 w-8 shrink-0 items-center justify-center rounded-md hover:bg-[var(--color-surface-muted)] ${isCollapsed ? "text-[var(--color-text-muted)]" : "text-white"}`,
               onClick: isCollapsed ? onExpand : onMinimize,
-              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react16.ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react17.ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
             }
           )
         ] }),
-        !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+        !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           "ul",
           {
             ref: trackListRef,
@@ -3301,17 +3586,18 @@ function TrackListSidebar({
             onPointerDown: markUserScrollIntent,
             className: layout === "inline" ? "track-list flex-1 min-h-0 overflow-auto list-none p-0 m-0" : "track-list flex-1 min-h-0 overflow-auto list-none p-0 m-0",
             children: [
-              trackList.tracks.map((track, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              trackList.tracks.map((track, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 TrackItem,
                 {
                   track,
                   position: index + 1,
                   renderDuration,
                   renderActions,
-                  renderArtistLink
+                  renderArtistLink,
+                  renderSongLink
                 }
               ) }, track.uuid)),
-              hasMore && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
+              hasMore && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
             ]
           }
         )
@@ -3321,16 +3607,16 @@ function TrackListSidebar({
 }
 
 // src/genre-tree/PlayerPanel.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_tailwind_merge2 = require("tailwind-merge");
-var import_player12 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
+var import_player13 = require("@behindthemusictree/app-kit/player");
+var import_genre_tree24 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/PlayerControls.tsx
-var import_lucide_react17 = require("lucide-react");
-var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
-var import_player11 = require("@behindthemusictree/app-kit/player");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_lucide_react18 = require("lucide-react");
+var import_genre_tree23 = require("@behindthemusictree/app-kit/genre-tree");
+var import_player12 = require("@behindthemusictree/app-kit/player");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function PlayerControls() {
   const {
     duration,
@@ -3341,23 +3627,23 @@ function PlayerControls() {
     seekTo,
     setVolume,
     volume
-  } = (0, import_player11.usePlayer)();
-  const { hasNextTrack, hasPreviousTrack, playNextTrack, playPreviousTrack } = (0, import_genre_tree21.useTrackList)();
-  const currentTime = (0, import_player11.useCurrentTime)();
-  const isBusy = isLoading || playState === import_player11.PlayStates.LOADING;
+  } = (0, import_player12.usePlayer)();
+  const { hasNextTrack, hasPreviousTrack, playNextTrack, playPreviousTrack } = (0, import_genre_tree23.useTrackList)();
+  const currentTime = (0, import_player12.useCurrentTime)();
+  const isBusy = isLoading || playState === import_player12.PlayStates.LOADING;
   const isReady = !!playerTrackObject?.isReady && !isBusy && !playerTrackObject.loadError;
   const safeDuration = Number.isFinite(duration) && duration > 0 ? duration : 0;
   const safeCurrentTime = Number.isFinite(currentTime) ? Math.max(0, Math.min(currentTime, safeDuration)) : 0;
-  const isPlaying = playState === import_player11.PlayStates.PLAYING;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  const isPlaying = playState === import_player12.PlayStates.PLAYING;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "section",
     {
       "aria-label": "Player controls",
       className: "player-controls flex shrink-0 flex-col gap-2 border-b border-zinc-800 px-3 py-2 text-zinc-200",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "aria-label": "Elapsed time", children: (0, import_genre_tree21.formatTime)(safeCurrentTime) }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-label": "Elapsed time", children: (0, import_genre_tree23.formatTime)(safeCurrentTime) }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "input",
             {
               "aria-label": "Seek",
@@ -3371,11 +3657,11 @@ function PlayerControls() {
               onChange: (event) => seekTo(Number(event.currentTarget.value))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "aria-label": "Duration", children: (0, import_genre_tree21.formatTime)(safeDuration) })
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-label": "Duration", children: (0, import_genre_tree23.formatTime)(safeDuration) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "button",
               {
                 type: "button",
@@ -3384,10 +3670,10 @@ function PlayerControls() {
                 disabled: !isReady || !hasPreviousTrack,
                 onClick: playPreviousTrack,
                 className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-zinc-300 hover:bg-zinc-800 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",
-                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react18.SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "button",
               {
                 type: "button",
@@ -3396,10 +3682,10 @@ function PlayerControls() {
                 disabled: !isReady,
                 onClick: handlePlayPauseAction,
                 className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white text-zinc-950 hover:bg-zinc-200 disabled:cursor-not-allowed disabled:opacity-40",
-                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.Pause, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.Play, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
+                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react18.Pause, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react18.Play, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "button",
               {
                 type: "button",
@@ -3408,14 +3694,14 @@ function PlayerControls() {
                 disabled: !isReady || !hasNextTrack,
                 onClick: playNextTrack,
                 className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-zinc-300 hover:bg-zinc-800 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",
-                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react18.SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("label", { className: "col-start-3 flex w-[4.2rem] shrink-0 items-center gap-[0.35rem] justify-self-end text-zinc-400 sm:w-[4.9rem]", children: [
-            volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "sr-only", children: "Volume" }),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("label", { className: "col-start-3 flex w-[4.2rem] shrink-0 items-center gap-[0.35rem] justify-self-end text-zinc-400 sm:w-[4.9rem]", children: [
+            volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react18.VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react18.Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "sr-only", children: "Volume" }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "input",
               {
                 "aria-label": "Volume",
@@ -3437,7 +3723,7 @@ function PlayerControls() {
 }
 
 // src/genre-tree/PlayerPanel.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var PANEL_ID = "player-panel";
 var DEFAULT_EXTENDED_WIDTH = "calc(100vw - var(--layout-center-left) - var(--layout-gutter))";
 function PlayerPanel({
@@ -3446,16 +3732,17 @@ function PlayerPanel({
   expanded,
   onExpandedChange,
   extendedWidth = DEFAULT_EXTENDED_WIDTH,
-  renderArtistLink
+  renderArtistLink,
+  renderSongLink
 }) {
-  const { playerTrackObject } = (0, import_player12.usePlayer)();
-  const { toggleTrackListSidebar, isTrackListSidebarVisible } = (0, import_genre_tree22.useTrackListSidebarVisibility)();
-  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = (0, import_react18.useState)("");
+  const { playerTrackObject } = (0, import_player13.usePlayer)();
+  const { toggleTrackListSidebar, isTrackListSidebarVisible } = (0, import_genre_tree24.useTrackListSidebarVisibility)();
+  const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = (0, import_react20.useState)("");
   const loadedTrackTitle = playerTrackObject?.track.title;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (loadedTrackTitle) setLastLoadedTrackTitle(loadedTrackTitle);
   }, [loadedTrackTitle]);
-  const [uncontrolledExtended, setUncontrolledExtended] = (0, import_react18.useState)(false);
+  const [uncontrolledExtended, setUncontrolledExtended] = (0, import_react20.useState)(false);
   const isExtendRequested = expanded ?? uncontrolledExtended;
   const setIsExtendRequested = (next) => {
     setUncontrolledExtended(next);
@@ -3476,7 +3763,7 @@ function PlayerPanel({
     onClick: () => setIsExtendRequested(true),
     expanded: false
   } : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       id: PANEL_ID,
@@ -3489,7 +3776,7 @@ function PlayerPanel({
       ),
       style: isExtended ? { width: extendedWidth } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           PanelEdgeTab,
           {
             side: "right",
@@ -3499,7 +3786,7 @@ function PlayerPanel({
             className: "absolute right-full top-1/2 -translate-y-1/2"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           "div",
           {
             className: (0, import_tailwind_merge2.twMerge)(
@@ -3507,15 +3794,15 @@ function PlayerPanel({
               isExtended ? "flex-row" : "flex-col"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "relative w-full shrink-0", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_player12.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
-                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "relative w-full shrink-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_player13.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
+                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PlayerControls, {})
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PlayerControls, {})
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 TrackListSidebar,
                 {
                   layout: "inline",
@@ -3526,7 +3813,8 @@ function PlayerPanel({
                     "min-h-0 min-w-0 flex-1",
                     isExtended && "border-l border-zinc-800"
                   ),
-                  renderArtistLink
+                  renderArtistLink,
+                  renderSongLink
                 }
               )
             ]
@@ -3540,33 +3828,33 @@ function PlayerPanel({
 // src/genre-tree/Rating.tsx
 var import_uuid = require("uuid");
 var import_ai = require("react-icons/ai");
-var import_genre_tree23 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_genre_tree25 = require("@behindthemusictree/app-kit/genre-tree");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Rating({ rating, handleChange }) {
   const instanceId = (0, import_uuid.v4)();
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "input",
       {
         id: `star-${instanceId}-${i}`,
         className: "w-6 h-6 opacity-0",
         type: "radio",
         name: "rating",
-        value: i === 0 ? import_genre_tree23.FORM_RATING_NULL_VALUE : i,
+        value: i === 0 ? import_genre_tree25.FORM_RATING_NULL_VALUE : i,
         checked: rating === (i === 0 ? null : i),
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         import_ai.AiOutlineStar,
         {
-          className: `w-7 h-7 absolute top-0 left-0 ${rating === import_genre_tree23.FORM_RATING_NULL_VALUE ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
+          className: `w-7 h-7 absolute top-0 left-0 ${rating === import_genre_tree25.FORM_RATING_NULL_VALUE ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "flex-grow w-8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "flex-grow w-8" }),
       " "
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       import_ai.AiFillStar,
       {
         className: `w-7 h-7 absolute top-0 left-0 ${(rating ?? -1) >= i ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`