@behindthemusictree/app-kit-ui 33.2.0 → 34.0.0

package/dist/index.cjs

@@ -593,13 +593,14 @@ var import_lucide_react15 = require("lucide-react");
 var import_lucide_react16 = require("lucide-react");
 var import_ui19 = require("@behindthemusictree/ui");
 var import_genre_tree_view4 = require("@behindthemusictree/genre-tree-view");
-var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree27 = require("@behindthemusictree/app-kit/genre-tree");
 var import_popup6 = require("@behindthemusictree/app-kit/popup");
 
 // src/genre-tree/playlist-tree/size-metric.ts
+var import_genre_tree = require("@behindthemusictree/app-kit/genre-tree");
 var hasViewsCount = (genrePlaylists) => genrePlaylists.every((genrePlaylist) => genrePlaylist.viewsCount !== void 0);
 var genrePlaylistSize = (genrePlaylist, metric) => {
-  if (metric === "songs") return genrePlaylist.tracksCount;
+  if (metric === "songs") return (0, import_genre_tree.genrePlaylistTrackCount)(genrePlaylist);
   if (genrePlaylist.viewsCount === void 0) {
     throw new Error(`Genre playlist ${genrePlaylist.uuid} has no viewsCount to size by views`);
   }
@@ -623,6 +624,7 @@ function toTreeNodes(genrePlaylists, sizeMetric) {
 }
 
 // src/genre-tree/playlist-tree/TreePerRoot.tsx
+var import_genre_tree3 = require("@behindthemusictree/app-kit/genre-tree");
 var import_react4 = require("react");
 var import_genre_tree_view = require("@behindthemusictree/genre-tree-view");
 var import_player = require("@behindthemusictree/app-kit/player");
@@ -631,29 +633,28 @@ var import_transport3 = require("@behindthemusictree/app-kit/transport");
 
 // src/genre-tree/playlist-tree/useGenrePlaylistPlayback.ts
 var import_react3 = require("react");
-var import_genre_tree = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree2 = require("@behindthemusictree/app-kit/genre-tree");
 function useGenrePlaylistPlayback({
   scope,
   genrePlaylists,
   artist = null
 }) {
-  const { trackList, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = (0, import_genre_tree.useTrackList)();
+  const { trackList, playNewTrackListFromGenrePlaylist } = (0, import_genre_tree2.useTrackList)();
   const origin = trackList?.origin;
   const playingNodeId = (0, import_react3.useMemo)(() => {
-    if (!origin) return null;
-    if (!artist) return origin.type === import_genre_tree.TrackListOriginType.GENRE_PLAYLIST ? origin.uuid : null;
-    if (origin.type !== import_genre_tree.TrackListOriginType.ARTIST || origin.uuid !== artist.uuid) return null;
-    const { genreUuid } = origin;
-    return genreUuid ? genrePlaylists.find((gp) => gp.criteria?.uuid === genreUuid)?.uuid ?? null : null;
-  }, [origin, artist, genrePlaylists]);
-  const play = (0, import_react3.useCallback)(
-    async (genrePlaylist) => {
-      if (!artist) return playNewTrackListFromGenrePlaylist(genrePlaylist, scope);
-      if (!genrePlaylist.criteria) return;
-      return playNewTrackListFromArtist(artist, scope, { ordering: "title", genreUuid: genrePlaylist.criteria.uuid });
-    },
-    [artist, scope, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist]
-  );
+    if (!origin || origin.type !== import_genre_tree2.TrackListOriginType.GENRE_PLAYLIST || origin.scope !== scope) return null;
+    const playlistOrigin = origin;
+    if (playlistOrigin.artistUuid !== artist?.uuid) return null;
+    const playlist = genrePlaylists.find((item) => item.uuid === origin.uuid) ?? playlistOrigin.criteriaPlaylist;
+    const expected = scope === "reference" && playlist && !("criteria" in playlist && playlist.criteria === null) ? (0, import_genre_tree2.defaultGenreMusicSelection)(import_genre_tree2.GenreCatalogueCountsSchema.parse(playlist)) : void 0;
+    if (playlistOrigin.selection && expected && (0, import_genre_tree2.genreMusicSelectionKey)(playlistOrigin.selection).join() !== (0, import_genre_tree2.genreMusicSelectionKey)(expected).join()) return null;
+    return origin.uuid;
+  }, [origin, artist, genrePlaylists, scope]);
+  const play = (0, import_react3.useCallback)(async (playlist) => {
+    if (artist && !playlist.criteria) return;
+    const selection = scope === "reference" && playlist.criteria !== null ? (0, import_genre_tree2.defaultGenreMusicSelection)(import_genre_tree2.GenreCatalogueCountsSchema.parse(playlist)) : void 0;
+    return selection || artist ? playNewTrackListFromGenrePlaylist(playlist, scope, { selection, ...artist && { artistUuid: artist.uuid } }) : playNewTrackListFromGenrePlaylist(playlist, scope);
+  }, [artist, scope, playNewTrackListFromGenrePlaylist]);
   return (0, import_react3.useMemo)(() => ({ playingNodeId, play }), [playingNodeId, play]);
 }
 
