@behindthemusictree/app-kit-ui 39.0.0 → 40.1.0

package/dist/index.cjs

@@ -591,12 +591,12 @@ function AuthCallbackHandler({ renderStatus, ...options }) {
 // src/genre-tree/GenreTreeView.tsx
 var import_react19 = require("react");
 var import_react_query3 = require("@tanstack/react-query");
+var import_lucide_react17 = require("lucide-react");
 var import_lucide_react18 = require("lucide-react");
-var import_lucide_react19 = require("lucide-react");
 var import_ui24 = require("@behindthemusictree/ui");
 var import_genre_tree_view5 = require("@behindthemusictree/genre-tree-view");
 var import_genre_tree30 = require("@behindthemusictree/app-kit/genre-tree");
-var import_popup6 = require("@behindthemusictree/app-kit/popup");
+var import_popup5 = require("@behindthemusictree/app-kit/popup");
 
 // src/genre-tree/playlist-tree/size-metric.ts
 var import_genre_tree = require("@behindthemusictree/app-kit/genre-tree");
@@ -610,7 +610,7 @@ var genrePlaylistSize = (genrePlaylist, metric) => {
 };
 
 // src/genre-tree/playlist-tree/toTreeNodes.ts
-function toTreeNodes(genrePlaylists, sizeMetric) {
+function toTreeNodes(genrePlaylists, sizeMetric, focusUuids) {
   return genrePlaylists.map((genrePlaylist) => ({
     id: genrePlaylist.uuid,
     parentId: genrePlaylist.parent?.uuid ?? null,
@@ -621,27 +621,45 @@ function toTreeNodes(genrePlaylists, sizeMetric) {
     side: genrePlaylist.criteria?.side ?? void 0,
     wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
     umbrella: genrePlaylist.isUmbrella,
-    scene: genrePlaylist.scene ?? void 0
+    scene: genrePlaylist.scene ?? void 0,
+    muted: focusUuids ? !focusUuids.has(genrePlaylist.uuid) : void 0
   }));
 }
 
+// src/genre-tree/playlist-tree/toGenreNodeStyles.ts
+function toGenreNodeStyles(relations, genrePlaylists) {
+  const styles = /* @__PURE__ */ new Map();
+  if (!relations) return styles;
+  const genreUuidByPlaylistUuid = new Map(
+    genrePlaylists.flatMap((genrePlaylist) => genrePlaylist.criteria ? [[genrePlaylist.uuid, genrePlaylist.criteria.uuid]] : [])
+  );
+  const drawn = [relations, relations.parentNode, ...relations.childNodes, ...relations.ancestorNodes];
+  for (const entry of drawn) {
+    const genreUuid = entry && genreUuidByPlaylistUuid.get(entry.node.id);
+    if (entry && genreUuid) styles.set(genreUuid, { fill: entry.fill, textColor: entry.textColor });
+  }
+  return styles;
+}
+
 // 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");
-var import_popup2 = require("@behindthemusictree/app-kit/popup");
-var import_transport3 = require("@behindthemusictree/app-kit/transport");
 
-// src/genre-tree/playlist-tree/useGenrePlaylistPlayback.ts
+// src/genre-tree/playlist-tree/useGenrePlaylistPlayback.tsx
 var import_react3 = require("react");
 var import_genre_tree2 = require("@behindthemusictree/app-kit/genre-tree");
+var import_popup2 = require("@behindthemusictree/app-kit/popup");
+var import_transport3 = require("@behindthemusictree/app-kit/transport");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function useGenrePlaylistPlayback({
   scope,
   genrePlaylists,
   artist = null
 }) {
   const { trackList, playNewTrackListFromGenrePlaylist } = (0, import_genre_tree2.useTrackList)();
+  const { showPopup } = (0, import_popup2.usePopup)();
   const origin = trackList?.origin;
   const playing = (0, import_react3.useMemo)(() => {
     if (!origin || origin.type !== import_genre_tree2.TrackListOriginType.GENRE_PLAYLIST || origin.scope !== scope) return null;
@@ -653,14 +671,20 @@ function useGenrePlaylistPlayback({
   }, [origin, artist, genrePlaylists, scope]);
   const play = (0, import_react3.useCallback)(async (playlist, requested) => {
     if (artist && !playlist.criteria) return;
-    const selection = scope === "reference" && playlist.criteria !== null ? requested ?? (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]);
+    try {
+      const selection = scope === "reference" && playlist.criteria !== null ? requested ?? (0, import_genre_tree2.defaultGenreMusicSelection)(import_genre_tree2.GenreCatalogueCountsSchema.parse(playlist)) : void 0;
+      await (selection || artist ? playNewTrackListFromGenrePlaylist(playlist, scope, { selection, ...artist && { artistUuid: artist.uuid } }) : playNewTrackListFromGenrePlaylist(playlist, scope));
+    } catch (error) {
+      console.error("Failed to load genre playlist tracks:", error);
+      if (error instanceof import_genre_tree2.TracksFailureAlreadyReportedError) return;
+      showPopup(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InternalErrorPopup, { errorCode: error instanceof import_transport3.AppError ? error.code : import_transport3.ErrorCode.CLIENT_UNKNOWN }));
+    }
+  }, [artist, scope, playNewTrackListFromGenrePlaylist, showPopup]);
   return (0, import_react3.useMemo)(() => ({ playing, play }), [playing, play]);
 }
 
 // src/genre-tree/playlist-tree/TreePerRoot.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function GenrePlaylistTreePerRoot({
   scope,
   className: className2,
@@ -679,25 +703,16 @@ function GenrePlaylistTreePerRoot({
   viewportRestore,
   onViewportChange,
   playback,
+  focusUuids,
   ...hostPanel
 }) {
   const { isPlaying, setIsPlaying } = (0, import_player.usePlayer)();
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists: genrePlaylistTreePerRoot });
   const { playing, play } = playback ?? defaultPlayback;
   const playingNodeId = playing?.uuid ?? null;
-  const { showPopup } = (0, import_popup2.usePopup)();
   const nodes = (0, import_react4.useMemo)(
-    () => genrePlaylistTreePerRoot.map((genrePlaylist) => ({
-      id: genrePlaylist.uuid,
-      parentId: genrePlaylist.parent?.uuid ?? null,
-      name: genrePlaylist.name,
-      itemCount: (0, import_genre_tree3.genrePlaylistTrackCount)(genrePlaylist),
-      actionable: Boolean(genrePlaylist.criteria),
-      side: genrePlaylist.criteria?.side ?? void 0,
-      wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
-      umbrella: genrePlaylist.isUmbrella
-    })),
-    [genrePlaylistTreePerRoot]
+    () => toTreeNodes(genrePlaylistTreePerRoot, "songs", focusUuids),
+    [genrePlaylistTreePerRoot, focusUuids]
   );
   const handlePlayPause = (0, import_react4.useCallback)(
     (nodeId) => {
@@ -710,18 +725,14 @@ function GenrePlaylistTreePerRoot({
       if ((0, import_genre_tree3.genrePlaylistTrackCount)(genrePlaylist) === 0) {
         return;
       }
-      play(genrePlaylist).catch((error) => {
-        console.error("Failed to load genre playlist tracks:", error);
-        showPopup(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InternalErrorPopup, { errorCode: import_transport3.ErrorCode.CLIENT_UNKNOWN }));
-      });
+      void play(genrePlaylist);
     },
     [
       genrePlaylistTreePerRoot,
       playingNodeId,
       isPlaying,
       setIsPlaying,
-      play,
-      showPopup
+      play
     ]
   );
   const handleAddChild = (0, import_react4.useCallback)(
@@ -744,7 +755,7 @@ function GenrePlaylistTreePerRoot({
     if (confirm(`Are you sure you want to delete "${node.name}"?`)) {
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_genre_tree_view.GenreTree,
     {
       className: className2,
@@ -775,9 +786,7 @@ 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");
-var import_popup3 = require("@behindthemusictree/app-kit/popup");
-var import_transport4 = require("@behindthemusictree/app-kit/transport");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function GenrePlaylistTreeWheel({
   scope,
   className: className2,
@@ -798,24 +807,16 @@ function GenrePlaylistTreeWheel({
   viewportRestore,
   onViewportChange,
   playback,
+  focusUuids,
   ...hostPanel
 }) {
   const { isPlaying, setIsPlaying } = (0, import_player2.usePlayer)();
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists });
   const { playing, play } = playback ?? defaultPlayback;
   const playingNodeId = playing?.uuid ?? null;
-  const { showPopup } = (0, import_popup3.usePopup)();
   const nodes = (0, import_react5.useMemo)(
-    () => genrePlaylists.map((genrePlaylist) => ({
-      id: genrePlaylist.uuid,
-      parentId: genrePlaylist.parent?.uuid ?? null,
-      name: genrePlaylist.name,
-      itemCount: genrePlaylistSize(genrePlaylist, sizeMetric),
-      actionable: Boolean(genrePlaylist.criteria),
-      side: genrePlaylist.criteria?.side ?? void 0,
-      wikidataId: genrePlaylist.criteria?.wikidataId ?? null
-    })),
-    [genrePlaylists, sizeMetric]
+    () => toTreeNodes(genrePlaylists, sizeMetric, focusUuids),
+    [genrePlaylists, sizeMetric, focusUuids]
   );
   const handlePlayPause = (0, import_react5.useCallback)(
     (nodeId) => {
@@ -828,18 +829,14 @@ function GenrePlaylistTreeWheel({
       if ((0, import_genre_tree4.genrePlaylistTrackCount)(genrePlaylist) === 0) {
         return;
       }
-      play(genrePlaylist).catch((error) => {
-        console.error("Failed to load genre playlist tracks:", error);
-        showPopup(/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InternalErrorPopup, { errorCode: import_transport4.ErrorCode.CLIENT_UNKNOWN }));
-      });
+      void play(genrePlaylist);
     },
     [
       genrePlaylists,
       playingNodeId,
       isPlaying,
       setIsPlaying,
-      play,
-      showPopup
+      play
     ]
   );
   const handleAddChild = (0, import_react5.useCallback)(
@@ -862,7 +859,7 @@ function GenrePlaylistTreeWheel({
     if (confirm(`Are you sure you want to delete "${node.name}"?`)) {
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_genre_tree_view2.GenreTreeWheel,
     {
       className: className2,
@@ -894,7 +891,7 @@ 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");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function GenrePlaylistTreeWheelRadialPopCore(props) {
   const {
     scope,
@@ -927,7 +924,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists });
   const { playing, play } = playback ?? defaultPlayback;
   const playingNodeId = playing?.uuid ?? null;
-  const nodes = (0, import_react6.useMemo)(() => toTreeNodes(genrePlaylists, sizeMetric), [genrePlaylists, sizeMetric]);
+  const nodes = (0, import_react6.useMemo)(() => toTreeNodes(genrePlaylists, sizeMetric, props.focusUuids), [genrePlaylists, sizeMetric, props.focusUuids]);
   const handlePlayPause = (0, import_react6.useCallback)(
     (nodeId) => {
       const genrePlaylist = genrePlaylists.find((g) => g.uuid === nodeId);
@@ -939,9 +936,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
       if ((0, import_genre_tree5.genrePlaylistTrackCount)(genrePlaylist) === 0) {
         return;
       }
-      play(genrePlaylist).catch((error) => {
-        console.error("Failed to load genre playlist tracks:", error);
-      });
+      void play(genrePlaylist);
     },
     [genrePlaylists, playingNodeId, isPlaying, setIsPlaying, play]
   );
@@ -981,7 +976,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
     onSelectedNodeChange,
     ...hostPanel
   };
-  return outline ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_genre_tree_view3.GenreTreeOutline, { ...treeProps }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return outline ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_genre_tree_view3.GenreTreeOutline, { ...treeProps }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_genre_tree_view3.GenreTreeWheelRadialPopCore,
     {
       ...treeProps,
@@ -998,7 +993,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
 
 // src/genre-tree/GenreTreeWheelHandoff.tsx
 var import_react7 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
   const [revealed, setRevealed] = (0, import_react7.useState)(false);
   const onRevealedChangeRef = (0, import_react7.useRef)(onRevealedChange);
@@ -1017,8 +1012,8 @@ function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
       cancelAnimationFrame(innerFrame);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative w-full h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "div",
       {
         className: "absolute inset-0 transition-opacity duration-150 ease-out",
@@ -1027,7 +1022,7 @@ function GenreTreeWheelHandoff({ skeleton, children, onRevealedChange }) {
         children
       }
     ),
-    !revealed && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute inset-0", "aria-hidden": "true", children: skeleton })
+    !revealed && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute inset-0", "aria-hidden": "true", children: skeleton })
   ] });
 }
 
@@ -1042,7 +1037,7 @@ var import_genre_tree9 = require("@behindthemusictree/app-kit/genre-tree");
 // src/genre-tree/search/SearchBox.tsx
 var import_react8 = require("react");
 var import_ui6 = require("@behindthemusictree/ui");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function SearchBox({
   label,
   placeholder,
@@ -1064,7 +1059,7 @@ function SearchBox({
     groups.find((group) => group.key === groupKey)?.items.find((item) => item.key === itemKey)?.onSelect();
     onPicked?.(groupKey, itemKey);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: className2, onFocusCapture: onFocus, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: className2, onFocusCapture: onFocus, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_ui6.SearchCombobox,
     {
       ariaLabel: label,
@@ -1096,7 +1091,7 @@ var searchStatus = (state, count, noun) => state.isError ? SEARCH_FAILED_STATUS
 
 // src/genre-tree/search/useArtistSearchGroup.tsx
 var import_genre_tree6 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function useArtistSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
   const search = (0, import_genre_tree6.useArtistSearch)(getBaseUrl, enabled ? text : "");
   if (!enabled) return void 0;
@@ -1105,15 +1100,15 @@ function useArtistSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
     label: "Artists",
     items: search.artists.map((artist) => ({
       key: artist.uuid,
-      content: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "block truncate font-medium", children: [
+      content: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "block truncate font-medium", children: [
           artist.name,
-          artist.disambiguation && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
+          artist.disambiguation && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "font-normal text-[var(--color-neutral-500)]", children: [
             " \xB7 ",
             artist.disambiguation
           ] })
         ] }),
-        artist.matchedAlias && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "block truncate text-caption text-[var(--color-neutral-500)]", children: [
+        artist.matchedAlias && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "block truncate text-caption text-[var(--color-neutral-500)]", children: [
           "also known as ",
           artist.matchedAlias
         ] })
@@ -1127,7 +1122,7 @@ function useArtistSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
 
 // src/genre-tree/search/useSongSearchGroup.tsx
 var import_genre_tree7 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function useSongSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
   const search = (0, import_genre_tree7.useSongSearch)(getBaseUrl, enabled ? text : "");
   if (!enabled) return void 0;
@@ -1136,9 +1131,9 @@ function useSongSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
     label: "Songs",
     items: search.songs.map((song) => ({
       key: song.uuid,
-      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-caption text-[var(--color-neutral-500)]", children: [song.artists.map((artist) => artist.name).join(", "), song.genre?.name ?? "No genre"].filter(Boolean).join(" \xB7 ") })
+      content: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: (0, import_genre_tree7.isSongSearchResultPlayable)(song) ? void 0 : "opacity-60", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "block truncate font-medium", children: song.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "block truncate text-caption text-[var(--color-neutral-500)]", children: [song.artists.map((artist) => artist.name).join(", "), song.genre?.name ?? "No genre"].filter(Boolean).join(" \xB7 ") })
       ] }),
       onSelect: () => onSelect(song)
     })),
@@ -1149,7 +1144,7 @@ function useSongSearchGroup(getBaseUrl, text, onSelect, enabled = true) {
 
 // src/genre-tree/search/useGenreRemoteSearchGroup.tsx
 var import_genre_tree8 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function useGenreRemoteSearchGroup(getBaseUrl, text, onSelect, { key = "genres", label = "Genres", filter, describe, ...options } = {}) {
   const search = (0, import_genre_tree8.useGenreRemoteSearch)(getBaseUrl, text, options);
   const genres = filter ? search.genres.filter(filter) : search.genres;
@@ -1158,12 +1153,12 @@ function useGenreRemoteSearchGroup(getBaseUrl, text, onSelect, { key = "genres",
     label,
     items: genres.map((genre) => ({
       key: genre.uuid,
-      content: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "block truncate font-medium", children: [
+      content: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "block truncate font-medium", children: [
           genre.name,
-          genre.isUmbrella && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ml-2 text-caption font-normal italic text-[var(--color-text-muted)]", children: "umbrella" })
+          genre.isUmbrella && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ml-2 text-caption font-normal italic text-[var(--color-text-muted)]", children: "umbrella" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "block truncate text-caption text-[var(--color-neutral-500)]", children: describe?.(genre) ?? `${genre.treeName} \xB7 ${genre.root.name}` })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "block truncate text-caption text-[var(--color-neutral-500)]", children: describe?.(genre) ?? `${genre.treeName} \xB7 ${genre.root.name}` })
       ] }),
       onSelect: () => onSelect(genre)
     })),
@@ -1173,7 +1168,7 @@ function useGenreRemoteSearchGroup(getBaseUrl, text, onSelect, { key = "genres",
 }
 
 // src/genre-tree/GenreSearch.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function GenreSearch({
   genrePlaylists,
   onSelect,
@@ -1202,9 +1197,9 @@ function GenreSearch({
       label: hasExtras ? "Genres" : void 0,
       items: results.map((genrePlaylist) => ({
         key: genrePlaylist.uuid,
-        content: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+        content: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
           genrePlaylist.name,
-          genrePlaylist.isUmbrella && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ml-2 text-caption italic text-[var(--color-text-muted)]", children: "umbrella" })
+          genrePlaylist.isUmbrella && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ml-2 text-caption italic text-[var(--color-text-muted)]", children: "umbrella" })
         ] }),
         onSelect: () => select(genrePlaylist)
       }))
@@ -1213,7 +1208,7 @@ function GenreSearch({
       (group) => active ? group : { ...group, items: [], status: "", loading: false }
     )
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "genre-search w-[calc(var(--layout-detail-panel-w,25.5rem)-2*var(--layout-panel-inset,1rem))] shrink-0 max-md:w-full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "genre-search w-[calc(var(--layout-detail-panel-w,25.5rem)-2*var(--layout-panel-inset,1rem))] shrink-0 max-md:w-full", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     SearchBox,
     {
       label,
@@ -1233,14 +1228,14 @@ function GenreSearch({
         clear();
         onQueryChange?.("");
       } : void 0,
-      leading: onPrevious && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", "aria-label": "Previous", title: "Previous", className: import_ui7.SEARCH_LEADING_BUTTON_CLASS, onClick: onPrevious, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.ArrowLeft, { "aria-hidden": "true", className: "h-4 w-4" }) }),
+      leading: onPrevious && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", "aria-label": "Previous", title: "Previous", className: import_ui7.SEARCH_LEADING_BUTTON_CLASS, onClick: onPrevious, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react7.ArrowLeft, { "aria-hidden": "true", className: "h-4 w-4" }) }),
       onFocus
     }
   ) });
 }
 
 // src/genre-tree/GenreTreeSearch.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function GenreTreeSearch({
   artistBaseUrl,
   songBaseUrl,
@@ -1260,7 +1255,7 @@ function GenreTreeSearch({
   const deferredQuery = (0, import_react9.useDeferredValue)(query);
   const artistGroup = useArtistSearchGroup(artistBaseUrl, deferredQuery, onArtistSelect, artistSearch);
   const songGroup = useSongSearchGroup(songBaseUrl, deferredQuery, onSongSelect, songSearch);
-  const render = (hostGroups) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const render = (hostGroups) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     GenreSearch,
     {
       ...props,
@@ -1275,7 +1270,7 @@ function GenreTreeSearch({
       extraGroups: [...extraGroups, ...hostGroups, artistGroup, songGroup].filter((group) => group !== void 0)
     }
   );
-  return SearchGroups ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SearchGroups, { query: deferredQuery, focused, onSelectGenre, children: render }) : render([]);
+  return SearchGroups ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SearchGroups, { query: deferredQuery, focused, onSelectGenre, children: render }) : render([]);
 }
 
 // src/genre-tree/GenreDetailPanel.tsx
@@ -1295,7 +1290,7 @@ var import_ui9 = require("@behindthemusictree/ui");
 // src/genre-tree/ShareActionButton.tsx
 var import_lucide_react10 = require("lucide-react");
 var import_ui8 = require("@behindthemusictree/ui");
-var import_popup4 = require("@behindthemusictree/app-kit/popup");
+var import_popup3 = require("@behindthemusictree/app-kit/popup");
 
 // src/genre-tree/SharePopup.tsx
 var import_react10 = require("react");
@@ -1304,12 +1299,12 @@ var import_fa3 = require("react-icons/fa");
 var import_si = require("react-icons/si");
 
 // src/genre-tree/ShareDestinationButton.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var className = "group flex min-w-0 flex-1 flex-col items-center justify-center gap-1.5 rounded-xl px-2 py-2 text-caption text-[var(--color-text)] transition-colors hover:bg-[var(--color-surface-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50";
 function Contents({ icon, label }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "max-w-full truncate", children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-[var(--color-surface-muted)] transition-colors group-hover:bg-[var(--color-border)]", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "max-w-full truncate", children: label })
   ] });
 }
 function ShareDestinationButton({
@@ -1321,29 +1316,29 @@ function ShareDestinationButton({
   ariaLabel
 }) {
   if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Contents, { icon, label }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Contents, { icon, label }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", onClick, disabled, "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Contents, { icon, label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", onClick, disabled, "aria-label": ariaLabel, className, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Contents, { icon, label }) });
 }
 
 // src/genre-tree/SharePreviewCard.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function SharePreviewCard({ target, url }) {
   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_runtime23.jsx)("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1 p-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-caption font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate text-base font-semibold text-[var(--color-text)]", title: target.name, children: target.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate text-body text-[var(--color-primary)]", title: url, children: url })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "rounded-3xl bg-[var(--color-surface-muted)] p-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-h-32 overflow-hidden rounded-2xl bg-[var(--color-surface)] shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(Icon, { "aria-hidden": "true", className: "h-10 w-10" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1 p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-caption font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: typeLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate text-base font-semibold text-[var(--color-text)]", title: target.name, children: target.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate text-body text-[var(--color-primary)]", title: url, children: url })
     ] })
   ] }) });
 }
 
 // src/genre-tree/SharePopup.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function resolveAbsoluteUrl(url) {
   try {
     const parsed = new URL(url, window.location.href);
@@ -1418,8 +1413,8 @@ function SharePopup({ target, url, onClose }) {
       setShareError("Could not open the share options.");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       BasePopup_default,
       {
         title: "Share",
@@ -1434,70 +1429,70 @@ function SharePopup({ target, url, onClose }) {
         titleTextClassName: "!text-xl !font-semibold !text-[var(--color-text)]",
         closeButtonClassName: "!h-10 !w-10 !rounded-none !border-0 !bg-transparent !p-0 !text-[var(--color-text)] hover:!bg-transparent hover:!text-[var(--color-text)]",
         contentClassName: "!rounded-none !bg-transparent !px-6 !pb-6 !pt-2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SharePreviewCard, { target, url: absoluteUrl || url }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "grid grid-cols-3 gap-1 rounded-3xl bg-[var(--color-surface)] p-3 sm:grid-cols-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SharePreviewCard, { target, url: absoluteUrl || url }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "grid grid-cols-3 gap-1 rounded-3xl bg-[var(--color-surface)] p-3 sm:grid-cols-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               ShareDestinationButton,
               {
                 label: "Copy Link",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.Link2, { "aria-hidden": "true", className: "h-6 w-6" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react9.Link2, { "aria-hidden": "true", className: "h-6 w-6" }),
                 onClick: () => void handleCopy(),
                 ariaLabel: "Copy link",
                 disabled: !absoluteUrl
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               ShareDestinationButton,
               {
                 label: "WhatsApp",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa3.FaWhatsapp, { "aria-hidden": "true", className: "h-9 w-9 text-[#25D366]" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fa3.FaWhatsapp, { "aria-hidden": "true", className: "h-9 w-9 text-[#25D366]" }),
                 href: destinationUrls?.whatsapp,
                 ariaLabel: `Share ${target.name} via WhatsApp`,
                 disabled: !absoluteUrl
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               ShareDestinationButton,
               {
                 label: "Gmail",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_si.SiGmail, { "aria-hidden": "true", className: "h-8 w-8 text-[#EA4335]" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_si.SiGmail, { "aria-hidden": "true", className: "h-8 w-8 text-[#EA4335]" }),
                 href: destinationUrls?.gmail,
                 ariaLabel: `Email ${target.name} with Gmail`,
                 disabled: !absoluteUrl
               }
             ),
-            canUseNativeShare && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            canUseNativeShare && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               ShareDestinationButton,
               {
                 label: "More",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.Share2, { "aria-hidden": "true", className: "h-6 w-6" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react9.Share2, { "aria-hidden": "true", className: "h-6 w-6" }),
                 onClick: () => void handleNativeShare(),
                 ariaLabel: "More sharing options",
                 disabled: !absoluteUrl
               }
             )
           ] }),
-          copyStatus === "failed" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { role: "alert", className: "text-center text-body text-[var(--color-red-500)]", children: "Could not copy the link." }),
-          shareError && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { role: "alert", className: "text-center text-body text-[var(--color-red-500)]", children: shareError })
+          copyStatus === "failed" && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { role: "alert", className: "text-center text-body text-[var(--color-red-500)]", children: "Could not copy the link." }),
+          shareError && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { role: "alert", className: "text-center text-body text-[var(--color-red-500)]", children: shareError })
         ] })
       }
     ),
-    toastId > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Toast, { message: "Link copied", onClose: dismissToast }, toastId)
+    toastId > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Toast, { message: "Link copied", onClose: dismissToast }, toastId)
   ] });
 }
 
 // src/genre-tree/ShareActionButton.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ShareActionButton({ target, url }) {
-  const { showPopup, hidePopup } = (0, import_popup4.usePopup)();
+  const { showPopup, hidePopup } = (0, import_popup3.usePopup)();
   const openSharePopup = () => {
-    showPopup(/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SharePopup, { target, url, onClose: hidePopup }));
+    showPopup(/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SharePopup, { target, url, onClose: hidePopup }));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_ui8.ActionButton,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react10.Share2, { "aria-hidden": "true", className: "w-5 h-5" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react10.Share2, { "aria-hidden": "true", className: "w-5 h-5" }),
       label: "Share",
       "aria-label": `Share ${target.name}`,
       title: `Share ${target.name}`,
@@ -1507,7 +1502,7 @@ function ShareActionButton({ target, url }) {
 }
 
 // src/genre-tree/GenreActionBand.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function GenreActionBand({
   node,
   playActions,
@@ -1528,24 +1523,24 @@ function GenreActionBand({
     items.push({
       key: "zoom-in",
       label: "Focus",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react11.ZoomIn, { "aria-hidden": "true", className: "w-5 h-5" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react11.ZoomIn, { "aria-hidden": "true", className: "w-5 h-5" }),
       onClick: onZoomIn
     });
   }
   if (onAddChild) {
-    adminItems.push({ key: "add-child", label: "Add", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react11.Plus, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onAddChild });
+    adminItems.push({ key: "add-child", label: "Add", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react11.Plus, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onAddChild });
   }
   if (onRename) {
-    adminItems.push({ key: "rename", label: "Rename", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react11.Pencil, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onRename });
+    adminItems.push({ key: "rename", label: "Rename", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react11.Pencil, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onRename });
   }
   if (onChangeParent) {
-    adminItems.push({ key: "change-parent", label: "Parent", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react11.MoveUpRight, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onChangeParent });
+    adminItems.push({ key: "change-parent", label: "Parent", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react11.MoveUpRight, { "aria-hidden": "true", className: "w-5 h-5" }), onClick: onChangeParent });
   }
   if (onToggleSide) {
     adminItems.push({
       key: "toggle-side",
       label: side === "pop" ? "Make core" : "Make pop",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react11.ArrowLeftRight, { "aria-hidden": "true", className: "w-5 h-5" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react11.ArrowLeftRight, { "aria-hidden": "true", className: "w-5 h-5" }),
       onClick: onToggleSide,
       disabled: !!toggleSideDisabledReason,
       title: toggleSideDisabledReason
@@ -1560,9 +1555,9 @@ function GenreActionBand({
       disabled: action.enabled ? !action.enabled(node) : false
     });
   }
-  const renderItems = (list) => list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui9.ActionButton, { icon: item.icon, label: item.label, disabled: item.disabled, title: item.title, onClick: item.onClick }, item.key));
+  const renderItems = (list) => list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_ui9.ActionButton, { icon: item.icon, label: item.label, disabled: item.disabled, title: item.title, onClick: item.onClick }, item.key));
   if (!playActions && items.length === 0 && adminItems.length === 0 && !(shareTarget && shareUrl)) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui9.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_ui9.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     import_ui9.ActionBand,
     {
       className: "genre-action-band",
@@ -1570,7 +1565,7 @@ function GenreActionBand({
       children: [
         playActions,
         renderItems(items),
-        shareTarget && shareUrl && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
+        shareTarget && shareUrl && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
       ]
     }
   ) });