@@ -688,7 +689,7 @@ function GenrePlaylistTreePerRoot({
       id: genrePlaylist.uuid,
       parentId: genrePlaylist.parent?.uuid ?? null,
       name: genrePlaylist.name,
-      itemCount: genrePlaylist.tracksCount,
+      itemCount: (0, import_genre_tree3.genrePlaylistTrackCount)(genrePlaylist),
       actionable: Boolean(genrePlaylist.criteria),
       side: genrePlaylist.criteria?.side ?? void 0,
       wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
@@ -704,7 +705,7 @@ function GenrePlaylistTreePerRoot({
         setIsPlaying(!isPlaying);
         return;
       }
-      if (genrePlaylist.tracksCount === 0) {
+      if ((0, import_genre_tree3.genrePlaylistTrackCount)(genrePlaylist) === 0) {
         return;
       }
       play(genrePlaylist).catch((error) => {
@@ -768,6 +769,7 @@ function GenrePlaylistTreePerRoot({
 }
 
 // src/genre-tree/playlist-tree/TreeWheel.tsx
+var import_genre_tree4 = require("@behindthemusictree/app-kit/genre-tree");
 var import_react5 = require("react");
 var import_genre_tree_view2 = require("@behindthemusictree/genre-tree-view");
 var import_player2 = require("@behindthemusictree/app-kit/player");
@@ -820,7 +822,7 @@ function GenrePlaylistTreeWheel({
         setIsPlaying(!isPlaying);
         return;
       }
-      if (genrePlaylist.tracksCount === 0) {
+      if ((0, import_genre_tree4.genrePlaylistTrackCount)(genrePlaylist) === 0) {
         return;
       }
       play(genrePlaylist).catch((error) => {
@@ -885,6 +887,7 @@ function GenrePlaylistTreeWheel({
 }
 
 // src/genre-tree/playlist-tree/TreeWheelRadialPopCore.tsx
+var import_genre_tree5 = require("@behindthemusictree/app-kit/genre-tree");
 var import_react6 = require("react");
 var import_genre_tree_view3 = require("@behindthemusictree/genre-tree-view");
 var import_player3 = require("@behindthemusictree/app-kit/player");
@@ -929,7 +932,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
         setIsPlaying(!isPlaying);
         return;
       }
-      if (genrePlaylist.tracksCount === 0) {
+      if ((0, import_genre_tree5.genrePlaylistTrackCount)(genrePlaylist) === 0) {
         return;
       }
       play(genrePlaylist).catch((error) => {
@@ -1027,7 +1030,7 @@ function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
 // src/genre-tree/GenreSearch.tsx
 var import_lucide_react7 = require("lucide-react");
 var import_ui7 = require("@behindthemusictree/ui");
-var import_genre_tree5 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree9 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/search/SearchBox.tsx
 var import_react8 = require("react");
@@ -1083,10 +1086,10 @@ var SEARCH_FAILED_STATUS = "Search failed";
 var searchStatus = (state, count, noun) => state.isError ? SEARCH_FAILED_STATUS : state.settled && count === 0 ? `No ${noun} found` : "";
 
 // src/genre-tree/search/useArtistSearchGroup.tsx
-var import_genre_tree2 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree6 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function useArtistSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
-  const search = (0, import_genre_tree2.useArtistSearch)(getBaseUrl, enabled ? text : "");
+  const search = (0, import_genre_tree6.useArtistSearch)(getBaseUrl, enabled ? text : "");
   if (!enabled) return void 0;
   return {
     key: "artists",
@@ -1114,17 +1117,17 @@ function useArtistSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
 }
 
 // src/genre-tree/search/useSongSearchGroup.tsx
-var import_genre_tree3 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree7 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function useSongSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
-  const search = (0, import_genre_tree3.useSongSearch)(getBaseUrl, enabled ? text : "");
+  const search = (0, import_genre_tree7.useSongSearch)(getBaseUrl, enabled ? text : "");
   if (!enabled) return void 0;
   return {
     key: "songs",
     label: "Songs",
     items: search.songs.map((song) => ({
       key: song.uuid,
-      content: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: (0, import_genre_tree3.isSongSearchResultPlayable)(song) ? void 0 : "opacity-60", children: [
+      content: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: (0, import_genre_tree7.isSongSearchResultPlayable)(song) ? void 0 : "opacity-60", children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "block truncate font-medium", children: song.title }),
         /* @__PURE__ */ (0, import_jsx_runtime18.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 ") })
       ] }),
@@ -1136,10 +1139,10 @@ function useSongSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
 }
 
 // src/genre-tree/search/useGenreRemoteSearchGroup.tsx
-var import_genre_tree4 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree8 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function useGenreRemoteSearchGroup(getBaseUrl, text, onSelect, { key = "genres", label = "Genres", filter, describe, ...options } = {}) {
-  const search = (0, import_genre_tree4.useGenreRemoteSearch)(getBaseUrl, text, options);
+  const search = (0, import_genre_tree8.useGenreRemoteSearch)(getBaseUrl, text, options);
   const genres = filter ? search.genres.filter(filter) : search.genres;
   return {
     key,
@@ -1173,7 +1176,7 @@ function GenreSearch({
   extraGroups = [],
   onFocus
 }) {
-  const { query, setQuery, results, canClear, clear, select } = (0, import_genre_tree5.useGenreSearch)({
+  const { query, setQuery, results, canClear, clear, select } = (0, import_genre_tree9.useGenreSearch)({
     genrePlaylists,
     onSelect,
     selectedName,
@@ -1225,6 +1228,8 @@ function GenreSearch({
 }
 
 // src/genre-tree/GenreInfoPanelBody.tsx
+var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
+var import_track_noun4 = require("@behindthemusictree/app-kit/track-noun");
 var import_player6 = require("@behindthemusictree/app-kit/player");
 
 // src/genre-tree/GenreActionBand.tsx
@@ -1547,7 +1552,7 @@ function GenreActionBand({
 
 // src/genre-tree/GenreDetailExtras.tsx
 var import_ui9 = require("@behindthemusictree/ui");
-var import_genre_tree12 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree17 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/ClampedText.tsx
 var import_react10 = require("react");
@@ -1590,20 +1595,21 @@ var import_player4 = require("@behindthemusictree/app-kit/player");
 var import_player5 = require("@behindthemusictree/app-kit/player");
 var import_popup5 = require("@behindthemusictree/app-kit/popup");
 var import_transport8 = require("@behindthemusictree/app-kit/transport");
-var import_genre_tree7 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree8 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree9 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree10 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree11 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree12 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree13 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree14 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree15 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/MusicBrainzRecordingLink.tsx
-var import_genre_tree6 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree10 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function MusicBrainzRecordingLink({
   song,
   children,
   className: className2 = ""
 }) {
-  const url = (0, import_genre_tree6.musicBrainzRecordingUrl)(song);
+  const url = (0, import_genre_tree10.musicBrainzRecordingUrl)(song);
   if (!url) return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "a",
@@ -1620,11 +1626,11 @@ function MusicBrainzRecordingLink({
 }
 
 // src/genre-tree/GenrePlaylistTracks.tsx
-var import_genre_tree11 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree16 = require("@behindthemusictree/app-kit/genre-tree");
 var import_track_noun2 = require("@behindthemusictree/app-kit/track-noun");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var CATALOGUE_PAGE_SIZE = 100;
-var SongPageSchema = (0, import_transport6.PaginatedResponseSchema)(import_genre_tree9.SongDetailedSchema).extend({
+var SongPageSchema = (0, import_transport6.PaginatedResponseSchema)(import_genre_tree14.SongDetailedSchema).extend({
   overallTotal: import_zod.z.number().nullable(),
   page: import_zod.z.number().nullable(),
   totalPages: import_zod.z.number().nullable()
@@ -1642,6 +1648,7 @@ var nextCursor = (next) => {
 function GenrePlaylistTracks({
   genreUuid,
   genrePlaylist,
+  selection,
   scope,
   getBackendBaseUrl,
   renderArtistLink,
@@ -1651,7 +1658,7 @@ function GenrePlaylistTracks({
   renderTracksToolbar,
   artist = null
 }) {
-  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = (0, import_genre_tree10.useTrackList)();
+  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist, playNewTrackListFromGenreCatalogue } = (0, import_genre_tree15.useTrackList)();
   const { session, sessionRestored } = (0, import_auth2.useSession)();
   const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player4.usePlayer)();
   const { showPopup } = (0, import_popup5.usePopup)();
@@ -1660,15 +1667,15 @@ function GenrePlaylistTracks({
   const { fetch } = (0, import_transport5.useFetchWrapper)(getBackendBaseUrl);
   const playback = (0, import_transport5.usePlaybackContext)();
   const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = (0, import_react_query.useInfiniteQuery)({
-    queryKey: [...scope === "me" ? import_genre_tree7.genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...import_genre_tree8.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), "artist", artist.uuid] : import_genre_tree8.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), ...playback.key ? [playback.key] : []],
+    queryKey: [...scope === "me" ? import_genre_tree12.genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...import_genre_tree13.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), "artist", artist.uuid] : import_genre_tree13.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), ...playback.key ? [playback.key] : []],
     queryFn: async ({ pageParam }) => {
       if (scope === "me") return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
       const response = await fetch(
-        import_genre_tree8.libraryEndpoints.reference.songs.list(),
+        import_genre_tree13.libraryEndpoints.reference.songs.list(),
         true,
         false,
         {},
-        { genre: genreUuid, ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
+        { genre: genreUuid, ...(0, import_genre_tree11.genreMusicQueryParams)(selection), ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
       );
       const parsed = (0, import_transport7.parseWithLog)(SongPageSchema, response, "GenrePlaylistTracks");
       return { tracks: parsed.results, total: parsed.overallTotal, nextPage: parsed.next ? nextCursor(parsed.next) : null };
@@ -1692,7 +1699,12 @@ function GenrePlaylistTracks({
   const tracks = pages.flatMap((page) => page.tracks);
   const total = pages[0]?.total ?? void 0;
   const play = (startSongUuid) => {
-    const started = artist ? playNewTrackListFromArtist(artist, scope, { startSongUuid, ordering: "title", genreUuid }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
+    const started = artist ? playNewTrackListFromArtist(artist, scope, {
+      startSongUuid,
+      ordering: "title",
+      genreUuid,
+      ...selection && { selection }
+    }) : scope === "reference" ? playNewTrackListFromGenreCatalogue({ uuid: genreUuid, name: genrePlaylist.name }, scope, { startSongUuid, ...selection && { selection } }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
     started.catch((error) => {
       console.error("Failed to play genre playlist:", error);
       showPopup(/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InternalErrorPopup, { errorCode: import_transport8.ErrorCode.CLIENT_UNKNOWN }));
@@ -1712,14 +1724,14 @@ function GenrePlaylistTracks({
         const isCurrent = playerTrackObject?.track.id === track.uuid;
         const isPlaying = isCurrent && playState === import_player5.PlayStates.PLAYING;
         const text = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: TEXT_CELL, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: TITLE_CELL, children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree9.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: TITLE_CELL, children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree14.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
           track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: SEPARATOR, children: " \u2014 " }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_genre_tree11.ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_genre_tree16.ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
           track.album && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: ALBUM_CELL, children: track.album.name })
         ] });
         const leading = renderSongLeading?.(track, index);
         const actions = renderSongActions?.(track);
-        const isUnplayable = (0, import_genre_tree9.isSong)(track) && (0, import_genre_tree9.songUnplayableReason)(track) !== null;
+        const isUnplayable = (0, import_genre_tree14.isSong)(track) && (0, import_genre_tree14.songUnplayableReason)(track) !== null;
         if (isUnplayable) {
           return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", children: [
             leading,
@@ -1773,6 +1785,7 @@ var import_jsx_runtime29 = require("react/jsx-runtime");
 function GenreDetailExtras({
   genreUuid,
   genrePlaylist,
+  selection,
   wikidataId,
   scope,
   getBackendBaseUrl,
@@ -1786,7 +1799,7 @@ function GenreDetailExtras({
   ...trackSlots
 }) {
   const trackNoun = (0, import_track_noun3.useTrackNoun)();
-  const { data: overview, isPending } = (0, import_genre_tree12.useFetchGenreOverview)(
+  const { data: overview, isPending } = (0, import_genre_tree17.useFetchGenreOverview)(
     genreUuid,
     scope,
     getBackendBaseUrl,
@@ -1839,6 +1852,7 @@ function GenreDetailExtras({
       {
         genreUuid,
         genrePlaylist,
+        selection,
         scope,
         getBackendBaseUrl,
         renderArtistLink,
@@ -1868,7 +1882,7 @@ function GenreNodeActionBand({ genrePlaylist, playback, ...bandProps }) {
     GenreActionBand,
     {
       ...bandProps,
-      onPlayPause: genrePlaylist.tracksCount > 0 ? handlePlayPause : void 0,
+      onPlayPause: ("genreOnlyTracksCount" in genrePlaylist ? (0, import_genre_tree18.genreMusicCount)(genrePlaylist) : genrePlaylist.tracksCount) > 0 ? handlePlayPause : void 0,
       isPlaying: isCurrentTrackList && isPlaying
     }
   );
@@ -1878,6 +1892,7 @@ function GenreInfoPanelBody({
   family,
   genreUuid,
   genrePlaylist,
+  catalogue,
   wikidataId,
   scope,
   getBackendBaseUrl,
@@ -1885,9 +1900,30 @@ function GenreInfoPanelBody({
   band,
   extras
 }) {
+  const noun = (0, import_track_noun4.useTrackNoun)();
+  const summary = scope === "reference" ? import_genre_tree18.GenreCatalogueCountsSchema.parse(genrePlaylist) : void 0;
+  const selection = summary ? (0, import_genre_tree18.defaultGenreMusicSelection)(summary) : void 0;
+  const describeCounts = (counts) => {
+    const scopes = counts.genreAndSubgenresTracksCount;
+    return "canonical" in scopes ? `${counts.genreOnlyTracksCount} this genre only \xB7 ${scopes.canonical} with canonical subgenres \xB7 ${scopes.regional} with regional subgenres \xB7 ${scopes.all} with all subgenres` : `${counts.genreOnlyTracksCount} this genre only \xB7 ${scopes.all} with subgenres`;
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
     toolbar,
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GenreNodeActionBand, { ...band, genrePlaylist, playback }),
+    summary && catalogue && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "px-3.5 py-3 text-sm text-[var(--color-text)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { children: [
+        "Catalogue ",
+        noun.plural,
+        ": ",
+        describeCounts(catalogue)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { children: [
+        "Playlist ",
+        noun.plural,
+        ": ",
+        describeCounts(summary)
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_react12.createElement)(
       GenreDetailExtras,
       {
@@ -1896,6 +1932,7 @@ function GenreInfoPanelBody({
         family,
         genreUuid,
         genrePlaylist,
+        selection,
         wikidataId,
         scope,
         getBackendBaseUrl
@@ -1906,7 +1943,7 @@ function GenreInfoPanelBody({
 
 // src/genre-tree/ChangeParentPopup.tsx
 var import_react13 = require("react");
-var import_genre_tree13 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree19 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function ChangeParentPopup({
   genrePlaylist,
@@ -1916,9 +1953,9 @@ function ChangeParentPopup({
   onClose,
   onParentChanged
 }) {
-  const { mutate, isPending, formErrors } = (0, import_genre_tree13.useUpdateGenre)(scope, getBackendBaseUrl);
+  const { mutate, isPending, formErrors } = (0, import_genre_tree19.useUpdateGenre)(scope, getBackendBaseUrl);
   const candidates = (0, import_react13.useMemo)(
-    () => (0, import_genre_tree13.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
+    () => (0, import_genre_tree19.getReparentCandidates)(genrePlaylists, genrePlaylist.uuid),
     [genrePlaylists, genrePlaylist.uuid]
   );
   const handleSelect = (newParent) => {
@@ -1961,7 +1998,7 @@ function ChangeParentPopup({
 
 // src/genre-tree/artist/useArtistPanel.tsx
 var import_ui15 = require("@behindthemusictree/ui");
-var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree24 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/artist/ArtistHeader.tsx
 var import_ui11 = require("@behindthemusictree/ui");
@@ -2128,12 +2165,12 @@ var import_react_query2 = require("@tanstack/react-query");
 var import_lucide_react13 = require("lucide-react");
 var import_ui14 = require("@behindthemusictree/ui");
 var import_player10 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree17 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree23 = require("@behindthemusictree/app-kit/genre-tree");
 var import_transport9 = require("@behindthemusictree/app-kit/transport");
 
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
 var import_player9 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree14 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree20 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/TrackPositionPlayPause.tsx
 var import_fa5 = require("react-icons/fa");
@@ -2188,8 +2225,8 @@ function TrackPositionPlayPause({
 }
 
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
-var import_genre_tree15 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree16 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function TrackItem({
   track,
@@ -2200,11 +2237,11 @@ function TrackItem({
   renderSongLink
 }) {
   const { handlePlayPauseAction, playerTrackObject, loadTrackForPlayer } = (0, import_player9.usePlayer)();
-  const { trackList, selectedTrack, toTrackAtPosition, runtimeUnplayableTrackIds } = (0, import_genre_tree14.useTrackList)();
+  const { trackList, selectedTrack, toTrackAtPosition, runtimeUnplayableTrackIds } = (0, import_genre_tree20.useTrackList)();
   const scope = trackList?.origin?.scope ?? null;
   const isCurrentTrack = playerTrackObject?.track.id === track.uuid;
   const hasPlaybackError = isCurrentTrack && !!playerTrackObject?.loadError;
-  const isUnplayable = hasPlaybackError || runtimeUnplayableTrackIds?.has(track.uuid) === true || (0, import_genre_tree15.isSong)(track) && (0, import_genre_tree15.songUnplayableReason)(track) !== null;
+  const isUnplayable = hasPlaybackError || runtimeUnplayableTrackIds?.has(track.uuid) === true || (0, import_genre_tree21.isSong)(track) && (0, import_genre_tree21.songUnplayableReason)(track) !== null;
   const handlePlayPauseClick = (event) => {
     event.stopPropagation();
     if (isCurrentTrack) {
@@ -2237,8 +2274,8 @@ function TrackItem({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree15.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_genre_tree16.ArtistNames, { artists: track.artists, renderArtistLink }) }) : ""
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree21.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_genre_tree22.ArtistNames, { artists: track.artists, renderArtistLink }) }) : ""
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-xs font-bold", children: track.genre.name }) : "" }),
         renderDuration && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -2257,7 +2294,7 @@ function TrackItem({
 
 // src/genre-tree/artist/ArtistSongs.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var SongPageSchema2 = (0, import_transport9.PaginatedResponseSchema)(import_genre_tree17.SongDetailedSchema);
+var SongPageSchema2 = (0, import_transport9.PaginatedResponseSchema)(import_genre_tree23.SongDetailedSchema);
 var SORTS = [
   { ordering: "title", label: "Title" },
   { ordering: "-albumYear", label: "Year" }
@@ -2266,11 +2303,11 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
   const [page, setPage] = (0, import_react14.useState)(1);
   const [ordering, setOrdering] = (0, import_react14.useState)("title");
   const { fetch } = (0, import_transport9.useFetchWrapper)(getBackendBaseUrl);
-  const { playNewTrackListFromArtist } = (0, import_genre_tree17.useTrackList)();
+  const { playNewTrackListFromArtist } = (0, import_genre_tree23.useTrackList)();
   const { playerTrackObject } = (0, import_player10.usePlayer)();
   const { data, isPending, isError } = (0, import_transport9.useQueryWithParse)({
     queryKey: ["referenceSongs", "artist", artist.uuid, ordering, page],
-    queryFn: () => fetch(import_genre_tree17.libraryEndpoints.reference.songs.list(), true, false, void 0, {
+    queryFn: () => fetch(import_genre_tree23.libraryEndpoints.reference.songs.list(), true, false, void 0, {
       artist: artist.uuid,
       ordering,
       page
@@ -2285,7 +2322,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
   });
   const handleRowClickCapture = (event, song) => {
     if (!(event.target instanceof Element) || !event.target.closest(".track-position-play-pause")) return;
-    if (playerTrackObject?.track.id === song.uuid || (0, import_genre_tree17.songUnplayableReason)(song) !== null) return;
+    if (playerTrackObject?.track.id === song.uuid || (0, import_genre_tree23.songUnplayableReason)(song) !== null) return;
     event.stopPropagation();
     void play(song.uuid);
   };
@@ -2344,7 +2381,7 @@ function useArtistPanel({
   onExpandedChange,
   onClose
 }) {
-  const result = (0, import_genre_tree18.useArtist)(uuid, getBackendBaseUrl);
+  const result = (0, import_genre_tree24.useArtist)(uuid, getBackendBaseUrl);
   const panel = { expanded, onExpandedChange, onClose };
   switch (result.status) {
     case "idle":
@@ -2405,21 +2442,21 @@ function useArtistPanel({
 
 // src/genre-tree/song/useSongPanel.tsx
 var import_ui17 = require("@behindthemusictree/ui");
-var import_genre_tree20 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree26 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/song/SongPanelContent.tsx
 var import_react15 = require("react");
 var import_lucide_react14 = require("lucide-react");
 var import_ui16 = require("@behindthemusictree/ui");
 var import_player11 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree19 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree25 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime41 = 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_react15.useState)(false);
-  const history = (0, import_genre_tree19.useSongHistory)(uuid, getBackendBaseUrl, open);
+  const history = (0, import_genre_tree25.useSongHistory)(uuid, getBackendBaseUrl, open);
   let body = null;
   if (history.status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui16.Skeleton, { className: "h-10", "aria-busy": "true" });
   else if (history.status === "error") body = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-red-600", children: "Could not load the history." });
@@ -2460,13 +2497,13 @@ function SongPanelContent({
   genrePath,
   onSelectGenre
 }) {
-  const { playNewTrackListFromTrackUuid } = (0, import_genre_tree19.useTrackList)();
+  const { playNewTrackListFromTrackUuid } = (0, import_genre_tree25.useTrackList)();
   const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player11.usePlayer)();
-  const unplayableReason = (0, import_genre_tree19.songUnplayableReason)(song);
+  const unplayableReason = (0, import_genre_tree25.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_tree19.musicBrainzRecordingUrl)(song);
+  const musicBrainzUrl = (0, import_genre_tree25.musicBrainzRecordingUrl)(song);
   const fields = [];
   if (song.genre) {
     const path = genrePath.length > 0 ? genrePath : null;
@@ -2525,7 +2562,7 @@ function SongPanelContent({
       ),
       shareUrl && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
     ] }) }),
-    song.artists && song.artists.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "px-6 pt-2.5 text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_genre_tree19.ArtistNames, { artists: song.artists, renderArtistLink }) }),
+    song.artists && song.artists.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "px-6 pt-2.5 text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_genre_tree25.ArtistNames, { artists: song.artists, renderArtistLink }) }),
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui16.FieldList, { items: fields }),
     song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui16.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
@@ -2546,7 +2583,7 @@ function useSongPanel({
   onExpandedChange,
   onClose
 }) {
-  const result = (0, import_genre_tree20.useSong)(uuid, getBackendBaseUrl);
+  const result = (0, import_genre_tree26.useSong)(uuid, getBackendBaseUrl);
   const panel = { expanded, onExpandedChange, onClose };
   switch (result.status) {
     case "idle":
@@ -2656,6 +2693,8 @@ function GenreTreeView({
   onArtistExpandedChange,
   getShareUrl,
   extraSearchGroups = [],
+  onSearchQueryChange,
+  onSearchFocus,
   artistSearch = true,
   onArtistSelect,
   artistSearchBaseUrl,
@@ -2721,7 +2760,7 @@ function GenreTreeView({
     allowWheelRotation: internalAllowWheelRotation,
     toggleWheelRotation,
     onNodeHover: handleNodeHover
-  } = (0, import_genre_tree21.useGenreTreeViewState)({
+  } = (0, import_genre_tree27.useGenreTreeViewState)({
     scope,
     getBackendBaseUrl,
     viewMode: controlledViewMode,
@@ -2740,12 +2779,12 @@ function GenreTreeView({
     restoreRootUuid = selectedGenrePlaylist.root.uuid;
     setStackedRestoreOwner({ revision: restoreRevision, rootUuid: restoreRootUuid });
   }
-  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree21.genreUpdateMutationKey }) > 0;
-  const { mutate: updateGenre } = (0, import_genre_tree21.useUpdateGenre)(scope, getBackendBaseUrl);
+  const isGenreUpdating = (0, import_react_query3.useIsMutating)({ mutationKey: import_genre_tree27.genreUpdateMutationKey }) > 0;
+  const { mutate: updateGenre } = (0, import_genre_tree27.useUpdateGenre)(scope, getBackendBaseUrl);
   const busy = deferredSizeMetric !== sizeMetric || isTreeFetching || isGenreUpdating;
   const isArtistFiltered = artistUuid !== null;
   const canSizeByViews = !isArtistFiltered && hasViewsCount(visibleGenrePlaylists);
-  const artistResult = (0, import_genre_tree21.useArtist)(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
+  const artistResult = (0, import_genre_tree27.useArtist)(artistUuid, artistSearchBaseUrl ?? getBackendBaseUrl);
   const filterArtistName = artistResult.status === "success" ? artistResult.artist.name : null;
   const filterArtist = (0, import_react16.useMemo)(
     () => artistUuid !== null && filterArtistName !== null ? { uuid: artistUuid, name: filterArtistName } : null,
@@ -2953,6 +2992,7 @@ function GenreTreeView({
             ] }),
             genreUuid,
             genrePlaylist,
+            catalogue: genrePlaylist.catalogue,
             wikidataId: criteria.wikidataId,
             scope,
             getBackendBaseUrl,
@@ -3085,7 +3125,11 @@ function GenreTreeView({
         selectedName: selectedGenrePlaylist?.name ?? (typeof builtInPanel?.title === "string" ? builtInPanel.title : null),
         onClear: builtInSongPanel ? () => changeSong(null) : builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
         onPrevious: handlePrevious,
-        onQueryChange: artistSearch || songSearch || extraSearchGroups.length > 0 ? setSearchText : void 0,
+        onQueryChange: (text) => {
+          setSearchText(text);
+          onSearchQueryChange?.(text);
+        },
+        onFocus: onSearchFocus,
         extraGroups
       }
     ),
@@ -3296,7 +3340,7 @@ var import_react17 = require("react");
 var import_genre_tree_view5 = require("@behindthemusictree/genre-tree-view");
 var import_ui20 = require("@behindthemusictree/ui");
 var import_lucide_react17 = require("lucide-react");
-var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree28 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var RELATIVE_ITEM_COUNT = 1;
 function toNode(genre, parentId) {
@@ -3324,7 +3368,7 @@ function GenreDetailPanel({
   edgeTab,
   extras
 }) {
-  const { data: detail, isPending, isError } = (0, import_genre_tree22.useFetchGenreDetail)(genreUuid, scope, getBackendBaseUrl);
+  const { data: detail, isPending, isError } = (0, import_genre_tree28.useFetchGenreDetail)(genreUuid, scope, getBackendBaseUrl);
   const playback = useGenrePlaylistPlayback({ scope, genrePlaylists: [] });
   const view = (0, import_react17.useMemo)(() => {
     if (!detail) return null;
@@ -3340,7 +3384,7 @@ function GenreDetailPanel({
         id: detail.uuid,
         parentId: detail.parent?.uuid ?? null,
         name: detail.name,
-        itemCount: detail.tracksCount,
+        itemCount: scope === "reference" ? (0, import_genre_tree28.genreMusicCount)(import_genre_tree28.GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist)) : detail.tracksCount,
         wikidataId: detail.wikidataId
       },
       fill: rootColor,
@@ -3350,7 +3394,7 @@ function GenreDetailPanel({
         ({ ascendant }, index) => relative(ascendant, index === 0 ? null : ancestors2[index - 1].ascendant.uuid)
       )
     };
-  }, [detail]);
+  }, [detail, scope]);
   if (isError) {
     return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." });
   }
@@ -3403,7 +3447,8 @@ function GenreDetailPanel({
               ancestors
             ] }),
             genreUuid: detail.uuid,
-            genrePlaylist: { ...detail.criteriaPlaylist, tracksCount: detail.tracksCount },
+            genrePlaylist: scope === "reference" ? import_genre_tree28.GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist) : { ...detail.criteriaPlaylist, tracksCount: detail.tracksCount },
+            catalogue: detail.catalogue,
             wikidataId: detail.wikidataId,
             scope,
             getBackendBaseUrl,
@@ -3424,9 +3469,9 @@ var import_genre_tree_view6 = require("@behindthemusictree/genre-tree-view");
 // src/genre-tree/track-list-sidebar/TrackListSidebar.tsx
 var import_react18 = require("react");
 var import_lucide_react18 = require("lucide-react");
-var import_genre_tree23 = require("@behindthemusictree/app-kit/genre-tree");
-var import_genre_tree24 = require("@behindthemusictree/app-kit/genre-tree");
-var import_track_noun4 = require("@behindthemusictree/app-kit/track-noun");
+var import_genre_tree29 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree30 = require("@behindthemusictree/app-kit/genre-tree");
+var import_track_noun5 = require("@behindthemusictree/app-kit/track-noun");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var useBrowserLayoutEffect = typeof window === "undefined" ? import_react18.useEffect : import_react18.useLayoutEffect;
 function TrackListSidebar({
@@ -3440,8 +3485,8 @@ function TrackListSidebar({
   renderArtistLink,
   renderSongLink
 }) {
-  const { trackList, loadMore, autoAdvanceScrollRequest } = (0, import_genre_tree23.useTrackList)();
-  const trackNoun = (0, import_track_noun4.useTrackNoun)();
+  const { trackList, loadMore, autoAdvanceScrollRequest } = (0, import_genre_tree29.useTrackList)();
+  const trackNoun = (0, import_track_noun5.useTrackNoun)();
   const trackListRef = (0, import_react18.useRef)(null);
   const previousOriginRef = (0, import_react18.useRef)(trackList?.origin ?? null);
   const handledAutoAdvanceRequestIdRef = (0, import_react18.useRef)(null);
@@ -3543,7 +3588,7 @@ function TrackListSidebar({
               /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsx)("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "info flex items-center text-sm text-[var(--color-text-muted)]", children: [
-              trackList.origin.type === import_genre_tree24.TrackListOriginType.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === import_genre_tree24.TrackListOriginType.ARTIST ? "Artist \u2022 " : `${trackNoun.singular} playlist \u2022 `,
+              trackList.origin.type === import_genre_tree30.TrackListOriginType.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === import_genre_tree30.TrackListOriginType.ARTIST ? "Artist \u2022 " : `${trackNoun.singular} playlist \u2022 `,
               `${trackList.total} ${trackList.total > 1 ? trackNoun.plural : trackNoun.singular}`
             ] })
           ] }),
@@ -3594,12 +3639,12 @@ function TrackListSidebar({
 var import_react19 = require("react");
 var import_tailwind_merge = require("tailwind-merge");
 var import_player13 = require("@behindthemusictree/app-kit/player");
-var import_genre_tree26 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree32 = require("@behindthemusictree/app-kit/genre-tree");
 var import_ui21 = require("@behindthemusictree/ui");
 
 // src/genre-tree/PlayerControls.tsx
 var import_lucide_react19 = require("lucide-react");
-var import_genre_tree25 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree31 = require("@behindthemusictree/app-kit/genre-tree");
 var import_player12 = require("@behindthemusictree/app-kit/player");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function PlayerControls() {
@@ -3613,7 +3658,7 @@ function PlayerControls() {
     setVolume,
     volume
   } = (0, import_player12.usePlayer)();
-  const { hasNextTrack, hasPreviousTrack, playNextTrack, playPreviousTrack } = (0, import_genre_tree25.useTrackList)();
+  const { hasNextTrack, hasPreviousTrack, playNextTrack, playPreviousTrack } = (0, import_genre_tree31.useTrackList)();
   const currentTime = (0, import_player12.useCurrentTime)();
   const isBusy = isLoading || playState === import_player12.PlayStates.LOADING;
   const isReady = !!playerTrackObject?.isReady && !isBusy && !playerTrackObject.loadError;
@@ -3627,7 +3672,7 @@ function PlayerControls() {
       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_runtime47.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { "aria-label": "Elapsed time", children: (0, import_genre_tree25.formatTime)(safeCurrentTime) }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { "aria-label": "Elapsed time", children: (0, import_genre_tree31.formatTime)(safeCurrentTime) }),
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "input",
             {
@@ -3642,7 +3687,7 @@ function PlayerControls() {
               onChange: (event) => seekTo(Number(event.currentTarget.value))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { "aria-label": "Duration", children: (0, import_genre_tree25.formatTime)(safeDuration) })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { "aria-label": "Duration", children: (0, import_genre_tree31.formatTime)(safeDuration) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
@@ -3721,7 +3766,7 @@ function PlayerPanel({
   renderSongLink
 }) {
   const { playerTrackObject, retryPlayback } = (0, import_player13.usePlayer)();
-  const { toggleTrackListSidebar, isTrackListSidebarVisible } = (0, import_genre_tree26.useTrackListSidebarVisibility)();
+  const { toggleTrackListSidebar, isTrackListSidebarVisible } = (0, import_genre_tree32.useTrackListSidebarVisibility)();
   const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = (0, import_react19.useState)("");
   const loadedTrackTitle = playerTrackObject?.track.title;
   (0, import_react19.useEffect)(() => {
@@ -3818,7 +3863,7 @@ function PlayerPanel({
 // src/genre-tree/Rating.tsx
 var import_uuid = require("uuid");
 var import_ai = require("react-icons/ai");
-var import_genre_tree27 = require("@behindthemusictree/app-kit/genre-tree");
+var import_genre_tree33 = require("@behindthemusictree/app-kit/genre-tree");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function Rating({ rating, handleChange }) {
   const instanceId = (0, import_uuid.v4)();
@@ -3830,7 +3875,7 @@ function Rating({ rating, handleChange }) {
         className: "w-6 h-6 opacity-0",
         type: "radio",
         name: "rating",
-        value: i === 0 ? import_genre_tree27.FORM_RATING_NULL_VALUE : i,
+        value: i === 0 ? import_genre_tree33.FORM_RATING_NULL_VALUE : i,
         checked: rating === (i === 0 ? null : i),
         onChange: handleChange
       }
@@ -3839,7 +3884,7 @@ function Rating({ rating, handleChange }) {
       /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         import_ai.AiOutlineStar,
         {
-          className: `w-7 h-7 absolute top-0 left-0 ${rating === import_genre_tree27.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_tree33.FORM_RATING_NULL_VALUE ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "flex-grow w-8" }),