@@ -1594,7 +1589,7 @@ var REGION_GLOBE_PATHS = {
 var REGION_GLOBES = ["africa", "americas", "asia"];
 
 // src/genre-tree/RegionGlobeIcon.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var ROTATION_INTERVAL_MS = 3e3;
 function RegionGlobeIcon({ className: className2 }) {
   const [index, setIndex] = (0, import_react11.useState)(0);
@@ -1612,29 +1607,29 @@ function RegionGlobeIcon({ className: className2 }) {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { viewBox: "0 0 512 512", fill: "currentColor", className: className2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { "data-testid": "region-globe-path", d: REGION_GLOBE_PATHS[REGION_GLOBES[index]] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { viewBox: "0 0 512 512", fill: "currentColor", className: className2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { "data-testid": "region-globe-path", d: REGION_GLOBE_PATHS[REGION_GLOBES[index]] }) });
 }
 
 // src/genre-tree/treeMarkPath.ts
 var TREE_MARK_PATH = "M3171 5598 c-5 -13 -5 -24 0 -26 5 -2 9 -16 9 -31 0 -25 -3 -28 -25 -23 l-25 4 0 -116 c0 -64 3 -116 8 -116 10 0 32 51 26 61 -3 5 -1 9 4 9 5 0 15 12 21 28 7 15 26 36 43 47 30 20 88 105 71 105 -4 0 -33 -21 -62 -47 l-54 -47 6 63 c4 35 7 72 7 82 0 10 9 19 23 22 16 3 13 5 -11 6 -25 1 -35 -4 -41 -21z M2893 5485 c8 -76 24 -100 71 -100 l36 0 0 53 c0 58 -15 69 -28 20 -8 -29 -10 -30 -16 -13 -15 43 -42 89 -55 93 -11 4 -13 -6 -8 -53z M2484 5438 c8 -70 49 -169 54 -131 2 12 10 27 18 33 17 15 19 84 3 129 -9 27 -16 31 -46 31 l-36 0 7 -62z M2625 5448 c-7 -22 -24 -121 -31 -179 l-6 -57 -27 11 c-15 5 -32 19 -37 31 -9 21 -88 86 -105 86 -39 0 38 -104 118 -158 17 -12 56 -59 86 -105 30 -45 67 -92 81 -104 14 -13 26 -30 26 -38 0 -13 -9 -11 -45 11 -67 39 -58 10 21 -66 67 -65 96 -110 108 -167 4 -17 13 -34 20 -36 20 -8 66 -186 75 -289 13 -161 -8 -272 -72 -365 -12 -18 -30 -33 -39 -33 -23 0 -53 33 -79 89 -25 54 -69 112 -121 162 -35 33 -38 40 -38 92 0 58 36 172 79 252 25 47 29 125 6 125 -19 0 -30 -22 -50 -100 -9 -35 -24 -78 -32 -94 l-16 -30 -19 24 -20 25 7 -58 c8 -62 0 -127 -16 -127 -19 0 -122 107 -166 172 -52 79 -68 150 -60 273 8 108 17 129 67 149 58 23 97 64 105 109 9 47 -5 49 -63 6 l-42 -30 15 35 c17 41 20 102 5 111 -18 11 -45 -4 -64 -36 -11 -19 -20 -60 -23 -110 -4 -54 -10 -79 -18 -79 -20 0 -27 28 -30 108 -2 40 -6 76 -9 79 -3 4 -6 51 -6 105 0 86 -3 101 -21 119 -27 27 -42 20 -53 -24 -7 -28 -5 -51 7 -90 9 -30 17 -76 17 -103 l0 -49 -29 51 c-29 49 -92 114 -111 114 -6 0 -10 -11 -10 -25 0 -14 5 -25 10 -25 6 0 10 -6 10 -13 0 -7 23 -44 51 -82 61 -84 59 -82 52 -57 -3 14 2 24 15 31 12 6 23 23 25 38 2 16 5 2 6 -29 1 -46 -2 -58 -14 -58 -21 0 -19 -13 10 -70 22 -44 25 -61 25 -165 l0 -116 -47 27 c-65 36 -142 118 -176 187 -15 31 -37 62 -49 68 -21 11 -21 10 -15 -41 l6 -52 -29 6 c-37 7 -39 -7 -4 -31 14 -10 53 -40 86 -68 92 -76 130 -104 163 -119 39 -19 101 -84 109 -116 10 -42 50 -88 217 -245 50 -47 94 -102 134 -167 33 -54 65 -98 71 -98 17 0 45 -79 51 -145 4 -47 0 -76 -20 -135 -14 -41 -39 -121 -56 -177 -18 -57 -35 -103 -40 -103 -4 0 -26 13 -49 30 -31 22 -50 49 -82 117 -99 209 -116 241 -185 337 -123 172 -123 173 -128 311 -5 140 -29 245 -57 245 -12 0 -20 -11 -24 -31 -9 -46 -7 -108 3 -127 14 -26 25 -162 14 -162 -20 0 -160 99 -192 135 -19 22 -42 58 -52 80 -10 23 -27 52 -37 66 -10 13 -26 38 -34 54 -9 17 -23 45 -33 64 -15 29 -16 40 -6 80 31 116 34 139 27 205 -7 57 -11 69 -28 74 -14 3 -32 30 -54 79 -21 46 -39 73 -47 70 -13 -5 -14 -15 -3 -65 l8 -33 -49 25 c-61 31 -93 40 -93 27 0 -13 43 -41 122 -79 47 -22 72 -41 83 -61 19 -38 19 -51 0 -51 -12 0 -15 -15 -16 -72 -1 -79 -12 -134 -22 -108 -3 8 -10 48 -16 89 -14 89 -25 111 -54 111 -38 0 -50 -15 -45 -54 4 -40 2 -42 -26 -21 -29 22 -36 19 -36 -20 0 -39 39 -85 125 -145 38 -27 62 -56 99 -120 45 -79 82 -177 70 -189 -2 -3 -42 3 -87 13 -45 10 -99 21 -119 26 -47 9 -103 51 -125 93 -24 44 -83 203 -94 252 -5 25 -4 59 3 91 14 68 3 140 -23 155 -12 6 -23 8 -27 5 -14 -15 -13 -115 2 -159 39 -116 0 -116 -70 1 -22 36 -31 42 -59 42 -20 0 -35 6 -39 15 -6 16 -56 21 -56 6 0 -5 23 -25 51 -44 53 -36 158 -156 188 -216 10 -20 26 -60 36 -88 11 -29 25 -53 32 -53 8 0 13 -12 13 -30 0 -26 -4 -30 -27 -31 l-28 -1 25 -7 c26 -8 177 -87 196 -102 5 -4 50 -18 100 -29 122 -29 277 -78 300 -95 10 -8 26 -15 34 -15 35 0 160 -166 160 -212 0 -22 -32 -24 -50 -4 -11 14 -100 46 -165 61 -16 3 -68 25 -115 48 -102 49 -163 56 -168 19 -9 -62 58 -104 178 -112 63 -5 103 -14 155 -37 39 -16 91 -38 117 -47 26 -9 74 -35 106 -56 52 -33 65 -48 96 -112 20 -40 39 -95 43 -122 6 -47 6 -48 -18 -41 -33 10 -69 33 -69 45 0 6 -10 10 -23 10 -13 0 -27 4 -32 9 -6 5 -27 14 -47 20 -20 7 -53 23 -73 37 -43 29 -45 29 -45 7 0 -26 80 -96 145 -127 119 -56 274 -185 311 -259 55 -107 104 -410 104 -640 0 -162 -22 -325 -45 -333 -25 -10 -72 25 -168 123 -129 131 -140 148 -182 274 -20 60 -50 142 -66 181 -16 39 -45 131 -65 202 -24 93 -55 173 -104 274 -77 158 -78 166 -32 256 31 64 27 129 -12 181 -31 40 -39 42 -65 18 -51 -49 -55 -120 -11 -208 37 -74 37 -85 3 -85 -36 0 -94 65 -137 154 -18 39 -37 80 -40 92 -3 11 -14 29 -24 40 -10 10 -28 35 -42 54 -13 19 -40 55 -61 80 -20 25 -41 63 -47 85 -6 22 -16 62 -23 89 -20 81 -95 147 -113 100 -18 -47 -6 -92 39 -147 25 -31 45 -61 45 -67 0 -15 -42 -3 -116 31 -94 44 -156 124 -184 235 -9 36 -13 41 -38 40 -39 -2 -144 113 -186 205 -31 66 -33 68 -53 54 -11 -8 -24 -11 -27 -7 -4 4 11 -24 33 -62 39 -67 43 -86 18 -86 -8 0 -8 3 1 9 11 6 9 9 -7 14 -11 3 -25 -1 -31 -7 -7 -10 0 -16 29 -24 39 -12 203 -147 215 -178 13 -34 4 -35 -48 -6 -64 37 -126 51 -126 30 0 -26 55 -67 125 -92 46 -16 80 -36 100 -58 l29 -33 -54 -3 c-79 -5 -203 14 -249 38 -47 24 -70 54 -105 140 -43 105 -115 163 -103 83 3 -21 9 -47 13 -57 4 -11 -15 4 -42 32 -62 64 -84 67 -84 14 0 -41 24 -76 61 -87 16 -6 18 -9 8 -15 -23 -15 15 -45 117 -91 52 -24 93 -48 91 -54 -10 -28 -150 -28 -190 0 -21 15 -47 5 -47 -17 0 -5 -10 -19 -22 -29 -23 -20 -23 -20 112 -14 174 8 208 8 430 0 l185 -7 84 -41 c115 -57 180 -118 225 -212 20 -41 36 -77 36 -80 0 -14 89 -126 150 -190 74 -78 120 -144 120 -175 0 -30 10 -33 -201 52 -94 38 -131 71 -218 195 -27 37 -59 77 -71 88 l-23 20 7 -40 c4 -22 12 -44 17 -49 13 -14 11 -26 -4 -26 -7 0 -29 21 -48 48 -33 45 -34 51 -39 159 -4 89 -9 116 -22 130 -17 16 -18 16 -18 0 0 -9 -7 -17 -16 -17 -14 0 -16 -9 -11 -62 3 -35 8 -74 12 -88 l7 -25 -25 27 c-41 44 -127 118 -137 118 -18 0 -10 -57 12 -85 18 -24 20 -32 10 -57 -10 -28 -9 -30 22 -43 18 -8 54 -19 79 -26 36 -9 60 -24 99 -66 80 -83 80 -83 1 -83 -80 0 -176 21 -236 51 -107 54 -234 169 -252 228 -4 14 -12 29 -17 35 -5 6 -18 25 -28 43 -24 40 -90 64 -116 42 -22 -18 -13 -84 17 -116 13 -13 42 -32 64 -42 22 -10 74 -53 115 -96 l75 -77 -75 5 c-135 8 -243 76 -336 207 -31 44 -65 87 -77 95 -37 26 -34 -9 7 -88 20 -39 34 -72 31 -75 -2 -2 -26 11 -52 31 -90 65 -143 83 -143 49 0 -32 71 -88 150 -117 41 -15 113 -47 159 -71 46 -24 99 -46 118 -50 18 -3 33 -12 33 -18 0 -12 -111 -46 -149 -46 -12 0 -29 -8 -39 -17 -10 -10 -27 -19 -37 -19 -11 -1 -45 -9 -75 -17 -58 -16 -110 -62 -110 -97 0 -39 116 -45 167 -9 11 8 34 31 52 51 28 32 50 43 144 74 145 47 222 48 404 5 70 -17 177 -38 237 -47 128 -19 202 -43 250 -79 18 -14 73 -42 122 -61 164 -66 208 -112 243 -251 36 -141 27 -167 -44 -123 -19 12 -63 23 -111 28 -117 13 -134 25 -275 193 -63 74 -193 151 -266 157 -29 2 -66 -1 -81 -7 -24 -10 -37 -9 -80 8 -66 26 -70 9 -11 -44 72 -65 119 -80 239 -78 60 1 109 -2 117 -8 6 -6 26 -35 42 -64 17 -30 46 -64 64 -77 19 -13 49 -40 67 -61 l34 -39 -79 3 c-57 3 -80 0 -83 -9 -3 -10 -7 -10 -18 -1 -8 6 -11 15 -8 20 3 5 0 9 -5 9 -16 0 -13 -16 6 -36 36 -36 78 -44 227 -44 119 0 152 -3 188 -19 56 -24 95 -64 125 -126 13 -27 35 -68 48 -90 14 -22 25 -53 25 -69 l0 -29 -107 5 c-131 6 -193 28 -290 100 -37 28 -82 56 -98 63 -75 32 -176 123 -277 247 -34 42 -122 98 -134 85 -5 -5 103 -138 184 -226 52 -57 46 -61 -49 -31 -87 28 -173 85 -325 214 -144 123 -189 151 -254 159 -25 2 -39 3 -32 0 6 -3 12 -16 12 -29 0 -17 -4 -23 -12 -19 -7 4 -1 -5 15 -19 15 -14 46 -30 70 -36 23 -6 60 -17 82 -25 l40 -13 -52 -1 c-49 -1 -53 -3 -53 -25 0 -28 28 -36 122 -36 54 0 62 -3 91 -32 l32 -33 -52 -3 c-88 -5 -75 -26 39 -62 130 -41 178 -63 206 -93 l22 -24 -20 -18 c-12 -11 -41 -20 -74 -23 -48 -4 -60 0 -116 32 -118 69 -241 96 -279 62 -13 -12 -40 -16 -104 -16 -48 0 -95 4 -105 9 -9 5 -34 16 -55 25 -20 9 -76 53 -122 97 -47 45 -88 79 -91 76 -12 -12 6 -54 41 -100 l36 -47 -74 0 c-88 0 -112 15 -78 49 26 26 21 39 -34 84 -87 73 -132 32 -50 -45 25 -23 45 -46 45 -50 0 -4 -21 2 -46 12 -45 20 -114 27 -114 12 0 -4 16 -22 35 -40 39 -38 78 -47 255 -61 164 -14 178 -17 172 -47 -2 -13 -2 -30 2 -39 5 -13 9 -13 40 2 19 9 33 20 30 25 -4 5 4 4 15 -4 21 -13 20 -15 -44 -74 -36 -33 -65 -66 -65 -72 0 -21 68 15 142 74 38 30 84 62 103 70 73 30 203 11 312 -46 32 -17 82 -33 111 -37 l53 -6 -28 -30 c-15 -16 -44 -40 -63 -52 -63 -42 -100 -82 -100 -111 0 -25 2 -26 37 -21 28 5 47 17 73 49 65 78 175 183 224 216 34 22 61 32 88 32 43 0 122 -36 152 -69 10 -11 39 -32 62 -46 43 -25 53 -46 36 -72 -11 -17 -200 -86 -232 -85 -28 1 -122 -47 -127 -65 -3 -8 14 -13 54 -15 l58 -3 -65 -44 c-36 -25 -68 -49 -71 -53 -11 -17 -115 -10 -188 12 -105 32 -112 11 -14 -39 l56 -28 -40 -6 c-52 -9 -96 0 -154 29 -31 15 -50 19 -60 13 -15 -10 -16 -10 44 -47 20 -13 37 -27 37 -31 0 -15 -144 -71 -205 -81 -33 -5 -85 -10 -116 -10 -32 0 -63 -6 -75 -14 -18 -13 -15 -15 34 -22 l53 -7 -31 -18 c-18 -12 -30 -27 -30 -40 0 -21 4 -21 61 -16 50 4 75 14 145 57 46 28 112 63 146 77 62 24 191 62 215 63 22 0 -47 -103 -107 -161 -42 -41 -60 -66 -65 -92 -10 -49 0 -60 47 -54 65 9 99 53 124 160 20 83 49 133 94 163 22 15 40 30 40 34 0 4 8 10 18 13 9 3 31 15 49 27 31 21 31 21 26 0 -3 -11 -21 -37 -40 -58 -43 -45 -72 -106 -73 -150 0 -39 18 -49 56 -30 38 18 63 64 75 137 13 82 40 142 89 194 22 24 40 49 40 54 0 6 24 21 53 34 49 22 63 23 237 20 193 -2 278 -14 348 -50 21 -11 44 -27 52 -36 7 -9 32 -27 55 -41 49 -28 138 -147 184 -243 16 -35 42 -114 57 -175 35 -147 31 -268 -14 -436 -17 -63 -37 -166 -45 -227 -12 -94 -21 -127 -54 -195 -22 -46 -52 -94 -67 -108 -15 -14 -46 -44 -68 -67 -23 -24 -47 -43 -53 -43 -7 0 -25 -12 -41 -26 -129 -121 -526 -267 -721 -268 -104 0 -109 -15 -19 -57 75 -35 67 -35 221 -10 125 21 235 27 235 13 0 -16 -66 -72 -85 -72 -24 0 -85 -36 -85 -49 0 -14 12 -19 58 -27 35 -5 42 -4 42 10 0 9 5 17 10 17 28 4 74 20 80 29 9 14 226 119 288 139 63 21 215 43 239 34 32 -12 12 -50 -52 -102 -36 -28 -73 -55 -83 -58 -17 -7 -66 -39 -92 -60 -8 -7 -38 -32 -67 -57 l-52 -45 42 -6 c36 -6 54 -1 122 33 44 22 120 56 169 76 112 45 222 107 289 164 46 40 84 62 107 62 18 0 130 -83 130 -96 0 -8 4 -14 10 -14 5 0 39 -26 75 -59 36 -32 96 -76 132 -97 36 -21 68 -46 71 -56 5 -19 21 -22 59 -12 18 5 20 9 10 19 -7 7 -69 71 -139 143 -147 149 -161 179 -80 168 136 -19 195 -39 378 -128 78 -37 147 -68 152 -68 6 0 15 -7 20 -16 8 -14 14 -15 46 -4 l38 12 -104 57 c-125 69 -148 84 -148 93 0 16 94 7 223 -22 74 -17 146 -30 160 -30 14 0 29 -4 32 -10 7 -11 54 6 115 43 l40 24 -38 1 c-22 1 -68 11 -103 21 -35 11 -107 30 -159 41 -131 31 -295 99 -406 171 -235 153 -355 366 -357 634 -1 211 65 343 285 568 117 119 206 167 368 198 153 29 267 59 328 86 80 35 166 44 264 27 148 -26 167 -38 251 -169 71 -110 136 -165 196 -165 26 0 31 4 31 23 -1 32 -28 62 -87 91 -39 20 -66 45 -118 112 -95 123 -95 135 -5 92 25 -12 77 -31 116 -43 56 -17 76 -19 97 -10 27 11 26 11 -25 29 -113 39 -138 49 -138 57 0 14 91 55 153 68 33 7 75 10 95 7 27 -4 31 -3 17 4 -19 8 -19 9 3 9 12 1 22 7 22 15 0 10 7 12 22 8 12 -3 17 -7 10 -10 -6 -2 -12 -10 -12 -18 0 -8 -6 -14 -12 -15 -27 -2 39 -17 80 -18 29 -1 42 3 42 13 0 20 -19 32 -67 45 -49 13 -53 22 -20 44 49 32 128 39 235 21 56 -9 112 -14 126 -10 26 6 96 69 96 86 0 6 -32 10 -77 10 -84 0 -126 -7 -118 -20 9 -14 -17 -24 -67 -24 -34 -1 -48 3 -48 13 0 8 -7 11 -20 8 -17 -4 -18 -2 -9 14 5 11 14 17 20 14 5 -4 9 0 9 8 0 8 16 35 35 60 35 45 35 46 14 57 -18 10 -23 8 -37 -12 -67 -95 -162 -167 -297 -225 -55 -23 -99 -47 -98 -53 2 -5 -6 -10 -18 -10 -27 0 -23 8 31 71 100 117 116 131 161 155 80 40 80 70 1 41 l-47 -18 36 38 c47 49 59 73 59 120 0 67 -24 80 -82 46 -49 -29 -76 -85 -89 -183 -10 -81 -9 -80 -89 -174 -20 -22 -43 -53 -53 -68 -28 -45 -89 -61 -217 -56 -70 2 -114 8 -118 15 -4 6 -28 13 -54 15 l-46 3 53 71 c51 68 100 104 140 104 50 0 125 73 125 122 0 30 0 31 -45 26 -28 -4 -59 -16 -82 -34 -30 -23 -35 -24 -28 -8 22 51 37 105 31 111 -13 13 -47 -34 -105 -146 -72 -138 -171 -248 -261 -292 -62 -30 -164 -44 -242 -34 -48 7 -50 8 -45 34 14 70 51 144 95 190 42 43 56 51 127 69 44 12 98 24 120 27 99 15 155 57 155 117 l0 31 -51 -5 c-40 -4 -58 -12 -87 -40 -56 -52 -66 -58 -131 -78 l-60 -18 10 27 c6 14 36 62 68 106 70 96 91 136 91 170 0 41 -18 29 -50 -35 -30 -59 -31 -60 -74 -60 -56 0 -71 -18 -101 -115 -23 -75 -43 -114 -72 -145 -8 -8 -41 -61 -73 -117 -35 -59 -75 -113 -95 -128 -37 -29 -177 -85 -210 -85 -35 0 -222 -134 -282 -202 -31 -35 -64 -64 -72 -66 -22 -4 -68 116 -88 223 -20 113 -5 256 37 340 37 76 124 182 195 238 140 110 221 137 416 137 136 0 171 6 186 28 9 15 2 17 -76 18 -47 0 -127 4 -178 9 -167 15 -274 -28 -423 -170 -72 -68 -114 -95 -128 -81 -12 12 17 138 44 194 64 132 229 243 439 298 182 46 319 21 425 -80 68 -65 144 -115 202 -135 119 -41 155 -32 72 17 -88 52 -224 144 -224 152 0 14 51 20 210 22 115 2 160 0 175 -10 19 -12 18 -13 -8 -9 -36 6 -45 -9 -11 -17 56 -15 117 -51 183 -110 66 -59 119 -86 169 -86 54 0 31 59 -35 90 -167 77 -176 82 -158 93 25 13 138 -8 201 -37 27 -13 67 -43 89 -66 50 -53 84 -70 134 -70 37 0 71 19 71 40 0 24 -62 57 -129 70 -40 7 -74 17 -77 22 -3 4 24 8 60 8 36 0 68 -4 71 -10 3 -5 26 -10 51 -10 50 0 57 15 23 46 -24 21 -113 25 -226 10 -50 -7 -65 -6 -77 7 -19 18 -100 37 -160 37 -74 0 -136 12 -136 26 0 17 11 23 53 28 32 4 83 29 97 47 8 10 71 40 99 47 28 7 159 8 309 1 50 -2 92 -1 92 4 0 4 14 7 30 7 23 0 30 -4 30 -20 0 -15 -7 -20 -25 -20 -42 0 -28 -17 30 -39 75 -28 103 -27 117 4 8 18 19 25 38 25 34 0 47 35 23 62 -24 27 -70 31 -190 18 -101 -11 -112 -10 -173 10 -36 12 -104 24 -152 27 -49 3 -88 9 -88 13 0 8 35 26 66 35 12 3 37 21 55 40 19 20 67 58 106 86 57 39 86 52 134 60 71 11 170 58 193 91 34 49 10 51 -66 5 -52 -31 -154 -65 -165 -54 -11 12 9 25 67 47 33 12 60 26 60 30 0 5 15 17 34 28 31 18 67 84 53 98 -15 15 -69 -17 -124 -75 -35 -36 -63 -63 -63 -58 0 4 14 31 30 60 43 77 39 180 -7 151 -39 -24 -56 -62 -63 -141 -7 -87 -27 -127 -98 -200 -50 -52 -120 -103 -139 -103 -8 0 -22 -8 -31 -17 -31 -31 -26 11 12 94 33 74 61 171 53 180 -3 2 -17 1 -32 -3 -38 -10 -65 -74 -75 -185 -9 -97 -31 -147 -79 -176 -31 -20 -81 -71 -81 -83 0 -5 -24 -16 -52 -26 -29 -9 -58 -24 -64 -32 -7 -9 -33 -17 -70 -19 l-59 -4 55 48 c120 105 133 126 66 103 -19 -6 -58 -36 -88 -66 -29 -30 -72 -64 -96 -76 -41 -19 -50 -20 -163 -9 -168 16 -237 52 -196 103 21 27 121 88 143 88 60 0 183 34 234 65 30 18 74 36 97 40 85 14 180 99 131 118 -16 5 -19 13 -14 33 7 25 5 25 -26 19 -52 -11 -83 -31 -122 -76 -54 -63 -94 -86 -197 -109 -52 -12 -102 -24 -111 -26 -28 -8 -22 22 10 44 15 11 35 34 45 51 16 27 16 31 2 31 -8 0 -18 -7 -22 -16 -8 -23 -23 2 -23 40 0 23 -3 27 -12 18 -14 -14 -42 -16 -33 -2 3 6 4 10 1 10 -9 0 -37 -61 -62 -133 -29 -84 -85 -162 -137 -189 -24 -12 -67 -21 -110 -24 -40 -2 -100 -6 -134 -9 l-62 -4 36 72 c20 39 48 84 62 98 29 29 86 122 96 157 9 32 -20 29 -42 -5 -17 -27 -128 -174 -222 -297 -45 -58 -101 -96 -141 -96 -48 0 -9 184 59 284 41 59 113 107 234 156 51 20 141 67 198 102 57 36 118 72 134 80 40 21 155 46 240 53 48 5 82 14 113 32 58 34 150 44 258 28 41 -6 57 -4 75 9 17 12 46 16 111 16 88 0 116 12 57 24 -17 3 -48 6 -69 6 -21 0 -43 6 -49 14 -14 17 -8 22 40 31 30 5 36 10 32 26 -4 13 0 19 12 19 23 0 95 44 129 79 34 35 30 67 -6 55 -13 -4 -31 -7 -41 -6 -11 0 -38 -25 -68 -64 -28 -35 -53 -64 -55 -64 -2 0 7 22 21 50 14 27 25 60 25 74 0 14 5 37 11 53 7 19 7 29 0 31 -6 2 -11 17 -11 33 0 16 -4 29 -10 29 -5 0 -10 -19 -10 -42 0 -50 -37 -158 -74 -222 -28 -48 -90 -86 -141 -86 l-29 0 36 38 c20 20 43 52 52 70 16 31 16 32 -5 32 -25 0 -94 -47 -109 -75 -19 -35 -161 -104 -245 -120 -42 -8 -85 -15 -96 -15 -18 0 -18 1 -2 35 9 19 20 35 25 35 4 0 8 6 8 13 0 7 13 34 30 60 30 48 75 77 182 117 58 21 112 66 176 146 26 31 57 57 84 69 124 52 167 75 177 93 17 33 -14 35 -71 6 -29 -14 -69 -32 -89 -39 l-38 -14 20 51 c11 28 24 59 29 68 10 19 -20 60 -45 60 -18 0 -21 46 -4 52 6 2 14 26 16 53 4 43 2 52 -16 63 -20 11 -21 10 -21 -25 -1 -209 -5 -248 -32 -305 -34 -73 -116 -188 -133 -188 -8 0 -20 -6 -27 -13 -7 -7 -29 -18 -48 -24 -19 -6 -52 -18 -72 -27 -34 -15 -38 -15 -38 -1 0 35 32 73 89 109 60 37 77 51 45 39 -14 -5 -14 -3 -3 14 7 13 9 28 4 39 -5 11 -7 24 -6 29 1 6 -19 -11 -44 -37 -25 -26 -45 -44 -45 -40 0 4 18 34 40 67 30 45 40 69 40 100 0 53 -11 67 -46 63 -22 -2 -34 -13 -53 -47 -14 -25 -26 -40 -29 -33 -2 7 -10 12 -17 12 -10 0 -14 -33 -17 -142 l-4 -143 -63 -127 c-39 -81 -74 -137 -94 -154 -51 -43 -167 -87 -167 -63 0 6 26 38 58 72 32 34 66 73 75 87 18 26 23 100 8 100 -5 0 -22 -19 -38 -42 -15 -23 -52 -60 -81 -82 -31 -25 -61 -59 -74 -85 -37 -75 -125 -156 -220 -201 -46 -22 -101 -43 -121 -47 -32 -5 -37 -3 -37 13 0 36 50 229 70 269 10 23 38 95 61 160 39 116 84 211 117 248 12 13 13 20 4 29 -9 9 -21 5 -49 -18 -58 -46 -166 -272 -249 -519 -37 -110 -73 -207 -80 -216 -8 -8 -14 -21 -14 -28 0 -8 -19 -54 -41 -105 -23 -50 -61 -146 -84 -212 -49 -144 -77 -193 -152 -274 -71 -77 -89 -77 -115 2 -11 33 -27 59 -36 62 -19 6 -21 27 -23 201 -2 197 49 394 151 580 33 61 72 135 86 165 118 253 140 288 273 462 87 112 121 167 121 195 0 37 -25 27 -75 -29 -42 -48 -45 -50 -38 -23 13 50 9 145 -8 156 -19 12 -30 7 -50 -22 -23 -33 -15 -116 12 -124 28 -9 35 -49 12 -73 -10 -11 -36 -45 -58 -76 -22 -31 -44 -56 -48 -56 -12 0 -3 78 17 160 8 36 15 84 16 107 0 23 4 44 9 47 4 3 11 37 14 75 3 39 14 86 26 109 26 50 80 97 94 83 16 -16 59 -13 85 5 30 21 52 66 52 109 0 33 -2 35 -32 35 -59 0 -78 -12 -118 -69 -21 -31 -55 -74 -74 -96 l-35 -40 -1 41 c0 23 7 60 15 83 15 43 92 151 124 173 20 14 55 77 48 85 -3 2 -8 -5 -12 -16 -7 -24 -35 -17 -35 9 0 23 -13 32 -35 24 -9 -4 -12 -9 -7 -13 17 -10 2 -62 -16 -59 -11 2 -30 -24 -61 -87 -34 -68 -46 -84 -49 -67 -2 12 -8 22 -13 22 -5 0 -9 -10 -9 -22 -1 -23 -1 -23 -16 -3 -9 11 -24 37 -34 58 -11 24 -20 34 -23 25 -3 -7 -6 25 -6 72 -1 105 -21 98 -26 -10 -3 -43 -9 -76 -16 -81 -10 -6 -10 -11 0 -23 14 -16 3 -22 -15 -8 -5 4 2 -2 15 -13 51 -41 78 -76 96 -128 26 -70 25 -187 -3 -292 -13 -49 -21 -109 -20 -155 0 -104 -54 -310 -81 -310 -6 0 -11 3 -11 8 -1 44 -24 191 -41 259 l-22 85 27 108 c30 123 34 211 10 231 -20 16 -40 5 -72 -42 -21 -30 -23 -42 -18 -97 3 -36 1 -60 -4 -57 -17 11 -34 81 -34 150 -1 64 2 76 39 140 22 39 45 84 52 100 17 43 16 92 -2 98 -17 7 -17 8 -44 -73 -12 -36 -34 -87 -50 -113 -33 -56 -41 -48 -41 39 0 41 -4 54 -15 54 -11 0 -15 -18 -17 -80 -2 -45 -7 -80 -13 -80 -5 0 -10 4 -10 8 0 5 -8 16 -18 26 -58 58 -70 132 -53 314 7 69 6 92 -3 92 -6 0 -13 -6 -16 -12z m321 -503 c3 -20 4 -39 0 -42 -3 -4 -6 6 -6 20 0 17 -5 27 -15 27 -16 0 -20 12 -8 23 14 14 22 6 29 -28z m-1006 -80 c0 -8 -9 -15 -19 -15 -29 0 -35 18 -9 23 13 2 24 5 26 6 1 0 2 -6 2 -14z m327 -27 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m-462 -358 c3 -5 1 -10 -4 -10 -6 0 -11 5 -11 10 0 6 2 10 4 10 3 0 8 -4 11 -10z m-835 -40 c-6 -11 -15 -20 -19 -20 -5 0 -7 9 -4 20 3 11 12 20 20 20 11 0 11 -4 3 -20z m864 -25 c3 -9 0 -15 -9 -15 -9 0 -15 -10 -16 -27 0 -27 -1 -27 -13 7 -10 25 -10 37 -2 42 18 12 33 9 40 -7z m-892 -863 c38 2 68 0 68 -4 0 -5 -33 -8 -73 -8 -49 0 -80 -5 -95 -16 -21 -14 -22 -14 -22 5 0 14 -6 21 -20 21 -11 0 -20 2 -20 4 0 2 -3 12 -6 21 -6 13 1 13 47 -5 40 -16 70 -21 121 -18z m3218 -91 c0 -10 -7 -21 -15 -25 -11 -4 -15 1 -15 19 0 16 6 25 15 25 8 0 15 -9 15 -19z m-3479 -32 c-14 -5 -30 -14 -37 -20 -8 -7 -13 -3 -17 11 -5 18 0 20 36 19 38 0 40 -1 18 -10z m3359 -572 c0 -7 -7 -22 -15 -33 -13 -17 -14 -16 -4 14 11 33 19 41 19 19z m-3345 -198 c7 -22 -7 -39 -33 -39 -10 0 -10 4 0 20 11 17 10 22 -2 30 -12 8 -11 10 7 10 13 0 24 -8 28 -21z m445 -37 c0 -23 -35 -8 -38 16 -3 21 -2 22 17 10 12 -7 21 -19 21 -26z m-310 -647 c-28 -30 -60 -33 -60 -7 0 26 9 32 48 32 l35 0 -23 -25z M3684 5414 c-14 -21 -16 -41 -10 -124 4 -62 2 -100 -3 -100 -9 0 -17 26 -25 84 -1 11 -8 22 -14 24 -9 3 -12 -27 -12 -105 0 -69 -6 -130 -16 -164 -24 -86 -24 -85 -33 -70 -6 9 -10 3 -14 -17 -4 -20 -23 -43 -59 -72 -29 -23 -54 -46 -54 -51 -1 -5 -3 -39 -4 -76 -1 -46 -4 -60 -9 -43 -6 21 -9 15 -20 -35 -16 -74 -29 -99 -97 -197 -35 -49 -54 -86 -54 -105 0 -31 59 -200 60 -171 0 9 6 21 14 25 13 7 13 16 0 68 -17 72 -12 78 75 93 106 19 127 33 145 95 20 70 65 111 186 172 83 42 89 47 75 62 -9 8 -14 23 -11 32 5 14 5 14 -6 1 -7 -8 -41 -25 -75 -37 -54 -19 -61 -19 -56 -5 10 26 43 72 91 126 46 53 77 104 68 114 -6 6 -95 -81 -143 -141 l-30 -38 -7 80 c-4 45 -5 89 -1 98 3 10 31 34 63 53 61 37 147 112 164 144 21 38 -53 8 -126 -52 -98 -80 -100 -81 -92 -46 12 47 54 133 81 166 14 16 25 42 25 56 l-1 27 -25 -30 -26 -30 6 53 c3 28 9 74 12 100 5 40 3 50 -10 55 -10 4 -22 -2 -32 -19z m-79 -654 c0 -125 0 -126 -33 -176 -22 -36 -56 -67 -109 -103 -42 -28 -82 -51 -90 -51 -20 0 -16 22 11 59 13 18 30 46 36 62 7 16 16 29 20 29 5 0 13 33 20 73 16 102 29 149 40 142 6 -4 10 -2 10 3 0 5 13 25 30 43 16 19 30 38 30 42 0 5 8 7 18 5 15 -3 17 -17 17 -128z M2287 5348 c-10 -10 -22 -16 -27 -13 -5 3 -8 -3 -8 -12 1 -10 -2 -37 -6 -59 -6 -32 -4 -43 7 -47 23 -9 67 61 67 105 0 44 -9 51 -33 26z M1853 5256 c4 -22 11 -42 17 -46 7 -4 14 -26 17 -49 3 -22 10 -41 15 -41 5 0 7 12 4 28 -3 15 -8 46 -11 69 -4 23 -16 49 -27 60 -21 18 -21 18 -15 -21z M1780 5267 c0 -47 15 -79 42 -93 l30 -16 -7 34 c-4 18 -12 44 -19 58 -12 28 -46 40 -46 17z M1960 5120 c0 -21 30 -70 49 -80 27 -14 31 -13 31 10 0 11 5 20 10 20 6 0 8 -11 4 -25 -6 -23 -4 -25 30 -25 20 0 36 4 36 8 0 18 -68 72 -109 87 -52 18 -51 18 -51 5z M4127 5076 c-4 -10 -7 -45 -7 -79 0 -42 -6 -70 -18 -88 -56 -85 -73 -107 -106 -138 -20 -19 -36 -39 -36 -43 0 -18 34 -6 62 23 29 28 34 30 84 24 41 -6 59 -3 83 11 37 22 44 37 28 59 -16 21 -72 22 -95 2 -21 -19 -32 -22 -32 -7 0 5 38 35 84 66 77 51 106 84 106 119 0 26 -43 16 -77 -17 l-33 -32 0 47 c0 34 -4 47 -14 47 -8 0 -16 5 -18 12 -3 7 -7 5 -11 -6z M1049 5043 c-8 -10 -9 -14 -2 -10 7 5 28 -18 57 -63 48 -74 62 -86 52 -45 -4 15 -2 25 4 25 15 0 -17 72 -41 93 -27 22 -53 22 -70 0z M3400 4964 c-14 -37 -12 -60 6 -75 14 -11 18 -10 30 6 19 26 18 81 -2 89 -23 9 -24 8 -34 -20z M3910 4933 c-29 -20 -40 -33 -40 -50 0 -33 63 6 75 45 8 26 -2 28 -35 5z M3401 4844 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z M4532 4829 c-8 -12 -9 -18 -3 -14 7 4 11 -8 12 -32 1 -21 4 -51 8 -68 6 -26 8 -22 13 29 5 39 3 67 -5 83 l-12 23 -13 -21z M1017 4820 c-8 -30 16 -52 65 -60 41 -6 45 -5 40 12 -5 20 -68 68 -88 68 -6 0 -14 -9 -17 -20z M2529 4778 c-11 -21 -7 -134 7 -185 8 -30 24 -19 24 17 0 16 7 35 15 44 18 17 20 70 4 115 -13 36 -33 40 -50 9z M830 4767 c0 -24 30 -116 40 -122 11 -7 1 92 -12 118 -10 20 -28 23 -28 4z M4660 4751 c0 -5 -9 -12 -19 -16 -23 -7 -101 -81 -101 -95 0 -26 50 -6 98 38 51 47 67 82 37 82 -8 0 -15 -4 -15 -9z M764 4719 c-7 -13 82 -106 92 -96 11 11 -9 43 -46 75 -27 23 -41 29 -46 21z M1887 4634 c-18 -18 -6 -91 21 -131 79 -118 125 -171 138 -159 10 9 8 18 -9 46 -12 19 -25 37 -29 38 -4 2 -8 25 -8 50 0 60 -15 115 -38 135 -20 19 -65 31 -75 21z M1030 4579 c0 -35 54 -169 68 -169 6 0 12 -8 12 -17 1 -17 2 -17 15 0 11 16 11 26 -5 71 -25 75 -47 114 -70 126 -17 9 -20 8 -20 -11z M697 4553 c19 -54 69 -92 112 -85 36 5 46 34 20 58 -11 9 -22 14 -25 11 -4 -4 -18 3 -32 13 -32 26 -84 28 -75 3z M1150 4486 c0 -36 52 -76 101 -76 47 0 57 29 12 32 -16 1 6 4 47 8 l75 6 -75 2 c-41 1 -85 8 -96 15 -12 6 -31 18 -43 25 -19 12 -21 11 -21 -12z M3909 4427 c-16 -27 -19 -51 -19 -149 0 -111 1 -118 20 -118 15 0 24 14 40 68 39 124 39 215 -1 225 -15 4 -25 -2 -40 -26z M4723 4375 c-30 -13 -33 -18 -33 -60 l0 -45 24 15 c27 18 49 48 60 83 9 26 -4 28 -51 7z M5002 4348 c-5 -7 -23 -40 -40 -73 -32 -65 -106 -146 -156 -172 -17 -9 -51 -21 -75 -28 -46 -11 -63 -28 -38 -38 7 -3 47 2 87 10 58 12 85 13 128 4 96 -19 162 -13 162 15 0 11 -19 14 -82 15 -46 0 -91 4 -101 8 -17 6 -17 8 2 25 11 10 44 25 73 32 34 8 43 13 27 13 -31 1 -44 24 -23 41 8 7 14 21 14 31 0 11 10 36 23 57 33 52 39 72 23 72 -7 0 -18 -6 -24 -12z M3632 4290 c-52 -37 -68 -69 -74 -145 -3 -33 -3 -54 0 -47 3 10 7 9 16 -4 12 -15 18 -14 79 15 69 33 101 66 95 98 -4 22 -37 30 -49 11 -6 -8 -7 10 -3 45 8 68 -2 72 -64 27z M5016 4271 c-11 -12 -16 -24 -12 -28 9 -9 39 22 34 37 -2 7 -10 4 -22 -9z M470 4264 c0 -9 8 -28 18 -42 10 -15 22 -33 27 -40 8 -15 -67 31 -102 62 -13 11 -23 14 -23 8 0 -7 -7 -12 -15 -12 -19 0 -19 -15 2 -50 20 -35 48 -48 118 -56 37 -5 55 -11 55 -20 0 -8 11 -14 25 -14 14 0 25 4 25 10 0 5 -22 43 -50 84 -49 73 -80 100 -80 70z M2382 4102 c-5 -9 -12 -42 -14 -72 -9 -96 18 -125 39 -43 17 66 17 120 -2 127 -8 3 -19 -2 -23 -12z M4235 3850 c36 -39 118 -80 162 -80 30 0 93 41 93 61 0 5 -14 15 -30 24 -25 13 -44 14 -107 6 -43 -5 -80 -6 -83 -1 -3 5 -19 12 -35 16 l-30 7 30 -33z M133 3667 c-19 -41 -15 -59 18 -86 30 -24 135 -55 151 -45 11 7 10 42 -2 49 -5 3 -10 11 -10 17 0 6 7 5 17 -3 12 -10 15 -10 9 -1 -13 22 -84 52 -125 52 -33 0 -40 4 -43 22 -3 21 -4 21 -15 -5z M5265 3631 c-16 -10 -43 -33 -60 -51 l-30 -32 83 4 c77 3 86 6 107 30 35 41 24 68 -29 68 -23 0 -54 -8 -71 -19z M400 3512 c0 -5 -53 -12 -117 -16 -64 -4 -120 -9 -125 -12 -16 -10 -8 -53 13 -65 51 -27 183 0 213 43 13 17 19 18 68 9 29 -5 66 -13 81 -16 22 -6 26 -4 21 9 -5 12 0 16 17 17 13 1 -3 7 -36 14 -106 22 -135 26 -135 17z M5090 3480 c0 -5 9 -10 20 -10 11 0 47 -13 80 -30 57 -29 121 -39 147 -22 22 14 19 45 -7 59 -30 15 -240 18 -240 3z M926 3272 c-12 -11 -6 -94 9 -122 16 -31 39 -47 86 -60 24 -7 29 -5 39 21 19 44 5 94 -34 124 -35 27 -90 47 -100 37z M500 3049 c0 -23 9 -62 20 -85 17 -33 30 -46 70 -62 34 -14 56 -32 70 -54 16 -28 109 -108 125 -108 3 0 5 7 5 15 0 12 7 14 28 9 15 -3 -8 11 -50 32 -42 20 -80 44 -83 53 -4 9 -9 46 -12 84 -5 61 -9 70 -41 98 -34 30 -59 43 -107 55 -24 6 -25 4 -25 -37z M5203 2779 c-18 -11 -35 -29 -38 -40 -7 -22 -20 -25 -32 -6 -8 13 -20 -26 -22 -74 -1 -30 25 -36 35 -7 4 15 9 17 20 7 8 -6 14 -18 14 -26 0 -11 7 -9 27 7 43 33 63 71 63 118 0 49 -14 53 -67 21z M5307 2622 c-34 -32 -86 -72 -115 -88 -51 -29 -61 -46 -29 -52 25 -5 198 81 229 114 15 16 30 41 33 57 7 25 5 27 -24 27 -25 0 -45 -13 -94 -58z M447 2652 c-10 -10 -15 -21 -12 -24 7 -7 75 24 75 34 0 15 -47 8 -63 -10z M263 2600 c-12 -5 -26 -18 -32 -28 -8 -15 -6 -24 13 -41 33 -31 84 -27 160 13 68 36 68 47 1 51 -16 1 -50 5 -75 8 -25 4 -55 3 -67 -3z M996 2540 c-37 -11 -102 -74 -115 -112 l-10 -28 58 0 c48 0 65 5 98 29 49 35 87 86 79 106 -6 17 -62 19 -110 5z M673 2324 c-43 -18 -42 -43 1 -88 33 -35 35 -36 114 -36 70 0 80 2 78 18 0 10 6 16 16 16 13 -1 9 8 -18 40 -19 22 -45 46 -57 53 -29 16 -94 15 -134 -3z M4790 2120 c-9 -17 -5 -20 43 -29 72 -15 166 -19 169 -9 2 5 11 6 21 3 20 -8 23 -35 5 -35 -7 -1 -2 -7 12 -15 29 -17 113 -20 141 -5 24 13 25 36 2 48 -10 5 -58 12 -108 15 -49 3 -117 12 -150 20 -110 28 -124 28 -135 7z M4881 2021 c6 -17 30 -50 53 -75 33 -36 49 -46 74 -46 25 0 32 4 32 19 0 25 -60 77 -99 86 -17 4 -36 15 -41 26 -17 30 -30 23 -19 -10z";
 
 // src/genre-tree/TreeMarkIcon.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function TreeMarkIcon({ className: className2 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { viewBox: "0 0 551 567", fill: "currentColor", className: className2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { transform: "translate(0 567) scale(0.1 -0.1)", d: TREE_MARK_PATH }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { viewBox: "0 0 551 567", fill: "currentColor", className: className2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { transform: "translate(0 567) scale(0.1 -0.1)", d: TREE_MARK_PATH }) });
 }
 
 // src/genre-tree/GenrePlayActions.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function PlayIcon({ kind }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { "aria-hidden": "true", className: "relative flex items-center justify-center w-5 h-5", children: [
-    kind === "tree" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TreeMarkIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35" }),
-    kind === "map" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RegionGlobeIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35" }),
-    kind === "tree-map" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TreeMarkIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35 [clip-path:inset(0_50%_0_0)]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RegionGlobeIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35 [clip-path:inset(0_0_0_50%)]" })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { "aria-hidden": "true", className: "relative flex items-center justify-center w-5 h-5", children: [
+    kind === "tree" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TreeMarkIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35" }),
+    kind === "map" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RegionGlobeIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35" }),
+    kind === "tree-map" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TreeMarkIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35 [clip-path:inset(0_50%_0_0)]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RegionGlobeIcon, { className: "absolute -left-1.5 -top-1.5 w-8 h-8 opacity-35 [clip-path:inset(0_0_0_50%)]" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.Play, { className: "relative w-5 h-5 fill-[var(--color-surface)]" })
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react12.Play, { className: "relative w-5 h-5 fill-[var(--color-surface)]" })
   ] });
 }
 function playOptions(playlist) {
@@ -1650,13 +1645,13 @@ function playOptions(playlist) {
 function GenrePlayActions({ genrePlaylist, playback }) {
   const { isPlaying, setIsPlaying } = (0, import_player4.usePlayer)();
   const options = playOptions(genrePlaylist);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: options.map((option) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: options.map((option) => {
     const isCurrent = playback.playing?.uuid === genrePlaylist.uuid && (option.selection === void 0 || playback.playing.selectionKey === "" || playback.playing.selectionKey === (0, import_genre_tree10.genreMusicSelectionKey)(option.selection).join());
     const playing = isCurrent && isPlaying;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       import_ui10.ActionButton,
       {
-        icon: playing ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PlayIcon, { kind: option.icon }),
+        icon: playing ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react12.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PlayIcon, { kind: option.icon }),
         label: playing ? "Pause" : option.label,
         caption: String(option.count),
         disabled: option.count === 0,
@@ -1666,9 +1661,7 @@ function GenrePlayActions({ genrePlaylist, playback }) {
             setIsPlaying(!isPlaying);
             return;
           }
-          playback.play(genrePlaylist, option.selection).catch((error) => {
-            console.error("Failed to load genre playlist tracks:", error);
-          });
+          void playback.play(genrePlaylist, option.selection);
         }
       },
       option.key
@@ -1682,7 +1675,7 @@ var import_genre_tree18 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/ClampedText.tsx
 var import_react12 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ClampedText({ children, className: className2 = "" }) {
   const ref = (0, import_react12.useRef)(null);
   const [expanded, setExpanded] = (0, import_react12.useState)(false);
@@ -1692,9 +1685,9 @@ function ClampedText({ children, className: className2 = "" }) {
     if (!element || expanded) return;
     setOverflows(element.scrollHeight > element.clientHeight);
   }, [children, expanded]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { ref, className: `${className2} ${expanded ? "" : "line-clamp-3"}`, children }),
-    (overflows || expanded) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { ref, className: `${className2} ${expanded ? "" : "line-clamp-3"}`, children }),
+    (overflows || expanded) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "button",
       {
         type: "button",
@@ -1714,13 +1707,13 @@ var import_zod = require("zod");
 var import_fa4 = require("react-icons/fa");
 var import_ui11 = require("@behindthemusictree/ui");
 var import_auth2 = require("@behindthemusictree/app-kit/auth");
+var import_transport4 = require("@behindthemusictree/app-kit/transport");
 var import_transport5 = require("@behindthemusictree/app-kit/transport");
 var import_transport6 = require("@behindthemusictree/app-kit/transport");
-var import_transport7 = require("@behindthemusictree/app-kit/transport");
 var import_player5 = require("@behindthemusictree/app-kit/player");
 var import_player6 = require("@behindthemusictree/app-kit/player");
-var import_popup5 = require("@behindthemusictree/app-kit/popup");
-var import_transport8 = require("@behindthemusictree/app-kit/transport");
+var import_popup4 = require("@behindthemusictree/app-kit/popup");
+var import_transport7 = require("@behindthemusictree/app-kit/transport");
 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");
@@ -1729,15 +1722,15 @@ var import_genre_tree16 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/MusicBrainzRecordingLink.tsx
 var import_genre_tree11 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function MusicBrainzRecordingLink({
   song,
   children,
   className: className2 = ""
 }) {
   const url = (0, import_genre_tree11.musicBrainzRecordingUrl)(song);
-  if (!url) return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  if (!url) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "a",
     {
       href: url,
@@ -1754,9 +1747,9 @@ function MusicBrainzRecordingLink({
 // src/genre-tree/GenrePlaylistTracks.tsx
 var import_genre_tree17 = require("@behindthemusictree/app-kit/genre-tree");
 var import_track_noun2 = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var CATALOGUE_PAGE_SIZE = 100;
-var SongPageSchema = (0, import_transport6.PaginatedResponseSchema)(import_genre_tree15.SongDetailedSchema).extend({
+var SongPageSchema = (0, import_transport5.PaginatedResponseSchema)(import_genre_tree15.SongDetailedSchema).extend({
   overallTotal: import_zod.z.number().nullable(),
   page: import_zod.z.number().nullable(),
   totalPages: import_zod.z.number().nullable()
@@ -1788,12 +1781,12 @@ function GenrePlaylistTracks({
   const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist, playNewTrackListFromGenreCatalogue } = (0, import_genre_tree16.useTrackList)();
   const { session, sessionRestored } = (0, import_auth2.useSession)();
   const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player5.usePlayer)();
-  const { showPopup } = (0, import_popup5.usePopup)();
+  const { showPopup } = (0, import_popup4.usePopup)();
   const trackNoun = (0, import_track_noun2.useTrackNoun)();
   const uuid = genrePlaylist?.uuid;
   const genreName = selectedGenreName ?? genrePlaylist?.name ?? "Genre";
-  const { fetchBound } = (0, import_transport5.usePlaybackFetch)(getBackendBaseUrl);
-  const playback = (0, import_transport5.usePlaybackContext)();
+  const { fetchBound } = (0, import_transport4.usePlaybackFetch)(getBackendBaseUrl);
+  const playback = (0, import_transport4.usePlaybackContext)();
   const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = (0, import_react_query.useInfiniteQuery)({
     queryKey: [...scope === "me" ? uuid ? import_genre_tree13.genrePlaylistQueryKeys.me.tracks(uuid) : ["missing-personal-genre-playlist", genreUuid] : artist ? [...import_genre_tree14.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), "artist", artist.uuid] : import_genre_tree14.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), ...playback.key ? [playback.key] : []],
     queryFn: async ({ pageParam }) => {
@@ -1808,7 +1801,7 @@ function GenrePlaylistTracks({
         {},
         { genre: genreUuid, ...(0, import_genre_tree12.genreMusicQueryParams)(selection), ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
       );
-      const parsed = (0, import_transport7.parseWithLog)(SongPageSchema, response, "GenrePlaylistTracks");
+      const parsed = (0, import_transport6.parseWithLog)(SongPageSchema, response, "GenrePlaylistTracks");
       return { tracks: parsed.results, total: parsed.overallTotal, nextPage: parsed.next ? nextCursor(parsed.next) : null };
     },
     initialPageParam: scope === "me" ? 1 : "",
@@ -1840,35 +1833,36 @@ function GenrePlaylistTracks({
     }) : scope === "reference" ? playNewTrackListFromGenreCatalogue({ uuid: genreUuid, name: genreName }, scope, { startSongUuid, ...selection && { selection } }) : genrePlaylist ? playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid }) : Promise.reject(new Error("Personal genre has no playlist"));
     started.catch((error) => {
       console.error("Failed to play genre playlist:", error);
-      showPopup(/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InternalErrorPopup, { errorCode: import_transport8.ErrorCode.CLIENT_UNKNOWN }));
+      if (error instanceof import_genre_tree16.TracksFailureAlreadyReportedError) return;
+      showPopup(/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InternalErrorPopup, { errorCode: error instanceof import_transport7.AppError ? error.code : import_transport7.ErrorCode.CLIENT_UNKNOWN }));
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui11.PanelSection, { title: `${(0, import_track_noun2.capitalize)(trackNoun.plural)}${total !== void 0 ? ` (${total})` : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui11.PanelSection, { title: `${(0, import_track_noun2.capitalize)(trackNoun.plural)}${total !== void 0 ? ` (${total})` : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
     renderTracksToolbar?.(),
-    scope === "me" && !genrePlaylist ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { children: "\u2014" }) : isPending ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui11.Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { role: "alert", children: [
+    scope === "me" && !genrePlaylist ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { children: "\u2014" }) : isPending ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui11.Skeleton, { className: "h-4 w-3/4", "aria-busy": "true" }) : isError && tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", { role: "alert", children: [
       "Couldn't load ",
       trackNoun.plural,
       ".",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
-    ] }) : tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("ul", { className: "mt-1 max-h-64 overflow-y-auto text-body [container-type:inline-size]", "aria-label": `${genreName} ${trackNoun.plural}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", className: "underline", onClick: () => void refetch(), children: "Retry" })
+    ] }) : tracks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("ul", { className: "mt-1 max-h-64 overflow-y-auto text-body [container-type:inline-size]", "aria-label": `${genreName} ${trackNoun.plural}`, children: [
       tracks.map((track, index) => {
         const label = track.artists?.length ? `${track.title} \u2014 ${track.artists.map((artist2) => artist2.name).join(", ")}` : track.title;
         const isCurrent = playerTrackObject?.track.id === track.uuid;
         const isPlaying = isCurrent && playState === import_player6.PlayStates.PLAYING;
-        const text = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: TEXT_CELL, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: TITLE_CELL, children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree15.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
-          track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: SEPARATOR, children: " \u2014 " }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_genre_tree17.ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
-          track.album && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: ALBUM_CELL, children: track.album.name })
+        const text = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: TEXT_CELL, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: TITLE_CELL, children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree15.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MusicBrainzRecordingLink, { song: track, className: "hover:underline focus-visible:underline", children: track.title }) : track.title }),
+          track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: SEPARATOR, children: " \u2014 " }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: COLUMN_CELL, children: track.artists?.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_genre_tree17.ArtistNames, { artists: track.artists, renderArtistLink }) : null }),
+          track.album && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: ALBUM_CELL, children: track.album.name })
         ] });
         const leading = renderSongLeading?.(track, index);
         const actions = renderSongActions?.(track);
         const isUnplayable = (0, import_genre_tree15.isSong)(track) && (0, import_genre_tree15.songUnplayableReason)(track) !== null;
         if (isUnplayable) {
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { className: "flex min-h-8 items-center gap-1 px-1 opacity-50", children: [
             leading,
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "button",
               {
                 type: "button",
@@ -1876,27 +1870,27 @@ function GenrePlaylistTracks({
                 "aria-disabled": "true",
                 "aria-label": label,
                 className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full opacity-0 cursor-not-allowed",
-                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa4.FaPlay, { size: 10 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa4.FaPlay, { size: 10 })
               }
             ),
             text,
             actions
           ] }, track.uuid);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "li",
           {
             className: `group flex min-h-8 items-center gap-1 rounded px-1 hover:bg-[var(--color-neutral-100)] ${isCurrent ? "font-medium text-[var(--color-primary)]" : ""}`,
             children: [
               leading,
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 "button",
                 {
                   type: "button",
                   "aria-label": `${isPlaying ? "Pause" : "Play"} ${label}`,
                   className: `flex h-6 w-6 shrink-0 items-center justify-center rounded-full cursor-pointer group-hover:opacity-100 focus-visible:opacity-100 ${isCurrent && playState !== import_player6.PlayStates.STOPPED ? "opacity-100" : "opacity-0 [@media(pointer:coarse)]:opacity-100"}`,
                   onClick: () => isCurrent ? handlePlayPauseAction() : play(track.uuid),
-                  children: isCurrent && playState === import_player6.PlayStates.LOADING ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui11.RingLoader, { size: 10 }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa4.FaPause, { size: 10 }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa4.FaPlay, { size: 10 })
+                  children: isCurrent && playState === import_player6.PlayStates.LOADING ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui11.RingLoader, { size: 10 }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa4.FaPause, { size: 10 }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa4.FaPlay, { size: 10 })
                 }
               ),
               text,
@@ -1906,7 +1900,7 @@ function GenrePlaylistTracks({
           track.uuid
         );
       }),
-      hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { ref: setSentinel, "aria-hidden": "true", className: "h-4" })
+      hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { ref: setSentinel, "aria-hidden": "true", className: "h-4" })
     ] })
   ] }) });
 }
@@ -1914,7 +1908,7 @@ function GenrePlaylistTracks({
 // src/genre-tree/GenreDetailExtras.tsx
 var import_track_noun3 = require("@behindthemusictree/app-kit/track-noun");
 var import_si2 = require("react-icons/si");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function GenreDetailExtras({
   genreUuid,
   genrePlaylist,
@@ -1940,17 +1934,17 @@ function GenreDetailExtras({
     criteriaOverviewSchema
   );
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui12.PanelSection, { title: "Summary", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui12.Skeleton, { className: "h-4 w-3/4" }) }) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ui12.PanelSection, { title: "Summary", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { "aria-busy": "true", "data-testid": "genre-detail-extras-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ui12.Skeleton, { className: "h-4 w-3/4" }) }) }),
       family
     ] });
   }
-  if (!overview) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: family });
+  if (!overview) return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: family });
   const { summary, summarySourceUrl, essentialSongs } = overview;
   const wikidataUrl = wikidataId ? `https://www.wikidata.org/wiki/${encodeURIComponent(wikidataId)}` : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui12.PanelSection, { title: "Links", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-caption text-[var(--color-text)]", children: [
-      summarySourceUrl && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    (summarySourceUrl || wikidataUrl) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ui12.PanelSection, { title: "Links", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-caption text-[var(--color-text)]", children: [
+      summarySourceUrl && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "a",
         {
           href: summarySourceUrl,
@@ -1958,12 +1952,12 @@ function GenreDetailExtras({
           rel: "noopener noreferrer",
           className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_si2.SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_si2.SiWikipedia, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
             "Wikipedia"
           ]
         }
       ),
-      wikidataUrl && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      wikidataUrl && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "a",
         {
           href: wikidataUrl,
@@ -1971,17 +1965,17 @@ function GenreDetailExtras({
           rel: "noopener noreferrer",
           className: "inline-flex items-center gap-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_si2.SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_si2.SiWikidata, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
             "Wikidata"
           ]
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui12.PanelSection, { title: "Summary", children: renderSummary ? renderSummary(overview) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ClampedText, { className: "text-body text-[var(--color-text)]", children: summary ?? "\u2014" }, genreUuid) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ui12.PanelSection, { title: "Summary", children: renderSummary ? renderSummary(overview) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ClampedText, { className: "text-body text-[var(--color-text)]", children: summary ?? "\u2014" }, genreUuid) }),
     family,
     renderGenreDetailExtras?.(overview),
-    (renderEssentialTracks || essentialSongs) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui12.PanelSection, { title: `Essential ${trackNoun.plural}`, children: renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && essentialSongs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "text-body text-[var(--color-text)]", children: essentialSongs.map((track) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-body text-[var(--color-text)]", children: "\u2014" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    (renderEssentialTracks || essentialSongs) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ui12.PanelSection, { title: `Essential ${trackNoun.plural}`, children: renderEssentialTracks ? renderEssentialTracks(overview) : essentialSongs && essentialSongs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { className: "text-body text-[var(--color-text)]", children: essentialSongs.map((track) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { className: "py-1", children: track.title }, track.uuid)) }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-body text-[var(--color-text)]", children: "\u2014" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       GenrePlaylistTracks,
       {
         genreUuid,
@@ -1999,10 +1993,10 @@ function GenreDetailExtras({
 }
 
 // src/genre-tree/GenreInfoPanelBody.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var import_react14 = require("react");
 function GenreNodeActionBand({ genrePlaylist, playback, ...bandProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GenreActionBand, { ...bandProps, playActions: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GenrePlayActions, { genrePlaylist, playback }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(GenreActionBand, { ...bandProps, playActions: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(GenrePlayActions, { genrePlaylist, playback }) });
 }
 function GenreInfoPanelBody({
   toolbar,
@@ -2019,9 +2013,9 @@ function GenreInfoPanelBody({
 }) {
   const summary = scope === "reference" ? import_genre_tree19.GenreCatalogueCountsSchema.parse(genrePlaylist ?? catalogue) : void 0;
   const selection = summary ? (0, import_genre_tree19.defaultGenreMusicSelection)(summary) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
     toolbar,
-    genrePlaylist ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GenreNodeActionBand, { ...band, genrePlaylist, playback }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GenreActionBand, { ...band }),
+    genrePlaylist ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(GenreNodeActionBand, { ...band, genrePlaylist, playback }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(GenreActionBand, { ...band }),
     /* @__PURE__ */ (0, import_react14.createElement)(
       GenreDetailExtras,
       {
@@ -2041,7 +2035,7 @@ function GenreInfoPanelBody({
 }
 
 // src/genre-tree/GenreDetailPanel.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var RELATIVE_ITEM_COUNT = 1;
 function toNode(genre, parentId) {
   return {
@@ -2064,7 +2058,7 @@ function useGenreDetailContent({
   trailing,
   genrePlaylist: hostPlaylist,
   expanded,
-  treeRelations
+  treeStyles
 }) {
   const { data: detail, isPending, isError } = (0, import_genre_tree20.useFetchGenreDetail)(genreUuid, scope, getBackendBaseUrl);
   const defaultPlayback = useGenrePlaylistPlayback({ scope, genrePlaylists: [], artist: extras?.artist });
@@ -2072,19 +2066,12 @@ function useGenreDetailContent({
   const view = (0, import_react15.useMemo)(() => {
     if (!detail) return null;
     const rootColor = (0, import_genre_tree_view4.getGenreTreeColor)(detail.root.wikidataId);
-    const treeStyles = /* @__PURE__ */ new Map();
-    if (treeRelations) {
-      const drawn = [treeRelations, treeRelations.parentNode, ...treeRelations.childNodes, ...treeRelations.ancestorNodes];
-      for (const entry of drawn) {
-        if (entry) treeStyles.set(entry.node.id, { fill: entry.fill, textColor: entry.textColor });
-      }
-    }
     const relative = (genre, parentId) => ({
       node: toNode(genre, parentId),
-      ...treeStyles.get(genre.uuid) ?? { fill: (0, import_genre_tree_view4.tintSurface)(rootColor), textColor: import_genre_tree_view4.TEXT_COLOR }
+      ...treeStyles?.get(genre.uuid) ?? { fill: (0, import_genre_tree_view4.tintSurface)(rootColor), textColor: import_genre_tree_view4.TEXT_COLOR }
     });
     const ancestors2 = [...detail.ascendants].sort((a, b) => b.degree - a.degree);
-    const own = treeStyles.get(detail.uuid) ?? { fill: rootColor, textColor: (0, import_genre_tree_view4.getTextColorOnFill)(rootColor) };
+    const own = treeStyles?.get(detail.uuid) ?? { fill: rootColor, textColor: (0, import_genre_tree_view4.getTextColorOnFill)(rootColor) };
     return {
       node: {
         id: detail.uuid,
@@ -2101,23 +2088,23 @@ function useGenreDetailContent({
         ({ ascendant }, index) => relative(ascendant, index === 0 ? null : ancestors2[index - 1].ascendant.uuid)
       )
     };
-  }, [detail, scope, treeRelations]);
+  }, [detail, scope, treeStyles]);
   if (isError) return {
     name: null,
     title: "Genre unavailable",
-    content: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { role: "alert", className: "text-body text-[var(--color-text)]", children: "This genre could not be loaded." })
+    content: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { role: "alert", className: "text-body text-[var(--color-text)]", children: "This genre could not be loaded." })
   };
   if (isPending || !detail || !view) return {
     name: null,
     title: "Loading genre\u2026",
-    content: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-3", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui13.Skeleton, { className: "h-6 w-2/3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui13.Skeleton, { className: "h-4 w-full" }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui13.Skeleton, { className: "h-4 w-3/4" })
+    content: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-3", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Skeleton, { className: "h-6 w-2/3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.Skeleton, { className: "h-4 w-3/4" })
     ] })
   };
   const selectGenre = (nodeId) => onSelectGenre(import_genre_tree20.GenreUuidSchema.parse(nodeId));
-  const family = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  const family = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     import_genre_tree_view4.GenreNodeFamily,
     {
       node: view.node,
@@ -2128,17 +2115,17 @@ function useGenreDetailContent({
       onSelectNode: selectGenre
     }
   );
-  const ancestors = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_genre_tree_view4.GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
+  const ancestors = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_genre_tree_view4.GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
   return {
     name: detail.name,
     title: detail.name,
     headerAccent: { background: view.fill, color: view.textColor },
     aside: expanded ? ancestors : void 0,
-    content: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    content: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         GenreInfoPanelBody,
         {
-          family: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+          family: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
             family,
             !expanded && ancestors
           ] }),
@@ -2182,7 +2169,7 @@ function GenreDetailPanel({
     expanded,
     band: { onZoomIn, shareUrl, shareTarget: shareUrl ? shareTarget : void 0 }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     import_ui13.DetailPanel,
     {
       side: "left",
@@ -2195,7 +2182,7 @@ function GenreDetailPanel({
       edgeTab,
       aside: panel.aside,
       titleInSearch,
-      headerActions: onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_ui13.IconButton, { "aria-label": expanded ? "Shrink panel" : "Extend panel", onClick: () => onExpandedChange(!expanded), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react13.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react13.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" }) }) : void 0,
+      headerActions: onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_ui13.IconButton, { "aria-label": expanded ? "Shrink panel" : "Extend panel", onClick: () => onExpandedChange(!expanded), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react13.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react13.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" }) }) : void 0,
       children: panel.content
     }
   );
@@ -2204,7 +2191,7 @@ function GenreDetailPanel({
 // src/genre-tree/ChangeParentPopup.tsx
 var import_react16 = require("react");
 var import_genre_tree21 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function ChangeParentPopup({
   genrePlaylist,
   genrePlaylists,
@@ -2239,12 +2226,12 @@ function ChangeParentPopup({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "mb-3 text-body text-[var(--color-text-muted)]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(BasePopup_default, { title: `Change parent of ${genrePlaylist.name}`, onClose, showCancelButton: true, fitContent: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: "mb-3 text-body text-[var(--color-text-muted)]", children: [
       "Current parent: ",
       genrePlaylist.parent?.name ?? "none"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { "aria-busy": isPending, className: isPending ? "pointer-events-none opacity-60" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       GenreSearch,
       {
         genrePlaylists: candidates,
@@ -2252,7 +2239,7 @@ function ChangeParentPopup({
         placeholder: "Search a new parent\u2026"
       }
     ) }),
-    formErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { role: "alert", className: "mt-3 text-body text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
+    formErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { role: "alert", className: "mt-3 text-body text-[var(--color-red-500)]", children: formErrors.map(({ message }) => message).join(" ") })
   ] });
 }
 
@@ -2265,7 +2252,7 @@ var import_lucide_react14 = require("lucide-react");
 var import_ui14 = require("@behindthemusictree/ui");
 var import_genre_tree22 = require("@behindthemusictree/app-kit/genre-tree");
 var import_player7 = require("@behindthemusictree/app-kit/player");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function ArtistActionBand({ artist, share }) {
   const { trackList, playNewTrackListFromArtist } = (0, import_genre_tree22.useTrackList)();
   const { isPlaying, setIsPlaying } = (0, import_player7.usePlayer)();
@@ -2281,11 +2268,11 @@ function ArtistActionBand({ artist, share }) {
       console.error("Failed to load artist tracks:", error);
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_ui14.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_ui14.ActionBand, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui14.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_ui14.ActionBand, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       import_ui14.ActionButton,
       {
-        icon: playing ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react14.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react14.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
+        icon: playing ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react14.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react14.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
         label: playing ? "Pause" : "Play",
         caption: String(artist.playableTracksCount),
         disabled: artist.playableTracksCount === 0,
@@ -2304,7 +2291,7 @@ var import_ui16 = require("@behindthemusictree/ui");
 var import_lucide_react15 = require("lucide-react");
 var import_si3 = require("react-icons/si");
 var import_ui15 = require("@behindthemusictree/ui");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var LINK_KINDS = {
   official: { label: "Official website", Icon: import_lucide_react15.Globe },
   wikipedia: { label: "Wikipedia", Icon: import_si3.SiWikipedia },
@@ -2341,7 +2328,7 @@ function artistLinks(artist) {
   return links;
 }
 function ArtistLinks({ links }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_ui15.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("ul", { className: "flex flex-wrap gap-1.5", children: links.map(({ key, url, Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui15.Chip, { href: url, icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), children: label }) }, key)) });
 }
 
 // src/genre-tree/artist/formatYears.ts
@@ -2352,7 +2339,7 @@ function formatYears(beginYear, endYear, ended) {
 }
 
 // src/genre-tree/artist/ArtistHeader.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var countryNames = new Intl.DisplayNames(["en"], { type: "region" });
 function ArtistHeader({ artist }) {
   const fields = [];
@@ -2362,35 +2349,35 @@ function ArtistHeader({ artist }) {
   const years = formatYears(artist.beginYear, artist.endYear, artist.ended);
   if (years) fields.push({ label: "Active", value: years });
   const links = artistLinks(artist);
-  if (links.length > 0) fields.push({ label: "Links", value: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ArtistLinks, { links }) });
+  if (links.length > 0) fields.push({ label: "Links", value: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArtistLinks, { links }) });
   if (fields.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_ui16.FieldList, { items: fields });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_ui16.FieldList, { items: fields });
 }
 
 // src/genre-tree/artist/ArtistPhoto.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function ExternalLink({ href, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline-offset-2 hover:underline", children });
 }
 function ArtistPhoto({ image, name }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("figure", { className: "flex flex-col gap-1.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("figcaption", { className: "text-caption text-[var(--color-text-muted)]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("figure", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("img", { src: image.url, alt: name, className: "h-64 w-full object-contain bg-[var(--color-surface-muted)] rounded" }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("figcaption", { className: "text-caption text-[var(--color-text-muted)]", children: [
       "Photo: ",
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ExternalLink, { href: image.pageUrl, children: image.author ?? "Wikimedia Commons" }),
       ",",
       " ",
-      image.licenseUrl ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
+      image.licenseUrl ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ExternalLink, { href: image.licenseUrl, children: image.license }) : image.license
     ] })
   ] });
 }
 
 // src/genre-tree/artist/ArtistMembers.tsx
 var import_ui17 = require("@behindthemusictree/ui");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function MembershipList({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui17.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("ul", { children: memberships.map((membership, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui17.PanelGroup, { title, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { children: memberships.map((membership, index) => {
     const details = [
       formatYears(membership.beginYear, membership.endYear, membership.ended),
       ...membership.roles
@@ -2398,9 +2385,9 @@ function MembershipList({ title, memberships, renderArtistLink }) {
     const detailsText = details.filter(Boolean).join(" \xB7 ");
     return (
       // A member can have several periods in the same group.
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
-        detailsText && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { className: "truncate py-0.5", title: detailsText || void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-medium text-[var(--color-text)]", children: renderArtistLink(membership.artist) }),
+        detailsText && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
           " \u2014 ",
           detailsText
         ] })
@@ -2411,9 +2398,9 @@ function MembershipList({ title, memberships, renderArtistLink }) {
 function ArtistMembers({ title, memberships, renderArtistLink }) {
   if (memberships.length === 0) return null;
   const isCurrent = (membership) => !membership.ended && membership.endYear === null;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_ui17.PanelSection, { title, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_ui17.PanelSection, { title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MembershipList, { title: "Current", memberships: memberships.filter(isCurrent), renderArtistLink }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       MembershipList,
       {
         title: "Past",
@@ -2426,7 +2413,7 @@ function ArtistMembers({ title, memberships, renderArtistLink }) {
 
 // src/genre-tree/artist/ArtistDiscography.tsx
 var import_ui18 = require("@behindthemusictree/ui");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var GROUPS = ["Albums", "EPs", "Singles", "Live", "Compilations", "Other"];
 var PRIMARY_GROUPS = { album: "Albums", ep: "EPs", single: "Singles" };
 function discographyGroup({ primaryType, secondaryTypes }) {
@@ -2446,12 +2433,12 @@ function byYear(a, b) {
 function ArtistDiscography({ albums }) {
   if (albums.length === 0) return null;
   const sorted = [...albums].sort(byYear);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui18.PanelSection, { title: "Discography", children: GROUPS.map((group) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui18.PanelSection, { title: "Discography", children: GROUPS.map((group) => {
     const groupAlbums = sorted.filter((album) => discographyGroup(album) === group);
     if (groupAlbums.length === 0) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ui18.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ui18.PanelGroup, { title: group, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { children: groupAlbums.map((album) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("li", { className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-2 py-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "tabular-nums text-[var(--color-text-muted)]", children: album.year ?? "\u2014" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "truncate text-[var(--color-text)]", title: album.name, children: album.name })
     ] }, album.uuid)) }) }, group);
   }) });
 }
@@ -2459,11 +2446,10 @@ function ArtistDiscography({ albums }) {
 // src/genre-tree/artist/ArtistSongs.tsx
 var import_react17 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
-var import_lucide_react16 = require("lucide-react");
 var import_ui19 = require("@behindthemusictree/ui");
 var import_player11 = require("@behindthemusictree/app-kit/player");
 var import_genre_tree26 = require("@behindthemusictree/app-kit/genre-tree");
-var import_transport9 = require("@behindthemusictree/app-kit/transport");
+var import_transport8 = require("@behindthemusictree/app-kit/transport");
 
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
 var import_player10 = require("@behindthemusictree/app-kit/player");
@@ -2473,7 +2459,7 @@ var import_genre_tree23 = require("@behindthemusictree/app-kit/genre-tree");
 var import_fa5 = require("react-icons/fa");
 var import_player8 = require("@behindthemusictree/app-kit/player");
 var import_player9 = require("@behindthemusictree/app-kit/player");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function TrackPositionPlayPause({
   position,
   uuid,
@@ -2487,14 +2473,14 @@ function TrackPositionPlayPause({
   const isPlaying = isThisTrack && isConfirmedPlayable && playState === import_player9.PlayStates.PLAYING;
   const isPaused = isThisTrack && isConfirmedPlayable && playState === import_player9.PlayStates.PAUSED;
   const isCurrentTrackActive = isPlaying || isPaused;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       className: "track-position-play-pause relative flex items-center justify-center gap-2 text-lg w-16 cursor-pointer",
       style: { minWidth: "4rem", maxWidth: "4rem" },
       onClick: handlePlayPauseClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "track-position-play-pause__status group-hover:hidden flex items-center justify-center", children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "track-position-play-pause__spinner", role: "status", "aria-label": "Loading track" }) : isCurrentTrackActive ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           "span",
           {
             className: "track-position-play-pause__bars",
@@ -2502,18 +2488,18 @@ function TrackPositionPlayPause({
             role: "img",
             "aria-label": isPlaying ? "Playing" : "Paused",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "track-position-play-pause__bar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "track-position-play-pause__bar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "track-position-play-pause__bar" })
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "track-position-play-pause__bar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "track-position-play-pause__bar" })
             ]
           }
         ) : position }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "div",
           {
             className: `hidden group-hover:flex items-center justify-center ${isCurrentTrackActive ? "" : "absolute inset-0"}`,
             "aria-hidden": "true",
-            children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_fa5.FaPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_fa5.FaPlay, {})
+            children: isAwaitingPlayback ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "track-position-play-pause__spinner" }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_fa5.FaPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_fa5.FaPlay, {})
           }
         )
       ]
@@ -2524,7 +2510,7 @@ function TrackPositionPlayPause({
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
 var import_genre_tree24 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree25 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function TrackItem({
   track,
   position,
@@ -2548,12 +2534,12 @@ function TrackItem({
       loadTrackForPlayer(track.uuid);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       className: `track-item flex h-14 text-[var(--color-text)] ${isUnplayable ? "opacity-50" : "hover:bg-[var(--color-surface-muted)] group"}`,
       children: [
-        isUnplayable ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        isUnplayable ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "div",
           {
             className: "flex items-center justify-center text-lg w-16",
@@ -2561,7 +2547,7 @@ function TrackItem({
             "aria-disabled": "true",
             children: position
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           TrackPositionPlayPause,
           {
             position,
@@ -2570,12 +2556,12 @@ function TrackItem({
             isSelected: selectedTrack?.uuid === track.uuid
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree24.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_genre_tree25.ArtistNames, { artists: track.artists, renderArtistLink }) }) : ""
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "title-artist-container flex flex-col items-start justify-center min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex max-w-full items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "title text-lg font-bold text-[var(--color-text)] max-w-full truncate", children: renderSongLink ? renderSongLink(track) : (0, import_genre_tree24.isSong)(track) ? /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.jsx)("div", { className: "artist text-base max-w-full truncate text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_genre_tree25.ArtistNames, { artists: track.artists, renderArtistLink }) }) : ""
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsx)("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-caption font-bold", children: track.genre.name }) : "" }),
-        renderDuration && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.jsx)("div", { className: "genre-name max-w-full whitespace-normal break-words p-1 text-caption font-bold", children: track.genre.name }) : "" }),
+        renderDuration && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "div",
           {
             className: "duration flex text-base w-16 items-center justify-center",
@@ -2583,15 +2569,15 @@ function TrackItem({
             children: renderDuration(track)
           }
         ),
-        renderActions && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "edit flex text-base w-6 items-center justify-center mr-2 cursor-pointer", children: renderActions(track) })
+        renderActions && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "edit flex text-base w-6 items-center justify-center mr-2 cursor-pointer", children: renderActions(track) })
       ]
     }
   );
 }
 
 // src/genre-tree/artist/ArtistSongs.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var SongPageSchema2 = (0, import_transport9.PaginatedResponseSchema)(import_genre_tree26.SongDetailedSchema);
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var SongPageSchema2 = (0, import_transport8.PaginatedResponseSchema)(import_genre_tree26.SongDetailedSchema);
 var SORTS = [
   { ordering: "title", label: "Title" },
   { ordering: "-albumYear", label: "Year" }
@@ -2601,7 +2587,7 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
   const [ordering, setOrdering] = (0, import_react17.useState)("title");
   const { playNewTrackListFromArtist } = (0, import_genre_tree26.useTrackList)();
   const { playerTrackObject } = (0, import_player11.usePlayer)();
-  const { data, isPending, isError } = (0, import_transport9.usePlaybackQuery)({
+  const { data, isPending, isError } = (0, import_transport8.usePlaybackQuery)({
     getBackendBaseUrl,
     queryKey: ["referenceSongs", "artist", artist.uuid, ordering, page],
     queryFn: (fetchBound) => fetchBound(import_genre_tree26.libraryEndpoints.reference.songs.list(), true, false, void 0, {
@@ -2623,36 +2609,22 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
     event.stopPropagation();
     void play(song.uuid);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_ui19.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_ui19.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-        "button",
-        {
-          type: "button",
-          onClick: () => void play(),
-          className: "flex w-fit items-center gap-1.5 px-3 py-1 text-caption font-medium bg-gray-900 text-white rounded-full hover:bg-gray-700",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react16.Play, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
-            "Play all"
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-caption", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        "button",
-        {
-          type: "button",
-          "aria-pressed": ordering === sort.ordering,
-          onClick: () => {
-            setOrdering(sort.ordering);
-            setPage(1);
-          },
-          className: "px-2.5 py-0.5 text-[var(--color-text)] rounded-full hover:bg-[var(--color-surface-muted)] aria-pressed:bg-gray-900 aria-pressed:text-white",
-          children: sort.label
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_ui19.PanelSection, { title: "Songs", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_ui19.Skeleton, { className: "h-14", "aria-busy": "true" }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-red-600", children: "Could not load songs." }) : data.results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No songs yet." }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex flex-wrap items-center justify-end gap-2 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { role: "group", "aria-label": "Sort songs by", className: "flex gap-1 text-caption", children: SORTS.map((sort) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": ordering === sort.ordering,
+        onClick: () => {
+          setOrdering(sort.ordering);
+          setPage(1);
         },
-        sort.ordering
-      )) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        className: "px-2.5 py-0.5 text-[var(--color-text)] rounded-full hover:bg-[var(--color-surface-muted)] aria-pressed:bg-gray-900 aria-pressed:text-white",
+        children: sort.label
+      },
+      sort.ordering
+    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("ul", { className: "overflow-hidden mb-2 bg-zinc-950 rounded-lg", children: data.results.map((song, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("li", { onClickCapture: (event) => handleRowClickCapture(event, song), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       TrackItem,
       {
         track: song,
@@ -2661,12 +2633,12 @@ function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLi
         renderSongLink
       }
     ) }, song.uuid)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_ui19.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_ui19.Pagination, { currentPage: page, totalPages: data.totalPages, onPageChange: setPage })
   ] }) });
 }
 
 // src/genre-tree/artist/useArtistPanel.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function useArtistPanel({
   uuid,
   scope,
@@ -2687,26 +2659,26 @@ function useArtistPanel({
       return {
         ...panel,
         title: "Artist",
-        content: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_ui20.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_ui20.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_ui20.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_ui20.Skeleton, { className: "h-4 w-24" }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_ui20.Skeleton, { className: "h-16 mt-2.5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_ui20.Skeleton, { className: "h-16" })
+        content: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui20.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui20.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui20.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui20.Skeleton, { className: "h-4 w-24" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui20.Skeleton, { className: "h-16 mt-2.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui20.Skeleton, { className: "h-16" })
         ] })
       };
     case "not-found":
       return {
         ...panel,
         title: "Artist not found",
-        content: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "This artist does not exist." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "This artist does not exist." })
       };
     case "error":
       return {
         ...panel,
         title: "Artist",
-        content: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-red-600", children: "Could not load this artist." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-red-600", children: "Could not load this artist." })
       };
     case "success": {
       const { artist } = result;
@@ -2715,19 +2687,19 @@ function useArtistPanel({
       return {
         ...panel,
         title: artist.name,
-        content: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        content: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             ArtistActionBand,
             {
               artist,
-              share: shareTarget && shareUrl ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl }) : void 0
+              share: shareTarget && shareUrl ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl }) : void 0
             }
           ),
-          artist.image && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ArtistPhoto, { image: artist.image, name: artist.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ArtistHeader, { artist }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
-          artist.tracksCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          artist.image && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArtistPhoto, { image: artist.image, name: artist.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArtistHeader, { artist }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArtistMembers, { title: "Members", memberships: artist.members, renderArtistLink }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArtistMembers, { title: "Member of", memberships: artist.memberOf, renderArtistLink }),
+          artist.tracksCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             ArtistSongs,
             {
               artist: { uuid: artist.uuid, name: artist.name },
@@ -2737,7 +2709,7 @@ function useArtistPanel({
             }
           )
         ] }),
-        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ArtistDiscography, { albums: artist.albums }) : void 0
+        extraContent: artist.albums.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArtistDiscography, { albums: artist.albums }) : void 0
       };
     }
   }
@@ -2749,11 +2721,11 @@ var import_genre_tree29 = require("@behindthemusictree/app-kit/genre-tree");
 
 // src/genre-tree/song/SongPanelContent.tsx
 var import_react18 = require("react");
-var import_lucide_react17 = require("lucide-react");
+var import_lucide_react16 = require("lucide-react");
 var import_ui21 = require("@behindthemusictree/ui");
 var import_player12 = require("@behindthemusictree/app-kit/player");
 var import_genre_tree28 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = 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";
@@ -2761,27 +2733,27 @@ function SongHistory({ uuid, getBackendBaseUrl }) {
   const [open, setOpen] = (0, import_react18.useState)(false);
   const history = (0, import_genre_tree28.useSongHistory)(uuid, getBackendBaseUrl, open);
   let body = null;
-  if (history.status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui21.Skeleton, { className: "h-10", "aria-busy": "true" });
-  else if (history.status === "error") body = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-red-600", children: "Could not load the history." });
+  if (history.status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui21.Skeleton, { className: "h-10", "aria-busy": "true" });
+  else if (history.status === "error") body = /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime47.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("li", { className: "py-1.5 text-body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "font-medium", children: entry.action }),
-      entry.oldValue !== null || entry.newValue !== null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
+    body = history.entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "No changes yet." }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("ul", { className: "divide-y divide-[var(--color-border)]", children: history.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("li", { className: "py-1.5 text-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "font-medium", children: entry.action }),
+      entry.oldValue !== null || entry.newValue !== null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "text-[var(--color-text-muted)]", children: [
         " ",
         "\u2014 ",
         entry.oldValue ?? "none",
         " \u2192 ",
         entry.newValue ?? "none"
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "block text-caption text-[var(--color-text-muted)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "block text-caption text-[var(--color-text-muted)]", children: [
         entry.actorPseudo ?? "Anonymous",
         " \xB7 ",
         dateFormat.format(new Date(entry.createdOn))
       ] })
     ] }, entry.uuid)) });
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui21.PanelBleed, { padded: true, className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("details", { onToggle: (event) => setOpen(event.currentTarget.open), className: "pb-2.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("summary", { className: `mt-2.5 cursor-pointer ${import_ui21.PANEL_LABEL_CLASS}`, children: "History" }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mt-1.5", children: body })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui21.PanelBleed, { padded: true, className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("details", { onToggle: (event) => setOpen(event.currentTarget.open), className: "pb-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("summary", { className: `mt-2.5 cursor-pointer ${import_ui21.PANEL_LABEL_CLASS}`, children: "History" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mt-1.5", children: body })
   ] }) });
 }
 function SongPanelContent(props) {
@@ -2800,13 +2772,13 @@ function SongPanelContent(props) {
     const genre = song.genre;
     fields.push({
       label: "Genre",
-      value: onSelectGenre ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("button", { type: "button", onClick: () => onSelectGenre(genre), className: "hover:underline", children: genre.name }) : path ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
-        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { "aria-hidden": "true", children: "\u203A " }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("button", { type: "button", onClick: () => props.onSelectGenrePlaylist?.(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
+      value: onSelectGenre ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", onClick: () => onSelectGenre(genre), className: "hover:underline", children: genre.name }) : path ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { children: [
+        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { "aria-hidden": "true", children: "\u203A " }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", onClick: () => props.onSelectGenrePlaylist?.(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
       ] }, genrePlaylist.uuid)) }) : song.genre.name
     });
   } else {
-    fields.push({ label: "Genre", value: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-[var(--color-text-muted)]", children: "No genre" }) });
+    fields.push({ label: "Genre", value: /* @__PURE__ */ (0, import_jsx_runtime48.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;
@@ -2816,11 +2788,11 @@ function SongPanelContent(props) {
   const links = [];
   if (musicBrainzUrl)
     links.push(
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("a", { href: musicBrainzUrl, target: "_blank", rel: "noopener noreferrer", className: externalLink, children: "MusicBrainz" }, "mb")
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("a", { href: musicBrainzUrl, target: "_blank", rel: "noopener noreferrer", className: externalLink, children: "MusicBrainz" }, "mb")
     );
   if (song.youtubeVideo)
     links.push(
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "a",
         {
           href: `https://www.youtube.com/watch?v=${encodeURIComponent(song.youtubeVideo.id)}`,
@@ -2835,31 +2807,31 @@ function SongPanelContent(props) {
   if (links.length > 0)
     fields.push({
       label: "Links",
-      value: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "flex gap-3", children: links })
+      value: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex gap-3", children: links })
     });
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui21.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_ui21.ActionBand, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui21.PanelBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_ui21.ActionBand, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         import_ui21.ActionButton,
         {
-          icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react17.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react17.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
+          icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react16.Pause, { "aria-hidden": "true", className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react16.Play, { "aria-hidden": "true", className: "w-5 h-5" }),
           label: isPlaying ? "Pause" : "Play",
           disabled: !!unplayableReason,
           title: unplayableReason ?? void 0,
           onClick: () => isCurrent ? handlePlayPauseAction() : playNewTrackListFromTrackUuid(song, scope)
         }
       ),
-      shareUrl && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
+      shareUrl && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ShareActionButton, { target: shareTarget, url: shareUrl })
     ] }) }),
-    song.artists && song.artists.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_genre_tree28.ArtistNames, { artists: song.artists, renderArtistLink }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui21.FieldList, { items: fields }),
-    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_ui21.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
+    song.artists && song.artists.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-[var(--color-text-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_genre_tree28.ArtistNames, { artists: song.artists, renderArtistLink }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui21.FieldList, { items: fields }),
+    song.essentialGenres && song.essentialGenres.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui21.PanelSection, { title: "Essential in", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("ul", { children: song.essentialGenres.map((genre) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("li", { className: "py-0.5", children: genre.name }, genre.uuid)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SongHistory, { uuid: song.uuid, getBackendBaseUrl })
   ] });
 }
 
 // src/genre-tree/song/useSongPanel.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function useSongPanel({
   uuid,
   scope,
@@ -2880,24 +2852,24 @@ function useSongPanel({
       return {
         ...panel,
         title: "Song",
-        content: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui22.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui22.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui22.Skeleton, { className: "h-3 w-16" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui22.Skeleton, { className: "h-4 w-24" })
+        content: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui22.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui22.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui22.Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_ui22.Skeleton, { className: "h-4 w-24" })
         ] })
       };
     case "not-found":
       return {
         ...panel,
         title: "Song not found",
-        content: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "This song does not exist." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-[var(--color-text-muted)]", children: "This song does not exist." })
       };
     case "error":
       return {
         ...panel,
         title: "Song",
-        content: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-red-600", children: "Could not load this song." })
+        content: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-red-600", children: "Could not load this song." })
       };
     case "success": {
       const { song } = result;
@@ -2905,7 +2877,7 @@ function useSongPanel({
       return {
         ...panel,
         title: song.title,
-        content: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        content: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           SongPanelContent,
           {
             song,
@@ -2958,12 +2930,12 @@ function useEntityPanel({
 // src/genre-tree/SizeMetricToggle.tsx
 var import_md2 = require("react-icons/md");
 var import_ui23 = require("@behindthemusictree/ui");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function SizeMetricToggle({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     import_ui23.SegmentedControl,
     {
       variant: "floating",
@@ -2971,15 +2943,15 @@ function SizeMetricToggle({
       value,
       onChange,
       options: [
-        { value: "songs", label: /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.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_runtime50.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_runtime50.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_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var NO_POP_ROOT_TITLE = "This genre tree has no 'Mainstream Pop' root yet";
 var REGIONS_CLASS = "[--gtv-center-left:var(--layout-center-left)] [--gtv-center-right:var(--layout-center-right)] [--gtv-center-top:var(--layout-band-top)]";
 var noop = () => {
@@ -3071,6 +3043,7 @@ function GenreTreeView({
     isFetching: isTreeFetching,
     genrePlaylistByNodeId,
     visibleGenrePlaylists,
+    focusUuids,
     groupedGenrePlaylistsByRoot,
     selectedGenreUuid,
     selectGenre,
@@ -3130,14 +3103,14 @@ function GenreTreeView({
   const openSongRef = (0, import_react19.useRef)(openSong);
   openSongRef.current = openSong;
   const resolvedRenderSongLink = (0, import_react19.useCallback)(
-    (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
+    (song) => renderSongLink ? renderSongLink(song) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("button", { type: "button", onClick: () => openSongRef.current(song.uuid), className: "hover:underline", children: song.title }),
     [renderSongLink]
   );
   const [expandedSongUuid, setExpandedSongUuid] = (0, import_react19.useState)(null);
   const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react19.useState)(null);
   const artistBaseUrl = artistSearchBaseUrl ?? getBackendBaseUrl;
   const songBaseUrl = getBackendBaseUrl;
-  const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
+  const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime51.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);
@@ -3179,7 +3152,7 @@ function GenreTreeView({
       selectGenrePlaylist(genrePlaylist2);
     }
   });
-  const builtInPanel = overlayPanel || selectedGenreUuid !== null ? void 0 : entityPanel;
+  const otherPanel = overlayPanel ?? (selectedGenreUuid !== null ? void 0 : entityPanel);
   const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react19.useState)(false);
   const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react19.useState)(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
@@ -3207,18 +3180,19 @@ function GenreTreeView({
   const obscuredInset = (0, import_ui24.useObscuredInset)(panelRef);
   const hostPanel = { obscuredInset, onNodeStyleResolverChange: handleNodeStyleResolverChange };
   const nodeMetric = isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric;
-  const treeNodes = (0, import_react19.useMemo)(() => toTreeNodes(visibleGenrePlaylists, nodeMetric), [visibleGenrePlaylists, nodeMetric]);
+  const treeNodes = (0, import_react19.useMemo)(() => toTreeNodes(visibleGenrePlaylists, nodeMetric, focusUuids), [visibleGenrePlaylists, nodeMetric, focusUuids]);
   const relations = (0, import_genre_tree_view5.useGenreNodeRelations)(
     treeNodes,
     !overlayPanel && hasSelectedGenreNode ? selectedNodeId : null,
     resolveStyle
   );
+  const treeStyles = (0, import_react19.useMemo)(() => toGenreNodeStyles(relations, visibleGenrePlaylists), [relations, visibleGenrePlaylists]);
   const [selectionHistory, setSelectionHistory] = (0, import_react19.useState)({ current: selectedGenreUuid, previous: null });
   if (selectionHistory.current !== selectedGenreUuid) {
     setSelectionHistory({ current: selectedGenreUuid, previous: selectionHistory.current ?? selectionHistory.previous });
   }
   const handlePrevious = selectionHistory.previous ? () => selectGenre(selectionHistory.previous) : void 0;
-  const { showPopup, hidePopup } = (0, import_popup6.usePopup)();
+  const { showPopup, hidePopup } = (0, import_popup5.usePopup)();
   const reopenPanel = () => {
     setUncontrolledCollapsed(false);
     onCollapsedChange?.(false);
@@ -3258,7 +3232,7 @@ function GenreTreeView({
       selectGenre(uuid);
     },
     expanded: isExpanded,
-    treeRelations: relations,
+    treeStyles,
     playback,
     genrePlaylist: selectedGenrePlaylist,
     band: {
@@ -3269,7 +3243,7 @@ function GenreTreeView({
       onAddChild: readOnly || !criteria ? void 0 : () => handleGenreCreationAction(criteria),
       onRename: readOnly || !criteria ? void 0 : () => handleGenreRenameAction(criteria),
       onChangeParent: readOnly || !genrePlaylist || !criteria ? void 0 : () => showPopup(
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           ChangeParentPopup,
           {
             genrePlaylist: { ...genrePlaylist, criteria },
@@ -3303,15 +3277,15 @@ function GenreTreeView({
   const isRotationControlled = controlledAllowWheelRotation !== void 0;
   const allowWheelRotation = controlledAllowWheelRotation ?? internalAllowWheelRotation;
   let activePanel = null;
-  if (overlayPanel) {
+  if (otherPanel) {
     activePanel = {
-      title: overlayPanel.title,
-      content: overlayPanel.content,
-      aside: overlayPanel.extraContent,
-      expanded: overlayPanel.expanded ?? false,
-      onExpandedChange: overlayPanel.onExpandedChange,
-      onClose: overlayPanel.onClose,
-      titleInSearch: false
+      title: otherPanel.title,
+      content: otherPanel.content,
+      aside: otherPanel.extraContent,
+      expanded: otherPanel.expanded ?? false,
+      onExpandedChange: otherPanel.onExpandedChange,
+      onClose: otherPanel.onClose,
+      searchName: otherPanel.title
     };
   } else if (selectedGenreUuid) {
     activePanel = {
@@ -3321,38 +3295,28 @@ function GenreTreeView({
       expanded: isExpanded,
       onExpandedChange: changeExpanded,
       onClose: clearSelection,
-      titleInSearch: true,
+      searchName: genreContent.name,
       headerAccent: genreContent.headerAccent
     };
-  } else if (builtInPanel) {
-    activePanel = {
-      title: builtInPanel.title,
-      content: builtInPanel.content,
-      aside: builtInPanel.extraContent,
-      expanded: builtInPanel.expanded,
-      onExpandedChange: builtInPanel.onExpandedChange,
-      onClose: builtInPanel.onClose,
-      titleInSearch: true
-    };
   }
   const isPanelShown = activePanel !== null && (selectedGenreUuid !== null || isTreeReady);
   const detailTab = placement === "regions" && activePanel?.onExpandedChange ? {
     edge: activePanel.expanded ? { label: "Shrink panel", onClick: () => activePanel.onExpandedChange?.(false) } : isCollapsed ? null : { label: "Hide panel", onClick: () => changeCollapsed(true) },
     center: activePanel.expanded ? null : isCollapsed ? { label: "Show panel", onClick: () => changeCollapsed(false) } : activePanel.onExpandedChange ? { label: "Extend panel", onClick: () => activePanel.onExpandedChange?.(true) } : null
   } : void 0;
-  const expandButton = placement === "default" && activePanel?.onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  const expandButton = placement === "default" && activePanel?.onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     import_ui24.IconButton,
     {
       "aria-label": activePanel.expanded ? "Shrink panel" : "Extend panel",
       style: activePanel.headerAccent && { color: "inherit" },
       onClick: () => activePanel.onExpandedChange?.(!activePanel.expanded),
-      children: activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react19.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react19.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
+      children: activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react18.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react18.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
     }
   ) : null;
   const renderArtistFilter = () => {
     if (isLoading || !filterArtist) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "inline-flex items-center overflow-hidden rounded-full bg-[var(--color-neutral-100)] text-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "button",
         {
           type: "button",
@@ -3364,7 +3328,7 @@ function GenreTreeView({
           children: filterArtist.name
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "button",
         {
           type: "button",
@@ -3376,8 +3340,8 @@ function GenreTreeView({
       )
     ] });
   };
-  const actions = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-    !isLoading && !isError && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  const actions = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+    !isLoading && !isError && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       GenreTreeSearch,
       {
         artistBaseUrl,
@@ -3400,9 +3364,9 @@ function GenreTreeView({
           if (songUuid) changeSong(null);
           selectGenre(uuid);
         },
-        selectedName: selectedGenreUuid ? genreContent.name : typeof builtInPanel?.title === "string" ? builtInPanel.title : null,
+        selectedName: activePanel?.searchName ?? null,
         onClear: activePanel?.onClose,
-        showClear: activePanel?.titleInSearch ?? false,
+        showClear: activePanel !== null,
         clearLabel: "Close panel",
         onPrevious: handlePrevious,
         onQueryChange: onSearchQueryChange,
@@ -3410,9 +3374,9 @@ function GenreTreeView({
         extraGroups: extraSearchGroups
       }
     ),
-    !isLoading && !isError && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.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 && !isError && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    !isLoading && !isError && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.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 && !isError && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         import_ui24.SegmentedControl,
         {
           "aria-label": "Tree view mode",
@@ -3426,13 +3390,13 @@ function GenreTreeView({
           ]
         }
       ),
-      !isLoading && !isError && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      !isLoading && !isError && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime50.jsx)(
+          children: !isRotationControlled && viewMode !== "stacked" && viewMode !== "outline" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             import_ui24.Button,
             {
               variant: allowWheelRotation ? "default" : "outline",
@@ -3443,52 +3407,53 @@ function GenreTreeView({
           )
         }
       ),
-      !isLoading && !isError && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      !isLoading && !isError && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         import_ui24.IconTextButton,
         {
-          icon: import_lucide_react18.Plus,
+          icon: import_lucide_react17.Plus,
           text: "Add root",
           onClick: () => handleGenreCreationAction(null)
         }
       )
     ] })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "div",
     {
       "data-left-panel": isPanelShown && !isCollapsed ? void 0 : "hidden",
       className: ["genre-tree-view relative flex flex-col h-full", placement === "regions" && REGIONS_CLASS, className2].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.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))] md:left-[var(--layout-panel-inset)] md:top-[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 && !isError && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        !isLoading && !isError && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime51.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))] md:top-[var(--layout-panel-inset)]" : "top-5"}`,
             children: renderArtistFilter()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
-          !isLoading && !isError && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
-          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_genre_tree_view5.GenreTreeViewSkeleton, { viewMode }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("p", { role: "alert", className: "m-auto text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
+          !isLoading && !isError && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
+          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_genre_tree_view5.GenreTreeViewSkeleton, { viewMode }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { role: "alert", className: "m-auto text-center", children: [
             "Couldn't load the genre tree.",
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { type: "button", className: "underline", onClick: refetch, children: "Retry" })
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("button", { type: "button", className: "underline", onClick: refetch, children: "Retry" })
           ] }) : 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_runtime50.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_genre_tree_view5.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_genre_tree_view5.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               GenrePlaylistTreeWheel,
               {
                 scope,
                 genrePlaylists: visibleGenrePlaylists,
+                focusUuids,
                 handleGenreCreationAction,
                 handleGenreRenameAction,
                 additionalActions,
@@ -3501,9 +3466,9 @@ function GenreTreeView({
                 allowWheelRotation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
                 viewportRestore,
@@ -3512,11 +3477,12 @@ 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_runtime50.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_genre_tree_view5.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "tree-container search-overlay relative flex-1 w-full min-h-0 ", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(GenreTreeWheelHandoff, { skeleton: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_genre_tree_view5.GenreTreeWheelSkeleton, {}), onRevealedChange: setIsWheelRevealed, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               GenrePlaylistTreeWheelRadialPopCore,
               {
                 scope,
                 genrePlaylists: visibleGenrePlaylists,
+                focusUuids,
                 handleGenreCreationAction,
                 handleGenreRenameAction,
                 additionalActions,
@@ -3529,9 +3495,9 @@ function GenreTreeView({
                 allowWheelRotation,
                 sizeMetric: isArtistFiltered || !canSizeByViews ? "songs" : deferredSizeMetric,
                 busy,
-                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-2", children: [
+                floatingControlsLeading: floatingControlsLeading || canSizeByViews ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2", children: [
                   floatingControlsLeading,
-                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
+                  canSizeByViews && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SizeMetricToggle, { value: sizeMetric, onChange: changeSizeMetric })
                 ] }) : void 0,
                 defaultViewport,
                 viewportRestore,
@@ -3539,12 +3505,13 @@ function GenreTreeView({
                 ...focus
               }
             ) }) })
-          ) : viewMode === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          ) : viewMode === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "tree-container flex-1 min-h-0 w-full overflow-y-auto relative", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             GenrePlaylistTreeWheelRadialPopCore,
             {
               outline: true,
               scope,
               genrePlaylists: visibleGenrePlaylists,
+              focusUuids,
               handleGenreCreationAction,
               handleGenreRenameAction,
               additionalActions,
@@ -3555,13 +3522,13 @@ function GenreTreeView({
               selectedNodeId,
               readOnly
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime50.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)]", children: Object.entries(groupedGenrePlaylistsByRoot).map(
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime51.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)]", children: Object.entries(groupedGenrePlaylistsByRoot).map(
             ([uuid, genrePlaylistTreePerRoot]) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime50.jsx)("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "graph-container relative z-10 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                     GenrePlaylistTreePerRoot,
                     {
                       scope,
@@ -3574,6 +3541,7 @@ function GenreTreeView({
                       onNodeHover: handleNodeHover,
                       ...hostPanel,
                       playback,
+                      focusUuids,
                       selectedNodeId: uuid === selectedGenrePlaylist?.root.uuid ? selectedNodeId : null,
                       readOnly,
                       wheelZoom: "modifier",
@@ -3587,13 +3555,13 @@ function GenreTreeView({
               );
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             import_ui24.DetailPanel,
             {
               ref: panelRef,
               side: "left",
               title: activePanel?.title ?? "",
-              titleInSearch: activePanel?.titleInSearch,
+              titleInSearch: !isLoading && !isError,
               headerAccent: activePanel?.headerAccent,
               headerActions: expandButton,
               onClose: activePanel?.onClose ?? noop,
@@ -3602,8 +3570,7 @@ function GenreTreeView({
               onExpandedChange: activePanel?.onExpandedChange,
               aside: activePanel?.aside,
               edgeTab: detailTab,
-              headerClassName: activePanel?.titleInSearch ? void 0 : "pt-search-clear",
-              children: activePanel?.aside && !activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+              children: activePanel?.aside && !activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
                 activePanel.content,
                 activePanel.aside
               ] }) : activePanel?.content
@@ -3620,11 +3587,11 @@ var import_genre_tree_view6 = require("@behindthemusictree/genre-tree-view");
 
 // src/genre-tree/track-list-sidebar/TrackListSidebar.tsx
 var import_react20 = require("react");
-var import_lucide_react20 = require("lucide-react");
+var import_lucide_react19 = require("lucide-react");
 var import_genre_tree31 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree32 = require("@behindthemusictree/app-kit/genre-tree");
 var import_track_noun4 = require("@behindthemusictree/app-kit/track-noun");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var useBrowserLayoutEffect = typeof window === "undefined" ? import_react20.useEffect : import_react20.useLayoutEffect;
 function TrackListSidebar({
   className: className2 = "",
@@ -3726,25 +3693,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_runtime51.jsxs)(
+  return trackList ? /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime51.jsxs)("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "origin flex text-xl", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
-              /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsx)("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "header flex h-16 items-center px-4 py-2 text-[var(--color-text)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "min-w-0 flex flex-1 flex-col justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "origin flex text-xl", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "from h-auto flex flex-col justify-center items-center mr-2", children: "From" }),
+              /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)("div", { className: "name max-w-full truncate", children: trackList.origin.label }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "info flex items-center text-body text-[var(--color-text-muted)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "info flex items-center text-body text-[var(--color-text-muted)]", children: [
               trackList.origin.type === import_genre_tree32.TrackListOriginType.GENRE_PLAYLIST ? "Genre \u2022 " : trackList.origin.type === import_genre_tree32.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_runtime51.jsx)(
+          (isCollapsed && onExpand || !isCollapsed && onMinimize) && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "button",
             {
               type: "button",
@@ -3753,11 +3720,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_runtime51.jsx)(import_lucide_react20.ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react19.ListMusic, { "aria-hidden": "true", className: "h-5 w-5" })
             }
           )
         ] }),
-        !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+        !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
           "ul",
           {
             ref: trackListRef,
@@ -3767,7 +3734,7 @@ 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_runtime51.jsx)("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              trackList.tracks.map((track, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("li", { "data-track-uuid": track.uuid, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                 TrackItem,
                 {
                   track,
@@ -3778,7 +3745,7 @@ function TrackListSidebar({
                   renderSongLink
                 }
               ) }, track.uuid)),
-              hasMore && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
+              hasMore && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("li", { ref: loadMoreSentinelRef, "aria-hidden": "true", className: "h-px" })
             ]
           }
         )
@@ -3795,10 +3762,10 @@ var import_genre_tree34 = require("@behindthemusictree/app-kit/genre-tree");
 var import_ui25 = require("@behindthemusictree/ui");
 
 // src/genre-tree/PlayerControls.tsx
-var import_lucide_react21 = require("lucide-react");
+var import_lucide_react20 = require("lucide-react");
 var import_genre_tree33 = require("@behindthemusictree/app-kit/genre-tree");
 var import_player13 = require("@behindthemusictree/app-kit/player");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function PlayerControls() {
   const {
     duration,
@@ -3817,15 +3784,15 @@ function PlayerControls() {
   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_player13.PlayStates.PLAYING;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime52.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { "aria-label": "Elapsed time", children: (0, import_genre_tree33.formatTime)(safeCurrentTime) }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-xs tabular-nums text-zinc-400", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-label": "Elapsed time", children: (0, import_genre_tree33.formatTime)(safeCurrentTime) }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             "input",
             {
               "aria-label": "Seek",
@@ -3839,11 +3806,11 @@ function PlayerControls() {
               onChange: (event) => seekTo(Number(event.currentTarget.value))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { "aria-label": "Duration", children: (0, import_genre_tree33.formatTime)(safeDuration) })
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-label": "Duration", children: (0, import_genre_tree33.formatTime)(safeDuration) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "col-start-2 flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               "button",
               {
                 type: "button",
@@ -3852,10 +3819,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_runtime52.jsx)(import_lucide_react21.SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react20.SkipBack, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               "button",
               {
                 type: "button",
@@ -3864,10 +3831,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_runtime52.jsx)(import_lucide_react21.Pause, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react21.Play, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
+                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react20.Pause, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react20.Play, { "aria-hidden": "true", className: "h-4 w-4", fill: "currentColor" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               "button",
               {
                 type: "button",
@@ -3876,14 +3843,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_runtime52.jsx)(import_lucide_react21.SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react20.SkipForward, { "aria-hidden": "true", className: "h-4 w-4" })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)(import_lucide_react21.VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react21.Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "sr-only", children: "Volume" }),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsx)(import_lucide_react20.VolumeX, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react20.Volume2, { "aria-hidden": "true", className: "h-[0.7rem] w-[0.7rem] shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "sr-only", children: "Volume" }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               "input",
               {
                 "aria-label": "Volume",
@@ -3905,7 +3872,7 @@ function PlayerControls() {
 }
 
 // src/genre-tree/PlayerPanel.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var PANEL_ID = "player-panel";
 var DEFAULT_EXTENDED_WIDTH = "calc(100vw - var(--layout-center-left) - var(--layout-gutter))";
 function PlayerPanel({
@@ -3945,7 +3912,7 @@ function PlayerPanel({
     onClick: () => setIsExtendRequested(true),
     expanded: false
   } : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     "div",
     {
       id: PANEL_ID,
@@ -3958,7 +3925,7 @@ function PlayerPanel({
       ),
       style: isExtended ? { width: extendedWidth } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           import_ui25.PanelEdgeTab,
           {
             side: "right",
@@ -3968,7 +3935,7 @@ function PlayerPanel({
             className: "absolute right-full top-1/2 -translate-y-1/2"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
           "div",
           {
             className: (0, import_tailwind_merge.twMerge)(
@@ -3976,20 +3943,20 @@ function PlayerPanel({
               isExtended ? "flex-row" : "flex-col"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "relative w-full shrink-0", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_player14.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
-                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-[var(--layout-right-w)] shrink-0 flex-col", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "relative w-full shrink-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_player14.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
+                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
                     playerTrackObject.loadError,
-                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("button", { type: "button", className: "ml-2 underline", onClick: () => {
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { type: "button", className: "ml-2 underline", onClick: () => {
                       void retryPlayback();
                     }, children: "Retry" })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PlayerControls, {})
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PlayerControls, {})
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 TrackListSidebar,
                 {
                   layout: "inline",
@@ -4016,11 +3983,11 @@ function PlayerPanel({
 var import_uuid = require("uuid");
 var import_ai = require("react-icons/ai");
 var import_genre_tree35 = require("@behindthemusictree/app-kit/genre-tree");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function Rating({ rating, handleChange }) {
   const instanceId = (0, import_uuid.v4)();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex items-center", children: [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: `relative ${i === 0 ? "mr-4" : "mr-1"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "input",
       {
         id: `star-${instanceId}-${i}`,
@@ -4032,16 +3999,16 @@ function Rating({ rating, handleChange }) {
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("label", { htmlFor: `star-${instanceId}-${i}`, className: "cursor-pointer", children: i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         import_ai.AiOutlineStar,
         {
           className: `w-7 h-7 absolute top-0 left-0 ${rating === import_genre_tree35.FORM_RATING_NULL_VALUE ? "text-[var(--color-accent-rating)]" : "text-[var(--color-text-muted)]"}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "flex-grow w-8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "flex-grow w-8" }),
       " "
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime55.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)]"}`
@@ -4053,7 +4020,7 @@ function Rating({ rating, handleChange }) {
 // src/genre-tree/EntityDetailPanel.tsx
 var import_react22 = require("react");
 var import_ui26 = require("@behindthemusictree/ui");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function EntityDetailPanel({
   scope,
   getBackendBaseUrl,
@@ -4076,8 +4043,8 @@ function EntityDetailPanel({
     getBackendBaseUrl,
     getArtistBackendBaseUrl,
     getShareUrl,
-    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { type: "button", onClick: () => onArtistUuidChange(artist.uuid), className: "hover:underline", children: artist.name })),
-    renderSongLink: renderSongLink ?? ((song) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { type: "button", onClick: () => onSongUuidChange(song.uuid), className: "hover:underline", children: song.title })),
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("button", { type: "button", onClick: () => onArtistUuidChange(artist.uuid), className: "hover:underline", children: artist.name })),
+    renderSongLink: renderSongLink ?? ((song) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("button", { type: "button", onClick: () => onSongUuidChange(song.uuid), className: "hover:underline", children: song.title })),
     song: {
       uuid: songUuid,
       expanded: songUuid !== null && expandedSongUuid === songUuid,
@@ -4093,7 +4060,7 @@ function EntityDetailPanel({
     ...navigation
   });
   if (!panel) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     import_ui26.DetailPanel,
     {
       side: "left",
@@ -4105,7 +4072,7 @@ function EntityDetailPanel({
       onExpandedChange: panel.onExpandedChange,
       aside: panel.extraContent,
       edgeTab,
-      children: panel.extraContent && !panel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+      children: panel.extraContent && !panel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
         panel.content,
         panel.extraContent
       ] }) : panel.content